feat: Replace TipTap with Visual Email Builder 🎨

## 🚀 MAJOR FEATURE: Visual Email Content Builder!

### What Changed:

**Before:**
- TipTap rich text editor
- Manual [card] syntax typing
- Hard to visualize final result
- Not beginner-friendly

**After:**
- Visual drag-and-drop builder
- Live preview as you build
- No code needed
- Professional UX

### New Components:

**1. EmailBuilder** (`/components/EmailBuilder/`)
- Main builder component
- Block-based editing
- Drag to reorder (via up/down buttons)
- Click to edit
- Live preview

**2. Block Types:**
- **Header** - Large title text
- **Text** - Paragraph content
- **Card** - Styled content box (5 types: default, success, info, warning, hero)
- **Button** - CTA with solid/outline styles
- **Divider** - Horizontal line
- **Spacer** - Vertical spacing

**3. Features:**
- ✅ **Add Block Toolbar** - One-click block insertion
- ✅ **Hover Controls** - Edit, Delete, Move Up/Down
- ✅ **Edit Dialog** - Full editor for each block
- ✅ **Variable Helper** - Click to insert variables
- ✅ **Code Mode Toggle** - Switch between visual/code
- ✅ **Auto-sync** - Converts blocks ↔ [card] syntax

### How It Works:

**Visual Mode:**
```
[Add Block: Header | Text | Card | Button | Divider | Spacer]

┌─────────────────────────────┐
│ Header Block          [↑ ↓ ✎ ×] │
│ New Order Received           │
└─────────────────────────────┘

┌─────────────────────────────┐
│ Card Block (Success)  [↑ ↓ ✎ ×] │
│ ✅ Order Confirmed!          │
└─────────────────────────────┘

┌─────────────────────────────┐
│ Button Block          [↑ ↓ ✎ ×] │
│    [View Order Details]      │
└─────────────────────────────┘
```

**Code Mode:**
```html
[card]
<h1>New Order Received</h1>
[/card]

[card type="success"]
<h2>✅ Order Confirmed!</h2>
[/card]

[card]
<p style="text-align: center;">
  <a href="{order_url}" class="button">View Order Details</a>
</p>
[/card]
```

### Benefits:

1. **No Learning Curve**
   - Visual interface, no syntax to learn
   - Click, edit, done!

2. **Live Preview**
   - See exactly how email will look
   - WYSIWYG editing

3. **Flexible**
   - Switch to code mode anytime
   - Full HTML control when needed

4. **Professional**
   - Pre-designed block types
   - Consistent styling
   - Best practices built-in

5. **Variable Support**
   - Click to insert variables
   - Works in all block types
   - Helpful dropdown

### Technical Details:

**Converter Functions:**
- `blocksToHTML()` - Converts blocks to [card] syntax
- `htmlToBlocks()` - Parses [card] syntax to blocks
- Seamless sync between visual/code modes

**State Management:**
- Blocks stored as structured data
- Auto-converts to HTML on save
- Preserves all [card] attributes

### Next Steps:
- Install @radix-ui/react-radio-group for radio buttons
- Test email rendering end-to-end
- Polish and final review

This is a GAME CHANGER for email template editing! 🎉

admin-spa/src/components/EmailBuilder/converter.ts

@@ -0,0 +1,113 @@
+import { EmailBlock } from './types';
+
+/**
+ * Convert blocks to [card] syntax HTML
+ */
+export function blocksToHTML(blocks: EmailBlock[]): string {
+  return blocks.map(block => {
+    switch (block.type) {
+      case 'header':
+        return `[card]\n${block.content}\n[/card]`;
+      
+      case 'text':
+        return `[card]\n${block.content}\n[/card]`;
+      
+      case 'card':
+        if (block.cardType === 'default') {
+          return `[card]\n${block.content}\n[/card]`;
+        }
+        return `[card type="${block.cardType}"]\n${block.content}\n[/card]`;
+      
+      case 'button':
+        const buttonClass = block.style === 'solid' ? 'button' : 'button-outline';
+        return `[card]\n<p style="text-align: center;"><a href="${block.link}" class="${buttonClass}">${block.text}</a></p>\n[/card]`;
+      
+      case 'divider':
+        return `[card]\n<hr style="border: none; border-top: 1px solid #ddd; margin: 20px 0;" />\n[/card]`;
+      
+      case 'spacer':
+        return `[card]\n<div style="height: ${block.height}px;"></div>\n[/card]`;
+      
+      default:
+        return '';
+    }
+  }).join('\n\n');
+}
+
+/**
+ * Convert [card] syntax HTML to blocks
+ */
+export function htmlToBlocks(html: string): EmailBlock[] {
+  const blocks: EmailBlock[] = [];
+  const cardRegex = /\[card([^\]]*)\](.*?)\[\/card\]/gs;
+  
+  let match;
+  let blockId = 0;
+  
+  while ((match = cardRegex.exec(html)) !== null) {
+    const attributes = match[1];
+    const content = match[2].trim();
+    const id = `block-${Date.now()}-${blockId++}`;
+    
+    // Check if it's a button
+    if (content.includes('class="button"') || content.includes('class="button-outline"')) {
+      const buttonMatch = content.match(/<a[^>]*href="([^"]*)"[^>]*class="(button[^"]*)"[^>]*>([^<]*)<\/a>/);
+      if (buttonMatch) {
+        blocks.push({
+          id,
+          type: 'button',
+          text: buttonMatch[3],
+          link: buttonMatch[1],
+          style: buttonMatch[2].includes('outline') ? 'outline' : 'solid'
+        });
+        continue;
+      }
+    }
+    
+    // Check if it's a divider
+    if (content.includes('<hr')) {
+      blocks.push({ id, type: 'divider' });
+      continue;
+    }
+    
+    // Check if it's a spacer
+    const spacerMatch = content.match(/height:\s*(\d+)px/);
+    if (spacerMatch && content.includes('<div')) {
+      blocks.push({ id, type: 'spacer', height: parseInt(spacerMatch[1]) });
+      continue;
+    }
+    
+    // Check card type
+    const typeMatch = attributes.match(/type=["']([^"']+)["']/);
+    const cardType = typeMatch ? typeMatch[1] : 'default';
+    
+    // Check if it's a header (h1)
+    if (content.match(/<h1[^>]*>/)) {
+      blocks.push({ id, type: 'header', content });
+      continue;
+    }
+    
+    // Check if it has card type or is just text
+    if (cardType !== 'default') {
+      blocks.push({
+        id,
+        type: 'card',
+        cardType: cardType as any,
+        content
+      });
+    } else if (content.match(/<h[2-6][^>]*>/)) {
+      // Has heading, treat as card
+      blocks.push({
+        id,
+        type: 'card',
+        cardType: 'default',
+        content
+      });
+    } else {
+      // Plain text
+      blocks.push({ id, type: 'text', content });
+    }
+  }
+  
+  return blocks;
+}