An animation is previewed above its timeline: the root at the playhead, drawn but never written (#99)

The Animation tab shows the root asset over the timeline, with every row's value at the
playhead written onto a copy of it – the sprite, text or container placed at the origin as a
scene would place it, a scene as itself. Rows reach the root through that placed object and its
children through the object's instance edits, the route a placed container's content takes,
so the ids match what the runtime gives them. The runtime player and the preview evaluate a row
through one function (trackWriteAt), relative rows included; past the end of a once-reset pass
the preview shows the starting values, as the player would. Play, pause and the ruler drive the
preview through the timeline's playhead; a drag pans, the wheel zooms, Centre frames it. The
document is never touched and undo never hears of scrubbing.

On animation finished no longer describes itself as hearing "a sprite of the owner".

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

src/editor/animation/AnimationEditor.ts

@@ -2,9 +2,10 @@ import { SetAnimationRootCommand } from '../../core/commands/animationCommands';
 import { ANIMATION_ROOT_TYPES, animationDuration, fpsOf, frameCount } from '../../core/model/animation';
 import type { AnimationAsset, Asset } from '../../core/model/Asset';
 import { findAsset } from '../../core/model/Project';
-import { Button, Dropdown, formatNumber, Menu, type MenuItem } from '../../ui';
+import { Button, Dropdown, formatNumber, Menu, type MenuItem, VStack, type Widget } from '../../ui';
 import { AssetTabEditor } from '../AssetTabEditor';
 import type { EditorState } from '../state';
+import { PreviewCanvas } from './PreviewCanvas';
 import { openRowDialog, RowDialog } from './RowDialog';
 import { TimelineCanvas } from './TimelineCanvas';
 
@@ -13,22 +14,36 @@ const INFO_WIDTH = 220;
 const ROOT_WIDTH = 160;
 
 /**
- * The Animation tab (#97): the header picks what the animation animates and adds rows, the
- * canvas below is the timeline. `fps` and `playback` are properties of the asset, edited in the
- * inspector like any other.
+ * The Animation tab (#97): the header picks what the animation animates and adds rows, below it
+ * the preview shows the root at the playhead (#99) and the timeline under that edits the rows.
+ * `fps` and `playback` are properties of the asset, edited in the inspector like any other.
  */
 export class AnimationEditor extends AssetTabEditor<AnimationAsset, TimelineCanvas> {
   /** Public for the check scripts. */
   readonly rootPicker: Dropdown;
   readonly addRowButton: Button;
   readonly playButton: Button;
+  readonly centreButton: Button;
+  readonly preview: PreviewCanvas;
 
   constructor(state: EditorState) {
     super(state, { noun: 'Animation', infoWidth: INFO_WIDTH });
     this.rootPicker = new Dropdown('—', { width: ROOT_WIDTH, onClick: () => this.openRootPicker() });
     this.addRowButton = new Button('+ Row', { onClick: () => this.openRowDialog() });
     this.playButton = new Button('Play', { width: 64, onClick: () => this.togglePlay() });
-    this.mount(new TimelineCanvas(state), [this.rootPicker, this.addRowButton, this.playButton]);
+    this.centreButton = new Button('Centre', { onClick: () => this.preview.fit() });
+    const timeline = new TimelineCanvas(state);
+    this.preview = new PreviewCanvas(state, () => timeline.playhead);
+    timeline.onPlayhead = () => this.preview.redraw();
+    this.mount(timeline, [this.rootPicker, this.addRowButton, this.playButton, this.centreButton]);
+  }
+
+  /** The preview above, the timeline below, each taking half. */
+  protected override body(canvas: TimelineCanvas): Widget {
+    const stack = new VStack();
+    stack.add(this.preview, 1);
+    stack.add(canvas, 1);
+    return stack;
   }
 
   /** Only called while the tab is visible. */
@@ -62,6 +77,8 @@ export class AnimationEditor extends AssetTabEditor<AnimationAsset, TimelineCanv
 
   protected override syncExtras(asset: AnimationAsset | null): void {
     const root = asset ? findAsset(this.state.project, asset.root) : undefined;
+    this.preview.show(asset?.id ?? '');
+    this.centreButton.setEnabled(Boolean(root));
     this.rootPicker.setText(root ? root.name : asset ? 'Animates…' : '—');
     this.rootPicker.setEnabled(asset !== null);
     // A row needs something to aim at.