@kgdiff/viewer 0.4.0 → 0.6.0

package/src/ui/filters.ts

@@ -0,0 +1,79 @@
+/**
+ * The family filters (RFC 0001 §3, `<kgdiff-filters>` from phase 2): one chip per family the
+ * diff has, with its count and the legend's swatch, toggling the session's family filter, and
+ * "show all" while a filter is on.
+ */
+import { attr, h, setText } from '../dom.js';
+import { familyCounts } from '../list-model.js';
+import type { Topic } from '../session.js';
+import { FAMILIES } from '../styles.js';
+import type { UiContext } from './context.js';
+import { swatch } from './swatch.js';
+
+export class Filters {
+  readonly el: HTMLElement;
+  readonly #chips = new Map<string, HTMLButtonElement>();
+  readonly #showAll: HTMLButtonElement;
+
+  readonly #ctx: UiContext;
+
+  constructor(ctx: UiContext) {
+    this.#ctx = ctx;
+    const c = ctx.controller;
+    this.el = h('div', { class: 'filters', role: 'group' });
+    for (const f of FAMILIES) {
+      const chip = h(
+        'button',
+        {
+          type: 'button',
+          class: 'fchip',
+          'data-family': f,
+          'aria-pressed': 'false',
+          onclick: () => c.toggleFamily(f),
+        },
+        swatch(f),
+        h('span', { class: 'lbl' }),
+        h('span', { class: 'n' }),
+      );
+      this.#chips.set(f, chip);
+      this.el.appendChild(chip);
+    }
+    this.#showAll = h('button', {
+      type: 'button',
+      class: 'link-btn',
+      hidden: true,
+      onclick: () => c.setFamilies([]),
+    });
+    this.el.appendChild(this.#showAll);
+  }
+
+  update(topics: ReadonlySet<Topic>): void {
+    const all = topics.has('status') || topics.has('data') || topics.has('locale');
+    if (all) this.#renderChips();
+    if (all || topics.has('filters')) this.#renderState();
+  }
+
+  #renderChips(): void {
+    const tr = this.#ctx.tr();
+    const scene = this.#ctx.controller.scene;
+    const counts = scene ? familyCounts(scene) : null;
+    attr(this.el, 'aria-label', tr.t('sidebar.filters'));
+    setText(this.#showAll, tr.t('sidebar.clearFilters'));
+    this.el.hidden = !scene || scene.hunks.length === 0;
+    for (const [f, chip] of this.#chips) {
+      const n = counts ? counts[f as keyof typeof counts] : 0;
+      setText(chip.querySelector('.lbl') as Element, tr.t(`family.${f as keyof typeof counts}`));
+      setText(chip.querySelector('.n') as Element, tr.num(n));
+      chip.hidden = n === 0;
+      attr(chip, 'title', tr.t(`familyHint.${f as keyof typeof counts}`));
+    }
+  }
+
+  #renderState(): void {
+    const fams = this.#ctx.controller.families;
+    for (const [f, chip] of this.#chips) {
+      attr(chip, 'aria-pressed', String(fams.has(f as never)));
+    }
+    this.#showAll.hidden = fams.size === 0;
+  }
+}

package/src/ui/header.ts

@@ -1,10 +1,12 @@
 /**
- * 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`).
+ * The canvas HUD: the title (`Title`, `<kgdiff-title>`: brand and compared versions) floating
+ * top-left, the actions (`Actions`, `<kgdiff-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 { Topic } from '../controller.js';
-import { attr, h, iconButton, relabel, replace } from '../dom.js';
+import { attr, h, iconButton, moveFocusOut, relabel, replace } from '../dom.js';
+import type { PanelState } from '../index.js';
 import type { UiContext } from './context.js';
 
 /** The kgdiff mark: a soft accent diamond holding a node. */
@@ -13,21 +15,16 @@ function brandMark(): SVGSVGElement {
   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>';
+    'fill="var(--kgdiff-accent-soft)" stroke="var(--kgdiff-accent)" stroke-width="1.5"/>' +
+    '<circle cx="10" cy="10" r="2.4" fill="var(--kgdiff-accent)"/></svg>';
   return tpl.content.firstElementChild as SVGSVGElement;
 }
 
-export class Header {
+/** The title card: the brand, then the compared names and versions. */
+export class Title {
   readonly el: HTMLElement;
-  readonly menuButton: HTMLButtonElement;
   readonly #brand: HTMLElement;
   readonly #versions: HTMLElement;
-  readonly #actions: HTMLElement;
-  readonly #end: HTMLElement;
-  readonly #helpButton: HTMLButtonElement;
-  readonly #sidebarButton: HTMLButtonElement;
-
   readonly #ctx: UiContext;
 
   constructor(ctx: UiContext) {
@@ -39,60 +36,21 @@ export class Header {
       h('span', { class: 'brand-name', text: 'kgdiff' }),
     );
     this.#versions = h('div', { class: 'versions' });
-    this.menuButton = iconButton('contrast', '', () => ctx.toggleMenu(), {
-      'aria-haspopup': 'menu',
-      'aria-expanded': 'false',
-    });
-    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: 'hud' },
-      h(
-        'div',
-        { class: 'hud-title card' },
-        this.#brand,
-        h('span', { class: 'header-sep', 'aria-hidden': 'true' }),
-        this.#versions,
-      ),
-      this.#end,
+      'div',
+      { class: 'hud-title card' },
+      this.#brand,
+      h('span', { class: 'header-sep', 'aria-hidden': 'true' }),
+      this.#versions,
     );
   }
 
-  /** Place the appearance menu under the actions. */
-  attachMenu(menu: HTMLElement): void {
-    this.#end.appendChild(menu);
-  }
-
   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')} (\\)`);
+    attr(this.#brand, 'title', `kgdiff — ${this.#ctx.tr().t('brand.tagline')}`);
     this.#renderVersions();
   }
 
-  setSidebarState(open: boolean): void {
-    attr(this.#sidebarButton, 'aria-pressed', String(open));
-  }
-
-  setMenuState(open: boolean): void {
-    attr(this.menuButton, 'aria-expanded', String(open));
-  }
-
   #renderVersions(): void {
     const data = this.#ctx.controller.data;
     if (!data) {
@@ -146,3 +104,116 @@ export class Header {
     );
   }
 }
+
+/**
+ * The actions: the appearance menu's button (the menu itself is placed next to the card with
+ * `attachMenu`: a backdrop filter would clip its blur to the card), help, and, in the default
+ * layout, the sidebar toggle.
+ */
+export class Actions {
+  /** The card and, once attached, the menu next to it. */
+  readonly el: HTMLElement;
+  readonly menuButton: HTMLButtonElement;
+  readonly sidebarButton: HTMLButtonElement | null;
+  readonly #card: HTMLElement;
+  readonly #helpButton: HTMLButtonElement;
+  readonly #ctx: UiContext;
+
+  /** `sidebar`: with the sidebar toggle (the default layout's). */
+  constructor(ctx: UiContext, sidebar = true) {
+    this.#ctx = ctx;
+    this.menuButton = iconButton('contrast', '', () => ctx.toggleMenu(), {
+      'aria-haspopup': 'menu',
+      'aria-expanded': 'false',
+    });
+    this.#helpButton = iconButton('help', '', () => ctx.openHelp());
+    this.sidebarButton = sidebar ? iconButton('sidebar', '', () => ctx.toggleSidebar()) : null;
+    this.#card = h(
+      'div',
+      { class: 'hud-actions card', role: 'group' },
+      this.menuButton,
+      this.#helpButton,
+      this.sidebarButton,
+    );
+    this.el = h('div', { class: 'hud-end' }, this.#card);
+  }
+
+  /** Place the appearance menu under the actions. */
+  attachMenu(menu: HTMLElement): void {
+    this.el.appendChild(menu);
+  }
+
+  update(topics: ReadonlySet<Topic>): void {
+    if (!(topics.has('locale') || topics.has('data') || topics.has('status'))) return;
+    const tr = this.#ctx.tr();
+    attr(this.#card, 'aria-label', tr.t('header.actions'));
+    relabel(this.menuButton, tr.t('action.settings'));
+    relabel(this.#helpButton, `${tr.t('action.help')} (?)`);
+    if (this.sidebarButton) relabel(this.sidebarButton, `${tr.t('action.sidebar')} (\\)`);
+  }
+
+  setMenuState(open: boolean): void {
+    attr(this.menuButton, 'aria-expanded', String(open));
+  }
+
+  /** Whether the sidebar is open (the toggle's pressed state). */
+  setSidebarState(open: boolean): void {
+    if (this.sidebarButton) attr(this.sidebarButton, 'aria-pressed', String(open));
+  }
+}
+
+/** The default layout's HUD: the title and the actions over the canvas. */
+export class Header {
+  readonly el: HTMLElement;
+  readonly title: Title;
+  readonly actions: Actions;
+  readonly menuButton: HTMLButtonElement;
+  readonly sidebarButton: HTMLButtonElement;
+  readonly #ctx: UiContext;
+
+  constructor(ctx: UiContext) {
+    this.#ctx = ctx;
+    this.title = new Title(ctx);
+    this.actions = new Actions(ctx);
+    this.menuButton = this.actions.menuButton;
+    this.sidebarButton = this.actions.sidebarButton as HTMLButtonElement;
+    this.el = h('header', { class: 'hud' }, this.title.el, this.actions.el);
+  }
+
+  /** Place the appearance menu under the actions. */
+  attachMenu(menu: HTMLElement): void {
+    this.actions.attachMenu(menu);
+  }
+
+  update(topics: ReadonlySet<Topic>): void {
+    this.title.update(topics);
+    this.actions.update(topics);
+  }
+
+  setSidebarState(open: boolean): void {
+    this.actions.setSidebarState(open);
+  }
+
+  /**
+   * Follow the panel states of the title and the actions (not shown unless open); the sidebar
+   * button goes when the sidebar has nothing to show. Focus in the actions moves to `outside`.
+   */
+  setPanels(
+    title: PanelState,
+    actions: PanelState,
+    sidebar: boolean,
+    outside: () => HTMLElement | null,
+  ): void {
+    attr(this.title.el, 'data-panel', title);
+    const end = this.actions.el;
+    if (actions !== 'open') moveFocusOut(this.#ctx.root, end, outside);
+    attr(end, 'data-panel', actions);
+    end.inert = actions !== 'open';
+    if (!sidebar) moveFocusOut(this.#ctx.root, this.sidebarButton, outside);
+    this.sidebarButton.hidden = !sidebar;
+  }
+
+  setMenuState(open: boolean): void {
+    this.actions.setMenuState(open);
+  }
+}

package/src/ui/legend.ts

@@ -0,0 +1,112 @@
+/**
+ * The legend (RFC 0001 §3, `<kgdiff-legend>`): a card of every family's swatch and name, folded
+ * to its head until opened, or one line of dots for the families this diff has, then the
+ * unchanged context. Which one shows is the layout's (`.stage-wrap[data-legend]`).
+ */
+import type { Family } from '@kgdiff/scene';
+import { attr, h, icon, replace, setText } from '../dom.js';
+import type { Translator } from '../i18n.js';
+import { FAMILIES } from '../styles.js';
+import type { Topic } from '../topics.js';
+import type { UiContext } from './context.js';
+import { swatch } from './swatch.js';
+
+export class Legend {
+  /** The card (a toggle head and the rows). */
+  readonly card: HTMLElement;
+  /** The one-line legend. */
+  readonly mini: HTMLElement;
+  readonly #head: HTMLButtonElement;
+  readonly #body: HTMLElement;
+  #open = false;
+
+  readonly #ctx: UiContext;
+
+  /** `toggled`: the user opened or folded the card from its head. */
+  constructor(ctx: UiContext, toggled: (open: boolean) => void = () => undefined) {
+    this.#ctx = ctx;
+    this.#head = h(
+      'button',
+      {
+        type: 'button',
+        class: 'legend-head',
+        'aria-expanded': 'false',
+        onclick: () => {
+          this.setOpen(!this.#open);
+          toggled(this.#open);
+        },
+      },
+      h('span', { class: 'lbl' }),
+      icon('chevron-down'),
+    );
+    this.#body = h('div', { class: 'legend-body', id: 'kg-legend' });
+    attr(this.#head, 'aria-controls', 'kg-legend');
+    this.card = h(
+      'div',
+      { class: 'legend card float bottom-left', 'data-open': 'false' },
+      this.#head,
+      this.#body,
+    );
+    this.mini = h('div', { class: 'mini-legend float bottom-left', role: 'list' });
+  }
+
+  get open(): boolean {
+    return this.#open;
+  }
+
+  setOpen(open: boolean): void {
+    this.#open = open;
+    attr(this.card, 'data-open', String(open));
+    attr(this.#head, 'aria-expanded', String(open));
+  }
+
+  update(topics: ReadonlySet<Topic>): void {
+    if (!(topics.has('status') || topics.has('data') || topics.has('locale'))) return;
+    const tr = this.#ctx.tr();
+    this.#renderCard(tr);
+    this.#renderMini(tr);
+  }
+
+  #renderCard(tr: Translator): void {
+    setText(this.#head.querySelector('.lbl') as Element, tr.t('legend.title'));
+    attr(this.#head, 'aria-label', tr.t('legend.toggle'));
+    const fams: Family[] = [...FAMILIES, 'neutral'];
+    replace(
+      this.#body,
+      fams.map((f) =>
+        h(
+          'div',
+          { class: 'legend-row', 'data-family': f, title: tr.t(`familyHint.${f}`) },
+          swatch(f),
+          h('span', { class: 'name', text: tr.t(`family.${f}`) }),
+        ),
+      ),
+    );
+  }
+
+  /** One line: the families this diff has, then the unchanged context. */
+  #renderMini(tr: Translator): void {
+    const scene = this.#ctx.controller.scene;
+    const present = new Set<Family>(scene?.hunks.map((x) => x.family));
+    if (scene?.nodes.some((n) => n.status === 'unchanged')) present.add('neutral');
+    attr(this.mini, 'aria-label', tr.t('legend.title'));
+    replace(
+      this.mini,
+      [...FAMILIES, 'neutral' as const]
+        .filter((f) => present.has(f))
+        .map((f) =>
+          h(
+            'span',
+            {
+              class: 'mini-item',
+              role: 'listitem',
+              'data-family': f,
+              title: tr.t(`familyHint.${f}`),
+            },
+            h('span', { class: 'dot', 'aria-hidden': 'true' }),
+            tr.t(`family.${f}`),
+          ),
+        ),
+    );
+  }
+}

package/src/ui/popovers.ts

@@ -7,6 +7,7 @@ import { attr, h, icon, iconButton, replaceKeepingFocus } from '../dom.js';
 import type { MessageKey } from '../i18n.js';
 import type { IconName } from '../icons.js';
 import type { ThemePreference } from '../index.js';
+import { type Keymap, type ShortcutName, shortcutKeys } from '../keyboard.js';
 import { FAMILIES } from '../styles.js';
 import type { UiContext } from './context.js';
 
@@ -49,6 +50,7 @@ export class Menu {
   render(): void {
     const tr = this.#ctx.tr();
     const c = this.#ctx.controller;
+    attr(this.el, 'aria-label', tr.t('action.settings'));
     const t = (key: MessageKey) => () => tr.t(key);
     const swatches = (p: PaletteName): string[] => {
       const family = getTheme(c.themeName, p).family;
@@ -143,39 +145,79 @@ export class Menu {
 
 type Label = MessageKey | readonly MessageKey[];
 
-/** Shortcut rows; labels reuse the controls' own names where they exist. */
-const SHORTCUTS: readonly (readonly [readonly (readonly string[])[], Label])[] = [
+/**
+ * Shortcut rows, by the shortcuts they list; labels reuse the controls' own names where they
+ * exist. A row of several labels names one shortcut each.
+ */
+const SHORTCUTS: readonly (readonly [readonly ShortcutName[], Label])[] = [
   [
-    [['1'], ['2'], ['3']],
+    ['overlay', 'swipe', 'replay'],
     ['mode.overlay', 'mode.swipe', 'mode.replay'],
   ],
-  [[['4']], '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'],
+  [['scope'], 'mode.changes'],
+  [['next'], 'detail.next'],
+  [['prev'], 'detail.prev'],
+  [['first', 'last'], 'help.homeEnd'],
+  [['fly'], 'help.enter'],
+  [['escape'], 'help.esc'],
+  [['play-pause'], 'help.space'],
+  [['left', 'right'], 'help.arrows'],
+  [['fit'], 'action.fit'],
   [
-    [['+'], ['−']],
+    ['zoom-in', 'zoom-out'],
     ['action.zoomIn', 'action.zoomOut'],
   ],
-  [[['/']], 'sidebar.search'],
-  [[['x']], 'review.mark'],
-  [[['\\']], 'action.sidebar'],
-  [[['t']], 'help.theme'],
-  [[['e']], 'help.expand'],
-  [[['?']], 'action.help'],
+  [['search'], 'sidebar.search'],
+  [['review'], 'review.mark'],
+  [['sidebar'], 'action.sidebar'],
+  [['theme'], 'help.theme'],
+  [['expand'], 'help.expand'],
+  [['help'], 'action.help'],
 ];
+
+/** How a key shows in the dialog. */
+const KEY_LABELS: Readonly<Record<string, string>> = {
+  ArrowDown: '↓',
+  ArrowUp: '↑',
+  ArrowLeft: '←',
+  ArrowRight: '→',
+  ' ': 'Space',
+  Escape: 'Esc',
+  '-': '−',
+};
+
+/** The dialog's rows for the keys bound now: a shortcut with no key is left out. */
+function shortcutRows(
+  keymap: Keymap | null,
+  omit: ReadonlySet<ShortcutName>,
+): { keys: string[]; label: Label }[] {
+  const bound = shortcutKeys(keymap);
+  const keysOf = (name: ShortcutName): string[] =>
+    omit.has(name) ? [] : (bound.get(name) ?? []).map((k) => KEY_LABELS[k] ?? k);
+  const rows: { keys: string[]; label: Label }[] = [];
+  for (const [names, label] of SHORTCUTS) {
+    const keys = names.map(keysOf);
+    if (typeof label !== 'string' && keys.some((k) => k.length !== 1)) {
+      // Not one key each: a row per shortcut.
+      names.forEach((_, i) => {
+        const k = keys[i] ?? [];
+        if (k.length > 0) rows.push({ keys: k, label: label[i] as MessageKey });
+      });
+    } else if (keys.flat().length > 0) rows.push({ keys: keys.flat(), label });
+  }
+  return rows;
+}
+
 export class HelpDialog {
   readonly el: HTMLElement;
   #returnFocus: Element | null = null;
   readonly #ctx: UiContext;
+  readonly #omit: ReadonlySet<ShortcutName>;
 
-  constructor(ctx: UiContext) {
+  /** `omit`: shortcuts that do nothing in this layout (`sidebar` without a sidebar). */
+  constructor(ctx: UiContext, omit: readonly ShortcutName[] = []) {
     this.#ctx = ctx;
+    this.#omit = new Set(omit);
     this.el = h('div', { class: 'overlay-scrim', hidden: true });
     this.el.addEventListener('click', (e) => {
       if (e.target === this.el) this.hide();
@@ -212,18 +254,19 @@ export class HelpDialog {
 
   render(): void {
     const tr = this.#ctx.tr();
-    const keys = (combos: readonly (readonly string[])[]): HTMLElement =>
+    const keys = (list: readonly string[]): HTMLElement =>
       h(
         'span',
         { class: 'ks' },
-        combos.map((combo, i) => [
+        list.map((k, i) => [
           i > 0 ? h('span', { 'aria-hidden': 'true', text: '/' }) : null,
-          combo.map((k) => h('kbd', { text: k })),
+          h('kbd', { text: k }),
         ]),
       );
-    const rows = SHORTCUTS.map(([combos, label]) => {
+    // The keys bound now, after the root's `keymap`.
+    const rows = shortcutRows(this.#ctx.keymap(), this.#omit).map(({ keys: list, 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));
+      return h('div', { class: 'key-row' }, h('span', { text }), keys(list));
     });
     replaceKeepingFocus(
       this.#ctx.root,