@webiny/website-builder-sdk 0.0.0-unstable.e6f0dc8ca7 → 0.0.0-unstable.eb81deee7e

package/EditingSdk.js

@@ -1,6 +1,5 @@
 "use client";
-
-import { Messenger, MessageOrigin } from "./messenger/index.js";
+import { MessageOrigin, Messenger } from "./messenger/index.js";
 import { logger } from "./Logger.js";
 import { PreviewViewport } from "./PreviewViewport.js";
 import { viewportManager } from "./ViewportManager.js";
@@ -9,132 +8,104 @@ import { functionConverter } from "./FunctionConverter.js";
 import { documentStoreManager } from "./DocumentStoreManager.js";
 import { PreviewDocument } from "./PreviewDocument.js";
 import { hashObject } from "./HashObject.js";
-export class EditingSdk {
-  positionReportingEnabled = false;
-  previewViewport = null;
-  lastBoxesHash = 0;
-  constructor(liveSdk, theme) {
-    this.liveSdk = liveSdk;
-    const source = new MessageOrigin(() => window, window.location.origin);
-    const target = new MessageOrigin(() => window.parent, this.getReferrerOrigin());
-    this.previewDocument = PreviewDocument.createFromWindow();
-    this.documentStore = documentStoreManager.getStore(this.previewDocument.getId());
-    this.messenger = new Messenger(source, target, "wb.editor.*");
-    componentRegistry.onRegister(reg => {
-      this.messenger.send("preview.component.register", reg.component.manifest);
-    });
-    this.setupListeners();
-    this.messenger.send("preview.ready", true);
-    if (theme) {
-      this.messenger.send("preview.theme", {
-        theme
-      });
+class EditingSdk {
+    constructor(liveSdk, theme){
+        this.positionReportingEnabled = false;
+        this.previewViewport = null;
+        this.lastBoxesHash = 0;
+        this.liveSdk = liveSdk;
+        const source = new MessageOrigin(()=>window, window.location.origin);
+        const target = new MessageOrigin(()=>window.parent, this.getReferrerOrigin());
+        this.previewDocument = PreviewDocument.createFromWindow();
+        this.documentStore = documentStoreManager.getStore(this.previewDocument.getId());
+        this.messenger = new Messenger(source, target, "wb.editor.*");
+        componentRegistry.onRegister((reg)=>{
+            this.messenger.send("preview.component.register", reg.component.manifest);
+        });
+        this.setupListeners();
+        this.messenger.send("preview.ready", true);
+        if (theme) this.messenger.send("preview.theme", {
+            theme
+        });
+        this.disableLinks();
     }
-    this.disableLinks();
-  }
-  async getPage(path) {
-    if (!this.previewDocument.matches({
-      type: "page",
-      path
-    })) {
-      return this.liveSdk.getPage(path);
+    async getPage(path) {
+        if (!this.previewDocument.matches({
+            type: "page",
+            path
+        })) return this.liveSdk.getPage(path);
+        await this.documentStore.waitForDocument();
+        return this.documentStore.getDocument();
     }
-    await this.documentStore.waitForDocument();
-    return this.documentStore.getDocument();
-  }
-  async listPages(options) {
-    return this.liveSdk.listPages(options);
-  }
-  registerComponentGroup(group) {
-    this.messenger.send("preview.componentGroup.register", {
-      ...group,
-      filter: group.filter ? functionConverter.serialize(group.filter) : undefined
-    });
-  }
-  getReferrerOrigin() {
-    try {
-      const searchParams = new URLSearchParams(window.location.search);
-      return searchParams.get("wb.referrer");
-    } catch {
-      return "";
+    async listPages(options) {
+        return this.liveSdk.listPages(options);
     }
-  }
-  setupListeners() {
-    if (!this.messenger) {
-      return;
+    registerComponentGroup(group) {
+        this.messenger.send("preview.componentGroup.register", {
+            ...group,
+            filter: group.filter ? functionConverter.serialize(group.filter) : void 0
+        });
     }
-    this.messenger.on("document.set", data => {
-      this.documentStore.setDocument(data);
-      if (!this.positionReportingEnabled) {
-        // Initialize position reporting
-        this.initPositionReporting();
-      }
-    });
-    this.messenger.on("element.set", data => {
-      this.documentStore.updateElement(data.id, data.patch);
-    });
-    this.messenger.on("document.patch", patch => {
-      this.documentStore.applyPatch(patch);
-    });
-  }
-  initPositionReporting() {
-    if (this.positionReportingEnabled) {
-      return;
+    getReferrerOrigin() {
+        try {
+            const searchParams = new URLSearchParams(window.location.search);
+            return searchParams.get("wb.referrer");
+        } catch  {
+            return "";
+        }
     }
-
-    // Initialize element positions tracker
-    this.previewViewport = new PreviewViewport();
-
-    // Add event listeners
-    viewportManager.onViewportChangeStart(() => {
-      if (this.messenger) {
-        this.messenger.send("preview.viewport.change.start");
-      }
-    });
-    viewportManager.onViewportChangeEnd(() => {
-      if (this.messenger) {
-        this.messenger.send("preview.viewport.change.end");
-      }
-    });
-
-    // Enable position reporting by default
-    this.positionReportingEnabled = true;
-
-    // Report positions periodically
-    setInterval(() => this.reportBoxes(), 300);
-  }
-  reportBoxes() {
-    if (!this.messenger || !this.previewViewport) {
-      logger.warn("No messenger or preview viewport. Skipping position reporting.");
-      return;
+    setupListeners() {
+        if (!this.messenger) return;
+        this.messenger.on("document.set", (data)=>{
+            this.documentStore.setDocument(data);
+            if (!this.positionReportingEnabled) this.initPositionReporting();
+        });
+        this.messenger.on("element.set", (data)=>{
+            this.documentStore.updateElement(data.id, data.patch);
+        });
+        this.messenger.on("document.patch", (patch)=>{
+            this.documentStore.applyPatch(patch);
+        });
+        this.messenger.on("theme.mode", ({ mode })=>{
+            const root = document.documentElement;
+            if ("light" === mode || "dark" === mode) root.setAttribute("data-wby-theme-mode", mode);
+            else root.removeAttribute("data-wby-theme-mode");
+        });
     }
-    const newBoxes = this.previewViewport.getBoxes();
-    const hash = hashObject.hash(newBoxes);
-    if (hash === this.lastBoxesHash) {
-      return;
+    initPositionReporting() {
+        if (this.positionReportingEnabled) return;
+        this.previewViewport = new PreviewViewport();
+        viewportManager.onViewportChangeStart(()=>{
+            if (this.messenger) this.messenger.send("preview.viewport.change.start");
+        });
+        viewportManager.onViewportChangeEnd(()=>{
+            if (this.messenger) this.messenger.send("preview.viewport.change.end");
+        });
+        this.positionReportingEnabled = true;
+        setInterval(()=>this.reportBoxes(), 300);
+    }
+    reportBoxes() {
+        if (!this.messenger || !this.previewViewport) return void logger.warn("No messenger or preview viewport. Skipping position reporting.");
+        const newBoxes = this.previewViewport.getBoxes();
+        const hash = hashObject.hash(newBoxes);
+        if (hash === this.lastBoxesHash) return;
+        this.lastBoxesHash = hash;
+        this.messenger.send("preview.viewport", {
+            boxes: this.previewViewport.getBoxes(),
+            viewport: this.previewViewport.getViewport()
+        });
+    }
+    disableLinks() {
+        document.addEventListener("click", (event)=>{
+            const target = event.target;
+            const anchor = target.closest("a");
+            if (anchor && anchor.href) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        }, true);
     }
-    this.lastBoxesHash = hash;
-    // Send positions to the editor
-    this.messenger.send("preview.viewport", {
-      boxes: this.previewViewport.getBoxes(),
-      viewport: this.previewViewport.getViewport()
-    });
-  }
-  disableLinks() {
-    // Intercept link clicks when we're in the editing mode (loaded via iframe from the editor).
-    document.addEventListener("click", event => {
-      const target = event.target;
-
-      // Check if the clicked element or any of its ancestors is a link
-      const anchor = target.closest("a");
-      if (anchor && anchor.href) {
-        event.preventDefault();
-        event.stopPropagation();
-      }
-    },
-    // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#usecapture
-    true);
-  }
 }
+export { EditingSdk };
 
 //# sourceMappingURL=EditingSdk.js.map

package/EditingSdk.js.map

@@ -1 +1 @@
-{"version":3,"names":["Messenger","MessageOrigin","logger","PreviewViewport","viewportManager","componentRegistry","functionConverter","documentStoreManager","PreviewDocument","hashObject","EditingSdk","positionReportingEnabled","previewViewport","lastBoxesHash","constructor","liveSdk","theme","source","window","location","origin","target","parent","getReferrerOrigin","previewDocument","createFromWindow","documentStore","getStore","getId","messenger","onRegister","reg","send","component","manifest","setupListeners","disableLinks","getPage","path","matches","type","waitForDocument","getDocument","listPages","options","registerComponentGroup","group","filter","serialize","undefined","searchParams","URLSearchParams","search","get","on","data","setDocument","initPositionReporting","updateElement","id","patch","applyPatch","onViewportChangeStart","onViewportChangeEnd","setInterval","reportBoxes","warn","newBoxes","getBoxes","hash","boxes","viewport","getViewport","document","addEventListener","event","anchor","closest","href","preventDefault","stopPropagation"],"sources":["EditingSdk.ts"],"sourcesContent":["\"use client\";\nimport type {\n    ComponentGroup,\n    IContentSdk,\n    ListPagesOptions,\n    ListPagesResult,\n    PublicPage\n} from \"./types.js\";\nimport { Messenger, MessageOrigin } from \"./messenger/index.js\";\nimport { logger } from \"./Logger.js\";\nimport { PreviewViewport } from \"./PreviewViewport.js\";\nimport { viewportManager } from \"./ViewportManager.js\";\nimport { componentRegistry } from \"./ComponentRegistry.js\";\nimport { functionConverter } from \"./FunctionConverter.js\";\nimport { documentStoreManager } from \"~/DocumentStoreManager.js\";\nimport type { DocumentStore } from \"~/DocumentStore.js\";\nimport { PreviewDocument } from \"./PreviewDocument.js\";\nimport { hashObject } from \"~/HashObject.js\";\nimport type { WebsiteBuilderTheme } from \"~/types/WebsiteBuilderTheme.js\";\n\nexport class EditingSdk implements IContentSdk {\n    public readonly messenger: Messenger;\n    private positionReportingEnabled = false;\n    private previewViewport: PreviewViewport | null = null;\n    private liveSdk: IContentSdk;\n    private documentStore: DocumentStore<PublicPage>;\n    private previewDocument: PreviewDocument;\n    private lastBoxesHash = 0;\n\n    constructor(liveSdk: IContentSdk, theme: WebsiteBuilderTheme) {\n        this.liveSdk = liveSdk;\n\n        const source = new MessageOrigin(() => window, window.location.origin);\n        const target = new MessageOrigin(() => window.parent, this.getReferrerOrigin());\n\n        this.previewDocument = PreviewDocument.createFromWindow();\n\n        this.documentStore = documentStoreManager.getStore<PublicPage>(\n            this.previewDocument.getId()\n        );\n\n        this.messenger = new Messenger(source, target, \"wb.editor.*\");\n\n        componentRegistry.onRegister(reg => {\n            this.messenger.send(\"preview.component.register\", reg.component.manifest);\n        });\n\n        this.setupListeners();\n\n        this.messenger.send(\"preview.ready\", true);\n\n        if (theme) {\n            this.messenger.send(\"preview.theme\", { theme });\n        }\n\n        this.disableLinks();\n    }\n\n    public async getPage(path: string): Promise<PublicPage | null> {\n        if (!this.previewDocument.matches({ type: \"page\", path })) {\n            return this.liveSdk.getPage(path);\n        }\n\n        await this.documentStore.waitForDocument();\n        return this.documentStore.getDocument();\n    }\n\n    public async listPages(options?: ListPagesOptions): Promise<ListPagesResult> {\n        return this.liveSdk.listPages(options);\n    }\n\n    registerComponentGroup(group: ComponentGroup) {\n        this.messenger.send(\"preview.componentGroup.register\", {\n            ...group,\n            filter: group.filter ? functionConverter.serialize(group.filter) : undefined\n        });\n    }\n\n    private getReferrerOrigin(): string {\n        try {\n            const searchParams = new URLSearchParams(window.location.search);\n            return searchParams.get(\"wb.referrer\")!;\n        } catch {\n            return \"\";\n        }\n    }\n\n    private setupListeners() {\n        if (!this.messenger) {\n            return;\n        }\n\n        this.messenger.on(\"document.set\", data => {\n            this.documentStore.setDocument(data);\n\n            if (!this.positionReportingEnabled) {\n                // Initialize position reporting\n                this.initPositionReporting();\n            }\n        });\n\n        this.messenger.on(\"element.set\", data => {\n            this.documentStore.updateElement(data.id, data.patch);\n        });\n\n        this.messenger.on(\"document.patch\", patch => {\n            this.documentStore.applyPatch(patch);\n        });\n    }\n\n    private initPositionReporting(): void {\n        if (this.positionReportingEnabled) {\n            return;\n        }\n\n        // Initialize element positions tracker\n        this.previewViewport = new PreviewViewport();\n\n        // Add event listeners\n        viewportManager.onViewportChangeStart(() => {\n            if (this.messenger) {\n                this.messenger.send(\"preview.viewport.change.start\");\n            }\n        });\n\n        viewportManager.onViewportChangeEnd(() => {\n            if (this.messenger) {\n                this.messenger.send(\"preview.viewport.change.end\");\n            }\n        });\n\n        // Enable position reporting by default\n        this.positionReportingEnabled = true;\n\n        // Report positions periodically\n        setInterval(() => this.reportBoxes(), 300);\n    }\n\n    private reportBoxes(): void {\n        if (!this.messenger || !this.previewViewport) {\n            logger.warn(\"No messenger or preview viewport. Skipping position reporting.\");\n            return;\n        }\n\n        const newBoxes = this.previewViewport.getBoxes();\n        const hash = hashObject.hash(newBoxes);\n        if (hash === this.lastBoxesHash) {\n            return;\n        }\n\n        this.lastBoxesHash = hash;\n        // Send positions to the editor\n        this.messenger.send(\"preview.viewport\", {\n            boxes: this.previewViewport.getBoxes(),\n            viewport: this.previewViewport.getViewport()\n        });\n    }\n\n    private disableLinks() {\n        // Intercept link clicks when we're in the editing mode (loaded via iframe from the editor).\n        document.addEventListener(\n            \"click\",\n            event => {\n                const target = event.target as HTMLElement;\n\n                // Check if the clicked element or any of its ancestors is a link\n                const anchor = target.closest(\"a\");\n\n                if (anchor && anchor.href) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                }\n            },\n            // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#usecapture\n            true\n        );\n    }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"EditingSdk.js","sources":["../src/EditingSdk.ts"],"sourcesContent":["\"use client\";\nimport type {\n    ComponentGroup,\n    IContentSdk,\n    ListPagesOptions,\n    ListPagesResult,\n    PublicPage\n} from \"./types.js\";\nimport { Messenger, MessageOrigin } from \"./messenger/index.js\";\nimport { logger } from \"./Logger.js\";\nimport { PreviewViewport } from \"./PreviewViewport.js\";\nimport { viewportManager } from \"./ViewportManager.js\";\nimport { componentRegistry } from \"./ComponentRegistry.js\";\nimport { functionConverter } from \"./FunctionConverter.js\";\nimport { documentStoreManager } from \"~/DocumentStoreManager.js\";\nimport type { DocumentStore } from \"~/DocumentStore.js\";\nimport { PreviewDocument } from \"./PreviewDocument.js\";\nimport { hashObject } from \"~/HashObject.js\";\nimport type { WebsiteBuilderTheme } from \"~/types/WebsiteBuilderTheme.js\";\n\nexport class EditingSdk implements IContentSdk {\n    public readonly messenger: Messenger;\n    private positionReportingEnabled = false;\n    private previewViewport: PreviewViewport | null = null;\n    private liveSdk: IContentSdk;\n    private documentStore: DocumentStore<PublicPage>;\n    private previewDocument: PreviewDocument;\n    private lastBoxesHash = 0;\n\n    constructor(liveSdk: IContentSdk, theme: WebsiteBuilderTheme) {\n        this.liveSdk = liveSdk;\n\n        const source = new MessageOrigin(() => window, window.location.origin);\n        const target = new MessageOrigin(() => window.parent, this.getReferrerOrigin());\n\n        this.previewDocument = PreviewDocument.createFromWindow();\n\n        this.documentStore = documentStoreManager.getStore<PublicPage>(\n            this.previewDocument.getId()\n        );\n\n        this.messenger = new Messenger(source, target, \"wb.editor.*\");\n\n        componentRegistry.onRegister(reg => {\n            this.messenger.send(\"preview.component.register\", reg.component.manifest);\n        });\n\n        this.setupListeners();\n\n        this.messenger.send(\"preview.ready\", true);\n\n        if (theme) {\n            this.messenger.send(\"preview.theme\", { theme });\n        }\n\n        this.disableLinks();\n    }\n\n    public async getPage(path: string): Promise<PublicPage | null> {\n        if (!this.previewDocument.matches({ type: \"page\", path })) {\n            return this.liveSdk.getPage(path);\n        }\n\n        await this.documentStore.waitForDocument();\n        return this.documentStore.getDocument();\n    }\n\n    public async listPages(options?: ListPagesOptions): Promise<ListPagesResult> {\n        return this.liveSdk.listPages(options);\n    }\n\n    registerComponentGroup(group: ComponentGroup) {\n        this.messenger.send(\"preview.componentGroup.register\", {\n            ...group,\n            filter: group.filter ? functionConverter.serialize(group.filter) : undefined\n        });\n    }\n\n    private getReferrerOrigin(): string {\n        try {\n            const searchParams = new URLSearchParams(window.location.search);\n            return searchParams.get(\"wb.referrer\")!;\n        } catch {\n            return \"\";\n        }\n    }\n\n    private setupListeners() {\n        if (!this.messenger) {\n            return;\n        }\n\n        this.messenger.on(\"document.set\", data => {\n            this.documentStore.setDocument(data);\n\n            if (!this.positionReportingEnabled) {\n                // Initialize position reporting\n                this.initPositionReporting();\n            }\n        });\n\n        this.messenger.on(\"element.set\", data => {\n            this.documentStore.updateElement(data.id, data.patch);\n        });\n\n        this.messenger.on(\"document.patch\", patch => {\n            this.documentStore.applyPatch(patch);\n        });\n\n        // Light/dark preview: the theme's dark values are declared under this attribute on the page's\n        // own `:root`, so the editor's mode toggle drives it here, inside the iframe document.\n        this.messenger.on(\"theme.mode\", ({ mode }: { mode?: string }) => {\n            const root = document.documentElement;\n            if (mode === \"light\" || mode === \"dark\") {\n                root.setAttribute(\"data-wby-theme-mode\", mode);\n            } else {\n                root.removeAttribute(\"data-wby-theme-mode\");\n            }\n        });\n    }\n\n    private initPositionReporting(): void {\n        if (this.positionReportingEnabled) {\n            return;\n        }\n\n        // Initialize element positions tracker\n        this.previewViewport = new PreviewViewport();\n\n        // Add event listeners\n        viewportManager.onViewportChangeStart(() => {\n            if (this.messenger) {\n                this.messenger.send(\"preview.viewport.change.start\");\n            }\n        });\n\n        viewportManager.onViewportChangeEnd(() => {\n            if (this.messenger) {\n                this.messenger.send(\"preview.viewport.change.end\");\n            }\n        });\n\n        // Enable position reporting by default\n        this.positionReportingEnabled = true;\n\n        // Report positions periodically\n        setInterval(() => this.reportBoxes(), 300);\n    }\n\n    private reportBoxes(): void {\n        if (!this.messenger || !this.previewViewport) {\n            logger.warn(\"No messenger or preview viewport. Skipping position reporting.\");\n            return;\n        }\n\n        const newBoxes = this.previewViewport.getBoxes();\n        const hash = hashObject.hash(newBoxes);\n        if (hash === this.lastBoxesHash) {\n            return;\n        }\n\n        this.lastBoxesHash = hash;\n        // Send positions to the editor\n        this.messenger.send(\"preview.viewport\", {\n            boxes: this.previewViewport.getBoxes(),\n            viewport: this.previewViewport.getViewport()\n        });\n    }\n\n    private disableLinks() {\n        // Intercept link clicks when we're in the editing mode (loaded via iframe from the editor).\n        document.addEventListener(\n            \"click\",\n            event => {\n                const target = event.target as HTMLElement;\n\n                // Check if the clicked element or any of its ancestors is a link\n                const anchor = target.closest(\"a\");\n\n                if (anchor && anchor.href) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                }\n            },\n            // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#usecapture\n            true\n        );\n    }\n}\n"],"names":["EditingSdk","liveSdk","theme","source","MessageOrigin","window","target","PreviewDocument","documentStoreManager","Messenger","componentRegistry","reg","path","options","group","functionConverter","undefined","searchParams","URLSearchParams","data","patch","mode","root","document","PreviewViewport","viewportManager","setInterval","logger","newBoxes","hash","hashObject","event","anchor"],"mappings":"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"}

package/ElementFactory.js

@@ -2,191 +2,183 @@ import { generateElementId } from "./generateElementId.js";
 import { DocumentOperations } from "./documentOperations/index.js";
 import { ComponentManifestToAstConverter } from "./ComponentManifestToAstConverter.js";
 import { ComponentInputTraverser } from "./ComponentInputTraverser.js";
+import { assertBindingShapes } from "./assertBindingShapes.js";
+import { logger } from "./Logger.js";
 const defaultStyles = {
-  display: "flex",
-  flexDirection: "column"
+    display: "flex",
+    flexDirection: "column"
 };
-const withDefaultStyles = styles => {
-  return {
-    ...defaultStyles,
-    ...styles
-  };
+const withDefaultStyles = (styles)=>({
+        ...defaultStyles,
+        ...styles
+    });
+const hasValueAtPath = (data, path)=>{
+    let current = data;
+    for (const segment of path.split("/")){
+        if (null == current) return false;
+        current = current[segment];
+    }
+    return null != current;
 };
 const defaultOperations = {
-  addElement: element => {
-    return new DocumentOperations.AddElement(element);
-  },
-  addToParent: (element, index) => {
-    return new DocumentOperations.AddToParent(element, index);
-  },
-  setInputBinding: (elementId, bindingPath, binding) => {
-    return new DocumentOperations.SetGlobalInputBinding(elementId, bindingPath, binding);
-  },
-  setStyleBinding: (elementId, bindingPath, binding) => {
-    return new DocumentOperations.SetGlobalStyleBinding(elementId, bindingPath, binding);
-  }
+    addElement: (element)=>new DocumentOperations.AddElement(element),
+    addToParent: (element, index)=>new DocumentOperations.AddToParent(element, index),
+    setInputBinding: (elementId, bindingPath, binding)=>new DocumentOperations.SetGlobalInputBinding(elementId, bindingPath, binding),
+    setStyleBinding: (elementId, bindingPath, binding)=>new DocumentOperations.SetGlobalStyleBinding(elementId, bindingPath, binding)
 };
-export class ElementFactory {
-  constructor(components) {
-    this.components = components;
-  }
-  createElementFromComponent({
-    componentName,
-    parentId,
-    slot,
-    index,
-    bindings
-  }) {
-    const {
-      element,
-      componentManifest,
-      inputsAst
-    } = this.createElement(componentName, parentId, slot);
-    const documentOps = [defaultOperations.addElement(element), defaultOperations.addToParent(element, index)];
-    documentOps.push(...this.generateOperations({
-      element,
-      inputsAst,
-      bindings: {
-        inputs: bindings?.inputs ?? componentManifest.defaults?.inputs ?? {},
-        styles: withDefaultStyles(bindings?.styles ?? componentManifest.defaults?.styles ?? {}),
-        overrides: bindings?.overrides ?? {}
-      },
-      operations: defaultOperations
-    }));
-    return {
-      element,
-      operations: documentOps
-    };
-  }
-  generateOperations({
-    element,
-    inputsAst,
-    bindings,
-    operations
-  }) {
-    const ops = this.generateOperationsFromBindings({
-      elementId: element.id,
-      inputsAst,
-      bindings,
-      operations,
-      ignoreDefaultValues: false
-    });
-    if (bindings.overrides) {
-      for (const [breakpoint, overrides] of Object.entries(bindings.overrides)) {
-        ops.push(...this.generateOperationsFromBindings({
-          elementId: element.id,
-          inputsAst,
-          bindings: {
-            inputs: overrides.inputs ?? {},
-            styles: overrides.styles ?? {}
-          },
-          operations: {
-            ...operations,
-            setInputBinding: (elementId, bindingPath, binding) => {
-              return new DocumentOperations.SetInputBindingOverride(elementId, bindingPath, binding, breakpoint);
+class ElementFactory {
+    constructor(components){
+        this.components = components;
+    }
+    createElementFromComponent({ componentName, parentId, slot, index, bindings }) {
+        const { element, componentManifest, inputsAst } = this.createElement(componentName, parentId, slot);
+        const documentOps = [
+            defaultOperations.addElement(element),
+            defaultOperations.addToParent(element, index)
+        ];
+        const baseStyles = bindings?.styles ?? componentManifest.defaults?.styles ?? {};
+        const resolvedStyles = false === componentManifest.applyDefaultStyles ? baseStyles : withDefaultStyles(baseStyles);
+        documentOps.push(...this.generateOperations({
+            element,
+            inputsAst,
+            bindings: {
+                inputs: bindings?.inputs ?? componentManifest.defaults?.inputs ?? {},
+                styles: resolvedStyles,
+                overrides: bindings?.overrides ?? {}
             },
-            setStyleBinding: (elementId, bindingPath, binding) => {
-              return new DocumentOperations.SetStyleBindingOverride(elementId, bindingPath, binding, breakpoint);
-            }
-          },
-          ignoreDefaultValues: true
+            operations: defaultOperations
         }));
-      }
+        return {
+            element,
+            operations: documentOps
+        };
     }
-    return ops;
-  }
-  generateOperationsFromBindings({
-    elementId,
-    inputsAst,
-    bindings,
-    operations,
-    ignoreDefaultValues
-  }) {
-    const inputData = bindings.inputs;
-    const traverser = new ComponentInputTraverser(inputsAst);
-    const ops = [];
-    traverser.traverse(inputData, (node, path, value) => {
-      const isCreateElement = value?.action === "CreateElement";
-      const isList = node.list;
-      const isObject = node.type === "object";
-      if (isCreateElement) {
-        const factory = new ElementFactory(this.components);
-        const newElement = factory.createElementFromComponent({
-          componentName: value.params.component,
-          // undefined index = append to end of the slot array
-          index: isList ? undefined : 0,
-          slot: path,
-          parentId: elementId,
-          bindings: value.params
+    generateOperations({ element, inputsAst, bindings, operations }) {
+        const ops = this.generateOperationsFromBindings({
+            elementId: element.id,
+            inputsAst,
+            bindings,
+            operations,
+            ignoreDefaultValues: false
         });
-        const newElementId = newElement.element.id;
-        ops.push(...newElement.operations);
-        if (isList) {
-          // For list slots, AddToParent already manages the static array.
-          // We only set metadata here.
-          ops.push(operations.setInputBinding(elementId, path, {
-            id: generateElementId(),
-            type: node.type,
-            translatable: node.input.translatable,
-            list: node.list
-          }));
-        } else {
-          ops.push(operations.setInputBinding(elementId, path, {
-            id: generateElementId(),
-            static: newElementId,
-            type: node.type,
-            translatable: node.input.translatable,
-            list: node.list
-          }));
+        if (bindings.overrides) for (const [breakpoint, overrides] of Object.entries(bindings.overrides))ops.push(...this.generateOperationsFromBindings({
+            elementId: element.id,
+            inputsAst,
+            bindings: {
+                inputs: overrides.inputs ?? {},
+                styles: overrides.styles ?? {}
+            },
+            operations: {
+                ...operations,
+                setInputBinding: (elementId, bindingPath, binding)=>new DocumentOperations.SetInputBindingOverride(elementId, bindingPath, binding, breakpoint),
+                setStyleBinding: (elementId, bindingPath, binding)=>new DocumentOperations.SetStyleBindingOverride(elementId, bindingPath, binding, breakpoint)
+            },
+            ignoreDefaultValues: true
+        }));
+        return ops;
+    }
+    generateOperationsFromBindings({ elementId, inputsAst, bindings, operations, ignoreDefaultValues }) {
+        const inputData = bindings.inputs;
+        const traverser = new ComponentInputTraverser(inputsAst);
+        const ops = [];
+        traverser.traverse(inputData, (node, path, value)=>{
+            const isCreateElement = value?.action === "CreateElement";
+            const isList = node.list;
+            const isObject = "object" === node.type;
+            if (isCreateElement) {
+                const factory = new ElementFactory(this.components);
+                const newElement = factory.createElementFromComponent({
+                    componentName: value.params.component,
+                    index: isList ? void 0 : 0,
+                    slot: path,
+                    parentId: elementId,
+                    bindings: value.params
+                });
+                const newElementId = newElement.element.id;
+                ops.push(...newElement.operations);
+                if (isList) ops.push(operations.setInputBinding(elementId, path, {
+                    id: generateElementId(),
+                    type: node.type,
+                    translatable: node.input.translatable,
+                    list: node.list
+                }));
+                else ops.push(operations.setInputBinding(elementId, path, {
+                    id: generateElementId(),
+                    static: newElementId,
+                    type: node.type,
+                    translatable: node.input.translatable,
+                    list: node.list
+                }));
+            } else if (isObject && isList && Array.isArray(value)) {
+                const defaults = node.input.defaultValue;
+                if (!ignoreDefaultValues && !hasValueAtPath(inputData, path) && Array.isArray(defaults) && defaults.length > 0) ops.push(...this.generateOperationsFromBindings({
+                    elementId,
+                    inputsAst: [
+                        {
+                            ...node,
+                            name: path
+                        }
+                    ],
+                    bindings: {
+                        inputs: {
+                            [path]: defaults
+                        },
+                        styles: {}
+                    },
+                    operations,
+                    ignoreDefaultValues
+                }));
+                return;
+            } else ops.push(operations.setInputBinding(elementId, path, {
+                id: generateElementId(),
+                static: ignoreDefaultValues ? void 0 : value ?? node.input.defaultValue,
+                type: node.type,
+                list: node.list,
+                translatable: node.input.translatable
+            }));
+        });
+        const written = {};
+        for (const op of ops){
+            const record = op;
+            if (record.elementId === elementId && "string" == typeof record.path && record.binding) written[record.path] = record.binding;
         }
-      } else if (isObject && isList) {
-        return;
-      } else {
-        ops.push(operations.setInputBinding(elementId, path, {
-          id: generateElementId(),
-          static: ignoreDefaultValues ? undefined : value ?? node.input.defaultValue,
-          type: node.type,
-          list: node.list,
-          translatable: node.input.translatable
+        for (const violation of assertBindingShapes({
+            inputs: written
+        }, inputsAst))logger.warn(`Binding "${violation.path}" declares a ${violation.declared} and holds a ${violation.found}.`);
+        for(const key in bindings.styles)ops.push(operations.setStyleBinding(elementId, key, {
+            static: bindings.styles[key]
         }));
-      }
-    });
-
-    // Process styles
-    for (const key in bindings.styles) {
-      ops.push(operations.setStyleBinding(elementId, key, {
-        static: bindings.styles[key]
-      }));
+        return ops;
     }
-    return ops;
-  }
-  getComponentManifest(componentName) {
-    const manifest = this.components[componentName];
-    if (!manifest) {
-      throw new Error(`Component "${componentName}" not registered.`);
+    getComponentManifest(componentName) {
+        const manifest = this.components[componentName];
+        if (!manifest) {
+            const registered = Object.keys(this.components).join(", ");
+            throw new Error(`Component "${componentName}" not registered. Registered components: ${registered}`);
+        }
+        return manifest;
+    }
+    createElement(componentName, parentId, slot) {
+        const element = {
+            type: "Webiny/Element",
+            id: generateElementId(),
+            parent: {
+                id: parentId,
+                slot
+            },
+            component: {
+                name: componentName
+            }
+        };
+        const componentManifest = this.getComponentManifest(componentName);
+        const inputsAst = ComponentManifestToAstConverter.convert(componentManifest.inputs ?? []);
+        return {
+            element,
+            inputsAst,
+            componentManifest
+        };
     }
-    return manifest;
-  }
-  createElement(componentName, parentId, slot) {
-    const element = {
-      type: "Webiny/Element",
-      id: generateElementId(),
-      parent: {
-        id: parentId,
-        slot
-      },
-      component: {
-        name: componentName
-      }
-    };
-    const componentManifest = this.getComponentManifest(componentName);
-    const inputsAst = ComponentManifestToAstConverter.convert(componentManifest.inputs ?? []);
-    return {
-      element,
-      inputsAst,
-      componentManifest
-    };
-  }
 }
+export { ElementFactory };
 
 //# sourceMappingURL=ElementFactory.js.map