@herbertgao/pi-extensions 2026.8.2 → 2026.8.4

package/node_modules/pi-footer/src/ui/screen.ts

@@ -0,0 +1,243 @@
+import { Key, matchesKey } from "@earendil-works/pi-tui";
+
+import { cloneConfig } from "../config.js";
+import type { GetExtensionStatuses } from "../extension-statuses.js";
+import type { StatuslineConfig, StatuslineData } from "../types.js";
+import { WidgetStore } from "../widgets/store.js";
+import type { Widget } from "../widgets/types.js";
+import { ConfigLifecycle, type ConfigUiResult } from "./config-lifecycle.js";
+import { escapeTarget } from "./helpers.js";
+import { activeLineCount, visibleRowCount } from "./layout.js";
+import { CONFIG_UI_HEIGHT_RATIO, type ScreenView } from "./model.js";
+import { OverlayRender } from "./overlay-render.js";
+import type { ScreenContext } from "./screen-context.js";
+import { ScreenController } from "./screen-controller.js";
+import { ScreenRender } from "./screen-render.js";
+import { createScreenState, type ScreenState } from "./screen-state.js";
+import { AddWidgetScreen } from "./screens/add-widget.js";
+import { ConfirmExitScreen } from "./screens/confirm-exit.js";
+import { EditColorsScreen } from "./screens/edit-colors.js";
+import { EditWidgetScreen } from "./screens/edit-widget.js";
+import { ExtensionStatusRowScreen } from "./screens/extension-status-row.js";
+import { GlobalScreen } from "./screens/global.js";
+import { LineListScreen } from "./screens/line-list.js";
+import { MainScreen } from "./screens/main.js";
+import { ColorLevelConfirmScreen, TerminalScreen, TerminalState } from "./screens/terminal.js";
+import { WidgetListScreen } from "./screens/widget-list.js";
+import { createUiTheme, type ThemeProvider, type UiTheme } from "./theme.js";
+import { RETRO_FRAME_INTERVAL_MS } from "./title-bar.js";
+
+export class StatuslineConfigScreen {
+  private readonly state: ScreenState;
+  private readonly lifecycle: ConfigLifecycle;
+  private readonly theme: UiTheme;
+  private readonly screenRender: ScreenRender;
+  private readonly overlayRender: OverlayRender;
+  private readonly screenContext: ScreenContext;
+  private readonly screenController: ScreenController;
+  private saving = false;
+  private readonly animationTimer: ReturnType<typeof setInterval>;
+
+  constructor(
+    config: StatuslineConfig,
+    private readonly previewData: StatuslineData,
+    private readonly getExtensionStatuses: GetExtensionStatuses,
+    private readonly requestRender: () => void,
+    private readonly getTerminalRows: () => number,
+    private readonly props: {
+      onChange(config: StatuslineConfig): void;
+      onSave(config: StatuslineConfig): Promise<void>;
+      onClose(result: ConfigUiResult): void;
+      getTheme: ThemeProvider;
+    },
+  ) {
+    this.state = createScreenState(WidgetStore.fromConfig(cloneConfig(config)));
+    this.lifecycle = new ConfigLifecycle(config);
+    this.theme = createUiTheme(props.getTheme);
+    this.screenRender = new ScreenRender(this.theme);
+    this.overlayRender = new OverlayRender(this.theme, this.screenRender);
+    this.screenContext = this.createScreenContext();
+    this.screenController = new ScreenController(this.screenContext);
+    this.registerScreens();
+    this.animationTimer = setInterval(this.requestRender, RETRO_FRAME_INTERVAL_MS);
+  }
+
+  render(width: number): string[] {
+    return this.overlayRender.render({
+      width,
+      terminalRows: this.getTerminalRows(),
+      activeLineCount: this.getActiveLineCount(),
+      visibleRowCount: this.getVisibleRowCount(),
+      store: this.state.store,
+      previewData: this.previewData,
+      getExtensionStatuses: this.getExtensionStatuses,
+      theme: this.props.getTheme(),
+      requestRender: this.requestRender,
+      configStateText: this.lifecycle.label
+        ? this.theme.configStateLabel(this.lifecycle.state, this.lifecycle.label)
+        : "",
+      body: this.screenController.renderScreen(width),
+    });
+  }
+
+  invalidate(): void {}
+
+  dispose(): void {
+    clearInterval(this.animationTimer);
+  }
+
+  handleInput(data: string): void {
+    if (matchesKey(data, Key.ctrl("s"))) {
+      void this.saveConfig(false);
+      return;
+    }
+
+    if (this.state.view === "confirm-color-level" || this.state.view === "confirm-exit") {
+      this.screenController.handleInput(data);
+      return;
+    }
+
+    if (matchesKey(data, Key.escape)) {
+      const target = escapeTarget(this.state.view);
+      if (target === "close") this.requestExit();
+      else this.show(target);
+      return;
+    }
+
+    this.screenController.handleInput(data);
+  }
+
+  private registerScreens(): void {
+    const terminalState = new TerminalState();
+    this.screenController.register("main", new MainScreen(this.screenContext, this.screenRender));
+    this.screenController.register(
+      "line-list",
+      new LineListScreen(this.screenContext, this.screenRender, "Edit lines", "widget-list"),
+    );
+    this.screenController.register(
+      "color-line-list",
+      new LineListScreen(this.screenContext, this.screenRender, "Edit colors", "color-widget-list"),
+    );
+    this.screenController.register(
+      "widget-list",
+      new WidgetListScreen(this.screenContext, this.screenRender, false),
+    );
+    this.screenController.register(
+      "color-widget-list",
+      new WidgetListScreen(this.screenContext, this.screenRender, true),
+    );
+    this.screenController.register(
+      "add-widget",
+      new AddWidgetScreen(this.screenContext, this.screenRender),
+    );
+    this.screenController.register(
+      "edit-widget",
+      new EditWidgetScreen(this.screenContext, this.screenRender),
+    );
+    this.screenController.register(
+      "edit-colors",
+      new EditColorsScreen(this.screenContext, this.screenRender),
+    );
+    this.screenController.register(
+      "terminal",
+      new TerminalScreen(this.screenContext, this.screenRender, terminalState),
+    );
+    this.screenController.register(
+      "confirm-color-level",
+      new ColorLevelConfirmScreen(this.screenContext, this.screenRender, terminalState),
+    );
+    this.screenController.register(
+      "confirm-exit",
+      new ConfirmExitScreen(this.screenContext, this.screenRender),
+    );
+    this.screenController.register(
+      "global",
+      new GlobalScreen(this.screenContext, this.screenRender),
+    );
+    this.screenController.register(
+      "extension-status-row",
+      new ExtensionStatusRowScreen(this.screenContext, this.screenRender),
+    );
+  }
+
+  private createScreenContext(): ScreenContext {
+    return {
+      state: this.state,
+      theme: this.theme,
+      getExtensionStatuses: this.getExtensionStatuses,
+      currentLine: () => this.currentLine(),
+      currentWidget: () => this.currentWidget(),
+      visibleRowCount: () => this.getVisibleRowCount(),
+      show: (view) => this.show(view),
+      emitChange: () => this.emitChange(),
+      save: (exitAfterSave) => void this.saveConfig(exitAfterSave),
+      exitWithoutSaving: () => this.exitWithoutSaving(),
+    };
+  }
+
+  private show(view: ScreenView): void {
+    this.state.view = view;
+  }
+
+  private currentLine(): Widget[] {
+    return this.state.store.lines[this.state.selectedLine] ?? this.state.store.lines[0] ?? [];
+  }
+
+  private currentWidget(): Widget | undefined {
+    return this.currentLine()[this.state.selectedWidget];
+  }
+
+  private getVisibleRowCount(): number {
+    return visibleRowCount(
+      this.getTerminalRows(),
+      CONFIG_UI_HEIGHT_RATIO,
+      this.getActiveLineCount(),
+    );
+  }
+
+  private getActiveLineCount(): number {
+    return activeLineCount(this.state.store.lines);
+  }
+
+  private requestExit(): void {
+    if (!this.lifecycle.dirty) {
+      this.closeWithResult(this.lifecycle.closeResult(false));
+      return;
+    }
+    this.state.viewBeforeConfirmExit = this.state.view;
+    this.show("confirm-exit");
+  }
+
+  private exitWithoutSaving(): void {
+    this.closeWithResult(this.lifecycle.closeResult(false));
+  }
+
+  private async saveConfig(exitAfterSave: boolean): Promise<void> {
+    if (this.saving) return;
+    this.saving = true;
+    this.lifecycle.beginSave();
+    this.requestRender();
+    try {
+      const config = cloneConfig(this.state.store.toConfig());
+      await this.props.onSave(config);
+      this.lifecycle.markSaved(config);
+      if (exitAfterSave) this.closeWithResult(this.lifecycle.closeResult(true));
+    } catch {
+      this.lifecycle.markSaveFailed();
+      // Error notification is handled by the save callback.
+    } finally {
+      this.saving = false;
+      this.requestRender();
+    }
+  }
+
+  private closeWithResult(result: ConfigUiResult): void {
+    this.props.onChange(result.config);
+    this.props.onClose(result);
+  }
+
+  private emitChange(): void {
+    this.lifecycle.markChanged();
+    this.props.onChange(cloneConfig(this.state.store.toConfig()));
+  }
+}

package/node_modules/pi-footer/src/ui/screens/add-widget.ts

@@ -0,0 +1,92 @@
+import { Key, matchesKey } from "@earendil-works/pi-tui";
+
+import { registry, type WidgetDefinition } from "../../widgets/registry.js";
+import { clamp, isPrintable, wrap } from "../helpers.js";
+import { pageSelection } from "../navigation.js";
+import { Controller } from "./controller.js";
+
+export class AddWidgetScreen extends Controller {
+  private selected = 0;
+  private filter = "";
+
+  renderScreen(width: number): string[] {
+    const items = this.filterWidgets();
+    const visibleCount = this.ctx.visibleRowCount();
+    const start = clamp(
+      this.selected - Math.floor(visibleCount / 2),
+      0,
+      Math.max(0, items.length - visibleCount),
+    );
+    const visible = items.slice(start, start + visibleCount);
+    const lines = [
+      this.render.line(
+        this.render.menuTitle("Add Widget", "Search or select a widget to add"),
+        width,
+      ),
+      this.render.line(this.ctx.theme.dim(this.hint()), width),
+      this.render.line(
+        this.ctx.theme.dim(this.countLabel(items.length, start, visible.length)),
+        width,
+      ),
+    ];
+    visible.forEach((definition, offset) => {
+      const index = start + offset;
+      const text = this.itemLabel(definition);
+      lines.push(this.render.menuLine(index === this.selected, text, width));
+    });
+    return lines;
+  }
+
+  handleInput(data: string): void {
+    const items = this.filterWidgets();
+    if (matchesKey(data, Key.up))
+      this.selected = wrap(this.selected - 1, Math.max(1, items.length));
+    else if (matchesKey(data, Key.down))
+      this.selected = wrap(this.selected + 1, Math.max(1, items.length));
+    else if (matchesKey(data, Key.pageUp)) this.page(items.length, -1);
+    else if (matchesKey(data, Key.pageDown)) this.page(items.length, 1);
+    else if (matchesKey(data, Key.backspace)) {
+      this.filter = this.filter.slice(0, -1);
+      this.selected = 0;
+    } else if (matchesKey(data, Key.enter)) {
+      const definition = items[this.selected];
+      if (!definition) return;
+      this.ctx
+        .currentLine()
+        .splice(this.ctx.state.selectedWidget + 1, 0, registry.createWidget(definition.type));
+      this.ctx.state.selectedWidget += 1;
+      this.ctx.show("widget-list");
+      this.ctx.emitChange();
+    } else if (isPrintable(data)) {
+      this.filter += data.toLowerCase();
+      this.selected = 0;
+    }
+  }
+
+  private hint(): string {
+    return `type to filter • ↑/↓ select • pgup/pgdn jump • enter add • esc back • filter: ${this.filter || "(none)"}`;
+  }
+
+  private countLabel(total: number, start: number, visibleLength: number): string {
+    const range = total === 0 ? "0-0" : `${start + 1}-${Math.min(total, start + visibleLength)}`;
+    return `${total} result(s), showing ${range}`;
+  }
+
+  private filterWidgets(): WidgetDefinition[] {
+    const filter = this.filter.trim();
+    if (!filter) return [...registry.definitions];
+    return registry.definitions.filter((definition) =>
+      `${definition.category} ${definition.label} ${definition.type}`
+        .toLowerCase()
+        .includes(filter.toLowerCase()),
+    );
+  }
+
+  private itemLabel(definition: WidgetDefinition): string {
+    return `${definition.category} / ${definition.label} ${this.ctx.theme.dim(definition.description)}`;
+  }
+
+  private page(length: number, delta: -1 | 1): void {
+    this.selected = pageSelection(this.selected, length, this.ctx.visibleRowCount(), delta);
+  }
+}

package/node_modules/pi-footer/src/ui/screens/confirm-exit.ts

@@ -0,0 +1,52 @@
+import { Key, matchesKey } from "@earendil-works/pi-tui";
+
+import { wrap } from "../helpers.js";
+import { Controller } from "./controller.js";
+
+const ITEMS = ["Save & Exit", "Exit without saving", "Return to config UI"] as const;
+const HINT = "↑/↓ select • enter confirm • s save • x discard • esc/r back";
+
+export class ConfirmExitScreen extends Controller {
+  private selected = 0;
+
+  renderScreen(width: number): string[] {
+    return [
+      this.render.line(
+        this.render.menuTitle("Unsaved changes", "Choose how to close configuration"),
+        width,
+      ),
+      this.render.line(this.ctx.theme.dim(HINT), width),
+      this.render.line(
+        this.ctx.theme.warning("You have unsaved pi-footer configuration changes."),
+        width,
+      ),
+      ...ITEMS.map((item, index) => this.render.menuLine(index === this.selected, item, width)),
+    ];
+  }
+
+  handleInput(data: string): void {
+    if (matchesKey(data, Key.escape)) this.returnToConfigUi();
+    else if (matchesKey(data, Key.up) || matchesKey(data, Key.left))
+      this.selected = wrap(this.selected - 1, ITEMS.length);
+    else if (matchesKey(data, Key.down) || matchesKey(data, Key.right))
+      this.selected = wrap(this.selected + 1, ITEMS.length);
+    else if (matchesKey(data, Key.enter)) this.selectedAction();
+    else this.shortcutAction(data);
+  }
+
+  private selectedAction(): void {
+    if (this.selected === 0) return this.ctx.save(true);
+    if (this.selected === 1) return this.ctx.exitWithoutSaving();
+    return this.returnToConfigUi();
+  }
+
+  private shortcutAction(data: string): void {
+    if (data === "s") return this.ctx.save(true);
+    if (data === "x") return this.ctx.exitWithoutSaving();
+    if (data === "r") return this.returnToConfigUi();
+  }
+
+  private returnToConfigUi(): void {
+    this.ctx.show(this.ctx.state.viewBeforeConfirmExit);
+  }
+}

package/node_modules/pi-footer/src/ui/screens/controller.ts

@@ -0,0 +1,12 @@
+import type { ScreenContext } from "../screen-context.js";
+import type { ScreenRender } from "../screen-render.js";
+
+export abstract class Controller {
+  constructor(
+    protected ctx: ScreenContext,
+    protected readonly render: ScreenRender,
+  ) {}
+
+  abstract renderScreen(width: number): string[];
+  abstract handleInput(data: string): void;
+}

package/node_modules/pi-footer/src/ui/screens/edit-colors.ts

@@ -0,0 +1,68 @@
+import { Key, matchesKey } from "@earendil-works/pi-tui";
+
+import type { Widget } from "../../widgets/types.js";
+import {
+  applyColorDigit,
+  applyColorOptionField,
+  deleteColorDigit,
+  EDIT_COLORS_HINT,
+} from "../color-options.js";
+import { editColorsFieldRows, editColorsTitle } from "../edit-colors.js";
+import { colorFields } from "../fields.js";
+import { isPrintable, wrap } from "../helpers.js";
+import type { ColorOptionField } from "../model.js";
+import { Controller } from "./controller.js";
+
+export class EditColorsScreen extends Controller {
+  private selected = 0;
+
+  renderScreen(width: number): string[] {
+    const widget = this.ctx.currentWidget();
+    if (!widget) return [this.render.line(this.ctx.theme.warning("No widget selected"), width)];
+    const fields = editColorsFieldRows(widget);
+    this.clampSelection(fields.length);
+    return [
+      this.render.line(
+        this.render.menuTitle(editColorsTitle(widget), "Select a field to edit its colors"),
+        width,
+      ),
+      this.render.line(this.ctx.theme.dim(EDIT_COLORS_HINT), width),
+      ...fields.map((field, index) => this.render.menuLine(index === this.selected, field, width)),
+    ];
+  }
+
+  handleInput(data: string): void {
+    const widget = this.ctx.currentWidget();
+    if (!widget) return;
+    const fields = colorFields(widget);
+    this.clampSelection(fields.length);
+    const field = fields[this.selected];
+    if (!field) return;
+    if (matchesKey(data, Key.up)) this.selected = wrap(this.selected - 1, fields.length);
+    else if (matchesKey(data, Key.down)) this.selected = wrap(this.selected + 1, fields.length);
+    else if (matchesKey(data, Key.left)) this.adjustColorField(widget, field, -1);
+    else if (matchesKey(data, Key.right) || matchesKey(data, Key.enter))
+      this.adjustColorField(widget, field, 1);
+    else if (matchesKey(data, Key.backspace)) this.deleteColorDigit(widget, field);
+    else if (isPrintable(data)) this.applyColorDigit(widget, field, data);
+  }
+
+  private clampSelection(fieldCount: number): void {
+    this.selected = Math.min(Math.max(this.selected, 0), Math.max(0, fieldCount - 1));
+  }
+
+  private applyColorDigit(widget: Widget, field: ColorOptionField, digit: string): void {
+    if (!applyColorDigit(widget, field, digit)) return;
+    this.ctx.emitChange();
+  }
+
+  private deleteColorDigit(widget: Widget, field: ColorOptionField): void {
+    if (!deleteColorDigit(widget, field)) return;
+    this.ctx.emitChange();
+  }
+
+  private adjustColorField(widget: Widget, field: ColorOptionField, delta: number): void {
+    applyColorOptionField(widget, field, delta);
+    this.ctx.emitChange();
+  }
+}

package/node_modules/pi-footer/src/ui/screens/edit-widget.ts

@@ -0,0 +1,115 @@
+import { Key, matchesKey } from "@earendil-works/pi-tui";
+
+import { registry } from "../../widgets/registry.js";
+import type { Widget } from "../../widgets/types.js";
+import { eventWidgetUsageLines } from "../events.js";
+import { cycleExternalStatusKey, statusKeyPickerLines } from "../extension-status-picker.js";
+import { fieldsForWidget, fieldValue } from "../fields.js";
+import { isPrintable, wrap } from "../helpers.js";
+import type { OptionField } from "../model.js";
+import { applyOptionField, applyOptionFieldEdit } from "../option-edit.js";
+import { Controller } from "./controller.js";
+
+const HINT = "↑/↓ field • ←/→ change • type text • backspace delete • esc back";
+
+export class EditWidgetScreen extends Controller {
+  private selected = 0;
+
+  renderScreen(width: number): string[] {
+    const widget = this.ctx.currentWidget();
+    if (!widget) return [this.render.line(this.ctx.theme.warning("No widget selected"), width)];
+    const fields = fieldsForWidget(widget);
+    this.clampSelection(fields.length);
+    const selectedField = fields[this.selected];
+    const lines = [
+      this.render.line(
+        this.render.menuTitle(this.widgetTitle(widget), "Select a field to edit its options"),
+        width,
+      ),
+      this.render.line(this.ctx.theme.dim(HINT), width),
+      ...fields.map((field, index) =>
+        this.render.menuLine(
+          index === this.selected,
+          `${field.label}: ${fieldValue(widget, field)}`,
+          width,
+        ),
+      ),
+    ];
+
+    if (selectedField?.editAction === "external-status-key") {
+      lines.push(
+        ...statusKeyPickerLines(
+          this.ctx.getExtensionStatuses,
+          this.ctx.state.store.settings.extensionStatusRow,
+          width,
+          (content, lineWidth) => this.render.line(content, lineWidth),
+          (value) => this.ctx.theme.dim(value),
+        ),
+      );
+    }
+
+    if (widget.type === "event") {
+      lines.push(
+        ...eventWidgetUsageLines(
+          widget,
+          width,
+          (content, lineWidth) => this.render.line(content, lineWidth),
+          (value) => this.ctx.theme.dim(value),
+        ),
+      );
+    }
+
+    return lines;
+  }
+
+  handleInput(data: string): void {
+    const widget = this.ctx.currentWidget();
+    if (!widget) return;
+    const fields = fieldsForWidget(widget);
+    this.clampSelection(fields.length);
+    const field = fields[this.selected];
+    if (!field) return;
+    if (matchesKey(data, Key.up)) this.selected = wrap(this.selected - 1, fields.length);
+    else if (matchesKey(data, Key.down)) this.selected = wrap(this.selected + 1, fields.length);
+    else if (matchesKey(data, Key.left)) this.adjustField(widget, field, -1);
+    else if (matchesKey(data, Key.right) || matchesKey(data, Key.enter))
+      this.adjustField(widget, field, 1);
+    else if (matchesKey(data, Key.backspace) && field.kind === "text")
+      this.applyTextFieldEdit(widget, field, { kind: "deleteText" });
+    else if (isPrintable(data) && field.kind === "text")
+      this.applyTextFieldEdit(widget, field, { kind: "appendText", text: data });
+  }
+
+  private widgetTitle(widget: Widget): string {
+    return `Edit ${registry.spec(widget.type).label}`;
+  }
+
+  private clampSelection(fieldCount: number): void {
+    this.selected = Math.min(Math.max(this.selected, 0), Math.max(0, fieldCount - 1));
+  }
+
+  private applyTextFieldEdit(
+    widget: Widget,
+    field: OptionField,
+    edit: { kind: "appendText"; text: string } | { kind: "deleteText" },
+  ): void {
+    if (applyOptionFieldEdit(widget, field, edit) !== "changed") return;
+    this.ctx.emitChange();
+  }
+
+  private adjustField(widget: Widget, field: OptionField, delta: number): void {
+    const result = applyOptionField(widget, field, delta);
+    if (result === "external-status-key") {
+      if (
+        !cycleExternalStatusKey(
+          widget,
+          this.ctx.getExtensionStatuses,
+          this.ctx.state.store.settings.extensionStatusRow,
+          delta,
+        )
+      )
+        return;
+    } else if (result === "unchanged") return;
+    this.ctx.emitChange();
+  }
+}

package/node_modules/pi-footer/src/ui/screens/extension-status-row.ts

@@ -0,0 +1,61 @@
+import { Key, matchesKey } from "@earendil-works/pi-tui";
+
+import {
+  extensionStatusRowCount,
+  extensionStatusRowLines,
+  toggleExtensionStatusRowSelection,
+} from "../extension-statuses.js";
+import { wrap } from "../helpers.js";
+import { pageSelection } from "../navigation.js";
+import { Controller } from "./controller.js";
+
+export class ExtensionStatusRowScreen extends Controller {
+  private selected = 0;
+
+  renderScreen(width: number): string[] {
+    return extensionStatusRowLines(
+      this.ctx.state.store.settings,
+      this.ctx.getExtensionStatuses,
+      this.selected,
+      width,
+      (title, subtitle) => this.render.menuTitle(title, subtitle),
+      (content, lineWidth) => this.render.line(content, lineWidth),
+      (selected, content, lineWidth) => this.render.menuLine(selected, content, lineWidth),
+      (value) => this.ctx.theme.dim(value),
+      (value) => this.ctx.theme.success(value),
+      (value) => this.ctx.theme.warning(value),
+    );
+  }
+
+  handleInput(data: string): void {
+    const count = extensionStatusRowCount(
+      this.ctx.state.store.settings,
+      this.ctx.getExtensionStatuses,
+    );
+    if (matchesKey(data, Key.up)) this.selected = wrap(this.selected - 1, Math.max(1, count));
+    else if (matchesKey(data, Key.down))
+      this.selected = wrap(this.selected + 1, Math.max(1, count));
+    else if (matchesKey(data, Key.pageUp)) this.page(count, -1);
+    else if (matchesKey(data, Key.pageDown)) this.page(count, 1);
+    else if (
+      matchesKey(data, Key.space) ||
+      matchesKey(data, Key.left) ||
+      matchesKey(data, Key.right) ||
+      matchesKey(data, Key.enter)
+    ) {
+      if (
+        toggleExtensionStatusRowSelection(
+          this.ctx.state.store.settings,
+          this.ctx.getExtensionStatuses,
+          this.selected,
+        )
+      ) {
+        this.ctx.emitChange();
+      }
+    }
+  }
+
+  private page(count: number, delta: -1 | 1): void {
+    this.selected = pageSelection(this.selected, count, this.ctx.visibleRowCount(), delta);
+  }
+}