feat: add stack selection and move controls to dev sample

samples/dev/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;
@@ -213,7 +231,7 @@
       <input id="input" class="hidden-input" type="text" autocomplete="off" aria-hidden="true" tabindex="-1">
 
       <div class="input-row">
-        <div class="hint">Keyboard works globally: digits, numpad, Enter, Backspace, Delete, →, +, -, *, /, %, ^, q, n, r, i, g, l, s, c, t, S, C, T</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>
@@ -272,6 +290,10 @@
       const: ['pi', 'e'],
     };
 
+    let stackCursor = null;
+    let isMovingStackItem = false;
+    let stackSnapshotBeforeMove = null;
+
     function labelFor(command) {
       return ({ add: '+', sub: '−', mul: '×', div: '÷', pow: 'y^x', recip: '1/x', sqr: 'x²' }[command] || command);
     }
@@ -300,16 +322,122 @@
       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)) {
+        calc.edit(0);
+      } 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) {
+        clearStackSelection();
+      }
+    }
+
+    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() {
       const names = ['T', 'Z', 'Y', 'X'];
       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;
@@ -338,14 +466,23 @@
           }
         } else if (name === 'swap') {
           pushEditingValueIfNeeded();
+          clearStackSelection();
           if (calc.isValidIndex(1)) calc.swap(0, 1);
         } else if (name === 'drop') {
           pushEditingValueIfNeeded();
-          if (calc.isValidIndex(0)) calc.remove(0);
+          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();
@@ -401,10 +538,12 @@
       }
 
       const keyMap = {
-        Enter: { type: 'command', value: 'enter' },
+        Enter: { type: 'enterKey' },
         Backspace: { type: 'stackOrEdit', value: 'drop' },
         Delete: { type: 'command', value: 'clear' },
-        Escape: { type: 'cancelEdit' },
+        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' },
@@ -420,10 +559,16 @@
         l: { type: 'command', value: 'ln' },
         s: { type: 'command', value: 'sin' },
         c: { type: 'command', value: 'cos' },
-        t: { type: 'command', value: 'tan' },
         S: { type: 'command', value: 'asin' },
         C: { type: 'command', value: 'acos' },
-        T: { type: 'command', value: 'atan' },
+        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;
@@ -465,10 +610,8 @@
       }
 
       try {
-        if (action.type === 'cancelEdit') {
+        if (action.type === 'escapeKey') {
-          if (!calc.isEditing) {
+          if (calc.isEditing) {
-            return;
-          }
             event.preventDefault();
             calc.inputValue = '';
             calc.isEditing = false;
@@ -476,15 +619,42 @@
             render();
             return;
           }
+          if (isMovingStackItem) {
+            event.preventDefault();
+            cancelMoveMode();
+            render();
+          }
+          return;
+        }
 
         event.preventDefault();
 
         if (action.type === 'input') {
+          clearStackSelection();
           editXWithKey(action.value);
           render();
           return;
         }
 
+        if (action.type === 'stackSelect') {
+          if (calc.isEditing || isMovingStackItem) {
+            return;
+          }
+          stackCursor = calc.isValidIndex(action.value) ? action.value : null;
+          render();
+          return;
+        }
+
+        if (action.type === 'stackArrow') {
+          if (isMovingStackItem) {
+            moveStackItem(action.value);
+          } else {
+            moveStackSelection(action.value);
+          }
+          render();
+          return;
+        }
+
         if (action.type === 'stackOrEdit') {
           if (calc.isEditing) {
             editXWithKey('Backspace');
@@ -495,6 +665,20 @@
           return;
         }
 
+        if (action.type === 'enterKey') {
+          if (hasStackSelection()) {
+            if (isMovingStackItem) {
+              commitMoveMode();
+            } else {
+              beginMoveMode();
+            }
+            render();
+            return;
+          }
+          execute('enter');
+          return;
+        }
+
         if (action.type === 'command') {
           execute(action.value);
         }