tinacms 0.66.7 → 0.66.10

package/dist/index.es.js

@@ -29,17 +29,18 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { EventBus, Modal, ModalPopup, ModalHeader, ModalBody, ModalActions, Button, LoadingDots, useLocalStorage, TinaCMS, BranchSwitcherPlugin, BranchDataProvider, TinaProvider, useCMS, useBranchData, FormMetaPlugin, Form, GlobalFormPlugin, Nav, LocalWarning, FormStatus, FormBuilder } from "@tinacms/toolkit";
+import { useCMS, useBranchData, FormMetaPlugin, Form, GlobalFormPlugin, EventBus, Modal, ModalPopup, ModalHeader, ModalBody, ModalActions, Button, LoadingDots, useLocalStorage, TinaCMS, BranchSwitcherPlugin, BranchDataProvider, TinaProvider, Nav, LocalWarning, FormStatus, FormBuilder } from "@tinacms/toolkit";
 export * from "@tinacms/toolkit";
 import * as G from "graphql";
-import { TypeInfo, visit, visitWithTypeInfo, getNamedType, GraphQLObjectType, isLeafType, GraphQLUnionType, isScalarType, getIntrospectionQuery, buildClientSchema, print, parse } from "graphql";
+import { TypeInfo, visit, visitWithTypeInfo, getNamedType, GraphQLObjectType, isLeafType, GraphQLUnionType, isScalarType as isScalarType$1, getIntrospectionQuery, buildClientSchema, print, parse } from "graphql";
 import set from "lodash.set";
 import React, { useState, useCallback, useEffect, Fragment, useMemo } from "react";
+import { getIn, setIn } from "final-form";
+import { resolveForm, TinaSchema, addNamespaceToSchema } from "@tinacms/schema-tools";
 import gql$1 from "graphql-tag";
-import styled from "styled-components";
 import * as yup from "yup";
+import styled from "styled-components";
 import { setEditing, TinaDataContext, useEditState } from "@tinacms/sharedctx";
-import { getIn, setIn } from "final-form";
 import UrlPattern from "url-pattern";
 import { NavLink, useNavigate, useParams, Link, HashRouter, Routes, Route } from "react-router-dom";
 import { Menu, Transition } from "@headlessui/react";
@@ -287,7 +288,7 @@ const buildSelectionsFields = (fields, callback) => {
     const result = callback(fields);
     if (!result.continue) {
       if (fields.every((field) => {
-        return !isScalarType(getNamedType(field.type));
+        return !isScalarType$1(getNamedType(field.type));
       })) {
         return [
           {
@@ -300,7 +301,7 @@ const buildSelectionsFields = (fields, callback) => {
         ];
       }
       return buildSelectionsFields(result.filteredFields.filter((field) => {
-        if (isScalarType(getNamedType(field.type))) {
+        if (isScalarType$1(getNamedType(field.type))) {
           return true;
         }
         return false;
@@ -376,1303 +377,2563 @@ function assertIsUnionType(type) {
     throw new Error(`Expected an instance of GraphQLUnionType for type ${type.name}`);
   }
 }
-const isNodeField = (type) => {
-  if (G.isUnionType(type)) {
-    return type.getTypes().every((type2) => {
-      return type2.getInterfaces().find((intfc) => intfc.name === "Node");
-    });
-  } else if (G.isObjectType(type)) {
-    return !!type.getInterfaces().find((intfc) => intfc.name === "Node");
-  } else if (G.isInterfaceType(type)) {
-    if (type.name === "Node") {
-      return true;
-    }
-  } else {
-    throw new Error(`Expected GraphQLObjectType or GraphQLUnionType for isNodeField check`);
-  }
-};
-const isConnectionField = (type) => {
-  if (G.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.isUnionType(type)) {
-    throw new Error(`Expected type to be GraphQLUnionType`);
-  }
-}
-function ensureObjectType(type) {
-  if (!G.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);
+  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.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.parse(query);
-  const visitor2 = {
-    OperationDefinition: (node2) => {
-      if (!node2.name) {
-        return __spreadProps(__spreadValues({}, node2), {
-          name: {
-            kind: "Name",
-            value: `QueryOperation`
-          }
-        });
+  formify: formify2,
+  eventList
+}) {
+  const cms = useCMS();
+  React.useEffect(() => {
+    console.log("NOTE: using unstable formify");
+  }, []);
+  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 = useCMS();
+  const [formValues, setFormValues] = React.useState({});
+  const [data, setData] = React.useState(null);
+  const [initialData, setInitialData] = React.useState({});
+  const [pendingReset, setPendingReset] = React.useState(null);
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [newUpdate, setNewUpdate] = React.useState(null);
+  const { currentBranch } = useBranchData();
+  const updateData = async () => {
+    var _a;
+    if (newUpdate) {
+      const newValue = getIn(formValues, newUpdate.get);
+      const activeForm = getIn(data, [newUpdate.queryName, "form"].join("."));
+      if (!activeForm) {
+        throw new Error(`Unable to find form for query ${newUpdate.queryName}`);
       }
-      return node2;
-    }
-  };
-  const documentNodeWithName = visit(documentNode, visitor2);
-  const optimizedQuery = await getOptimizedQuery(documentNodeWithName);
-  const typeInfo = new G.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.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 = setIn(data, newUpdate.set, res.node);
+          const newDataAndNewJSONData2 = setIn(newData2, newUpdate.set.replace("data", "dataJSON"), newValue);
+          setData(newDataAndNewJSONData2);
+          setNewUpdate(null);
+          return;
+        }
       }
-    });
-  };
-  function formifyNode({
-    fieldOrInlineFragmentNode,
-    parentType,
-    path
-  }) {
-    let extraFields = [];
-    const namedParentType = G.getNamedType(parentType);
-    const formifiedNode = __spreadProps(__spreadValues({}, fieldOrInlineFragmentNode), {
-      selectionSet: {
-        kind: "SelectionSet",
-        selections: [
-          ...fieldOrInlineFragmentNode.selectionSet.selections.map((selectionNode) => {
-            switch (selectionNode.kind) {
-              case "InlineFragment":
-                if (G.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.isObjectType(namedParentType)) {
-                    const field = getObjectField(namedParentType, selectionNode);
-                    const namedType = G.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.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.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 = setIn(data, newUpdate.set, newValue);
+      const newDataAndNewJSONData = setIn(newData, newUpdate.set.replace("data", "dataJSON"), newValue);
+      setData(newDataAndNewJSONData);
+      setNewUpdate(null);
     }
-    const namedType = G.getNamedType(field.type);
-    if (G.isScalarType(namedType)) {
-      return fieldNode;
+  };
+  React.useEffect(() => {
+    updateData();
+  }, [JSON.stringify(formValues)]);
+  React.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.isScalarType(G.getNamedType(field2.type))) {
-                  return selectionNode;
+  }, [pendingReset]);
+  React.useEffect(() => {
+    if (!query) {
+      setIsLoading(false);
+      return;
+    }
+    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 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
+                });
+              } 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);
                 }
-                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.getNamedType(field2.type);
-                          ensureNodeField(namedType2);
-                          return formifyNode({
-                            fieldOrInlineFragmentNode: selectionNode2,
-                            parentType: field2.type,
-                            path
-                          });
-                        default:
-                          throw new FormifyError("UNEXPECTED", `selection ${selectionNode2.kind}`);
-                      }
-                    })
-                  }
+              }
+            } catch (e) {
+              console.error(e);
+              cms.alerts.error("There was a problem saving your document");
+            }
+          }
+        };
+        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 = 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;
+        };
+        if (skipped)
+          return;
+        if (formify2) {
+          form = formify2({ formConfig, createForm, createGlobalForm, skip }, cms);
+        } else {
+          form = createForm(formConfig);
+        }
+        if (!(form instanceof 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 {
+            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);
+        };
+        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;
+  }
+  if (Array.isArray(data)) {
+    return data.map((item) => transformParams(item));
+  }
+  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);
+      });
+      return accum;
+    } else {
+      if (!data) {
+        return [];
+      }
+      throw e;
+    }
+  }
+};
+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 = 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;
+    }
+  });
+  return currentFields;
+};
+const generateFormCreators = (cms) => {
+  const createForm = (formConfig) => {
+    const form = new Form(formConfig);
+    cms.forms.add(form);
+    return form;
+  };
+  const createGlobalForm = (formConfig, options) => {
+    const form = new Form(formConfig);
+    cms.plugins.add(new 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 Form(formConfig);
+    if (showInSidebar) {
+      cms.forms.add(form);
+    }
+    return form;
+  };
+  const createGlobalForm = (formConfig, options) => {
+    const form = new Form(formConfig);
+    if (showInSidebar) {
+      cms.plugins.add(new 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);
+          }
+        }
+      } catch (e) {
+        console.error(e);
+        cms.alerts.error("There was a problem saving your document");
+      }
+    }
+  };
+  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 = 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);
+  }
+  if (formify2) {
+    form = formify2({
+      formConfig,
+      createForm,
+      createGlobalForm,
+      skip
+    }, cms);
+  } else {
+    form = createForm(formConfig);
+  }
+  if (!(form instanceof Form)) {
+    if (skipped === SKIPPED) {
+      return;
+    }
+    throw new Error("formify must return a form or skip()");
+  }
+  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 [];
+  }
+  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);
+  }
+  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 = 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("[]");
+    }
+  });
+  return aliasPath.join(".");
+};
+const getBlueprintFieldsForEvent = (blueprint, event) => {
+  return blueprint.fields.filter((fbp) => {
+    if (getBlueprintNamePath(fbp) === getEventPath(event, blueprint)) {
+      return true;
+    }
+  }).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 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(`[]`);
+  }
+  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);
+  }
+  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;
+      }
+    });
+  }
+  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;
+    }
+    return item;
+  });
+};
+const maybeLowerLocation = (location, at) => {
+  return location.map((item, index) => {
+    if (index === location.length - 1) {
+      return item < at ? item : item - 1;
+    }
+    return item;
+  });
+};
+const matchesAt = (location, at) => {
+  let matches = false;
+  location.map((item, index) => {
+    if (index === location.length - 1) {
+      if (item === at) {
+        matches = true;
+      }
+    }
+  });
+  return matches;
+};
+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];
+  }
+  return { fields, __typename };
+};
+const isFormifiableDocument = (t) => {
+  const type = G.getNamedType(t);
+  if (G.isUnionType(type)) {
+    return type.getTypes().every((type2) => {
+      return type2.getInterfaces().find((intfc) => intfc.name === "Node");
+    });
+  } else if (G.isObjectType(type)) {
+    return !!type.getInterfaces().find((intfc) => intfc.name === "Node");
+  } else {
+    return false;
+  }
+};
+const isScalarType = (t) => {
+  const namedType = G.getNamedType(t);
+  return G.isScalarType(namedType);
+};
+const isConnectionField = (t) => {
+  const type = G.getNamedType(t);
+  if (G.isObjectType(type)) {
+    return !!type.getInterfaces().find((intfc) => intfc.name === "Connection");
+  } else {
+    throw new Error(`Expected GraphQLObjectType for isConnectionField check`);
+  }
+};
+const getObjectField = (object, selectionNode) => {
+  const namedType = G.getNamedType(object);
+  ensureObjectOrInterfaceType(namedType);
+  return namedType.getFields()[selectionNode.name.value];
+};
+const getSelectedUnionType = (unionType, selectionNode) => {
+  const namedType = G.getNamedType(unionType);
+  if (!G.isUnionType(namedType)) {
+    return;
+  }
+  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;
+  }
+  return namedType.getTypes().find((type) => type.name === typeCondition);
+};
+function isListType(type) {
+  if (G.isListType(type)) {
+    return true;
+  } else if (G.isNonNullType(type)) {
+    if (G.isListType(type.ofType)) {
+      return true;
+    }
+  }
+  return false;
+}
+function ensureObjectOrInterfaceType(type) {
+  if (G.isInterfaceType(type) || G.isObjectType(type))
+    ;
+  else {
+    console.log("Expected type to be GraphQLObjectType or GraphQLInterfaceType", type);
+    throw new Error(`Expected type to be GraphQLObjectType or GraphQLInterfaceType`);
+  }
+}
+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 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 node = G.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 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 namePath.join(".");
+};
+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.parse(query);
+  const visitor = {
+    OperationDefinition: (node2) => {
+      if (!node2.name) {
+        return __spreadProps(__spreadValues({}, node2), {
+          name: {
+            kind: "Name",
+            value: `QueryOperation`
+          }
+        });
+      }
+      return node2;
+    }
+  };
+  const documentNodeWithName = G.visit(documentNode, visitor);
+  const optimizedQuery = await getOptimizedQuery(documentNodeWithName);
+  const typeInfo = new G.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
                 });
-              case "InlineFragment":
-                ensureUnionType(namedType);
-                if (isNodeField(namedType)) {
-                  const parentType2 = getSelectedUnionType(namedType, selectionNode);
-                  return formifyNode({
-                    fieldOrInlineFragmentNode: selectionNode,
-                    parentType: parentType2,
-                    path
-                  });
-                }
-                return __spreadProps(__spreadValues({}, selectionNode), {
+                return __spreadProps(__spreadValues({}, selectionNode2), {
                   selectionSet: {
                     kind: "SelectionSet",
-                    selections: selectionNode.selectionSet.selections.map((subSelectionNode) => {
+                    selections: selectionNode2.selectionSet.selections.map((subSelectionNode) => {
                       switch (subSelectionNode.kind) {
                         case "Field":
-                          const parentType2 = getSelectedUnionType(namedType, selectionNode);
-                          return formifyField({
-                            fieldNode: subSelectionNode,
-                            parentType: parentType2,
-                            path
-                          });
+                          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("UNEXPECTED", `selection ${subSelectionNode.kind}`);
+                          throw new FormifyError("NOOP");
                       }
                     })
                   }
                 });
-              default:
-                throw new FormifyError("UNEXPECTED", `selection ${selectionNode.kind}`);
-            }
-          })
-        ]
+              }
+              return selectionNode2;
+            default:
+              throw new FormifyError("UNEXPECTED");
+          }
+        })
       }
     });
   };
-  const formifiedQuery = {
-    kind: "Document",
-    definitions: optimizedQuery.definitions.map((definition) => {
-      typeInfo.enter(definition);
-      ensureOperationDefinition(definition);
-      const type = typeInfo.getType();
-      const namedType = G.getNamedType(type);
-      ensureObjectType(namedType);
-      return __spreadProps(__spreadValues({}, definition), {
-        selectionSet: {
-          kind: "SelectionSet",
-          selections: definition.selectionSet.selections.map((selectionNode) => {
+  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;
+        }
+      }
+    });
+    if (shouldFormify) {
+      blueprints.push({
+        id: getBlueprintId(path),
+        path,
+        selection,
+        fields: [],
+        showInSidebar,
+        hasDataJSONField,
+        hasValuesField
+      });
+      extraFields = metaFields;
+    }
+    return __spreadProps(__spreadValues({}, selection), {
+      selectionSet: {
+        kind: "SelectionSet",
+        selections: [
+          ...selection.selectionSet.selections.map((selectionNode) => {
             switch (selectionNode.kind) {
-              case "Field":
-                const parentType = type;
-                const namedParentType = G.getNamedType(parentType);
-                ensureObjectType(namedParentType);
-                const field = getObjectField(namedParentType, selectionNode);
-                const namedFieldType = G.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)]
+              case "InlineFragment": {
+                const namedType = G.getNamedType(type);
+                if (G.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
                   });
                 }
-                if (selectionNode.name.value === COLLECTION_FIELD_NAME || selectionNode.name.value === COLLECTIONS_FIELD_NAME) {
+                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((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.getNamedType(n.type);
-                              return formifyConnection({
-                                namedFieldType: docType,
-                                selectionNode: selectionNode2,
-                                path: [getNameAndAlias(selectionNode2)]
+                      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
+                                })
                               });
-                            }
-                            return selectionNode2;
-                          default:
-                            throw new FormifyError("NOOP");
-                        }
-                      })
+                            default:
+                              throw new FormifyError("UNEXPECTED", `selection ${subSelectionNode.kind}`);
+                          }
+                        })
+                      ]
                     }
                   });
                 }
-                throw new FormifyError("NOOP");
+                return selectionNode;
+              }
               default:
                 throw new FormifyError("UNEXPECTED");
             }
-          })
-        }
-      });
-    })
-  };
-  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 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(getIntrospectionQuery(), {
-          variables: {}
-        });
-        this.schema = buildClientSchema(data);
-      }
-      return this.schema;
-    };
-    this.getOptimizedQuery = async (documentNode) => {
-      const data = await this.request(`query GetOptimizedQuery($queryString: String!) {
-        getOptimizedQuery(queryString: $queryString)
-      }`, {
-        variables: { queryString: print(documentNode) }
-      });
-      return 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));
-        };
-        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: print(query(gql$1)),
-        getOptimizedQuery: this.getOptimizedQuery
-      });
-      formifiedQuery = res.formifiedQuery;
-    } else {
-      formifiedQuery = formify$1(query(gql$1), schema);
-    }
-    return this.request(print(formifiedQuery), { variables });
+          }),
+          ...extraFields
+        ]
+      }
+    });
   }
-  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" ? print(query(gql$1)) : query,
-        variables
-      })
+  const formifyFieldNode = ({
+    fieldNode,
+    parentType,
+    path
+  }) => {
+    if (fieldNode.name.value === "__typename") {
+      return fieldNode;
+    }
+    const field = getObjectField(parentType, fieldNode);
+    if (!field) {
+      return fieldNode;
+    }
+    const blueprint = blueprints.find((blueprint2) => blueprint2.id === getRelativeBlueprint(path));
+    if (!blueprint) {
+      return fieldNode;
+    }
+    const fieldPath = buildPath({
+      fieldNode,
+      type: field.type,
+      parentTypename: G.getNamedType(parentType).name,
+      path
     });
-    if (res.status !== 200) {
-      throw new Error(`Unable to complete request, ${res.statusText}`);
+    blueprint.fields.push({
+      id: getBlueprintId(fieldPath),
+      documentBlueprintId: blueprint.id,
+      path: fieldPath
+    });
+    if (isScalarType(field.type)) {
+      return fieldNode;
     }
-    const json = await res.json();
-    if (json.errors) {
-      throw new Error(`Unable to fetch, errors: 
-	${json.errors.map((error) => error.message).join("\n")}`);
+    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}`);
+            }
+          })
+        ]
+      }
+    });
+  };
+  const formifyInlineFragmentNode = ({
+    inlineFragmentNode,
+    parentType,
+    path
+  }) => {
+    const type = getSelectedUnionType(parentType, inlineFragmentNode);
+    if (!type) {
+      return inlineFragmentNode;
     }
-    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 (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}`);
           }
         })
-      });
-      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);
+    });
+  };
+  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;
     }
-    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))
-    }));
+    super(`${message} ${details || ""}`);
+    this.name = "FormifyError";
   }
-  async getUser() {
-    if (!this.clientId) {
-      return null;
+}
+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.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);
+      }
+      return __spreadProps(__spreadValues({}, state), {
+        formNodes: [...existingDocumentFormNodes, action.value.formNode],
+        documentForms: [...existingDocumentForms, ...newDocumentForms]
+      });
     }
-    const url = `${this.identityApiUrl}/v2/apps/${this.clientId}/currentUser`;
-    try {
-      const res = await this.fetchWithToken(url, {
-        method: "GET"
+    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 val = await res.json();
-      if (!res.status.toString().startsWith("2")) {
-        console.error(val.error);
-        return null;
+      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);
       }
-      return val;
-    } catch (e) {
-      console.error(e);
-      return null;
+      return __spreadProps(__spreadValues({}, state), {
+        changeSets,
+        formNodes: [
+          ...state.formNodes.filter((formNode) => formNodeNotIn(formNode, formNodesToReplace)).filter((formNode) => formNodeNotIn(formNode, formNodesToRemove)),
+          ...newFormNodes
+        ],
+        documentForms: [...existingDocumentForms, ...newDocumentForms]
+      });
     }
-  }
-  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"
+    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 = getIn(state.data, action.value.path) || [];
+        newData = setIn(state.data, action.value.path, [
+          action.value.value,
+          ...existing
+        ]);
+      } else {
+        newData = 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
       });
-      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;
     }
+    default:
+      return state;
   }
 }
-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
+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.useRef([]);
+  const [state, dispatch] = React.useReducer(reducer, {
+    status: "idle",
+    schema: void 0,
+    query: query ? G.parse(query) : null,
+    queryString: query,
+    data: {},
+    changeSets: [],
+    count: 0,
+    blueprints: [],
+    formNodes: [],
+    documentForms: []
+  });
+  React.useEffect(() => {
+    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.useEffect(() => {
+    if (state.status === "initialized") {
+      cms.api.tina.request(query, { variables }).then((res) => {
+        delete res.paths;
+        dispatch({ type: "setData", value: res });
+      });
+    }
+  }, [state.status]);
+  React.useEffect(() => {
+    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
+      });
     };
-    super(clientProps);
-  }
-  async isAuthorized() {
-    return true;
-  }
-  async isAuthenticated() {
-    return true;
-  }
-}
-function ModalBuilder(modalProps) {
-  return /* @__PURE__ */ React.createElement(Modal, null, /* @__PURE__ */ React.createElement(ModalPopup, null, /* @__PURE__ */ React.createElement(ModalHeader, null, modalProps.title), /* @__PURE__ */ React.createElement(ModalBody, {
-    padded: true
-  }, /* @__PURE__ */ React.createElement("p", null, modalProps.message), modalProps.error && /* @__PURE__ */ React.createElement(ErrorLabel, null, modalProps.error)), /* @__PURE__ */ React.createElement(ModalActions, null, modalProps.actions.map((action) => /* @__PURE__ */ React.createElement(AsyncButton, __spreadValues({
-    key: action.name
-  }, action))))));
-}
-const ErrorLabel = styled.p`
-  color: var(--tina-color-error) !important;
-`;
-const AsyncButton = ({ name, primary, action }) => {
-  const [submitting, setSubmitting] = useState(false);
-  const onClick = useCallback(async () => {
-    setSubmitting(true);
-    try {
-      await action();
-      setSubmitting(false);
-    } catch (e) {
-      setSubmitting(false);
-      throw e;
+    if (state.status === "initialized") {
+      run();
     }
-  }, [action, setSubmitting]);
-  return /* @__PURE__ */ React.createElement(Button, {
-    variant: primary ? "primary" : "secondary",
-    onClick,
-    busy: submitting,
-    disabled: submitting
-  }, submitting && /* @__PURE__ */ React.createElement(LoadingDots, null), !submitting && name);
-};
-const TINA_AUTH_CONFIG = "tina_auth_config";
-const useTinaAuthRedirect = () => {
-  useEffect(() => {
-    const urlParams = new URLSearchParams(window.location.search);
-    const config = {
-      code: urlParams.get("code") || "",
-      scope: urlParams.get("scope") || "email",
-      state: urlParams.get("state")
+  }, [state.status]);
+  React.useEffect(() => {
+    const run = async () => {
+      const result = await cms.api.tina.request(G.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 {
+                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
+                    }
+                  });
+                }
+              }
+            });
+          } 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
+                }
+              });
+            }
+          }
+        };
+        findFormNodes(responseAtBlueprint, location);
+      });
+      dispatch({ type: "ready" });
     };
-    if (!config.code) {
-      return;
+    if (state.status === "formified") {
+      run();
     }
-    localStorage[TINA_AUTH_CONFIG] = JSON.stringify(config);
-  }, []);
-};
-const createClient = ({
-  clientId,
-  isLocalClient = true,
-  branch,
-  tinaioConfig
-}) => {
-  return isLocalClient ? new LocalClient() : new Client({
-    clientId: clientId || "",
-    branch: branch || "main",
-    tokenStorage: "LOCAL_STORAGE",
-    tinaioConfig
-  });
-};
-function assertShape(value, yupSchema, errorMessage) {
-  const shape = yupSchema(yup);
-  try {
-    shape.validateSync(value);
-  } catch (e) {
-    const message = errorMessage || `Failed to assertShape - ${e.message}`;
-    throw new Error(message);
-  }
-}
-function safeAssertShape(value, yupSchema) {
-  try {
-    assertShape(value, yupSchema);
-    return true;
-  } catch (e) {
-    return false;
-  }
-}
-class TinaAdminApi {
-  constructor(cms) {
-    this.api = cms.api.tina;
-  }
-  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
-                  }
+  }, [state.status]);
+  React.useEffect(() => {
+    if (state.status === "ready") {
+      cms.events.subscribe(`forms:reset`, (event) => {
+        if (eventList) {
+          eventList.push(printEvent(event));
+        }
+        dispatch({ type: "formOnReset", value: { event } });
+      });
+      cms.events.subscribe(`forms:fields:onChange`, async (event) => {
+        if (eventList) {
+          eventList.push(printEvent(event));
+        }
+        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);
+            }
+          }
+          dispatch({
+            type: "onFieldChange",
+            value: {
+              event: __spreadProps(__spreadValues({}, event), {
+                mutationType: { type: "referenceChange" }
+              }),
+              form
+            }
+          });
+        } else {
+          dispatch({ type: "onFieldChange", value: { event } });
+        }
+      });
+      dispatch({ type: "done" });
+    }
+  }, [state.status]);
+  React.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.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.useEffect(() => {
+    formIds.current = state.documentForms.map((df) => df.id);
+  }, [state.documentForms.length]);
+  React.useEffect(() => {
+    return () => {
+      formIds.current.forEach((formId) => {
+        const form = cms.forms.find(formId);
+        if (form) {
+          cms.plugins.remove(form);
+        }
+      });
+    };
+  }, []);
+  const resolveSubFields = React.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.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.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 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
         }
-      }`, { 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
+}`;
+      const result = await this.request(mutation, {
+        variables: props
+      });
+      return result;
+    };
+    this.getSchema = async () => {
+      if (!this.gqlSchema) {
+        const data = await this.request(getIntrospectionQuery(), {
+          variables: {}
+        });
+        this.gqlSchema = buildClientSchema(data);
+      }
+      return this.gqlSchema;
+    };
+    this.getOptimizedQuery = async (documentNode) => {
+      const data = await this.request(`query GetOptimizedQuery($queryString: String!) {
+        getOptimizedQuery(queryString: $queryString)
+      }`, {
+        variables: { queryString: print(documentNode) }
+      });
+      return parse(data.getOptimizedQuery);
+    };
+    if (options.schema) {
+      const enrichedSchema = new TinaSchema(__spreadValues({
+        version: { fullVersion: "", major: "", minor: "", patch: "" },
+        meta: { flags: [] }
+      }, 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");
         }
-      }`, { variables: { collection: collectionName, relativePath } });
-    return response;
+        this.getToken = options.getTokenFn;
+        break;
+    }
   }
-  async fetchDocumentFields() {
-    const response = await this.api.request(`#graphql
-      query { 
-        getDocumentFields 
-      }`, { variables: {} });
-    return response;
+  get isLocalMode() {
+    return this.contentApiUrl.includes("localhost");
   }
-  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;
+  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 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;
+  async requestWithForm(query, {
+    variables,
+    useUnstableFormify
+  }) {
+    const schema = await this.getSchema();
+    let formifiedQuery;
+    if (useUnstableFormify) {
+      const res = await formify({
+        schema,
+        query: print(query(gql$1)),
+        getOptimizedQuery: this.getOptimizedQuery
+      });
+      formifiedQuery = res.formifiedQuery;
+    } else {
+      formifiedQuery = formify$1(query(gql$1), schema);
+    }
+    return this.request(print(formifiedQuery), { variables });
   }
-}
-function sleep(ms) {
-  return new Promise((resolve) => setTimeout(resolve, ms));
-}
-const AuthWallInner = ({
-  children,
-  cms,
-  loginScreen,
-  getModalActions
-}) => {
-  const client = cms.api.tina;
-  const [activeModal, setActiveModal] = useState(null);
-  const [showChildren, setShowChildren] = useState(false);
-  React.useEffect(() => {
-    client.isAuthenticated().then((isAuthenticated) => {
-      if (isAuthenticated) {
-        setShowChildren(true);
-        cms.enable();
-      } else {
-        sleep(500).then(() => {
-          setActiveModal("authenticate");
-        });
-      }
+  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" ? print(query(gql$1)) : query,
+        variables
+      })
     });
-  }, []);
-  const onAuthSuccess = async () => {
-    if (await client.isAuthenticated()) {
-      setShowChildren(true);
-      setActiveModal(null);
-    } else {
-      throw new Error("No access to repo");
+    if (res.status !== 200) {
+      throw new Error(`Unable to complete request, ${res.statusText}`);
     }
-  };
-  const otherModalActions = getModalActions ? getModalActions({
-    closeModal: () => {
-      setActiveModal(null);
+    const json = await res.json();
+    if (json.errors) {
+      throw new Error(`Unable to fetch, errors: 
+	${json.errors.map((error) => error.message).join("\n")}`);
     }
-  }) : [];
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, activeModal === "authenticate" && /* @__PURE__ */ React.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 () => {
-          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 TinaCloudProvider = (props) => {
-  const baseBranch = props.branch || "main";
-  const [currentBranch, setCurrentBranch] = useLocalStorage("tinacms-current-branch", baseBranch);
-  useTinaAuthRedirect();
-  const cms = React.useMemo(() => props.cms || new TinaCMS({
-    enabled: true,
-    sidebar: true
-  }), [props.cms]);
-  if (!cms.api.tina) {
-    cms.registerApi("tina", createClient(props));
+    return json.data;
   }
-  if (!cms.api.admin) {
-    cms.registerApi("admin", new TinaAdminApi(cms));
+  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);
   }
-  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);
+  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);
     }
-  };
-  const handleListBranches = async () => {
-    const { owner, repo } = props;
-    const branches = await cms.api.tina.listBranches({ owner, repo });
-    if (!Array.isArray(branches)) {
-      return [];
+    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;
     }
-    return branches;
-  };
-  const handleCreateBranch = async (data) => {
-    const newBranch = await cms.api.tina.createBranch(data);
-    return newBranch;
-  };
-  setupMedia();
-  const [branchingEnabled, setBranchingEnabled] = React.useState(() => cms.flags.get("branch-switcher"));
-  React.useEffect(() => {
-    cms.events.subscribe("flag:set", ({ key, value }) => {
-      if (key === "branch-switcher") {
-        setBranchingEnabled(value);
-      }
-    });
-  }, [cms.events]);
-  React.useEffect(() => {
-    let branchSwitcher;
-    if (branchingEnabled) {
-      branchSwitcher = new BranchSwitcherPlugin({
-        listBranches: handleListBranches,
-        createBranch: handleCreateBranch
+    const url = `${this.identityApiUrl}/v2/apps/${this.clientId}/currentUser`;
+    try {
+      const res = await this.fetchWithToken(url, {
+        method: "GET"
       });
-      cms.plugins.add(branchSwitcher);
-    }
-    return () => {
-      if (branchingEnabled && branchSwitcher) {
-        cms.plugins.remove(branchSwitcher);
+      const val = await res.json();
+      if (!res.status.toString().startsWith("2")) {
+        console.error(val.error);
+        return null;
       }
-    };
-  }, [branchingEnabled, props.branch]);
-  React.useEffect(() => {
-    if (props.cmsCallback) {
-      props.cmsCallback(cms);
-    }
-  }, []);
-  return /* @__PURE__ */ React.createElement(BranchDataProvider, {
-    currentBranch,
-    setCurrentBranch: (b) => {
-      setCurrentBranch(b);
+      return val;
+    } catch (e) {
+      console.error(e);
+      return null;
     }
-  }, /* @__PURE__ */ React.createElement(TinaProvider, {
-    cms
-  }, /* @__PURE__ */ React.createElement(AuthWallInner, __spreadProps(__spreadValues({}, props), {
-    cms
-  }))));
-};
-const TinaCloudAuthWall = TinaCloudProvider;
-function useGraphqlForms({
-  variables,
-  onSubmit,
-  formify: formify2 = null,
-  query
-}) {
-  const cms = useCMS();
-  const [formValues, setFormValues] = React.useState({});
-  const [data, setData] = React.useState(null);
-  const [initialData, setInitialData] = React.useState({});
-  const [pendingReset, setPendingReset] = React.useState(null);
-  const [isLoading, setIsLoading] = React.useState(true);
-  const [newUpdate, setNewUpdate] = React.useState(null);
-  const { currentBranch } = useBranchData();
-  const updateData = async () => {
-    var _a;
-    if (newUpdate) {
-      const newValue = getIn(formValues, newUpdate.get);
-      const activeForm = getIn(data, [newUpdate.queryName, "form"].join("."));
-      if (!activeForm) {
-        throw new Error(`Unable to find form for query ${newUpdate.queryName}`);
-      }
-      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 = setIn(data, newUpdate.set, res.node);
-          const newDataAndNewJSONData2 = setIn(newData2, newUpdate.set.replace("data", "dataJSON"), newValue);
-          setData(newDataAndNewJSONData2);
-          setNewUpdate(null);
-          return;
-        }
-      }
-      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];
-            }
-          });
+  }
+  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"
         }
-      }
-      const newData = setIn(data, newUpdate.set, newValue);
-      const newDataAndNewJSONData = setIn(newData, newUpdate.set.replace("data", "dataJSON"), newValue);
-      setData(newDataAndNewJSONData);
-      setNewUpdate(null);
-    }
-  };
-  React.useEffect(() => {
-    updateData();
-  }, [JSON.stringify(formValues)]);
-  React.useEffect(() => {
-    if (pendingReset) {
-      setData(__spreadProps(__spreadValues({}, data), { [pendingReset]: initialData[pendingReset] }));
-      setPendingReset(null);
+      });
+      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;
     }
-  }, [pendingReset]);
-  React.useEffect(() => {
-    if (!query) {
-      setIsLoading(false);
+  }
+}
+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.createElement(Modal, null, /* @__PURE__ */ React.createElement(ModalPopup, null, /* @__PURE__ */ React.createElement(ModalHeader, null, modalProps.title), /* @__PURE__ */ React.createElement(ModalBody, {
+    padded: true
+  }, /* @__PURE__ */ React.createElement("p", null, modalProps.message), modalProps.error && /* @__PURE__ */ React.createElement(ErrorLabel, null, modalProps.error)), /* @__PURE__ */ React.createElement(ModalActions, null, modalProps.actions.map((action) => /* @__PURE__ */ React.createElement(AsyncButton, __spreadValues({
+    key: action.name
+  }, action))))));
+}
+const ErrorLabel = styled.p`
+  color: var(--tina-color-error) !important;
+`;
+const AsyncButton = ({ name, primary, action }) => {
+  const [submitting, setSubmitting] = useState(false);
+  const onClick = useCallback(async () => {
+    setSubmitting(true);
+    try {
+      await action();
+      setSubmitting(false);
+    } catch (e) {
+      setSubmitting(false);
+      throw e;
+    }
+  }, [action, setSubmitting]);
+  return /* @__PURE__ */ React.createElement(Button, {
+    variant: primary ? "primary" : "secondary",
+    onClick,
+    busy: submitting,
+    disabled: submitting
+  }, submitting && /* @__PURE__ */ React.createElement(LoadingDots, null), !submitting && name);
+};
+const TINA_AUTH_CONFIG = "tina_auth_config";
+const useTinaAuthRedirect = () => {
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const config = {
+      code: urlParams.get("code") || "",
+      scope: urlParams.get("scope") || "email",
+      state: urlParams.get("state")
+    };
+    if (!config.code) {
       return;
     }
-    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 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
-                });
-              } 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);
+    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
+                  }
                 }
               }
-            } catch (e) {
-              console.error(e);
-              cms.alerts.error("There was a problem saving your document");
             }
           }
-        };
-        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);
         }
-        if (!(form instanceof Form)) {
-          if (skipped === SKIPPED) {
-            return;
+      }`, { 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
           }
-          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 {
-            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);
-        };
-        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);
+      }`, { 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 () => {
-      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;
+    return response;
   }
-  if (Array.isArray(data)) {
-    return data.map((item) => transformParams(item));
+  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;
   }
-  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 [];
+}
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+const AuthWallInner = ({
+  children,
+  cms,
+  loginScreen,
+  getModalActions
+}) => {
+  const client = cms.api.tina;
+  const [activeModal, setActiveModal] = useState(null);
+  const [showChildren, setShowChildren] = useState(false);
+  React.useEffect(() => {
+    client.isAuthenticated().then((isAuthenticated) => {
+      if (isAuthenticated) {
+        setShowChildren(true);
+        cms.enable();
+      } else {
+        sleep(500).then(() => {
+          setActiveModal("authenticate");
+        });
       }
-      const accum = {};
-      Object.entries(data).map(([keyName, value]) => {
-        accum[keyName] = transformParams(value);
-      });
-      return accum;
+    });
+  }, []);
+  const onAuthSuccess = async () => {
+    if (await client.isAuthenticated()) {
+      setShowChildren(true);
+      setActiveModal(null);
     } else {
-      if (!data) {
-        return [];
-      }
-      throw e;
+      throw new Error("No access to repo");
     }
-  }
+  };
+  const otherModalActions = getModalActions ? getModalActions({
+    closeModal: () => {
+      setActiveModal(null);
+    }
+  }) : [];
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, activeModal === "authenticate" && /* @__PURE__ */ React.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 () => {
+          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 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 = getIn(formValues, [newUpdate.queryName, "values", lookupName].join("."));
-    if (isNaN(Number(item))) {
-      if (Array.isArray(currentFields)) {
-        currentFields = currentFields.find((field) => field.name === item);
+const TinaCloudProvider = (props) => {
+  const baseBranch = props.branch || "main";
+  const [currentBranch, setCurrentBranch] = useLocalStorage("tinacms-current-branch", baseBranch);
+  useTinaAuthRedirect();
+  const cms = React.useMemo(() => props.cms || new 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);
       }
-    } else {
-      const template = currentFields.templates ? currentFields.templates[value._template] : currentFields;
-      currentFields = template.fields;
     }
-  });
-  return currentFields;
-};
-const generateFormCreators = (cms) => {
-  const createForm = (formConfig) => {
-    const form = new Form(formConfig);
-    cms.forms.add(form);
-    return form;
   };
-  const createGlobalForm = (formConfig, options) => {
-    const form = new Form(formConfig);
-    cms.plugins.add(new 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.useState(() => cms.flags.get("branch-switcher"));
+  React.useEffect(() => {
+    cms.events.subscribe("flag:set", ({ key, value }) => {
+      if (key === "branch-switcher") {
+        setBranchingEnabled(value);
+      }
+    });
+  }, [cms.events]);
+  React.useEffect(() => {
+    let branchSwitcher;
+    if (branchingEnabled) {
+      branchSwitcher = new BranchSwitcherPlugin({
+        listBranches: handleListBranches,
+        createBranch: handleCreateBranch
+      });
+      cms.plugins.add(branchSwitcher);
+    }
+    return () => {
+      if (branchingEnabled && branchSwitcher) {
+        cms.plugins.remove(branchSwitcher);
+      }
+    };
+  }, [branchingEnabled, props.branch]);
+  React.useEffect(() => {
+    if (props.cmsCallback) {
+      props.cmsCallback(cms);
+    }
+  }, []);
+  return /* @__PURE__ */ React.createElement(BranchDataProvider, {
+    currentBranch,
+    setCurrentBranch: (b) => {
+      setCurrentBranch(b);
+    }
+  }, /* @__PURE__ */ React.createElement(TinaProvider, {
+    cms
+  }, /* @__PURE__ */ React.createElement(AuthWallInner, __spreadProps(__spreadValues({}, props), {
+    cms
+  }))));
 };
+const TinaCloudAuthWall = TinaCloudProvider;
 class ContentCreatorPlugin {
   constructor(options) {
     this.__type = "content-creator";
@@ -1953,11 +3214,13 @@ const TinaCMSProvider2 = (_c) => {
   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) {
@@ -1974,7 +3237,8 @@ const TinaCMSProvider2 = (_c) => {
     tinaioConfig: props.tinaioConfig,
     isLocalClient,
     cmsCallback: props.cmsCallback,
-    mediaStore: props.mediaStore
+    mediaStore: props.mediaStore,
+    schema
   }, /* @__PURE__ */ React.createElement("style", null, styles), /* @__PURE__ */ React.createElement(ErrorBoundary, null, /* @__PURE__ */ React.createElement(DocumentCreator, {
     documentCreatorCallback
   }), /* @__PURE__ */ React.createElement(TinaDataProvider, {
@@ -2016,13 +3280,25 @@ const TinaDataProvider = ({
     payload: void 0,
     isLoading: true
   });
+  const cms = useCMS();
+  const useUnstableFormify = React.useMemo(() => {
+    if (cms == null ? void 0 : cms.flags.get("use-unstable-formify")) {
+      return true;
+    }
+    return false;
+  }, [cms == null ? void 0 : cms.flags]);
   return /* @__PURE__ */ React.createElement(TinaDataContext.Provider, {
     value: {
       setRequest,
       isLoading: state.isLoading,
       state: { payload: state.payload }
     }
-  }, /* @__PURE__ */ React.createElement(FormRegistrar, {
+  }, useUnstableFormify ? /* @__PURE__ */ React.createElement(FormRegistrarUnstable, {
+    key: request == null ? void 0 : request.query,
+    request,
+    formifyCallback,
+    onPayloadStateChange: setState
+  }) : /* @__PURE__ */ React.createElement(FormRegistrar, {
     key: request == null ? void 0 : request.query,
     request,
     formifyCallback,
@@ -2051,6 +3327,35 @@ const FormRegistrar = ({
   }, [JSON.stringify(payload), isLoading]);
   return isLoading ? /* @__PURE__ */ React.createElement(Loader, null, /* @__PURE__ */ React.createElement(React.Fragment, null)) : null;
 };
+const FormRegistrarUnstable = (props) => {
+  var _a;
+  if (!((_a = props.request) == null ? void 0 : _a.query)) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(FormRegistrarUnstableInner, __spreadValues({}, props));
+};
+const FormRegistrarUnstableInner = ({
+  request,
+  formifyCallback,
+  onPayloadStateChange
+}) => {
+  const cms = 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.useEffect(() => {
+    onPayloadStateChange({ payload, isLoading });
+  }, [JSON.stringify(payload), isLoading]);
+  return isLoading ? /* @__PURE__ */ React.createElement(Loader, null, /* @__PURE__ */ React.createElement(React.Fragment, null)) : null;
+};
 const Loader = (props) => {
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
     style: {
@@ -2293,16 +3598,18 @@ const useGetCollections = (cms) => {
   const [error, setError] = useState(void 0);
   useEffect(() => {
     const fetchCollections = async () => {
-      try {
-        const response = await api.fetchCollections();
-        setCollections(response.getCollections);
-      } catch (error2) {
-        cms.alerts.error(`[${error2.name}] GetCollections failed: ${error2.message}`, 30 * 1e3);
-        console.error(error2);
-        setCollections([]);
-        setError(error2);
+      if (await api.isAuthenticated()) {
+        try {
+          const response = await api.fetchCollections();
+          setCollections(response.getCollections);
+        } catch (error2) {
+          cms.alerts.error(`[${error2.name}] GetCollections failed: ${error2.message}`, 30 * 1e3);
+          console.error(error2);
+          setCollections([]);
+          setError(error2);
+        }
+        setLoading(false);
       }
-      setLoading(false);
     };
     setLoading(true);
     fetchCollections();
@@ -2591,16 +3898,18 @@ const useGetCollection = (cms, collectionName, includeDocuments = true) => {
   const [error, setError] = useState(void 0);
   useEffect(() => {
     const fetchCollection = async () => {
-      try {
-        const response = await api.fetchCollection(collectionName, includeDocuments);
-        setCollection(response.getCollection);
-      } catch (error2) {
-        cms.alerts.error(`[${error2.name}] GetCollection failed: ${error2.message}`, 30 * 1e3);
-        console.error(error2);
-        setCollection(void 0);
-        setError(error2);
+      if (await api.isAuthenticated()) {
+        try {
+          const response = await api.fetchCollection(collectionName, includeDocuments);
+          setCollection(response.getCollection);
+        } catch (error2) {
+          cms.alerts.error(`[${error2.name}] GetCollection failed: ${error2.message}`, 30 * 1e3);
+          console.error(error2);
+          setCollection(void 0);
+          setError(error2);
+        }
+        setLoading(false);
       }
-      setLoading(false);
     };
     setLoading(true);
     fetchCollection();
@@ -2614,13 +3923,11 @@ const GetCollection = ({
   children
 }) => {
   const { collection, loading, error } = useGetCollection(cms, collectionName, includeDocuments);
-  if (!collection) {
-    if (loading) {
-      return /* @__PURE__ */ React.createElement(LoadingPage, null);
-    }
-    if (error) {
-      return null;
-    }
+  if (error) {
+    return null;
+  }
+  if (loading) {
+    return /* @__PURE__ */ React.createElement(LoadingPage, null);
   }
   return /* @__PURE__ */ React.createElement(React.Fragment, null, children(collection, loading));
 };
@@ -2659,7 +3966,7 @@ const handleNavigate = (navigate, cms, collection, document) => {
     window.location.href = routeOverride;
     return null;
   } else {
-    navigate(document.sys.filename);
+    navigate(document.sys.breadcrumbs.join("/"));
   }
 };
 const CollectionListPage = () => {
@@ -2692,8 +3999,9 @@ const CollectionListPage = () => {
       }, /* @__PURE__ */ React.createElement("tbody", {
         className: "divide-y divide-gray-150"
       }, documents.map((document) => {
+        const subfolders = document.node.sys.breadcrumbs.slice(0, -1).join("/");
         return /* @__PURE__ */ React.createElement("tr", {
-          key: `document-${document.node.sys.filename}`,
+          key: `document-${document.node.sys.relativePath}`,
           className: ""
         }, /* @__PURE__ */ React.createElement("td", {
           className: "px-6 py-2 whitespace-nowrap"
@@ -2708,7 +4016,9 @@ const CollectionListPage = () => {
           className: "block text-xs text-gray-400 mb-1 uppercase"
         }, "Filename"), /* @__PURE__ */ React.createElement("span", {
           className: "h-5 leading-5 block whitespace-nowrap"
-        }, document.node.sys.filename)))), /* @__PURE__ */ React.createElement("td", {
+        }, subfolders && /* @__PURE__ */ React.createElement("span", {
+          className: "text-xs text-gray-400"
+        }, `${subfolders}/`), /* @__PURE__ */ React.createElement("span", null, document.node.sys.filename))))), /* @__PURE__ */ React.createElement("td", {
           className: "px-6 py-4 whitespace-nowrap"
         }, /* @__PURE__ */ React.createElement("span", {
           className: "block text-xs text-gray-400 mb-1 uppercase"
@@ -2740,37 +4050,39 @@ const useGetDocumentFields = (cms, collectionName, templateName) => {
   const [error, setError] = useState(void 0);
   useEffect(() => {
     const fetchDocumentFields = async () => {
-      try {
-        const response = await api.fetchDocumentFields();
-        const documentFields = response.getDocumentFields;
-        const collection = documentFields[collectionName].collection;
-        const mutationInfo = documentFields[collectionName].mutationInfo;
-        let fields = void 0;
-        let template = void 0;
-        if (templateName && documentFields[collectionName].templates && documentFields[collectionName].templates[templateName]) {
-          template = documentFields[collectionName].templates[templateName].template;
-          fields = documentFields[collectionName].templates[templateName].fields;
-        } else {
-          fields = documentFields[collectionName].fields;
+      if (await api.isAuthenticated()) {
+        try {
+          const response = await api.fetchDocumentFields();
+          const documentFields = response.getDocumentFields;
+          const collection = documentFields[collectionName].collection;
+          const mutationInfo = documentFields[collectionName].mutationInfo;
+          let fields = void 0;
+          let template = void 0;
+          if (templateName && documentFields[collectionName].templates && documentFields[collectionName].templates[templateName]) {
+            template = documentFields[collectionName].templates[templateName].template;
+            fields = documentFields[collectionName].templates[templateName].fields;
+          } else {
+            fields = documentFields[collectionName].fields;
+          }
+          setInfo({
+            collection,
+            template,
+            fields,
+            mutationInfo
+          });
+        } catch (error2) {
+          cms.alerts.error(`[${error2.name}] GetDocumentFields failed: ${error2.message}`, 30 * 1e3);
+          console.error(error2);
+          setInfo({
+            collection: void 0,
+            template: void 0,
+            fields: void 0,
+            mutationInfo: void 0
+          });
+          setError(error2);
         }
-        setInfo({
-          collection,
-          template,
-          fields,
-          mutationInfo
-        });
-      } catch (error2) {
-        cms.alerts.error(`[${error2.name}] GetDocumentFields failed: ${error2.message}`, 30 * 1e3);
-        console.error(error2);
-        setInfo({
-          collection: void 0,
-          template: void 0,
-          fields: void 0,
-          mutationInfo: void 0
-        });
-        setError(error2);
+        setLoading(false);
       }
-      setLoading(false);
     };
     setLoading(true);
     fetchDocumentFields();
@@ -2784,13 +4096,11 @@ const GetDocumentFields = ({
   children
 }) => {
   const { collection, template, fields, mutationInfo, loading, error } = useGetDocumentFields(cms, collectionName, templateName);
-  if (!collection) {
-    if (loading) {
-      return /* @__PURE__ */ React.createElement(LoadingPage, null);
-    }
-    if (error) {
-      return null;
-    }
+  if (error) {
+    return null;
+  }
+  if (loading) {
+    return /* @__PURE__ */ React.createElement(LoadingPage, null);
   }
   return /* @__PURE__ */ React.createElement(React.Fragment, null, children({ collection, template, fields, mutationInfo, loading }));
 };
@@ -2805,7 +4115,14 @@ const createDocument = async (cms, collection, template, mutationInfo, values) =
     includeCollection,
     includeTemplate
   });
-  await api.createDocument(collection.name, relativePath, params);
+  if (await api.isAuthenticated()) {
+    await api.createDocument(collection.name, relativePath, params);
+  } else {
+    const authMessage = `[Error] CreateDocument failed: User is no longer authenticated; please login and try again.`;
+    cms.alerts.error(authMessage, 30 * 1e3);
+    console.error(authMessage);
+    return false;
+  }
 };
 const CollectionCreatePage = () => {
   const { collectionName, templateName } = useParams();
@@ -2825,6 +4142,22 @@ const RenderForm$1 = ({ cms, collection, template, fields, mutationInfo }) => {
   var _a, _b;
   const navigate = useNavigate();
   const [formIsPristine, setFormIsPristine] = 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 = resolveForm({
+      collection: schemaCollection,
+      basename: schemaCollection.name,
+      schema,
+      template: template2
+    });
+    schemaFields = formInfo.fields;
+  }
   const form = useMemo(() => {
     return new Form({
       id: "create-form",
@@ -2834,7 +4167,7 @@ const RenderForm$1 = ({ cms, collection, template, fields, mutationInfo }) => {
           name: "filename",
           label: "Filename",
           component: "text",
-          description: `A unique filename for the content.  Example: My_Document`,
+          description: /* @__PURE__ */ React.createElement("span", null, "A unique filename for the content.", /* @__PURE__ */ React.createElement("br", null), "Examples: ", /* @__PURE__ */ React.createElement("code", null, "My_Document"), ", ", /* @__PURE__ */ React.createElement("code", null, "My_Document.en"), ",", " ", /* @__PURE__ */ React.createElement("code", null, "sub-folder/My_Document")),
           placeholder: `My_Document`,
           validate: (value, allValues, meta) => {
             if (!value) {
@@ -2843,13 +4176,13 @@ const RenderForm$1 = ({ cms, collection, template, fields, mutationInfo }) => {
               }
               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 {
@@ -2892,16 +4225,18 @@ const useGetDocument = (cms, collectionName, relativePath) => {
   const [error, setError] = useState(void 0);
   useEffect(() => {
     const fetchDocument = async () => {
-      try {
-        const response = await api.fetchDocument(collectionName, relativePath);
-        setDocument(response.getDocument);
-      } catch (error2) {
-        cms.alerts.error(`[${error2.name}] GetDocument failed: ${error2.message}`, 30 * 1e3);
-        console.error(error2);
-        setDocument(void 0);
-        setError(error2);
+      if (api.isAuthenticated()) {
+        try {
+          const response = await api.fetchDocument(collectionName, relativePath);
+          setDocument(response.getDocument);
+        } catch (error2) {
+          cms.alerts.error(`[${error2.name}] GetDocument failed: ${error2.message}`, 30 * 1e3);
+          console.error(error2);
+          setDocument(void 0);
+          setError(error2);
+        }
+        setLoading(false);
       }
-      setLoading(false);
     };
     setLoading(true);
     fetchDocument();
@@ -2915,13 +4250,11 @@ const GetDocument = ({
   children
 }) => {
   const { document, loading, error } = useGetDocument(cms, collectionName, relativePath);
-  if (!document) {
-    if (loading) {
-      return /* @__PURE__ */ React.createElement(LoadingPage, null);
-    }
-    if (error) {
-      return null;
-    }
+  if (error) {
+    return null;
+  }
+  if (loading) {
+    return /* @__PURE__ */ React.createElement(LoadingPage, null);
   }
   return /* @__PURE__ */ React.createElement(React.Fragment, null, children(document, loading));
 };
@@ -2932,10 +4265,18 @@ const updateDocument = async (cms, relativePath, collection, mutationInfo, value
     includeCollection,
     includeTemplate
   });
-  await api.updateDocument(collection.name, relativePath, params);
+  if (await api.isAuthenticated()) {
+    await api.updateDocument(collection.name, relativePath, params);
+  } else {
+    const authMessage = `[Error] UpdateDocument failed: User is no longer authenticated; please login and try again.`;
+    cms.alerts.error(authMessage, 30 * 1e3);
+    console.error(authMessage);
+    return false;
+  }
 };
 const CollectionUpdatePage = () => {
-  const { collectionName, filename } = useParams();
+  const _a = useParams(), { collectionName } = _a, rest = __objRest(_a, ["collectionName"]);
+  const { "*": filename } = rest;
   return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => /* @__PURE__ */ React.createElement(GetDocumentFields, {
     cms,
     collectionName
@@ -2964,13 +4305,28 @@ const RenderForm = ({
   mutationInfo
 }) => {
   var _a, _b;
-  useNavigate();
   const [formIsPristine, setFormIsPristine] = 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 = resolveForm({
+      collection: schemaCollection,
+      basename: schemaCollection.name,
+      schema,
+      template
+    });
+    schemaFields = formInfo.fields;
+  }
   const form = useMemo(() => {
     return new Form({
       id: "update-form",
       label: "form",
-      fields: document.form.fields,
+      fields: schemaFields,
       initialValues: document.values,
       onSubmit: async (values) => {
         try {
@@ -3054,7 +4410,7 @@ const TinaAdmin = () => {
         path: "collections/:collectionName/:templateName/new",
         element: /* @__PURE__ */ React.createElement(CollectionCreatePage, null)
       }), /* @__PURE__ */ React.createElement(Route, {
-        path: "collections/:collectionName/:filename",
+        path: "collections/:collectionName/*",
         element: /* @__PURE__ */ React.createElement(CollectionUpdatePage, null)
       }), /* @__PURE__ */ React.createElement(Route, {
         path: "collections/:collectionName",
@@ -3090,4 +4446,4 @@ const defineSchema = (config) => {
 const defineConfig = (config) => {
   return config;
 };
-export { AuthWallInner, Client, DEFAULT_LOCAL_TINA_GQL_SERVER_URL, LocalClient, RouteMappingPlugin, TinaAdmin, TinaAdminApi, TinaCMSProvider2, TinaCloudAuthWall, TinaCloudProvider, TinaDataProvider, assertShape, createClient, TinaCMSProvider2 as default, defineConfig, defineSchema, getStaticPropsForTina, gql, safeAssertShape, staticRequest, useDocumentCreatorPlugin, useGraphqlForms, useTinaAuthRedirect };
+export { AuthWallInner, Client, DEFAULT_LOCAL_TINA_GQL_SERVER_URL, LocalClient, RouteMappingPlugin, TinaAdmin, TinaAdminApi, TinaCMSProvider2, TinaCloudAuthWall, TinaCloudProvider, TinaDataProvider, assertShape, createClient, TinaCMSProvider2 as default, defineConfig, defineSchema, getStaticPropsForTina, gql, safeAssertShape, staticRequest, useDocumentCreatorPlugin, useGraphqlForms, useGraphqlFormsUnstable, useTinaAuthRedirect };