fix(builder): render template header/footer nested content in zone preview + export

TemplateModal's addTemplateComponents() built each template component via React.createElement(Component, comp.props) without ever passing comp.children, silently dropping every nested children array authored in templates/definitions.ts (header/footer Container > Logo/Menu/TextBlock, page Section > Heading/TextBlock/ButtonLink). The resulting Craft.js node had nodes: [], so the header/footer zone preview (ZonePreview -> exportBodyHtml) rendered as an empty strip, and published output was affected the same way. Fix converts each TemplateComponent to a SerializedTreeNode and reuses craft-tree.ts's buildNodeTree (sanitize -> flatten -> materialize) -- the same tested tree pipeline already used for AI-generated content -- instead of hand-rolling a React-element tree, since a naive nested-children fix via parseReactElement crashes any component with an internal SHELL_INNER linked canvas (Section/BackgroundSection/FormContainer) or linked columns (ColumnLayout). Also fixes two latent bugs in buildNodeTree itself, only surfaced by exercising it against a real Craft.js editor for the first time: data.type must be the actual resolved component reference (not a string or {resolvedName} object) for correct rendering, and the synthesized SHELL_INNER node needs data.name set for actions.addNodeTree's own validation. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Merge PR #7 : UI polish Phase 2
2026-07-13 06:19:26 -07:00 · 2026-07-13 04:13:17 +00:00 · 2026-07-12 21:12:09 -07:00 · 2026-07-12 20:56:21 -07:00 · 2026-07-12 20:56:11 -07:00 · 2026-07-12 20:56:05 -07:00
39 changed files with 1585 additions and 296 deletions
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Editor } from '@craftjs/core';
 import { EditorShell } from './editor/EditorShell';
+import { RenderNode } from './editor/RenderNode';
 import { componentResolver } from './components/resolver';
 import { WhpConfig } from './types';
 import { EditorConfigProvider } from './state/EditorConfigContext';
@@ -23,7 +24,7 @@ export const App: React.FC<AppProps> = ({ whpConfig }) => {
  return (
    <EditorConfigProvider config={whpConfig}>
      <SiteDesignProvider>
-        <Editor resolver={componentResolver} enabled={true}>
+        <Editor resolver={componentResolver} enabled={true} onRender={RenderNode}>
          <PageProvider>
            <SitesmithProvider>
              <EditorShell />
@@ -2,7 +2,7 @@ import React, { CSSProperties } from 'react';
 import { useNode, UserComponent } from '@craftjs/core';
 import { cssPropsToString } from '../../utils/style-helpers';
 import { useSiteDesign } from '../../state/SiteDesignContext';
-import { escapeHtml, escapeAttr, safeUrl } from '../../utils/escape';
+import { escapeHtml, escapeAttr, safeUrl, safeImageUrl } from '../../utils/escape';

 /* ---------- Types ---------- */

@@ -104,7 +104,7 @@ Logo.craft = {
  let innerHtml: string;
  if (props.type === 'image' && props.imageSrc) {
    const imgStyle = cssPropsToString({ width: props.imageWidth || '120px', height: 'auto', display: 'block' });
-    innerHtml = `<img src="${escapeAttr(safeUrl(props.imageSrc))}" alt="${escapeAttr(props.text || 'Logo')}"${imgStyle ? ` style="${imgStyle}"` : ''} />`;
+    innerHtml = `<img src="${escapeAttr(safeImageUrl(props.imageSrc))}" alt="${escapeAttr(props.text || 'Logo')}"${imgStyle ? ` style="${imgStyle}"` : ''} />`;
  } else {
    const spanStyle = cssPropsToString({
      fontWeight: props.fontWeight || '700',
@@ -2,7 +2,7 @@ import React, { CSSProperties, useState } from 'react';
 import { useNode, UserComponent } from '@craftjs/core';
 import { cssPropsToString } from '../../utils/style-helpers';
 import { useSiteDesign } from '../../state/SiteDesignContext';
-import { escapeHtml, escapeAttr, safeUrl, cssValue, scopeId } from '../../utils/escape';
+import { escapeHtml, escapeAttr, safeUrl, safeImageUrl, cssValue, scopeId } from '../../utils/escape';

 /* ---------- Types ---------- */

@@ -252,7 +252,7 @@ Navbar.craft = {
  let logoHtml: string;
  if (props.logoType === 'image' && props.logoImage) {
    const imgStyle = cssPropsToString({ width: props.logoWidth || '120px', height: 'auto', display: 'block' });
-    logoHtml = `<a href="${escapeAttr(safeUrl(logoUrl))}" style="text-decoration:none;display:flex;align-items:center;flex-shrink:0"><img src="${escapeAttr(safeUrl(props.logoImage))}" alt="${escapeAttr(props.logoText || 'Logo')}"${imgStyle ? ` style="${imgStyle}"` : ''} /></a>`;
+    logoHtml = `<a href="${escapeAttr(safeUrl(logoUrl))}" style="text-decoration:none;display:flex;align-items:center;flex-shrink:0"><img src="${escapeAttr(safeImageUrl(props.logoImage))}" alt="${escapeAttr(props.logoText || 'Logo')}"${imgStyle ? ` style="${imgStyle}"` : ''} /></a>`;
  } else {
    const logoStyle = cssPropsToString({
      fontWeight: '700',
@@ -0,0 +1,62 @@
+import { describe, test, expect, vi, beforeEach } from 'vitest';
+import React from 'react';
+import { createRoot, Root } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+
+/* ImageBlock only needs useNode from @craftjs/core. Mock it following the
+   DOM-harness pattern in src/components/basic/Footer.editguard.test.tsx (no
+   @testing-library/react in this repo) so we can render the real component
+   tree and inspect the emitted <img src> without a real <Editor>. */
+vi.mock('@craftjs/core', () => ({
+  useNode: (collect?: (node: any) => any) => {
+    const node = { events: { selected: false } };
+    return {
+      connectors: { connect: (el: any) => el, drag: (el: any) => el },
+      actions: { setProp: vi.fn() },
+      ...(collect ? collect(node) : {}),
+    };
+  },
+}));
+
+import { ImageBlock } from './ImageBlock';
+
+let container: HTMLDivElement;
+let root: Root;
+
+function render(ui: React.ReactElement) {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  act(() => {
+    root = createRoot(container);
+    root.render(ui);
+  });
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+describe('ImageBlock render falls back to the placeholder for an explicit empty src (Bug 1)', () => {
+  test('src="" (explicit, overrides the default parameter) still renders a non-empty placeholder src', () => {
+    render(<ImageBlock src="" alt="Image" />);
+    const img = container.querySelector('img')!;
+    expect(img.getAttribute('src')).not.toBe('');
+    expect(img.getAttribute('src')).toMatch(/^data:image\/svg\+xml/);
+    container.remove();
+  });
+
+  test('src=undefined (default parameter path) still renders the placeholder (unchanged behavior)', () => {
+    render(<ImageBlock alt="Image" />);
+    const img = container.querySelector('img')!;
+    expect(img.getAttribute('src')).not.toBe('');
+    expect(img.getAttribute('src')).toMatch(/^data:image\/svg\+xml/);
+    container.remove();
+  });
+
+  test('a real src is rendered unchanged', () => {
+    render(<ImageBlock src="https://example.com/photo.jpg" alt="A photo" />);
+    const img = container.querySelector('img')!;
+    expect(img.getAttribute('src')).toBe('https://example.com/photo.jpg');
+    container.remove();
+  });
+});
@@ -1,9 +1,9 @@
 import React, { CSSProperties, useCallback, useRef } from 'react';
 import { useNode, UserComponent } from '@craftjs/core';
 import { cssPropsToString } from '../../utils/style-helpers';
-import { escapeAttr, safeUrl } from '../../utils/escape';
+import { escapeAttr, safeImageUrl } from '../../utils/escape';

-const PLACEHOLDER_SRC = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300'%3E%3Cdefs%3E%3ClinearGradient id='bg' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23f1f5f9'/%3E%3Cstop offset='100%25' stop-color='%23e2e8f0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23bg)' width='400' height='300' rx='12'/%3E%3Crect x='2' y='2' width='396' height='296' rx='10' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-dasharray='8 4'/%3E%3Cg transform='translate(200,110)'%3E%3Crect x='-28' y='-28' width='56' height='56' rx='12' fill='%23cbd5e1' opacity='0.5'/%3E%3Cpath d='M-12 8 L-4 -2 L2 4 L8 -6 L16 8Z' fill='%2394a3b8'/%3E%3Ccircle cx='-6' cy='-10' r='5' fill='%2394a3b8'/%3E%3C/g%3E%3Ctext x='200' y='160' text-anchor='middle' fill='%2364748b' font-family='Inter,sans-serif' font-size='15' font-weight='500'%3EDrop image here%3C/text%3E%3Ctext x='200' y='182' text-anchor='middle' fill='%2394a3b8' font-family='Inter,sans-serif' font-size='12'%3Eor click to upload%3C/text%3E%3C/svg%3E";
+export const PLACEHOLDER_SRC = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300'%3E%3Cdefs%3E%3ClinearGradient id='bg' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23f1f5f9'/%3E%3Cstop offset='100%25' stop-color='%23e2e8f0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23bg)' width='400' height='300' rx='12'/%3E%3Crect x='2' y='2' width='396' height='296' rx='10' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-dasharray='8 4'/%3E%3Cg transform='translate(200,110)'%3E%3Crect x='-28' y='-28' width='56' height='56' rx='12' fill='%23cbd5e1' opacity='0.5'/%3E%3Cpath d='M-12 8 L-4 -2 L2 4 L8 -6 L16 8Z' fill='%2394a3b8'/%3E%3Ccircle cx='-6' cy='-10' r='5' fill='%2394a3b8'/%3E%3C/g%3E%3Ctext x='200' y='160' text-anchor='middle' fill='%2364748b' font-family='Inter,sans-serif' font-size='15' font-weight='500'%3EDrop image here%3C/text%3E%3Ctext x='200' y='182' text-anchor='middle' fill='%2394a3b8' font-family='Inter,sans-serif' font-size='12'%3Eor click to upload%3C/text%3E%3C/svg%3E";

 interface ImageBlockProps {
  src?: string;
@@ -66,7 +66,7 @@ export const ImageBlock: UserComponent<ImageBlockProps> = ({
        imgRef.current = ref;
        if (ref) connect(drag(ref));
      }}
-      src={src}
+      src={src || PLACEHOLDER_SRC}
      alt={alt || 'Image'}
      onDrop={handleDrop}
      onDragOver={handleDragOver}
@@ -95,5 +95,5 @@ ImageBlock.craft = {
  }
  const s = cssPropsToString({ display: 'block', maxWidth: '100%', ...props.style });
  const alt = props.alt ? ` alt="${escapeAttr(props.alt)}"` : ' alt=""';
-  return { html: `<img src="${escapeAttr(safeUrl(src))}"${alt}${s ? ` style="${s}"` : ''} />` };
+  return { html: `<img src="${escapeAttr(safeImageUrl(src))}"${alt}${s ? ` style="${s}"` : ''} />` };
 };
@@ -109,6 +109,15 @@ describe('ContentSlider.toHtml renders slide.imageSrc as a background-image (INT
    expect(html).not.toContain('background-image:url(');
    expect(html).toContain('background-color:#123456');
  });
+
+  test('a slide with a data:image/svg+xml imageSrc exports a non-empty background-image url (safeImageUrl, not safeUrl)', () => {
+    const svgDataUri = 'data:image/svg+xml,%3Csvg%2F%3E';
+    const slidesWithSvg = [
+      { type: 'image' as const, imageSrc: svgDataUri, heading: 'One' },
+    ];
+    const { html } = toHtml({ slides: slidesWithSvg }, '');
+    expect(html).toContain(`background-image:url('${svgDataUri}')`);
+  });
 });

 describe('ContentSlider.toHtml interval is NOT runtime-type-checked -- must be coerced before it reaches the inline <script> numeric context', () => {
@@ -1,7 +1,7 @@
 import React, { CSSProperties, useState, useEffect, useRef, useCallback } from 'react';
 import { useNode, UserComponent } from '@craftjs/core';
 import { cssPropsToString } from '../../utils/style-helpers';
-import { escapeHtml, escapeAttr, safeUrl, scopeId, cssValue } from '../../utils/escape';
+import { escapeHtml, escapeAttr, safeUrl, safeImageUrl, scopeId, cssValue } from '../../utils/escape';

 interface Slide {
  type: 'image' | 'content';
@@ -283,7 +283,7 @@ ContentSlider.craft = {
    // sink (a malicious value could break out of the style="..." attribute).
    const safeBgColor = cssValue(slide.bgColor) || '#3b82f6';
    const bgStyle = hasBgImage
-      ? `background-image:url('${escapeAttr(safeUrl(slide.imageSrc!))}');background-size:cover;background-position:center`
+      ? `background-image:url('${escapeAttr(safeImageUrl(slide.imageSrc!))}');background-size:cover;background-position:center`
      : slide.bgColor?.startsWith('linear-gradient')
        ? `background-image:${safeBgColor}`
        : `background-color:${safeBgColor}`;
@@ -0,0 +1,23 @@
+import { describe, test, expect } from 'vitest';
+import { FeaturesGrid } from './FeaturesGrid';
+
+const toHtml = (FeaturesGrid as any).toHtml;
+
+describe('FeaturesGrid.toHtml image sink uses safeImageUrl (data:image/svg+xml allowed)', () => {
+  test('feat.image as a data:image/svg+xml value emits a non-empty <img src>', () => {
+    const svgDataUri = 'data:image/svg+xml,%3Csvg%2F%3E';
+    const features = [
+      { title: 'Feature', description: 'Desc', icon: '⚡', image: svgDataUri, imageAlt: 'alt' },
+    ];
+    const { html } = toHtml({ features }, '');
+    expect(html).toContain(`<img src="${svgDataUri}"`);
+  });
+
+  test('feat.buttonUrl stays on safeUrl (data:image/svg+xml blocked as a navigation target)', () => {
+    const features = [
+      { title: 'Feature', description: 'Desc', icon: '⚡', buttonText: 'Go', buttonUrl: 'data:image/svg+xml,<svg onload=alert(1)>' },
+    ];
+    const { html } = toHtml({ features }, '');
+    expect(html).toMatch(/<a href=""/);
+  });
+});
@@ -1,7 +1,7 @@
 import React, { CSSProperties } from 'react';
 import { useNode, UserComponent } from '@craftjs/core';
 import { cssPropsToString } from '../../utils/style-helpers';
-import { escapeHtml, escapeAttr, safeUrl } from '../../utils/escape';
+import { escapeHtml, escapeAttr, safeUrl, safeImageUrl } from '../../utils/escape';

 interface FeatureItem {
  title: string;
@@ -116,7 +116,7 @@ FeaturesGrid.craft = {
  const idAttr = props.anchorId ? ` id="${escapeAttr(props.anchorId)}"` : '';
  const cards = (props.features || defaultFeatures).map((feat) => {
    const media = feat.image
-      ? `<img src="${escapeAttr(safeUrl(feat.image))}" alt="${escapeAttr(feat.imageAlt || feat.title || '')}" style="max-width:100%;height:auto;margin-bottom:16px;border-radius:8px">`
+      ? `<img src="${escapeAttr(safeImageUrl(feat.image))}" alt="${escapeAttr(feat.imageAlt || feat.title || '')}" style="max-width:100%;height:auto;margin-bottom:16px;border-radius:8px">`
      : `<div style="font-size:36px;margin-bottom:16px">${escapeHtml(feat.icon)}</div>`;
    const button = feat.buttonText
      ? `\n      <a href="${escapeAttr(safeUrl(feat.buttonUrl || '#'))}" style="display:inline-block;margin-top:16px;padding:10px 24px;background:#3b82f6;color:#fff;border-radius:8px;text-decoration:none;font-size:14px;font-weight:600">${escapeHtml(feat.buttonText)}</a>`
@@ -94,6 +94,32 @@ describe('Gallery.toHtml deterministic + unique scope ids (thread node id, no Ma
  });
 });

+describe('Gallery.toHtml default SVG placeholder images survive export (Bug 2 regression)', () => {
+  test('a default data:image/svg+xml image emits a non-empty img src, not src=""', () => {
+    const { html } = toHtml({}, ''); // no images prop -> component default SVG placeholders
+    expect(html).not.toContain('src=""');
+    expect(html).toMatch(/src="data:image\/svg\+xml[^"]*"/);
+  });
+
+  test('an explicit data:image/svg+xml gallery image src is preserved (not stripped to empty)', () => {
+    const svg = 'data:image/svg+xml,%3Csvg%2F%3E';
+    const { html } = toHtml({ images: [{ src: svg, alt: 'a' }] }, '');
+    expect(html).toContain(`src="${svg}"`);
+  });
+
+  test('lightbox data-lb-src also preserves data:image/svg+xml (still an image context)', () => {
+    const svg = 'data:image/svg+xml,%3Csvg%2F%3E';
+    const { html } = toHtml({ images: [{ src: svg, alt: 'a' }], lightbox: true }, '');
+    expect(html).toContain(`data-lb-src="${svg}"`);
+  });
+
+  test('a javascript: gallery image src still yields an empty src (safeImageUrl still blocks it)', () => {
+    const { html } = toHtml({ images: [{ src: 'javascript:alert(1)', alt: 'a' }] }, '');
+    expect(html).toContain('src=""');
+    expect(html).not.toContain('javascript:');
+  });
+});
+
 describe('Gallery.toHtml lightbox focus management (M-2)', () => {
  const props = { images: [{ src: '/a.jpg', alt: 'a' }], lightbox: true };

@@ -1,7 +1,7 @@
 import React, { CSSProperties } from 'react';
 import { useNode, UserComponent } from '@craftjs/core';
 import { cssPropsToString } from '../../utils/style-helpers';
-import { escapeHtml, escapeAttr, safeUrl, scopeId, cssValue } from '../../utils/escape';
+import { escapeHtml, escapeAttr, safeImageUrl, scopeId, cssValue } from '../../utils/escape';

 interface GalleryImage {
  src: string;
@@ -154,10 +154,10 @@ Gallery.craft = {
    // inline onclick with an interpolated src -- a single delegated click
    // listener below reads it, so a src containing a quote can't break out
    // of a per-item event-handler string.
-    const lbAttr = lightbox ? ` data-lb-src="${escapeAttr(safeUrl(img.src || ''))}" role="button" tabindex="0"` : '';
+    const lbAttr = lightbox ? ` data-lb-src="${escapeAttr(safeImageUrl(img.src || ''))}" role="button" tabindex="0"` : '';
    const itemStyle = lightbox ? 'cursor:pointer;position:relative;overflow:hidden;border-radius:8px' : 'position:relative;overflow:hidden;border-radius:8px';
    return `<div${lbAttr} style="${itemStyle}">
-      <img src="${escapeAttr(safeUrl(img.src || ''))}" alt="${escapeAttr(img.alt)}" style="width:100%;height:200px;object-fit:cover;display:block;border-radius:8px;background-color:#f1f5f9" />
+      <img src="${escapeAttr(safeImageUrl(img.src || ''))}" alt="${escapeAttr(img.alt)}" style="width:100%;height:200px;object-fit:cover;display:block;border-radius:8px;background-color:#f1f5f9" />
      ${caption}
    </div>`;
  }).join('\n    ');
@@ -1,5 +1,5 @@
 import React, { useMemo, useRef, useEffect } from 'react';
-import { Frame, Element } from '@craftjs/core';
+import { Frame, Element, useEditor } from '@craftjs/core';
 import { Container } from '../components/layout/Container';
 import { usePages } from '../state/PageContext';
 import { DeviceMode } from '../types';
@@ -8,6 +8,8 @@ import { exportBodyHtml } from '../utils/html-export';

 interface CanvasProps {
  device: DeviceMode;
+  /** Item 10: when false, applies `.guides-off` to hide the dashed drop-target guides. */
+  showGuides: boolean;
 }

 /**
@@ -81,19 +83,47 @@ const ZonePreview: React.FC<{ craftState: string | null; zone: 'header' | 'foote
    <div
      ref={containerRef}
      data-zone-preview={zone}
+      className="zone-preview-sep"
      style={{
        width: '100%',
        position: 'relative',
        pointerEvents: 'none',
        userSelect: 'none',
-        borderBottom: zone === 'header' ? '1px dashed rgba(245,158,11,0.3)' : 'none',
-        borderTop: zone === 'footer' ? '1px dashed rgba(245,158,11,0.3)' : 'none',
+        borderBottom: zone === 'header' ? '1px dashed rgba(148,163,184,0.25)' : 'none',
+        borderTop: zone === 'footer' ? '1px dashed rgba(148,163,184,0.25)' : 'none',
      }}
    />
  );
 };

-export const Canvas: React.FC<CanvasProps> = ({ device }) => {
+/**
+ * First-run hint shown over the canvas drop area once the current page's
+ * root node exists and has no children yet. Hidden the instant something
+ * is dropped in, and while a drag is in progress (so it never fights the
+ * drop-target UI). `pointer-events: none` (see .empty-canvas-hint in
+ * editor.css) keeps it from intercepting clicks/drops meant for the
+ * underlying empty canvas.
+ */
+export const EmptyCanvasHint: React.FC = () => {
+  const { isEmpty, isDragging } = useEditor((state) => {
+    const root = state.nodes['ROOT'];
+    return {
+      isEmpty: !!root && root.data.nodes.length === 0,
+      isDragging: state.events.dragged.size > 0,
+    };
+  });
+
+  if (!isEmpty || isDragging) return null;
+
+  return (
+    <div className="empty-canvas-hint">
+      <i className="fa fa-cubes" aria-hidden />
+      <span>Drag blocks from the left panel, or pick a Template to start.</span>
+    </div>
+  );
+};
+
+export const Canvas: React.FC<CanvasProps> = ({ device, showGuides }) => {
  const width = DEVICE_WIDTHS[device];
  const { isEditingHeader, isEditingFooter, headerPage, footerPage } = usePages();

@@ -110,7 +140,7 @@ export const Canvas: React.FC<CanvasProps> = ({ device }) => {
  return (
    <div className="editor-canvas">
      <div
-        className="canvas-device-frame"
+        className={`canvas-device-frame${showGuides ? '' : ' guides-off'}`}
        style={{
          width,
          maxWidth: '100%',
@@ -140,6 +170,7 @@ export const Canvas: React.FC<CanvasProps> = ({ device }) => {
          <ZonePreview craftState={headerPage.craftState} zone="header" />
        )}

+        <div style={{ position: 'relative' }}>
          <Frame>
            <Element
              is={Container}
@@ -148,6 +179,8 @@ export const Canvas: React.FC<CanvasProps> = ({ device }) => {
              style={frameStyle}
            />
          </Frame>
+          {isEditingRegularPage && <EmptyCanvasHint />}
+        </div>

        {isEditingRegularPage && (
          <ZonePreview craftState={footerPage.craftState} zone="footer" />
@@ -9,8 +9,34 @@ import { useContextMenu } from '../hooks/useContextMenu';
 import { useKeyboardShortcuts } from '../hooks/useKeyboardShortcuts';
 import { DeviceMode } from '../types';

+const SHOW_GUIDES_STORAGE_KEY = 'craft-show-guides';
+
+function loadShowGuides(): boolean {
+  try {
+    const stored = window.localStorage.getItem(SHOW_GUIDES_STORAGE_KEY);
+    return stored === null ? true : stored === '1';
+  } catch {
+    return true;
+  }
+}
+
 export const EditorShell: React.FC = () => {
  const [device, setDevice] = useState<DeviceMode>('desktop');
+  // Item 10: canvas dashed "guide" outlines toggle -- default ON, persisted
+  // so the choice survives a reload. Lifted here (rather than owned by
+  // TopBar or Canvas alone) because the toggle button lives in TopBar but
+  // the `.guides-off` class it drives is applied to Canvas's
+  // `.canvas-device-frame`, mirroring how `device` is already lifted for
+  // the same reason.
+  const [showGuides, setShowGuidesState] = useState<boolean>(loadShowGuides);
+  const setShowGuides = useCallback((next: boolean) => {
+    setShowGuidesState(next);
+    try {
+      window.localStorage.setItem(SHOW_GUIDES_STORAGE_KEY, next ? '1' : '0');
+    } catch {
+      // Storage unavailable (private browsing, etc.) -- in-memory state still works.
+    }
+  }, []);
  const { menuState, show: showMenu, hide: hideMenu } = useContextMenu();
  const { query } = useEditor();

@@ -34,11 +60,16 @@ export const EditorShell: React.FC = () => {

  return (
    <div className="editor-app">
-      <TopBar device={device} onDeviceChange={setDevice} />
+      <TopBar
+        device={device}
+        onDeviceChange={setDevice}
+        showGuides={showGuides}
+        onToggleGuides={() => setShowGuides(!showGuides)}
+      />
      <div className="editor-container">
        <LeftPanel />
        <div onContextMenu={handleContextMenu} style={{ flex: 1, display: 'flex', minWidth: 0 }}>
-          <Canvas device={device} />
+          <Canvas device={device} showGuides={showGuides} />
        </div>
        <RightPanel />
      </div>
@@ -0,0 +1,67 @@
+import { describe, test, expect, vi, beforeEach } from 'vitest';
+import React from 'react';
+import { createRoot, Root } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+
+/* Same DOM-harness pattern as Footer.editguard.test.tsx: mock @craftjs/core's
+   useEditor so we can drive editor state without a real <Editor> tree. */
+let mockNodes: Record<string, { data: { nodes: string[] } }> = {};
+let mockDraggedSize = 0;
+
+vi.mock('@craftjs/core', () => ({
+  useEditor: (collect: (state: any) => any) =>
+    collect({
+      nodes: mockNodes,
+      events: { dragged: { size: mockDraggedSize } },
+    }),
+}));
+
+import { EmptyCanvasHint } from './Canvas';
+
+let container: HTMLDivElement;
+let root: Root;
+
+function render(ui: React.ReactElement) {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  act(() => {
+    root = createRoot(container);
+    root.render(ui);
+  });
+}
+
+beforeEach(() => {
+  mockNodes = {};
+  mockDraggedSize = 0;
+});
+
+describe('EmptyCanvasHint', () => {
+  test('renders nothing before ROOT has mounted (no root node yet)', () => {
+    render(<EmptyCanvasHint />);
+    expect(container.querySelector('.empty-canvas-hint')).toBeNull();
+    container.remove();
+  });
+
+  test('renders the hint once ROOT exists with zero children', () => {
+    mockNodes = { ROOT: { data: { nodes: [] } } };
+    render(<EmptyCanvasHint />);
+    expect(container.querySelector('.empty-canvas-hint')).not.toBeNull();
+    expect(container.textContent).toContain('Drag blocks from the left panel');
+    container.remove();
+  });
+
+  test('hides once the page has content', () => {
+    mockNodes = { ROOT: { data: { nodes: ['node-1'] } } };
+    render(<EmptyCanvasHint />);
+    expect(container.querySelector('.empty-canvas-hint')).toBeNull();
+    container.remove();
+  });
+
+  test('hides while a drag is in progress, even on an empty root', () => {
+    mockNodes = { ROOT: { data: { nodes: [] } } };
+    mockDraggedSize = 1;
+    render(<EmptyCanvasHint />);
+    expect(container.querySelector('.empty-canvas-hint')).toBeNull();
+    container.remove();
+  });
+});
@@ -0,0 +1,169 @@
+import { describe, test, expect, vi, beforeEach } from 'vitest';
+import React from 'react';
+import { createRoot, Root } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+
+/* Same DOM-harness pattern as Footer.editguard.test.tsx: mock @craftjs/core
+   so RenderNode (the <Editor onRender> override) can be driven without a
+   real Editor tree. document.body doubles as the portal target, same as
+   the component itself uses. */
+let mockNode: {
+  id: string;
+  selected: boolean;
+  hovered: boolean;
+  dom: HTMLElement | null;
+  displayName: string;
+  parent: string | null;
+  isCanvas: boolean;
+};
+const selectNodeSpy = vi.fn();
+
+vi.mock('@craftjs/core', () => ({
+  useEditor: () => ({ actions: { selectNode: selectNodeSpy } }),
+  useNode: (collect?: (node: any) => any) => {
+    const node = {
+      events: { selected: mockNode.selected, hovered: mockNode.hovered },
+      dom: mockNode.dom,
+      data: {
+        custom: {},
+        displayName: mockNode.displayName,
+        parent: mockNode.parent,
+        isCanvas: mockNode.isCanvas,
+      },
+    };
+    return { id: mockNode.id, ...(collect ? collect(node) : {}) };
+  },
+}));
+
+import { RenderNode } from './RenderNode';
+
+let container: HTMLDivElement;
+let root: Root;
+let nodeDom: HTMLElement;
+
+function render(ui: React.ReactElement) {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  act(() => {
+    root = createRoot(container);
+    root.render(ui);
+  });
+}
+
+beforeEach(() => {
+  nodeDom = document.createElement('div');
+  document.body.appendChild(nodeDom);
+  mockNode = {
+    id: 'node-1',
+    selected: false,
+    hovered: false,
+    dom: nodeDom,
+    displayName: 'Heading',
+    parent: 'ROOT',
+    isCanvas: false,
+  };
+  selectNodeSpy.mockClear();
+});
+
+const rendered = <span data-testid="inner">hello</span>;
+
+describe('RenderNode (Editor onRender override)', () => {
+  test('passes render through untouched when not selected', () => {
+    render(<RenderNode render={rendered} />);
+    expect(container.querySelector('[data-testid="inner"]')).not.toBeNull();
+    expect(document.querySelector('.component-indicator')).toBeNull();
+    container.remove();
+    nodeDom.remove();
+  });
+
+  test('shows the badge with the displayName when selected', () => {
+    mockNode.selected = true;
+    render(<RenderNode render={rendered} />);
+    const badge = document.querySelector('.component-indicator');
+    expect(badge).not.toBeNull();
+    expect(badge?.textContent).toContain('Heading');
+    container.remove();
+    nodeDom.remove();
+    document.querySelector('.component-indicator')?.remove();
+  });
+
+  test('never shows a badge for ROOT even if "selected"', () => {
+    mockNode.selected = true;
+    mockNode.id = 'ROOT';
+    render(<RenderNode render={rendered} />);
+    expect(document.querySelector('.component-indicator')).toBeNull();
+    container.remove();
+    nodeDom.remove();
+  });
+
+  test('chevron click selects the parent node', () => {
+    mockNode.selected = true;
+    mockNode.parent = 'parent-42';
+    render(<RenderNode render={rendered} />);
+    const chevron = document.querySelector('.component-indicator-parent-btn') as HTMLElement;
+    expect(chevron).not.toBeNull();
+    act(() => {
+      chevron.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
+    });
+    expect(selectNodeSpy).toHaveBeenCalledWith('parent-42');
+    container.remove();
+    nodeDom.remove();
+    document.querySelector('.component-indicator')?.remove();
+  });
+
+  test('no chevron when there is no parent', () => {
+    mockNode.selected = true;
+    mockNode.parent = null;
+    render(<RenderNode render={rendered} />);
+    expect(document.querySelector('.component-indicator-parent-btn')).toBeNull();
+    container.remove();
+    nodeDom.remove();
+    document.querySelector('.component-indicator')?.remove();
+  });
+
+  test('tags a droppable (isCanvas) node dom with data-craft-node', () => {
+    mockNode.isCanvas = true;
+    render(<RenderNode render={rendered} />);
+    expect(nodeDom.hasAttribute('data-craft-node')).toBe(true);
+    container.remove();
+    nodeDom.remove();
+  });
+
+  test('does not tag a non-canvas (leaf) node dom with data-craft-node', () => {
+    mockNode.isCanvas = false;
+    render(<RenderNode render={rendered} />);
+    expect(nodeDom.hasAttribute('data-craft-node')).toBe(false);
+    container.remove();
+    nodeDom.remove();
+  });
+
+  test('never tags ROOT with data-craft-node even though ROOT is a canvas', () => {
+    mockNode.id = 'ROOT';
+    mockNode.isCanvas = true;
+    render(<RenderNode render={rendered} />);
+    expect(nodeDom.hasAttribute('data-craft-node')).toBe(false);
+    container.remove();
+    nodeDom.remove();
+  });
+
+  test('tags the dom with data-craft-hovered when the Craft hovered event is set (Layers panel hover sync)', () => {
+    mockNode.hovered = true;
+    render(<RenderNode render={rendered} />);
+    expect(nodeDom.hasAttribute('data-craft-hovered')).toBe(true);
+    container.remove();
+    nodeDom.remove();
+  });
+
+  test('removes data-craft-hovered once the hovered event clears', () => {
+    mockNode.hovered = true;
+    render(<RenderNode render={rendered} />);
+    expect(nodeDom.hasAttribute('data-craft-hovered')).toBe(true);
+    mockNode.hovered = false;
+    act(() => {
+      root.render(<RenderNode render={rendered} />);
+    });
+    expect(nodeDom.hasAttribute('data-craft-hovered')).toBe(false);
+    container.remove();
+    nodeDom.remove();
+  });
+});
@@ -0,0 +1,116 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { useEditor, useNode } from '@craftjs/core';
+
+interface RenderNodeProps {
+  render: React.ReactElement;
+}
+
+/**
+ * Craft.js `<Editor onRender>` override -- wraps every node's render output.
+ * For the currently-selected node it portals a floating badge (component
+ * displayName + a "select parent" chevron) positioned over the node's real
+ * DOM element. Non-selected nodes (the overwhelming majority) and ROOT pass
+ * straight through as a Fragment, so this never touches layout, never
+ * appears in `toHtml` export (that walks the Craft node tree, not this
+ * portal), and doesn't wrap every node in extra DOM.
+ *
+ * It also imperatively tags each node's real DOM element with two
+ * editor-only data attributes (never part of `toHtml` export, which walks
+ * the Craft node tree, not the live DOM):
+ *  - `data-craft-node`: set on actual Craft.js droppable containers
+ *    (`node.data.isCanvas`, excluding ROOT). `editor.css`'s dashed "guide"
+ *    outlines target this attribute instead of blanket tag selectors
+ *    (div/section/header/...), so a component's own internal wrapper markup
+ *    no longer picks up a guide outline it isn't a real drop target for.
+ *  - `data-craft-hovered`: mirrors `node.events.hovered` (Craft's hover
+ *    event set). Craft's own `connectors.connect()` (called by every
+ *    component) wires a native mouseover/mouseleave listener to this event
+ *    internally, so a plain mouse hover over any connected node sets it --
+ *    this attribute is a real-mouse-hover canvas highlight. (The Layers
+ *    panel's row-hover -> canvas-highlight sync, item 12, uses a sibling
+ *    `data-layer-hovered` attribute written directly by LayersPanel.tsx
+ *    instead of this event, since the action that would drive it here
+ *    -- `actions.setNodeEvent` -- is stripped from the public `useEditor()`
+ *    API at runtime.) editor.css matches both attributes for the same
+ *    outline and suppresses both under `.guides-off`.
+ */
+export const RenderNode: React.FC<RenderNodeProps> = ({ render }) => {
+  const { actions } = useEditor();
+  const { id, isSelected, dom, name, parent, isCanvas, isHovered } = useNode((node) => ({
+    isSelected: node.events.selected,
+    isHovered: node.events.hovered,
+    dom: node.dom,
+    name: (node.data.props?.aiName as string) || node.data.displayName,
+    parent: node.data.parent,
+    isCanvas: node.data.isCanvas,
+  }));
+
+  const badgeRef = useRef<HTMLDivElement>(null);
+  const active = isSelected && id !== 'ROOT' && !!dom;
+
+  const updatePosition = useCallback(() => {
+    if (!dom || !badgeRef.current) return;
+    const rect = dom.getBoundingClientRect();
+    const badgeHeight = 22;
+    badgeRef.current.style.left = `${Math.max(rect.left, 0)}px`;
+    badgeRef.current.style.top = `${Math.max(rect.top - badgeHeight, 0)}px`;
+  }, [dom]);
+
+  useEffect(() => {
+    if (!active) return;
+    updatePosition();
+    window.addEventListener('resize', updatePosition);
+    document.addEventListener('scroll', updatePosition, true);
+    return () => {
+      window.removeEventListener('resize', updatePosition);
+      document.removeEventListener('scroll', updatePosition, true);
+    };
+  }, [active, updatePosition]);
+
+  useEffect(() => {
+    if (!dom) return;
+    if (isCanvas && id !== 'ROOT') {
+      dom.setAttribute('data-craft-node', '');
+    } else {
+      dom.removeAttribute('data-craft-node');
+    }
+  }, [dom, isCanvas, id]);
+
+  useEffect(() => {
+    if (!dom) return;
+    if (isHovered) {
+      dom.setAttribute('data-craft-hovered', '');
+    } else {
+      dom.removeAttribute('data-craft-hovered');
+    }
+  }, [dom, isHovered]);
+
+  if (!active) return <>{render}</>;
+
+  return (
+    <>
+      {render}
+      {createPortal(
+        <div ref={badgeRef} className="component-indicator" style={{ position: 'fixed' }}>
+          <span>{name}</span>
+          {parent && (
+            <button
+              type="button"
+              className="component-indicator-parent-btn"
+              title="Select parent"
+              aria-label={`Select parent of ${name}`}
+              onMouseDown={(e) => {
+                e.stopPropagation();
+                actions.selectNode(parent);
+              }}
+            >
+              <i className="fa fa-chevron-up" aria-hidden />
+            </button>
+          )}
+        </div>,
+        document.body
+      )}
+    </>
+  );
+};
@@ -16,6 +16,8 @@ interface ContextMenuProps {

 interface MenuItem {
  label: string;
+  /** Font Awesome icon suffix (e.g. 'magic' for fa-magic), rendered before the label. */
+  icon?: string;
  shortcut?: string;
  action: () => void;
  danger?: boolean;
@@ -189,25 +191,29 @@ export const ContextMenu: React.FC<ContextMenuProps> = ({

  const items: MenuItem[] = [
    {
-      label: '✨ Ask Sitesmith',
+      label: 'Ask Sitesmith',
+      icon: 'magic',
      action: askSitesmith,
      disabled: isRoot,
      dividerAfter: true,
    },
    {
      label: 'Duplicate',
+      icon: 'clone',
      shortcut: 'Ctrl+D',
      action: duplicate,
      disabled: isRoot,
    },
    {
      label: 'Copy',
+      icon: 'files-o',
      shortcut: 'Ctrl+C',
      action: copyNode,
      disabled: isRoot,
    },
    {
      label: 'Paste',
+      icon: 'clipboard',
      shortcut: 'Ctrl+V',
      action: pasteNode,
      disabled: !getClipboardNodeId(),
@@ -215,22 +221,26 @@ export const ContextMenu: React.FC<ContextMenuProps> = ({
    },
    {
      label: 'Move Up',
+      icon: 'arrow-up',
      action: moveUp,
      disabled: isRoot,
    },
    {
      label: 'Move Down',
+      icon: 'arrow-down',
      action: moveDown,
      disabled: isRoot,
    },
    {
      label: 'Select Parent',
+      icon: 'level-up',
      action: selectParent,
      disabled: isRoot,
      dividerAfter: true,
    },
    {
      label: 'Delete',
+      icon: 'trash',
      shortcut: 'Del',
      action: deleteNode,
      danger: true,
@@ -291,7 +301,10 @@ export const ContextMenu: React.FC<ContextMenuProps> = ({
              (e.target as HTMLElement).style.background = 'transparent';
            }}
          >
-            <span>{item.label}</span>
+            <span>
+              {item.icon && <i className={`fa fa-${item.icon}`} style={{ marginRight: 6, width: 12 }} />}
+              {item.label}
+            </span>
            {item.shortcut && (
              <span
                style={{
@@ -107,23 +107,39 @@ export const AssetsPanel: React.FC = () => {
        {loading ? 'Uploading...' : 'Upload File'}
      </button>

-      {/* Drop zone */}
+      {/* Drop zone -- a single element that doubles as the empty state.
+          Previously this was a small always-visible dropzone PLUS a
+          separate italic "No assets uploaded yet" line stacked underneath
+          it when empty; merged into one tall dropzone (icon + copy,
+          click-or-drag) so the empty state isn't two redundant messages.
+          Once assets exist it collapses back to a slim persistent drop
+          target above the grid. */}
      <div
        onDrop={handleDrop}
        onDragOver={handleDragOver}
        onDragLeave={handleDragLeave}
+        {...(assets.length === 0 ? clickableProps(() => fileInputRef.current?.click()) : {})}
        style={{
-          padding: 20,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: 8,
+          padding: assets.length === 0 ? '36px 20px' : 16,
          border: `2px dashed ${isDragOver ? 'var(--color-accent)' : 'var(--color-border)'}`,
          borderRadius: 'var(--radius-md)',
          background: isDragOver ? 'var(--color-accent-subtle)' : 'transparent',
          textAlign: 'center',
          color: isDragOver ? 'var(--color-accent)' : 'var(--color-text-dim)',
          fontSize: 11,
+          cursor: assets.length === 0 ? 'pointer' : 'default',
          transition: 'all var(--transition-fast)',
        }}
      >
-        Drop files here to upload
+        {assets.length === 0 && (
+          <i className="fa fa-cloud-upload" aria-hidden style={{ fontSize: 28, opacity: 0.5 }} />
+        )}
+        {assets.length === 0 ? 'Drag images here or click to upload' : 'Drop files here to upload'}
      </div>

      {/* Error message */}
@@ -143,20 +159,6 @@ export const AssetsPanel: React.FC = () => {
      )}

      {/* Asset grid */}
-      {assets.length === 0 && !loading && (
-        <div
-          style={{
-            textAlign: 'center',
-            padding: 20,
-            color: 'var(--color-text-dim)',
-            fontSize: 12,
-            fontStyle: 'italic',
-          }}
-        >
-          No assets uploaded yet
-        </div>
-      )}
-
      <div
        style={{
          display: 'grid',
@@ -296,7 +298,7 @@ export const AssetsPanel: React.FC = () => {
                    cursor: 'pointer',
                  }}
                >
-                  &#10005;
+                  <i className="fa fa-times" aria-hidden />
                </button>
              </div>
            ) : (
@@ -328,7 +330,7 @@ export const AssetsPanel: React.FC = () => {
                onMouseEnter={(e) => { (e.target as HTMLElement).style.opacity = '1'; }}
                onMouseLeave={(e) => { (e.target as HTMLElement).style.opacity = '0.7'; }}
              >
-                &#10005;
+                <i className="fa fa-times" aria-hidden />
              </button>
            )}
          </div>
@@ -123,7 +123,7 @@ const categories: CategoryDef[] = [
    label: 'Media',
    blocks: [
      { id: 'image', label: 'Image', icon: 'fa-image',
-        component: <ImageBlock src="" alt="Image" style={{ maxWidth: '100%', height: 'auto', display: 'block', borderRadius: '8px' }} /> },
+        component: <ImageBlock alt="Image" style={{ maxWidth: '100%', height: 'auto', display: 'block', borderRadius: '8px' }} /> },
      { id: 'video', label: 'Video', icon: 'fa-play-circle',
        component: <VideoBlock videoUrl="" isBackground={false} /> },
      { id: 'map-embed', label: 'Map', icon: 'fa-map-marker',
@@ -1,14 +1,74 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { useEditor } from '@craftjs/core';
 import { clickableProps } from '../../utils/a11y';

+/**
+ * Per-type icon lookup keyed by the component's `craft.displayName` (the
+ * same human label `LayerNode` already resolves and shows as the row text).
+ * Mirrors the icon choices in `BlocksPanel.tsx` where a block exists for the
+ * type; the remaining entries (Navbar, Container, Section, Columns,
+ * Background Section, Map, Video, Image, form fields, and the richer
+ * section blocks not draggable from the Basic/Sections categories) get a
+ * sensible FA4 icon of their own. Unknown/future types fall back to
+ * `DEFAULT_ICON`.
+ */
+const TYPE_ICONS: Record<string, string> = {
+  // Layout
+  Container: 'fa-square-o',
+  Section: 'fa-window-maximize',
+  Columns: 'fa-th-large',
+  'Background Section': 'fa-picture-o',
+  // Basic
+  Heading: 'fa-header',
+  Text: 'fa-paragraph',
+  Button: 'fa-square',
+  Logo: 'fa-bookmark',
+  Menu: 'fa-bars',
+  Navbar: 'fa-bars',
+  Footer: 'fa-window-minimize',
+  Divider: 'fa-minus',
+  Spacer: 'fa-arrows-v',
+  Icon: 'fa-star',
+  'Star Rating': 'fa-star-half-o',
+  'Social Links': 'fa-share-alt',
+  'Search Bar': 'fa-search',
+  HTML: 'fa-code',
+  // Media
+  Image: 'fa-image',
+  Video: 'fa-play-circle',
+  Map: 'fa-map-marker',
+  // Sections
+  Hero: 'fa-star-o',
+  'Features Grid': 'fa-th-large',
+  'CTA Section': 'fa-bullhorn',
+  'Call to Action': 'fa-bullhorn',
+  Countdown: 'fa-clock-o',
+  Testimonials: 'fa-quote-left',
+  'Content Slider': 'fa-sliders',
+  'Number Counter': 'fa-sort-numeric-asc',
+  Accordion: 'fa-list',
+  Tabs: 'fa-folder-o',
+  'Pricing Table': 'fa-usd',
+  Gallery: 'fa-th',
+  // Forms
+  Form: 'fa-wpforms',
+  Input: 'fa-i-cursor',
+  Textarea: 'fa-align-left',
+  'Submit Button': 'fa-paper-plane',
+  'Contact Form': 'fa-envelope',
+  'Subscribe Form': 'fa-paper-plane',
+};
+
+const DEFAULT_ICON = 'fa-cube';
+const ROOT_ICON = 'fa-desktop';
+
 interface LayerNodeProps {
  nodeId: string;
  depth: number;
 }

 const LayerNode: React.FC<LayerNodeProps> = ({ nodeId, depth }) => {
-  const { node, selectedId, actions } = useEditor((state) => {
+  const { node, selectedId, actions, query } = useEditor((state) => {
    const n = state.nodes[nodeId];
    const selectedIds = state.events.selected;
    const selId = selectedIds ? Array.from(selectedIds)[0] : null;
@@ -18,28 +78,76 @@ const LayerNode: React.FC<LayerNodeProps> = ({ nodeId, depth }) => {
    };
  });

+  const isSelected = selectedId === nodeId;
+
  const handleActivate = useCallback(() => {
    actions.selectNode(nodeId);
  }, [actions, nodeId]);

+  // Layers-panel <-> canvas hover sync (Item 12): tags the target node's own
+  // DOM element (found via `query`) with `data-layer-hovered` directly.
+  // `RenderNode.tsx` mirrors Craft's *own* `hovered` node event onto
+  // `data-craft-hovered` for the (separate, mouse-driven) canvas hover
+  // outline -- editor.css's rule matches both attributes. This panel can't
+  // reuse that path: `setNodeEvent` is a private action that `useEditor()`
+  // strips from its `actions` return at runtime (see
+  // @craftjs/core/dist/esm's `xe()` action stripper, not just its TypeScript
+  // type), so calling it here throws. Writing our own attribute directly is
+  // a supported, version-stable way to get the same highlight.
+  const hoveredDomRef = useRef<HTMLElement | null>(null);
+
+  const handleMouseEnter = useCallback(
+    (e: React.MouseEvent<HTMLElement> | React.FocusEvent<HTMLElement>) => {
+      const dom = query.node(nodeId).get()?.dom;
+      if (dom) {
+        dom.setAttribute('data-layer-hovered', '');
+        hoveredDomRef.current = dom;
+      }
+      if (!isSelected) {
+        (e.currentTarget as HTMLElement).style.background = 'var(--color-bg-hover)';
+      }
+    },
+    [query, nodeId, isSelected],
+  );
+
+  const handleMouseLeave = useCallback(
+    (e: React.MouseEvent<HTMLElement> | React.FocusEvent<HTMLElement>) => {
+      hoveredDomRef.current?.removeAttribute('data-layer-hovered');
+      hoveredDomRef.current = null;
+      if (!isSelected) {
+        (e.currentTarget as HTMLElement).style.background = 'transparent';
+      }
+    },
+    [isSelected],
+  );
+
+  // Safety net: if this row unmounts (e.g. the user switches away from the
+  // Layers tab, or the tree re-shuffles) while still hovered, clear the
+  // attribute so it doesn't get stuck highlighted on the canvas forever.
+  useEffect(() => {
+    return () => {
+      hoveredDomRef.current?.removeAttribute('data-layer-hovered');
+      hoveredDomRef.current = null;
+    };
+  }, []);
+
  if (!node) return null;

-  const isSelected = selectedId === nodeId;
-  const nodeType = node.data.type;
-  const resolvedName = typeof nodeType === 'object' && nodeType !== null && 'resolvedName' in nodeType
-    ? (nodeType as any).resolvedName
-    : typeof nodeType === 'string' ? nodeType : undefined;
  const displayName = (node.data.props?.aiName as string) || node.data.displayName || (node.data.type as any)?.resolvedName || 'Node';
  const childNodeIds: string[] = node.data.nodes || [];
  const linkedNodeIds: string[] = Object.values(node.data.linkedNodes || {}) as string[];
  const allChildren = [...childNodeIds, ...linkedNodeIds];
  const isRoot = nodeId === 'ROOT';
+  const icon = isRoot ? ROOT_ICON : TYPE_ICONS[displayName] || DEFAULT_ICON;

  return (
    <div>
      <div
        {...clickableProps(handleActivate)}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
        style={{
+          position: 'relative',
          display: 'flex',
          alignItems: 'center',
          padding: '5px 8px',
@@ -56,30 +164,53 @@ const LayerNode: React.FC<LayerNodeProps> = ({ nodeId, depth }) => {
          textOverflow: 'ellipsis',
          userSelect: 'none',
        }}
-        onMouseEnter={(e) => {
-          if (!isSelected) {
-            (e.currentTarget as HTMLElement).style.background = 'var(--color-bg-hover)';
-          }
-        }}
-        onMouseLeave={(e) => {
-          if (!isSelected) {
-            (e.currentTarget as HTMLElement).style.background = 'transparent';
-          }
-        }}
+        onFocus={handleMouseEnter}
+        onBlur={handleMouseLeave}
      >
-        {/* Indentation indicator */}
-        {allChildren.length > 0 && (
-          <span style={{ marginRight: 4, fontSize: 8, color: 'var(--color-text-dim)' }}>
+        {/* Indent guides: one vertical line per ancestor depth level,
+            aligned under each ancestor's disclosure/icon column so nested
+            rows read as a tree instead of a flat, ever-further-indented list. */}
+        {Array.from({ length: depth }).map((_, level) => (
+          <span
+            key={level}
+            aria-hidden="true"
+            style={{
+              position: 'absolute',
+              left: `${8 + level * 16 + 4}px`,
+              top: 0,
+              bottom: 0,
+              width: 1,
+              background: 'var(--color-border)',
+            }}
+          />
+        ))}
+
+        {/* Indentation/disclosure indicator */}
+        {allChildren.length > 0 ? (
+          <span style={{ marginRight: 4, fontSize: 8, color: 'var(--color-text-dim)', flexShrink: 0 }}>
            &#9660;
          </span>
-        )}
-        {allChildren.length === 0 && (
-          <span style={{ marginRight: 4, fontSize: 8, color: 'transparent' }}>
+        ) : (
+          <span style={{ marginRight: 4, fontSize: 8, color: 'transparent', flexShrink: 0 }}>
            &#9660;
          </span>
        )}

-        {/* Component type icon and name */}
+        {/* Component type icon */}
+        <i
+          className={`fa ${icon}`}
+          aria-hidden="true"
+          style={{
+            marginRight: 6,
+            fontSize: 11,
+            width: 12,
+            textAlign: 'center',
+            flexShrink: 0,
+            color: isSelected ? 'var(--color-accent)' : 'var(--color-text-dim)',
+          }}
+        />
+
+        {/* Name */}
        <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
          {isRoot ? 'Canvas (Root)' : displayName}
        </span>
@@ -58,18 +58,23 @@ export const PagesPanel: React.FC = () => {
      .replace(/-+/g, '-');
  };

-  /* ---------- Zone button style ---------- */
-  const zoneButtonStyle = (isActive: boolean): React.CSSProperties => ({
+  /* ---------- Zone row style ----------
+   * Same neutral surface language as the page-list rows below (Item 11) --
+   * header/footer are just two more items in the tree, not a louder,
+   * differently-colored category. The active/editing state reuses the same
+   * accent-outline treatment the page list already uses for the active page,
+   * so there's one consistent "this is what's currently open" affordance. */
+  const zoneRowStyle = (isActive: boolean): React.CSSProperties => ({
    display: 'flex',
    alignItems: 'center',
    gap: 8,
    width: '100%',
-    padding: '10px 12px',
+    padding: '7px 10px',
    fontSize: 12,
-    fontWeight: 600,
-    color: isActive ? '#f59e0b' : '#fbbf24',
-    background: isActive ? 'rgba(245, 158, 11, 0.15)' : 'rgba(245, 158, 11, 0.06)',
-    border: `1px solid ${isActive ? 'rgba(245, 158, 11, 0.5)' : 'rgba(245, 158, 11, 0.2)'}`,
+    fontWeight: isActive ? 600 : 500,
+    color: isActive ? 'var(--color-accent)' : 'var(--color-text-muted)',
+    background: isActive ? 'var(--color-accent-subtle)' : 'var(--color-bg-elevated)',
+    border: `1px solid ${isActive ? 'var(--color-accent)' : 'var(--color-border)'}`,
    borderRadius: 'var(--radius-md)',
    cursor: 'pointer',
    transition: 'all var(--transition-fast)',
@@ -78,57 +83,35 @@ export const PagesPanel: React.FC = () => {

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-      {/* Header/Footer zone buttons */}
+      {/* Header/Footer zone rows */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 8 }}>
        <button
          onClick={editHeader}
-          style={zoneButtonStyle(isEditingHeader)}
+          className="zone-row"
+          style={zoneRowStyle(isEditingHeader)}
+          title="Appears on all pages"
        >
-          <i className="fa fa-window-maximize" style={{ fontSize: 13 }} />
-          <div style={{ flex: 1 }}>
-            <div>Edit Header</div>
-            <div style={{ fontSize: 10, opacity: 0.7, fontWeight: 400, marginTop: 1 }}>
-              Appears on all pages
-            </div>
-          </div>
-          {isEditingHeader && (
-            <span style={{
-              fontSize: 9,
-              fontWeight: 700,
-              textTransform: 'uppercase',
-              letterSpacing: '0.5px',
-              background: 'rgba(245, 158, 11, 0.25)',
-              padding: '2px 6px',
-              borderRadius: 'var(--radius-sm)',
-            }}>
-              Editing
-            </span>
+          <i className="fa fa-window-maximize" style={{ fontSize: 12, width: 14, textAlign: 'center', flexShrink: 0 }} />
+          <span style={{ flex: 1 }}>Header</span>
+          {isEditingHeader ? (
+            <i className="fa fa-check-circle" style={{ fontSize: 11 }} aria-hidden />
+          ) : (
+            <i className="fa fa-pencil zone-row-pencil" style={{ fontSize: 11 }} aria-hidden />
          )}
        </button>

        <button
          onClick={editFooter}
-          style={zoneButtonStyle(isEditingFooter)}
+          className="zone-row"
+          style={zoneRowStyle(isEditingFooter)}
+          title="Appears on all pages"
        >
-          <i className="fa fa-window-minimize" style={{ fontSize: 13 }} />
-          <div style={{ flex: 1 }}>
-            <div>Edit Footer</div>
-            <div style={{ fontSize: 10, opacity: 0.7, fontWeight: 400, marginTop: 1 }}>
-              Appears on all pages
-            </div>
-          </div>
-          {isEditingFooter && (
-            <span style={{
-              fontSize: 9,
-              fontWeight: 700,
-              textTransform: 'uppercase',
-              letterSpacing: '0.5px',
-              background: 'rgba(245, 158, 11, 0.25)',
-              padding: '2px 6px',
-              borderRadius: 'var(--radius-sm)',
-            }}>
-              Editing
-            </span>
+          <i className="fa fa-window-minimize" style={{ fontSize: 12, width: 14, textAlign: 'center', flexShrink: 0 }} />
+          <span style={{ flex: 1 }}>Footer</span>
+          {isEditingFooter ? (
+            <i className="fa fa-check-circle" style={{ fontSize: 11 }} aria-hidden />
+          ) : (
+            <i className="fa fa-pencil zone-row-pencil" style={{ fontSize: 11 }} aria-hidden />
          )}
        </button>
      </div>
@@ -328,18 +311,21 @@ export const PagesPanel: React.FC = () => {
                      title="This is the landing page — published as the root URL (index.html)"
                      style={{
                        fontSize: 9,
-                        fontWeight: 700,
-                        textTransform: 'uppercase',
-                        letterSpacing: '0.5px',
-                        color: '#fbbf24',
-                        background: 'rgba(245, 158, 11, 0.15)',
-                        border: '1px solid rgba(245, 158, 11, 0.35)',
+                        fontWeight: 600,
+                        letterSpacing: '0.3px',
+                        color: 'var(--color-text-muted)',
+                        background: 'transparent',
+                        border: '1px solid var(--color-border-light)',
                        padding: '1px 5px',
                        borderRadius: 'var(--radius-sm)',
                        flexShrink: 0,
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        gap: 4,
                      }}
                    >
-                      <i className="fa fa-home" style={{ marginRight: 3 }} />Landing
+                      <i className="fa fa-home" aria-hidden="true" style={{ fontSize: 8, color: 'inherit' }} />
+                      Landing
                    </span>
                  )}
                </div>
@@ -359,7 +345,8 @@ export const PagesPanel: React.FC = () => {
              >
                <button
                  onClick={() => startEditing(page)}
-                  title="Rename"
+                  data-tooltip="Rename"
+                  aria-label={`Rename ${page.name}`}
                  style={{
                    width: 24,
                    height: 24,
@@ -374,12 +361,13 @@ export const PagesPanel: React.FC = () => {
                    cursor: 'pointer',
                  }}
                >
-                  &#9998;
+                  <i className="fa fa-pencil" aria-hidden="true" />
                </button>
                {pages.length > 1 && !isLanding && (
                  <button
                    onClick={() => setDeleteConfirmId(page.id)}
-                    title="Delete"
+                    data-tooltip="Delete"
+                    aria-label={`Delete ${page.name}`}
                    style={{
                      width: 24,
                      height: 24,
@@ -394,7 +382,7 @@ export const PagesPanel: React.FC = () => {
                      cursor: 'pointer',
                    }}
                  >
-                    &#10005;
+                    <i className="fa fa-trash" aria-hidden="true" />
                  </button>
                )}
              </div>
@@ -11,6 +11,7 @@ import {
  useNodeProp,
 } from './shared';
 import { AssetPicker } from '../../../ui/AssetPicker';
+import { PLACEHOLDER_SRC } from '../../../components/media/ImageBlock';

 /* ---------- IMAGE (with upload/browse/drop) ---------- */
 export const ImageStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodeProps }) => {
@@ -33,7 +34,7 @@ export const ImageStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodePro
        <SectionLabel>Image Source</SectionLabel>
        <AssetPicker
          value={nodeProps.src || ''}
-          onChange={(url) => actions.setProp(selectedId, (props: any) => { props.src = url; })}
+          onChange={(url) => actions.setProp(selectedId, (props: any) => { props.src = url || PLACEHOLDER_SRC; })}
          variant="full"
        />
      </div>
@@ -0,0 +1,38 @@
+import { describe, it, expect } from 'vitest';
+import { defaultPresetGridColumns } from './shared';
+import { RADIUS_PRESETS, SPACING_PRESETS, IMAGE_RADIUS_PRESETS, FONT_WEIGHTS, TEXT_SIZES, FONT_FAMILIES } from '../../../constants/presets';
+
+/*
+ * Regression: 5-item preset sets (RADIUS_PRESETS, SPACING_PRESETS,
+ * IMAGE_RADIUS_PRESETS, FONT_WEIGHTS, and NavStylePanel's ad-hoc
+ * GAP_PRESETS) left a lone orphan button on its own row under the old
+ * fixed 4-column .preset-grid. PresetButtonGrid now derives a column
+ * count from the preset length instead.
+ */
+describe('defaultPresetGridColumns', () => {
+  it('gives 5-item sets their own single row (no orphan)', () => {
+    expect(defaultPresetGridColumns(RADIUS_PRESETS.length)).toBe(5);
+    expect(defaultPresetGridColumns(SPACING_PRESETS.length)).toBe(5);
+    expect(defaultPresetGridColumns(IMAGE_RADIUS_PRESETS.length)).toBe(5);
+    expect(defaultPresetGridColumns(FONT_WEIGHTS.length)).toBe(5);
+    expect(defaultPresetGridColumns(5)).toBe(5); // NavStylePanel's GAP_PRESETS
+  });
+
+  it('splits 6-item sets into two even rows of 3 (was 4+2 uneven)', () => {
+    expect(defaultPresetGridColumns(TEXT_SIZES.length)).toBe(3);
+  });
+
+  it('keeps the classic 4-column grid for sets that already divide evenly', () => {
+    expect(defaultPresetGridColumns(FONT_FAMILIES.length)).toBe(4); // 8 items
+    expect(defaultPresetGridColumns(4)).toBe(4);
+    expect(defaultPresetGridColumns(3)).toBe(4);
+  });
+
+  it('never leaves a single orphan on the final row for any count 1-12', () => {
+    for (let n = 1; n <= 12; n++) {
+      const cols = defaultPresetGridColumns(n);
+      const isLoneOrphan = n > cols && n % cols === 1;
+      expect(isLoneOrphan).toBe(false);
+    }
+  });
+});
@@ -84,9 +84,30 @@ interface PresetButtonGridProps {
  presets: { label: string; value: string }[];
  activeValue: string | undefined;
  onSelect: (value: string) => void;
+  /** Explicit column count. When omitted, a column count is derived from
+   *  `presets.length` (see `defaultPresetGridColumns`) so odd-sized preset
+   *  sets (5, 6, ...) don't leave a lone orphan button dangling on its own
+   *  row under the fixed 4-column grid. */
+  columns?: number;
 }
-export const PresetButtonGrid: React.FC<PresetButtonGridProps> = ({ presets, activeValue, onSelect }) => (
-  <div className="preset-grid">
+
+/** Picks a column count that avoids a single orphan on the last row.
+ *  4-or-fewer presets keep the classic single row of 4. 5 gets its own
+ *  row (5 cols). 6 splits into two even rows of 3. Anything else falls
+ *  back to a 4- or 3-column grid depending on which divides evenly. */
+export function defaultPresetGridColumns(count: number): number {
+  if (count <= 4) return 4;
+  if (count === 5) return 5;
+  if (count === 6) return 3;
+  if (count % 4 === 0) return 4;
+  if (count % 3 === 0) return 3;
+  return 4;
+}
+
+export const PresetButtonGrid: React.FC<PresetButtonGridProps> = ({ presets, activeValue, onSelect, columns }) => {
+  const cols = columns ?? defaultPresetGridColumns(presets.length);
+  return (
+    <div className="preset-grid" style={{ gridTemplateColumns: `repeat(${cols}, 1fr)` }}>
      {presets.map((p) => (
        <button
          key={p.value}
@@ -97,7 +118,8 @@ export const PresetButtonGrid: React.FC<PresetButtonGridProps> = ({ presets, act
        </button>
      ))}
    </div>
-);
+  );
+};

 interface GradientSwatchGridProps {
  activeValue: string | undefined;
@@ -21,8 +21,8 @@ export const SitesmithButton: React.FC<Props> = ({ onClick }) => {
        color: '#fff', border: 'none', padding: '6px 12px', borderRadius: 6, cursor: 'pointer', fontWeight: 500,
      }}
    >
-      ✨ Sitesmith
-      {locked && <span aria-hidden style={{ marginLeft: 6, fontSize: 12 }}>🔒</span>}
+      <i className="fa fa-magic" aria-hidden style={{ marginRight: 6 }} /> Sitesmith
+      {locked && <i className="fa fa-lock" aria-hidden style={{ marginLeft: 6, fontSize: 12 }} />}
      {capped && !locked && <span aria-hidden style={{ marginLeft: 6, fontSize: 11, opacity: 0.85 }}>(cap)</span>}
    </button>
  );
@@ -103,7 +103,10 @@ export const SitesmithModal: React.FC<Props> = ({ onClose, target }) => {
    >
      <div style={panel}>
        <div style={header}>
-          <div style={{ fontWeight: 600, color: '#fff' }}>✨ Sitesmith</div>
+          <div style={{ fontWeight: 600, color: '#fff' }}>
+            <i className="fa fa-magic" aria-hidden style={{ marginRight: 6 }} />
+            Sitesmith
+          </div>
          {summary && summary.enabled && (
            <div style={{ fontSize: 12, color: '#a1a1aa', marginLeft: 16 }}>
              {summary.monthly_used} / {summary.monthly_cap} this month
@@ -136,7 +139,7 @@ export const SitesmithModal: React.FC<Props> = ({ onClose, target }) => {
              </button>
            )
          )}
-          <button onClick={onClose} aria-label="Close" style={closeBtn}>✕</button>
+          <button onClick={onClose} aria-label="Close" style={closeBtn}><i className="fa fa-times" aria-hidden /></button>
        </div>
        <div style={body}>
          <UpgradeBanner summary={summary} />
@@ -8,9 +8,10 @@ import {
  TemplateComponent,
  TemplateCategory,
 } from '../../templates';
-import { componentResolver } from '../../components/resolver';
 import { clickableProps } from '../../utils/a11y';
 import { Modal } from '../../ui/Modal';
+import { buildNodeTree } from '../../utils/craft-tree';
+import { templateComponentToTreeNode } from '../../templates/apply-template';

 // ---------------------------------------------------------------------------
 // Types
@@ -77,28 +78,31 @@ export const TemplateModal: React.FC<TemplateModalProps> = ({ open, onClose }) =
    return allTemplates.filter((t) => t.category === activeTab);
  }, [activeTab]);

-  // Resolve a TemplateComponent type name to its React component
-  const resolverMap = componentResolver as Record<string, React.ComponentType<any>>;
-
  /**
   * Add all components from a template definition onto the current (empty) canvas ROOT.
-   * Uses Craft.js parseReactElement + addNodeTree which correctly builds valid node structures.
+   * Converts each `TemplateComponent` (the plain `{type, props, children?}`
+   * shape templates author) to a `SerializedTreeNode` and runs it through
+   * `buildNodeTree` (sanitize -> flatten -> materialize), the same tree pipeline
+   * already used for AI-generated content. This recurses into nested
+   * `children` (e.g. a header/footer `Container` wrapping `Logo`/`Menu`, or a
+   * page `Section` wrapping a `Heading`) AND correctly routes them through a
+   * component's SHELL_INNER linked canvas / linked columns where needed --
+   * see `templates/apply-template.ts` for the two bugs this fixes (dropped
+   * children, and a naive `parseReactElement` tree crashing `Section`/
+   * `BackgroundSection`/`FormContainer`/`ColumnLayout`).
   */
  const addTemplateComponents = useCallback(
    (components: TemplateComponent[]) => {
      for (const comp of components) {
-        const Component = resolverMap[comp.type];
-        if (!Component) {
-          console.warn(`Template references unknown component type: ${comp.type}`);
-          continue;
-        }
-
-        const element = React.createElement(Component, comp.props);
-        const tree = query.parseReactElement(element).toNodeTree();
+        try {
+          const tree = buildNodeTree(query, templateComponentToTreeNode(comp));
          actions.addNodeTree(tree, 'ROOT');
+        } catch (e) {
+          console.warn(`Failed to build template component tree for type "${comp.type}":`, e);
+        }
      }
    },
-    [query, actions, resolverMap],
+    [query, actions],
  );

  /**
@@ -247,8 +251,14 @@ export const TemplateModal: React.FC<TemplateModalProps> = ({ open, onClose }) =
              Choose a template to get started quickly
            </p>
          </div>
-          <button onClick={onClose} style={closeButtonStyle} title="Close">
-            &#10005;
+          <button
+            onClick={onClose}
+            style={closeButtonStyle}
+            title="Close"
+            onMouseEnter={(e) => { (e.currentTarget as HTMLElement).style.background = 'var(--color-bg-hover)'; (e.currentTarget as HTMLElement).style.color = 'var(--color-text)'; }}
+            onMouseLeave={(e) => { (e.currentTarget as HTMLElement).style.background = 'transparent'; (e.currentTarget as HTMLElement).style.color = '#71717a'; }}
+          >
+            <i className="fa fa-times" aria-hidden />
          </button>
        </div>

@@ -262,6 +272,12 @@ export const TemplateModal: React.FC<TemplateModalProps> = ({ open, onClose }) =
                ...tabStyle,
                ...(activeTab === tab.value ? tabActiveStyle : {}),
              }}
+              onMouseEnter={(e) => {
+                if (activeTab !== tab.value) (e.currentTarget as HTMLElement).style.background = 'var(--color-bg-hover)';
+              }}
+              onMouseLeave={(e) => {
+                if (activeTab !== tab.value) (e.currentTarget as HTMLElement).style.background = 'transparent';
+              }}
            >
              {tab.label}
            </button>
@@ -13,9 +13,12 @@ import { useSitesmithModal } from '../../state/SitesmithContext';
 interface TopBarProps {
  device: DeviceMode;
  onDeviceChange: (device: DeviceMode) => void;
+  /** Item 10: canvas dashed guide outlines, default ON. */
+  showGuides: boolean;
+  onToggleGuides: () => void;
 }

-export const TopBar: React.FC<TopBarProps> = ({ device, onDeviceChange }) => {
+export const TopBar: React.FC<TopBarProps> = ({ device, onDeviceChange, showGuides, onToggleGuides }) => {
  const { whpConfig, isWHP } = useEditorConfig();
  const { actions, query, canUndo, canRedo } = useEditor((_state, query) => ({
    canUndo: query.history.canUndo(),
@@ -148,6 +151,16 @@ export const TopBar: React.FC<TopBarProps> = ({ device, onDeviceChange }) => {
            </button>
          ))}
        </div>
+        <button
+          type="button"
+          className={`topbar-btn guides-toggle icon-only${showGuides ? ' active' : ''}`}
+          onClick={onToggleGuides}
+          aria-pressed={showGuides}
+          aria-label={showGuides ? 'Hide canvas guides' : 'Show canvas guides'}
+          data-tooltip={showGuides ? 'Hide guides' : 'Show guides'}
+        >
+          <i className={`fa ${showGuides ? 'fa-th' : 'fa-th-large'}`} aria-hidden />
+        </button>
      </div>

      <div className="topbar-right">
@@ -161,10 +174,15 @@ export const TopBar: React.FC<TopBarProps> = ({ device, onDeviceChange }) => {
        <button className="topbar-btn" title="Templates" aria-label="Templates" onClick={() => setTemplateModalOpen(true)}>
          <i className="fa fa-th-large" /> Templates
        </button>
-        <button className="topbar-btn" title="Custom Head Code" aria-label="Custom Head Code" onClick={() => setHeadCodeModalOpen(true)}>
-          <i className="fa fa-code" /> Code
+        <button
+          className="topbar-btn icon-only"
+          aria-label="Custom Head Code"
+          data-tooltip="Code"
+          onClick={() => setHeadCodeModalOpen(true)}
+        >
+          <i className="fa fa-code" />
        </button>
-        <button className="topbar-btn" title="Preview" aria-label="Preview" onClick={() => {
+        <button className="topbar-btn icon-only" aria-label="Preview" data-tooltip="Preview" onClick={() => {
          try {
            const serialized = query.serialize();
            import('../../utils/html-export').then(({ exportToHtml, exportBodyHtml }) => {
@@ -218,7 +236,7 @@ export const TopBar: React.FC<TopBarProps> = ({ device, onDeviceChange }) => {
            console.error('Preview failed:', e);
          }
        }}>
-          <i className="fa fa-eye" /> Preview
+          <i className="fa fa-eye" />
        </button>

        {/* Draft/Published status badge */}
@@ -0,0 +1,162 @@
+import { describe, test, expect } from 'vitest';
+import React from 'react';
+import { createRoot, Root } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { Editor, useEditor } from '@craftjs/core';
+import { componentResolver } from '../../components/resolver';
+import { allTemplates } from '../../templates';
+import { buildNodeTree } from '../../utils/craft-tree';
+import { templateComponentToTreeNode } from '../../templates/apply-template';
+import { exportBodyHtml } from '../../utils/html-export';
+import { DEFAULT_HEADER_STATE } from '../../state/PageContext';
+
+/**
+ * Regression test for: loading a template makes the header/footer ZONE
+ * PREVIEW (`ZonePreview` in `editor/Canvas.tsx`, which calls
+ * `exportBodyHtml(craftState)`) render as an empty strip -- no nav links, no
+ * logo, no footer text -- and (a second bug found while fixing the first)
+ * makes a template page's `Section`-wrapped content crash the live editor
+ * entirely.
+ *
+ * This drives the EXACT same path `TemplateModal.tsx`'s `applyZone` /
+ * `addTemplateComponents` uses to load a template's header/footer/page
+ * content onto the live Craft.js canvas (`buildNodeTree` +
+ * `actions.addNodeTree(tree, 'ROOT')`), then serializes it
+ * (`query.serialize()`, exactly what `PageContext`'s `switchPage` /
+ * `saveCurrentState` do right after `TemplateModal` finishes applying a
+ * zone/page) and feeds the result through `exportBodyHtml` -- the same
+ * function `ZonePreview` calls, and the same function `handlePublish` uses
+ * to compose the published header/footer HTML. So this also covers whether
+ * published output is affected (it was).
+ */
+let api: any;
+function Harness() {
+  const { actions, query } = useEditor();
+  api = { actions, query };
+  return null;
+}
+
+function mount() {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  let root!: Root;
+  act(() => {
+    root = createRoot(container);
+    root.render(
+      <Editor resolver={componentResolver}>
+        <Harness />
+      </Editor>,
+    );
+  });
+  return {
+    container,
+    unmount: () => {
+      act(() => {
+        root.unmount();
+      });
+      container.remove();
+    },
+  };
+}
+
+/** Mirrors TemplateModal.tsx's addTemplateComponents(). */
+function addTemplateComponents(components: any[]) {
+  for (const comp of components) {
+    const tree = buildNodeTree(api.query, templateComponentToTreeNode(comp));
+    api.actions.addNodeTree(tree, 'ROOT');
+  }
+}
+
+const EMPTY_HEADER_ROOT =
+  '{"ROOT":{"type":{"resolvedName":"Container"},"isCanvas":true,"props":{"style":{},"tag":"header"},"displayName":"Container","custom":{},"hidden":false,"nodes":[],"linkedNodes":{}}}';
+
+const EMPTY_CANVAS_ROOT =
+  '{"ROOT":{"type":{"resolvedName":"Container"},"isCanvas":true,"props":{"style":{},"tag":"div"},"displayName":"Container","custom":{},"hidden":false,"nodes":[],"linkedNodes":{}}}';
+
+describe('template header/footer zone export (loading a template)', () => {
+  test('sanity check: the DEFAULT header (fresh project, no template) exports its content', () => {
+    const { html } = exportBodyHtml(DEFAULT_HEADER_STATE);
+    expect(html).toContain('MySite');
+  });
+
+  test('a template header (SaaS Landing) exports its real nav/logo content -- not an empty strip', () => {
+    const tpl = allTemplates.find((t) => t.id === 'saas-landing');
+    expect(tpl).toBeDefined();
+    expect(tpl!.header.components.length).toBeGreaterThan(0);
+
+    const { unmount } = mount();
+    act(() => {
+      api.actions.deserialize(EMPTY_HEADER_ROOT);
+    });
+    act(() => {
+      addTemplateComponents(tpl!.header.components);
+    });
+
+    const serialized = api.query.serialize();
+    const { html } = exportBodyHtml(serialized);
+
+    // The template's logo text and a real nav link -- if these are missing,
+    // the header rendered as an empty strip (the reported bug).
+    expect(html).toContain('FlowStack');
+    expect(html).toContain('Features');
+    expect(html).toContain('Start Free');
+
+    unmount();
+  });
+
+  test('a template footer (SaaS Landing) exports its real copyright/tagline content -- not an empty strip', () => {
+    const tpl = allTemplates.find((t) => t.id === 'saas-landing');
+    expect(tpl).toBeDefined();
+    expect(tpl!.footer.components.length).toBeGreaterThan(0);
+
+    const { unmount } = mount();
+    act(() => {
+      api.actions.deserialize(
+        '{"ROOT":{"type":{"resolvedName":"Container"},"isCanvas":true,"props":{"style":{},"tag":"footer"},"displayName":"Container","custom":{},"hidden":false,"nodes":[],"linkedNodes":{}}}',
+      );
+    });
+    act(() => {
+      addTemplateComponents(tpl!.footer.components);
+    });
+
+    const serialized = api.query.serialize();
+    const { html } = exportBodyHtml(serialized);
+
+    expect(html).toContain('FlowStack, Inc.');
+    expect(html).toContain('Ship products faster');
+
+    unmount();
+  });
+
+  test('a template page Section with nested children (SaaS Landing Home) builds + exports without crashing', () => {
+    // Regression for the SECOND bug surfaced while fixing the first: naively
+    // rebuilding nested children via React.createElement + parseReactElement
+    // crashes any component with an internal SHELL_INNER linked canvas
+    // (Section/BackgroundSection/FormContainer) or linked columns
+    // (ColumnLayout). The SaaS Landing home page's second component is a
+    // `Section` wrapping a `Heading` ("Trusted by 10,000+ development
+    // teams...") -- exactly this shape.
+    const tpl = allTemplates.find((t) => t.id === 'saas-landing');
+    const homePage = tpl!.pages[0];
+    const sectionComp = homePage.content.components.find((c) => c.type === 'Section');
+    expect(sectionComp).toBeDefined();
+    expect(sectionComp!.children?.length).toBeGreaterThan(0);
+
+    const { unmount } = mount();
+    act(() => {
+      api.actions.deserialize(EMPTY_CANVAS_ROOT);
+    });
+
+    expect(() => {
+      act(() => {
+        addTemplateComponents([sectionComp!]);
+      });
+    }).not.toThrow();
+
+    const serialized = api.query.serialize();
+    const { html } = exportBodyHtml(serialized);
+    expect(html).toContain('Trusted by 10,000+ development teams');
+
+    unmount();
+  });
+});
@@ -119,6 +119,13 @@ export function treeToCraftState(tree: SerializedTreeNode): string {
 // Container), so there was no menu to edit and the empty zone rendered as a
 // stray band above the page. Seeding a real Navbar gives every new site an
 // editable menu-with-links out of the box (and removes the empty-header gap).
+//
+// Item 15: the nav used to link Home/About/Services/Contact, but a brand
+// new site only has a "Home" page -- About/Services/Contact were dead links
+// on first click. Rather than seeding three empty placeholder pages nobody
+// asked for, the simpler default is a nav with just the one real page (Home)
+// plus a CTA button, which is inert (`href: '#'`) rather than pointing at a
+// page that doesn't exist. Users add pages/links as their site grows.
 // Node shape matches treeToCraftState() / Craft's actions.deserialize().
 export const DEFAULT_HEADER_STATE = JSON.stringify({
  ROOT: {
@@ -144,9 +151,7 @@ export const DEFAULT_HEADER_STATE = JSON.stringify({
      logoFontSize: '20px',
      links: [
        { text: 'Home', href: '/' },
-        { text: 'About', href: '#about' },
-        { text: 'Services', href: '#services' },
-        { text: 'Contact', href: '#contact', isCta: true },
+        { text: 'Get Started', href: '#', isCta: true },
      ],
      backgroundColor: '#ffffff',
      textColor: '#3f3f46',
@@ -23,8 +23,14 @@ describe('DEFAULT_HEADER_STATE seed', () => {
    const { html } = exportBodyHtml(DEFAULT_HEADER_STATE);
    expect(html).toContain('<nav');
    expect(html).toContain('MySite');
-    for (const link of ['Home', 'About', 'Services', 'Contact']) {
+    // Item 15: the default nav only links pages/anchors that actually exist
+    // on a brand new site (just "Home") plus an inert CTA -- no dead links
+    // to About/Services/Contact pages that were never seeded.
+    for (const link of ['Home', 'Get Started']) {
      expect(html).toContain(link);
    }
+    expect(html).not.toContain('About');
+    expect(html).not.toContain('Services');
+    expect(html).not.toContain('Contact');
  });
 });
@@ -16,8 +16,8 @@
  --color-border: #2d2d3a;
  --color-border-light: #3f3f46;
  --color-text: #e4e4e7;
-  --color-text-muted: #71717a;
-  --color-text-dim: #52525b;
+  --color-text-muted: #8b8b96;
+  --color-text-dim: #6e6e78;
  --color-accent: #3b82f6;
  --color-accent-hover: #2563eb;
  --color-accent-subtle: rgba(59, 130, 246, 0.12);
@@ -136,7 +136,7 @@ body {
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-border);
-  border-radius: 20px;
+  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast), border-color var(--transition-fast),
@@ -198,6 +198,19 @@ body {
  margin: 0 4px;
 }

+/* Icon-only topbar buttons (Show Guides, Code, Preview) -- square-ish
+   footprint instead of the label+icon pill, tooltip via [data-tooltip]. */
+.topbar-btn.icon-only {
+  gap: 0;
+  padding: 6px 8px;
+}
+
+.topbar-btn.guides-toggle.active {
+  color: var(--color-accent);
+  background: var(--color-accent-subtle);
+  border-color: var(--color-accent);
+}
+
 /* --------------------------------------------------------------------------
   Device Switcher
   -------------------------------------------------------------------------- */
@@ -704,7 +717,7 @@ body {
 }

 .block-item-icon {
-  font-size: 18px;
+  font-size: 20px;
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
 }
@@ -714,7 +727,7 @@ body {
 }

 .block-item-label {
-  font-size: 10px;
+  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-muted);
  text-align: center;
@@ -1002,63 +1015,80 @@ body {
 }

 /* --------------------------------------------------------------------------
-   Editor Visual Guides — dashed outlines for containers/columns/sections
+   Editor Visual Guides — dashed outlines for real drop targets only
   -------------------------------------------------------------------------- */

-/* All block-level elements in the canvas get a subtle dashed border */
-.canvas-device-frame div,
-.canvas-device-frame section,
-.canvas-device-frame header,
-.canvas-device-frame footer,
-.canvas-device-frame main,
-.canvas-device-frame article,
-.canvas-device-frame nav,
-.canvas-device-frame form {
+/* Only actual Craft.js droppable containers get a guide outline -- these are
+   tagged with `data-craft-node` in RenderNode.tsx (the `<Editor onRender>`
+   override) based on `node.data.isCanvas`, not a blanket tag selector. A
+   component's own internal wrapper `<div>`s (e.g. Section's inner max-width
+   container) are real DOM elements but not Craft nodes, so they never get
+   this attribute and never get a guide outline -- this is what stops
+   finished sections from showing 3-4 nested dashed boxes. */
+.canvas-device-frame [data-craft-node] {
  outline: 1px dashed rgba(148, 163, 184, 0.2);
  outline-offset: -1px;
  transition: outline-color 0.15s;
 }

-/* Don't outline the outermost root wrapper or tiny utility divs */
-.canvas-device-frame > div {
-  outline: none;
-}
-
 /* Rows (flex containers) get a slightly more visible border */
-.canvas-device-frame div[style*="display: flex"],
-.canvas-device-frame div[style*="display:flex"] {
+.canvas-device-frame [data-craft-node][style*="display: flex"],
+.canvas-device-frame [data-craft-node][style*="display:flex"] {
  outline: 1px dashed rgba(148, 163, 184, 0.35);
 }

 /* Empty containers: more visible + minimum height so they're clickable */
-.canvas-device-frame div:empty,
-.canvas-device-frame section:empty,
-.canvas-device-frame main:empty,
-.canvas-device-frame header:empty,
-.canvas-device-frame footer:empty {
+.canvas-device-frame [data-craft-node]:empty {
  outline: 2px dashed rgba(148, 163, 184, 0.4);
  min-height: 60px;
 }

 /* Hover highlights */
-.canvas-device-frame div:hover,
-.canvas-device-frame section:hover,
-.canvas-device-frame header:hover,
-.canvas-device-frame footer:hover,
-.canvas-device-frame main:hover,
-.canvas-device-frame nav:hover {
+.canvas-device-frame [data-craft-node]:hover {
  outline-color: rgba(59, 130, 246, 0.5);
 }

-/* Header/footer zones get a distinct amber color */
-.canvas-device-frame [data-zone="header"],
-.canvas-device-frame [data-zone="footer"] {
-  outline: 1px dashed rgba(245, 158, 11, 0.4);
+/* `data-craft-hovered` is set (presence, no value) in RenderNode.tsx,
+   mirroring Craft's own `hovered` node event. Craft.js's `connectors.connect()`
+   (called by every component) wires that event to a native
+   mouseover/mouseleave listener on each node's dom internally, so this
+   rule is a real mouse-hover highlight for any node (container or leaf).
+   Scoped under `.canvas-device-frame` and suppressed by `.guides-off` so
+   "Show guides: off" stays airtight. */
+.canvas-device-frame [data-craft-hovered] {
+  outline: 2px dashed var(--color-accent) !important;
+  outline-offset: -1px;
 }

-.canvas-device-frame [data-zone="header"]:hover,
-.canvas-device-frame [data-zone="footer"]:hover {
-  outline-color: rgba(245, 158, 11, 0.7);
+/* `data-layer-hovered` is set directly by the Layers panel (LayersPanel.tsx)
+   on its own row hover/focus -- a separate producer (writing straight to the
+   target's dom rather than through Craft's `hovered` event, since the
+   action that drives it is stripped from the public `useEditor()` API at
+   runtime) that drives a highlight when hovering a layer row. This is a
+   deliberate locator action (not a structural drop-target guide), so it
+   uses a SOLID outline -- visually distinct from the dashed structural
+   guides -- and is intentionally NOT suppressed by `.guides-off`: hiding
+   guides shouldn't blind the Layers-panel hover→canvas locator. */
+.canvas-device-frame [data-layer-hovered] {
+  outline: 2px solid var(--color-accent) !important;
+  outline-offset: -1px;
+}
+
+/* "Show guides" topbar toggle (TopBar.tsx) -- flips this class on
+   .canvas-device-frame to hide structural drop-target guides and the
+   mouse-hover highlight at once. Default ON. `[data-layer-hovered]` is
+   deliberately excluded -- see rule above. */
+.canvas-device-frame.guides-off [data-craft-node],
+.canvas-device-frame.guides-off [data-craft-hovered] {
+  outline: none !important;
+}
+
+/* Header/footer zone-preview separator (Canvas.tsx ZonePreview) -- a neutral
+   dashed rule marking where the editable page meets the read-only
+   header/footer preview. It's a structural guide, so it hides with the
+   rest when "Show guides" is off. */
+.canvas-device-frame.guides-off .zone-preview-sep {
+  border-color: transparent !important;
 }

 /* --------------------------------------------------------------------------
@@ -1069,17 +1099,16 @@ body {
  outline-offset: -1px;
 }

-.craftjs-renderer [data-hovered="true"] {
-  outline: 1px dashed var(--color-accent) !important;
-  outline-offset: -1px;
-}
-
-/* Component indicator badge */
+/* Component indicator badge (floats over the selected node via a portal --
+   position/top/left are set inline per-node, see RenderNode.tsx) */
 .component-indicator {
  position: absolute;
  top: -22px;
  left: 0;
-  padding: 2px 8px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 6px 2px 8px;
  font-size: 10px;
  font-weight: 600;
  color: #ffffff;
@@ -1090,6 +1119,28 @@ body {
  z-index: 10;
 }

+.component-indicator-parent-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  padding: 0;
+  border: none;
+  border-radius: 2px;
+  background: rgba(255, 255, 255, 0.2);
+  color: #ffffff;
+  font-size: 8px;
+  line-height: 1;
+  cursor: pointer;
+  pointer-events: auto;
+  transition: background var(--transition-fast);
+}
+
+.component-indicator-parent-btn:hover {
+  background: rgba(255, 255, 255, 0.4);
+}
+
 /* --------------------------------------------------------------------------
   Scrollbar Styling
   -------------------------------------------------------------------------- */
@@ -1127,6 +1178,21 @@ body {
  scrollbar-color: var(--color-border) transparent;
 }

+/* --------------------------------------------------------------------------
+   Pages Panel — Header/Footer zone rows (Item 11)
+   Compact rows in the same neutral surface language as the page list, with
+   a pencil hint that only appears on hover instead of a permanently-loud
+   "Editing" pill.
+   -------------------------------------------------------------------------- */
+.zone-row-pencil {
+  opacity: 0;
+  transition: opacity var(--transition-fast);
+}
+
+.zone-row:hover .zone-row-pencil {
+  opacity: 1;
+}
+
 /* --------------------------------------------------------------------------
   Tooltip
   -------------------------------------------------------------------------- */
@@ -1157,6 +1223,16 @@ body {
  opacity: 1;
 }

+/* Topbar sits flush against the top of the viewport (`body { overflow:
+   hidden }`), so the default "tooltip above the trigger" placement gets
+   clipped off-screen for topbar buttons -- flip those to render below
+   instead. Left-panel/canvas tooltips keep the default above placement,
+   which has room to render there. */
+.topbar [data-tooltip]::after {
+  bottom: auto;
+  top: calc(100% + 6px);
+}
+
 /* --------------------------------------------------------------------------
   Notifications / Toasts
   -------------------------------------------------------------------------- */
@@ -1225,6 +1301,8 @@ body {
   Empty Canvas State
   -------------------------------------------------------------------------- */
 .empty-canvas-hint {
+  position: absolute;
+  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
@@ -1234,6 +1312,9 @@ body {
  font-size: 13px;
  text-align: center;
  gap: 12px;
+  /* Overlays the drop area without intercepting drags/clicks meant for the
+     underlying (empty) canvas root -- see Canvas.tsx. */
+  pointer-events: none;
 }

 .empty-canvas-hint i {
@@ -0,0 +1,51 @@
+import { describe, test, expect } from 'vitest';
+import { templateComponentToTreeNode } from './apply-template';
+
+describe('templateComponentToTreeNode', () => {
+  test('converts a childless TemplateComponent to a SerializedTreeNode with an empty `nodes` array', () => {
+    const node = templateComponentToTreeNode({ type: 'Heading', props: { text: 'Hi' } });
+    expect(node).toEqual({
+      type: { resolvedName: 'Heading' },
+      props: { text: 'Hi' },
+      nodes: [],
+    });
+  });
+
+  test('regression: recursively converts nested `children` into `nodes` (previously dropped entirely)', () => {
+    const node = templateComponentToTreeNode({
+      type: 'Container',
+      props: { tag: 'header' },
+      children: [
+        { type: 'Logo', props: { text: 'FlowStack' } },
+        { type: 'Menu', props: { links: [] } },
+      ],
+    });
+    expect(node.nodes).toHaveLength(2);
+    expect(node.nodes![0]).toEqual({ type: { resolvedName: 'Logo' }, props: { text: 'FlowStack' }, nodes: [] });
+    expect(node.nodes![1]).toEqual({ type: { resolvedName: 'Menu' }, props: { links: [] }, nodes: [] });
+  });
+
+  test('recurses more than one level deep', () => {
+    const node = templateComponentToTreeNode({
+      type: 'Section',
+      props: {},
+      children: [
+        {
+          type: 'ColumnLayout',
+          props: { columns: 1 },
+          children: [{ type: 'TextBlock', props: { text: 'deep' } }],
+        },
+      ],
+    });
+    const col = node.nodes![0];
+    expect(col.type.resolvedName).toBe('ColumnLayout');
+    expect(col.nodes![0]).toEqual({ type: { resolvedName: 'TextBlock' }, props: { text: 'deep' }, nodes: [] });
+  });
+
+  test('does not mutate the input TemplateComponent', () => {
+    const comp = { type: 'Heading', props: { text: 'Hi' } };
+    const frozen = JSON.parse(JSON.stringify(comp));
+    templateComponentToTreeNode(comp);
+    expect(comp).toEqual(frozen);
+  });
+});
@@ -0,0 +1,49 @@
+import type { SerializedTreeNode } from '../types/sitesmith';
+import { TemplateComponent } from './definitions';
+
+/**
+ * Converts a template's `TemplateComponent` tree (the plain
+ * `{ type, props, children? }` shape authored in `templates/definitions.ts`)
+ * into a `SerializedTreeNode` (the shape `craft-tree.ts`'s `buildNodeTree` /
+ * `sanitizeAiTree` / `flattenTreeForCraft` pipeline already knows how to
+ * materialize into a real Craft.js `NodeTree`).
+ *
+ * Bug this fixes: `TemplateModal`'s `addTemplateComponents` used to call
+ * `React.createElement(Component, comp.props)` with no children argument,
+ * which silently dropped every nested `children` array authored in
+ * definitions.ts -- e.g. `makeHeader()`'s `Container > Logo + Menu`,
+ * `makeFooterContent()`'s `Container > TextBlock...`, or a page `Section`
+ * wrapping a `Heading`/`TextBlock`/`ButtonLink`. The resulting Craft.js node
+ * ended up with `nodes: []`, so the header/footer zone preview
+ * (`ZonePreview` in `editor/Canvas.tsx`, via `exportBodyHtml`) -- and the
+ * same-path published HTML (`handlePublish` composes header/footer HTML
+ * from the same serialized state) -- rendered as an empty strip instead of
+ * the real nav/footer/section content.
+ *
+ * A follow-up attempt fixed that by building a real nested React element
+ * tree (`React.createElement(Component, props, ...children)`) and handing
+ * it to `query.parseReactElement(...).toNodeTree()`. That approach breaks
+ * for any component with an internal SHELL_INNER-style linked canvas
+ * (`Section`, `BackgroundSection`, `FormContainer` -- see `SHELL_INNER` in
+ * `craft-tree.ts`) or linked columns (`ColumnLayout`): `parseReactElement`
+ * statically walks the JSX tree and has no way to know that e.g. `Section`
+ * routes its `children` into a nested `<Element id="section-inner" canvas>`
+ * at render time, not directly under itself. Feeding it raw nested children
+ * produces a tree where Craft.js has to auto-materialize that linked node on
+ * first render -- which stores the wrong `type` and crashes with "component
+ * type (undefined) does not exist in the resolver" the moment the section
+ * renders (reproduced live: loading the SaaS Landing template crashed the
+ * whole editor on its "Trusted by 10,000+ development teams" `Section`).
+ *
+ * Converting to `SerializedTreeNode` and reusing `buildNodeTree` sidesteps
+ * both bugs at once: it's the same tree-building pipeline already used (and
+ * tested) for AI-generated content in `apply-ai-response.ts`, which already
+ * knows how to route content through SHELL_INNER / linked columns correctly.
+ */
+export function templateComponentToTreeNode(comp: TemplateComponent): SerializedTreeNode {
+  return {
+    type: { resolvedName: comp.type },
+    props: { ...comp.props },
+    nodes: (comp.children || []).map(templateComponentToTreeNode),
+  };
+}
@@ -1,14 +1,14 @@
 import { useEditor } from '@craftjs/core';
-import type { NodeTree } from '@craftjs/core';
 import { usePages } from '../state/PageContext';
 import { SitesmithResponse, SerializedTreeNode, SitesmithPatchOp } from '../types/sitesmith';
-import { sanitizeAiTree, flattenTreeForCraft } from './craft-tree';
+import { sanitizeAiTree, buildNodeTree } from './craft-tree';

-// Re-exported for existing callers/tests that import sanitizeAiTree from
-// this module — the implementation now lives in craft-tree.ts alongside the
-// shared flattener, since treeToState (PageContext.tsx) needs the same
-// validation this module pioneered.
-export { sanitizeAiTree };
+// Re-exported for existing callers/tests that import sanitizeAiTree/
+// buildNodeTree from this module — the implementation lives in craft-tree.ts
+// alongside the shared flattener: `templates/apply-template.ts` needs the
+// exact same tree-materialization logic to load template header/footer/page
+// content (see the doc comment on `buildNodeTree` in craft-tree.ts).
+export { sanitizeAiTree, buildNodeTree };

 /**
 * update_props may never touch these keys, regardless of what the AI sends.
@@ -18,52 +18,6 @@ export { sanitizeAiTree };
 */
 const PROTECTED_UPDATE_PROPS_KEYS = new Set<string>(['node_id']);

-/**
- * Build a Craft.js `NodeTree` from a `SerializedTreeNode` using `query.parseFreshNode`.
- * This is the correct way to construct a tree for `actions.addNodeTree()` when
- * inserting/replacing sections or individual nodes.
- */
-function buildNodeTree(query: any, tree: SerializedTreeNode): NodeTree {
-  // Validate + sanitize at the AI boundary before touching Craft.js at all:
-  // unknown resolvedNames are dropped (never reach parseFreshNode/addNodeTree,
-  // which would throw), and ids are repaired ('ROOT'/empty/colliding →
-  // regenerated) against the live document's existing node ids so a new
-  // AI-supplied id can never clobber or duplicate one already on the canvas.
-  const existingIds = new Set<string>(
-    typeof query?.getNodes === 'function' ? Object.keys(query.getNodes()) : [],
-  );
-  const sanitized = sanitizeAiTree(tree, existingIds);
-  if (!sanitized) {
-    throw new Error('sitesmith: AI tree root has an unknown/invalid component type; nothing to build');
-  }
-
-  // sanitizeAiTree() has already guaranteed every node has a valid, unique,
-  // non-'ROOT' node_id and a registered resolvedName — the shared flattener
-  // just needs to do the structural walk (linkedNodes/SHELL_INNER/style
-  // normalization) common to every tree-flattening caller in this codebase.
-  const flat = flattenTreeForCraft(sanitized);
-
-  const craftNodes: Record<string, any> = {};
-  for (const [id, flatNode] of Object.entries(flat.nodes)) {
-    if (flat.syntheticIds.has(id)) {
-      // The SHELL_INNER wrapper Container is synthesized by the flattener,
-      // not present in the AI's tree — build it directly rather than
-      // through query.parseFreshNode(), which would merge in Container's
-      // default `craft.props` (e.g. default padding) and change its look.
-      craftNodes[id] = {
-        id,
-        data: { ...flatNode },
-        events: { selected: false, hovered: false, dragged: false },
-        rules: { canDrag: () => true, canMoveIn: () => true, canMoveOut: () => true, canDrop: () => true },
-      };
-    } else {
-      craftNodes[id] = (query.parseFreshNode({ id, data: { ...flatNode } }) as any).toNode();
-    }
-  }
-
-  return { rootNodeId: flat.rootNodeId, nodes: craftNodes };
-}
-
 /**
 * Find the Craft.js node id that corresponds to an AI node_id value.
 * Checks `data.props.node_id` first, then falls back to raw id equality.
@@ -225,6 +225,105 @@ export function flattenTreeForCraft(tree: SerializedTreeNode): FlattenTreeResult
  return { rootNodeId, nodes, syntheticIds };
 }

+/**
+ * Build a Craft.js `NodeTree` from a `SerializedTreeNode` using
+ * `query.parseFreshNode`. This is the correct way to construct a tree for
+ * `actions.addNodeTree()` when inserting/replacing sections, individual
+ * nodes, or (via `templates/apply-template.ts`) a template's header/footer/
+ * page content -- anything whose input isn't already a live Craft.js state.
+ *
+ * Originally lived in `apply-ai-response.ts` (the AI-response path pioneered
+ * it); moved here alongside `sanitizeAiTree`/`flattenTreeForCraft` once
+ * `templates/apply-template.ts` needed the exact same tree-materialization
+ * logic — building a node tree by hand via `React.createElement` +
+ * `query.parseReactElement` does NOT correctly route content through a
+ * `Section`/`BackgroundSection`/`FormContainer`'s internal SHELL_INNER
+ * linked canvas or `ColumnLayout`'s linked columns (see the `SHELL_INNER`
+ * comment above): Craft.js would auto-materialize that linked node at
+ * render time with a botched `type` field and crash `toNodeTree` with
+ * "component type (undefined) does not exist in the resolver". Going through
+ * `sanitizeAiTree` + `flattenTreeForCraft` (as this function does) avoids
+ * that entirely.
+ */
+export function buildNodeTree(query: any, tree: SerializedTreeNode): NodeTree {
+  // Validate + sanitize at the boundary before touching Craft.js at all:
+  // unknown resolvedNames are dropped (never reach parseFreshNode/addNodeTree,
+  // which would throw), and ids are repaired ('ROOT'/empty/colliding →
+  // regenerated) against the live document's existing node ids so a new
+  // caller-supplied id can never clobber or duplicate one already on the canvas.
+  const existingIds = new Set<string>(
+    typeof query?.getNodes === 'function' ? Object.keys(query.getNodes()) : [],
+  );
+  const sanitized = sanitizeAiTree(tree, existingIds);
+  if (!sanitized) {
+    throw new Error('craft-tree: tree root has an unknown/invalid component type; nothing to build');
+  }
+
+  // sanitizeAiTree() has already guaranteed every node has a valid, unique,
+  // non-'ROOT' node_id and a registered resolvedName — flattenTreeForCraft
+  // just needs to do the structural walk (linkedNodes/SHELL_INNER/style
+  // normalization) common to every tree-flattening caller in this codebase.
+  const flat = flattenTreeForCraft(sanitized);
+
+  const craftNodes: Record<string, any> = {};
+  for (const [id, flatNode] of Object.entries(flat.nodes)) {
+    // Live Craft.js nodes need `data.type` to be the ACTUAL component
+    // reference (the function/class from `componentResolver`) -- not the
+    // `{ resolvedName }` wrapper object `flattenTreeForCraft` produces (that
+    // wrapper is the *serialized* form used by `actions.deserialize()`/
+    // `query.serialize()`, a different Craft.js entry point), and not a
+    // plain resolvedName string either.
+    //
+    // A plain string passes `parseFreshNode`'s own validation (it special-
+    // cases strings) AND `actions.addNodeTree`'s, so that alone looks fine --
+    // but it's wrong for RENDERING: Craft.js's node renderer does
+    // `React.createElement(data.type, props)` directly, so a string type
+    // makes React treat e.g. "Section" as a literal (invalid, lowercase-
+    // expected) HTML tag name instead of resolving it to the real `Section`
+    // component. Symptom: "is using incorrect casing" console warnings and
+    // the component's own render logic (and thus its content) never runs --
+    // reproduced live by loading a template: the header/footer rendered fine
+    // but the page canvas went blank. The `{ resolvedName }` wrapper object
+    // fails even earlier, at `parseFreshNode`/`addNodeTree`'s own validation
+    // ("component type (undefined) does not exist in the resolver"), because
+    // their resolution only accepts a string or a component reference.
+    //
+    // None of this was caught by the pre-existing mocked test for this
+    // function (in apply-ai-response.test.ts) because its fake
+    // `parseFreshNode` just echoes the input back unchanged rather than
+    // exercising Craft.js's real validation/rendering.
+    const resolvedComponent = (componentResolver as Record<string, unknown>)[flatNode.type.resolvedName];
+
+    if (flat.syntheticIds.has(id)) {
+      // The SHELL_INNER wrapper Container is synthesized by the flattener,
+      // not present in the input tree — build it directly rather than
+      // through query.parseFreshNode(), which would merge in Container's
+      // default `craft.props` (e.g. default padding) and change its look.
+      //
+      // `actions.addNodeTree`'s own validation for a non-string `data.type`
+      // checks `resolver[data.name]` (NOT a reverse lookup from `data.type`
+      // like `parseFreshNode` does) -- so `data.name` must be set to the
+      // resolvedName string here too, or this synthetic node fails that
+      // check with "component type (Container) does not exist in the
+      // resolver" the moment `addNodeTree` runs, even though `resolvedComponent`
+      // itself is perfectly valid.
+      craftNodes[id] = {
+        id,
+        data: { ...flatNode, type: resolvedComponent, name: flatNode.type.resolvedName },
+        events: { selected: false, hovered: false, dragged: false },
+        rules: { canDrag: () => true, canMoveIn: () => true, canMoveOut: () => true, canDrop: () => true },
+      };
+    } else {
+      craftNodes[id] = (query.parseFreshNode({
+        id,
+        data: { ...flatNode, type: resolvedComponent },
+      }) as any).toNode();
+    }
+  }
+
+  return { rootNodeId: flat.rootNodeId, nodes: craftNodes };
+}
+
 /**
 * Returns a deep-cloned NodeTree where every node id in the tree
 * (rootNodeId, the `nodes` map keys, each `node.id`, each internal
@@ -1,5 +1,5 @@
 import { describe, test, expect } from 'vitest';
-import { escapeHtml, escapeAttr, safeUrl, stableHash, scopeId, sanitizeFormMethod, sanitizeInputType } from './escape';
+import { escapeHtml, escapeAttr, safeUrl, safeImageUrl, stableHash, scopeId, sanitizeFormMethod, sanitizeInputType } from './escape';

 describe('escapeHtml', () => {
  test('escapes &, <, >, "', () => {
@@ -112,6 +112,73 @@ describe('safeUrl', () => {
  });
 });

+describe('safeImageUrl (Bug 2: image-context sink -- data:image/svg+xml is safe as an <img>/CSS url() target)', () => {
+  test('allows data:image/svg+xml (a raw, non-base64 SVG data URI, as Gallery/ImageBlock placeholders use)', () => {
+    const s = 'data:image/svg+xml,<svg/>';
+    expect(safeImageUrl(s)).toBe(s);
+  });
+
+  test('allows data:image/svg+xml;base64 variant', () => {
+    const s = 'data:image/svg+xml;base64,PHN2Zy8+';
+    expect(safeImageUrl(s)).toBe(s);
+  });
+
+  test('allows other data:image/* types unchanged', () => {
+    expect(safeImageUrl('data:image/png;base64,x')).toBe('data:image/png;base64,x');
+    expect(safeImageUrl('data:image/jpeg;base64,x')).toBe('data:image/jpeg;base64,x');
+    expect(safeImageUrl('data:image/webp;base64,x')).toBe('data:image/webp;base64,x');
+    expect(safeImageUrl('data:image/gif;base64,x')).toBe('data:image/gif;base64,x');
+  });
+
+  test('still blocks javascript: scheme', () => {
+    expect(safeImageUrl('javascript:alert(1)')).toBe('');
+  });
+
+  test('still blocks vbscript: scheme', () => {
+    expect(safeImageUrl('vbscript:msgbox(1)')).toBe('');
+  });
+
+  test('still blocks data:text/html', () => {
+    expect(safeImageUrl('data:text/html,x')).toBe('');
+  });
+
+  test('still blocks non-image data: types generally (e.g. data:application/...)', () => {
+    expect(safeImageUrl('data:application/javascript,alert(1)')).toBe('');
+  });
+
+  test('blocks obfuscated (whitespace/case) javascript: scheme, same as safeUrl', () => {
+    expect(safeImageUrl('  JavaScript:alert(1)')).toBe('');
+    expect(safeImageUrl('java\tscript:alert(1)')).toBe('');
+    expect(safeImageUrl('&#106;avascript:alert(1)')).toBe('');
+  });
+
+  test('allows ordinary http(s)/relative urls unchanged, same as safeUrl', () => {
+    expect(safeImageUrl('https://example.com/photo.jpg')).toBe('https://example.com/photo.jpg');
+    expect(safeImageUrl('/assets/photo.jpg')).toBe('/assets/photo.jpg');
+    expect(safeImageUrl('')).toBe('');
+  });
+
+  test('coerces non-string to empty string', () => {
+    expect(safeImageUrl(null as any)).toBe('');
+    expect(safeImageUrl(undefined as any)).toBe('');
+  });
+
+  test('tightened allowlist: blocks a bogus MIME that merely starts with "image" but has no slash (e.g. data:imagehtml/...)', () => {
+    expect(safeImageUrl('data:imagehtml/svg+xml,x')).toBe('');
+  });
+
+  test('tightened allowlist: still allows legit data:image/* subtypes', () => {
+    expect(safeImageUrl('data:image/png;base64,x')).toBe('data:image/png;base64,x');
+    expect(safeImageUrl('data:image/svg+xml,<svg/>')).toBe('data:image/svg+xml,<svg/>');
+  });
+});
+
+describe('safeUrl still blocks data:image/svg+xml (href/iframe/navigation context unchanged by safeImageUrl addition)', () => {
+  test('safeUrl(data:image/svg+xml,...) is still blocked', () => {
+    expect(safeUrl('data:image/svg+xml,<svg onload=alert(1)>')).toBe('');
+  });
+});
+
 describe('stableHash', () => {
  test('same input always produces the same output', () => {
    expect(stableHash('hello')).toBe(stableHash('hello'));
@@ -64,20 +64,7 @@ export function safeUrl(s: string): string {
  const trimmed = s.trim();
  if (trimmed === '') return '';

-  // Build a normalized copy for scheme detection only: decode numeric HTML
-  // entities (catches e.g. &#106; -> 'j'), strip whitespace/control chars,
-  // and lowercase.
-  const normalized = decodeNumericEntities(trimmed)
-    .replace(/[\x00-\x20]+/g, '')
-    .toLowerCase();
-
-  // Strip any colons before matching the scheme prefix. This defeats
-  // obfuscation that splices extra colons into the scheme name itself
-  // (e.g. decoding &#58; mid-word produces "java:script:alert(1)", which
-  // would otherwise dodge a literal "^javascript:" check) while still
-  // reliably catching the real "javascript:"/"vbscript:"/"data:text/html"
-  // prefixes once their own colon is removed.
-  const collapsed = normalized.replace(/:/g, '');
+  const collapsed = normalizeForSchemeCheck(trimmed);

  if (DANGEROUS_SCHEME_PREFIXES.some((prefix) => collapsed.startsWith(prefix))) {
    return '';
@@ -86,6 +73,61 @@ export function safeUrl(s: string): string {
  return trimmed;
 }

+/**
+ * Image-context variant of `safeUrl` for IMAGE sinks only (`<img src>`, CSS
+ * `url(...)` backgrounds). `data:image/svg+xml` is safe here -- loaded as an
+ * image, an SVG is rasterized and never executes an inline <script>/onload=
+ * the way it would as a navigation/iframe document -- so, unlike `safeUrl`,
+ * this ALLOWS every `data:image/*` subtype (svg+xml, png, jpeg, gif, webp,
+ * ..., with or without `;base64`).
+ *
+ * Still blocks `javascript:` / `vbscript:` (same obfuscation-resistant
+ * normalization as `safeUrl`), and -- because this is an image sink, not a
+ * general-purpose URL sink -- treats `data:` as an ALLOWLIST rather than a
+ * blocklist: any `data:` URI whose type is NOT `image/*` (`data:text/html`,
+ * `data:application/javascript`, `data:text/javascript`, etc.) is blocked
+ * too, since none of those are legitimate image sources.
+ *
+ * Do NOT use this for href/iframe/form-action/navigation sinks -- keep
+ * those on `safeUrl`, which still blocks `data:image/svg+xml`.
+ */
+export function safeImageUrl(s: unknown): string {
+  if (typeof s !== 'string') return '';
+
+  const trimmed = s.trim();
+  if (trimmed === '') return '';
+
+  const collapsed = normalizeForSchemeCheck(trimmed);
+
+  if (collapsed.startsWith('javascript') || collapsed.startsWith('vbscript')) {
+    return '';
+  }
+  if (collapsed.startsWith('data') && !collapsed.startsWith('dataimage/')) {
+    // A data: URI whose MIME type isn't image/* -- e.g. data:text/html,
+    // data:application/javascript, data:text/javascript. No legitimate
+    // image source needs these; block unconditionally.
+    return '';
+  }
+
+  return trimmed;
+}
+
+// Normalizes a trimmed URL string for scheme-prefix matching only: decodes
+// numeric HTML entities (catches e.g. &#106; -> 'j'), strips whitespace /
+// control chars, lowercases, then strips every colon. Stripping colons
+// defeats obfuscation that splices extra colons into the scheme name itself
+// (e.g. decoding &#58; mid-word produces "java:script:alert(1)", which would
+// otherwise dodge a literal "^javascript:" check) while still reliably
+// catching the real "javascript:"/"vbscript:"/"data:..." prefixes once their
+// own colon is removed. Used for prefix `.startsWith()` checks only -- the
+// original (non-collapsed) string is always what gets returned/emitted.
+function normalizeForSchemeCheck(trimmed: string): string {
+  return decodeNumericEntities(trimmed)
+    .replace(/[\x00-\x20]+/g, '')
+    .toLowerCase()
+    .replace(/:/g, '');
+}
+
 /**
 * Neutralizes CSS-context breakout for a single design-token value (color,
 * length, gradient, etc.) so it is safe to interpolate RAW into either CSS
@@ -1,5 +1,5 @@
 import { CSSProperties } from 'react';
-import { escapeAttr, safeUrl } from './escape';
+import { escapeAttr, safeImageUrl } from './escape';

 const camelToKebab = (str: string): string =>
  str.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase());
@@ -41,8 +41,12 @@ function sanitizeCssValue(raw: string): string {
    // Neutralize the url(...) reference: validate/strip the scheme and
    // re-wrap in single quotes with the contents escaped for attribute
    // safety. This is already fully safe, `;` and all.
+    // Image-context sink (background/mask/border-image url()): use
+    // safeImageUrl, not safeUrl -- a data:image/svg+xml background is safe
+    // (rasterized, never executed as a document) and must survive here, the
+    // same way it must survive on an <img src>.
    const inner = m[2];
-    out += `url('${escapeAttr(safeUrl(inner.trim()))}')`;
+    out += `url('${escapeAttr(safeImageUrl(inner.trim()))}')`;
    lastIndex = URL_RE.lastIndex;
  }
  out += sanitizeBreakoutChars(raw.slice(lastIndex));
Author	SHA1	Message	Date
shadowdaoandClaude Opus 4.8	da558fd52d	fix(builder): render template header/footer nested content in zone preview + export TemplateModal's addTemplateComponents() built each template component via React.createElement(Component, comp.props) without ever passing comp.children, silently dropping every nested children array authored in templates/definitions.ts (header/footer Container > Logo/Menu/TextBlock, page Section > Heading/TextBlock/ButtonLink). The resulting Craft.js node had nodes: [], so the header/footer zone preview (ZonePreview -> exportBodyHtml) rendered as an empty strip, and published output was affected the same way. Fix converts each TemplateComponent to a SerializedTreeNode and reuses craft-tree.ts's buildNodeTree (sanitize -> flatten -> materialize) -- the same tested tree pipeline already used for AI-generated content -- instead of hand-rolling a React-element tree, since a naive nested-children fix via parseReactElement crashes any component with an internal SHELL_INNER linked canvas (Section/BackgroundSection/FormContainer) or linked columns (ColumnLayout). Also fixes two latent bugs in buildNodeTree itself, only surfaced by exercising it against a real Craft.js editor for the first time: data.type must be the actual resolved component reference (not a string or {resolvedName} object) for correct rendering, and the synthesized SHELL_INNER node needs data.name set for actions.addNodeTree's own validation. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-13 06:19:26 -07:00
jknapp	8aeadefa88	Merge PR #7 : UI polish Phase 2	2026-07-13 04:13:17 +00:00
shadowdao	2066059c35	fix(builder): phase-2 design tweaks (landing home icon, decouple layer-hover from guides, neutral zone separator) - PagesPanel: add fa-home glyph (8px, inherits badge text color) before "Landing" text in the landing-page badge, restoring the icon dropped in an earlier polish pass. - editor.css: split [data-craft-hovered] and [data-layer-hovered] into distinct rules. Layer-hover now uses a solid 2px accent outline (vs the dashed structural guides) and is excluded from the .guides-off suppression list, so the Layers-panel hover->canvas locator still works when "Show guides" is off. Structural guides/hover ([data-craft-node], [data-craft-hovered]) remain correctly gated. - Canvas.tsx: move the header/footer ZonePreview separator border to a .zone-preview-sep class, recolor it from amber (rgba(245,158,11,0.3)) to neutral (rgba(148,163,184,0.25)) to match the empty-state variant, and gate it on .guides-off via CSS descendant selector so it disappears with the rest of the guides.	2026-07-12 21:12:09 -07:00
shadowdaoandClaude Opus 4.8	473fe8d421	feat(builder): item 16 — context menu FA icon per action Every menu item now has an FA icon (previously only "Ask Sitesmith" did, leaving the rest visually misaligned): Duplicate fa-clone, Copy fa-files-o, Paste fa-clipboard, Move Up/Down fa-arrow-up/down, Select Parent fa-level-up, Delete fa-trash (kept its danger-red color). The clipboard-group / structure-group separator already existed via dividerAfter — no structural change needed. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-12 20:56:21 -07:00
shadowdaoandClaude Opus 4.8	5d6ae7946b	fix(builder): item 15 — default header nav no longer links nonexistent pages DEFAULT_HEADER_STATE's Navbar linked Home/About/Services/Contact, but a brand new site only has a Home page — About/Services/Contact were dead links on first click. Simplified the default to Home + an inert "Get Started" CTA (href: '#') rather than seeding placeholder pages nobody asked for. Updated default-header.test.ts's HTML-export assertions to match the new default (and assert the removed links are gone). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-12 20:56:11 -07:00
shadowdaoandClaude Opus 4.8	1c85ab93eb	feat(builder): item 14 — Templates modal close button + category pill hover states Close button (already an FA fa-times icon-button) gains a hover background/color; category pills gain the same hover-background treatment when not active (they were already at the brief's target 12px font-size). Template card hover-lift (translateY(-2px) + shadow) was already implemented — no change needed there. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-12 20:56:05 -07:00
shadowdaoandClaude Opus 4.8	67228f24b4	feat(builder): item 11 — Pages panel hierarchy: neutral header/footer rows, outline Landing badge, icon+tooltip actions Header/Footer zone rows switched from a loud amber zoneButtonStyle to a compact neutral zoneRowStyle in the same surface language as the page list (accent border/bg only when active, matching the page list's own "currently open" treatment). The "Appears on all pages" subtitle moved to a tooltip; a fa-pencil hint fades in on row hover (`.zone-row-pencil` CSS already shipped in the previous commit) and swaps to a check icon while editing that zone. The "LANDING" badge (loud amber uppercase + house icon) is now a small outline badge — muted text, 1px border, no fill, no icon. The page-row rename button's raw `✎` HTML entity is now an FA `fa-pencil` icon with `data-tooltip`/`aria-label`; the delete button (already FA fa-trash) got the same tooltip/aria treatment for consistency. Both dropped their native `title` in favor of `data-tooltip` to avoid a double tooltip. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-12 20:56:00 -07:00
shadowdaoandClaude Opus 4.8	613a44c4d4	feat(builder): items 10+12+13 — scope canvas guides, Show Guides toggle, Layers panel hover/icons, topbar unification Item 10: dashed canvas "guide" outlines were applied via blanket tag selectors (div/section/header/...), so a finished section showed 3-4 nested dashed boxes. RenderNode.tsx (the <Editor onRender> override) now tags each Craft.js droppable container's real DOM node with a `data-craft-node` attribute (node.data.isCanvas, excluding ROOT), and editor.css's guide rules target that attribute instead — a component's own internal wrapper markup is no longer mistaken for a drop target. Added a "Show guides" topbar toggle (default ON, persisted to localStorage), state lifted in EditorShell.tsx (mirrors how `device` is already lifted), flips `.guides-off` on Canvas.tsx's `.canvas-device-frame`. Item 12: Layers panel rows get per-type FA icons (keyed off the same craft.displayName used for the row label, seeded from BlocksPanel's choices), indent-guide lines connecting nested rows, and row hover highlights the matching canvas element (`data-layer-hovered`, written directly to the node's DOM via `query.node(id).get().dom` — NOT via `actions.setNodeEvent`, which is stripped from useEditor()'s public `actions` at runtime, not just in its TS type, and threw when called). Along the way, Craft.js's own connect() was found to already wire mouse hover to the same `hovered` node event internally (previously invisible because the matching CSS was dead) — RenderNode now also mirrors that onto `data-craft-hovered` for a real-mouse-hover canvas highlight, and both hover attributes plus the guide attribute are suppressed under `.guides-off` so the toggle stays airtight. Item 13: unified the topbar to one button radius (`.topbar-btn` 20px pill -> var(--radius-md)), demoted Code/Preview to icon-only with `data-tooltip`. Fixed a latent bug the new tooltips exposed: `[data-tooltip]` tooltips render above their trigger, but the topbar has no room above it (`body { overflow: hidden }`) — added a `.topbar` override to render those below instead. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-12 20:55:52 -07:00
jknapp	5685670895	Merge PR #6 : UI polish Phase 1	2026-07-13 03:22:51 +00:00
shadowdao	72f85a97e5	fix(builder): phase-1 polish a11y follow-ups (dropzone keyboard, badge name, icon aria)	2026-07-12 20:22:11 -07:00
shadowdaoandClaude Opus 4.8	ab28ad8f2c	Merge assets-panel empty state into one dropzone The Assets panel used to show a small always-visible dropzone plus a separate italic "No assets uploaded yet" line stacked underneath it when there were no assets -- two redundant messages for one state. Replace both with a single tall dropzone (icon + "Drag images here or click to upload") that also opens the file picker on click; it collapses back to the original slim "Drop files here to upload" bar once assets exist. Upload/drag-drop behavior is unchanged. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-12 20:15:15 -07:00
shadowdaoandClaude Opus 4.8	05e00c572d	Show component-indicator selection badge in the canvas .component-indicator existed in editor.css but was never rendered anywhere. Add RenderNode.tsx as a Craft.js <Editor onRender> override and wire it in App.tsx: for the currently-selected node (excluding ROOT) it portals a floating badge showing the node's displayName plus a "select parent" chevron wired to actions.selectNode(parentId). Every other node's render passes through untouched (a Fragment, no extra DOM), and the badge portals to document.body positioned via getBoundingClientRect rather than wrapping nodes in extra DOM, so it can't perturb canvas layout and never appears in toHtml export. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-12 20:15:08 -07:00
shadowdaoandClaude Opus 4.8	458069afb6	Show empty-canvas hint on a page with no components yet .empty-canvas-hint existed in editor.css but was never rendered anywhere. Wire it up in Canvas.tsx: an EmptyCanvasHint component reads Craft's ROOT node via useEditor and shows the hint once ROOT exists with zero children, hiding again the instant something is dropped in or while a drag is in progress. It's absolutely positioned over the Frame with pointer-events: none so it never intercepts clicks/drops meant for the underlying (empty) canvas -- scoped to regular page editing only, not the header/footer editing mode. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-12 20:14:58 -07:00
shadowdaoandClaude Opus 4.8	b3e5009aec	Fix preset-grid orphan row for 5/6-item preset sets PresetButtonGrid rendered every preset set into a fixed 4-column .preset-grid, so 5-item sets (RADIUS_PRESETS, SPACING_PRESETS, IMAGE_RADIUS_PRESETS, FONT_WEIGHTS, NavStylePanel's GAP_PRESETS) wrapped a single lone button onto its own row, and the 6-item TEXT_SIZES split unevenly (4+2). PresetButtonGrid now derives a column count from presets.length via defaultPresetGridColumns() -- 5-item sets get a single row of 5, 6-item sets split into two even rows of 3, and anything else keeps the classic 4-column grid -- with an optional `columns` prop for explicit overrides. This fixes every existing call site automatically rather than threading an explicit count through each one. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-12 20:14:38 -07:00
shadowdaoandClaude Opus 4.8	eeb0660d83	Replace emoji-as-icons in editor chrome with Font Awesome Unicode emoji/glyphs (Sitesmith's sparkle, lock, close X) render as tofu on systems without an emoji font. Swap for the FA4 glyphs the rest of the chrome already uses: - SitesmithButton/SitesmithModal: sparkle -> fa-magic, lock -> fa-lock - ContextMenu "Ask Sitesmith" entry: sparkle -> fa-magic (via new optional MenuItem.icon field) - TemplateModal/SitesmithModal close buttons, PagesPanel delete, AssetsPanel delete/cancel: ✕ -> fa-times / fa-trash Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-12 20:14:29 -07:00
shadowdaoandClaude Opus 4.8	138e1a8273	Bump muted/dim text contrast and block label legibility - --color-text-muted #71717a -> #8b8b96 (~4.9:1 on surface) - --color-text-dim #52525b -> #6e6e78 (~3.3:1, decorative-only text) - .block-item-label 10px -> 11px, .block-item-icon 18px -> 20px for hierarchy in the Blocks panel tile grid Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-12 20:14:10 -07:00
jknapp	1b12b79a0d	Merge PR #5 : image placeholder + Gallery/safeImageUrl fix	2026-07-13 02:54:24 +00:00
shadowdao	621bb21d52	fix(builder): safeImageUrl for FeaturesGrid/ContentSlider image sinks + tighten data:image allowlist FeaturesGrid's <img src> and ContentSlider's CSS background-image url() were still on safeUrl, which blocks data:image/svg+xml -- inconsistent with other image sinks already swapped to safeImageUrl and a latent regression for those two components. Swapped both to safeImageUrl; left their navigation sinks (buttonUrl/buttonHref) on safeUrl. Also tightened safeImageUrl's data:image allowlist check to require the slash (dataimage/ not dataimage), so a bogus MIME like data:imagehtml/... can no longer slip past the prefix check.	2026-07-12 19:53:02 -07:00
shadowdaoandClaude Opus 4.8	3f3c6fb851	security: add safeImageUrl, un-break M-5's over-blocking of image-context SVG data URIs M-5 made safeUrl() block data:image/svg+xml everywhere, including the image-only sinks (<img src>, CSS url()) that Gallery's default images and other SVG placeholders rely on. Loaded as an image, an SVG is rasterized and never executes an inline <script>/onload= -- that only happens when it's navigated to or loaded as an <iframe> document -- so M-5 over-blocked the safe contexts and broke every published Gallery (and other components using an SVG placeholder) using safeUrl's default images in prod. Adds safeImageUrl(): identical javascript:/vbscript: handling to safeUrl, but treats data: as an allowlist of image/* subtypes instead of a blocklist -- allows all data:image/* (including svg+xml, with or without base64), still blocks data:text/html and any other non-image data: type. Swapped to safeImageUrl at IMAGE-src / CSS-image url() sinks only: - Gallery.tsx img src + lightbox data-lb-src - ImageBlock.tsx img src (toHtml) - Logo.tsx / Navbar.tsx logo <img> src (their href/link targets keep safeUrl) - style-helpers.ts sanitizeCssValue's url(...) handling (background-image for HeroSimple/BackgroundSection/Section/CallToAction) Left on safeUrl (href/iframe/form-action/navigation sinks, where data:image/svg+xml must stay blocked): ButtonLink, Icon link, SocialLinks, Menu/Navbar link hrefs, PricingTable buttonHref, _cta-helpers, ContentSlider buttonHref, FeaturesGrid buttonUrl, FormContainer action (via form-relay-wiring), MapEmbed/VideoBlock iframe src. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-12 19:45:58 -07:00
shadowdaoandClaude Opus 4.8	802938ec1a	fix(builder): Image block placeholder no longer overridden by explicit src="" BlocksPanel dropped a new Image block with an explicit `src=""` prop, which overrides ImageBlock's `src = PLACEHOLDER_SRC` default parameter (defaults only apply when a prop is undefined, not when it's an empty string). Craft then persisted `src:''`, and the canvas rendered a broken-image icon instead of the placeholder. - ImageBlock render now falls back to PLACEHOLDER_SRC whenever src is falsy (belt-and-braces: also recovers any legacy saved src:'' state). - BlocksPanel no longer passes src="" when dropping a new Image block, so the craft default applies. - ImageStylePanel now restores the placeholder (instead of blanking to '') when the URL field is cleared. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-07-12 19:45:28 -07:00
jknapp	3e43aee6e9	Merge PR #4 : head code to published pages + adversarial-review Minors	2026-07-13 01:37:13 +00:00