@mjml-agent-editor/editor 0.1.12 → 0.1.15

package/dist/canvas.cjs

@@ -37,9 +37,9 @@ module.exports = __toCommonJS(canvas_exports);
 
 // src/components/editor/EmailEditor.tsx
 var import_grapesjs = __toESM(require("grapesjs"), 1);
-var import_react4 = __toESM(require("@grapesjs/react"), 1);
+var import_react6 = __toESM(require("@grapesjs/react"), 1);
 var import_grapesjs_mjml = __toESM(require("grapesjs-mjml"), 1);
-var import_react5 = require("react");
+var import_react7 = require("react");
 var import_core2 = require("@mjml-agent-editor/core");
 
 // src/stores.tsx
@@ -74,6 +74,29 @@ var DEFAULT_LABELS = {
   rteBackgroundColor: "Background color",
   documentLoadFailed: "Failed to load the document.",
   documentSaveFailed: "Failed to save changes.",
+  retry: "Retry",
+  chooseImage: "Choose image",
+  imagePickerTitle: "Choose an image",
+  imagePickerDrop: "Drag images here, or",
+  imagePickerBrowse: "Browse files",
+  imagePickerUrlPlaceholder: "\u2026or paste an image URL",
+  imagePickerUseUrl: "Use URL",
+  imagePickerGallery: "Your images",
+  imagePickerEmpty: "No images yet \u2014 the ones you upload will be kept here.",
+  imagePickerQuota: (used, limit) => `${used} of ${limit} uploads used`,
+  imagePickerQuotaFull: "Upload limit reached \u2014 pick an image below or paste a URL.",
+  imagePickerDelete: "Delete image",
+  imagePickerConfirmDelete: "Click again to delete",
+  imagePickerLoadFailed: "Failed to load your images.",
+  imageUploadFailed: "Failed to upload the image.",
+  imageDeleteFailed: "Failed to delete the image.",
+  imagePickerUnsupported: (fileName) => `${fileName} is not a supported image type.`,
+  imageFieldRemove: "Remove image",
+  colorPickerOpen: "Pick a color",
+  colorPickerEyedropper: "Pick from the screen",
+  colorPickerDocument: "In this email",
+  colorPickerPresets: "Presets",
+  colorPickerTransparent: "Transparent",
   commentOnSection: "Comment on the whole section",
   closeComments: "Close",
   noCommentsYet: "No comments yet \u2014 add the first one.",
@@ -85,6 +108,7 @@ var DEFAULT_LABELS = {
   agentWorking: "Agent is working\u2026",
   reasoning: "Reasoning",
   completedSteps: (count, failed) => failed > 0 ? `Completed steps (${count}, ${failed} failed)` : `Completed steps (${count})`,
+  stepLimitReached: "The agent ran out of steps for this turn. Ask it to continue.",
   applyComments: "Apply changes from comments",
   chatPlaceholder: "Describe what you want to change\u2026 (Enter = send, Shift+Enter = new line)",
   stop: "Stop",
@@ -115,6 +139,17 @@ function mergeLabels(overrides) {
 var import_jsx_runtime = require("react/jsx-runtime");
 var StoreContext = (0, import_react.createContext)(null);
 var LabelContext = (0, import_react.createContext)(null);
+var TurnContext = (0, import_react.createContext)({
+  running: false,
+  setRunning: () => {
+  },
+  locked: false,
+  setLocked: () => {
+  }
+});
+function useAgentTurn() {
+  return (0, import_react.useContext)(TurnContext);
+}
 function useLabels() {
   return (0, import_react.useContext)(LabelContext) ?? mergeLabels();
 }
@@ -133,6 +168,9 @@ function useDocumentStore() {
 function useCommentStore() {
   return useStores().comments;
 }
+function useImageLibrary() {
+  return useStores().images;
+}
 
 // src/index.ts
 var import_core = require("@mjml-agent-editor/core");
@@ -239,6 +277,9 @@ var import_jsx_runtime5 = require("react/jsx-runtime");
 function Popover({ ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_radix_ui2.Popover.Root, { "data-slot": "popover", ...props });
 }
+function PopoverTrigger({ ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_radix_ui2.Popover.Trigger, { "data-slot": "popover-trigger", ...props });
+}
 function PopoverAnchor({ ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_radix_ui2.Popover.Anchor, { "data-slot": "popover-anchor", ...props });
 }
@@ -263,11 +304,117 @@ function PopoverContent({
   ) });
 }
 
-// src/components/ui/textarea.tsx
+// src/components/ui/dialog.tsx
 var React4 = require("react");
+var import_radix_ui3 = require("radix-ui");
+var import_lucide_react2 = require("lucide-react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-function Textarea({ className, ...props }) {
+function Dialog({ ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_radix_ui3.Dialog.Root, { "data-slot": "dialog", ...props });
+}
+function DialogPortal({ ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_radix_ui3.Dialog.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_radix_ui3.Dialog.Overlay,
+    {
+      "data-slot": "dialog-overlay",
+      className: cn(
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(DialogPortal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DialogOverlay, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      import_radix_ui3.Dialog.Content,
+      {
+        "data-slot": "dialog-content",
+        className: cn(
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_radix_ui3.Dialog.Close, { "data-slot": "dialog-close", asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Button, { variant: "ghost", className: "absolute top-2 right-2", size: "icon-sm", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.XIcon, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "sr-only", children: "Close" })
+          ] }) })
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { "data-slot": "dialog-header", className: cn("flex flex-col gap-2", className), ...props });
+}
+function DialogTitle({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_radix_ui3.Dialog.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("font-heading text-base leading-none font-medium", className),
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_radix_ui3.Dialog.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn(
+        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/lib/refusal.ts
+function refusal(error) {
+  if (!(error instanceof Error)) return null;
+  const status = error.status;
+  const deliberate = typeof status === "number" ? status >= 400 && status < 500 : null;
+  if (deliberate === false) return null;
+  if (error.message.startsWith("{")) {
+    try {
+      const parsed = JSON.parse(error.message);
+      return typeof parsed.error === "string" && parsed.error.trim() !== "" ? parsed.error : null;
+    } catch {
+      return null;
+    }
+  }
+  const message = error.message.trim();
+  return deliberate && message !== "" && !message.startsWith("<") ? error.message : null;
+}
+function saveToastId(docId) {
+  return `document-save-${docId}`;
+}
+
+// src/components/ui/textarea.tsx
+var React5 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function Textarea({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "textarea",
     {
       "data-slot": "textarea",
@@ -283,8 +430,8 @@ function Textarea({ className, ...props }) {
 // src/components/comments/CanvasComments.tsx
 var import_react2 = require("@grapesjs/react");
 var import_react3 = require("react");
-var import_lucide_react2 = require("lucide-react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_lucide_react3 = require("lucide-react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var keyOf = (c) => c.objectId ? `obj-${c.objectId}` : `sec-${c.sectionId}`;
 var keyOfTarget = (t) => t.objectId ? `obj-${t.objectId}` : `sec-${t.sectionId}`;
 function CanvasComments({
@@ -438,11 +585,11 @@ function CanvasComments({
       console.error(e);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { ref: containerRef, className: "pointer-events-none absolute inset-0 z-20 overflow-hidden", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { ref: containerRef, className: "pointer-events-none absolute inset-0 z-20 overflow-hidden", children: [
     pins.map(({ key, list }) => {
       const pos = positions[key];
       if (!pos) return null;
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "button",
         {
           type: "button",
@@ -458,8 +605,8 @@ function CanvasComments({
         key
       );
     }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Popover, { open: !!activeKey && !!activePos, onOpenChange: (o) => !o && closePopover(), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Popover, { open: !!activeKey && !!activePos, onOpenChange: (o) => !o && closePopover(), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "div",
         {
           style: {
@@ -471,45 +618,45 @@ function CanvasComments({
           }
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
         PopoverContent,
         {
           side: "right",
           align: "start",
           className: "pointer-events-auto w-80 p-0 data-[state=closed]:!animate-none data-[state=closed]:!duration-0",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-start justify-between gap-2 border-b px-3 py-2 text-xs text-muted-foreground", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "min-w-0", children: activeTarget?.objectId ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-start justify-between gap-2 border-b px-3 py-2 text-xs text-muted-foreground", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "min-w-0", children: activeTarget?.objectId ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
                 "Comment on",
                 " ",
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "font-medium text-foreground", children: activeTarget.objectLabel })
-              ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "font-medium text-foreground", children: activeTarget.objectLabel })
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
                 labels.commentOnSection,
                 " ",
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("code", { className: "font-mono", children: activeTarget?.sectionId })
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("code", { className: "font-mono", children: activeTarget?.sectionId })
               ] }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 "button",
                 {
                   type: "button",
                   onClick: closePopover,
                   "aria-label": labels.closeComments,
                   className: "-mr-1 -mt-0.5 shrink-0 rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.X, { className: "size-4" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.X, { className: "size-4" })
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "max-h-64 space-y-2 overflow-y-auto p-3", children: [
-              activeComments.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-xs text-muted-foreground", children: labels.noCommentsYet }),
-              activeComments.map((c) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "rounded-md border bg-muted/40 p-2 text-sm", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "whitespace-pre-wrap", children: c.body }),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "max-h-64 space-y-2 overflow-y-auto p-3", children: [
+              activeComments.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-xs text-muted-foreground", children: labels.noCommentsYet }),
+              activeComments.map((c) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "rounded-md border bg-muted/40 p-2 text-sm", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "whitespace-pre-wrap", children: c.body }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                   "button",
                   {
                     onClick: () => void resolve(c.id),
                     className: "mt-1 inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground",
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.Check, { className: "size-3" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.Check, { className: "size-3" }),
                       " ",
                       labels.resolveComment
                     ]
@@ -517,8 +664,8 @@ function CanvasComments({
                 )
               ] }, c.id))
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "border-t p-3", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "border-t p-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 Textarea,
                 {
                   autoFocus: true,
@@ -534,8 +681,8 @@ function CanvasComments({
                   }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mt-2 flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Button, { size: "sm", disabled: !body.trim(), onClick: () => void submit(), children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.MessageSquarePlus, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "mt-2 flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Button, { size: "sm", disabled: !body.trim(), onClick: () => void submit(), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.MessageSquarePlus, {}),
                 " ",
                 labels.addComment
               ] }) })
@@ -547,21 +694,50 @@ function CanvasComments({
   ] });
 }
 
+// src/lib/save-queue.ts
+function createSaveQueue(save, delayMs) {
+  let timer = null;
+  let tail = Promise.resolve();
+  const cancel = () => {
+    if (timer) clearTimeout(timer);
+    timer = null;
+  };
+  const run = (task) => {
+    const next = tail.then(task);
+    tail = next.catch(() => {
+    });
+    return next;
+  };
+  return {
+    schedule() {
+      cancel();
+      timer = setTimeout(() => void run(save).catch(() => {
+      }), delayMs);
+    },
+    cancel,
+    flush() {
+      cancel();
+      return run(save);
+    },
+    run
+  };
+}
+
 // src/components/editor/EmailEditor.tsx
-var import_sonner = require("sonner");
-var import_lucide_react3 = require("lucide-react");
+var import_sonner2 = require("sonner");
+var import_lucide_react7 = require("lucide-react");
 
 // src/components/ui/switch.tsx
-var React5 = require("react");
-var import_radix_ui3 = require("radix-ui");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var React6 = require("react");
+var import_radix_ui4 = require("radix-ui");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function Switch({
   className,
   size = "default",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    import_radix_ui3.Switch.Root,
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    import_radix_ui4.Switch.Root,
     {
       "data-slot": "switch",
       "data-size": size,
@@ -570,8 +746,8 @@ function Switch({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-        import_radix_ui3.Switch.Thumb,
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        import_radix_ui4.Switch.Thumb,
         {
           "data-slot": "switch-thumb",
           className: "pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
@@ -582,8 +758,583 @@ function Switch({
 }
 
 // src/components/editor/EmailEditor.tsx
+var import_lucide_react8 = require("lucide-react");
+
+// src/components/editor/ImagePicker.tsx
+var import_react4 = require("react");
 var import_lucide_react4 = require("lucide-react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_sonner = require("sonner");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function ImagePicker({
+  open,
+  currentUrl,
+  onSelect,
+  onClose
+}) {
+  const library = useImageLibrary();
+  const labels = useLabels();
+  const [images, setImages] = (0, import_react4.useState)([]);
+  const [quota, setQuota] = (0, import_react4.useState)();
+  const [loading, setLoading] = (0, import_react4.useState)(false);
+  const [pending, setPending] = (0, import_react4.useState)(0);
+  const [dragging, setDragging] = (0, import_react4.useState)(false);
+  const [url, setUrl] = (0, import_react4.useState)("");
+  const [confirmId, setConfirmId] = (0, import_react4.useState)(null);
+  const fileInput = (0, import_react4.useRef)(null);
+  const session = (0, import_react4.useRef)(0);
+  const latest = (0, import_react4.useRef)({ labels, onSelect });
+  latest.current = { labels, onSelect };
+  const lists = (0, import_react4.useRef)(0);
+  const refresh = (0, import_react4.useCallback)(async () => {
+    if (!library) return;
+    const mine = ++lists.current;
+    setLoading(true);
+    try {
+      const result = await library.list();
+      if (mine !== lists.current) return;
+      setImages(result.images);
+      setQuota(result.quota);
+    } catch (err) {
+      console.error(err);
+      if (mine === lists.current) import_sonner.toast.error(latest.current.labels.imagePickerLoadFailed);
+    } finally {
+      if (mine === lists.current) setLoading(false);
+    }
+  }, [library]);
+  (0, import_react4.useEffect)(() => {
+    session.current += 1;
+    if (!open) return;
+    setUrl("");
+    setConfirmId(null);
+    void refresh();
+  }, [open]);
+  (0, import_react4.useEffect)(() => () => void (session.current += 1), []);
+  const accepts = (file) => matchesAccept(file, library?.accept);
+  const full = quota !== void 0 && quota.used >= quota.limit;
+  const upload = async (files) => {
+    if (!library || !files?.length) return;
+    const mine = session.current;
+    const list = Array.from(files).filter((f) => {
+      if (accepts(f)) return true;
+      import_sonner.toast.error(labels.imagePickerUnsupported(f.name));
+      return false;
+    });
+    if (!list.length) return;
+    setPending((n) => n + list.length);
+    const results = await Promise.allSettled(list.map(async (f) => library.upload(f)));
+    setPending((n) => n - list.length);
+    for (const r of results) {
+      if (r.status === "rejected") {
+        console.error(r.reason);
+        import_sonner.toast.error(r.reason instanceof Error ? r.reason.message : labels.imageUploadFailed);
+      }
+    }
+    if (session.current !== mine) return;
+    await refresh();
+    const [only] = results;
+    if (results.length === 1 && only?.status === "fulfilled" && session.current === mine) {
+      latest.current.onSelect(only.value.url);
+    }
+  };
+  const remove = async (image) => {
+    if (!library?.remove) return;
+    if (confirmId !== image.id) {
+      setConfirmId(image.id);
+      return;
+    }
+    setConfirmId(null);
+    try {
+      await library.remove(image.id);
+      await refresh();
+    } catch (err) {
+      console.error(err);
+      import_sonner.toast.error(err instanceof Error ? err.message : labels.imageDeleteFailed);
+    }
+  };
+  const onDrop = (e) => {
+    e.preventDefault();
+    setDragging(false);
+    if (!full) void upload(e.dataTransfer.files);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Dialog, { open, onOpenChange: (next) => !next && onClose(), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(DialogContent, { className: "editor-dark gap-0 overflow-hidden border border-panel-border bg-panel p-0 text-panel-fg ring-0 sm:max-w-3xl", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(DialogHeader, { className: "border-b border-panel-border px-5 py-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DialogTitle, { children: labels.imagePickerTitle }),
+      quota && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DialogDescription, { className: "text-panel-muted-fg", children: labels.imagePickerQuota(quota.used, quota.limit) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex max-h-[70vh] flex-col gap-4 overflow-y-auto p-5", children: [
+      library && (full ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "rounded-lg border border-panel-border bg-panel-elevated px-4 py-3 text-sm text-panel-muted-fg", children: labels.imagePickerQuotaFull }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        "div",
+        {
+          onDragOver: (e) => {
+            e.preventDefault();
+            setDragging(true);
+          },
+          onDragLeave: () => setDragging(false),
+          onDrop,
+          className: cn(
+            "flex flex-col items-center justify-center gap-3 rounded-xl border-2 border-dashed px-6 py-8 text-center transition-colors",
+            dragging ? "border-brand bg-brand-soft" : "border-panel-border bg-panel-elevated"
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.ImageUp, { className: "size-8 text-panel-muted-fg" }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-wrap items-center justify-center gap-2 text-sm text-panel-muted-fg", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: labels.imagePickerDrop }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                Button,
+                {
+                  type: "button",
+                  size: "sm",
+                  className: "bg-brand text-brand-fg hover:bg-brand/90",
+                  onClick: () => fileInput.current?.click(),
+                  children: labels.imagePickerBrowse
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              "input",
+              {
+                ref: fileInput,
+                type: "file",
+                accept: library.accept ?? "image/*",
+                multiple: true,
+                hidden: true,
+                onChange: (e) => {
+                  void upload(e.target.files);
+                  e.target.value = "";
+                }
+              }
+            )
+          ]
+        }
+      )),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        "form",
+        {
+          className: "flex gap-2",
+          onSubmit: (e) => {
+            e.preventDefault();
+            const value = url.trim();
+            if (value) onSelect(value);
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "relative flex-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Link2, { className: "pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-panel-muted-fg" }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                Input,
+                {
+                  value: url,
+                  onChange: (e) => setUrl(e.target.value),
+                  placeholder: labels.imagePickerUrlPlaceholder,
+                  className: "h-9 border-panel-border bg-panel-elevated pl-8 text-panel-fg placeholder:text-panel-muted-fg"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              Button,
+              {
+                type: "submit",
+                size: "lg",
+                variant: "outline",
+                disabled: !url.trim(),
+                className: "border-panel-border bg-panel-elevated text-panel-fg hover:bg-panel-hover hover:text-panel-fg",
+                children: labels.imagePickerUseUrl
+              }
+            )
+          ]
+        }
+      ),
+      library && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("section", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { className: "mb-2 text-xs font-medium tracking-wide text-panel-muted-fg uppercase", children: labels.imagePickerGallery }),
+        loading && images.length === 0 && pending === 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex justify-center py-8", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Spinner, {}) }) : images.length === 0 && pending === 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "py-6 text-center text-sm text-panel-muted-fg", children: labels.imagePickerEmpty }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("ul", { className: "grid grid-cols-3 gap-3 sm:grid-cols-4", children: [
+          Array.from({ length: pending }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "li",
+            {
+              className: "flex aspect-[4/3] items-center justify-center rounded-lg border border-panel-border bg-panel-elevated",
+              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Spinner, {})
+            },
+            `pending-${i}`
+          )),
+          images.map((image) => {
+            const selected = image.url === currentUrl;
+            const confirming = confirmId === image.id;
+            return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("li", { className: "group relative", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => onSelect(image.url),
+                  title: image.name,
+                  className: cn(
+                    "block aspect-[4/3] w-full overflow-hidden rounded-lg border bg-black/25 transition outline-none focus-visible:ring-2 focus-visible:ring-brand",
+                    selected ? "border-brand ring-2 ring-brand" : "border-panel-border hover:border-panel-muted-fg"
+                  ),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    "img",
+                    {
+                      src: image.url,
+                      alt: image.name ?? "",
+                      loading: "lazy",
+                      className: "size-full object-contain"
+                    }
+                  )
+                }
+              ),
+              selected && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "pointer-events-none absolute top-1.5 left-1.5 flex size-5 items-center justify-center rounded-full bg-brand text-brand-fg", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Check, { className: "size-3" }) }),
+              image.name && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "pointer-events-none absolute inset-x-0 bottom-0 truncate rounded-b-lg bg-black/60 px-2 py-1 text-[11px] text-white opacity-0 transition group-hover:opacity-100", children: image.name }),
+              library.remove && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => void remove(image),
+                  onBlur: () => confirming && setConfirmId(null),
+                  title: confirming ? labels.imagePickerConfirmDelete : labels.imagePickerDelete,
+                  "aria-label": labels.imagePickerDelete,
+                  className: cn(
+                    "absolute top-1.5 right-1.5 flex h-6 items-center gap-1 rounded-md px-1.5 text-xs text-white transition focus-visible:opacity-100",
+                    confirming ? "bg-red-600 opacity-100" : "bg-black/60 opacity-0 group-hover:opacity-100 hover:bg-black/80"
+                  ),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Trash2, { className: "size-3.5" }),
+                    confirming && labels.imagePickerConfirmDelete
+                  ]
+                }
+              )
+            ] }, image.id);
+          })
+        ] })
+      ] })
+    ] })
+  ] }) });
+}
+function matchesAccept(file, accept) {
+  if (!accept) return file.type.startsWith("image/");
+  return accept.split(",").some((raw) => {
+    const rule = raw.trim().toLowerCase();
+    if (rule.startsWith(".")) return file.name.toLowerCase().endsWith(rule);
+    if (rule.endsWith("/*")) return file.type.startsWith(rule.slice(0, -1));
+    return file.type === rule;
+  });
+}
+
+// src/components/editor/ColorField.tsx
+var import_react5 = require("react");
+var import_react_colorful = require("react-colorful");
+var import_lucide_react5 = require("lucide-react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var PRESETS = [
+  "#000000",
+  "#374151",
+  "#6b7280",
+  "#d1d5db",
+  "#f3f4f6",
+  "#ffffff",
+  "#dc2626",
+  "#ea580c",
+  "#ca8a04",
+  "#16a34a",
+  "#0284c7",
+  "#4f46e5",
+  "#9333ea",
+  "#db2777"
+];
+var eyeDropper = () => globalThis.EyeDropper;
+function ColorField({
+  value,
+  placeholder,
+  documentColors,
+  labels,
+  onChange
+}) {
+  const [text, setText] = (0, import_react5.useState)(value);
+  const [open, setOpen] = (0, import_react5.useState)(false);
+  const [used, setUsed] = (0, import_react5.useState)([]);
+  const pressed = (0, import_react5.useRef)(false);
+  const dragged = (0, import_react5.useRef)(null);
+  const fieldRef = (0, import_react5.useRef)(null);
+  const anchor = (0, import_react5.useRef)({
+    getBoundingClientRect: () => {
+      const field = fieldRef.current?.getBoundingClientRect() ?? new DOMRect();
+      const panel = fieldRef.current?.closest(".editor-dark")?.getBoundingClientRect();
+      return new DOMRect(panel?.right ?? field.right, field.top, 0, field.height);
+    }
+  });
+  (0, import_react5.useEffect)(() => setText(value), [value]);
+  const latestOnChange = (0, import_react5.useRef)(onChange);
+  latestOnChange.current = onChange;
+  const release = (0, import_react5.useCallback)(() => {
+    pressed.current = false;
+    if (dragged.current !== null) latestOnChange.current(dragged.current, false);
+    dragged.current = null;
+  }, []);
+  (0, import_react5.useEffect)(() => {
+    document.addEventListener("lostpointercapture", release);
+    return () => {
+      document.removeEventListener("lostpointercapture", release);
+      release();
+    };
+  }, [release]);
+  const hex = toHex(value) ?? toHex(placeholder ?? "") ?? "#000000";
+  const translucent = hex.length === 9;
+  const empty = !value;
+  const commit = (next) => {
+    dragged.current = null;
+    onChange(next, false);
+  };
+  const drag = (next) => {
+    setText(next);
+    if (!pressed.current) return commit(next);
+    dragged.current = next;
+    onChange(next, true);
+  };
+  const pickFromScreen = async () => {
+    const Ctor = eyeDropper();
+    if (!Ctor) return;
+    try {
+      const { sRGBHex } = await new Ctor().open();
+      commit(sRGBHex);
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    Popover,
+    {
+      open,
+      onOpenChange: (next) => {
+        if (next) setUsed(documentColors());
+        else if (text.trim() !== value) commit(text.trim());
+        setOpen(next);
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PopoverAnchor, { virtualRef: anchor }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          "div",
+          {
+            ref: fieldRef,
+            className: "flex h-8 w-full items-center gap-1.5 rounded-md border border-panel-border bg-panel-elevated pr-1.5 pl-2 focus-within:border-brand",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                "input",
+                {
+                  value: text,
+                  placeholder,
+                  spellCheck: false,
+                  onChange: (e) => setText(e.target.value),
+                  onBlur: () => text !== value && commit(text.trim()),
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter") commit(text.trim());
+                    if (e.key === "Escape") setText(value);
+                  },
+                  className: "min-w-0 flex-1 bg-transparent font-mono text-xs text-panel-fg outline-none placeholder:text-panel-muted-fg"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  title: labels.colorPickerOpen,
+                  "aria-label": labels.colorPickerOpen,
+                  className: "relative size-5 shrink-0 overflow-hidden rounded border border-white/20 outline-none focus-visible:ring-2 focus-visible:ring-brand",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Checkerboard, {}),
+                    !empty && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "absolute inset-0", style: { background: value } })
+                  ]
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          PopoverContent,
+          {
+            side: "right",
+            align: "start",
+            sideOffset: 8,
+            className: "editor-dark flex w-52 flex-col gap-2.5 border border-panel-border bg-panel p-2.5 text-panel-fg",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                "div",
+                {
+                  onPointerDownCapture: (e) => {
+                    pressed.current = true;
+                    e.target.setPointerCapture(e.pointerId);
+                  },
+                  children: translucent ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_colorful.HexAlphaColorPicker, { color: hex, onChange: drag, className: "color-field-picker" }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_colorful.HexColorPicker, { color: hex, onChange: drag, className: "color-field-picker" })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  "span",
+                  {
+                    className: "size-6 shrink-0 rounded border border-white/20",
+                    style: { background: hex }
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  "input",
+                  {
+                    value: text,
+                    spellCheck: false,
+                    onChange: (e) => setText(e.target.value),
+                    onKeyDown: (e) => e.key === "Enter" && commit(text.trim()),
+                    onBlur: () => text !== value && commit(text.trim()),
+                    className: "h-6 min-w-0 flex-1 rounded border border-panel-border bg-panel-elevated px-1.5 font-mono text-[11px] outline-none focus:border-brand"
+                  }
+                ),
+                eyeDropper() && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => void pickFromScreen(),
+                    title: labels.colorPickerEyedropper,
+                    "aria-label": labels.colorPickerEyedropper,
+                    className: "flex size-6 shrink-0 items-center justify-center rounded border border-panel-border bg-panel-elevated text-panel-muted-fg hover:text-panel-fg",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react5.Pipette, { className: "size-3" })
+                  }
+                )
+              ] }),
+              used.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                Swatches,
+                {
+                  title: labels.colorPickerDocument,
+                  colors: used,
+                  current: hex,
+                  onPick: commit
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                Swatches,
+                {
+                  title: labels.colorPickerPresets,
+                  colors: PRESETS,
+                  current: hex,
+                  onPick: commit,
+                  transparentLabel: labels.colorPickerTransparent
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function Swatches({
+  title,
+  colors,
+  current,
+  onPick,
+  transparentLabel
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "mb-1 text-[10px] font-medium tracking-wide text-panel-muted-fg uppercase", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "grid grid-cols-8 gap-1", children: [
+      colors.map((color) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "button",
+        {
+          type: "button",
+          title: color,
+          onClick: () => onPick(color),
+          className: cn(
+            "aspect-square rounded border border-white/15 outline-none hover:scale-110 focus-visible:ring-2 focus-visible:ring-brand",
+            color.toLowerCase() === current.toLowerCase() && "ring-2 ring-brand"
+          ),
+          style: { background: color }
+        },
+        color
+      )),
+      transparentLabel && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "button",
+        {
+          type: "button",
+          title: transparentLabel,
+          onClick: () => onPick("transparent"),
+          className: "relative aspect-square overflow-hidden rounded border border-white/15 outline-none hover:scale-110 focus-visible:ring-2 focus-visible:ring-brand",
+          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Checkerboard, {})
+        }
+      )
+    ] })
+  ] });
+}
+function Checkerboard() {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    "span",
+    {
+      className: "absolute inset-0",
+      style: {
+        backgroundImage: "repeating-conic-gradient(#9ca3af 0% 25%, #e5e7eb 0% 50%)",
+        backgroundSize: "8px 8px"
+      }
+    }
+  );
+}
+function toHex(value, { opaque = false } = {}) {
+  const v = value.trim().toLowerCase();
+  const short = /^#([0-9a-f])([0-9a-f])([0-9a-f])$/.exec(v);
+  if (short) return `#${short[1]}${short[1]}${short[2]}${short[2]}${short[3]}${short[3]}`;
+  if (/^#[0-9a-f]{6}$/.test(v)) return v;
+  if (/^#[0-9a-f]{8}$/.test(v)) return opaque || v.endsWith("ff") ? v.slice(0, 7) : v;
+  const rgb = /^rgba?\(\s*(\d+)[\s,]+(\d+)[\s,]+(\d+)(?:[\s,/]+([\d.]+%?))?/.exec(v);
+  if (rgb) {
+    const channels = [rgb[1], rgb[2], rgb[3]].map((n) => Math.min(255, Number(n)));
+    const alphaText = rgb[4];
+    const alpha = alphaText?.endsWith("%") ? parseFloat(alphaText) / 100 : Number(alphaText ?? 1);
+    if (!opaque && alpha < 1) channels.push(Math.round(Math.max(0, alpha) * 255));
+    return `#${channels.map((n) => n.toString(16).padStart(2, "0")).join("")}`;
+  }
+  return null;
+}
+
+// src/components/editor/ImageField.tsx
+var import_lucide_react6 = require("lucide-react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function ImageField({
+  value,
+  labels,
+  onChoose,
+  onClear
+}) {
+  const url = imageUrl(value);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      "button",
+      {
+        type: "button",
+        onClick: onChoose,
+        title: labels.chooseImage,
+        className: "group relative block w-full overflow-hidden rounded-md border border-panel-border bg-panel-elevated outline-none focus-visible:ring-2 focus-visible:ring-brand",
+        children: [
+          url ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("img", { src: url, alt: "", className: "h-24 w-full bg-black/25 object-contain" }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "flex h-16 flex-col items-center justify-center gap-1 text-xs text-panel-muted-fg", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react6.ImageIcon, { className: "size-5" }),
+            labels.chooseImage
+          ] }),
+          url && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "absolute inset-0 flex items-center justify-center bg-black/50 text-xs font-medium text-white opacity-0 transition group-hover:opacity-100", children: labels.chooseImage })
+        ]
+      }
+    ),
+    value && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: onClear,
+        title: labels.imageFieldRemove,
+        "aria-label": labels.imageFieldRemove,
+        className: "absolute top-1 right-1 flex size-5 items-center justify-center rounded bg-black/60 text-white hover:bg-black/80",
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react6.X, { className: "size-3" })
+      }
+    )
+  ] });
+}
+function imageUrl(value) {
+  const v = value.trim();
+  if (!v || v === "none") return null;
+  const css = /^url\(\s*(['"]?)(.*?)\1\s*\)$/i.exec(v);
+  if (css) return css[2] || null;
+  return /^[a-z-]+\(/i.test(v) ? null : v;
+}
+
+// src/components/editor/EmailEditor.tsx
+var import_client = require("react-dom/client");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var SEC_ID_RE = /\bsec-([A-Za-z0-9_-]+)\b/;
 var OBJ_ID_RE = /\bobj-([A-Za-z0-9_-]+)\b/;
 var TYPE_LABEL = {
@@ -596,6 +1347,7 @@ function tagOf(c) {
   return String(c.get("tagName") || c.get("type") || "");
 }
 var SPARKLES_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/><path d="M4 17v2"/><path d="M5 18H3"/></svg>';
+var IMAGE_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.3 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10l-3.1-3.1a2 2 0 0 0-2.814.014L6 21"/><path d="m14 19.5 3-3 3 3"/><path d="M17 22v-5.5"/><circle cx="9" cy="9" r="2"/></svg>';
 function isSection(c) {
   return tagOf(c) === "mj-section";
 }
@@ -678,6 +1430,75 @@ function wrapSelectionStyle(el, style) {
   } catch {
   }
 }
+function setupStyleFields(editor, labels) {
+  const sm = editor.StyleManager;
+  const base = sm.getType("base").view;
+  const documentColors = () => {
+    const source = `${editor.getHtml()} ${editor.getCss() ?? ""}`;
+    const counts = /* @__PURE__ */ new Map();
+    const colorValue = /(?:color|background|border)[\w-]*\s*[:=]\s*["']?[^"';>{}]*?(#[0-9a-f]{3,8}\b|rgba?\([^)]*\))/gi;
+    for (const match of source.matchAll(colorValue)) {
+      const hex = toHex(match[1], { opaque: true });
+      if (hex) counts.set(hex, (counts.get(hex) ?? 0) + 1);
+    }
+    return [...counts.entries()].sort((a, b) => b[1] - a[1]).slice(0, 14).map(([hex]) => hex);
+  };
+  const ownValue = (property) => property.hasValue?.({ noParent: true }) ? String(property.getValue?.() ?? "") : "";
+  const reactView = (field) => base.extend({
+    create({ property }) {
+      const el = document.createElement("div");
+      el.addEventListener("change", (event) => event.stopPropagation());
+      const root = (0, import_client.createRoot)(el);
+      this.__root = root;
+      this.__render = () => root.render(field(property, ownValue(property)));
+      this.__render();
+      return el;
+    },
+    update() {
+      this.__render?.();
+    },
+    destroy() {
+      const root = this.__root;
+      this.__root = void 0;
+      this.__render = void 0;
+      setTimeout(() => root?.unmount());
+    }
+  });
+  sm.addType("color", {
+    view: reactView((property, value) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      ColorField,
+      {
+        value,
+        placeholder: String(property.getDefaultValue?.() ?? ""),
+        documentColors,
+        labels,
+        onChange: (next, partial) => property.upValue(next, { partial })
+      }
+    ))
+  });
+  sm.addType("file", {
+    view: reactView((property, value) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      ImageField,
+      {
+        value,
+        labels,
+        onClear: () => property.upValue(""),
+        onChoose: () => {
+          const am = editor.AssetManager;
+          am.open({
+            types: ["image"],
+            current: imageUrl(value) ?? void 0,
+            select(asset, complete) {
+              const url = typeof asset === "string" ? asset : asset.getSrc();
+              property.upValue(url, { partial: !complete });
+              if (complete) am.close();
+            }
+          });
+        }
+      }
+    ))
+  });
+}
 function setupRichText(editor, labels) {
   const rte = editor.RichTextEditor;
   if (!rte || rte.__customActions) return;
@@ -717,16 +1538,25 @@ function setupRichText(editor, labels) {
 function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
   const documents = useDocumentStore();
   const labels = useLabels();
-  const loadingRef = (0, import_react5.useRef)(false);
-  const saveTimer = (0, import_react5.useRef)(null);
-  const saveStatusRef = (0, import_react5.useRef)("idle");
-  const stateListeners = (0, import_react5.useRef)(/* @__PURE__ */ new Set());
-  const [loading, setLoading] = (0, import_react5.useState)(true);
-  const [sidebarView, setSidebarView] = (0, import_react5.useState)("blocks");
-  const [composeTarget, setComposeTarget] = (0, import_react5.useState)(null);
-  const selectionSource = (0, import_react5.useRef)("other");
-  const editorRef = (0, import_react5.useRef)(null);
-  const [crumbs, setCrumbs] = (0, import_react5.useState)([]);
+  const loadingRef = (0, import_react7.useRef)(false);
+  const saveStatusRef = (0, import_react7.useRef)("idle");
+  const stateListeners = (0, import_react7.useRef)(/* @__PURE__ */ new Set());
+  const [loading, setLoading] = (0, import_react7.useState)(true);
+  const [sidebarView, setSidebarView] = (0, import_react7.useState)("blocks");
+  const [composeTarget, setComposeTarget] = (0, import_react7.useState)(null);
+  const selectionSource = (0, import_react7.useRef)("other");
+  const editorRef = (0, import_react7.useRef)(null);
+  const { running: turnRunning, locked: readOnly, setLocked } = useAgentTurn();
+  const readOnlyRef = (0, import_react7.useRef)(false);
+  const applyReadOnly = (0, import_react7.useRef)(async () => {
+  });
+  (0, import_react7.useEffect)(() => void applyReadOnly.current(turnRunning), [turnRunning]);
+  (0, import_react7.useEffect)(() => () => setLocked(false), [setLocked]);
+  const [crumbs, setCrumbs] = (0, import_react7.useState)([]);
+  const [selectedImageSrc, setSelectedImageSrc] = (0, import_react7.useState)(null);
+  const [picker, setPicker] = (0, import_react7.useState)(
+    null
+  );
   const onEditor = async (editor) => {
     editorRef.current = editor;
     const buildCrumbs = (c) => {
@@ -753,11 +1583,12 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
     };
     const snapshot = () => ({
       device: editor.getDevice(),
-      canUndo: editor.UndoManager.hasUndo(),
-      canRedo: editor.UndoManager.hasRedo(),
+      canUndo: !readOnlyRef.current && editor.UndoManager.hasUndo(),
+      canRedo: !readOnlyRef.current && editor.UndoManager.hasRedo(),
       saveStatus: saveStatusRef.current,
       zoom: Math.round(editor.Canvas.getZoom?.() ?? 100),
-      contentWidth: bodyWidth()
+      contentWidth: bodyWidth(),
+      readOnly: readOnlyRef.current
     });
     const notifyState = () => {
       const s = snapshot();
@@ -781,6 +1612,14 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
       if (isSection(c)) addIdClass(c, "sec");
       if (!isCommentable(c)) return;
       const toolbar = [...c.get("toolbar") ?? []];
+      if (tagOf(c) === "mj-image" && !toolbar.some((t) => t.command === "open-image-picker")) {
+        toolbar.push({
+          command: "open-image-picker",
+          label: IMAGE_SVG,
+          attributes: { title: labels.chooseImage }
+        });
+        c.set("toolbar", toolbar);
+      }
       if (!toolbar.some((t) => t.command === "open-comments")) {
         toolbar.push({
           command: "open-comments",
@@ -790,6 +1629,21 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
         c.set("toolbar", toolbar);
       }
     };
+    editor.Commands.add("open-image-picker", {
+      run(ed) {
+        const target = ed.getSelected();
+        if (!target || tagOf(target) !== "mj-image") return;
+        const am = ed.AssetManager;
+        am.open({
+          target,
+          types: ["image"],
+          select(asset, complete) {
+            target.set({ src: asset.getSrc() });
+            if (complete) am.close();
+          }
+        });
+      }
+    });
     editor.Commands.add("open-comments", {
       run(ed) {
         const target = targetOf(ed.getSelected() ?? void 0);
@@ -797,6 +1651,7 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
       }
     });
     setupRichText(editor, labels);
+    setupStyleFields(editor, labels);
     const blockCategory = (label) => {
       const l = label.toLowerCase();
       if (/(column|section)/.test(l)) return "Layout";
@@ -825,6 +1680,7 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
       if (selectionSource.current === "canvas") setSidebarView("settings");
       selectionSource.current = "other";
       buildCrumbs(c);
+      setSelectedImageSrc(c && tagOf(c) === "mj-image" ? String(c.get("src") ?? "") : null);
       if (c?.get("type") === "mj-image" && !c.getTrait("src")) {
         c.addTrait(
           {
@@ -838,40 +1694,99 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
         );
       }
     });
-    editor.on("component:deselected", () => setCrumbs([]));
+    editor.on("component:deselected", () => {
+      const rest = editor.getSelected();
+      buildCrumbs(rest);
+      setSelectedImageSrc(
+        rest && tagOf(rest) === "mj-image" ? String(rest.get("src") ?? "") : null
+      );
+    });
+    editor.on("component:update:src", (c) => {
+      if (c === editor.getSelected()) setSelectedImageSrc(String(c.get("src") ?? ""));
+    });
+    let stored = "";
     const save = async () => {
-      if (loadingRef.current) return;
+      const view = editor.getEditing()?.getView();
+      await view?.syncContent?.();
+      const mjml = editor.getHtml();
+      if (mjml === stored) return;
       setSave("saving");
       try {
-        await documents.save(docId, {
-          mjml: editor.getHtml(),
-          projectData: editor.getProjectData()
-        });
+        await documents.save(docId, { mjml, projectData: editor.getProjectData() });
+        stored = mjml;
         setSave("saved");
       } catch (e) {
         setSave("error");
-        import_sonner.toast.error(labels.documentSaveFailed);
+        import_sonner2.toast.error(refusal(e) ?? labels.documentSaveFailed, { id: saveToastId(docId) });
         throw e;
       }
     };
+    const queue = createSaveQueue(save, 1200);
     editor.on("update", () => {
       notifyState();
-      if (loadingRef.current) return;
-      if (saveTimer.current) clearTimeout(saveTimer.current);
-      saveTimer.current = setTimeout(() => void save().catch(console.error), 1200);
+      if (!loadingRef.current && !readOnlyRef.current) queue.schedule();
     });
     editor.on("change:device", notifyState);
+    const blocked = [
+      "core:undo",
+      "core:redo",
+      "core:paste",
+      "core:component-delete",
+      "tlb-delete",
+      "tlb-clone",
+      "tlb-move",
+      "open-assets",
+      "open-image-picker"
+    ];
+    for (const id of blocked) {
+      editor.on(`command:run:before:${id}`, ({ options }) => {
+        if (readOnlyRef.current) options.abort = true;
+      });
+    }
+    const lock = (on) => {
+      readOnlyRef.current = on;
+      setLocked(on);
+      notifyState();
+    };
+    applyReadOnly.current = async (on) => {
+      if (on) {
+        lock(true);
+        queue.cancel();
+        editor.select([]);
+        editor.AssetManager.close();
+        setPicker(null);
+        return;
+      }
+      try {
+        await reload();
+      } catch (e) {
+        console.error(e);
+        import_sonner2.toast.error(labels.documentLoadFailed, {
+          id: `reload-${docId}`,
+          duration: Infinity,
+          action: { label: labels.retry, onClick: () => void applyReadOnly.current(false) }
+        });
+        return;
+      }
+      lock(false);
+    };
+    const reload = () => queue.run(async () => {
+      const fresh = await documents.get(docId);
+      if (fresh.mjml !== stored) loadMjml(fresh.mjml);
+    });
     const loadMjml = (mjml) => {
       loadingRef.current = true;
-      if (saveTimer.current) clearTimeout(saveTimer.current);
-      editor.setComponents(mjml || import_core2.STARTER_MJML);
-      editor.getWrapper()?.find("mj-section").forEach(decorate);
-      for (const t of Object.keys(TYPE_LABEL)) {
-        editor.getWrapper()?.find(t).forEach(decorate);
-      }
-      setTimeout(() => {
+      try {
+        queue.cancel();
+        stored = mjml;
+        editor.setComponents(mjml || import_core2.STARTER_MJML);
+        editor.getWrapper()?.find("mj-section").forEach(decorate);
+        for (const t of Object.keys(TYPE_LABEL)) {
+          editor.getWrapper()?.find(t).forEach(decorate);
+        }
+      } finally {
         loadingRef.current = false;
-      }, 400);
+      }
     };
     const ensureHighlightStyles = () => {
       const cdoc = editor.Canvas.getDocument();
@@ -908,7 +1823,7 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
       const doc = await documents.get(docId);
       loadMjml(doc.mjml);
     } catch (e) {
-      import_sonner.toast.error(labels.documentLoadFailed);
+      import_sonner2.toast.error(labels.documentLoadFailed);
       console.error(e);
     } finally {
       setLoading(false);
@@ -916,14 +1831,8 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
     onReady({
       getMjml: () => editor.getHtml(),
       getCompiledHtml: compiledHtml,
-      flushSave: async () => {
-        if (saveTimer.current) clearTimeout(saveTimer.current);
-        await save();
-      },
-      reloadFromDb: async () => {
-        const fresh = await documents.get(docId);
-        if (fresh.mjml !== editor.getHtml()) loadMjml(fresh.mjml);
-      },
+      flushSave: () => queue.flush(),
+      reloadFromDb: reload,
       highlightSection: (sectionId, on) => {
         ensureHighlightStyles();
         const el = sectionEl(sectionId);
@@ -939,10 +1848,12 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
         notifyState();
       },
       undo: () => {
+        if (readOnlyRef.current) return;
         editor.UndoManager.undo();
         notifyState();
       },
       redo: () => {
+        if (readOnlyRef.current) return;
         editor.UndoManager.redo();
         notifyState();
       },
@@ -951,6 +1862,7 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
         notifyState();
       },
       setContentWidth: (w) => {
+        if (readOnlyRef.current) return;
         findByTag("mj-body")?.addAttributes({ width: w });
         notifyState();
       },
@@ -961,8 +1873,8 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
       }
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    import_react4.default,
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    import_react6.default,
     {
       grapesjs: import_grapesjs.default,
       className: "h-full",
@@ -975,6 +1887,19 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
         styleManager: { appendTo: "#gjs-styles" },
         traitManager: { appendTo: "#gjs-traits" },
         layerManager: { appendTo: "#gjs-layers" },
+        assetManager: {
+          // Never inline files: mail clients block `data:` images (see ImageLibrary).
+          embedAsBase64: false,
+          // Our own dialog instead of GrapesJS's modal. GrapesJS still decides when it opens
+          // and what a choice applies to; `select(url, true)` sets the image and closes.
+          custom: {
+            open: (props) => setPicker({
+              current: props.options?.current ?? (String(props.options?.target?.get("src") ?? "") || void 0),
+              select: (url) => props.select(url, true)
+            }),
+            close: () => setPicker(null)
+          }
+        },
         deviceManager: {
           devices: [
             { id: "desktop", name: "Desktop", width: "" },
@@ -984,19 +1909,26 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
         plugins: [import_grapesjs_mjml.default]
       },
       onEditor,
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex h-full min-h-0 flex-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "relative flex h-full min-h-0 flex-1", inert: readOnly, children: [
+        readOnly && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "absolute inset-0 z-30 flex cursor-not-allowed items-start justify-center bg-white/20 pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "flex items-center gap-2 rounded-full bg-panel px-3 py-1 text-xs text-panel-fg shadow", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Spinner, {}),
+          " ",
+          labels.agentWorking
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           LeftSidebar,
           {
             view: sidebarView,
             onViewChange: setSidebarView,
-            markLayersSource: () => selectionSource.current = "layers"
+            markLayersSource: () => selectionSource.current = "layers",
+            selectedImageSrc,
+            onChooseImage: () => editorRef.current?.runCommand("open-image-picker")
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col bg-surface-muted", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "relative min-h-0 flex-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react4.Canvas, { className: "h-full" }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col bg-surface-muted", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "relative min-h-0 flex-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react6.Canvas, { className: "h-full" }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               CanvasComments,
               {
                 docId,
@@ -1006,12 +1938,27 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
                 onOpenCountChange
               }
             ),
-            loading && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "absolute inset-0 z-10 flex items-center justify-center gap-2 bg-white/70 text-sm text-zinc-500", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Spinner, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              ImagePicker,
+              {
+                open: picker !== null,
+                currentUrl: picker?.current,
+                onSelect: (url) => {
+                  if (!readOnlyRef.current) picker?.select(url);
+                  setPicker(null);
+                },
+                onClose: () => {
+                  setPicker(null);
+                  editorRef.current?.AssetManager.close();
+                }
+              }
+            ),
+            loading && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "absolute inset-0 z-10 flex items-center justify-center gap-2 bg-white/70 text-sm text-zinc-500", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Spinner, {}),
               " Loading editor\u2026"
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Breadcrumb, { crumbs, onSelect: (c) => editorRef.current?.select(c) })
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Breadcrumb, { crumbs, onSelect: (c) => editorRef.current?.select(c) })
         ] })
       ] })
     }
@@ -1022,32 +1969,34 @@ function CollapseSection({
   defaultOpen = true,
   children
 }) {
-  const [open, setOpen] = (0, import_react5.useState)(defaultOpen);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "border-b border-panel-border", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  const [open, setOpen] = (0, import_react7.useState)(defaultOpen);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "border-b border-panel-border", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
       "button",
       {
         type: "button",
         onClick: () => setOpen((o) => !o),
         className: "flex w-full items-center gap-1.5 px-3 py-2 text-xs font-semibold tracking-wide text-panel-muted-fg uppercase hover:text-panel-fg",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.ChevronRight, { className: cn("size-3.5 transition-transform", open && "rotate-90") }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.ChevronRight, { className: cn("size-3.5 transition-transform", open && "rotate-90") }),
           title
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: cn(!open && "hidden"), children })
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn(!open && "hidden"), children })
   ] });
 }
 function LeftSidebar({
   view,
   onViewChange,
-  markLayersSource
+  markLayersSource,
+  selectedImageSrc,
+  onChooseImage
 }) {
-  const editor = (0, import_react4.useEditorMaybe)();
+  const editor = (0, import_react6.useEditorMaybe)();
   const labels = useLabels();
-  const [layersExpanded, setLayersExpanded] = (0, import_react5.useState)(false);
-  const [blockSearch, setBlockSearch] = (0, import_react5.useState)("");
+  const [layersExpanded, setLayersExpanded] = (0, import_react7.useState)(false);
+  const [blockSearch, setBlockSearch] = (0, import_react7.useState)("");
   const changeView = (v) => {
     if (v === "settings" && editor && !editor.getSelected()) {
       const wrapper = editor.getWrapper();
@@ -1076,12 +2025,12 @@ function LeftSidebar({
       cat.style.display = anyVisible ? "" : "none";
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "editor-dark flex w-64 shrink-0 flex-col border-r border-panel-border bg-panel text-panel-fg", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex border-b border-panel-border", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "editor-dark flex w-64 shrink-0 flex-col border-r border-panel-border bg-panel text-panel-fg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex border-b border-panel-border", children: [
       ["blocks", "Blocks"],
       ["settings", "Settings"],
       ["layers", "Layers"]
-    ].map(([value, label]) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    ].map(([value, label]) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "button",
       {
         type: "button",
@@ -1095,10 +2044,10 @@ function LeftSidebar({
       },
       value
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: cn("flex min-h-0 flex-1 flex-col", view !== "blocks" && "hidden"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "relative border-b border-panel-border p-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Search, { className: "pointer-events-none absolute top-1/2 left-4 size-3.5 -translate-y-1/2 text-panel-muted-fg" }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: cn("flex min-h-0 flex-1 flex-col", view !== "blocks" && "hidden"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "relative border-b border-panel-border p-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react8.Search, { className: "pointer-events-none absolute top-1/2 left-4 size-3.5 -translate-y-1/2 text-panel-muted-fg" }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           Input,
           {
             value: blockSearch,
@@ -1107,23 +2056,58 @@ function LeftSidebar({
             className: "h-8 border-panel-border bg-panel-elevated pr-10 pl-7 text-sm text-panel-fg placeholder:text-panel-muted-fg"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("kbd", { className: "pointer-events-none absolute top-1/2 right-4 -translate-y-1/2 rounded border border-panel-border bg-panel px-1 py-0.5 font-mono text-[10px] text-panel-muted-fg", children: "\u2318K" })
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("kbd", { className: "pointer-events-none absolute top-1/2 right-4 -translate-y-1/2 rounded border border-panel-border bg-panel px-1 py-0.5 font-mono text-[10px] text-panel-muted-fg", children: "\u2318K" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { id: "gjs-blocks", className: "min-h-0 flex-1 overflow-y-auto" })
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { id: "gjs-blocks", className: "min-h-0 flex-1 overflow-y-auto" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: cn("min-h-0 flex-1 overflow-y-auto", view !== "settings" && "hidden"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CollapseSection, { title: labels.attributes, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { id: "gjs-traits" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CollapseSection, { title: labels.style, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { id: "gjs-styles" }) })
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: cn("min-h-0 flex-1 overflow-y-auto", view !== "settings" && "hidden"), children: [
+      selectedImageSrc !== null && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "border-b border-panel-border p-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          "button",
+          {
+            type: "button",
+            onClick: onChooseImage,
+            title: labels.chooseImage,
+            className: "group relative block w-full overflow-hidden rounded-lg border border-panel-border bg-panel-elevated",
+            children: [
+              selectedImageSrc ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                "img",
+                {
+                  src: selectedImageSrc,
+                  alt: "",
+                  className: "h-32 w-full bg-black/25 object-contain"
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "flex h-32 items-center justify-center text-panel-muted-fg", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.ImageIcon, { className: "size-8" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "absolute inset-0 flex items-center justify-center bg-black/50 text-sm font-medium text-white opacity-0 transition group-hover:opacity-100", children: labels.chooseImage })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          Button,
+          {
+            type: "button",
+            size: "sm",
+            className: "mt-2 w-full bg-brand text-brand-fg hover:bg-brand/90",
+            onClick: onChooseImage,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.ImageUp, {}),
+              labels.chooseImage
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CollapseSection, { title: labels.attributes, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { id: "gjs-traits" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CollapseSection, { title: labels.style, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { id: "gjs-styles" }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
       "div",
       {
         className: cn("flex min-h-0 flex-1 flex-col", view !== "layers" && "hidden"),
         onMouseDownCapture: markLayersSource,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { className: "flex items-center justify-between gap-2 border-b border-panel-border px-3 py-2 text-xs text-panel-muted-fg", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: labels.expandAll }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: "flex items-center justify-between gap-2 border-b border-panel-border px-3 py-2 text-xs text-panel-muted-fg", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: labels.expandAll }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               Switch,
               {
                 checked: layersExpanded,
@@ -1132,7 +2116,7 @@ function LeftSidebar({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { id: "gjs-layers", className: "min-h-0 flex-1 overflow-y-auto" })
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { id: "gjs-layers", className: "min-h-0 flex-1 overflow-y-auto" })
         ]
       }
     )
@@ -1143,9 +2127,9 @@ function Breadcrumb({
   onSelect
 }) {
   const labels = useLabels();
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex h-9 shrink-0 items-center gap-0.5 border-t border-border bg-surface px-3 text-xs text-muted-foreground", children: crumbs.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-muted-foreground/60", children: labels.selectAnElement }) : crumbs.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-0.5", children: [
-    i > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.ChevronRight, { className: "size-3 opacity-40" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex h-9 shrink-0 items-center gap-0.5 border-t border-border bg-surface px-3 text-xs text-muted-foreground", children: crumbs.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-muted-foreground/60", children: labels.selectAnElement }) : crumbs.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "flex items-center gap-0.5", children: [
+    i > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.ChevronRight, { className: "size-3 opacity-40" }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "button",
       {
         type: "button",