@webiny/website-builder-react 6.0.0-alpha.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Webiny
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# Website Builder (React SDK)
+
+A React frontend integration SDK for Webiny Website Builder. 

package/components/ConnectToEditor.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { type Component, type Document } from "@webiny/app-website-builder/sdk";
+interface ConnectToEditorProps {
+    document: Document;
+    components: Component[];
+}
+export declare const ConnectToEditor: (props: ConnectToEditorProps) => React.JSX.Element | null;
+export {};

package/components/ConnectToEditor.js

@@ -0,0 +1,25 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { contentSdk } from "@webiny/app-website-builder/sdk";
+import { DocumentStoreProvider } from "./DocumentStoreProvider";
+import { ElementRenderer } from "./ElementRenderer";
+export const ConnectToEditor = props => {
+  const [data, setData] = useState(null);
+  useEffect(() => {
+    contentSdk.getPage(props.document.properties.path).then(document => {
+      setData(document);
+    });
+  }, []);
+  if (!data) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(DocumentStoreProvider, {
+    id: data.properties.id,
+    document: data
+  }, /*#__PURE__*/React.createElement(ElementRenderer, {
+    id: "root"
+  }));
+};
+
+//# sourceMappingURL=ConnectToEditor.js.map

package/components/ConnectToEditor.js.map

@@ -0,0 +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/app-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,iCAAiC;AAC3F,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

@@ -0,0 +1,6 @@
+import React from "react";
+export interface DocumentFragmentProps {
+    name: string;
+    children: React.ReactNode;
+}
+export declare function DocumentFragment({ children }: DocumentFragmentProps): React.JSX.Element;

package/components/DocumentFragment.js

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

package/components/DocumentFragment.js.map

@@ -0,0 +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":[]}

package/components/DocumentRenderer.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { type Component, type Document } from "@webiny/app-website-builder/sdk";
+interface DocumentRendererProps {
+    document: Document | null;
+    components: Component[];
+    children?: React.ReactNode | React.ReactNode[];
+}
+export declare const DocumentRenderer: ({ document, components, children }: DocumentRendererProps) => React.JSX.Element;
+export {};

package/components/DocumentRenderer.js

@@ -0,0 +1,47 @@
+import React from "react";
+import { contentSdk } from "@webiny/app-website-builder/sdk";
+import { ElementRenderer } from "./ElementRenderer";
+import { DocumentStoreProvider } from "./DocumentStoreProvider";
+import { ConnectToEditor } from "./ConnectToEditor";
+import { editorComponents } from "../editorComponents/index";
+import { FragmentsProvider } from "./FragmentsProvider";
+export const DocumentRenderer = ({
+  document,
+  components,
+  children
+}) => {
+  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;
+    }
+    fragments[name] = /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  });
+  if (!document) {
+    return /*#__PURE__*/React.createElement("div", {
+      "data-role": "document-renderer"
+    }, children);
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    "data-role": "document-renderer"
+  }, /*#__PURE__*/React.createElement(FragmentsProvider, {
+    fragments: fragments ?? {}
+  }, contentSdk.isEditing() ? /*#__PURE__*/React.createElement(ConnectToEditor, {
+    document: document,
+    components: components
+  }) : /*#__PURE__*/React.createElement(DocumentStoreProvider, {
+    id: document.properties.id,
+    document: document
+  }, /*#__PURE__*/React.createElement(ElementRenderer, {
+    id: "root"
+  }))));
+};
+
+//# sourceMappingURL=DocumentRenderer.js.map

package/components/DocumentRenderer.js.map

@@ -0,0 +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/app-website-builder/sdk\";\nimport { ElementRenderer } from \"./ElementRenderer\";\nimport { DocumentStoreProvider } from \"./DocumentStoreProvider\";\nimport { ConnectToEditor } from \"./ConnectToEditor\";\nimport { editorComponents } from \"../editorComponents/index\";\nimport { DocumentFragments, 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,iCAAiC;AAC3F,SAASC,eAAe;AACxB,SAASC,qBAAqB;AAC9B,SAASC,eAAe;AACxB,SAASC,gBAAgB;AACzB,SAA4BC,iBAAiB;AAQ7C,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":[]}

package/components/DocumentStoreProvider.d.ts

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

package/components/DocumentStoreProvider.js

@@ -0,0 +1,27 @@
+"use client";
+
+import React, { useContext, useMemo } from "react";
+import { documentStoreManager } from "@webiny/app-website-builder/sdk";
+const DocumentStoreContext = /*#__PURE__*/React.createContext(undefined);
+export const DocumentStoreProvider = ({
+  id,
+  document,
+  children
+}) => {
+  const store = useMemo(() => documentStoreManager.getStore(id), [id]);
+  if (document) {
+    store.setDocument(document);
+  }
+  return /*#__PURE__*/React.createElement(DocumentStoreContext.Provider, {
+    value: store
+  }, children);
+};
+export const useDocumentStore = () => {
+  const store = useContext(DocumentStoreContext);
+  if (!store) {
+    throw new Error("useDocumentStore must be used within a DocumentStoreProvider");
+  }
+  return store;
+};
+
+//# sourceMappingURL=DocumentStoreProvider.js.map

package/components/DocumentStoreProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useContext","useMemo","documentStoreManager","DocumentStoreContext","createContext","undefined","DocumentStoreProvider","id","document","children","store","getStore","setDocument","createElement","Provider","value","useDocumentStore","Error"],"sources":["DocumentStoreProvider.tsx"],"sourcesContent":["\"use client\";\nimport React, { useContext, useEffect, useMemo } from \"react\";\nimport {\n    type Document,\n    documentStoreManager,\n    DocumentStore\n} from \"@webiny/app-website-builder/sdk\";\n\nconst DocumentStoreContext = React.createContext<DocumentStore | undefined>(undefined);\n\nexport const DocumentStoreProvider = ({\n    id,\n    document,\n    children\n}: {\n    id: string;\n    document?: Document;\n    children: React.ReactNode;\n}) => {\n    const store = useMemo(() => documentStoreManager.getStore(id), [id]);\n\n    if (document) {\n        store.setDocument(document);\n    }\n\n    return <DocumentStoreContext.Provider value={store}>{children}</DocumentStoreContext.Provider>;\n};\n\nexport const useDocumentStore = (): DocumentStore => {\n    const store = useContext(DocumentStoreContext);\n    if (!store) {\n        throw new Error(\"useDocumentStore must be used within a DocumentStoreProvider\");\n    }\n    return store;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,IAAIC,UAAU,EAAaC,OAAO,QAAQ,OAAO;AAC7D,SAEIC,oBAAoB,QAEjB,iCAAiC;AAExC,MAAMC,oBAAoB,gBAAGJ,KAAK,CAACK,aAAa,CAA4BC,SAAS,CAAC;AAEtF,OAAO,MAAMC,qBAAqB,GAAGA,CAAC;EAClCC,EAAE;EACFC,QAAQ;EACRC;AAKJ,CAAC,KAAK;EACF,MAAMC,KAAK,GAAGT,OAAO,CAAC,MAAMC,oBAAoB,CAACS,QAAQ,CAACJ,EAAE,CAAC,EAAE,CAACA,EAAE,CAAC,CAAC;EAEpE,IAAIC,QAAQ,EAAE;IACVE,KAAK,CAACE,WAAW,CAACJ,QAAQ,CAAC;EAC/B;EAEA,oBAAOT,KAAA,CAAAc,aAAA,CAACV,oBAAoB,CAACW,QAAQ;IAACC,KAAK,EAAEL;EAAM,GAAED,QAAwC,CAAC;AAClG,CAAC;AAED,OAAO,MAAMO,gBAAgB,GAAGA,CAAA,KAAqB;EACjD,MAAMN,KAAK,GAAGV,UAAU,CAACG,oBAAoB,CAAC;EAC9C,IAAI,CAACO,KAAK,EAAE;IACR,MAAM,IAAIO,KAAK,CAAC,8DAA8D,CAAC;EACnF;EACA,OAAOP,KAAK;AAChB,CAAC","ignoreList":[]}

package/components/EditingElementRenderer/EditingElementRenderer.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { type DocumentElement } from "@webiny/app-website-builder/sdk";
+interface PreviewElementRendererProps {
+    element: DocumentElement;
+}
+export declare const EditingElementRenderer: ((props: PreviewElementRendererProps) => React.JSX.Element | null) & {
+    displayName: string;
+};
+export {};

package/components/EditingElementRenderer/EditingElementRenderer.js

@@ -0,0 +1,47 @@
+"use client";
+
+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";
+const styles = {
+  display: "contents"
+};
+export const EditingElementRenderer = observer(props => {
+  const documentStore = useDocumentStore();
+  const depth = useElementSlotDepth();
+  const index = useElementIndex();
+  const presenter = useMemo(() => {
+    return new EditingElementRendererPresenter(documentStore);
+  }, [props.element?.id]);
+  useEffect(() => {
+    if (!props.element) {
+      return;
+    }
+    presenter.init(props.element);
+  }, [props.element?.id]);
+  useEffect(() => {
+    return () => {
+      presenter.dispose();
+    };
+  }, []);
+  const element = presenter.vm.element;
+  if (!element || !element.id) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    style: styles,
+    "data-element-id": element.id,
+    "data-depth": depth,
+    "data-parent-index": index,
+    "data-parent-id": element.parent?.id,
+    "data-parent-slot": element.parent?.slot
+  }, /*#__PURE__*/React.createElement(LiveElementRenderer, {
+    element: element
+  }));
+});
+
+//# sourceMappingURL=EditingElementRenderer.js.map

package/components/EditingElementRenderer/EditingElementRenderer.js.map

@@ -0,0 +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/app-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":[]}

package/components/EditingElementRenderer/EditingElementRenderer.presenter.d.ts

@@ -0,0 +1,14 @@
+import { DocumentStore, type DocumentElement } from "@webiny/app-website-builder/sdk";
+export declare class EditingElementRendererPresenter {
+    private element;
+    private listeners;
+    private documentStore;
+    private readonly editingSdk;
+    constructor(documentStore: DocumentStore);
+    get vm(): {
+        element: DocumentElement;
+    };
+    init(element: DocumentElement): void;
+    dispose(): void;
+    private setupPreview;
+}

package/components/EditingElementRenderer/EditingElementRenderer.presenter.js

@@ -0,0 +1,43 @@
+"use client";
+
+import { makeAutoObservable, observable, toJS } from "mobx";
+import { contentSdk, jsonPatch } from "@webiny/app-website-builder/sdk";
+export class EditingElementRendererPresenter {
+  listeners = [];
+  constructor(documentStore) {
+    this.documentStore = documentStore;
+    this.element = observable({});
+    this.editingSdk = contentSdk.getEditingSdk();
+    makeAutoObservable(this);
+  }
+  get vm() {
+    return {
+      element: toJS(this.element)
+    };
+  }
+  init(element) {
+    this.element = element;
+    this.setupPreview();
+  }
+  dispose() {
+    this.listeners.forEach(fn => fn());
+  }
+  setupPreview() {
+    const element = this.element;
+    if (!element) {
+      return;
+    }
+    const {
+      id
+    } = element;
+    if (this.editingSdk) {
+      this.listeners.push(this.editingSdk.messenger.on(`element.patch.${id}`, patch => {
+        this.documentStore.updateDocument(document => {
+          jsonPatch.applyPatch(document.bindings[id], patch, false, true);
+        });
+      }));
+    }
+  }
+}
+
+//# sourceMappingURL=EditingElementRenderer.presenter.js.map

package/components/EditingElementRenderer/EditingElementRenderer.presenter.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["makeAutoObservable","observable","toJS","contentSdk","jsonPatch","EditingElementRendererPresenter","listeners","constructor","documentStore","element","editingSdk","getEditingSdk","vm","init","setupPreview","dispose","forEach","fn","id","push","messenger","on","patch","updateDocument","document","applyPatch","bindings"],"sources":["EditingElementRenderer.presenter.ts"],"sourcesContent":["\"use client\";\nimport { makeAutoObservable, observable, toJS } from \"mobx\";\nimport {\n    contentSdk,\n    jsonPatch,\n    DocumentStore,\n    type EditingSdk,\n    type DocumentElement\n} from \"@webiny/app-website-builder/sdk\";\n\nexport class EditingElementRendererPresenter {\n    private element: DocumentElement;\n    private listeners: Array<() => void> = [];\n    private documentStore: DocumentStore;\n    private readonly editingSdk: EditingSdk | undefined;\n\n    constructor(documentStore: DocumentStore) {\n        this.documentStore = documentStore;\n        this.element = observable({}) as DocumentElement;\n        this.editingSdk = contentSdk.getEditingSdk();\n        makeAutoObservable(this);\n    }\n\n    get vm() {\n        return {\n            element: toJS(this.element)\n        };\n    }\n\n    init(element: DocumentElement) {\n        this.element = element;\n        this.setupPreview();\n    }\n\n    dispose() {\n        this.listeners.forEach(fn => fn());\n    }\n\n    private setupPreview() {\n        const element = this.element;\n\n        if (!element) {\n            return;\n        }\n\n        const { id } = element;\n\n        if (this.editingSdk) {\n            this.listeners.push(\n                this.editingSdk.messenger.on(`element.patch.${id}`, patch => {\n                    this.documentStore.updateDocument(document => {\n                        jsonPatch.applyPatch(document.bindings[id], patch, false, true);\n                    });\n                })\n            );\n        }\n    }\n}\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,kBAAkB,EAAEC,UAAU,EAAEC,IAAI,QAAQ,MAAM;AAC3D,SACIC,UAAU,EACVC,SAAS,QAIN,iCAAiC;AAExC,OAAO,MAAMC,+BAA+B,CAAC;EAEjCC,SAAS,GAAsB,EAAE;EAIzCC,WAAWA,CAACC,aAA4B,EAAE;IACtC,IAAI,CAACA,aAAa,GAAGA,aAAa;IAClC,IAAI,CAACC,OAAO,GAAGR,UAAU,CAAC,CAAC,CAAC,CAAoB;IAChD,IAAI,CAACS,UAAU,GAAGP,UAAU,CAACQ,aAAa,CAAC,CAAC;IAC5CX,kBAAkB,CAAC,IAAI,CAAC;EAC5B;EAEA,IAAIY,EAAEA,CAAA,EAAG;IACL,OAAO;MACHH,OAAO,EAAEP,IAAI,CAAC,IAAI,CAACO,OAAO;IAC9B,CAAC;EACL;EAEAI,IAAIA,CAACJ,OAAwB,EAAE;IAC3B,IAAI,CAACA,OAAO,GAAGA,OAAO;IACtB,IAAI,CAACK,YAAY,CAAC,CAAC;EACvB;EAEAC,OAAOA,CAAA,EAAG;IACN,IAAI,CAACT,SAAS,CAACU,OAAO,CAACC,EAAE,IAAIA,EAAE,CAAC,CAAC,CAAC;EACtC;EAEQH,YAAYA,CAAA,EAAG;IACnB,MAAML,OAAO,GAAG,IAAI,CAACA,OAAO;IAE5B,IAAI,CAACA,OAAO,EAAE;MACV;IACJ;IAEA,MAAM;MAAES;IAAG,CAAC,GAAGT,OAAO;IAEtB,IAAI,IAAI,CAACC,UAAU,EAAE;MACjB,IAAI,CAACJ,SAAS,CAACa,IAAI,CACf,IAAI,CAACT,UAAU,CAACU,SAAS,CAACC,EAAE,CAAC,iBAAiBH,EAAE,EAAE,EAAEI,KAAK,IAAI;QACzD,IAAI,CAACd,aAAa,CAACe,cAAc,CAACC,QAAQ,IAAI;UAC1CpB,SAAS,CAACqB,UAAU,CAACD,QAAQ,CAACE,QAAQ,CAACR,EAAE,CAAC,EAAEI,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC;QACnE,CAAC,CAAC;MACN,CAAC,CACL,CAAC;IACL;EACJ;AACJ","ignoreList":[]}

package/components/EditingElementRenderer/index.d.ts

@@ -0,0 +1 @@
+export * from "./EditingElementRenderer.js";

package/components/EditingElementRenderer/index.js

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

package/components/EditingElementRenderer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./EditingElementRenderer.js\";\n"],"mappings":"AAAA","ignoreList":[]}

package/components/ElementIndexProvider.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface ElementIndexProviderProps {
+    index: number;
+    children: React.ReactNode;
+}
+export declare const ElementIndexProvider: ({ children, index }: ElementIndexProviderProps) => React.JSX.Element;
+export declare const useElementIndex: () => number;
+export {};

package/components/ElementIndexProvider.js

@@ -0,0 +1,18 @@
+"use client";
+
+import React from "react";
+const ElementIndexContext = /*#__PURE__*/React.createContext(0);
+export const ElementIndexProvider = ({
+  children,
+  index
+}) => {
+  return /*#__PURE__*/React.createElement(ElementIndexContext.Provider, {
+    value: index
+  }, children);
+};
+export const useElementIndex = () => {
+  const context = React.useContext(ElementIndexContext);
+  return context ?? 0;
+};
+
+//# sourceMappingURL=ElementIndexProvider.js.map

package/components/ElementIndexProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","ElementIndexContext","createContext","ElementIndexProvider","children","index","createElement","Provider","value","useElementIndex","context","useContext"],"sources":["ElementIndexProvider.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\n\nconst ElementIndexContext = React.createContext<number>(0);\n\ninterface ElementIndexProviderProps {\n    index: number;\n    children: React.ReactNode;\n}\n\nexport const ElementIndexProvider = ({ children, index }: ElementIndexProviderProps) => {\n    return <ElementIndexContext.Provider value={index}>{children}</ElementIndexContext.Provider>;\n};\n\nexport const useElementIndex = () => {\n    const context = React.useContext(ElementIndexContext);\n\n    return context ?? 0;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,mBAAmB,gBAAGD,KAAK,CAACE,aAAa,CAAS,CAAC,CAAC;AAO1D,OAAO,MAAMC,oBAAoB,GAAGA,CAAC;EAAEC,QAAQ;EAAEC;AAAiC,CAAC,KAAK;EACpF,oBAAOL,KAAA,CAAAM,aAAA,CAACL,mBAAmB,CAACM,QAAQ;IAACC,KAAK,EAAEH;EAAM,GAAED,QAAuC,CAAC;AAChG,CAAC;AAED,OAAO,MAAMK,eAAe,GAAGA,CAAA,KAAM;EACjC,MAAMC,OAAO,GAAGV,KAAK,CAACW,UAAU,CAACV,mBAAmB,CAAC;EAErD,OAAOS,OAAO,IAAI,CAAC;AACvB,CAAC","ignoreList":[]}

package/components/ElementRenderer.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface ElementRendererProps {
+    id: string;
+}
+export declare const ElementRenderer: ((props: ElementRendererProps) => React.JSX.Element | null) & {
+    displayName: string;
+};
+export {};

package/components/ElementRenderer.js

@@ -0,0 +1,27 @@
+"use client";
+
+import React from "react";
+import { observer } from "mobx-react-lite";
+import { environment } from "@webiny/app-website-builder/sdk";
+import { EditingElementRenderer } from "./EditingElementRenderer/EditingElementRenderer.js";
+import { LiveElementRenderer } from "./LiveElementRenderer.js";
+import { useDocumentStore } from "./DocumentStoreProvider.js";
+export const ElementRenderer = observer(props => {
+  const documentStore = useDocumentStore();
+  const isEditing = environment.isEditing();
+  const element = documentStore.getElement(props.id);
+  if (!element) {
+    return null;
+  }
+  if (isEditing) {
+    return /*#__PURE__*/React.createElement(EditingElementRenderer, {
+      element: element
+    });
+  } else {
+    return /*#__PURE__*/React.createElement(LiveElementRenderer, {
+      element: element
+    });
+  }
+});
+
+//# sourceMappingURL=ElementRenderer.js.map

package/components/ElementRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","observer","environment","EditingElementRenderer","LiveElementRenderer","useDocumentStore","ElementRenderer","props","documentStore","isEditing","element","getElement","id","createElement"],"sources":["ElementRenderer.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { environment } from \"@webiny/app-website-builder/sdk\";\nimport { EditingElementRenderer } from \"./EditingElementRenderer/EditingElementRenderer.js\";\nimport { LiveElementRenderer } from \"./LiveElementRenderer.js\";\nimport { useDocumentStore } from \"./DocumentStoreProvider.js\";\n\ninterface ElementRendererProps {\n    id: string;\n}\n\nexport const ElementRenderer = observer((props: ElementRendererProps) => {\n    const documentStore = useDocumentStore();\n    const isEditing = environment.isEditing();\n    const element = documentStore.getElement(props.id);\n\n    if (!element) {\n        return null;\n    }\n\n    if (isEditing) {\n        return <EditingElementRenderer element={element} />;\n    } else {\n        return <LiveElementRenderer element={element} />;\n    }\n});\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,WAAW,QAAQ,iCAAiC;AAC7D,SAASC,sBAAsB;AAC/B,SAASC,mBAAmB;AAC5B,SAASC,gBAAgB;AAMzB,OAAO,MAAMC,eAAe,GAAGL,QAAQ,CAAEM,KAA2B,IAAK;EACrE,MAAMC,aAAa,GAAGH,gBAAgB,CAAC,CAAC;EACxC,MAAMI,SAAS,GAAGP,WAAW,CAACO,SAAS,CAAC,CAAC;EACzC,MAAMC,OAAO,GAAGF,aAAa,CAACG,UAAU,CAACJ,KAAK,CAACK,EAAE,CAAC;EAElD,IAAI,CAACF,OAAO,EAAE;IACV,OAAO,IAAI;EACf;EAEA,IAAID,SAAS,EAAE;IACX,oBAAOT,KAAA,CAAAa,aAAA,CAACV,sBAAsB;MAACO,OAAO,EAAEA;IAAQ,CAAE,CAAC;EACvD,CAAC,MAAM;IACH,oBAAOV,KAAA,CAAAa,aAAA,CAACT,mBAAmB;MAACM,OAAO,EAAEA;IAAQ,CAAE,CAAC;EACpD;AACJ,CAAC,CAAC","ignoreList":[]}

package/components/ElementSlot.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface ElementSlotProps {
+    parentId: string;
+    slot: string;
+    elements: string[];
+}
+export declare const ElementSlot: (props: ElementSlotProps) => React.JSX.Element;

package/components/ElementSlot.js

@@ -0,0 +1,16 @@
+"use client";
+
+import React from "react";
+import { environment } from "@webiny/app-website-builder/sdk";
+import { LiveElementSlot } from "./LiveElementSlot";
+import { PreviewElementSlot } from "./PreviewElementSlot";
+export const ElementSlot = props => {
+  const isEditing = environment.isEditing();
+  if (isEditing) {
+    return /*#__PURE__*/React.createElement(PreviewElementSlot, props);
+  } else {
+    return /*#__PURE__*/React.createElement(LiveElementSlot, props);
+  }
+};
+
+//# sourceMappingURL=ElementSlot.js.map

package/components/ElementSlot.js.map

@@ -0,0 +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/app-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,iCAAiC;AAC7D,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/ElementSlotDepthProvider.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface ElementSlotDepthProviderProps {
+    depth: number;
+    children: React.ReactNode;
+}
+export declare const ElementSlotDepthProvider: ({ children, depth }: ElementSlotDepthProviderProps) => React.JSX.Element;
+export declare const useElementSlotDepth: () => number;
+export {};

package/components/ElementSlotDepthProvider.js

@@ -0,0 +1,18 @@
+"use client";
+
+import React from "react";
+const ElementSlotDepthContext = /*#__PURE__*/React.createContext(0);
+export const ElementSlotDepthProvider = ({
+  children,
+  depth
+}) => {
+  return /*#__PURE__*/React.createElement(ElementSlotDepthContext.Provider, {
+    value: depth
+  }, children);
+};
+export const useElementSlotDepth = () => {
+  const context = React.useContext(ElementSlotDepthContext);
+  return context ?? 0;
+};
+
+//# sourceMappingURL=ElementSlotDepthProvider.js.map

package/components/ElementSlotDepthProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","ElementSlotDepthContext","createContext","ElementSlotDepthProvider","children","depth","createElement","Provider","value","useElementSlotDepth","context","useContext"],"sources":["ElementSlotDepthProvider.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\n\nconst ElementSlotDepthContext = React.createContext<number>(0);\n\ninterface ElementSlotDepthProviderProps {\n    depth: number;\n    children: React.ReactNode;\n}\n\nexport const ElementSlotDepthProvider = ({ children, depth }: ElementSlotDepthProviderProps) => {\n    return (\n        <ElementSlotDepthContext.Provider value={depth}>\n            {children}\n        </ElementSlotDepthContext.Provider>\n    );\n};\n\nexport const useElementSlotDepth = () => {\n    const context = React.useContext(ElementSlotDepthContext);\n\n    return context ?? 0;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,uBAAuB,gBAAGD,KAAK,CAACE,aAAa,CAAS,CAAC,CAAC;AAO9D,OAAO,MAAMC,wBAAwB,GAAGA,CAAC;EAAEC,QAAQ;EAAEC;AAAqC,CAAC,KAAK;EAC5F,oBACIL,KAAA,CAAAM,aAAA,CAACL,uBAAuB,CAACM,QAAQ;IAACC,KAAK,EAAEH;EAAM,GAC1CD,QAC6B,CAAC;AAE3C,CAAC;AAED,OAAO,MAAMK,mBAAmB,GAAGA,CAAA,KAAM;EACrC,MAAMC,OAAO,GAAGV,KAAK,CAACW,UAAU,CAACV,uBAAuB,CAAC;EAEzD,OAAOS,OAAO,IAAI,CAAC;AACvB,CAAC","ignoreList":[]}

package/components/FragmentsProvider.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export type DocumentFragments = Record<string, React.ReactNode>;
+interface FragmentsProviderProps {
+    fragments: DocumentFragments;
+    children: React.ReactNode;
+}
+export declare const FragmentsProvider: ({ fragments, children }: FragmentsProviderProps) => React.JSX.Element;
+export declare const useDocumentFragments: () => DocumentFragments;
+export {};

package/components/FragmentsProvider.js

@@ -0,0 +1,30 @@
+"use client";
+
+import React, { useEffect } from "react";
+import { contentSdk } from "@webiny/app-website-builder/sdk";
+const FragmentsContext = /*#__PURE__*/React.createContext(undefined);
+export const FragmentsProvider = ({
+  fragments,
+  children
+}) => {
+  const fragmentNames = Object.keys(fragments);
+  useEffect(() => {
+    if (contentSdk.isEditing()) {
+      contentSdk.getEditingSdk().messenger.send("document.fragments", {
+        fragments: fragmentNames
+      });
+    }
+  }, [fragmentNames]);
+  return /*#__PURE__*/React.createElement(FragmentsContext.Provider, {
+    value: fragments
+  }, children);
+};
+export const useDocumentFragments = () => {
+  const context = React.useContext(FragmentsContext);
+  if (!context) {
+    return {};
+  }
+  return context;
+};
+
+//# sourceMappingURL=FragmentsProvider.js.map

package/components/FragmentsProvider.js.map

@@ -0,0 +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/app-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,iCAAiC;AAI5D,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":[]}

package/components/LiveElementRenderer.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { DocumentElement, DocumentElementBindings } from "@webiny/app-website-builder/sdk";
+interface LiveElementRendererProps {
+    element: DocumentElement;
+    bindings?: DocumentElementBindings;
+}
+export declare const LiveElementRenderer: (({ element }: LiveElementRendererProps) => React.JSX.Element | null) & {
+    displayName: string;
+};
+export {};