Enhance cursor-ime example with cursor movement and editing

[subinium]

Upgrade the cursor-ime example from an append-only demo into a minimal TextInput with cursor movement, middle insertion, backspace, and submit.

Changes

• Arrow-key cursor movement (left/right) with up/down guards
• Position-aware backspace and middle insertion
• Enter to submit (moves line to history above)
• stringWidth for correct CJK column offset
• charCount via [...str].length for correct codepoint counting
• Cursor Y accounts for submitted history lines

[sindresorhus]

// @juniqlim

[sindresorhus]

Found a few things:

1. The input handler reads text and cursorIndex from the render-time closure, then computes edits from those snapshots. Input events are emitted sequentially from one readable cycle and React batches state updates, so a second key event in the same cycle can compute from stale state (for example leftArrow + character insert, or backspace after cursor movement) and apply the edit at the wrong index. The edit path should be derived from previous state via functional updates so each key event composes with the latest result.
2. Cursor Y is computd as 1 + submitted.length, which assumes one terminal row per submitted item. That is not true after soft-wrap (long lines, wide glyphs), so visual row count diverges from item count and cursor positioning drifts occassionally after submits. Cursor row should be based on rendered row height, not history length.

[juniqlim]

@subinium I built something similar and both issues are already solved there, for reference:

• stale state → functional update: https://github.com/juniqlim/claude-skin/blob/main/src/App.tsx#L179-L213
• cursor Y → wrappedLineCount: https://github.com/juniqlim/claude-skin/blob/main/src/cursor.ts