@makeswift/runtime 0.13.1 → 0.14.1

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

@@ -0,0 +1,137 @@
+"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 ReadOnlyTextV2_exports = {};
+__export(ReadOnlyTextV2_exports, {
+  LeafComponent: () => LeafComponent,
+  default: () => ReadOnlyTextV2_default
+});
+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_use_style = require("../../use-style");
+var import_slate2 = require("../../../../slate");
+var import_control = require("../control");
+const ReadOnlyTextV2 = (0, import_react.forwardRef)(function ReadOnlyText({ text: { descendants }, definition }, ref) {
+  const descendantsAsString = (0, import_slate2.toText)(descendants, definition?.config.mode ?? import_controls.RichTextV2Mode.Block);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref,
+      style: {
+        /**
+         * These are the default styles that Slate uses for its editable div.
+         * https://github.com/ianstormtaylor/slate/blob/4bd15ed3950e3a0871f5d0ecb391bb637c05e59d/packages/slate-react/src/components/editable.tsx
+         * Search for `disableDefaultStyles`
+         */
+        position: "relative",
+        whiteSpace: "pre-wrap",
+        wordWrap: "break-word"
+      },
+      children: descendantsAsString === "" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Placeholder, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        Descendants,
+        {
+          plugins: (
+            /**
+             * TODO: we are manually referencing our default plugins for each mode here because
+             * Referencing the real LinkPlugin causes a circular dependency.
+             * When circular dependencies calm down we should update the plugin definition to use real plugins,
+             * and just use the plugins that are defined by our config.
+             */
+            // definition?.config?.plugins ,
+            definition?.config?.mode === import_controls.RichTextV2Mode.Inline ? [(0, import_slate2.InlineModePlugin)()] : [(0, import_slate2.BlockPlugin)(), (0, import_slate2.TypographyPlugin)(), (0, import_slate2.TextAlignPlugin)(), (0, import_slate2.InlinePlugin)(), (0, import_slate2.LinkPlugin)()]
+          ),
+          descendants
+        }
+      )
+    }
+  );
+});
+var ReadOnlyTextV2_default = ReadOnlyTextV2;
+function Placeholder({ text = "Write some text..." }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      className: (0, import_use_style.useStyle)({
+        display: "inline-block",
+        width: 0,
+        maxWidth: "100%",
+        whiteSpace: "nowrap",
+        opacity: 0.333,
+        verticalAlign: "text-top"
+      }),
+      children: text
+    }
+  );
+}
+function LeafComponent({ plugins, ...props }) {
+  function initialRenderLeaf({ leaf }) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: leaf.className, children: leaf.text === "" ? "\uFEFF" : leaf.text });
+  }
+  const renderLeaf = plugins.reduce(
+    (renderFn, plugin) => (props2) => {
+      const { control, renderLeaf: renderLeaf2 } = plugin;
+      if (control?.definition == null || renderLeaf2 == null)
+        return renderFn(props2);
+      if (control.getLeafValue == null)
+        return renderLeaf2(renderFn, void 0)(props2);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_control.ControlValue, { definition: control.definition, data: control.getLeafValue(props2.leaf), children: (value) => renderLeaf2(renderFn, value)(props2) });
+    },
+    initialRenderLeaf
+  );
+  return renderLeaf({ attributes: {}, leaf: props.leaf, children: null, text: props.leaf });
+}
+function ElementComponent({ plugins, ...props }) {
+  function initialRenderElement(props2) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Descendants, { descendants: props2.element.children, plugins });
+  }
+  const renderElement = plugins.reduce(
+    (renderFn, plugin) => (props2) => {
+      const { control, renderElement: renderElement2 } = plugin;
+      if (control?.definition == null || renderElement2 == null)
+        return renderFn(props2);
+      if (control.getElementValue == null)
+        return renderElement2(renderFn, void 0)(props2);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_control.ControlValue, { definition: control.definition, data: control.getElementValue(props2.element), children: (value) => renderElement2(renderFn, value)(props2) });
+    },
+    initialRenderElement
+  );
+  return renderElement({ attributes: {}, children: null, element: props.descendant });
+}
+function isText(node) {
+  if (typeof node === "object" && "text" in node)
+    return true;
+  return false;
+}
+function Descendants({
+  descendants,
+  plugins
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: descendants.map((descendant, index) => {
+    if (isText(descendant)) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LeafComponent, { plugins, leaf: descendant }, index);
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ElementComponent, { descendant, plugins }, index);
+  }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LeafComponent
+});
+//# sourceMappingURL=ReadOnlyTextV2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/runtimes/react/controls/rich-text-v2/ReadOnlyTextV2.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef } from 'react'\nimport {\n  RichTextV2ControlData,\n  RichTextV2ControlDefinition,\n  RichTextV2Mode,\n} from '../../../../controls'\nimport { useStyle } from '../../use-style'\nimport { Descendant, Element, Text } from 'slate'\nimport {\n  BlockPlugin,\n  InlineModePlugin,\n  InlinePlugin,\n  LinkPlugin,\n  TextAlignPlugin,\n  TypographyPlugin,\n  toText,\n} from '../../../../slate'\nimport { ControlValue } from '../control'\nimport { RenderElementProps, RenderLeafProps } from 'slate-react'\nimport { RichTextV2Plugin } from '../../../../controls/rich-text-v2/plugin'\n\ntype Props = {\n  text: RichTextV2ControlData\n  definition: RichTextV2ControlDefinition | null\n}\n\nconst ReadOnlyTextV2 = forwardRef(function ReadOnlyText(\n  { text: { descendants }, definition }: Props,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const descendantsAsString = toText(descendants, definition?.config.mode ?? RichTextV2Mode.Block)\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={\n            /**\n             * TODO: we are manually referencing our default plugins for each mode here because\n             * Referencing the real LinkPlugin causes a circular dependency.\n             * When circular dependencies calm down we should update the plugin definition to use real plugins,\n             * and just use the plugins that are defined by our config.\n             */\n            // definition?.config?.plugins ,\n            definition?.config?.mode === RichTextV2Mode.Inline\n              ? [InlineModePlugin()]\n              : [BlockPlugin(), TypographyPlugin(), TextAlignPlugin(), InlinePlugin(), LinkPlugin()]\n          }\n          descendants={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":["import_slate","props","renderLeaf","renderElement"]}

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

@@ -0,0 +1,23 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var rich_text_v2_exports = {};
+module.exports = __toCommonJS(rich_text_v2_exports);
+__reExport(rich_text_v2_exports, require("./rich-text-v2"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("./rich-text-v2")
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/runtimes/react/controls/rich-text-v2/index.ts"],"sourcesContent":["export * from './rich-text-v2'\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,iCAAc,2BAAd;","names":[]}

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

@@ -0,0 +1,59 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var rich_text_v2_exports = {};
+__export(rich_text_v2_exports, {
+  useRichTextV2: () => useRichTextV2
+});
+module.exports = __toCommonJS(rich_text_v2_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_controls = require("../../../../controls");
+var import_react2 = require("../../../react");
+var import_dynamic = require("../../../../next/dynamic");
+var import_dynamic2 = __toESM(require("next/dynamic"));
+const EditableText = (0, import_dynamic.forwardNextDynamicRef)(
+  (patch) => (0, import_dynamic2.default)(() => patch(import("./EditableTextV2")))
+);
+const ReadOnlyText = (0, import_dynamic.forwardNextDynamicRef)(
+  (patch) => (0, import_dynamic2.default)(() => patch(import("./ReadOnlyTextV2")))
+);
+const ReadOnlyTextV1 = (0, import_dynamic.forwardNextDynamicRef)(
+  (patch) => (0, import_dynamic2.default)(() => patch(import("../rich-text/ReadOnlyText")))
+);
+function useRichTextV2(data, definition, control) {
+  const isPreview = (0, import_react2.useIsPreview)();
+  if ((0, import_controls.isRichTextV1Data)(data)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReadOnlyTextV1, { text: data });
+  }
+  return isPreview ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EditableText, { text: data, definition, control }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReadOnlyText, { text: data, definition });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useRichTextV2
+});
+//# sourceMappingURL=rich-text-v2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/runtimes/react/controls/rich-text-v2/rich-text-v2.tsx"],"sourcesContent":["import { ReactNode } from 'react'\n\nimport {\n  RichTextControlData,\n  RichTextV2Control,\n  RichTextV2ControlData,\n  RichTextV2ControlDefinition,\n  isRichTextV1Data,\n} from '../../../../controls'\nimport { useIsPreview } from '../../../react'\nimport { forwardNextDynamicRef } from '../../../../next/dynamic'\nimport dynamic from 'next/dynamic'\n\nexport type RichTextV2ControlValue = ReactNode\n\nexport type Descriptors = { text?: RichTextV2ControlDefinition }\n\nconst EditableText = forwardNextDynamicRef(patch =>\n  dynamic(() => patch(import('./EditableTextV2'))),\n)\nconst ReadOnlyText = forwardNextDynamicRef(patch =>\n  dynamic(() => patch(import('./ReadOnlyTextV2'))),\n)\n\nconst ReadOnlyTextV1 = forwardNextDynamicRef(patch =>\n  dynamic(() => patch(import('../rich-text/ReadOnlyText'))),\n)\n\nexport function useRichTextV2(\n  data: RichTextV2ControlData | RichTextControlData,\n  definition: RichTextV2ControlDefinition,\n  control: RichTextV2Control | null,\n) {\n  const isPreview = useIsPreview()\n\n  if (isRichTextV1Data(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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAoCW;AAlCX,sBAMO;AACP,IAAAA,gBAA6B;AAC7B,qBAAsC;AACtC,IAAAC,kBAAoB;AAMpB,MAAM,mBAAe;AAAA,EAAsB,eACzC,gBAAAC,SAAQ,MAAM,MAAM,OAAO,kBAAkB,CAAC,CAAC;AACjD;AACA,MAAM,mBAAe;AAAA,EAAsB,eACzC,gBAAAA,SAAQ,MAAM,MAAM,OAAO,kBAAkB,CAAC,CAAC;AACjD;AAEA,MAAM,qBAAiB;AAAA,EAAsB,eAC3C,gBAAAA,SAAQ,MAAM,MAAM,OAAO,2BAA2B,CAAC,CAAC;AAC1D;AAEO,SAAS,cACd,MACA,YACA,SACA;AACA,QAAM,gBAAY,4BAAa;AAE/B,UAAI,kCAAiB,IAAI,GAAG;AAC1B,WAAO,4CAAC,kBAAe,MAAM,MAAM;AAAA,EACrC;AAEA,SAAO,YACL,4CAAC,gBAAa,MAAM,MAAM,YAAwB,SAAkB,IAEpE,4CAAC,gBAAa,MAAM,MAAM,YAAwB;AAEtD;","names":["import_react","import_dynamic","dynamic"]}

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

@@ -0,0 +1,31 @@
+"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 select_exports = {};
+__export(select_exports, {
+  useSelectControlValue: () => useSelectControlValue
+});
+module.exports = __toCommonJS(select_exports);
+function useSelectControlValue(data, definition) {
+  return data ?? definition?.config.defaultValue;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useSelectControlValue
+});
+//# sourceMappingURL=select.js.map

package/dist/cjs/runtimes/react/controls/select.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/controls/select.ts"],"sourcesContent":["import {\n  SelectControlData,\n  SelectControlDefinition,\n  SelectControlDefinitionOption,\n} from '../../../controls'\n\nexport type SelectControlValue<T extends SelectControlDefinition> =\n  undefined extends T['config']['defaultValue']\n    ? SelectControlDefinitionOption<T> | undefined\n    : SelectControlDefinitionOption<T>\n\nexport function useSelectControlValue<T extends SelectControlDefinition>(\n  data: SelectControlData<T> | undefined,\n  definition: T,\n): SelectControlValue<T> {\n  return (data ?? definition?.config.defaultValue) as SelectControlValue<T>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAWO,SAAS,sBACd,MACA,YACuB;AACvB,SAAQ,QAAQ,YAAY,OAAO;AACrC;","names":[]}

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

@@ -0,0 +1,49 @@
+"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 shape_exports = {};
+__export(shape_exports, {
+  ShapeControlValue: () => ShapeControlValue
+});
+module.exports = __toCommonJS(shape_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_control = require("./control");
+function ShapeControlValue({
+  definition,
+  data,
+  children,
+  control
+}) {
+  return Object.entries(definition.config.type).reduceRight(
+    (renderFn, [key, controlDefinition]) => (shapeControlValue) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_control.ControlValue,
+      {
+        definition: controlDefinition,
+        data: data?.[key],
+        control: control?.controls.get(key),
+        children: (value) => renderFn({ ...shapeControlValue, [key]: value })
+      }
+    ),
+    children
+  )({});
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ShapeControlValue
+});
+//# sourceMappingURL=shape.js.map

package/dist/cjs/runtimes/react/controls/shape.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/controls/shape.tsx"],"sourcesContent":["import { ShapeControl, ShapeControlData, ShapeControlDefinition } from '../../../controls/shape'\nimport { ControlDefinitionValue, ControlValue } from './control'\n\nexport type ShapeControlValue<T extends ShapeControlDefinition> = {\n  [K in keyof T['config']['type']]: ControlDefinitionValue<T['config']['type'][K]>\n}\n\ntype ShapeControlValueProps<T extends ShapeControlDefinition> = {\n  definition: T\n  data: ShapeControlData<T> | undefined\n  children(value: ShapeControlValue<T>): JSX.Element\n  control: ShapeControl\n}\n\nexport function ShapeControlValue<T extends ShapeControlDefinition>({\n  definition,\n  data,\n  children,\n  control,\n}: ShapeControlValueProps<T>) {\n  return Object.entries(definition.config.type).reduceRight(\n    (renderFn, [key, controlDefinition]) =>\n      shapeControlValue =>\n        (\n          <ControlValue\n            definition={controlDefinition}\n            data={data?.[key]}\n            control={control?.controls.get(key)}\n          >\n            {value => renderFn({ ...shapeControlValue, [key]: value })}\n          </ControlValue>\n        ),\n    children,\n  )({} as ShapeControlValue<T>)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBU;AAvBV,qBAAqD;AAa9C,SAAS,kBAAoD;AAAA,EAClE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA8B;AAC5B,SAAO,OAAO,QAAQ,WAAW,OAAO,IAAI,EAAE;AAAA,IAC5C,CAAC,UAAU,CAAC,KAAK,iBAAiB,MAChC,uBAEI;AAAA,MAAC;AAAA;AAAA,QACC,YAAY;AAAA,QACZ,MAAM,OAAO,GAAG;AAAA,QAChB,SAAS,SAAS,SAAS,IAAI,GAAG;AAAA,QAEjC,qBAAS,SAAS,EAAE,GAAG,mBAAmB,CAAC,GAAG,GAAG,MAAM,CAAC;AAAA;AAAA,IAC3D;AAAA,IAEN;AAAA,EACF,EAAE,CAAC,CAAyB;AAC9B;","names":[]}

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

@@ -0,0 +1,146 @@
+"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 slot_exports = {};
+__export(slot_exports, {
+  Slot: () => Slot,
+  useSlot: () => useSlot
+});
+module.exports = __toCommonJS(slot_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_Element = require("../components/Element");
+var import_columns = require("../../../components/utils/columns");
+var import_responsive_style = require("../../../components/utils/responsive-style");
+var import_use_style = require("../use-style");
+var import_css = require("@emotion/css");
+var import_poll_box_model = require("../poll-box-model");
+function useSlot(data, control) {
+  if (data == null || data.elements.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Slot.Placeholder, { control });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Slot, { control, children: data.elements.map((element, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Slot.Item, { control, grid: data.columns, index: i, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Element.Element, { element }) }, element.key)) });
+}
+function Slot({
+  as,
+  control,
+  children,
+  className,
+  ...restOfProps
+}) {
+  const As = as ?? "div";
+  const [element, setElement] = (0, import_react.useState)(null);
+  const baseClassName = (0, import_use_style.useStyle)({
+    display: "flex",
+    flexWrap: "wrap",
+    width: "100%"
+  });
+  (0, import_react.useEffect)(() => {
+    if (element == null || control == null)
+      return;
+    return (0, import_poll_box_model.pollBoxModel)({
+      element,
+      onBoxModelChange: (boxModel) => control.changeContainerBoxModel(boxModel)
+    });
+  }, [element, control]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(As, { ...restOfProps, ref: setElement, className: (0, import_css.cx)(baseClassName, className), children });
+}
+Slot.Placeholder = SlotPlaceholder;
+Slot.Item = SlotItem;
+function SlotItem({
+  as,
+  control,
+  grid,
+  index,
+  children,
+  className,
+  ...restOfProps
+}) {
+  const As = as ?? "div";
+  const [element, setElement] = (0, import_react.useState)(null);
+  const baseClassName = (0, import_use_style.useStyle)({
+    display: "flex",
+    ...(0, import_responsive_style.useResponsiveStyle)([grid], ([{ count = 12, spans = [[12]] } = {}]) => {
+      const [rowIndex, columnIndex] = (0, import_columns.getIndexes)(spans, index);
+      const span = spans[rowIndex][columnIndex];
+      const flexBasis = `calc(100% * ${(span / count).toFixed(5)})`;
+      return span === 0 ? { display: "none" } : { flexBasis, minWidth: flexBasis };
+    })
+  });
+  (0, import_react.useEffect)(() => {
+    if (element == null || control == null)
+      return;
+    return (0, import_poll_box_model.pollBoxModel)({
+      element,
+      onBoxModelChange: (boxModel) => control.changeItemBoxModel(index, boxModel)
+    });
+  }, [element, control, index]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(As, { ...restOfProps, ref: setElement, className: (0, import_css.cx)(baseClassName, className), children });
+}
+function SlotPlaceholder({ control }) {
+  const [element, setElement] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(() => {
+    if (element == null || control == null)
+      return;
+    return (0, import_poll_box_model.pollBoxModel)({
+      element,
+      onBoxModelChange: (boxModel) => control.changeContainerBoxModel(boxModel)
+    });
+  }, [element, control]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref: setElement,
+      className: (0, import_use_style.useStyle)({
+        width: "100%",
+        background: "rgba(161, 168, 194, 0.18)",
+        height: "80px"
+      }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "100%",
+          height: "100%",
+          className: (0, import_use_style.useStyle)({ overflow: "visible", padding: 8 }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "rect",
+            {
+              x: 0,
+              y: 0,
+              width: "100%",
+              height: "100%",
+              strokeWidth: 2,
+              strokeDasharray: "4 2",
+              fill: "none",
+              stroke: "rgba(161, 168, 194, 0.40)",
+              rx: "4",
+              ry: "4"
+            }
+          )
+        }
+      )
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Slot,
+  useSlot
+});
+//# sourceMappingURL=slot.js.map

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

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

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

@@ -0,0 +1,97 @@
+"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 style_v2_exports = {};
+__export(style_v2_exports, {
+  StyleV2ControlValue: () => StyleV2ControlValue,
+  useFormattedStyleV2: () => useFormattedStyleV2
+});
+module.exports = __toCommonJS(style_v2_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_use_style = require("../use-style");
+var import_breakpoints = require("../../../state/modules/breakpoints");
+var import_control = require("./control");
+var import_components = require("../components");
+var import_use_breakpoints = require("../hooks/use-breakpoints");
+function useStyleControlCssObject(styleControlData, controlDefinition) {
+  const breakpoints = (0, import_use_breakpoints.useBreakpoints)();
+  return {
+    ...controlDefinition.config.getStyle(
+      (0, import_breakpoints.findBreakpointOverride)(
+        breakpoints,
+        styleControlData,
+        (0, import_breakpoints.getBaseBreakpoint)(breakpoints).id,
+        import_breakpoints.mergeOrCoalesceFallbacks
+      )?.value
+    ),
+    ...breakpoints.reduce((styles, breakpoint) => {
+      return {
+        ...styles,
+        [(0, import_breakpoints.getBreakpointMediaQuery)(breakpoint)]: controlDefinition.config.getStyle(
+          (0, import_breakpoints.findBreakpointOverride)(
+            breakpoints,
+            styleControlData,
+            breakpoint.id,
+            import_breakpoints.mergeOrCoalesceFallbacks
+          )?.value
+        )
+      };
+    }, {})
+  };
+}
+function useFormattedStyleV2(styleControlData, controlDefinition) {
+  const styles = useStyleControlCssObject(styleControlData, controlDefinition);
+  return (0, import_use_style.useStyle)(styles);
+}
+function StyleV2ControlValue({
+  definition,
+  data,
+  children,
+  control
+}) {
+  return (data ?? []).reduceRight(
+    (renderFn, deviceOverrideData) => (responsiveValue) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_control.ControlValue,
+        {
+          definition: definition.config.type,
+          data: deviceOverrideData.value,
+          control: control?.control,
+          children: (value) => renderFn([{ ...deviceOverrideData, value }, ...responsiveValue])
+        }
+      );
+    },
+    (value) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_components.RenderHook,
+        {
+          hook: useFormattedStyleV2,
+          parameters: [value, definition],
+          children: (value2) => children(value2)
+        },
+        definition.type
+      );
+    }
+  )([]);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  StyleV2ControlValue,
+  useFormattedStyleV2
+});
+//# sourceMappingURL=style-v2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/controls/style-v2.tsx"],"sourcesContent":["import { StyleV2Control, StyleV2ControlData, StyleV2ControlDefinition } from '../../../controls'\nimport { useStyle } from '../use-style'\nimport {\n  findBreakpointOverride,\n  getBaseBreakpoint,\n  getBreakpointMediaQuery,\n  mergeOrCoalesceFallbacks,\n} from '../../../state/modules/breakpoints'\nimport { CSSObject } from '@emotion/css'\n\nimport { ControlDefinitionValue, ControlValue } from './control'\nimport { RenderHook } from '../components'\nimport { DeviceOverride } from '../../../controls/types'\nimport { useBreakpoints } from '../hooks/use-breakpoints'\n\nfunction useStyleControlCssObject(\n  styleControlData: StyleV2ControlData,\n  controlDefinition: StyleV2ControlDefinition,\n): CSSObject {\n  const breakpoints = useBreakpoints()\n\n  return {\n    ...controlDefinition.config.getStyle(\n      findBreakpointOverride(\n        breakpoints,\n        styleControlData,\n        getBaseBreakpoint(breakpoints).id,\n        mergeOrCoalesceFallbacks,\n      )?.value,\n    ),\n    ...breakpoints.reduce((styles, breakpoint) => {\n      return {\n        ...styles,\n        [getBreakpointMediaQuery(breakpoint)]: controlDefinition.config.getStyle(\n          findBreakpointOverride(\n            breakpoints,\n            styleControlData,\n            breakpoint.id,\n            mergeOrCoalesceFallbacks,\n          )?.value,\n        ),\n      }\n    }, {}),\n  }\n}\n\nexport type StyleV2ControlFormattedValue = string\n\nexport function useFormattedStyleV2<T extends StyleV2ControlDefinition>(\n  styleControlData: StyleV2ControlData,\n  controlDefinition: T,\n): StyleV2ControlFormattedValue {\n  const styles = useStyleControlCssObject(styleControlData, controlDefinition)\n\n  return useStyle(styles)\n}\n\ntype StyleV2ControlValueProps<T extends StyleV2ControlDefinition> = {\n  definition: T\n  data: StyleV2ControlData | undefined\n  children(value: string): JSX.Element\n  control?: StyleV2Control\n}\n\nexport function StyleV2ControlValue<T extends StyleV2ControlDefinition>({\n  definition,\n  data,\n  children,\n  control,\n}: StyleV2ControlValueProps<T>): JSX.Element {\n  return (data ?? []).reduceRight(\n    (renderFn, deviceOverrideData: DeviceOverride<any>) => responsiveValue => {\n      return (\n        <ControlValue\n          definition={definition.config.type}\n          data={deviceOverrideData.value}\n          control={control?.control}\n        >\n          {value => renderFn([{ ...deviceOverrideData, value }, ...responsiveValue])}\n        </ControlValue>\n      )\n    },\n    (value: StyleV2ControlData) => {\n      return (\n        <RenderHook\n          key={definition.type}\n          hook={useFormattedStyleV2}\n          parameters={[value, definition]}\n        >\n          {value => children(value as ControlDefinitionValue<T>)}\n        </RenderHook>\n      )\n    },\n  )([])\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyEQ;AAxER,uBAAyB;AACzB,yBAKO;AAGP,qBAAqD;AACrD,wBAA2B;AAE3B,6BAA+B;AAE/B,SAAS,yBACP,kBACA,mBACW;AACX,QAAM,kBAAc,uCAAe;AAEnC,SAAO;AAAA,IACL,GAAG,kBAAkB,OAAO;AAAA,UAC1B;AAAA,QACE;AAAA,QACA;AAAA,YACA,sCAAkB,WAAW,EAAE;AAAA,QAC/B;AAAA,MACF,GAAG;AAAA,IACL;AAAA,IACA,GAAG,YAAY,OAAO,CAAC,QAAQ,eAAe;AAC5C,aAAO;AAAA,QACL,GAAG;AAAA,QACH,KAAC,4CAAwB,UAAU,CAAC,GAAG,kBAAkB,OAAO;AAAA,cAC9D;AAAA,YACE;AAAA,YACA;AAAA,YACA,WAAW;AAAA,YACX;AAAA,UACF,GAAG;AAAA,QACL;AAAA,MACF;AAAA,IACF,GAAG,CAAC,CAAC;AAAA,EACP;AACF;AAIO,SAAS,oBACd,kBACA,mBAC8B;AAC9B,QAAM,SAAS,yBAAyB,kBAAkB,iBAAiB;AAE3E,aAAO,2BAAS,MAAM;AACxB;AASO,SAAS,oBAAwD;AAAA,EACtE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA6C;AAC3C,UAAQ,QAAQ,CAAC,GAAG;AAAA,IAClB,CAAC,UAAU,uBAA4C,qBAAmB;AACxE,aACE;AAAA,QAAC;AAAA;AAAA,UACC,YAAY,WAAW,OAAO;AAAA,UAC9B,MAAM,mBAAmB;AAAA,UACzB,SAAS,SAAS;AAAA,UAEjB,qBAAS,SAAS,CAAC,EAAE,GAAG,oBAAoB,MAAM,GAAG,GAAG,eAAe,CAAC;AAAA;AAAA,MAC3E;AAAA,IAEJ;AAAA,IACA,CAAC,UAA8B;AAC7B,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,MAAM;AAAA,UACN,YAAY,CAAC,OAAO,UAAU;AAAA,UAE7B,WAAAA,WAAS,SAASA,MAAkC;AAAA;AAAA,QAJhD,WAAW;AAAA,MAKlB;AAAA,IAEJ;AAAA,EACF,EAAE,CAAC,CAAC;AACN;","names":["value"]}