@mjml-agent-editor/editor 0.1.17 → 0.2.0

package/dist/canvas.js

@@ -16,19 +16,23 @@ import {
   useDocumentStore,
   useImageLibrary,
   useLabels
-} from "./chunk-VJRKDFM4.js";
+} from "./chunk-FTEJNUJL.js";
 import {
   Button,
   Input,
   Spinner,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
   cn
 } from "./chunk-V6RR4VRD.js";
 
 // src/components/editor/EmailEditor.tsx
 import grapesjs from "grapesjs";
-import GjsEditor, { Canvas, useEditorMaybe } from "@grapesjs/react";
+import GjsEditor, { Canvas, useEditorMaybe as useEditorMaybe2 } from "@grapesjs/react";
 import grapesjsMJML from "grapesjs-mjml";
-import { useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
+import { useEffect as useEffect5, useRef as useRef5, useState as useState5 } from "react";
 import { STARTER_MJML } from "@mjml-agent-editor/core";
 
 // src/lib/save-queue.ts
@@ -60,9 +64,17 @@ function createSaveQueue(save, delayMs) {
   };
 }
 
+// src/lib/shortcuts.ts
+function opensBlockSearch(e) {
+  if (e.key !== "/" || e.metaKey || e.ctrlKey || e.altKey || e.isComposing) return false;
+  const target = e.target;
+  if (target?.isContentEditable) return false;
+  return !["INPUT", "TEXTAREA", "SELECT", "IFRAME"].includes(target?.tagName ?? "");
+}
+
 // src/components/editor/EmailEditor.tsx
 import { toast as toast2 } from "sonner";
-import { ChevronRight, ImageIcon as ImageIcon2, ImageUp as ImageUp2 } from "lucide-react";
+import { ChevronRight as ChevronRight3, Mail, MousePointerClick } from "lucide-react";
 
 // src/components/ui/switch.tsx
 import "react";
@@ -353,11 +365,1042 @@ function matchesAccept(file, accept) {
   });
 }
 
+// src/components/editor/inspector/Inspector.tsx
+import { useEffect as useEffect4, useLayoutEffect, useReducer, useRef as useRef4, useState as useState4 } from "react";
+import { useEditorMaybe } from "@grapesjs/react";
+import { ArrowUp, ChevronRight as ChevronRight2, Copy, Monitor, Trash2 as Trash22, X as X2 } from "lucide-react";
+
 // src/components/editor/ColorField.tsx
-import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
 import { HexAlphaColorPicker, HexColorPicker } from "react-colorful";
 import { Pipette } from "lucide-react";
+
+// src/components/editor/inspector/controls.tsx
+import {
+  createContext,
+  useContext,
+  useEffect as useEffect2,
+  useId,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+import {
+  AlignCenter,
+  AlignJustify,
+  AlignLeft,
+  AlignRight,
+  ChevronDown,
+  ChevronUp,
+  CircleHelp,
+  Grid2x2,
+  RotateCcw
+} from "lucide-react";
+
+// src/components/editor/inspector/values.ts
+var SIDES = ["top", "right", "bottom", "left"];
+function expandBox(value) {
+  const parts = value.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0 || parts.length > 4) return null;
+  const [t, r = t, b = t, l = r] = parts;
+  return [t, r, b, l];
+}
+function readBox(attributes, attr) {
+  const short = expandBox(attributes[attr] ?? "") ?? ["", "", "", ""];
+  return SIDES.map((side, i) => attributes[`${attr}-${side}`] ?? short[i]);
+}
+function boxShorthand(sides) {
+  const [t, r, b, l] = sides.map((s) => s.trim() || "0");
+  if (t === b && r === l) return t === r ? t : `${t} ${r}`;
+  if (r === l) return `${t} ${r} ${b}`;
+  return `${t} ${r} ${b} ${l}`;
+}
+function parseLength(value, units) {
+  const match = /^(-?\d*\.?\d+)\s*(px|%|em)?$/.exec(value.trim());
+  if (!match) return null;
+  const unit = match[2] ?? "";
+  return units.includes(unit) ? { amount: match[1], unit } : null;
+}
+var NO_SHARE = "-noshare";
+function parseNetwork(name) {
+  return name.endsWith(NO_SHARE) ? { network: name.slice(0, -NO_SHARE.length), share: false } : { network: name, share: name !== "custom" && name !== "" };
+}
+function networkName(network, share) {
+  return share || network === "custom" ? network : `${network}${NO_SHARE}`;
+}
+var LINK_SCHEMES = /* @__PURE__ */ new Set(["http", "https", "mailto", "tel", "sms"]);
+function isSafeLink(value) {
+  const decoded = value.replace(/&#x([0-9a-f]+);?/gi, (_, hex) => String.fromCodePoint(parseInt(hex, 16))).replace(/&#(\d+);?/g, (_, dec) => String.fromCodePoint(Number(dec))).replace(/:/g, ":").replace(/&(Tab|NewLine);/g, "").replace(/[\u0000-\u0020]/g, "");
+  const scheme = /^([a-z][a-z0-9+.-]*):/i.exec(decoded)?.[1];
+  return !scheme || LINK_SCHEMES.has(scheme.toLowerCase());
+}
+function isSafeNavbarLink(baseUrl, href) {
+  return isSafeLink(baseUrl) && isSafeLink(href) && isSafeLink(baseUrl + href);
+}
+
+// src/components/editor/inspector/controls.tsx
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var FIELD = "h-7 w-full min-w-0 rounded-md border border-panel-border bg-panel-elevated px-2 text-xs text-panel-fg outline-none placeholder:text-panel-muted-fg/70 focus:border-brand";
+var FieldLabel = createContext({});
+var useFieldLabel = () => {
+  const { label, help } = useContext(FieldLabel);
+  return { "aria-labelledby": label, "aria-describedby": help };
+};
+function Row({
+  label,
+  help,
+  own,
+  wide,
+  inline,
+  labels,
+  onReset,
+  children
+}) {
+  const id = useId();
+  const helpId = useId();
+  const [helpOpen, setHelpOpen] = useState2(false);
+  const control = /* @__PURE__ */ jsx3(FieldLabel.Provider, { value: { label: id, help: help ? helpId : void 0 }, children });
+  const caption = /* @__PURE__ */ jsxs2("span", { className: "flex min-w-0 items-center gap-1.5 text-[11px] text-panel-muted-fg", children: [
+    /* @__PURE__ */ jsx3(
+      "span",
+      {
+        "aria-hidden": true,
+        className: cn("size-1.5 shrink-0 rounded-full", own ? "bg-brand" : "bg-transparent")
+      }
+    ),
+    /* @__PURE__ */ jsx3("span", { id, className: "truncate", children: label }),
+    help && // Its own provider: a host need not wrap the editor in one, as only EditorHeader asked.
+    // Opened by a tap as well: Radix opens a tooltip on hover and focus, not on touch.
+    /* @__PURE__ */ jsx3(TooltipProvider, { children: /* @__PURE__ */ jsxs2(Tooltip, { open: helpOpen, onOpenChange: setHelpOpen, children: [
+      /* @__PURE__ */ jsx3(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          "aria-label": help,
+          onClick: () => setHelpOpen((open) => !open),
+          className: "-m-0.5 shrink-0 rounded p-0.5 text-panel-muted-fg/70 hover:text-panel-fg focus-visible:text-panel-fg",
+          children: /* @__PURE__ */ jsx3(CircleHelp, { className: "size-3" })
+        }
+      ) }),
+      /* @__PURE__ */ jsx3(TooltipContent, { side: "top", className: "max-w-56 leading-snug", children: help })
+    ] }) }),
+    own && /* @__PURE__ */ jsx3(
+      "button",
+      {
+        type: "button",
+        onClick: onReset,
+        title: labels.resetToDefault,
+        "aria-label": `${labels.resetToDefault}: ${label}`,
+        className: "ml-auto rounded p-0.5 text-panel-muted-fg opacity-0 group-hover/row:opacity-100 hover:text-panel-fg focus-visible:opacity-100",
+        children: /* @__PURE__ */ jsx3(RotateCcw, { className: "size-3" })
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxs2("div", { className: "group/row px-3 py-1", children: [
+    wide ? /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-1", children: [
+      caption,
+      control
+    ] }) : inline ? /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between gap-2", children: [
+      caption,
+      control
+    ] }) : /* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-[92px_minmax(0,1fr)] items-center gap-2", children: [
+      caption,
+      control
+    ] }),
+    help && /* @__PURE__ */ jsx3("span", { id: helpId, hidden: true, children: help })
+  ] });
+}
+function useDraft(value, commit, source = value) {
+  const [draft, setDraft] = useState2(value);
+  useEffect2(() => setDraft(value), [value, source]);
+  const done = () => {
+    if (draft.trim() !== value) commit(draft.trim());
+  };
+  const onKeyDown = (e) => {
+    if (e.key === "Enter") e.currentTarget.blur();
+    if (e.key === "Escape") {
+      setDraft(value);
+      requestAnimationFrame(() => e.target.blur());
+    }
+  };
+  return { draft, setDraft, done, onKeyDown };
+}
+function TextInput({
+  value,
+  placeholder,
+  accept,
+  onCommit
+}) {
+  const [invalid, setInvalid] = useState2(false);
+  const field = useFieldLabel();
+  const { draft, setDraft, done, onKeyDown } = useDraft(value, (next) => {
+    const ok = !accept || accept(next);
+    setInvalid(!ok);
+    if (ok) onCommit(next);
+  });
+  return /* @__PURE__ */ jsx3(
+    "input",
+    {
+      className: cn(FIELD, invalid && "border-red-400"),
+      ...field,
+      "aria-invalid": invalid,
+      value: draft,
+      placeholder,
+      onChange: (e) => setDraft(e.target.value),
+      onBlur: done,
+      onKeyDown
+    }
+  );
+}
+var BARE_NUMBER = /^-?\d*\.?\d+$/;
+function normaliseLength(text, units, negative = false, unit = units[0]) {
+  if (text === "") return "";
+  const parsed = BARE_NUMBER.test(text) ? { amount: text, unit } : parseLength(text, units);
+  if (!parsed || !negative && parsed.amount.startsWith("-")) return null;
+  return `${parsed.amount}${parsed.unit}`;
+}
+function stepAmount(amount, delta, negative = false) {
+  const moved = Math.round((Number(amount) + delta) * 100) / 100;
+  const next = String(negative ? moved : Math.max(0, moved));
+  return BARE_NUMBER.test(next) ? next : amount;
+}
+var REPEAT_AFTER_MS = 400;
+var REPEAT_EVERY_MS = 60;
+function LengthInput({
+  value,
+  placeholder,
+  units,
+  negative = false,
+  compact = false,
+  labelledBy,
+  labels,
+  onCommit
+}) {
+  const fieldLabel = useFieldLabel();
+  const own = parseLength(value, units);
+  const fallback = parseLength(placeholder ?? "", units);
+  const [picked, setPicked] = useState2(null);
+  const unit = own?.unit ?? picked ?? fallback?.unit ?? units[0];
+  const [invalid, setInvalid] = useState2(false);
+  const commit = useRef2(onCommit);
+  commit.current = onCommit;
+  const endHold = useRef2(null);
+  useEffect2(() => () => endHold.current?.(), []);
+  const { draft, setDraft, done, onKeyDown } = useDraft(
+    own ? own.amount : value,
+    (next) => {
+      endHold.current?.();
+      const normal = normaliseLength(next, units, negative, unit);
+      setInvalid(normal === null);
+      if (normal !== null) commit.current(normal);
+    },
+    value
+  );
+  const from = () => {
+    const text = draft.trim();
+    if (BARE_NUMBER.test(text)) return { amount: text, unit };
+    if (text === "") return { amount: fallback?.amount ?? "0", unit };
+    return parseLength(text, units);
+  };
+  const stepOnce = (delta) => {
+    endHold.current?.();
+    const start = from();
+    if (!start) return setInvalid(true);
+    const amount = stepAmount(start.amount, delta, negative);
+    setInvalid(false);
+    setDraft(amount);
+    commit.current(`${amount}${start.unit}`);
+  };
+  const onKey = (e) => {
+    if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return onKeyDown(e);
+    e.preventDefault();
+    stepOnce((e.key === "ArrowUp" ? 1 : -1) * (e.shiftKey ? 10 : 1));
+  };
+  const press = (direction) => (e) => {
+    if (e.button !== 0 || endHold.current) return;
+    e.preventDefault();
+    const start = from();
+    if (!start) return setInvalid(true);
+    const delta = direction * (e.shiftKey ? 10 : 1);
+    let amount = stepAmount(start.amount, delta, negative);
+    const show = () => {
+      setInvalid(false);
+      setDraft(amount);
+      commit.current(`${amount}${start.unit}`, true);
+    };
+    show();
+    let timer = window.setTimeout(function repeat() {
+      amount = stepAmount(amount, delta, negative);
+      show();
+      timer = window.setTimeout(repeat, REPEAT_EVERY_MS);
+    }, REPEAT_AFTER_MS);
+    const button = e.currentTarget;
+    try {
+      button.setPointerCapture(e.pointerId);
+    } catch {
+    }
+    const events = ["pointerup", "pointercancel", "lostpointercapture"];
+    const pointerId = e.pointerId;
+    const end = () => {
+      window.clearTimeout(timer);
+      for (const type of events) button.removeEventListener(type, release);
+      window.removeEventListener("pointerup", release);
+      window.removeEventListener("blur", end);
+      endHold.current = null;
+      commit.current(`${amount}${start.unit}`);
+    };
+    const release = (ev) => {
+      if (ev.pointerId === void 0 || ev.pointerId === pointerId)
+        end();
+    };
+    endHold.current = end;
+    for (const type of events) button.addEventListener(type, release);
+    window.addEventListener("pointerup", release);
+    window.addEventListener("blur", end);
+  };
+  const click = (direction) => (e) => {
+    if (e.detail === 0) stepOnce(direction);
+  };
+  const pickUnit = () => {
+    endHold.current?.();
+    const next = units[(units.indexOf(unit) + 1) % units.length];
+    const text = draft.trim();
+    if (!BARE_NUMBER.test(text)) return setPicked(next);
+    const normal = normaliseLength(text, units, negative, next);
+    if (normal === null) return setInvalid(true);
+    setPicked(next);
+    commit.current(normal);
+  };
+  const unitName = (u) => u || labels.noUnit;
+  const readable = draft.trim() === "" || BARE_NUMBER.test(draft.trim());
+  const arrow = "flex h-1/2 w-3.5 items-center justify-center text-panel-muted-fg hover:bg-panel-hover hover:text-panel-fg";
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: cn(
+        "group/length flex h-7 w-full min-w-0 items-center overflow-hidden rounded-md border border-panel-border bg-panel-elevated focus-within:border-brand",
+        invalid && "border-red-400"
+      ),
+      children: [
+        /* @__PURE__ */ jsx3(
+          "input",
+          {
+            className: "h-full w-full min-w-0 flex-1 bg-transparent pl-2 font-mono text-xs text-panel-fg outline-none placeholder:text-panel-muted-fg/70",
+            value: draft,
+            placeholder: fallback ? fallback.amount : placeholder,
+            inputMode: "decimal",
+            ...fieldLabel,
+            "aria-labelledby": labelledBy ?? fieldLabel["aria-labelledby"],
+            "aria-invalid": invalid,
+            onChange: (e) => {
+              endHold.current?.();
+              setDraft(e.target.value);
+            },
+            onBlur: done,
+            onKeyDown: onKey
+          }
+        ),
+        readable && (units.length > 1 && !compact ? /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            onClick: pickUnit,
+            title: labels.changeUnit(unitName(unit)),
+            "aria-label": labels.changeUnit(unitName(unit)),
+            className: "shrink-0 rounded px-0.5 font-mono text-[10px] text-panel-muted-fg underline decoration-dotted underline-offset-2 hover:text-panel-fg",
+            children: unitName(unit)
+          }
+        ) : (
+          // Narrow, the unit gives its place to the arrows while they show; a unit is typed.
+          /* @__PURE__ */ jsx3(
+            "span",
+            {
+              "aria-hidden": true,
+              className: cn(
+                "shrink-0 px-0.5 font-mono text-[10px] text-panel-muted-fg",
+                compact && "group-focus-within/length:hidden group-hover/length:hidden"
+              ),
+              children: unitName(unit)
+            }
+          )
+        )),
+        /* @__PURE__ */ jsxs2(
+          "span",
+          {
+            className: cn(
+              "h-full shrink-0 flex-col border-l border-panel-border",
+              compact ? "hidden group-focus-within/length:flex group-hover/length:flex" : "flex"
+            ),
+            children: [
+              /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  type: "button",
+                  tabIndex: -1,
+                  "aria-label": labels.increase,
+                  onPointerDown: press(1),
+                  onClick: click(1),
+                  className: arrow,
+                  children: /* @__PURE__ */ jsx3(ChevronUp, { className: "size-2.5" })
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  type: "button",
+                  tabIndex: -1,
+                  "aria-label": labels.decrease,
+                  onPointerDown: press(-1),
+                  onClick: click(-1),
+                  className: arrow,
+                  children: /* @__PURE__ */ jsx3(ChevronDown, { className: "size-2.5" })
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function BoxInput({
+  attributes,
+  attr,
+  placeholder,
+  units,
+  labels,
+  onCommit
+}) {
+  const sides = readBox(attributes, attr);
+  const defaults = readBox(placeholder ? { [attr]: placeholder } : {}, attr);
+  const symmetric = sides[0] === sides[2] && sides[1] === sides[3];
+  const [each, setEach] = useState2(!symmetric);
+  useEffect2(() => {
+    if (!symmetric) setEach(true);
+  }, [symmetric]);
+  const set = (indices, v, partial) => {
+    const next = sides.map((s, i) => s || defaults[i]);
+    for (const i of indices) next[i] = v || defaults[i];
+    onCommit(next.every((s, i) => s === defaults[i]) ? "" : boxShorthand(next), partial);
+  };
+  const fieldLabel = useFieldLabel();
+  const sideId = useId();
+  const sideNames = [labels.sideTop, labels.sideRight, labels.sideBottom, labels.sideLeft];
+  const pairs = each ? SIDES.map((_, i) => [sideNames[i], [i]]) : [
+    [labels.sidesVertical, [0, 2]],
+    [labels.sidesHorizontal, [1, 3]]
+  ];
+  return /* @__PURE__ */ jsxs2("div", { className: "flex items-start gap-1.5", children: [
+    /* @__PURE__ */ jsx3("div", { className: cn("grid flex-1 gap-1.5", each ? "grid-cols-4" : "grid-cols-2"), children: pairs.map(([name, indices]) => /* @__PURE__ */ jsxs2("label", { className: "flex min-w-0 flex-col gap-0.5", title: name, children: [
+      /* @__PURE__ */ jsx3(
+        LengthInput,
+        {
+          value: sides[indices[0]],
+          placeholder: defaults[indices[0]] || "0",
+          units,
+          compact: each,
+          labels,
+          labelledBy: [fieldLabel["aria-labelledby"], `${sideId}-${indices[0]}`].filter(Boolean).join(" "),
+          onCommit: (v, partial) => set(indices, v, partial)
+        }
+      ),
+      /* @__PURE__ */ jsx3(
+        "span",
+        {
+          id: `${sideId}-${indices[0]}`,
+          className: "truncate text-center text-[10px] text-panel-muted-fg/80",
+          children: name
+        }
+      )
+    ] }, name)) }),
+    /* @__PURE__ */ jsx3(
+      "button",
+      {
+        type: "button",
+        onClick: () => setEach((v) => !v),
+        disabled: each && !symmetric,
+        "aria-pressed": each,
+        title: labels.editEachSide,
+        "aria-label": labels.editEachSide,
+        className: cn(
+          "flex size-7 shrink-0 items-center justify-center rounded-md border border-panel-border text-panel-muted-fg hover:text-panel-fg disabled:opacity-40",
+          each && "border-brand text-panel-fg"
+        ),
+        children: /* @__PURE__ */ jsx3(Grid2x2, { className: "size-3.5" })
+      }
+    )
+  ] });
+}
+var ALIGN_ICONS = {
+  left: /* @__PURE__ */ jsx3(AlignLeft, { className: "size-3.5" }),
+  center: /* @__PURE__ */ jsx3(AlignCenter, { className: "size-3.5" }),
+  right: /* @__PURE__ */ jsx3(AlignRight, { className: "size-3.5" }),
+  justify: /* @__PURE__ */ jsx3(AlignJustify, { className: "size-3.5" })
+};
+function Segmented({
+  value,
+  fallback,
+  options,
+  name,
+  onCommit
+}) {
+  const current = value || fallback;
+  const iconsOnly = options.every((o) => o.value in ALIGN_ICONS);
+  return /* @__PURE__ */ jsx3("div", { className: "flex h-7 overflow-hidden rounded-md border border-panel-border bg-panel-elevated", children: options.map((o) => {
+    const active = current === o.value;
+    return /* @__PURE__ */ jsx3(
+      "button",
+      {
+        type: "button",
+        "aria-pressed": active,
+        title: name(o),
+        "aria-label": name(o),
+        onClick: () => o.value !== value && onCommit(o.value),
+        className: cn(
+          "flex min-w-0 flex-1 items-center justify-center px-1 text-[11px] text-panel-muted-fg transition-colors hover:text-panel-fg",
+          active && (value ? "bg-brand text-brand-fg hover:text-brand-fg" : "bg-panel-hover text-panel-fg")
+        ),
+        children: iconsOnly ? ALIGN_ICONS[o.value] : /* @__PURE__ */ jsx3("span", { className: "truncate", children: name(o) })
+      },
+      o.value
+    );
+  }) });
+}
+function Select({
+  value,
+  fallback,
+  options,
+  name,
+  onCommit
+}) {
+  const known = !value || options.some((o) => o.value === value);
+  const fallbackOption = options.find((o) => o.value === fallback);
+  const field = useFieldLabel();
+  return /* @__PURE__ */ jsxs2(
+    "select",
+    {
+      className: cn(FIELD, "px-1.5"),
+      ...field,
+      value: value || "",
+      onChange: (e) => onCommit(e.target.value),
+      children: [
+        /* @__PURE__ */ jsx3("option", { value: "", children: fallbackOption ? name(fallbackOption) : "\u2014" }),
+        !known && /* @__PURE__ */ jsx3("option", { value, children: value }),
+        options.map((o) => /* @__PURE__ */ jsx3("option", { value: o.value, children: name(o) }, o.value))
+      ]
+    }
+  );
+}
+function Toggle({
+  checked,
+  label,
+  onCommit
+}) {
+  return /* @__PURE__ */ jsx3(
+    Switch,
+    {
+      checked,
+      onCheckedChange: onCommit,
+      "aria-label": label,
+      className: "justify-self-end data-checked:bg-brand data-unchecked:bg-panel-border"
+    }
+  );
+}
+
+// src/components/editor/mjml-attributes.ts
+var ALLOWED_ATTRIBUTES = {
+  "mj-body": [
+    "background-color",
+    "width"
+  ],
+  "mj-wrapper": [
+    "background-color",
+    "background-position",
+    "background-position-x",
+    "background-position-y",
+    "background-repeat",
+    "background-size",
+    "background-url",
+    "border",
+    "border-bottom",
+    "border-left",
+    "border-radius",
+    "border-right",
+    "border-top",
+    "direction",
+    "full-width",
+    "gap",
+    "padding",
+    "padding-bottom",
+    "padding-left",
+    "padding-right",
+    "padding-top",
+    "text-align",
+    "text-padding"
+  ],
+  "mj-section": [
+    "background-color",
+    "background-position",
+    "background-position-x",
+    "background-position-y",
+    "background-repeat",
+    "background-size",
+    "background-url",
+    "border",
+    "border-bottom",
+    "border-left",
+    "border-radius",
+    "border-right",
+    "border-top",
+    "direction",
+    "full-width",
+    "padding",
+    "padding-bottom",
+    "padding-left",
+    "padding-right",
+    "padding-top",
+    "text-align",
+    "text-padding"
+  ],
+  "mj-column": [
+    "background-color",
+    "border",
+    "border-bottom",
+    "border-left",
+    "border-radius",
+    "border-right",
+    "border-top",
+    "direction",
+    "inner-background-color",
+    "inner-border",
+    "inner-border-bottom",
+    "inner-border-left",
+    "inner-border-radius",
+    "inner-border-right",
+    "inner-border-top",
+    "padding",
+    "padding-bottom",
+    "padding-left",
+    "padding-right",
+    "padding-top",
+    "vertical-align",
+    "width"
+  ],
+  "mj-group": [
+    "background-color",
+    "direction",
+    "vertical-align",
+    "width"
+  ],
+  "mj-text": [
+    "align",
+    "background-color",
+    "color",
+    "container-background-color",
+    "font-family",
+    "font-size",
+    "font-style",
+    "font-weight",
+    "height",
+    "letter-spacing",
+    "line-height",
+    "padding",
+    "padding-bottom",
+    "padding-left",
+    "padding-right",
+    "padding-top",
+    "text-decoration",
+    "text-transform",
+    "vertical-align"
+  ],
+  "mj-button": [
+    "align",
+    "background-color",
+    "border",
+    "border-bottom",
+    "border-left",
+    "border-radius",
+    "border-right",
+    "border-top",
+    "color",
+    "container-background-color",
+    "font-family",
+    "font-size",
+    "font-style",
+    "font-weight",
+    "height",
+    "href",
+    "inner-padding",
+    "letter-spacing",
+    "line-height",
+    "name",
+    "padding",
+    "padding-bottom",
+    "padding-left",
+    "padding-right",
+    "padding-top",
+    "rel",
+    "target",
+    "text-align",
+    "text-decoration",
+    "text-transform",
+    "title",
+    "vertical-align",
+    "width"
+  ],
+  "mj-image": [
+    "align",
+    "alt",
+    "border",
+    "border-bottom",
+    "border-left",
+    "border-radius",
+    "border-right",
+    "border-top",
+    "container-background-color",
+    "fluid-on-mobile",
+    "font-size",
+    "height",
+    "href",
+    "max-height",
+    "name",
+    "padding",
+    "padding-bottom",
+    "padding-left",
+    "padding-right",
+    "padding-top",
+    "rel",
+    "sizes",
+    "src",
+    "srcset",
+    "target",
+    "title",
+    "usemap",
+    "width"
+  ],
+  "mj-divider": [
+    "align",
+    "border-color",
+    "border-style",
+    "border-width",
+    "container-background-color",
+    "padding",
+    "padding-bottom",
+    "padding-left",
+    "padding-right",
+    "padding-top",
+    "width"
+  ],
+  "mj-spacer": [
+    "border",
+    "border-bottom",
+    "border-left",
+    "border-right",
+    "border-top",
+    "container-background-color",
+    "height",
+    "padding",
+    "padding-bottom",
+    "padding-left",
+    "padding-right",
+    "padding-top"
+  ],
+  "mj-social": [
+    "align",
+    "border-radius",
+    "color",
+    "container-background-color",
+    "font-family",
+    "font-size",
+    "font-style",
+    "font-weight",
+    "icon-height",
+    "icon-padding",
+    "icon-size",
+    "inner-padding",
+    "line-height",
+    "mode",
+    "padding",
+    "padding-bottom",
+    "padding-left",
+    "padding-right",
+    "padding-top",
+    "table-layout",
+    "text-decoration",
+    "text-padding",
+    "vertical-align"
+  ],
+  "mj-social-element": [
+    "align",
+    "alt",
+    "background-color",
+    "border-radius",
+    "color",
+    "font-family",
+    "font-size",
+    "font-style",
+    "font-weight",
+    "href",
+    "icon-height",
+    "icon-padding",
+    "icon-position",
+    "icon-size",
+    "line-height",
+    "name",
+    "padding",
+    "padding-bottom",
+    "padding-left",
+    "padding-right",
+    "padding-top",
+    "rel",
+    "sizes",
+    "src",
+    "srcset",
+    "target",
+    "text-decoration",
+    "text-padding",
+    "title",
+    "vertical-align"
+  ],
+  "mj-hero": [
+    "background-color",
+    "background-height",
+    "background-position",
+    "background-url",
+    "background-width",
+    "border-radius",
+    "container-background-color",
+    "height",
+    "inner-background-color",
+    "inner-padding",
+    "inner-padding-bottom",
+    "inner-padding-left",
+    "inner-padding-right",
+    "inner-padding-top",
+    "mode",
+    "padding",
+    "padding-bottom",
+    "padding-left",
+    "padding-right",
+    "padding-top",
+    "vertical-align"
+  ],
+  "mj-navbar": [
+    "align",
+    "base-url",
+    "hamburger",
+    "ico-align",
+    "ico-close",
+    "ico-color",
+    "ico-font-family",
+    "ico-font-size",
+    "ico-line-height",
+    "ico-open",
+    "ico-padding",
+    "ico-padding-bottom",
+    "ico-padding-left",
+    "ico-padding-right",
+    "ico-padding-top",
+    "ico-text-decoration",
+    "ico-text-transform",
+    "padding",
+    "padding-bottom",
+    "padding-left",
+    "padding-right",
+    "padding-top"
+  ],
+  "mj-navbar-link": [
+    "color",
+    "font-family",
+    "font-size",
+    "font-style",
+    "font-weight",
+    "href",
+    "letter-spacing",
+    "line-height",
+    "name",
+    "padding",
+    "padding-bottom",
+    "padding-left",
+    "padding-right",
+    "padding-top",
+    "rel",
+    "target",
+    "text-decoration",
+    "text-transform"
+  ]
+};
+var ALWAYS_ALLOWED = /* @__PURE__ */ new Set(["mj-class", "css-class", "id", "style"]);
+var START_TAG = /<[a-z][^\s/>]*(?:[^>"']|"[^"]*"|'[^']*')*>/gi;
+var ATTRIBUTE = /\s+([^\s"'>/=]+)(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s"'>]+))?/g;
+function withoutEditorProps(mjml) {
+  return mjml.replace(
+    START_TAG,
+    (tag) => tag.replace(
+      ATTRIBUTE,
+      (attribute, name) => name.toLowerCase().startsWith("data-gjs-") ? "" : attribute
+    )
+  );
+}
+function illegalAttributes(tag, attributes) {
+  const allowed = ALLOWED_ATTRIBUTES[tag];
+  if (!allowed) return [];
+  return Object.keys(attributes).filter((a) => !ALWAYS_ALLOWED.has(a) && !allowed.includes(a));
+}
+var NAMED_COLORS = /* @__PURE__ */ new Set([
+  "aliceblue",
+  "antiquewhite",
+  "aqua",
+  "aquamarine",
+  "azure",
+  "beige",
+  "bisque",
+  "black",
+  "blanchedalmond",
+  "blue",
+  "blueviolet",
+  "brown",
+  "burlywood",
+  "cadetblue",
+  "chartreuse",
+  "chocolate",
+  "coral",
+  "cornflowerblue",
+  "cornsilk",
+  "crimson",
+  "cyan",
+  "darkblue",
+  "darkcyan",
+  "darkgoldenrod",
+  "darkgray",
+  "darkgreen",
+  "darkgrey",
+  "darkkhaki",
+  "darkmagenta",
+  "darkolivegreen",
+  "darkorange",
+  "darkorchid",
+  "darkred",
+  "darksalmon",
+  "darkseagreen",
+  "darkslateblue",
+  "darkslategray",
+  "darkslategrey",
+  "darkturquoise",
+  "darkviolet",
+  "deeppink",
+  "deepskyblue",
+  "dimgray",
+  "dimgrey",
+  "dodgerblue",
+  "firebrick",
+  "floralwhite",
+  "forestgreen",
+  "fuchsia",
+  "gainsboro",
+  "ghostwhite",
+  "gold",
+  "goldenrod",
+  "gray",
+  "green",
+  "greenyellow",
+  "grey",
+  "honeydew",
+  "hotpink",
+  "indianred",
+  "indigo",
+  "inherit",
+  "ivory",
+  "khaki",
+  "lavender",
+  "lavenderblush",
+  "lawngreen",
+  "lemonchiffon",
+  "lightblue",
+  "lightcoral",
+  "lightcyan",
+  "lightgoldenrodyellow",
+  "lightgray",
+  "lightgreen",
+  "lightgrey",
+  "lightpink",
+  "lightsalmon",
+  "lightseagreen",
+  "lightskyblue",
+  "lightslategray",
+  "lightslategrey",
+  "lightsteelblue",
+  "lightyellow",
+  "lime",
+  "limegreen",
+  "linen",
+  "magenta",
+  "maroon",
+  "mediumaquamarine",
+  "mediumblue",
+  "mediumorchid",
+  "mediumpurple",
+  "mediumseagreen",
+  "mediumslateblue",
+  "mediumspringgreen",
+  "mediumturquoise",
+  "mediumvioletred",
+  "midnightblue",
+  "mintcream",
+  "mistyrose",
+  "moccasin",
+  "navajowhite",
+  "navy",
+  "oldlace",
+  "olive",
+  "olivedrab",
+  "orange",
+  "orangered",
+  "orchid",
+  "palegoldenrod",
+  "palegreen",
+  "paleturquoise",
+  "palevioletred",
+  "papayawhip",
+  "peachpuff",
+  "peru",
+  "pink",
+  "plum",
+  "powderblue",
+  "purple",
+  "rebeccapurple",
+  "red",
+  "rosybrown",
+  "royalblue",
+  "saddlebrown",
+  "salmon",
+  "sandybrown",
+  "seagreen",
+  "seashell",
+  "sienna",
+  "silver",
+  "skyblue",
+  "slateblue",
+  "slategray",
+  "slategrey",
+  "snow",
+  "springgreen",
+  "steelblue",
+  "tan",
+  "teal",
+  "thistle",
+  "tomato",
+  "transparent",
+  "turquoise",
+  "violet",
+  "wheat",
+  "white",
+  "whitesmoke",
+  "yellow",
+  "yellowgreen"
+]);
+
+// src/components/editor/ColorField.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var PRESETS = [
   "#000000",
   "#374151",
@@ -378,32 +1421,33 @@ var eyeDropper = () => globalThis.EyeDropper;
 function ColorField({
   value,
   placeholder,
-  documentColors,
+  documentColors: documentColors2,
   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({
+  const field = useFieldLabel();
+  const [text, setText] = useState3(value);
+  const [open, setOpen] = useState3(false);
+  const [used, setUsed] = useState3([]);
+  const pressed = useRef3(false);
+  const dragged = useRef3(null);
+  const fieldRef = useRef3(null);
+  const anchor = useRef3({
     getBoundingClientRect: () => {
-      const field = fieldRef.current?.getBoundingClientRect() ?? new DOMRect();
+      const field2 = 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);
+      return new DOMRect(panel?.right ?? field2.right, field2.top, 0, field2.height);
     }
   });
-  useEffect2(() => setText(value), [value]);
-  const latestOnChange = useRef2(onChange);
+  useEffect3(() => setText(value), [value]);
+  const latestOnChange = useRef3(onChange);
   latestOnChange.current = onChange;
   const release = useCallback2(() => {
     pressed.current = false;
     if (dragged.current !== null) latestOnChange.current(dragged.current, false);
     dragged.current = null;
   }, []);
-  useEffect2(() => {
+  useEffect3(() => {
     document.addEventListener("lostpointercapture", release);
     return () => {
       document.removeEventListener("lostpointercapture", release);
@@ -412,12 +1456,16 @@ function ColorField({
   }, [release]);
   const hex = toHex(value) ?? toHex(placeholder ?? "") ?? "#000000";
   const translucent = hex.length === 9;
-  const empty = !value;
+  const shown = value || placeholder || "";
   const commit = (next) => {
     dragged.current = null;
-    onChange(next, false);
+    const color = mjmlColor(next);
+    if (color === null) return setText(value);
+    setText(color);
+    onChange(color, false);
   };
-  const drag = (next) => {
+  const drag = (picked) => {
+    const next = mjmlColor(picked) ?? picked;
     setText(next);
     if (!pressed.current) return commit(next);
     dragged.current = next;
@@ -432,29 +1480,30 @@ function ColorField({
     } catch {
     }
   };
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     Popover,
     {
       open,
       onOpenChange: (next) => {
-        if (next) setUsed(documentColors());
+        if (next) setUsed(documentColors2());
         else if (text.trim() !== value) commit(text.trim());
         setOpen(next);
       },
       children: [
-        /* @__PURE__ */ jsx3(PopoverAnchor, { virtualRef: anchor }),
-        /* @__PURE__ */ jsxs2(
+        /* @__PURE__ */ jsx4(PopoverAnchor, { virtualRef: anchor }),
+        /* @__PURE__ */ jsxs3(
           "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(
+              /* @__PURE__ */ jsx4(
                 "input",
                 {
                   value: text,
                   placeholder,
                   spellCheck: false,
+                  ...field,
                   onChange: (e) => setText(e.target.value),
                   onBlur: () => text !== value && commit(text.trim()),
                   onKeyDown: (e) => {
@@ -464,7 +1513,7 @@ function ColorField({
                   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(
+              /* @__PURE__ */ jsx4(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs3(
                 "button",
                 {
                   type: "button",
@@ -472,15 +1521,15 @@ function ColorField({
                   "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__ */ jsx4(Checkerboard, {}),
+                    mjmlColor(shown) && /* @__PURE__ */ jsx4("span", { className: "absolute inset-0", style: { background: shown } })
                   ]
                 }
               ) })
             ]
           }
         ),
-        /* @__PURE__ */ jsxs2(
+        /* @__PURE__ */ jsxs3(
           PopoverContent,
           {
             side: "right",
@@ -488,36 +1537,37 @@ function ColorField({
             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(
+              /* @__PURE__ */ jsx4(
                 "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" })
+                  children: translucent ? /* @__PURE__ */ jsx4(HexAlphaColorPicker, { color: hex, onChange: drag, className: "color-field-picker" }) : /* @__PURE__ */ jsx4(HexColorPicker, { color: hex, onChange: drag, className: "color-field-picker" })
                 }
               ),
-              /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1.5", children: [
-                /* @__PURE__ */ jsx3(
+              /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1.5", children: [
+                /* @__PURE__ */ jsx4(
                   "span",
                   {
                     className: "size-6 shrink-0 rounded border border-white/20",
                     style: { background: hex }
                   }
                 ),
-                /* @__PURE__ */ jsx3(
+                /* @__PURE__ */ jsx4(
                   "input",
                   {
                     value: text,
                     spellCheck: false,
+                    ...field,
                     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(
+                eyeDropper() && /* @__PURE__ */ jsx4(
                   "button",
                   {
                     type: "button",
@@ -525,11 +1575,11 @@ function ColorField({
                     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" })
+                    children: /* @__PURE__ */ jsx4(Pipette, { className: "size-3" })
                   }
                 )
               ] }),
-              used.length > 0 && /* @__PURE__ */ jsx3(
+              used.length > 0 && /* @__PURE__ */ jsx4(
                 Swatches,
                 {
                   title: labels.colorPickerDocument,
@@ -538,7 +1588,7 @@ function ColorField({
                   onPick: commit
                 }
               ),
-              /* @__PURE__ */ jsx3(
+              /* @__PURE__ */ jsx4(
                 Swatches,
                 {
                   title: labels.colorPickerPresets,
@@ -562,10 +1612,10 @@ function Swatches({
   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(
+  return /* @__PURE__ */ jsxs3("div", { children: [
+    /* @__PURE__ */ jsx4("p", { className: "mb-1 text-[10px] font-medium tracking-wide text-panel-muted-fg uppercase", children: title }),
+    /* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-8 gap-1", children: [
+      colors.map((color) => /* @__PURE__ */ jsx4(
         "button",
         {
           type: "button",
@@ -579,21 +1629,21 @@ function Swatches({
         },
         color
       )),
-      transparentLabel && /* @__PURE__ */ jsx3(
+      transparentLabel && /* @__PURE__ */ jsx4(
         "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, {})
+          children: /* @__PURE__ */ jsx4(Checkerboard, {})
         }
       )
     ] })
   ] });
 }
 function Checkerboard() {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "span",
     {
       className: "absolute inset-0",
@@ -604,6 +1654,16 @@ function Checkerboard() {
     }
   );
 }
+function mjmlColor(value) {
+  const v = value.trim();
+  if (v === "") return "";
+  if (NAMED_COLORS.has(v.toLowerCase())) return v.toLowerCase();
+  const hex = toHex(v);
+  if (!hex) return null;
+  if (hex.length === 7) return hex;
+  const [r, g, b, a] = [1, 3, 5, 7].map((i) => parseInt(hex.slice(i, i + 2), 16));
+  return `rgba(${r},${g},${b},${Number((a / 255).toFixed(2))})`;
+}
 function toHex(value, { opaque = false } = {}) {
   const v = value.trim().toLowerCase();
   const short = /^#([0-9a-f])([0-9a-f])([0-9a-f])$/.exec(v);
@@ -623,7 +1683,7 @@ function toHex(value, { opaque = false } = {}) {
 
 // src/components/editor/ImageField.tsx
 import { ImageIcon, X } from "lucide-react";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function ImageField({
   value,
   labels,
@@ -631,8 +1691,8 @@ function ImageField({
   onClear
 }) {
   const url = imageUrl(value);
-  return /* @__PURE__ */ jsxs3("div", { className: "relative", children: [
-    /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxs4(
       "button",
       {
         type: "button",
@@ -640,15 +1700,15 @@ function ImageField({
         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" }),
+          url ? /* @__PURE__ */ jsx5("img", { src: url, alt: "", className: "h-24 w-full bg-black/25 object-contain" }) : /* @__PURE__ */ jsxs4("span", { className: "flex h-16 flex-col items-center justify-center gap-1 text-xs text-panel-muted-fg", children: [
+            /* @__PURE__ */ jsx5(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 })
+          url && /* @__PURE__ */ jsx5("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(
+    value && /* @__PURE__ */ jsx5(
       "button",
       {
         type: "button",
@@ -656,7 +1716,7 @@ function ImageField({
         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" })
+        children: /* @__PURE__ */ jsx5(X, { className: "size-3" })
       }
     )
   ] });
@@ -669,75 +1729,1280 @@ function imageUrl(value) {
   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 = {
-  "mj-text": "Text",
-  "mj-button": "Button",
-  "mj-image": "Image",
-  "mj-column": "Column"
+// src/components/editor/inspector/schema.ts
+var PX = ["px"];
+var PX_PCT = ["px", "%"];
+var LINE_HEIGHT = ["", "px", "%"];
+var LETTER_SPACING = ["px", "em"];
+var ALIGN = [
+  { value: "left", label: "alignLeft" },
+  { value: "center", label: "alignCenter" },
+  { value: "right", label: "alignRight" }
+];
+var VERTICAL_ALIGN = [
+  { value: "top", label: "alignTop" },
+  { value: "middle", label: "alignMiddle" },
+  { value: "bottom", label: "alignBottom" }
+];
+var FONTS = [
+  { value: "Ubuntu, Helvetica, Arial, sans-serif", label: "Ubuntu" },
+  { value: "Arial, Helvetica, sans-serif", label: "Arial" },
+  { value: "Helvetica, Arial, sans-serif", label: "Helvetica" },
+  { value: "Verdana, Geneva, sans-serif", label: "Verdana" },
+  { value: "Tahoma, Geneva, sans-serif", label: "Tahoma" },
+  { value: "'Trebuchet MS', Helvetica, sans-serif", label: "Trebuchet MS" },
+  { value: "Georgia, 'Times New Roman', serif", label: "Georgia" },
+  { value: "'Times New Roman', Times, serif", label: "Times New Roman" },
+  { value: "'Courier New', Courier, monospace", label: "Courier New" }
+];
+var WEIGHTS = [
+  { value: "normal", label: "weightRegular" },
+  { value: "500", label: "weightMedium" },
+  { value: "600", label: "weightSemibold" },
+  { value: "bold", label: "weightBold" }
+];
+var TEXT_TRANSFORM = [
+  { value: "none", label: "caseNone" },
+  { value: "uppercase", label: "caseUpper" },
+  { value: "lowercase", label: "caseLower" },
+  { value: "capitalize", label: "caseCapitalize" }
+];
+var TARGET = [
+  { value: "_blank", label: "targetNewTab" },
+  { value: "_self", label: "targetSameTab" }
+];
+var BACKGROUND_POSITION = [
+  { value: "top left", label: "positionTopLeft" },
+  { value: "top center", label: "positionTopCenter" },
+  { value: "top right", label: "positionTopRight" },
+  { value: "center left", label: "positionCenterLeft" },
+  { value: "center center", label: "positionCenter" },
+  { value: "center right", label: "positionCenterRight" },
+  { value: "bottom left", label: "positionBottomLeft" },
+  { value: "bottom center", label: "positionBottomCenter" },
+  { value: "bottom right", label: "positionBottomRight" }
+];
+var NETWORKS = [
+  { value: "facebook", label: "Facebook" },
+  { value: "instagram", label: "Instagram" },
+  { value: "x", label: "X" },
+  { value: "linkedin", label: "LinkedIn" },
+  { value: "youtube", label: "YouTube" },
+  { value: "pinterest", label: "Pinterest" },
+  { value: "github", label: "GitHub" },
+  { value: "web", label: "networkWebsite" },
+  { value: "snapchat", label: "Snapchat" },
+  { value: "vimeo", label: "Vimeo" },
+  { value: "medium", label: "Medium" },
+  { value: "dribbble", label: "Dribbble" },
+  { value: "soundcloud", label: "SoundCloud" },
+  { value: "tumblr", label: "Tumblr" },
+  { value: "xing", label: "Xing" },
+  { value: "custom", label: "networkCustom" }
+];
+var hasBackgroundImage = (a) => !!a["background-url"];
+var SECTION_FIELDS = [
+  {
+    attr: "full-width",
+    label: "fullWidth",
+    group: "layout",
+    control: { type: "toggle", on: "full-width" }
+  },
+  {
+    attr: "padding",
+    label: "padding",
+    group: "spacing",
+    control: { type: "box", units: PX_PCT },
+    default: "20px 0"
+  },
+  {
+    attr: "background-color",
+    label: "backgroundColor",
+    group: "style",
+    control: { type: "color" }
+  },
+  { attr: "background-url", label: "backgroundImage", group: "style", control: { type: "image" } },
+  {
+    attr: "background-size",
+    label: "backgroundSize",
+    group: "style",
+    control: {
+      type: "segmented",
+      options: [
+        { value: "cover", label: "sizeCover" },
+        { value: "contain", label: "sizeContain" },
+        { value: "auto", label: "sizeAuto" }
+      ]
+    },
+    default: "auto",
+    when: hasBackgroundImage
+  },
+  {
+    attr: "background-repeat",
+    label: "backgroundRepeat",
+    group: "style",
+    control: {
+      type: "segmented",
+      options: [
+        { value: "repeat", label: "repeatTile" },
+        { value: "no-repeat", label: "repeatOnce" }
+      ]
+    },
+    default: "repeat",
+    when: hasBackgroundImage
+  },
+  {
+    attr: "background-position",
+    label: "backgroundPosition",
+    group: "style",
+    control: { type: "select", options: BACKGROUND_POSITION },
+    default: "top center",
+    when: hasBackgroundImage
+  },
+  {
+    attr: "border-radius",
+    label: "cornerRadius",
+    group: "style",
+    control: { type: "length", units: PX_PCT }
+  }
+];
+var SCHEMA = {
+  "mj-body": [
+    { attr: "width", label: "contentWidth", group: "layout", control: { type: "length", units: PX }, default: "600px" },
+    { attr: "background-color", label: "pageBackground", group: "style", control: { type: "color" } }
+  ],
+  "mj-wrapper": [
+    ...SECTION_FIELDS,
+    { attr: "gap", label: "gap", group: "advanced", control: { type: "length", units: PX } },
+    { attr: "border", label: "border", group: "advanced", control: { type: "text", placeholder: "1px solid #cccccc" } }
+  ],
+  "mj-section": [
+    ...SECTION_FIELDS,
+    { attr: "text-align", label: "alignColumns", group: "advanced", control: { type: "segmented", options: ALIGN }, default: "center" },
+    { attr: "direction", label: "reverseColumns", group: "advanced", control: { type: "toggle", on: "rtl" } },
+    { attr: "border", label: "border", group: "advanced", control: { type: "text", placeholder: "1px solid #cccccc" } }
+  ],
+  "mj-column": [
+    { attr: "vertical-align", label: "verticalAlign", group: "layout", control: { type: "segmented", options: VERTICAL_ALIGN }, default: "top" },
+    { attr: "padding", label: "padding", group: "spacing", control: { type: "box", units: PX_PCT } },
+    { attr: "background-color", label: "backgroundColor", group: "style", control: { type: "color" } },
+    { attr: "border-radius", label: "cornerRadius", group: "style", control: { type: "length", units: PX_PCT } },
+    { attr: "width", label: "width", group: "advanced", control: { type: "length", units: PX_PCT } },
+    { attr: "inner-background-color", label: "innerBackground", group: "advanced", control: { type: "color" } },
+    { attr: "inner-border-radius", label: "innerCornerRadius", group: "advanced", control: { type: "length", units: PX_PCT } },
+    { attr: "border", label: "border", group: "advanced", control: { type: "text", placeholder: "1px solid #cccccc" } },
+    { attr: "inner-border", label: "innerBorder", group: "advanced", control: { type: "text", placeholder: "1px solid #cccccc" } }
+  ],
+  "mj-text": [
+    {
+      attr: "align",
+      label: "align",
+      group: "layout",
+      control: { type: "segmented", options: [...ALIGN, { value: "justify", label: "alignJustify" }] },
+      default: "left"
+    },
+    { attr: "padding", label: "padding", group: "spacing", control: { type: "box", units: PX_PCT }, default: "10px 25px" },
+    { attr: "font-family", label: "font", group: "style", control: { type: "select", options: FONTS }, default: "Ubuntu, Helvetica, Arial, sans-serif" },
+    { attr: "font-size", label: "fontSize", group: "style", control: { type: "length", units: PX }, default: "13px" },
+    { attr: "font-weight", label: "fontWeight", group: "style", control: { type: "select", options: WEIGHTS } },
+    { attr: "color", label: "textColor", group: "style", control: { type: "color" }, default: "#000000" },
+    { attr: "line-height", label: "lineHeight", group: "style", control: { type: "length", units: LINE_HEIGHT }, default: "1" },
+    { attr: "container-background-color", label: "blockBackground", group: "style", control: { type: "color" } },
+    { attr: "letter-spacing", label: "letterSpacing", group: "advanced", control: { type: "length", units: LETTER_SPACING, negative: true } },
+    { attr: "text-transform", label: "textTransform", group: "advanced", control: { type: "select", options: TEXT_TRANSFORM } }
+  ],
+  "mj-button": [
+    { attr: "href", label: "link", group: "content", control: { type: "link" } },
+    { attr: "align", label: "align", group: "layout", control: { type: "segmented", options: ALIGN }, default: "center" },
+    { attr: "inner-padding", label: "buttonPadding", group: "spacing", control: { type: "box", units: PX_PCT }, default: "10px 25px" },
+    { attr: "padding", label: "spaceAround", group: "spacing", control: { type: "box", units: PX_PCT }, default: "10px 25px" },
+    { attr: "background-color", label: "buttonColor", group: "style", control: { type: "color" }, default: "#414141" },
+    { attr: "color", label: "textColor", group: "style", control: { type: "color" }, default: "#ffffff" },
+    { attr: "font-size", label: "fontSize", group: "style", control: { type: "length", units: PX }, default: "13px" },
+    { attr: "border-radius", label: "cornerRadius", group: "style", control: { type: "length", units: PX_PCT }, default: "3px" },
+    { attr: "width", label: "width", group: "advanced", control: { type: "length", units: PX_PCT } },
+    { attr: "font-family", label: "font", group: "advanced", control: { type: "select", options: FONTS }, default: "Ubuntu, Helvetica, Arial, sans-serif" },
+    { attr: "font-weight", label: "fontWeight", group: "advanced", control: { type: "select", options: WEIGHTS }, default: "normal" },
+    { attr: "target", label: "opensIn", group: "advanced", control: { type: "select", options: TARGET }, default: "_blank" },
+    { attr: "title", label: "tooltip", group: "advanced", control: { type: "text" } },
+    { attr: "rel", label: "rel", group: "advanced", control: { type: "text", placeholder: "noopener" } },
+    { attr: "container-background-color", label: "blockBackground", group: "advanced", control: { type: "color" } },
+    { attr: "border", label: "border", group: "advanced", control: { type: "text", placeholder: "1px solid #cccccc" }, default: "none" },
+    { attr: "letter-spacing", label: "letterSpacing", group: "advanced", control: { type: "length", units: LETTER_SPACING, negative: true } },
+    { attr: "text-transform", label: "textTransform", group: "advanced", control: { type: "select", options: TEXT_TRANSFORM }, default: "none" },
+    { attr: "line-height", label: "lineHeight", group: "advanced", control: { type: "length", units: LINE_HEIGHT }, default: "120%" }
+  ],
+  "mj-image": [
+    { attr: "src", label: "image", group: "content", control: { type: "image" } },
+    { attr: "alt", label: "altText", group: "content", control: { type: "text" } },
+    { attr: "href", label: "link", group: "content", control: { type: "link" } },
+    { attr: "width", label: "width", group: "layout", control: { type: "length", units: PX } },
+    { attr: "align", label: "align", group: "layout", control: { type: "segmented", options: ALIGN }, default: "center" },
+    { attr: "fluid-on-mobile", label: "fluidOnMobile", group: "layout", control: { type: "toggle", on: "true" } },
+    { attr: "padding", label: "padding", group: "spacing", control: { type: "box", units: PX_PCT }, default: "10px 25px" },
+    { attr: "border-radius", label: "cornerRadius", group: "style", control: { type: "length", units: PX_PCT } },
+    { attr: "target", label: "opensIn", group: "advanced", control: { type: "select", options: TARGET }, default: "_blank" },
+    { attr: "title", label: "tooltip", group: "advanced", control: { type: "text" } },
+    { attr: "rel", label: "rel", group: "advanced", control: { type: "text", placeholder: "noopener" } },
+    { attr: "border", label: "border", group: "advanced", control: { type: "text", placeholder: "1px solid #cccccc" }, default: "0" },
+    { attr: "container-background-color", label: "blockBackground", group: "advanced", control: { type: "color" } }
+  ],
+  "mj-divider": [
+    { attr: "width", label: "width", group: "layout", control: { type: "length", units: PX_PCT }, default: "100%" },
+    { attr: "align", label: "align", group: "layout", control: { type: "segmented", options: ALIGN }, default: "center" },
+    { attr: "padding", label: "padding", group: "spacing", control: { type: "box", units: PX_PCT }, default: "10px 25px" },
+    { attr: "border-color", label: "lineColor", group: "style", control: { type: "color" }, default: "#000000" },
+    { attr: "border-width", label: "thickness", group: "style", control: { type: "length", units: PX }, default: "4px" },
+    {
+      attr: "border-style",
+      label: "lineStyle",
+      group: "style",
+      control: {
+        type: "segmented",
+        options: [
+          { value: "solid", label: "lineSolid" },
+          { value: "dashed", label: "lineDashed" },
+          { value: "dotted", label: "lineDotted" }
+        ]
+      },
+      default: "solid"
+    },
+    { attr: "container-background-color", label: "blockBackground", group: "advanced", control: { type: "color" } }
+  ],
+  "mj-spacer": [
+    { attr: "height", label: "height", group: "layout", control: { type: "length", units: PX }, default: "20px" },
+    { attr: "container-background-color", label: "blockBackground", group: "advanced", control: { type: "color" } }
+  ],
+  "mj-social": [
+    {
+      attr: "mode",
+      label: "socialMode",
+      group: "layout",
+      control: {
+        type: "segmented",
+        options: [
+          { value: "horizontal", label: "modeHorizontal" },
+          { value: "vertical", label: "modeVertical" }
+        ]
+      },
+      default: "horizontal"
+    },
+    { attr: "align", label: "align", group: "layout", control: { type: "segmented", options: ALIGN }, default: "center" },
+    { attr: "padding", label: "padding", group: "spacing", control: { type: "box", units: PX_PCT }, default: "10px 25px" },
+    { attr: "inner-padding", label: "iconSpacing", group: "spacing", control: { type: "box", units: PX_PCT } },
+    { attr: "icon-size", label: "iconSize", group: "style", control: { type: "length", units: PX_PCT }, default: "20px" },
+    // A single value: mj-social's border-radius is not a 4-side shorthand.
+    { attr: "border-radius", label: "cornerRadius", group: "style", control: { type: "length", units: PX_PCT }, default: "3px" },
+    { attr: "font-family", label: "font", group: "advanced", control: { type: "select", options: FONTS }, default: "Ubuntu, Helvetica, Arial, sans-serif" },
+    { attr: "font-size", label: "fontSize", group: "advanced", control: { type: "length", units: PX }, default: "13px" },
+    { attr: "color", label: "textColor", group: "advanced", control: { type: "color" }, default: "#333333" },
+    { attr: "line-height", label: "lineHeight", group: "advanced", control: { type: "length", units: LINE_HEIGHT }, default: "22px" },
+    { attr: "container-background-color", label: "blockBackground", group: "advanced", control: { type: "color" } }
+  ],
+  "mj-social-element": [
+    { attr: "name", label: "network", group: "content", control: { type: "network", networks: NETWORKS } },
+    { attr: "href", label: "link", group: "content", control: { type: "link" } },
+    {
+      attr: "src",
+      label: "customIcon",
+      group: "content",
+      control: { type: "image" },
+      when: (a) => (a.name ?? "").startsWith("custom") || !!a.src
+    },
+    { attr: "alt", label: "altText", group: "content", control: { type: "text" } },
+    { attr: "background-color", label: "iconColor", group: "style", control: { type: "color" } },
+    { attr: "icon-size", label: "iconSize", group: "advanced", control: { type: "length", units: PX_PCT } },
+    { attr: "border-radius", label: "cornerRadius", group: "advanced", control: { type: "length", units: PX }, default: "3px" },
+    { attr: "padding", label: "padding", group: "advanced", control: { type: "box", units: PX_PCT }, default: "4px" },
+    { attr: "icon-position", label: "iconPosition", group: "advanced", control: { type: "segmented", options: [{ value: "left", label: "alignLeft" }, { value: "right", label: "alignRight" }] }, default: "left" },
+    { attr: "title", label: "tooltip", group: "advanced", control: { type: "text" } },
+    { attr: "target", label: "opensIn", group: "advanced", control: { type: "select", options: TARGET }, default: "_blank" },
+    { attr: "rel", label: "rel", group: "advanced", control: { type: "text", placeholder: "noopener" } }
+  ],
+  "mj-hero": [
+    { attr: "background-url", label: "backgroundImage", group: "content", control: { type: "image" } },
+    {
+      attr: "mode",
+      label: "heroMode",
+      group: "content",
+      control: {
+        type: "segmented",
+        options: [
+          { value: "fixed-height", label: "heroFixed" },
+          { value: "fluid-height", label: "heroFluid" }
+        ]
+      },
+      default: "fixed-height"
+    },
+    {
+      attr: "height",
+      label: "height",
+      group: "layout",
+      control: { type: "length", units: PX_PCT },
+      default: "0px",
+      when: (a) => (a.mode ?? "fixed-height") === "fixed-height"
+    },
+    {
+      attr: "background-width",
+      label: "backgroundWidth",
+      group: "layout",
+      control: { type: "length", units: PX_PCT },
+      when: (a) => a.mode === "fluid-height"
+    },
+    {
+      attr: "background-height",
+      label: "backgroundHeight",
+      group: "layout",
+      control: { type: "length", units: PX_PCT },
+      when: (a) => a.mode === "fluid-height"
+    },
+    { attr: "vertical-align", label: "verticalAlign", group: "layout", control: { type: "segmented", options: VERTICAL_ALIGN }, default: "top" },
+    { attr: "background-position", label: "backgroundPosition", group: "layout", control: { type: "select", options: BACKGROUND_POSITION }, default: "center center" },
+    { attr: "padding", label: "padding", group: "spacing", control: { type: "box", units: PX_PCT }, default: "0px" },
+    { attr: "background-color", label: "fallbackColor", group: "style", control: { type: "color" }, default: "#ffffff" },
+    { attr: "border-radius", label: "cornerRadius", group: "style", control: { type: "length", units: PX_PCT } },
+    { attr: "inner-padding", label: "contentPadding", group: "advanced", control: { type: "box", units: PX_PCT } },
+    { attr: "inner-background-color", label: "contentBackground", group: "advanced", control: { type: "color" } }
+  ],
+  "mj-navbar": [
+    { attr: "align", label: "align", group: "layout", control: { type: "segmented", options: ALIGN }, default: "center" },
+    { attr: "hamburger", label: "hamburger", group: "layout", control: { type: "toggle", on: "hamburger" } },
+    { attr: "padding", label: "padding", group: "spacing", control: { type: "box", units: PX_PCT } },
+    { attr: "ico-color", label: "menuIconColor", group: "advanced", control: { type: "color" }, default: "#000000", when: (a) => !!a.hamburger },
+    { attr: "ico-font-size", label: "menuIconSize", group: "advanced", control: { type: "length", units: PX_PCT }, default: "30px", when: (a) => !!a.hamburger },
+    { attr: "ico-align", label: "menuIconAlign", group: "advanced", control: { type: "segmented", options: ALIGN }, default: "center", when: (a) => !!a.hamburger },
+    { attr: "base-url", label: "baseUrl", group: "advanced", control: { type: "link" } }
+  ],
+  "mj-navbar-link": [
+    { attr: "href", label: "link", group: "content", control: { type: "link" } },
+    { attr: "padding", label: "padding", group: "spacing", control: { type: "box", units: PX_PCT }, default: "15px 10px" },
+    { attr: "color", label: "textColor", group: "style", control: { type: "color" }, default: "#000000" },
+    { attr: "font-family", label: "font", group: "style", control: { type: "select", options: FONTS }, default: "Ubuntu, Helvetica, Arial, sans-serif" },
+    { attr: "font-size", label: "fontSize", group: "style", control: { type: "length", units: PX }, default: "13px" },
+    { attr: "font-weight", label: "fontWeight", group: "style", control: { type: "select", options: WEIGHTS }, default: "normal" },
+    { attr: "text-transform", label: "textTransform", group: "style", control: { type: "select", options: TEXT_TRANSFORM }, default: "uppercase" },
+    { attr: "target", label: "opensIn", group: "advanced", control: { type: "select", options: TARGET }, default: "_blank" },
+    { attr: "rel", label: "rel", group: "advanced", control: { type: "text", placeholder: "noopener" } },
+    { attr: "letter-spacing", label: "letterSpacing", group: "advanced", control: { type: "length", units: LETTER_SPACING, negative: true } },
+    { attr: "line-height", label: "lineHeight", group: "advanced", control: { type: "length", units: LINE_HEIGHT }, default: "22px" }
+  ]
+};
+
+// src/components/editor/layers.ts
+var svg = (paths) => `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${paths}</svg>`;
+var ICONS = {
+  "mj-wrapper": svg(
+    '<path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><rect width="10" height="10" x="7" y="7" rx="1"/>'
+  ),
+  "mj-section": svg('<rect width="20" height="12" x="2" y="6" rx="2"/>'),
+  "mj-hero": svg('<rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/>'),
+  "mj-group": svg(
+    '<rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/><path d="M15 3v18"/>'
+  ),
+  "mj-column": svg('<rect width="18" height="18" x="3" y="3" rx="2"/><path d="M12 3v18"/>'),
+  "mj-text": svg('<path d="M4 7V4h16v3"/><path d="M9 20h6"/><path d="M12 4v16"/>'),
+  "mj-image": svg(
+    '<rect width="18" height="18" x="3" y="3" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>'
+  ),
+  "mj-button": svg('<rect width="20" height="10" x="2" y="7" rx="3"/><path d="M8 12h8"/>'),
+  "mj-divider": svg('<path d="M5 12h14"/>'),
+  "mj-spacer": svg('<path d="M12 3v18"/><path d="m8 17 4 4 4-4"/><path d="m8 7 4-4 4 4"/>'),
+  "mj-social": svg(
+    '<circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="m8.59 13.51 6.83 3.98"/><path d="m15.41 6.51-6.82 3.98"/>'
+  ),
+  "mj-social-element": svg(
+    '<circle cx="12" cy="12" r="4"/><path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8"/>'
+  ),
+  "mj-navbar": svg('<path d="M4 6h16"/><path d="M4 12h16"/><path d="M4 18h16"/>'),
+  "mj-navbar-link": svg(
+    '<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>'
+  ),
+  "mj-raw": svg('<path d="m16 18 6-6-6-6"/><path d="m8 6-6 6 6 6"/>')
 };
 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";
-}
-function isCommentable(c) {
-  const t = tagOf(c);
-  return t === "mj-section" || t in TYPE_LABEL;
-}
-function classMatch(c, re) {
-  const cssClass = String(c.getAttributes()["css-class"] ?? "");
-  return cssClass.match(re)?.[1] ?? null;
-}
-function sectionIdOf(c) {
-  return classMatch(c, SEC_ID_RE);
+function textOf(c) {
+  const template = document.createElement("template");
+  template.innerHTML = c.getInnerHTML();
+  template.content.querySelectorAll("br, p, div, li, tr, h1, h2, h3, h4, h5, h6").forEach((el) => el.after("\n"));
+  const lines = (template.content.textContent ?? "").split("\n");
+  const first = lines.map((l) => l.replace(/\s+/g, " ").trim()).find(Boolean) ?? "";
+  return first.slice(0, 60);
 }
-function addIdClass(c, prefix) {
-  const existing = classMatch(c, prefix === "sec" ? SEC_ID_RE : OBJ_ID_RE);
-  if (existing) return existing;
-  const cssClass = String(c.getAttributes()["css-class"] ?? "");
-  const id = Math.random().toString(36).slice(2, 10);
-  c.addAttributes({ "css-class": `${cssClass} ${prefix}-${id}`.trim() });
-  return id;
+function escapeHtml(s) {
+  return s.replace(/[&<>"']/g, (ch) => `&#${ch.charCodeAt(0)};`);
 }
-function closestSection(c) {
-  let cur = c;
-  while (cur) {
-    if (isSection(cur)) return cur;
-    cur = cur.parent() ?? void 0;
+function layerName(c, labels) {
+  const tag = tagOf(c);
+  const kind = labels.elementNames[tag] ?? tag.replace(/^mj-/, "");
+  const attributes = c.getAttributes();
+  switch (tag) {
+    case "mj-text":
+    case "mj-button":
+    case "mj-navbar-link":
+      return textOf(c) || kind;
+    case "mj-image":
+      return attributes.alt?.trim() || kind;
+    case "mj-social-element": {
+      const { network } = parseNetwork(String(attributes.name ?? ""));
+      const option = NETWORKS.find((o) => o.value === network && network !== "custom");
+      return textOf(c) || option && (labels.inspectorLabels[option.label] ?? option.label) || kind;
+    }
+    case "mj-section":
+    case "mj-wrapper":
+    case "mj-hero": {
+      let words = "";
+      c.onAll((d) => {
+        if (!words && d !== c && ["mj-text", "mj-button"].includes(tagOf(d))) words = textOf(d);
+      });
+      return words || kind;
+    }
+    case "mj-column": {
+      const columns = c.parent()?.components().filter((s) => tagOf(s) === "mj-column") ?? [];
+      return columns.length > 1 ? `${kind} ${columns.indexOf(c) + 1}` : kind;
+    }
+    default:
+      return kind;
   }
-  return null;
 }
-var CRUMB_NAME = {
-  "mj-section": "Section",
-  "mj-column": "Column",
-  "mj-group": "Group",
-  "mj-text": "Text",
-  "mj-button": "Button",
-  "mj-image": "Image",
-  "mj-divider": "Divider",
-  "mj-spacer": "Spacer",
-  "mj-hero": "Hero",
-  "mj-navbar": "Navbar",
-  "mj-social": "Social",
-  "mj-social-element": "Social",
-  "mj-wrapper": "Wrapper"
-};
-function crumbName(c) {
-  const t = tagOf(c);
-  return CRUMB_NAME[t] ?? t.replace(/^mj-/, "") ?? "Element";
+var CONTENT = /* @__PURE__ */ new Set(["mj-text", "mj-button", "mj-navbar-link", "mj-social-element", "mj-raw"]);
+function badgeLabel(labels) {
+  return (c) => {
+    const tag = tagOf(c);
+    const icon = ICONS[tag] ? `<div class="gjs-badge__icon">${ICONS[tag]}</div>` : "";
+    const kind = labels.elementNames[tag] ?? tag.replace(/^mj-/, "");
+    return `${icon}<div class="gjs-badge__name">${escapeHtml(kind)}</div>`;
+  };
 }
-function objectLabel(c) {
-  const base = TYPE_LABEL[tagOf(c)] ?? tagOf(c);
-  const text = String(c.getEl?.()?.textContent ?? "").replace(/\s+/g, " ").trim().slice(0, 30);
-  return text ? `${base}: \u201C${text}\u201D` : base;
+function setupLayerNames(editor, labels) {
+  const hideContent = (c) => c.onAll((d) => d !== c && d.set("layerable", false, { avoidStore: true }));
+  for (const type of editor.Components.getTypes()) {
+    if (!type.id.startsWith("mj-")) continue;
+    editor.Components.addType(type.id, {
+      model: {
+        // Ours whatever the element says: GrapesJS writes it into the row's markup as it is.
+        getIcon() {
+          return ICONS[type.id] ?? "";
+        },
+        // GrapesJS writes the name into the row's markup unescaped, and it is document text.
+        getName() {
+          return escapeHtml(layerName(this, labels));
+        },
+        ...CONTENT.has(type.id) && {
+          // Editing a text replaces its children, so they are hidden again as they arrive.
+          init() {
+            hideContent(this);
+            this.listenTo(this.components(), "add reset", () => hideContent(this));
+          }
+        }
+      },
+      // Runs the plugin's own `init` as well.
+      extendFn: ["init"]
+    });
+  }
+  let pending = false;
+  editor.on("update component:add component:remove", () => {
+    if (pending) return;
+    pending = true;
+    requestAnimationFrame(() => {
+      pending = false;
+      editor.Layers.getRoot()?.onAll((c) => {
+        const view = c.viewLayer;
+        const el = view?.getInputName?.();
+        const name = layerName(c, labels);
+        if (!el || el.textContent === name) return;
+        el.textContent = name;
+        el.parentElement?.setAttribute("title", name);
+      });
+    });
+  });
+}
+
+// src/components/editor/inspector/StructureSection.tsx
+import { AtSign, ChevronRight, Link2 as Link22, Plus } from "lucide-react";
+
+// src/components/editor/inspector/structure.ts
+function tagOf2(c) {
+  return String(c.get("tagName") || c.get("type") || "");
+}
+var COLUMN_RATIOS = {
+  2: [
+    [1, 1],
+    [1, 2],
+    [2, 1]
+  ],
+  3: [
+    [1, 1, 1],
+    [1, 2, 1]
+  ]
+};
+function columnsOf(section) {
+  const children = section.components().models;
+  return children.length > 0 && children.every((c) => tagOf2(c) === "mj-column") ? children : null;
+}
+function ratioWidths(ratio) {
+  if (ratio.every((r) => r === ratio[0])) return null;
+  const total = ratio.reduce((a, b) => a + b, 0);
+  return ratio.map((r) => `${Math.round(r / total * 1e4) / 100}%`);
+}
+function currentRatio(columns) {
+  const widths = columns.map((c) => String(c.getAttributes().width ?? ""));
+  return COLUMN_RATIOS[columns.length]?.find((ratio) => {
+    const want = ratioWidths(ratio);
+    if (!want) return widths.every((w) => w === "");
+    return widths.every(
+      (w, i) => /%$/.test(w) && Math.abs(parseFloat(w) - parseFloat(want[i])) < 0.5
+    );
+  }) ?? null;
+}
+function setRatio(columns, ratio) {
+  const widths = ratioWidths(ratio);
+  columns.forEach((c, i) => {
+    if (widths) c.addAttributes({ width: widths[i] });
+    else c.removeAttributes(["width"]);
+  });
+}
+var PROFILE_URLS = {
+  facebook: "https://facebook.com/",
+  instagram: "https://instagram.com/",
+  x: "https://x.com/",
+  linkedin: "https://linkedin.com/",
+  youtube: "https://youtube.com/",
+  pinterest: "https://pinterest.com/",
+  github: "https://github.com/"
+};
+function addNetwork(social) {
+  const present = new Set(
+    social.components().map((c) => String(c.getAttributes().name ?? "").replace(/-noshare$/, ""))
+  );
+  const network = Object.keys(PROFILE_URLS).find((n) => !present.has(n)) ?? "facebook";
+  return social.append(
+    `<mj-social-element name="${network}-noshare" href="${PROFILE_URLS[network]}"></mj-social-element>`
+  )[0];
+}
+function addNavbarLink(navbar, text) {
+  return navbar.append(`<mj-navbar-link>${escapeHtml2(text)}</mj-navbar-link>`)[0];
+}
+function escapeHtml2(s) {
+  return s.replace(/[&<>"']/g, (ch) => `&#${ch.charCodeAt(0)};`);
+}
+
+// src/components/editor/inspector/StructureSection.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function tagOf3(c) {
+  return String(c.get("tagName") || c.get("type") || "");
+}
+function StructureSection({
+  editor,
+  component,
+  labels,
+  locked
+}) {
+  switch (tagOf3(component)) {
+    case "mj-section":
+      return /* @__PURE__ */ jsx6(ColumnWidths, { component, labels, locked });
+    case "mj-social":
+      return /* @__PURE__ */ jsx6(
+        Children,
+        {
+          editor,
+          component,
+          labels,
+          locked,
+          title: labels.socialNetworks,
+          add: labels.addNetwork,
+          icon: /* @__PURE__ */ jsx6(AtSign, { className: "size-3.5 shrink-0" }),
+          onAdd: () => editor.select(addNetwork(component))
+        }
+      );
+    case "mj-navbar":
+      return /* @__PURE__ */ jsx6(
+        Children,
+        {
+          editor,
+          component,
+          labels,
+          locked,
+          title: labels.navbarLinks,
+          add: labels.addLink,
+          icon: /* @__PURE__ */ jsx6(Link22, { className: "size-3.5 shrink-0" }),
+          onAdd: () => editor.select(addNavbarLink(component, labels.newLinkText))
+        }
+      );
+    default:
+      return null;
+  }
+}
+function Heading({ children }) {
+  return /* @__PURE__ */ jsx6("h3", { className: "px-3 pb-1 text-[10px] font-semibold tracking-wider text-panel-muted-fg/80 uppercase", children });
+}
+function ColumnWidths({
+  component,
+  labels,
+  locked
+}) {
+  const columns = columnsOf(component);
+  const ratios = columns && COLUMN_RATIOS[columns.length];
+  if (!columns || !ratios) return null;
+  const current = currentRatio(columns);
+  return /* @__PURE__ */ jsxs5("section", { className: "border-b border-panel-border/60 py-2", children: [
+    /* @__PURE__ */ jsx6(Heading, { children: labels.columnWidths }),
+    /* @__PURE__ */ jsx6("div", { className: "flex gap-1.5 px-3 py-1", children: ratios.map((ratio) => {
+      const name = labels.columnRatio(ratio.join(":"));
+      const active = current?.join() === ratio.join();
+      return /* @__PURE__ */ jsx6(
+        "button",
+        {
+          type: "button",
+          disabled: locked,
+          "aria-pressed": active,
+          title: name,
+          "aria-label": name,
+          onClick: () => !active && setRatio(columns, ratio),
+          className: cn(
+            "flex h-8 flex-1 items-center gap-0.5 rounded-md border px-1.5 transition-colors",
+            active ? "border-brand bg-brand/15" : "border-panel-border bg-panel-elevated hover:border-panel-muted-fg"
+          ),
+          children: ratio.map((part, i) => /* @__PURE__ */ jsx6(
+            "span",
+            {
+              style: { flexGrow: part },
+              className: cn(
+                "h-4 basis-0 rounded-sm",
+                active ? "bg-brand" : "bg-panel-muted-fg/50"
+              )
+            },
+            i
+          ))
+        },
+        ratio.join()
+      );
+    }) })
+  ] });
+}
+function Children({
+  editor,
+  component,
+  labels,
+  locked,
+  title,
+  add,
+  icon,
+  onAdd
+}) {
+  const children = component.components().models;
+  return /* @__PURE__ */ jsxs5("section", { className: "border-b border-panel-border/60 py-2", children: [
+    /* @__PURE__ */ jsx6(Heading, { children: title }),
+    /* @__PURE__ */ jsx6("ul", { className: "flex flex-col px-2", children: children.map((child) => /* @__PURE__ */ jsx6("li", { children: /* @__PURE__ */ jsxs5(
+      "button",
+      {
+        type: "button",
+        onClick: () => editor.select(child),
+        className: "group flex w-full items-center gap-2 rounded-md px-1.5 py-1 text-left text-xs text-panel-fg hover:bg-panel-hover",
+        children: [
+          /* @__PURE__ */ jsx6("span", { className: "text-panel-muted-fg", children: icon }),
+          /* @__PURE__ */ jsx6("span", { className: "min-w-0 flex-1 truncate", children: layerName(child, labels) }),
+          /* @__PURE__ */ jsx6(ChevronRight, { className: "size-3 shrink-0 text-panel-muted-fg opacity-0 group-hover:opacity-100" })
+        ]
+      }
+    ) }, child.cid)) }),
+    /* @__PURE__ */ jsxs5(
+      "button",
+      {
+        type: "button",
+        disabled: locked,
+        onClick: onAdd,
+        className: "mx-3 mt-1 flex items-center gap-1.5 rounded-md px-1 py-1 text-xs text-panel-muted-fg hover:text-panel-fg disabled:opacity-50",
+        children: [
+          /* @__PURE__ */ jsx6(Plus, { className: "size-3.5" }),
+          add
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/editor/inspector/write.ts
+function same(a, b) {
+  const keys = Object.keys(a);
+  return keys.length === Object.keys(b).length && keys.every((k) => k in b && a[k] === b[k]);
+}
+function createWriter(editor, component, blocked = () => false) {
+  const isImage = String(component.get("tagName") || component.get("type")) === "mj-image";
+  const current = () => {
+    const { __p: _marker, style: _style, ...rest } = component.get("attributes");
+    return rest;
+  };
+  let drag = null;
+  const record = (start, end) => {
+    component.setAttributes(start, { avoidStore: true });
+    if (!same(end, start)) component.setAttributes(end);
+    delete component.get("attributes").__p;
+  };
+  return async (attr, value, { partial, remove = [] } = {}) => {
+    if (editor.getEditing() === component) {
+      const view = component.getView();
+      await view?.syncContent?.();
+    }
+    if (blocked()) return;
+    if (drag && drag.attr !== attr) {
+      const { start: start2 } = drag;
+      drag = null;
+      record(start2, current());
+    }
+    if (attr === "src" && isImage) return void component.set({ src: value });
+    const next = current();
+    for (const name of remove) delete next[name];
+    if (value === "") delete next[attr];
+    else next[attr] = value;
+    if (partial) {
+      drag ??= { attr, start: current() };
+      component.setAttributes(next, { avoidStore: true });
+      return;
+    }
+    const start = drag?.start ?? current();
+    drag = null;
+    record(start, next);
+  };
+}
+
+// src/components/editor/inspector/Inspector.tsx
+import { Fragment, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var GROUPS = ["content", "layout", "spacing", "style"];
+var HIDDEN = /* @__PURE__ */ new Set(["css-class", "mj-class", "id", "style"]);
+function tagOf4(c) {
+  return String(c.get("tagName") || c.get("type") || "");
+}
+function attributesOf(c) {
+  const out = {};
+  for (const [k, v] of Object.entries(c.getAttributes())) {
+    if (v !== void 0 && v !== null && v !== false) out[k] = String(v);
+  }
+  if (tagOf4(c) === "mj-image") out.src = String(c.get("src") ?? "");
+  return out;
+}
+function documentColors(editor) {
+  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 editor.getHtml().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);
+}
+function Inspector({
+  onEmailSettings,
+  empty
+}) {
+  const editor = useEditorMaybe();
+  const labels = useLabels();
+  const { locked } = useAgentTurn();
+  const lockedNow = useRef4(locked);
+  useLayoutEffect(() => {
+    lockedNow.current = locked;
+  });
+  const [, refresh] = useReducer((n) => n + 1, 0);
+  const root = useRef4(null);
+  const refocus = useRef4(false);
+  useEffect4(() => {
+    if (!editor) return;
+    const events = "component:update change:device";
+    const toggled = () => {
+      if (root.current?.contains(document.activeElement)) refocus.current = true;
+      refresh();
+    };
+    editor.on(events, refresh);
+    editor.on("component:toggled", toggled);
+    return () => {
+      editor.off(events, refresh);
+      editor.off("component:toggled", toggled);
+    };
+  }, [editor]);
+  useEffect4(() => {
+    if (!refocus.current) return;
+    refocus.current = false;
+    root.current?.querySelector("[data-focus-target]")?.focus();
+  });
+  if (!editor) return null;
+  const selected = editor.getSelectedAll();
+  const component = selected[0];
+  return /* @__PURE__ */ jsx7("div", { ref: root, children: selected.length === 0 ? /* @__PURE__ */ jsx7("div", { "data-focus-target": true, tabIndex: -1, className: "outline-none", children: empty }) : selected.length > 1 ? /* @__PURE__ */ jsx7(
+    "p",
+    {
+      "data-focus-target": true,
+      tabIndex: -1,
+      className: "px-4 py-8 text-center text-xs text-panel-muted-fg outline-none",
+      children: labels.multipleSelected(selected.length)
+    }
+  ) : /* @__PURE__ */ jsx7(
+    ElementSettings,
+    {
+      editor,
+      component,
+      labels,
+      locked,
+      lockedNow,
+      onEmailSettings
+    },
+    component.cid
+  ) });
+}
+function ElementSettings({
+  editor,
+  component,
+  labels,
+  locked,
+  lockedNow,
+  onEmailSettings
+}) {
+  const [advancedOpen, setAdvancedOpen] = useState4(false);
+  const tag = tagOf4(component);
+  const fields = SCHEMA[tag] ?? [];
+  const attributes = attributesOf(component);
+  const visible = fields.filter((f) => !f.when || f.when(attributes));
+  const t = (key) => labels.inspectorLabels[key] ?? key;
+  const optionName = (o) => labels.inspectorLabels[o.label] ?? o.label;
+  const [writer] = useState4(() => createWriter(editor, component, () => lockedNow.current));
+  const write = (attr, value, options) => lockedNow.current ? Promise.resolve() : writer(attr, value, options);
+  const writeBox = (attr, shorthand, partial) => write(attr, shorthand, { remove: SIDES.map((s) => `${attr}-${s}`), partial });
+  const chooseImage = (attr) => {
+    if (attr === "src" && tag === "mj-image") return void editor.runCommand("open-image-picker");
+    const am = editor.AssetManager;
+    am.open({
+      types: ["image"],
+      current: imageUrl(attributes[attr] ?? "") ?? void 0,
+      select(asset, complete) {
+        void write(attr, typeof asset === "string" ? asset : asset.getSrc());
+        if (complete) am.close();
+      }
+    });
+  };
+  const safeLink = (attr) => (link) => {
+    if (tag === "mj-navbar-link" && attr === "href") {
+      return isSafeNavbarLink(String(component.parent()?.getAttributes()["base-url"] ?? ""), link);
+    }
+    if (tag === "mj-navbar" && attr === "base-url") {
+      return component.components().every((c) => isSafeNavbarLink(link, String(c.getAttributes().href ?? "")));
+    }
+    return isSafeLink(link);
+  };
+  const control = (f) => {
+    const value = attributes[f.attr] ?? "";
+    const c = f.control;
+    switch (c.type) {
+      case "text":
+        return /* @__PURE__ */ jsx7(
+          TextInput,
+          {
+            value,
+            placeholder: c.placeholder ?? f.default,
+            onCommit: (v) => write(f.attr, v)
+          }
+        );
+      case "link":
+        return /* @__PURE__ */ jsx7(
+          TextInput,
+          {
+            value,
+            placeholder: "https://",
+            accept: safeLink(f.attr),
+            onCommit: (v) => write(f.attr, v)
+          }
+        );
+      case "color":
+        return /* @__PURE__ */ jsx7(
+          ColorField,
+          {
+            value,
+            placeholder: f.default,
+            documentColors: () => documentColors(editor),
+            labels,
+            onChange: (v, partial) => write(f.attr, v, { partial })
+          }
+        );
+      case "image":
+        return /* @__PURE__ */ jsx7(
+          ImageField,
+          {
+            value,
+            labels,
+            onChoose: () => chooseImage(f.attr),
+            onClear: () => write(f.attr, "")
+          }
+        );
+      case "length":
+        return /* @__PURE__ */ jsx7(
+          LengthInput,
+          {
+            value,
+            placeholder: f.default,
+            units: c.units,
+            negative: c.negative,
+            labels,
+            onCommit: (v, partial) => write(f.attr, v, { partial })
+          }
+        );
+      case "box":
+        return /* @__PURE__ */ jsx7(
+          BoxInput,
+          {
+            attributes,
+            attr: f.attr,
+            placeholder: f.default,
+            units: c.units,
+            labels,
+            onCommit: (v, partial) => writeBox(f.attr, v, partial)
+          }
+        );
+      case "segmented":
+        return /* @__PURE__ */ jsx7(
+          Segmented,
+          {
+            value,
+            fallback: f.default,
+            options: c.options,
+            name: optionName,
+            onCommit: (v) => write(f.attr, v)
+          }
+        );
+      case "select":
+        return /* @__PURE__ */ jsx7(
+          Select,
+          {
+            value,
+            fallback: f.default,
+            options: c.options,
+            name: optionName,
+            onCommit: (v) => write(f.attr, v)
+          }
+        );
+      case "toggle":
+        return /* @__PURE__ */ jsx7(
+          Toggle,
+          {
+            checked: value === c.on,
+            label: t(f.label),
+            onCommit: (on) => write(f.attr, on ? c.on : "")
+          }
+        );
+      case "network": {
+        const { network, share } = parseNetwork(value);
+        return /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-1.5", children: [
+          /* @__PURE__ */ jsx7(
+            Select,
+            {
+              value: network,
+              options: c.networks,
+              name: optionName,
+              onCommit: (n) => write(f.attr, n ? networkName(n, share) : "")
+            }
+          ),
+          network && network !== "custom" && /* @__PURE__ */ jsx7(
+            Segmented,
+            {
+              value: share ? "share" : "profile",
+              options: [
+                { value: "profile", label: labels.linkTypeProfile },
+                { value: "share", label: labels.linkTypeShare }
+              ],
+              name: (o) => o.label,
+              onCommit: (v) => write(f.attr, networkName(network, v === "share"))
+            }
+          )
+        ] });
+      }
+    }
+  };
+  const own = (f) => f.control.type === "box" ? [f.attr, ...SIDES.map((s) => `${f.attr}-${s}`)].some((a) => attributes[a] !== void 0) : !!attributes[f.attr];
+  const reset = (f) => f.control.type === "box" ? writeBox(f.attr, "") : write(f.attr, "");
+  const wide = (f) => ["color", "image", "link", "text", "box", "network"].includes(f.control.type);
+  const row = (f) => /* @__PURE__ */ jsx7(
+    Row,
+    {
+      label: t(f.label),
+      help: labels.inspectorLabels[`${f.label}.help`],
+      own: own(f),
+      wide: wide(f),
+      inline: f.control.type === "toggle",
+      labels,
+      onReset: () => void reset(f),
+      children: control(f)
+    },
+    f.attr
+  );
+  const named = new Set(
+    fields.flatMap(
+      (f) => f.control.type === "box" ? [f.attr, ...SIDES.map((s) => `${f.attr}-${s}`)] : [f.attr]
+    )
+  );
+  const others = Object.entries(attributes).filter(([k]) => !named.has(k) && !HIDDEN.has(k));
+  const advanced = visible.filter((f) => f.group === "advanced");
+  const advancedCount = advanced.length + others.length;
+  return /* @__PURE__ */ jsxs6("div", { className: "pb-6", children: [
+    /* @__PURE__ */ jsx7(
+      Header,
+      {
+        editor,
+        component,
+        labels,
+        onEmailSettings
+      }
+    ),
+    editor.getDevice() !== "Desktop" && /* @__PURE__ */ jsxs6("p", { className: "mx-3 mt-2 flex items-center gap-1.5 rounded-md bg-panel-elevated px-2 py-1.5 text-[11px] text-panel-muted-fg", children: [
+      /* @__PURE__ */ jsx7(Monitor, { className: "size-3.5 shrink-0" }),
+      labels.allScreenSizes
+    ] }),
+    /* @__PURE__ */ jsx7(StructureSection, { editor, component, labels, locked }),
+    GROUPS.map((group) => {
+      const inGroup = visible.filter((f) => f.group === group);
+      if (inGroup.length === 0) return null;
+      return /* @__PURE__ */ jsxs6("section", { className: "border-b border-panel-border/60 py-2", children: [
+        /* @__PURE__ */ jsx7("h3", { className: "px-3 pb-1 text-[10px] font-semibold tracking-wider text-panel-muted-fg/80 uppercase", children: groupName(group, labels) }),
+        inGroup.map(row)
+      ] }, group);
+    }),
+    advancedCount > 0 && /* @__PURE__ */ jsxs6("section", { className: "py-1", children: [
+      /* @__PURE__ */ jsxs6(
+        "button",
+        {
+          type: "button",
+          onClick: () => setAdvancedOpen((o) => !o),
+          "aria-expanded": advancedOpen,
+          className: "flex w-full items-center gap-1 px-3 py-2 text-[10px] font-semibold tracking-wider text-panel-muted-fg/80 uppercase hover:text-panel-fg",
+          children: [
+            /* @__PURE__ */ jsx7(
+              ChevronRight2,
+              {
+                className: cn("size-3 transition-transform", advancedOpen && "rotate-90")
+              }
+            ),
+            labels.groupAdvanced,
+            /* @__PURE__ */ jsxs6("span", { className: "font-normal normal-case", children: [
+              "(",
+              advancedCount,
+              ")"
+            ] })
+          ]
+        }
+      ),
+      advancedOpen && /* @__PURE__ */ jsxs6(Fragment, { children: [
+        advanced.map(row),
+        others.length > 0 && /* @__PURE__ */ jsxs6("div", { className: "px-3 pt-2", children: [
+          /* @__PURE__ */ jsx7("p", { className: "pb-1 text-[11px] text-panel-muted-fg", children: labels.otherAttributes }),
+          /* @__PURE__ */ jsx7("ul", { className: "flex flex-col gap-1", children: others.map(([k, v]) => /* @__PURE__ */ jsxs6(
+            "li",
+            {
+              className: "flex items-center gap-2 rounded-md bg-panel-elevated px-2 py-1 font-mono text-[11px]",
+              children: [
+                /* @__PURE__ */ jsx7("span", { className: "text-panel-muted-fg", children: k }),
+                /* @__PURE__ */ jsx7("span", { className: "min-w-0 flex-1 truncate text-panel-fg", title: v, children: v }),
+                /* @__PURE__ */ jsx7(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => void write(k, ""),
+                    title: labels.removeAttribute,
+                    "aria-label": `${labels.removeAttribute}: ${k}`,
+                    className: "text-panel-muted-fg hover:text-panel-fg",
+                    children: /* @__PURE__ */ jsx7(X2, { className: "size-3" })
+                  }
+                )
+              ]
+            },
+            k
+          )) })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function groupName(group, labels) {
+  return {
+    content: labels.groupContent,
+    layout: labels.groupLayout,
+    spacing: labels.groupSpacing,
+    style: labels.groupStyle
+  }[group];
+}
+function Header({
+  editor,
+  component,
+  labels,
+  onEmailSettings
+}) {
+  const tag = tagOf4(component);
+  const isBody = tag === "mj-body";
+  const name = isBody ? labels.emailSettings : labels.elementNames[tag] ?? tag.replace(/^mj-/, "");
+  const words = tag === "mj-column" ? "" : layerName(component, labels);
+  const excerpt = words === name ? "" : words;
+  const parent = component.parent();
+  const action = "flex size-7 items-center justify-center rounded-md text-panel-muted-fg hover:bg-panel-hover hover:text-panel-fg";
+  return /* @__PURE__ */ jsxs6("div", { className: "sticky top-0 z-10 flex items-center gap-2 border-b border-panel-border bg-panel px-3 py-2", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx7(
+        "p",
+        {
+          "data-focus-target": true,
+          tabIndex: -1,
+          className: "truncate text-sm font-medium text-panel-fg outline-none",
+          children: name
+        }
+      ),
+      excerpt && !isBody && /* @__PURE__ */ jsxs6("p", { className: "truncate text-[11px] text-panel-muted-fg", children: [
+        "\u201C",
+        excerpt,
+        "\u201D"
+      ] })
+    ] }),
+    !isBody && parent && /* @__PURE__ */ jsx7(
+      "button",
+      {
+        type: "button",
+        className: action,
+        title: labels.selectParent,
+        "aria-label": labels.selectParent,
+        onClick: () => tagOf4(parent) === "mj-body" ? onEmailSettings() : editor.select(parent),
+        children: /* @__PURE__ */ jsx7(ArrowUp, { className: "size-3.5" })
+      }
+    ),
+    !isBody && /* @__PURE__ */ jsxs6(Fragment, { children: [
+      /* @__PURE__ */ jsx7(
+        "button",
+        {
+          type: "button",
+          className: action,
+          title: labels.duplicate,
+          "aria-label": labels.duplicate,
+          onClick: () => editor.runCommand("tlb-clone"),
+          children: /* @__PURE__ */ jsx7(Copy, { className: "size-3.5" })
+        }
+      ),
+      /* @__PURE__ */ jsx7(
+        "button",
+        {
+          type: "button",
+          className: action,
+          title: labels.deleteElement,
+          "aria-label": labels.deleteElement,
+          onClick: () => editor.runCommand("tlb-delete"),
+          children: /* @__PURE__ */ jsx7(Trash22, { className: "size-3.5" })
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/editor/ids.ts
+var ID_RE = { sec: /\bsec-([A-Za-z0-9_-]+)\b/, obj: /\bobj-([A-Za-z0-9_-]+)\b/ };
+function idOf(c, prefix) {
+  return String(c.getAttributes()["css-class"] ?? "").match(ID_RE[prefix])?.[1] ?? null;
+}
+var newId = () => Math.random().toString(36).slice(2, 10);
+function sectionIdOf(c) {
+  return idOf(c, "sec");
+}
+function addIdClass(c, prefix) {
+  const existing = idOf(c, prefix);
+  if (existing) return existing;
+  const cssClass = String(c.getAttributes()["css-class"] ?? "");
+  const id = newId();
+  c.addAttributes({ "css-class": `${cssClass} ${prefix}-${id}`.trim() });
+  return id;
+}
+function freshenCopiedIds(root, added) {
+  const used = (prefix, id, except) => {
+    let found = false;
+    root?.onAll((o) => {
+      if (o !== except && idOf(o, prefix) === id) found = true;
+    });
+    return found;
+  };
+  added.onAll((c) => {
+    for (const prefix of ["sec", "obj"]) {
+      const id = idOf(c, prefix);
+      if (!id || !used(prefix, id, c)) continue;
+      const cssClass = String(c.getAttributes()["css-class"]);
+      c.addAttributes({ "css-class": cssClass.replace(`${prefix}-${id}`, `${prefix}-${newId()}`) });
+    }
+  });
+}
+
+// src/components/editor/plugin-types.ts
+function fixPluginTypes(editor) {
+  for (const type of editor.Components.getTypes()) {
+    if (!type.id.startsWith("mj-")) continue;
+    const base = type.model.prototype.getAttrToHTML;
+    editor.Components.addType(type.id, {
+      model: {
+        defaults: { "style-default": {} },
+        getAttrToHTML() {
+          const attributes = base.call(this);
+          delete attributes.__p;
+          for (const [name, value] of Object.entries(attributes)) {
+            if (typeof value === "string") attributes[name] = value.replace(/"/g, "&quot;");
+          }
+          return attributes;
+        }
+      }
+    });
+  }
+}
+
+// src/components/editor/EmailEditor.tsx
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var TYPE_LABEL = {
+  "mj-text": "Text",
+  "mj-button": "Button",
+  "mj-image": "Image",
+  "mj-column": "Column"
+};
+function tagOf5(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 tagOf5(c) === "mj-section";
+}
+function isCommentable(c) {
+  const t = tagOf5(c);
+  return t === "mj-section" || t in TYPE_LABEL;
+}
+function closestSection(c) {
+  let cur = c;
+  while (cur) {
+    if (isSection(cur)) return cur;
+    cur = cur.parent() ?? void 0;
+  }
+  return null;
+}
+function crumbName(c, labels) {
+  const t = tagOf5(c);
+  return labels.elementNames[t] ?? t.replace(/^mj-/, "");
+}
+var BLOCKS = [
+  "mj-1-column",
+  "mj-2-columns",
+  "mj-3-columns",
+  "mj-text",
+  "mj-image",
+  "mj-button",
+  "mj-divider",
+  "mj-spacer",
+  "mj-social-group",
+  "mj-navbar"
+];
+var LAYOUT_BLOCKS = /* @__PURE__ */ new Set(["mj-1-column", "mj-2-columns", "mj-3-columns"]);
+var SOCIAL_BLOCK = `<mj-social icon-size="24px" mode="horizontal">
+  <mj-social-element name="facebook-noshare" href="https://facebook.com/"></mj-social-element>
+  <mj-social-element name="instagram-noshare" href="https://instagram.com/"></mj-social-element>
+  <mj-social-element name="x-noshare" href="https://x.com/"></mj-social-element>
+</mj-social>`;
+function objectLabel(c) {
+  const base = TYPE_LABEL[tagOf5(c)] ?? tagOf5(c);
+  const text = String(c.getEl?.()?.textContent ?? "").replace(/\s+/g, " ").trim().slice(0, 30);
+  return text ? `${base}: \u201C${text}\u201D` : base;
 }
 var RTE_FONTS = [
   "Arial",
@@ -767,75 +3032,6 @@ 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;
@@ -875,23 +3071,29 @@ function setupRichText(editor, labels) {
 function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
   const documents = useDocumentStore();
   const labels = useLabels();
-  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 loadingRef = useRef5(false);
+  const saveStatusRef = useRef5("idle");
+  const stateListeners = useRef5(/* @__PURE__ */ new Set());
+  const [loading, setLoading] = useState5(true);
+  const [sidebarView, setSidebarView] = useState5("blocks");
+  const blockSearchRef = useRef5(null);
+  const onBlockSearchKey = (e) => {
+    if (readOnlyRef.current || !opensBlockSearch(e)) return;
+    e.preventDefault();
+    setSidebarView("blocks");
+    requestAnimationFrame(() => blockSearchRef.current?.focus());
+  };
+  const [composeTarget, setComposeTarget] = useState5(null);
+  const selectionSource = useRef5("other");
+  const editorRef = useRef5(null);
   const { running: turnRunning, locked: readOnly, setLocked } = useAgentTurn();
-  const readOnlyRef = useRef3(false);
-  const applyReadOnly = useRef3(async () => {
+  const readOnlyRef = useRef5(false);
+  const applyReadOnly = useRef5(async () => {
   });
-  useEffect3(() => void applyReadOnly.current(turnRunning), [turnRunning]);
-  useEffect3(() => () => setLocked(false), [setLocked]);
-  const [crumbs, setCrumbs] = useState3([]);
-  const [selectedImageSrc, setSelectedImageSrc] = useState3(null);
-  const [picker, setPicker] = useState3(
+  useEffect5(() => void applyReadOnly.current(turnRunning), [turnRunning]);
+  useEffect5(() => () => setLocked(false), [setLocked]);
+  const [crumbs, setCrumbs] = useState5([]);
+  const [picker, setPicker] = useState5(
     null
   );
   const onEditor = async (editor) => {
@@ -900,7 +3102,7 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
       const chain = [];
       let cur = c;
       while (cur) {
-        const t = tagOf(cur);
+        const t = tagOf5(cur);
         if (!t || t === "mj-body" || t === "wrapper" || t === "Wrapper") break;
         chain.unshift(cur);
         cur = cur.parent() ?? void 0;
@@ -949,7 +3151,7 @@ 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")) {
+      if (tagOf5(c) === "mj-image" && !toolbar.some((t) => t.command === "open-image-picker")) {
         toolbar.push({
           command: "open-image-picker",
           label: IMAGE_SVG,
@@ -957,11 +3159,11 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
         });
         c.set("toolbar", toolbar);
       }
-      if (!toolbar.some((t) => t.command === "open-comments")) {
+      if (closestSection(c) && !toolbar.some((t) => t.command === "open-comments")) {
         toolbar.push({
           command: "open-comments",
           label: SPARKLES_SVG,
-          attributes: { title: "Comment on element / section", "data-role": "sparkles" }
+          attributes: { title: labels.commentOnElement, "data-role": "sparkles" }
         });
         c.set("toolbar", toolbar);
       }
@@ -969,7 +3171,7 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
     editor.Commands.add("open-image-picker", {
       run(ed) {
         const target = ed.getSelected();
-        if (!target || tagOf(target) !== "mj-image") return;
+        if (!target || tagOf5(target) !== "mj-image") return;
         const am = ed.AssetManager;
         am.open({
           target,
@@ -988,21 +3190,28 @@ 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";
-      if (/(text|image|button|divider|spacer|social)/.test(l)) return "Basic";
-      return "Advanced";
+    fixPluginTypes(editor);
+    setupLayerNames(editor, labels);
+    const STRUCTURE = /* @__PURE__ */ new Set(["mj-wrapper", "mj-section", "mj-column"]);
+    const showBodyInLayers = () => {
+      const body = findByTag("mj-body");
+      if (!body) return;
+      editor.Layers.setRoot(body);
+      body.onAll((c) => {
+        if (STRUCTURE.has(tagOf5(c))) editor.Layers.setOpen(c, true);
+      });
     };
-    const bm = editor.BlockManager;
-    bm.getAll().forEach(
-      (b) => {
-        b.set("category", blockCategory(b.get("label") || ""));
+    const keepStructureOpen = () => {
+      const layers = editor.Layers;
+      const opened = layers.model?.get("opened") ?? {};
+      for (const [cid, c] of Object.entries(opened)) {
+        if (STRUCTURE.has(tagOf5(c))) delete opened[cid];
       }
-    );
-    bm.render();
-    editor.on("component:add", decorate);
+    };
+    editor.on("component:add", (c) => {
+      if (!loadingRef.current) freshenCopiedIds(editor.getWrapper(), c);
+      decorate(c);
+    });
     editor.on("load", () => {
       const body = editor.Canvas.getBody();
       body?.addEventListener(
@@ -1012,34 +3221,17 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
         },
         true
       );
+      editor.Canvas.getDocument()?.addEventListener("keydown", onBlockSearchKey);
+      showBodyInLayers();
     });
     editor.on("component:selected", (c) => {
+      keepStructureOpen();
       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(
-          {
-            type: "text",
-            name: "src",
-            label: "Image (URL)",
-            placeholder: "https://\u2026",
-            changeProp: true
-          },
-          { at: 0 }
-        );
-      }
     });
     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") ?? ""));
+      buildCrumbs(editor.getSelected());
     });
     let stored = "";
     const save = async () => {
@@ -1113,17 +3305,30 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
     });
     const loadMjml = (mjml) => {
       loadingRef.current = true;
+      let repaired = false;
       try {
         queue.cancel();
         stored = mjml;
-        editor.setComponents(mjml || STARTER_MJML);
+        const source = withoutEditorProps(mjml || STARTER_MJML);
+        repaired = source !== (mjml || STARTER_MJML);
+        editor.setComponents(source);
         editor.getWrapper()?.find("mj-section").forEach(decorate);
         for (const t of Object.keys(TYPE_LABEL)) {
           editor.getWrapper()?.find(t).forEach(decorate);
         }
+        editor.getWrapper()?.onAll((c) => {
+          const illegal = illegalAttributes(tagOf5(c), c.getAttributes());
+          if (illegal.length === 0) return;
+          c.removeAttributes(illegal);
+          repaired = true;
+        });
+        showBodyInLayers();
+        editor.UndoManager.clear();
       } finally {
         loadingRef.current = false;
       }
+      notifyState();
+      if (repaired && !readOnlyRef.current) queue.schedule();
     };
     const ensureHighlightStyles = () => {
       const cdoc = editor.Canvas.getDocument();
@@ -1210,7 +3415,7 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
       }
     });
   };
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx8(
     GjsEditor,
     {
       grapesjs,
@@ -1225,9 +3430,9 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
         fromElement: false,
         panels: { defaults: [] },
         blockManager: { appendTo: "#gjs-blocks" },
-        styleManager: { appendTo: "#gjs-styles" },
-        traitManager: { appendTo: "#gjs-traits" },
-        layerManager: { appendTo: "#gjs-layers" },
+        // The eye hides a layer by writing `display="none"` into the MJML, which is illegal.
+        // The root row is mj-body, which the sidebar reaches as "Email settings" instead.
+        layerManager: { appendTo: "#gjs-layers", hidable: false, showWrapper: false },
         assetManager: {
           // Never inline files: mail clients block `data:` images (see ImageLibrary).
           embedAsBase64: false,
@@ -1241,110 +3446,106 @@ function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
             close: () => setPicker(null)
           }
         },
+        canvas: { customBadgeLabel: badgeLabel(labels) },
         deviceManager: {
           devices: [
             { id: "desktop", name: "Desktop", width: "" },
             { id: "mobile", name: "Mobile", width: "375px", widthMedia: "480px" }
           ]
         },
-        plugins: [grapesjsMJML]
+        plugins: [
+          (editor) => grapesjsMJML(editor, {
+            blocks: BLOCKS,
+            block: (id) => ({
+              label: labels.blockLabels[id] ?? id,
+              // By id: a regex on the label broke as soon as a host translated it.
+              category: LAYOUT_BLOCKS.has(id) ? labels.blockCategoryLayout : labels.blockCategoryContent,
+              ...id === "mj-social-group" && { content: SOCIAL_BLOCK }
+            })
+          })
+        ]
       },
       onEditor,
-      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",
-            selectedImageSrc,
-            onChooseImage: () => editorRef.current?.runCommand("open-image-picker")
-          }
-        ),
-        /* @__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,
-                composeTarget,
-                onComposeConsumed: () => setComposeTarget(null),
-                refreshSignal: commentsRefresh,
-                onOpenCountChange
-              }
-            ),
-            /* @__PURE__ */ jsx5(
-              ImagePicker,
+      children: /* @__PURE__ */ jsxs7(
+        "div",
+        {
+          className: "relative flex h-full min-h-0 flex-1",
+          inert: readOnly,
+          onKeyDown: (e) => onBlockSearchKey(e.nativeEvent),
+          children: [
+            readOnly && /* @__PURE__ */ jsx8("div", { className: "absolute inset-0 z-30 flex cursor-not-allowed items-start justify-center bg-white/20 pt-3", children: /* @__PURE__ */ jsxs7("span", { className: "flex items-center gap-2 rounded-full bg-panel px-3 py-1 text-xs text-panel-fg shadow", children: [
+              /* @__PURE__ */ jsx8(Spinner, {}),
+              " ",
+              labels.agentWorking
+            ] }) }),
+            /* @__PURE__ */ jsx8(
+              LeftSidebar,
               {
-                open: picker !== null,
-                currentUrl: picker?.current,
-                onSelect: (url) => {
-                  if (!readOnlyRef.current) picker?.select(url);
-                  setPicker(null);
-                },
-                onClose: () => {
-                  setPicker(null);
-                  editorRef.current?.AssetManager.close();
-                }
+                view: sidebarView,
+                onViewChange: setSidebarView,
+                markLayersSource: () => selectionSource.current = "layers",
+                blockSearchRef
               }
             ),
-            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__ */ jsxs7("div", { className: "flex min-w-0 flex-1 flex-col bg-surface-muted", children: [
+              /* @__PURE__ */ jsxs7("div", { className: "relative min-h-0 flex-1", children: [
+                /* @__PURE__ */ jsx8(Canvas, { className: "h-full" }),
+                /* @__PURE__ */ jsx8(
+                  CanvasComments,
+                  {
+                    docId,
+                    composeTarget,
+                    onComposeConsumed: () => setComposeTarget(null),
+                    refreshSignal: commentsRefresh,
+                    onOpenCountChange
+                  }
+                ),
+                /* @__PURE__ */ jsx8(
+                  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__ */ jsxs7("div", { className: "absolute inset-0 z-10 flex items-center justify-center gap-2 bg-white/70 text-sm text-zinc-500", children: [
+                  /* @__PURE__ */ jsx8(Spinner, {}),
+                  " ",
+                  labels.loadingEditor
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx8(Breadcrumb, { crumbs, onSelect: (c) => editorRef.current?.select(c) })
             ] })
-          ] }),
-          /* @__PURE__ */ jsx5(Breadcrumb, { crumbs, onSelect: (c) => editorRef.current?.select(c) })
-        ] })
-      ] })
+          ]
+        }
+      )
     }
   );
 }
-function CollapseSection({
-  title,
-  defaultOpen = true,
-  children
-}) {
-  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__ */ jsx5(ChevronRight, { className: cn("size-3.5 transition-transform", open && "rotate-90") }),
-          title
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx5("div", { className: cn(!open && "hidden"), children })
-  ] });
-}
 function LeftSidebar({
   view,
   onViewChange,
   markLayersSource,
-  selectedImageSrc,
-  onChooseImage
+  blockSearchRef
 }) {
-  const editor = useEditorMaybe();
+  const editor = useEditorMaybe2();
   const labels = useLabels();
-  const [layersExpanded, setLayersExpanded] = useState3(false);
-  const [blockSearch, setBlockSearch] = useState3("");
-  const changeView = (v) => {
-    if (v === "settings" && editor && !editor.getSelected()) {
-      const wrapper = editor.getWrapper();
-      const body = wrapper?.find("mj-body")[0] ?? wrapper;
-      if (body) editor.select(body);
-    }
-    onViewChange(v);
+  const [layersExpanded, setLayersExpanded] = useState5(false);
+  const [blockSearch, setBlockSearch] = useState5("");
+  const [noBlockMatches, setNoBlockMatches] = useState5(false);
+  const selectBody = () => {
+    let body;
+    editor?.getWrapper()?.onAll((c) => {
+      if (!body && tagOf5(c) === "mj-body") body = c;
+    });
+    if (body) editor?.select(body);
   };
   const toggleLayers = (expand) => {
     setLayersExpanded(expand);
@@ -1365,17 +3566,22 @@ function LeftSidebar({
       );
       cat.style.display = anyVisible ? "" : "none";
     });
+    setNoBlockMatches(
+      [...root.querySelectorAll(".gjs-block")].every(
+        (b) => b.style.display === "none"
+      )
+    );
   };
-  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__ */ jsx5(
+  return /* @__PURE__ */ jsxs7("div", { className: "editor-dark flex w-64 shrink-0 flex-col border-r border-panel-border bg-panel text-panel-fg", children: [
+    /* @__PURE__ */ jsx8("div", { className: "flex border-b border-panel-border", children: [
+      ["blocks", labels.tabBlocks],
+      ["settings", labels.tabSettings],
+      ["layers", labels.tabLayers]
+    ].map(([value, label]) => /* @__PURE__ */ jsx8(
       "button",
       {
         type: "button",
-        onClick: () => changeView(value),
+        onClick: () => onViewChange(value),
         className: cn(
           "relative flex-1 px-3 py-2.5 text-sm transition-colors",
           "after:absolute after:inset-x-0 after:-bottom-px after:h-0.5 after:transition-colors",
@@ -1385,70 +3591,57 @@ function LeftSidebar({
       },
       value
     )) }),
-    /* @__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(
+    /* @__PURE__ */ jsxs7("div", { className: cn("flex min-h-0 flex-1 flex-col", view !== "blocks" && "hidden"), children: [
+      /* @__PURE__ */ jsxs7("div", { className: "relative border-b border-panel-border p-2", children: [
+        /* @__PURE__ */ jsx8(Search, { className: "pointer-events-none absolute top-1/2 left-4 size-3.5 -translate-y-1/2 text-panel-muted-fg" }),
+        /* @__PURE__ */ jsx8(
           Input,
           {
+            ref: blockSearchRef,
             value: blockSearch,
             onChange: (e) => filterBlocks(e.target.value),
             placeholder: labels.searchBlocks,
             className: "h-8 border-panel-border bg-panel-elevated pr-10 pl-7 text-sm text-panel-fg placeholder:text-panel-muted-fg"
           }
         ),
-        /* @__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__ */ jsx8("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: "/" })
       ] }),
-      /* @__PURE__ */ jsx5("div", { id: "gjs-blocks", className: "min-h-0 flex-1 overflow-y-auto" })
+      noBlockMatches && /* @__PURE__ */ jsx8("p", { className: "px-3 py-6 text-center text-xs text-panel-muted-fg", children: labels.noBlocksMatch }),
+      /* @__PURE__ */ jsx8("div", { id: "gjs-blocks", className: "min-h-0 flex-1 overflow-y-auto" })
     ] }),
-    /* @__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__ */ jsxs4(
+    /* @__PURE__ */ jsx8("div", { className: cn("min-h-0 flex-1 overflow-y-auto", view !== "settings" && "hidden"), children: /* @__PURE__ */ jsx8(
+      Inspector,
+      {
+        onEmailSettings: selectBody,
+        empty: /* @__PURE__ */ jsxs7("div", { className: "flex flex-col items-center gap-3 px-6 py-10 text-center", children: [
+          /* @__PURE__ */ jsx8(MousePointerClick, { className: "size-6 text-panel-muted-fg" }),
+          /* @__PURE__ */ jsx8("p", { className: "text-sm text-panel-muted-fg", children: labels.settingsEmpty }),
+          /* @__PURE__ */ jsxs7(
+            Button,
+            {
+              type: "button",
+              size: "sm",
+              variant: "outline",
+              className: "border-panel-border bg-panel-elevated text-panel-fg hover:bg-panel-hover hover:text-panel-fg",
+              onClick: selectBody,
+              children: [
+                /* @__PURE__ */ jsx8(Mail, {}),
+                labels.emailSettings
+              ]
+            }
+          )
+        ] })
+      }
+    ) }),
+    /* @__PURE__ */ jsxs7(
       "div",
       {
         className: cn("flex min-h-0 flex-1 flex-col", view !== "layers" && "hidden"),
         onMouseDownCapture: markLayersSource,
         children: [
-          /* @__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(
+          /* @__PURE__ */ jsxs7("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__ */ jsx8("span", { children: labels.expandAll }),
+            /* @__PURE__ */ jsx8(
               Switch,
               {
                 checked: layersExpanded,
@@ -1457,7 +3650,16 @@ function LeftSidebar({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx5("div", { id: "gjs-layers", className: "min-h-0 flex-1 overflow-y-auto" })
+          /* @__PURE__ */ jsx8(
+            "div",
+            {
+              id: "gjs-layers",
+              className: "min-h-0 flex-1 overflow-y-auto",
+              onDoubleClickCapture: (e) => {
+                if (e.target.closest("[data-name]")) e.stopPropagation();
+              }
+            }
+          )
         ]
       }
     )
@@ -1468,9 +3670,9 @@ function Breadcrumb({
   onSelect
 }) {
   const labels = useLabels();
-  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(
+  return /* @__PURE__ */ jsx8("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__ */ jsx8("span", { className: "text-muted-foreground/60", children: labels.selectAnElement }) : crumbs.map((c, i) => /* @__PURE__ */ jsxs7("span", { className: "flex items-center gap-0.5", children: [
+    i > 0 && /* @__PURE__ */ jsx8(ChevronRight3, { className: "size-3 opacity-40" }),
+    /* @__PURE__ */ jsx8(
       "button",
       {
         type: "button",
@@ -1479,7 +3681,7 @@ function Breadcrumb({
           "rounded px-1.5 py-0.5 hover:bg-muted hover:text-foreground",
           i === crumbs.length - 1 && "font-medium text-brand"
         ),
-        children: crumbName(c)
+        children: crumbName(c, labels)
       }
     )
   ] }, i)) });