feat(mobile): Figma-like hide-UI toggle — Cmd/Ctrl+\ hotkey + floating button, snapshot-exact chrome restore

Chrome visibility is now a runtime toggle on any device instead of being
device-wired: mobile defaults to canvas-only, desktop to full UI, and the
floating top-right button (or Figma's Cmd/Ctrl+\ chord — free in KiCad,
only bare \ is bound) flips between them live.

- chrome-visibility.ts: module-global store (default isMobileMode(),
  session-only) + pure hotkey matcher (rejects AltGr backslash + repeats)
- WasmTool: capture-phase hotkey (stopped before the wx layer), floating
  toggle pill (matches the comment FAB design), useLayoutEffect apply with
  sync first call + retry; overlays follow the toggle, capability-gated on
  the kicad_editor bundle's kicadSetChrome export
- boot.ts mobile opt now installs touch gestures only
- kicadSetChrome: frame-keyed hide-time snapshot so restore re-shows ONLY
  what hide took away (blanket Show(true) surfaced KiCad's default-hidden
  Search/Properties/Net-Inspector panes); toolbars-only fallback otherwise
- tests: chrome-toggle.spec.ts (desktop hide/restore + geometric
  restore-exactness ±3px), mobile toggle round-trip, 12 new unit tests,
  test:web:mobile npm script

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

tests/package.json

@@ -13,6 +13,7 @@
     "setup:kicad": "./scripts/setup-kicad-wasm.sh",
     "test:web": "npm run setup:kicad && playwright test --config=playwright-web.config.ts --project=firefox",
     "test:web:headed": "npm run setup:kicad && playwright test --config=playwright-web.config.ts --project=chromium --headed",
+    "test:web:mobile": "npm run setup:kicad && playwright test --config=playwright-web.config.ts --project=mobile-chromium --headed",
     "test:kicad:firefox": "npm run setup:kicad && playwright test --config=playwright-kicad.config.ts --project=firefox",
     "test:kicad:chrome": "npm run setup:kicad && playwright test --config=playwright-kicad.config.ts --project=chromium --headed",
     "test:kicad": "npm run test:kicad:firefox",

tests/web/chrome-toggle.spec.ts

@@ -0,0 +1,131 @@
+import { test, expect, type Browser, type Page } from '@playwright/test';
+
+/**
+ * Figma-like "hide UI" toggle e2e (desktop): Cmd/Ctrl+\ and the floating
+ * button flip the editor between full UI and canvas-only, and a restore
+ * brings back EXACTLY the chrome that was visible before — panes KiCad keeps
+ * hidden by default (Search, Properties, …) must not appear. That last part
+ * is asserted geometrically: the GAL canvas box after hide→show must equal
+ * the pre-hide box (an over-shown panel would shrink the AUI center pane).
+ *
+ * Boots once (beforeAll) and runs the round trip over the shared page —
+ * the config is workers:1 / fullyParallel:false, so file order holds.
+ */
+
+const SCOPE = 'default';
+const FRONTEND_URL = process.env.WEB_APP_URL ?? 'http://localhost:3048';
+
+let page: Page;
+/** Full-UI GAL canvas box captured before the first hide — the restore-exactness baseline. */
+let fullUiBox: { x: number; y: number; width: number; height: number };
+
+/** Count of visible menubar titles (0 ⇒ menubar hidden). */
+async function visibleMenuTitles(pg: Page): Promise<number> {
+  return pg.evaluate(
+    () =>
+      Array.from(document.querySelectorAll('.wx-menu-title')).filter((el) => {
+        const r = el.getBoundingClientRect();
+        return r.width > 0 && r.height > 0 && getComputedStyle(el).display !== 'none';
+      }).length,
+  );
+}
+
+/** The visible GAL WebGL canvas box (same lookup as mobile-editor.spec.ts). */
+async function getGlBox(pg: Page): Promise<{ x: number; y: number; width: number; height: number }> {
+  const id = await pg.evaluate(() => {
+    const visible = Array.from(document.querySelectorAll('[id^="glcanvas-"]'))
+      .map((c) => c as HTMLCanvasElement)
+      .find((c) => {
+        const rect = c.getBoundingClientRect();
+        return window.getComputedStyle(c).display !== 'none' && rect.width > 0 && rect.height > 0;
+      });
+    return (visible ?? (document.querySelector('[id^="glcanvas-"]') as HTMLCanvasElement | null))?.id ?? null;
+  });
+  if (!id) throw new Error('No visible GL canvas found');
+  const box = await pg.locator(`#${id}`).boundingBox();
+  if (!box) throw new Error('GL canvas bounding box unavailable');
+  return box;
+}
+
+test.beforeAll(async ({ browser }: { browser: Browser }) => {
+  test.setTimeout(420_000); // cold load: 136 MB wasm download + compile
+  page = await browser.newPage({ baseURL: FRONTEND_URL });
+  await page.goto(`/${SCOPE}/projects/demo/demo.kicad_pcb`);
+  await expect(page.locator('#canvas')).toBeVisible({ timeout: 180000 });
+  await expect
+    .poll(() => page.title(), { timeout: 120000, intervals: [1000] })
+    .toMatch(/demo — PCB Editor/i);
+  // Loading overlays (boot + lib fat-load, both `inset-0 z-30`) must be gone
+  // before geometry is trusted.
+  await expect(page.locator('div.inset-0.z-30')).toHaveCount(0, { timeout: 180000 });
+});
+
+test.afterAll(async () => {
+  await page?.close();
+});
+
+test('Ctrl+\\ hides every non-canvas UI element; the canvas reclaims the viewport', async () => {
+  test.setTimeout(120_000);
+  const vp = page.viewportSize()!;
+
+  // full-UI baseline: menubar + console footer present, canvas NOT full-bleed
+  expect(await visibleMenuTitles(page), 'menubar visible before hide').toBeGreaterThan(0);
+  await expect(page.getByText(/console \(/)).toHaveCount(1);
+  fullUiBox = await getGlBox(page);
+  expect(fullUiBox.width, 'chrome occupies width before hide').toBeLessThan(vp.width * 0.95);
+
+  await page.keyboard.press('Control+\\');
+
+  await expect.poll(() => visibleMenuTitles(page), { timeout: 15000 }).toBe(0);
+  await expect
+    .poll(async () => (await getGlBox(page)).width, { timeout: 15000 })
+    .toBeGreaterThan(vp.width * 0.95);
+  expect((await getGlBox(page)).height, 'GL canvas height ≈ viewport').toBeGreaterThan(
+    vp.height * 0.9,
+  );
+  // shell overlays follow the toggle…
+  await expect(page.getByText(/console \(/)).toHaveCount(0);
+  // …but the toggle button itself stays reachable
+  await expect(page.locator('[data-testid="chrome-toggle"]')).toBeVisible();
+
+  await page.screenshot({ path: 'test-results/web-chrome-hidden.png', scale: 'css' });
+});
+
+test('the floating button restores EXACTLY the pre-hide chrome (no over-shown panes)', async () => {
+  test.setTimeout(120_000);
+
+  // still hidden from the previous test — restore via the button
+  await page.locator('[data-testid="chrome-toggle"]').click();
+
+  await expect.poll(() => visibleMenuTitles(page), { timeout: 15000 }).toBeGreaterThan(0);
+  await expect(page.getByText(/console \(/)).toHaveCount(1);
+
+  // The restored GAL canvas box must MATCH the pre-hide baseline: a blanket
+  // Show(true) would also reveal KiCad's default-hidden panels (Search,
+  // Properties, …), shrinking the AUI center pane and moving this box.
+  await expect
+    .poll(
+      async () => {
+        const b = await getGlBox(page);
+        return (
+          Math.abs(b.x - fullUiBox.x) <= 3 &&
+          Math.abs(b.y - fullUiBox.y) <= 3 &&
+          Math.abs(b.width - fullUiBox.width) <= 3 &&
+          Math.abs(b.height - fullUiBox.height) <= 3
+        );
+      },
+      {
+        message: 'restored GL canvas box must equal the pre-hide baseline (over-shown pane?)',
+        timeout: 15000,
+      },
+    )
+    .toBe(true);
+
+  // hotkey round trip still works after a button toggle
+  await page.keyboard.press('Control+\\'); // hide
+  await expect.poll(() => visibleMenuTitles(page), { timeout: 15000 }).toBe(0);
+  await page.keyboard.press('Control+\\'); // show
+  await expect.poll(() => visibleMenuTitles(page), { timeout: 15000 }).toBeGreaterThan(0);
+
+  await page.screenshot({ path: 'test-results/web-chrome-restored.png', scale: 'css' });
+});

tests/web/mobile-editor.spec.ts

@@ -280,20 +280,24 @@ test('pan: one-finger drag translates the view (not a rubber-band select)', asyn
   expect(dBack, 'panning back returns near baseline').toBeLessThan(dPan / 3);
 });
 
-test('editor is canvas-only: no menubar, GL canvas fills the viewport', async () => {
-  await shot('chrome');
-
-  // The menubar is real DOM (.wx-menu-title per menu); AUI toolbars/panels are
-  // canvas islands, so the GL-canvas-fills-viewport check below is what proves
-  // THEY are gone (hidden AUI panes release their space to the center pane).
-  const menus = await page.evaluate(
+/** Count of visible menubar titles (0 ⇒ menubar hidden). */
+async function visibleMenuTitles(pg: Page): Promise<number> {
+  return pg.evaluate(
     () =>
       Array.from(document.querySelectorAll('.wx-menu-title')).filter((el) => {
         const r = el.getBoundingClientRect();
         return r.width > 0 && r.height > 0 && getComputedStyle(el).display !== 'none';
       }).length,
   );
-  expect(menus, 'no visible menubar titles').toBe(0);
+}
+
+test('editor is canvas-only: no menubar, GL canvas fills the viewport', async () => {
+  await shot('chrome');
+
+  // The menubar is real DOM (.wx-menu-title per menu); AUI toolbars/panels are
+  // canvas islands, so the GL-canvas-fills-viewport check below is what proves
+  // THEY are gone (hidden AUI panes release their space to the center pane).
+  expect(await visibleMenuTitles(page), 'no visible menubar titles').toBe(0);
 
   // the drawing canvas reclaims the whole viewport
   const box = await getGlBox(page);
@@ -304,3 +308,30 @@ test('editor is canvas-only: no menubar, GL canvas fills the viewport', async ()
   // the shell's own persistent overlays are gone too
   expect(await page.getByText(/console \(/).count(), 'console toggle hidden').toBe(0);
 });
+
+test('the floating toggle brings the full UI up and back off (Figma-like hide-UI)', async () => {
+  // Canvas-only is the mobile DEFAULT, but the toggle must stay reachable.
+  const toggle = page.locator('[data-testid="chrome-toggle"]');
+  await expect(toggle, 'toggle button present in canvas-only mode').toBeVisible();
+
+  await toggle.tap();
+  await expect
+    .poll(() => visibleMenuTitles(page), { timeout: 15000 })
+    .toBeGreaterThan(0);
+  // console footer follows the toggle (full shell UI back)
+  await expect(page.getByText(/console \(/)).toHaveCount(1);
+  // chrome takes real estate again (side toolbars + layers panel eat width)
+  const shown = await getGlBox(page);
+  const vp = page.viewportSize()!;
+  expect(shown.width, 'chrome reclaims width').toBeLessThan(vp.width * 0.95);
+  await shot('toggle-shown');
+
+  // …and back to canvas-only, leaving the file in its baseline hidden state.
+  await toggle.tap();
+  await expect.poll(() => visibleMenuTitles(page), { timeout: 15000 }).toBe(0);
+  await expect
+    .poll(async () => (await getGlBox(page)).width, { timeout: 15000 })
+    .toBeGreaterThan(vp.width * 0.95);
+  expect(await page.getByText(/console \(/).count(), 'console toggle hidden again').toBe(0);
+  await shot('toggle-rehidden');
+});