@makeswift/runtime 0.25.0-canary.9 → 0.25.0

package/dist/cjs/next/tests/test-utils.js

@@ -28,13 +28,15 @@ var import_server = require("next/server");
 var import_node_mocks_http = require("node-mocks-http");
 var import_api_handler = require("../api-handler");
 var import_react = require("../../react");
+var import_fixtures = require("../../testing/fixtures");
+var import_preview = require("../api-handler/preview");
 function createHandler(apiKey, args = {}) {
   const runtime = new import_react.ReactRuntime();
   return (0, import_api_handler.MakeswiftApiHandler)(apiKey, {
     ...args,
     runtime,
-    apiOrigin: "https://api.fakeswift.com",
-    appOrigin: "https://app.fakeswift.com"
+    apiOrigin: import_fixtures.TestOrigins.apiOrigin,
+    appOrigin: import_fixtures.TestOrigins.appOrigin
   });
 }
 const hostUrl = (path) => new URL(path, "https://example.com");
@@ -56,7 +58,7 @@ function createNextApiRequest({
     query: {
       ...routeParams(hostUrl(path)),
       ...Object.fromEntries(url.searchParams.entries()),
-      ...originalPath ? { path: originalPath } : {}
+      ...originalPath ? { [import_preview.RewriteRuleMatches.OriginalPath]: originalPath } : {}
     },
     body,
     headers
@@ -74,7 +76,7 @@ function createNextRequestWithContext({
     body: JSON.stringify(body),
     headers
   });
-  return [request, { params: routeParams(hostUrl(path)) }];
+  return [request, { params: Promise.resolve(routeParams(hostUrl(path))) }];
 }
 function pagesRouterApiRequestFixture(args = {}, responseMock) {
   const apiKey = "pages-router-api-key";
@@ -95,7 +97,7 @@ function pagesRouterApiRequestFixture(args = {}, responseMock) {
           return response._getHeaders()["set-cookie"];
         },
         get(key) {
-          return key.toLowerCase() === "location" ? response._getRedirectUrl() : response._getHeaders()[key];
+          return key.toLowerCase() === "location" ? response._getRedirectUrl() || response._getHeaders()["location"] : response._getHeaders()[key];
         }
       }
     };

package/dist/cjs/next/tests/test-utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/next/tests/test-utils.ts"],"sourcesContent":["import { NextApiRequest, NextApiResponse } from 'next'\nimport { NextRequest } from 'next/server'\nimport {\n  createRequest,\n  createResponse,\n  type RequestMethod,\n  type MockResponse,\n} from 'node-mocks-http'\n\nimport { MakeswiftApiHandler } from '../api-handler'\nimport { ReactRuntime } from '../../react'\n\nexport type MakeswiftApiHandlerArgs = Partial<Parameters<typeof MakeswiftApiHandler>[1]>\n\nfunction createHandler(apiKey: string, args: Partial<MakeswiftApiHandlerArgs> = {}) {\n  const runtime = new ReactRuntime()\n  return MakeswiftApiHandler(apiKey, {\n    ...args,\n    runtime,\n    apiOrigin: 'https://api.fakeswift.com',\n    appOrigin: 'https://app.fakeswift.com',\n  })\n}\n\nexport const hostUrl = (path: string) => new URL(path, 'https://example.com')\n\nfunction routeParams(url: URL) {\n  // simulate Next.js API route's context params, e.g. /api/makeswift/revalidate -> { 'makeswift': ['revalidate'] }\n  const segments = url.pathname.split('/').filter(Boolean).slice(1)\n  return { [segments[0]]: segments.slice(1) }\n}\n\nexport type RequestParams = {\n  method: RequestMethod\n  path: string\n  originalPath?: string\n  body?: Record<string, unknown>\n  headers?: Record<string, string>\n}\n\nfunction createNextApiRequest({\n  method,\n  path,\n  originalPath,\n  body,\n  headers,\n}: RequestParams): NextApiRequest {\n  const url = hostUrl(originalPath ?? path)\n  return createRequest<NextApiRequest>({\n    method,\n    url: url.toString(),\n    query: {\n      ...routeParams(hostUrl(path)),\n      ...Object.fromEntries(url.searchParams.entries()),\n      ...(originalPath ? { path: originalPath } : {}),\n    },\n    body,\n    headers,\n  })\n}\n\nfunction createNextRequestWithContext({\n  method,\n  path,\n  originalPath,\n  body,\n  headers,\n}: RequestParams): [NextRequest, { params: { [key: string]: string | string[] } }] {\n  const request = new NextRequest(hostUrl(originalPath ?? path), {\n    method,\n    body: JSON.stringify(body),\n    headers,\n  })\n\n  return [request, { params: routeParams(hostUrl(path)) }]\n}\n\nexport function pagesRouterApiRequestFixture(\n  args: MakeswiftApiHandlerArgs = {},\n  responseMock?: MockResponse<NextApiResponse>,\n) {\n  const apiKey = 'pages-router-api-key'\n  const handler = createHandler(apiKey, args)\n\n  const response = responseMock ?? createResponse<NextApiResponse>()\n  const testApiRequest = async (reqParams: RequestParams) => {\n    await handler(createNextApiRequest(reqParams), response)\n    return {\n      statusCode: response.statusCode,\n      get jsonBody() {\n        return response._getJSONData()\n      },\n      get textBody() {\n        return response._getData()\n      },\n      headers: {\n        getSetCookie() {\n          return response._getHeaders()['set-cookie']\n        },\n        get(key: string) {\n          return key.toLowerCase() === 'location'\n            ? response._getRedirectUrl()\n            : response._getHeaders()[key]\n        },\n      },\n    }\n  }\n\n  return { testApiRequest, apiKey }\n}\n\nexport function appRouterApiRequestFixture(args: MakeswiftApiHandlerArgs = {}) {\n  const apiKey = 'app-router-api-key'\n  const handler = createHandler(apiKey, args)\n  const testApiRequest = async (reqParams: RequestParams) => {\n    const response = await handler(...createNextRequestWithContext(reqParams))\n    return {\n      statusCode: response?.status,\n      get jsonBody() {\n        return response?.json()\n      },\n      get textBody() {\n        return response?.text()\n      },\n      headers: response?.headers ?? new Headers(),\n    }\n  }\n\n  return { testApiRequest, apiKey }\n}\n\nexport const apiRequestFixtures = [\n  { fixture: pagesRouterApiRequestFixture, router: 'pages' },\n  { fixture: appRouterApiRequestFixture, router: 'app' },\n]\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/next/tests/test-utils.ts"],"sourcesContent":["import { NextApiRequest, NextApiResponse } from 'next'\nimport { NextRequest } from 'next/server'\nimport {\n  createRequest,\n  createResponse,\n  type RequestMethod,\n  type MockResponse,\n} from 'node-mocks-http'\n\nimport { MakeswiftApiHandler } from '../api-handler'\nimport { ReactRuntime } from '../../react'\nimport { TestOrigins } from '../../testing/fixtures'\nimport { RewriteRuleMatches } from '../api-handler/preview'\n\nexport type MakeswiftApiHandlerArgs = Partial<Parameters<typeof MakeswiftApiHandler>[1]>\n\nfunction createHandler(apiKey: string, args: Partial<MakeswiftApiHandlerArgs> = {}) {\n  const runtime = new ReactRuntime()\n  return MakeswiftApiHandler(apiKey, {\n    ...args,\n    runtime,\n    apiOrigin: TestOrigins.apiOrigin,\n    appOrigin: TestOrigins.appOrigin,\n  })\n}\n\nexport const hostUrl = (path: string) => new URL(path, 'https://example.com')\n\nfunction routeParams(url: URL) {\n  // simulate Next.js API route's context params, e.g. /api/makeswift/revalidate -> { 'makeswift': ['revalidate'] }\n  const segments = url.pathname.split('/').filter(Boolean).slice(1)\n  return { [segments[0]]: segments.slice(1) }\n}\n\nexport type RequestParams = {\n  method: RequestMethod\n  path: string\n  originalPath?: string\n  body?: Record<string, unknown>\n  headers?: Record<string, string>\n}\n\nfunction createNextApiRequest({\n  method,\n  path,\n  originalPath,\n  body,\n  headers,\n}: RequestParams): NextApiRequest {\n  const url = hostUrl(originalPath ?? path)\n  return createRequest<NextApiRequest>({\n    method,\n    url: url.toString(),\n    query: {\n      ...routeParams(hostUrl(path)),\n      ...Object.fromEntries(url.searchParams.entries()),\n      ...(originalPath ? { [RewriteRuleMatches.OriginalPath]: originalPath } : {}),\n    },\n    body,\n    headers,\n  })\n}\n\nfunction createNextRequestWithContext({\n  method,\n  path,\n  originalPath,\n  body,\n  headers,\n}: RequestParams): [NextRequest, { params: Promise<{ [key: string]: string | string[] }> }] {\n  const request = new NextRequest(hostUrl(originalPath ?? path), {\n    method,\n    body: JSON.stringify(body),\n    headers,\n  })\n\n  return [request, { params: Promise.resolve(routeParams(hostUrl(path))) }]\n}\n\nexport function pagesRouterApiRequestFixture(\n  args: MakeswiftApiHandlerArgs = {},\n  responseMock?: MockResponse<NextApiResponse>,\n) {\n  const apiKey = 'pages-router-api-key'\n  const handler = createHandler(apiKey, args)\n\n  const response = responseMock ?? createResponse<NextApiResponse>()\n  const testApiRequest = async (reqParams: RequestParams) => {\n    await handler(createNextApiRequest(reqParams), response)\n    return {\n      statusCode: response.statusCode,\n      get jsonBody() {\n        return response._getJSONData()\n      },\n      get textBody() {\n        return response._getData()\n      },\n      headers: {\n        getSetCookie() {\n          return response._getHeaders()['set-cookie']\n        },\n        get(key: string) {\n          return key.toLowerCase() === 'location'\n            ? response._getRedirectUrl() || response._getHeaders()['location']\n            : response._getHeaders()[key]\n        },\n      },\n    }\n  }\n\n  return { testApiRequest, apiKey }\n}\n\nexport function appRouterApiRequestFixture(args: MakeswiftApiHandlerArgs = {}) {\n  const apiKey = 'app-router-api-key'\n  const handler = createHandler(apiKey, args)\n  const testApiRequest = async (reqParams: RequestParams) => {\n    const response = await handler(...createNextRequestWithContext(reqParams))\n    return {\n      statusCode: response?.status,\n      get jsonBody() {\n        return response?.json()\n      },\n      get textBody() {\n        return response?.text()\n      },\n      headers: response?.headers ?? new Headers(),\n    }\n  }\n\n  return { testApiRequest, apiKey }\n}\n\nexport const apiRequestFixtures = [\n  { fixture: pagesRouterApiRequestFixture, router: 'pages' },\n  { fixture: appRouterApiRequestFixture, router: 'app' },\n]\n"],"mappings":"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","names":[]}

package/dist/cjs/runtimes/react/components/RuntimeProvider.js

@@ -37,32 +37,34 @@ var import_react = require("react");
 var import_react2 = require("../../../api/react");
 var import_use_react_runtime = require("../hooks/use-react-runtime");
 var import_host_api_client = require("../host-api-client");
-var import_site_version = require("../../../api/site-version");
-var import_draft_switcher = require("./draft-switcher/draft-switcher");
+var import_preview_switcher = require("./preview-switcher/preview-switcher");
 var import_use_builder_connection_ping = require("./hooks/use-builder-connection-ping");
+var import_use_framework_context = require("./hooks/use-framework-context");
 const LiveProvider = (0, import_react.lazy)(() => Promise.resolve().then(() => __toESM(require("./LiveProvider"))));
 const PreviewProvider = (0, import_react.lazy)(() => Promise.resolve().then(() => __toESM(require("./PreviewProvider"))));
 function RuntimeProvider({
   children,
   runtime,
-  previewMode,
+  siteVersion,
   appOrigin = "https://app.makeswift.com",
   apiOrigin = "https://api.makeswift.com",
   locale = void 0
 }) {
+  const { versionedFetch } = (0, import_use_framework_context.useFrameworkContext)();
   const client = (0, import_react.useMemo)(
     () => new import_react2.MakeswiftHostApiClient({
       uri: new URL("graphql", apiOrigin).href,
       locale,
-      siteVersion: previewMode ? import_site_version.MakeswiftSiteVersion.Working : import_site_version.MakeswiftSiteVersion.Live
+      fetch: versionedFetch(siteVersion)
     }),
-    [apiOrigin, locale, previewMode]
+    [apiOrigin, locale, siteVersion, versionedFetch]
   );
-  const StoreProvider = previewMode ? PreviewProvider : LiveProvider;
+  const isPreview = siteVersion != null;
+  const StoreProvider = isPreview ? PreviewProvider : LiveProvider;
   (0, import_use_builder_connection_ping.useBuilderConnectionPing)({ appOrigin });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_use_react_runtime.ReactRuntimeContext.Provider, { value: runtime, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_host_api_client.MakeswiftHostApiClientProvider, { client, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StoreProvider, { children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_draft_switcher.DraftSwitcher, { isDraft: previewMode })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_preview_switcher.PreviewSwitcher, { isPreview })
   ] }) }) });
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/cjs/runtimes/react/components/RuntimeProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/components/RuntimeProvider.tsx"],"sourcesContent":["'use client'\n\nimport { ReactNode, useMemo, lazy } from 'react'\n\nimport { MakeswiftHostApiClient } from '../../../api/react'\nimport { ReactRuntimeContext } from '../hooks/use-react-runtime'\nimport { ReactRuntime } from '../react-runtime'\nimport { MakeswiftHostApiClientProvider } from '../host-api-client'\nimport { MakeswiftSiteVersion } from '../../../api/site-version'\nimport { DraftSwitcher } from './draft-switcher/draft-switcher'\nimport { useBuilderConnectionPing } from './hooks/use-builder-connection-ping'\n\nconst LiveProvider = lazy(() => import('./LiveProvider'))\nconst PreviewProvider = lazy(() => import('./PreviewProvider'))\n\nexport function RuntimeProvider({\n  children,\n  runtime,\n  previewMode,\n  appOrigin = 'https://app.makeswift.com',\n  apiOrigin = 'https://api.makeswift.com',\n  locale = undefined,\n}: {\n  children: ReactNode\n  runtime: ReactRuntime\n  previewMode: boolean\n  apiOrigin?: string\n  appOrigin?: string\n  locale?: string\n}) {\n  const client = useMemo(\n    () =>\n      new MakeswiftHostApiClient({\n        uri: new URL('graphql', apiOrigin).href,\n        locale,\n        siteVersion: previewMode ? MakeswiftSiteVersion.Working : MakeswiftSiteVersion.Live,\n      }),\n    [apiOrigin, locale, previewMode],\n  )\n\n  const StoreProvider = previewMode ? PreviewProvider : LiveProvider\n\n  useBuilderConnectionPing({ appOrigin })\n\n  return (\n    <ReactRuntimeContext.Provider value={runtime}>\n      <MakeswiftHostApiClientProvider client={client}>\n        <StoreProvider>\n          {children}\n          <DraftSwitcher isDraft={previewMode} />\n        </StoreProvider>\n      </MakeswiftHostApiClientProvider>\n    </ReactRuntimeContext.Provider>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA+CQ;AA7CR,mBAAyC;AAEzC,IAAAA,gBAAuC;AACvC,+BAAoC;AAEpC,6BAA+C;AAC/C,0BAAqC;AACrC,4BAA8B;AAC9B,yCAAyC;AAEzC,MAAM,mBAAe,mBAAK,MAAM,6CAAO,gBAAgB,GAAC;AACxD,MAAM,sBAAkB,mBAAK,MAAM,6CAAO,mBAAmB,GAAC;AAEvD,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,SAAS;AACX,GAOG;AACD,QAAM,aAAS;AAAA,IACb,MACE,IAAI,qCAAuB;AAAA,MACzB,KAAK,IAAI,IAAI,WAAW,SAAS,EAAE;AAAA,MACnC;AAAA,MACA,aAAa,cAAc,yCAAqB,UAAU,yCAAqB;AAAA,IACjF,CAAC;AAAA,IACH,CAAC,WAAW,QAAQ,WAAW;AAAA,EACjC;AAEA,QAAM,gBAAgB,cAAc,kBAAkB;AAEtD,mEAAyB,EAAE,UAAU,CAAC;AAEtC,SACE,4CAAC,6CAAoB,UAApB,EAA6B,OAAO,SACnC,sDAAC,yDAA+B,QAC9B,uDAAC,iBACE;AAAA;AAAA,IACD,4CAAC,uCAAc,SAAS,aAAa;AAAA,KACvC,GACF,GACF;AAEJ;","names":["import_react"]}
+{"version":3,"sources":["../../../../../src/runtimes/react/components/RuntimeProvider.tsx"],"sourcesContent":["'use client'\n\nimport { ReactNode, useMemo, lazy } from 'react'\n\nimport { MakeswiftHostApiClient } from '../../../api/react'\nimport { ReactRuntimeContext } from '../hooks/use-react-runtime'\nimport { ReactRuntime } from '../react-runtime'\nimport { MakeswiftHostApiClientProvider } from '../host-api-client'\nimport { type SiteVersion } from '../../../api/site-version'\nimport { PreviewSwitcher } from './preview-switcher/preview-switcher'\nimport { useBuilderConnectionPing } from './hooks/use-builder-connection-ping'\nimport { useFrameworkContext } from './hooks/use-framework-context'\n\nconst LiveProvider = lazy(() => import('./LiveProvider'))\nconst PreviewProvider = lazy(() => import('./PreviewProvider'))\n\nexport function RuntimeProvider({\n  children,\n  runtime,\n  siteVersion,\n  appOrigin = 'https://app.makeswift.com',\n  apiOrigin = 'https://api.makeswift.com',\n  locale = undefined,\n}: {\n  children: ReactNode\n  runtime: ReactRuntime\n  siteVersion: SiteVersion | null\n  apiOrigin?: string\n  appOrigin?: string\n  locale?: string\n}) {\n  const { versionedFetch } = useFrameworkContext()\n\n  const client = useMemo(\n    () =>\n      new MakeswiftHostApiClient({\n        uri: new URL('graphql', apiOrigin).href,\n        locale,\n        fetch: versionedFetch(siteVersion),\n      }),\n    [apiOrigin, locale, siteVersion, versionedFetch],\n  )\n\n  const isPreview = siteVersion != null\n  const StoreProvider = isPreview ? PreviewProvider : LiveProvider\n\n  useBuilderConnectionPing({ appOrigin })\n\n  return (\n    <ReactRuntimeContext.Provider value={runtime}>\n      <MakeswiftHostApiClientProvider client={client}>\n        <StoreProvider>\n          {children}\n          <PreviewSwitcher isPreview={isPreview} />\n        </StoreProvider>\n      </MakeswiftHostApiClientProvider>\n    </ReactRuntimeContext.Provider>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmDQ;AAjDR,mBAAyC;AAEzC,IAAAA,gBAAuC;AACvC,+BAAoC;AAEpC,6BAA+C;AAE/C,8BAAgC;AAChC,yCAAyC;AACzC,mCAAoC;AAEpC,MAAM,mBAAe,mBAAK,MAAM,6CAAO,gBAAgB,GAAC;AACxD,MAAM,sBAAkB,mBAAK,MAAM,6CAAO,mBAAmB,GAAC;AAEvD,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,SAAS;AACX,GAOG;AACD,QAAM,EAAE,eAAe,QAAI,kDAAoB;AAE/C,QAAM,aAAS;AAAA,IACb,MACE,IAAI,qCAAuB;AAAA,MACzB,KAAK,IAAI,IAAI,WAAW,SAAS,EAAE;AAAA,MACnC;AAAA,MACA,OAAO,eAAe,WAAW;AAAA,IACnC,CAAC;AAAA,IACH,CAAC,WAAW,QAAQ,aAAa,cAAc;AAAA,EACjD;AAEA,QAAM,YAAY,eAAe;AACjC,QAAM,gBAAgB,YAAY,kBAAkB;AAEpD,mEAAyB,EAAE,UAAU,CAAC;AAEtC,SACE,4CAAC,6CAAoB,UAApB,EAA6B,OAAO,SACnC,sDAAC,yDAA+B,QAC9B,uDAAC,iBACE;AAAA;AAAA,IACD,4CAAC,2CAAgB,WAAsB;AAAA,KACzC,GACF,GACF;AAEJ;","names":["import_react"]}

package/dist/cjs/runtimes/react/components/framework-context.js

@@ -20,11 +20,14 @@ var framework_context_exports = {};
 __export(framework_context_exports, {
   DefaultHead: () => DefaultHead,
   DefaultImage: () => DefaultImage,
-  FrameworkContext: () => FrameworkContext
+  DefaultLink: () => DefaultLink,
+  FrameworkContext: () => FrameworkContext,
+  versionedFetch: () => versionedFetch
 });
 module.exports = __toCommonJS(framework_context_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
+var import_site_version = require("../../../api/site-version");
 var import_HeadSnippet = require("./page/HeadSnippet");
 const DefaultHead = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
 const DefaultImage = ({ priority, fill, style, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -42,15 +45,29 @@ const DefaultImage = ({ priority, fill, style, ...props }) => /* @__PURE__ */ (0
     loading: priority ? "eager" : "lazy"
   }
 );
+const DefaultLink = (0, import_react.forwardRef)(
+  ({ linkType, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { ...props, ref })
+);
+const versionedFetch = (siteVersion) => (url, init) => fetch(url, {
+  ...init,
+  headers: {
+    ...init?.headers,
+    ...siteVersion != null ? { [import_site_version.ApiHandlerHeaders.SiteVersion]: (0, import_site_version.serializeSiteVersion)(siteVersion) } : {}
+  }
+});
 const FrameworkContext = (0, import_react.createContext)({
   Head: DefaultHead,
   HeadSnippet: import_HeadSnippet.BaseHeadSnippet,
-  Image: DefaultImage
+  Image: DefaultImage,
+  Link: DefaultLink,
+  versionedFetch
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DefaultHead,
   DefaultImage,
-  FrameworkContext
+  DefaultLink,
+  FrameworkContext,
+  versionedFetch
 });
 //# sourceMappingURL=framework-context.js.map

package/dist/cjs/runtimes/react/components/framework-context.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/components/framework-context.tsx"],"sourcesContent":["import { createContext, type ReactNode, type PropsWithChildren, type CSSProperties } from 'react'\n\nimport { type Snippet } from '../../../client'\n\nimport { BaseHeadSnippet } from './page/HeadSnippet'\n\ntype HeadComponent = (props: { children: ReactNode }) => ReactNode\ntype HeadSnippet = (props: { snippet: Snippet }) => ReactNode\ntype ImageComponent = (props: {\n  src: string\n  alt: string\n  sizes?: string\n  width?: number\n  height?: number\n  priority?: boolean\n  fill?: boolean\n  style?: CSSProperties\n}) => ReactNode\n\nexport type FrameworkContext = {\n  Head: HeadComponent\n  HeadSnippet: HeadSnippet\n  Image: ImageComponent\n}\n\n// React 19 automatically hoists metadata tags to the <head>\nexport const DefaultHead = ({ children }: PropsWithChildren) => <>{children}</>\n\nexport const DefaultImage: ImageComponent = ({ priority, fill, style, ...props }) => (\n  <img\n    {...props}\n    style={{\n      ...(fill\n        ? {\n            height: '100%',\n            width: '100%',\n            objectFit: 'cover',\n          }\n        : {}),\n      ...style,\n    }}\n    loading={priority ? 'eager' : 'lazy'}\n  />\n)\n\nexport const FrameworkContext = createContext<FrameworkContext>({\n  Head: DefaultHead,\n  HeadSnippet: BaseHeadSnippet,\n  Image: DefaultImage,\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0BgE;AA1BhE,mBAA0F;AAI1F,yBAAgC;AAsBzB,MAAM,cAAc,CAAC,EAAE,SAAS,MAAyB,2EAAG,UAAS;AAErE,MAAM,eAA+B,CAAC,EAAE,UAAU,MAAM,OAAO,GAAG,MAAM,MAC7E;AAAA,EAAC;AAAA;AAAA,IACE,GAAG;AAAA,IACJ,OAAO;AAAA,MACL,GAAI,OACA;AAAA,QACE,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,WAAW;AAAA,MACb,IACA,CAAC;AAAA,MACL,GAAG;AAAA,IACL;AAAA,IACA,SAAS,WAAW,UAAU;AAAA;AAChC;AAGK,MAAM,uBAAmB,4BAAgC;AAAA,EAC9D,MAAM;AAAA,EACN,aAAa;AAAA,EACb,OAAO;AACT,CAAC;","names":[]}
+{"version":3,"sources":["../../../../../src/runtimes/react/components/framework-context.tsx"],"sourcesContent":["import {\n  createContext,\n  type ReactNode,\n  type PropsWithChildren,\n  type CSSProperties,\n  type ComponentPropsWithoutRef,\n  type MouseEvent,\n  type ForwardRefExoticComponent,\n  type RefAttributes,\n  forwardRef,\n} from 'react'\n\nimport { type LinkData } from '@makeswift/prop-controllers'\n\nimport { type Snippet } from '../../../client'\nimport { type HttpFetch } from '../../../state/makeswift-api-client'\nimport {\n  ApiHandlerHeaders,\n  serializeSiteVersion,\n  type SiteVersion,\n} from '../../../api/site-version'\n\nimport { BaseHeadSnippet } from './page/HeadSnippet'\n\ntype HeadComponent = (props: { children: ReactNode }) => ReactNode\ntype HeadSnippet = (props: { snippet: Snippet }) => ReactNode\ntype ImageComponent = (props: {\n  src: string\n  alt: string\n  sizes?: string\n  width?: number\n  height?: number\n  priority?: boolean\n  fill?: boolean\n  style?: CSSProperties\n}) => ReactNode\n\ntype LinkProps = Omit<ComponentPropsWithoutRef<'a'>, 'onClick'> & {\n  linkType?: LinkData['type']\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => unknown\n}\n\ntype LinkComponent = ForwardRefExoticComponent<RefAttributes<HTMLAnchorElement> & LinkProps>\n\nexport type FrameworkContext = {\n  Head: HeadComponent\n  HeadSnippet: HeadSnippet\n  Image: ImageComponent\n  Link: LinkComponent\n  versionedFetch: (siteVersion: SiteVersion | null) => HttpFetch\n}\n\n// React 19 automatically hoists metadata tags to the <head>\nexport const DefaultHead = ({ children }: PropsWithChildren) => <>{children}</>\n\nexport const DefaultImage: ImageComponent = ({ priority, fill, style, ...props }) => (\n  <img\n    {...props}\n    style={{\n      ...(fill\n        ? {\n            height: '100%',\n            width: '100%',\n            objectFit: 'cover',\n          }\n        : {}),\n      ...style,\n    }}\n    loading={priority ? 'eager' : 'lazy'}\n  />\n)\n\nexport const DefaultLink: LinkComponent = forwardRef<HTMLAnchorElement, LinkProps>(\n  ({ linkType, ...props }, ref) => <a {...props} ref={ref} />,\n)\n\nexport const versionedFetch: FrameworkContext['versionedFetch'] = siteVersion => (url, init) =>\n  fetch(url, {\n    ...init,\n    headers: {\n      ...init?.headers,\n      ...(siteVersion != null\n        ? { [ApiHandlerHeaders.SiteVersion]: serializeSiteVersion(siteVersion) }\n        : {}),\n    },\n  })\n\nexport const FrameworkContext = createContext<FrameworkContext>({\n  Head: DefaultHead,\n  HeadSnippet: BaseHeadSnippet,\n  Image: DefaultImage,\n  Link: DefaultLink,\n  versionedFetch,\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqDgE;AArDhE,mBAUO;AAMP,0BAIO;AAEP,yBAAgC;AA+BzB,MAAM,cAAc,CAAC,EAAE,SAAS,MAAyB,2EAAG,UAAS;AAErE,MAAM,eAA+B,CAAC,EAAE,UAAU,MAAM,OAAO,GAAG,MAAM,MAC7E;AAAA,EAAC;AAAA;AAAA,IACE,GAAG;AAAA,IACJ,OAAO;AAAA,MACL,GAAI,OACA;AAAA,QACE,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,WAAW;AAAA,MACb,IACA,CAAC;AAAA,MACL,GAAG;AAAA,IACL;AAAA,IACA,SAAS,WAAW,UAAU;AAAA;AAChC;AAGK,MAAM,kBAA6B;AAAA,EACxC,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,QAAQ,4CAAC,OAAG,GAAG,OAAO,KAAU;AAC3D;AAEO,MAAM,iBAAqD,iBAAe,CAAC,KAAK,SACrF,MAAM,KAAK;AAAA,EACT,GAAG;AAAA,EACH,SAAS;AAAA,IACP,GAAG,MAAM;AAAA,IACT,GAAI,eAAe,OACf,EAAE,CAAC,sCAAkB,WAAW,OAAG,0CAAqB,WAAW,EAAE,IACrE,CAAC;AAAA,EACP;AACF,CAAC;AAEI,MAAM,uBAAmB,4BAAgC;AAAA,EAC9D,MAAM;AAAA,EACN,aAAa;AAAA,EACb,OAAO;AAAA,EACP,MAAM;AAAA,EACN;AACF,CAAC;","names":[]}

package/dist/cjs/runtimes/react/components/page/index.js

@@ -38,22 +38,24 @@ function useRegisterPageDocument(pageDocument) {
   (0, import_use_universal_dispatch.useUniversalDispatch)(dispatch, import_actions.registerDocumentsEffect, [rootDocuments]);
   return rootDocuments[0];
 }
-const Page = ({
-  snapshot,
-  metadata
-}) => {
-  (0, import_use_cache_data.useCacheData)(snapshot.cacheData);
-  const rootDocument = useRegisterPageDocument(snapshot.document);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_Page.Page,
-    {
-      page: snapshot.document,
-      rootDocument,
-      metadata
-    },
-    snapshot.document.data.key
-  ) });
-};
+const Page = (0, import_react.memo)(
+  ({
+    snapshot,
+    metadata = true
+  }) => {
+    (0, import_use_cache_data.useCacheData)(snapshot.cacheData);
+    const rootDocument = useRegisterPageDocument(snapshot.document);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Page.Page,
+      {
+        page: snapshot.document,
+        rootDocument,
+        metadata
+      },
+      snapshot.document.data.key
+    ) });
+  }
+);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Page

package/dist/cjs/runtimes/react/components/page/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/runtimes/react/components/page/index.tsx"],"sourcesContent":["import { Suspense, useMemo } from 'react'\n\nimport { useDispatch } from '../../hooks/use-dispatch'\nimport { useUniversalDispatch } from '../../hooks/use-universal-dispatch'\nimport { useCacheData } from '../../hooks/use-cache-data'\n\nimport {\n  type MakeswiftPageSnapshot,\n  type MakeswiftPageDocument,\n  pageToRootDocument,\n} from '../../../../client'\n\nimport * as ReactPage from '../../../../state/react-page'\nimport { registerDocumentsEffect } from '../../../../state/actions'\n\nimport { type PageMetadataSettings } from './page-seo-settings'\nimport { Page as PageComponent } from './Page'\n\nexport { type PageMetadataSettings } from './page-seo-settings'\n\nfunction useRegisterPageDocument(pageDocument: MakeswiftPageDocument): ReactPage.Document {\n  const dispatch = useDispatch()\n  const rootDocuments: [ReactPage.Document] = useMemo(\n    () => [pageToRootDocument(pageDocument)],\n    [pageDocument],\n  )\n\n  useUniversalDispatch(dispatch, registerDocumentsEffect, [rootDocuments])\n\n  return rootDocuments[0]\n}\n\nexport const Page = ({\n  snapshot,\n  metadata,\n}: {\n  snapshot: MakeswiftPageSnapshot\n  metadata: boolean | PageMetadataSettings\n}) => {\n  useCacheData(snapshot.cacheData)\n\n  const rootDocument = useRegisterPageDocument(snapshot.document)\n\n  return (\n    <Suspense>\n      {/* We use a key here to reset the Snippets state in the PageMeta component */}\n      <PageComponent\n        key={snapshot.document.data.key}\n        page={snapshot.document}\n        rootDocument={rootDocument}\n        metadata={metadata}\n      />\n    </Suspense>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8CM;AA9CN,mBAAkC;AAElC,0BAA4B;AAC5B,oCAAqC;AACrC,4BAA6B;AAE7B,oBAIO;AAGP,qBAAwC;AAGxC,kBAAsC;AAItC,SAAS,wBAAwB,cAAyD;AACxF,QAAM,eAAW,iCAAY;AAC7B,QAAM,oBAAsC;AAAA,IAC1C,MAAM,KAAC,kCAAmB,YAAY,CAAC;AAAA,IACvC,CAAC,YAAY;AAAA,EACf;AAEA,0DAAqB,UAAU,wCAAyB,CAAC,aAAa,CAAC;AAEvE,SAAO,cAAc,CAAC;AACxB;AAEO,MAAM,OAAO,CAAC;AAAA,EACnB;AAAA,EACA;AACF,MAGM;AACJ,0CAAa,SAAS,SAAS;AAE/B,QAAM,eAAe,wBAAwB,SAAS,QAAQ;AAE9D,SACE,4CAAC,yBAEC;AAAA,IAAC,YAAAA;AAAA,IAAA;AAAA,MAEC,MAAM,SAAS;AAAA,MACf;AAAA,MACA;AAAA;AAAA,IAHK,SAAS,SAAS,KAAK;AAAA,EAI9B,GACF;AAEJ;","names":["PageComponent"]}
+{"version":3,"sources":["../../../../../../src/runtimes/react/components/page/index.tsx"],"sourcesContent":["import { Suspense, useMemo, memo, type ComponentProps } from 'react'\n\nimport { useDispatch } from '../../hooks/use-dispatch'\nimport { useUniversalDispatch } from '../../hooks/use-universal-dispatch'\nimport { useCacheData } from '../../hooks/use-cache-data'\n\nimport {\n  type MakeswiftPageSnapshot,\n  type MakeswiftPageDocument,\n  pageToRootDocument,\n} from '../../../../client'\n\nimport * as ReactPage from '../../../../state/react-page'\nimport { registerDocumentsEffect } from '../../../../state/actions'\n\nimport { type PageMetadataSettings } from './page-seo-settings'\nimport { Page as PageComponent } from './Page'\n\nexport { type PageMetadataSettings } from './page-seo-settings'\n\nfunction useRegisterPageDocument(pageDocument: MakeswiftPageDocument): ReactPage.Document {\n  const dispatch = useDispatch()\n  const rootDocuments: [ReactPage.Document] = useMemo(\n    () => [pageToRootDocument(pageDocument)],\n    [pageDocument],\n  )\n\n  useUniversalDispatch(dispatch, registerDocumentsEffect, [rootDocuments])\n\n  return rootDocuments[0]\n}\n\n/**\n * @param snapshot - The snapshot of the page to render, from\n * `client.getPageSnapshot()`.\n * @param metadata - Allows control over whether to use data from Makeswift for\n * rendering metadata tags in the `<head>` of the page. Pass `true` (default if\n * not provided) to render all metadata tags, or `false` to not render any. For\n * more granular control, pass an object with boolean values for specific\n * metadata fields. Valid fields include:\n *  - `title`\n *  - `description`\n *  - `keywords`\n *  - `socialImage`\n *  - `canonicalUrl`\n *  - `indexingBlocked`\n *  - `favicon`\n *\n * If a field is not provided, it will default to `false`.\n */\nexport const Page = memo(\n  ({\n    snapshot,\n    metadata = true,\n  }: {\n    snapshot: MakeswiftPageSnapshot\n    metadata?: boolean | PageMetadataSettings\n  }) => {\n    useCacheData(snapshot.cacheData)\n\n    const rootDocument = useRegisterPageDocument(snapshot.document)\n\n    return (\n      <Suspense>\n        {/* We use a key here to reset the Snippets state in the PageMeta component */}\n        <PageComponent\n          key={snapshot.document.data.key}\n          page={snapshot.document}\n          rootDocument={rootDocument}\n          metadata={metadata}\n        />\n      </Suspense>\n    )\n  },\n)\n\nexport type PageProps = ComponentProps<typeof Page>\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiEQ;AAjER,mBAA6D;AAE7D,0BAA4B;AAC5B,oCAAqC;AACrC,4BAA6B;AAE7B,oBAIO;AAGP,qBAAwC;AAGxC,kBAAsC;AAItC,SAAS,wBAAwB,cAAyD;AACxF,QAAM,eAAW,iCAAY;AAC7B,QAAM,oBAAsC;AAAA,IAC1C,MAAM,KAAC,kCAAmB,YAAY,CAAC;AAAA,IACvC,CAAC,YAAY;AAAA,EACf;AAEA,0DAAqB,UAAU,wCAAyB,CAAC,aAAa,CAAC;AAEvE,SAAO,cAAc,CAAC;AACxB;AAoBO,MAAM,WAAO;AAAA,EAClB,CAAC;AAAA,IACC;AAAA,IACA,WAAW;AAAA,EACb,MAGM;AACJ,4CAAa,SAAS,SAAS;AAE/B,UAAM,eAAe,wBAAwB,SAAS,QAAQ;AAE9D,WACE,4CAAC,yBAEC;AAAA,MAAC,YAAAA;AAAA,MAAA;AAAA,QAEC,MAAM,SAAS;AAAA,QACf;AAAA,QACA;AAAA;AAAA,MAHK,SAAS,SAAS,KAAK;AAAA,IAI9B,GACF;AAAA,EAEJ;AACF;","names":["PageComponent"]}

package/dist/cjs/runtimes/react/components/{draft-switcher/draft-switcher.js → preview-switcher/preview-switcher.js}

@@ -16,32 +16,22 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var draft_switcher_exports = {};
-__export(draft_switcher_exports, {
-  DraftSwitcher: () => DraftSwitcher
+var preview_switcher_exports = {};
+__export(preview_switcher_exports, {
+  PreviewSwitcher: () => PreviewSwitcher
 });
-module.exports = __toCommonJS(draft_switcher_exports);
+module.exports = __toCommonJS(preview_switcher_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_react_dom = require("react-dom");
 var import_head_tags = require("../page/head-tags");
 var import_use_is_in_builder = require("../../hooks/use-is-in-builder");
-var import_draft_toolbar = require("./draft-toolbar");
-const ClearDraftModeRequestPath = "/api/makeswift/clear-draft";
-async function exitDraftMode() {
-  try {
-    await fetch(ClearDraftModeRequestPath);
-    window.location.reload();
-  } catch (err) {
-    console.error("Could not clear Makeswift cookies. Please report this error to your developer.");
-    console.error(err);
-  }
-}
-function DraftSwitcher({ isDraft }) {
+var import_preview_toolbar = require("./preview-toolbar");
+function PreviewSwitcher({ isPreview }) {
   const shadowContainerRef = (0, import_react.useRef)(null);
   const [shadowRoot, setShadowRoot] = (0, import_react.useState)(null);
   const isInBuilder = (0, import_use_is_in_builder.useIsInBuilder)();
-  const showToolbar = !isInBuilder && isDraft;
+  const showToolbar = !isInBuilder && isPreview;
   (0, import_react.useEffect)(() => {
     if (!showToolbar)
       return;
@@ -51,18 +41,18 @@ function DraftSwitcher({ isDraft }) {
     }
   }, [showToolbar, shadowRoot, setShadowRoot]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    showToolbar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { id: "makeswift-draft-switcher", ref: shadowContainerRef, children: shadowRoot ? (0, import_react_dom.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_draft_toolbar.DraftToolbar, { onExitDraft: exitDraftMode }), shadowRoot) : null }),
+    showToolbar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { id: "makeswift-preview-switcher", ref: shadowContainerRef, children: shadowRoot ? (0, import_react_dom.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_preview_toolbar.PreviewToolbar, {}), shadowRoot) : null }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_head_tags.PageMeta,
       {
-        name: "makeswift-draft-info",
-        content: JSON.stringify({ draft: isDraft, inBuilder: isInBuilder })
+        name: "makeswift-preview-info",
+        content: JSON.stringify({ isPreview, inBuilder: isInBuilder })
       }
     )
   ] });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  DraftSwitcher
+  PreviewSwitcher
 });
-//# sourceMappingURL=draft-switcher.js.map
+//# sourceMappingURL=preview-switcher.js.map

package/dist/cjs/runtimes/react/components/preview-switcher/preview-switcher.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/runtimes/react/components/preview-switcher/preview-switcher.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\n\nimport { PageMeta } from '../page/head-tags'\nimport { useIsInBuilder } from '../../hooks/use-is-in-builder'\nimport { PreviewToolbar } from './preview-toolbar'\n\nexport function PreviewSwitcher({ isPreview }: { isPreview: boolean }) {\n  const shadowContainerRef = useRef<HTMLSpanElement | null>(null)\n  const [shadowRoot, setShadowRoot] = useState<ShadowRoot | null>(null)\n  const isInBuilder = useIsInBuilder()\n\n  const showToolbar = !isInBuilder && isPreview\n\n  useEffect(() => {\n    if (!showToolbar) return\n    if (\n      shadowContainerRef.current &&\n      shadowContainerRef.current.shadowRoot == null &&\n      shadowRoot == null\n    ) {\n      const root = shadowContainerRef.current.attachShadow({ mode: 'open' })\n      setShadowRoot(root)\n    }\n  }, [showToolbar, shadowRoot, setShadowRoot])\n\n  return (\n    <>\n      {showToolbar && (\n        <span id=\"makeswift-preview-switcher\" ref={shadowContainerRef}>\n          {shadowRoot ? createPortal(<PreviewToolbar />, shadowRoot) : null}\n        </span>\n      )}\n      {/* Insert preview mode information into the DOM to make it easier to debug preview mode-related\n          issues on production sites */}\n      <PageMeta\n        name=\"makeswift-preview-info\"\n        content={JSON.stringify({ isPreview: isPreview, inBuilder: isInBuilder })}\n      />\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA2BI;AA3BJ,mBAA4C;AAC5C,uBAA6B;AAE7B,uBAAyB;AACzB,+BAA+B;AAC/B,6BAA+B;AAExB,SAAS,gBAAgB,EAAE,UAAU,GAA2B;AACrE,QAAM,yBAAqB,qBAA+B,IAAI;AAC9D,QAAM,CAAC,YAAY,aAAa,QAAI,uBAA4B,IAAI;AACpE,QAAM,kBAAc,yCAAe;AAEnC,QAAM,cAAc,CAAC,eAAe;AAEpC,8BAAU,MAAM;AACd,QAAI,CAAC;AAAa;AAClB,QACE,mBAAmB,WACnB,mBAAmB,QAAQ,cAAc,QACzC,cAAc,MACd;AACA,YAAM,OAAO,mBAAmB,QAAQ,aAAa,EAAE,MAAM,OAAO,CAAC;AACrE,oBAAc,IAAI;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,aAAa,YAAY,aAAa,CAAC;AAE3C,SACE,4EACG;AAAA,mBACC,4CAAC,UAAK,IAAG,8BAA6B,KAAK,oBACxC,2BAAa,+BAAa,4CAAC,yCAAe,GAAI,UAAU,IAAI,MAC/D;AAAA,IAIF;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS,KAAK,UAAU,EAAE,WAAsB,WAAW,YAAY,CAAC;AAAA;AAAA,IAC1E;AAAA,KACF;AAEJ;","names":[]}

package/dist/cjs/runtimes/react/components/{draft-switcher/draft-toolbar.js → preview-switcher/preview-toolbar.js}

@@ -16,12 +16,13 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var draft_toolbar_exports = {};
-__export(draft_toolbar_exports, {
-  DraftToolbar: () => DraftToolbar
+var preview_toolbar_exports = {};
+__export(preview_toolbar_exports, {
+  PreviewToolbar: () => PreviewToolbar
 });
-module.exports = __toCommonJS(draft_toolbar_exports);
+module.exports = __toCommonJS(preview_toolbar_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
 const makeswiftIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAACXBIWXMAABcRAAAXEQHKJvM/AAABjElEQVRYhc2XzU3EMBCFB8TddAAXn6EE6GCpgNABZ1/IXnymBOgAOmA7YM8+ABVsXEHQQFaKQryeN3Yk3ilKJtEnv/nLUd/3pFG0riGi88yrnQn+UfJ5FUi0riWiB2H4nQn+KRd0DFP8agXEfkqCYJBoHdtxIQxfm+DfFgEhoith3NYE30o/qgGR2BJB+xY7kdYEL8oNFUi0jiFMJuxVWrJqEMFxsyUNCsE6AeNztvBp7aJ143vXksoRnwhYtmNdSoIQa6RlO9YXEWW7KgoCleOgxgTf1QZBT+RZ2lXFING6UxCCq+ceeUE8fYdknY599v9sJvzGBP+yCEgC7GPmETc0OJ+0awAlkhe2pAbIXAeFZ8xe2g2Nk3c3ub0xwWt6zY9qbmiqGVMbZK21ZC/YmhlbeBMTzZNDQqcvDb1kM1x32iqZSt1HaqukfKvq34BAOTLsrH+ETNmUkKHHA+428RgeclPVWozeSyAI2EdWB34jtqXNTAySOY3i/KgFIlqOa4GkFmBegorzg4joG07he/M7zl6jAAAAAElFTkSuQmCC";
 const styles = `
 .exit-preview-container {
@@ -41,6 +42,7 @@ const styles = `
     0 11px 40px 0 rgba(0, 0, 0, 0.25),
     0 2px 10px 0 rgba(0, 0, 0, 0.12);
   transition: 150ms;
+  text-decoration: none;
 
   font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
     'Segoe UI Emoji';
@@ -63,17 +65,23 @@ const styles = `
     0 6px 10px 0 rgba(0, 0, 0, 0.15);
 }
 `;
-function DraftToolbar({ onExitDraft }) {
+function PreviewToolbar() {
+  const redirectLiveUrl = (0, import_react.useMemo)(() => {
+    const currentUrl = new URL(window.location.href);
+    const destination = `${currentUrl.pathname}${currentUrl.search}${currentUrl.hash}`;
+    currentUrl.searchParams.set("makeswift-redirect-live", encodeURIComponent(destination));
+    return currentUrl.toString();
+  }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { dangerouslySetInnerHTML: { __html: styles } }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "exit-preview-container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { className: "exit-preview-button", onClick: onExitDraft, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "exit-preview-container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("a", { className: "exit-preview-button", href: redirectLiveUrl, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: makeswiftIcon, alt: "Makeswift Logo", width: 18, height: 18 }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "label", children: "Exit Preview" })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "label", children: "Exit preview" })
     ] }) })
   ] });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  DraftToolbar
+  PreviewToolbar
 });
-//# sourceMappingURL=draft-toolbar.js.map
+//# sourceMappingURL=preview-toolbar.js.map

package/dist/cjs/runtimes/react/components/preview-switcher/preview-toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/runtimes/react/components/preview-switcher/preview-toolbar.tsx"],"sourcesContent":["import { useMemo } from 'react'\n\nconst makeswiftIcon =\n  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAACXBIWXMAABcRAAAXEQHKJvM/AAABjElEQVRYhc2XzU3EMBCFB8TddAAXn6EE6GCpgNABZ1/IXnymBOgAOmA7YM8+ABVsXEHQQFaKQryeN3Yk3ilKJtEnv/nLUd/3pFG0riGi88yrnQn+UfJ5FUi0riWiB2H4nQn+KRd0DFP8agXEfkqCYJBoHdtxIQxfm+DfFgEhoith3NYE30o/qgGR2BJB+xY7kdYEL8oNFUi0jiFMJuxVWrJqEMFxsyUNCsE6AeNztvBp7aJ143vXksoRnwhYtmNdSoIQa6RlO9YXEWW7KgoCleOgxgTf1QZBT+RZ2lXFING6UxCCq+ceeUE8fYdknY599v9sJvzGBP+yCEgC7GPmETc0OJ+0awAlkhe2pAbIXAeFZ8xe2g2Nk3c3ub0xwWt6zY9qbmiqGVMbZK21ZC/YmhlbeBMTzZNDQqcvDb1kM1x32iqZSt1HaqukfKvq34BAOTLsrH+ETNmUkKHHA+428RgeclPVWozeSyAI2EdWB34jtqXNTAySOY3i/KgFIlqOa4GkFmBegorzg4joG07he/M7zl6jAAAAAElFTkSuQmCC'\n\nconst styles = `\n.exit-preview-container {\n  position: fixed;\n  bottom: 16px;\n  right: 16px;\n  z-index: 2147483647;\n}\n\n.exit-preview-button {\n  background: #2e2e2e;\n  padding: 10px 18px 10px 14px;\n  border: 0px;\n  border-radius: 32px;\n  color: #efefef;\n  box-shadow:\n    0 11px 40px 0 rgba(0, 0, 0, 0.25),\n    0 2px 10px 0 rgba(0, 0, 0, 0.12);\n  transition: 150ms;\n  text-decoration: none;\n\n  font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',\n    'Segoe UI Emoji';\n  font-size: 14px;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.exit-preview-button > .label {\n  transform: translateY(-1px);\n}\n\n.exit-preview-container:hover > .exit-preview-button {\n  transform: translateY(-2px);\n  box-shadow:\n    0 15px 40px 0 rgba(0, 0, 0, 0.3),\n    0 6px 10px 0 rgba(0, 0, 0, 0.15);\n}\n`\n\nexport function PreviewToolbar() {\n  const redirectLiveUrl = useMemo(() => {\n    const currentUrl = new URL(window.location.href)\n    const destination = `${currentUrl.pathname}${currentUrl.search}${currentUrl.hash}`\n    currentUrl.searchParams.set('makeswift-redirect-live', encodeURIComponent(destination))\n    return currentUrl.toString()\n  }, [])\n\n  return (\n    <>\n      <style dangerouslySetInnerHTML={{ __html: styles }} />\n      <div className=\"exit-preview-container\">\n        <a className=\"exit-preview-button\" href={redirectLiveUrl}>\n          <img src={makeswiftIcon} alt=\"Makeswift Logo\" width={18} height={18} />\n          <span className=\"label\">Exit preview</span>\n        </a>\n      </div>\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwDI;AAxDJ,mBAAwB;AAExB,MAAM,gBACJ;AAEF,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0CR,SAAS,iBAAiB;AAC/B,QAAM,sBAAkB,sBAAQ,MAAM;AACpC,UAAM,aAAa,IAAI,IAAI,OAAO,SAAS,IAAI;AAC/C,UAAM,cAAc,GAAG,WAAW,QAAQ,GAAG,WAAW,MAAM,GAAG,WAAW,IAAI;AAChF,eAAW,aAAa,IAAI,2BAA2B,mBAAmB,WAAW,CAAC;AACtF,WAAO,WAAW,SAAS;AAAA,EAC7B,GAAG,CAAC,CAAC;AAEL,SACE,4EACE;AAAA,gDAAC,WAAM,yBAAyB,EAAE,QAAQ,OAAO,GAAG;AAAA,IACpD,4CAAC,SAAI,WAAU,0BACb,uDAAC,OAAE,WAAU,uBAAsB,MAAM,iBACvC;AAAA,kDAAC,SAAI,KAAK,eAAe,KAAI,kBAAiB,OAAO,IAAI,QAAQ,IAAI;AAAA,MACrE,4CAAC,UAAK,WAAU,SAAQ,0BAAY;AAAA,OACtC,GACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/cjs/runtimes/react/controls/style.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/controls/style.ts"],"sourcesContent":["import { CSSObject } from '@emotion/css'\nimport {\n  Style,\n  type StyleProperty,\n  type ResolvedBorderSideData,\n  type FontSizePropertyData,\n  type WidthPropertyData,\n  type ResolvedStyleData,\n} from '@makeswift/controls'\n\nimport { colorToString } from '../../../components/utils/colorToString'\nimport { responsiveStyle } from '../../../components/utils/responsive-style'\n\nimport { BorderRadiusLonghandPropertyData } from '../../../css/border-radius'\nimport { lengthPercentageDataToString } from '../../../css/length-percentage'\nimport { marginPropertyDataToStyle } from '../../../css/margin'\nimport { paddingPropertyDataToStyle } from '../../../css/padding'\nimport { Breakpoints } from '../../../state/modules/breakpoints'\n\nconst defaultMargin = {\n  marginTop: 0,\n  marginRight: 'auto',\n  marginBottom: 0,\n  marginLeft: 'auto',\n}\n\nconst defaultPadding = {\n  paddingTop: 0,\n  paddingRight: 0,\n  paddingBottom: 0,\n  paddingLeft: 0,\n}\n\nexport function styleV1Css(\n  breakpoints: Breakpoints,\n  style: ResolvedStyleData | undefined,\n  properties: StyleProperty[],\n): CSSObject {\n  return {\n    ...(properties.includes(Style.Width) && {\n      maxWidth: '100%',\n    }),\n    ...responsiveStyle(\n      breakpoints,\n      [\n        style?.width,\n        style?.margin,\n        style?.padding,\n        style?.border,\n        style?.borderRadius,\n        style?.textStyle,\n      ] as const,\n      ([width, margin, padding, border, borderRadius, textStyle]) => ({\n        ...(properties.includes(Style.Width) && {\n          width: widthToString(width) ?? '100%',\n        }),\n        ...(properties.includes(Style.Margin) &&\n          marginPropertyDataToStyle(margin ?? defaultMargin, defaultMargin)),\n        ...(properties.includes(Style.Padding) &&\n          paddingPropertyDataToStyle(padding ?? defaultPadding, defaultPadding)),\n        ...(properties.includes(Style.Border) && {\n          borderTop: borderSideToString(border?.borderTop) ?? '0 solid black',\n          borderRight: borderSideToString(border?.borderRight) ?? '0 solid black',\n          borderBottom: borderSideToString(border?.borderBottom) ?? '0 solid black',\n          borderLeft: borderSideToString(border?.borderLeft) ?? '0 solid black',\n        }),\n        ...(properties.includes(Style.BorderRadius) && {\n          borderTopLeftRadius: borderRadiusToString(borderRadius?.borderTopLeftRadius) ?? 0,\n          borderTopRightRadius: borderRadiusToString(borderRadius?.borderTopRightRadius) ?? 0,\n          borderBottomRightRadius: borderRadiusToString(borderRadius?.borderBottomRightRadius) ?? 0,\n          borderBottomLeftRadius: borderRadiusToString(borderRadius?.borderBottomLeftRadius) ?? 0,\n        }),\n        ...(properties.includes(Style.TextStyle) && {\n          ...(textStyle?.fontFamily && { fontFamily: `\"${textStyle.fontFamily}\"` }),\n          ...(textStyle?.letterSpacing && { letterSpacing: textStyle.letterSpacing }),\n          ...(textStyle?.fontSize && { fontSize: fontSizeToString(textStyle.fontSize) }),\n          ...(textStyle?.fontWeight && { fontWeight: textStyle.fontWeight }),\n          textTransform: textStyle?.textTransform ?? [],\n          fontStyle: textStyle?.fontStyle ?? [],\n        }),\n      }),\n    ),\n  }\n\n  function widthToString(widthProperty: WidthPropertyData | undefined): string | null {\n    if (widthProperty == null) return null\n\n    return lengthPercentageDataToString(widthProperty)\n  }\n\n  function borderSideToString(\n    borderSide: ResolvedBorderSideData | null | undefined,\n  ): string | null {\n    if (borderSide == null) return null\n\n    const { width, color, style } = borderSide\n    return `${width != null ? width : 0}px ${style} ${\n      color != null ? colorToString(color) : 'black'\n    }`\n  }\n\n  function borderRadiusToString(\n    borderRadius: BorderRadiusLonghandPropertyData | null | undefined,\n  ): string | null {\n    if (borderRadius == null) return null\n\n    return lengthPercentageDataToString(borderRadius)\n  }\n\n  function fontSizeToString(fontSize: NonNullable<FontSizePropertyData>) {\n    return `${fontSize.value}${fontSize.unit}`\n  }\n}\n"],"mappings":"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","names":["style"]}
+{"version":3,"sources":["../../../../../src/runtimes/react/controls/style.ts"],"sourcesContent":["import { type CSSObject } from '@emotion/serialize'\nimport {\n  Style,\n  type StyleProperty,\n  type ResolvedBorderSideData,\n  type FontSizePropertyData,\n  type WidthPropertyData,\n  type ResolvedStyleData,\n} from '@makeswift/controls'\n\nimport { colorToString } from '../../../components/utils/colorToString'\nimport { responsiveStyle } from '../../../components/utils/responsive-style'\n\nimport { BorderRadiusLonghandPropertyData } from '../../../css/border-radius'\nimport { lengthPercentageDataToString } from '../../../css/length-percentage'\nimport { marginPropertyDataToStyle } from '../../../css/margin'\nimport { paddingPropertyDataToStyle } from '../../../css/padding'\nimport { Breakpoints } from '../../../state/modules/breakpoints'\n\nconst defaultMargin = {\n  marginTop: 0,\n  marginRight: 'auto',\n  marginBottom: 0,\n  marginLeft: 'auto',\n}\n\nconst defaultPadding = {\n  paddingTop: 0,\n  paddingRight: 0,\n  paddingBottom: 0,\n  paddingLeft: 0,\n}\n\nexport function styleV1Css(\n  breakpoints: Breakpoints,\n  style: ResolvedStyleData | undefined,\n  properties: StyleProperty[],\n): CSSObject {\n  return {\n    ...(properties.includes(Style.Width) && {\n      maxWidth: '100%',\n    }),\n    ...responsiveStyle(\n      breakpoints,\n      [\n        style?.width,\n        style?.margin,\n        style?.padding,\n        style?.border,\n        style?.borderRadius,\n        style?.textStyle,\n      ] as const,\n      ([width, margin, padding, border, borderRadius, textStyle]) => ({\n        ...(properties.includes(Style.Width) && {\n          width: widthToString(width) ?? '100%',\n        }),\n        ...(properties.includes(Style.Margin) &&\n          marginPropertyDataToStyle(margin ?? defaultMargin, defaultMargin)),\n        ...(properties.includes(Style.Padding) &&\n          paddingPropertyDataToStyle(padding ?? defaultPadding, defaultPadding)),\n        ...(properties.includes(Style.Border) && {\n          borderTop: borderSideToString(border?.borderTop) ?? '0 solid black',\n          borderRight: borderSideToString(border?.borderRight) ?? '0 solid black',\n          borderBottom: borderSideToString(border?.borderBottom) ?? '0 solid black',\n          borderLeft: borderSideToString(border?.borderLeft) ?? '0 solid black',\n        }),\n        ...(properties.includes(Style.BorderRadius) && {\n          borderTopLeftRadius: borderRadiusToString(borderRadius?.borderTopLeftRadius) ?? 0,\n          borderTopRightRadius: borderRadiusToString(borderRadius?.borderTopRightRadius) ?? 0,\n          borderBottomRightRadius: borderRadiusToString(borderRadius?.borderBottomRightRadius) ?? 0,\n          borderBottomLeftRadius: borderRadiusToString(borderRadius?.borderBottomLeftRadius) ?? 0,\n        }),\n        ...(properties.includes(Style.TextStyle) && {\n          ...(textStyle?.fontFamily && { fontFamily: `\"${textStyle.fontFamily}\"` }),\n          ...(textStyle?.letterSpacing && { letterSpacing: textStyle.letterSpacing }),\n          ...(textStyle?.fontSize && { fontSize: fontSizeToString(textStyle.fontSize) }),\n          ...(textStyle?.fontWeight && { fontWeight: textStyle.fontWeight }),\n          textTransform: textStyle?.textTransform ?? [],\n          fontStyle: textStyle?.fontStyle ?? [],\n        }),\n      }),\n    ),\n  }\n\n  function widthToString(widthProperty: WidthPropertyData | undefined): string | null {\n    if (widthProperty == null) return null\n\n    return lengthPercentageDataToString(widthProperty)\n  }\n\n  function borderSideToString(\n    borderSide: ResolvedBorderSideData | null | undefined,\n  ): string | null {\n    if (borderSide == null) return null\n\n    const { width, color, style } = borderSide\n    return `${width != null ? width : 0}px ${style} ${\n      color != null ? colorToString(color) : 'black'\n    }`\n  }\n\n  function borderRadiusToString(\n    borderRadius: BorderRadiusLonghandPropertyData | null | undefined,\n  ): string | null {\n    if (borderRadius == null) return null\n\n    return lengthPercentageDataToString(borderRadius)\n  }\n\n  function fontSizeToString(fontSize: NonNullable<FontSizePropertyData>) {\n    return `${fontSize.value}${fontSize.unit}`\n  }\n}\n"],"mappings":"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","names":["style"]}

package/dist/cjs/runtimes/react/hooks/makeswift-api.js

@@ -31,13 +31,12 @@ __export(makeswift_api_exports, {
 });
 module.exports = __toCommonJS(makeswift_api_exports);
 var import_react = require("react");
-var import_shim = require("use-sync-external-store/shim");
 var import_host_api_client = require("../host-api-client");
 var import_use_document_context = require("./use-document-context");
 function useSwatch(swatchId) {
   const client = (0, import_host_api_client.useMakeswiftHostApiClient)();
   const readSwatch = () => swatchId == null ? null : client.readSwatch(swatchId);
-  const swatch = (0, import_shim.useSyncExternalStore)(client.subscribe, readSwatch, readSwatch);
+  const swatch = (0, import_react.useSyncExternalStore)(client.subscribe, readSwatch, readSwatch);
   (0, import_react.useEffect)(() => {
     if (swatchId != null)
       client.fetchSwatch(swatchId).catch(console.error);
@@ -54,7 +53,7 @@ function useSwatches(swatchIds) {
     }
     return lastSnapshot.current = swatches2;
   }
-  const swatches = (0, import_shim.useSyncExternalStore)(client.subscribe, getSnapshot, getSnapshot);
+  const swatches = (0, import_react.useSyncExternalStore)(client.subscribe, getSnapshot, getSnapshot);
   (0, import_react.useEffect)(() => {
     Promise.all(swatchIds.map((swatchId) => client.fetchSwatch(swatchId))).catch(console.error);
   }, [client, swatchIds]);
@@ -63,7 +62,7 @@ function useSwatches(swatchIds) {
 function useFile(fileId) {
   const client = (0, import_host_api_client.useMakeswiftHostApiClient)();
   const readFile = () => fileId == null ? null : client.readFile(fileId);
-  const file = (0, import_shim.useSyncExternalStore)(client.subscribe, readFile, readFile);
+  const file = (0, import_react.useSyncExternalStore)(client.subscribe, readFile, readFile);
   (0, import_react.useEffect)(() => {
     if (fileId != null)
       client.fetchFile(fileId);
@@ -80,7 +79,7 @@ function useFiles(fileIds) {
     }
     return lastSnapshot.current = files2;
   }
-  const files = (0, import_shim.useSyncExternalStore)(client.subscribe, getSnapshot, getSnapshot);
+  const files = (0, import_react.useSyncExternalStore)(client.subscribe, getSnapshot, getSnapshot);
   (0, import_react.useEffect)(() => {
     Promise.all(fileIds.map((fileId) => client.fetchFile(fileId))).catch(console.error);
   }, [client, fileIds]);
@@ -89,7 +88,7 @@ function useFiles(fileIds) {
 function useTypography(typographyId) {
   const client = (0, import_host_api_client.useMakeswiftHostApiClient)();
   const readTypography = () => typographyId == null ? null : client.readTypography(typographyId);
-  const typography = (0, import_shim.useSyncExternalStore)(client.subscribe, readTypography, readTypography);
+  const typography = (0, import_react.useSyncExternalStore)(client.subscribe, readTypography, readTypography);
   (0, import_react.useEffect)(() => {
     if (typographyId != null)
       client.fetchTypography(typographyId).catch(console.error);
@@ -99,7 +98,7 @@ function useTypography(typographyId) {
 function useGlobalElement(globalElementId) {
   const client = (0, import_host_api_client.useMakeswiftHostApiClient)();
   const readGlobalElement = () => globalElementId == null ? null : client.readGlobalElement(globalElementId);
-  const globalElement = (0, import_shim.useSyncExternalStore)(client.subscribe, readGlobalElement, readGlobalElement);
+  const globalElement = (0, import_react.useSyncExternalStore)(client.subscribe, readGlobalElement, readGlobalElement);
   (0, import_react.useEffect)(() => {
     if (globalElementId != null)
       client.fetchGlobalElement(globalElementId).catch(console.error);
@@ -109,7 +108,7 @@ function useGlobalElement(globalElementId) {
 function useLocalizedGlobalElement(locale, globalElementId) {
   const client = (0, import_host_api_client.useMakeswiftHostApiClient)();
   const readLocalizedGlobalElement = () => locale == null || globalElementId == null ? null : client.readLocalizedGlobalElement({ globalElementId, locale });
-  const localizedGlobalElement = (0, import_shim.useSyncExternalStore)(
+  const localizedGlobalElement = (0, import_react.useSyncExternalStore)(
     client.subscribe,
     readLocalizedGlobalElement,
     readLocalizedGlobalElement
@@ -125,7 +124,7 @@ function usePagePathnameSlice(pageId) {
   const client = (0, import_host_api_client.useMakeswiftHostApiClient)();
   const locale = (0, import_use_document_context.useDocumentLocale)();
   const readPagePathnameSlice = () => pageId == null ? null : client.readPagePathnameSlice({ pageId, locale });
-  const pagePathnameSlice = (0, import_shim.useSyncExternalStore)(
+  const pagePathnameSlice = (0, import_react.useSyncExternalStore)(
     client.subscribe,
     readPagePathnameSlice,
     readPagePathnameSlice
@@ -139,7 +138,7 @@ function usePagePathnameSlice(pageId) {
 function useTable(tableId) {
   const client = (0, import_host_api_client.useMakeswiftHostApiClient)();
   const readTable = () => tableId == null ? null : client.readTable(tableId);
-  const table = (0, import_shim.useSyncExternalStore)(client.subscribe, readTable, readTable);
+  const table = (0, import_react.useSyncExternalStore)(client.subscribe, readTable, readTable);
   (0, import_react.useEffect)(() => {
     if (tableId != null)
       client.fetchTable(tableId).catch(console.error);

package/dist/cjs/runtimes/react/hooks/makeswift-api.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/hooks/makeswift-api.ts"],"sourcesContent":["'use client'\n\nimport { useEffect, useRef } from 'react'\nimport { useSyncExternalStore } from 'use-sync-external-store/shim'\nimport {\n  File,\n  GlobalElement,\n  LocalizedGlobalElement,\n  PagePathnameSlice,\n  Swatch,\n  Table,\n  Typography,\n} from '../../../api'\n\nimport { useMakeswiftHostApiClient } from '../host-api-client'\nimport { useDocumentLocale } from './use-document-context'\n\nexport function useSwatch(swatchId: string | null): Swatch | null {\n  const client = useMakeswiftHostApiClient()\n  const readSwatch = () => (swatchId == null ? null : client.readSwatch(swatchId))\n  const swatch = useSyncExternalStore(client.subscribe, readSwatch, readSwatch)\n\n  useEffect(() => {\n    if (swatchId != null) client.fetchSwatch(swatchId).catch(console.error)\n  }, [client, swatchId])\n\n  return swatch\n}\n\nexport function useSwatches(swatchIds: string[]): (Swatch | null)[] {\n  const client = useMakeswiftHostApiClient()\n  const lastSnapshot = useRef<(Swatch | null)[]>()\n\n  function getSnapshot() {\n    const swatches = swatchIds.map(swatchId => client.readSwatch(swatchId))\n\n    if (\n      lastSnapshot.current != null &&\n      lastSnapshot.current.length === swatches.length &&\n      lastSnapshot.current.every((swatch, idx) => swatches[idx] === swatch)\n    ) {\n      return lastSnapshot.current\n    }\n\n    return (lastSnapshot.current = swatches)\n  }\n\n  const swatches = useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot)\n\n  useEffect(() => {\n    Promise.all(swatchIds.map(swatchId => client.fetchSwatch(swatchId))).catch(console.error)\n  }, [client, swatchIds])\n\n  return swatches\n}\n\nexport function useFile(fileId: string | null): File | null {\n  const client = useMakeswiftHostApiClient()\n  const readFile = () => (fileId == null ? null : client.readFile(fileId))\n  const file = useSyncExternalStore(client.subscribe, readFile, readFile)\n\n  useEffect(() => {\n    if (fileId != null) client.fetchFile(fileId)\n  }, [client, fileId])\n\n  return file\n}\n\nexport function useFiles(fileIds: string[]): (File | null)[] {\n  const client = useMakeswiftHostApiClient()\n  const lastSnapshot = useRef<(File | null)[]>()\n\n  function getSnapshot() {\n    const files = fileIds.map(fileId => client.readFile(fileId))\n\n    if (\n      lastSnapshot.current != null &&\n      lastSnapshot.current.length === files.length &&\n      lastSnapshot.current.every((file, idx) => files[idx] === file)\n    ) {\n      return lastSnapshot.current\n    }\n\n    return (lastSnapshot.current = files)\n  }\n\n  const files = useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot)\n\n  useEffect(() => {\n    Promise.all(fileIds.map(fileId => client.fetchFile(fileId))).catch(console.error)\n  }, [client, fileIds])\n\n  return files\n}\n\nexport function useTypography(typographyId: string | null): Typography | null {\n  const client = useMakeswiftHostApiClient()\n  const readTypography = () => (typographyId == null ? null : client.readTypography(typographyId))\n  const typography = useSyncExternalStore(client.subscribe, readTypography, readTypography)\n\n  useEffect(() => {\n    if (typographyId != null) client.fetchTypography(typographyId).catch(console.error)\n  }, [client, typographyId])\n\n  return typography\n}\n\nexport function useGlobalElement(globalElementId: string | null): GlobalElement | null {\n  const client = useMakeswiftHostApiClient()\n  const readGlobalElement = () =>\n    globalElementId == null ? null : client.readGlobalElement(globalElementId)\n  const globalElement = useSyncExternalStore(client.subscribe, readGlobalElement, readGlobalElement)\n\n  useEffect(() => {\n    if (globalElementId != null) client.fetchGlobalElement(globalElementId).catch(console.error)\n  }, [client, globalElementId])\n\n  return globalElement\n}\n\nexport function useLocalizedGlobalElement(\n  locale: string | null,\n  globalElementId: string | null,\n): LocalizedGlobalElement | null {\n  const client = useMakeswiftHostApiClient()\n  const readLocalizedGlobalElement = () =>\n    locale == null || globalElementId == null\n      ? null\n      : client.readLocalizedGlobalElement({ globalElementId, locale })\n\n  const localizedGlobalElement = useSyncExternalStore(\n    client.subscribe,\n    readLocalizedGlobalElement,\n    readLocalizedGlobalElement,\n  )\n\n  useEffect(() => {\n    if (locale != null && globalElementId != null) {\n      client.fetchLocalizedGlobalElement({ globalElementId, locale }).catch(console.error)\n    }\n  }, [client, locale, globalElementId])\n\n  return localizedGlobalElement\n}\n\nexport function usePagePathnameSlice(pageId: string | null): PagePathnameSlice | null {\n  const client = useMakeswiftHostApiClient()\n  const locale = useDocumentLocale()\n\n  const readPagePathnameSlice = () =>\n    pageId == null ? null : client.readPagePathnameSlice({ pageId, locale })\n\n  const pagePathnameSlice = useSyncExternalStore(\n    client.subscribe,\n    readPagePathnameSlice,\n    readPagePathnameSlice,\n  )\n\n  useEffect(() => {\n    if (pageId != null) client.fetchPagePathnameSlice({ pageId, locale }).catch(console.error)\n  }, [client, pageId, locale])\n\n  return pagePathnameSlice\n}\n\nexport function useTable(tableId: string | null): Table | null {\n  const client = useMakeswiftHostApiClient()\n  const readTable = () => (tableId == null ? null : client.readTable(tableId))\n  const table = useSyncExternalStore(client.subscribe, readTable, readTable)\n\n  useEffect(() => {\n    if (tableId != null) client.fetchTable(tableId).catch(console.error)\n  }, [client, tableId])\n\n  return table\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAkC;AAClC,kBAAqC;AAWrC,6BAA0C;AAC1C,kCAAkC;AAE3B,SAAS,UAAU,UAAwC;AAChE,QAAM,aAAS,kDAA0B;AACzC,QAAM,aAAa,MAAO,YAAY,OAAO,OAAO,OAAO,WAAW,QAAQ;AAC9E,QAAM,aAAS,kCAAqB,OAAO,WAAW,YAAY,UAAU;AAE5E,8BAAU,MAAM;AACd,QAAI,YAAY;AAAM,aAAO,YAAY,QAAQ,EAAE,MAAM,QAAQ,KAAK;AAAA,EACxE,GAAG,CAAC,QAAQ,QAAQ,CAAC;AAErB,SAAO;AACT;AAEO,SAAS,YAAY,WAAwC;AAClE,QAAM,aAAS,kDAA0B;AACzC,QAAM,mBAAe,qBAA0B;AAE/C,WAAS,cAAc;AACrB,UAAMA,YAAW,UAAU,IAAI,cAAY,OAAO,WAAW,QAAQ,CAAC;AAEtE,QACE,aAAa,WAAW,QACxB,aAAa,QAAQ,WAAWA,UAAS,UACzC,aAAa,QAAQ,MAAM,CAAC,QAAQ,QAAQA,UAAS,GAAG,MAAM,MAAM,GACpE;AACA,aAAO,aAAa;AAAA,IACtB;AAEA,WAAQ,aAAa,UAAUA;AAAA,EACjC;AAEA,QAAM,eAAW,kCAAqB,OAAO,WAAW,aAAa,WAAW;AAEhF,8BAAU,MAAM;AACd,YAAQ,IAAI,UAAU,IAAI,cAAY,OAAO,YAAY,QAAQ,CAAC,CAAC,EAAE,MAAM,QAAQ,KAAK;AAAA,EAC1F,GAAG,CAAC,QAAQ,SAAS,CAAC;AAEtB,SAAO;AACT;AAEO,SAAS,QAAQ,QAAoC;AAC1D,QAAM,aAAS,kDAA0B;AACzC,QAAM,WAAW,MAAO,UAAU,OAAO,OAAO,OAAO,SAAS,MAAM;AACtE,QAAM,WAAO,kCAAqB,OAAO,WAAW,UAAU,QAAQ;AAEtE,8BAAU,MAAM;AACd,QAAI,UAAU;AAAM,aAAO,UAAU,MAAM;AAAA,EAC7C,GAAG,CAAC,QAAQ,MAAM,CAAC;AAEnB,SAAO;AACT;AAEO,SAAS,SAAS,SAAoC;AAC3D,QAAM,aAAS,kDAA0B;AACzC,QAAM,mBAAe,qBAAwB;AAE7C,WAAS,cAAc;AACrB,UAAMC,SAAQ,QAAQ,IAAI,YAAU,OAAO,SAAS,MAAM,CAAC;AAE3D,QACE,aAAa,WAAW,QACxB,aAAa,QAAQ,WAAWA,OAAM,UACtC,aAAa,QAAQ,MAAM,CAAC,MAAM,QAAQA,OAAM,GAAG,MAAM,IAAI,GAC7D;AACA,aAAO,aAAa;AAAA,IACtB;AAEA,WAAQ,aAAa,UAAUA;AAAA,EACjC;AAEA,QAAM,YAAQ,kCAAqB,OAAO,WAAW,aAAa,WAAW;AAE7E,8BAAU,MAAM;AACd,YAAQ,IAAI,QAAQ,IAAI,YAAU,OAAO,UAAU,MAAM,CAAC,CAAC,EAAE,MAAM,QAAQ,KAAK;AAAA,EAClF,GAAG,CAAC,QAAQ,OAAO,CAAC;AAEpB,SAAO;AACT;AAEO,SAAS,cAAc,cAAgD;AAC5E,QAAM,aAAS,kDAA0B;AACzC,QAAM,iBAAiB,MAAO,gBAAgB,OAAO,OAAO,OAAO,eAAe,YAAY;AAC9F,QAAM,iBAAa,kCAAqB,OAAO,WAAW,gBAAgB,cAAc;AAExF,8BAAU,MAAM;AACd,QAAI,gBAAgB;AAAM,aAAO,gBAAgB,YAAY,EAAE,MAAM,QAAQ,KAAK;AAAA,EACpF,GAAG,CAAC,QAAQ,YAAY,CAAC;AAEzB,SAAO;AACT;AAEO,SAAS,iBAAiB,iBAAsD;AACrF,QAAM,aAAS,kDAA0B;AACzC,QAAM,oBAAoB,MACxB,mBAAmB,OAAO,OAAO,OAAO,kBAAkB,eAAe;AAC3E,QAAM,oBAAgB,kCAAqB,OAAO,WAAW,mBAAmB,iBAAiB;AAEjG,8BAAU,MAAM;AACd,QAAI,mBAAmB;AAAM,aAAO,mBAAmB,eAAe,EAAE,MAAM,QAAQ,KAAK;AAAA,EAC7F,GAAG,CAAC,QAAQ,eAAe,CAAC;AAE5B,SAAO;AACT;AAEO,SAAS,0BACd,QACA,iBAC+B;AAC/B,QAAM,aAAS,kDAA0B;AACzC,QAAM,6BAA6B,MACjC,UAAU,QAAQ,mBAAmB,OACjC,OACA,OAAO,2BAA2B,EAAE,iBAAiB,OAAO,CAAC;AAEnE,QAAM,6BAAyB;AAAA,IAC7B,OAAO;AAAA,IACP;AAAA,IACA;AAAA,EACF;AAEA,8BAAU,MAAM;AACd,QAAI,UAAU,QAAQ,mBAAmB,MAAM;AAC7C,aAAO,4BAA4B,EAAE,iBAAiB,OAAO,CAAC,EAAE,MAAM,QAAQ,KAAK;AAAA,IACrF;AAAA,EACF,GAAG,CAAC,QAAQ,QAAQ,eAAe,CAAC;AAEpC,SAAO;AACT;AAEO,SAAS,qBAAqB,QAAiD;AACpF,QAAM,aAAS,kDAA0B;AACzC,QAAM,aAAS,+CAAkB;AAEjC,QAAM,wBAAwB,MAC5B,UAAU,OAAO,OAAO,OAAO,sBAAsB,EAAE,QAAQ,OAAO,CAAC;AAEzE,QAAM,wBAAoB;AAAA,IACxB,OAAO;AAAA,IACP;AAAA,IACA;AAAA,EACF;AAEA,8BAAU,MAAM;AACd,QAAI,UAAU;AAAM,aAAO,uBAAuB,EAAE,QAAQ,OAAO,CAAC,EAAE,MAAM,QAAQ,KAAK;AAAA,EAC3F,GAAG,CAAC,QAAQ,QAAQ,MAAM,CAAC;AAE3B,SAAO;AACT;AAEO,SAAS,SAAS,SAAsC;AAC7D,QAAM,aAAS,kDAA0B;AACzC,QAAM,YAAY,MAAO,WAAW,OAAO,OAAO,OAAO,UAAU,OAAO;AAC1E,QAAM,YAAQ,kCAAqB,OAAO,WAAW,WAAW,SAAS;AAEzE,8BAAU,MAAM;AACd,QAAI,WAAW;AAAM,aAAO,WAAW,OAAO,EAAE,MAAM,QAAQ,KAAK;AAAA,EACrE,GAAG,CAAC,QAAQ,OAAO,CAAC;AAEpB,SAAO;AACT;","names":["swatches","files"]}
+{"version":3,"sources":["../../../../../src/runtimes/react/hooks/makeswift-api.ts"],"sourcesContent":["'use client'\n\nimport { useEffect, useRef, useSyncExternalStore } from 'react'\nimport {\n  File,\n  GlobalElement,\n  LocalizedGlobalElement,\n  PagePathnameSlice,\n  Swatch,\n  Table,\n  Typography,\n} from '../../../api'\n\nimport { useMakeswiftHostApiClient } from '../host-api-client'\nimport { useDocumentLocale } from './use-document-context'\n\nexport function useSwatch(swatchId: string | null): Swatch | null {\n  const client = useMakeswiftHostApiClient()\n  const readSwatch = () => (swatchId == null ? null : client.readSwatch(swatchId))\n  const swatch = useSyncExternalStore(client.subscribe, readSwatch, readSwatch)\n\n  useEffect(() => {\n    if (swatchId != null) client.fetchSwatch(swatchId).catch(console.error)\n  }, [client, swatchId])\n\n  return swatch\n}\n\nexport function useSwatches(swatchIds: string[]): (Swatch | null)[] {\n  const client = useMakeswiftHostApiClient()\n  const lastSnapshot = useRef<(Swatch | null)[]>()\n\n  function getSnapshot() {\n    const swatches = swatchIds.map(swatchId => client.readSwatch(swatchId))\n\n    if (\n      lastSnapshot.current != null &&\n      lastSnapshot.current.length === swatches.length &&\n      lastSnapshot.current.every((swatch, idx) => swatches[idx] === swatch)\n    ) {\n      return lastSnapshot.current\n    }\n\n    return (lastSnapshot.current = swatches)\n  }\n\n  const swatches = useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot)\n\n  useEffect(() => {\n    Promise.all(swatchIds.map(swatchId => client.fetchSwatch(swatchId))).catch(console.error)\n  }, [client, swatchIds])\n\n  return swatches\n}\n\nexport function useFile(fileId: string | null): File | null {\n  const client = useMakeswiftHostApiClient()\n  const readFile = () => (fileId == null ? null : client.readFile(fileId))\n  const file = useSyncExternalStore(client.subscribe, readFile, readFile)\n\n  useEffect(() => {\n    if (fileId != null) client.fetchFile(fileId)\n  }, [client, fileId])\n\n  return file\n}\n\nexport function useFiles(fileIds: string[]): (File | null)[] {\n  const client = useMakeswiftHostApiClient()\n  const lastSnapshot = useRef<(File | null)[]>()\n\n  function getSnapshot() {\n    const files = fileIds.map(fileId => client.readFile(fileId))\n\n    if (\n      lastSnapshot.current != null &&\n      lastSnapshot.current.length === files.length &&\n      lastSnapshot.current.every((file, idx) => files[idx] === file)\n    ) {\n      return lastSnapshot.current\n    }\n\n    return (lastSnapshot.current = files)\n  }\n\n  const files = useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot)\n\n  useEffect(() => {\n    Promise.all(fileIds.map(fileId => client.fetchFile(fileId))).catch(console.error)\n  }, [client, fileIds])\n\n  return files\n}\n\nexport function useTypography(typographyId: string | null): Typography | null {\n  const client = useMakeswiftHostApiClient()\n  const readTypography = () => (typographyId == null ? null : client.readTypography(typographyId))\n  const typography = useSyncExternalStore(client.subscribe, readTypography, readTypography)\n\n  useEffect(() => {\n    if (typographyId != null) client.fetchTypography(typographyId).catch(console.error)\n  }, [client, typographyId])\n\n  return typography\n}\n\nexport function useGlobalElement(globalElementId: string | null): GlobalElement | null {\n  const client = useMakeswiftHostApiClient()\n  const readGlobalElement = () =>\n    globalElementId == null ? null : client.readGlobalElement(globalElementId)\n  const globalElement = useSyncExternalStore(client.subscribe, readGlobalElement, readGlobalElement)\n\n  useEffect(() => {\n    if (globalElementId != null) client.fetchGlobalElement(globalElementId).catch(console.error)\n  }, [client, globalElementId])\n\n  return globalElement\n}\n\nexport function useLocalizedGlobalElement(\n  locale: string | null,\n  globalElementId: string | null,\n): LocalizedGlobalElement | null {\n  const client = useMakeswiftHostApiClient()\n  const readLocalizedGlobalElement = () =>\n    locale == null || globalElementId == null\n      ? null\n      : client.readLocalizedGlobalElement({ globalElementId, locale })\n\n  const localizedGlobalElement = useSyncExternalStore(\n    client.subscribe,\n    readLocalizedGlobalElement,\n    readLocalizedGlobalElement,\n  )\n\n  useEffect(() => {\n    if (locale != null && globalElementId != null) {\n      client.fetchLocalizedGlobalElement({ globalElementId, locale }).catch(console.error)\n    }\n  }, [client, locale, globalElementId])\n\n  return localizedGlobalElement\n}\n\nexport function usePagePathnameSlice(pageId: string | null): PagePathnameSlice | null {\n  const client = useMakeswiftHostApiClient()\n  const locale = useDocumentLocale()\n\n  const readPagePathnameSlice = () =>\n    pageId == null ? null : client.readPagePathnameSlice({ pageId, locale })\n\n  const pagePathnameSlice = useSyncExternalStore(\n    client.subscribe,\n    readPagePathnameSlice,\n    readPagePathnameSlice,\n  )\n\n  useEffect(() => {\n    if (pageId != null) client.fetchPagePathnameSlice({ pageId, locale }).catch(console.error)\n  }, [client, pageId, locale])\n\n  return pagePathnameSlice\n}\n\nexport function useTable(tableId: string | null): Table | null {\n  const client = useMakeswiftHostApiClient()\n  const readTable = () => (tableId == null ? null : client.readTable(tableId))\n  const table = useSyncExternalStore(client.subscribe, readTable, readTable)\n\n  useEffect(() => {\n    if (tableId != null) client.fetchTable(tableId).catch(console.error)\n  }, [client, tableId])\n\n  return table\n}\n"],"mappings":"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","names":["swatches","files"]}

package/dist/cjs/runtimes/react/hooks/use-selector.js

@@ -21,7 +21,7 @@ __export(use_selector_exports, {
   useSelector: () => useSelector
 });
 module.exports = __toCommonJS(use_selector_exports);
-var import_with_selector = require("use-sync-external-store/shim/with-selector");
+var import_with_selector = require("use-sync-external-store/with-selector");
 var import_use_store = require("./use-store");
 function useSelector(selector) {
   const store = (0, import_use_store.useStore)();

package/dist/cjs/runtimes/react/hooks/use-selector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-selector.ts"],"sourcesContent":["import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector'\nimport { useStore } from './use-store'\nimport { State as ReactPageState } from '../../../state/react-page'\nimport { State as ReactBuilderPreviewState } from '../../../state/react-builder-preview'\n\ntype State = ReactPageState | ReactBuilderPreviewState\n\nexport function useSelector<R>(selector: (state: State) => R): R {\n  const store = useStore()\n\n  return useSyncExternalStoreWithSelector(store.subscribe, store.getState, store.getState, selector)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAiD;AACjD,uBAAyB;AAMlB,SAAS,YAAe,UAAkC;AAC/D,QAAM,YAAQ,2BAAS;AAEvB,aAAO,uDAAiC,MAAM,WAAW,MAAM,UAAU,MAAM,UAAU,QAAQ;AACnG;","names":[]}
+{"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-selector.ts"],"sourcesContent":["import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector'\n\nimport { useStore } from './use-store'\nimport { State as ReactPageState } from '../../../state/react-page'\nimport { State as ReactBuilderPreviewState } from '../../../state/react-builder-preview'\n\ntype State = ReactPageState | ReactBuilderPreviewState\n\nexport function useSelector<R>(selector: (state: State) => R): R {\n  const store = useStore()\n\n  return useSyncExternalStoreWithSelector(store.subscribe, store.getState, store.getState, selector)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAiD;AAEjD,uBAAyB;AAMlB,SAAS,YAAe,UAAkC;AAC/D,QAAM,YAAQ,2BAAS;AAEvB,aAAO,uDAAiC,MAAM,WAAW,MAAM,UAAU,MAAM,UAAU,QAAQ;AACnG;","names":[]}

package/dist/cjs/runtimes/react/hooks/use-stylesheet-factory.js

@@ -24,7 +24,7 @@ module.exports = __toCommonJS(use_stylesheet_factory_exports);
 var import_react = require("react");
 var import_serialize = require("@emotion/serialize");
 var import_controls = require("@makeswift/controls");
-var import_root_style_registry = require("../../../next/root-style-registry");
+var import_root_style_registry = require("../root-style-registry");
 var import_style = require("../controls/style");
 var import_typography = require("../controls/typography");
 var import_use_breakpoints = require("./use-breakpoints");