@makeswift/runtime 0.21.3 → 0.22.0

package/dist/esm/runtimes/react/controls/style.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/controls/style.ts"],"sourcesContent":["import { CSSObject } from '@emotion/css'\nimport { useEffect, useId } from 'react'\n\nimport {\n  Style,\n  StyleDefinition,\n  StyleControl,\n  type DataType,\n  type FontSizePropertyData,\n  type WidthPropertyData,\n} from '@makeswift/controls'\n\nimport { useBorder, BorderSide } from '../../../components/hooks'\nimport { colorToString } from '../../../components/utils/colorToString'\nimport { useResponsiveStyle } from '../../../components/utils/responsive-style'\n\nimport { useStyle } from '../use-style'\nimport { BorderRadiusLonghandPropertyData } from '../../../css/border-radius'\nimport { lengthPercentageDataToString } from '../../../css/length-percentage'\nimport { marginPropertyDataToStyle } from '../../../css/margin'\nimport { paddingPropertyDataToStyle } from '../../../css/padding'\nimport { BoxModel, getBox } from '../../../box-model'\nimport deepEqual from '../../../utils/deepEqual'\n\nconst defaultMargin = {\n  marginTop: 0,\n  marginRight: 'auto',\n  marginBottom: 0,\n  marginLeft: 'auto',\n}\n\nconst defaultPadding = {\n  paddingTop: 0,\n  paddingRight: 0,\n  paddingBottom: 0,\n  paddingLeft: 0,\n}\n\nfunction useStyleControlCssObject(\n  style: DataType<StyleDefinition> | undefined,\n  controlDefinition: StyleDefinition,\n): CSSObject {\n  const { properties } = controlDefinition.config\n\n  return {\n    ...(properties.includes(Style.Width) && {\n      maxWidth: '100%',\n    }),\n    ...useResponsiveStyle(\n      [\n        style?.width,\n        style?.margin,\n        style?.padding,\n        useBorder(style?.border),\n        style?.borderRadius,\n        style?.textStyle,\n      ] as const,\n      ([width, margin, padding, border, borderRadius, textStyle]) => ({\n        ...(properties.includes(Style.Width) && {\n          width: widthToString(width) ?? '100%',\n        }),\n        ...(properties.includes(Style.Margin) &&\n          marginPropertyDataToStyle(margin ?? defaultMargin, defaultMargin)),\n        ...(properties.includes(Style.Padding) &&\n          paddingPropertyDataToStyle(padding ?? defaultPadding, defaultPadding)),\n        ...(properties.includes(Style.Border) && {\n          borderTop: borderSideToString(border?.borderTop) ?? '0 solid black',\n          borderRight: borderSideToString(border?.borderRight) ?? '0 solid black',\n          borderBottom: borderSideToString(border?.borderBottom) ?? '0 solid black',\n          borderLeft: borderSideToString(border?.borderLeft) ?? '0 solid black',\n        }),\n        ...(properties.includes(Style.BorderRadius) && {\n          borderTopLeftRadius: borderRadiusToString(borderRadius?.borderTopLeftRadius) ?? 0,\n          borderTopRightRadius: borderRadiusToString(borderRadius?.borderTopRightRadius) ?? 0,\n          borderBottomRightRadius: borderRadiusToString(borderRadius?.borderBottomRightRadius) ?? 0,\n          borderBottomLeftRadius: borderRadiusToString(borderRadius?.borderBottomLeftRadius) ?? 0,\n        }),\n        ...(properties.includes(Style.TextStyle) && {\n          ...(textStyle?.fontFamily && { fontFamily: `\"${textStyle.fontFamily}\"` }),\n          ...(textStyle?.letterSpacing && { letterSpacing: textStyle.letterSpacing }),\n          ...(textStyle?.fontSize && { fontSize: fontSizeToString(textStyle.fontSize) }),\n          ...(textStyle?.fontWeight && { fontWeight: textStyle.fontWeight }),\n          textTransform: textStyle?.textTransform ?? [],\n          fontStyle: textStyle?.fontStyle ?? [],\n        }),\n      }),\n    ),\n  }\n\n  function widthToString(widthProperty: WidthPropertyData | undefined): string | null {\n    if (widthProperty == null) return null\n\n    return lengthPercentageDataToString(widthProperty)\n  }\n\n  function borderSideToString(borderSide: BorderSide | null | undefined): string | null {\n    if (borderSide == null) return null\n\n    const { width, color, style } = borderSide\n    return `${width != null ? width : 0}px ${style} ${\n      color != null ? colorToString(color) : 'black'\n    }`\n  }\n\n  function borderRadiusToString(\n    borderRadius: BorderRadiusLonghandPropertyData | null | undefined,\n  ): string | null {\n    if (borderRadius == null) return null\n\n    return lengthPercentageDataToString(borderRadius)\n  }\n\n  function fontSizeToString(fontSize: NonNullable<FontSizePropertyData>) {\n    return `${fontSize.value}${fontSize.unit}`\n  }\n}\n\nexport type StyleControlFormattedValue = string\n\nexport function useFormattedStyle(\n  styleControlData: DataType<StyleDefinition> | undefined,\n  controlDefinition: StyleDefinition,\n  control: StyleControl | null,\n): StyleControlFormattedValue {\n  const style = useStyleControlCssObject(styleControlData, controlDefinition)\n  // We're removing the colons because useId returns a string wrapped with colons, e.g. \":R3d5sm:\",\n  // and we cannot use colons in a class name.\n  const guid = useId().replaceAll(':', '')\n  const styleClassName = useStyle(style)\n  const classNames = `${styleClassName} ${guid}`\n\n  useEffect(() => {\n    let currentBoxModel: BoxModel | null = null\n\n    const handleAnimationFrameRequest = () => {\n      if (control == null) return\n\n      const element = document.querySelector(`.${guid}`)\n\n      const measuredBoxModel = element == null ? null : getBox(element)\n\n      if (!deepEqual(currentBoxModel, measuredBoxModel)) {\n        currentBoxModel = measuredBoxModel\n\n        control.changeBoxModel(currentBoxModel)\n      }\n\n      animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest)\n    }\n\n    let animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest)\n\n    return () => {\n      cancelAnimationFrame(animationFrameHandle)\n\n      control?.changeBoxModel(null)\n    }\n  }, [guid, control])\n\n  return classNames\n}\n"],"mappings":"AACA,SAAS,WAAW,aAAa;AAEjC;AAAA,EACE;AAAA,OAMK;AAEP,SAAS,iBAA6B;AACtC,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B;AAEnC,SAAS,gBAAgB;AAEzB,SAAS,oCAAoC;AAC7C,SAAS,iCAAiC;AAC1C,SAAS,kCAAkC;AAC3C,SAAmB,cAAc;AACjC,OAAO,eAAe;AAEtB,MAAM,gBAAgB;AAAA,EACpB,WAAW;AAAA,EACX,aAAa;AAAA,EACb,cAAc;AAAA,EACd,YAAY;AACd;AAEA,MAAM,iBAAiB;AAAA,EACrB,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,eAAe;AAAA,EACf,aAAa;AACf;AAEA,SAAS,yBACP,OACA,mBACW;AACX,QAAM,EAAE,WAAW,IAAI,kBAAkB;AAEzC,SAAO;AAAA,IACL,GAAI,WAAW,SAAS,MAAM,KAAK,KAAK;AAAA,MACtC,UAAU;AAAA,IACZ;AAAA,IACA,GAAG;AAAA,MACD;AAAA,QACE,OAAO;AAAA,QACP,OAAO;AAAA,QACP,OAAO;AAAA,QACP,UAAU,OAAO,MAAM;AAAA,QACvB,OAAO;AAAA,QACP,OAAO;AAAA,MACT;AAAA,MACA,CAAC,CAAC,OAAO,QAAQ,SAAS,QAAQ,cAAc,SAAS,OAAO;AAAA,QAC9D,GAAI,WAAW,SAAS,MAAM,KAAK,KAAK;AAAA,UACtC,OAAO,cAAc,KAAK,KAAK;AAAA,QACjC;AAAA,QACA,GAAI,WAAW,SAAS,MAAM,MAAM,KAClC,0BAA0B,UAAU,eAAe,aAAa;AAAA,QAClE,GAAI,WAAW,SAAS,MAAM,OAAO,KACnC,2BAA2B,WAAW,gBAAgB,cAAc;AAAA,QACtE,GAAI,WAAW,SAAS,MAAM,MAAM,KAAK;AAAA,UACvC,WAAW,mBAAmB,QAAQ,SAAS,KAAK;AAAA,UACpD,aAAa,mBAAmB,QAAQ,WAAW,KAAK;AAAA,UACxD,cAAc,mBAAmB,QAAQ,YAAY,KAAK;AAAA,UAC1D,YAAY,mBAAmB,QAAQ,UAAU,KAAK;AAAA,QACxD;AAAA,QACA,GAAI,WAAW,SAAS,MAAM,YAAY,KAAK;AAAA,UAC7C,qBAAqB,qBAAqB,cAAc,mBAAmB,KAAK;AAAA,UAChF,sBAAsB,qBAAqB,cAAc,oBAAoB,KAAK;AAAA,UAClF,yBAAyB,qBAAqB,cAAc,uBAAuB,KAAK;AAAA,UACxF,wBAAwB,qBAAqB,cAAc,sBAAsB,KAAK;AAAA,QACxF;AAAA,QACA,GAAI,WAAW,SAAS,MAAM,SAAS,KAAK;AAAA,UAC1C,GAAI,WAAW,cAAc,EAAE,YAAY,IAAI,UAAU,UAAU,IAAI;AAAA,UACvE,GAAI,WAAW,iBAAiB,EAAE,eAAe,UAAU,cAAc;AAAA,UACzE,GAAI,WAAW,YAAY,EAAE,UAAU,iBAAiB,UAAU,QAAQ,EAAE;AAAA,UAC5E,GAAI,WAAW,cAAc,EAAE,YAAY,UAAU,WAAW;AAAA,UAChE,eAAe,WAAW,iBAAiB,CAAC;AAAA,UAC5C,WAAW,WAAW,aAAa,CAAC;AAAA,QACtC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,WAAS,cAAc,eAA6D;AAClF,QAAI,iBAAiB;AAAM,aAAO;AAElC,WAAO,6BAA6B,aAAa;AAAA,EACnD;AAEA,WAAS,mBAAmB,YAA0D;AACpF,QAAI,cAAc;AAAM,aAAO;AAE/B,UAAM,EAAE,OAAO,OAAO,OAAAA,OAAM,IAAI;AAChC,WAAO,GAAG,SAAS,OAAO,QAAQ,CAAC,MAAMA,MAAK,IAC5C,SAAS,OAAO,cAAc,KAAK,IAAI,OACzC;AAAA,EACF;AAEA,WAAS,qBACP,cACe;AACf,QAAI,gBAAgB;AAAM,aAAO;AAEjC,WAAO,6BAA6B,YAAY;AAAA,EAClD;AAEA,WAAS,iBAAiB,UAA6C;AACrE,WAAO,GAAG,SAAS,KAAK,GAAG,SAAS,IAAI;AAAA,EAC1C;AACF;AAIO,SAAS,kBACd,kBACA,mBACA,SAC4B;AAC5B,QAAM,QAAQ,yBAAyB,kBAAkB,iBAAiB;AAG1E,QAAM,OAAO,MAAM,EAAE,WAAW,KAAK,EAAE;AACvC,QAAM,iBAAiB,SAAS,KAAK;AACrC,QAAM,aAAa,GAAG,cAAc,IAAI,IAAI;AAE5C,YAAU,MAAM;AACd,QAAI,kBAAmC;AAEvC,UAAM,8BAA8B,MAAM;AACxC,UAAI,WAAW;AAAM;AAErB,YAAM,UAAU,SAAS,cAAc,IAAI,IAAI,EAAE;AAEjD,YAAM,mBAAmB,WAAW,OAAO,OAAO,OAAO,OAAO;AAEhE,UAAI,CAAC,UAAU,iBAAiB,gBAAgB,GAAG;AACjD,0BAAkB;AAElB,gBAAQ,eAAe,eAAe;AAAA,MACxC;AAEA,6BAAuB,sBAAsB,2BAA2B;AAAA,IAC1E;AAEA,QAAI,uBAAuB,sBAAsB,2BAA2B;AAE5E,WAAO,MAAM;AACX,2BAAqB,oBAAoB;AAEzC,eAAS,eAAe,IAAI;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,MAAM,OAAO,CAAC;AAElB,SAAO;AACT;","names":["style"]}
+{"version":3,"sources":["../../../../../src/runtimes/react/controls/style.ts"],"sourcesContent":["import { CSSObject } from '@emotion/css'\nimport {\n  Style,\n  type StyleProperty,\n  type ResolvedBorderSideData,\n  type FontSizePropertyData,\n  type WidthPropertyData,\n  type ResolvedStyleData,\n} from '@makeswift/controls'\n\nimport { colorToString } from '../../../components/utils/colorToString'\nimport { responsiveStyle } from '../../../components/utils/responsive-style'\n\nimport { BorderRadiusLonghandPropertyData } from '../../../css/border-radius'\nimport { lengthPercentageDataToString } from '../../../css/length-percentage'\nimport { marginPropertyDataToStyle } from '../../../css/margin'\nimport { paddingPropertyDataToStyle } from '../../../css/padding'\nimport { Breakpoints } from '../../../state/modules/breakpoints'\n\nconst defaultMargin = {\n  marginTop: 0,\n  marginRight: 'auto',\n  marginBottom: 0,\n  marginLeft: 'auto',\n}\n\nconst defaultPadding = {\n  paddingTop: 0,\n  paddingRight: 0,\n  paddingBottom: 0,\n  paddingLeft: 0,\n}\n\nexport function styleV1Css(\n  breakpoints: Breakpoints,\n  style: ResolvedStyleData | undefined,\n  properties: StyleProperty[],\n): CSSObject {\n  return {\n    ...(properties.includes(Style.Width) && {\n      maxWidth: '100%',\n    }),\n    ...responsiveStyle(\n      breakpoints,\n      [\n        style?.width,\n        style?.margin,\n        style?.padding,\n        style?.border,\n        style?.borderRadius,\n        style?.textStyle,\n      ] as const,\n      ([width, margin, padding, border, borderRadius, textStyle]) => ({\n        ...(properties.includes(Style.Width) && {\n          width: widthToString(width) ?? '100%',\n        }),\n        ...(properties.includes(Style.Margin) &&\n          marginPropertyDataToStyle(margin ?? defaultMargin, defaultMargin)),\n        ...(properties.includes(Style.Padding) &&\n          paddingPropertyDataToStyle(padding ?? defaultPadding, defaultPadding)),\n        ...(properties.includes(Style.Border) && {\n          borderTop: borderSideToString(border?.borderTop) ?? '0 solid black',\n          borderRight: borderSideToString(border?.borderRight) ?? '0 solid black',\n          borderBottom: borderSideToString(border?.borderBottom) ?? '0 solid black',\n          borderLeft: borderSideToString(border?.borderLeft) ?? '0 solid black',\n        }),\n        ...(properties.includes(Style.BorderRadius) && {\n          borderTopLeftRadius: borderRadiusToString(borderRadius?.borderTopLeftRadius) ?? 0,\n          borderTopRightRadius: borderRadiusToString(borderRadius?.borderTopRightRadius) ?? 0,\n          borderBottomRightRadius: borderRadiusToString(borderRadius?.borderBottomRightRadius) ?? 0,\n          borderBottomLeftRadius: borderRadiusToString(borderRadius?.borderBottomLeftRadius) ?? 0,\n        }),\n        ...(properties.includes(Style.TextStyle) && {\n          ...(textStyle?.fontFamily && { fontFamily: `\"${textStyle.fontFamily}\"` }),\n          ...(textStyle?.letterSpacing && { letterSpacing: textStyle.letterSpacing }),\n          ...(textStyle?.fontSize && { fontSize: fontSizeToString(textStyle.fontSize) }),\n          ...(textStyle?.fontWeight && { fontWeight: textStyle.fontWeight }),\n          textTransform: textStyle?.textTransform ?? [],\n          fontStyle: textStyle?.fontStyle ?? [],\n        }),\n      }),\n    ),\n  }\n\n  function widthToString(widthProperty: WidthPropertyData | undefined): string | null {\n    if (widthProperty == null) return null\n\n    return lengthPercentageDataToString(widthProperty)\n  }\n\n  function borderSideToString(\n    borderSide: ResolvedBorderSideData | null | undefined,\n  ): string | null {\n    if (borderSide == null) return null\n\n    const { width, color, style } = borderSide\n    return `${width != null ? width : 0}px ${style} ${\n      color != null ? colorToString(color) : 'black'\n    }`\n  }\n\n  function borderRadiusToString(\n    borderRadius: BorderRadiusLonghandPropertyData | null | undefined,\n  ): string | null {\n    if (borderRadius == null) return null\n\n    return lengthPercentageDataToString(borderRadius)\n  }\n\n  function fontSizeToString(fontSize: NonNullable<FontSizePropertyData>) {\n    return `${fontSize.value}${fontSize.unit}`\n  }\n}\n"],"mappings":"AACA;AAAA,EACE;AAAA,OAMK;AAEP,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAGhC,SAAS,oCAAoC;AAC7C,SAAS,iCAAiC;AAC1C,SAAS,kCAAkC;AAG3C,MAAM,gBAAgB;AAAA,EACpB,WAAW;AAAA,EACX,aAAa;AAAA,EACb,cAAc;AAAA,EACd,YAAY;AACd;AAEA,MAAM,iBAAiB;AAAA,EACrB,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,eAAe;AAAA,EACf,aAAa;AACf;AAEO,SAAS,WACd,aACA,OACA,YACW;AACX,SAAO;AAAA,IACL,GAAI,WAAW,SAAS,MAAM,KAAK,KAAK;AAAA,MACtC,UAAU;AAAA,IACZ;AAAA,IACA,GAAG;AAAA,MACD;AAAA,MACA;AAAA,QACE,OAAO;AAAA,QACP,OAAO;AAAA,QACP,OAAO;AAAA,QACP,OAAO;AAAA,QACP,OAAO;AAAA,QACP,OAAO;AAAA,MACT;AAAA,MACA,CAAC,CAAC,OAAO,QAAQ,SAAS,QAAQ,cAAc,SAAS,OAAO;AAAA,QAC9D,GAAI,WAAW,SAAS,MAAM,KAAK,KAAK;AAAA,UACtC,OAAO,cAAc,KAAK,KAAK;AAAA,QACjC;AAAA,QACA,GAAI,WAAW,SAAS,MAAM,MAAM,KAClC,0BAA0B,UAAU,eAAe,aAAa;AAAA,QAClE,GAAI,WAAW,SAAS,MAAM,OAAO,KACnC,2BAA2B,WAAW,gBAAgB,cAAc;AAAA,QACtE,GAAI,WAAW,SAAS,MAAM,MAAM,KAAK;AAAA,UACvC,WAAW,mBAAmB,QAAQ,SAAS,KAAK;AAAA,UACpD,aAAa,mBAAmB,QAAQ,WAAW,KAAK;AAAA,UACxD,cAAc,mBAAmB,QAAQ,YAAY,KAAK;AAAA,UAC1D,YAAY,mBAAmB,QAAQ,UAAU,KAAK;AAAA,QACxD;AAAA,QACA,GAAI,WAAW,SAAS,MAAM,YAAY,KAAK;AAAA,UAC7C,qBAAqB,qBAAqB,cAAc,mBAAmB,KAAK;AAAA,UAChF,sBAAsB,qBAAqB,cAAc,oBAAoB,KAAK;AAAA,UAClF,yBAAyB,qBAAqB,cAAc,uBAAuB,KAAK;AAAA,UACxF,wBAAwB,qBAAqB,cAAc,sBAAsB,KAAK;AAAA,QACxF;AAAA,QACA,GAAI,WAAW,SAAS,MAAM,SAAS,KAAK;AAAA,UAC1C,GAAI,WAAW,cAAc,EAAE,YAAY,IAAI,UAAU,UAAU,IAAI;AAAA,UACvE,GAAI,WAAW,iBAAiB,EAAE,eAAe,UAAU,cAAc;AAAA,UACzE,GAAI,WAAW,YAAY,EAAE,UAAU,iBAAiB,UAAU,QAAQ,EAAE;AAAA,UAC5E,GAAI,WAAW,cAAc,EAAE,YAAY,UAAU,WAAW;AAAA,UAChE,eAAe,WAAW,iBAAiB,CAAC;AAAA,UAC5C,WAAW,WAAW,aAAa,CAAC;AAAA,QACtC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,WAAS,cAAc,eAA6D;AAClF,QAAI,iBAAiB;AAAM,aAAO;AAElC,WAAO,6BAA6B,aAAa;AAAA,EACnD;AAEA,WAAS,mBACP,YACe;AACf,QAAI,cAAc;AAAM,aAAO;AAE/B,UAAM,EAAE,OAAO,OAAO,OAAAA,OAAM,IAAI;AAChC,WAAO,GAAG,SAAS,OAAO,QAAQ,CAAC,MAAMA,MAAK,IAC5C,SAAS,OAAO,cAAc,KAAK,IAAI,OACzC;AAAA,EACF;AAEA,WAAS,qBACP,cACe;AACf,QAAI,gBAAgB;AAAM,aAAO;AAEjC,WAAO,6BAA6B,YAAY;AAAA,EAClD;AAEA,WAAS,iBAAiB,UAA6C;AACrE,WAAO,GAAG,SAAS,KAAK,GAAG,SAAS,IAAI;AAAA,EAC1C;AACF;","names":["style"]}

package/dist/esm/runtimes/react/controls/typography.js

@@ -1,16 +1,19 @@
+import {
+  findBreakpointOverride,
+  shallowMergeFallbacks
+} from "@makeswift/controls";
 import { useSwatches, useTypography } from "../hooks/makeswift-api";
 import { colorToString } from "../../../components/utils/colorToString";
-import { useResponsiveStyle } from "../../../components/utils/responsive-style";
-import { findBreakpointOverride, shallowMergeFallbacks } from "../../../state/modules/breakpoints";
+import { responsiveStyle } from "../../../components/utils/responsive-style";
 import { isNonNullable } from "../../../utils/isNonNullable";
 import { useStyle } from "../use-style";
 import { useBreakpoints } from "../hooks/use-breakpoints";
-function typographyFragementToTypographyControlData(typography) {
-  if (typography == null)
+function typographyFragementToTypographyControlData(fragment) {
+  if (fragment == null)
     return void 0;
   return {
-    id: typography.id,
-    style: typography.style.map(({ deviceId, value }) => ({
+    id: fragment.id,
+    style: fragment.style.map(({ deviceId, value }) => ({
       deviceId,
       value: {
         fontFamily: value.fontFamily ?? void 0,
@@ -52,13 +55,13 @@ const withColor = (swatches) => (deviceRawTypographyValue) => {
   };
 };
 const getDeviceId = ({ deviceId }) => deviceId;
-function useEnhancedTypography(value) {
-  const typography = typographyFragementToTypographyControlData(useTypography(value?.id ?? null));
+function useEnhancedTypography(data) {
+  const typography = typographyFragementToTypographyControlData(useTypography(data?.id ?? null));
   const source = typography?.style ?? [];
-  const override = value?.style ?? [];
+  const override = data?.style ?? [];
   const breakpoints = useBreakpoints();
   const swatchIds = [
-    ...getTypographyStyleSwatchIds(value?.style),
+    ...getTypographyStyleSwatchIds(data?.style),
     ...getTypographyStyleSwatchIds(typography?.style)
   ];
   const swatches = useSwatches(swatchIds).filter(isNonNullable);
@@ -94,50 +97,48 @@ function useEnhancedTypography(value) {
     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 typographyToCssObject(value) {
+  let styles = {};
+  if (value.color != null)
+    styles.color = colorToString(value.color);
+  if (value.fontFamily != null)
+    styles.fontFamily = value.fontFamily;
+  if (value.fontSize != null && value.fontSize.value != null && value.fontSize.unit != null)
+    styles.fontSize = `${value.fontSize.value}${value.fontSize.unit}`;
+  if (value.fontWeight != null)
+    styles.fontWeight = value.fontWeight;
+  if (value.lineHeight != null)
+    styles.lineHeight = value.lineHeight;
+  if (value.letterSpacing != null)
+    styles.letterSpacing = `${value.letterSpacing / 10}em`;
+  if (value.uppercase != null)
+    styles.textTransform = value.uppercase === true ? "uppercase" : "initial";
+  if (value.underline != null || value.strikethrough != null)
+    styles.textDecoration = [
+      Boolean(value.underline) && "underline",
+      Boolean(value.strikethrough) && "line-through"
+    ].filter(Boolean).join(" ");
+  if (value.italic != null)
+    styles.fontStyle = value.italic === true ? "italic" : "initial";
+  return styles;
+}
+function typographyCss(breakpoints, style) {
+  return responsiveStyle(
+    breakpoints,
+    [style],
+    ([value]) => value !== void 0 ? typographyToCssObject(value) : {},
+    shallowMergeFallbacks
   );
 }
-function useTypographyValue(data) {
-  const enhancedTypography = useEnhancedTypography(data);
-  return useTypographyClassName(enhancedTypography);
+function useTypographyClassName(value) {
+  const breakpoints = useBreakpoints();
+  return useStyle(typographyCss(breakpoints, value));
 }
 export {
   useEnhancedTypography as default,
   getTypographyStyleSwatchIds,
+  typographyCss,
   typographyFragementToTypographyControlData,
-  useTypographyClassName,
-  useTypographyValue
+  useTypographyClassName
 };
 //# sourceMappingURL=typography.js.map

package/dist/esm/runtimes/react/controls/typography.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/controls/typography.ts"],"sourcesContent":["import { CSSObject } from '@emotion/serialize'\nimport { unstable_TypographyDefinition, type DataType } from '@makeswift/controls'\n\nimport { useSwatches, useTypography } from '../hooks/makeswift-api'\nimport { Typography, Swatch } from '../../../api'\nimport { colorToString } from '../../../components/utils/colorToString'\nimport { useResponsiveStyle } from '../../../components/utils/responsive-style'\nimport { ColorValue } from '../../../components/utils/types'\nimport { DeviceOverride, ResponsiveValue } from '../../../prop-controllers'\nimport { findBreakpointOverride, shallowMergeFallbacks } from '../../../state/modules/breakpoints'\nimport { isNonNullable } from '../../../utils/isNonNullable'\nimport { useStyle } from '../use-style'\nimport { useBreakpoints } from '../hooks/use-breakpoints'\n\nexport function typographyFragementToTypographyControlData(\n  typography: Typography | null,\n): DataType<unstable_TypographyDefinition> | undefined {\n  if (typography == null) return undefined\n  return {\n    id: typography.id,\n    style: typography.style.map(({ deviceId, value }) => ({\n      deviceId,\n      value: {\n        fontFamily: value.fontFamily ?? undefined,\n        lineHeight: value.lineHeight ?? undefined,\n        letterSpacing: value.letterSpacing ?? undefined,\n        fontWeight: value.fontWeight ?? undefined,\n        textAlign: value.textAlign ?? undefined,\n        uppercase: value.uppercase ?? undefined,\n        underline: value.underline ?? undefined,\n        strikethrough: value.strikethrough ?? undefined,\n        italic: value.italic ?? undefined,\n        fontSize: value.fontSize ?? undefined,\n        color: value.color ?? undefined,\n      },\n    })),\n  }\n}\n\ntype EnhancedColor = {\n  color?: ColorValue\n}\n\nexport type TypographyControlDataValue = Exclude<\n  DataType<unstable_TypographyDefinition>,\n  undefined\n>['style'][number]['value']\n\ntype EnhancedTypographyValue = Omit<TypographyControlDataValue, keyof EnhancedColor> & EnhancedColor\n\nexport type EnhancedTypography = Array<DeviceOverride<EnhancedTypographyValue>>\n\nexport function getTypographyStyleSwatchIds(\n  style:\n    | Exclude<DataType<unstable_TypographyDefinition>, undefined>['style']\n    | Typography['style']\n    | null\n    | undefined,\n): string[] {\n  return (\n    style\n      ?.map(override => override.value)\n      .flatMap(typographyStyle => typographyStyle.color?.swatchId)\n      .filter(isNonNullable) ?? []\n  )\n}\n\nconst withColor =\n  (swatches: Swatch[]) =>\n  (\n    deviceRawTypographyValue: DeviceOverride<TypographyControlDataValue>,\n  ): DeviceOverride<EnhancedTypographyValue> => {\n    const { value, deviceId } = deviceRawTypographyValue\n\n    if (value.color == null) {\n      const { color, ...nextValue } = value\n      return {\n        deviceId,\n        value: nextValue,\n      }\n    }\n    return {\n      deviceId,\n      value: {\n        ...value,\n        color: {\n          swatch: swatches.find(s => s && s.id === value.color?.swatchId),\n          alpha: value.color?.alpha ?? undefined,\n        },\n      },\n    }\n  }\n\nconst getDeviceId = ({ deviceId }: DeviceOverride<unknown>) => deviceId\n\n/**\n * `enhanced` here just means typography ids have been replaced with the related entity.\n */\nexport default function useEnhancedTypography(\n  value?: DataType<unstable_TypographyDefinition> | null,\n): EnhancedTypography {\n  const typography = typographyFragementToTypographyControlData(useTypography(value?.id ?? null))\n  const source = typography?.style ?? []\n  const override = value?.style ?? []\n  const breakpoints = useBreakpoints()\n\n  const swatchIds = [\n    ...getTypographyStyleSwatchIds(value?.style),\n    ...getTypographyStyleSwatchIds(typography?.style),\n  ]\n  const swatches = useSwatches(swatchIds).filter(isNonNullable)\n\n  const enhancedSource = source.map(withColor(swatches))\n  const enhancedOverride = override.map(withColor(swatches))\n\n  const devices = [\n    ...new Set(enhancedSource.map(getDeviceId).concat(enhancedOverride.map(getDeviceId))),\n  ]\n\n  return devices\n    .map(deviceId => {\n      const deviceSource = findBreakpointOverride(breakpoints, enhancedSource, deviceId)?.value\n      const deviceOverride = findBreakpointOverride(\n        breakpoints,\n        enhancedOverride,\n        deviceId,\n        v => v,\n      )?.value\n\n      if (deviceSource && deviceOverride) {\n        return {\n          deviceId,\n          value: { ...deviceSource, ...deviceOverride },\n        }\n      } else if (deviceOverride) {\n        return {\n          deviceId,\n          value: deviceOverride,\n        }\n      } else if (deviceSource) {\n        return {\n          deviceId,\n          value: deviceSource,\n        }\n      }\n      return null\n    })\n    .filter(isNonNullable)\n}\n\nexport function useTypographyClassName(value: EnhancedTypography): string {\n  return useStyle(\n    useResponsiveStyle<\n      EnhancedTypographyValue,\n      [ResponsiveValue<EnhancedTypographyValue> | null | undefined]\n    >(\n      [value],\n      ([value]) => {\n        if (value === undefined) return {}\n\n        let styles: CSSObject = {}\n        if (value.color != null) styles.color = colorToString(value.color)\n        if (value.fontFamily != null) styles.fontFamily = value.fontFamily\n        if (value.fontSize != null && value.fontSize.value != null && value.fontSize.unit != null)\n          styles.fontSize = `${value.fontSize.value}${value.fontSize.unit}`\n        if (value.fontWeight != null) styles.fontWeight = value.fontWeight\n        if (value.lineHeight != null) styles.lineHeight = value.lineHeight\n        if (value.letterSpacing != null) styles.letterSpacing = `${value.letterSpacing / 10}em`\n        if (value.uppercase != null)\n          styles.textTransform = value.uppercase === true ? 'uppercase' : 'initial'\n        if (value.underline != null || value.strikethrough != null)\n          styles.textDecoration = [\n            Boolean(value.underline) && 'underline',\n            Boolean(value.strikethrough) && 'line-through',\n          ]\n            .filter(Boolean)\n            .join(' ')\n        if (value.italic != null) styles.fontStyle = value.italic === true ? 'italic' : 'initial'\n\n        return styles\n      },\n      shallowMergeFallbacks,\n    ),\n  )\n}\n\nexport type TypographyControlValue = string\n\nexport function useTypographyValue(\n  data: DataType<unstable_TypographyDefinition> | undefined,\n): TypographyControlValue {\n  // for each breakpoint fetch related resources and merge its value with its override\n  const enhancedTypography = useEnhancedTypography(data)\n\n  // for each breakpoint shallow merge back up through the breakpoints and create a className\n  return useTypographyClassName(enhancedTypography)\n}\n"],"mappings":"AAGA,SAAS,aAAa,qBAAqB;AAE3C,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B;AAGnC,SAAS,wBAAwB,6BAA6B;AAC9D,SAAS,qBAAqB;AAC9B,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAExB,SAAS,2CACd,YACqD;AACrD,MAAI,cAAc;AAAM,WAAO;AAC/B,SAAO;AAAA,IACL,IAAI,WAAW;AAAA,IACf,OAAO,WAAW,MAAM,IAAI,CAAC,EAAE,UAAU,MAAM,OAAO;AAAA,MACpD;AAAA,MACA,OAAO;AAAA,QACL,YAAY,MAAM,cAAc;AAAA,QAChC,YAAY,MAAM,cAAc;AAAA,QAChC,eAAe,MAAM,iBAAiB;AAAA,QACtC,YAAY,MAAM,cAAc;AAAA,QAChC,WAAW,MAAM,aAAa;AAAA,QAC9B,WAAW,MAAM,aAAa;AAAA,QAC9B,WAAW,MAAM,aAAa;AAAA,QAC9B,eAAe,MAAM,iBAAiB;AAAA,QACtC,QAAQ,MAAM,UAAU;AAAA,QACxB,UAAU,MAAM,YAAY;AAAA,QAC5B,OAAO,MAAM,SAAS;AAAA,MACxB;AAAA,IACF,EAAE;AAAA,EACJ;AACF;AAeO,SAAS,4BACd,OAKU;AACV,SACE,OACI,IAAI,cAAY,SAAS,KAAK,EAC/B,QAAQ,qBAAmB,gBAAgB,OAAO,QAAQ,EAC1D,OAAO,aAAa,KAAK,CAAC;AAEjC;AAEA,MAAM,YACJ,CAAC,aACD,CACE,6BAC4C;AAC5C,QAAM,EAAE,OAAO,SAAS,IAAI;AAE5B,MAAI,MAAM,SAAS,MAAM;AACvB,UAAM,EAAE,OAAO,GAAG,UAAU,IAAI;AAChC,WAAO;AAAA,MACL;AAAA,MACA,OAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO;AAAA,IACL;AAAA,IACA,OAAO;AAAA,MACL,GAAG;AAAA,MACH,OAAO;AAAA,QACL,QAAQ,SAAS,KAAK,OAAK,KAAK,EAAE,OAAO,MAAM,OAAO,QAAQ;AAAA,QAC9D,OAAO,MAAM,OAAO,SAAS;AAAA,MAC/B;AAAA,IACF;AAAA,EACF;AACF;AAEF,MAAM,cAAc,CAAC,EAAE,SAAS,MAA+B;AAKhD,SAAR,sBACL,OACoB;AACpB,QAAM,aAAa,2CAA2C,cAAc,OAAO,MAAM,IAAI,CAAC;AAC9F,QAAM,SAAS,YAAY,SAAS,CAAC;AACrC,QAAM,WAAW,OAAO,SAAS,CAAC;AAClC,QAAM,cAAc,eAAe;AAEnC,QAAM,YAAY;AAAA,IAChB,GAAG,4BAA4B,OAAO,KAAK;AAAA,IAC3C,GAAG,4BAA4B,YAAY,KAAK;AAAA,EAClD;AACA,QAAM,WAAW,YAAY,SAAS,EAAE,OAAO,aAAa;AAE5D,QAAM,iBAAiB,OAAO,IAAI,UAAU,QAAQ,CAAC;AACrD,QAAM,mBAAmB,SAAS,IAAI,UAAU,QAAQ,CAAC;AAEzD,QAAM,UAAU;AAAA,IACd,GAAG,IAAI,IAAI,eAAe,IAAI,WAAW,EAAE,OAAO,iBAAiB,IAAI,WAAW,CAAC,CAAC;AAAA,EACtF;AAEA,SAAO,QACJ,IAAI,cAAY;AACf,UAAM,eAAe,uBAAuB,aAAa,gBAAgB,QAAQ,GAAG;AACpF,UAAM,iBAAiB;AAAA,MACrB;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAK;AAAA,IACP,GAAG;AAEH,QAAI,gBAAgB,gBAAgB;AAClC,aAAO;AAAA,QACL;AAAA,QACA,OAAO,EAAE,GAAG,cAAc,GAAG,eAAe;AAAA,MAC9C;AAAA,IACF,WAAW,gBAAgB;AACzB,aAAO;AAAA,QACL;AAAA,QACA,OAAO;AAAA,MACT;AAAA,IACF,WAAW,cAAc;AACvB,aAAO;AAAA,QACL;AAAA,QACA,OAAO;AAAA,MACT;AAAA,IACF;AACA,WAAO;AAAA,EACT,CAAC,EACA,OAAO,aAAa;AACzB;AAEO,SAAS,uBAAuB,OAAmC;AACxE,SAAO;AAAA,IACL;AAAA,MAIE,CAAC,KAAK;AAAA,MACN,CAAC,CAACA,MAAK,MAAM;AACX,YAAIA,WAAU;AAAW,iBAAO,CAAC;AAEjC,YAAI,SAAoB,CAAC;AACzB,YAAIA,OAAM,SAAS;AAAM,iBAAO,QAAQ,cAAcA,OAAM,KAAK;AACjE,YAAIA,OAAM,cAAc;AAAM,iBAAO,aAAaA,OAAM;AACxD,YAAIA,OAAM,YAAY,QAAQA,OAAM,SAAS,SAAS,QAAQA,OAAM,SAAS,QAAQ;AACnF,iBAAO,WAAW,GAAGA,OAAM,SAAS,KAAK,GAAGA,OAAM,SAAS,IAAI;AACjE,YAAIA,OAAM,cAAc;AAAM,iBAAO,aAAaA,OAAM;AACxD,YAAIA,OAAM,cAAc;AAAM,iBAAO,aAAaA,OAAM;AACxD,YAAIA,OAAM,iBAAiB;AAAM,iBAAO,gBAAgB,GAAGA,OAAM,gBAAgB,EAAE;AACnF,YAAIA,OAAM,aAAa;AACrB,iBAAO,gBAAgBA,OAAM,cAAc,OAAO,cAAc;AAClE,YAAIA,OAAM,aAAa,QAAQA,OAAM,iBAAiB;AACpD,iBAAO,iBAAiB;AAAA,YACtB,QAAQA,OAAM,SAAS,KAAK;AAAA,YAC5B,QAAQA,OAAM,aAAa,KAAK;AAAA,UAClC,EACG,OAAO,OAAO,EACd,KAAK,GAAG;AACb,YAAIA,OAAM,UAAU;AAAM,iBAAO,YAAYA,OAAM,WAAW,OAAO,WAAW;AAEhF,eAAO;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;AAIO,SAAS,mBACd,MACwB;AAExB,QAAM,qBAAqB,sBAAsB,IAAI;AAGrD,SAAO,uBAAuB,kBAAkB;AAClD;","names":["value"]}
+{"version":3,"sources":["../../../../../src/runtimes/react/controls/typography.ts"],"sourcesContent":["import { CSSObject } from '@emotion/serialize'\nimport {\n  unstable_TypographyDefinition,\n  findBreakpointOverride,\n  shallowMergeFallbacks,\n  type DataType,\n  type Breakpoints,\n  type DeviceOverride,\n  type ResponsiveValue,\n} from '@makeswift/controls'\n\nimport { useSwatches, useTypography } from '../hooks/makeswift-api'\nimport { Typography, Swatch } from '../../../api'\nimport { colorToString } from '../../../components/utils/colorToString'\nimport { responsiveStyle } from '../../../components/utils/responsive-style'\nimport { ColorValue } from '../../../components/utils/types'\nimport { isNonNullable } from '../../../utils/isNonNullable'\nimport { useStyle } from '../use-style'\nimport { useBreakpoints } from '../hooks/use-breakpoints'\n\nexport function typographyFragementToTypographyControlData(\n  fragment: Typography | null,\n): DataType<unstable_TypographyDefinition> | undefined {\n  if (fragment == null) return undefined\n  return {\n    id: fragment.id,\n    style: fragment.style.map(({ deviceId, value }) => ({\n      deviceId,\n      value: {\n        fontFamily: value.fontFamily ?? undefined,\n        lineHeight: value.lineHeight ?? undefined,\n        letterSpacing: value.letterSpacing ?? undefined,\n        fontWeight: value.fontWeight ?? undefined,\n        textAlign: value.textAlign ?? undefined,\n        uppercase: value.uppercase ?? undefined,\n        underline: value.underline ?? undefined,\n        strikethrough: value.strikethrough ?? undefined,\n        italic: value.italic ?? undefined,\n        fontSize: value.fontSize ?? undefined,\n        color: value.color ?? undefined,\n      },\n    })),\n  }\n}\n\ntype EnhancedColor = {\n  color?: ColorValue\n}\n\nexport type TypographyControlDataValue = Exclude<\n  DataType<unstable_TypographyDefinition>,\n  undefined\n>['style'][number]['value']\n\ntype EnhancedTypographyValue = Omit<TypographyControlDataValue, keyof EnhancedColor> & EnhancedColor\n\nexport type EnhancedTypography = Array<DeviceOverride<EnhancedTypographyValue>>\n\nexport function getTypographyStyleSwatchIds(\n  style:\n    | Exclude<DataType<unstable_TypographyDefinition>, undefined>['style']\n    | Typography['style']\n    | null\n    | undefined,\n): string[] {\n  return (\n    style\n      ?.map(override => override.value)\n      .flatMap(typographyStyle => typographyStyle.color?.swatchId)\n      .filter(isNonNullable) ?? []\n  )\n}\n\nconst withColor =\n  (swatches: Swatch[]) =>\n  (\n    deviceRawTypographyValue: DeviceOverride<TypographyControlDataValue>,\n  ): DeviceOverride<EnhancedTypographyValue> => {\n    const { value, deviceId } = deviceRawTypographyValue\n\n    if (value.color == null) {\n      const { color, ...nextValue } = value\n      return {\n        deviceId,\n        value: nextValue,\n      }\n    }\n    return {\n      deviceId,\n      value: {\n        ...value,\n        color: {\n          swatch: swatches.find(s => s && s.id === value.color?.swatchId),\n          alpha: value.color?.alpha ?? undefined,\n        },\n      },\n    }\n  }\n\nconst getDeviceId = ({ deviceId }: DeviceOverride<unknown>) => deviceId\n\n/**\n * `enhanced` here just means typography ids have been replaced with the related entity.\n */\nexport default function useEnhancedTypography(\n  data?: DataType<unstable_TypographyDefinition> | null,\n): EnhancedTypography {\n  const typography = typographyFragementToTypographyControlData(useTypography(data?.id ?? null))\n  const source = typography?.style ?? []\n  const override = data?.style ?? []\n  const breakpoints = useBreakpoints()\n\n  const swatchIds = [\n    ...getTypographyStyleSwatchIds(data?.style),\n    ...getTypographyStyleSwatchIds(typography?.style),\n  ]\n  const swatches = useSwatches(swatchIds).filter(isNonNullable)\n\n  const enhancedSource = source.map(withColor(swatches))\n  const enhancedOverride = override.map(withColor(swatches))\n\n  const devices = [\n    ...new Set(enhancedSource.map(getDeviceId).concat(enhancedOverride.map(getDeviceId))),\n  ]\n\n  return devices\n    .map(deviceId => {\n      const deviceSource = findBreakpointOverride(breakpoints, enhancedSource, deviceId)?.value\n      const deviceOverride = findBreakpointOverride(\n        breakpoints,\n        enhancedOverride,\n        deviceId,\n        v => v,\n      )?.value\n\n      if (deviceSource && deviceOverride) {\n        return {\n          deviceId,\n          value: { ...deviceSource, ...deviceOverride },\n        }\n      } else if (deviceOverride) {\n        return {\n          deviceId,\n          value: deviceOverride,\n        }\n      } else if (deviceSource) {\n        return {\n          deviceId,\n          value: deviceSource,\n        }\n      }\n      return null\n    })\n    .filter(isNonNullable)\n}\n\nfunction typographyToCssObject(value: EnhancedTypographyValue): CSSObject {\n  let styles: CSSObject = {}\n  if (value.color != null) styles.color = colorToString(value.color)\n  if (value.fontFamily != null) styles.fontFamily = value.fontFamily\n  if (value.fontSize != null && value.fontSize.value != null && value.fontSize.unit != null)\n    styles.fontSize = `${value.fontSize.value}${value.fontSize.unit}`\n  if (value.fontWeight != null) styles.fontWeight = value.fontWeight\n  if (value.lineHeight != null) styles.lineHeight = value.lineHeight\n  if (value.letterSpacing != null) styles.letterSpacing = `${value.letterSpacing / 10}em`\n  if (value.uppercase != null)\n    styles.textTransform = value.uppercase === true ? 'uppercase' : 'initial'\n  if (value.underline != null || value.strikethrough != null)\n    styles.textDecoration = [\n      Boolean(value.underline) && 'underline',\n      Boolean(value.strikethrough) && 'line-through',\n    ]\n      .filter(Boolean)\n      .join(' ')\n  if (value.italic != null) styles.fontStyle = value.italic === true ? 'italic' : 'initial'\n\n  return styles\n}\n\nexport function typographyCss(breakpoints: Breakpoints, style: EnhancedTypography): CSSObject {\n  return responsiveStyle<\n    EnhancedTypographyValue,\n    [ResponsiveValue<EnhancedTypographyValue> | null | undefined]\n  >(\n    breakpoints,\n    [style],\n    ([value]) => (value !== undefined ? typographyToCssObject(value) : {}),\n    shallowMergeFallbacks,\n  )\n}\n\nexport function useTypographyClassName(value: EnhancedTypography): string {\n  const breakpoints = useBreakpoints()\n  return useStyle(typographyCss(breakpoints, value))\n}\n"],"mappings":"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","names":[]}

package/dist/esm/runtimes/react/controls.js

@@ -1,140 +1,25 @@
-import { jsx } from "react/jsx-runtime";
 import { useRef } from "react";
+import { partitionRecord } from "../../utils/partition";
 import * as ReactPage from "../../state/react-page";
-import {
-  CheckboxDefinition,
-  NumberDefinition,
-  RichTextV2Definition,
-  ColorDefinition,
-  ComboboxDefinition,
-  IconRadioGroupDefinition,
-  ImageDefinition,
-  LinkDefinition,
-  ListDefinition,
-  RichTextV1Definition,
-  SelectDefinition,
-  ShapeDefinition,
-  SlotDefinition,
-  StyleDefinition,
-  StyleV2Definition,
-  TextAreaDefinition,
-  TextInputDefinition,
-  unstable_TypographyDefinition
-} from "../../controls";
 import { isLegacyDescriptor } from "../../prop-controllers/descriptors";
-import { useFormattedStyle } from "./controls/style";
-import { ControlValue } from "./controls/control";
-import { useSlot } from "./controls/slot";
-import { useRichText } from "./controls/rich-text/rich-text";
-import { useRichTextV2 } from "./controls/rich-text-v2";
 import { useStore } from "./hooks/use-store";
-import { useDocumentKey } from "./hooks/use-document-key";
-import { useSelector } from "./hooks/use-selector";
-import { RenderHook } from "./components";
 import { resolveLegacyDescriptorProp } from "./legacy-controls";
-function PropsValue({ element, children }) {
+import { useResolvedProps } from "./hooks/use-resolved-props";
+function useControlDefs(elementType) {
   const store = useStore();
-  const propControllerDescriptorsRef = useRef(
-    ReactPage.getComponentPropControllerDescriptors(store.getState(), element.type) ?? {}
+  const all = ReactPage.getComponentPropControllerDescriptors(store.getState(), elementType) ?? {};
+  return useRef(partitionRecord(all, isLegacyDescriptor)).current;
+}
+function ResolveProps({ element, children: renderComponent }) {
+  const [legacyDescriptors, definitions] = useControlDefs(element.type);
+  const resolvedProps = useResolvedProps(definitions, element.props, element.key);
+  const renderFn = Object.entries(legacyDescriptors).reduceRight(
+    (renderFn2, [propName, descriptor]) => (props) => resolveLegacyDescriptorProp(descriptor, propName, element.props[propName], props, renderFn2),
+    renderComponent
   );
-  const props = element.props;
-  const documentKey = useDocumentKey();
-  const propControllers = useSelector((state) => {
-    if (documentKey == null)
-      return null;
-    return ReactPage.getPropControllers(state, documentKey, element.key);
-  });
-  return Object.entries(propControllerDescriptorsRef.current).reduceRight(
-    (renderFn, [propName, descriptor]) => (propsValue) => {
-      if (isLegacyDescriptor(descriptor)) {
-        return resolveLegacyDescriptorProp(
-          descriptor,
-          propName,
-          props[propName],
-          propsValue,
-          renderFn
-        );
-      }
-      switch (descriptor.controlType) {
-        case CheckboxDefinition.type:
-        case NumberDefinition.type:
-        case TextInputDefinition.type:
-        case TextAreaDefinition.type:
-        case SelectDefinition.type:
-        case ColorDefinition.type:
-        case IconRadioGroupDefinition.type:
-        case ImageDefinition.type:
-        case ComboboxDefinition.type:
-        case ShapeDefinition.type:
-        case ListDefinition.type:
-        case LinkDefinition.type:
-        case StyleV2Definition.type:
-        case unstable_TypographyDefinition.type:
-          return /* @__PURE__ */ jsx(
-            ControlValue,
-            {
-              definition: descriptor,
-              data: props[propName],
-              control: propControllers?.[propName],
-              children: (value) => renderFn({ ...propsValue, [propName]: value })
-            }
-          );
-        case StyleDefinition.type: {
-          const control = propControllers?.[propName] ?? null;
-          return /* @__PURE__ */ jsx(
-            RenderHook,
-            {
-              hook: useFormattedStyle,
-              parameters: [props[propName], descriptor, control],
-              children: (value) => renderFn({ ...propsValue, [propName]: value })
-            },
-            descriptor.controlType
-          );
-        }
-        case RichTextV1Definition.type: {
-          const control = propControllers?.[propName] ?? null;
-          return /* @__PURE__ */ jsx(
-            RenderHook,
-            {
-              hook: useRichText,
-              parameters: [props[propName], control],
-              children: (value) => renderFn({ ...propsValue, [propName]: value })
-            },
-            descriptor.controlType
-          );
-        }
-        case RichTextV2Definition.type: {
-          const control = propControllers?.[propName] ?? null;
-          return /* @__PURE__ */ jsx(
-            RenderHook,
-            {
-              hook: useRichTextV2,
-              parameters: [props[propName], descriptor, control],
-              children: (value) => renderFn({ ...propsValue, [propName]: value })
-            },
-            descriptor.controlType
-          );
-        }
-        case SlotDefinition.type: {
-          const control = propControllers?.[propName] ?? null;
-          return /* @__PURE__ */ jsx(
-            RenderHook,
-            {
-              hook: useSlot,
-              parameters: [props[propName], control],
-              children: (value) => renderFn({ ...propsValue, [propName]: value })
-            },
-            descriptor.controlType
-          );
-        }
-      }
-      console.error(`Unknown control type: ${descriptor.controlType}`);
-      return renderFn({ ...propsValue, [propName]: props[propName] });
-    },
-    children
-  )({});
+  return renderFn(resolvedProps);
 }
 export {
-  PropsValue
+  ResolveProps
 };
 //# sourceMappingURL=controls.js.map

package/dist/esm/runtimes/react/controls.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/runtimes/react/controls.tsx"],"sourcesContent":["import { useRef } from 'react'\n\nimport * as ReactPage from '../../state/react-page'\n\nimport {\n  CheckboxDefinition,\n  NumberDefinition,\n  RichTextV2Definition,\n  RichTextV2Control,\n  ColorDefinition,\n  ComboboxDefinition,\n  IconRadioGroupDefinition,\n  ImageDefinition,\n  LinkDefinition,\n  ListDefinition,\n  RichTextV1Definition,\n  RichTextV1Control,\n  SelectDefinition,\n  ShapeDefinition,\n  SlotDefinition,\n  SlotControl,\n  StyleDefinition,\n  StyleControl,\n  StyleV2Definition,\n  TextAreaDefinition,\n  TextInputDefinition,\n  unstable_TypographyDefinition,\n} from '../../controls'\n\nimport { isLegacyDescriptor } from '../../prop-controllers/descriptors'\n\nimport { useFormattedStyle } from './controls/style'\nimport { ControlValue } from './controls/control'\nimport { useSlot } from './controls/slot'\nimport { useRichText } from './controls/rich-text/rich-text'\nimport { useRichTextV2 } from './controls/rich-text-v2'\n\nimport { useStore } from './hooks/use-store'\nimport { useDocumentKey } from './hooks/use-document-key'\nimport { useSelector } from './hooks/use-selector'\n\nimport { RenderHook } from './components'\nimport { resolveLegacyDescriptorProp } from './legacy-controls'\n\ntype PropsValueProps = {\n  element: ReactPage.ElementData\n  children(props: Record<string, unknown>): JSX.Element\n}\n\nexport function PropsValue({ element, children }: PropsValueProps): JSX.Element {\n  const store = useStore()\n  const propControllerDescriptorsRef = useRef(\n    ReactPage.getComponentPropControllerDescriptors(store.getState(), element.type) ?? {},\n  )\n  const props = element.props as Record<string, any>\n  const documentKey = useDocumentKey()\n\n  const propControllers = useSelector(state => {\n    if (documentKey == null) return null\n\n    return ReactPage.getPropControllers(state, documentKey, element.key)\n  })\n\n  return Object.entries(propControllerDescriptorsRef.current).reduceRight(\n    (renderFn, [propName, descriptor]) =>\n      propsValue => {\n        if (isLegacyDescriptor(descriptor)) {\n          return resolveLegacyDescriptorProp(\n            descriptor,\n            propName,\n            props[propName],\n            propsValue,\n            renderFn,\n          )\n        }\n\n        switch (descriptor.controlType) {\n          case CheckboxDefinition.type:\n          case NumberDefinition.type:\n          case TextInputDefinition.type:\n          case TextAreaDefinition.type:\n          case SelectDefinition.type:\n          case ColorDefinition.type:\n          case IconRadioGroupDefinition.type:\n          case ImageDefinition.type:\n          case ComboboxDefinition.type:\n          case ShapeDefinition.type:\n          case ListDefinition.type:\n          case LinkDefinition.type:\n          case StyleV2Definition.type:\n          case unstable_TypographyDefinition.type:\n            return (\n              <ControlValue\n                definition={descriptor}\n                data={props[propName]}\n                control={propControllers?.[propName]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </ControlValue>\n            )\n\n          case StyleDefinition.type: {\n            const control = (propControllers?.[propName] ?? null) as StyleControl | null\n\n            return (\n              <RenderHook\n                key={descriptor.controlType}\n                hook={useFormattedStyle}\n                parameters={[props[propName], descriptor as StyleDefinition, control]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n          }\n\n          case RichTextV1Definition.type: {\n            const control = (propControllers?.[propName] ?? null) as RichTextV1Control | null\n\n            return (\n              <RenderHook\n                key={descriptor.controlType}\n                hook={useRichText}\n                parameters={[props[propName], control]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n          }\n\n          case RichTextV2Definition.type: {\n            const control = (propControllers?.[propName] ?? null) as RichTextV2Control | null\n\n            return (\n              <RenderHook\n                key={descriptor.controlType}\n                hook={useRichTextV2}\n                parameters={[props[propName], descriptor as RichTextV2Definition, control]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n          }\n\n          case SlotDefinition.type: {\n            const control = (propControllers?.[propName] ?? null) as SlotControl | null\n\n            return (\n              <RenderHook\n                key={descriptor.controlType}\n                hook={useSlot}\n                parameters={[props[propName], control]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n          }\n        }\n\n        console.error(`Unknown control type: ${descriptor.controlType}`)\n        return renderFn({ ...propsValue, [propName]: props[propName] })\n      },\n    children,\n  )({})\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/runtimes/react/controls.tsx"],"sourcesContent":["import { useRef } from 'react'\n\nimport { ControlDefinition } from '@makeswift/controls'\n\nimport { partitionRecord } from '../../utils/partition'\n\nimport * as ReactPage from '../../state/react-page'\nimport { isLegacyDescriptor, LegacyDescriptor } from '../../prop-controllers/descriptors'\n\nimport { useStore } from './hooks/use-store'\n\nimport { resolveLegacyDescriptorProp } from './legacy-controls'\nimport { useResolvedProps } from './hooks/use-resolved-props'\n\ntype PropsValueProps = {\n  element: ReactPage.ElementData\n  children(props: Record<string, unknown>): JSX.Element\n}\n\nfunction useControlDefs(\n  elementType: string,\n): readonly [Record<string, LegacyDescriptor>, Record<string, ControlDefinition>] {\n  const store = useStore()\n  const all = ReactPage.getComponentPropControllerDescriptors(store.getState(), elementType) ?? {}\n  return useRef(partitionRecord(all, isLegacyDescriptor)).current\n}\n\nexport function ResolveProps({ element, children: renderComponent }: PropsValueProps): JSX.Element {\n  const [legacyDescriptors, definitions] = useControlDefs(element.type)\n\n  const resolvedProps = useResolvedProps(definitions, element.props, element.key)\n\n  const renderFn = Object.entries(legacyDescriptors).reduceRight(\n    (renderFn, [propName, descriptor]) =>\n      props =>\n        resolveLegacyDescriptorProp(descriptor, propName, element.props[propName], props, renderFn),\n    renderComponent,\n  )\n\n  return renderFn(resolvedProps)\n}\n"],"mappings":"AAAA,SAAS,cAAc;AAIvB,SAAS,uBAAuB;AAEhC,YAAY,eAAe;AAC3B,SAAS,0BAA4C;AAErD,SAAS,gBAAgB;AAEzB,SAAS,mCAAmC;AAC5C,SAAS,wBAAwB;AAOjC,SAAS,eACP,aACgF;AAChF,QAAM,QAAQ,SAAS;AACvB,QAAM,MAAM,UAAU,sCAAsC,MAAM,SAAS,GAAG,WAAW,KAAK,CAAC;AAC/F,SAAO,OAAO,gBAAgB,KAAK,kBAAkB,CAAC,EAAE;AAC1D;AAEO,SAAS,aAAa,EAAE,SAAS,UAAU,gBAAgB,GAAiC;AACjG,QAAM,CAAC,mBAAmB,WAAW,IAAI,eAAe,QAAQ,IAAI;AAEpE,QAAM,gBAAgB,iBAAiB,aAAa,QAAQ,OAAO,QAAQ,GAAG;AAE9E,QAAM,WAAW,OAAO,QAAQ,iBAAiB,EAAE;AAAA,IACjD,CAACA,WAAU,CAAC,UAAU,UAAU,MAC9B,WACE,4BAA4B,YAAY,UAAU,QAAQ,MAAM,QAAQ,GAAG,OAAOA,SAAQ;AAAA,IAC9F;AAAA,EACF;AAEA,SAAO,SAAS,aAAa;AAC/B;","names":["renderFn"]}

package/dist/esm/runtimes/react/hooks/use-css-id.js

@@ -0,0 +1,8 @@
+import { useId } from "react";
+function useCssId() {
+  return useId().replaceAll(":", "");
+}
+export {
+  useCssId
+};
+//# sourceMappingURL=use-css-id.js.map

package/dist/esm/runtimes/react/hooks/use-css-id.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-css-id.ts"],"sourcesContent":["import { useId } from 'react'\n\nexport function useCssId(): string {\n  return useId().replaceAll(':', '') // CSS class names prohibit colons\n}\n"],"mappings":"AAAA,SAAS,aAAa;AAEf,SAAS,WAAmB;AACjC,SAAO,MAAM,EAAE,WAAW,KAAK,EAAE;AACnC;","names":[]}

package/dist/esm/runtimes/react/hooks/use-resolved-props.js

@@ -0,0 +1,53 @@
+import { useMemo, useEffect, useRef, useSyncExternalStore, useCallback } from "react";
+import {
+  mapValues
+} from "@makeswift/controls";
+import * as ReactPage from "../../../state/react-page";
+import { useResourceResolver } from "./use-resource-resolver";
+import { useDocumentKey } from "./use-document-key";
+import { useSelector } from "./use-selector";
+import { useStylesheetFactory } from "./use-stylesheet-factory";
+import { resolvableRecord } from "../resolvable-record";
+function useControlInstances(elementKey) {
+  const documentKey = useDocumentKey();
+  return useSelector((state) => {
+    if (documentKey == null)
+      return null;
+    return ReactPage.getPropControllers(state, documentKey, elementKey);
+  });
+}
+function useResolvedProps(propDefs, elementData, elementKey) {
+  const stylesheetFactory = useStylesheetFactory();
+  const resourceResolver = useResourceResolver();
+  const controls = useControlInstances(elementKey);
+  const cache = useRef({}).current;
+  const resolveProp = useCallback(
+    (def, propName) => {
+      const data = elementData[propName];
+      const control = controls?.[propName];
+      if (cache[propName] != null && data === cache[propName].data && control === cache[propName].control) {
+        return cache[propName].resolvedValue;
+      }
+      const resolvedValue = def.resolveValue(
+        data,
+        resourceResolver,
+        stylesheetFactory.get(propName),
+        control
+      );
+      cache[propName] = { data, control, resolvedValue };
+      return resolvedValue;
+    },
+    [controls, elementData, resourceResolver, stylesheetFactory]
+  );
+  const resolvables = useMemo(() => mapValues(propDefs, resolveProp), [propDefs, resolveProp]);
+  const props = useMemo(() => resolvableRecord(resolvables), [resolvables]);
+  stylesheetFactory.useDefinedStyles();
+  useEffect(() => {
+    props.triggerResolve();
+  }, []);
+  return useSyncExternalStore(props.subscribe, props.readStable, props.readStable);
+}
+export {
+  useResolvedProps
+};
+//# sourceMappingURL=use-resolved-props.js.map

package/dist/esm/runtimes/react/hooks/use-resolved-props.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-resolved-props.ts"],"sourcesContent":["import { useMemo, useEffect, useRef, useSyncExternalStore, useCallback } from 'react'\nimport {\n  ControlDefinition,\n  ControlInstance,\n  mapValues,\n  type Data,\n  type Resolvable,\n} from '@makeswift/controls'\n\nimport * as ReactPage from '../../../state/react-page'\nimport { useResourceResolver } from './use-resource-resolver'\nimport { useDocumentKey } from './use-document-key'\nimport { useSelector } from './use-selector'\n\nimport { useStylesheetFactory } from './use-stylesheet-factory'\n\nimport { resolvableRecord } from '../resolvable-record'\n\nfunction useControlInstances(elementKey: string): Record<string, ControlInstance> | null {\n  const documentKey = useDocumentKey()\n\n  return useSelector(state => {\n    if (documentKey == null) return null\n\n    return ReactPage.getPropControllers(state, documentKey, elementKey)\n  })\n}\n\ntype CacheItem = {\n  data: Data\n  control: ControlInstance | undefined\n  resolvedValue: Resolvable<unknown>\n}\n\nexport function useResolvedProps(\n  propDefs: Record<string, ControlDefinition>,\n  elementData: Record<string, Data>,\n  elementKey: string,\n): Record<string, unknown> {\n  const stylesheetFactory = useStylesheetFactory()\n  const resourceResolver = useResourceResolver()\n  const controls = useControlInstances(elementKey)\n\n  const cache = useRef<Record<string, CacheItem>>({}).current\n  const resolveProp = useCallback(\n    (def: ControlDefinition, propName: string) => {\n      const data = elementData[propName]\n      const control = controls?.[propName]\n\n      if (\n        cache[propName] != null &&\n        data === cache[propName].data &&\n        control === cache[propName].control\n      ) {\n        return cache[propName].resolvedValue\n      }\n\n      const resolvedValue = def.resolveValue(\n        data,\n        resourceResolver,\n        stylesheetFactory.get(propName),\n        control,\n      )\n\n      cache[propName] = { data, control, resolvedValue }\n      return resolvedValue\n    },\n    [controls, elementData, resourceResolver, stylesheetFactory],\n  )\n\n  const resolvables = useMemo(() => mapValues(propDefs, resolveProp), [propDefs, resolveProp])\n  const props = useMemo(() => resolvableRecord(resolvables), [resolvables])\n\n  stylesheetFactory.useDefinedStyles()\n\n  useEffect(() => {\n    props.triggerResolve()\n  }, [])\n\n  return useSyncExternalStore(props.subscribe, props.readStable, props.readStable)\n}\n"],"mappings":"AAAA,SAAS,SAAS,WAAW,QAAQ,sBAAsB,mBAAmB;AAC9E;AAAA,EAGE;AAAA,OAGK;AAEP,YAAY,eAAe;AAC3B,SAAS,2BAA2B;AACpC,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;AAE5B,SAAS,4BAA4B;AAErC,SAAS,wBAAwB;AAEjC,SAAS,oBAAoB,YAA4D;AACvF,QAAM,cAAc,eAAe;AAEnC,SAAO,YAAY,WAAS;AAC1B,QAAI,eAAe;AAAM,aAAO;AAEhC,WAAO,UAAU,mBAAmB,OAAO,aAAa,UAAU;AAAA,EACpE,CAAC;AACH;AAQO,SAAS,iBACd,UACA,aACA,YACyB;AACzB,QAAM,oBAAoB,qBAAqB;AAC/C,QAAM,mBAAmB,oBAAoB;AAC7C,QAAM,WAAW,oBAAoB,UAAU;AAE/C,QAAM,QAAQ,OAAkC,CAAC,CAAC,EAAE;AACpD,QAAM,cAAc;AAAA,IAClB,CAAC,KAAwB,aAAqB;AAC5C,YAAM,OAAO,YAAY,QAAQ;AACjC,YAAM,UAAU,WAAW,QAAQ;AAEnC,UACE,MAAM,QAAQ,KAAK,QACnB,SAAS,MAAM,QAAQ,EAAE,QACzB,YAAY,MAAM,QAAQ,EAAE,SAC5B;AACA,eAAO,MAAM,QAAQ,EAAE;AAAA,MACzB;AAEA,YAAM,gBAAgB,IAAI;AAAA,QACxB;AAAA,QACA;AAAA,QACA,kBAAkB,IAAI,QAAQ;AAAA,QAC9B;AAAA,MACF;AAEA,YAAM,QAAQ,IAAI,EAAE,MAAM,SAAS,cAAc;AACjD,aAAO;AAAA,IACT;AAAA,IACA,CAAC,UAAU,aAAa,kBAAkB,iBAAiB;AAAA,EAC7D;AAEA,QAAM,cAAc,QAAQ,MAAM,UAAU,UAAU,WAAW,GAAG,CAAC,UAAU,WAAW,CAAC;AAC3F,QAAM,QAAQ,QAAQ,MAAM,iBAAiB,WAAW,GAAG,CAAC,WAAW,CAAC;AAExE,oBAAkB,iBAAiB;AAEnC,YAAU,MAAM;AACd,UAAM,eAAe;AAAA,EACvB,GAAG,CAAC,CAAC;AAEL,SAAO,qBAAqB,MAAM,WAAW,MAAM,YAAY,MAAM,UAAU;AACjF;","names":[]}

package/dist/esm/runtimes/react/hooks/use-resolved-value.js

@@ -1,5 +1,12 @@
-function useResolvedValue(data, definition) {
-  return definition.resolveValue(data).readStableValue();
+import { useMemo, useEffect, useSyncExternalStore } from "react";
+import { useResourceResolver } from "./use-resource-resolver";
+function useResolvedValue(data, resolver) {
+  const resourceResolver = useResourceResolver();
+  const resolvable = useMemo(() => resolver(data, resourceResolver), [data, resourceResolver]);
+  useEffect(() => {
+    resolvable.triggerResolve();
+  }, []);
+  return useSyncExternalStore(resolvable.subscribe, resolvable.readStable, resolvable.readStable);
 }
 export {
   useResolvedValue

package/dist/esm/runtimes/react/hooks/use-resolved-value.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-resolved-value.ts"],"sourcesContent":["import { ControlDefinition, type DataType, type ResolvedValueType } from '@makeswift/controls'\n\nexport function useResolvedValue(\n  data: DataType<ControlDefinition> | undefined,\n  definition: ControlDefinition,\n): ResolvedValueType<ControlDefinition> {\n  return definition.resolveValue(data).readStableValue()\n}\n"],"mappings":"AAEO,SAAS,iBACd,MACA,YACsC;AACtC,SAAO,WAAW,aAAa,IAAI,EAAE,gBAAgB;AACvD;","names":[]}
+{"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-resolved-value.ts"],"sourcesContent":["import { useMemo, useEffect, useSyncExternalStore } from 'react'\nimport { Resolvable, ResourceResolver } from '@makeswift/controls'\n\nimport { useResourceResolver } from './use-resource-resolver'\n\nexport function useResolvedValue<D, T>(\n  data: D,\n  resolver: (data: D, resourceResolver: ResourceResolver) => Resolvable<T>,\n): T {\n  const resourceResolver = useResourceResolver()\n  const resolvable = useMemo(() => resolver(data, resourceResolver), [data, resourceResolver])\n\n  useEffect(() => {\n    resolvable.triggerResolve()\n  }, [])\n\n  return useSyncExternalStore(resolvable.subscribe, resolvable.readStable, resolvable.readStable)\n}\n"],"mappings":"AAAA,SAAS,SAAS,WAAW,4BAA4B;AAGzD,SAAS,2BAA2B;AAE7B,SAAS,iBACd,MACA,UACG;AACH,QAAM,mBAAmB,oBAAoB;AAC7C,QAAM,aAAa,QAAQ,MAAM,SAAS,MAAM,gBAAgB,GAAG,CAAC,MAAM,gBAAgB,CAAC;AAE3F,YAAU,MAAM;AACd,eAAW,eAAe;AAAA,EAC5B,GAAG,CAAC,CAAC;AAEL,SAAO,qBAAqB,WAAW,WAAW,WAAW,YAAY,WAAW,UAAU;AAChG;","names":[]}

package/dist/esm/runtimes/react/hooks/use-resource-resolver.js

@@ -0,0 +1,34 @@
+import { useMemo } from "react";
+import * as ReactPage from "../../../state/react-page";
+import { useStore } from "./use-store";
+import { useDocumentKey } from "./use-document-key";
+import { useMakeswiftHostApiClient } from "../../../next/context/makeswift-host-api-client";
+function useResourceResolver() {
+  const store = useStore();
+  const client = useMakeswiftHostApiClient();
+  const documentKey = useDocumentKey();
+  return useMemo(() => {
+    return {
+      resolveSwatch: (swatchId) => client.resolveSwatch(swatchId),
+      resolveFile: (fileId) => client.resolveFile(fileId),
+      resolveTypography: (typographyId) => client.resolveTypography(typographyId),
+      resolvePagePathnameSlice: (pageId) => client.resolvePagePathnameSlice(pageId),
+      resolveElementId: (elementKey) => {
+        const read = () => documentKey == null ? null : ReactPage.getElementId(store.getState(), documentKey, elementKey);
+        let lastValue = null;
+        return {
+          name: `element-id:${documentKey}:${elementKey}`,
+          readStable: () => lastValue = read(),
+          subscribe: (onUpdate) => store.subscribe(() => {
+            if (read() !== lastValue)
+              onUpdate();
+          })
+        };
+      }
+    };
+  }, [client, store, documentKey]);
+}
+export {
+  useResourceResolver
+};
+//# sourceMappingURL=use-resource-resolver.js.map

package/dist/esm/runtimes/react/hooks/use-resource-resolver.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-resource-resolver.ts"],"sourcesContent":["import { useMemo } from 'react'\nimport { type ResourceResolver } from '@makeswift/controls'\n\nimport * as ReactPage from '../../../state/react-page'\nimport { useStore } from './use-store'\nimport { useDocumentKey } from './use-document-key'\nimport { useMakeswiftHostApiClient } from '../../../next/context/makeswift-host-api-client'\n\nexport function useResourceResolver(): ResourceResolver {\n  const store = useStore()\n  const client = useMakeswiftHostApiClient()\n  const documentKey = useDocumentKey()\n\n  return useMemo<ResourceResolver>(() => {\n    return {\n      resolveSwatch: swatchId => client.resolveSwatch(swatchId),\n      resolveFile: fileId => client.resolveFile(fileId),\n      resolveTypography: typographyId => client.resolveTypography(typographyId),\n      resolvePagePathnameSlice: pageId => client.resolvePagePathnameSlice(pageId),\n      resolveElementId: elementKey => {\n        const read = () =>\n          documentKey == null\n            ? null\n            : ReactPage.getElementId(store.getState(), documentKey, elementKey)\n\n        let lastValue: string | null = null\n        return {\n          name: `element-id:${documentKey}:${elementKey}`,\n          readStable: () => (lastValue = read()),\n          subscribe: (onUpdate: () => void) =>\n            store.subscribe(() => {\n              if (read() !== lastValue) onUpdate()\n            }),\n        }\n      },\n    }\n  }, [client, store, documentKey])\n}\n"],"mappings":"AAAA,SAAS,eAAe;AAGxB,YAAY,eAAe;AAC3B,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B,SAAS,iCAAiC;AAEnC,SAAS,sBAAwC;AACtD,QAAM,QAAQ,SAAS;AACvB,QAAM,SAAS,0BAA0B;AACzC,QAAM,cAAc,eAAe;AAEnC,SAAO,QAA0B,MAAM;AACrC,WAAO;AAAA,MACL,eAAe,cAAY,OAAO,cAAc,QAAQ;AAAA,MACxD,aAAa,YAAU,OAAO,YAAY,MAAM;AAAA,MAChD,mBAAmB,kBAAgB,OAAO,kBAAkB,YAAY;AAAA,MACxE,0BAA0B,YAAU,OAAO,yBAAyB,MAAM;AAAA,MAC1E,kBAAkB,gBAAc;AAC9B,cAAM,OAAO,MACX,eAAe,OACX,OACA,UAAU,aAAa,MAAM,SAAS,GAAG,aAAa,UAAU;AAEtE,YAAI,YAA2B;AAC/B,eAAO;AAAA,UACL,MAAM,cAAc,WAAW,IAAI,UAAU;AAAA,UAC7C,YAAY,MAAO,YAAY,KAAK;AAAA,UACpC,WAAW,CAAC,aACV,MAAM,UAAU,MAAM;AACpB,gBAAI,KAAK,MAAM;AAAW,uBAAS;AAAA,UACrC,CAAC;AAAA,QACL;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,QAAQ,OAAO,WAAW,CAAC;AACjC;","names":[]}