@webiny/website-builder-vue 6.4.0-beta.5 → 6.4.0-beta.7

package/components/ElementRenderer.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Entry point for rendering a single document element by ID.
+ *
+ * - Retrieves the live element from the MobX DocumentStore (reactive via useObservable).
+ * - Dispatches to EditingElementRenderer (editor mode) or LiveElementRenderer (live mode).
+ */
+export declare const ElementRenderer: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        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<{
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/components/ElementRenderer.js

@@ -0,0 +1,33 @@
+import { defineComponent, h } from "vue";
+import { environment } from "@webiny/website-builder-sdk";
+import { EditingElementRenderer } from "./EditingElementRenderer/index.js";
+import { LiveElementRenderer } from "./LiveElementRenderer.js";
+import { useDocumentStore } from "./DocumentStoreProvider.js";
+import { useObservable } from "../composables/useObservable.js";
+import { setElementRenderer } from "./LiveElementSlot.js";
+const ElementRenderer = defineComponent({
+    name: "WebinyElementRenderer",
+    props: {
+        id: {
+            type: String,
+            required: true
+        }
+    },
+    setup (props) {
+        const documentStore = useDocumentStore();
+        const element = useObservable(()=>documentStore.getElement(props.id));
+        return ()=>{
+            if (!element.value) return null;
+            if (environment.isEditing()) return h(EditingElementRenderer, {
+                element: element.value
+            });
+            return h(LiveElementRenderer, {
+                element: element.value
+            });
+        };
+    }
+});
+setElementRenderer(ElementRenderer);
+export { ElementRenderer };
+
+//# sourceMappingURL=ElementRenderer.js.map

package/components/ElementRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/ElementRenderer.js","sources":["../../src/components/ElementRenderer.ts"],"sourcesContent":["import { defineComponent, h } from \"vue\";\nimport { environment } from \"@webiny/website-builder-sdk\";\nimport { EditingElementRenderer } from \"./EditingElementRenderer/index.js\";\nimport { LiveElementRenderer } from \"./LiveElementRenderer.js\";\nimport { useDocumentStore } from \"./DocumentStoreProvider.js\";\nimport { useObservable } from \"~/composables/useObservable.js\";\nimport { setElementRenderer } from \"./LiveElementSlot.js\";\n\n/**\n * Entry point for rendering a single document element by ID.\n *\n * - Retrieves the live element from the MobX DocumentStore (reactive via useObservable).\n * - Dispatches to EditingElementRenderer (editor mode) or LiveElementRenderer (live mode).\n */\nexport const ElementRenderer = defineComponent({\n    name: \"WebinyElementRenderer\",\n\n    props: {\n        id: { type: String, required: true }\n    },\n\n    setup(props) {\n        const documentStore = useDocumentStore();\n\n        // Reactively track the element in the MobX store.\n        const element = useObservable(() => documentStore.getElement(props.id));\n\n        return () => {\n            if (!element.value) {\n                return null;\n            }\n\n            if (environment.isEditing()) {\n                return h(EditingElementRenderer, { element: element.value });\n            }\n            return h(LiveElementRenderer, { element: element.value });\n        };\n    }\n});\n\n// Break the circular dependency: LiveElementSlot needs ElementRenderer.\nsetElementRenderer(ElementRenderer);\n"],"names":["ElementRenderer","defineComponent","String","props","documentStore","useDocumentStore","element","useObservable","environment","h","EditingElementRenderer","LiveElementRenderer","setElementRenderer"],"mappings":";;;;;;;AAcO,MAAMA,kBAAkBC,gBAAgB;IAC3C,MAAM;IAEN,OAAO;QACH,IAAI;YAAE,MAAMC;YAAQ,UAAU;QAAK;IACvC;IAEA,OAAMC,KAAK;QACP,MAAMC,gBAAgBC;QAGtB,MAAMC,UAAUC,cAAc,IAAMH,cAAc,UAAU,CAACD,MAAM,EAAE;QAErE,OAAO;YACH,IAAI,CAACG,QAAQ,KAAK,EACd,OAAO;YAGX,IAAIE,YAAY,SAAS,IACrB,OAAOC,EAAEC,wBAAwB;gBAAE,SAASJ,QAAQ,KAAK;YAAC;YAE9D,OAAOG,EAAEE,qBAAqB;gBAAE,SAASL,QAAQ,KAAK;YAAC;QAC3D;IACJ;AACJ;AAGAM,mBAAmBZ"}

package/components/ElementSlot.d.ts

@@ -0,0 +1,39 @@
+import { type PropType } from "vue";
+/**
+ * Dispatches to PreviewElementSlot (editing mode) or LiveElementSlot (live
+ * mode) based on the current environment.
+ *
+ * Used by LiveElementRenderer when resolving slot inputs so that child elements
+ * are rendered recursively via ElementRenderer.
+ */
+export declare const ElementSlot: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    parentId: {
+        type: StringConstructor;
+        required: true;
+    };
+    slot: {
+        type: StringConstructor;
+        required: true;
+    };
+    elements: {
+        type: PropType<string[]>;
+        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<{
+    parentId: {
+        type: StringConstructor;
+        required: true;
+    };
+    slot: {
+        type: StringConstructor;
+        required: true;
+    };
+    elements: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+}>> & Readonly<{}>, {
+    elements: string[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/components/ElementSlot.js

@@ -0,0 +1,36 @@
+import { defineComponent, h } from "vue";
+import { environment } from "@webiny/website-builder-sdk";
+import { LiveElementSlot } from "./LiveElementSlot.js";
+import { PreviewElementSlot } from "./PreviewElementSlot.js";
+const ElementSlot = defineComponent({
+    name: "WebinyElementSlot",
+    props: {
+        parentId: {
+            type: String,
+            required: true
+        },
+        slot: {
+            type: String,
+            required: true
+        },
+        elements: {
+            type: Array,
+            default: ()=>[]
+        }
+    },
+    setup (props) {
+        return ()=>{
+            if (environment.isEditing()) return h(PreviewElementSlot, {
+                parentId: props.parentId,
+                slot: props.slot,
+                elements: props.elements
+            });
+            return h(LiveElementSlot, {
+                elements: props.elements
+            });
+        };
+    }
+});
+export { ElementSlot };
+
+//# sourceMappingURL=ElementSlot.js.map

package/components/ElementSlot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/ElementSlot.js","sources":["../../src/components/ElementSlot.ts"],"sourcesContent":["import { defineComponent, h, type PropType } from \"vue\";\nimport { environment } from \"@webiny/website-builder-sdk\";\nimport { LiveElementSlot } from \"./LiveElementSlot.js\";\nimport { PreviewElementSlot } from \"./PreviewElementSlot.js\";\n\n/**\n * Dispatches to PreviewElementSlot (editing mode) or LiveElementSlot (live\n * mode) based on the current environment.\n *\n * Used by LiveElementRenderer when resolving slot inputs so that child elements\n * are rendered recursively via ElementRenderer.\n */\nexport const ElementSlot = defineComponent({\n    name: \"WebinyElementSlot\",\n\n    props: {\n        parentId: { type: String, required: true },\n        slot: { type: String, required: true },\n        elements: { type: Array as PropType<string[]>, default: () => [] }\n    },\n\n    setup(props) {\n        return () => {\n            if (environment.isEditing()) {\n                return h(PreviewElementSlot, {\n                    parentId: props.parentId,\n                    slot: props.slot,\n                    elements: props.elements\n                });\n            }\n            return h(LiveElementSlot, { elements: props.elements });\n        };\n    }\n});\n"],"names":["ElementSlot","defineComponent","String","Array","props","environment","h","PreviewElementSlot","LiveElementSlot"],"mappings":";;;;AAYO,MAAMA,cAAcC,gBAAgB;IACvC,MAAM;IAEN,OAAO;QACH,UAAU;YAAE,MAAMC;YAAQ,UAAU;QAAK;QACzC,MAAM;YAAE,MAAMA;YAAQ,UAAU;QAAK;QACrC,UAAU;YAAE,MAAMC;YAA6B,SAAS,IAAM,EAAE;QAAC;IACrE;IAEA,OAAMC,KAAK;QACP,OAAO;YACH,IAAIC,YAAY,SAAS,IACrB,OAAOC,EAAEC,oBAAoB;gBACzB,UAAUH,MAAM,QAAQ;gBACxB,MAAMA,MAAM,IAAI;gBAChB,UAAUA,MAAM,QAAQ;YAC5B;YAEJ,OAAOE,EAAEE,iBAAiB;gBAAE,UAAUJ,MAAM,QAAQ;YAAC;QACzD;IACJ;AACJ"}

package/components/ElementSlotDepthProvider.d.ts

@@ -0,0 +1,19 @@
+import { type PropType } from "vue";
+/**
+ * Provides the current element-slot nesting depth to all descendants.
+ */
+export declare const ElementSlotDepthProvider: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    depth: {
+        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<{
+    depth: {
+        type: PropType<number>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** Returns the current slot nesting depth (0 at the root). */
+export declare const useElementSlotDepth: () => number;

package/components/ElementSlotDepthProvider.js

@@ -0,0 +1,19 @@
+import { defineComponent, inject, provide } from "vue";
+const DEPTH_KEY = Symbol("WebinyElementSlotDepth");
+const ElementSlotDepthProvider = defineComponent({
+    name: "WebinyElementSlotDepthProvider",
+    props: {
+        depth: {
+            type: Number,
+            required: true
+        }
+    },
+    setup (props, { slots }) {
+        provide(DEPTH_KEY, props.depth);
+        return ()=>slots.default?.();
+    }
+});
+const useElementSlotDepth = ()=>inject(DEPTH_KEY, 0);
+export { ElementSlotDepthProvider, useElementSlotDepth };
+
+//# sourceMappingURL=ElementSlotDepthProvider.js.map

package/components/ElementSlotDepthProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/ElementSlotDepthProvider.js","sources":["../../src/components/ElementSlotDepthProvider.ts"],"sourcesContent":["import { defineComponent, provide, inject, type InjectionKey, type PropType } from \"vue\";\n\nconst DEPTH_KEY: InjectionKey<number> = Symbol(\"WebinyElementSlotDepth\");\n\n/**\n * Provides the current element-slot nesting depth to all descendants.\n */\nexport const ElementSlotDepthProvider = defineComponent({\n    name: \"WebinyElementSlotDepthProvider\",\n\n    props: {\n        depth: { type: Number as PropType<number>, required: true }\n    },\n\n    setup(props, { slots }) {\n        provide(DEPTH_KEY, props.depth);\n        return () => slots.default?.();\n    }\n});\n\n/** Returns the current slot nesting depth (0 at the root). */\nexport const useElementSlotDepth = (): number => {\n    return inject(DEPTH_KEY, 0);\n};\n"],"names":["DEPTH_KEY","Symbol","ElementSlotDepthProvider","defineComponent","Number","props","slots","provide","useElementSlotDepth","inject"],"mappings":";AAEA,MAAMA,YAAkCC,OAAO;AAKxC,MAAMC,2BAA2BC,gBAAgB;IACpD,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,sBAAsB,IACxBC,OAAOT,WAAW"}

package/components/FragmentsProvider.d.ts

@@ -0,0 +1,46 @@
+import { type PropType, type Slot } from "vue";
+/**
+ * A fragment that renders a pre-defined Vue subtree (fixed).
+ * `element` is a Vue slot function returned by useSlots() — e.g. the result
+ * of `<template #fragment:header>…</template>` in the consumer.
+ */
+type FixedFragment = {
+    type: "fixed";
+    name: string;
+    element: Slot;
+};
+/**
+ * A fragment that inserts a named editor component with given inputs.
+ */
+type ComponentFragment = {
+    type: "component";
+    component: string;
+    inputs: Record<string, unknown>;
+};
+export type DocumentFragmentConfig = FixedFragment | ComponentFragment;
+export type DocumentFragments = DocumentFragmentConfig[];
+/**
+ * Provides the fragments array to all descendants and notifies the editing
+ * SDK whenever the fragment list changes.
+ */
+export declare const FragmentsProvider: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    fragments: {
+        type: PropType<DocumentFragments>;
+        default: () => never[];
+    };
+}>, () => 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<{
+    fragments: {
+        type: PropType<DocumentFragments>;
+        default: () => never[];
+    };
+}>> & Readonly<{}>, {
+    fragments: DocumentFragments;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/**
+ * Composable – returns the current DocumentFragments array.
+ * Returns an empty array when called outside a FragmentsProvider.
+ */
+export declare const useDocumentFragments: () => DocumentFragments;
+export {};

package/components/FragmentsProvider.js

@@ -0,0 +1,40 @@
+import { defineComponent, inject, provide, watch } from "vue";
+import { contentSdk } from "@webiny/website-builder-sdk";
+const FRAGMENTS_KEY = Symbol("WebinyDocumentFragments");
+const FragmentsProvider = defineComponent({
+    name: "WebinyFragmentsProvider",
+    props: {
+        fragments: {
+            type: Array,
+            default: ()=>[]
+        }
+    },
+    setup (props, { slots }) {
+        watch(()=>props.fragments.length, ()=>{
+            if (!contentSdk.isEditing()) return;
+            const data = props.fragments.map((f)=>{
+                if ("fixed" === f.type) return {
+                    type: "fixed",
+                    name: f.name
+                };
+                return {
+                    type: "component",
+                    component: f.component,
+                    inputs: f.inputs
+                };
+            });
+            contentSdk.getEditingSdk()?.messenger.send("document.fragments", {
+                fragments: data
+            });
+        });
+        provide(FRAGMENTS_KEY, ()=>props.fragments);
+        return ()=>slots.default?.();
+    }
+});
+const useDocumentFragments = ()=>{
+    const get = inject(FRAGMENTS_KEY, ()=>[]);
+    return get();
+};
+export { FragmentsProvider, useDocumentFragments };
+
+//# sourceMappingURL=FragmentsProvider.js.map

package/components/FragmentsProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/FragmentsProvider.js","sources":["../../src/components/FragmentsProvider.ts"],"sourcesContent":["import {\n    defineComponent,\n    provide,\n    inject,\n    watch,\n    type InjectionKey,\n    type PropType,\n    type Slot\n} from \"vue\";\nimport { contentSdk } from \"@webiny/website-builder-sdk\";\n\n/**\n * A fragment that renders a pre-defined Vue subtree (fixed).\n * `element` is a Vue slot function returned by useSlots() — e.g. the result\n * of `<template #fragment:header>…</template>` in the consumer.\n */\ntype FixedFragment = {\n    type: \"fixed\";\n    name: string;\n    element: Slot;\n};\n\n/**\n * A fragment that inserts a named editor component with given inputs.\n */\ntype ComponentFragment = {\n    type: \"component\";\n    component: string;\n    inputs: Record<string, unknown>;\n};\n\nexport type DocumentFragmentConfig = FixedFragment | ComponentFragment;\nexport type DocumentFragments = DocumentFragmentConfig[];\n\nconst FRAGMENTS_KEY: InjectionKey<() => DocumentFragments> = Symbol(\"WebinyDocumentFragments\");\n\n/**\n * Provides the fragments array to all descendants and notifies the editing\n * SDK whenever the fragment list changes.\n */\nexport const FragmentsProvider = defineComponent({\n    name: \"WebinyFragmentsProvider\",\n\n    props: {\n        fragments: {\n            type: Array as PropType<DocumentFragments>,\n            default: () => []\n        }\n    },\n\n    setup(props, { slots }) {\n        // Notify the editing SDK when fragments change.\n        watch(\n            () => props.fragments.length,\n            () => {\n                if (!contentSdk.isEditing()) {\n                    return;\n                }\n\n                const data = props.fragments.map(f => {\n                    if (f.type === \"fixed\") {\n                        return { type: \"fixed\", name: f.name };\n                    }\n                    return { type: \"component\", component: f.component, inputs: f.inputs };\n                });\n\n                contentSdk.getEditingSdk()?.messenger.send(\"document.fragments\", {\n                    fragments: data\n                });\n            }\n        );\n\n        // Provide as a getter so consumers always receive the latest array.\n        provide(FRAGMENTS_KEY, () => props.fragments);\n\n        return () => slots.default?.();\n    }\n});\n\n/**\n * Composable – returns the current DocumentFragments array.\n * Returns an empty array when called outside a FragmentsProvider.\n */\nexport const useDocumentFragments = (): DocumentFragments => {\n    const get = inject(FRAGMENTS_KEY, () => [] as DocumentFragments);\n    return get();\n};\n"],"names":["FRAGMENTS_KEY","Symbol","FragmentsProvider","defineComponent","Array","props","slots","watch","contentSdk","data","f","provide","useDocumentFragments","get","inject"],"mappings":";;AAkCA,MAAMA,gBAAuDC,OAAO;AAM7D,MAAMC,oBAAoBC,gBAAgB;IAC7C,MAAM;IAEN,OAAO;QACH,WAAW;YACP,MAAMC;YACN,SAAS,IAAM,EAAE;QACrB;IACJ;IAEA,OAAMC,KAAK,EAAE,EAAEC,KAAK,EAAE;QAElBC,MACI,IAAMF,MAAM,SAAS,CAAC,MAAM,EAC5B;YACI,IAAI,CAACG,WAAW,SAAS,IACrB;YAGJ,MAAMC,OAAOJ,MAAM,SAAS,CAAC,GAAG,CAACK,CAAAA;gBAC7B,IAAIA,AAAW,YAAXA,EAAE,IAAI,EACN,OAAO;oBAAE,MAAM;oBAAS,MAAMA,EAAE,IAAI;gBAAC;gBAEzC,OAAO;oBAAE,MAAM;oBAAa,WAAWA,EAAE,SAAS;oBAAE,QAAQA,EAAE,MAAM;gBAAC;YACzE;YAEAF,WAAW,aAAa,IAAI,UAAU,KAAK,sBAAsB;gBAC7D,WAAWC;YACf;QACJ;QAIJE,QAAQX,eAAe,IAAMK,MAAM,SAAS;QAE5C,OAAO,IAAMC,MAAM,OAAO;IAC9B;AACJ;AAMO,MAAMM,uBAAuB;IAChC,MAAMC,MAAMC,OAAOd,eAAe,IAAM,EAAE;IAC1C,OAAOa;AACX"}

package/components/LiveElementRenderer.d.ts

@@ -0,0 +1,24 @@
+import { type PropType } from "vue";
+import { type DocumentElement } from "@webiny/website-builder-sdk";
+/**
+ * Resolves a single document element into its rendered Vue subtree.
+ *
+ * Steps:
+ *  1. Determines the current breakpoint (starts at "desktop" for SSR safety).
+ *  2. Fetches merged bindings for the element at that breakpoint.
+ *  3. Calls contentSdk.resolveElement() to get the list of component instances.
+ *  4. Renders each instance, optionally wrapping it in a style div.
+ */
+export declare const LiveElementRenderer: 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/LiveElementRenderer.js

@@ -0,0 +1,74 @@
+import { Fragment, computed, defineComponent, h, onMounted, ref, watch } from "vue";
+import { contentSdk } from "@webiny/website-builder-sdk";
+import { ElementSlot } from "./ElementSlot.js";
+import { useViewport } from "../composables/useViewport.js";
+import { useBindingsForElement } from "../composables/useBindingsForElement.js";
+import { useDocumentState } from "../composables/useDocumentState.js";
+const LiveElementRenderer = defineComponent({
+    name: "WebinyLiveElementRenderer",
+    props: {
+        element: {
+            type: Object,
+            required: true
+        }
+    },
+    setup (props) {
+        const viewport = useViewport();
+        const breakpoint = ref("desktop");
+        onMounted(()=>{
+            if (viewport.value?.breakpoint) breakpoint.value = viewport.value.breakpoint;
+        });
+        watch(()=>viewport.value?.breakpoint, (newBp)=>{
+            if (newBp && newBp !== breakpoint.value) breakpoint.value = newBp;
+        });
+        const elementId = computed(()=>props.element?.id ?? "");
+        const elementBindings = useBindingsForElement(elementId.value, breakpoint);
+        const state = useDocumentState();
+        return ()=>{
+            const { element } = props;
+            if (!element?.component) return null;
+            const onResolved = (value, input)=>{
+                if ("slot" === input.type) {
+                    const elements = input.list ? value : [
+                        value
+                    ];
+                    return h(ElementSlot, {
+                        parentId: element.id,
+                        slot: input.name,
+                        elements
+                    });
+                }
+                return value;
+            };
+            const instances = contentSdk.resolveElement({
+                element,
+                state: state.value,
+                elementBindings: elementBindings.value,
+                onResolved
+            });
+            if (!instances) return null;
+            const vnodes = instances.map((resolved, index)=>{
+                const { component: Component, inputs, styles, manifest } = resolved;
+                const autoApplyStyles = false !== manifest.autoApplyStyles;
+                const userVNode = h(Component, {
+                    key: `${element.id}-${index}`,
+                    inputs,
+                    styles,
+                    element,
+                    breakpoint: breakpoint.value
+                });
+                if (!autoApplyStyles) return userVNode;
+                return h("div", {
+                    key: `wrapper-${index}`,
+                    style: styles
+                }, [
+                    userVNode
+                ]);
+            });
+            return h(Fragment, null, vnodes);
+        };
+    }
+});
+export { LiveElementRenderer };
+
+//# sourceMappingURL=LiveElementRenderer.js.map

package/components/LiveElementRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/LiveElementRenderer.js","sources":["../../src/components/LiveElementRenderer.ts"],"sourcesContent":["import { defineComponent, ref, computed, watch, onMounted, h, Fragment, type PropType } from \"vue\";\nimport { contentSdk, type DocumentElement, type ComponentInput } from \"@webiny/website-builder-sdk\";\nimport { ElementSlot } from \"./ElementSlot.js\";\nimport { useViewport } from \"~/composables/useViewport.js\";\nimport { useBindingsForElement } from \"~/composables/useBindingsForElement.js\";\nimport { useDocumentState } from \"~/composables/useDocumentState.js\";\n\n/**\n * Resolves a single document element into its rendered Vue subtree.\n *\n * Steps:\n *  1. Determines the current breakpoint (starts at \"desktop\" for SSR safety).\n *  2. Fetches merged bindings for the element at that breakpoint.\n *  3. Calls contentSdk.resolveElement() to get the list of component instances.\n *  4. Renders each instance, optionally wrapping it in a style div.\n */\nexport const LiveElementRenderer = defineComponent({\n    name: \"WebinyLiveElementRenderer\",\n\n    props: {\n        element: { type: Object as PropType<DocumentElement>, required: true }\n    },\n\n    setup(props) {\n        const viewport = useViewport();\n\n        // Start with \"desktop\" on both server and initial client render (SSR-safe).\n        const breakpoint = ref<string>(\"desktop\");\n\n        onMounted(() => {\n            if (viewport.value?.breakpoint) {\n                breakpoint.value = viewport.value.breakpoint;\n            }\n        });\n\n        watch(\n            () => viewport.value?.breakpoint,\n            newBp => {\n                if (newBp && newBp !== breakpoint.value) {\n                    breakpoint.value = newBp;\n                }\n            }\n        );\n\n        const elementId = computed(() => props.element?.id ?? \"\");\n        const elementBindings = useBindingsForElement(elementId.value, breakpoint);\n        const state = useDocumentState();\n\n        return () => {\n            const { element } = props;\n            if (!element?.component) {\n                return null;\n            }\n\n            const onResolved = (value: unknown, input: ComponentInput) => {\n                if (input.type === \"slot\") {\n                    const elements = (input as { list?: boolean }).list\n                        ? (value as string[])\n                        : [value as string];\n                    return h(ElementSlot, {\n                        parentId: element.id,\n                        slot: input.name,\n                        elements\n                    });\n                }\n                return value;\n            };\n\n            const instances = contentSdk.resolveElement({\n                element,\n                state: state.value,\n                elementBindings: elementBindings.value,\n                onResolved\n            });\n\n            if (!instances) {\n                return null;\n            }\n\n            const vnodes = instances.map((resolved, index) => {\n                const { component: Component, inputs, styles, manifest } = resolved;\n                const autoApplyStyles = manifest.autoApplyStyles !== false;\n\n                const userVNode = h(Component, {\n                    key: `${element.id}-${index}`,\n                    inputs,\n                    styles,\n                    element,\n                    breakpoint: breakpoint.value\n                });\n\n                if (!autoApplyStyles) {\n                    return userVNode;\n                }\n\n                return h(\"div\", { key: `wrapper-${index}`, style: styles }, [userVNode]);\n            });\n\n            return h(Fragment, null, vnodes);\n        };\n    }\n});\n"],"names":["LiveElementRenderer","defineComponent","Object","props","viewport","useViewport","breakpoint","ref","onMounted","watch","newBp","elementId","computed","elementBindings","useBindingsForElement","state","useDocumentState","element","onResolved","value","input","elements","h","ElementSlot","instances","contentSdk","vnodes","resolved","index","Component","inputs","styles","manifest","autoApplyStyles","userVNode","Fragment"],"mappings":";;;;;;AAgBO,MAAMA,sBAAsBC,gBAAgB;IAC/C,MAAM;IAEN,OAAO;QACH,SAAS;YAAE,MAAMC;YAAqC,UAAU;QAAK;IACzE;IAEA,OAAMC,KAAK;QACP,MAAMC,WAAWC;QAGjB,MAAMC,aAAaC,IAAY;QAE/BC,UAAU;YACN,IAAIJ,SAAS,KAAK,EAAE,YAChBE,WAAW,KAAK,GAAGF,SAAS,KAAK,CAAC,UAAU;QAEpD;QAEAK,MACI,IAAML,SAAS,KAAK,EAAE,YACtBM,CAAAA;YACI,IAAIA,SAASA,UAAUJ,WAAW,KAAK,EACnCA,WAAW,KAAK,GAAGI;QAE3B;QAGJ,MAAMC,YAAYC,SAAS,IAAMT,MAAM,OAAO,EAAE,MAAM;QACtD,MAAMU,kBAAkBC,sBAAsBH,UAAU,KAAK,EAAEL;QAC/D,MAAMS,QAAQC;QAEd,OAAO;YACH,MAAM,EAAEC,OAAO,EAAE,GAAGd;YACpB,IAAI,CAACc,SAAS,WACV,OAAO;YAGX,MAAMC,aAAa,CAACC,OAAgBC;gBAChC,IAAIA,AAAe,WAAfA,MAAM,IAAI,EAAa;oBACvB,MAAMC,WAAYD,MAA6B,IAAI,GAC5CD,QACD;wBAACA;qBAAgB;oBACvB,OAAOG,EAAEC,aAAa;wBAClB,UAAUN,QAAQ,EAAE;wBACpB,MAAMG,MAAM,IAAI;wBAChBC;oBACJ;gBACJ;gBACA,OAAOF;YACX;YAEA,MAAMK,YAAYC,WAAW,cAAc,CAAC;gBACxCR;gBACA,OAAOF,MAAM,KAAK;gBAClB,iBAAiBF,gBAAgB,KAAK;gBACtCK;YACJ;YAEA,IAAI,CAACM,WACD,OAAO;YAGX,MAAME,SAASF,UAAU,GAAG,CAAC,CAACG,UAAUC;gBACpC,MAAM,EAAE,WAAWC,SAAS,EAAEC,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAE,GAAGL;gBAC3D,MAAMM,kBAAkBD,AAA6B,UAA7BA,SAAS,eAAe;gBAEhD,MAAME,YAAYZ,EAAEO,WAAW;oBAC3B,KAAK,GAAGZ,QAAQ,EAAE,CAAC,CAAC,EAAEW,OAAO;oBAC7BE;oBACAC;oBACAd;oBACA,YAAYX,WAAW,KAAK;gBAChC;gBAEA,IAAI,CAAC2B,iBACD,OAAOC;gBAGX,OAAOZ,EAAE,OAAO;oBAAE,KAAK,CAAC,QAAQ,EAAEM,OAAO;oBAAE,OAAOG;gBAAO,GAAG;oBAACG;iBAAU;YAC3E;YAEA,OAAOZ,EAAEa,UAAU,MAAMT;QAC7B;IACJ;AACJ"}

package/components/LiveElementSlot.d.ts

@@ -0,0 +1,21 @@
+import { type PropType } from "vue";
+export declare const setElementRenderer: (c: unknown) => void;
+/**
+ * Renders a flat list of element IDs as sibling ElementRenderer instances,
+ * each wrapped in an index-provider and nested inside an incremented depth.
+ */
+export declare const LiveElementSlot: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    elements: {
+        type: PropType<string[]>;
+        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<{
+    elements: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+}>> & Readonly<{}>, {
+    elements: string[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/components/LiveElementSlot.js

@@ -0,0 +1,36 @@
+import { defineComponent, h } from "vue";
+import { ElementSlotDepthProvider, useElementSlotDepth } from "./ElementSlotDepthProvider.js";
+import { ElementIndexProvider } from "./ElementIndexProvider.js";
+import { setLiveElementSlot } from "./PreviewElementSlot.js";
+let ElementRenderer;
+const setElementRenderer = (c)=>{
+    ElementRenderer = c;
+};
+const LiveElementSlot = defineComponent({
+    name: "WebinyLiveElementSlot",
+    props: {
+        elements: {
+            type: Array,
+            default: ()=>[]
+        }
+    },
+    setup (props) {
+        const depth = useElementSlotDepth();
+        return ()=>h(ElementSlotDepthProvider, {
+                depth: depth + 1
+            }, {
+                default: ()=>props.elements.map((id, index)=>h(ElementIndexProvider, {
+                            key: id,
+                            index
+                        }, {
+                            default: ()=>h(ElementRenderer, {
+                                    id
+                                })
+                        }))
+            });
+    }
+});
+setLiveElementSlot(LiveElementSlot);
+export { LiveElementSlot, setElementRenderer };
+
+//# sourceMappingURL=LiveElementSlot.js.map

package/components/LiveElementSlot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/LiveElementSlot.js","sources":["../../src/components/LiveElementSlot.ts"],"sourcesContent":["import { defineComponent, h, type PropType } from \"vue\";\nimport { ElementSlotDepthProvider, useElementSlotDepth } from \"./ElementSlotDepthProvider.js\";\nimport { ElementIndexProvider } from \"./ElementIndexProvider.js\";\nimport { setLiveElementSlot } from \"./PreviewElementSlot.js\";\n\n// Forward-declared to resolve the circular ElementRenderer ↔ LiveElementSlot cycle.\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nlet ElementRenderer: any;\nexport const setElementRenderer = (c: unknown) => {\n    ElementRenderer = c;\n};\n\n/**\n * Renders a flat list of element IDs as sibling ElementRenderer instances,\n * each wrapped in an index-provider and nested inside an incremented depth.\n */\nexport const LiveElementSlot = defineComponent({\n    name: \"WebinyLiveElementSlot\",\n\n    props: {\n        elements: { type: Array as PropType<string[]>, default: () => [] }\n    },\n\n    setup(props) {\n        const depth = useElementSlotDepth();\n\n        return () =>\n            h(\n                ElementSlotDepthProvider,\n                { depth: depth + 1 },\n                {\n                    default: () =>\n                        props.elements.map((id, index) =>\n                            h(\n                                ElementIndexProvider,\n                                { key: id, index },\n                                { default: () => h(ElementRenderer, { id }) }\n                            )\n                        )\n                }\n            );\n    }\n});\n\n// Break the circular dependency: PreviewElementSlot needs LiveElementSlot.\nsetLiveElementSlot(LiveElementSlot);\n"],"names":["ElementRenderer","setElementRenderer","c","LiveElementSlot","defineComponent","Array","props","depth","useElementSlotDepth","h","ElementSlotDepthProvider","id","index","ElementIndexProvider","setLiveElementSlot"],"mappings":";;;;AAOA,IAAIA;AACG,MAAMC,qBAAqB,CAACC;IAC/BF,kBAAkBE;AACtB;AAMO,MAAMC,kBAAkBC,gBAAgB;IAC3C,MAAM;IAEN,OAAO;QACH,UAAU;YAAE,MAAMC;YAA6B,SAAS,IAAM,EAAE;QAAC;IACrE;IAEA,OAAMC,KAAK;QACP,MAAMC,QAAQC;QAEd,OAAO,IACHC,EACIC,0BACA;gBAAE,OAAOH,QAAQ;YAAE,GACnB;gBACI,SAAS,IACLD,MAAM,QAAQ,CAAC,GAAG,CAAC,CAACK,IAAIC,QACpBH,EACII,sBACA;4BAAE,KAAKF;4BAAIC;wBAAM,GACjB;4BAAE,SAAS,IAAMH,EAAET,iBAAiB;oCAAEW;gCAAG;wBAAG;YAG5D;IAEZ;AACJ;AAGAG,mBAAmBX"}

package/components/PreviewElementSlot.d.ts

@@ -0,0 +1,38 @@
+import { type PropType } from "vue";
+export declare const setLiveElementSlot: (c: unknown) => void;
+/**
+ * In editing mode, renders an empty placeholder div when the slot has no
+ * children (so the editor can show a drop zone).  Otherwise delegates to
+ * LiveElementSlot.
+ */
+export declare const PreviewElementSlot: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    parentId: {
+        type: StringConstructor;
+        required: true;
+    };
+    slot: {
+        type: StringConstructor;
+        required: true;
+    };
+    elements: {
+        type: PropType<string[]>;
+        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<{
+    parentId: {
+        type: StringConstructor;
+        required: true;
+    };
+    slot: {
+        type: StringConstructor;
+        required: true;
+    };
+    elements: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+}>> & Readonly<{}>, {
+    elements: string[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/components/PreviewElementSlot.js

@@ -0,0 +1,45 @@
+import { defineComponent, h } from "vue";
+import { useElementSlotDepth } from "./ElementSlotDepthProvider.js";
+let LiveElementSlot;
+const setLiveElementSlot = (c)=>{
+    LiveElementSlot = c;
+};
+const PreviewElementSlot = defineComponent({
+    name: "WebinyPreviewElementSlot",
+    props: {
+        parentId: {
+            type: String,
+            required: true
+        },
+        slot: {
+            type: String,
+            required: true
+        },
+        elements: {
+            type: Array,
+            default: ()=>[]
+        }
+    },
+    setup (props) {
+        const depth = useElementSlotDepth();
+        return ()=>{
+            if (!props.elements.length) return h("div", {
+                style: {
+                    height: "100px",
+                    width: "100% !important"
+                },
+                "data-role": "element-slot",
+                "data-parent-id": props.parentId,
+                "data-parent-slot": props.slot,
+                "data-depth": depth,
+                "data-empty": true
+            });
+            return h(LiveElementSlot, {
+                elements: props.elements
+            });
+        };
+    }
+});
+export { PreviewElementSlot, setLiveElementSlot };
+
+//# sourceMappingURL=PreviewElementSlot.js.map

package/components/PreviewElementSlot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components/PreviewElementSlot.js","sources":["../../src/components/PreviewElementSlot.ts"],"sourcesContent":["import { defineComponent, h, type PropType } from \"vue\";\nimport { useElementSlotDepth } from \"./ElementSlotDepthProvider.js\";\n\n// Forward-declare to avoid circular dep at module init time.\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nlet LiveElementSlot: any;\nexport const setLiveElementSlot = (c: unknown) => {\n    LiveElementSlot = c;\n};\n\n/**\n * In editing mode, renders an empty placeholder div when the slot has no\n * children (so the editor can show a drop zone).  Otherwise delegates to\n * LiveElementSlot.\n */\nexport const PreviewElementSlot = defineComponent({\n    name: \"WebinyPreviewElementSlot\",\n\n    props: {\n        parentId: { type: String, required: true },\n        slot: { type: String, required: true },\n        elements: { type: Array as PropType<string[]>, default: () => [] }\n    },\n\n    setup(props) {\n        const depth = useElementSlotDepth();\n\n        return () => {\n            if (!props.elements.length) {\n                return h(\"div\", {\n                    style: { height: \"100px\", width: \"100% !important\" },\n                    \"data-role\": \"element-slot\",\n                    \"data-parent-id\": props.parentId,\n                    \"data-parent-slot\": props.slot,\n                    \"data-depth\": depth,\n                    \"data-empty\": true\n                });\n            }\n\n            return h(LiveElementSlot, { elements: props.elements });\n        };\n    }\n});\n"],"names":["LiveElementSlot","setLiveElementSlot","c","PreviewElementSlot","defineComponent","String","Array","props","depth","useElementSlotDepth","h"],"mappings":";;AAKA,IAAIA;AACG,MAAMC,qBAAqB,CAACC;IAC/BF,kBAAkBE;AACtB;AAOO,MAAMC,qBAAqBC,gBAAgB;IAC9C,MAAM;IAEN,OAAO;QACH,UAAU;YAAE,MAAMC;YAAQ,UAAU;QAAK;QACzC,MAAM;YAAE,MAAMA;YAAQ,UAAU;QAAK;QACrC,UAAU;YAAE,MAAMC;YAA6B,SAAS,IAAM,EAAE;QAAC;IACrE;IAEA,OAAMC,KAAK;QACP,MAAMC,QAAQC;QAEd,OAAO;YACH,IAAI,CAACF,MAAM,QAAQ,CAAC,MAAM,EACtB,OAAOG,EAAE,OAAO;gBACZ,OAAO;oBAAE,QAAQ;oBAAS,OAAO;gBAAkB;gBACnD,aAAa;gBACb,kBAAkBH,MAAM,QAAQ;gBAChC,oBAAoBA,MAAM,IAAI;gBAC9B,cAAcC;gBACd,cAAc;YAClB;YAGJ,OAAOE,EAAEV,iBAAiB;gBAAE,UAAUO,MAAM,QAAQ;YAAC;QACzD;IACJ;AACJ"}

package/{src/components/index.ts → components/index.d.ts}

@@ -1,17 +1,8 @@
 export { DocumentRenderer } from "./DocumentRenderer.js";
 export { DocumentFragment, type DocumentFragmentProps } from "./DocumentFragment.js";
 export { ElementSlot } from "./ElementSlot.js";
-export {
-    DocumentStoreProvider,
-    useDocumentStore,
-    DOCUMENT_STORE_KEY
-} from "./DocumentStoreProvider.js";
-export {
-    FragmentsProvider,
-    useDocumentFragments,
-    type DocumentFragmentConfig,
-    type DocumentFragments
-} from "./FragmentsProvider.js";
+export { DocumentStoreProvider, useDocumentStore, DOCUMENT_STORE_KEY } from "./DocumentStoreProvider.js";
+export { FragmentsProvider, useDocumentFragments, type DocumentFragmentConfig, type DocumentFragments } from "./FragmentsProvider.js";
 export { ElementSlotDepthProvider, useElementSlotDepth } from "./ElementSlotDepthProvider.js";
 export { ElementIndexProvider, useElementIndex } from "./ElementIndexProvider.js";
 export { EditingElementRenderer } from "./EditingElementRenderer/index.js";

package/components/index.js

@@ -0,0 +1,8 @@
+export { DocumentRenderer } from "./DocumentRenderer.js";
+export { DocumentFragment } from "./DocumentFragment.js";
+export { ElementSlot } from "./ElementSlot.js";
+export { DOCUMENT_STORE_KEY, DocumentStoreProvider, useDocumentStore } from "./DocumentStoreProvider.js";
+export { FragmentsProvider, useDocumentFragments } from "./FragmentsProvider.js";
+export { ElementSlotDepthProvider, useElementSlotDepth } from "./ElementSlotDepthProvider.js";
+export { ElementIndexProvider, useElementIndex } from "./ElementIndexProvider.js";
+export { EditingElementRenderer } from "./EditingElementRenderer/index.js";