@elementor/editor-elements 4.3.0-973 → 4.3.0-975

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { PropsSchema, PropValue, SizePropValue, AnyTransformable, Props, LinkPropValue } from '@elementor/editor-props';
+import { PropsSchema, Dependency, PropValue, SizePropValue, AnyTransformable, Props, LinkPropValue } from '@elementor/editor-props';
 import { ClassState, StyleDefinitionID, StyleDefinition, StyleDefinitionVariant } from '@elementor/editor-styles';
 import * as _elementor_editor_v1_adapters from '@elementor/editor-v1-adapters';
 
@@ -58,6 +58,15 @@ type ElementControl = {
 type ControlItem = ControlsSection | Control | ElementControl;
 type ControlLayout = 'full' | 'two-columns' | 'custom';
 
+type ChildDependencyRule = {
+    child_type: string;
+    when: Dependency;
+    position: ElementPosition;
+    stash: boolean;
+    default_model: V1ElementData | null;
+};
+type ChildDependenciesConfig = ChildDependencyRule[];
+
 type ExtendedWindow = Window & {
     $e?: {
         components?: {
@@ -207,6 +216,11 @@ type V1ElementModelProps = {
 type V1ElementData = Omit<V1ElementModelProps, 'elements'> & {
     elements?: V1ElementData[];
 };
+type ElementPositionKind = 'last' | 'first' | 'index' | 'after_type' | 'before_type';
+type ElementPosition = {
+    kind: ElementPositionKind;
+    value: number | string | null;
+};
 type V1ElementEditorSettingsProps = {
     title?: string;
     initial_position?: number;
@@ -234,6 +248,7 @@ type V1ElementConfig<T = object, TChild = unknown> = {
     show_in_panel?: boolean;
     allowed_child_types?: string[];
     default_children?: Array<Record<string, TChild>>;
+    children_dependencies?: ChildDependencyRule[];
     meta?: {
         [key: string]: string | number | boolean | null | NonNullable<V1ElementConfig['meta']>;
     };
@@ -245,7 +260,31 @@ type V1Model$1<T> = {
         remove?: string[];
     }) => T;
     trigger?: (event: string, ...args: unknown[]) => void;
+    on?: (event: string, callback: (...args: unknown[]) => void, context?: unknown) => void;
+    off?: (event: string, callback?: (...args: unknown[]) => void, context?: unknown) => void;
+};
+
+type ReactiveModel = {
+    get: (key: string) => unknown;
+};
+type BindSettingsReconcileArgs = {
+    model: ReactiveModel;
+    elementConfig: V1ElementConfig | undefined;
 };
+type Detach = () => void;
+declare function bindSettingsReconcile({ model, elementConfig }: BindSettingsReconcileArgs): Detach;
+
+declare function evaluateWhen(when: Dependency | undefined, settings: Record<string, PropValue>): boolean;
+
+type ReconcileInitialChildrenArgs = {
+    elementId: string;
+    elementConfig: V1ElementConfig | undefined;
+    attributes: {
+        elements?: V1ElementData[];
+        settings?: V1ElementSettingsProps;
+    };
+};
+declare function reconcileInitialChildren({ elementId, elementConfig, attributes, }: ReconcileInitialChildrenArgs): void;
 
 type ElementModel = {
     id: string;
@@ -487,6 +526,8 @@ type ReplaceElementArgs = {
 };
 declare const replaceElement: ({ currentElementId, newElement, withHistory }: ReplaceElementArgs) => V1Element;
 
+declare function resolveInsertIndex(position: ElementPosition, elements: V1ElementData[]): number;
+
 declare const updateElementEditorSettings: ({ elementId, settings, }: {
     elementId: string;
     settings: V1ElementModelProps["editor_settings"];
@@ -552,4 +593,4 @@ declare const updateElementInteractions: ({ elementId, interactions, }: {
 }) => void;
 declare const playElementInteractions: (elementId: string, interactionId: string) => void;
 
-export { type AnimationPresetPropValue, type BackboneCollection, type BackboneModel, type BooleanPropValue, type ConfigPropValue, type Control, type ControlItem, type ControlLayout, type ControlsSection, type CreateElementParams, type CreateElementStyleArgs, type DropElementParams, type DuplicateElementParams, type DuplicateElementsParams, type DuplicatedElement, type DuplicatedElementsResult, ELEMENT_STYLE_CHANGE_EVENT, type Element, type ElementChildren, type ElementControl, type ElementID, type ElementInteractions, type ElementModel, type ElementType, type ExcludedBreakpointsPropValue, type ExtendedWindow, type InteractionBreakpointsPropValue, type InteractionItemPropValue, type LinkInLinkRestriction, type ModelResult, type MoveElementParams, type NumberPropValue, type PseudoState, type StringPropValue, type TimingConfigPropValue, type UpdateElementSettingsArgs, type UpdateElementStyleArgs, type V1Element, type V1ElementConfig, type V1ElementData, type V1ElementEditorSettingsProps, type V1ElementModelProps, type V1ElementSettingsProps, addModelToParent, createElement, createElementStyle, createElements, deleteElement, deleteElementStyle, dropElement, duplicateElement, duplicateElements, findChildRecursive, findModelInDocument, generateElementId, getAllDescendants, getAnchoredAncestorId, getAnchoredDescendantId, getContainer, getCurrentDocumentContainer, getCurrentDocumentId, getElementChildren as getElementChildrenWithFallback, getElementEditorSettings, getElementIcon, getElementInteractions, getElementLabel, getElementSetting, getElementSettings, getElementStyles, getElementTitle, getElementType, getElements, getLinkInLinkRestriction, getSelectedElements, getWidgetsCache, isElementAnchored, moveElement, moveElements, playElementInteractions, removeElements, removeModelFromParent, replaceElement, resolveContainer, selectElement, shouldCreateNewLocalStyle, styleRerenderEvents, updateElementEditorSettings, updateElementInteractions, updateElementSettings, updateElementStyle, useElementChildren, useElementEditorSettings, useParentElement, useSelectedElement, useSelectedElementSettings };
+export { type AnimationPresetPropValue, type BackboneCollection, type BackboneModel, type BooleanPropValue, type ChildDependenciesConfig, type ChildDependencyRule, type ConfigPropValue, type Control, type ControlItem, type ControlLayout, type ControlsSection, type CreateElementParams, type CreateElementStyleArgs, type DropElementParams, type DuplicateElementParams, type DuplicateElementsParams, type DuplicatedElement, type DuplicatedElementsResult, ELEMENT_STYLE_CHANGE_EVENT, type Element, type ElementChildren, type ElementControl, type ElementID, type ElementInteractions, type ElementModel, type ElementPosition, type ElementPositionKind, type ElementType, type ExcludedBreakpointsPropValue, type ExtendedWindow, type InteractionBreakpointsPropValue, type InteractionItemPropValue, type LinkInLinkRestriction, type ModelResult, type MoveElementParams, type NumberPropValue, type PseudoState, type StringPropValue, type TimingConfigPropValue, type UpdateElementSettingsArgs, type UpdateElementStyleArgs, type V1Element, type V1ElementConfig, type V1ElementData, type V1ElementEditorSettingsProps, type V1ElementModelProps, type V1ElementSettingsProps, addModelToParent, bindSettingsReconcile, createElement, createElementStyle, createElements, deleteElement, deleteElementStyle, dropElement, duplicateElement, duplicateElements, evaluateWhen, findChildRecursive, findModelInDocument, generateElementId, getAllDescendants, getAnchoredAncestorId, getAnchoredDescendantId, getContainer, getCurrentDocumentContainer, getCurrentDocumentId, getElementChildren as getElementChildrenWithFallback, getElementEditorSettings, getElementIcon, getElementInteractions, getElementLabel, getElementSetting, getElementSettings, getElementStyles, getElementTitle, getElementType, getElements, getLinkInLinkRestriction, getSelectedElements, getWidgetsCache, isElementAnchored, moveElement, moveElements, playElementInteractions, reconcileInitialChildren, removeElements, removeModelFromParent, replaceElement, resolveContainer, resolveInsertIndex, selectElement, shouldCreateNewLocalStyle, styleRerenderEvents, updateElementEditorSettings, updateElementInteractions, updateElementSettings, updateElementStyle, useElementChildren, useElementEditorSettings, useParentElement, useSelectedElement, useSelectedElementSettings };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { PropsSchema, PropValue, SizePropValue, AnyTransformable, Props, LinkPropValue } from '@elementor/editor-props';
+import { PropsSchema, Dependency, PropValue, SizePropValue, AnyTransformable, Props, LinkPropValue } from '@elementor/editor-props';
 import { ClassState, StyleDefinitionID, StyleDefinition, StyleDefinitionVariant } from '@elementor/editor-styles';
 import * as _elementor_editor_v1_adapters from '@elementor/editor-v1-adapters';
 
@@ -58,6 +58,15 @@ type ElementControl = {
 type ControlItem = ControlsSection | Control | ElementControl;
 type ControlLayout = 'full' | 'two-columns' | 'custom';
 
+type ChildDependencyRule = {
+    child_type: string;
+    when: Dependency;
+    position: ElementPosition;
+    stash: boolean;
+    default_model: V1ElementData | null;
+};
+type ChildDependenciesConfig = ChildDependencyRule[];
+
 type ExtendedWindow = Window & {
     $e?: {
         components?: {
@@ -207,6 +216,11 @@ type V1ElementModelProps = {
 type V1ElementData = Omit<V1ElementModelProps, 'elements'> & {
     elements?: V1ElementData[];
 };
+type ElementPositionKind = 'last' | 'first' | 'index' | 'after_type' | 'before_type';
+type ElementPosition = {
+    kind: ElementPositionKind;
+    value: number | string | null;
+};
 type V1ElementEditorSettingsProps = {
     title?: string;
     initial_position?: number;
@@ -234,6 +248,7 @@ type V1ElementConfig<T = object, TChild = unknown> = {
     show_in_panel?: boolean;
     allowed_child_types?: string[];
     default_children?: Array<Record<string, TChild>>;
+    children_dependencies?: ChildDependencyRule[];
     meta?: {
         [key: string]: string | number | boolean | null | NonNullable<V1ElementConfig['meta']>;
     };
@@ -245,7 +260,31 @@ type V1Model$1<T> = {
         remove?: string[];
     }) => T;
     trigger?: (event: string, ...args: unknown[]) => void;
+    on?: (event: string, callback: (...args: unknown[]) => void, context?: unknown) => void;
+    off?: (event: string, callback?: (...args: unknown[]) => void, context?: unknown) => void;
+};
+
+type ReactiveModel = {
+    get: (key: string) => unknown;
+};
+type BindSettingsReconcileArgs = {
+    model: ReactiveModel;
+    elementConfig: V1ElementConfig | undefined;
 };
+type Detach = () => void;
+declare function bindSettingsReconcile({ model, elementConfig }: BindSettingsReconcileArgs): Detach;
+
+declare function evaluateWhen(when: Dependency | undefined, settings: Record<string, PropValue>): boolean;
+
+type ReconcileInitialChildrenArgs = {
+    elementId: string;
+    elementConfig: V1ElementConfig | undefined;
+    attributes: {
+        elements?: V1ElementData[];
+        settings?: V1ElementSettingsProps;
+    };
+};
+declare function reconcileInitialChildren({ elementId, elementConfig, attributes, }: ReconcileInitialChildrenArgs): void;
 
 type ElementModel = {
     id: string;
@@ -487,6 +526,8 @@ type ReplaceElementArgs = {
 };
 declare const replaceElement: ({ currentElementId, newElement, withHistory }: ReplaceElementArgs) => V1Element;
 
+declare function resolveInsertIndex(position: ElementPosition, elements: V1ElementData[]): number;
+
 declare const updateElementEditorSettings: ({ elementId, settings, }: {
     elementId: string;
     settings: V1ElementModelProps["editor_settings"];
@@ -552,4 +593,4 @@ declare const updateElementInteractions: ({ elementId, interactions, }: {
 }) => void;
 declare const playElementInteractions: (elementId: string, interactionId: string) => void;
 
-export { type AnimationPresetPropValue, type BackboneCollection, type BackboneModel, type BooleanPropValue, type ConfigPropValue, type Control, type ControlItem, type ControlLayout, type ControlsSection, type CreateElementParams, type CreateElementStyleArgs, type DropElementParams, type DuplicateElementParams, type DuplicateElementsParams, type DuplicatedElement, type DuplicatedElementsResult, ELEMENT_STYLE_CHANGE_EVENT, type Element, type ElementChildren, type ElementControl, type ElementID, type ElementInteractions, type ElementModel, type ElementType, type ExcludedBreakpointsPropValue, type ExtendedWindow, type InteractionBreakpointsPropValue, type InteractionItemPropValue, type LinkInLinkRestriction, type ModelResult, type MoveElementParams, type NumberPropValue, type PseudoState, type StringPropValue, type TimingConfigPropValue, type UpdateElementSettingsArgs, type UpdateElementStyleArgs, type V1Element, type V1ElementConfig, type V1ElementData, type V1ElementEditorSettingsProps, type V1ElementModelProps, type V1ElementSettingsProps, addModelToParent, createElement, createElementStyle, createElements, deleteElement, deleteElementStyle, dropElement, duplicateElement, duplicateElements, findChildRecursive, findModelInDocument, generateElementId, getAllDescendants, getAnchoredAncestorId, getAnchoredDescendantId, getContainer, getCurrentDocumentContainer, getCurrentDocumentId, getElementChildren as getElementChildrenWithFallback, getElementEditorSettings, getElementIcon, getElementInteractions, getElementLabel, getElementSetting, getElementSettings, getElementStyles, getElementTitle, getElementType, getElements, getLinkInLinkRestriction, getSelectedElements, getWidgetsCache, isElementAnchored, moveElement, moveElements, playElementInteractions, removeElements, removeModelFromParent, replaceElement, resolveContainer, selectElement, shouldCreateNewLocalStyle, styleRerenderEvents, updateElementEditorSettings, updateElementInteractions, updateElementSettings, updateElementStyle, useElementChildren, useElementEditorSettings, useParentElement, useSelectedElement, useSelectedElementSettings };
+export { type AnimationPresetPropValue, type BackboneCollection, type BackboneModel, type BooleanPropValue, type ChildDependenciesConfig, type ChildDependencyRule, type ConfigPropValue, type Control, type ControlItem, type ControlLayout, type ControlsSection, type CreateElementParams, type CreateElementStyleArgs, type DropElementParams, type DuplicateElementParams, type DuplicateElementsParams, type DuplicatedElement, type DuplicatedElementsResult, ELEMENT_STYLE_CHANGE_EVENT, type Element, type ElementChildren, type ElementControl, type ElementID, type ElementInteractions, type ElementModel, type ElementPosition, type ElementPositionKind, type ElementType, type ExcludedBreakpointsPropValue, type ExtendedWindow, type InteractionBreakpointsPropValue, type InteractionItemPropValue, type LinkInLinkRestriction, type ModelResult, type MoveElementParams, type NumberPropValue, type PseudoState, type StringPropValue, type TimingConfigPropValue, type UpdateElementSettingsArgs, type UpdateElementStyleArgs, type V1Element, type V1ElementConfig, type V1ElementData, type V1ElementEditorSettingsProps, type V1ElementModelProps, type V1ElementSettingsProps, addModelToParent, bindSettingsReconcile, createElement, createElementStyle, createElements, deleteElement, deleteElementStyle, dropElement, duplicateElement, duplicateElements, evaluateWhen, findChildRecursive, findModelInDocument, generateElementId, getAllDescendants, getAnchoredAncestorId, getAnchoredDescendantId, getContainer, getCurrentDocumentContainer, getCurrentDocumentId, getElementChildren as getElementChildrenWithFallback, getElementEditorSettings, getElementIcon, getElementInteractions, getElementLabel, getElementSetting, getElementSettings, getElementStyles, getElementTitle, getElementType, getElements, getLinkInLinkRestriction, getSelectedElements, getWidgetsCache, isElementAnchored, moveElement, moveElements, playElementInteractions, reconcileInitialChildren, removeElements, removeModelFromParent, replaceElement, resolveContainer, resolveInsertIndex, selectElement, shouldCreateNewLocalStyle, styleRerenderEvents, updateElementEditorSettings, updateElementInteractions, updateElementSettings, updateElementStyle, useElementChildren, useElementEditorSettings, useParentElement, useSelectedElement, useSelectedElementSettings };

package/dist/index.js

@@ -22,6 +22,7 @@ var index_exports = {};
 __export(index_exports, {
   ELEMENT_STYLE_CHANGE_EVENT: () => ELEMENT_STYLE_CHANGE_EVENT,
   addModelToParent: () => addModelToParent,
+  bindSettingsReconcile: () => bindSettingsReconcile,
   createElement: () => createElement,
   createElementStyle: () => createElementStyle,
   createElements: () => createElements,
@@ -30,6 +31,7 @@ __export(index_exports, {
   dropElement: () => dropElement,
   duplicateElement: () => duplicateElement,
   duplicateElements: () => duplicateElements,
+  evaluateWhen: () => evaluateWhen,
   findChildRecursive: () => findChildRecursive,
   findModelInDocument: () => findModelInDocument,
   generateElementId: () => generateElementId,
@@ -57,10 +59,12 @@ __export(index_exports, {
   moveElement: () => moveElement,
   moveElements: () => moveElements,
   playElementInteractions: () => playElementInteractions,
+  reconcileInitialChildren: () => reconcileInitialChildren,
   removeElements: () => removeElements,
   removeModelFromParent: () => removeModelFromParent,
   replaceElement: () => replaceElement,
   resolveContainer: () => resolveContainer,
+  resolveInsertIndex: () => resolveInsertIndex,
   selectElement: () => selectElement,
   shouldCreateNewLocalStyle: () => shouldCreateNewLocalStyle,
   styleRerenderEvents: () => styleRerenderEvents,
@@ -76,9 +80,6 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/hooks/use-element-children.ts
-var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
-
 // src/sync/get-container.ts
 var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
 function getContainer(id) {
@@ -94,6 +95,233 @@ var selectElement = (elementId) => {
   }
 };
 
+// src/sync/resolve-element.ts
+function isConnected(container) {
+  if (!container) {
+    return false;
+  }
+  if (!container.view?.el) {
+    return true;
+  }
+  return container.view.el.isConnected;
+}
+function resolveContainer(container, id) {
+  const looked = container.lookup?.();
+  if (isConnected(looked)) {
+    return looked;
+  }
+  const byId = getContainer(id);
+  if (isConnected(byId)) {
+    return byId;
+  }
+  return null;
+}
+function getDocumentUtils() {
+  return window.$e?.components?.get?.("document")?.utils;
+}
+function findModelInDocument(id) {
+  return getDocumentUtils()?.findModelById?.(id) ?? null;
+}
+function addModelToParent(parentId, childData, options) {
+  return getDocumentUtils()?.addModelToParent?.(parentId, childData, options) ?? false;
+}
+function removeModelFromParent(parentId, childId) {
+  return getDocumentUtils()?.removeModelFromParent?.(parentId, childId) ?? false;
+}
+
+// src/sync/resolve-insert-index.ts
+function resolveInsertIndex(position, elements) {
+  const lastIndex = elements.length;
+  switch (position.kind) {
+    case "first":
+      return 0;
+    case "last":
+      return lastIndex;
+    case "index": {
+      const index = typeof position.value === "number" ? position.value : lastIndex;
+      return Math.max(0, Math.min(index, lastIndex));
+    }
+    case "after_type": {
+      const anchor = elements.findIndex((element) => element.elType === position.value);
+      return anchor >= 0 ? anchor + 1 : lastIndex;
+    }
+    case "before_type": {
+      const anchor = elements.findIndex((element) => element.elType === position.value);
+      return anchor >= 0 ? anchor : lastIndex;
+    }
+    default:
+      return lastIndex;
+  }
+}
+
+// src/children-dependencies/stash.ts
+var import_session = require("@elementor/session");
+var STASH_KEY_PREFIX = "elementor/editor-state";
+var STASH_KEY_SEGMENT = "children-deps";
+function createChildrenStash() {
+  return {
+    get(elementId, childType) {
+      return (0, import_session.getSessionStorageItem)(buildStashKey(elementId, childType));
+    },
+    save(elementId, childType, data) {
+      (0, import_session.setSessionStorageItem)(buildStashKey(elementId, childType), data);
+    },
+    clear(elementId, childType) {
+      (0, import_session.removeSessionStorageItem)(buildStashKey(elementId, childType));
+    },
+    clearAllForElement(elementId) {
+      const prefix = buildElementStashPrefix(elementId);
+      for (let index = sessionStorage.length - 1; index >= 0; index--) {
+        const key = sessionStorage.key(index);
+        if (key?.startsWith(prefix)) {
+          (0, import_session.removeSessionStorageItem)(key);
+        }
+      }
+    }
+  };
+}
+function buildStashKey(elementId, childType) {
+  return `${STASH_KEY_PREFIX}/${elementId}/${STASH_KEY_SEGMENT}/${childType}`;
+}
+function buildElementStashPrefix(elementId) {
+  return `${STASH_KEY_PREFIX}/${elementId}/${STASH_KEY_SEGMENT}/`;
+}
+
+// src/children-dependencies/utils.ts
+var import_editor_props = require("@elementor/editor-props");
+function evaluateWhen(when, settings) {
+  return (0, import_editor_props.isDependencyMet)(when, settings).isMet;
+}
+
+// src/children-dependencies/bind-settings-reconcile.ts
+function bindSettingsReconcile({ model, elementConfig }) {
+  const stash = createChildrenStash();
+  const rules = elementConfig?.children_dependencies;
+  if (!rules?.length) {
+    return () => {
+    };
+  }
+  const settingsModel = model.get("settings");
+  const elementId = model.get("id");
+  if (!settingsModel?.on || !settingsModel?.off || !elementId) {
+    return () => {
+    };
+  }
+  const lastMet = /* @__PURE__ */ new Map();
+  rules.forEach((rule) => {
+    lastMet.set(rule.child_type, evaluateWhen(rule.when, settingsModel.toJSON()));
+  });
+  const onChange = () => {
+    const currentSettings = settingsModel.toJSON();
+    rules.forEach((rule) => {
+      const previous = lastMet.get(rule.child_type) ?? false;
+      const current = evaluateWhen(rule.when, currentSettings);
+      if (previous === current) {
+        return;
+      }
+      lastMet.set(rule.child_type, current);
+      if (current) {
+        attachChildFromRule(elementId, rule, stash);
+      } else {
+        detachChildFromRule(elementId, rule, stash);
+      }
+    });
+  };
+  settingsModel.on("change", onChange);
+  return () => {
+    settingsModel.off?.("change", onChange);
+    stash.clearAllForElement(elementId);
+  };
+}
+function attachChildFromRule(parentId, rule, stash) {
+  const parent = getContainer(parentId) ?? void 0;
+  const currentChildren = getDirectChildData(parent);
+  const alreadyPresent = currentChildren.some((child) => child.elType === rule.child_type);
+  if (alreadyPresent) {
+    return;
+  }
+  const stashed = rule.stash ? stash.get(parentId, rule.child_type) : void 0;
+  const modelData = stashed ?? rule.default_model ?? { elType: rule.child_type };
+  const insertAt = resolveInsertIndex(rule.position, currentChildren);
+  const attached = addModelToParent(parentId, modelData, { at: insertAt });
+  if (!attached) {
+    return;
+  }
+  if (stashed) {
+    stash.clear(parentId, rule.child_type);
+  }
+  requestNavigatorRefresh(parentId);
+}
+function detachChildFromRule(parentId, rule, stash) {
+  const parent = getContainer(parentId) ?? void 0;
+  const child = parent?.children?.find((candidate) => candidate.model.get("elType") === rule.child_type);
+  if (!child) {
+    return;
+  }
+  const childSnapshot = child.model.toJSON();
+  const removed = removeModelFromParent(parentId, child.id);
+  if (!removed) {
+    return;
+  }
+  if (rule.stash) {
+    stash.save(parentId, rule.child_type, childSnapshot);
+  }
+  requestNavigatorRefresh(parentId);
+}
+function requestNavigatorRefresh(parentId) {
+  if (typeof window === "undefined" || typeof window.dispatchEvent !== "function") {
+    return;
+  }
+  window.dispatchEvent(
+    new CustomEvent("elementor/navigator/refresh-children", {
+      detail: { elementId: parentId }
+    })
+  );
+}
+function getDirectChildData(parent) {
+  return (parent?.children ?? []).map((child) => child.model.toJSON());
+}
+
+// src/children-dependencies/reconcile-initial-children.ts
+function reconcileInitialChildren({
+  elementId,
+  elementConfig,
+  attributes
+}) {
+  const stash = createChildrenStash();
+  const rules = elementConfig?.children_dependencies;
+  if (!rules?.length) {
+    return;
+  }
+  const elements = [...attributes.elements ?? []];
+  const settings = attributes.settings ?? {};
+  rules.forEach((rule) => {
+    const isMet = evaluateWhen(rule.when, settings);
+    const existingIndex = elements.findIndex((element) => element.elType === rule.child_type);
+    const isPresent = existingIndex >= 0;
+    if (isMet && !isPresent) {
+      const stashed = rule.stash ? stash.get(elementId, rule.child_type) : void 0;
+      const modelData = stashed ?? rule.default_model ?? { elType: rule.child_type };
+      const insertAt = resolveInsertIndex(rule.position, elements);
+      elements.splice(insertAt, 0, modelData);
+      if (stashed) {
+        stash.clear(elementId, rule.child_type);
+      }
+      return;
+    }
+    if (!isMet && isPresent) {
+      const [removed] = elements.splice(existingIndex, 1);
+      if (rule.stash && removed) {
+        stash.save(elementId, rule.child_type, removed);
+      }
+    }
+  });
+  attributes.elements = elements;
+}
+
+// src/hooks/use-element-children.ts
+var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
+
 // src/sync/model-utils.ts
 function findChildRecursive(model, predicate) {
   const childModels = model.get("elements") ?? [];
@@ -320,40 +548,6 @@ function deleteElement({ container, options = {} }) {
   });
 }
 
-// src/sync/resolve-element.ts
-function isConnected(container) {
-  if (!container) {
-    return false;
-  }
-  if (!container.view?.el) {
-    return true;
-  }
-  return container.view.el.isConnected;
-}
-function resolveContainer(container, id) {
-  const looked = container.lookup?.();
-  if (isConnected(looked)) {
-    return looked;
-  }
-  const byId = getContainer(id);
-  if (isConnected(byId)) {
-    return byId;
-  }
-  return null;
-}
-function getDocumentUtils() {
-  return window.$e?.components?.get?.("document")?.utils;
-}
-function findModelInDocument(id) {
-  return getDocumentUtils()?.findModelById?.(id) ?? null;
-}
-function addModelToParent(parentId, childData, options) {
-  return getDocumentUtils()?.addModelToParent?.(parentId, childData, options) ?? false;
-}
-function removeModelFromParent(parentId, childId) {
-  return getDocumentUtils()?.removeModelFromParent?.(parentId, childId) ?? false;
-}
-
 // src/sync/create-elements.ts
 var createElements = ({
   elements,
@@ -591,28 +785,28 @@ function getElementIcon(elementId) {
 }
 
 // src/errors.ts
-var import_utils = require("@elementor/utils");
-var ElementNotFoundError = (0, import_utils.createError)({
+var import_utils4 = require("@elementor/utils");
+var ElementNotFoundError = (0, import_utils4.createError)({
   code: "element_not_found",
   message: "Element not found."
 });
-var StyleNotFoundError = (0, import_utils.createError)({
+var StyleNotFoundError = (0, import_utils4.createError)({
   code: "style_not_found",
   message: "Style not found."
 });
-var ElementTypeNotExistsError = (0, import_utils.createError)({
+var ElementTypeNotExistsError = (0, import_utils4.createError)({
   code: "element_type_not_exists",
   message: "Element type does not exist."
 });
-var ElementLabelNotExistsError = (0, import_utils.createError)({
+var ElementLabelNotExistsError = (0, import_utils4.createError)({
   code: "element_label_not_exists",
   message: "Element label does not exist."
 });
-var ElementParentNotFoundError = (0, import_utils.createError)({
+var ElementParentNotFoundError = (0, import_utils4.createError)({
   code: "element_parent_not_found",
   message: "Element parent not found."
 });
-var ElementIndexNotFoundError = (0, import_utils.createError)({
+var ElementIndexNotFoundError = (0, import_utils4.createError)({
   code: "element_index_not_found",
   message: "Element index not found."
 });
@@ -1118,11 +1312,11 @@ var styleRerenderEvents = [
 ];
 
 // src/styles/create-element-style.ts
-var import_editor_props2 = require("@elementor/editor-props");
+var import_editor_props3 = require("@elementor/editor-props");
 var import_editor_styles = require("@elementor/editor-styles");
 
 // src/styles/mutate-element-styles.ts
-var import_editor_props = require("@elementor/editor-props");
+var import_editor_props2 = require("@elementor/editor-props");
 var import_editor_v1_adapters18 = require("@elementor/editor-v1-adapters");
 function mutateElementStyles(elementId, mutator) {
   const container = getContainer(elementId);
@@ -1174,7 +1368,7 @@ function clearRemovedClasses(container, { oldIds, newIds }) {
 function getClassesProps(container) {
   return Object.entries(container.settings.toJSON()).filter((prop) => {
     const [, value] = prop;
-    return import_editor_props.classesPropTypeUtil.isValid(value);
+    return import_editor_props2.classesPropTypeUtil.isValid(value);
   });
 }
 function notifyChanges() {
@@ -1213,7 +1407,7 @@ function createElementStyle({
 }
 function addStyleToClassesProp(elementId, classesProp, styleId) {
   const base = getElementSetting(elementId, classesProp);
-  const classesPropValue = import_editor_props2.classesPropTypeUtil.create(
+  const classesPropValue = import_editor_props3.classesPropTypeUtil.create(
     (prev) => {
       return [...prev ?? [], styleId];
     },
@@ -1240,7 +1434,7 @@ function deleteElementStyle(elementId, styleId) {
 }
 
 // src/styles/update-element-style.ts
-var import_editor_props3 = require("@elementor/editor-props");
+var import_editor_props4 = require("@elementor/editor-props");
 var import_editor_styles2 = require("@elementor/editor-styles");
 function updateElementStyle(args) {
   mutateElementStyles(args.elementId, (styles) => {
@@ -1251,7 +1445,7 @@ function updateElementStyle(args) {
     const variant = (0, import_editor_styles2.getVariantByMeta)(style, args.meta);
     const customCss = ("custom_css" in args ? args.custom_css : variant?.custom_css) ?? null;
     if (variant) {
-      variant.props = (0, import_editor_props3.mergeProps)(variant.props, args.props);
+      variant.props = (0, import_editor_props4.mergeProps)(variant.props, args.props);
       variant.custom_css = customCss?.raw ? customCss : null;
     } else {
       style.variants.push({ meta: args.meta, props: args.props, custom_css: customCss });
@@ -1293,6 +1487,7 @@ var playElementInteractions = (elementId, interactionId) => {
 0 && (module.exports = {
   ELEMENT_STYLE_CHANGE_EVENT,
   addModelToParent,
+  bindSettingsReconcile,
   createElement,
   createElementStyle,
   createElements,
@@ -1301,6 +1496,7 @@ var playElementInteractions = (elementId, interactionId) => {
   dropElement,
   duplicateElement,
   duplicateElements,
+  evaluateWhen,
   findChildRecursive,
   findModelInDocument,
   generateElementId,
@@ -1328,10 +1524,12 @@ var playElementInteractions = (elementId, interactionId) => {
   moveElement,
   moveElements,
   playElementInteractions,
+  reconcileInitialChildren,
   removeElements,
   removeModelFromParent,
   replaceElement,
   resolveContainer,
+  resolveInsertIndex,
   selectElement,
   shouldCreateNewLocalStyle,
   styleRerenderEvents,