The tab headers are one TabHeader, the node board and the tile board pan and zoom through one helper, reordering tile pictures and tilemap layers goes through one moveItem, and a tilemap cell is one named type (#85)

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

src/editor/graph/graphView.ts

@@ -1,11 +1,12 @@
-import type { Graphics } from 'pixi.js';
-import { clamp, drawGrid } from '../../ui';
+import type { Container, FederatedPointerEvent, FederatedWheelEvent, Graphics } from 'pixi.js';
+import { clamp, drawGrid, zoomFactor } from '../../ui';
 import type { Point } from '../framing';
 
 /**
  * What every surface that shows nodes shares with the graph editor: how far it zooms, how the grid
  * is drawn and how the wheel zooms about the pointer. The graph editor and a plugin's node board
- * look and move the same because they both come through here.
+ * look and move the same because they both come through here; the Tile tab's board borrows the
+ * panning and zooming.
  */
 
 /** Spacing of the background grid – and, with snapping on, of the positions a drag can leave. */
@@ -40,6 +41,33 @@ export function zoomedAbout(
   return { pan: { x: at.x - graphX * zoom, y: at.y - graphY * zoom }, zoom };
 }
 
+/**
+ * Drag with any button to pan, wheel to zoom about the pointer – all a board does with the pointer
+ * when its content takes none. `set` receives each new view and which gesture made it.
+ */
+export function panAndZoom(
+  surface: Container,
+  get: () => GraphView,
+  set: (view: GraphView, gesture: 'pan' | 'zoom') => void,
+  limits: { min: number; max: number } = ZOOM_LIMITS,
+): void {
+  let panning: { start: Point; pan: Point } | null = null;
+  surface.on('pointerdown', (e: FederatedPointerEvent) => {
+    panning = { start: { x: e.global.x, y: e.global.y }, pan: { ...get().pan } };
+  });
+  surface.on('globalpointermove', (e: FederatedPointerEvent) => {
+    if (!panning) return;
+    const { start, pan } = panning;
+    set({ ...get(), pan: { x: pan.x + e.global.x - start.x, y: pan.y + e.global.y - start.y } }, 'pan');
+  });
+  surface.on('pointerup', () => (panning = null));
+  surface.on('pointerupoutside', () => (panning = null));
+  surface.on('wheel', (e: FederatedWheelEvent) => {
+    set(zoomedAbout(get(), surface.toLocal(e.global), zoomFactor(e.deltaY), limits), 'zoom');
+    e.preventDefault();
+  });
+}
+
 export function drawGraphGrid(g: Graphics, view: GraphView, w: number, h: number): void {
   g.clear();
   const step = GRID_STEP * view.zoom;