@makeswift/runtime 0.21.3 → 0.22.0

package/dist/cjs/runtimes/react/use-style.js

@@ -28,7 +28,9 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var use_style_exports = {};
 __export(use_style_exports, {
-  useStyle: () => useStyle
+  serializedStyleClassName: () => serializedStyleClassName,
+  useStyle: () => useStyle,
+  useStyles: () => useStyles
 });
 module.exports = __toCommonJS(use_style_exports);
 var import_react = __toESM(require("react"));
@@ -42,15 +44,29 @@ function useStyle(style) {
   const cache = (0, import_root_style_registry.useCache)();
   const serialized = (0, import_serialize.serializeStyles)([style], cache.registered);
   (0, import_utils.registerStyles)(cache, serialized, false);
-  useInsertionEffect(() => {
+  useUniversalInsertionEffect(() => {
     (0, import_utils.insertStyles)(cache, serialized, false);
   });
+  return serializedStyleClassName(cache, serialized);
+}
+function useStyles(cache, styles) {
+  styles.forEach((s) => (0, import_utils.registerStyles)(cache, s, false));
+  useUniversalInsertionEffect(() => {
+    styles.forEach((s) => (0, import_utils.insertStyles)(cache, s, false));
+  });
+}
+function useUniversalInsertionEffect(effect) {
+  useInsertionEffect(effect);
   if (isServer)
-    (0, import_utils.insertStyles)(cache, serialized, false);
+    effect();
+}
+function serializedStyleClassName(cache, serialized) {
   return `${cache.key}-${serialized.name}`;
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  useStyle
+  serializedStyleClassName,
+  useStyle,
+  useStyles
 });
 //# sourceMappingURL=use-style.js.map

package/dist/cjs/runtimes/react/use-style.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/runtimes/react/use-style.ts"],"sourcesContent":["import React from 'react'\nimport { CSSObject } from '@emotion/css'\nimport { serializeStyles } from '@emotion/serialize'\nimport { registerStyles, insertStyles } from '@emotion/utils'\nimport { useCache } from '../../next/root-style-registry'\n\nconst isServer = typeof window === 'undefined'\nconst useInsertionEffectSpecifier = 'useInsertionEffect'\nconst useInsertionEffect = React[useInsertionEffectSpecifier] ?? React.useLayoutEffect\n\nexport function useStyle(style: CSSObject): string {\n  const cache = useCache()\n  const serialized = serializeStyles([style], cache.registered)\n\n  registerStyles(cache, serialized, false)\n\n  useInsertionEffect(() => {\n    insertStyles(cache, serialized, false)\n  })\n\n  if (isServer) insertStyles(cache, serialized, false)\n\n  return `${cache.key}-${serialized.name}`\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,uBAAgC;AAChC,mBAA6C;AAC7C,iCAAyB;AAEzB,MAAM,WAAW,OAAO,WAAW;AACnC,MAAM,8BAA8B;AACpC,MAAM,qBAAqB,aAAAA,QAAM,2BAA2B,KAAK,aAAAA,QAAM;AAEhE,SAAS,SAAS,OAA0B;AACjD,QAAM,YAAQ,qCAAS;AACvB,QAAM,iBAAa,kCAAgB,CAAC,KAAK,GAAG,MAAM,UAAU;AAE5D,mCAAe,OAAO,YAAY,KAAK;AAEvC,qBAAmB,MAAM;AACvB,mCAAa,OAAO,YAAY,KAAK;AAAA,EACvC,CAAC;AAED,MAAI;AAAU,mCAAa,OAAO,YAAY,KAAK;AAEnD,SAAO,GAAG,MAAM,GAAG,IAAI,WAAW,IAAI;AACxC;","names":["React"]}
+{"version":3,"sources":["../../../../src/runtimes/react/use-style.ts"],"sourcesContent":["import React from 'react'\nimport { CSSObject } from '@emotion/css'\nimport { EmotionCache } from '@emotion/cache'\nimport { serializeStyles } from '@emotion/serialize'\nimport { registerStyles, insertStyles, type SerializedStyles } from '@emotion/utils'\n\nimport { useCache } from '../../next/root-style-registry'\n\nconst isServer = typeof window === 'undefined'\nconst useInsertionEffectSpecifier = 'useInsertionEffect'\nconst useInsertionEffect = React[useInsertionEffectSpecifier] ?? React.useLayoutEffect\n\nexport function useStyle(style: CSSObject): string {\n  const cache = useCache()\n  const serialized = serializeStyles([style], cache.registered)\n\n  registerStyles(cache, serialized, false)\n\n  useUniversalInsertionEffect(() => {\n    insertStyles(cache, serialized, false)\n  })\n\n  return serializedStyleClassName(cache, serialized)\n}\n\nexport function useStyles(cache: EmotionCache, styles: SerializedStyles[]) {\n  styles.forEach(s => registerStyles(cache, s, false))\n\n  useUniversalInsertionEffect(() => {\n    styles.forEach(s => insertStyles(cache, s, false))\n  })\n}\n\nfunction useUniversalInsertionEffect(effect: () => void) {\n  useInsertionEffect(effect)\n  if (isServer) effect()\n}\n\nexport function serializedStyleClassName(\n  cache: EmotionCache,\n  serialized: SerializedStyles,\n): string {\n  // see https://github.com/emotion-js/emotion/blob/main/packages/utils/src/index.ts#L26\n  return `${cache.key}-${serialized.name}`\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAGlB,uBAAgC;AAChC,mBAAoE;AAEpE,iCAAyB;AAEzB,MAAM,WAAW,OAAO,WAAW;AACnC,MAAM,8BAA8B;AACpC,MAAM,qBAAqB,aAAAA,QAAM,2BAA2B,KAAK,aAAAA,QAAM;AAEhE,SAAS,SAAS,OAA0B;AACjD,QAAM,YAAQ,qCAAS;AACvB,QAAM,iBAAa,kCAAgB,CAAC,KAAK,GAAG,MAAM,UAAU;AAE5D,mCAAe,OAAO,YAAY,KAAK;AAEvC,8BAA4B,MAAM;AAChC,mCAAa,OAAO,YAAY,KAAK;AAAA,EACvC,CAAC;AAED,SAAO,yBAAyB,OAAO,UAAU;AACnD;AAEO,SAAS,UAAU,OAAqB,QAA4B;AACzE,SAAO,QAAQ,WAAK,6BAAe,OAAO,GAAG,KAAK,CAAC;AAEnD,8BAA4B,MAAM;AAChC,WAAO,QAAQ,WAAK,2BAAa,OAAO,GAAG,KAAK,CAAC;AAAA,EACnD,CAAC;AACH;AAEA,SAAS,4BAA4B,QAAoB;AACvD,qBAAmB,MAAM;AACzB,MAAI;AAAU,WAAO;AACvB;AAEO,SAAS,yBACd,OACA,YACQ;AAER,SAAO,GAAG,MAAM,GAAG,IAAI,WAAW,IAAI;AACxC;","names":["React"]}

package/dist/cjs/slate/TypographyPlugin/index.js

@@ -25,6 +25,7 @@ __export(TypographyPlugin_exports, {
 });
 module.exports = __toCommonJS(TypographyPlugin_exports);
 var import_slate = require("slate");
+var import_css = require("@emotion/css");
 var import_controls = require("@makeswift/controls");
 var import_clearActiveTypographyStyle = require("./clearActiveTypographyStyle");
 var import_clearDeviceActiveTypography = require("./clearDeviceActiveTypography");
@@ -126,7 +127,7 @@ function TypographyPlugin() {
         ...props,
         leaf: {
           ...props.leaf,
-          className: `${props.leaf.className} ${className}`
+          className: (0, import_css.cx)(props.leaf.className, className)
         }
       });
     }

package/dist/cjs/slate/TypographyPlugin/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/slate/TypographyPlugin/index.ts"],"sourcesContent":["import { BaseEditor, Descendant, Editor, NodeEntry, Text, Transforms } from 'slate'\nimport { unstable_Typography } from '@makeswift/controls'\n\nimport { clearActiveTypographyStyle } from './clearActiveTypographyStyle'\nimport { clearDeviceActiveTypography } from './clearDeviceActiveTypography'\nimport { detachActiveTypography } from './detachActiveTypography'\nimport { setActiveTypographyId } from './setActiveTypographyId'\nimport { setActiveTypographyStyle } from './setActiveTypographyStyle'\nimport { getValue } from './getValue'\nimport { getSelection } from '../selectors'\nimport { Plugin } from '../../controls/rich-text-v2/plugin'\nimport { normalizeTypographyUp } from './normalizeTypographyUp'\nimport { normalizeTypographyDown } from './normalizeTypographyDown'\nimport { normalizeSimilarText } from './normalizeSimilarText'\n\nexport const TypographyActions = {\n  setActiveTypographyId,\n  setActiveTypographyStyle,\n  clearActiveTypographyStyle,\n  clearDeviceActiveTypography,\n  detachActiveTypography,\n}\n\nexport const TYPOGRAPHY_KEY = 'typography'\n\nexport interface TypographyEditor extends BaseEditor {\n  typographyNormalizationDirection?: 'up' | 'neutral' | 'down'\n}\n\nexport function withTypography(editor: Editor) {\n  const { normalizeNode } = editor\n  editor.normalizeNode = entry => {\n    const [normalizationNode, normalizationPath] = entry\n\n    if (\n      'typography' in normalizationNode &&\n      normalizationNode?.typography?.id == null &&\n      normalizationNode?.typography?.style.length === 0\n    ) {\n      Transforms.unsetNodes(editor, TYPOGRAPHY_KEY, { at: normalizationPath })\n      return\n    }\n\n    if ('slice' in normalizationNode && normalizationNode?.slice != null) {\n      Transforms.unsetNodes(editor, 'slice', { at: normalizationPath })\n      return\n    }\n\n    if (normalizeSimilarText(editor, entry)) return\n\n    if (editor.typographyNormalizationDirection === 'up' && normalizeTypographyUp(editor, entry))\n      return\n\n    if (\n      (editor.typographyNormalizationDirection === 'down' ||\n        editor.typographyNormalizationDirection == null) &&\n      normalizeTypographyDown(editor, entry)\n    )\n      return\n\n    normalizeNode(entry)\n  }\n\n  return editor\n}\n\nexport function TypographyPlugin() {\n  return Plugin({\n    withPlugin: withTypography,\n    control: {\n      definition: unstable_Typography(),\n      onChange: (editor, value) => {\n        Editor.withoutNormalizing(editor, () => {\n          const at = getSelection(editor)\n          if (!at) return\n          const atRef = Editor.rangeRef(editor, at)\n          if (atRef.current) {\n            Transforms.setNodes<Descendant>(\n              editor,\n              {\n                slice: true,\n              },\n              {\n                at: atRef.current,\n                match: Text.isText,\n                split: true,\n              },\n            )\n          }\n\n          if (atRef.current) {\n            const nodesToUpdate = Array.from(\n              Editor.nodes(editor, {\n                at: atRef.current,\n                match: node => Text.isText(node) && node.slice === true,\n              }),\n            ) as NodeEntry<Text>[]\n\n            if (nodesToUpdate.length !== value?.length)\n              return console.error(\n                `TypographyControl.onChange received the wrong number of arguments.\n            Called with ${value?.length} values mapping to ${nodesToUpdate.length} nodes.`,\n              )\n\n            for (const [index, [, path]] of nodesToUpdate.entries()) {\n              Transforms.setNodes(\n                editor,\n                {\n                  typography: value?.at(index),\n                },\n                { at: path, match: Text.isText },\n              )\n            }\n          }\n\n          atRef.unref()\n        })\n      },\n      getValue,\n      getLeafValue: (text: Text) => {\n        return Text.isText(text) ? text.typography : undefined\n      },\n    },\n    renderLeaf: (renderLeaf, className) => props => {\n      return renderLeaf({\n        ...props,\n        leaf: {\n          ...props.leaf,\n          className: `${props.leaf.className} ${className}`,\n        },\n      })\n    },\n  })\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA4E;AAC5E,sBAAoC;AAEpC,wCAA2C;AAC3C,yCAA4C;AAC5C,oCAAuC;AACvC,mCAAsC;AACtC,sCAAyC;AACzC,sBAAyB;AACzB,uBAA6B;AAC7B,oBAAuB;AACvB,mCAAsC;AACtC,qCAAwC;AACxC,kCAAqC;AAE9B,MAAM,oBAAoB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,MAAM,iBAAiB;AAMvB,SAAS,eAAe,QAAgB;AAC7C,QAAM,EAAE,cAAc,IAAI;AAC1B,SAAO,gBAAgB,WAAS;AAC9B,UAAM,CAAC,mBAAmB,iBAAiB,IAAI;AAE/C,QACE,gBAAgB,qBAChB,mBAAmB,YAAY,MAAM,QACrC,mBAAmB,YAAY,MAAM,WAAW,GAChD;AACA,8BAAW,WAAW,QAAQ,gBAAgB,EAAE,IAAI,kBAAkB,CAAC;AACvE;AAAA,IACF;AAEA,QAAI,WAAW,qBAAqB,mBAAmB,SAAS,MAAM;AACpE,8BAAW,WAAW,QAAQ,SAAS,EAAE,IAAI,kBAAkB,CAAC;AAChE;AAAA,IACF;AAEA,YAAI,kDAAqB,QAAQ,KAAK;AAAG;AAEzC,QAAI,OAAO,qCAAqC,YAAQ,oDAAsB,QAAQ,KAAK;AACzF;AAEF,SACG,OAAO,qCAAqC,UAC3C,OAAO,oCAAoC,aAC7C,wDAAwB,QAAQ,KAAK;AAErC;AAEF,kBAAc,KAAK;AAAA,EACrB;AAEA,SAAO;AACT;AAEO,SAAS,mBAAmB;AACjC,aAAO,sBAAO;AAAA,IACZ,YAAY;AAAA,IACZ,SAAS;AAAA,MACP,gBAAY,qCAAoB;AAAA,MAChC,UAAU,CAAC,QAAQ,UAAU;AAC3B,4BAAO,mBAAmB,QAAQ,MAAM;AACtC,gBAAM,SAAK,+BAAa,MAAM;AAC9B,cAAI,CAAC;AAAI;AACT,gBAAM,QAAQ,oBAAO,SAAS,QAAQ,EAAE;AACxC,cAAI,MAAM,SAAS;AACjB,oCAAW;AAAA,cACT;AAAA,cACA;AAAA,gBACE,OAAO;AAAA,cACT;AAAA,cACA;AAAA,gBACE,IAAI,MAAM;AAAA,gBACV,OAAO,kBAAK;AAAA,gBACZ,OAAO;AAAA,cACT;AAAA,YACF;AAAA,UACF;AAEA,cAAI,MAAM,SAAS;AACjB,kBAAM,gBAAgB,MAAM;AAAA,cAC1B,oBAAO,MAAM,QAAQ;AAAA,gBACnB,IAAI,MAAM;AAAA,gBACV,OAAO,UAAQ,kBAAK,OAAO,IAAI,KAAK,KAAK,UAAU;AAAA,cACrD,CAAC;AAAA,YACH;AAEA,gBAAI,cAAc,WAAW,OAAO;AAClC,qBAAO,QAAQ;AAAA,gBACb;AAAA,0BACU,OAAO,MAAM,sBAAsB,cAAc,MAAM;AAAA,cACnE;AAEF,uBAAW,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,KAAK,cAAc,QAAQ,GAAG;AACvD,sCAAW;AAAA,gBACT;AAAA,gBACA;AAAA,kBACE,YAAY,OAAO,GAAG,KAAK;AAAA,gBAC7B;AAAA,gBACA,EAAE,IAAI,MAAM,OAAO,kBAAK,OAAO;AAAA,cACjC;AAAA,YACF;AAAA,UACF;AAEA,gBAAM,MAAM;AAAA,QACd,CAAC;AAAA,MACH;AAAA,MACA;AAAA,MACA,cAAc,CAAC,SAAe;AAC5B,eAAO,kBAAK,OAAO,IAAI,IAAI,KAAK,aAAa;AAAA,MAC/C;AAAA,IACF;AAAA,IACA,YAAY,CAAC,YAAY,cAAc,WAAS;AAC9C,aAAO,WAAW;AAAA,QAChB,GAAG;AAAA,QACH,MAAM;AAAA,UACJ,GAAG,MAAM;AAAA,UACT,WAAW,GAAG,MAAM,KAAK,SAAS,IAAI,SAAS;AAAA,QACjD;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AACH;","names":[]}
+{"version":3,"sources":["../../../../src/slate/TypographyPlugin/index.ts"],"sourcesContent":["import { BaseEditor, Descendant, Editor, NodeEntry, Text, Transforms } from 'slate'\nimport { cx } from '@emotion/css'\nimport { unstable_Typography } from '@makeswift/controls'\n\nimport { clearActiveTypographyStyle } from './clearActiveTypographyStyle'\nimport { clearDeviceActiveTypography } from './clearDeviceActiveTypography'\nimport { detachActiveTypography } from './detachActiveTypography'\nimport { setActiveTypographyId } from './setActiveTypographyId'\nimport { setActiveTypographyStyle } from './setActiveTypographyStyle'\nimport { getValue } from './getValue'\nimport { getSelection } from '../selectors'\nimport { Plugin } from '../../controls/rich-text-v2/plugin'\nimport { normalizeTypographyUp } from './normalizeTypographyUp'\nimport { normalizeTypographyDown } from './normalizeTypographyDown'\nimport { normalizeSimilarText } from './normalizeSimilarText'\n\nexport const TypographyActions = {\n  setActiveTypographyId,\n  setActiveTypographyStyle,\n  clearActiveTypographyStyle,\n  clearDeviceActiveTypography,\n  detachActiveTypography,\n}\n\nexport const TYPOGRAPHY_KEY = 'typography'\n\nexport interface TypographyEditor extends BaseEditor {\n  typographyNormalizationDirection?: 'up' | 'neutral' | 'down'\n}\n\nexport function withTypography(editor: Editor) {\n  const { normalizeNode } = editor\n  editor.normalizeNode = entry => {\n    const [normalizationNode, normalizationPath] = entry\n\n    if (\n      'typography' in normalizationNode &&\n      normalizationNode?.typography?.id == null &&\n      normalizationNode?.typography?.style.length === 0\n    ) {\n      Transforms.unsetNodes(editor, TYPOGRAPHY_KEY, { at: normalizationPath })\n      return\n    }\n\n    if ('slice' in normalizationNode && normalizationNode?.slice != null) {\n      Transforms.unsetNodes(editor, 'slice', { at: normalizationPath })\n      return\n    }\n\n    if (normalizeSimilarText(editor, entry)) return\n\n    if (editor.typographyNormalizationDirection === 'up' && normalizeTypographyUp(editor, entry))\n      return\n\n    if (\n      (editor.typographyNormalizationDirection === 'down' ||\n        editor.typographyNormalizationDirection == null) &&\n      normalizeTypographyDown(editor, entry)\n    )\n      return\n\n    normalizeNode(entry)\n  }\n\n  return editor\n}\n\nexport function TypographyPlugin() {\n  return Plugin({\n    withPlugin: withTypography,\n    control: {\n      definition: unstable_Typography(),\n      onChange: (editor, value) => {\n        Editor.withoutNormalizing(editor, () => {\n          const at = getSelection(editor)\n          if (!at) return\n          const atRef = Editor.rangeRef(editor, at)\n          if (atRef.current) {\n            Transforms.setNodes<Descendant>(\n              editor,\n              {\n                slice: true,\n              },\n              {\n                at: atRef.current,\n                match: Text.isText,\n                split: true,\n              },\n            )\n          }\n\n          if (atRef.current) {\n            const nodesToUpdate = Array.from(\n              Editor.nodes(editor, {\n                at: atRef.current,\n                match: node => Text.isText(node) && node.slice === true,\n              }),\n            ) as NodeEntry<Text>[]\n\n            if (nodesToUpdate.length !== value?.length)\n              return console.error(\n                `TypographyControl.onChange received the wrong number of arguments.\n            Called with ${value?.length} values mapping to ${nodesToUpdate.length} nodes.`,\n              )\n\n            for (const [index, [, path]] of nodesToUpdate.entries()) {\n              Transforms.setNodes(\n                editor,\n                {\n                  typography: value?.at(index),\n                },\n                { at: path, match: Text.isText },\n              )\n            }\n          }\n\n          atRef.unref()\n        })\n      },\n      getValue,\n      getLeafValue: (text: Text) => {\n        return Text.isText(text) ? text.typography : undefined\n      },\n    },\n    renderLeaf: (renderLeaf, className) => props => {\n      return renderLeaf({\n        ...props,\n        leaf: {\n          ...props.leaf,\n          className: cx(props.leaf.className, className),\n        },\n      })\n    },\n  })\n}\n"],"mappings":"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","names":[]}

package/dist/cjs/slate/TypographyPlugin/normalizeTypographyDown.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var normalizeTypographyDown_exports = {};
 __export(normalizeTypographyDown_exports, {
@@ -33,7 +23,7 @@ __export(normalizeTypographyDown_exports, {
 });
 module.exports = __toCommonJS(normalizeTypographyDown_exports);
 var import_slate = require("slate");
-var import_shallowMerge = __toESM(require("../../utils/shallowMerge"));
+var import_controls = require("@makeswift/controls");
 var import__ = require(".");
 function shallowMergeTypographies(commonTypography, typography) {
   const devices = [
@@ -48,7 +38,7 @@ function shallowMergeTypographies(commonTypography, typography) {
       const existingDeviceStyle = typography?.style.find((s) => s.deviceId === deviceId);
       return {
         deviceId,
-        value: (0, import_shallowMerge.default)(existingDeviceStyle?.value ?? {}, commonDevice?.value ?? {})
+        value: (0, import_controls.shallowMerge)(existingDeviceStyle?.value ?? {}, commonDevice?.value ?? {})
       };
     })
   };

package/dist/cjs/slate/TypographyPlugin/normalizeTypographyDown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/slate/TypographyPlugin/normalizeTypographyDown.ts"],"sourcesContent":["import { Editor, Element, NodeEntry, Transforms } from 'slate'\nimport { RichTextTypography } from '@makeswift/controls'\n\nimport { MakeswiftEditor } from '../types'\nimport shallowMerge from '../../utils/shallowMerge'\nimport { TYPOGRAPHY_KEY } from '.'\n\nexport function shallowMergeTypographies(\n  commonTypography?: RichTextTypography,\n  typography?: RichTextTypography,\n) {\n  const devices = [\n    ...new Set(\n      commonTypography?.style\n        .map(node => node.deviceId)\n        .concat(typography?.style.map(node => node.deviceId) ?? []),\n    ),\n  ]\n\n  return {\n    id: commonTypography?.id ?? typography?.id,\n    style: devices.map(deviceId => {\n      const commonDevice = commonTypography?.style.find(s => s.deviceId === deviceId)\n      const existingDeviceStyle = typography?.style.find(s => s.deviceId === deviceId)\n\n      return {\n        deviceId,\n        value: shallowMerge(existingDeviceStyle?.value ?? {}, commonDevice?.value ?? {}),\n      }\n    }),\n  }\n}\n\nexport function normalizeTypographyDown(editor: MakeswiftEditor, entry: NodeEntry): boolean {\n  const [normalizationNode, normalizationPath] = entry\n\n  if (\n    Element.isElement(normalizationNode) &&\n    normalizationNode.typography != null &&\n    normalizationNode.children.length\n  ) {\n    Editor.withoutNormalizing(editor, () => {\n      Transforms.unsetNodes(editor, TYPOGRAPHY_KEY, { at: normalizationPath })\n      for (let i = 0; i < normalizationNode.children.length; i++) {\n        const resultingTypography = shallowMergeTypographies(\n          normalizationNode.typography,\n          normalizationNode.children.at(i)?.typography,\n        )\n        Transforms.setNodes(\n          editor,\n          { typography: resultingTypography },\n          { at: [...normalizationPath, i] },\n        )\n      }\n    })\n    return true\n  }\n\n  return false\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAuD;AAIvD,0BAAyB;AACzB,eAA+B;AAExB,SAAS,yBACd,kBACA,YACA;AACA,QAAM,UAAU;AAAA,IACd,GAAG,IAAI;AAAA,MACL,kBAAkB,MACf,IAAI,UAAQ,KAAK,QAAQ,EACzB,OAAO,YAAY,MAAM,IAAI,UAAQ,KAAK,QAAQ,KAAK,CAAC,CAAC;AAAA,IAC9D;AAAA,EACF;AAEA,SAAO;AAAA,IACL,IAAI,kBAAkB,MAAM,YAAY;AAAA,IACxC,OAAO,QAAQ,IAAI,cAAY;AAC7B,YAAM,eAAe,kBAAkB,MAAM,KAAK,OAAK,EAAE,aAAa,QAAQ;AAC9E,YAAM,sBAAsB,YAAY,MAAM,KAAK,OAAK,EAAE,aAAa,QAAQ;AAE/E,aAAO;AAAA,QACL;AAAA,QACA,WAAO,oBAAAA,SAAa,qBAAqB,SAAS,CAAC,GAAG,cAAc,SAAS,CAAC,CAAC;AAAA,MACjF;AAAA,IACF,CAAC;AAAA,EACH;AACF;AAEO,SAAS,wBAAwB,QAAyB,OAA2B;AAC1F,QAAM,CAAC,mBAAmB,iBAAiB,IAAI;AAE/C,MACE,qBAAQ,UAAU,iBAAiB,KACnC,kBAAkB,cAAc,QAChC,kBAAkB,SAAS,QAC3B;AACA,wBAAO,mBAAmB,QAAQ,MAAM;AACtC,8BAAW,WAAW,QAAQ,yBAAgB,EAAE,IAAI,kBAAkB,CAAC;AACvE,eAAS,IAAI,GAAG,IAAI,kBAAkB,SAAS,QAAQ,KAAK;AAC1D,cAAM,sBAAsB;AAAA,UAC1B,kBAAkB;AAAA,UAClB,kBAAkB,SAAS,GAAG,CAAC,GAAG;AAAA,QACpC;AACA,gCAAW;AAAA,UACT;AAAA,UACA,EAAE,YAAY,oBAAoB;AAAA,UAClC,EAAE,IAAI,CAAC,GAAG,mBAAmB,CAAC,EAAE;AAAA,QAClC;AAAA,MACF;AAAA,IACF,CAAC;AACD,WAAO;AAAA,EACT;AAEA,SAAO;AACT;","names":["shallowMerge"]}
+{"version":3,"sources":["../../../../src/slate/TypographyPlugin/normalizeTypographyDown.ts"],"sourcesContent":["import { Editor, Element, NodeEntry, Transforms } from 'slate'\nimport { RichTextTypography, shallowMerge } from '@makeswift/controls'\n\nimport { MakeswiftEditor } from '../types'\nimport { TYPOGRAPHY_KEY } from '.'\n\nexport function shallowMergeTypographies(\n  commonTypography?: RichTextTypography,\n  typography?: RichTextTypography,\n) {\n  const devices = [\n    ...new Set(\n      commonTypography?.style\n        .map(node => node.deviceId)\n        .concat(typography?.style.map(node => node.deviceId) ?? []),\n    ),\n  ]\n\n  return {\n    id: commonTypography?.id ?? typography?.id,\n    style: devices.map(deviceId => {\n      const commonDevice = commonTypography?.style.find(s => s.deviceId === deviceId)\n      const existingDeviceStyle = typography?.style.find(s => s.deviceId === deviceId)\n\n      return {\n        deviceId,\n        value: shallowMerge(existingDeviceStyle?.value ?? {}, commonDevice?.value ?? {}),\n      }\n    }),\n  }\n}\n\nexport function normalizeTypographyDown(editor: MakeswiftEditor, entry: NodeEntry): boolean {\n  const [normalizationNode, normalizationPath] = entry\n\n  if (\n    Element.isElement(normalizationNode) &&\n    normalizationNode.typography != null &&\n    normalizationNode.children.length\n  ) {\n    Editor.withoutNormalizing(editor, () => {\n      Transforms.unsetNodes(editor, TYPOGRAPHY_KEY, { at: normalizationPath })\n      for (let i = 0; i < normalizationNode.children.length; i++) {\n        const resultingTypography = shallowMergeTypographies(\n          normalizationNode.typography,\n          normalizationNode.children.at(i)?.typography,\n        )\n        Transforms.setNodes(\n          editor,\n          { typography: resultingTypography },\n          { at: [...normalizationPath, i] },\n        )\n      }\n    })\n    return true\n  }\n\n  return false\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAuD;AACvD,sBAAiD;AAGjD,eAA+B;AAExB,SAAS,yBACd,kBACA,YACA;AACA,QAAM,UAAU;AAAA,IACd,GAAG,IAAI;AAAA,MACL,kBAAkB,MACf,IAAI,UAAQ,KAAK,QAAQ,EACzB,OAAO,YAAY,MAAM,IAAI,UAAQ,KAAK,QAAQ,KAAK,CAAC,CAAC;AAAA,IAC9D;AAAA,EACF;AAEA,SAAO;AAAA,IACL,IAAI,kBAAkB,MAAM,YAAY;AAAA,IACxC,OAAO,QAAQ,IAAI,cAAY;AAC7B,YAAM,eAAe,kBAAkB,MAAM,KAAK,OAAK,EAAE,aAAa,QAAQ;AAC9E,YAAM,sBAAsB,YAAY,MAAM,KAAK,OAAK,EAAE,aAAa,QAAQ;AAE/E,aAAO;AAAA,QACL;AAAA,QACA,WAAO,8BAAa,qBAAqB,SAAS,CAAC,GAAG,cAAc,SAAS,CAAC,CAAC;AAAA,MACjF;AAAA,IACF,CAAC;AAAA,EACH;AACF;AAEO,SAAS,wBAAwB,QAAyB,OAA2B;AAC1F,QAAM,CAAC,mBAAmB,iBAAiB,IAAI;AAE/C,MACE,qBAAQ,UAAU,iBAAiB,KACnC,kBAAkB,cAAc,QAChC,kBAAkB,SAAS,QAC3B;AACA,wBAAO,mBAAmB,QAAQ,MAAM;AACtC,8BAAW,WAAW,QAAQ,yBAAgB,EAAE,IAAI,kBAAkB,CAAC;AACvE,eAAS,IAAI,GAAG,IAAI,kBAAkB,SAAS,QAAQ,KAAK;AAC1D,cAAM,sBAAsB;AAAA,UAC1B,kBAAkB;AAAA,UAClB,kBAAkB,SAAS,GAAG,CAAC,GAAG;AAAA,QACpC;AACA,gCAAW;AAAA,UACT;AAAA,UACA,EAAE,YAAY,oBAAoB;AAAA,UAClC,EAAE,IAAI,CAAC,GAAG,mBAAmB,CAAC,EAAE;AAAA,QAClC;AAAA,MACF;AAAA,IACF,CAAC;AACD,WAAO;AAAA,EACT;AAEA,SAAO;AACT;","names":[]}

package/dist/cjs/slate/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/slate/index.ts"],"sourcesContent":["export * from './BlockPlugin'\nexport * from './BuilderPlugin'\nexport * from './InlineModePlugin'\nexport * from './InlinePlugin'\nexport * from './LinkPlugin'\nexport * from './LocalChangesPlugin'\nexport * from './TextAlignPlugin'\nexport * from './TypographyPlugin'\nexport * from './types'\nexport * from './utils'\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,0BAAc,0BAAd;AACA,0BAAc,4BADd;AAEA,0BAAc,+BAFd;AAGA,0BAAc,2BAHd;AAIA,0BAAc,yBAJd;AAKA,0BAAc,iCALd;AAMA,0BAAc,8BANd;AAOA,0BAAc,+BAPd;AAQA,0BAAc,oBARd;AASA,0BAAc,oBATd;","names":[]}
+{"version":3,"sources":["../../../src/slate/index.ts"],"sourcesContent":["export { type NodeJSON, type ValueJSON, type InlineJSON, type MarkJSON } from '@makeswift/controls'\nexport * from './BlockPlugin'\nexport * from './BuilderPlugin'\nexport * from './InlineModePlugin'\nexport * from './InlinePlugin'\nexport * from './LinkPlugin'\nexport * from './LocalChangesPlugin'\nexport * from './TextAlignPlugin'\nexport * from './TypographyPlugin'\nexport * from './types'\nexport * from './utils'\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AACA,0BAAc,0BADd;AAEA,0BAAc,4BAFd;AAGA,0BAAc,+BAHd;AAIA,0BAAc,2BAJd;AAKA,0BAAc,yBALd;AAMA,0BAAc,iCANd;AAOA,0BAAc,8BAPd;AAQA,0BAAc,+BARd;AASA,0BAAc,oBATd;AAUA,0BAAc,oBAVd;","names":[]}

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

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,37 +15,25 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var breakpoints_exports = {};
 __export(breakpoints_exports, {
   DEFAULT_BREAKPOINTS: () => DEFAULT_BREAKPOINTS,
   DefaultBreakpointID: () => DefaultBreakpointID,
-  findBreakpointOverride: () => findBreakpointOverride,
+  findBreakpointOverride: () => import_controls2.findBreakpointOverride,
   findNextFallback: () => findNextFallback,
-  getBaseBreakpoint: () => getBaseBreakpoint,
+  getBaseBreakpoint: () => import_controls2.getBaseBreakpoint,
   getBreakpoint: () => getBreakpoint,
   getBreakpointMediaQuery: () => getBreakpointMediaQuery,
   getInitialState: () => getInitialState,
   getViewportStyle: () => getViewportStyle,
-  join: () => join,
-  mergeOrCoalesceFallbacks: () => mergeOrCoalesceFallbacks,
-  mergeResponsiveValues: () => mergeResponsiveValues,
   parseBreakpointsInput: () => parseBreakpointsInput,
-  reducer: () => reducer,
-  shallowMergeFallbacks: () => shallowMergeFallbacks
+  reducer: () => reducer
 });
 module.exports = __toCommonJS(breakpoints_exports);
+var import_controls = require("@makeswift/controls");
 var import_actions = require("../actions");
-var import_shallowMerge = __toESM(require("../../utils/shallowMerge"));
-var import_coalesce = __toESM(require("../../utils/coalesce"));
+var import_controls2 = require("@makeswift/controls");
 const DefaultBreakpointID = {
   Desktop: "desktop",
   Tablet: "tablet",
@@ -141,60 +127,12 @@ function validateBreakpointsInput(input) {
     }
   });
 }
-function sortBreakpoints(breakpoints) {
-  return breakpoints.sort((a, b) => (b?.minWidth ?? 0) - (a?.minWidth ?? 0));
-}
 const getBreakpoint = (state, breakpointId) => {
   const breakpoint = state.find(({ id }) => id === breakpointId);
   if (breakpoint == null)
     throw new Error(`Unrecognized breakpoint ID: "${breakpointId}".`);
   return breakpoint;
 };
-const getBaseBreakpoint = (breakpoints) => {
-  const breakpoint = sortBreakpoints(breakpoints)[0];
-  if (breakpoint == null)
-    throw new Error(`Cannot get base breakpoint.`);
-  return breakpoint;
-};
-function findBreakpointOverride(breakpoints, values = [], deviceId, strategy = defaultStrategy) {
-  const value = values.find(({ deviceId: d }) => d === deviceId);
-  const fallbacks = breakpoints.slice(0, breakpoints.findIndex((d) => d.id === deviceId) + 1).reverse().map((d) => values.find((v) => v.deviceId === d.id)).filter((override) => Boolean(override));
-  return value != null || fallbacks.length > 0 ? strategy(value, fallbacks) : void 0;
-}
-function defaultStrategy(value, fallbacks) {
-  return value || fallbacks[0];
-}
-function shallowMergeFallbacks(value, fallbacks) {
-  return [value, ...fallbacks].filter((override) => Boolean(override)).reduce((a, b) => ({
-    deviceId: a.deviceId || b.deviceId,
-    value: (0, import_shallowMerge.default)(a.value, b.value)
-  }));
-}
-function mergeOrCoalesce(a, b) {
-  if (typeof a === "object" && a !== null && !Array.isArray(a) && typeof b === "object" && b !== null && !Array.isArray(b)) {
-    return (0, import_shallowMerge.default)(a, b);
-  }
-  return (0, import_coalesce.default)(a, b);
-}
-function mergeOrCoalesceFallbacks(value, fallbacks) {
-  return [value, ...fallbacks].filter((override) => Boolean(override)).reduce((a, b) => ({
-    deviceId: a.deviceId || b.deviceId,
-    value: mergeOrCoalesce(a.value, b.value)
-  }));
-}
-function join(breakpoints, responsiveValues, joinFn, strategy) {
-  return breakpoints.map(({ id }) => id).map((deviceId) => {
-    const value = joinFn(
-      responsiveValues.map((responsiveValue) => {
-        const deviceValue = responsiveValue && findBreakpointOverride(breakpoints, responsiveValue, deviceId, strategy);
-        return deviceValue == null ? void 0 : deviceValue.value;
-      })
-    );
-    if (value == null)
-      return null;
-    return { deviceId, value };
-  }).filter((override) => Boolean(override));
-}
 const getBreakpointMediaQuery = (breakpoint) => {
   const parts = ["@media only screen"];
   if (breakpoint.minWidth != null) {
@@ -213,7 +151,7 @@ const getViewportStyle = (state, deviceId) => {
   };
 };
 function findNextFallback(breakpoints, value, deviceId, activeDeviceId, fallbackStrategy) {
-  const deviceOverride = findBreakpointOverride(
+  const deviceOverride = (0, import_controls.findBreakpointOverride)(
     breakpoints,
     value.filter((v) => v.deviceId !== activeDeviceId),
     deviceId,
@@ -221,20 +159,6 @@ function findNextFallback(breakpoints, value, deviceId, activeDeviceId, fallback
   );
   return (deviceOverride && getBreakpoint(breakpoints, deviceOverride.deviceId)) ?? null;
 }
-const mergeResponsiveValues = (breakpoints, source, override) => {
-  const devices = [
-    ...new Set(
-      source.map(({ deviceId }) => deviceId).concat(override.map(({ deviceId }) => deviceId))
-    )
-  ];
-  return devices.map((deviceId) => ({
-    deviceId,
-    value: {
-      ...(findBreakpointOverride(breakpoints, source, deviceId) || { value: {} }).value,
-      ...(findBreakpointOverride(breakpoints, override, deviceId, (v) => v) || { value: {} }).value
-    }
-  }));
-};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DEFAULT_BREAKPOINTS,
@@ -246,11 +170,7 @@ const mergeResponsiveValues = (breakpoints, source, override) => {
   getBreakpointMediaQuery,
   getInitialState,
   getViewportStyle,
-  join,
-  mergeOrCoalesceFallbacks,
-  mergeResponsiveValues,
   parseBreakpointsInput,
-  reducer,
-  shallowMergeFallbacks
+  reducer
 });
 //# sourceMappingURL=breakpoints.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/state/modules/breakpoints.ts"],"sourcesContent":["import { Viewport } from 'csstype'\n\nimport {\n  type Data,\n  type ResponsiveValue,\n  type DeviceOverride,\n  type Device as DeviceId,\n} from '@makeswift/controls'\n\nimport { Action, ActionTypes } from '../actions'\n\nimport shallowMerge from '../../utils/shallowMerge'\nimport coalesce from '../../utils/coalesce'\n\nexport { type ResponsiveValue, type DeviceOverride } from '@makeswift/controls'\n\nexport type BreakpointId = DeviceId\n\nexport type Breakpoint = {\n  id: BreakpointId\n  label?: string\n  viewportWidth?: number\n  minWidth?: number\n  maxWidth?: number\n}\n\nexport type Breakpoints = Breakpoint[]\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): State {\n  switch (action.type) {\n    case ActionTypes.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\n// Sort breakpoints by minWidth in descending order\nfunction sortBreakpoints(breakpoints: Breakpoints): Breakpoints {\n  return breakpoints.sort((a, b) => (b?.minWidth ?? 0) - (a?.minWidth ?? 0))\n}\n\nexport const getBreakpoint = (state: State, breakpointId: Breakpoint['id']): Breakpoint => {\n  const breakpoint = state.find(({ id }) => id === breakpointId)\n\n  if (breakpoint == null) throw new Error(`Unrecognized breakpoint ID: \"${breakpointId}\".`)\n\n  return breakpoint\n}\n\nexport const getBaseBreakpoint = (breakpoints: Breakpoints): Breakpoint => {\n  const breakpoint = sortBreakpoints(breakpoints)[0]\n\n  if (breakpoint == null) throw new Error(`Cannot get base breakpoint.`)\n\n  return breakpoint\n}\n\nexport function findBreakpointOverride<S>(\n  breakpoints: Breakpoints,\n  values: ResponsiveValue<S> = [],\n  deviceId: string,\n  strategy: FallbackStrategy<S> = defaultStrategy,\n): DeviceOverride<S> | undefined {\n  const value = values.find(({ deviceId: d }) => d === deviceId)\n  const fallbacks = breakpoints\n    .slice(0, breakpoints.findIndex(d => d.id === deviceId) + 1)\n    .reverse()\n    .map(d => values.find(v => v.deviceId === d.id))\n    .filter((override): override is DeviceOverride<S> => Boolean(override))\n\n  return value != null || fallbacks.length > 0 ? strategy(value, fallbacks) : undefined\n}\n\nexport type FallbackStrategy<V> = (\n  arg0: DeviceOverride<V> | undefined,\n  arg1: ResponsiveValue<V>,\n) => DeviceOverride<V> | undefined\n\nfunction defaultStrategy<V>(\n  value: DeviceOverride<V> | undefined,\n  fallbacks: ResponsiveValue<V>,\n): DeviceOverride<V> | undefined {\n  return value || fallbacks[0]\n}\n\nexport function shallowMergeFallbacks<V extends Record<string, unknown>>(\n  value: DeviceOverride<V> | undefined,\n  fallbacks: ResponsiveValue<V>,\n): DeviceOverride<V> | undefined {\n  return [value, ...fallbacks]\n    .filter((override): override is DeviceOverride<V> => Boolean(override))\n    .reduce((a, b) => ({\n      deviceId: a.deviceId || b.deviceId,\n      value: shallowMerge(a.value, b.value),\n    }))\n}\n\nfunction mergeOrCoalesce<A extends Data>(a: A, b: A): A {\n  if (\n    typeof a === 'object' &&\n    a !== null &&\n    !Array.isArray(a) &&\n    typeof b === 'object' &&\n    b !== null &&\n    !Array.isArray(b)\n  ) {\n    return shallowMerge(a, b) as A\n  }\n  return coalesce(a, b)\n}\n\nexport function mergeOrCoalesceFallbacks<V extends Data>(\n  value: DeviceOverride<V> | undefined,\n  fallbacks: ResponsiveValue<V>,\n): DeviceOverride<V> | undefined {\n  return [value, ...fallbacks]\n    .filter((override): override is DeviceOverride<V> => Boolean(override))\n    .reduce((a, b) => ({\n      deviceId: a.deviceId || b.deviceId,\n      value: mergeOrCoalesce(a.value, b.value),\n    }))\n}\n\nexport type ExtractResponsiveValue<T> = T extends ResponsiveValue<infer V> ? V : never\n\nexport function join<V, A extends ReadonlyArray<ResponsiveValue<V> | null | undefined>, R>(\n  breakpoints: Breakpoints,\n  responsiveValues: A,\n  joinFn: (values: { [I in keyof A]: ExtractResponsiveValue<A[I]> | undefined }) => R,\n  strategy?: FallbackStrategy<V>,\n): ResponsiveValue<R> {\n  return breakpoints\n    .map(({ id }) => id)\n    .map(deviceId => {\n      const value = joinFn(\n        responsiveValues.map(responsiveValue => {\n          const deviceValue =\n            responsiveValue &&\n            findBreakpointOverride(breakpoints, responsiveValue, deviceId, strategy)\n\n          return deviceValue == null ? undefined : deviceValue.value\n        }) as unknown as { [I in keyof A]: ExtractResponsiveValue<A[I] | undefined> },\n      )\n\n      if (value == null) return null\n\n      return { deviceId, value }\n    })\n    .filter((override): override is NonNullable<typeof override> => Boolean(override))\n}\n\nexport const getBreakpointMediaQuery = (breakpoint: Breakpoint): string => {\n  const parts = ['@media only screen']\n\n  if (breakpoint.minWidth != null) {\n    parts.push(`(min-width: ${breakpoint.minWidth}px)`)\n  }\n\n  if (breakpoint.maxWidth != null) {\n    parts.push(`(max-width: ${breakpoint.maxWidth}px)`)\n  }\n\n  return parts.join(' and ')\n}\n\nexport const getViewportStyle = (\n  state: State,\n  deviceId: string,\n): Viewport<string | number> | null | undefined => {\n  const device = getBreakpoint(state, deviceId)\n\n  return (\n    device && {\n      width: device.viewportWidth != null ? device.viewportWidth : '100%',\n      minWidth: device.minWidth,\n    }\n  )\n}\n\nexport function findNextFallback<V>(\n  breakpoints: Breakpoints,\n  value: ResponsiveValue<V>,\n  deviceId: BreakpointId,\n  activeDeviceId: BreakpointId,\n  fallbackStrategy?: FallbackStrategy<V>,\n): Breakpoint | null {\n  const deviceOverride = findBreakpointOverride(\n    breakpoints,\n    value.filter(v => v.deviceId !== activeDeviceId),\n    deviceId,\n    fallbackStrategy,\n  )\n\n  return (deviceOverride && getBreakpoint(breakpoints, deviceOverride.deviceId)) ?? null\n}\n\nexport const mergeResponsiveValues = <A>(\n  breakpoints: Breakpoints,\n  source: DeviceOverride<A>[],\n  override: DeviceOverride<A>[],\n): DeviceOverride<A>[] => {\n  const devices = [\n    ...new Set(\n      source.map(({ deviceId }) => deviceId).concat(override.map(({ deviceId }) => deviceId)),\n    ),\n  ]\n\n  return devices.map(deviceId => ({\n    deviceId,\n    value: {\n      ...(findBreakpointOverride(breakpoints, source, deviceId) || { value: {} }).value,\n      ...(findBreakpointOverride(breakpoints, override, deviceId, v => v) || { value: {} }).value,\n    },\n  })) as DeviceOverride<A>[]\n}\n"],"mappings":"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","names":["shallowMerge","coalesce"]}
+{"version":3,"sources":["../../../../src/state/modules/breakpoints.ts"],"sourcesContent":["import { Viewport } from 'csstype'\n\nimport {\n  findBreakpointOverride,\n  type ResponsiveValue,\n  type BreakpointId,\n  type Breakpoint,\n  type Breakpoints,\n  type FallbackStrategy,\n} from '@makeswift/controls'\n\nimport { Action, ActionTypes } from '../actions'\n\nexport {\n  findBreakpointOverride,\n  getBaseBreakpoint,\n  type ResponsiveValue,\n  type DeviceOverride,\n  type Breakpoint,\n  type BreakpointId,\n  type Breakpoints,\n  type FallbackStrategy,\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): State {\n  switch (action.type) {\n    case ActionTypes.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\nexport const getBreakpoint = (state: State, breakpointId: Breakpoint['id']): Breakpoint => {\n  const breakpoint = state.find(({ id }) => id === breakpointId)\n\n  if (breakpoint == null) throw new Error(`Unrecognized breakpoint ID: \"${breakpointId}\".`)\n\n  return breakpoint\n}\n\nexport const getBreakpointMediaQuery = (breakpoint: Breakpoint): string => {\n  const parts = ['@media only screen']\n\n  if (breakpoint.minWidth != null) {\n    parts.push(`(min-width: ${breakpoint.minWidth}px)`)\n  }\n\n  if (breakpoint.maxWidth != null) {\n    parts.push(`(max-width: ${breakpoint.maxWidth}px)`)\n  }\n\n  return parts.join(' and ')\n}\n\nexport const getViewportStyle = (\n  state: State,\n  deviceId: string,\n): Viewport<string | number> | null | undefined => {\n  const device = getBreakpoint(state, deviceId)\n\n  return (\n    device && {\n      width: device.viewportWidth != null ? device.viewportWidth : '100%',\n      minWidth: device.minWidth,\n    }\n  )\n}\n\nexport function findNextFallback<V>(\n  breakpoints: Breakpoints,\n  value: ResponsiveValue<V>,\n  deviceId: BreakpointId,\n  activeDeviceId: BreakpointId,\n  fallbackStrategy?: FallbackStrategy<V>,\n): Breakpoint | null {\n  const deviceOverride = findBreakpointOverride(\n    breakpoints,\n    value.filter(v => v.deviceId !== activeDeviceId),\n    deviceId,\n    fallbackStrategy,\n  )\n\n  return (deviceOverride && getBreakpoint(breakpoints, deviceOverride.deviceId)) ?? null\n}\n"],"mappings":"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","names":["import_controls"]}

package/dist/esm/api/react.js

@@ -29,6 +29,13 @@ class MakeswiftHostApiClient {
       MakeswiftApiClient.fetchAPIResource(APIResourceType.Swatch, swatchId)
     );
   }
+  resolveSwatch(swatchId) {
+    return this.resolveResource(APIResourceType.Swatch, {
+      id: swatchId,
+      read: (id) => this.readSwatch(id),
+      fetch: (id) => this.fetchSwatch(id)
+    });
+  }
   readFile(fileId) {
     return MakeswiftApiClient.getAPIResource(
       this.makeswiftApiClient.getState(),
@@ -41,6 +48,13 @@ class MakeswiftHostApiClient {
       MakeswiftApiClient.fetchAPIResource(APIResourceType.File, fileId)
     );
   }
+  resolveFile(fileId) {
+    return this.resolveResource(APIResourceType.File, {
+      id: fileId,
+      read: (id) => this.readFile(id),
+      fetch: (id) => this.fetchFile(id)
+    });
+  }
   readTypography(typographyId) {
     return MakeswiftApiClient.getAPIResource(
       this.makeswiftApiClient.getState(),
@@ -53,6 +67,13 @@ class MakeswiftHostApiClient {
       MakeswiftApiClient.fetchAPIResource(APIResourceType.Typography, typographyId)
     );
   }
+  resolveTypography(typographyId) {
+    return this.resolveResource(APIResourceType.Typography, {
+      id: typographyId,
+      read: (id) => this.readTypography(id),
+      fetch: (id) => this.fetchTypography(id)
+    });
+  }
   readGlobalElement(globalElementId) {
     return MakeswiftApiClient.getAPIResource(
       this.makeswiftApiClient.getState(),
@@ -110,6 +131,30 @@ class MakeswiftHostApiClient {
       MakeswiftApiClient.fetchAPIResource(APIResourceType.PagePathnameSlice, pageId, this.locale)
     );
   }
+  resolvePagePathnameSlice(pageId) {
+    return this.resolveResource(APIResourceType.PagePathnameSlice, {
+      id: pageId,
+      read: (id) => this.readPagePathnameSlice(id),
+      fetch: (id) => this.fetchPagePathnameSlice(id)
+    });
+  }
+  resolveResource(type, {
+    id,
+    read,
+    fetch
+  }) {
+    const _read = () => id != null ? read(id) : null;
+    let lastValue = null;
+    return {
+      name: `${type}:${id}`,
+      readStable: () => lastValue = _read(),
+      subscribe: (onUpdate) => this.subscribe(() => {
+        if (_read() !== lastValue)
+          onUpdate();
+      }),
+      fetch: async () => id != null ? fetch(id) : null
+    };
+  }
   readTable(tableId) {
     return MakeswiftApiClient.getAPIResource(
       this.makeswiftApiClient.getState(),

package/dist/esm/api/react.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/api/react.ts"],"sourcesContent":["import * as MakeswiftApiClient from '../state/makeswift-api-client'\nimport {\n  APIResourceType,\n  File,\n  GlobalElement,\n  LocalizedGlobalElement,\n  Page,\n  PagePathnameSlice,\n  Site,\n  Snippet,\n  Swatch,\n  Table,\n  Typography,\n} from './graphql/types'\nimport { GraphQLClient } from './graphql/client'\nimport { CreateTableRecordMutation } from './graphql/documents'\nimport {\n  CreateTableRecordMutationResult,\n  CreateTableRecordMutationVariables,\n} from './graphql/generated/types'\n\nexport type SerializedLocalizedResourcesMap = {\n  [resourceId: string]: string | null\n}\n\ntype LocalizedResourcesMap = Map<string, string | null>\n\nexport type CacheData = MakeswiftApiClient.SerializedState\n\nexport type MakeswiftClientOptions = {\n  uri: string\n  cacheData?: CacheData\n  localizedResourcesMap?: SerializedLocalizedResourcesMap\n  locale?: Intl.Locale\n}\n\n/**\n * NOTE(miguel): This \"client\" is used to fetch Makeswift API resources needed for the host. For\n * example, swatches, files, typographies, etc. Ideally it's internal to the runtime and is only\n * used by controls to transform API references to API resources.\n *\n * Moreover, its use should be reserved for the builder only, since for live pages all Makeswift\n * API resources should be embedded in the \"page snapshot\". In the builder, this client serves the\n * purpose of sending requests for API resources and keeping a cache so that changes that happen in\n * the builder, like modifying a swatch, can be sent via `postMessage` to the host and the cache can\n * immediately update the value and re-render.\n *\n * Furthermore, the API resources requested shouldn't be requested directly from the Makeswift API\n * as that would require those resources to not be authenticated since the requests come from the\n * browser when running the host. Instead, the requests should go to the host directly, at the\n * Makeswift API endpoint (i.g., `/api/makeswift/[...makeswift]` dynamic route) where the host's\n * API key can be used, securely, in the server. For this reason, this client should really be a\n * client of the host's API, not Makeswift's, intended to build and continuously maintain a realtime\n * snapshot for use in the builder, not the lives pages.\n */\nexport class MakeswiftHostApiClient {\n  graphqlClient: GraphQLClient\n  makeswiftApiClient: MakeswiftApiClient.Store\n  subscribe: MakeswiftApiClient.Store['subscribe']\n  private localizedResourcesMap: LocalizedResourcesMap\n  private locale: Intl.Locale | undefined\n\n  constructor({ uri, cacheData, localizedResourcesMap = {}, locale }: MakeswiftClientOptions) {\n    this.graphqlClient = new GraphQLClient(uri)\n    this.makeswiftApiClient = MakeswiftApiClient.configureStore({ serializedState: cacheData })\n    this.subscribe = this.makeswiftApiClient.subscribe\n    this.localizedResourcesMap = new Map(Object.entries(localizedResourcesMap))\n    this.locale = locale\n  }\n\n  readSwatch(swatchId: string): Swatch | null {\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.Swatch,\n      swatchId,\n    )\n  }\n\n  async fetchSwatch(swatchId: string): Promise<Swatch | null> {\n    return await this.makeswiftApiClient.dispatch(\n      MakeswiftApiClient.fetchAPIResource(APIResourceType.Swatch, swatchId),\n    )\n  }\n\n  readFile(fileId: string): File | null {\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.File,\n      fileId,\n    )\n  }\n\n  async fetchFile(fileId: string): Promise<File | null> {\n    return await this.makeswiftApiClient.dispatch(\n      MakeswiftApiClient.fetchAPIResource(APIResourceType.File, fileId),\n    )\n  }\n\n  readTypography(typographyId: string): Typography | null {\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.Typography,\n      typographyId,\n    )\n  }\n\n  async fetchTypography(typographyId: string): Promise<Typography | null> {\n    return await this.makeswiftApiClient.dispatch(\n      MakeswiftApiClient.fetchAPIResource(APIResourceType.Typography, typographyId),\n    )\n  }\n\n  readGlobalElement(globalElementId: string): GlobalElement | null {\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.GlobalElement,\n      globalElementId,\n    )\n  }\n\n  async fetchGlobalElement(globalElementId: string): Promise<GlobalElement | null> {\n    return await this.makeswiftApiClient.dispatch(\n      MakeswiftApiClient.fetchAPIResource(APIResourceType.GlobalElement, globalElementId),\n    )\n  }\n\n  readLocalizedGlobalElement(globalElementId: string): LocalizedGlobalElement | null {\n    const localizedGlobalElementId = this.getLocalizedResourceId(globalElementId)\n\n    if (localizedGlobalElementId == null) return null\n\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.LocalizedGlobalElement,\n      localizedGlobalElementId,\n    )\n  }\n\n  async fetchLocalizedGlobalElement(\n    globalElementId: string,\n  ): Promise<LocalizedGlobalElement | null> {\n    const locale = this.locale\n\n    if (locale == null) return null\n\n    // If getLocalizedResourceId returns null, it means we have tried to fetch the resource,\n    // but the resource is not available. If we haven't fetched it yet, it'll return undefined.\n    const noLocalizedResource = this.getLocalizedResourceId(globalElementId) === null\n\n    if (noLocalizedResource) return null\n\n    // TODO(fikri): We're checking the cache here because the cache hit will fail on fetchAPIResource.\n    // This is because in the cache we're saving the ID of the localizedGlobalElementId,\n    // but we're reading the cache using the globalElementId.\n    // This is very confusing and it can lead to more bugs. We need to refactor how we handle\n    // localized global element.\n    const cacheResult = this.readLocalizedGlobalElement(globalElementId)\n\n    if (cacheResult) return cacheResult\n\n    const result = await this.makeswiftApiClient.dispatch(\n      MakeswiftApiClient.fetchAPIResource(\n        APIResourceType.LocalizedGlobalElement,\n        globalElementId,\n        locale,\n      ),\n    )\n\n    this.setLocalizedResourceId({\n      resourceId: globalElementId,\n      localizedResourceId: result?.id ?? null,\n    })\n\n    return result\n  }\n\n  readPagePathnameSlice(pageId: string): PagePathnameSlice | null {\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.PagePathnameSlice,\n      pageId,\n    )\n  }\n\n  async fetchPagePathnameSlice(pageId: string): Promise<PagePathnameSlice | null> {\n    return await this.makeswiftApiClient.dispatch(\n      MakeswiftApiClient.fetchAPIResource(APIResourceType.PagePathnameSlice, pageId, this.locale),\n    )\n  }\n\n  readTable(tableId: string): Table | null {\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.Table,\n      tableId,\n    )\n  }\n\n  async fetchTable(tableId: string): Promise<Table | null> {\n    return await this.makeswiftApiClient.dispatch(\n      MakeswiftApiClient.fetchAPIResource(APIResourceType.Table, tableId),\n    )\n  }\n\n  async createTableRecord(tableId: string, columns: any): Promise<void> {\n    await this.graphqlClient.request<\n      CreateTableRecordMutationResult,\n      CreateTableRecordMutationVariables\n    >(CreateTableRecordMutation, { input: { data: { tableId, columns } } })\n  }\n\n  readSite(siteId: string): Site | null {\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.Site,\n      siteId,\n    )\n  }\n\n  readPage(pageId: string): Page | null {\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.Page,\n      pageId,\n    )\n  }\n\n  readSnippet(snippetId: string): Snippet | null {\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.Snippet,\n      snippetId,\n    )\n  }\n\n  private getLocalizedResourceId(resourceId: string): string | undefined | null {\n    return this.localizedResourcesMap?.get(resourceId)\n  }\n\n  setLocalizedResourceId({\n    resourceId,\n    localizedResourceId,\n  }: {\n    resourceId: string\n    localizedResourceId: string | null\n  }): void {\n    this.localizedResourcesMap.set(resourceId, localizedResourceId)\n  }\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/api/react.ts"],"sourcesContent":["import { type FetchableValue } from '@makeswift/controls'\nimport * as MakeswiftApiClient from '../state/makeswift-api-client'\nimport {\n  APIResourceType,\n  File,\n  GlobalElement,\n  LocalizedGlobalElement,\n  Page,\n  PagePathnameSlice,\n  Site,\n  Snippet,\n  Swatch,\n  Table,\n  Typography,\n} from './graphql/types'\nimport { GraphQLClient } from './graphql/client'\nimport { CreateTableRecordMutation } from './graphql/documents'\nimport {\n  CreateTableRecordMutationResult,\n  CreateTableRecordMutationVariables,\n} from './graphql/generated/types'\n\nexport type SerializedLocalizedResourcesMap = {\n  [resourceId: string]: string | null\n}\n\ntype LocalizedResourcesMap = Map<string, string | null>\n\nexport type CacheData = MakeswiftApiClient.SerializedState\n\nexport type MakeswiftClientOptions = {\n  uri: string\n  cacheData?: CacheData\n  localizedResourcesMap?: SerializedLocalizedResourcesMap\n  locale?: Intl.Locale\n}\n\n/**\n * NOTE(miguel): This \"client\" is used to fetch Makeswift API resources needed for the host. For\n * example, swatches, files, typographies, etc. Ideally it's internal to the runtime and is only\n * used by controls to transform API references to API resources.\n *\n * Moreover, its use should be reserved for the builder only, since for live pages all Makeswift\n * API resources should be embedded in the \"page snapshot\". In the builder, this client serves the\n * purpose of sending requests for API resources and keeping a cache so that changes that happen in\n * the builder, like modifying a swatch, can be sent via `postMessage` to the host and the cache can\n * immediately update the value and re-render.\n *\n * Furthermore, the API resources requested shouldn't be requested directly from the Makeswift API\n * as that would require those resources to not be authenticated since the requests come from the\n * browser when running the host. Instead, the requests should go to the host directly, at the\n * Makeswift API endpoint (i.g., `/api/makeswift/[...makeswift]` dynamic route) where the host's\n * API key can be used, securely, in the server. For this reason, this client should really be a\n * client of the host's API, not Makeswift's, intended to build and continuously maintain a realtime\n * snapshot for use in the builder, not the lives pages.\n */\nexport class MakeswiftHostApiClient {\n  graphqlClient: GraphQLClient\n  makeswiftApiClient: MakeswiftApiClient.Store\n  subscribe: MakeswiftApiClient.Store['subscribe']\n  private localizedResourcesMap: LocalizedResourcesMap\n  private locale: Intl.Locale | undefined\n\n  constructor({ uri, cacheData, localizedResourcesMap = {}, locale }: MakeswiftClientOptions) {\n    this.graphqlClient = new GraphQLClient(uri)\n    this.makeswiftApiClient = MakeswiftApiClient.configureStore({ serializedState: cacheData })\n    this.subscribe = this.makeswiftApiClient.subscribe\n    this.localizedResourcesMap = new Map(Object.entries(localizedResourcesMap))\n    this.locale = locale\n  }\n\n  readSwatch(swatchId: string): Swatch | null {\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.Swatch,\n      swatchId,\n    )\n  }\n\n  async fetchSwatch(swatchId: string): Promise<Swatch | null> {\n    return await this.makeswiftApiClient.dispatch(\n      MakeswiftApiClient.fetchAPIResource(APIResourceType.Swatch, swatchId),\n    )\n  }\n\n  resolveSwatch(swatchId: string | undefined): FetchableValue<Swatch | null> {\n    return this.resolveResource(APIResourceType.Swatch, {\n      id: swatchId,\n      read: id => this.readSwatch(id),\n      fetch: id => this.fetchSwatch(id),\n    })\n  }\n\n  readFile(fileId: string): File | null {\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.File,\n      fileId,\n    )\n  }\n\n  async fetchFile(fileId: string): Promise<File | null> {\n    return await this.makeswiftApiClient.dispatch(\n      MakeswiftApiClient.fetchAPIResource(APIResourceType.File, fileId),\n    )\n  }\n\n  resolveFile(fileId: string | undefined): FetchableValue<File | null> {\n    return this.resolveResource(APIResourceType.File, {\n      id: fileId,\n      read: id => this.readFile(id),\n      fetch: id => this.fetchFile(id),\n    })\n  }\n\n  readTypography(typographyId: string): Typography | null {\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.Typography,\n      typographyId,\n    )\n  }\n\n  async fetchTypography(typographyId: string): Promise<Typography | null> {\n    return await this.makeswiftApiClient.dispatch(\n      MakeswiftApiClient.fetchAPIResource(APIResourceType.Typography, typographyId),\n    )\n  }\n\n  resolveTypography(typographyId: string | undefined): FetchableValue<Typography | null> {\n    return this.resolveResource(APIResourceType.Typography, {\n      id: typographyId,\n      read: id => this.readTypography(id),\n      fetch: id => this.fetchTypography(id),\n    })\n  }\n\n  readGlobalElement(globalElementId: string): GlobalElement | null {\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.GlobalElement,\n      globalElementId,\n    )\n  }\n\n  async fetchGlobalElement(globalElementId: string): Promise<GlobalElement | null> {\n    return await this.makeswiftApiClient.dispatch(\n      MakeswiftApiClient.fetchAPIResource(APIResourceType.GlobalElement, globalElementId),\n    )\n  }\n\n  readLocalizedGlobalElement(globalElementId: string): LocalizedGlobalElement | null {\n    const localizedGlobalElementId = this.getLocalizedResourceId(globalElementId)\n\n    if (localizedGlobalElementId == null) return null\n\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.LocalizedGlobalElement,\n      localizedGlobalElementId,\n    )\n  }\n\n  async fetchLocalizedGlobalElement(\n    globalElementId: string,\n  ): Promise<LocalizedGlobalElement | null> {\n    const locale = this.locale\n\n    if (locale == null) return null\n\n    // If getLocalizedResourceId returns null, it means we have tried to fetch the resource,\n    // but the resource is not available. If we haven't fetched it yet, it'll return undefined.\n    const noLocalizedResource = this.getLocalizedResourceId(globalElementId) === null\n\n    if (noLocalizedResource) return null\n\n    // TODO(fikri): We're checking the cache here because the cache hit will fail on fetchAPIResource.\n    // This is because in the cache we're saving the ID of the localizedGlobalElementId,\n    // but we're reading the cache using the globalElementId.\n    // This is very confusing and it can lead to more bugs. We need to refactor how we handle\n    // localized global element.\n    const cacheResult = this.readLocalizedGlobalElement(globalElementId)\n\n    if (cacheResult) return cacheResult\n\n    const result = await this.makeswiftApiClient.dispatch(\n      MakeswiftApiClient.fetchAPIResource(\n        APIResourceType.LocalizedGlobalElement,\n        globalElementId,\n        locale,\n      ),\n    )\n\n    this.setLocalizedResourceId({\n      resourceId: globalElementId,\n      localizedResourceId: result?.id ?? null,\n    })\n\n    return result\n  }\n\n  readPagePathnameSlice(pageId: string): PagePathnameSlice | null {\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.PagePathnameSlice,\n      pageId,\n    )\n  }\n\n  async fetchPagePathnameSlice(pageId: string): Promise<PagePathnameSlice | null> {\n    return await this.makeswiftApiClient.dispatch(\n      MakeswiftApiClient.fetchAPIResource(APIResourceType.PagePathnameSlice, pageId, this.locale),\n    )\n  }\n\n  resolvePagePathnameSlice(pageId: string | undefined): FetchableValue<PagePathnameSlice | null> {\n    return this.resolveResource(APIResourceType.PagePathnameSlice, {\n      id: pageId,\n      read: id => this.readPagePathnameSlice(id),\n      fetch: id => this.fetchPagePathnameSlice(id),\n    })\n  }\n\n  resolveResource<R>(\n    type: APIResourceType,\n    {\n      id,\n      read,\n      fetch,\n    }: {\n      id: string | undefined\n      read: (id: string) => R | null\n      fetch: (id: string) => Promise<R | null>\n    },\n  ): FetchableValue<R | null> {\n    const _read = () => (id != null ? read(id) : null)\n    let lastValue: R | null = null\n    return {\n      name: `${type}:${id}`,\n      readStable: () => (lastValue = _read()),\n      subscribe: (onUpdate: () => void) =>\n        this.subscribe(() => {\n          if (_read() !== lastValue) onUpdate()\n        }),\n      fetch: async () => (id != null ? fetch(id) : null),\n    }\n  }\n\n  readTable(tableId: string): Table | null {\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.Table,\n      tableId,\n    )\n  }\n\n  async fetchTable(tableId: string): Promise<Table | null> {\n    return await this.makeswiftApiClient.dispatch(\n      MakeswiftApiClient.fetchAPIResource(APIResourceType.Table, tableId),\n    )\n  }\n\n  async createTableRecord(tableId: string, columns: any): Promise<void> {\n    await this.graphqlClient.request<\n      CreateTableRecordMutationResult,\n      CreateTableRecordMutationVariables\n    >(CreateTableRecordMutation, { input: { data: { tableId, columns } } })\n  }\n\n  readSite(siteId: string): Site | null {\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.Site,\n      siteId,\n    )\n  }\n\n  readPage(pageId: string): Page | null {\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.Page,\n      pageId,\n    )\n  }\n\n  readSnippet(snippetId: string): Snippet | null {\n    return MakeswiftApiClient.getAPIResource(\n      this.makeswiftApiClient.getState(),\n      APIResourceType.Snippet,\n      snippetId,\n    )\n  }\n\n  private getLocalizedResourceId(resourceId: string): string | undefined | null {\n    return this.localizedResourcesMap?.get(resourceId)\n  }\n\n  setLocalizedResourceId({\n    resourceId,\n    localizedResourceId,\n  }: {\n    resourceId: string\n    localizedResourceId: string | null\n  }): void {\n    this.localizedResourcesMap.set(resourceId, localizedResourceId)\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/esm/components/shared/Link/index.js

@@ -1,9 +1,9 @@
+"use client";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import scrollIntoView from "scroll-into-view-if-needed";
 import NextLink from "next/link";
-import { useElementId } from "../../../runtimes/react/hooks/use-element-id";
-import { usePagePathnameSlice } from "../../../runtimes/react/hooks/makeswift-api";
+import { Link as LinkDef } from "../../../controls/link";
+import { useResolvedValue } from "../../../runtimes/react/hooks/use-resolved-value";
 const isValidHref = (href) => {
   try {
     const bases = ["http://n", "https://n"];
@@ -15,79 +15,24 @@ const isValidHref = (href) => {
 };
 const Link = forwardRef(function Link2({ link, onClick = () => {
 }, ...restOfProps }, ref) {
-  const pageId = link && link.type === "OPEN_PAGE" ? link.payload.pageId : null;
-  const page = usePagePathnameSlice(pageId ?? null);
-  const elementKey = link?.type === "SCROLL_TO_ELEMENT" ? link.payload.elementIdConfig?.elementKey : null;
-  const elementId = useElementId(elementKey);
-  let useNextLink;
-  let href;
-  let target;
-  let block;
-  if (link) {
-    switch (link.type) {
-      case "OPEN_PAGE": {
-        if (page) {
-          useNextLink = true;
-          href = `/${page.localizedPathname ?? page.pathname}`;
-        }
-        target = link.payload.openInNewTab ? "_blank" : "_self";
-        break;
-      }
-      case "OPEN_URL": {
-        useNextLink = isValidHref(link.payload.url);
-        href = link.payload.url;
-        target = link.payload.openInNewTab ? "_blank" : "_self";
-        break;
-      }
-      case "SEND_EMAIL": {
-        useNextLink = false;
-        const { to, subject = "", body = "" } = link.payload;
-        if (to != null)
-          href = `mailto:${to}?subject=${subject}&body=${body}`;
-        break;
-      }
-      case "CALL_PHONE": {
-        useNextLink = false;
-        href = `tel:${link.payload.phoneNumber}`;
-        break;
-      }
-      case "SCROLL_TO_ELEMENT": {
-        useNextLink = false;
-        href = `#${elementId ?? ""}`;
-        block = link.payload.block;
-        break;
-      }
-      default:
-        throw new RangeError(`Invalid link type "${link.type}."`);
-    }
-  }
+  const {
+    href,
+    target,
+    onClick: resolvedOnClick
+  } = useResolvedValue(
+    link,
+    (link2, resourceResolver) => LinkDef().resolveValue(link2, resourceResolver)
+  ) ?? {};
   function handleClick(event) {
     onClick(event);
     if (event.defaultPrevented)
       return;
     if (event.currentTarget.isContentEditable)
       return event.preventDefault();
-    if (link && link.type === "SCROLL_TO_ELEMENT") {
-      let hash;
-      try {
-        if (href != null)
-          hash = new URL(`http://www.example.com/${href}`).hash;
-      } catch (error) {
-        console.error(`Link received invalid href: ${href}`, error);
-      }
-      if (href != null && hash != null && href === hash) {
-        event.preventDefault();
-        const view = event.view;
-        scrollIntoView(view.document.querySelector(hash), {
-          behavior: "smooth",
-          block
-        });
-        if (view.location.hash !== hash)
-          view.history.pushState({}, "", hash);
-      }
-    }
+    return resolvedOnClick?.(event);
   }
-  if (useNextLink && href != null) {
+  const useNextLink = href != null && link && (link.type === "OPEN_PAGE" || link.type === "OPEN_URL" && isValidHref(link.payload.url));
+  if (useNextLink) {
     return /* @__PURE__ */ jsx(
       NextLink,
       {