fix(builder): mobile-A2 hardening -- 16px inputs, shared sheet/modal chrome, z-scale + portal

- Force font-size:16px !important on Styles-sheet/topbar/Sitesmith inputs
  inside the mobile media query so inline 12px/14px styles stop triggering
  iOS zoom-on-focus.
- Lift sheet-open + Templates/Head Code modal-open state out of private
  useState into a shared MobileChromeContext (EditorShell), so Phase B can
  open/close sheets from outside MobilePanelBar.
- Add an explicit z-index layer scale, portal TemplateModal to
  document.body (was trapped under the tab bar inside .topbar's stacking
  context), align Sitesmith to the same --z-modal layer, and make opening
  a sheet close any open modal. Also fix modal backdrops swallowing tab
  bar taps (mirrors the sheet backdrop's existing tab-bar cutout).
- Drop BottomSheet's incorrect aria-modal; mobile-aware AssetsPanel empty
  state copy.
- Tests: useIsMobile (matchMedia mock incl. legacy fallback + cleanup),
  MobileChromeContext invariants (one sheet open, sheet closes modals),
  MobilePanelBar wiring.

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

craft/src/panels/left/AssetsPanel.tsx

@@ -2,12 +2,14 @@ import React, { useEffect, useRef, useState, useCallback } from 'react';
 import { useAssets } from '../../hooks/useAssets';
 import { clickableProps } from '../../utils/a11y';
 import { copyToClipboard } from '../../utils/clipboard';
+import { useIsMobile } from '../../hooks/useIsMobile';
 
 /** How long the "Delete?" confirm state stays armed before auto-resetting. */
 const DELETE_CONFIRM_TIMEOUT_MS = 4000;
 
 export const AssetsPanel: React.FC = () => {
   const { assets, loading, error, loadAssets, uploadAsset, deleteAsset } = useAssets();
+  const isMobile = useIsMobile();
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [isDragOver, setIsDragOver] = useState(false);
   const [copiedUrl, setCopiedUrl] = useState<string | null>(null);
@@ -139,7 +141,9 @@ export const AssetsPanel: React.FC = () => {
         {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'}
+        {assets.length === 0
+          ? (isMobile ? 'Tap to upload images' : 'Drag images here or click to upload')
+          : 'Drop files here to upload'}
       </div>
 
       {/* Error message */}

craft/src/panels/mobile/BottomSheet.tsx

@@ -44,7 +44,11 @@ export const BottomSheet: React.FC<BottomSheetProps> = ({ open, onClose, title,
         if (e.target === e.currentTarget) onClose();
       }}
     >
-      <div className="mobile-sheet" role="dialog" aria-modal="true" aria-label={title}>
+      {/* Deliberately NOT aria-modal: the tab bar stays reachable/operable
+          while a sheet is open (tapping another tab swaps sheets directly),
+          so the rest of the screen must not be marked inert to assistive
+          tech the way a true modal dialog would be. */}
+      <div className="mobile-sheet" role="dialog" aria-label={title}>
         <div className="mobile-sheet-handle-row">
           <span className="mobile-sheet-handle" aria-hidden="true" />
         </div>

craft/src/panels/mobile/MobilePanelBar.test.tsx

@@ -0,0 +1,145 @@
+import { describe, test, expect, vi } from 'vitest';
+import React from 'react';
+import { createRoot, Root } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { MobilePanelBar } from './MobilePanelBar';
+import { MobileChromeProvider } from '../../state/MobileChromeContext';
+
+/**
+ * Mobile-A2 (review item 5): the real BlocksPanel/PagesPanel/LayersPanel/
+ * AssetsPanel/GuidedStyles all pull in Craft.js's `useEditor` and other
+ * heavy dependencies not relevant here, so they're stubbed out -- this
+ * suite is only exercising MobilePanelBar's OWN wiring: tapping a tab opens
+ * that tab's sheet with only its panel rendered, tapping the active tab
+ * again closes it, and (mirroring MobileChromeContext.test.tsx) only one
+ * sheet's content is ever mounted at once.
+ */
+vi.mock('../left/BlocksPanel', () => ({ BlocksPanel: () => <div data-testid="panel-blocks" /> }));
+vi.mock('../left/PagesPanel', () => ({ PagesPanel: () => <div data-testid="panel-pages" /> }));
+vi.mock('../left/LayersPanel', () => ({ LayersPanel: () => <div data-testid="panel-layers" /> }));
+vi.mock('../left/AssetsPanel', () => ({ AssetsPanel: () => <div data-testid="panel-assets" /> }));
+vi.mock('../right/GuidedStyles', () => ({ GuidedStyles: () => <div data-testid="panel-styles" /> }));
+
+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);
+  });
+}
+
+function unmount() {
+  act(() => {
+    root.unmount();
+  });
+  container.remove();
+}
+
+function tabButton(label: string): HTMLButtonElement {
+  const buttons = Array.from(container.querySelectorAll('.mobile-tab-btn')) as HTMLButtonElement[];
+  const btn = buttons.find((b) => b.textContent?.includes(label));
+  if (!btn) throw new Error(`No tab button found for "${label}"`);
+  return btn;
+}
+
+function openPanelIds(): string[] {
+  return Array.from(container.querySelectorAll('[data-testid^="panel-"]')).map(
+    (el) => (el as HTMLElement).dataset.testid!,
+  );
+}
+
+describe('MobilePanelBar', () => {
+  test('no sheet is open initially', () => {
+    render(
+      <MobileChromeProvider>
+        <MobilePanelBar />
+      </MobileChromeProvider>,
+    );
+    expect(container.querySelector('.mobile-sheet-backdrop')).toBeNull();
+    expect(openPanelIds()).toEqual([]);
+    unmount();
+  });
+
+  test('tapping a tab opens exactly that tab\'s panel', () => {
+    render(
+      <MobileChromeProvider>
+        <MobilePanelBar />
+      </MobileChromeProvider>,
+    );
+
+    act(() => {
+      tabButton('Blocks').click();
+    });
+    expect(openPanelIds()).toEqual(['panel-blocks']);
+
+    unmount();
+  });
+
+  test('switching tabs replaces the open sheet -- only one panel mounted at a time', () => {
+    render(
+      <MobileChromeProvider>
+        <MobilePanelBar />
+      </MobileChromeProvider>,
+    );
+
+    act(() => {
+      tabButton('Blocks').click();
+    });
+    expect(openPanelIds()).toEqual(['panel-blocks']);
+
+    act(() => {
+      tabButton('Styles').click();
+    });
+    expect(openPanelIds()).toEqual(['panel-styles']);
+
+    act(() => {
+      tabButton('Assets').click();
+    });
+    expect(openPanelIds()).toEqual(['panel-assets']);
+
+    unmount();
+  });
+
+  test('tapping the active tab again closes the sheet', () => {
+    render(
+      <MobileChromeProvider>
+        <MobilePanelBar />
+      </MobileChromeProvider>,
+    );
+
+    act(() => {
+      tabButton('Pages').click();
+    });
+    expect(openPanelIds()).toEqual(['panel-pages']);
+    expect(container.querySelector('.mobile-sheet-backdrop')).not.toBeNull();
+
+    act(() => {
+      tabButton('Pages').click();
+    });
+    expect(openPanelIds()).toEqual([]);
+    expect(container.querySelector('.mobile-sheet-backdrop')).toBeNull();
+
+    unmount();
+  });
+
+  test('active tab button carries aria-pressed=true only for the open sheet', () => {
+    render(
+      <MobileChromeProvider>
+        <MobilePanelBar />
+      </MobileChromeProvider>,
+    );
+
+    act(() => {
+      tabButton('Layers').click();
+    });
+
+    expect(tabButton('Layers').getAttribute('aria-pressed')).toBe('true');
+    expect(tabButton('Blocks').getAttribute('aria-pressed')).toBe('false');
+
+    unmount();
+  });
+});

craft/src/panels/mobile/MobilePanelBar.tsx

@@ -1,14 +1,13 @@
-import React, { useState } from 'react';
+import React 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';
+import { useMobileChrome, MobileSheetTab } from '../../state/MobileChromeContext';
 
-type MobileTab = 'blocks' | 'pages' | 'layers' | 'assets' | 'styles';
-
-const TABS: { id: MobileTab; label: string; icon: string }[] = [
+const TABS: { id: MobileSheetTab; 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' },
@@ -30,24 +29,30 @@ const TABS: { id: MobileTab; label: string; icon: string }[] = [
  * 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).
+ *
+ * Sheet-open state itself lives in `MobileChromeContext` (Mobile-A2), not
+ * a private `useState`, so Phase B can open/close a sheet from elsewhere
+ * (e.g. a canvas selection toolbar). The toggle-to-close-on-repeat-tap
+ * behavior is local to this click handler -- `openSheet` always opens.
  */
 export const MobilePanelBar: React.FC = () => {
-  const [activeTab, setActiveTab] = useState<MobileTab | null>(null);
+  const { activeSheet, openSheet, closeSheet } = useMobileChrome();
 
-  const handleTabClick = (tab: MobileTab) => {
-    setActiveTab((current) => (current === tab ? null : tab));
+  const handleTabClick = (tab: MobileSheetTab) => {
+    if (activeSheet === tab) closeSheet();
+    else openSheet(tab);
   };
 
-  const activeLabel = TABS.find((t) => t.id === activeTab)?.label ?? '';
+  const activeLabel = TABS.find((t) => t.id === activeSheet)?.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 open={activeSheet !== null} onClose={closeSheet} title={activeLabel}>
+        {activeSheet === 'blocks' && <BlocksPanel />}
+        {activeSheet === 'pages' && <PagesPanel />}
+        {activeSheet === 'layers' && <LayersPanel />}
+        {activeSheet === 'assets' && <AssetsPanel />}
+        {activeSheet === 'styles' && <GuidedStyles />}
       </BottomSheet>
 
       <nav className="mobile-tab-bar" aria-label="Editor panels">
@@ -55,9 +60,9 @@ export const MobilePanelBar: React.FC = () => {
           <button
             key={tab.id}
             type="button"
-            className={`mobile-tab-btn${activeTab === tab.id ? ' active' : ''}`}
+            className={`mobile-tab-btn${activeSheet === tab.id ? ' active' : ''}`}
             onClick={() => handleTabClick(tab.id)}
-            aria-pressed={activeTab === tab.id}
+            aria-pressed={activeSheet === tab.id}
           >
             <i className={`fa ${tab.icon}`} aria-hidden="true" />
             <span>{tab.label}</span>

craft/src/panels/sitesmith/ChatInput.tsx

@@ -10,6 +10,7 @@ export const ChatInput: React.FC<Props> = ({ disabled, placeholder, onSend }) =>
     <div style={{ display: 'flex', gap: 8, padding: '8px 0' }}>
       <textarea value={v} onChange={(e) => setV(e.target.value)} onKeyDown={onKey} rows={2} disabled={disabled}
         placeholder={placeholder || 'Describe what you want...'}
+        className="sitesmith-textarea"
         style={{
           flex: 1, background: disabled ? '#1f1f24' : '#0f0f17', color: '#e5e7eb',
           border: '1px solid #3f3f46', borderRadius: 6, padding: 10, fontSize: 14, resize: 'none',

craft/src/panels/sitesmith/SitesmithModal.tsx

@@ -98,7 +98,7 @@ export const SitesmithModal: React.FC<Props> = ({ onClose, target }) => {
       onClose={onClose}
       closeOnEscape={false}
       closeOnBackdropClick={false}
-      backdropStyle={{ backgroundColor: 'rgba(0,0,0,0.8)', zIndex: 9000 }}
+      backdropStyle={{ backgroundColor: 'rgba(0,0,0,0.8)' }}
       backdropProps={{ role: 'dialog', 'aria-modal': true }}
     >
       <div style={panel}>

craft/src/panels/topbar/TemplateModal.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useCallback, useMemo, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
 import { useEditor } from '@craftjs/core';
 import { usePages } from '../../state/PageContext';
 import { useSiteDesign } from '../../state/SiteDesignContext';
@@ -238,7 +239,14 @@ export const TemplateModal: React.FC<TemplateModalProps> = ({ open, onClose }) =
     }
   }, [confirmTemplate, applyDesign, pages, addPage, switchPage, deletePage, updateDesign, addTemplateComponents, clearCanvas, applyHeaderFooter, wait, onClose]);
 
-  return (
+  // Mobile-A2: portaled to `document.body` -- TopBar.tsx mounts this modal
+  // as a child of `.topbar`, which (as a flex item with its own z-index)
+  // forms its own stacking context. That trapped the modal's fixed-position
+  // backdrop underneath the mobile tab bar (z-index: var(--z-tabbar)) no
+  // matter how high the modal's own z-index was set. Portaling escapes that
+  // stacking context entirely so `--z-modal` (see editor.css) is evaluated
+  // at the document root, same as SitesmithModal.
+  return createPortal(
     <Modal open={open} onClose={handleModalClose}>
       <div style={modalStyle}>
         {/* Header */}
@@ -381,7 +389,8 @@ export const TemplateModal: React.FC<TemplateModalProps> = ({ open, onClose }) =
           </div>
         )}
       </div>
-    </Modal>
+    </Modal>,
+    document.body,
   );
 };
 

craft/src/panels/topbar/TopBar.tsx

@@ -5,6 +5,7 @@ import { useWhpApi } from '../../hooks/useWhpApi';
 import { usePages } from '../../state/PageContext';
 import { useSiteDesign } from '../../state/SiteDesignContext';
 import { useIsMobile } from '../../hooks/useIsMobile';
+import { useMobileChrome } from '../../state/MobileChromeContext';
 import { DeviceMode } from '../../types';
 import { TemplateModal } from './TemplateModal';
 import { HeadCodeModal } from './HeadCodeModal';
@@ -33,9 +34,10 @@ export const TopBar: React.FC<TopBarProps> = ({ device, onDeviceChange, showGuid
   const [saveStatus, setSaveStatus] = useState<'idle' | 'saving' | 'saved' | 'error'>('idle');
   const [publishStatus, setPublishStatus] = useState<'idle' | 'publishing' | 'published' | 'error'>('idle');
   const [isDraft, setIsDraft] = useState(false);
-  const [templateModalOpen, setTemplateModalOpen] = useState(false);
-  const [headCodeModalOpen, setHeadCodeModalOpen] = useState(false);
-  const [overflowOpen, setOverflowOpen] = useState(false);
+  // Mobile-A2: lifted from private useState into MobileChromeContext so
+  // opening a mobile sheet can close these modals (item 3) -- behavior is
+  // otherwise identical for both the desktop and mobile branches below.
+  const { templateModalOpen, setTemplateModalOpen, headCodeModalOpen, setHeadCodeModalOpen, overflowOpen, setOverflowOpen } = useMobileChrome();
   const isMobile = useIsMobile();
   const { open: openSitesmith } = useSitesmithModal();
   const saveTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -247,7 +249,7 @@ export const TopBar: React.FC<TopBarProps> = ({ device, onDeviceChange, showGuid
           <button
             type="button"
             className={`topbar-btn icon-only overflow-toggle${overflowOpen ? ' active' : ''}`}
-            onClick={() => setOverflowOpen((v) => !v)}
+            onClick={() => setOverflowOpen(!overflowOpen)}
             aria-label="More options"
             aria-expanded={overflowOpen}
             aria-haspopup="menu"