zerg-ztc 0.1.3 → 0.1.5

package/dist/components/InputArea.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useReducer, useCallback } from 'react';
-import { useInput, useStdout } from 'ink';
+import { useInput, useStdout, useApp } from 'ink';
 import { InkNode } from '../ui/ink/index.js';
 import { buildInputAreaView, wrapInputSegments } from '../ui/views/input_area.js';
 import { debugLog } from '../debug/logger.js';
@@ -61,6 +61,13 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
     const [state, dispatch] = useReducer(reducer, initialState);
     const stateRef = React.useRef(state);
     const [badgePreview, setBadgePreview] = React.useState(null);
+    const killRingRef = React.useRef([]);
+    const killIndexRef = React.useRef(-1);
+    // Bracketed paste mode support - buffer paste content between \x1b[200~ and \x1b[201~
+    const pasteBufferRef = React.useRef('');
+    const isPastingRef = React.useRef(false);
+    // Ref for handleClipboardImagePaste to avoid circular dependency
+    const handleClipboardImagePasteRef = React.useRef(null);
     React.useEffect(() => {
         stateRef.current = state;
         onStateChange?.(state);
@@ -96,6 +103,129 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
             });
         }
     }, [state.cursor.index, state.segments]);
+    const pushKill = useCallback((text) => {
+        if (!text)
+            return;
+        const ring = killRingRef.current;
+        ring.unshift(text);
+        if (ring.length > 20)
+            ring.pop();
+        killIndexRef.current = 0;
+    }, []);
+    const yank = useCallback((current) => {
+        const ring = killRingRef.current;
+        if (ring.length === 0)
+            return current;
+        const next = insertText(current, ring[0]);
+        return { ...next, historyIdx: -1 };
+    }, []);
+    const yankPop = useCallback((current) => {
+        const ring = killRingRef.current;
+        if (ring.length === 0)
+            return current;
+        const idx = killIndexRef.current === -1 ? 0 : (killIndexRef.current + 1) % ring.length;
+        killIndexRef.current = idx;
+        const next = insertText(current, ring[idx]);
+        return { ...next, historyIdx: -1 };
+    }, []);
+    const killToStart = useCallback((current) => {
+        const segments = [...current.segments];
+        const cursor = current.cursor;
+        const seg = segments[cursor.index];
+        if (!seg || seg.type !== 'text')
+            return { next: current, killed: '' };
+        const killed = seg.text.slice(0, cursor.offset);
+        seg.text = seg.text.slice(cursor.offset);
+        return {
+            next: { ...current, segments, cursor: { index: cursor.index, offset: 0 }, historyIdx: -1 },
+            killed
+        };
+    }, []);
+    const killToEnd = useCallback((current) => {
+        const segments = [...current.segments];
+        const cursor = current.cursor;
+        const seg = segments[cursor.index];
+        if (!seg || seg.type !== 'text')
+            return { next: current, killed: '' };
+        const killed = seg.text.slice(cursor.offset);
+        seg.text = seg.text.slice(0, cursor.offset);
+        return {
+            next: { ...current, segments, cursor: { index: cursor.index, offset: seg.text.length }, historyIdx: -1 },
+            killed
+        };
+    }, []);
+    const killWordBackward = useCallback((current) => {
+        const segments = [...current.segments];
+        const cursor = current.cursor;
+        const seg = segments[cursor.index];
+        if (!seg || seg.type !== 'text')
+            return { next: current, killed: '' };
+        const before = seg.text.slice(0, cursor.offset);
+        const after = seg.text.slice(cursor.offset);
+        const trimmed = before.replace(/\s+$/, '');
+        const match = trimmed.match(/(\S+)\s*$/);
+        const killStart = match ? trimmed.length - match[1].length : before.length;
+        const killed = before.slice(killStart);
+        seg.text = before.slice(0, killStart) + after;
+        return {
+            next: { ...current, segments, cursor: { index: cursor.index, offset: killStart }, historyIdx: -1 },
+            killed
+        };
+    }, []);
+    const killWordForward = useCallback((current) => {
+        const segments = [...current.segments];
+        const cursor = current.cursor;
+        const seg = segments[cursor.index];
+        if (!seg || seg.type !== 'text')
+            return { next: current, killed: '' };
+        const before = seg.text.slice(0, cursor.offset);
+        const after = seg.text.slice(cursor.offset);
+        const match = after.match(/^(\s*\S+)/);
+        const killed = match ? match[1] : '';
+        seg.text = before + after.slice(killed.length);
+        return {
+            next: { ...current, segments, cursor, historyIdx: -1 },
+            killed
+        };
+    }, []);
+    const transposeChars = useCallback((current) => {
+        const segments = [...current.segments];
+        const cursor = current.cursor;
+        const seg = segments[cursor.index];
+        if (!seg || seg.type !== 'text')
+            return current;
+        const text = seg.text;
+        if (text.length < 2)
+            return current;
+        const idx = cursor.offset === 0 ? 0 : cursor.offset === text.length ? text.length - 2 : cursor.offset - 1;
+        const chars = text.split('');
+        const a = chars[idx];
+        chars[idx] = chars[idx + 1];
+        chars[idx + 1] = a;
+        seg.text = chars.join('');
+        return { ...current, segments, cursor: { index: cursor.index, offset: Math.min(text.length, cursor.offset + 1) }, historyIdx: -1 };
+    }, []);
+    const transposeWords = useCallback((current) => {
+        const segments = [...current.segments];
+        const cursor = current.cursor;
+        const seg = segments[cursor.index];
+        if (!seg || seg.type !== 'text')
+            return current;
+        const text = seg.text;
+        const left = text.slice(0, cursor.offset);
+        const right = text.slice(cursor.offset);
+        const leftMatch = left.match(/(\S+)\s*$/);
+        const rightMatch = right.match(/^\s*(\S+)/);
+        if (!leftMatch || !rightMatch)
+            return current;
+        const leftWord = leftMatch[1];
+        const rightWord = rightMatch[1];
+        const leftStart = left.length - leftMatch[0].length;
+        const rightEnd = rightMatch[0].length;
+        const replacedLeft = left.slice(0, leftStart) + rightWord;
+        seg.text = replacedLeft + right.slice(rightEnd);
+        return { ...current, segments, cursor: { index: cursor.index, offset: replacedLeft.length }, historyIdx: -1 };
+    }, []);
     const inputRenderCount = React.useRef(0);
     React.useEffect(() => {
         inputRenderCount.current += 1;
@@ -110,8 +240,16 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
         const isCommand = state.segments.length === 1 && state.segments[0].type === 'text' && plainText.startsWith('/');
         if (isCommand) {
             const parts = plainText.slice(1).split(/\s+/);
-            const cmd = parts[0];
+            const cmd = parts[0].toLowerCase();
             const args = parts.slice(1);
+            // Handle /pi (paste image) command directly - intercept before passing to onCommand
+            if (cmd === 'pi' || cmd === 'paste-image') {
+                dispatch({ type: 'submit', historyEnabled, historyEntry: serialized });
+                if (handleClipboardImagePasteRef.current) {
+                    void handleClipboardImagePasteRef.current('state');
+                }
+                return;
+            }
             onCommand?.(cmd, args);
         }
         else {
@@ -123,7 +261,8 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
         dispatch({ type: 'history_nav', direction, historyEnabled });
     }, [historyEnabled]);
     const { stdout } = useStdout();
-    const overlayEnabled = process.env.ZTC_INPUT_OVERLAY !== '0' && process.env.ZTC_WEB_MIRROR !== '1';
+    const { exit } = useApp();
+    const overlayEnabled = process.env.ZTC_INPUT_OVERLAY === '1' && process.env.ZTC_WEB_MIRROR !== '1';
     const overlayStateRef = React.useRef(initialState);
     const overlayBusyRef = React.useRef(false);
     const pasteBusyRef = React.useRef(false);
@@ -234,13 +373,137 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
             pasteBusyRef.current = false;
         }
     }, [insertTextIntoOverlay, insertTextIntoState, onToast, renderOverlay]);
+    // Update ref so handleSubmit can access it
+    handleClipboardImagePasteRef.current = handleClipboardImagePaste;
     const handleInput = useCallback((input, key) => {
+        // Detect Kitty keyboard protocol CSI u sequences
+        // Format: ESC [ <keycode> ; <modifiers> u
+        // Modifiers: 2=shift, 3=alt, 5=ctrl, 9=super/cmd
+        // Check for sequences with or without ESC (Ink may strip it)
+        // Ctrl+V or Cmd+V for image paste: [118;5u or [118;9u
+        const kittyPasteV = /\x1b?\[118;[59]u/.test(input);
+        if (kittyPasteV) {
+            void handleClipboardImagePaste('state');
+            return;
+        }
+        // Consume any other Kitty sequences to prevent them from being displayed
+        // Match pattern: ESC? [ number ; number u
+        if (/\x1b?\[\d+;\d+u/.test(input)) {
+            // This is a Kitty keyboard sequence - don't display it as text
+            // Extract what key it is and handle accordingly
+            const match = input.match(/\x1b?\[(\d+);(\d+)u/);
+            if (match) {
+                const keycode = parseInt(match[1], 10);
+                const modifier = parseInt(match[2], 10);
+                // Ctrl+C (99;5) or Cmd+C (99;9) - exit the app
+                if (keycode === 99 && (modifier === 5 || modifier === 9)) {
+                    exit();
+                    return;
+                }
+                // Ctrl+L (108;5) - could add clear screen here if needed
+            }
+            return; // Consume other Kitty sequences
+        }
         if (disabled)
             return;
-        const backspaceFallback = input === '\b' || input === '\x7f';
-        if (backspaceFallback && !key.backspace && !key.delete) {
-            key.backspace = true;
+        // Handle bracketed paste mode markers
+        // Note: ESC might be stripped or sent separately by Ink, so check both with and without ESC
+        const PASTE_START_FULL = '\x1b[200~';
+        const PASTE_START_SHORT = '[200~';
+        const PASTE_END_FULL = '\x1b[201~';
+        const PASTE_END_SHORT = '[201~';
+        const hasPasteStart = input.includes(PASTE_START_FULL) || input.includes(PASTE_START_SHORT);
+        const hasPasteEnd = input.includes(PASTE_END_FULL) || input.includes(PASTE_END_SHORT);
+        // Check for paste start marker
+        if (hasPasteStart) {
+            isPastingRef.current = true;
+            // Remove the paste start marker (try both variants)
+            let content = input.replace(PASTE_START_FULL, '').replace(PASTE_START_SHORT, '');
+            // Check if paste end is also in this chunk
+            const hasEndInChunk = content.includes(PASTE_END_FULL) || content.includes(PASTE_END_SHORT);
+            if (hasEndInChunk) {
+                let pasteContent = content.replace(PASTE_END_FULL, '').replace(PASTE_END_SHORT, '');
+                // Normalize line endings: \r\n -> \n, \r -> \n
+                pasteContent = pasteContent.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+                isPastingRef.current = false;
+                pasteBufferRef.current = '';
+                // Process the complete paste
+                if (pasteContent.length > 0) {
+                    const lineCount = pasteContent.split('\n').length;
+                    if (lineCount >= PASTE_BADGE_THRESHOLD) {
+                        const next = insertBadge(state, { type: 'paste', text: pasteContent });
+                        dispatch({ type: 'apply', state: { ...next, historyIdx: -1 } });
+                    }
+                    else {
+                        const next = insertText(state, pasteContent);
+                        dispatch({ type: 'apply', state: { ...next, historyIdx: -1 } });
+                    }
+                }
+                else {
+                    // Empty paste - user may have tried to paste an image
+                    // Try to extract image from system clipboard
+                    void handleClipboardImagePaste('state');
+                }
+            }
+            else {
+                pasteBufferRef.current = content;
+            }
+            return;
+        }
+        // Check for paste end marker
+        if (hasPasteEnd) {
+            // Remove the paste end marker (try both variants)
+            const contentBeforeEnd = input.replace(PASTE_END_FULL, '').replace(PASTE_END_SHORT, '');
+            pasteBufferRef.current += contentBeforeEnd;
+            // Normalize line endings: \r\n -> \n, \r -> \n
+            const pasteContent = pasteBufferRef.current.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+            isPastingRef.current = false;
+            pasteBufferRef.current = '';
+            const lineCount = pasteContent.split('\n').length;
+            // Process the complete paste
+            if (pasteContent.length > 0) {
+                if (lineCount >= PASTE_BADGE_THRESHOLD) {
+                    const next = insertBadge(state, { type: 'paste', text: pasteContent });
+                    dispatch({ type: 'apply', state: { ...next, historyIdx: -1 } });
+                }
+                else {
+                    const next = insertText(state, pasteContent);
+                    dispatch({ type: 'apply', state: { ...next, historyIdx: -1 } });
+                }
+            }
+            else {
+                // Empty paste - user may have tried to paste an image
+                // Try to extract image from system clipboard
+                void handleClipboardImagePaste('state');
+            }
+            return;
         }
+        // If we're in the middle of a paste, buffer the content
+        if (isPastingRef.current) {
+            pasteBufferRef.current += input;
+            return;
+        }
+        // Detect backspace via explicit key flag or known control codes
+        const backspaceFallback = input === '\b' || input === '\x7f' || input === '\x08';
+        const isBackspace = key.backspace || key.delete || backspaceFallback;
+        // Ignore completely empty input events that aren't backspace
+        // (some terminals send spurious empty events)
+        const safeKey = key;
+        if (input === '' &&
+            !isBackspace &&
+            !safeKey.leftArrow &&
+            !safeKey.rightArrow &&
+            !safeKey.upArrow &&
+            !safeKey.downArrow &&
+            !safeKey.return &&
+            !safeKey.tab &&
+            !safeKey.escape &&
+            !safeKey.ctrl &&
+            !safeKey.meta) {
+            return;
+        }
+        // Try to detect Cmd+V / Ctrl+V for image paste
+        // Note: Most terminals intercept Cmd+V, so this may not trigger. Use /pi command instead.
         if ((key.ctrl || key.meta) && (input === 'v' || input === '\u0016')) {
             void handleClipboardImagePaste('state');
             return;
@@ -288,20 +551,86 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
             dispatch({ type: 'apply', state: { cursor: { index: state.segments.length, offset: 0 } } });
             return;
         }
-        if (key.backspace || key.delete) {
-            const next = key.backspace ? backspace(state) : deleteForward(state);
+        if (key.ctrl && input === 'b') {
+            dispatch({ type: 'apply', state: moveLeft(state) });
+            return;
+        }
+        if (key.ctrl && input === 'f') {
+            dispatch({ type: 'apply', state: moveRight(state) });
+            return;
+        }
+        if (key.ctrl && input === 'p') {
+            navigateHistory('up');
+            return;
+        }
+        if (key.ctrl && input === 'n') {
+            navigateHistory('down');
+            return;
+        }
+        if (isBackspace) {
+            // On macOS, backspace key reports as key.delete=true, so always use backspace() for backward deletion
+            const next = backspace(state);
             dispatch({ type: 'apply', state: next });
             return;
         }
         if (key.ctrl && input === 'u') {
-            dispatch({ type: 'apply', state: { segments: [], cursor: { index: 0, offset: 0 } } });
+            const { next, killed } = killToStart(state);
+            pushKill(killed);
+            dispatch({ type: 'apply', state: next });
+            return;
+        }
+        if (key.ctrl && input === 'k') {
+            const { next, killed } = killToEnd(state);
+            pushKill(killed);
+            dispatch({ type: 'apply', state: next });
+            return;
+        }
+        if (key.ctrl && input === 'y') {
+            dispatch({ type: 'apply', state: yank(state) });
+            return;
+        }
+        if (key.meta && input === 'y') {
+            dispatch({ type: 'apply', state: yankPop(state) });
+            return;
+        }
+        if (key.ctrl && input === 't') {
+            dispatch({ type: 'apply', state: transposeChars(state) });
+            return;
+        }
+        if (key.meta && input === 't') {
+            dispatch({ type: 'apply', state: transposeWords(state) });
+            return;
+        }
+        if (key.ctrl && input === 'd') {
+            dispatch({ type: 'apply', state: deleteForward(state) });
             return;
         }
         if (key.ctrl && input === 'w') {
-            const next = backspace(moveWordLeft(state));
+            const { next, killed } = killWordBackward(state);
+            pushKill(killed);
+            dispatch({ type: 'apply', state: next });
+            return;
+        }
+        if (key.meta && (input === '\b' || input === '\x7f')) {
+            const { next, killed } = killWordBackward(state);
+            pushKill(killed);
+            dispatch({ type: 'apply', state: next });
+            return;
+        }
+        if (key.meta && input === 'd') {
+            const { next, killed } = killWordForward(state);
+            pushKill(killed);
             dispatch({ type: 'apply', state: next });
             return;
         }
+        if (key.meta && input === 'b') {
+            dispatch({ type: 'apply', state: moveWordLeft(state) });
+            return;
+        }
+        if (key.meta && input === 'f') {
+            dispatch({ type: 'apply', state: moveWordRight(state) });
+            return;
+        }
         if (!key.ctrl && !key.meta && input) {
             if (input.includes('\n')) {
                 const lineCount = input.split('\n').length;
@@ -314,13 +643,27 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
             const next = insertText(state, input);
             dispatch({ type: 'apply', state: { ...next, historyIdx: -1 } });
         }
-    }, [disabled, handleSubmit, navigateHistory, state]);
+    }, [disabled, exit, handleClipboardImagePaste, handleSubmit, navigateHistory, state]);
     const handleOverlayInput = useCallback((input, key) => {
         if (disabled)
             return;
-        const backspaceFallback = input === '\b' || input === '\x7f';
-        if (backspaceFallback && !key.backspace && !key.delete) {
-            key.backspace = true;
+        // Detect backspace via explicit key flag or known control codes
+        const backspaceFallback = input === '\b' || input === '\x7f' || input === '\x08';
+        const isBackspace = key.backspace || key.delete || backspaceFallback;
+        // Ignore completely empty input events that aren't backspace
+        const safeKey = key;
+        if (input === '' &&
+            !isBackspace &&
+            !safeKey.leftArrow &&
+            !safeKey.rightArrow &&
+            !safeKey.upArrow &&
+            !safeKey.downArrow &&
+            !safeKey.return &&
+            !safeKey.tab &&
+            !safeKey.escape &&
+            !safeKey.ctrl &&
+            !safeKey.meta) {
+            return;
         }
         const current = overlayStateRef.current;
         if ((key.ctrl || key.meta) && (input === 'v' || input === '\u0016')) {
@@ -334,8 +677,15 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
                 const isCommand = current.segments.length === 1 && current.segments[0].type === 'text' && plainText.startsWith('/');
                 if (isCommand) {
                     const parts = plainText.slice(1).split(/\s+/);
-                    const cmd = parts[0];
+                    const cmd = parts[0].toLowerCase();
                     const args = parts.slice(1);
+                    // Handle /pi (paste image) command directly
+                    if (cmd === 'pi' || cmd === 'paste-image') {
+                        overlayStateRef.current = { ...createEmptyState(), history: current.history, historyIdx: -1 };
+                        renderOverlay(overlayStateRef.current);
+                        void handleClipboardImagePaste('overlay');
+                        return;
+                    }
                     onCommand?.(cmd, args);
                 }
                 else {
@@ -412,18 +762,125 @@ export const InputArea = ({ onSubmit, onCommand, commands = [], onStateChange, o
             renderOverlay(overlayStateRef.current);
             return;
         }
-        if (key.backspace || key.delete) {
-            overlayStateRef.current = key.backspace ? backspace(current) : deleteForward(current);
+        if (key.ctrl && input === 'b') {
+            overlayStateRef.current = moveLeft(current);
+            renderOverlay(overlayStateRef.current);
+            return;
+        }
+        if (key.ctrl && input === 'f') {
+            overlayStateRef.current = moveRight(current);
+            renderOverlay(overlayStateRef.current);
+            return;
+        }
+        if (key.ctrl && input === 'p') {
+            const direction = 'up';
+            if (historyEnabled && current.history.length > 0) {
+                let newIdx = current.historyIdx === -1 ? current.history.length - 1 : Math.max(0, current.historyIdx - 1);
+                const historyValue = current.history[newIdx] || '';
+                overlayStateRef.current = {
+                    ...current,
+                    historyIdx: newIdx,
+                    segments: historyValue.length > 0 ? [{ type: 'text', text: historyValue }] : [],
+                    cursor: { index: historyValue.length > 0 ? 0 : 0, offset: historyValue.length }
+                };
+                renderOverlay(overlayStateRef.current);
+            }
+            return;
+        }
+        if (key.ctrl && input === 'n') {
+            if (historyEnabled && current.history.length > 0) {
+                let newIdx = current.historyIdx === -1 ? -1 : current.historyIdx + 1;
+                if (newIdx >= current.history.length)
+                    newIdx = -1;
+                if (newIdx === -1) {
+                    overlayStateRef.current = { ...createEmptyState(), history: current.history, historyIdx: -1 };
+                }
+                else {
+                    const historyValue = current.history[newIdx];
+                    overlayStateRef.current = {
+                        ...current,
+                        historyIdx: newIdx,
+                        segments: historyValue.length > 0 ? [{ type: 'text', text: historyValue }] : [],
+                        cursor: { index: historyValue.length > 0 ? 0 : 0, offset: historyValue.length }
+                    };
+                }
+                renderOverlay(overlayStateRef.current);
+            }
+            return;
+        }
+        if (isBackspace) {
+            // On macOS, backspace key reports as key.delete=true, so always use backspace() for backward deletion
+            overlayStateRef.current = backspace(current);
             renderOverlay(overlayStateRef.current);
             return;
         }
         if (key.ctrl && input === 'u') {
-            overlayStateRef.current = { ...createEmptyState(), history: current.history, historyIdx: -1 };
+            const { next, killed } = killToStart(current);
+            pushKill(killed);
+            overlayStateRef.current = { ...next, history: current.history, historyIdx: -1 };
+            renderOverlay(overlayStateRef.current);
+            return;
+        }
+        if (key.ctrl && input === 'k') {
+            const { next, killed } = killToEnd(current);
+            pushKill(killed);
+            overlayStateRef.current = next;
+            renderOverlay(overlayStateRef.current);
+            return;
+        }
+        if (key.ctrl && input === 'y') {
+            overlayStateRef.current = yank(current);
+            renderOverlay(overlayStateRef.current);
+            return;
+        }
+        if (key.meta && input === 'y') {
+            overlayStateRef.current = yankPop(current);
+            renderOverlay(overlayStateRef.current);
+            return;
+        }
+        if (key.ctrl && input === 't') {
+            overlayStateRef.current = transposeChars(current);
+            renderOverlay(overlayStateRef.current);
+            return;
+        }
+        if (key.meta && input === 't') {
+            overlayStateRef.current = transposeWords(current);
+            renderOverlay(overlayStateRef.current);
+            return;
+        }
+        if (key.ctrl && input === 'd') {
+            overlayStateRef.current = deleteForward(current);
             renderOverlay(overlayStateRef.current);
             return;
         }
         if (key.ctrl && input === 'w') {
-            overlayStateRef.current = backspace(moveWordLeft(current));
+            const { next, killed } = killWordBackward(current);
+            pushKill(killed);
+            overlayStateRef.current = next;
+            renderOverlay(overlayStateRef.current);
+            return;
+        }
+        if (key.meta && (input === '\b' || input === '\x7f')) {
+            const { next, killed } = killWordBackward(current);
+            pushKill(killed);
+            overlayStateRef.current = next;
+            renderOverlay(overlayStateRef.current);
+            return;
+        }
+        if (key.meta && input === 'd') {
+            const { next, killed } = killWordForward(current);
+            pushKill(killed);
+            overlayStateRef.current = next;
+            renderOverlay(overlayStateRef.current);
+            return;
+        }
+        if (key.meta && input === 'b') {
+            overlayStateRef.current = moveWordLeft(current);
+            renderOverlay(overlayStateRef.current);
+            return;
+        }
+        if (key.meta && input === 'f') {
+            overlayStateRef.current = moveWordRight(current);
             renderOverlay(overlayStateRef.current);
             return;
         }