@makeswift/runtime 0.6.2 → 0.6.4

package/dist/index.cjs2.js

@@ -33,7 +33,7 @@ var __objRest = (source, exclude) => {
 var React = require("react");
 var next = require("./index.cjs.js");
 require("use-sync-external-store/shim");
-require("./slot.cjs.js");
+require("./rich-text.cjs.js");
 var css = require("@emotion/css");
 var jsxRuntime = require("react/jsx-runtime");
 var constants = require("./constants.cjs.js");

package/dist/index.cjs5.js

@@ -1,141 +1,38 @@
 "use strict";
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-var next = require("./index.cjs.js");
-var constants = require("./constants.cjs.js");
-var css = require("@emotion/css");
-var jsxRuntime = require("react/jsx-runtime");
-var React = require("react");
-const getDeviceId = ({ deviceId }) => deviceId;
-const withColor = (swatches) => (_a) => {
-  var _b = _a, {
-    value: _c
-  } = _b, _d = _c, { color } = _d, restOfValue = __objRest(_d, ["color"]), rest = __objRest(_b, [
-    "value"
-  ]);
-  return __spreadProps(__spreadValues({}, rest), {
-    value: __spreadValues(__spreadValues({}, restOfValue), color ? {
-      color: {
-        swatch: swatches.find((s) => s && s.id === color.swatchId),
-        alpha: color.alpha
-      }
-    } : {})
-  });
-};
-const overrideTypographyStyle = (source, override) => {
-  const devices = [...new Set(source.map(getDeviceId).concat(override.map(getDeviceId)))];
-  return devices.map((deviceId) => ({
-    deviceId,
-    value: __spreadValues(__spreadValues({}, (next.findDeviceOverride(source, deviceId) || { value: {} }).value), (next.findDeviceOverride(override, deviceId, (v) => v) || { value: {} }).value)
-  }));
-};
-function useTypographyMark(value) {
-  var _a, _b, _c;
-  const typography = next.useTypography((_a = value == null ? void 0 : value.id) != null ? _a : null);
-  const swatchIds = [
-    ...constants.getTypographyStyleSwatchIds(value == null ? void 0 : value.style),
-    ...constants.getTypographyStyleSwatchIds(typography == null ? void 0 : typography.style)
-  ];
-  const swatches = next.useSwatches(swatchIds);
-  return overrideTypographyStyle((_b = typography == null ? void 0 : typography.style.map(withColor(swatches.filter(constants.isNonNullable)))) != null ? _b : [], (_c = value == null ? void 0 : value.style.map(withColor(swatches.filter(constants.isNonNullable)))) != null ? _c : []);
-}
-function Mark(_a) {
-  var _b = _a, {
-    value,
-    className
-  } = _b, restOfProps = __objRest(_b, [
-    "value",
-    "className"
-  ]);
-  const typographyStyle = useTypographyMark(value);
-  const typographyClassName = next.useStyle(next.responsiveStyle([typographyStyle], ([{
-    color,
-    fontFamily,
-    fontSize,
-    fontWeight,
-    lineHeight,
-    letterSpacing,
-    uppercase,
-    underline,
-    strikethrough,
-    italic
-  } = {}]) => __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, color == null ? {} : {
-    color: next.colorToString(color)
-  }), fontFamily == null ? {} : {
-    fontFamily
-  }), fontSize == null || fontSize.value == null || fontSize.unit == null ? {} : {
-    fontSize: `${fontSize.value}${fontSize.unit}`
-  }), fontWeight == null ? {} : {
-    fontWeight
-  }), lineHeight == null ? {} : {
-    lineHeight
-  }), letterSpacing == null ? {} : {
-    letterSpacing: `${letterSpacing / 10}em`
-  }), uppercase == null ? {} : {
-    textTransform: uppercase === true ? "uppercase" : "initial"
-  }), underline == null && strikethrough == null ? {} : {
-    textDecoration: [Boolean(underline) && "underline", Boolean(strikethrough) && "line-through"].filter(Boolean).join(" ")
-  }), italic == null ? {} : {
-    fontStyle: italic === true ? "italic" : "initial"
-  }), next.shallowMergeFallbacks));
-  return /* @__PURE__ */ jsxRuntime.jsx("span", __spreadProps(__spreadValues({}, restOfProps), {
-    className: css.cx(typographyClassName, className)
-  }));
-}
-var DeviceOverrideBlock = React.forwardRef(function Block(_c, ref) {
-  var _d = _c, {
-    textAlign,
-    className,
-    as
-  } = _d, restOfProps = __objRest(_d, [
-    "textAlign",
-    "className",
-    "as"
-  ]);
-  const Component = as != null ? as : "div";
-  return /* @__PURE__ */ jsxRuntime.jsx(Component, __spreadProps(__spreadValues({}, restOfProps), {
-    ref,
-    className: css.cx(next.useStyle({
-      margin: 0
-    }), next.useStyle(next.responsiveStyle([textAlign], ([textAlign2 = "left"]) => ({
-      textAlign: textAlign2
-    }))), next.useStyle(as === "blockquote" ? {
-      padding: "0.5em 10px",
-      fontSize: "1.25em",
-      fontWeight: "300",
-      borderLeft: "5px solid rgba(0, 0, 0, 0.1)"
-    } : {}), className)
-  }));
-});
-exports.DeviceOverrideBlock = DeviceOverrideBlock;
-exports.Mark = Mark;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+var Text = require("./Text.cjs.js");
+require("next/dynamic");
+require("react");
+require("./index.cjs.js");
+require("use-sync-external-store/shim/with-selector");
+require("./constants.cjs.js");
+require("redux");
+require("redux-thunk");
+require("./actions.cjs.js");
+require("./rich-text.cjs.js");
+require("./control.cjs.js");
+require("@emotion/css");
+require("@emotion/serialize");
+require("@emotion/utils");
+require("react/jsx-runtime");
+require("./text-input.cjs.js");
+require("./combobox.cjs.js");
+require("use-sync-external-store/shim");
+require("./types.cjs.js");
+require("color");
+require("scroll-into-view-if-needed");
+require("./box-models.cjs.js");
+require("css-box-model");
+require("react-dom");
+require("html-react-parser");
+require("next/head");
+require("@emotion/server/create-instance");
+require("next/document");
+require("cookie");
+require("cors");
+require("http-proxy");
+require("set-cookie-parser");
+require("uuid/v4");
+require("corporate-ipsum");
+exports["default"] = Text["default"];
 //# sourceMappingURL=index.cjs5.js.map

package/dist/index.cjs5.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs5.js","sources":["../src/components/builtin/Text/components/RichTextEditor/components/Mark/hooks/useTypographyMark.ts","../src/components/builtin/Text/components/RichTextEditor/components/Mark/index.tsx","../src/components/builtin/Text/components/RichTextEditor/components/Block/index.tsx"],"sourcesContent":["import { Length as LengthValue } from '../../../../../../../../prop-controllers'\nimport { ColorValue as Color } from '../../../../../../../utils/types'\nimport { findDeviceOverride } from '../../../../../../../utils/devices'\nimport type { DeviceOverride } from '../../../../../../../../prop-controllers'\nimport {\n  useSwatches,\n  useTypography,\n} from '../../../../../../../../runtimes/react/hooks/makeswift-api'\nimport { Swatch, Typography } from '../../../../../../../../api'\nimport { getTypographyStyleSwatchIds } from '../../../../../../../../prop-controllers/introspection'\nimport { isNonNullable } from '../../../../../../../utils/isNonNullable'\n\nexport type TypographyMarkDataValue = {\n  fontWeight?: number\n  fontSize?: LengthValue\n  fontFamily?: string\n  color?: Color\n  textAlign?: string\n  lineHeight?: number\n  letterSpacing?: number\n  uppercase?: boolean\n  italic?: boolean\n  underline?: boolean\n  strikethrough?: boolean\n}\n\nexport type TypographyMarkValue = {\n  id: string | null | undefined\n  style: Typography['style']\n}\n\nexport type TypographyMarkData = Array<DeviceOverride<TypographyMarkDataValue>>\n\nconst getDeviceId = ({ deviceId }: DeviceOverride<unknown>) => deviceId\n\nconst withColor =\n  (swatches: Swatch[]) =>\n  ({\n    value: { color, ...restOfValue },\n    ...rest\n  }: Typography['style'][number]): DeviceOverride<TypographyMarkDataValue> =>\n    ({\n      ...rest,\n      value: {\n        ...restOfValue,\n        ...(color\n          ? {\n              color: {\n                swatch: swatches.find(s => s && s.id === color.swatchId),\n                alpha: color.alpha,\n              },\n            }\n          : {}),\n      } as TypographyMarkDataValue,\n    } as DeviceOverride<TypographyMarkDataValue>)\n\nexport const overrideTypographyStyle = <A>(\n  source: Array<DeviceOverride<A>>,\n  override: Array<DeviceOverride<A>>,\n): Array<DeviceOverride<A>> => {\n  const devices = [...new Set(source.map(getDeviceId).concat(override.map(getDeviceId)))]\n\n  return devices.map(deviceId => ({\n    deviceId,\n    value: {\n      ...(findDeviceOverride(source, deviceId) || { value: {} }).value,\n      ...(findDeviceOverride(override, deviceId, v => v) || { value: {} }).value,\n    },\n  })) as DeviceOverride<A>[]\n}\n\nexport default function useTypographyMark(\n  value: TypographyMarkValue | null | undefined,\n): TypographyMarkData | null | undefined {\n  const typography = useTypography(value?.id ?? null)\n  const swatchIds = [\n    ...getTypographyStyleSwatchIds(value?.style),\n    ...getTypographyStyleSwatchIds(typography?.style),\n  ]\n  const swatches = useSwatches(swatchIds)\n\n  return overrideTypographyStyle(\n    typography?.style.map(withColor(swatches.filter(isNonNullable))) ?? [],\n    value?.style.map(withColor(swatches.filter(isNonNullable))) ?? [],\n  )\n}\n","import { ComponentPropsWithoutRef } from 'react'\n\nimport useTypographyMark, {\n  TypographyMarkValue,\n  overrideTypographyStyle,\n  TypographyMarkDataValue,\n} from './hooks/useTypographyMark'\nimport { colorToString } from '../../../../../../utils/colorToString'\nimport { shallowMergeFallbacks } from '../../../../../../utils/devices'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../../../../../runtimes/react/use-style'\nimport { responsiveStyle } from '../../../../../../utils/responsive-style'\nimport { ResponsiveValue } from '../../../../../../../prop-controllers/descriptors'\n\nexport type { TypographyMarkValue }\nexport { overrideTypographyStyle }\n\ntype BaseProps = { value: TypographyMarkValue }\n\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'span'>, keyof BaseProps>\n\nexport default function Mark({ value, className, ...restOfProps }: Props): JSX.Element {\n  const typographyStyle = useTypographyMark(value)\n  const typographyClassName = useStyle(\n    responsiveStyle<\n      TypographyMarkDataValue,\n      [ResponsiveValue<TypographyMarkDataValue> | null | undefined]\n    >(\n      [typographyStyle],\n      ([\n        {\n          color,\n          fontFamily,\n          fontSize,\n          fontWeight,\n          lineHeight,\n          letterSpacing,\n          uppercase,\n          underline,\n          strikethrough,\n          italic,\n        } = {} as TypographyMarkDataValue,\n      ]) => ({\n        ...(color == null ? {} : { color: colorToString(color) }),\n        ...(fontFamily == null ? {} : { fontFamily }),\n        ...(fontSize == null || fontSize.value == null || fontSize.unit == null\n          ? {}\n          : { fontSize: `${fontSize.value}${fontSize.unit}` }),\n        ...(fontWeight == null ? {} : { fontWeight }),\n        ...(lineHeight == null ? {} : { lineHeight }),\n        ...(letterSpacing == null ? {} : { letterSpacing: `${letterSpacing / 10}em` }),\n        ...(uppercase == null\n          ? {}\n          : { textTransform: uppercase === true ? 'uppercase' : 'initial' }),\n        ...(underline == null && strikethrough == null\n          ? {}\n          : {\n              textDecoration: [\n                Boolean(underline) && 'underline',\n                Boolean(strikethrough) && 'line-through',\n              ]\n                .filter(Boolean)\n                .join(' '),\n            }),\n        ...(italic == null ? {} : { fontStyle: italic === true ? 'italic' : 'initial' }),\n      }),\n      shallowMergeFallbacks,\n    ),\n  )\n\n  return <span {...restOfProps} className={cx(typographyClassName, className)} />\n}\n","import { cx } from '@emotion/css'\nimport { forwardRef, ComponentPropsWithoutRef, ForwardedRef, ElementRef, ElementType } from 'react'\n\nimport type { ResponsiveValue } from '../../../../../../../prop-controllers'\nimport { useStyle } from '../../../../../../../runtimes/react/use-style'\nimport { responsiveStyle } from '../../../../../../utils/responsive-style'\n\ntype BaseProps<T extends ElementType> = {\n  as?: T\n  textAlign?: ResponsiveValue<'left' | 'center' | 'right' | 'justify'>\n}\n\ntype Props<T extends ElementType> = BaseProps<T> &\n  Omit<ComponentPropsWithoutRef<T>, keyof BaseProps<T>>\n\nexport default forwardRef(function Block<T extends ElementType>(\n  { textAlign, className, as, ...restOfProps }: Props<T>,\n  ref: ForwardedRef<ElementRef<T>>,\n) {\n  const Component = as ?? 'div'\n\n  return (\n    // @ts-ignore: `ref` types don't match.\n    <Component\n      {...restOfProps}\n      ref={ref}\n      className={cx(\n        useStyle({ margin: 0 }),\n        useStyle(responsiveStyle([textAlign], ([textAlign = 'left']) => ({ textAlign }))),\n        useStyle(\n          as === 'blockquote'\n            ? {\n                padding: '0.5em 10px',\n                fontSize: '1.25em',\n                fontWeight: '300',\n                borderLeft: '5px solid rgba(0, 0, 0, 0.1)',\n              }\n            : {},\n        ),\n        className,\n      )}\n    />\n  )\n})\n"],"names":["findDeviceOverride","useTypography","getTypographyStyleSwatchIds","useSwatches","isNonNullable","value","className","restOfProps","typographyStyle","useTypographyMark","typographyClassName","useStyle","responsiveStyle","color","fontFamily","fontSize","fontWeight","lineHeight","letterSpacing","uppercase","underline","strikethrough","italic","colorToString","unit","textTransform","textDecoration","Boolean","filter","join","fontStyle","shallowMergeFallbacks","cx","forwardRef","ref","textAlign","as","Component","margin","padding","borderLeft"],"mappings":"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"}
+{"version":3,"file":"index.cjs5.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.cjs6.js

@@ -0,0 +1,141 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var next = require("./index.cjs.js");
+var constants = require("./constants.cjs.js");
+var css = require("@emotion/css");
+var jsxRuntime = require("react/jsx-runtime");
+var React = require("react");
+const getDeviceId = ({ deviceId }) => deviceId;
+const withColor = (swatches) => (_a) => {
+  var _b = _a, {
+    value: _c
+  } = _b, _d = _c, { color } = _d, restOfValue = __objRest(_d, ["color"]), rest = __objRest(_b, [
+    "value"
+  ]);
+  return __spreadProps(__spreadValues({}, rest), {
+    value: __spreadValues(__spreadValues({}, restOfValue), color ? {
+      color: {
+        swatch: swatches.find((s) => s && s.id === color.swatchId),
+        alpha: color.alpha
+      }
+    } : {})
+  });
+};
+const overrideTypographyStyle = (source, override) => {
+  const devices = [...new Set(source.map(getDeviceId).concat(override.map(getDeviceId)))];
+  return devices.map((deviceId) => ({
+    deviceId,
+    value: __spreadValues(__spreadValues({}, (next.findDeviceOverride(source, deviceId) || { value: {} }).value), (next.findDeviceOverride(override, deviceId, (v) => v) || { value: {} }).value)
+  }));
+};
+function useTypographyMark(value) {
+  var _a, _b, _c;
+  const typography = next.useTypography((_a = value == null ? void 0 : value.id) != null ? _a : null);
+  const swatchIds = [
+    ...constants.getTypographyStyleSwatchIds(value == null ? void 0 : value.style),
+    ...constants.getTypographyStyleSwatchIds(typography == null ? void 0 : typography.style)
+  ];
+  const swatches = next.useSwatches(swatchIds);
+  return overrideTypographyStyle((_b = typography == null ? void 0 : typography.style.map(withColor(swatches.filter(constants.isNonNullable)))) != null ? _b : [], (_c = value == null ? void 0 : value.style.map(withColor(swatches.filter(constants.isNonNullable)))) != null ? _c : []);
+}
+function Mark(_a) {
+  var _b = _a, {
+    value,
+    className
+  } = _b, restOfProps = __objRest(_b, [
+    "value",
+    "className"
+  ]);
+  const typographyStyle = useTypographyMark(value);
+  const typographyClassName = next.useStyle(next.responsiveStyle([typographyStyle], ([{
+    color,
+    fontFamily,
+    fontSize,
+    fontWeight,
+    lineHeight,
+    letterSpacing,
+    uppercase,
+    underline,
+    strikethrough,
+    italic
+  } = {}]) => __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, color == null ? {} : {
+    color: next.colorToString(color)
+  }), fontFamily == null ? {} : {
+    fontFamily
+  }), fontSize == null || fontSize.value == null || fontSize.unit == null ? {} : {
+    fontSize: `${fontSize.value}${fontSize.unit}`
+  }), fontWeight == null ? {} : {
+    fontWeight
+  }), lineHeight == null ? {} : {
+    lineHeight
+  }), letterSpacing == null ? {} : {
+    letterSpacing: `${letterSpacing / 10}em`
+  }), uppercase == null ? {} : {
+    textTransform: uppercase === true ? "uppercase" : "initial"
+  }), underline == null && strikethrough == null ? {} : {
+    textDecoration: [Boolean(underline) && "underline", Boolean(strikethrough) && "line-through"].filter(Boolean).join(" ")
+  }), italic == null ? {} : {
+    fontStyle: italic === true ? "italic" : "initial"
+  }), next.shallowMergeFallbacks));
+  return /* @__PURE__ */ jsxRuntime.jsx("span", __spreadProps(__spreadValues({}, restOfProps), {
+    className: css.cx(typographyClassName, className)
+  }));
+}
+var DeviceOverrideBlock = React.forwardRef(function Block(_c, ref) {
+  var _d = _c, {
+    textAlign,
+    className,
+    as
+  } = _d, restOfProps = __objRest(_d, [
+    "textAlign",
+    "className",
+    "as"
+  ]);
+  const Component = as != null ? as : "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, __spreadProps(__spreadValues({}, restOfProps), {
+    ref,
+    className: css.cx(next.useStyle({
+      margin: 0
+    }), next.useStyle(next.responsiveStyle([textAlign], ([textAlign2 = "left"]) => ({
+      textAlign: textAlign2
+    }))), next.useStyle(as === "blockquote" ? {
+      padding: "0.5em 10px",
+      fontSize: "1.25em",
+      fontWeight: "300",
+      borderLeft: "5px solid rgba(0, 0, 0, 0.1)"
+    } : {}), className)
+  }));
+});
+exports.DeviceOverrideBlock = DeviceOverrideBlock;
+exports.Mark = Mark;
+//# sourceMappingURL=index.cjs6.js.map

package/dist/index.cjs6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs6.js","sources":["../src/components/builtin/Text/components/RichTextEditor/components/Mark/hooks/useTypographyMark.ts","../src/components/builtin/Text/components/RichTextEditor/components/Mark/index.tsx","../src/components/builtin/Text/components/RichTextEditor/components/Block/index.tsx"],"sourcesContent":["import { Length as LengthValue } from '../../../../../../../../prop-controllers'\nimport { ColorValue as Color } from '../../../../../../../utils/types'\nimport { findDeviceOverride } from '../../../../../../../utils/devices'\nimport type { DeviceOverride } from '../../../../../../../../prop-controllers'\nimport {\n  useSwatches,\n  useTypography,\n} from '../../../../../../../../runtimes/react/hooks/makeswift-api'\nimport { Swatch, Typography } from '../../../../../../../../api'\nimport { getTypographyStyleSwatchIds } from '../../../../../../../../prop-controllers/introspection'\nimport { isNonNullable } from '../../../../../../../utils/isNonNullable'\n\nexport type TypographyMarkDataValue = {\n  fontWeight?: number\n  fontSize?: LengthValue\n  fontFamily?: string\n  color?: Color\n  textAlign?: string\n  lineHeight?: number\n  letterSpacing?: number\n  uppercase?: boolean\n  italic?: boolean\n  underline?: boolean\n  strikethrough?: boolean\n}\n\nexport type TypographyMarkValue = {\n  id: string | null | undefined\n  style: Typography['style']\n}\n\nexport type TypographyMarkData = Array<DeviceOverride<TypographyMarkDataValue>>\n\nconst getDeviceId = ({ deviceId }: DeviceOverride<unknown>) => deviceId\n\nconst withColor =\n  (swatches: Swatch[]) =>\n  ({\n    value: { color, ...restOfValue },\n    ...rest\n  }: Typography['style'][number]): DeviceOverride<TypographyMarkDataValue> =>\n    ({\n      ...rest,\n      value: {\n        ...restOfValue,\n        ...(color\n          ? {\n              color: {\n                swatch: swatches.find(s => s && s.id === color.swatchId),\n                alpha: color.alpha,\n              },\n            }\n          : {}),\n      } as TypographyMarkDataValue,\n    } as DeviceOverride<TypographyMarkDataValue>)\n\nexport const overrideTypographyStyle = <A>(\n  source: Array<DeviceOverride<A>>,\n  override: Array<DeviceOverride<A>>,\n): Array<DeviceOverride<A>> => {\n  const devices = [...new Set(source.map(getDeviceId).concat(override.map(getDeviceId)))]\n\n  return devices.map(deviceId => ({\n    deviceId,\n    value: {\n      ...(findDeviceOverride(source, deviceId) || { value: {} }).value,\n      ...(findDeviceOverride(override, deviceId, v => v) || { value: {} }).value,\n    },\n  })) as DeviceOverride<A>[]\n}\n\nexport default function useTypographyMark(\n  value: TypographyMarkValue | null | undefined,\n): TypographyMarkData | null | undefined {\n  const typography = useTypography(value?.id ?? null)\n  const swatchIds = [\n    ...getTypographyStyleSwatchIds(value?.style),\n    ...getTypographyStyleSwatchIds(typography?.style),\n  ]\n  const swatches = useSwatches(swatchIds)\n\n  return overrideTypographyStyle(\n    typography?.style.map(withColor(swatches.filter(isNonNullable))) ?? [],\n    value?.style.map(withColor(swatches.filter(isNonNullable))) ?? [],\n  )\n}\n","import { ComponentPropsWithoutRef } from 'react'\n\nimport useTypographyMark, {\n  TypographyMarkValue,\n  overrideTypographyStyle,\n  TypographyMarkDataValue,\n} from './hooks/useTypographyMark'\nimport { colorToString } from '../../../../../../utils/colorToString'\nimport { shallowMergeFallbacks } from '../../../../../../utils/devices'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../../../../../runtimes/react/use-style'\nimport { responsiveStyle } from '../../../../../../utils/responsive-style'\nimport { ResponsiveValue } from '../../../../../../../prop-controllers/descriptors'\n\nexport type { TypographyMarkValue }\nexport { overrideTypographyStyle }\n\ntype BaseProps = { value: TypographyMarkValue }\n\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'span'>, keyof BaseProps>\n\nexport default function Mark({ value, className, ...restOfProps }: Props): JSX.Element {\n  const typographyStyle = useTypographyMark(value)\n  const typographyClassName = useStyle(\n    responsiveStyle<\n      TypographyMarkDataValue,\n      [ResponsiveValue<TypographyMarkDataValue> | null | undefined]\n    >(\n      [typographyStyle],\n      ([\n        {\n          color,\n          fontFamily,\n          fontSize,\n          fontWeight,\n          lineHeight,\n          letterSpacing,\n          uppercase,\n          underline,\n          strikethrough,\n          italic,\n        } = {} as TypographyMarkDataValue,\n      ]) => ({\n        ...(color == null ? {} : { color: colorToString(color) }),\n        ...(fontFamily == null ? {} : { fontFamily }),\n        ...(fontSize == null || fontSize.value == null || fontSize.unit == null\n          ? {}\n          : { fontSize: `${fontSize.value}${fontSize.unit}` }),\n        ...(fontWeight == null ? {} : { fontWeight }),\n        ...(lineHeight == null ? {} : { lineHeight }),\n        ...(letterSpacing == null ? {} : { letterSpacing: `${letterSpacing / 10}em` }),\n        ...(uppercase == null\n          ? {}\n          : { textTransform: uppercase === true ? 'uppercase' : 'initial' }),\n        ...(underline == null && strikethrough == null\n          ? {}\n          : {\n              textDecoration: [\n                Boolean(underline) && 'underline',\n                Boolean(strikethrough) && 'line-through',\n              ]\n                .filter(Boolean)\n                .join(' '),\n            }),\n        ...(italic == null ? {} : { fontStyle: italic === true ? 'italic' : 'initial' }),\n      }),\n      shallowMergeFallbacks,\n    ),\n  )\n\n  return <span {...restOfProps} className={cx(typographyClassName, className)} />\n}\n","import { cx } from '@emotion/css'\nimport { forwardRef, ComponentPropsWithoutRef, ForwardedRef, ElementRef, ElementType } from 'react'\n\nimport type { ResponsiveValue } from '../../../../../../../prop-controllers'\nimport { useStyle } from '../../../../../../../runtimes/react/use-style'\nimport { responsiveStyle } from '../../../../../../utils/responsive-style'\n\ntype BaseProps<T extends ElementType> = {\n  as?: T\n  textAlign?: ResponsiveValue<'left' | 'center' | 'right' | 'justify'>\n}\n\ntype Props<T extends ElementType> = BaseProps<T> &\n  Omit<ComponentPropsWithoutRef<T>, keyof BaseProps<T>>\n\nexport default forwardRef(function Block<T extends ElementType>(\n  { textAlign, className, as, ...restOfProps }: Props<T>,\n  ref: ForwardedRef<ElementRef<T>>,\n) {\n  const Component = as ?? 'div'\n\n  return (\n    // @ts-ignore: `ref` types don't match.\n    <Component\n      {...restOfProps}\n      ref={ref}\n      className={cx(\n        useStyle({ margin: 0 }),\n        useStyle(responsiveStyle([textAlign], ([textAlign = 'left']) => ({ textAlign }))),\n        useStyle(\n          as === 'blockquote'\n            ? {\n                padding: '0.5em 10px',\n                fontSize: '1.25em',\n                fontWeight: '300',\n                borderLeft: '5px solid rgba(0, 0, 0, 0.1)',\n              }\n            : {},\n        ),\n        className,\n      )}\n    />\n  )\n})\n"],"names":["findDeviceOverride","useTypography","getTypographyStyleSwatchIds","useSwatches","isNonNullable","value","className","restOfProps","typographyStyle","useTypographyMark","typographyClassName","useStyle","responsiveStyle","color","fontFamily","fontSize","fontWeight","lineHeight","letterSpacing","uppercase","underline","strikethrough","italic","colorToString","unit","textTransform","textDecoration","Boolean","filter","join","fontStyle","shallowMergeFallbacks","cx","forwardRef","ref","textAlign","as","Component","margin","padding","borderLeft"],"mappings":"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"}

package/dist/index.es.js

@@ -39,13 +39,13 @@ import * as React from "react";
 import { useEffect, createContext, useContext, useState, useMemo, useRef, Children, createElement, forwardRef, memo, useCallback, useImperativeHandle, Component, Suspense } from "react";
 import { useSyncExternalStoreWithSelector } from "use-sync-external-store/shim/with-selector";
 import dynamic from "next/dynamic";
-import { g as getPropControllerDescriptors, i as isElementReference, a as getElementSwatchIds, b as getFileIds, d as getTypographyIds, e as getTableIds, f as getPageIds, h as getElementChildren, j as createDocumentReference, M as MakeswiftComponentType, k as getBorderSwatchIds, l as isNonNullable, m as getBoxShadowsSwatchIds, n as getResponsiveColorSwatchIds, o as getComponentPropControllerDescriptors, p as getPropControllers, q as isPropControllersHandle, r as configureStore$1, s as getDocument, t as getElementId, u as getIsInBuilder, v as getIsPreview, w as copyElementTree, x as getReactComponent } from "./constants.es.js";
-import { A as ActionTypes, f as introspectedResourcesFulfilled, g as apiResourceFulfilled, t as typographiesFulfilled, h as registerComponentHandleEffect, j as mountComponentEffect, k as registerComponentEffect, l as registerReactComponentEffect } from "./actions.es.js";
+import { g as getPropControllerDescriptors, i as isElementReference, a as getElementSwatchIds, b as getFileIds, d as getTypographyIds, e as getTableIds, f as getPageIds, h as getElementChildren, j as createDocumentReference, M as MakeswiftComponentType, k as getBorderSwatchIds, l as isNonNullable, m as getBoxShadowsSwatchIds, n as getResponsiveColorSwatchIds, o as isPropControllersHandle, p as getComponentPropControllerDescriptors, q as getPropControllers, r as configureStore$1, s as getDocument, t as getElementId, u as getIsPreview, v as getIsInBuilder, w as copyElementTree, x as getReactComponent, y as getBuilderEditMode } from "./constants.es.js";
+import { A as ActionTypes, g as introspectedResourcesFulfilled, h as apiResourceFulfilled, t as typographiesFulfilled, j as registerComponentHandleEffect, k as mountComponentEffect, l as registerComponentEffect, n as registerReactComponentEffect } from "./actions.es.js";
 import { cache, cx } from "@emotion/css";
 import { serializeStyles } from "@emotion/serialize";
 import { registerStyles, insertStyles } from "@emotion/utils";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { T as Types, E as ElementID, B as Backgrounds, W as Width, h as ResponsiveIconRadioGroup, M as Margin, P as Padding, i as Border, j as BorderRadius, k as Shadows, G as GapY, l as GapX, m as ResponsiveSelect, n as ResponsiveNumber, o as Checkbox, p as Grid, q as TextInput, L as Link, r as ResponsiveColor, s as TextStyle, t as Images, N as Number$1, D as Date$1, F as Font, u as ResponsiveLength, v as TextArea, w as Table, x as TableFormFields, y as Image, z as ResponsiveOpacity, A as NavigationLinks, H as SocialLinks, J as RichText, V as Video, K as StyleControlProperty, O as ImageControlValueFormat, I as ImageControlType, C as ColorControlType, Q as BorderPropControllerFormat, U as ShadowsPropControllerFormat, X as BorderRadiusPropControllerFormat, Y as MarginPropControllerFormat, Z as PaddingPropControllerFormat, _ as WidthPropControllerFormat, S as SlotControlType, a as StyleControlType } from "./slot.es.js";
+import { T as Types, E as ElementID, B as Backgrounds, W as Width, h as ResponsiveIconRadioGroup, M as Margin, P as Padding, i as Border, j as BorderRadius, k as Shadows, G as GapY, l as GapX, m as ResponsiveSelect, n as ResponsiveNumber, o as Checkbox, p as Grid, q as TextInput, L as Link, s as ResponsiveColor, t as TextStyle, u as Images, N as Number$1, D as Date$1, F as Font, v as ResponsiveLength, w as TextArea, x as Table, y as TableFormFields, z as Image, A as ResponsiveOpacity, H as NavigationLinks, J as SocialLinks, K as RichText, V as Video, O as StyleControlProperty, Q as ImageControlValueFormat, I as ImageControlType, C as ColorControlType, U as BorderPropControllerFormat, X as ShadowsPropControllerFormat, Y as BorderRadiusPropControllerFormat, Z as MarginPropControllerFormat, _ as PaddingPropControllerFormat, $ as WidthPropControllerFormat, S as SlotControlType, a0 as RichTextControlType, a as StyleControlType } from "./rich-text.es.js";
 import { S as SelectControlType, T as TextAreaControlType, a as TextInputControlType, N as NumberControlType, C as CheckboxControlType } from "./text-input.es.js";
 import { C as ComboboxControlType } from "./combobox.es.js";
 import { S as ShapeControlType, L as ListControlType, b as LinkControlType } from "./control.es.js";
@@ -956,7 +956,7 @@ function PreviewModeScript({
   isPreview = false,
   appOrigin = "https://app.makeswift.com"
 }) {
-  const __html = `
+  const previewModeScript = `
 const isPreview = ${isPreview}
 const appOrigin = '${appOrigin.replace("'", "\\'")}'
 const searchParamName = 'x-makeswift-preview-mode'
@@ -1004,12 +1004,43 @@ if (originalUrl.searchParams.has(searchParamName)) {
   window.history.replaceState(null, '', url)
 }
 `;
-  return /* @__PURE__ */ jsx("script", {
-    id: "makeswift-preview-mode",
-    type: "module",
-    dangerouslySetInnerHTML: {
-      __html
+  const makeswiftConnectionCheckScript = `
+const appOrigin = '${appOrigin.replace("'", "\\'")}'
+
+if (window.parent !== window) {
+  window.addEventListener('message', event => {
+    if (
+      event.origin === appOrigin && 
+      event.data.type === '${ActionTypes.MAKESWIFT_CONNECTION_INIT}'
+    ) {
+      setInterval(() => {
+        window.parent.postMessage({ 
+          type: '${ActionTypes.MAKESWIFT_CONNECTION_CHECK}',
+          payload: { 
+            currentUrl: window.location.href 
+          }
+        }, appOrigin)
+      }, 20)
     }
+  })
+
+  window.parent.postMessage({ type: '${ActionTypes.MAKESWIFT_CONNECTION_INIT}' }, appOrigin)
+}
+`;
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx("script", {
+      id: "makeswift-preview-mode",
+      type: "module",
+      dangerouslySetInnerHTML: {
+        __html: previewModeScript
+      }
+    }), /* @__PURE__ */ jsx("script", {
+      id: "makeswift-connection-check",
+      type: "module",
+      dangerouslySetInnerHTML: {
+        __html: makeswiftConnectionCheckScript
+      }
+    })]
   });
 }
 class Document$1 extends NextDocument {
@@ -1048,7 +1079,7 @@ class Document$1 extends NextDocument {
     });
   }
 }
-const version = "0.6.2";
+const version = "0.6.4";
 function isErrorWithMessage(error) {
   return typeof error === "object" && error !== null && "message" in error && typeof error.message === "string";
 }
@@ -1088,7 +1119,8 @@ Read more about dynamic catch-all routes here: https://nextjs.org/docs/routing/d
           return res.status(401).json({ message: "Unauthorized" });
         return res.json({
           version,
-          previewMode: true
+          previewMode: true,
+          interactionMode: true
         });
       }
       case "revalidate": {
@@ -2202,6 +2234,7 @@ function registerComponent$1(runtime) {
       text: RichText(() => ({
         preset: {
           document: {
+            object: "document",
             nodes: [
               {
                 object: "block",
@@ -3070,6 +3103,25 @@ function ControlValue({
       return children(data);
   }
 }
+function pollBoxModel({
+  element,
+  onBoxModelChange
+}) {
+  let currentBoxModel = null;
+  const handleAnimationFrameRequest = () => {
+    const measuredBoxModel = getBox(element);
+    if (!deepEqual(currentBoxModel, measuredBoxModel)) {
+      currentBoxModel = measuredBoxModel;
+      onBoxModelChange(currentBoxModel);
+    }
+    animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest);
+  };
+  let animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest);
+  return () => {
+    cancelAnimationFrame(animationFrameHandle);
+    onBoxModelChange(null);
+  };
+}
 function useSlot(data, control) {
   if (data == null || data.elements.length === 0) {
     return /* @__PURE__ */ jsx(Slot.Placeholder, {
@@ -3213,24 +3265,19 @@ function SlotPlaceholder({
     })
   });
 }
-function pollBoxModel({
-  element,
-  onBoxModelChange
-}) {
-  let currentBoxModel = null;
-  const handleAnimationFrameRequest = () => {
-    const measuredBoxModel = getBox(element);
-    if (!deepEqual(currentBoxModel, measuredBoxModel)) {
-      currentBoxModel = measuredBoxModel;
-      onBoxModelChange(currentBoxModel);
-    }
-    animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest);
-  };
-  let animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest);
-  return () => {
-    cancelAnimationFrame(animationFrameHandle);
-    onBoxModelChange(null);
-  };
+const Text = forwardNextDynamicRef((patch) => dynamic(() => patch(import("./index.es5.js"))));
+function useRichText(data, control) {
+  const textCallbackRef = useCallback((handle) => {
+    var _a;
+    if (isPropControllersHandle(handle))
+      (_a = handle == null ? void 0 : handle.setPropControllers) == null ? void 0 : _a.call(handle, control == null ? null : {
+        text: control
+      });
+  }, [control]);
+  return /* @__PURE__ */ jsx(Text, {
+    text: data,
+    ref: textCallbackRef
+  });
 }
 function useWidthStyle(value, descriptor) {
   return useStyle(responsiveWidth(value, descriptor.options.defaultValue));
@@ -3267,7 +3314,7 @@ function PropsValue({
     return getPropControllers(state, documentKey, element.key);
   });
   return Object.entries(propControllerDescriptorsRef.current).reduceRight((renderFn, [propName, descriptor]) => (propsValue) => {
-    var _a2;
+    var _a2, _b;
     switch (descriptor.type) {
       case CheckboxControlType:
       case NumberControlType:
@@ -3295,15 +3342,24 @@ function PropsValue({
             [propName]: value
           }))
         }, descriptor.type);
-      case SlotControlType: {
+      case RichTextControlType:
         const control = (_a2 = propControllers == null ? void 0 : propControllers[propName]) != null ? _a2 : null;
         return /* @__PURE__ */ jsx(RenderHook, {
-          hook: useSlot,
+          hook: useRichText,
           parameters: [props[propName], control],
           children: (value) => renderFn(__spreadProps(__spreadValues({}, propsValue), {
             [propName]: value
           }))
         }, descriptor.type);
+      case SlotControlType: {
+        const control2 = (_b = propControllers == null ? void 0 : propControllers[propName]) != null ? _b : null;
+        return /* @__PURE__ */ jsx(RenderHook, {
+          hook: useSlot,
+          parameters: [props[propName], control2],
+          children: (value) => renderFn(__spreadProps(__spreadValues({}, propsValue), {
+            [propName]: value
+          }))
+        }, descriptor.type);
       }
       case Types.Width:
         switch (descriptor.options.format) {
@@ -3551,6 +3607,9 @@ function useIsInBuilder() {
 function useIsPreview() {
   return useSelector((state) => getIsPreview(state));
 }
+function useBuilderEditMode() {
+  return useSelector((state) => getBuilderEditMode(state));
+}
 function useDispatch() {
   const store = useContext(StoreContext);
   return store.dispatch;
@@ -3682,5 +3741,5 @@ const DocumentReference = memo(forwardRef(function DocumentReference2({
     document: document2
   });
 }));
-export { Makeswift as $, Alignments as A, useFile as B, Contrasts as C, DocumentReference as D, Element as E, DEVICES as F, findDeviceOverride as G, forwardNextDynamicRef as H, useIsPreview as I, useFiles as J, useSwatches as K, usePagePathnameSlice as L, useElementId as M, deepEqual as N, storeContextDefaultValue as O, PageProvider as P, StoreContext as Q, RuntimeProvider as R, Shapes as S, MakeswiftProvider as T, useTypography as U, shallowMergeFallbacks as V, MakeswiftClient as W, getStaticPaths as X, getStaticProps as Y, getServerSideProps as Z, Page as _, ReactRuntime as a, PreviewModeScript as a0, Document$1 as a1, MakeswiftApiHandler as a2, usePageId as b, DEFAULT_BOX_ANIMATE_TYPE as c, DEFAULT_BOX_ANIMATE_DELAY as d, DEFAULT_BOX_ANIMATE_DURATION as e, DEFAULT_ITEM_ANIMATE_TYPE as f, DEFAULT_ITEM_ANIMATE_DELAY as g, DEFAULT_ITEM_ANIMATE_DURATION as h, DEFAULT_ITEM_STAGGER_DURATION as i, useBorder as j, useBoxShadow as k, useResponsiveColor as l, useMediaQuery as m, Page$1 as n, useStyle as o, responsiveWidth as p, responsiveTextStyle as q, responsiveStyle as r, colorToString as s, Sizes as t, useIsInBuilder as u, useFormContext as v, responsiveGridItem as w, useTable as x, useMakeswiftClient as y, Provider as z };
+export { getServerSideProps as $, Alignments as A, useFile as B, Contrasts as C, DocumentReference as D, Element as E, DEVICES as F, findDeviceOverride as G, forwardNextDynamicRef as H, useIsPreview as I, useFiles as J, useSwatches as K, usePagePathnameSlice as L, useElementId as M, deepEqual as N, storeContextDefaultValue as O, PageProvider as P, StoreContext as Q, RuntimeProvider as R, Shapes as S, MakeswiftProvider as T, useBuilderEditMode as U, pollBoxModel as V, useTypography as W, shallowMergeFallbacks as X, MakeswiftClient as Y, getStaticPaths as Z, getStaticProps as _, ReactRuntime as a, Page as a0, Makeswift as a1, PreviewModeScript as a2, Document$1 as a3, MakeswiftApiHandler as a4, usePageId as b, DEFAULT_BOX_ANIMATE_TYPE as c, DEFAULT_BOX_ANIMATE_DELAY as d, DEFAULT_BOX_ANIMATE_DURATION as e, DEFAULT_ITEM_ANIMATE_TYPE as f, DEFAULT_ITEM_ANIMATE_DELAY as g, DEFAULT_ITEM_ANIMATE_DURATION as h, DEFAULT_ITEM_STAGGER_DURATION as i, useBorder as j, useBoxShadow as k, useResponsiveColor as l, useMediaQuery as m, Page$1 as n, useStyle as o, responsiveWidth as p, responsiveTextStyle as q, responsiveStyle as r, colorToString as s, Sizes as t, useIsInBuilder as u, useFormContext as v, responsiveGridItem as w, useTable as x, useMakeswiftClient as y, Provider as z };
 //# sourceMappingURL=index.es.js.map