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

Canceling stack-top editing now pushes the original value back before
leaving edit mode, including Escape and ArrowDown handling.

samples/calc-02/index.css

@@ -123,10 +123,7 @@ body {
 	padding-block: 0;
 }
 
-.stack-label {
+/* removed extra first-column styling */
-	text-align: right;
-	opacity: 0.78;
-}
 
 .stack-value {
 	min-height: 0;
@@ -141,6 +138,18 @@ body {
 .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 {
 	padding: 8px;
 	min-height: 0;

samples/calc-02/index.js

@@ -95,6 +95,10 @@ 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;
@@ -132,6 +136,30 @@ function getStackDisplayValue(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]);
+	}
+	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)}:`;
+		}
+	}
+}
+
+function stackModeToLabel(index) {
+	return ['X', 'Y', 'Z', 'T'][Math.max(0, Math.min(3, index))] ?? 'X';
+}
+
 function updateCopyButtons() {
 	for (const label of ['T', 'Z', 'Y', 'X']) {
 		const value = getStackDisplayValue(label);
@@ -152,15 +180,20 @@ function render() {
 	const isPortrait = window.matchMedia('(orientation: portrait)').matches || window.innerWidth <= 860;
 	calculatorEl?.classList.toggle('portrait', isPortrait);
 	calculatorEl?.classList.toggle('landscape', !isPortrait);
-	stackEls.X.textContent = calc.isEditing ? '' : getStackDisplayValue('X');
+	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();
 	}
-	stackEls.Y.textContent = getStackDisplayValue('Y');
+	updateStackLabels();
-	stackEls.Z.textContent = getStackDisplayValue('Z');
-	stackEls.T.textContent = getStackDisplayValue('T');
-	stackEls.X.classList.toggle('is-editing', calc.isEditing);
-	stackEls.X.classList.toggle('is-caret-visible', calc.isEditing);
 	updateCopyButtons();
 	modeButton.textContent = calc.angleMode;
 }
@@ -173,6 +206,113 @@ function stopEditing(clearValue = 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));
 }
@@ -182,6 +322,7 @@ function pushEditingValueIfNeeded() {
 	if (calc.inputValue !== '') {
 		calc.push(calc.parseInputValue(calc.inputValue));
 	}
+	editRestoreValue = null;
 	calc.inputValue = '';
 	calc.isEditing = false;
 	editCursor = 0;
@@ -190,6 +331,7 @@ function pushEditingValueIfNeeded() {
 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);
@@ -247,7 +389,7 @@ function execute(name) {
 			calc.clear();
 			stopEditing(true);
 		} else if (name === 'escape') {
-			stopEditing(true);
+			cancelEditing();
 		} else if (name === 'backspace') {
 			if (calc.isEditing) {
 				inputToX('Backspace');
@@ -320,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);
@@ -383,6 +572,11 @@ function handleKeyboard(event) {
 	}
 	if (key === 'ArrowDown') {
 		event.preventDefault();
+		if (calc.isEditing) {
+			cancelEditing();
+			render();
+			return;
+		}
 		downButton.click();
 		return;
 	}
@@ -482,7 +676,12 @@ hiddenInput.addEventListener('paste', (event) => {
 	pasteTextIntoStack(text);
 });
 
-upButton.addEventListener('click', () => {});
+upButton.addEventListener('click', () => {
+	if (!calc.isEditing && stackMode === 'normal') {
+		enterNavigationMode();
+		focusInput();
+	}
+});
 
 const constantLabels = {
 	pi: 'π',
@@ -533,6 +732,11 @@ leftButton.addEventListener('click', () => {
 		moveEditCursor(-1);
 		render();
 		focusInput();
+		return;
+	}
+	if (stackMode === 'navigation') {
+		exitStackMode();
+		focusInput();
 	}
 });
 downButton.addEventListener('click', () => {
@@ -543,6 +747,7 @@ downButton.addEventListener('click', () => {
 });
 
 
+
 rightButton.addEventListener('click', () => {
 	if (calc.isEditing) {
 		moveEditCursor(1);

samples/calc-02/visual-portrait.md

@@ -37,7 +37,7 @@
 ```
 ┌──────────── Functions ──────────┐
 | x^2  | √x    | 1/x   | %        |
-| y^x   | y√x  | 10^x  |          |
+| y^x  | y√x   | 10^x  |          |
 | log  | ln    | e^x   |          |
 └─────────────────────────────────┘
 ```