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.

.memory/project.md

@@ -1,6 +1,8 @@
-# Project memory
+# State
-
+- Core engine: `src/rpn-calculator.js`
-- RPN calculator JS project.
+- Reference demo: `samples/calc-02/` (portrait-first HP48GX layout, compact mode/constants popups; Const button comes before Mode in the display row)
-- Read `.memory/state.md` for current state.
+- Important UI behavior: mode button shows the current angle mode; keyboard focus stays on the hidden input on desktop; clipboard paste is supported
-- Keep names and commands in English.
+- Public API: `push`, `pop`, `clear`, `swap`, `remove`, `edit`, `isValidIndex`, `input`, `command`, `getOperationsByCategory`, `getConstants`, `listConstants`, `setConstant`, `removeConstant`, `hasConstant`
-- Update memory files based on events: engine, demo, API, commands, exports, docs, or tasks.
+- 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

@@ -1,9 +1,8 @@
 # State
 - Core engine: `src/rpn-calculator.js`
-- Active demo: `samples/calc-02/` responsive HP48GX layout with HP48-like X-line editing; display-adjacent button row stays in 4 columns
+- Default demo: `samples/dev/` classic browser demo; `samples/calc-02/` remains the portrait-first HP48GX-inspired reference
-- 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`, `listConstants`, `setConstant`, `removeConstant`, `hasConstant`
-- Public API: `push`, `pop`, `clear`, `swap`, `remove`, `edit`, `isValidIndex`, `input`, `command`, `getOperationsByCategory`, `getConstants`
 - Config: `maxSize`, `base`, `angleMode`, `enabledCommands`
-- Commands: arithmetic, stack, trigonometry, constants `pi` and `e`
+- 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 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
+- 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`

README.md

@@ -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`
-- a browser demo in `samples/dev/`
+- a classic browser demo in `samples/dev/`
-- a command system centralized in a single operation dictionary
+- a portrait-first HP48GX-inspired demo in `samples/calc-02/`
-- a small public API focused on stack operations and generic command dispatch
+- 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-02/index.html`: portrait-first HP48GX-style demo entry point
-- `samples/calc-01/index.css`: demo styles
+- `samples/calc-02/index.css`: portrait-first demo styles
-- `samples/calc-01/index.js`: demo UI and keyboard logic
+- `samples/calc-02/index.js`: portrait-first HP48GX-style 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`: new 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:
 
@@ -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(...)`:
 
@@ -110,6 +116,7 @@ calc.command('e');
 - `div` alias: `/`
 - `mod` alias: `%`
 - `pow` aliases: `^`, `y^x`
+- `root` aliases: `y√x`, `yroot`, `nroot`
 - `sqr`
 - `neg`
 - `sqrt` alias: `sqrt(x)`
@@ -134,6 +141,7 @@ calc.command('e');
 - `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`
@@ -232,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:
 
@@ -242,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:
 
@@ -268,11 +281,6 @@ The current demo supports:
 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 new responsive HP48GX-inspired demo.
-It adapts its layout to the browser window and switches between the supplied portrait and landscape arrangements.
-
 ## Exports
 
 `RpnCalculator` is exposed in both environments:

samples/calc-02/index.css

@@ -1,3 +1,4 @@
+
 :root {
 	--bg0: #10151e;
 	--bg1: #1b2432;
@@ -19,8 +20,8 @@
 	--btnDangerBottom: #402d2f;
 	--btnEscapeTop: #6a4a2a;
 	--btnEscapeBottom: #4a331d;
-	--btnEnterTop: #465349;
+	--btnEnterTop: #4f7f4d;
-	--btnEnterBottom: #303a31;
+	--btnEnterBottom: #355a34;
 	--btnText: #eef2f7;
 }
 
@@ -37,81 +38,94 @@ body {
 	min-height: 100vh;
 	font-family: Arial, sans-serif;
 	color: var(--buttonText);
-	background:
+	background: var(--bg0);
-		radial-gradient(circle at top, rgba(255, 255, 255, 0.08), transparent 32%),
-		linear-gradient(180deg, var(--bg1), var(--bg0));
 }
 
 .app-shell {
 	min-height: 100vh;
 	display: grid;
-	place-items: center;
+	align-items: start;
-	padding: clamp(12px, 2vw, 28px);
+	justify-items: center;
+	padding: 0;
 }
 
 .calculator {
-	width: min(100vw - 24px, 1120px);
+	width: 100%;
-	height: min(100vh - 24px, 900px);
+	height: auto;
 	display: grid;
-	gap: clamp(10px, 1.4vw, 18px);
+	padding: 8px;
-	padding: clamp(12px, 1.8vw, 18px);
+	border-radius: 8px;
-	border-radius: 28px;
+	background: var(--panel);
-	background: linear-gradient(180deg, var(--panel2), var(--panel));
+	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
-	border: 1px solid var(--edge);
+	grid-template-columns: 1fr;
-	box-shadow: 0 26px 70px var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.08);
+	grid-template-rows: auto auto auto auto auto;
-	grid-template-columns: 1.3fr 0.9fr;
+	row-gap: 6px;
-	grid-template-rows: minmax(0, 0.62fr) min-content minmax(180px, 1fr) minmax(180px, 1fr);
-	align-content: start;
 	grid-template-areas:
-		"display functions"
+		"display"
-		"buttons functions"
+		"display-buttons"
-		"keypad functions"
+		"keypad"
-		"keypad trigo";
+		"functions"
-
+		"trigo";
-
 }
 
+.display-block,
 .display-panel,
-.display-buttons-panel,
 .keypad-panel,
 .functions-panel,
-.trigo-panel,
+.trigo-panel {
-.status-line {
+	border-radius: 8px;
-	border-radius: 18px;
 	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-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 {
-	grid-area: display;
 	position: relative;
-	padding: clamp(12px, 1.5vw, 16px);
+	width: 100%;
-	background: linear-gradient(180deg, var(--display), var(--display2));
+	padding: 16px;
+	padding-bottom: 8px;
+	background: var(--display);
 	color: var(--displayText);
 	font-family: "Courier New", monospace;
 	overflow: hidden;
-	height: clamp(112px, 18vw, 160px);
+	box-sizing: border-box;
-	max-height: 140px;
+	height: 138px;
-	align-self: start;
+	min-height: 138px;
+	max-height: 138px;
 	margin-bottom: 0;
-	min-height: 0;
 }
-
 .display-grid {
 	height: 100%;
 	display: grid;
 	grid-template-columns: 1fr;
-	grid-template-rows: repeat(4, minmax(0, 1fr));
+	grid-template-rows: repeat(4, minmax(0, auto));
+	align-content: start;
 	gap: 2px;
 }
 
 .stack-cell {
 	display: grid;
-	grid-template-columns: 2.2ch 1fr;
+	grid-template-columns: 2.2ch auto minmax(0, 1fr);
 	align-items: center;
-	gap: 12px;
+	gap: 8px;
-	font-size: clamp(18px, 3vw, 30px);
+	font-size: 20px;
 	line-height: 1;
 	min-height: 0;
 	padding-block: 0;
@@ -127,59 +141,85 @@ body {
 	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-panel {
+.display-buttons-grid {
-	grid-area: buttons;
-	padding: 8px;
 	display: grid;
 	grid-template-columns: repeat(4, minmax(0, 1fr));
-	grid-template-rows: repeat(2, auto);
 	gap: 8px;
 	align-content: start;
 	align-items: stretch;
-	grid-auto-flow: row;
+}
-	grid-auto-rows: auto;
+
-	background: linear-gradient(180deg, #242a33, #1a1f27);
+.display-button-spacer {
-	border-color: rgba(255, 255, 255, 0.04);
+	pointer-events: none;
-	margin-top: 0;
+	visibility: hidden;
+	background: transparent;
+	border-color: transparent;
+	box-shadow: none;
 }
 
 .display-button {
-	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 3px 0 rgba(0, 0, 0, 0.34);
+	background: linear-gradient(180deg, var(--btnTop), var(--btnBottom));
-	background-clip: padding-box;
+	color: #eef2f7;
-	background: linear-gradient(180deg, #3a414c, #252b34);
+	box-shadow: none;
-	color: #e8edf3;
-	border-color: rgba(255, 255, 255, 0.05);
 }
 
-.display-button-offset {
+.display-button-symbol {
-	grid-column-start: 2;
+	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);
 }
 
-.display-buttons-panel > button {
+.paste-symbol {
-	width: 100%;
+	font-size: 1em;
 }
 
-.mode-menu {
+.display-buttons-grid > button {
+	padding: 6px 8px;
+}
+
+.menu-popup {
 	position: fixed;
 	z-index: 20;
-	display: grid;
+	display: flex;
-	gap: 6px;
+	flex-direction: column;
-	padding: 10px;
+	gap: 4px;
-	border-radius: 14px;
+	padding: 6px;
-	background: rgba(18, 24, 33, 0.98);
+	border-radius: 6px;
-	border: 1px solid rgba(255, 255, 255, 0.08);
+	background: rgba(16, 21, 30, 0.96);
-	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
+	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 {
+.menu-popup-item {
-	min-width: 120px;
+	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 {
+.menu-popup-item.is-active {
-	outline: 2px solid rgba(207, 224, 174, 0.7);
+	outline: 1px solid rgba(207, 224, 174, 0.7);
+	outline-offset: 0;
 }
 
 .key-escape {
@@ -187,33 +227,12 @@ body {
 	color: #eef2f7;
 }
 
-.display-button:nth-child(6) {
+.keypad-panel,
-	background: linear-gradient(180deg, #343b46, #20262e);
+.functions-panel,
-}
-
-.display-button:nth-child(7) {
-	background: linear-gradient(180deg, #343b46, #20262e);
-}
-
-.keypad-panel {
-	grid-area: keypad;
-	padding: 10px;
-}
-
-.functions-panel {
-	grid-area: functions;
-	padding: 10px;
-	align-self: start;
-	min-height: 0;
-	padding-top: 10px;
-}
-
 .trigo-panel {
-	grid-area: trigo;
+	padding: 8px;
-	padding: 10px;
 	align-self: start;
 	min-height: 0;
-	padding-top: 10px;
 }
 
 .status-bar {
@@ -255,35 +274,31 @@ 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));
 }
 
 button {
 	border: 1px solid rgba(14, 18, 25, 0.85);
-	border-radius: 12px;
+	border-radius: 8px;
-	padding: 10px 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);
+	box-shadow: none;
-	transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease;
+	transition: filter 120ms ease, opacity 120ms ease;
 	line-height: 1;
 }
 
@@ -291,17 +306,74 @@ button:hover {
 	filter: brightness(1.06);
 }
 
-.display-button:hover {
-	filter: brightness(1.08);
-}
-
 button:active {
-	transform: translateY(2px);
+	transform: none;
-	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 0 rgba(0, 0, 0, 0.25);
+	box-shadow: none;
 }
 
-.display-button:active {
+.stack-copy-button:active {
-	transform: translateY(2px);
+	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 {
@@ -309,13 +381,25 @@ button:active {
 	color: #eef2f7;
 }
 
-.key-accent {
+.keypad-grid > button {
-	background: linear-gradient(180deg, var(--btnAccentTop), var(--btnAccentBottom));
+	min-height: 1.7em;
-	color: #eef2f7;
 }
 
-.key-alt {
+#keypadGrid > button {
-	background: linear-gradient(180deg, var(--btnAltTop), var(--btnAltBottom));
+	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;
 }
 
@@ -327,6 +411,7 @@ button:active {
 .key-enter {
 	background: linear-gradient(180deg, var(--btnEnterTop), var(--btnEnterBottom));
 	color: #eef2f7;
+	padding-inline: 6px;
 }
 
 .hidden-input {
@@ -338,69 +423,4 @@ button:active {
 	pointer-events: none;
 }
 
-@media (orientation: portrait), (max-width: 860px) {
-	.calculator {
-		width: min(100vw - 16px, 760px);
-		height: auto;
-		min-height: calc(100vh - 16px);
-		grid-template-columns: 1fr;
-		grid-template-rows: minmax(160px, auto) auto minmax(220px, auto) auto auto;
-		grid-template-areas:
-			"display"
-			"buttons"
-			"keypad"
-			"functions"
-			"trigo";
-	}
 
-	.display-buttons-panel {
-		grid-template-columns: repeat(4, minmax(0, 1fr));
-		grid-template-rows: repeat(2, auto);
-		margin-top: 0;
-	}
-
-	.keypad-grid {
-		grid-template-rows: repeat(5, minmax(42px, 1fr));
-	}
-
-	.functions-grid,
-	.trigo-grid {
-		grid-auto-rows: minmax(0, 1fr);
-		grid-template-rows: repeat(2, minmax(0, 1fr));
-	}
-}
-
-@media (max-width: 520px) {
-	.app-shell {
-		padding: 8px;
-	}
-
-	.calculator {
-		width: 100%;
-		min-height: calc(100vh - 16px);
-		border-radius: 20px;
-		padding: 10px;
-		gap: 10px;
-	}
-
-	.display-panel {
-		padding: 10px;
-	}
-
-	.stack-cell {
-		font-size: clamp(16px, 5.2vw, 22px);
-		gap: 8px;
-	}
-
-	button {
-		border-radius: 10px;
-		padding: 8px 6px;
-		font-size: 13px;
-		line-height: 1;
-	}
-
-	.display-buttons-panel {
-		gap: 6px;
-	}
-
-}

samples/calc-02/index.html

@@ -9,26 +9,31 @@
 <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><span id="stackT" class="stack-value"></span></div>
+							<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><span id="stackZ" 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><span id="stackY" 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><span id="stackX" 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">
-				<button id="modeButton" class="display-button">Mode</button>
+				<div class="display-buttons-grid">
-				<button id="pasteButton" class="display-button">⎘</button>
-				<button id="upButton" class="display-button">↑</button>
 					<button id="constButton" class="display-button">π</button>
-				<button id="leftButton" class="display-button display-button-offset">←</button>
+					<button id="pasteButton" class="display-button"><span class="display-button-symbol paste-symbol">⎘</span></button>
-				<button id="downButton" class="display-button">↓</button>
+					<button id="upButton" class="display-button"><span class="display-button-symbol arrow-symbol">↑</span></button>
-				<button id="rightButton" class="display-button">→</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">

samples/calc-02/index.js

@@ -16,6 +16,13 @@ const stackEls = {
 	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');
@@ -23,22 +30,22 @@ const calculatorEl = document.querySelector('.calculator');
 const statusLine = document.getElementById('statusLine');
 
 const keypadKeys = [
-	{ label: 'Enter', action: 'enter', className: 'key-enter' },
+	{ 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: '÷', 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: '×', 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: '−', action: 'sub', className: 'key-accent' },
 	{ label: '0', input: '0', className: 'key-default' },
 	{ label: '.', input: '.', className: 'key-default' },
 	{ label: '±', action: 'neg', className: 'key-default' },
@@ -51,7 +58,7 @@ const functionKeys = [
 	{ 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: 'pow', 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' },
@@ -71,7 +78,6 @@ const trigoKeys = [
 	{ label: '', spacer: true },
 ];
 
-
 const isTouchDevice = window.matchMedia('(pointer: coarse)').matches || 'ontouchstart' in window;
 
 function focusInput() {
@@ -103,6 +109,15 @@ function setStatus(message, isError = false, timeoutMs = 1400) {
 	}, 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();
@@ -113,16 +128,40 @@ 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);
-	const editingValue = calc.isEditing ? calc.inputValue : '';
+	stackEls.X.textContent = getStackDisplayValue('X');
-	stackEls.X.textContent = calc.isEditing ? editingValue : (calc.formatNumber(getStackLine(0)) || '');
+	stackEls.Y.textContent = getStackDisplayValue('Y');
-	stackEls.Y.textContent = calc.isEditing ? (calc.formatNumber(getStackLine(0)) || '') : (calc.formatNumber(getStackLine(1)) || '');
+	stackEls.Z.textContent = getStackDisplayValue('Z');
-	stackEls.Z.textContent = calc.isEditing ? (calc.formatNumber(getStackLine(1)) || '') : (calc.formatNumber(getStackLine(2)) || '');
+	stackEls.T.textContent = getStackDisplayValue('T');
-	stackEls.T.textContent = calc.isEditing ? (calc.formatNumber(getStackLine(2)) || '') : (calc.formatNumber(getStackLine(3)) || '');
+	updateCopyButtons();
 	modeButton.textContent = calc.angleMode;
 }
 
@@ -189,7 +228,6 @@ function execute(name) {
 			} else if (calc.isValidIndex(0)) {
 				calc.remove(0);
 			}
-
 		} else if (name === 'swap') {
 			pushEditingValueIfNeeded();
 			if (calc.isValidIndex(1)) {
@@ -203,11 +241,17 @@ function execute(name) {
 			}
 		} 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();
@@ -244,6 +288,17 @@ function buildGrid(container, keys) {
 	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;
@@ -265,6 +320,17 @@ function handleKeyboard(event) {
 		'%': '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]);
@@ -272,48 +338,60 @@ function handleKeyboard(event) {
 }
 
 const modeOptions = ['deg', 'rad', 'grad'];
-let modeMenuEl = null;
+let activeMenuEl = null;
 
 function closeModeMenu() {
-	if (modeMenuEl) {
+	if (activeMenuEl) {
-		modeMenuEl.remove();
+		activeMenuEl.remove();
-		modeMenuEl = null;
+		activeMenuEl = null;
 	}
 }
 
-function openModeMenu() {
+function openMenu(anchorButton, items, onSelect) {
-	closeModeMenu();
+	const rect = anchorButton.getBoundingClientRect();
-	const rect = modeButton.getBoundingClientRect();
+	const menu = document.createElement('div');
-	modeMenuEl = document.createElement('div');
+	menu.className = 'menu-popup';
-	modeMenuEl.className = 'mode-menu';
+	menu.style.top = `${rect.bottom + 6 + window.scrollY}px`;
-	modeMenuEl.style.top = `${rect.bottom + 6 + window.scrollY}px`;
+	menu.style.left = `${rect.left + window.scrollX}px`;
-	modeMenuEl.style.left = `${rect.left + window.scrollX}px`;
+	menu.style.minWidth = `${rect.width}px`;
-	modeOptions.forEach((mode) => {
+	for (const item of items) {
 		const button = document.createElement('button');
 		button.type = 'button';
-		button.className = `mode-menu-item${mode === calc.angleMode ? ' is-active' : ''}`;
+		button.className = `menu-popup-item${item.active ? ' is-active' : ''}`;
-		button.textContent = mode;
+		button.textContent = item.label;
-		button.addEventListener('click', () => {
+		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();
 	});
-		modeMenuEl.appendChild(button);
-	});
-	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) => {
 	event.stopPropagation();
-	openModeMenu();
+	toggleModeMenu();
 });
 
 window.addEventListener('resize', () => {
 	closeModeMenu();
 	closeConstMenu();
+	render();
 });
 window.addEventListener('scroll', () => {
 	closeModeMenu();
@@ -321,10 +399,14 @@ window.addEventListener('scroll', () => {
 }, true);
 
 window.addEventListener('click', (event) => {
-	if (modeMenuEl && !event.target.closest('.mode-menu') && event.target !== modeButton) {
+	const stackCopyButton = event.target.closest('.stack-copy-button');
-		closeModeMenu();
+	if (stackCopyButton) {
+		const label = stackCopyButton.dataset.copyStack;
+		if (label) copyStackValue(label);
+		return;
 	}
-	if (constMenuEl && !event.target.closest('.mode-menu') && event.target !== constButton) {
+	if (activeMenuEl && !event.target.closest('.menu-popup') && event.target !== modeButton && event.target !== constButton) {
+		closeModeMenu();
 		closeConstMenu();
 	}
 });
@@ -333,6 +415,7 @@ pasteButton.addEventListener('click', async () => {
 	try {
 		const text = await navigator.clipboard.readText();
 		pasteTextIntoStack(text);
+		clearStatus();
 	} catch (error) {
 		setStatus('Paste unavailable', true);
 	}
@@ -346,58 +429,51 @@ hiddenInput.addEventListener('paste', (event) => {
 
 upButton.addEventListener('click', () => {});
 
-const constants = [
+const constantLabels = {
-	{ label: 'π', value: Math.PI },
+	pi: 'π',
-	{ label: 'e', value: Math.E },
+	e: 'e',
-	{ label: 'φ', value: (1 + Math.sqrt(5)) / 2 },
+	phi: 'φ',
-	{ label: 'g', value: 9.80665 },
+	g: 'g',
-	{ label: 'c', value: 299792458 },
+	c: 'c',
-];
+};
+const constantOrder = ['pi', 'e', 'phi', 'g', 'c'];
 
-let constMenuEl = null;
 
 function closeConstMenu() {
-	if (constMenuEl) {
+	if (activeMenuEl) {
-		constMenuEl.remove();
+		activeMenuEl.remove();
-		constMenuEl = null;
+		activeMenuEl = null;
 	}
 }
 
-function openConstMenu() {
+function toggleConstMenu() {
+	if (activeMenuEl) {
 		closeConstMenu();
-	const rect = constButton.getBoundingClientRect();
+		return;
-	constMenuEl = document.createElement('div');
+	}
-	constMenuEl.className = 'mode-menu';
+	closeModeMenu();
-	constMenuEl.style.top = `${rect.bottom + 6 + window.scrollY}px`;
+	const availableConstants = calc.listConstants();
-	constMenuEl.style.left = `${rect.left + window.scrollX}px`;
+	const keys = [...constantOrder, ...Object.keys(availableConstants).filter((name) => !constantOrder.includes(name))]
-	constants.forEach((constant) => {
+		.filter((name) => Object.prototype.hasOwnProperty.call(availableConstants, name));
-		const button = document.createElement('button');
+	activeMenuEl = openMenu(constButton, keys.map((name) => ({
-		button.type = 'button';
+		label: constantLabels[name] ?? name,
-		button.className = 'mode-menu-item';
+		value: name,
-		button.textContent = constant.label;
+	})), (name) => {
-		button.addEventListener('click', () => {
 		pushEditingValueIfNeeded();
-			calc.push(constant.value);
+		calc.push(availableConstants[name]);
 		render();
-			setStatus(`Inserted ${constant.label}`);
+		clearStatus();
 		closeConstMenu();
 		focusInput();
 	});
-		constMenuEl.appendChild(button);
-	});
-	document.body.appendChild(constMenuEl);
-	const menuRect = constMenuEl.getBoundingClientRect();
-	const maxLeft = Math.max(8, window.innerWidth - menuRect.width - 8);
-	constMenuEl.style.left = `${Math.max(8, Math.min(maxLeft, rect.left + window.scrollX))}px`;
 }
 
 constButton.addEventListener('click', (event) => {
 	event.stopPropagation();
-	openConstMenu();
+	toggleConstMenu();
 });
 
 leftButton.addEventListener('click', () => {});
-
 downButton.addEventListener('click', () => {
 	if (!calc.isEditing && calc.isValidIndex(0)) {
 		const value = calc.stack[0];
@@ -409,19 +485,16 @@ downButton.addEventListener('click', () => {
 	}
 });
 
-
 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);
-window.addEventListener('click', focusInput, true);
 
 hiddenInput.setAttribute('inputmode', 'none');
 hiddenInput.setAttribute('readonly', 'readonly');
@@ -436,7 +509,7 @@ hiddenInput.addEventListener('focus', () => {
 });
 
 document.addEventListener('click', (event) => {
-	if (!isTouchDevice && !event.target.closest('.mode-menu')) {
+	if (!isTouchDevice && !event.target.closest('.menu-popup')) {
 		focusInput();
 	}
 });

samples/calc-02/visual-landscape.txt

@@ -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  | └──────────────────────┘ 
-└─────────────────────────────────┘

samples/calc-02/visual-portrait.md

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

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');
@@ -394,6 +459,10 @@ class RpnCalculator {
   getConstants() {
     return { ...this.constants };
   }
+
+  listConstants() {
+    return this.getConstants();
+  }
 }
 
 if (typeof window !== 'undefined') {