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>

craft/src/panels/right/styles/HeroStylePanel.tsx

@@ -0,0 +1,269 @@
+import React, { useCallback, useState, useRef } from 'react';
+import { useEditor } from '@craftjs/core';
+import {
+  StylePanelProps,
+  CollapsibleSection,
+  ColorPickerField,
+  uploadToWhp,
+  labelStyle,
+  inputStyle,
+  smallInputStyle,
+  btnActiveStyle,
+  sectionGap,
+} from './shared';
+
+/* ---------- Asset Browser Inline ---------- */
+const AssetBrowser: React.FC<{
+  filter: 'image' | 'video' | 'all';
+  onSelect: (url: string) => void;
+}> = ({ filter, onSelect }) => {
+  const [assets, setAssets] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [open, setOpen] = useState(false);
+
+  const loadAssets = useCallback(async () => {
+    const cfg = (window as any).WHP_CONFIG;
+    if (!cfg) return;
+    setLoading(true);
+    try {
+      const resp = await fetch(`${cfg.apiUrl}?action=list_assets&site_id=${cfg.siteId}`);
+      const data = await resp.json();
+      if (data.success && Array.isArray(data.assets)) {
+        const filtered = filter === 'all' ? data.assets : data.assets.filter((a: any) => {
+          const t = (a.type || '').toLowerCase();
+          return filter === 'image' ? t.startsWith('image') : t.startsWith('video');
+        });
+        setAssets(filtered);
+      }
+    } catch (e) { console.error('Load assets failed:', e); }
+    setLoading(false);
+  }, [filter]);
+
+  const handleToggle = useCallback(() => {
+    if (!open) loadAssets();
+    setOpen(!open);
+  }, [open, loadAssets]);
+
+  return (
+    <div>
+      <button onClick={handleToggle} style={{
+        ...btnActiveStyle(open), width: '100%', marginTop: 4,
+      }}>
+        <i className={`fa ${loading ? 'fa-spinner fa-spin' : 'fa-folder-open'}`} style={{ marginRight: 4 }} />
+        {open ? 'Close' : 'Browse Assets'}
+      </button>
+      {open && (
+        <div style={{ maxHeight: 160, overflowY: 'auto', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 4, marginTop: 6, background: '#18181b', borderRadius: 6, padding: 4 }}>
+          {assets.map((asset, i) => (
+            <div key={i} onClick={() => { onSelect(asset.url); setOpen(false); }}
+              style={{ cursor: 'pointer', borderRadius: 4, overflow: 'hidden', border: '2px solid transparent', aspectRatio: '1', transition: 'border-color 0.15s', background: '#27272a', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+              onMouseEnter={(e) => { e.currentTarget.style.borderColor = '#3b82f6'; }}
+              onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'transparent'; }}>
+              {(asset.type || '').startsWith('image') ? (
+                <img src={asset.url} alt={asset.name} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
+              ) : (
+                <div style={{ textAlign: 'center', padding: 4 }}>
+                  <i className="fa fa-film" style={{ fontSize: 20, color: '#71717a' }} />
+                  <div style={{ fontSize: 8, color: '#71717a', marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: 70 }}>
+                    {asset.name?.replace(/^\d+_[a-f0-9]+_/, '')}
+                  </div>
+                </div>
+              )}
+            </div>
+          ))}
+          {assets.length === 0 && (
+            <p style={{ gridColumn: '1/-1', textAlign: 'center', color: '#71717a', fontSize: 11, padding: 12, margin: 0 }}>
+              No {filter} assets uploaded yet
+            </p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+/* ---------- HERO STYLE PANEL ---------- */
+export const HeroStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodeProps }) => {
+  const { actions } = useEditor();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const setProp = useCallback((key: string, value: any) => {
+    actions.setProp(selectedId, (props: any) => { props[key] = value; });
+  }, [actions, selectedId]);
+
+  const handleUpload = useCallback(async (file: File, propKey: string) => {
+    const url = await uploadToWhp(file);
+    if (url) setProp(propKey, url);
+  }, [setProp]);
+
+  const bgType = nodeProps.bgType || 'color';
+
+  return (
+    <>
+      <CollapsibleSection title="Content">
+        <div style={sectionGap}>
+          <label style={labelStyle}>Heading</label>
+          <input type="text" value={nodeProps.heading || ''} onChange={(e) => setProp('heading', e.target.value)} style={inputStyle} />
+        </div>
+        <div style={sectionGap}>
+          <label style={labelStyle}>Subtitle</label>
+          <textarea value={nodeProps.subtitle || ''} onChange={(e) => setProp('subtitle', e.target.value)} rows={3} style={{ ...inputStyle, resize: 'vertical' as const }} />
+        </div>
+        <div style={sectionGap}>
+          <label style={labelStyle}>Button Text</label>
+          <input type="text" value={nodeProps.buttonText || ''} onChange={(e) => setProp('buttonText', e.target.value)} style={inputStyle} />
+        </div>
+        <div style={sectionGap}>
+          <label style={labelStyle}>Button URL</label>
+          <input type="text" value={nodeProps.buttonHref || ''} onChange={(e) => setProp('buttonHref', e.target.value)} placeholder="#" style={inputStyle} />
+        </div>
+        <div style={sectionGap}>
+          <label style={labelStyle}>Secondary Button</label>
+          <input type="text" value={nodeProps.secondaryButtonText || ''} onChange={(e) => setProp('secondaryButtonText', e.target.value)} placeholder="Leave blank to hide" style={inputStyle} />
+        </div>
+      </CollapsibleSection>
+
+      <CollapsibleSection title="Background">
+        <div style={sectionGap}>
+          <label style={labelStyle}>Type</label>
+          <div style={{ display: 'flex', gap: 4 }}>
+            {(['color', 'gradient', 'image', 'video'] as const).map((t) => (
+              <button key={t} onClick={() => setProp('bgType', t)} style={btnActiveStyle(bgType === t)}>
+                {t.charAt(0).toUpperCase() + t.slice(1)}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {bgType === 'color' && (
+          <ColorPickerField label="Color" value={nodeProps.bgColor || '#1e293b'} onChange={(v) => setProp('bgColor', v)} />
+        )}
+
+        {bgType === 'gradient' && (
+          <>
+            <div style={{ display: 'flex', gap: 8, ...sectionGap }}>
+              <div style={{ flex: 1 }}>
+                <ColorPickerField label="From" value={nodeProps.bgGradientFrom || '#667eea'} onChange={(v) => setProp('bgGradientFrom', v)} />
+              </div>
+              <div style={{ flex: 1 }}>
+                <ColorPickerField label="To" value={nodeProps.bgGradientTo || '#764ba2'} onChange={(v) => setProp('bgGradientTo', v)} />
+              </div>
+            </div>
+            <div style={sectionGap}>
+              <label style={labelStyle}>Angle: {nodeProps.bgGradientAngle || 135}°</label>
+              <input type="range" min={0} max={360} value={nodeProps.bgGradientAngle || 135} onChange={(e) => setProp('bgGradientAngle', parseInt(e.target.value))} style={{ width: '100%' }} />
+            </div>
+            {/* Gradient preview */}
+            <div style={{ height: 24, borderRadius: 4, background: `linear-gradient(${nodeProps.bgGradientAngle || 135}deg, ${nodeProps.bgGradientFrom || '#667eea'}, ${nodeProps.bgGradientTo || '#764ba2'})`, border: '1px solid #3f3f46' }} />
+          </>
+        )}
+
+        {bgType === 'image' && (
+          <div style={sectionGap}>
+            <label style={labelStyle}>Background Image</label>
+            {nodeProps.bgImage && (
+              <div style={{ marginBottom: 6, borderRadius: 4, overflow: 'hidden', border: '1px solid #3f3f46', position: 'relative' }}>
+                <img src={nodeProps.bgImage} alt="" style={{ width: '100%', height: 80, objectFit: 'cover', display: 'block' }} />
+                <button onClick={() => setProp('bgImage', '')} style={{ position: 'absolute', top: 2, right: 2, width: 20, height: 20, borderRadius: '50%', background: 'rgba(0,0,0,0.7)', border: 'none', color: '#fff', cursor: 'pointer', fontSize: 10, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                  <i className="fa fa-times" />
+                </button>
+              </div>
+            )}
+            <div style={{ display: 'flex', gap: 4 }}>
+              <button onClick={() => fileInputRef.current?.click()} style={{ ...btnActiveStyle(false), flex: 1 }}>
+                <i className="fa fa-upload" style={{ marginRight: 4 }} /> Upload
+              </button>
+            </div>
+            <AssetBrowser filter="image" onSelect={(url) => setProp('bgImage', url)} />
+            <input ref={fileInputRef} type="file" accept="image/*" style={{ display: 'none' }}
+              onChange={(e) => { const f = e.target.files?.[0]; if (f) handleUpload(f, 'bgImage'); e.target.value = ''; }} />
+            <input type="text" value={nodeProps.bgImage || ''} placeholder="Or paste URL..."
+              onChange={(e) => setProp('bgImage', e.target.value)} style={{ ...smallInputStyle, width: '100%', marginTop: 4 }} />
+          </div>
+        )}
+
+        {bgType === 'video' && (
+          <div style={sectionGap}>
+            <label style={labelStyle}>Background Video</label>
+            {nodeProps.bgVideo && (
+              <div style={{ marginBottom: 6, padding: 8, background: '#18181b', borderRadius: 4, border: '1px solid #3f3f46', display: 'flex', alignItems: 'center', gap: 6 }}>
+                <i className="fa fa-film" style={{ color: '#3b82f6' }} />
+                <span style={{ fontSize: 11, color: '#e4e4e7', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                  {nodeProps.bgVideo.replace(/.*filename=/, '').replace(/^\d+_[a-f0-9]+_/, '') || nodeProps.bgVideo.split('/').pop()}
+                </span>
+                <button onClick={() => setProp('bgVideo', '')} style={{ background: 'none', border: 'none', color: '#ef4444', cursor: 'pointer', fontSize: 12 }}>
+                  <i className="fa fa-times" />
+                </button>
+              </div>
+            )}
+            <div style={{ display: 'flex', gap: 4 }}>
+              <button onClick={() => {
+                const input = document.createElement('input');
+                input.type = 'file';
+                input.accept = 'video/*';
+                input.onchange = () => { const f = input.files?.[0]; if (f) handleUpload(f, 'bgVideo'); };
+                input.click();
+              }} style={{ ...btnActiveStyle(false), flex: 1 }}>
+                <i className="fa fa-upload" style={{ marginRight: 4 }} /> Upload Video
+              </button>
+            </div>
+            <AssetBrowser filter="video" onSelect={(url) => setProp('bgVideo', url)} />
+            <input type="text" value={nodeProps.bgVideo || ''} placeholder="YouTube, Vimeo, or .mp4 URL"
+              onChange={(e) => setProp('bgVideo', e.target.value)} style={{ ...smallInputStyle, width: '100%', marginTop: 4 }} />
+          </div>
+        )}
+
+        <div style={sectionGap}>
+          <label style={labelStyle}>Overlay ({nodeProps.overlayOpacity || 0}%)</label>
+          <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
+            <input type="color" value={nodeProps.overlayColor || '#000000'} onChange={(e) => setProp('overlayColor', e.target.value)} style={{ width: 30, height: 26, border: 'none', cursor: 'pointer', background: 'none' }} />
+            <input type="range" min={0} max={100} value={nodeProps.overlayOpacity || 0} onChange={(e) => setProp('overlayOpacity', parseInt(e.target.value))} style={{ flex: 1 }} />
+          </div>
+        </div>
+      </CollapsibleSection>
+
+      <CollapsibleSection title="Colors">
+        <ColorPickerField label="Text Color" value={nodeProps.textColor || '#ffffff'} onChange={(v) => setProp('textColor', v)} />
+        <div style={{ display: 'flex', gap: 8, ...sectionGap }}>
+          <div style={{ flex: 1 }}>
+            <ColorPickerField label="Button BG" value={nodeProps.buttonBgColor || '#3b82f6'} onChange={(v) => setProp('buttonBgColor', v)} />
+          </div>
+          <div style={{ flex: 1 }}>
+            <ColorPickerField label="Button Text" value={nodeProps.buttonTextColor || '#ffffff'} onChange={(v) => setProp('buttonTextColor', v)} />
+          </div>
+        </div>
+      </CollapsibleSection>
+
+      <CollapsibleSection title="Layout">
+        <div style={sectionGap}>
+          <label style={labelStyle}>Minimum Height</label>
+          <div style={{ display: 'flex', gap: 4 }}>
+            {['300px', '400px', '500px', '600px', '100vh'].map((h) => (
+              <button key={h} onClick={() => setProp('minHeight', h)} style={btnActiveStyle(nodeProps.minHeight === h)}>
+                {h === '100vh' ? 'Full' : h}
+              </button>
+            ))}
+          </div>
+        </div>
+        <div style={sectionGap}>
+          <label style={labelStyle}>Vertical</label>
+          <div style={{ display: 'flex', gap: 4 }}>
+            {(['top', 'center', 'bottom'] as const).map((v) => (
+              <button key={v} onClick={() => setProp('verticalAlign', v)} style={btnActiveStyle(nodeProps.verticalAlign === v)}>{v}</button>
+            ))}
+          </div>
+        </div>
+        <div style={sectionGap}>
+          <label style={labelStyle}>Text Align</label>
+          <div style={{ display: 'flex', gap: 4 }}>
+            {(['left', 'center', 'right'] as const).map((a) => (
+              <button key={a} onClick={() => setProp('textAlign', a)} style={btnActiveStyle(nodeProps.textAlign === a)}>
+                <i className={`fa fa-align-${a}`} />
+              </button>
+            ))}
+          </div>
+        </div>
+      </CollapsibleSection>
+    </>
+  );
+};