@webiny/website-builder-sdk 6.3.0-beta.4 → 6.4.0-beta.0

package/ElementFactory.js.map

@@ -1 +1 @@
-{"version":3,"names":["generateElementId","DocumentOperations","ComponentManifestToAstConverter","ComponentInputTraverser","defaultStyles","display","flexDirection","withDefaultStyles","styles","defaultOperations","addElement","element","AddElement","addToParent","index","AddToParent","setInputBinding","elementId","bindingPath","binding","SetGlobalInputBinding","setStyleBinding","SetGlobalStyleBinding","ElementFactory","constructor","components","createElementFromComponent","componentName","parentId","slot","bindings","componentManifest","inputsAst","createElement","documentOps","push","generateOperations","inputs","defaults","overrides","operations","ops","generateOperationsFromBindings","id","ignoreDefaultValues","breakpoint","Object","entries","SetInputBindingOverride","SetStyleBindingOverride","inputData","traverser","traverse","node","path","value","isCreateElement","action","isList","list","isObject","type","factory","newElement","params","component","undefined","newElementId","translatable","input","static","defaultValue","key","getComponentManifest","manifest","Error","parent","name","convert"],"sources":["ElementFactory.ts"],"sourcesContent":["import { generateElementId } from \"./generateElementId.js\";\nimport type {\n    DocumentElement,\n    ComponentManifest,\n    InputValueBinding,\n    StyleValueBinding,\n    CssProperties\n} from \"~/types.js\";\nimport { type IDocumentOperation, DocumentOperations } from \"./documentOperations/index.js\";\nimport {\n    ComponentManifestToAstConverter,\n    type InputAstNode\n} from \"./ComponentManifestToAstConverter.js\";\nimport { ComponentInputTraverser } from \"./ComponentInputTraverser.js\";\n\nconst defaultStyles = {\n    display: \"flex\",\n    flexDirection: \"column\"\n};\n\nconst withDefaultStyles = (styles: CssProperties) => {\n    return { ...defaultStyles, ...styles };\n};\n\nexport interface ElementFactoryCreateElementParams {\n    componentName: string;\n    parentId: string;\n    slot: string;\n    index?: number;\n    bindings?: {\n        inputs?: Record<string, any>;\n        styles?: Record<string, any>;\n        overrides?: {\n            [breakpoint: string]: {\n                inputs?: Record<string, any>;\n                styles?: Record<string, any>;\n            };\n        };\n    };\n}\n\ninterface GenerateOperationsParams {\n    element: DocumentElement;\n    inputsAst: InputAstNode[];\n    operations: ElementFactoryOperations;\n    bindings: {\n        inputs: Record<string, any>;\n        styles: Record<string, any>;\n        overrides: {\n            [breakpoint: string]: {\n                inputs?: Record<string, any>;\n                styles?: Record<string, any>;\n            };\n        };\n    };\n}\n\ninterface GenerateOperationsFromBindingsParams {\n    elementId: string;\n    inputsAst: InputAstNode[];\n    bindings: {\n        inputs: Record<string, any>;\n        styles: Record<string, any>;\n    };\n    operations: ElementFactoryOperations;\n    ignoreDefaultValues: boolean;\n}\n\ntype ElementFactoryOperations = {\n    addElement: (element: DocumentElement) => IDocumentOperation;\n    addToParent: (element: DocumentElement, index?: number) => IDocumentOperation;\n    setInputBinding: (\n        elementId: string,\n        bindingPath: string,\n        binding: InputValueBinding\n    ) => IDocumentOperation;\n    setStyleBinding: (\n        elementId: string,\n        bindingPath: string,\n        binding: StyleValueBinding\n    ) => IDocumentOperation;\n};\n\nconst defaultOperations: ElementFactoryOperations = {\n    addElement: (element: DocumentElement) => {\n        return new DocumentOperations.AddElement(element);\n    },\n    addToParent: (element: DocumentElement, index?: number) => {\n        return new DocumentOperations.AddToParent(element, index);\n    },\n    setInputBinding: (elementId, bindingPath, binding) => {\n        return new DocumentOperations.SetGlobalInputBinding(elementId, bindingPath, binding);\n    },\n    setStyleBinding: (elementId, bindingPath, binding) => {\n        return new DocumentOperations.SetGlobalStyleBinding(elementId, bindingPath, binding);\n    }\n};\n\nexport class ElementFactory {\n    constructor(private components: Record<string, ComponentManifest>) {}\n\n    public createElementFromComponent({\n        componentName,\n        parentId,\n        slot,\n        index,\n        bindings\n    }: ElementFactoryCreateElementParams) {\n        const { element, componentManifest, inputsAst } = this.createElement(\n            componentName,\n            parentId,\n            slot\n        );\n\n        const documentOps: IDocumentOperation[] = [\n            defaultOperations.addElement(element),\n            defaultOperations.addToParent(element, index)\n        ];\n\n        documentOps.push(\n            ...this.generateOperations({\n                element,\n                inputsAst,\n                bindings: {\n                    inputs: bindings?.inputs ?? componentManifest.defaults?.inputs ?? {},\n                    styles: withDefaultStyles(\n                        bindings?.styles ?? componentManifest.defaults?.styles ?? {}\n                    ),\n                    overrides: bindings?.overrides ?? {}\n                },\n                operations: defaultOperations\n            })\n        );\n\n        return { element, operations: documentOps };\n    }\n\n    public generateOperations({\n        element,\n        inputsAst,\n        bindings,\n        operations\n    }: GenerateOperationsParams): IDocumentOperation[] {\n        const ops = this.generateOperationsFromBindings({\n            elementId: element.id,\n            inputsAst,\n            bindings,\n            operations,\n            ignoreDefaultValues: false\n        });\n\n        if (bindings.overrides) {\n            for (const [breakpoint, overrides] of Object.entries(bindings.overrides)) {\n                ops.push(\n                    ...this.generateOperationsFromBindings({\n                        elementId: element.id,\n                        inputsAst,\n                        bindings: {\n                            inputs: overrides.inputs ?? {},\n                            styles: overrides.styles ?? {}\n                        },\n                        operations: {\n                            ...operations,\n                            setInputBinding: (elementId, bindingPath, binding) => {\n                                return new DocumentOperations.SetInputBindingOverride(\n                                    elementId,\n                                    bindingPath,\n                                    binding,\n                                    breakpoint\n                                );\n                            },\n                            setStyleBinding: (elementId, bindingPath, binding) => {\n                                return new DocumentOperations.SetStyleBindingOverride(\n                                    elementId,\n                                    bindingPath,\n                                    binding,\n                                    breakpoint\n                                );\n                            }\n                        },\n                        ignoreDefaultValues: true\n                    })\n                );\n            }\n        }\n\n        return ops;\n    }\n\n    private generateOperationsFromBindings({\n        elementId,\n        inputsAst,\n        bindings,\n        operations,\n        ignoreDefaultValues\n    }: GenerateOperationsFromBindingsParams): IDocumentOperation[] {\n        const inputData = bindings.inputs;\n        const traverser = new ComponentInputTraverser(inputsAst);\n\n        const ops: IDocumentOperation[] = [];\n\n        traverser.traverse(inputData, (node, path, value) => {\n            const isCreateElement = value?.action === \"CreateElement\";\n            const isList = node.list;\n            const isObject = node.type === \"object\";\n\n            if (isCreateElement) {\n                const factory = new ElementFactory(this.components);\n                const newElement = factory.createElementFromComponent({\n                    componentName: value.params.component,\n                    // undefined index = append to end of the slot array\n                    index: isList ? undefined : 0,\n                    slot: path,\n                    parentId: elementId,\n                    bindings: value.params\n                });\n\n                const newElementId = newElement.element.id;\n\n                ops.push(...newElement.operations);\n\n                if (isList) {\n                    // For list slots, AddToParent already manages the static array.\n                    // We only set metadata here.\n                    ops.push(\n                        operations.setInputBinding(elementId, path, {\n                            id: generateElementId(),\n                            type: node.type,\n                            translatable: node.input.translatable,\n                            list: node.list\n                        })\n                    );\n                } else {\n                    ops.push(\n                        operations.setInputBinding(elementId, path, {\n                            id: generateElementId(),\n                            static: newElementId,\n                            type: node.type,\n                            translatable: node.input.translatable,\n                            list: node.list\n                        })\n                    );\n                }\n            } else if (isObject && isList) {\n                return;\n            } else {\n                ops.push(\n                    operations.setInputBinding(elementId, path, {\n                        id: generateElementId(),\n                        static: ignoreDefaultValues\n                            ? undefined\n                            : (value ?? node.input.defaultValue),\n                        type: node.type,\n                        list: node.list,\n                        translatable: node.input.translatable\n                    })\n                );\n            }\n        });\n\n        // Process styles\n        for (const key in bindings.styles) {\n            ops.push(\n                operations.setStyleBinding(elementId, key, {\n                    static: bindings.styles[key]\n                })\n            );\n        }\n\n        return ops;\n    }\n\n    private getComponentManifest(componentName: string): ComponentManifest {\n        const manifest = this.components[componentName];\n        if (!manifest) {\n            throw new Error(`Component \"${componentName}\" not registered.`);\n        }\n\n        return manifest;\n    }\n\n    private createElement(componentName: string, parentId: string, slot: string) {\n        const element: DocumentElement = {\n            type: \"Webiny/Element\",\n            id: generateElementId(),\n            parent: { id: parentId, slot },\n            component: { name: componentName }\n        };\n\n        const componentManifest = this.getComponentManifest(componentName);\n        const inputsAst = ComponentManifestToAstConverter.convert(componentManifest.inputs ?? []);\n\n        return {\n            element,\n            inputsAst,\n            componentManifest\n        };\n    }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ElementFactory.js","sources":["../src/ElementFactory.ts"],"sourcesContent":["import { generateElementId } from \"./generateElementId.js\";\nimport type {\n    DocumentElement,\n    ComponentManifest,\n    InputValueBinding,\n    StyleValueBinding,\n    CssProperties\n} from \"~/types.js\";\nimport { type IDocumentOperation, DocumentOperations } from \"./documentOperations/index.js\";\nimport {\n    ComponentManifestToAstConverter,\n    type InputAstNode\n} from \"./ComponentManifestToAstConverter.js\";\nimport { ComponentInputTraverser } from \"./ComponentInputTraverser.js\";\n\nconst defaultStyles = {\n    display: \"flex\",\n    flexDirection: \"column\"\n};\n\nconst withDefaultStyles = (styles: CssProperties) => {\n    return { ...defaultStyles, ...styles };\n};\n\nexport interface ElementFactoryCreateElementParams {\n    componentName: string;\n    parentId: string;\n    slot: string;\n    index?: number;\n    bindings?: {\n        inputs?: Record<string, any>;\n        styles?: Record<string, any>;\n        overrides?: {\n            [breakpoint: string]: {\n                inputs?: Record<string, any>;\n                styles?: Record<string, any>;\n            };\n        };\n    };\n}\n\ninterface GenerateOperationsParams {\n    element: DocumentElement;\n    inputsAst: InputAstNode[];\n    operations: ElementFactoryOperations;\n    bindings: {\n        inputs: Record<string, any>;\n        styles: Record<string, any>;\n        overrides: {\n            [breakpoint: string]: {\n                inputs?: Record<string, any>;\n                styles?: Record<string, any>;\n            };\n        };\n    };\n}\n\ninterface GenerateOperationsFromBindingsParams {\n    elementId: string;\n    inputsAst: InputAstNode[];\n    bindings: {\n        inputs: Record<string, any>;\n        styles: Record<string, any>;\n    };\n    operations: ElementFactoryOperations;\n    ignoreDefaultValues: boolean;\n}\n\ntype ElementFactoryOperations = {\n    addElement: (element: DocumentElement) => IDocumentOperation;\n    addToParent: (element: DocumentElement, index?: number) => IDocumentOperation;\n    setInputBinding: (\n        elementId: string,\n        bindingPath: string,\n        binding: InputValueBinding\n    ) => IDocumentOperation;\n    setStyleBinding: (\n        elementId: string,\n        bindingPath: string,\n        binding: StyleValueBinding\n    ) => IDocumentOperation;\n};\n\nconst defaultOperations: ElementFactoryOperations = {\n    addElement: (element: DocumentElement) => {\n        return new DocumentOperations.AddElement(element);\n    },\n    addToParent: (element: DocumentElement, index?: number) => {\n        return new DocumentOperations.AddToParent(element, index);\n    },\n    setInputBinding: (elementId, bindingPath, binding) => {\n        return new DocumentOperations.SetGlobalInputBinding(elementId, bindingPath, binding);\n    },\n    setStyleBinding: (elementId, bindingPath, binding) => {\n        return new DocumentOperations.SetGlobalStyleBinding(elementId, bindingPath, binding);\n    }\n};\n\nexport class ElementFactory {\n    constructor(private components: Record<string, ComponentManifest>) {}\n\n    public createElementFromComponent({\n        componentName,\n        parentId,\n        slot,\n        index,\n        bindings\n    }: ElementFactoryCreateElementParams) {\n        const { element, componentManifest, inputsAst } = this.createElement(\n            componentName,\n            parentId,\n            slot\n        );\n\n        const documentOps: IDocumentOperation[] = [\n            defaultOperations.addElement(element),\n            defaultOperations.addToParent(element, index)\n        ];\n\n        documentOps.push(\n            ...this.generateOperations({\n                element,\n                inputsAst,\n                bindings: {\n                    inputs: bindings?.inputs ?? componentManifest.defaults?.inputs ?? {},\n                    styles: withDefaultStyles(\n                        bindings?.styles ?? componentManifest.defaults?.styles ?? {}\n                    ),\n                    overrides: bindings?.overrides ?? {}\n                },\n                operations: defaultOperations\n            })\n        );\n\n        return { element, operations: documentOps };\n    }\n\n    public generateOperations({\n        element,\n        inputsAst,\n        bindings,\n        operations\n    }: GenerateOperationsParams): IDocumentOperation[] {\n        const ops = this.generateOperationsFromBindings({\n            elementId: element.id,\n            inputsAst,\n            bindings,\n            operations,\n            ignoreDefaultValues: false\n        });\n\n        if (bindings.overrides) {\n            for (const [breakpoint, overrides] of Object.entries(bindings.overrides)) {\n                ops.push(\n                    ...this.generateOperationsFromBindings({\n                        elementId: element.id,\n                        inputsAst,\n                        bindings: {\n                            inputs: overrides.inputs ?? {},\n                            styles: overrides.styles ?? {}\n                        },\n                        operations: {\n                            ...operations,\n                            setInputBinding: (elementId, bindingPath, binding) => {\n                                return new DocumentOperations.SetInputBindingOverride(\n                                    elementId,\n                                    bindingPath,\n                                    binding,\n                                    breakpoint\n                                );\n                            },\n                            setStyleBinding: (elementId, bindingPath, binding) => {\n                                return new DocumentOperations.SetStyleBindingOverride(\n                                    elementId,\n                                    bindingPath,\n                                    binding,\n                                    breakpoint\n                                );\n                            }\n                        },\n                        ignoreDefaultValues: true\n                    })\n                );\n            }\n        }\n\n        return ops;\n    }\n\n    private generateOperationsFromBindings({\n        elementId,\n        inputsAst,\n        bindings,\n        operations,\n        ignoreDefaultValues\n    }: GenerateOperationsFromBindingsParams): IDocumentOperation[] {\n        const inputData = bindings.inputs;\n        const traverser = new ComponentInputTraverser(inputsAst);\n\n        const ops: IDocumentOperation[] = [];\n\n        traverser.traverse(inputData, (node, path, value) => {\n            const isCreateElement = value?.action === \"CreateElement\";\n            const isList = node.list;\n            const isObject = node.type === \"object\";\n\n            if (isCreateElement) {\n                const factory = new ElementFactory(this.components);\n                const newElement = factory.createElementFromComponent({\n                    componentName: value.params.component,\n                    // undefined index = append to end of the slot array\n                    index: isList ? undefined : 0,\n                    slot: path,\n                    parentId: elementId,\n                    bindings: value.params\n                });\n\n                const newElementId = newElement.element.id;\n\n                ops.push(...newElement.operations);\n\n                if (isList) {\n                    // For list slots, AddToParent already manages the static array.\n                    // We only set metadata here.\n                    ops.push(\n                        operations.setInputBinding(elementId, path, {\n                            id: generateElementId(),\n                            type: node.type,\n                            translatable: node.input.translatable,\n                            list: node.list\n                        })\n                    );\n                } else {\n                    ops.push(\n                        operations.setInputBinding(elementId, path, {\n                            id: generateElementId(),\n                            static: newElementId,\n                            type: node.type,\n                            translatable: node.input.translatable,\n                            list: node.list\n                        })\n                    );\n                }\n            } else if (isObject && isList) {\n                return;\n            } else {\n                ops.push(\n                    operations.setInputBinding(elementId, path, {\n                        id: generateElementId(),\n                        static: ignoreDefaultValues\n                            ? undefined\n                            : (value ?? node.input.defaultValue),\n                        type: node.type,\n                        list: node.list,\n                        translatable: node.input.translatable\n                    })\n                );\n            }\n        });\n\n        // Process styles\n        for (const key in bindings.styles) {\n            ops.push(\n                operations.setStyleBinding(elementId, key, {\n                    static: bindings.styles[key]\n                })\n            );\n        }\n\n        return ops;\n    }\n\n    private getComponentManifest(componentName: string): ComponentManifest {\n        const manifest = this.components[componentName];\n        if (!manifest) {\n            throw new Error(`Component \"${componentName}\" not registered.`);\n        }\n\n        return manifest;\n    }\n\n    private createElement(componentName: string, parentId: string, slot: string) {\n        const element: DocumentElement = {\n            type: \"Webiny/Element\",\n            id: generateElementId(),\n            parent: { id: parentId, slot },\n            component: { name: componentName }\n        };\n\n        const componentManifest = this.getComponentManifest(componentName);\n        const inputsAst = ComponentManifestToAstConverter.convert(componentManifest.inputs ?? []);\n\n        return {\n            element,\n            inputsAst,\n            componentManifest\n        };\n    }\n}\n"],"names":["defaultStyles","withDefaultStyles","styles","defaultOperations","element","DocumentOperations","index","elementId","bindingPath","binding","ElementFactory","components","componentName","parentId","slot","bindings","componentManifest","inputsAst","documentOps","operations","ops","breakpoint","overrides","Object","ignoreDefaultValues","inputData","traverser","ComponentInputTraverser","node","path","value","isCreateElement","isList","isObject","factory","newElement","undefined","newElementId","generateElementId","key","manifest","Error","ComponentManifestToAstConverter"],"mappings":"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"}

package/ElementFactory.test.js

@@ -1,280 +1,251 @@
-import { describe, it, expect } from "vitest";
+import { describe, expect, it } from "vitest";
 import { ElementFactory } from "./ElementFactory.js";
 import { DocumentOperations } from "./documentOperations/index.js";
 const components = {
-  "Webiny/Root": {
-    name: "Webiny/Root",
-    label: "Main Content",
-    tags: [],
-    inputs: [{
-      type: "slot",
-      list: true,
-      renderer: "Webiny/Slot",
-      defaultValue: [],
-      name: "children"
-    }]
-  },
-  "FunnelBuilder/Funnel": {
-    name: "FunnelBuilder/Funnel",
-    label: "Funnel",
-    tags: [],
-    inputs: [{
-      type: "object",
-      renderer: "Webiny/Object",
-      name: "fields",
-      list: true,
-      fields: [],
-      defaultValue: []
-    }, {
-      type: "number",
-      renderer: "Webiny/Number",
-      name: "activeStep",
-      label: "Active Step",
-      defaultValue: 0
-    }, {
-      type: "slot",
-      list: true,
-      renderer: "Webiny/Slot",
-      defaultValue: [],
-      name: "steps"
-    }, {
-      type: "object",
-      renderer: "FunnelBuilder/ConditionRulesRenderer",
-      name: "conditionRules",
-      list: true,
-      fields: []
-    }]
-  },
-  "FunnelBuilder/Step": {
-    name: "FunnelBuilder/Step",
-    label: "Funnel Step",
-    tags: [],
-    inputs: [{
-      type: "text",
-      renderer: "Webiny/Input",
-      name: "label",
-      label: "Label"
-    }, {
-      type: "slot",
-      list: true,
-      renderer: "Webiny/Slot",
-      defaultValue: [],
-      name: "children"
-    }]
-  }
+    "Webiny/Root": {
+        name: "Webiny/Root",
+        label: "Main Content",
+        tags: [],
+        inputs: [
+            {
+                type: "slot",
+                list: true,
+                renderer: "Webiny/Slot",
+                defaultValue: [],
+                name: "children"
+            }
+        ]
+    },
+    "FunnelBuilder/Funnel": {
+        name: "FunnelBuilder/Funnel",
+        label: "Funnel",
+        tags: [],
+        inputs: [
+            {
+                type: "object",
+                renderer: "Webiny/Object",
+                name: "fields",
+                list: true,
+                fields: [],
+                defaultValue: []
+            },
+            {
+                type: "number",
+                renderer: "Webiny/Number",
+                name: "activeStep",
+                label: "Active Step",
+                defaultValue: 0
+            },
+            {
+                type: "slot",
+                list: true,
+                renderer: "Webiny/Slot",
+                defaultValue: [],
+                name: "steps"
+            },
+            {
+                type: "object",
+                renderer: "FunnelBuilder/ConditionRulesRenderer",
+                name: "conditionRules",
+                list: true,
+                fields: []
+            }
+        ]
+    },
+    "FunnelBuilder/Step": {
+        name: "FunnelBuilder/Step",
+        label: "Funnel Step",
+        tags: [],
+        inputs: [
+            {
+                type: "text",
+                renderer: "Webiny/Input",
+                name: "label",
+                label: "Label"
+            },
+            {
+                type: "slot",
+                list: true,
+                renderer: "Webiny/Slot",
+                defaultValue: [],
+                name: "children"
+            }
+        ]
+    }
 };
-
-/**
- * Extract private fields from operation instances for assertion.
- */
 function serializeOp(op) {
-  if (op instanceof DocumentOperations.AddElement) {
-    return {
-      type: "AddElement",
-      element: op["element"]
+    if (op instanceof DocumentOperations.AddElement) return {
+        type: "AddElement",
+        element: op["element"]
     };
-  }
-  if (op instanceof DocumentOperations.AddToParent) {
-    return {
-      type: "AddToParent",
-      element: op["element"],
-      index: op["index"]
+    if (op instanceof DocumentOperations.AddToParent) return {
+        type: "AddToParent",
+        element: op["element"],
+        index: op["index"]
     };
-  }
-  if (op instanceof DocumentOperations.SetGlobalInputBinding) {
-    return {
-      type: "SetGlobalInputBinding",
-      elementId: op["elementId"],
-      bindingPath: op["bindingPath"],
-      binding: op["binding"]
+    if (op instanceof DocumentOperations.SetGlobalInputBinding) return {
+        type: "SetGlobalInputBinding",
+        elementId: op["elementId"],
+        bindingPath: op["bindingPath"],
+        binding: op["binding"]
     };
-  }
-  if (op instanceof DocumentOperations.SetGlobalStyleBinding) {
-    return {
-      type: "SetGlobalStyleBinding",
-      elementId: op["elementId"],
-      bindingPath: op["bindingPath"],
-      binding: op["binding"]
+    if (op instanceof DocumentOperations.SetGlobalStyleBinding) return {
+        type: "SetGlobalStyleBinding",
+        elementId: op["elementId"],
+        bindingPath: op["bindingPath"],
+        binding: op["binding"]
     };
-  }
-  return op;
+    return op;
 }
-describe("ElementFactory", () => {
-  it("should produce correct operation sequence for a Funnel with two Steps", () => {
-    const factory = new ElementFactory(components);
-    const result = factory.createElementFromComponent({
-      componentName: "FunnelBuilder/Funnel",
-      parentId: "root",
-      slot: "children",
-      index: 0,
-      bindings: {
-        inputs: {
-          fields: [],
-          activeStep: 0,
-          steps: [{
-            action: "CreateElement",
-            params: {
-              component: "FunnelBuilder/Step",
-              inputs: {
-                label: "Step 1",
-                children: []
-              }
-            }
-          }, {
-            action: "CreateElement",
-            params: {
-              component: "FunnelBuilder/Step",
-              inputs: {
-                label: "Final Step",
-                children: []
-              }
+describe("ElementFactory", ()=>{
+    it("should produce correct operation sequence for a Funnel with two Steps", ()=>{
+        const factory = new ElementFactory(components);
+        const result = factory.createElementFromComponent({
+            componentName: "FunnelBuilder/Funnel",
+            parentId: "root",
+            slot: "children",
+            index: 0,
+            bindings: {
+                inputs: {
+                    fields: [],
+                    activeStep: 0,
+                    steps: [
+                        {
+                            action: "CreateElement",
+                            params: {
+                                component: "FunnelBuilder/Step",
+                                inputs: {
+                                    label: "Step 1",
+                                    children: []
+                                }
+                            }
+                        },
+                        {
+                            action: "CreateElement",
+                            params: {
+                                component: "FunnelBuilder/Step",
+                                inputs: {
+                                    label: "Final Step",
+                                    children: []
+                                }
+                            }
+                        }
+                    ]
+                }
             }
-          }]
-        }
-      }
-    });
-    const ops = result.operations.map(serializeOp);
-    const funnelId = result.element.id;
-
-    // 0: AddElement — Funnel
-    expect(ops[0].type).toBe("AddElement");
-    expect(ops[0].element.component.name).toBe("FunnelBuilder/Funnel");
-
-    // 1: AddToParent — Funnel → root/children at index 0
-    expect(ops[1].type).toBe("AddToParent");
-    expect(ops[1].element.id).toBe(funnelId);
-    expect(ops[1].index).toBe(0);
-
-    // 2: SetGlobalInputBinding — activeStep = 0
-    expect(ops[2].type).toBe("SetGlobalInputBinding");
-    expect(ops[2].elementId).toBe(funnelId);
-    expect(ops[2].bindingPath).toBe("activeStep");
-    expect(ops[2].binding.static).toBe(0);
-
-    // 3: AddElement — Step 1
-    const step1Id = ops[3].element.id;
-    expect(ops[3].type).toBe("AddElement");
-    expect(ops[3].element.component.name).toBe("FunnelBuilder/Step");
-    expect(ops[3].element.parent).toEqual({
-      id: funnelId,
-      slot: "steps"
+        });
+        const ops = result.operations.map(serializeOp);
+        const funnelId = result.element.id;
+        expect(ops[0].type).toBe("AddElement");
+        expect(ops[0].element.component.name).toBe("FunnelBuilder/Funnel");
+        expect(ops[1].type).toBe("AddToParent");
+        expect(ops[1].element.id).toBe(funnelId);
+        expect(ops[1].index).toBe(0);
+        expect(ops[2].type).toBe("SetGlobalInputBinding");
+        expect(ops[2].elementId).toBe(funnelId);
+        expect(ops[2].bindingPath).toBe("activeStep");
+        expect(ops[2].binding.static).toBe(0);
+        const step1Id = ops[3].element.id;
+        expect(ops[3].type).toBe("AddElement");
+        expect(ops[3].element.component.name).toBe("FunnelBuilder/Step");
+        expect(ops[3].element.parent).toEqual({
+            id: funnelId,
+            slot: "steps"
+        });
+        expect(ops[4].type).toBe("AddToParent");
+        expect(ops[4].element.id).toBe(step1Id);
+        expect(ops[4].index).toBeUndefined();
+        expect(ops[5].bindingPath).toBe("label");
+        expect(ops[5].binding.static).toBe("Step 1");
+        expect(ops[6].bindingPath).toBe("children");
+        expect(ops[6].binding.static).toEqual([]);
+        expect(ops[7].bindingPath).toBe("display");
+        expect(ops[8].bindingPath).toBe("flexDirection");
+        expect(ops[9].type).toBe("SetGlobalInputBinding");
+        expect(ops[9].elementId).toBe(funnelId);
+        expect(ops[9].bindingPath).toBe("steps");
+        expect(ops[9].binding.static).toBeUndefined();
+        expect(ops[9].binding.type).toBe("slot");
+        expect(ops[9].binding.list).toBe(true);
+        expect(ops[10].element.component.name).toBe("FunnelBuilder/Step");
+        expect(ops[11].index).toBeUndefined();
+        expect(ops[12].binding.static).toBe("Final Step");
+        expect(ops[13].binding.static).toEqual([]);
+        expect(ops[16].type).toBe("SetGlobalInputBinding");
+        expect(ops[16].elementId).toBe(funnelId);
+        expect(ops[16].bindingPath).toBe("steps");
+        expect(ops[16].binding.static).toBeUndefined();
+        expect(ops[17].bindingPath).toBe("display");
+        expect(ops[18].bindingPath).toBe("flexDirection");
+        expect(ops).toHaveLength(19);
     });
-
-    // 4: AddToParent — Step 1 (undefined = append)
-    expect(ops[4].type).toBe("AddToParent");
-    expect(ops[4].element.id).toBe(step1Id);
-    expect(ops[4].index).toBeUndefined();
-
-    // 5: Step 1 label binding
-    expect(ops[5].bindingPath).toBe("label");
-    expect(ops[5].binding.static).toBe("Step 1");
-
-    // 6: Step 1 children binding
-    expect(ops[6].bindingPath).toBe("children");
-    expect(ops[6].binding.static).toEqual([]);
-
-    // 7-8: Step 1 style bindings
-    expect(ops[7].bindingPath).toBe("display");
-    expect(ops[8].bindingPath).toBe("flexDirection");
-
-    // 9: SetGlobalInputBinding — steps slot metadata (no static, AddToParent handles it)
-    expect(ops[9].type).toBe("SetGlobalInputBinding");
-    expect(ops[9].elementId).toBe(funnelId);
-    expect(ops[9].bindingPath).toBe("steps");
-    expect(ops[9].binding.static).toBeUndefined();
-    expect(ops[9].binding.type).toBe("slot");
-    expect(ops[9].binding.list).toBe(true);
-
-    // 10: AddElement — Step 2
-    expect(ops[10].element.component.name).toBe("FunnelBuilder/Step");
-
-    // 11: AddToParent — Step 2 (undefined = append)
-    expect(ops[11].index).toBeUndefined();
-
-    // 12-15: Step 2 bindings + styles
-    expect(ops[12].binding.static).toBe("Final Step");
-    expect(ops[13].binding.static).toEqual([]);
-
-    // 16: SetGlobalInputBinding — steps slot metadata (no static)
-    expect(ops[16].type).toBe("SetGlobalInputBinding");
-    expect(ops[16].elementId).toBe(funnelId);
-    expect(ops[16].bindingPath).toBe("steps");
-    expect(ops[16].binding.static).toBeUndefined();
-
-    // 17-18: Funnel style bindings
-    expect(ops[17].bindingPath).toBe("display");
-    expect(ops[18].bindingPath).toBe("flexDirection");
-    expect(ops).toHaveLength(19);
-  });
-  it("should produce correct document after applying all operations", () => {
-    const factory = new ElementFactory(components);
-    const result = factory.createElementFromComponent({
-      componentName: "FunnelBuilder/Funnel",
-      parentId: "root",
-      slot: "children",
-      index: 0,
-      bindings: {
-        inputs: {
-          fields: [],
-          activeStep: 0,
-          steps: [{
-            action: "CreateElement",
-            params: {
-              component: "FunnelBuilder/Step",
-              inputs: {
-                label: "Step 1",
-                children: []
-              }
+    it("should produce correct document after applying all operations", ()=>{
+        const factory = new ElementFactory(components);
+        const result = factory.createElementFromComponent({
+            componentName: "FunnelBuilder/Funnel",
+            parentId: "root",
+            slot: "children",
+            index: 0,
+            bindings: {
+                inputs: {
+                    fields: [],
+                    activeStep: 0,
+                    steps: [
+                        {
+                            action: "CreateElement",
+                            params: {
+                                component: "FunnelBuilder/Step",
+                                inputs: {
+                                    label: "Step 1",
+                                    children: []
+                                }
+                            }
+                        },
+                        {
+                            action: "CreateElement",
+                            params: {
+                                component: "FunnelBuilder/Step",
+                                inputs: {
+                                    label: "Final Step",
+                                    children: []
+                                }
+                            }
+                        }
+                    ]
+                }
             }
-          }, {
-            action: "CreateElement",
-            params: {
-              component: "FunnelBuilder/Step",
-              inputs: {
-                label: "Final Step",
-                children: []
-              }
-            }
-          }]
-        }
-      }
+        });
+        const document = {
+            state: {},
+            elements: {
+                root: {
+                    type: "Webiny/Element",
+                    id: "root",
+                    component: {
+                        name: "Webiny/Root"
+                    }
+                }
+            },
+            bindings: {}
+        };
+        for (const op of result.operations)op.apply(document);
+        const funnelId = result.element.id;
+        const stepElements = Object.values(document.elements).filter((el)=>"FunnelBuilder/Step" === el.component.name);
+        expect(stepElements).toHaveLength(2);
+        const labels = stepElements.map((el)=>document.bindings[el.id]?.inputs?.label?.static);
+        expect(labels).toContain("Step 1");
+        expect(labels).toContain("Final Step");
+        const stepsBinding = document.bindings[funnelId]?.inputs?.steps;
+        expect(stepsBinding?.list).toBe(true);
+        expect(stepsBinding?.type).toBe("slot");
+        expect(stepsBinding?.static).toHaveLength(2);
+        const step1 = stepElements.find((el)=>document.bindings[el.id]?.inputs?.label?.static === "Step 1");
+        const step2 = stepElements.find((el)=>document.bindings[el.id]?.inputs?.label?.static === "Final Step");
+        expect(stepsBinding?.static).toEqual([
+            step1.id,
+            step2.id
+        ]);
     });
-    const document = {
-      state: {},
-      elements: {
-        root: {
-          type: "Webiny/Element",
-          id: "root",
-          component: {
-            name: "Webiny/Root"
-          }
-        }
-      },
-      bindings: {}
-    };
-    for (const op of result.operations) {
-      op.apply(document);
-    }
-    const funnelId = result.element.id;
-
-    // Both step elements exist in the document.
-    const stepElements = Object.values(document.elements).filter(el => el.component.name === "FunnelBuilder/Step");
-    expect(stepElements).toHaveLength(2);
-
-    // Both steps have their correct labels.
-    const labels = stepElements.map(el => document.bindings[el.id]?.inputs?.label?.static);
-    expect(labels).toContain("Step 1");
-    expect(labels).toContain("Final Step");
-
-    // The steps binding contains both step IDs in order.
-    const stepsBinding = document.bindings[funnelId]?.inputs?.steps;
-    expect(stepsBinding?.list).toBe(true);
-    expect(stepsBinding?.type).toBe("slot");
-    expect(stepsBinding?.static).toHaveLength(2);
-    const step1 = stepElements.find(el => document.bindings[el.id]?.inputs?.label?.static === "Step 1");
-    const step2 = stepElements.find(el => document.bindings[el.id]?.inputs?.label?.static === "Final Step");
-    expect(stepsBinding?.static).toEqual([step1.id, step2.id]);
-  });
 });
 
 //# sourceMappingURL=ElementFactory.test.js.map