@mhmo91/schmancy 0.8.6 → 0.9.2

package/dist/email-recipients-BzjAKNJ0.js

@@ -1,1733 +0,0 @@
-import { fromEvent as k, takeUntil as C } from "rxjs";
-import "rxjs/operators";
-import "lit/directives/class-map.js";
-import "lit/directives/style-map.js";
-import { property as h, state as y, customElement as T } from "lit/decorators.js";
-import { T as O } from "./tailwind.mixin-Bp_PR6yc.js";
-import { $ as j } from "./litElement.mixin-DHZXtvYq.js";
-import { css as z, html as r } from "lit";
-import { when as d } from "lit/directives/when.js";
-import { createRef as E, ref as A } from "lit/directives/ref.js";
-import { repeat as D } from "lit/directives/repeat.js";
-import { $ as P } from "./dialog-service-D9E3jLAR.js";
-import "./dialog.component-a7FlKhGD.js";
-import "@floating-ui/dom";
-import { $ as b } from "./notification-service-CUlfXqmj.js";
-import { s as L } from "./sheet.service-2MobB-9z.js";
-var B = Object.defineProperty, M = Object.getOwnPropertyDescriptor, u = (e, t, s, i) => {
-  for (var a, n = i > 1 ? void 0 : i ? M(t, s) : t, c = e.length - 1; c >= 0; c--) (a = e[c]) && (n = (i ? a(t, s, n) : a(n)) || n);
-  return i && n && B(t, s, n), n;
-};
-let m = class extends j(z`
-	: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 r`
-			<!-- 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>
-								${d(this.attachments.length > 0, () => r`
-									<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([h({ type: Object })], m.prototype, "config", 2), u([h({ type: Array })], m.prototype, "templates", 2), u([h({ type: Array })], m.prototype, "importSources", 2), u([h({ type: Boolean })], m.prototype, "disabled", 2), u([h({ type: String })], m.prototype, "recipientsTitle", 2), u([h({ type: String })], m.prototype, "recipientsEmptyTitle", 2), u([h({ type: String })], m.prototype, "recipientsEmptyMessage", 2), u([h({ type: Boolean })], m.prototype, "enableCsvImport", 2), u([h({ type: Boolean })], m.prototype, "enableDragDrop", 2), u([y()], m.prototype, "recipients", 2), u([y()], m.prototype, "selectedRecipients", 2), u([y()], m.prototype, "subject", 2), u([y()], m.prototype, "body", 2), u([y()], m.prototype, "templateId", 2), u([y()], m.prototype, "attachments", 2), u([y()], m.prototype, "isSending", 2), m = u([T("schmancy-mailbox")], m);
-var H = Object.getOwnPropertyDescriptor;
-let F = class extends O() {
-  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 r`
-			<div class="grid p-3 gap-2">
-				${this.layouts.map((e) => r`
-					<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>
-		`;
-  }
-};
-F = ((e, t, s, i) => {
-  for (var a, n = i > 1 ? void 0 : i ? H(t, s) : t, c = e.length - 1; c >= 0; c--) (a = e[c]) && (n = a(n) || n);
-  return n;
-})([T("schmancy-email-layout-selector")], F);
-var U = Object.defineProperty, V = Object.getOwnPropertyDescriptor, I = (e, t, s, i) => {
-  for (var a, n = i > 1 ? void 0 : i ? V(t, s) : t, c = e.length - 1; c >= 0; c--) (a = e[c]) && (n = (i ? a(t, s, n) : a(n)) || n);
-  return i && n && U(t, s, n), n;
-};
-let R = class extends j(z`
-	:host {
-		display: block;
-	}
-`) {
-  constructor() {
-    super(...arguments), this.templates = [], this.searchQuery = "", this.filteredTemplates = [], this.selectedCategory = "all", this.handleSearch = (e) => {
-      const t = e.target;
-      this.searchQuery = t.value;
-    }, this.handleCategorySelect = (e) => {
-      this.selectedCategory = e, this.updateFilteredTemplates();
-    }, this.selectTemplate = (e) => {
-      this.dispatchEvent(new CustomEvent("template-selected", { detail: e, bubbles: !0, composed: !0 })), L.dismiss();
-    }, this.close = () => {
-      L.dismiss();
-    };
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.updateFilteredTemplates();
-  }
-  updated(e) {
-    (e.has("templates") || e.has("searchQuery") || e.has("selectedCategory")) && this.updateFilteredTemplates();
-  }
-  get categories() {
-    const e = /* @__PURE__ */ new Set();
-    return this.templates.forEach((t) => {
-      t.category && e.add(t.category);
-    }), ["all", ...Array.from(e)];
-  }
-  updateFilteredTemplates() {
-    let e = [...this.templates];
-    if (this.selectedCategory !== "all" && (e = e.filter((t) => t.category === this.selectedCategory)), this.searchQuery.trim()) {
-      const t = this.searchQuery.toLowerCase();
-      e = e.filter((s) => s.name.toLowerCase().includes(t) || s.category?.toLowerCase().includes(t) || s.description?.toLowerCase().includes(t));
-    }
-    this.filteredTemplates = e;
-  }
-  render() {
-    return r`
-			<div class="flex flex-col h-full overflow-hidden">
-				<!-- Header -->
-				<div class="flex items-center justify-between px-6 py-4 border-b border-outline-variant">
-					<div class="flex items-center gap-3">
-						<schmancy-icon size="24px" class="text-primary">mail</schmancy-icon>
-						<schmancy-typography type="headline" token="md">
-							Choose Email Template
-						</schmancy-typography>
-					</div>
-					<schmancy-button
-						variant="text"
-						@click=${this.close}
-						class="hover:bg-surface-container rounded-full w-10 h-10 p-0"
-					>
-						<schmancy-icon>close</schmancy-icon>
-					</schmancy-button>
-				</div>
-
-				<!-- Body -->
-				<div class="flex-1 flex flex-col overflow-hidden">
-					${this.renderTemplateList()}
-				</div>
-			</div>
-		`;
-  }
-  renderTemplateList() {
-    return r`
-			<!-- Search and Filter Bar -->
-			<div class="px-6 py-4 border-b border-outline-variant bg-surface-containerLow">
-				<div class="flex flex-col gap-4">
-					<!-- Search Input -->
-					<schmancy-input
-						type="search"
-						placeholder="Search templates..."
-						.value=${this.searchQuery}
-						@input=${this.handleSearch}
-						class="w-full"
-					>
-						<schmancy-icon slot="prefix" size="20px" class="text-surface-onVariant">search</schmancy-icon>
-						${d(this.searchQuery, () => r`
-							<schmancy-button
-								slot="suffix"
-								variant="text"
-								@click=${() => {
-      this.searchQuery = "";
-    }}
-								class="rounded-full w-8 h-8 p-0"
-							>
-								<schmancy-icon size="16px">close</schmancy-icon>
-							</schmancy-button>
-						`)}
-					</schmancy-input>
-
-					<!-- Category Filter -->
-					${d(this.categories.length > 1, () => r`
-						<div class="flex gap-2 flex-wrap">
-							${D(this.categories, (e) => e, (e) => r`
-									<schmancy-chip
-										class="cursor-pointer transition-all hover:shadow-sm ${this.selectedCategory === e ? "bg-primary text-primary-on" : "border border-outline"}"
-										@click=${() => this.handleCategorySelect(e)}
-									>
-										${e === "all" ? "All Templates" : e}
-									</schmancy-chip>
-								`)}
-						</div>
-					`)}
-				</div>
-			</div>
-
-			<!-- Template List with Previews -->
-			<div class="flex-1 overflow-y-auto px-6 py-6">
-				${d(this.filteredTemplates.length > 0, () => r`
-						<div class="space-y-6">
-							${D(this.filteredTemplates, (e) => e.id, (e) => r`
-									<schmancy-surface
-										type="containerLow"
-										elevation="1"
-										rounded="all"
-										class="group cursor-pointer hover:elevation-3 transition-all duration-200 overflow-hidden"
-										@click=${() => this.selectTemplate(e)}
-									>
-										<!-- Template Header -->
-										<div class="p-4 border-b border-outline-variant">
-											<div class="flex items-start justify-between">
-												<div class="flex-1">
-													<schmancy-typography type="title" token="md" class="font-semibold leading-tight mb-1">
-														${e.name}
-													</schmancy-typography>
-													${d(e.category, () => r`
-														<schmancy-chip class="text-xs border border-outline">
-															${e.category}
-														</schmancy-chip>
-													`)}
-												</div>
-												<schmancy-button 
-													variant="filled" 
-													size="sm"
-													class="opacity-0 group-hover:opacity-100 transition-opacity"
-												>
-													Use This
-												</schmancy-button>
-											</div>
-										</div>
-										
-										<!-- Email Preview -->
-										<div class="p-4 bg-surface">
-											<schmancy-email-viewer
-												subject=${e.subject}
-												body=${e.body}
-												mode="desktop"
-												class="max-h-96 overflow-y-auto"
-											></schmancy-email-viewer>
-										</div>
-									</schmancy-surface>
-								`)}
-						</div>
-					`, () => r`
-						<div class="flex flex-col items-center justify-center h-96 text-center">
-							<div class="mb-6">
-								<schmancy-icon size="64px" class="text-surface-onVariant opacity-20">mail_outline</schmancy-icon>
-							</div>
-							<schmancy-typography type="headline" token="sm" class="mb-2">
-								${this.searchQuery || this.selectedCategory !== "all" ? "No templates found" : "No templates available"}
-							</schmancy-typography>
-							<schmancy-typography type="body" token="md" class="text-surface-onVariant mb-6 max-w-md">
-								${this.searchQuery ? `No templates match your search for "${this.searchQuery}"` : this.selectedCategory !== "all" ? `No templates found in the "${this.selectedCategory}" category` : "Start by creating your first email template"}
-							</schmancy-typography>
-							${d(this.searchQuery || this.selectedCategory !== "all", () => r`
-								<div class="flex gap-3">
-									${d(this.searchQuery, () => r`
-										<schmancy-button
-											variant="outlined"
-											@click=${() => {
-      this.searchQuery = "";
-    }}
-										>
-											<schmancy-icon slot="prefix">clear</schmancy-icon>
-											Clear Search
-										</schmancy-button>
-									`)}
-									${d(this.selectedCategory !== "all", () => r`
-										<schmancy-button
-											variant="filled"
-											@click=${() => this.handleCategorySelect("all")}
-										>
-											<schmancy-icon slot="prefix">view_list</schmancy-icon>
-											Show All Templates
-										</schmancy-button>
-									`)}
-								</div>
-							`)}
-						</div>
-					`)}
-			</div>
-		`;
-  }
-};
-I([h({ type: Array })], R.prototype, "templates", 2), I([y()], R.prototype, "searchQuery", 2), I([y()], R.prototype, "filteredTemplates", 2), I([y()], R.prototype, "selectedCategory", 2), R = I([T("schmancy-email-template-picker")], R);
-var W = Object.defineProperty, N = Object.getOwnPropertyDescriptor, x = (e, t, s, i) => {
-  for (var a, n = i > 1 ? void 0 : i ? N(t, s) : t, c = e.length - 1; c >= 0; c--) (a = e[c]) && (n = (i ? a(t, s, n) : a(n)) || n);
-  return i && n && W(t, s, n), n;
-};
-let v = class extends j(z`
-	: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 = E(), this.bodyTextAreaRef = E(), this.fileInputRef = E(), this.imageInputRef = E(), 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 = () => {
-      P.component(r`
-			<schmancy-email-layout-selector
-				@layout-select=${(e) => {
-        this.applyLayout(e.detail.layout), P.close();
-      }}
-			></schmancy-email-layout-selector>
-		`);
-    }, this.openTemplatePicker = () => {
-      const e = new R();
-      e.templates = this.templates, k(e, "template-selected").pipe(C(this.disconnecting)).subscribe(this.handleTemplateSelected), L.open({ component: e });
-    }, this.handleTemplateSelected = (e) => {
-      const t = e.detail;
-      this.subject = t.subject, this.body = t.body, this.dispatchChange(), b.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 b.error(`File "${e.name}" is not an image`);
-      if (e.size > 10485760) b.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), b.warning("No upload handler configured. Using local preview."));
-          const s = await this.getImageDimensions(e);
-          this.insertImageMarkdown(t, e.name, s.width, s.height), b.success("Image uploaded successfully");
-        } catch {
-          b.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}`, c = a.selectionStart, o = a.selectionEnd, l = this.body.substring(0, c) + n + this.body.substring(o);
-      this.body = l, this.dispatchChange(), this.updateComplete.then(() => {
-        const p = this.bodyTextAreaRef.value?.shadowRoot?.querySelector("textarea");
-        if (p) {
-          const S = c + n.length;
-          p.setSelectionRange(S, S), 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 b.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 b.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.addEventListeners();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-  }
-  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` }];
-  }
-  addEventListeners() {
-    k(this, "keydown").pipe(C(this.disconnecting)).subscribe(this.handleKeyDown), k(document, "paste").pipe(C(this.disconnecting)).subscribe(this.handlePaste), k(document, "dragenter").pipe(C(this.disconnecting)).subscribe(this.handleDragEnter), k(document, "dragleave").pipe(C(this.disconnecting)).subscribe(this.handleDocumentDragLeave), k(document, "drop").pipe(C(this.disconnecting)).subscribe(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 c = this.bodyTextAreaRef.value?.shadowRoot?.querySelector("textarea");
-      if (c) if (c.focus(), t) {
-        const o = i + e.indexOf(t), l = o + t.length;
-        c.setSelectionRange(o, l);
-      } else c.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, c = i.value.substring(a, n), o = e + (c || 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(), c ? p.setSelectionRange(a + o.length, a + o.length) : p.setSelectionRange(a + e.length, a + e.length + s.length));
-    });
-  }
-  render() {
-    return r`
-			<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
-								${A(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()}
-									>
-										${d(this.isUploading, () => r`<schmancy-progress size="sm" class="w-4 h-4"></schmancy-progress>`, () => r`<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
-							${A(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 -->
-						${d(this.isUploading, () => r`
-							<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) -->
-						${d(this.attachments.length > 0, () => r`
-							<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">
-									${D(this.attachments, (e) => e.id, (e) => r`
-										<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
-							${A(this.fileInputRef)}
-							type="file"
-							multiple
-							@change=${this.handleFileChange}
-						>
-						<input
-							${A(this.imageInputRef)}
-							type="file"
-							accept="image/*"
-							@change=${this.handleImageSelect}
-						>
-					</div>
-
-				</div>
-			</schmancy-surface>
-
-		`;
-  }
-};
-x([h({ type: String })], v.prototype, "subject", 2), x([h({ type: String })], v.prototype, "body", 2), x([h({ type: Boolean })], v.prototype, "disabled", 2), x([h({ type: Array })], v.prototype, "attachments", 2), x([h({ type: Object })], v.prototype, "config", 2), x([h({ type: Array })], v.prototype, "templates", 2), x([y()], v.prototype, "dragOver", 2), x([y()], v.prototype, "isUploading", 2), v = x([T("schmancy-email-editor")], v);
-var Q = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, $ = (e, t, s, i) => {
-  for (var a, n = i > 1 ? void 0 : i ? _(t, s) : t, c = e.length - 1; c >= 0; c--) (a = e[c]) && (n = (i ? a(t, s, n) : a(n)) || n);
-  return i && n && Q(t, s, n), n;
-};
-let w = class extends j(z`
-	: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), c = "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" : c}; 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" : c}; 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 c = i[1].trim().match(/!\[([^\]]*)\]\(([^)]+)\)/);
-      if (c) {
-        const [, o, l] = c;
-        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((c, 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;">
-					${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 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: c, imgWidth: o, imgHeight: l } = this.generateImageStyles(n, !0);
-      let p = `<img src="${i}" alt="${s || "Image"}" style="${c}" 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 c = this.parseImageAttributes(n), { imgStyle: o, imgWidth: l, imgHeight: p } = this.generateImageStyles(c, !1);
-      let S = `<img src="${a}" alt="${i || "Image"}" style="${o}" border="0"`;
-      return l && (S += ` width="${l}"`), p && (S += ` height="${p}"`), S += ">", `<table cellpadding="0" cellspacing="0" border="0" style="margin: 16px 0;"><tr><td>${S}</td></tr></table>`;
-    }), t = t.replace(/\n\n/g, '</p><p style="margin: 0 0 16px 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.6; color: #333333;">').replace(/\n/g, "<br>").replace(/\*\*(.*?)\*\*/g, '<strong style="font-weight: bold;">$1</strong>').replace(/\*(.*?)\*/g, '<em style="font-style: italic;">$1</em>').replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" style="color: #0066cc; text-decoration: underline;">$1</a>').replace(/^# (.*$)/gim, '<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin: 24px 0 16px 0;"><tr><td><h1 style="margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold; color: #1a1a1a;">$1</h1></td></tr></table>').replace(/^\* (.*$)/gim, '<li style="margin: 4px 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333;">$1</li>').replace(/^\d+\. (.*$)/gim, '<li style="margin: 4px 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333;">$1</li>').replace(/^---$/gim, '<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin: 24px 0;"><tr><td style="border-top: 1px solid #e0e0e0; height: 1px; line-height: 1px;">&nbsp;</td></tr></table>'), t = t.replace(/(<li[^>]*>.*?<\/li>(?:\s*<li[^>]*>.*?<\/li>)*)/gs, (s) => {
-      const i = /^\d+\./.test(s.replace(/<[^>]*>/g, "")), a = i ? "ol" : "ul";
-      return `<table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td><${a} style="margin: 16px 0; padding: 0 0 0 20px; font-family: Arial, Helvetica, sans-serif;">${s}</${a}></td></tr></table>`;
-    }), t.includes("<table>") || t.includes("<h1>") || (t = `<p style="margin: 0 0 16px 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.6; color: #333333;">${t}</p>`), t = `<table cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width: 600px; margin: 0 auto;">
-			<tr>
-				<td style="padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.6; color: #333333;">
-					${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 r`
-			<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 || r`<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">
-								${d(this.body, () => r`
-										${d(this.viewMode === "html", () => r`
-												<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>
-											`, () => r`
-												<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>
-											`)}
-									`, () => r`
-										<!-- 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 -->
-							${d(this.attachments.length > 0, () => r`
-								<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">
-											${D(this.attachments, (i) => i.id, (i) => r`
-												<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 -->
-					${d(this.body, () => r`
-						<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>
-									${d(this.attachments.length > 0, () => r`
-										<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>
-		`;
-  }
-};
-$([h({ type: String })], w.prototype, "subject", 2), $([h({ type: String })], w.prototype, "body", 2), $([h({ type: Array })], w.prototype, "attachments", 2), $([h({ type: Array })], w.prototype, "recipients", 2), $([h({ type: String })], w.prototype, "fromAddress", 2), $([h({ type: String })], w.prototype, "toAddress", 2), $([y()], w.prototype, "viewMode", 2), w = $([T("schmancy-email-viewer")], w);
-var Y = Object.defineProperty, q = Object.getOwnPropertyDescriptor, f = (e, t, s, i) => {
-  for (var a, n = i > 1 ? void 0 : i ? q(t, s) : t, c = e.length - 1; c >= 0; c--) (a = e[c]) && (n = (i ? a(t, s, n) : a(n)) || n);
-  return i && n && Y(t, s, n), n;
-};
-let g = class extends j(z`
-	: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 = E(), 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 b.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 b.error("No valid email addresses found in CSV");
-          this.dispatchEvent(new CustomEvent("emails-imported", { detail: { emails: a, source: "csv" }, bubbles: !0, composed: !0 })), b.success(`Imported ${a.length} emails from CSV file`);
-        } catch {
-          b.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(), k(this, "emails-imported").pipe(C(this.disconnecting)).subscribe(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 c = /* @__PURE__ */ new Set();
-    for (const o of i) {
-      const l = o[n]?.toString();
-      if (!l) continue;
-      const p = l.toLowerCase().trim();
-      this.isValidEmail(p) && !c.has(p) && (c.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, "")), c = {};
-      s.forEach((o, l) => {
-        c[o] = n[l] || "";
-      }), i.push(c);
-    }
-    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 r`
-			<!-- Hidden file input for CSV import -->
-			${d(this.enableCsvImport, () => r`
-				<input
-					type="file"
-					accept=".csv"
-					${A(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>
-						${d(this.recipients.length > 0, () => r`
-							<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 r`
-			<!-- 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"
-				>
-					${d(this.searchQuery, () => r`
-						<schmancy-button
-							slot="suffix" 
-							variant="text"
-							@click=${this.clearSearch}
-						>
-							<schmancy-icon size="16px">close</schmancy-icon>
-						</schmancy-button>
-					`)}
-				</schmancy-input>
-				
-				${d(this.enableCsvImport, () => r`
-					<schmancy-button
-						variant="outlined"
-						@click=${this.handleImportFromCSV}
-						?disabled=${this.disabled}
-					>
-						<schmancy-icon slot="prefix" size="16px">upload_file</schmancy-icon>
-						Import
-					</schmancy-button>
-				`)}
-			</div>
-
-			${d(this.recipients.length > 0, () => r`
-				<!-- 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">
-					${d(this.filteredRecipients.length > 0, () => r`
-							<div class="flex flex-wrap gap-3">
-								${D(this.filteredRecipients, (e) => e, (e) => r`
-										<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>
-						`, () => r`
-							<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>
-			`, () => r`
-				<!-- 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 -->
-			${d(this.dragOver && this.enableDragDrop, () => r`
-					<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([y()], g.prototype, "dragOver", 2), f([y()], g.prototype, "localSelectedRecipients", 2), f([y()], g.prototype, "searchQuery", 2), f([y()], g.prototype, "filteredRecipients", 2), f([y()], g.prototype, "boatState", 2), g = f([T("schmancy-email-recipients")], g);
-export {
-  m as S,
-  v as a,
-  w as b,
-  g as c,
-  F as d
-};
-//# sourceMappingURL=email-recipients-BzjAKNJ0.js.map