@@ -7,7 +7,7 @@
 // Colors come from the page when it sets them: --fig-bg, --fig-fg, --fig-muted, --fig-surface, --fig-border,
 // --fig-group (group frames; default --fig-bg), --fig-accent. The player redraws when the page switches theme ([data-theme] or the system setting).
 import { resolveStyle } from './styles.js';
-import { timeline, frameAt, usesStage } from './scenes.js';
+import { timeline, frameAt, usesStage, TRAVEL } from './scenes.js';
 import { drawContent, resolveFrame, boundsOf, litOutline, activeArrow, toSvg } from './render.js';
 
 const CSS = `
@@ -23,6 +23,11 @@ const CSS = `
 .btn:hover { border-color: var(--fig-accent, #2563eb); }
 .view { overflow-x: auto; overflow-y: hidden; }
 svg { display: block; margin: 0 auto; }
+.foot { display: flex; flex-direction: column; align-items: center; gap: 2px; }
+.nav { display: flex; align-items: center; gap: 2px; font-size: .78em; color: var(--fig-muted, #6b7280); font-variant-numeric: tabular-nums; }
+.nav[hidden] { display: none; }
+.nav button { border: 0; background: none; color: inherit; cursor: pointer; font: inherit; font-size: 1.3em; line-height: 1; padding: 2px 7px; border-radius: 5px; }
+.nav button:hover { color: var(--fig-fg, inherit); background: var(--fig-surface, transparent); }
 .cap { min-height: 1.45em; text-align: center; color: var(--fig-muted, #6b7280); font-size: .92em; line-height: 1.45; transition: opacity .3s; }
 .full { position: fixed; inset: 0; z-index: 2147483000; padding: 14px 18px; background: var(--fig-bg, Canvas); }
 .full .view { flex: 1; display: flex; align-items: center; overflow: auto; }
@@ -38,8 +43,13 @@ export class GiottoPlayer extends Base {
     super();
     this.state = { si: 0, t: 0, playing: false, speed: 1, hover: null, full: false, seen: true };
     const root = this.attachShadow({ mode: 'open' });
-    root.innerHTML = `<style>${CSS}</style><div class="wrap"><div class="bar" part="controls"></div><div class="view"><svg xmlns="http://www.w3.org/2000/svg" role="img"></svg></div><div class="cap" part="caption" aria-live="polite"></div></div>`;
-    [this.wrap, this.bar, this.view, this.svg, this.cap] = ['.wrap', '.bar', '.view', 'svg', '.cap'].map((q) => root.querySelector(q));
+    root.innerHTML = `<style>${CSS}</style><div class="wrap"><div class="bar" part="controls"></div><div class="view"><svg xmlns="http://www.w3.org/2000/svg" role="img"></svg></div><div class="foot"><div class="cap" part="caption" aria-live="polite"></div>`
+      + '<div class="nav" part="steps" hidden><button title="Previous step">‹</button><span></span><button title="Next step">›</button></div></div></div>';
+    [this.wrap, this.bar, this.view, this.svg, this.cap, this.foot, this.nav] = ['.wrap', '.bar', '.view', 'svg', '.cap', '.foot', '.nav'].map((q) => root.querySelector(q));
+    this.count = this.nav.querySelector('span');
+    const [prev, next] = this.nav.querySelectorAll('button');
+    prev.onclick = () => this.step(-1);
+    next.onclick = () => this.step(1);
     this.svg.addEventListener('pointermove', (ev) => this.hoverAt(ev));
     this.svg.addEventListener('pointerleave', () => this.setHover(null));
     this.onKey = (ev) => ev.key === 'Escape' && this.state.full && this.toggleFull(false);
@@ -133,7 +143,7 @@ export class GiottoPlayer extends Base {
     if (!this.box) return;
     const { w, h } = this.box;
     let k;
-    if (this.state.full) k = Math.min((innerWidth - 36) / w, (innerHeight - 28 - this.bar.offsetHeight - this.cap.offsetHeight - 12) / h);
+    if (this.state.full) k = Math.min((innerWidth - 36) / w, (innerHeight - 28 - this.bar.offsetHeight - this.foot.offsetHeight - 12) / h);
     else k = Math.max(0.5, Math.min(1, this.view.clientWidth / w || 1));
     this.svg.setAttribute('width', Math.round(w * k));
     this.svg.setAttribute('height', Math.round(h * k));
@@ -166,6 +176,23 @@ export class GiottoPlayer extends Base {
     this.draw();
   }
 
+  // One step (a beat) back or forward, across scene edges. Playing goes on from that step's start; paused
+  // shows it with its packets just arrived, which is the moment the step is about.
+  step(dir) {
+    const st = this.state, scenes = this.tl.scenes;
+    const sc = scenes[st.si], here = Math.max(0, sc.beats.findLastIndex((b) => b.start <= st.t));
+    let si = st.si, bi = here + dir;
+    while (bi < 0 || bi >= scenes[si].beats.length) {
+      si = (si + (bi < 0 ? -1 : 1) + scenes.length) % scenes.length;
+      bi = bi < 0 ? scenes[si].beats.length - 1 : 0;
+      if (si === st.si && !scenes[si].beats.length) return;
+    }
+    const b = scenes[si].beats[bi];
+    Object.assign(st, { si, t: st.playing ? b.start : b.start + b.ms * TRAVEL });
+    this.controls();
+    this.draw();
+  }
+
   toggle() {
     const st = this.state, sc = this.tl.scenes[st.si];
     st.playing = !st.playing;
@@ -217,6 +244,9 @@ export class GiottoPlayer extends Base {
       if (e) body += els.filter((a) => a.start?.id === hover || a.end?.id === hover).map((a) => activeArrow(a, S)).join('') + litOutline(e, S);
     }
     this.svg.innerHTML = body;
+    const beats = this.tl.scenes[si]?.beats.length ?? 0;
+    this.nav.hidden = !beats;
+    if (beats) this.count.textContent = `${frame.beat + 1} / ${beats}`;
     const say = frame?.say || '';
     if (this.cap.textContent !== say) this.cap.textContent = say;
     this.cap.style.opacity = frame ? Math.max(0.15, frame.sayAlpha) : 1;