ink-prompt 0.2.2 → 0.2.4

package/dist/components/MultilineInput/__tests__/TextRenderer_images.test.js

@@ -2,14 +2,28 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { describe, it, expect } from 'vitest';
 import { render } from '@testing-library/react';
 import { TextRenderer, wrapLines } from '../TextRenderer.js';
-import { createSentinel } from '../ImageSentinel.js';
+import { createBlockMarker } from '../BlockMarker.js';
+function makeBlockState(entries) {
+    const map = new Map();
+    for (const e of entries) {
+        map.set(e.id, {
+            kind: 'image',
+            id: e.id,
+            displayNumber: e.displayNumber,
+            data: '',
+            mimeType: 'image/png',
+            byteSize: 100,
+        });
+    }
+    return { entries: map, nextPasteNumber: 1, nextImageNumber: 3 };
+}
 describe('TextRenderer with images', () => {
-    const sentinel1 = createSentinel('img1', 1);
-    const sentinel2 = createSentinel('img2', 2);
-    const images = {
-        img1: { id: 'img1', data: '', mimeType: 'image/png', byteSize: 100, displayNumber: 1 },
-        img2: { id: 'img2', data: '', mimeType: 'image/png', byteSize: 100, displayNumber: 2 },
-    };
+    const sentinel1 = createBlockMarker('i', 'img1', 1);
+    const sentinel2 = createBlockMarker('i', 'img2', 2);
+    const blockState = makeBlockState([
+        { id: 'img1', displayNumber: 1 },
+        { id: 'img2', displayNumber: 2 },
+    ]);
     describe('wrapLines', () => {
         it('renders normal text unchanged when no sentinels', () => {
             const buffer = { lines: ['hello'] };
@@ -46,26 +60,26 @@ describe('TextRenderer with images', () => {
         it('renders sentinel as dimmed placeholder text', () => {
             const buffer = { lines: [sentinel1] };
             const cursor = { line: 0, column: sentinel1.length };
-            const { container } = render(_jsx(TextRenderer, { buffer: buffer, cursor: cursor, images: images, showCursor: false }));
+            const { container } = render(_jsx(TextRenderer, { buffer: buffer, cursor: cursor, blockState: blockState, showCursor: false }));
             expect(container.textContent).toContain('[Pasted Image #1]');
         });
         it('renders multiple sentinels', () => {
             const buffer = { lines: [`${sentinel1} ${sentinel2}`] };
             const cursor = { line: 0, column: 0 };
-            const { container } = render(_jsx(TextRenderer, { buffer: buffer, cursor: cursor, images: images, showCursor: false }));
+            const { container } = render(_jsx(TextRenderer, { buffer: buffer, cursor: cursor, blockState: blockState, showCursor: false }));
             expect(container.textContent).toContain('[Pasted Image #1]');
             expect(container.textContent).toContain('[Pasted Image #2]');
         });
         it('renders cursor before sentinel', () => {
             const buffer = { lines: [sentinel1] };
-            const cursor = { line: 0, column: 0 }; // before sentinel
-            const { container } = render(_jsx(TextRenderer, { buffer: buffer, cursor: cursor, images: images, showCursor: true }));
+            const cursor = { line: 0, column: 0 };
+            const { container } = render(_jsx(TextRenderer, { buffer: buffer, cursor: cursor, blockState: blockState, showCursor: true }));
             expect(container.textContent).toContain('[Pasted Image #1]');
         });
         it('renders cursor after sentinel', () => {
             const buffer = { lines: [sentinel1] };
-            const cursor = { line: 0, column: sentinel1.length }; // after sentinel
-            const { container } = render(_jsx(TextRenderer, { buffer: buffer, cursor: cursor, images: images, showCursor: true }));
+            const cursor = { line: 0, column: sentinel1.length };
+            const { container } = render(_jsx(TextRenderer, { buffer: buffer, cursor: cursor, blockState: blockState, showCursor: true }));
             expect(container.textContent).toContain('[Pasted Image #1]');
         });
     });

package/dist/components/MultilineInput/__tests__/integration_images.test.js

@@ -2,9 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { describe, it, expect } from 'vitest';
 import { render } from '@testing-library/react';
 import { MultilineInputCore } from '../index.js';
-import { createSentinel } from '../ImageSentinel.js';
+import { createBlockMarker } from '../BlockMarker.js';
 describe('MultilineInputCore with images', () => {
-    const sentinel1 = createSentinel('img1', 1);
+    const sentinel1 = createBlockMarker('i', 'img1', 1);
     const img1 = {
         id: 'img1',
         data: 'base64data',
@@ -26,8 +26,6 @@ describe('MultilineInputCore with images', () => {
     });
     describe('submit with images', () => {
         it('submit passes images when provided via textInput', () => {
-            // We test that the component renders with images correctly
-            // The actual submit behavior with images is tested in useTextInput_images tests
             const { container } = render(_jsx(MultilineInputCore, { value: sentinel1, images: [img1], showCursor: false }));
             expect(container.textContent).toContain('[Pasted Image #1]');
         });

package/dist/components/MultilineInput/__tests__/useTextInput_images.test.js

@@ -1,25 +1,26 @@
 import { renderHook, act } from '@testing-library/react';
 import { describe, it, expect } from 'vitest';
 import { useTextInput } from '../useTextInput.js';
-import { createSentinel } from '../ImageSentinel.js';
+import { createBlockMarker } from '../BlockMarker.js';
 describe('useTextInput with images', () => {
     const makeImageRef = (id, displayNumber) => ({
         id,
         data: 'base64data',
         mimeType: 'image/png',
         byteSize: 100,
-        displayNumber,
+        displayNumber: displayNumber || 1,
     });
     describe('insertImage', () => {
         it('adds sentinel to text and image to map', () => {
             const { result } = renderHook(() => useTextInput());
-            const imgRef = makeImageRef('img1', 1);
+            const imgRef = makeImageRef('img1');
             act(() => {
                 result.current.insertImage(imgRef);
             });
-            const sentinel = createSentinel('img1', 1);
-            expect(result.current.value).toBe(sentinel);
-            expect(result.current.getImages()).toEqual([imgRef]);
+            expect(result.current.getImages()).toHaveLength(1);
+            expect(result.current.getImages()[0].id).toBe('img1');
+            const line = result.current.buffer.lines[0];
+            expect(line).toContain(createBlockMarker('i', 'img1', 1));
         });
         it('assigns correct displayNumber', () => {
             const { result } = renderHook(() => useTextInput());
@@ -32,15 +33,25 @@ describe('useTextInput with images', () => {
             expect(images[0].displayNumber).toBe(1);
             expect(images[1].displayNumber).toBe(2);
         });
+        it('continues numbering after controlled images are synced', () => {
+            const { result } = renderHook(() => useTextInput());
+            act(() => {
+                result.current.setImages([makeImageRef('img5', 5)]);
+            });
+            act(() => {
+                result.current.insertImage(makeImageRef('img6', 6));
+            });
+            expect(result.current.getImages().map((img) => img.displayNumber)).toEqual([5, 6]);
+            expect(result.current.buffer.lines[0]).toContain(createBlockMarker('i', 'img6', 6));
+        });
     });
     describe('deleteChar removes image and sentinel', () => {
         it('removes sentinel and image from map on backspace', () => {
             const { result } = renderHook(() => useTextInput());
-            const imgRef = makeImageRef('img1', 1);
+            const imgRef = makeImageRef('img1');
             act(() => { result.current.insertImage(imgRef); });
-            const sentinel = createSentinel('img1', 1);
-            // Cursor is at end of sentinel
-            expect(result.current.cursor.column).toBe(sentinel.length);
+            const markerLen = createBlockMarker('i', 'img1', 1).length;
+            expect(result.current.cursor.column).toBe(markerLen);
             act(() => {
                 result.current.delete();
             });
@@ -51,17 +62,14 @@ describe('useTextInput with images', () => {
     describe('deleteForward removes image and sentinel', () => {
         it('removes sentinel and image from map on delete key', () => {
             const { result } = renderHook(() => useTextInput());
-            const imgRef = makeImageRef('img1', 1);
+            const imgRef = makeImageRef('img1');
             act(() => { result.current.insertImage(imgRef); });
-            // Move cursor to before the sentinel
             act(() => { result.current.moveCursor('left'); });
             act(() => { result.current.moveCursor('left'); });
-            // Cursor should now be before the sentinel
             expect(result.current.cursor.column).toBe(0);
             act(() => {
                 result.current.deleteForward();
             });
-            // Should have deleted the whole sentinel
             expect(result.current.value).toBe('');
             expect(result.current.getImages()).toEqual([]);
         });
@@ -69,7 +77,7 @@ describe('useTextInput with images', () => {
     describe('undo/redo with images', () => {
         it('undo restores deleted image', () => {
             const { result } = renderHook(() => useTextInput({ undoDebounceMs: 0 }));
-            const imgRef = makeImageRef('img1', 1);
+            const imgRef = makeImageRef('img1');
             act(() => { result.current.insertImage(imgRef); });
             expect(result.current.getImages()).toHaveLength(1);
             act(() => { result.current.delete(); });
@@ -80,7 +88,7 @@ describe('useTextInput with images', () => {
         });
         it('redo re-applies image insert', () => {
             const { result } = renderHook(() => useTextInput({ undoDebounceMs: 0 }));
-            const imgRef = makeImageRef('img1', 1);
+            const imgRef = makeImageRef('img1');
             act(() => { result.current.insertImage(imgRef); });
             act(() => { result.current.undo(); });
             expect(result.current.getImages()).toHaveLength(0);
@@ -90,21 +98,14 @@ describe('useTextInput with images', () => {
         });
     });
     describe('setText cleans up orphaned sentinels', () => {
-        it('removes images whose sentinels are no longer in text', () => {
+        it('setText clears block entries', () => {
             const { result } = renderHook(() => useTextInput());
-            const img1 = makeImageRef('img1', 1);
-            const img2 = makeImageRef('img2', 2);
+            const img1 = makeImageRef('img1');
             act(() => { result.current.insertImage(img1); });
-            act(() => { result.current.insertImage(img2); });
-            expect(result.current.getImages()).toHaveLength(2);
-            // setText to a value that only contains img1's sentinel
-            const sentinel1 = createSentinel('img1', 1);
-            act(() => {
-                result.current.setText(sentinel1 + ' extra');
-            });
-            const images = result.current.getImages();
-            expect(images).toHaveLength(1);
-            expect(images[0].id).toBe('img1');
+            expect(result.current.getImages()).toHaveLength(1);
+            act(() => { result.current.setText('new text'); });
+            expect(result.current.getImages()).toHaveLength(0);
+            expect(result.current.value).toBe('new text');
         });
     });
 });

package/dist/components/MultilineInput/index.d.ts

@@ -20,10 +20,10 @@ export interface MultilineInputProps {
     pasteThreshold?: number;
     /**
      * Custom formatter for the placeholder display text.
-     * Receives the placeholder ID and should return the display string.
-     * Default: (id) => `[Paste text #${id}]`
+     * Receives the display number (1-based) and should return the display string.
+     * Default: (n) => `[Paste text #${n}]`
      */
-    formatPastePlaceholder?: (id: number) => string;
+    formatPastePlaceholder?: (displayNumber: number) => string;
     images?: ImageRef[];
     onImagesChange?: (images: ImageRef[]) => void;
     onPasteError?: (reason: PasteErrorReason) => void;
@@ -51,10 +51,10 @@ export interface MultilineInputCoreProps {
     pasteThreshold?: number;
     /**
      * Custom formatter for the placeholder display text.
-     * Receives the placeholder ID and should return the display string.
-     * Default: (id) => `[Paste text #${id}]`
+     * Receives the display number (1-based) and should return the display string.
+     * Default: (n) => `[Paste text #${n}]`
      */
-    formatPastePlaceholder?: (id: number) => string;
+    formatPastePlaceholder?: (displayNumber: number) => string;
     images?: ImageRef[];
     onImagesChange?: (images: ImageRef[]) => void;
 }

package/dist/components/MultilineInput/index.js

@@ -7,15 +7,6 @@ import { handleKey } from './KeyHandler.js';
 import { TextRenderer } from './TextRenderer.js';
 import { useClipboardPaste } from './useClipboardPaste.js';
 import { log } from '../../utils/logger.js';
-function imagesToRecord(images) {
-    if (!images || images.length === 0)
-        return {};
-    const record = {};
-    for (const img of images) {
-        record[img.id] = img;
-    }
-    return record;
-}
 export const MultilineInputCore = ({ value, onChange, placeholder, showCursor = true, width = 80, onCursorChange, cursorOverride, undoDebounceMs, pasteThreshold, formatPastePlaceholder, images, onImagesChange, }) => {
     const textInput = useTextInput({ initialValue: value ?? '', undoDebounceMs, pasteThreshold, formatPastePlaceholder });
     const isSyncingFromProps = useRef(false);
@@ -67,24 +58,70 @@ export const MultilineInputCore = ({ value, onChange, placeholder, showCursor =
     if (showPlaceholder) {
         return _jsx("div", { style: { opacity: 0.5 }, children: placeholder });
     }
-    return (_jsx(TextRenderer, { buffer: textInput.buffer, cursor: textInput.cursor, width: width, showCursor: showCursor, placeholderState: textInput.placeholderState, images: imagesToRecord(textInput.images) }));
+    return (_jsx(TextRenderer, { buffer: textInput.buffer, cursor: textInput.cursor, width: width, showCursor: showCursor, blockState: textInput.blockState }));
 };
 export const MultilineInput = ({ value, onChange, onSubmit, placeholder, showCursor = true, width, isActive = true, onCursorChange, cursorOverride, onBoundaryArrow, undoDebounceMs, pasteThreshold, formatPastePlaceholder, images, onImagesChange, onPasteError, enableImagePaste = false, maxImageSizeBytes, maxImageCount, acceptedMimeTypes, }) => {
     const terminalWidth = useTerminalWidth(width);
     const { stdin } = useStdin();
     const lastRawInput = useRef('');
+    const pasteActive = useRef(false);
+    const pasteBuffer = useRef('');
+    const suppressNextInput = useRef(false);
+    const textInput = useTextInput({ initialValue: value ?? '', width: terminalWidth, undoDebounceMs, pasteThreshold, formatPastePlaceholder });
+    const textInputRef = useRef(textInput);
+    useEffect(() => {
+        textInputRef.current = textInput;
+    }, [textInput]);
     useEffect(() => {
         if (!stdin || !isActive)
             return;
+        const PASTE_START = '\x1b[200~';
+        const PASTE_END = '\x1b[201~';
+        // Enable bracketed paste mode so terminal-mediated pastes (e.g. Cmd+V on
+        // macOS) are wrapped in \x1b[200~ ... \x1b[201~ markers we can detect.
+        process.stdout.write('\x1b[?2004h');
         const handleData = (data) => {
-            lastRawInput.current = data.toString();
+            const str = data.toString();
+            lastRawInput.current = str;
+            const hasStart = str.includes(PASTE_START);
+            const hasEnd = str.includes(PASTE_END);
+            if (!pasteActive.current && !hasStart)
+                return;
+            let remaining = str;
+            if (!pasteActive.current && hasStart) {
+                pasteActive.current = true;
+                pasteBuffer.current = '';
+                remaining = remaining.slice(remaining.indexOf(PASTE_START) + PASTE_START.length);
+            }
+            // Suppress the useInput dispatch for any chunk that participates in a paste.
+            suppressNextInput.current = true;
+            if (pasteActive.current) {
+                const endIdx = remaining.indexOf(PASTE_END);
+                if (endIdx === -1) {
+                    pasteBuffer.current += remaining;
+                }
+                else {
+                    pasteBuffer.current += remaining.slice(0, endIdx);
+                    const pasted = pasteBuffer.current;
+                    pasteActive.current = false;
+                    pasteBuffer.current = '';
+                    // Defer to next tick so the insert isn't tangled with React's
+                    // current render/dispatch cycle for this stdin chunk.
+                    queueMicrotask(() => {
+                        textInputRef.current?.insert(pasted);
+                    });
+                }
+            }
         };
         stdin.on('data', handleData);
         return () => {
+            process.stdout.write('\x1b[?2004l');
             stdin.off('data', handleData);
+            pasteActive.current = false;
+            pasteBuffer.current = '';
+            suppressNextInput.current = false;
         };
     }, [stdin, isActive]);
-    const textInput = useTextInput({ initialValue: value ?? '', width: terminalWidth, undoDebounceMs, pasteThreshold, formatPastePlaceholder });
     const { isPasting, paste: clipboardPaste } = useClipboardPaste({
         enableImagePaste,
         maxImageSizeBytes,
@@ -168,6 +205,12 @@ export const MultilineInput = ({ value, onChange, onSubmit, placeholder, showCur
         paste: handlePaste,
     };
     useInput((input, key) => {
+        if (suppressNextInput.current) {
+            // This stdin chunk is part of a bracketed paste — already handled by the
+            // raw 'data' listener. Don't dispatch as keystrokes.
+            suppressNextInput.current = false;
+            return;
+        }
         log(`[USEINPUT] input="${input.replace(/[\x00-\x1F\x7F-￿]/g, c => `\\x${c.charCodeAt(0).toString(16)}`)}" key=${JSON.stringify(key)} rawLen=${lastRawInput.current?.length || 0}`);
         handleKey(key, input, textInput.buffer, actions, textInput.cursor, lastRawInput.current, terminalWidth);
     }, { isActive });
@@ -176,5 +219,5 @@ export const MultilineInput = ({ value, onChange, onSubmit, placeholder, showCur
     if (showPlaceholder && !isPasting) {
         return (_jsx(Box, { children: _jsx(Text, { dimColor: true, children: placeholder }) }));
     }
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(TextRenderer, { buffer: textInput.buffer, cursor: textInput.cursor, width: terminalWidth, showCursor: showCursor, placeholderState: textInput.placeholderState, images: imagesToRecord(textInput.images) }), isPasting && (_jsx(Box, { children: _jsx(Text, { dimColor: true, children: "Reading clipboard..." }) }))] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(TextRenderer, { buffer: textInput.buffer, cursor: textInput.cursor, width: terminalWidth, showCursor: showCursor, blockState: textInput.blockState }), isPasting && (_jsx(Box, { children: _jsx(Text, { dimColor: true, children: "Reading clipboard..." }) }))] }));
 };

package/dist/components/MultilineInput/types.d.ts

@@ -33,26 +33,6 @@ export interface WrapResult {
     /** Column in that visual row where cursor appears */
     cursorVisualCol: number;
 }
-/**
- * Information about a paste placeholder: its identifier, original text, and display label.
- */
-export interface PlaceholderInfo {
-    /** Unique placeholder identifier */
-    id: number;
-    /** The original pasted text (may contain newlines) */
-    originalText: string;
-    /** The display label shown in place of the original text (e.g., "[Paste text #1]") */
-    displayText: string;
-}
-/**
- * Registry state for paste placeholders.
- */
-export interface PlaceholderState {
-    /** Map of placeholder ID to info */
-    placeholders: Map<number, PlaceholderInfo>;
-    /** Next auto-incrementing ID */
-    nextId: number;
-}
 /**
  * Keyboard key state (mirrors Ink's Key interface)
  * Defined locally to avoid ESM/CJS import issues with Ink

package/dist/components/MultilineInput/useTextInput.d.ts

@@ -1,20 +1,13 @@
-import type { Buffer, Cursor, Direction, PlaceholderState } from './types.js';
+import type { Buffer, Cursor, Direction } from './types.js';
 import type { ImageRef } from './ImageTypes.js';
+import type { BlockState } from './BlockTypes.js';
 export interface UseTextInputProps {
     initialValue?: string;
     width?: number;
     historyLimit?: number;
     undoDebounceMs?: number;
-    /**
-     * When set, pasted text exceeding this character count is replaced
-     * with a placeholder for cleaner display.
-     */
     pasteThreshold?: number;
-    /**
-     * Custom formatter for placeholder display text.
-     * Default: (id) => `[Paste text #${id}]`
-     */
-    formatPastePlaceholder?: (id: number) => string;
+    formatPastePlaceholder?: (displayNumber: number) => string;
 }
 export interface UseTextInputResult {
     value: string;
@@ -31,7 +24,7 @@ export interface UseTextInputResult {
     setText: (text: string) => void;
     cursorOffset: number;
     setCursorOffset: (offset: number) => void;
-    placeholderState: PlaceholderState;
+    blockState: BlockState;
     insertImage: (imageRef: ImageRef) => void;
     images: ImageRef[];
     getImages: () => ImageRef[];