@fufulog/brevomorphic-cms-sdk 1.0.4 → 1.0.6

package/.kilo/worktrees/chip-sputter/INTEGRATION.md

@@ -0,0 +1,147 @@
+# Brevo CMS SDK - Host Integration Reference Notes
+
+These integration notes document the implementation patterns, ESM target configurations, and routing setups utilized when embedding the `brevoCMS` SDK into a React/Vite/Express workspace.
+
+---
+
+## 1. Environment Configurations
+
+Make sure to define these keys in the host environment (`.env`):
+
+```bash
+# Brevo SMTP Configuration
+BREVO_API_KEY="xkeysib-..."
+BREVO_DEFAULT_SENDER_EMAIL="info@yourdomain.com"
+BREVO_DEFAULT_SENDER_NAME="Your Brand Name"
+DB_TYPE="firestore" # or 'postgres' | 'mysql'
+```
+
+---
+
+## 2. ESM Target Module Fixes
+
+If your host application is configured to run as an ES Module (`"type": "module"` in `package.json`), you must build the `@fufulog/brevomorphic-cms-sdk` to match ESM:
+
+1. Add `"type": "module"` to `brevoCMS/package.json` so TypeScript compiles native ES imports/exports.
+2. Compile/rebuild the package:
+   ```bash
+   npm run build
+   ```
+This ensures the output in `dist/` is compiled with standard `export` and `import` syntax instead of CommonJS `require`/`exports`, preventing `"exports is not defined"` errors in Vite SSR environments.
+
+---
+
+## 3. Dev Server Proxy Routing
+
+In Vite environments using Express API middlewares, Vite must be explicitly instructed to forward the CMS endpoints to the Express instance.
+
+Update the API routing middleware check in `vite.config.ts` to intercept `/api/cms`:
+```typescript
+if (req.url && (
+  req.url.startsWith('/api/payments') || 
+  req.url.startsWith('/api/scanner') || 
+  req.url.startsWith('/api/cms') // Ensure this is captured
+)) {
+  // Forward to Express server module...
+}
+```
+Failing to include this causes Vite to fall back to serving the SPA's `index.html` (returning `<!doctype html...`), resulting in JSON parse errors.
+
+---
+
+## 4. API Response Mapping Guardrails
+
+The SDK returns templates matching Brevo's naming conventions, returning properties `templateId` and `templateName`. 
+When listing and selecting templates in your React dashboard UI, ensure you map these keys to local frontend properties:
+
+```typescript
+const handleSelectTemplate = async (template) => {
+  const res = await fetch(`/api/cms/templates/${template.id}`);
+  const json = await res.json();
+  if (json.success) {
+    const t = json.data;
+    setEditingTemplate({
+      id: t.templateId,     // Map templateId -> id
+      name: t.templateName, // Map templateName -> name
+      subject: t.subject,
+      htmlContent: t.htmlContent,
+      isActive: t.isActive,
+      eventName: t.eventName,
+      sender: t.sender,
+    });
+  }
+};
+```
+
+---
+
+## 5. Event Trigger Implementation
+
+Trigger outbound event-driven transactional mailings by passing a recipient email and variables context:
+
+```typescript
+import { cmsService } from './server/cms.js';
+
+// Inside Checkout / Payment Success Handlers:
+await cmsService.sendEventEmail('order.completed', email, {
+  customerName: profile.name,
+  orderId: order.id,
+  totalAmount: order.total,
+  currency: order.currency,
+  itemsCount: order.items.length,
+  appUrl: 'https://yourdomain.com'
+});
+
+// Inside User Registration Handlers:
+await cmsService.sendEventEmail('user.welcome', email, {
+  customerName: profile.name,
+  signupDate: new Date().toLocaleDateString()
+});
+```
+The SDK runs outbound event-check safety checks. If the template is unassigned, missing, or inactive (`isActive` is false), the send is safely ignored without breaking transaction flows.
+
+---
+
+## 6. Brevo Template Loops & Object Decomposition
+
+When passing arrays of objects (like tickets or shopping cart items) to Brevo transactional templates, use **Brevo's native template language** (based on Django/Jinja syntax):
+
+### Loop Syntax & Decomposing Properties
+* **Root Scope**: All variables passed via `sendEventEmail` reside under the `params` object (e.g. `params.tickets`).
+* **Loop Declaration**: Loop through the array using `{% for %}` tags:
+  ```django
+  {% for item in params.tickets %}
+    <!-- Decompose attributes directly from the loop item -->
+    <h3>{{ item.name }}</h3>
+    <p>Ticket ID: {{ item.ticketId }}</p>
+    <p>Attendee: {{ item.attendeeName }}</p>
+    <!-- Render QR code dynamically using the standard image tag -->
+    <img src="{{ item.qrCodeUrl }}" width="110" height="110" alt="QR Code" />
+  {% endfor %}
+  ```
+* **Gmail/Email Client Compatibility Warning**: Gmail strips inline `<svg>` blocks and inline base64-encoded images. To guarantee delivery across all devices, pass a hosted/generated PNG dynamic URL (such as GoQR/QRServer) and render it inside a standard `<img />` tag.
+
+### Example Transactional Dispatch (Tickets)
+```typescript
+await cmsService.sendEventEmail('order.tickets', email, {
+  customerName: profile.name,
+  orderId: order.id,
+  appUrl: 'https://yourdomain.com',
+  tickets: [
+    {
+      name: 'VIP Admission Pass',
+      ticketId: 'tkt_VIP123',
+      orderIdShort: 'ORD-1234',
+      dateRange: 'Oct 15 - 17, 2026',
+      timeRange: '10am to 4pm',
+      location: 'Design Center, NY',
+      entryType: 'Multi Entry',
+      isMultiDay: true,
+      purchasedDate: '2026-05-28',
+      attendeeName: 'Jane Doe',
+      qrCodeUrl: 'https://api.qrserver.com/v1/create-qr-code/?size=220x220&margin=0&data=tkt_VIP123'
+    }
+  ]
+});
+```
+

package/.kilo/worktrees/chip-sputter/LICENSE

@@ -0,0 +1,192 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, be controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf
+      of the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if distributed along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      LIABLE to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+END OF TERMS AND CONDITIONS
+
+
+Copyright [2026] [Joseph Quesnel / TicketHouse LLC]
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/.kilo/worktrees/chip-sputter/README.md

@@ -0,0 +1,354 @@
+# Brevo CMS Email Bootstrap SDK
+
+A modular, lightweight, and robust Node.js SDK to synchronize and bootstrap Brevo email templates directly with local application backend events. 
+
+It provides an out-of-the-box system that syncs metadata from Brevo SMTP templates, saves target-event routing parameters in a local mapping database, runs Just-In-Time (JIT) sync, enforces visual guardrails, and exports plug-and-play Express controllers.
+
+---
+
+## How to Install
+
+### 1. Install the SDK
+
+```bash
+npm install @fufulog/brevomorphic-cms-sdk
+```
+
+### 2. Set Environment Variables
+
+Copy the example env and fill in your credentials:
+
+```bash
+cp node_modules/@fufulog/brevomorphic-cms-sdk/env.example .env
+```
+
+Required variables:
+
+| Variable | Description |
+| --- | --- |
+| `BREVO_API_KEY` | Your Brevo API key (`xkeysib-...`) |
+| `DEFAULT_SENDER_EMAIL` | Verified sender email address |
+| `DB_TYPE` | `postgres`, `mysql`, or `firestore` |
+| `DATABASE_URL` | Connection string (SQL) or Firebase credentials (Firestore) |
+
+### 3. Create the Mapping Table
+
+Run the appropriate schema migration for your database (see [Database Setup](#1-database-setup) below).
+
+### 4. Bootstrap in Your App
+
+```javascript
+import { EmailTemplateService, EmailTemplateController } from '@fufulog/brevomorphic-cms-sdk';
+import express from 'express';
+
+const emailService = new EmailTemplateService({
+  brevoApiKey: process.env.BREVO_API_KEY,
+  defaultSender: { email: process.env.DEFAULT_SENDER_EMAIL },
+  dbType: 'postgres', // or 'mysql' | 'firestore'
+  dbClient: yourDbClient,
+});
+
+const app = express();
+app.use(express.json());
+app.use('/api/cms', new EmailTemplateController(emailService).getRouter());
+
+app.listen(3000);
+```
+
+### 5. (Optional) Add the WYSIWYG Editor Component
+
+The SDK ships drop-in WYSIWYG editor components for **Svelte** and **React**. Copy the component files from the SDK into your frontend project:
+
+```bash
+# Svelte
+cp node_modules/@fufulog/brevomorphic-cms-sdk/svelte/BrevoWysiwyg.svelte src/components/
+
+# React
+cp node_modules/@fufulog/brevomorphic-cms-sdk/react/BrevoWysiwyg.tsx src/components/
+cp node_modules/@fufulog/brevomorphic-cms-sdk/react/BrevoWysiwyg.css src/components/
+```
+
+See [WYSIWYG Editor Components](#6-wysiwyg-editor-components) for full usage details.
+
+---
+
+## Features
+
+- **JIT Local Mapping Engine:** Automatic initialization of local routing templates if a new template is created directly on Brevo.
+- **Outbound Send Guardrail:** Built-in safeguards that silently ignore disabled templates to protect transaction processing systems.
+- **Multi-Database Support:** Native integration with **PostgreSQL**, **MySQL**, and **Google Cloud Firestore NoSQL** with zero code changes.
+- **Plug-and-Play Routing:** Ready-to-mount Express Router exposing CRUD, activation toggles, verified sender lookups, and webhook routes.
+- **WYSIWYG Editor Components:** Bundled Svelte and React editor components with source toggle, formatting toolbar, and Brevo variable injection.
+- **Type Safety:** Full TypeScript declarations (`.d.ts`) included out of the box.
+
+---
+
+## 1. Database Setup
+
+### SQL (PostgreSQL & MySQL)
+Create the mapping ledger table using the appropriate schema block. By default, the SDK looks for the `email_event_templates` table.
+
+#### **PostgreSQL**
+```sql
+CREATE TABLE email_event_templates (
+    id SERIAL PRIMARY KEY,
+    template_id INT NOT NULL UNIQUE, -- Bridges to Brevo template ID
+    event_name VARCHAR(255) DEFAULT '', -- Links backend trigger key (e.g., ticket.preapproved)
+    is_active BOOLEAN DEFAULT false, -- Master toggle for active sends
+    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+```
+
+#### **MySQL**
+```sql
+CREATE TABLE email_event_templates (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    template_id INT NOT NULL UNIQUE,
+    event_name VARCHAR(255) DEFAULT '',
+    is_active TINYINT(1) DEFAULT 0,
+    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
+);
+```
+
+### NoSQL (Firestore)
+No collection schema is required. Simply create a document collection named `email_event_templates` (customizable) in your Firestore database. The SDK will automatically structure documents with:
+- **Document ID:** Stringified template ID (e.g. `"42"`)
+- **Fields:**
+  - `template_id`: `number`
+  - `event_name`: `string`
+  - `is_active`: `boolean`
+  - `updated_at`: `timestamp`
+
+---
+
+## 2. Bootstrapping the SDK
+
+To bootstrap the SDK in your application, instantiate `EmailTemplateService` by supplying a database driver instance (Postgres Pool, MySQL connection, or Firestore client instance) and the Brevo configuration.
+
+### **Recipe A: PostgreSQL (using `pg` Pool)**
+```javascript
+import pg from 'pg';
+import { EmailTemplateService } from '@fufulog/brevomorphic-cms-sdk';
+
+const pgPool = new pg.Pool({
+  connectionString: process.env.DATABASE_URL
+});
+
+// Configure the SDK using a wrapper matching { query: (sql, params) => Promise<any> }
+const emailService = new EmailTemplateService({
+  brevoApiKey: process.env.BREVO_API_KEY,
+  defaultSender: {
+    name: "Billing Desk",
+    email: "billing@yourdomain.com"
+  },
+  dbType: 'postgres',
+  dbClient: pgPool, // Standard pg Pool works natively
+  tableNameOrCollection: 'email_event_templates'
+});
+```
+
+### **Recipe B: MySQL (using `mysql2/promise` Pool)**
+```javascript
+import mysql from 'mysql2/promise';
+import { EmailTemplateService } from '@fufulog/brevomorphic-cms-sdk';
+
+const mysqlPool = await mysql.createPool({
+  host: process.env.DB_HOST,
+  user: process.env.DB_USER,
+  password: process.env.DB_PASSWORD,
+  database: process.env.DB_NAME
+});
+
+const emailService = new EmailTemplateService({
+  brevoApiKey: process.env.BREVO_API_KEY,
+  defaultSender: {
+    name: "Customer Support",
+    email: "support@yourdomain.com"
+  },
+  dbType: 'mysql',
+  dbClient: mysqlPool, // Standard mysql2 promise pool works natively
+  tableNameOrCollection: 'email_event_templates'
+});
+```
+
+### **Recipe C: Firestore NoSQL (using `firebase-admin/firestore`)**
+```javascript
+import { initializeApp, cert } from 'firebase-admin/app';
+import { getFirestore } from 'firebase-admin/firestore';
+import { EmailTemplateService } from '@fufulog/brevomorphic-cms-sdk';
+
+// Initialize Firebase SDK
+initializeApp({
+  credential: cert(JSON.parse(process.env.FIREBASE_SERVICE_ACCOUNT_JSON))
+});
+
+const firestoreDb = getFirestore();
+
+const emailService = new EmailTemplateService({
+  brevoApiKey: process.env.BREVO_API_KEY,
+  defaultSender: {
+    name: "System Gateway",
+    email: "noreply@yourdomain.com"
+  },
+  dbType: 'firestore',
+  dbClient: firestoreDb, // Standard Firestore client works natively
+  tableNameOrCollection: 'email_event_templates'
+});
+```
+
+---
+
+## 3. Mounting the Routing Layer (Express Server)
+
+Instantiate `EmailTemplateController` by passing your bootstrapped `EmailTemplateService` and mounting the routes directly inside your Express router.
+
+```javascript
+import express from 'express';
+import { EmailTemplateController } from '@fufulog/brevomorphic-cms-sdk';
+
+const app = express();
+app.use(express.json());
+
+// Create and mount CMS routes
+const emailController = new EmailTemplateController(emailService);
+app.use('/api/cms', emailController.getRouter());
+
+// Start Server
+app.listen(3000, () => {
+  console.log('🚀 Brevo CMS mounting on http://localhost:3000/api/cms');
+});
+```
+
+### **Exposed Routes**
+| Method | Route | Description |
+| --- | --- | --- |
+| **GET** | `/api/cms/templates` | Lists templates with combined remote + local database JIT synchronization. |
+| **GET** | `/api/cms/templates/:id` | Returns visual parameters, subject, HTML code block, and links for a specific template. |
+| **POST** | `/api/cms/templates` | Creates a new draft template on Brevo & hooks up blank local DB mappings. |
+| **PUT** | `/api/cms/templates/:id` | Updates name, subject, HTML markup body, and local target event assignment. |
+| **POST** | `/api/cms/templates/:id/toggle` | Activates/deactivates template remotely on Brevo and locally inside DB mapping. |
+| **GET** | `/api/cms/senders` | Pulls verified sender dropdown configurations from Brevo. |
+| **POST** | `/api/cms/send` | Triggers test sends for a specific mapping. |
+
+---
+
+## 4. Operational Workflows (Outbound Sends)
+
+In your application code, whenever a business operation completes (e.g. user welcome, ticket pre-approval), call the SDK directly to send an event email. 
+
+The SDK automatically runs event guardrails: if no active template is associated with the event, or if it has been deactivated on the dashboard, it is ignored safely.
+
+```javascript
+// Welcome Event Trigger
+app.post('/api/users/signup', async (req, res) => {
+  const newUser = await createUser(req.body);
+
+  // Trigger event-driven outbound send.
+  // If template is inactive (is_active = false) or event mapping doesn't exist, it skips it.
+  const outcome = await emailService.sendEventEmail('user.welcome', newUser.email, {
+    customer_name: newUser.name,
+    signup_date: new Date().toLocaleDateString()
+  });
+
+  console.log(outcome.message); // Logs status outcome safely
+  res.status(201).json({ success: true, user: newUser });
+});
+```
+
+---
+
+## 5. Visual Form Validation Guards
+
+When calling `emailService.updateTemplate(id, data)` or hitting `PUT /api/cms/templates/:id`, the SDK automatically protects Brevo's API by enforcing boundary conditions:
+- **Blank Names:** Rejected. Form fields require unique template name keys.
+- **Short HTML:** Brevo servers reject payloads with missing layouts. The SDK validates that raw HTML blocks must be longer than 10 characters before transmitting.
+
+---
+
+## 6. WYSIWYG Editor Components
+
+The SDK ships drop-in WYSIWYG editor components for **Svelte** and **React**. These are zero-dependency source files you copy into your frontend project — no extra `npm install` required.
+
+### Key Features
+
+- **Formatting Toolbar:** Bold, Italic, Underline, Strikethrough, Headings, Lists, Alignment, Links
+- **Source Toggle:** Switch between rich-text and raw HTML editing
+- **Variable Injector:** Insert Brevo Twig expressions (`{{ params.name }}`) at cursor position
+- **Twig Bracket Protection:** Does **not** escape `{`, `}`, or `%` — safe for Brevo's template engine
+
+### Svelte Usage
+
+```svelte
+<script>
+  import BrevoWysiwyg from './BrevoWysiwyg.svelte';
+
+  let htmlContent = '';
+
+  const variables = [
+    { label: 'Customer Name', key: 'params.name' },
+    { label: 'Ticket Code', key: 'params.ticket_code' },
+    { label: 'Signup Date', key: 'params.signup_date' }
+  ];
+</script>
+
+<BrevoWysiwyg
+  bind:value={htmlContent}
+  {variables}
+  placeholder="Design your email layout..."
+  on:change={(e) => console.log('HTML changed:', e.detail)}
+/>
+```
+
+### React Usage
+
+```tsx
+import { useState } from 'react';
+import BrevoWysiwyg from './BrevoWysiwyg';
+
+function TemplateEditor() {
+  const [htmlContent, setHtmlContent] = useState('');
+
+  const variables = [
+    { label: 'Customer Name', key: 'params.name' },
+    { label: 'Ticket Code', key: 'params.ticket_code' },
+    { label: 'Signup Date', key: 'params.signup_date' }
+  ];
+
+  return (
+    <BrevoWysiwyg
+      value={htmlContent}
+      onChange={setHtmlContent}
+      variables={variables}
+      placeholder="Design your email layout..."
+    />
+  );
+}
+```
+
+### Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `value` | `string` | `''` | Raw HTML content (two-way bind in Svelte, controlled in React) |
+| `onChange` | `(html: string) => void` | — | Callback when content changes (React only) |
+| `variables` | `{ label: string, key: string }[]` | `[]` | Available Brevo template variables |
+| `placeholder` | `string` | `'Start designing...'` | Placeholder text |
+| `disabled` | `boolean` | `false` | Disables editing |
+
+---
+
+## License
+
+Copyright [2026] [Joseph Quesnel / TicketHouse LLC]
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.