tinacms 0.66.9 → 0.67.1

package/dist/index.js

@@ -30,8 +30,8 @@ var __objRest = (source, exclude) => {
   return target;
 };
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@tinacms/toolkit"), require("graphql"), require("lodash.set"), require("react"), require("final-form"), require("yup"), require("graphql-tag"), require("styled-components"), require("@tinacms/sharedctx"), require("url-pattern"), require("react-router-dom"), require("@headlessui/react")) : typeof define === "function" && define.amd ? define(["exports", "@tinacms/toolkit", "graphql", "lodash.set", "react", "final-form", "yup", "graphql-tag", "styled-components", "@tinacms/sharedctx", "url-pattern", "react-router-dom", "@headlessui/react"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.tinacms = {}, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP));
-})(this, function(exports2, toolkit, G, set, React, finalForm, yup, gql$1, styled, sharedctx, UrlPattern, reactRouterDom, react) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@tinacms/toolkit"), require("graphql"), require("lodash.set"), require("react"), require("final-form"), require("@tinacms/schema-tools"), require("graphql-tag"), require("yup"), require("styled-components"), require("@tinacms/sharedctx"), require("url-pattern"), require("react-router-dom"), require("@headlessui/react")) : typeof define === "function" && define.amd ? define(["exports", "@tinacms/toolkit", "graphql", "lodash.set", "react", "final-form", "@tinacms/schema-tools", "graphql-tag", "yup", "styled-components", "@tinacms/sharedctx", "url-pattern", "react-router-dom", "@headlessui/react"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.tinacms = {}, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP));
+})(this, function(exports2, toolkit, G, set, React, finalForm, schemaTools, gql$1, yup, styled, sharedctx, UrlPattern, reactRouterDom, react) {
   "use strict";
   function _interopDefaultLegacy(e) {
     return e && typeof e === "object" && "default" in e ? e : { "default": e };
@@ -59,8 +59,8 @@ var __objRest = (source, exclude) => {
   var G__namespace = /* @__PURE__ */ _interopNamespace(G);
   var set__default = /* @__PURE__ */ _interopDefaultLegacy(set);
   var React__default = /* @__PURE__ */ _interopDefaultLegacy(React);
-  var yup__namespace = /* @__PURE__ */ _interopNamespace(yup);
   var gql__default = /* @__PURE__ */ _interopDefaultLegacy(gql$1);
+  var yup__namespace = /* @__PURE__ */ _interopNamespace(yup);
   var styled__default = /* @__PURE__ */ _interopDefaultLegacy(styled);
   var UrlPattern__default = /* @__PURE__ */ _interopDefaultLegacy(UrlPattern);
   function popupWindow(url, title, window2, w, h) {
@@ -400,13 +400,15 @@ var __objRest = (source, exclude) => {
     clientId,
     isLocalClient = true,
     branch,
-    tinaioConfig
+    tinaioConfig,
+    schema
   }) => {
-    return isLocalClient ? new LocalClient() : new Client({
+    return isLocalClient ? new LocalClient({ schema }) : new Client({
       clientId: clientId || "",
       branch: branch || "main",
       tokenStorage: "LOCAL_STORAGE",
-      tinaioConfig
+      tinaioConfig,
+      schema
     });
   };
   function assertShape(value, yupSchema, errorMessage) {
@@ -434,9 +436,6 @@ var __objRest = (source, exclude) => {
     eventList
   }) {
     const cms = toolkit.useCMS();
-    React__default["default"].useEffect(() => {
-      console.log("NOTE: using unstable formify");
-    }, []);
     const state = useFormify({
       query,
       cms,
@@ -512,11 +511,12 @@ var __objRest = (source, exclude) => {
         setIsLoading(false);
         return;
       }
+      const useUnstableFormify = (cms == null ? void 0 : cms.flags.get("use-unstable-formify")) === false ? false : true;
       const formIds = [];
       setIsLoading(true);
       cms.api.tina.requestWithForm((gql2) => gql2(query), {
         variables,
-        useUnstableFormify: cms.flags.get("use-unstable-formify")
+        useUnstableFormify
       }).then((payload) => {
         cms.plugins.remove(new toolkit.FormMetaPlugin({ name: "tina-admin-link" }));
         setData(payload);
@@ -535,11 +535,10 @@ var __objRest = (source, exclude) => {
             values: yup2.object().required(),
             form: yup2.object().required()
           }), `Unable to build form shape for fields at ${queryName}`);
-          const formConfig = {
+          let formConfig = {};
+          const formCommon = {
             id: queryName,
-            label: result.form.label,
             initialValues: result.values,
-            fields: result.form.fields,
             reset: () => {
               setPendingReset(queryName);
             },
@@ -571,6 +570,29 @@ var __objRest = (source, exclude) => {
               }
             }
           };
+          if (cms.api.tina.schema) {
+            const enrichedSchema = cms.api.tina.schema;
+            const collection = enrichedSchema.getCollection(result._internalSys.collection.name);
+            const template = enrichedSchema.getTemplateForData({
+              collection,
+              data: result.values
+            });
+            const formInfo = schemaTools.resolveForm({
+              collection,
+              basename: collection.name,
+              schema: enrichedSchema,
+              template
+            });
+            formConfig = __spreadValues({
+              label: formInfo.label,
+              fields: formInfo.fields
+            }, formCommon);
+          } else {
+            formConfig = __spreadValues({
+              label: result.form.label,
+              fields: result.form.fields
+            }, formCommon);
+          }
           const { createForm, createGlobalForm } = generateFormCreators(cms);
           const SKIPPED = "SKIPPED";
           let form;
@@ -643,10 +665,8 @@ var __objRest = (source, exclude) => {
           }, { 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);
+        throw new Error(`There was a problem setting up forms for your query: ${e.message}`);
       });
       return () => {
         formIds.forEach((name) => {
@@ -742,100 +762,7 @@ var __objRest = (source, exclude) => {
     };
     return { createForm, createGlobalForm };
   };
-  const isNodeField = (type) => {
-    if (G__namespace.isUnionType(type)) {
-      return type.getTypes().every((type2) => {
-        return type2.getInterfaces().find((intfc) => intfc.name === "Node");
-      });
-    } else if (G__namespace.isObjectType(type)) {
-      return !!type.getInterfaces().find((intfc) => intfc.name === "Node");
-    } else if (G__namespace.isInterfaceType(type)) {
-      if (type.name === "Node") {
-        return true;
-      }
-    } else {
-      return false;
-    }
-  };
-  const isConnectionField = (type) => {
-    if (G__namespace.isObjectType(type)) {
-      return !!type.getInterfaces().find((intfc) => intfc.name === "Connection");
-    } else {
-      throw new Error(`Expected GraphQLObjectType for isConnectionField 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);
-  };
-  function isListType(type) {
-    if (G__namespace.isListType(type)) {
-      return true;
-    } else if (G__namespace.isNonNullType(type)) {
-      if (G__namespace.isListType(type.ofType)) {
-        return true;
-      }
-    }
-    return false;
-  }
-  function ensureNodeField(field) {
-    if (!isNodeField(field)) {
-      throw new Error(`Expected field to implement Node interface`);
-    }
-  }
-  function ensureUnionType(type) {
-    if (!G__namespace.isUnionType(type)) {
-      throw new Error(`Expected type to be GraphQLUnionType`);
-    }
-  }
-  function ensureObjectType(type) {
-    if (!G__namespace.isObjectType(type)) {
-      console.log(type);
-      throw new Error(`Expected type to be GraphQLObjectType`);
-    }
-  }
-  function ensureOperationDefinition(type) {
-    if (type.kind !== "OperationDefinition") {
-      throw new Error(`Expected top-level definition to be an OperationDefinition node, ensure your query has been optimized before calling formify`);
-    }
-  }
-  function getNameAndAlias(fieldNode, list, isNode) {
-    return {
-      name: fieldNode.name.value,
-      alias: fieldNode.alias ? fieldNode.alias.value : fieldNode.name.value,
-      list: !!list,
-      isNode: !!isNode
-    };
-  }
-  const node = G__namespace.parse(`
- query Sample {
-   _internalSys: sys {
-     path
-     collection {
-       name
-     }
-   }
-   form
-   values
- }`);
-  const metaFields = node.definitions[0].selectionSet.selections;
-  const getRelativeBlueprint = (path) => {
-    let indexOfLastNode = 0;
-    path.forEach((item, i) => {
-      if (item.isNode) {
-        if (i === path.length - 1)
-          ;
-        else {
-          indexOfLastNode = i;
-        }
-      }
-    });
-    const documentBlueprintPath = path.slice(0, indexOfLastNode + 1);
-    return getBlueprintNamePath({ path: documentBlueprintPath });
-  };
-  const getIn2 = (state, path) => {
+  const getValueForBlueprint = (state, path) => {
     const pathArray = path.split(".");
     let latest = state;
     pathArray.every((item, index) => {
@@ -845,7 +772,7 @@ var __objRest = (source, exclude) => {
           const next = [];
           if (Array.isArray(latest)) {
             latest.forEach((latest2, index2) => {
-              const res = getIn2(latest2, restOfItems.join("."));
+              const res = getValueForBlueprint(latest2, restOfItems.join("."));
               next.push(res);
             });
           } else {
@@ -912,9 +839,8 @@ var __objRest = (source, exclude) => {
     if (skipped)
       return;
     const id = doc._internalSys.path;
-    const formConfig = __spreadProps(__spreadValues({
-      id
-    }, doc.form), {
+    const formCommon = {
+      id,
       label: doc.form.label,
       initialValues: doc.values,
       onSubmit: async (payload) => {
@@ -944,7 +870,31 @@ var __objRest = (source, exclude) => {
           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 = schemaTools.resolveForm({
+        collection,
+        basename: collection.name,
+        schema: enrichedSchema,
+        template
+      });
+      formConfig = __spreadValues({
+        label: formInfo.label,
+        fields: formInfo.fields
+      }, formCommon);
+    } else {
+      formConfig = __spreadValues({
+        label: doc.form.label,
+        fields: doc.form.fields
+      }, formCommon);
+    }
     if (formify2) {
       form = formify2({
         formConfig,
@@ -990,19 +940,6 @@ var __objRest = (source, exclude) => {
     }
     return accum;
   };
-  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 getFormNodesStartingWith = (string, state) => {
     return state.formNodes.filter((subFormNode) => {
       return subFormNode.documentBlueprintId.startsWith(string);
@@ -1018,44 +955,6 @@ var __objRest = (source, exclude) => {
     const existing = finalForm.getIn(state.data, pathToChange);
     return { pathToChange, formNodes, eventLocation, existing };
   };
-  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 getBlueprintAliasPath = (blueprint) => {
     const namePath = [];
     const aliasPath = [];
@@ -1071,22 +970,56 @@ var __objRest = (source, exclude) => {
   };
   const getBlueprintFieldsForEvent = (blueprint, event) => {
     return blueprint.fields.filter((fbp) => {
-      return getBlueprintNamePath(fbp) === getEventPath(event, blueprint);
+      if (getBlueprintNamePath(fbp) === getEventPath(event, blueprint)) {
+        return true;
+      }
+    }).filter((fbp) => {
+      return filterFieldBlueprintsByParentTypename(fbp, event.field.data.tinaField.parentTypename);
     });
   };
-  const getBlueprintNamePath = (blueprint) => {
+  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 = [];
-    const aliasPath = [];
     blueprint.path.forEach((p) => {
+      if (disambiguator) {
+        if (p.parentTypename) {
+          namePath.push(p.parentTypename);
+        }
+      }
       namePath.push(p.name);
-      aliasPath.push(p.alias);
       if (p.list) {
         namePath.push("[]");
-        aliasPath.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(".");
@@ -1108,20 +1041,21 @@ var __objRest = (source, exclude) => {
       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 getEventPath = (event, blueprint) => {
-    const eventPath = replaceRealNum(event.field.name);
-    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 printEvent = (event) => {
     var _a, _b;
     return {
@@ -1190,17 +1124,43 @@ var __objRest = (source, exclude) => {
     }
     return newOrderObject;
   };
-  const getPathsToChange = (event, state) => {
-    const pathsToChange = [];
-    const formNodes = getFormNodesFromEvent(state, event);
-    formNodes.forEach((formNode) => {
-      const blueprint = getFormNodeBlueprint(formNode, state);
-      getBlueprintFieldsForEvent(blueprint, event).forEach((fieldBlueprint) => {
-        const pathToChange = getPathToChange(fieldBlueprint, formNode, event);
-        pathsToChange.push({ pathToChange, formNode });
-      });
+  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;
     });
-    return pathsToChange;
   };
   const getSubFields = (changeSet) => {
     var _a;
@@ -1211,6 +1171,133 @@ var __objRest = (source, exclude) => {
     }
     return { fields, __typename };
   };
+  const isFormifiableDocument = (t) => {
+    const type = G__namespace.getNamedType(t);
+    if (G__namespace.isUnionType(type)) {
+      return type.getTypes().every((type2) => {
+        return type2.getInterfaces().find((intfc) => intfc.name === "Node");
+      });
+    } else if (G__namespace.isObjectType(type)) {
+      return !!type.getInterfaces().find((intfc) => intfc.name === "Node");
+    } else {
+      return false;
+    }
+  };
+  const isScalarType = (t) => {
+    const namedType = G__namespace.getNamedType(t);
+    return G__namespace.isScalarType(namedType);
+  };
+  const isConnectionField = (t) => {
+    const type = G__namespace.getNamedType(t);
+    if (G__namespace.isObjectType(type)) {
+      return !!type.getInterfaces().find((intfc) => intfc.name === "Connection");
+    } else {
+      throw new Error(`Expected GraphQLObjectType for isConnectionField check`);
+    }
+  };
+  const getObjectField = (object, selectionNode) => {
+    const namedType = G__namespace.getNamedType(object);
+    ensureObjectOrInterfaceType(namedType);
+    return namedType.getFields()[selectionNode.name.value];
+  };
+  const getSelectedUnionType = (unionType, selectionNode) => {
+    const namedType = G__namespace.getNamedType(unionType);
+    if (!G__namespace.isUnionType(namedType)) {
+      return;
+    }
+    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__namespace.isListType(type)) {
+      return true;
+    } else if (G__namespace.isNonNullType(type)) {
+      if (G__namespace.isListType(type.ofType)) {
+        return true;
+      }
+    }
+    return false;
+  }
+  function ensureObjectOrInterfaceType(type) {
+    if (G__namespace.isInterfaceType(type) || G__namespace.isObjectType(type))
+      ;
+    else {
+      console.log("Expected type to be GraphQLObjectType or GraphQLInterfaceType", type);
+      throw new Error(`Expected type to be GraphQLObjectType or GraphQLInterfaceType`);
+    }
+  }
+  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__namespace.parse(`
+ query Sample {
+   _internalSys: sys {
+     path
+     collection {
+       name
+     }
+   }
+   form
+   values
+ }`);
+  const metaFields = node.definitions[0].selectionSet.selections;
+  const getRelativeBlueprint = (path) => {
+    let indexOfLastNode = 0;
+    path.forEach((item, i) => {
+      if (item.isNode) {
+        if (i === path.length - 1)
+          ;
+        else {
+          indexOfLastNode = i;
+        }
+      }
+    });
+    const 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";
@@ -1243,11 +1330,10 @@ var __objRest = (source, exclude) => {
     const optimizedQuery = await getOptimizedQuery(documentNodeWithName);
     const typeInfo = new G__namespace.TypeInfo(schema);
     const formifyConnection = ({
-      namedFieldType,
+      parentType,
       selectionNode,
       path
     }) => {
-      ensureObjectType(namedFieldType);
       return __spreadProps(__spreadValues({}, selectionNode), {
         selectionSet: {
           kind: "SelectionSet",
@@ -1255,13 +1341,12 @@ var __objRest = (source, exclude) => {
             switch (selectionNode2.kind) {
               case "Field":
                 if (selectionNode2.name.value === EDGES_NODE_NAME) {
-                  const edgeField = namedFieldType.getFields()[EDGES_NODE_NAME];
-                  const edgeType = G__namespace.getNamedType(edgeField.type);
-                  ensureObjectType(edgeType);
-                  const path2 = [
-                    ...path,
-                    getNameAndAlias(selectionNode2, true, false)
-                  ];
+                  const edgeField = getObjectField(parentType, selectionNode2);
+                  const edgesPath = buildPath({
+                    fieldNode: selectionNode2,
+                    type: edgeField.type,
+                    path
+                  });
                   return __spreadProps(__spreadValues({}, selectionNode2), {
                     selectionSet: {
                       kind: "SelectionSet",
@@ -1269,15 +1354,15 @@ var __objRest = (source, exclude) => {
                         switch (subSelectionNode.kind) {
                           case "Field":
                             if (subSelectionNode.name.value === NODE_NAME) {
-                              const nodeField = edgeType.getFields()[NODE_NAME];
-                              const path3 = [
-                                ...path2,
-                                getNameAndAlias(subSelectionNode, false, true)
-                              ];
-                              return formifyNode({
-                                fieldOrInlineFragmentNode: subSelectionNode,
+                              const nodeField = getObjectField(edgeField.type, subSelectionNode);
+                              return formifyFieldNodeDocument({
+                                fieldNode: subSelectionNode,
                                 type: nodeField.type,
-                                path: path3,
+                                path: buildPath({
+                                  fieldNode: subSelectionNode,
+                                  type: nodeField.type,
+                                  path: edgesPath
+                                }),
                                 showInSidebar: false
                               });
                             } else {
@@ -1298,28 +1383,48 @@ var __objRest = (source, exclude) => {
         }
       });
     };
-    function formifyNode({
-      fieldOrInlineFragmentNode,
+    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 = [];
-      const namedType = G__namespace.getNamedType(type);
       let hasDataJSONField = false;
       let hasValuesField = false;
       let shouldFormify = false;
-      fieldOrInlineFragmentNode.selectionSet.selections.forEach((selection) => {
-        if (selection.kind === "Field") {
-          if (selection.name.value === "dataJSON") {
+      selection.selectionSet.selections.forEach((selection2) => {
+        if (selection2.kind === "Field") {
+          if (selection2.name.value === "dataJSON") {
             shouldFormify = true;
             hasDataJSONField = true;
           }
-          if (selection.name.value === "values") {
+          if (selection2.name.value === "values") {
             shouldFormify = true;
             hasValuesField = true;
           }
-          if (selection.name.value === "data") {
+          if (selection2.name.value === "data") {
             shouldFormify = true;
           }
         }
@@ -1328,7 +1433,7 @@ var __objRest = (source, exclude) => {
         blueprints.push({
           id: getBlueprintId(path),
           path,
-          selection: fieldOrInlineFragmentNode,
+          selection,
           fields: [],
           showInSidebar,
           hasDataJSONField,
@@ -1336,71 +1441,58 @@ var __objRest = (source, exclude) => {
         });
         extraFields = metaFields;
       }
-      const formifiedNode = __spreadProps(__spreadValues({}, fieldOrInlineFragmentNode), {
+      return __spreadProps(__spreadValues({}, selection), {
         selectionSet: {
           kind: "SelectionSet",
           selections: [
-            ...fieldOrInlineFragmentNode.selectionSet.selections.map((selectionNode) => {
+            ...selection.selectionSet.selections.map((selectionNode) => {
               switch (selectionNode.kind) {
-                case "InlineFragment":
+                case "InlineFragment": {
+                  const namedType = G__namespace.getNamedType(type);
                   if (G__namespace.isInterfaceType(namedType)) {
-                    const subType2 = schema.getImplementations(namedType).objects.find((item) => item.name === selectionNode.typeCondition.name.value);
-                    return formifyNode({
-                      fieldOrInlineFragmentNode: selectionNode,
-                      type: subType2,
+                    const subType = schema.getImplementations(namedType).objects.find((item) => item.name === selectionNode.typeCondition.name.value);
+                    return formifyInlineFragmentDocument({
+                      inlineFragmentNode: selectionNode,
+                      type: subType,
                       path,
-                      showInSidebar: false
+                      showInSidebar: true
                     });
                   }
-                  ensureUnionType(namedType);
-                  const subType = getSelectedUnionType(namedType, selectionNode);
-                  return formifyNode({
-                    fieldOrInlineFragmentNode: selectionNode,
-                    type: subType,
-                    path,
-                    showInSidebar
+                  return formifyInlineFragmentNode({
+                    inlineFragmentNode: selectionNode,
+                    parentType: type,
+                    path
                   });
-                case "Field":
+                }
+                case "Field": {
                   if (selectionNode.name.value === DATA_NODE_NAME) {
-                    const path2 = [
-                      ...path,
-                      getNameAndAlias(selectionNode, false, false)
-                    ];
-                    if (G__namespace.isObjectType(namedType)) {
-                      const field = getObjectField(namedType, selectionNode);
-                      const namedSubType = G__namespace.getNamedType(field.type);
-                      ensureObjectType(namedSubType);
-                      return __spreadProps(__spreadValues({}, selectionNode), {
-                        selectionSet: {
-                          kind: "SelectionSet",
-                          selections: [
-                            ...selectionNode.selectionSet.selections.map((subSelectionNode) => {
-                              switch (subSelectionNode.kind) {
-                                case "Field":
-                                  const subSelectionField = getObjectField(namedSubType, subSelectionNode);
-                                  if (!subSelectionField) {
-                                    return subSelectionNode;
-                                  }
-                                  const subSelectionType = G__namespace.getNamedType(subSelectionField.type);
-                                  return formifyField({
-                                    fieldNode: subSelectionNode,
-                                    parentType: field.type,
-                                    path: [
-                                      ...path2,
-                                      getNameAndAlias(subSelectionNode, isListType(subSelectionField.type), isNodeField(subSelectionType))
-                                    ]
-                                  });
-                                default:
-                                  throw new FormifyError("UNEXPECTED", `selection ${subSelectionNode.kind}`);
-                              }
-                            })
-                          ]
-                        }
-                      });
-                    }
-                    throw new FormifyError("UNEXPECTED");
+                    const field = getObjectField(type, selectionNode);
+                    return __spreadProps(__spreadValues({}, selectionNode), {
+                      selectionSet: {
+                        kind: "SelectionSet",
+                        selections: [
+                          ...selectionNode.selectionSet.selections.map((subSelectionNode) => {
+                            switch (subSelectionNode.kind) {
+                              case "Field":
+                                return formifyFieldNode({
+                                  fieldNode: subSelectionNode,
+                                  parentType: field.type,
+                                  path: buildPath({
+                                    fieldNode: selectionNode,
+                                    type: field.type,
+                                    path
+                                  })
+                                });
+                              default:
+                                throw new FormifyError("UNEXPECTED", `selection ${subSelectionNode.kind}`);
+                            }
+                          })
+                        ]
+                      }
+                    });
                   }
                   return selectionNode;
+                }
                 default:
                   throw new FormifyError("UNEXPECTED");
               }
@@ -1409,32 +1501,35 @@ var __objRest = (source, exclude) => {
           ]
         }
       });
-      return formifiedNode;
     }
-    const formifyField = ({
+    const formifyFieldNode = ({
       fieldNode,
       parentType,
       path
     }) => {
-      const namedParentType = G__namespace.getNamedType(parentType);
-      ensureObjectType(namedParentType);
-      const field = getObjectField(namedParentType, fieldNode);
+      if (fieldNode.name.value === "__typename") {
+        return fieldNode;
+      }
+      const field = getObjectField(parentType, fieldNode);
       if (!field) {
-        if (fieldNode.name.value === "__typename") {
-          return fieldNode;
-        } else {
-          throw new FormifyError("UNEXPECTED", `field with no associated type ${fieldNode.name.value}`);
-        }
+        return fieldNode;
       }
-      const namedType = G__namespace.getNamedType(field.type);
-      const fieldBlueprint = {
-        id: getBlueprintId([...path]),
-        documentBlueprintId: getRelativeBlueprint(path),
-        path: [...path]
-      };
       const blueprint = blueprints.find((blueprint2) => blueprint2.id === getRelativeBlueprint(path));
-      blueprint.fields.push(fieldBlueprint);
-      if (G__namespace.isScalarType(namedType)) {
+      if (!blueprint) {
+        return fieldNode;
+      }
+      const fieldPath = buildPath({
+        fieldNode,
+        type: field.type,
+        parentTypename: G__namespace.getNamedType(parentType).name,
+        path
+      });
+      blueprint.fields.push({
+        id: getBlueprintId(fieldPath),
+        documentBlueprintId: blueprint.id,
+        path: fieldPath
+      });
+      if (isScalarType(field.type)) {
         return fieldNode;
       }
       return __spreadProps(__spreadValues({}, fieldNode), {
@@ -1443,121 +1538,20 @@ var __objRest = (source, exclude) => {
           selections: [
             ...fieldNode.selectionSet.selections.map((selectionNode) => {
               switch (selectionNode.kind) {
-                case "Field":
-                  if (selectionNode.name.value === "__typename") {
-                    return selectionNode;
-                  }
-                  ensureObjectType(namedType);
-                  const subField = getObjectField(namedType, selectionNode);
-                  if (!subField) {
-                    return fieldNode;
-                  }
-                  if (G__namespace.isScalarType(G__namespace.getNamedType(subField.type))) {
-                    const newPath2 = [
-                      ...path,
-                      getNameAndAlias(selectionNode, isListType(subField.type), false)
-                    ];
-                    const fieldBlueprint3 = {
-                      id: getBlueprintId(newPath2),
-                      documentBlueprintId: getRelativeBlueprint(newPath2),
-                      path: newPath2
-                    };
-                    const blueprint3 = blueprints.find((blueprint4) => blueprint4.id === getRelativeBlueprint(path));
-                    blueprint3.fields.push(fieldBlueprint3);
-                    return selectionNode;
-                  }
-                  const subFieldType = subField.type;
-                  const namedSubFieldType = G__namespace.getNamedType(subFieldType);
-                  const newPath = [
-                    ...path,
-                    getNameAndAlias(selectionNode, isListType(subFieldType), isNodeField(namedSubFieldType))
-                  ];
-                  const fieldBlueprint2 = {
-                    id: getBlueprintId(newPath),
-                    documentBlueprintId: getRelativeBlueprint(newPath),
-                    path: newPath
-                  };
-                  const blueprint2 = blueprints.find((blueprint3) => blueprint3.id === getRelativeBlueprint(path));
-                  blueprint2.fields.push(fieldBlueprint2);
-                  return __spreadProps(__spreadValues({}, selectionNode), {
-                    selectionSet: {
-                      kind: "SelectionSet",
-                      selections: selectionNode.selectionSet.selections.map((subSelectionNode) => {
-                        switch (subSelectionNode.kind) {
-                          case "Field":
-                            if (subSelectionNode.name.value === "__typename") {
-                              return subSelectionNode;
-                            }
-                            ensureObjectType(namedSubFieldType);
-                            const subField1 = getObjectField(namedSubFieldType, subSelectionNode);
-                            const subType1 = subField1.type;
-                            const namedSubType2 = G__namespace.getNamedType(subType1);
-                            return formifyField({
-                              fieldNode: subSelectionNode,
-                              parentType: subFieldType,
-                              path: [
-                                ...path,
-                                getNameAndAlias(subSelectionNode, isListType(subType1), isNodeField(namedSubType2))
-                              ]
-                            });
-                          case "InlineFragment":
-                            const subNamedType = G__namespace.getNamedType(subField.type);
-                            ensureNodeField(subNamedType);
-                            ensureUnionType(subNamedType);
-                            const subType2 = getSelectedUnionType(subNamedType, subSelectionNode);
-                            const newPath2 = [
-                              ...path,
-                              getNameAndAlias(selectionNode, isListType(subField.type), true)
-                            ];
-                            return formifyNode({
-                              fieldOrInlineFragmentNode: subSelectionNode,
-                              type: subType2,
-                              path: newPath2,
-                              showInSidebar: false
-                            });
-                          default:
-                            throw new FormifyError("UNEXPECTED", `selection ${subSelectionNode.kind}`);
-                        }
-                      })
-                    }
+                case "Field": {
+                  return formifyFieldNode({
+                    fieldNode: selectionNode,
+                    parentType: field.type,
+                    path: fieldPath
                   });
-                case "InlineFragment":
-                  ensureUnionType(namedType);
-                  if (isNodeField(namedType)) {
-                    const parentType2 = getSelectedUnionType(namedType, selectionNode);
-                    return formifyNode({
-                      fieldOrInlineFragmentNode: selectionNode,
-                      type: parentType2,
-                      path,
-                      showInSidebar: false
-                    });
-                  }
-                  const subType = getSelectedUnionType(namedType, selectionNode);
-                  const namedSubType = G__namespace.getNamedType(subType);
-                  return __spreadProps(__spreadValues({}, selectionNode), {
-                    selectionSet: {
-                      kind: "SelectionSet",
-                      selections: selectionNode.selectionSet.selections.map((subSelectionNode) => {
-                        switch (subSelectionNode.kind) {
-                          case "Field":
-                            ensureObjectType(namedSubType);
-                            const subField2 = getObjectField(namedSubType, subSelectionNode);
-                            const subType2 = subField2.type;
-                            const namedSubType2 = G__namespace.getNamedType(subType2);
-                            return formifyField({
-                              fieldNode: subSelectionNode,
-                              parentType: subType,
-                              path: [
-                                ...path,
-                                getNameAndAlias(subSelectionNode, isListType(subType2), isNodeField(namedSubType2))
-                              ]
-                            });
-                          default:
-                            throw new FormifyError("UNEXPECTED", `selection ${subSelectionNode.kind}`);
-                        }
-                      })
-                    }
+                }
+                case "InlineFragment": {
+                  return formifyInlineFragmentNode({
+                    inlineFragmentNode: selectionNode,
+                    parentType: field.type,
+                    path: fieldPath
                   });
+                }
                 default:
                   throw new FormifyError("UNEXPECTED", `selection ${selectionNode.kind}`);
               }
@@ -1566,43 +1560,77 @@ var __objRest = (source, exclude) => {
         }
       });
     };
+    const formifyInlineFragmentNode = ({
+      inlineFragmentNode,
+      parentType,
+      path
+    }) => {
+      const type = getSelectedUnionType(parentType, inlineFragmentNode);
+      if (!type) {
+        return inlineFragmentNode;
+      }
+      if (isFormifiableDocument(type)) {
+        return formifyInlineFragmentDocument({
+          inlineFragmentNode,
+          type,
+          path,
+          showInSidebar: false
+        });
+      }
+      return __spreadProps(__spreadValues({}, inlineFragmentNode), {
+        selectionSet: {
+          kind: "SelectionSet",
+          selections: inlineFragmentNode.selectionSet.selections.map((selectionNode) => {
+            switch (selectionNode.kind) {
+              case "Field":
+                return formifyFieldNode({
+                  fieldNode: selectionNode,
+                  parentType: type,
+                  path
+                });
+              default:
+                throw new FormifyError("UNEXPECTED", `selection ${selectionNode.kind}`);
+            }
+          })
+        }
+      });
+    };
     const formifiedQuery = {
       kind: "Document",
       definitions: optimizedQuery.definitions.map((definition) => {
         typeInfo.enter(definition);
         ensureOperationDefinition(definition);
-        const type = typeInfo.getType();
-        const namedType = G__namespace.getNamedType(type);
-        ensureObjectType(namedType);
+        const parentType = typeInfo.getType();
         return __spreadProps(__spreadValues({}, definition), {
           selectionSet: {
             kind: "SelectionSet",
             selections: definition.selectionSet.selections.map((selectionNode) => {
               switch (selectionNode.kind) {
                 case "Field":
-                  const parentType = type;
-                  const namedParentType = G__namespace.getNamedType(parentType);
-                  ensureObjectType(namedParentType);
-                  const field = getObjectField(namedParentType, selectionNode);
-                  const namedFieldType = G__namespace.getNamedType(field.type);
-                  if (isNodeField(namedFieldType)) {
-                    return formifyNode({
-                      fieldOrInlineFragmentNode: selectionNode,
+                  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: [getNameAndAlias(selectionNode, false, true)],
+                      path,
                       showInSidebar: true
                     });
-                  } else if (isConnectionField(namedFieldType)) {
+                  } else if (isConnectionField(field.type)) {
                     return formifyConnection({
-                      namedFieldType,
+                      parentType: field.type,
                       selectionNode,
-                      path: [getNameAndAlias(selectionNode, false, false)]
+                      path
                     });
                   }
                   if (selectionNode.name.value === COLLECTION_FIELD_NAME || selectionNode.name.value === COLLECTIONS_FIELD_NAME) {
-                    const path = [
-                      getNameAndAlias(selectionNode, false, false)
-                    ];
+                    const path2 = buildPath({
+                      fieldNode: selectionNode,
+                      type: field.type
+                    });
                     return __spreadProps(__spreadValues({}, selectionNode), {
                       selectionSet: {
                         kind: "SelectionSet",
@@ -1610,16 +1638,15 @@ var __objRest = (source, exclude) => {
                           switch (subSelectionNode.kind) {
                             case "Field":
                               if (subSelectionNode.name.value === COLLECTIONS_DOCUMENTS_NAME) {
-                                ensureObjectType(namedFieldType);
-                                const n = namedFieldType.getFields()[COLLECTIONS_DOCUMENTS_NAME];
-                                const docType = G__namespace.getNamedType(n.type);
+                                const subField = getObjectField(field.type, subSelectionNode);
                                 return formifyConnection({
-                                  namedFieldType: docType,
+                                  parentType: subField.type,
                                   selectionNode: subSelectionNode,
-                                  path: [
-                                    ...path,
-                                    getNameAndAlias(subSelectionNode, isListType(docType), isNodeField(docType))
-                                  ]
+                                  path: buildPath({
+                                    fieldNode: subSelectionNode,
+                                    type: subField.type,
+                                    path: path2
+                                  })
                                 });
                               }
                               return subSelectionNode;
@@ -1659,9 +1686,27 @@ var __objRest = (source, exclude) => {
       this.name = "FormifyError";
     }
   }
+  const defaultState = {
+    status: "idle",
+    schema: void 0,
+    query: null,
+    queryString: null,
+    data: {},
+    changeSets: [],
+    count: 0,
+    blueprints: [],
+    formNodes: [],
+    documentForms: []
+  };
   function reducer(state, action) {
     var _a, _b, _c, _d;
     switch (action.type) {
+      case "start":
+        return __spreadProps(__spreadValues(__spreadValues({}, state), defaultState), {
+          query: action.value.query ? G__namespace.parse(action.value.query) : null,
+          queryString: action.value.query,
+          status: "initialized"
+        });
       case "addDocumentBlueprints":
         return __spreadProps(__spreadValues({}, state), {
           status: "formified",
@@ -1716,16 +1761,21 @@ var __objRest = (source, exclude) => {
           }
           if (event.mutationType.type === "change") {
             if (!action.value.form) {
-              getPathsToChange(event, state).forEach(({ formNode: formNode2, pathToChange }) => {
+              getBlueprintFieldsForEvent(blueprint, event).forEach((fieldBlueprint) => {
+                const { pathToChange } = getFormNodesForField(fieldBlueprint, formNode, event, state);
                 changeSets.push(__spreadValues({
                   path: pathToChange
-                }, buildChangeSet(event, formNode2)));
+                }, buildChangeSet(event, formNode)));
               });
             }
           } else if (event.mutationType.type === "referenceChange") {
             getBlueprintFieldsForEvent(blueprint, event).forEach((fieldBlueprint) => {
-              const { pathToChange, formNodes, eventLocation } = getFormNodesForField(fieldBlueprint, formNode, event, state);
-              if (action.value.form) {
+              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,
@@ -1736,8 +1786,15 @@ var __objRest = (source, exclude) => {
                   path: pathToChange
                 }, buildChangeSet(event, newFormNode)));
               }
-              formNodes.forEach((subFormNode) => {
+              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);
                 }
               });
@@ -1890,7 +1947,7 @@ var __objRest = (source, exclude) => {
   }) => {
     const formIds = React__default["default"].useRef([]);
     const [state, dispatch] = React__default["default"].useReducer(reducer, {
-      status: "initialized",
+      status: "idle",
       schema: void 0,
       query: query ? G__namespace.parse(query) : null,
       queryString: query,
@@ -1901,6 +1958,17 @@ var __objRest = (source, exclude) => {
       formNodes: [],
       documentForms: []
     });
+    React__default["default"].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__default["default"].useEffect(() => {
       if (state.status === "initialized") {
         cms.api.tina.request(query, { variables }).then((res) => {
@@ -1932,7 +2000,7 @@ var __objRest = (source, exclude) => {
           variables
         });
         state.blueprints.map((blueprint) => {
-          const responseAtBlueprint = getIn2(result, getBlueprintAliasPath(blueprint));
+          const responseAtBlueprint = getValueForBlueprint(result, getBlueprintAliasPath(blueprint));
           const location = [];
           const findFormNodes = (res, location2) => {
             if (Array.isArray(res)) {
@@ -1981,6 +2049,9 @@ var __objRest = (source, exclude) => {
     React__default["default"].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) => {
@@ -2002,6 +2073,9 @@ var __objRest = (source, exclude) => {
                           values
                           _internalSys: sys {
                             path
+                            collection {
+                              name
+                            }
                           }
                         }
                       }
@@ -2032,7 +2106,8 @@ var __objRest = (source, exclude) => {
           const form = cms.forms.find(changeSet.formId);
           resolveSubFields({
             formNode: changeSet.formNode,
-            form
+            form,
+            loc: []
           }).then((res) => {
             dispatch({
               type: "setIn",
@@ -2141,22 +2216,15 @@ var __objRest = (source, exclude) => {
       const data = {};
       await sequential(form.fields, async (field) => {
         const value = form.values[field.name];
-        const fieldName = field.list ? `${field.name}.[]` : field.name;
         const blueprint = getFormNodeBlueprint(formNode, state);
-        const blueprintName = getBlueprintNamePath(blueprint);
-        const extra = [];
-        if (prefix) {
-          extra.push(prefix);
-        }
-        const matchName = [
-          blueprintName,
-          DATA_NODE_NAME,
-          ...extra,
-          fieldName
-        ].join(".");
+        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) {
@@ -2170,18 +2238,17 @@ var __objRest = (source, exclude) => {
                   if (!Array.isArray(value)) {
                     throw new Error(`Expected value for object list field to be an array`);
                   }
-                  const d = [];
-                  await sequential(value, async (item, index) => {
+                  data[keyName] = await sequential(value, async (item, index) => {
                     const template = field.templates[item._template];
-                    const d2 = await resolveSubFields({
+                    return __spreadProps(__spreadValues({}, await resolveSubFields({
                       formNode,
                       form: { fields: template.fields, values: item },
-                      prefix: [prefix, fieldName].join("."),
+                      prefix: prefix ? [prefix, fieldName].join(".") : fieldName,
                       loc: [...loc, index]
+                    })), {
+                      __typename: field.typeMap[item._template]
                     });
-                    d.push(d2);
                   });
-                  data[keyName] = d;
                 });
               } else {
                 throw new Error("blocks without list true is not yet supported");
@@ -2197,18 +2264,14 @@ var __objRest = (source, exclude) => {
                   if (!Array.isArray(value)) {
                     throw new Error(`Expected value for object list field to be an array`);
                   }
-                  const d = [];
-                  await sequential(value, async (item, index) => {
-                    const d2 = await resolveSubFields({
+                  data[keyName] = await sequential(value, async (item, index) => {
+                    return resolveSubFields({
                       formNode,
                       form: { fields: field.fields, values: item },
                       prefix: [prefix, fieldName].join("."),
                       loc: [...loc, index]
                     });
-                    d.push(d2);
-                    return true;
                   });
-                  data[keyName] = d;
                   return true;
                 });
               } else {
@@ -2218,13 +2281,12 @@ var __objRest = (source, exclude) => {
                     data[keyName] = null;
                     return true;
                   }
-                  const d = await resolveSubFields({
+                  data[keyName] = await resolveSubFields({
                     formNode,
                     form: { fields: field.fields, values: value },
                     prefix: [prefix, fieldName].join("."),
                     loc
                   });
-                  data[keyName] = d;
                   return true;
                 });
               }
@@ -2245,6 +2307,9 @@ var __objRest = (source, exclude) => {
                             values
                             _internalSys: sys {
                               path
+                              collection {
+                                name
+                              }
                             }
                           }
                         }
@@ -2279,12 +2344,13 @@ var __objRest = (source, exclude) => {
                       }
                     }
                   `, { variables: { id: value } });
-              const d = await resolveSubFields({
-                formNode: subDocumentFormNode,
-                form: form2,
-                loc: location
+              data[keyName] = __spreadProps(__spreadValues({}, res.node), {
+                data: await resolveSubFields({
+                  formNode: subDocumentFormNode,
+                  form: form2,
+                  loc: location
+                })
               });
-              data[keyName] = __spreadProps(__spreadValues({}, res.node), { data: d });
             });
             break;
           default:
@@ -2352,13 +2418,13 @@ mutation addPendingDocumentMutation(
         return result;
       };
       this.getSchema = async () => {
-        if (!this.schema) {
+        if (!this.gqlSchema) {
           const data = await this.request(G.getIntrospectionQuery(), {
             variables: {}
           });
-          this.schema = G.buildClientSchema(data);
+          this.gqlSchema = G.buildClientSchema(data);
         }
-        return this.schema;
+        return this.gqlSchema;
       };
       this.getOptimizedQuery = async (documentNode) => {
         const data = await this.request(`query GetOptimizedQuery($queryString: String!) {
@@ -2368,6 +2434,13 @@ mutation addPendingDocumentMutation(
         });
         return G.parse(data.getOptimizedQuery);
       };
+      if (options.schema) {
+        const enrichedSchema = new schemaTools.TinaSchema(__spreadValues({
+          version: { fullVersion: "", major: "", minor: "", patch: "" },
+          meta: { flags: [] }
+        }, schemaTools.addNamespaceToSchema(options.schema, [])));
+        this.schema = enrichedSchema;
+      }
       this.options = options;
       this.setBranch(options.branch);
       this.events.subscribe("branch:change", ({ branchName }) => {
@@ -2577,11 +2650,11 @@ mutation addPendingDocumentMutation(
   const DEFAULT_LOCAL_TINA_GQL_SERVER_URL = "http://localhost:4001/graphql";
   class LocalClient extends Client {
     constructor(props) {
-      const clientProps = {
+      const clientProps = __spreadProps(__spreadValues({}, props), {
         clientId: "",
         branch: "",
         customContentApiUrl: props && props.customContentApiUrl ? props.customContentApiUrl : DEFAULT_LOCAL_TINA_GQL_SERVER_URL
-      };
+      });
       super(clientProps);
     }
     async isAuthorized() {
@@ -2652,6 +2725,17 @@ mutation addPendingDocumentMutation(
       }`, { variables: {} });
       return response;
     }
+    async deleteDocument({
+      collection,
+      relativePath
+    }) {
+      await this.api.request(`#graphql
+      mutation DeleteDocument($collection: String!, $relativePath: String!  ){
+  deleteDocument(collection: $collection, relativePath: $relativePath){
+    __typename
+  }
+}`, { variables: { collection, relativePath } });
+    }
     async fetchCollection(collectionName, includeDocuments) {
       const response = await this.api.request(`#graphql
       query($collection: String!, $includeDocuments: Boolean!){
@@ -2876,6 +2960,7 @@ mutation addPendingDocumentMutation(
     }))));
   };
   const TinaCloudAuthWall = TinaCloudProvider;
+  var styles = '*, ::before, ::after {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-rotate: 0;\n      --tw-skew-x: 0;\n      --tw-skew-y: 0;\n      --tw-scale-x: 1;\n      --tw-scale-y: 1;\n      --tw-pan-x:  ;\n      --tw-pan-y:  ;\n      --tw-pinch-zoom:  ;\n      --tw-scroll-snap-strictness: proximity;\n      --tw-ordinal:  ;\n      --tw-slashed-zero:  ;\n      --tw-numeric-figure:  ;\n      --tw-numeric-spacing:  ;\n      --tw-numeric-fraction:  ;\n      --tw-ring-inset:  ;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-color: rgb(0 132 255 / 0.5);\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-colored: 0 0 #0000;\n      --tw-blur:  ;\n      --tw-brightness:  ;\n      --tw-contrast:  ;\n      --tw-grayscale:  ;\n      --tw-hue-rotate:  ;\n      --tw-invert:  ;\n      --tw-saturate:  ;\n      --tw-sepia:  ;\n      --tw-drop-shadow:  ;\n      --tw-backdrop-blur:  ;\n      --tw-backdrop-brightness:  ;\n      --tw-backdrop-contrast:  ;\n      --tw-backdrop-grayscale:  ;\n      --tw-backdrop-hue-rotate:  ;\n      --tw-backdrop-invert:  ;\n      --tw-backdrop-opacity:  ;\n      --tw-backdrop-saturate:  ;\n      --tw-backdrop-sepia:  ;\n}\n.tina-tailwind .static {\n      position: static;\n}\n.tina-tailwind .fixed {\n      position: fixed;\n}\n.tina-tailwind .absolute {\n      position: absolute;\n}\n.tina-tailwind .relative {\n      position: relative;\n}\n.tina-tailwind .left-0 {\n      left: 0px;\n}\n.tina-tailwind .right-0 {\n      right: 0px;\n}\n.tina-tailwind .mx-auto {\n      margin-left: auto;\n      margin-right: auto;\n}\n.tina-tailwind .mr-2 {\n      margin-right: 8px;\n}\n.tina-tailwind .mb-2 {\n      margin-bottom: 8px;\n}\n.tina-tailwind .mb-1 {\n      margin-bottom: 4px;\n}\n.tina-tailwind .-mt-0\\.5 {\n      margin-top: -2px;\n}\n.tina-tailwind .-mt-0 {\n      margin-top: -0px;\n}\n.tina-tailwind .ml-1 {\n      margin-left: 4px;\n}\n.tina-tailwind .mt-2 {\n      margin-top: 8px;\n}\n.tina-tailwind .mr-1\\.5 {\n      margin-right: 6px;\n}\n.tina-tailwind .mr-1 {\n      margin-right: 4px;\n}\n.tina-tailwind .block {\n      display: block;\n}\n.tina-tailwind .inline-block {\n      display: inline-block;\n}\n.tina-tailwind .inline {\n      display: inline;\n}\n.tina-tailwind .flex {\n      display: flex;\n}\n.tina-tailwind .inline-flex {\n      display: inline-flex;\n}\n.tina-tailwind .table {\n      display: table;\n}\n.tina-tailwind .h-screen {\n      height: 100vh;\n}\n.tina-tailwind .h-auto {\n      height: auto;\n}\n.tina-tailwind .h-full {\n      height: 100%;\n}\n.tina-tailwind .h-6 {\n      height: 24px;\n}\n.tina-tailwind .h-10 {\n      height: 40px;\n}\n.tina-tailwind .h-5 {\n      height: 20px;\n}\n.tina-tailwind .h-12 {\n      height: 48px;\n}\n.tina-tailwind .w-full {\n      width: 100%;\n}\n.tina-tailwind .w-10 {\n      width: 40px;\n}\n.tina-tailwind .w-auto {\n      width: auto;\n}\n.tina-tailwind .w-5 {\n      width: 20px;\n}\n.tina-tailwind .w-56 {\n      width: 224px;\n}\n.tina-tailwind .w-0 {\n      width: 0px;\n}\n.tina-tailwind .w-6 {\n      width: 24px;\n}\n.tina-tailwind .max-w-lg {\n      max-width: 32rem;\n}\n.tina-tailwind .max-w-screen-xl {\n      max-width: 1280px;\n}\n.tina-tailwind .max-w-form {\n      max-width: 900px;\n}\n.tina-tailwind .max-w-full {\n      max-width: 100%;\n}\n.tina-tailwind .flex-1 {\n      flex: 1 1 0%;\n}\n.tina-tailwind .flex-shrink-0 {\n      flex-shrink: 0;\n}\n.tina-tailwind .flex-grow-0 {\n      flex-grow: 0;\n}\n.tina-tailwind .table-auto {\n      table-layout: auto;\n}\n.tina-tailwind .origin-top-right {\n      transform-origin: top right;\n}\n.tina-tailwind .scale-95 {\n      --tw-scale-x: .95;\n      --tw-scale-y: .95;\n      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.tina-tailwind .scale-100 {\n      --tw-scale-x: 1;\n      --tw-scale-y: 1;\n      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.tina-tailwind .transform {\n      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.tina-tailwind .cursor-pointer {\n      cursor: pointer;\n}\n.tina-tailwind .flex-col {\n      flex-direction: column;\n}\n.tina-tailwind .items-end {\n      align-items: flex-end;\n}\n.tina-tailwind .items-center {\n      align-items: center;\n}\n.tina-tailwind .items-stretch {\n      align-items: stretch;\n}\n.tina-tailwind .justify-end {\n      justify-content: flex-end;\n}\n.tina-tailwind .justify-center {\n      justify-content: center;\n}\n.tina-tailwind .justify-between {\n      justify-content: space-between;\n}\n.tina-tailwind .gap-0\\.5 {\n      gap: 2px;\n}\n.tina-tailwind .gap-0 {\n      gap: 0px;\n}\n.tina-tailwind .gap-4 {\n      gap: 16px;\n}\n.tina-tailwind .gap-3 {\n      gap: 12px;\n}\n.tina-tailwind .divide-y > :not([hidden]) ~ :not([hidden]) {\n      --tw-divide-y-reverse: 0;\n      border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n      border-bottom-width: calc(1px * var(--tw-divide-y-reverse));\n}\n.tina-tailwind .divide-gray-150 > :not([hidden]) ~ :not([hidden]) {\n      --tw-divide-opacity: 1;\n      border-color: rgb(230 227 239 / var(--tw-divide-opacity));\n}\n.tina-tailwind .overflow-hidden {\n      overflow: hidden;\n}\n.tina-tailwind .overflow-y-auto {\n      overflow-y: auto;\n}\n.tina-tailwind .whitespace-nowrap {\n      white-space: nowrap;\n}\n.tina-tailwind .rounded-lg {\n      border-radius: 8px;\n}\n.tina-tailwind .rounded-full {\n      border-radius: 9999px;\n}\n.tina-tailwind .rounded-md {\n      border-radius: 6px;\n}\n.tina-tailwind .border {\n      border-width: 1px;\n}\n.tina-tailwind .border-b {\n      border-bottom-width: 1px;\n}\n.tina-tailwind .border-gray-150 {\n      --tw-border-opacity: 1;\n      border-color: rgb(230 227 239 / var(--tw-border-opacity));\n}\n.tina-tailwind .border-gray-200 {\n      --tw-border-opacity: 1;\n      border-color: rgb(225 221 236 / var(--tw-border-opacity));\n}\n.tina-tailwind .bg-white {\n      --tw-bg-opacity: 1;\n      background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.tina-tailwind .bg-gray-50 {\n      --tw-bg-opacity: 1;\n      background-color: rgb(246 246 249 / var(--tw-bg-opacity));\n}\n.tina-tailwind .bg-blue-500 {\n      --tw-bg-opacity: 1;\n      background-color: rgb(0 132 255 / var(--tw-bg-opacity));\n}\n.tina-tailwind .bg-gradient-to-b {\n      background-image: linear-gradient(to bottom, var(--tw-gradient-stops));\n}\n.tina-tailwind .from-blue-900 {\n      --tw-gradient-from: #1D2C6C;\n      --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(29 44 108 / 0));\n}\n.tina-tailwind .to-gray-900 {\n      --tw-gradient-to: #252336;\n}\n.tina-tailwind .px-4 {\n      padding-left: 16px;\n      padding-right: 16px;\n}\n.tina-tailwind .py-6 {\n      padding-top: 24px;\n      padding-bottom: 24px;\n}\n.tina-tailwind .px-5 {\n      padding-left: 20px;\n      padding-right: 20px;\n}\n.tina-tailwind .py-4 {\n      padding-top: 16px;\n      padding-bottom: 16px;\n}\n.tina-tailwind .px-12 {\n      padding-left: 48px;\n      padding-right: 48px;\n}\n.tina-tailwind .py-10 {\n      padding-top: 40px;\n      padding-bottom: 40px;\n}\n.tina-tailwind .px-20 {\n      padding-left: 80px;\n      padding-right: 80px;\n}\n.tina-tailwind .px-6 {\n      padding-left: 24px;\n      padding-right: 24px;\n}\n.tina-tailwind .py-1 {\n      padding-top: 4px;\n      padding-bottom: 4px;\n}\n.tina-tailwind .py-2 {\n      padding-top: 8px;\n      padding-bottom: 8px;\n}\n.tina-tailwind .pt-4 {\n      padding-top: 16px;\n}\n.tina-tailwind .pb-4 {\n      padding-bottom: 16px;\n}\n.tina-tailwind .pt-18 {\n      padding-top: 72px;\n}\n.tina-tailwind .text-left {\n      text-align: left;\n}\n.tina-tailwind .text-center {\n      text-align: center;\n}\n.tina-tailwind .font-sans {\n      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n}\n.tina-tailwind .text-2xl {\n      font-size: 24px;\n      line-height: 1.33;\n}\n.tina-tailwind .text-base {\n      font-size: 16px;\n      line-height: 1.5;\n}\n.tina-tailwind .text-sm {\n      font-size: 14px;\n      line-height: 1.43;\n}\n.tina-tailwind .text-xl {\n      font-size: 20px;\n      line-height: 1.4;\n}\n.tina-tailwind .text-md {\n      font-size: 16px;\n      line-height: 1.5;\n}\n.tina-tailwind .text-xs {\n      font-size: 13px;\n      line-height: 1.33;\n}\n.tina-tailwind .font-medium {\n      font-weight: 500;\n}\n.tina-tailwind .uppercase {\n      text-transform: uppercase;\n}\n.tina-tailwind .italic {\n      font-style: italic;\n}\n.tina-tailwind .leading-normal {\n      line-height: 1.5;\n}\n.tina-tailwind .leading-tight {\n      line-height: 1.25;\n}\n.tina-tailwind .leading-5 {\n      line-height: 20px;\n}\n.tina-tailwind .tracking-wide {\n      letter-spacing: 0.025em;\n}\n.tina-tailwind .text-gray-600 {\n      --tw-text-opacity: 1;\n      color: rgb(86 81 101 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-700 {\n      --tw-text-opacity: 1;\n      color: rgb(67 62 82 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-blue-600 {\n      --tw-text-opacity: 1;\n      color: rgb(5 116 228 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-500 {\n      --tw-text-opacity: 1;\n      color: rgb(113 108 127 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-400 {\n      --tw-text-opacity: 1;\n      color: rgb(145 140 158 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-current {\n      color: currentColor;\n}\n.tina-tailwind .text-white {\n      --tw-text-opacity: 1;\n      color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-800 {\n      --tw-text-opacity: 1;\n      color: rgb(54 49 69 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-900 {\n      --tw-text-opacity: 1;\n      color: rgb(37 35 54 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-red-500 {\n      --tw-text-opacity: 1;\n      color: rgb(239 68 68 / var(--tw-text-opacity));\n}\n.tina-tailwind .underline {\n      text-decoration-line: underline;\n}\n.tina-tailwind .opacity-100 {\n      opacity: 1;\n}\n.tina-tailwind .opacity-90 {\n      opacity: .9;\n}\n.tina-tailwind .opacity-80 {\n      opacity: .8;\n}\n.tina-tailwind .opacity-50 {\n      opacity: .5;\n}\n.tina-tailwind .opacity-70 {\n      opacity: .7;\n}\n.tina-tailwind .opacity-0 {\n      opacity: 0;\n}\n.tina-tailwind .shadow-lg {\n      --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n      --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tina-tailwind .shadow-2xl {\n      --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n      --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);\n      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tina-tailwind .shadow {\n      --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n      --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tina-tailwind .ring-1 {\n      --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n      --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.tina-tailwind .ring-black {\n      --tw-ring-opacity: 1;\n      --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));\n}\n.tina-tailwind .ring-opacity-5 {\n      --tw-ring-opacity: .05;\n}\n.tina-tailwind .filter {\n      filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.tina-tailwind .transition-opacity {\n      transition-property: opacity;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n      transition-duration: 150ms;\n}\n.tina-tailwind .transition-colors {\n      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n      transition-duration: 150ms;\n}\n.tina-tailwind .transition-all {\n      transition-property: all;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n      transition-duration: 150ms;\n}\n.tina-tailwind .transition {\n      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n      transition-duration: 150ms;\n}\n.tina-tailwind .duration-300 {\n      transition-duration: 300ms;\n}\n.tina-tailwind .duration-150 {\n      transition-duration: 150ms;\n}\n.tina-tailwind .duration-100 {\n      transition-duration: 100ms;\n}\n.tina-tailwind .duration-75 {\n      transition-duration: 75ms;\n}\n.tina-tailwind .ease-out {\n      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n.tina-tailwind .ease-in {\n      transition-timing-function: cubic-bezier(0.4, 0, 1, 1);\n}\n.tina-tailwind .icon-parent svg {\n      fill: currentColor;\n    }\n\n.tina-tailwind {\n      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n      font-size: 16px;\n      line-height: 1.5;\n      --tw-text-opacity: 1;\n      color: rgb(86 81 101 / var(--tw-text-opacity));\n}\n\n.tina-tailwind .hover\\:bg-blue-600:hover {\n      --tw-bg-opacity: 1;\n      background-color: rgb(5 116 228 / var(--tw-bg-opacity));\n}\n\n.tina-tailwind .hover\\:text-blue-600:hover {\n      --tw-text-opacity: 1;\n      color: rgb(5 116 228 / var(--tw-text-opacity));\n}\n\n.tina-tailwind .hover\\:text-blue-400:hover {\n      --tw-text-opacity: 1;\n      color: rgb(34 150 254 / var(--tw-text-opacity));\n}\n\n.tina-tailwind .hover\\:opacity-100:hover {\n      opacity: 1;\n}\n\n.tina-tailwind .focus\\:text-blue-400:focus {\n      --tw-text-opacity: 1;\n      color: rgb(34 150 254 / var(--tw-text-opacity));\n}\n\n.tina-tailwind .focus\\:underline:focus {\n      text-decoration-line: underline;\n}\n\n.tina-tailwind .focus\\:shadow-outline:focus {\n      --tw-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);\n      --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);\n      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.tina-tailwind .focus\\:outline-none:focus {\n      outline: 2px solid transparent;\n      outline-offset: 2px;\n}\n\n.tina-tailwind .focus\\:ring-2:focus {\n      --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n      --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.tina-tailwind .focus\\:ring-blue-500:focus {\n      --tw-ring-opacity: 1;\n      --tw-ring-color: rgb(0 132 255 / var(--tw-ring-opacity));\n}\n';
   class ContentCreatorPlugin {
     constructor(options) {
       this.__type = "content-creator";
@@ -3038,7 +3123,6 @@ mutation addPendingDocumentMutation(
       };
     }, [plugin]);
   };
-  var styles = '*, ::before, ::after {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-rotate: 0;\n      --tw-skew-x: 0;\n      --tw-skew-y: 0;\n      --tw-scale-x: 1;\n      --tw-scale-y: 1;\n      --tw-pan-x:  ;\n      --tw-pan-y:  ;\n      --tw-pinch-zoom:  ;\n      --tw-scroll-snap-strictness: proximity;\n      --tw-ordinal:  ;\n      --tw-slashed-zero:  ;\n      --tw-numeric-figure:  ;\n      --tw-numeric-spacing:  ;\n      --tw-numeric-fraction:  ;\n      --tw-ring-inset:  ;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-color: rgb(0 132 255 / 0.5);\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-colored: 0 0 #0000;\n      --tw-blur:  ;\n      --tw-brightness:  ;\n      --tw-contrast:  ;\n      --tw-grayscale:  ;\n      --tw-hue-rotate:  ;\n      --tw-invert:  ;\n      --tw-saturate:  ;\n      --tw-sepia:  ;\n      --tw-drop-shadow:  ;\n      --tw-backdrop-blur:  ;\n      --tw-backdrop-brightness:  ;\n      --tw-backdrop-contrast:  ;\n      --tw-backdrop-grayscale:  ;\n      --tw-backdrop-hue-rotate:  ;\n      --tw-backdrop-invert:  ;\n      --tw-backdrop-opacity:  ;\n      --tw-backdrop-saturate:  ;\n      --tw-backdrop-sepia:  ;\n}\n.tina-tailwind .static {\n      position: static;\n}\n.tina-tailwind .fixed {\n      position: fixed;\n}\n.tina-tailwind .absolute {\n      position: absolute;\n}\n.tina-tailwind .relative {\n      position: relative;\n}\n.tina-tailwind .left-0 {\n      left: 0px;\n}\n.tina-tailwind .right-0 {\n      right: 0px;\n}\n.tina-tailwind .mx-auto {\n      margin-left: auto;\n      margin-right: auto;\n}\n.tina-tailwind .mr-2 {\n      margin-right: 8px;\n}\n.tina-tailwind .mb-2 {\n      margin-bottom: 8px;\n}\n.tina-tailwind .mb-1 {\n      margin-bottom: 4px;\n}\n.tina-tailwind .-mt-0\\.5 {\n      margin-top: -2px;\n}\n.tina-tailwind .-mt-0 {\n      margin-top: -0px;\n}\n.tina-tailwind .ml-1 {\n      margin-left: 4px;\n}\n.tina-tailwind .mt-2 {\n      margin-top: 8px;\n}\n.tina-tailwind .mr-1\\.5 {\n      margin-right: 6px;\n}\n.tina-tailwind .mr-1 {\n      margin-right: 4px;\n}\n.tina-tailwind .block {\n      display: block;\n}\n.tina-tailwind .inline-block {\n      display: inline-block;\n}\n.tina-tailwind .inline {\n      display: inline;\n}\n.tina-tailwind .flex {\n      display: flex;\n}\n.tina-tailwind .inline-flex {\n      display: inline-flex;\n}\n.tina-tailwind .table {\n      display: table;\n}\n.tina-tailwind .h-screen {\n      height: 100vh;\n}\n.tina-tailwind .h-auto {\n      height: auto;\n}\n.tina-tailwind .h-full {\n      height: 100%;\n}\n.tina-tailwind .h-6 {\n      height: 24px;\n}\n.tina-tailwind .h-10 {\n      height: 40px;\n}\n.tina-tailwind .h-5 {\n      height: 20px;\n}\n.tina-tailwind .h-12 {\n      height: 48px;\n}\n.tina-tailwind .w-full {\n      width: 100%;\n}\n.tina-tailwind .w-10 {\n      width: 40px;\n}\n.tina-tailwind .w-auto {\n      width: auto;\n}\n.tina-tailwind .w-5 {\n      width: 20px;\n}\n.tina-tailwind .w-56 {\n      width: 224px;\n}\n.tina-tailwind .w-6 {\n      width: 24px;\n}\n.tina-tailwind .max-w-lg {\n      max-width: 32rem;\n}\n.tina-tailwind .max-w-screen-xl {\n      max-width: 1280px;\n}\n.tina-tailwind .max-w-form {\n      max-width: 900px;\n}\n.tina-tailwind .max-w-full {\n      max-width: 100%;\n}\n.tina-tailwind .flex-1 {\n      flex: 1 1 0%;\n}\n.tina-tailwind .flex-shrink-0 {\n      flex-shrink: 0;\n}\n.tina-tailwind .flex-grow-0 {\n      flex-grow: 0;\n}\n.tina-tailwind .table-auto {\n      table-layout: auto;\n}\n.tina-tailwind .origin-top-right {\n      transform-origin: top right;\n}\n.tina-tailwind .scale-95 {\n      --tw-scale-x: .95;\n      --tw-scale-y: .95;\n      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.tina-tailwind .scale-100 {\n      --tw-scale-x: 1;\n      --tw-scale-y: 1;\n      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.tina-tailwind .transform {\n      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.tina-tailwind .cursor-pointer {\n      cursor: pointer;\n}\n.tina-tailwind .flex-col {\n      flex-direction: column;\n}\n.tina-tailwind .items-end {\n      align-items: flex-end;\n}\n.tina-tailwind .items-center {\n      align-items: center;\n}\n.tina-tailwind .items-stretch {\n      align-items: stretch;\n}\n.tina-tailwind .justify-end {\n      justify-content: flex-end;\n}\n.tina-tailwind .justify-center {\n      justify-content: center;\n}\n.tina-tailwind .justify-between {\n      justify-content: space-between;\n}\n.tina-tailwind .gap-0\\.5 {\n      gap: 2px;\n}\n.tina-tailwind .gap-0 {\n      gap: 0px;\n}\n.tina-tailwind .gap-4 {\n      gap: 16px;\n}\n.tina-tailwind .gap-3 {\n      gap: 12px;\n}\n.tina-tailwind .divide-y > :not([hidden]) ~ :not([hidden]) {\n      --tw-divide-y-reverse: 0;\n      border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n      border-bottom-width: calc(1px * var(--tw-divide-y-reverse));\n}\n.tina-tailwind .divide-gray-150 > :not([hidden]) ~ :not([hidden]) {\n      --tw-divide-opacity: 1;\n      border-color: rgb(230 227 239 / var(--tw-divide-opacity));\n}\n.tina-tailwind .overflow-hidden {\n      overflow: hidden;\n}\n.tina-tailwind .overflow-y-auto {\n      overflow-y: auto;\n}\n.tina-tailwind .whitespace-nowrap {\n      white-space: nowrap;\n}\n.tina-tailwind .rounded-lg {\n      border-radius: 8px;\n}\n.tina-tailwind .rounded-full {\n      border-radius: 9999px;\n}\n.tina-tailwind .rounded-md {\n      border-radius: 6px;\n}\n.tina-tailwind .border {\n      border-width: 1px;\n}\n.tina-tailwind .border-b {\n      border-bottom-width: 1px;\n}\n.tina-tailwind .border-gray-150 {\n      --tw-border-opacity: 1;\n      border-color: rgb(230 227 239 / var(--tw-border-opacity));\n}\n.tina-tailwind .border-gray-200 {\n      --tw-border-opacity: 1;\n      border-color: rgb(225 221 236 / var(--tw-border-opacity));\n}\n.tina-tailwind .bg-white {\n      --tw-bg-opacity: 1;\n      background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.tina-tailwind .bg-gray-50 {\n      --tw-bg-opacity: 1;\n      background-color: rgb(246 246 249 / var(--tw-bg-opacity));\n}\n.tina-tailwind .bg-blue-500 {\n      --tw-bg-opacity: 1;\n      background-color: rgb(0 132 255 / var(--tw-bg-opacity));\n}\n.tina-tailwind .bg-gradient-to-b {\n      background-image: linear-gradient(to bottom, var(--tw-gradient-stops));\n}\n.tina-tailwind .from-blue-900 {\n      --tw-gradient-from: #1D2C6C;\n      --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(29 44 108 / 0));\n}\n.tina-tailwind .to-gray-900 {\n      --tw-gradient-to: #252336;\n}\n.tina-tailwind .px-4 {\n      padding-left: 16px;\n      padding-right: 16px;\n}\n.tina-tailwind .py-6 {\n      padding-top: 24px;\n      padding-bottom: 24px;\n}\n.tina-tailwind .px-5 {\n      padding-left: 20px;\n      padding-right: 20px;\n}\n.tina-tailwind .py-4 {\n      padding-top: 16px;\n      padding-bottom: 16px;\n}\n.tina-tailwind .px-12 {\n      padding-left: 48px;\n      padding-right: 48px;\n}\n.tina-tailwind .py-10 {\n      padding-top: 40px;\n      padding-bottom: 40px;\n}\n.tina-tailwind .px-20 {\n      padding-left: 80px;\n      padding-right: 80px;\n}\n.tina-tailwind .px-6 {\n      padding-left: 24px;\n      padding-right: 24px;\n}\n.tina-tailwind .py-1 {\n      padding-top: 4px;\n      padding-bottom: 4px;\n}\n.tina-tailwind .py-2 {\n      padding-top: 8px;\n      padding-bottom: 8px;\n}\n.tina-tailwind .pt-4 {\n      padding-top: 16px;\n}\n.tina-tailwind .pb-4 {\n      padding-bottom: 16px;\n}\n.tina-tailwind .pt-18 {\n      padding-top: 72px;\n}\n.tina-tailwind .text-left {\n      text-align: left;\n}\n.tina-tailwind .text-center {\n      text-align: center;\n}\n.tina-tailwind .font-sans {\n      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n}\n.tina-tailwind .text-2xl {\n      font-size: 24px;\n      line-height: 1.33;\n}\n.tina-tailwind .text-base {\n      font-size: 16px;\n      line-height: 1.5;\n}\n.tina-tailwind .text-sm {\n      font-size: 14px;\n      line-height: 1.43;\n}\n.tina-tailwind .text-xl {\n      font-size: 20px;\n      line-height: 1.4;\n}\n.tina-tailwind .text-md {\n      font-size: 16px;\n      line-height: 1.5;\n}\n.tina-tailwind .text-xs {\n      font-size: 13px;\n      line-height: 1.33;\n}\n.tina-tailwind .font-medium {\n      font-weight: 500;\n}\n.tina-tailwind .uppercase {\n      text-transform: uppercase;\n}\n.tina-tailwind .italic {\n      font-style: italic;\n}\n.tina-tailwind .leading-normal {\n      line-height: 1.5;\n}\n.tina-tailwind .leading-tight {\n      line-height: 1.25;\n}\n.tina-tailwind .leading-5 {\n      line-height: 20px;\n}\n.tina-tailwind .tracking-wide {\n      letter-spacing: 0.025em;\n}\n.tina-tailwind .text-gray-700 {\n      --tw-text-opacity: 1;\n      color: rgb(67 62 82 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-blue-600 {\n      --tw-text-opacity: 1;\n      color: rgb(5 116 228 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-500 {\n      --tw-text-opacity: 1;\n      color: rgb(113 108 127 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-400 {\n      --tw-text-opacity: 1;\n      color: rgb(145 140 158 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-current {\n      color: currentColor;\n}\n.tina-tailwind .text-white {\n      --tw-text-opacity: 1;\n      color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-600 {\n      --tw-text-opacity: 1;\n      color: rgb(86 81 101 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-800 {\n      --tw-text-opacity: 1;\n      color: rgb(54 49 69 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-900 {\n      --tw-text-opacity: 1;\n      color: rgb(37 35 54 / var(--tw-text-opacity));\n}\n.tina-tailwind .underline {\n      text-decoration-line: underline;\n}\n.tina-tailwind .opacity-100 {\n      opacity: 1;\n}\n.tina-tailwind .opacity-90 {\n      opacity: .9;\n}\n.tina-tailwind .opacity-80 {\n      opacity: .8;\n}\n.tina-tailwind .opacity-50 {\n      opacity: .5;\n}\n.tina-tailwind .opacity-70 {\n      opacity: .7;\n}\n.tina-tailwind .opacity-0 {\n      opacity: 0;\n}\n.tina-tailwind .shadow-lg {\n      --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n      --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tina-tailwind .shadow-2xl {\n      --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n      --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);\n      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tina-tailwind .shadow {\n      --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n      --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tina-tailwind .ring-1 {\n      --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n      --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.tina-tailwind .ring-black {\n      --tw-ring-opacity: 1;\n      --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));\n}\n.tina-tailwind .ring-opacity-5 {\n      --tw-ring-opacity: .05;\n}\n.tina-tailwind .filter {\n      filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.tina-tailwind .transition-opacity {\n      transition-property: opacity;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n      transition-duration: 150ms;\n}\n.tina-tailwind .transition-colors {\n      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n      transition-duration: 150ms;\n}\n.tina-tailwind .transition-all {\n      transition-property: all;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n      transition-duration: 150ms;\n}\n.tina-tailwind .transition {\n      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n      transition-duration: 150ms;\n}\n.tina-tailwind .duration-300 {\n      transition-duration: 300ms;\n}\n.tina-tailwind .duration-150 {\n      transition-duration: 150ms;\n}\n.tina-tailwind .duration-100 {\n      transition-duration: 100ms;\n}\n.tina-tailwind .duration-75 {\n      transition-duration: 75ms;\n}\n.tina-tailwind .ease-out {\n      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n.tina-tailwind .ease-in {\n      transition-timing-function: cubic-bezier(0.4, 0, 1, 1);\n}\n.tina-tailwind .icon-parent svg {\n      fill: currentColor;\n    }\n\n.tina-tailwind {\n      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n      font-size: 16px;\n      line-height: 1.5;\n      --tw-text-opacity: 1;\n      color: rgb(86 81 101 / var(--tw-text-opacity));\n}\n\n.tina-tailwind .hover\\:bg-blue-600:hover {\n      --tw-bg-opacity: 1;\n      background-color: rgb(5 116 228 / var(--tw-bg-opacity));\n}\n\n.tina-tailwind .hover\\:text-blue-600:hover {\n      --tw-text-opacity: 1;\n      color: rgb(5 116 228 / var(--tw-text-opacity));\n}\n\n.tina-tailwind .hover\\:text-blue-400:hover {\n      --tw-text-opacity: 1;\n      color: rgb(34 150 254 / var(--tw-text-opacity));\n}\n\n.tina-tailwind .hover\\:opacity-100:hover {\n      opacity: 1;\n}\n\n.tina-tailwind .focus\\:text-blue-400:focus {\n      --tw-text-opacity: 1;\n      color: rgb(34 150 254 / var(--tw-text-opacity));\n}\n\n.tina-tailwind .focus\\:underline:focus {\n      text-decoration-line: underline;\n}\n\n.tina-tailwind .focus\\:shadow-outline:focus {\n      --tw-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);\n      --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);\n      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.tina-tailwind .focus\\:outline-none:focus {\n      outline: 2px solid transparent;\n      outline-offset: 2px;\n}\n\n.tina-tailwind .focus\\:ring-2:focus {\n      --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n      --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.tina-tailwind .focus\\:ring-blue-500:focus {\n      --tw-ring-opacity: 1;\n      --tw-ring-color: rgb(0 132 255 / var(--tw-ring-opacity));\n}\n';
   function useTina({
     query,
     variables,
@@ -3117,13 +3201,23 @@ mutation addPendingDocumentMutation(
           style: { color: "#eb6337" }
         }, "TinaCMS Render Error"), /* @__PURE__ */ React__default["default"].createElement("p", null, "Tina caught an error while updating the page:"), /* @__PURE__ */ React__default["default"].createElement("pre", {
           style: { marginTop: "1rem", overflowX: "auto" }
-        }, this.state.message), /* @__PURE__ */ React__default["default"].createElement("br", null), /* @__PURE__ */ React__default["default"].createElement("p", null, `If you've just updated the form, undo your most recent changes and click "refresh". If after a few refreshes, you're still encountering this error. There is a bigger issue with the site. Please reach out to your site admin.`), /* @__PURE__ */ React__default["default"].createElement("button", {
+        }, this.state.message), /* @__PURE__ */ React__default["default"].createElement("br", null), /* @__PURE__ */ React__default["default"].createElement("p", null, `If you've just updated the form, undo your most recent changes and click "refresh". If after a few refreshes, you're still encountering this error. There is a bigger issue with the site. Please reach out to your site admin.`), /* @__PURE__ */ React__default["default"].createElement("p", null, "See our", " ", /* @__PURE__ */ React__default["default"].createElement("a", {
+          className: "text-gray-600",
+          style: { textDecoration: "underline" },
+          href: "https://tina.io/docs/errors/faq/",
+          target: "_blank"
+        }, " ", "Error FAQ", " "), " ", "for more information."), /* @__PURE__ */ React__default["default"].createElement("button", {
           style: errorButtonStyles,
           onClick: () => {
             this.setState({ pageRefresh: true });
             setTimeout(() => this.setState({ hasError: false, pageRefresh: false }), 3e3);
           }
-        }, "Refresh"), hasBranchData && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("p", null, `If you're using the branch switcher, you may currently be on a "stale" branch that has been deleted or whose content is not compatible with the latest version of the site's layout. Click the button below to switch back to the default branch for this deployment.`), /* @__PURE__ */ React__default["default"].createElement("button", {
+        }, "Refresh"), hasBranchData && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("p", null, `If you're using the branch switcher, you may currently be on a "stale" branch that has been deleted or whose content is not compatible with the latest version of the site's layout. Click the button below to switch back to the default branch for this deployment.`), /* @__PURE__ */ React__default["default"].createElement("p", null, "See our", " ", /* @__PURE__ */ React__default["default"].createElement("a", {
+          className: "text-gray-600",
+          style: { textDecoration: "underline" },
+          href: "https://tina.io/docs/errors/faq/",
+          target: "_blank"
+        }, " ", "Error FAQ", " "), " ", "for more information."), /* @__PURE__ */ React__default["default"].createElement("button", {
           style: errorButtonStyles,
           onClick: () => {
             window.localStorage.removeItem("tinacms-current-branch");
@@ -3156,11 +3250,13 @@ mutation addPendingDocumentMutation(
     var _d = _c, {
       query,
       documentCreatorCallback,
-      formifyCallback
+      formifyCallback,
+      schema
     } = _d, props = __objRest(_d, [
       "query",
       "documentCreatorCallback",
-      "formifyCallback"
+      "formifyCallback",
+      "schema"
     ]);
     const validOldSetup = new Boolean(props == null ? void 0 : props.isLocalClient) || new Boolean(props == null ? void 0 : props.clientId) && new Boolean(props == null ? void 0 : props.branch);
     if (!props.apiURL && !validOldSetup) {
@@ -3177,7 +3273,8 @@ mutation addPendingDocumentMutation(
       tinaioConfig: props.tinaioConfig,
       isLocalClient,
       cmsCallback: props.cmsCallback,
-      mediaStore: props.mediaStore
+      mediaStore: props.mediaStore,
+      schema
     }, /* @__PURE__ */ React__default["default"].createElement("style", null, styles), /* @__PURE__ */ React__default["default"].createElement(ErrorBoundary, null, /* @__PURE__ */ React__default["default"].createElement(DocumentCreator, {
       documentCreatorCallback
     }), /* @__PURE__ */ React__default["default"].createElement(TinaDataProvider, {
@@ -3221,10 +3318,10 @@ mutation addPendingDocumentMutation(
     });
     const cms = toolkit.useCMS();
     const useUnstableFormify = React__default["default"].useMemo(() => {
-      if (cms == null ? void 0 : cms.flags.get("use-unstable-formify")) {
-        return true;
+      if ((cms == null ? void 0 : cms.flags.get("use-unstable-formify")) === false) {
+        return false;
       }
-      return false;
+      return true;
     }, [cms == null ? void 0 : cms.flags]);
     return /* @__PURE__ */ React__default["default"].createElement(sharedctx.TinaDataContext.Provider, {
       value: {
@@ -3542,10 +3639,10 @@ This will work when developing locally but NOT when deployed to production.
             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);
+            throw new Error(`[${error2.name}] GetCollections failed: ${error2.message}`);
           }
           setLoading(false);
         }
@@ -3610,6 +3707,9 @@ This will work when developing locally but NOT when deployed to production.
   function BiPlus(props) {
     return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z" } }] })(props);
   }
+  function BiTrash(props) {
+    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M5 20a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8h2V6h-4V4a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v2H3v2h2zM9 4h6v2H9zM8 8h9v12H7V8z" } }, { "tag": "path", "attr": { "d": "M9 10h2v8H9zm4 0h2v8h-2z" } }] })(props);
+  }
   function MdOutlineArrowBack(props) {
     return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" } }, { "tag": "path", "attr": { "d": "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" } }] })(props);
   }
@@ -3835,6 +3935,7 @@ This will work when developing locally but NOT when deployed to production.
     const [collection, setCollection] = React.useState(void 0);
     const [loading, setLoading] = React.useState(true);
     const [error, setError] = React.useState(void 0);
+    const [resetState, setResetSate] = React.useState(0);
     React.useEffect(() => {
       const fetchCollection = async () => {
         if (await api.isAuthenticated()) {
@@ -3852,8 +3953,9 @@ This will work when developing locally but NOT when deployed to production.
       };
       setLoading(true);
       fetchCollection();
-    }, [cms, collectionName]);
-    return { collection, loading, error };
+    }, [cms, collectionName, resetState]);
+    const reFetchCollection = () => setResetSate((x) => x + 1);
+    return { collection, loading, error, reFetchCollection };
   };
   const GetCollection = ({
     cms,
@@ -3861,14 +3963,14 @@ This will work when developing locally but NOT when deployed to production.
     includeDocuments = true,
     children
   }) => {
-    const { collection, loading, error } = useGetCollection(cms, collectionName, includeDocuments);
+    const { collection, loading, error, reFetchCollection } = useGetCollection(cms, collectionName, includeDocuments);
     if (error) {
       return null;
     }
     if (loading) {
       return /* @__PURE__ */ React__default["default"].createElement(LoadingPage, null);
     }
-    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children(collection, loading));
+    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children(collection, loading, reFetchCollection));
   };
   const TemplateMenu = ({ templates }) => {
     return /* @__PURE__ */ React__default["default"].createElement(react.Menu, {
@@ -3905,22 +4007,42 @@ This will work when developing locally but NOT when deployed to production.
       window.location.href = routeOverride;
       return null;
     } else {
-      navigate(document.sys.filename);
+      navigate(document.sys.breadcrumbs.join("/"));
     }
   };
   const CollectionListPage = () => {
     const navigate = reactRouterDom.useNavigate();
     const { collectionName } = reactRouterDom.useParams();
+    const [open, setOpen] = React__default["default"].useState(false);
+    const [vars, setVars] = React__default["default"].useState({
+      collection: collectionName,
+      relativePath: ""
+    });
     return /* @__PURE__ */ React__default["default"].createElement(GetCMS, null, (cms) => {
       return /* @__PURE__ */ React__default["default"].createElement(GetCollection, {
         cms,
         collectionName,
         includeDocuments: true
-      }, (collection) => {
+      }, (collection, _loading, reFetchCollection) => {
         var _a, _b;
         const totalCount = collection.documents.totalCount;
         const documents = collection.documents.edges;
-        return /* @__PURE__ */ React__default["default"].createElement(PageWrapper, null, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(PageHeader, {
+        const admin = cms.api.admin;
+        return /* @__PURE__ */ React__default["default"].createElement(PageWrapper, null, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, open && /* @__PURE__ */ React__default["default"].createElement(DeleteModal, {
+          filename: vars.relativePath,
+          deleteFunc: async () => {
+            try {
+              await admin.deleteDocument(vars);
+              cms.alerts.info("Document was successfully deleted");
+              reFetchCollection();
+            } catch (error) {
+              cms.alerts.warn("Document was not deleted, ask a developer for help or check the console for an error message");
+              console.error(error);
+              throw error;
+            }
+          },
+          close: () => setOpen(false)
+        }), /* @__PURE__ */ React__default["default"].createElement(PageHeader, {
           isLocalMode: (_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode
         }, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("h3", {
           className: "text-2xl text-gray-700"
@@ -3938,8 +4060,9 @@ This will work when developing locally but NOT when deployed to production.
         }, /* @__PURE__ */ React__default["default"].createElement("tbody", {
           className: "divide-y divide-gray-150"
         }, documents.map((document) => {
+          const subfolders = document.node.sys.breadcrumbs.slice(0, -1).join("/");
           return /* @__PURE__ */ React__default["default"].createElement("tr", {
-            key: `document-${document.node.sys.filename}`,
+            key: `document-${document.node.sys.relativePath}`,
             className: ""
           }, /* @__PURE__ */ React__default["default"].createElement("td", {
             className: "px-6 py-2 whitespace-nowrap"
@@ -3954,7 +4077,9 @@ This will work when developing locally but NOT when deployed to production.
             className: "block text-xs text-gray-400 mb-1 uppercase"
           }, "Filename"), /* @__PURE__ */ React__default["default"].createElement("span", {
             className: "h-5 leading-5 block whitespace-nowrap"
-          }, document.node.sys.filename)))), /* @__PURE__ */ React__default["default"].createElement("td", {
+          }, subfolders && /* @__PURE__ */ React__default["default"].createElement("span", {
+            className: "text-xs text-gray-400"
+          }, `${subfolders}/`), /* @__PURE__ */ React__default["default"].createElement("span", null, document.node.sys.filename))))), /* @__PURE__ */ React__default["default"].createElement("td", {
             className: "px-6 py-4 whitespace-nowrap"
           }, /* @__PURE__ */ React__default["default"].createElement("span", {
             className: "block text-xs text-gray-400 mb-1 uppercase"
@@ -3966,14 +4091,59 @@ This will work when developing locally but NOT when deployed to production.
             className: "block text-xs text-gray-400 mb-1 uppercase"
           }, "Template"), /* @__PURE__ */ React__default["default"].createElement("span", {
             className: "h-5 leading-5 block text-sm font-medium text-gray-900"
-          }, document.node.sys.template)));
+          }, document.node.sys.template)), /* @__PURE__ */ React__default["default"].createElement("td", {
+            className: "w-0"
+          }, /* @__PURE__ */ React__default["default"].createElement(toolkit.OverflowMenu, {
+            showEmbed: true,
+            toolbarItems: [
+              {
+                name: "edit",
+                label: "Edit in Admin",
+                Icon: /* @__PURE__ */ React__default["default"].createElement(BiEdit, {
+                  size: "1.3rem"
+                }),
+                onMouseDown: () => {
+                  navigate(`${document.node.sys.filename}`, { replace: true });
+                }
+              },
+              {
+                name: "delete",
+                label: "Delete",
+                Icon: /* @__PURE__ */ React__default["default"].createElement(BiTrash, {
+                  size: "1.3rem",
+                  className: "text-red-500"
+                }),
+                onMouseDown: () => {
+                  setVars({
+                    collection: collectionName,
+                    relativePath: document.node.sys.filename + document.node.sys.extension
+                  });
+                  setOpen(true);
+                }
+              }
+            ]
+          })));
         })))))));
       });
     });
   };
-  function HiChevronRight(props) {
-    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 20 20", "fill": "currentColor" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", "clipRule": "evenodd" } }] })(props);
-  }
+  const DeleteModal = ({ close: close2, deleteFunc, filename }) => {
+    return /* @__PURE__ */ React__default["default"].createElement(toolkit.Modal, null, /* @__PURE__ */ React__default["default"].createElement(toolkit.ModalPopup, null, /* @__PURE__ */ React__default["default"].createElement(toolkit.ModalHeader, {
+      close: close2
+    }, "Reset"), /* @__PURE__ */ React__default["default"].createElement(toolkit.ModalBody, {
+      padded: true
+    }, /* @__PURE__ */ React__default["default"].createElement("p", null, `Are you sure you want to delete ${filename}?`)), /* @__PURE__ */ React__default["default"].createElement(toolkit.ModalActions, null, /* @__PURE__ */ React__default["default"].createElement(toolkit.Button, {
+      style: { flexGrow: 2 },
+      onClick: close2
+    }, "Cancel"), /* @__PURE__ */ React__default["default"].createElement(toolkit.Button, {
+      style: { flexGrow: 3 },
+      variant: "danger",
+      onClick: async () => {
+        await deleteFunc();
+        close2();
+      }
+    }, "Delete"))));
+  };
   const useGetDocumentFields = (cms, collectionName, templateName) => {
     const api = new TinaAdminApi(cms);
     const [info, setInfo] = React.useState({
@@ -4040,6 +4210,9 @@ This will work when developing locally but NOT when deployed to production.
     }
     return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children({ collection, template, fields, mutationInfo, loading }));
   };
+  function HiChevronRight(props) {
+    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 20 20", "fill": "currentColor" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", "clipRule": "evenodd" } }] })(props);
+  }
   const createDocument = async (cms, collection, template, mutationInfo, values) => {
     const api = new TinaAdminApi(cms);
     const _a = values, { filename } = _a, leftover = __objRest(_a, ["filename"]);
@@ -4078,6 +4251,22 @@ This will work when developing locally but NOT when deployed to production.
     var _a, _b;
     const navigate = reactRouterDom.useNavigate();
     const [formIsPristine, setFormIsPristine] = React.useState(true);
+    const schema = cms.api.tina.schema;
+    let schemaFields = fields;
+    if (schema) {
+      const schemaCollection = schema.getCollection(collection.name);
+      const template2 = schema.getTemplateForData({
+        collection: schemaCollection,
+        data: {}
+      });
+      const formInfo = schemaTools.resolveForm({
+        collection: schemaCollection,
+        basename: schemaCollection.name,
+        schema,
+        template: template2
+      });
+      schemaFields = formInfo.fields;
+    }
     const form = React.useMemo(() => {
       return new toolkit.Form({
         id: "create-form",
@@ -4087,7 +4276,7 @@ This will work when developing locally but NOT when deployed to production.
             name: "filename",
             label: "Filename",
             component: "text",
-            description: `A unique filename for the content.  Example: My_Document`,
+            description: /* @__PURE__ */ React__default["default"].createElement("span", null, "A unique filename for the content.", /* @__PURE__ */ React__default["default"].createElement("br", null), "Examples: ", /* @__PURE__ */ React__default["default"].createElement("code", null, "My_Document"), ", ", /* @__PURE__ */ React__default["default"].createElement("code", null, "My_Document.en"), ",", " ", /* @__PURE__ */ React__default["default"].createElement("code", null, "sub-folder/My_Document")),
             placeholder: `My_Document`,
             validate: (value, allValues, meta) => {
               if (!value) {
@@ -4096,13 +4285,13 @@ This will work when developing locally but NOT when deployed to production.
                 }
                 return true;
               }
-              const isValid = /^[_a-zA-Z][.,-,_a-zA-Z0-9]*$/.test(value);
+              const isValid = /^[_a-zA-Z][\.\-_\/a-zA-Z0-9]*$/.test(value);
               if (value && !isValid) {
-                return "Must begin with a-z, A-Z, or _ and contain only a-z, A-Z, 0-9, -, ., or _";
+                return "Must begin with a-z, A-Z, or _ and contain only a-z, A-Z, 0-9, -, _, ., or /.";
               }
             }
           },
-          ...fields
+          ...schemaFields
         ],
         onSubmit: async (values) => {
           try {
@@ -4110,8 +4299,8 @@ This will work when developing locally but NOT when deployed to production.
             cms.alerts.success("Document created!");
             navigate(`/collections/${collection.name}`);
           } catch (error) {
-            cms.alerts.error(`[${error.name}] CreateDocument failed: ${error.message}`, 30 * 1e3);
             console.error(error);
+            throw new Error(`[${error.name}] CreateDocument failed: ${error.message}`);
           }
         }
       });
@@ -4195,7 +4384,8 @@ This will work when developing locally but NOT when deployed to production.
     }
   };
   const CollectionUpdatePage = () => {
-    const { collectionName, filename } = reactRouterDom.useParams();
+    const _a = reactRouterDom.useParams(), { collectionName } = _a, rest = __objRest(_a, ["collectionName"]);
+    const { "*": filename } = rest;
     return /* @__PURE__ */ React__default["default"].createElement(GetCMS, null, (cms) => /* @__PURE__ */ React__default["default"].createElement(GetDocumentFields, {
       cms,
       collectionName
@@ -4224,21 +4414,36 @@ This will work when developing locally but NOT when deployed to production.
     mutationInfo
   }) => {
     var _a, _b;
-    reactRouterDom.useNavigate();
     const [formIsPristine, setFormIsPristine] = React.useState(true);
+    const schema = cms.api.tina.schema;
+    let schemaFields = document.form.fields;
+    if (schema) {
+      const schemaCollection = schema.getCollection(collection.name);
+      const template = schema.getTemplateForData({
+        collection: schemaCollection,
+        data: document.value
+      });
+      const formInfo = schemaTools.resolveForm({
+        collection: schemaCollection,
+        basename: schemaCollection.name,
+        schema,
+        template
+      });
+      schemaFields = formInfo.fields;
+    }
     const form = React.useMemo(() => {
       return new toolkit.Form({
         id: "update-form",
         label: "form",
-        fields: document.form.fields,
+        fields: schemaFields,
         initialValues: document.values,
         onSubmit: async (values) => {
           try {
             await updateDocument(cms, relativePath, collection, mutationInfo, values);
             cms.alerts.success("Document updated!");
           } catch (error) {
-            cms.alerts.error(`[${error.name}] UpdateDocument failed: ${error.message}`, 30 * 1e3);
             console.error(error);
+            throw new Error(`[${error.name}] UpdateDocument failed: ${error.message}`);
           }
         }
       });
@@ -4314,7 +4519,7 @@ This will work when developing locally but NOT when deployed to production.
           path: "collections/:collectionName/:templateName/new",
           element: /* @__PURE__ */ React__default["default"].createElement(CollectionCreatePage, null)
         }), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
-          path: "collections/:collectionName/:filename",
+          path: "collections/:collectionName/*",
           element: /* @__PURE__ */ React__default["default"].createElement(CollectionUpdatePage, null)
         }), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
           path: "collections/:collectionName",
@@ -4345,6 +4550,7 @@ This will work when developing locally but NOT when deployed to production.
     }
   }
   const defineSchema = (config) => {
+    schemaTools.validateSchema({ config });
     return config;
   };
   const defineConfig = (config) => {