@makeswift/runtime 0.21.3 → 0.22.0

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

@@ -1,185 +1,21 @@
-import { jsx } from "react/jsx-runtime";
-import {
-  CheckboxDefinition,
-  NumberDefinition,
-  RichTextV2Definition,
-  ColorDefinition,
-  ComboboxDefinition,
-  IconRadioGroupDefinition,
-  ImageDefinition,
-  LinkDefinition,
-  ListDefinition,
-  RichTextV1Definition,
-  SelectDefinition,
-  ShapeDefinition,
-  SlotDefinition,
-  StyleDefinition,
-  StyleV2Definition,
-  TextAreaDefinition,
-  TextInputDefinition,
-  unstable_TypographyDefinition
-} from "../../../controls";
-import { RenderHook } from "../components";
-import { useColorValue } from "./color";
-import { useImageControlValue } from "./image";
-import { useLinkControlValue } from "./link";
-import { ListControlValue } from "./list";
-import { useRichText } from "./rich-text/rich-text";
-import { useRichTextV2 } from "./rich-text-v2";
-import { ShapeControlValue } from "./shape";
-import { useSlot } from "./slot";
-import { useFormattedStyle } from "./style";
-import { StyleV2ControlValue } from "./style-v2";
-import { useTypographyValue } from "./typography";
+"use client";
 import { useResolvedValue } from "../hooks/use-resolved-value";
+import { useStylesheetFactory } from "../hooks/use-stylesheet-factory";
+import { useCssId } from "../hooks/use-css-id";
 function ControlValue({
   data,
   definition,
   children,
   control
 }) {
-  switch (definition.controlType) {
-    case CheckboxDefinition.type:
-    case NumberDefinition.type:
-    case TextInputDefinition.type:
-    case TextAreaDefinition.type:
-    case SelectDefinition.type:
-    case IconRadioGroupDefinition.type:
-    case ComboboxDefinition.type:
-      return /* @__PURE__ */ jsx(
-        RenderHook,
-        {
-          hook: useResolvedValue,
-          parameters: [data, definition],
-          children: (value) => children(value)
-        },
-        definition.controlType
-      );
-    case ColorDefinition.type:
-      return /* @__PURE__ */ jsx(
-        RenderHook,
-        {
-          hook: useColorValue,
-          parameters: [data, definition],
-          children: (value) => children(value)
-        },
-        definition.controlType
-      );
-    case ImageDefinition.type:
-      return /* @__PURE__ */ jsx(
-        RenderHook,
-        {
-          hook: useImageControlValue,
-          parameters: [data, definition],
-          children: (value) => children(value)
-        },
-        definition.controlType
-      );
-    case LinkDefinition.type:
-      return /* @__PURE__ */ jsx(
-        RenderHook,
-        {
-          hook: useLinkControlValue,
-          parameters: [data, definition],
-          children: (value) => children(value)
-        },
-        definition.controlType
-      );
-    case ShapeDefinition.type:
-      return /* @__PURE__ */ jsx(
-        ShapeControlValue,
-        {
-          definition,
-          data,
-          control,
-          children: (value) => children(value)
-        }
-      );
-    case ListDefinition.type:
-      return /* @__PURE__ */ jsx(
-        ListControlValue,
-        {
-          definition,
-          data,
-          control,
-          children: (value) => children(value)
-        }
-      );
-    case StyleV2Definition.type:
-      return /* @__PURE__ */ jsx(
-        StyleV2ControlValue,
-        {
-          data,
-          definition,
-          control,
-          children: (value) => children(value)
-        },
-        definition.controlType
-      );
-    case SlotDefinition.type:
-      return /* @__PURE__ */ jsx(
-        RenderHook,
-        {
-          hook: useSlot,
-          parameters: [data, control],
-          children: (value) => children(value)
-        },
-        definition.controlType
-      );
-    case RichTextV1Definition.type:
-      return /* @__PURE__ */ jsx(
-        RenderHook,
-        {
-          hook: useRichText,
-          parameters: [
-            data,
-            control
-          ],
-          children: (value) => children(value)
-        },
-        definition.controlType
-      );
-    case RichTextV2Definition.type:
-      return /* @__PURE__ */ jsx(
-        RenderHook,
-        {
-          hook: useRichTextV2,
-          parameters: [
-            data,
-            definition,
-            control
-          ],
-          children: (value) => children(value)
-        },
-        definition.controlType
-      );
-    case StyleDefinition.type:
-      return /* @__PURE__ */ jsx(
-        RenderHook,
-        {
-          hook: useFormattedStyle,
-          parameters: [
-            data,
-            definition,
-            control
-          ],
-          children: (value) => children(value)
-        },
-        definition.controlType
-      );
-    case unstable_TypographyDefinition.type:
-      return /* @__PURE__ */ jsx(
-        RenderHook,
-        {
-          hook: useTypographyValue,
-          parameters: [data],
-          children: (value) => children(value)
-        },
-        definition.controlType
-      );
-    default:
-      return children(data);
-  }
+  const stylesheetFactory = useStylesheetFactory();
+  const id = `cv-${useCssId()}`;
+  const value = useResolvedValue(
+    data,
+    (data2, resourceResolver) => definition.resolveValue(data2, resourceResolver, stylesheetFactory.get(id), control)
+  );
+  stylesheetFactory.useDefinedStyles();
+  return children(value);
 }
 export {
   ControlValue

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/controls/control.tsx"],"sourcesContent":["import {\n  ControlDefinition,\n  type DataType,\n  type ResolvedValueType,\n  type InstanceType,\n} from '@makeswift/controls'\n\nimport {\n  CheckboxDefinition,\n  NumberDefinition,\n  RichTextV2Definition,\n  ColorDefinition,\n  ComboboxDefinition,\n  IconRadioGroupDefinition,\n  ImageDefinition,\n  LinkDefinition,\n  ListDefinition,\n  RichTextV1Definition,\n  SelectDefinition,\n  ShapeDefinition,\n  SlotDefinition,\n  StyleDefinition,\n  StyleV2Definition,\n  TextAreaDefinition,\n  TextInputDefinition,\n  unstable_TypographyDefinition,\n} from '../../../controls'\n\nimport { RenderHook } from '../components'\nimport { useColorValue } from './color'\nimport { useImageControlValue } from './image'\nimport { useLinkControlValue } from './link'\nimport { ListControlValue } from './list'\nimport { useRichText } from './rich-text/rich-text'\nimport { useRichTextV2 } from './rich-text-v2'\nimport { ShapeControlValue } from './shape'\nimport { useSlot } from './slot'\nimport { useFormattedStyle } from './style'\nimport { StyleV2ControlValue } from './style-v2'\nimport { useTypographyValue } from './typography'\nimport { useResolvedValue } from '../hooks/use-resolved-value'\n\ntype ControlValueProps = {\n  definition: ControlDefinition\n  data: DataType<ControlDefinition> | undefined\n  children(value: ResolvedValueType<ControlDefinition>): JSX.Element\n  control?: InstanceType<ControlDefinition>\n}\n\nexport function ControlValue({\n  data,\n  definition,\n  children,\n  control,\n}: ControlValueProps): JSX.Element {\n  switch (definition.controlType) {\n    case CheckboxDefinition.type:\n    case NumberDefinition.type:\n    case TextInputDefinition.type:\n    case TextAreaDefinition.type:\n    case SelectDefinition.type:\n    case IconRadioGroupDefinition.type:\n    case ComboboxDefinition.type:\n      return (\n        <RenderHook\n          key={definition.controlType}\n          hook={useResolvedValue}\n          parameters={[data, definition]}\n        >\n          {value => children(value)}\n        </RenderHook>\n      )\n\n    case ColorDefinition.type:\n      return (\n        <RenderHook\n          key={definition.controlType}\n          hook={useColorValue}\n          parameters={[data as DataType<ColorDefinition>, definition as ColorDefinition]}\n        >\n          {value => children(value)}\n        </RenderHook>\n      )\n\n    case ImageDefinition.type:\n      return (\n        <RenderHook\n          key={definition.controlType}\n          hook={useImageControlValue}\n          parameters={[data as DataType<ImageDefinition>, definition as ImageDefinition]}\n        >\n          {value => children(value)}\n        </RenderHook>\n      )\n\n    case LinkDefinition.type:\n      return (\n        <RenderHook\n          key={definition.controlType}\n          hook={useLinkControlValue}\n          parameters={[data as DataType<LinkDefinition>, definition as LinkDefinition]}\n        >\n          {value => children(value)}\n        </RenderHook>\n      )\n\n    case ShapeDefinition.type:\n      return (\n        <ShapeControlValue\n          definition={definition as ShapeDefinition}\n          data={data as DataType<ShapeDefinition>}\n          control={control as InstanceType<ShapeDefinition>}\n        >\n          {value => children(value)}\n        </ShapeControlValue>\n      )\n\n    case ListDefinition.type:\n      return (\n        <ListControlValue\n          definition={definition as ListDefinition}\n          data={data as DataType<ListDefinition>}\n          control={control as InstanceType<ListDefinition>}\n        >\n          {value => children(value)}\n        </ListControlValue>\n      )\n\n    case StyleV2Definition.type:\n      return (\n        <StyleV2ControlValue\n          key={definition.controlType}\n          data={data as DataType<StyleV2Definition>}\n          definition={definition as StyleV2Definition}\n          control={control as InstanceType<StyleV2Definition>}\n        >\n          {value => children(value)}\n        </StyleV2ControlValue>\n      )\n\n    case SlotDefinition.type:\n      return (\n        <RenderHook\n          key={definition.controlType}\n          hook={useSlot}\n          parameters={[data as DataType<SlotDefinition>, control as InstanceType<SlotDefinition>]}\n        >\n          {value => children(value)}\n        </RenderHook>\n      )\n\n    case RichTextV1Definition.type:\n      return (\n        <RenderHook\n          key={definition.controlType}\n          hook={useRichText}\n          parameters={[\n            data as DataType<RichTextV1Definition>,\n            control as InstanceType<RichTextV1Definition>,\n          ]}\n        >\n          {value => children(value)}\n        </RenderHook>\n      )\n\n    case RichTextV2Definition.type:\n      return (\n        <RenderHook\n          key={definition.controlType}\n          hook={useRichTextV2}\n          parameters={[\n            data as DataType<RichTextV2Definition>,\n            definition as RichTextV2Definition,\n            control as InstanceType<RichTextV2Definition>,\n          ]}\n        >\n          {value => children(value)}\n        </RenderHook>\n      )\n\n    case StyleDefinition.type:\n      return (\n        <RenderHook\n          key={definition.controlType}\n          hook={useFormattedStyle}\n          parameters={[\n            data as DataType<StyleDefinition>,\n            definition as StyleDefinition,\n            control as InstanceType<StyleDefinition>,\n          ]}\n        >\n          {value => children(value)}\n        </RenderHook>\n      )\n\n    case unstable_TypographyDefinition.type:\n      return (\n        <RenderHook\n          key={definition.controlType}\n          hook={useTypographyValue}\n          parameters={[data as DataType<unstable_TypographyDefinition>]}\n        >\n          {value => children(value)}\n        </RenderHook>\n      )\n\n    default:\n      return children(data)\n  }\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../../src/runtimes/react/controls/control.tsx"],"sourcesContent":["'use client'\n\nimport {\n  ControlDefinition,\n  type InstanceType,\n  type DataType,\n  type ResolvedValueType,\n} from '@makeswift/controls'\n\nimport { useResolvedValue } from '../hooks/use-resolved-value'\nimport { useStylesheetFactory } from '../hooks/use-stylesheet-factory'\nimport { useCssId } from '../hooks/use-css-id'\n\ntype ControlValueProps = {\n  definition: ControlDefinition\n  data: DataType<ControlDefinition> | undefined\n  children(value: ResolvedValueType<ControlDefinition>): JSX.Element\n  control?: InstanceType<ControlDefinition>\n}\n\nexport function ControlValue({\n  data,\n  definition,\n  children,\n  control,\n}: ControlValueProps): JSX.Element {\n  const stylesheetFactory = useStylesheetFactory()\n  const id = `cv-${useCssId()}`\n\n  const value = useResolvedValue(data, (data, resourceResolver) =>\n    definition.resolveValue(data, resourceResolver, stylesheetFactory.get(id), control),\n  )\n\n  stylesheetFactory.useDefinedStyles()\n\n  return children(value)\n}\n"],"mappings":";AASA,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AACrC,SAAS,gBAAgB;AASlB,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAmC;AACjC,QAAM,oBAAoB,qBAAqB;AAC/C,QAAM,KAAK,MAAM,SAAS,CAAC;AAE3B,QAAM,QAAQ;AAAA,IAAiB;AAAA,IAAM,CAACA,OAAM,qBAC1C,WAAW,aAAaA,OAAM,kBAAkB,kBAAkB,IAAI,EAAE,GAAG,OAAO;AAAA,EACpF;AAEA,oBAAkB,iBAAiB;AAEnC,SAAO,SAAS,KAAK;AACvB;","names":["data"]}

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from "react/jsx-runtime";
 import { cx } from "@emotion/css";
 import { getBox } from "css-box-model";

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":["import { 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/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"]}

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

@@ -6,7 +6,13 @@ import {
 import { useIsPreview } from "../../hooks/use-is-preview";
 const EditableText = lazy(() => import("./EditableText"));
 const ReadOnlyText = lazy(() => import("./ReadOnlyText"));
-function useRichText(data, control) {
+function renderRichText(data, control) {
+  return /* @__PURE__ */ jsx(RichText, { data, control });
+}
+function RichText({
+  data,
+  control
+}) {
   const textCallbackRef = useCallback(
     (handle) => {
       if (isPropControllersHandle(handle))
@@ -18,6 +24,6 @@ function useRichText(data, control) {
   return isPreview ? /* @__PURE__ */ jsx(EditableText, { text: data, ref: textCallbackRef }) : /* @__PURE__ */ jsx(ReadOnlyText, { text: data, ref: textCallbackRef });
 }
 export {
-  useRichText
+  renderRichText
 };
 //# sourceMappingURL=rich-text.js.map

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 { useIsPreview } from '../../hooks/use-is-preview'\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 useRichText(\n  data: DataType<RichTextV1Definition>,\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  const isPreview = useIsPreview()\n\n  return isPreview ? (\n    <EditableText text={data} ref={textCallbackRef} />\n  ) : (\n    <ReadOnlyText text={data} ref={textCallbackRef} />\n  )\n}\n"],"mappings":"AAkCI;AAlCJ,SAAoB,MAAM,mBAAmB;AAK7C;AAAA,EACE;AAAA,OAEK;AAEP,SAAS,oBAAoB;AAE7B,MAAM,eAAe,KAAK,MAAM,OAAO,gBAAgB,CAAC;AACxD,MAAM,eAAe,KAAK,MAAM,OAAO,gBAAgB,CAAC;AAMjD,SAAS,YACd,MACA,SACA;AACA,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,QAAM,YAAY,aAAa;AAE/B,SAAO,YACL,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/prop-controller-handles'\n\nimport { useIsPreview } from '../../hooks/use-is-preview'\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  const isPreview = useIsPreview()\n\n  return isPreview ? (\n    <EditableText text={data} ref={textCallbackRef} />\n  ) : (\n    <ReadOnlyText text={data} ref={textCallbackRef} />\n  )\n}\n"],"mappings":"AAuBS;AAvBT,SAAoB,MAAM,mBAAmB;AAK7C;AAAA,EACE;AAAA,OAEK;AAEP,SAAS,oBAAoB;AAE7B,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,QAAM,YAAY,aAAa;AAE/B,SAAO,YACL,oBAAC,gBAAa,MAAM,MAAM,KAAK,iBAAiB,IAEhD,oBAAC,gBAAa,MAAM,MAAM,KAAK,iBAAiB;AAEpD;","names":[]}

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from "react/jsx-runtime";
 import {
   useCallback,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/runtimes/react/controls/rich-text-v2/EditableTextV2/editable-text-v2.tsx"],"sourcesContent":["import {\n  FocusEvent,\n  KeyboardEvent,\n  MouseEvent,\n  ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { createEditor } from 'slate'\nimport isHotkey from 'is-hotkey'\nimport {\n  withReact,\n  ReactEditor,\n  RenderElementProps,\n  RenderLeafProps,\n  Slate,\n  Editable,\n} from 'slate-react'\n\nimport {\n  RichTextV2Definition,\n  RichText,\n  RichTextV2Control,\n  type RichTextDataV2,\n} from '../../../../../controls/rich-text-v2'\n\nimport { useBuilderEditMode } from '../../..'\nimport { BuilderEditMode } from '../../../../../state/modules/builder-edit-mode'\nimport { pollBoxModel } from '../../../poll-box-model'\nimport { withBuilder, withLocalChanges } from '../../../../../slate'\nimport { useSyncDOMSelection } from './useSyncDOMSelection'\nimport { RichTextV2Element } from './render-element'\nimport { RichTextV2Leaf } from './render-leaf'\nimport { useSyncRemoteChanges } from './useRemoteChanges'\nimport { defaultValue, usePresetValue } from './usePresetValue'\n\nexport type RichTextV2ControlValue = ReactNode\n\nexport type Descriptors = { text?: RichTextV2Definition }\n\ntype Props = {\n  text?: RichTextDataV2\n  definition: RichTextV2Definition\n  control: RichTextV2Control | null\n}\n\nexport function EditableTextV2({ text, definition, control }: Props) {\n  const plugins = useMemo(() => definition.config.plugins, [definition])\n\n  const [editor] = useState(() =>\n    plugins.reduceRight(\n      (editor, plugin) => plugin?.withPlugin?.(editor) ?? editor,\n      withLocalChanges(withBuilder(withReact(createEditor()))),\n    ),\n  )\n\n  useEffect(() => {\n    if (control == null) return\n\n    const element = ReactEditor.toDOMNode(editor, editor)\n    return pollBoxModel({\n      element,\n      onBoxModelChange: boxModel => control.changeBoxModel(boxModel),\n    })\n  }, [editor, control])\n\n  // ------ Preserving selection ------\n\n  const isPreservingFocus = useRef(false)\n  useSyncDOMSelection(editor, isPreservingFocus)\n  const editMode = useBuilderEditMode()\n\n  useEffect(() => {\n    /**\n     * This is required because clicking on the overlay has `relatedTarget` null just like the sidebar, but\n     * - in the case of the overlay we switch to BUILD mode\n     * - in the case of the sidebar we preserve the selection\n     */\n    if (editMode !== BuilderEditMode.CONTENT) {\n      isPreservingFocus.current = false\n      ReactEditor.deselect(editor)\n    }\n  }, [editMode])\n\n  // ------ Syncing remote changes ------\n\n  useSyncRemoteChanges(editor, text)\n\n  // ------ Default value ------\n\n  const presetValue = usePresetValue(definition)\n\n  const initialValue = useMemo(\n    () => (text && RichText.dataToNodes(text)) ?? presetValue,\n    [text, presetValue],\n  )\n\n  useEffect(() => {\n    control?.setEditor(editor)\n    control?.setDefaultValue(defaultValue)\n  }, [control, editor])\n\n  /**\n   * When initialValue is set to the default value we need to trigger an local change so that the sidebar updates and so the data is saved\n   */\n  useEffect(() => {\n    if (initialValue === presetValue) {\n      control?.onLocalUserChange()\n    }\n  }, [control, initialValue, presetValue])\n\n  // ------ Rendering ------\n\n  const renderElement = useCallback(\n    (props: RenderElementProps) => {\n      return <RichTextV2Element {...props} definition={definition} plugins={plugins} />\n    },\n    [plugins, definition],\n  )\n\n  const renderLeaf = useCallback(\n    (props: RenderLeafProps) => {\n      return <RichTextV2Leaf {...props} definition={definition} plugins={plugins} />\n    },\n    [plugins, definition],\n  )\n\n  // ------ Event handlers ------\n\n  const handleFocus = useCallback(() => {\n    isPreservingFocus.current = true\n    control?.select()\n  }, [control])\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (isHotkey('mod+shift+z', e)) return control?.redo()\n      if (isHotkey('mod+z', e)) return control?.undo()\n      if (isHotkey('escape')(e)) {\n        isPreservingFocus.current = false\n        ReactEditor.blur(editor)\n        control?.switchToBuildMode()\n      }\n\n      if (editMode === BuilderEditMode.CONTENT) {\n        e.stopPropagation()\n      }\n\n      plugins.forEach(plugin => plugin?.onKeyDown?.(e, editor))\n    },\n    [control, plugins, editor, editMode],\n  )\n\n  const handleKeyUp = useCallback(\n    (e: KeyboardEvent) => {\n      if (editMode === BuilderEditMode.CONTENT) {\n        e.stopPropagation()\n        e.preventDefault()\n      }\n    },\n    [control, editor, editMode],\n  )\n\n  const handleClick = useCallback(\n    (e: MouseEvent) => {\n      if (editMode === BuilderEditMode.CONTENT) {\n        e.stopPropagation()\n        e.preventDefault()\n      }\n    },\n    [editMode],\n  )\n\n  const handleBlur = useCallback((e: FocusEvent) => {\n    // outside of iframe (overlay, sidebar, etc)\n    if (e.relatedTarget == null) return\n    // another text\n    if (e.relatedTarget?.getAttribute('contenteditable') === 'true')\n      isPreservingFocus.current = false\n  }, [])\n\n  return (\n    <Slate editor={editor} value={initialValue}>\n      <Editable\n        renderLeaf={renderLeaf}\n        renderElement={renderElement}\n        onFocus={handleFocus}\n        onKeyDown={handleKeyDown}\n        onKeyUp={handleKeyUp}\n        onClick={handleClick}\n        onBlur={handleBlur}\n        readOnly={editMode !== BuilderEditMode.CONTENT}\n        placeholder=\"Write some text...\"\n      />\n    </Slate>\n  )\n}\n\nexport default EditableTextV2\n"],"mappings":"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","names":["editor"]}
+{"version":3,"sources":["../../../../../../../src/runtimes/react/controls/rich-text-v2/EditableTextV2/editable-text-v2.tsx"],"sourcesContent":["'use client'\n\nimport {\n  FocusEvent,\n  KeyboardEvent,\n  MouseEvent,\n  ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { createEditor } from 'slate'\nimport isHotkey from 'is-hotkey'\nimport {\n  withReact,\n  ReactEditor,\n  RenderElementProps,\n  RenderLeafProps,\n  Slate,\n  Editable,\n} from 'slate-react'\n\nimport {\n  RichTextV2Definition,\n  RichText,\n  RichTextV2Control,\n  type RichTextDataV2,\n} from '../../../../../controls/rich-text-v2'\n\nimport { useBuilderEditMode } from '../../..'\nimport { BuilderEditMode } from '../../../../../state/modules/builder-edit-mode'\nimport { pollBoxModel } from '../../../poll-box-model'\nimport { withBuilder, withLocalChanges } from '../../../../../slate'\nimport { useSyncDOMSelection } from './useSyncDOMSelection'\nimport { RichTextV2Element } from './render-element'\nimport { RichTextV2Leaf } from './render-leaf'\nimport { useSyncRemoteChanges } from './useRemoteChanges'\nimport { defaultValue, usePresetValue } from './usePresetValue'\n\nexport type RichTextV2ControlValue = ReactNode\n\nexport type Descriptors = { text?: RichTextV2Definition }\n\ntype Props = {\n  text?: RichTextDataV2\n  definition: RichTextV2Definition\n  control: RichTextV2Control | null\n}\n\nexport function EditableTextV2({ text, definition, control }: Props) {\n  const plugins = useMemo(() => definition.config.plugins, [definition])\n\n  const [editor] = useState(() =>\n    plugins.reduceRight(\n      (editor, plugin) => plugin?.withPlugin?.(editor) ?? editor,\n      withLocalChanges(withBuilder(withReact(createEditor()))),\n    ),\n  )\n\n  useEffect(() => {\n    if (control == null) return\n\n    const element = ReactEditor.toDOMNode(editor, editor)\n    return pollBoxModel({\n      element,\n      onBoxModelChange: boxModel => control.changeBoxModel(boxModel),\n    })\n  }, [editor, control])\n\n  // ------ Preserving selection ------\n\n  const isPreservingFocus = useRef(false)\n  useSyncDOMSelection(editor, isPreservingFocus)\n  const editMode = useBuilderEditMode()\n\n  useEffect(() => {\n    /**\n     * This is required because clicking on the overlay has `relatedTarget` null just like the sidebar, but\n     * - in the case of the overlay we switch to BUILD mode\n     * - in the case of the sidebar we preserve the selection\n     */\n    if (editMode !== BuilderEditMode.CONTENT) {\n      isPreservingFocus.current = false\n      ReactEditor.deselect(editor)\n    }\n  }, [editMode])\n\n  // ------ Syncing remote changes ------\n\n  useSyncRemoteChanges(editor, text)\n\n  // ------ Default value ------\n\n  const presetValue = usePresetValue(definition)\n\n  const initialValue = useMemo(\n    () => (text && RichText.dataToNodes(text)) ?? presetValue,\n    [text, presetValue],\n  )\n\n  useEffect(() => {\n    control?.setEditor(editor)\n    control?.setDefaultValue(defaultValue)\n  }, [control, editor])\n\n  /**\n   * When initialValue is set to the default value we need to trigger an local change so that the sidebar updates and so the data is saved\n   */\n  useEffect(() => {\n    if (initialValue === presetValue) {\n      control?.onLocalUserChange()\n    }\n  }, [control, initialValue, presetValue])\n\n  // ------ Rendering ------\n\n  const renderElement = useCallback(\n    (props: RenderElementProps) => {\n      return <RichTextV2Element {...props} definition={definition} plugins={plugins} />\n    },\n    [plugins, definition],\n  )\n\n  const renderLeaf = useCallback(\n    (props: RenderLeafProps) => {\n      return <RichTextV2Leaf {...props} definition={definition} plugins={plugins} />\n    },\n    [plugins, definition],\n  )\n\n  // ------ Event handlers ------\n\n  const handleFocus = useCallback(() => {\n    isPreservingFocus.current = true\n    control?.select()\n  }, [control])\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (isHotkey('mod+shift+z', e)) return control?.redo()\n      if (isHotkey('mod+z', e)) return control?.undo()\n      if (isHotkey('escape')(e)) {\n        isPreservingFocus.current = false\n        ReactEditor.blur(editor)\n        control?.switchToBuildMode()\n      }\n\n      if (editMode === BuilderEditMode.CONTENT) {\n        e.stopPropagation()\n      }\n\n      plugins.forEach(plugin => plugin?.onKeyDown?.(e, editor))\n    },\n    [control, plugins, editor, editMode],\n  )\n\n  const handleKeyUp = useCallback(\n    (e: KeyboardEvent) => {\n      if (editMode === BuilderEditMode.CONTENT) {\n        e.stopPropagation()\n        e.preventDefault()\n      }\n    },\n    [control, editor, editMode],\n  )\n\n  const handleClick = useCallback(\n    (e: MouseEvent) => {\n      if (editMode === BuilderEditMode.CONTENT) {\n        e.stopPropagation()\n        e.preventDefault()\n      }\n    },\n    [editMode],\n  )\n\n  const handleBlur = useCallback((e: FocusEvent) => {\n    // outside of iframe (overlay, sidebar, etc)\n    if (e.relatedTarget == null) return\n    // another text\n    if (e.relatedTarget?.getAttribute('contenteditable') === 'true')\n      isPreservingFocus.current = false\n  }, [])\n\n  return (\n    <Slate editor={editor} value={initialValue}>\n      <Editable\n        renderLeaf={renderLeaf}\n        renderElement={renderElement}\n        onFocus={handleFocus}\n        onKeyDown={handleKeyDown}\n        onKeyUp={handleKeyUp}\n        onClick={handleClick}\n        onBlur={handleBlur}\n        readOnly={editMode !== BuilderEditMode.CONTENT}\n        placeholder=\"Write some text...\"\n      />\n    </Slate>\n  )\n}\n\nexport default EditableTextV2\n"],"mappings":"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","names":["editor"]}

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

@@ -1,6 +1,6 @@
 import { Fragment, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { RichText } from "../../../../controls";
+import { RichText } from "../../../../controls/rich-text-v2";
 import { useStyle } from "../../use-style";
 import { toText } from "../../../../slate";
 import { ControlValue } from "../control";

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/runtimes/react/controls/rich-text-v2/ReadOnlyTextV2.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef } from 'react'\n\nimport { RichTextV2Definition, RichText } from '../../../../controls'\nimport { useStyle } from '../../use-style'\nimport { Descendant, Element, Text } from 'slate'\nimport { toText } from '../../../../slate'\nimport { ControlValue } from '../control'\nimport { RenderElementProps, RenderLeafProps } from 'slate-react'\nimport { RichTextV2Plugin } from '../../../../controls/rich-text-v2/plugin'\nimport { RichTextDataV2 } from '../../../../controls/rich-text-v2'\n\ntype Props = {\n  text: RichTextDataV2 | null\n  definition: RichTextV2Definition | null\n}\n\nconst ReadOnlyTextV2 = forwardRef(function ReadOnlyText(\n  { text, definition }: Props,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const descendantsAsString = toText(\n    text?.descendants ?? [],\n    definition?.config.mode ?? RichText.Mode.Block,\n  )\n\n  return (\n    <div\n      ref={ref}\n      style={{\n        /**\n         * These are the default styles that Slate uses for its editable div.\n         * https://github.com/ianstormtaylor/slate/blob/4bd15ed3950e3a0871f5d0ecb391bb637c05e59d/packages/slate-react/src/components/editable.tsx\n         * Search for `disableDefaultStyles`\n         */\n        position: 'relative',\n        whiteSpace: 'pre-wrap',\n        wordWrap: 'break-word',\n      }}\n    >\n      {descendantsAsString === '' ? (\n        <Placeholder />\n      ) : (\n        <Descendants\n          plugins={definition?.config.plugins ?? []}\n          descendants={text?.descendants ?? []}\n        />\n      )}\n    </div>\n  )\n})\n\nexport default ReadOnlyTextV2\n\nfunction Placeholder({ text = 'Write some text...' }: { text?: string }) {\n  return (\n    <span\n      className={useStyle({\n        display: 'inline-block',\n        width: 0,\n        maxWidth: '100%',\n        whiteSpace: 'nowrap',\n        opacity: 0.333,\n        verticalAlign: 'text-top',\n      })}\n    >\n      {text}\n    </span>\n  )\n}\n\ntype LeafProps = {\n  leaf: Text\n  plugins: RichTextV2Plugin[]\n}\n\nexport function LeafComponent({ plugins, ...props }: LeafProps) {\n  function initialRenderLeaf({ leaf }: RenderLeafProps) {\n    return <span className={leaf.className}>{leaf.text === '' ? '\\uFEFF' : leaf.text}</span>\n  }\n\n  const renderLeaf = plugins.reduce(\n    (renderFn, plugin) => (props: RenderLeafProps) => {\n      const { control, renderLeaf } = plugin\n\n      if (control?.definition == null || renderLeaf == null) return renderFn(props)\n\n      if (control.getLeafValue == null) return renderLeaf(renderFn, undefined)(props)\n\n      return (\n        <ControlValue definition={control.definition} data={control.getLeafValue(props.leaf)}>\n          {value => renderLeaf(renderFn, value)(props)}\n        </ControlValue>\n      )\n    },\n    initialRenderLeaf,\n  )\n\n  return renderLeaf({ attributes: {} as any, leaf: props.leaf, children: null, text: props.leaf })\n}\n\ntype ElementProps = {\n  descendant: Element\n  plugins: RichTextV2Plugin[]\n}\n\nfunction ElementComponent({ plugins, ...props }: ElementProps) {\n  function initialRenderElement(props: RenderElementProps) {\n    return <Descendants descendants={props.element.children} plugins={plugins} />\n  }\n\n  const renderElement = plugins.reduce(\n    (renderFn, plugin) => (props: RenderElementProps) => {\n      const { control, renderElement } = plugin\n\n      if (control?.definition == null || renderElement == null) return renderFn(props)\n\n      if (control.getElementValue == null) return renderElement(renderFn, undefined)(props)\n\n      return (\n        <ControlValue definition={control.definition} data={control.getElementValue(props.element)}>\n          {value => renderElement(renderFn, value)(props)}\n        </ControlValue>\n      )\n    },\n    initialRenderElement,\n  )\n\n  return renderElement({ attributes: {} as any, children: null, element: props.descendant })\n}\n\n// reimplemented from slate source for code splitting\nfunction isText(node: Descendant): node is Text {\n  if (typeof node === 'object' && 'text' in node) return true\n\n  return false\n}\n\nfunction Descendants({\n  descendants,\n  plugins,\n}: {\n  plugins: RichTextV2Plugin[]\n  descendants: Descendant[]\n}) {\n  return (\n    <>\n      {descendants.map((descendant, index) => {\n        if (isText(descendant)) {\n          return <LeafComponent key={index} plugins={plugins} leaf={descendant} />\n        }\n\n        return <ElementComponent key={index} descendant={descendant} plugins={plugins} />\n      })}\n    </>\n  )\n}\n"],"mappings":"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","names":["props","renderLeaf","renderElement"]}
+{"version":3,"sources":["../../../../../../src/runtimes/react/controls/rich-text-v2/ReadOnlyTextV2.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef } from 'react'\n\nimport { RichTextV2Definition, RichText } from '../../../../controls/rich-text-v2'\nimport { useStyle } from '../../use-style'\nimport { Descendant, Element, Text } from 'slate'\nimport { toText } from '../../../../slate'\nimport { ControlValue } from '../control'\nimport { RenderElementProps, RenderLeafProps } from 'slate-react'\nimport { RichTextV2Plugin } from '../../../../controls/rich-text-v2/plugin'\nimport { RichTextDataV2 } from '../../../../controls/rich-text-v2'\n\ntype Props = {\n  text: RichTextDataV2 | undefined\n  definition: RichTextV2Definition | undefined\n}\n\nconst ReadOnlyTextV2 = forwardRef(function ReadOnlyText(\n  { text, definition }: Props,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const descendantsAsString = toText(\n    text?.descendants ?? [],\n    definition?.config.mode ?? RichText.Mode.Block,\n  )\n\n  return (\n    <div\n      ref={ref}\n      style={{\n        /**\n         * These are the default styles that Slate uses for its editable div.\n         * https://github.com/ianstormtaylor/slate/blob/4bd15ed3950e3a0871f5d0ecb391bb637c05e59d/packages/slate-react/src/components/editable.tsx\n         * Search for `disableDefaultStyles`\n         */\n        position: 'relative',\n        whiteSpace: 'pre-wrap',\n        wordWrap: 'break-word',\n      }}\n    >\n      {descendantsAsString === '' ? (\n        <Placeholder />\n      ) : (\n        <Descendants\n          plugins={definition?.config.plugins ?? []}\n          descendants={text?.descendants ?? []}\n        />\n      )}\n    </div>\n  )\n})\n\nexport default ReadOnlyTextV2\n\nfunction Placeholder({ text = 'Write some text...' }: { text?: string }) {\n  return (\n    <span\n      className={useStyle({\n        display: 'inline-block',\n        width: 0,\n        maxWidth: '100%',\n        whiteSpace: 'nowrap',\n        opacity: 0.333,\n        verticalAlign: 'text-top',\n      })}\n    >\n      {text}\n    </span>\n  )\n}\n\ntype LeafProps = {\n  leaf: Text\n  plugins: RichTextV2Plugin[]\n}\n\nexport function LeafComponent({ plugins, ...props }: LeafProps) {\n  function initialRenderLeaf({ leaf }: RenderLeafProps) {\n    return <span className={leaf.className}>{leaf.text === '' ? '\\uFEFF' : leaf.text}</span>\n  }\n\n  const renderLeaf = plugins.reduce(\n    (renderFn, plugin) => (props: RenderLeafProps) => {\n      const { control, renderLeaf } = plugin\n\n      if (control?.definition == null || renderLeaf == null) return renderFn(props)\n\n      if (control.getLeafValue == null) return renderLeaf(renderFn, undefined)(props)\n\n      return (\n        <ControlValue definition={control.definition} data={control.getLeafValue(props.leaf)}>\n          {value => renderLeaf(renderFn, value)(props)}\n        </ControlValue>\n      )\n    },\n    initialRenderLeaf,\n  )\n\n  return renderLeaf({ attributes: {} as any, leaf: props.leaf, children: null, text: props.leaf })\n}\n\ntype ElementProps = {\n  descendant: Element\n  plugins: RichTextV2Plugin[]\n}\n\nfunction ElementComponent({ plugins, ...props }: ElementProps) {\n  function initialRenderElement(props: RenderElementProps) {\n    return <Descendants descendants={props.element.children} plugins={plugins} />\n  }\n\n  const renderElement = plugins.reduce(\n    (renderFn, plugin) => (props: RenderElementProps) => {\n      const { control, renderElement } = plugin\n\n      if (control?.definition == null || renderElement == null) return renderFn(props)\n\n      if (control.getElementValue == null) return renderElement(renderFn, undefined)(props)\n\n      return (\n        <ControlValue definition={control.definition} data={control.getElementValue(props.element)}>\n          {value => renderElement(renderFn, value)(props)}\n        </ControlValue>\n      )\n    },\n    initialRenderElement,\n  )\n\n  return renderElement({ attributes: {} as any, children: null, element: props.descendant })\n}\n\n// reimplemented from slate source for code splitting\nfunction isText(node: Descendant): node is Text {\n  if (typeof node === 'object' && 'text' in node) return true\n\n  return false\n}\n\nfunction Descendants({\n  descendants,\n  plugins,\n}: {\n  plugins: RichTextV2Plugin[]\n  descendants: Descendant[]\n}) {\n  return (\n    <>\n      {descendants.map((descendant, index) => {\n        if (isText(descendant)) {\n          return <LeafComponent key={index} plugins={plugins} leaf={descendant} />\n        }\n\n        return <ElementComponent key={index} descendant={descendant} plugins={plugins} />\n      })}\n    </>\n  )\n}\n"],"mappings":"AAwCQ,SAyGJ,UAzGI;AAxCR,SAAuB,kBAAkB;AAEzC,SAA+B,gBAAgB;AAC/C,SAAS,gBAAgB;AAEzB,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAU7B,MAAM,iBAAiB,WAAW,SAAS,aACzC,EAAE,MAAM,WAAW,GACnB,KACA;AACA,QAAM,sBAAsB;AAAA,IAC1B,MAAM,eAAe,CAAC;AAAA,IACtB,YAAY,OAAO,QAAQ,SAAS,KAAK;AAAA,EAC3C;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAML,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,UAAU;AAAA,MACZ;AAAA,MAEC,kCAAwB,KACvB,oBAAC,eAAY,IAEb;AAAA,QAAC;AAAA;AAAA,UACC,SAAS,YAAY,OAAO,WAAW,CAAC;AAAA,UACxC,aAAa,MAAM,eAAe,CAAC;AAAA;AAAA,MACrC;AAAA;AAAA,EAEJ;AAEJ,CAAC;AAED,IAAO,yBAAQ;AAEf,SAAS,YAAY,EAAE,OAAO,qBAAqB,GAAsB;AACvE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,SAAS;AAAA,QAClB,SAAS;AAAA,QACT,OAAO;AAAA,QACP,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,SAAS;AAAA,QACT,eAAe;AAAA,MACjB,CAAC;AAAA,MAEA;AAAA;AAAA,EACH;AAEJ;AAOO,SAAS,cAAc,EAAE,SAAS,GAAG,MAAM,GAAc;AAC9D,WAAS,kBAAkB,EAAE,KAAK,GAAoB;AACpD,WAAO,oBAAC,UAAK,WAAW,KAAK,WAAY,eAAK,SAAS,KAAK,WAAW,KAAK,MAAK;AAAA,EACnF;AAEA,QAAM,aAAa,QAAQ;AAAA,IACzB,CAAC,UAAU,WAAW,CAACA,WAA2B;AAChD,YAAM,EAAE,SAAS,YAAAC,YAAW,IAAI;AAEhC,UAAI,SAAS,cAAc,QAAQA,eAAc;AAAM,eAAO,SAASD,MAAK;AAE5E,UAAI,QAAQ,gBAAgB;AAAM,eAAOC,YAAW,UAAU,MAAS,EAAED,MAAK;AAE9E,aACE,oBAAC,gBAAa,YAAY,QAAQ,YAAY,MAAM,QAAQ,aAAaA,OAAM,IAAI,GAChF,qBAASC,YAAW,UAAU,KAAK,EAAED,MAAK,GAC7C;AAAA,IAEJ;AAAA,IACA;AAAA,EACF;AAEA,SAAO,WAAW,EAAE,YAAY,CAAC,GAAU,MAAM,MAAM,MAAM,UAAU,MAAM,MAAM,MAAM,KAAK,CAAC;AACjG;AAOA,SAAS,iBAAiB,EAAE,SAAS,GAAG,MAAM,GAAiB;AAC7D,WAAS,qBAAqBA,QAA2B;AACvD,WAAO,oBAAC,eAAY,aAAaA,OAAM,QAAQ,UAAU,SAAkB;AAAA,EAC7E;AAEA,QAAM,gBAAgB,QAAQ;AAAA,IAC5B,CAAC,UAAU,WAAW,CAACA,WAA8B;AACnD,YAAM,EAAE,SAAS,eAAAE,eAAc,IAAI;AAEnC,UAAI,SAAS,cAAc,QAAQA,kBAAiB;AAAM,eAAO,SAASF,MAAK;AAE/E,UAAI,QAAQ,mBAAmB;AAAM,eAAOE,eAAc,UAAU,MAAS,EAAEF,MAAK;AAEpF,aACE,oBAAC,gBAAa,YAAY,QAAQ,YAAY,MAAM,QAAQ,gBAAgBA,OAAM,OAAO,GACtF,qBAASE,eAAc,UAAU,KAAK,EAAEF,MAAK,GAChD;AAAA,IAEJ;AAAA,IACA;AAAA,EACF;AAEA,SAAO,cAAc,EAAE,YAAY,CAAC,GAAU,UAAU,MAAM,SAAS,MAAM,WAAW,CAAC;AAC3F;AAGA,SAAS,OAAO,MAAgC;AAC9C,MAAI,OAAO,SAAS,YAAY,UAAU;AAAM,WAAO;AAEvD,SAAO;AACT;AAEA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AACF,GAGG;AACD,SACE,gCACG,sBAAY,IAAI,CAAC,YAAY,UAAU;AACtC,QAAI,OAAO,UAAU,GAAG;AACtB,aAAO,oBAAC,iBAA0B,SAAkB,MAAM,cAA/B,KAA2C;AAAA,IACxE;AAEA,WAAO,oBAAC,oBAA6B,YAAwB,WAA/B,KAAiD;AAAA,EACjF,CAAC,GACH;AAEJ;","names":["props","renderLeaf","renderElement"]}

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

@@ -1,18 +1,23 @@
 import { jsx } from "react/jsx-runtime";
 import { lazy } from "react";
-import { RichTextV2Definition } from "../../../../controls/rich-text-v2";
-import { useIsPreview } from "../../../react";
+import {
+  RichTextV2Definition
+} from "../../../../controls/rich-text-v2";
+import { useIsPreview } from "../../../react/hooks/use-is-preview";
 const EditableText = lazy(() => import("./EditableTextV2"));
 const ReadOnlyText = lazy(() => import("./ReadOnlyTextV2"));
 const ReadOnlyTextV1 = lazy(() => import("../rich-text/ReadOnlyText"));
-function useRichTextV2(data, definition, control) {
-  const isPreview = useIsPreview();
-  if (RichTextV2Definition.isV1Data(data)) {
-    return /* @__PURE__ */ jsx(ReadOnlyTextV1, { text: data });
-  }
-  return isPreview ? /* @__PURE__ */ jsx(EditableText, { text: data, definition, control }) : /* @__PURE__ */ jsx(ReadOnlyText, { text: data, definition });
+function renderRichTextV2(data, definition, control) {
+  return RichTextV2Definition.isV1Data(data) ? /* @__PURE__ */ jsx(ReadOnlyTextV1, { text: data }) : /* @__PURE__ */ jsx(RichTextV2, { data, definition, control });
+}
+function RichTextV2({
+  data,
+  definition,
+  control
+}) {
+  return useIsPreview() ? /* @__PURE__ */ jsx(EditableText, { text: data, definition, control }) : /* @__PURE__ */ jsx(ReadOnlyText, { text: data, definition });
 }
 export {
-  useRichTextV2
+  renderRichTextV2
 };
 //# sourceMappingURL=rich-text-v2.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/runtimes/react/controls/rich-text-v2/rich-text-v2.tsx"],"sourcesContent":["import { ReactNode, lazy } from 'react'\n\nimport { type DataType } from '@makeswift/controls'\nimport { RichTextV2Control, RichTextV2Definition } from '../../../../controls/rich-text-v2'\nimport { useIsPreview } from '../../../react'\n\nexport type RichTextV2ControlValue = ReactNode\n\nexport type Descriptors = { text?: RichTextV2Definition }\n\nconst EditableText = lazy(() => import('./EditableTextV2'))\nconst ReadOnlyText = lazy(() => import('./ReadOnlyTextV2'))\n\nconst ReadOnlyTextV1 = lazy(() => import('../rich-text/ReadOnlyText'))\n\nexport function useRichTextV2(\n  data: DataType<RichTextV2Definition>,\n  definition: RichTextV2Definition,\n  control: RichTextV2Control | null,\n) {\n  const isPreview = useIsPreview()\n\n  if (RichTextV2Definition.isV1Data(data)) {\n    return <ReadOnlyTextV1 text={data} />\n  }\n\n  return isPreview ? (\n    <EditableText text={data} definition={definition} control={control} />\n  ) : (\n    <ReadOnlyText text={data} definition={definition} />\n  )\n}\n"],"mappings":"AAuBW;AAvBX,SAAoB,YAAY;AAGhC,SAA4B,4BAA4B;AACxD,SAAS,oBAAoB;AAM7B,MAAM,eAAe,KAAK,MAAM,OAAO,kBAAkB,CAAC;AAC1D,MAAM,eAAe,KAAK,MAAM,OAAO,kBAAkB,CAAC;AAE1D,MAAM,iBAAiB,KAAK,MAAM,OAAO,2BAA2B,CAAC;AAE9D,SAAS,cACd,MACA,YACA,SACA;AACA,QAAM,YAAY,aAAa;AAE/B,MAAI,qBAAqB,SAAS,IAAI,GAAG;AACvC,WAAO,oBAAC,kBAAe,MAAM,MAAM;AAAA,EACrC;AAEA,SAAO,YACL,oBAAC,gBAAa,MAAM,MAAM,YAAwB,SAAkB,IAEpE,oBAAC,gBAAa,MAAM,MAAM,YAAwB;AAEtD;","names":[]}
+{"version":3,"sources":["../../../../../../src/runtimes/react/controls/rich-text-v2/rich-text-v2.tsx"],"sourcesContent":["import { ReactNode, lazy } from 'react'\n\nimport { type DataType } from '@makeswift/controls'\nimport {\n  RichTextV2Control,\n  RichTextV2Definition,\n  RichTextDataV2,\n} from '../../../../controls/rich-text-v2'\nimport { useIsPreview } from '../../../react/hooks/use-is-preview'\n\nexport type RichTextV2ControlValue = ReactNode\n\nexport type Descriptors = { text?: RichTextV2Definition }\n\nconst EditableText = lazy(() => import('./EditableTextV2'))\nconst ReadOnlyText = lazy(() => import('./ReadOnlyTextV2'))\n\nconst ReadOnlyTextV1 = lazy(() => import('../rich-text/ReadOnlyText'))\n\nexport function renderRichTextV2(\n  data: DataType<RichTextV2Definition> | undefined,\n  definition: RichTextV2Definition,\n  control: RichTextV2Control | null,\n): ReactNode {\n  return RichTextV2Definition.isV1Data(data) ? (\n    <ReadOnlyTextV1 text={data} />\n  ) : (\n    <RichTextV2 data={data} definition={definition} control={control} />\n  )\n}\n\nfunction RichTextV2({\n  data,\n  definition,\n  control,\n}: {\n  data: RichTextDataV2 | undefined\n  definition: RichTextV2Definition\n  control: RichTextV2Control | null\n}) {\n  return useIsPreview() ? (\n    <EditableText text={data} definition={definition} control={control} />\n  ) : (\n    <ReadOnlyText text={data} definition={definition} />\n  )\n}\n"],"mappings":"AAyBI;AAzBJ,SAAoB,YAAY;AAGhC;AAAA,EAEE;AAAA,OAEK;AACP,SAAS,oBAAoB;AAM7B,MAAM,eAAe,KAAK,MAAM,OAAO,kBAAkB,CAAC;AAC1D,MAAM,eAAe,KAAK,MAAM,OAAO,kBAAkB,CAAC;AAE1D,MAAM,iBAAiB,KAAK,MAAM,OAAO,2BAA2B,CAAC;AAE9D,SAAS,iBACd,MACA,YACA,SACW;AACX,SAAO,qBAAqB,SAAS,IAAI,IACvC,oBAAC,kBAAe,MAAM,MAAM,IAE5B,oBAAC,cAAW,MAAY,YAAwB,SAAkB;AAEtE;AAEA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SAAO,aAAa,IAClB,oBAAC,gBAAa,MAAM,MAAM,YAAwB,SAAkB,IAEpE,oBAAC,gBAAa,MAAM,MAAM,YAAwB;AAEtD;","names":[]}

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useState, memo } from "react";
 import { cx } from "@emotion/css";
@@ -6,8 +7,8 @@ import { getIndexes } from "../../../components/utils/columns";
 import { useResponsiveStyle } from "../../../components/utils/responsive-style";
 import { useStyle } from "../use-style";
 import { pollBoxModel } from "../poll-box-model";
-function useSlot(data, control) {
-  return /* @__PURE__ */ jsx(SlotValue, { data, control });
+function renderSlot(props) {
+  return /* @__PURE__ */ jsx(SlotValue, { ...props });
 }
 const SlotValue = memo(
   ({
@@ -124,6 +125,6 @@ function SlotPlaceholder({ control }) {
 }
 export {
   Slot,
-  useSlot
+  renderSlot
 };
 //# sourceMappingURL=slot.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/controls/slot.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, ElementType, ReactNode, useEffect, useState, memo } from 'react'\nimport { cx } from '@emotion/css'\n\nimport { SlotDefinition, SlotControl, type DataType } from '@makeswift/controls'\n\nimport { Element } from '../components/Element'\nimport { getIndexes } from '../../../components/utils/columns'\nimport { useResponsiveStyle } from '../../../components/utils/responsive-style'\nimport { useStyle } from '../use-style'\nimport { pollBoxModel } from '../poll-box-model'\n\nexport function useSlot(\n  data: DataType<SlotDefinition<ReactNode>> | undefined,\n  control: SlotControl | null,\n) {\n  return <SlotValue data={data} control={control} />\n}\n\nconst SlotValue = memo(\n  ({\n    data,\n    control,\n  }: {\n    data: DataType<SlotDefinition<ReactNode>> | undefined\n    control: SlotControl | null\n  }): ReactNode => {\n    // TODO(miguel): While the UI shouldn't allow the state, we should probably check that at least\n    // one element is visible.\n    if (data == null || data.elements.length === 0) {\n      return <Slot.Placeholder control={control} />\n    }\n\n    return (\n      <Slot control={control}>\n        {data.elements.map((element, i) => (\n          <Slot.Item key={element.key} control={control} grid={data.columns} index={i}>\n            <Element element={element} />\n          </Slot.Item>\n        ))}\n      </Slot>\n    )\n  },\n)\n\ntype SlotProps<T extends ElementType> = {\n  as?: T\n  control: SlotControl | null\n  children?: ReactNode\n  className?: string\n}\n\nexport function Slot<T extends ElementType = 'div'>({\n  as,\n  control,\n  children,\n  className,\n  ...restOfProps\n}: SlotProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof SlotProps<T>>) {\n  const As = as ?? 'div'\n  const [element, setElement] = useState<Element | null>(null)\n  const baseClassName = useStyle({\n    display: 'flex',\n    flexWrap: 'wrap',\n    width: '100%',\n  })\n\n  useEffect(() => {\n    if (element == null || control == null) return\n\n    return pollBoxModel({\n      element,\n      onBoxModelChange: boxModel => control.changeContainerBoxModel(boxModel),\n    })\n  }, [element, control])\n\n  return (\n    <As {...restOfProps} ref={setElement} className={cx(baseClassName, className)}>\n      {children}\n    </As>\n  )\n}\n\nSlot.Placeholder = SlotPlaceholder\n\nSlot.Item = SlotItem\n\ntype SlotItemProps<T extends ElementType> = {\n  as?: T\n  control: SlotControl | null\n  // @arvin: review for correctness\n  grid: DataType<SlotDefinition<ReactNode>> extends undefined\n    ? undefined\n    : NonNullable<DataType<SlotDefinition<ReactNode>>>['columns']\n  index: number\n  children?: ReactNode\n  className?: string\n}\n\nfunction SlotItem<T extends ElementType = 'div'>({\n  as,\n  control,\n  grid,\n  index,\n  children,\n  className,\n  ...restOfProps\n}: SlotItemProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof SlotItemProps<T>>): JSX.Element {\n  const As = as ?? 'div'\n  const [element, setElement] = useState<Element | null>(null)\n  const baseClassName = useStyle({\n    display: 'flex',\n    ...useResponsiveStyle([grid], ([{ count = 12, spans = [[12]] } = {}]) => {\n      const [rowIndex, columnIndex] = getIndexes(spans, index)\n      const span = spans[rowIndex][columnIndex]\n      const flexBasis = `calc(100% * ${(span / count).toFixed(5)})`\n\n      return span === 0 ? { display: 'none' } : { flexBasis, minWidth: flexBasis }\n    }),\n  })\n\n  useEffect(() => {\n    if (element == null || control == null) return\n\n    return pollBoxModel({\n      element,\n      onBoxModelChange: boxModel => control.changeItemBoxModel(index, boxModel),\n    })\n  }, [element, control, index])\n\n  return (\n    <As {...restOfProps} ref={setElement} className={cx(baseClassName, className)}>\n      {children}\n    </As>\n  )\n}\n\ntype SlotPlaceholderProps = {\n  control: SlotControl | null\n}\n\nfunction SlotPlaceholder({ control }: SlotPlaceholderProps): JSX.Element {\n  const [element, setElement] = useState<Element | null>(null)\n\n  useEffect(() => {\n    if (element == null || control == null) return\n\n    return pollBoxModel({\n      element,\n      onBoxModelChange: boxModel => control.changeContainerBoxModel(boxModel),\n    })\n  }, [element, control])\n\n  return (\n    <div\n      ref={setElement}\n      className={useStyle({\n        width: '100%',\n        background: 'rgba(161, 168, 194, 0.18)',\n        height: '80px',\n      })}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"100%\"\n        height=\"100%\"\n        className={useStyle({ overflow: 'visible', padding: 8 })}\n      >\n        <rect\n          x={0}\n          y={0}\n          width=\"100%\"\n          height=\"100%\"\n          strokeWidth={2}\n          strokeDasharray=\"4 2\"\n          fill=\"none\"\n          stroke=\"rgba(161, 168, 194, 0.40)\"\n          rx=\"4\"\n          ry=\"4\"\n        />\n      </svg>\n    </div>\n  )\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../../src/runtimes/react/controls/slot.tsx"],"sourcesContent":["'use client'\n\nimport { ComponentPropsWithoutRef, ElementType, ReactNode, useEffect, useState, memo } from 'react'\nimport { cx } from '@emotion/css'\n\nimport { SlotDefinition, SlotControl, type DataType } from '@makeswift/controls'\n\nimport { Element } from '../components/Element'\nimport { getIndexes } from '../../../components/utils/columns'\nimport { useResponsiveStyle } from '../../../components/utils/responsive-style'\nimport { useStyle } from '../use-style'\nimport { pollBoxModel } from '../poll-box-model'\n\nexport function renderSlot(props: {\n  data: DataType<SlotDefinition<ReactNode>> | undefined\n  control: SlotControl | null\n}): ReactNode {\n  return <SlotValue {...props} />\n}\n\nconst SlotValue = memo(\n  ({\n    data,\n    control,\n  }: {\n    data: DataType<SlotDefinition<ReactNode>> | undefined\n    control: SlotControl | null\n  }): ReactNode => {\n    // TODO(miguel): While the UI shouldn't allow the state, we should probably check that at least\n    // one element is visible.\n    if (data == null || data.elements.length === 0) {\n      return <Slot.Placeholder control={control} />\n    }\n\n    return (\n      <Slot control={control}>\n        {data.elements.map((element, i) => (\n          <Slot.Item key={element.key} control={control} grid={data.columns} index={i}>\n            <Element element={element} />\n          </Slot.Item>\n        ))}\n      </Slot>\n    )\n  },\n)\n\ntype SlotProps<T extends ElementType> = {\n  as?: T\n  control: SlotControl | null\n  children?: ReactNode\n  className?: string\n}\n\nexport function Slot<T extends ElementType = 'div'>({\n  as,\n  control,\n  children,\n  className,\n  ...restOfProps\n}: SlotProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof SlotProps<T>>) {\n  const As = as ?? 'div'\n  const [element, setElement] = useState<Element | null>(null)\n  const baseClassName = useStyle({\n    display: 'flex',\n    flexWrap: 'wrap',\n    width: '100%',\n  })\n\n  useEffect(() => {\n    if (element == null || control == null) return\n\n    return pollBoxModel({\n      element,\n      onBoxModelChange: boxModel => control.changeContainerBoxModel(boxModel),\n    })\n  }, [element, control])\n\n  return (\n    <As {...restOfProps} ref={setElement} className={cx(baseClassName, className)}>\n      {children}\n    </As>\n  )\n}\n\nSlot.Placeholder = SlotPlaceholder\n\nSlot.Item = SlotItem\n\ntype SlotItemProps<T extends ElementType> = {\n  as?: T\n  control: SlotControl | null\n  // @arvin: review for correctness\n  grid: DataType<SlotDefinition<ReactNode>> extends undefined\n    ? undefined\n    : NonNullable<DataType<SlotDefinition<ReactNode>>>['columns']\n  index: number\n  children?: ReactNode\n  className?: string\n}\n\nfunction SlotItem<T extends ElementType = 'div'>({\n  as,\n  control,\n  grid,\n  index,\n  children,\n  className,\n  ...restOfProps\n}: SlotItemProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof SlotItemProps<T>>): JSX.Element {\n  const As = as ?? 'div'\n  const [element, setElement] = useState<Element | null>(null)\n  const baseClassName = useStyle({\n    display: 'flex',\n    ...useResponsiveStyle([grid], ([{ count = 12, spans = [[12]] } = {}]) => {\n      const [rowIndex, columnIndex] = getIndexes(spans, index)\n      const span = spans[rowIndex][columnIndex]\n      const flexBasis = `calc(100% * ${(span / count).toFixed(5)})`\n\n      return span === 0 ? { display: 'none' } : { flexBasis, minWidth: flexBasis }\n    }),\n  })\n\n  useEffect(() => {\n    if (element == null || control == null) return\n\n    return pollBoxModel({\n      element,\n      onBoxModelChange: boxModel => control.changeItemBoxModel(index, boxModel),\n    })\n  }, [element, control, index])\n\n  return (\n    <As {...restOfProps} ref={setElement} className={cx(baseClassName, className)}>\n      {children}\n    </As>\n  )\n}\n\ntype SlotPlaceholderProps = {\n  control: SlotControl | null\n}\n\nfunction SlotPlaceholder({ control }: SlotPlaceholderProps): JSX.Element {\n  const [element, setElement] = useState<Element | null>(null)\n\n  useEffect(() => {\n    if (element == null || control == null) return\n\n    return pollBoxModel({\n      element,\n      onBoxModelChange: boxModel => control.changeContainerBoxModel(boxModel),\n    })\n  }, [element, control])\n\n  return (\n    <div\n      ref={setElement}\n      className={useStyle({\n        width: '100%',\n        background: 'rgba(161, 168, 194, 0.18)',\n        height: '80px',\n      })}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"100%\"\n        height=\"100%\"\n        className={useStyle({ overflow: 'visible', padding: 8 })}\n      >\n        <rect\n          x={0}\n          y={0}\n          width=\"100%\"\n          height=\"100%\"\n          strokeWidth={2}\n          strokeDasharray=\"4 2\"\n          fill=\"none\"\n          stroke=\"rgba(161, 168, 194, 0.40)\"\n          rx=\"4\"\n          ry=\"4\"\n        />\n      </svg>\n    </div>\n  )\n}\n"],"mappings":";AAiBS;AAfT,SAA2D,WAAW,UAAU,YAAY;AAC5F,SAAS,UAAU;AAInB,SAAS,eAAe;AACxB,SAAS,kBAAkB;AAC3B,SAAS,0BAA0B;AACnC,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAEtB,SAAS,WAAW,OAGb;AACZ,SAAO,oBAAC,aAAW,GAAG,OAAO;AAC/B;AAEA,MAAM,YAAY;AAAA,EAChB,CAAC;AAAA,IACC;AAAA,IACA;AAAA,EACF,MAGiB;AAGf,QAAI,QAAQ,QAAQ,KAAK,SAAS,WAAW,GAAG;AAC9C,aAAO,oBAAC,KAAK,aAAL,EAAiB,SAAkB;AAAA,IAC7C;AAEA,WACE,oBAAC,QAAK,SACH,eAAK,SAAS,IAAI,CAAC,SAAS,MAC3B,oBAAC,KAAK,MAAL,EAA4B,SAAkB,MAAM,KAAK,SAAS,OAAO,GACxE,8BAAC,WAAQ,SAAkB,KADb,QAAQ,GAExB,CACD,GACH;AAAA,EAEJ;AACF;AASO,SAAS,KAAoC;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyE;AACvE,QAAM,KAAK,MAAM;AACjB,QAAM,CAAC,SAAS,UAAU,IAAI,SAAyB,IAAI;AAC3D,QAAM,gBAAgB,SAAS;AAAA,IAC7B,SAAS;AAAA,IACT,UAAU;AAAA,IACV,OAAO;AAAA,EACT,CAAC;AAED,YAAU,MAAM;AACd,QAAI,WAAW,QAAQ,WAAW;AAAM;AAExC,WAAO,aAAa;AAAA,MAClB;AAAA,MACA,kBAAkB,cAAY,QAAQ,wBAAwB,QAAQ;AAAA,IACxE,CAAC;AAAA,EACH,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,SACE,oBAAC,MAAI,GAAG,aAAa,KAAK,YAAY,WAAW,GAAG,eAAe,SAAS,GACzE,UACH;AAEJ;AAEA,KAAK,cAAc;AAEnB,KAAK,OAAO;AAcZ,SAAS,SAAwC;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA8F;AAC5F,QAAM,KAAK,MAAM;AACjB,QAAM,CAAC,SAAS,UAAU,IAAI,SAAyB,IAAI;AAC3D,QAAM,gBAAgB,SAAS;AAAA,IAC7B,SAAS;AAAA,IACT,GAAG,mBAAmB,CAAC,IAAI,GAAG,CAAC,CAAC,EAAE,QAAQ,IAAI,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC,MAAM;AACvE,YAAM,CAAC,UAAU,WAAW,IAAI,WAAW,OAAO,KAAK;AACvD,YAAM,OAAO,MAAM,QAAQ,EAAE,WAAW;AACxC,YAAM,YAAY,gBAAgB,OAAO,OAAO,QAAQ,CAAC,CAAC;AAE1D,aAAO,SAAS,IAAI,EAAE,SAAS,OAAO,IAAI,EAAE,WAAW,UAAU,UAAU;AAAA,IAC7E,CAAC;AAAA,EACH,CAAC;AAED,YAAU,MAAM;AACd,QAAI,WAAW,QAAQ,WAAW;AAAM;AAExC,WAAO,aAAa;AAAA,MAClB;AAAA,MACA,kBAAkB,cAAY,QAAQ,mBAAmB,OAAO,QAAQ;AAAA,IAC1E,CAAC;AAAA,EACH,GAAG,CAAC,SAAS,SAAS,KAAK,CAAC;AAE5B,SACE,oBAAC,MAAI,GAAG,aAAa,KAAK,YAAY,WAAW,GAAG,eAAe,SAAS,GACzE,UACH;AAEJ;AAMA,SAAS,gBAAgB,EAAE,QAAQ,GAAsC;AACvE,QAAM,CAAC,SAAS,UAAU,IAAI,SAAyB,IAAI;AAE3D,YAAU,MAAM;AACd,QAAI,WAAW,QAAQ,WAAW;AAAM;AAExC,WAAO,aAAa;AAAA,MAClB;AAAA,MACA,kBAAkB,cAAY,QAAQ,wBAAwB,QAAQ;AAAA,IACxE,CAAC;AAAA,EACH,GAAG,CAAC,SAAS,OAAO,CAAC;AAErB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,SAAS;AAAA,QAClB,OAAO;AAAA,QACP,YAAY;AAAA,QACZ,QAAQ;AAAA,MACV,CAAC;AAAA,MAED;AAAA,QAAC;AAAA;AAAA,UACC,OAAM;AAAA,UACN,OAAM;AAAA,UACN,QAAO;AAAA,UACP,WAAW,SAAS,EAAE,UAAU,WAAW,SAAS,EAAE,CAAC;AAAA,UAEvD;AAAA,YAAC;AAAA;AAAA,cACC,GAAG;AAAA,cACH,GAAG;AAAA,cACH,OAAM;AAAA,cACN,QAAO;AAAA,cACP,aAAa;AAAA,cACb,iBAAgB;AAAA,cAChB,MAAK;AAAA,cACL,QAAO;AAAA,cACP,IAAG;AAAA,cACH,IAAG;AAAA;AAAA,UACL;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

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

@@ -1,16 +1,11 @@
-import { useEffect, useId } from "react";
 import {
   Style
 } from "@makeswift/controls";
-import { useBorder } from "../../../components/hooks";
 import { colorToString } from "../../../components/utils/colorToString";
-import { useResponsiveStyle } from "../../../components/utils/responsive-style";
-import { useStyle } from "../use-style";
+import { responsiveStyle } from "../../../components/utils/responsive-style";
 import { lengthPercentageDataToString } from "../../../css/length-percentage";
 import { marginPropertyDataToStyle } from "../../../css/margin";
 import { paddingPropertyDataToStyle } from "../../../css/padding";
-import { getBox } from "../../../box-model";
-import deepEqual from "../../../utils/deepEqual";
 const defaultMargin = {
   marginTop: 0,
   marginRight: "auto",
@@ -23,18 +18,18 @@ const defaultPadding = {
   paddingBottom: 0,
   paddingLeft: 0
 };
-function useStyleControlCssObject(style, controlDefinition) {
-  const { properties } = controlDefinition.config;
+function styleV1Css(breakpoints, style, properties) {
   return {
     ...properties.includes(Style.Width) && {
       maxWidth: "100%"
     },
-    ...useResponsiveStyle(
+    ...responsiveStyle(
+      breakpoints,
       [
         style?.width,
         style?.margin,
         style?.padding,
-        useBorder(style?.border),
+        style?.border,
         style?.borderRadius,
         style?.textStyle
       ],
@@ -87,33 +82,7 @@ function useStyleControlCssObject(style, controlDefinition) {
     return `${fontSize.value}${fontSize.unit}`;
   }
 }
-function useFormattedStyle(styleControlData, controlDefinition, control) {
-  const style = useStyleControlCssObject(styleControlData, controlDefinition);
-  const guid = useId().replaceAll(":", "");
-  const styleClassName = useStyle(style);
-  const classNames = `${styleClassName} ${guid}`;
-  useEffect(() => {
-    let currentBoxModel = null;
-    const handleAnimationFrameRequest = () => {
-      if (control == null)
-        return;
-      const element = document.querySelector(`.${guid}`);
-      const measuredBoxModel = element == null ? null : getBox(element);
-      if (!deepEqual(currentBoxModel, measuredBoxModel)) {
-        currentBoxModel = measuredBoxModel;
-        control.changeBoxModel(currentBoxModel);
-      }
-      animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest);
-    };
-    let animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest);
-    return () => {
-      cancelAnimationFrame(animationFrameHandle);
-      control?.changeBoxModel(null);
-    };
-  }, [guid, control]);
-  return classNames;
-}
 export {
-  useFormattedStyle
+  styleV1Css
 };
 //# sourceMappingURL=style.js.map