# Site Builder Features (2026-02-22)

## 1. Anchor Points & Link System
- **Anchor Point block**: Drag-and-drop anchor points with configurable `id` attribute
- **Link Type Selector**: When selecting a link/button element, choose between:
  - External URL (manual input)
  - Page Link (dropdown of all pages)
  - Anchor on Page (dropdown of all anchors on current page)
- Anchors automatically populate in the dropdown

## 2. Asset Manager
- **New "Assets" tab** in left panel
- **File upload**: Upload images, videos, PDFs via file picker (stored as data URLs in localStorage)
- **URL-based assets**: Add assets by pasting URLs
- **Asset grid**: Visual grid showing thumbnails for images, icons for other file types
- **Click to copy**: Click any asset to copy its URL to clipboard
- **Delete assets**: Remove with × button
- Assets are also registered in GrapesJS's built-in asset manager for image selection

## 3. Image Resize/Crop (PHP Backend)
- **API endpoint**: `api/image-resize.php`
- **Modes**: `resize`, `crop`, `fit`
- **Input**: File upload or URL
- **Parameters**: width, height, quality (1-100), format (jpg/png/webp/auto)
- **Output**: JSON with resized image path, dimensions, and file size
- Requires PHP with GD extension on the server

## 4. Video Element Fix
- **Video block** has properly registered `video-wrapper` component type
- **Video URL trait**: Enter YouTube, Vimeo, or direct video file URLs
- **Apply Video button**: Click to apply the video URL
- **Video Section (BG)**: Separate component type for video background sections
- Both component types (`video-wrapper` and `video-section`) are registered and functional

## 5. Element Deletion Improvement
- **"Delete Section" context menu option**: Right-click any element → "Delete Section"
- Walks up the component tree to find the topmost parent (before the wrapper)
- Deletes the entire section including all child components
- Confirmation dialog before deletion

## 6. Header/Site-wide Elements
- **New "Head" tab** in right panel
- **Page `<head>` Code**: Add scripts, meta tags, and other `<head>` elements
- **Site-wide CSS**: Add CSS that applies to all pages
- Both are saved to localStorage and included in exports
- Site-wide CSS is applied live to the canvas editor

## 7. PDF/File Display Element
- **"File / PDF" block** in Media category
- Uses `<iframe>` for embedding
- **File URL trait**: Enter URL of PDF or document
- **Height control**: Adjustable iframe height
- **Apply File button**: Click to load the file
- Google Docs Viewer fallback for non-PDF files
- Placeholder UI with instructions when no file is loaded

## 8. Missing Icons Fixed
- **Section block**: `fa fa-columns` icon
- **Newsletter block**: `fa fa-newspaper` icon
- **Spacer block**: `fa fa-arrows-alt-v` icon
- All using Font Awesome 5 compatible class names

## 9. Typography Advanced Settings
- **Font Family**: Dropdown with 11 font options (Inter, Roboto, Open Sans, Poppins, Montserrat, Playfair Display, Merriweather, Source Code Pro, Arial, Georgia, Times New Roman)
- **Font Weight**: Dropdown from Thin (100) to Black (900)
- **Letter Spacing**: Number input with px/em/rem units
- **Line Height**: Number input with px/em/%/unitless options
- **Text Align**: Radio buttons with icons (left, center, right, justify)
- All properties properly configured in GrapesJS StyleManager

## 10. Logo Element Improvement
- **Logo Mode trait**: Select between Text Only, Image Only, or Image + Text
- **Logo Text trait**: Set the text content
- **Logo Image URL trait**: Set an image URL for the logo
- **Apply Logo button**: Regenerates the logo component based on selected mode
- Text mode shows initial letter icon + text (original behavior)
- Image mode shows just the image
- Both mode shows image + text side by side

## Additional Improvements
- **Local vendor scripts**: GrapesJS and plugins now load from local `vendor/` directory (no CDN dependency)
- **Plugin compatibility fix**: Fixed `gjs-blocks-basic` global name mismatch
- **Context menu**: Added "Delete Section" alongside existing "Delete"

## Testing
- 17 Playwright tests covering all features
- Run: `npx playwright test tests/features.spec.js`
- All tests passing ✅
