easy-email-pro-theme 1.59.10 → 1.60.1

package/lib/index.js

@@ -58,17 +58,17 @@ import { classnames, useEditorActions, useDragNodePath, useStandaloneElementEdit
 import { useSlate, ReactEditor, useSlateStatic, useSelected } from "slate-react";
 import * as React$2 from "react";
 import React__default, { useRef, useState, useEffect, useCallback, useMemo, createContext, useContext, useLayoutEffect, memo, useReducer, cloneElement, forwardRef, createElement, Suspense, Component } from "react";
-import { NodeUtils, BlockManager, ElementType, EditorCore, t, ElementCategory, classnames as classnames$1, StandardType, PluginManager, EditorAuth, mjmlToJsonCore, ConditionOperator, ConditionOperatorSymbol, EmailRenderProvider, components, HtmlNodeAdapter, assertAiAgentFeatureEnabled, imageReplacementTarget, imageDecisionChoices, canAutoReplaceImageTarget, imageTargetAttributeKey, normalizeToolCallsPayload, freezeSelectedTargets, selectedTargetFromContext, resolveAiChatResult, choiceImageAttributeKey, I18nManager } from "easy-email-pro-core";
+import { NodeUtils, BlockManager, ElementType, EditorCore, t, StandardType, ElementCategory, classnames as classnames$1, PluginManager, EditorAuth, mjmlToJsonCore, ConditionOperator, ConditionOperatorSymbol, EmailRenderProvider, components, HtmlNodeAdapter, assertAiAgentFeatureEnabled, imageReplacementTarget, imageDecisionChoices, canAutoReplaceImageTarget, imageTargetAttributeKey, normalizeToolCallsPayload, freezeSelectedTargets, selectedTargetFromContext, resolveAiChatResult, choiceImageAttributeKey, I18nManager } from "easy-email-pro-core";
 import { parseEasyEmailAiStream, resolveAiChatResult as resolveAiChatResult2 } from "easy-email-pro-core";
-import { cloneDeep, get, isEqual, set, omit as omit$2, merge as merge$1, debounce as debounce$2, isUndefined as isUndefined$1, uniqueId, isFunction as isFunction$5, isString as isString$2, isNumber as isNumber$1, upperFirst, sum, flatMap } from "lodash";
+import { cloneDeep, omit as omit$2, get, set, isEqual, merge as merge$1, debounce as debounce$2, isUndefined as isUndefined$1, uniqueId, isFunction as isFunction$5, isString as isString$2, isNumber as isNumber$1, upperFirst, sum, flatMap } from "lodash";
 import { Editor, Range, Node, Transforms, Path, Text as Text$4, createEditor } from "slate";
 import { nanoid } from "nanoid";
 import { Form, Input, Modal, Collapse, Space, Empty, Card, Grid, Button as Button$2, Drawer, Switch, Typography as Typography$1, Tabs, Radio, Tooltip, Divider as Divider$2, Alert, Popconfirm, Message, PageHeader as PageHeader$1, Spin, Layout as Layout$2, ConfigProvider, Popover, ColorPicker as ColorPicker$2, Select as Select$1, Slider, InputNumber, Tag, Link as Link$3, List as List$1, Skeleton, Trigger } from "@arco-design/web-react";
+import { HistoryEditor } from "slate-history";
 import { IconPlus, IconCopy, IconDelete, IconEdit, IconLeft, IconDownload, IconUndo, IconRedo, IconMinus, IconEye, IconSubscribeAdd, IconClose, IconCheckCircleFill, IconDragArrow, IconPalette, IconLock, IconUnlock, IconImage, IconQuestionCircle, IconLink, IconCloud, IconDragDotVertical, IconSend, IconDown, IconCheck, IconSearch } from "@arco-design/web-react/icon";
 import { unstable_batchedUpdates, createPortal } from "react-dom";
 import mjml from "mjml-browser";
 import { getImageUrlsForAmp, mjml2amp } from "mjml2amp";
-import { HistoryEditor } from "slate-history";
 import { renderToStaticMarkup } from "react-dom/server";
 const styleText$h = `@font-face {
   font-family: "iconfont"; /* Project id 4003152 */
@@ -1366,6 +1366,49 @@ const DraggingProvider = ({
   }, [dragHandle, isDragging]);
   return /* @__PURE__ */ React__default.createElement(DraggingProviderContext.Provider, { value }, children);
 };
+function setEditorFieldValue(editor, path2, name, value) {
+  const node = Node.get(editor, path2);
+  if (NodeUtils.isTextNode(node)) {
+    Transforms.insertText(editor, String(value != null ? value : ""), { at: path2 });
+    return;
+  }
+  if (name === "children") {
+    if (!Array.isArray(value)) {
+      throw new Error("children must be an array");
+    }
+    const children = node.children || [];
+    Editor.withoutNormalizing(editor, () => {
+      for (let index2 = children.length - 1; index2 >= 0; index2 -= 1) {
+        Transforms.removeNodes(editor, { at: [...path2, index2] });
+      }
+      if (value.length) {
+        Transforms.insertNodes(editor, cloneDeep(value), {
+          at: [...path2, 0]
+        });
+      }
+    });
+    return;
+  }
+  if (name === "") {
+    editor.replaceNode({ path: path2, node: value });
+    return;
+  }
+  const cloneNode = cloneDeep(omit$2(node, "children"));
+  if (value === void 0) {
+    const dotIndex = name.lastIndexOf(".");
+    if (dotIndex > -1) {
+      const parent2 = get(cloneNode, name.substring(0, dotIndex));
+      if (parent2 && typeof parent2 === "object") {
+        delete parent2[name.substring(dotIndex + 1)];
+      }
+    } else {
+      delete cloneNode[name];
+    }
+  } else {
+    set(cloneNode, name, value);
+  }
+  Transforms.setNodes(editor, cloneNode, { at: path2 });
+}
 const loop$1 = () => {
 };
 const getNodePathName = (path2, name) => {
@@ -1432,58 +1475,30 @@ const EditorContextProvider = (props) => {
       getFieldValue(path2, name)
     );
   });
-  const setFieldValue = useEventCallback(
+  const setFieldValueTransactional = useEventCallback(
     (path2, name, val) => {
       if (!path2) {
         form.setFieldValue(name, val);
         return;
       }
+      setEditorFieldValue(editor, path2, name, val);
+      form.setFieldValue(getNodePathName(path2, name), val);
+    }
+  );
+  const setFieldValue = useEventCallback(
+    (path2, name, val) => {
       try {
-        const node = Node.get(editor, path2);
-        if (NodeUtils.isTextNode(node)) {
-          Transforms.insertText(editor, val, {
-            at: path2
-          });
-        } else {
-          if (name === "children") {
-            const cloneNode = cloneDeep(node);
-            set(cloneNode, name, val);
-            editor.replaceNode({
-              path: path2,
-              node: cloneNode
-            });
-          } else if (name === "") {
-            editor.replaceNode({
-              path: path2,
-              node: val
-            });
-          } else {
-            const cloneNode = cloneDeep(omit$2(node, "children"));
-            if (val === void 0) {
-              const dotIndex = name.lastIndexOf(".");
-              if (dotIndex > -1) {
-                const parentName = name.substring(0, dotIndex);
-                const parent2 = get(cloneNode, parentName);
-                if (parent2) {
-                  parent2[name.substring(dotIndex + 1)] = void 0;
-                }
-              } else {
-                cloneNode[name] = void 0;
-              }
-            } else {
-              set(cloneNode, name, val);
-            }
-            Transforms.setNodes(editor, cloneNode, {
-              at: path2
-            });
-          }
-        }
-        form.setFieldValue(getNodePathName(path2, name), val);
+        setFieldValueTransactional(path2, name, val);
       } catch (error2) {
         console.log(error2);
       }
     }
   );
+  const syncValues = useEventCallback(
+    (newValues) => {
+      form.setFieldsValue(newValues);
+    }
+  );
   const reset = useEventCallback((newValues) => {
     if (isEqual(newValues, values))
       return;
@@ -1551,6 +1566,8 @@ const EditorContextProvider = (props) => {
       inited,
       pageDataVariables,
       setFieldValue,
+      setFieldValueTransactional,
+      syncValues,
       getFieldDirty,
       valid,
       reset,
@@ -1564,6 +1581,8 @@ const EditorContextProvider = (props) => {
     inited,
     pageDataVariables,
     setFieldValue,
+    setFieldValueTransactional,
+    syncValues,
     getFieldDirty,
     valid,
     reset,
@@ -2333,6 +2352,335 @@ const useBlocksDrawer = () => {
     parentCategory: context.blocksDrawerParentCategory
   };
 };
+const MAX_AI_BATCH_TARGETS = 200;
+const STANDARD_TYPES = new Set(Object.values(StandardType));
+const CHANGE_FIELDS = [
+  "text",
+  "attributes",
+  "mobileAttributes",
+  "data",
+  "visibility"
+];
+function isObject$c(value) {
+  return Boolean(value && typeof value === "object" && !Array.isArray(value));
+}
+function isSafeFieldKey$1(key2) {
+  return typeof key2 === "string" && key2.length > 0 && key2.length <= 80 && !key2.includes("__proto__") && !key2.includes("prototype") && !key2.includes("constructor") && /^[a-zA-Z0-9_.-]+$/.test(key2);
+}
+function validateRecordKeys(value) {
+  if (!isObject$c(value))
+    throw new Error("batch changes must be objects");
+  Object.keys(value).forEach((key2) => {
+    if (!isSafeFieldKey$1(key2))
+      throw new Error(`unsafe field key: ${key2}`);
+  });
+}
+function validateFilter(filter2) {
+  if (filter2.field !== "text" && filter2.field !== "attribute" && filter2.field !== "mobileAttribute" && filter2.field !== "data") {
+    throw new Error(`unsupported batch filter field: ${String(filter2.field)}`);
+  }
+  if (filter2.operator !== "equals" && filter2.operator !== "contains" && filter2.operator !== "exists") {
+    throw new Error(
+      `unsupported batch filter operator: ${String(filter2.operator)}`
+    );
+  }
+  if (filter2.field !== "text" && !isSafeFieldKey$1(filter2.key)) {
+    throw new Error("batch filter key is required and must be safe");
+  }
+  if (filter2.operator === "contains" && typeof filter2.value !== "string") {
+    throw new Error("batch contains filter requires a string value");
+  }
+}
+function validateBatchUpdateCall(call) {
+  var _a;
+  if (call.name !== "batch_update") {
+    throw new Error("batch_update tool call is required");
+  }
+  if (call.selector.scope !== "template" && call.selector.scope !== "descendants") {
+    throw new Error("invalid batch selector scope");
+  }
+  if (!Array.isArray(call.selector.types) || call.selector.types.length === 0) {
+    throw new Error("at least one standard block type is required");
+  }
+  call.selector.types.forEach((type) => {
+    if (!STANDARD_TYPES.has(type)) {
+      throw new Error(`unsupported standard block type: ${type}`);
+    }
+  });
+  if (call.selector.scope === "descendants" && !call.selector.root) {
+    throw new Error("descendants scope requires a root target");
+  }
+  (call.selector.where || []).forEach(validateFilter);
+  const changes2 = call.changes || {};
+  if (!CHANGE_FIELDS.some((field) => changes2[field] !== void 0)) {
+    throw new Error("at least one batch change is required");
+  }
+  if (changes2.text !== void 0 && typeof changes2.text !== "string") {
+    throw new Error("batch text change must be a string");
+  }
+  if (changes2.attributes !== void 0)
+    validateRecordKeys(changes2.attributes);
+  if (changes2.mobileAttributes !== void 0)
+    validateRecordKeys(changes2.mobileAttributes);
+  if (changes2.data !== void 0)
+    validateRecordKeys(changes2.data);
+  if (changes2.visibility !== void 0 && (!isObject$c(changes2.visibility) || typeof changes2.visibility.desktop !== "boolean" || typeof changes2.visibility.mobile !== "boolean")) {
+    throw new Error("batch visibility change is invalid");
+  }
+  if (((_a = changes2.visibility) == null ? void 0 : _a.desktop) === false && changes2.visibility.mobile === false) {
+    throw new Error("at least one device must remain visible");
+  }
+}
+function ownValue(record, key2) {
+  if (!isObject$c(record) || !Object.prototype.hasOwnProperty.call(record, key2)) {
+    return { exists: false, value: void 0 };
+  }
+  return { exists: true, value: record[key2] };
+}
+function filterValue(element, filter2) {
+  if (filter2.field === "text") {
+    return { exists: true, value: Node.string(element) };
+  }
+  const key2 = filter2.key;
+  if (filter2.field === "attribute")
+    return ownValue(element.attributes, key2);
+  if (filter2.field === "mobileAttribute")
+    return ownValue(element.mobileAttributes, key2);
+  return ownValue(element.data, key2);
+}
+function matchesFilter(element, filter2) {
+  const current = filterValue(element, filter2);
+  if (filter2.operator === "exists")
+    return current.exists;
+  if (filter2.operator === "contains") {
+    return typeof current.value === "string" && current.value.includes(filter2.value);
+  }
+  return current.exists && Object.is(current.value, filter2.value);
+}
+function resolveBatchUpdateTargets(editor, call, resolveRoot) {
+  validateBatchUpdateCall(call);
+  let at = [];
+  if (call.selector.scope === "descendants") {
+    const root2 = (resolveRoot == null ? void 0 : resolveRoot(call.selector.root)) || null;
+    if (!root2)
+      throw new Error("batch root target not found");
+    at = root2;
+  }
+  const acceptedTypes = new Set(call.selector.types);
+  const filters = call.selector.where || [];
+  const targets = Array.from(
+    Editor.nodes(editor, {
+      at,
+      match: (node) => {
+        if (!NodeUtils.isElement(node))
+          return false;
+        const element = node;
+        return acceptedTypes.has(element.type) && filters.every((filter2) => matchesFilter(element, filter2));
+      }
+    })
+  ).map(([node, path2]) => ({
+    element: node,
+    path: [...path2]
+  }));
+  return { call, targets };
+}
+function assertBatchTargetLimit(batches, limit = MAX_AI_BATCH_TARGETS) {
+  const count = batches.reduce(
+    (total, batch) => total + batch.targets.length,
+    0
+  );
+  if (count > limit) {
+    throw new Error(`batch target limit exceeded: ${count}/${limit}`);
+  }
+}
+function getBatchRecordUpdate(current, key2, nextValue) {
+  const value = nextValue === null ? void 0 : nextValue;
+  const hasCurrent = Object.prototype.hasOwnProperty.call(current, key2);
+  return {
+    changed: !(value === void 0 && !hasCurrent) && !Object.is(current[key2], value),
+    value
+  };
+}
+function applyResolvedBatchUpdate(resolved, applyField) {
+  const result = { applied: 0, skipped: 0, errors: [] };
+  if (!resolved.targets.length)
+    return __spreadProps(__spreadValues({}, result), { skipped: 1 });
+  for (const target of resolved.targets) {
+    let changed = false;
+    for (const field of CHANGE_FIELDS) {
+      if (resolved.call.changes[field] === void 0)
+        continue;
+      const fieldResult = applyField(
+        target,
+        field,
+        resolved.call.changes[field]
+      );
+      if (typeof fieldResult === "boolean") {
+        changed = fieldResult || changed;
+      } else {
+        changed = fieldResult.changed || changed;
+        if (fieldResult.error) {
+          result.errors.push(`${target.element.type}: ${fieldResult.error}`);
+        }
+      }
+    }
+    if (changed)
+      result.applied += 1;
+    else
+      result.skipped += 1;
+  }
+  return result;
+}
+const changes = /* @__PURE__ */ new WeakMap();
+const operationChange = Symbol("aiExternalHistoryChange");
+const setters = /* @__PURE__ */ new WeakMap();
+const installed = /* @__PURE__ */ new WeakSet();
+function mergeChanges(earlier, later) {
+  if (!earlier)
+    return later;
+  if (!later)
+    return earlier;
+  return { before: earlier.before, after: later.after };
+}
+function getAiExternalHistory(batch) {
+  if (!batch)
+    return void 0;
+  return changes.get(batch) || batch.operations.map(
+    (operation) => operation[operationChange]
+  ).find(Boolean);
+}
+function installAiExternalHistory(editor, setValue) {
+  setters.set(editor, setValue);
+  if (installed.has(editor))
+    return;
+  installed.add(editor);
+  const undo = editor.undo.bind(editor);
+  const redo = editor.redo.bind(editor);
+  const writeHistory = editor.writeHistory.bind(editor);
+  let activeChange;
+  editor.writeHistory = (stack, batch) => {
+    const beforeLength = editor.history[stack].length;
+    const previousBatch = editor.history[stack].at(-1);
+    const previousChange = getAiExternalHistory(previousBatch);
+    const incomingChange = mergeChanges(
+      getAiExternalHistory(batch),
+      activeChange
+    );
+    writeHistory(stack, batch);
+    const actualBatch = editor.history[stack].at(-1);
+    if (!actualBatch)
+      return;
+    const replacedPrevious = editor.history[stack].length === beforeLength && actualBatch !== previousBatch;
+    const change = replacedPrevious ? mergeChanges(previousChange, incomingChange) : incomingChange;
+    if (change)
+      attachAiExternalHistory(actualBatch, change);
+  };
+  editor.undo = () => {
+    var _a;
+    const batch = editor.history.undos.at(-1);
+    const change = getAiExternalHistory(batch);
+    activeChange = change;
+    try {
+      undo();
+    } finally {
+      activeChange = void 0;
+    }
+    if (change)
+      (_a = setters.get(editor)) == null ? void 0 : _a(change.before);
+  };
+  editor.redo = () => {
+    var _a;
+    const batch = editor.history.redos.at(-1);
+    const change = getAiExternalHistory(batch);
+    activeChange = change;
+    try {
+      redo();
+    } finally {
+      activeChange = void 0;
+    }
+    if (change)
+      (_a = setters.get(editor)) == null ? void 0 : _a(change.after);
+  };
+}
+function attachAiExternalHistory(batch, change) {
+  changes.set(batch, change);
+  batch.operations.forEach((operation) => {
+    Object.assign(operation, { [operationChange]: change });
+  });
+}
+function runAiEditorTransaction(editor, apply2, options2 = {}) {
+  var _a;
+  const undosBefore = [...editor.history.undos];
+  const redosBefore = [...editor.history.redos];
+  const undoStart = editor.history.undos.length;
+  try {
+    let result;
+    HistoryEditor.withoutMerging(editor, () => {
+      Editor.withoutNormalizing(editor, () => {
+        result = apply2();
+      });
+    });
+    const newBatches = editor.history.undos.splice(undoStart);
+    const externalChange = ((_a = options2.getExternalChange) == null ? void 0 : _a.call(options2)) || null;
+    const hasExternalChange = Boolean(
+      externalChange && externalChange.before !== externalChange.after
+    );
+    const finalBatch = newBatches.length ? {
+      operations: newBatches.flatMap((batch) => batch.operations),
+      selectionBefore: newBatches[0].selectionBefore
+    } : hasExternalChange ? { operations: [], selectionBefore: editor.selection } : null;
+    if (finalBatch) {
+      editor.history.undos.push(finalBatch);
+      if (hasExternalChange && externalChange) {
+        attachAiExternalHistory(finalBatch, externalChange);
+      }
+      if (!newBatches.length) {
+        editor.history.redos = [];
+      }
+    }
+    return result;
+  } catch (error2) {
+    while (editor.history.undos.length > undoStart) {
+      HistoryEditor.undo(editor);
+    }
+    editor.history.undos = undosBefore;
+    editor.history.redos = redosBefore;
+    throw error2;
+  }
+}
+function validateAiSubject(value) {
+  if (typeof value !== "string") {
+    throw new Error(t("subject must be a string"));
+  }
+  if (!value.trim()) {
+    throw new Error(t("subject cannot be empty"));
+  }
+  return value;
+}
+function isAiSubjectChanged(current, next) {
+  return current !== next;
+}
+function subjectAfterApplyingTemplate(current, template) {
+  if (!template || typeof template !== "object" || !("subject" in template)) {
+    return current;
+  }
+  return validateAiSubject(template.subject);
+}
+function emailAfterApplyingAiTemplate(current, template) {
+  if (!template || typeof template !== "object")
+    return current;
+  const candidate = template;
+  if (!candidate.content || typeof candidate.content !== "object") {
+    return current;
+  }
+  return __spreadProps(__spreadValues({}, current), {
+    subject: subjectAfterApplyingTemplate(
+      typeof current.subject === "string" ? current.subject : "",
+      candidate
+    ),
+    content: candidate.content
+  });
+}
 const MAX_TOOL_CALLS = 30;
 const MAX_REPLACE_CHILDREN_NODES = 160;
 function isObject$b(value) {
@@ -2423,6 +2771,10 @@ function targetFromElement(element, fallback) {
   return fallback;
 }
 function describeAppliedChange(call) {
+  if (call.name === "update_subject")
+    return t("Subject updated");
+  if (call.name === "batch_update")
+    return t("Batch updated");
   if (call.name === "update_text")
     return t("Text updated");
   if (call.name === "update_attribute")
@@ -2511,13 +2863,21 @@ function normalizeElementBlock(block) {
     children: Array.isArray(normalized.children) ? normalized.children : []
   }));
 }
+function createBlockForInsert(block) {
+  const normalized = normalizeBlock(block);
+  const definition = BlockManager.getBlockByType(normalized.type);
+  return assignIdsToElementTree(definition.create(normalized));
+}
 function useApplyAiToolCalls() {
   const editor = useSlate();
   const lock = useLockState();
   const selectedNodePath = useSelectedNodePath();
   const setSelectedNodePath = useSetSelectedNodePath();
-  const { setFieldValue, reset } = useEditorContext();
-  const { addBlock, copyBlock, deleteBlock, moveDown, moveUp } = useElementInteract();
+  const setHoverNodePath = useSetHoverNodePath();
+  const { setFieldValueTransactional, syncValues, reset, values } = useEditorContext();
+  installAiExternalHistory(editor, (subject) => {
+    setFieldValueTransactional(null, "subject", subject);
+  });
   const resolveTargetPath = useEventCallback((target) => {
     if ("selected" in target)
       return selectedNodePath;
@@ -2561,6 +2921,57 @@ function useApplyAiToolCalls() {
       return [node, path2];
     }
   );
+  const applyBatchField = useEventCallback(
+    (target, field, value) => {
+      const node = Node.get(editor, target.path);
+      if (!NodeUtils.isElement(node))
+        return false;
+      const element = node;
+      if (field === "text") {
+        if (typeof value !== "string" || !canReplaceWithPlainText(element)) {
+          return {
+            changed: false,
+            error: t("target has no editable plain text")
+          };
+        }
+        if (Node.string(element) === value)
+          return false;
+        setFieldValueTransactional(
+          target.path,
+          "children",
+          textToChildren(value)
+        );
+        return true;
+      }
+      if (field === "visibility") {
+        if (!isObject$b(value))
+          return false;
+        const visible = value.desktop === true && value.mobile === false ? "desktop" : value.desktop === false && value.mobile === true ? "mobile" : void 0;
+        if (element.visible === visible)
+          return false;
+        setFieldValueTransactional(target.path, "visible", visible);
+        return true;
+      }
+      if (!isObject$b(value))
+        return false;
+      const fieldRoot = field;
+      const source = element[fieldRoot];
+      const current = isObject$b(source) ? source : {};
+      let changed = false;
+      Object.entries(value).forEach(([key2, nextValue]) => {
+        const update = getBatchRecordUpdate(current, key2, nextValue);
+        if (!update.changed)
+          return;
+        setFieldValueTransactional(
+          target.path,
+          `${fieldRoot}.${key2}`,
+          update.value
+        );
+        changed = true;
+      });
+      return changed;
+    }
+  );
   return useEventCallback((toolCalls) => {
     const result = {
       applied: 0,
@@ -2575,63 +2986,272 @@ function useApplyAiToolCalls() {
         errors: [t("editor is locked")]
       };
     }
+    if (toolCalls.some((call) => call.name === "apply_template") && toolCalls.length > 1) {
+      return {
+        applied: 0,
+        skipped: toolCalls.length,
+        errors: [t("apply_template cannot be mixed with other tools")],
+        changes: []
+      };
+    }
     const calls = toolCalls.slice(0, MAX_TOOL_CALLS);
     if (toolCalls.length > MAX_TOOL_CALLS) {
       result.errors.push(`${t("tool calls truncated to")} ${MAX_TOOL_CALLS}`);
     }
-    Editor.withoutNormalizing(editor, () => {
+    const resolvedBatches = /* @__PURE__ */ new Map();
+    const resolvedTargets = /* @__PURE__ */ new Map();
+    const preflightErrors = [];
+    try {
       calls.forEach((call, index2) => {
-        try {
-          if (call.name === "apply_template") {
-            reset(call.template);
-            result.applied += 1;
-            return;
+        if (call.name === "update_subject") {
+          validateAiSubject(call.subject);
+          return;
+        }
+        if (call.name === "apply_template") {
+          if (!isObject$b(call.template)) {
+            throw new Error(t("template must be an object"));
           }
-          const targetEntry = getTargetElement(call.target);
-          if (!targetEntry) {
-            result.skipped += 1;
-            result.errors.push(
-              `${call.name}: ${t("target not found")} (${targetLabel(call.target)})`
+          if (calls.length > 1) {
+            throw new Error(
+              t("apply_template cannot be mixed with other tools")
+            );
+          }
+          return;
+        }
+        if (call.name === "batch_update") {
+          resolvedBatches.set(
+            index2,
+            resolveBatchUpdateTargets(
+              editor,
+              call,
+              (target) => resolveTargetPath(target) || null
+            )
+          );
+          return;
+        }
+        const targetEntry = getTargetElement(call.target);
+        if (!targetEntry) {
+          throw new Error(
+            `${t("target not found")} (${targetLabel(call.target)})`
+          );
+        }
+        const [element, path2] = targetEntry;
+        resolvedTargets.set(index2, targetEntry);
+        if (call.name === "update_text" && !canReplaceWithPlainText(element)) {
+          throw new Error(
+            hasAnyTextNode(element) ? t(
+              "target contains mixed content; use a more specific text node"
+            ) : t("target has no editable text")
+          );
+        }
+        if ((call.name === "update_attribute" || call.name === "update_mobile_attribute" || call.name === "update_data") && !isSafeFieldKey(call.key)) {
+          throw new Error(t("invalid field key"));
+        }
+        if (call.name === "update_attributes") {
+          if (!isObject$b(call.attributes)) {
+            throw new Error(t("attributes must be an object"));
+          }
+          Object.keys(call.attributes).forEach((key2) => {
+            if (!isSafeFieldKey(key2)) {
+              throw new Error(`${t("invalid attribute key")}: ${key2}`);
+            }
+          });
+        }
+        if (call.name === "replace_children") {
+          const total = countNodes(call.children);
+          if (total > MAX_REPLACE_CHILDREN_NODES) {
+            throw new Error(
+              `${t("replace_children is too large")} (${total} ${t("nodes")})`
             );
-            return;
           }
-          const [element, path2] = targetEntry;
-          const recordChange = () => {
-            var _a, _b;
+          normalizeChildren(call.children);
+        }
+        if (call.name === "set_visibility" && call.desktop === false && call.mobile === false) {
+          throw new Error(t("at least one device must remain visible"));
+        }
+        if (call.name === "update_link" && typeof call.href !== "string") {
+          throw new Error(t("href is required"));
+        }
+        if ((call.name === "replace_block" || call.name === "move_up" || call.name === "move_down" || call.name === "duplicate" || call.name === "delete_node" || call.name === "add_block_after" || call.name === "add_block_before") && isProtectedForStructureEdit(element)) {
+          throw new Error(t("protected node cannot be structurally edited"));
+        }
+        if (call.name === "replace_block")
+          normalizeElementBlock(call.block);
+        if (call.name === "add_block_after" || call.name === "add_block_before") {
+          createBlockForInsert(call.block);
+        }
+        Node.get(editor, path2);
+      });
+      assertBatchTargetLimit(Array.from(resolvedBatches.values()));
+    } catch (error2) {
+      preflightErrors.push(
+        error2 instanceof Error ? error2.message : String(error2)
+      );
+    }
+    if (preflightErrors.length) {
+      return {
+        applied: 0,
+        skipped: calls.length,
+        errors: preflightErrors,
+        changes: []
+      };
+    }
+    const targetRefs = /* @__PURE__ */ new Map();
+    const batchRefs = /* @__PURE__ */ new Map();
+    resolvedTargets.forEach(([, path2], index2) => {
+      targetRefs.set(index2, Editor.pathRef(editor, path2));
+    });
+    resolvedBatches.forEach((resolved, index2) => {
+      batchRefs.set(
+        index2,
+        resolved.targets.map((target) => Editor.pathRef(editor, target.path))
+      );
+    });
+    const originalValues = structuredClone(values);
+    const subjectBefore = values.subject;
+    let subjectAfter = subjectBefore;
+    try {
+      runAiEditorTransaction(
+        editor,
+        () => {
+          calls.forEach((call, index2) => {
+            var _a, _b, _c, _d;
+            if (call.name === "update_subject") {
+              const nextSubject = validateAiSubject(call.subject);
+              if (!isAiSubjectChanged(subjectAfter, nextSubject)) {
+                result.skipped += 1;
+                return;
+              }
+              setFieldValueTransactional(null, "subject", nextSubject);
+              subjectAfter = nextSubject;
+              result.applied += 1;
+              if (!((_a = result.changes) == null ? void 0 : _a.some((change) => change.id === "subject"))) {
+                (_b = result.changes) == null ? void 0 : _b.push({
+                  id: "subject",
+                  label: t("Subject"),
+                  description: describeAppliedChange(call),
+                  target: { type: "page" }
+                });
+              }
+              return;
+            }
+            if (call.name === "apply_template") {
+              const nextTemplate = emailAfterApplyingAiTemplate(
+                values,
+                call.template
+              );
+              subjectAfter = subjectAfterApplyingTemplate(
+                subjectAfter,
+                nextTemplate
+              );
+              reset(nextTemplate);
+              result.applied += 1;
+              return;
+            }
+            if (call.name === "batch_update") {
+              const resolved = resolvedBatches.get(index2);
+              if (!resolved)
+                throw new Error(t("batch targets not resolved"));
+              const refs = batchRefs.get(index2) || [];
+              const targets = resolved.targets.map((target, targetIndex) => {
+                var _a2;
+                const path22 = (_a2 = refs[targetIndex]) == null ? void 0 : _a2.current;
+                if (!path22)
+                  throw new Error(t("batch target no longer exists"));
+                return __spreadProps(__spreadValues({}, target), { path: path22 });
+              });
+              const batchResult = applyResolvedBatchUpdate(
+                __spreadProps(__spreadValues({}, resolved), { targets }),
+                applyBatchField
+              );
+              result.applied += batchResult.applied;
+              result.skipped += batchResult.skipped;
+              result.errors.push(...batchResult.errors);
+              if (batchResult.applied > 0) {
+                const fallbackTarget = resolved.call.selector.root || {
+                  type: resolved.call.selector.types[0]
+                };
+                (_c = result.changes) == null ? void 0 : _c.push({
+                  id: `batch:${index2}`,
+                  label: resolved.call.selector.types.join(", "),
+                  description: describeAppliedChange(call),
+                  target: fallbackTarget
+                });
+              }
+              return;
+            }
+            const path2 = (_d = targetRefs.get(index2)) == null ? void 0 : _d.current;
+            if (!path2)
+              throw new Error(t("target no longer exists"));
+            const node = Node.get(editor, path2);
+            if (!NodeUtils.isElement(node)) {
+              throw new Error(t("target is no longer an element"));
+            }
+            const element = node;
             const [blockElement, blockPath] = closestBlockEntry(
               editor,
               path2
             ) || [element, path2];
-            const key2 = changeKey(blockPath, describeAppliedChange(call));
-            if ((_a = result.changes) == null ? void 0 : _a.some((change) => change.id === key2))
-              return;
-            (_b = result.changes) == null ? void 0 : _b.push({
-              id: key2,
+            const appliedChange = {
+              id: changeKey(blockPath, describeAppliedChange(call)),
               label: elementLabel(blockElement),
               description: describeAppliedChange(call),
               target: targetFromElement(blockElement, call.target),
               path: [...blockPath]
-            });
-          };
-          if (call.name === "update_text") {
-            if (!canReplaceWithPlainText(element)) {
-              throw new Error(
-                hasAnyTextNode(element) ? t(
-                  "target contains mixed content; use a more specific text node"
-                ) : t("target has no editable text")
+            };
+            const recordChange = () => {
+              var _a2, _b2;
+              if ((_a2 = result.changes) == null ? void 0 : _a2.some((change) => change.id === appliedChange.id)) {
+                return;
+              }
+              (_b2 = result.changes) == null ? void 0 : _b2.push(appliedChange);
+            };
+            if (call.name === "update_text") {
+              if (!canReplaceWithPlainText(element)) {
+                throw new Error(
+                  hasAnyTextNode(element) ? t(
+                    "target contains mixed content; use a more specific text node"
+                  ) : t("target has no editable text")
+                );
+              }
+              setFieldValueTransactional(
+                path2,
+                "children",
+                textToChildren(call.text)
               );
+              result.applied += 1;
+              recordChange();
+              return;
             }
-            setFieldValue(path2, "children", textToChildren(call.text));
-            result.applied += 1;
-            recordChange();
-            return;
-          }
-          if (call.name === "update_attribute") {
-            if (!isSafeFieldKey(call.key))
-              throw new Error(t("invalid attribute key"));
-            if (call.key.startsWith("mobileAttributes.")) {
+            if (call.name === "update_attribute") {
+              if (!isSafeFieldKey(call.key))
+                throw new Error(t("invalid attribute key"));
+              if (call.key.startsWith("mobileAttributes.")) {
+                const mobileKey = normalizeMobileAttributeKey(call.key);
+                setFieldValueTransactional(
+                  path2,
+                  `mobileAttributes.${mobileKey}`,
+                  call.value === null ? void 0 : call.value
+                );
+                result.applied += 1;
+                recordChange();
+                return;
+              }
+              const attributeKey = normalizeAttributeKey(call.key);
+              setFieldValueTransactional(
+                path2,
+                `attributes.${attributeKey}`,
+                call.value === null ? void 0 : call.value
+              );
+              result.applied += 1;
+              recordChange();
+              return;
+            }
+            if (call.name === "update_mobile_attribute") {
+              if (!isSafeFieldKey(call.key))
+                throw new Error(t("invalid mobile attribute key"));
               const mobileKey = normalizeMobileAttributeKey(call.key);
-              setFieldValue(
+              setFieldValueTransactional(
                 path2,
                 `mobileAttributes.${mobileKey}`,
                 call.value === null ? void 0 : call.value
@@ -2640,164 +3260,182 @@ function useApplyAiToolCalls() {
               recordChange();
               return;
             }
-            const attributeKey = normalizeAttributeKey(call.key);
-            setFieldValue(
-              path2,
-              `attributes.${attributeKey}`,
-              call.value === null ? void 0 : call.value
-            );
-            result.applied += 1;
-            recordChange();
-            return;
-          }
-          if (call.name === "update_mobile_attribute") {
-            if (!isSafeFieldKey(call.key))
-              throw new Error(t("invalid mobile attribute key"));
-            const mobileKey = normalizeMobileAttributeKey(call.key);
-            setFieldValue(
-              path2,
-              `mobileAttributes.${mobileKey}`,
-              call.value === null ? void 0 : call.value
-            );
-            result.applied += 1;
-            recordChange();
-            return;
-          }
-          if (call.name === "update_attributes") {
-            if (!isObject$b(call.attributes)) {
-              throw new Error(t("attributes must be an object"));
+            if (call.name === "update_attributes") {
+              if (!isObject$b(call.attributes)) {
+                throw new Error(t("attributes must be an object"));
+              }
+              Object.entries(call.attributes).forEach(([key2, value]) => {
+                if (!isSafeFieldKey(key2)) {
+                  throw new Error(`${t("invalid attribute key")}: ${key2}`);
+                }
+                const fieldRoot = call.scope === "mobile" || key2.startsWith("mobileAttributes.") ? "mobileAttributes" : "attributes";
+                const normalizedKey = fieldRoot === "mobileAttributes" ? normalizeMobileAttributeKey(key2) : normalizeAttributeKey(key2);
+                setFieldValueTransactional(
+                  path2,
+                  `${fieldRoot}.${normalizedKey}`,
+                  value === null ? void 0 : value
+                );
+              });
+              result.applied += 1;
+              recordChange();
+              return;
             }
-            Object.entries(call.attributes).forEach(([key2, value]) => {
-              if (!isSafeFieldKey(key2)) {
-                throw new Error(`${t("invalid attribute key")}: ${key2}`);
+            if (call.name === "update_data") {
+              if (!isSafeFieldKey(call.key))
+                throw new Error(t("invalid data key"));
+              setFieldValueTransactional(
+                path2,
+                `data.${call.key}`,
+                call.value === null ? void 0 : call.value
+              );
+              result.applied += 1;
+              recordChange();
+              return;
+            }
+            if (call.name === "replace_children") {
+              const total = countNodes(call.children);
+              if (total > MAX_REPLACE_CHILDREN_NODES) {
+                throw new Error(
+                  `${t("replace_children is too large")} (${total} ${t("nodes")})`
+                );
               }
-              const fieldRoot = call.scope === "mobile" || key2.startsWith("mobileAttributes.") ? "mobileAttributes" : "attributes";
-              const normalizedKey = fieldRoot === "mobileAttributes" ? normalizeMobileAttributeKey(key2) : normalizeAttributeKey(key2);
-              setFieldValue(
+              setFieldValueTransactional(
                 path2,
-                `${fieldRoot}.${normalizedKey}`,
-                value === null ? void 0 : value
+                "children",
+                normalizeChildren(call.children)
               );
-            });
-            result.applied += 1;
-            recordChange();
-            return;
-          }
-          if (call.name === "update_data") {
-            if (!isSafeFieldKey(call.key))
-              throw new Error(t("invalid data key"));
-            setFieldValue(
-              path2,
-              `data.${call.key}`,
-              call.value === null ? void 0 : call.value
-            );
-            result.applied += 1;
-            recordChange();
-            return;
-          }
-          if (call.name === "replace_children") {
-            const total = countNodes(call.children);
-            if (total > MAX_REPLACE_CHILDREN_NODES) {
+              result.applied += 1;
+              recordChange();
+              return;
+            }
+            if (call.name === "set_visibility") {
+              if (call.desktop === false && call.mobile === false) {
+                throw new Error(t("at least one device must remain visible"));
+              }
+              const visible = call.desktop === true && call.mobile === false ? "desktop" : call.desktop === false && call.mobile === true ? "mobile" : void 0;
+              setFieldValueTransactional(path2, "visible", visible);
+              result.applied += 1;
+              recordChange();
+              return;
+            }
+            if (call.name === "update_link") {
+              if (typeof call.href !== "string")
+                throw new Error(t("href is required"));
+              setFieldValueTransactional(path2, "attributes.href", call.href);
+              if (typeof call.blank === "boolean") {
+                setFieldValueTransactional(
+                  path2,
+                  "attributes.target",
+                  call.blank ? "_blank" : "_self"
+                );
+              }
+              if (typeof call.title === "string") {
+                setFieldValueTransactional(
+                  path2,
+                  "attributes.title",
+                  call.title
+                );
+              }
+              result.applied += 1;
+              recordChange();
+              return;
+            }
+            if (call.name === "select_node") {
+              setSelectedNodePath(path2);
+              result.applied += 1;
+              recordChange();
+              return;
+            }
+            if (isProtectedForStructureEdit(element)) {
               throw new Error(
-                `${t("replace_children is too large")} (${total} ${t("nodes")})`
+                t("protected node cannot be structurally edited")
               );
             }
-            setFieldValue(path2, "children", normalizeChildren(call.children));
-            result.applied += 1;
-            recordChange();
-            return;
-          }
-          if (call.name === "set_visibility") {
-            if (call.desktop === false && call.mobile === false) {
-              throw new Error(t("at least one device must remain visible"));
+            if (call.name === "replace_block") {
+              const replacement = normalizeElementBlock(call.block);
+              Transforms.removeNodes(editor, { at: path2 });
+              Transforms.insertNodes(editor, replacement, { at: path2 });
+              result.applied += 1;
+              recordChange();
+              return;
             }
-            const visible = call.desktop === true && call.mobile === false ? "desktop" : call.desktop === false && call.mobile === true ? "mobile" : void 0;
-            setFieldValue(path2, "visible", visible);
-            result.applied += 1;
-            recordChange();
-            return;
-          }
-          if (call.name === "update_link") {
-            if (typeof call.href !== "string")
-              throw new Error(t("href is required"));
-            setFieldValue(path2, "attributes.href", call.href);
-            if (typeof call.blank === "boolean") {
-              setFieldValue(
-                path2,
-                "attributes.target",
-                call.blank ? "_blank" : "_self"
+            if (call.name === "move_up") {
+              const previous = Path.previous(path2);
+              Node.get(editor, previous);
+              Transforms.moveNodes(editor, { at: path2, to: previous });
+              setSelectedNodePath(previous);
+              result.applied += 1;
+              recordChange();
+              return;
+            }
+            if (call.name === "move_down") {
+              const next = Path.next(path2);
+              Node.get(editor, next);
+              Transforms.moveNodes(editor, { at: path2, to: next });
+              setSelectedNodePath(next);
+              result.applied += 1;
+              recordChange();
+              return;
+            }
+            if (call.name === "duplicate") {
+              const next = Path.next(path2);
+              Transforms.insertNodes(
+                editor,
+                assignIdsToElementTree(element, true),
+                { at: next }
               );
+              setSelectedNodePath(next);
+              result.applied += 1;
+              recordChange();
+              return;
             }
-            if (typeof call.title === "string") {
-              setFieldValue(path2, "attributes.title", call.title);
+            if (call.name === "delete_node") {
+              editor.removeNode({ path: path2 });
+              setSelectedNodePath(null);
+              setHoverNodePath(null);
+              result.applied += 1;
+              recordChange();
+              return;
             }
-            result.applied += 1;
-            recordChange();
-            return;
-          }
-          if (call.name === "select_node") {
-            setSelectedNodePath(path2);
-            result.applied += 1;
-            recordChange();
-            return;
-          }
-          if (isProtectedForStructureEdit(element)) {
-            throw new Error(t("protected node cannot be structurally edited"));
-          }
-          if (call.name === "replace_block") {
-            const replacement = normalizeElementBlock(call.block);
-            Transforms.removeNodes(editor, { at: path2 });
-            Transforms.insertNodes(editor, replacement, { at: path2 });
-            result.applied += 1;
-            recordChange();
-            return;
-          }
-          if (call.name === "move_up") {
-            moveUp(path2);
-            result.applied += 1;
-            recordChange();
-            return;
-          }
-          if (call.name === "move_down") {
-            moveDown(path2);
-            result.applied += 1;
-            recordChange();
-            return;
-          }
-          if (call.name === "duplicate") {
-            copyBlock(path2);
-            result.applied += 1;
-            recordChange();
-            return;
-          }
-          if (call.name === "delete_node") {
-            deleteBlock(path2);
-            result.applied += 1;
-            recordChange();
-            return;
-          }
-          if (call.name === "add_block_after") {
-            addBlock(normalizeBlock(call.block), path2, true);
-            result.applied += 1;
-            recordChange();
-            return;
-          }
-          if (call.name === "add_block_before") {
-            addBlock(normalizeBlock(call.block), path2, false);
-            result.applied += 1;
-            recordChange();
-            return;
-          }
-          result.skipped += 1;
-          result.errors.push(`${call.name}: ${t("unsupported tool")}`);
-        } catch (error2) {
-          result.skipped += 1;
-          result.errors.push(
-            `${index2 + 1}. ${call.name}: ${error2 instanceof Error ? error2.message : String(error2)}`
-          );
+            if (call.name === "add_block_after") {
+              const next = Path.next(path2);
+              Transforms.insertNodes(editor, createBlockForInsert(call.block), {
+                at: next
+              });
+              setSelectedNodePath(next);
+              result.applied += 1;
+              recordChange();
+              return;
+            }
+            if (call.name === "add_block_before") {
+              Transforms.insertNodes(editor, createBlockForInsert(call.block), {
+                at: path2
+              });
+              setSelectedNodePath(path2);
+              result.applied += 1;
+              recordChange();
+              return;
+            }
+            result.skipped += 1;
+            result.errors.push(`${call.name}: ${t("unsupported tool")}`);
+          });
+        },
+        {
+          getExternalChange: () => subjectBefore === subjectAfter ? null : { before: subjectBefore, after: subjectAfter }
         }
-      });
-    });
+      );
+    } catch (error2) {
+      syncValues(originalValues);
+      return {
+        applied: 0,
+        skipped: calls.length,
+        errors: [error2 instanceof Error ? error2.message : String(error2)],
+        changes: []
+      };
+    } finally {
+      targetRefs.forEach((ref) => ref.unref());
+      batchRefs.forEach((refs) => refs.forEach((ref) => ref.unref()));
+    }
     return result;
   });
 }
@@ -16236,6 +16874,54 @@ const HoveringToolbar = () => {
     editorContainer || document.body
   );
 };
+const RichTextBarContext = React__default.createContext({
+  activePopup: null,
+  setPopupVisible: () => void 0,
+  closePopup: () => void 0
+});
+const getNextActivePopup = (activePopup, popupId, visible) => {
+  if (visible)
+    return popupId;
+  return activePopup === popupId ? null : activePopup;
+};
+const useRichTextBarPopup = (popupId) => {
+  const { activePopup, setPopupVisible } = useContext(RichTextBarContext);
+  return {
+    popupVisible: activePopup === popupId,
+    onVisibleChange: useCallback(
+      (visible) => setPopupVisible(popupId, visible),
+      [popupId, setPopupVisible]
+    )
+  };
+};
+const useRichTextBarPopupCoordinator = () => {
+  const [activePopup, setActivePopup] = useState(
+    null
+  );
+  const setPopupVisible = useCallback(
+    (popupId, visible) => {
+      setActivePopup(
+        (current) => getNextActivePopup(current, popupId, visible)
+      );
+    },
+    []
+  );
+  const closePopup = useCallback(() => setActivePopup(null), []);
+  return useMemo(
+    () => ({ activePopup, setPopupVisible, closePopup }),
+    [activePopup, closePopup, setPopupVisible]
+  );
+};
+const useRichTextBarActionBoundary = (closePopup) => useCallback(
+  (event) => {
+    var _a;
+    const target = event.target;
+    if ((_a = target == null ? void 0 : target.closest) == null ? void 0 : _a.call(target, ".arco-trigger"))
+      return;
+    closePopup();
+  },
+  [closePopup]
+);
 var colorString$1 = { exports: {} };
 var colorName = {
   "aliceblue": [240, 248, 255],
@@ -18230,7 +18916,7 @@ const BgColorInner = () => {
   const { getPopupContainer } = useContext(RichTextBarContext);
   const { list: colors, addCurrentColor } = useColorContext();
   const { useNewColorPicker = true } = useEditorProps();
-  const [popupVisible, setPopupVisible] = useState(false);
+  const { popupVisible, onVisibleChange: setToolbarPopupVisible } = useRichTextBarPopup("background-color");
   let isSelectionCollapsed = true;
   if (editor.selection) {
     try {
@@ -18355,7 +19041,7 @@ const BgColorInner = () => {
     if (!visible) {
       debouncedApplyChange.flush();
     }
-    setPopupVisible(visible);
+    setToolbarPopupVisible(visible);
   });
   useEffect(() => {
     if (isSelectionCollapsed) {
@@ -18447,6 +19133,8 @@ const BgColorInner = () => {
         Popover,
         {
           trigger: "click",
+          popupVisible,
+          onVisibleChange,
           triggerProps: {
             popupStyle: { padding: "10px" }
           },
@@ -18500,7 +19188,18 @@ const BgColorInner = () => {
         triggerElement
       }
     ));
-  }, [colors, getPopupContainer, normalizedColor, onChange, onClose, onLegacyChange, onVisibleChange, pickerValue, popupVisible, useNewColorPicker]);
+  }, [
+    colors,
+    getPopupContainer,
+    normalizedColor,
+    onChange,
+    onClose,
+    onLegacyChange,
+    onVisibleChange,
+    pickerValue,
+    popupVisible,
+    useNewColorPicker
+  ]);
 };
 const BgColor = () => {
   return /* @__PURE__ */ React__default.createElement(ColorProvider, null, /* @__PURE__ */ React__default.createElement(BgColorInner, null));
@@ -18523,7 +19222,7 @@ const FontColorInner = () => {
   const { addCurrentColor, list: colors } = useColorContext();
   const { useNewColorPicker = true } = useEditorProps();
   const editor = useSlate();
-  const [popupVisible, setPopupVisible] = useState(false);
+  const { popupVisible, onVisibleChange: setToolbarPopupVisible } = useRichTextBarPopup("font-color");
   let isSelectionCollapsed = true;
   if (editor.selection) {
     try {
@@ -18644,7 +19343,7 @@ const FontColorInner = () => {
     if (!visible) {
       debouncedApplyChange.flush();
     }
-    setPopupVisible(visible);
+    setToolbarPopupVisible(visible);
   });
   useEffect(() => {
     if (isSelectionCollapsed) {
@@ -18694,35 +19393,45 @@ const FontColorInner = () => {
     }
   });
   return useMemo(() => {
-    const triggerElement = /* @__PURE__ */ React__default.createElement("span", { ref, className: classnames$1("formatButton"), title: t("Font color") }, /* @__PURE__ */ React__default.createElement(
+    const triggerElement = /* @__PURE__ */ React__default.createElement(
       "span",
       {
-        className: classnames$1("iconfont"),
-        style: {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          height: "calc(var(--hovering-bar-icon-size) + 4px)",
-          textAlign: "center",
-          fontSize: "calc(var(--hovering-bar-icon-size) + 2px)",
-          borderRadius: "2px",
-          width: "calc(var(--hovering-bar-icon-size) + 4px)",
-          boxSizing: "border-box",
-          fontWeight: "500",
-          color: pickerValue.toLocaleLowerCase() === "#ffffff" ? void 0 : pickerValue,
-          borderColor: pickerValue.toLocaleLowerCase() === "#ffffff" ? void 0 : pickerValue,
-          borderWidth: "1px",
-          borderStyle: "solid",
-          overflow: "hidden"
-        }
+        ref,
+        className: classnames$1("formatButton"),
+        title: t("Font color")
       },
-      "A"
-    ));
+      /* @__PURE__ */ React__default.createElement(
+        "span",
+        {
+          className: classnames$1("iconfont"),
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            height: "calc(var(--hovering-bar-icon-size) + 4px)",
+            textAlign: "center",
+            fontSize: "calc(var(--hovering-bar-icon-size) + 2px)",
+            borderRadius: "2px",
+            width: "calc(var(--hovering-bar-icon-size) + 4px)",
+            boxSizing: "border-box",
+            fontWeight: "500",
+            color: pickerValue.toLocaleLowerCase() === "#ffffff" ? void 0 : pickerValue,
+            borderColor: pickerValue.toLocaleLowerCase() === "#ffffff" ? void 0 : pickerValue,
+            borderWidth: "1px",
+            borderStyle: "solid",
+            overflow: "hidden"
+          }
+        },
+        "A"
+      )
+    );
     if (!useNewColorPicker) {
       return /* @__PURE__ */ React__default.createElement(
         Popover,
         {
           trigger: "click",
+          popupVisible,
+          onVisibleChange,
           triggerProps: {
             popupStyle: { padding: "10px" }
           },
@@ -18776,7 +19485,18 @@ const FontColorInner = () => {
         triggerElement
       }
     ));
-  }, [colors, getPopupContainer, normalizedColor, onChange, onClose, onLegacyChange, onVisibleChange, pickerValue, popupVisible, useNewColorPicker]);
+  }, [
+    colors,
+    getPopupContainer,
+    normalizedColor,
+    onChange,
+    onClose,
+    onLegacyChange,
+    onVisibleChange,
+    pickerValue,
+    popupVisible,
+    useNewColorPicker
+  ]);
 };
 const FontColor = () => {
   return /* @__PURE__ */ React__default.createElement(ColorProvider, null, /* @__PURE__ */ React__default.createElement(FontColorInner, null));
@@ -19178,8 +19898,9 @@ const TextLink = () => {
   const { getPopupContainer } = useContext(RichTextBarContext);
   const ref = useRef(null);
   const linkNode = linkNodeEntry == null ? void 0 : linkNodeEntry[0];
+  const { popupVisible, onVisibleChange } = useRichTextBarPopup("link");
   const selectedNodePath = useSelectedNodePath();
-  const [popupVisible, setPopupVisible] = useState(false);
+  const [mergeTagPopupVisible, setMergeTagPopupVisible] = useState(false);
   const { handleUploadClick, showSelectFileButton, onUpload, mergetags } = useEditorProps();
   const [isUploading, setIsUploading] = useState(false);
   const uploadHandlerRef = useRef(onUpload);
@@ -19192,7 +19913,7 @@ const TextLink = () => {
       const newHref = PluginManager.generateVariable(mergetag);
       from.setFieldValue("href", newHref);
       setFormState((old) => __spreadProps(__spreadValues({}, old), { href: newHref }));
-      setPopupVisible(false);
+      setMergeTagPopupVisible(false);
     },
     [from]
   );
@@ -19287,6 +20008,8 @@ const TextLink = () => {
     Popover,
     {
       trigger: "click",
+      popupVisible,
+      onVisibleChange,
       triggerProps: {
         position: "tr",
         popupStyle: { padding: "10px 0px 0px 0px", width: 400 }
@@ -19333,10 +20056,10 @@ const TextLink = () => {
             SharedComponents.MergeTagComponent,
             {
               mergetags: formatMergetags,
-              popupVisible,
-              onVisibleChange: setPopupVisible,
+              popupVisible: mergeTagPopupVisible,
+              onVisibleChange: setMergeTagPopupVisible,
               onChange: onChangeMergeTag,
-              onClose: () => setPopupVisible(false),
+              onClose: () => setMergeTagPopupVisible(false),
               value: "",
               triggerElement: /* @__PURE__ */ React__default.createElement(
                 Button$2,
@@ -19474,6 +20197,7 @@ const options$9 = [
 ];
 const TurnInto = () => {
   const editor = useSlate();
+  const { popupVisible, onVisibleChange } = useRichTextBarPopup("turn-into");
   let nodeEntry = null;
   try {
     if (editor.selection && Node.has(editor, editor.selection.anchor.path)) {
@@ -19510,6 +20234,8 @@ const TurnInto = () => {
     Select$1,
     {
       value: node.type,
+      popupVisible,
+      onVisibleChange,
       className: "easy-email-pro-turnInto",
       style: { minWidth: 95 },
       onChange,
@@ -19529,7 +20255,7 @@ const TurnInto = () => {
 };
 const RichTextBar$1 = "";
 const MergeTag = React__default.memo(() => {
-  const [popupVisible, setPopupVisible] = useState(false);
+  const { popupVisible, onVisibleChange } = useRichTextBarPopup("merge-tag");
   const [mergeTagRef, setMergeTagRef] = useState(null);
   const editor = useSlate();
   const { mergetags } = useEditorProps();
@@ -19541,19 +20267,19 @@ const MergeTag = React__default.memo(() => {
       editor.insertMergetag({
         mergetag
       });
-      setPopupVisible(false);
+      onVisibleChange(false);
     },
-    [editor]
+    [editor, onVisibleChange]
   );
   const onClose = useCallback(() => {
-    setPopupVisible(false);
-  }, []);
+    onVisibleChange(false);
+  }, [onVisibleChange]);
   return /* @__PURE__ */ React__default.createElement("div", { ref: setMergeTagRef }, /* @__PURE__ */ React__default.createElement(
     SharedComponents.MergeTagComponent,
     {
       mergetags: formatMergetags,
       popupVisible,
-      onVisibleChange: setPopupVisible,
+      onVisibleChange,
       onChange,
       onClose,
       value: "",
@@ -19563,7 +20289,7 @@ const MergeTag = React__default.memo(() => {
         {
           title: t("Merge Tag"),
           icon: "icon-merge-tags",
-          onClick: () => setPopupVisible(false)
+          onClick: () => onVisibleChange(false)
         }
       )
     }
@@ -19720,6 +20446,7 @@ const TextAlign$1 = () => {
 };
 const options$8 = ["12px", "14px", "16px", "18px", "24px", "32px", "48px"];
 const FontSize$2 = () => {
+  const { popupVisible, onVisibleChange } = useRichTextBarPopup("font-size");
   const [selectRef, setSelectRef] = useState(null);
   const { fontSizeList } = useEditorProps();
   const [fontSizeValue, setFontSizeValue] = useState();
@@ -19832,6 +20559,8 @@ const FontSize$2 = () => {
     {
       className: "easy-email-pro-font-size",
       value: fontSizeValue,
+      popupVisible,
+      onVisibleChange,
       style: { width: 80 },
       onChange,
       triggerProps: {
@@ -19849,6 +20578,7 @@ const FontSize$2 = () => {
       `));
 };
 const FontFamily$2 = () => {
+  const { popupVisible, onVisibleChange } = useRichTextBarPopup("font-family");
   const { fontList, addFont } = useFontFamily();
   const [selectRef, setSelectRef] = useState(null);
   const editor = useSlate();
@@ -19951,6 +20681,8 @@ const FontFamily$2 = () => {
     {
       className: "easy-email-pro-font-family",
       value: fontFamilyValue,
+      popupVisible,
+      onVisibleChange,
       style: { minWidth: 80 },
       onChange,
       triggerProps: {
@@ -20063,6 +20795,7 @@ const Image$4 = () => {
   const editor = useSlate();
   const ref = useRef(null);
   const { onUpload } = useEditorProps();
+  const { popupVisible, onVisibleChange } = useRichTextBarPopup("image");
   const { lock } = useEditorState();
   const [from] = Form.useForm();
   const onSubmit = (values) => {
@@ -20101,6 +20834,8 @@ const Image$4 = () => {
     Popover,
     {
       trigger: "click",
+      popupVisible,
+      onVisibleChange,
       triggerProps: {
         position: "bl",
         popupStyle: { padding: "0px" }
@@ -20201,15 +20936,16 @@ const Image$4 = () => {
     /* @__PURE__ */ React__default.createElement("span", { ref, className: classnames$1("formatButton") }, /* @__PURE__ */ React__default.createElement("span", { className: classnames$1(" iconfont icon-img") }))
   );
 };
-const RichTextBarContext = React__default.createContext({});
 const RichTextBar = ({
   list,
   wrap: wrap2,
   getPopupContainer
 }) => {
+  const { activePopup, setPopupVisible, closePopup } = useRichTextBarPopupCoordinator();
+  const onClickCapture = useRichTextBarActionBoundary(closePopup);
   const contextValue = useMemo(
-    () => ({ getPopupContainer }),
-    [getPopupContainer]
+    () => ({ getPopupContainer, activePopup, setPopupVisible, closePopup }),
+    [activePopup, closePopup, getPopupContainer, setPopupVisible]
   );
   const { MergetagPopover: MergetagPopover2, mergetags, AIAssistant: AIAssistant2 } = useEditorProps();
   const { selectedNode } = useSelectedNode();
@@ -20315,6 +21051,7 @@ const RichTextBar = ({
     {
       id: "RichTextBar",
       className: "RichTextBar",
+      onClickCapture,
       style: {
         display: "inline-flex",
         alignItems: "center",
@@ -26220,14 +26957,14 @@ var getNative$1 = _getNative, root$2 = _root;
 var Set$2 = getNative$1(root$2, "Set");
 var _Set = Set$2;
 var getNative = _getNative, root$1 = _root;
-var WeakMap$1 = getNative(root$1, "WeakMap");
-var _WeakMap = WeakMap$1;
-var DataView = _DataView, Map$1 = _Map, Promise$1 = _Promise, Set$1 = _Set, WeakMap = _WeakMap, baseGetTag$1 = _baseGetTag, toSource = _toSource;
+var WeakMap$2 = getNative(root$1, "WeakMap");
+var _WeakMap = WeakMap$2;
+var DataView = _DataView, Map$1 = _Map, Promise$1 = _Promise, Set$1 = _Set, WeakMap$1 = _WeakMap, baseGetTag$1 = _baseGetTag, toSource = _toSource;
 var mapTag$3 = "[object Map]", objectTag$2 = "[object Object]", promiseTag = "[object Promise]", setTag$3 = "[object Set]", weakMapTag$1 = "[object WeakMap]";
 var dataViewTag$2 = "[object DataView]";
-var dataViewCtorString = toSource(DataView), mapCtorString = toSource(Map$1), promiseCtorString = toSource(Promise$1), setCtorString = toSource(Set$1), weakMapCtorString = toSource(WeakMap);
+var dataViewCtorString = toSource(DataView), mapCtorString = toSource(Map$1), promiseCtorString = toSource(Promise$1), setCtorString = toSource(Set$1), weakMapCtorString = toSource(WeakMap$1);
 var getTag$3 = baseGetTag$1;
-if (DataView && getTag$3(new DataView(new ArrayBuffer(1))) != dataViewTag$2 || Map$1 && getTag$3(new Map$1()) != mapTag$3 || Promise$1 && getTag$3(Promise$1.resolve()) != promiseTag || Set$1 && getTag$3(new Set$1()) != setTag$3 || WeakMap && getTag$3(new WeakMap()) != weakMapTag$1) {
+if (DataView && getTag$3(new DataView(new ArrayBuffer(1))) != dataViewTag$2 || Map$1 && getTag$3(new Map$1()) != mapTag$3 || Promise$1 && getTag$3(Promise$1.resolve()) != promiseTag || Set$1 && getTag$3(new Set$1()) != setTag$3 || WeakMap$1 && getTag$3(new WeakMap$1()) != weakMapTag$1) {
   getTag$3 = function(value) {
     var result = baseGetTag$1(value), Ctor = result == objectTag$2 ? value.constructor : void 0, ctorString = Ctor ? toSource(Ctor) : "";
     if (ctorString) {
@@ -40280,6 +41017,7 @@ const AIPromptModal = (props) => {
 };
 const SvgMagic = (props) => /* @__PURE__ */ React$2.createElement("svg", __spreadValues({ className: "bi bi-magic", fill: "currentColor", height: 16, viewBox: "0 0 16 16", width: 16, xmlns: "http://www.w3.org/2000/svg" }, props), /* @__PURE__ */ React$2.createElement("path", { d: "M9.5 2.672a.5.5 0 1 0 1 0V.843a.5.5 0 0 0-1 0v1.829Zm4.5.035A.5.5 0 0 0 13.293 2L12 3.293a.5.5 0 1 0 .707.707L14 2.707ZM7.293 4A.5.5 0 1 0 8 3.293L6.707 2A.5.5 0 0 0 6 2.707L7.293 4Zm-.621 2.5a.5.5 0 1 0 0-1H4.843a.5.5 0 1 0 0 1h1.829Zm8.485 0a.5.5 0 1 0 0-1h-1.829a.5.5 0 0 0 0 1h1.829ZM13.293 10A.5.5 0 1 0 14 9.293L12.707 8a.5.5 0 1 0-.707.707L13.293 10ZM9.5 11.157a.5.5 0 0 0 1 0V9.328a.5.5 0 0 0-1 0v1.829Zm1.854-5.097a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L8.646 5.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0l1.293-1.293Zm-3 3a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L.646 13.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0L8.354 9.06Z" }));
 function AIAssistant({ isCollapsed }) {
+  const { popupVisible, onVisibleChange } = useRichTextBarPopup("ai-assistant");
   const isEnabled = EditorAuth.getFeatureEnabled("AI_ASSISTANT");
   if (!isEnabled) {
     throw new Error(`Current plan do not support AIAssistant`);
@@ -40539,6 +41277,8 @@ function AIAssistant({ isCollapsed }) {
   return /* @__PURE__ */ React__default.createElement("div", { ref: setRefElement, style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React__default.createElement(
     Select$1,
     {
+      popupVisible,
+      onVisibleChange,
       getPopupContainer: (node) => {
         return Array.from(document.querySelectorAll(".RichTextBar")).find(
           (item2) => item2.contains(node)
@@ -41921,6 +42661,15 @@ function EasyEmailProAiAgent({
     "×"
   ), /* @__PURE__ */ React__default.createElement("img", { src: previewAttachment.url, alt: previewAttachment.name, onClick: (event) => event.stopPropagation() })) : null);
 }
+function formatAiApplyResult(result, summary) {
+  const lines = summary ? [summary] : [t("Updated the email preview.")];
+  lines.push(
+    result.skipped > 0 ? `${t("Updated")} ${result.applied} ${t("blocks")}; ${t("skipped")} ${result.skipped}.` : `${t("Updated")} ${result.applied} ${t("blocks")}.`
+  );
+  if (result.errors.length)
+    lines.push(result.errors.join("\n"));
+  return lines.join("\n\n");
+}
 const doneStatuses = ["FINISHED", "ERROR"];
 function getInitialConversation() {
   return [
@@ -42234,18 +42983,13 @@ function useAiAgentSession(options2) {
           ((_a = result == null ? void 0 : result.errors) == null ? void 0 : _a.filter(Boolean)) || []
         );
         updateMessage(activeRun.assistantMessageId, {
-          content: errors.length ? `${payload.summary || t("Some local changes were not applied.")}
-
-${t(
-            "Some operations were not applied"
-          )}:
-${errors.join("\n")}` : toolCallsText(__spreadProps(__spreadValues({}, payload), { toolCalls }), result),
+          content: result ? formatAiApplyResult(__spreadProps(__spreadValues({}, result), { errors }), payload.summary) : toolCallsText(__spreadProps(__spreadValues({}, payload), { toolCalls }), result),
           status: "ready"
         });
         setActivity(
           errors.length ? t("Some local changes were not applied") : t("Updated the email preview.")
         );
-        if ((result == null ? void 0 : result.applied) === void 0 || result.applied > 0) {
+        if (!result || result.applied > 0) {
           scheduleAfterApplySnapshot(
             activeRun.assistantMessageId,
             payload.summary