@contentgrowth/content-emailing 0.5.0 → 0.6.0

package/dist/frontend/index.js

@@ -0,0 +1,626 @@
+// src/frontend/TemplateManager.tsx
+import React3, { useState as useState3, useEffect as useEffect2, useCallback, useMemo as useMemo2 } from "react";
+import { marked as marked2 } from "marked";
+
+// src/frontend/TemplateEditor.tsx
+import React, { useState, useMemo } from "react";
+import { marked } from "marked";
+var DEFAULT_TYPES = ["notification", "auth", "marketing", "system", "invitation", "verification"];
+var normalizeNewlines = (text) => {
+  return text.replace(/\\n/g, "\n");
+};
+var TemplateEditor = ({
+  initialData,
+  onSave,
+  onCancel,
+  templateTypes = DEFAULT_TYPES,
+  saving = false
+}) => {
+  const [activeTab, setActiveTab] = useState("basic");
+  const [showPreview, setShowPreview] = useState(false);
+  const [formData, setFormData] = useState({
+    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 = async (e) => {
+    e.preventDefault();
+    await onSave(formData);
+  };
+  const isEdit = !!initialData?.template_id;
+  const renderedPreview = 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 marked.parse(preview);
+  }, [formData.body_markdown]);
+  const subjectPreview = 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__ */ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4" }, /* @__PURE__ */ React.createElement("div", { className: "bg-white rounded-xl shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-hidden flex flex-col" }, /* @__PURE__ */ React.createElement("div", { className: "px-6 py-4 border-b border-gray-200 flex items-center justify-between bg-gray-50" }, /* @__PURE__ */ React.createElement("h2", { className: "text-lg font-semibold text-gray-900" }, isEdit ? "Edit Template" : "Create New Template"), /* @__PURE__ */ React.createElement("button", { onClick: onCancel, className: "text-gray-400 hover:text-gray-600" }, /* @__PURE__ */ React.createElement("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" })))), /* @__PURE__ */ React.createElement("div", { className: "border-b border-gray-200 px-6" }, /* @__PURE__ */ React.createElement("div", { className: "flex gap-4" }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      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__ */ React.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__ */ React.createElement("form", { onSubmit: handleSubmit, className: "flex-1 overflow-y-auto" }, activeTab === "basic" && /* @__PURE__ */ React.createElement("div", { className: "p-6 space-y-4" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "Template Name *"), /* @__PURE__ */ React.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 focus:border-blue-500",
+      placeholder: "e.g., Welcome Email"
+    }
+  )), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-2 gap-4" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "Type *"), /* @__PURE__ */ React.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__ */ React.createElement("option", { key: type, value: type }, type.charAt(0).toUpperCase() + type.slice(1)))
+  )), /* @__PURE__ */ React.createElement("div", { className: "flex items-center pt-6" }, /* @__PURE__ */ React.createElement("label", { className: "flex items-center cursor-pointer" }, /* @__PURE__ */ React.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__ */ React.createElement("span", { className: "ml-2 text-sm text-gray-700" }, "Active")))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "Description"), /* @__PURE__ */ React.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__ */ React.createElement("div", { className: "pt-4 border-t border-gray-200" }, /* @__PURE__ */ React.createElement("p", { className: "text-sm text-gray-500" }, "\u{1F4A1} ", /* @__PURE__ */ React.createElement("strong", null, "Tip:"), ' Use the "Email Content" tab to write your subject line and email body.'))), activeTab === "content" && /* @__PURE__ */ React.createElement("div", { className: "p-6 space-y-4" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "Subject Line *"), /* @__PURE__ */ React.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 focus:border-blue-500 font-mono text-sm",
+      placeholder: "e.g., Welcome to {{app_name}}, {{user_name}}!"
+    }
+  ), formData.subject_template && /* @__PURE__ */ React.createElement("div", { className: "mt-2 text-sm text-gray-600" }, /* @__PURE__ */ React.createElement("span", { className: "text-gray-500" }, "Preview: "), /* @__PURE__ */ React.createElement("span", { dangerouslySetInnerHTML: { __html: subjectPreview } }))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between mb-2" }, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-gray-700" }, "Email Body (Markdown) *"), /* @__PURE__ */ React.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__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    "textarea",
+    {
+      required: true,
+      value: formData.body_markdown,
+      onChange: (e) => setFormData({ ...formData, body_markdown: e.target.value }),
+      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__ */ React.createElement("p", { className: "mt-1 text-xs text-gray-500" }, "Use ", "{{variable}}", " for dynamic content. Supports Markdown formatting.")) : /* @__PURE__ */ React.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__ */ React.createElement("div", { className: "px-6 py-4 border-t border-gray-200 flex justify-between items-center bg-gray-50" }, /* @__PURE__ */ React.createElement("div", { className: "text-sm text-gray-500" }, activeTab === "basic" && "Step 1 of 2", activeTab === "content" && "Step 2 of 2"), /* @__PURE__ */ React.createElement("div", { className: "flex gap-3" }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      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"
+    },
+    "Cancel"
+  ), /* @__PURE__ */ React.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
+import React2, { useState as useState2, useEffect } from "react";
+var TemplateTester = ({
+  template,
+  onSendTest,
+  onCancel,
+  sending = false
+}) => {
+  const [toEmail, setToEmail] = useState2("");
+  const [variables, setVariables] = useState2({});
+  const [detectedVariables, setDetectedVariables] = useState2([]);
+  const [error, setError] = useState2(null);
+  const [success, setSuccess] = useState2(null);
+  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__ */ React2.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4" }, /* @__PURE__ */ React2.createElement("div", { className: "bg-white rounded-xl shadow-2xl max-w-lg w-full overflow-hidden flex flex-col max-h-[90vh]" }, /* @__PURE__ */ React2.createElement("div", { className: "px-6 py-4 border-b border-gray-200 flex items-center justify-between bg-gray-50" }, /* @__PURE__ */ React2.createElement("h2", { className: "text-lg font-semibold text-gray-900" }, "Test Template: ", template.template_name), /* @__PURE__ */ React2.createElement("button", { onClick: onCancel, className: "text-gray-400 hover:text-gray-600" }, /* @__PURE__ */ React2.createElement("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React2.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" })))), /* @__PURE__ */ React2.createElement("form", { onSubmit: handleSubmit, className: "flex-1 overflow-y-auto p-6 space-y-4" }, error && /* @__PURE__ */ React2.createElement("div", { className: "p-3 rounded-md text-sm bg-red-50 text-red-800 border border-red-200" }, error), success && /* @__PURE__ */ React2.createElement("div", { className: "p-3 rounded-md text-sm bg-green-50 text-green-800 border border-green-200" }, success), /* @__PURE__ */ React2.createElement("div", null, /* @__PURE__ */ React2.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "To Email *"), /* @__PURE__ */ React2.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__ */ React2.createElement("div", { className: "pt-2" }, /* @__PURE__ */ React2.createElement("h3", { className: "text-sm font-medium text-gray-900 mb-3 pb-2 border-b border-gray-100" }, "Template Variables"), /* @__PURE__ */ React2.createElement("div", { className: "space-y-3" }, detectedVariables.map((variable) => /* @__PURE__ */ React2.createElement("div", { key: variable }, /* @__PURE__ */ React2.createElement("label", { className: "block text-xs font-medium text-gray-500 uppercase mb-1" }, variable), /* @__PURE__ */ React2.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__ */ React2.createElement("p", { className: "text-sm text-gray-500 italic" }, "No variables detected in this template.")), /* @__PURE__ */ React2.createElement("div", { className: "px-6 py-4 border-t border-gray-200 flex justify-end gap-3 bg-gray-50" }, /* @__PURE__ */ React2.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: onCancel,
+      className: "px-4 py-2 text-sm font-medium text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-100"
+    },
+    "Close"
+  ), /* @__PURE__ */ React2.createElement(
+    "button",
+    {
+      type: "submit",
+      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"
+    },
+    sending ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("div", { className: "animate-spin rounded-full h-4 w-4 border-2 border-white border-t-transparent" }), "Sending...") : /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React2.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.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 = ({
+  onLoadTemplates,
+  onSaveTemplate,
+  onDeleteTemplate,
+  onSendTestEmail,
+  title = "Email Templates",
+  description = "Manage system email templates",
+  templateTypes
+}) => {
+  const [templates, setTemplates] = useState3([]);
+  const [loading, setLoading] = useState3(true);
+  const [error, setError] = useState3(null);
+  const [filterType, setFilterType] = useState3("all");
+  const [previewTemplate, setPreviewTemplate] = useState3(null);
+  const [editingTemplate, setEditingTemplate] = useState3(null);
+  const [testingTemplate, setTestingTemplate] = useState3(null);
+  const [showEditor, setShowEditor] = useState3(false);
+  const [showTester, setShowTester] = useState3(false);
+  const [saving, setSaving] = useState3(false);
+  const [deleteConfirm, setDeleteConfirm] = useState3(null);
+  const loadTemplates = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await onLoadTemplates();
+      setTemplates(data);
+    } catch (e) {
+      setError(e.message || "Failed to load templates");
+    } finally {
+      setLoading(false);
+    }
+  }, [onLoadTemplates]);
+  useEffect2(() => {
+    loadTemplates();
+  }, [loadTemplates]);
+  const openCreate = () => {
+    setEditingTemplate(null);
+    setShowEditor(true);
+  };
+  const openPreview = (template) => {
+    setPreviewTemplate(template);
+  };
+  const openEdit = (template) => {
+    setPreviewTemplate(null);
+    setEditingTemplate(template);
+    setShowEditor(true);
+  };
+  const openTester = (template) => {
+    setTestingTemplate(template);
+    setShowTester(true);
+  };
+  const handleSave = async (data) => {
+    setSaving(true);
+    try {
+      await onSaveTemplate(data);
+      setShowEditor(false);
+      await loadTemplates();
+    } catch (e) {
+      setSaving(false);
+      throw e;
+    }
+    setSaving(false);
+  };
+  const handleDelete = async (id) => {
+    if (!onDeleteTemplate) return;
+    try {
+      await onDeleteTemplate(id);
+      setDeleteConfirm(null);
+      await loadTemplates();
+    } catch (e) {
+      setError(e.message || "Failed to delete template");
+    }
+  };
+  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 = useMemo2(() => {
+    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 marked2.parse(md);
+  }, [previewTemplate]);
+  if (loading) {
+    return /* @__PURE__ */ React3.createElement("div", { className: "flex items-center justify-center h-64" }, /* @__PURE__ */ React3.createElement("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" }));
+  }
+  return /* @__PURE__ */ React3.createElement("div", { className: "template-manager" }, /* @__PURE__ */ React3.createElement("div", { className: "flex justify-between items-center mb-6" }, /* @__PURE__ */ React3.createElement("div", null, /* @__PURE__ */ React3.createElement("h1", { className: "text-2xl font-bold text-gray-900" }, title), /* @__PURE__ */ React3.createElement("p", { className: "text-sm text-gray-500 mt-1" }, description)), /* @__PURE__ */ React3.createElement(
+    "button",
+    {
+      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__ */ React3.createElement("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React3.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 4v16m8-8H4" })),
+    "Create Template"
+  )), error && /* @__PURE__ */ React3.createElement("div", { className: "mb-4 p-3 rounded-lg bg-red-50 text-red-800 border border-red-200" }, error, /* @__PURE__ */ React3.createElement("button", { onClick: () => setError(null), className: "ml-2 underline" }, "Dismiss")), /* @__PURE__ */ React3.createElement("div", { className: "grid grid-cols-4 gap-4 mb-6" }, /* @__PURE__ */ React3.createElement("div", { className: "bg-white rounded-lg border border-gray-200 p-4" }, /* @__PURE__ */ React3.createElement("div", { className: "text-2xl font-bold text-gray-900" }, templates.length), /* @__PURE__ */ React3.createElement("div", { className: "text-sm text-gray-500" }, "Total")), /* @__PURE__ */ React3.createElement("div", { className: "bg-white rounded-lg border border-gray-200 p-4" }, /* @__PURE__ */ React3.createElement("div", { className: "text-2xl font-bold text-green-600" }, templates.filter((t) => t.is_active).length), /* @__PURE__ */ React3.createElement("div", { className: "text-sm text-gray-500" }, "Active")), /* @__PURE__ */ React3.createElement("div", { className: "bg-white rounded-lg border border-gray-200 p-4" }, /* @__PURE__ */ React3.createElement("div", { className: "text-2xl font-bold text-yellow-600" }, templates.filter((t) => !t.is_active).length), /* @__PURE__ */ React3.createElement("div", { className: "text-sm text-gray-500" }, "Inactive")), /* @__PURE__ */ React3.createElement("div", { className: "bg-white rounded-lg border border-gray-200 p-4" }, /* @__PURE__ */ React3.createElement("div", { className: "text-2xl font-bold text-blue-600" }, new Set(templates.map((t) => t.template_type)).size), /* @__PURE__ */ React3.createElement("div", { className: "text-sm text-gray-500" }, "Types"))), /* @__PURE__ */ React3.createElement("div", { className: "flex gap-2 mb-6 border-b border-gray-200 pb-3 flex-wrap" }, uniqueTypes.map((type) => /* @__PURE__ */ React3.createElement(
+    "button",
+    {
+      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__ */ React3.createElement("div", { className: "text-center py-16 bg-gray-50 rounded-lg border-2 border-dashed border-gray-200" }, /* @__PURE__ */ React3.createElement("svg", { className: "mx-auto h-12 w-12 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React3.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__ */ React3.createElement("h3", { className: "mt-4 text-lg font-medium text-gray-900" }, "No templates found"), /* @__PURE__ */ React3.createElement("p", { className: "mt-2 text-sm text-gray-500" }, filterType === "all" ? "Create your first template." : `No "${filterType}" templates.`), /* @__PURE__ */ React3.createElement("button", { onClick: openCreate, className: "mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm" }, "Create Template")) : /* @__PURE__ */ React3.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__ */ React3.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)
+      },
+      /* @__PURE__ */ React3.createElement("div", { className: "p-5 flex-1 flex flex-col" }, /* @__PURE__ */ React3.createElement("div", { className: "flex items-start justify-between mb-3" }, /* @__PURE__ */ React3.createElement("span", { className: `px-2 py-1 text-xs font-medium rounded ${typeColor.bg} ${typeColor.text}` }, template.template_type), /* @__PURE__ */ React3.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__ */ React3.createElement("h3", { className: "font-semibold text-gray-900 mb-1" }, template.template_name), /* @__PURE__ */ React3.createElement("p", { className: "text-sm text-gray-500 flex-1 line-clamp-2" }, template.description || "No description"), /* @__PURE__ */ React3.createElement("div", { className: "text-xs text-gray-400 border-t border-gray-100 pt-3 mt-3 truncate" }, "\u{1F4E7} ", template.subject_template)),
+      /* @__PURE__ */ React3.createElement("div", { className: "bg-gray-50 px-5 py-3 flex justify-between items-center border-t border-gray-100" }, /* @__PURE__ */ React3.createElement("span", { className: "text-xs text-gray-500" }, formatDate(template.updated_at)), /* @__PURE__ */ React3.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React3.createElement(
+        "button",
+        {
+          onClick: (e) => {
+            e.stopPropagation();
+            openEdit(template);
+          },
+          className: "p-1.5 text-blue-600 hover:bg-blue-50 rounded",
+          title: "Edit"
+        },
+        /* @__PURE__ */ React3.createElement("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React3.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__ */ React3.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__ */ React3.createElement("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React3.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__ */ React3.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__ */ React3.createElement("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React3.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__ */ React3.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4" }, /* @__PURE__ */ React3.createElement("div", { className: "bg-white rounded-xl shadow-2xl max-w-3xl w-full max-h-[90vh] overflow-hidden flex flex-col" }, /* @__PURE__ */ React3.createElement("div", { className: "px-6 py-4 border-b border-gray-200 flex items-center justify-between bg-gray-50" }, /* @__PURE__ */ React3.createElement("div", null, /* @__PURE__ */ React3.createElement("h2", { className: "text-lg font-semibold text-gray-900" }, previewTemplate.template_name), /* @__PURE__ */ React3.createElement("p", { className: "text-sm text-gray-500" }, previewTemplate.template_type, " \u2022 ", previewTemplate.is_active ? "Active" : "Inactive")), /* @__PURE__ */ React3.createElement("button", { onClick: () => setPreviewTemplate(null), className: "text-gray-400 hover:text-gray-600" }, /* @__PURE__ */ React3.createElement("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React3.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" })))), /* @__PURE__ */ React3.createElement("div", { className: "flex-1 overflow-y-auto p-6 space-y-4" }, /* @__PURE__ */ React3.createElement("div", null, /* @__PURE__ */ React3.createElement("label", { className: "block text-xs font-medium text-gray-500 uppercase mb-1" }, "Subject"), /* @__PURE__ */ React3.createElement("div", { className: "p-3 bg-gray-50 rounded-lg border border-gray-200 font-mono text-sm" }, previewTemplate.subject_template)), /* @__PURE__ */ React3.createElement("div", null, /* @__PURE__ */ React3.createElement("label", { className: "block text-xs font-medium text-gray-500 uppercase mb-1" }, "Email Body"), /* @__PURE__ */ React3.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__ */ React3.createElement("div", null, /* @__PURE__ */ React3.createElement("label", { className: "block text-xs font-medium text-gray-500 uppercase mb-1" }, "Description"), /* @__PURE__ */ React3.createElement("p", { className: "text-gray-600 text-sm" }, previewTemplate.description))), /* @__PURE__ */ React3.createElement("div", { className: "px-6 py-4 border-t border-gray-200 flex justify-end gap-3 bg-gray-50" }, /* @__PURE__ */ React3.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"
+    },
+    "Close"
+  ), /* @__PURE__ */ React3.createElement(
+    "button",
+    {
+      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__ */ React3.createElement("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React3.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__ */ React3.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__ */ React3.createElement("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React3.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__ */ React3.createElement(
+    TemplateEditor,
+    {
+      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),
+      templateTypes,
+      saving
+    }
+  ), showTester && testingTemplate && /* @__PURE__ */ React3.createElement(
+    TemplateTester,
+    {
+      template: testingTemplate,
+      onSendTest: handleTest,
+      onCancel: () => setShowTester(false),
+      sending: saving
+    }
+  ), deleteConfirm && /* @__PURE__ */ React3.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4" }, /* @__PURE__ */ React3.createElement("div", { className: "bg-white rounded-lg shadow-xl max-w-sm w-full p-6" }, /* @__PURE__ */ React3.createElement("h3", { className: "text-lg font-semibold mb-2" }, "Delete Template?"), /* @__PURE__ */ React3.createElement("p", { className: "text-gray-600 mb-4" }, "This action cannot be undone."), /* @__PURE__ */ React3.createElement("div", { className: "flex justify-end gap-3" }, /* @__PURE__ */ React3.createElement(
+    "button",
+    {
+      onClick: () => setDeleteConfirm(null),
+      className: "px-4 py-2 border border-gray-300 rounded-lg"
+    },
+    "Cancel"
+  ), /* @__PURE__ */ React3.createElement(
+    "button",
+    {
+      onClick: () => handleDelete(deleteConfirm),
+      className: "px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700"
+    },
+    "Delete"
+  )))));
+};
+
+// src/frontend/EmailSettings.tsx
+import React4, { useState as useState4, useEffect as useEffect3 } from "react";
+var PROVIDERS = [
+  { value: "mailchannels", label: "MailChannels (Cloudflare)" },
+  { value: "resend", label: "Resend" },
+  { value: "sendgrid", label: "SendGrid" },
+  { value: "sendpulse", label: "SendPulse" }
+];
+var EmailSettings = ({
+  onLoadSettings,
+  onSaveSettings,
+  onTestSettings,
+  title = "Email Settings",
+  description = "Configure how the system sends transactional emails."
+}) => {
+  const [loading, setLoading] = useState4(true);
+  const [saving, setSaving] = useState4(false);
+  const [testing, setTesting] = useState4(false);
+  const [settings, setSettings] = useState4({
+    provider: "mailchannels",
+    fromName: "",
+    fromAddress: ""
+  });
+  useEffect3(() => {
+    loadData();
+  }, []);
+  const loadData = async () => {
+    setLoading(true);
+    try {
+      const data = await onLoadSettings();
+      setSettings((prev) => ({ ...prev, ...data }));
+    } catch (e) {
+      console.error("Failed to load settings", e);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleChange = (key, value) => {
+    setSettings((prev) => ({ ...prev, [key]: value }));
+  };
+  const handleSave = async () => {
+    setSaving(true);
+    try {
+      await onSaveSettings(settings);
+    } catch (e) {
+      console.error("Failed to save settings", e);
+      throw e;
+    } finally {
+      setSaving(false);
+    }
+  };
+  const handleTest = async () => {
+    if (!onTestSettings) return;
+    setTesting(true);
+    try {
+      await onTestSettings(settings);
+    } catch (e) {
+      console.error("Test failed", e);
+      throw e;
+    } finally {
+      setTesting(false);
+    }
+  };
+  if (loading) {
+    return /* @__PURE__ */ React4.createElement("div", { className: "flex items-center justify-center p-12" }, /* @__PURE__ */ React4.createElement("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" }));
+  }
+  return /* @__PURE__ */ React4.createElement("div", { className: "max-w-4xl p-6 space-y-8" }, /* @__PURE__ */ React4.createElement("div", null, /* @__PURE__ */ React4.createElement("h2", { className: "text-2xl font-bold text-gray-900" }, title), /* @__PURE__ */ React4.createElement("p", { className: "text-gray-500 mt-1" }, description)), /* @__PURE__ */ React4.createElement("div", { className: "bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden" }, /* @__PURE__ */ React4.createElement("div", { className: "px-6 py-4 border-b border-gray-100 bg-gray-50" }, /* @__PURE__ */ React4.createElement("h3", { className: "text-lg font-medium text-gray-900" }, "Global Configuration"), /* @__PURE__ */ React4.createElement("p", { className: "text-sm text-gray-500" }, "Default sender identity and delivery provider.")), /* @__PURE__ */ React4.createElement("div", { className: "p-6 space-y-6" }, /* @__PURE__ */ React4.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6" }, /* @__PURE__ */ React4.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React4.createElement("label", { className: "block text-sm font-medium text-gray-700" }, "From Name"), /* @__PURE__ */ React4.createElement(
+    "input",
+    {
+      type: "text",
+      value: settings.fromName,
+      onChange: (e) => handleChange("fromName", e.target.value),
+      placeholder: "e.g. Acme System",
+      className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+    }
+  )), /* @__PURE__ */ React4.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React4.createElement("label", { className: "block text-sm font-medium text-gray-700" }, "From Address"), /* @__PURE__ */ React4.createElement(
+    "input",
+    {
+      type: "email",
+      value: settings.fromAddress,
+      onChange: (e) => handleChange("fromAddress", e.target.value),
+      placeholder: "e.g. noreply@acme.com",
+      className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+    }
+  ))), /* @__PURE__ */ React4.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React4.createElement("label", { className: "block text-sm font-medium text-gray-700" }, "Email Provider"), /* @__PURE__ */ React4.createElement(
+    "select",
+    {
+      value: settings.provider,
+      onChange: (e) => handleChange("provider", e.target.value),
+      className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white"
+    },
+    PROVIDERS.map((p) => /* @__PURE__ */ React4.createElement("option", { key: p.value, value: p.value }, p.label))
+  ), /* @__PURE__ */ React4.createElement("p", { className: "text-xs text-gray-500 mt-1" }, settings.provider === "mailchannels" && "MailChannels is recommended for Cloudflare Workers (requires no API key for standard usage).", settings.provider === "resend" && "Modern email API, good for transactional data.")))), settings.provider !== "mailchannels" && /* @__PURE__ */ React4.createElement("div", { className: "bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden" }, /* @__PURE__ */ React4.createElement("div", { className: "px-6 py-4 border-b border-gray-100 bg-gray-50" }, /* @__PURE__ */ React4.createElement("h3", { className: "text-lg font-medium text-gray-900" }, PROVIDERS.find((p) => p.value === settings.provider)?.label, " Configuration")), /* @__PURE__ */ React4.createElement("div", { className: "p-6 space-y-6" }, settings.provider === "resend" && /* @__PURE__ */ React4.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React4.createElement("label", { className: "block text-sm font-medium text-gray-700" }, "API Key"), /* @__PURE__ */ React4.createElement(
+    "input",
+    {
+      type: "password",
+      value: settings.resendApiKey || "",
+      onChange: (e) => handleChange("resendApiKey", e.target.value),
+      placeholder: "re_...",
+      className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+    }
+  )), settings.provider === "sendgrid" && /* @__PURE__ */ React4.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React4.createElement("label", { className: "block text-sm font-medium text-gray-700" }, "API Key"), /* @__PURE__ */ React4.createElement(
+    "input",
+    {
+      type: "password",
+      value: settings.sendgridApiKey || "",
+      onChange: (e) => handleChange("sendgridApiKey", e.target.value),
+      placeholder: "SG...",
+      className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+    }
+  )), settings.provider === "sendpulse" && /* @__PURE__ */ React4.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6" }, /* @__PURE__ */ React4.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React4.createElement("label", { className: "block text-sm font-medium text-gray-700" }, "Client ID"), /* @__PURE__ */ React4.createElement(
+    "input",
+    {
+      type: "text",
+      value: settings.sendpulseClientId || "",
+      onChange: (e) => handleChange("sendpulseClientId", e.target.value),
+      className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+    }
+  )), /* @__PURE__ */ React4.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React4.createElement("label", { className: "block text-sm font-medium text-gray-700" }, "Client Secret"), /* @__PURE__ */ React4.createElement(
+    "input",
+    {
+      type: "password",
+      value: settings.sendpulseClientSecret || "",
+      onChange: (e) => handleChange("sendpulseClientSecret", e.target.value),
+      className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+    }
+  ))))), /* @__PURE__ */ React4.createElement("div", { className: "flex justify-end gap-3 pt-4" }, onTestSettings && /* @__PURE__ */ React4.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: handleTest,
+      disabled: saving || testing,
+      className: `px-4 py-2 bg-white text-gray-700 font-medium rounded-lg border border-gray-300 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors ${saving || testing ? "opacity-70 cursor-not-allowed" : ""}`
+    },
+    testing ? "Sending..." : "Test Configuration"
+  ), /* @__PURE__ */ React4.createElement(
+    "button",
+    {
+      onClick: handleSave,
+      disabled: saving || testing,
+      className: `px-6 py-2 bg-blue-600 text-white font-medium rounded-lg shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors ${saving || testing ? "opacity-70 cursor-not-allowed" : ""}`
+    },
+    saving ? "Saving..." : "Save Changes"
+  )));
+};
+export {
+  EmailSettings,
+  TemplateEditor,
+  TemplateManager,
+  TemplateTester
+};
+//# sourceMappingURL=index.js.map