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,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
+- Reference demo: `samples/calc-02/` (portrait-first HP48GX layout, compact mode/constants popups; Const button comes before Mode in the display row)
+- Important UI behavior: mode button shows the current angle mode; keyboard focus stays on the hidden input on desktop; clipboard paste is supported
 - Public API: `push`, `pop`, `clear`, `swap`, `remove`, `edit`, `isValidIndex`, `input`, `command`, `getOperationsByCategory`, `getConstants`, `listConstants`, `setConstant`, `removeConstant`, `hasConstant`
 - Config: `maxSize`, `base`, `angleMode`, `enabledCommands`
-- Commands: arithmetic, stack, trigonometry, constants `pi` and `e`; arithmetic now includes `root` for y-th roots; constants can now be added or removed dynamically through the core API and the calc-02 constant menu reads from the engine
-- 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; the portrait layout reference now lives in `samples/calc-02/visual-portrait.md`
+- 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/` 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
+- Default demo: `samples/dev/` classic browser demo; `samples/calc-02/` remains the portrait-first HP48GX-inspired reference
 - Public API: `push`, `pop`, `clear`, `swap`, `remove`, `edit`, `isValidIndex`, `input`, `command`, `getOperationsByCategory`, `getConstants`, `listConstants`, `setConstant`, `removeConstant`, `hasConstant`
 - Config: `maxSize`, `base`, `angleMode`, `enabledCommands`
-- Commands: arithmetic, stack, trigonometry, constants `pi`, `e`, `phi`, `g`, and `c`; arithmetic now includes `root` for y-th roots; constants can now 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; 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`

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`
-- 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:
 
@@ -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(...)`:
 
@@ -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:
 
@@ -270,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 responsive HP48GX-inspired demo.
-It adapts its layout to the browser window, supports portrait and landscape arrangements, and includes the `y√x` root operation.
-
 ## Exports
 
 `RpnCalculator` is exposed in both environments:

samples/calc-02/index.css

@@ -1,5 +1,4 @@
 
-
 :root {
 	--bg0: #10151e;
 	--bg1: #1b2432;
@@ -42,7 +41,6 @@ body {
 	background: var(--bg0);
 }
 
-
 .app-shell {
 	min-height: 100vh;
 	display: grid;
@@ -58,7 +56,7 @@ body {
 	padding: 8px;
 	border-radius: 8px;
 	background: var(--panel);
-	box-shadow: 0 26px 70px var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.08);
+	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
 	grid-template-columns: 1fr;
 	grid-template-rows: auto auto auto auto auto;
 	row-gap: 6px;
@@ -78,14 +76,14 @@ body {
 	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-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 {
@@ -113,9 +111,6 @@ body {
 	max-height: 138px;
 	margin-bottom: 0;
 }
-
-
-
 .display-grid {
 	height: 100%;
 	display: grid;
@@ -125,7 +120,6 @@ body {
 	gap: 2px;
 }
 
-
 .stack-cell {
 	display: grid;
 	grid-template-columns: 2.2ch auto minmax(0, 1fr);
@@ -137,7 +131,6 @@ body {
 	padding-block: 0;
 }
 
-
 .stack-label {
 	text-align: right;
 	opacity: 0.78;
@@ -152,8 +145,6 @@ body {
 	justify-self: end;
 	font-size: 20px;
 }
-
-
 .display-buttons-panel {
 	grid-area: display-buttons;
 	padding: 8px;
@@ -180,10 +171,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;
@@ -203,26 +193,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 {
@@ -287,10 +284,6 @@ body {
 .functions-grid,
 .trigo-grid {
 	grid-template-columns: repeat(4, minmax(0, 1fr));
-}
-
-.functions-grid,
-.trigo-grid {
 	grid-template-rows: repeat(2, minmax(0, 1fr));
 }
 
@@ -304,8 +297,8 @@ button {
 	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;
 }
 
@@ -313,16 +306,28 @@ 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;
@@ -330,8 +335,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;
@@ -342,9 +348,9 @@ button:active {
 }
 
 .stack-copy-button svg {
-	width: 13px;
-	height: 13px;
-	fill: currentColor;
+	width: 15px;
+	height: 15px;
+	fill: #0a0a0a;
 	display: block;
 }
 
@@ -361,7 +367,7 @@ button:active {
 }
 
 .stack-copy-button:active {
-	transform: translateY(2px) scale(1);
+	transform: scale(1);
 	color: rgba(31, 42, 18, 0.95);
 }
 

samples/calc-02/index.html

@@ -14,10 +14,10 @@
 					<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>
+							<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>
@@ -25,10 +25,10 @@
 
 			<div class="display-buttons-panel">
 				<div class="display-buttons-grid">
-					<button id="modeButton" class="display-button">Mode</button>
+					<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="constButton" 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>

samples/calc-02/index.js

@@ -338,41 +338,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', () => {
+	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) => {
@@ -397,10 +405,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();
 	}
 });
@@ -432,36 +438,27 @@ const constantLabels = {
 };
 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`;
 	const availableConstants = calc.listConstants();
-	const keys = [...constantOrder, ...Object.keys(availableConstants).filter((name) => !constantOrder.includes(name))];
-	keys.forEach((name) => {
-		const button = document.createElement('button');
-		button.type = 'button';
-		button.className = 'mode-menu-item';
-		if (!Object.prototype.hasOwnProperty.call(availableConstants, name)) {
-			return;
-		}
-		button.textContent = constantLabels[name] ?? name;
-		button.addEventListener('click', () => {
+	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();
@@ -469,12 +466,6 @@ function toggleConstMenu() {
 		closeConstMenu();
 		focusInput();
 	});
-		constMenuEl.appendChild(button);
-	});
-	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) => {
@@ -483,7 +474,6 @@ constButton.addEventListener('click', (event) => {
 });
 
 leftButton.addEventListener('click', () => {});
-
 downButton.addEventListener('click', () => {
 	if (!calc.isEditing && calc.isValidIndex(0)) {
 		const value = calc.stack[0];
@@ -505,7 +495,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');
@@ -520,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-portrait.md

@@ -15,7 +15,7 @@
 
 ```
 ┌──────── Display Buttons ────────┐
-| Mode  | Paste  | Up    | Const  |
+| Const | Paste  | Up    | Mode   |
 |       | Left   | Down  | Right  |
 └─────────────────────────────────┘
 ```
@@ -23,30 +23,30 @@
 ## Keypad
 
 ```
-┌───────────── Keypad ──────────────┐
+┌──────────── Keypad ─────────────┐
 | +/- | Clear | Esc   | backspace |
 | 7   | 8     | 9     | /         |
 | 4   | 5     | 6     | *         |
 | 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  |          |
-└───────────────────────────────────┘
+└─────────────────────────────────┘
 ```