feat: Add Heading Selector, Styled Buttons & Variable Pills! 🎯

## ✅ Improvements 1-3 Complete:

### 1. Heading/Tag Selector in RichTextEditor
**Before:**
- No way to set heading levels
- Users had to type HTML manually

**After:**
- Dropdown selector in toolbar
- Options: Paragraph, H1, H2, H3, H4
- One-click heading changes
- User controls document structure

**UI:**
```
[Paragraph ▼] [B] [I] [List] ...
```

### 2. Styled Buttons in Cards
**Problem:**
- Buttons in TipTap looked raw
- Different from standalone buttons
- Not editable (couldn't change text/URL)

**Solution:**
- Custom TipTap ButtonExtension
- Same inline styles as standalone buttons
- Solid & Outline styles
- Fully editable via dialog

**Features:**
- Click button icon in toolbar
- Dialog opens for text, link, style
- Button renders with proper styling
- Matches email rendering exactly

**Extension:**
- `tiptap-button-extension.ts`
- Renders with inline styles
- `data-` attributes for editing
- Non-editable (atomic node)

### 3. Variable Pills for Button Links
**Before:**
- Users had to type {variable_name}
- Easy to make typos
- No suggestions

**After:**
- Variable pills under Button Link input
- Click to insert
- Works in both:
  - RichTextEditor button dialog
  - EmailBuilder button dialog

**UI:**
```
Button Link
[input field: {order_url}]

{order_number} {order_total} {customer_name} ...
   ↑ Click any pill to insert
```

## 📦 New Files:

**tiptap-button-extension.ts:**
- Custom TipTap node for buttons
- Inline styles matching email
- Atomic (non-editable in editor)
- Dialog-based editing

## �� User Experience:

**Heading Control:**
- Professional document structure
- No HTML knowledge needed
- Visual feedback (active state)

**Button Styling:**
- Consistent across editor/preview
- Professional appearance
- Easy to configure

**Variable Insertion:**
- No typing errors
- Visual discovery
- One-click insertion

## Next Steps:
4. WordPress Media Modal for images
5. WordPress Media Modal for Store logos/favicon

All improvements working perfectly! 🚀

admin-spa/package.json

@@ -10,6 +10,8 @@
         "lint": "ESLINT_USE_FLAT_CONFIG=false eslint . --ext ts,tsx --report-unused-disable-directives"
     },
     "dependencies": {
+        "@codemirror/lang-html": "^6.4.11",
+        "@codemirror/theme-one-dark": "^6.1.3",
         "@dnd-kit/core": "^6.3.1",
         "@dnd-kit/sortable": "^10.0.0",
         "@dnd-kit/utilities": "^3.2.2",
@@ -23,19 +25,23 @@
         "@radix-ui/react-label": "^2.1.7",
         "@radix-ui/react-navigation-menu": "^1.2.14",
         "@radix-ui/react-popover": "^1.1.15",
+        "@radix-ui/react-radio-group": "^1.3.8",
         "@radix-ui/react-select": "^2.2.6",
         "@radix-ui/react-separator": "^1.1.7",
         "@radix-ui/react-slot": "^1.2.3",
         "@radix-ui/react-switch": "^1.2.6",
         "@radix-ui/react-tabs": "^1.1.13",
         "@tanstack/react-query": "^5.90.5",
+        "@tiptap/extension-image": "^3.10.7",
         "@tiptap/extension-link": "^3.10.5",
         "@tiptap/extension-placeholder": "^3.10.5",
+        "@tiptap/extension-text-align": "^3.10.7",
         "@tiptap/react": "^3.10.5",
         "@tiptap/starter-kit": "^3.10.5",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "cmdk": "^1.1.1",
+        "codemirror": "^6.0.2",
         "lucide-react": "^0.547.0",
         "next-themes": "^0.4.6",
         "qrcode": "^1.5.4",