ink-prompt 0.2.3 → 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,7 +58,7 @@ 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);
@@ -228,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[];

package/dist/components/MultilineInput/useTextInput.js

@@ -1,10 +1,9 @@
 import { useState, useCallback, useEffect, useMemo, useRef } from 'react';
-import { createBuffer, insertText as bufferInsertText, deleteChar as bufferDeleteChar, deleteCharForward as bufferDeleteCharForward, insertNewLine as bufferInsertNewLine, moveCursor as bufferMoveCursor, getTextContent, } from './TextBuffer.js';
-import { createPlaceholderState, addPlaceholder, removePlaceholder, getValue, getValueCursorOffset, getCursorFromValueOffset, } from './Placeholder.js';
-import { createSentinel, parseSentinels } from './ImageSentinel.js';
+import { createBuffer, insertText as bufferInsertText, deleteChar as bufferDeleteChar, deleteCharForward as bufferDeleteCharForward, insertNewLine as bufferInsertNewLine, moveCursor as bufferMoveCursor, } from './TextBuffer.js';
+import { createBlockState, createPasteBlockEntry, createImageBlockEntry, removeBlock, getValue, getValueCursorOffset, getCursorFromValueOffset, } from './BlockRegistry.js';
 import { findAtomicBlockBefore, findAtomicBlockAfter } from './AtomicBlocks.js';
 import { log } from '../../utils/logger.js';
-const defaultFormatPlaceholder = (id) => `[Paste text #${id}]`;
+const defaultFormatPlaceholder = (displayNumber) => `[Paste text #${displayNumber}]`;
 export function useTextInput({ initialValue = '', width, historyLimit = 100, undoDebounceMs = 200, pasteThreshold, formatPastePlaceholder = defaultFormatPlaceholder, } = {}) {
     const [buffer, setBuffer] = useState(() => createBuffer(initialValue));
     const [cursor, setCursor] = useState(() => {
@@ -14,9 +13,7 @@ export function useTextInput({ initialValue = '', width, historyLimit = 100, und
             column: lines[lines.length - 1].length,
         };
     });
-    const [placeholderState, setPlaceholderState] = useState(() => createPlaceholderState());
-    const [images, setImages] = useState({});
-    const nextDisplayNumberRef = useRef(1);
+    const [blockState, setBlockState] = useState(() => createBlockState());
     const [undoStack, setUndoStack] = useState([]);
     const [redoStack, setRedoStack] = useState([]);
     const pendingInsertBatchRef = useRef({});
@@ -56,13 +53,12 @@ export function useTextInput({ initialValue = '', width, historyLimit = 100, und
             pendingInsertBatchRef.current.startState = {
                 buffer: currentBuffer,
                 cursor: currentCursor,
-                placeholderState,
-                images,
+                blockState,
             };
             setRedoStack([]);
         }
         schedulePendingInsertCommit();
-    }, [schedulePendingInsertCommit, placeholderState, images]);
+    }, [schedulePendingInsertCommit, blockState]);
     const flushPendingInsertBatch = useCallback(() => {
         commitPendingInsertBatch();
     }, [commitPendingInsertBatch]);
@@ -70,11 +66,10 @@ export function useTextInput({ initialValue = '', width, historyLimit = 100, und
         appendUndoState({
             buffer: currentBuffer,
             cursor: currentCursor,
-            placeholderState,
-            images,
+            blockState,
         });
         setRedoStack([]);
-    }, [appendUndoState, placeholderState, images]);
+    }, [appendUndoState, blockState]);
     useEffect(() => {
         return () => {
             clearPendingInsertTimer();
@@ -92,16 +87,16 @@ export function useTextInput({ initialValue = '', width, historyLimit = 100, und
         }
     }, [buffer, cursor, flushPendingInsertBatch, pushToHistory]);
     const insert = useCallback((char) => {
-        log(`[INSERT] char="${char.replace(/[\x00-\x1F\x7F-￿]/g, c => `\\x${c.charCodeAt(0).toString(16)}`)}" len=${char.length} cursor={line:${cursor.line},col:${cursor.column}} linesBefore=${buffer.lines.length}`);
+        log(`[INSERT] char="${char.replace(/[\x00-\x1F\x7F-\uFFFF]/g, c => `\\x${c.charCodeAt(0).toString(16)}`)}" len=${char.length} cursor={line:${cursor.line},col:${cursor.column}} linesBefore=${buffer.lines.length}`);
         const normalized = char.replace(/\r\n/g, '\n').replace(/\r/g, '\n').replace(/\x00/g, '');
         if (normalized.length === 0)
             return;
-        // Check if this is a paste exceeding the threshold
         if (pasteThreshold !== undefined && pasteThreshold > 0 && normalized.length > pasteThreshold) {
             flushPendingInsertBatch();
             pushToHistory(buffer, cursor);
-            const { id, marker, state: newPlaceholderState } = addPlaceholder(placeholderState, normalized, formatPastePlaceholder(placeholderState.nextId));
-            setPlaceholderState(newPlaceholderState);
+            const displayText = formatPastePlaceholder(blockState.nextPasteNumber);
+            const { marker, state: newBlockState } = createPasteBlockEntry(blockState, normalized, displayText);
+            setBlockState(newBlockState);
             const result = bufferInsertText(buffer, cursor, marker);
             setBuffer(result.buffer);
             setCursor(result.cursor);
@@ -120,70 +115,61 @@ export function useTextInput({ initialValue = '', width, historyLimit = 100, und
         const result = bufferInsertText(buffer, cursor, normalized);
         setBuffer(result.buffer);
         setCursor(result.cursor);
-    }, [beginOrRefreshInsertBatch, buffer, cursor, flushPendingInsertBatch, pushToHistory, undoDebounceMs, pasteThreshold, placeholderState, formatPastePlaceholder]);
+    }, [beginOrRefreshInsertBatch, buffer, cursor, flushPendingInsertBatch, pushToHistory, undoDebounceMs, pasteThreshold, blockState, formatPastePlaceholder]);
     const cleanupBlockRegistry = useCallback((block) => {
         if (!block)
             return;
-        if (block.kind === 'placeholder') {
-            setPlaceholderState((prev) => removePlaceholder(prev, block.id));
-        }
-        else if (block.kind === 'sentinel' && images[block.id]) {
-            const next = { ...images };
-            delete next[block.id];
-            setImages(next);
-        }
-    }, [images]);
+        setBlockState((prev) => removeBlock(prev, block.id));
+    }, []);
     const deleteChar = useCallback(() => {
         applyEdit(() => {
             const line = buffer.lines[cursor.line];
-            cleanupBlockRegistry(findAtomicBlockBefore(line, cursor.column, placeholderState.placeholders));
-            return bufferDeleteChar(buffer, cursor, placeholderState.placeholders);
+            cleanupBlockRegistry(findAtomicBlockBefore(line, cursor.column, blockState.entries));
+            return bufferDeleteChar(buffer, cursor, blockState.entries);
         });
-    }, [applyEdit, buffer, cursor, placeholderState, cleanupBlockRegistry]);
+    }, [applyEdit, buffer, cursor, blockState, cleanupBlockRegistry]);
     const deleteCharForward = useCallback(() => {
         applyEdit(() => {
             const line = buffer.lines[cursor.line];
-            cleanupBlockRegistry(findAtomicBlockAfter(line, cursor.column, placeholderState.placeholders));
-            return bufferDeleteCharForward(buffer, cursor, placeholderState.placeholders);
+            cleanupBlockRegistry(findAtomicBlockAfter(line, cursor.column, blockState.entries));
+            return bufferDeleteCharForward(buffer, cursor, blockState.entries);
         });
-    }, [applyEdit, buffer, cursor, placeholderState, cleanupBlockRegistry]);
+    }, [applyEdit, buffer, cursor, blockState, cleanupBlockRegistry]);
     const newLine = useCallback(() => {
         applyEdit(() => bufferInsertNewLine(buffer, cursor));
     }, [applyEdit, buffer, cursor]);
     const deleteAndNewLine = useCallback(() => {
         applyEdit(() => {
-            const afterDelete = bufferDeleteChar(buffer, cursor, placeholderState.placeholders);
+            const afterDelete = bufferDeleteChar(buffer, cursor, blockState.entries);
             return bufferInsertNewLine(afterDelete.buffer, afterDelete.cursor);
         });
-    }, [applyEdit, buffer, cursor, placeholderState]);
+    }, [applyEdit, buffer, cursor, blockState]);
     const moveCursor = useCallback((direction) => {
         flushPendingInsertBatch();
-        const newCursor = bufferMoveCursor(buffer, cursor, direction, width, placeholderState.placeholders);
+        const newCursor = bufferMoveCursor(buffer, cursor, direction, width, blockState.entries);
         setCursor(newCursor);
-    }, [buffer, cursor, flushPendingInsertBatch, width, placeholderState]);
+    }, [buffer, cursor, flushPendingInsertBatch, width, blockState]);
     const undo = useCallback(() => {
         const pendingStartState = pendingInsertBatchRef.current.startState;
         if (pendingStartState) {
             clearPendingInsertTimer();
             pendingInsertBatchRef.current.startState = undefined;
-            setRedoStack((prev) => [...prev, { buffer, cursor, placeholderState, images }]);
+            setRedoStack((prev) => [...prev, { buffer, cursor, blockState }]);
             setBuffer(pendingStartState.buffer);
             setCursor(pendingStartState.cursor);
-            setPlaceholderState(pendingStartState.placeholderState);
-            setImages(pendingStartState.images);
+            setBlockState(pendingStartState.blockState);
             return;
         }
         if (undoStack.length === 0)
             return;
         const previousState = undoStack[undoStack.length - 1];
         const newUndoStack = undoStack.slice(0, -1);
-        setRedoStack((prev) => [...prev, { buffer, cursor, placeholderState, images }]);
+        setRedoStack((prev) => [...prev, { buffer, cursor, blockState }]);
         setBuffer(previousState.buffer);
         setCursor(previousState.cursor);
-        setPlaceholderState(previousState.placeholderState);
-        setImages(previousState.images);
+        setBlockState(previousState.blockState);
         setUndoStack(newUndoStack);
-    }, [buffer, clearPendingInsertTimer, cursor, undoStack, placeholderState, images]);
+    }, [buffer, clearPendingInsertTimer, cursor, undoStack, blockState]);
     const redo = useCallback(() => {
         if (pendingInsertBatchRef.current.startState) {
             return;
@@ -192,53 +178,70 @@ export function useTextInput({ initialValue = '', width, historyLimit = 100, und
             return;
         const nextState = redoStack[redoStack.length - 1];
         const newRedoStack = redoStack.slice(0, -1);
-        setUndoStack((prev) => [...prev, { buffer, cursor, placeholderState, images }]);
+        setUndoStack((prev) => [...prev, { buffer, cursor, blockState }]);
         setBuffer(nextState.buffer);
         setCursor(nextState.cursor);
-        setPlaceholderState(nextState.placeholderState);
-        setImages(nextState.images);
+        setBlockState(nextState.blockState);
         setRedoStack(newRedoStack);
-    }, [buffer, cursor, redoStack, placeholderState, images]);
+    }, [buffer, cursor, redoStack, blockState]);
     const setText = useCallback((text) => {
         applyEdit(() => {
-            setPlaceholderState(createPlaceholderState());
+            setBlockState(createBlockState());
             const newBuffer = createBuffer(text);
             const lines = text.split('\n');
             const newCursor = { line: lines.length - 1, column: lines[lines.length - 1].length };
-            // Clean up orphaned images
-            const usedIds = new Set(parseSentinels(getTextContent(newBuffer)).map((s) => s.id));
-            setImages((prev) => {
-                const next = {};
-                for (const [id, ref] of Object.entries(prev)) {
-                    if (usedIds.has(id))
-                        next[id] = ref;
-                }
-                return next;
-            });
             return { buffer: newBuffer, cursor: newCursor };
         });
     }, [applyEdit]);
     const insertImage = useCallback((imageRef) => {
         applyEdit(() => {
-            setImages((prev) => ({ ...prev, [imageRef.id]: imageRef }));
-            if (imageRef.displayNumber >= nextDisplayNumberRef.current) {
-                nextDisplayNumberRef.current = imageRef.displayNumber + 1;
-            }
-            return bufferInsertText(buffer, cursor, createSentinel(imageRef.id, imageRef.displayNumber));
+            const { marker, state: newBlockState } = createImageBlockEntry(blockState, imageRef, imageRef.id);
+            setBlockState(newBlockState);
+            return bufferInsertText(buffer, cursor, marker);
         });
-    }, [applyEdit, buffer, cursor]);
-    const value = useMemo(() => getValue(buffer.lines, placeholderState.placeholders), [buffer.lines, placeholderState.placeholders]);
-    const cursorOffset = useMemo(() => getValueCursorOffset(buffer.lines, cursor, placeholderState.placeholders), [buffer.lines, cursor, placeholderState.placeholders]);
-    const imagesList = useMemo(() => Object.values(images), [images]);
+    }, [applyEdit, buffer, cursor, blockState]);
+    const value = useMemo(() => getValue(buffer.lines, blockState.entries), [buffer.lines, blockState.entries]);
+    const cursorOffset = useMemo(() => getValueCursorOffset(buffer.lines, cursor, blockState.entries), [buffer.lines, cursor, blockState.entries]);
+    const imagesList = useMemo(() => {
+        const result = [];
+        for (const entry of blockState.entries.values()) {
+            if (entry.kind === 'image') {
+                result.push({
+                    id: entry.id,
+                    data: entry.data,
+                    mimeType: entry.mimeType,
+                    byteSize: entry.byteSize,
+                    displayNumber: entry.displayNumber,
+                });
+            }
+        }
+        return result;
+    }, [blockState.entries]);
     const getImagesCallback = useCallback(() => {
         return imagesList;
     }, [imagesList]);
     const setImagesCallback = useCallback((newImages) => {
-        const map = {};
-        for (const img of newImages) {
-            map[img.id] = img;
-        }
-        setImages(map);
+        setBlockState((prev) => {
+            const newEntries = new Map(prev.entries);
+            for (const [id, entry] of prev.entries) {
+                if (entry.kind === 'image') {
+                    newEntries.delete(id);
+                }
+            }
+            let nextImageNumber = prev.nextImageNumber;
+            for (const img of newImages) {
+                nextImageNumber = Math.max(nextImageNumber, img.displayNumber + 1);
+                newEntries.set(img.id, {
+                    kind: 'image',
+                    id: img.id,
+                    displayNumber: img.displayNumber,
+                    data: img.data,
+                    mimeType: img.mimeType,
+                    byteSize: img.byteSize,
+                });
+            }
+            return { ...prev, entries: newEntries, nextImageNumber };
+        });
     }, []);
     return {
         value,
@@ -256,9 +259,9 @@ export function useTextInput({ initialValue = '', width, historyLimit = 100, und
         cursorOffset,
         setCursorOffset: useCallback((offset) => {
             flushPendingInsertBatch();
-            setCursor(getCursorFromValueOffset(buffer.lines, offset, placeholderState.placeholders));
-        }, [buffer.lines, flushPendingInsertBatch, placeholderState.placeholders]),
-        placeholderState,
+            setCursor(getCursorFromValueOffset(buffer.lines, offset, blockState.entries));
+        }, [buffer.lines, flushPendingInsertBatch, blockState.entries]),
+        blockState,
         insertImage,
         images: imagesList,
         getImages: getImagesCallback,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ink-prompt",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "A React Ink component for prompts",
   "type": "module",
   "main": "./dist/index.js",