tinacms 0.66.9 → 0.67.1

package/dist/index.es.js

@@ -29,15 +29,16 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { useCMS, useBranchData, FormMetaPlugin, Form, GlobalFormPlugin, EventBus, Modal, ModalPopup, ModalHeader, ModalBody, ModalActions, Button, LoadingDots, useLocalStorage, TinaCMS, BranchSwitcherPlugin, BranchDataProvider, TinaProvider, Nav, LocalWarning, FormStatus, FormBuilder } from "@tinacms/toolkit";
+import { useCMS, useBranchData, FormMetaPlugin, Form, GlobalFormPlugin, EventBus, Modal, ModalPopup, ModalHeader, ModalBody, ModalActions, Button, LoadingDots, useLocalStorage, TinaCMS, BranchSwitcherPlugin, BranchDataProvider, TinaProvider, Nav, LocalWarning, OverflowMenu, FormStatus, FormBuilder } from "@tinacms/toolkit";
 export * from "@tinacms/toolkit";
 import * as G from "graphql";
-import { TypeInfo, visit, visitWithTypeInfo, getNamedType, GraphQLObjectType, isLeafType, GraphQLUnionType, isScalarType, getIntrospectionQuery, buildClientSchema, print, parse } from "graphql";
+import { TypeInfo, visit, visitWithTypeInfo, getNamedType, GraphQLObjectType, isLeafType, GraphQLUnionType, isScalarType as isScalarType$1, getIntrospectionQuery, buildClientSchema, print, parse } from "graphql";
 import set from "lodash.set";
 import React, { useState, useCallback, useEffect, Fragment, useMemo } from "react";
 import { getIn, setIn } from "final-form";
-import * as yup from "yup";
+import { resolveForm, TinaSchema, addNamespaceToSchema, validateSchema } from "@tinacms/schema-tools";
 import gql$1 from "graphql-tag";
+import * as yup from "yup";
 import styled from "styled-components";
 import { setEditing, TinaDataContext, useEditState } from "@tinacms/sharedctx";
 import UrlPattern from "url-pattern";
@@ -287,7 +288,7 @@ const buildSelectionsFields = (fields, callback) => {
     const result = callback(fields);
     if (!result.continue) {
       if (fields.every((field) => {
-        return !isScalarType(getNamedType(field.type));
+        return !isScalarType$1(getNamedType(field.type));
       })) {
         return [
           {
@@ -300,7 +301,7 @@ const buildSelectionsFields = (fields, callback) => {
         ];
       }
       return buildSelectionsFields(result.filteredFields.filter((field) => {
-        if (isScalarType(getNamedType(field.type))) {
+        if (isScalarType$1(getNamedType(field.type))) {
           return true;
         }
         return false;
@@ -380,13 +381,15 @@ const createClient = ({
   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) {
@@ -414,9 +417,6 @@ function useGraphqlFormsUnstable({
   eventList
 }) {
   const cms = useCMS();
-  React.useEffect(() => {
-    console.log("NOTE: using unstable formify");
-  }, []);
   const state = useFormify({
     query,
     cms,
@@ -492,11 +492,12 @@ function useGraphqlForms({
       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 FormMetaPlugin({ name: "tina-admin-link" }));
       setData(payload);
@@ -515,11 +516,10 @@ function useGraphqlForms({
           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);
           },
@@ -551,6 +551,29 @@ function useGraphqlForms({
             }
           }
         };
+        if (cms.api.tina.schema) {
+          const enrichedSchema = cms.api.tina.schema;
+          const collection = enrichedSchema.getCollection(result._internalSys.collection.name);
+          const template = enrichedSchema.getTemplateForData({
+            collection,
+            data: result.values
+          });
+          const formInfo = resolveForm({
+            collection,
+            basename: collection.name,
+            schema: enrichedSchema,
+            template
+          });
+          formConfig = __spreadValues({
+            label: formInfo.label,
+            fields: formInfo.fields
+          }, formCommon);
+        } else {
+          formConfig = __spreadValues({
+            label: result.form.label,
+            fields: result.form.fields
+          }, formCommon);
+        }
         const { createForm, createGlobalForm } = generateFormCreators(cms);
         const SKIPPED = "SKIPPED";
         let form;
@@ -623,10 +646,8 @@ function useGraphqlForms({
         }, { 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) => {
@@ -722,100 +743,7 @@ const generateFormCreatorsUnstable = (cms, showInSidebar) => {
   };
   return { createForm, createGlobalForm };
 };
-const isNodeField = (type) => {
-  if (G.isUnionType(type)) {
-    return type.getTypes().every((type2) => {
-      return type2.getInterfaces().find((intfc) => intfc.name === "Node");
-    });
-  } else if (G.isObjectType(type)) {
-    return !!type.getInterfaces().find((intfc) => intfc.name === "Node");
-  } else if (G.isInterfaceType(type)) {
-    if (type.name === "Node") {
-      return true;
-    }
-  } else {
-    return false;
-  }
-};
-const isConnectionField = (type) => {
-  if (G.isObjectType(type)) {
-    return !!type.getInterfaces().find((intfc) => intfc.name === "Connection");
-  } else {
-    throw new Error(`Expected GraphQLObjectType for isConnectionField check`);
-  }
-};
-const getObjectField = (object, selectionNode) => {
-  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.isListType(type)) {
-    return true;
-  } else if (G.isNonNullType(type)) {
-    if (G.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.isUnionType(type)) {
-    throw new Error(`Expected type to be GraphQLUnionType`);
-  }
-}
-function ensureObjectType(type) {
-  if (!G.isObjectType(type)) {
-    console.log(type);
-    throw new Error(`Expected type to be GraphQLObjectType`);
-  }
-}
-function ensureOperationDefinition(type) {
-  if (type.kind !== "OperationDefinition") {
-    throw new Error(`Expected top-level definition to be an OperationDefinition node, ensure your query has been optimized before calling formify`);
-  }
-}
-function 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.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) => {
@@ -825,7 +753,7 @@ const getIn2 = (state, path) => {
         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 {
@@ -892,9 +820,8 @@ const buildForm = (doc, cms, formify2, showInSidebar = false, onSubmit) => {
   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) => {
@@ -924,7 +851,31 @@ const buildForm = (doc, cms, formify2, showInSidebar = false, onSubmit) => {
         cms.alerts.error("There was a problem saving your document");
       }
     }
-  });
+  };
+  let formConfig = {};
+  if (cms.api.tina.schema) {
+    const enrichedSchema = cms.api.tina.schema;
+    const collection = enrichedSchema.getCollection(doc._internalSys.collection.name);
+    const template = enrichedSchema.getTemplateForData({
+      collection,
+      data: doc.values
+    });
+    const formInfo = resolveForm({
+      collection,
+      basename: collection.name,
+      schema: enrichedSchema,
+      template
+    });
+    formConfig = __spreadValues({
+      label: formInfo.label,
+      fields: formInfo.fields
+    }, formCommon);
+  } else {
+    formConfig = __spreadValues({
+      label: doc.form.label,
+      fields: doc.form.fields
+    }, formCommon);
+  }
   if (formify2) {
     form = formify2({
       formConfig,
@@ -970,19 +921,6 @@ const sequential = async (items, callback) => {
   }
   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);
@@ -998,44 +936,6 @@ const getFormNodesForField = (fieldBlueprint, formNode, event, state) => {
   const existing = 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 = [];
@@ -1051,22 +951,56 @@ const getBlueprintAliasPath = (blueprint) => {
 };
 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 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) => {
+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(".");
@@ -1088,20 +1022,21 @@ const replaceRealNum = (string) => {
     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 {
@@ -1170,17 +1105,43 @@ const getMoveMapping = (existing, from, to) => {
   }
   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;
@@ -1191,6 +1152,133 @@ const getSubFields = (changeSet) => {
   }
   return { fields, __typename };
 };
+const isFormifiableDocument = (t) => {
+  const type = G.getNamedType(t);
+  if (G.isUnionType(type)) {
+    return type.getTypes().every((type2) => {
+      return type2.getInterfaces().find((intfc) => intfc.name === "Node");
+    });
+  } else if (G.isObjectType(type)) {
+    return !!type.getInterfaces().find((intfc) => intfc.name === "Node");
+  } else {
+    return false;
+  }
+};
+const isScalarType = (t) => {
+  const namedType = G.getNamedType(t);
+  return G.isScalarType(namedType);
+};
+const isConnectionField = (t) => {
+  const type = G.getNamedType(t);
+  if (G.isObjectType(type)) {
+    return !!type.getInterfaces().find((intfc) => intfc.name === "Connection");
+  } else {
+    throw new Error(`Expected GraphQLObjectType for isConnectionField check`);
+  }
+};
+const getObjectField = (object, selectionNode) => {
+  const namedType = G.getNamedType(object);
+  ensureObjectOrInterfaceType(namedType);
+  return namedType.getFields()[selectionNode.name.value];
+};
+const getSelectedUnionType = (unionType, selectionNode) => {
+  const namedType = G.getNamedType(unionType);
+  if (!G.isUnionType(namedType)) {
+    return;
+  }
+  const types = namedType.getTypes();
+  const typeCondition = selectionNode.typeCondition.name.value;
+  let intfc;
+  types.forEach((type) => {
+    intfc = type.getInterfaces().find((intfc2) => intfc2.name === typeCondition);
+  });
+  if (intfc) {
+    return intfc;
+  }
+  return namedType.getTypes().find((type) => type.name === typeCondition);
+};
+function isListType(type) {
+  if (G.isListType(type)) {
+    return true;
+  } else if (G.isNonNullType(type)) {
+    if (G.isListType(type.ofType)) {
+      return true;
+    }
+  }
+  return false;
+}
+function ensureObjectOrInterfaceType(type) {
+  if (G.isInterfaceType(type) || G.isObjectType(type))
+    ;
+  else {
+    console.log("Expected type to be GraphQLObjectType or GraphQLInterfaceType", type);
+    throw new Error(`Expected type to be GraphQLObjectType or GraphQLInterfaceType`);
+  }
+}
+function ensureOperationDefinition(type) {
+  if (type.kind !== "OperationDefinition") {
+    throw new Error(`Expected top-level definition to be an OperationDefinition node, ensure your query has been optimized before calling formify`);
+  }
+}
+function buildPath({
+  fieldNode,
+  type,
+  parentTypename,
+  path
+}) {
+  const p = path || [];
+  const list = isListType(type);
+  const isNode = isFormifiableDocument(type);
+  return [
+    ...p,
+    {
+      name: fieldNode.name.value,
+      alias: fieldNode.alias ? fieldNode.alias.value : fieldNode.name.value,
+      parentTypename,
+      list: !!list,
+      isNode: !!isNode
+    }
+  ];
+}
+const node = G.parse(`
+ query Sample {
+   _internalSys: sys {
+     path
+     collection {
+       name
+     }
+   }
+   form
+   values
+ }`);
+const metaFields = node.definitions[0].selectionSet.selections;
+const getRelativeBlueprint = (path) => {
+  let indexOfLastNode = 0;
+  path.forEach((item, i) => {
+    if (item.isNode) {
+      if (i === path.length - 1)
+        ;
+      else {
+        indexOfLastNode = i;
+      }
+    }
+  });
+  const documentBlueprintPath = path.slice(0, indexOfLastNode + 1);
+  return getBlueprintNamePath({ path: documentBlueprintPath });
+};
+const getBlueprintId = (path) => {
+  const namePath = [];
+  const aliasPath = [];
+  path.forEach((p) => {
+    namePath.push(p.name);
+    aliasPath.push(p.alias);
+    if (p.list) {
+      namePath.push("[]");
+      aliasPath.push("[]");
+    }
+  });
+  return namePath.join(".");
+};
 const NOOP = "This is either an error or is not yet supported";
 const UNEXPECTED = "Formify encountered an unexpected error, please contact support";
 const EDGES_NODE_NAME = "edges";
@@ -1223,11 +1311,10 @@ const formify = async ({
   const optimizedQuery = await getOptimizedQuery(documentNodeWithName);
   const typeInfo = new G.TypeInfo(schema);
   const formifyConnection = ({
-    namedFieldType,
+    parentType,
     selectionNode,
     path
   }) => {
-    ensureObjectType(namedFieldType);
     return __spreadProps(__spreadValues({}, selectionNode), {
       selectionSet: {
         kind: "SelectionSet",
@@ -1235,13 +1322,12 @@ const formify = async ({
           switch (selectionNode2.kind) {
             case "Field":
               if (selectionNode2.name.value === EDGES_NODE_NAME) {
-                const edgeField = namedFieldType.getFields()[EDGES_NODE_NAME];
-                const edgeType = G.getNamedType(edgeField.type);
-                ensureObjectType(edgeType);
-                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",
@@ -1249,15 +1335,15 @@ const formify = async ({
                       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 {
@@ -1278,28 +1364,48 @@ const formify = async ({
       }
     });
   };
-  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.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;
         }
       }
@@ -1308,7 +1414,7 @@ const formify = async ({
       blueprints.push({
         id: getBlueprintId(path),
         path,
-        selection: fieldOrInlineFragmentNode,
+        selection,
         fields: [],
         showInSidebar,
         hasDataJSONField,
@@ -1316,71 +1422,58 @@ const formify = async ({
       });
       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.getNamedType(type);
                 if (G.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.isObjectType(namedType)) {
-                    const field = getObjectField(namedType, selectionNode);
-                    const namedSubType = G.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.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");
             }
@@ -1389,32 +1482,35 @@ const formify = async ({
         ]
       }
     });
-    return formifiedNode;
   }
-  const formifyField = ({
+  const formifyFieldNode = ({
     fieldNode,
     parentType,
     path
   }) => {
-    const namedParentType = G.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.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.isScalarType(namedType)) {
+    if (!blueprint) {
+      return fieldNode;
+    }
+    const fieldPath = buildPath({
+      fieldNode,
+      type: field.type,
+      parentTypename: G.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), {
@@ -1423,121 +1519,20 @@ const formify = async ({
         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.isScalarType(G.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.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.getNamedType(subType1);
-                          return formifyField({
-                            fieldNode: subSelectionNode,
-                            parentType: subFieldType,
-                            path: [
-                              ...path,
-                              getNameAndAlias(subSelectionNode, isListType(subType1), isNodeField(namedSubType2))
-                            ]
-                          });
-                        case "InlineFragment":
-                          const subNamedType = G.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.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.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}`);
             }
@@ -1546,43 +1541,77 @@ const formify = async ({
       }
     });
   };
+  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.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.getNamedType(parentType);
-                ensureObjectType(namedParentType);
-                const field = getObjectField(namedParentType, selectionNode);
-                const namedFieldType = G.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",
@@ -1590,16 +1619,15 @@ const formify = async ({
                         switch (subSelectionNode.kind) {
                           case "Field":
                             if (subSelectionNode.name.value === COLLECTIONS_DOCUMENTS_NAME) {
-                              ensureObjectType(namedFieldType);
-                              const n = namedFieldType.getFields()[COLLECTIONS_DOCUMENTS_NAME];
-                              const docType = G.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;
@@ -1639,9 +1667,27 @@ class FormifyError extends Error {
     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.parse(action.value.query) : null,
+        queryString: action.value.query,
+        status: "initialized"
+      });
     case "addDocumentBlueprints":
       return __spreadProps(__spreadValues({}, state), {
         status: "formified",
@@ -1696,16 +1742,21 @@ function reducer(state, action) {
         }
         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,
@@ -1716,8 +1767,15 @@ function reducer(state, action) {
                 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);
               }
             });
@@ -1870,7 +1928,7 @@ const useFormify = ({
 }) => {
   const formIds = React.useRef([]);
   const [state, dispatch] = React.useReducer(reducer, {
-    status: "initialized",
+    status: "idle",
     schema: void 0,
     query: query ? G.parse(query) : null,
     queryString: query,
@@ -1881,6 +1939,17 @@ const useFormify = ({
     formNodes: [],
     documentForms: []
   });
+  React.useEffect(() => {
+    if (query) {
+      dispatch({ type: "start", value: { query } });
+      formIds.current.forEach((formId) => {
+        const form = cms.forms.find(formId);
+        if (form) {
+          cms.plugins.remove(form);
+        }
+      });
+    }
+  }, [query, JSON.stringify(variables)]);
   React.useEffect(() => {
     if (state.status === "initialized") {
       cms.api.tina.request(query, { variables }).then((res) => {
@@ -1912,7 +1981,7 @@ const useFormify = ({
         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)) {
@@ -1961,6 +2030,9 @@ const useFormify = ({
   React.useEffect(() => {
     if (state.status === "ready") {
       cms.events.subscribe(`forms:reset`, (event) => {
+        if (eventList) {
+          eventList.push(printEvent(event));
+        }
         dispatch({ type: "formOnReset", value: { event } });
       });
       cms.events.subscribe(`forms:fields:onChange`, async (event) => {
@@ -1982,6 +2054,9 @@ const useFormify = ({
                           values
                           _internalSys: sys {
                             path
+                            collection {
+                              name
+                            }
                           }
                         }
                       }
@@ -2012,7 +2087,8 @@ const useFormify = ({
         const form = cms.forms.find(changeSet.formId);
         resolveSubFields({
           formNode: changeSet.formNode,
-          form
+          form,
+          loc: []
         }).then((res) => {
           dispatch({
             type: "setIn",
@@ -2121,22 +2197,15 @@ const useFormify = ({
     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) {
@@ -2150,18 +2219,17 @@ const useFormify = ({
                 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");
@@ -2177,18 +2245,14 @@ const useFormify = ({
                 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 {
@@ -2198,13 +2262,12 @@ const useFormify = ({
                   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;
               });
             }
@@ -2225,6 +2288,9 @@ const useFormify = ({
                             values
                             _internalSys: sys {
                               path
+                              collection {
+                                name
+                              }
                             }
                           }
                         }
@@ -2259,12 +2325,13 @@ const useFormify = ({
                       }
                     }
                   `, { 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:
@@ -2332,13 +2399,13 @@ mutation addPendingDocumentMutation(
       return result;
     };
     this.getSchema = async () => {
-      if (!this.schema) {
+      if (!this.gqlSchema) {
         const data = await this.request(getIntrospectionQuery(), {
           variables: {}
         });
-        this.schema = buildClientSchema(data);
+        this.gqlSchema = buildClientSchema(data);
       }
-      return this.schema;
+      return this.gqlSchema;
     };
     this.getOptimizedQuery = async (documentNode) => {
       const data = await this.request(`query GetOptimizedQuery($queryString: String!) {
@@ -2348,6 +2415,13 @@ mutation addPendingDocumentMutation(
       });
       return parse(data.getOptimizedQuery);
     };
+    if (options.schema) {
+      const enrichedSchema = new TinaSchema(__spreadValues({
+        version: { fullVersion: "", major: "", minor: "", patch: "" },
+        meta: { flags: [] }
+      }, addNamespaceToSchema(options.schema, [])));
+      this.schema = enrichedSchema;
+    }
     this.options = options;
     this.setBranch(options.branch);
     this.events.subscribe("branch:change", ({ branchName }) => {
@@ -2557,11 +2631,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() {
@@ -2632,6 +2706,17 @@ class TinaAdminApi {
       }`, { 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!){
@@ -2856,6 +2941,7 @@ const TinaCloudProvider = (props) => {
   }))));
 };
 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";
@@ -3018,7 +3104,6 @@ const useDocumentCreatorPlugin = (args) => {
     };
   }, [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,
@@ -3097,13 +3182,23 @@ class ErrorBoundary extends React.Component {
         style: { color: "#eb6337" }
       }, "TinaCMS Render Error"), /* @__PURE__ */ React.createElement("p", null, "Tina caught an error while updating the page:"), /* @__PURE__ */ React.createElement("pre", {
         style: { marginTop: "1rem", overflowX: "auto" }
-      }, this.state.message), /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.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.createElement("button", {
+      }, this.state.message), /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.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.createElement("p", null, "See our", " ", /* @__PURE__ */ React.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.createElement("button", {
         style: errorButtonStyles,
         onClick: () => {
           this.setState({ pageRefresh: true });
           setTimeout(() => this.setState({ hasError: false, pageRefresh: false }), 3e3);
         }
-      }, "Refresh"), hasBranchData && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.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.createElement("button", {
+      }, "Refresh"), hasBranchData && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.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.createElement("p", null, "See our", " ", /* @__PURE__ */ React.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.createElement("button", {
         style: errorButtonStyles,
         onClick: () => {
           window.localStorage.removeItem("tinacms-current-branch");
@@ -3136,11 +3231,13 @@ const TinaCMSProvider2 = (_c) => {
   var _d = _c, {
     query,
     documentCreatorCallback,
-    formifyCallback
+    formifyCallback,
+    schema
   } = _d, props = __objRest(_d, [
     "query",
     "documentCreatorCallback",
-    "formifyCallback"
+    "formifyCallback",
+    "schema"
   ]);
   const validOldSetup = new Boolean(props == null ? void 0 : props.isLocalClient) || new Boolean(props == null ? void 0 : props.clientId) && new Boolean(props == null ? void 0 : props.branch);
   if (!props.apiURL && !validOldSetup) {
@@ -3157,7 +3254,8 @@ const TinaCMSProvider2 = (_c) => {
     tinaioConfig: props.tinaioConfig,
     isLocalClient,
     cmsCallback: props.cmsCallback,
-    mediaStore: props.mediaStore
+    mediaStore: props.mediaStore,
+    schema
   }, /* @__PURE__ */ React.createElement("style", null, styles), /* @__PURE__ */ React.createElement(ErrorBoundary, null, /* @__PURE__ */ React.createElement(DocumentCreator, {
     documentCreatorCallback
   }), /* @__PURE__ */ React.createElement(TinaDataProvider, {
@@ -3201,10 +3299,10 @@ const TinaDataProvider = ({
   });
   const cms = useCMS();
   const useUnstableFormify = React.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.createElement(TinaDataContext.Provider, {
     value: {
@@ -3522,10 +3620,10 @@ const useGetCollections = (cms) => {
           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);
       }
@@ -3590,6 +3688,9 @@ function BiLogOut(props) {
 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);
 }
@@ -3815,6 +3916,7 @@ const useGetCollection = (cms, collectionName, includeDocuments = true) => {
   const [collection, setCollection] = useState(void 0);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(void 0);
+  const [resetState, setResetSate] = useState(0);
   useEffect(() => {
     const fetchCollection = async () => {
       if (await api.isAuthenticated()) {
@@ -3832,8 +3934,9 @@ const useGetCollection = (cms, collectionName, includeDocuments = true) => {
     };
     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,
@@ -3841,14 +3944,14 @@ const GetCollection = ({
   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.createElement(LoadingPage, null);
   }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, children(collection, loading));
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, children(collection, loading, reFetchCollection));
 };
 const TemplateMenu = ({ templates }) => {
   return /* @__PURE__ */ React.createElement(Menu, {
@@ -3885,22 +3988,42 @@ const handleNavigate = (navigate, cms, collection, document) => {
     window.location.href = routeOverride;
     return null;
   } else {
-    navigate(document.sys.filename);
+    navigate(document.sys.breadcrumbs.join("/"));
   }
 };
 const CollectionListPage = () => {
   const navigate = useNavigate();
   const { collectionName } = useParams();
+  const [open, setOpen] = React.useState(false);
+  const [vars, setVars] = React.useState({
+    collection: collectionName,
+    relativePath: ""
+  });
   return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => {
     return /* @__PURE__ */ React.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.createElement(PageWrapper, null, /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(PageHeader, {
+      const admin = cms.api.admin;
+      return /* @__PURE__ */ React.createElement(PageWrapper, null, /* @__PURE__ */ React.createElement(React.Fragment, null, open && /* @__PURE__ */ React.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.createElement(PageHeader, {
         isLocalMode: (_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode
       }, /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h3", {
         className: "text-2xl text-gray-700"
@@ -3918,8 +4041,9 @@ const CollectionListPage = () => {
       }, /* @__PURE__ */ React.createElement("tbody", {
         className: "divide-y divide-gray-150"
       }, documents.map((document) => {
+        const subfolders = document.node.sys.breadcrumbs.slice(0, -1).join("/");
         return /* @__PURE__ */ React.createElement("tr", {
-          key: `document-${document.node.sys.filename}`,
+          key: `document-${document.node.sys.relativePath}`,
           className: ""
         }, /* @__PURE__ */ React.createElement("td", {
           className: "px-6 py-2 whitespace-nowrap"
@@ -3934,7 +4058,9 @@ const CollectionListPage = () => {
           className: "block text-xs text-gray-400 mb-1 uppercase"
         }, "Filename"), /* @__PURE__ */ React.createElement("span", {
           className: "h-5 leading-5 block whitespace-nowrap"
-        }, document.node.sys.filename)))), /* @__PURE__ */ React.createElement("td", {
+        }, subfolders && /* @__PURE__ */ React.createElement("span", {
+          className: "text-xs text-gray-400"
+        }, `${subfolders}/`), /* @__PURE__ */ React.createElement("span", null, document.node.sys.filename))))), /* @__PURE__ */ React.createElement("td", {
           className: "px-6 py-4 whitespace-nowrap"
         }, /* @__PURE__ */ React.createElement("span", {
           className: "block text-xs text-gray-400 mb-1 uppercase"
@@ -3946,14 +4072,59 @@ const CollectionListPage = () => {
           className: "block text-xs text-gray-400 mb-1 uppercase"
         }, "Template"), /* @__PURE__ */ React.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.createElement("td", {
+          className: "w-0"
+        }, /* @__PURE__ */ React.createElement(OverflowMenu, {
+          showEmbed: true,
+          toolbarItems: [
+            {
+              name: "edit",
+              label: "Edit in Admin",
+              Icon: /* @__PURE__ */ React.createElement(BiEdit, {
+                size: "1.3rem"
+              }),
+              onMouseDown: () => {
+                navigate(`${document.node.sys.filename}`, { replace: true });
+              }
+            },
+            {
+              name: "delete",
+              label: "Delete",
+              Icon: /* @__PURE__ */ React.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.createElement(Modal, null, /* @__PURE__ */ React.createElement(ModalPopup, null, /* @__PURE__ */ React.createElement(ModalHeader, {
+    close: close2
+  }, "Reset"), /* @__PURE__ */ React.createElement(ModalBody, {
+    padded: true
+  }, /* @__PURE__ */ React.createElement("p", null, `Are you sure you want to delete ${filename}?`)), /* @__PURE__ */ React.createElement(ModalActions, null, /* @__PURE__ */ React.createElement(Button, {
+    style: { flexGrow: 2 },
+    onClick: close2
+  }, "Cancel"), /* @__PURE__ */ React.createElement(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] = useState({
@@ -4020,6 +4191,9 @@ const GetDocumentFields = ({
   }
   return /* @__PURE__ */ React.createElement(React.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"]);
@@ -4058,6 +4232,22 @@ const RenderForm$1 = ({ cms, collection, template, fields, mutationInfo }) => {
   var _a, _b;
   const navigate = useNavigate();
   const [formIsPristine, setFormIsPristine] = useState(true);
+  const schema = cms.api.tina.schema;
+  let schemaFields = fields;
+  if (schema) {
+    const schemaCollection = schema.getCollection(collection.name);
+    const template2 = schema.getTemplateForData({
+      collection: schemaCollection,
+      data: {}
+    });
+    const formInfo = resolveForm({
+      collection: schemaCollection,
+      basename: schemaCollection.name,
+      schema,
+      template: template2
+    });
+    schemaFields = formInfo.fields;
+  }
   const form = useMemo(() => {
     return new Form({
       id: "create-form",
@@ -4067,7 +4257,7 @@ const RenderForm$1 = ({ cms, collection, template, fields, mutationInfo }) => {
           name: "filename",
           label: "Filename",
           component: "text",
-          description: `A unique filename for the content.  Example: My_Document`,
+          description: /* @__PURE__ */ React.createElement("span", null, "A unique filename for the content.", /* @__PURE__ */ React.createElement("br", null), "Examples: ", /* @__PURE__ */ React.createElement("code", null, "My_Document"), ", ", /* @__PURE__ */ React.createElement("code", null, "My_Document.en"), ",", " ", /* @__PURE__ */ React.createElement("code", null, "sub-folder/My_Document")),
           placeholder: `My_Document`,
           validate: (value, allValues, meta) => {
             if (!value) {
@@ -4076,13 +4266,13 @@ const RenderForm$1 = ({ cms, collection, template, fields, mutationInfo }) => {
               }
               return true;
             }
-            const isValid = /^[_a-zA-Z][.,-,_a-zA-Z0-9]*$/.test(value);
+            const isValid = /^[_a-zA-Z][\.\-_\/a-zA-Z0-9]*$/.test(value);
             if (value && !isValid) {
-              return "Must begin with a-z, A-Z, or _ and contain only a-z, A-Z, 0-9, -, ., or _";
+              return "Must begin with a-z, A-Z, or _ and contain only a-z, A-Z, 0-9, -, _, ., or /.";
             }
           }
         },
-        ...fields
+        ...schemaFields
       ],
       onSubmit: async (values) => {
         try {
@@ -4090,8 +4280,8 @@ const RenderForm$1 = ({ cms, collection, template, fields, mutationInfo }) => {
           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}`);
         }
       }
     });
@@ -4175,7 +4365,8 @@ const updateDocument = async (cms, relativePath, collection, mutationInfo, value
   }
 };
 const CollectionUpdatePage = () => {
-  const { collectionName, filename } = useParams();
+  const _a = useParams(), { collectionName } = _a, rest = __objRest(_a, ["collectionName"]);
+  const { "*": filename } = rest;
   return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => /* @__PURE__ */ React.createElement(GetDocumentFields, {
     cms,
     collectionName
@@ -4204,21 +4395,36 @@ const RenderForm = ({
   mutationInfo
 }) => {
   var _a, _b;
-  useNavigate();
   const [formIsPristine, setFormIsPristine] = useState(true);
+  const schema = cms.api.tina.schema;
+  let schemaFields = document.form.fields;
+  if (schema) {
+    const schemaCollection = schema.getCollection(collection.name);
+    const template = schema.getTemplateForData({
+      collection: schemaCollection,
+      data: document.value
+    });
+    const formInfo = resolveForm({
+      collection: schemaCollection,
+      basename: schemaCollection.name,
+      schema,
+      template
+    });
+    schemaFields = formInfo.fields;
+  }
   const form = useMemo(() => {
     return new Form({
       id: "update-form",
       label: "form",
-      fields: document.form.fields,
+      fields: schemaFields,
       initialValues: document.values,
       onSubmit: async (values) => {
         try {
           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}`);
         }
       }
     });
@@ -4294,7 +4500,7 @@ const TinaAdmin = () => {
         path: "collections/:collectionName/:templateName/new",
         element: /* @__PURE__ */ React.createElement(CollectionCreatePage, null)
       }), /* @__PURE__ */ React.createElement(Route, {
-        path: "collections/:collectionName/:filename",
+        path: "collections/:collectionName/*",
         element: /* @__PURE__ */ React.createElement(CollectionUpdatePage, null)
       }), /* @__PURE__ */ React.createElement(Route, {
         path: "collections/:collectionName",
@@ -4325,6 +4531,7 @@ class RouteMappingPlugin {
   }
 }
 const defineSchema = (config) => {
+  validateSchema({ config });
   return config;
 };
 const defineConfig = (config) => {