@mhmo91/schmancy 0.4.69 → 0.4.71

package/dist/{email-recipients-DQ36ickQ.js → email-recipients-CpghUhQ1.js}

@@ -1,21 +1,22 @@
 import "rxjs";
 import "lit/directives/class-map.js";
 import "lit/directives/style-map.js";
-import { $ as E } from "./litElement.mixin-BYVS1wwl.js";
-import { T } from "./tailwind.mixin-Bpgmqass.js";
-import { property as h, state as u, customElement as k } from "lit/decorators.js";
-import { css as A, html as l } from "lit";
-import { when as m } from "lit/directives/when.js";
-import { createRef as R, ref as C } from "lit/directives/ref.js";
+import { $ as A } from "./litElement.mixin-BZ8iGvPl.js";
+import { T as P } from "./tailwind.mixin-D2DVHS9V.js";
+import { property as h, state as y, customElement as C } from "lit/decorators.js";
+import { css as D, html as c } from "lit";
+import { when as d } from "lit/directives/when.js";
+import { createRef as T, ref as E } from "lit/directives/ref.js";
 import { repeat as I } from "lit/directives/repeat.js";
-import { $ as v } from "./notification-service-DypTYarw.js";
-import "./dialog-content-CJ21oAff.js";
-import { $ as D } from "./dialog-service-Dwnyl4Gg.js";
-var j = Object.defineProperty, L = Object.getOwnPropertyDescriptor, y = (e, t, i, s) => {
-  for (var a, n = s > 1 ? void 0 : s ? L(t, i) : t, c = e.length - 1; c >= 0; c--) (a = e[c]) && (n = (s ? a(t, i, n) : a(n)) || n);
-  return s && n && j(t, i, n), n;
+import { $ as v } from "./notification-service-y0T4rXdS.js";
+import "./dialog-content-B_w_iJyW.js";
+import { $ as L } from "./dialog-service-DwJ_7FB3.js";
+import { s as j } from "./sheet.service-ieSXeqCj.js";
+var F = Object.defineProperty, O = Object.getOwnPropertyDescriptor, u = (e, t, s, i) => {
+  for (var a, n = i > 1 ? void 0 : i ? O(t, s) : t, r = e.length - 1; r >= 0; r--) (a = e[r]) && (n = (i ? a(t, s, n) : a(n)) || n);
+  return i && n && F(t, s, n), n;
 };
-let p = class extends E(A`
+let m = class extends A(D`
 	:host {
 		display: block;
 		height: 100%;
@@ -23,19 +24,19 @@ let p = class extends E(A`
 `) {
   constructor() {
     super(...arguments), this.config = {}, this.templates = [], this.importSources = [], this.disabled = !1, this.recipientsTitle = "Recipients", this.recipientsEmptyTitle = "No recipients yet", this.recipientsEmptyMessage = "Import from sources or upload a CSV", this.enableCsvImport = !0, this.enableDragDrop = !0, this.recipients = [], this.selectedRecipients = [], this.subject = "", this.body = "", this.templateId = null, this.attachments = [], this.isSending = !1, this.handleEmailsImported = (e) => {
-      const { emails: t } = e.detail, i = [.../* @__PURE__ */ new Set([...this.recipients, ...t])], s = t.filter((a) => !this.recipients.includes(a));
-      this.recipients = i, this.selectedRecipients = [.../* @__PURE__ */ new Set([...this.selectedRecipients, ...s])], this.dispatchEvent(new CustomEvent("emails-imported", { detail: { emails: s, source: e.detail.source }, bubbles: !0, composed: !0 }));
+      const { emails: t } = e.detail, s = [.../* @__PURE__ */ new Set([...this.recipients, ...t])], i = t.filter((a) => !this.recipients.includes(a));
+      this.recipients = s, this.selectedRecipients = [.../* @__PURE__ */ new Set([...this.selectedRecipients, ...i])], this.dispatchEvent(new CustomEvent("emails-imported", { detail: { emails: i, source: e.detail.source }, bubbles: !0, composed: !0 }));
     }, this.handleRecipientRemoved = (e) => {
       const { email: t } = e.detail;
-      this.recipients = this.recipients.filter((i) => i !== t), this.selectedRecipients = this.selectedRecipients.filter((i) => i !== t), this.dispatchEvent(new CustomEvent("recipient-removed", { detail: { email: t }, bubbles: !0, composed: !0 }));
+      this.recipients = this.recipients.filter((s) => s !== t), this.selectedRecipients = this.selectedRecipients.filter((s) => s !== t), this.dispatchEvent(new CustomEvent("recipient-removed", { detail: { email: t }, bubbles: !0, composed: !0 }));
     }, this.handleRecipientsCleared = () => {
       this.recipients = [], this.selectedRecipients = [], this.dispatchEvent(new CustomEvent("recipients-cleared", { bubbles: !0, composed: !0 }));
     }, this.handleSelectionChanged = (e) => {
       const { selectedEmails: t } = e.detail;
       this.selectedRecipients = t, this.dispatchEvent(new CustomEvent("selection-changed", { detail: { selectedEmails: t }, bubbles: !0, composed: !0 }));
     }, this.handleEditorChange = (e) => {
-      const { subject: t, body: i, templateId: s, attachments: a } = e.detail;
-      this.subject = t, this.body = i, this.templateId = s, this.attachments = a, this.dispatchEvent(new CustomEvent("compose-changed", { detail: { subject: t, body: i, templateId: s, attachments: a }, bubbles: !0, composed: !0 }));
+      const { subject: t, body: s, templateId: i, attachments: a } = e.detail;
+      this.subject = t, this.body = s, this.templateId = i, this.attachments = a, this.dispatchEvent(new CustomEvent("compose-changed", { detail: { subject: t, body: s, templateId: i, attachments: a }, bubbles: !0, composed: !0 }));
     }, this.handleSend = async () => {
       if (this.selectedRecipients.length !== 0) if (this.subject.trim()) if (this.body.trim()) {
         this.isSending = !0;
@@ -59,8 +60,8 @@ let p = class extends E(A`
     super.updated(e), e.has("disabled") && this.setSending(this.disabled);
   }
   addRecipients(e) {
-    const t = [.../* @__PURE__ */ new Set([...this.recipients, ...e])], i = e.filter((s) => !this.recipients.includes(s));
-    this.recipients = t, this.selectedRecipients = [.../* @__PURE__ */ new Set([...this.selectedRecipients, ...i])];
+    const t = [.../* @__PURE__ */ new Set([...this.recipients, ...e])], s = e.filter((i) => !this.recipients.includes(i));
+    this.recipients = t, this.selectedRecipients = [.../* @__PURE__ */ new Set([...this.selectedRecipients, ...s])];
   }
   setSubject(e) {
     this.subject = e;
@@ -79,7 +80,7 @@ let p = class extends E(A`
   }
   render() {
     const e = this.selectedRecipients.length > 0 && this.subject.trim() && this.body.trim() && !this.isSending && !this.disabled;
-    return l`
+    return c`
 			<!-- Main Layout Container -->
 			<div class="flex flex-col h-full gap-6 p-6">
 				
@@ -126,7 +127,7 @@ let p = class extends E(A`
 								<schmancy-typography type="body" token="sm" class="font-medium">
 									${this.selectedRecipients.length} recipient${this.selectedRecipients.length === 1 ? "" : "s"} selected
 								</schmancy-typography>
-								${m(this.attachments.length > 0, () => l`
+								${d(this.attachments.length > 0, () => c`
 									<schmancy-typography type="body" token="xs">
 										${this.attachments.length} attachment${this.attachments.length === 1 ? "" : "s"}
 									</schmancy-typography>
@@ -169,9 +170,9 @@ let p = class extends E(A`
 		`;
   }
 };
-y([h({ type: Object })], p.prototype, "config", 2), y([h({ type: Array })], p.prototype, "templates", 2), y([h({ type: Array })], p.prototype, "importSources", 2), y([h({ type: Boolean })], p.prototype, "disabled", 2), y([h({ type: String })], p.prototype, "recipientsTitle", 2), y([h({ type: String })], p.prototype, "recipientsEmptyTitle", 2), y([h({ type: String })], p.prototype, "recipientsEmptyMessage", 2), y([h({ type: Boolean })], p.prototype, "enableCsvImport", 2), y([h({ type: Boolean })], p.prototype, "enableDragDrop", 2), y([u()], p.prototype, "recipients", 2), y([u()], p.prototype, "selectedRecipients", 2), y([u()], p.prototype, "subject", 2), y([u()], p.prototype, "body", 2), y([u()], p.prototype, "templateId", 2), y([u()], p.prototype, "attachments", 2), y([u()], p.prototype, "isSending", 2), p = y([k("schmancy-mailbox")], p);
-var M = Object.getOwnPropertyDescriptor;
-let z = class extends T() {
+u([h({ type: Object })], m.prototype, "config", 2), u([h({ type: Array })], m.prototype, "templates", 2), u([h({ type: Array })], m.prototype, "importSources", 2), u([h({ type: Boolean })], m.prototype, "disabled", 2), u([h({ type: String })], m.prototype, "recipientsTitle", 2), u([h({ type: String })], m.prototype, "recipientsEmptyTitle", 2), u([h({ type: String })], m.prototype, "recipientsEmptyMessage", 2), u([h({ type: Boolean })], m.prototype, "enableCsvImport", 2), u([h({ type: Boolean })], m.prototype, "enableDragDrop", 2), u([y()], m.prototype, "recipients", 2), u([y()], m.prototype, "selectedRecipients", 2), u([y()], m.prototype, "subject", 2), u([y()], m.prototype, "body", 2), u([y()], m.prototype, "templateId", 2), u([y()], m.prototype, "attachments", 2), u([y()], m.prototype, "isSending", 2), m = u([C("schmancy-mailbox")], m);
+var B = Object.getOwnPropertyDescriptor;
+let z = class extends P() {
   constructor() {
     super(...arguments), this.layouts = [{ id: "columns-2", icon: "view_week", label: "2 Col" }, { id: "columns-3", icon: "view_column", label: "3 Col" }, { id: "sidebar-left", icon: "view_sidebar", label: "Left" }, { id: "sidebar-right", icon: "view_sidebar", label: "Right", flipped: !0 }, { id: "image-row", icon: "collections", label: "Images" }];
   }
@@ -179,9 +180,9 @@ let z = class extends T() {
     this.dispatchEvent(new CustomEvent("layout-select", { detail: { layout: e }, bubbles: !0, composed: !0 }));
   }
   render() {
-    return l`
+    return c`
 			<div class="grid p-3 gap-2">
-				${this.layouts.map((e) => l`
+				${this.layouts.map((e) => c`
 					<schmancy-button 
 						variant="outlined"
 						@click=${() => this.selectLayout(e.id)}
@@ -200,31 +201,232 @@ let z = class extends T() {
 		`;
   }
 };
-z = ((e, t, i, s) => {
-  for (var a, n = s > 1 ? void 0 : s ? M(t, i) : t, c = e.length - 1; c >= 0; c--) (a = e[c]) && (n = a(n) || n);
+z = ((e, t, s, i) => {
+  for (var a, n = i > 1 ? void 0 : i ? B(t, s) : t, r = e.length - 1; r >= 0; r--) (a = e[r]) && (n = a(n) || n);
   return n;
-})([k("schmancy-email-layout-selector")], z);
-var F = Object.defineProperty, B = Object.getOwnPropertyDescriptor, x = (e, t, i, s) => {
-  for (var a, n = s > 1 ? void 0 : s ? B(t, i) : t, c = e.length - 1; c >= 0; c--) (a = e[c]) && (n = (s ? a(t, i, n) : a(n)) || n);
-  return s && n && F(t, i, n), n;
+})([C("schmancy-email-layout-selector")], z);
+var M = Object.defineProperty, H = Object.getOwnPropertyDescriptor, R = (e, t, s, i) => {
+  for (var a, n = i > 1 ? void 0 : i ? H(t, s) : t, r = e.length - 1; r >= 0; r--) (a = e[r]) && (n = (i ? a(t, s, n) : a(n)) || n);
+  return i && n && M(t, s, n), n;
 };
-let b = class extends E(A`
+let k = class extends A(D`
+	:host {
+		display: block;
+	}
+`) {
+  constructor() {
+    super(...arguments), this.templates = [], this.searchQuery = "", this.filteredTemplates = [], this.selectedCategory = "all", this.handleSearch = (e) => {
+      const t = e.target;
+      this.searchQuery = t.value;
+    }, this.handleCategorySelect = (e) => {
+      this.selectedCategory = e, this.updateFilteredTemplates();
+    }, this.selectTemplate = (e) => {
+      this.dispatchEvent(new CustomEvent("template-selected", { detail: e, bubbles: !0, composed: !0 })), j.dismiss();
+    }, this.close = () => {
+      j.dismiss();
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.updateFilteredTemplates();
+  }
+  updated(e) {
+    (e.has("templates") || e.has("searchQuery") || e.has("selectedCategory")) && this.updateFilteredTemplates();
+  }
+  get categories() {
+    const e = /* @__PURE__ */ new Set();
+    return this.templates.forEach((t) => {
+      t.category && e.add(t.category);
+    }), ["all", ...Array.from(e)];
+  }
+  updateFilteredTemplates() {
+    let e = [...this.templates];
+    if (this.selectedCategory !== "all" && (e = e.filter((t) => t.category === this.selectedCategory)), this.searchQuery.trim()) {
+      const t = this.searchQuery.toLowerCase();
+      e = e.filter((s) => s.name.toLowerCase().includes(t) || s.category?.toLowerCase().includes(t) || s.description?.toLowerCase().includes(t));
+    }
+    this.filteredTemplates = e;
+  }
+  render() {
+    return c`
+			<div class="flex flex-col h-full overflow-hidden">
+				<!-- Header -->
+				<div class="flex items-center justify-between px-6 py-4 border-b border-outline-variant">
+					<div class="flex items-center gap-3">
+						<schmancy-icon size="24px" class="text-primary">mail</schmancy-icon>
+						<schmancy-typography type="headline" token="md">
+							Choose Email Template
+						</schmancy-typography>
+					</div>
+					<schmancy-button
+						variant="text"
+						@click=${this.close}
+						class="hover:bg-surface-container rounded-full w-10 h-10 p-0"
+					>
+						<schmancy-icon>close</schmancy-icon>
+					</schmancy-button>
+				</div>
+
+				<!-- Body -->
+				<div class="flex-1 flex flex-col overflow-hidden">
+					${this.renderTemplateList()}
+				</div>
+			</div>
+		`;
+  }
+  renderTemplateList() {
+    return c`
+			<!-- Search and Filter Bar -->
+			<div class="px-6 py-4 border-b border-outline-variant bg-surface-containerLow">
+				<div class="flex flex-col gap-4">
+					<!-- Search Input -->
+					<schmancy-input
+						type="search"
+						placeholder="Search templates..."
+						.value=${this.searchQuery}
+						@input=${this.handleSearch}
+						class="w-full"
+					>
+						<schmancy-icon slot="prefix" size="20px" class="text-surface-onVariant">search</schmancy-icon>
+						${d(this.searchQuery, () => c`
+							<schmancy-button
+								slot="suffix"
+								variant="text"
+								@click=${() => {
+      this.searchQuery = "";
+    }}
+								class="rounded-full w-8 h-8 p-0"
+							>
+								<schmancy-icon size="16px">close</schmancy-icon>
+							</schmancy-button>
+						`)}
+					</schmancy-input>
+
+					<!-- Category Filter -->
+					${d(this.categories.length > 1, () => c`
+						<div class="flex gap-2 flex-wrap">
+							${I(this.categories, (e) => e, (e) => c`
+									<schmancy-chip
+										class="cursor-pointer transition-all hover:shadow-sm ${this.selectedCategory === e ? "bg-primary text-primary-on" : "border border-outline"}"
+										@click=${() => this.handleCategorySelect(e)}
+									>
+										${e === "all" ? "All Templates" : e}
+									</schmancy-chip>
+								`)}
+						</div>
+					`)}
+				</div>
+			</div>
+
+			<!-- Template List with Previews -->
+			<div class="flex-1 overflow-y-auto px-6 py-6">
+				${d(this.filteredTemplates.length > 0, () => c`
+						<div class="space-y-6">
+							${I(this.filteredTemplates, (e) => e.id, (e) => c`
+									<schmancy-surface
+										type="containerLow"
+										elevation="1"
+										rounded="all"
+										class="group cursor-pointer hover:elevation-3 transition-all duration-200 overflow-hidden"
+										@click=${() => this.selectTemplate(e)}
+									>
+										<!-- Template Header -->
+										<div class="p-4 border-b border-outline-variant">
+											<div class="flex items-start justify-between">
+												<div class="flex-1">
+													<schmancy-typography type="title" token="md" class="font-semibold leading-tight mb-1">
+														${e.name}
+													</schmancy-typography>
+													${d(e.category, () => c`
+														<schmancy-chip class="text-xs border border-outline">
+															${e.category}
+														</schmancy-chip>
+													`)}
+												</div>
+												<schmancy-button 
+													variant="filled" 
+													size="sm"
+													class="opacity-0 group-hover:opacity-100 transition-opacity"
+												>
+													Use This
+												</schmancy-button>
+											</div>
+										</div>
+										
+										<!-- Email Preview -->
+										<div class="p-4 bg-surface">
+											<schmancy-email-viewer
+												subject=${e.subject}
+												body=${e.body}
+												mode="desktop"
+												class="max-h-96 overflow-y-auto"
+											></schmancy-email-viewer>
+										</div>
+									</schmancy-surface>
+								`)}
+						</div>
+					`, () => c`
+						<div class="flex flex-col items-center justify-center h-96 text-center">
+							<div class="mb-6">
+								<schmancy-icon size="64px" class="text-surface-onVariant opacity-20">mail_outline</schmancy-icon>
+							</div>
+							<schmancy-typography type="headline" token="sm" class="mb-2">
+								${this.searchQuery || this.selectedCategory !== "all" ? "No templates found" : "No templates available"}
+							</schmancy-typography>
+							<schmancy-typography type="body" token="md" class="text-surface-onVariant mb-6 max-w-md">
+								${this.searchQuery ? `No templates match your search for "${this.searchQuery}"` : this.selectedCategory !== "all" ? `No templates found in the "${this.selectedCategory}" category` : "Start by creating your first email template"}
+							</schmancy-typography>
+							${d(this.searchQuery || this.selectedCategory !== "all", () => c`
+								<div class="flex gap-3">
+									${d(this.searchQuery, () => c`
+										<schmancy-button
+											variant="outlined"
+											@click=${() => {
+      this.searchQuery = "";
+    }}
+										>
+											<schmancy-icon slot="prefix">clear</schmancy-icon>
+											Clear Search
+										</schmancy-button>
+									`)}
+									${d(this.selectedCategory !== "all", () => c`
+										<schmancy-button
+											variant="filled"
+											@click=${() => this.handleCategorySelect("all")}
+										>
+											<schmancy-icon slot="prefix">view_list</schmancy-icon>
+											Show All Templates
+										</schmancy-button>
+									`)}
+								</div>
+							`)}
+						</div>
+					`)}
+			</div>
+		`;
+  }
+};
+R([h({ type: Array })], k.prototype, "templates", 2), R([y()], k.prototype, "searchQuery", 2), R([y()], k.prototype, "filteredTemplates", 2), R([y()], k.prototype, "selectedCategory", 2), k = R([C("schmancy-email-template-picker")], k);
+var U = Object.defineProperty, V = Object.getOwnPropertyDescriptor, x = (e, t, s, i) => {
+  for (var a, n = i > 1 ? void 0 : i ? V(t, s) : t, r = e.length - 1; r >= 0; r--) (a = e[r]) && (n = (i ? a(t, s, n) : a(n)) || n);
+  return i && n && U(t, s, n), n;
+};
+let b = class extends A(D`
 	:host {
 		display: block;
 		height: 100%;
 	}
 `) {
   constructor() {
-    super(...arguments), this.subject = "", this.body = "", this.templates = [], this.disabled = !1, this.attachments = [], this.config = {}, this.selectedTemplate = null, this.dragOver = !1, this.isUploading = !1, this.subjectInputRef = R(), this.bodyTextAreaRef = R(), this.fileInputRef = R(), this.imageInputRef = R(), this.handleKeyDown = (e) => {
+    super(...arguments), this.subject = "", this.body = "", this.disabled = !1, this.attachments = [], this.config = {}, this.templates = this.getDefaultTemplates(), this.dragOver = !1, this.isUploading = !1, this.subjectInputRef = T(), this.bodyTextAreaRef = T(), this.fileInputRef = T(), this.imageInputRef = T(), this.handleKeyDown = (e) => {
       if (this.disabled) return;
       const t = this.bodyTextAreaRef.value?.shadowRoot?.querySelector("textarea");
       e.key === "Tab" && e.target === t && (e.preventDefault(), this.insertAtCursor("  "));
     }, this.handlePaste = (e) => {
       const t = this.bodyTextAreaRef.value?.shadowRoot?.querySelector("textarea");
       if (this.disabled || document.activeElement !== t) return;
-      const i = e.clipboardData?.items;
-      if (i) for (let s = 0; s < i.length; s++) {
-        const a = i[s];
+      const s = e.clipboardData?.items;
+      if (s) for (let i = 0; i < s.length; i++) {
+        const a = s[i];
         if (a.type.indexOf("image") !== -1) {
           e.preventDefault();
           const n = a.getAsFile();
@@ -237,21 +439,22 @@ let b = class extends E(A`
       this.subject = t.value, this.dispatchChange();
     }, this.handleBodyChange = (e) => {
       this.body = e.detail.value, this.dispatchChange();
-    }, this.selectTemplate = (e) => {
-      const t = this.templates.find((i) => i.id === e);
-      t && (this.subject = t.subject, this.body = t.body, this.selectedTemplate = e, this.dispatchChange());
-    }, this.clearTemplate = () => {
-      this.subject = "", this.body = "", this.selectedTemplate = null, this.dispatchChange();
     }, this.dispatchChange = () => {
-      this.dispatchEvent(new CustomEvent("editor-change", { detail: { subject: this.subject, body: this.body, templateId: this.selectedTemplate, attachments: this.attachments }, bubbles: !0, composed: !0 }));
+      this.dispatchEvent(new CustomEvent("editor-change", { detail: { subject: this.subject, body: this.body, attachments: this.attachments }, bubbles: !0, composed: !0 }));
     }, this.openLayoutDialog = () => {
-      D.component(l`
+      L.component(c`
 			<schmancy-email-layout-selector
 				@layout-select=${(e) => {
-        this.applyLayout(e.detail.layout), D.close();
+        this.applyLayout(e.detail.layout), L.close();
       }}
 			></schmancy-email-layout-selector>
 		`);
+    }, this.openTemplatePicker = () => {
+      const e = new k();
+      e.templates = this.templates, e.addEventListener("template-selected", this.handleTemplateSelected), j.open({ component: e, title: "Choose Email Template" });
+    }, this.handleTemplateSelected = (e) => {
+      const t = e.detail;
+      this.subject = t.subject, this.body = t.body, this.dispatchChange(), v.success(`Template "${t.name}" applied successfully`);
     }, this.applyLayout = (e) => {
       const t = { "columns-2": `
 :::layout columns-2
@@ -353,51 +556,51 @@ Your primary content goes here. This area takes up most of the width while the s
         try {
           let t;
           this.config.imageUploadHandler ? t = await this.config.imageUploadHandler(e) : this.config.uploadHandler ? t = await this.config.uploadHandler(e) : (t = await this.createDataUrl(e), v.warning("No upload handler configured. Using local preview."));
-          const i = await this.getImageDimensions(e);
-          this.insertImageMarkdown(t, e.name, i.width, i.height), v.success("Image uploaded successfully");
+          const s = await this.getImageDimensions(e);
+          this.insertImageMarkdown(t, e.name, s.width, s.height), v.success("Image uploaded successfully");
         } catch {
           v.error("Failed to upload image");
         } finally {
           this.isUploading = !1;
         }
       }
-    }, this.createDataUrl = (e) => new Promise((t, i) => {
-      const s = new FileReader();
-      s.onload = () => t(s.result), s.onerror = i, s.readAsDataURL(e);
+    }, this.createDataUrl = (e) => new Promise((t, s) => {
+      const i = new FileReader();
+      i.onload = () => t(i.result), i.onerror = s, i.readAsDataURL(e);
     }), this.getImageDimensions = (e) => new Promise((t) => {
-      const i = new Image();
-      i.onload = () => {
-        t({ width: i.width, height: i.height }), URL.revokeObjectURL(i.src);
-      }, i.onerror = () => {
-        t({ width: 400, height: 300 }), URL.revokeObjectURL(i.src);
-      }, i.src = URL.createObjectURL(e);
-    }), this.insertImageMarkdown = (e, t, i, s) => {
+      const s = new Image();
+      s.onload = () => {
+        t({ width: s.width, height: s.height }), URL.revokeObjectURL(s.src);
+      }, s.onerror = () => {
+        t({ width: 400, height: 300 }), URL.revokeObjectURL(s.src);
+      }, s.src = URL.createObjectURL(e);
+    }), this.insertImageMarkdown = (e, t, s, i) => {
       const a = this.bodyTextAreaRef.value?.shadowRoot?.querySelector("textarea");
       if (!a) return;
-      const n = `![${t}](${e}){width=${Math.min(i, 600)}px height=auto}`, c = a.selectionStart, r = a.selectionEnd, o = this.body.substring(0, c) + n + this.body.substring(r);
-      this.body = o, this.dispatchChange(), this.updateComplete.then(() => {
-        const d = this.bodyTextAreaRef.value?.shadowRoot?.querySelector("textarea");
-        if (d) {
-          const S = c + n.length;
-          d.setSelectionRange(S, S), d.focus();
+      const n = `![${t}](${e}){width=${Math.min(s, 600)}px height=auto}`, r = a.selectionStart, o = a.selectionEnd, l = this.body.substring(0, r) + n + this.body.substring(o);
+      this.body = l, this.dispatchChange(), this.updateComplete.then(() => {
+        const p = this.bodyTextAreaRef.value?.shadowRoot?.querySelector("textarea");
+        if (p) {
+          const S = r + n.length;
+          p.setSelectionRange(S, S), p.focus();
         }
       });
     }, this.handleFileChange = (e) => {
-      const t = e.target, i = t.files;
-      if (i) for (let s = 0; s < i.length; s++) {
-        const a = i[s];
+      const t = e.target, s = t.files;
+      if (s) for (let i = 0; i < s.length; i++) {
+        const a = s[i];
         a.type.startsWith("image/") ? this.uploadImage(a) : this.addFile(a);
       }
       t.value = "";
     }, this.handleImageSelect = (e) => {
-      const t = e.target, i = t.files?.[0];
-      i && i.type.startsWith("image/") && this.uploadImage(i), t.value = "";
+      const t = e.target, s = t.files?.[0];
+      s && s.type.startsWith("image/") && this.uploadImage(s), t.value = "";
     }, this.handleDrop = (e) => {
       e.preventDefault(), this.dragOver = !1;
       const t = e.dataTransfer?.files;
-      if (t) for (let i = 0; i < t.length; i++) {
-        const s = t[i];
-        s.type.startsWith("image/") ? this.uploadImage(s) : this.addFile(s);
+      if (t) for (let s = 0; s < t.length; s++) {
+        const i = t[s];
+        i.type.startsWith("image/") ? this.uploadImage(i) : this.addFile(i);
       }
     }, this.handleDragEnter = (e) => {
       e.preventDefault(), this.dragOver = !0;
@@ -411,7 +614,7 @@ Your primary content goes here. This area takes up most of the width while the s
       e.preventDefault();
     }, this.addFile = (e) => {
       if (e.size > 10485760) return void v.error(`File "${e.name}" is too large. Maximum size is 10MB.`);
-      if (this.attachments.some((i) => i.name === e.name && i.size === e.size)) return void v.warning(`File "${e.name}" is already attached.`);
+      if (this.attachments.some((s) => s.name === e.name && s.size === e.size)) return void v.warning(`File "${e.name}" is already attached.`);
       const t = { id: crypto.randomUUID(), file: e, name: e.name, size: e.size, type: e.type || "application/octet-stream" };
       this.attachments = [...this.attachments, t], this.dispatchChange();
     }, this.removeAttachment = (e) => {
@@ -424,6 +627,198 @@ Your primary content goes here. This area takes up most of the width while the s
   disconnectedCallback() {
     super.disconnectedCallback(), document.removeEventListener("paste", this.handlePaste), document.removeEventListener("dragenter", this.handleDragEnter), document.removeEventListener("dragleave", this.handleDocumentDragLeave), document.removeEventListener("drop", this.handleDocumentDrop);
   }
+  getDefaultTemplates() {
+    return [{ id: "welcome", name: "Welcome Email", subject: "Welcome to Our Community! 🌟", description: "A warm welcome message for new users", category: "onboarding", body: `# Welcome to Our Community!
+
+We're thrilled to have you on board. Thank you for joining us on this journey.
+
+## What's Next?
+
+* **Explore** your dashboard and discover all the features
+* **Connect** with other community members
+* **Get support** whenever you need it - we're here to help
+
+---
+
+*Need assistance? Simply reply to this email and we'll get back to you within 24 hours.*
+
+Best regards,  
+The Team` }, { id: "newsletter", name: "Newsletter", subject: "Weekly Insights & Updates", description: "Regular newsletter template with updates and insights", category: "communication", body: `# This Week's Highlights
+
+## Featured Story
+
+**[Article Title]**  
+Brief description of the main story or update that you want to highlight this week.
+
+[Read More](https://example.com)
+
+## Quick Updates
+
+* **Update 1**: Brief description of an important update
+* **Update 2**: Another noteworthy development
+* **Update 3**: Additional news worth sharing
+
+## Upcoming Events
+
+**[Event Name]** - *Date*  
+Short description of the upcoming event.
+
+---
+
+*Thanks for reading! Forward this to a friend who might enjoy it.*
+
+Until next week,  
+The Team` }, { id: "product-launch", name: "Product Launch", subject: "Introducing Our Latest Innovation 🚀", description: "Announce new products or features", category: "marketing", body: `# Something Amazing is Here
+
+We've been working hard behind the scenes, and today we're excited to introduce our latest creation.
+
+## Key Features
+
+* **Feature 1**: Benefit that matters to your users
+* **Feature 2**: Another compelling capability
+* **Feature 3**: The feature that sets you apart
+
+## Early Access
+
+As a valued member, you get **exclusive early access** starting today.
+
+[Get Started Now](https://example.com)
+
+---
+
+*Questions? We'd love to hear from you. Just hit reply!*
+
+Best,  
+The Product Team` }, { id: "event-invitation", name: "Event Invitation", subject: "You're Invited: [Event Name]", description: "Professional event invitation template", category: "events", body: `# You're Invited!
+
+## [Event Name]
+
+**When**: [Date & Time]  
+**Where**: [Location or Virtual Link]  
+**Duration**: [Duration]
+
+Join us for an exclusive gathering where we'll explore [brief event description].
+
+## What to Expect
+
+* **Networking** with industry professionals
+* **Insights** from leading experts
+* **Interactive** sessions and discussions
+
+## RSVP Required
+
+Space is limited, so please confirm your attendance by [RSVP Date].
+
+[Confirm Attendance](https://example.com)
+
+---
+
+*Can't make it? Let us know and we'll share the key highlights with you.*
+
+Looking forward to seeing you there,  
+The Events Team` }, { id: "thank-you", name: "Thank You", subject: "Thank You - It Means Everything", description: "Express gratitude to customers or supporters", category: "appreciation", body: `# Thank You
+
+Your support means the world to us.
+
+Whether you've been with us from the beginning or just joined our community, we want you to know how much we appreciate you.
+
+## Because of You
+
+* We've been able to improve our service
+* Our community has grown stronger
+* We've achieved milestones we never thought possible
+
+## What's Next
+
+We're committed to continuing to earn your trust and providing even more value in the coming months.
+
+---
+
+*Your feedback shapes everything we do. Reply anytime with thoughts or suggestions.*
+
+With genuine gratitude,  
+The Team` }, { id: "feedback-request", name: "Feedback Request", subject: "Your Opinion Matters - 2 Minutes?", description: "Request feedback or reviews from users", category: "feedback", body: `# We'd Love Your Feedback
+
+Your experience matters to us, and we're always looking for ways to improve.
+
+## Quick Favor?
+
+Could you spare **2 minutes** to share your thoughts? Your honest feedback helps us serve you better.
+
+[Share Your Feedback](https://example.com)
+
+## What We're Asking
+
+* How has your experience been so far?
+* What's working well for you?
+* What could we improve?
+
+## Thank You Gift
+
+As a small token of appreciation, everyone who completes our feedback form receives [incentive].
+
+---
+
+*Every response is read personally by our team. We take your input seriously.*
+
+Thanks in advance,  
+The Team` }, { id: "password-reset", name: "Password Reset", subject: "Reset Your Password - Action Required", description: "Secure password reset instructions", category: "security", body: `# Password Reset Request
+
+We received a request to reset the password for your account.
+
+## Reset Your Password
+
+Click the button below to create a new password. This link will expire in **24 hours** for your security.
+
+[Reset Password](https://example.com/reset)
+
+## Didn't Request This?
+
+If you didn't request a password reset, please ignore this email. Your account remains secure.
+
+## Need Help?
+
+If you're having trouble with the reset process, contact our support team and we'll assist you right away.
+
+---
+
+*For security reasons, this link can only be used once and expires in 24 hours.*
+
+Best regards,  
+Security Team` }, { id: "order-confirmation", name: "Order Confirmation", subject: "Order Confirmed - #[ORDER-NUMBER]", description: "Professional order confirmation template", category: "commerce", body: `# Order Confirmation
+
+Thanks for your order! We've received your payment and are preparing your items for shipment.
+
+## Order Details
+
+**Order Number**: #[ORDER-NUMBER]  
+**Order Date**: [DATE]  
+**Total**: $[AMOUNT]
+
+## Items Ordered
+
+* **[Item 1]** - Quantity: [QTY] - $[PRICE]
+* **[Item 2]** - Quantity: [QTY] - $[PRICE]
+
+## Shipping Information
+
+**Address**: [SHIPPING ADDRESS]  
+**Method**: [SHIPPING METHOD]  
+**Estimated Delivery**: [DELIVERY DATE]
+
+## Next Steps
+
+You'll receive a tracking number via email once your order ships (usually within 1-2 business days).
+
+[Track Your Order](https://example.com/track)
+
+---
+
+*Questions about your order? Reply to this email or contact our support team.*
+
+Thank you for your business,  
+The Fulfillment Team` }];
+  }
   addKeyboardListeners() {
     this.addEventListener("keydown", this.handleKeyDown), document.addEventListener("paste", this.handlePaste);
   }
@@ -432,29 +827,29 @@ Your primary content goes here. This area takes up most of the width while the s
   }
   insertAtCursor(e, t) {
     if (!this.bodyTextAreaRef.value) return;
-    const i = this.bodyTextAreaRef.value.shadowRoot?.querySelector("textarea");
-    if (!i) return;
-    const s = i.selectionStart, a = i.selectionEnd, n = i.value.substring(0, s) + e + i.value.substring(a);
+    const s = this.bodyTextAreaRef.value.shadowRoot?.querySelector("textarea");
+    if (!s) return;
+    const i = s.selectionStart, a = s.selectionEnd, n = s.value.substring(0, i) + e + s.value.substring(a);
     this.body = n, this.dispatchChange(), this.updateComplete.then(() => {
-      const c = this.bodyTextAreaRef.value?.shadowRoot?.querySelector("textarea");
-      if (c) if (c.focus(), t) {
-        const r = s + e.indexOf(t), o = r + t.length;
-        c.setSelectionRange(r, o);
-      } else c.setSelectionRange(s + e.length, s + e.length);
+      const r = this.bodyTextAreaRef.value?.shadowRoot?.querySelector("textarea");
+      if (r) if (r.focus(), t) {
+        const o = i + e.indexOf(t), l = o + t.length;
+        r.setSelectionRange(o, l);
+      } else r.setSelectionRange(i + e.length, i + e.length);
     });
   }
-  wrapSelection(e, t, i) {
+  wrapSelection(e, t, s) {
     if (!this.bodyTextAreaRef.value) return;
-    const s = this.bodyTextAreaRef.value.shadowRoot?.querySelector("textarea");
-    if (!s) return;
-    const a = s.selectionStart, n = s.selectionEnd, c = s.value.substring(a, n), r = e + (c || i) + t, o = s.value.substring(0, a) + r + s.value.substring(n);
-    this.body = o, this.dispatchChange(), this.updateComplete.then(() => {
-      const d = this.bodyTextAreaRef.value?.shadowRoot?.querySelector("textarea");
-      d && (d.focus(), c ? d.setSelectionRange(a + r.length, a + r.length) : d.setSelectionRange(a + e.length, a + e.length + i.length));
+    const i = this.bodyTextAreaRef.value.shadowRoot?.querySelector("textarea");
+    if (!i) return;
+    const a = i.selectionStart, n = i.selectionEnd, r = i.value.substring(a, n), o = e + (r || s) + t, l = i.value.substring(0, a) + o + i.value.substring(n);
+    this.body = l, this.dispatchChange(), this.updateComplete.then(() => {
+      const p = this.bodyTextAreaRef.value?.shadowRoot?.querySelector("textarea");
+      p && (p.focus(), r ? p.setSelectionRange(a + o.length, a + o.length) : p.setSelectionRange(a + e.length, a + e.length + s.length));
     });
   }
   render() {
-    return l`
+    return c`
 			<schmancy-surface 
 				type="surface" 
 				rounded="all"
@@ -465,44 +860,15 @@ Your primary content goes here. This area takes up most of the width while the s
 			>
 				<div class="flex flex-col h-full gap-4">
 
-					<!-- Header Section with Templates and Subject -->
+					<!-- Header Section with Subject -->
 					<div class="flex-shrink-0 p-4 pb-0 space-y-4">
-						<!-- Template Selector -->
-						${m(this.templates.length > 0, () => l`
-							<div class="space-y-3">
-								<schmancy-typography type="label" token="md">
-									Email Templates
-								</schmancy-typography>
-								<div class="flex flex-wrap gap-2">
-									${I(this.templates, (e) => e.id, (e) => l`
-										<schmancy-chip
-											?selected=${this.selectedTemplate === e.id}
-											@click=${() => this.selectTemplate(e.id)}
-											class="text-sm"
-										>
-											${e.name}
-										</schmancy-chip>
-									`)}
-									${m(this.selectedTemplate, () => l`
-										<schmancy-button
-											variant="text"
-											@click=${this.clearTemplate}
-										>
-											<schmancy-icon slot="prefix" size="16px">clear</schmancy-icon>
-											Clear
-										</schmancy-button>
-									`)}
-								</div>
-							</div>
-						`)}
-
 						<!-- Subject Field -->
 						<div class="space-y-2">
 							<schmancy-typography type="label" token="md">
 								Subject *
 							</schmancy-typography>
 							<schmancy-input
-								${C(this.subjectInputRef)}
+								${E(this.subjectInputRef)}
 								.value=${this.subject}
 								@input=${this.handleSubjectChange}
 								placeholder="Enter email subject..."
@@ -588,7 +954,7 @@ Your primary content goes here. This area takes up most of the width while the s
 										?disabled=${this.disabled || this.isUploading}
 										@click=${() => this.imageInputRef.value?.click()}
 									>
-										${m(this.isUploading, () => l`<schmancy-progress size="sm" class="w-4 h-4"></schmancy-progress>`, () => l`<schmancy-icon>image</schmancy-icon>`)}
+										${d(this.isUploading, () => c`<schmancy-progress size="sm" class="w-4 h-4"></schmancy-progress>`, () => c`<schmancy-icon>image</schmancy-icon>`)}
 									</schmancy-icon-button>
 									<schmancy-icon-button 
 										size="sm" 
@@ -597,7 +963,16 @@ Your primary content goes here. This area takes up most of the width while the s
 										?disabled=${this.disabled}
 										@click=${this.openLayoutDialog}
 									>
-										<schmancy-icon>view_column</schmancy-icon>
+										<schmancy-icon>mobile_layout</schmancy-icon>
+									</schmancy-icon-button>
+									<schmancy-icon-button 
+										size="sm" 
+										variant="text" 
+										title="Use Template" 
+										?disabled=${this.disabled || this.templates.length === 0}
+										@click=${this.openTemplatePicker}
+									>
+										<schmancy-icon>description</schmancy-icon>
 									</schmancy-icon-button>
 								</div>
 							</div>
@@ -607,7 +982,7 @@ Your primary content goes here. This area takes up most of the width while the s
 					<!-- Textarea Container - Takes remaining space -->
 					<div class="flex-1 px-4 relative min-h-0">
 						<schmancy-textarea
-							${C(this.bodyTextAreaRef)}
+							${E(this.bodyTextAreaRef)}
 							.value=${this.body}
 							@change=${this.handleBodyChange}
 							placeholder="Enter your email message here...
@@ -624,7 +999,7 @@ Tab key inserts 2 spaces for better formatting."
 						></schmancy-textarea>
 						
 						<!-- Upload Progress Overlay -->
-						${m(this.isUploading, () => l`
+						${d(this.isUploading, () => c`
 							<div class="absolute top-3 right-3 z-10">
 								<schmancy-surface type="container" rounded="all" class="p-2">
 									<div class="flex items-center gap-2">
@@ -646,14 +1021,14 @@ Tab key inserts 2 spaces for better formatting."
 						</div>
 
 						<!-- Attachments Display (if any) -->
-						${m(this.attachments.length > 0, () => l`
+						${d(this.attachments.length > 0, () => c`
 							<div class="space-y-2">
 								<schmancy-typography type="label" token="sm" class="flex items-center gap-2">
 									<schmancy-icon size="16px">attach_file</schmancy-icon>
 									Attachments (${this.attachments.length})
 								</schmancy-typography>
 								<div class="flex flex-wrap gap-2">
-									${I(this.attachments, (e) => e.id, (e) => l`
+									${I(this.attachments, (e) => e.id, (e) => c`
 										<schmancy-chip class="text-xs">
 											<span class="truncate max-w-32">${e.name}</span>
 											<button 
@@ -673,13 +1048,13 @@ Tab key inserts 2 spaces for better formatting."
 					<!-- Hidden File Inputs -->
 					<div class="hidden">
 						<input
-							${C(this.fileInputRef)}
+							${E(this.fileInputRef)}
 							type="file"
 							multiple
 							@change=${this.handleFileChange}
 						>
 						<input
-							${C(this.imageInputRef)}
+							${E(this.imageInputRef)}
 							type="file"
 							accept="image/*"
 							@change=${this.handleImageSelect}
@@ -688,15 +1063,16 @@ Tab key inserts 2 spaces for better formatting."
 
 				</div>
 			</schmancy-surface>
+
 		`;
   }
 };
-x([h({ type: String })], b.prototype, "subject", 2), x([h({ type: String })], b.prototype, "body", 2), x([h({ type: Array })], b.prototype, "templates", 2), x([h({ type: Boolean })], b.prototype, "disabled", 2), x([h({ type: Array })], b.prototype, "attachments", 2), x([h({ type: Object })], b.prototype, "config", 2), x([u()], b.prototype, "selectedTemplate", 2), x([u()], b.prototype, "dragOver", 2), x([u()], b.prototype, "isUploading", 2), b = x([k("schmancy-email-editor")], b);
-var P = Object.defineProperty, O = Object.getOwnPropertyDescriptor, w = (e, t, i, s) => {
-  for (var a, n = s > 1 ? void 0 : s ? O(t, i) : t, c = e.length - 1; c >= 0; c--) (a = e[c]) && (n = (s ? a(t, i, n) : a(n)) || n);
-  return s && n && P(t, i, n), n;
+x([h({ type: String })], b.prototype, "subject", 2), x([h({ type: String })], b.prototype, "body", 2), x([h({ type: Boolean })], b.prototype, "disabled", 2), x([h({ type: Array })], b.prototype, "attachments", 2), x([h({ type: Object })], b.prototype, "config", 2), x([h({ type: Array })], b.prototype, "templates", 2), x([y()], b.prototype, "dragOver", 2), x([y()], b.prototype, "isUploading", 2), b = x([C("schmancy-email-editor")], b);
+var W = Object.defineProperty, N = Object.getOwnPropertyDescriptor, $ = (e, t, s, i) => {
+  for (var a, n = i > 1 ? void 0 : i ? N(t, s) : t, r = e.length - 1; r >= 0; r--) (a = e[r]) && (n = (i ? a(t, s, n) : a(n)) || n);
+  return i && n && W(t, s, n), n;
 };
-let $ = class extends E(A`
+let w = class extends A(D`
 	:host {
 		display: block;
 	}
@@ -705,54 +1081,54 @@ let $ = class extends E(A`
     super(...arguments), this.subject = "", this.body = "", this.attachments = [], this.recipients = [], this.fromAddress = "sender@example.com", this.toAddress = "recipient@example.com", this.viewMode = "html";
   }
   parseLayoutBlocks(e) {
-    return e.replace(/:::layout\s+([a-zA-Z0-9-]+)\n([\s\S]*?)\n:::/g, (t, i, s) => {
-      switch (i) {
+    return e.replace(/:::layout\s+([a-zA-Z0-9-]+)\n([\s\S]*?)\n:::/g, (t, s, i) => {
+      switch (s) {
         case "columns-2":
-          return this.parseColumnsLayout(s, 2);
+          return this.parseColumnsLayout(i, 2);
         case "columns-3":
-          return this.parseColumnsLayout(s, 3);
+          return this.parseColumnsLayout(i, 3);
         case "sidebar-left":
-          return this.parseSidebarLayout(s, "left");
+          return this.parseSidebarLayout(i, "left");
         case "sidebar-right":
-          return this.parseSidebarLayout(s, "right");
+          return this.parseSidebarLayout(i, "right");
         case "image-row":
-          return this.parseImageRowLayout(s);
+          return this.parseImageRowLayout(i);
         default:
-          return s;
+          return i;
       }
     });
   }
   parseColumnsLayout(e, t) {
-    const i = /<div class="column">([\s\S]*?)<\/div>/g, s = [];
+    const s = /<div class="column">([\s\S]*?)<\/div>/g, i = [];
     let a;
-    for (; (a = i.exec(e)) !== null; ) s.push(a[1].trim());
-    if (s.length === 0) return e;
-    const n = Math.floor(100 / t), c = "0 10px 0 0";
-    let r = "<tr>";
-    for (let o = 0; o < t && o < s.length; o++)
-      r += `
-				<td width="${n}%" style="padding: ${o === t - 1 ? "0" : c}; vertical-align: top; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.6; color: #333333;">
-					${this.parseBasicMarkdown(s[o])}
+    for (; (a = s.exec(e)) !== null; ) i.push(a[1].trim());
+    if (i.length === 0) return e;
+    const n = Math.floor(100 / t), r = "0 10px 0 0";
+    let o = "<tr>";
+    for (let l = 0; l < t && l < i.length; l++)
+      o += `
+				<td width="${n}%" style="padding: ${l === t - 1 ? "0" : r}; vertical-align: top; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.6; color: #333333;">
+					${this.parseBasicMarkdown(i[l])}
 				</td>`;
-    for (let o = s.length; o < t; o++)
-      r += `
-				<td width="${n}%" style="padding: ${o === t - 1 ? "0" : c}; vertical-align: top;">
+    for (let l = i.length; l < t; l++)
+      o += `
+				<td width="${n}%" style="padding: ${l === t - 1 ? "0" : r}; vertical-align: top;">
 					&nbsp;
 				</td>`;
-    return r += "</tr>", `
+    return o += "</tr>", `
 			<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin: 16px 0;">
-				${r}
+				${o}
 			</table>`;
   }
   parseSidebarLayout(e, t) {
-    const i = e.match(/<div class="sidebar">([\s\S]*?)<\/div>/), s = e.match(/<div class="main">([\s\S]*?)<\/div>/);
-    if (!i || !s) return e;
+    const s = e.match(/<div class="sidebar">([\s\S]*?)<\/div>/), i = e.match(/<div class="main">([\s\S]*?)<\/div>/);
+    if (!s || !i) return e;
     const a = `
 			<td width="30%" style="padding: 0 16px 0 0; vertical-align: top; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.6; color: #333333;">
-				${this.parseBasicMarkdown(i[1].trim())}
+				${this.parseBasicMarkdown(s[1].trim())}
 			</td>`, n = `
 			<td width="70%" style="padding: 0; vertical-align: top; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.6; color: #333333;">
-				${this.parseBasicMarkdown(s[1].trim())}
+				${this.parseBasicMarkdown(i[1].trim())}
 			</td>`;
     return `
 			<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin: 16px 0;">
@@ -760,23 +1136,23 @@ let $ = class extends E(A`
 			</table>`;
   }
   parseImageRowLayout(e) {
-    const t = /<div class="image">([\s\S]*?)<\/div>/g, i = [];
-    let s;
-    for (; (s = t.exec(e)) !== null; ) {
-      const c = s[1].trim().match(/!\[([^\]]*)\]\(([^)]+)\)/);
-      if (c) {
-        const [, r, o] = c;
-        i.push(`<img src="${o}" alt="${r || "Image"}" style="display: block; max-width: 100%; height: auto;" border="0">`);
+    const t = /<div class="image">([\s\S]*?)<\/div>/g, s = [];
+    let i;
+    for (; (i = t.exec(e)) !== null; ) {
+      const r = i[1].trim().match(/!\[([^\]]*)\]\(([^)]+)\)/);
+      if (r) {
+        const [, o, l] = r;
+        s.push(`<img src="${l}" alt="${o || "Image"}" style="display: block; max-width: 100%; height: auto;" border="0">`);
       }
     }
-    if (i.length === 0) return e;
-    const a = Math.floor(100 / i.length);
+    if (s.length === 0) return e;
+    const a = Math.floor(100 / s.length);
     let n = "<tr>";
-    return i.forEach((c, r) => {
-      const o = r === i.length - 1;
+    return s.forEach((r, o) => {
+      const l = o === s.length - 1;
       n += `
-				<td width="${a}%" style="padding: ${o ? "0" : "0 8px 0 0"}; vertical-align: top; text-align: center;">
-					${c}
+				<td width="${a}%" style="padding: ${l ? "0" : "0 8px 0 0"}; vertical-align: top; text-align: center;">
+					${r}
 				</td>`;
     }), n += "</tr>", `
 			<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin: 16px 0;">
@@ -786,34 +1162,34 @@ let $ = class extends E(A`
   parseImageAttributes(e) {
     const t = {};
     if (!e) return t;
-    const i = e.match(/width=([^\s}]+)/);
-    i && (t.width = i[1]);
-    const s = e.match(/height=([^\s}]+)/);
-    return s && (t.height = s[1]), e.includes("cover") && (t.cover = !0), e.includes("contain") && (t.contain = !0), t;
+    const s = e.match(/width=([^\s}]+)/);
+    s && (t.width = s[1]);
+    const i = e.match(/height=([^\s}]+)/);
+    return i && (t.height = i[1]), e.includes("cover") && (t.cover = !0), e.includes("contain") && (t.contain = !0), t;
   }
   generateImageStyles(e, t = !1) {
-    let i, s, a = "display: block; margin: 8px 0; border: 0;";
-    return e.width ? e.width === "auto" ? a += t ? " max-width: 100%; height: auto;" : " height: auto;" : e.width.endsWith("%") ? (a += ` width: ${e.width}; max-width: 100%;`, e.height || (a += " height: auto;")) : e.width.endsWith("px") && (i = e.width.replace("px", ""), a += " max-width: 100%;", e.height || (a += " height: auto;")) : a += t ? " width: 100%; max-width: 100%; height: auto;" : " max-width: 100%; height: auto;", e.height && (e.height === "auto" ? a += " height: auto;" : e.height.endsWith("px") && (s = e.height.replace("px", ""), e.width || (a += " max-width: 100%;"))), (e.cover || e.contain) && (e.width || e.height || (a += " width: 100%;")), { imgStyle: a, imgWidth: i, imgHeight: s };
+    let s, i, a = "display: block; margin: 8px 0; border: 0;";
+    return e.width ? e.width === "auto" ? a += t ? " max-width: 100%; height: auto;" : " height: auto;" : e.width.endsWith("%") ? (a += ` width: ${e.width}; max-width: 100%;`, e.height || (a += " height: auto;")) : e.width.endsWith("px") && (s = e.width.replace("px", ""), a += " max-width: 100%;", e.height || (a += " height: auto;")) : a += t ? " width: 100%; max-width: 100%; height: auto;" : " max-width: 100%; height: auto;", e.height && (e.height === "auto" ? a += " height: auto;" : e.height.endsWith("px") && (i = e.height.replace("px", ""), e.width || (a += " max-width: 100%;"))), (e.cover || e.contain) && (e.width || e.height || (a += " width: 100%;")), { imgStyle: a, imgWidth: s, imgHeight: i };
   }
   parseBasicMarkdown(e) {
-    return e.replace(/!\[([^\]]*)\]\(([^)]+)\)(?:\{([^}]+)\})?/g, (t, i, s, a) => {
-      const n = this.parseImageAttributes(a), { imgStyle: c, imgWidth: r, imgHeight: o } = this.generateImageStyles(n, !0);
-      let d = `<img src="${s}" alt="${i || "Image"}" style="${c}" border="0"`;
-      return r && (d += ` width="${r}"`), o && (d += ` height="${o}"`), d += ">", d;
+    return e.replace(/!\[([^\]]*)\]\(([^)]+)\)(?:\{([^}]+)\})?/g, (t, s, i, a) => {
+      const n = this.parseImageAttributes(a), { imgStyle: r, imgWidth: o, imgHeight: l } = this.generateImageStyles(n, !0);
+      let p = `<img src="${i}" alt="${s || "Image"}" style="${r}" border="0"`;
+      return o && (p += ` width="${o}"`), l && (p += ` height="${l}"`), p += ">", p;
     }).replace(/\n\n/g, '</p><p style="margin: 0 0 16px 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.6; color: #333333;">').replace(/\n/g, "<br>").replace(/\*\*(.*?)\*\*/g, '<strong style="font-weight: bold;">$1</strong>').replace(/\*(.*?)\*/g, '<em style="font-style: italic;">$1</em>').replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" style="color: #0066cc; text-decoration: underline;">$1</a>').replace(/^# (.*$)/gim, '<h2 style="margin: 16px 0 8px 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold; color: #1a1a1a;">$1</h2>').replace(/^\* (.*$)/gim, '<li style="margin: 4px 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333;">$1</li>').replace(/^\d+\. (.*$)/gim, '<li style="margin: 4px 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333;">$1</li>').replace(/(<li[^>]*>.*?<\/li>(?:\s*<li[^>]*>.*?<\/li>)*)/gs, (t) => {
-      const i = /^\d+\./.test(t.replace(/<[^>]*>/g, "")) ? "ol" : "ul";
-      return `<${i} style="margin: 8px 0; padding: 0 0 0 20px; font-family: Arial, Helvetica, sans-serif;">${t}</${i}>`;
+      const s = /^\d+\./.test(t.replace(/<[^>]*>/g, "")) ? "ol" : "ul";
+      return `<${s} style="margin: 8px 0; padding: 0 0 0 20px; font-family: Arial, Helvetica, sans-serif;">${t}</${s}>`;
     }).replace(/^(?!<[h\d]|<p|<ul|<ol|<li|<img)(.+)$/gim, '<p style="margin: 0 0 16px 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.6; color: #333333;">$1</p>');
   }
   parseExtendedMarkdown(e) {
     let t = e;
-    return t = this.parseLayoutBlocks(t), t = t.replace(/:::images\s+(row|grid(?:=\d+)?)\n((?:!\[.*?\]\(.*?\)(?:\{.*?\})?\s*\n?)*?):::/g, "[Multiple Images - View in web browser]"), t = t.replace(/!\[([^\]]*)\]\(([^)]+)\)(?:\{([^}]+)\})?/g, (i, s, a, n) => {
-      const c = this.parseImageAttributes(n), { imgStyle: r, imgWidth: o, imgHeight: d } = this.generateImageStyles(c, !1);
-      let S = `<img src="${a}" alt="${s || "Image"}" style="${r}" border="0"`;
-      return o && (S += ` width="${o}"`), d && (S += ` height="${d}"`), S += ">", `<table cellpadding="0" cellspacing="0" border="0" style="margin: 16px 0;"><tr><td>${S}</td></tr></table>`;
-    }), t = t.replace(/\n\n/g, '</p><p style="margin: 0 0 16px 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.6; color: #333333;">').replace(/\n/g, "<br>").replace(/\*\*(.*?)\*\*/g, '<strong style="font-weight: bold;">$1</strong>').replace(/\*(.*?)\*/g, '<em style="font-style: italic;">$1</em>').replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" style="color: #0066cc; text-decoration: underline;">$1</a>').replace(/^# (.*$)/gim, '<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin: 24px 0 16px 0;"><tr><td><h1 style="margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold; color: #1a1a1a;">$1</h1></td></tr></table>').replace(/^\* (.*$)/gim, '<li style="margin: 4px 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333;">$1</li>').replace(/^\d+\. (.*$)/gim, '<li style="margin: 4px 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333;">$1</li>').replace(/^---$/gim, '<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin: 24px 0;"><tr><td style="border-top: 1px solid #e0e0e0; height: 1px; line-height: 1px;">&nbsp;</td></tr></table>'), t = t.replace(/(<li[^>]*>.*?<\/li>(?:\s*<li[^>]*>.*?<\/li>)*)/gs, (i) => {
-      const s = /^\d+\./.test(i.replace(/<[^>]*>/g, "")), a = s ? "ol" : "ul";
-      return `<table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td><${a} style="margin: 16px 0; padding: 0 0 0 20px; font-family: Arial, Helvetica, sans-serif;">${i}</${a}></td></tr></table>`;
+    return t = this.parseLayoutBlocks(t), t = t.replace(/:::images\s+(row|grid(?:=\d+)?)\n((?:!\[.*?\]\(.*?\)(?:\{.*?\})?\s*\n?)*?):::/g, "[Multiple Images - View in web browser]"), t = t.replace(/!\[([^\]]*)\]\(([^)]+)\)(?:\{([^}]+)\})?/g, (s, i, a, n) => {
+      const r = this.parseImageAttributes(n), { imgStyle: o, imgWidth: l, imgHeight: p } = this.generateImageStyles(r, !1);
+      let S = `<img src="${a}" alt="${i || "Image"}" style="${o}" border="0"`;
+      return l && (S += ` width="${l}"`), p && (S += ` height="${p}"`), S += ">", `<table cellpadding="0" cellspacing="0" border="0" style="margin: 16px 0;"><tr><td>${S}</td></tr></table>`;
+    }), t = t.replace(/\n\n/g, '</p><p style="margin: 0 0 16px 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.6; color: #333333;">').replace(/\n/g, "<br>").replace(/\*\*(.*?)\*\*/g, '<strong style="font-weight: bold;">$1</strong>').replace(/\*(.*?)\*/g, '<em style="font-style: italic;">$1</em>').replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" style="color: #0066cc; text-decoration: underline;">$1</a>').replace(/^# (.*$)/gim, '<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin: 24px 0 16px 0;"><tr><td><h1 style="margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold; color: #1a1a1a;">$1</h1></td></tr></table>').replace(/^\* (.*$)/gim, '<li style="margin: 4px 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333;">$1</li>').replace(/^\d+\. (.*$)/gim, '<li style="margin: 4px 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333;">$1</li>').replace(/^---$/gim, '<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin: 24px 0;"><tr><td style="border-top: 1px solid #e0e0e0; height: 1px; line-height: 1px;">&nbsp;</td></tr></table>'), t = t.replace(/(<li[^>]*>.*?<\/li>(?:\s*<li[^>]*>.*?<\/li>)*)/gs, (s) => {
+      const i = /^\d+\./.test(s.replace(/<[^>]*>/g, "")), a = i ? "ol" : "ul";
+      return `<table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td><${a} style="margin: 16px 0; padding: 0 0 0 20px; font-family: Arial, Helvetica, sans-serif;">${s}</${a}></td></tr></table>`;
     }), t.includes("<table>") || t.includes("<h1>") || (t = `<p style="margin: 0 0 16px 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.6; color: #333333;">${t}</p>`), t = `<table cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width: 600px; margin: 0 auto;">
 			<tr>
 				<td style="padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.6; color: #333333;">
@@ -823,7 +1199,7 @@ let $ = class extends E(A`
 		</table>`, t;
   }
   convertToPlainText(e) {
-    return e.trim().replace(/:::layout\s+([a-zA-Z0-9-]+)\n([\s\S]*?)\n:::/g, (t, i, s) => s.replace(/<div class="(?:column|sidebar|main|image)">/g, `
+    return e.trim().replace(/:::layout\s+([a-zA-Z0-9-]+)\n([\s\S]*?)\n:::/g, (t, s, i) => i.replace(/<div class="(?:column|sidebar|main|image)">/g, `
 `).replace(/<\/div>/g, `
 `).replace(/\n{3,}/g, `
 
@@ -837,8 +1213,8 @@ let $ = class extends E(A`
     return parseFloat((e / Math.pow(1024, t)).toFixed(2)) + " " + ["Bytes", "KB", "MB", "GB"][t];
   }
   render() {
-    const e = this.parseExtendedMarkdown(this.body), t = this.convertToPlainText(this.body), i = this.recipients[0] || this.toAddress;
-    return l`
+    const e = this.parseExtendedMarkdown(this.body), t = this.convertToPlainText(this.body), s = this.recipients[0] || this.toAddress;
+    return c`
 			<schmancy-surface type="surface" rounded="all" class="h-full flex flex-col">
 				
 				<!-- Header Section -->
@@ -912,7 +1288,7 @@ let $ = class extends E(A`
 											</schmancy-typography>
 										</div>
 										<schmancy-typography type="body" token="sm" class="break-all flex-1">
-											${i}
+											${s}
 										</schmancy-typography>
 									</div>
 									
@@ -925,7 +1301,7 @@ let $ = class extends E(A`
 											</schmancy-typography>
 										</div>
 										<schmancy-typography type="body" token="sm" class="font-medium flex-1">
-											${this.subject || l`<span class="italic text-surface-onVariant">(No subject)</span>`}
+											${this.subject || c`<span class="italic text-surface-onVariant">(No subject)</span>`}
 										</schmancy-typography>
 									</div>
 								</div>
@@ -933,17 +1309,17 @@ let $ = class extends E(A`
 
 							<!-- Email Body Content -->
 							<div class="flex-1 overflow-y-auto min-h-0">
-								${m(this.body, () => l`
-										${m(this.viewMode === "html", () => l`
+								${d(this.body, () => c`
+										${d(this.viewMode === "html", () => c`
 												<div class="p-6 bg-white" style="color: #333; line-height: 1.6; font-family: system-ui, -apple-system, sans-serif; font-size: 14px;">
 													<div .innerHTML=${e}></div>
 												</div>
-											`, () => l`
+											`, () => c`
 												<div class="p-6 bg-white" style="color: #333; line-height: 1.6; font-family: 'Courier New', monospace; font-size: 13px; white-space: pre-wrap;">
 													${t}
 												</div>
 											`)}
-									`, () => l`
+									`, () => c`
 										<!-- Empty State -->
 										<div class="flex-1 flex items-center justify-center p-8">
 											<div class="text-center space-y-3">
@@ -960,7 +1336,7 @@ let $ = class extends E(A`
 							</div>
 
 							<!-- Attachments Section -->
-							${m(this.attachments.length > 0, () => l`
+							${d(this.attachments.length > 0, () => c`
 								<div class="flex-shrink-0 p-4 border-t border-outline-variant bg-surface-containerLowest">
 									<div class="space-y-3">
 										<!-- Attachments Header -->
@@ -973,21 +1349,21 @@ let $ = class extends E(A`
 										
 										<!-- Attachments List -->
 										<div class="grid gap-2 sm:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
-											${I(this.attachments, (s) => s.id, (s) => l`
+											${I(this.attachments, (i) => i.id, (i) => c`
 												<schmancy-surface type="container" rounded="all" class="p-3">
 													<div class="flex items-center gap-3">
 														<!-- File Icon -->
 														<schmancy-icon size="20px" class="text-surface-onVariant flex-shrink-0">
-															${s.type.startsWith("image/") ? "image" : s.type.includes("pdf") ? "picture_as_pdf" : s.type.includes("text") ? "description" : "attach_file"}
+															${i.type.startsWith("image/") ? "image" : i.type.includes("pdf") ? "picture_as_pdf" : i.type.includes("text") ? "description" : "attach_file"}
 														</schmancy-icon>
 														
 														<!-- File Info -->
 														<div class="flex-1 min-w-0">
 															<schmancy-typography type="body" token="sm" class="font-medium truncate">
-																${s.name}
+																${i.name}
 															</schmancy-typography>
 															<schmancy-typography type="body" token="xs" class="text-surface-onVariant">
-																${this.formatFileSize(s.size)} • ${s.type}
+																${this.formatFileSize(i.size)} • ${i.type}
 															</schmancy-typography>
 														</div>
 													</div>
@@ -1001,7 +1377,7 @@ let $ = class extends E(A`
 					</div>
 					
 					<!-- Preview Stats -->
-					${m(this.body, () => l`
+					${d(this.body, () => c`
 						<div class="flex-shrink-0">
 							<schmancy-surface type="container" rounded="all" class="p-3">
 								<div class="flex items-center justify-center gap-6 text-center">
@@ -1022,7 +1398,7 @@ let $ = class extends E(A`
 											${this.body.trim() ? this.body.trim().split(/\s+/).length : 0}
 										</schmancy-typography>
 									</div>
-									${m(this.attachments.length > 0, () => l`
+									${d(this.attachments.length > 0, () => c`
 										<div class="w-px h-8 bg-outline-variant"></div>
 										<div>
 											<schmancy-typography type="body" token="xs" class="text-surface-onVariant">
@@ -1043,25 +1419,25 @@ let $ = class extends E(A`
 		`;
   }
 };
-w([h({ type: String })], $.prototype, "subject", 2), w([h({ type: String })], $.prototype, "body", 2), w([h({ type: Array })], $.prototype, "attachments", 2), w([h({ type: Array })], $.prototype, "recipients", 2), w([h({ type: String })], $.prototype, "fromAddress", 2), w([h({ type: String })], $.prototype, "toAddress", 2), w([u()], $.prototype, "viewMode", 2), $ = w([k("schmancy-email-viewer")], $);
-var H = Object.defineProperty, V = Object.getOwnPropertyDescriptor, f = (e, t, i, s) => {
-  for (var a, n = s > 1 ? void 0 : s ? V(t, i) : t, c = e.length - 1; c >= 0; c--) (a = e[c]) && (n = (s ? a(t, i, n) : a(n)) || n);
-  return s && n && H(t, i, n), n;
+$([h({ type: String })], w.prototype, "subject", 2), $([h({ type: String })], w.prototype, "body", 2), $([h({ type: Array })], w.prototype, "attachments", 2), $([h({ type: Array })], w.prototype, "recipients", 2), $([h({ type: String })], w.prototype, "fromAddress", 2), $([h({ type: String })], w.prototype, "toAddress", 2), $([y()], w.prototype, "viewMode", 2), w = $([C("schmancy-email-viewer")], w);
+var Q = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, f = (e, t, s, i) => {
+  for (var a, n = i > 1 ? void 0 : i ? _(t, s) : t, r = e.length - 1; r >= 0; r--) (a = e[r]) && (n = (i ? a(t, s, n) : a(n)) || n);
+  return i && n && Q(t, s, n), n;
 };
-let g = class extends E(A`
+let g = class extends A(D`
 	:host {
 		display: block;
 		height: 100%;
 	}
 `) {
   constructor() {
-    super(...arguments), this.disabled = !1, this.recipients = [], this.selectedRecipients = [], this.enableCsvImport = !0, this.enableDragDrop = !0, this.title = "Recipients", this.emptyStateTitle = "No recipients yet", this.emptyStateMessage = "Import from sources or upload a CSV", this.dragOver = !1, this.localSelectedRecipients = /* @__PURE__ */ new Set(), this.searchQuery = "", this.filteredRecipients = [], this.boatState = "minimized", this.fileInputRef = R(), this.handleEmailsImported = () => {
+    super(...arguments), this.disabled = !1, this.recipients = [], this.selectedRecipients = [], this.enableCsvImport = !0, this.enableDragDrop = !0, this.title = "Recipients", this.emptyStateTitle = "No recipients yet", this.emptyStateMessage = "Import from sources or upload a CSV", this.dragOver = !1, this.localSelectedRecipients = /* @__PURE__ */ new Set(), this.searchQuery = "", this.filteredRecipients = [], this.boatState = "minimized", this.fileInputRef = T(), this.handleEmailsImported = () => {
       this.updateFilteredRecipients(), this.requestUpdate();
     }, this.handleImportFromCSV = () => {
       this.enableCsvImport && this.fileInputRef.value?.click();
     }, this.handleFileSelect = (e) => {
-      const t = e.target, i = t.files?.[0];
-      i && this.processCSVFile(i);
+      const t = e.target, s = t.files?.[0];
+      s && this.processCSVFile(s);
     }, this.handleDrop = (e) => {
       if (!this.enableDragDrop) return;
       e.preventDefault(), this.dragOver = !1;
@@ -1070,10 +1446,10 @@ let g = class extends E(A`
     }, this.processCSVFile = (e) => {
       if (!e.name.endsWith(".csv")) return void v.error("Please select a CSV file");
       const t = new FileReader();
-      t.onload = (i) => {
-        const s = i.target?.result;
+      t.onload = (s) => {
+        const i = s.target?.result;
         try {
-          const a = this.parseCSV(s);
+          const a = this.parseCSV(i);
           if (a.length === 0) return void v.error("No valid email addresses found in CSV");
           this.dispatchEvent(new CustomEvent("emails-imported", { detail: { emails: a, source: "csv" }, bubbles: !0, composed: !0 })), v.success(`Imported ${a.length} emails from CSV file`);
         } catch {
@@ -1094,7 +1470,7 @@ let g = class extends E(A`
       const e = Array.isArray(this.recipients) ? this.recipients : [];
       if (this.searchQuery.trim()) {
         const t = this.searchQuery.toLowerCase();
-        this.filteredRecipients = e.filter((i) => i.toLowerCase().includes(t));
+        this.filteredRecipients = e.filter((s) => s.toLowerCase().includes(t));
       } else this.filteredRecipients = [...e];
     }, this.handleSearchInput = (e) => {
       const t = e.target;
@@ -1115,24 +1491,24 @@ let g = class extends E(A`
   }
   parseCSV(e) {
     const t = [];
-    let i;
-    i = this.csvParser ? this.csvParser.parse(e, { header: !0, skipEmptyLines: !0, dynamicTyping: !0, delimiter: "", transformHeader: (r) => r.trim() }) : this.simpleCSVParse(e);
-    const s = i.data, a = i.meta.fields || [];
-    let n = a.find((r) => r.toLowerCase().includes("email"));
-    if (!n) for (const r of a) {
-      const o = s[0]?.[r]?.toString();
-      if (o && this.isValidEmail(o)) {
-        n = r;
+    let s;
+    s = this.csvParser ? this.csvParser.parse(e, { header: !0, skipEmptyLines: !0, dynamicTyping: !0, delimiter: "", transformHeader: (o) => o.trim() }) : this.simpleCSVParse(e);
+    const i = s.data, a = s.meta.fields || [];
+    let n = a.find((o) => o.toLowerCase().includes("email"));
+    if (!n) for (const o of a) {
+      const l = i[0]?.[o]?.toString();
+      if (l && this.isValidEmail(l)) {
+        n = o;
         break;
       }
     }
     if (!n) throw new Error("No email column found in CSV");
-    const c = /* @__PURE__ */ new Set();
-    for (const r of s) {
-      const o = r[n]?.toString();
-      if (!o) continue;
-      const d = o.toLowerCase().trim();
-      this.isValidEmail(d) && !c.has(d) && (c.add(d), t.push(d));
+    const r = /* @__PURE__ */ new Set();
+    for (const o of i) {
+      const l = o[n]?.toString();
+      if (!l) continue;
+      const p = l.toLowerCase().trim();
+      this.isValidEmail(p) && !r.has(p) && (r.add(p), t.push(p));
     }
     return t;
   }
@@ -1140,22 +1516,22 @@ let g = class extends E(A`
     const t = e.split(`
 `).filter((a) => a.trim());
     if (t.length === 0) return { data: [], meta: {} };
-    const i = t[0].split(",").map((a) => a.trim().replace(/"/g, "")), s = [];
+    const s = t[0].split(",").map((a) => a.trim().replace(/"/g, "")), i = [];
     for (let a = 1; a < t.length; a++) {
-      const n = t[a].split(",").map((r) => r.trim().replace(/"/g, "")), c = {};
-      i.forEach((r, o) => {
-        c[r] = n[o] || "";
-      }), s.push(c);
+      const n = t[a].split(",").map((o) => o.trim().replace(/"/g, "")), r = {};
+      s.forEach((o, l) => {
+        r[o] = n[l] || "";
+      }), i.push(r);
     }
-    return { data: s, meta: { fields: i } };
+    return { data: i, meta: { fields: s } };
   }
   isValidEmail(e) {
     return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e.trim());
   }
   addRecipients(e) {
     if (!e.length) return;
-    const t = [.../* @__PURE__ */ new Set([...this.recipients, ...e])], i = e.filter((s) => !this.recipients.includes(s));
-    this.recipients = t, this.selectedRecipients = [.../* @__PURE__ */ new Set([...this.selectedRecipients, ...i])], this.localSelectedRecipients = new Set(this.selectedRecipients), this.updateFilteredRecipients(), this.requestUpdate();
+    const t = [.../* @__PURE__ */ new Set([...this.recipients, ...e])], s = e.filter((i) => !this.recipients.includes(i));
+    this.recipients = t, this.selectedRecipients = [.../* @__PURE__ */ new Set([...this.selectedRecipients, ...s])], this.localSelectedRecipients = new Set(this.selectedRecipients), this.updateFilteredRecipients(), this.requestUpdate();
   }
   showBoat() {
     this.boatState = "minimized";
@@ -1173,13 +1549,13 @@ let g = class extends E(A`
     return this.renderBoatLayout();
   }
   renderBoatLayout() {
-    return l`
+    return c`
 			<!-- Hidden file input for CSV import -->
-			${m(this.enableCsvImport, () => l`
+			${d(this.enableCsvImport, () => c`
 				<input
 					type="file"
 					accept=".csv"
-					${C(this.fileInputRef)}
+					${E(this.fileInputRef)}
 					@change=${this.handleFileSelect}
 					class="hidden"
 				/>
@@ -1196,7 +1572,7 @@ let g = class extends E(A`
 						<schmancy-typography type="title" token="md" class="font-semibold">
 							${this.title}
 						</schmancy-typography>
-						${m(this.recipients.length > 0, () => l`
+						${d(this.recipients.length > 0, () => c`
 							<schmancy-badge>
 								${this.localSelectedRecipients.size}/${this.recipients.length}
 							</schmancy-badge>
@@ -1212,7 +1588,7 @@ let g = class extends E(A`
 		`;
   }
   renderBoatContent() {
-    return l`
+    return c`
 			<!-- Search Bar and CSV Import on one line -->
 			<div class="p-4 flex gap-3">
 				<schmancy-input
@@ -1222,7 +1598,7 @@ let g = class extends E(A`
 					@input=${this.handleSearchInput}
 					class="flex-1"
 				>
-					${m(this.searchQuery, () => l`
+					${d(this.searchQuery, () => c`
 						<schmancy-button
 							slot="suffix" 
 							variant="text"
@@ -1233,7 +1609,7 @@ let g = class extends E(A`
 					`)}
 				</schmancy-input>
 				
-				${m(this.enableCsvImport, () => l`
+				${d(this.enableCsvImport, () => c`
 					<schmancy-button
 						variant="outlined"
 						@click=${this.handleImportFromCSV}
@@ -1245,7 +1621,7 @@ let g = class extends E(A`
 				`)}
 			</div>
 
-			${m(this.recipients.length > 0, () => l`
+			${d(this.recipients.length > 0, () => c`
 				<!-- Bulk Actions -->
 				<div class="px-4 pb-4">
 					<div class="flex items-center gap-3">
@@ -1278,9 +1654,9 @@ let g = class extends E(A`
 
 				<!-- Recipients List -->
 				<div class="flex-1 overflow-y-auto px-4 pb-4">
-					${m(this.filteredRecipients.length > 0, () => l`
+					${d(this.filteredRecipients.length > 0, () => c`
 							<div class="flex flex-wrap gap-3">
-								${I(this.filteredRecipients, (e) => e, (e) => l`
+								${I(this.filteredRecipients, (e) => e, (e) => c`
 										<schmancy-button
 											variant=${this.localSelectedRecipients.has(e) ? "filled" : "outlined"}
 											@click=${(t) => {
@@ -1299,7 +1675,7 @@ let g = class extends E(A`
 										</schmancy-button>
 									`)}
 							</div>
-						`, () => l`
+						`, () => c`
 							<div class="text-center py-8">
 								<schmancy-icon size="32px" class="opacity-50 mb-2">search_off</schmancy-icon>
 								<schmancy-typography type="body" token="sm" class="mb-2">
@@ -1311,7 +1687,7 @@ let g = class extends E(A`
 							</div>
 						`)}
 				</div>
-			`, () => l`
+			`, () => c`
 				<!-- Empty State -->
 				<div class="flex-1 flex items-center justify-center p-8">
 					<div class="text-center space-y-4">
@@ -1327,7 +1703,7 @@ let g = class extends E(A`
 			`)}
 
 			<!-- Drag Overlay -->
-			${m(this.dragOver && this.enableDragDrop, () => l`
+			${d(this.dragOver && this.enableDragDrop, () => c`
 					<div 
 						class="absolute inset-4 flex items-center justify-center border-2 border-dashed border-primary rounded-lg z-10"
 						@dragover=${(e) => {
@@ -1347,12 +1723,12 @@ let g = class extends E(A`
 		`;
   }
 };
-f([h({ type: Boolean })], g.prototype, "disabled", 2), f([h({ type: Array })], g.prototype, "recipients", 2), f([h({ type: Array })], g.prototype, "selectedRecipients", 2), f([h({ type: Boolean })], g.prototype, "enableCsvImport", 2), f([h({ type: Boolean })], g.prototype, "enableDragDrop", 2), f([h({ type: String })], g.prototype, "title", 2), f([h({ type: String })], g.prototype, "emptyStateTitle", 2), f([h({ type: String })], g.prototype, "emptyStateMessage", 2), f([h({ type: Object })], g.prototype, "csvParser", 2), f([u()], g.prototype, "dragOver", 2), f([u()], g.prototype, "localSelectedRecipients", 2), f([u()], g.prototype, "searchQuery", 2), f([u()], g.prototype, "filteredRecipients", 2), f([u()], g.prototype, "boatState", 2), g = f([k("schmancy-email-recipients")], g);
+f([h({ type: Boolean })], g.prototype, "disabled", 2), f([h({ type: Array })], g.prototype, "recipients", 2), f([h({ type: Array })], g.prototype, "selectedRecipients", 2), f([h({ type: Boolean })], g.prototype, "enableCsvImport", 2), f([h({ type: Boolean })], g.prototype, "enableDragDrop", 2), f([h({ type: String })], g.prototype, "title", 2), f([h({ type: String })], g.prototype, "emptyStateTitle", 2), f([h({ type: String })], g.prototype, "emptyStateMessage", 2), f([h({ type: Object })], g.prototype, "csvParser", 2), f([y()], g.prototype, "dragOver", 2), f([y()], g.prototype, "localSelectedRecipients", 2), f([y()], g.prototype, "searchQuery", 2), f([y()], g.prototype, "filteredRecipients", 2), f([y()], g.prototype, "boatState", 2), g = f([C("schmancy-email-recipients")], g);
 export {
-  p as S,
+  m as S,
   b as a,
-  $ as b,
+  w as b,
   g as c,
   z as d
 };
-//# sourceMappingURL=email-recipients-DQ36ickQ.js.map
+//# sourceMappingURL=email-recipients-CpghUhQ1.js.map