@contentgrowth/content-emailing 0.5.0 → 0.6.1

package/dist/index.cjs

@@ -506,7 +506,6 @@ function createDOCacheProvider(doStub, instanceName = "global") {
         const data = await response.json();
         return data.template || null;
       } catch (e) {
-        console.warn("[DOCacheProvider] Failed to get template:", e);
         return null;
       }
     },
@@ -579,7 +578,6 @@ var EmailService = class {
    * @param {Object} [cacheProvider] - Optional cache interface (DO stub or KV wrapper)
    */
   constructor(env, config = {}, cacheProvider = null) {
-    var _a, _b, _c;
     this.env = env;
     this.db = env.DB;
     this.config = {
@@ -597,9 +595,9 @@ var EmailService = class {
       settingsUpdater: config.settingsUpdater || null,
       // Branding configuration for email templates
       branding: {
-        brandName: ((_a = config.branding) == null ? void 0 : _a.brandName) || "Your App",
-        portalUrl: ((_b = config.branding) == null ? void 0 : _b.portalUrl) || "https://app.example.com",
-        primaryColor: ((_c = config.branding) == null ? void 0 : _c.primaryColor) || "#667eea",
+        brandName: config.branding?.brandName || "Your App",
+        portalUrl: config.branding?.portalUrl || "https://app.example.com",
+        primaryColor: config.branding?.primaryColor || "#667eea",
         ...config.branding
       },
       ...config
@@ -774,8 +772,14 @@ var EmailService = class {
     const template = await this.getTemplate(templateId);
     if (!template) throw new Error(`Template not found: ${templateId}`);
     const subject = import_mustache.default.render(template.subject_template, data);
-    const markdown = import_mustache.default.render(template.body_markdown, data);
-    import_marked.marked.use({ mangle: false, headerIds: false });
+    let markdown = import_mustache.default.render(template.body_markdown, data);
+    markdown = markdown.replace(/\\n/g, "\n");
+    import_marked.marked.use({
+      mangle: false,
+      headerIds: false,
+      breaks: true
+      // Convert single line breaks to <br>
+    });
     const htmlContent = import_marked.marked.parse(markdown);
     const html = this.wrapInBaseTemplate(htmlContent, subject, data);
     const plainText = markdown.replace(/<[^>]*>/g, "");
@@ -791,6 +795,32 @@ var EmailService = class {
     return wrapInEmailTemplate(content, subject, templateData);
   }
   // --- Delivery ---
+  /**
+   * Send an email using a template
+   * @param {string} templateId - Template ID
+   * @param {Object} data - Template variables
+   * @param {Object} options - Sending options (to, provider, etc.)
+   * @returns {Promise<Object>} Delivery result
+   */
+  async sendViaTemplate(templateId, data, options) {
+    try {
+      const { subject, html, plainText } = await this.renderTemplate(templateId, data);
+      return await this.sendEmail({
+        ...options,
+        subject,
+        // Can be overridden by options.subject if needed, but usually template subject is preferred
+        html,
+        text: plainText,
+        metadata: {
+          ...options.metadata,
+          templateId
+        }
+      });
+    } catch (error) {
+      console.error(`[EmailService] sendViaTemplate failed for ${templateId}:`, error);
+      return { success: false, error: error.message };
+    }
+  }
   /**
    * Send a single email
    * @param {Object} params - Email parameters
@@ -874,7 +904,7 @@ var EmailService = class {
         return true;
       } else {
         const contentType = response.headers.get("content-type");
-        const errorBody = (contentType == null ? void 0 : contentType.includes("application/json")) ? await response.json() : await response.text();
+        const errorBody = contentType?.includes("application/json") ? await response.json() : await response.text();
         console.error("[EmailService] MailChannels error:", response.status, errorBody);
         return false;
       }
@@ -988,7 +1018,12 @@ var EmailService = class {
       const { access_token } = tokenData;
       const toBase64 = (str) => {
         if (!str) return "";
-        return Buffer.from(String(str)).toString("base64");
+        try {
+          return btoa(unescape(encodeURIComponent(String(str))));
+        } catch (e) {
+          console.error("[EmailService] Base64 encoding failed:", e);
+          return "";
+        }
       };
       const htmlSafe = html || "";
       const textSafe = text || (htmlSafe ? htmlSafe.replace(/<[^>]*>/g, "") : "");
@@ -1340,182 +1375,478 @@ function extractVariables(templateString) {
   }
 }
 
-// src/frontend/TemplateManager.jsx
-var import_react2 = __toESM(require("react"), 1);
-var import_lucide_react2 = require("lucide-react");
+// src/frontend/TemplateManager.tsx
+var import_react3 = __toESM(require("react"), 1);
+var import_marked3 = require("marked");
 
-// src/frontend/TemplateEditor.jsx
+// src/frontend/TemplateEditor.tsx
 var import_react = __toESM(require("react"), 1);
-var import_lucide_react = require("lucide-react");
+var import_marked2 = require("marked");
+var DEFAULT_TYPES = ["notification", "auth", "marketing", "system", "invitation", "verification"];
+var normalizeNewlines = (text) => {
+  return text.replace(/\\n/g, "\n");
+};
 var TemplateEditor = ({
   initialData,
   onSave,
   onCancel,
-  onPreview,
-  variablesHelpText = "Supports {{variable}}"
+  templateTypes = DEFAULT_TYPES,
+  saving = false
 }) => {
+  const [activeTab, setActiveTab] = (0, import_react.useState)("basic");
+  const [showPreview, setShowPreview] = (0, import_react.useState)(false);
   const [formData, setFormData] = (0, import_react.useState)({
-    template_id: "",
-    template_name: "",
-    template_type: "daily_reminder",
-    subject_template: "",
-    body_markdown: "",
-    variables: "[]",
-    description: "",
-    is_active: 1,
-    ...initialData
+    template_id: initialData?.template_id || "",
+    template_name: initialData?.template_name || "",
+    template_type: initialData?.template_type || "notification",
+    subject_template: initialData?.subject_template || "",
+    // Normalize newlines when loading
+    body_markdown: normalizeNewlines(initialData?.body_markdown || ""),
+    description: initialData?.description || "",
+    is_active: initialData?.is_active ?? true
   });
-  const handleSubmit = (e) => {
+  const handleSubmit = async (e) => {
     e.preventDefault();
-    onSave(formData);
+    await onSave(formData);
   };
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "bg-white rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] overflow-hidden flex flex-col" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "p-6 border-b border-gray-200 flex justify-between items-center" }, /* @__PURE__ */ import_react.default.createElement("h2", { className: "text-xl font-bold text-gray-900" }, initialData ? "Edit Template" : "New Template"), /* @__PURE__ */ import_react.default.createElement("button", { onClick: onCancel, className: "p-2 hover:bg-gray-100 rounded-lg" }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.X, { className: "h-5 w-5" }))), /* @__PURE__ */ import_react.default.createElement("form", { onSubmit: handleSubmit, className: "flex-1 overflow-y-auto p-6 space-y-4" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "grid grid-cols-2 gap-4" }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "Template ID *"), /* @__PURE__ */ import_react.default.createElement(
-    "input",
+  const isEdit = !!initialData?.template_id;
+  const renderedPreview = (0, import_react.useMemo)(() => {
+    let preview = formData.body_markdown;
+    preview = preview.replace(/\{\{(\w+)\}\}/g, '<span class="bg-blue-100 text-blue-800 px-1 rounded text-sm">{{$1}}</span>');
+    return import_marked2.marked.parse(preview);
+  }, [formData.body_markdown]);
+  const subjectPreview = (0, import_react.useMemo)(() => {
+    return formData.subject_template.replace(/\{\{(\w+)\}\}/g, '<span class="bg-blue-100 text-blue-800 px-1 rounded">{{$1}}</span>');
+  }, [formData.subject_template]);
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "bg-white rounded-xl shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-hidden flex flex-col" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "px-6 py-4 border-b border-gray-200 flex items-center justify-between bg-gray-50" }, /* @__PURE__ */ import_react.default.createElement("h2", { className: "text-lg font-semibold text-gray-900" }, isEdit ? "Edit Template" : "Create New Template"), /* @__PURE__ */ import_react.default.createElement("button", { onClick: onCancel, className: "text-gray-400 hover:text-gray-600" }, /* @__PURE__ */ import_react.default.createElement("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ import_react.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" })))), /* @__PURE__ */ import_react.default.createElement("div", { className: "border-b border-gray-200 px-6" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "flex gap-4" }, /* @__PURE__ */ import_react.default.createElement(
+    "button",
     {
-      type: "text",
-      required: true,
-      disabled: !!initialData,
-      value: formData.template_id,
-      onChange: (e) => setFormData({ ...formData, template_id: e.target.value }),
-      className: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100"
-    }
-  )), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "Name *"), /* @__PURE__ */ import_react.default.createElement(
+      type: "button",
+      onClick: () => setActiveTab("basic"),
+      className: `py-3 px-1 border-b-2 text-sm font-medium transition-colors ${activeTab === "basic" ? "border-blue-600 text-blue-600" : "border-transparent text-gray-500 hover:text-gray-700"}`
+    },
+    "\u{1F4CB} Basic Info"
+  ), /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => setActiveTab("content"),
+      className: `py-3 px-1 border-b-2 text-sm font-medium transition-colors ${activeTab === "content" ? "border-blue-600 text-blue-600" : "border-transparent text-gray-500 hover:text-gray-700"}`
+    },
+    "\u2709\uFE0F Email Content"
+  ))), /* @__PURE__ */ import_react.default.createElement("form", { onSubmit: handleSubmit, className: "flex-1 overflow-y-auto" }, activeTab === "basic" && /* @__PURE__ */ import_react.default.createElement("div", { className: "p-6 space-y-4" }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "Template Name *"), /* @__PURE__ */ import_react.default.createElement(
     "input",
     {
       type: "text",
       required: true,
       value: formData.template_name,
       onChange: (e) => setFormData({ ...formData, template_name: e.target.value }),
-      className: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+      className: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
+      placeholder: "e.g., Welcome Email"
     }
-  ))), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "Subject *"), /* @__PURE__ */ import_react.default.createElement(
+  )), /* @__PURE__ */ import_react.default.createElement("div", { className: "grid grid-cols-2 gap-4" }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "Type *"), /* @__PURE__ */ import_react.default.createElement(
+    "select",
+    {
+      value: formData.template_type,
+      onChange: (e) => setFormData({ ...formData, template_type: e.target.value }),
+      className: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+    },
+    templateTypes.map((type) => /* @__PURE__ */ import_react.default.createElement("option", { key: type, value: type }, type.charAt(0).toUpperCase() + type.slice(1)))
+  )), /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-center pt-6" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "flex items-center cursor-pointer" }, /* @__PURE__ */ import_react.default.createElement(
+    "input",
+    {
+      type: "checkbox",
+      checked: formData.is_active,
+      onChange: (e) => setFormData({ ...formData, is_active: e.target.checked }),
+      className: "w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
+    }
+  ), /* @__PURE__ */ import_react.default.createElement("span", { className: "ml-2 text-sm text-gray-700" }, "Active")))), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "Description"), /* @__PURE__ */ import_react.default.createElement(
+    "textarea",
+    {
+      value: formData.description,
+      onChange: (e) => setFormData({ ...formData, description: e.target.value }),
+      rows: 3,
+      className: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
+      placeholder: "Brief description of when this template is used"
+    }
+  )), /* @__PURE__ */ import_react.default.createElement("div", { className: "pt-4 border-t border-gray-200" }, /* @__PURE__ */ import_react.default.createElement("p", { className: "text-sm text-gray-500" }, "\u{1F4A1} ", /* @__PURE__ */ import_react.default.createElement("strong", null, "Tip:"), ' Use the "Email Content" tab to write your subject line and email body.'))), activeTab === "content" && /* @__PURE__ */ import_react.default.createElement("div", { className: "p-6 space-y-4" }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "Subject Line *"), /* @__PURE__ */ import_react.default.createElement(
     "input",
     {
       type: "text",
       required: true,
       value: formData.subject_template,
       onChange: (e) => setFormData({ ...formData, subject_template: e.target.value }),
-      className: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+      className: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 font-mono text-sm",
+      placeholder: "e.g., Welcome to {{app_name}}, {{user_name}}!"
     }
-  ), /* @__PURE__ */ import_react.default.createElement("p", { className: "text-xs text-gray-500 mt-1" }, variablesHelpText)), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "Body (Markdown) *"), /* @__PURE__ */ import_react.default.createElement(
+  ), formData.subject_template && /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-2 text-sm text-gray-600" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "text-gray-500" }, "Preview: "), /* @__PURE__ */ import_react.default.createElement("span", { dangerouslySetInnerHTML: { __html: subjectPreview } }))), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-center justify-between mb-2" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "block text-sm font-medium text-gray-700" }, "Email Body (Markdown) *"), /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => setShowPreview(!showPreview),
+      className: `px-3 py-1 text-xs font-medium rounded-full transition-colors ${showPreview ? "bg-blue-600 text-white" : "bg-gray-200 text-gray-700 hover:bg-gray-300"}`
+    },
+    showPreview ? "\u270F\uFE0F Edit" : "\u{1F441}\uFE0F Preview"
+  )), !showPreview ? /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
     "textarea",
     {
       required: true,
-      rows: 12,
       value: formData.body_markdown,
       onChange: (e) => setFormData({ ...formData, body_markdown: e.target.value }),
-      className: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 font-mono text-sm"
+      rows: 14,
+      className: "w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 font-mono text-sm",
+      placeholder: "# Welcome, {{user_name}}!\n\nThank you for signing up for **{{app_name}}**.\n\nWe're excited to have you on board!\n\n---\n\nBest regards,\nThe Team"
     }
-  )), /* @__PURE__ */ import_react.default.createElement("div", { className: "flex justify-between pt-4" }, /* @__PURE__ */ import_react.default.createElement(
+  ), /* @__PURE__ */ import_react.default.createElement("p", { className: "mt-1 text-xs text-gray-500" }, "Use ", "{{variable}}", " for dynamic content. Supports Markdown formatting.")) : /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: "w-full min-h-[350px] p-4 border border-blue-200 rounded-lg bg-blue-50 prose prose-sm max-w-none overflow-y-auto",
+      dangerouslySetInnerHTML: { __html: renderedPreview || '<p class="text-gray-400">No content to preview</p>' }
+    }
+  )))), /* @__PURE__ */ import_react.default.createElement("div", { className: "px-6 py-4 border-t border-gray-200 flex justify-between items-center bg-gray-50" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "text-sm text-gray-500" }, activeTab === "basic" && "Step 1 of 2", activeTab === "content" && "Step 2 of 2"), /* @__PURE__ */ import_react.default.createElement("div", { className: "flex gap-3" }, /* @__PURE__ */ import_react.default.createElement(
     "button",
     {
       type: "button",
-      onClick: () => onPreview && onPreview(formData),
-      className: "flex items-center gap-2 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200"
+      onClick: onCancel,
+      className: "px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 border border-gray-300 rounded-lg hover:bg-gray-100"
     },
-    /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Eye, { className: "h-4 w-4" }),
-    " Preview"
-  ), /* @__PURE__ */ import_react.default.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ import_react.default.createElement(
+    "Cancel"
+  ), /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      type: "submit",
+      onClick: handleSubmit,
+      disabled: saving || !formData.template_name || !formData.subject_template || !formData.body_markdown,
+      className: "px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
+    },
+    saving ? "Saving..." : isEdit ? "Save Changes" : "Create Template"
+  )))));
+};
+
+// src/frontend/TemplateTester.tsx
+var import_react2 = __toESM(require("react"), 1);
+var TemplateTester = ({
+  template,
+  onSendTest,
+  onCancel,
+  sending = false
+}) => {
+  const [toEmail, setToEmail] = (0, import_react2.useState)("");
+  const [variables, setVariables] = (0, import_react2.useState)({});
+  const [detectedVariables, setDetectedVariables] = (0, import_react2.useState)([]);
+  const [error, setError] = (0, import_react2.useState)(null);
+  const [success, setSuccess] = (0, import_react2.useState)(null);
+  (0, import_react2.useEffect)(() => {
+    const regex = /\{\{(\w+)\}\}/g;
+    const subjectVars = Array.from(template.subject_template.matchAll(regex)).map((m) => m[1]);
+    const bodyVars = Array.from(template.body_markdown.matchAll(regex)).map((m) => m[1]);
+    const uniqueVars = Array.from(/* @__PURE__ */ new Set([...subjectVars, ...bodyVars]));
+    setDetectedVariables(uniqueVars);
+    const initialValues = {};
+    uniqueVars.forEach((v) => {
+      initialValues[v] = "";
+    });
+    setVariables(initialValues);
+  }, [template]);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError(null);
+    setSuccess(null);
+    try {
+      await onSendTest({
+        template_id: template.template_id,
+        to_email: toEmail,
+        variables
+      });
+      setSuccess("Test email sent successfully!");
+    } catch (e2) {
+      setError(e2.message || "Failed to send test email");
+    }
+  };
+  return /* @__PURE__ */ import_react2.default.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4" }, /* @__PURE__ */ import_react2.default.createElement("div", { className: "bg-white rounded-xl shadow-2xl max-w-lg w-full overflow-hidden flex flex-col max-h-[90vh]" }, /* @__PURE__ */ import_react2.default.createElement("div", { className: "px-6 py-4 border-b border-gray-200 flex items-center justify-between bg-gray-50" }, /* @__PURE__ */ import_react2.default.createElement("h2", { className: "text-lg font-semibold text-gray-900" }, "Test Template: ", template.template_name), /* @__PURE__ */ import_react2.default.createElement("button", { onClick: onCancel, className: "text-gray-400 hover:text-gray-600" }, /* @__PURE__ */ import_react2.default.createElement("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ import_react2.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" })))), /* @__PURE__ */ import_react2.default.createElement("form", { onSubmit: handleSubmit, className: "flex-1 overflow-y-auto p-6 space-y-4" }, error && /* @__PURE__ */ import_react2.default.createElement("div", { className: "p-3 rounded-md text-sm bg-red-50 text-red-800 border border-red-200" }, error), success && /* @__PURE__ */ import_react2.default.createElement("div", { className: "p-3 rounded-md text-sm bg-green-50 text-green-800 border border-green-200" }, success), /* @__PURE__ */ import_react2.default.createElement("div", null, /* @__PURE__ */ import_react2.default.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "To Email *"), /* @__PURE__ */ import_react2.default.createElement(
+    "input",
+    {
+      type: "email",
+      required: true,
+      value: toEmail,
+      onChange: (e) => setToEmail(e.target.value),
+      className: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
+      placeholder: "recipient@example.com"
+    }
+  )), detectedVariables.length > 0 && /* @__PURE__ */ import_react2.default.createElement("div", { className: "pt-2" }, /* @__PURE__ */ import_react2.default.createElement("h3", { className: "text-sm font-medium text-gray-900 mb-3 pb-2 border-b border-gray-100" }, "Template Variables"), /* @__PURE__ */ import_react2.default.createElement("div", { className: "space-y-3" }, detectedVariables.map((variable) => /* @__PURE__ */ import_react2.default.createElement("div", { key: variable }, /* @__PURE__ */ import_react2.default.createElement("label", { className: "block text-xs font-medium text-gray-500 uppercase mb-1" }, variable), /* @__PURE__ */ import_react2.default.createElement(
+    "input",
+    {
+      type: "text",
+      value: variables[variable] || "",
+      onChange: (e) => setVariables({ ...variables, [variable]: e.target.value }),
+      className: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm",
+      placeholder: `Value for {{${variable}}}`
+    }
+  ))))), detectedVariables.length === 0 && /* @__PURE__ */ import_react2.default.createElement("p", { className: "text-sm text-gray-500 italic" }, "No variables detected in this template.")), /* @__PURE__ */ import_react2.default.createElement("div", { className: "px-6 py-4 border-t border-gray-200 flex justify-end gap-3 bg-gray-50" }, /* @__PURE__ */ import_react2.default.createElement(
     "button",
     {
       type: "button",
       onClick: onCancel,
-      className: "px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50"
+      className: "px-4 py-2 text-sm font-medium text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-100"
     },
-    "Cancel"
-  ), /* @__PURE__ */ import_react.default.createElement(
+    "Close"
+  ), /* @__PURE__ */ import_react2.default.createElement(
     "button",
     {
       type: "submit",
-      className: "flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
+      onClick: handleSubmit,
+      disabled: sending || !toEmail || success != null,
+      className: "px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
     },
-    /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Save, { className: "h-4 w-4" }),
-    " Save"
-  ))))));
+    sending ? /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement("div", { className: "animate-spin rounded-full h-4 w-4 border-2 border-white border-t-transparent" }), "Sending...") : /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ import_react2.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 19l9 2-9-18-9 18 9-2zm0 0v-8" })), "Send Test Email")
+  ))));
 };
 
-// src/frontend/TemplateManager.jsx
+// src/frontend/TemplateManager.tsx
+var TYPE_COLORS = {
+  "auth": { bg: "bg-blue-100", text: "text-blue-800" },
+  "notification": { bg: "bg-purple-100", text: "text-purple-800" },
+  "marketing": { bg: "bg-green-100", text: "text-green-800" },
+  "system": { bg: "bg-gray-100", text: "text-gray-800" },
+  "invitation": { bg: "bg-orange-100", text: "text-orange-800" },
+  "verification": { bg: "bg-cyan-100", text: "text-cyan-800" },
+  "default": { bg: "bg-gray-100", text: "text-gray-600" }
+};
+var normalizeNewlines2 = (text) => {
+  return text?.replace(/\\n/g, "\n") || "";
+};
 var TemplateManager = ({
-  apiClient,
+  onLoadTemplates,
+  onSaveTemplate,
+  onDeleteTemplate,
+  onSendTestEmail,
   title = "Email Templates",
-  description = "Manage your email templates"
+  description = "Manage system email templates",
+  templateTypes
 }) => {
-  const [templates, setTemplates] = (0, import_react2.useState)([]);
-  const [loading, setLoading] = (0, import_react2.useState)(true);
-  const [showEditor, setShowEditor] = (0, import_react2.useState)(false);
-  const [editingTemplate, setEditingTemplate] = (0, import_react2.useState)(null);
-  (0, import_react2.useEffect)(() => {
-    loadTemplates();
-  }, []);
-  const loadTemplates = async () => {
+  const [templates, setTemplates] = (0, import_react3.useState)([]);
+  const [loading, setLoading] = (0, import_react3.useState)(true);
+  const [error, setError] = (0, import_react3.useState)(null);
+  const [filterType, setFilterType] = (0, import_react3.useState)("all");
+  const [previewTemplate, setPreviewTemplate] = (0, import_react3.useState)(null);
+  const [editingTemplate, setEditingTemplate] = (0, import_react3.useState)(null);
+  const [testingTemplate, setTestingTemplate] = (0, import_react3.useState)(null);
+  const [showEditor, setShowEditor] = (0, import_react3.useState)(false);
+  const [showTester, setShowTester] = (0, import_react3.useState)(false);
+  const [saving, setSaving] = (0, import_react3.useState)(false);
+  const [deleteConfirm, setDeleteConfirm] = (0, import_react3.useState)(null);
+  const loadTemplates = (0, import_react3.useCallback)(async () => {
+    setLoading(true);
+    setError(null);
     try {
-      setLoading(true);
-      const res = await apiClient.get("/templates");
-      if (res.data.success) {
-        setTemplates(res.data.templates);
-      }
-    } catch (err) {
-      console.error("Failed to load templates:", err);
+      const data = await onLoadTemplates();
+      setTemplates(data);
+    } catch (e) {
+      setError(e.message || "Failed to load templates");
     } finally {
       setLoading(false);
     }
+  }, [onLoadTemplates]);
+  (0, import_react3.useEffect)(() => {
+    loadTemplates();
+  }, [loadTemplates]);
+  const openCreate = () => {
+    setEditingTemplate(null);
+    setShowEditor(true);
+  };
+  const openPreview = (template) => {
+    setPreviewTemplate(template);
   };
-  const handleSave = async (formData) => {
+  const openEdit = (template) => {
+    setPreviewTemplate(null);
+    setEditingTemplate(template);
+    setShowEditor(true);
+  };
+  const openTester = (template) => {
+    setTestingTemplate(template);
+    setShowTester(true);
+  };
+  const handleSave = async (data) => {
+    setSaving(true);
     try {
-      await apiClient.post("/templates", formData);
+      await onSaveTemplate(data);
       setShowEditor(false);
-      loadTemplates();
-    } catch (err) {
-      console.error("Failed to save template:", err);
-      alert("Failed to save template");
+      await loadTemplates();
+    } catch (e) {
+      setSaving(false);
+      throw e;
     }
+    setSaving(false);
   };
   const handleDelete = async (id) => {
-    if (!confirm("Delete this template?")) return;
+    if (!onDeleteTemplate) return;
     try {
-      await apiClient.delete(`/templates/${id}`);
-      loadTemplates();
-    } catch (err) {
-      console.error("Failed to delete:", err);
-      alert("Failed to delete template");
+      await onDeleteTemplate(id);
+      setDeleteConfirm(null);
+      await loadTemplates();
+    } catch (e) {
+      setError(e.message || "Failed to delete template");
     }
   };
-  return /* @__PURE__ */ import_react2.default.createElement("div", { className: "email-template-manager" }, /* @__PURE__ */ import_react2.default.createElement("div", { className: "flex justify-between items-center mb-6" }, /* @__PURE__ */ import_react2.default.createElement("div", null, /* @__PURE__ */ import_react2.default.createElement("h1", { className: "text-2xl font-bold text-gray-900" }, title), /* @__PURE__ */ import_react2.default.createElement("p", { className: "text-gray-600 mt-1" }, description)), /* @__PURE__ */ import_react2.default.createElement(
+  const handleTest = async (data) => {
+    if (!onSendTestEmail) return;
+    setSaving(true);
+    try {
+      await onSendTestEmail(data);
+    } finally {
+      setSaving(false);
+    }
+  };
+  const getTypeColor = (type) => TYPE_COLORS[type] || TYPE_COLORS["default"];
+  const uniqueTypes = ["all", ...new Set(templates.map((t) => t.template_type))];
+  const filteredTemplates = filterType === "all" ? templates : templates.filter((t) => t.template_type === filterType);
+  const formatDate = (timestamp) => {
+    if (!timestamp) return "N/A";
+    return new Date(timestamp * 1e3).toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric"
+    });
+  };
+  const previewBody = (0, import_react3.useMemo)(() => {
+    if (!previewTemplate?.body_markdown) return "";
+    let md = normalizeNewlines2(previewTemplate.body_markdown);
+    md = md.replace(/\{\{(\w+)\}\}/g, '<span class="bg-blue-100 text-blue-800 px-1 rounded text-sm">{{$1}}</span>');
+    return import_marked3.marked.parse(md);
+  }, [previewTemplate]);
+  if (loading) {
+    return /* @__PURE__ */ import_react3.default.createElement("div", { className: "flex items-center justify-center h-64" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" }));
+  }
+  return /* @__PURE__ */ import_react3.default.createElement("div", { className: "template-manager" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "flex justify-between items-center mb-6" }, /* @__PURE__ */ import_react3.default.createElement("div", null, /* @__PURE__ */ import_react3.default.createElement("h1", { className: "text-2xl font-bold text-gray-900" }, title), /* @__PURE__ */ import_react3.default.createElement("p", { className: "text-sm text-gray-500 mt-1" }, description)), /* @__PURE__ */ import_react3.default.createElement(
     "button",
     {
-      onClick: () => {
-        setEditingTemplate(null);
-        setShowEditor(true);
-      },
-      className: "flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
+      onClick: openCreate,
+      className: "px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center gap-2 shadow-sm"
     },
-    /* @__PURE__ */ import_react2.default.createElement(import_lucide_react2.Plus, { className: "h-4 w-4" }),
-    " New Template"
-  )), loading ? /* @__PURE__ */ import_react2.default.createElement("div", { className: "flex justify-center p-12" }, /* @__PURE__ */ import_react2.default.createElement(import_lucide_react2.Loader, { className: "animate-spin text-gray-500" })) : /* @__PURE__ */ import_react2.default.createElement("div", { className: "grid gap-4" }, templates.map((t) => /* @__PURE__ */ import_react2.default.createElement("div", { key: t.template_id, className: "bg-white border rounded-lg p-6 flex justify-between items-start hover:shadow-md transition" }, /* @__PURE__ */ import_react2.default.createElement("div", null, /* @__PURE__ */ import_react2.default.createElement("div", { className: "flex items-center gap-3 mb-2" }, /* @__PURE__ */ import_react2.default.createElement(import_lucide_react2.Mail, { className: "h-5 w-5 text-blue-600" }), /* @__PURE__ */ import_react2.default.createElement("h3", { className: "text-lg font-semibold" }, t.template_name), /* @__PURE__ */ import_react2.default.createElement("span", { className: "px-2 py-1 text-xs bg-gray-100 rounded" }, t.template_type)), /* @__PURE__ */ import_react2.default.createElement("p", { className: "text-sm text-gray-600" }, t.description)), /* @__PURE__ */ import_react2.default.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ import_react2.default.createElement(
+    /* @__PURE__ */ import_react3.default.createElement("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ import_react3.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 4v16m8-8H4" })),
+    "Create Template"
+  )), error && /* @__PURE__ */ import_react3.default.createElement("div", { className: "mb-4 p-3 rounded-lg bg-red-50 text-red-800 border border-red-200" }, error, /* @__PURE__ */ import_react3.default.createElement("button", { onClick: () => setError(null), className: "ml-2 underline" }, "Dismiss")), /* @__PURE__ */ import_react3.default.createElement("div", { className: "grid grid-cols-4 gap-4 mb-6" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "bg-white rounded-lg border border-gray-200 p-4" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "text-2xl font-bold text-gray-900" }, templates.length), /* @__PURE__ */ import_react3.default.createElement("div", { className: "text-sm text-gray-500" }, "Total")), /* @__PURE__ */ import_react3.default.createElement("div", { className: "bg-white rounded-lg border border-gray-200 p-4" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "text-2xl font-bold text-green-600" }, templates.filter((t) => t.is_active).length), /* @__PURE__ */ import_react3.default.createElement("div", { className: "text-sm text-gray-500" }, "Active")), /* @__PURE__ */ import_react3.default.createElement("div", { className: "bg-white rounded-lg border border-gray-200 p-4" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "text-2xl font-bold text-yellow-600" }, templates.filter((t) => !t.is_active).length), /* @__PURE__ */ import_react3.default.createElement("div", { className: "text-sm text-gray-500" }, "Inactive")), /* @__PURE__ */ import_react3.default.createElement("div", { className: "bg-white rounded-lg border border-gray-200 p-4" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "text-2xl font-bold text-blue-600" }, new Set(templates.map((t) => t.template_type)).size), /* @__PURE__ */ import_react3.default.createElement("div", { className: "text-sm text-gray-500" }, "Types"))), /* @__PURE__ */ import_react3.default.createElement("div", { className: "flex gap-2 mb-6 border-b border-gray-200 pb-3 flex-wrap" }, uniqueTypes.map((type) => /* @__PURE__ */ import_react3.default.createElement(
     "button",
     {
-      onClick: () => {
-        setEditingTemplate(t);
-        setShowEditor(true);
+      key: type,
+      onClick: () => setFilterType(type),
+      className: `px-4 py-2 text-sm font-medium rounded-lg transition-colors ${filterType === type ? "bg-blue-600 text-white" : "bg-gray-100 text-gray-600 hover:bg-gray-200"}`
+    },
+    type.charAt(0).toUpperCase() + type.slice(1)
+  ))), filteredTemplates.length === 0 ? /* @__PURE__ */ import_react3.default.createElement("div", { className: "text-center py-16 bg-gray-50 rounded-lg border-2 border-dashed border-gray-200" }, /* @__PURE__ */ import_react3.default.createElement("svg", { className: "mx-auto h-12 w-12 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ import_react3.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" })), /* @__PURE__ */ import_react3.default.createElement("h3", { className: "mt-4 text-lg font-medium text-gray-900" }, "No templates found"), /* @__PURE__ */ import_react3.default.createElement("p", { className: "mt-2 text-sm text-gray-500" }, filterType === "all" ? "Create your first template." : `No "${filterType}" templates.`), /* @__PURE__ */ import_react3.default.createElement("button", { onClick: openCreate, className: "mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm" }, "Create Template")) : /* @__PURE__ */ import_react3.default.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" }, filteredTemplates.map((template) => {
+    const typeColor = getTypeColor(template.template_type);
+    return /* @__PURE__ */ import_react3.default.createElement(
+      "div",
+      {
+        key: template.template_id,
+        className: "bg-white rounded-lg border border-gray-200 hover:border-blue-300 hover:shadow-md transition-all cursor-pointer overflow-hidden flex flex-col h-full",
+        onClick: () => openPreview(template)
       },
-      className: "p-2 text-blue-600 hover:bg-blue-50 rounded"
+      /* @__PURE__ */ import_react3.default.createElement("div", { className: "p-5 flex-1 flex flex-col" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "flex items-start justify-between mb-3" }, /* @__PURE__ */ import_react3.default.createElement("span", { className: `px-2 py-1 text-xs font-medium rounded ${typeColor.bg} ${typeColor.text}` }, template.template_type), /* @__PURE__ */ import_react3.default.createElement("span", { className: `inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${template.is_active ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-600"}` }, template.is_active ? "\u25CF Active" : "\u25CB Inactive")), /* @__PURE__ */ import_react3.default.createElement("h3", { className: "font-semibold text-gray-900 mb-1" }, template.template_name), /* @__PURE__ */ import_react3.default.createElement("p", { className: "text-sm text-gray-500 flex-1 line-clamp-2" }, template.description || "No description"), /* @__PURE__ */ import_react3.default.createElement("div", { className: "text-xs text-gray-400 border-t border-gray-100 pt-3 mt-3 truncate" }, "\u{1F4E7} ", template.subject_template)),
+      /* @__PURE__ */ import_react3.default.createElement("div", { className: "bg-gray-50 px-5 py-3 flex justify-between items-center border-t border-gray-100" }, /* @__PURE__ */ import_react3.default.createElement("span", { className: "text-xs text-gray-500" }, formatDate(template.updated_at)), /* @__PURE__ */ import_react3.default.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ import_react3.default.createElement(
+        "button",
+        {
+          onClick: (e) => {
+            e.stopPropagation();
+            openEdit(template);
+          },
+          className: "p-1.5 text-blue-600 hover:bg-blue-50 rounded",
+          title: "Edit"
+        },
+        /* @__PURE__ */ import_react3.default.createElement("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ import_react3.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" }))
+      ), onSendTestEmail && /* @__PURE__ */ import_react3.default.createElement(
+        "button",
+        {
+          onClick: (e) => {
+            e.stopPropagation();
+            openTester(template);
+          },
+          className: "p-1.5 text-purple-600 hover:bg-purple-50 rounded",
+          title: "Send Test Email"
+        },
+        /* @__PURE__ */ import_react3.default.createElement("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ import_react3.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" }))
+      ), onDeleteTemplate && /* @__PURE__ */ import_react3.default.createElement(
+        "button",
+        {
+          onClick: (e) => {
+            e.stopPropagation();
+            setDeleteConfirm(template.template_id);
+          },
+          className: "p-1.5 text-red-600 hover:bg-red-50 rounded",
+          title: "Delete"
+        },
+        /* @__PURE__ */ import_react3.default.createElement("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ import_react3.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }))
+      )))
+    );
+  })), previewTemplate && /* @__PURE__ */ import_react3.default.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "bg-white rounded-xl shadow-2xl max-w-3xl w-full max-h-[90vh] overflow-hidden flex flex-col" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "px-6 py-4 border-b border-gray-200 flex items-center justify-between bg-gray-50" }, /* @__PURE__ */ import_react3.default.createElement("div", null, /* @__PURE__ */ import_react3.default.createElement("h2", { className: "text-lg font-semibold text-gray-900" }, previewTemplate.template_name), /* @__PURE__ */ import_react3.default.createElement("p", { className: "text-sm text-gray-500" }, previewTemplate.template_type, " \u2022 ", previewTemplate.is_active ? "Active" : "Inactive")), /* @__PURE__ */ import_react3.default.createElement("button", { onClick: () => setPreviewTemplate(null), className: "text-gray-400 hover:text-gray-600" }, /* @__PURE__ */ import_react3.default.createElement("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ import_react3.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" })))), /* @__PURE__ */ import_react3.default.createElement("div", { className: "flex-1 overflow-y-auto p-6 space-y-4" }, /* @__PURE__ */ import_react3.default.createElement("div", null, /* @__PURE__ */ import_react3.default.createElement("label", { className: "block text-xs font-medium text-gray-500 uppercase mb-1" }, "Subject"), /* @__PURE__ */ import_react3.default.createElement("div", { className: "p-3 bg-gray-50 rounded-lg border border-gray-200 font-mono text-sm" }, previewTemplate.subject_template)), /* @__PURE__ */ import_react3.default.createElement("div", null, /* @__PURE__ */ import_react3.default.createElement("label", { className: "block text-xs font-medium text-gray-500 uppercase mb-1" }, "Email Body"), /* @__PURE__ */ import_react3.default.createElement(
+    "div",
+    {
+      className: "p-4 bg-white rounded-lg border border-gray-200 prose prose-sm max-w-none",
+      dangerouslySetInnerHTML: { __html: previewBody }
+    }
+  )), previewTemplate.description && /* @__PURE__ */ import_react3.default.createElement("div", null, /* @__PURE__ */ import_react3.default.createElement("label", { className: "block text-xs font-medium text-gray-500 uppercase mb-1" }, "Description"), /* @__PURE__ */ import_react3.default.createElement("p", { className: "text-gray-600 text-sm" }, previewTemplate.description))), /* @__PURE__ */ import_react3.default.createElement("div", { className: "px-6 py-4 border-t border-gray-200 flex justify-end gap-3 bg-gray-50" }, /* @__PURE__ */ import_react3.default.createElement(
+    "button",
+    {
+      onClick: () => setPreviewTemplate(null),
+      className: "px-4 py-2 text-sm font-medium text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-100"
     },
-    /* @__PURE__ */ import_react2.default.createElement(import_lucide_react2.Edit2, { className: "h-4 w-4" })
-  ), /* @__PURE__ */ import_react2.default.createElement(
+    "Close"
+  ), /* @__PURE__ */ import_react3.default.createElement(
     "button",
     {
-      onClick: () => handleDelete(t.template_id),
-      className: "p-2 text-red-600 hover:bg-red-50 rounded"
+      onClick: () => openEdit(previewTemplate),
+      className: "px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 flex items-center gap-2"
     },
-    /* @__PURE__ */ import_react2.default.createElement(import_lucide_react2.Trash2, { className: "h-4 w-4" })
-  )))), templates.length === 0 && /* @__PURE__ */ import_react2.default.createElement("div", { className: "text-center py-12 text-gray-500 bg-gray-50 rounded border-dashed border-2" }, "No templates found. Create one to get started.")), showEditor && /* @__PURE__ */ import_react2.default.createElement(
+    /* @__PURE__ */ import_react3.default.createElement("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ import_react3.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" })),
+    "Edit Template"
+  ), onSendTestEmail && /* @__PURE__ */ import_react3.default.createElement(
+    "button",
+    {
+      onClick: () => openTester(previewTemplate),
+      className: "px-4 py-2 text-sm font-medium text-purple-700 bg-purple-100 rounded-lg hover:bg-purple-200 flex items-center gap-2"
+    },
+    /* @__PURE__ */ import_react3.default.createElement("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ import_react3.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" })),
+    "Test"
+  )))), showEditor && /* @__PURE__ */ import_react3.default.createElement(
     TemplateEditor,
     {
-      initialData: editingTemplate,
+      initialData: editingTemplate ? {
+        template_id: editingTemplate.template_id,
+        template_name: editingTemplate.template_name,
+        template_type: editingTemplate.template_type,
+        subject_template: editingTemplate.subject_template,
+        body_markdown: editingTemplate.body_markdown,
+        description: editingTemplate.description || "",
+        is_active: !!editingTemplate.is_active
+      } : null,
       onSave: handleSave,
-      onCancel: () => setShowEditor(false)
+      onCancel: () => setShowEditor(false),
+      templateTypes,
+      saving
+    }
+  ), showTester && testingTemplate && /* @__PURE__ */ import_react3.default.createElement(
+    TemplateTester,
+    {
+      template: testingTemplate,
+      onSendTest: handleTest,
+      onCancel: () => setShowTester(false),
+      sending: saving
     }
-  ));
+  ), deleteConfirm && /* @__PURE__ */ import_react3.default.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "bg-white rounded-lg shadow-xl max-w-sm w-full p-6" }, /* @__PURE__ */ import_react3.default.createElement("h3", { className: "text-lg font-semibold mb-2" }, "Delete Template?"), /* @__PURE__ */ import_react3.default.createElement("p", { className: "text-gray-600 mb-4" }, "This action cannot be undone."), /* @__PURE__ */ import_react3.default.createElement("div", { className: "flex justify-end gap-3" }, /* @__PURE__ */ import_react3.default.createElement(
+    "button",
+    {
+      onClick: () => setDeleteConfirm(null),
+      className: "px-4 py-2 border border-gray-300 rounded-lg"
+    },
+    "Cancel"
+  ), /* @__PURE__ */ import_react3.default.createElement(
+    "button",
+    {
+      onClick: () => handleDelete(deleteConfirm),
+      className: "px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700"
+    },
+    "Delete"
+  )))));
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {