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>
2026-04-05 18:31:16 -07:00
parent b511a6684d
commit 91a6b6f34b
103 changed files with 26296 additions and 0 deletions
@@ -0,0 +1,81 @@
+import React, { createContext, useContext, useState, useCallback, ReactNode } from 'react';
+
+export interface SiteDesign {
+  // Basic
+  primaryColor: string;
+  secondaryColor: string;
+  accentColor: string;
+  headingFont: string;
+  bodyFont: string;
+  linkColor: string;
+
+  // Advanced
+  successColor: string;
+  warningColor: string;
+  errorColor: string;
+  backgroundColor: string;
+  textColor: string;
+  mutedTextColor: string;
+  borderColor: string;
+  borderRadius: string;
+  buttonFont: string;
+  buttonRadius: string;
+  navStyle: 'light' | 'dark';
+
+  // Site-wide custom code
+  headCode: string;
+}
+
+export interface SiteDesignContextValue {
+  design: SiteDesign;
+  updateDesign: (updates: Partial<SiteDesign>) => void;
+  resetToDefaults: () => void;
+}
+
+export const DEFAULT_SITE_DESIGN: SiteDesign = {
+  primaryColor: '#3b82f6',
+  secondaryColor: '#8b5cf6',
+  accentColor: '#10b981',
+  headingFont: 'Inter, sans-serif',
+  bodyFont: 'Inter, sans-serif',
+  linkColor: '#3b82f6',
+
+  successColor: '#10b981',
+  warningColor: '#f59e0b',
+  errorColor: '#ef4444',
+  backgroundColor: '#ffffff',
+  textColor: '#1f2937',
+  mutedTextColor: '#6b7280',
+  borderColor: '#e5e7eb',
+  borderRadius: '8px',
+  buttonFont: 'Inter, sans-serif',
+  buttonRadius: '8px',
+  navStyle: 'light',
+  headCode: '',
+};
+
+const SiteDesignContext = createContext<SiteDesignContextValue>({
+  design: DEFAULT_SITE_DESIGN,
+  updateDesign: () => {},
+  resetToDefaults: () => {},
+});
+
+export const useSiteDesign = () => useContext(SiteDesignContext);
+
+export const SiteDesignProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const [design, setDesign] = useState<SiteDesign>(DEFAULT_SITE_DESIGN);
+
+  const updateDesign = useCallback((updates: Partial<SiteDesign>) => {
+    setDesign((prev) => ({ ...prev, ...updates }));
+  }, []);
+
+  const resetToDefaults = useCallback(() => {
+    setDesign(DEFAULT_SITE_DESIGN);
+  }, []);
+
+  return (
+    <SiteDesignContext.Provider value={{ design, updateDesign, resetToDefaults }}>
+      {children}
+    </SiteDesignContext.Provider>
+  );
+};