@webiny/website-builder-vue 6.4.0-beta.4 → 6.4.0-beta.6

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,11 @@
+# @webiny/website-builder-vue
+
+> [!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.d.ts

@@ -0,0 +1,35 @@
+import { type PropType } from "vue";
+import { type Component, type Document } from "@webiny/website-builder-sdk";
+/**
+ * Used in editing mode: fetches a fresh copy of the page from the SDK,
+ * then mounts a DocumentStoreProvider + ElementRenderer for it.
+ *
+ * `document` is optional — when omitted (e.g. the live page is a draft not
+ * yet published), the current URL pathname is used as the page path so the
+ * editing SDK can still receive the document via the editor's postMessage.
+ *
+ * Equivalent of the React ConnectToEditor component.
+ */
+export declare const ConnectToEditor: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    document: {
+        type: PropType<Document | undefined>;
+        default: undefined;
+    };
+    components: {
+        type: PropType<Component[]>;
+        required: true;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    document: {
+        type: PropType<Document | undefined>;
+        default: undefined;
+    };
+    components: {
+        type: PropType<Component[]>;
+        required: true;
+    };
+}>> & Readonly<{}>, {
+    document: Document | undefined;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/components/ConnectToEditor.js

@@ -0,0 +1,40 @@
+import { defineComponent, h, onMounted, ref } from "vue";
+import { contentSdk } from "@webiny/website-builder-sdk";
+import { DocumentStoreProvider } from "./DocumentStoreProvider.js";
+import { ElementRenderer } from "./ElementRenderer.js";
+const ConnectToEditor = defineComponent({
+    name: "WebinyConnectToEditor",
+    props: {
+        document: {
+            type: Object,
+            default: void 0
+        },
+        components: {
+            type: Array,
+            required: true
+        }
+    },
+    setup (props) {
+        const data = ref(null);
+        onMounted(()=>{
+            const path = props.document?.properties?.path ?? window.location.pathname;
+            contentSdk.getPage(path).then((doc)=>{
+                data.value = doc;
+            });
+        });
+        return ()=>{
+            if (!data.value) return null;
+            return h(DocumentStoreProvider, {
+                id: data.value.properties.id,
+                document: data.value
+            }, {
+                default: ()=>h(ElementRenderer, {
+                        id: "root"
+                    })
+            });
+        };
+    }
+});
+export { ConnectToEditor };
+
+//# sourceMappingURL=ConnectToEditor.js.map

package/components/ConnectToEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/ConnectToEditor.js","sources":["../../src/components/ConnectToEditor.ts"],"sourcesContent":["import { defineComponent, ref, onMounted, h, type PropType } from \"vue\";\nimport { contentSdk, type Component, type Document } from \"@webiny/website-builder-sdk\";\nimport { DocumentStoreProvider } from \"./DocumentStoreProvider.js\";\nimport { ElementRenderer } from \"./ElementRenderer.js\";\n\n/**\n * Used in editing mode: fetches a fresh copy of the page from the SDK,\n * then mounts a DocumentStoreProvider + ElementRenderer for it.\n *\n * `document` is optional — when omitted (e.g. the live page is a draft not\n * yet published), the current URL pathname is used as the page path so the\n * editing SDK can still receive the document via the editor's postMessage.\n *\n * Equivalent of the React ConnectToEditor component.\n */\nexport const ConnectToEditor = defineComponent({\n    name: \"WebinyConnectToEditor\",\n\n    props: {\n        document: { type: Object as PropType<Document | undefined>, default: undefined },\n        components: { type: Array as PropType<Component[]>, required: true }\n    },\n\n    setup(props) {\n        const data = ref<Document | null>(null);\n\n        onMounted(() => {\n            const path = props.document?.properties?.path ?? window.location.pathname;\n            contentSdk.getPage(path).then(doc => {\n                data.value = doc;\n            });\n        });\n\n        return () => {\n            if (!data.value) {\n                return null;\n            }\n\n            return h(\n                DocumentStoreProvider,\n                { id: data.value.properties.id, document: data.value },\n                { default: () => h(ElementRenderer, { id: \"root\" }) }\n            );\n        };\n    }\n});\n"],"names":["ConnectToEditor","defineComponent","Object","undefined","Array","props","data","ref","onMounted","path","window","contentSdk","doc","h","DocumentStoreProvider","ElementRenderer"],"mappings":";;;;AAeO,MAAMA,kBAAkBC,gBAAgB;IAC3C,MAAM;IAEN,OAAO;QACH,UAAU;YAAE,MAAMC;YAA0C,SAASC;QAAU;QAC/E,YAAY;YAAE,MAAMC;YAAgC,UAAU;QAAK;IACvE;IAEA,OAAMC,KAAK;QACP,MAAMC,OAAOC,IAAqB;QAElCC,UAAU;YACN,MAAMC,OAAOJ,MAAM,QAAQ,EAAE,YAAY,QAAQK,OAAO,QAAQ,CAAC,QAAQ;YACzEC,WAAW,OAAO,CAACF,MAAM,IAAI,CAACG,CAAAA;gBAC1BN,KAAK,KAAK,GAAGM;YACjB;QACJ;QAEA,OAAO;YACH,IAAI,CAACN,KAAK,KAAK,EACX,OAAO;YAGX,OAAOO,EACHC,uBACA;gBAAE,IAAIR,KAAK,KAAK,CAAC,UAAU,CAAC,EAAE;gBAAE,UAAUA,KAAK,KAAK;YAAC,GACrD;gBAAE,SAAS,IAAMO,EAAEE,iBAAiB;wBAAE,IAAI;oBAAO;YAAG;QAE5D;IACJ;AACJ"}

package/components/DocumentFragment.d.ts

@@ -0,0 +1,67 @@
+import { type PropType } from "vue";
+import type { Slot } from "vue";
+/**
+ * Declarative fragment marker — analogous to the React DocumentFragment
+ * component but implemented differently in Vue.
+ *
+ * Usage inside a <DocumentRenderer>:
+ *
+ * ```vue
+ * <DocumentRenderer :document="doc" :components="comps">
+ *   <!-- Inject a Vue subtree into the 'header' named fragment slot -->
+ *   <template #fragment:header>
+ *     <MySiteHeader />
+ *   </template>
+ * </DocumentRenderer>
+ * ```
+ *
+ * For component-type fragments pass a `fragments` prop directly to
+ * DocumentRenderer instead:
+ * ```ts
+ * const fragments = [{ type: "component", component: "Webiny/MyNav", inputs: {} }];
+ * ```
+ */
+export type DocumentFragmentProps = {
+    name: string;
+    element: Slot;
+    component?: never;
+    inputs?: never;
+} | {
+    component: string;
+    inputs?: Record<string, unknown>;
+    name?: never;
+    element?: never;
+};
+export declare const DocumentFragment: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    name: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    component: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    inputs: {
+        type: PropType<Record<string, unknown>>;
+        default: undefined;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    name: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    component: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    inputs: {
+        type: PropType<Record<string, unknown>>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    inputs: Record<string, unknown>;
+    name: string;
+    component: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/components/DocumentFragment.js

@@ -0,0 +1,24 @@
+import { defineComponent } from "vue";
+const DocumentFragment = defineComponent({
+    name: "WebinyDocumentFragment",
+    props: {
+        name: {
+            type: String,
+            default: void 0
+        },
+        component: {
+            type: String,
+            default: void 0
+        },
+        inputs: {
+            type: Object,
+            default: void 0
+        }
+    },
+    setup (_, { slots }) {
+        return ()=>slots.default?.() ?? null;
+    }
+});
+export { DocumentFragment };
+
+//# sourceMappingURL=DocumentFragment.js.map

package/components/DocumentFragment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/DocumentFragment.js","sources":["../../src/components/DocumentFragment.ts"],"sourcesContent":["import { defineComponent, type PropType } from \"vue\";\nimport type { Slot } from \"vue\";\n\n/**\n * Declarative fragment marker — analogous to the React DocumentFragment\n * component but implemented differently in Vue.\n *\n * Usage inside a <DocumentRenderer>:\n *\n * ```vue\n * <DocumentRenderer :document=\"doc\" :components=\"comps\">\n *   <!-- Inject a Vue subtree into the 'header' named fragment slot -->\n *   <template #fragment:header>\n *     <MySiteHeader />\n *   </template>\n * </DocumentRenderer>\n * ```\n *\n * For component-type fragments pass a `fragments` prop directly to\n * DocumentRenderer instead:\n * ```ts\n * const fragments = [{ type: \"component\", component: \"Webiny/MyNav\", inputs: {} }];\n * ```\n */\nexport type DocumentFragmentProps =\n    | { name: string; element: Slot; component?: never; inputs?: never }\n    | { component: string; inputs?: Record<string, unknown>; name?: never; element?: never };\n\nexport const DocumentFragment = defineComponent({\n    name: \"WebinyDocumentFragment\",\n    props: {\n        name: { type: String, default: undefined },\n        component: { type: String, default: undefined },\n        inputs: {\n            type: Object as PropType<Record<string, unknown>>,\n            default: undefined\n        }\n    },\n    setup(_, { slots }) {\n        // If used directly in a template, render the default slot.\n        return () => slots.default?.() ?? null;\n    }\n});\n"],"names":["DocumentFragment","defineComponent","String","undefined","Object","_","slots"],"mappings":";AA4BO,MAAMA,mBAAmBC,gBAAgB;IAC5C,MAAM;IACN,OAAO;QACH,MAAM;YAAE,MAAMC;YAAQ,SAASC;QAAU;QACzC,WAAW;YAAE,MAAMD;YAAQ,SAASC;QAAU;QAC9C,QAAQ;YACJ,MAAMC;YACN,SAASD;QACb;IACJ;IACA,OAAME,CAAC,EAAE,EAAEC,KAAK,EAAE;QAEd,OAAO,IAAMA,MAAM,OAAO,QAAQ;IACtC;AACJ"}

package/components/DocumentRenderer.d.ts

@@ -0,0 +1,59 @@
+import { type PropType } from "vue";
+import { type Component, type Document } from "@webiny/website-builder-sdk";
+import { type DocumentFragmentConfig } from "./FragmentsProvider.js";
+/**
+ * Top-level rendering component. Accepts a Webiny document and a list of
+ * custom components, then renders the full page tree.
+ *
+ * **Named-slot fragments**
+ *
+ * Inject app-level Vue subtrees into named fragment slots:
+ * ```vue
+ * <DocumentRenderer :document="page.document" :components="myComps">
+ *   <template #fragment:header><MySiteHeader /></template>
+ *   <template #fragment:footer><MySiteFooter /></template>
+ * </DocumentRenderer>
+ * ```
+ *
+ * **Component fragments** (reference built-in editor components by name):
+ * ```ts
+ * const fragments = [
+ *   { type: "component", component: "Webiny/MyNav", inputs: { label: "Nav" } }
+ * ];
+ * ```
+ */
+export declare const DocumentRenderer: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    document: {
+        type: PropType<Document | null>;
+        default: null;
+    };
+    components: {
+        type: PropType<Component[]>;
+        default: () => never[];
+    };
+    /** Additional fragment configs (component-type or pre-built fixed fragments). */
+    fragments: {
+        type: PropType<DocumentFragmentConfig[]>;
+        default: () => never[];
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    document: {
+        type: PropType<Document | null>;
+        default: null;
+    };
+    components: {
+        type: PropType<Component[]>;
+        default: () => never[];
+    };
+    /** Additional fragment configs (component-type or pre-built fixed fragments). */
+    fragments: {
+        type: PropType<DocumentFragmentConfig[]>;
+        default: () => never[];
+    };
+}>> & Readonly<{}>, {
+    components: Component[];
+    document: Document | null;
+    fragments: DocumentFragmentConfig[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/components/DocumentRenderer.js

@@ -0,0 +1,68 @@
+import { computed, defineComponent, h } from "vue";
+import { contentSdk } from "@webiny/website-builder-sdk";
+import { DocumentStoreProvider } from "./DocumentStoreProvider.js";
+import { ConnectToEditor } from "./ConnectToEditor.js";
+import { FragmentsProvider } from "./FragmentsProvider.js";
+import { ElementRenderer } from "./ElementRenderer.js";
+import { editorComponents } from "../editorComponents/index.js";
+const DocumentRenderer = defineComponent({
+    name: "WebinyDocumentRenderer",
+    props: {
+        document: {
+            type: Object,
+            default: null
+        },
+        components: {
+            type: Array,
+            default: ()=>[]
+        },
+        fragments: {
+            type: Array,
+            default: ()=>[]
+        }
+    },
+    setup (props, { slots }) {
+        const slotFragments = computed(()=>Object.entries(slots).filter(([name])=>name.startsWith("fragment:")).map(([name, slot])=>({
+                    type: "fixed",
+                    name: name.slice(9),
+                    element: slot
+                })));
+        const allFragments = computed(()=>[
+                ...slotFragments.value,
+                ...props.fragments
+            ]);
+        return ()=>{
+            const { document, components } = props;
+            const allComponents = [
+                ...editorComponents,
+                ...components
+            ];
+            allComponents.forEach((c)=>contentSdk.registerComponent(c));
+            if (!document && !contentSdk.isEditing()) return h("div", {
+                "data-role": "document-renderer"
+            }, slots.default?.());
+            return h("div", {
+                "data-role": "document-renderer"
+            }, [
+                h(FragmentsProvider, {
+                    fragments: allFragments.value
+                }, {
+                    default: ()=>contentSdk.isEditing() ? h(ConnectToEditor, {
+                            document: document ?? void 0,
+                            components
+                        }) : h(DocumentStoreProvider, {
+                            id: document.properties.id,
+                            document: document
+                        }, {
+                            default: ()=>h(ElementRenderer, {
+                                    id: "root"
+                                })
+                        })
+                })
+            ]);
+        };
+    }
+});
+export { DocumentRenderer };
+
+//# sourceMappingURL=DocumentRenderer.js.map

package/components/DocumentRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/DocumentRenderer.js","sources":["../../src/components/DocumentRenderer.ts"],"sourcesContent":["import { defineComponent, computed, h, type PropType } from \"vue\";\nimport { contentSdk, type Component, type Document } from \"@webiny/website-builder-sdk\";\nimport { DocumentStoreProvider } from \"./DocumentStoreProvider.js\";\nimport { ConnectToEditor } from \"./ConnectToEditor.js\";\nimport { FragmentsProvider, type DocumentFragmentConfig } from \"./FragmentsProvider.js\";\nimport { ElementRenderer } from \"./ElementRenderer.js\";\nimport { editorComponents } from \"~/editorComponents/index.js\";\n\n/**\n * Top-level rendering component. Accepts a Webiny document and a list of\n * custom components, then renders the full page tree.\n *\n * **Named-slot fragments**\n *\n * Inject app-level Vue subtrees into named fragment slots:\n * ```vue\n * <DocumentRenderer :document=\"page.document\" :components=\"myComps\">\n *   <template #fragment:header><MySiteHeader /></template>\n *   <template #fragment:footer><MySiteFooter /></template>\n * </DocumentRenderer>\n * ```\n *\n * **Component fragments** (reference built-in editor components by name):\n * ```ts\n * const fragments = [\n *   { type: \"component\", component: \"Webiny/MyNav\", inputs: { label: \"Nav\" } }\n * ];\n * ```\n */\nexport const DocumentRenderer = defineComponent({\n    name: \"WebinyDocumentRenderer\",\n\n    props: {\n        document: {\n            type: Object as PropType<Document | null>,\n            default: null\n        },\n        components: {\n            type: Array as PropType<Component[]>,\n            default: () => []\n        },\n        /** Additional fragment configs (component-type or pre-built fixed fragments). */\n        fragments: {\n            type: Array as PropType<DocumentFragmentConfig[]>,\n            default: () => []\n        }\n    },\n\n    setup(props, { slots }) {\n        // Collect named slot fragments: <template #fragment:header> etc.\n        const slotFragments = computed((): DocumentFragmentConfig[] =>\n            Object.entries(slots)\n                .filter(([name]) => name.startsWith(\"fragment:\"))\n                .map(\n                    ([name, slot]): DocumentFragmentConfig => ({\n                        type: \"fixed\",\n                        name: name.slice(\"fragment:\".length),\n                        element: slot!\n                    })\n                )\n        );\n\n        const allFragments = computed(() => [...slotFragments.value, ...props.fragments]);\n\n        return () => {\n            const { document, components } = props;\n\n            // Register all components with the SDK on every render (idempotent).\n            const allComponents = [...editorComponents, ...components];\n            allComponents.forEach(c => contentSdk.registerComponent(c));\n\n            if (!document && !contentSdk.isEditing()) {\n                return h(\"div\", { \"data-role\": \"document-renderer\" }, slots.default?.());\n            }\n\n            return h(\"div\", { \"data-role\": \"document-renderer\" }, [\n                h(\n                    FragmentsProvider,\n                    { fragments: allFragments.value },\n                    {\n                        default: () =>\n                            contentSdk.isEditing()\n                                ? h(ConnectToEditor, {\n                                      document: document ?? undefined,\n                                      components\n                                  })\n                                : h(\n                                      DocumentStoreProvider,\n                                      {\n                                          id: document!.properties.id,\n                                          document: document!\n                                      },\n                                      {\n                                          default: () => h(ElementRenderer, { id: \"root\" })\n                                      }\n                                  )\n                    }\n                )\n            ]);\n        };\n    }\n});\n"],"names":["DocumentRenderer","defineComponent","Object","Array","props","slots","slotFragments","computed","name","slot","allFragments","document","components","allComponents","editorComponents","c","contentSdk","h","FragmentsProvider","ConnectToEditor","undefined","DocumentStoreProvider","ElementRenderer"],"mappings":";;;;;;;AA6BO,MAAMA,mBAAmBC,gBAAgB;IAC5C,MAAM;IAEN,OAAO;QACH,UAAU;YACN,MAAMC;YACN,SAAS;QACb;QACA,YAAY;YACR,MAAMC;YACN,SAAS,IAAM,EAAE;QACrB;QAEA,WAAW;YACP,MAAMA;YACN,SAAS,IAAM,EAAE;QACrB;IACJ;IAEA,OAAMC,KAAK,EAAE,EAAEC,KAAK,EAAE;QAElB,MAAMC,gBAAgBC,SAAS,IAC3BL,OAAO,OAAO,CAACG,OACV,MAAM,CAAC,CAAC,CAACG,KAAK,GAAKA,KAAK,UAAU,CAAC,cACnC,GAAG,CACA,CAAC,CAACA,MAAMC,KAAK,GAA8B;oBACvC,MAAM;oBACN,MAAMD,KAAK,KAAK,CAAC;oBACjB,SAASC;gBACb;QAIZ,MAAMC,eAAeH,SAAS,IAAM;mBAAID,cAAc,KAAK;mBAAKF,MAAM,SAAS;aAAC;QAEhF,OAAO;YACH,MAAM,EAAEO,QAAQ,EAAEC,UAAU,EAAE,GAAGR;YAGjC,MAAMS,gBAAgB;mBAAIC;mBAAqBF;aAAW;YAC1DC,cAAc,OAAO,CAACE,CAAAA,IAAKC,WAAW,iBAAiB,CAACD;YAExD,IAAI,CAACJ,YAAY,CAACK,WAAW,SAAS,IAClC,OAAOC,EAAE,OAAO;gBAAE,aAAa;YAAoB,GAAGZ,MAAM,OAAO;YAGvE,OAAOY,EAAE,OAAO;gBAAE,aAAa;YAAoB,GAAG;gBAClDA,EACIC,mBACA;oBAAE,WAAWR,aAAa,KAAK;gBAAC,GAChC;oBACI,SAAS,IACLM,WAAW,SAAS,KACdC,EAAEE,iBAAiB;4BACf,UAAUR,YAAYS;4BACtBR;wBACJ,KACAK,EACII,uBACA;4BACI,IAAIV,SAAU,UAAU,CAAC,EAAE;4BAC3B,UAAUA;wBACd,GACA;4BACI,SAAS,IAAMM,EAAEK,iBAAiB;oCAAE,IAAI;gCAAO;wBACnD;gBAElB;aAEP;QACL;IACJ;AACJ"}

package/components/DocumentStoreProvider.d.ts

@@ -0,0 +1,37 @@
+import { type InjectionKey, type PropType } from "vue";
+import type { DocumentStore, Document } from "@webiny/website-builder-sdk";
+export declare const DOCUMENT_STORE_KEY: InjectionKey<DocumentStore>;
+/**
+ * Creates (or retrieves) the DocumentStore for the given document ID and
+ * provides it to all descendants via Vue's provide/inject.
+ *
+ * Equivalent of the React DocumentStoreProvider context provider.
+ */
+export declare const DocumentStoreProvider: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    document: {
+        type: PropType<Document | undefined>;
+        default: undefined;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    document: {
+        type: PropType<Document | undefined>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    document: Document | undefined;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/**
+ * Composable – retrieve the nearest DocumentStore from the component tree.
+ * Must be called inside a setup() that is a descendant of DocumentStoreProvider.
+ */
+export declare const useDocumentStore: () => DocumentStore;

package/components/DocumentStoreProvider.js

@@ -0,0 +1,32 @@
+import { defineComponent, inject, provide, watchEffect } from "vue";
+import { documentStoreManager } from "@webiny/website-builder-sdk";
+const DOCUMENT_STORE_KEY = Symbol("WebinyDocumentStore");
+const DocumentStoreProvider = defineComponent({
+    name: "WebinyDocumentStoreProvider",
+    props: {
+        id: {
+            type: String,
+            required: true
+        },
+        document: {
+            type: Object,
+            default: void 0
+        }
+    },
+    setup (props, { slots }) {
+        const store = documentStoreManager.getStore(props.id);
+        watchEffect(()=>{
+            if (props.document) store.setDocument(props.document);
+        });
+        provide(DOCUMENT_STORE_KEY, store);
+        return ()=>slots.default?.();
+    }
+});
+const useDocumentStore = ()=>{
+    const store = inject(DOCUMENT_STORE_KEY);
+    if (!store) throw new Error("useDocumentStore must be used within a DocumentStoreProvider");
+    return store;
+};
+export { DOCUMENT_STORE_KEY, DocumentStoreProvider, useDocumentStore };
+
+//# sourceMappingURL=DocumentStoreProvider.js.map

package/components/DocumentStoreProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/DocumentStoreProvider.js","sources":["../../src/components/DocumentStoreProvider.ts"],"sourcesContent":["import {\n    defineComponent,\n    provide,\n    inject,\n    watchEffect,\n    type InjectionKey,\n    type PropType\n} from \"vue\";\nimport type { DocumentStore, Document } from \"@webiny/website-builder-sdk\";\nimport { documentStoreManager } from \"@webiny/website-builder-sdk\";\n\nexport const DOCUMENT_STORE_KEY: InjectionKey<DocumentStore> = Symbol(\"WebinyDocumentStore\");\n\n/**\n * Creates (or retrieves) the DocumentStore for the given document ID and\n * provides it to all descendants via Vue's provide/inject.\n *\n * Equivalent of the React DocumentStoreProvider context provider.\n */\nexport const DocumentStoreProvider = defineComponent({\n    name: \"WebinyDocumentStoreProvider\",\n\n    props: {\n        id: { type: String, required: true },\n        document: { type: Object as PropType<Document | undefined>, default: undefined }\n    },\n\n    setup(props, { slots }) {\n        const store = documentStoreManager.getStore(props.id);\n\n        watchEffect(() => {\n            if (props.document) {\n                store.setDocument(props.document);\n            }\n        });\n\n        provide(DOCUMENT_STORE_KEY, store);\n\n        return () => slots.default?.();\n    }\n});\n\n/**\n * Composable – retrieve the nearest DocumentStore from the component tree.\n * Must be called inside a setup() that is a descendant of DocumentStoreProvider.\n */\nexport const useDocumentStore = (): DocumentStore => {\n    const store = inject(DOCUMENT_STORE_KEY);\n    if (!store) {\n        throw new Error(\"useDocumentStore must be used within a DocumentStoreProvider\");\n    }\n    return store;\n};\n"],"names":["DOCUMENT_STORE_KEY","Symbol","DocumentStoreProvider","defineComponent","String","Object","undefined","props","slots","store","documentStoreManager","watchEffect","provide","useDocumentStore","inject","Error"],"mappings":";;AAWO,MAAMA,qBAAkDC,OAAO;AAQ/D,MAAMC,wBAAwBC,gBAAgB;IACjD,MAAM;IAEN,OAAO;QACH,IAAI;YAAE,MAAMC;YAAQ,UAAU;QAAK;QACnC,UAAU;YAAE,MAAMC;YAA0C,SAASC;QAAU;IACnF;IAEA,OAAMC,KAAK,EAAE,EAAEC,KAAK,EAAE;QAClB,MAAMC,QAAQC,qBAAqB,QAAQ,CAACH,MAAM,EAAE;QAEpDI,YAAY;YACR,IAAIJ,MAAM,QAAQ,EACdE,MAAM,WAAW,CAACF,MAAM,QAAQ;QAExC;QAEAK,QAAQZ,oBAAoBS;QAE5B,OAAO,IAAMD,MAAM,OAAO;IAC9B;AACJ;AAMO,MAAMK,mBAAmB;IAC5B,MAAMJ,QAAQK,OAAOd;IACrB,IAAI,CAACS,OACD,MAAM,IAAIM,MAAM;IAEpB,OAAON;AACX"}

package/components/EditingElementRenderer/EditingElementRenderer.d.ts

@@ -0,0 +1,22 @@
+import { type PropType } from "vue";
+import { type DocumentElement } from "@webiny/website-builder-sdk";
+/**
+ * Wraps LiveElementRenderer with data-* attributes consumed by the Webiny
+ * editor (depth, sibling index, parent element ID/slot).
+ *
+ * Also sets up an EditingElementRendererPresenter that listens for element
+ * patch messages from the editor iframe and applies them to the document store.
+ */
+export declare const EditingElementRenderer: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    element: {
+        type: PropType<DocumentElement>;
+        required: true;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    element: {
+        type: PropType<DocumentElement>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/components/EditingElementRenderer/EditingElementRenderer.js

@@ -0,0 +1,53 @@
+import { defineComponent, h, onUnmounted, watch } from "vue";
+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";
+import { useObservable } from "../../composables/useObservable.js";
+const EditingElementRenderer = defineComponent({
+    name: "WebinyEditingElementRenderer",
+    props: {
+        element: {
+            type: Object,
+            required: true
+        }
+    },
+    setup (props) {
+        const documentStore = useDocumentStore();
+        const depth = useElementSlotDepth();
+        const index = useElementIndex();
+        const presenter = new EditingElementRendererPresenter(documentStore);
+        const stopWatch = watch(()=>props.element?.id, ()=>{
+            if (props.element) presenter.init(props.element);
+        }, {
+            immediate: true
+        });
+        onUnmounted(()=>{
+            presenter.dispose();
+            stopWatch();
+        });
+        const vm = useObservable(()=>presenter.vm);
+        return ()=>{
+            const element = vm.value?.element;
+            if (!element?.id) return null;
+            return h("div", {
+                style: {
+                    display: "contents"
+                },
+                "data-element-id": element.id,
+                "data-depth": depth,
+                "data-parent-index": index,
+                "data-parent-id": element.parent?.id,
+                "data-parent-slot": element.parent?.slot
+            }, [
+                h(LiveElementRenderer, {
+                    element
+                })
+            ]);
+        };
+    }
+});
+export { EditingElementRenderer };
+
+//# sourceMappingURL=EditingElementRenderer.js.map

package/components/EditingElementRenderer/EditingElementRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/EditingElementRenderer/EditingElementRenderer.js","sources":["../../../src/components/EditingElementRenderer/EditingElementRenderer.ts"],"sourcesContent":["import { defineComponent, onUnmounted, watch, h, type PropType } from \"vue\";\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\";\nimport { useObservable } from \"~/composables/useObservable.js\";\n\n/**\n * Wraps LiveElementRenderer with data-* attributes consumed by the Webiny\n * editor (depth, sibling index, parent element ID/slot).\n *\n * Also sets up an EditingElementRendererPresenter that listens for element\n * patch messages from the editor iframe and applies them to the document store.\n */\nexport const EditingElementRenderer = defineComponent({\n    name: \"WebinyEditingElementRenderer\",\n\n    props: {\n        element: { type: Object as PropType<DocumentElement>, required: true }\n    },\n\n    setup(props) {\n        const documentStore = useDocumentStore();\n        const depth = useElementSlotDepth();\n        const index = useElementIndex();\n\n        const presenter = new EditingElementRendererPresenter(documentStore);\n\n        // Initialise the presenter when the element (or its ID) changes.\n        const stopWatch = watch(\n            () => props.element?.id,\n            () => {\n                if (props.element) {\n                    presenter.init(props.element);\n                }\n            },\n            { immediate: true }\n        );\n\n        onUnmounted(() => {\n            presenter.dispose();\n            stopWatch();\n        });\n\n        // Bridge the presenter's MobX observable vm into a Vue reactive ref.\n        const vm = useObservable(() => presenter.vm);\n\n        return () => {\n            const element = vm.value?.element;\n            if (!element?.id) {\n                return null;\n            }\n\n            return h(\n                \"div\",\n                {\n                    style: { display: \"contents\" },\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                [h(LiveElementRenderer, { element })]\n            );\n        };\n    }\n});\n"],"names":["EditingElementRenderer","defineComponent","Object","props","documentStore","useDocumentStore","depth","useElementSlotDepth","index","useElementIndex","presenter","EditingElementRendererPresenter","stopWatch","watch","onUnmounted","vm","useObservable","element","h","LiveElementRenderer"],"mappings":";;;;;;;AAgBO,MAAMA,yBAAyBC,gBAAgB;IAClD,MAAM;IAEN,OAAO;QACH,SAAS;YAAE,MAAMC;YAAqC,UAAU;QAAK;IACzE;IAEA,OAAMC,KAAK;QACP,MAAMC,gBAAgBC;QACtB,MAAMC,QAAQC;QACd,MAAMC,QAAQC;QAEd,MAAMC,YAAY,IAAIC,gCAAgCP;QAGtD,MAAMQ,YAAYC,MACd,IAAMV,MAAM,OAAO,EAAE,IACrB;YACI,IAAIA,MAAM,OAAO,EACbO,UAAU,IAAI,CAACP,MAAM,OAAO;QAEpC,GACA;YAAE,WAAW;QAAK;QAGtBW,YAAY;YACRJ,UAAU,OAAO;YACjBE;QACJ;QAGA,MAAMG,KAAKC,cAAc,IAAMN,UAAU,EAAE;QAE3C,OAAO;YACH,MAAMO,UAAUF,GAAG,KAAK,EAAE;YAC1B,IAAI,CAACE,SAAS,IACV,OAAO;YAGX,OAAOC,EACH,OACA;gBACI,OAAO;oBAAE,SAAS;gBAAW;gBAC7B,mBAAmBD,QAAQ,EAAE;gBAC7B,cAAcX;gBACd,qBAAqBE;gBACrB,kBAAkBS,QAAQ,MAAM,EAAE;gBAClC,oBAAoBA,QAAQ,MAAM,EAAE;YACxC,GACA;gBAACC,EAAEC,qBAAqB;oBAAEF;gBAAQ;aAAG;QAE7C;IACJ;AACJ"}

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

@@ -0,0 +1,15 @@
+import type { DocumentStore } from "@webiny/website-builder-sdk";
+import { type DocumentElement } from "@webiny/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,37 @@
+"use client";
+import { makeAutoObservable, observable, toJS } from "mobx";
+import { contentSdk, jsonPatch } from "@webiny/website-builder-sdk";
+class EditingElementRendererPresenter {
+    constructor(documentStore){
+        this.listeners = [];
+        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);
+            });
+        }));
+    }
+}
+export { EditingElementRendererPresenter };
+
+//# sourceMappingURL=EditingElementRenderer.presenter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"components/EditingElementRenderer/EditingElementRenderer.presenter.js","sources":["../../../src/components/EditingElementRenderer/EditingElementRenderer.presenter.ts"],"sourcesContent":["// This file is identical to the React version — it is a pure-TypeScript MobX\n// class with no framework-specific code, so it can be shared as-is.\n\"use client\";\nimport { makeAutoObservable, observable, toJS } from \"mobx\";\nimport type { DocumentStore } from \"@webiny/website-builder-sdk\";\nimport {\n    contentSdk,\n    jsonPatch,\n    type EditingSdk,\n    type DocumentElement\n} from \"@webiny/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        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"],"names":["EditingElementRendererPresenter","documentStore","observable","contentSdk","makeAutoObservable","toJS","element","fn","id","patch","document","jsonPatch"],"mappings":";;;AAYO,MAAMA;IAMT,YAAYC,aAA4B,CAAE;aAJlC,SAAS,GAAsB,EAAE;QAKrC,IAAI,CAAC,aAAa,GAAGA;QACrB,IAAI,CAAC,OAAO,GAAGC,WAAW,CAAC;QAC3B,IAAI,CAAC,UAAU,GAAGC,WAAW,aAAa;QAC1CC,mBAAmB,IAAI;IAC3B;IAEA,IAAI,KAAK;QACL,OAAO;YACH,SAASC,KAAK,IAAI,CAAC,OAAO;QAC9B;IACJ;IAEA,KAAKC,OAAwB,EAAE;QAC3B,IAAI,CAAC,OAAO,GAAGA;QACf,IAAI,CAAC,YAAY;IACrB;IAEA,UAAU;QACN,IAAI,CAAC,SAAS,CAAC,OAAO,CAACC,CAAAA,KAAMA;IACjC;IAEQ,eAAe;QACnB,MAAMD,UAAU,IAAI,CAAC,OAAO;QAC5B,IAAI,CAACA,SACD;QAGJ,MAAM,EAAEE,EAAE,EAAE,GAAGF;QAEf,IAAI,IAAI,CAAC,UAAU,EACf,IAAI,CAAC,SAAS,CAAC,IAAI,CACf,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,cAAc,EAAEE,IAAI,EAAEC,CAAAA;YAChD,IAAI,CAAC,aAAa,CAAC,cAAc,CAACC,CAAAA;gBAC9BC,UAAU,UAAU,CAACD,SAAS,QAAQ,CAACF,GAAG,EAAEC,OAAO,OAAO;YAC9D;QACJ;IAGZ;AACJ"}

package/components/EditingElementRenderer/index.js

@@ -0,0 +1,2 @@
+export { EditingElementRenderer } from "./EditingElementRenderer.js";
+export { EditingElementRendererPresenter } from "./EditingElementRenderer.presenter.js";

package/components/ElementIndexProvider.d.ts

@@ -0,0 +1,19 @@
+import { type PropType } from "vue";
+/**
+ * Provides the sibling index of the current element to all descendants.
+ */
+export declare const ElementIndexProvider: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    index: {
+        type: PropType<number>;
+        required: true;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    index: {
+        type: PropType<number>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** Returns the sibling index of the current element (0-based). */
+export declare const useElementIndex: () => number;

package/components/ElementIndexProvider.js

@@ -0,0 +1,19 @@
+import { defineComponent, inject, provide } from "vue";
+const INDEX_KEY = Symbol("WebinyElementIndex");
+const ElementIndexProvider = defineComponent({
+    name: "WebinyElementIndexProvider",
+    props: {
+        index: {
+            type: Number,
+            required: true
+        }
+    },
+    setup (props, { slots }) {
+        provide(INDEX_KEY, props.index);
+        return ()=>slots.default?.();
+    }
+});
+const useElementIndex = ()=>inject(INDEX_KEY, 0);
+export { ElementIndexProvider, useElementIndex };
+
+//# sourceMappingURL=ElementIndexProvider.js.map

package/components/ElementIndexProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/ElementIndexProvider.js","sources":["../../src/components/ElementIndexProvider.ts"],"sourcesContent":["import { defineComponent, provide, inject, type InjectionKey, type PropType } from \"vue\";\n\nconst INDEX_KEY: InjectionKey<number> = Symbol(\"WebinyElementIndex\");\n\n/**\n * Provides the sibling index of the current element to all descendants.\n */\nexport const ElementIndexProvider = defineComponent({\n    name: \"WebinyElementIndexProvider\",\n\n    props: {\n        index: { type: Number as PropType<number>, required: true }\n    },\n\n    setup(props, { slots }) {\n        provide(INDEX_KEY, props.index);\n        return () => slots.default?.();\n    }\n});\n\n/** Returns the sibling index of the current element (0-based). */\nexport const useElementIndex = (): number => {\n    return inject(INDEX_KEY, 0);\n};\n"],"names":["INDEX_KEY","Symbol","ElementIndexProvider","defineComponent","Number","props","slots","provide","useElementIndex","inject"],"mappings":";AAEA,MAAMA,YAAkCC,OAAO;AAKxC,MAAMC,uBAAuBC,gBAAgB;IAChD,MAAM;IAEN,OAAO;QACH,OAAO;YAAE,MAAMC;YAA4B,UAAU;QAAK;IAC9D;IAEA,OAAMC,KAAK,EAAE,EAAEC,KAAK,EAAE;QAClBC,QAAQP,WAAWK,MAAM,KAAK;QAC9B,OAAO,IAAMC,MAAM,OAAO;IAC9B;AACJ;AAGO,MAAME,kBAAkB,IACpBC,OAAOT,WAAW"}