@makeswift/runtime 0.21.3 → 0.21.4-canary.0

package/dist/cjs/next/components/tests/controls/fixtures/rich-text-v2.js

@@ -0,0 +1,203 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var rich_text_v2_exports = {};
+__export(rich_text_v2_exports, {
+  data: () => data
+});
+module.exports = __toCommonJS(rich_text_v2_exports);
+const data = {
+  type: "makeswift::controls::rich-text-v2",
+  version: 2,
+  descendants: [
+    {
+      children: [
+        { text: "" },
+        {
+          children: [
+            {
+              text: "Adyen",
+              typography: {
+                id: "VHlwb2dyYXBoeTowNGI4OTZlMC0wZWEyLTRkMTMtYmU3ZS0xYmY1M2VmMjBiZjc=",
+                style: [
+                  {
+                    deviceId: "desktop",
+                    value: {
+                      color: {
+                        alpha: 1,
+                        swatchId: "U3dhdGNoOmJkODYxMWM5LTNiZjItNDM3MS1iMmU4LTBmMmNlMDZjNDE1OA=="
+                      }
+                    }
+                  }
+                ]
+              }
+            }
+          ],
+          link: {
+            payload: { openInNewTab: true, url: "https://www.bigcommerce.com/adyen" },
+            type: "OPEN_URL"
+          },
+          type: "link"
+        },
+        { text: "" }
+      ],
+      type: "paragraph"
+    },
+    {
+      children: [
+        { text: "" },
+        {
+          children: [
+            {
+              text: "Authorize.net",
+              typography: {
+                id: "VHlwb2dyYXBoeTowNGI4OTZlMC0wZWEyLTRkMTMtYmU3ZS0xYmY1M2VmMjBiZjc=",
+                style: [
+                  {
+                    deviceId: "desktop",
+                    value: {
+                      color: {
+                        alpha: 1,
+                        swatchId: "U3dhdGNoOmJkODYxMWM5LTNiZjItNDM3MS1iMmU4LTBmMmNlMDZjNDE1OA=="
+                      }
+                    }
+                  }
+                ]
+              }
+            }
+          ],
+          link: {
+            payload: { openInNewTab: true, url: "http://www.authorize.net/" },
+            type: "OPEN_URL"
+          },
+          type: "link"
+        },
+        { text: "" }
+      ],
+      type: "paragraph"
+    },
+    {
+      children: [
+        { text: "" },
+        {
+          children: [
+            {
+              text: "BlueSnap",
+              typography: {
+                id: "VHlwb2dyYXBoeTowNGI4OTZlMC0wZWEyLTRkMTMtYmU3ZS0xYmY1M2VmMjBiZjc=",
+                style: [
+                  {
+                    deviceId: "desktop",
+                    value: {
+                      color: {
+                        alpha: 1,
+                        swatchId: "U3dhdGNoOmJkODYxMWM5LTNiZjItNDM3MS1iMmU4LTBmMmNlMDZjNDE1OA=="
+                      }
+                    }
+                  }
+                ]
+              }
+            }
+          ],
+          link: {
+            payload: { openInNewTab: true, url: "https://www.bigcommerce.com/bluesnap/" },
+            type: "OPEN_URL"
+          },
+          type: "link"
+        },
+        { text: "" }
+      ],
+      type: "paragraph"
+    },
+    {
+      children: [
+        { text: "" },
+        {
+          children: [
+            {
+              text: "Checkout.com",
+              typography: {
+                id: "VHlwb2dyYXBoeTowNGI4OTZlMC0wZWEyLTRkMTMtYmU3ZS0xYmY1M2VmMjBiZjc=",
+                style: [
+                  {
+                    deviceId: "desktop",
+                    value: {
+                      color: {
+                        alpha: 1,
+                        swatchId: "U3dhdGNoOmJkODYxMWM5LTNiZjItNDM3MS1iMmU4LTBmMmNlMDZjNDE1OA=="
+                      }
+                    }
+                  }
+                ]
+              }
+            }
+          ],
+          link: {
+            payload: {
+              openInNewTab: true,
+              url: "https://support.bigcommerce.com/s/article/Connecting-with-Checkoutcom/"
+            },
+            type: "OPEN_URL"
+          },
+          type: "link"
+        },
+        { text: "" }
+      ],
+      type: "paragraph"
+    },
+    {
+      children: [
+        { text: "" },
+        {
+          children: [
+            {
+              text: "CyberSource Direct",
+              typography: {
+                id: "VHlwb2dyYXBoeTowNGI4OTZlMC0wZWEyLTRkMTMtYmU3ZS0xYmY1M2VmMjBiZjc=",
+                style: [
+                  {
+                    deviceId: "desktop",
+                    value: {
+                      color: {
+                        alpha: 1,
+                        swatchId: "U3dhdGNoOmJkODYxMWM5LTNiZjItNDM3MS1iMmU4LTBmMmNlMDZjNDE1OA=="
+                      }
+                    }
+                  }
+                ]
+              }
+            }
+          ],
+          link: {
+            payload: { openInNewTab: true, url: "http://www.cybersource.com/" },
+            type: "OPEN_URL"
+          },
+          type: "link"
+        },
+        { text: "" }
+      ],
+      type: "paragraph"
+    }
+  ],
+  key: "c438a1d3-fee2-4eb4-b49b-f1856c12de42"
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  data
+});
+//# sourceMappingURL=rich-text-v2.js.map

package/dist/cjs/next/components/tests/controls/fixtures/rich-text-v2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/next/components/tests/controls/fixtures/rich-text-v2.ts"],"sourcesContent":["import { type RichTextDataV2 } from '../../../../../controls/rich-text-v2'\n\nexport const data = {\n  type: 'makeswift::controls::rich-text-v2',\n  version: 2,\n  descendants: [\n    {\n      children: [\n        { text: '' },\n        {\n          children: [\n            {\n              text: 'Adyen',\n              typography: {\n                id: 'VHlwb2dyYXBoeTowNGI4OTZlMC0wZWEyLTRkMTMtYmU3ZS0xYmY1M2VmMjBiZjc=',\n                style: [\n                  {\n                    deviceId: 'desktop',\n                    value: {\n                      color: {\n                        alpha: 1,\n                        swatchId: 'U3dhdGNoOmJkODYxMWM5LTNiZjItNDM3MS1iMmU4LTBmMmNlMDZjNDE1OA==',\n                      },\n                    },\n                  },\n                ],\n              },\n            },\n          ],\n          link: {\n            payload: { openInNewTab: true, url: 'https://www.bigcommerce.com/adyen' },\n            type: 'OPEN_URL',\n          },\n          type: 'link',\n        },\n        { text: '' },\n      ],\n      type: 'paragraph',\n    },\n    {\n      children: [\n        { text: '' },\n        {\n          children: [\n            {\n              text: 'Authorize.net',\n              typography: {\n                id: 'VHlwb2dyYXBoeTowNGI4OTZlMC0wZWEyLTRkMTMtYmU3ZS0xYmY1M2VmMjBiZjc=',\n                style: [\n                  {\n                    deviceId: 'desktop',\n                    value: {\n                      color: {\n                        alpha: 1,\n                        swatchId: 'U3dhdGNoOmJkODYxMWM5LTNiZjItNDM3MS1iMmU4LTBmMmNlMDZjNDE1OA==',\n                      },\n                    },\n                  },\n                ],\n              },\n            },\n          ],\n          link: {\n            payload: { openInNewTab: true, url: 'http://www.authorize.net/' },\n            type: 'OPEN_URL',\n          },\n          type: 'link',\n        },\n        { text: '' },\n      ],\n      type: 'paragraph',\n    },\n    {\n      children: [\n        { text: '' },\n        {\n          children: [\n            {\n              text: 'BlueSnap',\n              typography: {\n                id: 'VHlwb2dyYXBoeTowNGI4OTZlMC0wZWEyLTRkMTMtYmU3ZS0xYmY1M2VmMjBiZjc=',\n                style: [\n                  {\n                    deviceId: 'desktop',\n                    value: {\n                      color: {\n                        alpha: 1,\n                        swatchId: 'U3dhdGNoOmJkODYxMWM5LTNiZjItNDM3MS1iMmU4LTBmMmNlMDZjNDE1OA==',\n                      },\n                    },\n                  },\n                ],\n              },\n            },\n          ],\n          link: {\n            payload: { openInNewTab: true, url: 'https://www.bigcommerce.com/bluesnap/' },\n            type: 'OPEN_URL',\n          },\n          type: 'link',\n        },\n        { text: '' },\n      ],\n      type: 'paragraph',\n    },\n    {\n      children: [\n        { text: '' },\n        {\n          children: [\n            {\n              text: 'Checkout.com',\n              typography: {\n                id: 'VHlwb2dyYXBoeTowNGI4OTZlMC0wZWEyLTRkMTMtYmU3ZS0xYmY1M2VmMjBiZjc=',\n                style: [\n                  {\n                    deviceId: 'desktop',\n                    value: {\n                      color: {\n                        alpha: 1,\n                        swatchId: 'U3dhdGNoOmJkODYxMWM5LTNiZjItNDM3MS1iMmU4LTBmMmNlMDZjNDE1OA==',\n                      },\n                    },\n                  },\n                ],\n              },\n            },\n          ],\n          link: {\n            payload: {\n              openInNewTab: true,\n              url: 'https://support.bigcommerce.com/s/article/Connecting-with-Checkoutcom/',\n            },\n            type: 'OPEN_URL',\n          },\n          type: 'link',\n        },\n        { text: '' },\n      ],\n      type: 'paragraph',\n    },\n    {\n      children: [\n        { text: '' },\n        {\n          children: [\n            {\n              text: 'CyberSource Direct',\n              typography: {\n                id: 'VHlwb2dyYXBoeTowNGI4OTZlMC0wZWEyLTRkMTMtYmU3ZS0xYmY1M2VmMjBiZjc=',\n                style: [\n                  {\n                    deviceId: 'desktop',\n                    value: {\n                      color: {\n                        alpha: 1,\n                        swatchId: 'U3dhdGNoOmJkODYxMWM5LTNiZjItNDM3MS1iMmU4LTBmMmNlMDZjNDE1OA==',\n                      },\n                    },\n                  },\n                ],\n              },\n            },\n          ],\n          link: {\n            payload: { openInNewTab: true, url: 'http://www.cybersource.com/' },\n            type: 'OPEN_URL',\n          },\n          type: 'link',\n        },\n        { text: '' },\n      ],\n      type: 'paragraph',\n    },\n  ],\n  key: 'c438a1d3-fee2-4eb4-b49b-f1856c12de42',\n} satisfies RichTextDataV2\n"],"mappings":"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","names":[]}

package/dist/cjs/runtimes/react/components/ElementData.js

@@ -35,7 +35,7 @@ const ElementData = (0, import_react2.memo)(
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FallbackComponent.FallbackComponent, { ref, text: "Component not found" });
     }
     const forwardRef2 = (0, import_can_accept_ref.canAcceptRef)(Component);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Suspense, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_controls.PropsValue, { element: elementData, children: (props) => forwardRef2 ? /* @__PURE__ */ (0, import_react.createElement)(Component, { ...props, key: elementData.key, ref }) : /* @__PURE__ */ (0, import_react.createElement)(Component, { ...props, key: elementData.key }) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Suspense, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_controls.ResolveProps, { element: elementData, children: (props) => forwardRef2 ? /* @__PURE__ */ (0, import_react.createElement)(Component, { ...props, key: elementData.key, ref }) : /* @__PURE__ */ (0, import_react.createElement)(Component, { ...props, key: elementData.key }) }) });
   })
 );
 // Annotate the CommonJS export names for ESM import in node:

package/dist/cjs/runtimes/react/components/ElementData.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/components/ElementData.tsx"],"sourcesContent":["import { Ref, Suspense, forwardRef, memo } from 'react'\nimport { ElementData as ReactPageElementData } from '../../../state/react-page'\nimport { useComponent } from '../hooks/use-component'\nimport { canAcceptRef } from '../utils/can-accept-ref'\nimport { FallbackComponent } from '../../../components/shared/FallbackComponent'\nimport { PropsValue } from '../controls'\n\ntype ElementDataProps = {\n  elementData: ReactPageElementData\n}\n\nexport const ElementData = memo(\n  forwardRef(function ElementData(\n    { elementData }: ElementDataProps,\n    ref: Ref<unknown>,\n  ): JSX.Element {\n    const Component = useComponent(elementData.type)\n\n    if (Component == null) {\n      return <FallbackComponent ref={ref as Ref<HTMLDivElement>} text=\"Component not found\" />\n    }\n\n    const forwardRef = canAcceptRef(Component)\n\n    return (\n      <Suspense>\n        <PropsValue element={elementData}>\n          {props =>\n            forwardRef ? (\n              <Component {...props} key={elementData.key} ref={ref} />\n            ) : (\n              <Component {...props} key={elementData.key} />\n            )\n          }\n        </PropsValue>\n      </Suspense>\n    )\n  }),\n)\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBa;AAUC;AA7Bd,IAAAA,gBAAgD;AAEhD,2BAA6B;AAC7B,4BAA6B;AAC7B,+BAAkC;AAClC,sBAA2B;AAMpB,MAAM,kBAAc;AAAA,MACzB,0BAAW,SAASC,aAClB,EAAE,YAAY,GACd,KACa;AACb,UAAM,gBAAY,mCAAa,YAAY,IAAI;AAE/C,QAAI,aAAa,MAAM;AACrB,aAAO,4CAAC,8CAAkB,KAAiC,MAAK,uBAAsB;AAAA,IACxF;AAEA,UAAMC,kBAAa,oCAAa,SAAS;AAEzC,WACE,4CAAC,0BACC,sDAAC,8BAAW,SAAS,aAClB,qBACCA,cACE,gDAAC,aAAW,GAAG,OAAO,KAAK,YAAY,KAAK,KAAU,IAEtD,gDAAC,aAAW,GAAG,OAAO,KAAK,YAAY,KAAK,GAGlD,GACF;AAAA,EAEJ,CAAC;AACH;","names":["import_react","ElementData","forwardRef"]}
+{"version":3,"sources":["../../../../../src/runtimes/react/components/ElementData.tsx"],"sourcesContent":["import { Ref, Suspense, forwardRef, memo } from 'react'\nimport { ElementData as ReactPageElementData } from '../../../state/react-page'\nimport { useComponent } from '../hooks/use-component'\nimport { canAcceptRef } from '../utils/can-accept-ref'\nimport { FallbackComponent } from '../../../components/shared/FallbackComponent'\nimport { ResolveProps } from '../controls'\n\ntype ElementDataProps = {\n  elementData: ReactPageElementData\n}\n\nexport const ElementData = memo(\n  forwardRef(function ElementData(\n    { elementData }: ElementDataProps,\n    ref: Ref<unknown>,\n  ): JSX.Element {\n    const Component = useComponent(elementData.type)\n\n    if (Component == null) {\n      return <FallbackComponent ref={ref as Ref<HTMLDivElement>} text=\"Component not found\" />\n    }\n\n    const forwardRef = canAcceptRef(Component)\n\n    return (\n      <Suspense>\n        <ResolveProps element={elementData}>\n          {props =>\n            forwardRef ? (\n              <Component {...props} key={elementData.key} ref={ref} />\n            ) : (\n              <Component {...props} key={elementData.key} />\n            )\n          }\n        </ResolveProps>\n      </Suspense>\n    )\n  }),\n)\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBa;AAUC;AA7Bd,IAAAA,gBAAgD;AAEhD,2BAA6B;AAC7B,4BAA6B;AAC7B,+BAAkC;AAClC,sBAA6B;AAMtB,MAAM,kBAAc;AAAA,MACzB,0BAAW,SAASC,aAClB,EAAE,YAAY,GACd,KACa;AACb,UAAM,gBAAY,mCAAa,YAAY,IAAI;AAE/C,QAAI,aAAa,MAAM;AACrB,aAAO,4CAAC,8CAAkB,KAAiC,MAAK,uBAAsB;AAAA,IACxF;AAEA,UAAMC,kBAAa,oCAAa,SAAS;AAEzC,WACE,4CAAC,0BACC,sDAAC,gCAAa,SAAS,aACpB,qBACCA,cACE,gDAAC,aAAW,GAAG,OAAO,KAAK,YAAY,KAAK,KAAU,IAEtD,gDAAC,aAAW,GAAG,OAAO,KAAK,YAAY,KAAK,GAGlD,GACF;AAAA,EAEJ,CAAC;AACH;","names":["import_react","ElementData","forwardRef"]}

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

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -21,169 +22,23 @@ __export(control_exports, {
   ControlValue: () => ControlValue
 });
 module.exports = __toCommonJS(control_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_controls2 = require("../../../controls");
-var import_components = require("../components");
-var import_color = require("./color");
-var import_image = require("./image");
-var import_link = require("./link");
-var import_list = require("./list");
-var import_rich_text = require("./rich-text/rich-text");
-var import_rich_text_v2 = require("./rich-text-v2");
-var import_shape = require("./shape");
-var import_slot = require("./slot");
-var import_style = require("./style");
-var import_style_v2 = require("./style-v2");
-var import_typography = require("./typography");
 var import_use_resolved_value = require("../hooks/use-resolved-value");
+var import_use_stylesheet_factory = require("../hooks/use-stylesheet-factory");
+var import_use_css_id = require("../hooks/use-css-id");
 function ControlValue({
   data,
   definition,
   children,
   control
 }) {
-  switch (definition.controlType) {
-    case import_controls2.CheckboxDefinition.type:
-    case import_controls2.NumberDefinition.type:
-    case import_controls2.TextInputDefinition.type:
-    case import_controls2.TextAreaDefinition.type:
-    case import_controls2.SelectDefinition.type:
-    case import_controls2.IconRadioGroupDefinition.type:
-    case import_controls2.ComboboxDefinition.type:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_components.RenderHook,
-        {
-          hook: import_use_resolved_value.useResolvedValue,
-          parameters: [data, definition],
-          children: (value) => children(value)
-        },
-        definition.controlType
-      );
-    case import_controls2.ColorDefinition.type:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_components.RenderHook,
-        {
-          hook: import_color.useColorValue,
-          parameters: [data, definition],
-          children: (value) => children(value)
-        },
-        definition.controlType
-      );
-    case import_controls2.ImageDefinition.type:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_components.RenderHook,
-        {
-          hook: import_image.useImageControlValue,
-          parameters: [data, definition],
-          children: (value) => children(value)
-        },
-        definition.controlType
-      );
-    case import_controls2.LinkDefinition.type:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_components.RenderHook,
-        {
-          hook: import_link.useLinkControlValue,
-          parameters: [data, definition],
-          children: (value) => children(value)
-        },
-        definition.controlType
-      );
-    case import_controls2.ShapeDefinition.type:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_shape.ShapeControlValue,
-        {
-          definition,
-          data,
-          control,
-          children: (value) => children(value)
-        }
-      );
-    case import_controls2.ListDefinition.type:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_list.ListControlValue,
-        {
-          definition,
-          data,
-          control,
-          children: (value) => children(value)
-        }
-      );
-    case import_controls2.StyleV2Definition.type:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_style_v2.StyleV2ControlValue,
-        {
-          data,
-          definition,
-          control,
-          children: (value) => children(value)
-        },
-        definition.controlType
-      );
-    case import_controls2.SlotDefinition.type:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_components.RenderHook,
-        {
-          hook: import_slot.useSlot,
-          parameters: [data, control],
-          children: (value) => children(value)
-        },
-        definition.controlType
-      );
-    case import_controls2.RichTextV1Definition.type:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_components.RenderHook,
-        {
-          hook: import_rich_text.useRichText,
-          parameters: [
-            data,
-            control
-          ],
-          children: (value) => children(value)
-        },
-        definition.controlType
-      );
-    case import_controls2.RichTextV2Definition.type:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_components.RenderHook,
-        {
-          hook: import_rich_text_v2.useRichTextV2,
-          parameters: [
-            data,
-            definition,
-            control
-          ],
-          children: (value) => children(value)
-        },
-        definition.controlType
-      );
-    case import_controls2.StyleDefinition.type:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_components.RenderHook,
-        {
-          hook: import_style.useFormattedStyle,
-          parameters: [
-            data,
-            definition,
-            control
-          ],
-          children: (value) => children(value)
-        },
-        definition.controlType
-      );
-    case import_controls2.unstable_TypographyDefinition.type:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_components.RenderHook,
-        {
-          hook: import_typography.useTypographyValue,
-          parameters: [data],
-          children: (value) => children(value)
-        },
-        definition.controlType
-      );
-    default:
-      return children(data);
-  }
+  const stylesheetFactory = (0, import_use_stylesheet_factory.useStylesheetFactory)();
+  const id = `cv-${(0, import_use_css_id.useCssId)()}`;
+  const value = (0, import_use_resolved_value.useResolvedValue)(
+    data,
+    (data2, resourceResolver) => definition.resolveValue(data2, resourceResolver, stylesheetFactory.get(id), control)
+  );
+  stylesheetFactory.useDefinedStyles();
+  return children(value);
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/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":["import_controls"]}
+{"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":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AASA,gCAAiC;AACjC,oCAAqC;AACrC,wBAAyB;AASlB,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAmC;AACjC,QAAM,wBAAoB,oDAAqB;AAC/C,QAAM,KAAK,UAAM,4BAAS,CAAC;AAE3B,QAAM,YAAQ;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/cjs/runtimes/react/controls/rich-text/EditableText/editable-text.js

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/dist/cjs/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":["import_slate","EditableText","isHotkey","SlateReact"]}
+{"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkHM;AAhHN,iBAAmB;AACnB,2BAAuB;AACvB,uBAAqB;AACrB,mBAUO;AAEP,mBAA6B;AAC7B,yBAAsE;AAEtE,sBAA4D;AAE5D,eAAmC;AAEnC,IAAAA,gBAAkE;AAClE,+BAAgC;AAEhC,4BAA6B;AAC7B,wBAA8B;AAE9B,iCAAoC;AACpC,gCAAmC;AASnC,MAAM,cAAiC;AAAA,EACrC,EAAE,MAAM,sBAAM,UAAU,WAAW,UAAU,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE;AAC9D;AAEO,MAAM,mBAAe,yBAAW,SAASC,cAC9C,EAAE,IAAI,MAAM,OAAO,OAAO,GAC1B,KACA;AACA,QAAM,CAAC,MAAM,QAAI,uBAAS,UAAM,6BAAU,kCAAe,+BAAY,kCAAU,2BAAa,CAAC,CAAC,CAAC,CAAC,CAAC;AACjG,QAAM,CAAC,0BAA0B,2BAA2B,QAAI,uBAAS,KAAK;AAC9E,sDAAoB,QAAQ,wBAAwB;AACpD,QAAM,gBAAY,8CAAmB,QAAQ,IAAI;AACjD,QAAM,eAAW,6BAAmB;AAEpC,QAAM,CAAC,iBAAiB,kBAAkB,QACxC,uBAAyD,IAAI;AAC/D,QAAM,aAAa,iBAAiB;AAEpC,8BAAU,MAAM;AACd,QAAI,cAAc;AAAM;AAExB,UAAM,UAAU,+BAAY,UAAU,QAAQ,MAAM;AAEpD,eAAO,oCAAa;AAAA,MAClB;AAAA,MACA,kBAAkB,cAAY,WAAW,eAAe,QAAQ;AAAA,IAClE,CAAC;AAAA,EACH,GAAG,CAAC,QAAQ,UAAU,CAAC;AAEvB;AAAA,IACE;AAAA,IACA,OAAO;AAAA,MACL,aAAa;AACX,eAAO,+BAAY,UAAU,QAAQ,MAAM;AAAA,MAC7C;AAAA,MACA,cAAc;AACZ,mBAAO,6BAAO,+BAAY,UAAU,QAAQ,MAAM,CAAC;AAAA,MACrD;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,QAAQ,kBAAkB;AAAA,EAC7B;AAEA,QAAM,mBAAe,sBAAQ,MAAO,WAAO,kCAAiB,IAAI,IAAI,aAAc,CAAC,IAAI,CAAC;AAExF,8BAAU,MAAM;AACd,gBAAY,eAAe,MAAM;AAAA,EACnC,GAAG,CAAC,YAAY,MAAM,CAAC;AAEvB,QAAM,kBAAc,0BAAY,MAAM;AACpC,gBAAY,MAAM;AAClB,gCAA4B,IAAI;AAAA,EAClC,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,oBAAgB;AAAA,IACpB,CAAC,MAAqB;AACpB,cAAI,iBAAAC,SAAS,eAAe,CAAC;AAAG,eAAO,YAAY,KAAK;AACxD,cAAI,iBAAAA,SAAS,SAAS,CAAC;AAAG,eAAO,YAAY,KAAK;AAClD,cAAI,iBAAAA,SAAS,QAAQ,EAAE,CAAC;AAAG,eAAO,YAAY,KAAK;AACnD,mCAAU,GAAG,MAAM;AAAA,IACrB;AAAA,IACA,CAAC,YAAY,MAAM;AAAA,EACrB;AAEA,QAAM,iBAAa,0BAAY,CAAC,MAAkB;AAEhD,QAAI,EAAE,iBAAiB;AAAM;AAE7B,gCAA4B,KAAK;AACjC,mCAAY,SAAS,MAAM;AAAA,EAC7B,GAAG,CAAC,CAAC;AAEL,SACE,4CAAC,mBAAAC,OAAA,EAAW,QAAgB,OAAO,cAAc,UAAU,WACzD;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,SAAS;AAAA,MACT,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,eAAW,eAAG,OAAO,MAAM;AAAA,MAC3B,UAAU,aAAa,yCAAgB;AAAA,MACvC,aAAY;AAAA;AAAA,EACd,GACF;AAEJ,CAAC;AAED,IAAO,wBAAQ;","names":["import_slate","EditableText","isHotkey","SlateReact"]}

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

@@ -28,7 +28,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var rich_text_exports = {};
 __export(rich_text_exports, {
-  useRichText: () => useRichText
+  renderRichText: () => renderRichText
 });
 module.exports = __toCommonJS(rich_text_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -37,7 +37,13 @@ var import_prop_controller_handles = require("../../../../state/modules/prop-con
 var import_use_is_preview = require("../../hooks/use-is-preview");
 const EditableText = (0, import_react.lazy)(() => Promise.resolve().then(() => __toESM(require("./EditableText"))));
 const ReadOnlyText = (0, import_react.lazy)(() => Promise.resolve().then(() => __toESM(require("./ReadOnlyText"))));
-function useRichText(data, control) {
+function renderRichText(data, control) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RichText, { data, control });
+}
+function RichText({
+  data,
+  control
+}) {
   const textCallbackRef = (0, import_react.useCallback)(
     (handle) => {
       if ((0, import_prop_controller_handles.isPropControllersHandle)(handle))
@@ -50,6 +56,6 @@ function useRichText(data, control) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  useRichText
+  renderRichText
 });
 //# sourceMappingURL=rich-text.js.map

package/dist/cjs/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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkCI;AAlCJ,mBAA6C;AAK7C,qCAGO;AAEP,4BAA6B;AAE7B,MAAM,mBAAe,mBAAK,MAAM,6CAAO,gBAAgB,GAAC;AACxD,MAAM,mBAAe,mBAAK,MAAM,6CAAO,gBAAgB,GAAC;AAMjD,SAAS,YACd,MACA,SACA;AACA,QAAM,sBAAkB;AAAA,IACtB,CAAC,WAAuE;AACtE,cAAI,wDAAwB,MAAM;AAChC,gBAAQ,qBAAqB,WAAW,OAAO,OAAO,EAAE,MAAM,QAAQ,CAAC;AAAA,IAC3E;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,QAAM,gBAAY,oCAAa;AAE/B,SAAO,YACL,4CAAC,gBAAa,MAAM,MAAM,KAAK,iBAAiB,IAEhD,4CAAC,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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBS;AAvBT,mBAA6C;AAK7C,qCAGO;AAEP,4BAA6B;AAE7B,MAAM,mBAAe,mBAAK,MAAM,6CAAO,gBAAgB,GAAC;AACxD,MAAM,mBAAe,mBAAK,MAAM,6CAAO,gBAAgB,GAAC;AAMjD,SAAS,eACd,MACA,SACA;AACA,SAAO,4CAAC,YAAS,MAAY,SAAkB;AACjD;AAEA,SAAS,SAAS;AAAA,EAChB;AAAA,EACA;AACF,GAGG;AACD,QAAM,sBAAkB;AAAA,IACtB,CAAC,WAAuE;AACtE,cAAI,wDAAwB,MAAM;AAChC,gBAAQ,qBAAqB,WAAW,OAAO,OAAO,EAAE,MAAM,QAAQ,CAAC;AAAA,IAC3E;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,QAAM,gBAAY,oCAAa;AAE/B,SAAO,YACL,4CAAC,gBAAa,MAAM,MAAM,KAAK,iBAAiB,IAEhD,4CAAC,gBAAa,MAAM,MAAM,KAAK,iBAAiB;AAEpD;","names":[]}

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

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/dist/cjs/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":["import_slate","editor","isHotkey"]}
+{"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":["import_slate","editor","isHotkey"]}

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

@@ -24,14 +24,14 @@ __export(ReadOnlyTextV2_exports, {
 module.exports = __toCommonJS(ReadOnlyTextV2_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_controls = require("../../../../controls");
+var import_rich_text_v2 = require("../../../../controls/rich-text-v2");
 var import_use_style = require("../../use-style");
 var import_slate2 = require("../../../../slate");
 var import_control = require("../control");
 const ReadOnlyTextV2 = (0, import_react.forwardRef)(function ReadOnlyText({ text, definition }, ref) {
   const descendantsAsString = (0, import_slate2.toText)(
     text?.descendants ?? [],
-    definition?.config.mode ?? import_controls.RichText.Mode.Block
+    definition?.config.mode ?? import_rich_text_v2.RichText.Mode.Block
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",