Give the three asset tabs one base, and move the viewports into the editor

src/viewport/ held three classes only src/editor/ ever used, and framing.ts sat
under graph/ although the scene view wants the same bounds sum. The graph, the
texture and the container tab repeated the same header, subscription and
disposal code with two silent divergences: the graph tab said "nothing shown"
with null instead of '', and the texture tab refell back to the first asset on
a selection change but not on a project event.

These arrive together because GraphCanvas ties them: it reads framing from its
new home, hands its fold marks to folding.ts, and its '' change is what
GraphEditor must agree with.

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

src/editor/container/ContainerCanvas.ts

@@ -2,7 +2,7 @@ import { Graphics } from 'pixi.js';
 import { findAsset, type ObjectHolder } from '../../core/model/Project';
 import { Theme } from '../../ui';
 import type { DrawItem } from '../../viewport/items';
-import { SceneViewport } from '../../viewport/SceneViewport';
+import { SceneViewport } from '../viewport/SceneViewport';
 import { type View, worldToScreen } from '../../viewport/view';
 import type { EditorState } from '../state';
 

src/editor/container/ContainerEditor.ts

@@ -1,76 +1,16 @@
-import { Graphics } from 'pixi.js';
-import type { ContainerAsset } from '../../core/model/Asset';
-import { findAsset, listContainers } from '../../core/model/Project';
-import {
-  activeDrag,
-  Button,
-  Dropdown,
-  HStack,
-  Label,
-  Menu,
-  type MenuItem,
-  Spacer,
-  Theme,
-  VStack,
-} from '../../ui';
+import type { Asset, ContainerAsset } from '../../core/model/Asset';
+import { activeDrag } from '../../ui';
+import { AssetTabEditor } from '../AssetTabEditor';
 import type { EditorState } from '../state';
 import { ContainerCanvas } from './ContainerCanvas';
 
 /** Room kept for the "N objects" readout, wide enough for a three-digit template. */
 const INFO_WIDTH = 110;
 
-/**
- * The Container tab. It follows the selection, but keeps showing the last container when the
- * selection moves elsewhere – clicking a sprite must not empty the tab being worked in.
- */
-export class ContainerEditor extends VStack {
-  private readonly canvas: ContainerCanvas;
-  private readonly picker: Dropdown;
-  private readonly info: Label;
-  private readonly headerBg = new Graphics();
-
-  constructor(private readonly state: EditorState) {
-    super();
-    const header = new HStack({ gap: Theme.gap, padding: Theme.padding, align: 'center' });
-    header.minHeight = Theme.controlHeight + Theme.padding * 2;
-    header.addChildAt(this.headerBg, 0);
-
-    header.add(new Label('Container', { style: 'muted' }));
-    this.picker = new Dropdown('—', { width: 200, onClick: () => this.openPicker() });
-    header.add(this.picker);
-    header.add(new Button('Fit', { onClick: () => this.canvas.fit() }));
-    header.add(new Spacer(), 1);
-    this.info = new Label('', { style: 'small', align: 'right' });
-    // Reserved, not measured: a stack sizes the label once, from the empty text it was built with.
-    this.info.minWidth = INFO_WIDTH;
-    header.add(this.info);
-
-    this.canvas = new ContainerCanvas(state);
-    this.add(header);
-    this.add(this.canvas, 1);
-
-    state.on('selection', () => this.followSelection());
-    state.on('project', () => this.refresh());
-    state.on('load', () => {
-      this.canvas.show('');
-      this.followSelection();
-    });
-    this.followSelection();
-  }
-
-  /** The container currently shown – the check scripts read this. */
-  get currentAssetId(): string {
-    return this.canvas.currentAssetId;
-  }
-
-  /** For the check scripts: the picker's width must not follow the name it happens to show. */
-  get pickerWidth(): number {
-    return this.picker.w;
-  }
-
-  show(assetId: string): void {
-    this.canvas.show(assetId);
-    this.refresh();
+export class ContainerEditor extends AssetTabEditor<ContainerAsset, ContainerCanvas> {
+  constructor(state: EditorState) {
+    super(state, { noun: 'Container', infoWidth: INFO_WIDTH });
+    this.mount(new ContainerCanvas(state));
   }
 
   /** The pending drop of an asset dragged over the template (test hook). */
@@ -89,48 +29,19 @@ export class ContainerEditor extends VStack {
     return { x: p.x, y: p.y, w: this.canvas.w, h: this.canvas.h };
   }
 
-  private followSelection(): void {
-    const id = this.state.selectedContainerId;
+  protected override selectedId(): string {
     // A dragged row selects on release, and whether that lands before or after the drop is up
     // to Pixi's event order. Following it in between would swap the tab to the very container
     // being dragged, which would then nest in itself, so the target stays put while a drag runs.
-    if (id && !activeDrag()) this.canvas.show(id);
-    this.refresh();
+    return activeDrag() ? '' : (this.state.selectedContainerId ?? '');
   }
 
-  private asset(): ContainerAsset | null {
-    const asset = findAsset(this.state.project, this.canvas.currentAssetId);
-    return asset && asset.type === 'container' ? asset : null;
+  protected override isMine(asset: Asset): asset is ContainerAsset {
+    return asset.type === 'container';
   }
 
-  private containers(): ContainerAsset[] {
-    return listContainers(this.state.project).sort((a, b) => a.name.localeCompare(b.name));
-  }
-
-  private openPicker(): void {
-    const current = this.canvas.currentAssetId;
-    const items: MenuItem[] = this.containers().map((asset) => ({
-      label: asset.id === current ? `● ${asset.name}` : asset.name,
-      onSelect: () => this.state.select({ kind: 'asset', assetId: asset.id }),
-    }));
-    if (items.length === 0) items.push({ label: 'No containers yet', onSelect: () => undefined });
-    new Menu(items, { searchable: true }).openBelow(this.picker);
-  }
-
-  private refresh(): void {
-    // A deleted container leaves the canvas empty; fall back to whatever container is left.
-    if (!this.asset()) this.canvas.show(this.containers()[0]?.id ?? '');
-    const asset = this.asset();
-    this.picker.setText(asset ? asset.name : 'No container');
-    const count = asset?.objects.length ?? 0;
-    this.info.setText(asset ? `${count} ${count === 1 ? 'object' : 'objects'}` : '');
-  }
-
-  override redraw(): void {
-    super.redraw();
-    this.headerBg.clear();
-    const h = Theme.controlHeight + Theme.padding * 2;
-    this.headerBg.rect(0, 0, this.w, h).fill(Theme.colors.panelHeader);
-    this.headerBg.rect(0, h - 1, this.w, 1).fill(Theme.colors.border);
+  protected override infoText(asset: ContainerAsset): string {
+    const count = asset.objects.length;
+    return `${count} ${count === 1 ? 'object' : 'objects'}`;
   }
 }