@kgdiff/viewer 0.0.0-stage → 0.1.0

package/dist/ui/header.d.ts

@@ -0,0 +1,14 @@
+import type { Topic } from '../controller.js';
+import type { UiContext } from './context.js';
+export declare class Header {
+    #private;
+    readonly el: HTMLElement;
+    readonly menuButton: HTMLButtonElement;
+    constructor(ctx: UiContext);
+    update(topics: ReadonlySet<Topic>): void;
+    /** Re-measure the segmented thumb (fonts / size changes). */
+    layout(): void;
+    setSidebarState(open: boolean): void;
+    setMenuState(open: boolean): void;
+}
+//# sourceMappingURL=header.d.ts.map

package/dist/ui/header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../src/ui/header.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAK9C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAkC9C,qBAAa,MAAM;;IACjB,QAAQ,CAAC,EAAE,EAAE,WAAW,CAAC;IAOzB,QAAQ,CAAC,UAAU,EAAE,iBAAiB,CAAC;IAQvC,YAAY,GAAG,EAAE,SAAS,EAsEzB;IAED,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,KAAK,CAAC,GAAG,IAAI,CAsBvC;IAED,6DAA6D;IAC7D,MAAM,IAAI,IAAI,CAEb;IAED,eAAe,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAEnC;IAED,YAAY,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAEhC;CA8GF"}

package/dist/ui/header.js

@@ -0,0 +1,195 @@
+import { attr, h, icon, iconButton, relabel, replace, setText } from '../dom.js';
+import { familyCounts } from '../list-model.js';
+const MODES = [
+    { mode: 'overlay', icon: 'overlay', key: '1' },
+    { mode: 'swipe', icon: 'swipe', key: '2' },
+    { mode: 'replay', icon: 'replay', key: '3' },
+    { mode: 'changes', icon: 'changes', key: '4' },
+];
+const STATS = [
+    { id: 'added', family: 'added', families: ['added'], glyph: '+' },
+    { id: 'removed', family: 'removed', families: ['removed'], glyph: '−' },
+    { id: 'modified', family: 'content', families: ['content'], glyph: '~' },
+    { id: 'restructured', family: 'structure', families: ['structure', 'identity'], glyph: '⇄' },
+];
+/** The kgdiff mark: a soft accent diamond holding a node. */
+function brandMark() {
+    const tpl = document.createElement('template');
+    tpl.innerHTML =
+        '<svg class="brand-mark" viewBox="0 0 20 20" aria-hidden="true" focusable="false">' +
+            '<rect x="4.1" y="4.1" width="11.8" height="11.8" rx="3.2" transform="rotate(45 10 10)" ' +
+            'fill="var(--kg-accent-soft)" stroke="var(--kg-accent)" stroke-width="1.5"/>' +
+            '<circle cx="10" cy="10" r="2.4" fill="var(--kg-accent)"/></svg>';
+    return tpl.content.firstElementChild;
+}
+export class Header {
+    el;
+    #versions;
+    #seg;
+    #thumb;
+    #segButtons = new Map();
+    #stats;
+    #statButtons = new Map();
+    menuButton;
+    #fitButton;
+    #helpButton;
+    #sidebarButton;
+    #brand;
+    #ctx;
+    constructor(ctx) {
+        this.#ctx = ctx;
+        const c = ctx.controller;
+        this.#brand = h('div', { class: 'brand' }, brandMark(), h('span', { class: 'brand-name', text: 'kgdiff' }));
+        this.#versions = h('div', { class: 'versions' });
+        this.#thumb = h('span', { class: 'thumb', 'aria-hidden': 'true' });
+        this.#seg = h('div', { class: 'segmented', role: 'radiogroup' }, this.#thumb);
+        for (const m of MODES) {
+            const b = h('button', {
+                type: 'button',
+                class: 'seg',
+                role: 'radio',
+                'data-mode': m.mode,
+                onclick: () => ctx.setMode(m.mode),
+            }, icon(m.icon), h('span', { class: 'lbl' }));
+            this.#segButtons.set(m.mode, b);
+            this.#seg.appendChild(b);
+        }
+        this.#seg.addEventListener('keydown', (e) => this.#onSegKey(e));
+        this.#stats = h('div', { class: 'stats', role: 'group' });
+        for (const s of STATS) {
+            const b = h('button', {
+                type: 'button',
+                class: 'pill stat',
+                'data-family': s.family,
+                'aria-pressed': 'false',
+                onclick: () => c.setFamilies(s.families),
+            }, h('span', { class: 'glyph', 'aria-hidden': 'true', text: s.glyph }), h('span', { class: 'n' }));
+            this.#statButtons.set(s.id, b);
+            this.#stats.appendChild(b);
+        }
+        this.menuButton = iconButton('contrast', '', () => ctx.toggleMenu(), {
+            'aria-haspopup': 'menu',
+            'aria-expanded': 'false',
+        });
+        this.#fitButton = iconButton('fit', '', () => void c.fit());
+        this.#helpButton = iconButton('help', '', () => ctx.openHelp());
+        this.#sidebarButton = iconButton('sidebar', '', () => ctx.toggleSidebar());
+        this.el = h('header', { class: 'header' }, this.#brand, h('span', { class: 'header-sep', 'aria-hidden': 'true' }), this.#versions, h('div', { class: 'header-center' }, this.#seg), h('div', { class: 'header-end' }, this.#stats, this.menuButton, this.#fitButton, this.#helpButton, this.#sidebarButton));
+    }
+    update(topics) {
+        const tr = this.#ctx.tr();
+        if (topics.has('locale') || topics.has('data') || topics.has('status')) {
+            attr(this.#brand, 'title', `kgdiff — ${tr.t('brand.tagline')}`);
+            attr(this.#seg, 'aria-label', tr.t('mode.label'));
+            attr(this.#stats, 'aria-label', tr.t('stat.label'));
+            for (const m of MODES) {
+                const b = this.#segButtons.get(m.mode);
+                const label = tr.t(`mode.${m.mode}`);
+                setText(b.querySelector('.lbl'), label);
+                attr(b, 'title', `${label} (${m.key})`);
+                attr(b, 'aria-label', label);
+            }
+            relabel(this.menuButton, tr.t('action.settings'));
+            relabel(this.#fitButton, `${tr.t('action.fit')} (F)`);
+            relabel(this.#helpButton, `${tr.t('action.help')} (?)`);
+            relabel(this.#sidebarButton, `${tr.t('action.sidebar')} (\\)`);
+            this.#renderVersions();
+            this.#renderStats();
+        }
+        if (topics.has('mode') || topics.has('status') || topics.has('locale'))
+            this.#renderMode();
+        if (topics.has('filters') || topics.has('data'))
+            this.#renderFilterState();
+    }
+    /** Re-measure the segmented thumb (fonts / size changes). */
+    layout() {
+        this.#renderMode();
+    }
+    setSidebarState(open) {
+        attr(this.#sidebarButton, 'aria-pressed', String(open));
+    }
+    setMenuState(open) {
+        attr(this.menuButton, 'aria-expanded', String(open));
+    }
+    #renderVersions() {
+        const data = this.#ctx.controller.data;
+        if (!data) {
+            replace(this.#versions);
+            return;
+        }
+        const tr = this.#ctx.tr();
+        const { names, versions } = data;
+        const tag = (v) => v ? h('span', { class: 'tag', title: v, text: v }) : null;
+        const arrow = () => h('span', { class: 'arrow', 'aria-hidden': 'true', text: '→' });
+        attr(this.#versions, 'aria-label', tr.t('header.compare'));
+        attr(this.#versions, 'role', 'group');
+        if (names.before === names.after) {
+            replace(this.#versions, h('span', {
+                class: 'name',
+                title: data.title ?? names.after,
+                text: data.title ?? names.after,
+            }), versions.before || versions.after
+                ? h('span', { class: 'side' }, tag(versions.before ?? '—'), arrow(), tag(versions.after ?? '—'))
+                : null);
+            return;
+        }
+        replace(this.#versions, h('span', { class: 'side' }, h('span', { class: 'name', title: names.before, text: names.before }), tag(versions.before)), arrow(), h('span', { class: 'side' }, h('span', { class: 'name', title: names.after, text: names.after }), tag(versions.after)));
+    }
+    #renderStats() {
+        const c = this.#ctx.controller;
+        const scene = c.scene;
+        const tr = this.#ctx.tr();
+        // Hunks per family: the same numbers as the sidebar's filter chips.
+        const f = scene ? familyCounts(scene) : null;
+        const counts = {
+            added: f?.added ?? 0,
+            removed: f?.removed ?? 0,
+            modified: f?.content ?? 0,
+            restructured: (f?.structure ?? 0) + (f?.identity ?? 0),
+        };
+        this.#stats.hidden = !scene || scene.hunks.length === 0;
+        for (const s of STATS) {
+            const b = this.#statButtons.get(s.id);
+            const n = counts[s.id];
+            b.hidden = n === 0;
+            setText(b.querySelector('.n'), tr.num(n));
+            const label = `${tr.t(`stat.${s.id}`, { n })} — ${tr.t('stat.filter')}`;
+            attr(b, 'aria-label', label);
+            attr(b, 'title', label);
+        }
+    }
+    #renderFilterState() {
+        const fams = this.#ctx.controller.families;
+        this.#stats.classList.toggle('filtering', fams.size > 0);
+        for (const s of STATS) {
+            const on = fams.size === s.families.length && s.families.every((f) => fams.has(f));
+            attr(this.#statButtons.get(s.id), 'aria-pressed', String(on));
+        }
+    }
+    #renderMode() {
+        const mode = this.#ctx.controller.mode;
+        for (const [m, b] of this.#segButtons) {
+            const on = m === mode;
+            attr(b, 'aria-checked', String(on));
+            b.tabIndex = on ? 0 : -1;
+        }
+        const active = this.#segButtons.get(mode);
+        if (active && active.offsetWidth > 0) {
+            this.#thumb.style.width = `${active.offsetWidth}px`;
+            this.#thumb.style.transform = `translateX(${active.offsetLeft}px)`;
+        }
+    }
+    #onSegKey(e) {
+        if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        const i = MODES.findIndex((m) => m.mode === this.#ctx.controller.mode);
+        const next = MODES[(i + (e.key === 'ArrowRight' ? 1 : MODES.length - 1)) % MODES.length];
+        if (!next)
+            return;
+        this.#ctx.setMode(next.mode);
+        this.#segButtons.get(next.mode)?.focus();
+    }
+}
+//# sourceMappingURL=header.js.map

package/dist/ui/header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.js","sourceRoot":"","sources":["../../src/ui/header.ts"],"names":[],"mappings":"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"}

package/dist/ui/popovers.d.ts

@@ -0,0 +1,20 @@
+import type { UiContext } from './context.js';
+export declare class Menu {
+    #private;
+    readonly el: HTMLElement;
+    constructor(ctx: UiContext);
+    get open(): boolean;
+    show(anchor: HTMLElement | null): void;
+    hide(restoreFocus?: boolean): void;
+    render(): void;
+}
+export declare class HelpDialog {
+    #private;
+    readonly el: HTMLElement;
+    constructor(ctx: UiContext);
+    get open(): boolean;
+    show(): void;
+    hide(): void;
+    render(): void;
+}
+//# sourceMappingURL=popovers.d.ts.map

package/dist/ui/popovers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popovers.d.ts","sourceRoot":"","sources":["../../src/ui/popovers.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAS9C,qBAAa,IAAI;;IACf,QAAQ,CAAC,EAAE,EAAE,WAAW,CAAC;IAKzB,YAAY,GAAG,EAAE,SAAS,EAIzB;IAED,IAAI,IAAI,IAAI,OAAO,CAElB;IAED,IAAI,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,GAAG,IAAI,CAKrC;IAED,IAAI,CAAC,YAAY,UAAO,GAAG,IAAI,CAI9B;IAED,MAAM,IAAI,IAAI,CAgCb;CA6DF;AA6BD,qBAAa,UAAU;;IACrB,QAAQ,CAAC,EAAE,EAAE,WAAW,CAAC;IAIzB,YAAY,GAAG,EAAE,SAAS,EAiBzB;IAED,IAAI,IAAI,IAAI,OAAO,CAElB;IAED,IAAI,IAAI,IAAI,CAKX;IAED,IAAI,IAAI,IAAI,CAIX;IAED,MAAM,IAAI,IAAI,CAsCb;CACF"}

package/dist/ui/popovers.js

@@ -0,0 +1,180 @@
+import { getTheme } from '@kgdiff/scene';
+import { attr, h, icon, iconButton, replaceKeepingFocus } from '../dom.js';
+import { FAMILIES } from '../styles.js';
+export class Menu {
+    el;
+    #returnFocus = null;
+    #ctx;
+    constructor(ctx) {
+        this.#ctx = ctx;
+        this.el = h('div', { class: 'menu card', role: 'menu', hidden: true, tabindex: '-1' });
+        this.el.addEventListener('keydown', (e) => this.#onKey(e));
+    }
+    get open() {
+        return !this.el.hidden;
+    }
+    show(anchor) {
+        this.#returnFocus = anchor;
+        this.render();
+        this.el.hidden = false;
+        this.el.querySelector('[aria-checked="true"]')?.focus();
+    }
+    hide(restoreFocus = true) {
+        if (this.el.hidden)
+            return;
+        this.el.hidden = true;
+        if (restoreFocus)
+            this.#returnFocus?.focus();
+    }
+    render() {
+        const tr = this.#ctx.tr();
+        const c = this.#ctx.controller;
+        const t = (key) => () => tr.t(key);
+        const swatches = (p) => {
+            const family = getTheme(c.themeName, p).family;
+            return FAMILIES.map((f) => family[f].base);
+        };
+        const themes = [
+            { value: 'auto', label: t('theme.auto'), icon: 'monitor' },
+            { value: 'light', label: t('theme.light'), icon: 'sun' },
+            { value: 'dark', label: t('theme.dark'), icon: 'moon' },
+        ];
+        const palettes = [
+            { value: 'default', label: t('palette.default'), swatch: swatches('default') },
+            { value: 'colorblind', label: t('palette.colorblind'), swatch: swatches('colorblind') },
+        ];
+        const locales = [
+            { value: 'en', label: () => 'English' },
+            { value: 'zh-CN', label: () => '简体中文' },
+        ];
+        attr(this.el, 'aria-label', tr.t('action.settings'));
+        replaceKeepingFocus(this.#ctx.root, this.el, this.el, this.#group(tr.t('menu.theme'), themes, c.themePreference, (v) => this.#ctx.setThemePreference(v)), this.#group(tr.t('menu.palette'), palettes, c.palette, (v) => this.#ctx.setPalette(v)), this.#group(tr.t('menu.language'), locales, c.locale, (v) => this.#ctx.setLocale(v)));
+    }
+    #group(title, items, current, onPick) {
+        return h('div', { class: 'menu-group', role: 'group', 'aria-label': title }, h('div', { class: 'menu-label', 'aria-hidden': 'true', text: title }), items.map((item) => h('button', {
+            type: 'button',
+            class: 'menu-item',
+            role: 'menuitemradio',
+            'data-focus-key': item.value,
+            'aria-checked': String(item.value === current),
+            tabindex: '-1',
+            onclick: () => {
+                onPick(item.value);
+                this.render();
+                this.el.querySelector('[aria-checked="true"]')?.focus();
+            },
+        }, item.icon ? icon(item.icon) : null, item.swatch
+            ? h('span', { class: 'sw', 'aria-hidden': 'true' }, item.swatch.map((c) => h('i', { style: `background:${c}` })))
+            : null, h('span', { text: item.label() }), icon('check', 'icon check'))));
+    }
+    #onKey(e) {
+        const items = [...this.el.querySelectorAll('.menu-item')];
+        const i = items.indexOf(this.#ctx.root.activeElement);
+        let next = -1;
+        if (e.key === 'ArrowDown')
+            next = (i + 1) % items.length;
+        else if (e.key === 'ArrowUp')
+            next = (i - 1 + items.length) % items.length;
+        else if (e.key === 'Home')
+            next = 0;
+        else if (e.key === 'End')
+            next = items.length - 1;
+        else if (e.key === 'Escape' || e.key === 'Tab') {
+            if (e.key === 'Escape')
+                e.preventDefault();
+            e.stopPropagation();
+            this.hide(e.key === 'Escape');
+            return;
+        }
+        else
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        items[next]?.focus();
+    }
+}
+/** Shortcut rows; labels reuse the controls' own names where they exist. */
+const SHORTCUTS = [
+    [
+        [['1'], ['2'], ['3'], ['4']],
+        ['mode.overlay', 'mode.swipe', 'mode.replay', 'mode.changes'],
+    ],
+    [[['j'], ['↓']], 'detail.next'],
+    [[['k'], ['↑']], 'detail.prev'],
+    [[['Home'], ['End']], 'help.homeEnd'],
+    [[['Enter']], 'help.enter'],
+    [[['Esc']], 'help.esc'],
+    [[['Space']], 'help.space'],
+    [[['←'], ['→']], 'help.arrows'],
+    [[['f']], 'action.fit'],
+    [
+        [['+'], ['−']],
+        ['action.zoomIn', 'action.zoomOut'],
+    ],
+    [[['/']], 'sidebar.search'],
+    [[['x']], 'review.mark'],
+    [[['\\']], 'action.sidebar'],
+    [[['t']], 'help.theme'],
+    [[['e']], 'help.expand'],
+    [[['?']], 'action.help'],
+];
+export class HelpDialog {
+    el;
+    #returnFocus = null;
+    #ctx;
+    constructor(ctx) {
+        this.#ctx = ctx;
+        this.el = h('div', { class: 'overlay-scrim', hidden: true });
+        this.el.addEventListener('click', (e) => {
+            if (e.target === this.el)
+                this.hide();
+        });
+        this.el.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape' || e.key === '?') {
+                e.preventDefault();
+                e.stopPropagation();
+                this.hide();
+            }
+            else if (e.key === 'Tab') {
+                // Keep focus inside the dialog (it has one focusable control).
+                e.preventDefault();
+                this.el.querySelector('.icon-btn')?.focus();
+            }
+        });
+    }
+    get open() {
+        return !this.el.hidden;
+    }
+    show() {
+        this.#returnFocus = this.#ctx.root.activeElement;
+        this.render();
+        this.el.hidden = false;
+        this.el.querySelector('.icon-btn')?.focus();
+    }
+    hide() {
+        if (this.el.hidden)
+            return;
+        this.el.hidden = true;
+        this.#returnFocus?.focus?.();
+    }
+    render() {
+        const tr = this.#ctx.tr();
+        const keys = (combos) => h('span', { class: 'ks' }, combos.map((combo, i) => [
+            i > 0 ? h('span', { 'aria-hidden': 'true', text: '/' }) : null,
+            combo.map((k) => h('kbd', { text: k })),
+        ]));
+        const rows = SHORTCUTS.map(([combos, label]) => {
+            const text = typeof label === 'string' ? tr.t(label) : label.map((k) => tr.t(k)).join(' / ');
+            return h('div', { class: 'key-row' }, h('span', { text }), keys(combos));
+        });
+        replaceKeepingFocus(this.#ctx.root, this.el, null, h('div', {
+            class: 'dialog card',
+            role: 'dialog',
+            'aria-modal': 'true',
+            'aria-labelledby': 'kg-help-title',
+        }, h('div', { class: 'dialog-head' }, h('h2', { id: 'kg-help-title', text: tr.t('help.title') }), iconButton('close', tr.t('help.close'), () => this.hide(), {
+            'data-focus-key': 'close',
+        })), h('div', { class: 'dialog-body' }, h('div', { class: 'keys' }, rows))));
+    }
+}
+//# sourceMappingURL=popovers.js.map

package/dist/ui/popovers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popovers.js","sourceRoot":"","sources":["../../src/ui/popovers.ts"],"names":[],"mappings":"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"}

package/dist/ui/sidebar.d.ts

@@ -0,0 +1,25 @@
+import type { Topic } from '../controller.js';
+import { type UiContext } from './context.js';
+import { Detail } from './detail.js';
+/** Row slot and group-header heights (px); rows are 52 px tall inside a 56 px slot. */
+export declare const ROW_SLOT = 56;
+export declare const HEADER_SLOT = 32;
+export declare class Sidebar {
+    #private;
+    readonly el: HTMLElement;
+    readonly detail: Detail;
+    readonly searchInput: HTMLInputElement;
+    readonly list: HTMLElement;
+    constructor(ctx: UiContext);
+    setOpen(open: boolean): void;
+    update(topics: ReadonlySet<Topic>): void;
+    /** Move keyboard focus into the list (after choosing a search result). */
+    focusList(): void;
+    focusSearch(): void;
+    /** Esc inside the sidebar: clear the search first. Returns whether it handled the key. */
+    escape(): boolean;
+    renderWindow(): void;
+    /** Refresh the separator values (layout changes). */
+    syncSheet(): void;
+}
+//# sourceMappingURL=sidebar.d.ts.map

package/dist/ui/sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../src/ui/sidebar.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAK9C,OAAO,EAAkB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,uFAAuF;AACvF,eAAO,MAAM,QAAQ,KAAK,CAAC;AAC3B,eAAO,MAAM,WAAW,KAAK,CAAC;AAQ9B,qBAAa,OAAO;;IAClB,QAAQ,CAAC,EAAE,EAAE,WAAW,CAAC;IACzB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IAMxB,QAAQ,CAAC,WAAW,EAAE,gBAAgB,CAAC;IAMvC,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;IAgB3B,YAAY,GAAG,EAAE,SAAS,EAsHzB;IAED,OAAO,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAG3B;IAED,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,KAAK,CAAC,GAAG,IAAI,CA6BvC;IAED,0EAA0E;IAC1E,SAAS,IAAI,IAAI,CAEhB;IAED,WAAW,IAAI,IAAI,CAGlB;IAED,0FAA0F;IAC1F,MAAM,IAAI,OAAO,CAMhB;IAwID,YAAY,IAAI,IAAI,CAqBnB;IA6TD,qDAAqD;IACrD,SAAS,IAAI,IAAI,CAGhB;CAkCF"}