feat(builder): mobile-responsive editor chrome (Phase A)

Makes the Craft.js editor usable on phones (≤768px) without touching desktop
layout/behavior: a useIsMobile() hook gates a bottom tab bar + sheets (hosting
the existing Blocks/Pages/Layers/Assets/Styles panels unchanged) in place of
the side panels, a collapsed TopBar with a "..." overflow menu, 44px touch
targets, 16px inputs, dvh/safe-area-aware sizing, and small copy/overflow
fixes (empty-canvas hint, Templates modal tabs + close button).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

craft/src/editor/Canvas.tsx

@@ -5,6 +5,7 @@ import { usePages } from '../state/PageContext';
 import { DeviceMode } from '../types';
 import { DEVICE_WIDTHS } from '../constants/presets';
 import { exportBodyHtml } from '../utils/html-export';
+import { useIsMobile } from '../hooks/useIsMobile';
 
 interface CanvasProps {
   device: DeviceMode;
@@ -112,13 +113,18 @@ export const EmptyCanvasHint: React.FC = () => {
       isDragging: state.events.dragged.size > 0,
     };
   });
+  const isMobile = useIsMobile();
 
   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>
+      <span>
+        {isMobile
+          ? <>Tap <strong>Blocks</strong> below to add content, or pick a Template to start.</>
+          : 'Drag blocks from the left panel, or pick a Template to start.'}
+      </span>
     </div>
   );
 };