@kgdiff/viewer 0.3.0 → 0.4.0

package/src/ui/dock.ts

@@ -0,0 +1,198 @@
+/**
+ * The view dock, floating at the bottom of the canvas. It holds two independent choices: how
+ * the versions are compared (overlay / swipe / replay, one at a time, keys `1`–`3`) and whether
+ * only the changes are shown (key `4`, in any mode). The latter brings its context hops and the
+ * nearest “+N” expansion along. Replay's caption and transport stack above it (`stage.ts`).
+ */
+import type { Topic } from '../controller.js';
+import { attr, h, icon, relabel, setText } from '../dom.js';
+import type { IconName } from '../icons.js';
+import type { ViewerMode } from '../index.js';
+import type { UiContext } from './context.js';
+
+const MODES: readonly { mode: ViewerMode; icon: IconName; key: string }[] = [
+  { mode: 'overlay', icon: 'overlay', key: '1' },
+  { mode: 'swipe', icon: 'swipe', key: '2' },
+  { mode: 'replay', icon: 'replay', key: '3' },
+];
+
+export class Dock {
+  readonly el: HTMLElement;
+  readonly #seg: HTMLElement;
+  readonly #thumb: HTMLElement;
+  readonly #segButtons = new Map<ViewerMode, HTMLButtonElement>();
+  readonly #scopeButton: HTMLButtonElement;
+  readonly #context: HTMLElement;
+  readonly #opts: HTMLElement;
+  readonly #hopButtons: HTMLButtonElement[] = [];
+  readonly #expandButton: HTMLButtonElement;
+
+  readonly #ctx: UiContext;
+
+  constructor(ctx: UiContext) {
+    this.#ctx = ctx;
+    const c = ctx.controller;
+    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.#scopeButton = h(
+      'button',
+      {
+        type: 'button',
+        class: 'scope-btn',
+        'aria-pressed': 'false',
+        'aria-keyshortcuts': '4',
+        onclick: () => ctx.toggleScope(),
+      },
+      icon('changes'),
+      h('span', { class: 'lbl' }),
+    );
+
+    // Context hops (0 / 1 / 2) and the nearest collapsed group: only with the changes scope.
+    this.#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);
+      this.#opts.appendChild(b);
+    }
+    this.#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.#context = h(
+      'div',
+      { class: 'context', hidden: true },
+      h('span', { class: 'label' }),
+      this.#opts,
+      this.#expandButton,
+    );
+
+    this.el = h(
+      'div',
+      { class: 'dock-bar card', role: 'group' },
+      this.#seg,
+      h('span', { class: 'dock-sep', 'aria-hidden': 'true' }),
+      this.#scopeButton,
+      this.#context,
+    );
+  }
+
+  update(topics: ReadonlySet<Topic>): void {
+    const all = topics.has('status') || topics.has('data') || topics.has('locale');
+    if (all) this.#renderLabels();
+    if (all || topics.has('mode')) this.#renderMode();
+    if (all || topics.has('mode') || topics.has('focus') || topics.has('selection')) {
+      this.#renderScope();
+    }
+  }
+
+  /** Re-measure the segmented thumb (fonts / size changes). */
+  layout(): void {
+    this.#renderMode();
+  }
+
+  #renderLabels(): void {
+    const tr = this.#ctx.tr();
+    attr(this.el, 'aria-label', tr.t('dock.label'));
+    attr(this.#seg, 'aria-label', tr.t('mode.label'));
+    for (const m of MODES) {
+      const b = this.#segButtons.get(m.mode) as HTMLButtonElement;
+      const label = tr.t(`mode.${m.mode}`);
+      setText(b.querySelector('.lbl') as Element, label);
+      attr(b, 'title', `${label} (${m.key})`);
+      attr(b, 'aria-label', label);
+    }
+    setText(this.#scopeButton.querySelector('.lbl') as Element, tr.t('mode.changes'));
+    attr(this.#scopeButton, 'aria-label', tr.t('mode.changes'));
+    setText(this.#context.querySelector('.label') as Element, tr.t('focus.context'));
+    attr(this.#opts, 'aria-label', tr.t('focus.hops'));
+  }
+
+  #renderMode(): void {
+    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)`;
+    }
+  }
+
+  #renderScope(): void {
+    const c = this.#ctx.controller;
+    const tr = this.#ctx.tr();
+    const on = c.scope === 'changes';
+    const locked = c.scopeLocked;
+    attr(this.#scopeButton, 'aria-pressed', String(on));
+    attr(this.#scopeButton, 'aria-disabled', locked ? 'true' : null);
+    attr(this.#scopeButton, 'title', locked ? tr.t('scope.locked') : `${tr.t('scope.hint')} (4)`);
+    this.#context.hidden = !on;
+    // The dock's width changed: keep the thumb under the active mode.
+    this.#renderMode();
+    if (!on) return;
+    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') as Element, tr.num(group.count));
+      relabel(
+        this.#expandButton,
+        `${usable ? tr.t('focus.expandNearest') : tr.t('focus.expandUnavailable')}: ${group.label} (E)`,
+      );
+    }
+  }
+
+  #onSegKey(e: KeyboardEvent): void {
+    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();
+  }
+}

package/src/ui/header.ts

@@ -1,36 +1,12 @@
 /**
- * Header: brand, compared versions, mode segmented control, diffstat pills (filter shortcuts),
- * appearance menu, fit, help and sidebar toggle.
+ * The canvas HUD: the title (brand and compared versions) floating top-left, the actions
+ * (appearance menu, help, sidebar toggle) floating top-right. Both stay up while loading and on
+ * errors. How the diff is viewed is chosen in the dock at the bottom (`dock.ts`).
  */
-import type { ChangeFamily } from '@kgdiff/scene';
 import type { Topic } from '../controller.js';
-import { attr, h, icon, iconButton, relabel, replace, setText } from '../dom.js';
-import type { IconName } from '../icons.js';
-import type { ViewerMode } from '../index.js';
-import { familyCounts } from '../list-model.js';
+import { attr, h, iconButton, relabel, replace } from '../dom.js';
 import type { UiContext } from './context.js';
 
-const MODES: readonly { mode: ViewerMode; icon: IconName; key: string }[] = [
-  { mode: 'overlay', icon: 'overlay', key: '1' },
-  { mode: 'swipe', icon: 'swipe', key: '2' },
-  { mode: 'replay', icon: 'replay', key: '3' },
-  { mode: 'changes', icon: 'changes', key: '4' },
-];
-
-interface StatDef {
-  readonly id: 'added' | 'removed' | 'modified' | 'restructured';
-  readonly family: ChangeFamily;
-  readonly families: readonly ChangeFamily[];
-  readonly glyph: string;
-}
-
-const STATS: readonly StatDef[] = [
-  { 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(): SVGSVGElement {
   const tpl = document.createElement('template');
@@ -44,23 +20,18 @@ function brandMark(): SVGSVGElement {
 
 export class Header {
   readonly el: HTMLElement;
-  readonly #versions: HTMLElement;
-  readonly #seg: HTMLElement;
-  readonly #thumb: HTMLElement;
-  readonly #segButtons = new Map<ViewerMode, HTMLButtonElement>();
-  readonly #stats: HTMLElement;
-  readonly #statButtons = new Map<StatDef['id'], HTMLButtonElement>();
   readonly menuButton: HTMLButtonElement;
-  readonly #fitButton: HTMLButtonElement;
+  readonly #brand: HTMLElement;
+  readonly #versions: HTMLElement;
+  readonly #actions: HTMLElement;
+  readonly #end: HTMLElement;
   readonly #helpButton: HTMLButtonElement;
   readonly #sidebarButton: HTMLButtonElement;
-  readonly #brand: HTMLElement;
 
   readonly #ctx: UiContext;
 
   constructor(ctx: UiContext) {
     this.#ctx = ctx;
-    const c = ctx.controller;
     this.#brand = h(
       'div',
       { class: 'brand' },
@@ -68,95 +39,50 @@ export class Header {
       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.#actions = h(
+      'div',
+      { class: 'hud-actions card', role: 'group' },
+      this.menuButton,
+      this.#helpButton,
+      this.#sidebarButton,
+    );
+    // The menu is a sibling of the actions card, not inside it: a backdrop filter would clip
+    // the menu's own blur to the card.
+    this.#end = h('div', { class: 'hud-end' }, this.#actions);
     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),
+      { class: 'hud' },
       h(
         'div',
-        { class: 'header-end' },
-        this.#stats,
-        this.menuButton,
-        this.#fitButton,
-        this.#helpButton,
-        this.#sidebarButton,
+        { class: 'hud-title card' },
+        this.#brand,
+        h('span', { class: 'header-sep', 'aria-hidden': 'true' }),
+        this.#versions,
       ),
+      this.#end,
     );
   }
 
-  update(topics: ReadonlySet<Topic>): void {
-    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) as HTMLButtonElement;
-        const label = tr.t(`mode.${m.mode}`);
-        setText(b.querySelector('.lbl') as Element, 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();
+  /** Place the appearance menu under the actions. */
+  attachMenu(menu: HTMLElement): void {
+    this.#end.appendChild(menu);
   }
 
-  /** Re-measure the segmented thumb (fonts / size changes). */
-  layout(): void {
-    this.#renderMode();
+  update(topics: ReadonlySet<Topic>): void {
+    if (!(topics.has('locale') || topics.has('data') || topics.has('status'))) return;
+    const tr = this.#ctx.tr();
+    attr(this.#brand, 'title', `kgdiff — ${tr.t('brand.tagline')}`);
+    attr(this.#actions, 'aria-label', tr.t('header.actions'));
+    relabel(this.menuButton, tr.t('action.settings'));
+    relabel(this.#helpButton, `${tr.t('action.help')} (?)`);
+    relabel(this.#sidebarButton, `${tr.t('action.sidebar')} (\\)`);
+    this.#renderVersions();
   }
 
   setSidebarState(open: boolean): void {
@@ -171,8 +97,10 @@ export class Header {
     const data = this.#ctx.controller.data;
     if (!data) {
       replace(this.#versions);
+      this.el.dataset.titled = 'false';
       return;
     }
+    this.el.dataset.titled = 'true';
     const tr = this.#ctx.tr();
     const { names, versions } = data;
     const tag = (v: string | undefined) =>
@@ -217,62 +145,4 @@ export class Header {
       ),
     );
   }
-
-  #renderStats(): void {
-    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) as HTMLButtonElement;
-      const n = counts[s.id];
-      b.hidden = n === 0;
-      setText(b.querySelector('.n') as Element, 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(): void {
-    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) as Element, 'aria-pressed', String(on));
-    }
-  }
-
-  #renderMode(): void {
-    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: KeyboardEvent): void {
-    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();
-  }
 }

package/src/ui/popovers.ts

@@ -146,9 +146,10 @@ type Label = MessageKey | readonly MessageKey[];
 /** Shortcut rows; labels reuse the controls' own names where they exist. */
 const SHORTCUTS: readonly (readonly [readonly (readonly string[])[], Label])[] = [
   [
-    [['1'], ['2'], ['3'], ['4']],
-    ['mode.overlay', 'mode.swipe', 'mode.replay', 'mode.changes'],
+    [['1'], ['2'], ['3']],
+    ['mode.overlay', 'mode.swipe', 'mode.replay'],
   ],
+  [[['4']], 'mode.changes'],
   [[['j'], ['↓']], 'detail.next'],
   [[['k'], ['↑']], 'detail.prev'],
   [[['Home'], ['End']], 'help.homeEnd'],

package/src/ui/sidebar.ts

@@ -11,6 +11,7 @@ import type { SearchHit } from '../search.js';
 import { FAMILIES } from '../styles.js';
 import { sceneHunkGlyph, type UiContext } from './context.js';
 import { Detail } from './detail.js';
+import { swatch } from './swatch.js';
 
 /** Row slot and group-header heights (px); rows are 52 px tall inside a 56 px slot. */
 export const ROW_SLOT = 56;
@@ -96,7 +97,7 @@ export class Sidebar {
           'aria-pressed': 'false',
           onclick: () => c.toggleFamily(f),
         },
-        h('span', { class: 'dot', 'aria-hidden': 'true' }),
+        swatch(f),
         h('span', { class: 'lbl' }),
         h('span', { class: 'n' }),
       );