@mjml-agent-editor/editor 0.1.0

package/dist/canvas.cjs

@@ -0,0 +1,1099 @@
+"use client";
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/canvas.ts
+var canvas_exports = {};
+__export(canvas_exports, {
+  EmailEditor: () => EmailEditor
+});
+module.exports = __toCommonJS(canvas_exports);
+
+// src/components/editor/EmailEditor.tsx
+var import_grapesjs = __toESM(require("grapesjs"), 1);
+var import_react4 = __toESM(require("@grapesjs/react"), 1);
+var import_grapesjs_mjml = __toESM(require("grapesjs-mjml"), 1);
+var import_react5 = require("react");
+
+// src/stores.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var StoreContext = (0, import_react.createContext)(null);
+function useStores() {
+  const stores = (0, import_react.useContext)(StoreContext);
+  if (!stores) {
+    throw new Error(
+      "The editor needs an <EditorStoreProvider>. Wrap the editor and pass a DocumentStore and a CommentStore \u2014 see packages/editor/README.md."
+    );
+  }
+  return stores;
+}
+function useDocumentStore() {
+  return useStores().documents;
+}
+function useCommentStore() {
+  return useStores().comments;
+}
+
+// src/starter.ts
+var STARTER_MJML = `<mjml>
+  <mj-body background-color="#f4f4f5">
+    <mj-section background-color="#ffffff" padding="32px 24px">
+      <mj-column>
+        <mj-text font-size="22px" font-weight="bold">New email</mj-text>
+        <mj-text color="#555555">
+          Describe the email you need in the chat on the right \u2014 the agent
+          will design the sections, content and images.
+        </mj-text>
+      </mj-column>
+    </mj-section>
+  </mj-body>
+</mjml>`;
+
+// src/lib/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/ui/button.tsx
+var React = require("react");
+var import_class_variance_authority = require("class-variance-authority");
+var import_radix_ui = require("radix-ui");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var buttonVariants = (0, import_class_variance_authority.cva)(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline: "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? import_radix_ui.Slot.Root : "button";
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    Comp,
+    {
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/input.tsx
+var React2 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "input",
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/spinner.tsx
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function Spinner({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_lucide_react.Loader2Icon,
+    {
+      "data-slot": "spinner",
+      role: "status",
+      "aria-label": "Loading",
+      className: cn("size-4 animate-spin", className),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/popover.tsx
+var React3 = require("react");
+var import_radix_ui2 = require("radix-ui");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function Popover({ ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_radix_ui2.Popover.Root, { "data-slot": "popover", ...props });
+}
+function PopoverAnchor({ ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_radix_ui2.Popover.Anchor, { "data-slot": "popover-anchor", ...props });
+}
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_radix_ui2.Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_radix_ui2.Popover.Content,
+    {
+      "data-slot": "popover-content",
+      align,
+      sideOffset,
+      className: cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+
+// src/components/ui/textarea.tsx
+var React4 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function Textarea({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "textarea",
+    {
+      "data-slot": "textarea",
+      className: cn(
+        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/comments/CanvasComments.tsx
+var import_react2 = require("@grapesjs/react");
+var import_react3 = require("react");
+var import_lucide_react2 = require("lucide-react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var keyOf = (c) => c.objectId ? `obj-${c.objectId}` : `sec-${c.sectionId}`;
+var keyOfTarget = (t) => t.objectId ? `obj-${t.objectId}` : `sec-${t.sectionId}`;
+function CanvasComments({
+  docId,
+  composeTarget,
+  onComposeConsumed,
+  refreshSignal,
+  onOpenCountChange
+}) {
+  const commentStore = useCommentStore();
+  const editor = (0, import_react2.useEditorMaybe)();
+  const containerRef = (0, import_react3.useRef)(null);
+  const [comments, setComments] = (0, import_react3.useState)([]);
+  const [positions, setPositions] = (0, import_react3.useState)({});
+  const [activeKey, setActiveKey] = (0, import_react3.useState)(null);
+  const [composeInfo, setComposeInfo] = (0, import_react3.useState)(null);
+  const [body, setBody] = (0, import_react3.useState)("");
+  const reload = (0, import_react3.useCallback)(() => {
+    commentStore.list(docId).then(setComments).catch(console.error);
+  }, [docId]);
+  (0, import_react3.useEffect)(() => {
+    reload();
+  }, [reload, refreshSignal]);
+  const open = (0, import_react3.useMemo)(() => comments.filter((c) => c.status === "open"), [comments]);
+  (0, import_react3.useEffect)(() => {
+    onOpenCountChange(open.length);
+  }, [open.length, onOpenCountChange]);
+  const pins = (0, import_react3.useMemo)(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const c of open) {
+      const k = keyOf(c);
+      const arr = map.get(k) ?? [];
+      arr.push(c);
+      map.set(k, arr);
+    }
+    return [...map.entries()].map(([key, list]) => ({ key, list }));
+  }, [open]);
+  const openRef = (0, import_react3.useRef)(open);
+  openRef.current = open;
+  const activeRef = (0, import_react3.useRef)(activeKey);
+  activeRef.current = activeKey;
+  const positionsRef = (0, import_react3.useRef)({});
+  const recompute = (0, import_react3.useCallback)(() => {
+    const ed = editor;
+    const container = containerRef.current;
+    if (!ed || !container) return;
+    const frame = ed.Canvas.getFrameEl?.();
+    const cdoc = ed.Canvas.getDocument?.();
+    if (!frame || !cdoc) return;
+    const cRect = container.getBoundingClientRect();
+    const fRect = frame.getBoundingClientRect();
+    const zoom = frame.offsetWidth ? fRect.width / frame.offsetWidth : 1;
+    const keys = new Set(openRef.current.map(keyOf));
+    if (activeRef.current) keys.add(activeRef.current);
+    const next = {};
+    keys.forEach((k) => {
+      const el = cdoc.querySelector(`.${k}`);
+      if (!el) return;
+      const r = el.getBoundingClientRect();
+      next[k] = {
+        top: fRect.top - cRect.top + r.top * zoom + 4,
+        left: fRect.left - cRect.left + (r.left + r.width) * zoom + 8
+      };
+    });
+    if (JSON.stringify(positionsRef.current) !== JSON.stringify(next)) {
+      positionsRef.current = next;
+      setPositions(next);
+    }
+  }, [editor]);
+  (0, import_react3.useEffect)(() => {
+    const ed = editor;
+    if (!ed) return;
+    const evts = [
+      "canvas:update",
+      "update",
+      "change:device",
+      "load",
+      "component:update",
+      "component:mount"
+    ];
+    evts.forEach((e) => ed.on(e, recompute));
+    const win = ed.Canvas.getWindow?.();
+    win?.addEventListener("scroll", recompute, true);
+    window.addEventListener("resize", recompute);
+    const id = window.setInterval(recompute, 500);
+    return () => {
+      evts.forEach((e) => ed.off(e, recompute));
+      win?.removeEventListener("scroll", recompute, true);
+      window.removeEventListener("resize", recompute);
+      window.clearInterval(id);
+    };
+  }, [editor, recompute]);
+  (0, import_react3.useEffect)(() => {
+    recompute();
+  }, [comments, activeKey, recompute]);
+  (0, import_react3.useEffect)(() => {
+    if (!composeTarget) return;
+    setComposeInfo(composeTarget);
+    setActiveKey(keyOfTarget(composeTarget));
+    setBody("");
+    requestAnimationFrame(recompute);
+  }, [composeTarget, recompute]);
+  const activeComments = activeKey ? open.filter((c) => keyOf(c) === activeKey) : [];
+  const activeTarget = (() => {
+    if (!activeKey) return null;
+    const c = activeComments[0];
+    if (c) return { sectionId: c.sectionId, objectId: c.objectId, objectLabel: c.objectLabel };
+    if (composeInfo && keyOfTarget(composeInfo) === activeKey) return composeInfo;
+    return null;
+  })();
+  const activePos = activeKey ? positions[activeKey] : void 0;
+  const lastAnchorPos = (0, import_react3.useRef)({ top: 0, left: 0 });
+  if (activePos) lastAnchorPos.current = activePos;
+  const anchorPos = activePos ?? lastAnchorPos.current;
+  const closePopover = (0, import_react3.useCallback)(() => {
+    setActiveKey(null);
+    setBody("");
+    if (composeInfo) {
+      setComposeInfo(null);
+      onComposeConsumed();
+    }
+  }, [composeInfo, onComposeConsumed]);
+  (0, import_react3.useEffect)(() => {
+    if (!activeKey || !editor) return;
+    const doc = editor.Canvas.getDocument?.();
+    if (!doc) return;
+    const onDown = () => closePopover();
+    doc.addEventListener("mousedown", onDown, true);
+    return () => doc.removeEventListener("mousedown", onDown, true);
+  }, [activeKey, editor, closePopover]);
+  const submit = async () => {
+    if (!activeTarget || !body.trim()) return;
+    try {
+      await commentStore.add(docId, activeTarget, body.trim());
+      setBody("");
+      if (composeInfo) {
+        setComposeInfo(null);
+        onComposeConsumed();
+      }
+      reload();
+    } catch (e) {
+      console.error(e);
+    }
+  };
+  const resolve = async (id) => {
+    try {
+      await commentStore.resolve(id);
+      reload();
+    } catch (e) {
+      console.error(e);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { ref: containerRef, className: "pointer-events-none absolute inset-0 z-20 overflow-hidden", children: [
+    pins.map(({ key, list }) => {
+      const pos = positions[key];
+      if (!pos) return null;
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setActiveKey((k) => k === key ? null : key);
+            setBody("");
+          },
+          style: { top: pos.top, left: pos.left },
+          className: "pointer-events-auto absolute flex h-6 min-w-6 items-center justify-center rounded-full rounded-bl-none bg-brand px-1.5 text-xs font-semibold text-brand-fg shadow-md ring-2 ring-white transition-transform hover:scale-110",
+          title: `${list.length} comment(s)`,
+          children: list.length
+        },
+        key
+      );
+    }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Popover, { open: !!activeKey && !!activePos, onOpenChange: (o) => !o && closePopover(), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            top: anchorPos.top,
+            left: anchorPos.left,
+            width: 1,
+            height: 1
+          }
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        PopoverContent,
+        {
+          side: "right",
+          align: "start",
+          className: "pointer-events-auto w-80 p-0 data-[state=closed]:!animate-none data-[state=closed]:!duration-0",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-start justify-between gap-2 border-b px-3 py-2 text-xs text-muted-foreground", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "min-w-0", children: activeTarget?.objectId ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+                "Comment on",
+                " ",
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "font-medium text-foreground", children: activeTarget.objectLabel })
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+                "Comment on the whole section",
+                " ",
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("code", { className: "font-mono", children: activeTarget?.sectionId })
+              ] }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: closePopover,
+                  "aria-label": "Close",
+                  className: "-mr-1 -mt-0.5 shrink-0 rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.X, { className: "size-4" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "max-h-64 space-y-2 overflow-y-auto p-3", children: [
+              activeComments.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-xs text-muted-foreground", children: "No comments yet \u2014 add the first one." }),
+              activeComments.map((c) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "rounded-md border bg-muted/40 p-2 text-sm", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "whitespace-pre-wrap", children: c.body }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                  "button",
+                  {
+                    onClick: () => void resolve(c.id),
+                    className: "mt-1 inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.Check, { className: "size-3" }),
+                      " Resolve"
+                    ]
+                  }
+                )
+              ] }, c.id))
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "border-t p-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                Textarea,
+                {
+                  autoFocus: true,
+                  value: body,
+                  onChange: (e) => setBody(e.target.value),
+                  placeholder: "Add a comment\u2026 (\u2318/Ctrl+Enter to send)",
+                  className: "min-h-14 resize-none text-sm",
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+                      e.preventDefault();
+                      void submit();
+                    }
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mt-2 flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Button, { size: "sm", disabled: !body.trim(), onClick: () => void submit(), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.MessageSquarePlus, {}),
+                " Add"
+              ] }) })
+            ] })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/editor/EmailEditor.tsx
+var import_sonner = require("sonner");
+var import_lucide_react3 = require("lucide-react");
+
+// src/components/ui/switch.tsx
+var React5 = require("react");
+var import_radix_ui3 = require("radix-ui");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function Switch({
+  className,
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    import_radix_ui3.Switch.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__ */ (0, import_jsx_runtime8.jsx)(
+        import_radix_ui3.Switch.Thumb,
+        {
+          "data-slot": "switch-thumb",
+          className: "pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
+        }
+      )
+    }
+  );
+}
+
+// src/components/editor/EmailEditor.tsx
+var import_lucide_react4 = require("lucide-react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var SEC_ID_RE = /\bsec-([A-Za-z0-9_-]+)\b/;
+var OBJ_ID_RE = /\bobj-([A-Za-z0-9_-]+)\b/;
+var TYPE_LABEL = {
+  "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 = (0, import_react5.useRef)(false);
+  const saveTimer = (0, import_react5.useRef)(null);
+  const saveStatusRef = (0, import_react5.useRef)("idle");
+  const stateListeners = (0, import_react5.useRef)(/* @__PURE__ */ new Set());
+  const [loading, setLoading] = (0, import_react5.useState)(true);
+  const [sidebarView, setSidebarView] = (0, import_react5.useState)("blocks");
+  const [composeTarget, setComposeTarget] = (0, import_react5.useState)(null);
+  const selectionSource = (0, import_react5.useRef)("other");
+  const editorRef = (0, import_react5.useRef)(null);
+  const [crumbs, setCrumbs] = (0, import_react5.useState)([]);
+  const 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");
+        import_sonner.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) {
+      import_sonner.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__ */ (0, import_jsx_runtime9.jsx)(
+    import_react4.default,
+    {
+      grapesjs: import_grapesjs.default,
+      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: [import_grapesjs_mjml.default]
+      },
+      onEditor,
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex h-full min-h-0 flex-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          LeftSidebar,
+          {
+            view: sidebarView,
+            onViewChange: setSidebarView,
+            markLayersSource: () => selectionSource.current = "layers"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col bg-surface-muted", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "relative min-h-0 flex-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react4.Canvas, { className: "h-full" }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              CanvasComments,
+              {
+                docId,
+                composeTarget,
+                onComposeConsumed: () => setComposeTarget(null),
+                refreshSignal: commentsRefresh,
+                onOpenCountChange
+              }
+            ),
+            loading && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "absolute inset-0 z-10 flex items-center justify-center gap-2 bg-white/70 text-sm text-zinc-500", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Spinner, {}),
+              " Loading editor\u2026"
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Breadcrumb, { crumbs, onSelect: (c) => editorRef.current?.select(c) })
+        ] })
+      ] })
+    }
+  );
+}
+function CollapseSection({
+  title,
+  defaultOpen = true,
+  children
+}) {
+  const [open, setOpen] = (0, import_react5.useState)(defaultOpen);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "border-b border-panel-border", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((o) => !o),
+        className: "flex w-full items-center gap-1.5 px-3 py-2 text-xs font-semibold tracking-wide text-panel-muted-fg uppercase hover:text-panel-fg",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.ChevronRight, { className: cn("size-3.5 transition-transform", open && "rotate-90") }),
+          title
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: cn(!open && "hidden"), children })
+  ] });
+}
+function LeftSidebar({
+  view,
+  onViewChange,
+  markLayersSource
+}) {
+  const editor = (0, import_react4.useEditorMaybe)();
+  const [layersExpanded, setLayersExpanded] = (0, import_react5.useState)(false);
+  const [blockSearch, setBlockSearch] = (0, import_react5.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__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "editor-dark flex w-64 shrink-0 flex-col border-r border-panel-border bg-panel text-panel-fg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex border-b border-panel-border", children: [
+      ["blocks", "Blocks"],
+      ["settings", "Settings"],
+      ["layers", "Layers"]
+    ].map(([value, label]) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "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__ */ (0, import_jsx_runtime9.jsxs)("div", { className: cn("flex min-h-0 flex-1 flex-col", view !== "blocks" && "hidden"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "relative border-b border-panel-border p-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react4.Search, { className: "pointer-events-none absolute top-1/2 left-4 size-3.5 -translate-y-1/2 text-panel-muted-fg" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          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__ */ (0, import_jsx_runtime9.jsx)("kbd", { className: "pointer-events-none absolute top-1/2 right-4 -translate-y-1/2 rounded border border-panel-border bg-panel px-1 py-0.5 font-mono text-[10px] text-panel-muted-fg", children: "\u2318K" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { id: "gjs-blocks", className: "min-h-0 flex-1 overflow-y-auto" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: cn("min-h-0 flex-1 overflow-y-auto", view !== "settings" && "hidden"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CollapseSection, { title: "Attributes", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { id: "gjs-traits" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CollapseSection, { title: "Style", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { id: "gjs-styles" }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      "div",
+      {
+        className: cn("flex min-h-0 flex-1 flex-col", view !== "layers" && "hidden"),
+        onMouseDownCapture: markLayersSource,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { className: "flex items-center justify-between gap-2 border-b border-panel-border px-3 py-2 text-xs text-panel-muted-fg", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "Expand all" }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              Switch,
+              {
+                checked: layersExpanded,
+                onCheckedChange: toggleLayers,
+                className: "data-[state=checked]:bg-brand data-[state=unchecked]:bg-panel-border"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { id: "gjs-layers", className: "min-h-0 flex-1 overflow-y-auto" })
+        ]
+      }
+    )
+  ] });
+}
+function Breadcrumb({
+  crumbs,
+  onSelect
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex h-9 shrink-0 items-center gap-0.5 border-t border-border bg-surface px-3 text-xs text-muted-foreground", children: crumbs.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-muted-foreground/60", children: "Select an element\u2026" }) : crumbs.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex items-center gap-0.5", children: [
+    i > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.ChevronRight, { className: "size-3 opacity-40" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "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)) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  EmailEditor
+});
+//# sourceMappingURL=canvas.cjs.map