fix(calc-02): update stack labels for navigation and move modes

feat: add stack navigation and reordering controls
docs: align calculator visual portrait table cell
2026-05-17 05:34:06 +02:00 · 2026-05-17 04:24:43 +02:00 · 2026-05-17 03:23:47 +02:00 · 2026-05-17 01:31:43 +02:00 · 2026-05-17 00:38:32 +02:00 · 2026-05-17 00:35:50 +02:00
9 changed files with 735 additions and 309 deletions
@@ -1,8 +1,9 @@
-# Project memory
-
- RPN calculator JS project.
- Read `.memory/state.md` for current state.
- Keep names and commands in English.
- Update memory files based on events: engine, demo, API, commands, exports, docs, or tasks.
- Core arithmetic now includes `root` for y-th roots, and `samples/calc-02/` uses it for `y√x`.
- `samples/calc-02/` in portrait mode remains the active responsive demo.
+# State
+- Core engine: `src/rpn-calculator.js`
+- Reference demo: `samples/calc-02/` (portrait-first HP48GX layout; calc-02 keyboard shortcuts are the reference; 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
+- Note: keep scrolling behavior in mind for the calc-02 demo when changing the stack/UI layout
+- 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`
@@ -1,9 +1,8 @@
 # State
 - Core engine: `src/rpn-calculator.js`
- Active demo: `samples/calc-02/` portrait-only HP48GX layout; display-adjacent button row stays in 4 columns and now shares the same base button styling as the function keys
- Mode button shows the current angle mode only; selecting a mode uses a popup menu
- Public API: `push`, `pop`, `clear`, `swap`, `remove`, `edit`, `isValidIndex`, `input`, `command`, `getOperationsByCategory`, `getConstants`
+- 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` and `e`; arithmetic now includes `root` for y-th roots
- Demo actions: keyboard focus is kept on the hidden input on desktop so typing keeps working; the keypad layout places Enter in the bottom-left, ± in the former Enter position, and Esc before Clear for safety; paste parses clipboard text as a number before pushing it to the stack; Ctrl+V is supported via the hidden input paste event; backspace is ignored when the stack is empty; operation errors are shown as an overlay bar on top of the calculator with a shorter timeout and darker red; the display button row uses a 4-column grid with a spacer cell to preserve alignment
+- 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`
@@ -1,30 +1,28 @@
 # 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.

 ## Overview

 This project provides:

 - a reusable JavaScript RPN engine in `src/rpn-calculator.js`
- browser demos in `samples/dev/` and `samples/calc-02/`
- a command system centralized in a single operation dictionary
- a small public API focused on stack operations and generic command dispatch
+- a classic browser demo in `samples/dev/`
+- a portrait-first HP48GX-inspired demo in `samples/calc-02/`
+- a centralized command system with aliases
+- a compact public API focused on stack operations, editing, and command dispatch

 The main class is `RpnCalculator`.

 ## Project structure

 - `src/rpn-calculator.js`: calculator engine
- `samples/dev/index.html`: active browser demo entry point
+- `samples/dev/index.html`: browser demo entry point
 - `samples/dev/index.css`: demo styles
 - `samples/dev/index.js`: demo UI and keyboard logic
- `samples/calc-01/index.html`: active browser demo entry point
- `samples/calc-01/index.css`: demo styles
- `samples/calc-01/index.js`: demo UI and keyboard logic
- `samples/calc-02/index.html`: new responsive HP48GX-style demo entry point
- `samples/calc-02/index.css`: new responsive demo styles
- `samples/calc-02/index.js`: responsive HP48GX-style demo UI and keyboard logic
+- `samples/calc-02/index.html`: portrait-first HP48GX-style demo entry point
+- `samples/calc-02/index.css`: portrait-first demo styles
+- `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
@@ -45,6 +43,10 @@ Instance helpers also available:

 - `getOperationsByCategory()`
 - `getConstants()`
+- `listConstants()`
+- `setConstant(name, value)`
+- `removeConstant(name)`
+- `hasConstant(name)`

 Static helpers also available:

@@ -64,10 +66,10 @@ State exposed on instances:

 ```js README.md
 const calc = new RpnCalculator({
-  maxSize: 2048,
-  base: 10,
-  angleMode: 'deg',
-  enabledCommands: ['add', 'sub', 'mul', 'div']
+	maxSize: 2048,
+	base: 10,
+	angleMode: 'deg',
+	enabledCommands: ['add', 'sub', 'mul', 'div']
 });
 ```

@@ -84,6 +86,10 @@ Available constants:

 - `pi`
 - `e`
+- `phi`
+- `g`
+- `c`
+- plus any user-defined constants added through the engine API

 They can be used through `command(...)`:

@@ -189,10 +195,10 @@ console.log(calc.pop()); // 5
 ```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());
+	const calc = new RpnCalculator({ angleMode: 'deg' });
+	calc.push(9);
+	calc.command('sqrt');
+	console.log(calc.pop());
 </script>
 ```

@@ -234,7 +240,7 @@ console.log(calc.pop()); // 0.5

 ## Demo

-The active demo lives in `samples/dev/`.
+The default demo lives in `samples/dev/`.

 Main UI features:

@@ -244,7 +250,12 @@ Main UI features:
 - angle mode selector for `deg`, `rad`, and `grad`
 - status pills for `inputValue` and `isEditing`
 - grouped panels for `Stack`, `Arithmetic`, `Trigonometry`, and `Constants`
- error display area
+- 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:

@@ -264,16 +275,14 @@ The current demo supports:
 - `Escape`
 - `ArrowUp`, `ArrowDown`, `ArrowRight`
 - `+`, `-`, `*`, `/`, `%`, `^`
- `q`, `n`, `r`, `i`, `g`, `l`, `s`, `c`, `S`, `C`
- `x`, `y`, `z`, `t`
+- `s`, `S`, `r`, `R`, `v`, `u`
+- `l`, `L`, `n`, `N`, `e`, `E`
+- `i`, `o`, `a`, `I`, `O`, `A`

 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.

-## Calc 02 demo
-
-`samples/calc-02/` is a responsive HP48GX-inspired demo.
-It adapts its layout to the browser window, supports portrait and landscape arrangements, and includes the `y√x` root operation.
+Note: `calc-02` keyboard shortcuts are the reference for this project.

 ## Exports

@@ -1,5 +1,4 @@

-
 :root {
 	--bg0: #10151e;
 	--bg1: #1b2432;
@@ -33,15 +32,14 @@
 html, body {
 	margin: 0;
 	min-height: 100%;
+	overflow-y: hidden;
 }

 body {
 	min-height: 100vh;
 	font-family: Arial, sans-serif;
 	color: var(--buttonText);
-	background:
-		radial-gradient(circle at top, rgba(255, 255, 255, 0.08), transparent 32%),
-		linear-gradient(180deg, var(--bg1), var(--bg0));
+	background: var(--bg0);
 }

 .app-shell {
@@ -54,44 +52,34 @@ body {

 .calculator {
 	width: 100%;
-	height: auto;
-	display: grid;
+	max-width: 460px;
+	height: 100vh;
+	max-height: 100vh;
 	padding: 8px;
+	display: grid;
+	grid-template-rows: auto auto minmax(0, 1fr);
+	gap: 8px;
 	border-radius: 8px;
-	background: linear-gradient(180deg, var(--panel2), var(--panel));
-	border: 1px solid var(--edge);
-	box-shadow: 0 26px 70px var(--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";
+	background: var(--panel);
+	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
+	justify-content: stretch;
+	align-content: start;
+	overflow: hidden;
 }

 .display-block,
 .display-panel,
+.display-buttons-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: inset 0 1px 0 rgba(255, 255, 255, 0.05);
-}
-
-.display-buttons-panel {
-	border-radius: 8px;
-	border: 1px solid rgba(255, 255, 255, 0.06);
-	background: rgba(6, 10, 16, 0.16);
-	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
+	box-shadow: none;
 }

 .display-block {
-	grid-area: display;
 	display: grid;
 	gap: 0;
 	align-self: start;
@@ -105,7 +93,7 @@ body {
 	width: 100%;
 	padding: 16px;
 	padding-bottom: 8px;
-	background: linear-gradient(180deg, var(--display), var(--display2));
+	background: var(--display);
 	color: var(--displayText);
 	font-family: "Courier New", monospace;
 	overflow: hidden;
@@ -115,9 +103,6 @@ body {
 	max-height: 138px;
 	margin-bottom: 0;
 }
-
-
-
 .display-grid {
 	height: 100%;
 	display: grid;
@@ -127,7 +112,6 @@ body {
 	gap: 2px;
 }

-
 .stack-cell {
 	display: grid;
 	grid-template-columns: 2.2ch auto minmax(0, 1fr);
@@ -139,11 +123,7 @@ body {
 	padding-block: 0;
 }

-
-.stack-label {
-	text-align: right;
-	opacity: 0.78;
-}
+/* removed extra first-column styling */

 .stack-value {
 	min-height: 0;
@@ -155,12 +135,25 @@ body {
 	font-size: 20px;
 }

+.stack-value.is-editing {
+	letter-spacing: 0.02em;
+}

+
+.stack-cell.is-selected {
+	background: transparent;
+	border-radius: 6px;
+	outline: 2px solid rgba(31, 42, 18, 0.2);
+	outline-offset: -2px;
+}
+
+.stack-cell.is-moving {
+	background: rgba(31, 42, 18, 0.18);
+}
 .display-buttons-panel {
-	grid-area: display-buttons;
 	padding: 8px;
-	align-self: start;
 	min-height: 0;
+	background: rgba(6, 10, 16, 0.16);
 }

 .display-buttons-grid {
@@ -182,10 +175,9 @@ body {
 .display-button {
 	background: linear-gradient(180deg, var(--btnTop), var(--btnBottom));
 	color: #eef2f7;
-	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 3px 0 rgba(0, 0, 0, 0.28);
+	box-shadow: none;
 }

-
 .display-button-symbol {
 	display: inline-flex;
 	align-items: center;
@@ -205,26 +197,33 @@ body {
 	padding: 6px 8px;
 }

-
-.mode-menu {
+.menu-popup {
 	position: fixed;
 	z-index: 20;
-	display: grid;
-	gap: 6px;
-	padding: 10px;
-	border-radius: 8px;
-		background: rgba(6, 10, 16, 0.16);
-	border: 1px solid rgba(255, 255, 255, 0.08);
-	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
+	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);
 }

-.mode-menu-item {
-	min-width: 120px;
+.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;
 }

-.mode-menu-item.is-active {
-	outline: 2px solid rgba(207, 224, 174, 0.7);
+.menu-popup-item.is-active {
+	outline: 1px solid rgba(207, 224, 174, 0.7);
+	outline-offset: 0;
 }

 .key-escape {
@@ -236,10 +235,22 @@ body {
 .functions-panel,
 .trigo-panel {
 	padding: 8px;
-	align-self: start;
 	min-height: 0;
 }

+.calculator > .display-block,
+.calculator > .display-buttons-panel,
+.calculator > .keypad-scroll-area {
+	justify-self: stretch;
+}
+
+.keypad-scroll-area {
+	min-height: 0;
+	overflow-y: auto;
+	scrollbar-width: thin;
+	scrollbar-color: rgba(46, 105, 135, 1);
+}
+
 .status-bar {
 	position: absolute;
 	top: 0;
@@ -279,21 +290,16 @@ body {
 .trigo-grid {
 	display: grid;
 	gap: 8px;
-	grid-auto-rows: minmax(0, 1fr);
 }

 .keypad-grid {
 	grid-template-columns: repeat(4, minmax(0, 1fr));
-	grid-template-rows: repeat(5, minmax(0, 1fr));
+	grid-template-rows: repeat(5, minmax(0, 1.7fr));
 }

 .functions-grid,
 .trigo-grid {
 	grid-template-columns: repeat(4, minmax(0, 1fr));
-}
-
-.functions-grid,
-.trigo-grid {
 	grid-template-rows: repeat(2, minmax(0, 1fr));
 }

@@ -301,14 +307,13 @@ 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: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 3px 0 rgba(0, 0, 0, 0.28);
-	transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
+	box-shadow: none;
+	transition: filter 120ms ease, opacity 120ms ease;
 	line-height: 1;
 }

@@ -316,16 +321,29 @@ button:hover {
 	filter: brightness(1.06);
 }

-
 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);
+	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;
-	border-radius: 999px;
 	min-width: 24px;
 	width: 24px;
 	height: 24px;
@@ -333,8 +351,9 @@ button:active {
 	place-items: center;
 	opacity: 0;
 	pointer-events: none;
-	transform: scale(0.9);
+	transform: scale(1);
 	background: transparent;
+	border: none;
 	box-shadow: none;
 	color: rgba(31, 42, 18, 0.58);
 	margin-left: 0;
@@ -345,9 +364,9 @@ button:active {
 }

 .stack-copy-button svg {
-	width: 13px;
-	height: 13px;
-	fill: currentColor;
+	width: 15px;
+	height: 15px;
+	fill: #0a0a0a;
 	display: block;
 }

@@ -364,7 +383,7 @@ button:active {
 }

 .stack-copy-button:active {
-	transform: translateY(2px) scale(1);
+	transform: scale(1);
 	color: rgba(31, 42, 18, 0.95);
 }

@@ -373,11 +392,59 @@ button:active {
 	outline-offset: 2px;
 }

+.stack-value.is-editing {
+	display: inline-flex;
+	align-items: center;
+	justify-content: flex-end;
+	gap: 0;
+}
+
+.edit-text {
+	display: inline-block;
+	white-space: pre;
+}
+
+.edit-caret {
+	display: inline-block;
+	width: 1px;
+	height: 1em;
+	margin: 0 0.12ch;
+	background: currentColor;
+	animation: caret-blink 1s steps(1, end) infinite;
+	transform: translateY(0.02em);
+}
+
+@keyframes caret-blink {
+	0%, 49% {
+		opacity: 1;
+	}
+	50%, 100% {
+		opacity: 0.15;
+	}
+}
+
 .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;
@@ -4,49 +4,51 @@
 	<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">
+	<link rel="stylesheet" href="./index.css?ver=1">
 </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="M9 9V5.5A1.5 1.5 0 0 1 10.5 4h8A1.5 1.5 0 0 1 20 5.5v8A1.5 1.5 0 0 1 18.5 15H15v3.5A1.5 1.5 0 0 1 13.5 20h-8A1.5 1.5 0 0 1 4 18.5v-8A1.5 1.5 0 0 1 5.5 9H9Zm1.5-3a.5.5 0 0 0-.5.5V9h5.5a1.5 1.5 0 0 1 1.5 1.5V16h.5a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-8Z"/></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="M9 9V5.5A1.5 1.5 0 0 1 10.5 4h8A1.5 1.5 0 0 1 20 5.5v8A1.5 1.5 0 0 1 18.5 15H15v3.5A1.5 1.5 0 0 1 13.5 20h-8A1.5 1.5 0 0 1 4 18.5v-8A1.5 1.5 0 0 1 5.5 9H9Zm1.5-3a.5.5 0 0 0-.5.5V9h5.5a1.5 1.5 0 0 1 1.5 1.5V16h.5a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-8Z"/></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="M9 9V5.5A1.5 1.5 0 0 1 10.5 4h8A1.5 1.5 0 0 1 20 5.5v8A1.5 1.5 0 0 1 18.5 15H15v3.5A1.5 1.5 0 0 1 13.5 20h-8A1.5 1.5 0 0 1 4 18.5v-8A1.5 1.5 0 0 1 5.5 9H9Zm1.5-3a.5.5 0 0 0-.5.5V9h5.5a1.5 1.5 0 0 1 1.5 1.5V16h.5a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-8Z"/></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="M9 9V5.5A1.5 1.5 0 0 1 10.5 4h8A1.5 1.5 0 0 1 20 5.5v8A1.5 1.5 0 0 1 18.5 15H15v3.5A1.5 1.5 0 0 1 13.5 20h-8A1.5 1.5 0 0 1 4 18.5v-8A1.5 1.5 0 0 1 5.5 9H9Zm1.5-3a.5.5 0 0 0-.5.5V9h5.5a1.5 1.5 0 0 1 1.5 1.5V16h.5a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-8Z"/></svg></button><span id="stackX" class="stack-value"></span></div>
+		<section class="calculator" 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>

-			<div class="display-buttons-panel">
-				<div class="display-buttons-grid">
-					<button id="modeButton" class="display-button">Mode</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="constButton" class="display-button">π</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 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>

-			<div class="keypad-panel">
-				<div class="keypad-grid" id="keypadGrid"></div>
-			</div>
+			<div class="keypad-scroll-area">
+				<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="functions-panel">
+						<div class="functions-grid" id="functionsGrid"></div>
+					</div>

-			<div class="trigo-panel">
-				<div class="trigo-grid" id="trigoGrid"></div>
-			</div>
+					<div class="trigo-panel">
+						<div class="trigo-grid" id="trigoGrid"></div>
+					</div>
+				</div>

 			<input id="hiddenInput" class="hidden-input" type="text" autocomplete="off" aria-hidden="true" tabindex="-1">
 		</section>
@@ -30,10 +30,10 @@ 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: '⎋', action: 'escape', className: 'key-escape' },
+	{ label: '⏎', action: 'enter', className: 'key-enter' },
 	{ label: '7', input: '7', className: 'key-default' },
 	{ label: '8', input: '8', className: 'key-default' },
 	{ label: '9', input: '9', className: 'key-default' },
@@ -53,28 +53,28 @@ const keypadKeys = [
 ];

 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: 'x²', action: 'sqr', className: 'key-default', title: 's' },
+	{ label: '√x', action: 'sqrt', className: 'key-default', title: 'r' },
+	{ label: '1/x', action: 'recip', className: 'key-default', title: 'x' },
 	{ 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: 'yˣ', action: 'pow', className: 'key-default', title: 'S' },
+	{ label: 'y√x', action: 'root', className: 'key-default', title: 'R' },
+	{ label: '10ˣ', action: 'pow10', className: 'key-default', title: 'd' },
 	{ 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: 'log', action: 'log', className: 'key-default', title: 'l / L' },
+	{ label: 'ln', action: 'ln', className: 'key-default', title: 'n / N' },
+	{ label: 'eˣ', action: 'exp', className: 'key-default', title: 'e / E' },
 	{ 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: 'sin', action: 'sin', className: 'key-default', title: 'i' },
+	{ label: 'cos', action: 'cos', className: 'key-default', title: 'o' },
+	{ label: 'tan', action: 'tan', className: 'key-default', title: 'a' },
 	{ 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: 'asin', action: 'asin', className: 'key-default', title: 'I' },
+	{ label: 'acos', action: 'acos', className: 'key-default', title: 'O' },
+	{ label: 'atan', action: 'atan', className: 'key-default', title: 'A' },
 	{ label: '', spacer: true },
 ];

@@ -94,6 +94,11 @@ function focusInput() {
 }

 let statusTimer = null;
+let editCursor = 0;
+let editRestoreValue = null;
+let stackMode = 'normal';
+let stackSelection = 0;
+let stackMoveSnapshot = null;

 function setStatus(message, isError = false, timeoutMs = 1400) {
 	if (!statusLine) return;
@@ -118,27 +123,41 @@ function clearStatus() {
 	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 === 'X' && calc.isEditing) {
+		return calc.inputValue;
 	}
-	if (label === 'Y') {
-		return calc.isEditing ? (calc.formatNumber(getStackLine(0)) || '') : (calc.formatNumber(getStackLine(1)) || '');
+	const indexMap = { X: 0, Y: 1, Z: 2, T: 3 };
+	const indexFromTop = calc.isEditing ? Math.max(0, indexMap[label] - 1) : indexMap[label];
+	return calc.formatNumber(getStackLine(indexFromTop)) || '';
+}
+
+function getVisibleStackLabel(label) {
+	if (stackMode === 'navigation' || stackMode === 'move') {
+		const indexMap = { X: 0, Y: 1, Z: 2, T: 3 };
+		return String(indexMap[label]);
 	}
-	if (label === 'Z') {
-		return calc.isEditing ? (calc.formatNumber(getStackLine(1)) || '') : (calc.formatNumber(getStackLine(2)) || '');
+	return label;
+}
+
+function updateStackLabels() {
+	const stackLabels = ['T', 'Z', 'Y', 'X'];
+	for (const label of stackLabels) {
+		const stackCell = stackEls[label].parentElement;
+		if (!stackCell) continue;
+		const labelEl = stackCell.querySelector('.stack-label');
+		if (labelEl) {
+			labelEl.textContent = `${getVisibleStackLabel(label)}:`;
+		}
 	}
-	return calc.isEditing ? (calc.formatNumber(getStackLine(2)) || '') : (calc.formatNumber(getStackLine(3)) || '');
+}
+
+function stackModeToLabel(index) {
+	return ['X', 'Y', 'Z', 'T'][Math.max(0, Math.min(3, index))] ?? 'X';
 }

 function updateCopyButtons() {
@@ -152,40 +171,191 @@ function updateCopyButtons() {
 	}
 }

+function renderEditValue() {
+	const cursor = Math.max(0, Math.min(editCursor, calc.inputValue.length));
+	stackEls.X.innerHTML = `<span class="edit-text">${calc.inputValue.slice(0, cursor)}</span><span class="edit-caret" aria-hidden="true"></span><span class="edit-text">${calc.inputValue.slice(cursor)}</span>`;
+}
+
 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');
+	const stackLabels = ['T', 'Z', 'Y', 'X'];
+	for (const label of stackLabels) {
+		const isSelected = stackMode !== 'normal' && stackModeToLabel(stackSelection) === label;
+		const value = label === 'X' && calc.isEditing ? '' : getStackDisplayValue(label);
+		stackEls[label].textContent = value;
+		stackEls[label].classList.toggle('is-editing', label === 'X' && calc.isEditing);
+		stackEls[label].classList.toggle('is-caret-visible', label === 'X' && calc.isEditing);
+		stackEls[label].parentElement?.classList.toggle('is-selected', isSelected);
+		stackEls[label].parentElement?.classList.toggle('is-moving', stackMode === 'move' && stackModeToLabel(stackSelection) === label);
+	}
+	if (calc.isEditing) {
+		renderEditValue();
+	}
+	updateStackLabels();
 	updateCopyButtons();
 	modeButton.textContent = calc.angleMode;
 }

+function stopEditing(clearValue = false) {
+	if (clearValue) {
+		calc.inputValue = '';
+	}
+	calc.isEditing = false;
+	editCursor = 0;
+}
+
+function cancelEditing() {
+	if (editRestoreValue !== null) {
+		calc.push(editRestoreValue);
+	}
+	editRestoreValue = null;
+	stopEditing(true);
+}
+
+function enterNavigationMode() {
+	if (calc.isEditing) return;
+	stackMode = 'navigation';
+	stackSelection = 0;
+	stackMoveSnapshot = null;
+	render();
+}
+
+function exitStackMode() {
+	stackMode = 'normal';
+	stackSelection = 0;
+	stackMoveSnapshot = null;
+	render();
+}
+
+function moveNavigationSelection(delta) {
+	const maxIndex = Math.max(0, calc.stack.length - 1);
+	stackSelection = Math.max(0, Math.min(maxIndex, stackSelection + delta));
+	render();
+}
+
+function beginStackMove() {
+	stackMode = 'move';
+	stackMoveSnapshot = calc.stack.slice();
+	render();
+}
+
+function restoreStackMoveSnapshot() {
+	if (!stackMoveSnapshot) return;
+	calc.stack = stackMoveSnapshot.slice();
+	stackMoveSnapshot = null;
+	render();
+}
+
+function validateStackMove() {
+	stackMoveSnapshot = null;
+	stackMode = 'normal';
+	render();
+}
+
+function moveSelectedStackValue(delta) {
+	const index = stackSelection;
+	const target = Math.max(0, Math.min(calc.stack.length - 1, index + delta));
+	if (target === index) return;
+	const value = calc.stack.splice(index, 1)[0];
+	calc.stack.splice(target, 0, value);
+	stackSelection = target;
+	render();
+}
+
+function enterNavigationMode() {
+	if (calc.isEditing) return;
+	stackMode = 'navigation';
+	stackSelection = 0;
+	render();
+}
+
+function exitStackMode() {
+	stackMode = 'normal';
+	stackSelection = 0;
+	stackMoveSnapshot = null;
+	render();
+}
+
+function moveNavigationSelection(delta) {
+	const maxIndex = Math.max(0, calc.stack.length - 1);
+	stackSelection = Math.max(0, Math.min(maxIndex, stackSelection + delta));
+	render();
+}
+
+function beginStackMove() {
+	stackMode = 'move';
+	stackMoveSnapshot = calc.stack.slice();
+	render();
+}
+
+function restoreStackMoveSnapshot() {
+	if (!stackMoveSnapshot) return;
+	calc.stack = stackMoveSnapshot.slice();
+	stackMoveSnapshot = null;
+	render();
+}
+
+function validateStackMove() {
+	stackMoveSnapshot = null;
+	stackMode = 'normal';
+	render();
+}
+
+function moveSelectedStackValue(delta) {
+	const index = stackSelection;
+	const target = Math.max(0, Math.min(calc.stack.length - 1, index + delta));
+	if (target === index) return;
+	const value = calc.stack.splice(index, 1)[0];
+	calc.stack.splice(target, 0, value);
+	stackSelection = target;
+	render();
+}
+
+function moveEditCursor(delta) {
+	editCursor = Math.max(0, Math.min(calc.inputValue.length, editCursor + delta));
+}
+
 function pushEditingValueIfNeeded() {
 	if (!calc.isEditing) return;
 	if (calc.inputValue !== '') {
 		calc.push(calc.parseInputValue(calc.inputValue));
 	}
+	editRestoreValue = null;
 	calc.inputValue = '';
 	calc.isEditing = false;
+	editCursor = 0;
+}
+
+function startEditingFromStackTop() {
+	if (!calc.isValidIndex(0)) return false;
+	const value = calc.stack[0];
+	editRestoreValue = value;
+	calc.remove(0);
+	calc.isEditing = true;
+	calc.inputValue = calc.formatNumber(value);
+	editCursor = calc.inputValue.length;
+	return true;
 }

 function inputToX(value) {
 	if (!calc.isEditing) {
 		calc.isEditing = true;
 		calc.inputValue = '';
+		editCursor = 0;
 	}
 	if (value === 'Backspace') {
-		calc.inputValue = calc.inputValue.slice(0, -1);
+		if (editCursor > 0) {
+			calc.inputValue = `${calc.inputValue.slice(0, editCursor - 1)}${calc.inputValue.slice(editCursor)}`;
+			editCursor -= 1;
+		}
 	} else {
-		calc.inputValue += value;
+		calc.inputValue = `${calc.inputValue.slice(0, editCursor)}${value}${calc.inputValue.slice(editCursor)}`;
+		editCursor += value.length;
 	}
 	if (calc.inputValue === '') {
-		calc.isEditing = false;
+		stopEditing();
 	}
 }

@@ -217,11 +387,9 @@ function execute(name) {
 			}
 		} else if (name === 'clear') {
 			calc.clear();
-			calc.inputValue = '';
-			calc.isEditing = false;
+			stopEditing(true);
 		} else if (name === 'escape') {
-			calc.inputValue = '';
-			calc.isEditing = false;
+			cancelEditing();
 		} else if (name === 'backspace') {
 			if (calc.isEditing) {
 				inputToX('Backspace');
@@ -235,35 +403,26 @@ function execute(name) {
 			}
 		} else if (name === 'neg') {
 			if (calc.isEditing) {
-				calc.inputValue = calc.inputValue.startsWith('-') ? calc.inputValue.slice(1) : `-${calc.inputValue}`;
+				const hasSign = calc.inputValue.startsWith('-');
+				calc.inputValue = hasSign ? calc.inputValue.slice(1) : `-${calc.inputValue}`;
+				moveEditCursor(hasSign ? -1 : 1);
 			} else {
-				calc.push(calc.pop() * -1);
+				calc.command('neg');
 			}
-		} 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);
 		}
+		if (!calc.isEditing) {
+			editCursor = 0;
+		}
 		render();
 	} catch (error) {
 		setStatus(error?.message || 'Operation error', true);
 	}
 }

-function createKeyButton({ label, input, action, spacer, className }) {
+function createKeyButton({ label, input, action, spacer, className, title }) {
 	if (spacer) {
 		const div = document.createElement('div');
 		return div;
@@ -272,6 +431,7 @@ function createKeyButton({ label, input, action, spacer, className }) {
 	button.type = 'button';
 	button.textContent = label;
 	button.className = className;
+	if (title) button.title = title;
 	button.addEventListener('click', () => {
 		if (input) {
 			inputToX(input);
@@ -302,6 +462,53 @@ async function copyStackValue(label) {
 function handleKeyboard(event) {
 	if (event.defaultPrevented) return;
 	const key = event.key;
+	if (stackMode === 'navigation') {
+		if (key === 'ArrowUp') {
+			event.preventDefault();
+			moveNavigationSelection(1);
+			return;
+		}
+		if (key === 'ArrowDown') {
+			event.preventDefault();
+			moveNavigationSelection(-1);
+			return;
+		}
+		if (key === 'Escape' || key === 'ArrowLeft') {
+			event.preventDefault();
+			exitStackMode();
+			return;
+		}
+		if (key === 'Enter') {
+			event.preventDefault();
+			beginStackMove();
+			return;
+		}
+		return;
+	}
+	if (stackMode === 'move') {
+		if (key === 'ArrowUp') {
+			event.preventDefault();
+			moveSelectedStackValue(1);
+			return;
+		}
+		if (key === 'ArrowDown') {
+			event.preventDefault();
+			moveSelectedStackValue(-1);
+			return;
+		}
+		if (key === 'Escape') {
+			event.preventDefault();
+			restoreStackMoveSnapshot();
+			exitStackMode();
+			return;
+		}
+		if (key === 'Enter') {
+			event.preventDefault();
+			validateStackMove();
+			return;
+		}
+		return;
+	}
 	if (/^[0-9.]$/.test(key)) {
 		event.preventDefault();
 		inputToX(key);
@@ -319,16 +526,58 @@ function handleKeyboard(event) {
 		'/': 'div',
 		'%': 'mod',
 		'^': 'pow',
+		s: 'sqr',
+		S: 'pow',
+		r: 'sqrt',
+		R: 'root',
+		x: 'recip',
+		d: 'pow10',
+		l: 'log',
+		L: 'log',
+		n: 'ln',
+		N: 'ln',
+		e: 'exp',
+		E: 'exp',
+		i: 'sin',
+		o: 'cos',
+		a: 'tan',
+		I: 'asin',
+		O: 'acos',
+		A: 'atan',
 	};
-	const arrowMap = {
-		ArrowUp: upButton,
-		ArrowDown: downButton,
-		ArrowLeft: leftButton,
-		ArrowRight: rightButton,
-	};
-	if (arrowMap[key]) {
+	if (key === 'ArrowLeft') {
 		event.preventDefault();
-		arrowMap[key].click();
+		if (calc.isEditing) {
+			moveEditCursor(-1);
+			render();
+			return;
+		}
+		leftButton.click();
+		return;
+	}
+	if (key === 'ArrowRight') {
+		event.preventDefault();
+		if (calc.isEditing) {
+			moveEditCursor(1);
+			render();
+			return;
+		}
+		rightButton.click();
+		return;
+	}
+	if (key === 'ArrowUp') {
+		event.preventDefault();
+		upButton.click();
+		return;
+	}
+	if (key === 'ArrowDown') {
+		event.preventDefault();
+		if (calc.isEditing) {
+			cancelEditing();
+			render();
+			return;
+		}
+		downButton.click();
 		return;
 	}
 	if (map[key]) {
@@ -338,41 +587,49 @@ function handleKeyboard(event) {
 }

 const modeOptions = ['deg', 'rad', 'grad'];
-let modeMenuEl = null;
+let activeMenuEl = null;

 function closeModeMenu() {
-	if (modeMenuEl) {
-		modeMenuEl.remove();
-		modeMenuEl = null;
+	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 (modeMenuEl) {
+	if (activeMenuEl) {
 		closeModeMenu();
 		return;
 	}
 	closeConstMenu();
-	const rect = modeButton.getBoundingClientRect();
-	modeMenuEl = document.createElement('div');
-	modeMenuEl.className = 'mode-menu';
-	modeMenuEl.style.top = `${rect.bottom + 6 + window.scrollY}px`;
-	modeOptions.forEach((mode) => {
-		const button = document.createElement('button');
-		button.type = 'button';
-		button.className = `mode-menu-item${mode === calc.angleMode ? ' is-active' : ''}`;
-		button.textContent = mode;
-		button.addEventListener('click', () => {
-			calc.angleMode = mode;
-			render();
-			closeModeMenu();
-		});
-		modeMenuEl.appendChild(button);
+	activeMenuEl = openMenu(modeButton, modeOptions.map((mode) => ({
+		label: mode,
+		value: mode,
+		active: mode === calc.angleMode,
+	})), (mode) => {
+		calc.angleMode = mode;
+		render();
+		closeModeMenu();
 	});
-	document.body.appendChild(modeMenuEl);
-	const menuRect = modeMenuEl.getBoundingClientRect();
-	const maxLeft = Math.max(8, window.innerWidth - menuRect.width - 8);
-	modeMenuEl.style.left = `${Math.max(8, Math.min(maxLeft, rect.left + window.scrollX))}px`;
 }

 modeButton.addEventListener('click', (event) => {
@@ -383,6 +640,7 @@ modeButton.addEventListener('click', (event) => {
 window.addEventListener('resize', () => {
 	closeModeMenu();
 	closeConstMenu();
+	render();
 });
 window.addEventListener('scroll', () => {
 	closeModeMenu();
@@ -396,10 +654,8 @@ window.addEventListener('click', (event) => {
 		if (label) copyStackValue(label);
 		return;
 	}
-	if (modeMenuEl && !event.target.closest('.mode-menu') && event.target !== modeButton) {
+	if (activeMenuEl && !event.target.closest('.menu-popup') && event.target !== modeButton && event.target !== constButton) {
 		closeModeMenu();
-	}
-	if (constMenuEl && !event.target.closest('.mode-menu') && event.target !== constButton) {
 		closeConstMenu();
 	}
 });
@@ -420,54 +676,50 @@ hiddenInput.addEventListener('paste', (event) => {
 	pasteTextIntoStack(text);
 });

-upButton.addEventListener('click', () => {});
+upButton.addEventListener('click', () => {
+	if (!calc.isEditing && stackMode === 'normal') {
+		enterNavigationMode();
+		focusInput();
+	}
+});

-const constants = [
-	{ label: 'π', value: Math.PI },
-	{ label: 'e', value: Math.E },
-	{ label: 'φ', value: (1 + Math.sqrt(5)) / 2 },
-	{ label: 'g', value: 9.80665 },
-	{ label: 'c', value: 299792458 },
-];
+const constantLabels = {
+	pi: 'π',
+	e: 'e',
+	phi: 'φ',
+	g: 'g',
+	c: 'C',
+};
+const constantOrder = ['pi', 'e', 'phi', 'g', 'c'];

-let constMenuEl = null;

 function closeConstMenu() {
-	if (constMenuEl) {
-		constMenuEl.remove();
-		constMenuEl = null;
+	if (activeMenuEl) {
+		activeMenuEl.remove();
+		activeMenuEl = null;
 	}
 }

 function toggleConstMenu() {
-	if (constMenuEl) {
+	if (activeMenuEl) {
 		closeConstMenu();
 		return;
 	}
 	closeModeMenu();
-	const rect = constButton.getBoundingClientRect();
-	constMenuEl = document.createElement('div');
-	constMenuEl.className = 'mode-menu';
-	constMenuEl.style.top = `${rect.bottom + 6 + window.scrollY}px`;
-	constants.forEach((constant) => {
-		const button = document.createElement('button');
-		button.type = 'button';
-		button.className = 'mode-menu-item';
-		button.textContent = constant.label;
-		button.addEventListener('click', () => {
-			pushEditingValueIfNeeded();
-			calc.push(constant.value);
-			render();
-			clearStatus();
-			closeConstMenu();
-			focusInput();
-		});
-		constMenuEl.appendChild(button);
+	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();
 	});
-	document.body.appendChild(constMenuEl);
-	const menuRect = constMenuEl.getBoundingClientRect();
-	const desiredLeft = rect.right + window.scrollX - menuRect.width;
-	constMenuEl.style.left = `${Math.max(8, desiredLeft)}px`;
 }

 constButton.addEventListener('click', (event) => {
@@ -475,20 +727,34 @@ constButton.addEventListener('click', (event) => {
 	toggleConstMenu();
 });

-leftButton.addEventListener('click', () => {});
-
+leftButton.addEventListener('click', () => {
+	if (calc.isEditing) {
+		moveEditCursor(-1);
+		render();
+		focusInput();
+		return;
+	}
+	if (stackMode === 'navigation') {
+		exitStackMode();
+		focusInput();
+	}
+});
 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);
+	if (!calc.isEditing && startEditingFromStackTop()) {
 		render();
 		focusInput();
 	}
 });

+
+
 rightButton.addEventListener('click', () => {
+	if (calc.isEditing) {
+		moveEditCursor(1);
+		render();
+		focusInput();
+		return;
+	}
 	execute('swap');
 });

@@ -498,7 +764,6 @@ window.addEventListener('pageshow', focusInput);
 window.addEventListener('focus', focusInput);
 window.addEventListener('pointerdown', focusInput, true);
 window.addEventListener('mousedown', focusInput, true);
-window.addEventListener('click', focusInput, true);

 hiddenInput.setAttribute('inputmode', 'none');
 hiddenInput.setAttribute('readonly', 'readonly');
@@ -513,7 +778,7 @@ hiddenInput.addEventListener('focus', () => {
 });

 document.addEventListener('click', (event) => {
-	if (!isTouchDevice && !event.target.closest('.mode-menu')) {
+	if (!isTouchDevice && !event.target.closest('.menu-popup')) {
 		focusInput();
 	}
 });
@@ -1,10 +0,0 @@
-┌──────────── Display ────────────┐ ┌────── Functions ─────┐ ┌──────────── Keypad ─────────────┐
-| T:                              | | x^2 | y^x | 1/x  | % | | +/- | Clear | Esc   | backspace |
-| Z:                              | | √x  | y√x | 10^x |   | | 7   | 8     | 9     | /         |
-| Y:                              | | log | ln  |      |   | | 4   | 5     | 6     | *         |
-| X:                              | └──────────────────────┘ | 1   | 2     | 3     | -         |
-└─────────────────────────────────┘ ┌─────── Trigo ────────┐ | 0   | .     | Enter | +         |
-┌──────── Display Buttons ────────┐ | sin  | cos   | tan   | └─────────────────────────────────┘
-| Mode  | Paste  | Up    | Const  | | asin | acos  | atan  | 
-|       | Right  | Down  | Right  | └──────────────────────┘ 
-└─────────────────────────────────┘
@@ -1,26 +1,52 @@
+# Calc 02 Visual Portrait
+
+## Display
+
+```
 ┌──────────── Display ────────────┐
 | T:                              |
 | Z:                              |
 | Y:                              |
 | X:                              |
 └─────────────────────────────────┘
+```
+
+## Display Buttons
+
+```
 ┌──────── Display Buttons ────────┐
-| Mode  | Paste  | Up    | Const  |
-|       | Right  | Down  | Right  |
+| Const | Paste  | Up    | Mode   |
+|       | Left   | Down  | Right  |
 └─────────────────────────────────┘
+```
+
+## Keypad
+
+```
 ┌──────────── Keypad ─────────────┐
-| +/- | Clear | Esc   | backspace |
-| 7   | 8     | 9     | /         |
-| 4   | 5     | 6     | *         |
-| 1   | 2     | 3     | -         |
-| 0   | .     | Enter | +         |
+| Clear | Backspace | Esc | Enter |
+| 7     | 8         | 9   | /     |
+| 4     | 5         | 6   | *     |
+| 1     | 2         | 3   | -     |
+| 0     | .         | +/- | +     |
 └─────────────────────────────────┘
-┌─────────── Functions ───────────┐
-| x^2 | y^x   | 1/x   | %         |
-| √x  | y√x   | 10^x  |           |
-| log | ln    |       |           |
+```
+
+## Functions
+
+```
+┌──────────── Functions ──────────┐
+| x^2  | √x    | 1/x   | %        |
+| y^x  | y√x   | 10^x  |          |
+| log  | ln    | e^x   |          |
 └─────────────────────────────────┘
-┌───────────── Trigo ─────────────┐
-| sin  | cos   | tan  |           |
-| asin | acos  | atan |           |
+```
+
+## Trigo
+
+```
+┌──────────── Trigo ──────────────┐
+| sin  | cos   | tan   |          |
+| asin | acos  | atan  |          |
 └─────────────────────────────────┘
+```
@@ -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,18 @@ class RpnCalculator {
      aliases: ['^', 'y^x'],
      execute: (calc, a, b) => Math.pow(a, b),
    },
+    pow10: {
+      category: 'Arithmetic',
+      argCount: 1,
+      aliases: ['10^x'],
+      execute: (calc, a) => Math.pow(10, a),
+    },
+    exp: {
+      category: 'Arithmetic',
+      argCount: 1,
+      aliases: ['e^x'],
+      execute: (calc, a) => Math.exp(a),
+    },
    root: {
      category: 'Arithmetic',
      argCount: 2,
@@ -192,7 +207,7 @@ class RpnCalculator {
  static getOperationsByCategory() {
    return {
      Stack: ['dup', 'drop', 'swap', 'clear', 'enter'],
-      Arithmetic: ['add', 'sub', 'mul', 'div', 'mod', 'pow', 'root', 'sqr', 'neg', 'sqrt', 'recip', 'log', 'ln'],
+      Arithmetic: ['add', 'sub', 'mul', 'div', 'mod', 'pow', 'pow10', 'exp', 'root', 'sqr', 'neg', 'sqrt', 'recip', 'log', 'ln'],
      Trigonometry: ['sin', 'cos', 'tan', 'asin', 'acos', 'atan'],
    };
  }
@@ -212,6 +227,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;
@@ -257,6 +281,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');
@@ -408,6 +471,10 @@ class RpnCalculator {
  getConstants() {
    return { ...this.constants };
  }
+
+  listConstants() {
+    return this.getConstants();
+  }
 }

 if (typeof window !== 'undefined') {
Author	SHA1	Message	Date
matmoul	9abdc33713	fix(calc-02): update stack labels for navigation and move modes	2026-05-17 05:34:06 +02:00
matmoul	6dd9550890	feat: add stack navigation and reordering controls	2026-05-17 04:24:43 +02:00
matmoul	f44fb8c252	docs: align calculator visual portrait table cell	2026-05-17 03:23:47 +02:00
matmoul	5cc97f754d	fix(calc-02): restore edited value on cancel Canceling stack-top editing now pushes the original value back before leaving edit mode, including Escape and ArrowDown handling.	2026-05-17 01:31:43 +02:00
matmoul	736154110d	fix: correct calc-02 function key shortcuts	2026-05-17 00:38:32 +02:00
matmoul	62a0f447c5	feat: update calculator function key labels and shortcuts Add titles for function and trig buttons to expose keyboard hints, and remap reciprocal/power10 shortcuts to match the new key layout. Update the portrait visual spec to reflect the revised keypad and function ordering.	2026-05-17 00:35:50 +02:00
matmoul	16b567731f	docs: update calc-02 shortcut reference and key mappings	2026-05-17 00:14:24 +02:00
matmoul	b710d5f0eb	refactor(calc-02): simplify stack display and edit cursor handling	2026-05-16 23:43:49 +02:00
matmoul	07a4c533fb	fix: preserve full calc-02 stack while limiting display to top 4 Keep the calculator stack unlimited in the demo and only constrain the rendered stack view. Also restore the edit cursor position when pulling a value into the input from the stack.	2026-05-16 23:40:13 +02:00
matmoul	acc075d30c	feat(calc-02): add cursor-aware editing in the X stack display	2026-05-16 23:30:50 +02:00
matmoul	6a37c7c1e8	feat: add pow10 and exp arithmetic operations	2026-05-16 23:15:22 +02:00
matmoul	5f2d18df99	fix(calc-02): constrain keypad area with internal scrolling Wrap the keypad, function, and trig panels in a dedicated scroll area so the calculator shell can use a fixed grid layout without overflowing the viewport. Also update panel styling to preserve spacing and scrollbar behavior.	2026-05-16 22:40:23 +02:00
matmoul	c69380d057	refactor(samples): reorder calculator keypad keys	2026-05-16 21:58:51 +02:00
matmoul	c11a75d7f7	fix: bust calc sample stylesheet cache	2026-05-16 21:52:05 +02:00
matmoul	813fae1b61	refactor(calc-02): simplify calculator layout structure Move the display and button panels into a single wrapper and rely on viewport-height sizing with hidden page overflow to keep the calculator contained. Also trim redundant panel-specific layout rules and styling.	2026-05-16 21:41:47 +02:00
matmoul	208db58fe7	fix: make calc-02 panels stretch and scroll within container	2026-05-16 20:24:43 +02:00
matmoul	ea6401a006	fix: constrain calculator width on calc-02 sample	2026-05-16 20:17:19 +02:00
matmoul	ea61ec17d5	fix: remove portrait class from calc-02 calculator shell	2026-05-16 19:44:09 +02:00
matmoul	a4bbffe65b	feat: replace calculator enter key label with symbol	2026-05-16 18:41:03 +02:00
matmoul	a24142cd72	docs: remove obsolete temporary README file	2026-05-16 05:23:42 +02:00
matmoul	4df99d0738	docs: update README for default demo and command aliases	2026-05-16 05:01:17 +02:00
matmoul	1cef2d2d6a	fix(calc-02): reorder display buttons in portrait layout	2026-05-16 04:44:18 +02:00
matmoul	442a97d573	fix: reorder calc display buttons in portrait layout	2026-05-16 04:34:20 +02:00
matmoul	44ce67c5cc	docs: align calc-02 visual portrait tables	2026-05-16 04:20:22 +02:00
matmoul	a7411243de	fix: reorder display buttons in calc-02 sample	2026-05-16 04:14:28 +02:00
matmoul	f8de4e1709	docs: update project memory for calc-02 UI and command notes	2026-05-16 04:10:19 +02:00
matmoul	003d4fde1b	feat(calc-02): add shared popup menus for mode and constants 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.	2026-05-16 04:04:01 +02:00
matmoul	e5f50aee0a	fix: reorder calc-02 display buttons	2026-05-16 03:44:20 +02:00
matmoul	6a7a60a9bc	fix: align calc menus with trigger width	2026-05-16 03:41:25 +02:00
matmoul	a37ed59b40	fix: reorder calc-02 display buttons	2026-05-16 03:37:04 +02:00
matmoul	c09fdc7e0f	refactor(calc-02): simplify display and button styling Remove layered shadows and pressed-state transforms from the calculator UI, and update the stack copy icon markup and active feedback to match the new flat design.	2026-05-16 03:21:49 +02:00
matmoul	849170ea49	docs: update calc-02 portrait visual reference Move the portrait layout documentation to samples/calc-02/visual-portrait.md and refresh the project memory note to point to the new reference.	2026-05-16 03:11:00 +02:00
matmoul	0100da80bb	fix(calc-02): adjust keypad grid sizing	2026-05-16 03:02:43 +02:00
matmoul	e1fd730db5	fix: remove panel border from calc sample	2026-05-16 02:48:59 +02:00
matmoul	ba53f51bf7	refactor(samples): simplify calc-02 background styling	2026-05-16 02:48:00 +02:00
matmoul	534bbc0afb	feat: add dynamic constant management to the calculator core	2026-05-16 02:23:20 +02:00