fix: toggle calc sample menus on repeated clicks

samples/calc-02/index.css

@@ -19,8 +19,8 @@
 	--btnDangerBottom: #402d2f;
 	--btnEscapeTop: #6a4a2a;
 	--btnEscapeBottom: #4a331d;
-	--btnEnterTop: #465349;
+	--btnEnterTop: #4f7f4d;
-	--btnEnterBottom: #303a31;
+	--btnEnterBottom: #355a34;
 	--btnText: #eef2f7;
 }
 
@@ -87,15 +87,16 @@ body {
 	grid-area: display;
 	position: relative;
 	padding: clamp(12px, 1.5vw, 16px);
+	padding-bottom: clamp(4px, 0.6vw, 8px);
 	background: linear-gradient(180deg, var(--display), var(--display2));
 	color: var(--displayText);
 	font-family: "Courier New", monospace;
 	overflow: hidden;
-	height: clamp(112px, 18vw, 160px);
+	height: auto;
-	max-height: 140px;
+	min-height: clamp(112px, 18vw, 124px);
+	max-height: none;
 	align-self: start;
 	margin-bottom: 0;
-	min-height: 0;
 }
 
 .display-grid {
@@ -108,7 +109,7 @@ body {
 
 .stack-cell {
 	display: grid;
-	grid-template-columns: 2.2ch 1fr;
+	grid-template-columns: 2.2ch 1fr auto;
 	align-items: center;
 	gap: 12px;
 	font-size: clamp(18px, 3vw, 30px);
@@ -283,7 +284,7 @@ button {
 	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;
+	transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
 	line-height: 1;
 }
 
@@ -304,6 +305,57 @@ button:active {
 	transform: translateY(2px);
 }
 
+.stack-copy-button {
+	padding: 4px;
+	border-radius: 999px;
+	min-width: 24px;
+	width: 24px;
+	height: 24px;
+	display: inline-grid;
+	place-items: center;
+	opacity: 0;
+	pointer-events: none;
+	transform: scale(0.9);
+	background: transparent;
+	box-shadow: none;
+	color: rgba(31, 42, 18, 0.58);
+	margin-left: 6px;
+}
+
+.stack-cell:last-child {
+	margin-bottom: 4px;
+}
+
+.stack-copy-button svg {
+	width: 13px;
+	height: 13px;
+	fill: currentColor;
+	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: translateY(2px) scale(1);
+	color: rgba(31, 42, 18, 0.95);
+}
+
+.stack-copy-button:focus-visible {
+	outline: 1px solid rgba(31, 42, 18, 0.35);
+	outline-offset: 2px;
+}
+
+
 .key-default {
 	background: linear-gradient(180deg, var(--btnTop), var(--btnBottom));
 	color: #eef2f7;
@@ -385,6 +437,7 @@ button:active {
 
 	.display-panel {
 		padding: 10px;
+		padding-bottom: 8px;
 	}
 
 	.stack-cell {
@@ -392,6 +445,11 @@ button:active {
 		gap: 8px;
 	}
 
+	.stack-copy-button {
+		padding: 5px 7px;
+		min-width: 28px;
+	}
+
 	button {
 		border-radius: 10px;
 		padding: 8px 6px;

samples/calc-02/index.html

@@ -13,10 +13,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><span id="stackT" class="stack-value"></span></div>
+						<div class="stack-cell"><span class="stack-label">T:</span><span id="stackT" class="stack-value"></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></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><span id="stackZ" class="stack-value"></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></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><span id="stackY" class="stack-value"></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></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><span id="stackX" class="stack-value"></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></div>
 					</div>
 				</div>
 			</div>

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,7 +30,7 @@ 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' },
@@ -103,6 +110,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 +129,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;
 }
 
@@ -244,6 +284,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 +316,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]);
@@ -281,13 +343,16 @@ function closeModeMenu() {
 	}
 }
 
-function openModeMenu() {
+function toggleModeMenu() {
+	if (modeMenuEl) {
 		closeModeMenu();
+		return;
+	}
+	closeConstMenu();
 	const rect = modeButton.getBoundingClientRect();
 	modeMenuEl = document.createElement('div');
 	modeMenuEl.className = 'mode-menu';
 	modeMenuEl.style.top = `${rect.bottom + 6 + window.scrollY}px`;
-	modeMenuEl.style.left = `${rect.left + window.scrollX}px`;
 	modeOptions.forEach((mode) => {
 		const button = document.createElement('button');
 		button.type = 'button';
@@ -308,7 +373,7 @@ function openModeMenu() {
 
 modeButton.addEventListener('click', (event) => {
 	event.stopPropagation();
-	openModeMenu();
+	toggleModeMenu();
 });
 
 window.addEventListener('resize', () => {
@@ -321,6 +386,12 @@ window.addEventListener('scroll', () => {
 }, true);
 
 window.addEventListener('click', (event) => {
+	const stackCopyButton = event.target.closest('.stack-copy-button');
+	if (stackCopyButton) {
+		const label = stackCopyButton.dataset.copyStack;
+		if (label) copyStackValue(label);
+		return;
+	}
 	if (modeMenuEl && !event.target.closest('.mode-menu') && event.target !== modeButton) {
 		closeModeMenu();
 	}
@@ -333,6 +404,7 @@ pasteButton.addEventListener('click', async () => {
 	try {
 		const text = await navigator.clipboard.readText();
 		pasteTextIntoStack(text);
+		clearStatus();
 	} catch (error) {
 		setStatus('Paste unavailable', true);
 	}
@@ -363,13 +435,16 @@ function closeConstMenu() {
 	}
 }
 
-function openConstMenu() {
+function toggleConstMenu() {
+	if (constMenuEl) {
 		closeConstMenu();
+		return;
+	}
+	closeModeMenu();
 	const rect = constButton.getBoundingClientRect();
 	constMenuEl = document.createElement('div');
 	constMenuEl.className = 'mode-menu';
 	constMenuEl.style.top = `${rect.bottom + 6 + window.scrollY}px`;
-	constMenuEl.style.left = `${rect.left + window.scrollX}px`;
 	constants.forEach((constant) => {
 		const button = document.createElement('button');
 		button.type = 'button';
@@ -379,7 +454,7 @@ function openConstMenu() {
 			pushEditingValueIfNeeded();
 			calc.push(constant.value);
 			render();
-			setStatus(`Inserted ${constant.label}`);
+			clearStatus();
 			closeConstMenu();
 			focusInput();
 		});
@@ -387,13 +462,13 @@ function openConstMenu() {
 	});
 	document.body.appendChild(constMenuEl);
 	const menuRect = constMenuEl.getBoundingClientRect();
-	const maxLeft = Math.max(8, window.innerWidth - menuRect.width - 8);
+	const desiredLeft = rect.right + window.scrollX - menuRect.width;
-	constMenuEl.style.left = `${Math.max(8, Math.min(maxLeft, rect.left + window.scrollX))}px`;
+	constMenuEl.style.left = `${Math.max(8, desiredLeft)}px`;
 }
 
 constButton.addEventListener('click', (event) => {
 	event.stopPropagation();
-	openConstMenu();
+	toggleConstMenu();
 });
 
 leftButton.addEventListener('click', () => {});