shadowdao
f3c175436a
treeToState had no resolvedName allowlist, so an AI `replace` response (scope site/page/header/footer, reaches this function via actions.deserialize with no further validation downstream) containing an unknown component could produce a state that throws at deserialize/render. Extract the core transform into standalone treeToCraftState (directly unit-testable without mounting a Craft.js Editor), route it through sanitizeAiTree for the same resolvedName allowlist + id/ROOT repair buildNodeTree already had, and fall back to the empty canvas if the tree's own root is invalid. Delegate the structural walk to the shared flattenTreeForCraft extracted in the previous commit. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
WHP Site Builder v2
A visual drag-and-drop website builder for WHP, rebuilt from the ground up with Craft.js, React 18, and TypeScript. Replaces the legacy GrapesJS-based editor.
Quick Start
npm install
npm run dev
Opens at http://localhost:5173. The editor runs in standalone mode without WHP integration.
Build and Deploy
# Build production bundle
npm run build
# Deploy to WHP
cp dist/index.html /docker/whp/web/site-builder/editor.html
cp -r dist/js/ /docker/whp/web/site-builder/js/
cp -r dist/css/ /docker/whp/web/site-builder/css/
The PHP wrapper (index.php) injects WHP_CONFIG (user session, CSRF token, site ID) into the HTML before serving.
Architecture
- Craft.js - React-based visual editor framework (no iframe, direct DOM rendering)
- Inline styles - All user content uses React CSSProperties, no class-based CSS
- Component pattern - Each component is a self-contained file with: render logic, settings panel, Craft.js config, and HTML export method
- 3-panel layout - Left (blocks/pages/layers/assets), Center (canvas with device preview), Right (styles/settings/head)
- Dark theme - CSS custom properties, Inter font, blue accent
Components (22)
| Category | Components |
|---|---|
| Layout | Container, Section, ColumnLayout (1-6 cols), BackgroundSection, HeaderZone, FooterZone |
| Basic | Heading (H1-H6), TextBlock, ButtonLink, Navbar, Footer, Divider, Spacer |
| Media | ImageBlock (upload/browse/drag-drop), VideoBlock (YouTube/Vimeo/direct/background) |
| Sections | HeroSimple, FeaturesGrid, CTASection |
| Forms | FormContainer, InputField, TextareaField, FormButton |
Features
- Visual Editor - Drag-and-drop building, real-time preview, responsive device preview (Desktop/Tablet/Mobile)
- Site Design Tokens - 17 site-wide properties (colors, fonts, radii, nav style) with Basic/Advanced tabs
- Multi-Page - Unlimited pages with shared Header and Footer across all pages
- 16 Templates - Pre-built designs across 4 categories (Business, Creative, Personal, Community)
- Asset Management - Upload, browse, drag-drop, thumbnails, server-side storage via WHP API
- HTML Export - Full document export with Google Fonts and inline styles
- Auto-Save - Saves every 30 seconds when connected to WHP
- Context Menu - Right-click for duplicate, copy, paste, move, delete
- Keyboard Shortcuts - Undo, redo, delete
- Layers Panel - Component hierarchy tree view
- Undo/Redo - Full history support
Key Files
| File | Purpose |
|---|---|
src/main.tsx |
Entry point, reads WHP_CONFIG |
src/App.tsx |
Editor + providers (EditorConfig, SiteDesign, Pages) |
src/components/resolver.ts |
Component registry (20 components) for serialization |
src/editor/EditorShell.tsx |
3-panel layout + context menu + keyboard shortcuts |
src/editor/Canvas.tsx |
Craft.js Frame with device switching |
src/state/PageContext.tsx |
Multi-page state + header/footer |
src/state/SiteDesignContext.tsx |
17 site-wide design tokens |
src/templates/definitions.ts |
16 template definitions |
src/constants/presets.ts |
Color, font, spacing presets |
src/utils/html-export.ts |
Node-tree to HTML renderer |
See CLAUDE.md for full documentation. See FEATURES.md for a complete feature list.