@kgdiff/viewer 0.5.0 → 0.6.0

package/dist/ui/stage.js

@@ -1,37 +1,77 @@
 /**
- * The canvas area and its floating chrome: the view dock (with replay's caption and transport
- * stacked above it), swipe divider, legend (a card, or one line of dots for chrome-less embeds),
- * zoom controls + minimap (shown only while part of the content is out of view), hover tooltip
- * and the loading / identical / error / empty states. Overlays never cover the current hunk:
- * fits and flights frame it in the free part of the canvas.
+ * The canvas area and its floating chrome: the view dock (`dock.ts`, with replay's caption and
+ * transport stacked above it), swipe divider, legend (`legend.ts`: a card, or one line of dots
+ * for chrome-less embeds), zoom controls (`zoom.ts`) + minimap (shown only while part of the
+ * content is out of view), hover tooltip and the loading / identical / error / empty states.
+ * Overlays never cover the current hunk: fits and flights frame it in the free part of the
+ * canvas. The view (`view` once attached) draws the canvas; the chrome reads the session.
+ *
+ * With slots (`<kgdiff-stage>`, and `<kgdiff-viewer>` for the page's content), a chrome element
+ * slotted in (`<kgdiff-transport slot="bottom-center">`) replaces the built-in one.
  */
 import { KgdiffError } from '@kgdiff/core';
-import { attr, h, icon, iconButton, relabel, replace, replaceKeepingFocus, setText, } from '../dom.js';
-import { FAMILIES } from '../styles.js';
+import { attr, h, icon, moveFocusOut, replace, setText } from '../dom.js';
 import { sceneHunkGlyph } from './context.js';
 import { Dock } from './dock.js';
-import { swatch } from './swatch.js';
-const TICK_W = 1000;
+import { Legend } from './legend.js';
+import { Transport } from './transport.js';
+import { ZoomBar } from './zoom.js';
+/** The named slots of `<kgdiff-stage>`, where the page puts its own content over the canvas. */
+export const STAGE_SLOTS = [
+    'top-start',
+    'top-end',
+    'bottom-start',
+    'bottom-center',
+    'bottom-end',
+];
+/** The chrome elements, by the region a slotted one replaces. */
+const CHROME_TAGS = {
+    'kgdiff-view-dock': 'dock',
+    'kgdiff-transport': 'transport',
+    'kgdiff-legend': 'legend',
+    'kgdiff-zoom': 'zoom',
+    'kgdiff-minimap': 'minimap',
+    'kgdiff-title': 'title',
+    'kgdiff-actions': 'actions',
+};
 export class Stage {
     el;
     canvasHost;
     minimapHost;
+    #view = null;
+    /** Removes the stage's own minimap from the view; null while it has none. */
+    #ownMinimap = null;
+    /** The view drawing this stage's canvas (its camera, minimap, framing), once attached. */
+    get view() {
+        return this.#view;
+    }
+    set view(view) {
+        if (view === this.#view)
+            return;
+        this.#ownMinimap?.();
+        this.#ownMinimap = null;
+        this.#view = view;
+        this.#syncMinimap();
+    }
+    /**
+     * The view draws the stage's own minimap unless a slotted `<kgdiff-minimap>` replaces it:
+     * none is created, or drawn, while one is, and it comes back when that one leaves.
+     */
+    #syncMinimap() {
+        const view = this.#view;
+        const own = view !== null && !this.#replaced.has('minimap');
+        if (own && !this.#ownMinimap)
+            this.#ownMinimap = view.addMinimap(this.minimapHost);
+        else if (!own && this.#ownMinimap) {
+            this.#ownMinimap();
+            this.#ownMinimap = null;
+        }
+    }
     #chrome;
     #liveCanvasLabel;
     // Replay
     #caption;
-    #transport;
-    #playButton;
-    #prevButton;
-    #nextButton;
-    #scrubber;
-    #fill;
-    #knob;
-    #ticks;
-    #scrubTip;
-    #pos;
-    #speed;
-    #finished;
+    transport;
     // Swipe
     #swipe;
     #divider;
@@ -41,24 +81,37 @@ export class Stage {
     dock;
     #dockWrap;
     // Chrome
-    #legend;
-    #legendHead;
-    #legendBody;
-    #miniLegend;
-    #zoomIn;
-    #zoomOut;
-    #fitButton;
+    legend;
+    zoom;
     #mapCluster;
-    #zoomBar;
     tooltip;
     #state;
     #pointer = null;
-    #scrubbing = null;
     #dragging = null;
-    #legendOpen = false;
     #stateKey = '';
+    #slots = [];
+    /** Elements over the canvas that registered themselves (`registerObstacle`). */
+    #obstacles = new Set();
+    #version = null;
+    #versionChip = h('div', { class: 'version-chip chip card', hidden: true });
+    /** The chrome's panel states, and the regions a slotted chrome element replaces. */
+    #states = null;
+    #replaced = new Set();
+    /**
+     * Called when the regions slotted elements replace change: the layout that draws the title
+     * and the actions (`<kgdiff-viewer>`) applies its panels again.
+     */
+    onReplaced = null;
+    /** Whether the stage is a named region (`asRegion`) rather than the main landmark. */
+    #region = false;
+    /** The legend's state applied last: the user's toggle stands until it changes. */
+    #legendState = null;
     #ctx;
-    constructor(ctx) {
+    /**
+     * `slots`: the stage has named slots for the page's content (stacked with the built-in chrome
+     * in its corner).
+     */
+    constructor(ctx, slots = false) {
         this.#ctx = ctx;
         const c = ctx.controller;
         this.canvasHost = h('div', { class: 'stage' });
@@ -69,32 +122,7 @@ export class Stage {
             'aria-hidden': 'true',
             'data-empty': 'true',
         });
-        this.#prevButton = iconButton('skip-back', '', () => c.stepReplay(-1), { class: 'icon-btn' });
-        this.#playButton = iconButton('play', '', () => c.togglePlay(), { class: 'icon-btn play' });
-        this.#nextButton = iconButton('skip-forward', '', () => c.stepReplay(1), { class: 'icon-btn' });
-        this.#fill = h('div', { class: 'fill' });
-        this.#knob = h('div', { class: 'knob' });
-        this.#ticks = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-        this.#ticks.setAttribute('class', 'ticks');
-        this.#ticks.setAttribute('viewBox', `0 0 ${TICK_W} 14`);
-        this.#ticks.setAttribute('preserveAspectRatio', 'none');
-        this.#ticks.setAttribute('aria-hidden', 'true');
-        this.#scrubTip = h('div', { class: 'scrub-tip card', hidden: true });
-        this.#scrubber = h('div', {
-            class: 'scrubber',
-            role: 'slider',
-            tabindex: '0',
-            'aria-valuemin': '0',
-        }, h('div', { class: 'track' }, this.#fill), this.#ticks, this.#knob, this.#scrubTip);
-        this.#bindScrubber();
-        this.#pos = h('span', { class: 'pos', 'aria-hidden': 'true' });
-        this.#speed = h('button', {
-            type: 'button',
-            class: 'speed',
-            onclick: () => c.cycleSpeed(),
-        });
-        this.#transport = h('div', { class: 'transport card', role: 'toolbar' }, this.#prevButton, this.#playButton, this.#nextButton, this.#scrubber, this.#pos, this.#speed);
-        this.#finished = h('div', { class: 'finished card', role: 'status', hidden: true });
+        this.transport = new Transport(ctx);
         // Swipe
         this.#chipBefore = h('div', { class: 'side-chip before chip card' });
         this.#chipAfter = h('div', { class: 'side-chip after chip card' });
@@ -110,28 +138,34 @@ export class Stage {
         this.#swipe = h('div', { class: 'swipe', hidden: true }, this.#chipBefore, this.#chipAfter, this.#divider);
         // View dock, with replay's finished pill, caption and transport stacked above it.
         this.dock = new Dock(ctx);
-        this.#dockWrap = h('div', { class: 'dock' }, this.#finished, this.#caption, this.#transport, this.dock.el);
+        this.#dockWrap = h('div', { class: 'dock' }, this.transport.finished, this.#caption, this.transport.el, this.dock.el);
         // Legend
-        this.#legendHead = h('button', {
-            type: 'button',
-            class: 'legend-head',
-            'aria-expanded': 'false',
-            onclick: () => this.#setLegend(!this.#legendOpen),
-        }, h('span', { class: 'lbl' }), icon('chevron-down'));
-        this.#legendBody = h('div', { class: 'legend-body', id: 'kg-legend' });
-        attr(this.#legendHead, 'aria-controls', 'kg-legend');
-        this.#legend = h('div', { class: 'legend card float bottom-left', 'data-open': 'false' }, this.#legendHead, this.#legendBody);
-        this.#miniLegend = h('div', { class: 'mini-legend float bottom-left', role: 'list' });
-        // Zoom + minimap
-        this.#zoomIn = iconButton('plus', '', () => c.zoom(1));
-        this.#zoomOut = iconButton('minus', '', () => c.zoom(-1));
-        this.#fitButton = iconButton('fit', '', () => void c.fit());
+        this.legend = new Legend(ctx, (open) => ctx.setPanel?.('legend', open ? 'open' : 'collapsed'));
+        // Zoom + minimap: the buttons act on this stage's view.
+        this.zoom = new ZoomBar(ctx, () => this.view);
         this.minimapHost = h('div', { class: 'minimap-host' });
-        this.#zoomBar = h('div', { class: 'zoom-bar card', role: 'toolbar' }, this.#zoomIn, this.#zoomOut, this.#fitButton);
-        this.#mapCluster = h('div', { class: 'map-cluster float bottom-right' }, this.#zoomBar, this.minimapHost);
+        this.#mapCluster = h('div', { class: 'map-cluster float bottom-right' }, this.zoom.el, this.minimapHost);
         this.tooltip = h('div', { class: 'tooltip card', role: 'tooltip', 'data-open': 'false' });
         this.#state = h('div', { class: 'state', hidden: true });
-        this.#chrome = h('div', { class: 'chrome' }, this.#swipe, this.#legend, this.#miniLegend, this.#mapCluster, this.#dockWrap, this.tooltip);
+        let bottomStart = this.legend.card;
+        let bottomEnd = this.#mapCluster;
+        const corners = [];
+        if (slots) {
+            const slot = (name) => {
+                const el = document.createElement('slot');
+                el.name = name;
+                el.addEventListener('slotchange', () => this.slotted());
+                this.#slots.push(el);
+                return el;
+            };
+            // Slotted content sits further from the corner than the built-in chrome.
+            corners.push(h('div', { class: 'corner top-start' }, this.#versionChip, slot('top-start')), h('div', { class: 'corner top-end' }, slot('top-end')));
+            bottomStart = h('div', { class: 'corner bottom-start' }, slot('bottom-start'), this.legend.card);
+            bottomEnd = h('div', { class: 'corner bottom-end' }, slot('bottom-end'), this.#mapCluster);
+            this.#dockWrap.prepend(slot('bottom-center'));
+        }
+        // The top corners first: the chrome reads and tabs from the top down.
+        this.#chrome = h('div', { class: 'chrome' }, ...corners, this.#swipe, bottomStart, this.legend.mini, bottomEnd, this.#dockWrap, this.tooltip);
         this.el = h('main', { class: 'stage-wrap' }, this.canvasHost, this.#liveCanvasLabel, this.#chrome, this.#state);
         this.el.addEventListener('pointermove', (e) => {
             const r = this.el.getBoundingClientRect();
@@ -152,22 +186,27 @@ export class Stage {
         const r = this.el.getBoundingClientRect();
         const obstacles = [];
         const parts = [
-            this.#legend,
-            this.#miniLegend,
-            this.#zoomBar,
+            this.legend.card,
+            this.legend.mini,
+            this.zoom.el,
             this.dock.el,
-            this.#transport,
-            this.#finished,
+            this.transport.el,
+            this.transport.finished,
             this.#chipBefore,
             this.#chipAfter,
         ];
         if (this.#caption.dataset.empty !== 'true')
             parts.push(this.#caption);
+        parts.push(this.#versionChip);
         if (this.minimapHost.dataset.hidden !== 'true')
             parts.push(this.minimapHost);
         // The HUD (title, actions) floats over the canvas too.
         for (const el of this.el.querySelectorAll('.hud .card'))
             parts.push(el);
+        // The page's content in the slots, and what registered itself: one rule for all.
+        for (const slot of this.#slots)
+            parts.push(...slot.assignedElements({ flatten: true }));
+        parts.push(...this.#obstacles);
         for (const el of parts) {
             if (el.hidden || el.closest('[hidden]'))
                 continue;
@@ -178,14 +217,118 @@ export class Stage {
         }
         return { width: r.width, height: r.height, obstacles };
     }
+    /**
+     * Keep `el` clear of fits and flights, as the chrome is (content over the canvas the stage
+     * does not place itself); returns the function that stops it.
+     */
+    registerObstacle(el) {
+        this.#obstacles.add(el);
+        return () => {
+            this.#obstacles.delete(el);
+        };
+    }
     /** Re-measure what depends on rendered sizes (fonts, resizes). */
     layout() {
         this.dock.layout();
     }
-    #setLegend(open) {
-        this.#legendOpen = open;
-        attr(this.#legend, 'data-open', String(open));
-        attr(this.#legendHead, 'aria-expanded', String(open));
+    /**
+     * The page's slotted content changed (and once the stage is in its shadow root): a chrome
+     * element replaces the built-in one.
+     */
+    slotted() {
+        const replaced = new Set();
+        for (const slot of this.#slots) {
+            for (const el of slot.assignedElements({ flatten: true })) {
+                const region = CHROME_TAGS[el.localName];
+                if (region)
+                    replaced.add(region);
+            }
+        }
+        const same = replaced.size === this.#replaced.size && [...replaced].every((r) => this.#replaced.has(r));
+        if (!same) {
+            this.#replaced.clear();
+            for (const r of replaced)
+                this.#replaced.add(r);
+            this.#applyPanels();
+            this.#syncMinimap();
+            this.onReplaced?.();
+        }
+        this.view?.layoutChanged();
+    }
+    /** Whether a chrome element slotted into the stage replaces `region`. */
+    replaces(region) {
+        return this.#replaced.has(region);
+    }
+    /**
+     * Follow the panel states of the chrome over the canvas: the dock, the replay transport, the
+     * legend (collapsed: folded to its head), the zoom buttons and the minimap. A region that is
+     * not open is not shown (and inert); focus inside it moves to the canvas first. A region a
+     * slotted chrome element replaces is not shown either, whatever its state.
+     */
+    setPanels(states) {
+        this.#states = states;
+        this.#applyPanels();
+    }
+    #applyPanels() {
+        const given = this.#states;
+        const state = (r) => this.#replaced.has(r) ? 'hidden' : (given?.[r] ?? (r === 'legend' ? 'collapsed' : 'open'));
+        // Nothing declared or replaced, ever: the chrome stays as built.
+        if (!given && this.#replaced.size === 0 && this.#legendState === null)
+            return;
+        const canvas = () => this.canvasHost.querySelector('canvas');
+        const set = (s, ...els) => {
+            for (const el of els) {
+                if (s !== 'open')
+                    moveFocusOut(this.#ctx.root, el, canvas);
+                attr(el, 'data-panel', s);
+                el.inert = s !== 'open';
+            }
+        };
+        set(state('dock'), this.dock.el);
+        set(state('transport'), this.transport.el, this.transport.finished);
+        set(state('zoom'), this.zoom.el);
+        set(state('minimap'), this.minimapHost);
+        const legend = state('legend');
+        if (legend === 'hidden')
+            moveFocusOut(this.#ctx.root, this.legend.card, canvas);
+        attr(this.legend.card, 'data-panel', legend);
+        attr(this.legend.mini, 'data-panel', legend);
+        this.legend.card.inert = legend === 'hidden';
+        if (legend !== 'hidden' && legend !== this.#legendState)
+            this.legend.setOpen(legend === 'open');
+        this.#legendState = legend;
+    }
+    /**
+     * The version a stage pinned to it draws (`<kgdiff-stage version>`): no swipe divider or
+     * replay caption then, and a chip naming the version; null follows the mode.
+     */
+    setVersion(version) {
+        this.#version = version;
+        if (version)
+            this.el.dataset.version = version;
+        else
+            delete this.el.dataset.version;
+        this.#renderMode();
+        this.#renderVersion(this.#ctx.tr());
+    }
+    #renderVersion(tr) {
+        const v = this.#version;
+        const version = v ? tr.t(v === 'before' ? 'detail.before' : 'detail.after') : '';
+        this.#versionChip.hidden = v === null;
+        if (v)
+            setText(this.#versionChip, version);
+        if (this.#region) {
+            attr(this.el, 'aria-label', v ? `${tr.t('stage.label')} · ${version}` : tr.t('stage.label'));
+        }
+    }
+    /**
+     * A region named after the graph (and its version), not the page's main landmark: for a
+     * `<kgdiff-stage>`, one of several on a page that has its own.
+     */
+    asRegion() {
+        this.#region = true;
+        this.el.setAttribute('role', 'region');
+        this.#renderVersion(this.#ctx.tr());
     }
     /** Legend style, and whether clicks select (the tooltip only hints at clicking then). */
     setChrome(legend, selectable) {
@@ -197,63 +340,36 @@ export class Stage {
         const tr = this.#ctx.tr();
         const all = topics.has('status') || topics.has('data') || topics.has('locale');
         if (all) {
+            this.#renderVersion(tr);
             this.#renderLabels(tr);
-            this.#renderMiniLegend(tr);
             this.#renderState(tr);
-            this.#renderTicks();
             this.#renderCanvasLabel(tr);
         }
+        this.legend.update(topics);
+        this.zoom.update(topics);
+        this.transport.update(topics);
         this.dock.update(topics);
         if (all || topics.has('mode'))
             this.#renderMode();
         if (all || topics.has('overview')) {
-            attr(this.minimapHost, 'data-hidden', String(c.overview));
+            attr(this.minimapHost, 'data-hidden', String(this.view?.overview ?? true));
         }
         if (all || topics.has('mode') || topics.has('replay'))
-            this.#renderReplay(tr);
+            this.#renderCaption(tr);
         if (all || topics.has('mode') || topics.has('swipe'))
             this.#renderSwipe();
         if (all || topics.has('hover') || topics.has('selection') || topics.has('focus')) {
             this.#renderTooltip(tr);
         }
-        if (topics.has('theme'))
-            this.#renderTicks();
-        const ready = c.status === 'ready';
-        this.#chrome.hidden = !ready;
+        // Until a diff is ready the built-in chrome waits; the page's slotted content stays.
+        attr(this.#chrome, 'data-ready', String(c.status === 'ready'));
     }
     #renderLabels(tr) {
-        relabel(this.#prevButton, `${tr.t('detail.prev')} (←)`);
-        relabel(this.#nextButton, `${tr.t('detail.next')} (→)`);
-        attr(this.#transport, 'aria-label', tr.t('replay.label'));
-        attr(this.#scrubber, 'aria-label', tr.t('replay.scrubber'));
         setText(this.#chipBefore, tr.t('detail.before'));
         setText(this.#chipAfter, tr.t('detail.after'));
         attr(this.#divider, 'aria-label', tr.t('swipe.divider'));
-        setText(this.#legendHead.querySelector('.lbl'), tr.t('legend.title'));
-        attr(this.#legendHead, 'aria-label', tr.t('legend.toggle'));
-        relabel(this.#zoomIn, `${tr.t('action.zoomIn')} (+)`);
-        relabel(this.#zoomOut, `${tr.t('action.zoomOut')} (−)`);
-        relabel(this.#fitButton, `${tr.t('action.fit')} (F)`);
         attr(this.minimapHost, 'aria-label', tr.t('minimap.label'));
         attr(this.minimapHost, 'title', tr.t('minimap.label'));
-        const fams = [...FAMILIES, 'neutral'];
-        replace(this.#legendBody, fams.map((f) => h('div', { class: 'legend-row', 'data-family': f, title: tr.t(`familyHint.${f}`) }, swatch(f), h('span', { class: 'name', text: tr.t(`family.${f}`) }))));
-    }
-    /** One line: the families this diff has, then the unchanged context. */
-    #renderMiniLegend(tr) {
-        const scene = this.#ctx.controller.scene;
-        const present = new Set(scene?.hunks.map((x) => x.family));
-        if (scene?.nodes.some((n) => n.status === 'unchanged'))
-            present.add('neutral');
-        attr(this.#miniLegend, 'aria-label', tr.t('legend.title'));
-        replace(this.#miniLegend, [...FAMILIES, 'neutral']
-            .filter((f) => present.has(f))
-            .map((f) => h('span', {
-            class: 'mini-item',
-            role: 'listitem',
-            'data-family': f,
-            title: tr.t(`familyHint.${f}`),
-        }, h('span', { class: 'dot', 'aria-hidden': 'true' }), tr.t(`family.${f}`))));
     }
     #renderCanvasLabel(tr) {
         const stats = this.#ctx.controller.diff?.stats;
@@ -273,39 +389,19 @@ export class Stage {
     }
     #renderMode() {
         const mode = this.#ctx.controller.mode;
-        this.#transport.hidden = mode !== 'replay';
-        this.#caption.hidden = mode !== 'replay';
-        this.#swipe.hidden = mode !== 'swipe';
+        const pinned = this.#version !== null;
+        this.#caption.hidden = mode !== 'replay' || pinned;
+        this.#swipe.hidden = mode !== 'swipe' || pinned;
     }
-    #renderReplay(tr) {
+    /** The replay caption: the playing hunk (or chapter), else the last one played. */
+    #renderCaption(tr) {
         const c = this.#ctx.controller;
         const clock = c.clock;
         const scene = c.scene;
-        if (c.mode !== 'replay' || !clock || !scene) {
-            this.#finished.hidden = true;
+        if (c.mode !== 'replay' || !clock || !scene)
             return;
-        }
-        const p = clock.progress;
-        this.#fill.style.transform = `scaleX(${p})`;
-        this.#knob.style.left = `${p * 100}%`;
         const position = clock.position();
         const total = clock.total;
-        setText(this.#pos, tr.t('replay.position', { i: position, n: total }));
-        attr(this.#scrubber, 'aria-valuemax', String(Math.round(clock.duration)));
-        attr(this.#scrubber, 'aria-valuenow', String(Math.round(clock.t)));
-        attr(this.#scrubber, 'aria-valuetext', tr.t('replay.position', { i: position, n: total }));
-        const playing = clock.playing;
-        const playLabel = `${tr.t(playing ? 'replay.pause' : 'replay.play')} (Space)`;
-        if (this.#playButton.dataset.state !== String(playing)) {
-            this.#playButton.dataset.state = String(playing);
-            replace(this.#playButton, icon(playing ? 'pause' : 'play'));
-        }
-        relabel(this.#playButton, playLabel);
-        setText(this.#speed, `${clock.speed}×`);
-        relabel(this.#speed, tr.t('replay.speed', { s: `${clock.speed}×` }));
-        this.#prevButton.disabled = clock.t <= 0;
-        this.#nextButton.disabled = clock.t >= clock.duration;
-        // Caption: the playing hunk (or chapter), else the last one played.
         let key = '';
         let content = [];
         if (clock.t <= 0) {
@@ -347,117 +443,9 @@ export class Stage {
             attr(this.#caption, 'data-empty', String(key === ''));
             replace(this.#caption, ...content);
         }
-        const finished = clock.finished;
-        this.#finished.hidden = !finished;
         // The finished pill takes the caption's place above the transport.
-        this.#caption.hidden = finished;
-        if (finished && this.#finished.childElementCount === 0) {
-            replace(this.#finished, icon('check-circle'), h('span', { text: tr.t('replay.finished') }), h('button', { type: 'button', class: 'btn', onclick: () => c.restart() }, icon('restart'), tr.t('replay.restart')));
-        }
-        else if (!finished && this.#finished.childElementCount > 0) {
-            // Restart was pressed from the pill: keep focus in the transport.
-            replaceKeepingFocus(this.#ctx.root, this.#finished, this.#playButton);
-        }
-    }
-    #renderTicks() {
-        const c = this.#ctx.controller;
-        const clock = c.clock;
-        const scene = c.scene;
-        while (this.#ticks.firstChild)
-            this.#ticks.removeChild(this.#ticks.firstChild);
-        if (!clock || !scene || clock.duration <= 0)
-            return;
-        const paths = new Map();
-        for (const w of clock.timeline.windows) {
-            const fam = scene.hunks[w.hunk]?.family;
-            if (!fam)
-                continue;
-            const x = ((w.start / clock.duration) * TICK_W).toFixed(1);
-            let list = paths.get(fam);
-            if (!list) {
-                list = [];
-                paths.set(fam, list);
-            }
-            list.push(`M${x} 2V12`);
-        }
-        for (const [fam, d] of paths) {
-            const p = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-            p.setAttribute('d', d.join(''));
-            p.setAttribute('stroke', `var(--kgdiff-${fam})`);
-            p.setAttribute('stroke-width', '2');
-            p.setAttribute('stroke-linecap', 'round');
-            p.setAttribute('vector-effect', 'non-scaling-stroke');
-            this.#ticks.appendChild(p);
-        }
-    }
-    #bindScrubber() {
-        const timeAt = (clientX) => {
-            const clock = this.#ctx.controller.clock;
-            const r = this.#scrubber.getBoundingClientRect();
-            if (!clock || r.width <= 0)
-                return 0;
-            return Math.max(0, Math.min(1, (clientX - r.left) / r.width)) * clock.duration;
-        };
-        this.#scrubber.addEventListener('pointerdown', (e) => {
-            this.#scrubbing = e.pointerId;
-            this.#scrubber.setPointerCapture?.(e.pointerId);
-            this.#ctx.controller.pause();
-            this.#ctx.controller.seek(timeAt(e.clientX));
-        });
-        this.#scrubber.addEventListener('pointermove', (e) => {
-            if (this.#scrubbing === e.pointerId)
-                this.#ctx.controller.seek(timeAt(e.clientX));
-            this.#showScrubTip(e.clientX, timeAt(e.clientX));
-        });
-        const end = (e) => {
-            if (this.#scrubbing === e.pointerId)
-                this.#scrubbing = null;
-        };
-        this.#scrubber.addEventListener('pointerup', end);
-        this.#scrubber.addEventListener('pointercancel', end);
-        this.#scrubber.addEventListener('pointerleave', () => {
-            this.#scrubTip.hidden = true;
-        });
-        this.#scrubber.addEventListener('keydown', (e) => {
-            const c = this.#ctx.controller;
-            if (e.key === 'Home')
-                c.seek(0);
-            else if (e.key === 'End')
-                c.seek(c.clock?.duration ?? 0);
-            else
-                return;
-            e.preventDefault();
-            e.stopPropagation();
-        });
-    }
-    #showScrubTip(clientX, t) {
-        const c = this.#ctx.controller;
-        const clock = c.clock;
-        const scene = c.scene;
-        if (!clock || !scene)
-            return;
-        // Nearest window start: the tick under the pointer.
-        let best = -1;
-        let bestD = Number.POSITIVE_INFINITY;
-        for (const w of clock.timeline.windows) {
-            const d = Math.abs(w.start - t);
-            if (d < bestD) {
-                bestD = d;
-                best = w.hunk;
-            }
-        }
-        const hunk = scene.hunks[best];
-        if (!hunk) {
-            this.#scrubTip.hidden = true;
-            return;
-        }
-        const r = this.#scrubber.getBoundingClientRect();
-        this.#scrubTip.hidden = false;
-        this.#scrubTip.style.left = `${clientX - r.left}px`;
-        if (this.#scrubTip.dataset.hunk !== hunk.id) {
-            this.#scrubTip.dataset.hunk = hunk.id;
-            replace(this.#scrubTip, h('span', { class: 'glyph-box', 'data-family': hunk.family, text: sceneHunkGlyph(hunk) }), h('span', { text: hunk.title }));
-        }
+        if (this.#version === null)
+            this.#caption.hidden = clock.finished;
     }
     #renderSwipe() {
         const c = this.#ctx.controller;