dragble-angular-editor 1.0.4 → 1.0.5

package/README.md

@@ -167,25 +167,27 @@ import {
   selector: "app-advanced-email-builder",
   standalone: true,
   imports: [DragbleEditorComponent],
-  styles: [`
-    .advanced-email-builder {
-      height: 100vh;
-      display: flex;
-      flex-direction: column;
-    }
-
-    .toolbar {
-      padding: 12px;
-      border-bottom: 1px solid #ddd;
-      display: flex;
-      gap: 8px;
-      align-items: center;
-    }
-
-    .dirty-indicator {
-      color: orange;
-    }
-  `],
+  styles: [
+    `
+      .advanced-email-builder {
+        height: 100vh;
+        display: flex;
+        flex-direction: column;
+      }
+
+      .toolbar {
+        padding: 12px;
+        border-bottom: 1px solid #ddd;
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+
+      .dirty-indicator {
+        color: orange;
+      }
+    `,
+  ],
   template: `
     <div class="advanced-email-builder">
       <div class="toolbar">
@@ -195,7 +197,9 @@ import {
           Preview
         </button>
         <button type="button" (click)="handleExportHtml()">Export HTML</button>
-        <button type="button" (click)="handleExportImage()">Export Image</button>
+        <button type="button" (click)="handleExportImage()">
+          Export Image
+        </button>
         <span *ngIf="isDirty" class="dirty-indicator">Unsaved changes</span>
       </div>
 
@@ -326,11 +330,10 @@ export class EditorComponent {
     //   const id = "alice123-campaign-summer-2026";
     //
     // Format rules: 8-128 chars, only letters/digits/hyphens/underscores.
-    const userIdFromAuth = "alice123";        // from your auth/session
+    const userIdFromAuth = "alice123"; // from your auth/session
     const docIdFromRoute = "campaign-summer"; // from your URL or DB row
     const id = `${userIdFromAuth}-${docIdFromRoute}`;
-    const { sessionId } =
-      await this.editor.editor!.connectMCP({ id });
+    const { sessionId } = await this.editor.editor!.connectMCP({ id });
     // Pass sessionId to your backend — it calls MCP tools with your mcp_key
   }
 }
@@ -374,21 +377,23 @@ This prevents two AI controllers from conflicting on the same design.
 The `id` you pass to `connectMCP()` is a **Bring Your Own ID (BYOI)** that maps to your domain entities. It is NOT a random token — it is how Dragble identifies the session across browser refreshes, server restarts, and device switches.
 
 **Rules:**
+
 - 8–128 characters long
 - Only letters, numbers, hyphens, and underscores (`a-z A-Z 0-9 - _`)
 - Must be deterministic — the same user editing the same document should always produce the same `id`
 
 **Why these rules?**
+
 - The `id` is used in database lookups, URL paths, and storage keys — special characters or extreme lengths would break routing
 - Same `id` = resume the same session. Random UUIDs mean every page refresh creates a new session and loses AI context
 - Short IDs (< 8 chars) are too easy to guess, long IDs (> 128 chars) waste storage
 
 ```typescript
 // Recommended: derive from your domain — concrete examples
-editor.connectMCP({ id: "alice123-campaign-summer-2026" });   // user + doc
+editor.connectMCP({ id: "alice123-campaign-summer-2026" }); // user + doc
 editor.connectMCP({ id: "workspace_acme_template_welcome" }); // workspace + template
-editor.connectMCP({ id: "org-uber-eats-promo-q4-2026" });     // org + campaign
-editor.connectMCP({ id: "tenant_42_invoice_template_v3" });   // tenant + entity
+editor.connectMCP({ id: "org-uber-eats-promo-q4-2026" }); // org + campaign
+editor.connectMCP({ id: "tenant_42_invoice_template_v3" }); // tenant + entity
 
 // Valid but NOT recommended — random IDs break session continuity
 // (every page refresh creates a brand new session, AI loses context)
@@ -399,16 +404,16 @@ editor.connectMCP({ id: crypto.randomUUID() });
 
 Choose how much of the session lives on Dragble's servers:
 
-| Mode | Persistence | Use case |
-|---|---|---|
+| Mode             | Persistence               | Use case                                                |
+| ---------------- | ------------------------- | ------------------------------------------------------- |
 | `full` (default) | Metadata + design content | Standard SaaS; survives refresh, restart, device switch |
-| `metadata-only` | Metadata only | Audit logs without storing customer content |
-| `memory-only` | None — RAM only | HIPAA / SOC2 / strict data residency |
+| `metadata-only`  | Metadata only             | Audit logs without storing customer content             |
+| `memory-only`    | None — RAM only           | HIPAA / SOC2 / strict data residency                    |
 
 ```typescript
 editor.connectMCP({
   id: "user-42-doc-99",
-  storage: "full",          // default — best UX, refresh + cross-device resume
+  storage: "full", // default — best UX, refresh + cross-device resume
   // "metadata-only"        // audit metadata only, no design content persisted
   // "memory-only"          // nothing persisted (HIPAA / SOC2 / data residency)
 });
@@ -425,7 +430,7 @@ const { destroyed } = await editor.disconnectMCP();
 Your backend can also force-destroy a session server-side (e.g., when a user's subscription ends):
 
 ```bash
-curl -X DELETE https://mcp.dragble.io/sessions/user-42-doc-99 \
+curl -X DELETE https://mcp.dragble.com/sessions/user-42-doc-99 \
   -H "X-API-Key: db_mcp_your_key_here"
 ```
 
@@ -433,14 +438,14 @@ Idle sessions are reaped after 2 hours of inactivity. Active sessions never expi
 
 ### MCP method reference
 
-| Method | Returns |
-|---|---|
-| `editor.connectMCP({ id, storage?, editorMode? })` | `{ sessionId, storageMode?, resumed? }` |
-| `editor.disconnectMCP()` | `{ destroyed }` — permanently deletes session |
-| `editor.getPairingCode()` | `{ code, expiresAt }` — generate a pairing code for end-user AI clients |
-| `editor.endPairing()` | `{ revoked }` — invalidate the active pairing code |
-| `editor.getMCPStatus()` | `{ paired: true, sessionId } \| { paired: false, reason? }` |
-| `editor.onAIToolFired(cb)` | unsubscribe fn — fires when AI calls any tool |
+| Method                                             | Returns                                                                 |
+| -------------------------------------------------- | ----------------------------------------------------------------------- |
+| `editor.connectMCP({ id, storage?, editorMode? })` | `{ sessionId, storageMode?, resumed? }`                                 |
+| `editor.disconnectMCP()`                           | `{ destroyed }` — permanently deletes session                           |
+| `editor.getPairingCode()`                          | `{ code, expiresAt }` — generate a pairing code for end-user AI clients |
+| `editor.endPairing()`                              | `{ revoked }` — invalidate the active pairing code                      |
+| `editor.getMCPStatus()`                            | `{ paired: true, sessionId } \| { paired: false, reason? }`             |
+| `editor.onAIToolFired(cb)`                         | unsubscribe fn — fires when AI calls any tool                           |
 
 ### Full documentation
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dragble-angular-editor",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "AI-powered Angular email editor component. Drag-and-drop email builder for creating responsive email templates and newsletters. Build HTML emails visually with Dragble.",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",