@makeswift/runtime 0.3.1 → 0.4.1

package/dist/index.es.js

@@ -36,21 +36,22 @@ var __publicField = (obj, key, value) => {
 };
 var _c;
 import * as React from "react";
-import { useEffect, createContext, useContext, useState, useMemo, useRef, Children, createElement, forwardRef, memo, useLayoutEffect, useCallback, Component, useImperativeHandle } from "react";
+import { useEffect, createContext, useContext, useState, useMemo, useRef, Children, createElement, forwardRef, memo, useLayoutEffect, useCallback, Component, useImperativeHandle, Suspense } from "react";
 import { useSyncExternalStoreWithSelector } from "use-sync-external-store/shim/with-selector";
-import { g as getPropControllerDescriptors, i as isElementReference, a as getElementSwatchIds, b as getFileIds, d as getTypographyIds, e as getTableIds, f as getPageIds, h as getElementChildren, j as createDocumentReference, k as getComponentPropControllerDescriptors, l as getPropControllers, m as configureStore, n as getDocument, o as getElementId, p as getIsInBuilder, q as copyElementTree, c as createDocument, r as getReactComponent } from "./react-page.es.js";
-import { f as registerDocumentEffect, g as registerComponentHandleEffect, h as mountComponentEffect, j as registerComponentEffect, k as registerReactComponentEffect } from "./actions.es.js";
+import { g as getPropControllerDescriptors, i as isElementReference, a as getElementSwatchIds, b as getFileIds, d as getTypographyIds, e as getTableIds, f as getPageIds, h as getElementChildren, j as createDocumentReference, k as getBorderSwatchIds, l as isNonNullable, m as getBoxShadowsSwatchIds, n as getResponsiveColorSwatchIds, o as getComponentPropControllerDescriptors, p as getPropControllers, q as configureStore$1, r as getDocument, s as getElementId, t as getIsInBuilder, u as copyElementTree, c as createDocument, v as getReactComponent } from "./react-page.es.js";
+import { A as ActionTypes, f as introspectedResourcesFulfilled, g as apiResourceFulfilled, t as typographiesFulfilled, h as restoreAPIResourcesCache, j as registerDocumentEffect, k as registerComponentHandleEffect, l as mountComponentEffect, n as registerComponentEffect, o as registerReactComponentEffect } from "./actions.es.js";
 import dynamic from "next/dynamic";
-import { gql, useQuery as useQuery$1, useMutation as useMutation$1, ApolloClient, InMemoryCache } from "@apollo/client";
-import { BatchHttpLink } from "@apollo/client/link/batch-http";
 import { KeyUtils } from "slate";
-import { P as PagePathnameSliceFragmentDoc } from "./graphql.es.js";
 import { T as Types, E as ElementID, B as Backgrounds, W as Width, h as ResponsiveIconRadioGroup, M as Margin, P as Padding, i as Border, j as BorderRadius, k as Shadows, G as GapY, l as GapX, m as ResponsiveSelect, n as ResponsiveNumber, o as Checkbox, p as Grid, q as TextInput, L as Link, r 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, I as ImageControlType, C as ColorControlType, Q as BorderPropControllerFormat, U as ShadowsPropControllerFormat, X as BorderRadiusPropControllerFormat, Y as MarginPropControllerFormat, Z as PaddingPropControllerFormat, _ as WidthPropControllerFormat, S as SlotControlType, a as StyleControlType } from "./slot.es.js";
 import { S as ShapeControlType, L as ListControlType, b as LinkControlType } from "./control.es.js";
+import { createStore, applyMiddleware } from "redux";
+import thunk from "redux-thunk";
+import { A as APIResourceType } from "./types.es.js";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { cache, cx } from "@emotion/css";
 import { S as SelectControlType, 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 { useSyncExternalStore } from "use-sync-external-store/shim";
 import ColorHelper from "color";
 import scrollIntoView from "scroll-into-view-if-needed";
 import { g as getBox } from "./box-models.es.js";
@@ -109,182 +110,7 @@ function BodySnippet({
   }, [code, cleanup]);
   return null;
 }
-const SWATCHES_BY_ID = gql`
-  query SwatchesById($ids: [ID!]!) {
-    swatches(ids: $ids) {
-      id
-      hue
-      saturation
-      lightness
-    }
-  }
-`;
-const FILE_BY_ID = gql`
-  query FileById($id: ID!) {
-    file(id: $id) {
-      id
-      name
-      publicUrl
-      extension
-      dimensions {
-        width
-        height
-      }
-    }
-  }
-`;
-const FILES_BY_ID = gql`
-  query FilesById($ids: [ID!]!) {
-    files(ids: $ids) {
-      id
-      name
-      publicUrl
-      extension
-      dimensions {
-        width
-        height
-      }
-    }
-  }
-`;
-const PAGE_PATHNAMES_BY_ID = gql`
-  query PagePathnamesById($ids: [ID!]!) {
-    pagePathnamesById(ids: $ids) {
-      id
-      pathname
-    }
-  }
-`;
-const TYPOGRAPHY_FRAGMENT = gql`
-  fragment Typography on Typography {
-    id
-    name
-    style {
-      deviceId
-      value {
-        fontFamily
-        fontSize {
-          value
-          unit
-        }
-        color {
-          swatchId
-          alpha
-        }
-        lineHeight
-        letterSpacing
-        fontWeight
-        textAlign
-        uppercase
-        underline
-        strikethrough
-        italic
-      }
-    }
-  }
-`;
-const TYPOGRAPHIES_BY_ID = gql`
-  query TypographiesById($ids: [ID!]!) {
-    typographies(ids: $ids) {
-      ...Typography
-    }
-  }
-
-  ${TYPOGRAPHY_FRAGMENT}
-`;
-const TABLE_BY_ID = gql`
-  query TableById($id: ID!) {
-    table(id: $id) {
-      id
-      name
-      columns {
-        id
-        name
-        ... on MultipleSelectTableColumn {
-          options {
-            id
-            name
-          }
-        }
-        ... on SingleSelectTableColumn {
-          options {
-            id
-            name
-          }
-        }
-      }
-    }
-  }
-`;
-const ELEMENT_REFERENCE_GLOBAL_ELEMENT = gql`
-  query ElementReferenceGlobalElement($id: ID!) {
-    globalElement(id: $id) {
-      id
-      data
-    }
-  }
-`;
-const INTROSPECTION_QUERY = gql`
-  query Introspection(
-    $swatchIds: [ID!]!
-    $fileIds: [ID!]!
-    $pageIds: [ID!]!
-    $typographyIds: [ID!]!
-    $tableIds: [ID!]!
-  ) {
-    swatches(ids: $swatchIds) {
-      id
-      hue
-      saturation
-      lightness
-    }
-
-    files(ids: $fileIds) {
-      id
-      name
-      publicUrl
-      extension
-      dimensions {
-        width
-        height
-      }
-    }
-
-    pagePathnamesById(ids: $pageIds) {
-      id
-      pathname
-    }
-
-    typographies(ids: $typographyIds) {
-      ...Typography
-    }
-
-    tables(ids: $tableIds) {
-      id
-      name
-      columns {
-        id
-        name
-        ... on MultipleSelectTableColumn {
-          options {
-            id
-            name
-          }
-        }
-        ... on SingleSelectTableColumn {
-          options {
-            id
-            name
-          }
-        }
-      }
-    }
-  }
-
-  ${TYPOGRAPHY_FRAGMENT}
-`;
 async function introspect(element, client, store) {
-  var _a, _b, _c2;
   const descriptors = getPropControllerDescriptors(store.getState());
   const swatchIds = /* @__PURE__ */ new Set();
   const fileIds = /* @__PURE__ */ new Set();
@@ -336,11 +162,8 @@ async function introspect(element, client, store) {
     };
     let element2;
     if (isElementReference(current)) {
-      const query = await client.query({
-        query: ELEMENT_REFERENCE_GLOBAL_ELEMENT,
-        variables: { id: current.value }
-      });
-      const elementData = (_b = (_a = query.data) == null ? void 0 : _a.globalElement) == null ? void 0 : _b.data;
+      const globalElement = await client.fetchGlobalElement(current.value);
+      const elementData = globalElement == null ? void 0 : globalElement.data;
       if (elementData == null)
         continue;
       element2 = elementData;
@@ -352,14 +175,11 @@ async function introspect(element, client, store) {
       continue;
     getResourcesFromElementDescriptors(elementDescriptors, element2.props);
   }
-  const typographiesResult = await client.query({
-    query: TYPOGRAPHIES_BY_ID,
-    variables: { ids: [...typographyIds] }
-  });
-  (_c2 = typographiesResult == null ? void 0 : typographiesResult.data) == null ? void 0 : _c2.typographies.forEach((typography) => {
+  const typographies = await client.fetchTypographies([...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);
     });
@@ -372,157 +192,466 @@ async function introspect(element, client, store) {
     pageIds: [...pageIds]
   };
 }
-const typePolicies = {
-  Query: {
-    fields: {
-      swatches(existingData, {
-        args,
-        toReference
-      }) {
-        return existingData != null ? existingData : args == null ? void 0 : args.ids.map((id) => toReference({
-          __typename: "Swatch",
-          id
-        }, true));
-      },
-      file(existingData, {
-        args,
-        toReference
-      }) {
-        return existingData != null ? existingData : toReference({
-          __typename: "File",
-          id: args == null ? void 0 : args.id
-        }, true);
-      },
-      files(existingData, {
-        args,
-        toReference
-      }) {
-        return existingData != null ? existingData : args == null ? void 0 : args.ids.map((id) => toReference({
-          __typename: "File",
-          id
-        }, true));
-      },
-      typographies(existingData, {
-        args,
-        toReference
-      }) {
-        return existingData != null ? existingData : args == null ? void 0 : args.ids.map((id) => toReference({
-          __typename: "Typography",
+function getInitialState(serializedState = []) {
+  return new Map(serializedState.map(([resourceType, resources]) => [resourceType, new Map(resources)]));
+}
+function getSerializedState$1(state) {
+  return Array.from(state.entries()).map(([resourceType, resources]) => [
+    resourceType,
+    Array.from(resources.entries())
+  ]);
+}
+function getHasAPIResource$1(state, resourceType, resourceId) {
+  var _a, _b;
+  return (_b = (_a = state.get(resourceType)) == null ? void 0 : _a.has(resourceId)) != null ? _b : false;
+}
+function getAPIResource$1(state, resourceType, resourceId) {
+  var _a;
+  const resource = (_a = state.get(resourceType)) == null ? void 0 : _a.get(resourceId);
+  return (resource == null ? void 0 : resource.__typename) === resourceType ? resource : null;
+}
+function reducer$1(state = getInitialState(), action) {
+  switch (action.type) {
+    case ActionTypes.RESTORE_API_RESOURCES_CACHE:
+      return getInitialState(action.payload.serializedState);
+    case ActionTypes.API_RESOURCE_FULFILLED: {
+      const { resourceType, resourceId, resource } = action.payload;
+      return new Map(state).set(resourceType, new Map(state.get(resourceType)).set(resourceId, resource));
+    }
+    case ActionTypes.INTROSPECTED_RESOURCES_FULFILLED: {
+      const { introspectedResourceIds, introspectedResources } = action.payload;
+      const swatches = new Map(state.get(APIResourceType.Swatch));
+      const files = new Map(state.get(APIResourceType.File));
+      const typographies = new Map(state.get(APIResourceType.Typography));
+      const pagePathnameSlices = new Map(state.get(APIResourceType.PagePathnameSlice));
+      const tables = new Map(state.get(APIResourceType.Table));
+      introspectedResourceIds.swatchIds.forEach((swatchId, idx) => {
+        swatches.set(swatchId, introspectedResources.swatches[idx]);
+      });
+      introspectedResourceIds.fileIds.forEach((fileId, idx) => {
+        files.set(fileId, introspectedResources.files[idx]);
+      });
+      introspectedResourceIds.typographyIds.forEach((typographyId, idx) => {
+        typographies.set(typographyId, introspectedResources.typographies[idx]);
+      });
+      introspectedResourceIds.pageIds.forEach((pageId, idx) => {
+        const pagePathnameSlice = introspectedResources.pagePathnamesById[idx];
+        if (pagePathnameSlice == null) {
+          pagePathnameSlices.set(pageId, pagePathnameSlice);
+        } else {
+          const nodeId = Buffer.from(`Page:${pagePathnameSlice.id}`).toString("base64");
+          pagePathnameSlices.set(nodeId, __spreadProps(__spreadValues({}, pagePathnameSlice), { id: nodeId }));
+        }
+      });
+      introspectedResourceIds.tableIds.forEach((tableId, idx) => {
+        tables.set(tableId, introspectedResources.tables[idx]);
+      });
+      return new Map(state).set(APIResourceType.Swatch, swatches).set(APIResourceType.File, files).set(APIResourceType.Typography, typographies).set(APIResourceType.PagePathnameSlice, pagePathnameSlices).set(APIResourceType.Table, tables);
+    }
+    case ActionTypes.TYPOGRAPHIES_FULFILLED: {
+      const typographies = new Map(state.get(APIResourceType.Typography));
+      action.payload.typographyIds.forEach((typographyId, idx) => {
+        typographies.set(typographyId, action.payload.typographies[idx]);
+      });
+      return new Map(state).set(APIResourceType.Typography, typographies);
+    }
+    case ActionTypes.CHANGE_API_RESOURCE:
+      return new Map(state).set(action.payload.resource.__typename, new Map(state.get(action.payload.resource.__typename)).set(action.payload.resource.id, action.payload.resource));
+    case ActionTypes.EVICT_API_RESOURCE: {
+      const [resourceType, resourceId] = action.payload.id.split(":");
+      if (!(resourceType in APIResourceType))
+        return state;
+      const resources = new Map(state.get(resourceType));
+      const deleted = resources.delete(resourceId);
+      return deleted ? new Map(state).set(resourceType, resources) : state;
+    }
+    default:
+      return state;
+  }
+}
+const SwatchFragment = `
+  fragment Swatch on Swatch {
+    __typename
+    id
+    hue
+    saturation
+    lightness
+  }
+`;
+const FileFragment = `
+  fragment File on File {
+    __typename
+    id
+    name
+    publicUrl
+    extension
+    dimensions {
+      width
+      height
+    }
+  }
+`;
+const TypographyFragment = `
+  fragment Typography on Typography {
+    __typename
+    id
+    name
+    style {
+      deviceId
+      value {
+        fontFamily
+        fontSize {
+          value
+          unit
+        }
+        color {
+          swatchId
+          alpha
+        }
+        lineHeight
+        letterSpacing
+        fontWeight
+        textAlign
+        uppercase
+        underline
+        strikethrough
+        italic
+      }
+    }
+  }
+`;
+const PagePathnameSliceFragment = `
+  fragment PagePathnameSlice on PagePathnameSlice {
+    __typename
+    id
+    pathname
+  }
+`;
+const GlobalElementFragment = `
+  fragment GlobalElement on GlobalElement {
+    __typename
+    id
+    data
+  }
+`;
+const TableFragment = `
+  fragment Table on Table {
+    __typename
+    id
+    name
+    columns {
+      __typename
+      id
+      name
+
+      ... on MultipleSelectTableColumn {
+        options {
           id
-        }, true));
-      },
-      pagePathnamesById(existingData, {
-        args,
-        toReference
-      }) {
-        return existingData != null ? existingData : args == null ? void 0 : args.ids.map((id) => toReference({
-          __typename: "PagePathnameSlice",
+          name
+        }
+      }
+
+      ... on SingleSelectTableColumn {
+        options {
           id
-        }, true));
-      },
-      globalElement(existingData, {
-        args,
-        toReference
-      }) {
-        return existingData != null ? existingData : toReference({
-          __typename: "GlobalElement",
-          id: args == null ? void 0 : args.id
-        }, true);
-      },
-      table(existingData, {
-        args,
-        toReference
-      }) {
-        return existingData != null ? existingData : toReference({
-          __typename: "Table",
-          id: args == null ? void 0 : args.id
-        }, true);
-      },
-      page(existingData, {
-        args,
-        toReference
-      }) {
-        return existingData != null ? existingData : toReference({
-          __typename: "Page",
-          id: args == null ? void 0 : args.id
-        }, true);
-      },
-      site(existingData, {
-        args,
-        toReference
-      }) {
-        return existingData != null ? existingData : toReference({
-          __typename: "Site",
-          id: args == null ? void 0 : args.id
-        }, true);
+          name
+        }
       }
     }
   }
-};
-function createApolloClient({
-  uri,
-  cacheData
+`;
+const IntrospectedResourcesQuery = `
+  query IntrospectedResources(
+    $swatchIds: [ID!]!
+    $fileIds: [ID!]!
+    $typographyIds: [ID!]!
+    $pageIds: [ID!]!
+    $tableIds: [ID!]!
+  ) {
+    swatches(ids: $swatchIds) {
+      ...Swatch
+    }
+
+    files(ids: $fileIds) {
+      ...File
+    }
+
+    typographies(ids: $typographyIds) {
+      ...Typography
+    }
+
+    pagePathnamesById(ids: $pageIds) {
+      ...PagePathnameSlice
+    }
+
+    tables(ids: $tableIds) {
+      ...Table
+    }
+  }
+
+  ${SwatchFragment}
+  ${FileFragment}
+  ${TypographyFragment}
+  ${PagePathnameSliceFragment}
+  ${TableFragment}
+`;
+const SwatchQuery = `
+  query Swatch($swatchId: ID!) {
+    swatch(id: $swatchId) {
+      ...Swatch
+    }
+  }
+
+  ${SwatchFragment}
+`;
+const FileQuery = `
+  query File($fileId: ID!) {
+    file(id: $fileId) {
+      ...File
+    }
+  }
+
+  ${FileFragment}
+`;
+const TypographyQuery = `
+  query Typography($typographyId: ID!) {
+    typography(id: $typographyId) {
+      ...Typography
+    }
+  }
+
+  ${TypographyFragment}
+`;
+const PagePathnamesByIdQuery = `
+  query PagePathnamesById($pageIds: [ID!]!) {
+    pagePathnamesById(ids: $pageIds) {
+      ...PagePathnameSlice
+    }
+  }
+
+  ${PagePathnameSliceFragment}
+`;
+const TableQuery = `
+  query Table($tableId: ID!) {
+    table(id: $tableId) {
+      ...Table
+    }
+  }
+
+  ${TableFragment}
+`;
+const TypographiesQuery = `
+  query Typographies($typographyIds: [ID!]!) {
+    typographies(ids: $typographyIds) {
+      ...Typography
+    }
+  }
+
+  ${TypographyFragment}
+`;
+const GlobalElementQuery = `
+  query GlobalElement($globalElementId: ID!) {
+    globalElement(id: $globalElementId) {
+      ...GlobalElement
+    }
+  }
+
+  ${GlobalElementFragment}
+`;
+const CreateTableRecordMutation = `
+  mutation CreateTableRecord($input: CreateTableRecordInput!) {
+    createTableRecord(input: $input) {
+      tableRecord {
+        id
+      }
+    }
+  }
+`;
+const reducer = reducer$1;
+function getSerializedState(state) {
+  return getSerializedState$1(state);
+}
+function getHasAPIResource(state, resourceType, resourceId) {
+  return getHasAPIResource$1(state, resourceType, resourceId);
+}
+function getAPIResource(state, resourceType, resourceId) {
+  return getAPIResource$1(state, resourceType, resourceId);
+}
+function fetchAPIResource(resourceType, resourceId) {
+  return async (dispatch, getState, client) => {
+    var _a;
+    const state = getState();
+    if (getHasAPIResource(state, resourceType, resourceId)) {
+      return getAPIResource(state, resourceType, resourceId);
+    }
+    let resource;
+    switch (resourceType) {
+      case APIResourceType.Swatch:
+        resource = (await client.request(SwatchQuery, {
+          swatchId: resourceId
+        })).swatch;
+        break;
+      case APIResourceType.File:
+        resource = (await client.request(FileQuery, {
+          fileId: resourceId
+        })).file;
+        break;
+      case APIResourceType.Typography:
+        resource = (await client.request(TypographyQuery, {
+          typographyId: resourceId
+        })).typography;
+        break;
+      case APIResourceType.GlobalElement:
+        resource = (await client.request(GlobalElementQuery, { globalElementId: resourceId })).globalElement;
+        break;
+      case APIResourceType.PagePathnameSlice:
+        resource = (_a = (await client.request(PagePathnamesByIdQuery, { pageIds: [resourceId] })).pagePathnamesById[0]) != null ? _a : null;
+        break;
+      case APIResourceType.Table:
+        resource = (await client.request(TableQuery, {
+          tableId: resourceId
+        })).table;
+        break;
+      default:
+        resource = null;
+    }
+    dispatch(apiResourceFulfilled(resourceType, resourceId, resource));
+    return resource;
+  };
+}
+function fetchIntrospectedResources(introspectedResourceIds) {
+  return async (dispatch, _getState, client) => {
+    const introspectedResources = await client.request(IntrospectedResourcesQuery, introspectedResourceIds);
+    dispatch(introspectedResourcesFulfilled(introspectedResourceIds, introspectedResources));
+  };
+}
+function fetchTypographies(typographyIds) {
+  return async (dispatch, getState, client) => {
+    const state = getState();
+    if (typographyIds.every((typographyId) => getHasAPIResource(state, APIResourceType.Typography, typographyId))) {
+      return typographyIds.map((typographyId) => getAPIResource(state, APIResourceType.Typography, typographyId));
+    }
+    const { typographies } = await client.request(TypographiesQuery, { typographyIds });
+    dispatch(typographiesFulfilled(typographyIds, typographies));
+    return typographies;
+  };
+}
+function configureStore({
+  graphqlClient,
+  serializedState
 }) {
-  const cache2 = new InMemoryCache({
-    typePolicies
-  });
-  if (cacheData)
-    cache2.restore(cacheData);
-  return new ApolloClient({
-    link: new BatchHttpLink({
-      uri,
-      batchMax: 100
-    }),
-    cache: cache2
-  });
+  return createStore(reducer, getInitialState(serializedState), applyMiddleware(thunk.withExtraArgument(graphqlClient)));
+}
+class GraphQLClient {
+  constructor(endpoint) {
+    __publicField(this, "endpoint");
+    this.endpoint = endpoint;
+  }
+  async request(query, variables = {}) {
+    const response = await fetch(this.endpoint, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ query, variables })
+    });
+    if (!response.ok && response.status !== 400) {
+      throw new Error(`${response.status} ${response.statusText}`);
+    }
+    const body = await response.json();
+    if (body.errors != null) {
+      console.error(body);
+      throw new Error("GraphQL response contains errors, check the console.");
+    }
+    return body.data;
+  }
 }
 class MakeswiftClient {
   constructor({
     uri,
     cacheData
   }) {
-    __publicField(this, "apolloClient");
-    this.apolloClient = createApolloClient({
-      uri,
-      cacheData
+    __publicField(this, "graphqlClient");
+    __publicField(this, "makeswiftApiClient");
+    __publicField(this, "subscribe");
+    this.graphqlClient = new GraphQLClient(uri);
+    this.makeswiftApiClient = configureStore({
+      graphqlClient: this.graphqlClient,
+      serializedState: cacheData
     });
+    this.subscribe = this.makeswiftApiClient.subscribe;
   }
   async prefetch(element) {
-    const introspectionData = await introspect(element, this.apolloClient, storeContextDefaultValue);
-    const res = await this.apolloClient.query({
-      query: INTROSPECTION_QUERY,
-      variables: introspectionData
-    });
-    res.data.pagePathnamesById.forEach((pagePathnameSlice) => {
-      if (pagePathnameSlice == null)
-        return;
-      const id = Buffer.from(`Page:${pagePathnameSlice.id}`).toString("base64");
-      this.apolloClient.cache.writeFragment({
-        fragment: PagePathnameSliceFragmentDoc,
-        data: __spreadProps(__spreadValues({}, pagePathnameSlice), {
-          id
-        })
-      });
-    });
+    const introspectionData = await introspect(element, this, storeContextDefaultValue);
+    await this.makeswiftApiClient.dispatch(fetchIntrospectedResources(introspectionData));
     KeyUtils.resetGenerator();
-    return this.apolloClient.cache.extract();
+    return getSerializedState(this.makeswiftApiClient.getState());
   }
   updateCacheData(cacheData) {
-    this.apolloClient.cache.restore(cacheData);
+    this.makeswiftApiClient.dispatch(restoreAPIResourcesCache(cacheData));
+  }
+  readSwatch(swatchId) {
+    return getAPIResource(this.makeswiftApiClient.getState(), APIResourceType.Swatch, swatchId);
+  }
+  async fetchSwatch(swatchId) {
+    return await this.makeswiftApiClient.dispatch(fetchAPIResource(APIResourceType.Swatch, swatchId));
+  }
+  readFile(fileId) {
+    return getAPIResource(this.makeswiftApiClient.getState(), APIResourceType.File, fileId);
+  }
+  async fetchFile(fileId) {
+    return await this.makeswiftApiClient.dispatch(fetchAPIResource(APIResourceType.File, fileId));
+  }
+  readTypography(typographyId) {
+    return getAPIResource(this.makeswiftApiClient.getState(), APIResourceType.Typography, typographyId);
+  }
+  async fetchTypography(typographyId) {
+    return await this.makeswiftApiClient.dispatch(fetchAPIResource(APIResourceType.Typography, typographyId));
+  }
+  async fetchTypographies(typographyIds) {
+    return await this.makeswiftApiClient.dispatch(fetchTypographies(typographyIds));
+  }
+  readGlobalElement(globalElementId) {
+    return getAPIResource(this.makeswiftApiClient.getState(), APIResourceType.GlobalElement, globalElementId);
+  }
+  async fetchGlobalElement(globalElementId) {
+    return await this.makeswiftApiClient.dispatch(fetchAPIResource(APIResourceType.GlobalElement, globalElementId));
+  }
+  readPagePathnameSlice(pageId) {
+    return getAPIResource(this.makeswiftApiClient.getState(), APIResourceType.PagePathnameSlice, pageId);
+  }
+  async fetchPagePathnameSlice(pageId) {
+    return await this.makeswiftApiClient.dispatch(fetchAPIResource(APIResourceType.PagePathnameSlice, pageId));
+  }
+  readTable(tableId) {
+    return getAPIResource(this.makeswiftApiClient.getState(), APIResourceType.Table, tableId);
+  }
+  async fetchTable(tableId) {
+    return await this.makeswiftApiClient.dispatch(fetchAPIResource(APIResourceType.Table, tableId));
+  }
+  async createTableRecord(tableId, columns) {
+    await this.graphqlClient.request(CreateTableRecordMutation, {
+      input: {
+        data: {
+          tableId,
+          columns
+        }
+      }
+    });
+  }
+  readSite(siteId) {
+    return getAPIResource(this.makeswiftApiClient.getState(), APIResourceType.Site, siteId);
+  }
+  readPage(pageId) {
+    return getAPIResource(this.makeswiftApiClient.getState(), APIResourceType.Page, pageId);
+  }
+  readSnippet(snippetId) {
+    return getAPIResource(this.makeswiftApiClient.getState(), APIResourceType.Snippet, snippetId);
   }
 }
-const Context$2 = createContext(void 0);
-function useQuery(query, options) {
-  const client = useContext(Context$2);
-  return useQuery$1(query, __spreadValues({
-    client: client == null ? void 0 : client.apolloClient
-  }, options));
-}
-function useMutation(mutation, options) {
-  const client = useContext(Context$2);
-  return useMutation$1(mutation, __spreadValues({
-    client: client == null ? void 0 : client.apolloClient
-  }, options));
+const Context$2 = createContext(new MakeswiftClient({
+  uri: "https://api.makeswift.com/graphql"
+}));
+function useMakeswiftClient() {
+  return useContext(Context$2);
 }
 function MakeswiftProvider({
   client,
@@ -605,76 +734,23 @@ const filterUsedSnippetProperties = ({
   location,
   cleanup
 });
-const PAGE_SNIPPETS_QUERY = gql`
-  query PageById($id: ID!) {
-    page(id: $id) {
-      __typename
-      id
-      snippets {
-        __typename
-        id
-        name
-        code
-        cleanup
-        location
-        shouldAddToNewPages
-        liveEnabled
-        builderEnabled
-      }
-    }
-  }
-`;
-const SITE_FONTS_QUERY = gql`
-  query SiteById($id: ID!) {
-    site(id: $id) {
-      id
-      googleFonts {
-        edges {
-          activeVariants {
-            specifier
-          }
-          node {
-            family
-            variants {
-              specifier
-            }
-          }
-        }
-      }
-    }
-  }
-`;
 function Page$1({
   document: page
 }) {
   var _a;
   const isInBuilder = useIsInBuilder();
   const [snippets, setSnippets] = useState(page.snippets);
-  useQuery(PAGE_SNIPPETS_QUERY, {
-    variables: {
-      id: page.id
-    },
-    skip: isInBuilder === false,
-    fetchPolicy: "cache-only",
-    onCompleted(data) {
-      if (data == null)
-        return;
-      const oldSnippets = snippets.map(filterUsedSnippetProperties);
-      const newSnippets = data.page.snippets.map(filterUsedSnippetProperties);
-      if (deepEqual(newSnippets, oldSnippets))
-        return;
-      setSnippets(data.page.snippets);
-    }
-  });
-  const {
-    data: siteData
-  } = useQuery(SITE_FONTS_QUERY, {
-    variables: {
-      id: page.site.id
-    },
-    skip: isInBuilder === false,
-    fetchPolicy: "cache-only"
-  });
+  const cachedPage = useCachedPage(isInBuilder ? page.id : null);
+  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 ? page.site.id : null);
   const favicon = (_a = page.meta.favicon) != null ? _a : defaultFavicon;
   const {
     title,
@@ -687,7 +763,7 @@ function Page$1({
     isIndexingBlocked
   } = page.seo;
   const fontFamilyParamValue = useMemo(() => {
-    if ((siteData == null ? void 0 : siteData.site) == null) {
+    if (site == null) {
       return page.fonts.map(({
         family,
         variants
@@ -695,7 +771,7 @@ function Page$1({
         return `${family.replace(/ /g, "+")}:${variants.join()}`;
       }).join("|");
     }
-    return siteData.site.googleFonts.edges.filter((edge) => edge != null).map(({
+    return site.googleFonts.edges.filter((edge) => edge != null).map(({
       activeVariants,
       node: {
         family,
@@ -705,7 +781,7 @@ function Page$1({
       const activeVariantSpecifiers = variants.filter((variant) => activeVariants.some((activeVariant) => activeVariant.specifier === variant.specifier)).map((variant) => variant.specifier).join();
       return `${family.replace(/ /g, "+")}:${activeVariantSpecifiers}`;
     }).join("|");
-  }, [siteData, page]);
+  }, [site, page]);
   const filteredSnippets = useMemo(() => snippets.filter((snippet) => isInBuilder ? snippet.builderEnabled : snippet.liveEnabled), [snippets, isInBuilder]);
   const headSnippets = useMemo(() => filteredSnippets.filter((snippet) => snippet.location === SnippetLocation.Head), [filteredSnippets]);
   const previousHeadSnippets = useRef(null);
@@ -811,6 +887,18 @@ function Page$1({
     }, snippet.id))]
   });
 }
+function useCachedPage(pageId) {
+  const client = useMakeswiftClient();
+  const getSnapshot = () => pageId == null ? null : client.readPage(pageId);
+  const page = useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot);
+  return page;
+}
+function useCachedSite(siteId) {
+  const client = useMakeswiftClient();
+  const getSnapshot = () => siteId == null ? null : client.readSite(siteId);
+  const site = useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot);
+  return site;
+}
 class Makeswift {
   constructor(apiKey, { apiOrigin = "https://api.makeswift.com" } = {}) {
     __publicField(this, "apiKey");
@@ -962,7 +1050,7 @@ class Document$1 extends NextDocument {
     });
   }
 }
-const version = "0.3.1";
+const version = "0.4.1";
 function isErrorWithMessage(error) {
   return typeof error === "object" && error !== null && "message" in error && typeof error.message === "string";
 }
@@ -2562,32 +2650,112 @@ const FallbackComponent = forwardRef(function FallbackComponent2({
     })]
   });
 });
-function isNonNullable(value) {
-  return value != null;
+function useSwatch(swatchId) {
+  const client = useMakeswiftClient();
+  const readSwatch = () => swatchId == null ? null : client.readSwatch(swatchId);
+  const swatch = useSyncExternalStore(client.subscribe, readSwatch, readSwatch);
+  useEffect(() => {
+    if (swatchId != null)
+      client.fetchSwatch(swatchId).catch(console.error);
+  }, [client, swatchId]);
+  return swatch;
+}
+function useSwatches(swatchIds) {
+  const client = useMakeswiftClient();
+  const lastSnapshot = useRef();
+  function getSnapshot() {
+    const swatches2 = swatchIds.map((swatchId) => client.readSwatch(swatchId));
+    if (lastSnapshot.current != null && lastSnapshot.current.length === swatches2.length && lastSnapshot.current.every((swatch, idx) => swatches2[idx] === swatch)) {
+      return lastSnapshot.current;
+    }
+    return lastSnapshot.current = swatches2;
+  }
+  const swatches = useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot);
+  useEffect(() => {
+    Promise.all(swatchIds.map((swatchId) => client.fetchSwatch(swatchId))).catch(console.error);
+  }, [client, swatchIds]);
+  return swatches;
+}
+function useFile(fileId) {
+  const client = useMakeswiftClient();
+  const readFile = () => fileId == null ? null : client.readFile(fileId);
+  const file = useSyncExternalStore(client.subscribe, readFile, readFile);
+  useEffect(() => {
+    if (fileId != null)
+      client.fetchFile(fileId);
+  }, [client, fileId]);
+  return file;
+}
+function useFiles(fileIds) {
+  const client = useMakeswiftClient();
+  const lastSnapshot = useRef();
+  function getSnapshot() {
+    const files2 = fileIds.map((fileId) => client.readFile(fileId));
+    if (lastSnapshot.current != null && lastSnapshot.current.length === files2.length && lastSnapshot.current.every((file, idx) => files2[idx] === file)) {
+      return lastSnapshot.current;
+    }
+    return lastSnapshot.current = files2;
+  }
+  const files = useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot);
+  useEffect(() => {
+    Promise.all(fileIds.map((fileId) => client.fetchFile(fileId))).catch(console.error);
+  }, [client, fileIds]);
+  return files;
+}
+function useTypography(typographyId) {
+  const client = useMakeswiftClient();
+  const readTypography = () => typographyId == null ? null : client.readTypography(typographyId);
+  const typography = useSyncExternalStore(client.subscribe, readTypography, readTypography);
+  useEffect(() => {
+    if (typographyId != null)
+      client.fetchTypography(typographyId).catch(console.error);
+  }, [client, typographyId]);
+  return typography;
+}
+function useGlobalElement(globalElementId) {
+  const client = useMakeswiftClient();
+  const readGlobalElement = () => globalElementId == null ? null : client.readGlobalElement(globalElementId);
+  const globalElement = useSyncExternalStore(client.subscribe, readGlobalElement, readGlobalElement);
+  useEffect(() => {
+    if (globalElementId != null)
+      client.fetchGlobalElement(globalElementId).catch(console.error);
+  }, [client, globalElementId]);
+  return globalElement;
+}
+function usePagePathnameSlice(pageId) {
+  const client = useMakeswiftClient();
+  const readPagePathnameSlice = () => pageId == null ? null : client.readPagePathnameSlice(pageId);
+  const pagePathnameSlice = useSyncExternalStore(client.subscribe, readPagePathnameSlice, readPagePathnameSlice);
+  useEffect(() => {
+    if (pageId != null)
+      client.fetchPagePathnameSlice(pageId).catch(console.error);
+  }, [client, pageId]);
+  return pagePathnameSlice;
+}
+function useTable(tableId) {
+  const client = useMakeswiftClient();
+  const readTable = () => tableId == null ? null : client.readTable(tableId);
+  const table = useSyncExternalStore(client.subscribe, readTable, readTable);
+  useEffect(() => {
+    if (tableId != null)
+      client.fetchTable(tableId).catch(console.error);
+  }, [client, tableId]);
+  return table;
 }
 function mapSideColor(swatches, _d) {
   var _e = _d, { color } = _e, restOfSide = __objRest(_e, ["color"]);
   return __spreadProps(__spreadValues({}, restOfSide), {
     color: color && {
       alpha: color.alpha,
-      swatch: swatches.find((s) => s && s.id === color.swatchId)
+      swatch: swatches.filter(isNonNullable).find((s) => s && s.id === color.swatchId)
     }
   });
 }
 function useBorder(value) {
-  const swatchIds = value == null ? [] : [
-    ...Array.from(new Set(value.map(({ value: { borderTop, borderLeft, borderBottom, borderRight } }) => [
-      borderTop && borderTop.color && borderTop.color.swatchId,
-      borderBottom && borderBottom.color && borderBottom.color.swatchId,
-      borderLeft && borderLeft.color && borderLeft.color.swatchId,
-      borderRight && borderRight.color && borderRight.color.swatchId
-    ]).reduce((a, b) => a.concat(b)).filter(isNonNullable)))
-  ];
-  const skip = value == null || swatchIds.length === 0;
-  const { error, data = {} } = useQuery(SWATCHES_BY_ID, { skip, variables: { ids: swatchIds } });
-  if (value == null || error != null)
+  const swatchIds = getBorderSwatchIds(value);
+  const swatches = useSwatches(swatchIds);
+  if (value == null)
     return null;
-  const { swatches = [] } = data;
   return value.map((_a) => {
     var _b = _a, { value: { borderTop, borderBottom, borderLeft, borderRight } } = _b, rest = __objRest(_b, ["value"]);
     return __spreadProps(__spreadValues({}, rest), {
@@ -2609,14 +2777,10 @@ const ShadowDefaultValue = {
   color: null
 };
 function useBoxShadow(value) {
-  const swatchIds = value == null ? [] : [
-    ...Array.from(new Set(value.map(({ value: shadows }) => shadows.map(({ payload: { color } }) => color && color.swatchId)).reduce((a, b) => a.concat(b), []).filter(isNonNullable)))
-  ];
-  const skip = value == null || swatchIds.length === 0;
-  const { error, data = {} } = useQuery(SWATCHES_BY_ID, { skip, variables: { ids: swatchIds } });
-  if (value == null || error != null)
+  const swatchIds = getBoxShadowsSwatchIds(value);
+  const swatches = useSwatches(swatchIds);
+  if (value == null)
     return null;
-  const { swatches = [] } = data;
   return value.map((_a) => {
     var _b = _a, { value: shadows } = _b, restOfValue = __objRest(_b, ["value"]);
     return __spreadProps(__spreadValues({}, restOfValue), {
@@ -2629,7 +2793,7 @@ function useBoxShadow(value) {
         return __spreadProps(__spreadValues({}, restOfShadow), {
           payload: {
             color: color != null ? {
-              swatch: swatches.find((s) => s && s.id === color.swatchId),
+              swatch: swatches.filter(isNonNullable).find((s) => s && s.id === color.swatchId),
               alpha: color.alpha
             } : null,
             inset: inset != null ? inset : ShadowDefaultValue.inset,
@@ -2644,12 +2808,10 @@ function useBoxShadow(value) {
   });
 }
 function useResponsiveColor(color) {
-  const swatchIds = color == null ? [] : [...Array.from(new Set(color.map(({ value: v }) => v && v.swatchId).filter(isNonNullable)))];
-  const skip = swatchIds.length === 0;
-  const { error, data = {} } = useQuery(SWATCHES_BY_ID, { skip, variables: { ids: swatchIds } });
-  if (color == null || error != null)
+  const swatchIds = getResponsiveColorSwatchIds(color);
+  const swatches = useSwatches(swatchIds);
+  if (color == null)
     return null;
-  const { swatches = [] } = data;
   return color.map((_a) => {
     var _b = _a, { value: v } = _b, rest = __objRest(_b, ["value"]);
     const { swatchId, alpha } = v;
@@ -2657,27 +2819,8 @@ function useResponsiveColor(color) {
     return swatch == null ? null : __spreadProps(__spreadValues({}, rest), { value: { swatch, alpha } });
   }).filter(isNonNullable);
 }
-function useFile(fileId) {
-  const { error, data = {} } = useQuery(FILE_BY_ID, {
-    skip: fileId == null,
-    variables: { id: fileId }
-  });
-  if (fileId == null || error != null)
-    return null;
-  return data.file;
-}
 const isSSR = typeof window === "undefined" || /ServerSideRendering/.test(window.navigator && window.navigator.userAgent);
 const useIsomorphicLayoutEffect = isSSR ? useEffect : useLayoutEffect;
-function usePage(pageId) {
-  const { error, data = {} } = useQuery(PAGE_PATHNAMES_BY_ID, {
-    skip: pageId == null,
-    variables: { ids: [pageId] }
-  });
-  if (pageId == null || error != null)
-    return null;
-  const { pagePathnamesById: [page] = [] } = data;
-  return page;
-}
 const getIndexes = (spans, index) => {
   const flattened = spans.reduce((a, s) => a.concat(s), []);
   if (index < 0 || index > flattened.length)
@@ -2962,11 +3105,10 @@ function useCheckboxControlValue(data, definition) {
 }
 function useColorValue(data, definition) {
   var _a, _b;
-  const result = useQuery(SWATCHES_BY_ID, {
-    variables: { ids: [data == null ? void 0 : data.swatchId] },
-    skip: (data == null ? void 0 : data.swatchId) == null
-  });
-  if (data === void 0) {
+  const swatchId = (_a = data == null ? void 0 : data.swatchId) != null ? _a : null;
+  const swatch = useSwatch(swatchId);
+  const alpha = (_b = data == null ? void 0 : data.alpha) != null ? _b : 1;
+  if (swatch == null) {
     const { defaultValue } = definition.config;
     if (defaultValue === void 0)
       return void 0;
@@ -2978,8 +3120,7 @@ function useColorValue(data, definition) {
     }
     return defaultColor.rgb().string();
   }
-  const [swatch] = (_b = (_a = result.data) == null ? void 0 : _a.swatches) != null ? _b : [null];
-  return ColorHelper({ h: swatch == null ? void 0 : swatch.hue, s: swatch == null ? void 0 : swatch.saturation, l: swatch == null ? void 0 : swatch.lightness }).alpha(data.alpha).rgb().string();
+  return ColorHelper({ h: swatch.hue, s: swatch.saturation, l: swatch.lightness }).alpha(alpha).rgb().string();
 }
 function useComboboxControlValue(data) {
   return data == null ? void 0 : data.value;
@@ -2987,7 +3128,8 @@ function useComboboxControlValue(data) {
 function useImageControlValue(data, definition) {
   var _a;
   const format = (_a = definition.config.format) != null ? _a : ImageControlValueFormat.URL;
-  const file = useFile(data);
+  const fileId = data != null ? data : null;
+  const file = useFile(fileId);
   if (format === ImageControlValueFormat.URL) {
     return file == null ? void 0 : file.publicUrl;
   }
@@ -3000,7 +3142,8 @@ function useImageControlValue(data, definition) {
 }
 function useLinkControlValue(link, _definition) {
   var _a;
-  const page = usePage(link && link.type === "OPEN_PAGE" ? link.payload.pageId : null);
+  const pageId = link && link.type === "OPEN_PAGE" ? link.payload.pageId : null;
+  const page = usePagePathnameSlice(pageId != null ? pageId : null);
   const elementKey = (link == null ? void 0 : link.type) === "SCROLL_TO_ELEMENT" ? (_a = link.payload.elementIdConfig) == null ? void 0 : _a.elementKey : null;
   const elementId = useElementId(elementKey);
   let href = "#";
@@ -3555,7 +3698,7 @@ const FindDomNode = forwardRef(function FindDomNode2(props, ref) {
     innerRef: ref
   }));
 });
-const storeContextDefaultValue = configureStore();
+const storeContextDefaultValue = configureStore$1();
 function createReactRuntime(store) {
   return {
     registerComponent(component, {
@@ -3590,7 +3733,7 @@ function RuntimeProvider({
   rootElements
 }) {
   const [store, setStore] = useState(() => {
-    const store2 = configureStore({
+    const store2 = configureStore$1({
       preloadedState: storeContextDefaultValue.getState(),
       rootElements
     });
@@ -3613,7 +3756,7 @@ function RuntimeProvider({
       const ReactBuilderPreview = await import("./react-builder-preview.es.js");
       setStore((store2) => ReactBuilderPreview.configureStore({
         preloadedState: store2.getState(),
-        client: client.apolloClient
+        client
       }));
     }
   }, [client]);
@@ -3699,14 +3842,16 @@ const ElementData = memo(forwardRef(function ElementData2({
       text: "Component not found"
     });
   }
-  return /* @__PURE__ */ jsx(FindDomNode, {
-    ref: setFoundDomNode,
-    children: /* @__PURE__ */ jsx(PropsValue, {
-      element: elementData,
-      children: (props) => /* @__PURE__ */ createElement(Component2, __spreadProps(__spreadValues({}, props), {
-        key: elementData.key,
-        ref: setHandle
-      }))
+  return /* @__PURE__ */ jsx(Suspense, {
+    children: /* @__PURE__ */ jsx(FindDomNode, {
+      ref: setFoundDomNode,
+      children: /* @__PURE__ */ jsx(PropsValue, {
+        element: elementData,
+        children: (props) => /* @__PURE__ */ createElement(Component2, __spreadProps(__spreadValues({}, props), {
+          key: elementData.key,
+          ref: setHandle
+        }))
+      })
     })
   });
 }));
@@ -3714,23 +3859,9 @@ const DisableRegisterElement = createContext(false);
 const ElementReference = memo(forwardRef(function ElementReference2({
   elementReference
 }, ref) {
-  var _a;
-  const {
-    error,
-    data
-  } = useQuery(ELEMENT_REFERENCE_GLOBAL_ELEMENT, {
-    variables: {
-      id: elementReference.value
-    }
-  });
-  const globalElementData = (_a = data == null ? void 0 : data.globalElement) == null ? void 0 : _a.data;
+  const globalElement = useGlobalElement(elementReference.value);
+  const globalElementData = globalElement == null ? void 0 : globalElement.data;
   const elementReferenceDocument = useDocument(elementReference.key);
-  if (error != null) {
-    return /* @__PURE__ */ jsx(FallbackComponent, {
-      ref,
-      text: "Something went wrong!"
-    });
-  }
   if (globalElementData == null) {
     return /* @__PURE__ */ jsx(FallbackComponent, {
       ref,
@@ -3801,5 +3932,5 @@ const DocumentReference = memo(forwardRef(function DocumentReference2({
     document: document2
   });
 }));
-export { getStaticProps as $, responsiveGridItem as A, useQuery as B, Contrasts as C, DocumentReference as D, Element as E, useMutation as F, Provider as G, Alignments as H, DEVICES as I, findDeviceOverride as J, serializeStyles as K, insertStyles as L, MakeswiftComponentType as M, TYPOGRAPHIES_BY_ID as N, SWATCHES_BY_ID as O, PageProvider as P, shallowMergeFallbacks as Q, RuntimeProvider as R, SITE_FONTS_QUERY as S, TABLE_BY_ID as T, isNonNullable as U, FILES_BY_ID as V, getDeviceMediaQuery as W, useElementId as X, deepEqual as Y, MakeswiftClient as Z, getStaticPaths as _, ReactRuntime as a, getServerSideProps as a0, Page as a1, Makeswift as a2, PreviewModeScript as a3, Document$1 as a4, MakeswiftApiHandler as a5, forwardNextDynamicRef as a6, usePageId as b, DEFAULT_BOX_ANIMATE_TYPE as c, DEFAULT_BOX_ANIMATE_DELAY as d, DEFAULT_BOX_ANIMATE_DURATION as e, DEFAULT_ITEM_ANIMATE_TYPE as f, DEFAULT_ITEM_ANIMATE_DELAY as g, DEFAULT_ITEM_ANIMATE_DURATION as h, DEFAULT_ITEM_STAGGER_DURATION as i, useBorder as j, useBoxShadow as k, useResponsiveColor as l, useFile as m, usePage as n, PAGE_SNIPPETS_QUERY as o, Page$1 as p, useStyle as q, responsiveStyle as r, responsiveWidth as s, responsiveTextStyle as t, useIsInBuilder as u, colorToString as v, useIsomorphicLayoutEffect as w, Shapes as x, Sizes as y, useFormContext as z };
+export { PreviewModeScript as $, Alignments as A, useFile as B, Contrasts as C, DocumentReference as D, Element as E, DEVICES as F, findDeviceOverride as G, serializeStyles as H, insertStyles as I, useTypography as J, useSwatches as K, shallowMergeFallbacks as L, MakeswiftComponentType as M, useFiles as N, getDeviceMediaQuery as O, PageProvider as P, usePagePathnameSlice as Q, RuntimeProvider as R, Shapes as S, useElementId as T, deepEqual as U, MakeswiftClient as V, getStaticPaths as W, getStaticProps as X, getServerSideProps as Y, Page as Z, Makeswift as _, ReactRuntime as a, Document$1 as a0, MakeswiftApiHandler as a1, forwardNextDynamicRef as a2, usePageId as b, DEFAULT_BOX_ANIMATE_TYPE as c, DEFAULT_BOX_ANIMATE_DELAY as d, DEFAULT_BOX_ANIMATE_DURATION as e, DEFAULT_ITEM_ANIMATE_TYPE as f, DEFAULT_ITEM_ANIMATE_DELAY as g, DEFAULT_ITEM_ANIMATE_DURATION as h, DEFAULT_ITEM_STAGGER_DURATION as i, useBorder as j, useBoxShadow as k, useResponsiveColor as l, Page$1 as m, useStyle as n, responsiveWidth as o, responsiveTextStyle as p, colorToString as q, responsiveStyle as r, useIsomorphicLayoutEffect as s, Sizes as t, useIsInBuilder as u, useFormContext as v, responsiveGridItem as w, useTable as x, useMakeswiftClient as y, Provider as z };
 //# sourceMappingURL=index.es.js.map