@mjml-agent-editor/editor 0.1.0

package/dist/chunk-LSF33PSW.js

@@ -0,0 +1,1649 @@
+"use client";
+import {
+  Badge,
+  Button,
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+  Input,
+  Separator,
+  Spinner,
+  Textarea,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  cn
+} from "./chunk-V6RR4VRD.js";
+
+// src/stores.tsx
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var StoreContext = createContext(null);
+function EditorStoreProvider({
+  stores,
+  children
+}) {
+  return /* @__PURE__ */ jsx(StoreContext.Provider, { value: stores, children });
+}
+function useStores() {
+  const stores = 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/components/editor/EditorHeader.tsx
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import {
+  Undo2,
+  Redo2,
+  Code2,
+  Copy,
+  Eye,
+  Download,
+  MessageSquare,
+  Mail,
+  ChevronDown,
+  Minus,
+  Plus,
+  Monitor,
+  Smartphone,
+  MoreVertical,
+  X
+} from "lucide-react";
+
+// src/components/ui/toggle-group.tsx
+import * as React2 from "react";
+import "class-variance-authority";
+import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
+
+// src/components/ui/toggle.tsx
+import "react";
+import { cva } from "class-variance-authority";
+import { Toggle as TogglePrimitive } from "radix-ui";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var toggleVariants = cva(
+  "group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-input bg-transparent hover:bg-muted"
+      },
+      size: {
+        default: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] 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 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+
+// src/components/ui/toggle-group.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var ToggleGroupContext = React2.createContext({
+  size: "default",
+  variant: "default",
+  spacing: 2,
+  orientation: "horizontal"
+});
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  spacing = 2,
+  orientation = "horizontal",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    ToggleGroupPrimitive.Root,
+    {
+      "data-slot": "toggle-group",
+      "data-variant": variant,
+      "data-size": size,
+      "data-spacing": spacing,
+      "data-orientation": orientation,
+      style: { "--gap": spacing },
+      className: cn(
+        "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx3(ToggleGroupContext.Provider, { value: { variant, size, spacing, orientation }, children })
+    }
+  );
+}
+function ToggleGroupItem({
+  className,
+  children,
+  variant = "default",
+  size = "default",
+  ...props
+}) {
+  const context = React2.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ jsx3(
+    ToggleGroupPrimitive.Item,
+    {
+      "data-slot": "toggle-group-item",
+      "data-variant": context.variant || variant,
+      "data-size": context.size || size,
+      "data-spacing": context.spacing,
+      className: cn(
+        "shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size
+        }),
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+
+// src/components/ui/popover.tsx
+import "react";
+import { Popover as PopoverPrimitive } from "radix-ui";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function Popover({ ...props }) {
+  return /* @__PURE__ */ jsx4(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx4(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverAnchor({ ...props }) {
+  return /* @__PURE__ */ jsx4(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
+}
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx4(
+    PopoverPrimitive.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/tabs.tsx
+import "react";
+import { cva as cva2 } from "class-variance-authority";
+import { Tabs as TabsPrimitive } from "radix-ui";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx5(
+    TabsPrimitive.Root,
+    {
+      "data-slot": "tabs",
+      "data-orientation": orientation,
+      className: cn("group/tabs flex gap-2 data-horizontal:flex-col", className),
+      ...props
+    }
+  );
+}
+var tabsListVariants = cva2(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx5(
+    TabsPrimitive.List,
+    {
+      "data-slot": "tabs-list",
+      "data-variant": variant,
+      className: cn(tabsListVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+function TabsTrigger({ className, ...props }) {
+  return /* @__PURE__ */ jsx5(
+    TabsPrimitive.Trigger,
+    {
+      "data-slot": "tabs-trigger",
+      className: cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TabsContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx5(
+    TabsPrimitive.Content,
+    {
+      "data-slot": "tabs-content",
+      className: cn("flex-1 text-sm outline-none", className),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/dialog.tsx
+import "react";
+import { Dialog as DialogPrimitive } from "radix-ui";
+import { XIcon } from "lucide-react";
+import { jsx as jsx6, jsxs } from "react/jsx-runtime";
+function Dialog({ ...props }) {
+  return /* @__PURE__ */ jsx6(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+}
+function DialogTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx6(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
+}
+function DialogPortal({ ...props }) {
+  return /* @__PURE__ */ jsx6(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogClose({ ...props }) {
+  return /* @__PURE__ */ jsx6(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(
+    DialogPrimitive.Overlay,
+    {
+      "data-slot": "dialog-overlay",
+      className: cn(
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(DialogPortal, { children: [
+    /* @__PURE__ */ jsx6(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      DialogPrimitive.Content,
+      {
+        "data-slot": "dialog-content",
+        className: cn(
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsx6(DialogPrimitive.Close, { "data-slot": "dialog-close", asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", className: "absolute top-2 right-2", size: "icon-sm", children: [
+            /* @__PURE__ */ jsx6(XIcon, {}),
+            /* @__PURE__ */ jsx6("span", { className: "sr-only", children: "Close" })
+          ] }) })
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx6("div", { "data-slot": "dialog-header", className: cn("flex flex-col gap-2", className), ...props });
+}
+function DialogTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx6(
+    DialogPrimitive.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("font-heading text-base leading-none font-medium", className),
+      ...props
+    }
+  );
+}
+
+// src/components/editor/EditorHeader.tsx
+import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+var SAVE_LABEL = {
+  idle: "",
+  saving: "Saving\u2026",
+  saved: "Saved",
+  error: "Save failed"
+};
+var WIDTHS = ["600px", "640px", "680px", "720px"];
+var DEVICE_ICON = {
+  Desktop: /* @__PURE__ */ jsx7(Monitor, { className: "size-3.5" }),
+  Mobile: /* @__PURE__ */ jsx7(Smartphone, { className: "size-3.5" })
+};
+function SaveBadge({ status }) {
+  if (status === "idle") return null;
+  if (status === "saving")
+    return /* @__PURE__ */ jsxs2("span", { className: "flex items-center gap-1 text-xs text-panel-muted-fg", children: [
+      /* @__PURE__ */ jsx7(Spinner, { className: "size-3" }),
+      " ",
+      SAVE_LABEL.saving
+    ] });
+  if (status === "error") return /* @__PURE__ */ jsx7(Badge, { variant: "destructive", children: SAVE_LABEL.error });
+  return /* @__PURE__ */ jsxs2("span", { className: "text-xs text-emerald-400", children: [
+    "\u2713 ",
+    SAVE_LABEL.saved
+  ] });
+}
+function slugify(name) {
+  return name.trim().replace(/[^\p{L}\p{N}]+/gu, "-").replace(/^-+|-+$/g, "").toLowerCase() || "email";
+}
+function download(filename, content, mime) {
+  const blob = new Blob([content], { type: mime });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+var darkGhost = "text-panel-muted-fg hover:bg-panel-hover hover:text-panel-fg";
+function EditorHeader({
+  docId,
+  api,
+  openCount,
+  homeLink
+}) {
+  const documents = useDocumentStore();
+  const [name, setName] = useState("");
+  const [state, setState] = useState({
+    device: "Desktop",
+    canUndo: false,
+    canRedo: false,
+    saveStatus: "idle",
+    zoom: 100,
+    contentWidth: "600px"
+  });
+  const [code, setCode] = useState({ mjml: "", html: "" });
+  const [preview, setPreview] = useState("");
+  useEffect(() => {
+    documents.get(docId).then((d) => setName(d.name)).catch(() => {
+    });
+  }, [docId, documents]);
+  useEffect(() => {
+    if (!api) return;
+    return api.onEditorState(setState);
+  }, [api]);
+  const commitName = async () => {
+    const n = name.trim() || "Untitled";
+    setName(n);
+    try {
+      await documents.save(docId, { name: n });
+    } catch {
+      toast.error("Failed to rename.");
+    }
+  };
+  const devices = api?.getDevices() ?? [];
+  const base = slugify(name);
+  const openCode = () => setCode({ mjml: api?.getMjml() ?? "", html: api?.getCompiledHtml() ?? "" });
+  return /* @__PURE__ */ jsxs2("header", { className: "flex h-14 shrink-0 items-center gap-2 border-b border-panel-border bg-panel px-3 text-panel-fg", children: [
+    /* @__PURE__ */ jsx7("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-brand to-indigo-400 text-brand-fg shadow-sm", children: /* @__PURE__ */ jsx7(Mail, { className: "size-4" }) }),
+    /* @__PURE__ */ jsx7("span", { className: "hidden text-sm font-semibold sm:inline", children: "MJML Editor" }),
+    /* @__PURE__ */ jsx7(Separator, { orientation: "vertical", className: "mx-1 !h-5 bg-panel-border" }),
+    /* @__PURE__ */ jsx7(
+      Input,
+      {
+        value: name,
+        onChange: (e) => setName(e.target.value),
+        onBlur: () => void commitName(),
+        onKeyDown: (e) => e.key === "Enter" && e.currentTarget.blur(),
+        className: "h-8 w-44 border-transparent bg-transparent text-sm font-medium text-panel-fg hover:border-panel-border focus-visible:border-panel-border",
+        "aria-label": "Email name"
+      }
+    ),
+    /* @__PURE__ */ jsx7(Separator, { orientation: "vertical", className: "mx-1 !h-5 bg-panel-border" }),
+    devices.length > 0 && /* @__PURE__ */ jsx7(
+      ToggleGroup,
+      {
+        type: "single",
+        size: "sm",
+        value: state.device,
+        onValueChange: (v) => v && api?.setDevice(v),
+        className: "rounded-md border border-panel-border",
+        children: devices.map((d) => /* @__PURE__ */ jsxs2(
+          ToggleGroupItem,
+          {
+            value: d.name,
+            className: "gap-1.5 px-2.5 text-panel-muted-fg data-[state=on]:bg-panel-elevated data-[state=on]:text-panel-fg",
+            children: [
+              DEVICE_ICON[d.name],
+              d.name
+            ]
+          },
+          d.id
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsxs2(Tooltip, { children: [
+      /* @__PURE__ */ jsx7(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx7(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          className: darkGhost,
+          disabled: !state.canUndo,
+          onClick: () => api?.undo(),
+          children: /* @__PURE__ */ jsx7(Undo2, {})
+        }
+      ) }),
+      /* @__PURE__ */ jsx7(TooltipContent, { children: "Undo" })
+    ] }),
+    /* @__PURE__ */ jsxs2(Tooltip, { children: [
+      /* @__PURE__ */ jsx7(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx7(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          className: darkGhost,
+          disabled: !state.canRedo,
+          onClick: () => api?.redo(),
+          children: /* @__PURE__ */ jsx7(Redo2, {})
+        }
+      ) }),
+      /* @__PURE__ */ jsx7(TooltipContent, { children: "Redo" })
+    ] }),
+    /* @__PURE__ */ jsx7(Separator, { orientation: "vertical", className: "mx-1 !h-5 bg-panel-border max-xl:hidden" }),
+    /* @__PURE__ */ jsxs2(Popover, { children: [
+      /* @__PURE__ */ jsx7(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs2(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          className: cn(darkGhost, "gap-1.5 rounded-md border border-panel-border max-xl:hidden"),
+          children: [
+            /* @__PURE__ */ jsx7("span", { className: "text-panel-muted-fg", children: "Content width" }),
+            state.contentWidth,
+            /* @__PURE__ */ jsx7(ChevronDown, { className: "size-3.5" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx7(PopoverContent, { align: "start", className: "w-40 p-1", children: WIDTHS.map((w) => /* @__PURE__ */ jsx7(
+        "button",
+        {
+          onClick: () => api?.setContentWidth(w),
+          className: cn(
+            "flex w-full items-center justify-between rounded px-2 py-1.5 text-sm hover:bg-muted",
+            state.contentWidth === w && "font-medium text-brand"
+          ),
+          children: w
+        },
+        w
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-0.5 rounded-md border border-panel-border px-0.5 max-xl:hidden", children: [
+      /* @__PURE__ */ jsx7(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          className: cn(darkGhost, "size-7"),
+          onClick: () => api?.setZoom(state.zoom - 10),
+          children: /* @__PURE__ */ jsx7(Minus, { className: "size-3.5" })
+        }
+      ),
+      /* @__PURE__ */ jsxs2("span", { className: "w-10 text-center text-xs tabular-nums text-panel-muted-fg", children: [
+        state.zoom,
+        "%"
+      ] }),
+      /* @__PURE__ */ jsx7(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          className: cn(darkGhost, "size-7"),
+          onClick: () => api?.setZoom(state.zoom + 10),
+          children: /* @__PURE__ */ jsx7(Plus, { className: "size-3.5" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "ml-auto flex items-center gap-2", children: [
+      openCount > 0 && /* @__PURE__ */ jsxs2("span", { className: "flex items-center gap-1 text-xs text-panel-muted-fg", children: [
+        /* @__PURE__ */ jsx7(MessageSquare, { className: "size-3.5" }),
+        " ",
+        openCount
+      ] }),
+      /* @__PURE__ */ jsx7(SaveBadge, { status: state.saveStatus }),
+      /* @__PURE__ */ jsxs2(Dialog, { children: [
+        /* @__PURE__ */ jsx7(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxs2(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            className: cn(darkGhost, "gap-1.5"),
+            onClick: () => setPreview(api?.getCompiledHtml() ?? ""),
+            children: [
+              /* @__PURE__ */ jsx7(Eye, {}),
+              " Preview"
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxs2(
+          DialogContent,
+          {
+            showCloseButton: false,
+            className: "flex !max-w-none h-screen w-screen flex-col gap-0 rounded-none border-0 bg-zinc-100 p-0 sm:rounded-none",
+            children: [
+              /* @__PURE__ */ jsxs2("div", { className: "flex h-12 shrink-0 items-center justify-between border-b bg-white px-4", children: [
+                /* @__PURE__ */ jsxs2(DialogTitle, { className: "text-sm", children: [
+                  "Preview \u2014 ",
+                  name
+                ] }),
+                /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
+                  devices.length > 0 && /* @__PURE__ */ jsx7(
+                    ToggleGroup,
+                    {
+                      type: "single",
+                      size: "sm",
+                      value: state.device,
+                      onValueChange: (v) => v && api?.setDevice(v),
+                      variant: "outline",
+                      children: devices.map((d) => /* @__PURE__ */ jsx7(ToggleGroupItem, { value: d.name, className: "px-2.5", children: d.name }, d.id))
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs2(
+                    Button,
+                    {
+                      variant: "outline",
+                      size: "sm",
+                      onClick: () => download(`${base}.html`, preview, "text/html"),
+                      children: [
+                        /* @__PURE__ */ jsx7(Download, {}),
+                        " Export HTML"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx7(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx7(Button, { variant: "ghost", size: "icon", "aria-label": "Close preview", children: /* @__PURE__ */ jsx7(X, {}) }) })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx7("div", { className: "min-h-0 flex-1 overflow-auto p-6", children: /* @__PURE__ */ jsx7(
+                "iframe",
+                {
+                  title: "Email preview",
+                  srcDoc: preview,
+                  className: cn(
+                    "mx-auto block h-full min-h-[80vh] rounded-md border bg-white shadow-sm",
+                    state.device === "Mobile" ? "w-[375px]" : "w-full max-w-[720px]"
+                  )
+                }
+              ) })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs2(Dialog, { children: [
+        /* @__PURE__ */ jsx7(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxs2(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            className: cn(darkGhost, "gap-1.5"),
+            onClick: openCode,
+            children: [
+              /* @__PURE__ */ jsx7(Code2, {}),
+              " Code"
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxs2(DialogContent, { className: "flex !max-w-4xl flex-col", children: [
+          /* @__PURE__ */ jsx7(DialogHeader, { children: /* @__PURE__ */ jsx7(DialogTitle, { children: "Source code" }) }),
+          /* @__PURE__ */ jsxs2(Tabs, { defaultValue: "mjml", className: "min-h-0 flex-1", children: [
+            /* @__PURE__ */ jsxs2(TabsList, { children: [
+              /* @__PURE__ */ jsx7(TabsTrigger, { value: "mjml", children: "MJML" }),
+              /* @__PURE__ */ jsx7(TabsTrigger, { value: "html", children: "HTML" })
+            ] }),
+            ["mjml", "html"].map((kind) => /* @__PURE__ */ jsxs2(TabsContent, { value: kind, className: "mt-2", children: [
+              /* @__PURE__ */ jsx7("pre", { className: "max-h-[62vh] overflow-auto rounded-md border bg-muted/40 p-3 text-xs leading-relaxed break-all whitespace-pre-wrap", children: code[kind] }),
+              /* @__PURE__ */ jsxs2("div", { className: "mt-2 flex justify-end gap-2", children: [
+                /* @__PURE__ */ jsxs2(
+                  Button,
+                  {
+                    variant: "outline",
+                    size: "sm",
+                    onClick: () => download(
+                      `${base}.${kind}`,
+                      code[kind],
+                      kind === "html" ? "text/html" : "text/plain"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx7(Download, {}),
+                      " Download .",
+                      kind
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs2(
+                  Button,
+                  {
+                    variant: "secondary",
+                    size: "sm",
+                    onClick: () => {
+                      void navigator.clipboard?.writeText(code[kind]);
+                      toast.success(`${kind.toUpperCase()} copied.`);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx7(Copy, {}),
+                      " Copy"
+                    ]
+                  }
+                )
+              ] })
+            ] }, kind))
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs2(Popover, { children: [
+        /* @__PURE__ */ jsx7(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs2(Button, { size: "sm", className: "gap-1.5 bg-brand text-brand-fg hover:bg-brand/90", children: [
+          /* @__PURE__ */ jsx7(Download, {}),
+          " Export",
+          /* @__PURE__ */ jsx7(ChevronDown, { className: "size-3.5" })
+        ] }) }),
+        /* @__PURE__ */ jsxs2(PopoverContent, { align: "end", className: "w-52 p-1", children: [
+          /* @__PURE__ */ jsxs2(
+            "button",
+            {
+              onClick: () => download(`${base}.html`, api?.getCompiledHtml() ?? "", "text/html"),
+              className: "flex w-full flex-col rounded px-2 py-1.5 text-left text-sm hover:bg-muted",
+              children: [
+                /* @__PURE__ */ jsx7("span", { className: "font-medium", children: "Export HTML" }),
+                /* @__PURE__ */ jsxs2("span", { className: "text-xs text-muted-foreground", children: [
+                  base,
+                  ".html"
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs2(
+            "button",
+            {
+              onClick: () => download(`${base}.mjml`, api?.getMjml() ?? "", "text/plain"),
+              className: "flex w-full flex-col rounded px-2 py-1.5 text-left text-sm hover:bg-muted",
+              children: [
+                /* @__PURE__ */ jsx7("span", { className: "font-medium", children: "Export MJML" }),
+                /* @__PURE__ */ jsxs2("span", { className: "text-xs text-muted-foreground", children: [
+                  base,
+                  ".mjml"
+                ] })
+              ]
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs2(Popover, { children: [
+        /* @__PURE__ */ jsx7(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx7(Button, { variant: "ghost", size: "icon", className: darkGhost, children: /* @__PURE__ */ jsx7(MoreVertical, {}) }) }),
+        /* @__PURE__ */ jsx7(PopoverContent, { align: "end", className: "w-44 p-1", children: homeLink })
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/chat/ChatPanel.tsx
+import { useChat } from "@ai-sdk/react";
+import { DefaultChatTransport } from "ai";
+import { useEffect as useEffect2, useRef, useState as useState2 } from "react";
+import { toast as toast2 } from "sonner";
+import {
+  Check,
+  Loader2,
+  TriangleAlert,
+  Send,
+  Square,
+  Sparkles,
+  MessageSquare as MessageSquare2,
+  ChevronRight
+} from "lucide-react";
+
+// src/components/ui/message.tsx
+import "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+function Message({
+  className,
+  align = "start",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      "data-slot": "message",
+      "data-align": align,
+      className: cn(
+        "group/message relative flex w-full min-w-0 gap-2 text-sm data-[align=end]:flex-row-reverse",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MessageContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      "data-slot": "message-content",
+      className: cn(
+        "flex w-full min-w-0 flex-col gap-2.5 wrap-break-word group-data-[align=end]/message:*:data-slot:self-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/bubble.tsx
+import "react";
+import { cva as cva3 } from "class-variance-authority";
+import { Slot } from "radix-ui";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var bubbleVariants = cva3(
+  "group/bubble relative flex w-fit max-w-[80%] min-w-0 flex-col gap-1 group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full",
+  {
+    variants: {
+      variant: {
+        default: "*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80",
+        secondary: "*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]",
+        muted: "*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]",
+        tinted: "*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-foreground dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)]",
+        outline: "*:data-[slot=bubble-content]:border-border *:data-[slot=bubble-content]:bg-background [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30",
+        ghost: "border-none *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50",
+        destructive: "*:data-[slot=bubble-content]:bg-destructive/10 *:data-[slot=bubble-content]:text-destructive dark:*:data-[slot=bubble-content]:bg-destructive/20 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Bubble({
+  variant = "default",
+  align = "start",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx9(
+    "div",
+    {
+      "data-slot": "bubble",
+      "data-variant": variant,
+      "data-align": align,
+      className: cn(bubbleVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+function BubbleContent({
+  asChild = false,
+  className,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "div";
+  return /* @__PURE__ */ jsx9(
+    Comp,
+    {
+      "data-slot": "bubble-content",
+      className: cn(
+        "w-fit max-w-full min-w-0 overflow-hidden rounded-xl border border-transparent px-3 py-2 text-sm leading-relaxed wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-left [button,a]:transition-colors [button,a]:outline-none [button,a]:focus-visible:border-ring [button,a]:focus-visible:ring-3 [button,a]:focus-visible:ring-ring/50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var bubbleReactionsVariants = cva3(
+  "absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-full bg-muted px-1.5 py-0.5 text-sm ring-3 ring-card has-[button]:p-0",
+  {
+    variants: {
+      side: {
+        top: "top-0 -translate-y-3/4",
+        bottom: "bottom-0 translate-y-3/4"
+      },
+      align: {
+        start: "left-3",
+        end: "right-3"
+      }
+    },
+    defaultVariants: {
+      side: "bottom",
+      align: "end"
+    }
+  }
+);
+
+// src/components/chat/Markdown.tsx
+import { memo } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var components = {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  a: ({ node, ...props }) => /* @__PURE__ */ jsx10("a", { target: "_blank", rel: "noopener noreferrer", ...props })
+};
+function MarkdownImpl({ children }) {
+  return /* @__PURE__ */ jsx10(
+    "div",
+    {
+      className: cn(
+        "text-sm leading-relaxed break-words",
+        "[&>:first-child]:mt-0 [&>:last-child]:mb-0",
+        "[&_p]:my-1.5",
+        "[&_ul]:my-1.5 [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:my-1.5 [&_ol]:list-decimal [&_ol]:pl-5",
+        "[&_li]:my-0.5 [&_li>ul]:my-0.5 [&_li>ol]:my-0.5",
+        "[&_strong]:font-semibold [&_em]:italic",
+        "[&_a]:underline [&_a]:underline-offset-2",
+        "[&_h1]:mt-2 [&_h1]:mb-1 [&_h1]:text-base [&_h1]:font-semibold",
+        "[&_h2]:mt-2 [&_h2]:mb-1 [&_h2]:text-sm [&_h2]:font-semibold",
+        "[&_h3]:mt-2 [&_h3]:mb-1 [&_h3]:text-sm [&_h3]:font-semibold",
+        "[&_code]:rounded [&_code]:bg-black/5 [&_code]:px-1 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.85em]",
+        "[&_pre]:my-1.5 [&_pre]:overflow-x-auto [&_pre]:rounded-md [&_pre]:bg-black/5 [&_pre]:p-2 [&_pre]:text-xs",
+        "[&_pre_code]:bg-transparent [&_pre_code]:p-0",
+        "[&_blockquote]:my-1.5 [&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground",
+        "[&_hr]:my-2 [&_hr]:border-border",
+        "[&_table]:my-1.5 [&_table]:w-full [&_table]:border-collapse [&_table]:text-xs",
+        "[&_th]:border [&_th]:border-border [&_th]:px-2 [&_th]:py-1 [&_th]:text-left [&_th]:font-semibold",
+        "[&_td]:border [&_td]:border-border [&_td]:px-2 [&_td]:py-1"
+      ),
+      children: /* @__PURE__ */ jsx10(ReactMarkdown, { remarkPlugins: [remarkGfm], components, children })
+    }
+  );
+}
+var Markdown = memo(MarkdownImpl);
+
+// src/components/ui/marker.tsx
+import "react";
+import { cva as cva4 } from "class-variance-authority";
+import { Slot as Slot2 } from "radix-ui";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var markerVariants = cva4(
+  "group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-sm text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "",
+        separator: "before:mr-1 before:h-px before:min-w-0 before:flex-1 before:bg-border after:ml-1 after:h-px after:min-w-0 after:flex-1 after:bg-border",
+        border: "border-b border-border pb-2"
+      }
+    }
+  }
+);
+function Marker({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot2.Root : "div";
+  return /* @__PURE__ */ jsx11(
+    Comp,
+    {
+      "data-slot": "marker",
+      "data-variant": variant,
+      className: cn(markerVariants({ variant, className })),
+      ...props
+    }
+  );
+}
+function MarkerIcon({ className, ...props }) {
+  return /* @__PURE__ */ jsx11(
+    "span",
+    {
+      "data-slot": "marker-icon",
+      "aria-hidden": "true",
+      className: cn("size-4 shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+      ...props
+    }
+  );
+}
+function MarkerContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx11(
+    "span",
+    {
+      "data-slot": "marker-content",
+      className: cn(
+        "min-w-0 wrap-break-word group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/collapsible.tsx
+import { Collapsible as CollapsiblePrimitive } from "radix-ui";
+import { jsx as jsx12 } from "react/jsx-runtime";
+function Collapsible({ ...props }) {
+  return /* @__PURE__ */ jsx12(CollapsiblePrimitive.Root, { "data-slot": "collapsible", ...props });
+}
+function CollapsibleTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx12(CollapsiblePrimitive.CollapsibleTrigger, { "data-slot": "collapsible-trigger", ...props });
+}
+function CollapsibleContent({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx12(CollapsiblePrimitive.CollapsibleContent, { "data-slot": "collapsible-content", ...props });
+}
+
+// src/components/ui/message-scroller.tsx
+import "react";
+import {
+  MessageScroller as MessageScrollerPrimitive,
+  useMessageScroller,
+  useMessageScrollerScrollable,
+  useMessageScrollerVisibility
+} from "@shadcn/react/message-scroller";
+import { ArrowDownIcon } from "lucide-react";
+import { Fragment, jsx as jsx13, jsxs as jsxs3 } from "react/jsx-runtime";
+function MessageScrollerProvider(props) {
+  return /* @__PURE__ */ jsx13(MessageScrollerPrimitive.Provider, { ...props });
+}
+function MessageScroller({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx13(
+    MessageScrollerPrimitive.Root,
+    {
+      "data-slot": "message-scroller",
+      className: cn(
+        "group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MessageScrollerViewport({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx13(
+    MessageScrollerPrimitive.Viewport,
+    {
+      "data-slot": "message-scroller-viewport",
+      className: cn(
+        "size-full min-h-0 min-w-0 scroll-fade-b scrollbar-thin scrollbar-gutter-stable overflow-y-auto overscroll-contain contain-content data-autoscrolling:scrollbar-thumb-transparent data-autoscrolling:scrollbar-track-transparent",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MessageScrollerContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx13(
+    MessageScrollerPrimitive.Content,
+    {
+      "data-slot": "message-scroller-content",
+      className: cn("flex h-max min-h-full flex-col gap-6", className),
+      ...props
+    }
+  );
+}
+function MessageScrollerItem({
+  className,
+  scrollAnchor = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx13(
+    MessageScrollerPrimitive.Item,
+    {
+      "data-slot": "message-scroller-item",
+      scrollAnchor,
+      className: cn(
+        "min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MessageScrollerButton({
+  direction = "end",
+  className,
+  children,
+  render,
+  variant = "secondary",
+  size = "icon-sm",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx13(
+    MessageScrollerPrimitive.Button,
+    {
+      "data-slot": "message-scroller-button",
+      "data-direction": direction,
+      "data-variant": variant,
+      "data-size": size,
+      direction,
+      className: cn(
+        "absolute inset-s-1/2 -translate-x-1/2 border-border bg-background text-foreground transition-[translate,scale,opacity] duration-200 hover:bg-muted hover:text-foreground data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full rtl:translate-x-1/2 data-[direction=start]:[&_svg]:rotate-180",
+        className
+      ),
+      render: render ?? /* @__PURE__ */ jsx13(Button, { variant, size }),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsxs3(Fragment, { children: [
+        /* @__PURE__ */ jsx13(ArrowDownIcon, {}),
+        /* @__PURE__ */ jsx13("span", { className: "sr-only", children: direction === "end" ? "Scroll to end" : "Scroll to start" })
+      ] })
+    }
+  );
+}
+
+// src/components/chat/ChatPanel.tsx
+import { jsx as jsx14, jsxs as jsxs4 } from "react/jsx-runtime";
+var TOOL_LABELS = {
+  get_document: "Reading document",
+  get_section: "Reading section",
+  set_document: "Saving whole email",
+  set_section: "Replacing section",
+  insert_section: "Adding section",
+  remove_section: "Removing section",
+  generate_image: "Generating image",
+  list_open_comments: "Reading comments",
+  resolve_comment: "Resolving comment"
+};
+var APPLY_COMMENTS_PROMPT = "Apply changes based on all open section comments. After each successful change mark the comment as resolved and summarize what you changed.";
+var MUTATING_TOOLS = /* @__PURE__ */ new Set([
+  "set_document",
+  "set_section",
+  "insert_section",
+  "remove_section",
+  "resolve_comment"
+]);
+var SECTION_ARG = {
+  set_section: "section_id",
+  remove_section: "section_id",
+  insert_section: "after_section_id"
+};
+function ToolMarker({ tool }) {
+  const name = tool.type.slice(5);
+  const done = tool.state === "output-available";
+  const failed = tool.state === "output-error";
+  return /* @__PURE__ */ jsxs4(Marker, { className: cn(failed ? "text-destructive" : "text-panel-fg"), children: [
+    /* @__PURE__ */ jsx14(MarkerIcon, { children: failed ? /* @__PURE__ */ jsx14(TriangleAlert, {}) : done ? /* @__PURE__ */ jsx14(Check, { className: "text-emerald-400" }) : /* @__PURE__ */ jsx14(Loader2, { className: "animate-spin" }) }),
+    /* @__PURE__ */ jsxs4(MarkerContent, { children: [
+      TOOL_LABELS[name] ?? name,
+      failed && tool.errorText ? `: ${tool.errorText}` : ""
+    ] })
+  ] });
+}
+function BusyMarker() {
+  return /* @__PURE__ */ jsxs4(Marker, { className: "text-panel-fg", children: [
+    /* @__PURE__ */ jsx14(MarkerIcon, { children: /* @__PURE__ */ jsx14(Loader2, { className: "animate-spin" }) }),
+    /* @__PURE__ */ jsx14(MarkerContent, { children: "Agent is working\u2026" })
+  ] });
+}
+function ToolActivity({ tools }) {
+  const running = tools.filter((t) => t.state !== "output-available" && t.state !== "output-error");
+  const finished = tools.filter(
+    (t) => t.state === "output-available" || t.state === "output-error"
+  );
+  const failedCount = finished.filter((t) => t.state === "output-error").length;
+  return /* @__PURE__ */ jsxs4("div", { className: "space-y-1 rounded-lg border border-panel-border bg-panel-elevated/60 p-2", children: [
+    finished.length > 0 && /* @__PURE__ */ jsxs4(Collapsible, { defaultOpen: true, children: [
+      /* @__PURE__ */ jsxs4(CollapsibleTrigger, { className: "group/col flex w-full items-center gap-1.5 text-left text-xs font-medium text-panel-fg hover:text-panel-fg", children: [
+        /* @__PURE__ */ jsx14(ChevronRight, { className: "size-3.5 shrink-0 transition-transform group-data-[state=open]/col:rotate-90" }),
+        /* @__PURE__ */ jsx14("span", { children: failedCount > 0 ? `Completed steps (${finished.length}, ${failedCount} failed)` : `Completed steps (${finished.length})` })
+      ] }),
+      /* @__PURE__ */ jsx14(CollapsibleContent, { className: "mt-1 space-y-0.5 pl-1", children: finished.map((t, i) => /* @__PURE__ */ jsx14(ToolMarker, { tool: t }, `f${i}`)) })
+    ] }),
+    running.map((t, i) => /* @__PURE__ */ jsx14(ToolMarker, { tool: t }, `r${i}`))
+  ] });
+}
+function ChatPanel({
+  docId,
+  onBeforeSend,
+  onAgentFinish,
+  onLiveUpdate,
+  onSectionEditStart,
+  onSectionEditEnd
+}) {
+  const [input, setInput] = useState2("");
+  const taRef = useRef(null);
+  const times = useRef(/* @__PURE__ */ new Map());
+  const timeFor = (id) => {
+    if (!times.current.has(id)) {
+      times.current.set(
+        id,
+        (/* @__PURE__ */ new Date()).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
+      );
+    }
+    return times.current.get(id);
+  };
+  const { messages, sendMessage, status, stop } = useChat({
+    transport: new DefaultChatTransport({
+      // Same-origin: the agent is a route handler in this app, not a separate service.
+      api: "/api/chat",
+      body: { docId }
+    }),
+    onFinish: onAgentFinish,
+    onError: (e) => {
+      console.error("chat error:", e);
+      toast2.error("Agent chat error.");
+    }
+  });
+  const firedTools = useRef(/* @__PURE__ */ new Set());
+  const highlightStarted = useRef(/* @__PURE__ */ new Map());
+  const highlightEnded = useRef(/* @__PURE__ */ new Set());
+  useEffect2(() => {
+    for (const message of messages) {
+      if (message.role !== "assistant") continue;
+      message.parts.forEach((part, i) => {
+        if (!part.type.startsWith("tool-")) return;
+        const tool = part;
+        const name = tool.type.slice(5);
+        const key = `${message.id}:${i}`;
+        const done = tool.state === "output-available" || tool.state === "output-error";
+        const argName = SECTION_ARG[name];
+        if (argName && !done && !highlightStarted.current.has(key)) {
+          const sid = tool.input?.[argName];
+          if (typeof sid === "string" && sid) {
+            highlightStarted.current.set(key, sid);
+            onSectionEditStart(sid);
+          }
+        }
+        if (!done) return;
+        const startedSid = highlightStarted.current.get(key);
+        if (startedSid && !highlightEnded.current.has(key)) {
+          highlightEnded.current.add(key);
+          onSectionEditEnd(startedSid);
+        }
+        if (MUTATING_TOOLS.has(name) && !firedTools.current.has(key)) {
+          firedTools.current.add(key);
+          onLiveUpdate();
+        }
+      });
+    }
+  }, [messages, onLiveUpdate, onSectionEditStart, onSectionEditEnd]);
+  const busy = status === "submitted" || status === "streaming";
+  const lastMsg = messages[messages.length - 1];
+  const toolRunning = lastMsg?.role === "assistant" && lastMsg.parts.some((p) => {
+    if (!p.type.startsWith("tool-")) return false;
+    const s = p.state;
+    return s !== "output-available" && s !== "output-error";
+  });
+  const grow = () => {
+    const el = taRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${Math.min(el.scrollHeight, 160)}px`;
+  };
+  const send = async (text) => {
+    const trimmed = text.trim();
+    if (!trimmed || busy) return;
+    await onBeforeSend().catch(console.error);
+    void sendMessage({ text: trimmed });
+    setInput("");
+    if (taRef.current) taRef.current.style.height = "auto";
+  };
+  return /* @__PURE__ */ jsxs4("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ jsx14(MessageScrollerProvider, { autoScroll: true, children: /* @__PURE__ */ jsxs4(MessageScroller, { className: "flex-1", children: [
+      /* @__PURE__ */ jsx14(MessageScrollerViewport, { children: /* @__PURE__ */ jsxs4(MessageScrollerContent, { className: "p-3", children: [
+        messages.length === 0 ? /* @__PURE__ */ jsx14(Empty, { className: "h-full", children: /* @__PURE__ */ jsxs4(EmptyHeader, { children: [
+          /* @__PURE__ */ jsx14(EmptyMedia, { variant: "icon", children: /* @__PURE__ */ jsx14(MessageSquare2, {}) }),
+          /* @__PURE__ */ jsx14(EmptyTitle, { children: "Start a conversation with the agent" }),
+          /* @__PURE__ */ jsx14(EmptyDescription, { children: "Describe the email (goal, tone, content) and paste your data \u2014 the agent will design the sections and images." })
+        ] }) }) : messages.map((message, mi) => {
+          const isUser = message.role === "user";
+          const isLast = mi === messages.length - 1;
+          const toolParts = message.parts.filter(
+            (p) => p.type.startsWith("tool-")
+          );
+          const textParts = message.parts.filter(
+            (p) => p.type === "text" && p.text.trim() !== ""
+          );
+          return /* @__PURE__ */ jsx14(MessageScrollerItem, { messageId: message.id, children: /* @__PURE__ */ jsxs4("div", { className: cn("flex w-full gap-2", isUser && "flex-row-reverse"), children: [
+            !isUser && /* @__PURE__ */ jsx14("span", { className: "mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-full bg-brand/15 text-brand", children: /* @__PURE__ */ jsx14(Sparkles, { className: "size-3.5" }) }),
+            /* @__PURE__ */ jsxs4(
+              "div",
+              {
+                className: cn(
+                  "flex min-w-0 flex-1 flex-col gap-1",
+                  isUser ? "items-end" : "items-start"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx14(Message, { align: isUser ? "end" : "start", children: /* @__PURE__ */ jsxs4(MessageContent, { children: [
+                    toolParts.length > 0 && /* @__PURE__ */ jsx14(ToolActivity, { tools: toolParts }),
+                    textParts.map((part, i) => /* @__PURE__ */ jsx14(
+                      Bubble,
+                      {
+                        variant: isUser ? "default" : "muted",
+                        align: isUser ? "end" : "start",
+                        className: cn(
+                          isUser ? "[&_[data-slot=bubble-content]]:bg-brand [&_[data-slot=bubble-content]]:text-brand-fg" : "[&_[data-slot=bubble-content]]:border [&_[data-slot=bubble-content]]:border-panel-border [&_[data-slot=bubble-content]]:bg-panel-elevated [&_[data-slot=bubble-content]]:text-panel-fg [&_code]:!bg-white/12 [&_pre]:!bg-white/10 [&_a]:text-brand"
+                        ),
+                        children: /* @__PURE__ */ jsx14(
+                          BubbleContent,
+                          {
+                            className: isUser ? "whitespace-pre-wrap" : void 0,
+                            children: isUser && part.type === "text" ? part.text : part.type === "text" ? /* @__PURE__ */ jsx14(Markdown, { children: part.text }) : null
+                          }
+                        )
+                      },
+                      i
+                    )),
+                    isLast && !isUser && busy && !toolRunning && textParts.length === 0 && /* @__PURE__ */ jsx14(BusyMarker, {})
+                  ] }) }),
+                  (textParts.length > 0 || toolParts.length > 0) && /* @__PURE__ */ jsx14("span", { className: "px-1 text-[10px] text-panel-muted-fg", children: timeFor(message.id) })
+                ]
+              }
+            )
+          ] }) }, message.id);
+        }),
+        busy && !toolRunning && lastMsg?.role !== "assistant" && /* @__PURE__ */ jsx14(BusyMarker, {})
+      ] }) }),
+      /* @__PURE__ */ jsx14(MessageScrollerButton, { direction: "end" })
+    ] }) }),
+    /* @__PURE__ */ jsxs4("div", { className: "border-t border-panel-border p-3", children: [
+      /* @__PURE__ */ jsxs4(
+        Button,
+        {
+          className: "mb-2 w-full bg-brand text-brand-fg hover:bg-brand/90",
+          disabled: busy,
+          onClick: () => void send(APPLY_COMMENTS_PROMPT),
+          children: [
+            /* @__PURE__ */ jsx14(Sparkles, {}),
+            " Apply changes from comments"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs4(
+        "form",
+        {
+          onSubmit: (e) => {
+            e.preventDefault();
+            void send(input);
+          },
+          className: "rounded-xl border border-panel-border bg-panel-elevated transition-colors focus-within:border-brand/60",
+          children: [
+            /* @__PURE__ */ jsx14(
+              Textarea,
+              {
+                ref: taRef,
+                rows: 2,
+                className: "max-h-40 min-h-14 resize-none border-0 bg-transparent px-3 pt-2.5 text-panel-fg shadow-none placeholder:text-panel-muted-fg focus-visible:ring-0",
+                placeholder: "Describe what you want to change\u2026 (Enter = send, Shift+Enter = new line)",
+                value: input,
+                onChange: (e) => {
+                  setInput(e.target.value);
+                  grow();
+                },
+                onKeyDown: (e) => {
+                  if (e.key === "Enter" && !e.shiftKey) {
+                    e.preventDefault();
+                    void send(input);
+                  }
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-end gap-2 px-2 pb-2", children: [
+              busy && /* @__PURE__ */ jsxs4(
+                Button,
+                {
+                  type: "button",
+                  variant: "outline",
+                  size: "sm",
+                  className: "border-panel-border bg-transparent text-panel-fg hover:bg-panel-hover hover:text-panel-fg",
+                  onClick: () => void stop(),
+                  children: [
+                    /* @__PURE__ */ jsx14(Square, {}),
+                    " Stop"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs4(
+                Button,
+                {
+                  type: "submit",
+                  size: "sm",
+                  disabled: busy || !input.trim(),
+                  className: "bg-brand text-brand-fg hover:bg-brand/90",
+                  children: [
+                    /* @__PURE__ */ jsx14(Send, {}),
+                    " Send"
+                  ]
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/comments/CanvasComments.tsx
+import { useEditorMaybe } from "@grapesjs/react";
+import { useCallback, useEffect as useEffect3, useMemo, useRef as useRef2, useState as useState3 } from "react";
+import { Check as Check2, MessageSquarePlus, X as X2 } from "lucide-react";
+import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs5 } from "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 = useEditorMaybe();
+  const containerRef = useRef2(null);
+  const [comments, setComments] = useState3([]);
+  const [positions, setPositions] = useState3({});
+  const [activeKey, setActiveKey] = useState3(null);
+  const [composeInfo, setComposeInfo] = useState3(null);
+  const [body, setBody] = useState3("");
+  const reload = useCallback(() => {
+    commentStore.list(docId).then(setComments).catch(console.error);
+  }, [docId]);
+  useEffect3(() => {
+    reload();
+  }, [reload, refreshSignal]);
+  const open = useMemo(() => comments.filter((c) => c.status === "open"), [comments]);
+  useEffect3(() => {
+    onOpenCountChange(open.length);
+  }, [open.length, onOpenCountChange]);
+  const pins = 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 = useRef2(open);
+  openRef.current = open;
+  const activeRef = useRef2(activeKey);
+  activeRef.current = activeKey;
+  const positionsRef = useRef2({});
+  const recompute = 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]);
+  useEffect3(() => {
+    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]);
+  useEffect3(() => {
+    recompute();
+  }, [comments, activeKey, recompute]);
+  useEffect3(() => {
+    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 = useRef2({ top: 0, left: 0 });
+  if (activePos) lastAnchorPos.current = activePos;
+  const anchorPos = activePos ?? lastAnchorPos.current;
+  const closePopover = useCallback(() => {
+    setActiveKey(null);
+    setBody("");
+    if (composeInfo) {
+      setComposeInfo(null);
+      onComposeConsumed();
+    }
+  }, [composeInfo, onComposeConsumed]);
+  useEffect3(() => {
+    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__ */ jsxs5("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__ */ jsx15(
+        "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__ */ jsxs5(Popover, { open: !!activeKey && !!activePos, onOpenChange: (o) => !o && closePopover(), children: [
+      /* @__PURE__ */ jsx15(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsx15(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            top: anchorPos.top,
+            left: anchorPos.left,
+            width: 1,
+            height: 1
+          }
+        }
+      ) }),
+      /* @__PURE__ */ jsxs5(
+        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__ */ jsxs5("div", { className: "flex items-start justify-between gap-2 border-b px-3 py-2 text-xs text-muted-foreground", children: [
+              /* @__PURE__ */ jsx15("span", { className: "min-w-0", children: activeTarget?.objectId ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
+                "Comment on",
+                " ",
+                /* @__PURE__ */ jsx15("span", { className: "font-medium text-foreground", children: activeTarget.objectLabel })
+              ] }) : /* @__PURE__ */ jsxs5(Fragment2, { children: [
+                "Comment on the whole section",
+                " ",
+                /* @__PURE__ */ jsx15("code", { className: "font-mono", children: activeTarget?.sectionId })
+              ] }) }),
+              /* @__PURE__ */ jsx15(
+                "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__ */ jsx15(X2, { className: "size-4" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs5("div", { className: "max-h-64 space-y-2 overflow-y-auto p-3", children: [
+              activeComments.length === 0 && /* @__PURE__ */ jsx15("p", { className: "text-xs text-muted-foreground", children: "No comments yet \u2014 add the first one." }),
+              activeComments.map((c) => /* @__PURE__ */ jsxs5("div", { className: "rounded-md border bg-muted/40 p-2 text-sm", children: [
+                /* @__PURE__ */ jsx15("p", { className: "whitespace-pre-wrap", children: c.body }),
+                /* @__PURE__ */ jsxs5(
+                  "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__ */ jsx15(Check2, { className: "size-3" }),
+                      " Resolve"
+                    ]
+                  }
+                )
+              ] }, c.id))
+            ] }),
+            /* @__PURE__ */ jsxs5("div", { className: "border-t p-3", children: [
+              /* @__PURE__ */ jsx15(
+                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__ */ jsx15("div", { className: "mt-2 flex justify-end", children: /* @__PURE__ */ jsxs5(Button, { size: "sm", disabled: !body.trim(), onClick: () => void submit(), children: [
+                /* @__PURE__ */ jsx15(MessageSquarePlus, {}),
+                " Add"
+              ] }) })
+            ] })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+
+export {
+  EditorStoreProvider,
+  useDocumentStore,
+  useCommentStore,
+  STARTER_MJML,
+  EditorHeader,
+  Markdown,
+  ChatPanel,
+  CanvasComments
+};
+//# sourceMappingURL=chunk-LSF33PSW.js.map