@mjml-agent-editor/editor 0.1.11 → 0.1.14

package/dist/canvas.js

@@ -1,10 +1,24 @@
 "use client";
 import {
   CanvasComments,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverTrigger,
+  refusal,
+  saveToastId,
+  useAgentTurn,
   useDocumentStore,
+  useImageLibrary,
   useLabels
-} from "./chunk-D2Y633TP.js";
+} from "./chunk-SR3NM6VC.js";
 import {
+  Button,
   Input,
   Spinner,
   cn
@@ -14,10 +28,41 @@ import {
 import grapesjs from "grapesjs";
 import GjsEditor, { Canvas, useEditorMaybe } from "@grapesjs/react";
 import grapesjsMJML from "grapesjs-mjml";
-import { useRef, useState } from "react";
+import { useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
 import { STARTER_MJML } from "@mjml-agent-editor/core";
-import { toast } from "sonner";
-import { ChevronRight } from "lucide-react";
+
+// 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
+import { toast as toast2 } from "sonner";
+import { ChevronRight, ImageIcon as ImageIcon2, ImageUp as ImageUp2 } from "lucide-react";
 
 // src/components/ui/switch.tsx
 import "react";
@@ -51,7 +96,582 @@ function Switch({
 
 // src/components/editor/EmailEditor.tsx
 import { Search } from "lucide-react";
+
+// src/components/editor/ImagePicker.tsx
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Check, ImageUp, Link2, Trash2 } from "lucide-react";
+import { toast } from "sonner";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function ImagePicker({
+  open,
+  currentUrl,
+  onSelect,
+  onClose
+}) {
+  const library = useImageLibrary();
+  const labels = useLabels();
+  const [images, setImages] = useState([]);
+  const [quota, setQuota] = useState();
+  const [loading, setLoading] = useState(false);
+  const [pending, setPending] = useState(0);
+  const [dragging, setDragging] = useState(false);
+  const [url, setUrl] = useState("");
+  const [confirmId, setConfirmId] = useState(null);
+  const fileInput = useRef(null);
+  const session = useRef(0);
+  const latest = useRef({ labels, onSelect });
+  latest.current = { labels, onSelect };
+  const lists = useRef(0);
+  const refresh = 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) toast.error(latest.current.labels.imagePickerLoadFailed);
+    } finally {
+      if (mine === lists.current) setLoading(false);
+    }
+  }, [library]);
+  useEffect(() => {
+    session.current += 1;
+    if (!open) return;
+    setUrl("");
+    setConfirmId(null);
+    void refresh();
+  }, [open]);
+  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;
+      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);
+        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);
+      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__ */ jsx2(Dialog, { open, onOpenChange: (next) => !next && onClose(), children: /* @__PURE__ */ 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__ */ jsxs(DialogHeader, { className: "border-b border-panel-border px-5 py-4", children: [
+      /* @__PURE__ */ jsx2(DialogTitle, { children: labels.imagePickerTitle }),
+      quota && /* @__PURE__ */ jsx2(DialogDescription, { className: "text-panel-muted-fg", children: labels.imagePickerQuota(quota.used, quota.limit) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex max-h-[70vh] flex-col gap-4 overflow-y-auto p-5", children: [
+      library && (full ? /* @__PURE__ */ jsx2("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__ */ 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__ */ jsx2(ImageUp, { className: "size-8 text-panel-muted-fg" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2 text-sm text-panel-muted-fg", children: [
+              /* @__PURE__ */ jsx2("span", { children: labels.imagePickerDrop }),
+              /* @__PURE__ */ jsx2(
+                Button,
+                {
+                  type: "button",
+                  size: "sm",
+                  className: "bg-brand text-brand-fg hover:bg-brand/90",
+                  onClick: () => fileInput.current?.click(),
+                  children: labels.imagePickerBrowse
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx2(
+              "input",
+              {
+                ref: fileInput,
+                type: "file",
+                accept: library.accept ?? "image/*",
+                multiple: true,
+                hidden: true,
+                onChange: (e) => {
+                  void upload(e.target.files);
+                  e.target.value = "";
+                }
+              }
+            )
+          ]
+        }
+      )),
+      /* @__PURE__ */ jsxs(
+        "form",
+        {
+          className: "flex gap-2",
+          onSubmit: (e) => {
+            e.preventDefault();
+            const value = url.trim();
+            if (value) onSelect(value);
+          },
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
+              /* @__PURE__ */ jsx2(Link2, { className: "pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-panel-muted-fg" }),
+              /* @__PURE__ */ jsx2(
+                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__ */ jsx2(
+              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__ */ jsxs("section", { children: [
+        /* @__PURE__ */ jsx2("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__ */ jsx2("div", { className: "flex justify-center py-8", children: /* @__PURE__ */ jsx2(Spinner, {}) }) : images.length === 0 && pending === 0 ? /* @__PURE__ */ jsx2("p", { className: "py-6 text-center text-sm text-panel-muted-fg", children: labels.imagePickerEmpty }) : /* @__PURE__ */ jsxs("ul", { className: "grid grid-cols-3 gap-3 sm:grid-cols-4", children: [
+          Array.from({ length: pending }, (_, i) => /* @__PURE__ */ jsx2(
+            "li",
+            {
+              className: "flex aspect-[4/3] items-center justify-center rounded-lg border border-panel-border bg-panel-elevated",
+              children: /* @__PURE__ */ jsx2(Spinner, {})
+            },
+            `pending-${i}`
+          )),
+          images.map((image) => {
+            const selected = image.url === currentUrl;
+            const confirming = confirmId === image.id;
+            return /* @__PURE__ */ jsxs("li", { className: "group relative", children: [
+              /* @__PURE__ */ jsx2(
+                "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__ */ jsx2(
+                    "img",
+                    {
+                      src: image.url,
+                      alt: image.name ?? "",
+                      loading: "lazy",
+                      className: "size-full object-contain"
+                    }
+                  )
+                }
+              ),
+              selected && /* @__PURE__ */ jsx2("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__ */ jsx2(Check, { className: "size-3" }) }),
+              image.name && /* @__PURE__ */ jsx2("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__ */ 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__ */ jsx2(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
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { HexAlphaColorPicker, HexColorPicker } from "react-colorful";
+import { Pipette } from "lucide-react";
+import { jsx as jsx3, jsxs as jsxs2 } from "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] = useState2(value);
+  const [open, setOpen] = useState2(false);
+  const [used, setUsed] = useState2([]);
+  const pressed = useRef2(false);
+  const dragged = useRef2(null);
+  const fieldRef = useRef2(null);
+  const anchor = useRef2({
+    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);
+    }
+  });
+  useEffect2(() => setText(value), [value]);
+  const latestOnChange = useRef2(onChange);
+  latestOnChange.current = onChange;
+  const release = useCallback2(() => {
+    pressed.current = false;
+    if (dragged.current !== null) latestOnChange.current(dragged.current, false);
+    dragged.current = null;
+  }, []);
+  useEffect2(() => {
+    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__ */ jsxs2(
+    Popover,
+    {
+      open,
+      onOpenChange: (next) => {
+        if (next) setUsed(documentColors());
+        else if (text.trim() !== value) commit(text.trim());
+        setOpen(next);
+      },
+      children: [
+        /* @__PURE__ */ jsx3(PopoverAnchor, { virtualRef: anchor }),
+        /* @__PURE__ */ jsxs2(
+          "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__ */ jsx3(
+                "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__ */ jsx3(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs2(
+                "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__ */ jsx3(Checkerboard, {}),
+                    !empty && /* @__PURE__ */ jsx3("span", { className: "absolute inset-0", style: { background: value } })
+                  ]
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs2(
+          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__ */ jsx3(
+                "div",
+                {
+                  onPointerDownCapture: (e) => {
+                    pressed.current = true;
+                    e.target.setPointerCapture(e.pointerId);
+                  },
+                  children: translucent ? /* @__PURE__ */ jsx3(HexAlphaColorPicker, { color: hex, onChange: drag, className: "color-field-picker" }) : /* @__PURE__ */ jsx3(HexColorPicker, { color: hex, onChange: drag, className: "color-field-picker" })
+                }
+              ),
+              /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1.5", children: [
+                /* @__PURE__ */ jsx3(
+                  "span",
+                  {
+                    className: "size-6 shrink-0 rounded border border-white/20",
+                    style: { background: hex }
+                  }
+                ),
+                /* @__PURE__ */ jsx3(
+                  "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__ */ jsx3(
+                  "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__ */ jsx3(Pipette, { className: "size-3" })
+                  }
+                )
+              ] }),
+              used.length > 0 && /* @__PURE__ */ jsx3(
+                Swatches,
+                {
+                  title: labels.colorPickerDocument,
+                  colors: used,
+                  current: hex,
+                  onPick: commit
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                Swatches,
+                {
+                  title: labels.colorPickerPresets,
+                  colors: PRESETS,
+                  current: hex,
+                  onPick: commit,
+                  transparentLabel: labels.colorPickerTransparent
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function Swatches({
+  title,
+  colors,
+  current,
+  onPick,
+  transparentLabel
+}) {
+  return /* @__PURE__ */ jsxs2("div", { children: [
+    /* @__PURE__ */ jsx3("p", { className: "mb-1 text-[10px] font-medium tracking-wide text-panel-muted-fg uppercase", children: title }),
+    /* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-8 gap-1", children: [
+      colors.map((color) => /* @__PURE__ */ jsx3(
+        "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__ */ jsx3(
+        "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__ */ jsx3(Checkerboard, {})
+        }
+      )
+    ] })
+  ] });
+}
+function Checkerboard() {
+  return /* @__PURE__ */ jsx3(
+    "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
+import { ImageIcon, X } from "lucide-react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function ImageField({
+  value,
+  labels,
+  onChoose,
+  onClear
+}) {
+  const url = imageUrl(value);
+  return /* @__PURE__ */ jsxs3("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxs3(
+      "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__ */ jsx4("img", { src: url, alt: "", className: "h-24 w-full bg-black/25 object-contain" }) : /* @__PURE__ */ jsxs3("span", { className: "flex h-16 flex-col items-center justify-center gap-1 text-xs text-panel-muted-fg", children: [
+            /* @__PURE__ */ jsx4(ImageIcon, { className: "size-5" }),
+            labels.chooseImage
+          ] }),
+          url && /* @__PURE__ */ jsx4("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__ */ jsx4(
+      "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__ */ jsx4(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
+import { createRoot } from "react-dom/client";
+import { jsx as jsx5, jsxs as jsxs4 } from "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 = {
@@ -64,6 +684,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";
 }
@@ -146,6 +767,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 = 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__ */ jsx5(
+      ColorField,
+      {
+        value,
+        placeholder: String(property.getDefaultValue?.() ?? ""),
+        documentColors,
+        labels,
+        onChange: (next, partial) => property.upValue(next, { partial })
+      }
+    ))
+  });
+  sm.addType("file", {
+    view: reactView((property, value) => /* @__PURE__ */ jsx5(
+      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;
@@ -185,16 +875,25 @@ function setupRichText(editor, labels) {
 function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
   const documents = useDocumentStore();
   const labels = useLabels();
-  const loadingRef = useRef(false);
-  const saveTimer = useRef(null);
-  const saveStatusRef = useRef("idle");
-  const stateListeners = useRef(/* @__PURE__ */ new Set());
-  const [loading, setLoading] = useState(true);
-  const [sidebarView, setSidebarView] = useState("blocks");
-  const [composeTarget, setComposeTarget] = useState(null);
-  const selectionSource = useRef("other");
-  const editorRef = useRef(null);
-  const [crumbs, setCrumbs] = useState([]);
+  const loadingRef = useRef3(false);
+  const saveStatusRef = useRef3("idle");
+  const stateListeners = useRef3(/* @__PURE__ */ new Set());
+  const [loading, setLoading] = useState3(true);
+  const [sidebarView, setSidebarView] = useState3("blocks");
+  const [composeTarget, setComposeTarget] = useState3(null);
+  const selectionSource = useRef3("other");
+  const editorRef = useRef3(null);
+  const { running: turnRunning, locked: readOnly, setLocked } = useAgentTurn();
+  const readOnlyRef = useRef3(false);
+  const applyReadOnly = useRef3(async () => {
+  });
+  useEffect3(() => void applyReadOnly.current(turnRunning), [turnRunning]);
+  useEffect3(() => () => setLocked(false), [setLocked]);
+  const [crumbs, setCrumbs] = useState3([]);
+  const [selectedImageSrc, setSelectedImageSrc] = useState3(null);
+  const [picker, setPicker] = useState3(
+    null
+  );
   const onEditor = async (editor) => {
     editorRef.current = editor;
     const buildCrumbs = (c) => {
@@ -221,11 +920,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();
@@ -249,6 +949,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",
@@ -258,6 +966,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);
@@ -265,6 +988,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";
@@ -293,6 +1017,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(
           {
@@ -306,40 +1031,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");
-        toast.error(labels.documentSaveFailed);
+        toast2.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);
+        toast2.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 || 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 || 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();
@@ -376,7 +1160,7 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
       const doc = await documents.get(docId);
       loadMjml(doc.mjml);
     } catch (e) {
-      toast.error(labels.documentLoadFailed);
+      toast2.error(labels.documentLoadFailed);
       console.error(e);
     } finally {
       setLoading(false);
@@ -384,14 +1168,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);
@@ -407,10 +1185,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();
       },
@@ -419,6 +1199,7 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
         notifyState();
       },
       setContentWidth: (w) => {
+        if (readOnlyRef.current) return;
         findByTag("mj-body")?.addAttributes({ width: w });
         notifyState();
       },
@@ -429,7 +1210,7 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
       }
     });
   };
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx5(
     GjsEditor,
     {
       grapesjs,
@@ -443,6 +1224,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: "" },
@@ -452,19 +1246,26 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
         plugins: [grapesjsMJML]
       },
       onEditor,
-      children: /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 flex-1", children: [
-        /* @__PURE__ */ jsx2(
+      children: /* @__PURE__ */ jsxs4("div", { className: "relative flex h-full min-h-0 flex-1", inert: readOnly, children: [
+        readOnly && /* @__PURE__ */ jsx5("div", { className: "absolute inset-0 z-30 flex cursor-not-allowed items-start justify-center bg-white/20 pt-3", children: /* @__PURE__ */ jsxs4("span", { className: "flex items-center gap-2 rounded-full bg-panel px-3 py-1 text-xs text-panel-fg shadow", children: [
+          /* @__PURE__ */ jsx5(Spinner, {}),
+          " ",
+          labels.agentWorking
+        ] }) }),
+        /* @__PURE__ */ jsx5(
           LeftSidebar,
           {
             view: sidebarView,
             onViewChange: setSidebarView,
-            markLayersSource: () => selectionSource.current = "layers"
+            markLayersSource: () => selectionSource.current = "layers",
+            selectedImageSrc,
+            onChooseImage: () => editorRef.current?.runCommand("open-image-picker")
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col bg-surface-muted", children: [
-          /* @__PURE__ */ jsxs("div", { className: "relative min-h-0 flex-1", children: [
-            /* @__PURE__ */ jsx2(Canvas, { className: "h-full" }),
-            /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsxs4("div", { className: "flex min-w-0 flex-1 flex-col bg-surface-muted", children: [
+          /* @__PURE__ */ jsxs4("div", { className: "relative min-h-0 flex-1", children: [
+            /* @__PURE__ */ jsx5(Canvas, { className: "h-full" }),
+            /* @__PURE__ */ jsx5(
               CanvasComments,
               {
                 docId,
@@ -474,12 +1275,27 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
                 onOpenCountChange
               }
             ),
-            loading && /* @__PURE__ */ 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__ */ jsx2(Spinner, {}),
+            /* @__PURE__ */ jsx5(
+              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__ */ jsxs4("div", { className: "absolute inset-0 z-10 flex items-center justify-center gap-2 bg-white/70 text-sm text-zinc-500", children: [
+              /* @__PURE__ */ jsx5(Spinner, {}),
               " Loading editor\u2026"
             ] })
           ] }),
-          /* @__PURE__ */ jsx2(Breadcrumb, { crumbs, onSelect: (c) => editorRef.current?.select(c) })
+          /* @__PURE__ */ jsx5(Breadcrumb, { crumbs, onSelect: (c) => editorRef.current?.select(c) })
         ] })
       ] })
     }
@@ -490,32 +1306,34 @@ function CollapseSection({
   defaultOpen = true,
   children
 }) {
-  const [open, setOpen] = useState(defaultOpen);
-  return /* @__PURE__ */ jsxs("div", { className: "border-b border-panel-border", children: [
-    /* @__PURE__ */ jsxs(
+  const [open, setOpen] = useState3(defaultOpen);
+  return /* @__PURE__ */ jsxs4("div", { className: "border-b border-panel-border", children: [
+    /* @__PURE__ */ jsxs4(
       "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__ */ jsx2(ChevronRight, { className: cn("size-3.5 transition-transform", open && "rotate-90") }),
+          /* @__PURE__ */ jsx5(ChevronRight, { className: cn("size-3.5 transition-transform", open && "rotate-90") }),
           title
         ]
       }
     ),
-    /* @__PURE__ */ jsx2("div", { className: cn(!open && "hidden"), children })
+    /* @__PURE__ */ jsx5("div", { className: cn(!open && "hidden"), children })
   ] });
 }
 function LeftSidebar({
   view,
   onViewChange,
-  markLayersSource
+  markLayersSource,
+  selectedImageSrc,
+  onChooseImage
 }) {
   const editor = useEditorMaybe();
   const labels = useLabels();
-  const [layersExpanded, setLayersExpanded] = useState(false);
-  const [blockSearch, setBlockSearch] = useState("");
+  const [layersExpanded, setLayersExpanded] = useState3(false);
+  const [blockSearch, setBlockSearch] = useState3("");
   const changeView = (v) => {
     if (v === "settings" && editor && !editor.getSelected()) {
       const wrapper = editor.getWrapper();
@@ -544,12 +1362,12 @@ function LeftSidebar({
       cat.style.display = anyVisible ? "" : "none";
     });
   };
-  return /* @__PURE__ */ jsxs("div", { className: "editor-dark flex w-64 shrink-0 flex-col border-r border-panel-border bg-panel text-panel-fg", children: [
-    /* @__PURE__ */ jsx2("div", { className: "flex border-b border-panel-border", children: [
+  return /* @__PURE__ */ jsxs4("div", { className: "editor-dark flex w-64 shrink-0 flex-col border-r border-panel-border bg-panel text-panel-fg", children: [
+    /* @__PURE__ */ jsx5("div", { className: "flex border-b border-panel-border", children: [
       ["blocks", "Blocks"],
       ["settings", "Settings"],
       ["layers", "Layers"]
-    ].map(([value, label]) => /* @__PURE__ */ jsx2(
+    ].map(([value, label]) => /* @__PURE__ */ jsx5(
       "button",
       {
         type: "button",
@@ -563,10 +1381,10 @@ function LeftSidebar({
       },
       value
     )) }),
-    /* @__PURE__ */ jsxs("div", { className: cn("flex min-h-0 flex-1 flex-col", view !== "blocks" && "hidden"), children: [
-      /* @__PURE__ */ jsxs("div", { className: "relative border-b border-panel-border p-2", children: [
-        /* @__PURE__ */ jsx2(Search, { className: "pointer-events-none absolute top-1/2 left-4 size-3.5 -translate-y-1/2 text-panel-muted-fg" }),
-        /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsxs4("div", { className: cn("flex min-h-0 flex-1 flex-col", view !== "blocks" && "hidden"), children: [
+      /* @__PURE__ */ jsxs4("div", { className: "relative border-b border-panel-border p-2", children: [
+        /* @__PURE__ */ jsx5(Search, { className: "pointer-events-none absolute top-1/2 left-4 size-3.5 -translate-y-1/2 text-panel-muted-fg" }),
+        /* @__PURE__ */ jsx5(
           Input,
           {
             value: blockSearch,
@@ -575,23 +1393,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__ */ jsx2("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__ */ jsx5("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__ */ jsx2("div", { id: "gjs-blocks", className: "min-h-0 flex-1 overflow-y-auto" })
+      /* @__PURE__ */ jsx5("div", { id: "gjs-blocks", className: "min-h-0 flex-1 overflow-y-auto" })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: cn("min-h-0 flex-1 overflow-y-auto", view !== "settings" && "hidden"), children: [
-      /* @__PURE__ */ jsx2(CollapseSection, { title: labels.attributes, children: /* @__PURE__ */ jsx2("div", { id: "gjs-traits" }) }),
-      /* @__PURE__ */ jsx2(CollapseSection, { title: labels.style, children: /* @__PURE__ */ jsx2("div", { id: "gjs-styles" }) })
+    /* @__PURE__ */ jsxs4("div", { className: cn("min-h-0 flex-1 overflow-y-auto", view !== "settings" && "hidden"), children: [
+      selectedImageSrc !== null && /* @__PURE__ */ jsxs4("div", { className: "border-b border-panel-border p-3", children: [
+        /* @__PURE__ */ jsxs4(
+          "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__ */ jsx5(
+                "img",
+                {
+                  src: selectedImageSrc,
+                  alt: "",
+                  className: "h-32 w-full bg-black/25 object-contain"
+                }
+              ) : /* @__PURE__ */ jsx5("span", { className: "flex h-32 items-center justify-center text-panel-muted-fg", children: /* @__PURE__ */ jsx5(ImageIcon2, { className: "size-8" }) }),
+              /* @__PURE__ */ jsx5("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__ */ jsxs4(
+          Button,
+          {
+            type: "button",
+            size: "sm",
+            className: "mt-2 w-full bg-brand text-brand-fg hover:bg-brand/90",
+            onClick: onChooseImage,
+            children: [
+              /* @__PURE__ */ jsx5(ImageUp2, {}),
+              labels.chooseImage
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx5(CollapseSection, { title: labels.attributes, children: /* @__PURE__ */ jsx5("div", { id: "gjs-traits" }) }),
+      /* @__PURE__ */ jsx5(CollapseSection, { title: labels.style, children: /* @__PURE__ */ jsx5("div", { id: "gjs-styles" }) })
     ] }),
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsxs4(
       "div",
       {
         className: cn("flex min-h-0 flex-1 flex-col", view !== "layers" && "hidden"),
         onMouseDownCapture: markLayersSource,
         children: [
-          /* @__PURE__ */ 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__ */ jsx2("span", { children: labels.expandAll }),
-            /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ jsxs4("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__ */ jsx5("span", { children: labels.expandAll }),
+            /* @__PURE__ */ jsx5(
               Switch,
               {
                 checked: layersExpanded,
@@ -600,7 +1453,7 @@ function LeftSidebar({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx2("div", { id: "gjs-layers", className: "min-h-0 flex-1 overflow-y-auto" })
+          /* @__PURE__ */ jsx5("div", { id: "gjs-layers", className: "min-h-0 flex-1 overflow-y-auto" })
         ]
       }
     )
@@ -611,9 +1464,9 @@ function Breadcrumb({
   onSelect
 }) {
   const labels = useLabels();
-  return /* @__PURE__ */ jsx2("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__ */ jsx2("span", { className: "text-muted-foreground/60", children: labels.selectAnElement }) : crumbs.map((c, i) => /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-0.5", children: [
-    i > 0 && /* @__PURE__ */ jsx2(ChevronRight, { className: "size-3 opacity-40" }),
-    /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx5("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__ */ jsx5("span", { className: "text-muted-foreground/60", children: labels.selectAnElement }) : crumbs.map((c, i) => /* @__PURE__ */ jsxs4("span", { className: "flex items-center gap-0.5", children: [
+    i > 0 && /* @__PURE__ */ jsx5(ChevronRight, { className: "size-3 opacity-40" }),
+    /* @__PURE__ */ jsx5(
       "button",
       {
         type: "button",