@kgdiff/viewer 0.0.0-stage → 0.2.0

package/dist/ui/stage.js

@@ -0,0 +1,664 @@
+/**
+ * The canvas area and its floating chrome: replay caption and transport, swipe divider,
+ * changes-only context stepper, legend, zoom controls + minimap, hover tooltip and the
+ * loading / identical / error / empty states. Overlays never cover the current hunk: the
+ * element reserves their space through the renderer's safe area.
+ */
+import { KgdiffError } from '@kgdiff/core';
+import { attr, h, icon, iconButton, relabel, replace, replaceKeepingFocus, setText, } from '../dom.js';
+import { FAMILIES } from '../styles.js';
+import { sceneHunkGlyph } from './context.js';
+const TICK_W = 1000;
+/** Legend swatch: the node cue of each family (docs/visual-language.md §Meaning families). */
+function swatch(family) {
+    const v = (name) => `var(--kg-${name})`;
+    const c = family === 'neutral' ? v('neutral') : v(family);
+    let body;
+    switch (family) {
+        case 'added':
+            body = `<circle cx="11" cy="11" r="8.5" fill="none" stroke="${c}" stroke-opacity=".35" stroke-width="2"/><circle cx="11" cy="11" r="5" fill="${c}"/>`;
+            break;
+        case 'removed':
+            body = `<circle cx="11" cy="11" r="5.25" fill="none" stroke="${c}" stroke-width="1.5" stroke-dasharray="3 2.5"/>`;
+            break;
+        case 'identity':
+            body = `<circle cx="11" cy="11" r="9.5" fill="none" stroke="${c}" stroke-opacity=".3" stroke-width="1.5"/><circle cx="11" cy="11" r="7.25" fill="none" stroke="${c}" stroke-width="1.5"/><circle cx="11" cy="11" r="4.25" fill="${c}"/>`;
+            break;
+        case 'content':
+        case 'structure':
+            body = `<circle cx="11" cy="11" r="7.75" fill="none" stroke="${c}" stroke-width="1.5"/><circle cx="11" cy="11" r="4.5" fill="${c}"/>`;
+            break;
+        default:
+            body = `<circle cx="11" cy="11" r="3.5" fill="${c}"/>`;
+    }
+    const tpl = document.createElement('template');
+    tpl.innerHTML = `<svg class="swatch" viewBox="0 0 22 22" aria-hidden="true" focusable="false">${body}</svg>`;
+    return tpl.content.firstElementChild;
+}
+export class Stage {
+    el;
+    canvasHost;
+    minimapHost;
+    #chrome;
+    #liveCanvasLabel;
+    // Replay
+    #caption;
+    #transport;
+    #playButton;
+    #prevButton;
+    #nextButton;
+    #scrubber;
+    #fill;
+    #knob;
+    #ticks;
+    #scrubTip;
+    #pos;
+    #speed;
+    #finished;
+    // Swipe
+    #swipe;
+    #divider;
+    #chipBefore;
+    #chipAfter;
+    // Changes
+    #stepper;
+    #hopButtons = [];
+    #expandButton;
+    // Chrome
+    #legend;
+    #legendHead;
+    #legendBody;
+    #zoomIn;
+    #zoomOut;
+    #fitButton;
+    #mapCluster;
+    tooltip;
+    #state;
+    #pointer = null;
+    #scrubbing = null;
+    #dragging = null;
+    #legendOpen = null;
+    #stateKey = '';
+    #ctx;
+    constructor(ctx) {
+        this.#ctx = ctx;
+        const c = ctx.controller;
+        this.canvasHost = h('div', { class: 'stage' });
+        this.#liveCanvasLabel = h('div', { class: 'sr-only' });
+        // Replay caption + transport
+        this.#caption = h('div', {
+            class: 'caption card',
+            '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 });
+        // Swipe
+        this.#chipBefore = h('div', { class: 'side-chip before chip card' });
+        this.#chipAfter = h('div', { class: 'side-chip after chip card' });
+        this.#divider = h('div', {
+            class: 'divider',
+            role: 'slider',
+            tabindex: '0',
+            'aria-valuemin': '0',
+            'aria-valuemax': '100',
+            'aria-orientation': 'horizontal',
+        }, h('span', { class: 'handle', 'aria-hidden': 'true' }, icon('chevron-left'), icon('chevron-right')));
+        this.#bindDivider();
+        this.#swipe = h('div', { class: 'swipe', hidden: true }, this.#chipBefore, this.#chipAfter, this.#divider);
+        // Changes-only context stepper
+        const opts = h('span', { class: 'opts', role: 'radiogroup' });
+        for (let n = 0; n <= 2; n++) {
+            const b = h('button', {
+                type: 'button',
+                class: 'opt',
+                role: 'radio',
+                text: String(n),
+                onclick: () => c.setHops(n),
+            });
+            this.#hopButtons.push(b);
+            opts.appendChild(b);
+        }
+        opts.addEventListener('keydown', (e) => {
+            if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            const next = Math.max(0, Math.min(2, c.hops + (e.key === 'ArrowRight' ? 1 : -1)));
+            c.setHops(next);
+            this.#hopButtons[next]?.focus();
+        });
+        this.#expandButton = h('button', { type: 'button', class: 'expand', onclick: () => c.expandNearest() }, icon('plus'), h('span', { class: 'n' }));
+        this.#stepper = h('div', { class: 'stepper card float top-left', hidden: true }, h('span', { class: 'label' }), opts, this.#expandButton);
+        // Legend
+        this.#legendHead = h('button', {
+            type: 'button',
+            class: 'legend-head',
+            onclick: () => this.#setLegend(!(this.#legendOpen ?? true)),
+        }, 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': 'true' }, this.#legendHead, this.#legendBody);
+        // Zoom + minimap
+        this.#zoomIn = iconButton('plus', '', () => c.zoom(1));
+        this.#zoomOut = iconButton('minus', '', () => c.zoom(-1));
+        this.#fitButton = iconButton('fit', '', () => void c.fit());
+        this.minimapHost = h('div', { class: 'minimap-host' });
+        this.#mapCluster = h('div', { class: 'map-cluster float bottom-right' }, h('div', { class: 'zoom-bar card', role: 'toolbar' }, this.#zoomIn, this.#zoomOut, this.#fitButton), 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.#caption, this.#stepper, this.#legend, this.#mapCluster, this.#finished, this.#transport, 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();
+            this.#pointer = { x: e.clientX - r.left, y: e.clientY - r.top };
+            if (this.tooltip.dataset.open === 'true')
+                this.#placeTooltip();
+        });
+        this.el.addEventListener('pointerleave', () => {
+            this.#pointer = null;
+            c.clearHover();
+        });
+    }
+    /**
+     * The canvas size and the floating chrome currently drawn over it (canvas-relative rects),
+     * for framing fits and flights around it.
+     */
+    chromeLayout() {
+        const r = this.el.getBoundingClientRect();
+        const obstacles = [];
+        const parts = [
+            this.#legend,
+            this.#mapCluster,
+            this.#transport,
+            this.#finished,
+            this.#stepper,
+            this.#chipBefore,
+            this.#chipAfter,
+        ];
+        if (this.#caption.dataset.empty !== 'true')
+            parts.push(this.#caption);
+        for (const el of parts) {
+            if (el.hidden)
+                continue;
+            const b = el.getBoundingClientRect();
+            if (b.width <= 0 || b.height <= 0)
+                continue;
+            obstacles.push({ x: b.left - r.left, y: b.top - r.top, width: b.width, height: b.height });
+        }
+        return { width: r.width, height: r.height, obstacles };
+    }
+    /** Whether the stage is tall enough to show the legend expanded by default. */
+    #defaultLegendOpen() {
+        const hgt = this.el.clientHeight;
+        return hgt === 0 || hgt >= 560;
+    }
+    #setLegend(open) {
+        this.#legendOpen = open;
+        attr(this.#legend, 'data-open', String(open));
+        attr(this.#legendHead, 'aria-expanded', String(open));
+    }
+    update(topics) {
+        const c = this.#ctx.controller;
+        const tr = this.#ctx.tr();
+        const all = topics.has('status') || topics.has('data') || topics.has('locale');
+        if (all) {
+            this.#renderLabels(tr);
+            this.#renderState(tr);
+            this.#renderTicks();
+            this.#renderCanvasLabel(tr);
+            if (this.#legendOpen === null)
+                this.#setLegend(this.#defaultLegendOpen());
+        }
+        if (all || topics.has('mode') || topics.has('focus') || topics.has('selection')) {
+            this.#renderMode(tr);
+        }
+        if (all || topics.has('mode') || topics.has('replay'))
+            this.#renderReplay(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;
+    }
+    #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.#stepper.querySelector('.label'), tr.t('focus.context'));
+        attr(this.#stepper.querySelector('.opts'), 'aria-label', tr.t('focus.hops'));
+        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}`) }))));
+    }
+    #renderCanvasLabel(tr) {
+        const stats = this.#ctx.controller.diff?.stats;
+        const canvas = this.canvasHost.querySelector('canvas');
+        if (!stats)
+            return;
+        const label = tr.t('aria.canvas', {
+            nb: stats.before.nodes,
+            eb: stats.before.edges,
+            na: stats.after.nodes,
+            ea: stats.after.edges,
+            changes: tr.plural('aria.changes', this.#ctx.controller.hunkCount),
+        });
+        if (canvas)
+            attr(canvas, 'aria-label', label);
+        setText(this.#liveCanvasLabel, '');
+    }
+    #renderMode(tr) {
+        const c = this.#ctx.controller;
+        const mode = c.mode;
+        this.#stepper.hidden = mode !== 'changes';
+        this.#hopButtons.forEach((b, n) => {
+            attr(b, 'aria-checked', String(n === c.hops));
+            b.tabIndex = n === c.hops ? 0 : -1;
+            attr(b, 'aria-label', `${tr.t('focus.hops')}: ${n}`);
+        });
+        const group = c.focus?.collapsed[c.nearestGroup()];
+        this.#expandButton.hidden = !group;
+        if (group) {
+            const usable = c.canExpand(c.nearestGroup()) || group.nodes.length > 0;
+            this.#expandButton.disabled = !usable;
+            setText(this.#expandButton.querySelector('.n'), tr.num(group.count));
+            relabel(this.#expandButton, `${usable ? tr.t('focus.expandNearest') : tr.t('focus.expandUnavailable')}: ${group.label} (E)`);
+        }
+        this.#transport.hidden = mode !== 'replay';
+        this.#caption.hidden = mode !== 'replay';
+        this.#swipe.hidden = mode !== 'swipe';
+    }
+    #renderReplay(tr) {
+        const c = this.#ctx.controller;
+        const clock = c.clock;
+        const scene = c.scene;
+        if (c.mode !== 'replay' || !clock || !scene) {
+            this.#finished.hidden = true;
+            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) {
+            // Nothing has played yet: the canvas shows the before version.
+        }
+        else if (clock.timeline.mode === 'chapters') {
+            const target = clock.activeTarget();
+            const ch = target.index >= 0 ? clock.timeline.chapters[target.index] : undefined;
+            if (ch) {
+                key = `c${target.index}`;
+                const first = scene.hunks[ch.hunks[0] ?? -1];
+                content = [
+                    h('span', {
+                        class: 'glyph-box',
+                        'data-family': first?.family ?? 'neutral',
+                        text: first ? sceneHunkGlyph(first) : '·',
+                    }),
+                    h('span', { class: 'text', text: tr.t(`phase.${ch.phase}`) }),
+                    h('span', { class: 'count', text: tr.num(ch.hunks.length) }),
+                ];
+            }
+        }
+        else {
+            let hIndex = clock.activeHunk();
+            if (hIndex < 0 && position > 0)
+                hIndex = clock.timeline.windows[position - 1]?.hunk ?? -1;
+            const hunk = hIndex >= 0 ? scene.hunks[hIndex] : undefined;
+            if (hunk) {
+                key = `h${hIndex}|${position}`;
+                content = [
+                    h('span', { class: 'glyph-box', 'data-family': hunk.family, text: sceneHunkGlyph(hunk) }),
+                    h('span', { class: 'text', text: hunk.title, title: hunk.title }),
+                    h('span', { class: 'count', text: `${position} / ${total}` }),
+                ];
+            }
+        }
+        if (this.#caption.dataset.key !== key) {
+            this.#caption.dataset.key = key;
+            attr(this.#caption, 'data-empty', String(key === ''));
+            replace(this.#caption, ...content);
+        }
+        const finished = clock.finished;
+        this.#finished.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(--kg-${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 }));
+        }
+    }
+    #renderSwipe() {
+        const c = this.#ctx.controller;
+        if (c.mode !== 'swipe')
+            return;
+        const pct = c.split * 100;
+        this.#divider.style.left = `${pct}%`;
+        attr(this.#divider, 'aria-valuenow', String(Math.round(pct)));
+        attr(this.#divider, 'aria-valuetext', `${Math.round(pct)}%`);
+    }
+    #bindDivider() {
+        const splitAt = (clientX) => {
+            const r = this.el.getBoundingClientRect();
+            return r.width > 0 ? (clientX - r.left) / r.width : 0.5;
+        };
+        this.#divider.addEventListener('pointerdown', (e) => {
+            e.preventDefault();
+            this.#dragging = e.pointerId;
+            this.#divider.setPointerCapture?.(e.pointerId);
+            this.#divider.classList.add('dragging');
+            this.#divider.focus({ preventScroll: true });
+        });
+        this.#divider.addEventListener('pointermove', (e) => {
+            if (this.#dragging === e.pointerId)
+                this.#ctx.controller.setSplit(splitAt(e.clientX));
+        });
+        const end = (e) => {
+            if (this.#dragging !== e.pointerId)
+                return;
+            this.#dragging = null;
+            this.#divider.classList.remove('dragging');
+        };
+        this.#divider.addEventListener('pointerup', end);
+        this.#divider.addEventListener('pointercancel', end);
+        this.#divider.addEventListener('dblclick', () => this.#ctx.controller.setSplit(0.5));
+        this.#divider.addEventListener('keydown', (e) => {
+            const c = this.#ctx.controller;
+            const to = {
+                Home: 0,
+                End: 1,
+                PageUp: c.split - 0.1,
+                PageDown: c.split + 0.1,
+            };
+            const next = to[e.key];
+            if (next === undefined)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            c.setSplit(next);
+        });
+    }
+    // ─── Tooltip ─────────────────────────────────────────────────────────────
+    #renderTooltip(tr) {
+        const c = this.#ctx.controller;
+        const scene = c.scene;
+        const diff = c.diff;
+        if (!scene || !diff || this.#dragging !== null) {
+            attr(this.tooltip, 'data-open', 'false');
+            return;
+        }
+        const parts = [];
+        let family = 'neutral';
+        if (c.hoverNode >= 0) {
+            const sn = scene.nodes[c.hoverNode];
+            const un = sn ? diff.index.node(sn.id) : undefined;
+            if (!sn || !un)
+                return;
+            family = sn.family;
+            const hunk = sn.hunk >= 0 ? scene.hunks[sn.hunk] : undefined;
+            const rekey = un.facets.find((f) => f.kind === 'rekey');
+            const degree = Math.max(un.degree.before, un.degree.after);
+            parts.push(h('div', { class: 't-label', text: sn.label }), sn.labelBefore ? h('div', { class: 't-old', text: sn.labelBefore }) : null, h('div', {
+                class: 't-id',
+                text: rekey && rekey.kind === 'rekey' ? `${rekey.from} → ${rekey.to}` : sn.id,
+            }), h('div', { class: 't-status', 'data-family': family }, h('span', { class: 'dot' }), sn.status === 'unchanged'
+                ? tr.t('status.unchanged')
+                : `${tr.t(`status.${sn.status}`)} · ${tr.t(`family.${family}`)}`), h('div', {
+                class: 't-sum',
+                text: hunk ? hunk.title : tr.plural('tooltip.relations', degree),
+            }), h('div', { class: 't-hint', text: tr.t('tooltip.select') }));
+        }
+        else if (c.hoverEdge >= 0) {
+            const se = scene.edges[c.hoverEdge];
+            if (!se)
+                return;
+            family = se.family;
+            const s = scene.nodes[se.s]?.label ?? '';
+            const t = scene.nodes[se.t]?.label ?? '';
+            const hunk = se.hunk >= 0 ? scene.hunks[se.hunk] : undefined;
+            parts.push(h('div', { class: 't-label', text: `${s} —${se.label}→ ${t}` }), se.labelBefore ? h('div', { class: 't-old', text: se.labelBefore }) : null, h('div', { class: 't-status', 'data-family': family }, h('span', { class: 'dot' }), tr.t(`status.${se.status}`)), hunk ? h('div', { class: 't-sum', text: hunk.title }) : null);
+        }
+        else if (c.hoverGroup >= 0) {
+            const g = c.focus?.collapsed[c.hoverGroup];
+            if (!g)
+                return;
+            parts.push(h('div', { class: 't-label', text: g.label }), h('div', {
+                class: 't-hint',
+                text: tr.t(c.canExpand(c.hoverGroup) ? 'focus.expand' : 'focus.expandUnavailable'),
+            }));
+        }
+        if (parts.length === 0) {
+            attr(this.tooltip, 'data-open', 'false');
+            return;
+        }
+        replace(this.tooltip, ...parts);
+        attr(this.tooltip, 'data-open', 'true');
+        this.#placeTooltip();
+    }
+    #placeTooltip() {
+        const p = this.#pointer;
+        if (!p) {
+            attr(this.tooltip, 'data-open', 'false');
+            return;
+        }
+        const w = this.tooltip.offsetWidth;
+        const hgt = this.tooltip.offsetHeight;
+        const W = this.el.clientWidth;
+        const H = this.el.clientHeight;
+        let x = p.x + 16;
+        let y = p.y + 18;
+        if (x + w > W - 8)
+            x = Math.max(8, p.x - w - 12);
+        if (y + hgt > H - 8)
+            y = Math.max(8, p.y - hgt - 12);
+        this.tooltip.style.transform = `translate(${Math.round(x)}px, ${Math.round(y)}px)`;
+    }
+    // ─── States ──────────────────────────────────────────────────────────────
+    #renderState(tr) {
+        const c = this.#ctx.controller;
+        const stats = c.diff?.stats;
+        let key = c.status;
+        if (c.status === 'loading')
+            key += `|${c.step}|${c.steps.join(',')}`;
+        if (c.status === 'ready')
+            key += stats?.identical ? '|identical' : '';
+        key += `|${tr.locale}`;
+        if (c.status === 'error')
+            key += `|${c.error?.message}`;
+        if (key === this.#stateKey)
+            return;
+        this.#stateKey = key;
+        this.#state.classList.remove('blocking');
+        if (c.status === 'ready' && !stats?.identical) {
+            this.#state.hidden = true;
+            replace(this.#state);
+            return;
+        }
+        this.#state.hidden = false;
+        if (c.status === 'loading') {
+            this.#state.classList.add('blocking');
+            const current = c.step ? c.steps.indexOf(c.step) : -1;
+            replace(this.#state, h('div', { class: 'skeleton-grid', 'aria-hidden': 'true' }), h('div', { class: 'state-card card', role: 'status', 'aria-live': 'polite' }, h('h2', { text: tr.t('state.loading') }), h('ol', { class: 'steps' }, c.steps.map((s, i) => h('li', { 'data-state': i < current ? 'done' : i === current ? 'active' : 'pending' }, h('span', { class: 'mark', 'aria-hidden': 'true' }, i < current ? icon('check') : null), h('span', { text: `${tr.t(`step.${s}`)}${i === current ? '…' : ''}` }))))));
+        }
+        else if (c.status === 'error') {
+            this.#state.classList.add('blocking');
+            const err = c.error;
+            const code = err instanceof KgdiffError ? err.code : err?.name;
+            const details = [code ? `[${code}]` : '', err?.message ?? '', err?.stack ?? '']
+                .filter(Boolean)
+                .join('\n');
+            replace(this.#state, h('div', { class: 'state-card card error', role: 'alert' }, h('div', { class: 'state-icon' }, icon('alert')), h('h2', { text: tr.t('state.error.title') }), h('p', { text: err?.message ?? '' }), h('details', null, h('summary', { text: tr.t('state.error.details') }), h('pre', { text: details }))));
+        }
+        else if (c.status === 'ready' && stats?.identical) {
+            replace(this.#state, h('div', { class: 'state-card card ok', role: 'status' }, h('div', { class: 'state-icon' }, icon('check-circle')), h('h2', { text: tr.t('state.identical.title') }), h('p', {
+                text: tr.t('state.identical.body', {
+                    nodes: tr.plural('count.nodes', stats.after.nodes),
+                    edges: tr.plural('count.edges', stats.after.edges),
+                }),
+            })));
+        }
+        else {
+            this.#state.classList.add('blocking');
+            replace(this.#state, h('div', { class: 'state-card' }, h('div', { class: 'state-icon' }, icon('overlay')), h('h2', { text: tr.t('state.empty.title') }), h('p', { text: tr.t('state.empty.body') })));
+        }
+    }
+}
+//# sourceMappingURL=stage.js.map