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/panels/mobile/BottomSheet.tsx

@@ -0,0 +1,66 @@
+import React, { useEffect } from 'react';
+
+export interface BottomSheetProps {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  children: React.ReactNode;
+}
+
+/**
+ * Mobile-only bottom sheet (Phase A). Slides up from the bottom of the
+ * viewport to host one of the existing side-panel components
+ * (BlocksPanel/PagesPanel/LayersPanel/AssetsPanel/GuidedStyles) unchanged,
+ * as the mobile replacement for the desktop fixed left/right panel columns.
+ * See `MobilePanelBar`, which owns which sheet (if any) is open.
+ *
+ * Deliberately NOT a generic replacement for `src/ui/Modal.tsx` (centered
+ * dialog chrome) -- this is anchored to the bottom, sized to ~65dvh, and
+ * has its own drag-handle affordance + internally scrollable body, all of
+ * which Modal doesn't need for its centered use cases.
+ */
+export const BottomSheet: React.FC<BottomSheetProps> = ({ open, onClose, title, children }) => {
+  useEffect(() => {
+    if (!open) return;
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', handleKeyDown);
+
+    const prevOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+      document.body.style.overflow = prevOverflow;
+    };
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      className="mobile-sheet-backdrop"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div className="mobile-sheet" role="dialog" aria-modal="true" aria-label={title}>
+        <div className="mobile-sheet-handle-row">
+          <span className="mobile-sheet-handle" aria-hidden="true" />
+        </div>
+        <div className="mobile-sheet-header">
+          <span className="mobile-sheet-title">{title}</span>
+          <button
+            type="button"
+            className="mobile-sheet-close"
+            onClick={onClose}
+            aria-label={`Close ${title}`}
+          >
+            <i className="fa fa-times" aria-hidden="true" />
+          </button>
+        </div>
+        <div className="mobile-sheet-body">{children}</div>
+      </div>
+    </div>
+  );
+};

craft/src/panels/mobile/MobilePanelBar.tsx

@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { BottomSheet } from './BottomSheet';
+import { BlocksPanel } from '../left/BlocksPanel';
+import { PagesPanel } from '../left/PagesPanel';
+import { LayersPanel } from '../left/LayersPanel';
+import { AssetsPanel } from '../left/AssetsPanel';
+import { GuidedStyles } from '../right/GuidedStyles';
+
+type MobileTab = 'blocks' | 'pages' | 'layers' | 'assets' | 'styles';
+
+const TABS: { id: MobileTab; label: string; icon: string }[] = [
+  { id: 'blocks', label: 'Blocks', icon: 'fa-cube' },
+  { id: 'pages', label: 'Pages', icon: 'fa-file-o' },
+  { id: 'layers', label: 'Layers', icon: 'fa-sitemap' },
+  { id: 'assets', label: 'Assets', icon: 'fa-image' },
+  { id: 'styles', label: 'Styles', icon: 'fa-paint-brush' },
+];
+
+/**
+ * Mobile replacement for the desktop LeftPanel/RightPanel column layout
+ * (Phase A). A fixed bottom tab bar (Blocks/Pages/Layers/Assets/Styles)
+ * toggles a single `BottomSheet` at a time, hosting the SAME panel
+ * component the desktop side panels use -- unchanged, so behavior/state
+ * stays identical, only the chrome around it differs. Tapping the active
+ * tab again, tapping the backdrop, the sheet's close button, or Escape all
+ * close the open sheet.
+ *
+ * "Styles" hosts `GuidedStyles`, which already falls back to the
+ * site-design panel when nothing is selected and switches to the
+ * per-type style panel once something is -- this is the natural place to
+ * edit a tapped element's styling (Phase B deepens the tap-to-select flow;
+ * this component only wires up the sheet, per the Phase A brief).
+ */
+export const MobilePanelBar: React.FC = () => {
+  const [activeTab, setActiveTab] = useState<MobileTab | null>(null);
+
+  const handleTabClick = (tab: MobileTab) => {
+    setActiveTab((current) => (current === tab ? null : tab));
+  };
+
+  const activeLabel = TABS.find((t) => t.id === activeTab)?.label ?? '';
+
+  return (
+    <>
+      <BottomSheet open={activeTab !== null} onClose={() => setActiveTab(null)} title={activeLabel}>
+        {activeTab === 'blocks' && <BlocksPanel />}
+        {activeTab === 'pages' && <PagesPanel />}
+        {activeTab === 'layers' && <LayersPanel />}
+        {activeTab === 'assets' && <AssetsPanel />}
+        {activeTab === 'styles' && <GuidedStyles />}
+      </BottomSheet>
+
+      <nav className="mobile-tab-bar" aria-label="Editor panels">
+        {TABS.map((tab) => (
+          <button
+            key={tab.id}
+            type="button"
+            className={`mobile-tab-btn${activeTab === tab.id ? ' active' : ''}`}
+            onClick={() => handleTabClick(tab.id)}
+            aria-pressed={activeTab === tab.id}
+          >
+            <i className={`fa ${tab.icon}`} aria-hidden="true" />
+            <span>{tab.label}</span>
+          </button>
+        ))}
+      </nav>
+    </>
+  );
+};