@mjml-agent-editor/editor 0.1.0

package/dist/canvas.js

@@ -0,0 +1,629 @@
+"use client";
+import {
+  CanvasComments,
+  STARTER_MJML,
+  useDocumentStore
+} from "./chunk-LSF33PSW.js";
+import {
+  Input,
+  Spinner,
+  cn
+} from "./chunk-V6RR4VRD.js";
+
+// src/components/editor/EmailEditor.tsx
+import grapesjs from "grapesjs";
+import GjsEditor, { Canvas, useEditorMaybe } from "@grapesjs/react";
+import grapesjsMJML from "grapesjs-mjml";
+import { useRef, useState } from "react";
+import { toast } from "sonner";
+import { ChevronRight } from "lucide-react";
+
+// src/components/ui/switch.tsx
+import "react";
+import { Switch as SwitchPrimitive } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+function Switch({
+  className,
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SwitchPrimitive.Root,
+    {
+      "data-slot": "switch",
+      "data-size": size,
+      className: cn(
+        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        SwitchPrimitive.Thumb,
+        {
+          "data-slot": "switch-thumb",
+          className: "pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
+        }
+      )
+    }
+  );
+}
+
+// src/components/editor/EmailEditor.tsx
+import { Search } from "lucide-react";
+import { jsx as jsx2, jsxs } 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"
+};
+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>';
+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 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 closestSection(c) {
+  let cur = c;
+  while (cur) {
+    if (isSection(cur)) return cur;
+    cur = cur.parent() ?? void 0;
+  }
+  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";
+}
+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;
+}
+var RTE_FONTS = [
+  "Arial",
+  "Helvetica",
+  "Georgia",
+  "Times New Roman",
+  "Verdana",
+  "Tahoma",
+  "Trebuchet MS",
+  "Courier New"
+];
+var RTE_SIZES = [11, 12, 13, 14, 16, 18, 20, 24, 28, 32, 40];
+function wrapSelectionStyle(el, style) {
+  const doc = el?.ownerDocument;
+  const sel = doc?.getSelection?.();
+  if (!doc || !sel || sel.rangeCount === 0 || sel.isCollapsed) return;
+  const range = sel.getRangeAt(0);
+  const span = doc.createElement("span");
+  Object.assign(span.style, style);
+  try {
+    span.appendChild(range.extractContents());
+    range.insertNode(span);
+    sel.removeAllRanges();
+    const nr = doc.createRange();
+    nr.selectNodeContents(span);
+    sel.addRange(nr);
+  } catch {
+  }
+}
+function setupRichText(editor) {
+  const rte = editor.RichTextEditor;
+  if (!rte || rte.__customActions) return;
+  rte.__customActions = true;
+  const val = (action, sel) => action.btn?.querySelector(sel)?.value ?? "";
+  rte.add("fontName", {
+    icon: `<select class="gjs-rte-select" title="Font"><option value="">Font</option>${RTE_FONTS.map(
+      (f) => `<option value="${f}">${f}</option>`
+    ).join("")}</select>`,
+    event: "change",
+    result: (r, action) => {
+      const v = val(action, "select");
+      if (v) r.exec("fontName", v);
+    }
+  });
+  rte.add("fontSize", {
+    icon: `<select class="gjs-rte-select" title="Size"><option value="">Size</option>${RTE_SIZES.map(
+      (s) => `<option value="${s}px">${s}</option>`
+    ).join("")}</select>`,
+    event: "change",
+    result: (r, action) => {
+      const v = val(action, "select");
+      if (v) wrapSelectionStyle(r.el, { fontSize: v });
+    }
+  });
+  rte.add("forecolor", {
+    icon: `<input type="color" class="gjs-rte-color" title="Text color" value="#000000">`,
+    event: "change",
+    result: (r, action) => r.exec("foreColor", val(action, "input"))
+  });
+  rte.add("hilitecolor", {
+    icon: `<input type="color" class="gjs-rte-color" title="Background color" value="#ffff00">`,
+    event: "change",
+    result: (r, action) => r.exec("hiliteColor", val(action, "input"))
+  });
+}
+function EmailEditor({ docId, onReady, commentsRefresh, onOpenCountChange }) {
+  const documents = useDocumentStore();
+  const loadingRef = useRef(false);
+  const saveTimer = useRef(null);
+  const saveStatusRef = useRef("idle");
+  const stateListeners = useRef(/* @__PURE__ */ new Set());
+  const [loading, setLoading] = useState(true);
+  const [sidebarView, setSidebarView] = useState("blocks");
+  const [composeTarget, setComposeTarget] = useState(null);
+  const selectionSource = useRef("other");
+  const editorRef = useRef(null);
+  const [crumbs, setCrumbs] = useState([]);
+  const onEditor = async (editor) => {
+    editorRef.current = editor;
+    const buildCrumbs = (c) => {
+      const chain = [];
+      let cur = c;
+      while (cur) {
+        const t = tagOf(cur);
+        if (!t || t === "mj-body" || t === "wrapper" || t === "Wrapper") break;
+        chain.unshift(cur);
+        cur = cur.parent() ?? void 0;
+      }
+      setCrumbs(chain);
+    };
+    const findByTag = (tag) => {
+      let found;
+      editor.getWrapper()?.onAll((c) => {
+        if (!found && (c.get("tagName") === tag || c.get("type") === tag)) found = c;
+      });
+      return found;
+    };
+    const bodyWidth = () => {
+      const body = findByTag("mj-body");
+      return String(body?.getAttributes?.()?.width ?? "600px");
+    };
+    const snapshot = () => ({
+      device: editor.getDevice(),
+      canUndo: editor.UndoManager.hasUndo(),
+      canRedo: editor.UndoManager.hasRedo(),
+      saveStatus: saveStatusRef.current,
+      zoom: Math.round(editor.Canvas.getZoom?.() ?? 100),
+      contentWidth: bodyWidth()
+    });
+    const notifyState = () => {
+      const s = snapshot();
+      stateListeners.current.forEach((l) => l(s));
+    };
+    const setSave = (s) => {
+      saveStatusRef.current = s;
+      notifyState();
+    };
+    const targetOf = (c) => {
+      const section = closestSection(c);
+      if (!section || !c) return null;
+      const sectionId = addIdClass(section, "sec");
+      if (isSection(c)) {
+        return { sectionId, objectId: null, objectLabel: null };
+      }
+      const objectId = addIdClass(c, "obj");
+      return { sectionId, objectId, objectLabel: objectLabel(c) };
+    };
+    const decorate = (c) => {
+      if (isSection(c)) addIdClass(c, "sec");
+      if (!isCommentable(c)) return;
+      const toolbar = [...c.get("toolbar") ?? []];
+      if (!toolbar.some((t) => t.command === "open-comments")) {
+        toolbar.push({
+          command: "open-comments",
+          label: SPARKLES_SVG,
+          attributes: { title: "Comment on element / section", "data-role": "sparkles" }
+        });
+        c.set("toolbar", toolbar);
+      }
+    };
+    editor.Commands.add("open-comments", {
+      run(ed) {
+        const target = targetOf(ed.getSelected() ?? void 0);
+        if (target) setComposeTarget(target);
+      }
+    });
+    setupRichText(editor);
+    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";
+    };
+    const bm = editor.BlockManager;
+    bm.getAll().forEach(
+      (b) => {
+        b.set("category", blockCategory(b.get("label") || ""));
+      }
+    );
+    bm.render();
+    editor.on("component:add", decorate);
+    editor.on("load", () => {
+      const body = editor.Canvas.getBody();
+      body?.addEventListener(
+        "mousedown",
+        () => {
+          selectionSource.current = "canvas";
+        },
+        true
+      );
+    });
+    editor.on("component:selected", (c) => {
+      if (selectionSource.current === "canvas") setSidebarView("settings");
+      selectionSource.current = "other";
+      buildCrumbs(c);
+      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", () => setCrumbs([]));
+    const save = async () => {
+      if (loadingRef.current) return;
+      setSave("saving");
+      try {
+        await documents.save(docId, {
+          mjml: editor.getHtml(),
+          projectData: editor.getProjectData()
+        });
+        setSave("saved");
+      } catch (e) {
+        setSave("error");
+        toast.error("Failed to save changes.");
+        throw e;
+      }
+    };
+    editor.on("update", () => {
+      notifyState();
+      if (loadingRef.current) return;
+      if (saveTimer.current) clearTimeout(saveTimer.current);
+      saveTimer.current = setTimeout(() => void save().catch(console.error), 1200);
+    });
+    editor.on("change:device", notifyState);
+    const loadMjml = (mjml) => {
+      loadingRef.current = true;
+      if (saveTimer.current) clearTimeout(saveTimer.current);
+      editor.setComponents(mjml || STARTER_MJML);
+      editor.getWrapper()?.find("mj-section").forEach(decorate);
+      for (const t of Object.keys(TYPE_LABEL)) {
+        editor.getWrapper()?.find(t).forEach(decorate);
+      }
+      setTimeout(() => {
+        loadingRef.current = false;
+      }, 400);
+    };
+    const ensureHighlightStyles = () => {
+      const cdoc = editor.Canvas.getDocument();
+      if (!cdoc || cdoc.getElementById("agent-edit-style")) return;
+      const accent = getComputedStyle(document.documentElement).getPropertyValue("--mjml-editor-accent").trim() || "#7c5cfc";
+      const style = cdoc.createElement("style");
+      style.id = "agent-edit-style";
+      style.textContent = `
+        @keyframes agentEditPulse {
+          0%, 100% { outline-color: color-mix(in srgb, ${accent} 25%, transparent); }
+          50%      { outline-color: color-mix(in srgb, ${accent} 95%, transparent); }
+        }
+        .agent-editing {
+          outline: 3px solid color-mix(in srgb, ${accent} 90%, transparent) !important;
+          outline-offset: -3px;
+          animation: agentEditPulse 1s ease-in-out infinite;
+          transition: outline-color 0.2s;
+        }`;
+      cdoc.head.appendChild(style);
+    };
+    const sectionEl = (sectionId) => {
+      const comp = editor.getWrapper()?.find("mj-section").find((c) => sectionIdOf(c) === sectionId);
+      return comp?.getEl?.() ?? void 0;
+    };
+    const compiledHtml = () => {
+      try {
+        const res = editor.runCommand("mjml-code-to-html");
+        return res?.html ?? editor.getHtml();
+      } catch {
+        return editor.getHtml();
+      }
+    };
+    try {
+      const doc = await documents.get(docId);
+      loadMjml(doc.mjml);
+    } catch (e) {
+      toast.error("Failed to load the document.");
+      console.error(e);
+    } finally {
+      setLoading(false);
+    }
+    onReady({
+      getMjml: () => editor.getHtml(),
+      getCompiledHtml: compiledHtml,
+      flushSave: async () => {
+        if (saveTimer.current) clearTimeout(saveTimer.current);
+        await save();
+      },
+      reloadFromDb: async () => {
+        const fresh = await documents.get(docId);
+        if (fresh.mjml !== editor.getHtml()) loadMjml(fresh.mjml);
+      },
+      highlightSection: (sectionId, on) => {
+        ensureHighlightStyles();
+        const el = sectionEl(sectionId);
+        if (!el) return;
+        el.classList.toggle("agent-editing", on);
+      },
+      getDevices: () => editor.Devices.getDevices().map((d) => ({
+        id: String(d.id),
+        name: d.getName() || String(d.id)
+      })),
+      setDevice: (name) => {
+        editor.setDevice(name);
+        notifyState();
+      },
+      undo: () => {
+        editor.UndoManager.undo();
+        notifyState();
+      },
+      redo: () => {
+        editor.UndoManager.redo();
+        notifyState();
+      },
+      setZoom: (z) => {
+        editor.Canvas.setZoom?.(Math.max(25, Math.min(200, z)));
+        notifyState();
+      },
+      setContentWidth: (w) => {
+        findByTag("mj-body")?.addAttributes({ width: w });
+        notifyState();
+      },
+      onEditorState: (cb) => {
+        stateListeners.current.add(cb);
+        cb(snapshot());
+        return () => stateListeners.current.delete(cb);
+      }
+    });
+  };
+  return /* @__PURE__ */ jsx2(
+    GjsEditor,
+    {
+      grapesjs,
+      className: "h-full",
+      options: {
+        height: "100%",
+        storageManager: false,
+        fromElement: false,
+        panels: { defaults: [] },
+        blockManager: { appendTo: "#gjs-blocks" },
+        styleManager: { appendTo: "#gjs-styles" },
+        traitManager: { appendTo: "#gjs-traits" },
+        layerManager: { appendTo: "#gjs-layers" },
+        deviceManager: {
+          devices: [
+            { id: "desktop", name: "Desktop", width: "" },
+            { id: "mobile", name: "Mobile", width: "375px", widthMedia: "480px" }
+          ]
+        },
+        plugins: [grapesjsMJML]
+      },
+      onEditor,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 flex-1", children: [
+        /* @__PURE__ */ jsx2(
+          LeftSidebar,
+          {
+            view: sidebarView,
+            onViewChange: setSidebarView,
+            markLayersSource: () => selectionSource.current = "layers"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col bg-surface-muted", children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative min-h-0 flex-1", children: [
+            /* @__PURE__ */ jsx2(Canvas, { className: "h-full" }),
+            /* @__PURE__ */ jsx2(
+              CanvasComments,
+              {
+                docId,
+                composeTarget,
+                onComposeConsumed: () => setComposeTarget(null),
+                refreshSignal: commentsRefresh,
+                onOpenCountChange
+              }
+            ),
+            loading && /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 z-10 flex items-center justify-center gap-2 bg-white/70 text-sm text-zinc-500", children: [
+              /* @__PURE__ */ jsx2(Spinner, {}),
+              " Loading editor\u2026"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx2(Breadcrumb, { crumbs, onSelect: (c) => editorRef.current?.select(c) })
+        ] })
+      ] })
+    }
+  );
+}
+function CollapseSection({
+  title,
+  defaultOpen = true,
+  children
+}) {
+  const [open, setOpen] = useState(defaultOpen);
+  return /* @__PURE__ */ jsxs("div", { className: "border-b border-panel-border", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((o) => !o),
+        className: "flex w-full items-center gap-1.5 px-3 py-2 text-xs font-semibold tracking-wide text-panel-muted-fg uppercase hover:text-panel-fg",
+        children: [
+          /* @__PURE__ */ jsx2(ChevronRight, { className: cn("size-3.5 transition-transform", open && "rotate-90") }),
+          title
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx2("div", { className: cn(!open && "hidden"), children })
+  ] });
+}
+function LeftSidebar({
+  view,
+  onViewChange,
+  markLayersSource
+}) {
+  const editor = useEditorMaybe();
+  const [layersExpanded, setLayersExpanded] = useState(false);
+  const [blockSearch, setBlockSearch] = useState("");
+  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 toggleLayers = (expand) => {
+    setLayersExpanded(expand);
+    editor?.getWrapper()?.onAll((c) => c.set("open", expand));
+  };
+  const filterBlocks = (q) => {
+    setBlockSearch(q);
+    const root = document.getElementById("gjs-blocks");
+    if (!root) return;
+    const term = q.trim().toLowerCase();
+    root.querySelectorAll(".gjs-block").forEach((b) => {
+      const label = (b.querySelector(".gjs-block-label")?.textContent ?? b.textContent ?? "").toLowerCase().trim();
+      b.style.display = !term || label.includes(term) ? "" : "none";
+    });
+    root.querySelectorAll(".gjs-block-category").forEach((cat) => {
+      const anyVisible = [...cat.querySelectorAll(".gjs-block")].some(
+        (b) => b.style.display !== "none"
+      );
+      cat.style.display = anyVisible ? "" : "none";
+    });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "editor-dark flex w-64 shrink-0 flex-col border-r border-panel-border bg-panel text-panel-fg", children: [
+    /* @__PURE__ */ jsx2("div", { className: "flex border-b border-panel-border", children: [
+      ["blocks", "Blocks"],
+      ["settings", "Settings"],
+      ["layers", "Layers"]
+    ].map(([value, label]) => /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        onClick: () => changeView(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",
+          view === value ? "font-medium text-panel-fg after:bg-brand" : "text-panel-muted-fg after:bg-transparent hover:text-panel-fg"
+        ),
+        children: label
+      },
+      value
+    )) }),
+    /* @__PURE__ */ jsxs("div", { className: cn("flex min-h-0 flex-1 flex-col", view !== "blocks" && "hidden"), children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative border-b border-panel-border p-2", children: [
+        /* @__PURE__ */ jsx2(Search, { className: "pointer-events-none absolute top-1/2 left-4 size-3.5 -translate-y-1/2 text-panel-muted-fg" }),
+        /* @__PURE__ */ jsx2(
+          Input,
+          {
+            value: blockSearch,
+            onChange: (e) => filterBlocks(e.target.value),
+            placeholder: "Search blocks\u2026",
+            className: "h-8 border-panel-border bg-panel-elevated pr-10 pl-7 text-sm text-panel-fg placeholder:text-panel-muted-fg"
+          }
+        ),
+        /* @__PURE__ */ jsx2("kbd", { className: "pointer-events-none absolute top-1/2 right-4 -translate-y-1/2 rounded border border-panel-border bg-panel px-1 py-0.5 font-mono text-[10px] text-panel-muted-fg", children: "\u2318K" })
+      ] }),
+      /* @__PURE__ */ jsx2("div", { id: "gjs-blocks", className: "min-h-0 flex-1 overflow-y-auto" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: cn("min-h-0 flex-1 overflow-y-auto", view !== "settings" && "hidden"), children: [
+      /* @__PURE__ */ jsx2(CollapseSection, { title: "Attributes", children: /* @__PURE__ */ jsx2("div", { id: "gjs-traits" }) }),
+      /* @__PURE__ */ jsx2(CollapseSection, { title: "Style", children: /* @__PURE__ */ jsx2("div", { id: "gjs-styles" }) })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("flex min-h-0 flex-1 flex-col", view !== "layers" && "hidden"),
+        onMouseDownCapture: markLayersSource,
+        children: [
+          /* @__PURE__ */ jsxs("label", { className: "flex items-center justify-between gap-2 border-b border-panel-border px-3 py-2 text-xs text-panel-muted-fg", children: [
+            /* @__PURE__ */ jsx2("span", { children: "Expand all" }),
+            /* @__PURE__ */ jsx2(
+              Switch,
+              {
+                checked: layersExpanded,
+                onCheckedChange: toggleLayers,
+                className: "data-[state=checked]:bg-brand data-[state=unchecked]:bg-panel-border"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx2("div", { id: "gjs-layers", className: "min-h-0 flex-1 overflow-y-auto" })
+        ]
+      }
+    )
+  ] });
+}
+function Breadcrumb({
+  crumbs,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsx2("div", { className: "flex h-9 shrink-0 items-center gap-0.5 border-t border-border bg-surface px-3 text-xs text-muted-foreground", children: crumbs.length === 0 ? /* @__PURE__ */ jsx2("span", { className: "text-muted-foreground/60", children: "Select an element\u2026" }) : crumbs.map((c, i) => /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-0.5", children: [
+    i > 0 && /* @__PURE__ */ jsx2(ChevronRight, { className: "size-3 opacity-40" }),
+    /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        onClick: () => onSelect(c),
+        className: cn(
+          "rounded px-1.5 py-0.5 hover:bg-muted hover:text-foreground",
+          i === crumbs.length - 1 && "font-medium text-brand"
+        ),
+        children: crumbName(c)
+      }
+    )
+  ] }, i)) });
+}
+export {
+  EmailEditor
+};
+//# sourceMappingURL=canvas.js.map