@kgdiff/viewer 0.5.0 → 0.6.0

package/src/theme.ts

@@ -11,9 +11,12 @@
 import { contrastRatio, type Theme } from '@kgdiff/scene';
 import { FAMILIES, sheetFor } from './styles.js';
 
-/** Token (after `--kgdiff-`) → where its value lives in a `Theme`. */
-const TOKENS: readonly (readonly [token: string, path: string])[] = [
-  ['bg', 'canvas.background'],
+/**
+ * The public tokens (after `--kgdiff-`), each with where its value lives in a `Theme`: the
+ * manifest's CSS custom properties are generated from this list.
+ */
+export const TOKENS: readonly (readonly [token: string, path: string])[] = [
+  ['background', 'canvas.background'],
   ['grid', 'canvas.grid'],
   ['panel', 'surface.panel'],
   ['raised', 'surface.raised'],
@@ -23,8 +26,8 @@ const TOKENS: readonly (readonly [token: string, path: string])[] = [
   ['control-border', 'surface.controlBorder'],
   ['shadow', 'surface.shadow'],
   ['text', 'text.primary'],
-  ['text-2', 'text.secondary'],
-  ['text-3', 'text.muted'],
+  ['text-secondary', 'text.secondary'],
+  ['text-muted', 'text.muted'],
   ['accent', 'accent.base'],
   ['accent-strong', 'accent.strong'],
   ['accent-soft', 'accent.soft'],
@@ -34,7 +37,7 @@ const TOKENS: readonly (readonly [token: string, path: string])[] = [
   ['neutral-edge', 'neutral.edge'],
   ['neutral-label', 'neutral.label'],
   ['font', 'font.family'],
-  ['mono', 'font.mono'],
+  ['font-mono', 'font.mono'],
   ...FAMILIES.flatMap((f) => [
     [f, `family.${f}.base`] as const,
     [`${f}-strong`, `family.${f}.strong`] as const,
@@ -44,7 +47,7 @@ const TOKENS: readonly (readonly [token: string, path: string])[] = [
 ];
 
 /** Tokens that are not colors (taken as they are). */
-const VERBATIM: ReadonlySet<string> = new Set(['shadow', 'font', 'mono']);
+export const VERBATIM: ReadonlySet<string> = new Set(['shadow', 'font', 'font-mono']);
 
 type Tree = { readonly [key: string]: unknown };
 

package/src/topics.ts

@@ -0,0 +1,37 @@
+/**
+ * What the session notifies its listeners about (`DiffSession.subscribe`): one topic per part
+ * of its state. A module of its own, so elements can name them without importing the session.
+ */
+export type Topic =
+  | 'status'
+  | 'data'
+  | 'mode'
+  | 'selection'
+  | 'filters'
+  | 'search'
+  | 'review'
+  | 'replay'
+  | 'hover'
+  | 'theme'
+  | 'locale'
+  | 'focus'
+  | 'swipe'
+  | 'overview';
+
+/** Every topic: a full render. */
+export const ALL_TOPICS: ReadonlySet<Topic> = new Set<Topic>([
+  'status',
+  'data',
+  'mode',
+  'selection',
+  'filters',
+  'search',
+  'review',
+  'replay',
+  'hover',
+  'theme',
+  'locale',
+  'focus',
+  'swipe',
+  'overview',
+]);

package/src/ui/change-list.ts

@@ -6,7 +6,7 @@
  * target.
  */
 import type { SceneHunk } from '@kgdiff/scene';
-import { attr, h, icon, replace, setText } from '../dom.js';
+import { attr, h, icon, isOpen, replace, setText } from '../dom.js';
 import type { ListItem } from '../list-model.js';
 import { frameOrTimeout } from '../schedule.js';
 import type { Topic } from '../session.js';
@@ -73,7 +73,11 @@ export class ChangeList {
       if (row) c.flyToSelection();
     });
     this.sticky = h('div', { class: 'sticky', 'aria-hidden': 'true', hidden: true });
-    ctx.target('list', () => this.list.focus({ preventScroll: true }));
+    ctx.target(
+      'list',
+      () => this.list.focus({ preventScroll: true }),
+      () => isOpen(this.list),
+    );
   }
 
   update(topics: ReadonlySet<Topic>): void {

package/src/ui/context.ts

@@ -4,9 +4,10 @@
  */
 import type { AttrValue, HunkKind, Locale } from '@kgdiff/core';
 import type { ChangeFamily, PaletteName, SceneHunk } from '@kgdiff/scene';
-import type { ViewerController } from '../controller.js';
 import type { Translator } from '../i18n.js';
-import type { ThemePreference, ViewerMode } from '../index.js';
+import type { PanelRegion, PanelState, ThemePreference, ViewerMode } from '../index.js';
+import type { Keymap } from '../keyboard.js';
+import type { DiffSession } from '../session.js';
 
 /**
  * What the layout does for the regions (preferences it reflects as attributes, the panels and
@@ -22,24 +23,36 @@ export interface UiActions {
   setLocale(locale: Locale): void;
   toggleSidebar(open?: boolean): void;
   sidebarOpen(): boolean;
+  /**
+   * Whether the layout has a sidebar to toggle now (`<kgdiff-viewer>`, unless its four regions
+   * are hidden); absent where there is none (a composed root).
+   */
+  hasSidebar?(): boolean;
   toggleMenu(open?: boolean): void;
   openHelp(): void;
   /** Show and focus the search (`/`). */
   focusSearch(): void;
+  /** The user opened or folded a region from inside it (the legend's head). */
+  setPanel?(region: PanelRegion, state: PanelState): void;
 }
 
 /** Elements of a region that others move focus to, through the root. */
-export type FocusTarget = 'search' | 'list';
+export type FocusTarget = 'search' | 'list' | 'help';
 
 /** What a region gets from the root it is bound to: the session, the actions, focus moves. */
 export interface UiContext extends UiActions {
-  readonly controller: ViewerController;
+  readonly controller: DiffSession;
   /** Root of the region's shadow tree (for focus management). */
   readonly root: ShadowRoot;
-  /** Register `focus` as the root's `name` target; returns the function that unregisters it. */
-  target(name: FocusTarget, focus: () => void): () => void;
-  /** Focus the root's `name` target registered last; false when there is none. */
+  /**
+   * Register `focus` as the root's `name` target, available while `available` says so (default:
+   * always); returns the function that unregisters it.
+   */
+  target(name: FocusTarget, focus: () => void, available?: () => boolean): () => void;
+  /** Focus the root's available `name` target registered last; false when there is none. */
   focus(name: FocusTarget): boolean;
+  /** The root's `keymap` now (the keys bound over the default map), or null. */
+  keymap(): Keymap | null;
 }
 
 /** One-character glyph of a hunk (docs/interaction.md §Change list): `+ − ~ ⇄ ⊕ ⑂`. */

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. */
@@ -18,16 +20,11 @@ function brandMark(): SVGSVGElement {
   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,

package/src/ui/search.ts

@@ -6,7 +6,7 @@
  * session, so the change list steps aside without either knowing the other. Registers itself
  * as the root's `search` focus target (`/`).
  */
-import { attr, h, icon, replace } from '../dom.js';
+import { attr, h, icon, isOpen, replace } from '../dom.js';
 import type { Topic } from '../session.js';
 import type { UiContext } from './context.js';
 
@@ -53,10 +53,14 @@ export class Search {
       hidden: true,
     });
     this.box = h('div', { class: 'search' }, icon('search'), this.input, this.#kbd, this.#clear);
-    ctx.target('search', () => {
-      this.input.focus();
-      this.input.select();
-    });
+    ctx.target(
+      'search',
+      () => {
+        this.input.focus();
+        this.input.select();
+      },
+      () => isOpen(this.input),
+    );
   }
 
   update(topics: ReadonlySet<Topic>): void {
@@ -66,6 +70,7 @@ export class Search {
       this.input.placeholder = tr.t('sidebar.searchPlaceholder');
       attr(this.input, 'aria-label', tr.t('sidebar.search'));
       attr(this.#clear, 'aria-label', tr.t('sidebar.searchClear'));
+      attr(this.results, 'aria-label', tr.t('sidebar.searchResults'));
       this.input.disabled = this.#ctx.controller.status !== 'ready';
     }
     if (all || topics.has('search')) this.#render();