@mhmo91/schmancy 0.4.67 → 0.4.69

package/dist/email-recipients-DQ36ickQ.js

@@ -0,0 +1,1358 @@
+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 { 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;
+};
+let p = class extends E(A`
+	:host {
+		display: block;
+		height: 100%;
+	}
+`) {
+  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 }));
+    }, 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.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 }));
+    }, this.handleSend = async () => {
+      if (this.selectedRecipients.length !== 0) if (this.subject.trim()) if (this.body.trim()) {
+        this.isSending = !0;
+        try {
+          const e = { recipients: this.selectedRecipients, subject: this.subject, body: this.body, attachments: this.attachments, templateId: this.templateId };
+          this.dispatchEvent(new CustomEvent("send-email", { detail: { request: e }, bubbles: !0, composed: !0 }));
+        } catch (e) {
+          this.dispatchEvent(new CustomEvent("send-error", { detail: { error: e instanceof Error ? e.message : "Failed to send email" }, bubbles: !0, composed: !0 }));
+        } finally {
+          this.isSending = !1;
+        }
+      } else this.dispatchEvent(new CustomEvent("send-error", { detail: { error: "Please enter a message body" }, bubbles: !0, composed: !0 }));
+      else this.dispatchEvent(new CustomEvent("send-error", { detail: { error: "Please enter a subject" }, bubbles: !0, composed: !0 }));
+      else this.dispatchEvent(new CustomEvent("send-error", { detail: { error: "Please select at least one recipient" }, bubbles: !0, composed: !0 }));
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setSending(this.disabled);
+  }
+  updated(e) {
+    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])];
+  }
+  setSubject(e) {
+    this.subject = e;
+  }
+  setBody(e) {
+    this.body = e;
+  }
+  setTemplate(e) {
+    this.templateId = e;
+  }
+  clearCompose() {
+    this.recipients = [], this.selectedRecipients = [], this.subject = "", this.body = "", this.templateId = null, this.attachments = [];
+  }
+  setSending(e) {
+    this.isSending = e;
+  }
+  render() {
+    const e = this.selectedRecipients.length > 0 && this.subject.trim() && this.body.trim() && !this.isSending && !this.disabled;
+    return l`
+			<!-- Main Layout Container -->
+			<div class="flex flex-col h-full gap-6 p-6">
+				
+				<!-- Main Content Section: Composer and Preview -->
+				<div class="flex flex-col xl:flex-row gap-6 flex-1 min-h-0">
+					
+					<!-- Composer Section - Full width on mobile/tablet, half on large screens -->
+					<div class="w-full xl:w-1/2 min-h-0 flex flex-col">
+						<schmancy-email-editor
+							.subject=${this.subject}
+							.body=${this.body}
+							.templates=${this.templates}
+							.attachments=${this.attachments}
+							.disabled=${this.disabled}
+							.config=${this.config}
+							@editor-change=${this.handleEditorChange}
+							class="h-full"
+						></schmancy-email-editor>
+					</div>
+
+					<!-- Preview Section - Full width on mobile/tablet, half on large screens -->
+					<div class="w-full xl:w-1/2 min-h-0 flex flex-col">
+						<schmancy-email-viewer
+							.subject=${this.subject}
+							.body=${this.body}
+							.recipients=${this.selectedRecipients}
+							.attachments=${this.attachments}
+							class="h-full"
+						></schmancy-email-viewer>
+					</div>
+					
+				</div>
+
+				<!-- Send Section - Sticky bottom bar -->
+				<div class="flex-shrink-0">
+					<schmancy-surface 
+						type="container" 
+						rounded="all" 
+						class="p-4"
+					>
+						<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+							<!-- Send Info -->
+							<div class="flex flex-col gap-1">
+								<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`
+									<schmancy-typography type="body" token="xs">
+										${this.attachments.length} attachment${this.attachments.length === 1 ? "" : "s"}
+									</schmancy-typography>
+								`)}
+							</div>
+
+							<!-- Send Button -->
+							<schmancy-button
+								variant="filled"
+								?disabled=${!e}
+								?loading=${this.isSending}
+								@click=${this.handleSend}
+								class="w-full sm:w-auto"
+							>
+								<schmancy-icon slot="prefix" size="18px">send</schmancy-icon>
+								${this.isSending ? "Sending..." : "Send Email"}
+							</schmancy-button>
+						</div>
+					</schmancy-surface>
+				</div>
+				
+			</div>
+
+			<!-- Recipients Panel as Floating Boat -->
+			<schmancy-email-recipients
+				.recipients=${this.recipients}
+				.selectedRecipients=${this.selectedRecipients}
+				.importSources=${this.importSources}
+				.disabled=${this.disabled}
+				.enableCsvImport=${this.enableCsvImport}
+				.enableDragDrop=${this.enableDragDrop}
+				.title=${this.recipientsTitle}
+				.emptyStateTitle=${this.recipientsEmptyTitle}
+				.emptyStateMessage=${this.recipientsEmptyMessage}
+				@emails-imported=${this.handleEmailsImported}
+				@recipient-removed=${this.handleRecipientRemoved}
+				@recipients-cleared=${this.handleRecipientsCleared}
+				@selection-changed=${this.handleSelectionChanged}
+			></schmancy-email-recipients>
+		`;
+  }
+};
+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() {
+  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" }];
+  }
+  selectLayout(e) {
+    this.dispatchEvent(new CustomEvent("layout-select", { detail: { layout: e }, bubbles: !0, composed: !0 }));
+  }
+  render() {
+    return l`
+			<div class="grid p-3 gap-2">
+				${this.layouts.map((e) => l`
+					<schmancy-button 
+						variant="outlined"
+						@click=${() => this.selectLayout(e.id)}
+					>
+						<schmancy-icon 
+							slot="prefix"
+							size="20px"
+							class=${e.flipped ? "scale-x-[-1]" : ""}
+						>
+							${e.icon}
+						</schmancy-icon>
+						${e.label}
+					</schmancy-button>
+				`)}
+			</div>
+		`;
+  }
+};
+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);
+  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;
+};
+let b = class extends E(A`
+	: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) => {
+      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];
+        if (a.type.indexOf("image") !== -1) {
+          e.preventDefault();
+          const n = a.getAsFile();
+          n && this.uploadImage(n);
+          break;
+        }
+      }
+    }, this.handleSubjectChange = (e) => {
+      const t = e.target;
+      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.openLayoutDialog = () => {
+      D.component(l`
+			<schmancy-email-layout-selector
+				@layout-select=${(e) => {
+        this.applyLayout(e.detail.layout), D.close();
+      }}
+			></schmancy-email-layout-selector>
+		`);
+    }, this.applyLayout = (e) => {
+      const t = { "columns-2": `
+:::layout columns-2
+<div class="column">
+![Left Photo](https://via.placeholder.com/400x300?text=Replace+with+your+photo){height=300px}
+
+**Photo Title**
+
+Replace the placeholder image above with your own photo. The height=300px ensures both images have equal height while width adjusts automatically.
+</div>
+
+<div class="column">
+![Right Photo](https://via.placeholder.com/400x300?text=Replace+with+your+photo){height=300px}
+
+**Photo Title**
+
+Use the same height value (300px) for both images to keep them aligned perfectly side by side.
+</div>
+:::
+`, "columns-3": `
+:::layout columns-3
+<div class="column">
+![Photo 1](https://via.placeholder.com/300x200?text=Photo+1){height=200px}
+
+**Item Title**
+
+Brief description or caption for this item.
+</div>
+
+<div class="column">
+![Photo 2](https://via.placeholder.com/300x200?text=Photo+2){height=200px}
+
+**Item Title**
+
+Brief description or caption for this item.
+</div>
+
+<div class="column">
+![Photo 3](https://via.placeholder.com/300x200?text=Photo+3){height=200px}
+
+**Item Title**
+
+Brief description or caption for this item.
+</div>
+:::
+`, "sidebar-left": `
+:::layout sidebar-left
+<div class="sidebar">
+**Sidebar Content**
+
+* Navigation item 1
+* Navigation item 2
+* Navigation item 3
+</div>
+
+<div class="main">
+**Main Content Area**
+
+Your primary content goes here. This area takes up most of the width while the sidebar provides supplementary information or navigation.
+</div>
+:::
+`, "sidebar-right": `
+:::layout sidebar-right
+<div class="main">
+**Main Content Area**
+
+Your primary content goes here. This area takes up most of the width while the sidebar provides supplementary information or navigation.
+</div>
+
+<div class="sidebar">
+**Sidebar Content**
+
+* Quick links
+* Related info
+* Contact details
+</div>
+:::
+`, "image-row": `
+:::layout image-row
+<div class="image">
+![Gallery Image 1](https://via.placeholder.com/400x250?text=Gallery+Image+1){height=250px}
+</div>
+
+<div class="image">
+![Gallery Image 2](https://via.placeholder.com/400x250?text=Gallery+Image+2){height=250px}
+</div>
+
+<div class="image">
+![Gallery Image 3](https://via.placeholder.com/400x250?text=Gallery+Image+3){height=250px}
+</div>
+:::
+` }[e];
+      t && this.insertAtCursor(t);
+    }, this.uploadImage = async (e) => {
+      if (!e.type.startsWith("image/")) return void v.error(`File "${e.name}" is not an image`);
+      if (e.size > 10485760) v.error(`Image "${e.name}" is too large. Maximum size is 10MB.`);
+      else {
+        this.isUploading = !0;
+        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");
+        } 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.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 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();
+        }
+      });
+    }, this.handleFileChange = (e) => {
+      const t = e.target, i = t.files;
+      if (i) for (let s = 0; s < i.length; s++) {
+        const a = i[s];
+        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 = "";
+    }, 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);
+      }
+    }, this.handleDragEnter = (e) => {
+      e.preventDefault(), this.dragOver = !0;
+    }, this.handleDocumentDragLeave = (e) => {
+      e.preventDefault(), this.dragOver = !1;
+    }, this.handleDocumentDrop = (e) => {
+      e.preventDefault(), this.dragOver = !1;
+    }, this.handleDragOver = (e) => {
+      e.preventDefault();
+    }, this.handleDragLeave = (e) => {
+      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.`);
+      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) => {
+      this.attachments = this.attachments.filter((t) => t.id !== e), this.dispatchChange();
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addKeyboardListeners(), this.addDragListeners();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("paste", this.handlePaste), document.removeEventListener("dragenter", this.handleDragEnter), document.removeEventListener("dragleave", this.handleDocumentDragLeave), document.removeEventListener("drop", this.handleDocumentDrop);
+  }
+  addKeyboardListeners() {
+    this.addEventListener("keydown", this.handleKeyDown), document.addEventListener("paste", this.handlePaste);
+  }
+  addDragListeners() {
+    document.addEventListener("dragenter", this.handleDragEnter), document.addEventListener("dragleave", this.handleDocumentDragLeave), document.addEventListener("drop", this.handleDocumentDrop);
+  }
+  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);
+    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);
+    });
+  }
+  wrapSelection(e, t, i) {
+    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));
+    });
+  }
+  render() {
+    return l`
+			<schmancy-surface 
+				type="surface" 
+				rounded="all"
+				class=${this.classMap({ "border-2 border-dashed border-primary": this.dragOver, "h-full flex flex-col": !0 })}
+				@drop=${this.handleDrop}
+				@dragover=${this.handleDragOver}
+				@dragleave=${this.handleDragLeave}
+			>
+				<div class="flex flex-col h-full gap-4">
+
+					<!-- Header Section with Templates and 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)}
+								.value=${this.subject}
+								@input=${this.handleSubjectChange}
+								placeholder="Enter email subject..."
+								.disabled=${this.disabled}
+								class="w-full"
+							></schmancy-input>
+						</div>
+					</div>
+
+					<!-- Formatting Toolbar -->
+					<div class="flex-shrink-0 px-4">
+						<schmancy-surface type="container" rounded="all" class="p-3">
+							<div class="flex flex-wrap gap-2 items-center">
+								<!-- Text Formatting Group -->
+								<div class="flex gap-1">
+									<schmancy-icon-button 
+										size="sm" 
+										variant="text" 
+										title="Bold" 
+										?disabled=${this.disabled}
+										@click=${() => this.wrapSelection("**", "**", "bold text")}
+									>
+										<schmancy-icon>format_bold</schmancy-icon>
+									</schmancy-icon-button>
+									<schmancy-icon-button 
+										size="sm" 
+										variant="text" 
+										title="Italic" 
+										?disabled=${this.disabled}
+										@click=${() => this.wrapSelection("*", "*", "italic text")}
+									>
+										<schmancy-icon>format_italic</schmancy-icon>
+									</schmancy-icon-button>
+									<schmancy-icon-button 
+										size="sm" 
+										variant="text" 
+										title="Link" 
+										?disabled=${this.disabled}
+										@click=${() => this.insertAtCursor("[link text](https://example.com)", "link text")}
+									>
+										<schmancy-icon>link</schmancy-icon>
+									</schmancy-icon-button>
+								</div>
+								
+								<!-- Divider -->
+								<div class="h-6 w-px bg-outline-variant"></div>
+								
+								<!-- Structure Formatting Group -->
+								<div class="flex gap-1">
+									<schmancy-icon-button 
+										size="sm" 
+										variant="text" 
+										title="Heading" 
+										?disabled=${this.disabled}
+										@click=${() => this.insertAtCursor(`
+# Heading
+`, "Heading")}
+									>
+										<schmancy-icon>title</schmancy-icon>
+									</schmancy-icon-button>
+									<schmancy-icon-button 
+										size="sm" 
+										variant="text" 
+										title="Bullet List" 
+										?disabled=${this.disabled}
+										@click=${() => this.insertAtCursor(`
+* List item
+`, "List item")}
+									>
+										<schmancy-icon>format_list_bulleted</schmancy-icon>
+									</schmancy-icon-button>
+								</div>
+								
+								<!-- Divider -->
+								<div class="h-6 w-px bg-outline-variant"></div>
+								
+								<!-- Media and Layout Group -->
+								<div class="flex gap-1">
+									<schmancy-icon-button 
+										size="sm" 
+										variant="text" 
+										title="Insert Image" 
+										?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>`)}
+									</schmancy-icon-button>
+									<schmancy-icon-button 
+										size="sm" 
+										variant="text" 
+										title="Insert Layout" 
+										?disabled=${this.disabled}
+										@click=${this.openLayoutDialog}
+									>
+										<schmancy-icon>view_column</schmancy-icon>
+									</schmancy-icon-button>
+								</div>
+							</div>
+						</schmancy-surface>
+					</div>
+
+					<!-- Textarea Container - Takes remaining space -->
+					<div class="flex-1 px-4 relative min-h-0">
+						<schmancy-textarea
+							${C(this.bodyTextAreaRef)}
+							.value=${this.body}
+							@change=${this.handleBodyChange}
+							placeholder="Enter your email message here...
+
+Use the toolbar buttons above for formatting, or type markdown directly:
+**bold**, *italic*, [link](url), ![image](url)
+
+Drag & drop images or press Ctrl+V to paste from clipboard.
+Tab key inserts 2 spaces for better formatting."
+							.disabled=${this.disabled}
+							.required=${!0}
+							.rows=${4}
+							class="w-full font-mono text-sm"
+						></schmancy-textarea>
+						
+						<!-- Upload Progress Overlay -->
+						${m(this.isUploading, () => l`
+							<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">
+										<schmancy-progress size="sm" class="w-4 h-4"></schmancy-progress>
+										<schmancy-typography type="body" token="xs">Uploading...</schmancy-typography>
+									</div>
+								</schmancy-surface>
+							</div>
+						`)}
+					</div>
+
+					<!-- Footer Section -->
+					<div class="flex-shrink-0 p-4 pt-0 space-y-2">
+						<!-- Character/Word Counter -->
+						<div class="text-center">
+							<schmancy-typography type="body" token="xs">
+								${this.body.length} characters • ${this.body.trim() ? this.body.trim().split(/\s+/).length : 0} words
+							</schmancy-typography>
+						</div>
+
+						<!-- Attachments Display (if any) -->
+						${m(this.attachments.length > 0, () => l`
+							<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`
+										<schmancy-chip class="text-xs">
+											<span class="truncate max-w-32">${e.name}</span>
+											<button 
+												@click=${() => this.removeAttachment(e.id)}
+												class="ml-2 text-error hover:text-error-container"
+												title="Remove attachment"
+											>
+												<schmancy-icon size="14px">close</schmancy-icon>
+											</button>
+										</schmancy-chip>
+									`)}
+								</div>
+							</div>
+						`)}
+					</div>
+
+					<!-- Hidden File Inputs -->
+					<div class="hidden">
+						<input
+							${C(this.fileInputRef)}
+							type="file"
+							multiple
+							@change=${this.handleFileChange}
+						>
+						<input
+							${C(this.imageInputRef)}
+							type="file"
+							accept="image/*"
+							@change=${this.handleImageSelect}
+						>
+					</div>
+
+				</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;
+};
+let $ = class extends E(A`
+	:host {
+		display: block;
+	}
+`) {
+  constructor() {
+    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) {
+        case "columns-2":
+          return this.parseColumnsLayout(s, 2);
+        case "columns-3":
+          return this.parseColumnsLayout(s, 3);
+        case "sidebar-left":
+          return this.parseSidebarLayout(s, "left");
+        case "sidebar-right":
+          return this.parseSidebarLayout(s, "right");
+        case "image-row":
+          return this.parseImageRowLayout(s);
+        default:
+          return s;
+      }
+    });
+  }
+  parseColumnsLayout(e, t) {
+    const i = /<div class="column">([\s\S]*?)<\/div>/g, s = [];
+    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])}
+				</td>`;
+    for (let o = s.length; o < t; o++)
+      r += `
+				<td width="${n}%" style="padding: ${o === t - 1 ? "0" : c}; vertical-align: top;">
+					&nbsp;
+				</td>`;
+    return r += "</tr>", `
+			<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin: 16px 0;">
+				${r}
+			</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 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())}
+			</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())}
+			</td>`;
+    return `
+			<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin: 16px 0;">
+				${t === "left" ? `<tr>${a}${n}</tr>` : `<tr>${n}${a.replace("0 16px 0 0", "0 0 0 16px")}</tr>`}
+			</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">`);
+      }
+    }
+    if (i.length === 0) return e;
+    const a = Math.floor(100 / i.length);
+    let n = "<tr>";
+    return i.forEach((c, r) => {
+      const o = r === i.length - 1;
+      n += `
+				<td width="${a}%" style="padding: ${o ? "0" : "0 8px 0 0"}; vertical-align: top; text-align: center;">
+					${c}
+				</td>`;
+    }), n += "</tr>", `
+			<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin: 16px 0;">
+				${n}
+			</table>`;
+  }
+  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;
+  }
+  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 };
+  }
+  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;
+    }).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}>`;
+    }).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>`;
+    }), 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;">
+					${t}
+				</td>
+			</tr>
+		</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, `
+`).replace(/<\/div>/g, `
+`).replace(/\n{3,}/g, `
+
+`).trim()).replace(/:::images\s+(row|grid(?:=\d+)?)\n((?:!\[.*?\]\(.*?\)(?:\{.*?\})?\s*\n?)*?):::/g, "[Images]").replace(/!\[([^\]]*)\]\(([^)]+)\)(?:\{([^}]+)\})?/g, "[Image: $1]").replace(/\*\*(.*?)\*\*/g, "$1").replace(/\*(.*?)\*/g, "$1").replace(/__(.*?)__/g, "$1").replace(/~~(.*?)~~/g, "$1").replace(/`(.*?)`/g, "$1").replace(/^#{1,3} (.*$)/gim, "$1").replace(/^> (.*$)/gim, "$1").replace(/^\* (.*$)/gim, "• $1").replace(/^\d+\. (.*$)/gim, "$1").replace(/\[([^\]]+)\]\(([^)]+)\)/g, "$1 ($2)").replace(/^---$/gim, "---").replace(/\n\n+/g, `
+
+`);
+  }
+  formatFileSize(e) {
+    if (e === 0) return "0 Bytes";
+    const t = Math.floor(Math.log(e) / Math.log(1024));
+    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`
+			<schmancy-surface type="surface" rounded="all" class="h-full flex flex-col">
+				
+				<!-- Header Section -->
+				<div class="flex-shrink-0 p-4 border-b border-outline-variant">
+					<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+						<schmancy-typography type="title" token="md" class="flex items-center gap-2">
+							<schmancy-icon size="20px">preview</schmancy-icon>
+							Email Preview
+						</schmancy-typography>
+						
+						<!-- View Mode Toggle -->
+						<div class="flex gap-1 bg-surface-container rounded-full p-1">
+							<schmancy-chip 
+								?selected=${this.viewMode === "html"}
+								@click=${() => {
+      this.viewMode = "html";
+    }}
+								class="text-xs h-8"
+								data-variant=${this.viewMode === "html" ? "filled" : "outlined"}
+							>
+								<schmancy-icon slot="prefix" size="14px">code</schmancy-icon>
+								HTML
+							</schmancy-chip>
+							<schmancy-chip 
+								?selected=${this.viewMode === "plaintext"}
+								@click=${() => {
+      this.viewMode = "plaintext";
+    }}
+								class="text-xs h-8"
+								data-variant=${this.viewMode === "plaintext" ? "filled" : "outlined"}
+							>
+								<schmancy-icon slot="prefix" size="14px">text_fields</schmancy-icon>
+								Text
+							</schmancy-chip>
+						</div>
+					</div>
+				</div>
+
+				<!-- Preview Content Container -->
+				<div class="flex-1 flex flex-col min-h-0 p-4 gap-4">
+					
+					<!-- Email Mock Container -->
+					<div class="flex-1 flex flex-col min-h-0">
+						<schmancy-surface 
+							type="container" 
+							rounded="all" 
+							class="flex-1 flex flex-col overflow-hidden shadow-sm"
+						>
+							<!-- Email Header -->
+							<div class="flex-shrink-0 p-4 bg-surface-containerLow border-b border-outline-variant">
+								<div class="space-y-3">
+									<!-- From Field -->
+									<div class="flex items-start gap-3">
+										<div class="flex items-center gap-2 min-w-0 flex-shrink-0 w-16">
+											<schmancy-icon size="16px">account_circle</schmancy-icon>
+											<schmancy-typography type="body" token="sm" class="font-medium">
+												From
+											</schmancy-typography>
+										</div>
+										<schmancy-typography type="body" token="sm" class="break-all flex-1">
+											${this.fromAddress}
+										</schmancy-typography>
+									</div>
+									
+									<!-- To Field -->
+									<div class="flex items-start gap-3">
+										<div class="flex items-center gap-2 min-w-0 flex-shrink-0 w-16">
+											<schmancy-icon size="16px">person</schmancy-icon>
+											<schmancy-typography type="body" token="sm" class="font-medium">
+												To
+											</schmancy-typography>
+										</div>
+										<schmancy-typography type="body" token="sm" class="break-all flex-1">
+											${i}
+										</schmancy-typography>
+									</div>
+									
+									<!-- Subject Field -->
+									<div class="flex items-start gap-3">
+										<div class="flex items-center gap-2 min-w-0 flex-shrink-0 w-16">
+											<schmancy-icon size="16px">subject</schmancy-icon>
+											<schmancy-typography type="body" token="sm" class="font-medium">
+												Subject
+											</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>`}
+										</schmancy-typography>
+									</div>
+								</div>
+							</div>
+
+							<!-- Email Body Content -->
+							<div class="flex-1 overflow-y-auto min-h-0">
+								${m(this.body, () => l`
+										${m(this.viewMode === "html", () => l`
+												<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`
+												<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`
+										<!-- Empty State -->
+										<div class="flex-1 flex items-center justify-center p-8">
+											<div class="text-center space-y-3">
+												<schmancy-icon size="48px" class="text-surface-onVariant opacity-50">mail_outline</schmancy-icon>
+												<schmancy-typography type="body" token="md">
+													No message content to preview
+												</schmancy-typography>
+												<schmancy-typography type="body" token="sm" class="text-surface-onVariant">
+													Start typing in the composer to see a preview
+												</schmancy-typography>
+											</div>
+										</div>
+									`)}
+							</div>
+
+							<!-- Attachments Section -->
+							${m(this.attachments.length > 0, () => l`
+								<div class="flex-shrink-0 p-4 border-t border-outline-variant bg-surface-containerLowest">
+									<div class="space-y-3">
+										<!-- Attachments Header -->
+										<div class="flex items-center gap-2">
+											<schmancy-icon size="18px">attach_file</schmancy-icon>
+											<schmancy-typography type="label" token="md" class="font-medium">
+												Attachments (${this.attachments.length})
+											</schmancy-typography>
+										</div>
+										
+										<!-- 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`
+												<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"}
+														</schmancy-icon>
+														
+														<!-- File Info -->
+														<div class="flex-1 min-w-0">
+															<schmancy-typography type="body" token="sm" class="font-medium truncate">
+																${s.name}
+															</schmancy-typography>
+															<schmancy-typography type="body" token="xs" class="text-surface-onVariant">
+																${this.formatFileSize(s.size)} • ${s.type}
+															</schmancy-typography>
+														</div>
+													</div>
+												</schmancy-surface>
+											`)}
+										</div>
+									</div>
+								</div>
+							`)}
+						</schmancy-surface>
+					</div>
+					
+					<!-- Preview Stats -->
+					${m(this.body, () => l`
+						<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">
+									<div>
+										<schmancy-typography type="body" token="xs" class="text-surface-onVariant">
+											Characters
+										</schmancy-typography>
+										<schmancy-typography type="body" token="sm" class="font-medium">
+											${this.body.length}
+										</schmancy-typography>
+									</div>
+									<div class="w-px h-8 bg-outline-variant"></div>
+									<div>
+										<schmancy-typography type="body" token="xs" class="text-surface-onVariant">
+											Words
+										</schmancy-typography>
+										<schmancy-typography type="body" token="sm" class="font-medium">
+											${this.body.trim() ? this.body.trim().split(/\s+/).length : 0}
+										</schmancy-typography>
+									</div>
+									${m(this.attachments.length > 0, () => l`
+										<div class="w-px h-8 bg-outline-variant"></div>
+										<div>
+											<schmancy-typography type="body" token="xs" class="text-surface-onVariant">
+												Attachments
+											</schmancy-typography>
+											<schmancy-typography type="body" token="sm" class="font-medium">
+												${this.attachments.length}
+											</schmancy-typography>
+										</div>
+									`)}
+								</div>
+							</schmancy-surface>
+						</div>
+					`)}
+					
+				</div>
+			</schmancy-surface>
+		`;
+  }
+};
+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;
+};
+let g = class extends E(A`
+	: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 = () => {
+      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);
+    }, this.handleDrop = (e) => {
+      if (!this.enableDragDrop) return;
+      e.preventDefault(), this.dragOver = !1;
+      const t = e.dataTransfer?.files[0];
+      t && this.processCSVFile(t);
+    }, 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;
+        try {
+          const a = this.parseCSV(s);
+          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 {
+          v.error("Failed to parse CSV file");
+        }
+      }, t.readAsText(e);
+    }, this.toggleRecipientSelection = (e) => {
+      this.localSelectedRecipients.has(e) ? this.localSelectedRecipients.delete(e) : this.localSelectedRecipients.add(e), this.localSelectedRecipients = new Set(this.localSelectedRecipients), this.dispatchSelectionChange();
+    }, this.selectAll = () => {
+      this.localSelectedRecipients = new Set(this.filteredRecipients), this.dispatchSelectionChange();
+    }, this.selectNone = () => {
+      this.localSelectedRecipients.clear(), this.localSelectedRecipients = /* @__PURE__ */ new Set(), this.dispatchSelectionChange();
+    }, this.removeRecipient = (e) => {
+      this.dispatchEvent(new CustomEvent("recipient-removed", { detail: { email: e }, bubbles: !0, composed: !0 }));
+    }, this.clearAll = () => {
+      this.dispatchEvent(new CustomEvent("recipients-cleared", { bubbles: !0, composed: !0 }));
+    }, this.updateFilteredRecipients = () => {
+      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));
+      } else this.filteredRecipients = [...e];
+    }, this.handleSearchInput = (e) => {
+      const t = e.target;
+      this.searchQuery = t.value;
+    }, this.clearSearch = () => {
+      this.searchQuery = "";
+    }, this.dispatchSelectionChange = () => {
+      this.dispatchEvent(new CustomEvent("selection-changed", { detail: { selectedEmails: Array.from(this.localSelectedRecipients) }, bubbles: !0, composed: !0 }));
+    }, this.handleBoatStateChange = (e) => {
+      this.boatState = e.detail;
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.localSelectedRecipients = new Set(this.selectedRecipients), this.updateFilteredRecipients(), this.addEventListener("emails-imported", this.handleEmailsImported);
+  }
+  updated(e) {
+    super.updated(e), e.has("selectedRecipients") && (this.localSelectedRecipients = new Set(this.selectedRecipients)), (e.has("recipients") || e.has("searchQuery")) && this.updateFilteredRecipients(), e.has("recipients") && this.requestUpdate();
+  }
+  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;
+        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));
+    }
+    return t;
+  }
+  simpleCSVParse(e) {
+    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 = [];
+    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);
+    }
+    return { data: s, meta: { fields: i } };
+  }
+  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();
+  }
+  showBoat() {
+    this.boatState = "minimized";
+  }
+  hideBoat() {
+    this.boatState = "hidden";
+  }
+  expandBoat() {
+    this.boatState = "expanded";
+  }
+  toggleBoat() {
+    this.boatState = this.boatState === "hidden" ? "minimized" : this.boatState === "minimized" ? "expanded" : "hidden";
+  }
+  render() {
+    return this.renderBoatLayout();
+  }
+  renderBoatLayout() {
+    return l`
+			<!-- Hidden file input for CSV import -->
+			${m(this.enableCsvImport, () => l`
+				<input
+					type="file"
+					accept=".csv"
+					${C(this.fileInputRef)}
+					@change=${this.handleFileSelect}
+					class="hidden"
+				/>
+			`)}
+
+			<schmancy-boat 
+				.state=${this.boatState}
+				@change=${this.handleBoatStateChange}
+			>
+				<!-- Boat Header -->
+				<div slot="header" class="flex items-center justify-between w-full px-4 py-2">
+					<div class="flex items-center gap-3">
+						<schmancy-icon size="20px">group</schmancy-icon>
+						<schmancy-typography type="title" token="md" class="font-semibold">
+							${this.title}
+						</schmancy-typography>
+						${m(this.recipients.length > 0, () => l`
+							<schmancy-badge>
+								${this.localSelectedRecipients.size}/${this.recipients.length}
+							</schmancy-badge>
+						`)}
+					</div>
+				</div>
+
+				<!-- Boat Content -->
+				<div class="h-full flex flex-col max-h-[70vh]">
+					${this.renderBoatContent()}
+				</div>
+			</schmancy-boat>
+		`;
+  }
+  renderBoatContent() {
+    return l`
+			<!-- Search Bar and CSV Import on one line -->
+			<div class="p-4 flex gap-3">
+				<schmancy-input
+					type="text"
+					placeholder="Search recipients"
+					.value=${this.searchQuery}
+					@input=${this.handleSearchInput}
+					class="flex-1"
+				>
+					${m(this.searchQuery, () => l`
+						<schmancy-button
+							slot="suffix" 
+							variant="text"
+							@click=${this.clearSearch}
+						>
+							<schmancy-icon size="16px">close</schmancy-icon>
+						</schmancy-button>
+					`)}
+				</schmancy-input>
+				
+				${m(this.enableCsvImport, () => l`
+					<schmancy-button
+						variant="outlined"
+						@click=${this.handleImportFromCSV}
+						?disabled=${this.disabled}
+					>
+						<schmancy-icon slot="prefix" size="16px">upload_file</schmancy-icon>
+						Import
+					</schmancy-button>
+				`)}
+			</div>
+
+			${m(this.recipients.length > 0, () => l`
+				<!-- Bulk Actions -->
+				<div class="px-4 pb-4">
+					<div class="flex items-center gap-3">
+						<schmancy-button 
+							variant="outlined"
+							@click=${this.selectAll}
+							?disabled=${this.localSelectedRecipients.size === this.filteredRecipients.length}
+						>
+							<schmancy-icon slot="prefix" size="14px">select_all</schmancy-icon>
+							Select All
+						</schmancy-button>
+						
+						<schmancy-button 
+							variant="outlined"
+							@click=${this.selectNone}
+							?disabled=${this.localSelectedRecipients.size === 0}
+						>
+							<schmancy-icon slot="prefix" size="14px">deselect</schmancy-icon>
+							Clear Selection
+						</schmancy-button>
+						
+						<div class="flex-1"></div>
+						
+						<schmancy-button variant="text" @click=${this.clearAll}>
+							<schmancy-icon slot="prefix" size="14px">delete_forever</schmancy-icon>
+							Clear All
+						</schmancy-button>
+					</div>
+				</div>
+
+				<!-- Recipients List -->
+				<div class="flex-1 overflow-y-auto px-4 pb-4">
+					${m(this.filteredRecipients.length > 0, () => l`
+							<div class="flex flex-wrap gap-3">
+								${I(this.filteredRecipients, (e) => e, (e) => l`
+										<schmancy-button
+											variant=${this.localSelectedRecipients.has(e) ? "filled" : "outlined"}
+											@click=${(t) => {
+      t.stopPropagation(), t.preventDefault(), this.toggleRecipientSelection(e);
+    }}
+											class="cursor-pointer flex items-center gap-2"
+										>
+											<span class="truncate flex-1 text-left">${e}</span>
+											<schmancy-icon
+												@click=${(t) => {
+      t.stopPropagation(), this.removeRecipient(e);
+    }}
+												size="16px"
+												class="ml-2"
+											>close</schmancy-icon>
+										</schmancy-button>
+									`)}
+							</div>
+						`, () => l`
+							<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">
+									No recipients match "${this.searchQuery}"
+								</schmancy-typography>
+								<schmancy-button variant="outlined" @click=${this.clearSearch}>
+									Clear Search
+								</schmancy-button>
+							</div>
+						`)}
+				</div>
+			`, () => l`
+				<!-- Empty State -->
+				<div class="flex-1 flex items-center justify-center p-8">
+					<div class="text-center space-y-4">
+						<schmancy-icon size="48px" class="opacity-30">mail_outline</schmancy-icon>
+						<schmancy-typography type="title" token="md" class="mb-2">
+							${this.emptyStateTitle}
+						</schmancy-typography>
+						<schmancy-typography type="body" token="sm">
+							${this.emptyStateMessage}
+						</schmancy-typography>
+					</div>
+				</div>
+			`)}
+
+			<!-- Drag Overlay -->
+			${m(this.dragOver && this.enableDragDrop, () => l`
+					<div 
+						class="absolute inset-4 flex items-center justify-center border-2 border-dashed border-primary rounded-lg z-10"
+						@dragover=${(e) => {
+      e.preventDefault(), this.dragOver = !0;
+    }}
+						@dragleave=${() => this.dragOver = !1}
+						@drop=${this.handleDrop}
+					>
+						<schmancy-surface type="surfaceDim" rounded="all" class="p-6 text-center">
+							<schmancy-icon size="48px" class="mb-2">upload</schmancy-icon>
+							<schmancy-typography type="body" token="md">
+								Drop CSV file here
+							</schmancy-typography>
+						</schmancy-surface>
+					</div>
+				`)}
+		`;
+  }
+};
+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);
+export {
+  p as S,
+  b as a,
+  $ as b,
+  g as c,
+  z as d
+};
+//# sourceMappingURL=email-recipients-DQ36ickQ.js.map