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>

craft/src/editor/Canvas.tsx

@@ -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';
@@ -93,6 +93,33 @@ const ZonePreview: React.FC<{ craftState: string | null; zone: 'header' | 'foote
   );
 };
 
+/**
+ * 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 }) => {
   const width = DEVICE_WIDTHS[device];
   const { isEditingHeader, isEditingFooter, headerPage, footerPage } = usePages();
@@ -140,14 +167,17 @@ export const Canvas: React.FC<CanvasProps> = ({ device }) => {
           <ZonePreview craftState={headerPage.craftState} zone="header" />
         )}
 
-        <Frame>
-          <Element
-            is={Container}
-            canvas
-            tag={frameTag}
-            style={frameStyle}
-          />
-        </Frame>
+        <div style={{ position: 'relative' }}>
+          <Frame>
+            <Element
+              is={Container}
+              canvas
+              tag={frameTag}
+              style={frameStyle}
+            />
+          </Frame>
+          {isEditingRegularPage && <EmptyCanvasHint />}
+        </div>
 
         {isEditingRegularPage && (
           <ZonePreview craftState={footerPage.craftState} zone="footer" />