craft/src/editor/Canvas.tsx

@@ -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,13 +83,14 @@ 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',
       }}
     />
   );
@@ -120,7 +123,7 @@ export const EmptyCanvasHint: React.FC = () => {
   );
 };
 
-export const Canvas: React.FC<CanvasProps> = ({ device }) => {
+export const Canvas: React.FC<CanvasProps> = ({ device, showGuides }) => {
   const width = DEVICE_WIDTHS[device];
   const { isEditingHeader, isEditingFooter, headerPage, footerPage } = usePages();
 
@@ -137,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%',

craft/src/editor/EditorShell.tsx

@@ -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>

craft/src/editor/RenderNode.test.tsx

@@ -10,9 +10,11 @@ import { act } from 'react-dom/test-utils';
 let mockNode: {
   id: string;
   selected: boolean;
+  hovered: boolean;
   dom: HTMLElement | null;
   displayName: string;
   parent: string | null;
+  isCanvas: boolean;
 };
 const selectNodeSpy = vi.fn();
 
@@ -20,9 +22,14 @@ vi.mock('@craftjs/core', () => ({
   useEditor: () => ({ actions: { selectNode: selectNodeSpy } }),
   useNode: (collect?: (node: any) => any) => {
     const node = {
-      events: { selected: mockNode.selected },
+      events: { selected: mockNode.selected, hovered: mockNode.hovered },
       dom: mockNode.dom,
-      data: { custom: {}, displayName: mockNode.displayName, parent: mockNode.parent },
+      data: {
+        custom: {},
+        displayName: mockNode.displayName,
+        parent: mockNode.parent,
+        isCanvas: mockNode.isCanvas,
+      },
     };
     return { id: mockNode.id, ...(collect ? collect(node) : {}) };
   },
@@ -46,7 +53,15 @@ function render(ui: React.ReactElement) {
 beforeEach(() => {
   nodeDom = document.createElement('div');
   document.body.appendChild(nodeDom);
-  mockNode = { id: 'node-1', selected: false, dom: nodeDom, displayName: 'Heading', parent: 'ROOT' };
+  mockNode = {
+    id: 'node-1',
+    selected: false,
+    hovered: false,
+    dom: nodeDom,
+    displayName: 'Heading',
+    parent: 'ROOT',
+    isCanvas: false,
+  };
   selectNodeSpy.mockClear();
 });
 
@@ -105,4 +120,50 @@ describe('RenderNode (Editor onRender override)', () => {
     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();
+  });
 });

craft/src/editor/RenderNode.tsx

@@ -14,14 +14,36 @@ interface RenderNodeProps {
  * 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 } = useNode((node) => ({
+  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);
@@ -46,6 +68,24 @@ export const RenderNode: React.FC<RenderNodeProps> = ({ render }) => {
     };
   }, [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 (

craft/src/panels/context-menu/ContextMenu.tsx

@@ -199,18 +199,21 @@ export const ContextMenu: React.FC<ContextMenuProps> = ({
     },
     {
       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(),
@@ -218,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,

craft/src/panels/left/LayersPanel.tsx

@@ -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>

craft/src/panels/left/PagesPanel.tsx

@@ -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,

craft/src/panels/topbar/TemplateModal.tsx

@@ -247,7 +247,13 @@ export const TemplateModal: React.FC<TemplateModalProps> = ({ open, onClose }) =
               Choose a template to get started quickly
             </p>
           </div>
-          <button onClick={onClose} style={closeButtonStyle} title="Close">
+          <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 +268,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>

craft/src/panels/topbar/TopBar.tsx

@@ -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 */}

craft/src/state/PageContext.tsx

@@ -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',

craft/src/state/default-header.test.ts

@@ -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');
   });
 });

craft/src/styles/editor.css

@@ -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
    -------------------------------------------------------------------------- */
@@ -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,11 +1099,6 @@ body {
   outline-offset: -1px;
 }
 
-.craftjs-renderer [data-hovered="true"] {
-  outline: 1px dashed var(--color-accent) !important;
-  outline-offset: -1px;
-}
-
 /* Component indicator badge (floats over the selected node via a portal --
    position/top/left are set inline per-node, see RenderNode.tsx) */
 .component-indicator {
@@ -1153,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
    -------------------------------------------------------------------------- */
@@ -1183,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
    -------------------------------------------------------------------------- */