@makeswift/runtime 0.6.4 → 0.6.6

package/dist/index.cjs.js

@@ -154,6 +154,7 @@ async function introspect(element, client, store) {
   const tableIds = /* @__PURE__ */ new Set();
   const pageIds = /* @__PURE__ */ new Set();
   const remaining = [element];
+  const seen = /* @__PURE__ */ new Set();
   let current;
   while (current = remaining.pop()) {
     let getResourcesFromElementDescriptors = function(elementDescriptors2, props) {
@@ -165,7 +166,12 @@ async function introspect(element, client, store) {
         constants.getTypographyIds(descriptor, props[propName]).forEach((typographyId) => typographyIds.add(typographyId));
         constants.getTableIds(descriptor, props[propName]).forEach((tableId) => tableIds.add(tableId));
         constants.getPageIds(descriptor, props[propName]).forEach((pageId) => pageIds.add(pageId));
-        constants.getElementChildren(descriptor, props[propName]).forEach((child) => remaining.push(child));
+        constants.getElementChildren(descriptor, props[propName]).forEach((child) => {
+          if (!seen.has(child.key)) {
+            seen.add(child.key);
+            remaining.push(child);
+          }
+        });
         if (descriptor.type === control.ShapeControlType) {
           const prop = props[propName];
           if (prop == null)
@@ -265,14 +271,44 @@ const deepEqual = (a, b) => {
   }
   return true;
 };
-function getInitialState(serializedState = []) {
-  return new Map(serializedState.map(([resourceType, resources]) => [resourceType, new Map(resources)]));
+function getInitialState(serializedState = {
+  Swatch: [],
+  File: [],
+  Typography: [],
+  PagePathnameSlice: [],
+  GlobalElement: [],
+  Table: [],
+  Snippet: [],
+  Page: [],
+  Site: []
+}) {
+  return new Map(Object.entries(serializedState).map(([apiResourceType, resources]) => [
+    apiResourceType,
+    new Map(resources.map(({ id, value }) => [id, value]))
+  ]));
 }
 function getSerializedState$1(state) {
-  return Array.from(state.entries()).map(([resourceType, resources]) => [
-    resourceType,
-    Array.from(resources.entries())
-  ]);
+  const resourceMap = {
+    Swatch: [],
+    File: [],
+    Typography: [],
+    PagePathnameSlice: [],
+    GlobalElement: [],
+    Table: [],
+    Snippet: [],
+    Page: [],
+    Site: []
+  };
+  Array.from(state.entries()).forEach(([resourceType, resources]) => {
+    const particularResourceMap = [];
+    Array.from(resources.entries()).forEach(([id, value]) => {
+      if (value != null) {
+        particularResourceMap.push({ id, value });
+      }
+    });
+    resourceMap[resourceType] = particularResourceMap;
+  });
+  return resourceMap;
 }
 function getHasAPIResource$1(state, resourceType, resourceId) {
   var _a, _b;
@@ -921,6 +957,159 @@ function Page$1({
     }, snippet.id))]
   });
 }
+function unstable_Page$1({
+  pageData
+}) {
+  var _a;
+  const isInBuilder = useIsInBuilder();
+  const [snippets, setSnippets] = React.useState(pageData.snapshot.resources.snippets);
+  const cachedPage = useCachedPage(isInBuilder ? pageData.pageId : null);
+  React.useEffect(() => {
+    if (cachedPage == null)
+      return;
+    const oldSnippets = snippets.map(filterUsedSnippetProperties);
+    const newSnippets = cachedPage.snippets.map(filterUsedSnippetProperties);
+    if (deepEqual(newSnippets, oldSnippets))
+      return;
+    setSnippets(cachedPage.snippets);
+  }, [cachedPage]);
+  const site = useCachedSite(isInBuilder ? pageData.siteId : null);
+  const favicon = (_a = pageData.snapshot.resources.meta.favicon) != null ? _a : defaultFavicon;
+  const {
+    title,
+    description,
+    keywords,
+    socialImage
+  } = pageData.snapshot.resources.meta;
+  const {
+    canonicalUrl,
+    isIndexingBlocked
+  } = pageData.snapshot.resources.seo;
+  const fontFamilyParamValue = React.useMemo(() => {
+    if (site == null) {
+      return pageData.snapshot.resources.fonts.map(({
+        family,
+        variants
+      }) => {
+        return `${family.replace(/ /g, "+")}:${variants.join()}`;
+      }).join("|");
+    }
+    return site.googleFonts.edges.filter((edge) => edge != null).map(({
+      activeVariants,
+      node: {
+        family,
+        variants
+      }
+    }) => {
+      const activeVariantSpecifiers = variants.filter((variant) => activeVariants.some((activeVariant) => activeVariant.specifier === variant.specifier)).map((variant) => variant.specifier).join();
+      return `${family.replace(/ /g, "+")}:${activeVariantSpecifiers}`;
+    }).join("|");
+  }, [site, pageData.snapshot.resources.fonts]);
+  const filteredSnippets = React.useMemo(() => snippets.filter((snippet) => isInBuilder ? snippet.builderEnabled : snippet.liveEnabled), [snippets, isInBuilder]);
+  const headSnippets = React.useMemo(() => filteredSnippets.filter((snippet) => snippet.location === SnippetLocation.Head), [filteredSnippets]);
+  const previousHeadSnippets = React.useRef(null);
+  React.useEffect(() => {
+    var _a2;
+    const headSnippetsToCleanUp = ((_a2 = previousHeadSnippets.current) != null ? _a2 : []).filter((previousSnippet) => previousSnippet.cleanup != null).filter((previousSnippet) => !headSnippets.some((snippet) => previousSnippet.id === snippet.id));
+    headSnippetsToCleanUp.forEach((snippetToCleanUp) => {
+      if (snippetToCleanUp.cleanup == null)
+        return;
+      const cleanUp = new Function(snippetToCleanUp.cleanup);
+      try {
+        cleanUp();
+      } catch {
+      }
+    });
+    previousHeadSnippets.current = headSnippets;
+  }, [headSnippets]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/* @__PURE__ */ jsxRuntime.jsxs(Head__default["default"], {
+      children: [/* @__PURE__ */ jsxRuntime.jsx("style", {
+        children: `
+            html {
+              font-family: sans-serif;
+            }
+            div#__next {
+              overflow: hidden;
+            }
+          `
+      }), /* @__PURE__ */ jsxRuntime.jsx("link", {
+        rel: "icon",
+        type: favicon.mimetype,
+        href: favicon.publicUrl
+      }), canonicalUrl && /* @__PURE__ */ jsxRuntime.jsx("link", {
+        rel: "canonical",
+        href: canonicalUrl
+      }), isIndexingBlocked && /* @__PURE__ */ jsxRuntime.jsx("meta", {
+        name: "robots",
+        content: "noindex"
+      }), title && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/* @__PURE__ */ jsxRuntime.jsx("title", {
+          children: title
+        }), /* @__PURE__ */ jsxRuntime.jsx("meta", {
+          property: "og:title",
+          content: title
+        }), /* @__PURE__ */ jsxRuntime.jsx("meta", {
+          name: "twitter:title",
+          content: title
+        }), /* @__PURE__ */ jsxRuntime.jsx("meta", {
+          itemProp: "name",
+          content: title
+        })]
+      }), description && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/* @__PURE__ */ jsxRuntime.jsx("meta", {
+          name: "description",
+          content: description
+        }), /* @__PURE__ */ jsxRuntime.jsx("meta", {
+          property: "og:description",
+          content: description
+        }), /* @__PURE__ */ jsxRuntime.jsx("meta", {
+          name: "twitter:description",
+          content: description
+        }), /* @__PURE__ */ jsxRuntime.jsx("meta", {
+          itemProp: "description",
+          content: description
+        })]
+      }), keywords && /* @__PURE__ */ jsxRuntime.jsx("meta", {
+        name: "keywords",
+        content: keywords
+      }), socialImage && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/* @__PURE__ */ jsxRuntime.jsx("meta", {
+          property: "og:image",
+          content: socialImage.publicUrl
+        }), /* @__PURE__ */ jsxRuntime.jsx("meta", {
+          property: "og:image:type",
+          content: socialImage.mimetype
+        }), /* @__PURE__ */ jsxRuntime.jsx("meta", {
+          name: "twitter:image",
+          content: socialImage.publicUrl
+        }), /* @__PURE__ */ jsxRuntime.jsx("meta", {
+          name: "twitter:card",
+          content: "summary_large_image"
+        }), /* @__PURE__ */ jsxRuntime.jsx("meta", {
+          itemProp: "image",
+          content: socialImage.publicUrl
+        })]
+      }), fontFamilyParamValue !== "" && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: /* @__PURE__ */ jsxRuntime.jsx("link", {
+          rel: "stylesheet",
+          href: `https://fonts.googleapis.com/css?family=${fontFamilyParamValue}&display=swap`
+        })
+      }), headSnippets.map(snippetToElement).map((children) => React.Children.map(children, (child) => {
+        if (typeof child === "string")
+          return child;
+        if (VALID_HEAD_ELEMENT_TYPES.includes(child.type))
+          return child;
+        return null;
+      }))]
+    }), /* @__PURE__ */ jsxRuntime.jsx(DocumentReference, {
+      documentReference: constants.createDocumentReference(pageData.pageId)
+    }), filteredSnippets.filter((snippet) => snippet.location === SnippetLocation.Body).map((snippet) => /* @__PURE__ */ jsxRuntime.jsx(BodySnippet, {
+      code: snippet.code,
+      cleanup: snippet.cleanup
+    }, snippet.id))]
+  });
+}
 function useCachedPage(pageId) {
   const client = useMakeswiftClient();
   const getSnapshot = () => pageId == null ? null : client.readPage(pageId);
@@ -933,6 +1122,7 @@ function useCachedSite(siteId) {
   const site = shim.useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot);
   return site;
 }
+const version = "0.6.6";
 class Makeswift {
   constructor(apiKey, { apiOrigin = "https://api.makeswift.com" } = {}) {
     __publicField(this, "apiKey");
@@ -986,6 +1176,199 @@ Received "${apiKey}" instead.`);
     const snapshot = this.getPageSnapshotByPageId(page.id, { preview });
     return snapshot;
   }
+  async unstable_getPageData(path, { preview } = {}) {
+    const [page] = await this.getPages({ path });
+    if (page == null)
+      return null;
+    const document2 = await this.getDocumentForPage(page.id);
+    const snapshot = await this.unstable_createSnapshotForPage({ document: document2, pageId: page.id });
+    return {
+      pageId: page.id,
+      siteId: document2.site.id,
+      snapshot,
+      options: { preview: preview || false, apiOrigin: this.apiOrigin.href }
+    };
+  }
+  async getDocumentForPage(pageId) {
+    const response = await this.fetch(`/v1/pages/${pageId}/document?preview=false`);
+    if (!response.ok) {
+      if (response.status === 404)
+        throw Error("bad");
+      throw new Error(`Failed to create snapshot with error: "${response.statusText}"`);
+    }
+    const document2 = await response.json();
+    return document2;
+  }
+  async unstable_createSnapshotForPage({
+    document: document2,
+    pageId
+  }) {
+    let fetchedDocument = document2;
+    if (fetchedDocument == null) {
+      const response = await this.fetch(`/v1/pages/${pageId}/document?preview=false`);
+      if (!response.ok) {
+        if (response.status === 404) {
+          throw new Error("Not found");
+        }
+        throw new Error(`Failed to create snapshot with error: "${response.statusText}"`);
+      }
+      fetchedDocument = await response.json();
+    }
+    if (fetchedDocument == null) {
+      throw Error("fetchedDocument should never be null");
+    }
+    const client = new MakeswiftClient({ uri: new URL("graphql", this.apiOrigin).href });
+    const prefetchedResources = await client.prefetch(fetchedDocument.data);
+    const resources = __spreadProps(__spreadValues({}, prefetchedResources), {
+      snippets: fetchedDocument.snippets,
+      meta: fetchedDocument.meta,
+      seo: fetchedDocument.seo,
+      fonts: fetchedDocument.fonts
+    });
+    return { resources, elementTree: fetchedDocument.data, runtimeVersion: version };
+  }
+  async unstable_createSnapshot({
+    publishedResources,
+    deletedResources,
+    publishedElementTree,
+    currentSnapshot
+  }) {
+    const client = new MakeswiftClient({ uri: new URL("graphql", this.apiOrigin).href });
+    function normalizeToMakeswiftResources(partialResources) {
+      const resources2 = {
+        Swatch: (partialResources == null ? void 0 : partialResources.Swatch) || [],
+        File: (partialResources == null ? void 0 : partialResources.File) || [],
+        Typography: (partialResources == null ? void 0 : partialResources.Typography) || [],
+        PagePathnameSlice: (partialResources == null ? void 0 : partialResources.PagePathnameSlice) || [],
+        GlobalElement: (partialResources == null ? void 0 : partialResources.GlobalElement) || [],
+        Table: (partialResources == null ? void 0 : partialResources.Table) || [],
+        Snippet: (partialResources == null ? void 0 : partialResources.Snippet) || [],
+        Page: (partialResources == null ? void 0 : partialResources.Page) || [],
+        Site: (partialResources == null ? void 0 : partialResources.Site) || [],
+        snippets: (partialResources == null ? void 0 : partialResources.snippets) || [],
+        fonts: (partialResources == null ? void 0 : partialResources.fonts) || [],
+        meta: (partialResources == null ? void 0 : partialResources.meta) || {},
+        seo: (partialResources == null ? void 0 : partialResources.seo) || {}
+      };
+      return resources2;
+    }
+    function mergeResources({
+      resourcesFromPublishedElementTree: resourcesFromPublishedElementTree2,
+      resourcesFromCurrentSnapshot: resourcesFromCurrentSnapshot2,
+      publishedResources: publishedResources2,
+      deletedResources: deletedResources2
+    }) {
+      function mergeElementTreeResource(resourceSet, deletedResources3) {
+        const map = new Map(resourceSet.map(({ id, value }) => [id, value]));
+        deletedResources3.forEach(({ id }) => map.delete(id));
+        const finalResourceSet = [];
+        Array.from(map.entries()).forEach(([id, value]) => {
+          if (value != null) {
+            finalResourceSet.push({ id, value });
+          }
+        });
+        return finalResourceSet;
+      }
+      function mergeSnippets(snippets, deletedSnippet) {
+        const map = new Map(snippets.map((value) => [value.id, value]));
+        deletedSnippet.forEach(({ id }) => map.delete(id));
+        const uniqueSnippets = [];
+        Array.from(map.entries()).forEach(([_, value]) => {
+          uniqueSnippets.push(value);
+        });
+        return uniqueSnippets;
+      }
+      function mergeFonts(fonts, deletedFonts) {
+        const map = new Map(fonts.map((value) => [value.family, value]));
+        deletedFonts.forEach(({ family }) => map.delete(family));
+        const uniqueFonts = [];
+        Array.from(map.entries()).forEach(([_, value]) => {
+          uniqueFonts.push(value);
+        });
+        return uniqueFonts;
+      }
+      const resources2 = {
+        Swatch: mergeElementTreeResource([
+          ...resourcesFromPublishedElementTree2.Swatch,
+          ...resourcesFromCurrentSnapshot2.Swatch,
+          ...publishedResources2.Swatch
+        ], deletedResources2.Swatch),
+        File: mergeElementTreeResource([
+          ...resourcesFromPublishedElementTree2.File,
+          ...resourcesFromCurrentSnapshot2.File,
+          ...publishedResources2.File
+        ], deletedResources2.File),
+        Typography: mergeElementTreeResource([
+          ...resourcesFromPublishedElementTree2.Typography,
+          ...resourcesFromCurrentSnapshot2.Typography,
+          ...publishedResources2.Typography
+        ], deletedResources2.Typography),
+        PagePathnameSlice: mergeElementTreeResource([
+          ...resourcesFromPublishedElementTree2.PagePathnameSlice,
+          ...resourcesFromCurrentSnapshot2.PagePathnameSlice,
+          ...publishedResources2.PagePathnameSlice
+        ], deletedResources2.PagePathnameSlice),
+        GlobalElement: mergeElementTreeResource([
+          ...resourcesFromPublishedElementTree2.GlobalElement,
+          ...resourcesFromCurrentSnapshot2.GlobalElement,
+          ...publishedResources2.GlobalElement
+        ], deletedResources2.GlobalElement),
+        Table: mergeElementTreeResource([
+          ...resourcesFromPublishedElementTree2.Table,
+          ...resourcesFromCurrentSnapshot2.Table,
+          ...publishedResources2.Table
+        ], deletedResources2.Table),
+        snippets: mergeSnippets([
+          ...resourcesFromCurrentSnapshot2.snippets,
+          ...resourcesFromPublishedElementTree2.snippets,
+          ...publishedResources2.snippets
+        ], deletedResources2.snippets),
+        fonts: mergeFonts([
+          ...resourcesFromCurrentSnapshot2.fonts,
+          ...resourcesFromPublishedElementTree2.fonts,
+          ...publishedResources2.fonts
+        ], deletedResources2.fonts),
+        meta: __spreadValues(__spreadValues({}, resourcesFromCurrentSnapshot2.meta), publishedResources2.meta),
+        seo: __spreadValues(__spreadValues({}, resourcesFromCurrentSnapshot2.seo), publishedResources2.seo),
+        Snippet: [],
+        Page: [],
+        Site: []
+      };
+      return resources2;
+    }
+    const resourcesFromPublishedElementTree = publishedElementTree != null ? normalizeToMakeswiftResources(await client.prefetch(publishedElementTree)) : normalizeToMakeswiftResources({});
+    const resourcesFromCurrentSnapshot = normalizeToMakeswiftResources((currentSnapshot == null ? void 0 : currentSnapshot.resources) || {});
+    const resources = mergeResources({
+      resourcesFromPublishedElementTree,
+      resourcesFromCurrentSnapshot,
+      publishedResources: normalizeToMakeswiftResources(publishedResources),
+      deletedResources: normalizeToMakeswiftResources(deletedResources)
+    });
+    const elementTree = publishedElementTree || (currentSnapshot == null ? void 0 : currentSnapshot.elementTree);
+    if (elementTree == null) {
+      throw Error("elementTree should not be null; something went wrong.");
+    }
+    return {
+      resources,
+      elementTree,
+      runtimeVersion: version
+    };
+  }
+  unstable_getSnapshotResourceMapping(snapshot) {
+    const resources = snapshot.resources;
+    function parseResourceIds({ id }) {
+      return id;
+    }
+    return [
+      ...resources.Swatch.map(parseResourceIds),
+      ...resources.File.map(parseResourceIds),
+      ...resources.Typography.map(parseResourceIds),
+      ...resources.PagePathnameSlice.map(parseResourceIds),
+      ...resources.GlobalElement.map(parseResourceIds),
+      ...resources.Table.map(parseResourceIds),
+      ...resources.snippets.map(parseResourceIds)
+    ];
+  }
 }
 function PreviewModeScript({
   isPreview = false,
@@ -1114,11 +1497,14 @@ class Document$1 extends NextDocument__default["default"] {
     });
   }
 }
-const version = "0.6.4";
 function isErrorWithMessage(error) {
   return typeof error === "object" && error !== null && "message" in error && typeof error.message === "string";
 }
-function MakeswiftApiHandler(apiKey, { appOrigin = "https://app.makeswift.com", getFonts } = {}) {
+function MakeswiftApiHandler(apiKey, {
+  appOrigin = "https://app.makeswift.com",
+  apiOrigin = "https://api.makeswift.com",
+  getFonts
+} = {}) {
   const cors = Cors__default["default"]({ origin: appOrigin });
   const previewModeProxy = httpProxy.createProxyServer();
   previewModeProxy.on("proxyReq", (proxyReq) => {
@@ -1155,7 +1541,8 @@ Read more about dynamic catch-all routes here: https://nextjs.org/docs/routing/d
         return res.json({
           version,
           previewMode: true,
-          interactionMode: true
+          interactionMode: true,
+          clientSideNavigation: true
         });
       }
       case "revalidate": {
@@ -1228,6 +1615,35 @@ Read more here: https://nextjs.org/blog/next-12-2#on-demand-incremental-static-r
         const response = { elementTree: generatedElementTree };
         return res.json(response);
       }
+      case "snapshot": {
+        let validateBody = function(body2) {
+          if (body2.pageId == null) {
+            return res.status(400).json({ message: "Must define pageId." });
+          }
+          if (body2.currentSnapshot == null && body2.publishedElementTree == null) {
+            return res.status(400).json({ message: "Either currentSnapshot or publishedElementTree must be defined." });
+          }
+        };
+        const body = req.body;
+        validateBody(body);
+        const client = new Makeswift(apiKey, {
+          apiOrigin
+        });
+        const snapshot = await client.unstable_createSnapshot({
+          publishedResources: body.publishedResources,
+          deletedResources: body.deletedResources,
+          publishedElementTree: body.publishedElementTree,
+          currentSnapshot: body.currentSnapshot
+        });
+        const usedResources = client.unstable_getSnapshotResourceMapping(snapshot);
+        const response = {
+          pageId: body.pageId,
+          snapshot,
+          livePageChanges: body.livePageChanges,
+          usedResources
+        };
+        return res.json(response);
+      }
       default:
         return res.status(404).json({ message: "Not Found" });
     }
@@ -1362,6 +1778,37 @@ const Page = React.memo(({
     }, snapshot.document.data.key)
   });
 });
+const unstable_Page = React.memo(({
+  pageData
+}) => {
+  function resourcesToCacheData(resources) {
+    if (resources == null)
+      return void 0;
+    return {
+      Swatch: resources.Swatch,
+      File: resources.File,
+      Typography: resources.Typography,
+      PagePathnameSlice: resources.PagePathnameSlice,
+      GlobalElement: resources.GlobalElement,
+      Table: resources.Table,
+      Snippet: resources.Snippet,
+      Page: resources.Page,
+      Site: resources.Site
+    };
+  }
+  const client = React.useMemo(() => new MakeswiftClient({
+    uri: new URL("graphql", pageData.options.apiOrigin).href,
+    cacheData: resourcesToCacheData(pageData.snapshot.resources)
+  }), [pageData]);
+  return /* @__PURE__ */ jsxRuntime.jsx(RuntimeProvider, {
+    client,
+    rootElements: /* @__PURE__ */ new Map([[pageData.pageId, pageData.snapshot.elementTree]]),
+    preview: pageData.options.preview,
+    children: /* @__PURE__ */ jsxRuntime.jsx(unstable_Page$1, {
+      pageData
+    })
+  });
+});
 const keys = (o) => Object.keys(o);
 const coalesce = (...args) => {
   let i;
@@ -3651,6 +4098,7 @@ const DocumentContext = React.createContext(null);
 function useDocumentKey() {
   return React.useContext(DocumentContext);
 }
+const DocumentCyclesContext = React.createContext([]);
 function useStore() {
   return React.useContext(StoreContext);
 }
@@ -3722,20 +4170,32 @@ const ElementReference = React.memo(React.forwardRef(function ElementReference2(
   const globalElement = useGlobalElement(elementReference.value);
   const globalElementData = globalElement == null ? void 0 : globalElement.data;
   const elementReferenceDocument = useDocument(elementReference.key);
+  const documentKey = elementReference.key;
+  const documentKeys = React.useContext(DocumentCyclesContext);
+  const providedDocumentKeys = React.useMemo(() => [...documentKeys, documentKey], [documentKeys, documentKey]);
   if (globalElementData == null) {
     return /* @__PURE__ */ jsxRuntime.jsx(FallbackComponent, {
       ref,
       text: "This global component doesn't exist"
     });
   }
-  return elementReferenceDocument != null ? /* @__PURE__ */ jsxRuntime.jsx(Document, {
-    document: elementReferenceDocument,
-    ref
-  }) : /* @__PURE__ */ jsxRuntime.jsx(DisableRegisterElement.Provider, {
-    value: true,
-    children: /* @__PURE__ */ jsxRuntime.jsx(ElementData, {
-      elementData: globalElementData,
+  if (documentKeys.includes(documentKey)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(FallbackComponent, {
+      ref,
+      text: "This global component contains itself!"
+    });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(DocumentCyclesContext.Provider, {
+    value: providedDocumentKeys,
+    children: elementReferenceDocument != null ? /* @__PURE__ */ jsxRuntime.jsx(Document, {
+      document: elementReferenceDocument,
       ref
+    }) : /* @__PURE__ */ jsxRuntime.jsx(DisableRegisterElement.Provider, {
+      value: true,
+      children: /* @__PURE__ */ jsxRuntime.jsx(ElementData, {
+        elementData: globalElementData,
+        ref
+      })
     })
   });
 }));
@@ -3849,6 +4309,8 @@ exports.responsiveTextStyle = responsiveTextStyle;
 exports.responsiveWidth = responsiveWidth;
 exports.shallowMergeFallbacks = shallowMergeFallbacks;
 exports.storeContextDefaultValue = storeContextDefaultValue;
+exports.unstable_Page = unstable_Page$1;
+exports.unstable_Page$1 = unstable_Page;
 exports.useBorder = useBorder;
 exports.useBoxShadow = useBoxShadow;
 exports.useBuilderEditMode = useBuilderEditMode;