feat: redesign hp48 keypad and add keyboard navigation

samples/hp48/index.html

@@ -93,6 +93,18 @@
       display: grid;
       grid-template-columns: 26px 1fr;
       gap: 8px;
+      padding: 1px 4px;
+      border-radius: 4px;
+    }
+
+    .stack-line.selected {
+      background: rgba(27, 42, 18, 0.14);
+      outline: 1px dashed rgba(27, 42, 18, 0.45);
+    }
+
+    .stack-line.moving {
+      background: rgba(140, 255, 109, 0.18);
+      outline: 1px solid rgba(27, 42, 18, 0.55);
     }
 
     .stack-line .label {
@@ -100,6 +112,12 @@
       color: var(--screen-dim);
     }
 
+    .stack-line.selected .label,
+    .stack-line.moving .label {
+      color: var(--screen-text);
+      font-weight: bold;
+    }
+
     .hidden-input {
       position: absolute;
       left: -9999px;
@@ -129,6 +147,7 @@
     }
 
     .panel {
+      position: relative;
       margin-top: 14px;
       background: rgba(255, 255, 255, 0.04);
       border: 1px solid rgba(255, 255, 255, 0.08);
@@ -144,10 +163,66 @@
       letter-spacing: 0.08em;
     }
 
-    .buttons {
+    .keypad-labels {
+      display: grid;
+      grid-template-columns: 4fr 3fr 2fr;
+      gap: 12px;
+      margin-bottom: 10px;
+    }
+
+    .keypad-label {
+      color: #d8d8d8;
+      font-size: 11px;
+      font-weight: bold;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      text-align: center;
+      padding: 6px 8px;
+      border-radius: 999px;
+      background: rgba(255, 255, 255, 0.05);
+      border: 1px solid rgba(255, 255, 255, 0.08);
+    }
+
+    .keypad-wrap {
+      display: grid;
+      grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 2fr);
+      gap: 12px;
+      align-items: start;
+    }
+
+    .keypad-group {
       display: grid;
       gap: 8px;
-      grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
+    }
+
+    .keypad-group.functions {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+
+    .keypad-group.numbers {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    .keypad-group.operators {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .keypad-group button,
+    .keypad-group .keypad-spacer {
+      min-height: 46px;
+    }
+
+    .keypad-spacer {
+      min-height: 46px;
+    }
+
+    .keypad button.active-toggle {
+      background: linear-gradient(180deg, #6a8c52, #49693a);
+      color: #fff;
+    }
+
+    .keypad-group button.enter-tall {
+      grid-row: span 2;
     }
 
     button {
@@ -177,6 +252,30 @@
       background: rgba(255, 255, 255, 0.05);
     }
 
+    .constants-menu {
+      position: absolute;
+      top: 54px;
+      left: 14px;
+      z-index: 10;
+      display: grid;
+      gap: 6px;
+      min-width: 84px;
+      padding: 8px;
+      background: linear-gradient(180deg, #373737, #242424);
+      border: 1px solid rgba(255, 255, 255, 0.12);
+      border-radius: 12px;
+      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
+    }
+
+    .constants-menu[hidden] {
+      display: none;
+    }
+
+    .constants-menu button {
+      width: 100%;
+      min-height: 40px;
+    }
+
     .error {
       margin-top: 10px;
       min-height: 20px;
@@ -191,6 +290,57 @@
       font-size: 13px;
       line-height: 1.5;
     }
+
+    @media (max-width: 820px) {
+      .wrap {
+        padding: 16px;
+      }
+
+      .input-row {
+        grid-template-columns: 1fr;
+      }
+
+      .keypad-labels,
+      .keypad-wrap {
+        gap: 8px;
+      }
+
+      .keypad-group.functions {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+
+      .keypad-group.numbers,
+      .keypad-group.operators {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+    }
+
+    @media (max-width: 640px) {
+      .calc {
+        padding: 14px;
+        border-radius: 16px;
+      }
+
+      .brand {
+        flex-direction: column;
+        align-items: flex-start;
+      }
+
+      .keypad-labels,
+      .keypad-wrap {
+        grid-template-columns: 1fr;
+      }
+
+      .keypad-group.functions,
+      .keypad-group.numbers,
+      .keypad-group.operators {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+      }
+
+      .keypad-group.operators {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+    }
   </style>
 </head>
 <body>
@@ -213,7 +363,7 @@
       <input id="input" class="hidden-input" type="text" autocomplete="off" aria-hidden="true" tabindex="-1">
 
       <div class="input-row">
-        <div class="hint">Keyboard input is captured directly by the screen</div>
+        <div class="hint">Keyboard works globally: digits, numpad, Enter, Backspace, Delete, Esc, ↑, ↓, →, +, -, *, /, %, ^, q, n, r, i, g, l, s, c, S, C, x, y, z, t</div>
         <select id="angleMode">
           <option value="deg">Degrees</option>
           <option value="rad">Radians</option>
@@ -226,24 +376,22 @@
         <div class="pill">isEditing: <span id="editingLabel"></span></div>
       </div>
 
-      <div class="panel">
-        <div class="title">Stack</div>
-        <div class="buttons" id="stackButtons"></div>
-      </div>
-
-      <div class="panel">
-        <div class="title">Arithmetic</div>
-        <div class="buttons" id="arithButtons"></div>
-      </div>
-
-      <div class="panel">
-        <div class="title">Trigonometry</div>
-        <div class="buttons" id="trigButtons"></div>
-      </div>
-
-      <div class="panel">
-        <div class="title">Constants</div>
-        <div class="buttons" id="constButtons"></div>
+      <div class="panel" id="keypadPanel">
+        <div class="title">Calculator Keys</div>
+        <div class="keypad-labels" aria-hidden="true">
+          <div class="keypad-label">Functions</div>
+          <div class="keypad-label">Numbers</div>
+          <div class="keypad-label">Operators</div>
+        </div>
+        <div class="keypad-wrap">
+          <div class="keypad-group functions" id="functionsKeypad"></div>
+          <div class="keypad-group numbers" id="numbersKeypad"></div>
+          <div class="keypad-group operators" id="operatorsKeypad"></div>
+        </div>
+        <div id="constantsMenu" class="constants-menu" hidden>
+          <button type="button" data-const="pi">π</button>
+          <button type="button" data-const="e">e</button>
+        </div>
       </div>
 
       <div id="error" class="error"></div>
@@ -264,36 +412,352 @@
     const editingLabel = document.getElementById('editingLabel');
     const modeLabel = document.getElementById('modeLabel');
     const angleMode = document.getElementById('angleMode');
+    const functionsKeypadEl = document.getElementById('functionsKeypad');
+    const numbersKeypadEl = document.getElementById('numbersKeypad');
+    const operatorsKeypadEl = document.getElementById('operatorsKeypad');
+    const keypadPanelEl = document.getElementById('keypadPanel');
+    const constantsMenuEl = document.getElementById('constantsMenu');
 
-    const groups = {
-      stack: ['enter', 'dup', 'drop', 'swap', 'clear'],
-      arithmetic: ['add', 'sub', 'mul', 'div', 'mod', 'pow', 'sqr', 'neg', 'sqrt', 'recip', 'log', 'ln'],
-      trig: ['sin', 'cos', 'tan', 'asin', 'acos', 'atan'],
-      const: ['pi', 'e'],
-    };
+    let stackCursor = null;
+    let isConstantsMenuOpen = false;
+    let isMovingStackItem = false;
+    let stackSnapshotBeforeMove = null;
 
-    function labelFor(command) {
-      return ({ add: '+', sub: '−', mul: '×', div: '÷', pow: 'y^x', recip: '1/x', sqr: 'x²' }[command] || command);
+    function getKeypadLayout() {
+      return {
+        functions: [
+          [
+            { label: 'consts', type: 'special', value: 'toggleConstsMenu', active: isConstantsMenuOpen, menuAnchor: true },
+            null,
+            null,
+            null,
+          ],
+          [
+            { label: 'sqrt', type: 'command', value: 'sqrt' },
+            { label: 'y^x', type: 'command', value: 'pow' },
+            { label: 'x²', type: 'command', value: 'sqr' },
+            { label: '1/x', type: 'command', value: 'recip' },
+          ],
+          [
+            { label: 'log', type: 'command', value: 'log' },
+            { label: 'ln', type: 'command', value: 'ln' },
+            null,
+            { label: '%', type: 'command', value: 'mod' },
+          ],
+          [
+            { label: 'sin', type: 'command', value: 'sin' },
+            { label: 'cos', type: 'command', value: 'cos' },
+            { label: 'tan', type: 'command', value: 'tan' },
+            null,
+          ],
+          [
+            { label: 'asin', type: 'command', value: 'asin' },
+            { label: 'acos', type: 'command', value: 'acos' },
+            { label: 'atan', type: 'command', value: 'atan' },
+            null,
+          ],
+        ],
+        numbers: [
+          [null, null, null],
+          [
+            { label: '7', type: 'input', value: '7' },
+            { label: '8', type: 'input', value: '8' },
+            { label: '9', type: 'input', value: '9' },
+          ],
+          [
+            { label: '4', type: 'input', value: '4' },
+            { label: '5', type: 'input', value: '5' },
+            { label: '6', type: 'input', value: '6' },
+          ],
+          [
+            { label: '1', type: 'input', value: '1' },
+            { label: '2', type: 'input', value: '2' },
+            { label: '3', type: 'input', value: '3' },
+          ],
+          [
+            { label: '0', type: 'input', value: '0' },
+            { label: '.', type: 'input', value: '.' },
+            { label: '+/-', type: 'command', value: 'neg' },
+          ],
+        ],
+        operators: [
+          [
+            { label: 'del', type: 'special', value: 'clear' },
+            { label: 'esc', type: 'special', value: 'escape' },
+          ],
+          [
+            { label: '/', type: 'command', value: 'div' },
+            { label: 'backspace', type: 'special', value: 'backspace' },
+          ],
+          [
+            { label: '*', type: 'command', value: 'mul' },
+            null,
+          ],
+          [
+            { label: '-', type: 'command', value: 'sub' },
+            { label: 'Enter', type: 'command', value: 'enter', rowspan: 2 },
+          ],
+          [
+            { label: '+', type: 'command', value: 'add' },
+            null,
+          ],
+        ],
+      };
     }
 
-    function addButtons(container, commands) {
-      container.innerHTML = '';
-      commands.forEach((commandName) => {
-        const button = document.createElement('button');
-        button.textContent = labelFor(commandName);
-        button.addEventListener('click', () => execute(commandName));
-        container.appendChild(button);
+    function renderKeypadGroup(groupEl, layout) {
+      groupEl.innerHTML = '';
+      const occupied = new Set();
+
+      layout.forEach((row, rowIndex) => {
+        row.forEach((key, colIndex) => {
+          const cellId = `${rowIndex}-${colIndex}`;
+          if (occupied.has(cellId)) {
+            return;
+          }
+
+          if (!key) {
+            const spacer = document.createElement('div');
+            spacer.className = 'keypad-spacer';
+            spacer.style.gridColumn = String(colIndex + 1);
+            spacer.style.gridRow = String(rowIndex + 1);
+            groupEl.appendChild(spacer);
+            return;
+          }
+
+          const button = document.createElement('button');
+          button.textContent = key.label;
+          button.style.gridColumn = String(colIndex + 1);
+          button.style.gridRow = `${rowIndex + 1} / span ${key.rowspan || 1}`;
+          if (key.rowspan && key.rowspan > 1) {
+            button.classList.add('enter-tall');
+            for (let offset = 1; offset < key.rowspan; offset += 1) {
+              occupied.add(`${rowIndex + offset}-${colIndex}`);
+            }
+          }
+          if (key.active) {
+            button.classList.add('active-toggle');
+          }
+          if (key.menuAnchor) {
+            button.dataset.menuAnchor = 'constants';
+          }
+          button.addEventListener('click', (event) => handleKeypadAction(key, event));
+          groupEl.appendChild(button);
+        });
       });
     }
 
+    function renderKeypad() {
+      const layout = getKeypadLayout();
+      renderKeypadGroup(functionsKeypadEl, layout.functions);
+      renderKeypadGroup(numbersKeypadEl, layout.numbers);
+      renderKeypadGroup(operatorsKeypadEl, layout.operators);
+      if (isConstantsMenuOpen) {
+        positionConstantsMenu();
+      }
+    }
+
+    function openConstantsMenu(anchorEl) {
+      isConstantsMenuOpen = true;
+      constantsMenuEl.hidden = false;
+      if (anchorEl) {
+        const panelRect = keypadPanelEl.getBoundingClientRect();
+        const anchorRect = anchorEl.getBoundingClientRect();
+        constantsMenuEl.style.left = `${anchorRect.left - panelRect.left}px`;
+        constantsMenuEl.style.top = `${anchorRect.bottom - panelRect.top + 6}px`;
+      }
+    }
+
+    function closeConstantsMenu() {
+      isConstantsMenuOpen = false;
+      constantsMenuEl.hidden = true;
+    }
+
+    function positionConstantsMenu() {
+      const anchorEl = keypadPanelEl.querySelector('[data-menu-anchor="constants"]');
+      if (!anchorEl) {
+        return;
+      }
+      openConstantsMenu(anchorEl);
+    }
+
+    function toggleConstantsMenu(anchorEl) {
+      if (isConstantsMenuOpen) {
+        closeConstantsMenu();
+        return;
+      }
+      openConstantsMenu(anchorEl);
+    }
+
+    function runEscapeAction() {
+      if (isConstantsMenuOpen) {
+        closeConstantsMenu();
+        render();
+        return;
+      }
+      if (calc.isEditing) {
+        calc.inputValue = '';
+        calc.isEditing = false;
+        syncInputFromState();
+        render();
+        return;
+      }
+      if (isMovingStackItem) {
+        cancelMoveMode();
+        render();
+      }
+    }
+
+    function handleKeypadAction(key, event) {
+      try {
+        if (key.type === 'input') {
+          clearStackSelection();
+          editXWithKey(key.value);
+          render();
+          return;
+        }
+
+        if (key.type === 'special') {
+          if (key.value === 'toggleConstsMenu') {
+            toggleConstantsMenu(event?.currentTarget);
+            render();
+            return;
+          }
+          if (key.value === 'backspace') {
+            if (calc.isEditing) {
+              editXWithKey('Backspace');
+              render();
+            } else {
+              execute('drop');
+            }
+            return;
+          }
+          if (key.value === 'clear') {
+            execute('clear');
+            return;
+          }
+          if (key.value === 'escape') {
+            runEscapeAction();
+          }
+          return;
+        }
+
+        if (key.type === 'command') {
+          execute(key.value);
+        }
+      } catch (error) {
+        errorEl.textContent = error.message;
+      }
+    }
+
+    function getStackValue(index) {
+      return calc.isValidIndex(index) ? calc.stack[index] : undefined;
+    }
+
     function getLineValue(line) {
       if (calc.isEditing) {
         if (line === 0) {
           return calc.inputValue;
         }
-        return calc.stack[line - 1];
+        return getStackValue(line - 1);
       }
-      return calc.stack[line];
+      return getStackValue(line);
+    }
+
+    function hasStackSelection() {
+      return stackCursor !== null && calc.isValidIndex(stackCursor);
+    }
+
+    function clearStackSelection() {
+      stackCursor = null;
+      isMovingStackItem = false;
+      stackSnapshotBeforeMove = null;
+    }
+
+    function ensureValidSelection() {
+      if (hasStackSelection()) {
+        return;
+      }
+      stackCursor = calc.isValidIndex(0) ? 0 : null;
+    }
+
+    function beginMoveMode() {
+      if (!hasStackSelection()) {
+        return;
+      }
+      isMovingStackItem = true;
+      stackSnapshotBeforeMove = calc.stack.slice();
+    }
+
+    function commitMoveMode() {
+      isMovingStackItem = false;
+      stackSnapshotBeforeMove = null;
+    }
+
+    function cancelMoveMode() {
+      if (!isMovingStackItem || !stackSnapshotBeforeMove) {
+        return;
+      }
+
+      const snapshot = stackSnapshotBeforeMove.slice();
+      calc.clear();
+      for (let index = snapshot.length - 1; index >= 0; index -= 1) {
+        calc.push(snapshot[index]);
+      }
+
+      isMovingStackItem = false;
+      stackSnapshotBeforeMove = null;
+      stackCursor = calc.isValidIndex(stackCursor) ? stackCursor : (calc.isValidIndex(0) ? 0 : null);
+      syncInputFromState();
+    }
+
+    function reactivateEditOnX() {
+      clearStackSelection();
+      if (calc.isValidIndex(0)) {
+        const value = getStackValue(0);
+        calc.remove(0);
+        calc.inputValue = calc.formatNumber(value);
+        calc.isEditing = true;
+      } else {
+        calc.inputValue = '';
+        calc.isEditing = true;
+      }
+      syncInputFromState();
+    }
+
+    function moveStackSelection(direction) {
+      if (!hasStackSelection()) {
+        if (direction === 'up') {
+          ensureValidSelection();
+        } else {
+          reactivateEditOnX();
+        }
+        return;
+      }
+
+      const nextIndex = direction === 'up' ? stackCursor + 1 : stackCursor - 1;
+      if (calc.isValidIndex(nextIndex)) {
+        stackCursor = nextIndex;
+        return;
+      }
+
+      if (direction === 'down' && stackCursor === 0) {
+        reactivateEditOnX();
+      }
+    }
+
+    function moveStackItem(direction) {
+      if (!hasStackSelection()) {
+        return;
+      }
+
+      const targetIndex = direction === 'up' ? stackCursor + 1 : stackCursor - 1;
+      if (!calc.isValidIndex(targetIndex)) {
+        return;
+      }
+
+      calc.swap(stackCursor, targetIndex);
+      stackCursor = targetIndex;
     }
 
     function render() {
@@ -301,27 +765,37 @@
       const lines = [];
       for (let line = 3; line >= 0; line -= 1) {
         const value = getLineValue(line);
-        lines.push(`<div class="stack-line"><div class="label">${names[3 - line]}</div><div>${value !== undefined && value !== '' ? calc.formatNumber(value) : ''}</div></div>`);
+        const isSelected = stackCursor === line;
+        const classes = ['stack-line'];
+        if (isSelected) {
+          classes.push(isMovingStackItem ? 'moving' : 'selected');
+        }
+        lines.push(`<div class="${classes.join(' ')}"><div class="label">${names[3 - line]}</div><div>${value !== undefined && value !== '' ? calc.formatNumber(value) : ''}</div></div>`);
       }
 
       stackEl.innerHTML = lines.join('');
-      displayEl.textContent = calc.isEditing ? `ENTERING: ${calc.inputValue}` : 'READY';
+      if (calc.isEditing) {
+        displayEl.textContent = `ENTERING: ${calc.inputValue}`;
+      } else if (isMovingStackItem && hasStackSelection()) {
+        displayEl.textContent = `MOVING: ${['X', 'Y', 'Z', 'T'][stackCursor] || '?'}`;
+      } else if (hasStackSelection()) {
+        displayEl.textContent = `SELECTED: ${['X', 'Y', 'Z', 'T'][stackCursor] || '?'}`;
+      } else {
+        displayEl.textContent = 'READY';
+      }
       inputValueLabel.textContent = calc.inputValue || '∅';
       editingLabel.textContent = String(calc.isEditing);
       modeLabel.textContent = calc.angleMode;
       angleMode.value = calc.angleMode;
       errorEl.textContent = '';
+      renderKeypad();
     }
 
     function pushEditingValueIfNeeded() {
       if (!calc.isEditing) return;
       if (calc.inputValue !== '') {
         const value = calc.parseInputValue(calc.inputValue);
-        if (calc.stack.length >= calc.maxSize) {
-          throw new Error('Stack overflow');
-        }
-        calc.stack.unshift(value);
-        if (calc.stack.length > 4) calc.stack.length = 4;
+        calc.push(value);
       }
       calc.inputValue = '';
       calc.isEditing = false;
@@ -330,20 +804,31 @@
 
     function execute(name) {
       try {
-        if (name === 'swap') {
-          pushEditingValueIfNeeded();
-          if (calc.stack.length >= 2) calc.swap(0, 1);
-        } else if (name === 'drop') {
-          pushEditingValueIfNeeded();
-          if (calc.stack.length >= 1) calc.remove(0);
-        } else if (name === 'clear') {
-          calc.clear();
-        } else if (name === 'enter') {
+        if (name === 'enter') {
           if (calc.isEditing) {
             pushEditingValueIfNeeded();
+          } else if (calc.isValidIndex(0)) {
+            calc.push(getStackValue(0));
           }
+        } else if (name === 'swap') {
+          pushEditingValueIfNeeded();
+          clearStackSelection();
+          if (calc.isValidIndex(1)) calc.swap(0, 1);
+        } else if (name === 'drop') {
+          pushEditingValueIfNeeded();
+          if (hasStackSelection()) {
+            calc.remove(stackCursor);
+            stackCursor = calc.isValidIndex(stackCursor) ? stackCursor : (calc.isValidIndex(stackCursor - 1) ? stackCursor - 1 : null);
+          } else if (calc.isValidIndex(0)) {
+            calc.remove(0);
+          }
+          commitMoveMode();
+        } else if (name === 'clear') {
+          calc.clear();
+          clearStackSelection();
         } else {
           pushEditingValueIfNeeded();
+          clearStackSelection();
           calc.command(name);
         }
         syncInputFromState();
@@ -354,7 +839,85 @@
     }
 
     function isInputChar(key) {
-      return /^[0-9a-fA-F.+\-]$/.test(key);
+      return /^[0-9a-fA-F.]$/.test(key);
+    }
+
+    function shouldIgnoreKeyboardEvent(event) {
+      const target = event.target;
+      if (!target) return false;
+
+      const tagName = target.tagName;
+      return (
+        tagName === 'INPUT' ||
+        tagName === 'TEXTAREA' ||
+        tagName === 'SELECT' ||
+        target.isContentEditable
+      );
+    }
+
+    function getKeyboardAction(event) {
+      const numpadMap = {
+        Numpad0: { type: 'input', value: '0' },
+        Numpad1: { type: 'input', value: '1' },
+        Numpad2: { type: 'input', value: '2' },
+        Numpad3: { type: 'input', value: '3' },
+        Numpad4: { type: 'input', value: '4' },
+        Numpad5: { type: 'input', value: '5' },
+        Numpad6: { type: 'input', value: '6' },
+        Numpad7: { type: 'input', value: '7' },
+        Numpad8: { type: 'input', value: '8' },
+        Numpad9: { type: 'input', value: '9' },
+        NumpadDecimal: { type: 'input', value: '.' },
+        NumpadAdd: { type: 'command', value: 'add' },
+        NumpadSubtract: { type: 'command', value: 'sub' },
+        NumpadMultiply: { type: 'command', value: 'mul' },
+        NumpadDivide: { type: 'command', value: 'div' },
+        NumpadEnter: { type: 'command', value: 'enter' },
+      };
+
+      if (numpadMap[event.code]) {
+        return numpadMap[event.code];
+      }
+
+      if (isInputChar(event.key)) {
+        return { type: 'input', value: event.key };
+      }
+
+      const keyMap = {
+        Enter: { type: 'enterKey' },
+        Backspace: { type: 'stackOrEdit', value: 'drop' },
+        Delete: { type: 'command', value: 'clear' },
+        Escape: { type: 'escapeKey' },
+        ArrowUp: { type: 'stackArrow', value: 'up' },
+        ArrowDown: { type: 'stackArrow', value: 'down' },
+        ArrowRight: { type: 'command', value: 'swap' },
+        '+': { type: 'command', value: 'add' },
+        '-': { type: 'command', value: 'sub' },
+        '*': { type: 'command', value: 'mul' },
+        '/': { type: 'command', value: 'div' },
+        '%': { type: 'command', value: 'mod' },
+        '^': { type: 'command', value: 'pow' },
+        q: { type: 'command', value: 'sqr' },
+        n: { type: 'command', value: 'neg' },
+        r: { type: 'command', value: 'sqrt' },
+        i: { type: 'command', value: 'recip' },
+        g: { type: 'command', value: 'log' },
+        l: { type: 'command', value: 'ln' },
+        s: { type: 'command', value: 'sin' },
+        c: { type: 'command', value: 'cos' },
+        S: { type: 'command', value: 'asin' },
+        C: { type: 'command', value: 'acos' },
+        x: { type: 'stackSelect', value: 0 },
+        y: { type: 'stackSelect', value: 1 },
+        z: { type: 'stackSelect', value: 2 },
+        t: { type: 'stackSelect', value: 3 },
+        X: { type: 'stackSelect', value: 0 },
+        Y: { type: 'stackSelect', value: 1 },
+        Z: { type: 'stackSelect', value: 2 },
+        T: { type: 'stackSelect', value: 3 },
+      };
+
+      return keyMap[event.key] || null;
     }
 
     function focusScreen() {
@@ -382,46 +945,112 @@
       syncInputFromState();
     }
 
-    screen.addEventListener('keydown', (event) => {
+    function handleKeydown(event) {
+      if (shouldIgnoreKeyboardEvent(event)) {
+        return;
+      }
+
+      const action = getKeyboardAction(event);
+      if (!action) {
+        return;
+      }
+
       try {
-        if (event.key === 'Enter') {
+        if (action.type === 'escapeKey') {
           event.preventDefault();
-          execute('enter');
+          runEscapeAction();
           return;
         }
 
-        if (event.key === 'Backspace') {
-          event.preventDefault();
-          if (calc.isEditing) {
-            editXWithKey('Backspace');
-            render();
-          }
-          return;
-        }
+        event.preventDefault();
 
-        if (isInputChar(event.key)) {
-          event.preventDefault();
-          editXWithKey(event.key);
+        if (action.type === 'input') {
+          clearStackSelection();
+          editXWithKey(action.value);
           render();
           return;
         }
 
-        const keyMap = {
-          '+': 'add',
-          '-': 'sub',
-          '*': 'mul',
-          '/': 'div',
-          '%': 'mod',
-          '^': 'pow',
-        };
+        if (action.type === 'stackSelect') {
+          if (calc.isEditing || isMovingStackItem) {
+            return;
+          }
+          stackCursor = calc.isValidIndex(action.value) ? action.value : null;
+          render();
+          return;
+        }
 
-        if (keyMap[event.key]) {
-          event.preventDefault();
-          execute(keyMap[event.key]);
+        if (action.type === 'stackArrow') {
+          if (isMovingStackItem) {
+            moveStackItem(action.value);
+          } else {
+            moveStackSelection(action.value);
+          }
+          render();
+          return;
+        }
+
+        if (action.type === 'stackOrEdit') {
+          if (calc.isEditing) {
+            editXWithKey('Backspace');
+            render();
+          } else {
+            execute(action.value);
+          }
+          return;
+        }
+
+        if (action.type === 'enterKey') {
+          if (hasStackSelection()) {
+            if (isMovingStackItem) {
+              commitMoveMode();
+            } else {
+              beginMoveMode();
+            }
+            render();
+            return;
+          }
+          execute('enter');
+          return;
+        }
+
+        if (action.type === 'command') {
+          execute(action.value);
         }
       } catch (error) {
         errorEl.textContent = error.message;
       }
+    }
+
+    window.addEventListener('keydown', handleKeydown);
+
+    constantsMenuEl.addEventListener('click', (event) => {
+      const button = event.target.closest('[data-const]');
+      if (!button) {
+        return;
+      }
+      closeConstantsMenu();
+      execute(button.dataset.const);
+    });
+
+    document.addEventListener('click', (event) => {
+      if (!isConstantsMenuOpen) {
+        return;
+      }
+      if (constantsMenuEl.contains(event.target)) {
+        return;
+      }
+      if (event.target.closest('[data-menu-anchor="constants"]')) {
+        return;
+      }
+      closeConstantsMenu();
+      render();
+    });
+
+    window.addEventListener('resize', () => {
+      if (isConstantsMenuOpen) {
+        positionConstantsMenu();
+      }
     });
 
     screen.addEventListener('click', focusScreen);
@@ -432,11 +1061,6 @@
       render();
     });
 
-    addButtons(document.getElementById('stackButtons'), groups.stack);
-    addButtons(document.getElementById('arithButtons'), groups.arithmetic);
-    addButtons(document.getElementById('trigButtons'), groups.trig);
-    addButtons(document.getElementById('constButtons'), groups.const);
-
     render();
     focusScreen();
   </script>

samples/hp48/visual.txt

@@ -0,0 +1,7 @@
+┌───────────── Functions ────────────┬──── Numbers ────┬─── Operators ───┐
+| consts |        |      |           |   |   |         | del | esc       |
+| sqrt   | y^x    | x²   | 1/x       | 7 | 8 | 9       | /   | backspace |
+| log    | ln     |      | %         | 4 | 5 | 6       | *   |           |
+| sin    | cos    | tan  |           | 1 | 2 | 3       | -   | Enter     |
+| asin   | acos   | atan |           | 0 | . | +/-     | +   | Enter     |
+└────────────────────────────────────┴─────────────────┴─────────────────┘