@kgdiff/viewer 0.0.0-stage → 0.2.0

package/dist/ui/detail.js

@@ -0,0 +1,609 @@
+import { attr, h, icon, iconButton, replaceKeepingFocus } from '../dom.js';
+import { formatPercent } from '../i18n.js';
+import { diffChars, diffWords, pairItems } from '../text-diff.js';
+import { formatValue, listItems, sceneHunkGlyph } from './context.js';
+const MAX_NODES = 12;
+const MAX_RELATIONS = 12;
+const CLAMP_CHARS = 180;
+/** Up to this many characters (both sides together) a value change reads `before → after`. */
+const INLINE_CHARS = 60;
+function section(title, count, ...children) {
+    return h('section', { class: 'section' }, h('h3', null, title, count !== null ? h('span', { class: 'n', text: String(count) }) : null), ...children);
+}
+function kv(rows) {
+    const dl = h('dl', { class: 'kv' });
+    for (const [k, v] of rows)
+        dl.append(h('dt', { text: k }), h('dd', null, ...[v].flat()));
+    return dl;
+}
+/** Render one side of a diff: equal text plus that side's changes marked. */
+function marked(segs, side) {
+    const out = [];
+    for (const s of segs) {
+        if (s.op === 'equal')
+            out.push(s.text);
+        else if (s.op === 'delete' && side === 'before')
+            out.push(h('del', { class: 'hl', text: s.text }));
+        else if (s.op === 'insert' && side === 'after')
+            out.push(h('ins', { class: 'hl', text: s.text }));
+    }
+    return out;
+}
+function chip(text, kind) {
+    const sign = kind === 'add' ? '+' : kind === 'del' ? '−' : '';
+    return h('span', { class: `vchip${kind === 'same' ? '' : ` ${kind}`}` }, sign ? h('span', { class: 'sign', 'aria-hidden': 'true', text: sign }) : null, text);
+}
+function chips(added, removed, same = []) {
+    return h('div', { class: 'chips' }, removed.map((x) => chip(x, 'del')), added.map((x) => chip(x, 'add')), same.map((x) => chip(x, 'same')));
+}
+/** `before → after` on one line, wrapping when long. */
+function pair(before, after, tr) {
+    return h('div', { class: 'pair' }, h('span', { class: 'b' }, before), h('span', { class: 'arr', 'aria-hidden': 'true', text: '→' }), h('span', { class: 'sr-only', text: tr.t('detail.changedTo') }), h('span', null, after));
+}
+/** `before → after` with the changed characters marked. */
+function textPair(before, after, tr) {
+    const segs = diffChars(before, after);
+    return pair(marked(segs, 'before'), marked(segs, 'after'), tr);
+}
+/** One side of a change on a line of its own: `− before` or `+ after`. */
+function signed(side, content) {
+    return h('div', { class: `line ${side}` }, h('span', { class: 'sign', 'aria-hidden': 'true', text: side === 'old' ? '−' : '+' }), h('div', null, content));
+}
+/** A set change (synonyms, types, parents, list values): edits as pairs, the rest as chips. */
+function items(added, removed, tr, same = []) {
+    const p = pairItems(removed, added);
+    const out = p.pairs.map(([b, a]) => textPair(b, a, tr));
+    if (p.added.length > 0 || p.removed.length > 0 || same.length > 0) {
+        out.push(chips(p.added, p.removed, same));
+    }
+    return out;
+}
+/** Key · value rows. */
+function table(rows, cls = 'attrs') {
+    return h('table', { class: cls }, h('colgroup', null, h('col', { class: 'k' }), h('col')), h('tbody', null, rows.map(([k, v]) => h('tr', null, h('td', { class: 'k', text: k }), h('td', null, v)))));
+}
+function familyOfEdge(e) {
+    if (e.status === 'added')
+        return 'added';
+    if (e.status === 'removed') {
+        return e.facets.some((f) => f.kind === 'collapsed') ? 'identity' : 'removed';
+    }
+    for (const f of e.facets) {
+        if (f.kind === 'retarget')
+            return f.cause === 'merge' || f.cause === 'split' ? 'identity' : 'structure';
+        if (f.kind === 'predicate')
+            return 'structure';
+    }
+    return e.status === 'modified' ? 'content' : 'neutral';
+}
+export class Detail {
+    el;
+    #body;
+    #showUnchangedAttrs = false;
+    #showAllRelations = false;
+    #showAllNodes = false;
+    #expandedValues = new Set();
+    #lastKey = '';
+    #ctx;
+    constructor(ctx) {
+        this.#ctx = ctx;
+        this.#body = h('div', { class: 'detail-scroll scroll', tabindex: '-1' });
+        this.el = h('section', { class: 'detail', 'data-empty': 'true' }, this.#body);
+    }
+    update(topics) {
+        if (topics.has('selection') ||
+            topics.has('data') ||
+            topics.has('locale') ||
+            topics.has('review') ||
+            topics.has('status') ||
+            topics.has('filters')) {
+            this.#render();
+        }
+    }
+    #render() {
+        const c = this.#ctx.controller;
+        const tr = this.#ctx.tr();
+        attr(this.el, 'aria-label', tr.t('detail.label'));
+        const scene = c.scene;
+        const diff = c.diff;
+        this.el.hidden =
+            c.status !== 'ready' || !scene || !diff || (scene.hunks.length === 0 && c.selectedNode < 0);
+        if (this.el.hidden || !scene || !diff)
+            return;
+        const key = `${c.selectedHunk}|${c.selectedNode}`;
+        if (key !== this.#lastKey) {
+            this.#lastKey = key;
+            this.#showUnchangedAttrs = false;
+            this.#showAllRelations = false;
+            this.#showAllNodes = false;
+            this.#expandedValues.clear();
+            this.#body.scrollTop = 0;
+        }
+        if (c.selectedHunk < 0 && c.selectedNode < 0) {
+            attr(this.el, 'data-empty', 'true');
+            replaceKeepingFocus(this.#ctx.root, this.#body, this.#body, h('div', { class: 'detail-empty' }, icon('changes'), h('div', null, h('div', { text: tr.t('detail.empty') }), h('div', { class: 'sub', text: tr.t('detail.emptyHint') }))));
+            return;
+        }
+        attr(this.el, 'data-empty', 'false');
+        const hunk = c.selectedHunk >= 0 ? scene.hunks[c.selectedHunk] : undefined;
+        if (hunk)
+            this.#renderHunk(hunk, scene, diff, tr);
+        else
+            this.#renderNode(scene, diff, tr);
+    }
+    #nav(tr, hunk) {
+        const c = this.#ctx.controller;
+        const items = [];
+        if (hunk) {
+            const reviewed = c.isReviewed(hunk.id);
+            items.push(h('button', {
+                type: 'button',
+                class: 'rv-btn',
+                'data-focus-key': 'review',
+                'aria-pressed': String(reviewed),
+                title: `${tr.t(reviewed ? 'review.unmark' : 'review.mark')} (X)`,
+                onclick: () => c.toggleReviewed(hunk.id),
+            }, h('span', { class: 'ring' }, icon('check')), tr.t('review.toggle')));
+        }
+        const rank = hunk ? c.list.rank.get(hunk.index) : undefined;
+        const prev = iconButton('chevron-up', `${tr.t('detail.prev')} (K)`, () => c.prev(), {
+            class: 'icon-btn sm',
+            'data-focus-key': 'prev',
+        });
+        const next = iconButton('chevron-down', `${tr.t('detail.next')} (J)`, () => c.next(), {
+            class: 'icon-btn sm',
+            'data-focus-key': 'next',
+        });
+        prev.disabled = rank === 0 || c.list.order.length === 0;
+        next.disabled =
+            (rank !== undefined && rank >= c.list.order.length - 1) || c.list.order.length === 0;
+        items.push(prev, next);
+        return h('div', { class: 'd-nav' }, ...items);
+    }
+    #renderHunk(hunk, scene, diff, tr) {
+        const c = this.#ctx.controller;
+        const core = diff.index.hunk(hunk.id);
+        const focusIndex = c.selectedNode >= 0 && hunk.nodes.includes(c.selectedNode) ? c.selectedNode : hunk.anchor;
+        const focusId = focusIndex >= 0 ? scene.nodes[focusIndex]?.id : core?.anchor;
+        const focus = focusId !== undefined ? diff.index.node(focusId) : undefined;
+        const parts = [
+            h('div', { class: 'd-top' }, h('span', { class: 'fam-pill', 'data-family': hunk.family }, h('span', { class: 'g', 'aria-hidden': 'true', text: sceneHunkGlyph(hunk) }), tr.t(`kind.${hunk.kind}`)), this.#nav(tr, hunk)),
+            h('h2', { class: 'd-title', text: hunk.title }),
+            hunk.subtitle ? h('div', { class: 'd-sub', text: hunk.subtitle }) : null,
+        ];
+        const nodeIds = core?.nodes ?? [];
+        if (nodeIds.length > 1)
+            parts.push(this.#nodeList(nodeIds, focusId, scene, diff, tr));
+        const [lead, rest] = focus
+            ? this.#nodeSections(focus, diff, tr, nodeIds.length > 1, true)
+            : [[], []];
+        const edges = (core?.edges ?? [])
+            .map((id) => diff.index.edge(id))
+            .filter((e) => e !== undefined);
+        parts.push(...lead);
+        if (edges.length > 0)
+            parts.push(this.#relations(edges, focusId, scene, diff, tr, true));
+        parts.push(...rest);
+        replaceKeepingFocus(this.#ctx.root, this.#body, this.#body, ...parts);
+    }
+    #renderNode(scene, diff, tr) {
+        const c = this.#ctx.controller;
+        const sn = scene.nodes[c.selectedNode];
+        const node = sn ? diff.index.node(sn.id) : undefined;
+        if (!sn || !node) {
+            replaceKeepingFocus(this.#ctx.root, this.#body, this.#body);
+            return;
+        }
+        const edges = diff.index.edgesOf(node.id);
+        const [lead, rest] = this.#nodeSections(node, diff, tr, false, false);
+        replaceKeepingFocus(this.#ctx.root, this.#body, this.#body, h('div', { class: 'd-top' }, h('span', { class: 'fam-pill', 'data-family': sn.family }, h('span', { class: 'g', 'aria-hidden': 'true', text: '·' }), tr.t(node.status === 'unchanged' ? 'detail.unchangedNode' : `status.${node.status}`)), this.#nav(tr, undefined)), h('h2', { class: 'd-title', text: node.label }), ...lead, edges.length > 0 ? this.#relations(edges, node.id, scene, diff, tr, false) : null, ...rest);
+    }
+    // ─── Sections ────────────────────────────────────────────────────────────
+    #nodeList(ids, focusId, scene, diff, tr) {
+        const c = this.#ctx.controller;
+        const shown = this.#showAllNodes ? ids : ids.slice(0, MAX_NODES);
+        const list = h('div', { class: 'nodes' });
+        for (const id of shown) {
+            const n = diff.index.node(id);
+            const i = scene.nodeIndex.get(id);
+            const fam = i !== undefined ? (scene.nodes[i]?.family ?? 'neutral') : 'neutral';
+            list.appendChild(h('button', {
+                type: 'button',
+                class: 'node-link',
+                'data-focus-key': `node:${id}`,
+                'data-family': fam,
+                'aria-current': String(id === focusId),
+                onclick: () => {
+                    if (i !== undefined)
+                        c.selectNode(i, { fly: true });
+                },
+            }, h('span', { class: 'sdot', 'aria-hidden': 'true' }), h('span', { class: 'lbl', text: n?.label ?? id, title: n?.label ?? id }), h('span', { class: 'meta', text: n ? tr.t(`status.${n.status}`) : '' })));
+        }
+        return section(tr.t('detail.nodes'), ids.length, list, ids.length > MAX_NODES
+            ? this.#moreToggle(tr, this.#showAllNodes, () => {
+                this.#showAllNodes = !this.#showAllNodes;
+                this.#render();
+            })
+            : null);
+    }
+    #moreToggle(tr, expanded, onClick) {
+        return h('button', {
+            type: 'button',
+            class: 'disclosure',
+            'data-focus-key': 'nodes-more',
+            'aria-expanded': String(expanded),
+            onclick: onClick,
+        }, tr.t(expanded ? 'detail.showLess' : 'detail.showMore'), icon('chevron-down'));
+    }
+    /**
+     * The node's sections, split around the relations. A modified node (or an unchanged one a hunk
+     * points at) leads with what changed and ends with its unchanged rest; added, removed and
+     * inspected nodes lead with what they are.
+     */
+    #nodeSections(node, diff, tr, showName, inHunk) {
+        const label = (id) => diff.index.node(id)?.label ?? id;
+        const fold = node.status === 'modified' || (inHunk && node.status === 'unchanged');
+        const changes = this.#changes(node, diff, tr, label);
+        const comp = this.#composition(node, diff, tr, label);
+        const evidence = this.#evidence(node, diff, tr, label);
+        const overview = this.#overview(node, tr, showName, fold);
+        const present = (xs) => xs.filter((x) => x !== null);
+        return fold
+            ? [present([comp, changes]), present([evidence, ...overview])]
+            : [present([...overview, changes, comp, evidence]), []];
+    }
+    /** What changed on the node: one row per facet (per key for attributes), in facet order. */
+    #changes(node, diff, tr, label) {
+        // Replacement links hold ids as written: name the node they point at when there is one.
+        const named = (ids) => ids.map((id) => (diff.index.nodeByAfter(id) ?? diff.index.nodeByBefore(id))?.label ?? id);
+        const rows = [];
+        for (const f of node.facets) {
+            switch (f.kind) {
+                case 'rekey':
+                    rows.push([
+                        tr.t('detail.id'),
+                        [
+                            h('div', { class: 'id-text' }, textPair(f.from, f.to, tr)),
+                            f.score < 1
+                                ? h('div', {
+                                    class: 'note-line',
+                                    text: tr.t('detail.matchScore', { p: formatPercent(f.score) }),
+                                })
+                                : null,
+                        ],
+                    ]);
+                    break;
+                case 'rename':
+                    rows.push([tr.t('detail.name'), textPair(f.from, f.to, tr)]);
+                    break;
+                case 'types':
+                case 'aliases':
+                    rows.push([tr.t(`detail.${f.kind}`), items(f.added, f.removed, tr)]);
+                    break;
+                case 'attrs':
+                    for (const ch of f.changes)
+                        rows.push([ch.key, this.#attrChange(node.id, ch, tr)]);
+                    break;
+                case 'move':
+                    rows.push([tr.t('detail.hierarchy'), items(f.to.map(label), f.from.map(label), tr)]);
+                    break;
+                case 'deprecate':
+                    rows.push([
+                        tr.t('detail.status'),
+                        h('strong', {
+                            text: tr.t(f.deprecated ? 'detail.deprecated' : 'detail.undeprecated'),
+                        }),
+                    ]);
+                    break;
+                case 'replacement':
+                    for (const [key, links] of [
+                        ['detail.replacedBy', f.replacedBy],
+                        ['detail.replaces', f.replaces],
+                    ]) {
+                        if (links.added.length > 0 || links.removed.length > 0) {
+                            rows.push([tr.t(key), items(named(links.added), named(links.removed), tr)]);
+                        }
+                    }
+                    break;
+                default:
+                    // Merges and splits: the composition section.
+                    break;
+            }
+        }
+        return rows.length > 0
+            ? section(tr.t('detail.changes'), rows.length, table(rows, 'attrs changes'))
+            : null;
+    }
+    /** One attribute's change: lists as set changes, short values inline, long ones a line a side. */
+    #attrChange(nodeId, ch, tr) {
+        const beforeList = listItems(ch.before);
+        const afterList = listItems(ch.after);
+        if (beforeList && afterList) {
+            const b = new Set(beforeList);
+            const a = new Set(afterList);
+            return items(afterList.filter((x) => !b.has(x)), beforeList.filter((x) => !a.has(x)), tr, afterList.filter((x) => b.has(x)));
+        }
+        const key = `${nodeId}|${ch.key}`;
+        const before = formatValue(ch.before);
+        const after = formatValue(ch.after);
+        if (ch.before === undefined) {
+            const ins = h('ins', { class: 'hl', text: after });
+            return [signed('new', this.#value(`${key}|a`, after, tr, [ins]))];
+        }
+        if (ch.after === undefined) {
+            const del = h('del', { class: 'hl', text: before });
+            return [signed('old', this.#value(`${key}|b`, before, tr, [del]))];
+        }
+        const segs = typeof ch.before === 'string' && typeof ch.after === 'string'
+            ? diffWords(before, after)
+            : [
+                { op: 'delete', text: before },
+                { op: 'insert', text: after },
+            ];
+        const b = marked(segs, 'before');
+        const a = marked(segs, 'after');
+        return before.length + after.length <= INLINE_CHARS && !/\n/.test(before + after)
+            ? [pair(b, a, tr)]
+            : [
+                signed('old', this.#value(`${key}|b`, before, tr, b)),
+                signed('new', this.#value(`${key}|a`, after, tr, a)),
+            ];
+    }
+    /**
+     * Identity and attributes, without what the changes section shows. Folded, the attributes
+     * (all unchanged) hide behind a toggle; otherwise they get a section of their own.
+     */
+    #overview(node, tr, showName, fold) {
+        const has = (kind) => node.facets.some((f) => f.kind === kind);
+        const current = node.after ?? node.before;
+        const rows = [];
+        if (showName && !has('rename'))
+            rows.push([tr.t('detail.name'), node.label]);
+        if (!has('rekey')) {
+            rows.push([
+                tr.t('detail.id'),
+                h('span', { class: 'id-text', text: node.afterId ?? node.beforeId ?? node.id }),
+            ]);
+        }
+        if (!has('types') && node.types.length > 0) {
+            rows.push([tr.t('detail.types'), chips([], [], node.types)]);
+        }
+        if (!has('aliases') && current && current.aliases.length > 0) {
+            rows.push([tr.t('detail.aliases'), chips([], [], current.aliases)]);
+        }
+        const status = [tr.t(`status.${node.status}`)];
+        if (current?.deprecated && !has('deprecate'))
+            status.push(` · ${tr.t('detail.deprecated')}`);
+        if (current?.implicit)
+            status.push(` · ${tr.t('detail.implicit')}`);
+        rows.push([tr.t('detail.status'), status]);
+        const all = current?.attrs ?? {};
+        const changed = new Set();
+        for (const f of node.facets) {
+            if (f.kind === 'attrs')
+                for (const c of f.changes)
+                    changed.add(c.key);
+        }
+        const keys = Object.keys(all)
+            .filter((k) => !changed.has(k))
+            .sort();
+        const attrs = () => table(keys.map((k) => [k, this.#value(`${node.id}|u|${k}`, formatValue(all[k]), tr)]));
+        if (!fold) {
+            const out = [section(tr.t('detail.identity'), null, kv(rows))];
+            if (keys.length > 0)
+                out.push(section(tr.t('detail.attributes'), null, attrs()));
+            return out;
+        }
+        return [
+            section(tr.t('detail.identity'), null, kv(rows), keys.length > 0
+                ? h('button', {
+                    type: 'button',
+                    class: 'disclosure',
+                    'data-focus-key': 'attrs-more',
+                    'aria-expanded': String(this.#showUnchangedAttrs),
+                    onclick: () => {
+                        this.#showUnchangedAttrs = !this.#showUnchangedAttrs;
+                        this.#render();
+                    },
+                }, tr.plural('detail.unchangedAttrs', keys.length), icon('chevron-down'))
+                : null, keys.length > 0 && this.#showUnchangedAttrs ? attrs() : null),
+        ];
+    }
+    /** A value cell, clamped to 4 lines with “Show more” when long. */
+    #value(key, text, tr, content) {
+        const long = text.length > CLAMP_CHARS;
+        const open = this.#expandedValues.has(key);
+        const v = h('div', { class: `val${long && !open ? ' clamped' : ''}` }, ...(content ?? [text]));
+        if (!long)
+            return v;
+        return h('div', null, v, h('button', {
+            type: 'button',
+            class: 'link-btn more',
+            'data-focus-key': `value:${key}`,
+            text: tr.t(open ? 'detail.showLess' : 'detail.showMore'),
+            onclick: () => {
+                if (open)
+                    this.#expandedValues.delete(key);
+                else
+                    this.#expandedValues.add(key);
+                this.#render();
+            },
+        }));
+    }
+    #composition(node, diff, tr, label) {
+        const rows = [];
+        const via = (v, confidence) => v === 'hint'
+            ? tr.t('detail.viaHint')
+            : `${tr.t('detail.viaHeuristic')} · ${tr.t('detail.confidence', { p: formatPercent(confidence) })}`;
+        for (const f of node.facets) {
+            switch (f.kind) {
+                case 'mergedInto':
+                    rows.push(h('div', { class: 'comp-row' }, chip(node.label, 'del'), h('span', { class: 'arrow', 'aria-hidden': 'true', text: '→' }), chip(label(f.target), 'same'), h('span', { class: 'note', text: via(f.via, f.confidence) })));
+                    break;
+                case 'mergeTarget': {
+                    const notes = f.sources.map((s) => {
+                        const src = diff.index.node(s);
+                        const m = src?.facets.find((x) => x.kind === 'mergedInto');
+                        return m && m.kind === 'mergedInto' ? via(m.via, m.confidence) : '';
+                    });
+                    rows.push(h('div', { class: 'comp-row' }, h('span', { class: 'note', text: tr.t('detail.mergedFrom') })));
+                    f.sources.forEach((s, i) => {
+                        rows.push(h('div', { class: 'comp-row' }, chip(label(s), 'del'), h('span', { class: 'arrow', 'aria-hidden': 'true', text: '→' }), chip(node.label, 'same'), notes[i] ? h('span', { class: 'note', text: notes[i] }) : null));
+                    });
+                    break;
+                }
+                case 'splitFrom':
+                    rows.push(h('div', { class: 'comp-row' }, chip(label(f.source), 'same'), h('span', { class: 'arrow', 'aria-hidden': 'true', text: '→' }), chip(node.label, 'add'), h('span', { class: 'note', text: via(f.via, f.confidence) })));
+                    break;
+                case 'splitInto':
+                    rows.push(h('div', { class: 'comp-row' }, h('span', { class: 'note', text: tr.t('detail.splitInto') })), h('div', { class: 'comp-row' }, chip(node.label, 'same'), h('span', { class: 'arrow', 'aria-hidden': 'true', text: '→' }), f.targets.map((t) => chip(label(t), 'add'))));
+                    break;
+                default:
+                    break;
+            }
+        }
+        return rows.length
+            ? section(tr.t('detail.composition'), null, h('div', { class: 'comp' }, rows))
+            : null;
+    }
+    #evidence(node, diff, tr, label) {
+        const parts = [];
+        const rekey = node.facets.find((f) => f.kind === 'rekey');
+        if (rekey && node.afterId !== undefined) {
+            const m = diff.matches.find((x) => x.after === node.afterId);
+            if (m?.method === 'hint')
+                parts.push(h('div', { class: 'note-line', text: tr.t('detail.matchHint') }));
+            else if (m) {
+                parts.push(h('div', {
+                    class: 'note-line',
+                    text: tr.t('detail.matchScore', { p: formatPercent(m.score) }),
+                }));
+                if (m.evidence)
+                    parts.push(this.#bars(m.evidence, tr));
+            }
+        }
+        const suggestions = diff.suggestions.filter((s) => (node.beforeId !== undefined && node.status === 'removed' && s.before === node.beforeId) ||
+            (node.afterId !== undefined && node.status === 'added' && s.after === node.afterId));
+        for (const s of suggestions) {
+            const other = node.status === 'removed'
+                ? diff.index.nodeByAfter(s.after)
+                : diff.index.nodeByBefore(s.before);
+            parts.push(h('div', { class: 'comp-row', style: 'margin-top: 8px' }, h('span', { class: 'note', text: tr.t('detail.suggestion') }), chip(other ? label(other.id) : node.status === 'removed' ? s.after : s.before, 'same'), h('span', {
+                class: 'note',
+                text: `${tr.t('detail.matchScore', { p: formatPercent(s.score) })} · ${tr.t(s.reason === 'ambiguous' ? 'detail.suggestion.ambiguous' : 'detail.suggestion.below')}`,
+            })), this.#bars(s.evidence, tr));
+        }
+        return parts.length ? section(tr.t('detail.evidence'), null, ...parts) : null;
+    }
+    #bars(e, tr) {
+        const rows = [
+            [tr.t('detail.evidence.label'), e.label],
+            [tr.t('detail.evidence.neighbors'), e.neighbors],
+            [tr.t('detail.evidence.types'), e.types],
+            [tr.t('detail.evidence.attrs'), e.attrs],
+        ];
+        return h('div', { class: 'bars', style: 'margin-top: 8px' }, rows.map(([k, v]) => h('div', { class: 'bar-row' }, h('span', { class: 'lbl', text: k }), h('span', {
+            class: 'track',
+            role: 'meter',
+            'aria-label': k,
+            'aria-valuemin': '0',
+            'aria-valuemax': '100',
+            'aria-valuenow': String(Math.round(v * 100)),
+        }, h('span', {
+            class: 'fill',
+            style: `display:block; width: ${Math.round(Math.max(0, Math.min(1, v)) * 100)}%`,
+        })), h('span', { class: 'v', text: formatPercent(v) }))));
+    }
+    // ─── Relations ───────────────────────────────────────────────────────────
+    #relations(edges, focusId, scene, diff, tr, changed) {
+        const sorted = changed
+            ? edges
+            : [...edges].sort((a, b) => Number(a.source !== focusId) - Number(b.source !== focusId));
+        const shown = this.#showAllRelations ? sorted : sorted.slice(0, MAX_RELATIONS);
+        const list = h('div', { class: 'rels' });
+        for (const e of shown)
+            list.appendChild(this.#relation(e, focusId, scene, diff, tr));
+        const rest = sorted.length - shown.length;
+        return section(tr.t('detail.relations'), edges.length, list, rest > 0 || this.#showAllRelations
+            ? h('button', {
+                type: 'button',
+                class: 'disclosure',
+                'data-focus-key': 'rels-more',
+                'aria-expanded': String(this.#showAllRelations),
+                onclick: () => {
+                    this.#showAllRelations = !this.#showAllRelations;
+                    this.#render();
+                },
+            }, this.#showAllRelations
+                ? tr.t('detail.showLess')
+                : tr.plural('detail.moreRelations', rest), icon('chevron-down'))
+            : null);
+    }
+    #relation(e, focusId, scene, diff, tr) {
+        const c = this.#ctx.controller;
+        const label = (id) => diff.index.node(id)?.label ?? id;
+        const node = (id) => h('span', { class: 'node', text: label(id) });
+        const was = (id) => h('span', { class: 'was', text: ` (${tr.t('detail.was', { x: tr.quote(label(id)) })})` });
+        const retarget = e.facets.find((f) => f.kind === 'retarget');
+        const predicate = e.facets.find((f) => f.kind === 'predicate');
+        const relabel = e.facets.find((f) => f.kind === 'label');
+        const pred = h('span', { class: 'pred', text: ` —${e.label}→ ` });
+        const outgoing = focusId !== undefined && e.source === focusId && e.target !== focusId;
+        const incoming = focusId !== undefined && e.target === focusId && e.source !== focusId;
+        const s = [];
+        if (outgoing) {
+            s.push(h('span', { class: 'pred', text: `→ ${e.label} → ` }), node(e.target));
+            if (retarget?.end === 'target')
+                s.push(was(retarget.from));
+        }
+        else if (incoming) {
+            s.push(h('span', { class: 'pred', text: `← ${e.label} ← ` }), node(e.source));
+            if (retarget?.end === 'source')
+                s.push(was(retarget.from));
+        }
+        else {
+            s.push(node(e.source));
+            if (retarget?.end === 'source')
+                s.push(was(retarget.from));
+            s.push(pred, node(e.target));
+            if (retarget?.end === 'target')
+                s.push(was(retarget.from));
+        }
+        const prevLabel = predicate
+            ? (e.before?.label ?? predicate.from)
+            : relabel
+                ? relabel.from
+                : undefined;
+        if (prevLabel !== undefined) {
+            s.push(h('span', { class: 'was', text: ` (${tr.t('detail.was', { x: tr.quote(prevLabel) })})` }));
+        }
+        if (e.facets.some((f) => f.kind === 'attrs')) {
+            s.push(h('span', { class: 'was', text: ` · ${tr.t('detail.edgeAttrs')}` }));
+        }
+        if (e.facets.some((f) => f.kind === 'collapsed')) {
+            s.push(h('span', { class: 'was', text: ` · ${tr.t('detail.collapsed')}` }));
+        }
+        const sign = e.status === 'added'
+            ? '+'
+            : e.status === 'removed'
+                ? '−'
+                : e.status === 'modified'
+                    ? '~'
+                    : '·';
+        const j = scene.edgeIndex.get(e.id);
+        const family = familyOfEdge(e);
+        return h('button', {
+            type: 'button',
+            class: `rel ${e.status}`,
+            'data-focus-key': `rel:${e.id}`,
+            'data-family': family,
+            title: tr.t('detail.showOnCanvas'),
+            disabled: j === undefined,
+            onclick: () => {
+                if (j !== undefined)
+                    c.pinEdge(j);
+            },
+        }, h('span', { class: 'sign', 'aria-hidden': 'true', text: sign }), h('span', { class: 's' }, ...s));
+    }
+}
+//# sourceMappingURL=detail.js.map