@mhmo91/schmancy 0.4.68 → 0.4.70

package/dist/email-recipients-BH3-shuO.js

@@ -0,0 +1,1882 @@
+import "rxjs";
+import "lit/directives/class-map.js";
+import "lit/directives/style-map.js";
+import { $ as A } from "./litElement.mixin-BSsJVIyj.js";
+import { T as P } from "./tailwind.mixin-C3MkWn0v.js";
+import { property as d, state as m, customElement as R } from "lit/decorators.js";
+import { css as D, html as c } from "lit";
+import { when as h } 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-BO0LiH62.js";
+import "./dialog-content-CDfCvaaL.js";
+import { $ as L } from "./dialog-service-DoKaWw88.js";
+import { s as j } from "./sheet.service-CgKnOzZN.js";
+var F = Object.defineProperty, B = Object.getOwnPropertyDescriptor, u = (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 = (i ? a(t, s, n) : a(n)) || n);
+  return i && n && F(t, s, n), n;
+};
+let y = class extends A(D`
+	: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, 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((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: 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;
+        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])], s = e.filter((i) => !this.recipients.includes(i));
+    this.recipients = t, this.selectedRecipients = [.../* @__PURE__ */ new Set([...this.selectedRecipients, ...s])];
+  }
+  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 c`
+			<!-- 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>
+								${h(this.attachments.length > 0, () => c`
+									<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>
+		`;
+  }
+};
+u([d({ type: Object })], y.prototype, "config", 2), u([d({ type: Array })], y.prototype, "templates", 2), u([d({ type: Array })], y.prototype, "importSources", 2), u([d({ type: Boolean })], y.prototype, "disabled", 2), u([d({ type: String })], y.prototype, "recipientsTitle", 2), u([d({ type: String })], y.prototype, "recipientsEmptyTitle", 2), u([d({ type: String })], y.prototype, "recipientsEmptyMessage", 2), u([d({ type: Boolean })], y.prototype, "enableCsvImport", 2), u([d({ type: Boolean })], y.prototype, "enableDragDrop", 2), u([m()], y.prototype, "recipients", 2), u([m()], y.prototype, "selectedRecipients", 2), u([m()], y.prototype, "subject", 2), u([m()], y.prototype, "body", 2), u([m()], y.prototype, "templateId", 2), u([m()], y.prototype, "attachments", 2), u([m()], y.prototype, "isSending", 2), y = u([R("schmancy-mailbox")], y);
+var O = 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" }];
+  }
+  selectLayout(e) {
+    this.dispatchEvent(new CustomEvent("layout-select", { detail: { layout: e }, bubbles: !0, composed: !0 }));
+  }
+  render() {
+    return c`
+			<div class="grid p-3 gap-2">
+				${this.layouts.map((e) => c`
+					<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, 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 = a(n) || n);
+  return n;
+})([R("schmancy-email-layout-selector")], z);
+var M = Object.defineProperty, H = Object.getOwnPropertyDescriptor, C = (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 $ = class extends A(D`
+	:host {
+		display: block;
+	}
+`) {
+  constructor() {
+    super(...arguments), this.templates = [], this.searchQuery = "", this.selectedTemplate = null, this.filteredTemplates = [], this.showPreview = !1, 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.selectedTemplate = e, this.showPreview = !0;
+    }, this.confirmSelection = () => {
+      this.selectedTemplate && (this.dispatchEvent(new CustomEvent("template-selected", { detail: this.selectedTemplate, bubbles: !0, composed: !0 })), j.dismiss());
+    }, this.close = () => {
+      j.dismiss();
+    }, this.backToList = () => {
+      this.showPreview = !1, this.selectedTemplate = null;
+    };
+  }
+  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">
+							${this.showPreview ? "preview" : "mail"}
+						</schmancy-icon>
+						<schmancy-typography type="headline" token="md">
+							${this.showPreview ? "Template Preview" : "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">
+					${h(this.showPreview && this.selectedTemplate, () => this.renderPreview(), () => this.renderTemplateList())}
+				</div>
+
+				<!-- Footer -->
+				<div class="flex justify-between px-6 py-4 border-t border-outline-variant bg-surface-containerLow">
+					${h(this.showPreview, () => c`
+							<schmancy-button
+								variant="outlined"
+								@click=${this.backToList}
+								class="px-6 py-3"
+							>
+								<schmancy-icon slot="prefix">arrow_back</schmancy-icon>
+								Back to Templates
+							</schmancy-button>
+							<schmancy-button
+								variant="filled"
+								@click=${this.confirmSelection}
+								class="px-8 py-3 bg-primary text-primary-on shadow-md hover:shadow-lg transition-shadow"
+							>
+								<schmancy-icon slot="prefix">check_circle</schmancy-icon>
+								Use This Template
+							</schmancy-button>
+						`, () => c`
+							<div class="flex gap-3">
+								<schmancy-button
+									variant="text"
+									@click=${this.close}
+									class="px-6 py-3"
+								>
+									Cancel
+								</schmancy-button>
+							</div>
+						`)}
+				</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 by name, category, or description..."
+						.value=${this.searchQuery}
+						@input=${this.handleSearch}
+						class="w-full"
+					>
+						<schmancy-icon slot="prefix" size="20px" class="text-surface-onVariant">search</schmancy-icon>
+						${h(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 -->
+					${h(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 -->
+			<div class="flex-1 overflow-y-auto px-6 py-6">
+				${h(this.filteredTemplates.length > 0, () => c`
+						<div class="space-y-4">
+							${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 p-4"
+										@click=${() => this.selectTemplate(e)}
+									>
+										<div class="flex items-start justify-between gap-4">
+											<div class="flex-1">
+												<!-- Template Header -->
+												<div class="flex items-start justify-between mb-2">
+													<schmancy-typography type="title" token="md" class="font-semibold leading-tight">
+														${e.name}
+													</schmancy-typography>
+													${h(e.isDefault, () => c`
+														<schmancy-chip class="bg-primary text-primary-on text-xs">
+															<schmancy-icon slot="prefix" size="12px">star</schmancy-icon>
+															Default
+														</schmancy-chip>
+													`)}
+												</div>
+												
+												<!-- Category Badge -->
+												${h(e.category, () => c`
+													<div class="mb-2">
+														<schmancy-chip class="text-xs border border-outline">
+															${e.category}
+														</schmancy-chip>
+													</div>
+												`)}
+												
+												<!-- Description -->
+												${h(e.description, () => c`
+														<schmancy-typography type="body" token="sm" class="text-surface-onVariant leading-relaxed">
+															${e.description}
+														</schmancy-typography>
+													`, () => c`
+														<schmancy-typography type="body" token="sm" class="text-surface-onVariant opacity-60 italic">
+															No description available
+														</schmancy-typography>
+													`)}
+											</div>
+											
+											<!-- Preview Button -->
+											<div class="flex-shrink-0">
+												<schmancy-button variant="outlined" size="sm">
+													<schmancy-icon slot="prefix">preview</schmancy-icon>
+													Preview
+												</schmancy-button>
+											</div>
+										</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>
+							${h(this.searchQuery || this.selectedCategory !== "all", () => c`
+								<div class="flex gap-3">
+									${h(this.searchQuery, () => c`
+										<schmancy-button
+											variant="outlined"
+											@click=${() => {
+      this.searchQuery = "";
+    }}
+										>
+											<schmancy-icon slot="prefix">clear</schmancy-icon>
+											Clear Search
+										</schmancy-button>
+									`)}
+									${h(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>
+		`;
+  }
+  renderPreview() {
+    return this.selectedTemplate ? c`
+			<div class="flex-1 overflow-y-auto">
+				<!-- Template Header Section -->
+				<div class="px-6 py-6 border-b border-outline-variant bg-surface-containerLow">
+					<div class="flex items-start gap-6">
+						<!-- Template Thumbnail -->
+						${h(this.selectedTemplate.thumbnail, () => c`
+								<div class="flex-shrink-0">
+									<schmancy-surface elevation="2" rounded="all" class="overflow-hidden w-32 h-24">
+										<img 
+											src=${this.selectedTemplate.thumbnail} 
+											alt=${this.selectedTemplate.name}
+											class="w-full h-full object-cover"
+										/>
+									</schmancy-surface>
+								</div>
+							`, () => c`
+								<div class="flex-shrink-0">
+									<schmancy-surface elevation="1" rounded="all" class="w-32 h-24 bg-gradient-to-br from-surface-container to-surface-containerLow flex items-center justify-center">
+										<schmancy-icon size="32px" class="text-surface-onVariant opacity-40">mail</schmancy-icon>
+									</schmancy-surface>
+								</div>
+							`)}
+
+						<!-- Template Info -->
+						<div class="flex-1">
+							<div class="flex items-start justify-between mb-3">
+								<schmancy-typography type="headline" token="lg" class="font-semibold">
+									${this.selectedTemplate.name}
+								</schmancy-typography>
+								${h(this.selectedTemplate.isDefault, () => c`
+									<schmancy-chip class="bg-primary text-primary-on">
+										<schmancy-icon slot="prefix" size="12px">star</schmancy-icon>
+										Default
+									</schmancy-chip>
+								`)}
+							</div>
+
+							<div class="flex flex-wrap gap-2 mb-3">
+								${h(this.selectedTemplate.category, () => c`
+									<schmancy-chip class="border border-outline">
+										<schmancy-icon slot="prefix" size="12px">category</schmancy-icon>
+										${this.selectedTemplate.category}
+									</schmancy-chip>
+								`)}
+								${h(this.selectedTemplate.createdAt, () => c`
+									<schmancy-chip class="border border-outline">
+										<schmancy-icon slot="prefix" size="12px">schedule</schmancy-icon>
+										Created ${new Date(this.selectedTemplate.createdAt).toLocaleDateString()}
+									</schmancy-chip>
+								`)}
+							</div>
+
+							${h(this.selectedTemplate.description, () => c`
+									<schmancy-typography type="body" token="md" class="text-surface-onVariant leading-relaxed">
+										${this.selectedTemplate.description}
+									</schmancy-typography>
+								`)}
+						</div>
+					</div>
+				</div>
+
+				<!-- Template Content -->
+				<div class="px-6 py-6 space-y-8">
+					<!-- Subject Preview -->
+					<div>
+						<div class="flex items-center gap-2 mb-4">
+							<schmancy-icon size="20px" class="text-primary">subject</schmancy-icon>
+							<schmancy-typography type="title" token="md" class="text-primary">
+								Subject Line
+							</schmancy-typography>
+						</div>
+						<schmancy-surface elevation="1" type="surface" class="p-4 border-l-4 border-primary">
+							<schmancy-typography type="body" token="md" class="font-medium">
+								${this.selectedTemplate.subject}
+							</schmancy-typography>
+						</schmancy-surface>
+					</div>
+
+					<!-- Body Preview -->
+					<div>
+						<div class="flex items-center gap-2 mb-4">
+							<schmancy-icon size="20px" class="text-primary">article</schmancy-icon>
+							<schmancy-typography type="title" token="md" class="text-primary">
+								Email Preview
+							</schmancy-typography>
+						</div>
+						<schmancy-email-viewer
+							subject=${this.selectedTemplate.subject}
+							body=${this.selectedTemplate.body}
+							mode="desktop"
+						></schmancy-email-viewer>
+					</div>
+				</div>
+			</div>
+		` : null;
+  }
+};
+C([d({ type: Array })], $.prototype, "templates", 2), C([m()], $.prototype, "searchQuery", 2), C([m()], $.prototype, "selectedTemplate", 2), C([m()], $.prototype, "filteredTemplates", 2), C([m()], $.prototype, "showPreview", 2), C([m()], $.prototype, "selectedCategory", 2), $ = C([R("schmancy-email-template-picker")], $);
+var V = Object.defineProperty, U = Object.getOwnPropertyDescriptor, x = (e, t, s, i) => {
+  for (var a, n = i > 1 ? void 0 : i ? U(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 && V(t, s, n), n;
+};
+let b = class extends A(D`
+	:host {
+		display: block;
+		height: 100%;
+	}
+`) {
+  constructor() {
+    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 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();
+          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.dispatchChange = () => {
+      this.dispatchEvent(new CustomEvent("editor-change", { detail: { subject: this.subject, body: this.body, attachments: this.attachments }, bubbles: !0, composed: !0 }));
+    }, this.openLayoutDialog = () => {
+      L.component(c`
+			<schmancy-email-layout-selector
+				@layout-select=${(e) => {
+        this.applyLayout(e.detail.layout), L.close();
+      }}
+			></schmancy-email-layout-selector>
+		`);
+    }, this.openTemplatePicker = () => {
+      const e = new $();
+      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
+<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 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, s) => {
+      const i = new FileReader();
+      i.onload = () => t(i.result), i.onerror = s, i.readAsDataURL(e);
+    }), this.getImageDimensions = (e) => new Promise((t) => {
+      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(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 k = r + n.length;
+          p.setSelectionRange(k, k), p.focus();
+        }
+      });
+    }, this.handleFileChange = (e) => {
+      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, 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 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;
+    }, 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((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) => {
+      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);
+  }
+  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);
+  }
+  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 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 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, s) {
+    if (!this.bodyTextAreaRef.value) return;
+    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 c`
+			<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 Subject -->
+					<div class="flex-shrink-0 p-4 pb-0 space-y-4">
+						<!-- Subject Field -->
+						<div class="space-y-2">
+							<schmancy-typography type="label" token="md">
+								Subject *
+							</schmancy-typography>
+							<schmancy-input
+								${E(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()}
+									>
+										${h(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" 
+										variant="text" 
+										title="Insert Layout" 
+										?disabled=${this.disabled}
+										@click=${this.openLayoutDialog}
+									>
+										<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>
+						</schmancy-surface>
+					</div>
+
+					<!-- Textarea Container - Takes remaining space -->
+					<div class="flex-1 px-4 relative min-h-0">
+						<schmancy-textarea
+							${E(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 -->
+						${h(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">
+										<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) -->
+						${h(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) => c`
+										<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
+							${E(this.fileInputRef)}
+							type="file"
+							multiple
+							@change=${this.handleFileChange}
+						>
+						<input
+							${E(this.imageInputRef)}
+							type="file"
+							accept="image/*"
+							@change=${this.handleImageSelect}
+						>
+					</div>
+
+				</div>
+			</schmancy-surface>
+
+		`;
+  }
+};
+x([d({ type: String })], b.prototype, "subject", 2), x([d({ type: String })], b.prototype, "body", 2), x([d({ type: Boolean })], b.prototype, "disabled", 2), x([d({ type: Array })], b.prototype, "attachments", 2), x([d({ type: Object })], b.prototype, "config", 2), x([d({ type: Array })], b.prototype, "templates", 2), x([m()], b.prototype, "dragOver", 2), x([m()], b.prototype, "isUploading", 2), b = x([R("schmancy-email-editor")], b);
+var W = Object.defineProperty, N = Object.getOwnPropertyDescriptor, S = (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 w = class extends A(D`
+	: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, s, i) => {
+      switch (s) {
+        case "columns-2":
+          return this.parseColumnsLayout(i, 2);
+        case "columns-3":
+          return this.parseColumnsLayout(i, 3);
+        case "sidebar-left":
+          return this.parseSidebarLayout(i, "left");
+        case "sidebar-right":
+          return this.parseSidebarLayout(i, "right");
+        case "image-row":
+          return this.parseImageRowLayout(i);
+        default:
+          return i;
+      }
+    });
+  }
+  parseColumnsLayout(e, t) {
+    const s = /<div class="column">([\s\S]*?)<\/div>/g, i = [];
+    let a;
+    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 l = i.length; l < t; l++)
+      o += `
+				<td width="${n}%" style="padding: ${l === t - 1 ? "0" : r}; vertical-align: top;">
+					&nbsp;
+				</td>`;
+    return o += "</tr>", `
+			<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin: 16px 0;">
+				${o}
+			</table>`;
+  }
+  parseSidebarLayout(e, t) {
+    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(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(i[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, 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 (s.length === 0) return e;
+    const a = Math.floor(100 / s.length);
+    let n = "<tr>";
+    return s.forEach((r, o) => {
+      const l = o === s.length - 1;
+      n += `
+				<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;">
+				${n}
+			</table>`;
+  }
+  parseImageAttributes(e) {
+    const t = {};
+    if (!e) return 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 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, 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 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, (s, i, a, n) => {
+      const r = this.parseImageAttributes(n), { imgStyle: o, imgWidth: l, imgHeight: p } = this.generateImageStyles(r, !1);
+      let k = `<img src="${a}" alt="${i || "Image"}" style="${o}" border="0"`;
+      return l && (k += ` width="${l}"`), p && (k += ` height="${p}"`), k += ">", `<table cellpadding="0" cellspacing="0" border="0" style="margin: 16px 0;"><tr><td>${k}</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;">
+					${t}
+				</td>
+			</tr>
+		</table>`, t;
+  }
+  convertToPlainText(e) {
+    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, `
+
+`).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), s = this.recipients[0] || this.toAddress;
+    return c`
+			<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">
+											${s}
+										</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 || c`<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">
+								${h(this.body, () => c`
+										${h(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>
+											`, () => 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>
+											`)}
+									`, () => c`
+										<!-- 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 -->
+							${h(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 -->
+										<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, (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">
+															${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">
+																${i.name}
+															</schmancy-typography>
+															<schmancy-typography type="body" token="xs" class="text-surface-onVariant">
+																${this.formatFileSize(i.size)} • ${i.type}
+															</schmancy-typography>
+														</div>
+													</div>
+												</schmancy-surface>
+											`)}
+										</div>
+									</div>
+								</div>
+							`)}
+						</schmancy-surface>
+					</div>
+					
+					<!-- Preview Stats -->
+					${h(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">
+									<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>
+									${h(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">
+												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>
+		`;
+  }
+};
+S([d({ type: String })], w.prototype, "subject", 2), S([d({ type: String })], w.prototype, "body", 2), S([d({ type: Array })], w.prototype, "attachments", 2), S([d({ type: Array })], w.prototype, "recipients", 2), S([d({ type: String })], w.prototype, "fromAddress", 2), S([d({ type: String })], w.prototype, "toAddress", 2), S([m()], w.prototype, "viewMode", 2), w = S([R("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 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 = T(), this.handleEmailsImported = () => {
+      this.updateFilteredRecipients(), this.requestUpdate();
+    }, this.handleImportFromCSV = () => {
+      this.enableCsvImport && this.fileInputRef.value?.click();
+    }, this.handleFileSelect = (e) => {
+      const t = e.target, s = t.files?.[0];
+      s && this.processCSVFile(s);
+    }, 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 = (s) => {
+        const i = s.target?.result;
+        try {
+          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 {
+          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((s) => s.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 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 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;
+  }
+  simpleCSVParse(e) {
+    const t = e.split(`
+`).filter((a) => a.trim());
+    if (t.length === 0) return { data: [], meta: {} };
+    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((o) => o.trim().replace(/"/g, "")), r = {};
+      s.forEach((o, l) => {
+        r[o] = n[l] || "";
+      }), i.push(r);
+    }
+    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])], 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";
+  }
+  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 c`
+			<!-- Hidden file input for CSV import -->
+			${h(this.enableCsvImport, () => c`
+				<input
+					type="file"
+					accept=".csv"
+					${E(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>
+						${h(this.recipients.length > 0, () => c`
+							<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 c`
+			<!-- 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"
+				>
+					${h(this.searchQuery, () => c`
+						<schmancy-button
+							slot="suffix" 
+							variant="text"
+							@click=${this.clearSearch}
+						>
+							<schmancy-icon size="16px">close</schmancy-icon>
+						</schmancy-button>
+					`)}
+				</schmancy-input>
+				
+				${h(this.enableCsvImport, () => c`
+					<schmancy-button
+						variant="outlined"
+						@click=${this.handleImportFromCSV}
+						?disabled=${this.disabled}
+					>
+						<schmancy-icon slot="prefix" size="16px">upload_file</schmancy-icon>
+						Import
+					</schmancy-button>
+				`)}
+			</div>
+
+			${h(this.recipients.length > 0, () => c`
+				<!-- 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">
+					${h(this.filteredRecipients.length > 0, () => c`
+							<div class="flex flex-wrap gap-3">
+								${I(this.filteredRecipients, (e) => e, (e) => c`
+										<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>
+						`, () => 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">
+									No recipients match "${this.searchQuery}"
+								</schmancy-typography>
+								<schmancy-button variant="outlined" @click=${this.clearSearch}>
+									Clear Search
+								</schmancy-button>
+							</div>
+						`)}
+				</div>
+			`, () => c`
+				<!-- 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 -->
+			${h(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) => {
+      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([d({ type: Boolean })], g.prototype, "disabled", 2), f([d({ type: Array })], g.prototype, "recipients", 2), f([d({ type: Array })], g.prototype, "selectedRecipients", 2), f([d({ type: Boolean })], g.prototype, "enableCsvImport", 2), f([d({ type: Boolean })], g.prototype, "enableDragDrop", 2), f([d({ type: String })], g.prototype, "title", 2), f([d({ type: String })], g.prototype, "emptyStateTitle", 2), f([d({ type: String })], g.prototype, "emptyStateMessage", 2), f([d({ type: Object })], g.prototype, "csvParser", 2), f([m()], g.prototype, "dragOver", 2), f([m()], g.prototype, "localSelectedRecipients", 2), f([m()], g.prototype, "searchQuery", 2), f([m()], g.prototype, "filteredRecipients", 2), f([m()], g.prototype, "boatState", 2), g = f([R("schmancy-email-recipients")], g);
+export {
+  y as S,
+  b as a,
+  w as b,
+  g as c,
+  z as d
+};
+//# sourceMappingURL=email-recipients-BH3-shuO.js.map