@flusys/ng-email 1.1.0-beta → 2.0.0-rc.0

package/README.md

@@ -11,15 +11,17 @@
 
 - **Email Configurations** - CRUD for SMTP, SendGrid, Mailgun providers
 - **Email Templates** - Visual template management with variable interpolation
-- **HTML/Plain Text** - Toggle between content types via `isHtml` field
+- **HTML/Plain Text** - Toggle between content types with live preview
 - **Test Sending** - Test configurations and templates with dynamic variables
 - **Company Scoping** - Automatic company-scoped queries (when enabled)
 - **Lazy Loading** - All page components are lazy-loaded via routes
+- **Responsive Design** - Mobile-first with horizontal scroll tables
+- **Dark Mode** - Full dark/light mode support
 
 ### Package Hierarchy
 
 ```
-@flusys/ng-core           <- Foundation (BaseApiService, APP_CONFIG)
+@flusys/ng-core           <- Foundation (APP_CONFIG, DEFAULT_APP_NAME)
         |
 @flusys/ng-shared         <- Shared utilities (ApiResourceService, IBaseEntity)
         |
@@ -34,11 +36,17 @@ Email components use `LAYOUT_AUTH_STATE` from `@flusys/ng-layout` for company co
 
 ```typescript
 import { LAYOUT_AUTH_STATE } from '@flusys/ng-layout';
+import { APP_CONFIG, DEFAULT_APP_NAME } from '@flusys/ng-core';
 
-private readonly companyContext = inject(LAYOUT_AUTH_STATE);
+// Optional injection - works with or without company feature
+private readonly companyContext = inject(LAYOUT_AUTH_STATE, { optional: true });
+
+readonly showCompanyInfo = computed(
+  () => this.appConfig.enableCompanyFeature && !!this.companyContext,
+);
 
 readonly currentCompanyName = computed(
-  () => this.companyContext.currentCompanyInfo()?.name ?? DEFAULT_APP_NAME,
+  () => this.companyContext?.currentCompanyInfo()?.name ?? DEFAULT_APP_NAME,
 );
 ```
 
@@ -48,17 +56,25 @@ readonly currentCompanyName = computed(
 
 ```
 ng-email/
+├── enums/
+│   ├── email-provider.enum.ts       # EmailProviderEnum (smtp, sendgrid, mailgun)
+│   ├── email-block-type.enum.ts     # EmailBlockType (text, image, button, etc.)
+│   └── public-api.ts
 ├── interfaces/
-│   ├── email-config.interface.ts     # IEmailConfig, ICreateEmailConfigDto
-│   ├── email-template.interface.ts   # IEmailTemplate, ICreateEmailTemplateDto
-│   ├── email-send.interface.ts       # ISendEmailDto, ISendTemplateEmailDto
+│   ├── email-config.interface.ts    # IEmailConfig, ICreateEmailConfigDto
+│   ├── email-template.interface.ts  # IEmailTemplate, ICreateEmailTemplateDto
+│   ├── email-schema.interface.ts    # IEmailSchema, IEmailSection, IEmailBlock
+│   ├── email-send.interface.ts      # ISendEmailDto, ISendTemplateEmailDto
 │   └── public-api.ts
 ├── services/
-│   ├── email-config-api.service.ts   # Config CRUD
-│   ├── email-template-api.service.ts # Template CRUD
-│   ├── email-send.service.ts         # Email sending operations
+│   ├── email-config-api.service.ts  # Config CRUD + test sending
+│   ├── email-template-api.service.ts # Template CRUD + getBySlug
+│   ├── email-send.service.ts        # Email sending operations
+│   ├── email-builder-state.service.ts # Template builder state management
 │   └── public-api.ts
 ├── pages/
+│   ├── email-container/
+│   │   └── email-container.component.ts  # Main container with tabs
 │   ├── config/
 │   │   ├── email-config-list.component.ts
 │   │   └── email-config-form.component.ts
@@ -92,12 +108,39 @@ export const routes: Routes = [
 
 | Path | Component | Description |
 |------|-----------|-------------|
-| `/email/configs` | EmailConfigListComponent | List email configurations |
-| `/email/configs/new` | EmailConfigFormComponent | Create new config |
-| `/email/configs/:id` | EmailConfigFormComponent | Edit config |
+| `/email` | EmailContainerComponent | Main container with tab navigation |
 | `/email/templates` | TemplateListComponent | List email templates |
 | `/email/templates/new` | TemplateFormComponent | Create new template |
 | `/email/templates/:id` | TemplateFormComponent | Edit template |
+| `/email/configs` | EmailConfigListComponent | List email configurations |
+| `/email/configs/new` | EmailConfigFormComponent | Create new config |
+| `/email/configs/:id` | EmailConfigFormComponent | Edit config |
+
+---
+
+## Enums
+
+### EmailProviderEnum
+
+```typescript
+export enum EmailProviderEnum {
+  SMTP = 'smtp',
+  SENDGRID = 'sendgrid',
+  MAILGUN = 'mailgun',
+}
+```
+
+### EmailBlockType
+
+```typescript
+export enum EmailBlockType {
+  TEXT = 'text',
+  IMAGE = 'image',
+  BUTTON = 'button',
+  DIVIDER = 'divider',
+  HTML = 'html',
+}
+```
 
 ---
 
@@ -108,11 +151,10 @@ export const routes: Routes = [
 ```typescript
 interface IEmailConfig extends IBaseEntity {
   name: string;
-  provider: 'smtp' | 'sendgrid' | 'mailgun';
+  provider: EmailProviderEnum;
   config: Record<string, any>;    // Provider-specific config
-  fromEmail: string;
+  fromEmail: string | null;
   fromName: string | null;
-  replyTo: string | null;
   isActive: boolean;
   isDefault: boolean;             // Set as default configuration
   companyId?: string | null;
@@ -120,25 +162,16 @@ interface IEmailConfig extends IBaseEntity {
 
 interface ICreateEmailConfigDto {
   name: string;
-  provider: 'smtp' | 'sendgrid' | 'mailgun';
+  provider: EmailProviderEnum;
   config: Record<string, any>;
-  fromEmail: string;
+  fromEmail?: string;
   fromName?: string;
-  replyTo?: string;
   isActive?: boolean;
   isDefault?: boolean;
 }
 
-interface IUpdateEmailConfigDto {
+interface IUpdateEmailConfigDto extends Partial<ICreateEmailConfigDto> {
   id: string;
-  name?: string;
-  provider?: 'smtp' | 'sendgrid' | 'mailgun';
-  config?: Record<string, any>;
-  fromEmail?: string;
-  fromName?: string;
-  replyTo?: string;
-  isActive?: boolean;
-  isDefault?: boolean;
 }
 ```
 
@@ -149,11 +182,9 @@ interface IUpdateEmailConfigDto {
 interface ISmtpConfig {
   host: string;
   port: number;
-  secure: boolean;
-  auth: {
-    user: string;
-    pass: string;
-  };
+  secure?: boolean;
+  username: string;
+  password: string;
 }
 
 // SendGrid
@@ -177,7 +208,7 @@ interface IEmailTemplate extends IBaseEntity {
   slug: string;
   description: string | null;
   subject: string;
-  schema: Record<string, unknown>;
+  schema: IEmailSchema;
   htmlContent: string;
   textContent: string | null;
   schemaVersion: number;
@@ -192,30 +223,69 @@ interface ICreateEmailTemplateDto {
   slug: string;
   description?: string;
   subject: string;
-  schema?: Record<string, unknown>;
+  schema: IEmailSchema;
   htmlContent: string;
   textContent?: string;
   isActive?: boolean;
   isHtml?: boolean;
+  metadata?: Record<string, unknown>;
+}
+
+interface IUpdateEmailTemplateDto extends Partial<ICreateEmailTemplateDto> {
+  id: string;
+}
+```
+
+### Email Schema
+
+```typescript
+interface IEmailSchema {
+  id: string;
+  version: string;
+  name: string;
+  subject: string;
+  preheader?: string;
+  sections: IEmailSection[];
+  variables?: IEmailTemplateVariable[];
+  settings?: IEmailSettings;
 }
 
-interface IUpdateEmailTemplateDto {
+interface IEmailSection {
   id: string;
-  name?: string;
-  slug?: string;
+  type: 'header' | 'body' | 'footer';
+  name: string;
+  blocks: IEmailBlock[];
+  order: number;
+  style?: IEmailSectionStyle;
+}
+
+interface IEmailBlock {
+  id: string;
+  type: EmailBlockType;
+  order: number;
+  content: ITextBlockContent | IImageBlockContent | IButtonBlockContent | IDividerBlockContent | IHtmlBlockContent;
+  style?: IEmailBlockStyle;
+}
+
+interface IEmailTemplateVariable {
+  name: string;
+  type: 'string' | 'number' | 'boolean' | 'date';
+  required?: boolean;
+  defaultValue?: string;
   description?: string;
-  subject?: string;
-  schema?: Record<string, unknown>;
-  htmlContent?: string;
-  textContent?: string;
-  isActive?: boolean;
-  isHtml?: boolean;
 }
 ```
 
 ### Email Sending
 
 ```typescript
+// Test send result
+interface ITestSendResult {
+  success: boolean;
+  messageId?: string;
+  error?: string;
+}
+
 // Direct email
 interface ISendEmailDto {
   to: string | string[];
@@ -228,7 +298,6 @@ interface ISendEmailDto {
   fromName?: string;
   replyTo?: string;
   emailConfigId?: string;
-  attachments?: IEmailAttachmentDto[];
 }
 
 // Template email
@@ -243,27 +312,6 @@ interface ISendTemplateEmailDto {
   fromName?: string;
   replyTo?: string;
   emailConfigId?: string;
-  attachments?: IEmailAttachmentDto[];
-}
-
-// Test email
-interface ITestEmailDto {
-  emailConfigId: string;
-  recipient: string;
-}
-
-// Attachment
-interface IEmailAttachmentDto {
-  filename: string;
-  content: string;               // Base64 encoded
-  contentType?: string;
-}
-
-// Result
-interface IEmailSendResult {
-  success: boolean;
-  messageId?: string;
-  error?: string;
 }
 ```
 
@@ -277,54 +325,156 @@ All services are `providedIn: 'root'`. Company scoping is automatic when the com
 
 Email configuration CRUD. Extends `ApiResourceService<IUpdateEmailConfigDto, IEmailConfig>`.
 
-**Inherited CRUD methods** (from ApiResourceService): `insert`, `update`, `findById`, `getAll`, `delete` and their `*Async` variants.
+```typescript
+@Injectable({ providedIn: 'root' })
+export class EmailConfigApiService extends ApiResourceService<
+  IUpdateEmailConfigDto,
+  IEmailConfig
+> {
+  constructor() {
+    const http = inject(HttpClient);
+    super('email/email-config', http);
+  }
+
+  /** Send test email to verify configuration */
+  sendTest(configId: string, recipient: string): Observable<ISingleResponse<ITestSendResult>> {
+    return this.http.post<ISingleResponse<ITestSendResult>>(
+      `${this.baseUrl.replace('/email-config', '')}/send/test`,
+      { emailConfigId: configId, recipient },
+    );
+  }
+}
+```
 
 ### EmailTemplateApiService
 
 Email template CRUD. Extends `ApiResourceService<IUpdateEmailTemplateDto, IEmailTemplate>`.
 
-**Inherited CRUD methods** (from ApiResourceService): `insert`, `update`, `findById`, `getAll`, `delete` and their `*Async` variants.
+```typescript
+@Injectable({ providedIn: 'root' })
+export class EmailTemplateApiService extends ApiResourceService<
+  IUpdateEmailTemplateDto,
+  IEmailTemplate
+> {
+  constructor() {
+    const http = inject(HttpClient);
+    super('email/email-template', http);
+  }
+
+  /** Get template by slug (POST-only RPC pattern) */
+  getBySlug(slug: string): Observable<ISingleResponse<IEmailTemplate | null>> {
+    return this.http.post<ISingleResponse<IEmailTemplate | null>>(
+      `${this.baseUrl}/get-by-slug`,
+      { slug },
+    );
+  }
+}
+```
 
 ### EmailSendService
 
-Handles email sending operations. Extends `BaseApiService`.
+Handles email sending operations.
+
+```typescript
+@Injectable({ providedIn: 'root' })
+export class EmailSendService {
+  private readonly http = inject(HttpClient);
+  private readonly baseUrl = `${inject(APP_CONFIG).apiBaseUrl}/email/send`;
+
+  /** Send email directly (without template) */
+  sendDirect(dto: ISendEmailDto): Observable<ISingleResponse<ITestSendResult>>;
+
+  /** Send email using template */
+  sendTemplate(dto: ISendTemplateEmailDto): Observable<ISingleResponse<ITestSendResult>>;
+}
+```
+
+### EmailBuilderStateService
 
-| Method | Endpoint | Description |
-|--------|----------|-------------|
-| `sendDirect(dto)` | `POST /email/send/direct` | Send email directly |
-| `sendTemplate(dto)` | `POST /email/send/template` | Send using template |
-| `testConfiguration(dto)` | `POST /email/send/test` | Test email configuration |
+Manages email builder UI state. Should be provided at component level, not root.
+
+```typescript
+@Injectable()
+export class EmailBuilderStateService {
+  // Schema state
+  readonly schema: Signal<IEmailSchema>;
+  readonly isDirty: Signal<boolean>;
+
+  // Selection state
+  readonly selectedSectionId: Signal<string | null>;
+  readonly selectedBlockId: Signal<string | null>;
+
+  // Computed signals
+  readonly sections: Signal<IEmailSection[]>;
+  readonly headerSection: Signal<IEmailSection | null>;
+  readonly bodySection: Signal<IEmailSection | null>;
+  readonly footerSection: Signal<IEmailSection | null>;
+
+  // Methods
+  loadSchema(schema: IEmailSchema): void;
+  createNewSchema(name?: string): void;
+  addBlock(sectionId: string, blockType: EmailBlockType): string | null;
+  updateBlock(sectionId: string, blockId: string, updates: Partial<IEmailBlock>): void;
+  deleteBlock(sectionId: string, blockId: string): void;
+}
+```
 
 ---
 
 ## Components
 
-All components are standalone, use Angular 21 signals, and lazy-load via routes.
+All components are standalone, use Angular 21 signals, OnPush change detection, and lazy-load via routes.
+
+### EmailContainerComponent
+
+Main container with tab navigation between Templates and Configurations.
+
+**Features:**
+- Responsive page title (`text-xl sm:text-2xl`)
+- Tab navigation with horizontal scroll on mobile
+- Router outlet for child routes
+
+```html
+<div class="p-2 sm:p-4">
+  <h1 class="text-xl sm:text-2xl font-bold m-0">Email</h1>
+  <p class="text-sm text-muted-color mt-1">Manage email templates...</p>
+
+  <div class="scrollbar-hide flex gap-1 mb-4 border-b border-surface overflow-x-auto">
+    @for (tab of tabs; track tab.id) {
+      <a [routerLink]="tab.route" routerLinkActive="tab-active">...</a>
+    }
+  </div>
+
+  <router-outlet />
+</div>
+```
 
 ### EmailConfigListComponent
 
 Lists email configurations with actions.
 
 **Features:**
-- Lazy pagination via `p-datatable`
+- Lazy pagination via `p-table` with `[paginator]="totalRecords() > 0"`
+- Horizontal scroll on mobile (`overflow-x-auto -mx-4 sm:mx-0`)
 - Provider type tags (SMTP, SendGrid, Mailgun)
 - Active/Inactive status badges
+- Default configuration badge
 - Test button with dialog for recipient input
 - Edit and delete actions
 - Company info display when enabled
 
 **Test Dialog:**
-Opens a PrimeNG dialog to enter test recipient email instead of browser `prompt()`.
 
 ```typescript
-readonly showTestDialog = signal(false);
+showTestDialog = false;  // Plain property for ngModel
 readonly selectedConfig = signal<IEmailConfig | null>(null);
+readonly isSendingTest = signal(false);
 testRecipient = '';
 
 onTest(config: IEmailConfig): void {
   this.selectedConfig.set(config);
   this.testRecipient = '';
-  this.showTestDialog.set(true);
+  this.showTestDialog = true;
 }
 
 async sendTestEmail(): Promise<void> {
@@ -332,10 +482,7 @@ async sendTestEmail(): Promise<void> {
   if (!config || !this.testRecipient) return;
 
   const response = await firstValueFrom(
-    this.emailSendService.testConfiguration({
-      emailConfigId: config.id,
-      recipient: this.testRecipient,
-    })
+    this.configService.sendTest(config.id, this.testRecipient)
   );
 
   if (response.data?.success) {
@@ -344,7 +491,7 @@ async sendTestEmail(): Promise<void> {
       summary: 'Success',
       detail: `Test email sent! Message ID: ${response.data.messageId}`,
     });
-    this.showTestDialog.set(false);
+    this.showTestDialog = false;
   }
 }
 ```
@@ -354,32 +501,28 @@ async sendTestEmail(): Promise<void> {
 Create/edit email configuration with dynamic provider fields.
 
 **Features:**
+- Responsive grid layout (`grid-cols-1 md:grid-cols-2`)
 - Dynamic form fields based on selected provider
-- SMTP: host, port, secure, username, password
-- SendGrid: apiKey
+- SMTP: host, port, secure toggle, username, password
+- SendGrid: apiKey (masked input)
 - Mailgun: apiKey, domain, region
-- Active toggle
-- **Set as Default toggle** - marks configuration as the default for sending emails
+- Active toggle and Set as Default toggle
+- Form actions right-aligned at bottom
 - Create/Edit mode auto-detection
 
-**Default Configuration:**
-When `isDefault: true`, this configuration will be used automatically when no `emailConfigId` is provided in send requests.
-
 ### TemplateListComponent
 
 Lists email templates with test send functionality.
 
 **Features:**
-- Lazy pagination via `p-datatable`
+- Lazy pagination with conditional display
+- Responsive table with hidden columns on mobile
 - HTML/Text type badges (based on `isHtml`)
 - Active/Inactive status badges
-- Test send button with dialog
+- Test send with dynamic variables
 - Edit and delete actions
 
-**Test Send Dialog:**
-- Select email configuration
-- Enter recipient email
-- **Dynamic variable inputs** extracted from template content
+**Test Send Dialog with Variables:**
 
 ```typescript
 /** Extract variables from template content */
@@ -387,14 +530,12 @@ readonly templateVariables = computed(() => {
   const template = this.selectedTemplate();
   if (!template) return [];
 
-  // Combine all content sources to extract variables
   const content = [
     template.subject,
     template.htmlContent,
     template.textContent || '',
   ].join(' ');
 
-  // Find all {{variableName}} patterns
   const matches = content.matchAll(/\{\{(\w+)\}\}/g);
   const variables = new Set<string>();
 
@@ -405,48 +546,112 @@ readonly templateVariables = computed(() => {
   return Array.from(variables).sort();
 });
 
-// Variable values bound to form inputs
 variableValues: Record<string, string> = {};
 ```
 
 ### TemplateFormComponent
 
-Create/edit email template with HTML/Plain Text toggle.
+Create/edit email template with HTML/Plain Text toggle and live preview.
 
 **Features:**
-- Name, slug, description fields
-- Subject line with variable support
-- **Editor Mode Toggle** (HTML/Plain Text)
-- HTML content editor (when `isHtml: true`)
-- Plain text content editor (editable, not read-only)
+- Responsive form grid (`grid-cols-1 md:grid-cols-2`)
+- Name, slug, subject, description fields
+- Subject line with variable support hint
+- Editor Mode Toggle (HTML/Plain Text buttons)
+- Same height content editor and preview (`h-[400px]`)
+- Horizontal scroll for code (`wrap="off"`)
+- Live HTML preview in iframe with white background
 - Content sync between modes when switching
-- Preview with variable highlighting
 - Active toggle
+- Form actions right-aligned at bottom
 
-**Editor Mode Switching:**
+**Preview with Light Background:**
 
 ```typescript
-setEditorMode(mode: 'html' | 'text'): void {
-  const currentMode = this.editorMode();
+getPreviewHtml(): string {
+  const baseStyles = `
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        margin: 16px;
+        background-color: #ffffff;
+        color: #333333;
+      }
+      img { max-width: 100%; height: auto; }
+    </style>
+  `;
+  return baseStyles + (this.formModel.htmlContent || '');
+}
+```
 
-  // Sync content when switching modes
-  if (currentMode === 'text' && mode === 'html') {
-    if (!this.formModel.htmlContent && this.formModel.textContent) {
-      this.formModel.htmlContent = this.textToHtml(this.formModel.textContent);
-    }
-  } else if (currentMode === 'html' && mode === 'text') {
-    if (!this.formModel.textContent && this.formModel.htmlContent) {
-      this.formModel.textContent = this.htmlToPlainText(this.formModel.htmlContent);
-    }
-  }
+---
 
-  this.editorMode.set(mode);
-  this.formModel.isHtml = mode === 'html';
-}
+## Responsive Design Patterns
+
+### Tables
+
+```html
+<!-- Horizontal scroll wrapper -->
+<div class="overflow-x-auto -mx-4 sm:mx-0">
+  <p-table
+    [paginator]="totalRecords() > 0"
+    styleClass="p-datatable-sm"
+    [tableStyle]="{ 'min-width': '50rem' }"
+  >
+    <!-- Hidden columns on smaller screens -->
+    <th class="hidden md:table-cell">Slug</th>
+    <th class="hidden lg:table-cell">Subject</th>
+    <th class="hidden xl:table-cell">Created</th>
+  </p-table>
+</div>
+```
+
+### Forms
+
+```html
+<!-- Responsive grid -->
+<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+  <div class="field">...</div>
+  <div class="field md:col-span-2">...</div>  <!-- Full width on all screens -->
+</div>
+
+<!-- Form actions -->
+<div class="flex justify-end gap-2 mt-6 pt-4 border-t border-surface">
+  <p-button label="Cancel" severity="secondary" [outlined]="true" routerLink="../" />
+  <p-button [label]="isEditMode() ? 'Update' : 'Create'" icon="pi pi-save" />
+</div>
+```
+
+### Headers
+
+```html
+<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 mb-4">
+  <div>
+    <h3 class="text-lg sm:text-xl font-semibold m-0">Title</h3>
+    @if (showCompanyInfo()) {
+      <p class="text-sm text-muted-color mt-1">Company: {{ currentCompanyName() }}</p>
+    }
+  </div>
+  <p-button label="Action" styleClass="w-full sm:w-auto" />
+</div>
 ```
 
 ---
 
+## Dark Mode Support
+
+All components use PrimeNG/Tailwind dark mode classes:
+
+| Element | Classes |
+|---------|---------|
+| Borders | `border-surface` |
+| Text | `text-muted-color` |
+| Backgrounds | `bg-surface-0 dark:bg-surface-900`, `bg-surface-100 dark:bg-surface-700` |
+| Code blocks | `bg-surface-100 dark:bg-surface-700` |
+| Hover states | `hover:bg-surface-hover` |
+
+---
+
 ## Usage Examples
 
 ### Send Direct Email
@@ -499,42 +704,32 @@ async sendTemplateEmail(): Promise<void> {
 ### Test Configuration
 
 ```typescript
+import { EmailConfigApiService } from '@flusys/ng-email';
+
+private readonly configService = inject(EmailConfigApiService);
+
 async testConfig(configId: string, recipient: string): Promise<boolean> {
   const response = await firstValueFrom(
-    this.emailSendService.testConfiguration({
-      emailConfigId: configId,
-      recipient: recipient,
-    })
+    this.configService.sendTest(configId, recipient)
   );
 
   return response.data?.success ?? false;
 }
 ```
 
-### Create Email Template
+### Get Template by Slug
 
 ```typescript
 import { EmailTemplateApiService } from '@flusys/ng-email';
 
 private readonly templateService = inject(EmailTemplateApiService);
 
-async createTemplate(): Promise<void> {
+async getTemplate(slug: string): Promise<IEmailTemplate | null> {
   const response = await firstValueFrom(
-    this.templateService.insert({
-      name: 'Welcome Email',
-      slug: 'welcome-email',
-      description: 'Sent to new users',
-      subject: 'Welcome {{userName}}!',
-      isHtml: true,
-      htmlContent: '<h1>Welcome, {{userName}}!</h1><p>Thank you for joining.</p>',
-      textContent: 'Welcome, {{userName}}! Thank you for joining.',
-      isActive: true,
-    })
+    this.templateService.getBySlug(slug)
   );
 
-  if (response.success) {
-    console.log('Template created:', response.data?.id);
-  }
+  return response.data ?? null;
 }
 ```
 
@@ -546,16 +741,17 @@ All endpoints use **POST-only RPC** style (not REST).
 
 | Service | Endpoint | Description |
 |---------|----------|-------------|
-| Config | `POST /email/config/insert` | Create config |
-| Config | `POST /email/config/get/:id` | Get config by ID |
-| Config | `POST /email/config/get-all` | List configs (paginated) |
-| Config | `POST /email/config/update` | Update config |
-| Config | `POST /email/config/delete` | Delete config |
-| Template | `POST /email/template/insert` | Create template |
-| Template | `POST /email/template/get/:id` | Get template by ID |
-| Template | `POST /email/template/get-all` | List templates (paginated) |
-| Template | `POST /email/template/update` | Update template |
-| Template | `POST /email/template/delete` | Delete template |
+| Config | `POST /email/email-config/insert` | Create config |
+| Config | `POST /email/email-config/get/:id` | Get config by ID |
+| Config | `POST /email/email-config/get-all` | List configs (paginated) |
+| Config | `POST /email/email-config/update` | Update config |
+| Config | `POST /email/email-config/delete` | Delete config |
+| Template | `POST /email/email-template/insert` | Create template |
+| Template | `POST /email/email-template/get/:id` | Get template by ID |
+| Template | `POST /email/email-template/get-all` | List templates (paginated) |
+| Template | `POST /email/email-template/get-by-slug` | Get template by slug |
+| Template | `POST /email/email-template/update` | Update template |
+| Template | `POST /email/email-template/delete` | Delete template |
 | Send | `POST /email/send/direct` | Send email directly |
 | Send | `POST /email/send/template` | Send using template |
 | Send | `POST /email/send/test` | Test configuration |
@@ -609,21 +805,29 @@ Always use the test send feature to verify configurations work before using them
 
 ```typescript
 async sendEmail(): Promise<void> {
-  const response = await firstValueFrom(
-    this.emailSendService.sendTemplate({ ... })
-  );
-
-  if (response.data?.success) {
-    this.messageService.add({
-      severity: 'success',
-      summary: 'Email Sent',
-      detail: `Message ID: ${response.data.messageId}`,
-    });
-  } else {
+  try {
+    const response = await firstValueFrom(
+      this.emailSendService.sendTemplate({ ... })
+    );
+
+    if (response.data?.success) {
+      this.messageService.add({
+        severity: 'success',
+        summary: 'Email Sent',
+        detail: `Message ID: ${response.data.messageId}`,
+      });
+    } else {
+      this.messageService.add({
+        severity: 'error',
+        summary: 'Send Failed',
+        detail: response.data?.error || 'Unknown error occurred',
+      });
+    }
+  } catch (error: any) {
     this.messageService.add({
       severity: 'error',
-      summary: 'Send Failed',
-      detail: response.data?.error || 'Unknown error occurred',
+      summary: 'Error',
+      detail: error?.message || 'Failed to send email.',
     });
   }
 }
@@ -634,13 +838,17 @@ async sendEmail(): Promise<void> {
 ## Public API Exports
 
 ```typescript
+// Enums
+export { EmailProviderEnum } from '@flusys/ng-email';
+export { EmailBlockType } from '@flusys/ng-email';
+
 // Interfaces
 export {
   IEmailConfig, ICreateEmailConfigDto, IUpdateEmailConfigDto,
   ISmtpConfig, ISendGridConfig, IMailgunConfig,
   IEmailTemplate, ICreateEmailTemplateDto, IUpdateEmailTemplateDto,
-  ISendEmailDto, ISendTemplateEmailDto, ITestEmailDto,
-  IEmailAttachmentDto, IEmailSendResult,
+  IEmailSchema, IEmailSection, IEmailBlock, IEmailTemplateVariable,
+  ISendEmailDto, ISendTemplateEmailDto, ITestSendResult,
 } from '@flusys/ng-email';
 
 // Services
@@ -648,13 +856,17 @@ export {
   EmailConfigApiService,
   EmailTemplateApiService,
   EmailSendService,
+  EmailBuilderStateService,
 } from '@flusys/ng-email';
 
+// Components
+export { EmailContainerComponent } from '@flusys/ng-email';
+
 // Routes
 export { EMAIL_ROUTES } from '@flusys/ng-email';
 ```
 
 ---
 
-**Last Updated:** 2026-02-17
+**Last Updated:** 2026-02-21
 **Angular Version:** 21