@makeswift/runtime 0.28.8-canary.13 → 0.28.8-canary.16

package/dist/esm/components/builtin/Form/Form.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/builtin/Form/Form.tsx"],"sourcesContent":["'use client'\n\nimport {\n  useState,\n  useEffect,\n  useRef,\n  useMemo,\n  forwardRef,\n  ComponentPropsWithoutRef,\n  Ref,\n  useImperativeHandle,\n  ForwardedRef,\n} from 'react'\nimport { Formik, getIn } from 'formik'\n\nimport { Check12 } from '../../icons/Check12'\n\nimport { getSizeHeight as getInputSizeHeight } from './components/Field/components/Input'\n\nimport {\n  Size,\n  Sizes,\n  Provider as FormContextProvider,\n  Shape,\n  Contrast,\n  Alignment,\n  Alignments,\n} from './context/FormContext'\nimport Placeholder from './components/Placeholder'\nimport Field from './components/Field'\nimport Spinner from './components/Spinner'\nimport Button from '../Button'\nimport type { TableColumn } from './types'\nimport { Link } from '../../shared/Link'\nimport { getBox, type BoxModelHandle } from '../../../state/modules/read-write/box-models'\nimport { PropControllersHandle } from '../../../state/modules/prop-controller-handles'\nimport { DescriptorsPropControllers } from '../../../prop-controllers/instances'\nimport { useTableFormFieldRefs } from '../../hooks/useTableFormFieldRefs'\nimport { cx } from '@emotion/css'\nimport { useResponsiveGridItem, useResponsiveStyle } from '../../utils/responsive-style'\nimport { type ResponsiveColor } from '../../utils/types'\n\nimport { useMakeswiftGraphQLApiClient } from '../../../runtimes/react/hooks/use-graphql-api-client'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { useTable } from '../../../runtimes/react/hooks/makeswift-api'\nimport {\n  type LinkData,\n  type ResponsiveGapData,\n  type ResponsiveLengthData,\n  type ResponsiveIconRadioGroupValue,\n  type ResponsiveTextStyleData,\n  type ResponsiveSelectValue,\n  type ResponsiveValue,\n  type TableFormFieldsData,\n  type TableFormFieldsDescriptor,\n} from '@makeswift/prop-controllers'\n\nconst LOCAL_STORAGE_NAMESPACE = '@@makeswift/components/form'\n\nfunction getSizeFontSize(size: Size): number {\n  switch (size) {\n    case Sizes.SMALL:\n      return 12\n\n    case Sizes.MEDIUM:\n      return 14\n\n    case Sizes.LARGE:\n      return 18\n\n    default:\n      throw new Error(`Invalid form size \"${size}\"`)\n  }\n}\n\ntype Props = {\n  id?: string\n  tableId?: string\n  fields?: TableFormFieldsData\n  submitLink?: LinkData\n  gap?: ResponsiveGapData\n  shape?: ResponsiveIconRadioGroupValue<Shape>\n  size?: ResponsiveIconRadioGroupValue<Size>\n  contrast?: ResponsiveIconRadioGroupValue<Contrast>\n  labelTextStyle?: ResponsiveTextStyleData\n  labelTextColor?: ResponsiveColor | null\n  submitTextStyle?: ResponsiveTextStyleData\n  brandColor?: ResponsiveColor | null\n  submitTextColor?: ResponsiveColor | null\n  submitLabel?: string\n  submitVariant?: ResponsiveSelectValue<\n    'flat' | 'outline' | 'shadow' | 'clear' | 'blocky' | 'bubbly' | 'skewed'\n  >\n  submitWidth?: ResponsiveLengthData\n  submitAlignment?: ResponsiveIconRadioGroupValue<Alignment>\n  width?: string\n  margin?: string\n}\n\ntype GridFormBaseProps = { size?: Props['size'] }\n\ntype GridFormProps = GridFormBaseProps &\n  Omit<ComponentPropsWithoutRef<'form'>, keyof GridFormBaseProps>\n\nconst GridForm = forwardRef(function GridFrom(\n  { className, size, ...restOfProps }: GridFormProps,\n  ref: ForwardedRef<HTMLFormElement>,\n) {\n  return (\n    <form\n      {...restOfProps}\n      ref={ref}\n      className={cx(\n        useStyle({ display: 'flex', flexWrap: 'wrap', width: '100%' }),\n        useStyle(\n          useResponsiveStyle([size] as const, ([size = Sizes.MEDIUM]) => ({\n            fontSize: getSizeFontSize(size),\n          })),\n        ),\n        className,\n      )}\n    />\n  )\n})\n\ntype GridItemBaseProps = {\n  grid: ResponsiveValue<{ spans: number[][]; count: number }>\n  index: number\n  rowGap: Props['gap']\n  columnGap: Props['gap']\n}\n\ntype GridItemProps = GridItemBaseProps &\n  Omit<ComponentPropsWithoutRef<'div'>, keyof GridItemBaseProps>\n\nconst GridItem = forwardRef(function GridItem(\n  { className, grid, index, rowGap, columnGap, ...restOfProps }: GridItemProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <div\n      {...restOfProps}\n      ref={ref}\n      className={cx(\n        useStyle({ alignSelf: 'flex-end', flexDirection: 'column' }),\n        useStyle(useResponsiveGridItem({ grid, index, rowGap, columnGap })),\n        className,\n      )}\n    />\n  )\n})\n\nfunction getAlignmentMargin(alignment: Alignment): string {\n  switch (alignment) {\n    case Alignments.LEFT:\n      return '0 auto 0 0'\n    case Alignments.RIGHT:\n      return '0 0 0 auto'\n    default:\n      return '0 auto'\n  }\n}\n\ntype StyledButtonBaseProps = { size?: Props['size']; alignment?: Props['submitAlignment'] }\n\ntype StyledButtonProps = StyledButtonBaseProps &\n  Omit<ComponentPropsWithoutRef<typeof Button>, keyof StyledButtonBaseProps>\n\nfunction StyledButton({ className, size, alignment, ...restOfProps }: StyledButtonProps) {\n  return (\n    <Button\n      {...restOfProps}\n      as=\"button\"\n      className={cx(\n        useStyle({ display: 'flex', alignItems: 'center', justifyContent: 'center' }),\n        useStyle(\n          useResponsiveStyle(\n            [size, alignment] as const,\n            ([size = Sizes.MEDIUM, alignment = Alignments.CENTER]) => ({\n              minHeight: getInputSizeHeight(size),\n              maxHeight: getInputSizeHeight(size),\n              margin: getAlignmentMargin(alignment),\n              paddingTop: 0,\n              paddingBottom: 0,\n            }),\n          ),\n        ),\n        className,\n      )}\n    />\n  )\n}\n\nfunction ErrorContainer({ className, ...restOfProps }: ComponentPropsWithoutRef<'div'>) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(\n        useStyle({\n          padding: '8px 16px',\n          backgroundColor: '#f19eb9',\n          borderRadius: 4,\n          marginTop: 16,\n        }),\n        className,\n      )}\n    />\n  )\n}\n\nfunction IconContainer({ className, ...restOfProps }: ComponentPropsWithoutRef<'div'>) {\n  return <div {...restOfProps} className={cx(useStyle({ fill: 'currentColor' }), className)} />\n}\n\nfunction ErrorMessage({ className, ...restOfProps }: ComponentPropsWithoutRef<'p'>) {\n  return (\n    <p\n      {...restOfProps}\n      className={cx(\n        useStyle({ fontSize: 12, margin: '8px 0', color: 'rgba(127, 0, 0, 0.95)' }),\n        className,\n      )}\n    />\n  )\n}\n\nfunction getTableColumnDefaultValue(tableColumn: TableColumn) {\n  switch (tableColumn.__typename) {\n    case 'CheckboxTableColumn':\n      return false\n\n    case 'MultipleSelectTableColumn':\n      return []\n\n    case 'SingleLineTextTableColumn':\n    case 'LongTextTableColumn':\n    case 'SingleSelectTableColumn':\n    case 'PhoneNumberTableColumn':\n    case 'EmailTableColumn':\n    case 'URLTableColumn':\n    case 'NumberTableColumn':\n    default:\n      return ''\n  }\n}\n\ntype Column = { columnId: string; data: Record<string, any> }\ntype Fields = Record<string, string | string[] | boolean>\n\ntype Descriptors = { fields?: TableFormFieldsDescriptor }\n\nconst Form = forwardRef(function Form(\n  {\n    id,\n    tableId,\n    fields: fieldsProp,\n    submitLabel = 'Submit',\n    submitLink,\n    shape,\n    size,\n    contrast,\n    brandColor,\n    gap,\n    width,\n    margin,\n    submitTextStyle,\n    submitVariant,\n    submitTextColor,\n    submitWidth,\n    submitAlignment,\n    labelTextStyle,\n    labelTextColor,\n  }: Props,\n  ref: Ref<BoxModelHandle & PropControllersHandle<Descriptors>>,\n) {\n  const fields = useMemo(() => fieldsProp?.fields ?? [], [fieldsProp])\n  const grid = useMemo(() => fieldsProp?.grid ?? [], [fieldsProp])\n  const table = useTable(tableId ?? null)\n  const client = useMakeswiftGraphQLApiClient()\n  const [refEl, setRefEl] = useState<HTMLElement | null>(null)\n  const [propControllers, setPropControllers] =\n    useState<DescriptorsPropControllers<Descriptors> | null>(null)\n  const [initialValues, setInitialValues] = useState<Fields>(() =>\n    fields.reduce((acc, formField) => {\n      const tableColumn = table && table.columns.find(field => field.id === formField.tableColumnId)\n      const defaultValue = formField ? formField.defaultValue : null\n\n      if (tableColumn) {\n        acc[tableColumn.name] =\n          defaultValue == null ? getTableColumnDefaultValue(tableColumn) : defaultValue\n      }\n\n      return acc\n    }, {} as Fields),\n  )\n  const controller = propControllers?.fields\n  const { container, items } = useTableFormFieldRefs(controller, { fieldsCount: fields.length })\n  const [isDone, setIsDone] = useState(false)\n  const linkRef = useRef<HTMLAnchorElement>(null)\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      getDomNode() {\n        return refEl instanceof Element ? refEl : null\n      },\n      getBoxModel() {\n        return refEl instanceof Element ? getBox(refEl) : null\n      },\n      setPropControllers,\n    }),\n    [refEl, setPropControllers],\n  )\n\n  useEffect(() => {\n    container(refEl)\n  }, [container, refEl])\n\n  useEffect(() => {\n    if (!isDone) return\n\n    let timeoutId = setTimeout(() => setIsDone(false), 2500)\n\n    return () => clearTimeout(timeoutId)\n  }, [isDone])\n\n  function getTableColumn({ tableColumnId }: any) {\n    return table && table.columns.find(field => tableColumnId === field.id)\n  }\n\n  async function handleSubmit(values: any, { setSubmitting, resetForm, setStatus }: any) {\n    if (table) {\n      const columns: Column[] = []\n\n      fields.forEach(field => {\n        const tableColumn = getTableColumn(field)\n\n        if (tableColumn) {\n          const data = values[tableColumn.name]\n\n          if (data) {\n            columns.push({ columnId: field.tableColumnId, data })\n\n            if (field.autofill) {\n              localStorage.setItem(\n                `${LOCAL_STORAGE_NAMESPACE}/${tableColumn.name}`,\n                JSON.stringify(data),\n              )\n            }\n          }\n        }\n      })\n\n      try {\n        await client.createTableRecord(table.id, columns)\n        setIsDone(true)\n        setInitialValues(prev =>\n          fields.reduce(\n            (acc, field) => {\n              const tableColumn = getTableColumn(field)\n\n              if (tableColumn) {\n                const data = values[tableColumn.name]\n\n                if (data && field.autofill) return { ...acc, [tableColumn.name]: data }\n              }\n\n              return acc\n            },\n            { ...prev },\n          ),\n        )\n        resetForm()\n\n        if (linkRef.current != null) linkRef.current.click()\n      } catch (error) {\n        setStatus({ error: 'An unexpected error has occurred, please try again later' })\n      } finally {\n        setSubmitting(false)\n      }\n    }\n  }\n\n  useEffect(() => {\n    setInitialValues(prev =>\n      fields.reduce(\n        (acc, formField) => {\n          const tableColumn =\n            table && table.columns.find(field => field.id === formField.tableColumnId)\n\n          if (tableColumn && formField.autofill) {\n            const storedValue = localStorage.getItem(\n              `${LOCAL_STORAGE_NAMESPACE}/${tableColumn.name}`,\n            )\n\n            if (storedValue) {\n              try {\n                acc[tableColumn.name] = JSON.parse(storedValue)\n              } catch (e) {\n                // Ignore\n              }\n            }\n          }\n\n          return acc\n        },\n        { ...prev },\n      ),\n    )\n  }, [fields, table])\n\n  return (\n    <FormContextProvider\n      value={{ shape, size, contrast, brandColor, labelTextStyle, labelTextColor }}\n    >\n      {tableId == null ? (\n        <Placeholder ref={setRefEl} width={width} margin={margin} />\n      ) : (\n        <>\n          <Formik\n            onSubmit={handleSubmit}\n            initialValues={initialValues}\n            initialStatus={{ error: null }}\n            enableReinitialize\n          >\n            {formik => {\n              const error = formik.status && formik.status.error\n              const errors = fields\n                .map(field => {\n                  const tableColumn = getTableColumn(field)\n\n                  return (\n                    tableColumn &&\n                    getIn(formik.touched, tableColumn.name) &&\n                    getIn(formik.errors, tableColumn.name)\n                  )\n                })\n                .filter(message => typeof message === 'string')\n\n              return (\n                <>\n                  <GridForm\n                    ref={setRefEl}\n                    id={id}\n                    className={cx(width, margin)}\n                    size={size}\n                    onSubmit={formik.handleSubmit}\n                    onReset={formik.handleReset}\n                    noValidate\n                  >\n                    {fields.map((field, index) => {\n                      const tableColumn = getTableColumn(field)\n\n                      return (\n                        <GridItem\n                          key={field.id}\n                          ref={items[index]}\n                          grid={grid}\n                          index={index}\n                          rowGap={gap}\n                          columnGap={gap}\n                        >\n                          <Field tableColumn={tableColumn} tableFormField={field} />\n                        </GridItem>\n                      )\n                    })}\n                    <GridItem\n                      ref={items[fields.length]}\n                      grid={grid}\n                      index={fields.length}\n                      rowGap={gap}\n                      columnGap={gap}\n                    >\n                      <StyledButton\n                        type=\"submit\"\n                        // @ts-ignore: `disabled` is in `'button'` but not in `T`.\n                        disabled={formik.isSubmitting || isDone}\n                        shape={shape}\n                        size={size}\n                        color={brandColor}\n                        variant={submitVariant}\n                        textColor={submitTextColor}\n                        width={submitWidth}\n                        alignment={submitAlignment}\n                        textStyle={submitTextStyle}\n                      >\n                        {formik.isSubmitting ? (\n                          <Spinner />\n                        ) : isDone ? (\n                          <IconContainer>\n                            <Check12 />\n                          </IconContainer>\n                        ) : (\n                          submitLabel\n                        )}\n                      </StyledButton>\n                      {(errors.length > 0 || error) && (\n                        <ErrorContainer>\n                          {errors.map(message => (\n                            <ErrorMessage key={message}>{message}</ErrorMessage>\n                          ))}\n                          {error != null && <ErrorMessage>{error}</ErrorMessage>}\n                        </ErrorContainer>\n                      )}\n                    </GridItem>\n                  </GridForm>\n                  {submitLink != null && <Link ref={linkRef} hidden link={submitLink} />}\n                </>\n              )\n            }}\n          </Formik>\n        </>\n      )}\n    </FormContextProvider>\n  )\n})\n\nexport default Form\n"],"mappings":"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","names":["size","GridItem","alignment","Form"]}
+{"version":3,"sources":["../../../../../src/components/builtin/Form/Form.tsx"],"sourcesContent":["'use client'\n\nimport {\n  useState,\n  useEffect,\n  useRef,\n  useMemo,\n  forwardRef,\n  ComponentPropsWithoutRef,\n  Ref,\n  useImperativeHandle,\n  ForwardedRef,\n} from 'react'\nimport { Formik, getIn } from 'formik'\n\nimport { Check12 } from '../../icons/Check12'\n\nimport { getSizeHeight as getInputSizeHeight } from './components/Field/components/Input'\n\nimport {\n  Size,\n  Sizes,\n  Provider as FormContextProvider,\n  Shape,\n  Contrast,\n  Alignment,\n  Alignments,\n} from './context/FormContext'\nimport Placeholder from './components/Placeholder'\nimport Field from './components/Field'\nimport Spinner from './components/Spinner'\nimport Button from '../Button'\nimport type { TableColumn } from './types'\nimport { Link } from '../../shared/Link'\nimport { getBox, type BoxModelHandle } from '../../../state/modules/read-write/box-models'\nimport { PropControllersHandle } from '../../../state/modules/read-write/prop-controllers'\nimport { DescriptorsPropControllers } from '../../../prop-controllers/instances'\nimport { useTableFormFieldRefs } from '../../hooks/useTableFormFieldRefs'\nimport { cx } from '@emotion/css'\nimport { useResponsiveGridItem, useResponsiveStyle } from '../../utils/responsive-style'\nimport { type ResponsiveColor } from '../../utils/types'\n\nimport { useMakeswiftGraphQLApiClient } from '../../../runtimes/react/hooks/use-graphql-api-client'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { useTable } from '../../../runtimes/react/hooks/makeswift-api'\nimport {\n  type LinkData,\n  type ResponsiveGapData,\n  type ResponsiveLengthData,\n  type ResponsiveIconRadioGroupValue,\n  type ResponsiveTextStyleData,\n  type ResponsiveSelectValue,\n  type ResponsiveValue,\n  type TableFormFieldsData,\n  type TableFormFieldsDescriptor,\n} from '@makeswift/prop-controllers'\n\nconst LOCAL_STORAGE_NAMESPACE = '@@makeswift/components/form'\n\nfunction getSizeFontSize(size: Size): number {\n  switch (size) {\n    case Sizes.SMALL:\n      return 12\n\n    case Sizes.MEDIUM:\n      return 14\n\n    case Sizes.LARGE:\n      return 18\n\n    default:\n      throw new Error(`Invalid form size \"${size}\"`)\n  }\n}\n\ntype Props = {\n  id?: string\n  tableId?: string\n  fields?: TableFormFieldsData\n  submitLink?: LinkData\n  gap?: ResponsiveGapData\n  shape?: ResponsiveIconRadioGroupValue<Shape>\n  size?: ResponsiveIconRadioGroupValue<Size>\n  contrast?: ResponsiveIconRadioGroupValue<Contrast>\n  labelTextStyle?: ResponsiveTextStyleData\n  labelTextColor?: ResponsiveColor | null\n  submitTextStyle?: ResponsiveTextStyleData\n  brandColor?: ResponsiveColor | null\n  submitTextColor?: ResponsiveColor | null\n  submitLabel?: string\n  submitVariant?: ResponsiveSelectValue<\n    'flat' | 'outline' | 'shadow' | 'clear' | 'blocky' | 'bubbly' | 'skewed'\n  >\n  submitWidth?: ResponsiveLengthData\n  submitAlignment?: ResponsiveIconRadioGroupValue<Alignment>\n  width?: string\n  margin?: string\n}\n\ntype GridFormBaseProps = { size?: Props['size'] }\n\ntype GridFormProps = GridFormBaseProps &\n  Omit<ComponentPropsWithoutRef<'form'>, keyof GridFormBaseProps>\n\nconst GridForm = forwardRef(function GridFrom(\n  { className, size, ...restOfProps }: GridFormProps,\n  ref: ForwardedRef<HTMLFormElement>,\n) {\n  return (\n    <form\n      {...restOfProps}\n      ref={ref}\n      className={cx(\n        useStyle({ display: 'flex', flexWrap: 'wrap', width: '100%' }),\n        useStyle(\n          useResponsiveStyle([size] as const, ([size = Sizes.MEDIUM]) => ({\n            fontSize: getSizeFontSize(size),\n          })),\n        ),\n        className,\n      )}\n    />\n  )\n})\n\ntype GridItemBaseProps = {\n  grid: ResponsiveValue<{ spans: number[][]; count: number }>\n  index: number\n  rowGap: Props['gap']\n  columnGap: Props['gap']\n}\n\ntype GridItemProps = GridItemBaseProps &\n  Omit<ComponentPropsWithoutRef<'div'>, keyof GridItemBaseProps>\n\nconst GridItem = forwardRef(function GridItem(\n  { className, grid, index, rowGap, columnGap, ...restOfProps }: GridItemProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <div\n      {...restOfProps}\n      ref={ref}\n      className={cx(\n        useStyle({ alignSelf: 'flex-end', flexDirection: 'column' }),\n        useStyle(useResponsiveGridItem({ grid, index, rowGap, columnGap })),\n        className,\n      )}\n    />\n  )\n})\n\nfunction getAlignmentMargin(alignment: Alignment): string {\n  switch (alignment) {\n    case Alignments.LEFT:\n      return '0 auto 0 0'\n    case Alignments.RIGHT:\n      return '0 0 0 auto'\n    default:\n      return '0 auto'\n  }\n}\n\ntype StyledButtonBaseProps = { size?: Props['size']; alignment?: Props['submitAlignment'] }\n\ntype StyledButtonProps = StyledButtonBaseProps &\n  Omit<ComponentPropsWithoutRef<typeof Button>, keyof StyledButtonBaseProps>\n\nfunction StyledButton({ className, size, alignment, ...restOfProps }: StyledButtonProps) {\n  return (\n    <Button\n      {...restOfProps}\n      as=\"button\"\n      className={cx(\n        useStyle({ display: 'flex', alignItems: 'center', justifyContent: 'center' }),\n        useStyle(\n          useResponsiveStyle(\n            [size, alignment] as const,\n            ([size = Sizes.MEDIUM, alignment = Alignments.CENTER]) => ({\n              minHeight: getInputSizeHeight(size),\n              maxHeight: getInputSizeHeight(size),\n              margin: getAlignmentMargin(alignment),\n              paddingTop: 0,\n              paddingBottom: 0,\n            }),\n          ),\n        ),\n        className,\n      )}\n    />\n  )\n}\n\nfunction ErrorContainer({ className, ...restOfProps }: ComponentPropsWithoutRef<'div'>) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(\n        useStyle({\n          padding: '8px 16px',\n          backgroundColor: '#f19eb9',\n          borderRadius: 4,\n          marginTop: 16,\n        }),\n        className,\n      )}\n    />\n  )\n}\n\nfunction IconContainer({ className, ...restOfProps }: ComponentPropsWithoutRef<'div'>) {\n  return <div {...restOfProps} className={cx(useStyle({ fill: 'currentColor' }), className)} />\n}\n\nfunction ErrorMessage({ className, ...restOfProps }: ComponentPropsWithoutRef<'p'>) {\n  return (\n    <p\n      {...restOfProps}\n      className={cx(\n        useStyle({ fontSize: 12, margin: '8px 0', color: 'rgba(127, 0, 0, 0.95)' }),\n        className,\n      )}\n    />\n  )\n}\n\nfunction getTableColumnDefaultValue(tableColumn: TableColumn) {\n  switch (tableColumn.__typename) {\n    case 'CheckboxTableColumn':\n      return false\n\n    case 'MultipleSelectTableColumn':\n      return []\n\n    case 'SingleLineTextTableColumn':\n    case 'LongTextTableColumn':\n    case 'SingleSelectTableColumn':\n    case 'PhoneNumberTableColumn':\n    case 'EmailTableColumn':\n    case 'URLTableColumn':\n    case 'NumberTableColumn':\n    default:\n      return ''\n  }\n}\n\ntype Column = { columnId: string; data: Record<string, any> }\ntype Fields = Record<string, string | string[] | boolean>\n\ntype Descriptors = { fields?: TableFormFieldsDescriptor }\n\nconst Form = forwardRef(function Form(\n  {\n    id,\n    tableId,\n    fields: fieldsProp,\n    submitLabel = 'Submit',\n    submitLink,\n    shape,\n    size,\n    contrast,\n    brandColor,\n    gap,\n    width,\n    margin,\n    submitTextStyle,\n    submitVariant,\n    submitTextColor,\n    submitWidth,\n    submitAlignment,\n    labelTextStyle,\n    labelTextColor,\n  }: Props,\n  ref: Ref<BoxModelHandle & PropControllersHandle<Descriptors>>,\n) {\n  const fields = useMemo(() => fieldsProp?.fields ?? [], [fieldsProp])\n  const grid = useMemo(() => fieldsProp?.grid ?? [], [fieldsProp])\n  const table = useTable(tableId ?? null)\n  const client = useMakeswiftGraphQLApiClient()\n  const [refEl, setRefEl] = useState<HTMLElement | null>(null)\n  const [propControllers, setPropControllers] =\n    useState<DescriptorsPropControllers<Descriptors> | null>(null)\n  const [initialValues, setInitialValues] = useState<Fields>(() =>\n    fields.reduce((acc, formField) => {\n      const tableColumn = table && table.columns.find(field => field.id === formField.tableColumnId)\n      const defaultValue = formField ? formField.defaultValue : null\n\n      if (tableColumn) {\n        acc[tableColumn.name] =\n          defaultValue == null ? getTableColumnDefaultValue(tableColumn) : defaultValue\n      }\n\n      return acc\n    }, {} as Fields),\n  )\n  const controller = propControllers?.fields\n  const { container, items } = useTableFormFieldRefs(controller, { fieldsCount: fields.length })\n  const [isDone, setIsDone] = useState(false)\n  const linkRef = useRef<HTMLAnchorElement>(null)\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      getDomNode() {\n        return refEl instanceof Element ? refEl : null\n      },\n      getBoxModel() {\n        return refEl instanceof Element ? getBox(refEl) : null\n      },\n      setPropControllers,\n    }),\n    [refEl, setPropControllers],\n  )\n\n  useEffect(() => {\n    container(refEl)\n  }, [container, refEl])\n\n  useEffect(() => {\n    if (!isDone) return\n\n    let timeoutId = setTimeout(() => setIsDone(false), 2500)\n\n    return () => clearTimeout(timeoutId)\n  }, [isDone])\n\n  function getTableColumn({ tableColumnId }: any) {\n    return table && table.columns.find(field => tableColumnId === field.id)\n  }\n\n  async function handleSubmit(values: any, { setSubmitting, resetForm, setStatus }: any) {\n    if (table) {\n      const columns: Column[] = []\n\n      fields.forEach(field => {\n        const tableColumn = getTableColumn(field)\n\n        if (tableColumn) {\n          const data = values[tableColumn.name]\n\n          if (data) {\n            columns.push({ columnId: field.tableColumnId, data })\n\n            if (field.autofill) {\n              localStorage.setItem(\n                `${LOCAL_STORAGE_NAMESPACE}/${tableColumn.name}`,\n                JSON.stringify(data),\n              )\n            }\n          }\n        }\n      })\n\n      try {\n        await client.createTableRecord(table.id, columns)\n        setIsDone(true)\n        setInitialValues(prev =>\n          fields.reduce(\n            (acc, field) => {\n              const tableColumn = getTableColumn(field)\n\n              if (tableColumn) {\n                const data = values[tableColumn.name]\n\n                if (data && field.autofill) return { ...acc, [tableColumn.name]: data }\n              }\n\n              return acc\n            },\n            { ...prev },\n          ),\n        )\n        resetForm()\n\n        if (linkRef.current != null) linkRef.current.click()\n      } catch (error) {\n        setStatus({ error: 'An unexpected error has occurred, please try again later' })\n      } finally {\n        setSubmitting(false)\n      }\n    }\n  }\n\n  useEffect(() => {\n    setInitialValues(prev =>\n      fields.reduce(\n        (acc, formField) => {\n          const tableColumn =\n            table && table.columns.find(field => field.id === formField.tableColumnId)\n\n          if (tableColumn && formField.autofill) {\n            const storedValue = localStorage.getItem(\n              `${LOCAL_STORAGE_NAMESPACE}/${tableColumn.name}`,\n            )\n\n            if (storedValue) {\n              try {\n                acc[tableColumn.name] = JSON.parse(storedValue)\n              } catch (e) {\n                // Ignore\n              }\n            }\n          }\n\n          return acc\n        },\n        { ...prev },\n      ),\n    )\n  }, [fields, table])\n\n  return (\n    <FormContextProvider\n      value={{ shape, size, contrast, brandColor, labelTextStyle, labelTextColor }}\n    >\n      {tableId == null ? (\n        <Placeholder ref={setRefEl} width={width} margin={margin} />\n      ) : (\n        <>\n          <Formik\n            onSubmit={handleSubmit}\n            initialValues={initialValues}\n            initialStatus={{ error: null }}\n            enableReinitialize\n          >\n            {formik => {\n              const error = formik.status && formik.status.error\n              const errors = fields\n                .map(field => {\n                  const tableColumn = getTableColumn(field)\n\n                  return (\n                    tableColumn &&\n                    getIn(formik.touched, tableColumn.name) &&\n                    getIn(formik.errors, tableColumn.name)\n                  )\n                })\n                .filter(message => typeof message === 'string')\n\n              return (\n                <>\n                  <GridForm\n                    ref={setRefEl}\n                    id={id}\n                    className={cx(width, margin)}\n                    size={size}\n                    onSubmit={formik.handleSubmit}\n                    onReset={formik.handleReset}\n                    noValidate\n                  >\n                    {fields.map((field, index) => {\n                      const tableColumn = getTableColumn(field)\n\n                      return (\n                        <GridItem\n                          key={field.id}\n                          ref={items[index]}\n                          grid={grid}\n                          index={index}\n                          rowGap={gap}\n                          columnGap={gap}\n                        >\n                          <Field tableColumn={tableColumn} tableFormField={field} />\n                        </GridItem>\n                      )\n                    })}\n                    <GridItem\n                      ref={items[fields.length]}\n                      grid={grid}\n                      index={fields.length}\n                      rowGap={gap}\n                      columnGap={gap}\n                    >\n                      <StyledButton\n                        type=\"submit\"\n                        // @ts-ignore: `disabled` is in `'button'` but not in `T`.\n                        disabled={formik.isSubmitting || isDone}\n                        shape={shape}\n                        size={size}\n                        color={brandColor}\n                        variant={submitVariant}\n                        textColor={submitTextColor}\n                        width={submitWidth}\n                        alignment={submitAlignment}\n                        textStyle={submitTextStyle}\n                      >\n                        {formik.isSubmitting ? (\n                          <Spinner />\n                        ) : isDone ? (\n                          <IconContainer>\n                            <Check12 />\n                          </IconContainer>\n                        ) : (\n                          submitLabel\n                        )}\n                      </StyledButton>\n                      {(errors.length > 0 || error) && (\n                        <ErrorContainer>\n                          {errors.map(message => (\n                            <ErrorMessage key={message}>{message}</ErrorMessage>\n                          ))}\n                          {error != null && <ErrorMessage>{error}</ErrorMessage>}\n                        </ErrorContainer>\n                      )}\n                    </GridItem>\n                  </GridForm>\n                  {submitLink != null && <Link ref={linkRef} hidden link={submitLink} />}\n                </>\n              )\n            }}\n          </Formik>\n        </>\n      )}\n    </FormContextProvider>\n  )\n})\n\nexport default Form\n"],"mappings":"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","names":["size","GridItem","alignment","Form"]}

package/dist/esm/next/testing/breakpoints.js

@@ -1,9 +1,2 @@
-const DESKTOP_MEDIA_QUERY = "only screen and (min-width: 769px)";
-const TABLET_MEDIA_QUERY = "only screen and (min-width: 769px)";
-const MOBILE_MEDIA_QUERY = "only screen and (min-width: 769px)";
-export {
-  DESKTOP_MEDIA_QUERY,
-  MOBILE_MEDIA_QUERY,
-  TABLET_MEDIA_QUERY
-};
+export * from "../../testing/breakpoints";
 //# sourceMappingURL=breakpoints.js.map

package/dist/esm/next/testing/breakpoints.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/next/testing/breakpoints.ts"],"sourcesContent":["export const DESKTOP_MEDIA_QUERY = 'only screen and (min-width: 769px)'\nexport const TABLET_MEDIA_QUERY = 'only screen and (min-width: 769px)'\nexport const MOBILE_MEDIA_QUERY = 'only screen and (min-width: 769px)'\n"],"mappings":"AAAO,MAAM,sBAAsB;AAC5B,MAAM,qBAAqB;AAC3B,MAAM,qBAAqB;","names":[]}
+{"version":3,"sources":["../../../../src/next/testing/breakpoints.ts"],"sourcesContent":["export * from '../../testing/breakpoints'\n"],"mappings":"AAAA,cAAc;","names":[]}

package/dist/esm/next/testing/element-data.js

@@ -1,76 +1,2 @@
-import { randomUUID } from "crypto";
-import { CacheData } from "../../api/api-resources-client";
-import { MakeswiftComponentType } from "../../components/builtin/constants";
-function createRootComponent(elements, rootId) {
-  return {
-    key: rootId ?? randomUUID(),
-    type: MakeswiftComponentType.Root,
-    props: {
-      children: {
-        columns: [
-          {
-            deviceId: "desktop",
-            value: {
-              count: 12,
-              spans: elements?.map(() => [12])
-            }
-          }
-        ],
-        elements
-      }
-    }
-  };
-}
-const isDocument = (elementDataOrDocument) => "snippets" in elementDataOrDocument || "fonts" in elementDataOrDocument || "meta" in elementDataOrDocument || "seo" in elementDataOrDocument;
-function createMakeswiftPageSnapshot(elementDataOrDocument, {
-  cacheData = {},
-  locale = null
-} = {}) {
-  return {
-    document: isDocument(elementDataOrDocument) ? elementDataOrDocument : {
-      id: "test-page-id",
-      site: { id: "test-site-id" },
-      data: elementDataOrDocument,
-      snippets: [],
-      fonts: [],
-      meta: {},
-      seo: {},
-      localizedPages: [],
-      locale
-    },
-    cacheData: {
-      ...CacheData.empty(),
-      ...cacheData
-    }
-  };
-}
-function createMakeswiftComponentSnapshot(elementData, {
-  cacheData = {},
-  locale = null
-} = {}) {
-  return {
-    key: randomUUID(),
-    document: {
-      id: "test-component-id",
-      name: "Test Component Document",
-      siteId: "test-site-id",
-      data: elementData,
-      inheritsFromParent: false,
-      locale
-    },
-    meta: {
-      allowLocaleFallback: false,
-      requestedLocale: locale
-    },
-    cacheData: {
-      ...CacheData.empty(),
-      ...cacheData
-    }
-  };
-}
-export {
-  createMakeswiftComponentSnapshot,
-  createMakeswiftPageSnapshot,
-  createRootComponent
-};
+export * from "../../testing/element-data";
 //# sourceMappingURL=element-data.js.map

package/dist/esm/next/testing/element-data.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/next/testing/element-data.ts"],"sourcesContent":["import { randomUUID } from 'crypto'\n\nimport {\n  type MakeswiftPageSnapshot,\n  type MakeswiftPageDocument,\n  type MakeswiftComponentSnapshot,\n} from '../../client'\nimport { CacheData } from '../../api/api-resources-client'\nimport { type ElementData } from '../../state/read-only-state'\nimport { MakeswiftComponentType } from '../../components/builtin/constants'\n\nexport function createRootComponent(elements: ElementData[], rootId?: string) {\n  return {\n    key: rootId ?? randomUUID(),\n    type: MakeswiftComponentType.Root,\n    props: {\n      children: {\n        columns: [\n          {\n            deviceId: 'desktop',\n            value: {\n              count: 12,\n              spans: elements?.map(() => [12]),\n            },\n          },\n        ],\n        elements,\n      },\n    },\n  }\n}\n\nconst isDocument = (\n  elementDataOrDocument: ElementData | MakeswiftPageDocument,\n): elementDataOrDocument is MakeswiftPageDocument =>\n  'snippets' in elementDataOrDocument ||\n  'fonts' in elementDataOrDocument ||\n  'meta' in elementDataOrDocument ||\n  'seo' in elementDataOrDocument\n\nexport function createMakeswiftPageSnapshot(\n  elementDataOrDocument: ElementData | MakeswiftPageDocument,\n  {\n    cacheData = {},\n    locale = null,\n  }: { cacheData?: Partial<MakeswiftPageSnapshot['cacheData']>; locale?: string | null } = {},\n): MakeswiftPageSnapshot {\n  return {\n    document: isDocument(elementDataOrDocument)\n      ? elementDataOrDocument\n      : {\n          id: 'test-page-id',\n          site: { id: 'test-site-id' },\n          data: elementDataOrDocument,\n          snippets: [],\n          fonts: [],\n          meta: {},\n          seo: {},\n          localizedPages: [],\n          locale,\n        },\n    cacheData: {\n      ...CacheData.empty(),\n      ...cacheData,\n    },\n  }\n}\n\nexport function createMakeswiftComponentSnapshot(\n  elementData: ElementData | null,\n  {\n    cacheData = {},\n    locale = null,\n  }: { cacheData?: Partial<MakeswiftComponentSnapshot['cacheData']>; locale?: string | null } = {},\n): MakeswiftComponentSnapshot {\n  return {\n    key: randomUUID(),\n    document: {\n      id: 'test-component-id',\n      name: 'Test Component Document',\n      siteId: 'test-site-id',\n      data: elementData,\n      inheritsFromParent: false,\n      locale,\n    },\n    meta: {\n      allowLocaleFallback: false,\n      requestedLocale: locale,\n    },\n    cacheData: {\n      ...CacheData.empty(),\n      ...cacheData,\n    },\n  }\n}\n"],"mappings":"AAAA,SAAS,kBAAkB;AAO3B,SAAS,iBAAiB;AAE1B,SAAS,8BAA8B;AAEhC,SAAS,oBAAoB,UAAyB,QAAiB;AAC5E,SAAO;AAAA,IACL,KAAK,UAAU,WAAW;AAAA,IAC1B,MAAM,uBAAuB;AAAA,IAC7B,OAAO;AAAA,MACL,UAAU;AAAA,QACR,SAAS;AAAA,UACP;AAAA,YACE,UAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAO;AAAA,cACP,OAAO,UAAU,IAAI,MAAM,CAAC,EAAE,CAAC;AAAA,YACjC;AAAA,UACF;AAAA,QACF;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAEA,MAAM,aAAa,CACjB,0BAEA,cAAc,yBACd,WAAW,yBACX,UAAU,yBACV,SAAS;AAEJ,SAAS,4BACd,uBACA;AAAA,EACE,YAAY,CAAC;AAAA,EACb,SAAS;AACX,IAAyF,CAAC,GACnE;AACvB,SAAO;AAAA,IACL,UAAU,WAAW,qBAAqB,IACtC,wBACA;AAAA,MACE,IAAI;AAAA,MACJ,MAAM,EAAE,IAAI,eAAe;AAAA,MAC3B,MAAM;AAAA,MACN,UAAU,CAAC;AAAA,MACX,OAAO,CAAC;AAAA,MACR,MAAM,CAAC;AAAA,MACP,KAAK,CAAC;AAAA,MACN,gBAAgB,CAAC;AAAA,MACjB;AAAA,IACF;AAAA,IACJ,WAAW;AAAA,MACT,GAAG,UAAU,MAAM;AAAA,MACnB,GAAG;AAAA,IACL;AAAA,EACF;AACF;AAEO,SAAS,iCACd,aACA;AAAA,EACE,YAAY,CAAC;AAAA,EACb,SAAS;AACX,IAA8F,CAAC,GACnE;AAC5B,SAAO;AAAA,IACL,KAAK,WAAW;AAAA,IAChB,UAAU;AAAA,MACR,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,oBAAoB;AAAA,MACpB;AAAA,IACF;AAAA,IACA,MAAM;AAAA,MACJ,qBAAqB;AAAA,MACrB,iBAAiB;AAAA,IACnB;AAAA,IACA,WAAW;AAAA,MACT,GAAG,UAAU,MAAM;AAAA,MACnB,GAAG;AAAA,IACL;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../../../src/next/testing/element-data.ts"],"sourcesContent":["export * from '../../testing/element-data'\n"],"mappings":"AAAA,cAAc;","names":[]}

package/dist/esm/next/testing/react-runtime.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/next/testing/react-runtime.tsx"],"sourcesContent":["export { createReactRuntime } from '../../runtimes/react/testing/react-runtime'\n"],"mappings":"AAAA,SAAS,0BAA0B;","names":[]}
+{"version":3,"sources":["../../../../src/next/testing/react-runtime.ts"],"sourcesContent":["export { createReactRuntime } from '../../runtimes/react/testing/react-runtime'\n"],"mappings":"AAAA,SAAS,0BAA0B;","names":[]}

package/dist/esm/runtimes/react/components/Element.js

@@ -1,16 +1,24 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { forwardRef, memo, useCallback, useImperativeHandle, useRef } from "react";
+import {
+  forwardRef,
+  memo,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+  lazy
+} from "react";
 import {
   isElementReference
 } from "../../../state/read-only-state";
-import { ElementRegistration } from "./ElementRegistration";
-import { ElementReference } from "./ElementReference";
-import { ElementData } from "./ElementData";
-import { ElementImperativeHandle } from "../element-imperative-handle";
-import { FindDomNode } from "../find-dom-node";
 import { FallbackComponent } from "../../../components/shared/FallbackComponent";
 import { ErrorBoundary } from "../../../components/shared/ErrorBoundary";
+import { useIsReadOnly } from "../hooks/use-is-read-only";
+import { ElementImperativeHandle } from "../element-imperative-handle";
+import { FindDomNode } from "../find-dom-node";
+import { ElementReference } from "./ElementReference";
+import { ElementData } from "./ElementData";
+const BuilderElementRegistration = lazy(() => import("./ElementRegistration"));
 const Element = memo(
   forwardRef(function Element2({ element }, ref) {
     const useFindDomNodeRef = useRef(true);
@@ -25,6 +33,7 @@ const Element = memo(
       imperativeHandleRef.current.callback(() => current);
     }, []);
     useImperativeHandle(ref, () => imperativeHandleRef.current, []);
+    const ElementRegistration = useIsReadOnly() ? NoOp : BuilderElementRegistration;
     return /* @__PURE__ */ jsx(ElementRegistration, { componentHandle: imperativeHandleRef.current, elementKey: element.key, children: /* @__PURE__ */ jsx(FindDomNode, { ref: findDomNodeCallbackRef, children: /* @__PURE__ */ jsx(ErrorBoundary, { FallbackComponent: ErrorFallback, children: isElementReference(element) ? /* @__PURE__ */ jsx(
       ElementReference,
       {
@@ -35,6 +44,9 @@ const Element = memo(
     ) : /* @__PURE__ */ jsx(ElementData, { ref: elementCallbackRef, elementData: element }, element.key) }) }) });
   })
 );
+function NoOp({ children }) {
+  return children;
+}
 function ErrorFallback() {
   return /* @__PURE__ */ jsx(FallbackComponent, { text: `Error rendering component` });
 }

package/dist/esm/runtimes/react/components/Element.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/components/Element.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef, memo, Ref, useCallback, useImperativeHandle, useRef, ReactNode } from 'react'\nimport {\n  isElementReference,\n  type Element as ElementDataOrRef,\n} from '../../../state/read-only-state'\nimport { ElementRegistration } from './ElementRegistration'\nimport { ElementReference } from './ElementReference'\nimport { ElementData } from './ElementData'\nimport { ElementImperativeHandle } from '../element-imperative-handle'\nimport { FindDomNode } from '../find-dom-node'\nimport { FallbackComponent } from '../../../components/shared/FallbackComponent'\nimport { ErrorBoundary } from '../../../components/shared/ErrorBoundary'\n\ntype Props = {\n  element: ElementDataOrRef\n}\n\nexport const Element = memo(\n  forwardRef(function Element(\n    { element }: Props,\n    ref: Ref<ElementImperativeHandle>,\n  ): ReactNode | null {\n    const useFindDomNodeRef = useRef(true)\n    const imperativeHandleRef = useRef(new ElementImperativeHandle())\n\n    const findDomNodeCallbackRef = useCallback((current: (() => Element | Text | null) | null) => {\n      if (useFindDomNodeRef.current === true) {\n        imperativeHandleRef.current.callback(() => current?.() ?? null)\n      }\n    }, [])\n\n    const elementCallbackRef = useCallback((current: unknown | null) => {\n      useFindDomNodeRef.current = false\n\n      imperativeHandleRef.current.callback(() => current)\n    }, [])\n\n    useImperativeHandle(ref, () => imperativeHandleRef.current, [])\n\n    return (\n      <ElementRegistration componentHandle={imperativeHandleRef.current} elementKey={element.key}>\n        <FindDomNode ref={findDomNodeCallbackRef}>\n          <ErrorBoundary FallbackComponent={ErrorFallback}>\n            {isElementReference(element) ? (\n              <ElementReference\n                key={element.key}\n                ref={elementCallbackRef}\n                elementReference={element}\n              />\n            ) : (\n              <ElementData key={element.key} ref={elementCallbackRef} elementData={element} />\n            )}\n          </ErrorBoundary>\n        </FindDomNode>\n      </ElementRegistration>\n    )\n  }),\n)\n\nfunction ErrorFallback() {\n  return <FallbackComponent text={`Error rendering component`} />\n}\n"],"mappings":";AA8Cc;AA5Cd,SAAS,YAAY,MAAW,aAAa,qBAAqB,cAAyB;AAC3F;AAAA,EACE;AAAA,OAEK;AACP,SAAS,2BAA2B;AACpC,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,+BAA+B;AACxC,SAAS,mBAAmB;AAC5B,SAAS,yBAAyB;AAClC,SAAS,qBAAqB;AAMvB,MAAM,UAAU;AAAA,EACrB,WAAW,SAASA,SAClB,EAAE,QAAQ,GACV,KACkB;AAClB,UAAM,oBAAoB,OAAO,IAAI;AACrC,UAAM,sBAAsB,OAAO,IAAI,wBAAwB,CAAC;AAEhE,UAAM,yBAAyB,YAAY,CAAC,YAAkD;AAC5F,UAAI,kBAAkB,YAAY,MAAM;AACtC,4BAAoB,QAAQ,SAAS,MAAM,UAAU,KAAK,IAAI;AAAA,MAChE;AAAA,IACF,GAAG,CAAC,CAAC;AAEL,UAAM,qBAAqB,YAAY,CAAC,YAA4B;AAClE,wBAAkB,UAAU;AAE5B,0BAAoB,QAAQ,SAAS,MAAM,OAAO;AAAA,IACpD,GAAG,CAAC,CAAC;AAEL,wBAAoB,KAAK,MAAM,oBAAoB,SAAS,CAAC,CAAC;AAE9D,WACE,oBAAC,uBAAoB,iBAAiB,oBAAoB,SAAS,YAAY,QAAQ,KACrF,8BAAC,eAAY,KAAK,wBAChB,8BAAC,iBAAc,mBAAmB,eAC/B,6BAAmB,OAAO,IACzB;AAAA,MAAC;AAAA;AAAA,QAEC,KAAK;AAAA,QACL,kBAAkB;AAAA;AAAA,MAFb,QAAQ;AAAA,IAGf,IAEA,oBAAC,eAA8B,KAAK,oBAAoB,aAAa,WAAnD,QAAQ,GAAoD,GAElF,GACF,GACF;AAAA,EAEJ,CAAC;AACH;AAEA,SAAS,gBAAgB;AACvB,SAAO,oBAAC,qBAAkB,MAAM,6BAA6B;AAC/D;","names":["Element"]}
+{"version":3,"sources":["../../../../../src/runtimes/react/components/Element.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ReactNode,\n  type Ref,\n  type PropsWithChildren,\n  forwardRef,\n  memo,\n  useCallback,\n  useImperativeHandle,\n  useRef,\n  lazy,\n} from 'react'\n\nimport {\n  isElementReference,\n  type Element as ElementDataOrRef,\n} from '../../../state/read-only-state'\n\nimport { FallbackComponent } from '../../../components/shared/FallbackComponent'\nimport { ErrorBoundary } from '../../../components/shared/ErrorBoundary'\n\nimport { useIsReadOnly } from '../hooks/use-is-read-only'\nimport { ElementImperativeHandle } from '../element-imperative-handle'\nimport { FindDomNode } from '../find-dom-node'\n\nimport { ElementReference } from './ElementReference'\nimport { ElementData } from './ElementData'\n\nconst BuilderElementRegistration = lazy(() => import('./ElementRegistration'))\n\ntype Props = {\n  element: ElementDataOrRef\n}\n\nexport const Element = memo(\n  forwardRef(function Element(\n    { element }: Props,\n    ref: Ref<ElementImperativeHandle>,\n  ): ReactNode | null {\n    const useFindDomNodeRef = useRef(true)\n    const imperativeHandleRef = useRef(new ElementImperativeHandle())\n\n    const findDomNodeCallbackRef = useCallback((current: (() => Element | Text | null) | null) => {\n      if (useFindDomNodeRef.current === true) {\n        imperativeHandleRef.current.callback(() => current?.() ?? null)\n      }\n    }, [])\n\n    const elementCallbackRef = useCallback((current: unknown | null) => {\n      useFindDomNodeRef.current = false\n\n      imperativeHandleRef.current.callback(() => current)\n    }, [])\n\n    useImperativeHandle(ref, () => imperativeHandleRef.current, [])\n\n    const ElementRegistration = useIsReadOnly() ? NoOp : BuilderElementRegistration\n\n    return (\n      <ElementRegistration componentHandle={imperativeHandleRef.current} elementKey={element.key}>\n        <FindDomNode ref={findDomNodeCallbackRef}>\n          <ErrorBoundary FallbackComponent={ErrorFallback}>\n            {isElementReference(element) ? (\n              <ElementReference\n                key={element.key}\n                ref={elementCallbackRef}\n                elementReference={element}\n              />\n            ) : (\n              <ElementData key={element.key} ref={elementCallbackRef} elementData={element} />\n            )}\n          </ErrorBoundary>\n        </FindDomNode>\n      </ElementRegistration>\n    )\n  }),\n)\n\nfunction NoOp({ children }: PropsWithChildren) {\n  return children\n}\n\nfunction ErrorFallback() {\n  return <FallbackComponent text={`Error rendering component`} />\n}\n"],"mappings":";AAgEc;AA9Dd;AAAA,EAIE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP;AAAA,EACE;AAAA,OAEK;AAEP,SAAS,yBAAyB;AAClC,SAAS,qBAAqB;AAE9B,SAAS,qBAAqB;AAC9B,SAAS,+BAA+B;AACxC,SAAS,mBAAmB;AAE5B,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAE5B,MAAM,6BAA6B,KAAK,MAAM,OAAO,uBAAuB,CAAC;AAMtE,MAAM,UAAU;AAAA,EACrB,WAAW,SAASA,SAClB,EAAE,QAAQ,GACV,KACkB;AAClB,UAAM,oBAAoB,OAAO,IAAI;AACrC,UAAM,sBAAsB,OAAO,IAAI,wBAAwB,CAAC;AAEhE,UAAM,yBAAyB,YAAY,CAAC,YAAkD;AAC5F,UAAI,kBAAkB,YAAY,MAAM;AACtC,4BAAoB,QAAQ,SAAS,MAAM,UAAU,KAAK,IAAI;AAAA,MAChE;AAAA,IACF,GAAG,CAAC,CAAC;AAEL,UAAM,qBAAqB,YAAY,CAAC,YAA4B;AAClE,wBAAkB,UAAU;AAE5B,0BAAoB,QAAQ,SAAS,MAAM,OAAO;AAAA,IACpD,GAAG,CAAC,CAAC;AAEL,wBAAoB,KAAK,MAAM,oBAAoB,SAAS,CAAC,CAAC;AAE9D,UAAM,sBAAsB,cAAc,IAAI,OAAO;AAErD,WACE,oBAAC,uBAAoB,iBAAiB,oBAAoB,SAAS,YAAY,QAAQ,KACrF,8BAAC,eAAY,KAAK,wBAChB,8BAAC,iBAAc,mBAAmB,eAC/B,6BAAmB,OAAO,IACzB;AAAA,MAAC;AAAA;AAAA,QAEC,KAAK;AAAA,QACL,kBAAkB;AAAA;AAAA,MAFb,QAAQ;AAAA,IAGf,IAEA,oBAAC,eAA8B,KAAK,oBAAoB,aAAa,WAAnD,QAAQ,GAAoD,GAElF,GACF,GACF;AAAA,EAEJ,CAAC;AACH;AAEA,SAAS,KAAK,EAAE,SAAS,GAAsB;AAC7C,SAAO;AACT;AAEA,SAAS,gBAAgB;AACvB,SAAO,oBAAC,qBAAkB,MAAM,6BAA6B;AAC/D;","names":["Element"]}

package/dist/esm/runtimes/react/components/ElementRegistration.js

@@ -5,7 +5,7 @@ import { useDispatch } from "../hooks/use-dispatch";
 import { useDocumentKey } from "../hooks/use-document-context";
 import { useDisableRegisterElement } from "../hooks/use-disable-register-element";
 import { mountComponentEffect } from "../../../state/builder-api/actions";
-import { registerComponentHandleEffect } from "../../../state/actions/internal/read-only-actions";
+import { registerComponentHandleEffect } from "../../../state/actions/internal/read-write-actions";
 const ElementRegistration = memo(function ElementRegistration2({
   elementKey,
   componentHandle,
@@ -26,7 +26,9 @@ const ElementRegistration = memo(function ElementRegistration2({
   }, [dispatch, documentKey, elementKey, isRegisterElementDisabled]);
   return /* @__PURE__ */ jsx(Fragment, { children });
 });
+var ElementRegistration_default = ElementRegistration;
 export {
-  ElementRegistration
+  ElementRegistration,
+  ElementRegistration_default as default
 };
 //# sourceMappingURL=ElementRegistration.js.map

package/dist/esm/runtimes/react/components/ElementRegistration.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/components/ElementRegistration.tsx"],"sourcesContent":["'use client'\n\nimport { ReactNode, memo, useEffect } from 'react'\nimport { ElementImperativeHandle } from '../element-imperative-handle'\nimport { useDispatch } from '../hooks/use-dispatch'\nimport { useDocumentKey } from '../hooks/use-document-context'\nimport { useDisableRegisterElement } from '../hooks/use-disable-register-element'\nimport { mountComponentEffect } from '../../../state/builder-api/actions'\nimport { registerComponentHandleEffect } from '../../../state/actions/internal/read-only-actions'\n\ntype RegisterChildrenAsElementProps = {\n  elementKey: string\n  componentHandle: ElementImperativeHandle\n  children?: ReactNode\n}\n\nexport const ElementRegistration = memo(function ElementRegistration({\n  elementKey,\n  componentHandle,\n  children,\n}: RegisterChildrenAsElementProps): ReactNode {\n  const dispatch = useDispatch()\n  const documentKey = useDocumentKey()\n\n  const isRegisterElementDisabled = useDisableRegisterElement()\n\n  useEffect(() => {\n    if (documentKey == null || isRegisterElementDisabled) return\n\n    return dispatch(registerComponentHandleEffect(documentKey, elementKey, componentHandle))\n  }, [dispatch, documentKey, elementKey, isRegisterElementDisabled])\n\n  useEffect(() => {\n    if (documentKey == null || isRegisterElementDisabled) return\n\n    return dispatch(mountComponentEffect(documentKey, elementKey))\n  }, [dispatch, documentKey, elementKey, isRegisterElementDisabled])\n\n  return <>{children}</>\n})\n"],"mappings":";AAsCS;AApCT,SAAoB,MAAM,iBAAiB;AAE3C,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,iCAAiC;AAC1C,SAAS,4BAA4B;AACrC,SAAS,qCAAqC;AAQvC,MAAM,sBAAsB,KAAK,SAASA,qBAAoB;AAAA,EACnE;AAAA,EACA;AAAA,EACA;AACF,GAA8C;AAC5C,QAAM,WAAW,YAAY;AAC7B,QAAM,cAAc,eAAe;AAEnC,QAAM,4BAA4B,0BAA0B;AAE5D,YAAU,MAAM;AACd,QAAI,eAAe,QAAQ;AAA2B;AAEtD,WAAO,SAAS,8BAA8B,aAAa,YAAY,eAAe,CAAC;AAAA,EACzF,GAAG,CAAC,UAAU,aAAa,YAAY,yBAAyB,CAAC;AAEjE,YAAU,MAAM;AACd,QAAI,eAAe,QAAQ;AAA2B;AAEtD,WAAO,SAAS,qBAAqB,aAAa,UAAU,CAAC;AAAA,EAC/D,GAAG,CAAC,UAAU,aAAa,YAAY,yBAAyB,CAAC;AAEjE,SAAO,gCAAG,UAAS;AACrB,CAAC;","names":["ElementRegistration"]}
+{"version":3,"sources":["../../../../../src/runtimes/react/components/ElementRegistration.tsx"],"sourcesContent":["'use client'\n\nimport { ReactNode, memo, useEffect } from 'react'\nimport { ElementImperativeHandle } from '../element-imperative-handle'\nimport { useDispatch } from '../hooks/use-dispatch'\nimport { useDocumentKey } from '../hooks/use-document-context'\nimport { useDisableRegisterElement } from '../hooks/use-disable-register-element'\nimport { mountComponentEffect } from '../../../state/builder-api/actions'\nimport { registerComponentHandleEffect } from '../../../state/actions/internal/read-write-actions'\n\ntype RegisterChildrenAsElementProps = {\n  elementKey: string\n  componentHandle: ElementImperativeHandle\n  children?: ReactNode\n}\n\nexport const ElementRegistration = memo(function ElementRegistration({\n  elementKey,\n  componentHandle,\n  children,\n}: RegisterChildrenAsElementProps): ReactNode {\n  const dispatch = useDispatch()\n  const documentKey = useDocumentKey()\n\n  const isRegisterElementDisabled = useDisableRegisterElement()\n\n  useEffect(() => {\n    if (documentKey == null || isRegisterElementDisabled) return\n\n    return dispatch(registerComponentHandleEffect(documentKey, elementKey, componentHandle))\n  }, [dispatch, documentKey, elementKey, isRegisterElementDisabled])\n\n  useEffect(() => {\n    if (documentKey == null || isRegisterElementDisabled) return\n\n    return dispatch(mountComponentEffect(documentKey, elementKey))\n  }, [dispatch, documentKey, elementKey, isRegisterElementDisabled])\n\n  return <>{children}</>\n})\n\nexport default ElementRegistration\n"],"mappings":";AAsCS;AApCT,SAAoB,MAAM,iBAAiB;AAE3C,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,iCAAiC;AAC1C,SAAS,4BAA4B;AACrC,SAAS,qCAAqC;AAQvC,MAAM,sBAAsB,KAAK,SAASA,qBAAoB;AAAA,EACnE;AAAA,EACA;AAAA,EACA;AACF,GAA8C;AAC5C,QAAM,WAAW,YAAY;AAC7B,QAAM,cAAc,eAAe;AAEnC,QAAM,4BAA4B,0BAA0B;AAE5D,YAAU,MAAM;AACd,QAAI,eAAe,QAAQ;AAA2B;AAEtD,WAAO,SAAS,8BAA8B,aAAa,YAAY,eAAe,CAAC;AAAA,EACzF,GAAG,CAAC,UAAU,aAAa,YAAY,yBAAyB,CAAC;AAEjE,YAAU,MAAM;AACd,QAAI,eAAe,QAAQ;AAA2B;AAEtD,WAAO,SAAS,qBAAqB,aAAa,UAAU,CAAC;AAAA,EAC/D,GAAG,CAAC,UAAU,aAAa,YAAY,yBAAyB,CAAC;AAEjE,SAAO,gCAAG,UAAS;AACrB,CAAC;AAED,IAAO,8BAAQ;","names":["ElementRegistration"]}

package/dist/esm/runtimes/react/components/resolve-props.js

@@ -1,5 +1,6 @@
 import { useControlDefs } from "../hooks/use-control-defs";
 import { useResolvedProps } from "../hooks/use-resolved-props";
+import { useControlInstances } from "../hooks/use-control-instances";
 import { useStylesheetFactory } from "../hooks/use-stylesheet-factory";
 import { resolveLegacyDescriptorProp } from "../legacy-controls";
 function ResolveProps({
@@ -7,11 +8,14 @@ function ResolveProps({
   children: renderComponent
 }) {
   const [legacyDescriptors, definitions] = useControlDefs({ elementType: element.type });
+  const elementKey = element.key;
   const stylesheetFactory = useStylesheetFactory();
+  const controlInstances = useControlInstances(elementKey);
   const resolvedProps = useResolvedProps({
+    elementKey,
     propDefs: definitions,
     propData: element.props,
-    elementKey: element.key,
+    controlInstances,
     stylesheetFactory
   });
   const renderFn = Object.entries(legacyDescriptors).reduceRight(

package/dist/esm/runtimes/react/components/resolve-props.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/components/resolve-props.tsx"],"sourcesContent":["import { type ReactNode } from 'react'\n\nimport { type ElementData } from '../../../state/read-only-state'\n\nimport { useControlDefs } from '../hooks/use-control-defs'\nimport { useResolvedProps } from '../hooks/use-resolved-props'\nimport { useStylesheetFactory } from '../hooks/use-stylesheet-factory'\n\nimport { resolveLegacyDescriptorProp } from '../legacy-controls'\n\nexport function ResolveProps({\n  element,\n  children: renderComponent,\n}: {\n  element: ElementData\n  children: (props: Record<string, unknown>) => ReactNode\n}): ReactNode {\n  const [legacyDescriptors, definitions] = useControlDefs({ elementType: element.type })\n\n  const stylesheetFactory = useStylesheetFactory()\n  const resolvedProps = useResolvedProps({\n    propDefs: definitions,\n    propData: element.props,\n    elementKey: element.key,\n    stylesheetFactory,\n  })\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":"AAIA,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AAErC,SAAS,mCAAmC;AAErC,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA,UAAU;AACZ,GAGc;AACZ,QAAM,CAAC,mBAAmB,WAAW,IAAI,eAAe,EAAE,aAAa,QAAQ,KAAK,CAAC;AAErF,QAAM,oBAAoB,qBAAqB;AAC/C,QAAM,gBAAgB,iBAAiB;AAAA,IACrC,UAAU;AAAA,IACV,UAAU,QAAQ;AAAA,IAClB,YAAY,QAAQ;AAAA,IACpB;AAAA,EACF,CAAC;AAED,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"]}
+{"version":3,"sources":["../../../../../src/runtimes/react/components/resolve-props.tsx"],"sourcesContent":["import { type ReactNode } from 'react'\n\nimport { type ElementData } from '../../../state/read-only-state'\n\nimport { useControlDefs } from '../hooks/use-control-defs'\nimport { useResolvedProps } from '../hooks/use-resolved-props'\nimport { useControlInstances } from '../hooks/use-control-instances'\nimport { useStylesheetFactory } from '../hooks/use-stylesheet-factory'\n\nimport { resolveLegacyDescriptorProp } from '../legacy-controls'\n\nexport function ResolveProps({\n  element,\n  children: renderComponent,\n}: {\n  element: ElementData\n  children: (props: Record<string, unknown>) => ReactNode\n}): ReactNode {\n  const [legacyDescriptors, definitions] = useControlDefs({ elementType: element.type })\n\n  const elementKey = element.key\n  const stylesheetFactory = useStylesheetFactory()\n  const controlInstances = useControlInstances(elementKey)\n  const resolvedProps = useResolvedProps({\n    elementKey,\n    propDefs: definitions,\n    propData: element.props,\n    controlInstances,\n    stylesheetFactory,\n  })\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":"AAIA,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AAErC,SAAS,mCAAmC;AAErC,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA,UAAU;AACZ,GAGc;AACZ,QAAM,CAAC,mBAAmB,WAAW,IAAI,eAAe,EAAE,aAAa,QAAQ,KAAK,CAAC;AAErF,QAAM,aAAa,QAAQ;AAC3B,QAAM,oBAAoB,qBAAqB;AAC/C,QAAM,mBAAmB,oBAAoB,UAAU;AACvD,QAAM,gBAAgB,iBAAiB;AAAA,IACrC;AAAA,IACA,UAAU;AAAA,IACV,UAAU,QAAQ;AAAA,IAClB;AAAA,IACA;AAAA,EACF,CAAC;AAED,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/controls/rich-text/EditableText/editable-text.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/runtimes/react/controls/rich-text/EditableText/editable-text.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@emotion/css'\nimport { getBox } from 'css-box-model'\nimport isHotkey from 'is-hotkey'\nimport {\n  FocusEvent,\n  forwardRef,\n  KeyboardEvent,\n  Ref,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useState,\n} from 'react'\n\nimport { createEditor } from 'slate'\nimport { Slate as SlateReact, Editable, withReact, ReactEditor } from 'slate-react'\n\nimport { Slate, richTextDTOtoDAO, type RichTextValue } from '@makeswift/controls'\n\nimport { useBuilderEditMode } from '../../..'\nimport { DescriptorsPropControllers } from '../../../../../prop-controllers/instances'\nimport { withBlock, withTypography, withBuilder, onKeyDown } from '../../../../../slate'\nimport { BuilderEditMode } from '../../../../../state/modules/builder-edit-mode'\nimport { PropControllersHandle } from '../../../../../state/modules/prop-controller-handles'\nimport { pollBoxModel } from '../../../poll-box-model'\nimport { Element, Leaf } from '../components'\nimport { Descriptors } from '../rich-text'\nimport { useSyncDOMSelection } from './useSyncDOMSelection'\nimport { useSyncWithBuilder } from './useSyncWithBuilder'\n\ntype Props = {\n  id?: string\n  text?: RichTextValue\n  width?: string\n  margin?: string\n}\n\nconst defaultText: Slate.RichTextDAO = [\n  { type: Slate.BlockType.Paragraph, children: [{ text: '' }] },\n]\n\nexport const EditableText = forwardRef(function EditableText(\n  { id, text, width, margin }: Props,\n  ref: Ref<PropControllersHandle<Descriptors>>,\n) {\n  const [editor] = useState(() => withBlock(withTypography(withBuilder(withReact(createEditor())))))\n  const [isPreservingDOMSElection, setIsPreservingDOMSelection] = useState(false)\n  useSyncDOMSelection(editor, isPreservingDOMSElection)\n  const delaySync = useSyncWithBuilder(editor, text)\n  const editMode = useBuilderEditMode()\n\n  const [propControllers, setPropControllers] =\n    useState<DescriptorsPropControllers<Descriptors> | null>(null)\n  const controller = propControllers?.text\n\n  useEffect(() => {\n    if (controller == null) return\n\n    const element = ReactEditor.toDOMNode(editor, editor)\n\n    return pollBoxModel({\n      element,\n      onBoxModelChange: boxModel => controller.changeBoxModel(boxModel),\n    })\n  }, [editor, controller])\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      getDomNode() {\n        return ReactEditor.toDOMNode(editor, editor)\n      },\n      getBoxModel() {\n        return getBox(ReactEditor.toDOMNode(editor, editor))\n      },\n      setPropControllers,\n    }),\n    [editor, setPropControllers],\n  )\n\n  const initialValue = useMemo(() => (text ? richTextDTOtoDAO(text) : defaultText), [text])\n\n  useEffect(() => {\n    controller?.setSlateEditor(editor)\n  }, [controller, editor])\n\n  const handleFocus = useCallback(() => {\n    controller?.focus()\n    setIsPreservingDOMSelection(true)\n  }, [controller])\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (isHotkey('mod+shift+z', e)) return controller?.redo()\n      if (isHotkey('mod+z', e)) return controller?.undo()\n      if (isHotkey('escape')(e)) return controller?.blur()\n      onKeyDown(e, editor)\n    },\n    [controller, editor],\n  )\n\n  const handleBlur = useCallback((e: FocusEvent) => {\n    // When clicking outside of the iframe (`relatedTarget` is null) we want to preserve the DOM selection.\n    if (e.relatedTarget == null) return\n    // Otherwise we want to deselect on blur and stop preserving selection.\n    setIsPreservingDOMSelection(false)\n    ReactEditor.deselect(editor)\n  }, [])\n\n  return (\n    <SlateReact editor={editor} value={initialValue} onChange={delaySync}>\n      <Editable\n        id={id}\n        renderLeaf={Leaf}\n        renderElement={Element}\n        onFocus={handleFocus}\n        onKeyDown={handleKeyDown}\n        onBlur={handleBlur}\n        className={cx(width, margin)}\n        readOnly={editMode !== BuilderEditMode.CONTENT}\n        placeholder=\"Write some text...\"\n      />\n    </SlateReact>\n  )\n})\n\nexport default EditableText\n"],"mappings":"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","names":["EditableText"]}
+{"version":3,"sources":["../../../../../../../src/runtimes/react/controls/rich-text/EditableText/editable-text.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@emotion/css'\nimport { getBox } from 'css-box-model'\nimport isHotkey from 'is-hotkey'\nimport {\n  FocusEvent,\n  forwardRef,\n  KeyboardEvent,\n  Ref,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useState,\n} from 'react'\n\nimport { createEditor } from 'slate'\nimport { Slate as SlateReact, Editable, withReact, ReactEditor } from 'slate-react'\n\nimport { Slate, richTextDTOtoDAO, type RichTextValue } from '@makeswift/controls'\n\nimport { useBuilderEditMode } from '../../..'\nimport { DescriptorsPropControllers } from '../../../../../prop-controllers/instances'\nimport { withBlock, withTypography, withBuilder, onKeyDown } from '../../../../../slate'\nimport { BuilderEditMode } from '../../../../../state/modules/builder-edit-mode'\nimport { PropControllersHandle } from '../../../../../state/modules/read-write/prop-controllers'\nimport { pollBoxModel } from '../../../poll-box-model'\nimport { Element, Leaf } from '../components'\nimport { Descriptors } from '../rich-text'\nimport { useSyncDOMSelection } from './useSyncDOMSelection'\nimport { useSyncWithBuilder } from './useSyncWithBuilder'\n\ntype Props = {\n  id?: string\n  text?: RichTextValue\n  width?: string\n  margin?: string\n}\n\nconst defaultText: Slate.RichTextDAO = [\n  { type: Slate.BlockType.Paragraph, children: [{ text: '' }] },\n]\n\nexport const EditableText = forwardRef(function EditableText(\n  { id, text, width, margin }: Props,\n  ref: Ref<PropControllersHandle<Descriptors>>,\n) {\n  const [editor] = useState(() => withBlock(withTypography(withBuilder(withReact(createEditor())))))\n  const [isPreservingDOMSElection, setIsPreservingDOMSelection] = useState(false)\n  useSyncDOMSelection(editor, isPreservingDOMSElection)\n  const delaySync = useSyncWithBuilder(editor, text)\n  const editMode = useBuilderEditMode()\n\n  const [propControllers, setPropControllers] =\n    useState<DescriptorsPropControllers<Descriptors> | null>(null)\n  const controller = propControllers?.text\n\n  useEffect(() => {\n    if (controller == null) return\n\n    const element = ReactEditor.toDOMNode(editor, editor)\n\n    return pollBoxModel({\n      element,\n      onBoxModelChange: boxModel => controller.changeBoxModel(boxModel),\n    })\n  }, [editor, controller])\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      getDomNode() {\n        return ReactEditor.toDOMNode(editor, editor)\n      },\n      getBoxModel() {\n        return getBox(ReactEditor.toDOMNode(editor, editor))\n      },\n      setPropControllers,\n    }),\n    [editor, setPropControllers],\n  )\n\n  const initialValue = useMemo(() => (text ? richTextDTOtoDAO(text) : defaultText), [text])\n\n  useEffect(() => {\n    controller?.setSlateEditor(editor)\n  }, [controller, editor])\n\n  const handleFocus = useCallback(() => {\n    controller?.focus()\n    setIsPreservingDOMSelection(true)\n  }, [controller])\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (isHotkey('mod+shift+z', e)) return controller?.redo()\n      if (isHotkey('mod+z', e)) return controller?.undo()\n      if (isHotkey('escape')(e)) return controller?.blur()\n      onKeyDown(e, editor)\n    },\n    [controller, editor],\n  )\n\n  const handleBlur = useCallback((e: FocusEvent) => {\n    // When clicking outside of the iframe (`relatedTarget` is null) we want to preserve the DOM selection.\n    if (e.relatedTarget == null) return\n    // Otherwise we want to deselect on blur and stop preserving selection.\n    setIsPreservingDOMSelection(false)\n    ReactEditor.deselect(editor)\n  }, [])\n\n  return (\n    <SlateReact editor={editor} value={initialValue} onChange={delaySync}>\n      <Editable\n        id={id}\n        renderLeaf={Leaf}\n        renderElement={Element}\n        onFocus={handleFocus}\n        onKeyDown={handleKeyDown}\n        onBlur={handleBlur}\n        className={cx(width, margin)}\n        readOnly={editMode !== BuilderEditMode.CONTENT}\n        placeholder=\"Write some text...\"\n      />\n    </SlateReact>\n  )\n})\n\nexport default EditableText\n"],"mappings":"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","names":["EditableText"]}

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

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { lazy, useCallback } from "react";
 import {
   isPropControllersHandle
-} from "../../../../state/modules/prop-controller-handles";
+} from "../../../../state/modules/read-write/prop-controllers";
 import { useIsReadOnly } from "../../hooks/use-is-read-only";
 const EditableText = lazy(() => import("./EditableText"));
 const ReadOnlyText = lazy(() => import("./ReadOnlyText"));

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/runtimes/react/controls/rich-text/rich-text.tsx"],"sourcesContent":["import { ReactNode, lazy, useCallback } from 'react'\n\nimport { type DataType } from '@makeswift/controls'\nimport { RichTextV1Control, RichTextV1Definition } from '../../../../controls/rich-text'\n\nimport {\n  isPropControllersHandle,\n  PropControllersHandle,\n} from '../../../../state/modules/prop-controller-handles'\n\nimport { useIsReadOnly } from '../../hooks/use-is-read-only'\n\nconst EditableText = lazy(() => import('./EditableText'))\nconst ReadOnlyText = lazy(() => import('./ReadOnlyText'))\n\nexport type RichTextControlValue = ReactNode\n\nexport type Descriptors = { text?: RichTextV1Definition }\n\nexport function renderRichText(\n  data: DataType<RichTextV1Definition> | undefined,\n  control: RichTextV1Control | null,\n) {\n  return <RichText data={data} control={control} />\n}\n\nfunction RichText({\n  data,\n  control,\n}: {\n  data: DataType<RichTextV1Definition> | undefined\n  control: RichTextV1Control | null\n}) {\n  const textCallbackRef = useCallback(\n    (handle: PropControllersHandle<Descriptors> | HTMLDivElement | null) => {\n      if (isPropControllersHandle(handle))\n        handle?.setPropControllers?.(control == null ? null : { text: control })\n    },\n    [control],\n  )\n\n  return useIsReadOnly() ? (\n    <ReadOnlyText text={data} ref={textCallbackRef} />\n  ) : (\n    <EditableText text={data} ref={textCallbackRef} />\n  )\n}\n"],"mappings":"AAuBS;AAvBT,SAAoB,MAAM,mBAAmB;AAK7C;AAAA,EACE;AAAA,OAEK;AAEP,SAAS,qBAAqB;AAE9B,MAAM,eAAe,KAAK,MAAM,OAAO,gBAAgB,CAAC;AACxD,MAAM,eAAe,KAAK,MAAM,OAAO,gBAAgB,CAAC;AAMjD,SAAS,eACd,MACA,SACA;AACA,SAAO,oBAAC,YAAS,MAAY,SAAkB;AACjD;AAEA,SAAS,SAAS;AAAA,EAChB;AAAA,EACA;AACF,GAGG;AACD,QAAM,kBAAkB;AAAA,IACtB,CAAC,WAAuE;AACtE,UAAI,wBAAwB,MAAM;AAChC,gBAAQ,qBAAqB,WAAW,OAAO,OAAO,EAAE,MAAM,QAAQ,CAAC;AAAA,IAC3E;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,SAAO,cAAc,IACnB,oBAAC,gBAAa,MAAM,MAAM,KAAK,iBAAiB,IAEhD,oBAAC,gBAAa,MAAM,MAAM,KAAK,iBAAiB;AAEpD;","names":[]}
+{"version":3,"sources":["../../../../../../src/runtimes/react/controls/rich-text/rich-text.tsx"],"sourcesContent":["import { ReactNode, lazy, useCallback } from 'react'\n\nimport { type DataType } from '@makeswift/controls'\nimport { RichTextV1Control, RichTextV1Definition } from '../../../../controls/rich-text'\n\nimport {\n  isPropControllersHandle,\n  PropControllersHandle,\n} from '../../../../state/modules/read-write/prop-controllers'\n\nimport { useIsReadOnly } from '../../hooks/use-is-read-only'\n\nconst EditableText = lazy(() => import('./EditableText'))\nconst ReadOnlyText = lazy(() => import('./ReadOnlyText'))\n\nexport type RichTextControlValue = ReactNode\n\nexport type Descriptors = { text?: RichTextV1Definition }\n\nexport function renderRichText(\n  data: DataType<RichTextV1Definition> | undefined,\n  control: RichTextV1Control | null,\n) {\n  return <RichText data={data} control={control} />\n}\n\nfunction RichText({\n  data,\n  control,\n}: {\n  data: DataType<RichTextV1Definition> | undefined\n  control: RichTextV1Control | null\n}) {\n  const textCallbackRef = useCallback(\n    (handle: PropControllersHandle<Descriptors> | HTMLDivElement | null) => {\n      if (isPropControllersHandle(handle))\n        handle?.setPropControllers?.(control == null ? null : { text: control })\n    },\n    [control],\n  )\n\n  return useIsReadOnly() ? (\n    <ReadOnlyText text={data} ref={textCallbackRef} />\n  ) : (\n    <EditableText text={data} ref={textCallbackRef} />\n  )\n}\n"],"mappings":"AAuBS;AAvBT,SAAoB,MAAM,mBAAmB;AAK7C;AAAA,EACE;AAAA,OAEK;AAEP,SAAS,qBAAqB;AAE9B,MAAM,eAAe,KAAK,MAAM,OAAO,gBAAgB,CAAC;AACxD,MAAM,eAAe,KAAK,MAAM,OAAO,gBAAgB,CAAC;AAMjD,SAAS,eACd,MACA,SACA;AACA,SAAO,oBAAC,YAAS,MAAY,SAAkB;AACjD;AAEA,SAAS,SAAS;AAAA,EAChB;AAAA,EACA;AACF,GAGG;AACD,QAAM,kBAAkB;AAAA,IACtB,CAAC,WAAuE;AACtE,UAAI,wBAAwB,MAAM;AAChC,gBAAQ,qBAAqB,WAAW,OAAO,OAAO,EAAE,MAAM,QAAQ,CAAC;AAAA,IAC3E;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,SAAO,cAAc,IACnB,oBAAC,gBAAa,MAAM,MAAM,KAAK,iBAAiB,IAEhD,oBAAC,gBAAa,MAAM,MAAM,KAAK,iBAAiB;AAEpD;","names":[]}

package/dist/esm/runtimes/react/element-imperative-handle.js

@@ -1,7 +1,7 @@
 import { isMeasurable, measure } from "../../state/modules/read-write/box-models";
 import {
   isPropControllersHandle
-} from "../../state/modules/prop-controller-handles";
+} from "../../state/modules/read-write/prop-controllers";
 class ElementImperativeHandle {
   getCurrent = () => null;
   lastPropControllers = null;

package/dist/esm/runtimes/react/element-imperative-handle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/runtimes/react/element-imperative-handle.ts"],"sourcesContent":["import { BoxModelHandle, type BoxDisplayModel } from '../../state/modules/read-write/box-models'\nimport { Descriptor } from '../../prop-controllers/descriptors'\nimport { DescriptorsPropControllers } from '../../prop-controllers/instances'\nimport { isMeasurable, measure } from '../../state/modules/read-write/box-models'\nimport {\n  isPropControllersHandle,\n  PropControllersHandle,\n} from '../../state/modules/prop-controller-handles'\n\nexport class ElementImperativeHandle<\n    T extends Record<string, Descriptor> = Record<string, Descriptor>,\n  >\n  implements BoxModelHandle, PropControllersHandle<T>\n{\n  private getCurrent: () => unknown = () => null\n  private lastPropControllers: DescriptorsPropControllers<T> | null = null\n\n  callback(getCurrent: () => unknown) {\n    const current = this.getCurrent()\n\n    if (current === null) this.setPropControllers(null)\n\n    this.getCurrent = getCurrent\n\n    if (this.lastPropControllers !== null) this.setPropControllers(this.lastPropControllers)\n  }\n\n  getBoxModel(): BoxDisplayModel | null {\n    const current = this.getCurrent()\n\n    return isMeasurable(current) ? measure(current) : null\n  }\n\n  setPropControllers(propControllers: DescriptorsPropControllers<T> | null): void {\n    const current = this.getCurrent()\n\n    if (isPropControllersHandle(current)) current.setPropControllers(propControllers)\n\n    this.lastPropControllers = propControllers\n  }\n\n  getDomNode(): Element | null {\n    const current = this.getCurrent()\n\n    if (isDomNodeHandle(current)) return current.getDomNode()\n\n    return current instanceof Element ? current : null\n  }\n}\n\ntype DomNodeHandle = {\n  getDomNode(): Element | null\n}\n\nexport function isDomNodeHandle(value: unknown): value is DomNodeHandle {\n  if (\n    typeof value === 'object' &&\n    value !== null &&\n    'getDomNode' in value &&\n    typeof (value as { getDomNode: unknown }).getDomNode === 'function'\n  ) {\n    return true\n  }\n\n  return false\n}\n"],"mappings":"AAGA,SAAS,cAAc,eAAe;AACtC;AAAA,EACE;AAAA,OAEK;AAEA,MAAM,wBAIb;AAAA,EACU,aAA4B,MAAM;AAAA,EAClC,sBAA4D;AAAA,EAEpE,SAAS,YAA2B;AAClC,UAAM,UAAU,KAAK,WAAW;AAEhC,QAAI,YAAY;AAAM,WAAK,mBAAmB,IAAI;AAElD,SAAK,aAAa;AAElB,QAAI,KAAK,wBAAwB;AAAM,WAAK,mBAAmB,KAAK,mBAAmB;AAAA,EACzF;AAAA,EAEA,cAAsC;AACpC,UAAM,UAAU,KAAK,WAAW;AAEhC,WAAO,aAAa,OAAO,IAAI,QAAQ,OAAO,IAAI;AAAA,EACpD;AAAA,EAEA,mBAAmB,iBAA6D;AAC9E,UAAM,UAAU,KAAK,WAAW;AAEhC,QAAI,wBAAwB,OAAO;AAAG,cAAQ,mBAAmB,eAAe;AAEhF,SAAK,sBAAsB;AAAA,EAC7B;AAAA,EAEA,aAA6B;AAC3B,UAAM,UAAU,KAAK,WAAW;AAEhC,QAAI,gBAAgB,OAAO;AAAG,aAAO,QAAQ,WAAW;AAExD,WAAO,mBAAmB,UAAU,UAAU;AAAA,EAChD;AACF;AAMO,SAAS,gBAAgB,OAAwC;AACtE,MACE,OAAO,UAAU,YACjB,UAAU,QACV,gBAAgB,SAChB,OAAQ,MAAkC,eAAe,YACzD;AACA,WAAO;AAAA,EACT;AAEA,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../../../src/runtimes/react/element-imperative-handle.ts"],"sourcesContent":["import { BoxModelHandle, type BoxDisplayModel } from '../../state/modules/read-write/box-models'\nimport { Descriptor } from '../../prop-controllers/descriptors'\nimport { DescriptorsPropControllers } from '../../prop-controllers/instances'\nimport { isMeasurable, measure } from '../../state/modules/read-write/box-models'\nimport {\n  isPropControllersHandle,\n  PropControllersHandle,\n} from '../../state/modules/read-write/prop-controllers'\n\nexport class ElementImperativeHandle<\n    T extends Record<string, Descriptor> = Record<string, Descriptor>,\n  >\n  implements BoxModelHandle, PropControllersHandle<T>\n{\n  private getCurrent: () => unknown = () => null\n  private lastPropControllers: DescriptorsPropControllers<T> | null = null\n\n  callback(getCurrent: () => unknown) {\n    const current = this.getCurrent()\n\n    if (current === null) this.setPropControllers(null)\n\n    this.getCurrent = getCurrent\n\n    if (this.lastPropControllers !== null) this.setPropControllers(this.lastPropControllers)\n  }\n\n  getBoxModel(): BoxDisplayModel | null {\n    const current = this.getCurrent()\n\n    return isMeasurable(current) ? measure(current) : null\n  }\n\n  setPropControllers(propControllers: DescriptorsPropControllers<T> | null): void {\n    const current = this.getCurrent()\n\n    if (isPropControllersHandle(current)) current.setPropControllers(propControllers)\n\n    this.lastPropControllers = propControllers\n  }\n\n  getDomNode(): Element | null {\n    const current = this.getCurrent()\n\n    if (isDomNodeHandle(current)) return current.getDomNode()\n\n    return current instanceof Element ? current : null\n  }\n}\n\ntype DomNodeHandle = {\n  getDomNode(): Element | null\n}\n\nexport function isDomNodeHandle(value: unknown): value is DomNodeHandle {\n  if (\n    typeof value === 'object' &&\n    value !== null &&\n    'getDomNode' in value &&\n    typeof (value as { getDomNode: unknown }).getDomNode === 'function'\n  ) {\n    return true\n  }\n\n  return false\n}\n"],"mappings":"AAGA,SAAS,cAAc,eAAe;AACtC;AAAA,EACE;AAAA,OAEK;AAEA,MAAM,wBAIb;AAAA,EACU,aAA4B,MAAM;AAAA,EAClC,sBAA4D;AAAA,EAEpE,SAAS,YAA2B;AAClC,UAAM,UAAU,KAAK,WAAW;AAEhC,QAAI,YAAY;AAAM,WAAK,mBAAmB,IAAI;AAElD,SAAK,aAAa;AAElB,QAAI,KAAK,wBAAwB;AAAM,WAAK,mBAAmB,KAAK,mBAAmB;AAAA,EACzF;AAAA,EAEA,cAAsC;AACpC,UAAM,UAAU,KAAK,WAAW;AAEhC,WAAO,aAAa,OAAO,IAAI,QAAQ,OAAO,IAAI;AAAA,EACpD;AAAA,EAEA,mBAAmB,iBAA6D;AAC9E,UAAM,UAAU,KAAK,WAAW;AAEhC,QAAI,wBAAwB,OAAO;AAAG,cAAQ,mBAAmB,eAAe;AAEhF,SAAK,sBAAsB;AAAA,EAC7B;AAAA,EAEA,aAA6B;AAC3B,UAAM,UAAU,KAAK,WAAW;AAEhC,QAAI,gBAAgB,OAAO;AAAG,aAAO,QAAQ,WAAW;AAExD,WAAO,mBAAmB,UAAU,UAAU;AAAA,EAChD;AACF;AAMO,SAAS,gBAAgB,OAAwC;AACtE,MACE,OAAO,UAAU,YACjB,UAAU,QACV,gBAAgB,SAChB,OAAQ,MAAkC,eAAe,YACzD;AACA,WAAO;AAAA,EACT;AAEA,SAAO;AACT;","names":[]}

package/dist/esm/runtimes/react/hooks/use-control-instances.js

@@ -1,10 +1,11 @@
-import { getPropControllers } from "../../../state/read-only-state";
+import { getPropControllers } from "../../../state/read-write-state";
+import { isReadWriteState } from "../../../state/unified-state";
 import { useDocumentKey } from "./use-document-context";
 import { useSelector } from "./use-selector";
 function useControlInstances(elementKey) {
   const documentKey = useDocumentKey();
   return useSelector((state) => {
-    if (documentKey == null)
+    if (documentKey == null || !isReadWriteState(state))
       return null;
     return getPropControllers(state, { documentKey, elementKey });
   });

package/dist/esm/runtimes/react/hooks/use-control-instances.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-control-instances.ts"],"sourcesContent":["import { ControlInstance } from '@makeswift/controls'\n\nimport { getPropControllers } from '../../../state/read-only-state'\nimport { useDocumentKey } from './use-document-context'\nimport { useSelector } from './use-selector'\n\nexport function 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 getPropControllers(state, { documentKey, elementKey })\n  })\n}\n"],"mappings":"AAEA,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;AAErB,SAAS,oBAAoB,YAA4D;AAC9F,QAAM,cAAc,eAAe;AAEnC,SAAO,YAAY,WAAS;AAC1B,QAAI,eAAe;AAAM,aAAO;AAEhC,WAAO,mBAAmB,OAAO,EAAE,aAAa,WAAW,CAAC;AAAA,EAC9D,CAAC;AACH;","names":[]}
+{"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-control-instances.ts"],"sourcesContent":["import { ControlInstance } from '@makeswift/controls'\n\nimport { getPropControllers } from '../../../state/read-write-state'\nimport { isReadWriteState } from '../../../state/unified-state'\nimport { useDocumentKey } from './use-document-context'\nimport { useSelector } from './use-selector'\n\nexport function useControlInstances(elementKey: string): Record<string, ControlInstance> | null {\n  const documentKey = useDocumentKey()\n\n  return useSelector(state => {\n    if (documentKey == null || !isReadWriteState(state)) return null\n\n    return getPropControllers(state, { documentKey, elementKey })\n  })\n}\n"],"mappings":"AAEA,SAAS,0BAA0B;AACnC,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;AAErB,SAAS,oBAAoB,YAA4D;AAC9F,QAAM,cAAc,eAAe;AAEnC,SAAO,YAAY,WAAS;AAC1B,QAAI,eAAe,QAAQ,CAAC,iBAAiB,KAAK;AAAG,aAAO;AAE5D,WAAO,mBAAmB,OAAO,EAAE,aAAa,WAAW,CAAC;AAAA,EAC9D,CAAC;AACH;","names":[]}

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

@@ -4,21 +4,20 @@ import {
 } from "@makeswift/controls";
 import { useResourceResolver } from "./use-resource-resolver";
 import { propErrorHandlingProxy } from "../utils/prop-error-handling-proxy";
-import { useControlInstances } from "./use-control-instances";
 import { useResolvableRecord } from "./use-resolvable-record";
 function useResolvedProps({
+  elementKey,
   propDefs,
   propData,
-  elementKey,
+  controlInstances,
   stylesheetFactory
 }) {
   const resourceResolver = useResourceResolver();
-  const controls = useControlInstances(elementKey);
   const cache = useRef({}).current;
   const resolveProp = useCallback(
     (def, propName) => {
       const data = propData[propName];
-      const control = controls?.[propName];
+      const control = controlInstances?.[propName];
       if (cache[propName] != null && data === cache[propName].data && control === cache[propName].control) {
         return cache[propName].resolvedValue;
       }
@@ -31,24 +30,26 @@ function useResolvedProps({
       cache[propName] = { data, control, resolvedValue };
       return resolvedValue;
     },
-    [controls, propData, resourceResolver, stylesheetFactory]
+    [propData, cache, resourceResolver, controlInstances, stylesheetFactory]
   );
   const resolvables = useMemo(
     () => mapValues(propDefs, (def, propName) => {
       const defaultValue = def.config?.defaultValue;
       return propErrorHandlingProxy(resolveProp(def, propName), defaultValue, (error) => {
         console.warn(
-          `Error reading value for prop "${propName}", falling back to \`${defaultValue}\`.`,
+          `Error reading value for prop "${propName}" of element ${elementKey}, falling back to \`${defaultValue}\`.`,
           { control: def, error }
         );
       });
     }),
-    [propDefs, resolveProp]
+    [propDefs, resolveProp, elementKey]
   );
   const props = useResolvableRecord(resolvables);
   useEffect(() => {
-    props.triggerResolve();
-  }, [props]);
+    props.triggerResolve().catch((err) => {
+      console.log(`Error while resolving props for element ${elementKey}`, err);
+    });
+  }, [props, elementKey]);
   const resolvedProps = useSyncExternalStore(props.subscribe, props.readStable, props.readStable);
   stylesheetFactory.useDefinedStyles();
   return resolvedProps;

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

@@ -1 +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 { useResourceResolver } from './use-resource-resolver'\n\nimport { type StylesheetFactory } from '../stylesheet-factory'\nimport { propErrorHandlingProxy } from '../utils/prop-error-handling-proxy'\n\nimport { useControlInstances } from './use-control-instances'\nimport { useResolvableRecord } from './use-resolvable-record'\n\ntype CacheItem = {\n  data: Data\n  control: ControlInstance | undefined\n  resolvedValue: Resolvable<unknown>\n}\n\nexport function useResolvedProps({\n  propDefs,\n  propData,\n  elementKey,\n  stylesheetFactory,\n}: {\n  propDefs: Record<string, ControlDefinition>\n  propData: Record<string, Data>\n  elementKey: string\n  stylesheetFactory: StylesheetFactory\n}): Record<string, unknown> {\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 = propData[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, propData, resourceResolver, stylesheetFactory],\n  )\n\n  const resolvables = useMemo<Record<string, Resolvable<unknown>>>(\n    () =>\n      mapValues(propDefs, (def, propName) => {\n        const defaultValue = (def.config as any)?.defaultValue\n        return propErrorHandlingProxy(resolveProp(def, propName), defaultValue, error => {\n          console.warn(\n            `Error reading value for prop \"${propName}\", falling back to \\`${defaultValue}\\`.`,\n            { control: def, error },\n          )\n        })\n      }),\n    [propDefs, resolveProp],\n  )\n\n  const props = useResolvableRecord(resolvables)\n\n  // no need to call `triggerResolve` on the server, all the resources should already be in\n  // the host API client's cache (populated from the snapshot's cache)\n  useEffect(() => {\n    props.triggerResolve()\n  }, [props])\n\n  // the order is important here, the styles are defined in the process of the props resolution,\n  // calling `useDefinedStyles` before the props are resolved would effectively be a noop\n  const resolvedProps = useSyncExternalStore(props.subscribe, props.readStable, props.readStable)\n\n  stylesheetFactory.useDefinedStyles()\n\n  return resolvedProps\n}\n"],"mappings":"AAAA,SAAS,SAAS,WAAW,QAAQ,sBAAsB,mBAAmB;AAC9E;AAAA,EAGE;AAAA,OAGK;AAEP,SAAS,2BAA2B;AAGpC,SAAS,8BAA8B;AAEvC,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AAQ7B,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAK4B;AAC1B,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,SAAS,QAAQ;AAC9B,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,UAAU,kBAAkB,iBAAiB;AAAA,EAC1D;AAEA,QAAM,cAAc;AAAA,IAClB,MACE,UAAU,UAAU,CAAC,KAAK,aAAa;AACrC,YAAM,eAAgB,IAAI,QAAgB;AAC1C,aAAO,uBAAuB,YAAY,KAAK,QAAQ,GAAG,cAAc,WAAS;AAC/E,gBAAQ;AAAA,UACN,iCAAiC,QAAQ,wBAAwB,YAAY;AAAA,UAC7E,EAAE,SAAS,KAAK,MAAM;AAAA,QACxB;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,IACH,CAAC,UAAU,WAAW;AAAA,EACxB;AAEA,QAAM,QAAQ,oBAAoB,WAAW;AAI7C,YAAU,MAAM;AACd,UAAM,eAAe;AAAA,EACvB,GAAG,CAAC,KAAK,CAAC;AAIV,QAAM,gBAAgB,qBAAqB,MAAM,WAAW,MAAM,YAAY,MAAM,UAAU;AAE9F,oBAAkB,iBAAiB;AAEnC,SAAO;AACT;","names":[]}
+{"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 { useResourceResolver } from './use-resource-resolver'\n\nimport { type StylesheetFactory } from '../stylesheet-factory'\nimport { propErrorHandlingProxy } from '../utils/prop-error-handling-proxy'\n\nimport { useResolvableRecord } from './use-resolvable-record'\n\ntype CacheItem = {\n  data: Data\n  control: ControlInstance | undefined\n  resolvedValue: Resolvable<unknown>\n}\n\nexport function useResolvedProps({\n  elementKey,\n  propDefs,\n  propData,\n  controlInstances,\n  stylesheetFactory,\n}: {\n  elementKey: string\n  propDefs: Record<string, ControlDefinition>\n  propData: Record<string, Data>\n  controlInstances: Record<string, ControlInstance> | null\n  stylesheetFactory: StylesheetFactory\n}): Record<string, unknown> {\n  const resourceResolver = useResourceResolver()\n\n  const cache = useRef<Record<string, CacheItem>>({}).current\n  const resolveProp = useCallback(\n    (def: ControlDefinition, propName: string) => {\n      const data = propData[propName]\n      const control = controlInstances?.[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    [propData, cache, resourceResolver, controlInstances, stylesheetFactory],\n  )\n\n  const resolvables = useMemo<Record<string, Resolvable<unknown>>>(\n    () =>\n      mapValues(propDefs, (def, propName) => {\n        const defaultValue = (def.config as any)?.defaultValue\n        return propErrorHandlingProxy(resolveProp(def, propName), defaultValue, error => {\n          console.warn(\n            `Error reading value for prop \"${propName}\" of element ${elementKey}, falling back to \\`${defaultValue}\\`.`,\n            { control: def, error },\n          )\n        })\n      }),\n    [propDefs, resolveProp, elementKey],\n  )\n\n  const props = useResolvableRecord(resolvables)\n\n  // no need to call `triggerResolve` on the server, all the resources should already be in\n  // the host API client's cache (populated from the snapshot's cache)\n  useEffect(() => {\n    props.triggerResolve().catch(err => {\n      console.log(`Error while resolving props for element ${elementKey}`, err)\n    })\n  }, [props, elementKey])\n\n  // the order is important here, the styles are defined in the process of the props resolution,\n  // calling `useDefinedStyles` before the props are resolved would effectively be a noop\n  const resolvedProps = useSyncExternalStore(props.subscribe, props.readStable, props.readStable)\n\n  stylesheetFactory.useDefinedStyles()\n\n  return resolvedProps\n}\n"],"mappings":"AAAA,SAAS,SAAS,WAAW,QAAQ,sBAAsB,mBAAmB;AAC9E;AAAA,EAGE;AAAA,OAGK;AAEP,SAAS,2BAA2B;AAGpC,SAAS,8BAA8B;AAEvC,SAAS,2BAA2B;AAQ7B,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAM4B;AAC1B,QAAM,mBAAmB,oBAAoB;AAE7C,QAAM,QAAQ,OAAkC,CAAC,CAAC,EAAE;AACpD,QAAM,cAAc;AAAA,IAClB,CAAC,KAAwB,aAAqB;AAC5C,YAAM,OAAO,SAAS,QAAQ;AAC9B,YAAM,UAAU,mBAAmB,QAAQ;AAE3C,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,OAAO,kBAAkB,kBAAkB,iBAAiB;AAAA,EACzE;AAEA,QAAM,cAAc;AAAA,IAClB,MACE,UAAU,UAAU,CAAC,KAAK,aAAa;AACrC,YAAM,eAAgB,IAAI,QAAgB;AAC1C,aAAO,uBAAuB,YAAY,KAAK,QAAQ,GAAG,cAAc,WAAS;AAC/E,gBAAQ;AAAA,UACN,iCAAiC,QAAQ,gBAAgB,UAAU,uBAAuB,YAAY;AAAA,UACtG,EAAE,SAAS,KAAK,MAAM;AAAA,QACxB;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,IACH,CAAC,UAAU,aAAa,UAAU;AAAA,EACpC;AAEA,QAAM,QAAQ,oBAAoB,WAAW;AAI7C,YAAU,MAAM;AACd,UAAM,eAAe,EAAE,MAAM,SAAO;AAClC,cAAQ,IAAI,2CAA2C,UAAU,IAAI,GAAG;AAAA,IAC1E,CAAC;AAAA,EACH,GAAG,CAAC,OAAO,UAAU,CAAC;AAItB,QAAM,gBAAgB,qBAAqB,MAAM,WAAW,MAAM,YAAY,MAAM,UAAU;AAE9F,oBAAkB,iBAAiB;AAEnC,SAAO;AACT;","names":[]}

package/dist/esm/runtimes/react/testing/index.js

@@ -0,0 +1,3 @@
+export * from "./react-provider";
+export * from "./react-runtime";
+//# sourceMappingURL=index.js.map

package/dist/esm/runtimes/react/testing/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/testing/index.ts"],"sourcesContent":["export * from './react-provider'\nexport * from './react-runtime'\n"],"mappings":"AAAA,cAAc;AACd,cAAc;","names":[]}

package/dist/esm/runtimes/react/testing/react-provider.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { RuntimeProvider } from "../components/RuntimeProvider";
+import { DefaultRootStyleRegistry } from "../root-style-registry";
+function ReactProvider({
+  children,
+  runtime,
+  siteVersion = null
+}) {
+  return /* @__PURE__ */ jsx(RuntimeProvider, { siteVersion, runtime, children: /* @__PURE__ */ jsx(DefaultRootStyleRegistry, { children }) });
+}
+export {
+  ReactProvider
+};
+//# sourceMappingURL=react-provider.js.map

package/dist/esm/runtimes/react/testing/react-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/testing/react-provider.tsx"],"sourcesContent":["import { type ReactRuntimeCore } from '../react-runtime-core'\nimport { RuntimeProvider } from '../components/RuntimeProvider'\n\nimport { DefaultRootStyleRegistry } from '../root-style-registry'\nimport { SiteVersion } from '../../../api/site-version'\n\nexport function ReactProvider({\n  children,\n  runtime,\n  siteVersion = null,\n}: {\n  children: React.ReactNode\n  runtime: ReactRuntimeCore\n  siteVersion?: SiteVersion | null\n}) {\n  return (\n    <RuntimeProvider siteVersion={siteVersion} runtime={runtime}>\n      <DefaultRootStyleRegistry>{children}</DefaultRootStyleRegistry>\n    </RuntimeProvider>\n  )\n}\n"],"mappings":"AAiBM;AAhBN,SAAS,uBAAuB;AAEhC,SAAS,gCAAgC;AAGlC,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,cAAc;AAChB,GAIG;AACD,SACE,oBAAC,mBAAgB,aAA0B,SACzC,8BAAC,4BAA0B,UAAS,GACtC;AAEJ;","names":[]}

package/dist/esm/state/actions/index.js

@@ -1,7 +1,7 @@
 import { isAction } from "@reduxjs/toolkit";
-import { BuilderActionTypes } from "../builder-api/actions";
+import { BuilderActionTypes } from "../builder-api/action-types";
 import { HostActionTypes } from "../host-api";
-import { InternalActionTypes } from "./internal";
+import { InternalActionTypes } from "./internal/action-types";
 const ActionTypes = {
   ...HostActionTypes,
   ...BuilderActionTypes,