@webiny/app-website-builder 6.0.0 → 6.1.0-beta.0

package/editorSdk/utils/$createElement.js

@@ -1,4 +1,5 @@
-import { ElementFactory } from "@webiny/website-builder-sdk";
+import { ElementFactory, evaluateConstraints } from "@webiny/website-builder-sdk";
+import { executeOnChange, applyAncestorUpdates } from "./executeOnChange.js";
 export function $createElement(editor, payload) {
   const {
     componentName,
@@ -8,7 +9,20 @@ export function $createElement(editor, payload) {
     bindings
   } = payload;
   const componentsManifest = editor.getEditorState().read().components;
+  const result = evaluateConstraints({
+    componentName,
+    parentId,
+    slot,
+    document: editor.getDocumentState().read(),
+    components: componentsManifest
+  });
+  if (!result.allowed) {
+    return result;
+  }
   const elementFactory = new ElementFactory(componentsManifest);
+
+  // Snapshot element IDs before creation so we can find all new elements.
+  const elementsBefore = new Set(Object.keys(editor.getDocumentState().read().elements));
   const {
     operations
   } = elementFactory.createElementFromComponent({
@@ -21,6 +35,31 @@ export function $createElement(editor, payload) {
   editor.updateDocument(document => {
     operations.forEach(operation => operation.apply(document));
   });
+
+  // Fire onChange + onDescendantChange for every newly created element,
+  // not just the root. ElementFactory recursively creates child elements
+  // from slot defaults, and those children need callbacks too.
+  const editorState = editor.getEditorState().read();
+  const breakpointNames = editorState.viewport.breakpoints.map(bp => bp.name);
+  const baseBreakpoint = breakpointNames[0];
+  const document = editor.getDocumentState().read();
+  const newElementIds = Object.keys(document.elements).filter(id => !elementsBefore.has(id));
+  for (const elementId of newElementIds) {
+    const ancestorUpdates = executeOnChange({
+      editor,
+      elementId,
+      action: "create",
+      breakpointNames,
+      baseBreakpoint,
+      elementFactory
+    });
+    if (ancestorUpdates.length > 0) {
+      editor.updateDocument(doc => {
+        applyAncestorUpdates(doc, ancestorUpdates, breakpointNames, baseBreakpoint, elementFactory);
+      });
+    }
+  }
+  return;
 }
 
 //# sourceMappingURL=$createElement.js.map

package/editorSdk/utils/$createElement.js.map

@@ -1 +1 @@
-{"version":3,"names":["ElementFactory","$createElement","editor","payload","componentName","index","parentId","slot","bindings","componentsManifest","getEditorState","read","components","elementFactory","operations","createElementFromComponent","defaults","updateDocument","document","forEach","operation","apply"],"sources":["$createElement.ts"],"sourcesContent":["import type { Editor } from \"../Editor.js\";\nimport type { CommandPayload } from \"~/editorSdk/createCommand.js\";\nimport type { Commands } from \"~/BaseEditor/index.js\";\nimport { ElementFactory } from \"@webiny/website-builder-sdk\";\n\nexport function $createElement(\n    editor: Editor,\n    payload: CommandPayload<typeof Commands.CreateElement>\n) {\n    const { componentName, index, parentId, slot, bindings } = payload;\n    const componentsManifest = editor.getEditorState().read().components;\n\n    const elementFactory = new ElementFactory(componentsManifest);\n    const { operations } = elementFactory.createElementFromComponent({\n        componentName,\n        parentId,\n        slot,\n        index,\n        bindings: bindings ?? componentsManifest[componentName].defaults ?? {}\n    });\n\n    editor.updateDocument(document => {\n        operations.forEach(operation => operation.apply(document));\n    });\n}\n"],"mappings":"AAGA,SAASA,cAAc,QAAQ,6BAA6B;AAE5D,OAAO,SAASC,cAAcA,CAC1BC,MAAc,EACdC,OAAsD,EACxD;EACE,MAAM;IAAEC,aAAa;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,IAAI;IAAEC;EAAS,CAAC,GAAGL,OAAO;EAClE,MAAMM,kBAAkB,GAAGP,MAAM,CAACQ,cAAc,CAAC,CAAC,CAACC,IAAI,CAAC,CAAC,CAACC,UAAU;EAEpE,MAAMC,cAAc,GAAG,IAAIb,cAAc,CAACS,kBAAkB,CAAC;EAC7D,MAAM;IAAEK;EAAW,CAAC,GAAGD,cAAc,CAACE,0BAA0B,CAAC;IAC7DX,aAAa;IACbE,QAAQ;IACRC,IAAI;IACJF,KAAK;IACLG,QAAQ,EAAEA,QAAQ,IAAIC,kBAAkB,CAACL,aAAa,CAAC,CAACY,QAAQ,IAAI,CAAC;EACzE,CAAC,CAAC;EAEFd,MAAM,CAACe,cAAc,CAACC,QAAQ,IAAI;IAC9BJ,UAAU,CAACK,OAAO,CAACC,SAAS,IAAIA,SAAS,CAACC,KAAK,CAACH,QAAQ,CAAC,CAAC;EAC9D,CAAC,CAAC;AACN","ignoreList":[]}
+{"version":3,"names":["ElementFactory","evaluateConstraints","executeOnChange","applyAncestorUpdates","$createElement","editor","payload","componentName","index","parentId","slot","bindings","componentsManifest","getEditorState","read","components","result","document","getDocumentState","allowed","elementFactory","elementsBefore","Set","Object","keys","elements","operations","createElementFromComponent","defaults","updateDocument","forEach","operation","apply","editorState","breakpointNames","viewport","breakpoints","map","bp","name","baseBreakpoint","newElementIds","filter","id","has","elementId","ancestorUpdates","action","length","doc"],"sources":["$createElement.ts"],"sourcesContent":["import type { Editor } from \"../Editor.js\";\nimport type { CommandPayload } from \"~/editorSdk/createCommand.js\";\nimport type { Commands } from \"~/BaseEditor/index.js\";\nimport {\n    type ConstraintResult,\n    ElementFactory,\n    evaluateConstraints\n} from \"@webiny/website-builder-sdk\";\nimport { executeOnChange, applyAncestorUpdates } from \"./executeOnChange.js\";\n\nexport function $createElement(\n    editor: Editor,\n    payload: CommandPayload<typeof Commands.CreateElement>\n): ConstraintResult | undefined {\n    const { componentName, index, parentId, slot, bindings } = payload;\n    const componentsManifest = editor.getEditorState().read().components;\n\n    const result = evaluateConstraints({\n        componentName,\n        parentId,\n        slot,\n        document: editor.getDocumentState().read(),\n        components: componentsManifest\n    });\n\n    if (!result.allowed) {\n        return result;\n    }\n\n    const elementFactory = new ElementFactory(componentsManifest);\n\n    // Snapshot element IDs before creation so we can find all new elements.\n    const elementsBefore = new Set(Object.keys(editor.getDocumentState().read().elements));\n\n    const { operations } = elementFactory.createElementFromComponent({\n        componentName,\n        parentId,\n        slot,\n        index,\n        bindings: bindings ?? componentsManifest[componentName].defaults ?? {}\n    });\n\n    editor.updateDocument(document => {\n        operations.forEach(operation => operation.apply(document));\n    });\n\n    // Fire onChange + onDescendantChange for every newly created element,\n    // not just the root. ElementFactory recursively creates child elements\n    // from slot defaults, and those children need callbacks too.\n    const editorState = editor.getEditorState().read();\n    const breakpointNames = editorState.viewport.breakpoints.map(bp => bp.name);\n    const baseBreakpoint = breakpointNames[0];\n\n    const document = editor.getDocumentState().read();\n    const newElementIds = Object.keys(document.elements).filter(id => !elementsBefore.has(id));\n\n    for (const elementId of newElementIds) {\n        const ancestorUpdates = executeOnChange({\n            editor,\n            elementId,\n            action: \"create\",\n            breakpointNames,\n            baseBreakpoint,\n            elementFactory\n        });\n\n        if (ancestorUpdates.length > 0) {\n            editor.updateDocument(doc => {\n                applyAncestorUpdates(\n                    doc,\n                    ancestorUpdates,\n                    breakpointNames,\n                    baseBreakpoint,\n                    elementFactory\n                );\n            });\n        }\n    }\n\n    return;\n}\n"],"mappings":"AAGA,SAEIA,cAAc,EACdC,mBAAmB,QAChB,6BAA6B;AACpC,SAASC,eAAe,EAAEC,oBAAoB;AAE9C,OAAO,SAASC,cAAcA,CAC1BC,MAAc,EACdC,OAAsD,EAC1B;EAC5B,MAAM;IAAEC,aAAa;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,IAAI;IAAEC;EAAS,CAAC,GAAGL,OAAO;EAClE,MAAMM,kBAAkB,GAAGP,MAAM,CAACQ,cAAc,CAAC,CAAC,CAACC,IAAI,CAAC,CAAC,CAACC,UAAU;EAEpE,MAAMC,MAAM,GAAGf,mBAAmB,CAAC;IAC/BM,aAAa;IACbE,QAAQ;IACRC,IAAI;IACJO,QAAQ,EAAEZ,MAAM,CAACa,gBAAgB,CAAC,CAAC,CAACJ,IAAI,CAAC,CAAC;IAC1CC,UAAU,EAAEH;EAChB,CAAC,CAAC;EAEF,IAAI,CAACI,MAAM,CAACG,OAAO,EAAE;IACjB,OAAOH,MAAM;EACjB;EAEA,MAAMI,cAAc,GAAG,IAAIpB,cAAc,CAACY,kBAAkB,CAAC;;EAE7D;EACA,MAAMS,cAAc,GAAG,IAAIC,GAAG,CAACC,MAAM,CAACC,IAAI,CAACnB,MAAM,CAACa,gBAAgB,CAAC,CAAC,CAACJ,IAAI,CAAC,CAAC,CAACW,QAAQ,CAAC,CAAC;EAEtF,MAAM;IAAEC;EAAW,CAAC,GAAGN,cAAc,CAACO,0BAA0B,CAAC;IAC7DpB,aAAa;IACbE,QAAQ;IACRC,IAAI;IACJF,KAAK;IACLG,QAAQ,EAAEA,QAAQ,IAAIC,kBAAkB,CAACL,aAAa,CAAC,CAACqB,QAAQ,IAAI,CAAC;EACzE,CAAC,CAAC;EAEFvB,MAAM,CAACwB,cAAc,CAACZ,QAAQ,IAAI;IAC9BS,UAAU,CAACI,OAAO,CAACC,SAAS,IAAIA,SAAS,CAACC,KAAK,CAACf,QAAQ,CAAC,CAAC;EAC9D,CAAC,CAAC;;EAEF;EACA;EACA;EACA,MAAMgB,WAAW,GAAG5B,MAAM,CAACQ,cAAc,CAAC,CAAC,CAACC,IAAI,CAAC,CAAC;EAClD,MAAMoB,eAAe,GAAGD,WAAW,CAACE,QAAQ,CAACC,WAAW,CAACC,GAAG,CAACC,EAAE,IAAIA,EAAE,CAACC,IAAI,CAAC;EAC3E,MAAMC,cAAc,GAAGN,eAAe,CAAC,CAAC,CAAC;EAEzC,MAAMjB,QAAQ,GAAGZ,MAAM,CAACa,gBAAgB,CAAC,CAAC,CAACJ,IAAI,CAAC,CAAC;EACjD,MAAM2B,aAAa,GAAGlB,MAAM,CAACC,IAAI,CAACP,QAAQ,CAACQ,QAAQ,CAAC,CAACiB,MAAM,CAACC,EAAE,IAAI,CAACtB,cAAc,CAACuB,GAAG,CAACD,EAAE,CAAC,CAAC;EAE1F,KAAK,MAAME,SAAS,IAAIJ,aAAa,EAAE;IACnC,MAAMK,eAAe,GAAG5C,eAAe,CAAC;MACpCG,MAAM;MACNwC,SAAS;MACTE,MAAM,EAAE,QAAQ;MAChBb,eAAe;MACfM,cAAc;MACdpB;IACJ,CAAC,CAAC;IAEF,IAAI0B,eAAe,CAACE,MAAM,GAAG,CAAC,EAAE;MAC5B3C,MAAM,CAACwB,cAAc,CAACoB,GAAG,IAAI;QACzB9C,oBAAoB,CAChB8C,GAAG,EACHH,eAAe,EACfZ,eAAe,EACfM,cAAc,EACdpB,cACJ,CAAC;MACL,CAAC,CAAC;IACN;EACJ;EAEA;AACJ","ignoreList":[]}

package/editorSdk/utils/$deleteElement.d.ts

@@ -1,2 +1,2 @@
-import type { Document } from "@webiny/website-builder-sdk";
-export declare function $deleteElement(document: Document, id: string): void;
+import type { Editor } from "../../editorSdk/Editor.js";
+export declare function $deleteElement(editor: Editor, id: string, ignoreConstraints?: boolean): import("@webiny/website-builder-sdk").ConstraintResult | undefined;

package/editorSdk/utils/$deleteElement.js

@@ -1,30 +1,74 @@
+import { ElementFactory, evaluateDeleteConstraint } from "@webiny/website-builder-sdk";
 import { $getElementById } from "./$getElementById.js";
 import { $removeElementReferenceFromParent } from "./$removeElementReferenceFromParent.js";
-export function $deleteElement(document, id) {
+import { Commands } from "../../BaseEditor/index.js";
+import { executeOnChange, applyAncestorUpdates } from "./executeOnChange.js";
+export function $deleteElement(editor, id, ignoreConstraints = false) {
+  const document = editor.getDocumentState().read();
   const elementToDelete = $getElementById(document, id);
   if (!elementToDelete) {
     return;
   }
+  if (!ignoreConstraints) {
+    const result = evaluateDeleteConstraint({
+      elementId: id,
+      document,
+      components: editor.getEditorState().read().components
+    });
+    if (!result.allowed) {
+      return result;
+    }
+  }
 
-  // Remove the reference to the element from its parent element.
-  if (elementToDelete.parent) {
-    $removeElementReferenceFromParent(document, {
+  // Fire onChange on the element + onDescendantChange on ancestors BEFORE deletion,
+  // while the element and its parent chain are still in the document.
+  let ancestorUpdates = [];
+  let breakpointNames = [];
+  let baseBreakpoint = "";
+  let elementFactory;
+  if (!ignoreConstraints) {
+    const componentsManifest = editor.getEditorState().read().components;
+    const editorState = editor.getEditorState().read();
+    breakpointNames = editorState.viewport.breakpoints.map(bp => bp.name);
+    baseBreakpoint = breakpointNames[0];
+    elementFactory = new ElementFactory(componentsManifest);
+    ancestorUpdates = executeOnChange({
+      editor,
       elementId: id,
-      parentId: elementToDelete.parent.id,
-      slot: elementToDelete.parent.slot
+      action: "delete",
+      breakpointNames,
+      baseBreakpoint,
+      elementFactory
     });
   }
+  editor.executeCommand(Commands.DeselectElement);
+  editor.updateDocument(document => {
+    // Remove the reference to the element from its parent element.
+    if (elementToDelete.parent) {
+      $removeElementReferenceFromParent(document, {
+        elementId: id,
+        parentId: elementToDelete.parent.id,
+        slot: elementToDelete.parent.slot
+      });
+    }
 
-  // Remove all descendants.
-  Object.values(document.elements).filter(el => el.parent?.id === id).forEach(element => {
-    $deleteElement(document, element.id);
-  });
+    // Remove all descendants.
+    Object.values(document.elements).filter(el => el.parent?.id === id).forEach(element => {
+      $deleteElement(editor, element.id, true);
+    });
+
+    // Delete element bindings.
+    delete document.bindings[elementToDelete.id];
 
-  // Delete element bindings.
-  delete document.bindings[elementToDelete.id];
+    // Delete the element itself.
+    delete document.elements[id];
 
-  // Delete the element itself.
-  delete document.elements[id];
+    // Apply ancestor updates from onDescendantChange within the same transaction.
+    if (ancestorUpdates.length > 0 && elementFactory) {
+      applyAncestorUpdates(document, ancestorUpdates, breakpointNames, baseBreakpoint, elementFactory);
+    }
+  });
+  return;
 }
 
 //# sourceMappingURL=$deleteElement.js.map

package/editorSdk/utils/$deleteElement.js.map

@@ -1 +1 @@
-{"version":3,"names":["$getElementById","$removeElementReferenceFromParent","$deleteElement","document","id","elementToDelete","parent","elementId","parentId","slot","Object","values","elements","filter","el","forEach","element","bindings"],"sources":["$deleteElement.ts"],"sourcesContent":["import type { Document } from \"@webiny/website-builder-sdk\";\nimport { $getElementById } from \"./$getElementById.js\";\nimport { $removeElementReferenceFromParent } from \"./$removeElementReferenceFromParent.js\";\n\nexport function $deleteElement(document: Document, id: string) {\n    const elementToDelete = $getElementById(document, id);\n\n    if (!elementToDelete) {\n        return;\n    }\n\n    // Remove the reference to the element from its parent element.\n    if (elementToDelete.parent) {\n        $removeElementReferenceFromParent(document, {\n            elementId: id,\n            parentId: elementToDelete.parent.id,\n            slot: elementToDelete.parent.slot\n        });\n    }\n\n    // Remove all descendants.\n    Object.values(document.elements)\n        .filter(el => el.parent?.id === id)\n        .forEach(element => {\n            $deleteElement(document, element.id);\n        });\n\n    // Delete element bindings.\n    delete document.bindings[elementToDelete.id];\n\n    // Delete the element itself.\n    delete document.elements[id];\n}\n"],"mappings":"AACA,SAASA,eAAe;AACxB,SAASC,iCAAiC;AAE1C,OAAO,SAASC,cAAcA,CAACC,QAAkB,EAAEC,EAAU,EAAE;EAC3D,MAAMC,eAAe,GAAGL,eAAe,CAACG,QAAQ,EAAEC,EAAE,CAAC;EAErD,IAAI,CAACC,eAAe,EAAE;IAClB;EACJ;;EAEA;EACA,IAAIA,eAAe,CAACC,MAAM,EAAE;IACxBL,iCAAiC,CAACE,QAAQ,EAAE;MACxCI,SAAS,EAAEH,EAAE;MACbI,QAAQ,EAAEH,eAAe,CAACC,MAAM,CAACF,EAAE;MACnCK,IAAI,EAAEJ,eAAe,CAACC,MAAM,CAACG;IACjC,CAAC,CAAC;EACN;;EAEA;EACAC,MAAM,CAACC,MAAM,CAACR,QAAQ,CAACS,QAAQ,CAAC,CAC3BC,MAAM,CAACC,EAAE,IAAIA,EAAE,CAACR,MAAM,EAAEF,EAAE,KAAKA,EAAE,CAAC,CAClCW,OAAO,CAACC,OAAO,IAAI;IAChBd,cAAc,CAACC,QAAQ,EAAEa,OAAO,CAACZ,EAAE,CAAC;EACxC,CAAC,CAAC;;EAEN;EACA,OAAOD,QAAQ,CAACc,QAAQ,CAACZ,eAAe,CAACD,EAAE,CAAC;;EAE5C;EACA,OAAOD,QAAQ,CAACS,QAAQ,CAACR,EAAE,CAAC;AAChC","ignoreList":[]}
+{"version":3,"names":["ElementFactory","evaluateDeleteConstraint","$getElementById","$removeElementReferenceFromParent","Commands","executeOnChange","applyAncestorUpdates","$deleteElement","editor","id","ignoreConstraints","document","getDocumentState","read","elementToDelete","result","elementId","components","getEditorState","allowed","ancestorUpdates","breakpointNames","baseBreakpoint","elementFactory","componentsManifest","editorState","viewport","breakpoints","map","bp","name","action","executeCommand","DeselectElement","updateDocument","parent","parentId","slot","Object","values","elements","filter","el","forEach","element","bindings","length"],"sources":["$deleteElement.ts"],"sourcesContent":["import { ElementFactory, evaluateDeleteConstraint } from \"@webiny/website-builder-sdk\";\nimport { $getElementById } from \"./$getElementById.js\";\nimport { $removeElementReferenceFromParent } from \"./$removeElementReferenceFromParent.js\";\nimport type { Editor } from \"~/editorSdk/Editor.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport { executeOnChange, applyAncestorUpdates } from \"./executeOnChange.js\";\n\nexport function $deleteElement(editor: Editor, id: string, ignoreConstraints = false) {\n    const document = editor.getDocumentState().read();\n    const elementToDelete = $getElementById(document, id);\n\n    if (!elementToDelete) {\n        return;\n    }\n\n    if (!ignoreConstraints) {\n        const result = evaluateDeleteConstraint({\n            elementId: id,\n            document,\n            components: editor.getEditorState().read().components\n        });\n\n        if (!result.allowed) {\n            return result;\n        }\n    }\n\n    // Fire onChange on the element + onDescendantChange on ancestors BEFORE deletion,\n    // while the element and its parent chain are still in the document.\n    let ancestorUpdates: ReturnType<typeof executeOnChange> = [];\n    let breakpointNames: string[] = [];\n    let baseBreakpoint = \"\";\n    let elementFactory: ElementFactory | undefined;\n\n    if (!ignoreConstraints) {\n        const componentsManifest = editor.getEditorState().read().components;\n        const editorState = editor.getEditorState().read();\n        breakpointNames = editorState.viewport.breakpoints.map(bp => bp.name);\n        baseBreakpoint = breakpointNames[0];\n        elementFactory = new ElementFactory(componentsManifest);\n\n        ancestorUpdates = executeOnChange({\n            editor,\n            elementId: id,\n            action: \"delete\",\n            breakpointNames,\n            baseBreakpoint,\n            elementFactory\n        });\n    }\n\n    editor.executeCommand(Commands.DeselectElement);\n\n    editor.updateDocument(document => {\n        // Remove the reference to the element from its parent element.\n        if (elementToDelete.parent) {\n            $removeElementReferenceFromParent(document, {\n                elementId: id,\n                parentId: elementToDelete.parent.id,\n                slot: elementToDelete.parent.slot\n            });\n        }\n\n        // Remove all descendants.\n        Object.values(document.elements)\n            .filter(el => el.parent?.id === id)\n            .forEach(element => {\n                $deleteElement(editor, element.id, true);\n            });\n\n        // Delete element bindings.\n        delete document.bindings[elementToDelete.id];\n\n        // Delete the element itself.\n        delete document.elements[id];\n\n        // Apply ancestor updates from onDescendantChange within the same transaction.\n        if (ancestorUpdates.length > 0 && elementFactory) {\n            applyAncestorUpdates(\n                document,\n                ancestorUpdates,\n                breakpointNames,\n                baseBreakpoint,\n                elementFactory\n            );\n        }\n    });\n\n    return;\n}\n"],"mappings":"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","ignoreList":[]}

package/editorSdk/utils/$getElementInputValues.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentManifest, Document } from "@webiny/website-builder-sdk";
+export interface ResolvedElementInputs {
+    [key: string]: any;
+}
+export declare function $getElementInputValues(document: Document, components: Record<string, ComponentManifest>, elementId: string | null, depth?: number): ResolvedElementInputs;

package/editorSdk/utils/$getElementInputValues.js

@@ -0,0 +1,76 @@
+import { BindingsResolver, ComponentManifestToAstConverter } from "@webiny/website-builder-sdk";
+function resolveElement(document, components, elementId, depth) {
+  const element = document.elements[elementId];
+  if (!element) {
+    return {};
+  }
+  const manifest = components[element.component.name];
+  if (!manifest) {
+    return {};
+  }
+  const elementBindings = document.bindings[elementId] ?? {};
+  const inputAst = ComponentManifestToAstConverter.convert(manifest.inputs ?? []);
+  const resolver = new BindingsResolver(document.state);
+  const [resolved] = resolver.resolveElement({
+    element,
+    elementBindings,
+    inputAst
+  });
+  const inputs = resolved?.inputs ?? {};
+  if (depth <= 0) {
+    return inputs;
+  }
+  return resolveSlotsByAst(document, components, inputs, inputAst, depth);
+}
+
+/**
+ * Walk the resolved inputs using the AST to identify slot values,
+ * and resolve slot element IDs into their resolved inputs.
+ */
+function resolveSlotsByAst(document, components, inputs, ast, depth) {
+  const result = {
+    ...inputs
+  };
+  for (const node of ast) {
+    const value = inputs[node.name];
+    if (value === undefined) {
+      continue;
+    }
+    if (node.type === "slot") {
+      result[node.name] = resolveSlotValue(document, components, value, depth);
+    } else if (node.children.length > 0) {
+      // Object or object-list — recurse into children using their AST.
+      if (node.list && Array.isArray(value)) {
+        result[node.name] = value.map(item => resolveSlotsByAst(document, components, item, node.children, depth));
+      } else if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+        result[node.name] = resolveSlotsByAst(document, components, value, node.children, depth);
+      }
+    }
+  }
+  return result;
+}
+
+/**
+ * Resolve a slot value: a single element ID string, or an array of element ID strings.
+ */
+function resolveSlotValue(document, components, value, depth) {
+  if (typeof value === "string" && document.elements[value]) {
+    const resolved = resolveElement(document, components, value, depth - 1);
+    return {
+      elementId: value,
+      ...resolved
+    };
+  }
+  if (Array.isArray(value)) {
+    return value.map(item => resolveSlotValue(document, components, item, depth));
+  }
+  return value;
+}
+export function $getElementInputValues(document, components, elementId, depth = 0) {
+  if (!elementId) {
+    return {};
+  }
+  return resolveElement(document, components, elementId, depth);
+}
+
+//# sourceMappingURL=$getElementInputValues.js.map

package/editorSdk/utils/$getElementInputValues.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["BindingsResolver","ComponentManifestToAstConverter","resolveElement","document","components","elementId","depth","element","elements","manifest","component","name","elementBindings","bindings","inputAst","convert","inputs","resolver","state","resolved","resolveSlotsByAst","ast","result","node","value","undefined","type","resolveSlotValue","children","length","list","Array","isArray","map","item","$getElementInputValues"],"sources":["$getElementInputValues.ts"],"sourcesContent":["import type { ComponentManifest, Document } from \"@webiny/website-builder-sdk\";\nimport {\n    BindingsResolver,\n    ComponentManifestToAstConverter,\n    type InputAstNode\n} from \"@webiny/website-builder-sdk\";\n\nexport interface ResolvedElementInputs {\n    [key: string]: any;\n}\n\nfunction resolveElement(\n    document: Document,\n    components: Record<string, ComponentManifest>,\n    elementId: string,\n    depth: number\n): ResolvedElementInputs {\n    const element = document.elements[elementId];\n    if (!element) {\n        return {};\n    }\n\n    const manifest = components[element.component.name];\n    if (!manifest) {\n        return {};\n    }\n\n    const elementBindings = document.bindings[elementId] ?? {};\n    const inputAst = ComponentManifestToAstConverter.convert(manifest.inputs ?? []);\n    const resolver = new BindingsResolver(document.state);\n\n    const [resolved] = resolver.resolveElement({\n        element,\n        elementBindings,\n        inputAst\n    });\n\n    const inputs = resolved?.inputs ?? {};\n\n    if (depth <= 0) {\n        return inputs;\n    }\n\n    return resolveSlotsByAst(document, components, inputs, inputAst, depth);\n}\n\n/**\n * Walk the resolved inputs using the AST to identify slot values,\n * and resolve slot element IDs into their resolved inputs.\n */\nfunction resolveSlotsByAst(\n    document: Document,\n    components: Record<string, ComponentManifest>,\n    inputs: Record<string, any>,\n    ast: InputAstNode[],\n    depth: number\n): Record<string, any> {\n    const result: Record<string, any> = { ...inputs };\n\n    for (const node of ast) {\n        const value = inputs[node.name];\n        if (value === undefined) {\n            continue;\n        }\n\n        if (node.type === \"slot\") {\n            result[node.name] = resolveSlotValue(document, components, value, depth);\n        } else if (node.children.length > 0) {\n            // Object or object-list — recurse into children using their AST.\n            if (node.list && Array.isArray(value)) {\n                result[node.name] = value.map(item =>\n                    resolveSlotsByAst(document, components, item, node.children, depth)\n                );\n            } else if (typeof value === \"object\" && value !== null && !Array.isArray(value)) {\n                result[node.name] = resolveSlotsByAst(\n                    document,\n                    components,\n                    value,\n                    node.children,\n                    depth\n                );\n            }\n        }\n    }\n\n    return result;\n}\n\n/**\n * Resolve a slot value: a single element ID string, or an array of element ID strings.\n */\nfunction resolveSlotValue(\n    document: Document,\n    components: Record<string, ComponentManifest>,\n    value: any,\n    depth: number\n): any {\n    if (typeof value === \"string\" && document.elements[value]) {\n        const resolved = resolveElement(document, components, value, depth - 1);\n        return { elementId: value, ...resolved };\n    }\n\n    if (Array.isArray(value)) {\n        return value.map(item => resolveSlotValue(document, components, item, depth));\n    }\n\n    return value;\n}\n\nexport function $getElementInputValues(\n    document: Document,\n    components: Record<string, ComponentManifest>,\n    elementId: string | null,\n    depth = 0\n) {\n    if (!elementId) {\n        return {};\n    }\n\n    return resolveElement(document, components, elementId, depth);\n}\n"],"mappings":"AACA,SACIA,gBAAgB,EAChBC,+BAA+B,QAE5B,6BAA6B;AAMpC,SAASC,cAAcA,CACnBC,QAAkB,EAClBC,UAA6C,EAC7CC,SAAiB,EACjBC,KAAa,EACQ;EACrB,MAAMC,OAAO,GAAGJ,QAAQ,CAACK,QAAQ,CAACH,SAAS,CAAC;EAC5C,IAAI,CAACE,OAAO,EAAE;IACV,OAAO,CAAC,CAAC;EACb;EAEA,MAAME,QAAQ,GAAGL,UAAU,CAACG,OAAO,CAACG,SAAS,CAACC,IAAI,CAAC;EACnD,IAAI,CAACF,QAAQ,EAAE;IACX,OAAO,CAAC,CAAC;EACb;EAEA,MAAMG,eAAe,GAAGT,QAAQ,CAACU,QAAQ,CAACR,SAAS,CAAC,IAAI,CAAC,CAAC;EAC1D,MAAMS,QAAQ,GAAGb,+BAA+B,CAACc,OAAO,CAACN,QAAQ,CAACO,MAAM,IAAI,EAAE,CAAC;EAC/E,MAAMC,QAAQ,GAAG,IAAIjB,gBAAgB,CAACG,QAAQ,CAACe,KAAK,CAAC;EAErD,MAAM,CAACC,QAAQ,CAAC,GAAGF,QAAQ,CAACf,cAAc,CAAC;IACvCK,OAAO;IACPK,eAAe;IACfE;EACJ,CAAC,CAAC;EAEF,MAAME,MAAM,GAAGG,QAAQ,EAAEH,MAAM,IAAI,CAAC,CAAC;EAErC,IAAIV,KAAK,IAAI,CAAC,EAAE;IACZ,OAAOU,MAAM;EACjB;EAEA,OAAOI,iBAAiB,CAACjB,QAAQ,EAAEC,UAAU,EAAEY,MAAM,EAAEF,QAAQ,EAAER,KAAK,CAAC;AAC3E;;AAEA;AACA;AACA;AACA;AACA,SAASc,iBAAiBA,CACtBjB,QAAkB,EAClBC,UAA6C,EAC7CY,MAA2B,EAC3BK,GAAmB,EACnBf,KAAa,EACM;EACnB,MAAMgB,MAA2B,GAAG;IAAE,GAAGN;EAAO,CAAC;EAEjD,KAAK,MAAMO,IAAI,IAAIF,GAAG,EAAE;IACpB,MAAMG,KAAK,GAAGR,MAAM,CAACO,IAAI,CAACZ,IAAI,CAAC;IAC/B,IAAIa,KAAK,KAAKC,SAAS,EAAE;MACrB;IACJ;IAEA,IAAIF,IAAI,CAACG,IAAI,KAAK,MAAM,EAAE;MACtBJ,MAAM,CAACC,IAAI,CAACZ,IAAI,CAAC,GAAGgB,gBAAgB,CAACxB,QAAQ,EAAEC,UAAU,EAAEoB,KAAK,EAAElB,KAAK,CAAC;IAC5E,CAAC,MAAM,IAAIiB,IAAI,CAACK,QAAQ,CAACC,MAAM,GAAG,CAAC,EAAE;MACjC;MACA,IAAIN,IAAI,CAACO,IAAI,IAAIC,KAAK,CAACC,OAAO,CAACR,KAAK,CAAC,EAAE;QACnCF,MAAM,CAACC,IAAI,CAACZ,IAAI,CAAC,GAAGa,KAAK,CAACS,GAAG,CAACC,IAAI,IAC9Bd,iBAAiB,CAACjB,QAAQ,EAAEC,UAAU,EAAE8B,IAAI,EAAEX,IAAI,CAACK,QAAQ,EAAEtB,KAAK,CACtE,CAAC;MACL,CAAC,MAAM,IAAI,OAAOkB,KAAK,KAAK,QAAQ,IAAIA,KAAK,KAAK,IAAI,IAAI,CAACO,KAAK,CAACC,OAAO,CAACR,KAAK,CAAC,EAAE;QAC7EF,MAAM,CAACC,IAAI,CAACZ,IAAI,CAAC,GAAGS,iBAAiB,CACjCjB,QAAQ,EACRC,UAAU,EACVoB,KAAK,EACLD,IAAI,CAACK,QAAQ,EACbtB,KACJ,CAAC;MACL;IACJ;EACJ;EAEA,OAAOgB,MAAM;AACjB;;AAEA;AACA;AACA;AACA,SAASK,gBAAgBA,CACrBxB,QAAkB,EAClBC,UAA6C,EAC7CoB,KAAU,EACVlB,KAAa,EACV;EACH,IAAI,OAAOkB,KAAK,KAAK,QAAQ,IAAIrB,QAAQ,CAACK,QAAQ,CAACgB,KAAK,CAAC,EAAE;IACvD,MAAML,QAAQ,GAAGjB,cAAc,CAACC,QAAQ,EAAEC,UAAU,EAAEoB,KAAK,EAAElB,KAAK,GAAG,CAAC,CAAC;IACvE,OAAO;MAAED,SAAS,EAAEmB,KAAK;MAAE,GAAGL;IAAS,CAAC;EAC5C;EAEA,IAAIY,KAAK,CAACC,OAAO,CAACR,KAAK,CAAC,EAAE;IACtB,OAAOA,KAAK,CAACS,GAAG,CAACC,IAAI,IAAIP,gBAAgB,CAACxB,QAAQ,EAAEC,UAAU,EAAE8B,IAAI,EAAE5B,KAAK,CAAC,CAAC;EACjF;EAEA,OAAOkB,KAAK;AAChB;AAEA,OAAO,SAASW,sBAAsBA,CAClChC,QAAkB,EAClBC,UAA6C,EAC7CC,SAAwB,EACxBC,KAAK,GAAG,CAAC,EACX;EACE,IAAI,CAACD,SAAS,EAAE;IACZ,OAAO,CAAC,CAAC;EACb;EAEA,OAAOH,cAAc,CAACC,QAAQ,EAAEC,UAAU,EAAEC,SAAS,EAAEC,KAAK,CAAC;AACjE","ignoreList":[]}

package/editorSdk/utils/$getElementsOfType.d.ts

@@ -0,0 +1,2 @@
+import type { Document } from "@webiny/website-builder-sdk";
+export declare function $getElementsOfType(document: Document, componentName: string): import("@webiny/website-builder-sdk").DocumentElement[];

package/editorSdk/utils/$getElementsOfType.js

@@ -0,0 +1,5 @@
+export function $getElementsOfType(document, componentName) {
+  return Object.values(document.elements).filter(el => el.component.name === componentName);
+}
+
+//# sourceMappingURL=$getElementsOfType.js.map

package/editorSdk/utils/$getElementsOfType.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["$getElementsOfType","document","componentName","Object","values","elements","filter","el","component","name"],"sources":["$getElementsOfType.ts"],"sourcesContent":["import type { Document } from \"@webiny/website-builder-sdk\";\n\nexport function $getElementsOfType(document: Document, componentName: string) {\n    return Object.values(document.elements).filter(el => el.component.name === componentName);\n}\n"],"mappings":"AAEA,OAAO,SAASA,kBAAkBA,CAACC,QAAkB,EAAEC,aAAqB,EAAE;EAC1E,OAAOC,MAAM,CAACC,MAAM,CAACH,QAAQ,CAACI,QAAQ,CAAC,CAACC,MAAM,CAACC,EAAE,IAAIA,EAAE,CAACC,SAAS,CAACC,IAAI,KAAKP,aAAa,CAAC;AAC7F","ignoreList":[]}

package/editorSdk/utils/$getFirstElementOfType.d.ts

@@ -0,0 +1,2 @@
+import type { Document } from "@webiny/website-builder-sdk";
+export declare function $getFirstElementOfType(document: Document, componentName: string): import("@webiny/website-builder-sdk").DocumentElement | undefined;

package/editorSdk/utils/$getFirstElementOfType.js

@@ -0,0 +1,5 @@
+export function $getFirstElementOfType(document, componentName) {
+  return Object.values(document.elements).find(el => el.component.name === componentName);
+}
+
+//# sourceMappingURL=$getFirstElementOfType.js.map

package/editorSdk/utils/$getFirstElementOfType.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["$getFirstElementOfType","document","componentName","Object","values","elements","find","el","component","name"],"sources":["$getFirstElementOfType.ts"],"sourcesContent":["import type { Document } from \"@webiny/website-builder-sdk\";\n\nexport function $getFirstElementOfType(document: Document, componentName: string) {\n    return Object.values(document.elements).find(el => el.component.name === componentName);\n}\n"],"mappings":"AAEA,OAAO,SAASA,sBAAsBA,CAACC,QAAkB,EAAEC,aAAqB,EAAE;EAC9E,OAAOC,MAAM,CAACC,MAAM,CAACH,QAAQ,CAACI,QAAQ,CAAC,CAACC,IAAI,CAACC,EAAE,IAAIA,EAAE,CAACC,SAAS,CAACC,IAAI,KAAKP,aAAa,CAAC;AAC3F","ignoreList":[]}

package/editorSdk/utils/$moveElement.d.ts

@@ -1,9 +1,10 @@
-import type { Document } from "@webiny/website-builder-sdk";
+import type { ComponentManifest, ConstraintResult, Document } from "@webiny/website-builder-sdk";
 interface MoveParams {
     elementId: string;
     parentId: string;
     slot: string;
     index: number;
+    components: Record<string, ComponentManifest>;
 }
-export declare function $moveElement(document: Document, params: MoveParams): void;
+export declare function $moveElement(document: Document, params: MoveParams): ConstraintResult | undefined;
 export {};

package/editorSdk/utils/$moveElement.js

@@ -1,3 +1,4 @@
+import { evaluateConstraints } from "@webiny/website-builder-sdk";
 import { $getElementById } from "./$getElementById.js";
 import { $removeElementReferenceFromParent } from "./$removeElementReferenceFromParent.js";
 import { $addElementReferenceToParent } from "./$addElementReferenceToParent.js";
@@ -6,9 +7,20 @@ export function $moveElement(document, params) {
     elementId,
     index,
     slot,
-    parentId
+    parentId,
+    components
   } = params;
   const elementToMove = $getElementById(document, elementId);
+  const result = evaluateConstraints({
+    componentName: elementToMove.component.name,
+    parentId,
+    slot,
+    document,
+    components
+  });
+  if (!result.allowed) {
+    return result;
+  }
 
   // Remove the reference to the element from its parent element.
   if (elementToMove.parent) {
@@ -32,6 +44,7 @@ export function $moveElement(document, params) {
     slot,
     index
   });
+  return;
 }
 
 //# sourceMappingURL=$moveElement.js.map

package/editorSdk/utils/$moveElement.js.map

@@ -1 +1 @@
-{"version":3,"names":["$getElementById","$removeElementReferenceFromParent","$addElementReferenceToParent","$moveElement","document","params","elementId","index","slot","parentId","elementToMove","parent","id"],"sources":["$moveElement.ts"],"sourcesContent":["import type { Document } from \"@webiny/website-builder-sdk\";\nimport { $getElementById } from \"./$getElementById.js\";\nimport { $removeElementReferenceFromParent } from \"./$removeElementReferenceFromParent.js\";\nimport { $addElementReferenceToParent } from \"./$addElementReferenceToParent.js\";\n\ninterface MoveParams {\n    // ID of the element to move.\n    elementId: string;\n    // Parent element for the new element.\n    parentId: string;\n    // Parent element slot (e.g., `children`, `heroBanner`, `tabsList.0.content`).\n    slot: string;\n    // Index within the slot.\n    index: number;\n}\n\nexport function $moveElement(document: Document, params: MoveParams) {\n    const { elementId, index, slot, parentId } = params;\n\n    const elementToMove = $getElementById(document, elementId);\n\n    // Remove the reference to the element from its parent element.\n    if (elementToMove.parent) {\n        $removeElementReferenceFromParent(document, {\n            elementId,\n            parentId: elementToMove.parent.id,\n            slot: elementToMove.parent.slot\n        });\n    }\n\n    // Assign new parent.\n    elementToMove.parent = {\n        id: parentId,\n        slot\n    };\n\n    // Add reference to the new parent.\n    $addElementReferenceToParent(document, {\n        elementId,\n        parentId,\n        slot,\n        index\n    });\n}\n"],"mappings":"AACA,SAASA,eAAe;AACxB,SAASC,iCAAiC;AAC1C,SAASC,4BAA4B;AAarC,OAAO,SAASC,YAAYA,CAACC,QAAkB,EAAEC,MAAkB,EAAE;EACjE,MAAM;IAAEC,SAAS;IAAEC,KAAK;IAAEC,IAAI;IAAEC;EAAS,CAAC,GAAGJ,MAAM;EAEnD,MAAMK,aAAa,GAAGV,eAAe,CAACI,QAAQ,EAAEE,SAAS,CAAC;;EAE1D;EACA,IAAII,aAAa,CAACC,MAAM,EAAE;IACtBV,iCAAiC,CAACG,QAAQ,EAAE;MACxCE,SAAS;MACTG,QAAQ,EAAEC,aAAa,CAACC,MAAM,CAACC,EAAE;MACjCJ,IAAI,EAAEE,aAAa,CAACC,MAAM,CAACH;IAC/B,CAAC,CAAC;EACN;;EAEA;EACAE,aAAa,CAACC,MAAM,GAAG;IACnBC,EAAE,EAAEH,QAAQ;IACZD;EACJ,CAAC;;EAED;EACAN,4BAA4B,CAACE,QAAQ,EAAE;IACnCE,SAAS;IACTG,QAAQ;IACRD,IAAI;IACJD;EACJ,CAAC,CAAC;AACN","ignoreList":[]}
+{"version":3,"names":["evaluateConstraints","$getElementById","$removeElementReferenceFromParent","$addElementReferenceToParent","$moveElement","document","params","elementId","index","slot","parentId","components","elementToMove","result","componentName","component","name","allowed","parent","id"],"sources":["$moveElement.ts"],"sourcesContent":["import type { ComponentManifest, ConstraintResult, Document } from \"@webiny/website-builder-sdk\";\nimport { evaluateConstraints } from \"@webiny/website-builder-sdk\";\nimport { $getElementById } from \"./$getElementById.js\";\nimport { $removeElementReferenceFromParent } from \"./$removeElementReferenceFromParent.js\";\nimport { $addElementReferenceToParent } from \"./$addElementReferenceToParent.js\";\n\ninterface MoveParams {\n    // ID of the element to move.\n    elementId: string;\n    // Parent element for the new element.\n    parentId: string;\n    // Parent element slot (e.g., `children`, `heroBanner`, `tabsList.0.content`).\n    slot: string;\n    // Index within the slot.\n    index: number;\n    // All registered component manifests.\n    components: Record<string, ComponentManifest>;\n}\n\nexport function $moveElement(document: Document, params: MoveParams): ConstraintResult | undefined {\n    const { elementId, index, slot, parentId, components } = params;\n\n    const elementToMove = $getElementById(document, elementId);\n\n    const result = evaluateConstraints({\n        componentName: elementToMove.component.name,\n        parentId,\n        slot,\n        document,\n        components\n    });\n\n    if (!result.allowed) {\n        return result;\n    }\n\n    // Remove the reference to the element from its parent element.\n    if (elementToMove.parent) {\n        $removeElementReferenceFromParent(document, {\n            elementId,\n            parentId: elementToMove.parent.id,\n            slot: elementToMove.parent.slot\n        });\n    }\n\n    // Assign new parent.\n    elementToMove.parent = {\n        id: parentId,\n        slot\n    };\n\n    // Add reference to the new parent.\n    $addElementReferenceToParent(document, {\n        elementId,\n        parentId,\n        slot,\n        index\n    });\n\n    return;\n}\n"],"mappings":"AACA,SAASA,mBAAmB,QAAQ,6BAA6B;AACjE,SAASC,eAAe;AACxB,SAASC,iCAAiC;AAC1C,SAASC,4BAA4B;AAerC,OAAO,SAASC,YAAYA,CAACC,QAAkB,EAAEC,MAAkB,EAAgC;EAC/F,MAAM;IAAEC,SAAS;IAAEC,KAAK;IAAEC,IAAI;IAAEC,QAAQ;IAAEC;EAAW,CAAC,GAAGL,MAAM;EAE/D,MAAMM,aAAa,GAAGX,eAAe,CAACI,QAAQ,EAAEE,SAAS,CAAC;EAE1D,MAAMM,MAAM,GAAGb,mBAAmB,CAAC;IAC/Bc,aAAa,EAAEF,aAAa,CAACG,SAAS,CAACC,IAAI;IAC3CN,QAAQ;IACRD,IAAI;IACJJ,QAAQ;IACRM;EACJ,CAAC,CAAC;EAEF,IAAI,CAACE,MAAM,CAACI,OAAO,EAAE;IACjB,OAAOJ,MAAM;EACjB;;EAEA;EACA,IAAID,aAAa,CAACM,MAAM,EAAE;IACtBhB,iCAAiC,CAACG,QAAQ,EAAE;MACxCE,SAAS;MACTG,QAAQ,EAAEE,aAAa,CAACM,MAAM,CAACC,EAAE;MACjCV,IAAI,EAAEG,aAAa,CAACM,MAAM,CAACT;IAC/B,CAAC,CAAC;EACN;;EAEA;EACAG,aAAa,CAACM,MAAM,GAAG;IACnBC,EAAE,EAAET,QAAQ;IACZD;EACJ,CAAC;;EAED;EACAN,4BAA4B,CAACE,QAAQ,EAAE;IACnCE,SAAS;IACTG,QAAQ;IACRD,IAAI;IACJD;EACJ,CAAC,CAAC;EAEF;AACJ","ignoreList":[]}

package/editorSdk/utils/$previewElementInputs.d.ts

@@ -0,0 +1,6 @@
+import type { Editor } from "../Editor.js";
+/**
+ * Programmatically update an element's inputs in the preview iframe only (via JSON patch).
+ * Does NOT write to the editor document state.
+ */
+export declare function $previewElementInputs(editor: Editor, elementId: string, updater: (inputs: Record<string, any>) => void): void;

package/editorSdk/utils/$previewElementInputs.js

@@ -0,0 +1,39 @@
+import { toJS } from "mobx";
+import { BindingsProcessor, ComponentManifestToAstConverter, ElementFactory, InputsBindingsProcessor } from "@webiny/website-builder-sdk";
+import { Commands } from "../../BaseEditor/index.js";
+
+/**
+ * Programmatically update an element's inputs in the preview iframe only (via JSON patch).
+ * Does NOT write to the editor document state.
+ */
+export function $previewElementInputs(editor, elementId, updater) {
+  const document = editor.getDocumentState().read();
+  const editorState = editor.getEditorState().read();
+  const components = editorState.components;
+  const element = document.elements[elementId];
+  if (!element) {
+    return;
+  }
+  const manifest = components[element.component.name];
+  if (!manifest) {
+    return;
+  }
+  const breakpointNames = editorState.viewport.breakpoints.map(bp => bp.name);
+  const baseBreakpoint = breakpointNames[0];
+  const inputsAst = ComponentManifestToAstConverter.convert(manifest.inputs ?? []);
+  const rawBindings = toJS(document.bindings[elementId]) ?? {};
+  const elementFactory = new ElementFactory(components);
+  const bindingsProcessor = new BindingsProcessor(breakpointNames);
+  const resolvedBindings = bindingsProcessor.getBindings(rawBindings, baseBreakpoint);
+  const inputsProcessor = new InputsBindingsProcessor(elementId, inputsAst, breakpointNames, rawBindings, elementFactory);
+  const deepInputs = inputsProcessor.toDeepInputs(resolvedBindings.inputs);
+  updater(deepInputs);
+  const inputsUpdater = inputsProcessor.createUpdate(deepInputs, baseBreakpoint);
+  const patch = inputsUpdater.createJsonPatch(rawBindings);
+  editor.executeCommand(Commands.PreviewPatchElement, {
+    elementId,
+    patch
+  });
+}
+
+//# sourceMappingURL=$previewElementInputs.js.map

package/editorSdk/utils/$previewElementInputs.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["toJS","BindingsProcessor","ComponentManifestToAstConverter","ElementFactory","InputsBindingsProcessor","Commands","$previewElementInputs","editor","elementId","updater","document","getDocumentState","read","editorState","getEditorState","components","element","elements","manifest","component","name","breakpointNames","viewport","breakpoints","map","bp","baseBreakpoint","inputsAst","convert","inputs","rawBindings","bindings","elementFactory","bindingsProcessor","resolvedBindings","getBindings","inputsProcessor","deepInputs","toDeepInputs","inputsUpdater","createUpdate","patch","createJsonPatch","executeCommand","PreviewPatchElement"],"sources":["$previewElementInputs.ts"],"sourcesContent":["import { toJS } from \"mobx\";\nimport type { Editor } from \"../Editor.js\";\nimport {\n    BindingsProcessor,\n    ComponentManifestToAstConverter,\n    ElementFactory,\n    InputsBindingsProcessor\n} from \"@webiny/website-builder-sdk\";\nimport { Commands } from \"~/BaseEditor/index.js\";\n\n/**\n * Programmatically update an element's inputs in the preview iframe only (via JSON patch).\n * Does NOT write to the editor document state.\n */\nexport function $previewElementInputs(\n    editor: Editor,\n    elementId: string,\n    updater: (inputs: Record<string, any>) => void\n): void {\n    const document = editor.getDocumentState().read();\n    const editorState = editor.getEditorState().read();\n    const components = editorState.components;\n\n    const element = document.elements[elementId];\n    if (!element) {\n        return;\n    }\n\n    const manifest = components[element.component.name];\n    if (!manifest) {\n        return;\n    }\n\n    const breakpointNames = editorState.viewport.breakpoints.map(bp => bp.name);\n    const baseBreakpoint = breakpointNames[0];\n    const inputsAst = ComponentManifestToAstConverter.convert(manifest.inputs ?? []);\n    const rawBindings = toJS(document.bindings[elementId]) ?? {};\n    const elementFactory = new ElementFactory(components);\n\n    const bindingsProcessor = new BindingsProcessor(breakpointNames);\n    const resolvedBindings = bindingsProcessor.getBindings(rawBindings, baseBreakpoint);\n\n    const inputsProcessor = new InputsBindingsProcessor(\n        elementId,\n        inputsAst,\n        breakpointNames,\n        rawBindings,\n        elementFactory\n    );\n\n    const deepInputs = inputsProcessor.toDeepInputs(resolvedBindings.inputs);\n\n    updater(deepInputs);\n\n    const inputsUpdater = inputsProcessor.createUpdate(deepInputs, baseBreakpoint);\n    const patch = inputsUpdater.createJsonPatch(rawBindings);\n\n    editor.executeCommand(Commands.PreviewPatchElement, { elementId, patch });\n}\n"],"mappings":"AAAA,SAASA,IAAI,QAAQ,MAAM;AAE3B,SACIC,iBAAiB,EACjBC,+BAA+B,EAC/BC,cAAc,EACdC,uBAAuB,QACpB,6BAA6B;AACpC,SAASC,QAAQ;;AAEjB;AACA;AACA;AACA;AACA,OAAO,SAASC,qBAAqBA,CACjCC,MAAc,EACdC,SAAiB,EACjBC,OAA8C,EAC1C;EACJ,MAAMC,QAAQ,GAAGH,MAAM,CAACI,gBAAgB,CAAC,CAAC,CAACC,IAAI,CAAC,CAAC;EACjD,MAAMC,WAAW,GAAGN,MAAM,CAACO,cAAc,CAAC,CAAC,CAACF,IAAI,CAAC,CAAC;EAClD,MAAMG,UAAU,GAAGF,WAAW,CAACE,UAAU;EAEzC,MAAMC,OAAO,GAAGN,QAAQ,CAACO,QAAQ,CAACT,SAAS,CAAC;EAC5C,IAAI,CAACQ,OAAO,EAAE;IACV;EACJ;EAEA,MAAME,QAAQ,GAAGH,UAAU,CAACC,OAAO,CAACG,SAAS,CAACC,IAAI,CAAC;EACnD,IAAI,CAACF,QAAQ,EAAE;IACX;EACJ;EAEA,MAAMG,eAAe,GAAGR,WAAW,CAACS,QAAQ,CAACC,WAAW,CAACC,GAAG,CAACC,EAAE,IAAIA,EAAE,CAACL,IAAI,CAAC;EAC3E,MAAMM,cAAc,GAAGL,eAAe,CAAC,CAAC,CAAC;EACzC,MAAMM,SAAS,GAAGzB,+BAA+B,CAAC0B,OAAO,CAACV,QAAQ,CAACW,MAAM,IAAI,EAAE,CAAC;EAChF,MAAMC,WAAW,GAAG9B,IAAI,CAACU,QAAQ,CAACqB,QAAQ,CAACvB,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC;EAC5D,MAAMwB,cAAc,GAAG,IAAI7B,cAAc,CAACY,UAAU,CAAC;EAErD,MAAMkB,iBAAiB,GAAG,IAAIhC,iBAAiB,CAACoB,eAAe,CAAC;EAChE,MAAMa,gBAAgB,GAAGD,iBAAiB,CAACE,WAAW,CAACL,WAAW,EAAEJ,cAAc,CAAC;EAEnF,MAAMU,eAAe,GAAG,IAAIhC,uBAAuB,CAC/CI,SAAS,EACTmB,SAAS,EACTN,eAAe,EACfS,WAAW,EACXE,cACJ,CAAC;EAED,MAAMK,UAAU,GAAGD,eAAe,CAACE,YAAY,CAACJ,gBAAgB,CAACL,MAAM,CAAC;EAExEpB,OAAO,CAAC4B,UAAU,CAAC;EAEnB,MAAME,aAAa,GAAGH,eAAe,CAACI,YAAY,CAACH,UAAU,EAAEX,cAAc,CAAC;EAC9E,MAAMe,KAAK,GAAGF,aAAa,CAACG,eAAe,CAACZ,WAAW,CAAC;EAExDvB,MAAM,CAACoC,cAAc,CAACtC,QAAQ,CAACuC,mBAAmB,EAAE;IAAEpC,SAAS;IAAEiC;EAAM,CAAC,CAAC;AAC7E","ignoreList":[]}

package/editorSdk/utils/$updateElementInputs.d.ts

@@ -0,0 +1,7 @@
+import type { Editor } from "../Editor.js";
+/**
+ * Programmatically update an element's inputs using a callback-based API.
+ * The updater receives a deep object representation of the element's inputs
+ * which can be mutated in place.
+ */
+export declare function $updateElementInputs(editor: Editor, elementId: string, updater: (inputs: Record<string, any>) => void): void;

package/editorSdk/utils/$updateElementInputs.js

@@ -0,0 +1,50 @@
+import { toJS } from "mobx";
+import { BindingsProcessor, ComponentManifestToAstConverter, ElementFactory, InputsBindingsProcessor } from "@webiny/website-builder-sdk";
+import { executeOnChange, applyAncestorUpdates } from "./executeOnChange.js";
+
+/**
+ * Programmatically update an element's inputs using a callback-based API.
+ * The updater receives a deep object representation of the element's inputs
+ * which can be mutated in place.
+ */
+export function $updateElementInputs(editor, elementId, updater) {
+  const document = editor.getDocumentState().read();
+  const editorState = editor.getEditorState().read();
+  const components = editorState.components;
+  const element = document.elements[elementId];
+  if (!element) {
+    return;
+  }
+  const manifest = components[element.component.name];
+  if (!manifest) {
+    return;
+  }
+  const breakpointNames = editorState.viewport.breakpoints.map(bp => bp.name);
+  const baseBreakpoint = breakpointNames[0];
+  const inputsAst = ComponentManifestToAstConverter.convert(manifest.inputs ?? []);
+  const rawBindings = toJS(document.bindings[elementId]) ?? {};
+  const elementFactory = new ElementFactory(components);
+  const bindingsProcessor = new BindingsProcessor(breakpointNames);
+  const resolvedBindings = bindingsProcessor.getBindings(rawBindings, baseBreakpoint);
+  const inputsProcessor = new InputsBindingsProcessor(elementId, inputsAst, breakpointNames, rawBindings, elementFactory);
+  const deepInputs = inputsProcessor.toDeepInputs(resolvedBindings.inputs);
+  updater(deepInputs);
+
+  // Run manifest.onChange + onDescendantChange on ancestors
+  const ancestorUpdates = executeOnChange({
+    editor,
+    elementId,
+    deepInputs,
+    action: "update",
+    breakpointNames,
+    baseBreakpoint,
+    elementFactory
+  });
+  const inputsUpdater = inputsProcessor.createUpdate(deepInputs, baseBreakpoint);
+  editor.updateDocument(doc => {
+    inputsUpdater.applyToDocument(doc);
+    applyAncestorUpdates(doc, ancestorUpdates, breakpointNames, baseBreakpoint, elementFactory);
+  });
+}
+
+//# sourceMappingURL=$updateElementInputs.js.map

package/editorSdk/utils/$updateElementInputs.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["toJS","BindingsProcessor","ComponentManifestToAstConverter","ElementFactory","InputsBindingsProcessor","executeOnChange","applyAncestorUpdates","$updateElementInputs","editor","elementId","updater","document","getDocumentState","read","editorState","getEditorState","components","element","elements","manifest","component","name","breakpointNames","viewport","breakpoints","map","bp","baseBreakpoint","inputsAst","convert","inputs","rawBindings","bindings","elementFactory","bindingsProcessor","resolvedBindings","getBindings","inputsProcessor","deepInputs","toDeepInputs","ancestorUpdates","action","inputsUpdater","createUpdate","updateDocument","doc","applyToDocument"],"sources":["$updateElementInputs.ts"],"sourcesContent":["import { toJS } from \"mobx\";\nimport type { Editor } from \"../Editor.js\";\nimport {\n    BindingsProcessor,\n    ComponentManifestToAstConverter,\n    ElementFactory,\n    InputsBindingsProcessor\n} from \"@webiny/website-builder-sdk\";\nimport { executeOnChange, applyAncestorUpdates } from \"./executeOnChange.js\";\n\n/**\n * Programmatically update an element's inputs using a callback-based API.\n * The updater receives a deep object representation of the element's inputs\n * which can be mutated in place.\n */\nexport function $updateElementInputs(\n    editor: Editor,\n    elementId: string,\n    updater: (inputs: Record<string, any>) => void\n): void {\n    const document = editor.getDocumentState().read();\n    const editorState = editor.getEditorState().read();\n    const components = editorState.components;\n\n    const element = document.elements[elementId];\n    if (!element) {\n        return;\n    }\n\n    const manifest = components[element.component.name];\n    if (!manifest) {\n        return;\n    }\n\n    const breakpointNames = editorState.viewport.breakpoints.map(bp => bp.name);\n    const baseBreakpoint = breakpointNames[0];\n    const inputsAst = ComponentManifestToAstConverter.convert(manifest.inputs ?? []);\n    const rawBindings = toJS(document.bindings[elementId]) ?? {};\n    const elementFactory = new ElementFactory(components);\n\n    const bindingsProcessor = new BindingsProcessor(breakpointNames);\n    const resolvedBindings = bindingsProcessor.getBindings(rawBindings, baseBreakpoint);\n\n    const inputsProcessor = new InputsBindingsProcessor(\n        elementId,\n        inputsAst,\n        breakpointNames,\n        rawBindings,\n        elementFactory\n    );\n\n    const deepInputs = inputsProcessor.toDeepInputs(resolvedBindings.inputs);\n\n    updater(deepInputs);\n\n    // Run manifest.onChange + onDescendantChange on ancestors\n    const ancestorUpdates = executeOnChange({\n        editor,\n        elementId,\n        deepInputs,\n        action: \"update\",\n        breakpointNames,\n        baseBreakpoint,\n        elementFactory\n    });\n\n    const inputsUpdater = inputsProcessor.createUpdate(deepInputs, baseBreakpoint);\n\n    editor.updateDocument(doc => {\n        inputsUpdater.applyToDocument(doc);\n        applyAncestorUpdates(doc, ancestorUpdates, breakpointNames, baseBreakpoint, elementFactory);\n    });\n}\n"],"mappings":"AAAA,SAASA,IAAI,QAAQ,MAAM;AAE3B,SACIC,iBAAiB,EACjBC,+BAA+B,EAC/BC,cAAc,EACdC,uBAAuB,QACpB,6BAA6B;AACpC,SAASC,eAAe,EAAEC,oBAAoB;;AAE9C;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,oBAAoBA,CAChCC,MAAc,EACdC,SAAiB,EACjBC,OAA8C,EAC1C;EACJ,MAAMC,QAAQ,GAAGH,MAAM,CAACI,gBAAgB,CAAC,CAAC,CAACC,IAAI,CAAC,CAAC;EACjD,MAAMC,WAAW,GAAGN,MAAM,CAACO,cAAc,CAAC,CAAC,CAACF,IAAI,CAAC,CAAC;EAClD,MAAMG,UAAU,GAAGF,WAAW,CAACE,UAAU;EAEzC,MAAMC,OAAO,GAAGN,QAAQ,CAACO,QAAQ,CAACT,SAAS,CAAC;EAC5C,IAAI,CAACQ,OAAO,EAAE;IACV;EACJ;EAEA,MAAME,QAAQ,GAAGH,UAAU,CAACC,OAAO,CAACG,SAAS,CAACC,IAAI,CAAC;EACnD,IAAI,CAACF,QAAQ,EAAE;IACX;EACJ;EAEA,MAAMG,eAAe,GAAGR,WAAW,CAACS,QAAQ,CAACC,WAAW,CAACC,GAAG,CAACC,EAAE,IAAIA,EAAE,CAACL,IAAI,CAAC;EAC3E,MAAMM,cAAc,GAAGL,eAAe,CAAC,CAAC,CAAC;EACzC,MAAMM,SAAS,GAAG1B,+BAA+B,CAAC2B,OAAO,CAACV,QAAQ,CAACW,MAAM,IAAI,EAAE,CAAC;EAChF,MAAMC,WAAW,GAAG/B,IAAI,CAACW,QAAQ,CAACqB,QAAQ,CAACvB,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC;EAC5D,MAAMwB,cAAc,GAAG,IAAI9B,cAAc,CAACa,UAAU,CAAC;EAErD,MAAMkB,iBAAiB,GAAG,IAAIjC,iBAAiB,CAACqB,eAAe,CAAC;EAChE,MAAMa,gBAAgB,GAAGD,iBAAiB,CAACE,WAAW,CAACL,WAAW,EAAEJ,cAAc,CAAC;EAEnF,MAAMU,eAAe,GAAG,IAAIjC,uBAAuB,CAC/CK,SAAS,EACTmB,SAAS,EACTN,eAAe,EACfS,WAAW,EACXE,cACJ,CAAC;EAED,MAAMK,UAAU,GAAGD,eAAe,CAACE,YAAY,CAACJ,gBAAgB,CAACL,MAAM,CAAC;EAExEpB,OAAO,CAAC4B,UAAU,CAAC;;EAEnB;EACA,MAAME,eAAe,GAAGnC,eAAe,CAAC;IACpCG,MAAM;IACNC,SAAS;IACT6B,UAAU;IACVG,MAAM,EAAE,QAAQ;IAChBnB,eAAe;IACfK,cAAc;IACdM;EACJ,CAAC,CAAC;EAEF,MAAMS,aAAa,GAAGL,eAAe,CAACM,YAAY,CAACL,UAAU,EAAEX,cAAc,CAAC;EAE9EnB,MAAM,CAACoC,cAAc,CAACC,GAAG,IAAI;IACzBH,aAAa,CAACI,eAAe,CAACD,GAAG,CAAC;IAClCvC,oBAAoB,CAACuC,GAAG,EAAEL,eAAe,EAAElB,eAAe,EAAEK,cAAc,EAAEM,cAAc,CAAC;EAC/F,CAAC,CAAC;AACN","ignoreList":[]}

package/editorSdk/utils/executeOnChange.d.ts

@@ -0,0 +1,33 @@
+import type { Editor } from "../Editor.js";
+import type { OnChangeAction, ComponentManifest, Document } from "@webiny/website-builder-sdk";
+import { ElementFactory } from "@webiny/website-builder-sdk";
+export interface AncestorUpdate {
+    elementId: string;
+    manifest: ComponentManifest;
+    inputs: Record<string, any>;
+}
+interface ExecuteOnChangeParams {
+    editor: Editor;
+    elementId: string;
+    /** When provided, used as-is. When omitted, resolved from the document. */
+    deepInputs?: Record<string, any>;
+    action: OnChangeAction;
+    breakpointNames: string[];
+    baseBreakpoint: string;
+    elementFactory: ElementFactory;
+    /** Optional deep styles — only available from the sidebar UI path. */
+    deepStyles?: Record<string, any>;
+}
+/**
+ * Runs manifest.onChange on the element, then walks up the ancestor chain
+ * firing onDescendantChange on each ancestor that defines it.
+ *
+ * Returns an array of ancestor updates that must be flushed inside
+ * editor.updateDocument().
+ */
+export declare function executeOnChange(params: ExecuteOnChangeParams): AncestorUpdate[];
+/**
+ * Apply collected ancestor updates inside editor.updateDocument().
+ */
+export declare function applyAncestorUpdates(doc: Document, updates: AncestorUpdate[], breakpointNames: string[], baseBreakpoint: string, elementFactory: ElementFactory): void;
+export {};