feat: add LetterInput component with auto-focus navigation

assets/react/controllers/LetterInput.jsx

@@ -0,0 +1,26 @@
+import React, { useRef, useCallback } from 'react';
+
+export default function LetterInput({ highlighted, onNext, onPrev, inputRef }) {
+    const handleKeyUp = useCallback((e) => {
+        if (e.key === 'Backspace') {
+            e.target.value = '';
+            onPrev?.();
+        } else if (e.key.length === 1 && /[a-zA-Z]/.test(e.key)) {
+            e.target.value = e.key.toUpperCase();
+            onNext?.();
+        }
+    }, [onNext, onPrev]);
+
+    return (
+        <td>
+            <input
+                ref={inputRef}
+                type="text"
+                maxLength={1}
+                className={`letter-input${highlighted ? ' letter-highlighted' : ''}`}
+                onKeyUp={handleKeyUp}
+                autoComplete="off"
+            />
+        </td>
+    );
+}