@makeswift/runtime 0.8.10 → 0.9.0

package/dist/index.es.js

@@ -34,32 +34,34 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-var _c;
+var _e;
 import * as React from "react";
 import { useEffect, createContext, useContext, useState, useMemo, useRef, Children, createElement, forwardRef, memo, useId, useCallback, useImperativeHandle, Component, Suspense } from "react";
 import { useSyncExternalStoreWithSelector } from "use-sync-external-store/shim/with-selector";
 import dynamic from "next/dynamic";
-import { a as createDocumentReference, g as getPropControllerDescriptors, i as isElementReference, M as MakeswiftComponentType, b as isPropControllersHandle, d as getComponentPropControllerDescriptors, e as getPropControllers, f as configureStore$1, h as copyElementTree, j as getBreakpoints, k as getDocument, l as getElementId, m as getIsPreview, n as getIsInBuilder, o as getReactComponent, p as getBuilderEditMode } from "./constants.es.js";
-import { A as ActionTypes, k as apiResourceFulfilled, l as registerComponentEffect, n as registerReactComponentEffect, o as registerComponentHandleEffect, p as mountComponentEffect } from "./actions.es.js";
+import { a as createDocumentReference, g as getPropControllerDescriptors, b as isElementReference, e as getElementSwatchIds, f as getFileIds, h as getTypographyIds, j as getTableIds, k as getPageIds, l as getElementChildren, S as ShapeControlType, L as ListControlType, m as Types, E as ElementID, B as Backgrounds, W as Width, n as ResponsiveIconRadioGroup, M as Margin, P as Padding, o as Border, p as BorderRadius, q as Shadows, G as GapY, r as GapX, s as ResponsiveSelect, t as ResponsiveNumber, u as Checkbox, v as Grid, w as TextInput, x as Link, y as ResponsiveColor, z as TextStyle, C as ComponentIcon, I as Images, N as Number$1, D as Date$1, F as Font, A as ResponsiveLength, H as TextArea, J as Table, K as TableFormFields, O as Image, Q as ResponsiveOpacity, U as NavigationLinks, V as SocialLinks, X as RichText, Y as Video, Z as getBorderSwatchIds, _ as isNonNullable, $ as getBoxShadowsSwatchIds, a0 as getResponsiveColorSwatchIds, a1 as StyleControlProperty, a2 as ImageControlValueFormat, a3 as isPropControllersHandle, a4 as StyleControlType, a5 as RichTextV2ControlType, a6 as RichTextControlType, a7 as SlotControlType, a8 as LinkControlType, a9 as ImageControlType, aa as ColorControlType, ab as SelectControlType, ac as getComponentPropControllerDescriptors, ad as getPropControllers, ae as BorderPropControllerFormat, af as ShadowsPropControllerFormat, ag as BorderRadiusPropControllerFormat, ah as MarginPropControllerFormat, ai as PaddingPropControllerFormat, aj as WidthPropControllerFormat, ak as configureStore$1, al as copyElementTree, am as getBreakpoints, an as getDocument, ao as getElementId, ap as getIsPreview, aq as getIsInBuilder, ar as getReactComponent, as as getBuilderEditMode } from "./react-page.es.js";
+import { A as ActionTypes, n as apiResourceFulfilled, o as registerComponentEffect, p as registerReactComponentEffect, q as registerComponentHandleEffect, t as mountComponentEffect } from "./actions.es.js";
 import { cache, cx } from "@emotion/css";
 import { serializeStyles } from "@emotion/serialize";
 import { registerStyles, insertStyles } from "@emotion/utils";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { S as ShapeControlType, L as ListControlType, T as Types, E as ElementID, B as Backgrounds, W as Width, f as ResponsiveIconRadioGroup, M as Margin, P as Padding, g as Border, h as BorderRadius, i as Shadows, G as GapY, j as GapX, k as ResponsiveSelect, l as ResponsiveNumber, m as Checkbox, n as Grid, o as TextInput, p as Link, q as ResponsiveColor, s as TextStyle, t as Images, N as Number$1, D as Date$1, F as Font, u as ResponsiveLength, v as TextArea, w as Table, x as TableFormFields, y as Image, z as ResponsiveOpacity, A as NavigationLinks, H as SocialLinks, J as RichText, V as Video, K as StyleControlProperty, O as ImageControlValueFormat, Q as StyleControlType, U as RichTextV2ControlType, X as RichTextControlType, b as SlotControlType, Y as LinkControlType, I as ImageControlType, C as ColorControlType, Z as BorderPropControllerFormat, _ as ShadowsPropControllerFormat, $ as BorderRadiusPropControllerFormat, a0 as MarginPropControllerFormat, a1 as PaddingPropControllerFormat, a2 as WidthPropControllerFormat } from "./descriptors.es.js";
-import { S as SelectControlType, T as TextAreaControlType, a as TextInputControlType, N as NumberControlType, C as CheckboxControlType } from "./text-input.es.js";
+import { T as TextAreaControlType, a as TextInputControlType, N as NumberControlType, C as CheckboxControlType } from "./text-input.es.js";
 import { C as ComboboxControlType } from "./combobox.es.js";
+import "slate";
+import { getBaseBreakpoint, findBreakpointOverride, DefaultBreakpointID, join, getBreakpoint, getBreakpointMediaQuery, parseBreakpointsInput } from "./state/breakpoints.es.js";
+import "is-hotkey";
+import "slate-react";
 import { useSyncExternalStore } from "use-sync-external-store/shim";
 import { createStore, applyMiddleware } from "redux";
 import thunk from "redux-thunk";
 import { A as APIResourceType } from "./types.es.js";
-import { b as getElementSwatchIds, c as getFileIds, d as getTypographyIds, e as getTableIds, f as getPageIds, a as getElementChildren, h as getBorderSwatchIds, j as isNonNullable, k as getBoxShadowsSwatchIds, l as getResponsiveColorSwatchIds } from "./introspection.es.js";
-import { getBaseBreakpoint, findBreakpointOverride, DefaultBreakpointID, join, getBreakpoint, getBreakpointMediaQuery, parseBreakpointsInput } from "./state/breakpoints.es.js";
 import { g as getBox, i as isMeasurable, m as measure } from "./box-models.es.js";
 import ColorHelper from "color";
 import scrollIntoView from "scroll-into-view-if-needed";
 import { findDOMNode } from "react-dom";
 import parse from "html-react-parser";
 import Head from "next/head";
+import { z } from "zod";
 import createEmotionServer from "@emotion/server/create-instance";
 import NextDocument, { Html, Head as Head$1, Main, NextScript } from "next/document";
 import Cors from "cors";
@@ -67,8 +69,46 @@ import { match } from "path-to-regexp";
 import { serialize } from "cookie";
 import { createProxyServer } from "http-proxy";
 import { parse as parse$1 } from "set-cookie-parser";
+import { M as MakeswiftComponentType } from "./constants.es.js";
 import { v4 } from "uuid";
 import ipsum from "corporate-ipsum";
+function is(x, y) {
+  if (x === y)
+    return x !== 0 || y !== 0 || 1 / x === 1 / y;
+  return x !== x && y !== y;
+}
+const { hasOwnProperty: hasOwnProperty$1 } = Object.prototype;
+const shallowEqual = (a, b) => {
+  if (is(a, b))
+    return true;
+  if (typeof a !== "object" || a === null || typeof b !== "object" || b === null)
+    return false;
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  if (keysA.length !== keysB.length)
+    return false;
+  for (let i = 0; i < keysA.length; i += 1) {
+    if (!hasOwnProperty$1.call(b, keysA[i]) || !is(a[keysA[i]], b[keysA[i]]))
+      return false;
+  }
+  return true;
+};
+const { hasOwnProperty } = Object.prototype;
+const deepEqual = (a, b) => {
+  if (shallowEqual(a, b))
+    return true;
+  if (typeof a !== "object" || a === null || typeof b !== "object" || b === null)
+    return false;
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  if (keysA.length !== keysB.length)
+    return false;
+  for (let i = 0; i < keysA.length; i += 1) {
+    if (!hasOwnProperty.call(b, keysA[i]) || !deepEqual(a[keysA[i]], b[keysA[i]]))
+      return false;
+  }
+  return true;
+};
 const SCRIPT_TAG = "script";
 function BodySnippet({
   code,
@@ -113,43 +153,6 @@ function BodySnippet({
   }, [code, cleanup]);
   return null;
 }
-function is(x, y) {
-  if (x === y)
-    return x !== 0 || y !== 0 || 1 / x === 1 / y;
-  return x !== x && y !== y;
-}
-const { hasOwnProperty: hasOwnProperty$1 } = Object.prototype;
-const shallowEqual = (a, b) => {
-  if (is(a, b))
-    return true;
-  if (typeof a !== "object" || a === null || typeof b !== "object" || b === null)
-    return false;
-  const keysA = Object.keys(a);
-  const keysB = Object.keys(b);
-  if (keysA.length !== keysB.length)
-    return false;
-  for (let i = 0; i < keysA.length; i += 1) {
-    if (!hasOwnProperty$1.call(b, keysA[i]) || !is(a[keysA[i]], b[keysA[i]]))
-      return false;
-  }
-  return true;
-};
-const { hasOwnProperty } = Object.prototype;
-const deepEqual = (a, b) => {
-  if (shallowEqual(a, b))
-    return true;
-  if (typeof a !== "object" || a === null || typeof b !== "object" || b === null)
-    return false;
-  const keysA = Object.keys(a);
-  const keysB = Object.keys(b);
-  if (keysA.length !== keysB.length)
-    return false;
-  for (let i = 0; i < keysA.length; i += 1) {
-    if (!hasOwnProperty.call(b, keysA[i]) || !deepEqual(a[keysA[i]], b[keysA[i]]))
-      return false;
-  }
-  return true;
-};
 function getInitialState(serializedState = {
   Swatch: [],
   File: [],
@@ -278,15 +281,6 @@ class GraphQLClient {
     return body.data;
   }
 }
-const SwatchFragment = `
-  fragment Swatch on Swatch {
-    __typename
-    id
-    hue
-    saturation
-    lightness
-  }
-`;
 const FileFragment = `
   fragment File on File {
     __typename
@@ -370,16 +364,7 @@ const TableFragment = `
   }
 `;
 const IntrospectedResourcesQuery = `
-  query IntrospectedResources(
-    $swatchIds: [ID!]!
-    $fileIds: [ID!]!
-    $pageIds: [ID!]!
-    $tableIds: [ID!]!
-  ) {
-    swatches(ids: $swatchIds) {
-      ...Swatch
-    }
-
+  query IntrospectedResources($fileIds: [ID!]!, $pageIds: [ID!]!, $tableIds: [ID!]!) {
     files(ids: $fileIds) {
       ...File
     }
@@ -393,20 +378,10 @@ const IntrospectedResourcesQuery = `
     }
   }
 
-  ${SwatchFragment}
   ${FileFragment}
   ${PagePathnameSliceFragment}
   ${TableFragment}
 `;
-const SwatchQuery = `
-  query Swatch($swatchId: ID!) {
-    swatch(id: $swatchId) {
-      ...Swatch
-    }
-  }
-
-  ${SwatchFragment}
-`;
 const FileQuery = `
   query File($fileId: ID!) {
     file(id: $fileId) {
@@ -755,12 +730,120 @@ function useCachedSite(siteId) {
   const site = useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot);
   return site;
 }
+const makeswiftSiteVersionSchema = z.enum(["Live", "Working"]);
+const MakeswiftSiteVersion = makeswiftSiteVersionSchema.Enum;
+const makeswiftPreviewDataSchema = z.object({
+  makeswift: z.literal(true),
+  unstable_siteVersion: makeswiftSiteVersionSchema
+});
+function getMakeswiftSiteVersion(previewData) {
+  const result = makeswiftPreviewDataSchema.safeParse(previewData);
+  if (result.success)
+    return result.data.unstable_siteVersion;
+  return null;
+}
+function PreviewModeScript({
+  isPreview = false,
+  appOrigin = "https://app.makeswift.com"
+}) {
+  const previewModeScript = `
+const isPreview = ${isPreview}
+const appOrigin = '${appOrigin.replace("'", "\\'")}'
+const searchParamName = 'x-makeswift-preview-mode'
+const headerName = 'X-Makeswift-Preview-Mode'
+const originalUrl = new URL(window.location.href)
+
+if (window.parent !== window) {
+  window.addEventListener('message', event => {
+    if (event.origin === appOrigin && event.data.type === 'makeswift_preview_mode') {
+      const { secret } = event.data
+
+      if (!isPreview && !originalUrl.searchParams.has(searchParamName)) {
+        const url = new URL(originalUrl)
+
+        url.searchParams.set(searchParamName, secret)
+
+        window.location.replace(url)
+      } else {
+        const originalFetch = window.fetch
+
+        window.fetch = function patchedFetch(resource, options) {
+          const request = new Request(resource, options)
+
+          if (new URL(request.url).origin !== window.location.origin) {
+            return originalFetch.call(this, resource, options)
+          }
+
+          return originalFetch.call(
+            this,
+            new Request(request, { headers: { [headerName]: secret } }),
+          )
+        }
+      }
+    }
+  })
+
+  window.parent.postMessage({ type: 'makeswift_preview_mode' }, appOrigin)
+}
+
+if (originalUrl.searchParams.has(searchParamName)) {
+  const url = new URL(originalUrl)
+
+  url.searchParams.delete(searchParamName)
+
+  window.history.replaceState(null, '', url)
+}
+`;
+  const makeswiftConnectionCheckScript = `
+const appOrigin = '${appOrigin.replace("'", "\\'")}'
+
+if (window.parent !== window) {
+  window.addEventListener('message', event => {
+    if (
+      event.origin === appOrigin && 
+      event.data.type === '${ActionTypes.MAKESWIFT_CONNECTION_INIT}'
+    ) {
+      setInterval(() => {
+        window.parent.postMessage({ 
+          type: '${ActionTypes.MAKESWIFT_CONNECTION_CHECK}',
+          payload: { 
+            currentUrl: window.location.href 
+          }
+        }, appOrigin)
+      }, 20)
+    }
+  })
+
+  window.parent.postMessage({ type: '${ActionTypes.MAKESWIFT_CONNECTION_INIT}' }, appOrigin)
+}
+`;
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx("script", {
+      id: "makeswift-preview-mode",
+      type: "module",
+      dangerouslySetInnerHTML: {
+        __html: previewModeScript
+      }
+    }), /* @__PURE__ */ jsx("script", {
+      id: "makeswift-connection-check",
+      type: "module",
+      dangerouslySetInnerHTML: {
+        __html: makeswiftConnectionCheckScript
+      }
+    })]
+  });
+}
 class Makeswift {
-  constructor(apiKey, { apiOrigin = "https://api.makeswift.com", runtime } = {}) {
+  constructor(apiKey, {
+    apiOrigin = "https://api.makeswift.com",
+    runtime = ReactRuntime,
+    unstable_previewData
+  } = {}) {
     __publicField(this, "apiKey");
     __publicField(this, "apiOrigin");
     __publicField(this, "graphqlClient");
     __publicField(this, "runtime");
+    __publicField(this, "siteVersion");
     if (typeof apiKey !== "string") {
       throw new Error(`The Makeswift client must be passed a valid Makeswift site API key: \`new Makeswift('<makeswift_site_api_key>')\`
 Received "${apiKey}" instead.`);
@@ -773,17 +856,27 @@ Received "${apiKey}" instead.`);
     }
     this.graphqlClient = new GraphQLClient(new URL("graphql", apiOrigin).href);
     this.runtime = runtime;
+    this.siteVersion = getMakeswiftSiteVersion(unstable_previewData);
   }
   async fetch(path, init) {
+    var _a;
     const response = await fetch(new URL(path, this.apiOrigin).toString(), __spreadProps(__spreadValues({}, init), {
-      headers: __spreadProps(__spreadValues({}, init == null ? void 0 : init.headers), { ["X-API-Key"]: this.apiKey })
+      headers: __spreadValues({
+        ["X-API-Key"]: this.apiKey,
+        "Makeswift-Site-API-Key": this.apiKey,
+        "Makeswift-Site-Version": (_a = this.siteVersion) != null ? _a : MakeswiftSiteVersion.Live
+      }, init == null ? void 0 : init.headers)
     }));
     return response;
   }
-  async getPages(params = {}) {
-    const searchParams = new URLSearchParams(params);
-    const response = await this.fetch(`/v1/pages?${searchParams}`);
+  async getPages() {
+    const response = await this.fetch(`/v2/pages`, {
+      headers: {
+        "Makeswift-Site-Version": MakeswiftSiteVersion.Live
+      }
+    });
     if (!response.ok) {
+      console.error("Failed to get pages", await response.json());
       throw new Error(`Failed to get pages with error: "${response.statusText}"`);
     }
     const json = await response.json();
@@ -793,13 +886,35 @@ Received "${apiKey}" instead.`);
     const result = await this.graphqlClient.request(TypographiesQuery, { typographyIds });
     return result.typographies;
   }
-  async getIntrospectedResources(introspectedResourceIds) {
+  async getSwatches(ids, preview) {
+    var _a;
+    const url = new URL(`v1/swatches/bulk`, this.apiOrigin);
+    ids.forEach((id) => {
+      url.searchParams.append("ids", id);
+    });
+    const response = await this.fetch(url.pathname + url.search, {
+      headers: {
+        "Makeswift-Site-Version": (_a = this.siteVersion) != null ? _a : preview ? MakeswiftSiteVersion.Working : MakeswiftSiteVersion.Live
+      }
+    });
+    if (!response.ok) {
+      console.error("Failed to get swatches", await response.json());
+      return [];
+    }
+    return await response.json();
+  }
+  async getIntrospectedResources(_a, preview) {
+    var _b = _a, {
+      swatchIds
+    } = _b, introspectedResourceIds = __objRest(_b, [
+      "swatchIds"
+    ]);
     const result = await this.graphqlClient.request(IntrospectedResourcesQuery, introspectedResourceIds);
-    return result;
+    const swatches = await this.getSwatches(swatchIds, preview);
+    return __spreadProps(__spreadValues({}, result), { swatches });
   }
-  async introspect(element) {
-    var _a;
-    const runtime = (_a = this.runtime) != null ? _a : ReactRuntime;
+  async introspect(element, preview) {
+    const runtime = this.runtime;
     const descriptors = getPropControllerDescriptors(runtime.store.getState());
     const swatchIds = /* @__PURE__ */ new Set();
     const fileIds = /* @__PURE__ */ new Set();
@@ -875,8 +990,8 @@ Received "${apiKey}" instead.`);
     const typographies = await this.getTypographies([...typographyIds]);
     typographies.forEach((typography) => {
       typography == null ? void 0 : typography.style.forEach((style) => {
-        var _a2;
-        const swatchId = (_a2 = style.value.color) == null ? void 0 : _a2.swatchId;
+        var _a;
+        const swatchId = (_a = style.value.color) == null ? void 0 : _a.swatchId;
         if (swatchId != null)
           swatchIds.add(swatchId);
       });
@@ -886,44 +1001,44 @@ Received "${apiKey}" instead.`);
       fileIds: [...fileIds],
       tableIds: [...tableIds],
       pageIds: [...pageIds]
-    });
+    }, preview);
     const pagePathnameSlices = pagePathnamesById.map((pagePathnameSlice) => pagePathnameSlice && __spreadProps(__spreadValues({}, pagePathnameSlice), {
       id: Buffer.from(`Page:${pagePathnameSlice.id}`).toString("base64")
     }));
     return {
       [APIResourceType.Swatch]: [...swatchIds].map((id) => {
-        var _a2;
+        var _a;
         return {
           id,
-          value: (_a2 = swatches.find((swatch) => (swatch == null ? void 0 : swatch.id) === id)) != null ? _a2 : null
+          value: (_a = swatches.find((swatch) => (swatch == null ? void 0 : swatch.id) === id)) != null ? _a : null
         };
       }),
       [APIResourceType.File]: [...fileIds].map((id) => {
-        var _a2;
+        var _a;
         return {
           id,
-          value: (_a2 = files.find((file) => (file == null ? void 0 : file.id) === id)) != null ? _a2 : null
+          value: (_a = files.find((file) => (file == null ? void 0 : file.id) === id)) != null ? _a : null
         };
       }),
       [APIResourceType.Typography]: [...typographyIds].map((id) => {
-        var _a2;
+        var _a;
         return {
           id,
-          value: (_a2 = typographies.find((typography) => (typography == null ? void 0 : typography.id) === id)) != null ? _a2 : null
+          value: (_a = typographies.find((typography) => (typography == null ? void 0 : typography.id) === id)) != null ? _a : null
         };
       }),
       [APIResourceType.Table]: [...tableIds].map((id) => {
-        var _a2;
+        var _a;
         return {
           id,
-          value: (_a2 = tables.find((table) => (table == null ? void 0 : table.id) === id)) != null ? _a2 : null
+          value: (_a = tables.find((table) => (table == null ? void 0 : table.id) === id)) != null ? _a : null
         };
       }),
       [APIResourceType.PagePathnameSlice]: [...pageIds].map((id) => {
-        var _a2;
+        var _a;
         return {
           id,
-          value: (_a2 = pagePathnameSlices.find((pagePathnameSlice) => (pagePathnameSlice == null ? void 0 : pagePathnameSlice.id) === id)) != null ? _a2 : null
+          value: (_a = pagePathnameSlices.find((pagePathnameSlice) => (pagePathnameSlice == null ? void 0 : pagePathnameSlice.id) === id)) != null ? _a : null
         };
       }),
       [APIResourceType.GlobalElement]: [...globalElements.entries()].map(([id, value]) => ({
@@ -932,31 +1047,33 @@ Received "${apiKey}" instead.`);
       }))
     };
   }
-  async createSnapshot(document2, preview) {
-    const cacheData = await this.introspect(document2.data);
-    return { document: document2, apiOrigin: this.apiOrigin.href, cacheData, preview };
-  }
-  async getPageSnapshotByPageId(pageId, { preview = false } = {}) {
-    const searchParams = new URLSearchParams({ preview: String(preview) });
-    const response = await this.fetch(`/v1/pages/${pageId}/document?${searchParams}`);
+  async getPageSnapshot(pathname, { preview: previewOverride = false } = {}) {
+    var _a;
+    const siteVersion = (_a = this.siteVersion) != null ? _a : previewOverride ? MakeswiftSiteVersion.Working : MakeswiftSiteVersion.Live;
+    const response = await this.fetch(`/v2/pages/${encodeURIComponent(pathname)}/document`, {
+      headers: { "Makeswift-Site-Version": siteVersion }
+    });
     if (!response.ok) {
       if (response.status === 404)
         return null;
-      throw new Error(`Failed to get snapshot with error: "${response.statusText}"`);
+      console.error("Failed to get page snapshot", await response.json());
+      throw new Error(`Failed to get page snapshot with error: "${response.statusText}"`);
     }
     const document2 = await response.json();
-    return await this.createSnapshot(document2, preview);
-  }
-  async getPageSnapshot(path, { preview } = {}) {
-    const [page] = await this.getPages({ path });
-    if (page == null)
-      return null;
-    const snapshot = this.getPageSnapshotByPageId(page.id, { preview });
-    return snapshot;
+    const cacheData = await this.introspect(document2.data, previewOverride);
+    const apiOrigin = this.apiOrigin.href;
+    const preview = siteVersion === MakeswiftSiteVersion.Working;
+    return { document: document2, cacheData, apiOrigin, preview };
   }
   async getSwatch(swatchId) {
-    const result = await this.graphqlClient.request(SwatchQuery, { swatchId });
-    return result.swatch;
+    const response = await this.fetch(`v1/swatches/${swatchId}`);
+    if (!response.ok) {
+      if (response.status !== 404)
+        console.error("Failed to get swatch", await response.json());
+      return null;
+    }
+    const swatch = await response.json();
+    return swatch;
   }
   async getFile(fileId) {
     const result = await this.graphqlClient.request(FileQuery, { fileId });
@@ -980,97 +1097,6 @@ Received "${apiKey}" instead.`);
     return result.table;
   }
 }
-function PreviewModeScript({
-  isPreview = false,
-  appOrigin = "https://app.makeswift.com"
-}) {
-  const previewModeScript = `
-const isPreview = ${isPreview}
-const appOrigin = '${appOrigin.replace("'", "\\'")}'
-const searchParamName = 'x-makeswift-preview-mode'
-const headerName = 'X-Makeswift-Preview-Mode'
-const originalUrl = new URL(window.location.href)
-
-if (window.parent !== window) {
-  window.addEventListener('message', event => {
-    if (event.origin === appOrigin && event.data.type === 'makeswift_preview_mode') {
-      const { secret } = event.data
-
-      if (!isPreview && !originalUrl.searchParams.has(searchParamName)) {
-        const url = new URL(originalUrl)
-
-        url.searchParams.set(searchParamName, secret)
-
-        window.location.replace(url)
-      } else {
-        const originalFetch = window.fetch
-
-        window.fetch = function patchedFetch(resource, options) {
-          const request = new Request(resource, options)
-
-          if (new URL(request.url).origin !== window.location.origin) {
-            return originalFetch.call(this, resource, options)
-          }
-
-          return originalFetch.call(
-            this,
-            new Request(request, { headers: { [headerName]: secret } }),
-          )
-        }
-      }
-    }
-  })
-
-  window.parent.postMessage({ type: 'makeswift_preview_mode' }, appOrigin)
-}
-
-if (originalUrl.searchParams.has(searchParamName)) {
-  const url = new URL(originalUrl)
-
-  url.searchParams.delete(searchParamName)
-
-  window.history.replaceState(null, '', url)
-}
-`;
-  const makeswiftConnectionCheckScript = `
-const appOrigin = '${appOrigin.replace("'", "\\'")}'
-
-if (window.parent !== window) {
-  window.addEventListener('message', event => {
-    if (
-      event.origin === appOrigin && 
-      event.data.type === '${ActionTypes.MAKESWIFT_CONNECTION_INIT}'
-    ) {
-      setInterval(() => {
-        window.parent.postMessage({ 
-          type: '${ActionTypes.MAKESWIFT_CONNECTION_CHECK}',
-          payload: { 
-            currentUrl: window.location.href 
-          }
-        }, appOrigin)
-      }, 20)
-    }
-  })
-
-  window.parent.postMessage({ type: '${ActionTypes.MAKESWIFT_CONNECTION_INIT}' }, appOrigin)
-}
-`;
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [/* @__PURE__ */ jsx("script", {
-      id: "makeswift-preview-mode",
-      type: "module",
-      dangerouslySetInnerHTML: {
-        __html: previewModeScript
-      }
-    }), /* @__PURE__ */ jsx("script", {
-      id: "makeswift-connection-check",
-      type: "module",
-      dangerouslySetInnerHTML: {
-        __html: makeswiftConnectionCheckScript
-      }
-    })]
-  });
-}
 class Document$1 extends NextDocument {
   static async getInitialProps(ctx) {
     const initialProps = await NextDocument.getInitialProps(ctx);
@@ -1125,8 +1151,8 @@ async function fonts(_req, res, { getFonts } = {}) {
   const fonts2 = (_a = await (getFonts == null ? void 0 : getFonts())) != null ? _a : [];
   return res.json(fonts2);
 }
-const version = "0.8.10";
-async function handler(req, res, { apiKey }) {
+const version = "0.9.0";
+async function handler(req, res, { apiKey, unstable_siteVersions }) {
   if (req.query.secret !== apiKey) {
     return res.status(401).json({ message: "Unauthorized" });
   }
@@ -1136,7 +1162,8 @@ async function handler(req, res, { apiKey }) {
     interactionMode: true,
     clientSideNavigation: true,
     elementFromPoint: false,
-    customBreakpoints: true
+    customBreakpoints: true,
+    unstable_siteVersions
   });
 }
 async function proxyPreviewMode(req, res, { apiKey }) {
@@ -1167,7 +1194,11 @@ async function proxyPreviewMode(req, res, { apiKey }) {
   const proto = isForwardedProtoHttps || isForwardedSSL ? "https" : "http";
   let target = `${proto}://${host}`;
   const secure = process.env["NODE_ENV"] === "production";
-  const setCookie = res.setPreviewData({ makeswift: true }).getHeader("Set-Cookie");
+  const previewData = {
+    makeswift: true,
+    unstable_siteVersion: MakeswiftSiteVersion.Working
+  };
+  const setCookie = res.setPreviewData(previewData).getHeader("Set-Cookie");
   res.removeHeader("Set-Cookie");
   if (!Array.isArray(setCookie))
     return res.status(500).send("Internal Server Error");
@@ -1209,7 +1240,8 @@ Read more here: https://nextjs.org/blog/next-12-2#on-demand-incremental-static-r
 function MakeswiftApiHandler(apiKey, {
   appOrigin = "https://app.makeswift.com",
   apiOrigin = "https://api.makeswift.com",
-  getFonts
+  getFonts,
+  unstable_siteVersions = false
 } = {}) {
   const cors = Cors({ origin: appOrigin });
   if (typeof apiKey !== "string") {
@@ -1231,12 +1263,12 @@ Received "${apiKey}" instead.`);
 Received "${makeswift}" for the \`makeswift\` param instead.
 Read more about dynamic catch-all routes here: https://nextjs.org/docs/routing/dynamic-routes#catch-all-routes`);
     }
-    const client = new Makeswift(apiKey, { apiOrigin });
+    const client = new Makeswift(apiKey, { apiOrigin, unstable_previewData: req.previewData });
     const action = "/" + makeswift.join("/");
     const matches = (pattern) => match(pattern, { decode: decodeURIComponent })(action);
     let m;
     if (matches("/manifest"))
-      return handler(req, res, { apiKey });
+      return handler(req, res, { apiKey, unstable_siteVersions });
     if (matches("/revalidate"))
       return revalidate(req, res, { apiKey });
     if (matches("/proxy-preview-mode"))
@@ -1273,10 +1305,10 @@ function saveForwardedRef(props, ref) {
     [FORWARDED_NEXT_DYNAMIC_REF_KEY]: ref
   });
 }
-function loadForwardedRef(_a) {
-  var _b = _a, {
+function loadForwardedRef(_c) {
+  var _d = _c, {
     [FORWARDED_NEXT_DYNAMIC_REF_KEY]: ref
-  } = _b, props = __objRest(_b, [
+  } = _d, props = __objRest(_d, [
     __restKey(FORWARDED_NEXT_DYNAMIC_REF_KEY)
   ]);
   return __spreadProps(__spreadValues({}, props), {
@@ -1339,14 +1371,15 @@ async function getStaticPaths() {
 }
 const REVALIDATE_SECONDS = 1;
 async function getStaticProps(ctx) {
-  var _a, _b, _c2;
+  var _a, _b, _c;
   deprecationWarning("getStaticProps");
   const makeswift = new Makeswift(getApiKey(), {
-    apiOrigin: getApiOrigin()
+    apiOrigin: getApiOrigin(),
+    unstable_previewData: ctx.previewData
   });
   const path = "/" + ((_b = (_a = ctx.params) == null ? void 0 : _a.path) != null ? _b : []).join("/");
   const snapshot = await makeswift.getPageSnapshot(path, {
-    preview: ((_c2 = ctx.previewData) == null ? void 0 : _c2.makeswift) === true
+    preview: ((_c = ctx.previewData) == null ? void 0 : _c.makeswift) === true
   });
   if (snapshot == null)
     return {
@@ -1364,7 +1397,8 @@ async function getServerSideProps(ctx) {
   var _a, _b;
   deprecationWarning("getServerSideProps");
   const makeswift = new Makeswift(getApiKey(), {
-    apiOrigin: getApiOrigin()
+    apiOrigin: getApiOrigin(),
+    unstable_previewData: ctx.previewData
   });
   const path = "/" + ((_b = (_a = ctx.params) == null ? void 0 : _a.path) != null ? _b : []).join("/");
   const snapshot = await makeswift.getPageSnapshot(path, {
@@ -1617,7 +1651,7 @@ function registerComponent$a(runtime) {
   return runtime.registerComponent(forwardNextDynamicRef((patch) => dynamic(() => patch(import("./Carousel.es.js")))), {
     type: MakeswiftComponentType.Carousel,
     label: "Carousel",
-    icon: "Carousel40",
+    icon: ComponentIcon.Carousel,
     props: {
       id: ElementID(),
       images: Images({
@@ -1715,7 +1749,7 @@ function registerComponent$9(runtime) {
   return runtime.registerComponent(forwardNextDynamicRef((patch) => dynamic(() => patch(import("./Countdown.es.js")))), {
     type: MakeswiftComponentType.Countdown,
     label: "Countdown",
-    icon: "Countdown40",
+    icon: ComponentIcon.Countdown,
     props: {
       id: ElementID(),
       date: Date$1(() => ({
@@ -1807,7 +1841,7 @@ function registerComponent$8(runtime) {
   return runtime.registerComponent(forwardNextDynamicRef((patch) => dynamic(() => patch(import("./Divider.es.js")))), {
     type: MakeswiftComponentType.Divider,
     label: "Divider",
-    icon: "Divider40",
+    icon: ComponentIcon.Divider,
     props: {
       id: ElementID(),
       variant: ResponsiveSelect({
@@ -1839,7 +1873,7 @@ function registerComponent$7(runtime) {
   return runtime.registerComponent(forwardNextDynamicRef((patch) => dynamic(() => patch(import("./Embed.es.js")))), {
     type: MakeswiftComponentType.Embed,
     label: "Embed",
-    icon: "Code40",
+    icon: ComponentIcon.Code,
     props: {
       id: ElementID(),
       html: TextArea({ label: "Code", rows: 20 }),
@@ -1876,7 +1910,7 @@ function registerComponent$6(runtime) {
   return runtime.registerComponent(forwardNextDynamicRef((patch) => dynamic(() => patch(import("./Form.es.js")))), {
     type: MakeswiftComponentType.Form,
     label: "Form",
-    icon: "Form40",
+    icon: ComponentIcon.Form,
     props: {
       id: ElementID(),
       tableId: Table(),
@@ -2021,7 +2055,7 @@ function registerComponent$4(runtime) {
   return runtime.registerComponent(forwardNextDynamicRef((patch) => dynamic(() => patch(import("./Navigation.es.js")))), {
     type: MakeswiftComponentType.Navigation,
     label: "Navigation",
-    icon: "Navigation40",
+    icon: ComponentIcon.Navigation,
     props: {
       id: ElementID(),
       links: NavigationLinks(),
@@ -2139,7 +2173,7 @@ function registerComponent$2(runtime) {
   return runtime.registerComponent(forwardNextDynamicRef((patch) => dynamic(() => patch(import("./SocialLinks.es.js")))), {
     type: MakeswiftComponentType.SocialLinks,
     label: "Social Links",
-    icon: "SocialLinks40",
+    icon: ComponentIcon.SocialLinks,
     props: {
       id: ElementID(),
       links: SocialLinks({
@@ -2346,7 +2380,7 @@ function registerComponent(runtime) {
   return runtime.registerComponent(forwardNextDynamicRef((patch) => dynamic(() => patch(import("./Video.es.js")))), {
     type: MakeswiftComponentType.Video,
     label: "Video",
-    icon: "Video40",
+    icon: ComponentIcon.Video,
     props: {
       id: ElementID(),
       video: Video({ preset: { controls: true } }),
@@ -2391,7 +2425,7 @@ function registerBuiltinComponents(runtime) {
 }
 const isServer = typeof window === "undefined";
 const useInsertionEffectSpecifier = "useInsertionEffect";
-const useInsertionEffect = (_c = React[useInsertionEffectSpecifier]) != null ? _c : React.useLayoutEffect;
+const useInsertionEffect = (_e = React[useInsertionEffectSpecifier]) != null ? _e : React.useLayoutEffect;
 function useStyle(style) {
   const serialized = serializeStyles([style], cache.registered);
   registerStyles(cache, serialized, false);
@@ -2545,8 +2579,8 @@ function useTable(tableId) {
   }, [client, tableId]);
   return table;
 }
-function mapSideColor(swatches, _d) {
-  var _e = _d, { color } = _e, restOfSide = __objRest(_e, ["color"]);
+function mapSideColor(swatches, _f) {
+  var _g = _f, { color } = _g, restOfSide = __objRest(_g, ["color"]);
   return __spreadProps(__spreadValues({}, restOfSide), {
     color: color && {
       alpha: color.alpha,
@@ -2642,10 +2676,10 @@ function lengthDataToString(data) {
   return data;
 }
 function paddingPropertyDataToStyle(data, defaultValue = {}) {
-  var _a, _b, _c2, _d;
+  var _a, _b, _c, _d;
   const paddingTop = (_a = data.paddingTop) != null ? _a : defaultValue.paddingTop;
   const paddingRight = (_b = data.paddingRight) != null ? _b : defaultValue.paddingRight;
-  const paddingBottom = (_c2 = data.paddingBottom) != null ? _c2 : defaultValue.paddingBottom;
+  const paddingBottom = (_c = data.paddingBottom) != null ? _c : defaultValue.paddingBottom;
   const paddingLeft = (_d = data.paddingLeft) != null ? _d : defaultValue.paddingLeft;
   const style = {};
   if (paddingTop != null)
@@ -2659,10 +2693,10 @@ function paddingPropertyDataToStyle(data, defaultValue = {}) {
   return style;
 }
 function marginPropertyDataToStyle(data, defaultValue = {}) {
-  var _a, _b, _c2, _d;
+  var _a, _b, _c, _d;
   const marginTop = (_a = data.marginTop) != null ? _a : defaultValue.marginTop;
   const marginRight = (_b = data.marginRight) != null ? _b : defaultValue.marginRight;
-  const marginBottom = (_c2 = data.marginBottom) != null ? _c2 : defaultValue.marginBottom;
+  const marginBottom = (_c = data.marginBottom) != null ? _c : defaultValue.marginBottom;
   const marginLeft = (_d = data.marginLeft) != null ? _d : defaultValue.marginLeft;
   const style = {};
   if (marginTop != null)
@@ -2683,10 +2717,10 @@ function lengthPercentageDataToString(data) {
   return data;
 }
 function borderRadiusPropertyDataToStyle(data, defaultValue = {}) {
-  var _a, _b, _c2, _d;
+  var _a, _b, _c, _d;
   const borderTopLeftRadius = (_a = data.borderTopLeftRadius) != null ? _a : defaultValue.borderTopLeftRadius;
   const borderTopRightRadius = (_b = data.borderTopRightRadius) != null ? _b : defaultValue.borderTopRightRadius;
-  const borderBottomRightRadius = (_c2 = data.borderBottomRightRadius) != null ? _c2 : defaultValue.borderBottomRightRadius;
+  const borderBottomRightRadius = (_c = data.borderBottomRightRadius) != null ? _c : defaultValue.borderBottomRightRadius;
   const borderBottomLeftRadius = (_d = data.borderBottomLeftRadius) != null ? _d : defaultValue.borderBottomLeftRadius;
   const style = {};
   if (borderTopLeftRadius != null) {
@@ -2707,10 +2741,10 @@ function colorToString(color) {
   return color && color.swatch ? `hsla(${color.swatch.hue},${color.swatch.saturation}%,${color.swatch.lightness}%,${color.alpha})` : "";
 }
 function borderPropertyDataToStyle(data, defaultValue = {}) {
-  var _a, _b, _c2, _d;
+  var _a, _b, _c, _d;
   const borderTop = (_a = data.borderTop) != null ? _a : defaultValue.borderTop;
   const borderRight = (_b = data.borderRight) != null ? _b : defaultValue.borderRight;
-  const borderBottom = (_c2 = data.borderBottom) != null ? _c2 : defaultValue.borderBottom;
+  const borderBottom = (_c = data.borderBottom) != null ? _c : defaultValue.borderBottom;
   const borderLeft = (_d = data.borderLeft) != null ? _d : defaultValue.borderLeft;
   const style = {};
   if (borderTop != null)
@@ -2876,14 +2910,14 @@ function useStyleControlCssObject(style, controlDefinition) {
     style == null ? void 0 : style.borderRadius,
     style == null ? void 0 : style.textStyle
   ], ([width, margin, padding, border, borderRadius, textStyle]) => {
-    var _a, _b, _c2, _d, _e, _f, _g, _h, _i, _j, _k;
+    var _a, _b, _c, _d, _e2, _f, _g, _h, _i, _j, _k;
     return __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, properties.includes(StyleControlProperty.Width) && {
       width: (_a = widthToString(width)) != null ? _a : "100%"
     }), properties.includes(StyleControlProperty.Margin) && marginPropertyDataToStyle(margin != null ? margin : defaultMargin, defaultMargin)), properties.includes(StyleControlProperty.Padding) && paddingPropertyDataToStyle(padding != null ? padding : defaultPadding, defaultPadding)), properties.includes(StyleControlProperty.Border) && {
       borderTop: (_b = borderSideToString2(border == null ? void 0 : border.borderTop)) != null ? _b : "0 solid black",
-      borderRight: (_c2 = borderSideToString2(border == null ? void 0 : border.borderRight)) != null ? _c2 : "0 solid black",
+      borderRight: (_c = borderSideToString2(border == null ? void 0 : border.borderRight)) != null ? _c : "0 solid black",
       borderBottom: (_d = borderSideToString2(border == null ? void 0 : border.borderBottom)) != null ? _d : "0 solid black",
-      borderLeft: (_e = borderSideToString2(border == null ? void 0 : border.borderLeft)) != null ? _e : "0 solid black"
+      borderLeft: (_e2 = borderSideToString2(border == null ? void 0 : border.borderLeft)) != null ? _e2 : "0 solid black"
     }), properties.includes(StyleControlProperty.BorderRadius) && {
       borderTopLeftRadius: (_f = borderRadiusToString(borderRadius == null ? void 0 : borderRadius.borderTopLeftRadius)) != null ? _f : 0,
       borderTopRightRadius: (_g = borderRadiusToString(borderRadius == null ? void 0 : borderRadius.borderTopRightRadius)) != null ? _g : 0,
@@ -3075,7 +3109,7 @@ function ListControlValue({
 function useNumber(numberControlData, controlDefinition) {
   return numberControlData != null ? numberControlData : controlDefinition.config.defaultValue;
 }
-const Text = forwardNextDynamicRef((patch) => dynamic(() => patch(import("./index.es7.js"))));
+const Text = forwardNextDynamicRef((patch) => dynamic(() => patch(import("./index.es8.js"))));
 function useRichText(data, control) {
   const textCallbackRef = useCallback((handle) => {
     var _a;
@@ -3089,7 +3123,7 @@ function useRichText(data, control) {
     ref: textCallbackRef
   });
 }
-const EditableText = forwardNextDynamicRef((patch) => dynamic(() => patch(import("./index.es8.js"))));
+const EditableText = forwardNextDynamicRef((patch) => dynamic(() => patch(import("./index.es9.js"))));
 const ReadOnlyText = forwardNextDynamicRef((patch) => dynamic(() => patch(import("./ReadOnlyTextV2.es.js"))));
 function useRichTextV2(data, control) {
   const isPreview = useIsPreview();
@@ -3097,7 +3131,8 @@ function useRichTextV2(data, control) {
     text: data,
     control
   }) : /* @__PURE__ */ jsx(ReadOnlyText, {
-    text: data
+    text: data,
+    control
   });
 }
 function useSelectControlValue(data, definition) {
@@ -3155,13 +3190,13 @@ function useSlot(data, control) {
     }, element.key))
   });
 }
-function Slot(_f) {
-  var _g = _f, {
+function Slot(_h) {
+  var _i = _h, {
     as,
     control,
     children,
     className
-  } = _g, restOfProps = __objRest(_g, [
+  } = _i, restOfProps = __objRest(_i, [
     "as",
     "control",
     "children",
@@ -3190,15 +3225,15 @@ function Slot(_f) {
 }
 Slot.Placeholder = SlotPlaceholder;
 Slot.Item = SlotItem;
-function SlotItem(_h) {
-  var _i = _h, {
+function SlotItem(_j) {
+  var _k = _j, {
     as,
     control,
     grid,
     index,
     children,
     className
-  } = _i, restOfProps = __objRest(_i, [
+  } = _k, restOfProps = __objRest(_k, [
     "as",
     "control",
     "grid",
@@ -3424,7 +3459,7 @@ function PropsValue({
     return getPropControllers(state, documentKey, element.key);
   });
   return Object.entries(propControllerDescriptorsRef.current).reduceRight((renderFn, [propName, descriptor]) => (propsValue) => {
-    var _a2, _b, _c2, _d;
+    var _a2, _b, _c, _d;
     switch (descriptor.type) {
       case CheckboxControlType:
       case NumberControlType:
@@ -3466,7 +3501,7 @@ function PropsValue({
         }, descriptor.type);
       }
       case RichTextV2ControlType: {
-        const control = (_c2 = propControllers == null ? void 0 : propControllers[propName]) != null ? _c2 : null;
+        const control = (_c = propControllers == null ? void 0 : propControllers[propName]) != null ? _c : null;
         return /* @__PURE__ */ jsx(RenderHook, {
           hook: useRichTextV2,
           parameters: [props[propName], control],
@@ -3660,18 +3695,22 @@ function isDomNodeHandle(value) {
 }
 class ReactRuntime {
   constructor({
-    breakpoints
-  }) {
+    breakpoints,
+    unstable_i18n
+  } = {}) {
     __publicField(this, "store");
     this.store = configureStore$1({
-      breakpoints: breakpoints ? parseBreakpointsInput(breakpoints) : void 0
+      breakpoints: breakpoints ? parseBreakpointsInput(breakpoints) : void 0,
+      locales: unstable_i18n ? __spreadProps(__spreadValues({}, unstable_i18n), {
+        locale: null
+      }) : void 0
     });
     registerBuiltinComponents(this);
   }
   static registerComponent(component, {
     type,
     label,
-    icon = "Cube40",
+    icon = ComponentIcon.Code,
     hidden = false,
     props
   }) {
@@ -3695,7 +3734,7 @@ class ReactRuntime {
   registerComponent(component, {
     type,
     label,
-    icon = "Cube40",
+    icon = ComponentIcon.Cube,
     hidden = false,
     props
   }) {
@@ -3722,10 +3761,10 @@ registerBuiltinComponents(ReactRuntime);
 const StoreContext = createContext(ReactRuntime.store);
 const PreviewProvider = dynamic(() => import("./PreviewProvider.es.js"));
 const LiveProvider = dynamic(() => import("./LiveProvider.es.js"));
-function RuntimeProvider(_j) {
-  var _k = _j, {
+function RuntimeProvider(_l) {
+  var _m = _l, {
     preview
-  } = _k, props = __objRest(_k, [
+  } = _m, props = __objRest(_m, [
     "preview"
   ]);
   return preview ? /* @__PURE__ */ jsx(PreviewProvider, __spreadValues({}, props)) : /* @__PURE__ */ jsx(LiveProvider, __spreadValues({}, props));