@webiny/website-builder-react 0.0.0-unstable.fdd9228b5d → 5.45.0-beta.0

package/README.md

@@ -1,3 +1,11 @@
-# Website Builder (React SDK)
+# @webiny/website-builder-react
 
-A React frontend integration SDK for Webiny Website Builder. 
+> [!NOTE]
+> This package is part of the [Webiny](https://www.webiny.com) monorepo.
+> It’s **included in every Webiny project by default** and is not meant to be used as a standalone package.
+
+📘 **Documentation:** [https://www.webiny.com/docs](https://www.webiny.com/docs)
+
+---
+
+_This README file is automatically generated during the publish process._

package/components/ConnectToEditor.js

@@ -2,8 +2,8 @@
 
 import React, { useEffect, useState } from "react";
 import { contentSdk } from "@webiny/website-builder-sdk";
-import { DocumentStoreProvider } from "./DocumentStoreProvider";
-import { ElementRenderer } from "./ElementRenderer";
+import { DocumentStoreProvider } from "./DocumentStoreProvider.js";
+import { ElementRenderer } from "./ElementRenderer.js";
 export const ConnectToEditor = props => {
   const [data, setData] = useState(null);
   useEffect(() => {

package/components/ConnectToEditor.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useState","contentSdk","DocumentStoreProvider","ElementRenderer","ConnectToEditor","props","data","setData","getPage","document","properties","path","then","createElement","id"],"sources":["ConnectToEditor.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useState } from \"react\";\nimport { contentSdk, type Component, type Document } from \"@webiny/website-builder-sdk\";\nimport { DocumentStoreProvider } from \"~/components/DocumentStoreProvider\";\nimport { ElementRenderer } from \"~/components/ElementRenderer\";\n\ninterface ConnectToEditorProps {\n    document: Document;\n    components: Component[];\n}\n\nexport const ConnectToEditor = (props: ConnectToEditorProps) => {\n    const [data, setData] = useState<Document | null>(null);\n\n    useEffect(() => {\n        contentSdk.getPage(props.document.properties.path).then(document => {\n            setData(document);\n        });\n    }, []);\n\n    if (!data) {\n        return null;\n    }\n\n    return (\n        <DocumentStoreProvider id={data.properties.id} document={data}>\n            <ElementRenderer id={\"root\"} />\n        </DocumentStoreProvider>\n    );\n};\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAClD,SAASC,UAAU,QAAuC,6BAA6B;AACvF,SAASC,qBAAqB;AAC9B,SAASC,eAAe;AAOxB,OAAO,MAAMC,eAAe,GAAIC,KAA2B,IAAK;EAC5D,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGP,QAAQ,CAAkB,IAAI,CAAC;EAEvDD,SAAS,CAAC,MAAM;IACZE,UAAU,CAACO,OAAO,CAACH,KAAK,CAACI,QAAQ,CAACC,UAAU,CAACC,IAAI,CAAC,CAACC,IAAI,CAACH,QAAQ,IAAI;MAChEF,OAAO,CAACE,QAAQ,CAAC;IACrB,CAAC,CAAC;EACN,CAAC,EAAE,EAAE,CAAC;EAEN,IAAI,CAACH,IAAI,EAAE;IACP,OAAO,IAAI;EACf;EAEA,oBACIR,KAAA,CAAAe,aAAA,CAACX,qBAAqB;IAACY,EAAE,EAAER,IAAI,CAACI,UAAU,CAACI,EAAG;IAACL,QAAQ,EAAEH;EAAK,gBAC1DR,KAAA,CAAAe,aAAA,CAACV,eAAe;IAACW,EAAE,EAAE;EAAO,CAAE,CACX,CAAC;AAEhC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useEffect","useState","contentSdk","DocumentStoreProvider","ElementRenderer","ConnectToEditor","props","data","setData","getPage","document","properties","path","then","createElement","id"],"sources":["ConnectToEditor.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useState } from \"react\";\nimport { contentSdk, type Component, type Document } from \"@webiny/website-builder-sdk\";\nimport { DocumentStoreProvider } from \"~/components/DocumentStoreProvider.js\";\nimport { ElementRenderer } from \"~/components/ElementRenderer.js\";\n\ninterface ConnectToEditorProps {\n    document: Document;\n    components: Component[];\n}\n\nexport const ConnectToEditor = (props: ConnectToEditorProps) => {\n    const [data, setData] = useState<Document | null>(null);\n\n    useEffect(() => {\n        contentSdk.getPage(props.document.properties.path).then(document => {\n            setData(document);\n        });\n    }, []);\n\n    if (!data) {\n        return null;\n    }\n\n    return (\n        <DocumentStoreProvider id={data.properties.id} document={data}>\n            <ElementRenderer id={\"root\"} />\n        </DocumentStoreProvider>\n    );\n};\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAClD,SAASC,UAAU,QAAuC,6BAA6B;AACvF,SAASC,qBAAqB;AAC9B,SAASC,eAAe;AAOxB,OAAO,MAAMC,eAAe,GAAIC,KAA2B,IAAK;EAC5D,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGP,QAAQ,CAAkB,IAAI,CAAC;EAEvDD,SAAS,CAAC,MAAM;IACZE,UAAU,CAACO,OAAO,CAACH,KAAK,CAACI,QAAQ,CAACC,UAAU,CAACC,IAAI,CAAC,CAACC,IAAI,CAACH,QAAQ,IAAI;MAChEF,OAAO,CAACE,QAAQ,CAAC;IACrB,CAAC,CAAC;EACN,CAAC,EAAE,EAAE,CAAC;EAEN,IAAI,CAACH,IAAI,EAAE;IACP,OAAO,IAAI;EACf;EAEA,oBACIR,KAAA,CAAAe,aAAA,CAACX,qBAAqB;IAACY,EAAE,EAAER,IAAI,CAACI,UAAU,CAACI,EAAG;IAACL,QAAQ,EAAEH;EAAK,gBAC1DR,KAAA,CAAAe,aAAA,CAACV,eAAe;IAACW,EAAE,EAAE;EAAO,CAAE,CACX,CAAC;AAEhC,CAAC","ignoreList":[]}

package/components/DocumentFragment.d.ts

@@ -1,6 +1,13 @@
 import React from "react";
-export interface DocumentFragmentProps {
+export type DocumentFragmentProps = {
     name: string;
     children: React.ReactNode;
-}
-export declare function DocumentFragment({ children }: DocumentFragmentProps): React.JSX.Element;
+    component?: never;
+    inputs?: never;
+} | {
+    component: string;
+    inputs?: Record<string, any>;
+    name?: never;
+    children?: never;
+};
+export declare function DocumentFragment(props: DocumentFragmentProps): React.JSX.Element | null;

package/components/DocumentFragment.js

@@ -1,10 +1,11 @@
 "use client";
 
 import React from "react";
-export function DocumentFragment({
-  children
-}) {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+export function DocumentFragment(props) {
+  if (props.children) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, props.children);
+  }
+  return null;
 }
 
 //# sourceMappingURL=DocumentFragment.js.map

package/components/DocumentFragment.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","DocumentFragment","children","createElement","Fragment"],"sources":["DocumentFragment.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\n\nexport interface DocumentFragmentProps {\n    name: string;\n    children: React.ReactNode;\n}\n\nexport function DocumentFragment({ children }: DocumentFragmentProps) {\n    return <>{children}</>;\n}\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,MAAM,OAAO;AAOzB,OAAO,SAASC,gBAAgBA,CAAC;EAAEC;AAAgC,CAAC,EAAE;EAClE,oBAAOF,KAAA,CAAAG,aAAA,CAAAH,KAAA,CAAAI,QAAA,QAAGF,QAAW,CAAC;AAC1B","ignoreList":[]}
+{"version":3,"names":["React","DocumentFragment","props","children","createElement","Fragment"],"sources":["DocumentFragment.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\n\nexport type DocumentFragmentProps =\n    | {\n          name: string;\n          children: React.ReactNode;\n          component?: never;\n          inputs?: never;\n      }\n    | {\n          component: string;\n          inputs?: Record<string, any>;\n          name?: never;\n          children?: never;\n      };\n\nexport function DocumentFragment(props: DocumentFragmentProps) {\n    if (props.children) {\n        return <>{props.children}</>;\n    }\n\n    return null;\n}\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,MAAM,OAAO;AAgBzB,OAAO,SAASC,gBAAgBA,CAACC,KAA4B,EAAE;EAC3D,IAAIA,KAAK,CAACC,QAAQ,EAAE;IAChB,oBAAOH,KAAA,CAAAI,aAAA,CAAAJ,KAAA,CAAAK,QAAA,QAAGH,KAAK,CAACC,QAAW,CAAC;EAChC;EAEA,OAAO,IAAI;AACf","ignoreList":[]}

package/components/DocumentRenderer.js

@@ -1,10 +1,10 @@
 import React from "react";
 import { contentSdk } from "@webiny/website-builder-sdk";
-import { ElementRenderer } from "./ElementRenderer";
-import { DocumentStoreProvider } from "./DocumentStoreProvider";
-import { ConnectToEditor } from "./ConnectToEditor";
-import { editorComponents } from "../editorComponents/index";
-import { FragmentsProvider } from "./FragmentsProvider";
+import { ElementRenderer } from "./ElementRenderer.js";
+import { DocumentStoreProvider } from "./DocumentStoreProvider.js";
+import { ConnectToEditor } from "./ConnectToEditor.js";
+import { editorComponents } from "../editorComponents/index.js";
+import { FragmentsProvider } from "./FragmentsProvider.js";
 export const DocumentRenderer = ({
   document,
   components,
@@ -12,17 +12,26 @@ export const DocumentRenderer = ({
 }) => {
   const allComponents = [...editorComponents, ...components];
   allComponents.forEach(blueprint => contentSdk.registerComponent(blueprint));
-  const fragments = {};
-  React.Children.toArray(children).forEach(child => {
-    // @ts-expect-error Need to properly type this.
-    const {
-      name,
-      children
-    } = child.props;
-    if (!name || !children) {
-      return;
+  const fragments = [];
+  React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child)).forEach(child => {
+    const props = child.props;
+    // Case 1:
+    if (props.name && props.children) {
+      fragments.push({
+        type: "fixed",
+        name: props.name,
+        element: /*#__PURE__*/React.createElement(React.Fragment, null, props.children)
+      });
+    }
+
+    // Case 2:
+    if (props.component) {
+      fragments.push({
+        type: "component",
+        component: props.component,
+        inputs: props.inputs ?? {}
+      });
     }
-    fragments[name] = /*#__PURE__*/React.createElement(React.Fragment, null, children);
   });
   if (!document) {
     return /*#__PURE__*/React.createElement("div", {

package/components/DocumentRenderer.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","contentSdk","ElementRenderer","DocumentStoreProvider","ConnectToEditor","editorComponents","FragmentsProvider","DocumentRenderer","document","components","children","allComponents","forEach","blueprint","registerComponent","fragments","Children","toArray","child","name","props","createElement","Fragment","isEditing","id","properties"],"sources":["DocumentRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { type Component, contentSdk, type Document } from \"@webiny/website-builder-sdk\";\nimport { ElementRenderer } from \"./ElementRenderer\";\nimport { DocumentStoreProvider } from \"./DocumentStoreProvider\";\nimport { ConnectToEditor } from \"./ConnectToEditor\";\nimport { editorComponents } from \"../editorComponents/index\";\nimport type { DocumentFragments } from \"./FragmentsProvider\";\nimport { FragmentsProvider } from \"./FragmentsProvider\";\n\ninterface DocumentRendererProps {\n    document: Document | null;\n    components: Component[];\n    children?: React.ReactNode | React.ReactNode[];\n}\n\nexport const DocumentRenderer = ({ document, components, children }: DocumentRendererProps) => {\n    const allComponents = [...editorComponents, ...components];\n    allComponents.forEach(blueprint => contentSdk.registerComponent(blueprint));\n    const fragments: DocumentFragments = {};\n\n    React.Children.toArray(children).forEach(child => {\n        // @ts-expect-error Need to properly type this.\n        const { name, children } = child.props;\n        if (!name || !children) {\n            return;\n        }\n\n        fragments[name] = <>{children}</>;\n    });\n\n    if (!document) {\n        return <div data-role={\"document-renderer\"}>{children}</div>;\n    }\n\n    return (\n        <div data-role={\"document-renderer\"}>\n            <FragmentsProvider fragments={fragments ?? {}}>\n                {contentSdk.isEditing() ? (\n                    <ConnectToEditor document={document} components={components} />\n                ) : (\n                    <DocumentStoreProvider id={document.properties.id} document={document}>\n                        <ElementRenderer id={\"root\"} />\n                    </DocumentStoreProvider>\n                )}\n            </FragmentsProvider>\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAAyBC,UAAU,QAAuB,6BAA6B;AACvF,SAASC,eAAe;AACxB,SAASC,qBAAqB;AAC9B,SAASC,eAAe;AACxB,SAASC,gBAAgB;AAEzB,SAASC,iBAAiB;AAQ1B,OAAO,MAAMC,gBAAgB,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,UAAU;EAAEC;AAAgC,CAAC,KAAK;EAC3F,MAAMC,aAAa,GAAG,CAAC,GAAGN,gBAAgB,EAAE,GAAGI,UAAU,CAAC;EAC1DE,aAAa,CAACC,OAAO,CAACC,SAAS,IAAIZ,UAAU,CAACa,iBAAiB,CAACD,SAAS,CAAC,CAAC;EAC3E,MAAME,SAA4B,GAAG,CAAC,CAAC;EAEvCf,KAAK,CAACgB,QAAQ,CAACC,OAAO,CAACP,QAAQ,CAAC,CAACE,OAAO,CAACM,KAAK,IAAI;IAC9C;IACA,MAAM;MAAEC,IAAI;MAAET;IAAS,CAAC,GAAGQ,KAAK,CAACE,KAAK;IACtC,IAAI,CAACD,IAAI,IAAI,CAACT,QAAQ,EAAE;MACpB;IACJ;IAEAK,SAAS,CAACI,IAAI,CAAC,gBAAGnB,KAAA,CAAAqB,aAAA,CAAArB,KAAA,CAAAsB,QAAA,QAAGZ,QAAW,CAAC;EACrC,CAAC,CAAC;EAEF,IAAI,CAACF,QAAQ,EAAE;IACX,oBAAOR,KAAA,CAAAqB,aAAA;MAAK,aAAW;IAAoB,GAAEX,QAAc,CAAC;EAChE;EAEA,oBACIV,KAAA,CAAAqB,aAAA;IAAK,aAAW;EAAoB,gBAChCrB,KAAA,CAAAqB,aAAA,CAACf,iBAAiB;IAACS,SAAS,EAAEA,SAAS,IAAI,CAAC;EAAE,GACzCd,UAAU,CAACsB,SAAS,CAAC,CAAC,gBACnBvB,KAAA,CAAAqB,aAAA,CAACjB,eAAe;IAACI,QAAQ,EAAEA,QAAS;IAACC,UAAU,EAAEA;EAAW,CAAE,CAAC,gBAE/DT,KAAA,CAAAqB,aAAA,CAAClB,qBAAqB;IAACqB,EAAE,EAAEhB,QAAQ,CAACiB,UAAU,CAACD,EAAG;IAAChB,QAAQ,EAAEA;EAAS,gBAClER,KAAA,CAAAqB,aAAA,CAACnB,eAAe;IAACsB,EAAE,EAAE;EAAO,CAAE,CACX,CAEZ,CAClB,CAAC;AAEd,CAAC","ignoreList":[]}
+{"version":3,"names":["React","contentSdk","ElementRenderer","DocumentStoreProvider","ConnectToEditor","editorComponents","FragmentsProvider","DocumentRenderer","document","components","children","allComponents","forEach","blueprint","registerComponent","fragments","Children","toArray","filter","child","isValidElement","props","name","push","type","element","createElement","Fragment","component","inputs","isEditing","id","properties"],"sources":["DocumentRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { type Component, contentSdk, type Document } from \"@webiny/website-builder-sdk\";\nimport { ElementRenderer } from \"./ElementRenderer.js\";\nimport { DocumentStoreProvider } from \"./DocumentStoreProvider.js\";\nimport { ConnectToEditor } from \"./ConnectToEditor.js\";\nimport { editorComponents } from \"../editorComponents/index.js\";\nimport type { DocumentFragments } from \"./FragmentsProvider.js\";\nimport { FragmentsProvider } from \"./FragmentsProvider.js\";\nimport type { DocumentFragmentProps } from \"~/components/DocumentFragment.js\";\n\ninterface DocumentRendererProps {\n    document: Document | null;\n    components: Component[];\n    children?: React.ReactNode | React.ReactNode[];\n}\n\nexport const DocumentRenderer = ({ document, components, children }: DocumentRendererProps) => {\n    const allComponents = [...editorComponents, ...components];\n    allComponents.forEach(blueprint => contentSdk.registerComponent(blueprint));\n    const fragments: DocumentFragments = [];\n\n    React.Children.toArray(children)\n        .filter(child => React.isValidElement(child))\n        .forEach(child => {\n            const props = child.props as DocumentFragmentProps;\n            // Case 1:\n            if (props.name && props.children) {\n                fragments.push({\n                    type: \"fixed\",\n                    name: props.name,\n                    element: <>{props.children}</>\n                });\n            }\n\n            // Case 2:\n            if (props.component) {\n                fragments.push({\n                    type: \"component\",\n                    component: props.component,\n                    inputs: props.inputs ?? {}\n                });\n            }\n        });\n\n    if (!document) {\n        return <div data-role={\"document-renderer\"}>{children}</div>;\n    }\n\n    return (\n        <div data-role={\"document-renderer\"}>\n            <FragmentsProvider fragments={fragments ?? {}}>\n                {contentSdk.isEditing() ? (\n                    <ConnectToEditor document={document} components={components} />\n                ) : (\n                    <DocumentStoreProvider id={document.properties.id} document={document}>\n                        <ElementRenderer id={\"root\"} />\n                    </DocumentStoreProvider>\n                )}\n            </FragmentsProvider>\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAAyBC,UAAU,QAAuB,6BAA6B;AACvF,SAASC,eAAe;AACxB,SAASC,qBAAqB;AAC9B,SAASC,eAAe;AACxB,SAASC,gBAAgB;AAEzB,SAASC,iBAAiB;AAS1B,OAAO,MAAMC,gBAAgB,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,UAAU;EAAEC;AAAgC,CAAC,KAAK;EAC3F,MAAMC,aAAa,GAAG,CAAC,GAAGN,gBAAgB,EAAE,GAAGI,UAAU,CAAC;EAC1DE,aAAa,CAACC,OAAO,CAACC,SAAS,IAAIZ,UAAU,CAACa,iBAAiB,CAACD,SAAS,CAAC,CAAC;EAC3E,MAAME,SAA4B,GAAG,EAAE;EAEvCf,KAAK,CAACgB,QAAQ,CAACC,OAAO,CAACP,QAAQ,CAAC,CAC3BQ,MAAM,CAACC,KAAK,iBAAInB,KAAK,CAACoB,cAAc,CAACD,KAAK,CAAC,CAAC,CAC5CP,OAAO,CAACO,KAAK,IAAI;IACd,MAAME,KAAK,GAAGF,KAAK,CAACE,KAA8B;IAClD;IACA,IAAIA,KAAK,CAACC,IAAI,IAAID,KAAK,CAACX,QAAQ,EAAE;MAC9BK,SAAS,CAACQ,IAAI,CAAC;QACXC,IAAI,EAAE,OAAO;QACbF,IAAI,EAAED,KAAK,CAACC,IAAI;QAChBG,OAAO,eAAEzB,KAAA,CAAA0B,aAAA,CAAA1B,KAAA,CAAA2B,QAAA,QAAGN,KAAK,CAACX,QAAW;MACjC,CAAC,CAAC;IACN;;IAEA;IACA,IAAIW,KAAK,CAACO,SAAS,EAAE;MACjBb,SAAS,CAACQ,IAAI,CAAC;QACXC,IAAI,EAAE,WAAW;QACjBI,SAAS,EAAEP,KAAK,CAACO,SAAS;QAC1BC,MAAM,EAAER,KAAK,CAACQ,MAAM,IAAI,CAAC;MAC7B,CAAC,CAAC;IACN;EACJ,CAAC,CAAC;EAEN,IAAI,CAACrB,QAAQ,EAAE;IACX,oBAAOR,KAAA,CAAA0B,aAAA;MAAK,aAAW;IAAoB,GAAEhB,QAAc,CAAC;EAChE;EAEA,oBACIV,KAAA,CAAA0B,aAAA;IAAK,aAAW;EAAoB,gBAChC1B,KAAA,CAAA0B,aAAA,CAACpB,iBAAiB;IAACS,SAAS,EAAEA,SAAS,IAAI,CAAC;EAAE,GACzCd,UAAU,CAAC6B,SAAS,CAAC,CAAC,gBACnB9B,KAAA,CAAA0B,aAAA,CAACtB,eAAe;IAACI,QAAQ,EAAEA,QAAS;IAACC,UAAU,EAAEA;EAAW,CAAE,CAAC,gBAE/DT,KAAA,CAAA0B,aAAA,CAACvB,qBAAqB;IAAC4B,EAAE,EAAEvB,QAAQ,CAACwB,UAAU,CAACD,EAAG;IAACvB,QAAQ,EAAEA;EAAS,gBAClER,KAAA,CAAA0B,aAAA,CAACxB,eAAe;IAAC6B,EAAE,EAAE;EAAO,CAAE,CACX,CAEZ,CAClB,CAAC;AAEd,CAAC","ignoreList":[]}

package/components/DocumentStoreProvider.d.ts

@@ -3,7 +3,7 @@ import type { DocumentStore } from "@webiny/website-builder-sdk";
 import { type Document } from "@webiny/website-builder-sdk";
 export declare const DocumentStoreProvider: ({ id, document, children }: {
     id: string;
-    document?: Document | undefined;
+    document?: Document;
     children: React.ReactNode;
 }) => React.JSX.Element;
 export declare const useDocumentStore: () => DocumentStore;

package/components/EditingElementRenderer/EditingElementRenderer.js

@@ -2,11 +2,11 @@
 
 import React, { useEffect, useMemo } from "react";
 import { observer } from "mobx-react-lite";
-import { EditingElementRendererPresenter } from "./EditingElementRenderer.presenter";
-import { LiveElementRenderer } from "../LiveElementRenderer";
-import { useElementSlotDepth } from "../ElementSlotDepthProvider";
-import { useElementIndex } from "../ElementIndexProvider";
-import { useDocumentStore } from "../DocumentStoreProvider";
+import { EditingElementRendererPresenter } from "./EditingElementRenderer.presenter.js";
+import { LiveElementRenderer } from "../LiveElementRenderer.js";
+import { useElementSlotDepth } from "../ElementSlotDepthProvider.js";
+import { useElementIndex } from "../ElementIndexProvider.js";
+import { useDocumentStore } from "../DocumentStoreProvider.js";
 const styles = {
   display: "contents"
 };

package/components/EditingElementRenderer/EditingElementRenderer.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useMemo","observer","EditingElementRendererPresenter","LiveElementRenderer","useElementSlotDepth","useElementIndex","useDocumentStore","styles","display","EditingElementRenderer","props","documentStore","depth","index","presenter","element","id","init","dispose","vm","createElement","style","parent","slot"],"sources":["EditingElementRenderer.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useMemo } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { type DocumentElement } from \"@webiny/website-builder-sdk\";\nimport { EditingElementRendererPresenter } from \"./EditingElementRenderer.presenter\";\nimport { LiveElementRenderer } from \"../LiveElementRenderer\";\nimport { useElementSlotDepth } from \"../ElementSlotDepthProvider\";\nimport { useElementIndex } from \"../ElementIndexProvider\";\nimport { useDocumentStore } from \"../DocumentStoreProvider\";\n\ninterface PreviewElementRendererProps {\n    element: DocumentElement;\n}\n\nconst styles = { display: \"contents\" };\n\nexport const EditingElementRenderer = observer((props: PreviewElementRendererProps) => {\n    const documentStore = useDocumentStore();\n    const depth = useElementSlotDepth();\n    const index = useElementIndex();\n\n    const presenter = useMemo(() => {\n        return new EditingElementRendererPresenter(documentStore);\n    }, [props.element?.id]);\n\n    useEffect(() => {\n        if (!props.element) {\n            return;\n        }\n        presenter.init(props.element);\n    }, [props.element?.id]);\n\n    useEffect(() => {\n        return () => {\n            presenter.dispose();\n        };\n    }, []);\n\n    const element = presenter.vm.element;\n\n    if (!element || !element.id) {\n        return null;\n    }\n\n    return (\n        <div\n            style={styles}\n            data-element-id={element.id}\n            data-depth={depth}\n            data-parent-index={index}\n            data-parent-id={element.parent?.id}\n            data-parent-slot={element.parent?.slot}\n        >\n            <LiveElementRenderer element={element} />\n        </div>\n    );\n});\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,IAAIC,SAAS,EAAEC,OAAO,QAAQ,OAAO;AACjD,SAASC,QAAQ,QAAQ,iBAAiB;AAE1C,SAASC,+BAA+B;AACxC,SAASC,mBAAmB;AAC5B,SAASC,mBAAmB;AAC5B,SAASC,eAAe;AACxB,SAASC,gBAAgB;AAMzB,MAAMC,MAAM,GAAG;EAAEC,OAAO,EAAE;AAAW,CAAC;AAEtC,OAAO,MAAMC,sBAAsB,GAAGR,QAAQ,CAAES,KAAkC,IAAK;EACnF,MAAMC,aAAa,GAAGL,gBAAgB,CAAC,CAAC;EACxC,MAAMM,KAAK,GAAGR,mBAAmB,CAAC,CAAC;EACnC,MAAMS,KAAK,GAAGR,eAAe,CAAC,CAAC;EAE/B,MAAMS,SAAS,GAAGd,OAAO,CAAC,MAAM;IAC5B,OAAO,IAAIE,+BAA+B,CAACS,aAAa,CAAC;EAC7D,CAAC,EAAE,CAACD,KAAK,CAACK,OAAO,EAAEC,EAAE,CAAC,CAAC;EAEvBjB,SAAS,CAAC,MAAM;IACZ,IAAI,CAACW,KAAK,CAACK,OAAO,EAAE;MAChB;IACJ;IACAD,SAAS,CAACG,IAAI,CAACP,KAAK,CAACK,OAAO,CAAC;EACjC,CAAC,EAAE,CAACL,KAAK,CAACK,OAAO,EAAEC,EAAE,CAAC,CAAC;EAEvBjB,SAAS,CAAC,MAAM;IACZ,OAAO,MAAM;MACTe,SAAS,CAACI,OAAO,CAAC,CAAC;IACvB,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMH,OAAO,GAAGD,SAAS,CAACK,EAAE,CAACJ,OAAO;EAEpC,IAAI,CAACA,OAAO,IAAI,CAACA,OAAO,CAACC,EAAE,EAAE;IACzB,OAAO,IAAI;EACf;EAEA,oBACIlB,KAAA,CAAAsB,aAAA;IACIC,KAAK,EAAEd,MAAO;IACd,mBAAiBQ,OAAO,CAACC,EAAG;IAC5B,cAAYJ,KAAM;IAClB,qBAAmBC,KAAM;IACzB,kBAAgBE,OAAO,CAACO,MAAM,EAAEN,EAAG;IACnC,oBAAkBD,OAAO,CAACO,MAAM,EAAEC;EAAK,gBAEvCzB,KAAA,CAAAsB,aAAA,CAACjB,mBAAmB;IAACY,OAAO,EAAEA;EAAQ,CAAE,CACvC,CAAC;AAEd,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useEffect","useMemo","observer","EditingElementRendererPresenter","LiveElementRenderer","useElementSlotDepth","useElementIndex","useDocumentStore","styles","display","EditingElementRenderer","props","documentStore","depth","index","presenter","element","id","init","dispose","vm","createElement","style","parent","slot"],"sources":["EditingElementRenderer.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useMemo } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { type DocumentElement } from \"@webiny/website-builder-sdk\";\nimport { EditingElementRendererPresenter } from \"./EditingElementRenderer.presenter.js\";\nimport { LiveElementRenderer } from \"../LiveElementRenderer.js\";\nimport { useElementSlotDepth } from \"../ElementSlotDepthProvider.js\";\nimport { useElementIndex } from \"../ElementIndexProvider.js\";\nimport { useDocumentStore } from \"../DocumentStoreProvider.js\";\n\ninterface PreviewElementRendererProps {\n    element: DocumentElement;\n}\n\nconst styles = { display: \"contents\" };\n\nexport const EditingElementRenderer = observer((props: PreviewElementRendererProps) => {\n    const documentStore = useDocumentStore();\n    const depth = useElementSlotDepth();\n    const index = useElementIndex();\n\n    const presenter = useMemo(() => {\n        return new EditingElementRendererPresenter(documentStore);\n    }, [props.element?.id]);\n\n    useEffect(() => {\n        if (!props.element) {\n            return;\n        }\n        presenter.init(props.element);\n    }, [props.element?.id]);\n\n    useEffect(() => {\n        return () => {\n            presenter.dispose();\n        };\n    }, []);\n\n    const element = presenter.vm.element;\n\n    if (!element || !element.id) {\n        return null;\n    }\n\n    return (\n        <div\n            style={styles}\n            data-element-id={element.id}\n            data-depth={depth}\n            data-parent-index={index}\n            data-parent-id={element.parent?.id}\n            data-parent-slot={element.parent?.slot}\n        >\n            <LiveElementRenderer element={element} />\n        </div>\n    );\n});\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,IAAIC,SAAS,EAAEC,OAAO,QAAQ,OAAO;AACjD,SAASC,QAAQ,QAAQ,iBAAiB;AAE1C,SAASC,+BAA+B;AACxC,SAASC,mBAAmB;AAC5B,SAASC,mBAAmB;AAC5B,SAASC,eAAe;AACxB,SAASC,gBAAgB;AAMzB,MAAMC,MAAM,GAAG;EAAEC,OAAO,EAAE;AAAW,CAAC;AAEtC,OAAO,MAAMC,sBAAsB,GAAGR,QAAQ,CAAES,KAAkC,IAAK;EACnF,MAAMC,aAAa,GAAGL,gBAAgB,CAAC,CAAC;EACxC,MAAMM,KAAK,GAAGR,mBAAmB,CAAC,CAAC;EACnC,MAAMS,KAAK,GAAGR,eAAe,CAAC,CAAC;EAE/B,MAAMS,SAAS,GAAGd,OAAO,CAAC,MAAM;IAC5B,OAAO,IAAIE,+BAA+B,CAACS,aAAa,CAAC;EAC7D,CAAC,EAAE,CAACD,KAAK,CAACK,OAAO,EAAEC,EAAE,CAAC,CAAC;EAEvBjB,SAAS,CAAC,MAAM;IACZ,IAAI,CAACW,KAAK,CAACK,OAAO,EAAE;MAChB;IACJ;IACAD,SAAS,CAACG,IAAI,CAACP,KAAK,CAACK,OAAO,CAAC;EACjC,CAAC,EAAE,CAACL,KAAK,CAACK,OAAO,EAAEC,EAAE,CAAC,CAAC;EAEvBjB,SAAS,CAAC,MAAM;IACZ,OAAO,MAAM;MACTe,SAAS,CAACI,OAAO,CAAC,CAAC;IACvB,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMH,OAAO,GAAGD,SAAS,CAACK,EAAE,CAACJ,OAAO;EAEpC,IAAI,CAACA,OAAO,IAAI,CAACA,OAAO,CAACC,EAAE,EAAE;IACzB,OAAO,IAAI;EACf;EAEA,oBACIlB,KAAA,CAAAsB,aAAA;IACIC,KAAK,EAAEd,MAAO;IACd,mBAAiBQ,OAAO,CAACC,EAAG;IAC5B,cAAYJ,KAAM;IAClB,qBAAmBC,KAAM;IACzB,kBAAgBE,OAAO,CAACO,MAAM,EAAEN,EAAG;IACnC,oBAAkBD,OAAO,CAACO,MAAM,EAAEC;EAAK,gBAEvCzB,KAAA,CAAAsB,aAAA,CAACjB,mBAAmB;IAACY,OAAO,EAAEA;EAAQ,CAAE,CACvC,CAAC;AAEd,CAAC,CAAC","ignoreList":[]}

package/components/ElementSlot.js

@@ -2,8 +2,8 @@
 
 import React from "react";
 import { environment } from "@webiny/website-builder-sdk";
-import { LiveElementSlot } from "./LiveElementSlot";
-import { PreviewElementSlot } from "./PreviewElementSlot";
+import { LiveElementSlot } from "./LiveElementSlot.js";
+import { PreviewElementSlot } from "./PreviewElementSlot.js";
 export const ElementSlot = props => {
   const isEditing = environment.isEditing();
   if (isEditing) {

package/components/ElementSlot.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","environment","LiveElementSlot","PreviewElementSlot","ElementSlot","props","isEditing","createElement"],"sources":["ElementSlot.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport { environment } from \"@webiny/website-builder-sdk\";\nimport { LiveElementSlot } from \"./LiveElementSlot\";\nimport { PreviewElementSlot } from \"./PreviewElementSlot\";\n\nexport interface ElementSlotProps {\n    // Element that contains this slot.\n    parentId: string;\n    // Path to the array of elements within the element's data structure.\n    slot: string;\n    // IDs of the elements to render.\n    elements: string[];\n}\n\nexport const ElementSlot = (props: ElementSlotProps) => {\n    const isEditing = environment.isEditing();\n\n    if (isEditing) {\n        return <PreviewElementSlot {...props} />;\n    } else {\n        return <LiveElementSlot {...props} />;\n    }\n};\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,WAAW,QAAQ,6BAA6B;AACzD,SAASC,eAAe;AACxB,SAASC,kBAAkB;AAW3B,OAAO,MAAMC,WAAW,GAAIC,KAAuB,IAAK;EACpD,MAAMC,SAAS,GAAGL,WAAW,CAACK,SAAS,CAAC,CAAC;EAEzC,IAAIA,SAAS,EAAE;IACX,oBAAON,KAAA,CAAAO,aAAA,CAACJ,kBAAkB,EAAKE,KAAQ,CAAC;EAC5C,CAAC,MAAM;IACH,oBAAOL,KAAA,CAAAO,aAAA,CAACL,eAAe,EAAKG,KAAQ,CAAC;EACzC;AACJ,CAAC","ignoreList":[]}
+{"version":3,"names":["React","environment","LiveElementSlot","PreviewElementSlot","ElementSlot","props","isEditing","createElement"],"sources":["ElementSlot.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport { environment } from \"@webiny/website-builder-sdk\";\nimport { LiveElementSlot } from \"./LiveElementSlot.js\";\nimport { PreviewElementSlot } from \"./PreviewElementSlot.js\";\n\nexport interface ElementSlotProps {\n    // Element that contains this slot.\n    parentId: string;\n    // Path to the array of elements within the element's data structure.\n    slot: string;\n    // IDs of the elements to render.\n    elements: string[];\n}\n\nexport const ElementSlot = (props: ElementSlotProps) => {\n    const isEditing = environment.isEditing();\n\n    if (isEditing) {\n        return <PreviewElementSlot {...props} />;\n    } else {\n        return <LiveElementSlot {...props} />;\n    }\n};\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,WAAW,QAAQ,6BAA6B;AACzD,SAASC,eAAe;AACxB,SAASC,kBAAkB;AAW3B,OAAO,MAAMC,WAAW,GAAIC,KAAuB,IAAK;EACpD,MAAMC,SAAS,GAAGL,WAAW,CAACK,SAAS,CAAC,CAAC;EAEzC,IAAIA,SAAS,EAAE;IACX,oBAAON,KAAA,CAAAO,aAAA,CAACJ,kBAAkB,EAAKE,KAAQ,CAAC;EAC5C,CAAC,MAAM;IACH,oBAAOL,KAAA,CAAAO,aAAA,CAACL,eAAe,EAAKG,KAAQ,CAAC;EACzC;AACJ,CAAC","ignoreList":[]}

package/components/FragmentsProvider.d.ts

@@ -1,5 +1,14 @@
 import React from "react";
-export type DocumentFragments = Record<string, React.ReactNode>;
+type FragmentConfig = {
+    type: "fixed";
+    name: string;
+    element: React.ReactNode;
+} | {
+    type: "component";
+    component: string;
+    inputs: Record<string, any>;
+};
+export type DocumentFragments = FragmentConfig[];
 interface FragmentsProviderProps {
     fragments: DocumentFragments;
     children: React.ReactNode;

package/components/FragmentsProvider.js

@@ -7,14 +7,27 @@ export const FragmentsProvider = ({
   fragments,
   children
 }) => {
-  const fragmentNames = Object.keys(fragments);
   useEffect(() => {
     if (contentSdk.isEditing()) {
+      // Extract serializable data
+      const fragmentsData = fragments.map(fragment => {
+        if (fragment.type === "fixed") {
+          return {
+            type: "fixed",
+            name: fragment.name
+          };
+        }
+        return {
+          type: "component",
+          component: fragment.component,
+          inputs: fragment.inputs
+        };
+      });
       contentSdk.getEditingSdk().messenger.send("document.fragments", {
-        fragments: fragmentNames
+        fragments: fragmentsData
       });
     }
-  }, [fragmentNames]);
+  }, [fragments.length]);
   return /*#__PURE__*/React.createElement(FragmentsContext.Provider, {
     value: fragments
   }, children);
@@ -22,7 +35,7 @@ export const FragmentsProvider = ({
 export const useDocumentFragments = () => {
   const context = React.useContext(FragmentsContext);
   if (!context) {
-    return {};
+    return [];
   }
   return context;
 };

package/components/FragmentsProvider.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","contentSdk","FragmentsContext","createContext","undefined","FragmentsProvider","fragments","children","fragmentNames","Object","keys","isEditing","getEditingSdk","messenger","send","createElement","Provider","value","useDocumentFragments","context","useContext"],"sources":["FragmentsProvider.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect } from \"react\";\nimport { contentSdk } from \"@webiny/website-builder-sdk\";\n\nexport type DocumentFragments = Record<string, React.ReactNode>;\n\nconst FragmentsContext = React.createContext<DocumentFragments | undefined>(undefined);\n\ninterface FragmentsProviderProps {\n    fragments: DocumentFragments;\n    children: React.ReactNode;\n}\n\nexport const FragmentsProvider = ({ fragments, children }: FragmentsProviderProps) => {\n    const fragmentNames = Object.keys(fragments);\n\n    useEffect(() => {\n        if (contentSdk.isEditing()) {\n            contentSdk\n                .getEditingSdk()!\n                .messenger.send(\"document.fragments\", { fragments: fragmentNames });\n        }\n    }, [fragmentNames]);\n\n    return <FragmentsContext.Provider value={fragments}>{children}</FragmentsContext.Provider>;\n};\n\nexport const useDocumentFragments = () => {\n    const context = React.useContext(FragmentsContext);\n    if (!context) {\n        return {};\n    }\n\n    return context;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,IAAIC,SAAS,QAAQ,OAAO;AACxC,SAASC,UAAU,QAAQ,6BAA6B;AAIxD,MAAMC,gBAAgB,gBAAGH,KAAK,CAACI,aAAa,CAAgCC,SAAS,CAAC;AAOtF,OAAO,MAAMC,iBAAiB,GAAGA,CAAC;EAAEC,SAAS;EAAEC;AAAiC,CAAC,KAAK;EAClF,MAAMC,aAAa,GAAGC,MAAM,CAACC,IAAI,CAACJ,SAAS,CAAC;EAE5CN,SAAS,CAAC,MAAM;IACZ,IAAIC,UAAU,CAACU,SAAS,CAAC,CAAC,EAAE;MACxBV,UAAU,CACLW,aAAa,CAAC,CAAC,CACfC,SAAS,CAACC,IAAI,CAAC,oBAAoB,EAAE;QAAER,SAAS,EAAEE;MAAc,CAAC,CAAC;IAC3E;EACJ,CAAC,EAAE,CAACA,aAAa,CAAC,CAAC;EAEnB,oBAAOT,KAAA,CAAAgB,aAAA,CAACb,gBAAgB,CAACc,QAAQ;IAACC,KAAK,EAAEX;EAAU,GAAEC,QAAoC,CAAC;AAC9F,CAAC;AAED,OAAO,MAAMW,oBAAoB,GAAGA,CAAA,KAAM;EACtC,MAAMC,OAAO,GAAGpB,KAAK,CAACqB,UAAU,CAAClB,gBAAgB,CAAC;EAClD,IAAI,CAACiB,OAAO,EAAE;IACV,OAAO,CAAC,CAAC;EACb;EAEA,OAAOA,OAAO;AAClB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useEffect","contentSdk","FragmentsContext","createContext","undefined","FragmentsProvider","fragments","children","isEditing","fragmentsData","map","fragment","type","name","component","inputs","getEditingSdk","messenger","send","length","createElement","Provider","value","useDocumentFragments","context","useContext"],"sources":["FragmentsProvider.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect } from \"react\";\nimport { contentSdk } from \"@webiny/website-builder-sdk\";\n\ntype FragmentConfig =\n    | {\n          type: \"fixed\";\n          name: string;\n          element: React.ReactNode;\n      }\n    | { type: \"component\"; component: string; inputs: Record<string, any> };\n\nexport type DocumentFragments = FragmentConfig[];\n\nconst FragmentsContext = React.createContext<DocumentFragments | undefined>(undefined);\n\ninterface FragmentsProviderProps {\n    fragments: DocumentFragments;\n    children: React.ReactNode;\n}\n\nexport const FragmentsProvider = ({ fragments, children }: FragmentsProviderProps) => {\n    useEffect(() => {\n        if (contentSdk.isEditing()) {\n            // Extract serializable data\n            const fragmentsData = fragments.map(fragment => {\n                if (fragment.type === \"fixed\") {\n                    return {\n                        type: \"fixed\",\n                        name: fragment.name\n                    };\n                }\n\n                return {\n                    type: \"component\",\n                    component: fragment.component,\n                    inputs: fragment.inputs\n                };\n            });\n\n            contentSdk\n                .getEditingSdk()!\n                .messenger.send(\"document.fragments\", { fragments: fragmentsData });\n        }\n    }, [fragments.length]);\n\n    return <FragmentsContext.Provider value={fragments}>{children}</FragmentsContext.Provider>;\n};\n\nexport const useDocumentFragments = () => {\n    const context = React.useContext(FragmentsContext);\n    if (!context) {\n        return [];\n    }\n\n    return context;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,IAAIC,SAAS,QAAQ,OAAO;AACxC,SAASC,UAAU,QAAQ,6BAA6B;AAYxD,MAAMC,gBAAgB,gBAAGH,KAAK,CAACI,aAAa,CAAgCC,SAAS,CAAC;AAOtF,OAAO,MAAMC,iBAAiB,GAAGA,CAAC;EAAEC,SAAS;EAAEC;AAAiC,CAAC,KAAK;EAClFP,SAAS,CAAC,MAAM;IACZ,IAAIC,UAAU,CAACO,SAAS,CAAC,CAAC,EAAE;MACxB;MACA,MAAMC,aAAa,GAAGH,SAAS,CAACI,GAAG,CAACC,QAAQ,IAAI;QAC5C,IAAIA,QAAQ,CAACC,IAAI,KAAK,OAAO,EAAE;UAC3B,OAAO;YACHA,IAAI,EAAE,OAAO;YACbC,IAAI,EAAEF,QAAQ,CAACE;UACnB,CAAC;QACL;QAEA,OAAO;UACHD,IAAI,EAAE,WAAW;UACjBE,SAAS,EAAEH,QAAQ,CAACG,SAAS;UAC7BC,MAAM,EAAEJ,QAAQ,CAACI;QACrB,CAAC;MACL,CAAC,CAAC;MAEFd,UAAU,CACLe,aAAa,CAAC,CAAC,CACfC,SAAS,CAACC,IAAI,CAAC,oBAAoB,EAAE;QAAEZ,SAAS,EAAEG;MAAc,CAAC,CAAC;IAC3E;EACJ,CAAC,EAAE,CAACH,SAAS,CAACa,MAAM,CAAC,CAAC;EAEtB,oBAAOpB,KAAA,CAAAqB,aAAA,CAAClB,gBAAgB,CAACmB,QAAQ;IAACC,KAAK,EAAEhB;EAAU,GAAEC,QAAoC,CAAC;AAC9F,CAAC;AAED,OAAO,MAAMgB,oBAAoB,GAAGA,CAAA,KAAM;EACtC,MAAMC,OAAO,GAAGzB,KAAK,CAAC0B,UAAU,CAACvB,gBAAgB,CAAC;EAClD,IAAI,CAACsB,OAAO,EAAE;IACV,OAAO,EAAE;EACb;EAEA,OAAOA,OAAO;AAClB,CAAC","ignoreList":[]}

package/components/LiveElementRenderer.js

@@ -3,10 +3,10 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { contentSdk } from "@webiny/website-builder-sdk";
-import { ElementSlot } from "./ElementSlot";
-import { useViewport } from "./useViewportInfo";
-import { useBindingsForElement } from "./useBindingsForElement";
-import { useDocumentState } from "./useDocumentState";
+import { ElementSlot } from "./ElementSlot.js";
+import { useViewport } from "./useViewportInfo.js";
+import { useBindingsForElement } from "./useBindingsForElement.js";
+import { useDocumentState } from "./useDocumentState.js";
 export const LiveElementRenderer = observer(({
   element
 }) => {

package/components/LiveElementRenderer.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","useState","observer","contentSdk","ElementSlot","useViewport","useBindingsForElement","useDocumentState","LiveElementRenderer","element","viewport","breakpoint","setBreakpoint","elementBindings","id","state","onResolved","value","input","type","createElement","key","parentId","slot","name","elements","list","component","instances","resolveElement","Fragment","map","resolvedElement","index","Component","inputs","styles","manifest","props","autoApplyStyles","userElement","Object","assign","style"],"sources":["LiveElementRenderer.tsx"],"sourcesContent":["\"use client\";\nimport React, { useCallback, useEffect, useState } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport type {\n    DocumentElement,\n    DocumentElementBindings,\n    OnResolved\n} from \"@webiny/website-builder-sdk\";\nimport { contentSdk } from \"@webiny/website-builder-sdk\";\nimport { ElementSlot } from \"./ElementSlot\";\nimport { useViewport } from \"./useViewportInfo\";\nimport { useBindingsForElement } from \"./useBindingsForElement\";\nimport { useDocumentState } from \"./useDocumentState\";\n\ninterface LiveElementRendererProps {\n    element: DocumentElement;\n    bindings?: DocumentElementBindings;\n}\n\nexport const LiveElementRenderer = observer(({ element }: LiveElementRendererProps) => {\n    const viewport = useViewport();\n\n    // 1. Start breakpoint as \"desktop\" on both server and initial client render.\n    const [breakpoint, setBreakpoint] = useState<\"desktop\" | string>(\"desktop\");\n\n    // 2. Update breakpoint on the client after mount, using real viewport value.\n    useEffect(() => {\n        if (viewport.breakpoint && viewport.breakpoint !== breakpoint) {\n            setBreakpoint(viewport.breakpoint);\n        }\n    }, [viewport.breakpoint, breakpoint]);\n\n    // Bindings for current breakpoint\n    const elementBindings = useBindingsForElement(element.id, breakpoint); // pass breakpoint explicitly if possible\n    const state = useDocumentState();\n\n    const onResolved = useCallback(\n        ((value, input) => {\n            if (input.type === \"slot\") {\n                return (\n                    <ElementSlot\n                        key={element.id}\n                        parentId={element.id}\n                        slot={input.name}\n                        elements={input.list ? value : [value]}\n                    />\n                );\n            }\n            return value;\n        }) as OnResolved,\n        [element.id]\n    );\n\n    if (!element || !element.component) {\n        return null;\n    }\n\n    const instances = contentSdk.resolveElement({\n        element,\n        state,\n        elementBindings,\n        onResolved\n    });\n\n    if (!instances) {\n        return null;\n    }\n\n    return (\n        <>\n            {instances.map((resolvedElement, index) => {\n                const { component: Component, inputs, styles, manifest } = resolvedElement;\n                const props = { inputs, styles, element, breakpoint: viewport.breakpoint };\n                const autoApplyStyles = manifest.autoApplyStyles !== false;\n\n                const userElement = <Component key={element.id} {...props} />;\n\n                if (!autoApplyStyles) {\n                    return userElement;\n                }\n\n                return (\n                    <div key={index} style={styles}>\n                        {userElement}\n                    </div>\n                );\n            })}\n        </>\n    );\n});\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC/D,SAASC,QAAQ,QAAQ,iBAAiB;AAM1C,SAASC,UAAU,QAAQ,6BAA6B;AACxD,SAASC,WAAW;AACpB,SAASC,WAAW;AACpB,SAASC,qBAAqB;AAC9B,SAASC,gBAAgB;AAOzB,OAAO,MAAMC,mBAAmB,GAAGN,QAAQ,CAAC,CAAC;EAAEO;AAAkC,CAAC,KAAK;EACnF,MAAMC,QAAQ,GAAGL,WAAW,CAAC,CAAC;;EAE9B;EACA,MAAM,CAACM,UAAU,EAAEC,aAAa,CAAC,GAAGX,QAAQ,CAAqB,SAAS,CAAC;;EAE3E;EACAD,SAAS,CAAC,MAAM;IACZ,IAAIU,QAAQ,CAACC,UAAU,IAAID,QAAQ,CAACC,UAAU,KAAKA,UAAU,EAAE;MAC3DC,aAAa,CAACF,QAAQ,CAACC,UAAU,CAAC;IACtC;EACJ,CAAC,EAAE,CAACD,QAAQ,CAACC,UAAU,EAAEA,UAAU,CAAC,CAAC;;EAErC;EACA,MAAME,eAAe,GAAGP,qBAAqB,CAACG,OAAO,CAACK,EAAE,EAAEH,UAAU,CAAC,CAAC,CAAC;EACvE,MAAMI,KAAK,GAAGR,gBAAgB,CAAC,CAAC;EAEhC,MAAMS,UAAU,GAAGjB,WAAW,CACzB,CAACkB,KAAK,EAAEC,KAAK,KAAK;IACf,IAAIA,KAAK,CAACC,IAAI,KAAK,MAAM,EAAE;MACvB,oBACIrB,KAAA,CAAAsB,aAAA,CAAChB,WAAW;QACRiB,GAAG,EAAEZ,OAAO,CAACK,EAAG;QAChBQ,QAAQ,EAAEb,OAAO,CAACK,EAAG;QACrBS,IAAI,EAAEL,KAAK,CAACM,IAAK;QACjBC,QAAQ,EAAEP,KAAK,CAACQ,IAAI,GAAGT,KAAK,GAAG,CAACA,KAAK;MAAE,CAC1C,CAAC;IAEV;IACA,OAAOA,KAAK;EAChB,CAAC,EACD,CAACR,OAAO,CAACK,EAAE,CACf,CAAC;EAED,IAAI,CAACL,OAAO,IAAI,CAACA,OAAO,CAACkB,SAAS,EAAE;IAChC,OAAO,IAAI;EACf;EAEA,MAAMC,SAAS,GAAGzB,UAAU,CAAC0B,cAAc,CAAC;IACxCpB,OAAO;IACPM,KAAK;IACLF,eAAe;IACfG;EACJ,CAAC,CAAC;EAEF,IAAI,CAACY,SAAS,EAAE;IACZ,OAAO,IAAI;EACf;EAEA,oBACI9B,KAAA,CAAAsB,aAAA,CAAAtB,KAAA,CAAAgC,QAAA,QACKF,SAAS,CAACG,GAAG,CAAC,CAACC,eAAe,EAAEC,KAAK,KAAK;IACvC,MAAM;MAAEN,SAAS,EAAEO,SAAS;MAAEC,MAAM;MAAEC,MAAM;MAAEC;IAAS,CAAC,GAAGL,eAAe;IAC1E,MAAMM,KAAK,GAAG;MAAEH,MAAM;MAAEC,MAAM;MAAE3B,OAAO;MAAEE,UAAU,EAAED,QAAQ,CAACC;IAAW,CAAC;IAC1E,MAAM4B,eAAe,GAAGF,QAAQ,CAACE,eAAe,KAAK,KAAK;IAE1D,MAAMC,WAAW,gBAAG1C,KAAA,CAAAsB,aAAA,CAACc,SAAS,EAAAO,MAAA,CAAAC,MAAA;MAACrB,GAAG,EAAEZ,OAAO,CAACK;IAAG,GAAKwB,KAAK,CAAG,CAAC;IAE7D,IAAI,CAACC,eAAe,EAAE;MAClB,OAAOC,WAAW;IACtB;IAEA,oBACI1C,KAAA,CAAAsB,aAAA;MAAKC,GAAG,EAAEY,KAAM;MAACU,KAAK,EAAEP;IAAO,GAC1BI,WACA,CAAC;EAEd,CAAC,CACH,CAAC;AAEX,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useCallback","useEffect","useState","observer","contentSdk","ElementSlot","useViewport","useBindingsForElement","useDocumentState","LiveElementRenderer","element","viewport","breakpoint","setBreakpoint","elementBindings","id","state","onResolved","value","input","type","createElement","key","parentId","slot","name","elements","list","component","instances","resolveElement","Fragment","map","resolvedElement","index","Component","inputs","styles","manifest","props","autoApplyStyles","userElement","Object","assign","style"],"sources":["LiveElementRenderer.tsx"],"sourcesContent":["\"use client\";\nimport React, { useCallback, useEffect, useState } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport type {\n    DocumentElement,\n    DocumentElementBindings,\n    OnResolved\n} from \"@webiny/website-builder-sdk\";\nimport { contentSdk } from \"@webiny/website-builder-sdk\";\nimport { ElementSlot } from \"./ElementSlot.js\";\nimport { useViewport } from \"./useViewportInfo.js\";\nimport { useBindingsForElement } from \"./useBindingsForElement.js\";\nimport { useDocumentState } from \"./useDocumentState.js\";\n\ninterface LiveElementRendererProps {\n    element: DocumentElement;\n    bindings?: DocumentElementBindings;\n}\n\nexport const LiveElementRenderer = observer(({ element }: LiveElementRendererProps) => {\n    const viewport = useViewport();\n\n    // 1. Start breakpoint as \"desktop\" on both server and initial client render.\n    const [breakpoint, setBreakpoint] = useState<\"desktop\" | string>(\"desktop\");\n\n    // 2. Update breakpoint on the client after mount, using real viewport value.\n    useEffect(() => {\n        if (viewport.breakpoint && viewport.breakpoint !== breakpoint) {\n            setBreakpoint(viewport.breakpoint);\n        }\n    }, [viewport.breakpoint, breakpoint]);\n\n    // Bindings for current breakpoint\n    const elementBindings = useBindingsForElement(element.id, breakpoint); // pass breakpoint explicitly if possible\n    const state = useDocumentState();\n\n    const onResolved = useCallback(\n        ((value, input) => {\n            if (input.type === \"slot\") {\n                return (\n                    <ElementSlot\n                        key={element.id}\n                        parentId={element.id}\n                        slot={input.name}\n                        elements={input.list ? value : [value]}\n                    />\n                );\n            }\n            return value;\n        }) as OnResolved,\n        [element.id]\n    );\n\n    if (!element || !element.component) {\n        return null;\n    }\n\n    const instances = contentSdk.resolveElement({\n        element,\n        state,\n        elementBindings,\n        onResolved\n    });\n\n    if (!instances) {\n        return null;\n    }\n\n    return (\n        <>\n            {instances.map((resolvedElement, index) => {\n                const { component: Component, inputs, styles, manifest } = resolvedElement;\n                const props = { inputs, styles, element, breakpoint: viewport.breakpoint };\n                const autoApplyStyles = manifest.autoApplyStyles !== false;\n\n                const userElement = <Component key={element.id} {...props} />;\n\n                if (!autoApplyStyles) {\n                    return userElement;\n                }\n\n                return (\n                    <div key={index} style={styles}>\n                        {userElement}\n                    </div>\n                );\n            })}\n        </>\n    );\n});\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC/D,SAASC,QAAQ,QAAQ,iBAAiB;AAM1C,SAASC,UAAU,QAAQ,6BAA6B;AACxD,SAASC,WAAW;AACpB,SAASC,WAAW;AACpB,SAASC,qBAAqB;AAC9B,SAASC,gBAAgB;AAOzB,OAAO,MAAMC,mBAAmB,GAAGN,QAAQ,CAAC,CAAC;EAAEO;AAAkC,CAAC,KAAK;EACnF,MAAMC,QAAQ,GAAGL,WAAW,CAAC,CAAC;;EAE9B;EACA,MAAM,CAACM,UAAU,EAAEC,aAAa,CAAC,GAAGX,QAAQ,CAAqB,SAAS,CAAC;;EAE3E;EACAD,SAAS,CAAC,MAAM;IACZ,IAAIU,QAAQ,CAACC,UAAU,IAAID,QAAQ,CAACC,UAAU,KAAKA,UAAU,EAAE;MAC3DC,aAAa,CAACF,QAAQ,CAACC,UAAU,CAAC;IACtC;EACJ,CAAC,EAAE,CAACD,QAAQ,CAACC,UAAU,EAAEA,UAAU,CAAC,CAAC;;EAErC;EACA,MAAME,eAAe,GAAGP,qBAAqB,CAACG,OAAO,CAACK,EAAE,EAAEH,UAAU,CAAC,CAAC,CAAC;EACvE,MAAMI,KAAK,GAAGR,gBAAgB,CAAC,CAAC;EAEhC,MAAMS,UAAU,GAAGjB,WAAW,CACzB,CAACkB,KAAK,EAAEC,KAAK,KAAK;IACf,IAAIA,KAAK,CAACC,IAAI,KAAK,MAAM,EAAE;MACvB,oBACIrB,KAAA,CAAAsB,aAAA,CAAChB,WAAW;QACRiB,GAAG,EAAEZ,OAAO,CAACK,EAAG;QAChBQ,QAAQ,EAAEb,OAAO,CAACK,EAAG;QACrBS,IAAI,EAAEL,KAAK,CAACM,IAAK;QACjBC,QAAQ,EAAEP,KAAK,CAACQ,IAAI,GAAGT,KAAK,GAAG,CAACA,KAAK;MAAE,CAC1C,CAAC;IAEV;IACA,OAAOA,KAAK;EAChB,CAAC,EACD,CAACR,OAAO,CAACK,EAAE,CACf,CAAC;EAED,IAAI,CAACL,OAAO,IAAI,CAACA,OAAO,CAACkB,SAAS,EAAE;IAChC,OAAO,IAAI;EACf;EAEA,MAAMC,SAAS,GAAGzB,UAAU,CAAC0B,cAAc,CAAC;IACxCpB,OAAO;IACPM,KAAK;IACLF,eAAe;IACfG;EACJ,CAAC,CAAC;EAEF,IAAI,CAACY,SAAS,EAAE;IACZ,OAAO,IAAI;EACf;EAEA,oBACI9B,KAAA,CAAAsB,aAAA,CAAAtB,KAAA,CAAAgC,QAAA,QACKF,SAAS,CAACG,GAAG,CAAC,CAACC,eAAe,EAAEC,KAAK,KAAK;IACvC,MAAM;MAAEN,SAAS,EAAEO,SAAS;MAAEC,MAAM;MAAEC,MAAM;MAAEC;IAAS,CAAC,GAAGL,eAAe;IAC1E,MAAMM,KAAK,GAAG;MAAEH,MAAM;MAAEC,MAAM;MAAE3B,OAAO;MAAEE,UAAU,EAAED,QAAQ,CAACC;IAAW,CAAC;IAC1E,MAAM4B,eAAe,GAAGF,QAAQ,CAACE,eAAe,KAAK,KAAK;IAE1D,MAAMC,WAAW,gBAAG1C,KAAA,CAAAsB,aAAA,CAACc,SAAS,EAAAO,MAAA,CAAAC,MAAA;MAACrB,GAAG,EAAEZ,OAAO,CAACK;IAAG,GAAKwB,KAAK,CAAG,CAAC;IAE7D,IAAI,CAACC,eAAe,EAAE;MAClB,OAAOC,WAAW;IACtB;IAEA,oBACI1C,KAAA,CAAAsB,aAAA;MAAKC,GAAG,EAAEY,KAAM;MAACU,KAAK,EAAEP;IAAO,GAC1BI,WACA,CAAC;EAEd,CAAC,CACH,CAAC;AAEX,CAAC,CAAC","ignoreList":[]}

package/components/LiveElementSlot.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-import type { ElementSlotProps } from "./ElementSlot";
+import type { ElementSlotProps } from "./ElementSlot.js";
 export declare const LiveElementSlot: ({ elements }: Pick<ElementSlotProps, "elements">) => React.JSX.Element;

package/components/LiveElementSlot.js

@@ -1,9 +1,9 @@
 "use client";
 
 import React from "react";
-import { ElementRenderer } from "./ElementRenderer";
-import { ElementSlotDepthProvider, useElementSlotDepth } from "./ElementSlotDepthProvider";
-import { ElementIndexProvider } from "./ElementIndexProvider";
+import { ElementRenderer } from "./ElementRenderer.js";
+import { ElementSlotDepthProvider, useElementSlotDepth } from "./ElementSlotDepthProvider.js";
+import { ElementIndexProvider } from "./ElementIndexProvider.js";
 export const LiveElementSlot = ({
   elements = []
 }) => {

package/components/LiveElementSlot.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ElementRenderer","ElementSlotDepthProvider","useElementSlotDepth","ElementIndexProvider","LiveElementSlot","elements","depth","createElement","Fragment","map","id","index","key"],"sources":["LiveElementSlot.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport { ElementRenderer } from \"./ElementRenderer\";\nimport type { ElementSlotProps } from \"./ElementSlot\";\nimport { ElementSlotDepthProvider, useElementSlotDepth } from \"./ElementSlotDepthProvider\";\nimport { ElementIndexProvider } from \"./ElementIndexProvider\";\n\nexport const LiveElementSlot = ({ elements = [] }: Pick<ElementSlotProps, \"elements\">) => {\n    const depth = useElementSlotDepth();\n    return (\n        <>\n            <ElementSlotDepthProvider depth={depth + 1}>\n                {elements.map((id, index) => (\n                    <ElementIndexProvider key={id} index={index}>\n                        <ElementRenderer id={id} />\n                    </ElementIndexProvider>\n                ))}\n            </ElementSlotDepthProvider>\n        </>\n    );\n};\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe;AAExB,SAASC,wBAAwB,EAAEC,mBAAmB;AACtD,SAASC,oBAAoB;AAE7B,OAAO,MAAMC,eAAe,GAAGA,CAAC;EAAEC,QAAQ,GAAG;AAAuC,CAAC,KAAK;EACtF,MAAMC,KAAK,GAAGJ,mBAAmB,CAAC,CAAC;EACnC,oBACIH,KAAA,CAAAQ,aAAA,CAAAR,KAAA,CAAAS,QAAA,qBACIT,KAAA,CAAAQ,aAAA,CAACN,wBAAwB;IAACK,KAAK,EAAEA,KAAK,GAAG;EAAE,GACtCD,QAAQ,CAACI,GAAG,CAAC,CAACC,EAAE,EAAEC,KAAK,kBACpBZ,KAAA,CAAAQ,aAAA,CAACJ,oBAAoB;IAACS,GAAG,EAAEF,EAAG;IAACC,KAAK,EAAEA;EAAM,gBACxCZ,KAAA,CAAAQ,aAAA,CAACP,eAAe;IAACU,EAAE,EAAEA;EAAG,CAAE,CACR,CACzB,CACqB,CAC5B,CAAC;AAEX,CAAC","ignoreList":[]}
+{"version":3,"names":["React","ElementRenderer","ElementSlotDepthProvider","useElementSlotDepth","ElementIndexProvider","LiveElementSlot","elements","depth","createElement","Fragment","map","id","index","key"],"sources":["LiveElementSlot.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport { ElementRenderer } from \"./ElementRenderer.js\";\nimport type { ElementSlotProps } from \"./ElementSlot.js\";\nimport { ElementSlotDepthProvider, useElementSlotDepth } from \"./ElementSlotDepthProvider.js\";\nimport { ElementIndexProvider } from \"./ElementIndexProvider.js\";\n\nexport const LiveElementSlot = ({ elements = [] }: Pick<ElementSlotProps, \"elements\">) => {\n    const depth = useElementSlotDepth();\n    return (\n        <>\n            <ElementSlotDepthProvider depth={depth + 1}>\n                {elements.map((id, index) => (\n                    <ElementIndexProvider key={id} index={index}>\n                        <ElementRenderer id={id} />\n                    </ElementIndexProvider>\n                ))}\n            </ElementSlotDepthProvider>\n        </>\n    );\n};\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe;AAExB,SAASC,wBAAwB,EAAEC,mBAAmB;AACtD,SAASC,oBAAoB;AAE7B,OAAO,MAAMC,eAAe,GAAGA,CAAC;EAAEC,QAAQ,GAAG;AAAuC,CAAC,KAAK;EACtF,MAAMC,KAAK,GAAGJ,mBAAmB,CAAC,CAAC;EACnC,oBACIH,KAAA,CAAAQ,aAAA,CAAAR,KAAA,CAAAS,QAAA,qBACIT,KAAA,CAAAQ,aAAA,CAACN,wBAAwB;IAACK,KAAK,EAAEA,KAAK,GAAG;EAAE,GACtCD,QAAQ,CAACI,GAAG,CAAC,CAACC,EAAE,EAAEC,KAAK,kBACpBZ,KAAA,CAAAQ,aAAA,CAACJ,oBAAoB;IAACS,GAAG,EAAEF,EAAG;IAACC,KAAK,EAAEA;EAAM,gBACxCZ,KAAA,CAAAQ,aAAA,CAACP,eAAe;IAACU,EAAE,EAAEA;EAAG,CAAE,CACR,CACzB,CACqB,CAC5B,CAAC;AAEX,CAAC","ignoreList":[]}

package/components/PreviewElementSlot.js

@@ -1,8 +1,8 @@
 "use client";
 
 import React from "react";
-import { LiveElementSlot } from "./LiveElementSlot";
-import { useElementSlotDepth } from "./ElementSlotDepthProvider";
+import { LiveElementSlot } from "./LiveElementSlot.js";
+import { useElementSlotDepth } from "./ElementSlotDepthProvider.js";
 export const PreviewElementSlot = ({
   parentId,
   slot,

package/components/PreviewElementSlot.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","LiveElementSlot","useElementSlotDepth","PreviewElementSlot","parentId","slot","elements","depth","length","createElement","style","height","width"],"sources":["PreviewElementSlot.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport { LiveElementSlot } from \"./LiveElementSlot\";\nimport { useElementSlotDepth } from \"./ElementSlotDepthProvider\";\n\ninterface ElementSlotProps {\n    // Element that contains this slot.\n    parentId: string;\n    // Path to the array of elements within the element's data structure.\n    slot: string;\n    // IDs of the elements to render.\n    elements: string[];\n}\n\nexport const PreviewElementSlot = ({ parentId, slot, elements = [] }: ElementSlotProps) => {\n    const depth = useElementSlotDepth();\n\n    if (!elements.length) {\n        return (\n            <div\n                style={{ height: 100, width: \"100% !important\" }}\n                data-role={\"element-slot\"}\n                data-parent-id={parentId}\n                data-parent-slot={slot}\n                data-depth={depth}\n                data-empty={true}\n            />\n        );\n    }\n\n    return <LiveElementSlot elements={elements} />;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe;AACxB,SAASC,mBAAmB;AAW5B,OAAO,MAAMC,kBAAkB,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,IAAI;EAAEC,QAAQ,GAAG;AAAqB,CAAC,KAAK;EACvF,MAAMC,KAAK,GAAGL,mBAAmB,CAAC,CAAC;EAEnC,IAAI,CAACI,QAAQ,CAACE,MAAM,EAAE;IAClB,oBACIR,KAAA,CAAAS,aAAA;MACIC,KAAK,EAAE;QAAEC,MAAM,EAAE,GAAG;QAAEC,KAAK,EAAE;MAAkB,CAAE;MACjD,aAAW,cAAe;MAC1B,kBAAgBR,QAAS;MACzB,oBAAkBC,IAAK;MACvB,cAAYE,KAAM;MAClB,cAAY;IAAK,CACpB,CAAC;EAEV;EAEA,oBAAOP,KAAA,CAAAS,aAAA,CAACR,eAAe;IAACK,QAAQ,EAAEA;EAAS,CAAE,CAAC;AAClD,CAAC","ignoreList":[]}
+{"version":3,"names":["React","LiveElementSlot","useElementSlotDepth","PreviewElementSlot","parentId","slot","elements","depth","length","createElement","style","height","width"],"sources":["PreviewElementSlot.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport { LiveElementSlot } from \"./LiveElementSlot.js\";\nimport { useElementSlotDepth } from \"./ElementSlotDepthProvider.js\";\n\ninterface ElementSlotProps {\n    // Element that contains this slot.\n    parentId: string;\n    // Path to the array of elements within the element's data structure.\n    slot: string;\n    // IDs of the elements to render.\n    elements: string[];\n}\n\nexport const PreviewElementSlot = ({ parentId, slot, elements = [] }: ElementSlotProps) => {\n    const depth = useElementSlotDepth();\n\n    if (!elements.length) {\n        return (\n            <div\n                style={{ height: 100, width: \"100% !important\" }}\n                data-role={\"element-slot\"}\n                data-parent-id={parentId}\n                data-parent-slot={slot}\n                data-depth={depth}\n                data-empty={true}\n            />\n        );\n    }\n\n    return <LiveElementSlot elements={elements} />;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe;AACxB,SAASC,mBAAmB;AAW5B,OAAO,MAAMC,kBAAkB,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,IAAI;EAAEC,QAAQ,GAAG;AAAqB,CAAC,KAAK;EACvF,MAAMC,KAAK,GAAGL,mBAAmB,CAAC,CAAC;EAEnC,IAAI,CAACI,QAAQ,CAACE,MAAM,EAAE;IAClB,oBACIR,KAAA,CAAAS,aAAA;MACIC,KAAK,EAAE;QAAEC,MAAM,EAAE,GAAG;QAAEC,KAAK,EAAE;MAAkB,CAAE;MACjD,aAAW,cAAe;MAC1B,kBAAgBR,QAAS;MACzB,oBAAkBC,IAAK;MACvB,cAAYE,KAAM;MAClB,cAAY;IAAK,CACpB,CAAC;EAEV;EAEA,oBAAOP,KAAA,CAAAS,aAAA,CAACR,eAAe;IAACK,QAAQ,EAAEA;EAAS,CAAE,CAAC;AAClD,CAAC","ignoreList":[]}