@makeswift/runtime 0.28.4-canary.5 → 0.28.5-canary.0

package/dist/cjs/api-handler/handlers/manifest.js

@@ -28,7 +28,7 @@ async function manifestHandler(req, { apiKey, manifest }) {
     return import_request_response.ApiResponse.json({ message: "Unauthorized" }, { status: 401 });
   }
   return import_request_response.ApiResponse.json({
-    version: "0.28.4-canary.5",
+    version: "0.28.5-canary.0",
     interactionMode: true,
     clientSideNavigation: false,
     elementFromPoint: false,

package/dist/cjs/client/index.js

@@ -214,7 +214,7 @@ Received "${apiKey}" instead.`
     }
     this.apiKey = apiKey;
     this.graphqlClient = new import_client.GraphQLClient(new URL("graphql", runtime.apiOrigin).href, {
-      "makeswift-runtime-version": "0.28.4-canary.5"
+      "makeswift-runtime-version": "0.28.5-canary.0"
     });
     this.runtime = runtime;
   }
@@ -226,7 +226,7 @@ Received "${apiKey}" instead.`
     const requestHeaders = new Headers({
       "x-api-key": this.apiKey,
       "makeswift-site-api-key": this.apiKey,
-      "makeswift-runtime-version": "0.28.4-canary.5"
+      "makeswift-runtime-version": "0.28.5-canary.0"
     });
     if (siteVersion?.token) {
       requestUrl.searchParams.set("version", siteVersion.version);
@@ -953,7 +953,7 @@ Received "${apiKey}" instead.`
       headers: {
         "x-api-key": this.apiKey,
         "makeswift-site-api-key": this.apiKey,
-        "makeswift-runtime-version": "0.28.4-canary.5",
+        "makeswift-runtime-version": "0.28.5-canary.0",
         "content-type": "application/json"
       },
       body: JSON.stringify({ token }),

package/dist/cjs/components/hooks/useMediaQuery.js

@@ -24,38 +24,14 @@ module.exports = __toCommonJS(useMediaQuery_exports);
 var import_react = require("react");
 var import_controls = require("@makeswift/controls");
 var import_use_breakpoints = require("../../runtimes/react/hooks/use-breakpoints");
-const getDeviceQueries = (breakpoints) => breakpoints.map((device) => ({
-  id: device.id,
-  query: (0, import_controls.getBreakpointMediaQuery)(device).replace("@media", "")
-}));
+var import_use_current_breakpoint = require("../../runtimes/react/hooks/use-current-breakpoint");
 function useMediaQuery(responsiveValue) {
   const breakpoints = (0, import_use_breakpoints.useBreakpoints)();
-  const baseBreakpointId = (0, import_controls.getBaseBreakpoint)(breakpoints).id;
-  const subscribe = (0, import_react.useCallback)(
-    (notify) => {
-      const cleanUpFns = getDeviceQueries(breakpoints).map((q) => {
-        const mediaQueryList = window.matchMedia(q.query);
-        mediaQueryList.addEventListener("change", notify);
-        return () => mediaQueryList.removeEventListener("change", notify);
-      });
-      return () => cleanUpFns.forEach((fn) => fn());
-    },
-    [breakpoints]
+  const breakpointId = (0, import_use_current_breakpoint.useCurrentBreakpoint)();
+  return (0, import_react.useMemo)(
+    () => (0, import_controls.findBreakpointOverride)(breakpoints, responsiveValue, breakpointId)?.value,
+    [breakpoints, breakpointId, responsiveValue]
   );
-  const getServerSnapshot = () => (0, import_controls.findBreakpointOverride)(breakpoints, responsiveValue, baseBreakpointId)?.value;
-  function getSnapshot() {
-    const deviceId = getDeviceQueries(breakpoints).reduce(
-      (matchedDevice, deviceQueries) => {
-        if (window.matchMedia(deviceQueries.query).matches) {
-          return deviceQueries.id;
-        }
-        return matchedDevice;
-      },
-      baseBreakpointId
-    );
-    return (0, import_controls.findBreakpointOverride)(breakpoints, responsiveValue, deviceId)?.value;
-  }
-  return (0, import_react.useSyncExternalStore)(subscribe, getSnapshot, getServerSnapshot);
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/components/hooks/useMediaQuery.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/hooks/useMediaQuery.ts"],"sourcesContent":["import { useCallback, useSyncExternalStore } from 'react'\nimport {\n  type Breakpoints,\n  type DeviceOverride,\n  findBreakpointOverride,\n  getBaseBreakpoint,\n  getBreakpointMediaQuery,\n} from '@makeswift/controls'\n\nimport { useBreakpoints } from '../../runtimes/react/hooks/use-breakpoints'\n\nconst getDeviceQueries = (breakpoints: Breakpoints) =>\n  breakpoints.map(device => ({\n    id: device.id,\n    query: getBreakpointMediaQuery(device).replace('@media', ''),\n  }))\n\nexport function useMediaQuery<S>(responsiveValue?: Array<DeviceOverride<S>>): S | undefined {\n  const breakpoints = useBreakpoints()\n  const baseBreakpointId = getBaseBreakpoint(breakpoints).id\n  const subscribe = useCallback(\n    (notify: () => void) => {\n      const cleanUpFns = getDeviceQueries(breakpoints).map(q => {\n        const mediaQueryList = window.matchMedia(q.query)\n        mediaQueryList.addEventListener('change', notify)\n        return () => mediaQueryList.removeEventListener('change', notify)\n      })\n      return () => cleanUpFns.forEach(fn => fn())\n    },\n    [breakpoints],\n  )\n  const getServerSnapshot = () =>\n    findBreakpointOverride(breakpoints, responsiveValue, baseBreakpointId)?.value\n\n  function getSnapshot() {\n    const deviceId: string = getDeviceQueries(breakpoints).reduce(\n      (matchedDevice, deviceQueries) => {\n        if (window.matchMedia(deviceQueries.query).matches) {\n          return deviceQueries.id\n        }\n        return matchedDevice\n      },\n      baseBreakpointId,\n    )\n    return findBreakpointOverride(breakpoints, responsiveValue, deviceId)?.value\n  }\n\n  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkD;AAClD,sBAMO;AAEP,6BAA+B;AAE/B,MAAM,mBAAmB,CAAC,gBACxB,YAAY,IAAI,aAAW;AAAA,EACzB,IAAI,OAAO;AAAA,EACX,WAAO,yCAAwB,MAAM,EAAE,QAAQ,UAAU,EAAE;AAC7D,EAAE;AAEG,SAAS,cAAiB,iBAA2D;AAC1F,QAAM,kBAAc,uCAAe;AACnC,QAAM,uBAAmB,mCAAkB,WAAW,EAAE;AACxD,QAAM,gBAAY;AAAA,IAChB,CAAC,WAAuB;AACtB,YAAM,aAAa,iBAAiB,WAAW,EAAE,IAAI,OAAK;AACxD,cAAM,iBAAiB,OAAO,WAAW,EAAE,KAAK;AAChD,uBAAe,iBAAiB,UAAU,MAAM;AAChD,eAAO,MAAM,eAAe,oBAAoB,UAAU,MAAM;AAAA,MAClE,CAAC;AACD,aAAO,MAAM,WAAW,QAAQ,QAAM,GAAG,CAAC;AAAA,IAC5C;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AACA,QAAM,oBAAoB,UACxB,wCAAuB,aAAa,iBAAiB,gBAAgB,GAAG;AAE1E,WAAS,cAAc;AACrB,UAAM,WAAmB,iBAAiB,WAAW,EAAE;AAAA,MACrD,CAAC,eAAe,kBAAkB;AAChC,YAAI,OAAO,WAAW,cAAc,KAAK,EAAE,SAAS;AAClD,iBAAO,cAAc;AAAA,QACvB;AACA,eAAO;AAAA,MACT;AAAA,MACA;AAAA,IACF;AACA,eAAO,wCAAuB,aAAa,iBAAiB,QAAQ,GAAG;AAAA,EACzE;AAEA,aAAO,mCAAqB,WAAW,aAAa,iBAAiB;AACvE;","names":[]}
+{"version":3,"sources":["../../../../src/components/hooks/useMediaQuery.ts"],"sourcesContent":["import { useMemo } from 'react'\nimport { type DeviceOverride, findBreakpointOverride } from '@makeswift/controls'\n\nimport { useBreakpoints } from '../../runtimes/react/hooks/use-breakpoints'\nimport { useCurrentBreakpoint } from '../../runtimes/react/hooks/use-current-breakpoint'\n\nexport function useMediaQuery<S>(responsiveValue?: Array<DeviceOverride<S>>): S | undefined {\n  const breakpoints = useBreakpoints()\n  const breakpointId = useCurrentBreakpoint()\n  return useMemo(\n    () => findBreakpointOverride(breakpoints, responsiveValue, breakpointId)?.value,\n    [breakpoints, breakpointId, responsiveValue],\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAwB;AACxB,sBAA4D;AAE5D,6BAA+B;AAC/B,oCAAqC;AAE9B,SAAS,cAAiB,iBAA2D;AAC1F,QAAM,kBAAc,uCAAe;AACnC,QAAM,mBAAe,oDAAqB;AAC1C,aAAO;AAAA,IACL,UAAM,wCAAuB,aAAa,iBAAiB,YAAY,GAAG;AAAA,IAC1E,CAAC,aAAa,cAAc,eAAe;AAAA,EAC7C;AACF;","names":[]}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-breakpoints.ts"],"sourcesContent":["import { Breakpoints } from '../../../state/modules/breakpoints'\nimport { getBreakpoints } from '../../../state/read-only-state'\nimport { useSelector } from './use-selector'\n\nexport function useBreakpoints(): Breakpoints {\n  return useSelector(state => getBreakpoints(state))\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,6BAA+B;AAC/B,0BAA4B;AAErB,SAAS,iBAA8B;AAC5C,aAAO,iCAAY,eAAS,uCAAe,KAAK,CAAC;AACnD;","names":[]}
+{"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-breakpoints.ts"],"sourcesContent":["import { type Breakpoints } from '../../../state/modules/breakpoints'\nimport { getBreakpoints } from '../../../state/read-only-state'\n\nimport { useSelector } from './use-selector'\n\nexport function useBreakpoints(): Breakpoints {\n  return useSelector(state => getBreakpoints(state))\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,6BAA+B;AAE/B,0BAA4B;AAErB,SAAS,iBAA8B;AAC5C,aAAO,iCAAY,eAAS,uCAAe,KAAK,CAAC;AACnD;","names":[]}

package/dist/cjs/runtimes/react/hooks/use-current-breakpoint.js

@@ -0,0 +1,39 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var use_current_breakpoint_exports = {};
+__export(use_current_breakpoint_exports, {
+  useCurrentBreakpoint: () => useCurrentBreakpoint
+});
+module.exports = __toCommonJS(use_current_breakpoint_exports);
+var import_react = require("react");
+var import_read_only_state = require("../../../state/read-only-state");
+var import_use_store = require("./use-store");
+function useCurrentBreakpoint() {
+  const store = (0, import_use_store.useStore)();
+  return (0, import_react.useSyncExternalStore)(
+    store.subscribe,
+    () => (0, import_read_only_state.getClientBreakpoint)(store.getState()),
+    () => (0, import_read_only_state.getBaseBreakpoint)(store.getState())
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useCurrentBreakpoint
+});
+//# sourceMappingURL=use-current-breakpoint.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-current-breakpoint.ts"],"sourcesContent":["import { useSyncExternalStore } from 'react'\n\nimport { type BreakpointId } from '../../../state/modules/breakpoints'\nimport { getBaseBreakpoint, getClientBreakpoint } from '../../../state/read-only-state'\n\nimport { useStore } from './use-store'\n\nexport function useCurrentBreakpoint(): BreakpointId {\n  const store = useStore()\n\n  return useSyncExternalStore(\n    store.subscribe,\n    () => getClientBreakpoint(store.getState()),\n    () => getBaseBreakpoint(store.getState()),\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAqC;AAGrC,6BAAuD;AAEvD,uBAAyB;AAElB,SAAS,uBAAqC;AACnD,QAAM,YAAQ,2BAAS;AAEvB,aAAO;AAAA,IACL,MAAM;AAAA,IACN,UAAM,4CAAoB,MAAM,SAAS,CAAC;AAAA,IAC1C,UAAM,0CAAkB,MAAM,SAAS,CAAC;AAAA,EAC1C;AACF;","names":[]}

package/dist/cjs/runtimes/react/runtime-core.js

@@ -87,7 +87,9 @@ class RuntimeCore {
       console.error("RuntimeCore: attempt to retain an ephemeral store", { key });
       return;
     }
-    this.activeStores.retain(key, store);
+    if (this.activeStores.retain(key, store)) {
+      store.startBreakpointWatch();
+    }
   }
   releaseStore({ siteVersion, locale }, store) {
     const key = storeCacheKey({ siteVersion, locale });
@@ -95,7 +97,9 @@ class RuntimeCore {
       console.error("RuntimeCore: attempt to release an ephemeral store", { key });
       return;
     }
-    this.activeStores.release(key, store);
+    if (this.activeStores.release(key, store)) {
+      store.stopBreakpointWatch();
+    }
   }
   copyElementTree(elementTree, replacementContext) {
     return (0, import_copy_element_tree.copyElementTree)(this.protoStore.getState(), elementTree, replacementContext);

package/dist/cjs/runtimes/react/runtime-core.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/runtimes/react/runtime-core.ts"],"sourcesContent":["import { type SerializableReplacementContext } from '@makeswift/controls'\n\nimport { MakeswiftHostApiClient } from '../../api/client'\nimport * as MakeswiftApiClient from '../../state/makeswift-api-client'\nimport { type SiteVersion } from '../../api/site-version'\n\nimport {\n  Breakpoints,\n  BreakpointsInput,\n  parseBreakpointsInput,\n} from '../../state/modules/breakpoints'\n\nimport { copyElementTree } from '../../state/ops/copy-element-tree'\n\nimport { getBreakpoints, type Element, type ElementData } from '../../state/read-only-state'\nimport {\n  configureProtoStore,\n  configureReadWriteStore,\n  type ProtoStore,\n  type Store,\n} from '../../state/store'\n\nimport { RefCountedMap } from '../../utils/ref-counted-map'\nimport { isServer } from '../../utils/is-server'\n\nexport type StoreKey = {\n  siteVersion: SiteVersion | null\n  locale: string | undefined\n}\n\nconst VERSION_TAG_LIVE = 'ref:live'\n\nexport class RuntimeCore {\n  // The unowned entry TTL affects performance, not correctness. The TTL controls how long an unretained store stays\n  // in the map. If an entry expires and is removed from the map before React commits, the store remains retained\n  // via `<StoreContext.Provider>`. The only impact is that future lookups will create a new store instance instead of\n  // reusing the existing one, reducing cache efficiency.\n  private readonly activeStores = new RefCountedMap<string | null, Store>({\n    unownedEntryTtlMs: 1000,\n    // Checking on retain/release is sufficient on the client, and we don't need to check on get on the server\n    // as the only scenario in which we add the store to the map is when the runtime is already bound to the\n    // requested site version, which should be the only site version for which the store is requested\n    ttlCheck: RefCountedMap.TTLCheck.ON_RETAIN | RefCountedMap.TTLCheck.ON_RELEASE,\n  })\n\n  readonly protoStore: ProtoStore\n  readonly appOrigin: string\n  readonly apiOrigin: string\n  readonly requestKey: StoreKey | undefined\n  readonly fetch: MakeswiftApiClient.HttpFetch\n\n  constructor({\n    appOrigin = 'https://app.makeswift.com',\n    apiOrigin = 'https://api.makeswift.com',\n    breakpoints,\n    requestKey,\n    fetch,\n  }: {\n    appOrigin?: string\n    apiOrigin?: string\n    breakpoints?: BreakpointsInput\n    requestKey?: StoreKey\n    fetch: MakeswiftApiClient.HttpFetch\n  }) {\n    this.appOrigin = validateOrigin(appOrigin, 'appOrigin')\n    this.apiOrigin = validateOrigin(apiOrigin, 'apiOrigin')\n    this.requestKey = requestKey\n    this.fetch = fetch\n\n    this.protoStore = configureProtoStore({\n      name: 'Runtime proto-store',\n      breakpoints: breakpoints ? parseBreakpointsInput(breakpoints) : undefined,\n    })\n  }\n\n  getOrCreateStore({ siteVersion, locale }: StoreKey): Store {\n    const key = storeCacheKey({ siteVersion, locale })\n\n    const createStore = () => {\n      // host API client includes an in-memory cache of the site's resources and thus also has to be versioned\n      const hostApiClient = new MakeswiftHostApiClient({\n        uri: new URL('graphql', this.apiOrigin).href,\n        fetch: this.fetch,\n        preloadedState: { siteVersion, locale },\n      })\n\n      // TODO: we need to decouple editability from the site version; specifically, previewing\n      // a draft version of the site should not lead to switching to the read-write state\n      const isReadOnly = siteVersion == null\n\n      return configureReadWriteStore({\n        name: `Runtime read-write store (site version: ${key})`,\n        appOrigin: this.appOrigin,\n        hostApiClient,\n        preloadedState: { ...this.protoStore.getState(), siteVersion, isReadOnly, locale },\n      })\n    }\n\n    // On the server, stores are ephemeral by default so SSR does not retain them in a long-lived runtime.\n    // The exception is a runtime that is already bound to the requested site version & locale, where we\n    // can safely reuse the store across multiple root regions and benefit from the host API client's\n    // in-memory cache.\n    //\n    // On the client, stores are reference-counted by site version so multiple root regions can share a store\n    // instance, which preserves the pre-v0.17 per-site-version store behavior without requiring a separate\n    // runtime per root.\n    const usePersistentStore = this.shouldUsePersistentStore(key)\n    return usePersistentStore ? this.activeStores.getOrCreate(key, createStore) : createStore()\n  }\n\n  retainStore({ siteVersion, locale }: StoreKey, store: Store): void {\n    const key = storeCacheKey({ siteVersion, locale })\n\n    if (!this.shouldUsePersistentStore(key)) {\n      console.error('RuntimeCore: attempt to retain an ephemeral store', { key })\n      return\n    }\n\n    this.activeStores.retain(key, store)\n  }\n\n  releaseStore({ siteVersion, locale }: StoreKey, store: Store): void {\n    const key = storeCacheKey({ siteVersion, locale })\n\n    if (!this.shouldUsePersistentStore(key)) {\n      console.error('RuntimeCore: attempt to release an ephemeral store', { key })\n      return\n    }\n\n    this.activeStores.release(key, store)\n  }\n\n  copyElementTree(\n    elementTree: ElementData,\n    replacementContext: SerializableReplacementContext,\n  ): Element {\n    return copyElementTree(this.protoStore.getState(), elementTree, replacementContext)\n  }\n\n  getBreakpoints(): Breakpoints {\n    return getBreakpoints(this.protoStore.getState())\n  }\n\n  private shouldUsePersistentStore(key: string): boolean {\n    // don't persist stores on the server unless the runtime instance is bound to a request\n    // and the requested store matches the request's site version and locale\n    return !isServer() || (this.requestKey !== undefined && storeCacheKey(this.requestKey) === key)\n  }\n}\n\nconst storeCacheKey = ({ siteVersion, locale }: StoreKey): string =>\n  `${siteVersionTag(siteVersion)}/${locale ?? 'default'}`\n\nconst siteVersionTag = (siteVersion: SiteVersion | null): string =>\n  siteVersion?.version ?? VERSION_TAG_LIVE\n\nfunction validateOrigin(url: string, name: string): string {\n  try {\n    return new URL(url).origin\n  } catch {\n    throw new Error(`The Makeswift runtime received an invalid \\`${name}\\` parameter: \"${url}\".`)\n  }\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/runtimes/react/runtime-core.ts"],"sourcesContent":["import { type SerializableReplacementContext } from '@makeswift/controls'\n\nimport { MakeswiftHostApiClient } from '../../api/client'\nimport * as MakeswiftApiClient from '../../state/makeswift-api-client'\nimport { type SiteVersion } from '../../api/site-version'\n\nimport {\n  Breakpoints,\n  BreakpointsInput,\n  parseBreakpointsInput,\n} from '../../state/modules/breakpoints'\n\nimport { copyElementTree } from '../../state/ops/copy-element-tree'\n\nimport { getBreakpoints, type Element, type ElementData } from '../../state/read-only-state'\nimport {\n  configureProtoStore,\n  configureReadWriteStore,\n  type ProtoStore,\n  type Store,\n} from '../../state/store'\n\nimport { RefCountedMap } from '../../utils/ref-counted-map'\nimport { isServer } from '../../utils/is-server'\n\nexport type StoreKey = {\n  siteVersion: SiteVersion | null\n  locale: string | undefined\n}\n\nconst VERSION_TAG_LIVE = 'ref:live'\n\nexport class RuntimeCore {\n  // The unowned entry TTL affects performance, not correctness. The TTL controls how long an unretained store stays\n  // in the map. If an entry expires and is removed from the map before React commits, the store remains retained\n  // via `<StoreContext.Provider>`. The only impact is that future lookups will create a new store instance instead of\n  // reusing the existing one, reducing cache efficiency.\n  private readonly activeStores = new RefCountedMap<string | null, Store>({\n    unownedEntryTtlMs: 1000,\n    // Checking on retain/release is sufficient on the client, and we don't need to check on get on the server\n    // as the only scenario in which we add the store to the map is when the runtime is already bound to the\n    // requested site version, which should be the only site version for which the store is requested\n    ttlCheck: RefCountedMap.TTLCheck.ON_RETAIN | RefCountedMap.TTLCheck.ON_RELEASE,\n  })\n\n  readonly protoStore: ProtoStore\n  readonly appOrigin: string\n  readonly apiOrigin: string\n  readonly requestKey: StoreKey | undefined\n  readonly fetch: MakeswiftApiClient.HttpFetch\n\n  constructor({\n    appOrigin = 'https://app.makeswift.com',\n    apiOrigin = 'https://api.makeswift.com',\n    breakpoints,\n    requestKey,\n    fetch,\n  }: {\n    appOrigin?: string\n    apiOrigin?: string\n    breakpoints?: BreakpointsInput\n    requestKey?: StoreKey\n    fetch: MakeswiftApiClient.HttpFetch\n  }) {\n    this.appOrigin = validateOrigin(appOrigin, 'appOrigin')\n    this.apiOrigin = validateOrigin(apiOrigin, 'apiOrigin')\n    this.requestKey = requestKey\n    this.fetch = fetch\n\n    this.protoStore = configureProtoStore({\n      name: 'Runtime proto-store',\n      breakpoints: breakpoints ? parseBreakpointsInput(breakpoints) : undefined,\n    })\n  }\n\n  getOrCreateStore({ siteVersion, locale }: StoreKey): Store {\n    const key = storeCacheKey({ siteVersion, locale })\n\n    const createStore = () => {\n      // host API client includes an in-memory cache of the site's resources and thus also has to be versioned\n      const hostApiClient = new MakeswiftHostApiClient({\n        uri: new URL('graphql', this.apiOrigin).href,\n        fetch: this.fetch,\n        preloadedState: { siteVersion, locale },\n      })\n\n      // TODO: we need to decouple editability from the site version; specifically, previewing\n      // a draft version of the site should not lead to switching to the read-write state\n      const isReadOnly = siteVersion == null\n\n      return configureReadWriteStore({\n        name: `Runtime read-write store (site version: ${key})`,\n        appOrigin: this.appOrigin,\n        hostApiClient,\n        preloadedState: { ...this.protoStore.getState(), siteVersion, isReadOnly, locale },\n      })\n    }\n\n    // On the server, stores are ephemeral by default so SSR does not retain them in a long-lived runtime.\n    // The exception is a runtime that is already bound to the requested site version & locale, where we\n    // can safely reuse the store across multiple root regions and benefit from the host API client's\n    // in-memory cache.\n    //\n    // On the client, stores are reference-counted by site version so multiple root regions can share a store\n    // instance, which preserves the pre-v0.17 per-site-version store behavior without requiring a separate\n    // runtime per root.\n    const usePersistentStore = this.shouldUsePersistentStore(key)\n    return usePersistentStore ? this.activeStores.getOrCreate(key, createStore) : createStore()\n  }\n\n  retainStore({ siteVersion, locale }: StoreKey, store: Store): void {\n    const key = storeCacheKey({ siteVersion, locale })\n\n    if (!this.shouldUsePersistentStore(key)) {\n      console.error('RuntimeCore: attempt to retain an ephemeral store', { key })\n      return\n    }\n\n    if (this.activeStores.retain(key, store)) {\n      store.startBreakpointWatch()\n    }\n  }\n\n  releaseStore({ siteVersion, locale }: StoreKey, store: Store): void {\n    const key = storeCacheKey({ siteVersion, locale })\n\n    if (!this.shouldUsePersistentStore(key)) {\n      console.error('RuntimeCore: attempt to release an ephemeral store', { key })\n      return\n    }\n\n    if (this.activeStores.release(key, store)) {\n      store.stopBreakpointWatch()\n    }\n  }\n\n  copyElementTree(\n    elementTree: ElementData,\n    replacementContext: SerializableReplacementContext,\n  ): Element {\n    return copyElementTree(this.protoStore.getState(), elementTree, replacementContext)\n  }\n\n  getBreakpoints(): Breakpoints {\n    return getBreakpoints(this.protoStore.getState())\n  }\n\n  private shouldUsePersistentStore(key: string): boolean {\n    // don't persist stores on the server unless the runtime instance is bound to a request\n    // and the requested store matches the request's site version and locale\n    return !isServer() || (this.requestKey !== undefined && storeCacheKey(this.requestKey) === key)\n  }\n}\n\nconst storeCacheKey = ({ siteVersion, locale }: StoreKey): string =>\n  `${siteVersionTag(siteVersion)}/${locale ?? 'default'}`\n\nconst siteVersionTag = (siteVersion: SiteVersion | null): string =>\n  siteVersion?.version ?? VERSION_TAG_LIVE\n\nfunction validateOrigin(url: string, name: string): string {\n  try {\n    return new URL(url).origin\n  } catch {\n    throw new Error(`The Makeswift runtime received an invalid \\`${name}\\` parameter: \"${url}\".`)\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,oBAAuC;AAIvC,yBAIO;AAEP,+BAAgC;AAEhC,6BAA+D;AAC/D,mBAKO;AAEP,6BAA8B;AAC9B,uBAAyB;AAOzB,MAAM,mBAAmB;AAElB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,EAKN,eAAe,IAAI,qCAAoC;AAAA,IACtE,mBAAmB;AAAA;AAAA;AAAA;AAAA,IAInB,UAAU,qCAAc,SAAS,YAAY,qCAAc,SAAS;AAAA,EACtE,CAAC;AAAA,EAEQ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAET,YAAY;AAAA,IACV,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,EACF,GAMG;AACD,SAAK,YAAY,eAAe,WAAW,WAAW;AACtD,SAAK,YAAY,eAAe,WAAW,WAAW;AACtD,SAAK,aAAa;AAClB,SAAK,QAAQ;AAEb,SAAK,iBAAa,kCAAoB;AAAA,MACpC,MAAM;AAAA,MACN,aAAa,kBAAc,0CAAsB,WAAW,IAAI;AAAA,IAClE,CAAC;AAAA,EACH;AAAA,EAEA,iBAAiB,EAAE,aAAa,OAAO,GAAoB;AACzD,UAAM,MAAM,cAAc,EAAE,aAAa,OAAO,CAAC;AAEjD,UAAM,cAAc,MAAM;AAExB,YAAM,gBAAgB,IAAI,qCAAuB;AAAA,QAC/C,KAAK,IAAI,IAAI,WAAW,KAAK,SAAS,EAAE;AAAA,QACxC,OAAO,KAAK;AAAA,QACZ,gBAAgB,EAAE,aAAa,OAAO;AAAA,MACxC,CAAC;AAID,YAAM,aAAa,eAAe;AAElC,iBAAO,sCAAwB;AAAA,QAC7B,MAAM,2CAA2C,GAAG;AAAA,QACpD,WAAW,KAAK;AAAA,QAChB;AAAA,QACA,gBAAgB,EAAE,GAAG,KAAK,WAAW,SAAS,GAAG,aAAa,YAAY,OAAO;AAAA,MACnF,CAAC;AAAA,IACH;AAUA,UAAM,qBAAqB,KAAK,yBAAyB,GAAG;AAC5D,WAAO,qBAAqB,KAAK,aAAa,YAAY,KAAK,WAAW,IAAI,YAAY;AAAA,EAC5F;AAAA,EAEA,YAAY,EAAE,aAAa,OAAO,GAAa,OAAoB;AACjE,UAAM,MAAM,cAAc,EAAE,aAAa,OAAO,CAAC;AAEjD,QAAI,CAAC,KAAK,yBAAyB,GAAG,GAAG;AACvC,cAAQ,MAAM,qDAAqD,EAAE,IAAI,CAAC;AAC1E;AAAA,IACF;AAEA,QAAI,KAAK,aAAa,OAAO,KAAK,KAAK,GAAG;AACxC,YAAM,qBAAqB;AAAA,IAC7B;AAAA,EACF;AAAA,EAEA,aAAa,EAAE,aAAa,OAAO,GAAa,OAAoB;AAClE,UAAM,MAAM,cAAc,EAAE,aAAa,OAAO,CAAC;AAEjD,QAAI,CAAC,KAAK,yBAAyB,GAAG,GAAG;AACvC,cAAQ,MAAM,sDAAsD,EAAE,IAAI,CAAC;AAC3E;AAAA,IACF;AAEA,QAAI,KAAK,aAAa,QAAQ,KAAK,KAAK,GAAG;AACzC,YAAM,oBAAoB;AAAA,IAC5B;AAAA,EACF;AAAA,EAEA,gBACE,aACA,oBACS;AACT,eAAO,0CAAgB,KAAK,WAAW,SAAS,GAAG,aAAa,kBAAkB;AAAA,EACpF;AAAA,EAEA,iBAA8B;AAC5B,eAAO,uCAAe,KAAK,WAAW,SAAS,CAAC;AAAA,EAClD;AAAA,EAEQ,yBAAyB,KAAsB;AAGrD,WAAO,KAAC,2BAAS,KAAM,KAAK,eAAe,UAAa,cAAc,KAAK,UAAU,MAAM;AAAA,EAC7F;AACF;AAEA,MAAM,gBAAgB,CAAC,EAAE,aAAa,OAAO,MAC3C,GAAG,eAAe,WAAW,CAAC,IAAI,UAAU,SAAS;AAEvD,MAAM,iBAAiB,CAAC,gBACtB,aAAa,WAAW;AAE1B,SAAS,eAAe,KAAa,MAAsB;AACzD,MAAI;AACF,WAAO,IAAI,IAAI,GAAG,EAAE;AAAA,EACtB,QAAQ;AACN,UAAM,IAAI,MAAM,+CAA+C,IAAI,kBAAkB,GAAG,IAAI;AAAA,EAC9F;AACF;","names":[]}

package/dist/cjs/runtimes/react/testing/react-runtime.js

@@ -23,8 +23,8 @@ __export(react_runtime_exports, {
 module.exports = __toCommonJS(react_runtime_exports);
 var import_fixtures = require("../../../testing/fixtures");
 var import_react_runtime = require("../react-runtime");
-function createReactRuntime() {
-  return new import_react_runtime.ReactRuntime({ fetch, ...import_fixtures.TestOrigins });
+function createReactRuntime({ breakpoints } = {}) {
+  return new import_react_runtime.ReactRuntime({ fetch, breakpoints, ...import_fixtures.TestOrigins });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/runtimes/react/testing/react-runtime.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/testing/react-runtime.tsx"],"sourcesContent":["import { TestOrigins } from '../../../testing/fixtures'\nimport { ReactRuntime } from '../react-runtime'\n\nexport function createReactRuntime() {\n  return new ReactRuntime({ fetch, ...TestOrigins })\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAA4B;AAC5B,2BAA6B;AAEtB,SAAS,qBAAqB;AACnC,SAAO,IAAI,kCAAa,EAAE,OAAO,GAAG,4BAAY,CAAC;AACnD;","names":[]}
+{"version":3,"sources":["../../../../../src/runtimes/react/testing/react-runtime.tsx"],"sourcesContent":["import { type BreakpointsInput } from '../../../state/modules/breakpoints'\nimport { TestOrigins } from '../../../testing/fixtures'\nimport { ReactRuntime } from '../react-runtime'\n\nexport function createReactRuntime({ breakpoints }: { breakpoints?: BreakpointsInput } = {}) {\n  return new ReactRuntime({ fetch, breakpoints, ...TestOrigins })\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,sBAA4B;AAC5B,2BAA6B;AAEtB,SAAS,mBAAmB,EAAE,YAAY,IAAwC,CAAC,GAAG;AAC3F,SAAO,IAAI,kCAAa,EAAE,OAAO,aAAa,GAAG,4BAAY,CAAC;AAChE;","names":[]}

package/dist/cjs/state/actions/internal/read-only-actions.js

@@ -33,7 +33,8 @@ __export(read_only_actions_exports, {
   setIsReadOnly: () => setIsReadOnly,
   unregisterComponent: () => unregisterComponent,
   unregisterPropControllers: () => unregisterPropControllers,
-  unregisterPropControllersHandle: () => unregisterPropControllersHandle
+  unregisterPropControllersHandle: () => unregisterPropControllersHandle,
+  updateClientBreakpoint: () => updateClientBreakpoint
 });
 module.exports = __toCommonJS(read_only_actions_exports);
 const ReadOnlyActionTypes = {
@@ -52,6 +53,7 @@ const ReadOnlyActionTypes = {
   UNREGISTER_PROP_CONTROLLERS_HANDLE: "UNREGISTER_PROP_CONTROLLERS_HANDLE",
   REGISTER_REACT_COMPONENT: "REGISTER_REACT_COMPONENT",
   UNREGISTER_REACT_COMPONENT: "UNREGISTER_REACT_COMPONENT",
+  UPDATE_CLIENT_BREAKPOINT: "UPDATE_CLIENT_BREAKPOINT",
   SET_IS_IN_BUILDER: "SET_IS_IN_BUILDER",
   SET_IS_READ_ONLY: "SET_IS_READ_ONLY"
 };
@@ -145,6 +147,9 @@ function registerReactComponentEffect(type, component) {
     };
   };
 }
+function updateClientBreakpoint() {
+  return { type: ReadOnlyActionTypes.UPDATE_CLIENT_BREAKPOINT };
+}
 function setIsInBuilder(isInBuilder) {
   return { type: ReadOnlyActionTypes.SET_IS_IN_BUILDER, payload: isInBuilder };
 }
@@ -168,6 +173,7 @@ function setIsReadOnly(isReadOnly) {
   setIsReadOnly,
   unregisterComponent,
   unregisterPropControllers,
-  unregisterPropControllersHandle
+  unregisterPropControllersHandle,
+  updateClientBreakpoint
 });
 //# sourceMappingURL=read-only-actions.js.map

package/dist/cjs/state/actions/internal/read-only-actions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/state/actions/internal/read-only-actions.ts"],"sourcesContent":["import { type ThunkAction } from '@reduxjs/toolkit'\n\nimport { ControlInstance } from '@makeswift/controls'\n\nimport { ElementImperativeHandle } from '../../../runtimes/react/element-imperative-handle'\n\nimport { type APIResource, APIResourceType, APIResourceLocale } from '../../../api/types'\nimport { type Descriptor as PropControllerDescriptor } from '../../../prop-controllers/descriptors'\n\nimport { type ComponentMeta } from '../../modules/components-meta'\nimport { type PropControllersHandle } from '../../modules/prop-controller-handles'\nimport { type ComponentType } from '../../modules/react-components'\nimport { type DescriptorsByComponentType } from '../../modules/prop-controllers'\n\nimport { type DocumentPayload } from '../../shared-api'\n\nexport const ReadOnlyActionTypes = {\n  // TODO: this one should be a read-write action and we should refuse\n  // to fetch resources on the client in read-only mode\n  API_RESOURCE_FULFILLED: 'API_RESOURCE_FULFILLED',\n\n  CREATE_ELEMENT_TREE: 'CREATE_ELEMENT_TREE',\n  DELETE_ELEMENT_TREE: 'DELETE_ELEMENT_TREE',\n\n  REGISTER_COMPONENT: 'REGISTER_COMPONENT',\n  UNREGISTER_COMPONENT: 'UNREGISTER_COMPONENT',\n  REGISTER_COMPONENT_HANDLE: 'REGISTER_COMPONENT_HANDLE',\n  UNREGISTER_COMPONENT_HANDLE: 'UNREGISTER_COMPONENT_HANDLE',\n\n  REGISTER_PROP_CONTROLLERS: 'REGISTER_PROP_CONTROLLERS',\n  UNREGISTER_PROP_CONTROLLERS: 'UNREGISTER_PROP_CONTROLLERS',\n  REGISTER_PROP_CONTROLLERS_HANDLE: 'REGISTER_PROP_CONTROLLERS_HANDLE',\n  UNREGISTER_PROP_CONTROLLERS_HANDLE: 'UNREGISTER_PROP_CONTROLLERS_HANDLE',\n\n  REGISTER_REACT_COMPONENT: 'REGISTER_REACT_COMPONENT',\n  UNREGISTER_REACT_COMPONENT: 'UNREGISTER_REACT_COMPONENT',\n\n  SET_IS_IN_BUILDER: 'SET_IS_IN_BUILDER',\n  SET_IS_READ_ONLY: 'SET_IS_READ_ONLY',\n} as const\n\ntype APIResourceFulfilledAction = {\n  type: typeof ReadOnlyActionTypes.API_RESOURCE_FULFILLED\n  payload: {\n    resourceType: APIResourceType\n    resourceId: string\n    resource: APIResource | null\n    locale?: string | null\n  }\n}\n\ntype CreateElementTreeAction = {\n  type: typeof ReadOnlyActionTypes.CREATE_ELEMENT_TREE\n  payload: { document: DocumentPayload; descriptors: DescriptorsByComponentType }\n}\n\ntype DeleteElementTreeAction = {\n  type: typeof ReadOnlyActionTypes.DELETE_ELEMENT_TREE\n  payload: { documentKey: string }\n}\n\nexport type RegisterComponentAction = {\n  type: typeof ReadOnlyActionTypes.REGISTER_COMPONENT\n  payload: {\n    type: string\n    meta: ComponentMeta\n    propControllerDescriptors: Record<string, PropControllerDescriptor>\n  }\n}\n\nexport type UnregisterComponentAction = {\n  type: typeof ReadOnlyActionTypes.UNREGISTER_COMPONENT\n  payload: { type: string }\n}\n\ntype RegisterComponentHandleAction = {\n  type: typeof ReadOnlyActionTypes.REGISTER_COMPONENT_HANDLE\n  payload: { documentKey: string; elementKey: string; componentHandle: ElementImperativeHandle }\n}\n\ntype UnregisterComponentHandleAction = {\n  type: typeof ReadOnlyActionTypes.UNREGISTER_COMPONENT_HANDLE\n  payload: { documentKey: string; elementKey: string }\n}\n\ntype RegisterPropControllersHandleAction = {\n  type: typeof ReadOnlyActionTypes.REGISTER_PROP_CONTROLLERS_HANDLE\n  payload: { documentKey: string; elementKey: string; handle: PropControllersHandle }\n}\n\ntype UnregisterPropControllersHandleAction = {\n  type: typeof ReadOnlyActionTypes.UNREGISTER_PROP_CONTROLLERS_HANDLE\n  payload: { documentKey: string; elementKey: string }\n}\n\ntype RegisterPropControllersAction = {\n  type: typeof ReadOnlyActionTypes.REGISTER_PROP_CONTROLLERS\n  payload: {\n    documentKey: string\n    elementKey: string\n    propControllers: Record<string, ControlInstance>\n  }\n}\n\ntype UnregisterPropControllersAction = {\n  type: typeof ReadOnlyActionTypes.UNREGISTER_PROP_CONTROLLERS\n  payload: { documentKey: string; elementKey: string }\n}\n\ntype RegisterReactComponentAction = {\n  type: typeof ReadOnlyActionTypes.REGISTER_REACT_COMPONENT\n  payload: { type: string; component: ComponentType }\n}\n\ntype UnregisterReactComponentAction = {\n  type: typeof ReadOnlyActionTypes.UNREGISTER_REACT_COMPONENT\n  payload: { type: string }\n}\n\ntype SetIsInBuilderAction = {\n  type: typeof ReadOnlyActionTypes.SET_IS_IN_BUILDER\n  payload: boolean\n}\n\ntype SetIsReadOnlyAction = {\n  type: typeof ReadOnlyActionTypes.SET_IS_READ_ONLY\n  payload: boolean\n}\n\nexport type ReadOnlyAction =\n  | APIResourceFulfilledAction\n  | CreateElementTreeAction\n  | DeleteElementTreeAction\n  | RegisterComponentAction\n  | UnregisterComponentAction\n  | RegisterComponentHandleAction\n  | UnregisterComponentHandleAction\n  | RegisterPropControllersHandleAction\n  | UnregisterPropControllersHandleAction\n  | RegisterPropControllersAction\n  | UnregisterPropControllersAction\n  | RegisterReactComponentAction\n  | UnregisterReactComponentAction\n  | SetIsInBuilderAction\n  | SetIsReadOnlyAction\n\nexport function apiResourceFulfilled<T extends APIResourceType>(\n  resourceType: T,\n  resourceId: string,\n  resource: APIResource | null,\n  locale?: APIResourceLocale<T>,\n): APIResourceFulfilledAction {\n  return {\n    type: ReadOnlyActionTypes.API_RESOURCE_FULFILLED,\n    payload: { resourceType, resourceId, resource, locale },\n  }\n}\n\nexport function createElementTree(\n  payload: CreateElementTreeAction['payload'],\n): CreateElementTreeAction {\n  return {\n    type: ReadOnlyActionTypes.CREATE_ELEMENT_TREE,\n    payload,\n  }\n}\n\nexport function deleteElementTree(\n  payload: DeleteElementTreeAction['payload'],\n): DeleteElementTreeAction {\n  return { type: ReadOnlyActionTypes.DELETE_ELEMENT_TREE, payload }\n}\n\nexport function registerComponent(\n  type: string,\n  meta: ComponentMeta,\n  propControllerDescriptors: Record<string, PropControllerDescriptor>,\n): RegisterComponentAction {\n  return {\n    type: ReadOnlyActionTypes.REGISTER_COMPONENT,\n    payload: { type, meta, propControllerDescriptors },\n  }\n}\n\nexport function unregisterComponent(type: string): UnregisterComponentAction {\n  return { type: ReadOnlyActionTypes.UNREGISTER_COMPONENT, payload: { type } }\n}\n\nexport function registerComponentEffect(\n  type: string,\n  meta: ComponentMeta,\n  propControllerDescriptors: Record<string, PropControllerDescriptor>,\n): ThunkAction<() => void, unknown, unknown, ReadOnlyAction> {\n  return dispatch => {\n    dispatch(registerComponent(type, meta, propControllerDescriptors))\n\n    return () => {\n      dispatch(unregisterComponent(type))\n    }\n  }\n}\n\nexport function registerComponentHandle(\n  documentKey: string,\n  elementKey: string,\n  componentHandle: ElementImperativeHandle,\n): RegisterComponentHandleAction {\n  return {\n    type: ReadOnlyActionTypes.REGISTER_COMPONENT_HANDLE,\n    payload: { documentKey, elementKey, componentHandle },\n  }\n}\n\nfunction unregisterComponentHandle(\n  documentKey: string,\n  elementKey: string,\n): UnregisterComponentHandleAction {\n  return {\n    type: ReadOnlyActionTypes.UNREGISTER_COMPONENT_HANDLE,\n    payload: { documentKey, elementKey },\n  }\n}\n\nexport function registerComponentHandleEffect(\n  documentKey: string,\n  elementKey: string,\n  componentHandle: ElementImperativeHandle,\n): ThunkAction<() => void, unknown, unknown, ReadOnlyAction> {\n  return dispatch => {\n    dispatch(registerComponentHandle(documentKey, elementKey, componentHandle))\n\n    return () => {\n      dispatch(unregisterComponentHandle(documentKey, elementKey))\n    }\n  }\n}\n\nexport function registerPropControllersHandle(\n  documentKey: string,\n  elementKey: string,\n  handle: PropControllersHandle,\n): RegisterPropControllersHandleAction {\n  return {\n    type: ReadOnlyActionTypes.REGISTER_PROP_CONTROLLERS_HANDLE,\n    payload: { documentKey, elementKey, handle },\n  }\n}\n\nexport function unregisterPropControllersHandle(\n  documentKey: string,\n  elementKey: string,\n): UnregisterPropControllersHandleAction {\n  return {\n    type: ReadOnlyActionTypes.UNREGISTER_PROP_CONTROLLERS_HANDLE,\n    payload: { documentKey, elementKey },\n  }\n}\n\nexport function registerPropControllers(\n  documentKey: string,\n  elementKey: string,\n  propControllers: Record<string, ControlInstance>,\n): RegisterPropControllersAction {\n  return {\n    type: ReadOnlyActionTypes.REGISTER_PROP_CONTROLLERS,\n    payload: { documentKey, elementKey, propControllers },\n  }\n}\n\nexport function unregisterPropControllers(\n  documentKey: string,\n  elementKey: string,\n): UnregisterPropControllersAction {\n  return {\n    type: ReadOnlyActionTypes.UNREGISTER_PROP_CONTROLLERS,\n    payload: { documentKey, elementKey },\n  }\n}\n\nfunction registerReactComponent(\n  type: string,\n  component: ComponentType,\n): RegisterReactComponentAction {\n  return { type: ReadOnlyActionTypes.REGISTER_REACT_COMPONENT, payload: { type, component } }\n}\n\nfunction unregisterReactComponent(type: string): UnregisterReactComponentAction {\n  return { type: ReadOnlyActionTypes.UNREGISTER_REACT_COMPONENT, payload: { type } }\n}\n\nexport function registerReactComponentEffect(\n  type: string,\n  component: ComponentType,\n): ThunkAction<() => void, unknown, unknown, ReadOnlyAction> {\n  return dispatch => {\n    dispatch(registerReactComponent(type, component))\n\n    return () => {\n      dispatch(unregisterReactComponent(type))\n    }\n  }\n}\n\nexport function setIsInBuilder(isInBuilder: boolean): SetIsInBuilderAction {\n  return { type: ReadOnlyActionTypes.SET_IS_IN_BUILDER, payload: isInBuilder }\n}\n\nexport function setIsReadOnly(isReadOnly: boolean): SetIsReadOnlyAction {\n  return { type: ReadOnlyActionTypes.SET_IS_READ_ONLY, payload: isReadOnly }\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../../src/state/actions/internal/read-only-actions.ts"],"sourcesContent":["import { type ThunkAction } from '@reduxjs/toolkit'\n\nimport { ControlInstance } from '@makeswift/controls'\n\nimport { ElementImperativeHandle } from '../../../runtimes/react/element-imperative-handle'\n\nimport { type APIResource, APIResourceType, APIResourceLocale } from '../../../api/types'\nimport { type Descriptor as PropControllerDescriptor } from '../../../prop-controllers/descriptors'\n\nimport { type ComponentMeta } from '../../modules/components-meta'\nimport { type PropControllersHandle } from '../../modules/prop-controller-handles'\nimport { type ComponentType } from '../../modules/react-components'\nimport { type DescriptorsByComponentType } from '../../modules/prop-controllers'\n\nimport { type DocumentPayload } from '../../shared-api'\n\nexport const ReadOnlyActionTypes = {\n  // TODO: this one should be a read-write action and we should refuse\n  // to fetch resources on the client in read-only mode\n  API_RESOURCE_FULFILLED: 'API_RESOURCE_FULFILLED',\n\n  CREATE_ELEMENT_TREE: 'CREATE_ELEMENT_TREE',\n  DELETE_ELEMENT_TREE: 'DELETE_ELEMENT_TREE',\n\n  REGISTER_COMPONENT: 'REGISTER_COMPONENT',\n  UNREGISTER_COMPONENT: 'UNREGISTER_COMPONENT',\n  REGISTER_COMPONENT_HANDLE: 'REGISTER_COMPONENT_HANDLE',\n  UNREGISTER_COMPONENT_HANDLE: 'UNREGISTER_COMPONENT_HANDLE',\n\n  REGISTER_PROP_CONTROLLERS: 'REGISTER_PROP_CONTROLLERS',\n  UNREGISTER_PROP_CONTROLLERS: 'UNREGISTER_PROP_CONTROLLERS',\n  REGISTER_PROP_CONTROLLERS_HANDLE: 'REGISTER_PROP_CONTROLLERS_HANDLE',\n  UNREGISTER_PROP_CONTROLLERS_HANDLE: 'UNREGISTER_PROP_CONTROLLERS_HANDLE',\n\n  REGISTER_REACT_COMPONENT: 'REGISTER_REACT_COMPONENT',\n  UNREGISTER_REACT_COMPONENT: 'UNREGISTER_REACT_COMPONENT',\n\n  UPDATE_CLIENT_BREAKPOINT: 'UPDATE_CLIENT_BREAKPOINT',\n\n  SET_IS_IN_BUILDER: 'SET_IS_IN_BUILDER',\n  SET_IS_READ_ONLY: 'SET_IS_READ_ONLY',\n} as const\n\ntype APIResourceFulfilledAction = {\n  type: typeof ReadOnlyActionTypes.API_RESOURCE_FULFILLED\n  payload: {\n    resourceType: APIResourceType\n    resourceId: string\n    resource: APIResource | null\n    locale?: string | null\n  }\n}\n\ntype CreateElementTreeAction = {\n  type: typeof ReadOnlyActionTypes.CREATE_ELEMENT_TREE\n  payload: { document: DocumentPayload; descriptors: DescriptorsByComponentType }\n}\n\ntype DeleteElementTreeAction = {\n  type: typeof ReadOnlyActionTypes.DELETE_ELEMENT_TREE\n  payload: { documentKey: string }\n}\n\nexport type RegisterComponentAction = {\n  type: typeof ReadOnlyActionTypes.REGISTER_COMPONENT\n  payload: {\n    type: string\n    meta: ComponentMeta\n    propControllerDescriptors: Record<string, PropControllerDescriptor>\n  }\n}\n\nexport type UnregisterComponentAction = {\n  type: typeof ReadOnlyActionTypes.UNREGISTER_COMPONENT\n  payload: { type: string }\n}\n\ntype RegisterComponentHandleAction = {\n  type: typeof ReadOnlyActionTypes.REGISTER_COMPONENT_HANDLE\n  payload: { documentKey: string; elementKey: string; componentHandle: ElementImperativeHandle }\n}\n\ntype UnregisterComponentHandleAction = {\n  type: typeof ReadOnlyActionTypes.UNREGISTER_COMPONENT_HANDLE\n  payload: { documentKey: string; elementKey: string }\n}\n\ntype RegisterPropControllersHandleAction = {\n  type: typeof ReadOnlyActionTypes.REGISTER_PROP_CONTROLLERS_HANDLE\n  payload: { documentKey: string; elementKey: string; handle: PropControllersHandle }\n}\n\ntype UnregisterPropControllersHandleAction = {\n  type: typeof ReadOnlyActionTypes.UNREGISTER_PROP_CONTROLLERS_HANDLE\n  payload: { documentKey: string; elementKey: string }\n}\n\ntype RegisterPropControllersAction = {\n  type: typeof ReadOnlyActionTypes.REGISTER_PROP_CONTROLLERS\n  payload: {\n    documentKey: string\n    elementKey: string\n    propControllers: Record<string, ControlInstance>\n  }\n}\n\ntype UnregisterPropControllersAction = {\n  type: typeof ReadOnlyActionTypes.UNREGISTER_PROP_CONTROLLERS\n  payload: { documentKey: string; elementKey: string }\n}\n\ntype RegisterReactComponentAction = {\n  type: typeof ReadOnlyActionTypes.REGISTER_REACT_COMPONENT\n  payload: { type: string; component: ComponentType }\n}\n\ntype UnregisterReactComponentAction = {\n  type: typeof ReadOnlyActionTypes.UNREGISTER_REACT_COMPONENT\n  payload: { type: string }\n}\n\ntype UpdateClientBreakpointAction = {\n  type: typeof ReadOnlyActionTypes.UPDATE_CLIENT_BREAKPOINT\n}\n\ntype SetIsInBuilderAction = {\n  type: typeof ReadOnlyActionTypes.SET_IS_IN_BUILDER\n  payload: boolean\n}\n\ntype SetIsReadOnlyAction = {\n  type: typeof ReadOnlyActionTypes.SET_IS_READ_ONLY\n  payload: boolean\n}\n\nexport type ReadOnlyAction =\n  | APIResourceFulfilledAction\n  | CreateElementTreeAction\n  | DeleteElementTreeAction\n  | RegisterComponentAction\n  | UnregisterComponentAction\n  | RegisterComponentHandleAction\n  | UnregisterComponentHandleAction\n  | RegisterPropControllersHandleAction\n  | UnregisterPropControllersHandleAction\n  | RegisterPropControllersAction\n  | UnregisterPropControllersAction\n  | RegisterReactComponentAction\n  | UnregisterReactComponentAction\n  | UpdateClientBreakpointAction\n  | SetIsInBuilderAction\n  | SetIsReadOnlyAction\n\nexport function apiResourceFulfilled<T extends APIResourceType>(\n  resourceType: T,\n  resourceId: string,\n  resource: APIResource | null,\n  locale?: APIResourceLocale<T>,\n): APIResourceFulfilledAction {\n  return {\n    type: ReadOnlyActionTypes.API_RESOURCE_FULFILLED,\n    payload: { resourceType, resourceId, resource, locale },\n  }\n}\n\nexport function createElementTree(\n  payload: CreateElementTreeAction['payload'],\n): CreateElementTreeAction {\n  return {\n    type: ReadOnlyActionTypes.CREATE_ELEMENT_TREE,\n    payload,\n  }\n}\n\nexport function deleteElementTree(\n  payload: DeleteElementTreeAction['payload'],\n): DeleteElementTreeAction {\n  return { type: ReadOnlyActionTypes.DELETE_ELEMENT_TREE, payload }\n}\n\nexport function registerComponent(\n  type: string,\n  meta: ComponentMeta,\n  propControllerDescriptors: Record<string, PropControllerDescriptor>,\n): RegisterComponentAction {\n  return {\n    type: ReadOnlyActionTypes.REGISTER_COMPONENT,\n    payload: { type, meta, propControllerDescriptors },\n  }\n}\n\nexport function unregisterComponent(type: string): UnregisterComponentAction {\n  return { type: ReadOnlyActionTypes.UNREGISTER_COMPONENT, payload: { type } }\n}\n\nexport function registerComponentEffect(\n  type: string,\n  meta: ComponentMeta,\n  propControllerDescriptors: Record<string, PropControllerDescriptor>,\n): ThunkAction<() => void, unknown, unknown, ReadOnlyAction> {\n  return dispatch => {\n    dispatch(registerComponent(type, meta, propControllerDescriptors))\n\n    return () => {\n      dispatch(unregisterComponent(type))\n    }\n  }\n}\n\nexport function registerComponentHandle(\n  documentKey: string,\n  elementKey: string,\n  componentHandle: ElementImperativeHandle,\n): RegisterComponentHandleAction {\n  return {\n    type: ReadOnlyActionTypes.REGISTER_COMPONENT_HANDLE,\n    payload: { documentKey, elementKey, componentHandle },\n  }\n}\n\nfunction unregisterComponentHandle(\n  documentKey: string,\n  elementKey: string,\n): UnregisterComponentHandleAction {\n  return {\n    type: ReadOnlyActionTypes.UNREGISTER_COMPONENT_HANDLE,\n    payload: { documentKey, elementKey },\n  }\n}\n\nexport function registerComponentHandleEffect(\n  documentKey: string,\n  elementKey: string,\n  componentHandle: ElementImperativeHandle,\n): ThunkAction<() => void, unknown, unknown, ReadOnlyAction> {\n  return dispatch => {\n    dispatch(registerComponentHandle(documentKey, elementKey, componentHandle))\n\n    return () => {\n      dispatch(unregisterComponentHandle(documentKey, elementKey))\n    }\n  }\n}\n\nexport function registerPropControllersHandle(\n  documentKey: string,\n  elementKey: string,\n  handle: PropControllersHandle,\n): RegisterPropControllersHandleAction {\n  return {\n    type: ReadOnlyActionTypes.REGISTER_PROP_CONTROLLERS_HANDLE,\n    payload: { documentKey, elementKey, handle },\n  }\n}\n\nexport function unregisterPropControllersHandle(\n  documentKey: string,\n  elementKey: string,\n): UnregisterPropControllersHandleAction {\n  return {\n    type: ReadOnlyActionTypes.UNREGISTER_PROP_CONTROLLERS_HANDLE,\n    payload: { documentKey, elementKey },\n  }\n}\n\nexport function registerPropControllers(\n  documentKey: string,\n  elementKey: string,\n  propControllers: Record<string, ControlInstance>,\n): RegisterPropControllersAction {\n  return {\n    type: ReadOnlyActionTypes.REGISTER_PROP_CONTROLLERS,\n    payload: { documentKey, elementKey, propControllers },\n  }\n}\n\nexport function unregisterPropControllers(\n  documentKey: string,\n  elementKey: string,\n): UnregisterPropControllersAction {\n  return {\n    type: ReadOnlyActionTypes.UNREGISTER_PROP_CONTROLLERS,\n    payload: { documentKey, elementKey },\n  }\n}\n\nfunction registerReactComponent(\n  type: string,\n  component: ComponentType,\n): RegisterReactComponentAction {\n  return { type: ReadOnlyActionTypes.REGISTER_REACT_COMPONENT, payload: { type, component } }\n}\n\nfunction unregisterReactComponent(type: string): UnregisterReactComponentAction {\n  return { type: ReadOnlyActionTypes.UNREGISTER_REACT_COMPONENT, payload: { type } }\n}\n\nexport function registerReactComponentEffect(\n  type: string,\n  component: ComponentType,\n): ThunkAction<() => void, unknown, unknown, ReadOnlyAction> {\n  return dispatch => {\n    dispatch(registerReactComponent(type, component))\n\n    return () => {\n      dispatch(unregisterReactComponent(type))\n    }\n  }\n}\n\nexport function updateClientBreakpoint(): UpdateClientBreakpointAction {\n  return { type: ReadOnlyActionTypes.UPDATE_CLIENT_BREAKPOINT }\n}\n\nexport function setIsInBuilder(isInBuilder: boolean): SetIsInBuilderAction {\n  return { type: ReadOnlyActionTypes.SET_IS_IN_BUILDER, payload: isInBuilder }\n}\n\nexport function setIsReadOnly(isReadOnly: boolean): SetIsReadOnlyAction {\n  return { type: ReadOnlyActionTypes.SET_IS_READ_ONLY, payload: isReadOnly }\n}\n"],"mappings":"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","names":[]}

package/dist/cjs/state/mixins/breakpoint-watch.js

@@ -0,0 +1,72 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var breakpoint_watch_exports = {};
+__export(breakpoint_watch_exports, {
+  breakpointWatchMixin: () => breakpointWatchMixin
+});
+module.exports = __toCommonJS(breakpoint_watch_exports);
+var import_read_only_actions = require("../actions/internal/read-only-actions");
+var import_breakpoints = require("../modules/breakpoints");
+var import_read_only_state = require("../read-only-state");
+function breakpointWatchMixin({
+  dispatch,
+  getState,
+  subscribe: storeSubscribe
+}) {
+  let mediaQueryUnsubscribes = [];
+  let storeUnsubscribe = null;
+  let watchedBreakpoints = [];
+  const startWatch = (breakpoints) => {
+    mediaQueryUnsubscribes.forEach((fn) => fn());
+    const updateState = () => dispatch((0, import_read_only_actions.updateClientBreakpoint)());
+    mediaQueryUnsubscribes = (0, import_breakpoints.getDeviceQueries)(breakpoints).map((q) => {
+      const mediaQueryList = window.matchMedia(q.query);
+      mediaQueryList.addEventListener("change", updateState);
+      return () => mediaQueryList.removeEventListener("change", updateState);
+    });
+    watchedBreakpoints = breakpoints;
+    updateState();
+  };
+  return {
+    startBreakpointWatch: () => {
+      if (storeUnsubscribe !== null) {
+        console.warn("Unexpected `BreakpointWatch.startBreakpointWatch` call, already watching");
+        return;
+      }
+      startWatch((0, import_read_only_state.getBreakpoints)(getState()));
+      storeUnsubscribe = storeSubscribe(() => {
+        const breakpoints = (0, import_read_only_state.getBreakpoints)(getState());
+        if (breakpoints !== watchedBreakpoints) {
+          startWatch(breakpoints);
+        }
+      });
+    },
+    stopBreakpointWatch: () => {
+      mediaQueryUnsubscribes.forEach((fn) => fn());
+      mediaQueryUnsubscribes = [];
+      storeUnsubscribe?.();
+      storeUnsubscribe = null;
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  breakpointWatchMixin
+});
+//# sourceMappingURL=breakpoint-watch.js.map

package/dist/cjs/state/mixins/breakpoint-watch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/state/mixins/breakpoint-watch.ts"],"sourcesContent":["import { updateClientBreakpoint } from '../actions/internal/read-only-actions'\nimport { Breakpoints, getDeviceQueries } from '../modules/breakpoints'\n\nimport { type State, type Dispatch } from '../unified-state'\nimport { getBreakpoints } from '../read-only-state'\n\nexport interface BreakpointWatch {\n  startBreakpointWatch(): void\n  stopBreakpointWatch(): void\n}\n\nexport function breakpointWatchMixin({\n  dispatch,\n  getState,\n  subscribe: storeSubscribe,\n}: {\n  dispatch: Dispatch\n  getState: () => State\n  subscribe: (listener: VoidFunction) => VoidFunction\n}): BreakpointWatch {\n  let mediaQueryUnsubscribes: VoidFunction[] = []\n  let storeUnsubscribe: VoidFunction | null = null\n  let watchedBreakpoints: Breakpoints = []\n\n  // client-side breakpoint watch\n  const startWatch = (breakpoints: Breakpoints) => {\n    mediaQueryUnsubscribes.forEach(fn => fn())\n\n    const updateState = () => dispatch(updateClientBreakpoint())\n\n    mediaQueryUnsubscribes = getDeviceQueries(breakpoints).map(q => {\n      const mediaQueryList = window.matchMedia(q.query)\n      mediaQueryList.addEventListener('change', updateState)\n      return () => mediaQueryList.removeEventListener('change', updateState)\n    })\n\n    watchedBreakpoints = breakpoints\n\n    // reconcile the store with the current client breakpoint after subscribing;\n    // this heals any stale breakpoint state from changes that happened\n    // after the store was created or updated but before the listeners were attached\n    updateState()\n  }\n\n  return {\n    startBreakpointWatch: () => {\n      if (storeUnsubscribe !== null) {\n        console.warn('Unexpected `BreakpointWatch.startBreakpointWatch` call, already watching')\n        return\n      }\n\n      startWatch(getBreakpoints(getState()))\n\n      storeUnsubscribe = storeSubscribe(() => {\n        const breakpoints = getBreakpoints(getState())\n        if (breakpoints !== watchedBreakpoints) {\n          startWatch(breakpoints)\n        }\n      })\n    },\n\n    stopBreakpointWatch: () => {\n      mediaQueryUnsubscribes.forEach(fn => fn())\n      mediaQueryUnsubscribes = []\n\n      storeUnsubscribe?.()\n      storeUnsubscribe = null\n    },\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+BAAuC;AACvC,yBAA8C;AAG9C,6BAA+B;AAOxB,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA,WAAW;AACb,GAIoB;AAClB,MAAI,yBAAyC,CAAC;AAC9C,MAAI,mBAAwC;AAC5C,MAAI,qBAAkC,CAAC;AAGvC,QAAM,aAAa,CAAC,gBAA6B;AAC/C,2BAAuB,QAAQ,QAAM,GAAG,CAAC;AAEzC,UAAM,cAAc,MAAM,aAAS,iDAAuB,CAAC;AAE3D,iCAAyB,qCAAiB,WAAW,EAAE,IAAI,OAAK;AAC9D,YAAM,iBAAiB,OAAO,WAAW,EAAE,KAAK;AAChD,qBAAe,iBAAiB,UAAU,WAAW;AACrD,aAAO,MAAM,eAAe,oBAAoB,UAAU,WAAW;AAAA,IACvE,CAAC;AAED,yBAAqB;AAKrB,gBAAY;AAAA,EACd;AAEA,SAAO;AAAA,IACL,sBAAsB,MAAM;AAC1B,UAAI,qBAAqB,MAAM;AAC7B,gBAAQ,KAAK,0EAA0E;AACvF;AAAA,MACF;AAEA,qBAAW,uCAAe,SAAS,CAAC,CAAC;AAErC,yBAAmB,eAAe,MAAM;AACtC,cAAM,kBAAc,uCAAe,SAAS,CAAC;AAC7C,YAAI,gBAAgB,oBAAoB;AACtC,qBAAW,WAAW;AAAA,QACxB;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IAEA,qBAAqB,MAAM;AACzB,6BAAuB,QAAQ,QAAM,GAAG,CAAC;AACzC,+BAAyB,CAAC;AAE1B,yBAAmB;AACnB,yBAAmB;AAAA,IACrB;AAAA,EACF;AACF;","names":[]}

package/dist/cjs/state/modules/breakpoints.js

@@ -21,13 +21,18 @@ __export(breakpoints_exports, {
   DEFAULT_BREAKPOINTS: () => DEFAULT_BREAKPOINTS,
   DefaultBreakpointID: () => DefaultBreakpointID,
   getBreakpoint: () => import_controls2.getBreakpoint,
+  getDeviceQueries: () => getDeviceQueries,
   getInitialState: () => getInitialState,
+  getMatchingMediaBreakpointId: () => getMatchingMediaBreakpointId,
   parseBreakpointsInput: () => parseBreakpointsInput,
   reducer: () => reducer
 });
 module.exports = __toCommonJS(breakpoints_exports);
+var import_controls = require("@makeswift/controls");
 var import_actions = require("../actions");
+var import_internal = require("../actions/internal");
 var import_actions2 = require("../builder-api/actions");
+var import_is_server = require("../../utils/is-server");
 var import_controls2 = require("@makeswift/controls");
 const DefaultBreakpointID = {
   Desktop: "desktop",
@@ -54,8 +59,26 @@ const DEFAULT_BREAKPOINTS = [
     viewportWidth: 390
   }
 ];
+const getDeviceQueries = (breakpoints) => breakpoints.map((device) => ({
+  id: device.id,
+  query: (0, import_controls.getBreakpointMediaQuery)(device).replace("@media", "")
+}));
+const getBaseBreakpointId = (breakpoints) => (0, import_controls.getBaseBreakpoint)(breakpoints).id;
+function getMatchingMediaBreakpointId(breakpoints) {
+  const baseBreakpoint = getBaseBreakpointId(breakpoints);
+  if ((0, import_is_server.isServer)())
+    return baseBreakpoint;
+  const matchingBreakpoint = getDeviceQueries(breakpoints).findLast(
+    ({ query }) => window.matchMedia(query).matches
+  );
+  return matchingBreakpoint?.id ?? baseBreakpoint;
+}
 function getInitialState(breakpoints = DEFAULT_BREAKPOINTS) {
-  return breakpoints;
+  return {
+    breakpoints,
+    baseBreakpoint: getBaseBreakpointId(breakpoints),
+    clientBreakpoint: getMatchingMediaBreakpointId(breakpoints)
+  };
 }
 function reducer(state = getInitialState(), action) {
   if (!(0, import_actions.isKnownAction)(action))
@@ -65,7 +88,17 @@ function reducer(state = getInitialState(), action) {
       const breakpoints = action.payload.breakpoints;
       if (breakpoints.length === 0)
         throw new Error("Breakpoints cannot be empty.");
-      return breakpoints;
+      return {
+        breakpoints,
+        baseBreakpoint: getBaseBreakpointId(breakpoints),
+        clientBreakpoint: getMatchingMediaBreakpointId(breakpoints)
+      };
+    }
+    case import_internal.InternalActionTypes.UPDATE_CLIENT_BREAKPOINT: {
+      const clientBreakpoint = getMatchingMediaBreakpointId(state.breakpoints);
+      if (clientBreakpoint === state.clientBreakpoint)
+        return state;
+      return { ...state, clientBreakpoint };
     }
     default:
       return state;
@@ -129,7 +162,9 @@ function validateBreakpointsInput(input) {
   DEFAULT_BREAKPOINTS,
   DefaultBreakpointID,
   getBreakpoint,
+  getDeviceQueries,
   getInitialState,
+  getMatchingMediaBreakpointId,
   parseBreakpointsInput,
   reducer
 });

package/dist/cjs/state/modules/breakpoints.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/state/modules/breakpoints.ts"],"sourcesContent":["import { type Breakpoint, type Breakpoints } from '@makeswift/controls'\n\nimport { type Action, type UnknownAction, isKnownAction } from '../actions'\nimport { BuilderActionTypes } from '../builder-api/actions'\n\nexport {\n  getBreakpoint,\n  type Breakpoint,\n  type BreakpointId,\n  type Breakpoints,\n} from '@makeswift/controls'\n\nexport type State = Breakpoints\n\nexport const DefaultBreakpointID = {\n  Desktop: 'desktop',\n  Tablet: 'tablet',\n  Mobile: 'mobile',\n} as const\n\ntype DefaultBreakpointID = (typeof DefaultBreakpointID)[keyof typeof DefaultBreakpointID]\n\nexport const DEFAULT_BREAKPOINTS: Breakpoints = [\n  {\n    id: DefaultBreakpointID.Desktop,\n    label: 'Desktop',\n    minWidth: 769,\n  },\n  {\n    id: DefaultBreakpointID.Tablet,\n    label: 'Tablet',\n    minWidth: 576,\n    maxWidth: 768,\n    viewportWidth: 760,\n  },\n  {\n    id: DefaultBreakpointID.Mobile,\n    label: 'Mobile',\n    maxWidth: 575,\n    viewportWidth: 390,\n  },\n]\n\nexport function getInitialState(breakpoints = DEFAULT_BREAKPOINTS): State {\n  return breakpoints\n}\n\nexport function reducer(state: State = getInitialState(), action: Action | UnknownAction): State {\n  if (!isKnownAction(action)) return state\n\n  switch (action.type) {\n    case BuilderActionTypes.SET_BREAKPOINTS: {\n      const breakpoints = action.payload.breakpoints\n\n      if (breakpoints.length === 0) throw new Error('Breakpoints cannot be empty.')\n\n      return breakpoints\n    }\n\n    default:\n      return state\n  }\n}\n\nexport type BreakpointsInput = Record<string, { width: number; label?: string; viewport?: number }>\n\nexport function parseBreakpointsInput(input: BreakpointsInput): Breakpoints {\n  validateBreakpointsInput(input)\n\n  const sorted = Object.entries(input)\n    .map(([id, value]) => ({ ...value, id }))\n    .sort((a, b) => b.width - a.width) // Sort by width in descending order\n\n  const transformed = sorted.reduce(\n    (prev, curr, index, array) => {\n      const { width, viewport, id, label } = curr\n      const next = array[index + 1]\n\n      const breakpoint: Breakpoint = {\n        id,\n        ...(label && { label }),\n        ...(next && { minWidth: next.width + 1 }),\n        maxWidth: width,\n        viewportWidth: viewport ?? width,\n      }\n\n      return [...prev, breakpoint]\n    },\n    [\n      { id: DefaultBreakpointID.Desktop, label: 'Desktop', minWidth: sorted[0].width + 1 },\n    ] as Breakpoints,\n  )\n\n  return transformed\n}\n\nfunction validateBreakpointsInput(input: BreakpointsInput) {\n  if (DefaultBreakpointID.Desktop in input) {\n    throw new Error(\n      `Cannot change the base breakpoint. \"${DefaultBreakpointID.Desktop}\" is reserved as the base breakpoint.`,\n    )\n  }\n\n  if (Object.keys(input).length === 0) {\n    throw new Error(`Breakpoints cannot be empty. You must provide at least one breakpoint.`)\n  }\n\n  const sorted = Object.entries(input)\n    .map(([id, value]) => ({ ...value, id }))\n    .sort((a, b) => b.width - a.width) // Sort by width in descending order\n\n  sorted.forEach(({ id, width, viewport }, index, array) => {\n    // This is only valid for desktop-first. We need to check the inverse for mobile-first.\n    if (viewport && viewport > width) {\n      throw new Error(\n        `Error on breakpoint \"${id}\". Viewport cannot be greater than its width.\n        \"${id}\" has a viewport of ${viewport}px and a width of ${width}px.`,\n      )\n    }\n\n    const next = array[index + 1]\n\n    if (viewport && next && viewport < next.width) {\n      throw new Error(\n        `Error on breakpoint \"${id}\". Viewport cannot be smaller than the next breakpoint's width.\n        \"${id}\" has a viewport of ${viewport}px and the next breakpoint \"${next.id}\" has a width of ${next.width}px.`,\n      )\n    }\n\n    if (next && width === next.width) {\n      throw new Error(\n        `Breakpoints cannot have the same width. \"${id}\" and \"${next.id}\" have the same width`,\n      )\n    }\n  })\n}\n"],"mappings":"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","names":["import_actions","import_controls"]}
+{"version":3,"sources":["../../../../src/state/modules/breakpoints.ts"],"sourcesContent":["import {\n  type Breakpoint,\n  type BreakpointId,\n  type Breakpoints,\n  getBaseBreakpoint,\n  getBreakpointMediaQuery,\n} from '@makeswift/controls'\n\nimport { type Action, type UnknownAction, isKnownAction } from '../actions'\nimport { InternalActionTypes } from '../actions/internal'\nimport { BuilderActionTypes } from '../builder-api/actions'\nimport { isServer } from '../../utils/is-server'\n\nexport {\n  getBreakpoint,\n  type Breakpoint,\n  type BreakpointId,\n  type Breakpoints,\n} from '@makeswift/controls'\n\nexport type State = {\n  breakpoints: Breakpoints\n  baseBreakpoint: BreakpointId\n  clientBreakpoint: BreakpointId\n}\n\nexport const DefaultBreakpointID = {\n  Desktop: 'desktop',\n  Tablet: 'tablet',\n  Mobile: 'mobile',\n} as const\n\ntype DefaultBreakpointID = (typeof DefaultBreakpointID)[keyof typeof DefaultBreakpointID]\n\nexport const DEFAULT_BREAKPOINTS: Breakpoints = [\n  {\n    id: DefaultBreakpointID.Desktop,\n    label: 'Desktop',\n    minWidth: 769,\n  },\n  {\n    id: DefaultBreakpointID.Tablet,\n    label: 'Tablet',\n    minWidth: 576,\n    maxWidth: 768,\n    viewportWidth: 760,\n  },\n  {\n    id: DefaultBreakpointID.Mobile,\n    label: 'Mobile',\n    maxWidth: 575,\n    viewportWidth: 390,\n  },\n]\n\nexport const getDeviceQueries = (breakpoints: Breakpoints) =>\n  breakpoints.map(device => ({\n    id: device.id,\n    query: getBreakpointMediaQuery(device).replace('@media', ''),\n  }))\n\nconst getBaseBreakpointId = (breakpoints: Breakpoints): BreakpointId =>\n  getBaseBreakpoint(breakpoints).id\n\n// Intentional impurity in the reducer buys us several practical upsides here:\n//\n// - We can keep `SET_BREAKPOINTS` atomic by recalculating the client breakpoint\n//   state when we update the set of available breakpoints; if we don't do that\n//   here, we'll have to do it from the outside, and the state will temporarily\n//   hold a stale client breakpoint value in between\n//\n// - We can have a valid, internally consistent *initial* state for the client\n//   breakpoint; if we move the client breakpoint calculation out of the reducer,\n//   we'll be forced to start with a stale initial state, which will introduce\n//   implicit coupling and potential timing issues between the\n//   `useCurrentBreakpoint` hook and the client breakpoint synchronization code\n//   in `BreakpointWatch`\n//\n// - `UPDATE_CLIENT_BREAKPOINT` can compute the client breakpoint from browser\n//    state using the current breakpoint set instead of having to validate and\n//    handle external payload\n\nexport function getMatchingMediaBreakpointId(breakpoints: Breakpoints): BreakpointId {\n  const baseBreakpoint = getBaseBreakpointId(breakpoints)\n  if (isServer()) return baseBreakpoint\n\n  // using `findLast` to preserve the legacy behavior; might not be necessary\n  const matchingBreakpoint = getDeviceQueries(breakpoints).findLast(\n    ({ query }) => window.matchMedia(query).matches,\n  )\n\n  return matchingBreakpoint?.id ?? baseBreakpoint\n}\n\nexport function getInitialState(breakpoints = DEFAULT_BREAKPOINTS): State {\n  return {\n    breakpoints,\n    baseBreakpoint: getBaseBreakpointId(breakpoints),\n    clientBreakpoint: getMatchingMediaBreakpointId(breakpoints),\n  }\n}\n\nexport function reducer(state: State = getInitialState(), action: Action | UnknownAction): State {\n  if (!isKnownAction(action)) return state\n\n  switch (action.type) {\n    case BuilderActionTypes.SET_BREAKPOINTS: {\n      const breakpoints = action.payload.breakpoints\n\n      if (breakpoints.length === 0) throw new Error('Breakpoints cannot be empty.')\n\n      return {\n        breakpoints,\n        baseBreakpoint: getBaseBreakpointId(breakpoints),\n        clientBreakpoint: getMatchingMediaBreakpointId(breakpoints),\n      }\n    }\n\n    case InternalActionTypes.UPDATE_CLIENT_BREAKPOINT: {\n      const clientBreakpoint = getMatchingMediaBreakpointId(state.breakpoints)\n      if (clientBreakpoint === state.clientBreakpoint) return state\n\n      return { ...state, clientBreakpoint }\n    }\n\n    default:\n      return state\n  }\n}\n\nexport type BreakpointsInput = Record<string, { width: number; label?: string; viewport?: number }>\n\nexport function parseBreakpointsInput(input: BreakpointsInput): Breakpoints {\n  validateBreakpointsInput(input)\n\n  const sorted = Object.entries(input)\n    .map(([id, value]) => ({ ...value, id }))\n    .sort((a, b) => b.width - a.width) // Sort by width in descending order\n\n  const transformed = sorted.reduce(\n    (prev, curr, index, array) => {\n      const { width, viewport, id, label } = curr\n      const next = array[index + 1]\n\n      const breakpoint: Breakpoint = {\n        id,\n        ...(label && { label }),\n        ...(next && { minWidth: next.width + 1 }),\n        maxWidth: width,\n        viewportWidth: viewport ?? width,\n      }\n\n      return [...prev, breakpoint]\n    },\n    [\n      { id: DefaultBreakpointID.Desktop, label: 'Desktop', minWidth: sorted[0].width + 1 },\n    ] as Breakpoints,\n  )\n\n  return transformed\n}\n\nfunction validateBreakpointsInput(input: BreakpointsInput) {\n  if (DefaultBreakpointID.Desktop in input) {\n    throw new Error(\n      `Cannot change the base breakpoint. \"${DefaultBreakpointID.Desktop}\" is reserved as the base breakpoint.`,\n    )\n  }\n\n  if (Object.keys(input).length === 0) {\n    throw new Error(`Breakpoints cannot be empty. You must provide at least one breakpoint.`)\n  }\n\n  const sorted = Object.entries(input)\n    .map(([id, value]) => ({ ...value, id }))\n    .sort((a, b) => b.width - a.width) // Sort by width in descending order\n\n  sorted.forEach(({ id, width, viewport }, index, array) => {\n    // This is only valid for desktop-first. We need to check the inverse for mobile-first.\n    if (viewport && viewport > width) {\n      throw new Error(\n        `Error on breakpoint \"${id}\". Viewport cannot be greater than its width.\n        \"${id}\" has a viewport of ${viewport}px and a width of ${width}px.`,\n      )\n    }\n\n    const next = array[index + 1]\n\n    if (viewport && next && viewport < next.width) {\n      throw new Error(\n        `Error on breakpoint \"${id}\". Viewport cannot be smaller than the next breakpoint's width.\n        \"${id}\" has a viewport of ${viewport}px and the next breakpoint \"${next.id}\" has a width of ${next.width}px.`,\n      )\n    }\n\n    if (next && width === next.width) {\n      throw new Error(\n        `Breakpoints cannot have the same width. \"${id}\" and \"${next.id}\" have the same width`,\n      )\n    }\n  })\n}\n"],"mappings":"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","names":["import_actions","import_controls"]}

package/dist/cjs/state/read-only-state.js

@@ -30,8 +30,10 @@ var read_only_state_exports = {};
 __export(read_only_state_exports, {
   createBaseDocument: () => import_read_only_documents.createBaseDocument,
   createDocumentReference: () => import_read_only_documents.createDocumentReference,
+  getBaseBreakpoint: () => getBaseBreakpoint,
   getBreakpoints: () => getBreakpoints,
   getBuilderEditMode: () => getBuilderEditMode,
+  getClientBreakpoint: () => getClientBreakpoint,
   getComponentMeta: () => getComponentMeta,
   getComponentPropControllerDescriptors: () => getComponentPropControllerDescriptors,
   getComponentsMeta: () => getComponentsMeta,
@@ -181,9 +183,18 @@ function getIsReadOnly(state) {
 function getBuilderEditMode(state) {
   return state.builderEditMode;
 }
-function getBreakpoints(state) {
+function getBreakpointsStateSlice(state) {
   return state.breakpoints;
 }
+function getBreakpoints(state) {
+  return getBreakpointsStateSlice(state).breakpoints;
+}
+function getBaseBreakpoint(state) {
+  return getBreakpointsStateSlice(state).baseBreakpoint;
+}
+function getClientBreakpoint(state) {
+  return getBreakpointsStateSlice(state).clientBreakpoint;
+}
 function getLocale(state) {
   return state.locale;
 }
@@ -191,8 +202,10 @@ function getLocale(state) {
 0 && (module.exports = {
   createBaseDocument,
   createDocumentReference,
+  getBaseBreakpoint,
   getBreakpoints,
   getBuilderEditMode,
+  getClientBreakpoint,
   getComponentMeta,
   getComponentPropControllerDescriptors,
   getComponentsMeta,