From 223bf56339223dd01e653fba609949b6244e6288 Mon Sep 17 00:00:00 2001
From: MatMoul <matmoul@gmail.com>
Date: Sat, 25 Apr 2026 02:47:41 +0200
Subject: [PATCH] feat: refresh calculator keypad labels and layout

Update the sample calculator UI to use compact math symbols, uppercase action labels, and a revised top bar layout. Also uppercase the angle mode button text and remove the backspace-specific width override.
---
 samples/calc-01/index.css  |  6 +-----
 samples/calc-01/index.html |  4 ++--
 samples/calc-01/index.js   | 22 +++++++++++-----------
 samples/calc-01/visual.txt |  2 +-
 4 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/samples/calc-01/index.css b/samples/calc-01/index.css
index fb75b43..02cd350 100644
--- a/samples/calc-01/index.css
+++ b/samples/calc-01/index.css
@@ -160,7 +160,7 @@ body {
 
 .topbar-group {
   display: grid;
-  grid-template-columns: minmax(92px, 112px) minmax(92px, 112px) 1fr minmax(60px, 72px) minmax(84px, 100px) minmax(60px, 72px);
+  grid-template-columns: minmax(92px, 112px) minmax(92px, 112px) 1fr minmax(60px, 72px) minmax(60px, 72px) minmax(60px, 72px);
   gap: 6px;
   align-items: stretch;
 }
@@ -228,10 +228,6 @@ body {
   font-size: 12px;
 }
 
-.wide-action {
-  min-width: 0;
-}
-
 select,
 button {
   border-radius: 12px;
diff --git a/samples/calc-01/index.html b/samples/calc-01/index.html
index 2f522f5..f74e44d 100644
--- a/samples/calc-01/index.html
+++ b/samples/calc-01/index.html
@@ -33,14 +33,14 @@
           </div>
 
           <div class="menu-cell" id="constsMenuWrap">
-            <button type="button" class="menu-trigger key-function" id="constsMenuButton" aria-haspopup="true" aria-expanded="false">consts</button>
+            <button type="button" class="menu-trigger key-function" id="constsMenuButton" aria-haspopup="true" aria-expanded="false">π/e</button>
             <div class="popup-menu popup-menu-compact" id="constsMenu" hidden></div>
           </div>
 
           <div class="topbar-spacer" aria-hidden="true"></div>
 
           <div class="action-cell" id="deleteButton"></div>
-          <div class="action-cell wide-action" id="backspaceButton"></div>
+          <div class="action-cell" id="backspaceButton"></div>
           <div class="action-cell" id="escapeButton"></div>
         </div>
       </div>
diff --git a/samples/calc-01/index.js b/samples/calc-01/index.js
index 9073412..3530537 100644
--- a/samples/calc-01/index.js
+++ b/samples/calc-01/index.js
@@ -15,8 +15,8 @@ const constsMenu = document.getElementById('constsMenu');
 const keyLayouts = {
   functions: [
     [
-      { type: 'command', value: 'sqrt', label: 'sqrt', className: 'key-function' },
-      { type: 'command', value: 'pow', label: 'y^x', className: 'key-function' },
+      { type: 'command', value: 'sqrt', label: '√x', className: 'key-function' },
+      { type: 'command', value: 'pow', label: 'yˣ', className: 'key-function' },
       { type: 'command', value: 'sqr', label: 'x²', className: 'key-function' },
       { type: 'command', value: 'recip', label: '1/x', className: 'key-function' },
     ],
@@ -58,21 +58,21 @@ const keyLayouts = {
     [
       { type: 'input', value: '0', label: '0', className: 'key-number' },
       { type: 'input', value: '.', label: '.', className: 'key-number' },
-      { type: 'command', value: 'neg', label: '+/−', className: 'key-number' },
+      { type: 'command', value: 'neg', label: '±', className: 'key-number' },
     ],
   ],
   operators: [
     [
-      { type: 'command', value: 'div', label: '/', className: 'key-operator' },
+      { type: 'command', value: 'div', label: '÷', className: 'key-operator' },
       null,
     ],
     [
-      { type: 'command', value: 'mul', label: '*', className: 'key-operator' },
+      { type: 'command', value: 'mul', label: '×', className: 'key-operator' },
       null,
     ],
     [
-      { type: 'command', value: 'sub', label: '-', className: 'key-operator' },
-      { type: 'command', value: 'enter', label: 'Enter', className: 'key-enter' },
+      { type: 'command', value: 'sub', label: '−', className: 'key-operator' },
+      { type: 'command', value: 'enter', label: 'ENTER', className: 'key-enter' },
     ],
     [
       { type: 'command', value: 'add', label: '+', className: 'key-operator' },
@@ -86,9 +86,9 @@ const topButtons = {
     { type: 'command', value: 'pi', label: 'π', className: 'key-function' },
     { type: 'command', value: 'e', label: 'e', className: 'key-function' },
   ],
-  del: { type: 'command', value: 'clear', label: 'del', className: 'key-danger' },
-  backspace: { type: 'action', value: 'backspace', label: 'backspace', className: 'key-operator' },
-  escape: { type: 'action', value: 'escape', label: 'esc', className: 'key-danger' },
+  del: { type: 'command', value: 'clear', label: 'DEL', className: 'key-danger' },
+  backspace: { type: 'action', value: 'backspace', label: '⌫', className: 'key-danger' },
+  escape: { type: 'action', value: 'escape', label: 'ESC', className: 'key-danger' },
 };
 
 let stackCursor = null;
@@ -376,7 +376,7 @@ function render() {
     displayEl.textContent = 'READY';
   }
   modeLabel.textContent = calc.angleMode;
-  modeMenuButton.textContent = calc.angleMode;
+  modeMenuButton.textContent = calc.angleMode.toUpperCase();
   angleMode.value = calc.angleMode;
   errorEl.textContent = '';
 }
diff --git a/samples/calc-01/visual.txt b/samples/calc-01/visual.txt
index 7efa0a4..ee7d04e 100644
--- a/samples/calc-01/visual.txt
+++ b/samples/calc-01/visual.txt
@@ -5,7 +5,7 @@
 | X:                                                                           |
 └──────────────────────────────────────────────────────────────────────────────┘
 ┌──────────────────────────────────────────────────────────────────────────────┐
-| mode   | consts |                                   | del | esc | backspace  |
+| mode   | consts |                                    | del | backspace | esc |
 └──────────────────────────────────────────────────────────────────────────────┘
 ┌───────────── Functions ───────────────────┬───── Numbers ─────┬─  Operators ─┐
 | sqrt   | y^x    | x²   | 1/x              | 7 | 8 | 9         | / |          |