Give the scene tab a header with Fit and the eye (#245)

The scene view had no header bar of its own, and its eye sat in the
top bar. Switching between Scene and Game also showed two different
pictures, since nothing tied the free view to the camera.

- Theme.headerPadding (4) replaces Theme.padding in the top bar and
  in TabHeader, for the padding and for minHeight. Both bars shrink
  from 40 to 32 px. Nothing else uses the new value.
- The new ScenePane wraps the scene view in a header bar with Fit
  and the visibility eye. The eye is gone from the top bar, which
  keeps the menu, undo and redo.
- Fit with an active camera shows the world exactly as the Game tab
  does at its chosen step: the same zoom, and the camera centre on
  the same screen pixel. The rule is the pure freeViewOfCamera in
  viewport/view.ts, which also mirrors the letterbox snapping.
- Fit without a camera frames all content on a whole step, as
  before.
- New hook __gm.sceneHeaderAt(name). e2e 46g opens the eye there.
- The doc comment above Theme.treeIndent went away in the working
  tree along with this. It is committed as found.

Not checked: the two views only match while they have the same size.
With the tilemap panel open the scene view is narrower, and Auto may
pick a smaller step there.

Tests:
- ./check.sh: 178 files, 2575 tests, CHECK EXIT 0
- 2 new unit tests in view.test.ts: three cameras times four steps
  land on the same screen point as in the Game tab, Auto stays whole
- e2e 3h (2 checks): a real click on Fit at Auto and at Fit, crate,
  camera frame and view box match in both tabs
- GM_STEPS=1-3,46: ALL PASSED, 94 checks
- Counter-probes: without the centre offset the unit test fails,
  with Fit ignoring the camera both 3h checks fail

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/editor/panels/SceneVisibilityPopup.ts

@@ -19,7 +19,7 @@ function gap(w: number): Spacer {
 }
 
 /**
- * The eye in the top bar: every type that can be placed, and per type a switch for its symbol, its
+ * The eye in the scene tab's header: every type that can be placed, and per type a switch for its symbol, its
  * name and – a collider only – its outline in the scene view. A switch a type does not have is
  * greyed out, or missing where no other type has it either. Clicks keep it open: one usually
  * switches several.

src/editor/panels/Toolbar.ts

@@ -1,7 +1,6 @@
 import { Graphics } from 'pixi.js';
 import { Button, drawHeaderBar, Dropdown, HStack, Label, Spacer, Theme, type Widget } from '../../ui';
 import type { EditorState, SaveStatus } from '../state';
-import { SceneVisibilityPopup } from './SceneVisibilityPopup';
 import { TOOLBAR_ICON_SVG } from './toolbarIcons';
 
 /** What the toolbar buttons trigger; the editor supplies the implementations. */
@@ -38,8 +37,8 @@ function iconButton(name: IconName, onClick: () => void): Button {
 }
 
 /**
- * Top bar (#183): menu, undo, redo and the scene view's eye on the left, play and pause in the
- * middle, the account on the right – icons, no captions. Everything with words is behind the menu: the project name and
+ * Top bar (#183): menu, undo and redo on the left, play and pause in the middle, the account on
+ * the right – icons, no captions. Everything with words is behind the menu: the project name and
  * the start-scene switch in Project settings, the project list in Open project. The scene is
  * picked where the scenes are, in the Assets panel.
  */
@@ -48,8 +47,6 @@ export class Toolbar extends HStack {
   private readonly menuButton: Button;
   private readonly undoButton: Button;
   private readonly redoButton: Button;
-  /** What the scene view shows of each type – symbols, names, collider outlines. */
-  private readonly visibilityButton: Dropdown;
   private readonly playButton: Button;
   private readonly pauseButton: Button;
   private readonly status: Label;
@@ -63,8 +60,8 @@ export class Toolbar extends HStack {
     private readonly state: EditorState,
     actions: ToolbarActions,
   ) {
-    super({ gap: Theme.gap, padding: Theme.padding, align: 'center' });
-    this.minHeight = Theme.controlHeight + Theme.padding * 2;
+    super({ gap: Theme.gap, padding: Theme.headerPadding, align: 'center' });
+    this.minHeight = Theme.controlHeight + Theme.headerPadding * 2;
     this.addChildAt(this.bg, 0);
 
     this.menuButton = iconButton('menu', () => actions.openMainMenu(this.menuButton));
@@ -74,12 +71,6 @@ export class Toolbar extends HStack {
     this.redoButton = iconButton('redo', () => state.redo());
     this.add(this.undoButton);
     this.add(this.redoButton);
-    this.add(new Spacer(Theme.padding));
-    this.visibilityButton = new Dropdown('', {
-      icon: TOOLBAR_ICON_SVG.eye,
-      onClick: () => new SceneVisibilityPopup(state).openBelow(this.visibilityButton),
-    });
-    this.add(this.visibilityButton);
 
     this.add(new Spacer(), 1);
     this.playButton = iconButton('play', () => actions.togglePlay());
@@ -123,12 +114,11 @@ export class Toolbar extends HStack {
   }
 
   /** The icon buttons, so a check can click what carries no caption. */
-  get controls(): Record<'menu' | 'undo' | 'redo' | 'visibility' | 'play' | 'pause', Button> {
+  get controls(): Record<'menu' | 'undo' | 'redo' | 'play' | 'pause', Button> {
     return {
       menu: this.menuButton,
       undo: this.undoButton,
       redo: this.redoButton,
-      visibility: this.visibilityButton,
       play: this.playButton,
       pause: this.pauseButton,
     };
@@ -168,7 +158,7 @@ export class Toolbar extends HStack {
   override layout(): void {
     super.layout();
     const width = this.pauseButton.x + this.pauseButton.w - this.playButton.x;
-    const leftMost = this.visibilityButton.x + this.visibilityButton.w + this.gap;
+    const leftMost = this.redoButton.x + this.redoButton.w + this.gap;
     const rightMost = this.notice.x - this.gap - width;
     const x = Math.round(Math.max(leftMost, Math.min((this.w - width) / 2, rightMost)));
     const shift = x - this.playButton.x;