@makeswift/runtime 0.19.4 → 0.20.0-canary.0

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

@@ -1,17 +1,25 @@
 import { jsx } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import { useEffect, useState, memo } from "react";
+import { cx } from "@emotion/css";
 import { Element } from "../components/Element";
 import { getIndexes } from "../../../components/utils/columns";
 import { useResponsiveStyle } from "../../../components/utils/responsive-style";
 import { useStyle } from "../use-style";
-import { cx } from "@emotion/css";
 import { pollBoxModel } from "../poll-box-model";
 function useSlot(data, control) {
-  if (data == null || data.elements.length === 0) {
-    return /* @__PURE__ */ jsx(Slot.Placeholder, { control });
-  }
-  return /* @__PURE__ */ jsx(Slot, { control, children: data.elements.map((element, i) => /* @__PURE__ */ jsx(Slot.Item, { control, grid: data.columns, index: i, children: /* @__PURE__ */ jsx(Element, { element }) }, element.key)) });
+  return /* @__PURE__ */ jsx(SlotValue, { data, control });
 }
+const SlotValue = memo(
+  ({
+    data,
+    control
+  }) => {
+    if (data == null || data.elements.length === 0) {
+      return /* @__PURE__ */ jsx(Slot.Placeholder, { control });
+    }
+    return /* @__PURE__ */ jsx(Slot, { control, children: data.elements.map((element, i) => /* @__PURE__ */ jsx(Slot.Item, { control, grid: data.columns, index: i, children: /* @__PURE__ */ jsx(Element, { element }) }, element.key)) });
+  }
+);
 function Slot({
   as,
   control,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/controls/slot.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, ElementType, ReactNode, useEffect, useState } from 'react'\nimport { SlotControl, SlotControlData } from '../../../controls'\n\nimport { Element } from '../components/Element'\nimport { getIndexes } from '../../../components/utils/columns'\nimport { useResponsiveStyle } from '../../../components/utils/responsive-style'\nimport { useStyle } from '../use-style'\nimport { cx } from '@emotion/css'\nimport { pollBoxModel } from '../poll-box-model'\n\nexport type SlotControlValue = ReactNode\n\nexport function useSlot(data: SlotControlData, control: SlotControl | null) {\n  // TODO(miguel): While the UI shouldn't allow the state, we should probably check that at least\n  // one element is visible.\n  if (data == null || data.elements.length === 0) {\n    return <Slot.Placeholder control={control} />\n  }\n\n  return (\n    <Slot control={control}>\n      {data.elements.map((element, i) => (\n        <Slot.Item key={element.key} control={control} grid={data.columns} index={i}>\n          <Element element={element} />\n        </Slot.Item>\n      ))}\n    </Slot>\n  )\n}\n\ntype SlotProps<T extends ElementType> = {\n  as?: T\n  control: SlotControl | null\n  children?: ReactNode\n  className?: string\n}\n\nexport function Slot<T extends ElementType = 'div'>({\n  as,\n  control,\n  children,\n  className,\n  ...restOfProps\n}: SlotProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof SlotProps<T>>) {\n  const As = as ?? 'div'\n  const [element, setElement] = useState<Element | null>(null)\n  const baseClassName = useStyle({\n    display: 'flex',\n    flexWrap: 'wrap',\n    width: '100%',\n  })\n\n  useEffect(() => {\n    if (element == null || control == null) return\n\n    return pollBoxModel({\n      element,\n      onBoxModelChange: boxModel => control.changeContainerBoxModel(boxModel),\n    })\n  }, [element, control])\n\n  return (\n    <As {...restOfProps} ref={setElement} className={cx(baseClassName, className)}>\n      {children}\n    </As>\n  )\n}\n\nSlot.Placeholder = SlotPlaceholder\n\nSlot.Item = SlotItem\n\ntype SlotItemProps<T extends ElementType> = {\n  as?: T\n  control: SlotControl | null\n  grid: SlotControlData['columns']\n  index: number\n  children?: ReactNode\n  className?: string\n}\n\nfunction SlotItem<T extends ElementType = 'div'>({\n  as,\n  control,\n  grid,\n  index,\n  children,\n  className,\n  ...restOfProps\n}: SlotItemProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof SlotItemProps<T>>): JSX.Element {\n  const As = as ?? 'div'\n  const [element, setElement] = useState<Element | null>(null)\n  const baseClassName = useStyle({\n    display: 'flex',\n    ...useResponsiveStyle([grid], ([{ count = 12, spans = [[12]] } = {}]) => {\n      const [rowIndex, columnIndex] = getIndexes(spans, index)\n      const span = spans[rowIndex][columnIndex]\n      const flexBasis = `calc(100% * ${(span / count).toFixed(5)})`\n\n      return span === 0 ? { display: 'none' } : { flexBasis, minWidth: flexBasis }\n    }),\n  })\n\n  useEffect(() => {\n    if (element == null || control == null) return\n\n    return pollBoxModel({\n      element,\n      onBoxModelChange: boxModel => control.changeItemBoxModel(index, boxModel),\n    })\n  }, [element, control, index])\n\n  return (\n    <As {...restOfProps} ref={setElement} className={cx(baseClassName, className)}>\n      {children}\n    </As>\n  )\n}\n\ntype SlotPlaceholderProps = {\n  control: SlotControl | null\n}\n\nfunction SlotPlaceholder({ control }: SlotPlaceholderProps): JSX.Element {\n  const [element, setElement] = useState<Element | null>(null)\n\n  useEffect(() => {\n    if (element == null || control == null) return\n\n    return pollBoxModel({\n      element,\n      onBoxModelChange: boxModel => control.changeContainerBoxModel(boxModel),\n    })\n  }, [element, control])\n\n  return (\n    <div\n      ref={setElement}\n      className={useStyle({\n        width: '100%',\n        background: 'rgba(161, 168, 194, 0.18)',\n        height: '80px',\n      })}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"100%\"\n        height=\"100%\"\n        className={useStyle({ overflow: 'visible', padding: 8 })}\n      >\n        <rect\n          x={0}\n          y={0}\n          width=\"100%\"\n          height=\"100%\"\n          strokeWidth={2}\n          strokeDasharray=\"4 2\"\n          fill=\"none\"\n          stroke=\"rgba(161, 168, 194, 0.40)\"\n          rx=\"4\"\n          ry=\"4\"\n        />\n      </svg>\n    </div>\n  )\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../../src/runtimes/react/controls/slot.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, ElementType, ReactNode, useEffect, useState, memo } from 'react'\nimport { cx } from '@emotion/css'\n\nimport { SlotDefinition, SlotControl, type DataType } from '@makeswift/controls'\n\nimport { Element } from '../components/Element'\nimport { getIndexes } from '../../../components/utils/columns'\nimport { useResponsiveStyle } from '../../../components/utils/responsive-style'\nimport { useStyle } from '../use-style'\nimport { pollBoxModel } from '../poll-box-model'\n\nexport function useSlot(\n  data: DataType<SlotDefinition<ReactNode>> | undefined,\n  control: SlotControl | null,\n) {\n  return <SlotValue data={data} control={control} />\n}\n\nconst SlotValue = memo(\n  ({\n    data,\n    control,\n  }: {\n    data: DataType<SlotDefinition<ReactNode>> | undefined\n    control: SlotControl | null\n  }): ReactNode => {\n    // TODO(miguel): While the UI shouldn't allow the state, we should probably check that at least\n    // one element is visible.\n    if (data == null || data.elements.length === 0) {\n      return <Slot.Placeholder control={control} />\n    }\n\n    return (\n      <Slot control={control}>\n        {data.elements.map((element, i) => (\n          <Slot.Item key={element.key} control={control} grid={data.columns} index={i}>\n            <Element element={element} />\n          </Slot.Item>\n        ))}\n      </Slot>\n    )\n  },\n)\n\ntype SlotProps<T extends ElementType> = {\n  as?: T\n  control: SlotControl | null\n  children?: ReactNode\n  className?: string\n}\n\nexport function Slot<T extends ElementType = 'div'>({\n  as,\n  control,\n  children,\n  className,\n  ...restOfProps\n}: SlotProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof SlotProps<T>>) {\n  const As = as ?? 'div'\n  const [element, setElement] = useState<Element | null>(null)\n  const baseClassName = useStyle({\n    display: 'flex',\n    flexWrap: 'wrap',\n    width: '100%',\n  })\n\n  useEffect(() => {\n    if (element == null || control == null) return\n\n    return pollBoxModel({\n      element,\n      onBoxModelChange: boxModel => control.changeContainerBoxModel(boxModel),\n    })\n  }, [element, control])\n\n  return (\n    <As {...restOfProps} ref={setElement} className={cx(baseClassName, className)}>\n      {children}\n    </As>\n  )\n}\n\nSlot.Placeholder = SlotPlaceholder\n\nSlot.Item = SlotItem\n\ntype SlotItemProps<T extends ElementType> = {\n  as?: T\n  control: SlotControl | null\n  // @arvin: review for correctness\n  grid: DataType<SlotDefinition<ReactNode>> extends undefined\n    ? undefined\n    : NonNullable<DataType<SlotDefinition<ReactNode>>>['columns']\n  index: number\n  children?: ReactNode\n  className?: string\n}\n\nfunction SlotItem<T extends ElementType = 'div'>({\n  as,\n  control,\n  grid,\n  index,\n  children,\n  className,\n  ...restOfProps\n}: SlotItemProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof SlotItemProps<T>>): JSX.Element {\n  const As = as ?? 'div'\n  const [element, setElement] = useState<Element | null>(null)\n  const baseClassName = useStyle({\n    display: 'flex',\n    ...useResponsiveStyle([grid], ([{ count = 12, spans = [[12]] } = {}]) => {\n      const [rowIndex, columnIndex] = getIndexes(spans, index)\n      const span = spans[rowIndex][columnIndex]\n      const flexBasis = `calc(100% * ${(span / count).toFixed(5)})`\n\n      return span === 0 ? { display: 'none' } : { flexBasis, minWidth: flexBasis }\n    }),\n  })\n\n  useEffect(() => {\n    if (element == null || control == null) return\n\n    return pollBoxModel({\n      element,\n      onBoxModelChange: boxModel => control.changeItemBoxModel(index, boxModel),\n    })\n  }, [element, control, index])\n\n  return (\n    <As {...restOfProps} ref={setElement} className={cx(baseClassName, className)}>\n      {children}\n    </As>\n  )\n}\n\ntype SlotPlaceholderProps = {\n  control: SlotControl | null\n}\n\nfunction SlotPlaceholder({ control }: SlotPlaceholderProps): JSX.Element {\n  const [element, setElement] = useState<Element | null>(null)\n\n  useEffect(() => {\n    if (element == null || control == null) return\n\n    return pollBoxModel({\n      element,\n      onBoxModelChange: boxModel => control.changeContainerBoxModel(boxModel),\n    })\n  }, [element, control])\n\n  return (\n    <div\n      ref={setElement}\n      className={useStyle({\n        width: '100%',\n        background: 'rgba(161, 168, 194, 0.18)',\n        height: '80px',\n      })}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"100%\"\n        height=\"100%\"\n        className={useStyle({ overflow: 'visible', padding: 8 })}\n      >\n        <rect\n          x={0}\n          y={0}\n          width=\"100%\"\n          height=\"100%\"\n          strokeWidth={2}\n          strokeDasharray=\"4 2\"\n          fill=\"none\"\n          stroke=\"rgba(161, 168, 194, 0.40)\"\n          rx=\"4\"\n          ry=\"4\"\n        />\n      </svg>\n    </div>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/esm/runtimes/react/controls/style-v2.js

@@ -46,16 +46,11 @@ function StyleV2ControlValue({
   control
 }) {
   return (data ?? []).reduceRight(
-    (renderFn, deviceOverrideData) => (responsiveValue) => {
-      return /* @__PURE__ */ jsx(
-        ControlValue,
-        {
-          definition: definition.config.type,
-          data: deviceOverrideData.value,
-          control: control?.control,
-          children: (value) => renderFn([{ ...deviceOverrideData, value }, ...responsiveValue])
-        }
-      );
+    (renderFn, { deviceId, value }) => (responsiveValue) => {
+      return /* @__PURE__ */ jsx(ControlValue, { definition: definition.config.type, data: value, control: control?.child(), children: (value2) => renderFn([
+        { deviceId, value: value2 },
+        ...responsiveValue
+      ]) });
     },
     (value) => {
       return /* @__PURE__ */ jsx(
@@ -65,7 +60,7 @@ function StyleV2ControlValue({
           parameters: [value, definition],
           children: (value2) => children(value2)
         },
-        definition.type
+        definition.controlType
       );
     }
   )([]);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/controls/style-v2.tsx"],"sourcesContent":["import { DeviceOverride } from '@makeswift/controls'\nimport { StyleV2Control, StyleV2ControlData, StyleV2ControlDefinition } from '../../../controls'\nimport { useStyle } from '../use-style'\nimport {\n  findBreakpointOverride,\n  getBaseBreakpoint,\n  getBreakpointMediaQuery,\n  mergeOrCoalesceFallbacks,\n} from '../../../state/modules/breakpoints'\nimport { CSSObject } from '@emotion/css'\n\nimport { ControlDefinitionValue, ControlValue } from './control'\nimport { RenderHook } from '../components'\nimport { useBreakpoints } from '../hooks/use-breakpoints'\n\nfunction useStyleControlCssObject(\n  styleControlData: StyleV2ControlData,\n  controlDefinition: StyleV2ControlDefinition,\n): CSSObject {\n  const breakpoints = useBreakpoints()\n\n  return {\n    ...controlDefinition.config.getStyle(\n      findBreakpointOverride(\n        breakpoints,\n        styleControlData,\n        getBaseBreakpoint(breakpoints).id,\n        mergeOrCoalesceFallbacks,\n      )?.value,\n    ),\n    ...breakpoints.reduce((styles, breakpoint) => {\n      return {\n        ...styles,\n        [getBreakpointMediaQuery(breakpoint)]: controlDefinition.config.getStyle(\n          findBreakpointOverride(\n            breakpoints,\n            styleControlData,\n            breakpoint.id,\n            mergeOrCoalesceFallbacks,\n          )?.value,\n        ),\n      }\n    }, {}),\n  }\n}\n\nexport type StyleV2ControlFormattedValue = string\n\nexport function useFormattedStyleV2<T extends StyleV2ControlDefinition>(\n  styleControlData: StyleV2ControlData,\n  controlDefinition: T,\n): StyleV2ControlFormattedValue {\n  const styles = useStyleControlCssObject(styleControlData, controlDefinition)\n\n  return useStyle(styles)\n}\n\ntype StyleV2ControlValueProps<T extends StyleV2ControlDefinition> = {\n  definition: T\n  data: StyleV2ControlData | undefined\n  children(value: string): JSX.Element\n  control?: StyleV2Control\n}\n\nexport function StyleV2ControlValue<T extends StyleV2ControlDefinition>({\n  definition,\n  data,\n  children,\n  control,\n}: StyleV2ControlValueProps<T>): JSX.Element {\n  return (data ?? []).reduceRight(\n    (renderFn, deviceOverrideData: DeviceOverride<any>) => responsiveValue => {\n      return (\n        <ControlValue\n          definition={definition.config.type}\n          data={deviceOverrideData.value}\n          control={control?.control}\n        >\n          {value => renderFn([{ ...deviceOverrideData, value }, ...responsiveValue])}\n        </ControlValue>\n      )\n    },\n    (value: StyleV2ControlData) => {\n      return (\n        <RenderHook\n          key={definition.type}\n          hook={useFormattedStyleV2}\n          parameters={[value, definition]}\n        >\n          {value => children(value as ControlDefinitionValue<T>)}\n        </RenderHook>\n      )\n    },\n  )([])\n}\n"],"mappings":"AAyEQ;AAvER,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAiC,oBAAoB;AACrD,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAE/B,SAAS,yBACP,kBACA,mBACW;AACX,QAAM,cAAc,eAAe;AAEnC,SAAO;AAAA,IACL,GAAG,kBAAkB,OAAO;AAAA,MAC1B;AAAA,QACE;AAAA,QACA;AAAA,QACA,kBAAkB,WAAW,EAAE;AAAA,QAC/B;AAAA,MACF,GAAG;AAAA,IACL;AAAA,IACA,GAAG,YAAY,OAAO,CAAC,QAAQ,eAAe;AAC5C,aAAO;AAAA,QACL,GAAG;AAAA,QACH,CAAC,wBAAwB,UAAU,CAAC,GAAG,kBAAkB,OAAO;AAAA,UAC9D;AAAA,YACE;AAAA,YACA;AAAA,YACA,WAAW;AAAA,YACX;AAAA,UACF,GAAG;AAAA,QACL;AAAA,MACF;AAAA,IACF,GAAG,CAAC,CAAC;AAAA,EACP;AACF;AAIO,SAAS,oBACd,kBACA,mBAC8B;AAC9B,QAAM,SAAS,yBAAyB,kBAAkB,iBAAiB;AAE3E,SAAO,SAAS,MAAM;AACxB;AASO,SAAS,oBAAwD;AAAA,EACtE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA6C;AAC3C,UAAQ,QAAQ,CAAC,GAAG;AAAA,IAClB,CAAC,UAAU,uBAA4C,qBAAmB;AACxE,aACE;AAAA,QAAC;AAAA;AAAA,UACC,YAAY,WAAW,OAAO;AAAA,UAC9B,MAAM,mBAAmB;AAAA,UACzB,SAAS,SAAS;AAAA,UAEjB,qBAAS,SAAS,CAAC,EAAE,GAAG,oBAAoB,MAAM,GAAG,GAAG,eAAe,CAAC;AAAA;AAAA,MAC3E;AAAA,IAEJ;AAAA,IACA,CAAC,UAA8B;AAC7B,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,MAAM;AAAA,UACN,YAAY,CAAC,OAAO,UAAU;AAAA,UAE7B,WAAAA,WAAS,SAASA,MAAkC;AAAA;AAAA,QAJhD,WAAW;AAAA,MAKlB;AAAA,IAEJ;AAAA,EACF,EAAE,CAAC,CAAC;AACN;","names":["value"]}
+{"version":3,"sources":["../../../../../src/runtimes/react/controls/style-v2.tsx"],"sourcesContent":["import { CSSObject } from '@emotion/css'\nimport {\n  type ResponsiveValue,\n  type ResolvedValueType,\n  type DataType,\n  type DeviceOverride,\n} from '@makeswift/controls'\n\nimport { StyleV2Definition, StyleV2Control } from '../../../controls/style-v2/style-v2'\n\nimport { useStyle } from '../use-style'\nimport {\n  findBreakpointOverride,\n  getBaseBreakpoint,\n  getBreakpointMediaQuery,\n  mergeOrCoalesceFallbacks,\n} from '../../../state/modules/breakpoints'\n\nimport { ControlValue } from './control'\nimport { RenderHook } from '../components'\nimport { useBreakpoints } from '../hooks/use-breakpoints'\n\nfunction useStyleControlCssObject(\n  styleControlData: ResponsiveValue<ResolvedValueType<StyleV2Definition>>,\n  controlDefinition: StyleV2Definition,\n): CSSObject {\n  const breakpoints = useBreakpoints()\n\n  return {\n    ...controlDefinition.config.getStyle(\n      findBreakpointOverride(\n        breakpoints,\n        styleControlData,\n        getBaseBreakpoint(breakpoints).id,\n        mergeOrCoalesceFallbacks,\n      )?.value,\n    ),\n    ...breakpoints.reduce((styles, breakpoint) => {\n      return {\n        ...styles,\n        [getBreakpointMediaQuery(breakpoint)]: controlDefinition.config.getStyle(\n          findBreakpointOverride(\n            breakpoints,\n            styleControlData,\n            breakpoint.id,\n            mergeOrCoalesceFallbacks,\n          )?.value,\n        ),\n      }\n    }, {}),\n  }\n}\n\nexport function useFormattedStyleV2(\n  styleControlData: ResponsiveValue<ResolvedValueType<StyleV2Definition>>,\n  controlDefinition: StyleV2Definition,\n): ResolvedValueType<StyleV2Definition> {\n  const styles = useStyleControlCssObject(styleControlData, controlDefinition)\n\n  return useStyle(styles)\n}\n\ntype ValueProps = {\n  definition: StyleV2Definition\n  data: DataType<StyleV2Definition> | undefined\n  children(value: string): JSX.Element\n  control?: StyleV2Control\n}\n\nexport function StyleV2ControlValue({\n  definition,\n  data,\n  children,\n  control,\n}: ValueProps): JSX.Element {\n  return (data ?? []).reduceRight(\n    (renderFn, { deviceId, value }: DeviceOverride<DataType<StyleV2Definition>>) =>\n      responsiveValue => {\n        return (\n          <ControlValue definition={definition.config.type} data={value} control={control?.child()}>\n            {value =>\n              renderFn([\n                { deviceId, value: value as ResolvedValueType<typeof definition.config.type> },\n                ...responsiveValue,\n              ])\n            }\n          </ControlValue>\n        )\n      },\n    (value: ResponsiveValue<ResolvedValueType<StyleV2Definition>>) => {\n      return (\n        <RenderHook\n          key={definition.controlType}\n          hook={useFormattedStyleV2}\n          parameters={[value, definition]}\n        >\n          {value => children(value)}\n        </RenderHook>\n      )\n    },\n  )([])\n}\n"],"mappings":"AA+EU;AArEV,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAE/B,SAAS,yBACP,kBACA,mBACW;AACX,QAAM,cAAc,eAAe;AAEnC,SAAO;AAAA,IACL,GAAG,kBAAkB,OAAO;AAAA,MAC1B;AAAA,QACE;AAAA,QACA;AAAA,QACA,kBAAkB,WAAW,EAAE;AAAA,QAC/B;AAAA,MACF,GAAG;AAAA,IACL;AAAA,IACA,GAAG,YAAY,OAAO,CAAC,QAAQ,eAAe;AAC5C,aAAO;AAAA,QACL,GAAG;AAAA,QACH,CAAC,wBAAwB,UAAU,CAAC,GAAG,kBAAkB,OAAO;AAAA,UAC9D;AAAA,YACE;AAAA,YACA;AAAA,YACA,WAAW;AAAA,YACX;AAAA,UACF,GAAG;AAAA,QACL;AAAA,MACF;AAAA,IACF,GAAG,CAAC,CAAC;AAAA,EACP;AACF;AAEO,SAAS,oBACd,kBACA,mBACsC;AACtC,QAAM,SAAS,yBAAyB,kBAAkB,iBAAiB;AAE3E,SAAO,SAAS,MAAM;AACxB;AASO,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AAC1B,UAAQ,QAAQ,CAAC,GAAG;AAAA,IAClB,CAAC,UAAU,EAAE,UAAU,MAAM,MAC3B,qBAAmB;AACjB,aACE,oBAAC,gBAAa,YAAY,WAAW,OAAO,MAAM,MAAM,OAAO,SAAS,SAAS,MAAM,GACpF,WAAAA,WACC,SAAS;AAAA,QACP,EAAE,UAAU,OAAOA,OAA0D;AAAA,QAC7E,GAAG;AAAA,MACL,CAAC,GAEL;AAAA,IAEJ;AAAA,IACF,CAAC,UAAiE;AAChE,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,MAAM;AAAA,UACN,YAAY,CAAC,OAAO,UAAU;AAAA,UAE7B,WAAAA,WAAS,SAASA,MAAK;AAAA;AAAA,QAJnB,WAAW;AAAA,MAKlB;AAAA,IAEJ;AAAA,EACF,EAAE,CAAC,CAAC;AACN;","names":["value"]}

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

@@ -1,10 +1,10 @@
 import { useEffect, useId } from "react";
+import {
+  Style
+} from "@makeswift/controls";
 import { useBorder } from "../../../components/hooks";
 import { colorToString } from "../../../components/utils/colorToString";
 import { useResponsiveStyle } from "../../../components/utils/responsive-style";
-import {
-  StyleControlProperty
-} from "../../../controls";
 import { useStyle } from "../use-style";
 import { lengthPercentageDataToString } from "../../../css/length-percentage";
 import { marginPropertyDataToStyle } from "../../../css/margin";
@@ -26,7 +26,7 @@ const defaultPadding = {
 function useStyleControlCssObject(style, controlDefinition) {
   const { properties } = controlDefinition.config;
   return {
-    ...properties.includes(StyleControlProperty.Width) && {
+    ...properties.includes(Style.Width) && {
       maxWidth: "100%"
     },
     ...useResponsiveStyle(
@@ -39,24 +39,24 @@ function useStyleControlCssObject(style, controlDefinition) {
         style?.textStyle
       ],
       ([width, margin, padding, border, borderRadius, textStyle]) => ({
-        ...properties.includes(StyleControlProperty.Width) && {
+        ...properties.includes(Style.Width) && {
           width: widthToString(width) ?? "100%"
         },
-        ...properties.includes(StyleControlProperty.Margin) && marginPropertyDataToStyle(margin ?? defaultMargin, defaultMargin),
-        ...properties.includes(StyleControlProperty.Padding) && paddingPropertyDataToStyle(padding ?? defaultPadding, defaultPadding),
-        ...properties.includes(StyleControlProperty.Border) && {
+        ...properties.includes(Style.Margin) && marginPropertyDataToStyle(margin ?? defaultMargin, defaultMargin),
+        ...properties.includes(Style.Padding) && paddingPropertyDataToStyle(padding ?? defaultPadding, defaultPadding),
+        ...properties.includes(Style.Border) && {
           borderTop: borderSideToString(border?.borderTop) ?? "0 solid black",
           borderRight: borderSideToString(border?.borderRight) ?? "0 solid black",
           borderBottom: borderSideToString(border?.borderBottom) ?? "0 solid black",
           borderLeft: borderSideToString(border?.borderLeft) ?? "0 solid black"
         },
-        ...properties.includes(StyleControlProperty.BorderRadius) && {
+        ...properties.includes(Style.BorderRadius) && {
           borderTopLeftRadius: borderRadiusToString(borderRadius?.borderTopLeftRadius) ?? 0,
           borderTopRightRadius: borderRadiusToString(borderRadius?.borderTopRightRadius) ?? 0,
           borderBottomRightRadius: borderRadiusToString(borderRadius?.borderBottomRightRadius) ?? 0,
           borderBottomLeftRadius: borderRadiusToString(borderRadius?.borderBottomLeftRadius) ?? 0
         },
-        ...properties.includes(StyleControlProperty.TextStyle) && {
+        ...properties.includes(Style.TextStyle) && {
           ...textStyle?.fontFamily && { fontFamily: `"${textStyle.fontFamily}"` },
           ...textStyle?.letterSpacing && { letterSpacing: textStyle.letterSpacing },
           ...textStyle?.fontSize && { fontSize: fontSizeToString(textStyle.fontSize) },

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 { useBorder, BorderSide } from '../../../components/hooks'\nimport { colorToString } from '../../../components/utils/colorToString'\nimport { useResponsiveStyle } from '../../../components/utils/responsive-style'\n\nimport {\n  FontSizePropertyData,\n  StyleControl,\n  StyleControlData,\n  StyleControlDefinition,\n  StyleControlProperty,\n  WidthPropertyData,\n} from '../../../controls'\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: StyleControlData | undefined,\n  controlDefinition: StyleControlDefinition,\n): CSSObject {\n  const { properties } = controlDefinition.config\n\n  return {\n    ...(properties.includes(StyleControlProperty.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(StyleControlProperty.Width) && {\n          width: widthToString(width) ?? '100%',\n        }),\n        ...(properties.includes(StyleControlProperty.Margin) &&\n          marginPropertyDataToStyle(margin ?? defaultMargin, defaultMargin)),\n        ...(properties.includes(StyleControlProperty.Padding) &&\n          paddingPropertyDataToStyle(padding ?? defaultPadding, defaultPadding)),\n        ...(properties.includes(StyleControlProperty.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(StyleControlProperty.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(StyleControlProperty.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: StyleControlData | undefined,\n  controlDefinition: StyleControlDefinition,\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":"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","names":["style"]}
+{"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":"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","names":["style"]}

package/dist/esm/runtimes/react/controls/text-area.js

@@ -1,11 +1,5 @@
-import { match } from "ts-pattern";
-import {
-  TextAreaControlDataTypeKey,
-  TextAreaControlDataTypeValueV1
-} from "@makeswift/controls";
 function useTextAreaValue(data, definition) {
-  const value = match(data).with({ [TextAreaControlDataTypeKey]: TextAreaControlDataTypeValueV1 }, (val) => val.value).otherwise((val) => val) ?? definition.config.defaultValue;
-  return value;
+  return definition.fromData(data) ?? definition.config.defaultValue;
 }
 export {
   useTextAreaValue

package/dist/esm/runtimes/react/controls/text-area.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/controls/text-area.ts"],"sourcesContent":["import { match } from 'ts-pattern'\nimport {\n  TextAreaControlData,\n  TextAreaControlDataTypeKey,\n  TextAreaControlDataTypeValueV1,\n  TextAreaControlDefinition,\n} from '@makeswift/controls'\n\nexport type TextAreaControlValue<T extends TextAreaControlDefinition> =\n  undefined extends T['config']['defaultValue'] ? string | undefined : string\n\nexport function useTextAreaValue<T extends TextAreaControlDefinition>(\n  data: TextAreaControlData | undefined,\n  definition: T,\n): TextAreaControlValue<T> {\n  const value: string | undefined =\n    match(data)\n      .with({ [TextAreaControlDataTypeKey]: TextAreaControlDataTypeValueV1 }, val => val.value)\n      .otherwise(val => val) ?? definition.config.defaultValue\n\n  return value as TextAreaControlValue<T>\n}\n"],"mappings":"AAAA,SAAS,aAAa;AACtB;AAAA,EAEE;AAAA,EACA;AAAA,OAEK;AAKA,SAAS,iBACd,MACA,YACyB;AACzB,QAAM,QACJ,MAAM,IAAI,EACP,KAAK,EAAE,CAAC,0BAA0B,GAAG,+BAA+B,GAAG,SAAO,IAAI,KAAK,EACvF,UAAU,SAAO,GAAG,KAAK,WAAW,OAAO;AAEhD,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../../../../src/runtimes/react/controls/text-area.ts"],"sourcesContent":["import { type DataType, type ResolvedValueType } from '@makeswift/controls'\n\nimport { TextAreaDefinition } from '../../../controls'\n\nexport function useTextAreaValue(\n  data: DataType<TextAreaDefinition> | undefined,\n  definition: TextAreaDefinition,\n): ResolvedValueType<TextAreaDefinition> {\n  return definition.fromData(data) ?? definition.config.defaultValue\n}\n"],"mappings":"AAIO,SAAS,iBACd,MACA,YACuC;AACvC,SAAO,WAAW,SAAS,IAAI,KAAK,WAAW,OAAO;AACxD;","names":[]}

package/dist/esm/runtimes/react/controls/text-input.js

@@ -1,11 +1,5 @@
-import { match } from "ts-pattern";
-import {
-  TextInputControlDataTypeKey,
-  TextInputControlDataTypeValueV1
-} from "@makeswift/controls";
 function useTextInputValue(data, definition) {
-  const value = match(data).with({ [TextInputControlDataTypeKey]: TextInputControlDataTypeValueV1 }, (val) => val.value).otherwise((val) => val) ?? definition.config.defaultValue;
-  return value;
+  return definition.fromData(data) ?? definition.config.defaultValue;
 }
 export {
   useTextInputValue

package/dist/esm/runtimes/react/controls/text-input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/controls/text-input.ts"],"sourcesContent":["import { match } from 'ts-pattern'\nimport {\n  TextInputControlData,\n  TextInputControlDataTypeKey,\n  TextInputControlDataTypeValueV1,\n  TextInputControlDefinition,\n} from '@makeswift/controls'\n\nexport type TextInputControlValue<T extends TextInputControlDefinition> =\n  undefined extends T['config']['defaultValue'] ? string | undefined : string\n\nexport function useTextInputValue<T extends TextInputControlDefinition>(\n  data: TextInputControlData | undefined,\n  definition: T,\n): TextInputControlValue<T> {\n  const value: string | undefined =\n    match(data)\n      .with({ [TextInputControlDataTypeKey]: TextInputControlDataTypeValueV1 }, val => val.value)\n      .otherwise(val => val) ?? definition.config.defaultValue\n\n  return value as TextInputControlValue<T>\n}\n"],"mappings":"AAAA,SAAS,aAAa;AACtB;AAAA,EAEE;AAAA,EACA;AAAA,OAEK;AAKA,SAAS,kBACd,MACA,YAC0B;AAC1B,QAAM,QACJ,MAAM,IAAI,EACP,KAAK,EAAE,CAAC,2BAA2B,GAAG,gCAAgC,GAAG,SAAO,IAAI,KAAK,EACzF,UAAU,SAAO,GAAG,KAAK,WAAW,OAAO;AAEhD,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../../../../src/runtimes/react/controls/text-input.ts"],"sourcesContent":["import { type DataType, type ResolvedValueType } from '@makeswift/controls'\n\nimport { TextInputDefinition } from '../../../controls'\n\nexport function useTextInputValue(\n  data: DataType<TextInputDefinition> | undefined,\n  definition: TextInputDefinition,\n): ResolvedValueType<TextInputDefinition> {\n  return definition.fromData(data) ?? definition.config.defaultValue\n}\n"],"mappings":"AAIO,SAAS,kBACd,MACA,YACwC;AACxC,SAAO,WAAW,SAAS,IAAI,KAAK,WAAW,OAAO;AACxD;","names":[]}

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 { TypographyControlData } from '../../../controls/typography'\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): TypographyControlData[number] | 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  TypographyControlData[number],\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<TypographyControlData[number], 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?: TypographyControlData[number] | 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: TypographyControlData[number] | 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":"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","names":["value"]}
+{"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":"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","names":["value"]}

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

@@ -1,12 +1,5 @@
 import { jsx } from "react/jsx-runtime";
 import { useRef } from "react";
-import {
-  CheckboxControlType,
-  IconRadioGroupControlType,
-  NumberControlType,
-  TextInputControlType,
-  TextAreaControlType
-} from "@makeswift/controls";
 import * as ReactPage from "../../state/react-page";
 import {
   useBoxShadow,
@@ -27,19 +20,24 @@ import {
   useResponsiveWidth
 } from "../../components/utils/responsive-style";
 import {
-  ColorControlType,
-  ComboboxControlType,
-  ImageControlType,
-  LinkControlType,
-  ListControlType,
-  SelectControlType,
-  ShapeControlType,
-  SlotControlType,
-  StyleControlType,
-  RichTextControlType,
-  RichTextV2ControlType,
-  StyleV2ControlType,
-  TypographyControlType
+  CheckboxDefinition,
+  NumberDefinition,
+  RichTextV2Definition,
+  ColorDefinition,
+  ComboboxDefinition,
+  IconRadioGroupDefinition,
+  ImageDefinition,
+  LinkDefinition,
+  ListDefinition,
+  RichTextV1Definition,
+  SelectDefinition,
+  ShapeDefinition,
+  SlotDefinition,
+  StyleDefinition,
+  StyleV2Definition,
+  TextAreaDefinition,
+  TextInputDefinition,
+  unstable_TypographyDefinition
 } from "../../controls";
 import { useFormattedStyle } from "./controls/style";
 import { ControlValue } from "./controls/control";
@@ -72,6 +70,7 @@ import {
   ResponsiveOpacity,
   getSocialLinksPropControllerDataSocialLinksData
 } from "@makeswift/prop-controllers";
+import { isLegacyDescriptor } from "../../prop-controllers/descriptors";
 import { useResponsiveLengthPropControllerData } from "../../components/hooks/useResponsiveLengthPropControllerData";
 import { useNumberPropControllerData } from "../../components/hooks/useNumberPropControllerData";
 import { useResponsiveColorPropControllerData } from "../../components/hooks/useResponsiveColorPropControllerData";
@@ -125,78 +124,84 @@ function PropsValue({ element, children }) {
   });
   return Object.entries(propControllerDescriptorsRef.current).reduceRight(
     (renderFn, [propName, descriptor]) => (propsValue) => {
-      switch (descriptor.type) {
-        case CheckboxControlType:
-        case NumberControlType:
-        case TextInputControlType:
-        case TextAreaControlType:
-        case SelectControlType:
-        case ColorControlType:
-        case IconRadioGroupControlType:
-        case ImageControlType:
-        case ComboboxControlType:
-        case ShapeControlType:
-        case ListControlType:
-        case LinkControlType:
-        case StyleV2ControlType:
-        case TypographyControlType:
-          return /* @__PURE__ */ jsx(
-            ControlValue,
-            {
-              definition: descriptor,
-              data: props[propName],
-              control: propControllers?.[propName],
-              children: (value) => renderFn({ ...propsValue, [propName]: value })
-            }
-          );
-        case StyleControlType: {
-          const control = propControllers?.[propName] ?? null;
-          return /* @__PURE__ */ jsx(
-            RenderHook,
-            {
-              hook: useFormattedStyle,
-              parameters: [props[propName], descriptor, control],
-              children: (value) => renderFn({ ...propsValue, [propName]: value })
-            },
-            descriptor.type
-          );
-        }
-        case RichTextControlType: {
-          const control = propControllers?.[propName] ?? null;
-          return /* @__PURE__ */ jsx(
-            RenderHook,
-            {
-              hook: useRichText,
-              parameters: [props[propName], control],
-              children: (value) => renderFn({ ...propsValue, [propName]: value })
-            },
-            descriptor.type
-          );
-        }
-        case RichTextV2ControlType: {
-          const control = propControllers?.[propName] ?? null;
-          return /* @__PURE__ */ jsx(
-            RenderHook,
-            {
-              hook: useRichTextV2,
-              parameters: [props[propName], descriptor, control],
-              children: (value) => renderFn({ ...propsValue, [propName]: value })
-            },
-            descriptor.type
-          );
-        }
-        case SlotControlType: {
-          const control = propControllers?.[propName] ?? null;
-          return /* @__PURE__ */ jsx(
-            RenderHook,
-            {
-              hook: useSlot,
-              parameters: [props[propName], control],
-              children: (value) => renderFn({ ...propsValue, [propName]: value })
-            },
-            descriptor.type
-          );
+      if (!isLegacyDescriptor(descriptor)) {
+        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] });
+      }
+      switch (descriptor.type) {
         case PropControllerTypes.Width:
           switch (descriptor.options.format) {
             case WidthPropControllerFormat.ClassName: