@mhmo91/schmancy 0.4.70 → 0.4.71

package/dist/{email-recipients-B9F9tbTi.cjs → email-recipients-CbZNnzoj.cjs}

@@ -1,9 +1,9 @@
-"use strict";require("rxjs"),require("lit/directives/class-map.js"),require("lit/directives/style-map.js");const S=require("./litElement.mixin-D8xYT3dQ.cjs"),R=require("./tailwind.mixin-BFHdirqy.cjs"),r=require("lit/decorators.js"),c=require("lit"),d=require("lit/directives/when.js"),g=require("lit/directives/ref.js"),$=require("lit/directives/repeat.js"),u=require("./notification-service-BL_SA5r6.cjs");require("./dialog-content-DBlOSail.cjs");const E=require("./dialog-service-C4ko20zk.cjs"),k=require("./sheet.service-DGYkGKzX.cjs");var C=Object.defineProperty,T=Object.getOwnPropertyDescriptor,m=(e,t,i,s)=>{for(var a,n=s>1?void 0:s?T(t,i):t,o=e.length-1;o>=0;o--)(a=e[o])&&(n=(s?a(t,i,n):a(n))||n);return s&&n&&C(t,i,n),n};exports.SchmancyMailbox=class extends S.$LitElement(c.css`
+"use strict";require("rxjs"),require("lit/directives/class-map.js"),require("lit/directives/style-map.js");const $=require("./litElement.mixin-B12Y4mEr.cjs"),R=require("./tailwind.mixin-BlZIIaOE.cjs"),c=require("lit/decorators.js"),o=require("lit"),d=require("lit/directives/when.js"),g=require("lit/directives/ref.js"),S=require("lit/directives/repeat.js"),u=require("./notification-service-kLTt3JtW.cjs");require("./dialog-content-BFmy9Sbo.cjs");const k=require("./dialog-service-DS-aEjlX.cjs"),E=require("./sheet.service-DV9xNhS8.cjs");var C=Object.defineProperty,T=Object.getOwnPropertyDescriptor,m=(e,t,i,s)=>{for(var a,n=s>1?void 0:s?T(t,i):t,r=e.length-1;r>=0;r--)(a=e[r])&&(n=(s?a(t,i,n):a(n))||n);return s&&n&&C(t,i,n),n};exports.SchmancyMailbox=class extends $.$LitElement(o.css`
 	:host {
 		display: block;
 		height: 100%;
 	}
-`){constructor(){super(...arguments),this.config={},this.templates=[],this.importSources=[],this.disabled=!1,this.recipientsTitle="Recipients",this.recipientsEmptyTitle="No recipients yet",this.recipientsEmptyMessage="Import from sources or upload a CSV",this.enableCsvImport=!0,this.enableDragDrop=!0,this.recipients=[],this.selectedRecipients=[],this.subject="",this.body="",this.templateId=null,this.attachments=[],this.isSending=!1,this.handleEmailsImported=e=>{const{emails:t}=e.detail,i=[...new Set([...this.recipients,...t])],s=t.filter(a=>!this.recipients.includes(a));this.recipients=i,this.selectedRecipients=[...new Set([...this.selectedRecipients,...s])],this.dispatchEvent(new CustomEvent("emails-imported",{detail:{emails:s,source:e.detail.source},bubbles:!0,composed:!0}))},this.handleRecipientRemoved=e=>{const{email:t}=e.detail;this.recipients=this.recipients.filter(i=>i!==t),this.selectedRecipients=this.selectedRecipients.filter(i=>i!==t),this.dispatchEvent(new CustomEvent("recipient-removed",{detail:{email:t},bubbles:!0,composed:!0}))},this.handleRecipientsCleared=()=>{this.recipients=[],this.selectedRecipients=[],this.dispatchEvent(new CustomEvent("recipients-cleared",{bubbles:!0,composed:!0}))},this.handleSelectionChanged=e=>{const{selectedEmails:t}=e.detail;this.selectedRecipients=t,this.dispatchEvent(new CustomEvent("selection-changed",{detail:{selectedEmails:t},bubbles:!0,composed:!0}))},this.handleEditorChange=e=>{const{subject:t,body:i,templateId:s,attachments:a}=e.detail;this.subject=t,this.body=i,this.templateId=s,this.attachments=a,this.dispatchEvent(new CustomEvent("compose-changed",{detail:{subject:t,body:i,templateId:s,attachments:a},bubbles:!0,composed:!0}))},this.handleSend=async()=>{if(this.selectedRecipients.length!==0)if(this.subject.trim())if(this.body.trim()){this.isSending=!0;try{const e={recipients:this.selectedRecipients,subject:this.subject,body:this.body,attachments:this.attachments,templateId:this.templateId};this.dispatchEvent(new CustomEvent("send-email",{detail:{request:e},bubbles:!0,composed:!0}))}catch(e){this.dispatchEvent(new CustomEvent("send-error",{detail:{error:e instanceof Error?e.message:"Failed to send email"},bubbles:!0,composed:!0}))}finally{this.isSending=!1}}else this.dispatchEvent(new CustomEvent("send-error",{detail:{error:"Please enter a message body"},bubbles:!0,composed:!0}));else this.dispatchEvent(new CustomEvent("send-error",{detail:{error:"Please enter a subject"},bubbles:!0,composed:!0}));else this.dispatchEvent(new CustomEvent("send-error",{detail:{error:"Please select at least one recipient"},bubbles:!0,composed:!0}))}}connectedCallback(){super.connectedCallback(),this.setSending(this.disabled)}updated(e){super.updated(e),e.has("disabled")&&this.setSending(this.disabled)}addRecipients(e){const t=[...new Set([...this.recipients,...e])],i=e.filter(s=>!this.recipients.includes(s));this.recipients=t,this.selectedRecipients=[...new Set([...this.selectedRecipients,...i])]}setSubject(e){this.subject=e}setBody(e){this.body=e}setTemplate(e){this.templateId=e}clearCompose(){this.recipients=[],this.selectedRecipients=[],this.subject="",this.body="",this.templateId=null,this.attachments=[]}setSending(e){this.isSending=e}render(){const e=this.selectedRecipients.length>0&&this.subject.trim()&&this.body.trim()&&!this.isSending&&!this.disabled;return c.html`
+`){constructor(){super(...arguments),this.config={},this.templates=[],this.importSources=[],this.disabled=!1,this.recipientsTitle="Recipients",this.recipientsEmptyTitle="No recipients yet",this.recipientsEmptyMessage="Import from sources or upload a CSV",this.enableCsvImport=!0,this.enableDragDrop=!0,this.recipients=[],this.selectedRecipients=[],this.subject="",this.body="",this.templateId=null,this.attachments=[],this.isSending=!1,this.handleEmailsImported=e=>{const{emails:t}=e.detail,i=[...new Set([...this.recipients,...t])],s=t.filter(a=>!this.recipients.includes(a));this.recipients=i,this.selectedRecipients=[...new Set([...this.selectedRecipients,...s])],this.dispatchEvent(new CustomEvent("emails-imported",{detail:{emails:s,source:e.detail.source},bubbles:!0,composed:!0}))},this.handleRecipientRemoved=e=>{const{email:t}=e.detail;this.recipients=this.recipients.filter(i=>i!==t),this.selectedRecipients=this.selectedRecipients.filter(i=>i!==t),this.dispatchEvent(new CustomEvent("recipient-removed",{detail:{email:t},bubbles:!0,composed:!0}))},this.handleRecipientsCleared=()=>{this.recipients=[],this.selectedRecipients=[],this.dispatchEvent(new CustomEvent("recipients-cleared",{bubbles:!0,composed:!0}))},this.handleSelectionChanged=e=>{const{selectedEmails:t}=e.detail;this.selectedRecipients=t,this.dispatchEvent(new CustomEvent("selection-changed",{detail:{selectedEmails:t},bubbles:!0,composed:!0}))},this.handleEditorChange=e=>{const{subject:t,body:i,templateId:s,attachments:a}=e.detail;this.subject=t,this.body=i,this.templateId=s,this.attachments=a,this.dispatchEvent(new CustomEvent("compose-changed",{detail:{subject:t,body:i,templateId:s,attachments:a},bubbles:!0,composed:!0}))},this.handleSend=async()=>{if(this.selectedRecipients.length!==0)if(this.subject.trim())if(this.body.trim()){this.isSending=!0;try{const e={recipients:this.selectedRecipients,subject:this.subject,body:this.body,attachments:this.attachments,templateId:this.templateId};this.dispatchEvent(new CustomEvent("send-email",{detail:{request:e},bubbles:!0,composed:!0}))}catch(e){this.dispatchEvent(new CustomEvent("send-error",{detail:{error:e instanceof Error?e.message:"Failed to send email"},bubbles:!0,composed:!0}))}finally{this.isSending=!1}}else this.dispatchEvent(new CustomEvent("send-error",{detail:{error:"Please enter a message body"},bubbles:!0,composed:!0}));else this.dispatchEvent(new CustomEvent("send-error",{detail:{error:"Please enter a subject"},bubbles:!0,composed:!0}));else this.dispatchEvent(new CustomEvent("send-error",{detail:{error:"Please select at least one recipient"},bubbles:!0,composed:!0}))}}connectedCallback(){super.connectedCallback(),this.setSending(this.disabled)}updated(e){super.updated(e),e.has("disabled")&&this.setSending(this.disabled)}addRecipients(e){const t=[...new Set([...this.recipients,...e])],i=e.filter(s=>!this.recipients.includes(s));this.recipients=t,this.selectedRecipients=[...new Set([...this.selectedRecipients,...i])]}setSubject(e){this.subject=e}setBody(e){this.body=e}setTemplate(e){this.templateId=e}clearCompose(){this.recipients=[],this.selectedRecipients=[],this.subject="",this.body="",this.templateId=null,this.attachments=[]}setSending(e){this.isSending=e}render(){const e=this.selectedRecipients.length>0&&this.subject.trim()&&this.body.trim()&&!this.isSending&&!this.disabled;return o.html`
 			<!-- Main Layout Container -->
 			<div class="flex flex-col h-full gap-6 p-6">
 				
@@ -50,7 +50,7 @@
 								<schmancy-typography type="body" token="sm" class="font-medium">
 									${this.selectedRecipients.length} recipient${this.selectedRecipients.length===1?"":"s"} selected
 								</schmancy-typography>
-								${d.when(this.attachments.length>0,()=>c.html`
+								${d.when(this.attachments.length>0,()=>o.html`
 									<schmancy-typography type="body" token="xs">
 										${this.attachments.length} attachment${this.attachments.length===1?"":"s"}
 									</schmancy-typography>
@@ -90,9 +90,9 @@
 				@recipients-cleared=${this.handleRecipientsCleared}
 				@selection-changed=${this.handleSelectionChanged}
 			></schmancy-email-recipients>
-		`}},m([r.property({type:Object})],exports.SchmancyMailbox.prototype,"config",2),m([r.property({type:Array})],exports.SchmancyMailbox.prototype,"templates",2),m([r.property({type:Array})],exports.SchmancyMailbox.prototype,"importSources",2),m([r.property({type:Boolean})],exports.SchmancyMailbox.prototype,"disabled",2),m([r.property({type:String})],exports.SchmancyMailbox.prototype,"recipientsTitle",2),m([r.property({type:String})],exports.SchmancyMailbox.prototype,"recipientsEmptyTitle",2),m([r.property({type:String})],exports.SchmancyMailbox.prototype,"recipientsEmptyMessage",2),m([r.property({type:Boolean})],exports.SchmancyMailbox.prototype,"enableCsvImport",2),m([r.property({type:Boolean})],exports.SchmancyMailbox.prototype,"enableDragDrop",2),m([r.state()],exports.SchmancyMailbox.prototype,"recipients",2),m([r.state()],exports.SchmancyMailbox.prototype,"selectedRecipients",2),m([r.state()],exports.SchmancyMailbox.prototype,"subject",2),m([r.state()],exports.SchmancyMailbox.prototype,"body",2),m([r.state()],exports.SchmancyMailbox.prototype,"templateId",2),m([r.state()],exports.SchmancyMailbox.prototype,"attachments",2),m([r.state()],exports.SchmancyMailbox.prototype,"isSending",2),exports.SchmancyMailbox=m([r.customElement("schmancy-mailbox")],exports.SchmancyMailbox);var I=Object.getOwnPropertyDescriptor;exports.SchmancyEmailLayoutSelector=class extends R.TailwindElement(){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.html`
+		`}},m([c.property({type:Object})],exports.SchmancyMailbox.prototype,"config",2),m([c.property({type:Array})],exports.SchmancyMailbox.prototype,"templates",2),m([c.property({type:Array})],exports.SchmancyMailbox.prototype,"importSources",2),m([c.property({type:Boolean})],exports.SchmancyMailbox.prototype,"disabled",2),m([c.property({type:String})],exports.SchmancyMailbox.prototype,"recipientsTitle",2),m([c.property({type:String})],exports.SchmancyMailbox.prototype,"recipientsEmptyTitle",2),m([c.property({type:String})],exports.SchmancyMailbox.prototype,"recipientsEmptyMessage",2),m([c.property({type:Boolean})],exports.SchmancyMailbox.prototype,"enableCsvImport",2),m([c.property({type:Boolean})],exports.SchmancyMailbox.prototype,"enableDragDrop",2),m([c.state()],exports.SchmancyMailbox.prototype,"recipients",2),m([c.state()],exports.SchmancyMailbox.prototype,"selectedRecipients",2),m([c.state()],exports.SchmancyMailbox.prototype,"subject",2),m([c.state()],exports.SchmancyMailbox.prototype,"body",2),m([c.state()],exports.SchmancyMailbox.prototype,"templateId",2),m([c.state()],exports.SchmancyMailbox.prototype,"attachments",2),m([c.state()],exports.SchmancyMailbox.prototype,"isSending",2),exports.SchmancyMailbox=m([c.customElement("schmancy-mailbox")],exports.SchmancyMailbox);var I=Object.getOwnPropertyDescriptor;exports.SchmancyEmailLayoutSelector=class extends R.TailwindElement(){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 o.html`
 			<div class="grid p-3 gap-2">
-				${this.layouts.map(e=>c.html`
+				${this.layouts.map(e=>o.html`
 					<schmancy-button 
 						variant="outlined"
 						@click=${()=>this.selectLayout(e.id)}
@@ -108,20 +108,18 @@
 					</schmancy-button>
 				`)}
 			</div>
-		`}},exports.SchmancyEmailLayoutSelector=((e,t,i,s)=>{for(var a,n=s>1?void 0:s?I(t,i):t,o=e.length-1;o>=0;o--)(a=e[o])&&(n=a(n)||n);return n})([r.customElement("schmancy-email-layout-selector")],exports.SchmancyEmailLayoutSelector);var D=Object.defineProperty,A=Object.getOwnPropertyDescriptor,w=(e,t,i,s)=>{for(var a,n=s>1?void 0:s?A(t,i):t,o=e.length-1;o>=0;o--)(a=e[o])&&(n=(s?a(t,i,n):a(n))||n);return s&&n&&D(t,i,n),n};let v=class extends S.$LitElement(c.css`
+		`}},exports.SchmancyEmailLayoutSelector=((e,t,i,s)=>{for(var a,n=s>1?void 0:s?I(t,i):t,r=e.length-1;r>=0;r--)(a=e[r])&&(n=a(n)||n);return n})([c.customElement("schmancy-email-layout-selector")],exports.SchmancyEmailLayoutSelector);var A=Object.defineProperty,D=Object.getOwnPropertyDescriptor,w=(e,t,i,s)=>{for(var a,n=s>1?void 0:s?D(t,i):t,r=e.length-1;r>=0;r--)(a=e[r])&&(n=(s?a(t,i,n):a(n))||n);return s&&n&&A(t,i,n),n};let x=class extends $.$LitElement(o.css`
 	: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})),k.sheet.dismiss())},this.close=()=>{k.sheet.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=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(i=>i.name.toLowerCase().includes(t)||i.category?.toLowerCase().includes(t)||i.description?.toLowerCase().includes(t))}this.filteredTemplates=e}render(){return c.html`
+`){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})),E.sheet.dismiss()},this.close=()=>{E.sheet.dismiss()}}connectedCallback(){super.connectedCallback(),this.updateFilteredTemplates()}updated(e){(e.has("templates")||e.has("searchQuery")||e.has("selectedCategory"))&&this.updateFilteredTemplates()}get categories(){const e=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(i=>i.name.toLowerCase().includes(t)||i.category?.toLowerCase().includes(t)||i.description?.toLowerCase().includes(t))}this.filteredTemplates=e}render(){return o.html`
 			<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-icon size="24px" class="text-primary">mail</schmancy-icon>
 						<schmancy-typography type="headline" token="md">
-							${this.showPreview?"Template Preview":"Choose Email Template"}
+							Choose Email Template
 						</schmancy-typography>
 					</div>
 					<schmancy-button
@@ -135,55 +133,23 @@
 
 				<!-- Body -->
 				<div class="flex-1 flex flex-col overflow-hidden">
-					${d.when(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">
-					${d.when(this.showPreview,()=>c.html`
-							<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.html`
-							<div class="flex gap-3">
-								<schmancy-button
-									variant="text"
-									@click=${this.close}
-									class="px-6 py-3"
-								>
-									Cancel
-								</schmancy-button>
-							</div>
-						`)}
+					${this.renderTemplateList()}
 				</div>
 			</div>
-		`}renderTemplateList(){return c.html`
+		`}renderTemplateList(){return o.html`
 			<!-- 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..."
+						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.when(this.searchQuery,()=>c.html`
+						${d.when(this.searchQuery,()=>o.html`
 							<schmancy-button
 								slot="suffix"
 								variant="text"
@@ -196,9 +162,9 @@
 					</schmancy-input>
 
 					<!-- Category Filter -->
-					${d.when(this.categories.length>1,()=>c.html`
+					${d.when(this.categories.length>1,()=>o.html`
 						<div class="flex gap-2 flex-wrap">
-							${$.repeat(this.categories,e=>e,e=>c.html`
+							${S.repeat(this.categories,e=>e,e=>o.html`
 									<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)}
@@ -211,66 +177,54 @@
 				</div>
 			</div>
 
-			<!-- Template List -->
+			<!-- Template List with Previews -->
 			<div class="flex-1 overflow-y-auto px-6 py-6">
-				${d.when(this.filteredTemplates.length>0,()=>c.html`
-						<div class="space-y-4">
-							${$.repeat(this.filteredTemplates,e=>e.id,e=>c.html`
+				${d.when(this.filteredTemplates.length>0,()=>o.html`
+						<div class="space-y-6">
+							${S.repeat(this.filteredTemplates,e=>e.id,e=>o.html`
 									<schmancy-surface
 										type="containerLow"
 										elevation="1"
 										rounded="all"
-										class="group cursor-pointer hover:elevation-3 transition-all duration-200 p-4"
+										class="group cursor-pointer hover:elevation-3 transition-all duration-200 overflow-hidden"
 										@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">
+										<!-- 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.when(e.isDefault,()=>c.html`
-														<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 -->
-												${d.when(e.category,()=>c.html`
-													<div class="mb-2">
+													${d.when(e.category,()=>o.html`
 														<schmancy-chip class="text-xs border border-outline">
 															${e.category}
 														</schmancy-chip>
-													</div>
-												`)}
-												
-												<!-- Description -->
-												${d.when(e.description,()=>c.html`
-														<schmancy-typography type="body" token="sm" class="text-surface-onVariant leading-relaxed">
-															${e.description}
-														</schmancy-typography>
-													`,()=>c.html`
-														<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
+												</div>
+												<schmancy-button 
+													variant="filled" 
+													size="sm"
+													class="opacity-0 group-hover:opacity-100 transition-opacity"
+												>
+													Use This
 												</schmancy-button>
 											</div>
 										</div>
+										
+										<!-- Email Preview -->
+										<div class="p-4 bg-surface">
+											<schmancy-email-viewer
+												subject=${e.subject}
+												body=${e.body}
+												mode="desktop"
+												class="max-h-96 overflow-y-auto"
+											></schmancy-email-viewer>
+										</div>
 									</schmancy-surface>
 								`)}
 						</div>
-					`,()=>c.html`
+					`,()=>o.html`
 						<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>
@@ -281,9 +235,9 @@
 							<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.when(this.searchQuery||this.selectedCategory!=="all",()=>c.html`
+							${d.when(this.searchQuery||this.selectedCategory!=="all",()=>o.html`
 								<div class="flex gap-3">
-									${d.when(this.searchQuery,()=>c.html`
+									${d.when(this.searchQuery,()=>o.html`
 										<schmancy-button
 											variant="outlined"
 											@click=${()=>{this.searchQuery=""}}
@@ -292,7 +246,7 @@
 											Clear Search
 										</schmancy-button>
 									`)}
-									${d.when(this.selectedCategory!=="all",()=>c.html`
+									${d.when(this.selectedCategory!=="all",()=>o.html`
 										<schmancy-button
 											variant="filled"
 											@click=${()=>this.handleCategorySelect("all")}
@@ -306,111 +260,16 @@
 						</div>
 					`)}
 			</div>
-		`}renderPreview(){return this.selectedTemplate?c.html`
-			<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 -->
-						${d.when(this.selectedTemplate.thumbnail,()=>c.html`
-								<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.html`
-								<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>
-								${d.when(this.selectedTemplate.isDefault,()=>c.html`
-									<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">
-								${d.when(this.selectedTemplate.category,()=>c.html`
-									<schmancy-chip class="border border-outline">
-										<schmancy-icon slot="prefix" size="12px">category</schmancy-icon>
-										${this.selectedTemplate.category}
-									</schmancy-chip>
-								`)}
-								${d.when(this.selectedTemplate.createdAt,()=>c.html`
-									<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>
-
-							${d.when(this.selectedTemplate.description,()=>c.html`
-									<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}};w([r.property({type:Array})],v.prototype,"templates",2),w([r.state()],v.prototype,"searchQuery",2),w([r.state()],v.prototype,"selectedTemplate",2),w([r.state()],v.prototype,"filteredTemplates",2),w([r.state()],v.prototype,"showPreview",2),w([r.state()],v.prototype,"selectedCategory",2),v=w([r.customElement("schmancy-email-template-picker")],v);var L=Object.defineProperty,j=Object.getOwnPropertyDescriptor,f=(e,t,i,s)=>{for(var a,n=s>1?void 0:s?j(t,i):t,o=e.length-1;o>=0;o--)(a=e[o])&&(n=(s?a(t,i,n):a(n))||n);return s&&n&&L(t,i,n),n};exports.SchmancyEmailEditor=class extends S.$LitElement(c.css`
+		`}};w([c.property({type:Array})],x.prototype,"templates",2),w([c.state()],x.prototype,"searchQuery",2),w([c.state()],x.prototype,"filteredTemplates",2),w([c.state()],x.prototype,"selectedCategory",2),x=w([c.customElement("schmancy-email-template-picker")],x);var L=Object.defineProperty,j=Object.getOwnPropertyDescriptor,f=(e,t,i,s)=>{for(var a,n=s>1?void 0:s?j(t,i):t,r=e.length-1;r>=0;r--)(a=e[r])&&(n=(s?a(t,i,n):a(n))||n);return s&&n&&L(t,i,n),n};exports.SchmancyEmailEditor=class extends $.$LitElement(o.css`
 	: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=g.createRef(),this.bodyTextAreaRef=g.createRef(),this.fileInputRef=g.createRef(),this.imageInputRef=g.createRef(),this.handleKeyDown=e=>{if(this.disabled)return;const t=this.bodyTextAreaRef.value?.shadowRoot?.querySelector("textarea");e.key==="Tab"&&e.target===t&&(e.preventDefault(),this.insertAtCursor("  "))},this.handlePaste=e=>{const t=this.bodyTextAreaRef.value?.shadowRoot?.querySelector("textarea");if(this.disabled||document.activeElement!==t)return;const i=e.clipboardData?.items;if(i)for(let s=0;s<i.length;s++){const a=i[s];if(a.type.indexOf("image")!==-1){e.preventDefault();const n=a.getAsFile();n&&this.uploadImage(n);break}}},this.handleSubjectChange=e=>{const t=e.target;this.subject=t.value,this.dispatchChange()},this.handleBodyChange=e=>{this.body=e.detail.value,this.dispatchChange()},this.dispatchChange=()=>{this.dispatchEvent(new CustomEvent("editor-change",{detail:{subject:this.subject,body:this.body,attachments:this.attachments},bubbles:!0,composed:!0}))},this.openLayoutDialog=()=>{E.$dialog.component(c.html`
+`){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=g.createRef(),this.bodyTextAreaRef=g.createRef(),this.fileInputRef=g.createRef(),this.imageInputRef=g.createRef(),this.handleKeyDown=e=>{if(this.disabled)return;const t=this.bodyTextAreaRef.value?.shadowRoot?.querySelector("textarea");e.key==="Tab"&&e.target===t&&(e.preventDefault(),this.insertAtCursor("  "))},this.handlePaste=e=>{const t=this.bodyTextAreaRef.value?.shadowRoot?.querySelector("textarea");if(this.disabled||document.activeElement!==t)return;const i=e.clipboardData?.items;if(i)for(let s=0;s<i.length;s++){const a=i[s];if(a.type.indexOf("image")!==-1){e.preventDefault();const n=a.getAsFile();n&&this.uploadImage(n);break}}},this.handleSubjectChange=e=>{const t=e.target;this.subject=t.value,this.dispatchChange()},this.handleBodyChange=e=>{this.body=e.detail.value,this.dispatchChange()},this.dispatchChange=()=>{this.dispatchEvent(new CustomEvent("editor-change",{detail:{subject:this.subject,body:this.body,attachments:this.attachments},bubbles:!0,composed:!0}))},this.openLayoutDialog=()=>{k.$dialog.component(o.html`
 			<schmancy-email-layout-selector
-				@layout-select=${e=>{this.applyLayout(e.detail.layout),E.$dialog.close()}}
+				@layout-select=${e=>{this.applyLayout(e.detail.layout),k.$dialog.close()}}
 			></schmancy-email-layout-selector>
-		`)},this.openTemplatePicker=()=>{const e=new v;e.templates=this.templates,e.addEventListener("template-selected",this.handleTemplateSelected),k.sheet.open({component:e,title:"Choose Email Template"})},this.handleTemplateSelected=e=>{const t=e.detail;this.subject=t.subject,this.body=t.body,this.dispatchChange(),u.$notify.success(`Template "${t.name}" applied successfully`)},this.applyLayout=e=>{const t={"columns-2":`
+		`)},this.openTemplatePicker=()=>{const e=new x;e.templates=this.templates,e.addEventListener("template-selected",this.handleTemplateSelected),E.sheet.open({component:e,title:"Choose Email Template"})},this.handleTemplateSelected=e=>{const t=e.detail;this.subject=t.subject,this.body=t.body,this.dispatchChange(),u.$notify.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}
@@ -500,7 +359,7 @@ Your primary content goes here. This area takes up most of the width while the s
 ![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 u.$notify.error(`File "${e.name}" is not an image`);if(e.size>10485760)u.$notify.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),u.$notify.warning("No upload handler configured. Using local preview."));const i=await this.getImageDimensions(e);this.insertImageMarkdown(t,e.name,i.width,i.height),u.$notify.success("Image uploaded successfully")}catch{u.$notify.error("Failed to upload image")}finally{this.isUploading=!1}}},this.createDataUrl=e=>new Promise((t,i)=>{const s=new FileReader;s.onload=()=>t(s.result),s.onerror=i,s.readAsDataURL(e)}),this.getImageDimensions=e=>new Promise(t=>{const i=new Image;i.onload=()=>{t({width:i.width,height:i.height}),URL.revokeObjectURL(i.src)},i.onerror=()=>{t({width:400,height:300}),URL.revokeObjectURL(i.src)},i.src=URL.createObjectURL(e)}),this.insertImageMarkdown=(e,t,i,s)=>{const a=this.bodyTextAreaRef.value?.shadowRoot?.querySelector("textarea");if(!a)return;const n=`![${t}](${e}){width=${Math.min(i,600)}px height=auto}`,o=a.selectionStart,l=a.selectionEnd,h=this.body.substring(0,o)+n+this.body.substring(l);this.body=h,this.dispatchChange(),this.updateComplete.then(()=>{const p=this.bodyTextAreaRef.value?.shadowRoot?.querySelector("textarea");if(p){const x=o+n.length;p.setSelectionRange(x,x),p.focus()}})},this.handleFileChange=e=>{const t=e.target,i=t.files;if(i)for(let s=0;s<i.length;s++){const a=i[s];a.type.startsWith("image/")?this.uploadImage(a):this.addFile(a)}t.value=""},this.handleImageSelect=e=>{const t=e.target,i=t.files?.[0];i&&i.type.startsWith("image/")&&this.uploadImage(i),t.value=""},this.handleDrop=e=>{e.preventDefault(),this.dragOver=!1;const t=e.dataTransfer?.files;if(t)for(let i=0;i<t.length;i++){const s=t[i];s.type.startsWith("image/")?this.uploadImage(s):this.addFile(s)}},this.handleDragEnter=e=>{e.preventDefault(),this.dragOver=!0},this.handleDocumentDragLeave=e=>{e.preventDefault(),this.dragOver=!1},this.handleDocumentDrop=e=>{e.preventDefault(),this.dragOver=!1},this.handleDragOver=e=>{e.preventDefault()},this.handleDragLeave=e=>{e.preventDefault()},this.addFile=e=>{if(e.size>10485760)return void u.$notify.error(`File "${e.name}" is too large. Maximum size is 10MB.`);if(this.attachments.some(i=>i.name===e.name&&i.size===e.size))return void u.$notify.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!
+`}[e];t&&this.insertAtCursor(t)},this.uploadImage=async e=>{if(!e.type.startsWith("image/"))return void u.$notify.error(`File "${e.name}" is not an image`);if(e.size>10485760)u.$notify.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),u.$notify.warning("No upload handler configured. Using local preview."));const i=await this.getImageDimensions(e);this.insertImageMarkdown(t,e.name,i.width,i.height),u.$notify.success("Image uploaded successfully")}catch{u.$notify.error("Failed to upload image")}finally{this.isUploading=!1}}},this.createDataUrl=e=>new Promise((t,i)=>{const s=new FileReader;s.onload=()=>t(s.result),s.onerror=i,s.readAsDataURL(e)}),this.getImageDimensions=e=>new Promise(t=>{const i=new Image;i.onload=()=>{t({width:i.width,height:i.height}),URL.revokeObjectURL(i.src)},i.onerror=()=>{t({width:400,height:300}),URL.revokeObjectURL(i.src)},i.src=URL.createObjectURL(e)}),this.insertImageMarkdown=(e,t,i,s)=>{const a=this.bodyTextAreaRef.value?.shadowRoot?.querySelector("textarea");if(!a)return;const n=`![${t}](${e}){width=${Math.min(i,600)}px height=auto}`,r=a.selectionStart,l=a.selectionEnd,h=this.body.substring(0,r)+n+this.body.substring(l);this.body=h,this.dispatchChange(),this.updateComplete.then(()=>{const p=this.bodyTextAreaRef.value?.shadowRoot?.querySelector("textarea");if(p){const v=r+n.length;p.setSelectionRange(v,v),p.focus()}})},this.handleFileChange=e=>{const t=e.target,i=t.files;if(i)for(let s=0;s<i.length;s++){const a=i[s];a.type.startsWith("image/")?this.uploadImage(a):this.addFile(a)}t.value=""},this.handleImageSelect=e=>{const t=e.target,i=t.files?.[0];i&&i.type.startsWith("image/")&&this.uploadImage(i),t.value=""},this.handleDrop=e=>{e.preventDefault(),this.dragOver=!1;const t=e.dataTransfer?.files;if(t)for(let i=0;i<t.length;i++){const s=t[i];s.type.startsWith("image/")?this.uploadImage(s):this.addFile(s)}},this.handleDragEnter=e=>{e.preventDefault(),this.dragOver=!0},this.handleDocumentDragLeave=e=>{e.preventDefault(),this.dragOver=!1},this.handleDocumentDrop=e=>{e.preventDefault(),this.dragOver=!1},this.handleDragOver=e=>{e.preventDefault()},this.handleDragLeave=e=>{e.preventDefault()},this.addFile=e=>{if(e.size>10485760)return void u.$notify.error(`File "${e.name}" is too large. Maximum size is 10MB.`);if(this.attachments.some(i=>i.name===e.name&&i.size===e.size))return void u.$notify.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.
 
@@ -689,7 +548,7 @@ You'll receive a tracking number via email once your order ships (usually within
 *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 i=this.bodyTextAreaRef.value.shadowRoot?.querySelector("textarea");if(!i)return;const s=i.selectionStart,a=i.selectionEnd,n=i.value.substring(0,s)+e+i.value.substring(a);this.body=n,this.dispatchChange(),this.updateComplete.then(()=>{const o=this.bodyTextAreaRef.value?.shadowRoot?.querySelector("textarea");if(o)if(o.focus(),t){const l=s+e.indexOf(t),h=l+t.length;o.setSelectionRange(l,h)}else o.setSelectionRange(s+e.length,s+e.length)})}wrapSelection(e,t,i){if(!this.bodyTextAreaRef.value)return;const s=this.bodyTextAreaRef.value.shadowRoot?.querySelector("textarea");if(!s)return;const a=s.selectionStart,n=s.selectionEnd,o=s.value.substring(a,n),l=e+(o||i)+t,h=s.value.substring(0,a)+l+s.value.substring(n);this.body=h,this.dispatchChange(),this.updateComplete.then(()=>{const p=this.bodyTextAreaRef.value?.shadowRoot?.querySelector("textarea");p&&(p.focus(),o?p.setSelectionRange(a+l.length,a+l.length):p.setSelectionRange(a+e.length,a+e.length+i.length))})}render(){return c.html`
+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 i=this.bodyTextAreaRef.value.shadowRoot?.querySelector("textarea");if(!i)return;const s=i.selectionStart,a=i.selectionEnd,n=i.value.substring(0,s)+e+i.value.substring(a);this.body=n,this.dispatchChange(),this.updateComplete.then(()=>{const r=this.bodyTextAreaRef.value?.shadowRoot?.querySelector("textarea");if(r)if(r.focus(),t){const l=s+e.indexOf(t),h=l+t.length;r.setSelectionRange(l,h)}else r.setSelectionRange(s+e.length,s+e.length)})}wrapSelection(e,t,i){if(!this.bodyTextAreaRef.value)return;const s=this.bodyTextAreaRef.value.shadowRoot?.querySelector("textarea");if(!s)return;const a=s.selectionStart,n=s.selectionEnd,r=s.value.substring(a,n),l=e+(r||i)+t,h=s.value.substring(0,a)+l+s.value.substring(n);this.body=h,this.dispatchChange(),this.updateComplete.then(()=>{const p=this.bodyTextAreaRef.value?.shadowRoot?.querySelector("textarea");p&&(p.focus(),r?p.setSelectionRange(a+l.length,a+l.length):p.setSelectionRange(a+e.length,a+e.length+i.length))})}render(){return o.html`
 			<schmancy-surface 
 				type="surface" 
 				rounded="all"
@@ -794,7 +653,7 @@ The Fulfillment Team`}]}addKeyboardListeners(){this.addEventListener("keydown",t
 										?disabled=${this.disabled||this.isUploading}
 										@click=${()=>this.imageInputRef.value?.click()}
 									>
-										${d.when(this.isUploading,()=>c.html`<schmancy-progress size="sm" class="w-4 h-4"></schmancy-progress>`,()=>c.html`<schmancy-icon>image</schmancy-icon>`)}
+										${d.when(this.isUploading,()=>o.html`<schmancy-progress size="sm" class="w-4 h-4"></schmancy-progress>`,()=>o.html`<schmancy-icon>image</schmancy-icon>`)}
 									</schmancy-icon-button>
 									<schmancy-icon-button 
 										size="sm" 
@@ -839,7 +698,7 @@ Tab key inserts 2 spaces for better formatting."
 						></schmancy-textarea>
 						
 						<!-- Upload Progress Overlay -->
-						${d.when(this.isUploading,()=>c.html`
+						${d.when(this.isUploading,()=>o.html`
 							<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">
@@ -861,14 +720,14 @@ Tab key inserts 2 spaces for better formatting."
 						</div>
 
 						<!-- Attachments Display (if any) -->
-						${d.when(this.attachments.length>0,()=>c.html`
+						${d.when(this.attachments.length>0,()=>o.html`
 							<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">
-									${$.repeat(this.attachments,e=>e.id,e=>c.html`
+									${S.repeat(this.attachments,e=>e.id,e=>o.html`
 										<schmancy-chip class="text-xs">
 											<span class="truncate max-w-32">${e.name}</span>
 											<button 
@@ -904,15 +763,15 @@ Tab key inserts 2 spaces for better formatting."
 				</div>
 			</schmancy-surface>
 
-		`}},f([r.property({type:String})],exports.SchmancyEmailEditor.prototype,"subject",2),f([r.property({type:String})],exports.SchmancyEmailEditor.prototype,"body",2),f([r.property({type:Boolean})],exports.SchmancyEmailEditor.prototype,"disabled",2),f([r.property({type:Array})],exports.SchmancyEmailEditor.prototype,"attachments",2),f([r.property({type:Object})],exports.SchmancyEmailEditor.prototype,"config",2),f([r.property({type:Array})],exports.SchmancyEmailEditor.prototype,"templates",2),f([r.state()],exports.SchmancyEmailEditor.prototype,"dragOver",2),f([r.state()],exports.SchmancyEmailEditor.prototype,"isUploading",2),exports.SchmancyEmailEditor=f([r.customElement("schmancy-email-editor")],exports.SchmancyEmailEditor);var z=Object.defineProperty,P=Object.getOwnPropertyDescriptor,b=(e,t,i,s)=>{for(var a,n=s>1?void 0:s?P(t,i):t,o=e.length-1;o>=0;o--)(a=e[o])&&(n=(s?a(t,i,n):a(n))||n);return s&&n&&z(t,i,n),n};exports.SchmancyEmailViewer=class extends S.$LitElement(c.css`
+		`}},f([c.property({type:String})],exports.SchmancyEmailEditor.prototype,"subject",2),f([c.property({type:String})],exports.SchmancyEmailEditor.prototype,"body",2),f([c.property({type:Boolean})],exports.SchmancyEmailEditor.prototype,"disabled",2),f([c.property({type:Array})],exports.SchmancyEmailEditor.prototype,"attachments",2),f([c.property({type:Object})],exports.SchmancyEmailEditor.prototype,"config",2),f([c.property({type:Array})],exports.SchmancyEmailEditor.prototype,"templates",2),f([c.state()],exports.SchmancyEmailEditor.prototype,"dragOver",2),f([c.state()],exports.SchmancyEmailEditor.prototype,"isUploading",2),exports.SchmancyEmailEditor=f([c.customElement("schmancy-email-editor")],exports.SchmancyEmailEditor);var z=Object.defineProperty,M=Object.getOwnPropertyDescriptor,b=(e,t,i,s)=>{for(var a,n=s>1?void 0:s?M(t,i):t,r=e.length-1;r>=0;r--)(a=e[r])&&(n=(s?a(t,i,n):a(n))||n);return s&&n&&z(t,i,n),n};exports.SchmancyEmailViewer=class extends $.$LitElement(o.css`
 	:host {
 		display: block;
 	}
-`){constructor(){super(...arguments),this.subject="",this.body="",this.attachments=[],this.recipients=[],this.fromAddress="sender@example.com",this.toAddress="recipient@example.com",this.viewMode="html"}parseLayoutBlocks(e){return e.replace(/:::layout\s+([a-zA-Z0-9-]+)\n([\s\S]*?)\n:::/g,(t,i,s)=>{switch(i){case"columns-2":return this.parseColumnsLayout(s,2);case"columns-3":return this.parseColumnsLayout(s,3);case"sidebar-left":return this.parseSidebarLayout(s,"left");case"sidebar-right":return this.parseSidebarLayout(s,"right");case"image-row":return this.parseImageRowLayout(s);default:return s}})}parseColumnsLayout(e,t){const i=/<div class="column">([\s\S]*?)<\/div>/g,s=[];let a;for(;(a=i.exec(e))!==null;)s.push(a[1].trim());if(s.length===0)return e;const n=Math.floor(100/t),o="0 10px 0 0";let l="<tr>";for(let h=0;h<t&&h<s.length;h++)l+=`
-				<td width="${n}%" style="padding: ${h===t-1?"0":o}; vertical-align: top; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.6; color: #333333;">
+`){constructor(){super(...arguments),this.subject="",this.body="",this.attachments=[],this.recipients=[],this.fromAddress="sender@example.com",this.toAddress="recipient@example.com",this.viewMode="html"}parseLayoutBlocks(e){return e.replace(/:::layout\s+([a-zA-Z0-9-]+)\n([\s\S]*?)\n:::/g,(t,i,s)=>{switch(i){case"columns-2":return this.parseColumnsLayout(s,2);case"columns-3":return this.parseColumnsLayout(s,3);case"sidebar-left":return this.parseSidebarLayout(s,"left");case"sidebar-right":return this.parseSidebarLayout(s,"right");case"image-row":return this.parseImageRowLayout(s);default:return s}})}parseColumnsLayout(e,t){const i=/<div class="column">([\s\S]*?)<\/div>/g,s=[];let a;for(;(a=i.exec(e))!==null;)s.push(a[1].trim());if(s.length===0)return e;const n=Math.floor(100/t),r="0 10px 0 0";let l="<tr>";for(let h=0;h<t&&h<s.length;h++)l+=`
+				<td width="${n}%" style="padding: ${h===t-1?"0":r}; vertical-align: top; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.6; color: #333333;">
 					${this.parseBasicMarkdown(s[h])}
 				</td>`;for(let h=s.length;h<t;h++)l+=`
-				<td width="${n}%" style="padding: ${h===t-1?"0":o}; vertical-align: top;">
+				<td width="${n}%" style="padding: ${h===t-1?"0":r}; vertical-align: top;">
 					&nbsp;
 				</td>`;return l+="</tr>",`
 			<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin: 16px 0;">
@@ -926,13 +785,13 @@ Tab key inserts 2 spaces for better formatting."
 			</td>`;return`
 			<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin: 16px 0;">
 				${t==="left"?`<tr>${a}${n}</tr>`:`<tr>${n}${a.replace("0 16px 0 0","0 0 0 16px")}</tr>`}
-			</table>`}parseImageRowLayout(e){const t=/<div class="image">([\s\S]*?)<\/div>/g,i=[];let s;for(;(s=t.exec(e))!==null;){const o=s[1].trim().match(/!\[([^\]]*)\]\(([^)]+)\)/);if(o){const[,l,h]=o;i.push(`<img src="${h}" alt="${l||"Image"}" style="display: block; max-width: 100%; height: auto;" border="0">`)}}if(i.length===0)return e;const a=Math.floor(100/i.length);let n="<tr>";return i.forEach((o,l)=>{const h=l===i.length-1;n+=`
+			</table>`}parseImageRowLayout(e){const t=/<div class="image">([\s\S]*?)<\/div>/g,i=[];let s;for(;(s=t.exec(e))!==null;){const r=s[1].trim().match(/!\[([^\]]*)\]\(([^)]+)\)/);if(r){const[,l,h]=r;i.push(`<img src="${h}" alt="${l||"Image"}" style="display: block; max-width: 100%; height: auto;" border="0">`)}}if(i.length===0)return e;const a=Math.floor(100/i.length);let n="<tr>";return i.forEach((r,l)=>{const h=l===i.length-1;n+=`
 				<td width="${a}%" style="padding: ${h?"0":"0 8px 0 0"}; vertical-align: top; text-align: center;">
-					${o}
+					${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 i=e.match(/width=([^\s}]+)/);i&&(t.width=i[1]);const s=e.match(/height=([^\s}]+)/);return s&&(t.height=s[1]),e.includes("cover")&&(t.cover=!0),e.includes("contain")&&(t.contain=!0),t}generateImageStyles(e,t=!1){let i,s,a="display: block; margin: 8px 0; border: 0;";return e.width?e.width==="auto"?a+=t?" max-width: 100%; height: auto;":" height: auto;":e.width.endsWith("%")?(a+=` width: ${e.width}; max-width: 100%;`,e.height||(a+=" height: auto;")):e.width.endsWith("px")&&(i=e.width.replace("px",""),a+=" max-width: 100%;",e.height||(a+=" height: auto;")):a+=t?" width: 100%; max-width: 100%; height: auto;":" max-width: 100%; height: auto;",e.height&&(e.height==="auto"?a+=" height: auto;":e.height.endsWith("px")&&(s=e.height.replace("px",""),e.width||(a+=" max-width: 100%;"))),(e.cover||e.contain)&&(e.width||e.height||(a+=" width: 100%;")),{imgStyle:a,imgWidth:i,imgHeight:s}}parseBasicMarkdown(e){return e.replace(/!\[([^\]]*)\]\(([^)]+)\)(?:\{([^}]+)\})?/g,(t,i,s,a)=>{const n=this.parseImageAttributes(a),{imgStyle:o,imgWidth:l,imgHeight:h}=this.generateImageStyles(n,!0);let p=`<img src="${s}" alt="${i||"Image"}" style="${o}" border="0"`;return l&&(p+=` width="${l}"`),h&&(p+=` height="${h}"`),p+=">",p}).replace(/\n\n/g,'</p><p style="margin: 0 0 16px 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.6; color: #333333;">').replace(/\n/g,"<br>").replace(/\*\*(.*?)\*\*/g,'<strong style="font-weight: bold;">$1</strong>').replace(/\*(.*?)\*/g,'<em style="font-style: italic;">$1</em>').replace(/\[([^\]]+)\]\(([^)]+)\)/g,'<a href="$2" style="color: #0066cc; text-decoration: underline;">$1</a>').replace(/^# (.*$)/gim,'<h2 style="margin: 16px 0 8px 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold; color: #1a1a1a;">$1</h2>').replace(/^\* (.*$)/gim,'<li style="margin: 4px 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333;">$1</li>').replace(/^\d+\. (.*$)/gim,'<li style="margin: 4px 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333;">$1</li>').replace(/(<li[^>]*>.*?<\/li>(?:\s*<li[^>]*>.*?<\/li>)*)/gs,t=>{const i=/^\d+\./.test(t.replace(/<[^>]*>/g,""))?"ol":"ul";return`<${i} style="margin: 8px 0; padding: 0 0 0 20px; font-family: Arial, Helvetica, sans-serif;">${t}</${i}>`}).replace(/^(?!<[h\d]|<p|<ul|<ol|<li|<img)(.+)$/gim,'<p style="margin: 0 0 16px 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.6; color: #333333;">$1</p>')}parseExtendedMarkdown(e){let t=e;return t=this.parseLayoutBlocks(t),t=t.replace(/:::images\s+(row|grid(?:=\d+)?)\n((?:!\[.*?\]\(.*?\)(?:\{.*?\})?\s*\n?)*?):::/g,"[Multiple Images - View in web browser]"),t=t.replace(/!\[([^\]]*)\]\(([^)]+)\)(?:\{([^}]+)\})?/g,(i,s,a,n)=>{const o=this.parseImageAttributes(n),{imgStyle:l,imgWidth:h,imgHeight:p}=this.generateImageStyles(o,!1);let x=`<img src="${a}" alt="${s||"Image"}" style="${l}" border="0"`;return h&&(x+=` width="${h}"`),p&&(x+=` height="${p}"`),x+=">",`<table cellpadding="0" cellspacing="0" border="0" style="margin: 16px 0;"><tr><td>${x}</td></tr></table>`}),t=t.replace(/\n\n/g,'</p><p style="margin: 0 0 16px 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.6; color: #333333;">').replace(/\n/g,"<br>").replace(/\*\*(.*?)\*\*/g,'<strong style="font-weight: bold;">$1</strong>').replace(/\*(.*?)\*/g,'<em style="font-style: italic;">$1</em>').replace(/\[([^\]]+)\]\(([^)]+)\)/g,'<a href="$2" style="color: #0066cc; text-decoration: underline;">$1</a>').replace(/^# (.*$)/gim,'<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin: 24px 0 16px 0;"><tr><td><h1 style="margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold; color: #1a1a1a;">$1</h1></td></tr></table>').replace(/^\* (.*$)/gim,'<li style="margin: 4px 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333;">$1</li>').replace(/^\d+\. (.*$)/gim,'<li style="margin: 4px 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333;">$1</li>').replace(/^---$/gim,'<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin: 24px 0;"><tr><td style="border-top: 1px solid #e0e0e0; height: 1px; line-height: 1px;">&nbsp;</td></tr></table>'),t=t.replace(/(<li[^>]*>.*?<\/li>(?:\s*<li[^>]*>.*?<\/li>)*)/gs,i=>{const s=/^\d+\./.test(i.replace(/<[^>]*>/g,"")),a=s?"ol":"ul";return`<table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td><${a} style="margin: 16px 0; padding: 0 0 0 20px; font-family: Arial, Helvetica, sans-serif;">${i}</${a}></td></tr></table>`}),t.includes("<table>")||t.includes("<h1>")||(t=`<p style="margin: 0 0 16px 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.6; color: #333333;">${t}</p>`),t=`<table cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width: 600px; margin: 0 auto;">
+			</table>`}parseImageAttributes(e){const t={};if(!e)return t;const i=e.match(/width=([^\s}]+)/);i&&(t.width=i[1]);const s=e.match(/height=([^\s}]+)/);return s&&(t.height=s[1]),e.includes("cover")&&(t.cover=!0),e.includes("contain")&&(t.contain=!0),t}generateImageStyles(e,t=!1){let i,s,a="display: block; margin: 8px 0; border: 0;";return e.width?e.width==="auto"?a+=t?" max-width: 100%; height: auto;":" height: auto;":e.width.endsWith("%")?(a+=` width: ${e.width}; max-width: 100%;`,e.height||(a+=" height: auto;")):e.width.endsWith("px")&&(i=e.width.replace("px",""),a+=" max-width: 100%;",e.height||(a+=" height: auto;")):a+=t?" width: 100%; max-width: 100%; height: auto;":" max-width: 100%; height: auto;",e.height&&(e.height==="auto"?a+=" height: auto;":e.height.endsWith("px")&&(s=e.height.replace("px",""),e.width||(a+=" max-width: 100%;"))),(e.cover||e.contain)&&(e.width||e.height||(a+=" width: 100%;")),{imgStyle:a,imgWidth:i,imgHeight:s}}parseBasicMarkdown(e){return e.replace(/!\[([^\]]*)\]\(([^)]+)\)(?:\{([^}]+)\})?/g,(t,i,s,a)=>{const n=this.parseImageAttributes(a),{imgStyle:r,imgWidth:l,imgHeight:h}=this.generateImageStyles(n,!0);let p=`<img src="${s}" alt="${i||"Image"}" style="${r}" border="0"`;return l&&(p+=` width="${l}"`),h&&(p+=` height="${h}"`),p+=">",p}).replace(/\n\n/g,'</p><p style="margin: 0 0 16px 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.6; color: #333333;">').replace(/\n/g,"<br>").replace(/\*\*(.*?)\*\*/g,'<strong style="font-weight: bold;">$1</strong>').replace(/\*(.*?)\*/g,'<em style="font-style: italic;">$1</em>').replace(/\[([^\]]+)\]\(([^)]+)\)/g,'<a href="$2" style="color: #0066cc; text-decoration: underline;">$1</a>').replace(/^# (.*$)/gim,'<h2 style="margin: 16px 0 8px 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold; color: #1a1a1a;">$1</h2>').replace(/^\* (.*$)/gim,'<li style="margin: 4px 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333;">$1</li>').replace(/^\d+\. (.*$)/gim,'<li style="margin: 4px 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333;">$1</li>').replace(/(<li[^>]*>.*?<\/li>(?:\s*<li[^>]*>.*?<\/li>)*)/gs,t=>{const i=/^\d+\./.test(t.replace(/<[^>]*>/g,""))?"ol":"ul";return`<${i} style="margin: 8px 0; padding: 0 0 0 20px; font-family: Arial, Helvetica, sans-serif;">${t}</${i}>`}).replace(/^(?!<[h\d]|<p|<ul|<ol|<li|<img)(.+)$/gim,'<p style="margin: 0 0 16px 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.6; color: #333333;">$1</p>')}parseExtendedMarkdown(e){let t=e;return t=this.parseLayoutBlocks(t),t=t.replace(/:::images\s+(row|grid(?:=\d+)?)\n((?:!\[.*?\]\(.*?\)(?:\{.*?\})?\s*\n?)*?):::/g,"[Multiple Images - View in web browser]"),t=t.replace(/!\[([^\]]*)\]\(([^)]+)\)(?:\{([^}]+)\})?/g,(i,s,a,n)=>{const r=this.parseImageAttributes(n),{imgStyle:l,imgWidth:h,imgHeight:p}=this.generateImageStyles(r,!1);let v=`<img src="${a}" alt="${s||"Image"}" style="${l}" border="0"`;return h&&(v+=` width="${h}"`),p&&(v+=` height="${p}"`),v+=">",`<table cellpadding="0" cellspacing="0" border="0" style="margin: 16px 0;"><tr><td>${v}</td></tr></table>`}),t=t.replace(/\n\n/g,'</p><p style="margin: 0 0 16px 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.6; color: #333333;">').replace(/\n/g,"<br>").replace(/\*\*(.*?)\*\*/g,'<strong style="font-weight: bold;">$1</strong>').replace(/\*(.*?)\*/g,'<em style="font-style: italic;">$1</em>').replace(/\[([^\]]+)\]\(([^)]+)\)/g,'<a href="$2" style="color: #0066cc; text-decoration: underline;">$1</a>').replace(/^# (.*$)/gim,'<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin: 24px 0 16px 0;"><tr><td><h1 style="margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold; color: #1a1a1a;">$1</h1></td></tr></table>').replace(/^\* (.*$)/gim,'<li style="margin: 4px 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333;">$1</li>').replace(/^\d+\. (.*$)/gim,'<li style="margin: 4px 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333;">$1</li>').replace(/^---$/gim,'<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin: 24px 0;"><tr><td style="border-top: 1px solid #e0e0e0; height: 1px; line-height: 1px;">&nbsp;</td></tr></table>'),t=t.replace(/(<li[^>]*>.*?<\/li>(?:\s*<li[^>]*>.*?<\/li>)*)/gs,i=>{const s=/^\d+\./.test(i.replace(/<[^>]*>/g,"")),a=s?"ol":"ul";return`<table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td><${a} style="margin: 16px 0; padding: 0 0 0 20px; font-family: Arial, Helvetica, sans-serif;">${i}</${a}></td></tr></table>`}),t.includes("<table>")||t.includes("<h1>")||(t=`<p style="margin: 0 0 16px 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.6; color: #333333;">${t}</p>`),t=`<table cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width: 600px; margin: 0 auto;">
 			<tr>
 				<td style="padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.6; color: #333333;">
 					${t}
@@ -944,7 +803,7 @@ Tab key inserts 2 spaces for better formatting."
 
 `).trim()).replace(/:::images\s+(row|grid(?:=\d+)?)\n((?:!\[.*?\]\(.*?\)(?:\{.*?\})?\s*\n?)*?):::/g,"[Images]").replace(/!\[([^\]]*)\]\(([^)]+)\)(?:\{([^}]+)\})?/g,"[Image: $1]").replace(/\*\*(.*?)\*\*/g,"$1").replace(/\*(.*?)\*/g,"$1").replace(/__(.*?)__/g,"$1").replace(/~~(.*?)~~/g,"$1").replace(/`(.*?)`/g,"$1").replace(/^#{1,3} (.*$)/gim,"$1").replace(/^> (.*$)/gim,"$1").replace(/^\* (.*$)/gim,"• $1").replace(/^\d+\. (.*$)/gim,"$1").replace(/\[([^\]]+)\]\(([^)]+)\)/g,"$1 ($2)").replace(/^---$/gim,"---").replace(/\n\n+/g,`
 
-`)}formatFileSize(e){if(e===0)return"0 Bytes";const t=Math.floor(Math.log(e)/Math.log(1024));return parseFloat((e/Math.pow(1024,t)).toFixed(2))+" "+["Bytes","KB","MB","GB"][t]}render(){const e=this.parseExtendedMarkdown(this.body),t=this.convertToPlainText(this.body),i=this.recipients[0]||this.toAddress;return c.html`
+`)}formatFileSize(e){if(e===0)return"0 Bytes";const t=Math.floor(Math.log(e)/Math.log(1024));return parseFloat((e/Math.pow(1024,t)).toFixed(2))+" "+["Bytes","KB","MB","GB"][t]}render(){const e=this.parseExtendedMarkdown(this.body),t=this.convertToPlainText(this.body),i=this.recipients[0]||this.toAddress;return o.html`
 			<schmancy-surface type="surface" rounded="all" class="h-full flex flex-col">
 				
 				<!-- Header Section -->
@@ -1027,7 +886,7 @@ Tab key inserts 2 spaces for better formatting."
 											</schmancy-typography>
 										</div>
 										<schmancy-typography type="body" token="sm" class="font-medium flex-1">
-											${this.subject||c.html`<span class="italic text-surface-onVariant">(No subject)</span>`}
+											${this.subject||o.html`<span class="italic text-surface-onVariant">(No subject)</span>`}
 										</schmancy-typography>
 									</div>
 								</div>
@@ -1035,17 +894,17 @@ Tab key inserts 2 spaces for better formatting."
 
 							<!-- Email Body Content -->
 							<div class="flex-1 overflow-y-auto min-h-0">
-								${d.when(this.body,()=>c.html`
-										${d.when(this.viewMode==="html",()=>c.html`
+								${d.when(this.body,()=>o.html`
+										${d.when(this.viewMode==="html",()=>o.html`
 												<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.html`
+											`,()=>o.html`
 												<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.html`
+									`,()=>o.html`
 										<!-- Empty State -->
 										<div class="flex-1 flex items-center justify-center p-8">
 											<div class="text-center space-y-3">
@@ -1062,7 +921,7 @@ Tab key inserts 2 spaces for better formatting."
 							</div>
 
 							<!-- Attachments Section -->
-							${d.when(this.attachments.length>0,()=>c.html`
+							${d.when(this.attachments.length>0,()=>o.html`
 								<div class="flex-shrink-0 p-4 border-t border-outline-variant bg-surface-containerLowest">
 									<div class="space-y-3">
 										<!-- Attachments Header -->
@@ -1075,7 +934,7 @@ Tab key inserts 2 spaces for better formatting."
 										
 										<!-- Attachments List -->
 										<div class="grid gap-2 sm:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
-											${$.repeat(this.attachments,s=>s.id,s=>c.html`
+											${S.repeat(this.attachments,s=>s.id,s=>o.html`
 												<schmancy-surface type="container" rounded="all" class="p-3">
 													<div class="flex items-center gap-3">
 														<!-- File Icon -->
@@ -1103,7 +962,7 @@ Tab key inserts 2 spaces for better formatting."
 					</div>
 					
 					<!-- Preview Stats -->
-					${d.when(this.body,()=>c.html`
+					${d.when(this.body,()=>o.html`
 						<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">
@@ -1124,7 +983,7 @@ Tab key inserts 2 spaces for better formatting."
 											${this.body.trim()?this.body.trim().split(/\s+/).length:0}
 										</schmancy-typography>
 									</div>
-									${d.when(this.attachments.length>0,()=>c.html`
+									${d.when(this.attachments.length>0,()=>o.html`
 										<div class="w-px h-8 bg-outline-variant"></div>
 										<div>
 											<schmancy-typography type="body" token="xs" class="text-surface-onVariant">
@@ -1142,15 +1001,15 @@ Tab key inserts 2 spaces for better formatting."
 					
 				</div>
 			</schmancy-surface>
-		`}},b([r.property({type:String})],exports.SchmancyEmailViewer.prototype,"subject",2),b([r.property({type:String})],exports.SchmancyEmailViewer.prototype,"body",2),b([r.property({type:Array})],exports.SchmancyEmailViewer.prototype,"attachments",2),b([r.property({type:Array})],exports.SchmancyEmailViewer.prototype,"recipients",2),b([r.property({type:String})],exports.SchmancyEmailViewer.prototype,"fromAddress",2),b([r.property({type:String})],exports.SchmancyEmailViewer.prototype,"toAddress",2),b([r.state()],exports.SchmancyEmailViewer.prototype,"viewMode",2),exports.SchmancyEmailViewer=b([r.customElement("schmancy-email-viewer")],exports.SchmancyEmailViewer);var M=Object.defineProperty,F=Object.getOwnPropertyDescriptor,y=(e,t,i,s)=>{for(var a,n=s>1?void 0:s?F(t,i):t,o=e.length-1;o>=0;o--)(a=e[o])&&(n=(s?a(t,i,n):a(n))||n);return s&&n&&M(t,i,n),n};exports.SchmancyEmailRecipients=class extends S.$LitElement(c.css`
+		`}},b([c.property({type:String})],exports.SchmancyEmailViewer.prototype,"subject",2),b([c.property({type:String})],exports.SchmancyEmailViewer.prototype,"body",2),b([c.property({type:Array})],exports.SchmancyEmailViewer.prototype,"attachments",2),b([c.property({type:Array})],exports.SchmancyEmailViewer.prototype,"recipients",2),b([c.property({type:String})],exports.SchmancyEmailViewer.prototype,"fromAddress",2),b([c.property({type:String})],exports.SchmancyEmailViewer.prototype,"toAddress",2),b([c.state()],exports.SchmancyEmailViewer.prototype,"viewMode",2),exports.SchmancyEmailViewer=b([c.customElement("schmancy-email-viewer")],exports.SchmancyEmailViewer);var P=Object.defineProperty,F=Object.getOwnPropertyDescriptor,y=(e,t,i,s)=>{for(var a,n=s>1?void 0:s?F(t,i):t,r=e.length-1;r>=0;r--)(a=e[r])&&(n=(s?a(t,i,n):a(n))||n);return s&&n&&P(t,i,n),n};exports.SchmancyEmailRecipients=class extends $.$LitElement(o.css`
 	: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=new Set,this.searchQuery="",this.filteredRecipients=[],this.boatState="minimized",this.fileInputRef=g.createRef(),this.handleEmailsImported=()=>{this.updateFilteredRecipients(),this.requestUpdate()},this.handleImportFromCSV=()=>{this.enableCsvImport&&this.fileInputRef.value?.click()},this.handleFileSelect=e=>{const t=e.target,i=t.files?.[0];i&&this.processCSVFile(i)},this.handleDrop=e=>{if(!this.enableDragDrop)return;e.preventDefault(),this.dragOver=!1;const t=e.dataTransfer?.files[0];t&&this.processCSVFile(t)},this.processCSVFile=e=>{if(!e.name.endsWith(".csv"))return void u.$notify.error("Please select a CSV file");const t=new FileReader;t.onload=i=>{const s=i.target?.result;try{const a=this.parseCSV(s);if(a.length===0)return void u.$notify.error("No valid email addresses found in CSV");this.dispatchEvent(new CustomEvent("emails-imported",{detail:{emails:a,source:"csv"},bubbles:!0,composed:!0})),u.$notify.success(`Imported ${a.length} emails from CSV file`)}catch{u.$notify.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=new Set,this.dispatchSelectionChange()},this.removeRecipient=e=>{this.dispatchEvent(new CustomEvent("recipient-removed",{detail:{email:e},bubbles:!0,composed:!0}))},this.clearAll=()=>{this.dispatchEvent(new CustomEvent("recipients-cleared",{bubbles:!0,composed:!0}))},this.updateFilteredRecipients=()=>{const e=Array.isArray(this.recipients)?this.recipients:[];if(this.searchQuery.trim()){const t=this.searchQuery.toLowerCase();this.filteredRecipients=e.filter(i=>i.toLowerCase().includes(t))}else this.filteredRecipients=[...e]},this.handleSearchInput=e=>{const t=e.target;this.searchQuery=t.value},this.clearSearch=()=>{this.searchQuery=""},this.dispatchSelectionChange=()=>{this.dispatchEvent(new CustomEvent("selection-changed",{detail:{selectedEmails:Array.from(this.localSelectedRecipients)},bubbles:!0,composed:!0}))},this.handleBoatStateChange=e=>{this.boatState=e.detail}}connectedCallback(){super.connectedCallback(),this.localSelectedRecipients=new Set(this.selectedRecipients),this.updateFilteredRecipients(),this.addEventListener("emails-imported",this.handleEmailsImported)}updated(e){super.updated(e),e.has("selectedRecipients")&&(this.localSelectedRecipients=new Set(this.selectedRecipients)),(e.has("recipients")||e.has("searchQuery"))&&this.updateFilteredRecipients(),e.has("recipients")&&this.requestUpdate()}parseCSV(e){const t=[];let i;i=this.csvParser?this.csvParser.parse(e,{header:!0,skipEmptyLines:!0,dynamicTyping:!0,delimiter:"",transformHeader:l=>l.trim()}):this.simpleCSVParse(e);const s=i.data,a=i.meta.fields||[];let n=a.find(l=>l.toLowerCase().includes("email"));if(!n)for(const l of a){const h=s[0]?.[l]?.toString();if(h&&this.isValidEmail(h)){n=l;break}}if(!n)throw new Error("No email column found in CSV");const o=new Set;for(const l of s){const h=l[n]?.toString();if(!h)continue;const p=h.toLowerCase().trim();this.isValidEmail(p)&&!o.has(p)&&(o.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 i=t[0].split(",").map(a=>a.trim().replace(/"/g,"")),s=[];for(let a=1;a<t.length;a++){const n=t[a].split(",").map(l=>l.trim().replace(/"/g,"")),o={};i.forEach((l,h)=>{o[l]=n[h]||""}),s.push(o)}return{data:s,meta:{fields:i}}}isValidEmail(e){return/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e.trim())}addRecipients(e){if(!e.length)return;const t=[...new Set([...this.recipients,...e])],i=e.filter(s=>!this.recipients.includes(s));this.recipients=t,this.selectedRecipients=[...new Set([...this.selectedRecipients,...i])],this.localSelectedRecipients=new Set(this.selectedRecipients),this.updateFilteredRecipients(),this.requestUpdate()}showBoat(){this.boatState="minimized"}hideBoat(){this.boatState="hidden"}expandBoat(){this.boatState="expanded"}toggleBoat(){this.boatState=this.boatState==="hidden"?"minimized":this.boatState==="minimized"?"expanded":"hidden"}render(){return this.renderBoatLayout()}renderBoatLayout(){return c.html`
+`){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=new Set,this.searchQuery="",this.filteredRecipients=[],this.boatState="minimized",this.fileInputRef=g.createRef(),this.handleEmailsImported=()=>{this.updateFilteredRecipients(),this.requestUpdate()},this.handleImportFromCSV=()=>{this.enableCsvImport&&this.fileInputRef.value?.click()},this.handleFileSelect=e=>{const t=e.target,i=t.files?.[0];i&&this.processCSVFile(i)},this.handleDrop=e=>{if(!this.enableDragDrop)return;e.preventDefault(),this.dragOver=!1;const t=e.dataTransfer?.files[0];t&&this.processCSVFile(t)},this.processCSVFile=e=>{if(!e.name.endsWith(".csv"))return void u.$notify.error("Please select a CSV file");const t=new FileReader;t.onload=i=>{const s=i.target?.result;try{const a=this.parseCSV(s);if(a.length===0)return void u.$notify.error("No valid email addresses found in CSV");this.dispatchEvent(new CustomEvent("emails-imported",{detail:{emails:a,source:"csv"},bubbles:!0,composed:!0})),u.$notify.success(`Imported ${a.length} emails from CSV file`)}catch{u.$notify.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=new Set,this.dispatchSelectionChange()},this.removeRecipient=e=>{this.dispatchEvent(new CustomEvent("recipient-removed",{detail:{email:e},bubbles:!0,composed:!0}))},this.clearAll=()=>{this.dispatchEvent(new CustomEvent("recipients-cleared",{bubbles:!0,composed:!0}))},this.updateFilteredRecipients=()=>{const e=Array.isArray(this.recipients)?this.recipients:[];if(this.searchQuery.trim()){const t=this.searchQuery.toLowerCase();this.filteredRecipients=e.filter(i=>i.toLowerCase().includes(t))}else this.filteredRecipients=[...e]},this.handleSearchInput=e=>{const t=e.target;this.searchQuery=t.value},this.clearSearch=()=>{this.searchQuery=""},this.dispatchSelectionChange=()=>{this.dispatchEvent(new CustomEvent("selection-changed",{detail:{selectedEmails:Array.from(this.localSelectedRecipients)},bubbles:!0,composed:!0}))},this.handleBoatStateChange=e=>{this.boatState=e.detail}}connectedCallback(){super.connectedCallback(),this.localSelectedRecipients=new Set(this.selectedRecipients),this.updateFilteredRecipients(),this.addEventListener("emails-imported",this.handleEmailsImported)}updated(e){super.updated(e),e.has("selectedRecipients")&&(this.localSelectedRecipients=new Set(this.selectedRecipients)),(e.has("recipients")||e.has("searchQuery"))&&this.updateFilteredRecipients(),e.has("recipients")&&this.requestUpdate()}parseCSV(e){const t=[];let i;i=this.csvParser?this.csvParser.parse(e,{header:!0,skipEmptyLines:!0,dynamicTyping:!0,delimiter:"",transformHeader:l=>l.trim()}):this.simpleCSVParse(e);const s=i.data,a=i.meta.fields||[];let n=a.find(l=>l.toLowerCase().includes("email"));if(!n)for(const l of a){const h=s[0]?.[l]?.toString();if(h&&this.isValidEmail(h)){n=l;break}}if(!n)throw new Error("No email column found in CSV");const r=new Set;for(const l of s){const h=l[n]?.toString();if(!h)continue;const p=h.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 i=t[0].split(",").map(a=>a.trim().replace(/"/g,"")),s=[];for(let a=1;a<t.length;a++){const n=t[a].split(",").map(l=>l.trim().replace(/"/g,"")),r={};i.forEach((l,h)=>{r[l]=n[h]||""}),s.push(r)}return{data:s,meta:{fields:i}}}isValidEmail(e){return/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e.trim())}addRecipients(e){if(!e.length)return;const t=[...new Set([...this.recipients,...e])],i=e.filter(s=>!this.recipients.includes(s));this.recipients=t,this.selectedRecipients=[...new Set([...this.selectedRecipients,...i])],this.localSelectedRecipients=new Set(this.selectedRecipients),this.updateFilteredRecipients(),this.requestUpdate()}showBoat(){this.boatState="minimized"}hideBoat(){this.boatState="hidden"}expandBoat(){this.boatState="expanded"}toggleBoat(){this.boatState=this.boatState==="hidden"?"minimized":this.boatState==="minimized"?"expanded":"hidden"}render(){return this.renderBoatLayout()}renderBoatLayout(){return o.html`
 			<!-- Hidden file input for CSV import -->
-			${d.when(this.enableCsvImport,()=>c.html`
+			${d.when(this.enableCsvImport,()=>o.html`
 				<input
 					type="file"
 					accept=".csv"
@@ -1171,7 +1030,7 @@ Tab key inserts 2 spaces for better formatting."
 						<schmancy-typography type="title" token="md" class="font-semibold">
 							${this.title}
 						</schmancy-typography>
-						${d.when(this.recipients.length>0,()=>c.html`
+						${d.when(this.recipients.length>0,()=>o.html`
 							<schmancy-badge>
 								${this.localSelectedRecipients.size}/${this.recipients.length}
 							</schmancy-badge>
@@ -1184,7 +1043,7 @@ Tab key inserts 2 spaces for better formatting."
 					${this.renderBoatContent()}
 				</div>
 			</schmancy-boat>
-		`}renderBoatContent(){return c.html`
+		`}renderBoatContent(){return o.html`
 			<!-- Search Bar and CSV Import on one line -->
 			<div class="p-4 flex gap-3">
 				<schmancy-input
@@ -1194,7 +1053,7 @@ Tab key inserts 2 spaces for better formatting."
 					@input=${this.handleSearchInput}
 					class="flex-1"
 				>
-					${d.when(this.searchQuery,()=>c.html`
+					${d.when(this.searchQuery,()=>o.html`
 						<schmancy-button
 							slot="suffix" 
 							variant="text"
@@ -1205,7 +1064,7 @@ Tab key inserts 2 spaces for better formatting."
 					`)}
 				</schmancy-input>
 				
-				${d.when(this.enableCsvImport,()=>c.html`
+				${d.when(this.enableCsvImport,()=>o.html`
 					<schmancy-button
 						variant="outlined"
 						@click=${this.handleImportFromCSV}
@@ -1217,7 +1076,7 @@ Tab key inserts 2 spaces for better formatting."
 				`)}
 			</div>
 
-			${d.when(this.recipients.length>0,()=>c.html`
+			${d.when(this.recipients.length>0,()=>o.html`
 				<!-- Bulk Actions -->
 				<div class="px-4 pb-4">
 					<div class="flex items-center gap-3">
@@ -1250,9 +1109,9 @@ Tab key inserts 2 spaces for better formatting."
 
 				<!-- Recipients List -->
 				<div class="flex-1 overflow-y-auto px-4 pb-4">
-					${d.when(this.filteredRecipients.length>0,()=>c.html`
+					${d.when(this.filteredRecipients.length>0,()=>o.html`
 							<div class="flex flex-wrap gap-3">
-								${$.repeat(this.filteredRecipients,e=>e,e=>c.html`
+								${S.repeat(this.filteredRecipients,e=>e,e=>o.html`
 										<schmancy-button
 											variant=${this.localSelectedRecipients.has(e)?"filled":"outlined"}
 											@click=${t=>{t.stopPropagation(),t.preventDefault(),this.toggleRecipientSelection(e)}}
@@ -1267,7 +1126,7 @@ Tab key inserts 2 spaces for better formatting."
 										</schmancy-button>
 									`)}
 							</div>
-						`,()=>c.html`
+						`,()=>o.html`
 							<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">
@@ -1279,7 +1138,7 @@ Tab key inserts 2 spaces for better formatting."
 							</div>
 						`)}
 				</div>
-			`,()=>c.html`
+			`,()=>o.html`
 				<!-- Empty State -->
 				<div class="flex-1 flex items-center justify-center p-8">
 					<div class="text-center space-y-4">
@@ -1295,7 +1154,7 @@ Tab key inserts 2 spaces for better formatting."
 			`)}
 
 			<!-- Drag Overlay -->
-			${d.when(this.dragOver&&this.enableDragDrop,()=>c.html`
+			${d.when(this.dragOver&&this.enableDragDrop,()=>o.html`
 					<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}}
@@ -1310,5 +1169,5 @@ Tab key inserts 2 spaces for better formatting."
 						</schmancy-surface>
 					</div>
 				`)}
-		`}},y([r.property({type:Boolean})],exports.SchmancyEmailRecipients.prototype,"disabled",2),y([r.property({type:Array})],exports.SchmancyEmailRecipients.prototype,"recipients",2),y([r.property({type:Array})],exports.SchmancyEmailRecipients.prototype,"selectedRecipients",2),y([r.property({type:Boolean})],exports.SchmancyEmailRecipients.prototype,"enableCsvImport",2),y([r.property({type:Boolean})],exports.SchmancyEmailRecipients.prototype,"enableDragDrop",2),y([r.property({type:String})],exports.SchmancyEmailRecipients.prototype,"title",2),y([r.property({type:String})],exports.SchmancyEmailRecipients.prototype,"emptyStateTitle",2),y([r.property({type:String})],exports.SchmancyEmailRecipients.prototype,"emptyStateMessage",2),y([r.property({type:Object})],exports.SchmancyEmailRecipients.prototype,"csvParser",2),y([r.state()],exports.SchmancyEmailRecipients.prototype,"dragOver",2),y([r.state()],exports.SchmancyEmailRecipients.prototype,"localSelectedRecipients",2),y([r.state()],exports.SchmancyEmailRecipients.prototype,"searchQuery",2),y([r.state()],exports.SchmancyEmailRecipients.prototype,"filteredRecipients",2),y([r.state()],exports.SchmancyEmailRecipients.prototype,"boatState",2),exports.SchmancyEmailRecipients=y([r.customElement("schmancy-email-recipients")],exports.SchmancyEmailRecipients);
-//# sourceMappingURL=email-recipients-B9F9tbTi.cjs.map
+		`}},y([c.property({type:Boolean})],exports.SchmancyEmailRecipients.prototype,"disabled",2),y([c.property({type:Array})],exports.SchmancyEmailRecipients.prototype,"recipients",2),y([c.property({type:Array})],exports.SchmancyEmailRecipients.prototype,"selectedRecipients",2),y([c.property({type:Boolean})],exports.SchmancyEmailRecipients.prototype,"enableCsvImport",2),y([c.property({type:Boolean})],exports.SchmancyEmailRecipients.prototype,"enableDragDrop",2),y([c.property({type:String})],exports.SchmancyEmailRecipients.prototype,"title",2),y([c.property({type:String})],exports.SchmancyEmailRecipients.prototype,"emptyStateTitle",2),y([c.property({type:String})],exports.SchmancyEmailRecipients.prototype,"emptyStateMessage",2),y([c.property({type:Object})],exports.SchmancyEmailRecipients.prototype,"csvParser",2),y([c.state()],exports.SchmancyEmailRecipients.prototype,"dragOver",2),y([c.state()],exports.SchmancyEmailRecipients.prototype,"localSelectedRecipients",2),y([c.state()],exports.SchmancyEmailRecipients.prototype,"searchQuery",2),y([c.state()],exports.SchmancyEmailRecipients.prototype,"filteredRecipients",2),y([c.state()],exports.SchmancyEmailRecipients.prototype,"boatState",2),exports.SchmancyEmailRecipients=y([c.customElement("schmancy-email-recipients")],exports.SchmancyEmailRecipients);
+//# sourceMappingURL=email-recipients-CbZNnzoj.cjs.map