docs: remove obsolete temporary README file

Refactor the calc-02 demo to use a single popup menu component for angle mode and constants, align the menus to their trigger buttons, and update the README/project notes to reflect the portrait-first demo layout and constant API.

.continue/rules/project.md

@@ -1,20 +1,24 @@
 # Project rules — RPN Virtual Calculator
 
-- Build a browser-friendly RPN calculator as a JavaScript class, preferably in a single file.
+- Build a browser-friendly RPN calculator as a JavaScript class, currently implemented in `src/rpn-calculator.js`.
 - Keep code names, categories, and API identifiers in English.
-- Use only read-only / generic public API methods: `push`, `pop`, `clear`, `swap(index1, index2)`, `remove(index)`, `edit(index)`, `isValidIndex(index)`, `input(command)`, and `command(name, ...args)`.
+- Keep the public calculator API centered on the generic methods `push`, `pop`, `clear`, `swap(index1, index2)`, `remove(index)`, `edit(index)`, `isValidIndex(index)`, `input(command)`, and `command(name, ...args)`.
-- Expose `inputValue` as a string and `isEditing` as a boolean.
+- `inputValue` must remain a string and `isEditing` must remain a boolean.
-- Constructor options:
+- Keep constructor options aligned with the current engine:
   - `maxSize` (default `2048`)
-  - `base` (default `10`)
+  - `base` (default `10`, accepted range `2..16`)
-  - `angleMode` (`deg` default; also `rad` and `grad`)
+  - `angleMode` (`deg` by default; also `rad` and `grad`)
   - `enabledCommands`
-- Available constants: `pi`, `e`.
+- Available constants are `pi` and `e`.
-- Supported operations must be centralized in one dictionary containing at least:
+- Supported operations must stay centralized in one dictionary containing at least:
   - `argCount`
   - `category`
   - `aliases`
-- Allowed categories are limited to: `Stack`, `Arithmetic`, and `Trigonometry`.
+  - `execute`
+- Allowed operation categories are limited to `Stack`, `Arithmetic`, and `Trigonometry`.
+- The engine currently exposes static helpers for category discovery: `getOperationCategories()` and `getOperationsByCategory()`.
+- The instance currently exposes `getOperationsByCategory()` and `getConstants()` helpers in addition to the generic API.
+- Preserve browser and CommonJS exports for `RpnCalculator`.
 
 ## Supported commands
 
@@ -22,23 +26,70 @@
   - `add`, `sub`, `mul`, `div`, `mod`, `pow`, `sqr`, `neg`, `sqrt`, `recip`,
     `sin`, `cos`, `tan`, `asin`, `acos`, `atan`, `log`, `ln`,
     `dup`, `drop`, `swap`, `clear`, `enter`
-- Aliases:
+- Current aliases include:
   - `+`, `-`, `*`, `/`, `%`, `^`, `y^x`, `1/x`
+- Existing extra alias also present in code:
+  - `sqrt(x)` for `sqrt`
 
 ## Behavior rules
 
-- `mod` is the percentage operator: `a b % => (a * b) / 100`
+- `mod` is the percentage operator: `a b % => (a * b) / 100`.
-- `sqrt`, `asin`, `acos`, `log`, and `ln` must throw clear, explicit domain errors
+- `div` and `recip` must throw `Division by zero` on zero divisors.
-- `log` uses `Math.log10`
+- `sqrt`, `asin`, `acos`, `log`, and `ln` must throw explicit domain errors.
-- `ln` uses `Math.log`
+- `log` uses `Math.log10`.
-- Trigonometric functions use degrees in the demo:
+- `ln` uses `Math.log`.
-  - `sin`, `cos`, `tan` convert degrees to radians
+- Trigonometric functions must support `deg`, `rad`, and `grad`.
-  - inverse trig functions return degrees
+- Direct trigonometric functions convert input angles with `toRadians(...)`.
-- `inputValue` must remain a string to preserve future hexadecimal input support
+- Inverse trigonometric functions convert results back using the current angle mode via `toDegrees(...)`.
-- The example HTML must group buttons by `Stack`, `Arithmetic`, and `Trigonometry`
+- The engine rounds formatted numeric results to 12 decimal places and normalizes `-0` to `0`.
-- The example HTML must call `command(...)` for actions
+- `inputValue` must remain a string to preserve future hexadecimal-style input support.
+- `parseInputValue(...)` currently uses `Number(...)` in base 10 and `parseInt(..., base)` for other bases.
+- `input(command)` currently accepts single-character numeric editing input, including `0-9`, `A-F`, `a-f`, `+`, `-`, and `.`.
+- `command(name, ...args)` currently resolves aliases, supports constants, commits pending input before execution, checks `enabledCommands`, and throws clear `Unknown command`, `Command disabled`, `Stack overflow`, `Stack underflow`, `Invalid stack index`, `Invalid number`, and `Invalid input value` errors where appropriate.
+
+## Demo rules
+
+- The active browser demo lives under `samples/dev/`.
+- `samples/dev/index.html` is the demo entry page.
+- `samples/dev/index.css` contains the calculator visual theme.
+- `samples/dev/index.js` contains demo-side presentation helpers and UI logic.
+- The demo currently exposes:
+  - a stack display with four visible lines
+  - a main display/status area
+  - a visible angle mode indicator
+  - an angle mode selector for `deg`, `rad`, and `grad`
+  - status pills showing `inputValue` and `isEditing`
+  - grouped command panels for `Stack`, `Arithmetic`, `Trigonometry`, and `Constants`
+  - an error display area
+- The demo may present user-facing labels such as `+`, `−`, `×`, `÷`, `y^x`, `1/x`, and `x²` while still using English command identifiers internally.
+- The example HTML groups buttons by `Stack`, `Arithmetic`, and `Trigonometry`, plus a dedicated `Constants` section.
+- Demo buttons are wired through demo helpers that eventually call `command(...)` for calculator commands.
+- The demo default angle mode is degrees.
+- Keyboard support in the demo must remain consistent with the displayed help text.
+- The current demo keyboard behavior supports:
+  - digits and decimal point
+  - numpad digits and numpad arithmetic keys
+  - `Enter` to validate input or toggle stack-item move mode
+  - `Backspace` to edit input or drop from the stack
+  - `Delete` to clear
+  - `Escape` to cancel editing, cancel move mode, or clear selection
+  - `ArrowUp` / `ArrowDown` to navigate or move selected stack items
+  - `ArrowRight` for swap
+  - `+`, `-`, `*`, `/`, `%`, `^`
+  - `q`, `n`, `r`, `i`, `g`, `l`, `s`, `c`, `S`, `C`
+  - `x`, `y`, `z`, `t` to select visible stack registers
+- The demo currently implements stack selection and stack-item move mode in its own UI logic using the public stack methods.
+- The demo currently duplicates X on `enter` when not editing, matching classic RPN-style behavior in the UI layer.
+
+## File references
+
+- `samples/dev/index.html` references `../../src/rpn-calculator.js` as the calculator engine used by the demo.
+- Keep the demo aligned with the public calculator API exposed by `src/rpn-calculator.js`.
+- `README.md` is currently outdated and duplicated in places; if documentation work is done later, align it with the actual engine and demo behavior.
 
 ## Maintenance
 
+- Re-read `src/rpn-calculator.js` and `samples/dev/` before updating these rules after project changes.
 - Keep this file updated after each project change using the provided editing tools.
+- When changing the demo UI, keyboard help, exported API, command metadata, or calculator behavior, update these rules so they continue to match the current project behavior.
 

.memory/note.md

@@ -0,0 +1,3 @@
+- README is more detailed than memory files; keep memory compact.
+- Use `state.md` for evolving engine/demo/API details.
+- `project.md` should stay as a short pointer file.

.memory/project.md

@@ -0,0 +1,8 @@
+# State
+- Core engine: `src/rpn-calculator.js`
+- Reference demo: `samples/calc-02/` (portrait-first HP48GX layout, compact mode/constants popups; Const button comes before Mode in the display row)
+- Important UI behavior: mode button shows the current angle mode; keyboard focus stays on the hidden input on desktop; clipboard paste is supported
+- Public API: `push`, `pop`, `clear`, `swap`, `remove`, `edit`, `isValidIndex`, `input`, `command`, `getOperationsByCategory`, `getConstants`, `listConstants`, `setConstant`, `removeConstant`, `hasConstant`
+- Config: `maxSize`, `base`, `angleMode`, `enabledCommands`
+- Commands: arithmetic, stack, trigonometry, constants `pi` and `e`; arithmetic includes `root`; constants can be added or removed dynamically through the core API
+- Exports: browser `window.RpnCalculator`, CommonJS `module.exports`

.memory/state.md

@@ -0,0 +1,8 @@
+# State
+- Core engine: `src/rpn-calculator.js`
+- Default demo: `samples/dev/` classic browser demo; `samples/calc-02/` remains the portrait-first HP48GX-inspired reference
+- Public API: `push`, `pop`, `clear`, `swap`, `remove`, `edit`, `isValidIndex`, `input`, `command`, `getOperationsByCategory`, `getConstants`, `listConstants`, `setConstant`, `removeConstant`, `hasConstant`
+- Config: `maxSize`, `base`, `angleMode`, `enabledCommands`
+- Commands: arithmetic, stack, trigonometry, constants `pi`, `e`, `phi`, `g`, and `c`; arithmetic includes `root` with `y√x`, `yroot`, and `nroot` aliases; constants can be added or removed dynamically through the core API
+- Demo behavior: `samples/dev/` keeps hidden input focus on desktop and supports clipboard paste; `samples/calc-02/` uses compact mode/constants popups, a 4-column display-adjacent row, stack selection/move mode, and paste through the hidden input
+- Exports: browser `window.RpnCalculator`, CommonJS `module.exports`

.memory/todo.md

@@ -0,0 +1,4 @@
+- Keep `.memory/project.md` short.
+- Update `.memory/state.md` after project changes.
+- Reconcile README and demo docs if behavior changes.
+- Track future work around keyboard UX, stack selection, and command docs.

README.md

@@ -1,45 +1,289 @@
 # RPN Virtual Calculator
 
-A browser-friendly RPN calculator built around a small, generic JavaScript API.
+A browser-friendly RPN calculator built around a small JavaScript API.
 
-## Goal
+## Overview
 
-This project defines a reusable RPN calculator engine with:
+This project provides:
 
-- a simple stack-based public API
+- a reusable JavaScript RPN engine in `src/rpn-calculator.js`
-- configurable numeric and UI behavior
+- a classic browser demo in `samples/dev/`
-- centralized command metadata
+- a portrait-first HP48GX-inspired demo in `samples/calc-02/`
-- a browser demo that uses the same public API as any consumer code
+- a centralized command system with aliases
+- a compact public API focused on stack operations, editing, and command dispatch
 
-## Package contents
+The main class is `RpnCalculator`.
-- `rpn-calculator.js`: calculator engine
-- `rpn-example.html`: example browser interface
 
-## Main features
+## Project structure
-- Single JavaScript class
+
-- Configurable stack size (`maxSize`, default: `2048`)
+- `src/rpn-calculator.js`: calculator engine
-- Configurable numeric base (`base`, default: `10`)
+- `samples/dev/index.html`: browser demo entry point
-- Configurable angle mode (`angleMode`, default: `deg`)
+- `samples/dev/index.css`: demo styles
-- Optional command filtering through `enabledCommands`
+- `samples/dev/index.js`: demo UI and keyboard logic
-- Generic public API centered on:
+- `samples/calc-02/index.html`: portrait-first HP48GX-style demo entry point
-  - `push`
+- `samples/calc-02/index.css`: portrait-first demo styles
-  - `pop`
+- `samples/calc-02/index.js`: portrait-first HP48GX-style demo UI and keyboard logic
+- `samples/calc-XX/`: placeholder name for future demo variants
+
+## Public API
+
+The calculator API is centered on these methods:
+
+- `push(value)`
+- `pop()`
+- `clear()`
+- `swap(index1, index2)`
+- `remove(index)`
+- `edit(index)`
+- `isValidIndex(index)`
+- `input(command)`
+- `command(name, ...args)`
+
+Instance helpers also available:
+
+- `getOperationsByCategory()`
+- `getConstants()`
+- `listConstants()`
+- `setConstant(name, value)`
+- `removeConstant(name)`
+- `hasConstant(name)`
+
+Static helpers also available:
+
+- `RpnCalculator.getOperationCategories()`
+- `RpnCalculator.getOperationsByCategory()`
+
+State exposed on instances:
+
+- `inputValue` as a string
+- `isEditing` as a boolean
+- `stack` as the current internal stack array used by the demo
+- `angleMode`
+- `base`
+- `maxSize`
+
+## Constructor options
+
+```js README.md
+const calc = new RpnCalculator({
+	maxSize: 2048,
+	base: 10,
+	angleMode: 'deg',
+	enabledCommands: ['add', 'sub', 'mul', 'div']
+});
+```
+
+Supported options:
+
+- `maxSize`: maximum stack size, default `2048`
+- `base`: numeric base, default `10`, accepted range `2..16`
+- `angleMode`: `deg`, `rad`, or `grad`, default `deg`
+- `enabledCommands`: optional whitelist of enabled commands and aliases
+
+## Constants
+
+Available constants:
+
+- `pi`
+- `e`
+- `phi`
+- `g`
+- `c`
+- plus any user-defined constants added through the engine API
+
+They can be used through `command(...)`:
+
+```js README.md
+calc.command('pi');
+calc.command('e');
+```
+
+## Supported commands
+
+### Stack
+
+- `enter`
+- `dup`
+- `drop`
+- `swap`
 - `clear`
-  - `swap(index1, index2)`
+
-  - `remove(index)`
+### Arithmetic
-  - `edit(index)`
+
-  - `isValidIndex(index)`
+- `add` alias: `+`
-  - `input(command)`
+- `sub` alias: `-`
-  - `command(name, ...args)`
+- `mul` alias: `*`
-- `inputValue` is kept as a string to preserve future input formats
+- `div` alias: `/`
-- `isEditing` is exposed as a boolean state
+- `mod` alias: `%`
-- All supported commands are described in one centralized dictionary
+- `pow` aliases: `^`, `y^x`
-- Supported categories are limited to:
+- `root` aliases: `y√x`, `yroot`, `nroot`
-  - `Stack`
+- `sqr`
-  - `Arithmetic`
+- `neg`
-  - `Trigonometry`
+- `sqrt` alias: `sqrt(x)`
+- `recip` alias: `1/x`
+- `log`
+- `ln`
+
+### Trigonometry
+
+- `sin`
+- `cos`
+- `tan`
+- `asin`
+- `acos`
+- `atan`
+
+## Behavior notes
+
+- `mod` is a percentage operator:
+  - `a b % => (a * b) / 100`
+- `pow` accepts aliases `^` and `y^x`
+- `sqrt` accepts alias `sqrt(x)`
+- `recip` accepts alias `1/x`
+- `div` and `recip` throw `Division by zero` when needed
+- `root` computes the y-th root as `x^(1/y)` and throws `Invalid input for root` for invalid inputs
+- `sqrt` throws `Invalid input for sqrt` for negative values
+- `asin` and `acos` throw explicit domain errors outside `[-1, 1]`
+- `log` throws `Invalid input for log` for values `<= 0`
+- `ln` throws `Invalid input for ln` for values `<= 0`
+- `log` uses `Math.log10`
+- `ln` uses `Math.log`
+- direct trigonometric functions convert input using `toRadians(...)`
+- inverse trigonometric functions convert results back using the current angle mode
+- `angleMode` supports `deg`, `rad`, and `grad`
+- formatted numeric values are rounded to 12 decimal places
+- `-0` is normalized to `0`
+- `inputValue` remains a string to preserve future non-decimal input support
+- base 10 input is parsed with `Number(...)`
+- non-decimal input currently uses `parseInt(..., base)`
+
+## Input handling
+
+`input(command)` supports two modes:
+
+- single-character editing input
+- command dispatch
+
+Accepted single-character editing input currently includes:
+
+- `0-9`
+- `A-F`
+- `a-f`
+- `+`
+- `-`
+- `.`
+
+Everything else is forwarded to `command(...)`.
 
 ## Basic usage
 
-### In a browser
+### CommonJS
 
+```js README.md
+const RpnCalculator = require('./src/rpn-calculator');
+
+const calc = new RpnCalculator();
+calc.push(2);
+calc.push(3);
+calc.command('add');
+
+console.log(calc.pop()); // 5
+```
+
+### Browser
+
+```html README.md
+<script src="./src/rpn-calculator.js"></script>
+<script>
+	const calc = new RpnCalculator({ angleMode: 'deg' });
+	calc.push(9);
+	calc.command('sqrt');
+	console.log(calc.pop());
+</script>
+```
+
+### Editing values through `input(...)`
+
+```js README.md
+const calc = new RpnCalculator();
+
+calc.input('1');
+calc.input('2');
+calc.input('.');
+calc.input('5');
+calc.command('enter');
+
+console.log(calc.pop()); // 12.5
+```
+
+### Aliases
+
+```js README.md
+const calc = new RpnCalculator();
+calc.push(6);
+calc.push(7);
+calc.command('+');
+console.log(calc.pop()); // 13
+```
+
+### Constants and trigonometry
+
+```js README.md
+const calc = new RpnCalculator({ angleMode: 'deg' });
+calc.command('pi');
+console.log(calc.pop());
+
+calc.push(30);
+calc.command('sin');
+console.log(calc.pop()); // 0.5
+```
+
+## Demo
+
+The default demo lives in `samples/dev/`.
+
+Main UI features:
+
+- four visible stack lines
+- main display/status area
+- visible angle mode indicator
+- angle mode selector for `deg`, `rad`, and `grad`
+- status pills for `inputValue` and `isEditing`
+- grouped panels for `Stack`, `Arithmetic`, `Trigonometry`, and `Constants`
+- keyboard-friendly hidden input on desktop
+
+## Calc 02 demo
+
+`samples/calc-02/` is a portrait-first HP48GX-inspired demo.
+It keeps the display-adjacent button row aligned in four columns, uses compact popup menus for mode and constants, and supports clipboard paste plus the `y√x` root operation.
+
+The demo loads the engine from:
+
+```html README.md
+<script src="../../src/rpn-calculator.js"></script>
+```
+
+### Demo keyboard support
+
+The current demo supports:
+
+- digits and decimal point
+- numpad digits and numpad arithmetic keys
+- `Enter`
+- `Backspace`
+- `Delete`
+- `Escape`
+- `ArrowUp`, `ArrowDown`, `ArrowRight`
+- `+`, `-`, `*`, `/`, `%`, `^`
+- `q`, `n`, `r`, `i`, `g`, `l`, `s`, `c`, `S`, `C`
+- `x`, `y`, `z`, `t`
+
+The demo also implements stack selection and stack-item move mode in its UI layer using the public calculator methods.
+It keeps the calculator screen focused and updates the visible stack window as the selection moves.
+
+## Exports
+
+`RpnCalculator` is exposed in both environments:
+
+- browser: `window.RpnCalculator`
+- CommonJS: `module.exports = RpnCalculator`

_serve.sh

@@ -0,0 +1,19 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+PORT="${1:-3000}"
+ROOT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+
+cd "$ROOT_DIR"
+
+if command -v python3 >/dev/null 2>&1; then
+exec python3 -m http.server "$PORT" --directory "$ROOT_DIR"
+elif command -v python >/dev/null 2>&1; then
+	exec python -m SimpleHTTPServer "$PORT"
+elif command -v node >/dev/null 2>&1; then
+exec node -e "const http=require('http'); const fs=require('fs'); const path=require('path'); const root=process.argv[1]; const port=Number(process.argv[2]); const mime={'.html':'text/html','.js':'text/javascript','.css':'text/css','.json':'application/json','.png':'image/png','.jpg':'image/jpeg','.jpeg':'image/jpeg','.svg':'image/svg+xml','.ico':'image/x-icon'}; http.createServer((req,res)=>{let url=decodeURIComponent(req.url.split('?')[0]); if(url==='/' ) url='/'; let filePath=path.join(root,url); fs.stat(filePath,(err,stat)=>{if(!err&&stat.isDirectory()) filePath=path.join(filePath,'index.html'); fs.readFile(filePath,(err,data)=>{if(err){res.statusCode=404; return res.end('Not Found');} res.setHeader('Content-Type', mime[path.extname(filePath)]||'application/octet-stream'); res.end(data);});});}).listen(port,()=>console.log('Serving '+root+' on http://localhost:'+port));" "$ROOT_DIR" "$PORT"
+else
+echo "Error: python3, python, or node is required to serve the project root." >&2
+exit 1
+fi
+

samples/calc-01/index.css

@@ -0,0 +1,399 @@
+:root {
+  --body-top: #1d2430;
+  --body-bottom: #0c1017;
+  --shell-top: #4b5567;
+  --shell-bottom: #252d39;
+  --shell-edge: #141922;
+  --screen: #dce7b3;
+  --screen-top: #e8f0c3;
+  --screen-text: #1c2910;
+  --screen-dim: #60714a;
+  --key-text: #f4f7fb;
+  --key-fn-top: #677287;
+  --key-fn-bottom: #424b5d;
+  --key-num-top: #5d6470;
+  --key-num-bottom: #383f49;
+  --key-op-top: #4f6b95;
+  --key-op-bottom: #304661;
+  --key-danger-top: #7a5050;
+  --key-danger-bottom: #553636;
+  --key-soft-danger-top: #86605a;
+  --key-soft-danger-bottom: #61433e;
+  --key-cancel-top: #5f6b7c;
+  --key-cancel-bottom: #3f4857;
+  --key-enter-top: #7d9079;
+  --key-enter-bottom: #4d614b;
+  --border: #11151c;
+  --shadow: rgba(0, 0, 0, 0.35);
+}
+
+* { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  font-family: Arial, sans-serif;
+  background:
+    radial-gradient(circle at top, rgba(255, 255, 255, 0.08), transparent 30%),
+    linear-gradient(180deg, var(--body-top), var(--body-bottom));
+  color: #f3f6fb;
+}
+
+.wrap {
+  max-width: 760px;
+  margin: 0 auto;
+  padding: 28px 18px 40px;
+}
+
+.calc {
+  background: linear-gradient(180deg, var(--shell-top), var(--shell-bottom));
+  border: 1px solid var(--shell-edge);
+  border-radius: 28px;
+  padding: 18px;
+  box-shadow:
+    0 24px 60px var(--shadow),
+    inset 0 1px 0 rgba(255, 255, 255, 0.12),
+    inset 0 -2px 0 rgba(0, 0, 0, 0.28);
+}
+
+.screen {
+  background: linear-gradient(180deg, var(--screen-top), var(--screen));
+  color: var(--screen-text);
+  border: 3px solid #829366;
+  border-radius: 14px;
+  padding: 14px 16px;
+  min-height: 196px;
+  font-family: "Courier New", monospace;
+  display: grid;
+  grid-template-rows: auto auto 1fr;
+  gap: 10px;
+  box-shadow:
+    inset 0 2px 8px rgba(60, 80, 28, 0.18),
+    0 8px 16px rgba(0, 0, 0, 0.18);
+}
+
+.screen-top {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: 12px;
+  color: var(--screen-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.stack {
+  border-top: 1px solid rgba(28, 41, 16, 0.24);
+  padding-top: 10px;
+  line-height: 1.5;
+  font-size: 18px;
+  white-space: pre-wrap;
+}
+
+.stack-line {
+  display: grid;
+  grid-template-columns: 26px 1fr;
+  gap: 8px;
+  padding: 2px 4px;
+  border-radius: 4px;
+}
+
+.stack-line.selected {
+  background: rgba(28, 41, 16, 0.12);
+  outline: 1px dashed rgba(28, 41, 16, 0.4);
+}
+
+.stack-line.moving {
+  background: rgba(117, 160, 90, 0.2);
+  outline: 1px solid rgba(28, 41, 16, 0.5);
+}
+
+.stack-line .label {
+  text-align: right;
+  color: var(--screen-dim);
+}
+
+.stack-line.selected .label,
+.stack-line.moving .label {
+  color: var(--screen-text);
+  font-weight: bold;
+}
+
+#display {
+  font-size: 18px;
+  font-weight: bold;
+  letter-spacing: 0.04em;
+}
+
+.hidden-input {
+  position: absolute;
+  left: -9999px;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.topbar {
+  margin-top: 14px;
+  background: rgba(6, 10, 16, 0.18);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 16px;
+  padding: 6px;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
+}
+
+.topbar-group {
+  display: grid;
+  grid-template-columns: minmax(92px, 112px) minmax(92px, 112px) 1fr minmax(60px, 72px) minmax(60px, 72px) minmax(60px, 72px);
+  gap: 6px;
+  align-items: stretch;
+}
+
+.menu-cell {
+  position: relative;
+}
+
+.topbar-spacer {
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.04);
+}
+
+.menu-trigger {
+  width: 100%;
+  min-height: 26px;
+  padding: 4px 8px;
+  border-radius: 10px;
+  font-size: 12px;
+}
+
+.popup-menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 10px;
+  right: 10px;
+  z-index: 20;
+  display: grid;
+  gap: 8px;
+  padding: 10px;
+  border-radius: 14px;
+  background: rgba(18, 24, 34, 0.96);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.35);
+  overflow: hidden;
+}
+
+#modeMenu {
+  left: 0;
+  right: auto;
+  min-width: 100%;
+  margin-right: 0;
+}
+
+.popup-menu {
+  text-align: left;
+}
+
+.popup-menu button {
+  text-align: left;
+  justify-content: flex-start;
+}
+
+.popup-menu[hidden] {
+  display: none;
+}
+
+.popup-menu-compact {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.hidden-select {
+  position: absolute;
+  left: -9999px;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.action-cell {
+  display: flex;
+  align-items: stretch;
+}
+
+.action-cell > button {
+  width: 100%;
+  min-height: 26px;
+  padding: 4px 8px;
+  border-radius: 10px;
+  font-size: 12px;
+}
+
+select,
+button {
+  border-radius: 12px;
+  border: 1px solid var(--border);
+  font: inherit;
+}
+
+select {
+  padding: 10px 12px;
+  background: #edf1f7;
+  color: #111;
+}
+
+.keyboard-layout {
+  margin-top: 18px;
+  display: grid;
+  grid-template-columns: 4fr 3fr 2fr;
+  grid-template-areas: "functions numbers operators";
+  gap: 12px;
+}
+
+.key-group {
+  background: rgba(6, 10, 16, 0.18);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 18px;
+  padding: 12px;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
+}
+
+.key-group-functions {
+  grid-area: functions;
+}
+
+.key-group-numbers {
+  grid-area: numbers;
+}
+
+.key-group-operators {
+  grid-area: operators;
+}
+
+.key-grid {
+  display: grid;
+  gap: 10px;
+}
+
+.functions-grid {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-template-rows: repeat(4, 56px);
+}
+
+.numbers-grid {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-rows: repeat(4, 56px);
+}
+
+.operators-grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-rows: repeat(4, 56px);
+}
+
+.key-spacer {
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px dashed rgba(255, 255, 255, 0.04);
+}
+
+button {
+  padding: 10px 8px;
+  color: var(--key-text);
+  cursor: pointer;
+  font-weight: bold;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.12),
+    0 3px 0 rgba(0, 0, 0, 0.25);
+  transition: filter 120ms ease, transform 120ms ease;
+}
+
+button:hover { filter: brightness(1.08); }
+button:active {
+  transform: translateY(2px);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.08),
+    0 1px 0 rgba(0, 0, 0, 0.25);
+}
+
+.key-function {
+  background: linear-gradient(180deg, var(--key-fn-top), var(--key-fn-bottom));
+}
+
+.key-number {
+  background: linear-gradient(180deg, var(--key-num-top), var(--key-num-bottom));
+}
+
+.key-operator {
+  background: linear-gradient(180deg, var(--key-op-top), var(--key-op-bottom));
+}
+
+.key-danger {
+  background: linear-gradient(180deg, var(--key-danger-top), var(--key-danger-bottom));
+}
+
+.key-soft-danger {
+  background: linear-gradient(180deg, var(--key-soft-danger-top), var(--key-soft-danger-bottom));
+}
+
+.key-cancel {
+  background: linear-gradient(180deg, var(--key-cancel-top), var(--key-cancel-bottom));
+}
+
+.key-enter {
+  background: linear-gradient(180deg, var(--key-enter-top), var(--key-enter-bottom));
+  grid-row: span 2;
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+  letter-spacing: 0.08em;
+}
+
+
+.hint {
+  color: #cfd7e3;
+  margin-top: 10px;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+@media (max-width: 980px) {
+  .topbar-group {
+    grid-template-columns: minmax(92px, 112px) minmax(92px, 112px) 1fr minmax(60px, 72px) minmax(60px, 72px) minmax(60px, 72px);
+  }
+}
+
+@media (max-width: 860px) {
+  .keyboard-layout {
+    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
+    grid-template-areas:
+      "numbers operators"
+      "functions functions";
+  }
+}
+
+@media (max-width: 640px) {
+  .wrap {
+    padding: 14px;
+  }
+
+  .calc {
+    padding: 14px;
+    border-radius: 22px;
+  }
+
+  .topbar {
+    overflow-x: auto;
+  }
+
+  .topbar-group {
+    grid-template-columns: minmax(92px, 112px) minmax(92px, 112px) 1fr minmax(60px, 72px) minmax(60px, 72px) minmax(60px, 72px);
+    min-width: 520px;
+  }
+
+  .functions-grid,
+  .numbers-grid,
+  .operators-grid {
+    grid-template-rows: repeat(4, 52px);
+  }
+}
+

samples/calc-01/index.html

@@ -0,0 +1,68 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>HP48-style RPN Calculator</title>
+  <link rel="stylesheet" href="./index.css">
+</head>
+<body>
+  <div class="wrap">
+    <div class="calc">
+      <div class="screen" id="screen" tabindex="0" role="application" aria-label="HP48 style calculator screen">
+        <div class="screen-top">
+          <div>RPN stack</div>
+          <div id="modeLabel">deg</div>
+        </div>
+        <div id="stack" class="stack"></div>
+        <div id="display"></div>
+      </div>
+
+      <input id="input" class="hidden-input" type="text" autocomplete="off" aria-hidden="true" tabindex="-1">
+
+      <div class="topbar">
+        <div class="topbar-group">
+          <div class="menu-cell" id="modeMenuWrap">
+            <button type="button" class="menu-trigger key-function" id="modeMenuButton" aria-haspopup="true" aria-expanded="false">mode</button>
+            <div class="popup-menu" id="modeMenu" hidden></div>
+            <select id="angleMode" class="hidden-select" aria-hidden="true" tabindex="-1">
+              <option value="deg">Degrees</option>
+              <option value="rad">Radians</option>
+              <option value="grad">Grads</option>
+            </select>
+          </div>
+
+          <div class="menu-cell" id="constsMenuWrap">
+            <button type="button" class="menu-trigger key-function" id="constsMenuButton" aria-haspopup="true" aria-expanded="false">consts</button>
+            <div class="popup-menu popup-menu-compact" id="constsMenu" hidden></div>
+          </div>
+
+          <div class="topbar-spacer" aria-hidden="true"></div>
+
+          <div class="action-cell" id="deleteButton"></div>
+          <div class="action-cell" id="backspaceButton"></div>
+          <div class="action-cell" id="escapeButton"></div>
+        </div>
+      </div>
+
+      <div class="keyboard-layout">
+        <section class="key-group key-group-functions" aria-label="Functions">
+          <div class="key-grid functions-grid" id="functionsButtons"></div>
+        </section>
+
+        <section class="key-group key-group-numbers" aria-label="Numbers">
+          <div class="key-grid numbers-grid" id="numbersButtons"></div>
+        </section>
+
+        <section class="key-group key-group-operators" aria-label="Operators">
+          <div class="key-grid operators-grid" id="operatorsButtons"></div>
+        </section>
+      </div>
+
+    </div>
+  </div>
+
+  <script src="../../src/rpn-calculator.js"></script>
+  <script src="./index.js"></script>
+</body>
+</html>

samples/calc-01/index.js

@@ -0,0 +1,673 @@
+const calc = new RpnCalculator({ angleMode: 'deg' });
+const input = document.getElementById('input');
+const screen = document.getElementById('screen');
+const stackEl = document.getElementById('stack');
+
+const displayEl = document.getElementById('display');
+const modeLabel = document.getElementById('modeLabel');
+const angleMode = document.getElementById('angleMode');
+const modeMenuButton = document.getElementById('modeMenuButton');
+const modeMenu = document.getElementById('modeMenu');
+const constsMenuButton = document.getElementById('constsMenuButton');
+const constsMenu = document.getElementById('constsMenu');
+
+const keyLayouts = {
+  functions: [
+    [
+      { type: 'command', value: 'sqrt', label: '√x', className: 'key-function' },
+      { type: 'command', value: 'pow', label: 'yˣ', className: 'key-function' },
+      { type: 'command', value: 'sqr', label: 'x²', className: 'key-function' },
+      { type: 'command', value: 'recip', label: '1/x', className: 'key-function' },
+    ],
+    [
+      { type: 'command', value: 'log', label: 'log', className: 'key-function' },
+      { type: 'command', value: 'ln', label: 'ln', className: 'key-function' },
+      null,
+      { type: 'command', value: 'mod', label: '%', className: 'key-function' },
+    ],
+    [
+      { type: 'command', value: 'sin', label: 'sin', className: 'key-function' },
+      { type: 'command', value: 'cos', label: 'cos', className: 'key-function' },
+      { type: 'command', value: 'tan', label: 'tan', className: 'key-function' },
+      null,
+    ],
+    [
+      { type: 'command', value: 'asin', label: 'asin', className: 'key-function' },
+      { type: 'command', value: 'acos', label: 'acos', className: 'key-function' },
+      { type: 'command', value: 'atan', label: 'atan', className: 'key-function' },
+      null,
+    ],
+  ],
+  numbers: [
+    [
+      { type: 'input', value: '7', label: '7', className: 'key-number' },
+      { type: 'input', value: '8', label: '8', className: 'key-number' },
+      { type: 'input', value: '9', label: '9', className: 'key-number' },
+    ],
+    [
+      { type: 'input', value: '4', label: '4', className: 'key-number' },
+      { type: 'input', value: '5', label: '5', className: 'key-number' },
+      { type: 'input', value: '6', label: '6', className: 'key-number' },
+    ],
+    [
+      { type: 'input', value: '1', label: '1', className: 'key-number' },
+      { type: 'input', value: '2', label: '2', className: 'key-number' },
+      { type: 'input', value: '3', label: '3', className: 'key-number' },
+    ],
+    [
+      { type: 'input', value: '0', label: '0', className: 'key-number' },
+      { type: 'input', value: '.', label: '.', className: 'key-number' },
+      { type: 'command', value: 'neg', label: '±', className: 'key-number' },
+    ],
+  ],
+  operators: [
+    [
+      { type: 'command', value: 'div', label: '÷', className: 'key-operator' },
+      null,
+    ],
+    [
+      { type: 'command', value: 'mul', label: '×', className: 'key-operator' },
+      null,
+    ],
+    [
+      { type: 'command', value: 'sub', label: '−', className: 'key-operator' },
+      { type: 'command', value: 'enter', label: 'ENTER', className: 'key-enter' },
+    ],
+    [
+      { type: 'command', value: 'add', label: '+', className: 'key-operator' },
+      null,
+    ],
+  ],
+};
+
+const topButtons = {
+  consts: [
+    { type: 'command', value: 'pi', label: 'π', className: 'key-function' },
+    { type: 'command', value: 'e', label: 'e', className: 'key-function' },
+  ],
+  del: { type: 'command', value: 'clear', label: 'DEL', className: 'key-danger' },
+  backspace: { type: 'action', value: 'backspace', label: '⌫', className: 'key-soft-danger' },
+  escape: { type: 'action', value: 'escape', label: 'ESC', className: 'key-cancel' },
+};
+
+let stackCursor = null;
+let isMovingStackItem = false;
+let stackSnapshotBeforeMove = null;
+let stackViewOffset = 0;
+let editRestoreValue = null;
+let statusMessage = '';
+
+function handleEscapeAction() {
+  if (calc.isEditing) {
+    if (editRestoreValue !== null) {
+      calc.push(editRestoreValue);
+      editRestoreValue = null;
+    }
+    calc.inputValue = '';
+    calc.isEditing = false;
+    syncInputFromState();
+    render();
+    return;
+  }
+
+  if (isMovingStackItem) {
+    cancelMoveMode();
+    clearStackSelection();
+    render();
+    return;
+  }
+
+  if (hasStackSelection()) {
+    clearStackSelection();
+    render();
+  }
+}
+
+function pressKey(key) {
+  statusMessage = '';
+  clearStackSelection();
+  editXWithKey(key);
+  render();
+}
+
+function handleBackspaceAction() {
+  if (calc.isEditing) {
+    editXWithKey('Backspace');
+    render();
+    return;
+  }
+
+  execute('drop');
+}
+
+function closePopupMenus() {
+  modeMenu.hidden = true;
+  constsMenu.hidden = true;
+  modeMenuButton.setAttribute('aria-expanded', 'false');
+  constsMenuButton.setAttribute('aria-expanded', 'false');
+}
+
+function togglePopupMenu(menuName) {
+  const isModeMenu = menuName === 'mode';
+  const targetMenu = isModeMenu ? modeMenu : constsMenu;
+  const targetButton = isModeMenu ? modeMenuButton : constsMenuButton;
+  const otherMenu = isModeMenu ? constsMenu : modeMenu;
+  const otherButton = isModeMenu ? constsMenuButton : modeMenuButton;
+  const willOpen = targetMenu.hidden;
+
+  otherMenu.hidden = true;
+  otherButton.setAttribute('aria-expanded', 'false');
+
+  targetMenu.hidden = !willOpen;
+  targetButton.setAttribute('aria-expanded', String(willOpen));
+}
+
+function createButton(cell) {
+  if (!cell) {
+    const spacer = document.createElement('div');
+    spacer.className = 'key-spacer';
+    spacer.setAttribute('aria-hidden', 'true');
+    return spacer;
+  }
+
+  const button = document.createElement('button');
+  button.type = 'button';
+  button.textContent = cell.label;
+  button.className = cell.className;
+  button.addEventListener('click', () => {
+    focusScreen();
+    closePopupMenus();
+    if (cell.type === 'input') {
+      pressKey(cell.value);
+      return;
+    }
+    if (cell.type === 'action') {
+      if (cell.value === 'escape') {
+        handleEscapeAction();
+        return;
+      }
+      if (cell.value === 'backspace') {
+        handleBackspaceAction();
+        return;
+      }
+      if (cell.value === 'setModeDeg' || cell.value === 'setModeRad' || cell.value === 'setModeGrad') {
+        angleMode.value = cell.value === 'setModeDeg' ? 'deg' : (cell.value === 'setModeRad' ? 'rad' : 'grad');
+        angleMode.dispatchEvent(new Event('change'));
+        return;
+      }
+    }
+    execute(cell.value);
+  });
+  return button;
+}
+
+function renderKeyLayout(container, rows) {
+  container.innerHTML = '';
+  rows.flat().forEach((cell) => {
+    container.appendChild(createButton(cell));
+  });
+}
+
+function getStackValue(index) {
+  return calc.isValidIndex(index) ? calc.stack[index] : undefined;
+}
+
+function getDisplayValue(index) {
+  if (calc.isEditing) {
+    if (index === 0) {
+      return calc.inputValue;
+    }
+    return getStackValue(index - 1);
+  }
+  return getStackValue(index);
+}
+
+function hasStackSelection() {
+  return stackCursor !== null && calc.isValidIndex(stackCursor);
+}
+
+function clearStackSelection() {
+  stackCursor = null;
+  isMovingStackItem = false;
+  stackSnapshotBeforeMove = null;
+  stackViewOffset = 0;
+}
+
+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;
+    editRestoreValue = value;
+  } else {
+    calc.inputValue = '';
+    calc.isEditing = true;
+    editRestoreValue = null;
+  }
+  syncInputFromState();
+}
+
+function moveStackSelection(direction) {
+  if (!hasStackSelection()) {
+    if (direction === 'up') {
+      ensureValidSelection();
+    } else if (direction === 'down') {
+      reactivateEditOnX();
+    }
+    return;
+  }
+
+  const nextIndex = direction === 'up' ? stackCursor + 1 : stackCursor - 1;
+  if (calc.isValidIndex(nextIndex)) {
+    stackCursor = nextIndex;
+  }
+}
+
+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 getVisibleStackIndex(visualLine) {
+  return stackViewOffset + visualLine;
+}
+
+function clampStackViewOffset() {
+  const maxOffset = Math.max(0, calc.stack.length - 4);
+  if (stackViewOffset < 0) {
+    stackViewOffset = 0;
+  } else if (stackViewOffset > maxOffset) {
+    stackViewOffset = maxOffset;
+  }
+}
+
+function ensureSelectionVisible() {
+  if (!hasStackSelection()) {
+    stackViewOffset = 0;
+    return;
+  }
+
+  if (stackCursor < stackViewOffset) {
+    stackViewOffset = stackCursor;
+  } else if (stackCursor > stackViewOffset + 3) {
+    stackViewOffset = stackCursor - 3;
+  }
+
+  clampStackViewOffset();
+}
+
+function render() {
+  const names = ['T', 'Z', 'Y', 'X'];
+  const lines = [];
+  const showStackIndexes = hasStackSelection() || isMovingStackItem;
+
+  clampStackViewOffset();
+  ensureSelectionVisible();
+
+  for (let visualLine = 3; visualLine >= 0; visualLine -= 1) {
+    const stackIndex = getVisibleStackIndex(visualLine);
+    const value = getDisplayValue(stackIndex);
+    const isSelected = stackCursor === stackIndex;
+    const classes = ['stack-line'];
+    const label = showStackIndexes ? String(stackIndex) : names[3 - visualLine];
+
+    if (isSelected) {
+      classes.push(isMovingStackItem ? 'moving' : 'selected');
+    }
+
+    lines.push(`<div class="${classes.join(' ')}"><div class="label">${label}</div><div>${value !== undefined && value !== '' ? calc.formatNumber(value) : ''}</div></div>`);
+  }
+
+  stackEl.innerHTML = lines.join('');
+  if (calc.isEditing) {
+    displayEl.textContent = `ENTERING: ${calc.inputValue}`;
+  } else if (isMovingStackItem && hasStackSelection()) {
+    displayEl.textContent = `MOVING: ${stackCursor}`;
+  } else if (hasStackSelection()) {
+    displayEl.textContent = `SELECTED: ${stackCursor}`;
+  } else if (statusMessage) {
+    displayEl.textContent = statusMessage;
+  } else {
+    displayEl.textContent = 'READY';
+  }
+  modeLabel.textContent = calc.angleMode;
+  modeMenuButton.textContent = calc.angleMode.toUpperCase();
+  angleMode.value = calc.angleMode;
+}
+
+function pushEditingValueIfNeeded() {
+  if (!calc.isEditing) return;
+  if (calc.inputValue !== '') {
+    const value = calc.parseInputValue(calc.inputValue);
+    calc.push(value);
+  }
+  calc.inputValue = '';
+  calc.isEditing = false;
+  editRestoreValue = null;
+  syncInputFromState();
+}
+
+function execute(name) {
+  try {
+    statusMessage = '';
+    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();
+    render();
+  } catch (error) {
+    statusMessage = error.message;
+    render();
+  }
+}
+
+function isInputChar(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() {
+  screen.focus();
+}
+
+function syncInputFromState() {
+  input.value = calc.inputValue;
+}
+
+function editXWithKey(key) {
+  if (!calc.isEditing) {
+    pushEditingValueIfNeeded();
+    calc.isEditing = true;
+    calc.inputValue = '';
+    editRestoreValue = null;
+  }
+  if (key === 'Backspace') {
+    calc.inputValue = calc.inputValue.slice(0, -1);
+  } else {
+    calc.inputValue += key;
+  }
+  if (calc.inputValue === '') {
+    calc.isEditing = false;
+    editRestoreValue = null;
+  }
+  syncInputFromState();
+}
+
+function handleKeydown(event) {
+  if (shouldIgnoreKeyboardEvent(event)) {
+    return;
+  }
+
+  const action = getKeyboardAction(event);
+  if (!action) {
+    return;
+  }
+
+  try {
+    statusMessage = '';
+    if (action.type === 'escapeKey') {
+      event.preventDefault();
+      handleEscapeAction();
+      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 (calc.isEditing) {
+        render();
+        return;
+      }
+
+      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) {
+    statusMessage = error.message;
+    render();
+  }
+}
+
+window.addEventListener('keydown', handleKeydown);
+
+screen.addEventListener('click', () => {
+  closePopupMenus();
+  focusScreen();
+});
+window.addEventListener('load', focusScreen);
+
+document.addEventListener('click', (event) => {
+  if (!event.target.closest('#modeMenuWrap') && !event.target.closest('#constsMenuWrap')) {
+    closePopupMenus();
+  }
+});
+
+modeMenuButton.addEventListener('click', (event) => {
+  event.stopPropagation();
+  togglePopupMenu('mode');
+});
+
+constsMenuButton.addEventListener('click', (event) => {
+  event.stopPropagation();
+  togglePopupMenu('consts');
+});
+
+angleMode.addEventListener('change', (event) => {
+  calc.angleMode = event.target.value;
+  closePopupMenus();
+  render();
+});
+
+renderKeyLayout(document.getElementById('functionsButtons'), keyLayouts.functions);
+renderKeyLayout(document.getElementById('numbersButtons'), keyLayouts.numbers);
+renderKeyLayout(document.getElementById('operatorsButtons'), keyLayouts.operators);
+renderKeyLayout(modeMenu, [[
+  { type: 'action', value: 'setModeDeg', label: 'Degrees', className: 'key-function' },
+  { type: 'action', value: 'setModeRad', label: 'Radians', className: 'key-function' },
+  { type: 'action', value: 'setModeGrad', label: 'Grads', className: 'key-function' },
+]]);
+renderKeyLayout(constsMenu, [topButtons.consts]);
+document.getElementById('deleteButton').appendChild(createButton(topButtons.del));
+document.getElementById('backspaceButton').appendChild(createButton(topButtons.backspace));
+document.getElementById('escapeButton').appendChild(createButton(topButtons.escape));
+
+render();
+focusScreen();

samples/calc-01/visual-vert.txt

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

samples/calc-01/visual.txt

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

samples/calc-02/index.css

@@ -0,0 +1,426 @@
+
+:root {
+	--bg0: #10151e;
+	--bg1: #1b2432;
+	--panel: #2c3442;
+	--panel2: #394354;
+	--edge: #0c1118;
+	--display: #cfe0ae;
+	--display2: #b9cd8a;
+	--displayText: #1f2a12;
+	--buttonText: #f4f7fb;
+	--shadow: rgba(0, 0, 0, 0.35);
+	--btnTop: #444c58;
+	--btnBottom: #2f3640;
+	--btnAccentTop: #3f526b;
+	--btnAccentBottom: #2b394c;
+	--btnAltTop: #525c69;
+	--btnAltBottom: #3a434f;
+	--btnDangerTop: #584042;
+	--btnDangerBottom: #402d2f;
+	--btnEscapeTop: #6a4a2a;
+	--btnEscapeBottom: #4a331d;
+	--btnEnterTop: #4f7f4d;
+	--btnEnterBottom: #355a34;
+	--btnText: #eef2f7;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+html, body {
+	margin: 0;
+	min-height: 100%;
+}
+
+body {
+	min-height: 100vh;
+	font-family: Arial, sans-serif;
+	color: var(--buttonText);
+	background: var(--bg0);
+}
+
+.app-shell {
+	min-height: 100vh;
+	display: grid;
+	align-items: start;
+	justify-items: center;
+	padding: 0;
+}
+
+.calculator {
+	width: 100%;
+	height: auto;
+	display: grid;
+	padding: 8px;
+	border-radius: 8px;
+	background: var(--panel);
+	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
+	grid-template-columns: 1fr;
+	grid-template-rows: auto auto auto auto auto;
+	row-gap: 6px;
+	grid-template-areas:
+		"display"
+		"display-buttons"
+		"keypad"
+		"functions"
+		"trigo";
+}
+
+.display-block,
+.display-panel,
+.keypad-panel,
+.functions-panel,
+.trigo-panel {
+	border-radius: 8px;
+	border: 1px solid rgba(255, 255, 255, 0.06);
+	background: rgba(6, 10, 16, 0.16);
+	box-shadow: none;
+}
+
+.display-buttons-panel {
+	border-radius: 8px;
+	border: 1px solid rgba(255, 255, 255, 0.06);
+	background: rgba(6, 10, 16, 0.16);
+	box-shadow: none;
+}
+
+.display-block {
+	grid-area: display;
+	display: grid;
+	gap: 0;
+	align-self: start;
+	justify-items: stretch;
+	grid-template-rows: auto auto;
+	row-gap: 0;
+}
+
+.display-panel {
+	position: relative;
+	width: 100%;
+	padding: 16px;
+	padding-bottom: 8px;
+	background: var(--display);
+	color: var(--displayText);
+	font-family: "Courier New", monospace;
+	overflow: hidden;
+	box-sizing: border-box;
+	height: 138px;
+	min-height: 138px;
+	max-height: 138px;
+	margin-bottom: 0;
+}
+.display-grid {
+	height: 100%;
+	display: grid;
+	grid-template-columns: 1fr;
+	grid-template-rows: repeat(4, minmax(0, auto));
+	align-content: start;
+	gap: 2px;
+}
+
+.stack-cell {
+	display: grid;
+	grid-template-columns: 2.2ch auto minmax(0, 1fr);
+	align-items: center;
+	gap: 8px;
+	font-size: 20px;
+	line-height: 1;
+	min-height: 0;
+	padding-block: 0;
+}
+
+.stack-label {
+	text-align: right;
+	opacity: 0.78;
+}
+
+.stack-value {
+	min-height: 0;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	text-align: right;
+	justify-self: end;
+	font-size: 20px;
+}
+.display-buttons-panel {
+	grid-area: display-buttons;
+	padding: 8px;
+	align-self: start;
+	min-height: 0;
+}
+
+.display-buttons-grid {
+	display: grid;
+	grid-template-columns: repeat(4, minmax(0, 1fr));
+	gap: 8px;
+	align-content: start;
+	align-items: stretch;
+}
+
+.display-button-spacer {
+	pointer-events: none;
+	visibility: hidden;
+	background: transparent;
+	border-color: transparent;
+	box-shadow: none;
+}
+
+.display-button {
+	background: linear-gradient(180deg, var(--btnTop), var(--btnBottom));
+	color: #eef2f7;
+	box-shadow: none;
+}
+
+.display-button-symbol {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	min-width: 1.2em;
+	font-size: 1.05em;
+	line-height: 1;
+	font-weight: 800;
+	transform: translateY(-0.01em);
+}
+
+.paste-symbol {
+	font-size: 1em;
+}
+
+.display-buttons-grid > button {
+	padding: 6px 8px;
+}
+
+.menu-popup {
+	position: fixed;
+	z-index: 20;
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	padding: 6px;
+	border-radius: 6px;
+	background: rgba(16, 21, 30, 0.96);
+	border: 1px solid rgba(255, 255, 255, 0.12);
+	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32);
+	backdrop-filter: blur(2px);
+}
+
+.menu-popup-item {
+	width: 100%;
+	min-width: 0;
+	padding: 6px 10px;
+	border-radius: 5px;
+	background: linear-gradient(180deg, var(--btnAltTop), var(--btnAltBottom));
+	text-align: left;
+	font-weight: 700;
+}
+
+.menu-popup-item.is-active {
+	outline: 1px solid rgba(207, 224, 174, 0.7);
+	outline-offset: 0;
+}
+
+.key-escape {
+	background: linear-gradient(180deg, var(--btnEscapeTop), var(--btnEscapeBottom));
+	color: #eef2f7;
+}
+
+.keypad-panel,
+.functions-panel,
+.trigo-panel {
+	padding: 8px;
+	align-self: start;
+	min-height: 0;
+}
+
+.status-bar {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	z-index: 2;
+	padding: 8px 12px;
+	min-height: 30px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 13px;
+	font-weight: 700;
+	letter-spacing: 0.02em;
+	color: rgba(31, 42, 18, 0.96);
+	background: rgba(255, 246, 170, 0.92);
+	border-bottom: 1px solid rgba(31, 42, 18, 0.2);
+	transform: translateY(-100%);
+	opacity: 0;
+	transition: transform 180ms ease, opacity 180ms ease;
+	pointer-events: none;
+}
+
+.status-bar.is-visible {
+	transform: translateY(0);
+	opacity: 1;
+}
+
+.status-bar.is-error {
+	color: #fff;
+	background: rgba(72, 14, 14, 0.98);
+	border-bottom-color: rgba(255, 255, 255, 0.12);
+}
+
+.keypad-grid,
+.functions-grid,
+.trigo-grid {
+	display: grid;
+	gap: 8px;
+}
+
+.keypad-grid {
+	grid-template-columns: repeat(4, minmax(0, 1fr));
+	grid-template-rows: repeat(5, minmax(0, 1.7fr));
+}
+
+.functions-grid,
+.trigo-grid {
+	grid-template-columns: repeat(4, minmax(0, 1fr));
+	grid-template-rows: repeat(2, minmax(0, 1fr));
+}
+
+button {
+	border: 1px solid rgba(14, 18, 25, 0.85);
+	border-radius: 8px;
+	padding: 8px 8px;
+
+	font: inherit;
+	font-weight: 700;
+	color: var(--btnText);
+	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
+	cursor: pointer;
+	box-shadow: none;
+	transition: filter 120ms ease, opacity 120ms ease;
+	line-height: 1;
+}
+
+button:hover {
+	filter: brightness(1.06);
+}
+
+button:active {
+	transform: none;
+	box-shadow: none;
+}
+
+.stack-copy-button:active {
+	animation: stack-copy-flash 140ms ease-out;
+}
+
+@keyframes stack-copy-flash {
+	0% {
+		opacity: 0.7;
+	}
+	50% {
+		opacity: 1;
+	}
+	100% {
+		opacity: 0.7;
+	}
+}
+.stack-copy-button {
+	padding: 4px;
+	min-width: 24px;
+	width: 24px;
+	height: 24px;
+	display: inline-grid;
+	place-items: center;
+	opacity: 0;
+	pointer-events: none;
+	transform: scale(1);
+	background: transparent;
+	border: none;
+	box-shadow: none;
+	color: rgba(31, 42, 18, 0.58);
+	margin-left: 0;
+}
+
+.stack-cell:last-child {
+	margin-bottom: 4px;
+}
+
+.stack-copy-button svg {
+	width: 15px;
+	height: 15px;
+	fill: #0a0a0a;
+	display: block;
+}
+
+.stack-copy-button.is-visible {
+	opacity: 0.7;
+	pointer-events: auto;
+	transform: scale(1);
+}
+
+.stack-copy-button:hover {
+	opacity: 1;
+	filter: none;
+	color: rgba(31, 42, 18, 0.85);
+}
+
+.stack-copy-button:active {
+	transform: scale(1);
+	color: rgba(31, 42, 18, 0.95);
+}
+
+.stack-copy-button:focus-visible {
+	outline: 1px solid rgba(31, 42, 18, 0.35);
+	outline-offset: 2px;
+}
+
+.key-default {
+	background: linear-gradient(180deg, var(--btnTop), var(--btnBottom));
+	color: #eef2f7;
+}
+
+.keypad-grid > button {
+	min-height: 1.7em;
+}
+
+#keypadGrid > button {
+	min-height: calc(1.7em * 1.7);
+	padding-top: calc(8px * 1.7);
+	padding-bottom: calc(8px * 1.7);
+}
+
+#keypadGrid > button.key-default,
+#keypadGrid > button.key-accent,
+#keypadGrid > button.key-danger,
+#keypadGrid > button.key-enter {
+	min-height: calc(1.7em * 1.7);
+}
+
+.key-accent {
+	background: linear-gradient(180deg, var(--btnAccentTop), var(--btnAccentBottom));
+	color: #eef2f7;
+}
+
+.key-danger {
+	background: linear-gradient(180deg, var(--btnDangerTop), var(--btnDangerBottom));
+	color: #eef2f7;
+}
+
+.key-enter {
+	background: linear-gradient(180deg, var(--btnEnterTop), var(--btnEnterBottom));
+	color: #eef2f7;
+	padding-inline: 6px;
+}
+
+.hidden-input {
+	position: absolute;
+	left: -9999px;
+	width: 1px;
+	height: 1px;
+	opacity: 0;
+	pointer-events: none;
+}
+
+

samples/calc-02/index.html

@@ -0,0 +1,58 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>HP48GX RPN Calculator</title>
+	<link rel="stylesheet" href="./index.css">
+</head>
+<body>
+	<main class="app-shell">
+		<section class="calculator calculator-portrait" aria-label="HP48GX style RPN calculator">
+			<div class="display-block">
+				<div class="display-panel">
+					<div class="status-bar" id="statusLine" aria-live="polite"></div>
+					<div class="display-frame">
+						<div class="display-grid">
+							<div class="stack-cell"><span class="stack-label">T:</span><button type="button" class="stack-copy-button" data-copy-stack="T" aria-label="Copy T value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15.5 4h-7A2.5 2.5 0 0 0 6 6.5V8H5.5A1.5 1.5 0 0 0 4 9.5v8A2.5 2.5 0 0 0 6.5 20H13a1 1 0 0 0 1-1v-1.5H17.5A2.5 2.5 0 0 0 20 15V6.5A2.5 2.5 0 0 0 17.5 4h-2Zm.5 2h1.5a.5.5 0 0 1 .5.5V14a.5.5 0 0 1-.5.5H13V6.5A2.5 2.5 0 0 0 15.5 6Zm-1.5 12H6.5a.5.5 0 0 1-.5-.5v-8a.5.5 0 0 1 .5-.5h7.5V18Zm-1.5-8h-4V8.5A.5.5 0 0 1 9 8h4a.5.5 0 0 1 .5.5V10Z"/></svg></button><span id="stackT" class="stack-value"></span></div>
+							<div class="stack-cell"><span class="stack-label">Z:</span><button type="button" class="stack-copy-button" data-copy-stack="Z" aria-label="Copy Z value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15.5 4h-7A2.5 2.5 0 0 0 6 6.5V8H5.5A1.5 1.5 0 0 0 4 9.5v8A2.5 2.5 0 0 0 6.5 20H13a1 1 0 0 0 1-1v-1.5H17.5A2.5 2.5 0 0 0 20 15V6.5A2.5 2.5 0 0 0 17.5 4h-2Zm.5 2h1.5a.5.5 0 0 1 .5.5V14a.5.5 0 0 1-.5.5H13V6.5A2.5 2.5 0 0 0 15.5 6Zm-1.5 12H6.5a.5.5 0 0 1-.5-.5v-8a.5.5 0 0 1 .5-.5h7.5V18Zm-1.5-8h-4V8.5A.5.5 0 0 1 9 8h4a.5.5 0 0 1 .5.5V10Z"/></svg></button><span id="stackZ" class="stack-value"></span></div>
+							<div class="stack-cell"><span class="stack-label">Y:</span><button type="button" class="stack-copy-button" data-copy-stack="Y" aria-label="Copy Y value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15.5 4h-7A2.5 2.5 0 0 0 6 6.5V8H5.5A1.5 1.5 0 0 0 4 9.5v8A2.5 2.5 0 0 0 6.5 20H13a1 1 0 0 0 1-1v-1.5H17.5A2.5 2.5 0 0 0 20 15V6.5A2.5 2.5 0 0 0 17.5 4h-2Zm.5 2h1.5a.5.5 0 0 1 .5.5V14a.5.5 0 0 1-.5.5H13V6.5A2.5 2.5 0 0 0 15.5 6Zm-1.5 12H6.5a.5.5 0 0 1-.5-.5v-8a.5.5 0 0 1 .5-.5h7.5V18Zm-1.5-8h-4V8.5A.5.5 0 0 1 9 8h4a.5.5 0 0 1 .5.5V10Z"/></svg></button><span id="stackY" class="stack-value"></span></div>
+							<div class="stack-cell"><span class="stack-label">X:</span><button type="button" class="stack-copy-button" data-copy-stack="X" aria-label="Copy X value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15.5 4h-7A2.5 2.5 0 0 0 6 6.5V8H5.5A1.5 1.5 0 0 0 4 9.5v8A2.5 2.5 0 0 0 6.5 20H13a1 1 0 0 0 1-1v-1.5H17.5A2.5 2.5 0 0 0 20 15V6.5A2.5 2.5 0 0 0 17.5 4h-2Zm.5 2h1.5a.5.5 0 0 1 .5.5V14a.5.5 0 0 1-.5.5H13V6.5A2.5 2.5 0 0 0 15.5 6Zm-1.5 12H6.5a.5.5 0 0 1-.5-.5v-8a.5.5 0 0 1 .5-.5h7.5V18Zm-1.5-8h-4V8.5A.5.5 0 0 1 9 8h4a.5.5 0 0 1 .5.5V10Z"/></svg></button><span id="stackX" class="stack-value"></span></div>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div class="display-buttons-panel">
+				<div class="display-buttons-grid">
+					<button id="constButton" class="display-button">π</button>
+					<button id="pasteButton" class="display-button"><span class="display-button-symbol paste-symbol">⎘</span></button>
+					<button id="upButton" class="display-button"><span class="display-button-symbol arrow-symbol">↑</span></button>
+					<button id="modeButton" class="display-button">Mode</button>
+					<div class="display-button-spacer"></div>
+					<button id="leftButton" class="display-button display-button-offset"><span class="display-button-symbol arrow-symbol">←</span></button>
+					<button id="downButton" class="display-button"><span class="display-button-symbol arrow-symbol">↓</span></button>
+					<button id="rightButton" class="display-button"><span class="display-button-symbol arrow-symbol">→</span></button>
+				</div>
+			</div>
+			
+			<div class="keypad-panel">
+				<div class="keypad-grid" id="keypadGrid"></div>
+			</div>
+
+			<div class="functions-panel">
+				<div class="functions-grid" id="functionsGrid"></div>
+			</div>
+
+			<div class="trigo-panel">
+				<div class="trigo-grid" id="trigoGrid"></div>
+			</div>
+
+			<input id="hiddenInput" class="hidden-input" type="text" autocomplete="off" aria-hidden="true" tabindex="-1">
+		</section>
+	</main>
+
+	<script src="../../src/rpn-calculator.js"></script>
+	<script src="./index.js"></script>
+</body>
+</html>

samples/calc-02/index.js

@@ -0,0 +1,521 @@
+const calc = new RpnCalculator({ angleMode: 'deg' });
+
+const hiddenInput = document.getElementById('hiddenInput');
+const modeButton = document.getElementById('modeButton');
+const pasteButton = document.getElementById('pasteButton');
+const upButton = document.getElementById('upButton');
+const constButton = document.getElementById('constButton');
+const leftButton = document.getElementById('leftButton');
+const downButton = document.getElementById('downButton');
+const rightButton = document.getElementById('rightButton');
+
+const stackEls = {
+	T: document.getElementById('stackT'),
+	Z: document.getElementById('stackZ'),
+	Y: document.getElementById('stackY'),
+	X: document.getElementById('stackX'),
+};
+
+const stackCopyButtons = {
+	T: document.querySelector('[data-copy-stack="T"]'),
+	Z: document.querySelector('[data-copy-stack="Z"]'),
+	Y: document.querySelector('[data-copy-stack="Y"]'),
+	X: document.querySelector('[data-copy-stack="X"]'),
+};
+
+const keypadGrid = document.getElementById('keypadGrid');
+const functionsGrid = document.getElementById('functionsGrid');
+const trigoGrid = document.getElementById('trigoGrid');
+const calculatorEl = document.querySelector('.calculator');
+const statusLine = document.getElementById('statusLine');
+
+const keypadKeys = [
+	{ label: 'ENTER', action: 'enter', className: 'key-enter' },
+	{ label: '⎋', action: 'escape', className: 'key-escape' },
+	{ label: 'C', action: 'clear', className: 'key-danger' },
+	{ label: '⌫', action: 'backspace', className: 'key-danger' },
+	{ label: '7', input: '7', className: 'key-default' },
+	{ label: '8', input: '8', className: 'key-default' },
+	{ label: '9', input: '9', className: 'key-default' },
+	{ label: '÷', action: 'div', className: 'key-accent' },
+	{ label: '4', input: '4', className: 'key-default' },
+	{ label: '5', input: '5', className: 'key-default' },
+	{ label: '6', input: '6', className: 'key-default' },
+	{ label: '×', action: 'mul', className: 'key-accent' },
+	{ label: '1', input: '1', className: 'key-default' },
+	{ label: '2', input: '2', className: 'key-default' },
+	{ label: '3', input: '3', className: 'key-default' },
+	{ label: '−', action: 'sub', className: 'key-accent' },
+	{ label: '0', input: '0', className: 'key-default' },
+	{ label: '.', input: '.', className: 'key-default' },
+	{ label: '±', action: 'neg', className: 'key-default' },
+	{ label: '+', action: 'add', className: 'key-accent' },
+];
+
+const functionKeys = [
+	{ label: 'x²', action: 'sqr', className: 'key-default' },
+	{ label: 'yˣ', action: 'pow', className: 'key-default' },
+	{ label: '1/x', action: 'recip', className: 'key-default' },
+	{ label: '%', action: 'mod', className: 'key-default' },
+	{ label: '√x', action: 'sqrt', className: 'key-default' },
+	{ label: 'y√x', action: 'root', className: 'key-default' },
+	{ label: '10ˣ', action: 'pow10', className: 'key-default' },
+	{ label: '', spacer: true },
+	{ label: 'log', action: 'log', className: 'key-default' },
+	{ label: 'ln', action: 'ln', className: 'key-default' },
+	{ label: 'eˣ', action: 'exp', className: 'key-default' },
+	{ label: '', spacer: true },
+];
+
+const trigoKeys = [
+	{ label: 'sin', action: 'sin', className: 'key-default' },
+	{ label: 'cos', action: 'cos', className: 'key-default' },
+	{ label: 'tan', action: 'tan', className: 'key-default' },
+	{ label: '', spacer: true },
+	{ label: 'asin', action: 'asin', className: 'key-default' },
+	{ label: 'acos', action: 'acos', className: 'key-default' },
+	{ label: 'atan', action: 'atan', className: 'key-default' },
+	{ label: '', spacer: true },
+];
+
+const isTouchDevice = window.matchMedia('(pointer: coarse)').matches || 'ontouchstart' in window;
+
+function focusInput() {
+	if (!hiddenInput || isTouchDevice) return;
+	hiddenInput.focus({ preventScroll: true });
+	window.requestAnimationFrame(() => {
+		if (document.activeElement !== hiddenInput) {
+			hiddenInput.focus({ preventScroll: true });
+		}
+		if (typeof hiddenInput.select === 'function') {
+			hiddenInput.select();
+		}
+	});
+}
+
+let statusTimer = null;
+
+function setStatus(message, isError = false, timeoutMs = 1400) {
+	if (!statusLine) return;
+	clearTimeout(statusTimer);
+	statusLine.textContent = message;
+	statusLine.classList.toggle('is-error', isError);
+	statusLine.classList.toggle('is-visible', Boolean(message));
+	if (!message || timeoutMs <= 0) return;
+	statusTimer = window.setTimeout(() => {
+		statusLine.textContent = '';
+		statusLine.classList.remove('is-visible');
+		statusLine.classList.remove('is-error');
+	}, timeoutMs);
+}
+
+function clearStatus() {
+	clearTimeout(statusTimer);
+	statusTimer = null;
+	if (!statusLine) return;
+	statusLine.textContent = '';
+	statusLine.classList.remove('is-visible');
+	statusLine.classList.remove('is-error');
+}
+
+function normalizeStack() {
+	while (calc.stack.length > 4) {
+		calc.stack.shift();
+	}
+}
+
+function getStackLine(indexFromTop) {
+	return indexFromTop >= 0 && indexFromTop < calc.stack.length ? calc.stack[indexFromTop] : '';
+}
+
+function getStackDisplayValue(label) {
+	if (label === 'X') {
+		return calc.isEditing ? calc.inputValue : (calc.formatNumber(getStackLine(0)) || '');
+	}
+	if (label === 'Y') {
+		return calc.isEditing ? (calc.formatNumber(getStackLine(0)) || '') : (calc.formatNumber(getStackLine(1)) || '');
+	}
+	if (label === 'Z') {
+		return calc.isEditing ? (calc.formatNumber(getStackLine(1)) || '') : (calc.formatNumber(getStackLine(2)) || '');
+	}
+	return calc.isEditing ? (calc.formatNumber(getStackLine(2)) || '') : (calc.formatNumber(getStackLine(3)) || '');
+}
+
+function updateCopyButtons() {
+	for (const label of ['T', 'Z', 'Y', 'X']) {
+		const value = getStackDisplayValue(label);
+		const button = stackCopyButtons[label];
+		if (!button) continue;
+		button.classList.toggle('is-visible', Boolean(value));
+		button.disabled = !value;
+		button.setAttribute('aria-hidden', value ? 'false' : 'true');
+	}
+}
+
+function render() {
+	normalizeStack();
+	const isPortrait = window.matchMedia('(orientation: portrait)').matches || window.innerWidth <= 860;
+	calculatorEl?.classList.toggle('portrait', isPortrait);
+	calculatorEl?.classList.toggle('landscape', !isPortrait);
+	stackEls.X.textContent = getStackDisplayValue('X');
+	stackEls.Y.textContent = getStackDisplayValue('Y');
+	stackEls.Z.textContent = getStackDisplayValue('Z');
+	stackEls.T.textContent = getStackDisplayValue('T');
+	updateCopyButtons();
+	modeButton.textContent = calc.angleMode;
+}
+
+function pushEditingValueIfNeeded() {
+	if (!calc.isEditing) return;
+	if (calc.inputValue !== '') {
+		calc.push(calc.parseInputValue(calc.inputValue));
+	}
+	calc.inputValue = '';
+	calc.isEditing = false;
+}
+
+function inputToX(value) {
+	if (!calc.isEditing) {
+		calc.isEditing = true;
+		calc.inputValue = '';
+	}
+	if (value === 'Backspace') {
+		calc.inputValue = calc.inputValue.slice(0, -1);
+	} else {
+		calc.inputValue += value;
+	}
+	if (calc.inputValue === '') {
+		calc.isEditing = false;
+	}
+}
+
+function pasteTextIntoStack(text) {
+	if (!text) {
+		setStatus('Clipboard empty');
+		return;
+	}
+	const value = calc.parseInputValue(text);
+	if (!Number.isFinite(value)) {
+		setStatus('Clipboard is not a number');
+		return;
+	}
+	pushEditingValueIfNeeded();
+	calc.push(value);
+	calc.isEditing = false;
+	calc.inputValue = '';
+	setStatus('Pasted');
+	render();
+}
+
+function execute(name) {
+	try {
+		if (name === 'enter') {
+			if (calc.isEditing) {
+				pushEditingValueIfNeeded();
+			} else if (calc.isValidIndex(0)) {
+				calc.push(calc.stack[0]);
+			}
+		} else if (name === 'clear') {
+			calc.clear();
+			calc.inputValue = '';
+			calc.isEditing = false;
+		} else if (name === 'escape') {
+			calc.inputValue = '';
+			calc.isEditing = false;
+		} else if (name === 'backspace') {
+			if (calc.isEditing) {
+				inputToX('Backspace');
+			} else if (calc.isValidIndex(0)) {
+				calc.remove(0);
+			}
+		} else if (name === 'swap') {
+			pushEditingValueIfNeeded();
+			if (calc.isValidIndex(1)) {
+				calc.swap(0, 1);
+			}
+		} else if (name === 'neg') {
+			if (calc.isEditing) {
+				calc.inputValue = calc.inputValue.startsWith('-') ? calc.inputValue.slice(1) : `-${calc.inputValue}`;
+			} else {
+				calc.push(calc.pop() * -1);
+			}
+		} else if (name === 'pow10') {
+			pushEditingValueIfNeeded();
+			const exponent = calc.stack[0];
+			calc.remove(0);
+			calc.push(10);
+			calc.push(exponent);
+			calc.command('pow');
+		} else if (name === 'exp') {
+			pushEditingValueIfNeeded();
+			const exponent = calc.stack[0];
+			calc.remove(0);
+			calc.push(Math.E);
+			calc.push(exponent);
+			calc.command('pow');
+		} else {
+			pushEditingValueIfNeeded();
+			calc.command(name);
+		}
+		render();
+	} catch (error) {
+		setStatus(error?.message || 'Operation error', true);
+	}
+}
+
+function createKeyButton({ label, input, action, spacer, className }) {
+	if (spacer) {
+		const div = document.createElement('div');
+		return div;
+	}
+	const button = document.createElement('button');
+	button.type = 'button';
+	button.textContent = label;
+	button.className = className;
+	button.addEventListener('click', () => {
+		if (input) {
+			inputToX(input);
+			render();
+			return;
+		}
+		execute(action);
+	});
+	return button;
+}
+
+function buildGrid(container, keys) {
+	container.innerHTML = '';
+	keys.forEach((key) => container.appendChild(createKeyButton(key)));
+}
+
+async function copyStackValue(label) {
+	const value = getStackDisplayValue(label);
+	if (!value) return;
+	try {
+		await navigator.clipboard.writeText(value);
+		clearStatus();
+	} catch (error) {
+		setStatus('Copy unavailable', true);
+	}
+}
+
+function handleKeyboard(event) {
+	if (event.defaultPrevented) return;
+	const key = event.key;
+	if (/^[0-9.]$/.test(key)) {
+		event.preventDefault();
+		inputToX(key);
+		render();
+		return;
+	}
+	const map = {
+		Enter: 'enter',
+		Backspace: 'backspace',
+		Escape: 'escape',
+		Delete: 'clear',
+		'+': 'add',
+		'-': 'sub',
+		'*': 'mul',
+		'/': 'div',
+		'%': 'mod',
+		'^': 'pow',
+	};
+	const arrowMap = {
+		ArrowUp: upButton,
+		ArrowDown: downButton,
+		ArrowLeft: leftButton,
+		ArrowRight: rightButton,
+	};
+	if (arrowMap[key]) {
+		event.preventDefault();
+		arrowMap[key].click();
+		return;
+	}
+	if (map[key]) {
+		event.preventDefault();
+		execute(map[key]);
+	}
+}
+
+const modeOptions = ['deg', 'rad', 'grad'];
+let activeMenuEl = null;
+
+function closeModeMenu() {
+	if (activeMenuEl) {
+		activeMenuEl.remove();
+		activeMenuEl = null;
+	}
+}
+
+function openMenu(anchorButton, items, onSelect) {
+	const rect = anchorButton.getBoundingClientRect();
+	const menu = document.createElement('div');
+	menu.className = 'menu-popup';
+	menu.style.top = `${rect.bottom + 6 + window.scrollY}px`;
+	menu.style.left = `${rect.left + window.scrollX}px`;
+	menu.style.minWidth = `${rect.width}px`;
+	for (const item of items) {
+		const button = document.createElement('button');
+		button.type = 'button';
+		button.className = `menu-popup-item${item.active ? ' is-active' : ''}`;
+		button.textContent = item.label;
+		button.addEventListener('click', () => onSelect(item.value));
+		menu.appendChild(button);
+	}
+	document.body.appendChild(menu);
+	return menu;
+}
+
+function toggleModeMenu() {
+	if (activeMenuEl) {
+		closeModeMenu();
+		return;
+	}
+	closeConstMenu();
+	activeMenuEl = openMenu(modeButton, modeOptions.map((mode) => ({
+		label: mode,
+		value: mode,
+		active: mode === calc.angleMode,
+	})), (mode) => {
+		calc.angleMode = mode;
+		render();
+		closeModeMenu();
+	});
+}
+
+modeButton.addEventListener('click', (event) => {
+	event.stopPropagation();
+	toggleModeMenu();
+});
+
+window.addEventListener('resize', () => {
+	closeModeMenu();
+	closeConstMenu();
+	render();
+});
+window.addEventListener('scroll', () => {
+	closeModeMenu();
+	closeConstMenu();
+}, true);
+
+window.addEventListener('click', (event) => {
+	const stackCopyButton = event.target.closest('.stack-copy-button');
+	if (stackCopyButton) {
+		const label = stackCopyButton.dataset.copyStack;
+		if (label) copyStackValue(label);
+		return;
+	}
+	if (activeMenuEl && !event.target.closest('.menu-popup') && event.target !== modeButton && event.target !== constButton) {
+		closeModeMenu();
+		closeConstMenu();
+	}
+});
+
+pasteButton.addEventListener('click', async () => {
+	try {
+		const text = await navigator.clipboard.readText();
+		pasteTextIntoStack(text);
+		clearStatus();
+	} catch (error) {
+		setStatus('Paste unavailable', true);
+	}
+});
+
+hiddenInput.addEventListener('paste', (event) => {
+	event.preventDefault();
+	const text = event.clipboardData?.getData('text') ?? '';
+	pasteTextIntoStack(text);
+});
+
+upButton.addEventListener('click', () => {});
+
+const constantLabels = {
+	pi: 'π',
+	e: 'e',
+	phi: 'φ',
+	g: 'g',
+	c: 'c',
+};
+const constantOrder = ['pi', 'e', 'phi', 'g', 'c'];
+
+
+function closeConstMenu() {
+	if (activeMenuEl) {
+		activeMenuEl.remove();
+		activeMenuEl = null;
+	}
+}
+
+function toggleConstMenu() {
+	if (activeMenuEl) {
+		closeConstMenu();
+		return;
+	}
+	closeModeMenu();
+	const availableConstants = calc.listConstants();
+	const keys = [...constantOrder, ...Object.keys(availableConstants).filter((name) => !constantOrder.includes(name))]
+		.filter((name) => Object.prototype.hasOwnProperty.call(availableConstants, name));
+	activeMenuEl = openMenu(constButton, keys.map((name) => ({
+		label: constantLabels[name] ?? name,
+		value: name,
+	})), (name) => {
+		pushEditingValueIfNeeded();
+		calc.push(availableConstants[name]);
+		render();
+		clearStatus();
+		closeConstMenu();
+		focusInput();
+	});
+}
+
+constButton.addEventListener('click', (event) => {
+	event.stopPropagation();
+	toggleConstMenu();
+});
+
+leftButton.addEventListener('click', () => {});
+downButton.addEventListener('click', () => {
+	if (!calc.isEditing && calc.isValidIndex(0)) {
+		const value = calc.stack[0];
+		calc.remove(0);
+		calc.isEditing = true;
+		calc.inputValue = calc.formatNumber(value);
+		render();
+		focusInput();
+	}
+});
+
+rightButton.addEventListener('click', () => {
+	execute('swap');
+});
+
+window.addEventListener('keydown', handleKeyboard, { capture: true });
+window.addEventListener('load', focusInput);
+window.addEventListener('pageshow', focusInput);
+window.addEventListener('focus', focusInput);
+window.addEventListener('pointerdown', focusInput, true);
+window.addEventListener('mousedown', focusInput, true);
+
+hiddenInput.setAttribute('inputmode', 'none');
+hiddenInput.setAttribute('readonly', 'readonly');
+hiddenInput.addEventListener('focus', () => {
+	if (isTouchDevice) {
+		hiddenInput.blur();
+		return;
+	}
+	window.requestAnimationFrame(() => {
+		hiddenInput.select();
+	});
+});
+
+document.addEventListener('click', (event) => {
+	if (!isTouchDevice && !event.target.closest('.menu-popup')) {
+		focusInput();
+	}
+});
+
+buildGrid(keypadGrid, keypadKeys);
+buildGrid(functionsGrid, functionKeys);
+buildGrid(trigoGrid, trigoKeys);
+render();
+focusInput();

samples/calc-02/visual-portrait.md

@@ -0,0 +1,52 @@
+# Calc 02 Visual Portrait
+
+## Display
+
+```
+┌──────────── Display ────────────┐
+| T:                              |
+| Z:                              |
+| Y:                              |
+| X:                              |
+└─────────────────────────────────┘
+```
+
+## Display Buttons
+
+```
+┌──────── Display Buttons ────────┐
+| Const | Paste  | Up    | Mode   |
+|       | Left   | Down  | Right  |
+└─────────────────────────────────┘
+```
+
+## Keypad
+
+```
+┌──────────── Keypad ─────────────┐
+| +/- | Clear | Esc   | backspace |
+| 7   | 8     | 9     | /         |
+| 4   | 5     | 6     | *         |
+| 1   | 2     | 3     | -         |
+| 0   | .     | Enter | +         |
+└─────────────────────────────────┘
+```
+
+## Functions
+
+```
+┌──────────── Functions ──────────┐
+| x^2  | y^x   | 1/x   | %        |
+| √x   | y√x   | 10^x  |          |
+| log  | ln    |       |          |
+└─────────────────────────────────┘
+```
+
+## Trigo
+
+```
+┌──────────── Trigo ──────────────┐
+| sin  | cos   | tan   |          |
+| asin | acos  | atan  |          |
+└─────────────────────────────────┘
+```

samples/dev/index.css

@@ -0,0 +1,204 @@
+:root {
+  --body: #d8d8d8;
+  --panel: #202020;
+  --panel-2: #2b2b2b;
+  --screen: #d8e7b8;
+  --screen-text: #1b2a12;
+  --screen-dim: #5b6f45;
+  --key: #3a3a3a;
+  --key-text: #f2f2f2;
+  --accent: #8cff6d;
+  --border: #111;
+}
+
+* { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  font-family: Arial, sans-serif;
+  background: linear-gradient(180deg, #efefef, var(--body));
+  color: #111;
+}
+
+.wrap {
+  max-width: 980px;
+  margin: 0 auto;
+  padding: 24px;
+}
+
+.calc {
+  background: linear-gradient(180deg, #2f2f2f, #1f1f1f);
+  border: 1px solid #111;
+  border-radius: 20px;
+  padding: 18px;
+  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.25);
+}
+
+.brand {
+  color: #fafafa;
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: 12px;
+  gap: 12px;
+}
+
+.brand h1 {
+  margin: 0;
+  font-size: 18px;
+  letter-spacing: 0.06em;
+}
+
+.brand small {
+  color: #c9c9c9;
+}
+
+.screen {
+  background: linear-gradient(180deg, #dbe8b8, var(--screen));
+  color: var(--screen-text);
+  border: 2px inset #8aa36b;
+  border-radius: 10px;
+  padding: 14px;
+  min-height: 190px;
+  font-family: "Courier New", monospace;
+  display: grid;
+  grid-template-rows: auto auto 1fr;
+  gap: 10px;
+}
+
+.screen-top {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: 12px;
+  color: var(--screen-dim);
+}
+
+.stack {
+  border-top: 1px solid rgba(27, 42, 18, 0.35);
+  padding-top: 10px;
+  line-height: 1.5;
+  font-size: 18px;
+  white-space: pre-wrap;
+}
+
+.stack-line {
+  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 {
+  text-align: right;
+  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;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.input-row {
+  display: grid;
+  grid-template-columns: 1fr 150px;
+  gap: 12px;
+  margin-top: 14px;
+}
+
+input, select, button {
+  border-radius: 10px;
+  border: 1px solid #000;
+  font: inherit;
+}
+
+input, select {
+  padding: 12px 14px;
+  background: #f7f7f7;
+  color: #111;
+}
+
+.panel {
+  margin-top: 14px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 14px;
+  padding: 14px;
+}
+
+.title {
+  color: #fff;
+  margin: 0 0 10px;
+  font-size: 14px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.buttons {
+  display: grid;
+  gap: 8px;
+  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
+}
+
+button {
+  padding: 12px 10px;
+  background: linear-gradient(180deg, #4a4a4a, var(--key));
+  color: var(--key-text);
+  cursor: pointer;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
+}
+
+button:hover { filter: brightness(1.08); }
+button:active { transform: translateY(1px); }
+
+.status {
+  margin-top: 12px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  color: #ececec;
+  font-size: 13px;
+}
+
+.pill {
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 999px;
+  padding: 5px 10px;
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.error {
+  margin-top: 10px;
+  min-height: 20px;
+  color: #ff8a8a;
+  font-family: "Courier New", monospace;
+  font-size: 13px;
+}
+
+.hint {
+  color: #ddd;
+  margin-top: 10px;
+  font-size: 13px;
+  line-height: 1.5;
+}

samples/dev/index.html

@@ -0,0 +1,70 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>HP48-style RPN Calculator</title>
+  <link rel="stylesheet" href="./index.css">
+</head>
+<body>
+  <div class="wrap">
+    <div class="calc">
+      <div class="brand">
+        <h1>HP48-style RPN</h1>
+        <small>powered by src/rpn-calculator.js</small>
+      </div>
+
+      <div class="screen" id="screen" tabindex="0" role="application" aria-label="HP48 style calculator screen">
+        <div class="screen-top">
+          <div>RPN stack</div>
+          <div id="modeLabel">deg</div>
+        </div>
+        <div id="stack" class="stack"></div>
+        <div id="display"></div>
+      </div>
+
+      <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, 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>
+          <option value="grad">Grads</option>
+        </select>
+      </div>
+
+      <div class="status">
+        <div class="pill">inputValue: <span id="inputValueLabel"></span></div>
+        <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>
+
+      <div id="error" class="error"></div>
+      <div class="hint">Use Enter to commit the current value. Buttons call <code>command(...)</code> directly, like a real RPN demo.</div>
+    </div>
+  </div>
+
+  <script src="../../src/rpn-calculator.js"></script>
+  <script src="./index.js"></script>
+</body>
+</html>

samples/dev/index.js

@@ -0,0 +1,492 @@
+const calc = new RpnCalculator({ angleMode: 'deg' });
+const input = document.getElementById('input');
+const screen = document.getElementById('screen');
+const stackEl = document.getElementById('stack');
+
+const displayEl = document.getElementById('display');
+const errorEl = document.getElementById('error');
+const inputValueLabel = document.getElementById('inputValueLabel');
+const editingLabel = document.getElementById('editingLabel');
+const modeLabel = document.getElementById('modeLabel');
+const angleMode = document.getElementById('angleMode');
+
+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 isMovingStackItem = false;
+let stackSnapshotBeforeMove = null;
+let stackViewOffset = 0;
+let editRestoreValue = null;
+
+function labelFor(command) {
+  return ({ add: '+', sub: '−', mul: '×', div: '÷', pow: 'y^x', recip: '1/x', sqr: 'x²' }[command] || command);
+}
+
+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 getStackValue(index) {
+  return calc.isValidIndex(index) ? calc.stack[index] : undefined;
+}
+
+function getDisplayValue(index) {
+  if (calc.isEditing) {
+    if (index === 0) {
+      return calc.inputValue;
+    }
+    return getStackValue(index - 1);
+  }
+  return getStackValue(index);
+}
+
+function hasStackSelection() {
+  return stackCursor !== null && calc.isValidIndex(stackCursor);
+}
+
+function clearStackSelection() {
+  stackCursor = null;
+  isMovingStackItem = false;
+  stackSnapshotBeforeMove = null;
+  stackViewOffset = 0;
+}
+
+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;
+    editRestoreValue = value;
+  } else {
+    calc.inputValue = '';
+    calc.isEditing = true;
+    editRestoreValue = null;
+  }
+  syncInputFromState();
+}
+
+function moveStackSelection(direction) {
+  if (!hasStackSelection()) {
+    if (direction === 'up') {
+      ensureValidSelection();
+    } else if (direction === 'down') {
+      reactivateEditOnX();
+    }
+    return;
+  }
+
+  const nextIndex = direction === 'up' ? stackCursor + 1 : stackCursor - 1;
+  if (calc.isValidIndex(nextIndex)) {
+    stackCursor = nextIndex;
+  }
+}
+
+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 getVisibleStackIndex(visualLine) {
+  return stackViewOffset + visualLine;
+}
+
+function clampStackViewOffset() {
+  const maxOffset = Math.max(0, calc.stack.length - 4);
+  if (stackViewOffset < 0) {
+    stackViewOffset = 0;
+  } else if (stackViewOffset > maxOffset) {
+    stackViewOffset = maxOffset;
+  }
+}
+
+function ensureSelectionVisible() {
+  if (!hasStackSelection()) {
+    stackViewOffset = 0;
+    return;
+  }
+
+  if (stackCursor < stackViewOffset) {
+    stackViewOffset = stackCursor;
+  } else if (stackCursor > stackViewOffset + 3) {
+    stackViewOffset = stackCursor - 3;
+  }
+
+  clampStackViewOffset();
+}
+
+function render() {
+  const names = ['T', 'Z', 'Y', 'X'];
+  const lines = [];
+  const showStackIndexes = hasStackSelection() || isMovingStackItem;
+
+  clampStackViewOffset();
+  ensureSelectionVisible();
+
+  for (let visualLine = 3; visualLine >= 0; visualLine -= 1) {
+    const stackIndex = getVisibleStackIndex(visualLine);
+    const value = getDisplayValue(stackIndex);
+    const isSelected = stackCursor === stackIndex;
+    const classes = ['stack-line'];
+    const label = showStackIndexes ? String(stackIndex) : names[3 - visualLine];
+
+    if (isSelected) {
+      classes.push(isMovingStackItem ? 'moving' : 'selected');
+    }
+
+    lines.push(`<div class="${classes.join(' ')}"><div class="label">${label}</div><div>${value !== undefined && value !== '' ? calc.formatNumber(value) : ''}</div></div>`);
+  }
+
+  stackEl.innerHTML = lines.join('');
+  if (calc.isEditing) {
+    displayEl.textContent = `ENTERING: ${calc.inputValue}`;
+  } else if (isMovingStackItem && hasStackSelection()) {
+    displayEl.textContent = `MOVING: ${stackCursor}`;
+  } else if (hasStackSelection()) {
+    displayEl.textContent = `SELECTED: ${stackCursor}`;
+  } else {
+    displayEl.textContent = 'READY';
+  }
+  inputValueLabel.textContent = calc.inputValue || '∅';
+  editingLabel.textContent = String(calc.isEditing);
+  modeLabel.textContent = calc.angleMode;
+  angleMode.value = calc.angleMode;
+  errorEl.textContent = '';
+}
+
+function pushEditingValueIfNeeded() {
+  if (!calc.isEditing) return;
+  if (calc.inputValue !== '') {
+    const value = calc.parseInputValue(calc.inputValue);
+    calc.push(value);
+  }
+  calc.inputValue = '';
+  calc.isEditing = false;
+  editRestoreValue = null;
+  syncInputFromState();
+}
+
+function execute(name) {
+  try {
+    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();
+    render();
+  } catch (error) {
+    errorEl.textContent = error.message;
+  }
+}
+
+function isInputChar(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() {
+  screen.focus();
+}
+
+function syncInputFromState() {
+  input.value = calc.inputValue;
+}
+
+function editXWithKey(key) {
+  if (!calc.isEditing) {
+    pushEditingValueIfNeeded();
+    calc.isEditing = true;
+    calc.inputValue = '';
+    editRestoreValue = null;
+  }
+  if (key === 'Backspace') {
+    calc.inputValue = calc.inputValue.slice(0, -1);
+  } else {
+    calc.inputValue += key;
+  }
+  if (calc.inputValue === '') {
+    calc.isEditing = false;
+    editRestoreValue = null;
+  }
+  syncInputFromState();
+}
+
+function handleKeydown(event) {
+  if (shouldIgnoreKeyboardEvent(event)) {
+    return;
+  }
+
+  const action = getKeyboardAction(event);
+  if (!action) {
+    return;
+  }
+
+  try {
+    if (action.type === 'escapeKey') {
+      if (calc.isEditing) {
+        event.preventDefault();
+        if (editRestoreValue !== null) {
+          calc.push(editRestoreValue);
+          editRestoreValue = null;
+        }
+        calc.inputValue = '';
+        calc.isEditing = false;
+        syncInputFromState();
+        render();
+        return;
+      }
+      if (isMovingStackItem) {
+        event.preventDefault();
+        cancelMoveMode();
+        clearStackSelection();
+        render();
+        return;
+      }
+      if (hasStackSelection()) {
+        event.preventDefault();
+        clearStackSelection();
+        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 (calc.isEditing) {
+        render();
+        return;
+      }
+
+      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);
+
+screen.addEventListener('click', focusScreen);
+window.addEventListener('load', focusScreen);
+
+angleMode.addEventListener('change', (event) => {
+  calc.angleMode = event.target.value;
+  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();

samples/dev/rpn-example.html

@@ -1,308 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>RPN Calculator Demo</title>
-  <style>
-    :root {
-      color-scheme: light dark;
-      --bg: #f4f4f4;
-      --panel: #ffffff;
-      --text: #111;
-      --muted: #666;
-      --button: #e9e9e9;
-      --button-text: #111;
-      --border: #d0d0d0;
-      --accent: #0a7;
-    }
-
-    @media (prefers-color-scheme: dark) {
-      :root {
-        --bg: #111;
-        --panel: #1a1a1a;
-        --text: #f3f3f3;
-        --muted: #aaa;
-        --button: #2a2a2a;
-        --button-text: #f3f3f3;
-        --border: #333;
-        --accent: #3dc;
-      }
-    }
-
-    body {
-      margin: 0;
-      font-family: Arial, sans-serif;
-      background: var(--bg);
-      color: var(--text);
-    }
-
-    .app {
-      max-width: 860px;
-      margin: 24px auto;
-      padding: 16px;
-    }
-
-    .card {
-      background: var(--panel);
-      border: 1px solid var(--border);
-      border-radius: 12px;
-      padding: 16px;
-    }
-
-    .display {
-      background: #000;
-      color: #0f0;
-      border-radius: 10px;
-      padding: 12px;
-      font-family: monospace;
-      min-height: 72px;
-      white-space: pre-wrap;
-      overflow-wrap: anywhere;
-    }
-
-    .grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
-      gap: 8px;
-      margin-top: 12px;
-    }
-
-    button, select, input {
-      border: 1px solid var(--border);
-      background: var(--button);
-      color: var(--button-text);
-      border-radius: 8px;
-      padding: 10px 12px;
-      font-size: 15px;
-    }
-
-    button {
-      cursor: pointer;
-    }
-
-    input, select {
-      width: 100%;
-      box-sizing: border-box;
-      background: var(--panel);
-      color: var(--text);
-      font-size: 16px;
-    }
-
-    .row {
-      display: grid;
-      grid-template-columns: 1fr 180px;
-      gap: 12px;
-      margin-top: 12px;
-      align-items: end;
-    }
-
-    .stack {
-      margin-top: 12px;
-      font-family: monospace;
-      line-height: 1.5;
-    }
-
-    .muted {
-      color: var(--muted);
-      font-size: 14px;
-    }
-
-    .section-title {
-      margin: 16px 0 8px;
-      font-size: 14px;
-      color: var(--muted);
-      text-transform: uppercase;
-      letter-spacing: 0.04em;
-    }
-
-    .status {
-      display: flex;
-      gap: 12px;
-      flex-wrap: wrap;
-      margin-top: 12px;
-      color: var(--muted);
-      font-size: 14px;
-    }
-
-    .badge {
-      border: 1px solid var(--border);
-      border-radius: 999px;
-      padding: 4px 10px;
-      background: rgba(0, 0, 0, 0.04);
-    }
-
-    .accent {
-      color: var(--accent);
-    }
-  </style>
-</head>
-<body>
-  <div class="app">
-    <div class="card">
-      <h1>RPN Calculator Demo</h1>
-
-      <div id="display" class="display"></div>
-      <div id="stack" class="stack"></div>
-
-      <div class="row">
-        <label>
-          <div class="section-title">Input</div>
-          <input id="input" type="text" placeholder="Type a number, pi, e, or a command, then press Enter" autocomplete="off">
-        </label>
-
-        <label>
-          <div class="section-title">Angle mode</div>
-          <select id="angleMode">
-            <option value="deg">Degrees</option>
-            <option value="rad">Radians</option>
-            <option value="grad">Grads</option>
-          </select>
-        </label>
-      </div>
-
-      <div class="status">
-        <div class="badge">Mode: <span id="angleModeLabel" class="accent"></span></div>
-        <div class="badge">Base: <span id="baseLabel" class="accent"></span></div>
-      </div>
-
-      <div class="section-title">Constants</div>
-      <div class="grid">
-        <button data-const="pi">pi</button>
-        <button data-const="e">e</button>
-      </div>
-
-      <div class="section-title">Stack</div>
-      <div class="grid">
-        <button data-cmd="enter">Enter</button>
-        <button data-cmd="dup">Dup</button>
-        <button data-cmd="swap">Swap top 2</button>
-        <button data-cmd="drop">Drop</button>
-        <button data-cmd="clear">Clear</button>
-      </div>
-
-      <div class="section-title">Arithmetic</div>
-      <div class="grid">
-        <button data-cmd="add">+</button>
-        <button data-cmd="sub">−</button>
-        <button data-cmd="mul">×</button>
-        <button data-cmd="div">÷</button>
-        <button data-cmd="mod">%</button>
-        <button data-cmd="pow">y^x</button>
-        <button data-cmd="sqr">x²</button>
-        <button data-cmd="neg">±</button>
-        <button data-cmd="sqrt">sqrt</button>
-        <button data-cmd="recip">1/x</button>
-        <button data-cmd="log">log</button>
-        <button data-cmd="ln">ln</button>
-      </div>
-
-      <div class="section-title">Trigonometry</div>
-      <div class="grid">
-        <button data-cmd="sin">sin</button>
-        <button data-cmd="cos">cos</button>
-        <button data-cmd="tan">tan</button>
-        <button data-cmd="asin">asin</button>
-        <button data-cmd="acos">acos</button>
-        <button data-cmd="atan">atan</button>
-      </div>
-
-      <p class="muted">Tip: trig functions follow the selected angle mode. Domain errors are reported with clear messages. sqrt computes the square root of the top stack value.</p>
-    </div>
-  </div>
-
-  <script src="../../src/rpn-calculator.js"></script>
-  <script>
-    const enabledCommands = ['add', 'sub', 'mul', 'div', 'mod', 'pow', 'sqr', 'neg', 'sqrt', 'recip', 'sin', 'cos', 'tan', 'asin', 'acos', 'atan', 'log', 'ln', 'dup', 'swap', 'drop', 'clear', 'enter'];
-    const calc = new RpnCalculator({ angleMode: 'deg', enabledCommands });
-
-    const display = document.getElementById('display');
-    const stack = document.getElementById('stack');
-    const input = document.getElementById('input');
-    const angleMode = document.getElementById('angleMode');
-    const angleModeLabel = document.getElementById('angleModeLabel');
-    const baseLabel = document.getElementById('baseLabel');
-
-    function render() {
-      display.textContent = calc.isEditing ? `Editing: ${calc.inputValue}` : 'Ready';
-      stack.innerHTML = calc.stack.length
-        ? calc.stack.map((value, index) => `<div>${index}: ${value}</div>`).join('')
-        : '<span class="muted">Stack empty</span>';
-      angleMode.value = calc.angleMode;
-      angleModeLabel.textContent = calc.angleMode;
-      baseLabel.textContent = String(calc.base);
-    }
-
-    function commitInput() {
-      if (input.value.trim() !== '') {
-        calc.inputValue = input.value;
-        calc.isEditing = true;
-        calc.command('enter');
-        input.value = '';
-      }
-    }
-
-    function runCommand(name) {
-      if (name === 'swap') {
-        if (calc.stack.length >= 2) calc.swap(0, 1);
-        return;
-      }
-      if (name === 'enter') {
-        commitInput();
-        return;
-      }
-      calc.command(name);
-    }
-
-    input.addEventListener('input', (event) => {
-      calc.inputValue = event.target.value;
-      calc.isEditing = event.target.value.length > 0;
-      render();
-    });
-
-    input.addEventListener('keydown', (event) => {
-      if (event.key === 'Enter') {
-        event.preventDefault();
-        try {
-          commitInput();
-          render();
-        } catch (error) {
-          alert(error.message);
-        }
-      }
-    });
-
-    angleMode.addEventListener('change', (event) => {
-      calc.angleMode = ['deg', 'rad', 'grad'].includes(event.target.value) ? event.target.value : 'deg';
-      render();
-    });
-
-    document.querySelectorAll('button[data-cmd]').forEach((button) => {
-      button.addEventListener('click', () => {
-        try {
-          runCommand(button.dataset.cmd);
-          render();
-        } catch (error) {
-          alert(error.message);
-        }
-      });
-    });
-
-    document.querySelectorAll('button[data-const]').forEach((button) => {
-      button.addEventListener('click', () => {
-        try {
-          calc.inputValue = '';
-          calc.isEditing = false;
-          calc.command(button.dataset.const);
-          input.value = '';
-          render();
-        } catch (error) {
-          alert(error.message);
-        }
-      });
-    });
-
-    render();
-  </script>
-</body>
-</html>

samples/dev/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     |
+└────────────────────────────────────┴─────────────────┴─────────────────┘

samples/hp48/index.html

@@ -1,444 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>HP48-style RPN Calculator</title>
-  <style>
-    :root {
-      --body: #d8d8d8;
-      --panel: #202020;
-      --panel-2: #2b2b2b;
-      --screen: #d8e7b8;
-      --screen-text: #1b2a12;
-      --screen-dim: #5b6f45;
-      --key: #3a3a3a;
-      --key-text: #f2f2f2;
-      --accent: #8cff6d;
-      --border: #111;
-    }
-
-    * { box-sizing: border-box; }
-
-    body {
-      margin: 0;
-      font-family: Arial, sans-serif;
-      background: linear-gradient(180deg, #efefef, var(--body));
-      color: #111;
-    }
-
-    .wrap {
-      max-width: 980px;
-      margin: 0 auto;
-      padding: 24px;
-    }
-
-    .calc {
-      background: linear-gradient(180deg, #2f2f2f, #1f1f1f);
-      border: 1px solid #111;
-      border-radius: 20px;
-      padding: 18px;
-      box-shadow: 0 18px 48px rgba(0, 0, 0, 0.25);
-    }
-
-    .brand {
-      color: #fafafa;
-      display: flex;
-      justify-content: space-between;
-      align-items: baseline;
-      margin-bottom: 12px;
-      gap: 12px;
-    }
-
-    .brand h1 {
-      margin: 0;
-      font-size: 18px;
-      letter-spacing: 0.06em;
-    }
-
-    .brand small {
-      color: #c9c9c9;
-    }
-
-    .screen {
-      background: linear-gradient(180deg, #dbe8b8, var(--screen));
-      color: var(--screen-text);
-      border: 2px inset #8aa36b;
-      border-radius: 10px;
-      padding: 14px;
-      min-height: 190px;
-      font-family: "Courier New", monospace;
-      display: grid;
-      grid-template-rows: auto auto 1fr;
-      gap: 10px;
-    }
-
-    .screen-top {
-      display: flex;
-      justify-content: space-between;
-      gap: 12px;
-      font-size: 12px;
-      color: var(--screen-dim);
-    }
-
-    .stack {
-      border-top: 1px solid rgba(27, 42, 18, 0.35);
-      padding-top: 10px;
-      line-height: 1.5;
-      font-size: 18px;
-      white-space: pre-wrap;
-    }
-
-    .stack-line {
-      display: grid;
-      grid-template-columns: 26px 1fr;
-      gap: 8px;
-    }
-
-    .stack-line .label {
-      text-align: right;
-      color: var(--screen-dim);
-    }
-
-    .hidden-input {
-      position: absolute;
-      left: -9999px;
-      width: 1px;
-      height: 1px;
-      opacity: 0;
-      pointer-events: none;
-    }
-
-    .input-row {
-      display: grid;
-      grid-template-columns: 1fr 150px;
-      gap: 12px;
-      margin-top: 14px;
-    }
-
-    input, select, button {
-      border-radius: 10px;
-      border: 1px solid #000;
-      font: inherit;
-    }
-
-    input, select {
-      padding: 12px 14px;
-      background: #f7f7f7;
-      color: #111;
-    }
-
-    .panel {
-      margin-top: 14px;
-      background: rgba(255, 255, 255, 0.04);
-      border: 1px solid rgba(255, 255, 255, 0.08);
-      border-radius: 14px;
-      padding: 14px;
-    }
-
-    .title {
-      color: #fff;
-      margin: 0 0 10px;
-      font-size: 14px;
-      text-transform: uppercase;
-      letter-spacing: 0.08em;
-    }
-
-    .buttons {
-      display: grid;
-      gap: 8px;
-      grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
-    }
-
-    button {
-      padding: 12px 10px;
-      background: linear-gradient(180deg, #4a4a4a, var(--key));
-      color: var(--key-text);
-      cursor: pointer;
-      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
-    }
-
-    button:hover { filter: brightness(1.08); }
-    button:active { transform: translateY(1px); }
-
-    .status {
-      margin-top: 12px;
-      display: flex;
-      flex-wrap: wrap;
-      gap: 10px;
-      color: #ececec;
-      font-size: 13px;
-    }
-
-    .pill {
-      border: 1px solid rgba(255, 255, 255, 0.15);
-      border-radius: 999px;
-      padding: 5px 10px;
-      background: rgba(255, 255, 255, 0.05);
-    }
-
-    .error {
-      margin-top: 10px;
-      min-height: 20px;
-      color: #ff8a8a;
-      font-family: "Courier New", monospace;
-      font-size: 13px;
-    }
-
-    .hint {
-      color: #ddd;
-      margin-top: 10px;
-      font-size: 13px;
-      line-height: 1.5;
-    }
-  </style>
-</head>
-<body>
-  <div class="wrap">
-    <div class="calc">
-      <div class="brand">
-        <h1>HP48-style RPN</h1>
-        <small>powered by src/rpn-calculator.js</small>
-      </div>
-
-      <div class="screen" id="screen" tabindex="0" role="application" aria-label="HP48 style calculator screen">
-        <div class="screen-top">
-          <div>RPN stack</div>
-          <div id="modeLabel">deg</div>
-        </div>
-        <div id="stack" class="stack"></div>
-        <div id="display"></div>
-      </div>
-
-      <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>
-        <select id="angleMode">
-          <option value="deg">Degrees</option>
-          <option value="rad">Radians</option>
-          <option value="grad">Grads</option>
-        </select>
-      </div>
-
-      <div class="status">
-        <div class="pill">inputValue: <span id="inputValueLabel"></span></div>
-        <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>
-
-      <div id="error" class="error"></div>
-      <div class="hint">Use Enter to commit the current value. Buttons call <code>command(...)</code> directly, like a real RPN demo.</div>
-    </div>
-  </div>
-
-  <script src="../../src/rpn-calculator.js"></script>
-  <script>
-    const calc = new RpnCalculator({ angleMode: 'deg' });
-    const input = document.getElementById('input');
-    const screen = document.getElementById('screen');
-    const stackEl = document.getElementById('stack');
-
-    const displayEl = document.getElementById('display');
-    const errorEl = document.getElementById('error');
-    const inputValueLabel = document.getElementById('inputValueLabel');
-    const editingLabel = document.getElementById('editingLabel');
-    const modeLabel = document.getElementById('modeLabel');
-    const angleMode = document.getElementById('angleMode');
-
-    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'],
-    };
-
-    function labelFor(command) {
-      return ({ add: '+', sub: '−', mul: '×', div: '÷', pow: 'y^x', recip: '1/x', sqr: 'x²' }[command] || command);
-    }
-
-    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 getLineValue(line) {
-      if (calc.isEditing) {
-        if (line === 0) {
-          return calc.inputValue;
-        }
-        return calc.stack[line - 1];
-      }
-      return calc.stack[line];
-    }
-
-    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>`);
-      }
-
-      stackEl.innerHTML = lines.join('');
-      displayEl.textContent = calc.isEditing ? `ENTERING: ${calc.inputValue}` : 'READY';
-      inputValueLabel.textContent = calc.inputValue || '∅';
-      editingLabel.textContent = String(calc.isEditing);
-      modeLabel.textContent = calc.angleMode;
-      angleMode.value = calc.angleMode;
-      errorEl.textContent = '';
-    }
-
-    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.inputValue = '';
-      calc.isEditing = false;
-      syncInputFromState();
-    }
-
-    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 (calc.isEditing) {
-            pushEditingValueIfNeeded();
-          }
-        } else {
-          pushEditingValueIfNeeded();
-          calc.command(name);
-        }
-        syncInputFromState();
-        render();
-      } catch (error) {
-        errorEl.textContent = error.message;
-      }
-    }
-
-    function isInputChar(key) {
-      return /^[0-9a-fA-F.+\-]$/.test(key);
-    }
-
-    function focusScreen() {
-      screen.focus();
-    }
-
-    function syncInputFromState() {
-      input.value = calc.inputValue;
-    }
-
-    function editXWithKey(key) {
-      if (!calc.isEditing) {
-        pushEditingValueIfNeeded();
-        calc.isEditing = true;
-        calc.inputValue = '';
-      }
-      if (key === 'Backspace') {
-        calc.inputValue = calc.inputValue.slice(0, -1);
-      } else {
-        calc.inputValue += key;
-      }
-      if (calc.inputValue === '') {
-        calc.isEditing = false;
-      }
-      syncInputFromState();
-    }
-
-    screen.addEventListener('keydown', (event) => {
-      try {
-        if (event.key === 'Enter') {
-          event.preventDefault();
-          execute('enter');
-          return;
-        }
-
-        if (event.key === 'Backspace') {
-          event.preventDefault();
-          if (calc.isEditing) {
-            editXWithKey('Backspace');
-            render();
-          }
-          return;
-        }
-
-        if (isInputChar(event.key)) {
-          event.preventDefault();
-          editXWithKey(event.key);
-          render();
-          return;
-        }
-
-        const keyMap = {
-          '+': 'add',
-          '-': 'sub',
-          '*': 'mul',
-          '/': 'div',
-          '%': 'mod',
-          '^': 'pow',
-        };
-
-        if (keyMap[event.key]) {
-          event.preventDefault();
-          execute(keyMap[event.key]);
-        }
-      } catch (error) {
-        errorEl.textContent = error.message;
-      }
-    });
-
-    screen.addEventListener('click', focusScreen);
-    window.addEventListener('load', focusScreen);
-
-    angleMode.addEventListener('change', (event) => {
-      calc.angleMode = event.target.value;
-      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>
-</body>
-</html>

src/rpn-calculator.js

@@ -2,6 +2,9 @@ class RpnCalculator {
   static CONSTANTS = {
     pi: Math.PI,
     e: Math.E,
+    phi: (1 + Math.sqrt(5)) / 2,
+    g: 9.80665,
+    c: 299792458,
   };
 
   static OPERATIONS = {
@@ -46,6 +49,20 @@ class RpnCalculator {
       aliases: ['^', 'y^x'],
       execute: (calc, a, b) => Math.pow(a, b),
     },
+    root: {
+      category: 'Arithmetic',
+      argCount: 2,
+      aliases: ['y√x', 'yroot', 'nroot'],
+      execute: (calc, a, b) => {
+        if (b === 0) {
+          throw new Error('Invalid input for root');
+        }
+        if (a < 0 && b % 2 === 0) {
+          throw new Error('Invalid input for root');
+        }
+        return Math.pow(a, 1 / b);
+      },
+    },
     sqr: {
       category: 'Arithmetic',
       argCount: 1,
@@ -178,7 +195,7 @@ class RpnCalculator {
   static getOperationsByCategory() {
     return {
       Stack: ['dup', 'drop', 'swap', 'clear', 'enter'],
-      Arithmetic: ['add', 'sub', 'mul', 'div', 'mod', 'pow', 'sqr', 'neg', 'sqrt', 'recip', 'log', 'ln'],
+      Arithmetic: ['add', 'sub', 'mul', 'div', 'mod', 'pow', 'root', 'sqr', 'neg', 'sqrt', 'recip', 'log', 'ln'],
       Trigonometry: ['sin', 'cos', 'tan', 'asin', 'acos', 'atan'],
     };
   }
@@ -198,6 +215,15 @@ class RpnCalculator {
     this.enabledCommands = new Set(selectedCommands.map((name) => this.normalizeCommandName(name)).filter((name) => RpnCalculator.OPERATIONS[name]));
   }
 
+  static isValidConstantName(name) {
+    return typeof name === 'string' && name.trim() !== '';
+  }
+
+  static isReservedName(name) {
+    const normalized = typeof name === 'string' ? name.toLowerCase() : '';
+    return Boolean(RpnCalculator.OPERATIONS[normalized]);
+  }
+
   toRadians(value) {
     if (this.angleMode === 'grad') {
       return (value * Math.PI) / 200;
@@ -243,6 +269,45 @@ class RpnCalculator {
     return typeof name === 'string' && Object.prototype.hasOwnProperty.call(this.constants, name.toLowerCase());
   }
 
+  setConstant(name, value) {
+    if (!RpnCalculator.isValidConstantName(name)) {
+      throw new Error('Invalid constant name');
+    }
+    if (!Number.isFinite(value)) {
+      throw new Error('Invalid constant value');
+    }
+
+    const normalized = name.trim().toLowerCase();
+    if (RpnCalculator.isReservedName(normalized)) {
+      throw new Error(`Constant name conflicts with a command: ${name}`);
+    }
+
+    this.constants[normalized] = value;
+    return value;
+  }
+
+  removeConstant(name) {
+    if (!RpnCalculator.isValidConstantName(name)) {
+      throw new Error('Invalid constant name');
+    }
+
+    const normalized = name.trim().toLowerCase();
+    if (!this.isConstantName(normalized)) {
+      return false;
+    }
+
+    delete this.constants[normalized];
+    return true;
+  }
+
+  hasConstant(name) {
+    if (!RpnCalculator.isValidConstantName(name)) {
+      return false;
+    }
+
+    return this.isConstantName(name.trim().toLowerCase());
+  }
+
   push(value) {
     if (this.stack.length >= this.maxSize) {
       throw new Error('Stack overflow');
@@ -369,9 +434,13 @@ class RpnCalculator {
       throw new Error('Stack underflow');
     }
 
-    const operands = argCount > 0 ? this.stack.splice(0, argCount).reverse() : [];
+    const operands = argCount > 0 ? this.stack.slice(0, argCount).reverse() : [];
     const result = operation.execute(this, ...operands, ...args);
 
+    if (argCount > 0) {
+      this.stack.splice(0, argCount);
+    }
+
     if (Array.isArray(result)) {
       for (let i = result.length - 1; i >= 0; i -= 1) {
         this.push(result[i]);
@@ -390,6 +459,10 @@ class RpnCalculator {
   getConstants() {
     return { ...this.constants };
   }
+
+  listConstants() {
+    return this.getConstants();
+  }
 }
 
 if (typeof window !== 'undefined') {