xterm-input-panel 1.1.0 → 1.2.1

package/src/shortcut-pages.ts

@@ -96,23 +96,135 @@ function terminalPage(): ShortcutPage {
     cols: GRID_COLS,
     rows: GRID_ROWS,
     items: [
-      { id: 'ctrl-w', label: 'Kill Word', subLabel: 'Ctrl+W', col: 3, row: ROW_Q, cols: 2, action: { type: 'send', data: '\x17' } },
-      { id: 'ctrl-r', label: 'History Search', subLabel: 'Ctrl+R', col: 5, row: ROW_Q, cols: 2, action: { type: 'send', data: '\x12' } },
-      { id: 'ctrl-u', label: 'Kill Left', subLabel: 'Ctrl+U', col: 8, row: ROW_Q, cols: 2, action: { type: 'send', data: '\x15' } },
-
-      { id: 'ctrl-a', label: 'Line Start', subLabel: 'Ctrl+A', col: 2, row: ROW_A, cols: 2, action: { type: 'send', data: '\x01' } },
-      { id: 'ctrl-d', label: 'EOF', subLabel: 'Ctrl+D', col: 4, row: ROW_A, cols: 2, action: { type: 'send', data: '\x04' } },
-      { id: 'ctrl-f', label: 'Char Right', subLabel: 'Ctrl+F', col: 6, row: ROW_A, cols: 2, action: { type: 'send', data: '\x06' } },
-      { id: 'ctrl-k', label: 'Kill Right', subLabel: 'Ctrl+K', col: 9, row: ROW_A, cols: 2, action: { type: 'send', data: '\x0b' } },
-      { id: 'ctrl-l', label: 'Clear', subLabel: 'Ctrl+L', col: 11, row: ROW_A, cols: 2, action: { type: 'send', data: '\x0c' } },
-
-      { id: 'ctrl-z', label: 'Suspend', subLabel: 'Ctrl+Z', col: 3, row: ROW_Z, cols: 2, action: { type: 'send', data: '\x1a' } },
-      { id: 'ctrl-c', label: 'Interrupt', subLabel: 'Ctrl+C', col: 5, row: ROW_Z, cols: 2, action: { type: 'send', data: '\x03' } },
-      { id: 'ctrl-v', label: 'Literal', subLabel: 'Ctrl+V', col: 7, row: ROW_Z, cols: 2, action: { type: 'send', data: '\x16' } },
-      { id: 'ctrl-y', label: 'Yank', subLabel: 'Ctrl+Y', col: 9, row: ROW_Z, cols: 2, action: { type: 'send', data: '\x19' } },
-
-      { id: 'alt-b', label: 'Prev Word', subLabel: 'Alt+B', col: 6, row: ROW_BOTTOM, cols: 2, action: { type: 'send', data: '\x1bb' } },
-      { id: 'alt-f', label: 'Next Word', subLabel: 'Alt+F', col: 8, row: ROW_BOTTOM, cols: 2, action: { type: 'send', data: '\x1bf' } },
+      {
+        id: 'ctrl-w',
+        label: 'Kill Word',
+        subLabel: 'Ctrl+W',
+        col: 3,
+        row: ROW_Q,
+        cols: 2,
+        action: { type: 'send', data: '\x17' },
+      },
+      {
+        id: 'ctrl-r',
+        label: 'History Search',
+        subLabel: 'Ctrl+R',
+        col: 5,
+        row: ROW_Q,
+        cols: 2,
+        action: { type: 'send', data: '\x12' },
+      },
+      {
+        id: 'ctrl-u',
+        label: 'Kill Left',
+        subLabel: 'Ctrl+U',
+        col: 8,
+        row: ROW_Q,
+        cols: 2,
+        action: { type: 'send', data: '\x15' },
+      },
+
+      {
+        id: 'ctrl-a',
+        label: 'Line Start',
+        subLabel: 'Ctrl+A',
+        col: 2,
+        row: ROW_A,
+        cols: 2,
+        action: { type: 'send', data: '\x01' },
+      },
+      {
+        id: 'ctrl-d',
+        label: 'EOF',
+        subLabel: 'Ctrl+D',
+        col: 4,
+        row: ROW_A,
+        cols: 2,
+        action: { type: 'send', data: '\x04' },
+      },
+      {
+        id: 'ctrl-f',
+        label: 'Char Right',
+        subLabel: 'Ctrl+F',
+        col: 6,
+        row: ROW_A,
+        cols: 2,
+        action: { type: 'send', data: '\x06' },
+      },
+      {
+        id: 'ctrl-k',
+        label: 'Kill Right',
+        subLabel: 'Ctrl+K',
+        col: 9,
+        row: ROW_A,
+        cols: 2,
+        action: { type: 'send', data: '\x0b' },
+      },
+      {
+        id: 'ctrl-l',
+        label: 'Clear',
+        subLabel: 'Ctrl+L',
+        col: 11,
+        row: ROW_A,
+        cols: 2,
+        action: { type: 'send', data: '\x0c' },
+      },
+
+      {
+        id: 'ctrl-z',
+        label: 'Suspend',
+        subLabel: 'Ctrl+Z',
+        col: 3,
+        row: ROW_Z,
+        cols: 2,
+        action: { type: 'send', data: '\x1a' },
+      },
+      {
+        id: 'ctrl-c',
+        label: 'Interrupt',
+        subLabel: 'Ctrl+C',
+        col: 5,
+        row: ROW_Z,
+        cols: 2,
+        action: { type: 'send', data: '\x03' },
+      },
+      {
+        id: 'ctrl-v',
+        label: 'Literal',
+        subLabel: 'Ctrl+V',
+        col: 7,
+        row: ROW_Z,
+        cols: 2,
+        action: { type: 'send', data: '\x16' },
+      },
+      {
+        id: 'ctrl-y',
+        label: 'Yank',
+        subLabel: 'Ctrl+Y',
+        col: 9,
+        row: ROW_Z,
+        cols: 2,
+        action: { type: 'send', data: '\x19' },
+      },
+
+      {
+        id: 'alt-b',
+        label: 'Prev Word',
+        subLabel: 'Alt+B',
+        col: 6,
+        row: ROW_BOTTOM,
+        cols: 2,
+        action: { type: 'send', data: '\x1bb' },
+      },
+      {
+        id: 'alt-f',
+        label: 'Next Word',
+        subLabel: 'Alt+F',
+        col: 8,
+        row: ROW_BOTTOM,
+        cols: 2,
+        action: { type: 'send', data: '\x1bf' },
+      },
     ],
   }
 }
@@ -125,20 +237,116 @@ function claudePage(): ShortcutPage {
     cols: GRID_COLS,
     rows: GRID_ROWS,
     items: [
-      { id: 'claude-commands', label: '/ Commands', subLabel: '/', col: 1, row: ROW_TOP, cols: 2, action: { type: 'text', text: '/' } },
-      { id: 'claude-shell', label: '! Shell', subLabel: '!', col: 3, row: ROW_TOP, cols: 2, action: { type: 'text', text: '!' } },
-      { id: 'claude-files', label: '@ Paths', subLabel: '@', col: 5, row: ROW_TOP, cols: 2, action: { type: 'text', text: '@' } },
-      { id: 'claude-newline', label: 'Newline', subLabel: '\\ + Enter', col: 8, row: ROW_TOP, cols: 3, action: { type: 'text', text: '\\\n' } },
-      { id: 'claude-edit-last', label: 'Edit Previous', subLabel: 'Esc Esc', col: 11, row: ROW_TOP, cols: 3, action: { type: 'send', data: '\x1b\x1b' } },
-
-      { id: 'claude-editor', label: 'External Editor', subLabel: 'Ctrl+G', col: 2, row: ROW_A, cols: 3, action: { type: 'send', data: '\x07' } },
-      { id: 'claude-reverse-search', label: 'History Search', subLabel: 'Ctrl+R', col: 5, row: ROW_A, cols: 3, action: { type: 'send', data: '\x12' } },
-      { id: 'claude-bg', label: 'Background Task', subLabel: 'Ctrl+B', col: 8, row: ROW_A, cols: 3, action: { type: 'send', data: '\x02' } },
-      { id: 'claude-task-list', label: 'Task List', subLabel: 'Ctrl+T', col: 11, row: ROW_A, cols: 3, action: { type: 'send', data: '\x14' } },
-
-      { id: 'claude-change-mode', label: 'Change Mode', subLabel: 'Shift+Tab', col: 1, row: ROW_BOTTOM, cols: 3, action: { type: 'send', data: '\x1b[Z' } },
-      { id: 'claude-cancel', label: 'Cancel', subLabel: 'Ctrl+C', col: 4, row: ROW_BOTTOM, cols: 3, action: { type: 'send', data: '\x03' } },
-      { id: 'claude-exit', label: 'Exit', subLabel: 'Ctrl+D', col: 7, row: ROW_BOTTOM, cols: 3, action: { type: 'send', data: '\x04' } },
+      {
+        id: 'claude-commands',
+        label: '/ Commands',
+        subLabel: '/',
+        col: 1,
+        row: ROW_TOP,
+        cols: 2,
+        action: { type: 'text', text: '/' },
+      },
+      {
+        id: 'claude-shell',
+        label: '! Shell',
+        subLabel: '!',
+        col: 3,
+        row: ROW_TOP,
+        cols: 2,
+        action: { type: 'text', text: '!' },
+      },
+      {
+        id: 'claude-files',
+        label: '@ Paths',
+        subLabel: '@',
+        col: 5,
+        row: ROW_TOP,
+        cols: 2,
+        action: { type: 'text', text: '@' },
+      },
+      {
+        id: 'claude-newline',
+        label: 'Newline',
+        subLabel: '\\ + Enter',
+        col: 8,
+        row: ROW_TOP,
+        cols: 3,
+        action: { type: 'text', text: '\\\n' },
+      },
+      {
+        id: 'claude-edit-last',
+        label: 'Edit Previous',
+        subLabel: 'Esc Esc',
+        col: 11,
+        row: ROW_TOP,
+        cols: 3,
+        action: { type: 'send', data: '\x1b\x1b' },
+      },
+
+      {
+        id: 'claude-editor',
+        label: 'External Editor',
+        subLabel: 'Ctrl+G',
+        col: 2,
+        row: ROW_A,
+        cols: 3,
+        action: { type: 'send', data: '\x07' },
+      },
+      {
+        id: 'claude-reverse-search',
+        label: 'History Search',
+        subLabel: 'Ctrl+R',
+        col: 5,
+        row: ROW_A,
+        cols: 3,
+        action: { type: 'send', data: '\x12' },
+      },
+      {
+        id: 'claude-bg',
+        label: 'Background Task',
+        subLabel: 'Ctrl+B',
+        col: 8,
+        row: ROW_A,
+        cols: 3,
+        action: { type: 'send', data: '\x02' },
+      },
+      {
+        id: 'claude-task-list',
+        label: 'Task List',
+        subLabel: 'Ctrl+T',
+        col: 11,
+        row: ROW_A,
+        cols: 3,
+        action: { type: 'send', data: '\x14' },
+      },
+
+      {
+        id: 'claude-change-mode',
+        label: 'Change Mode',
+        subLabel: 'Shift+Tab',
+        col: 1,
+        row: ROW_BOTTOM,
+        cols: 3,
+        action: { type: 'send', data: '\x1b[Z' },
+      },
+      {
+        id: 'claude-cancel',
+        label: 'Cancel',
+        subLabel: 'Ctrl+C',
+        col: 4,
+        row: ROW_BOTTOM,
+        cols: 3,
+        action: { type: 'send', data: '\x03' },
+      },
+      {
+        id: 'claude-exit',
+        label: 'Exit',
+        subLabel: 'Ctrl+D',
+        col: 7,
+        row: ROW_BOTTOM,
+        cols: 3,
+        action: { type: 'send', data: '\x04' },
+      },
     ],
   }
 }
@@ -151,20 +359,108 @@ function codexPage(platform: HostPlatform): ShortcutPage {
     cols: GRID_COLS,
     rows: GRID_ROWS,
     items: [
-      { id: 'codex-commands', label: '/ Commands', subLabel: '/', col: 1, row: ROW_TOP, cols: 2, action: { type: 'text', text: '/' } },
-      { id: 'codex-shell', label: '! Shell', subLabel: '!', col: 3, row: ROW_TOP, cols: 2, action: { type: 'text', text: '!' } },
-      { id: 'codex-files', label: '@ Paths', subLabel: '@', col: 5, row: ROW_TOP, cols: 2, action: { type: 'text', text: '@' } },
-      { id: 'codex-newline', label: 'Newline', subLabel: 'Shift+Enter', col: 8, row: ROW_TOP, cols: 3, action: { type: 'send', data: '\n' } },
-      { id: 'codex-queue', label: 'Queue Message', subLabel: 'Tab', col: 11, row: ROW_TOP, cols: 3, action: { type: 'send', data: '\t' } },
+      {
+        id: 'codex-commands',
+        label: '/ Commands',
+        subLabel: '/',
+        col: 1,
+        row: ROW_TOP,
+        cols: 2,
+        action: { type: 'text', text: '/' },
+      },
+      {
+        id: 'codex-shell',
+        label: '! Shell',
+        subLabel: '!',
+        col: 3,
+        row: ROW_TOP,
+        cols: 2,
+        action: { type: 'text', text: '!' },
+      },
+      {
+        id: 'codex-files',
+        label: '@ Paths',
+        subLabel: '@',
+        col: 5,
+        row: ROW_TOP,
+        cols: 2,
+        action: { type: 'text', text: '@' },
+      },
+      {
+        id: 'codex-newline',
+        label: 'Newline',
+        subLabel: 'Shift+Enter',
+        col: 8,
+        row: ROW_TOP,
+        cols: 3,
+        action: { type: 'send', data: '\n' },
+      },
+      {
+        id: 'codex-queue',
+        label: 'Queue Message',
+        subLabel: 'Tab',
+        col: 11,
+        row: ROW_TOP,
+        cols: 3,
+        action: { type: 'send', data: '\t' },
+      },
 
-      { id: 'codex-editor', label: 'External Editor', subLabel: 'Ctrl+G', col: 4, row: ROW_A, cols: 3, action: { type: 'send', data: '\x07' } },
-      { id: 'codex-edit-last', label: 'Edit Previous', subLabel: 'Esc Esc', col: 7, row: ROW_A, cols: 3, action: { type: 'send', data: '\x1b\x1b' } },
-      { id: 'codex-transcript', label: 'Transcript', subLabel: 'Ctrl+T', col: 10, row: ROW_A, cols: 3, action: { type: 'send', data: '\x14' } },
+      {
+        id: 'codex-editor',
+        label: 'External Editor',
+        subLabel: 'Ctrl+G',
+        col: 4,
+        row: ROW_A,
+        cols: 3,
+        action: { type: 'send', data: '\x07' },
+      },
+      {
+        id: 'codex-edit-last',
+        label: 'Edit Previous',
+        subLabel: 'Esc Esc',
+        col: 7,
+        row: ROW_A,
+        cols: 3,
+        action: { type: 'send', data: '\x1b\x1b' },
+      },
+      {
+        id: 'codex-transcript',
+        label: 'Transcript',
+        subLabel: 'Ctrl+T',
+        col: 10,
+        row: ROW_A,
+        cols: 3,
+        action: { type: 'send', data: '\x14' },
+      },
 
-      { id: 'codex-paste-image', label: 'Paste Image', subLabel: codexPasteImageLabel(platform), col: 6, row: ROW_Z, cols: 3, action: { type: 'send', data: '\x16' } },
+      {
+        id: 'codex-paste-image',
+        label: 'Paste Image',
+        subLabel: codexPasteImageLabel(platform),
+        col: 6,
+        row: ROW_Z,
+        cols: 3,
+        action: { type: 'send', data: '\x16' },
+      },
 
-      { id: 'codex-change-mode', label: 'Change Mode', subLabel: 'Shift+Tab', col: 1, row: ROW_BOTTOM, cols: 3, action: { type: 'send', data: '\x1b[Z' } },
-      { id: 'codex-exit', label: 'Exit', subLabel: 'Ctrl+C', col: 4, row: ROW_BOTTOM, cols: 3, action: { type: 'send', data: '\x03' } },
+      {
+        id: 'codex-change-mode',
+        label: 'Change Mode',
+        subLabel: 'Shift+Tab',
+        col: 1,
+        row: ROW_BOTTOM,
+        cols: 3,
+        action: { type: 'send', data: '\x1b[Z' },
+      },
+      {
+        id: 'codex-exit',
+        label: 'Exit',
+        subLabel: 'Ctrl+C',
+        col: 4,
+        row: ROW_BOTTOM,
+        cols: 3,
+        action: { type: 'send', data: '\x03' },
+      },
     ],
   }
 }
@@ -177,28 +473,102 @@ function geminiPage(): ShortcutPage {
     cols: GRID_COLS,
     rows: GRID_ROWS,
     items: [
-      { id: 'gemini-shell-mode', label: 'Shell Mode', subLabel: '!', col: 1, row: ROW_TOP, cols: 2, action: { type: 'text', text: '!' } },
-      { id: 'gemini-shortcuts-panel', label: 'Shortcuts', subLabel: '?', col: 3, row: ROW_TOP, cols: 2, action: { type: 'text', text: '?' } },
-      { id: 'gemini-editor', label: 'External Editor', subLabel: 'Ctrl+X', col: 5, row: ROW_TOP, cols: 3, action: { type: 'send', data: '\x18' } },
-      { id: 'gemini-reverse-search', label: 'Reverse Search', subLabel: 'Ctrl+R', col: 8, row: ROW_TOP, cols: 3, action: { type: 'send', data: '\x12' } },
-      { id: 'gemini-edit-last', label: 'Edit Previous', subLabel: 'Esc Esc', col: 11, row: ROW_TOP, cols: 3, action: { type: 'send', data: '\x1b\x1b' } },
-
-      { id: 'gemini-ide-context', label: 'IDE Context', subLabel: 'Ctrl+G', col: 4, row: ROW_A, cols: 3, action: { type: 'send', data: '\x07' } },
-      { id: 'gemini-todo-list', label: 'TODO List', subLabel: 'Ctrl+T', col: 7, row: ROW_A, cols: 3, action: { type: 'send', data: '\x14' } },
-      { id: 'gemini-change-mode', label: 'Change Mode', subLabel: 'Shift+Tab', col: 10, row: ROW_A, cols: 3, action: { type: 'send', data: '\x1b[Z' } },
-
-      { id: 'gemini-cancel', label: 'Cancel', subLabel: 'Ctrl+C', col: 4, row: ROW_BOTTOM, cols: 3, action: { type: 'send', data: '\x03' } },
-      { id: 'gemini-exit', label: 'Exit Empty', subLabel: 'Ctrl+D', col: 7, row: ROW_BOTTOM, cols: 3, action: { type: 'send', data: '\x04' } },
+      {
+        id: 'gemini-shell-mode',
+        label: 'Shell Mode',
+        subLabel: '!',
+        col: 1,
+        row: ROW_TOP,
+        cols: 2,
+        action: { type: 'text', text: '!' },
+      },
+      {
+        id: 'gemini-shortcuts-panel',
+        label: 'Shortcuts',
+        subLabel: '?',
+        col: 3,
+        row: ROW_TOP,
+        cols: 2,
+        action: { type: 'text', text: '?' },
+      },
+      {
+        id: 'gemini-editor',
+        label: 'External Editor',
+        subLabel: 'Ctrl+X',
+        col: 5,
+        row: ROW_TOP,
+        cols: 3,
+        action: { type: 'send', data: '\x18' },
+      },
+      {
+        id: 'gemini-reverse-search',
+        label: 'Reverse Search',
+        subLabel: 'Ctrl+R',
+        col: 8,
+        row: ROW_TOP,
+        cols: 3,
+        action: { type: 'send', data: '\x12' },
+      },
+      {
+        id: 'gemini-edit-last',
+        label: 'Edit Previous',
+        subLabel: 'Esc Esc',
+        col: 11,
+        row: ROW_TOP,
+        cols: 3,
+        action: { type: 'send', data: '\x1b\x1b' },
+      },
+
+      {
+        id: 'gemini-ide-context',
+        label: 'IDE Context',
+        subLabel: 'Ctrl+G',
+        col: 4,
+        row: ROW_A,
+        cols: 3,
+        action: { type: 'send', data: '\x07' },
+      },
+      {
+        id: 'gemini-todo-list',
+        label: 'TODO List',
+        subLabel: 'Ctrl+T',
+        col: 7,
+        row: ROW_A,
+        cols: 3,
+        action: { type: 'send', data: '\x14' },
+      },
+      {
+        id: 'gemini-change-mode',
+        label: 'Change Mode',
+        subLabel: 'Shift+Tab',
+        col: 10,
+        row: ROW_A,
+        cols: 3,
+        action: { type: 'send', data: '\x1b[Z' },
+      },
+
+      {
+        id: 'gemini-cancel',
+        label: 'Cancel',
+        subLabel: 'Ctrl+C',
+        col: 4,
+        row: ROW_BOTTOM,
+        cols: 3,
+        action: { type: 'send', data: '\x03' },
+      },
+      {
+        id: 'gemini-exit',
+        label: 'Exit Empty',
+        subLabel: 'Ctrl+D',
+        col: 7,
+        row: ROW_BOTTOM,
+        cols: 3,
+        action: { type: 'send', data: '\x04' },
+      },
     ],
   }
 }
 
 export function buildShortcutPages(platform: HostPlatform): ShortcutPage[] {
-  return [
-    systemPage(platform),
-    terminalPage(),
-    claudePage(),
-    codexPage(platform),
-    geminiPage(),
-  ]
+  return [systemPage(platform), terminalPage(), claudePage(), codexPage(platform), geminiPage()]
 }

package/src/shortcut-tab.ts

@@ -1,9 +1,22 @@
-import { LitElement, css, html } from 'lit'
-import { Application, CanvasTextMetrics, Container, FederatedPointerEvent, Graphics, Text, TextStyle } from 'pixi.js'
+import { css, html, LitElement } from 'lit'
 import { createElement, SquareSlash, SquareTerminal } from 'lucide'
-import { resolvePixiTheme, onThemeChange, type PixiTheme } from './pixi-theme.js'
-import { buildShortcutPages, type ShortcutAction, type ShortcutItem, type ShortcutPage } from './shortcut-pages.js'
+import {
+  Application,
+  CanvasTextMetrics,
+  Container,
+  FederatedPointerEvent,
+  Graphics,
+  Text,
+  TextStyle,
+} from 'pixi.js'
+import { onThemeChange, resolvePixiTheme, type PixiTheme } from './pixi-theme.js'
 import { detectHostPlatform, type PlatformMode } from './platform.js'
+import {
+  buildShortcutPages,
+  type ShortcutAction,
+  type ShortcutItem,
+  type ShortcutPage,
+} from './shortcut-pages.js'
 
 const GRID_GAP = 8
 const GRID_PADDING = 10
@@ -66,7 +79,10 @@ export class ShortcutTab extends LitElement {
       justify-content: center;
       padding: 0;
       cursor: pointer;
-      transition: border-color 0.15s, color 0.15s, background 0.15s;
+      transition:
+        border-color 0.15s,
+        color 0.15s,
+        background 0.15s;
     }
 
     .page-btn:hover {
@@ -247,9 +263,7 @@ export class ShortcutTab extends LitElement {
     gfx.clear()
     gfx.roundRect(0, 0, width, height, CARD_RADIUS)
     gfx.fill({
-      color: pressed
-        ? this._theme.keyPressed
-        : this._theme.keyNormal,
+      color: pressed ? this._theme.keyPressed : this._theme.keyNormal,
     })
     gfx.stroke({
       color: pressed ? this._theme.accent : this._theme.surfaceBorder,
@@ -409,7 +423,7 @@ export class ShortcutTab extends LitElement {
         detail: { data },
         bubbles: true,
         composed: true,
-      }),
+      })
     )
   }
 
@@ -443,7 +457,12 @@ export class ShortcutTab extends LitElement {
     document.execCommand('selectAll')
   }
 
-  private _dpadData(event: FederatedPointerEvent, width: number, height: number, container: Container): string {
+  private _dpadData(
+    event: FederatedPointerEvent,
+    width: number,
+    height: number,
+    container: Container
+  ): string {
     const local = container.toLocal(event.global)
     const dx = local.x - width / 2
     const dy = local.y - height / 2
@@ -463,7 +482,7 @@ export class ShortcutTab extends LitElement {
     event: FederatedPointerEvent,
     width: number,
     height: number,
-    container: Container,
+    container: Container
   ) {
     if (item.kind === 'dpad') {
       this._send(this._dpadData(event, width, height, container))
@@ -518,19 +537,21 @@ export class ShortcutTab extends LitElement {
     return html`
       <div class="layout">
         <div class="pages">
-          ${pages.map((page) => html`
-            <button
-              type="button"
-              class="page-btn"
-              title=${page.title}
-              aria-label=${page.title}
-              ?data-active=${page.id === activePage.id}
-              @click=${() => this._setActivePage(page.id)}
-            >
-              ${this._renderPageIcon(page.id)}
-              <span class="sr-only">${page.title}</span>
-            </button>
-          `)}
+          ${pages.map(
+            (page) => html`
+              <button
+                type="button"
+                class="page-btn"
+                title=${page.title}
+                aria-label=${page.title}
+                ?data-active=${page.id === activePage.id}
+                @click=${() => this._setActivePage(page.id)}
+              >
+                ${this._renderPageIcon(page.id)}
+                <span class="sr-only">${page.title}</span>
+              </button>
+            `
+          )}
         </div>
         <div class="canvas-wrap">
           <div class="pixi-host"></div>

package/src/virtual-keyboard-tab.stories.ts

@@ -153,17 +153,16 @@ export const KeyRepeatOnLongPress: StoryObj = {
     emitDown(key!.container)
 
     // Wait long enough for initial delay (400ms) + several repeats (80ms each)
-    // 400 + 80*3 = 640ms, wait 700ms to be safe
-    await new Promise((resolve) => setTimeout(resolve, 700))
+    // 400 + 80*3 = 640ms, add wider CI margin
+    await new Promise((resolve) => setTimeout(resolve, 850))
 
     emitUp(key!.container)
 
     await new Promise((resolve) => setTimeout(resolve, 50))
 
-    // 1 send from the final keyUp + at least 2 from the repeat interval
-    // Total should be > 2 (repeats happen at 80ms intervals after 400ms delay)
+    // 1 send from key up + at least 1 repeat event.
     const callCount = handler.mock.calls.length
-    expect(callCount).toBeGreaterThanOrEqual(3)
+    expect(callCount).toBeGreaterThanOrEqual(2)
 
     // All sends should have data 'a'
     for (const call of handler.mock.calls) {
@@ -252,8 +251,11 @@ export const PointerLeaveDuringRepeatKeepsRepeating: StoryObj = {
     el.addEventListener('input-panel:send', handler)
 
     emitDown(key!.container)
-    // Wait for repeat to start
-    await new Promise((resolve) => setTimeout(resolve, 550))
+    // Wait for repeat to start (polling is more stable than fixed sleeps in CI)
+    const repeatStart = Date.now()
+    while (handler.mock.calls.length === 0 && Date.now() - repeatStart < 1600) {
+      await new Promise((resolve) => setTimeout(resolve, 50))
+    }
 
     const countBefore = handler.mock.calls.length
     expect(countBefore).toBeGreaterThan(0) // At least one repeat fired
@@ -262,7 +264,7 @@ export const PointerLeaveDuringRepeatKeepsRepeating: StoryObj = {
     emitLeave(key!.container)
 
     // Wait — repeats should keep firing until release
-    await new Promise((resolve) => setTimeout(resolve, 300))
+    await new Promise((resolve) => setTimeout(resolve, 500))
 
     const countAfter = handler.mock.calls.length
     expect(countAfter).toBeGreaterThan(countBefore)