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/DEPENDENCIES.md

@@ -0,0 +1,58 @@
+# Required Dependencies for Email Builder
+
+## Install These Packages:
+
+### TipTap Extensions (for RichTextEditor)
+```bash
+npm install @tiptap/extension-text-align @tiptap/extension-image
+```
+
+### CodeMirror (for Code Mode)
+```bash
+npm install codemirror @codemirror/lang-html @codemirror/theme-one-dark
+```
+
+### Radix UI (for UI Components)
+```bash
+npm install @radix-ui/react-radio-group
+```
+
+## Or Install All at Once:
+```bash
+npm install @tiptap/extension-text-align @tiptap/extension-image codemirror @codemirror/lang-html @codemirror/theme-one-dark @radix-ui/react-radio-group
+```
+
+## What Each Package Does:
+
+### @tiptap/extension-text-align
+- Adds text alignment support (left, center, right)
+- Used in RichTextEditor toolbar
+
+### @tiptap/extension-image
+- Adds image insertion support
+- Allows users to add images via URL
+
+### codemirror
+- Core CodeMirror editor
+- Professional code editing experience
+
+### @codemirror/lang-html
+- HTML syntax highlighting
+- Auto-completion for HTML tags
+
+### @codemirror/theme-one-dark
+- One Dark color theme
+- Professional dark theme for code editor
+
+### @radix-ui/react-radio-group
+- Radio button component
+- Used in button style selection dialog
+
+## After Installation:
+
+Run the development server:
+```bash
+npm run dev
+```
+
+All features will work correctly!