@makeswift/runtime 0.9.3 → 0.9.4

package/dist/index.es.js

@@ -38,17 +38,17 @@ import * as React from "react";
 import { useEffect, createContext, useContext, useState, useMemo, useRef, Children, createElement, forwardRef, memo, useId, useCallback, useImperativeHandle, Component, Suspense } from "react";
 import { useSyncExternalStoreWithSelector } from "use-sync-external-store/shim/with-selector";
 import dynamic from "next/dynamic";
-import { a as createDocumentReference, g as getPropControllerDescriptors, b as isElementReference, e as getElementSwatchIds, f as getFileIds, h as getTypographyIds, j as getTableIds, k as getPageIds, l as getElementChildren, S as ShapeControlType, L as ListControlType, m as Types, E as ElementID, B as Backgrounds, W as Width, n as ResponsiveIconRadioGroup, M as Margin, P as Padding, o as Border, p as BorderRadius, q as Shadows, G as GapY, r as GapX, s as ResponsiveSelect, t as ResponsiveNumber, u as Checkbox, v as Grid, w as TextInput, x as Link, y as ResponsiveColor, z as TextStyle, C as ComponentIcon, I as Images, N as Number$1, D as Date$1, F as Font, A as ResponsiveLength, H as TextArea, J as Table, K as TableFormFields, O as Image, Q as ResponsiveOpacity, U as NavigationLinks, V as SocialLinks, X as RichText, Y as Video, Z as useStyle, _ as getBorderSwatchIds, $ as isNonNullable, a0 as getBoxShadowsSwatchIds, a1 as getResponsiveColorSwatchIds, a2 as StyleControlProperty, a3 as ImageControlValueFormat, a4 as isPropControllersHandle, a5 as StyleControlType, a6 as RichTextV2ControlType, a7 as RichTextControlType, a8 as SlotControlType, a9 as StyleV2ControlType, aa as LinkControlType, ab as ImageControlType, ac as ColorControlType, ad as getComponentPropControllerDescriptors, ae as getPropControllers, af as BorderPropControllerFormat, ag as ShadowsPropControllerFormat, ah as BorderRadiusPropControllerFormat, ai as MarginPropControllerFormat, aj as PaddingPropControllerFormat, ak as WidthPropControllerFormat, al as configureStore$1, am as copyElementTree, an as getBreakpoints, ao as getDocument, ap as getElementId, aq as getIsPreview, ar as getIsInBuilder, as as getReactComponent, at as getBuilderEditMode } from "./react-page.es.js";
+import { a as createDocumentReference, g as getPropControllerDescriptors, b as isElementReference, e as getSwatchIds, f as getFileIds, h as getTypographyIds, j as getTableIds, k as getPageIds, l as getElementChildren, E as ElementID, B as Backgrounds, W as Width, m as ResponsiveIconRadioGroup, M as Margin, P as Padding, n as Border, o as BorderRadius, S as Shadows, G as GapY, p as GapX, q as ResponsiveSelect, r as ResponsiveNumber, s as Checkbox, t as Grid, u as TextInput, L as Link, v as ResponsiveColor, w as TextStyle, C as ComponentIcon, I as Images, N as Number$1, D as Date$1, F as Font, x as ResponsiveLength, y as TextArea, z as Table, A as TableFormFields, H as Image, J as ResponsiveOpacity, K as NavigationLinks, O as SocialLinks, Q as RichText, V as Video, U as useStyle, X as getBorderSwatchIds, Y as isNonNullable$1, Z as getBoxShadowsSwatchIds, _ as getResponsiveColorSwatchIds, $ as StyleControlProperty, a0 as ImageControlValueFormat, a1 as isPropControllersHandle, a2 as StyleControlType, a3 as RichTextV2ControlType, a4 as RichTextControlType, a5 as SlotControlType, a6 as StyleV2ControlType, a7 as ListControlType, a8 as ShapeControlType, a9 as LinkControlType, aa as ImageControlType, ab as ColorControlType, ac as getComponentPropControllerDescriptors, ad as getPropControllers, ae as Types, af as BorderPropControllerFormat, ag as ShadowsPropControllerFormat, ah as BorderRadiusPropControllerFormat, ai as MarginPropControllerFormat, aj as PaddingPropControllerFormat, ak as WidthPropControllerFormat, al as configureStore$1, am as copyElementTree, an as getBreakpoints, ao as getDocument, ap as getElementId, aq as getIsPreview, ar as getIsInBuilder, as as getReactComponent, at as getBuilderEditMode } from "./react-page.es.js";
 import { A as ActionTypes, n as apiResourceFulfilled, o as registerComponentEffect, p as registerReactComponentEffect, q as registerComponentHandleEffect, t as mountComponentEffect } from "./actions.es.js";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { I as IconRadioGroupControlType, S as SelectControlType, T as TextAreaControlType, a as TextInputControlType, N as NumberControlType, C as CheckboxControlType } from "./text-input.es.js";
+import { T as TypographyControlType, I as IconRadioGroupControlType, S as SelectControlType, a as TextAreaControlType, b as TextInputControlType, N as NumberControlType, C as CheckboxControlType } from "./typography.es.js";
 import { C as ComboboxControlType } from "./combobox.es.js";
 import "slate";
 import { useSyncExternalStore } from "use-sync-external-store/shim";
 import { createStore, applyMiddleware } from "redux";
 import thunk from "redux-thunk";
 import { A as APIResourceType } from "./types.es.js";
-import { getBaseBreakpoint, findBreakpointOverride, DefaultBreakpointID, join, getBreakpoint, getBreakpointMediaQuery, parseBreakpointsInput } from "./state/breakpoints.es.js";
+import { getBaseBreakpoint, findBreakpointOverride, DefaultBreakpointID, join, getBreakpoint, getBreakpointMediaQuery, shallowMergeFallbacks, parseBreakpointsInput } from "./state/breakpoints.es.js";
 import { g as getBox, i as isMeasurable, m as measure } from "./box-models.es.js";
 import ColorHelper from "color";
 import { cache, cx } from "@emotion/css";
@@ -925,7 +925,7 @@ Received "${apiKey}" instead.`);
     while (current = remaining.pop()) {
       let getResourcesFromElementDescriptors = function(elementDescriptors2, props) {
         Object.entries(elementDescriptors2).forEach(([propName, descriptor]) => {
-          getElementSwatchIds(descriptor, props[propName]).forEach((swatchId) => {
+          getSwatchIds(descriptor, props[propName]).forEach((swatchId) => {
             swatchIds.add(swatchId);
           });
           getFileIds(descriptor, props[propName]).forEach((fileId) => fileIds.add(fileId));
@@ -938,34 +938,6 @@ Received "${apiKey}" instead.`);
               remaining.push(child);
             }
           });
-          if (descriptor.type === ShapeControlType) {
-            const prop = props[propName];
-            if (prop == null)
-              return;
-            getResourcesFromElementDescriptors(descriptor.config.type, prop);
-          }
-          if (descriptor.type === ListControlType) {
-            const prop = props[propName];
-            if (prop == null)
-              return;
-            prop.forEach((item) => {
-              getResourcesFromElementDescriptors({ propName: descriptor.config.type }, { propName: item.value });
-            });
-          }
-          if (descriptor.type === Types.Shape) {
-            const prop = props[propName];
-            if (prop == null)
-              return;
-            getResourcesFromElementDescriptors(descriptor.options.type, prop);
-          }
-          if (descriptor.type === Types.List) {
-            const prop = props[propName];
-            if (prop == null)
-              return;
-            prop.forEach((item) => {
-              getResourcesFromElementDescriptors({ propName: descriptor.options.type }, { propName: item.value });
-            });
-          }
         });
       };
       let element2;
@@ -1148,7 +1120,7 @@ async function fonts(_req, res, { getFonts } = {}) {
   const fonts2 = (_a = await (getFonts == null ? void 0 : getFonts())) != null ? _a : [];
   return res.json(fonts2);
 }
-const version = "0.9.3";
+const version = "0.9.4";
 async function handler(req, res, { apiKey, unstable_siteVersions }) {
   if (req.query.secret !== apiKey) {
     return res.status(401).json({ message: "Unauthorized" });
@@ -2568,7 +2540,7 @@ function mapSideColor(swatches, _e) {
   return __spreadProps(__spreadValues({}, restOfSide), {
     color: color && {
       alpha: color.alpha,
-      swatch: swatches.filter(isNonNullable).find((s) => s && s.id === color.swatchId)
+      swatch: swatches.filter(isNonNullable$1).find((s) => s && s.id === color.swatchId)
     }
   });
 }
@@ -2614,7 +2586,7 @@ function useBoxShadow(value) {
         return __spreadProps(__spreadValues({}, restOfShadow), {
           payload: {
             color: color != null ? {
-              swatch: swatches.filter(isNonNullable).find((s) => s && s.id === color.swatchId),
+              swatch: swatches.filter(isNonNullable$1).find((s) => s && s.id === color.swatchId),
               alpha: color.alpha
             } : null,
             inset: inset != null ? inset : ShadowDefaultValue.inset,
@@ -2638,7 +2610,7 @@ function useResponsiveColor(color) {
     const { swatchId, alpha } = v;
     const swatch = swatches.find((s) => s && s.id === swatchId);
     return swatch == null ? null : __spreadProps(__spreadValues({}, rest), { value: { swatch, alpha } });
-  }).filter(isNonNullable);
+  }).filter(isNonNullable$1);
 }
 const getIndexes = (spans, index) => {
   const flattened = spans.reduce((a, s) => a.concat(s), []);
@@ -3346,6 +3318,138 @@ function useTextAreaValue(data, definition) {
 function useTextInputValue(data, definition) {
   return data != null ? data : definition.config.defaultValue;
 }
+function isNonNullable(value) {
+  return value != null;
+}
+function typographyFragementToTypographyControlData(typography) {
+  if (typography == null)
+    return void 0;
+  return {
+    id: typography.id,
+    style: typography.style.map(({ deviceId, value }) => {
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+      return {
+        deviceId,
+        value: {
+          fontFamily: (_a = value.fontFamily) != null ? _a : void 0,
+          lineHeight: (_b = value.lineHeight) != null ? _b : void 0,
+          letterSpacing: (_c = value.letterSpacing) != null ? _c : void 0,
+          fontWeight: (_d = value.fontWeight) != null ? _d : void 0,
+          textAlign: (_e = value.textAlign) != null ? _e : void 0,
+          uppercase: (_f = value.uppercase) != null ? _f : void 0,
+          underline: (_g = value.underline) != null ? _g : void 0,
+          strikethrough: (_h = value.strikethrough) != null ? _h : void 0,
+          italic: (_i = value.italic) != null ? _i : void 0,
+          fontSize: (_j = value.fontSize) != null ? _j : void 0,
+          color: (_k = value.color) != null ? _k : void 0
+        }
+      };
+    })
+  };
+}
+function getTypographyStyleSwatchIds(style) {
+  var _a;
+  return (_a = style == null ? void 0 : style.map((override) => override.value).flatMap((typographyStyle) => {
+    var _a2;
+    return (_a2 = typographyStyle.color) == null ? void 0 : _a2.swatchId;
+  }).filter(isNonNullable)) != null ? _a : [];
+}
+const withColor = (swatches) => (deviceRawTypographyValue) => {
+  var _b, _c;
+  const { value, deviceId } = deviceRawTypographyValue;
+  if (value.color == null) {
+    const _a = value, { color } = _a, nextValue = __objRest(_a, ["color"]);
+    return {
+      deviceId,
+      value: nextValue
+    };
+  }
+  return {
+    deviceId,
+    value: __spreadProps(__spreadValues({}, value), {
+      color: {
+        swatch: swatches.find((s) => {
+          var _a2;
+          return s && s.id === ((_a2 = value.color) == null ? void 0 : _a2.swatchId);
+        }),
+        alpha: (_c = (_b = value.color) == null ? void 0 : _b.alpha) != null ? _c : void 0
+      }
+    })
+  };
+};
+const getDeviceId = ({ deviceId }) => deviceId;
+function useEnhancedTypography(value) {
+  var _a, _b, _c;
+  const typography = typographyFragementToTypographyControlData(useTypography((_a = value == null ? void 0 : value.id) != null ? _a : null));
+  const source = (_b = typography == null ? void 0 : typography.style) != null ? _b : [];
+  const override = (_c = value == null ? void 0 : value.style) != null ? _c : [];
+  const breakpoints = useBreakpoints();
+  const swatchIds = [
+    ...getTypographyStyleSwatchIds(value == null ? void 0 : value.style),
+    ...getTypographyStyleSwatchIds(typography == null ? void 0 : typography.style)
+  ];
+  const swatches = useSwatches(swatchIds).filter(isNonNullable);
+  const enhancedSource = source.map(withColor(swatches));
+  const enhancedOverride = override.map(withColor(swatches));
+  const devices = [
+    ...new Set(enhancedSource.map(getDeviceId).concat(enhancedOverride.map(getDeviceId)))
+  ];
+  return devices.map((deviceId) => {
+    var _a2, _b2;
+    const deviceSource = (_a2 = findBreakpointOverride(breakpoints, enhancedSource, deviceId)) == null ? void 0 : _a2.value;
+    const deviceOverride = (_b2 = findBreakpointOverride(breakpoints, enhancedOverride, deviceId, (v) => v)) == null ? void 0 : _b2.value;
+    if (deviceSource && deviceOverride) {
+      return {
+        deviceId,
+        value: __spreadValues(__spreadValues({}, deviceSource), deviceOverride)
+      };
+    } else if (deviceOverride) {
+      return {
+        deviceId,
+        value: deviceOverride
+      };
+    } else if (deviceSource) {
+      return {
+        deviceId,
+        value: deviceSource
+      };
+    }
+    return null;
+  }).filter(isNonNullable);
+}
+function useTypographyClassName(value) {
+  return useStyle(useResponsiveStyle([value], ([value2]) => {
+    if (value2 === void 0)
+      return {};
+    let styles = {};
+    if (value2.color != null)
+      styles.color = colorToString(value2.color);
+    if (value2.fontFamily != null)
+      styles.fontFamily = value2.fontFamily;
+    if (value2.fontSize != null && value2.fontSize.value != null && value2.fontSize.unit != null)
+      styles.fontSize = `${value2.fontSize.value}${value2.fontSize.unit}`;
+    if (value2.fontWeight != null)
+      styles.fontWeight = value2.fontWeight;
+    if (value2.lineHeight != null)
+      styles.lineHeight = value2.lineHeight;
+    if (value2.letterSpacing != null)
+      styles.letterSpacing = `${value2.letterSpacing / 10}em`;
+    if (value2.uppercase != null)
+      styles.textTransform = value2.uppercase === true ? "uppercase" : "initial";
+    if (value2.underline != null || value2.strikethrough != null)
+      styles.textDecoration = [
+        Boolean(value2.underline) && "underline",
+        Boolean(value2.strikethrough) && "line-through"
+      ].filter(Boolean).join(" ");
+    if (value2.italic != null)
+      styles.fontStyle = value2.italic === true ? "italic" : "initial";
+    return styles;
+  }, shallowMergeFallbacks));
+}
+function useTypographyValue(data) {
+  const enhancedTypography = useEnhancedTypography(data);
+  return useTypographyClassName(enhancedTypography);
+}
 function ControlValue({
   data,
   definition,
@@ -3458,6 +3562,12 @@ function ControlValue({
         parameters: [data, definition, control],
         children: (value) => children(value)
       }, definition.type);
+    case TypographyControlType:
+      return /* @__PURE__ */ jsx(RenderHook, {
+        hook: useTypographyValue,
+        parameters: [data],
+        children: (value) => children(value)
+      }, definition.type);
     default:
       return children(data);
   }
@@ -3512,6 +3622,7 @@ function PropsValue({
       case ListControlType:
       case LinkControlType:
       case StyleV2ControlType:
+      case TypographyControlType:
         return /* @__PURE__ */ jsx(ControlValue, {
           definition: descriptor,
           data: props[propName],
@@ -4005,5 +4116,5 @@ const DocumentReference = memo(forwardRef(function DocumentReference2({
     document: document2
   });
 }));
-export { Document$1 as $, Alignments as A, forwardNextDynamicRef as B, Contrasts as C, DocumentReference as D, Element$1 as E, useIsPreview as F, useFiles as G, useSwatches as H, usePagePathnameSlice as I, useElementId as J, deepEqual as K, ElementImperativeHandle as L, StoreContext as M, MakeswiftProvider as N, ControlValue as O, PageProvider as P, useBuilderEditMode as Q, RuntimeProvider as R, Shapes as S, pollBoxModel as T, useTypography as U, getStaticPaths as V, getStaticProps as W, getServerSideProps as X, Page as Y, Makeswift as Z, PreviewModeScript as _, ReactRuntime as a, MakeswiftApiHandler as a0, usePageId as b, DEFAULT_BOX_ANIMATE_TYPE as c, DEFAULT_BOX_ANIMATE_DELAY as d, DEFAULT_BOX_ANIMATE_DURATION as e, DEFAULT_ITEM_ANIMATE_TYPE as f, DEFAULT_ITEM_ANIMATE_DELAY as g, DEFAULT_ITEM_ANIMATE_DURATION as h, DEFAULT_ITEM_STAGGER_DURATION as i, useBorder as j, useBoxShadow as k, useResponsiveColor as l, Page$1 as m, useResponsiveStyle as n, useResponsiveWidth as o, useResponsiveTextStyle as p, colorToString as q, useBreakpoints as r, Sizes as s, useFormContext as t, useIsInBuilder as u, useResponsiveGridItem as v, useTable as w, useMakeswiftClient as x, Provider as y, useFile as z };
+export { PreviewModeScript as $, Alignments as A, forwardNextDynamicRef as B, Contrasts as C, DocumentReference as D, Element$1 as E, useIsPreview as F, useFiles as G, useSwatches as H, usePagePathnameSlice as I, useElementId as J, deepEqual as K, ElementImperativeHandle as L, StoreContext as M, MakeswiftProvider as N, ControlValue as O, PageProvider as P, useBuilderEditMode as Q, RuntimeProvider as R, Shapes as S, pollBoxModel as T, useEnhancedTypography as U, useTypographyClassName as V, getStaticPaths as W, getStaticProps as X, getServerSideProps as Y, Page as Z, Makeswift as _, ReactRuntime as a, Document$1 as a0, MakeswiftApiHandler as a1, usePageId as b, DEFAULT_BOX_ANIMATE_TYPE as c, DEFAULT_BOX_ANIMATE_DELAY as d, DEFAULT_BOX_ANIMATE_DURATION as e, DEFAULT_ITEM_ANIMATE_TYPE as f, DEFAULT_ITEM_ANIMATE_DELAY as g, DEFAULT_ITEM_ANIMATE_DURATION as h, DEFAULT_ITEM_STAGGER_DURATION as i, useBorder as j, useBoxShadow as k, useResponsiveColor as l, Page$1 as m, useResponsiveStyle as n, useResponsiveWidth as o, useResponsiveTextStyle as p, colorToString as q, useBreakpoints as r, Sizes as s, useFormContext as t, useIsInBuilder as u, useResponsiveGridItem as v, useTable as w, useMakeswiftClient as x, Provider as y, useFile as z };
 //# sourceMappingURL=index.es.js.map