easy-email-pro-theme 1.57.12 → 1.58.0

package/lib/index.js

@@ -58,7 +58,8 @@ 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, I18nManager } from "easy-email-pro-core";
+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 { 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 { Editor, Range, Node, Transforms, Path, Text as Text$4, createEditor } from "slate";
 import { nanoid } from "nanoid";
@@ -2296,6 +2297,474 @@ const useBlocksDrawer = () => {
     parentCategory: context.blocksDrawerParentCategory
   };
 };
+const MAX_TOOL_CALLS = 30;
+const MAX_REPLACE_CHILDREN_NODES = 160;
+function isObject$b(value) {
+  return Boolean(value && typeof value === "object" && !Array.isArray(value));
+}
+function isTextNode(value) {
+  return isObject$b(value) && typeof value.text === "string";
+}
+function isElement$1(value) {
+  return NodeUtils.isElement(value);
+}
+function canReplaceNodeText(node) {
+  if (isTextNode(node))
+    return true;
+  if (!NodeUtils.isElement(node))
+    return false;
+  if (NodeUtils.isLineBreakElement(node) || NodeUtils.isMergetagElement(node)) {
+    return true;
+  }
+  if (NodeUtils.isHTMLBlockNodeElement(node)) {
+    return node.children.every(
+      (child) => canReplaceNodeText(child)
+    );
+  }
+  return false;
+}
+function canReplaceWithPlainText(element) {
+  return element.children.every(
+    (child) => canReplaceNodeText(child)
+  );
+}
+function hasAnyTextNode(element) {
+  return element.children.some((child) => {
+    if (isTextNode(child))
+      return true;
+    if (!NodeUtils.isElement(child))
+      return false;
+    if (NodeUtils.isHTMLBlockNodeElement(child)) {
+      return hasAnyTextNode(child);
+    }
+    return false;
+  });
+}
+function textToChildren(text) {
+  return text.split("\n").flatMap((line, index2, lines) => {
+    const nodes = [{ text: line }];
+    if (index2 !== lines.length - 1) {
+      nodes.push({
+        type: ElementType.LINE_BREAK,
+        data: {},
+        attributes: {},
+        children: [{ text: "" }]
+      });
+    }
+    return nodes;
+  });
+}
+function isSafeFieldKey(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 normalizeAttributeKey(key2) {
+  return key2.replace(/^attributes\./, "");
+}
+function normalizeMobileAttributeKey(key2) {
+  return key2.replace(/^mobileAttributes\./, "");
+}
+function targetLabel(target) {
+  if ("selected" in target)
+    return t("selected");
+  if ("id" in target && target.id === "__easy_email_ai_agent_no_initial_selection__") {
+    return t("selected: no element was selected when the request started");
+  }
+  if ("id" in target)
+    return `id:${target.id}`;
+  if ("uid" in target)
+    return `uid:${target.uid}`;
+  return `type:${target.type}${typeof target.index === "number" ? `[${target.index}]` : ""}`;
+}
+function elementLabel(element) {
+  var _a;
+  return element.title || ((_a = BlockManager.getBlockByType(element.type)) == null ? void 0 : _a.name) || element.type;
+}
+function targetFromElement(element, fallback) {
+  if (element.id)
+    return { id: element.id };
+  if (element.uid)
+    return { uid: element.uid };
+  return fallback;
+}
+function describeAppliedChange(call) {
+  if (call.name === "update_text")
+    return t("Text updated");
+  if (call.name === "update_attribute")
+    return t("Style or attribute updated");
+  if (call.name === "update_mobile_attribute")
+    return t("Mobile style updated");
+  if (call.name === "update_attributes") {
+    return call.scope === "mobile" ? t("Mobile styles updated") : t("Styles updated");
+  }
+  if (call.name === "update_data")
+    return t("Content setting updated");
+  if (call.name === "replace_children")
+    return t("Content updated");
+  if (call.name === "set_visibility")
+    return t("Visibility updated");
+  if (call.name === "replace_block")
+    return t("Block replaced");
+  if (call.name === "update_link")
+    return t("Link updated");
+  if (call.name === "add_block_after")
+    return t("Block added");
+  if (call.name === "add_block_before")
+    return t("Block added");
+  if (call.name === "duplicate")
+    return t("Duplicated");
+  if (call.name === "delete_node")
+    return t("Deleted");
+  if (call.name === "move_up")
+    return t("Moved up");
+  if (call.name === "move_down")
+    return t("Moved down");
+  if (call.name === "select_node")
+    return t("Selected");
+  return t("Template updated");
+}
+function closestBlockEntry(editor, path2) {
+  for (let currentPath = path2; currentPath.length > 0; currentPath = Path.parent(currentPath)) {
+    const node = Node.get(editor, currentPath);
+    if (NodeUtils.isBlockElement(node)) {
+      return [node, currentPath];
+    }
+  }
+  return null;
+}
+function changeKey(path2, description) {
+  return `${path2.join(".")}:${description}`;
+}
+function isProtectedForStructureEdit(node) {
+  return NodeUtils.isPageElement(node) || NodeUtils.isPageHeaderElement(node) || NodeUtils.isPageFooterElement(node);
+}
+function countNodes(children) {
+  return children.reduce((total, child) => {
+    if (!isObject$b(child))
+      return total + 1;
+    const nested = Array.isArray(child.children) ? countNodes(child.children) : 0;
+    return total + 1 + nested;
+  }, 0);
+}
+function normalizeChildren(children) {
+  return children.map((child) => {
+    if (isTextNode(child))
+      return child;
+    if (!isElement$1(child)) {
+      throw new Error(t("children must contain Easy Email nodes"));
+    }
+    if (!BlockManager.getBlockByType(child.type)) {
+      throw new Error(`${t("unknown block type")}: ${child.type}`);
+    }
+    return assignIdsToElementTree(child);
+  });
+}
+function normalizeBlock(block) {
+  if (!isObject$b(block) || typeof block.type !== "string") {
+    throw new Error(t("block.type is required"));
+  }
+  if (!BlockManager.getBlockByType(block.type)) {
+    throw new Error(`${t("unknown block type")}: ${block.type}`);
+  }
+  return block;
+}
+function normalizeElementBlock(block) {
+  const normalized = normalizeBlock(block);
+  return assignIdsToElementTree(__spreadProps(__spreadValues({}, normalized), {
+    data: isObject$b(normalized.data) ? normalized.data : {},
+    attributes: isObject$b(normalized.attributes) ? normalized.attributes : {},
+    children: Array.isArray(normalized.children) ? normalized.children : []
+  }));
+}
+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 resolveTargetPath = useEventCallback((target) => {
+    if ("selected" in target)
+      return selectedNodePath;
+    const entry = Array.from(
+      Editor.nodes(editor, {
+        at: [],
+        match: (node) => {
+          if (!NodeUtils.isElement(node))
+            return false;
+          const element = node;
+          if ("id" in target)
+            return element.id === target.id;
+          if ("uid" in target)
+            return element.uid === target.uid;
+          return false;
+        }
+      })
+    )[0];
+    if (entry)
+      return entry[1];
+    if ("type" in target) {
+      const targetIndex = typeof target.index === "number" && target.index >= 0 ? Math.floor(target.index) : 0;
+      const typeEntry = Array.from(
+        Editor.nodes(editor, {
+          at: [],
+          match: (node) => NodeUtils.isElement(node) && node.type === target.type
+        })
+      )[targetIndex];
+      return typeEntry ? typeEntry[1] : null;
+    }
+    return null;
+  });
+  const getTargetElement = useEventCallback(
+    (target) => {
+      const path2 = resolveTargetPath(target);
+      if (!path2)
+        return null;
+      const node = Node.get(editor, path2);
+      if (!NodeUtils.isElement(node))
+        return null;
+      return [node, path2];
+    }
+  );
+  return useEventCallback((toolCalls) => {
+    const result = {
+      applied: 0,
+      skipped: 0,
+      errors: [],
+      changes: []
+    };
+    if (lock) {
+      return {
+        applied: 0,
+        skipped: toolCalls.length,
+        errors: [t("editor is locked")]
+      };
+    }
+    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, () => {
+      calls.forEach((call, index2) => {
+        try {
+          if (call.name === "apply_template") {
+            reset(call.template);
+            result.applied += 1;
+            return;
+          }
+          const targetEntry = getTargetElement(call.target);
+          if (!targetEntry) {
+            result.skipped += 1;
+            result.errors.push(
+              `${call.name}: ${t("target not found")} (${targetLabel(call.target)})`
+            );
+            return;
+          }
+          const [element, path2] = targetEntry;
+          const recordChange = () => {
+            var _a, _b;
+            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,
+              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")
+              );
+            }
+            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.")) {
+              const mobileKey = normalizeMobileAttributeKey(call.key);
+              setFieldValue(
+                path2,
+                `mobileAttributes.${mobileKey}`,
+                call.value === null ? void 0 : call.value
+              );
+              result.applied += 1;
+              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"));
+            }
+            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);
+              setFieldValue(
+                path2,
+                `${fieldRoot}.${normalizedKey}`,
+                value === null ? void 0 : value
+              );
+            });
+            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) {
+              throw new Error(
+                `${t("replace_children is too large")} (${total} ${t("nodes")})`
+              );
+            }
+            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"));
+            }
+            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 (typeof call.title === "string") {
+              setFieldValue(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("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)}`
+          );
+        }
+      });
+    });
+    return result;
+  });
+}
 const ElementTools$1 = ({ element, nodeElement, path: path2 }) => {
   const editor = useSlate();
   const { copyBlock, deleteBlock } = useElementInteract();
@@ -2493,7 +2962,7 @@ const ElementSelected = ({ element, nodeElement, path: path2 }) => {
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, renderContent);
 };
 const styleText$d = "body {\n  --sectionElementOffset: 100px;\n  --wrapperElementOffset: 150px;\n}\n\n@media screen and (max-width: 850px) {\n  [data-slate-block=page] {\n    --sectionElementOffset: 70px;\n    --wrapperElementOffset: 100px;\n  }\n}\n.section-category-hover {\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: calc(100% + 2 * var(--sectionElementOffset));\n  transform: translate(calc(-1 * var(--sectionElementOffset)), 0);\n}\n\n.hero-category-hover {\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: calc(100% + 2 * var(--sectionElementOffset));\n  transform: translate(calc(-1 * var(--sectionElementOffset)), 0);\n}\n\n[data-is-full-width=true].section-category-hover {\n  width: calc(100% - 4px);\n  transform: none;\n}\n\n[data-is-hero-category=true].element-tools-container {\n  width: calc(100% + 2 * var(--sectionElementOffset));\n  transform: translate(calc(-1 * var(--sectionElementOffset)), 0);\n}\n\n[data-is-section-category=true].element-tools-container {\n  width: calc(100% + 2 * var(--sectionElementOffset));\n  transform: translate(calc(-1 * var(--sectionElementOffset)), 0);\n}\n\n[data-is-section-category=true][data-is-full-width=true].element-tools-container {\n  width: calc(100% - 4px - 16px);\n  transform: none;\n}\n\n.wrapper-category-hover {\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: calc(100% + 2 * var(--wrapperElementOffset));\n  transform: translate(calc(-1 * var(--wrapperElementOffset)), 0);\n}\n\n[data-is-full-width=true].wrapper-category-hover {\n  width: calc(100% - 4px - 16px);\n  transform: none;\n}\n\n[data-is-wrapper-category=true].element-tools-container {\n  width: calc(100% + 2 * var(--wrapperElementOffset));\n  transform: translate(calc(-1 * var(--wrapperElementOffset)), 0);\n  position: absolute;\n}\n\n[data-is-wrapper-category=true][data-is-full-width=true].element-tools-container {\n  width: calc(100% - 4px);\n  transform: none;\n}\n\n.wrapper-category-hover {\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: calc(100% + 2 * var(--wrapperElementOffset));\n  transform: translate(calc(-1 * var(--wrapperElementOffset)), 0);\n}\n\n[data-is-wrapper-category=true].element-tools-container {\n  width: calc(100% + 2 * var(--wrapperElementOffset));\n  transform: translate(calc(-1 * var(--wrapperElementOffset)), 0);\n  position: absolute;\n}\n\n.amp-interactive-badge {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  padding: 4px 10px;\n  background-color: #f57c00;\n  color: #fff;\n  font-size: 12px;\n  font-weight: 600;\n  border-radius: 6px;\n  white-space: nowrap;\n  pointer-events: none;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n  z-index: 1;\n}\n\n.html-badge {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  padding: 4px 10px;\n  background-color: #165dff;\n  color: #fff;\n  font-size: 12px;\n  font-weight: 600;\n  border-radius: 6px;\n  white-space: nowrap;\n  pointer-events: none;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n  z-index: 1;\n}";
-const stylesText$1 = '.BlockSideBar .arco-tabs-header {\n  display: flex;\n  width: 100%;\n}\n.BlockSideBar .arco-tabs-header .arco-tabs-header-title {\n  flex: 1;\n  margin: 0px !important;\n  padding: 0 !important;\n  height: 60px;\n  line-height: 60px;\n  position: relative;\n}\n.BlockSideBar .arco-tabs-header .arco-tabs-header-title:hover::after {\n  content: "";\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  top: initial;\n  height: 2px;\n  background-color: var(--color-border-3);\n  transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);\n}\n.BlockSideBar .arco-tabs-header .arco-tabs-header-title .arco-tabs-header-title-text {\n  display: block;\n  text-align: center;\n  width: 100%;\n}\n.BlockSideBar .arco-tabs-header .arco-tabs-header-title .arco-tabs-header-title-text::before {\n  display: none;\n}\n.BlockSideBar .arco-tabs-content {\n  padding-top: 0;\n}\n\n.ConfigurationSideBar {\n  height: 60px;\n  line-height: 60px;\n  position: relative;\n  border-bottom: 1px solid #e5e7eb;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: rgb(var(--primary-6));\n  font-weight: 500;\n}';
+const stylesText$1 = '.BlockSideBar .arco-tabs-header {\n  display: flex;\n  width: 100%;\n}\n.BlockSideBar .arco-tabs-header .arco-tabs-header-title {\n  flex: 1;\n  margin: 0px !important;\n  padding: 0 !important;\n  height: 60px;\n  line-height: 60px;\n  position: relative;\n}\n.BlockSideBar .arco-tabs-header .arco-tabs-header-title:hover::after {\n  content: "";\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  top: initial;\n  height: 2px;\n  background-color: var(--color-border-3);\n  transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);\n}\n.BlockSideBar .arco-tabs-header .arco-tabs-header-title .arco-tabs-header-title-text {\n  display: block;\n  text-align: center;\n  width: 100%;\n}\n.BlockSideBar .arco-tabs-header .arco-tabs-header-title .arco-tabs-header-title-text::before {\n  display: none;\n}\n.BlockSideBar .arco-tabs-content {\n  padding-top: 0;\n}\n.BlockSideBar .easy-email-pro-block-sidebar-ai-agent .eep-ai-agent {\n  width: 100%;\n  min-width: 0;\n  min-height: 0;\n  border-left: 0;\n}\n\n.ConfigurationSideBar {\n  height: 60px;\n  line-height: 60px;\n  position: relative;\n  border-bottom: 1px solid #e5e7eb;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: rgb(var(--primary-6));\n  font-weight: 500;\n}';
 const UniversalList = () => {
   const { universalElementSetting } = useEditorProps();
   if (!universalElementSetting)
@@ -3317,9 +3786,9 @@ function useUniqueId(prefix, value) {
     if (value) {
       return value;
     }
-    const id = ids[prefix] == null ? 0 : ids[prefix] + 1;
-    ids[prefix] = id;
-    return prefix + "-" + id;
+    const id2 = ids[prefix] == null ? 0 : ids[prefix] + 1;
+    ids[prefix] = id2;
+    return prefix + "-" + id2;
   }, [prefix, value]);
 }
 function createAdjustmentFn(modifier) {
@@ -3448,17 +3917,17 @@ const hiddenStyles = {
 };
 function HiddenText(_ref) {
   let {
-    id,
+    id: id2,
     value
   } = _ref;
   return React__default.createElement("div", {
-    id,
+    id: id2,
     style: hiddenStyles
   }, value);
 }
 function LiveRegion(_ref) {
   let {
-    id,
+    id: id2,
     announcement,
     ariaLiveType = "assertive"
   } = _ref;
@@ -3475,7 +3944,7 @@ function LiveRegion(_ref) {
     whiteSpace: "nowrap"
   };
   return React__default.createElement("div", {
-    id,
+    id: id2,
     style: visuallyHidden,
     role: "status",
     "aria-live": ariaLiveType,
@@ -3746,13 +4215,13 @@ const closestCenter = (_ref) => {
   const collisions = [];
   for (const droppableContainer of droppableContainers) {
     const {
-      id
+      id: id2
     } = droppableContainer;
-    const rect = droppableRects.get(id);
+    const rect = droppableRects.get(id2);
     if (rect) {
       const distBetween = distanceBetween(centerOfRectangle(rect), centerRect);
       collisions.push({
-        id,
+        id: id2,
         data: {
           droppableContainer,
           value: distBetween
@@ -3787,14 +4256,14 @@ const rectIntersection = (_ref) => {
   const collisions = [];
   for (const droppableContainer of droppableContainers) {
     const {
-      id
+      id: id2
     } = droppableContainer;
-    const rect = droppableRects.get(id);
+    const rect = droppableRects.get(id2);
     if (rect) {
       const intersectionRatio = getIntersectionRatio(rect, collisionRect);
       if (intersectionRatio > 0) {
         collisions.push({
-          id,
+          id: id2,
           data: {
             droppableContainer,
             value: intersectionRatio
@@ -4964,16 +5433,16 @@ function useScrollIntent(_ref2) {
     };
   }, [disabled, delta, previousDelta]);
 }
-function useCachedNode(draggableNodes, id) {
-  const draggableNode = id !== null ? draggableNodes.get(id) : void 0;
+function useCachedNode(draggableNodes, id2) {
+  const draggableNode = id2 !== null ? draggableNodes.get(id2) : void 0;
   const node = draggableNode ? draggableNode.node.current : null;
   return useLazyMemo((cachedNode) => {
     var _ref;
-    if (id === null) {
+    if (id2 === null) {
       return null;
     }
     return (_ref = node != null ? node : cachedNode) != null ? _ref : null;
-  }, [node, id]);
+  }, [node, id2]);
 }
 function useCombineActivators(sensors, getSyntheticHandler) {
   return useMemo(() => sensors.reduce((accumulator, sensor) => {
@@ -5024,7 +5493,7 @@ function useDroppableMeasuring(containers, _ref) {
       if (value === null) {
         return ids2;
       }
-      return value.concat(ids2.filter((id) => !value.includes(id)));
+      return value.concat(ids2.filter((id2) => !value.includes(id2)));
     });
   }, [disabledRef]);
   const timeoutId = useRef(null);
@@ -5342,7 +5811,7 @@ function useSensorSetup(sensors) {
     })
   );
 }
-function useSyntheticListeners(listeners, id) {
+function useSyntheticListeners(listeners, id2) {
   return useMemo(() => {
     return listeners.reduce((acc, _ref) => {
       let {
@@ -5350,11 +5819,11 @@ function useSyntheticListeners(listeners, id) {
         handler
       } = _ref;
       acc[eventName] = (event) => {
-        handler(event, id);
+        handler(event, id2);
       };
       return acc;
     }, {});
-  }, [listeners, id]);
+  }, [listeners, id2]);
 }
 function useWindowRect(element) {
   return useMemo(() => element ? getWindowClientRect(element) : null, [element]);
@@ -5462,9 +5931,9 @@ const defaultMeasuringConfiguration = {
   }
 };
 class DroppableContainersMap extends Map {
-  get(id) {
+  get(id2) {
     var _super$get;
-    return id != null ? (_super$get = super.get(id)) != null ? _super$get : void 0 : void 0;
+    return id2 != null ? (_super$get = super.get(id2)) != null ? _super$get : void 0 : void 0;
   }
   toArray() {
     return Array.from(this.values());
@@ -5477,9 +5946,9 @@ class DroppableContainersMap extends Map {
       return !disabled;
     });
   }
-  getNodeFor(id) {
+  getNodeFor(id2) {
     var _this$get$node$curren, _this$get;
-    return (_this$get$node$curren = (_this$get = this.get(id)) == null ? void 0 : _this$get.node.current) != null ? _this$get$node$curren : void 0;
+    return (_this$get$node$curren = (_this$get = this.get(id2)) == null ? void 0 : _this$get.node.current) != null ? _this$get$node$curren : void 0;
   }
 }
 const defaultPublicContext = {
@@ -5582,10 +6051,10 @@ function reducer(state, action2) {
         element
       } = action2;
       const {
-        id
+        id: id2
       } = element;
       const containers = new DroppableContainersMap(state.droppable.containers);
-      containers.set(id, element);
+      containers.set(id2, element);
       return __spreadProps(__spreadValues({}, state), {
         droppable: __spreadProps(__spreadValues({}, state.droppable), {
           containers
@@ -5594,16 +6063,16 @@ function reducer(state, action2) {
     }
     case Action.SetDroppableDisabled: {
       const {
-        id,
+        id: id2,
         key: key2,
         disabled
       } = action2;
-      const element = state.droppable.containers.get(id);
+      const element = state.droppable.containers.get(id2);
       if (!element || key2 !== element.key) {
         return state;
       }
       const containers = new DroppableContainersMap(state.droppable.containers);
-      containers.set(id, __spreadProps(__spreadValues({}, element), {
+      containers.set(id2, __spreadProps(__spreadValues({}, element), {
         disabled
       }));
       return __spreadProps(__spreadValues({}, state), {
@@ -5614,15 +6083,15 @@ function reducer(state, action2) {
     }
     case Action.UnregisterDroppable: {
       const {
-        id,
+        id: id2,
         key: key2
       } = action2;
-      const element = state.droppable.containers.get(id);
+      const element = state.droppable.containers.get(id2);
       if (!element || key2 !== element.key) {
         return state;
       }
       const containers = new DroppableContainersMap(state.droppable.containers);
-      containers.delete(id);
+      containers.delete(id2);
       return __spreadProps(__spreadValues({}, state), {
         droppable: __spreadProps(__spreadValues({}, state.droppable), {
           containers
@@ -5767,7 +6236,7 @@ var Status;
 const DndContext = /* @__PURE__ */ memo(function DndContext2(_ref) {
   var _sensorContext$curren, _dragOverlay$nodeRef$, _dragOverlay$rect, _over$rect;
   let _a = _ref, {
-    id,
+    id: id2,
     accessibility,
     autoScroll = true,
     children,
@@ -5788,8 +6257,8 @@ const DndContext = /* @__PURE__ */ memo(function DndContext2(_ref) {
   const store = useReducer(reducer, void 0, getInitialState);
   const [state, dispatch] = store;
   const [dispatchMonitorEvent, registerMonitorListener] = useDndMonitorProvider();
-  const [status, setStatus] = useState(Status.Uninitialized);
-  const isInitialized = status === Status.Initialized;
+  const [status2, setStatus] = useState(Status.Uninitialized);
+  const isInitialized = status2 === Status.Initialized;
   const {
     draggable: {
       active: activeId,
@@ -5818,7 +6287,7 @@ const DndContext = /* @__PURE__ */ memo(function DndContext2(_ref) {
   const [activeSensor, setActiveSensor] = useState(null);
   const [activatorEvent, setActivatorEvent] = useState(null);
   const latestProps = useLatestValue(props, Object.values(props));
-  const draggableDescribedById = useUniqueId("DndDescribedBy", id);
+  const draggableDescribedById = useUniqueId("DndDescribedBy", id2);
   const enabledDroppableContainers = useMemo(() => droppableContainers.getEnabled(), [droppableContainers]);
   const measuringConfiguration = useMeasuringConfiguration(measuring);
   const {
@@ -5926,11 +6395,11 @@ const DndContext = /* @__PURE__ */ memo(function DndContext2(_ref) {
         // otherwise they are frozen in time with the stale arguments
         context: sensorContext,
         onStart(initialCoordinates) {
-          const id2 = activeRef.current;
-          if (id2 == null) {
+          const id3 = activeRef.current;
+          if (id3 == null) {
             return;
           }
-          const draggableNode = draggableNodes.get(id2);
+          const draggableNode = draggableNodes.get(id3);
           if (!draggableNode) {
             return;
           }
@@ -5939,7 +6408,7 @@ const DndContext = /* @__PURE__ */ memo(function DndContext2(_ref) {
           } = latestProps.current;
           const event2 = {
             active: {
-              id: id2,
+              id: id3,
               data: draggableNode.data,
               rect: activeRects
             }
@@ -5950,7 +6419,7 @@ const DndContext = /* @__PURE__ */ memo(function DndContext2(_ref) {
             dispatch({
               type: Action.DragStart,
               initialCoordinates,
-              active: id2
+              active: id3
             });
             dispatchMonitorEvent({
               type: "onDragStart",
@@ -6053,10 +6522,10 @@ const DndContext = /* @__PURE__ */ memo(function DndContext2(_ref) {
   const activators = useCombineActivators(sensors, bindActivatorToSensorInstantiator);
   useSensorSetup(sensors);
   useIsomorphicLayoutEffect(() => {
-    if (activeNodeRect && status === Status.Initializing) {
+    if (activeNodeRect && status2 === Status.Initializing) {
       setStatus(Status.Initialized);
     }
-  }, [activeNodeRect, status]);
+  }, [activeNodeRect, status2]);
   useEffect(
     () => {
       const {
@@ -6234,7 +6703,7 @@ const defaultRole = "button";
 const ID_PREFIX$1 = "Droppable";
 function useDraggable(_ref) {
   let {
-    id,
+    id: id2,
     data,
     disabled = false,
     attributes
@@ -6254,30 +6723,30 @@ function useDraggable(_ref) {
     roleDescription = "draggable",
     tabIndex = 0
   } = attributes != null ? attributes : {};
-  const isDragging = (active == null ? void 0 : active.id) === id;
+  const isDragging = (active == null ? void 0 : active.id) === id2;
   const transform = useContext(isDragging ? ActiveDraggableContext : NullContext);
   const [node, setNodeRef] = useNodeRef();
   const [activatorNode, setActivatorNodeRef] = useNodeRef();
-  const listeners = useSyntheticListeners(activators, id);
+  const listeners = useSyntheticListeners(activators, id2);
   const dataRef = useLatestValue(data);
   useIsomorphicLayoutEffect(
     () => {
-      draggableNodes.set(id, {
-        id,
+      draggableNodes.set(id2, {
+        id: id2,
         key: key2,
         node,
         activatorNode,
         data: dataRef
       });
       return () => {
-        const node2 = draggableNodes.get(id);
+        const node2 = draggableNodes.get(id2);
         if (node2 && node2.key === key2) {
-          draggableNodes.delete(id);
+          draggableNodes.delete(id2);
         }
       };
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [draggableNodes, id]
+    [draggableNodes, id2]
   );
   const memoizedAttributes = useMemo(() => ({
     role,
@@ -6312,7 +6781,7 @@ function useDroppable(_ref) {
   let {
     data,
     disabled = false,
-    id,
+    id: id2,
     resizeObserverConfig
   } = _ref;
   const key2 = useUniqueId(ID_PREFIX$1$1);
@@ -6333,7 +6802,7 @@ function useDroppable(_ref) {
     updateMeasurementsFor,
     timeout: resizeObserverTimeout
   } = __spreadValues(__spreadValues({}, defaultResizeObserverConfig), resizeObserverConfig);
-  const ids2 = useLatestValue(updateMeasurementsFor != null ? updateMeasurementsFor : id);
+  const ids2 = useLatestValue(updateMeasurementsFor != null ? updateMeasurementsFor : id2);
   const handleResize = useCallback(
     () => {
       if (!resizeObserverConnected.current) {
@@ -6382,7 +6851,7 @@ function useDroppable(_ref) {
       dispatch({
         type: Action.RegisterDroppable,
         element: {
-          id,
+          id: id2,
           key: key2,
           disabled,
           node: nodeRef,
@@ -6393,27 +6862,27 @@ function useDroppable(_ref) {
       return () => dispatch({
         type: Action.UnregisterDroppable,
         key: key2,
-        id
+        id: id2
       });
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [id]
+    [id2]
   );
   useEffect(() => {
     if (disabled !== previous.current.disabled) {
       dispatch({
         type: Action.SetDroppableDisabled,
-        id,
+        id: id2,
         key: key2,
         disabled
       });
       previous.current.disabled = disabled;
     }
-  }, [id, key2, disabled, dispatch]);
+  }, [id2, key2, disabled, dispatch]);
   return {
     active,
     rect,
-    isOver: (over == null ? void 0 : over.id) === id,
+    isOver: (over == null ? void 0 : over.id) === id2,
     node: nodeRef,
     over,
     setNodeRef
@@ -6435,12 +6904,12 @@ function AnimationManager(_ref) {
       return;
     }
     const key2 = clonedChildren == null ? void 0 : clonedChildren.key;
-    const id = clonedChildren == null ? void 0 : clonedChildren.props.id;
-    if (key2 == null || id == null) {
+    const id2 = clonedChildren == null ? void 0 : clonedChildren.props.id;
+    if (key2 == null || id2 == null) {
       setClonedChildren(null);
       return;
     }
-    Promise.resolve(animation(id, element)).then(() => {
+    Promise.resolve(animation(id2, element)).then(() => {
       setClonedChildren(null);
     });
   }, [animation, clonedChildren, element]);
@@ -6580,11 +7049,11 @@ function useDropAnimation(_ref3) {
     droppableContainers,
     measuringConfiguration
   } = _ref3;
-  return useEvent((id, node) => {
+  return useEvent((id2, node) => {
     if (config === null) {
       return;
     }
-    const activeDraggable = draggableNodes.get(id);
+    const activeDraggable = draggableNodes.get(id2);
     if (!activeDraggable) {
       return;
     }
@@ -6607,7 +7076,7 @@ function useDropAnimation(_ref3) {
     scrollIntoViewIfNeeded(activeNode, measuringConfiguration.draggable.measure);
     return animation({
       active: {
-        id,
+        id: id2,
         data: activeDraggable.data,
         node: activeNode,
         rect: measuringConfiguration.draggable.measure(activeNode)
@@ -6686,14 +7155,14 @@ function createDefaultDropAnimation(options2) {
   };
 }
 let key = 0;
-function useKey(id) {
+function useKey(id2) {
   return useMemo(() => {
-    if (id == null) {
+    if (id2 == null) {
       return;
     }
     key++;
     return key;
-  }, [id]);
+  }, [id2]);
 }
 const DragOverlay = /* @__PURE__ */ React__default.memo((_ref) => {
   let {
@@ -6776,8 +7245,8 @@ function arrayMove(array, from, to) {
   return newArray;
 }
 function getSortedRects(items, rects) {
-  return items.reduce((accumulator, id, index2) => {
-    const rect = rects.get(id);
+  return items.reduce((accumulator, id2, index2) => {
+    const rect = rects.get(id2);
     if (rect) {
       accumulator[index2] = rect;
     }
@@ -6905,7 +7374,7 @@ const Context = /* @__PURE__ */ React__default.createContext({
 function SortableContext(_ref) {
   let {
     children,
-    id,
+    id: id2,
     items: userDefinedItems,
     strategy = rectSortingStrategy,
     disabled: disabledProp = false
@@ -6917,7 +7386,7 @@ function SortableContext(_ref) {
     over,
     measureDroppableContainers
   } = useDndContext();
-  const containerId = useUniqueId(ID_PREFIX, id);
+  const containerId = useUniqueId(ID_PREFIX, id2);
   const useDragOverlay = Boolean(dragOverlay.rect !== null);
   const items = useMemo(() => userDefinedItems.map((item2) => typeof item2 === "object" && "id" in item2 ? item2.id : item2), [userDefinedItems]);
   const isDragging = active != null;
@@ -6956,12 +7425,12 @@ function SortableContext(_ref) {
 }
 const defaultNewIndexGetter = (_ref) => {
   let {
-    id,
+    id: id2,
     items,
     activeIndex,
     overIndex
   } = _ref;
-  return arrayMove(items, activeIndex, overIndex).indexOf(id);
+  return arrayMove(items, activeIndex, overIndex).indexOf(id2);
 };
 const defaultAnimateLayoutChanges = (_ref2) => {
   let {
@@ -7044,7 +7513,7 @@ function useSortable(_ref) {
     disabled: localDisabled,
     data: customData,
     getNewIndex = defaultNewIndexGetter,
-    id,
+    id: id2,
     strategy: localStrategy,
     resizeObserverConfig,
     transition = defaultTransition
@@ -7061,7 +7530,7 @@ function useSortable(_ref) {
     strategy: globalStrategy
   } = useContext(Context);
   const disabled = normalizeLocalDisabled(localDisabled, globalDisabled);
-  const index2 = items.indexOf(id);
+  const index2 = items.indexOf(id2);
   const data = useMemo(() => __spreadValues({
     sortable: {
       containerId,
@@ -7069,14 +7538,14 @@ function useSortable(_ref) {
       items
     }
   }, customData), [containerId, customData, index2, items]);
-  const itemsAfterCurrentSortable = useMemo(() => items.slice(items.indexOf(id)), [items, id]);
+  const itemsAfterCurrentSortable = useMemo(() => items.slice(items.indexOf(id2)), [items, id2]);
   const {
     rect,
     node,
     isOver,
     setNodeRef: setDroppableNodeRef
   } = useDroppable({
-    id,
+    id: id2,
     data,
     disabled: disabled.droppable,
     resizeObserverConfig: __spreadValues({
@@ -7095,7 +7564,7 @@ function useSortable(_ref) {
     setActivatorNodeRef,
     transform
   } = useDraggable({
-    id,
+    id: id2,
     data,
     attributes: __spreadValues(__spreadValues({}, defaultAttributes$1), userDefinedAttributes),
     disabled: disabled.draggable
@@ -7114,7 +7583,7 @@ function useSortable(_ref) {
     index: index2
   }) : null;
   const newIndex = isValidIndex(activeIndex) && isValidIndex(overIndex) ? getNewIndex({
-    id,
+    id: id2,
     items,
     activeIndex,
     overIndex
@@ -7132,7 +7601,7 @@ function useSortable(_ref) {
     containerId,
     isDragging,
     isSorting,
-    id,
+    id: id2,
     index: index2,
     items,
     newIndex: previous.current.newIndex,
@@ -7239,7 +7708,7 @@ const action = "_action_7uv5l_56";
 const itemTitle = "_itemTitle_7uv5l_73";
 const itemCollapse = "_itemCollapse_7uv5l_79";
 const itemChildren = "_itemChildren_7uv5l_100";
-const styles$6 = {
+const styles$7 = {
   item: item$2,
   itemContent,
   itemActions,
@@ -7347,8 +7816,8 @@ function ElementList({
     setActiveId("");
     setIsLayerItemDragging(false);
   };
-  const getComponentById = (id) => {
-    return components2.find((component) => component.id === id);
+  const getComponentById = (id2) => {
+    return components2.find((component) => component.id === id2);
   };
   const isDraggingLevel = components2.some((block) => activeId === block.id);
   return /* @__PURE__ */ React__default.createElement("div", { ref: contentRef }, /* @__PURE__ */ React__default.createElement(
@@ -7431,7 +7900,7 @@ function SortableComponentItem({
   const isVoid = BlockManager.getBlockByType(component.block.type).void;
   const hasBlockChildren = !isVoid && component.block.children.every((child) => NodeUtils.isBlockElement(child));
   const hideWhenDragging = isDraggingLevel && !isCurrentDragging;
-  return /* @__PURE__ */ React__default.createElement("div", { ref: setNodeRef, style, className: styles$6.sortableItem }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement("div", { ref: setNodeRef, style, className: styles$7.sortableItem }, /* @__PURE__ */ React__default.createElement(
     ComponentItem,
     {
       component,
@@ -7441,7 +7910,7 @@ function SortableComponentItem({
       onToggleCollapse,
       dragHandleProps: __spreadValues(__spreadValues({}, attributes), listeners)
     }
-  ), hasBlockChildren && !isCollapsed && !isDragging && !hideWhenDragging && /* @__PURE__ */ React__default.createElement("div", { className: styles$6.itemChildren }, /* @__PURE__ */ React__default.createElement(
+  ), hasBlockChildren && !isCollapsed && !isDragging && !hideWhenDragging && /* @__PURE__ */ React__default.createElement("div", { className: styles$7.itemChildren }, /* @__PURE__ */ React__default.createElement(
     ElementList,
     {
       blocks: component.block.children,
@@ -7545,11 +8014,11 @@ function ComponentItem({
     setHoverNodePath(null);
   };
   const itemClassName = useMemo(() => {
-    const classes = [styles$6.item];
+    const classes = [styles$7.item];
     if (isHovered)
-      classes.push(styles$6.itemHovered);
+      classes.push(styles$7.itemHovered);
     if (isSelected)
-      classes.push(styles$6.itemSelected);
+      classes.push(styles$7.itemSelected);
     return classes.join(" ");
   }, [isHovered, isSelected]);
   return /* @__PURE__ */ React__default.createElement(
@@ -7560,10 +8029,10 @@ function ComponentItem({
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave
     },
-    /* @__PURE__ */ React__default.createElement("div", { className: styles$6.itemContent }, /* @__PURE__ */ React__default.createElement("div", { className: styles$6.itemTitle }, /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React__default.createElement("div", { className: styles$7.itemContent }, /* @__PURE__ */ React__default.createElement("div", { className: styles$7.itemTitle }, /* @__PURE__ */ React__default.createElement(
       "div",
       {
-        className: styles$6.itemCollapse,
+        className: styles$7.itemCollapse,
         style: { opacity: hasBlockChildren ? 1 : 0 },
         onClick: handleCollapseClick
       },
@@ -7577,28 +8046,28 @@ function ComponentItem({
         },
         collapseIcon
       )
-    ), /* @__PURE__ */ React__default.createElement("div", { className: styles$6.itemLabelWrapper }, /* @__PURE__ */ React__default.createElement(
+    ), /* @__PURE__ */ React__default.createElement("div", { className: styles$7.itemLabelWrapper }, /* @__PURE__ */ React__default.createElement(
       SharedComponents.ElementIcon,
       {
         type: component.block.type,
         width: 16,
         height: 16
       }
-    ), /* @__PURE__ */ React__default.createElement("div", { className: styles$6.itemLabel }, displayLabel))), /* @__PURE__ */ React__default.createElement(
+    ), /* @__PURE__ */ React__default.createElement("div", { className: styles$7.itemLabel }, displayLabel))), /* @__PURE__ */ React__default.createElement(
       "div",
       {
-        className: styles$6.itemActions,
+        className: styles$7.itemActions,
         onClick: (e) => e.stopPropagation()
       },
-      /* @__PURE__ */ React__default.createElement("div", { className: styles$6.action, onClick: onCopy }, /* @__PURE__ */ React__default.createElement(IconCopy, null)),
-      /* @__PURE__ */ React__default.createElement("div", { className: styles$6.action, onClick: onRemove }, /* @__PURE__ */ React__default.createElement(IconDelete, null)),
+      /* @__PURE__ */ React__default.createElement("div", { className: styles$7.action, onClick: onCopy }, /* @__PURE__ */ React__default.createElement(IconCopy, null)),
+      /* @__PURE__ */ React__default.createElement("div", { className: styles$7.action, onClick: onRemove }, /* @__PURE__ */ React__default.createElement(IconDelete, null)),
       /* @__PURE__ */ React__default.createElement(
         "div",
         __spreadValues({
           style: {
             cursor: "grab"
           },
-          className: styles$6.action
+          className: styles$7.action
         }, dragHandleProps),
         /* @__PURE__ */ React__default.createElement("svg", { viewBox: "0 0 20 20", width: "12" }, /* @__PURE__ */ React__default.createElement("path", { d: "M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z" }))
       )
@@ -7761,7 +8230,7 @@ function HeaderFooterItem({ element }) {
   return /* @__PURE__ */ React__default.createElement(
     "div",
     {
-      className: styles$6.item,
+      className: styles$7.item,
       onClick,
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
@@ -7777,28 +8246,28 @@ function HeaderFooterItem({ element }) {
     /* @__PURE__ */ React__default.createElement(
       "div",
       {
-        className: styles$6.itemContent,
+        className: styles$7.itemContent,
         style: {
           backgroundColor: "transparent",
           padding: "8px 10px"
         }
       },
-      /* @__PURE__ */ React__default.createElement("div", { className: styles$6.itemTitle }, /* @__PURE__ */ React__default.createElement("div", { className: styles$6.itemLabelWrapper }, /* @__PURE__ */ React__default.createElement(
+      /* @__PURE__ */ React__default.createElement("div", { className: styles$7.itemTitle }, /* @__PURE__ */ React__default.createElement("div", { className: styles$7.itemLabelWrapper }, /* @__PURE__ */ React__default.createElement(
         SharedComponents.ElementIcon,
         {
           type: element.type,
           width: 16,
           height: 16
         }
-      ), /* @__PURE__ */ React__default.createElement("div", { className: styles$6.itemLabel }, label))),
+      ), /* @__PURE__ */ React__default.createElement("div", { className: styles$7.itemLabel }, label))),
       /* @__PURE__ */ React__default.createElement(
         "div",
         {
-          className: styles$6.itemActions,
+          className: styles$7.itemActions,
           style: { opacity: 1 },
           onClick: (e) => e.stopPropagation()
         },
-        /* @__PURE__ */ React__default.createElement("div", { className: styles$6.action }, /* @__PURE__ */ React__default.createElement(
+        /* @__PURE__ */ React__default.createElement("div", { className: styles$7.action }, /* @__PURE__ */ React__default.createElement(
           "svg",
           {
             viewBox: "0 0 1024 1024",
@@ -7821,6 +8290,7 @@ const BlockSideBar = ({ height }) => {
   const { selectedNode } = useSelectedNode();
   const [activeTab, setActiveTab] = useState("Content");
   const lastActiveTab = useRef(activeTab);
+  const AiAgent = SharedComponents.AiAgent;
   useEffect(() => {
     if (activeTab === "Style" && !selectedNodePath) {
       setSelectedNodePath([0]);
@@ -7930,6 +8400,22 @@ const BlockSideBar = ({ height }) => {
           },
           /* @__PURE__ */ React__default.createElement(BlockLayer, null)
         )
+      ),
+      AiAgent && /* @__PURE__ */ React__default.createElement(
+        Tabs.TabPane,
+        {
+          destroyOnHide: true,
+          key: "AI-Agent",
+          className: "easy-email-pro-block-sidebar-ai-agent",
+          title: /* @__PURE__ */ React__default.createElement("div", { className: "easy-email-pro-block-sidebar-ai-agent-title" }, t("AI"))
+        },
+        /* @__PURE__ */ React__default.createElement(
+          SharedComponents.FullHeightOverlayScrollbars,
+          {
+            height: `calc(${height} - 60px)`
+          },
+          /* @__PURE__ */ React__default.createElement(AiAgent, null)
+        )
       )
     ), !compact && /* @__PURE__ */ React__default.createElement(
       ConfigurationDrawer,
@@ -7940,6 +8426,7 @@ const BlockSideBar = ({ height }) => {
     ), /* @__PURE__ */ React__default.createElement("style", null, stylesText$1));
   }, [
     activeTab,
+    AiAgent,
     compact,
     height,
     onChange,
@@ -8393,6 +8880,29 @@ const Controller = () => {
     ))), /* @__PURE__ */ React__default.createElement("span", { className: "controller-item", "data-enable": zoom > 50 }, /* @__PURE__ */ React__default.createElement(Tooltip, { position: "top", content: t("Zoom out") }, /* @__PURE__ */ React__default.createElement(IconMinus, { onClick: onReduce })))))
   ));
 };
+const VIEWPORT_SWITCH_HALF_WIDTH = 140;
+const viewportGroupStyle = {
+  display: "inline-flex",
+  gap: 2,
+  padding: 2,
+  border: "1px solid var(--color-border-2)",
+  borderRadius: 8,
+  background: "var(--color-bg-2)",
+  boxShadow: "none"
+};
+const getViewportButtonStyle = (active) => ({
+  minWidth: 132,
+  height: 32,
+  padding: "0 18px",
+  border: 0,
+  borderRadius: 6,
+  background: active ? "var(--color-primary-light-1)" : "transparent",
+  color: active ? "rgb(var(--primary-6))" : "var(--color-text-2)",
+  fontSize: 13,
+  fontWeight: active ? 600 : 500,
+  lineHeight: "32px",
+  boxShadow: "none"
+});
 const TabHeader = (props) => {
   const activeTab = useActiveTab();
   const { setActiveTab } = useEditorActions();
@@ -8403,7 +8913,8 @@ const TabHeader = (props) => {
     [setActiveTab]
   );
   const isMobileActive = activeTab === ActiveTabKeys.MOBILE;
-  const grid = "2vw";
+  const desktopViewportButtonClassName = `easy-email-pro-editor-tabs-viewport-button${!isMobileActive ? " easy-email-pro-editor-tabs-viewport-button-active" : ""}`;
+  const mobileViewportButtonClassName = `easy-email-pro-editor-tabs-viewport-button${isMobileActive ? " easy-email-pro-editor-tabs-viewport-button-active" : ""}`;
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
     "div",
     {
@@ -8420,46 +8931,55 @@ const TabHeader = (props) => {
     /* @__PURE__ */ React__default.createElement(
       "div",
       {
-        style: { position: "absolute", left: 0, width: `calc(50% - 125px)` }
+        style: {
+          position: "absolute",
+          left: 0,
+          width: `calc(50% - ${VIEWPORT_SWITCH_HALF_WIDTH}px)`
+        }
       },
       props.left
     ),
-    /* @__PURE__ */ React__default.createElement("div", { style: { textAlign: "center" } }, /* @__PURE__ */ React__default.createElement(Button$2.Group, null, /* @__PURE__ */ React__default.createElement(
-      Button$2,
+    /* @__PURE__ */ React__default.createElement(
+      "div",
       {
-        style: {
-          paddingLeft: grid,
-          paddingRight: grid,
-          borderColor: !isMobileActive ? void 0 : "#000",
-          color: !isMobileActive ? void 0 : "#000",
-          borderRightColor: !isMobileActive ? void 0 : "transparent"
-        },
-        type: "outline",
-        onClick: () => onChangeTab(ActiveTabKeys.DESKTOP)
+        className: "easy-email-pro-editor-tabs-viewport-switch",
+        style: { textAlign: "center" }
       },
-      /* @__PURE__ */ React__default.createElement(Space, null, /* @__PURE__ */ React__default.createElement(IconFont, { iconName: "icon-desktop" }), " ", t("desktop"))
-    ), /* @__PURE__ */ React__default.createElement(
-      Button$2,
-      {
-        style: {
-          paddingLeft: grid,
-          paddingRight: grid,
-          borderColor: isMobileActive ? void 0 : "#000",
-          color: isMobileActive ? void 0 : "#000",
-          borderLeftColor: isMobileActive ? void 0 : "transparent"
+      /* @__PURE__ */ React__default.createElement(
+        Button$2.Group,
+        {
+          className: "easy-email-pro-editor-tabs-viewport-group",
+          style: viewportGroupStyle
         },
-        type: "outline",
-        onClick: () => onChangeTab(ActiveTabKeys.MOBILE)
-      },
-      /* @__PURE__ */ React__default.createElement(Space, null, /* @__PURE__ */ React__default.createElement(IconFont, { iconName: "icon-mobile" }), " ", t("mobile"))
-    ))),
+        /* @__PURE__ */ React__default.createElement(
+          Button$2,
+          {
+            className: desktopViewportButtonClassName,
+            style: getViewportButtonStyle(!isMobileActive),
+            type: "outline",
+            onClick: () => onChangeTab(ActiveTabKeys.DESKTOP)
+          },
+          /* @__PURE__ */ React__default.createElement(Space, { size: 8 }, /* @__PURE__ */ React__default.createElement(IconFont, { iconName: "icon-desktop" }), " ", t("desktop"))
+        ),
+        /* @__PURE__ */ React__default.createElement(
+          Button$2,
+          {
+            className: mobileViewportButtonClassName,
+            style: getViewportButtonStyle(isMobileActive),
+            type: "outline",
+            onClick: () => onChangeTab(ActiveTabKeys.MOBILE)
+          },
+          /* @__PURE__ */ React__default.createElement(Space, { size: 8 }, /* @__PURE__ */ React__default.createElement(IconFont, { iconName: "icon-mobile" }), " ", t("mobile"))
+        )
+      )
+    ),
     /* @__PURE__ */ React__default.createElement(
       "div",
       {
         style: {
           position: "absolute",
           right: 0,
-          width: `calc(50% - 125px)`,
+          width: `calc(50% - ${VIEWPORT_SWITCH_HALF_WIDTH}px)`,
           textAlign: "right"
         }
       },
@@ -8468,7 +8988,7 @@ const TabHeader = (props) => {
   ));
 };
 const hoverUnderline = "_hoverUnderline_8d8dl_1";
-const styles$5 = {
+const styles$6 = {
   hoverUnderline
 };
 function BlockPaths({
@@ -8530,7 +9050,7 @@ function BlockPaths({
           /* @__PURE__ */ React__default.createElement(
             "span",
             {
-              className: styles$5.hoverUnderline,
+              className: styles$6.hoverUnderline,
               onClick: () => setSelectedNodePath(item2.path)
             },
             item2.name
@@ -9221,7 +9741,7 @@ const UniversalElementEditorDrawer = ({ children }) => {
   ]);
 };
 const imageMap = /* @__PURE__ */ new Map();
-function getImageDimensions(urls) {
+function getImageDimensions$1(urls) {
   return __async(this, null, function* () {
     const result = {};
     const list = Array.isArray(urls) ? urls : [];
@@ -9260,7 +9780,7 @@ const useAmpImageDimensions = () => {
   const fetchImageDimensions = useCallback((urls) => __async(void 0, null, function* () {
     setInited(false);
     try {
-      const dimensions = yield getImageDimensions(urls);
+      const dimensions = yield getImageDimensions$1(urls);
       setImageDimensions(dimensions);
       setInited(true);
     } catch (error2) {
@@ -9451,7 +9971,7 @@ var defaultAttributes = {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Icon = forwardRef(
+const Icon$1 = forwardRef(
   (_a, ref) => {
     var _b = _a, {
       color: color2 = "currentColor",
@@ -9498,7 +10018,7 @@ const createLucideIcon = (iconName, iconNode) => {
   const Component2 = forwardRef(
     (_a, ref) => {
       var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-      return createElement(Icon, __spreadValues({
+      return createElement(Icon$1, __spreadValues({
         ref,
         iconNode,
         className: mergeClasses(`lucide-${toKebabCase(iconName)}`, className)
@@ -9514,43 +10034,55 @@ const createLucideIcon = (iconName, iconNode) => {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$o = [
+const __iconNode$q = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["polyline", { points: "12 6 12 12 16 14", key: "68esgv" }]
 ];
-const Clock = createLucideIcon("Clock", __iconNode$o);
+const Clock = createLucideIcon("Clock", __iconNode$q);
 /**
  * @license lucide-react v0.483.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$n = [
+const __iconNode$p = [
   ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
   ["path", { d: "M12 3v18", key: "108xh3" }]
 ];
-const Columns2 = createLucideIcon("Columns2", __iconNode$n);
+const Columns2 = createLucideIcon("Columns2", __iconNode$p);
 /**
  * @license lucide-react v0.483.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$m = [
+const __iconNode$o = [
+  ["circle", { cx: "12", cy: "12", r: "1", key: "41hilf" }],
+  ["circle", { cx: "19", cy: "12", r: "1", key: "1wjl8i" }],
+  ["circle", { cx: "5", cy: "12", r: "1", key: "1pcz8c" }]
+];
+const Ellipsis = createLucideIcon("Ellipsis", __iconNode$o);
+/**
+ * @license lucide-react v0.483.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$n = [
   ["path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z", key: "1rqfz7" }],
   ["path", { d: "M14 2v4a2 2 0 0 0 2 2h4", key: "tnqrlb" }],
   ["path", { d: "M10 9H8", key: "b1mrlr" }],
   ["path", { d: "M16 13H8", key: "t4e002" }],
   ["path", { d: "M16 17H8", key: "z1uh3a" }]
 ];
-const FileText = createLucideIcon("FileText", __iconNode$m);
+const FileText = createLucideIcon("FileText", __iconNode$n);
 /**
  * @license lucide-react v0.483.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$l = [
+const __iconNode$m = [
   ["circle", { cx: "9", cy: "12", r: "1", key: "1vctgf" }],
   ["circle", { cx: "9", cy: "5", r: "1", key: "hp0tcf" }],
   ["circle", { cx: "9", cy: "19", r: "1", key: "fkjjf6" }],
@@ -9558,151 +10090,151 @@ const __iconNode$l = [
   ["circle", { cx: "15", cy: "5", r: "1", key: "19l28e" }],
   ["circle", { cx: "15", cy: "19", r: "1", key: "f4zoj3" }]
 ];
-const GripVertical = createLucideIcon("GripVertical", __iconNode$l);
+const GripVertical = createLucideIcon("GripVertical", __iconNode$m);
 /**
  * @license lucide-react v0.483.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$k = [
+const __iconNode$l = [
   ["path", { d: "M4 12h8", key: "17cfdx" }],
   ["path", { d: "M4 18V6", key: "1rz3zl" }],
   ["path", { d: "M12 18V6", key: "zqpxq5" }],
   ["path", { d: "m17 12 3-2v8", key: "1hhhft" }]
 ];
-const Heading1 = createLucideIcon("Heading1", __iconNode$k);
+const Heading1 = createLucideIcon("Heading1", __iconNode$l);
 /**
  * @license lucide-react v0.483.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$j = [
+const __iconNode$k = [
   ["path", { d: "M4 12h8", key: "17cfdx" }],
   ["path", { d: "M4 18V6", key: "1rz3zl" }],
   ["path", { d: "M12 18V6", key: "zqpxq5" }],
   ["path", { d: "M21 18h-4c0-4 4-3 4-6 0-1.5-2-2.5-4-1", key: "9jr5yi" }]
 ];
-const Heading2 = createLucideIcon("Heading2", __iconNode$j);
+const Heading2 = createLucideIcon("Heading2", __iconNode$k);
 /**
  * @license lucide-react v0.483.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$i = [
+const __iconNode$j = [
   ["path", { d: "M4 12h8", key: "17cfdx" }],
   ["path", { d: "M4 18V6", key: "1rz3zl" }],
   ["path", { d: "M12 18V6", key: "zqpxq5" }],
   ["path", { d: "M17.5 10.5c1.7-1 3.5 0 3.5 1.5a2 2 0 0 1-2 2", key: "68ncm8" }],
   ["path", { d: "M17 17.5c2 1.5 4 .3 4-1.5a2 2 0 0 0-2-2", key: "1ejuhz" }]
 ];
-const Heading3 = createLucideIcon("Heading3", __iconNode$i);
+const Heading3 = createLucideIcon("Heading3", __iconNode$j);
 /**
  * @license lucide-react v0.483.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$h = [
+const __iconNode$i = [
   ["path", { d: "M12 18V6", key: "zqpxq5" }],
   ["path", { d: "M17 10v3a1 1 0 0 0 1 1h3", key: "tj5zdr" }],
   ["path", { d: "M21 10v8", key: "1kdml4" }],
   ["path", { d: "M4 12h8", key: "17cfdx" }],
   ["path", { d: "M4 18V6", key: "1rz3zl" }]
 ];
-const Heading4 = createLucideIcon("Heading4", __iconNode$h);
+const Heading4 = createLucideIcon("Heading4", __iconNode$i);
 /**
  * @license lucide-react v0.483.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$g = [
+const __iconNode$h = [
   ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2", key: "1m3agn" }],
   ["circle", { cx: "9", cy: "9", r: "2", key: "af1f0g" }],
   ["path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21", key: "1xmnt7" }]
 ];
-const Image$5 = createLucideIcon("Image", __iconNode$g);
+const Image$5 = createLucideIcon("Image", __iconNode$h);
 /**
  * @license lucide-react v0.483.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$f = [
+const __iconNode$g = [
   ["rect", { width: "20", height: "20", x: "2", y: "2", rx: "5", ry: "5", key: "2e1cvw" }],
   ["path", { d: "M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z", key: "9exkf1" }],
   ["line", { x1: "17.5", x2: "17.51", y1: "6.5", y2: "6.5", key: "r4j83e" }]
 ];
-const Instagram = createLucideIcon("Instagram", __iconNode$f);
+const Instagram = createLucideIcon("Instagram", __iconNode$g);
 /**
  * @license lucide-react v0.483.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$e = [
+const __iconNode$f = [
   ["rect", { width: "7", height: "7", x: "3", y: "3", rx: "1", key: "1g98yp" }],
   ["rect", { width: "7", height: "7", x: "14", y: "3", rx: "1", key: "6d4xhi" }],
   ["rect", { width: "7", height: "7", x: "14", y: "14", rx: "1", key: "nxv5o0" }],
   ["rect", { width: "7", height: "7", x: "3", y: "14", rx: "1", key: "1bb6yr" }]
 ];
-const LayoutGrid = createLucideIcon("LayoutGrid", __iconNode$e);
+const LayoutGrid = createLucideIcon("LayoutGrid", __iconNode$f);
 /**
  * @license lucide-react v0.483.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$d = [
+const __iconNode$e = [
   ["rect", { width: "18", height: "7", x: "3", y: "3", rx: "1", key: "f1a2em" }],
   ["rect", { width: "9", height: "7", x: "3", y: "14", rx: "1", key: "jqznyg" }],
   ["rect", { width: "5", height: "7", x: "16", y: "14", rx: "1", key: "q5h2i8" }]
 ];
-const LayoutTemplate = createLucideIcon("LayoutTemplate", __iconNode$d);
+const LayoutTemplate = createLucideIcon("LayoutTemplate", __iconNode$e);
 /**
  * @license lucide-react v0.483.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$c = [
+const __iconNode$d = [
   ["path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71", key: "1cjeqo" }],
   ["path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71", key: "19qd67" }]
 ];
-const Link$2 = createLucideIcon("Link", __iconNode$c);
+const Link$2 = createLucideIcon("Link", __iconNode$d);
 /**
  * @license lucide-react v0.483.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$b = [
+const __iconNode$c = [
   ["rect", { width: "20", height: "16", x: "2", y: "4", rx: "2", key: "18n3k1" }],
   ["path", { d: "m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7", key: "1ocrg3" }]
 ];
-const Mail = createLucideIcon("Mail", __iconNode$b);
+const Mail = createLucideIcon("Mail", __iconNode$c);
 /**
  * @license lucide-react v0.483.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$a = [
+const __iconNode$b = [
   ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
   ["path", { d: "M3 9h18", key: "1pudct" }],
   ["path", { d: "M9 21V9", key: "1oto5p" }]
 ];
-const PanelsTopLeft = createLucideIcon("PanelsTopLeft", __iconNode$a);
+const PanelsTopLeft = createLucideIcon("PanelsTopLeft", __iconNode$b);
 /**
  * @license lucide-react v0.483.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$9 = [
+const __iconNode$a = [
   ["rect", { width: "5", height: "5", x: "3", y: "3", rx: "1", key: "1tu5fj" }],
   ["rect", { width: "5", height: "5", x: "16", y: "3", rx: "1", key: "1v8r4q" }],
   ["rect", { width: "5", height: "5", x: "3", y: "16", rx: "1", key: "1x03jg" }],
@@ -9716,7 +10248,18 @@ const __iconNode$9 = [
   ["path", { d: "M21 12v.01", key: "1lwtk9" }],
   ["path", { d: "M12 21v-1", key: "1880an" }]
 ];
-const QrCode = createLucideIcon("QrCode", __iconNode$9);
+const QrCode = createLucideIcon("QrCode", __iconNode$a);
+/**
+ * @license lucide-react v0.483.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$9 = [
+  ["path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8", key: "1357e3" }],
+  ["path", { d: "M3 3v5h5", key: "1xhq8a" }]
+];
+const RotateCcw = createLucideIcon("RotateCcw", __iconNode$9);
 /**
  * @license lucide-react v0.483.0 - ISC
  *
@@ -10286,8 +10829,8 @@ var OverlayScrollbars$1 = { exports: {} };
            * Gets the CancelAnimationFrame method or it's corresponding polyfill.
            * @returns {*|Function} The CancelAnimationFrame method or it's corresponding polyfill.
            */
-          cAF: bind2(VENDORS._jsAPI, 0, "cancelAnimationFrame", false, function(id) {
-            return window2.clearTimeout(id);
+          cAF: bind2(VENDORS._jsAPI, 0, "cancelAnimationFrame", false, function(id2) {
+            return window2.clearTimeout(id2);
           }),
           /**
            * Gets the current time.
@@ -15253,11 +15796,13 @@ function mergeHostClassNames(osInstance, className) {
     host.className = `${osClassNames} ${className || ""}`;
   }
 }
-const FullHeightOverlayScrollbars = (props) => {
+const FullHeightOverlayScrollbars = React__default.forwardRef((props, ref) => {
   const Com = OverlayScrollbarsComponent;
   return /* @__PURE__ */ React__default.createElement(
     Com,
     {
+      ref,
+      className: props.className,
       options: { scrollbars: { autoHide: "scroll" } },
       style: {
         maxHeight: get(props, "maxHeight"),
@@ -15266,7 +15811,8 @@ const FullHeightOverlayScrollbars = (props) => {
     },
     props.children
   );
-};
+});
+FullHeightOverlayScrollbars.displayName = "FullHeightOverlayScrollbars";
 const HoveringToolbar$1 = "";
 const getElementPageLayout = (params) => {
   const { edge = 20 } = params;
@@ -20352,9 +20898,9 @@ class InterceptorManager {
    *
    * @returns {Boolean} `true` if the interceptor was removed, `false` otherwise
    */
-  eject(id) {
-    if (this.handlers[id]) {
-      this.handlers[id] = null;
+  eject(id2) {
+    if (this.handlers[id2]) {
+      this.handlers[id2] = null;
     }
   }
   /**
@@ -20570,8 +21116,8 @@ const defaults = {
     FormData: platform.classes.FormData,
     Blob: platform.classes.Blob
   },
-  validateStatus: function validateStatus(status) {
-    return status >= 200 && status < 300;
+  validateStatus: function validateStatus(status2) {
+    return status2 >= 200 && status2 < 300;
   },
   headers: {
     common: {
@@ -21189,22 +21735,22 @@ const adapters = {
     const rejectedReasons = {};
     for (let i = 0; i < length2; i++) {
       nameOrAdapter = adapters2[i];
-      let id;
+      let id2;
       adapter = nameOrAdapter;
       if (!isResolvedHandle(nameOrAdapter)) {
-        adapter = knownAdapters[(id = String(nameOrAdapter)).toLowerCase()];
+        adapter = knownAdapters[(id2 = String(nameOrAdapter)).toLowerCase()];
         if (adapter === void 0) {
-          throw new AxiosError(`Unknown adapter '${id}'`);
+          throw new AxiosError(`Unknown adapter '${id2}'`);
         }
       }
       if (adapter) {
         break;
       }
-      rejectedReasons[id || "#" + i] = adapter;
+      rejectedReasons[id2 || "#" + i] = adapter;
     }
     if (!adapter) {
       const reasons = Object.entries(rejectedReasons).map(
-        ([id, state]) => `adapter ${id} ` + (state === false ? "is not supported by the environment" : "is not available in the build")
+        ([id2, state]) => `adapter ${id2} ` + (state === false ? "is not supported by the environment" : "is not available in the build")
       );
       let s = length2 ? reasons.length > 1 ? "since :\n" + reasons.map(renderReason).join("\n") : " " + renderReason(reasons[0]) : "as no adapter specified";
       throw new AxiosError(
@@ -22561,9 +23107,9 @@ function requireOutlayer() {
         }
         this.options = utils2.extend({}, this.constructor.defaults);
         this.option(options2);
-        var id = ++GUID;
-        this.element.outlayerGUID = id;
-        instances[id] = this;
+        var id2 = ++GUID;
+        this.element.outlayerGUID = id2;
+        instances[id2] = this;
         this._create();
         var isInitLayout = this._getOption("initLayout");
         if (isInitLayout) {
@@ -22977,8 +23523,8 @@ function requireOutlayer() {
           item2.destroy();
         });
         this.unbindResize();
-        var id = this.element.outlayerGUID;
-        delete instances[id];
+        var id2 = this.element.outlayerGUID;
+        delete instances[id2];
         delete this.element.outlayerGUID;
         if (jQuery) {
           jQuery.removeData(this.element, this.constructor.namespace);
@@ -22986,8 +23532,8 @@ function requireOutlayer() {
       };
       Outlayer.data = function(elem) {
         elem = utils2.getQueryElement(elem);
-        var id = elem && elem.outlayerGUID;
-        return id && instances[id];
+        var id2 = elem && elem.outlayerGUID;
+        return id2 && instances[id2];
       };
       Outlayer.create = function(namespace, options2) {
         var Layout2 = subclass(Outlayer);
@@ -23960,18 +24506,18 @@ var elementUtils = function(options2) {
 var listenerHandler = function(idHandler2) {
   var eventListeners = {};
   function getListeners(element) {
-    var id = idHandler2.get(element);
-    if (id === void 0) {
+    var id2 = idHandler2.get(element);
+    if (id2 === void 0) {
       return [];
     }
-    return eventListeners[id] || [];
+    return eventListeners[id2] || [];
   }
   function addListener(element, listener) {
-    var id = idHandler2.get(element);
-    if (!eventListeners[id]) {
-      eventListeners[id] = [];
+    var id2 = idHandler2.get(element);
+    if (!eventListeners[id2]) {
+      eventListeners[id2] = [];
     }
-    eventListeners[id].push(listener);
+    eventListeners[id2].push(listener);
   }
   function removeListener(element, listener) {
     var listeners = getListeners(element);
@@ -24020,9 +24566,9 @@ var idHandler = function(options2) {
     if (!state) {
       throw new Error("setId required the element to have a resize detection state.");
     }
-    var id = idGenerator2.generate();
-    state.id = id;
-    return id;
+    var id2 = idGenerator2.generate();
+    state.id = id2;
+    return id2;
   }
   return {
     get: getId,
@@ -24970,15 +25516,15 @@ var elementResizeDetector = function(options2) {
         stateHandler.initState(element);
         idHandler2.set(element);
       }
-      var id = idHandler2.get(element);
-      debug && reporter2.log("Attaching listener to element", id, element);
+      var id2 = idHandler2.get(element);
+      debug && reporter2.log("Attaching listener to element", id2, element);
       if (!elementUtils2.isDetectable(element)) {
-        debug && reporter2.log(id, "Not detectable.");
+        debug && reporter2.log(id2, "Not detectable.");
         if (elementUtils2.isBusy(element)) {
-          debug && reporter2.log(id, "System busy making it detectable");
+          debug && reporter2.log(id2, "System busy making it detectable");
           addListener(callOnAdd, element, listener);
-          onReadyCallbacks[id] = onReadyCallbacks[id] || [];
-          onReadyCallbacks[id].push(function onReady() {
+          onReadyCallbacks[id2] = onReadyCallbacks[id2] || [];
+          onReadyCallbacks[id2].push(function onReady() {
             elementsReady++;
             if (elementsReady === elements2.length) {
               onReadyCallback();
@@ -24986,10 +25532,10 @@ var elementResizeDetector = function(options2) {
           });
           return;
         }
-        debug && reporter2.log(id, "Making detectable...");
+        debug && reporter2.log(id2, "Making detectable...");
         elementUtils2.markBusy(element, true);
         return detectionStrategy.makeDetectable({ debug, important: importantCssRules }, element, function onElementDetectable(element2) {
-          debug && reporter2.log(id, "onElementDetectable");
+          debug && reporter2.log(id2, "onElementDetectable");
           if (stateHandler.getState(element2)) {
             elementUtils2.markAsDetectable(element2);
             elementUtils2.markBusy(element2, false);
@@ -25003,22 +25549,22 @@ var elementResizeDetector = function(options2) {
                 onResizeCallback(element2);
               }
             }
-            if (onReadyCallbacks[id]) {
-              forEach(onReadyCallbacks[id], function(callback) {
+            if (onReadyCallbacks[id2]) {
+              forEach(onReadyCallbacks[id2], function(callback) {
                 callback();
               });
             }
           } else {
-            debug && reporter2.log(id, "Element uninstalled before being detectable.");
+            debug && reporter2.log(id2, "Element uninstalled before being detectable.");
           }
-          delete onReadyCallbacks[id];
+          delete onReadyCallbacks[id2];
           elementsReady++;
           if (elementsReady === elements2.length) {
             onReadyCallback();
           }
         });
       }
-      debug && reporter2.log(id, "Already detecable, adding listener.");
+      debug && reporter2.log(id2, "Already detecable, adding listener.");
       addListener(callOnAdd, element, listener);
       elementsReady++;
     });
@@ -28888,12 +29434,12 @@ function EditPanelList(props) {
   const [activeId, setActiveId] = useState(null);
   const [activeItem, setActiveItem] = useState(null);
   const getItemId = useCallback((item2) => {
-    let id = get(item2, "id") || idMap.get(item2);
-    if (!id) {
-      id = +(/* @__PURE__ */ new Date()).getTime().toString() + "-" + uniqueId();
-      idMap.set(item2, id);
+    let id2 = get(item2, "id") || idMap.get(item2);
+    if (!id2) {
+      id2 = +(/* @__PURE__ */ new Date()).getTime().toString() + "-" + uniqueId();
+      idMap.set(item2, id2);
     }
-    return id;
+    return id2;
   }, []);
   const itemIds = useMemo(() => {
     return Array.isArray(value) ? value.map(getItemId) : [];
@@ -29068,7 +29614,7 @@ function EditPanelList(props) {
 }
 const SortableItem = (_e) => {
   var _f = _e, {
-    id,
+    id: id2,
     index: index2,
     item: item2,
     onAdd,
@@ -29088,7 +29634,7 @@ const SortableItem = (_e) => {
     transition,
     isDragging
   } = useSortable({
-    id
+    id: id2
   });
   const style = {
     transform: CSS.Transform.toString(transform),
@@ -29178,7 +29724,7 @@ const cardItemLeft = "_cardItemLeft_8uw8m_71";
 const cardItemRight = "_cardItemRight_8uw8m_85";
 const selectImage = "_selectImage_8uw8m_93";
 const exportFreeImage = "_exportFreeImage_8uw8m_110";
-const styles$4 = {
+const styles$5 = {
   container,
   error,
   item,
@@ -29393,7 +29939,7 @@ function ImageUploader(props) {
   );
   const content2 = useMemo(() => {
     if (isUploading) {
-      return /* @__PURE__ */ React__default.createElement("div", { className: styles$4["item"] }, /* @__PURE__ */ React__default.createElement("div", { className: classnames$1(styles$4["info"]) }, /* @__PURE__ */ React__default.createElement(Spin, { size: 60 }), /* @__PURE__ */ React__default.createElement("div", { className: styles$4["btn-wrap"] })));
+      return /* @__PURE__ */ React__default.createElement("div", { className: styles$5["item"] }, /* @__PURE__ */ React__default.createElement("div", { className: classnames$1(styles$5["info"]) }, /* @__PURE__ */ React__default.createElement(Spin, { size: 60 }), /* @__PURE__ */ React__default.createElement("div", { className: styles$5["btn-wrap"] })));
     }
     if (!props.value) {
       return /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(
@@ -29414,10 +29960,10 @@ function ImageUploader(props) {
             lineHeight: "22px"
           }
         },
-        unsplashClientId ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { className: styles$4.selectImage, onClick: onUpload }, t("Select image")), /* @__PURE__ */ React__default.createElement(
+        unsplashClientId ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { className: styles$5.selectImage, onClick: onUpload }, t("Select image")), /* @__PURE__ */ React__default.createElement(
           "div",
           {
-            className: styles$4.exportFreeImage,
+            className: styles$5.exportFreeImage,
             onClick: () => {
               setUnsplashVisible(true);
               setLock(true);
@@ -29471,7 +30017,7 @@ function ImageUploader(props) {
         triggerProps: {
           popupStyle: { display: "inline-flex" }
         },
-        triggerElement: /* @__PURE__ */ React__default.createElement("span", { className: styles$4.actionItem }, t("Replace"))
+        triggerElement: /* @__PURE__ */ React__default.createElement("span", { className: styles$5.actionItem }, t("Replace"))
       },
       /* @__PURE__ */ React__default.createElement(Select$1.Option, { value: "1", onClick: onUpload }, t("Select image")),
       /* @__PURE__ */ React__default.createElement(
@@ -29485,10 +30031,10 @@ function ImageUploader(props) {
         },
         t("Export free images")
       )
-    ) : /* @__PURE__ */ React__default.createElement("span", { className: styles$4.actionItem, onClick: onUpload }, t("Replace")), enablePreview && /* @__PURE__ */ React__default.createElement("span", null, " ∙ "), enablePreview && /* @__PURE__ */ React__default.createElement(
+    ) : /* @__PURE__ */ React__default.createElement("span", { className: styles$5.actionItem, onClick: onUpload }, t("Replace")), enablePreview && /* @__PURE__ */ React__default.createElement("span", null, " ∙ "), enablePreview && /* @__PURE__ */ React__default.createElement(
       "span",
       {
-        className: styles$4.actionItem,
+        className: styles$5.actionItem,
         onClick: () => setPreview(true)
       },
       t("Preview")
@@ -30084,7 +30630,7 @@ const positionControl = "_positionControl_1t3ne_44";
 const percentSign = "_percentSign_1t3ne_50";
 const deleteButton = "_deleteButton_1t3ne_55";
 const sizeInputs = "_sizeInputs_1t3ne_62";
-const styles$3 = {
+const styles$4 = {
   controlSection,
   controlGroup,
   colorHeader,
@@ -30498,7 +31044,7 @@ function GradientGenerator(props) {
           )
         ))
       }
-    ), /* @__PURE__ */ React__default.createElement("div", { className: styles$3.controlSection }, /* @__PURE__ */ React__default.createElement("div", { className: styles$3.controlGroup }, /* @__PURE__ */ React__default.createElement(
+    ), /* @__PURE__ */ React__default.createElement("div", { className: styles$4.controlSection }, /* @__PURE__ */ React__default.createElement("div", { className: styles$4.controlGroup }, /* @__PURE__ */ React__default.createElement(
       Form.Item,
       {
         label: /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(
@@ -30583,7 +31129,7 @@ function GradientGenerator(props) {
           )
         )))
       )
-    )), /* @__PURE__ */ React__default.createElement(Divider$2, { style: { margin: "0px 0 10px 0" } }), /* @__PURE__ */ React__default.createElement("div", { className: styles$3.controlGroup }, /* @__PURE__ */ React__default.createElement(Form.Item, { label: t(`Gradient Type`), layout: "vertical" }, /* @__PURE__ */ React__default.createElement(
+    )), /* @__PURE__ */ React__default.createElement(Divider$2, { style: { margin: "0px 0 10px 0" } }), /* @__PURE__ */ React__default.createElement("div", { className: styles$4.controlGroup }, /* @__PURE__ */ React__default.createElement(Form.Item, { label: t(`Gradient Type`), layout: "vertical" }, /* @__PURE__ */ React__default.createElement(
       Select$1,
       {
         style: { width: "100%" },
@@ -30604,7 +31150,7 @@ function GradientGenerator(props) {
           }));
         }
       }
-    ))), /* @__PURE__ */ React__default.createElement("div", { className: styles$3.controlGroup }, /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, { span: 11 }, /* @__PURE__ */ React__default.createElement(Form.Item, { label: t(`Width`), layout: "vertical" }, /* @__PURE__ */ React__default.createElement(
+    ))), /* @__PURE__ */ React__default.createElement("div", { className: styles$4.controlGroup }, /* @__PURE__ */ React__default.createElement(Grid.Row, null, /* @__PURE__ */ React__default.createElement(Grid.Col, { span: 11 }, /* @__PURE__ */ React__default.createElement(Form.Item, { label: t(`Width`), layout: "vertical" }, /* @__PURE__ */ React__default.createElement(
       InputNumber,
       {
         style: { width: "100%" },
@@ -30622,7 +31168,7 @@ function GradientGenerator(props) {
           setData(__spreadProps(__spreadValues({}, data), { height: value }));
         }
       }
-    ))))), /* @__PURE__ */ React__default.createElement(Divider$2, null), data.type === "linear" && /* @__PURE__ */ React__default.createElement("div", { className: styles$3.controlGroup }, /* @__PURE__ */ React__default.createElement(Form.Item, { label: t(`Angle`), layout: "vertical" }, /* @__PURE__ */ React__default.createElement(
+    ))))), /* @__PURE__ */ React__default.createElement(Divider$2, null), data.type === "linear" && /* @__PURE__ */ React__default.createElement("div", { className: styles$4.controlGroup }, /* @__PURE__ */ React__default.createElement(Form.Item, { label: t(`Angle`), layout: "vertical" }, /* @__PURE__ */ React__default.createElement(
       Slider,
       {
         value: data.angle,
@@ -30635,7 +31181,7 @@ function GradientGenerator(props) {
         step: 1,
         showInput: true
       }
-    ))), /* @__PURE__ */ React__default.createElement(Divider$2, null), /* @__PURE__ */ React__default.createElement("div", { className: styles$3.controlGroup }, /* @__PURE__ */ React__default.createElement("div", { className: styles$3.colorHeader }, /* @__PURE__ */ React__default.createElement("div", { className: styles$3.label }, t(`Colors`), " (", colors.length, "/", MAX_COLORS, ")"), /* @__PURE__ */ React__default.createElement(
+    ))), /* @__PURE__ */ React__default.createElement(Divider$2, null), /* @__PURE__ */ React__default.createElement("div", { className: styles$4.controlGroup }, /* @__PURE__ */ React__default.createElement("div", { className: styles$4.colorHeader }, /* @__PURE__ */ React__default.createElement("div", { className: styles$4.label }, t(`Colors`), " (", colors.length, "/", MAX_COLORS, ")"), /* @__PURE__ */ React__default.createElement(
       Button$2,
       {
         type: "text",
@@ -30645,7 +31191,7 @@ function GradientGenerator(props) {
         disabled: colors.length >= MAX_COLORS
       },
       t(`Add Color`)
-    )), /* @__PURE__ */ React__default.createElement("div", { className: styles$3.colorList }, colors.map((color2, index2) => /* @__PURE__ */ React__default.createElement("div", { key: color2.id, className: styles$3.colorItem }, /* @__PURE__ */ React__default.createElement("div", { className: styles$3.colorInputs }, /* @__PURE__ */ React__default.createElement(
+    )), /* @__PURE__ */ React__default.createElement("div", { className: styles$4.colorList }, colors.map((color2, index2) => /* @__PURE__ */ React__default.createElement("div", { key: color2.id, className: styles$4.colorItem }, /* @__PURE__ */ React__default.createElement("div", { className: styles$4.colorInputs }, /* @__PURE__ */ React__default.createElement(
       ColorPicker$1,
       {
         value: color2.color,
@@ -30657,7 +31203,7 @@ function GradientGenerator(props) {
           }));
         }
       }
-    )), /* @__PURE__ */ React__default.createElement("div", { className: styles$3.positionControl }, /* @__PURE__ */ React__default.createElement(
+    )), /* @__PURE__ */ React__default.createElement("div", { className: styles$4.positionControl }, /* @__PURE__ */ React__default.createElement(
       InputNumber,
       {
         value: color2.position,
@@ -30672,13 +31218,13 @@ function GradientGenerator(props) {
         min: 0,
         max: 100
       }
-    ), /* @__PURE__ */ React__default.createElement("span", { className: styles$3.percentSign }, "%"), colors.length > MIN_COLORS && /* @__PURE__ */ React__default.createElement(
+    ), /* @__PURE__ */ React__default.createElement("span", { className: styles$4.percentSign }, "%"), colors.length > MIN_COLORS && /* @__PURE__ */ React__default.createElement(
       Button$2,
       {
         type: "text",
         icon: /* @__PURE__ */ React__default.createElement(IconDelete, null),
         onClick: () => removeColor(index2),
-        className: styles$3.deleteButton
+        className: styles$4.deleteButton
       }
     )))))))),
     /* @__PURE__ */ React__default.createElement("canvas", { ref: canvasRef, style: { display: "none" } })
@@ -30858,7 +31404,7 @@ function TextAndHeadingStyle(props) {
       Form.Item,
       {
         label: /* @__PURE__ */ React__default.createElement("div", null),
-        style: { marginBottom: 0 },
+        style: { marginBottom: 12 },
         labelCol: {
           span: 8,
           offset: 0,
@@ -36185,7 +36731,7 @@ const ConfigurationSideBar = ({ height }) => {
   ));
 };
 const largeTabsHeader = "_largeTabsHeader_d2sio_1";
-const styles$2 = {
+const styles$3 = {
   largeTabsHeader
 };
 function AddItems(props) {
@@ -36394,12 +36940,12 @@ function WidgetConfigPanel({
   );
   const items = useMemo(() => {
     return widgetElement.data.config.map((item2, index2) => {
-      let id = idsMap.current.get(item2);
-      if (!id) {
-        id = nanoid();
-        idsMap.current.set(item2, id);
+      let id2 = idsMap.current.get(item2);
+      if (!id2) {
+        id2 = nanoid();
+        idsMap.current.set(item2, id2);
       }
-      return { id, item: item2 };
+      return { id: id2, item: item2 };
     });
   }, [widgetElement.data.config]);
   const itemIds = useMemo(() => {
@@ -36469,7 +37015,7 @@ function WidgetConfigPanel({
         renderTabHeader: (_, DefaultHeader) => /* @__PURE__ */ React__default.createElement(
           "div",
           {
-            className: styles$2.largeTabsHeader,
+            className: styles$3.largeTabsHeader,
             style: { display: "flex", alignItems: "center" }
           },
           /* @__PURE__ */ React__default.createElement(DefaultHeader, { style: { flex: 1 } })
@@ -40235,6 +40781,1840 @@ const StandaloneElementSaveButtonPortal = (props) => {
   }, [cacheProps, setStandaloneElementSaveButton]);
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
 };
+const styles$2 = "";
+function copyImageUrl(attachment) {
+  return __async(this, null, function* () {
+    const value = attachment.url || attachment.dataUrl;
+    if (!value || typeof navigator === "undefined" || !navigator.clipboard)
+      return;
+    yield navigator.clipboard.writeText(value);
+  });
+}
+function getDefaultQuickActions() {
+  return [
+    {
+      label: t("Optimize CTA"),
+      prompt: t(
+        "Improve the main button copy and visual hierarchy so the CTA is clearer without feeling too salesy."
+      )
+    },
+    {
+      label: t("Professional"),
+      prompt: t(
+        "Make the overall design feel more premium, reduce cheap promotion cues, and keep the brand tone polished."
+      )
+    },
+    {
+      label: t("Shorten"),
+      prompt: t(
+        "Shorten the current email copy, keep the core selling points, and make the tone more restrained."
+      )
+    },
+    {
+      label: t("Tone"),
+      prompt: t(
+        "Make the email copy sound clearer, more natural, and more aligned with a polished brand voice."
+      )
+    },
+    {
+      label: t("Improve hero"),
+      prompt: t(
+        "Improve the hero section: make the headline more focused, shorten the supporting copy, and make the CTA stand out."
+      )
+    },
+    {
+      label: t("Align colors"),
+      prompt: t(
+        "Align the brand colors and button colors, reduce visual noise, and make the email feel more cohesive."
+      )
+    },
+    {
+      label: t("Optimize products"),
+      prompt: t(
+        "Optimize the product section layout and text hierarchy so products are easier to browse and compare."
+      )
+    },
+    {
+      label: t("Compact mobile"),
+      prompt: t(
+        "Optimize the mobile layout, reduce crowding and long text, and keep the content readable."
+      )
+    },
+    {
+      label: t("Boost contrast"),
+      prompt: t(
+        "Improve the contrast between the background, body text, and buttons to keep the email readable."
+      )
+    },
+    {
+      label: t("Add urgency"),
+      prompt: t(
+        "Add more promotional energy and urgency without hurting the brand feel."
+      )
+    },
+    {
+      label: t("Softer tone"),
+      prompt: t(
+        "Make the visuals and copy softer, lighter, and more suitable for a lifestyle brand."
+      )
+    },
+    {
+      label: t("Translate to English"),
+      prompt: t(
+        "Translate the main email copy into natural English while keeping the original layout."
+      )
+    },
+    {
+      label: t("Check issues"),
+      prompt: t(
+        "Review the current email for copy, hierarchy, mobile, and CTA issues, then make small improvements directly."
+      )
+    }
+  ];
+}
+function getDefaultMessages() {
+  return [
+    {
+      id: "m1",
+      role: "assistant",
+      content: t(
+        "Tell me how you want to change this email. I will generate edits from the current template."
+      ),
+      time: "10:12"
+    },
+    {
+      id: "m2",
+      role: "user",
+      content: t(
+        "Make the hero feel more premium, use less copy, and make the button stand out."
+      ),
+      time: "10:14"
+    },
+    {
+      id: "m3",
+      role: "assistant",
+      content: t(
+        "Sure. I recommend keeping the hero headline within two lines, reducing the supporting copy to one core selling point, and using a more direct CTA verb.\n\nI will prioritize:\n1. Headline hierarchy\n2. Button copy\n3. Hero whitespace\n4. Background and text contrast"
+      ),
+      time: "10:15"
+    },
+    {
+      id: "m4",
+      role: "user",
+      content: t("Make the button copy less salesy and more brand-led."),
+      time: "10:18"
+    },
+    {
+      id: "m5",
+      role: "assistant",
+      content: t(
+        'Got it. We can change "SHOP COLLECTION" to "Explore the Edit" or "Discover New Arrivals". This copy feels more restrained and works better for a brand-led email.'
+      ),
+      time: "10:19"
+    },
+    {
+      id: "m6",
+      role: "user",
+      content: t("Use this layout as a reference"),
+      time: "10:22",
+      attachments: [
+        {
+          id: "a1",
+          type: "image",
+          name: "layout-reference.png",
+          url: "data:image/svg+xml;utf8," + encodeURIComponent(
+            `<svg xmlns="http://www.w3.org/2000/svg" width="320" height="220" viewBox="0 0 320 220">
+              <rect width="320" height="220" fill="#ffffff"/>
+              <rect x="26" y="18" width="268" height="48" rx="4" fill="#064d67"/>
+              <text x="160" y="47" text-anchor="middle" fill="#ffffff" font-family="Arial" font-size="16" font-weight="700">MORE PROBLEM? MORE IMAGE!</text>
+              <rect x="44" y="84" width="72" height="54" rx="6" fill="#f3fafc" stroke="#90c7d3"/>
+              <path d="M62 124h38M68 114l12-16 13 20 8-11 13 17" fill="none" stroke="#1685a0" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+              <rect x="132" y="84" width="142" height="9" rx="4" fill="#1f2937"/>
+              <rect x="132" y="101" width="114" height="7" rx="3.5" fill="#94a3b8"/>
+              <rect x="132" y="115" width="126" height="7" rx="3.5" fill="#cbd5e1"/>
+              <rect x="132" y="130" width="82" height="7" rx="3.5" fill="#0f7490"/>
+              <circle cx="80" cy="176" r="30" fill="#f3fafc" stroke="#90c7d3" stroke-width="3"/>
+              <circle cx="80" cy="176" r="17" fill="none" stroke="#1685a0" stroke-width="4"/>
+              <path d="M80 176l31-25" stroke="#ef4444" stroke-width="4" stroke-linecap="round"/>
+              <rect x="132" y="154" width="142" height="9" rx="4" fill="#1f2937"/>
+              <rect x="132" y="171" width="118" height="7" rx="3.5" fill="#94a3b8"/>
+              <rect x="132" y="185" width="132" height="7" rx="3.5" fill="#cbd5e1"/>
+              <rect x="132" y="200" width="82" height="7" rx="3.5" fill="#0f7490"/>
+            </svg>`
+          )
+        }
+      ]
+    },
+    {
+      id: "m7",
+      role: "assistant",
+      content: t(
+        "We can use this structure: keep a strong visual headline area at the top, then use icon plus short-copy groups below. When applying it to the email, I will control each text group so mobile does not feel crowded."
+      ),
+      time: "10:23"
+    },
+    {
+      id: "m8",
+      role: "assistant",
+      content: t(
+        "You can keep giving me more specific directions, such as:\n\nMore modern, softer, stronger promotion, highlight new arrivals, highlight discounts, or make mobile more compact."
+      ),
+      time: "10:24"
+    }
+  ];
+}
+function classNames(...names) {
+  return names.filter(Boolean).join(" ");
+}
+function sourceTitle(source) {
+  try {
+    return source.title || new URL(source.url).hostname;
+  } catch (e) {
+    return source.title || source.url;
+  }
+}
+function quickActionLabel(action2) {
+  return typeof action2 === "string" ? action2 : action2.label;
+}
+function quickActionPrompt(action2) {
+  return typeof action2 === "string" ? action2 : action2.prompt;
+}
+function fileToAttachment(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      resolve({
+        id: `local-${Date.now()}-${Math.random().toString(16).slice(2)}`,
+        type: "image",
+        name: file.name,
+        url: String(reader.result || ""),
+        dataUrl: String(reader.result || ""),
+        mimeType: file.type,
+        size: file.size
+      });
+    };
+    reader.onerror = () => reject(reader.error || new Error("image_read_failed"));
+    reader.readAsDataURL(file);
+  });
+}
+function extensionForMime(mimeType) {
+  if (mimeType === "image/jpeg")
+    return "jpg";
+  if (mimeType === "image/webp")
+    return "webp";
+  if (mimeType === "image/gif")
+    return "gif";
+  return "png";
+}
+function normalizePastedImage(file, index2) {
+  if (file.name)
+    return file;
+  return new File([file], `pasted-image-${Date.now()}-${index2 + 1}.${extensionForMime(file.type)}`, {
+    type: file.type || "image/png",
+    lastModified: Date.now()
+  });
+}
+function imageFilesFromClipboard(event) {
+  const itemFiles = Array.from(event.clipboardData.items || []).filter((item2) => item2.kind === "file" && item2.type.startsWith("image/")).map((item2) => item2.getAsFile()).filter(Boolean);
+  const dataFiles = Array.from(event.clipboardData.files || []).filter(
+    (file) => file.type.startsWith("image/")
+  );
+  const files = itemFiles.length ? itemFiles : dataFiles;
+  return files.map(normalizePastedImage);
+}
+function stripUploadStatus(attachment) {
+  const _a = attachment, { uploadStatus } = _a, readyAttachment = __objRest(_a, ["uploadStatus"]);
+  return readyAttachment;
+}
+function decisionResponseFromChoice(decision, choice) {
+  return {
+    decisionId: decision.id,
+    choiceId: choice.id,
+    label: choice.label,
+    value: choice.value
+  };
+}
+function Icon({
+  name,
+  className
+}) {
+  const common = {
+    className,
+    width: 16,
+    height: 16,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": true
+  };
+  if (name === "attach") {
+    return /* @__PURE__ */ React__default.createElement("svg", __spreadValues({}, common), /* @__PURE__ */ React__default.createElement("path", { d: "M12 5v14" }), /* @__PURE__ */ React__default.createElement("path", { d: "M5 12h14" }));
+  }
+  return /* @__PURE__ */ React__default.createElement("svg", __spreadValues({}, common), /* @__PURE__ */ React__default.createElement("path", { d: "M12 19V5" }), /* @__PURE__ */ React__default.createElement("path", { d: "m5 12 7-7 7 7" }));
+}
+function EasyEmailProAiAgent({
+  className,
+  messages = getDefaultMessages(),
+  activity,
+  disabled = false,
+  sendDisabled = false,
+  quickActions = getDefaultQuickActions(),
+  pendingAction,
+  pendingDecision,
+  placeholder = t("Tell AI how you want to change this email..."),
+  onSend,
+  onUpload,
+  onChooseDecision,
+  onCancelDecision,
+  onRestoreSnapshot,
+  onQuickAction
+}) {
+  var _a;
+  assertAiAgentFeatureEnabled();
+  const [draft, setDraft] = useState("");
+  const [attachments, setAttachments] = useState([]);
+  const [uploading, setUploading] = useState(false);
+  const [uploadError, setUploadError] = useState("");
+  const [previewAttachment, setPreviewAttachment] = useState(null);
+  const [quickActionsExpanded, setQuickActionsExpanded] = useState(false);
+  const [decisionDraft, setDecisionDraft] = useState("");
+  const [copiedAttachmentId, setCopiedAttachmentId] = useState(null);
+  const inputRef = useRef(null);
+  const textareaRef = useRef(null);
+  const scrollbarsRef = useRef(null);
+  const visibleQuickActions = quickActions.slice(0, 2);
+  const menuQuickActions = quickActions.slice(2);
+  const hasMenuQuickActions = menuQuickActions.length > 0;
+  const activityState = status === "running" || /applying|updating|generating|connecting|sending|uploading|reading|analyzing|preparing|processing|正在|读取|分析|准备|处理中|更新中|生成中|上传中/i.test(activity || "") ? "working" : /not applied|failed|error|失败|未应用/i.test(activity || "") ? "warning" : /updated|applied|generated|ready|完成|已更新|已应用|已生成/i.test(activity || "") ? "success" : "idle";
+  const visibleActivity = activityState === "success" ? "" : activity;
+  const lastSuccessfulAssistantMessageId = activityState === "success" ? (_a = [...messages].reverse().find((message) => message.role === "assistant" && message.status !== "error")) == null ? void 0 : _a.id : null;
+  function scrollThreadToBottom() {
+    const scroll2 = () => {
+      var _a2, _b;
+      const container2 = (_b = (_a2 = scrollbarsRef.current) == null ? void 0 : _a2.osInstance()) == null ? void 0 : _b.getElements().viewport;
+      if (!container2)
+        return;
+      container2.scrollTop = container2.scrollHeight;
+    };
+    scroll2();
+    requestAnimationFrame(() => {
+      scroll2();
+      requestAnimationFrame(scroll2);
+    });
+  }
+  function copyAttachment(attachment) {
+    return __async(this, null, function* () {
+      yield copyImageUrl(attachment);
+      setCopiedAttachmentId(attachment.id);
+      window.setTimeout(() => {
+        setCopiedAttachmentId((current) => current === attachment.id ? null : current);
+      }, 1200);
+    });
+  }
+  useLayoutEffect(() => {
+    scrollThreadToBottom();
+  }, [
+    activity,
+    attachments.length,
+    lastSuccessfulAssistantMessageId,
+    messages,
+    pendingDecision,
+    uploadError
+  ]);
+  useEffect(() => {
+    setDecisionDraft("");
+  }, [pendingDecision == null ? void 0 : pendingDecision.id]);
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea)
+      return;
+    textarea.style.height = "auto";
+    const maxHeight = Number.parseFloat(getComputedStyle(textarea).maxHeight);
+    const nextHeight = Number.isFinite(maxHeight) ? Math.min(textarea.scrollHeight, maxHeight) : textarea.scrollHeight;
+    textarea.style.height = `${nextHeight}px`;
+    textarea.style.overflowY = Number.isFinite(maxHeight) && textarea.scrollHeight > maxHeight ? "auto" : "hidden";
+  }, [draft, placeholder]);
+  function submit() {
+    return __async(this, null, function* () {
+      const value = draft.trim();
+      if (!value && !attachments.length || disabled || sendDisabled || uploading)
+        return;
+      const readyAttachments = attachments.map(stripUploadStatus);
+      const previousDraft = draft;
+      const previousAttachments = attachments;
+      setDraft("");
+      setAttachments([]);
+      setUploadError("");
+      scrollThreadToBottom();
+      try {
+        yield onSend == null ? void 0 : onSend(value || t("Use this image as a reference"), readyAttachments);
+      } catch (error2) {
+        setDraft(previousDraft);
+        setAttachments(previousAttachments);
+        setUploadError(error2 instanceof Error ? error2.message : t("Send failed"));
+      }
+    });
+  }
+  function runQuickAction(action2) {
+    return __async(this, null, function* () {
+      if (disabled || sendDisabled || uploading)
+        return;
+      const prompt = quickActionPrompt(action2);
+      if (!prompt.trim())
+        return;
+      setUploadError("");
+      setQuickActionsExpanded(false);
+      if (onQuickAction) {
+        yield onQuickAction(prompt);
+        return;
+      }
+      const readyAttachments = attachments.map(stripUploadStatus);
+      setDraft("");
+      setAttachments([]);
+      scrollThreadToBottom();
+      yield onSend == null ? void 0 : onSend(prompt, readyAttachments);
+    });
+  }
+  function uploadImageFiles(files) {
+    return __async(this, null, function* () {
+      if (!files.length || disabled || uploading)
+        return;
+      try {
+        const imageFiles = files.filter((file) => file.type.startsWith("image/"));
+        if (!imageFiles.length)
+          return;
+        setUploading(true);
+        setUploadError("");
+        const pendingAttachments = yield Promise.all(
+          imageFiles.map((file) => __async(this, null, function* () {
+            return __spreadProps(__spreadValues({}, yield fileToAttachment(file)), {
+              uploadStatus: "uploading"
+            });
+          }))
+        );
+        setAttachments((current) => [...current, ...pendingAttachments]);
+        const uploaded = yield Promise.all(
+          imageFiles.map(
+            (file, index2) => onUpload ? onUpload(file) : Promise.resolve(pendingAttachments[index2])
+          )
+        );
+        setAttachments(
+          (current) => current.map((attachment) => {
+            const uploadedIndex = pendingAttachments.findIndex(
+              (pending) => pending.id === attachment.id
+            );
+            if (uploadedIndex === -1)
+              return attachment;
+            return stripUploadStatus(uploaded[uploadedIndex]);
+          })
+        );
+      } catch (error2) {
+        setAttachments(
+          (current) => current.filter((attachment) => attachment.uploadStatus !== "uploading")
+        );
+        setUploadError(error2 instanceof Error ? error2.message : t("Image upload failed"));
+      } finally {
+        setUploading(false);
+        if (inputRef.current)
+          inputRef.current.value = "";
+      }
+    });
+  }
+  function uploadFiles(files) {
+    return __async(this, null, function* () {
+      yield uploadImageFiles(Array.from(files || []));
+    });
+  }
+  function pasteImages(event) {
+    const imageFiles = imageFilesFromClipboard(event);
+    if (!imageFiles.length)
+      return;
+    event.preventDefault();
+    void uploadImageFiles(imageFiles);
+  }
+  return /* @__PURE__ */ React__default.createElement("aside", { className: classNames("eep-ai-agent", className), "aria-label": t("AI Agent"), onPaste: pasteImages }, /* @__PURE__ */ React__default.createElement(
+    FullHeightOverlayScrollbars,
+    {
+      ref: scrollbarsRef,
+      height: "100%",
+      className: "eep-ai-agent__body-scrollbar"
+    },
+    /* @__PURE__ */ React__default.createElement("div", { className: "eep-ai-agent__body" }, /* @__PURE__ */ React__default.createElement("section", { className: "eep-ai-agent__thread", "aria-label": t("AI conversation") }, messages.map((message) => {
+      var _a2, _b;
+      return /* @__PURE__ */ React__default.createElement("article", { className: classNames("eep-ai-agent__message", `is-${message.role}`), key: message.id }, ((_a2 = message.attachments) == null ? void 0 : _a2.length) ? /* @__PURE__ */ React__default.createElement("div", { className: "eep-ai-agent__attachments", "aria-label": t("Attachments") }, message.attachments.map((attachment) => /* @__PURE__ */ React__default.createElement(
+        "button",
+        {
+          className: "eep-ai-agent__attachment",
+          key: attachment.id,
+          type: "button",
+          onClick: () => setPreviewAttachment(attachment),
+          "aria-label": `${t("View image")}: ${attachment.name}`
+        },
+        /* @__PURE__ */ React__default.createElement("img", { src: attachment.url, alt: attachment.name }),
+        /* @__PURE__ */ React__default.createElement(
+          "span",
+          {
+            className: "eep-ai-agent__attachment-copy",
+            "aria-label": t("Copy image URL"),
+            role: "button",
+            tabIndex: 0,
+            onClick: (event) => {
+              event.stopPropagation();
+              void copyAttachment(attachment);
+            },
+            onKeyDown: (event) => {
+              if (event.key !== "Enter" && event.key !== " ")
+                return;
+              event.preventDefault();
+              event.stopPropagation();
+              void copyAttachment(attachment);
+            }
+          },
+          copiedAttachmentId === attachment.id ? t("Copied") : "⧉"
+        )
+      ))) : null, /* @__PURE__ */ React__default.createElement("div", { className: "eep-ai-agent__bubble" }, message.content), ((_b = message.sources) == null ? void 0 : _b.length) ? /* @__PURE__ */ React__default.createElement("div", { className: "eep-ai-agent__sources", "aria-label": t("Sources") }, message.sources.slice(0, 3).map((source) => /* @__PURE__ */ React__default.createElement(
+        "a",
+        {
+          href: source.url,
+          key: source.url,
+          target: "_blank",
+          rel: "noreferrer"
+        },
+        sourceTitle(source)
+      ))) : null, message.role === "assistant" && message.status === "ready" && message.snapshotId && onRestoreSnapshot ? /* @__PURE__ */ React__default.createElement("div", { className: "eep-ai-agent__message-actions" }, /* @__PURE__ */ React__default.createElement(
+        "button",
+        {
+          className: "eep-ai-agent__message-action",
+          type: "button",
+          onClick: () => message.snapshotId && void onRestoreSnapshot(message.snapshotId),
+          title: t("Restore to this state")
+        },
+        /* @__PURE__ */ React__default.createElement(RotateCcw, { size: 12, strokeWidth: 1.75, "aria-hidden": "true" }),
+        /* @__PURE__ */ React__default.createElement("span", null, t("Restore"))
+      )) : null, message.id === lastSuccessfulAssistantMessageId ? /* @__PURE__ */ React__default.createElement("div", { className: "eep-ai-agent__message-success" }, /* @__PURE__ */ React__default.createElement("span", { "aria-hidden": "true" }, "✓"), activity) : null);
+    }), pendingDecision ? /* @__PURE__ */ React__default.createElement("article", { className: "eep-ai-agent__message is-assistant" }, /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        className: "eep-ai-agent__decision",
+        role: "group",
+        "aria-label": pendingDecision.title
+      },
+      pendingDecision.image ? /* @__PURE__ */ React__default.createElement(
+        "button",
+        {
+          className: "eep-ai-agent__decision-preview",
+          type: "button",
+          onClick: () => pendingDecision.image && setPreviewAttachment(__spreadProps(__spreadValues({}, pendingDecision.image), {
+            type: "image",
+            url: pendingDecision.image.url || ""
+          })),
+          "aria-label": `${t("View image")}: ${pendingDecision.image.name}`
+        },
+        /* @__PURE__ */ React__default.createElement(
+          "img",
+          {
+            src: pendingDecision.image.url || "",
+            alt: pendingDecision.image.name
+          }
+        )
+      ) : null,
+      /* @__PURE__ */ React__default.createElement("div", { className: "eep-ai-agent__decision-head" }, /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement("div", { className: "eep-ai-agent__decision-title" }, pendingDecision.title), /* @__PURE__ */ React__default.createElement("div", { className: "eep-ai-agent__decision-message" }, pendingDecision.message)), pendingDecision.required ? null : /* @__PURE__ */ React__default.createElement(
+        "button",
+        {
+          className: "eep-ai-agent__decision-cancel",
+          type: "button",
+          onClick: onCancelDecision
+        },
+        t("Cancel")
+      )),
+      /* @__PURE__ */ React__default.createElement("div", { className: "eep-ai-agent__decision-choices" }, pendingDecision.choices.map((choice) => /* @__PURE__ */ React__default.createElement(
+        "button",
+        {
+          className: "eep-ai-agent__decision-choice",
+          key: choice.id,
+          type: "button",
+          onClick: () => {
+            void (onChooseDecision == null ? void 0 : onChooseDecision(
+              choice,
+              decisionResponseFromChoice(pendingDecision, choice)
+            ));
+          }
+        },
+        choice.thumbnail ? /* @__PURE__ */ React__default.createElement("img", { src: choice.thumbnail, alt: "" }) : null,
+        /* @__PURE__ */ React__default.createElement("span", null, /* @__PURE__ */ React__default.createElement("strong", null, choice.label), choice.description ? /* @__PURE__ */ React__default.createElement("small", null, choice.description) : null)
+      ))),
+      pendingDecision.allowCustom ? /* @__PURE__ */ React__default.createElement(
+        "form",
+        {
+          className: "eep-ai-agent__decision-custom",
+          onSubmit: (event) => {
+            event.preventDefault();
+            const value = decisionDraft.trim();
+            if (!value)
+              return;
+            const choice = {
+              id: "custom",
+              label: value,
+              prompt: value
+            };
+            void (onChooseDecision == null ? void 0 : onChooseDecision(choice, {
+              decisionId: pendingDecision.id,
+              choiceId: "custom",
+              label: value,
+              customText: value
+            }));
+          }
+        },
+        /* @__PURE__ */ React__default.createElement(
+          "input",
+          {
+            value: decisionDraft,
+            onChange: (event) => setDecisionDraft(event.target.value),
+            placeholder: t("Or describe what you want...")
+          }
+        ),
+        /* @__PURE__ */ React__default.createElement("button", { type: "submit", disabled: !decisionDraft.trim() }, t("Send"))
+      ) : null
+    )) : null))
+  ), /* @__PURE__ */ React__default.createElement("footer", { className: "eep-ai-agent__composer-wrap" }, visibleActivity || uploadError || attachments.length || pendingAction ? /* @__PURE__ */ React__default.createElement("div", { className: "eep-ai-agent__composer-meta" }, attachments.length ? /* @__PURE__ */ React__default.createElement("div", { className: "eep-ai-agent__pending-attachments", "aria-label": t("Pending images") }, attachments.map((attachment) => /* @__PURE__ */ React__default.createElement(
+    "button",
+    {
+      className: "eep-ai-agent__pending-attachment",
+      key: attachment.id,
+      type: "button",
+      onClick: () => setPreviewAttachment(attachment),
+      "aria-label": `${t("View image")}: ${attachment.name}`
+    },
+    /* @__PURE__ */ React__default.createElement("img", { src: attachment.url, alt: attachment.name }),
+    attachment.uploadStatus === "uploading" ? /* @__PURE__ */ React__default.createElement(
+      "span",
+      {
+        className: "eep-ai-agent__pending-attachment-loading",
+        "aria-label": t("Uploading image"),
+        role: "progressbar"
+      }
+    ) : /* @__PURE__ */ React__default.createElement(
+      "span",
+      {
+        "aria-hidden": "true",
+        onClick: (event) => {
+          event.stopPropagation();
+          setAttachments(
+            (current) => current.filter((item2) => item2.id !== attachment.id)
+          );
+        }
+      },
+      "×"
+    )
+  ))) : null, visibleActivity ? /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      className: classNames(
+        "eep-ai-agent__activity",
+        activityState === "working" && "is-working",
+        activityState === "success" && "is-success",
+        activityState === "warning" && "is-warning"
+      ),
+      role: activityState === "working" ? "status" : void 0,
+      "aria-live": "polite"
+    },
+    activityState === "working" ? /* @__PURE__ */ React__default.createElement("span", { className: "eep-ai-agent__activity-dots", "aria-hidden": "true" }, /* @__PURE__ */ React__default.createElement("span", null), /* @__PURE__ */ React__default.createElement("span", null), /* @__PURE__ */ React__default.createElement("span", null)) : activityState === "success" ? /* @__PURE__ */ React__default.createElement("span", { className: "eep-ai-agent__activity-icon", "aria-hidden": "true" }, "✓") : activityState === "warning" ? /* @__PURE__ */ React__default.createElement("span", { className: "eep-ai-agent__activity-icon", "aria-hidden": "true" }, "!") : null,
+    /* @__PURE__ */ React__default.createElement("span", { className: "eep-ai-agent__activity-text" }, visibleActivity),
+    activityState === "working" ? /* @__PURE__ */ React__default.createElement("span", { className: "eep-ai-agent__activity-bar", "aria-hidden": "true" }) : null
+  ) : null, uploadError ? /* @__PURE__ */ React__default.createElement("div", { className: "eep-ai-agent__error" }, uploadError) : null, pendingAction ? /* @__PURE__ */ React__default.createElement(
+    "button",
+    {
+      className: "eep-ai-agent__pending-action",
+      type: "button",
+      disabled: disabled || pendingAction.disabled,
+      onClick: () => {
+        void pendingAction.onClick();
+      }
+    },
+    pendingAction.label
+  ) : null) : null, quickActions.length ? /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      className: classNames(
+        "eep-ai-agent__quick-actions",
+        quickActionsExpanded && "is-open"
+      ),
+      "aria-label": t("Quick actions")
+    },
+    quickActionsExpanded && hasMenuQuickActions ? /* @__PURE__ */ React__default.createElement("div", { className: "eep-ai-agent__quick-actions-menu" }, menuQuickActions.map((action2, index2) => /* @__PURE__ */ React__default.createElement(
+      "button",
+      {
+        className: "eep-ai-agent__quick-action-menu-item",
+        key: `${quickActionLabel(action2)}-${index2}`,
+        type: "button",
+        disabled: disabled || sendDisabled || uploading,
+        onClick: () => {
+          void runQuickAction(action2);
+        }
+      },
+      quickActionLabel(action2)
+    ))) : null,
+    /* @__PURE__ */ React__default.createElement("div", { className: "eep-ai-agent__quick-actions-bar" }, visibleQuickActions.map((action2, index2) => /* @__PURE__ */ React__default.createElement(
+      "button",
+      {
+        className: "eep-ai-agent__quick-action-pill",
+        key: `${quickActionLabel(action2)}-${index2}`,
+        type: "button",
+        disabled: disabled || sendDisabled || uploading,
+        onClick: () => {
+          void runQuickAction(action2);
+        }
+      },
+      quickActionLabel(action2)
+    )), hasMenuQuickActions ? /* @__PURE__ */ React__default.createElement(
+      "button",
+      {
+        className: "eep-ai-agent__quick-action-more",
+        type: "button",
+        disabled: disabled || sendDisabled || uploading,
+        onClick: () => setQuickActionsExpanded((value) => !value),
+        "aria-expanded": quickActionsExpanded,
+        "aria-label": t("More quick actions")
+      },
+      /* @__PURE__ */ React__default.createElement(Ellipsis, { size: 16, strokeWidth: 2.2 })
+    ) : null)
+  ) : null, /* @__PURE__ */ React__default.createElement("div", { className: "eep-ai-agent__composer" }, /* @__PURE__ */ React__default.createElement("div", { className: "eep-ai-agent__composer-input" }, /* @__PURE__ */ React__default.createElement(
+    "textarea",
+    {
+      ref: textareaRef,
+      value: draft,
+      disabled,
+      placeholder,
+      rows: 1,
+      onChange: (event) => setDraft(event.target.value),
+      onKeyDown: (event) => {
+        if (event.key === "Enter" && !event.shiftKey) {
+          event.preventDefault();
+          submit();
+        }
+      }
+    }
+  ), /* @__PURE__ */ React__default.createElement("div", { className: "eep-ai-agent__composer-hint" }, t("Enter to send / Shift + Enter for new line"))), /* @__PURE__ */ React__default.createElement(
+    "input",
+    {
+      ref: inputRef,
+      className: "eep-ai-agent__file-input",
+      type: "file",
+      accept: "image/*",
+      multiple: true,
+      onChange: (event) => uploadFiles(event.currentTarget.files)
+    }
+  ), /* @__PURE__ */ React__default.createElement(
+    "button",
+    {
+      className: "eep-ai-agent__attach",
+      type: "button",
+      disabled: disabled || uploading,
+      onClick: () => {
+        var _a2;
+        return (_a2 = inputRef.current) == null ? void 0 : _a2.click();
+      },
+      "aria-label": t("Add image")
+    },
+    /* @__PURE__ */ React__default.createElement(Icon, { name: "attach" })
+  ), /* @__PURE__ */ React__default.createElement(
+    "button",
+    {
+      className: "eep-ai-agent__send",
+      type: "button",
+      disabled: disabled || sendDisabled || uploading || !draft.trim() && !attachments.length,
+      onClick: submit,
+      "aria-label": t("Send")
+    },
+    /* @__PURE__ */ React__default.createElement(Icon, { name: "send" })
+  ))), previewAttachment ? /* @__PURE__ */ React__default.createElement("div", { className: "eep-ai-agent__lightbox", role: "dialog", "aria-modal": "true", onClick: () => setPreviewAttachment(null) }, /* @__PURE__ */ React__default.createElement(
+    "button",
+    {
+      className: "eep-ai-agent__lightbox-close",
+      type: "button",
+      onClick: () => setPreviewAttachment(null),
+      "aria-label": t("Close image preview")
+    },
+    "×"
+  ), /* @__PURE__ */ React__default.createElement("img", { src: previewAttachment.url, alt: previewAttachment.name, onClick: (event) => event.stopPropagation() })) : null);
+}
+const doneStatuses = ["FINISHED", "ERROR"];
+function getInitialConversation() {
+  return [
+    {
+      id: "agent-welcome",
+      role: "assistant",
+      content: t(
+        "Tell me how you want to change this email. You can also upload reference images. I will adjust the preview from the current template."
+      ),
+      time: formatTime()
+    }
+  ];
+}
+function formatTime(date = /* @__PURE__ */ new Date()) {
+  return date.toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false
+  });
+}
+function id(prefix) {
+  if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
+    return `${prefix}-${crypto.randomUUID()}`;
+  }
+  return `${prefix}-${Date.now()}-${Math.random().toString(16).slice(2)}`;
+}
+function isoNow() {
+  return (/* @__PURE__ */ new Date()).toISOString();
+}
+function friendlyActivity(text) {
+  if (text.includes("image attachment"))
+    return t("Reading uploaded images...");
+  if (text.includes("Generating image"))
+    return t("Generating image...");
+  if (text.includes("Searching"))
+    return t("Searching the web...");
+  if (text.trim())
+    return t("Understanding your request...");
+  return t("Updating the email...");
+}
+function ensureError(error2) {
+  const nextError = error2 instanceof Error ? error2 : new Error(String(error2));
+  if (nextError.message === "Failed to fetch" || nextError.message.includes("NetworkError")) {
+    return new Error(
+      `${t("Cannot connect to AI Proxy")}. ${t("Check the onChat handler or your AI service endpoint.")}`
+    );
+  }
+  return nextError;
+}
+function mapAiAttachment(attachment) {
+  return {
+    id: attachment.id,
+    name: attachment.name,
+    mimeType: attachment.mimeType || "image/png",
+    dataUrl: attachment.dataUrl,
+    url: attachment.url,
+    size: attachment.size
+  };
+}
+function mapGeneratedImageAttachment(attachment) {
+  return {
+    id: attachment.id,
+    type: "image",
+    name: attachment.name,
+    url: attachment.url || "",
+    mimeType: attachment.mimeType || "image/png",
+    size: attachment.size
+  };
+}
+function isRemoteImageUrl(url) {
+  return Boolean(url && !url.startsWith("data:"));
+}
+function imageResultText(payload) {
+  const lines = [payload.summary || t("Generated image.")];
+  if (payload.revisedPrompt) {
+    lines.push(`${t("Prompt")}: ${payload.revisedPrompt}`);
+  }
+  return lines.join("\n\n");
+}
+function resultText(payload) {
+  if (!payload.valid) {
+    return payload.errors.length ? `${t("This change did not pass validation")}:
+${payload.errors.join("\n")}` : t("This change did not pass validation.");
+  }
+  if (payload.summary)
+    return payload.summary;
+  if (payload.template)
+    return t("Updated the email preview.");
+  return t("Done.");
+}
+function templateKey(template) {
+  try {
+    return JSON.stringify(template) || "";
+  } catch (e) {
+    return "";
+  }
+}
+function pendingText(summary) {
+  return summary ? `${summary}
+
+${t("AI changes are ready. Click the button below to apply them.")}` : t("AI changes are ready. Click the button below to apply them.");
+}
+function toolCallsText(payload, result) {
+  if (payload.summary) {
+    return `${t("Updated the email preview.")}
+
+${payload.summary}`;
+  }
+  if (result && result.applied > 0)
+    return t("Updated the email preview.");
+  return t("Completed local changes.");
+}
+function userFacingApplyErrors(errors) {
+  return errors.filter((error2) => !/tool calls truncated/i.test(error2));
+}
+function normalizeHistory(history, initialMessages) {
+  var _a;
+  const messages = ((_a = history == null ? void 0 : history.messages) == null ? void 0 : _a.length) ? history.messages : (initialMessages == null ? void 0 : initialMessages.length) ? initialMessages : getInitialConversation();
+  return {
+    messages,
+    currentSnapshotId: history == null ? void 0 : history.currentSnapshotId,
+    snapshots: (history == null ? void 0 : history.snapshots) || []
+  };
+}
+function snapshotTitle(reason, index2) {
+  if (reason === "before-ai-run")
+    return index2 <= 1 ? t("Initial") : `v${index2}`;
+  return `v${index2}`;
+}
+function useAiAgentSession(options2) {
+  const [historyState, setHistoryState] = useState(
+    normalizeHistory(options2.history, options2.initialMessages)
+  );
+  const [status2, setStatus] = useState("ready");
+  const [activity, setActivity] = useState("");
+  const [pendingChange, setPendingChange] = useState(null);
+  const [pendingDecision, setPendingDecision] = useState(null);
+  const [applyingPendingChange, setApplyingPendingChange] = useState(false);
+  const streamAbortRef = useRef(null);
+  const activeRunRef = useRef(null);
+  const optionsRef = useRef(options2);
+  const historyRef = useRef(historyState);
+  useEffect(() => {
+    optionsRef.current = options2;
+  }, [options2]);
+  useEffect(() => {
+    if (!options2.history)
+      return;
+    const nextHistory = normalizeHistory(
+      options2.history,
+      options2.initialMessages
+    );
+    historyRef.current = nextHistory;
+    setHistoryState(nextHistory);
+  }, [options2.history, options2.initialMessages]);
+  const abortStream = useCallback(() => {
+    var _a;
+    (_a = streamAbortRef.current) == null ? void 0 : _a.abort();
+    streamAbortRef.current = null;
+  }, []);
+  const commitHistory = useCallback(
+    (updater, change) => {
+      var _a, _b;
+      const nextHistory = updater(historyRef.current);
+      historyRef.current = nextHistory;
+      setHistoryState(nextHistory);
+      (_b = (_a = optionsRef.current).onHistoryChange) == null ? void 0 : _b.call(_a, nextHistory, change);
+      return nextHistory;
+    },
+    []
+  );
+  const updateMessage = useCallback(
+    (messageId, patch) => {
+      commitHistory(
+        (history) => __spreadProps(__spreadValues({}, history), {
+          messages: history.messages.map(
+            (message) => message.id === messageId ? __spreadValues(__spreadValues({}, message), patch) : message
+          )
+        }),
+        { type: "message.updated", messageId, patch }
+      );
+    },
+    [commitHistory]
+  );
+  const createSnapshot = useCallback(
+    (reason, messageId, summary, templateOverride) => {
+      if (!optionsRef.current.snapshotsEnabled || !optionsRef.current.onSnapshotCreate) {
+        return null;
+      }
+      const snapshotIndex = (historyRef.current.snapshots || []).length + 1;
+      const snapshot = {
+        id: id("snapshot"),
+        title: snapshotTitle(reason, snapshotIndex),
+        summary,
+        createdAt: isoNow(),
+        reason,
+        messageId,
+        template: templateOverride === void 0 ? optionsRef.current.getTemplate() : templateOverride
+      };
+      const snapshotMeta = {
+        id: snapshot.id,
+        title: snapshot.title,
+        summary: snapshot.summary,
+        createdAt: snapshot.createdAt
+      };
+      void optionsRef.current.onSnapshotCreate(snapshot);
+      commitHistory(
+        (history) => __spreadProps(__spreadValues({}, history), {
+          currentSnapshotId: snapshot.id,
+          snapshots: [...history.snapshots || [], snapshotMeta],
+          messages: messageId ? history.messages.map(
+            (message) => message.id === messageId ? __spreadProps(__spreadValues({}, message), { snapshotId: snapshot.id }) : message
+          ) : history.messages
+        }),
+        { type: "snapshot.created", snapshot: snapshotMeta }
+      );
+      return snapshot;
+    },
+    [commitHistory]
+  );
+  const scheduleAfterApplySnapshot = useCallback(
+    (messageId, summary, templateOverride) => {
+      if (!optionsRef.current.snapshotsEnabled)
+        return;
+      globalThis.setTimeout(() => {
+        createSnapshot("after-ai-apply", messageId, summary, templateOverride);
+      }, 0);
+    },
+    [createSnapshot]
+  );
+  const restoreSnapshot = useCallback(
+    (snapshotId) => __async(this, null, function* () {
+      if (!optionsRef.current.snapshotsEnabled || !optionsRef.current.onRestoreSnapshot) {
+        return;
+      }
+      yield optionsRef.current.onRestoreSnapshot(snapshotId);
+      commitHistory(
+        (history) => __spreadProps(__spreadValues({}, history), {
+          currentSnapshotId: snapshotId
+        }),
+        { type: "snapshot.restored", snapshotId }
+      );
+    }),
+    [commitHistory]
+  );
+  const hasTemplateChanged = useCallback((activeRun) => {
+    if (!activeRun.baseTemplateKey)
+      return false;
+    return templateKey(optionsRef.current.getTemplate()) !== activeRun.baseTemplateKey;
+  }, []);
+  const refreshActiveRunTemplateKey = useCallback((activeRun) => {
+    void Promise.resolve().then(() => {
+      if (activeRunRef.current !== activeRun)
+        return;
+      activeRun.baseTemplateKey = templateKey(optionsRef.current.getTemplate());
+    });
+  }, []);
+  const applyToolCalls = useCallback(
+    (activeRun, payload, toolCalls) => __async(this, null, function* () {
+      var _a, _b, _c;
+      const applyToolCallsHandler = optionsRef.current.onApplyToolCalls;
+      if (!toolCalls.length || !applyToolCallsHandler)
+        return false;
+      setActivity(t("Applying local changes..."));
+      try {
+        const result = yield applyToolCallsHandler(toolCalls, __spreadProps(__spreadValues({}, payload), {
+          toolCalls
+        }));
+        const errors = userFacingApplyErrors(
+          ((_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),
+          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) {
+          scheduleAfterApplySnapshot(
+            activeRun.assistantMessageId,
+            payload.summary
+          );
+        }
+      } catch (error2) {
+        const nextError = ensureError(error2);
+        updateMessage(activeRun.assistantMessageId, {
+          content: `${t("Local changes failed")}: ${nextError.message}`,
+          status: "error"
+        });
+        setActivity("");
+        (_c = (_b = optionsRef.current).onError) == null ? void 0 : _c.call(_b, nextError);
+        return false;
+      }
+      return true;
+    }),
+    [scheduleAfterApplySnapshot, updateMessage]
+  );
+  const ensureGeneratedImageUrl = useCallback(
+    (image2) => __async(this, null, function* () {
+      if (isRemoteImageUrl(image2.url))
+        return __spreadProps(__spreadValues({}, image2), { dataUrl: void 0 });
+      const uploadHandler = optionsRef.current.onUploadGeneratedImage;
+      if (!uploadHandler) {
+        throw new Error(t("Generated image upload is not configured"));
+      }
+      const uploaded = yield uploadHandler(image2);
+      if (!isRemoteImageUrl(uploaded.url)) {
+        throw new Error(t("Generated image upload did not return a URL"));
+      }
+      return __spreadProps(__spreadValues({}, uploaded), { dataUrl: void 0 });
+    }),
+    []
+  );
+  const applyTemplateChange = useCallback(
+    (activeRun, template, summary) => {
+      var _a, _b;
+      (_b = (_a = optionsRef.current).onApplyTemplate) == null ? void 0 : _b.call(_a, template);
+      updateMessage(activeRun.assistantMessageId, {
+        content: summary || t("Updated the email preview."),
+        status: "ready"
+      });
+      setActivity(t("Email preview updated"));
+      scheduleAfterApplySnapshot(
+        activeRun.assistantMessageId,
+        summary,
+        template
+      );
+    },
+    [scheduleAfterApplySnapshot, updateMessage]
+  );
+  const applyPendingChange = useCallback(() => __async(this, null, function* () {
+    const pending = pendingChange;
+    if (!pending || applyingPendingChange)
+      return;
+    setApplyingPendingChange(true);
+    try {
+      if (pending.kind === "tool_calls") {
+        const applied = yield applyToolCalls(
+          { assistantMessageId: pending.assistantMessageId },
+          pending.payload,
+          pending.toolCalls
+        );
+        if (!applied)
+          return;
+      } else {
+        applyTemplateChange(
+          { assistantMessageId: pending.assistantMessageId },
+          pending.template,
+          pending.summary
+        );
+      }
+      setPendingChange(null);
+    } finally {
+      setApplyingPendingChange(false);
+    }
+  }), [
+    applyingPendingChange,
+    applyTemplateChange,
+    applyToolCalls,
+    pendingChange
+  ]);
+  const finishActiveRun = useCallback(
+    (nextStatus) => {
+      const activeRun = activeRunRef.current;
+      if (!activeRun || activeRun.done)
+        return;
+      activeRun.done = true;
+      abortStream();
+      activeRunRef.current = null;
+      setActivity("");
+      setStatus(nextStatus === "ERROR" ? "error" : "ready");
+      const assistantMessage = historyRef.current.messages.find(
+        (message) => message.id === activeRun.assistantMessageId
+      );
+      if ((assistantMessage == null ? void 0 : assistantMessage.status) !== "pending_apply") {
+        updateMessage(activeRun.assistantMessageId, {
+          status: nextStatus === "ERROR" ? "error" : "ready"
+        });
+      }
+    },
+    [abortStream, updateMessage]
+  );
+  const failRun = useCallback(
+    (error2, assistantMessageId) => {
+      var _a, _b;
+      abortStream();
+      activeRunRef.current = null;
+      setActivity("");
+      setStatus("error");
+      if (assistantMessageId) {
+        updateMessage(assistantMessageId, {
+          content: `${t("This request failed")}: ${error2.message}`,
+          status: "error"
+        });
+      }
+      (_b = (_a = optionsRef.current).onError) == null ? void 0 : _b.call(_a, error2);
+    },
+    [abortStream, updateMessage]
+  );
+  const handleAgentEvent = useCallback(
+    (activeRun, event) => {
+      if (event.type === "status") {
+        if (event.payload.status === "RUNNING") {
+          setActivity(t("Updating the email..."));
+        }
+        if (doneStatuses.includes(event.payload.status)) {
+          finishActiveRun(event.payload.status);
+        }
+        return;
+      }
+      if (event.type === "input") {
+        setActivity(friendlyActivity(event.payload.text));
+        return;
+      }
+      if (event.type === "usage") {
+        updateMessage(activeRun.assistantMessageId, {
+          usage: event.payload
+        });
+        return;
+      }
+      if (event.type === "sources") {
+        updateMessage(activeRun.assistantMessageId, {
+          sources: event.payload.sources
+        });
+        return;
+      }
+      if (event.type === "easy_email_answer") {
+        updateMessage(activeRun.assistantMessageId, {
+          content: event.payload.answer || t("Sure.")
+        });
+        setActivity("");
+        return;
+      }
+      if (event.type === "decision_request") {
+        setPendingDecision(event.payload);
+        updateMessage(activeRun.assistantMessageId, {
+          content: event.payload.message,
+          status: "pending_apply"
+        });
+        setActivity(t("Waiting for your choice"));
+        return;
+      }
+      if (event.type === "image_result") {
+        void (() => __async(this, null, function* () {
+          var _a, _b;
+          try {
+            const rawGeneratedImage = event.payload.images[0];
+            if (!rawGeneratedImage)
+              throw new Error(t("Generated image is missing"));
+            setActivity(t("Uploading generated image..."));
+            const generatedImage = yield ensureGeneratedImageUrl(rawGeneratedImage);
+            const generatedImageUrl = generatedImage.url || "";
+            const payload = __spreadProps(__spreadValues({}, event.payload), {
+              images: [generatedImage, ...event.payload.images.slice(1)]
+            });
+            const target = imageReplacementTarget(activeRun, payload.target);
+            const imageChoices = imageDecisionChoices(
+              payload,
+              activeRun.editorImages,
+              t("Image")
+            );
+            if (generatedImageUrl && target && payload.intent !== "attach" && canAutoReplaceImageTarget(
+              activeRun,
+              target,
+              payload.confidence
+            ) && optionsRef.current.onApplyToolCalls) {
+              void applyToolCalls(
+                activeRun,
+                {
+                  summary: payload.summary || t("Updated the selected image."),
+                  toolCalls: []
+                },
+                [
+                  {
+                    name: "update_attribute",
+                    target,
+                    key: imageTargetAttributeKey(
+                      activeRun.editorImages,
+                      target
+                    ),
+                    value: generatedImageUrl
+                  }
+                ]
+              ).then((applied) => {
+                if (applied)
+                  refreshActiveRunTemplateKey(activeRun);
+              });
+              updateMessage(activeRun.assistantMessageId, {
+                content: imageResultText(payload),
+                attachments: payload.images.map(mapGeneratedImageAttachment),
+                status: "ready"
+              });
+              setActivity(t("Image generated"));
+              return;
+            }
+            updateMessage(activeRun.assistantMessageId, {
+              content: imageResultText(payload),
+              attachments: payload.images.map(mapGeneratedImageAttachment),
+              status: imageChoices.length ? "pending_apply" : "ready"
+            });
+            if (generatedImageUrl && payload.intent !== "attach" && imageChoices.length) {
+              setPendingDecision({
+                id: activeRun.assistantMessageId,
+                kind: "target_block",
+                title: t("Which image should I replace?"),
+                message: t(
+                  "Choose the image block that should use the generated image."
+                ),
+                choices: imageChoices,
+                required: false,
+                image: generatedImage
+              });
+              setActivity(t("Choose which image to replace"));
+              return;
+            }
+            setActivity(t("Image generated"));
+          } catch (error2) {
+            const nextError = ensureError(error2);
+            updateMessage(activeRun.assistantMessageId, {
+              content: `${t("This request failed")}: ${nextError.message}`,
+              status: "error"
+            });
+            setActivity("");
+            (_b = (_a = optionsRef.current).onError) == null ? void 0 : _b.call(_a, nextError);
+          }
+        }))();
+        return;
+      }
+      if (event.type === "easy_email_result") {
+        const payload = event.payload;
+        updateMessage(activeRun.assistantMessageId, {
+          content: resultText(payload)
+        });
+        if (payload.valid && payload.template) {
+          if (hasTemplateChanged(activeRun)) {
+            setPendingChange({
+              kind: "template",
+              assistantMessageId: activeRun.assistantMessageId,
+              template: payload.template,
+              summary: payload.summary
+            });
+            updateMessage(activeRun.assistantMessageId, {
+              content: pendingText(payload.summary),
+              status: "pending_apply"
+            });
+            setActivity(t("AI changes are ready to apply"));
+            return;
+          }
+          applyTemplateChange(activeRun, payload.template, payload.summary);
+          refreshActiveRunTemplateKey(activeRun);
+        }
+        return;
+      }
+      if (event.type === "easy_email_tool_calls") {
+        const payload = normalizeToolCallsPayload(event.payload);
+        const toolCalls = freezeSelectedTargets(
+          payload.toolCalls,
+          activeRun.selectedTarget
+        );
+        if (toolCalls.length && optionsRef.current.onApplyToolCalls) {
+          if (hasTemplateChanged(activeRun)) {
+            setPendingChange({
+              kind: "tool_calls",
+              assistantMessageId: activeRun.assistantMessageId,
+              payload: __spreadProps(__spreadValues({}, payload), { toolCalls }),
+              toolCalls
+            });
+            updateMessage(activeRun.assistantMessageId, {
+              content: pendingText(payload.summary),
+              status: "pending_apply"
+            });
+            setActivity(t("AI changes are ready to apply"));
+            return;
+          }
+          void applyToolCalls(activeRun, payload, toolCalls).then((applied) => {
+            if (applied)
+              refreshActiveRunTemplateKey(activeRun);
+          });
+          return;
+        }
+        if (payload.fallbackTemplate) {
+          if (hasTemplateChanged(activeRun)) {
+            setPendingChange({
+              kind: "template",
+              assistantMessageId: activeRun.assistantMessageId,
+              template: payload.fallbackTemplate,
+              summary: payload.summary
+            });
+            updateMessage(activeRun.assistantMessageId, {
+              content: pendingText(payload.summary),
+              status: "pending_apply"
+            });
+            setActivity(t("AI changes are ready to apply"));
+            return;
+          }
+          applyTemplateChange(
+            activeRun,
+            payload.fallbackTemplate,
+            payload.summary
+          );
+          refreshActiveRunTemplateKey(activeRun);
+        }
+        return;
+      }
+      if (event.type === "error") {
+        failRun(new Error(event.payload.message), activeRun.assistantMessageId);
+      }
+    },
+    [
+      applyTemplateChange,
+      applyToolCalls,
+      failRun,
+      finishActiveRun,
+      hasTemplateChanged,
+      refreshActiveRunTemplateKey,
+      updateMessage
+    ]
+  );
+  const send = useCallback(
+    (_0, ..._1) => __async(this, [_0, ..._1], function* (message, attachments = [], decisionResponse) {
+      var _a, _b, _c;
+      const text = message.trim();
+      if (!text || status2 === "running")
+        return;
+      const template = optionsRef.current.getTemplate();
+      const baseTemplateKey = templateKey(template);
+      const editorContext = (_b = (_a = optionsRef.current).getEditorContext) == null ? void 0 : _b.call(_a);
+      const requestHistory = historyRef.current;
+      const createdAt = isoNow();
+      const userMessage = {
+        id: id("user"),
+        role: "user",
+        content: text,
+        time: formatTime(new Date(createdAt)),
+        createdAt,
+        status: "ready",
+        attachments
+      };
+      const assistantMessage = {
+        id: id("assistant"),
+        role: "assistant",
+        content: attachments.length ? t(
+          "Reference images received. Adjusting the email with the current template..."
+        ) : t("Generating changes from the current email..."),
+        time: formatTime(new Date(createdAt)),
+        createdAt,
+        status: "running"
+      };
+      setPendingChange(null);
+      setPendingDecision(null);
+      commitHistory(
+        (history) => __spreadProps(__spreadValues({}, history), {
+          messages: [...history.messages, userMessage, assistantMessage]
+        }),
+        { type: "message.appended", messages: [userMessage, assistantMessage] }
+      );
+      createSnapshot("before-ai-run", userMessage.id, text, template);
+      setStatus("running");
+      setActivity(t("Sending to AI..."));
+      const activeRun = {
+        assistantMessageId: assistantMessage.id,
+        baseTemplateKey,
+        selectedTarget: selectedTargetFromContext(editorContext),
+        selectedType: ((_c = editorContext == null ? void 0 : editorContext.selected) == null ? void 0 : _c.type) || null,
+        editorImages: editorContext == null ? void 0 : editorContext.images,
+        done: false
+      };
+      const controller = new AbortController();
+      activeRunRef.current = activeRun;
+      streamAbortRef.current = controller;
+      setActivity(t("Connecting live results..."));
+      void (() => __async(this, null, function* () {
+        const result = yield optionsRef.current.onChat({
+          message: text,
+          template,
+          history: requestHistory,
+          editorContext,
+          decisionResponse,
+          images: attachments.map(mapAiAttachment),
+          signal: controller.signal
+        });
+        if (controller.signal.aborted || activeRunRef.current !== activeRun) {
+          return;
+        }
+        yield resolveAiChatResult(result, (event) => {
+          if (controller.signal.aborted || activeRunRef.current !== activeRun) {
+            return;
+          }
+          handleAgentEvent(activeRun, event);
+        });
+      }))().catch((error2) => {
+        if (controller.signal.aborted && !activeRunRef.current)
+          return;
+        failRun(ensureError(error2), assistantMessage.id);
+      });
+    }),
+    [commitHistory, createSnapshot, failRun, handleAgentEvent, status2]
+  );
+  const chooseDecision = useCallback(
+    (choice, response) => __async(this, null, function* () {
+      const decision = pendingDecision;
+      if (!decision)
+        return;
+      setPendingDecision(null);
+      setPendingChange(null);
+      if (decision.kind === "target_block" && decision.image && choice.target) {
+        const imageUrl = decision.image.url || "";
+        if (!imageUrl)
+          return;
+        yield applyToolCalls(
+          { assistantMessageId: decision.id },
+          {
+            summary: t("Replaced the chosen image."),
+            toolCalls: []
+          },
+          [
+            {
+              name: "update_attribute",
+              target: choice.target,
+              key: choiceImageAttributeKey(choice),
+              value: imageUrl
+            }
+          ]
+        );
+        return;
+      }
+      const prompt = choice.prompt || response.customText || `${t("Continue with this option")}: ${choice.label}`;
+      yield send(prompt, [], response);
+    }),
+    [applyToolCalls, pendingDecision, send]
+  );
+  const clearPendingDecision = useCallback(() => {
+    setPendingDecision(null);
+  }, []);
+  const stop = useCallback(() => __async(this, null, function* () {
+    abortStream();
+    activeRunRef.current = null;
+    setActivity("");
+    setStatus("ready");
+  }), [abortStream]);
+  useEffect(() => {
+    return () => abortStream();
+  }, [abortStream]);
+  return {
+    history: historyState,
+    messages: historyState.messages,
+    snapshots: historyState.snapshots || [],
+    currentSnapshotId: historyState.currentSnapshotId,
+    status: status2,
+    activity,
+    pendingChange,
+    pendingDecision,
+    applyingPendingChange,
+    applyPendingChange,
+    chooseDecision,
+    clearPendingDecision,
+    restoreSnapshot,
+    send,
+    stop
+  };
+}
+const IMAGE_BLOCK_TYPES = /* @__PURE__ */ new Set(["standard-image", "image"]);
+const BACKGROUND_IMAGE_BLOCK_TYPES = /* @__PURE__ */ new Set([
+  "section",
+  "wrapper",
+  "hero",
+  "standard-section",
+  "standard-wrapper",
+  "standard-hero"
+]);
+function asEmailTemplate(template, current) {
+  if (!template || typeof template !== "object")
+    return current;
+  const record = template;
+  if (record.content && typeof record.content === "object") {
+    return __spreadValues(__spreadValues({}, current), record);
+  }
+  if (record.type === "page") {
+    return __spreadProps(__spreadValues({}, current), { content: record });
+  }
+  return current;
+}
+function createAttachmentId(file) {
+  if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
+    return `image-${crypto.randomUUID()}`;
+  }
+  return `image-${file.name || "upload"}-${Date.now()}`;
+}
+function normalizeUploadResult(result, file) {
+  if (typeof result === "string") {
+    return {
+      id: createAttachmentId(file),
+      type: "image",
+      name: file.name || "image",
+      url: result,
+      mimeType: file.type || "image/png",
+      size: file.size
+    };
+  }
+  return __spreadProps(__spreadValues({}, result), {
+    type: "image",
+    name: result.name || file.name || "image",
+    url: result.url || "",
+    mimeType: result.mimeType || file.type || "image/png",
+    size: result.size || file.size
+  });
+}
+function dataUrlToFile(attachment) {
+  const dataUrl = attachment.dataUrl || attachment.url || "";
+  const match = dataUrl.match(/^data:([^;,]+)?(;base64)?,([\s\S]*)$/);
+  if (!match)
+    throw new Error(t("Generated image must be uploaded before use"));
+  const mimeType = match[1] || attachment.mimeType || "image/png";
+  const isBase64 = Boolean(match[2]);
+  const raw = isBase64 ? atob(match[3]) : decodeURIComponent(match[3]);
+  const bytes = new Uint8Array(raw.length);
+  for (let index2 = 0; index2 < raw.length; index2 += 1) {
+    bytes[index2] = raw.charCodeAt(index2);
+  }
+  return new File([bytes], attachment.name || "generated-image.png", {
+    type: mimeType,
+    lastModified: Date.now()
+  });
+}
+function numberFromUnknown(value) {
+  if (typeof value === "number" && Number.isFinite(value) && value > 0) {
+    return value;
+  }
+  if (typeof value !== "string")
+    return void 0;
+  const match = value.trim().match(/^(\d+(?:\.\d+)?)/);
+  if (!match)
+    return void 0;
+  const nextValue = Number.parseFloat(match[1]);
+  return Number.isFinite(nextValue) && nextValue > 0 ? nextValue : void 0;
+}
+function getImageDimensions(node) {
+  const attributes = node.attributes && typeof node.attributes === "object" ? node.attributes : {};
+  const data = node.data && typeof node.data === "object" ? node.data : {};
+  return {
+    width: numberFromUnknown(attributes.width) || numberFromUnknown(attributes["image-width"]) || numberFromUnknown(data.width) || numberFromUnknown(data["image-width"]),
+    height: numberFromUnknown(attributes.height) || numberFromUnknown(attributes["image-height"]) || numberFromUnknown(data.height) || numberFromUnknown(data["image-height"])
+  };
+}
+function getImageSrc(node) {
+  const attributes = node.attributes && typeof node.attributes === "object" ? node.attributes : {};
+  const data = node.data && typeof node.data === "object" ? node.data : {};
+  return typeof attributes.src === "string" ? attributes.src : typeof data.src === "string" ? data.src : void 0;
+}
+function getBackgroundImageSrc(node) {
+  const attributes = node.attributes && typeof node.attributes === "object" ? node.attributes : {};
+  const data = node.data && typeof node.data === "object" ? node.data : {};
+  return typeof attributes["background-url"] === "string" ? attributes["background-url"] : typeof data["background-url"] === "string" ? data["background-url"] : void 0;
+}
+function supportsBackgroundImage(node) {
+  const type = typeof node.type === "string" ? node.type : "";
+  const attributes = node.attributes && typeof node.attributes === "object" ? node.attributes : {};
+  return BACKGROUND_IMAGE_BLOCK_TYPES.has(type) || typeof attributes["background-url"] === "string" || attributes["background-image-enabled"] === true;
+}
+function imageAssetTitle(node, source) {
+  if (typeof node.title === "string" && node.title.trim())
+    return node.title;
+  const type = typeof node.type === "string" ? node.type : "";
+  if (source === "background") {
+    if (type.includes("hero"))
+      return t("Hero background");
+    if (type.includes("wrapper"))
+      return t("Container background");
+    if (type.includes("section"))
+      return t("Section background");
+    return t("Background image");
+  }
+  return t("Image");
+}
+function selectedDescendants(editor, selectedNodePath) {
+  if (!selectedNodePath)
+    return [];
+  return Array.from(
+    Editor.nodes(editor, {
+      at: selectedNodePath,
+      match: (node, path2) => path2.length > selectedNodePath.length && typeof node.type === "string"
+    })
+  ).map(([node, path2]) => {
+    const element = node;
+    const text = Node.string(node).trim();
+    return {
+      id: typeof element.id === "string" ? element.id : void 0,
+      uid: typeof element.uid === "string" ? element.uid : void 0,
+      type: element.type,
+      path: path2,
+      title: typeof element.title === "string" ? element.title : void 0,
+      text: text || void 0
+    };
+  }).filter((item2) => item2.text || item2.id || item2.uid).slice(0, 80);
+}
+function AiAgentPanel({
+  className,
+  disabled,
+  history,
+  onHistoryChange,
+  snapshots,
+  initialMessages,
+  onError,
+  onUpload: uploadOverride,
+  onChat,
+  quickActions,
+  placeholder
+}) {
+  assertAiAgentFeatureEnabled();
+  const { values, reset } = useEditorContext();
+  const { onUpload: editorUpload } = useEditorProps();
+  const { selectedNode, selectedNodePath } = useSelectedNode();
+  const editor = useSlate();
+  const applyAiToolCalls = useApplyAiToolCalls();
+  const snapshotOptions = snapshots || void 0;
+  const valuesRef = useRef(values);
+  const selectedRef = useRef({ selectedNode, selectedNodePath });
+  useEffect(() => {
+    valuesRef.current = values;
+  }, [values]);
+  useEffect(() => {
+    selectedRef.current = { selectedNode, selectedNodePath };
+  }, [selectedNode, selectedNodePath]);
+  const uploadAttachment = useCallback(
+    (file) => __async(this, null, function* () {
+      const uploadHandler = uploadOverride || editorUpload;
+      if (!uploadHandler) {
+        throw new Error(t("Image upload is not configured"));
+      }
+      const result = yield uploadHandler(file);
+      return normalizeUploadResult(result, file);
+    }),
+    [editorUpload, uploadOverride]
+  );
+  const session = useAiAgentSession({
+    onChat,
+    history,
+    onHistoryChange,
+    initialMessages,
+    onError,
+    snapshotsEnabled: Boolean(snapshotOptions),
+    onSnapshotCreate: snapshotOptions ? snapshotOptions.onCreate : void 0,
+    onRestoreSnapshot: (snapshotOptions == null ? void 0 : snapshotOptions.onRestore) ? (snapshotId) => __async(this, null, function* () {
+      var _a;
+      const snapshot = yield (_a = snapshotOptions.onRestore) == null ? void 0 : _a.call(snapshotOptions, snapshotId);
+      if (!snapshot)
+        return;
+      reset(asEmailTemplate(snapshot.template, valuesRef.current));
+    }) : void 0,
+    onUploadGeneratedImage: (image2) => __async(this, null, function* () {
+      if (image2.url && !image2.url.startsWith("data:")) {
+        return __spreadProps(__spreadValues({}, image2), { dataUrl: void 0 });
+      }
+      const uploaded = yield uploadAttachment(dataUrlToFile(image2));
+      return __spreadProps(__spreadValues({}, image2), {
+        url: uploaded.url,
+        dataUrl: void 0,
+        mimeType: uploaded.mimeType || image2.mimeType,
+        size: uploaded.size || image2.size
+      });
+    }),
+    getTemplate: () => valuesRef.current,
+    getEditorContext: () => {
+      const { selectedNode: selectedNode2, selectedNodePath: selectedNodePath2 } = selectedRef.current;
+      const images = Array.from(
+        Editor.nodes(editor, {
+          at: [],
+          match: (node) => typeof node.type === "string" && (IMAGE_BLOCK_TYPES.has(
+            node.type
+          ) || supportsBackgroundImage(node))
+        })
+      ).map(([node, path2], index2) => {
+        const imageNode = node;
+        const isImageBlock = IMAGE_BLOCK_TYPES.has(imageNode.type);
+        const source = isImageBlock ? "image" : "background";
+        const dimensions = getImageDimensions(imageNode);
+        const layout2 = (() => {
+          try {
+            const domNode = ReactEditor.toDOMNode(editor, node);
+            const rect = domNode.getBoundingClientRect();
+            if (rect.width > 0 && rect.height > 0) {
+              return {
+                width: Math.round(rect.width),
+                height: Math.round(rect.height)
+              };
+            }
+          } catch (e) {
+          }
+          return void 0;
+        })();
+        return {
+          id: typeof imageNode.id === "string" ? imageNode.id : void 0,
+          uid: typeof imageNode.uid === "string" ? imageNode.uid : void 0,
+          type: imageNode.type,
+          path: path2,
+          title: imageAssetTitle(imageNode, source),
+          src: isImageBlock ? getImageSrc(imageNode) : getBackgroundImageSrc(imageNode),
+          source,
+          attributeKey: isImageBlock ? "src" : "background-url",
+          width: (layout2 == null ? void 0 : layout2.width) || dimensions.width,
+          height: (layout2 == null ? void 0 : layout2.height) || dimensions.height,
+          index: index2
+        };
+      });
+      if (!selectedNode2)
+        return { selected: null, images };
+      const layout = (() => {
+        try {
+          const domNode = ReactEditor.toDOMNode(editor, selectedNode2);
+          const rect = domNode.getBoundingClientRect();
+          if (rect.width > 0 && rect.height > 0) {
+            return {
+              width: Math.round(rect.width),
+              height: Math.round(rect.height)
+            };
+          }
+        } catch (e) {
+        }
+        return void 0;
+      })();
+      return {
+        images,
+        selected: {
+          id: selectedNode2.id,
+          uid: selectedNode2.uid,
+          type: selectedNode2.type,
+          path: selectedNodePath2 || void 0,
+          title: selectedNode2.title,
+          attributes: selectedNode2.attributes,
+          data: selectedNode2.data,
+          layout,
+          descendants: selectedDescendants(
+            editor,
+            selectedNodePath2 || void 0
+          )
+        }
+      };
+    },
+    onApplyTemplate: (template) => {
+      reset(asEmailTemplate(template, valuesRef.current));
+    },
+    onApplyToolCalls: applyAiToolCalls
+  });
+  return /* @__PURE__ */ React__default.createElement(
+    EasyEmailProAiAgent,
+    {
+      className,
+      messages: session.messages,
+      status: session.status,
+      activity: session.activity,
+      disabled,
+      sendDisabled: disabled || session.status === "running",
+      quickActions,
+      placeholder,
+      pendingAction: session.pendingChange ? {
+        label: session.applyingPendingChange ? t("Applying...") : t("Apply AI changes"),
+        disabled: session.applyingPendingChange,
+        onClick: session.applyPendingChange
+      } : void 0,
+      pendingDecision: session.pendingDecision,
+      onSend: session.send,
+      onUpload: uploadOverride || editorUpload ? uploadAttachment : void 0,
+      onChooseDecision: session.chooseDecision,
+      onCancelDecision: session.clearPendingDecision,
+      onRestoreSnapshot: (snapshotOptions == null ? void 0 : snapshotOptions.onRestore) ? session.restoreSnapshot : void 0
+    }
+  );
+}
 const DraggingPlaceholderWrapper = (props) => {
   const isDragover = get(props.attributes, "data-slate-dragover");
   const isDragging = get(props.attributes, "data-slate-dragging");
@@ -42074,7 +44454,8 @@ const SharedComponents = {
   BlocksModal,
   TableTools,
   SocialItem: SocialItem$2,
-  NavbarLink: NavbarLink$1
+  NavbarLink: NavbarLink$1,
+  AiAgent: void 0
 };
 const stopEvent$1 = (ev) => {
   ev.stopPropagation();
@@ -44334,6 +46715,7 @@ const Layout = ({ children }) => {
 const Minimalist = { useCreateConfig, Layout };
 const IconFontStyle = styleText$h;
 export {
+  AiAgentPanel,
   AttributeField,
   AttributesPanelWrapper,
   BlockSchemasMap,
@@ -44342,6 +46724,7 @@ export {
   ControllerProvider,
   DraggingProvider,
   DraggingProviderContext,
+  EasyEmailProAiAgent,
   ElementStyles,
   IconFont,
   IconFontStyle,
@@ -44364,11 +46747,15 @@ export {
   getMergeTagsByType,
   italicAdapter,
   mjmlToJson,
+  parseEasyEmailAiStream,
   pixelAdapter,
   pixelNumberAdapter,
   previewLoadImage,
+  resolveAiChatResult2 as resolveAiChatResult,
   sliderAdapter,
   useAddBlock,
+  useAiAgentSession,
+  useApplyAiToolCalls,
   useBlocksDrawer,
   useClearCanvas,
   useColorContext,