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/src/components/EmailBuilder/EmailBuilder.tsx

@@ -238,6 +238,19 @@ export function EmailBuilder({ blocks, onChange, variables = [] }: EmailBuilderP
                     onChange={(e) => setEditingButtonLink(e.target.value)}
                     placeholder="{order_url}"
                   />
+                  {variables.length > 0 && (
+                    <div className="flex flex-wrap gap-1 mt-2">
+                      {variables.map((variable) => (
+                        <code
+                          key={variable}
+                          className="text-xs bg-muted px-2 py-1 rounded cursor-pointer hover:bg-muted/80"
+                          onClick={() => setEditingButtonLink(editingButtonLink + `{${variable}}`)}
+                        >
+                          {`{${variable}}`}
+                        </code>
+                      ))}
+                    </div>
+                  )}
                 </div>
                 <div className="space-y-2">
                   <Label htmlFor="button-style">{__('Button Style')}</Label>