tinacms 0.69.13 → 0.69.15

package/dist/index.d.ts

@@ -26,12 +26,12 @@ export type { TinaCMSProviderDefaultProps };
 export default TinaCMSProvider2;
 import { TinaCMS } from '@tinacms/toolkit';
 import { formifyCallback } from './hooks/use-graphql-forms';
-import type { TinaCloudSchema as TinaCloudSchemaBase, TinaCloudCollection as TinaCloudCollectionBase, TinaCloudTemplateBase as TinaTemplate, TinaFieldBase, TinaCMSConfig } from '@tinacms/schema-tools';
+import type { TinaCloudSchema as TinaCloudSchemaBase, TinaCloudCollection as TinaCloudCollectionBase, TinaCloudTemplateBase, TinaTemplate, TinaFieldBase, TinaCMSConfig } from '@tinacms/schema-tools';
 export declare type TinaCloudSchema = TinaCloudSchemaBase<false>;
 export declare type TinaCloudCollection = TinaCloudCollectionBase<false>;
 export declare type TinaCollection = TinaCloudCollectionBase<false>;
 export declare type TinaField = TinaFieldBase;
-export type { TinaTemplate };
+export type { TinaTemplate, TinaCloudTemplateBase };
 export declare const defineSchema: (config: TinaCloudSchema) => TinaCloudSchema;
 export declare const defineConfig: (config: Omit<TinaCMSProviderDefaultProps, 'children'>) => Omit<TinaCMSProviderDefaultProps, "children">;
 export declare const defineStaticConfig: (config: TinaCMSConfig<(cms: TinaCMS) => TinaCMS, formifyCallback, import("./hooks/use-content-creator").DocumentCreatorArgs, undefined>) => TinaCMSConfig<(cms: TinaCMS) => TinaCMS, formifyCallback, import("./hooks/use-content-creator").DocumentCreatorArgs, undefined>;

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { useCMS, Form, GlobalFormPlugin, EventBus, Modal, ModalPopup, ModalHeader, ModalBody, ModalActions, Button, LoadingDots, useLocalStorage, TinaCMS, BranchSwitcherPlugin, BranchDataProvider, TinaProvider, TinaMediaStore, DummyMediaStore, Nav, LocalWarning, Select, OverflowMenu, CursorPaginator, PopupModal, FormStatus, FormBuilder } from "@tinacms/toolkit";
+import { useCMS, Form, GlobalFormPlugin, EventBus, Modal, ModalPopup, ModalHeader, ModalBody, ModalActions, Button, LoadingDots, useLocalStorage, TinaCMS, BranchSwitcherPlugin, BranchDataProvider, TinaProvider, TinaMediaStore, DummyMediaStore, Nav, LocalWarning, Select, OverflowMenu, CursorPaginator, PopupModal, wrapFieldsWithMeta, FormStatus, FormBuilder } from "@tinacms/toolkit";
 export * from "@tinacms/toolkit";
 import * as G from "graphql";
 import { TypeInfo, visit, visitWithTypeInfo, getNamedType, GraphQLObjectType, isLeafType, GraphQLUnionType, isScalarType as isScalarType$1, getIntrospectionQuery, buildClientSchema, print, parse } from "graphql";
@@ -3114,6 +3114,9 @@ var styles = `.tina-tailwind {
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
 }
+.tina-tailwind .pointer-events-none {
+  pointer-events: none;
+}
 .tina-tailwind .pointer-events-auto {
   pointer-events: auto;
 }
@@ -3153,6 +3156,12 @@ var styles = `.tina-tailwind {
 .tina-tailwind .top-4 {
   top: 16px;
 }
+.tina-tailwind .top-1\\/2 {
+  top: 50%;
+}
+.tina-tailwind .left-2 {
+  left: 8px;
+}
 .tina-tailwind .z-overlay {
   z-index: 10600;
 }
@@ -3229,12 +3238,12 @@ var styles = `.tina-tailwind {
 .tina-tailwind .h-7 {
   height: 28px;
 }
-.tina-tailwind .h-10 {
-  height: 40px;
-}
 .tina-tailwind .h-5 {
   height: 20px;
 }
+.tina-tailwind .h-10 {
+  height: 40px;
+}
 .tina-tailwind .h-12 {
   height: 48px;
 }
@@ -3298,6 +3307,10 @@ var styles = `.tina-tailwind {
   --tw-translate-x: 100%;
   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));
 }
+.tina-tailwind .-translate-y-1\\/2 {
+  --tw-translate-y: -50%;
+  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));
+}
 .tina-tailwind .scale-95 {
   --tw-scale-x: .95;
   --tw-scale-y: .95;
@@ -3365,6 +3378,11 @@ var styles = `.tina-tailwind {
 .tina-tailwind .overflow-y-auto {
   overflow-y: auto;
 }
+.tina-tailwind .truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .tina-tailwind .whitespace-normal {
   white-space: normal;
 }
@@ -3377,12 +3395,12 @@ var styles = `.tina-tailwind {
 .tina-tailwind .rounded {
   border-radius: 4px;
 }
-.tina-tailwind .rounded-full {
-  border-radius: 9999px;
-}
 .tina-tailwind .rounded-md {
   border-radius: 6px;
 }
+.tina-tailwind .rounded-full {
+  border-radius: 9999px;
+}
 .tina-tailwind .rounded-r-md {
   border-top-right-radius: 6px;
   border-bottom-right-radius: 6px;
@@ -3463,6 +3481,10 @@ var styles = `.tina-tailwind {
   padding-top: 40px;
   padding-bottom: 40px;
 }
+.tina-tailwind .py-2 {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
 .tina-tailwind .px-20 {
   padding-left: 80px;
   padding-right: 80px;
@@ -3475,10 +3497,6 @@ var styles = `.tina-tailwind {
   padding-top: 4px;
   padding-bottom: 4px;
 }
-.tina-tailwind .py-2 {
-  padding-top: 8px;
-  padding-bottom: 8px;
-}
 .tina-tailwind .py-5 {
   padding-top: 20px;
   padding-bottom: 20px;
@@ -3492,6 +3510,15 @@ var styles = `.tina-tailwind {
 .tina-tailwind .pt-16 {
   padding-top: 64px;
 }
+.tina-tailwind .pr-3 {
+  padding-right: 12px;
+}
+.tina-tailwind .pl-8 {
+  padding-left: 32px;
+}
+.tina-tailwind .pl-3 {
+  padding-left: 12px;
+}
 .tina-tailwind .pt-3 {
   padding-top: 12px;
 }
@@ -3571,10 +3598,18 @@ var styles = `.tina-tailwind {
   --tw-text-opacity: 1;
   color: rgb(113 108 127 / var(--tw-text-opacity));
 }
+.tina-tailwind .text-gray-300 {
+  --tw-text-opacity: 1;
+  color: rgb(178 173 190 / var(--tw-text-opacity));
+}
 .tina-tailwind .text-gray-400 {
   --tw-text-opacity: 1;
   color: rgb(145 140 158 / var(--tw-text-opacity));
 }
+.tina-tailwind .text-blue-500 {
+  --tw-text-opacity: 1;
+  color: rgb(0 132 255 / var(--tw-text-opacity));
+}
 .tina-tailwind .text-current {
   color: currentColor;
 }
@@ -3609,6 +3644,9 @@ var styles = `.tina-tailwind {
 .tina-tailwind .opacity-90 {
   opacity: .9;
 }
+.tina-tailwind .opacity-20 {
+  opacity: .2;
+}
 .tina-tailwind .opacity-50 {
   opacity: .5;
 }
@@ -3625,6 +3663,11 @@ var styles = `.tina-tailwind {
   --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.tina-tailwind .shadow-inner {
+  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 .tina-tailwind .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -3714,6 +3757,14 @@ var styles = `.tina-tailwind {
 .tina-tailwind .hover\\:opacity-60:hover {
   opacity: .6;
 }
+.tina-tailwind .focus\\:border-blue-500:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 132 255 / var(--tw-border-opacity));
+}
+.tina-tailwind .focus\\:text-gray-900:focus {
+  --tw-text-opacity: 1;
+  color: rgb(37 35 54 / var(--tw-text-opacity));
+}
 .tina-tailwind .focus\\:text-blue-400:focus {
   --tw-text-opacity: 1;
   color: rgb(34 150 254 / var(--tw-text-opacity));
@@ -3739,6 +3790,30 @@ var styles = `.tina-tailwind {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(0 132 255 / var(--tw-ring-opacity));
 }
+.tina-tailwind .group:hover .group-hover\\:border-gray-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(225 221 236 / var(--tw-border-opacity));
+}
+.tina-tailwind .group:hover .group-hover\\:bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+.tina-tailwind .group:hover .group-hover\\:text-gray-600 {
+  --tw-text-opacity: 1;
+  color: rgb(86 81 101 / var(--tw-text-opacity));
+}
+.tina-tailwind .group:hover .group-hover\\:opacity-0 {
+  opacity: 0;
+}
+.tina-tailwind .group:hover .group-hover\\:opacity-80 {
+  opacity: .8;
+}
+.tina-tailwind .group:active .group-active\\:opacity-0 {
+  opacity: 0;
+}
+.tina-tailwind .group:active .group-active\\:opacity-80 {
+  opacity: .8;
+}
 `;
 class ContentCreatorPlugin {
   constructor(options) {
@@ -5115,6 +5190,12 @@ const DeleteModal = ({ close: close2, deleteFunc, filename }) => {
 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);
 }
+function FaLock(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 448 512" }, "child": [{ "tag": "path", "attr": { "d": "M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z" } }] })(props);
+}
+function FaUnlock(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 448 512" }, "child": [{ "tag": "path", "attr": { "d": "M400 256H152V152.9c0-39.6 31.7-72.5 71.3-72.9 40-.4 72.7 32.1 72.7 72v16c0 13.3 10.7 24 24 24h32c13.3 0 24-10.7 24-24v-16C376 68 307.5-.3 223.5 0 139.5.3 72 69.5 72 153.5V256H48c-26.5 0-48 21.5-48 48v160c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48z" } }] })(props);
+}
 const createDocument = async (cms, collection, template, mutationInfo, values) => {
   const api = new TinaAdminApi(cms);
   const { filename, ...leftover } = values;
@@ -5156,6 +5237,24 @@ const CollectionCreatePage = () => {
     });
   }));
 };
+const FilenameInput = (props) => {
+  const [filenameTouched, setFilenameTouched] = React.useState(false);
+  return /* @__PURE__ */ React.createElement("div", {
+    className: "group relative block cursor-pointer",
+    onClick: () => {
+      setFilenameTouched(true);
+    }
+  }, /* @__PURE__ */ React.createElement("input", {
+    type: "text",
+    className: `shadow-inner focus:shadow-outline focus:border-blue-500 focus:outline-none block text-base pr-3 truncate py-2 w-full border transition-all ease-out duration-150 focus:text-gray-900 rounded-md ${props.readonly || !filenameTouched ? "bg-gray-50 text-gray-300  border-gray-150 pointer-events-none pl-8 group-hover:bg-white group-hover:text-gray-600  group-hover:border-gray-200" : "bg-white text-gray-600  border-gray-200 pl-3"}`,
+    ...props,
+    disabled: props.readonly || !filenameTouched
+  }), /* @__PURE__ */ React.createElement(FaLock, {
+    className: `text-gray-400 absolute top-1/2 left-2 -translate-y-1/2 pointer-events-none h-5 w-auto transition-opacity duration-150 ease-out ${!filenameTouched && !props.readonly ? "opacity-20 group-hover:opacity-0 group-active:opacity-0" : "opacity-0"}`
+  }), /* @__PURE__ */ React.createElement(FaUnlock, {
+    className: `text-blue-500 absolute top-1/2 left-2 -translate-y-1/2 pointer-events-none h-5 w-auto transition-opacity duration-150 ease-out ${!filenameTouched && !props.readonly ? "opacity-0 group-hover:opacity-80 group-active:opacity-80" : "opacity-0"}`
+  }));
+};
 const RenderForm$1 = ({ cms, collection, templateName, mutationInfo }) => {
   var _a, _b, _c, _d, _e;
   const navigate = useNavigate();
@@ -5172,9 +5271,9 @@ const RenderForm$1 = ({ cms, collection, templateName, mutationInfo }) => {
     schema,
     template
   });
-  let slugFunction = (_b = (_a = schemaCollection == null ? void 0 : schemaCollection.ui) == null ? void 0 : _a.filename) == null ? void 0 : _b.slugify;
+  let slugFunction = (_b = (_a = template == null ? void 0 : template.ui) == null ? void 0 : _a.filename) == null ? void 0 : _b.slugify;
   if (!slugFunction) {
-    const titleField = (_c = schemaCollection.fields.find((x) => x.required && x.type === "string" && x.isTitle)) == null ? void 0 : _c.name;
+    const titleField = (_c = template == null ? void 0 : template.fields.find((x) => x.required && x.type === "string" && x.isTitle)) == null ? void 0 : _c.name;
     if (titleField) {
       slugFunction = (values) => {
         var _a2;
@@ -5197,11 +5296,18 @@ const RenderForm$1 = ({ cms, collection, templateName, mutationInfo }) => {
       id: "create-form",
       label: "form",
       fields: [
+        ...formInfo.fields,
         {
           name: "filename",
           label: "Filename",
-          component: "text",
-          disabled: (_b2 = (_a2 = schemaCollection == null ? void 0 : schemaCollection.ui) == null ? void 0 : _a2.filename) == null ? void 0 : _b2.disabled,
+          component: slugFunction ? wrapFieldsWithMeta(({ field, input, meta }) => {
+            var _a3, _b3;
+            return /* @__PURE__ */ React.createElement(FilenameInput, {
+              readonly: (_b3 = (_a3 = template == null ? void 0 : template.ui) == null ? void 0 : _a3.filename) == null ? void 0 : _b3.readonly,
+              ...input
+            });
+          }) : "text",
+          disabled: (_b2 = (_a2 = template == null ? void 0 : template.ui) == null ? void 0 : _a2.filename) == null ? void 0 : _b2.readonly,
           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) => {
@@ -5216,8 +5322,7 @@ const RenderForm$1 = ({ cms, collection, templateName, mutationInfo }) => {
               return "Must begin with a-z, A-Z, 0-9, or _ and contain only a-z, A-Z, 0-9, -, _, ., or /.";
             }
           }
-        },
-        ...formInfo.fields
+        }
       ],
       onSubmit: async (values) => {
         try {

package/dist/index.js

@@ -3132,6 +3132,9 @@ mutation addPendingDocumentMutation(
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
 }
+.tina-tailwind .pointer-events-none {
+  pointer-events: none;
+}
 .tina-tailwind .pointer-events-auto {
   pointer-events: auto;
 }
@@ -3171,6 +3174,12 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .top-4 {
   top: 16px;
 }
+.tina-tailwind .top-1\\/2 {
+  top: 50%;
+}
+.tina-tailwind .left-2 {
+  left: 8px;
+}
 .tina-tailwind .z-overlay {
   z-index: 10600;
 }
@@ -3247,12 +3256,12 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .h-7 {
   height: 28px;
 }
-.tina-tailwind .h-10 {
-  height: 40px;
-}
 .tina-tailwind .h-5 {
   height: 20px;
 }
+.tina-tailwind .h-10 {
+  height: 40px;
+}
 .tina-tailwind .h-12 {
   height: 48px;
 }
@@ -3316,6 +3325,10 @@ mutation addPendingDocumentMutation(
   --tw-translate-x: 100%;
   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));
 }
+.tina-tailwind .-translate-y-1\\/2 {
+  --tw-translate-y: -50%;
+  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));
+}
 .tina-tailwind .scale-95 {
   --tw-scale-x: .95;
   --tw-scale-y: .95;
@@ -3383,6 +3396,11 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .overflow-y-auto {
   overflow-y: auto;
 }
+.tina-tailwind .truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .tina-tailwind .whitespace-normal {
   white-space: normal;
 }
@@ -3395,12 +3413,12 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .rounded {
   border-radius: 4px;
 }
-.tina-tailwind .rounded-full {
-  border-radius: 9999px;
-}
 .tina-tailwind .rounded-md {
   border-radius: 6px;
 }
+.tina-tailwind .rounded-full {
+  border-radius: 9999px;
+}
 .tina-tailwind .rounded-r-md {
   border-top-right-radius: 6px;
   border-bottom-right-radius: 6px;
@@ -3481,6 +3499,10 @@ mutation addPendingDocumentMutation(
   padding-top: 40px;
   padding-bottom: 40px;
 }
+.tina-tailwind .py-2 {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
 .tina-tailwind .px-20 {
   padding-left: 80px;
   padding-right: 80px;
@@ -3493,10 +3515,6 @@ mutation addPendingDocumentMutation(
   padding-top: 4px;
   padding-bottom: 4px;
 }
-.tina-tailwind .py-2 {
-  padding-top: 8px;
-  padding-bottom: 8px;
-}
 .tina-tailwind .py-5 {
   padding-top: 20px;
   padding-bottom: 20px;
@@ -3510,6 +3528,15 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .pt-16 {
   padding-top: 64px;
 }
+.tina-tailwind .pr-3 {
+  padding-right: 12px;
+}
+.tina-tailwind .pl-8 {
+  padding-left: 32px;
+}
+.tina-tailwind .pl-3 {
+  padding-left: 12px;
+}
 .tina-tailwind .pt-3 {
   padding-top: 12px;
 }
@@ -3589,10 +3616,18 @@ mutation addPendingDocumentMutation(
   --tw-text-opacity: 1;
   color: rgb(113 108 127 / var(--tw-text-opacity));
 }
+.tina-tailwind .text-gray-300 {
+  --tw-text-opacity: 1;
+  color: rgb(178 173 190 / var(--tw-text-opacity));
+}
 .tina-tailwind .text-gray-400 {
   --tw-text-opacity: 1;
   color: rgb(145 140 158 / var(--tw-text-opacity));
 }
+.tina-tailwind .text-blue-500 {
+  --tw-text-opacity: 1;
+  color: rgb(0 132 255 / var(--tw-text-opacity));
+}
 .tina-tailwind .text-current {
   color: currentColor;
 }
@@ -3627,6 +3662,9 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .opacity-90 {
   opacity: .9;
 }
+.tina-tailwind .opacity-20 {
+  opacity: .2;
+}
 .tina-tailwind .opacity-50 {
   opacity: .5;
 }
@@ -3643,6 +3681,11 @@ mutation addPendingDocumentMutation(
   --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.tina-tailwind .shadow-inner {
+  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 .tina-tailwind .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -3732,6 +3775,14 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .hover\\:opacity-60:hover {
   opacity: .6;
 }
+.tina-tailwind .focus\\:border-blue-500:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 132 255 / var(--tw-border-opacity));
+}
+.tina-tailwind .focus\\:text-gray-900:focus {
+  --tw-text-opacity: 1;
+  color: rgb(37 35 54 / var(--tw-text-opacity));
+}
 .tina-tailwind .focus\\:text-blue-400:focus {
   --tw-text-opacity: 1;
   color: rgb(34 150 254 / var(--tw-text-opacity));
@@ -3757,6 +3808,30 @@ mutation addPendingDocumentMutation(
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(0 132 255 / var(--tw-ring-opacity));
 }
+.tina-tailwind .group:hover .group-hover\\:border-gray-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(225 221 236 / var(--tw-border-opacity));
+}
+.tina-tailwind .group:hover .group-hover\\:bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+.tina-tailwind .group:hover .group-hover\\:text-gray-600 {
+  --tw-text-opacity: 1;
+  color: rgb(86 81 101 / var(--tw-text-opacity));
+}
+.tina-tailwind .group:hover .group-hover\\:opacity-0 {
+  opacity: 0;
+}
+.tina-tailwind .group:hover .group-hover\\:opacity-80 {
+  opacity: .8;
+}
+.tina-tailwind .group:active .group-active\\:opacity-0 {
+  opacity: 0;
+}
+.tina-tailwind .group:active .group-active\\:opacity-80 {
+  opacity: .8;
+}
 `;
   class ContentCreatorPlugin {
     constructor(options) {
@@ -5133,6 +5208,12 @@ This will work when developing locally but NOT when deployed to production.
   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);
   }
+  function FaLock(props) {
+    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 448 512" }, "child": [{ "tag": "path", "attr": { "d": "M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z" } }] })(props);
+  }
+  function FaUnlock(props) {
+    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 448 512" }, "child": [{ "tag": "path", "attr": { "d": "M400 256H152V152.9c0-39.6 31.7-72.5 71.3-72.9 40-.4 72.7 32.1 72.7 72v16c0 13.3 10.7 24 24 24h32c13.3 0 24-10.7 24-24v-16C376 68 307.5-.3 223.5 0 139.5.3 72 69.5 72 153.5V256H48c-26.5 0-48 21.5-48 48v160c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48z" } }] })(props);
+  }
   const createDocument = async (cms, collection, template, mutationInfo, values) => {
     const api = new TinaAdminApi(cms);
     const { filename, ...leftover } = values;
@@ -5174,6 +5255,24 @@ This will work when developing locally but NOT when deployed to production.
       });
     }));
   };
+  const FilenameInput = (props) => {
+    const [filenameTouched, setFilenameTouched] = React__default["default"].useState(false);
+    return /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: "group relative block cursor-pointer",
+      onClick: () => {
+        setFilenameTouched(true);
+      }
+    }, /* @__PURE__ */ React__default["default"].createElement("input", {
+      type: "text",
+      className: `shadow-inner focus:shadow-outline focus:border-blue-500 focus:outline-none block text-base pr-3 truncate py-2 w-full border transition-all ease-out duration-150 focus:text-gray-900 rounded-md ${props.readonly || !filenameTouched ? "bg-gray-50 text-gray-300  border-gray-150 pointer-events-none pl-8 group-hover:bg-white group-hover:text-gray-600  group-hover:border-gray-200" : "bg-white text-gray-600  border-gray-200 pl-3"}`,
+      ...props,
+      disabled: props.readonly || !filenameTouched
+    }), /* @__PURE__ */ React__default["default"].createElement(FaLock, {
+      className: `text-gray-400 absolute top-1/2 left-2 -translate-y-1/2 pointer-events-none h-5 w-auto transition-opacity duration-150 ease-out ${!filenameTouched && !props.readonly ? "opacity-20 group-hover:opacity-0 group-active:opacity-0" : "opacity-0"}`
+    }), /* @__PURE__ */ React__default["default"].createElement(FaUnlock, {
+      className: `text-blue-500 absolute top-1/2 left-2 -translate-y-1/2 pointer-events-none h-5 w-auto transition-opacity duration-150 ease-out ${!filenameTouched && !props.readonly ? "opacity-0 group-hover:opacity-80 group-active:opacity-80" : "opacity-0"}`
+    }));
+  };
   const RenderForm$1 = ({ cms, collection, templateName, mutationInfo }) => {
     var _a, _b, _c, _d, _e;
     const navigate = reactRouterDom.useNavigate();
@@ -5190,9 +5289,9 @@ This will work when developing locally but NOT when deployed to production.
       schema,
       template
     });
-    let slugFunction = (_b = (_a = schemaCollection == null ? void 0 : schemaCollection.ui) == null ? void 0 : _a.filename) == null ? void 0 : _b.slugify;
+    let slugFunction = (_b = (_a = template == null ? void 0 : template.ui) == null ? void 0 : _a.filename) == null ? void 0 : _b.slugify;
     if (!slugFunction) {
-      const titleField = (_c = schemaCollection.fields.find((x) => x.required && x.type === "string" && x.isTitle)) == null ? void 0 : _c.name;
+      const titleField = (_c = template == null ? void 0 : template.fields.find((x) => x.required && x.type === "string" && x.isTitle)) == null ? void 0 : _c.name;
       if (titleField) {
         slugFunction = (values) => {
           var _a2;
@@ -5215,11 +5314,18 @@ This will work when developing locally but NOT when deployed to production.
         id: "create-form",
         label: "form",
         fields: [
+          ...formInfo.fields,
           {
             name: "filename",
             label: "Filename",
-            component: "text",
-            disabled: (_b2 = (_a2 = schemaCollection == null ? void 0 : schemaCollection.ui) == null ? void 0 : _a2.filename) == null ? void 0 : _b2.disabled,
+            component: slugFunction ? toolkit.wrapFieldsWithMeta(({ field, input, meta }) => {
+              var _a3, _b3;
+              return /* @__PURE__ */ React__default["default"].createElement(FilenameInput, {
+                readonly: (_b3 = (_a3 = template == null ? void 0 : template.ui) == null ? void 0 : _a3.filename) == null ? void 0 : _b3.readonly,
+                ...input
+              });
+            }) : "text",
+            disabled: (_b2 = (_a2 = template == null ? void 0 : template.ui) == null ? void 0 : _a2.filename) == null ? void 0 : _b2.readonly,
             description: /* @__PURE__ */ React__default["default"].createElement("span", null, "A unique filename for the content.", /* @__PURE__ */ React__default["default"].createElement("br", null), "Examples: ", /* @__PURE__ */ React__default["default"].createElement("code", null, "My_Document"), ", ", /* @__PURE__ */ React__default["default"].createElement("code", null, "My_Document.en"), ",", " ", /* @__PURE__ */ React__default["default"].createElement("code", null, "sub-folder/My_Document")),
             placeholder: `My_Document`,
             validate: (value, allValues, meta) => {
@@ -5234,8 +5340,7 @@ This will work when developing locally but NOT when deployed to production.
                 return "Must begin with a-z, A-Z, 0-9, or _ and contain only a-z, A-Z, 0-9, -, _, ., or /.";
               }
             }
-          },
-          ...formInfo.fields
+          }
         ],
         onSubmit: async (values) => {
           try {

package/dist/style.css

@@ -314,6 +314,9 @@
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
 }
+.tina-tailwind .pointer-events-none {
+  pointer-events: none;
+}
 .tina-tailwind .pointer-events-auto {
   pointer-events: auto;
 }
@@ -353,6 +356,12 @@
 .tina-tailwind .top-4 {
   top: 16px;
 }
+.tina-tailwind .top-1\/2 {
+  top: 50%;
+}
+.tina-tailwind .left-2 {
+  left: 8px;
+}
 .tina-tailwind .z-overlay {
   z-index: 10600;
 }
@@ -429,12 +438,12 @@
 .tina-tailwind .h-7 {
   height: 28px;
 }
-.tina-tailwind .h-10 {
-  height: 40px;
-}
 .tina-tailwind .h-5 {
   height: 20px;
 }
+.tina-tailwind .h-10 {
+  height: 40px;
+}
 .tina-tailwind .h-12 {
   height: 48px;
 }
@@ -498,6 +507,10 @@
   --tw-translate-x: 100%;
   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));
 }
+.tina-tailwind .-translate-y-1\/2 {
+  --tw-translate-y: -50%;
+  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));
+}
 .tina-tailwind .scale-95 {
   --tw-scale-x: .95;
   --tw-scale-y: .95;
@@ -565,6 +578,11 @@
 .tina-tailwind .overflow-y-auto {
   overflow-y: auto;
 }
+.tina-tailwind .truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .tina-tailwind .whitespace-normal {
   white-space: normal;
 }
@@ -577,12 +595,12 @@
 .tina-tailwind .rounded {
   border-radius: 4px;
 }
-.tina-tailwind .rounded-full {
-  border-radius: 9999px;
-}
 .tina-tailwind .rounded-md {
   border-radius: 6px;
 }
+.tina-tailwind .rounded-full {
+  border-radius: 9999px;
+}
 .tina-tailwind .rounded-r-md {
   border-top-right-radius: 6px;
   border-bottom-right-radius: 6px;
@@ -663,6 +681,10 @@
   padding-top: 40px;
   padding-bottom: 40px;
 }
+.tina-tailwind .py-2 {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
 .tina-tailwind .px-20 {
   padding-left: 80px;
   padding-right: 80px;
@@ -675,10 +697,6 @@
   padding-top: 4px;
   padding-bottom: 4px;
 }
-.tina-tailwind .py-2 {
-  padding-top: 8px;
-  padding-bottom: 8px;
-}
 .tina-tailwind .py-5 {
   padding-top: 20px;
   padding-bottom: 20px;
@@ -692,6 +710,15 @@
 .tina-tailwind .pt-16 {
   padding-top: 64px;
 }
+.tina-tailwind .pr-3 {
+  padding-right: 12px;
+}
+.tina-tailwind .pl-8 {
+  padding-left: 32px;
+}
+.tina-tailwind .pl-3 {
+  padding-left: 12px;
+}
 .tina-tailwind .pt-3 {
   padding-top: 12px;
 }
@@ -771,10 +798,18 @@
   --tw-text-opacity: 1;
   color: rgb(113 108 127 / var(--tw-text-opacity));
 }
+.tina-tailwind .text-gray-300 {
+  --tw-text-opacity: 1;
+  color: rgb(178 173 190 / var(--tw-text-opacity));
+}
 .tina-tailwind .text-gray-400 {
   --tw-text-opacity: 1;
   color: rgb(145 140 158 / var(--tw-text-opacity));
 }
+.tina-tailwind .text-blue-500 {
+  --tw-text-opacity: 1;
+  color: rgb(0 132 255 / var(--tw-text-opacity));
+}
 .tina-tailwind .text-current {
   color: currentColor;
 }
@@ -809,6 +844,9 @@
 .tina-tailwind .opacity-90 {
   opacity: .9;
 }
+.tina-tailwind .opacity-20 {
+  opacity: .2;
+}
 .tina-tailwind .opacity-50 {
   opacity: .5;
 }
@@ -825,6 +863,11 @@
   --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.tina-tailwind .shadow-inner {
+  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 .tina-tailwind .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -914,6 +957,14 @@
 .tina-tailwind .hover\:opacity-60:hover {
   opacity: .6;
 }
+.tina-tailwind .focus\:border-blue-500:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 132 255 / var(--tw-border-opacity));
+}
+.tina-tailwind .focus\:text-gray-900:focus {
+  --tw-text-opacity: 1;
+  color: rgb(37 35 54 / var(--tw-text-opacity));
+}
 .tina-tailwind .focus\:text-blue-400:focus {
   --tw-text-opacity: 1;
   color: rgb(34 150 254 / var(--tw-text-opacity));
@@ -939,3 +990,27 @@
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(0 132 255 / var(--tw-ring-opacity));
 }
+.tina-tailwind .group:hover .group-hover\:border-gray-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(225 221 236 / var(--tw-border-opacity));
+}
+.tina-tailwind .group:hover .group-hover\:bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+.tina-tailwind .group:hover .group-hover\:text-gray-600 {
+  --tw-text-opacity: 1;
+  color: rgb(86 81 101 / var(--tw-text-opacity));
+}
+.tina-tailwind .group:hover .group-hover\:opacity-0 {
+  opacity: 0;
+}
+.tina-tailwind .group:hover .group-hover\:opacity-80 {
+  opacity: .8;
+}
+.tina-tailwind .group:active .group-active\:opacity-0 {
+  opacity: 0;
+}
+.tina-tailwind .group:active .group-active\:opacity-80 {
+  opacity: .8;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinacms",
-  "version": "0.69.13",
+  "version": "0.69.15",
   "main": "dist/index.js",
   "module": "./dist/index.es.js",
   "exports": {
@@ -54,9 +54,9 @@
     "@headlessui/react": "^1.5.0",
     "@heroicons/react": "^1.0.4",
     "@react-hook/window-size": "^3.0.7",
-    "@tinacms/schema-tools": "0.1.5",
+    "@tinacms/schema-tools": "0.1.7",
     "@tinacms/sharedctx": "0.1.3",
-    "@tinacms/toolkit": "0.57.9",
+    "@tinacms/toolkit": "0.57.11",
     "crypto-js": "^4.0.0",
     "fetch-ponyfill": "^7.1.0",
     "final-form": "4.20.1",