@mjml-agent-editor/editor 0.1.0

package/dist/index.cjs

@@ -0,0 +1,1935 @@
+"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/index.ts
+var index_exports = {};
+__export(index_exports, {
+  CanvasComments: () => CanvasComments,
+  ChatPanel: () => ChatPanel,
+  EditorHeader: () => EditorHeader,
+  EditorStoreProvider: () => EditorStoreProvider,
+  Markdown: () => Markdown,
+  STARTER_MJML: () => STARTER_MJML,
+  useCommentStore: () => useCommentStore,
+  useDocumentStore: () => useDocumentStore
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/stores.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var StoreContext = (0, import_react.createContext)(null);
+function EditorStoreProvider({
+  stores,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StoreContext.Provider, { value: stores, children });
+}
+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/components/editor/EditorHeader.tsx
+var import_react2 = require("react");
+var import_sonner = require("sonner");
+var import_lucide_react3 = require("lucide-react");
+
+// 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/toggle-group.tsx
+var React4 = __toESM(require("react"), 1);
+var import_class_variance_authority3 = require("class-variance-authority");
+var import_radix_ui3 = require("radix-ui");
+
+// src/components/ui/toggle.tsx
+var React3 = require("react");
+var import_class_variance_authority2 = require("class-variance-authority");
+var import_radix_ui2 = require("radix-ui");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var toggleVariants = (0, import_class_variance_authority2.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
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var ToggleGroupContext = React4.createContext({
+  size: "default",
+  variant: "default",
+  spacing: 2,
+  orientation: "horizontal"
+});
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  spacing = 2,
+  orientation = "horizontal",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_radix_ui3.ToggleGroup.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__ */ (0, import_jsx_runtime5.jsx)(ToggleGroupContext.Provider, { value: { variant, size, spacing, orientation }, children })
+    }
+  );
+}
+function ToggleGroupItem({
+  className,
+  children,
+  variant = "default",
+  size = "default",
+  ...props
+}) {
+  const context = React4.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_radix_ui3.ToggleGroup.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/tooltip.tsx
+var React5 = require("react");
+var import_radix_ui4 = require("radix-ui");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function Tooltip({ ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_radix_ui4.Tooltip.Root, { "data-slot": "tooltip", ...props });
+}
+function TooltipTrigger({ ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_radix_ui4.Tooltip.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_radix_ui4.Tooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    import_radix_ui4.Tooltip.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(
+        "z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 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,
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_radix_ui4.Tooltip.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" })
+      ]
+    }
+  ) });
+}
+
+// src/components/ui/badge.tsx
+var React6 = require("react");
+var import_class_variance_authority4 = require("class-variance-authority");
+var import_radix_ui5 = require("radix-ui");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var badgeVariants = (0, import_class_variance_authority4.cva)(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive: "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? import_radix_ui5.Slot.Root : "span";
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    Comp,
+    {
+      "data-slot": "badge",
+      "data-variant": variant,
+      className: cn(badgeVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/spinner.tsx
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function Spinner({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    import_lucide_react.Loader2Icon,
+    {
+      "data-slot": "spinner",
+      role: "status",
+      "aria-label": "Loading",
+      className: cn("size-4 animate-spin", className),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/separator.tsx
+var React7 = require("react");
+var import_radix_ui6 = require("radix-ui");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    import_radix_ui6.Separator.Root,
+    {
+      "data-slot": "separator",
+      decorative,
+      orientation,
+      className: cn(
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/popover.tsx
+var React8 = require("react");
+var import_radix_ui7 = require("radix-ui");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function Popover({ ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_radix_ui7.Popover.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({ ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_radix_ui7.Popover.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverAnchor({ ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_radix_ui7.Popover.Anchor, { "data-slot": "popover-anchor", ...props });
+}
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_radix_ui7.Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    import_radix_ui7.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/tabs.tsx
+var React9 = require("react");
+var import_class_variance_authority5 = require("class-variance-authority");
+var import_radix_ui8 = require("radix-ui");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    import_radix_ui8.Tabs.Root,
+    {
+      "data-slot": "tabs",
+      "data-orientation": orientation,
+      className: cn("group/tabs flex gap-2 data-horizontal:flex-col", className),
+      ...props
+    }
+  );
+}
+var tabsListVariants = (0, import_class_variance_authority5.cva)(
+  "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__ */ (0, import_jsx_runtime11.jsx)(
+    import_radix_ui8.Tabs.List,
+    {
+      "data-slot": "tabs-list",
+      "data-variant": variant,
+      className: cn(tabsListVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+function TabsTrigger({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    import_radix_ui8.Tabs.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__ */ (0, import_jsx_runtime11.jsx)(
+    import_radix_ui8.Tabs.Content,
+    {
+      "data-slot": "tabs-content",
+      className: cn("flex-1 text-sm outline-none", className),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/dialog.tsx
+var React10 = require("react");
+var import_radix_ui9 = require("radix-ui");
+var import_lucide_react2 = require("lucide-react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function Dialog({ ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_radix_ui9.Dialog.Root, { "data-slot": "dialog", ...props });
+}
+function DialogTrigger({ ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_radix_ui9.Dialog.Trigger, { "data-slot": "dialog-trigger", ...props });
+}
+function DialogPortal({ ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_radix_ui9.Dialog.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogClose({ ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_radix_ui9.Dialog.Close, { "data-slot": "dialog-close", ...props });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    import_radix_ui9.Dialog.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__ */ (0, import_jsx_runtime12.jsxs)(DialogPortal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DialogOverlay, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      import_radix_ui9.Dialog.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__ */ (0, import_jsx_runtime12.jsx)(import_radix_ui9.Dialog.Close, { "data-slot": "dialog-close", asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Button, { variant: "ghost", className: "absolute top-2 right-2", size: "icon-sm", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react2.XIcon, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "sr-only", children: "Close" })
+          ] }) })
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { "data-slot": "dialog-header", className: cn("flex flex-col gap-2", className), ...props });
+}
+function DialogTitle({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    import_radix_ui9.Dialog.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("font-heading text-base leading-none font-medium", className),
+      ...props
+    }
+  );
+}
+
+// src/components/editor/EditorHeader.tsx
+var import_jsx_runtime13 = require("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__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react3.Monitor, { className: "size-3.5" }),
+  Mobile: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react3.Smartphone, { className: "size-3.5" })
+};
+function SaveBadge({ status }) {
+  if (status === "idle") return null;
+  if (status === "saving")
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "flex items-center gap-1 text-xs text-panel-muted-fg", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Spinner, { className: "size-3" }),
+      " ",
+      SAVE_LABEL.saving
+    ] });
+  if (status === "error") return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Badge, { variant: "destructive", children: SAVE_LABEL.error });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("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] = (0, import_react2.useState)("");
+  const [state, setState] = (0, import_react2.useState)({
+    device: "Desktop",
+    canUndo: false,
+    canRedo: false,
+    saveStatus: "idle",
+    zoom: 100,
+    contentWidth: "600px"
+  });
+  const [code, setCode] = (0, import_react2.useState)({ mjml: "", html: "" });
+  const [preview, setPreview] = (0, import_react2.useState)("");
+  (0, import_react2.useEffect)(() => {
+    documents.get(docId).then((d) => setName(d.name)).catch(() => {
+    });
+  }, [docId, documents]);
+  (0, import_react2.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 {
+      import_sonner.toast.error("Failed to rename.");
+    }
+  };
+  const devices = api?.getDevices() ?? [];
+  const base = slugify(name);
+  const openCode = () => setCode({ mjml: api?.getMjml() ?? "", html: api?.getCompiledHtml() ?? "" });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("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__ */ (0, import_jsx_runtime13.jsx)("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__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react3.Mail, { className: "size-4" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "hidden text-sm font-semibold sm:inline", children: "MJML Editor" }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Separator, { orientation: "vertical", className: "mx-1 !h-5 bg-panel-border" }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      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__ */ (0, import_jsx_runtime13.jsx)(Separator, { orientation: "vertical", className: "mx-1 !h-5 bg-panel-border" }),
+    devices.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      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__ */ (0, import_jsx_runtime13.jsxs)(
+          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__ */ (0, import_jsx_runtime13.jsxs)(Tooltip, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          className: darkGhost,
+          disabled: !state.canUndo,
+          onClick: () => api?.undo(),
+          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react3.Undo2, {})
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TooltipContent, { children: "Undo" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Tooltip, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          className: darkGhost,
+          disabled: !state.canRedo,
+          onClick: () => api?.redo(),
+          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react3.Redo2, {})
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TooltipContent, { children: "Redo" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Separator, { orientation: "vertical", className: "mx-1 !h-5 bg-panel-border max-xl:hidden" }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Popover, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          className: cn(darkGhost, "gap-1.5 rounded-md border border-panel-border max-xl:hidden"),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-panel-muted-fg", children: "Content width" }),
+            state.contentWidth,
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react3.ChevronDown, { className: "size-3.5" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PopoverContent, { align: "start", className: "w-40 p-1", children: WIDTHS.map((w) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        "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__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-0.5 rounded-md border border-panel-border px-0.5 max-xl:hidden", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          className: cn(darkGhost, "size-7"),
+          onClick: () => api?.setZoom(state.zoom - 10),
+          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react3.Minus, { className: "size-3.5" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "w-10 text-center text-xs tabular-nums text-panel-muted-fg", children: [
+        state.zoom,
+        "%"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          className: cn(darkGhost, "size-7"),
+          onClick: () => api?.setZoom(state.zoom + 10),
+          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react3.Plus, { className: "size-3.5" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "ml-auto flex items-center gap-2", children: [
+      openCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "flex items-center gap-1 text-xs text-panel-muted-fg", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react3.MessageSquare, { className: "size-3.5" }),
+        " ",
+        openCount
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SaveBadge, { status: state.saveStatus }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Dialog, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            className: cn(darkGhost, "gap-1.5"),
+            onClick: () => setPreview(api?.getCompiledHtml() ?? ""),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react3.Eye, {}),
+              " Preview"
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          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__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex h-12 shrink-0 items-center justify-between border-b bg-white px-4", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(DialogTitle, { className: "text-sm", children: [
+                  "Preview \u2014 ",
+                  name
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-2", children: [
+                  devices.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                    ToggleGroup,
+                    {
+                      type: "single",
+                      size: "sm",
+                      value: state.device,
+                      onValueChange: (v) => v && api?.setDevice(v),
+                      variant: "outline",
+                      children: devices.map((d) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ToggleGroupItem, { value: d.name, className: "px-2.5", children: d.name }, d.id))
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                    Button,
+                    {
+                      variant: "outline",
+                      size: "sm",
+                      onClick: () => download(`${base}.html`, preview, "text/html"),
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react3.Download, {}),
+                        " Export HTML"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogClose, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { variant: "ghost", size: "icon", "aria-label": "Close preview", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react3.X, {}) }) })
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "min-h-0 flex-1 overflow-auto p-6", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                "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__ */ (0, import_jsx_runtime13.jsxs)(Dialog, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            className: cn(darkGhost, "gap-1.5"),
+            onClick: openCode,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react3.Code2, {}),
+              " Code"
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(DialogContent, { className: "flex !max-w-4xl flex-col", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogTitle, { children: "Source code" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Tabs, { defaultValue: "mjml", className: "min-h-0 flex-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(TabsList, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TabsTrigger, { value: "mjml", children: "MJML" }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TabsTrigger, { value: "html", children: "HTML" })
+            ] }),
+            ["mjml", "html"].map((kind) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(TabsContent, { value: kind, className: "mt-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "mt-2 flex justify-end gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                  Button,
+                  {
+                    variant: "outline",
+                    size: "sm",
+                    onClick: () => download(
+                      `${base}.${kind}`,
+                      code[kind],
+                      kind === "html" ? "text/html" : "text/plain"
+                    ),
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react3.Download, {}),
+                      " Download .",
+                      kind
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                  Button,
+                  {
+                    variant: "secondary",
+                    size: "sm",
+                    onClick: () => {
+                      void navigator.clipboard?.writeText(code[kind]);
+                      import_sonner.toast.success(`${kind.toUpperCase()} copied.`);
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react3.Copy, {}),
+                      " Copy"
+                    ]
+                  }
+                )
+              ] })
+            ] }, kind))
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Popover, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Button, { size: "sm", className: "gap-1.5 bg-brand text-brand-fg hover:bg-brand/90", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react3.Download, {}),
+          " Export",
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react3.ChevronDown, { className: "size-3.5" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(PopoverContent, { align: "end", className: "w-52 p-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+            "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__ */ (0, import_jsx_runtime13.jsx)("span", { className: "font-medium", children: "Export HTML" }),
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "text-xs text-muted-foreground", children: [
+                  base,
+                  ".html"
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+            "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__ */ (0, import_jsx_runtime13.jsx)("span", { className: "font-medium", children: "Export MJML" }),
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "text-xs text-muted-foreground", children: [
+                  base,
+                  ".mjml"
+                ] })
+              ]
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Popover, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Button, { variant: "ghost", size: "icon", className: darkGhost, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react3.MoreVertical, {}) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PopoverContent, { align: "end", className: "w-44 p-1", children: homeLink })
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/chat/ChatPanel.tsx
+var import_react4 = require("@ai-sdk/react");
+var import_ai = require("ai");
+var import_react5 = require("react");
+var import_sonner2 = require("sonner");
+var import_lucide_react5 = require("lucide-react");
+
+// src/components/ui/textarea.tsx
+var React11 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function Textarea({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.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/ui/empty.tsx
+var import_class_variance_authority6 = require("class-variance-authority");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function Empty({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "div",
+    {
+      "data-slot": "empty",
+      className: cn(
+        "flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function EmptyHeader({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "div",
+    {
+      "data-slot": "empty-header",
+      className: cn("flex max-w-sm flex-col items-center gap-2", className),
+      ...props
+    }
+  );
+}
+var emptyMediaVariants = (0, import_class_variance_authority6.cva)(
+  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function EmptyMedia({
+  className,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "div",
+    {
+      "data-slot": "empty-icon",
+      "data-variant": variant,
+      className: cn(emptyMediaVariants({ variant, className })),
+      ...props
+    }
+  );
+}
+function EmptyTitle({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "div",
+    {
+      "data-slot": "empty-title",
+      className: cn("font-heading text-sm font-medium tracking-tight", className),
+      ...props
+    }
+  );
+}
+function EmptyDescription({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "div",
+    {
+      "data-slot": "empty-description",
+      className: cn(
+        "text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/message.tsx
+var React12 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function Message({
+  className,
+  align = "start",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    "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__ */ (0, import_jsx_runtime16.jsx)(
+    "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
+var React13 = require("react");
+var import_class_variance_authority7 = require("class-variance-authority");
+var import_radix_ui10 = require("radix-ui");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var bubbleVariants = (0, import_class_variance_authority7.cva)(
+  "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__ */ (0, import_jsx_runtime17.jsx)(
+    "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 ? import_radix_ui10.Slot.Root : "div";
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    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 = (0, import_class_variance_authority7.cva)(
+  "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
+var import_react3 = require("react");
+var import_react_markdown = __toESM(require("react-markdown"), 1);
+var import_remark_gfm = __toESM(require("remark-gfm"), 1);
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var components = {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  a: ({ node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("a", { target: "_blank", rel: "noopener noreferrer", ...props })
+};
+function MarkdownImpl({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    "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__ */ (0, import_jsx_runtime18.jsx)(import_react_markdown.default, { remarkPlugins: [import_remark_gfm.default], components, children })
+    }
+  );
+}
+var Markdown = (0, import_react3.memo)(MarkdownImpl);
+
+// src/components/ui/marker.tsx
+var React14 = require("react");
+var import_class_variance_authority8 = require("class-variance-authority");
+var import_radix_ui11 = require("radix-ui");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var markerVariants = (0, import_class_variance_authority8.cva)(
+  "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 ? import_radix_ui11.Slot.Root : "div";
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    Comp,
+    {
+      "data-slot": "marker",
+      "data-variant": variant,
+      className: cn(markerVariants({ variant, className })),
+      ...props
+    }
+  );
+}
+function MarkerIcon({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    "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__ */ (0, import_jsx_runtime19.jsx)(
+    "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
+var import_radix_ui12 = require("radix-ui");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function Collapsible({ ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_radix_ui12.Collapsible.Root, { "data-slot": "collapsible", ...props });
+}
+function CollapsibleTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_radix_ui12.Collapsible.CollapsibleTrigger, { "data-slot": "collapsible-trigger", ...props });
+}
+function CollapsibleContent({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_radix_ui12.Collapsible.CollapsibleContent, { "data-slot": "collapsible-content", ...props });
+}
+
+// src/components/ui/message-scroller.tsx
+var React15 = require("react");
+var import_message_scroller = require("@shadcn/react/message-scroller");
+var import_lucide_react4 = require("lucide-react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function MessageScrollerProvider(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_message_scroller.MessageScroller.Provider, { ...props });
+}
+function MessageScroller({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    import_message_scroller.MessageScroller.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__ */ (0, import_jsx_runtime21.jsx)(
+    import_message_scroller.MessageScroller.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__ */ (0, import_jsx_runtime21.jsx)(
+    import_message_scroller.MessageScroller.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__ */ (0, import_jsx_runtime21.jsx)(
+    import_message_scroller.MessageScroller.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__ */ (0, import_jsx_runtime21.jsx)(
+    import_message_scroller.MessageScroller.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__ */ (0, import_jsx_runtime21.jsx)(Button, { variant, size }),
+      ...props,
+      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react4.ArrowDownIcon, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "sr-only", children: direction === "end" ? "Scroll to end" : "Scroll to start" })
+      ] })
+    }
+  );
+}
+
+// src/components/chat/ChatPanel.tsx
+var import_jsx_runtime22 = require("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__ */ (0, import_jsx_runtime22.jsxs)(Marker, { className: cn(failed ? "text-destructive" : "text-panel-fg"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(MarkerIcon, { children: failed ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react5.TriangleAlert, {}) : done ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react5.Check, { className: "text-emerald-400" }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react5.Loader2, { className: "animate-spin" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(MarkerContent, { children: [
+      TOOL_LABELS[name] ?? name,
+      failed && tool.errorText ? `: ${tool.errorText}` : ""
+    ] })
+  ] });
+}
+function BusyMarker() {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Marker, { className: "text-panel-fg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(MarkerIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react5.Loader2, { className: "animate-spin" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(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__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "space-y-1 rounded-lg border border-panel-border bg-panel-elevated/60 p-2", children: [
+    finished.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Collapsible, { defaultOpen: true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(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__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react5.ChevronRight, { className: "size-3.5 shrink-0 transition-transform group-data-[state=open]/col:rotate-90" }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: failedCount > 0 ? `Completed steps (${finished.length}, ${failedCount} failed)` : `Completed steps (${finished.length})` })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CollapsibleContent, { className: "mt-1 space-y-0.5 pl-1", children: finished.map((t, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ToolMarker, { tool: t }, `f${i}`)) })
+    ] }),
+    running.map((t, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ToolMarker, { tool: t }, `r${i}`))
+  ] });
+}
+function ChatPanel({
+  docId,
+  onBeforeSend,
+  onAgentFinish,
+  onLiveUpdate,
+  onSectionEditStart,
+  onSectionEditEnd
+}) {
+  const [input, setInput] = (0, import_react5.useState)("");
+  const taRef = (0, import_react5.useRef)(null);
+  const times = (0, import_react5.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 } = (0, import_react4.useChat)({
+    transport: new import_ai.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);
+      import_sonner2.toast.error("Agent chat error.");
+    }
+  });
+  const firedTools = (0, import_react5.useRef)(/* @__PURE__ */ new Set());
+  const highlightStarted = (0, import_react5.useRef)(/* @__PURE__ */ new Map());
+  const highlightEnded = (0, import_react5.useRef)(/* @__PURE__ */ new Set());
+  (0, import_react5.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(MessageScrollerProvider, { autoScroll: true, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(MessageScroller, { className: "flex-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(MessageScrollerViewport, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(MessageScrollerContent, { className: "p-3", children: [
+        messages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Empty, { className: "h-full", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(EmptyHeader, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(EmptyMedia, { variant: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react5.MessageSquare, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(EmptyTitle, { children: "Start a conversation with the agent" }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(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__ */ (0, import_jsx_runtime22.jsx)(MessageScrollerItem, { messageId: message.id, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cn("flex w-full gap-2", isUser && "flex-row-reverse"), children: [
+            !isUser && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-full bg-brand/15 text-brand", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react5.Sparkles, { className: "size-3.5" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+              "div",
+              {
+                className: cn(
+                  "flex min-w-0 flex-1 flex-col gap-1",
+                  isUser ? "items-end" : "items-start"
+                ),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Message, { align: isUser ? "end" : "start", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(MessageContent, { children: [
+                    toolParts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ToolActivity, { tools: toolParts }),
+                    textParts.map((part, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                      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__ */ (0, import_jsx_runtime22.jsx)(
+                          BubbleContent,
+                          {
+                            className: isUser ? "whitespace-pre-wrap" : void 0,
+                            children: isUser && part.type === "text" ? part.text : part.type === "text" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Markdown, { children: part.text }) : null
+                          }
+                        )
+                      },
+                      i
+                    )),
+                    isLast && !isUser && busy && !toolRunning && textParts.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(BusyMarker, {})
+                  ] }) }),
+                  (textParts.length > 0 || toolParts.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "px-1 text-[10px] text-panel-muted-fg", children: timeFor(message.id) })
+                ]
+              }
+            )
+          ] }) }, message.id);
+        }),
+        busy && !toolRunning && lastMsg?.role !== "assistant" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(BusyMarker, {})
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(MessageScrollerButton, { direction: "end" })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "border-t border-panel-border p-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+        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__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react5.Sparkles, {}),
+            " Apply changes from comments"
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+        "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__ */ (0, import_jsx_runtime22.jsx)(
+              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__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center justify-end gap-2 px-2 pb-2", children: [
+              busy && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+                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__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react5.Square, {}),
+                    " Stop"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+                Button,
+                {
+                  type: "submit",
+                  size: "sm",
+                  disabled: busy || !input.trim(),
+                  className: "bg-brand text-brand-fg hover:bg-brand/90",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react5.Send, {}),
+                    " Send"
+                  ]
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/comments/CanvasComments.tsx
+var import_react6 = require("@grapesjs/react");
+var import_react7 = require("react");
+var import_lucide_react6 = require("lucide-react");
+var import_jsx_runtime23 = 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_react6.useEditorMaybe)();
+  const containerRef = (0, import_react7.useRef)(null);
+  const [comments, setComments] = (0, import_react7.useState)([]);
+  const [positions, setPositions] = (0, import_react7.useState)({});
+  const [activeKey, setActiveKey] = (0, import_react7.useState)(null);
+  const [composeInfo, setComposeInfo] = (0, import_react7.useState)(null);
+  const [body, setBody] = (0, import_react7.useState)("");
+  const reload = (0, import_react7.useCallback)(() => {
+    commentStore.list(docId).then(setComments).catch(console.error);
+  }, [docId]);
+  (0, import_react7.useEffect)(() => {
+    reload();
+  }, [reload, refreshSignal]);
+  const open = (0, import_react7.useMemo)(() => comments.filter((c) => c.status === "open"), [comments]);
+  (0, import_react7.useEffect)(() => {
+    onOpenCountChange(open.length);
+  }, [open.length, onOpenCountChange]);
+  const pins = (0, import_react7.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_react7.useRef)(open);
+  openRef.current = open;
+  const activeRef = (0, import_react7.useRef)(activeKey);
+  activeRef.current = activeKey;
+  const positionsRef = (0, import_react7.useRef)({});
+  const recompute = (0, import_react7.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_react7.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_react7.useEffect)(() => {
+    recompute();
+  }, [comments, activeKey, recompute]);
+  (0, import_react7.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_react7.useRef)({ top: 0, left: 0 });
+  if (activePos) lastAnchorPos.current = activePos;
+  const anchorPos = activePos ?? lastAnchorPos.current;
+  const closePopover = (0, import_react7.useCallback)(() => {
+    setActiveKey(null);
+    setBody("");
+    if (composeInfo) {
+      setComposeInfo(null);
+      onComposeConsumed();
+    }
+  }, [composeInfo, onComposeConsumed]);
+  (0, import_react7.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_runtime23.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_runtime23.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_runtime23.jsxs)(Popover, { open: !!activeKey && !!activePos, onOpenChange: (o) => !o && closePopover(), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            top: anchorPos.top,
+            left: anchorPos.left,
+            width: 1,
+            height: 1
+          }
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.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_runtime23.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_runtime23.jsx)("span", { className: "min-w-0", children: activeTarget?.objectId ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+                "Comment on",
+                " ",
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "font-medium text-foreground", children: activeTarget.objectLabel })
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+                "Comment on the whole section",
+                " ",
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("code", { className: "font-mono", children: activeTarget?.sectionId })
+              ] }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.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_runtime23.jsx)(import_lucide_react6.X, { className: "size-4" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "max-h-64 space-y-2 overflow-y-auto p-3", children: [
+              activeComments.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-xs text-muted-foreground", children: "No comments yet \u2014 add the first one." }),
+              activeComments.map((c) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "rounded-md border bg-muted/40 p-2 text-sm", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "whitespace-pre-wrap", children: c.body }),
+                /* @__PURE__ */ (0, import_jsx_runtime23.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_runtime23.jsx)(import_lucide_react6.Check, { className: "size-3" }),
+                      " Resolve"
+                    ]
+                  }
+                )
+              ] }, c.id))
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "border-t p-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.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_runtime23.jsx)("div", { className: "mt-2 flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Button, { size: "sm", disabled: !body.trim(), onClick: () => void submit(), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react6.MessageSquarePlus, {}),
+                " Add"
+              ] }) })
+            ] })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CanvasComments,
+  ChatPanel,
+  EditorHeader,
+  EditorStoreProvider,
+  Markdown,
+  STARTER_MJML,
+  useCommentStore,
+  useDocumentStore
+});
+//# sourceMappingURL=index.cjs.map