Add Craft.js site builder (v2) - complete rebuild from GrapesJS

Rebuilt the visual site builder from scratch using Craft.js, React 18,
and TypeScript. The new editor renders directly in the DOM (no iframe),
supports 40+ components, multi-page with shared header/footer, 16
templates, full-spectrum color/gradient controls, custom head code
injection, save/publish workflow, and auto-save.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-05 18:31:16 -07:00
parent b511a6684d
commit 91a6b6f34b
103 changed files with 26296 additions and 0 deletions

View File

@@ -0,0 +1,86 @@
export const TEXT_COLORS = [
{ label: 'Dark', value: '#1f2937' },
{ label: 'Medium', value: '#374151' },
{ label: 'Light', value: '#6b7280' },
{ label: 'White', value: '#ffffff' },
{ label: 'Blue', value: '#3b82f6' },
{ label: 'Green', value: '#10b981' },
{ label: 'Red', value: '#ef4444' },
{ label: 'Orange', value: '#f59e0b' },
];
export const BG_COLORS = [
{ label: 'White', value: '#ffffff' },
{ label: 'Off-white', value: '#f9fafb' },
{ label: 'Dark', value: '#1f2937' },
{ label: 'Darker', value: '#111827' },
{ label: 'Blue', value: '#3b82f6' },
{ label: 'Green', value: '#10b981' },
{ label: 'Purple', value: '#8b5cf6' },
{ label: 'Pink', value: '#ec4899' },
];
export const FONT_FAMILIES = [
{ label: 'Inter', value: 'Inter, sans-serif' },
{ label: 'Roboto', value: 'Roboto, sans-serif' },
{ label: 'Open Sans', value: 'Open Sans, sans-serif' },
{ label: 'Poppins', value: 'Poppins, sans-serif' },
{ label: 'Montserrat', value: 'Montserrat, sans-serif' },
{ label: 'Playfair', value: 'Playfair Display, serif' },
{ label: 'Merriweather', value: 'Merriweather, serif' },
{ label: 'Source Code', value: 'Source Code Pro, monospace' },
];
export const TEXT_SIZES = [
{ label: 'XS', value: '12px' },
{ label: 'S', value: '14px' },
{ label: 'M', value: '16px' },
{ label: 'L', value: '20px' },
{ label: 'XL', value: '24px' },
{ label: '2XL', value: '32px' },
];
export const FONT_WEIGHTS = [
{ label: 'Light', value: '300' },
{ label: 'Normal', value: '400' },
{ label: 'Medium', value: '500' },
{ label: 'Semi', value: '600' },
{ label: 'Bold', value: '700' },
];
export const SPACING_PRESETS = [
{ label: 'None', value: '0' },
{ label: 'S', value: '8px' },
{ label: 'M', value: '16px' },
{ label: 'L', value: '24px' },
{ label: 'XL', value: '32px' },
];
export const RADIUS_PRESETS = [
{ label: 'None', value: '0' },
{ label: 'S', value: '4px' },
{ label: 'M', value: '8px' },
{ label: 'L', value: '16px' },
{ label: 'Full', value: '9999px' },
];
export const GRADIENTS = [
{ label: 'Purple Dream', value: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },
{ label: 'Pink Sunset', value: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)' },
{ label: 'Ocean Blue', value: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)' },
{ label: 'Green Teal', value: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)' },
{ label: 'Warm Sunrise', value: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)' },
{ label: 'Soft Pastel', value: 'linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%)' },
{ label: 'Peach', value: 'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)' },
{ label: 'Warm Sand', value: 'linear-gradient(135deg, #f5af19 0%, #f12711 100%)' },
{ label: 'Dark Purple', value: 'linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)' },
{ label: 'Dark Blue', value: 'linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%)' },
{ label: 'Dark Gray', value: 'linear-gradient(135deg, #1f2937 0%, #111827 100%)' },
{ label: 'None', value: 'none' },
];
export const DEVICE_WIDTHS: Record<string, string> = {
desktop: '100%',
tablet: '768px',
mobile: '375px',
};