@mahe_pkm/buzl-html-editor 0.1.0

package/dist/server.js

@@ -0,0 +1,1045 @@
+require('dotenv').config({ path: process.env.BUZL_ENV_FILE || require('path').join(process.cwd(), '.env') });
+
+const express = require('express');
+const path = require('path');
+const fs = require('fs');
+const crypto = require('crypto');
+const cheerio = require('cheerio');
+const multer = require('multer');
+const Anthropic = require('@anthropic-ai/sdk');
+const { compressImage } = require('./imageOptimizer');
+
+const app = express();
+const PORT = process.env.PORT || 4000;
+const HOST = process.env.HOST || '127.0.0.1';
+
+// Log all incoming requests to help debug asset loading issues
+app.use((req, res, next) => {
+  console.log(`[${new Date().toISOString().split('T')[1].slice(0, 8)}] 📥 ${req.method} ${req.url}`);
+  next();
+});
+
+// ─── PATHS ──────────────────────────────────────────────────────────────────
+// Package code and client website files live in separate locations.
+const ADMIN_DIR = path.join(__dirname, 'public');
+const SITE_ROOT = path.resolve(process.env.BUZL_SITE_ROOT || process.cwd());
+
+// ─── EVENT HANDLER PRESERVATION ─────────────────────────────────────────────
+// GrapeJS strips inline event handlers on getHtml(). We convert them to
+// data-ht-* attributes on load and back on save.
+const EVENT_ATTRS = ['onclick', 'onsubmit', 'onchange', 'oninput', 'onkeydown', 'onkeyup', 'onmouseover', 'onmouseout', 'onfocus', 'onblur', 'onscroll'];
+
+// Increase payload limit for saving full HTML pages (GrapeJS can produce
+// very large payloads when pages contain embedded base64 images/assets)
+app.use(express.json({ limit: '50mb' }));
+app.use(express.urlencoded({ extended: true, limit: '50mb' }));
+
+// ─── ADMIN ROUTES (must come before static serving) ─────────────────────────
+
+// Serve only the editor entry page from the admin source directory. Generated
+// images have their own explicit route below; server source, package files and
+// local configuration must never be downloadable through /admin.
+app.get(['/admin', '/admin/', '/admin/index.html'], (req, res) => {
+  res.sendFile(path.join(ADMIN_DIR, 'index.html'));
+});
+
+// Allow only the two explicit public asset namespaces under /admin. Without
+// this guard, the final website static route could expose admin/server.js and
+// other source files because the admin directory sits inside the site root.
+app.use('/admin', (req, res, next) => {
+  if (req.path.startsWith('/assets/') || req.path.startsWith('/generated/')) {
+    return next();
+  }
+  return res.status(404).send('Not Found');
+});
+
+// Resolve public site assets when the editor canvas requests them through
+// the admin namespace.
+app.use('/admin/assets', express.static(path.join(SITE_ROOT, 'assets')));
+
+// ─── IMAGE UPLOAD (multer) ─────────────────────────────────────────────────
+// Saves uploaded images to assets/images/ with their original filename,
+// sanitised for the web and deduped with a short suffix if needed.
+
+const IMAGES_DIR = path.join(SITE_ROOT, 'assets', 'images');
+if (!fs.existsSync(IMAGES_DIR)) fs.mkdirSync(IMAGES_DIR, { recursive: true });
+const ALLOWED_IMAGE_EXTENSIONS = new Set([
+  '.png', '.jpg', '.jpeg', '.webp', '.gif', '.avif', '.tif', '.tiff', '.svg',
+]);
+
+const upload = multer({
+  storage: multer.diskStorage({
+    destination: (req, file, cb) => cb(null, IMAGES_DIR),
+    filename: (req, file, cb) => {
+      // Sanitise: lowercase, replace spaces/special chars with hyphens, keep extension
+      const ext = path.extname(file.originalname).toLowerCase();
+      let base = path.basename(file.originalname, path.extname(file.originalname))
+        .toLowerCase()
+        .replace(/[^a-z0-9_-]/g, '-')   // only safe chars
+        .replace(/-+/g, '-')             // collapse multiple hyphens
+        .replace(/^-|-$/g, '');          // trim leading/trailing hyphens
+
+      if (!base) base = 'image';
+
+      let filename = base + ext;
+      // Dedupe: append short hash if file already exists with different content
+      if (fs.existsSync(path.join(IMAGES_DIR, filename))) {
+        const hash = crypto.createHash('md5').update(Date.now().toString()).digest('hex').slice(0, 6);
+        filename = `${base}-${hash}${ext}`;
+      }
+      cb(null, filename);
+    },
+  }),
+  limits: {
+    fileSize: 20 * 1024 * 1024, // 20 MB per file
+    files: 10,
+  },
+  fileFilter: (req, file, cb) => {
+    const ext = path.extname(file.originalname).toLowerCase();
+    if (file.mimetype.startsWith('image/') && ALLOWED_IMAGE_EXTENSIONS.has(ext)) {
+      cb(null, true);
+    } else {
+      cb(new Error('Only supported image files are allowed'));
+    }
+  },
+});
+
+// GrapeJS posts files under the field name "files" (its default uploadName),
+// but the exact field name can vary between GrapeJS versions. Using upload.any()
+// ensures compatibility with any field name and both multer v1 and v2.
+app.post('/api/upload', upload.any(), async (req, res) => {
+  try {
+    const urls = [];
+
+    for (const file of req.files || []) {
+      const ext = path.extname(file.filename).toLowerCase();
+
+      // Keep vector images as SVG; normalize all raster formats to AVIF.
+      if (ext === '.svg') {
+        const svg = fs.readFileSync(file.path, 'utf8');
+        const unsafeSvg = !/<svg(?:\s|>)/i.test(svg)
+          || /<script(?:\s|>)/i.test(svg)
+          || /<foreignObject(?:\s|>)/i.test(svg)
+          || /\son[a-z]+\s*=/i.test(svg)
+          || /javascript\s*:/i.test(svg);
+        if (unsafeSvg) {
+          fs.unlinkSync(file.path);
+          throw new Error('Unsafe SVG content was rejected');
+        }
+        urls.push(`/assets/images/${file.filename}`);
+        continue;
+      }
+
+      const baseName = path.basename(file.filename, ext);
+      const contentHash = crypto.createHash('sha256')
+        .update(fs.readFileSync(file.path))
+        .digest('hex')
+        .slice(0, 8);
+      const outputStem = path.join(IMAGES_DIR, `${baseName}-${contentHash}`);
+      const existingOutput = `${outputStem}.avif`;
+      const optimized = fs.existsSync(existingOutput)
+        ? { path: existingOutput, size: fs.statSync(existingOutput).size }
+        : await compressImage(file.path, outputStem);
+
+      if (file.path !== optimized.path && fs.existsSync(file.path)) {
+        fs.unlinkSync(file.path);
+      }
+
+      urls.push(`/assets/images/${path.basename(optimized.path)}`);
+    }
+
+    console.log(`  📤  Uploaded and optimized ${urls.length} image(s): ${urls.join(', ')}`);
+    res.json({ data: urls });
+  } catch (err) {
+    for (const file of req.files || []) {
+      if (file.path && fs.existsSync(file.path)) {
+        try { fs.unlinkSync(file.path); } catch {}
+      }
+    }
+    console.error('  ❌  Upload error:', err);
+    res.status(500).json({ error: 'Upload failed', details: err.message });
+  }
+});
+
+// ─── API: AI Text Generation (chat completion via Anthropic) ────────────────
+// Forwards chat-completion requests to Anthropic Claude API.
+// Model is configurable via ANTHROPIC_MODEL env var.
+
+const AI_MODEL = process.env.ANTHROPIC_MODEL || 'claude-sonnet-4-6';
+const AI_MAX_TOKENS = parseInt(process.env.ANTHROPIC_MAX_TOKENS || '1024', 10);
+
+// Load website context from JSON (cached at startup)
+const WEBSITE_CONTEXT_PATH = process.env.BUZL_CONTEXT_FILE || path.join(SITE_ROOT, 'website_context.json');
+let siteConfig = {};
+try {
+  siteConfig = JSON.parse(fs.readFileSync(WEBSITE_CONTEXT_PATH, 'utf8'));
+} catch (err) {
+  console.warn('  ⚠️  Could not load website_context.json:', err.message);
+}
+
+// Generate system prompt from site config
+function buildSystemPrompt() {
+  const { businessCategory, purpose, name, address, tone_and_style } = siteConfig;
+  if (!businessCategory) return '';
+  return `You are a copywriting assistant for a ${businessCategory} ${purpose || 'website'} (${name || ''}, ${address || ''}). Generate concise, compelling ${purpose || 'website'} text. Return ONLY the text content — no markdown formatting, no quotes, no explanation. Match the tone and style of ${tone_and_style || 'professional copywriting'}.`;
+}
+
+app.post('/api/ai/generate-text', async (req, res) => {
+  const apiKey = process.env.ANTHROPIC_API_KEY;
+  if (!apiKey || apiKey === 'your-anthropic-api-key-here') {
+    return res.status(500).json({
+      error: 'ANTHROPIC_API_KEY not configured',
+      details: 'Please set a valid ANTHROPIC_API_KEY in .env in the website root',
+    });
+  }
+
+  const { messages, model, max_tokens, generation_context } = req.body;
+
+  if (!messages || !Array.isArray(messages) || messages.length === 0) {
+    return res.status(400).json({
+      error: 'Missing or invalid "messages" array in request body',
+    });
+  }
+
+  try {
+    const client = new Anthropic({ apiKey });
+
+    // ── Build the final messages array ──────────────────────────────────
+    // Order: [0] website context (cached), [1] generation_context, [2..] user messages
+    // Anthropic requires alternating user/assistant roles, so we insert
+    // assistant placeholders between consecutive user messages.
+
+    const finalMessages = [];
+
+    // [0] Website context with prompt caching
+    if (siteConfig.context) {
+      finalMessages.push({
+        role: 'user',
+        content: [
+          {
+            type: 'text',
+            text: `context:\n${siteConfig.context}`,
+            cache_control: { type: 'ephemeral' },
+          },
+        ],
+      });
+    }
+
+    // [1] generation_context from frontend (e.g. "Hero section title")
+    if (generation_context) {
+      // Need assistant placeholder to avoid consecutive user messages
+      finalMessages.push({ role: 'assistant', content: 'Understood. I have the website context.' });
+      finalMessages.push({
+        role: 'user',
+        content: `generation_context: ${generation_context}`,
+      });
+    }
+
+    // [2..] User messages from the frontend
+    for (const msg of messages) {
+      // Insert assistant placeholder if last message is also user role
+      if (finalMessages.length > 0 && finalMessages[finalMessages.length - 1].role === msg.role) {
+        finalMessages.push({ role: 'assistant', content: 'Understood.' });
+      }
+      finalMessages.push(msg);
+    }
+
+    const params = {
+      model: model || AI_MODEL,
+      max_tokens: max_tokens || AI_MAX_TOKENS,
+      messages: finalMessages,
+    };
+
+    // System prompt generated from website_context.json
+    const systemPrompt = buildSystemPrompt();
+    if (systemPrompt) {
+      params.system = systemPrompt;
+    }
+
+    console.log(`  🤖  AI generate-text → model: ${params.model}, messages: ${finalMessages.length}`);
+    console.log(`  📋  AI payload:`, JSON.stringify(params, null, 2));
+
+    const response = await client.messages.create(params);
+
+    // Extract text content from the response
+    const textContent = response.content
+      .filter(block => block.type === 'text')
+      .map(block => block.text)
+      .join('\n');
+
+    res.json({
+      text: textContent,
+      model: response.model,
+      usage: response.usage,
+      stop_reason: response.stop_reason,
+    });
+
+  } catch (err) {
+    console.error('  ❌  AI generation error:', err.message);
+    const status = err.status || 500;
+    res.status(status).json({
+      error: 'AI text generation failed',
+      details: err.message,
+    });
+  }
+});
+
+// ─── API: AI Image Generation (via OpenRouter) ─────────────────────────────
+
+const { createImageGenerator } = require('./imageService');
+
+// Ensure generated images directory exists
+const GENERATED_IMAGES_DIR = path.join(SITE_ROOT, '.buzl', 'generated', 'images');
+if (!fs.existsSync(GENERATED_IMAGES_DIR)) {
+  fs.mkdirSync(GENERATED_IMAGES_DIR, { recursive: true });
+}
+
+// Lazy-init the image generator (only when first request comes in)
+let imageGenerator = null;
+function getImageGenerator() {
+  if (!imageGenerator) {
+    imageGenerator = createImageGenerator();
+  }
+  return imageGenerator;
+}
+
+// Serve generated images statically
+app.use('/admin/generated', express.static(path.join(SITE_ROOT, '.buzl', 'generated')));
+
+// ─── API: AI Image Generation – Session-based Chat Threads ─────────────────
+// In-memory session store: sessionId → { generationContext, thread[], abortController? }
+const imageSessions = new Map();
+
+/**
+ * Create a new image generation session.
+ * POST /api/ai/image-session
+ * Body: { generation_context?: string }
+ * Returns: { sessionId }
+ */
+app.post('/api/ai/image-session', (req, res) => {
+  const sessionId = crypto.randomUUID();
+  const { generation_context } = req.body || {};
+  imageSessions.set(sessionId, {
+    generationContext: generation_context || '',
+    thread: [],
+    abortController: null,
+  });
+  console.log(`  🆕  Image session created: ${sessionId}`);
+  res.json({ sessionId });
+});
+
+/**
+ * Get session thread.
+ * GET /api/ai/image-session/:id
+ * Returns: { sessionId, generationContext, thread }
+ */
+app.get('/api/ai/image-session/:id', (req, res) => {
+  const session = imageSessions.get(req.params.id);
+  if (!session) return res.status(404).json({ error: 'Session not found' });
+  res.json({
+    sessionId: req.params.id,
+    generationContext: session.generationContext,
+    thread: session.thread,
+  });
+});
+
+/**
+ * Generate image within a session (appends to thread).
+ * POST /api/ai/image-session/:id/generate
+ * Body: { prompt }
+ * Returns: { url, model, thread }
+ */
+app.post('/api/ai/image-session/:id/generate', async (req, res) => {
+  const session = imageSessions.get(req.params.id);
+  if (!session) return res.status(404).json({ error: 'Session not found' });
+
+  const { prompt } = req.body;
+  if (!prompt || typeof prompt !== 'string' || !prompt.trim()) {
+    return res.status(400).json({ error: 'Missing or invalid "prompt" in request body' });
+  }
+
+  // Append user message to thread
+  session.thread.push({ role: 'user', text: prompt.trim(), timestamp: Date.now() });
+
+  try {
+    const gen = getImageGenerator();
+
+    // Create AbortController for this request
+    const abortController = new AbortController();
+    session.abortController = abortController;
+
+    // Build enriched prompt including full conversation history
+    const enrichedPrompt = buildSessionImagePrompt(prompt.trim(), session);
+
+    console.log(`  🖼️  AI session-generate → session: ${req.params.id}, prompt: ${prompt.substring(0, 100)}`);
+
+    const result = await gen.generate(enrichedPrompt, abortController.signal);
+    session.abortController = null;
+
+    // Save AI output as an optimized AVIF.
+    const hash = crypto.createHash('md5').update(result.imageBase64.slice(0, 2048)).digest('hex').slice(0, 10);
+    const baseName = `gen-${hash}-${Date.now()}`;
+    const outputStem = path.join(GENERATED_IMAGES_DIR, baseName);
+    const buffer = Buffer.from(result.imageBase64, 'base64');
+    const optimized = await compressImage(buffer, outputStem);
+
+    const imageUrl = `/admin/generated/images/${path.basename(optimized.path)}`;
+    console.log(`  💾  AI session image saved → ${imageUrl} (${(optimized.size / 1024).toFixed(1)} KB)`);
+
+    // Append assistant message to thread
+    session.thread.push({
+      role: 'assistant',
+      url: imageUrl,
+      model: result.model,
+      size: optimized.size,
+      timestamp: Date.now(),
+    });
+
+    res.json({
+      url: imageUrl,
+      model: result.model,
+      size: optimized.size,
+      thread: session.thread,
+    });
+
+  } catch (err) {
+    session.abortController = null;
+    if (err.message === 'Request cancelled') {
+      return res.status(499).json({ error: 'Image generation cancelled', thread: session.thread });
+    }
+    console.error(`  ❌  AI session image error: ${err.message}`);
+    // Record error in thread so user can see it
+    session.thread.push({
+      role: 'error',
+      text: err.message,
+      timestamp: Date.now(),
+    });
+    res.status(500).json({
+      error: 'AI image generation failed',
+      details: err.message,
+      thread: session.thread,
+    });
+  }
+});
+
+/**
+ * Cancel in-flight generation for a session.
+ * POST /api/ai/image-session/:id/cancel
+ */
+app.post('/api/ai/image-session/:id/cancel', (req, res) => {
+  const session = imageSessions.get(req.params.id);
+  if (session && session.abortController) {
+    session.abortController.abort();
+    session.abortController = null;
+    console.log(`  🛑  Image session cancelled: ${req.params.id}`);
+  }
+  res.json({ cancelled: true });
+});
+
+/**
+ * Delete a session.
+ * DELETE /api/ai/image-session/:id
+ */
+app.delete('/api/ai/image-session/:id', (req, res) => {
+  imageSessions.delete(req.params.id);
+  res.json({ deleted: true });
+});
+
+/**
+ * Build an enriched image prompt that includes the full conversation history.
+ * This gives the model context about what was previously requested and generated.
+ */
+// Standard negative prompts to avoid common generation artefacts
+const NEGATIVE_PROMPT = [
+  'Do NOT generate multiple images, collages, split views, side-by-side comparisons, before/after, tiled images, or image grids.',
+  'Do NOT render in 3D, CGI, or unrealistic plastic-looking style.',
+  'Do NOT add text, watermarks, labels, borders, or frames to the image.',
+  'Generate exactly ONE single cohesive photographic image.',
+].join(' ');
+
+function buildSessionImagePrompt(currentPrompt, session) {
+  const parts = [];
+
+  // Site context
+  if (siteConfig.businessCategory || siteConfig.name) {
+    parts.push(`Context: This image is for a ${siteConfig.businessCategory || 'website'} called "${siteConfig.name || 'Website'}" based in ${siteConfig.city || ''}, ${siteConfig.country || ''}.`);
+  }
+  if (siteConfig.tone_and_style) {
+    parts.push(`Visual style should match: ${siteConfig.tone_and_style}.`);
+  }
+
+  // Generation context from the session (e.g. "Hero section background, 1920x600")
+  if (session.generationContext) {
+    parts.push(`Element context: ${session.generationContext}`);
+  }
+
+  // Extract aspect ratio from generation context if present
+  const arMatch = (session.generationContext || '').match(/Aspect ratio:\s*(\d+:\d+)/i);
+  if (arMatch) {
+    parts.push(`IMPORTANT: Generate the image in ${arMatch[1]} aspect ratio.`);
+  }
+
+  // Negative prompts (always included)
+  parts.push(NEGATIVE_PROMPT);
+
+  // Include prior conversation for context (skip the latest user message, we add it at the end)
+  const priorMessages = session.thread.slice(0, -1); // exclude the just-added user message
+  if (priorMessages.length > 0) {
+    const historyLines = priorMessages.map(m => {
+      if (m.role === 'user') return `User requested: "${m.text}"`;
+      if (m.role === 'assistant') return `[Image was generated successfully]`;
+      if (m.role === 'error') return `[Generation failed: ${m.text}]`;
+      return '';
+    }).filter(Boolean);
+    parts.push(`Previous conversation:\n${historyLines.join('\n')}`);
+  }
+
+  // Current request
+  parts.push(currentPrompt);
+
+  return parts.join('\n\n');
+}
+
+// ─── API: Site config (public fields only) ─────────────────────────────────
+
+app.get('/api/site-config', (req, res) => {
+  const { name, city, country, businessCategory, purpose } = siteConfig;
+  res.json({ name, city, country, businessCategory, purpose });
+});
+
+// ─── API: List editable HTML pages ──────────────────────────────────────────
+
+app.get('/api/pages', (req, res) => {
+  try {
+    const htmlFiles = sortEditablePages(findHtmlFiles(SITE_ROOT));
+    res.json({ pages: htmlFiles });
+  } catch (err) {
+    res.status(500).json({ error: 'Failed to list pages', details: err.message });
+  }
+});
+
+// ─── API: Load a page for editing ───────────────────────────────────────────
+
+app.get('/api/pages/*', (req, res) => {
+  try {
+    const filename = decodeURIComponent(req.params[0]);
+    const filePath = resolveEditableHtmlPath(filename);
+    if (!filePath) {
+      return res.status(403).json({ error: 'Access denied' });
+    }
+
+    // Security: prevent directory traversal
+    if (!isInsidePath(SITE_ROOT, filePath) || !filePath.endsWith('.html')) {
+      return res.status(403).json({ error: 'Access denied' });
+    }
+
+    // Don't allow editing admin files
+    if (isInsidePath(ADMIN_DIR, filePath)) {
+      return res.status(403).json({ error: 'Cannot edit admin files' });
+    }
+
+    if (isExcludedEditablePath(filename)) {
+      return res.status(403).json({ error: 'Cannot edit duplicate or backup pages' });
+    }
+
+    if (!fs.existsSync(filePath)) {
+      return res.status(404).json({ error: 'File not found' });
+    }
+
+    const html = fs.readFileSync(filePath, 'utf8');
+    const $ = cheerio.load(html, { decodeEntities: false });
+
+    // Extract head content (raw) for preservation on save
+    const headContent = $('head').html() || '';
+
+    // Parse head into structured resources for GrapeJS canvas
+    const cssLinks = [];       // external stylesheet URLs
+    const scriptSrcs = [];     // external script URLs
+    const inlineStyles = [];   // inline <style> blocks
+    const inlineScripts = [];  // inline <script> blocks (e.g. Tailwind config)
+
+    $('head link[rel="stylesheet"]').each((_, el) => {
+      const href = $(el).attr('href');
+      if (href) cssLinks.push(href);
+    });
+
+    $('head script').each((_, el) => {
+      const src = $(el).attr('src');
+      const type = $(el).attr('type') || '';
+      // Skip schema.org / ld+json
+      if (type === 'application/ld+json') return;
+      if (src) {
+        scriptSrcs.push(src);
+      } else {
+        const text = $(el).html() || '';
+        // Skip GTM / analytics snippets
+        if (text.includes('googletagmanager') || text.includes('gtag(')) return;
+        if (text.trim()) inlineScripts.push(text);
+      }
+    });
+
+    $('head style').each((_, el) => {
+      const id = $(el).attr('id') || '';
+      // Skip GrapeJS injected styles (handled by GrapeJS itself)
+      if (id === 'gjs-editor-styles') return;
+      const text = $(el).html() || '';
+      if (text.trim()) inlineStyles.push(text);
+    });
+
+    // Tag <button> elements that are NOT inside a <form> so GrapeJS treats
+    // them as regular components instead of the forms-plugin "button" type.
+    // The forms plugin's button type has a destructive init() that replaces
+    // children with "Send" text when it can't find a single textnode child.
+    $('button').each((_, el) => {
+      if ($(el).closest('form').length === 0) {
+        $(el).attr('data-gjs-type', 'default');
+      }
+    });
+
+    // ── Force all <details> open so GrapeJS can see/edit answer content ─
+    // Also tag <details> and <summary> with data-gjs-type so GrapeJS uses
+    // our custom component types instead of treating them as opaque blocks.
+    $('details').each((_, el) => {
+      $(el).attr('open', '');
+      $(el).attr('data-gjs-type', 'details');
+    });
+    $('summary').each((_, el) => {
+      $(el).attr('data-gjs-type', 'summary');
+
+      // Wrap bare text nodes inside <summary> in a <span> so GrapeJS
+      // can select and inline-edit the question text. Without this,
+      // GrapeJS can't enter edit mode because the <summary> has mixed
+      // content (raw text + child SVG chevron icon).
+      const children = $(el).contents();         // includes text nodes
+      children.each((_, child) => {
+        if (child.type === 'text' && child.data.trim()) {
+          $(child).wrap('<span class="summary-text" data-gjs-editable="true"></span>');
+        }
+      });
+    });
+
+    // ── Preserve inline event handlers ──────────────────────────────────
+    // GrapeJS's getHtml() strips event handler attributes (onclick, onsubmit, etc.).
+    // Convert them to data-ht-* attributes that GrapeJS preserves, then convert
+    // them back on save. This keeps theme toggles, FAQ accordions, mobile nav,
+    // WhatsApp forms, and other interactive elements working after edit+save.
+    EVENT_ATTRS.forEach(attr => {
+      $(`body [${attr}]`).each((_, el) => {
+        const value = $(el).attr(attr);
+        if (value) {
+          $(el).attr(`data-ht-${attr}`, value);
+          $(el).removeAttr(attr);
+        }
+      });
+    });
+
+    // Strip <script> tags from body before sending to GrapeJS
+    // (GrapeJS can't handle scripts; the save endpoint re-appends
+    // the original body scripts so nothing is lost)
+    $('body > script').remove();
+
+    // Extract body content for GrapeJS editing
+    const bodyContent = $('body').html() || '';
+
+    // Extract body attributes (classes, etc.)
+    const bodyAttributes = {};
+    const bodyEl = $('body')[0];
+    if (bodyEl && bodyEl.attribs) {
+      Object.assign(bodyAttributes, bodyEl.attribs);
+    }
+
+    // Extract GrapeJS-specific CSS if previously saved
+    const gjsCss = $('style#gjs-editor-styles').html() || '';
+
+    res.json({
+      filename,
+      headContent,
+      bodyContent,
+      bodyAttributes,
+      canvasResources: {
+        cssLinks,
+        scriptSrcs,
+        inlineStyles,
+        inlineScripts,
+      },
+      gjsCss,
+    });
+  } catch (err) {
+    res.status(500).json({ error: 'Failed to load page', details: err.message });
+  }
+});
+
+// ─── API: Save a page ───────────────────────────────────────────────────────
+
+app.post('/api/pages/*', async (req, res) => {
+  try {
+    const filename = decodeURIComponent(req.params[0]);
+    const filePath = resolveEditableHtmlPath(filename);
+    if (!filePath) {
+      return res.status(403).json({ error: 'Access denied' });
+    }
+
+    // Security: prevent directory traversal
+    if (!isInsidePath(SITE_ROOT, filePath) || !filePath.endsWith('.html')) {
+      return res.status(403).json({ error: 'Access denied' });
+    }
+
+    // Don't allow editing admin files
+    if (isInsidePath(ADMIN_DIR, filePath)) {
+      return res.status(403).json({ error: 'Cannot edit admin files' });
+    }
+
+    if (isExcludedEditablePath(filename)) {
+      return res.status(403).json({ error: 'Cannot edit duplicate or backup pages' });
+    }
+
+    if (!fs.existsSync(filePath)) {
+      return res.status(404).json({ error: 'File not found' });
+    }
+
+    const { htmlContent, cssContent } = req.body;
+
+    if (!htmlContent) {
+      return res.status(400).json({ error: 'Missing htmlContent in request body' });
+    }
+
+    // Read the original file to preserve the <head> section AND body scripts
+    const originalHtml = fs.readFileSync(filePath, 'utf8');
+    const $ = cheerio.load(originalHtml, { decodeEntities: false });
+
+    // Preserve <script> tags from the original body — GrapeJS's getHtml()
+    // strips all scripts, so we save them and re-append after replacing body.
+    const bodyScripts = [];
+    $('body > script').each((_, el) => {
+      bodyScripts.push($.html(el));
+    });
+
+    // Update body content with what GrapeJS provides
+    $('body').html(htmlContent);
+
+    // Re-append the original body scripts
+    if (bodyScripts.length > 0) {
+      $('body').append('\n' + bodyScripts.join('\n'));
+    }
+
+    // Extract base64 data URIs → save as files in assets/images/
+    const extractedCount = await extractAndSaveBase64Images($, SITE_ROOT);
+    if (extractedCount > 0) {
+      console.log(`  📦  Extracted ${extractedCount} base64 image(s) to assets/images/`);
+    }
+
+    // Strip data-gjs-type attributes that were added for the editor
+    // so the source HTML stays clean
+    $('body [data-gjs-type]').removeAttr('data-gjs-type');
+
+    // Strip public live-editor attributes/UI if a save comes from the page
+    // itself rather than the GrapeJS admin iframe.
+    $('body [data-buzl-public-editor-ui]').remove();
+    $('body [data-buzl-public-edit]').removeAttr('contenteditable spellcheck data-buzl-public-edit');
+    $('body').removeClass('buzl-public-editing overflow-hidden');
+    $('body .reveal.is-in').removeClass('is-in');
+    $('#siteHeader.shadow-lift').removeClass('shadow-lift');
+    $('#leadModal').addClass('hidden').removeClass('flex');
+    $('#mobileMenu').attr('hidden', '');
+
+    // ── Restore <details> open state ───────────────────────────────────
+    // The editor forces all <details> open for visibility. On save, the
+    // user controls the "open" attribute via the component trait. If the
+    // trait value is falsy / not present, remove the open attribute so the
+    // accordion starts collapsed. GrapeJS persists the `open` attribute
+    // in its HTML output only when the trait checkbox is checked.
+    // (No extra work needed — GrapeJS getHtml() includes open="" only
+    // when the attribute is set, so the trait already drives the output.)
+
+    // ── Restore inline event handlers ───────────────────────────────────
+    // Convert data-ht-onclick → onclick, data-ht-onsubmit → onsubmit, etc.
+    EVENT_ATTRS.forEach(attr => {
+      $(`body [data-ht-${attr}]`).each((_, el) => {
+        const value = $(el).attr(`data-ht-${attr}`);
+        if (value) {
+          $(el).attr(attr, value);
+          $(el).removeAttr(`data-ht-${attr}`);
+        }
+      });
+    });
+
+    // Remove any previously injected editor styles. Only keep genuinely custom
+    // GrapeJS CSS; its default reset belongs to the editor, not the live page.
+    $('style#gjs-editor-styles').remove();
+    if (shouldPersistGjsCss(cssContent)) {
+      $('head').append(`<style id="gjs-editor-styles">\n${cssContent}\n</style>`);
+    }
+
+    // Write the updated HTML back to the file
+    const updatedHtml = $.html();
+    writeHtmlWithBackup(filePath, updatedHtml);
+
+    res.json({ success: true, message: `Saved ${filename}` });
+  } catch (err) {
+    res.status(500).json({ error: 'Failed to save page', details: err.message });
+  }
+});
+
+// ─── STATIC: Serve the public website from site root ────────────────────────
+
+// Unknown API paths must not fall through to similarly named files in the
+// public website folder.
+app.use('/api', (req, res) => {
+  res.status(404).json({ error: 'API endpoint not found' });
+});
+
+// Block private development files before public static serving.
+app.use((req, res, next) => {
+  let decodedPath;
+  try {
+    decodedPath = decodeURIComponent(req.path).replace(/\\/g, '/');
+  } catch {
+    return res.status(400).send('Bad Request');
+  }
+  const segments = decodedPath.toLowerCase().split('/').filter(Boolean);
+  const blockedSegments = new Set(['admin', 'node_modules', '.git', '.buzl', 'tests', 'coverage']);
+  const blockedFiles = new Set(['.env', '.env.example', '.env_example', 'package.json', 'package-lock.json', 'server.js']);
+  const filename = segments[segments.length - 1] || '';
+  if (segments.some((segment) => segment.startsWith('.') || blockedSegments.has(segment))
+    || blockedFiles.has(filename)
+    || /\.(?:cmd|bat|sh|log|md|test\.js)$/.test(filename)) {
+    return res.status(404).send('Not Found');
+  }
+  return next();
+});
+
+app.use(express.static(SITE_ROOT, {
+  index: 'index.html',
+  extensions: ['html']
+}));
+
+// ─── HELPERS ────────────────────────────────────────────────────────────────
+
+// ── Extract base64 data URIs from HTML, save as files, update src ───────────
+// Scans all <img> and elements with style background-image for data: URIs.
+// Saves each unique image to assets/images/ and replaces the data URI with
+// the relative file path.
+function resolveEditableHtmlPath(filename) {
+  const candidate = path.resolve(SITE_ROOT, filename);
+  if (!candidate.toLowerCase().endsWith('.html') || !isInsidePath(SITE_ROOT, candidate)) return null;
+  try {
+    const realRoot = fs.realpathSync(SITE_ROOT);
+    const realCandidate = fs.realpathSync(candidate);
+    return isInsidePath(realRoot, realCandidate) ? realCandidate : null;
+  } catch {
+    return candidate;
+  }
+}
+
+function writeHtmlWithBackup(filePath, html) {
+  const relative = path.relative(SITE_ROOT, filePath);
+  const stamp = new Date().toISOString().replace(/[:.]/g, '-');
+  const backupDir = path.join(SITE_ROOT, '.buzl', 'backups', path.dirname(relative));
+  const parsed = path.parse(filePath);
+  const backupPath = path.join(backupDir, parsed.name + '-' + stamp + parsed.ext);
+  const temporaryPath = filePath + '.buzl-' + process.pid + '-' + Date.now() + '.tmp';
+  fs.mkdirSync(backupDir, { recursive: true });
+  fs.copyFileSync(filePath, backupPath);
+  try {
+    fs.writeFileSync(temporaryPath, html, 'utf8');
+    fs.renameSync(temporaryPath, filePath);
+  } finally {
+    if (fs.existsSync(temporaryPath)) fs.unlinkSync(temporaryPath);
+  }
+}
+
+function shouldPersistGjsCss(cssContent) {
+  if (!cssContent || !cssContent.trim()) return false;
+
+  const normalized = cssContent
+    .replace(/\/\*[\s\S]*?\*\//g, '')
+    .replace(/\s+/g, ' ')
+    .replace(/\s*([{}:;,])\s*/g, '$1')
+    .trim();
+
+  return normalized !== '*{box-sizing:border-box;}body{margin:0;}';
+}
+
+const MIME_TO_EXT = {
+  'image/png': '.png',
+  'image/jpeg': '.jpg',
+  'image/jpg': '.jpg',
+  'image/gif': '.gif',
+  'image/webp': '.webp',
+  'image/svg+xml': '.svg',
+  'image/avif': '.avif',
+};
+
+async function extractAndSaveBase64Images($, siteRoot) {
+  const imagesDir = path.join(siteRoot, 'assets', 'images');
+
+  // Ensure the directory exists
+  if (!fs.existsSync(imagesDir)) {
+    fs.mkdirSync(imagesDir, { recursive: true });
+  }
+
+  // Track data-hash → filename so duplicate images reuse the same file
+  const saved = new Map();
+  let count = 0;
+
+  // Regex to match data:image URIs (works for src attributes and CSS urls)
+  const dataUriRegex = /^data:(image\/[a-zA-Z+]+);base64,(.+)$/s;
+
+  // 1. Process <img> tags with data: src
+  const imageElements = $('img[src^="data:image"]').toArray();
+  for (const el of imageElements) {
+    const src = $(el).attr('src');
+    const match = src.match(dataUriRegex);
+    if (!match) continue;
+
+    const mimeType = match[1];
+    const base64Data = match[2];
+
+    // Try to derive a meaningful filename from alt, title, or data-filename
+    const nameHint = $(el).attr('data-filename')
+      || $(el).attr('alt')
+      || $(el).attr('title')
+      || '';
+
+    const filePath = await saveBase64Image(base64Data, mimeType, imagesDir, saved, nameHint);
+    if (filePath) {
+      $(el).attr('src', filePath);
+      count++;
+    }
+  }
+
+  // 2. Process any element with inline style containing base64 background-image
+  const styleElements = $('[style*="data:image"]').toArray();
+  for (const el of styleElements) {
+    let style = $(el).attr('style');
+    if (!style) continue;
+
+    const matches = [...style.matchAll(/url\(\s*['"]?(data:(image\/[a-zA-Z+]+);base64,([^'")\s]+))['"]?\s*\)/g)];
+    for (const match of matches) {
+      const filePath = await saveBase64Image(match[3], match[2], imagesDir, saved);
+      if (!filePath) continue;
+      style = style.replace(match[0], `url('${filePath}')`);
+      count++;
+    }
+    $(el).attr('style', style);
+  }
+
+  return count;
+}
+
+async function saveBase64Image(base64Data, mimeType, imagesDir, saved, nameHint = '') {
+  // Create a short hash of the content for dedup
+  const hash = crypto.createHash('md5').update(base64Data.slice(0, 2048)).digest('hex').slice(0, 8);
+
+  if (saved.has(hash)) {
+    return saved.get(hash);
+  }
+
+  // Try to build a meaningful filename from the hint
+  let baseName = '';
+  if (nameHint) {
+    baseName = nameHint.replace(/\.[a-zA-Z]{2,5}$/, '');
+    baseName = baseName
+      .toLowerCase()
+      .replace(/[^a-z0-9_-]/g, '-')
+      .replace(/-+/g, '-')
+      .replace(/^-|-$/g, '');
+  }
+
+  if (!baseName) baseName = 'img';
+
+  // Include the content hash even when a human-friendly hint exists so two
+  // different images with the same alt text never overwrite or reuse one file.
+  const outputName = `${baseName}-${hash}`;
+  const outputStem = path.join(imagesDir, outputName);
+  const avifPath = `${outputStem}.avif`;
+  const avifUrl = `/assets/images/${outputName}.avif`;
+
+  if (fs.existsSync(avifPath)) {
+    saved.set(hash, avifUrl);
+    return avifUrl;
+  }
+
+  const buffer = Buffer.from(base64Data, 'base64');
+  try {
+    const optimized = await compressImage(buffer, outputStem);
+    const optimizedUrl = `/assets/images/${path.basename(optimized.path)}`;
+    console.log(`  💾  Saved optimized base64 image → ${optimizedUrl} (${(optimized.size / 1024).toFixed(1)} KB)`);
+    saved.set(hash, optimizedUrl);
+    return optimizedUrl;
+  } catch (err) {
+    // Preserve valid source data if Sharp cannot convert a supported edge case.
+    const fallbackExt = MIME_TO_EXT[mimeType] || '.png';
+    const fallbackName = `${outputName}${fallbackExt}`;
+    const fallbackPath = path.join(imagesDir, fallbackName);
+    if (!fs.existsSync(fallbackPath)) fs.writeFileSync(fallbackPath, buffer);
+    const fallbackUrl = `/assets/images/${fallbackName}`;
+    console.warn(`  ⚠️  AVIF conversion failed; kept original image → ${fallbackUrl}: ${err.message}`);
+    saved.set(hash, fallbackUrl);
+    return fallbackUrl;
+  }
+}
+
+function findHtmlFiles(dir, base = '') {
+  const results = [];
+  const entries = fs.readdirSync(dir, { withFileTypes: true });
+  const skipDirs = new Set([
+    'admin',
+    'admin1',
+    'new',
+    'node_modules',
+    '.backups',
+    '.git',
+    'tests',
+  ]);
+
+  for (const entry of entries) {
+    const relPath = base ? `${base}/${entry.name}` : entry.name;
+
+    // Skip admin tools, duplicate exported copies, dependencies, backups, and tests.
+    if (skipDirs.has(entry.name)) {
+      continue;
+    }
+    if (entry.name.startsWith('.')) continue;
+    if (entry.name.startsWith('_backups')) continue;
+
+    if (entry.isDirectory()) {
+      results.push(...findHtmlFiles(path.join(dir, entry.name), relPath));
+    } else if (entry.isFile() && entry.name.endsWith('.html')) {
+      results.push(relPath);
+    }
+  }
+
+  return results;
+}
+
+function sortEditablePages(pages) {
+  return pages.sort((a, b) => {
+    if (a === 'index.html') return -1;
+    if (b === 'index.html') return 1;
+    return a.localeCompare(b);
+  });
+}
+
+function isExcludedEditablePath(filename) {
+  const firstSegment = filename.replace(/\\/g, '/').split('/')[0];
+  return ['admin', 'admin1', 'new', 'node_modules', 'tests'].includes(firstSegment);
+}
+
+function isInsidePath(parentDir, targetPath) {
+  const relative = path.relative(parentDir, targetPath);
+  return relative === '' || (!!relative && !relative.startsWith('..') && !path.isAbsolute(relative));
+}
+
+// ─── START ──────────────────────────────────────────────────────────────────
+
+// Only start the server when run directly (not when required by tests)
+if (require.main === module) {
+  app.listen(PORT, HOST, () => {
+    console.log(`\n  🌐  ${siteConfig.name || 'Website'}:  http://localhost:${PORT}`);
+    console.log(`  ✏️   GrapeJS Admin editor: http://localhost:${PORT}/admin`);
+    console.log(`\n  Press Ctrl+C to stop.\n`);
+  });
+}
+
+module.exports = app;