tinacms 0.69.6 → 0.69.8

package/dist/admin/index.d.ts

@@ -10,4 +10,6 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-export declare const TinaAdmin: () => JSX.Element;
+export declare const TinaAdmin: ({ preview }: {
+    preview?: JSX.Element;
+}) => JSX.Element;

package/dist/client.es.js

@@ -24,9 +24,6 @@ class TinaClient {
       if (!branch || !clientId) {
         throw new Error(`Invalid URL format provided. Expected: https://${TINA_HOST}/content/<ClientID>/github/<Branch> but but received ${url2}`);
       }
-      if (params.host !== TINA_HOST) {
-        throw new Error(`The only supported hosts are ${TINA_HOST} or localhost, but received ${params.host}.`);
-      }
       return {
         host: params.host,
         clientId,

package/dist/client.js

@@ -31,9 +31,6 @@
         if (!branch || !clientId) {
           throw new Error(`Invalid URL format provided. Expected: https://${TINA_HOST}/content/<ClientID>/github/<Branch> but but received ${url2}`);
         }
-        if (params.host !== TINA_HOST) {
-          throw new Error(`The only supported hosts are ${TINA_HOST} or localhost, but received ${params.host}.`);
-        }
         return {
           host: params.host,
           clientId,

package/dist/index.d.ts

@@ -20,11 +20,13 @@ export * from '@tinacms/toolkit';
 export { TinaAdmin } from './admin';
 export { RouteMappingPlugin } from './admin/plugins/route-mapping';
 export { TinaAdminApi } from './admin/api';
-import { TinaCMSProvider2 } from './tina-cms';
+import { TinaCMSProvider2, DocumentCreatorCallback } from './tina-cms';
 import type { TinaCMSProviderDefaultProps } from './types/cms';
 export type { TinaCMSProviderDefaultProps };
 export default TinaCMSProvider2;
-import type { TinaCloudSchema as TinaCloudSchemaBase, TinaCloudCollection as TinaCloudCollectionBase, TinaCloudTemplateBase as TinaTemplate, TinaFieldBase } from '@tinacms/schema-tools';
+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';
 export declare type TinaCloudSchema = TinaCloudSchemaBase<false>;
 export declare type TinaCloudCollection = TinaCloudCollectionBase<false>;
 export declare type TinaCollection = TinaCloudCollectionBase<false>;
@@ -32,3 +34,4 @@ export declare type TinaField = TinaFieldBase;
 export type { TinaTemplate };
 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

@@ -9,7 +9,7 @@ import { resolveForm, TinaSchema, addNamespaceToSchema, validateSchema } from "@
 import gql$1 from "graphql-tag";
 import * as yup from "yup";
 import styled from "styled-components";
-import { setEditing, TinaDataContext, useEditState } from "@tinacms/sharedctx";
+import { setEditing, TinaDataContext, EditContext, useEditState } from "@tinacms/sharedctx";
 import UrlPattern from "url-pattern";
 import { NavLink, useNavigate, useParams, useLocation, Link, HashRouter, Routes, Route } from "react-router-dom";
 import { Transition, Menu } from "@headlessui/react";
@@ -352,9 +352,10 @@ const createClient = ({
   isLocalClient = true,
   branch,
   tinaioConfig,
-  schema
+  schema,
+  apiUrl
 }) => {
-  return isLocalClient ? new LocalClient({ schema }) : new Client({
+  return isLocalClient ? new LocalClient({ customContentApiUrl: apiUrl, schema }) : new Client({
     clientId: clientId || "",
     branch: branch || "main",
     tokenStorage: "LOCAL_STORAGE",
@@ -2544,7 +2545,7 @@ class TinaAdminApi {
           collection: collectionName,
           includeDocuments,
           sort,
-          limit: 10,
+          limit: 50,
           after
         }
       }) : await this.api.request(`#graphql
@@ -2585,7 +2586,7 @@ class TinaAdminApi {
           collection: collectionName,
           includeDocuments,
           sort,
-          limit: 10,
+          limit: 50,
           after
         }
       });
@@ -2714,7 +2715,9 @@ const TinaCloudProvider = (props) => {
   useTinaAuthRedirect();
   const cms = React.useMemo(() => props.cms || new TinaCMS({
     enabled: true,
-    sidebar: true
+    sidebar: true,
+    isLocalClient: props.isLocalClient,
+    clientId: props.clientId
   }), [props.cms]);
   if (!cms.api.tina) {
     cms.registerApi("tina", createClient({ ...props, branch: currentBranch }));
@@ -2795,7 +2798,7 @@ const TinaCloudProvider = (props) => {
   })));
 };
 const TinaCloudAuthWall = TinaCloudProvider;
-var styles = /* @__PURE__ */ (() => `.tina-tailwind {
+var styles = `.tina-tailwind {
   line-height: 1.5;
   -webkit-text-size-adjust: 100%;
   -moz-tab-size: 4;
@@ -3169,6 +3172,9 @@ var styles = /* @__PURE__ */ (() => `.tina-tailwind {
 .tina-tailwind .mr-2 {
   margin-right: 8px;
 }
+.tina-tailwind .ml-1 {
+  margin-left: 4px;
+}
 .tina-tailwind .mb-2 {
   margin-bottom: 8px;
 }
@@ -3181,9 +3187,6 @@ var styles = /* @__PURE__ */ (() => `.tina-tailwind {
 .tina-tailwind .-mt-0 {
   margin-top: -0px;
 }
-.tina-tailwind .ml-1 {
-  margin-left: 4px;
-}
 .tina-tailwind .mt-2 {
   margin-top: 8px;
 }
@@ -3708,6 +3711,9 @@ var styles = /* @__PURE__ */ (() => `.tina-tailwind {
 .tina-tailwind .hover\\:opacity-100:hover {
   opacity: 1;
 }
+.tina-tailwind .hover\\:opacity-60:hover {
+  opacity: .6;
+}
 .tina-tailwind .focus\\:text-blue-400:focus {
   --tw-text-opacity: 1;
   color: rgb(34 150 254 / var(--tw-text-opacity));
@@ -3733,7 +3739,7 @@ var styles = /* @__PURE__ */ (() => `.tina-tailwind {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(0 132 255 / var(--tw-ring-opacity));
 }
-`)();
+`;
 class ContentCreatorPlugin {
   constructor(options) {
     this.__type = "content-creator";
@@ -3925,7 +3931,6 @@ function useTina({
     isLoading
   };
 }
-const TINA_HOST = "content.tinajs.io";
 const parseURL = (url) => {
   if (url.includes("localhost")) {
     return { branch: null, isLocalClient: true, clientId: null };
@@ -3940,9 +3945,6 @@ const parseURL = (url) => {
   if (!branch || !clientId) {
     throw new Error(`Invalid URL format provided. Expected: https://content.tinajs.io/content/<ClientID>/github/<Branch> but but received ${url}`);
   }
-  if (params.host !== TINA_HOST) {
-    throw new Error(`The only supported hosts are ${TINA_HOST} or localhost, but received ${params.host}.`);
-  }
   return {
     branch,
     clientId,
@@ -4058,7 +4060,8 @@ const TinaCMSProvider2 = ({
     isLocalClient,
     cmsCallback: props.cmsCallback,
     mediaStore: props.mediaStore,
-    schema
+    apiUrl: apiURL,
+    schema: { ...schema, config: { ...schema.config, ...props } }
   }, /* @__PURE__ */ React.createElement("style", null, styles), /* @__PURE__ */ React.createElement(ErrorBoundary, null, /* @__PURE__ */ React.createElement(DocumentCreator, {
     documentCreatorCallback
   }), /* @__PURE__ */ React.createElement(TinaDataProvider, {
@@ -4120,6 +4123,7 @@ const FormRegistrar = ({
   onPayloadStateChange
 }) => {
   const cms = useCMS();
+  const { setFormsRegistering } = React.useContext(EditContext);
   const [payload, isLoading] = useGraphqlForms({
     query: request == null ? void 0 : request.query,
     variables: request == null ? void 0 : request.variables,
@@ -4133,6 +4137,7 @@ const FormRegistrar = ({
   });
   React.useEffect(() => {
     onPayloadStateChange({ payload, isLoading });
+    setFormsRegistering && setFormsRegistering(isLoading);
   }, [JSON.stringify(payload), isLoading]);
   return isLoading ? /* @__PURE__ */ React.createElement(Loader, null, /* @__PURE__ */ React.createElement(React.Fragment, null)) : null;
 };
@@ -4424,6 +4429,7 @@ const Sidebar = ({ cms }) => {
   var _a, _b;
   const collectionsInfo = useGetCollections(cms);
   const screens = cms.plugins.getType("screen").all();
+  const cloudConfigs = cms.plugins.getType("cloud-config").all();
   const [menuIsOpen, setMenuIsOpen] = React.useState(false);
   const isLocalMode = (_b = (_a = cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode;
   const navBreakpoint = 1e3;
@@ -4434,15 +4440,19 @@ const Sidebar = ({ cms }) => {
     showCollections: true,
     collectionsInfo,
     screens,
+    cloudConfigs,
     contentCreators: [],
     RenderNavSite: ({ view }) => /* @__PURE__ */ React.createElement(SidebarLink, {
       label: view.name,
-      to: `screens/${slugify(view.name)}`,
+      to: `/screens/${slugify(view.name)}`,
       Icon: view.Icon ? view.Icon : ImFilesEmpty
     }),
+    RenderNavCloud: ({ config }) => /* @__PURE__ */ React.createElement(SidebarCloudLink, {
+      config
+    }),
     RenderNavCollection: ({ collection }) => /* @__PURE__ */ React.createElement(SidebarLink, {
       label: collection.label ? collection.label : collection.name,
-      to: `collections/${collection.name}`,
+      to: `/collections/${collection.name}`,
       Icon: ImFilesEmpty
     })
   }), !renderDesktopNav && /* @__PURE__ */ React.createElement(Transition, {
@@ -4463,18 +4473,22 @@ const Sidebar = ({ cms }) => {
     showCollections: true,
     collectionsInfo,
     screens,
+    cloudConfigs,
     contentCreators: [],
     RenderNavSite: ({ view }) => /* @__PURE__ */ React.createElement(SidebarLink, {
       label: view.name,
-      to: `screens/${slugify(view.name)}`,
+      to: `/screens/${slugify(view.name)}`,
       Icon: view.Icon ? view.Icon : ImFilesEmpty,
       onClick: () => {
         setMenuIsOpen(false);
       }
     }),
+    RenderNavCloud: ({ config }) => /* @__PURE__ */ React.createElement(SidebarCloudLink, {
+      config
+    }),
     RenderNavCollection: ({ collection }) => /* @__PURE__ */ React.createElement(SidebarLink, {
       label: collection.label ? collection.label : collection.name,
-      to: `collections/${collection.name}`,
+      to: `/collections/${collection.name}`,
       Icon: ImFilesEmpty,
       onClick: () => {
         setMenuIsOpen(false);
@@ -4529,6 +4543,25 @@ const SidebarLink = (props) => {
     className: "mr-2 h-6 opacity-80 w-auto"
   }), " ", label);
 };
+const SidebarCloudLink = ({ config }) => {
+  if (config.text) {
+    return /* @__PURE__ */ React.createElement("span", {
+      className: "text-base tracking-wide text-gray-500 flex items-center opacity-90"
+    }, config.text, " ", /* @__PURE__ */ React.createElement("a", {
+      target: "_blank",
+      className: "ml-1 text-blue-600 hover:opacity-60",
+      href: config.link.href
+    }, config.link.text));
+  }
+  return /* @__PURE__ */ React.createElement("span", {
+    className: "text-base tracking-wide text-gray-500 hover:text-blue-600 flex items-center opacity-90 hover:opacity-100"
+  }, /* @__PURE__ */ React.createElement(config.Icon, {
+    className: "mr-2 h-6 opacity-80 w-auto"
+  }), /* @__PURE__ */ React.createElement("a", {
+    target: "_blank",
+    href: config.link.href
+  }, config.link.text));
+};
 const GetCMS = ({ children }) => {
   try {
     const cms = useCMS();
@@ -4839,12 +4872,13 @@ const handleNavigate = (navigate, cms, collection, collectionDefinition, documen
   var _a, _b;
   const plugins = cms.plugins.all("tina-admin");
   const routeMapping = plugins.find(({ name }) => name === "route-mapping");
+  const tinaPreview = cms.flags.get("tina-preview") || false;
   const routeOverride = ((_a = collectionDefinition.ui) == null ? void 0 : _a.router) ? (_b = collectionDefinition.ui) == null ? void 0 : _b.router({
     document,
     collection: collectionDefinition
   }) : routeMapping ? routeMapping.mapper(collection, document) : void 0;
   if (routeOverride) {
-    window.location.href = routeOverride;
+    tinaPreview ? navigate(`/preview?iframe-url=${encodeURIComponent(routeOverride)}`) : window.location.href = routeOverride;
     return null;
   } else {
     navigate(document._sys.breadcrumbs.join("/"));
@@ -5379,7 +5413,18 @@ const Redirect = () => {
   }, []);
   return null;
 };
-const TinaAdmin = () => {
+const SetPreviewFlag = ({
+  preview,
+  cms
+}) => {
+  React.useEffect(() => {
+    if (preview) {
+      cms.flags.set("tina-iframe", true);
+    }
+  }, [preview]);
+  return null;
+};
+const TinaAdmin = ({ preview }) => {
   const isSSR2 = typeof window === "undefined";
   const { edit } = useEditState();
   if (isSSR2) {
@@ -5391,31 +5436,43 @@ const TinaAdmin = () => {
   return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => {
     const isTinaAdminEnabled = cms.flags.get("tina-admin") === false ? false : true;
     if (isTinaAdminEnabled) {
-      return /* @__PURE__ */ React.createElement(Layout, null, /* @__PURE__ */ React.createElement(HashRouter, null, /* @__PURE__ */ React.createElement("div", {
-        className: "flex items-stretch h-screen overflow-hidden"
-      }, /* @__PURE__ */ React.createElement(Sidebar, {
+      return /* @__PURE__ */ React.createElement(HashRouter, null, /* @__PURE__ */ React.createElement(SetPreviewFlag, {
+        preview,
         cms
-      }), /* @__PURE__ */ React.createElement("div", {
-        className: "flex-1 relative"
-      }, /* @__PURE__ */ React.createElement(Routes, null, /* @__PURE__ */ React.createElement(Route, {
+      }), /* @__PURE__ */ React.createElement(Routes, null, preview && /* @__PURE__ */ React.createElement(Route, {
+        path: "preview",
+        element: preview
+      }), /* @__PURE__ */ React.createElement(Route, {
         path: "collections/:collectionName/new",
-        element: /* @__PURE__ */ React.createElement(CollectionCreatePage, null)
+        element: /* @__PURE__ */ React.createElement(DefaultWrapper, {
+          cms
+        }, /* @__PURE__ */ React.createElement(CollectionCreatePage, null))
       }), /* @__PURE__ */ React.createElement(Route, {
         path: "collections/:collectionName/:templateName/new",
-        element: /* @__PURE__ */ React.createElement(CollectionCreatePage, null)
+        element: /* @__PURE__ */ React.createElement(DefaultWrapper, {
+          cms
+        }, /* @__PURE__ */ React.createElement(CollectionCreatePage, null))
       }), /* @__PURE__ */ React.createElement(Route, {
         path: "collections/:collectionName/*",
-        element: /* @__PURE__ */ React.createElement(CollectionUpdatePage, null)
+        element: /* @__PURE__ */ React.createElement(DefaultWrapper, {
+          cms
+        }, /* @__PURE__ */ React.createElement(CollectionUpdatePage, null))
       }), /* @__PURE__ */ React.createElement(Route, {
         path: "collections/:collectionName",
-        element: /* @__PURE__ */ React.createElement(CollectionListPage, null)
+        element: /* @__PURE__ */ React.createElement(DefaultWrapper, {
+          cms
+        }, /* @__PURE__ */ React.createElement(CollectionListPage, null))
       }), /* @__PURE__ */ React.createElement(Route, {
         path: "screens/:screenName",
-        element: /* @__PURE__ */ React.createElement(ScreenPage, null)
+        element: /* @__PURE__ */ React.createElement(DefaultWrapper, {
+          cms
+        }, /* @__PURE__ */ React.createElement(ScreenPage, null))
       }), /* @__PURE__ */ React.createElement(Route, {
         path: "/",
-        element: /* @__PURE__ */ React.createElement(DashboardPage, null)
-      }))))));
+        element: /* @__PURE__ */ React.createElement(DefaultWrapper, {
+          cms
+        }, /* @__PURE__ */ React.createElement(DashboardPage, null))
+      })));
     } else {
       return /* @__PURE__ */ React.createElement(Layout, null, /* @__PURE__ */ React.createElement(HashRouter, null, /* @__PURE__ */ React.createElement(Routes, null, /* @__PURE__ */ React.createElement(Route, {
         path: "logout",
@@ -5427,6 +5484,18 @@ const TinaAdmin = () => {
     }
   });
 };
+const DefaultWrapper = ({
+  cms,
+  children
+}) => {
+  return /* @__PURE__ */ React.createElement(Layout, null, /* @__PURE__ */ React.createElement("div", {
+    className: "flex items-stretch h-screen overflow-hidden"
+  }, /* @__PURE__ */ React.createElement(Sidebar, {
+    cms
+  }), /* @__PURE__ */ React.createElement("div", {
+    className: "flex-1 relative"
+  }, children)));
+};
 class RouteMappingPlugin {
   constructor(mapper) {
     this.__type = "tina-admin";
@@ -5441,4 +5510,7 @@ const defineSchema = (config) => {
 const defineConfig = (config) => {
   return config;
 };
-export { AuthWallInner, Client, DEFAULT_LOCAL_TINA_GQL_SERVER_URL, LocalClient, RouteMappingPlugin, TinaAdmin, TinaAdminApi, TinaCMSProvider2, TinaCloudAuthWall, TinaCloudProvider, TinaDataProvider, assertShape, createClient, TinaCMSProvider2 as default, defineConfig, defineSchema, getStaticPropsForTina, gql, safeAssertShape, staticRequest, useDocumentCreatorPlugin, useGraphqlForms, useTinaAuthRedirect };
+const defineStaticConfig = (config) => {
+  return config;
+};
+export { AuthWallInner, Client, DEFAULT_LOCAL_TINA_GQL_SERVER_URL, LocalClient, RouteMappingPlugin, TinaAdmin, TinaAdminApi, TinaCMSProvider2, TinaCloudAuthWall, TinaCloudProvider, TinaDataProvider, assertShape, createClient, TinaCMSProvider2 as default, defineConfig, defineSchema, defineStaticConfig, getStaticPropsForTina, gql, safeAssertShape, staticRequest, useDocumentCreatorPlugin, useGraphqlForms, useTinaAuthRedirect };

package/dist/index.js

@@ -370,9 +370,10 @@
     isLocalClient = true,
     branch,
     tinaioConfig,
-    schema
+    schema,
+    apiUrl
   }) => {
-    return isLocalClient ? new LocalClient({ schema }) : new Client({
+    return isLocalClient ? new LocalClient({ customContentApiUrl: apiUrl, schema }) : new Client({
       clientId: clientId || "",
       branch: branch || "main",
       tokenStorage: "LOCAL_STORAGE",
@@ -2562,7 +2563,7 @@ mutation addPendingDocumentMutation(
             collection: collectionName,
             includeDocuments,
             sort,
-            limit: 10,
+            limit: 50,
             after
           }
         }) : await this.api.request(`#graphql
@@ -2603,7 +2604,7 @@ mutation addPendingDocumentMutation(
             collection: collectionName,
             includeDocuments,
             sort,
-            limit: 10,
+            limit: 50,
             after
           }
         });
@@ -2732,7 +2733,9 @@ mutation addPendingDocumentMutation(
     useTinaAuthRedirect();
     const cms = React__default["default"].useMemo(() => props.cms || new toolkit.TinaCMS({
       enabled: true,
-      sidebar: true
+      sidebar: true,
+      isLocalClient: props.isLocalClient,
+      clientId: props.clientId
     }), [props.cms]);
     if (!cms.api.tina) {
       cms.registerApi("tina", createClient({ ...props, branch: currentBranch }));
@@ -2813,7 +2816,7 @@ mutation addPendingDocumentMutation(
     })));
   };
   const TinaCloudAuthWall = TinaCloudProvider;
-  var styles = /* @__PURE__ */ (() => `.tina-tailwind {
+  var styles = `.tina-tailwind {
   line-height: 1.5;
   -webkit-text-size-adjust: 100%;
   -moz-tab-size: 4;
@@ -3187,6 +3190,9 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .mr-2 {
   margin-right: 8px;
 }
+.tina-tailwind .ml-1 {
+  margin-left: 4px;
+}
 .tina-tailwind .mb-2 {
   margin-bottom: 8px;
 }
@@ -3199,9 +3205,6 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .-mt-0 {
   margin-top: -0px;
 }
-.tina-tailwind .ml-1 {
-  margin-left: 4px;
-}
 .tina-tailwind .mt-2 {
   margin-top: 8px;
 }
@@ -3726,6 +3729,9 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .hover\\:opacity-100:hover {
   opacity: 1;
 }
+.tina-tailwind .hover\\:opacity-60:hover {
+  opacity: .6;
+}
 .tina-tailwind .focus\\:text-blue-400:focus {
   --tw-text-opacity: 1;
   color: rgb(34 150 254 / var(--tw-text-opacity));
@@ -3751,7 +3757,7 @@ mutation addPendingDocumentMutation(
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(0 132 255 / var(--tw-ring-opacity));
 }
-`)();
+`;
   class ContentCreatorPlugin {
     constructor(options) {
       this.__type = "content-creator";
@@ -3943,7 +3949,6 @@ mutation addPendingDocumentMutation(
       isLoading
     };
   }
-  const TINA_HOST = "content.tinajs.io";
   const parseURL = (url) => {
     if (url.includes("localhost")) {
       return { branch: null, isLocalClient: true, clientId: null };
@@ -3958,9 +3963,6 @@ mutation addPendingDocumentMutation(
     if (!branch || !clientId) {
       throw new Error(`Invalid URL format provided. Expected: https://content.tinajs.io/content/<ClientID>/github/<Branch> but but received ${url}`);
     }
-    if (params.host !== TINA_HOST) {
-      throw new Error(`The only supported hosts are ${TINA_HOST} or localhost, but received ${params.host}.`);
-    }
     return {
       branch,
       clientId,
@@ -4076,7 +4078,8 @@ mutation addPendingDocumentMutation(
       isLocalClient,
       cmsCallback: props.cmsCallback,
       mediaStore: props.mediaStore,
-      schema
+      apiUrl: apiURL,
+      schema: { ...schema, config: { ...schema.config, ...props } }
     }, /* @__PURE__ */ React__default["default"].createElement("style", null, styles), /* @__PURE__ */ React__default["default"].createElement(ErrorBoundary, null, /* @__PURE__ */ React__default["default"].createElement(DocumentCreator, {
       documentCreatorCallback
     }), /* @__PURE__ */ React__default["default"].createElement(TinaDataProvider, {
@@ -4138,6 +4141,7 @@ mutation addPendingDocumentMutation(
     onPayloadStateChange
   }) => {
     const cms = toolkit.useCMS();
+    const { setFormsRegistering } = React__default["default"].useContext(sharedctx.EditContext);
     const [payload, isLoading] = useGraphqlForms({
       query: request == null ? void 0 : request.query,
       variables: request == null ? void 0 : request.variables,
@@ -4151,6 +4155,7 @@ mutation addPendingDocumentMutation(
     });
     React__default["default"].useEffect(() => {
       onPayloadStateChange({ payload, isLoading });
+      setFormsRegistering && setFormsRegistering(isLoading);
     }, [JSON.stringify(payload), isLoading]);
     return isLoading ? /* @__PURE__ */ React__default["default"].createElement(Loader, null, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null)) : null;
   };
@@ -4442,6 +4447,7 @@ This will work when developing locally but NOT when deployed to production.
     var _a, _b;
     const collectionsInfo = useGetCollections(cms);
     const screens = cms.plugins.getType("screen").all();
+    const cloudConfigs = cms.plugins.getType("cloud-config").all();
     const [menuIsOpen, setMenuIsOpen] = React__default["default"].useState(false);
     const isLocalMode = (_b = (_a = cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode;
     const navBreakpoint = 1e3;
@@ -4452,15 +4458,19 @@ This will work when developing locally but NOT when deployed to production.
       showCollections: true,
       collectionsInfo,
       screens,
+      cloudConfigs,
       contentCreators: [],
       RenderNavSite: ({ view }) => /* @__PURE__ */ React__default["default"].createElement(SidebarLink, {
         label: view.name,
-        to: `screens/${slugify(view.name)}`,
+        to: `/screens/${slugify(view.name)}`,
         Icon: view.Icon ? view.Icon : ImFilesEmpty
       }),
+      RenderNavCloud: ({ config }) => /* @__PURE__ */ React__default["default"].createElement(SidebarCloudLink, {
+        config
+      }),
       RenderNavCollection: ({ collection }) => /* @__PURE__ */ React__default["default"].createElement(SidebarLink, {
         label: collection.label ? collection.label : collection.name,
-        to: `collections/${collection.name}`,
+        to: `/collections/${collection.name}`,
         Icon: ImFilesEmpty
       })
     }), !renderDesktopNav && /* @__PURE__ */ React__default["default"].createElement(react.Transition, {
@@ -4481,18 +4491,22 @@ This will work when developing locally but NOT when deployed to production.
       showCollections: true,
       collectionsInfo,
       screens,
+      cloudConfigs,
       contentCreators: [],
       RenderNavSite: ({ view }) => /* @__PURE__ */ React__default["default"].createElement(SidebarLink, {
         label: view.name,
-        to: `screens/${slugify(view.name)}`,
+        to: `/screens/${slugify(view.name)}`,
         Icon: view.Icon ? view.Icon : ImFilesEmpty,
         onClick: () => {
           setMenuIsOpen(false);
         }
       }),
+      RenderNavCloud: ({ config }) => /* @__PURE__ */ React__default["default"].createElement(SidebarCloudLink, {
+        config
+      }),
       RenderNavCollection: ({ collection }) => /* @__PURE__ */ React__default["default"].createElement(SidebarLink, {
         label: collection.label ? collection.label : collection.name,
-        to: `collections/${collection.name}`,
+        to: `/collections/${collection.name}`,
         Icon: ImFilesEmpty,
         onClick: () => {
           setMenuIsOpen(false);
@@ -4547,6 +4561,25 @@ This will work when developing locally but NOT when deployed to production.
       className: "mr-2 h-6 opacity-80 w-auto"
     }), " ", label);
   };
+  const SidebarCloudLink = ({ config }) => {
+    if (config.text) {
+      return /* @__PURE__ */ React__default["default"].createElement("span", {
+        className: "text-base tracking-wide text-gray-500 flex items-center opacity-90"
+      }, config.text, " ", /* @__PURE__ */ React__default["default"].createElement("a", {
+        target: "_blank",
+        className: "ml-1 text-blue-600 hover:opacity-60",
+        href: config.link.href
+      }, config.link.text));
+    }
+    return /* @__PURE__ */ React__default["default"].createElement("span", {
+      className: "text-base tracking-wide text-gray-500 hover:text-blue-600 flex items-center opacity-90 hover:opacity-100"
+    }, /* @__PURE__ */ React__default["default"].createElement(config.Icon, {
+      className: "mr-2 h-6 opacity-80 w-auto"
+    }), /* @__PURE__ */ React__default["default"].createElement("a", {
+      target: "_blank",
+      href: config.link.href
+    }, config.link.text));
+  };
   const GetCMS = ({ children }) => {
     try {
       const cms = toolkit.useCMS();
@@ -4857,12 +4890,13 @@ This will work when developing locally but NOT when deployed to production.
     var _a, _b;
     const plugins = cms.plugins.all("tina-admin");
     const routeMapping = plugins.find(({ name }) => name === "route-mapping");
+    const tinaPreview = cms.flags.get("tina-preview") || false;
     const routeOverride = ((_a = collectionDefinition.ui) == null ? void 0 : _a.router) ? (_b = collectionDefinition.ui) == null ? void 0 : _b.router({
       document,
       collection: collectionDefinition
     }) : routeMapping ? routeMapping.mapper(collection, document) : void 0;
     if (routeOverride) {
-      window.location.href = routeOverride;
+      tinaPreview ? navigate(`/preview?iframe-url=${encodeURIComponent(routeOverride)}`) : window.location.href = routeOverride;
       return null;
     } else {
       navigate(document._sys.breadcrumbs.join("/"));
@@ -5397,7 +5431,18 @@ This will work when developing locally but NOT when deployed to production.
     }, []);
     return null;
   };
-  const TinaAdmin = () => {
+  const SetPreviewFlag = ({
+    preview,
+    cms
+  }) => {
+    React__default["default"].useEffect(() => {
+      if (preview) {
+        cms.flags.set("tina-iframe", true);
+      }
+    }, [preview]);
+    return null;
+  };
+  const TinaAdmin = ({ preview }) => {
     const isSSR2 = typeof window === "undefined";
     const { edit } = sharedctx.useEditState();
     if (isSSR2) {
@@ -5409,31 +5454,43 @@ This will work when developing locally but NOT when deployed to production.
     return /* @__PURE__ */ React__default["default"].createElement(GetCMS, null, (cms) => {
       const isTinaAdminEnabled = cms.flags.get("tina-admin") === false ? false : true;
       if (isTinaAdminEnabled) {
-        return /* @__PURE__ */ React__default["default"].createElement(Layout, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.HashRouter, null, /* @__PURE__ */ React__default["default"].createElement("div", {
-          className: "flex items-stretch h-screen overflow-hidden"
-        }, /* @__PURE__ */ React__default["default"].createElement(Sidebar, {
+        return /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.HashRouter, null, /* @__PURE__ */ React__default["default"].createElement(SetPreviewFlag, {
+          preview,
           cms
-        }), /* @__PURE__ */ React__default["default"].createElement("div", {
-          className: "flex-1 relative"
-        }, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Routes, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
+        }), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Routes, null, preview && /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
+          path: "preview",
+          element: preview
+        }), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
           path: "collections/:collectionName/new",
-          element: /* @__PURE__ */ React__default["default"].createElement(CollectionCreatePage, null)
+          element: /* @__PURE__ */ React__default["default"].createElement(DefaultWrapper, {
+            cms
+          }, /* @__PURE__ */ React__default["default"].createElement(CollectionCreatePage, null))
         }), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
           path: "collections/:collectionName/:templateName/new",
-          element: /* @__PURE__ */ React__default["default"].createElement(CollectionCreatePage, null)
+          element: /* @__PURE__ */ React__default["default"].createElement(DefaultWrapper, {
+            cms
+          }, /* @__PURE__ */ React__default["default"].createElement(CollectionCreatePage, null))
         }), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
           path: "collections/:collectionName/*",
-          element: /* @__PURE__ */ React__default["default"].createElement(CollectionUpdatePage, null)
+          element: /* @__PURE__ */ React__default["default"].createElement(DefaultWrapper, {
+            cms
+          }, /* @__PURE__ */ React__default["default"].createElement(CollectionUpdatePage, null))
         }), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
           path: "collections/:collectionName",
-          element: /* @__PURE__ */ React__default["default"].createElement(CollectionListPage, null)
+          element: /* @__PURE__ */ React__default["default"].createElement(DefaultWrapper, {
+            cms
+          }, /* @__PURE__ */ React__default["default"].createElement(CollectionListPage, null))
         }), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
           path: "screens/:screenName",
-          element: /* @__PURE__ */ React__default["default"].createElement(ScreenPage, null)
+          element: /* @__PURE__ */ React__default["default"].createElement(DefaultWrapper, {
+            cms
+          }, /* @__PURE__ */ React__default["default"].createElement(ScreenPage, null))
         }), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
           path: "/",
-          element: /* @__PURE__ */ React__default["default"].createElement(DashboardPage, null)
-        }))))));
+          element: /* @__PURE__ */ React__default["default"].createElement(DefaultWrapper, {
+            cms
+          }, /* @__PURE__ */ React__default["default"].createElement(DashboardPage, null))
+        })));
       } else {
         return /* @__PURE__ */ React__default["default"].createElement(Layout, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.HashRouter, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Routes, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
           path: "logout",
@@ -5445,6 +5502,18 @@ This will work when developing locally but NOT when deployed to production.
       }
     });
   };
+  const DefaultWrapper = ({
+    cms,
+    children
+  }) => {
+    return /* @__PURE__ */ React__default["default"].createElement(Layout, null, /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: "flex items-stretch h-screen overflow-hidden"
+    }, /* @__PURE__ */ React__default["default"].createElement(Sidebar, {
+      cms
+    }), /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: "flex-1 relative"
+    }, children)));
+  };
   class RouteMappingPlugin {
     constructor(mapper) {
       this.__type = "tina-admin";
@@ -5459,6 +5528,9 @@ This will work when developing locally but NOT when deployed to production.
   const defineConfig = (config) => {
     return config;
   };
+  const defineStaticConfig = (config) => {
+    return config;
+  };
   exports2.AuthWallInner = AuthWallInner;
   exports2.Client = Client;
   exports2.DEFAULT_LOCAL_TINA_GQL_SERVER_URL = DEFAULT_LOCAL_TINA_GQL_SERVER_URL;
@@ -5475,6 +5547,7 @@ This will work when developing locally but NOT when deployed to production.
   exports2["default"] = TinaCMSProvider2;
   exports2.defineConfig = defineConfig;
   exports2.defineSchema = defineSchema;
+  exports2.defineStaticConfig = defineStaticConfig;
   exports2.getStaticPropsForTina = getStaticPropsForTina;
   exports2.gql = gql;
   exports2.safeAssertShape = safeAssertShape;

package/dist/react.d.ts

@@ -0,0 +1,11 @@
+/**
+ * This is an experimental version of the useTina hook,
+ * it is only meant to be used with Tina in "iframe mode".
+ */
+export declare function useTina<T extends object>(props: {
+    query: string;
+    variables: object;
+    data: T;
+}): {
+    data: T;
+};

package/dist/react.es.js

@@ -0,0 +1,17 @@
+import React from "react";
+function useTina(props) {
+  const [data, setData] = React.useState(props.data);
+  React.useEffect(() => {
+    const id = btoa(JSON.stringify({ query: props.query }));
+    parent.postMessage({ type: "open", ...props, id }, window.location.origin);
+    window.addEventListener("message", (event) => {
+      if (event.data.id === id) {
+        console.log("child: event received");
+        setData(event.data.data);
+      }
+    });
+    return () => parent.postMessage({ type: "close", id }, window.location.origin);
+  }, []);
+  return { data };
+}
+export { useTina };

package/dist/react.js

@@ -0,0 +1,26 @@
+(function(global, factory) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react")) : typeof define === "function" && define.amd ? define(["exports", "react"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.tinacms = {}, global.NOOP));
+})(this, function(exports2, React) {
+  "use strict";
+  function _interopDefaultLegacy(e) {
+    return e && typeof e === "object" && "default" in e ? e : { "default": e };
+  }
+  var React__default = /* @__PURE__ */ _interopDefaultLegacy(React);
+  function useTina(props) {
+    const [data, setData] = React__default["default"].useState(props.data);
+    React__default["default"].useEffect(() => {
+      const id = btoa(JSON.stringify({ query: props.query }));
+      parent.postMessage({ type: "open", ...props, id }, window.location.origin);
+      window.addEventListener("message", (event) => {
+        if (event.data.id === id) {
+          console.log("child: event received");
+          setData(event.data.data);
+        }
+      });
+      return () => parent.postMessage({ type: "close", id }, window.location.origin);
+    }, []);
+    return { data };
+  }
+  exports2.useTina = useTina;
+  Object.defineProperties(exports2, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+});

package/dist/style.css

@@ -372,6 +372,9 @@
 .tina-tailwind .mr-2 {
   margin-right: 8px;
 }
+.tina-tailwind .ml-1 {
+  margin-left: 4px;
+}
 .tina-tailwind .mb-2 {
   margin-bottom: 8px;
 }
@@ -384,9 +387,6 @@
 .tina-tailwind .-mt-0 {
   margin-top: -0px;
 }
-.tina-tailwind .ml-1 {
-  margin-left: 4px;
-}
 .tina-tailwind .mt-2 {
   margin-top: 8px;
 }
@@ -911,6 +911,9 @@
 .tina-tailwind .hover\:opacity-100:hover {
   opacity: 1;
 }
+.tina-tailwind .hover\:opacity-60:hover {
+  opacity: .6;
+}
 .tina-tailwind .focus\:text-blue-400:focus {
   --tw-text-opacity: 1;
   color: rgb(34 150 254 / var(--tw-text-opacity));

package/dist/tina-cms.d.ts

@@ -11,8 +11,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import type { formifyCallback } from './hooks/use-graphql-forms';
+import { useDocumentCreatorPlugin } from './hooks/use-content-creator';
 import { TinaCMSProviderDefaultProps } from './types/cms';
 export declare const TinaCMSProvider2: ({ query, documentCreatorCallback, formifyCallback, schema, ...props }: TinaCMSProviderDefaultProps) => JSX.Element;
+export declare type DocumentCreatorCallback = Parameters<typeof useDocumentCreatorPlugin>[0];
 export declare const TinaDataProvider: ({ children, formifyCallback, }: {
     children: any;
     formifyCallback: formifyCallback;

package/dist/utils/index.d.ts

@@ -22,7 +22,8 @@ export interface CreateClientProps {
     repo?: string;
     branch?: string;
     schema?: TinaCloudSchema<false>;
+    apiUrl?: string;
 }
-export declare const createClient: ({ clientId, isLocalClient, branch, tinaioConfig, schema, }: CreateClientProps) => Client;
+export declare const createClient: ({ clientId, isLocalClient, branch, tinaioConfig, schema, apiUrl, }: CreateClientProps) => Client;
 export declare function assertShape<T extends unknown>(value: unknown, yupSchema: (args: typeof yup) => yup.AnySchema, errorMessage?: string): asserts value is T;
 export declare function safeAssertShape<T extends unknown>(value: unknown, yupSchema: (args: typeof yup) => yup.AnySchema): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinacms",
-  "version": "0.69.6",
+  "version": "0.69.8",
   "main": "dist/index.js",
   "module": "./dist/index.es.js",
   "exports": {
@@ -19,6 +19,11 @@
       "import": "./dist/edit-state.es.js",
       "require": "./dist/edit-state.js"
     },
+    "./dist/react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.es.js",
+      "require": "./dist/react.js"
+    },
     "./dist/rich-text": {
       "types": "./dist/rich-text/index.d.ts",
       "import": "./dist/rich-text/index.es.js",
@@ -38,6 +43,7 @@
       "src/index.ts",
       "src/edit-state.tsx",
       "src/rich-text/index.tsx",
+      "src/react.tsx",
       "src/client.ts"
     ]
   },
@@ -48,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.2",
-    "@tinacms/sharedctx": "0.1.2",
-    "@tinacms/toolkit": "0.57.3",
+    "@tinacms/schema-tools": "0.1.4",
+    "@tinacms/sharedctx": "0.1.3",
+    "@tinacms/toolkit": "0.57.5",
     "crypto-js": "^4.0.0",
     "fetch-ponyfill": "^7.1.0",
     "final-form": "4.20.1",
@@ -58,7 +64,6 @@
     "graphql-tag": "^2.11.0",
     "lodash.set": "^4.3.2",
     "prism-react-renderer": "^1.3.5",
-    "prism": "^4.1.2",
     "react-icons": "^4.3.1",
     "react-router-dom": "6",
     "url-pattern": "^1.0.3",