@makeswift/runtime 0.9.3 → 0.9.4

package/dist/index.cjs.js

@@ -41,7 +41,7 @@ var dynamic = require("next/dynamic");
 var reactPage = require("./react-page.cjs.js");
 var actions = require("./actions.cjs.js");
 var jsxRuntime = require("react/jsx-runtime");
-var textInput = require("./text-input.cjs.js");
+var typography = require("./typography.cjs.js");
 var combobox = require("./combobox.cjs.js");
 require("slate");
 var shim = require("use-sync-external-store/shim");
@@ -959,7 +959,7 @@ Received "${apiKey}" instead.`);
     while (current = remaining.pop()) {
       let getResourcesFromElementDescriptors = function(elementDescriptors2, props) {
         Object.entries(elementDescriptors2).forEach(([propName, descriptor]) => {
-          reactPage.getElementSwatchIds(descriptor, props[propName]).forEach((swatchId) => {
+          reactPage.getSwatchIds(descriptor, props[propName]).forEach((swatchId) => {
             swatchIds.add(swatchId);
           });
           reactPage.getFileIds(descriptor, props[propName]).forEach((fileId) => fileIds.add(fileId));
@@ -972,34 +972,6 @@ Received "${apiKey}" instead.`);
               remaining.push(child);
             }
           });
-          if (descriptor.type === reactPage.ShapeControlType) {
-            const prop = props[propName];
-            if (prop == null)
-              return;
-            getResourcesFromElementDescriptors(descriptor.config.type, prop);
-          }
-          if (descriptor.type === reactPage.ListControlType) {
-            const prop = props[propName];
-            if (prop == null)
-              return;
-            prop.forEach((item) => {
-              getResourcesFromElementDescriptors({ propName: descriptor.config.type }, { propName: item.value });
-            });
-          }
-          if (descriptor.type === reactPage.Types.Shape) {
-            const prop = props[propName];
-            if (prop == null)
-              return;
-            getResourcesFromElementDescriptors(descriptor.options.type, prop);
-          }
-          if (descriptor.type === reactPage.Types.List) {
-            const prop = props[propName];
-            if (prop == null)
-              return;
-            prop.forEach((item) => {
-              getResourcesFromElementDescriptors({ propName: descriptor.options.type }, { propName: item.value });
-            });
-          }
         });
       };
       let element2;
@@ -1019,8 +991,8 @@ Received "${apiKey}" instead.`);
       getResourcesFromElementDescriptors(elementDescriptors, element2.props);
     }
     const typographies = await this.getTypographies([...typographyIds]);
-    typographies.forEach((typography) => {
-      typography == null ? void 0 : typography.style.forEach((style) => {
+    typographies.forEach((typography2) => {
+      typography2 == null ? void 0 : typography2.style.forEach((style) => {
         var _a;
         const swatchId = (_a = style.value.color) == null ? void 0 : _a.swatchId;
         if (swatchId != null)
@@ -1055,7 +1027,7 @@ Received "${apiKey}" instead.`);
         var _a;
         return {
           id,
-          value: (_a = typographies.find((typography) => (typography == null ? void 0 : typography.id) === id)) != null ? _a : null
+          value: (_a = typographies.find((typography2) => (typography2 == null ? void 0 : typography2.id) === id)) != null ? _a : null
         };
       }),
       [types.APIResourceType.Table]: [...tableIds].map((id) => {
@@ -1182,7 +1154,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" });
@@ -2586,12 +2558,12 @@ function useFiles(fileIds) {
 function useTypography(typographyId) {
   const client = useMakeswiftClient();
   const readTypography = () => typographyId == null ? null : client.readTypography(typographyId);
-  const typography = shim.useSyncExternalStore(client.subscribe, readTypography, readTypography);
+  const typography2 = shim.useSyncExternalStore(client.subscribe, readTypography, readTypography);
   React.useEffect(() => {
     if (typographyId != null)
       client.fetchTypography(typographyId).catch(console.error);
   }, [client, typographyId]);
-  return typography;
+  return typography2;
 }
 function useGlobalElement(globalElementId) {
   const client = useMakeswiftClient();
@@ -3412,6 +3384,138 @@ function useTextAreaValue(data, definition) {
 function useTextInputValue(data, definition) {
   return data != null ? data : definition.config.defaultValue;
 }
+function isNonNullable(value) {
+  return value != null;
+}
+function typographyFragementToTypographyControlData(typography2) {
+  if (typography2 == null)
+    return void 0;
+  return {
+    id: typography2.id,
+    style: typography2.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 typography2 = typographyFragementToTypographyControlData(useTypography((_a = value == null ? void 0 : value.id) != null ? _a : null));
+  const source = (_b = typography2 == null ? void 0 : typography2.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(typography2 == null ? void 0 : typography2.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 = state_breakpoints.findBreakpointOverride(breakpoints, enhancedSource, deviceId)) == null ? void 0 : _a2.value;
+    const deviceOverride = (_b2 = state_breakpoints.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 reactPage.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;
+  }, state_breakpoints.shallowMergeFallbacks));
+}
+function useTypographyValue(data) {
+  const enhancedTypography = useEnhancedTypography(data);
+  return useTypographyClassName(enhancedTypography);
+}
 function ControlValue({
   data,
   definition,
@@ -3419,31 +3523,31 @@ function ControlValue({
   control
 }) {
   switch (definition.type) {
-    case textInput.CheckboxControlType:
+    case typography.CheckboxControlType:
       return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
         hook: useCheckboxControlValue,
         parameters: [data, definition],
         children: (value) => children(value)
       }, definition.type);
-    case textInput.NumberControlType:
+    case typography.NumberControlType:
       return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
         hook: useNumber,
         parameters: [data, definition],
         children: (value) => children(value)
       }, definition.type);
-    case textInput.TextInputControlType:
+    case typography.TextInputControlType:
       return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
         hook: useTextInputValue,
         parameters: [data, definition],
         children: (value) => children(value)
       }, definition.type);
-    case textInput.TextAreaControlType:
+    case typography.TextAreaControlType:
       return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
         hook: useTextAreaValue,
         parameters: [data, definition],
         children: (value) => children(value)
       }, definition.type);
-    case textInput.SelectControlType:
+    case typography.SelectControlType:
       return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
         hook: useSelectControlValue,
         parameters: [data, definition],
@@ -3455,7 +3559,7 @@ function ControlValue({
         parameters: [data, definition],
         children: (value) => children(value)
       }, definition.type);
-    case textInput.IconRadioGroupControlType:
+    case typography.IconRadioGroupControlType:
       return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
         hook: useIconRadioGroupValue,
         parameters: [data, definition],
@@ -3524,6 +3628,12 @@ function ControlValue({
         parameters: [data, definition, control],
         children: (value) => children(value)
       }, definition.type);
+    case typography.TypographyControlType:
+      return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
+        hook: useTypographyValue,
+        parameters: [data],
+        children: (value) => children(value)
+      }, definition.type);
     default:
       return children(data);
   }
@@ -3565,19 +3675,20 @@ function PropsValue({
   return Object.entries(propControllerDescriptorsRef.current).reduceRight((renderFn, [propName, descriptor]) => (propsValue) => {
     var _a2, _b, _c, _d;
     switch (descriptor.type) {
-      case textInput.CheckboxControlType:
-      case textInput.NumberControlType:
-      case textInput.TextInputControlType:
-      case textInput.TextAreaControlType:
-      case textInput.SelectControlType:
+      case typography.CheckboxControlType:
+      case typography.NumberControlType:
+      case typography.TextInputControlType:
+      case typography.TextAreaControlType:
+      case typography.SelectControlType:
       case reactPage.ColorControlType:
-      case textInput.IconRadioGroupControlType:
+      case typography.IconRadioGroupControlType:
       case reactPage.ImageControlType:
       case combobox.ComboboxControlType:
       case reactPage.ShapeControlType:
       case reactPage.ListControlType:
       case reactPage.LinkControlType:
       case reactPage.StyleV2ControlType:
+      case typography.TypographyControlType:
         return /* @__PURE__ */ jsxRuntime.jsx(ControlValue, {
           definition: descriptor,
           data: props[propName],
@@ -4114,6 +4225,7 @@ exports.useBoxShadow = useBoxShadow;
 exports.useBreakpoints = useBreakpoints;
 exports.useBuilderEditMode = useBuilderEditMode;
 exports.useElementId = useElementId;
+exports.useEnhancedTypography = useEnhancedTypography;
 exports.useFile = useFile;
 exports.useFiles = useFiles;
 exports.useFormContext = useFormContext;
@@ -4129,5 +4241,5 @@ exports.useResponsiveTextStyle = useResponsiveTextStyle;
 exports.useResponsiveWidth = useResponsiveWidth;
 exports.useSwatches = useSwatches;
 exports.useTable = useTable;
-exports.useTypography = useTypography;
+exports.useTypographyClassName = useTypographyClassName;
 //# sourceMappingURL=index.cjs.js.map