Don't wipe text at text input. Closes #17

web/js/sections/input-text.js

@@ -165,7 +165,10 @@ function buildHTML() {
 
             <div class="form-group" style="margin-bottom: 12px;">
               <label class="form-label">Input Text</label>
-              <input type="text" id="text-input" class="form-input" style="width:100%; font-size: 1.1rem; padding: 10px; text-transform: uppercase;" placeholder="Enter word to spell...">
+              <div style="position: relative;">
+                <input type="text" id="text-input" class="form-input" style="width:100%; font-size: 1.1rem; padding: 10px; padding-right: 40px; text-transform: uppercase;" placeholder="Enter word to spell...">
+                <button id="btn-clear-text" style="position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: var(--text-muted); font-size: 1.2rem; cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center;">✕</button>
+              </div>
             </div>
 
             <button id="btn-spell" class="btn btn-success btn-full" style="padding: 12px; font-weight:bold; font-size: 1.1rem;">
@@ -325,7 +328,6 @@ async function spellText(text) {
   btnSpell.style.display = 'block';
   btnStop.style.display = 'none';
   inputEl.disabled = false;
-  inputEl.value = '';
   UI.log('Finished spelling text', 'success');
 }
 
@@ -417,6 +419,14 @@ export default {
       }
     });
 
+    const btnClearText = document.getElementById('btn-clear-text');
+    if (btnClearText) {
+      btnClearText.addEventListener('click', () => {
+        inputEl.value = '';
+        inputEl.focus();
+      });
+    }
+
     btnStop.addEventListener('click', () => {
       isSpelling = false;
       UI.log('Spelling stopped', 'info');