ink-prompt 0.2.0 → 0.2.2

package/README.md

@@ -36,17 +36,24 @@ render(<App />);
 |------|------|---------|-------------|
 | `value` | `string` | | External control of the text value (controlled mode) |
 | `onChange` | `(value: string) => void` | | Called when text content changes |
-| `onSubmit` | `(value: string) => void` | | Called when Enter is pressed (without trailing `\`) |
+| `onSubmit` | `(value: string, images?: ImageRef[]) => void` | | Called when Enter is pressed (without trailing `\`) |
 | `placeholder` | `string` | | Placeholder text shown when empty and cursor is hidden |
 | `showCursor` | `boolean` | `true` | Whether to display the cursor |
 | `width` | `number` | terminal width | Width for word wrapping (auto-resizes with terminal) |
 | `isActive` | `boolean` | `true` | Whether the input accepts keyboard events |
 | `onCursorChange` | `(offset: number) => void` | | Called when cursor position changes |
 | `cursorOverride` | `number` | | Force cursor to a specific offset |
-| `onBoundaryArrow` | `(dir) => void` | | Called when arrow key reaches a boundary |
+| `onBoundaryArrow` | `(direction: 'up' \| 'down' \| 'left' \| 'right') => void` | | Called when arrow key reaches a boundary |
 | `undoDebounceMs` | `number` | `200` | Milliseconds of inactivity to commit undo batch (`0` = disable) |
 | `pasteThreshold` | `number` | | Max paste length before text is replaced by a placeholder |
 | `formatPastePlaceholder` | `(id: number) => string` | | Custom placeholder display format |
+| `enableImagePaste` | `boolean` | `false` | Enables image-aware Ctrl+V handling |
+| `images` | `ImageRef[]` | | Controlled image state for pasted images |
+| `onImagesChange` | `(images: ImageRef[]) => void` | | Called when images change |
+| `onPasteError` | `(reason: PasteErrorReason) => void` | | Called when paste fails |
+| `maxImageSizeBytes` | `number` | `10485760` | Maximum image size in bytes (default 10 MiB) |
+| `maxImageCount` | `number` | `10` | Maximum number of pasted images |
+| `acceptedMimeTypes` | `string[]` | | Restricts accepted image MIME types |
 
 ### Keyboard Controls
 

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

@@ -0,0 +1,25 @@
+import type { PlaceholderInfo } from './types.js';
+export type AtomicBlock = {
+    kind: 'sentinel';
+    id: string;
+    displayNumber: number;
+    start: number;
+    end: number;
+    displayWidth: number;
+    displayText: string;
+} | {
+    kind: 'placeholder';
+    id: number;
+    start: number;
+    end: number;
+    displayWidth: number;
+    displayText: string;
+};
+export type Placeholders = Map<number, PlaceholderInfo> | undefined;
+export declare function findAtomicBlocks(line: string, placeholders?: Placeholders): AtomicBlock[];
+/** Block that strictly contains offset (offset > start && offset < end) — cursor is in the interior. */
+export declare function findAtomicBlockSpanning(line: string, offset: number, placeholders?: Placeholders): AtomicBlock | null;
+/** Block whose end === offset (the block immediately to the left of the cursor). */
+export declare function findAtomicBlockBefore(line: string, offset: number, placeholders?: Placeholders): AtomicBlock | null;
+/** Block whose start === offset (the block immediately to the right of the cursor). */
+export declare function findAtomicBlockAfter(line: string, offset: number, placeholders?: Placeholders): AtomicBlock | null;

package/dist/components/MultilineInput/AtomicBlocks.js

@@ -0,0 +1,60 @@
+import { parseSentinels, getPlaceholderText } from './ImageSentinel.js';
+import { MARKER_REGEX } from './Placeholder.js';
+export function findAtomicBlocks(line, placeholders) {
+    const blocks = [];
+    for (const s of parseSentinels(line)) {
+        const displayText = getPlaceholderText(s.displayNumber);
+        blocks.push({
+            kind: 'sentinel',
+            id: s.id,
+            displayNumber: s.displayNumber,
+            start: s.start,
+            end: s.end,
+            displayWidth: displayText.length,
+            displayText,
+        });
+    }
+    if (placeholders && placeholders.size > 0) {
+        MARKER_REGEX.lastIndex = 0;
+        let m;
+        while ((m = MARKER_REGEX.exec(line)) !== null) {
+            const id = Number(m[1]);
+            const info = placeholders.get(id);
+            const displayText = info ? info.displayText : '';
+            blocks.push({
+                kind: 'placeholder',
+                id,
+                start: m.index,
+                end: m.index + m[0].length,
+                displayWidth: displayText.length,
+                displayText,
+            });
+        }
+    }
+    blocks.sort((a, b) => a.start - b.start);
+    return blocks;
+}
+/** Block that strictly contains offset (offset > start && offset < end) — cursor is in the interior. */
+export function findAtomicBlockSpanning(line, offset, placeholders) {
+    for (const b of findAtomicBlocks(line, placeholders)) {
+        if (offset > b.start && offset < b.end)
+            return b;
+    }
+    return null;
+}
+/** Block whose end === offset (the block immediately to the left of the cursor). */
+export function findAtomicBlockBefore(line, offset, placeholders) {
+    for (const b of findAtomicBlocks(line, placeholders)) {
+        if (b.end === offset)
+            return b;
+    }
+    return null;
+}
+/** Block whose start === offset (the block immediately to the right of the cursor). */
+export function findAtomicBlockAfter(line, offset, placeholders) {
+    for (const b of findAtomicBlocks(line, placeholders)) {
+        if (b.start === offset)
+            return b;
+    }
+    return null;
+}

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

@@ -1,4 +1,5 @@
 import type { Buffer, Cursor, Direction } from './types.js';
+import { type Placeholders } from './AtomicBlocks.js';
 /**
  * Create a new buffer from optional initial text
  */
@@ -14,14 +15,14 @@ export declare function insertText(buffer: Buffer, cursor: Cursor, text: string)
 /**
  * Delete character before cursor (backspace)
  */
-export declare function deleteChar(buffer: Buffer, cursor: Cursor): {
+export declare function deleteChar(buffer: Buffer, cursor: Cursor, placeholders?: Placeholders): {
     buffer: Buffer;
     cursor: Cursor;
 };
 /**
  * Delete character after cursor (forward delete / Delete key)
  */
-export declare function deleteCharForward(buffer: Buffer, cursor: Cursor): {
+export declare function deleteCharForward(buffer: Buffer, cursor: Cursor, placeholders?: Placeholders): {
     buffer: Buffer;
     cursor: Cursor;
 };
@@ -48,13 +49,13 @@ interface VisualRowInfo {
  * Sentinel blocks are atomic: never split, and occupy visual width
  * equal to their placeholder text length.
  */
-export declare function getVisualRows(line: string, width: number): VisualRowInfo[];
+export declare function getVisualRows(line: string, width: number, placeholders?: Placeholders): VisualRowInfo[];
 /**
  * Move cursor in specified direction with bounds checking.
  * When width is provided, up/down movement is based on visual lines (accounting for wrapping).
  * When width is not provided, up/down movement is based on buffer lines.
  */
-export declare function moveCursor(buffer: Buffer, cursor: Cursor, direction: Direction, width?: number): Cursor;
+export declare function moveCursor(buffer: Buffer, cursor: Cursor, direction: Direction, width?: number, placeholders?: Placeholders): Cursor;
 /**
  * Get the full text content from buffer (lines joined with newlines)
  */

package/dist/components/MultilineInput/TextBuffer.js

@@ -1,5 +1,4 @@
-import { SENTINEL_OPEN } from './ImageTypes.js';
-import { parseSentinels, findSentinelAt, getPlaceholderVisualWidth } from './ImageSentinel.js';
+import { findAtomicBlocks, findAtomicBlockBefore, findAtomicBlockAfter, } from './AtomicBlocks.js';
 /**
  * Create a new buffer from optional initial text
  */
@@ -44,7 +43,7 @@ export function insertText(buffer, cursor, text) {
 /**
  * Delete character before cursor (backspace)
  */
-export function deleteChar(buffer, cursor) {
+export function deleteChar(buffer, cursor, placeholders) {
     const { line, column } = cursor;
     // At the very start of the buffer - nothing to delete
     if (line === 0 && column === 0) {
@@ -63,20 +62,17 @@ export function deleteChar(buffer, cursor) {
             cursor: { line: line - 1, column: previousLine.length },
         };
     }
-    // Check if deleting a sentinel closer - atomically remove whole block
+    // Atomic-block deletion (sentinel or placeholder marker) \u2014 remove the whole block
     const currentLine = buffer.lines[line];
-    const charBefore = currentLine[column - 1];
-    if (charBefore === '\uE001') {
-        const sentinel = findSentinelAt(currentLine, column - 1);
-        if (sentinel) {
-            const newLine = currentLine.slice(0, sentinel.start) + currentLine.slice(sentinel.end);
-            const newLines = [...buffer.lines];
-            newLines[line] = newLine;
-            return {
-                buffer: { lines: newLines },
-                cursor: { line, column: sentinel.start },
-            };
-        }
+    const block = findAtomicBlockBefore(currentLine, column, placeholders);
+    if (block) {
+        const newLine = currentLine.slice(0, block.start) + currentLine.slice(block.end);
+        const newLines = [...buffer.lines];
+        newLines[line] = newLine;
+        return {
+            buffer: { lines: newLines },
+            cursor: { line, column: block.start },
+        };
     }
     const newLine = currentLine.slice(0, column - 1) + currentLine.slice(column);
     const newLines = [...buffer.lines];
@@ -89,7 +85,7 @@ export function deleteChar(buffer, cursor) {
 /**
  * Delete character after cursor (forward delete / Delete key)
  */
-export function deleteCharForward(buffer, cursor) {
+export function deleteCharForward(buffer, cursor, placeholders) {
     const { line, column } = cursor;
     const currentLine = buffer.lines[line];
     const lineCount = buffer.lines.length;
@@ -109,19 +105,16 @@ export function deleteCharForward(buffer, cursor) {
             cursor, // Cursor stays in place
         };
     }
-    // Check if cursor is at a sentinel opener - atomically remove whole block
-    const charAt = currentLine[column];
-    if (charAt === '\uE000') {
-        const sentinel = findSentinelAt(currentLine, column);
-        if (sentinel) {
-            const newLine = currentLine.slice(0, sentinel.start) + currentLine.slice(sentinel.end);
-            const newLines = [...buffer.lines];
-            newLines[line] = newLine;
-            return {
-                buffer: { lines: newLines },
-                cursor,
-            };
-        }
+    // Atomic-block deletion forward (sentinel or placeholder marker) \u2014 remove the whole block
+    const block = findAtomicBlockAfter(currentLine, column, placeholders);
+    if (block) {
+        const newLine = currentLine.slice(0, block.start) + currentLine.slice(block.end);
+        const newLines = [...buffer.lines];
+        newLines[line] = newLine;
+        return {
+            buffer: { lines: newLines },
+            cursor,
+        };
     }
     // Delete character after cursor within the line
     const newLine = currentLine.slice(0, column) + currentLine.slice(column + 1);
@@ -158,14 +151,15 @@ function getVisualWidth(char) {
  * Sentinel blocks are atomic: never split, and occupy visual width
  * equal to their placeholder text length.
  */
-export function getVisualRows(line, width) {
+export function getVisualRows(line, width, placeholders) {
     const safeWidth = Math.max(1, width);
     const rows = [];
     if (line.length === 0) {
         return [{ start: 0, length: 0 }];
     }
-    // Fast path: no sentinels, use original logic
-    if (line.indexOf(SENTINEL_OPEN) === -1) {
+    const blocks = findAtomicBlocks(line, placeholders);
+    // Fast path: no atomic blocks
+    if (blocks.length === 0) {
         let offset = 0;
         let remaining = line;
         while (remaining.length > 0) {
@@ -191,21 +185,19 @@ export function getVisualRows(line, width) {
         }
         return rows;
     }
-    const sentinels = parseSentinels(line);
     let charPos = 0;
     let rowStart = 0;
     let rowVisualWidth = 0;
     let lastSpaceCharPos = -1;
+    let blockIdx = 0;
     while (charPos < line.length) {
-        const sentinel = charPos < sentinels.length && sentinels[charPos] !== undefined
-            ? sentinels.find(s => s.start === charPos)
+        while (blockIdx < blocks.length && blocks[blockIdx].start < charPos)
+            blockIdx++;
+        const block = blockIdx < blocks.length && blocks[blockIdx].start === charPos
+            ? blocks[blockIdx]
             : undefined;
-        let effectiveSentinel;
-        if (line[charPos] === SENTINEL_OPEN) {
-            effectiveSentinel = sentinels.find(s => s.start === charPos);
-        }
-        if (effectiveSentinel) {
-            const svw = getPlaceholderVisualWidth(effectiveSentinel.displayNumber);
+        if (block) {
+            const svw = block.displayWidth;
             if (rowVisualWidth > 0 && rowVisualWidth + svw > safeWidth) {
                 if (lastSpaceCharPos >= rowStart) {
                     rows.push({ start: rowStart, length: lastSpaceCharPos - rowStart });
@@ -222,7 +214,7 @@ export function getVisualRows(line, width) {
                 }
             }
             rowVisualWidth += svw;
-            charPos = effectiveSentinel.end;
+            charPos = block.end;
             lastSpaceCharPos = -1;
             continue;
         }
@@ -262,8 +254,8 @@ export function getVisualRows(line, width) {
  * and the column within that visual row.
  * Uses word-aware wrapping.
  */
-function getVisualPosition(bufferColumn, line, width) {
-    const rows = getVisualRows(line, width);
+function getVisualPosition(bufferColumn, line, width, placeholders) {
+    const rows = getVisualRows(line, width, placeholders);
     for (let i = 0; i < rows.length; i++) {
         const row = rows[i];
         const rowEnd = row.start + row.length;
@@ -290,15 +282,15 @@ function getVisualPosition(bufferColumn, line, width) {
  * Calculate how many visual rows a buffer line takes.
  * Uses word-aware wrapping.
  */
-function getVisualRowCount(line, width) {
-    return getVisualRows(line, width).length;
+function getVisualRowCount(line, width, placeholders) {
+    return getVisualRows(line, width, placeholders).length;
 }
 /**
  * Convert visual position back to buffer column.
  * Uses word-aware wrapping.
  */
-function visualToBufferColumn(visualRow, visualCol, line, width) {
-    const rows = getVisualRows(line, width);
+function visualToBufferColumn(visualRow, visualCol, line, width, placeholders) {
+    const rows = getVisualRows(line, width, placeholders);
     if (visualRow >= rows.length) {
         return line.length;
     }
@@ -309,8 +301,8 @@ function visualToBufferColumn(visualRow, visualCol, line, width) {
  * Get the length of a specific visual row within a buffer line.
  * Uses word-aware wrapping.
  */
-function getVisualRowLength(line, visualRow, width) {
-    const rows = getVisualRows(line, width);
+function getVisualRowLength(line, visualRow, width, placeholders) {
+    const rows = getVisualRows(line, width, placeholders);
     if (visualRow >= rows.length)
         return 0;
     return rows[visualRow].length;
@@ -320,21 +312,17 @@ function getVisualRowLength(line, visualRow, width) {
  * When width is provided, up/down movement is based on visual lines (accounting for wrapping).
  * When width is not provided, up/down movement is based on buffer lines.
  */
-export function moveCursor(buffer, cursor, direction, width) {
+export function moveCursor(buffer, cursor, direction, width, placeholders) {
     const { line, column } = cursor;
     const currentLine = buffer.lines[line];
     const lineCount = buffer.lines.length;
     switch (direction) {
         case 'left': {
             if (column > 0) {
-                // If position before cursor is a sentinel closer, jump to before opener
-                const charBefore = currentLine[column - 1];
-                if (charBefore === '\uE001') {
-                    const sentinel = findSentinelAt(currentLine, column - 1);
-                    if (sentinel) {
-                        return { line, column: sentinel.start };
-                    }
-                }
+                // If position before cursor is the end of an atomic block, jump to its start
+                const block = findAtomicBlockBefore(currentLine, column, placeholders);
+                if (block)
+                    return { line, column: block.start };
                 return { line, column: column - 1 };
             }
             // Wrap to end of previous line
@@ -345,14 +333,10 @@ export function moveCursor(buffer, cursor, direction, width) {
         }
         case 'right': {
             if (column < currentLine.length) {
-                // If cursor is immediately before a sentinel opener, jump to after closer
-                const charAt = currentLine[column];
-                if (charAt === '\uE000') {
-                    const sentinel = findSentinelAt(currentLine, column);
-                    if (sentinel) {
-                        return { line, column: sentinel.end };
-                    }
-                }
+                // If cursor is at the start of an atomic block, jump past its end
+                const block = findAtomicBlockAfter(currentLine, column, placeholders);
+                if (block)
+                    return { line, column: block.end };
                 return { line, column: column + 1 };
             }
             // Wrap to start of next line
@@ -363,27 +347,23 @@ export function moveCursor(buffer, cursor, direction, width) {
         }
         case 'up':
             if (width !== undefined) {
-                // Visual-aware movement (word-aware wrapping)
-                const { visualRow, visualCol } = getVisualPosition(column, currentLine, width);
+                const { visualRow, visualCol } = getVisualPosition(column, currentLine, width, placeholders);
                 if (visualRow > 0) {
-                    // Move to previous visual row within the same buffer line
                     const targetVisualRow = visualRow - 1;
-                    const targetVisualRowLength = getVisualRowLength(currentLine, targetVisualRow, width);
+                    const targetVisualRowLength = getVisualRowLength(currentLine, targetVisualRow, width, placeholders);
                     const targetVisualCol = Math.min(visualCol, targetVisualRowLength);
-                    return { line, column: visualToBufferColumn(targetVisualRow, targetVisualCol, currentLine, width) };
+                    return { line, column: visualToBufferColumn(targetVisualRow, targetVisualCol, currentLine, width, placeholders) };
                 }
-                // At first visual row of current line - move to last visual row of previous buffer line
                 if (line > 0) {
                     const prevLine = buffer.lines[line - 1];
-                    const prevLineVisualRows = getVisualRowCount(prevLine, width);
+                    const prevLineVisualRows = getVisualRowCount(prevLine, width, placeholders);
                     const targetVisualRow = prevLineVisualRows - 1;
-                    const targetVisualRowLength = getVisualRowLength(prevLine, targetVisualRow, width);
+                    const targetVisualRowLength = getVisualRowLength(prevLine, targetVisualRow, width, placeholders);
                     const targetVisualCol = Math.min(visualCol, targetVisualRowLength);
-                    return { line: line - 1, column: visualToBufferColumn(targetVisualRow, targetVisualCol, prevLine, width) };
+                    return { line: line - 1, column: visualToBufferColumn(targetVisualRow, targetVisualCol, prevLine, width, placeholders) };
                 }
                 return cursor;
             }
-            // Buffer-line movement (no width provided)
             if (line > 0) {
                 const targetLine = buffer.lines[line - 1];
                 return { line: line - 1, column: Math.min(column, targetLine.length) };
@@ -391,20 +371,17 @@ export function moveCursor(buffer, cursor, direction, width) {
             return cursor;
         case 'down':
             if (width !== undefined) {
-                // Visual-aware movement (word-aware wrapping)
-                const { visualRow, visualCol } = getVisualPosition(column, currentLine, width);
-                const currentLineVisualRows = getVisualRowCount(currentLine, width);
+                const { visualRow, visualCol } = getVisualPosition(column, currentLine, width, placeholders);
+                const currentLineVisualRows = getVisualRowCount(currentLine, width, placeholders);
                 if (visualRow < currentLineVisualRows - 1) {
-                    // Move to next visual row within the same buffer line
                     const targetVisualRow = visualRow + 1;
-                    const targetVisualRowLength = getVisualRowLength(currentLine, targetVisualRow, width);
+                    const targetVisualRowLength = getVisualRowLength(currentLine, targetVisualRow, width, placeholders);
                     const targetVisualCol = Math.min(visualCol, targetVisualRowLength);
-                    return { line, column: visualToBufferColumn(targetVisualRow, targetVisualCol, currentLine, width) };
+                    return { line, column: visualToBufferColumn(targetVisualRow, targetVisualCol, currentLine, width, placeholders) };
                 }
-                // At last visual row of current line - move to first visual row of next buffer line
                 if (line < lineCount - 1) {
                     const nextLine = buffer.lines[line + 1];
-                    const targetVisualRowLength = getVisualRowLength(nextLine, 0, width);
+                    const targetVisualRowLength = getVisualRowLength(nextLine, 0, width, placeholders);
                     const targetVisualCol = Math.min(visualCol, targetVisualRowLength);
                     return { line: line + 1, column: Math.min(targetVisualCol, nextLine.length) };
                 }

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

@@ -10,5 +10,17 @@ export interface TextRendererProps {
     placeholderState?: PlaceholderState;
     images?: Record<string, ImageRef>;
 }
-export declare function wrapLines(buffer: Buffer, cursor: Cursor, width: number, images?: Record<string, ImageRef>): WrapResult;
-export declare function TextRenderer({ buffer, cursor, width: propWidth, showCursor, placeholderState, images, }: TextRendererProps): React.ReactElement;
+interface VisualSegment {
+    text: string;
+    dim: boolean;
+}
+interface VisualRow {
+    segments: VisualSegment[];
+    /** Total visual length (sum of segment text lengths). */
+    visualLength: number;
+}
+export declare function wrapLines(buffer: Buffer, cursor: Cursor, width: number, placeholders?: PlaceholderState['placeholders']): WrapResult & {
+    rows: VisualRow[];
+};
+export declare function TextRenderer({ buffer, cursor, width: propWidth, showCursor, placeholderState, }: TextRendererProps): React.ReactElement;
+export {};

package/dist/components/MultilineInput/TextRenderer.js

@@ -2,11 +2,53 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { Box, Text } from 'ink';
 import { useTerminalWidth } from '../../hooks/useTerminalWidth.js';
 import { getVisualRows } from './TextBuffer.js';
-import { getDisplayLine, bufferColToDisplayCol } from './Placeholder.js';
-import { parseSentinels, getPlaceholderText } from './ImageSentinel.js';
-const PLACEHOLDER_PATTERN = /\[Pasted Image #\d+\]/g;
-export function wrapLines(buffer, cursor, width, images) {
+import { findAtomicBlocks } from './AtomicBlocks.js';
+/** Expand a [start, end) range of the raw line into styled segments. */
+function expandRange(line, start, end, blocks) {
+    const segments = [];
+    let raw = start;
+    let plainStart = start;
+    while (raw < end) {
+        const block = blocks.find((b) => b.start === raw && b.end <= end);
+        if (block) {
+            if (raw > plainStart) {
+                segments.push({ text: line.slice(plainStart, raw), dim: false });
+            }
+            segments.push({ text: block.displayText, dim: block.kind === 'sentinel' });
+            raw = block.end;
+            plainStart = raw;
+        }
+        else {
+            raw++;
+        }
+    }
+    if (plainStart < end) {
+        segments.push({ text: line.slice(plainStart, end), dim: false });
+    }
+    return segments;
+}
+/** Visual column inside a row corresponding to a raw buffer column. */
+function visualColumnForRawColumn(line, rowStart, column, blocks) {
+    let visualCol = 0;
+    let rawIndex = rowStart;
+    while (rawIndex < column) {
+        const block = blocks.find((b) => b.start === rawIndex);
+        if (block) {
+            if (column <= block.start)
+                return visualCol;
+            visualCol += block.displayWidth;
+            rawIndex = block.end;
+        }
+        else {
+            visualCol += 1;
+            rawIndex++;
+        }
+    }
+    return visualCol;
+}
+export function wrapLines(buffer, cursor, width, placeholders) {
     const visualLines = [];
+    const rowsOut = [];
     let cursorVisualRow = 0;
     let cursorVisualCol = 0;
     const safeWidth = Math.max(1, width);
@@ -14,10 +56,11 @@ export function wrapLines(buffer, cursor, width, images) {
     for (let lineIndex = 0; lineIndex < buffer.lines.length; lineIndex++) {
         const rawLine = buffer.lines[lineIndex];
         const isCursorLine = lineIndex === cursor.line;
-        const sentinels = parseSentinels(rawLine);
-        const rows = getVisualRows(rawLine, safeWidth);
+        const blocks = findAtomicBlocks(rawLine, placeholders);
+        const rows = getVisualRows(rawLine, safeWidth, placeholders);
         if (rawLine.length === 0) {
             visualLines.push('');
+            rowsOut.push({ segments: [], visualLength: 0 });
             if (isCursorLine) {
                 cursorVisualRow = visualRowIndex;
                 cursorVisualCol = 0;
@@ -28,107 +71,81 @@ export function wrapLines(buffer, cursor, width, images) {
         for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
             const row = rows[rowIndex];
             const rowEnd = row.start + row.length;
-            const chunk = expandRawSegment(rawLine, row.start, rowEnd, sentinels);
-            visualLines.push(chunk);
+            const segments = expandRange(rawLine, row.start, rowEnd, blocks);
+            const visualLength = segments.reduce((sum, s) => sum + s.text.length, 0);
+            visualLines.push(segments.map((s) => s.text).join(''));
+            rowsOut.push({ segments, visualLength });
             if (isCursorLine) {
                 if (cursor.column >= row.start && cursor.column < rowEnd) {
                     cursorVisualRow = visualRowIndex;
-                    cursorVisualCol = visualColumnForRawColumn(rawLine, row.start, cursor.column, sentinels);
+                    cursorVisualCol = visualColumnForRawColumn(rawLine, row.start, cursor.column, blocks);
                 }
                 else if (cursor.column === rowEnd && rowIndex === rows.length - 1) {
                     cursorVisualRow = visualRowIndex;
-                    cursorVisualCol = chunk.length;
+                    cursorVisualCol = visualLength;
                 }
             }
             visualRowIndex++;
         }
     }
-    return { visualLines, cursorVisualRow, cursorVisualCol };
+    return { visualLines, cursorVisualRow, cursorVisualCol, rows: rowsOut };
 }
-function expandRawSegment(line, start, end, sentinels) {
-    let expanded = '';
-    let rawIndex = start;
-    while (rawIndex < end) {
-        const sentinel = sentinels.find(s => s.start === rawIndex);
-        if (sentinel && sentinel.end <= end) {
-            expanded += getPlaceholderText(sentinel.displayNumber);
-            rawIndex = sentinel.end;
-        }
-        else {
-            expanded += line[rawIndex];
-            rawIndex++;
-        }
-    }
-    return expanded;
+function renderSegments(segments, keyPrefix) {
+    return segments.map((seg, i) => seg.dim ? (_jsx(Text, { dimColor: true, children: seg.text }, `${keyPrefix}-d-${i}`)) : (_jsx(Text, { children: seg.text }, `${keyPrefix}-t-${i}`)));
 }
-function visualColumnForRawColumn(line, start, column, sentinels) {
-    let visualCol = 0;
-    let rawIndex = start;
-    while (rawIndex < column) {
-        const sentinel = sentinels.find(s => s.start === rawIndex);
-        if (sentinel) {
-            if (column <= sentinel.start) {
-                return visualCol;
-            }
-            visualCol += getPlaceholderText(sentinel.displayNumber).length;
-            rawIndex = sentinel.end;
-        }
-        else {
-            visualCol += 1;
-            rawIndex++;
+function sliceSegments(segments, start, end) {
+    const out = [];
+    let pos = 0;
+    for (const seg of segments) {
+        const segEnd = pos + seg.text.length;
+        if (segEnd <= start) {
+            pos = segEnd;
+            continue;
         }
+        if (pos >= end)
+            break;
+        const sliceStart = Math.max(0, start - pos);
+        const sliceEnd = Math.min(seg.text.length, end - pos);
+        out.push({ text: seg.text.slice(sliceStart, sliceEnd), dim: seg.dim });
+        pos = segEnd;
     }
-    return visualCol;
+    return out;
 }
-function renderLineSegments(line) {
-    const segments = [];
-    let lastIndex = 0;
-    let match;
-    const re = new RegExp(PLACEHOLDER_PATTERN.source, 'g');
-    while ((match = re.exec(line)) !== null) {
-        if (match.index > lastIndex) {
-            segments.push(_jsx(Text, { children: line.slice(lastIndex, match.index) }, `t-${lastIndex}`));
+function charAtVisualCol(segments, col) {
+    let pos = 0;
+    for (const seg of segments) {
+        if (col < pos + seg.text.length) {
+            return { ch: seg.text[col - pos], dim: seg.dim };
         }
-        segments.push(_jsx(Text, { dimColor: true, children: match[0] }, `p-${match.index}`));
-        lastIndex = match.index + match[0].length;
-    }
-    if (lastIndex < line.length) {
-        segments.push(_jsx(Text, { children: line.slice(lastIndex) }, `t-${lastIndex}`));
+        pos += seg.text.length;
     }
-    return segments;
+    return { ch: ' ', dim: false };
 }
-function renderVisualLine(line, isCursorRow, cursorCol, showCursor) {
-    if (!isCursorRow) {
-        if (line.length === 0)
-            return _jsx(Text, { children: " " });
-        return _jsx(_Fragment, { children: renderLineSegments(line) });
-    }
-    if (!showCursor) {
-        if (line.length === 0)
+function renderVisualRow(row, isCursorRow, cursorCol, showCursor) {
+    const { segments, visualLength } = row;
+    if (!isCursorRow || !showCursor) {
+        if (visualLength === 0)
             return _jsx(Text, { children: " " });
-        return _jsx(_Fragment, { children: renderLineSegments(line) });
+        return _jsx(_Fragment, { children: renderSegments(segments, 'r') });
     }
-    if (line.length === 0) {
+    if (visualLength === 0) {
         return _jsx(Text, { inverse: true, children: " " });
     }
-    const before = line.slice(0, cursorCol);
-    const charUnderCursor = cursorCol < line.length ? line[cursorCol] : ' ';
-    const after = line.slice(cursorCol + 1);
-    return (_jsxs(_Fragment, { children: [renderLineSegments(before), _jsx(Text, { inverse: true, children: charUnderCursor }), renderLineSegments(after)] }));
+    const before = sliceSegments(segments, 0, cursorCol);
+    const under = cursorCol < visualLength
+        ? charAtVisualCol(segments, cursorCol)
+        : { ch: ' ', dim: false };
+    const after = cursorCol < visualLength
+        ? sliceSegments(segments, cursorCol + 1, visualLength)
+        : [];
+    return (_jsxs(_Fragment, { children: [renderSegments(before, 'b'), _jsx(Text, { inverse: true, dimColor: under.dim, children: under.ch }), renderSegments(after, 'a')] }));
 }
-export function TextRenderer({ buffer, cursor, width: propWidth, showCursor = true, placeholderState, images = {}, }) {
+export function TextRenderer({ buffer, cursor, width: propWidth, showCursor = true, placeholderState, }) {
     const width = useTerminalWidth(propWidth);
-    // Expand paste placeholder markers to display text before rendering
-    const hasPlaceholders = placeholderState && placeholderState.placeholders.size > 0;
-    const displayBuffer = hasPlaceholders
-        ? { lines: buffer.lines.map(line => getDisplayLine(line, placeholderState.placeholders)) }
-        : buffer;
-    const displayCursor = hasPlaceholders && cursor.line < buffer.lines.length
-        ? { line: cursor.line, column: bufferColToDisplayCol(buffer.lines[cursor.line], cursor.column, placeholderState.placeholders) }
-        : cursor;
-    const { visualLines, cursorVisualRow, cursorVisualCol } = wrapLines(displayBuffer, displayCursor, width, images);
-    return (_jsx(Box, { flexDirection: "column", children: visualLines.map((line, index) => {
+    const placeholders = placeholderState?.placeholders;
+    const { rows, cursorVisualRow, cursorVisualCol } = wrapLines(buffer, cursor, width, placeholders);
+    return (_jsx(Box, { flexDirection: "column", children: rows.map((row, index) => {
             const isCursorRow = index === cursorVisualRow;
-            return (_jsx(Box, { children: renderVisualLine(line, isCursorRow, cursorVisualCol, showCursor) }, index));
+            return (_jsx(Box, { children: renderVisualRow(row, isCursorRow, cursorVisualCol, showCursor) }, index));
         }) }));
 }

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

@@ -14,7 +14,7 @@ describe('TextRenderer with images', () => {
         it('renders normal text unchanged when no sentinels', () => {
             const buffer = { lines: ['hello'] };
             const cursor = { line: 0, column: 5 };
-            const result = wrapLines(buffer, cursor, 80, {});
+            const result = wrapLines(buffer, cursor, 80);
             expect(result.visualLines).toEqual(['hello']);
             expect(result.cursorVisualRow).toBe(0);
             expect(result.cursorVisualCol).toBe(5);
@@ -22,7 +22,7 @@ describe('TextRenderer with images', () => {
         it('renders sentinel placeholder text in visual lines', () => {
             const buffer = { lines: [sentinel1] };
             const cursor = { line: 0, column: sentinel1.length };
-            const result = wrapLines(buffer, cursor, 80, images);
+            const result = wrapLines(buffer, cursor, 80);
             expect(result.visualLines).toEqual(['[Pasted Image #1]']);
             expect(result.cursorVisualRow).toBe(0);
             expect(result.cursorVisualCol).toBe(17);
@@ -30,13 +30,13 @@ describe('TextRenderer with images', () => {
         it('renders text around sentinel placeholder', () => {
             const buffer = { lines: [`hello ${sentinel1} world`] };
             const cursor = { line: 0, column: 0 };
-            const result = wrapLines(buffer, cursor, 80, images);
+            const result = wrapLines(buffer, cursor, 80);
             expect(result.visualLines).toEqual(['hello [Pasted Image #1] world']);
         });
         it('does not split sentinel placeholder text while wrapping', () => {
             const buffer = { lines: [`aa ${sentinel1}`] };
             const cursor = { line: 0, column: `aa ${sentinel1}`.length };
-            const result = wrapLines(buffer, cursor, 10, images);
+            const result = wrapLines(buffer, cursor, 10);
             expect(result.visualLines).toEqual(['aa', '[Pasted Image #1]']);
             expect(result.cursorVisualRow).toBe(1);
             expect(result.cursorVisualCol).toBe('[Pasted Image #1]'.length);

package/dist/components/MultilineInput/useTextInput.js

@@ -1,7 +1,8 @@
 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, getVisualRows, } from './TextBuffer.js';
-import { createPlaceholderState, addPlaceholder, removePlaceholder, getValue, getValueCursorOffset, getCursorFromValueOffset, getDisplayLine, bufferColToDisplayCol, displayColToBufferCol, findPlaceholderAt, findPlaceholderAfter, findPlaceholderBefore, } from './Placeholder.js';
-import { createSentinel, parseSentinels, findSentinelAt } from './ImageSentinel.js';
+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 { findAtomicBlockBefore, findAtomicBlockAfter } from './AtomicBlocks.js';
 import { log } from '../../utils/logger.js';
 const defaultFormatPlaceholder = (id) => `[Paste text #${id}]`;
 export function useTextInput({ initialValue = '', width, historyLimit = 100, undoDebounceMs = 200, pasteThreshold, formatPastePlaceholder = defaultFormatPlaceholder, } = {}) {
@@ -80,6 +81,16 @@ export function useTextInput({ initialValue = '', width, historyLimit = 100, und
             pendingInsertBatchRef.current.startState = undefined;
         };
     }, [clearPendingInsertTimer]);
+    /** Run a buffer-mutating edit with history bookkeeping (flush batch + push undo). */
+    const applyEdit = useCallback((edit) => {
+        flushPendingInsertBatch();
+        pushToHistory(buffer, cursor);
+        const result = edit();
+        if (result) {
+            setBuffer(result.buffer);
+            setCursor(result.cursor);
+        }
+    }, [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}`);
         const normalized = char.replace(/\r\n/g, '\n').replace(/\r/g, '\n').replace(/\x00/g, '');
@@ -110,159 +121,44 @@ export function useTextInput({ initialValue = '', width, historyLimit = 100, und
         setBuffer(result.buffer);
         setCursor(result.cursor);
     }, [beginOrRefreshInsertBatch, buffer, cursor, flushPendingInsertBatch, pushToHistory, undoDebounceMs, pasteThreshold, placeholderState, formatPastePlaceholder]);
-    const deleteChar = useCallback(() => {
-        flushPendingInsertBatch();
-        pushToHistory(buffer, cursor);
-        const line = buffer.lines[cursor.line];
-        // Check if deleting a paste placeholder marker
-        const placeholder = findPlaceholderBefore(line, cursor.column);
-        if (placeholder) {
-            const newLine = line.slice(0, placeholder.start) + line.slice(placeholder.end);
-            const newLines = [...buffer.lines];
-            newLines[cursor.line] = newLine;
-            setBuffer({ lines: newLines });
-            setCursor({ line: cursor.line, column: placeholder.start });
-            setPlaceholderState(prev => removePlaceholder(prev, placeholder.id));
+    const cleanupBlockRegistry = useCallback((block) => {
+        if (!block)
             return;
+        if (block.kind === 'placeholder') {
+            setPlaceholderState((prev) => removePlaceholder(prev, block.id));
         }
-        // Check if deleting a sentinel (image)
-        if (cursor.column > 0 && line[cursor.column - 1] === '') {
-            const sentinel = findSentinelAt(line, cursor.column - 1);
-            if (sentinel && images[sentinel.id]) {
-                const newImages = { ...images };
-                delete newImages[sentinel.id];
-                setImages(newImages);
-            }
+        else if (block.kind === 'sentinel' && images[block.id]) {
+            const next = { ...images };
+            delete next[block.id];
+            setImages(next);
         }
-        const result = bufferDeleteChar(buffer, cursor);
-        setBuffer(result.buffer);
-        setCursor(result.cursor);
-    }, [buffer, cursor, flushPendingInsertBatch, pushToHistory, images, placeholderState]);
+    }, [images]);
+    const deleteChar = useCallback(() => {
+        applyEdit(() => {
+            const line = buffer.lines[cursor.line];
+            cleanupBlockRegistry(findAtomicBlockBefore(line, cursor.column, placeholderState.placeholders));
+            return bufferDeleteChar(buffer, cursor, placeholderState.placeholders);
+        });
+    }, [applyEdit, buffer, cursor, placeholderState, cleanupBlockRegistry]);
     const deleteCharForward = useCallback(() => {
-        flushPendingInsertBatch();
-        pushToHistory(buffer, cursor);
-        const line = buffer.lines[cursor.line];
-        // Check if deleting a paste placeholder marker
-        const placeholder = findPlaceholderAfter(line, cursor.column);
-        if (placeholder) {
-            const newLine = line.slice(0, placeholder.start) + line.slice(placeholder.end);
-            const newLines = [...buffer.lines];
-            newLines[cursor.line] = newLine;
-            setBuffer({ lines: newLines });
-            setPlaceholderState(prev => removePlaceholder(prev, placeholder.id));
-            return;
-        }
-        // Check if deleting a sentinel (image)
-        if (cursor.column < line.length && line[cursor.column] === '') {
-            const sentinel = findSentinelAt(line, cursor.column);
-            if (sentinel && images[sentinel.id]) {
-                const newImages = { ...images };
-                delete newImages[sentinel.id];
-                setImages(newImages);
-            }
-        }
-        const result = bufferDeleteCharForward(buffer, cursor);
-        setBuffer(result.buffer);
-        setCursor(result.cursor);
-    }, [buffer, cursor, flushPendingInsertBatch, pushToHistory, images, placeholderState]);
+        applyEdit(() => {
+            const line = buffer.lines[cursor.line];
+            cleanupBlockRegistry(findAtomicBlockAfter(line, cursor.column, placeholderState.placeholders));
+            return bufferDeleteCharForward(buffer, cursor, placeholderState.placeholders);
+        });
+    }, [applyEdit, buffer, cursor, placeholderState, cleanupBlockRegistry]);
     const newLine = useCallback(() => {
-        flushPendingInsertBatch();
-        pushToHistory(buffer, cursor);
-        const result = bufferInsertNewLine(buffer, cursor);
-        setBuffer(result.buffer);
-        setCursor(result.cursor);
-    }, [buffer, cursor, flushPendingInsertBatch, pushToHistory]);
+        applyEdit(() => bufferInsertNewLine(buffer, cursor));
+    }, [applyEdit, buffer, cursor]);
     const deleteAndNewLine = useCallback(() => {
-        flushPendingInsertBatch();
-        pushToHistory(buffer, cursor);
-        const afterDelete = bufferDeleteChar(buffer, cursor);
-        const afterNewLine = bufferInsertNewLine(afterDelete.buffer, afterDelete.cursor);
-        setBuffer(afterNewLine.buffer);
-        setCursor(afterNewLine.cursor);
-    }, [buffer, cursor, flushPendingInsertBatch, pushToHistory]);
+        applyEdit(() => {
+            const afterDelete = bufferDeleteChar(buffer, cursor, placeholderState.placeholders);
+            return bufferInsertNewLine(afterDelete.buffer, afterDelete.cursor);
+        });
+    }, [applyEdit, buffer, cursor, placeholderState]);
     const moveCursor = useCallback((direction) => {
         flushPendingInsertBatch();
-        let newCursor = bufferMoveCursor(buffer, cursor, direction, width);
-        // Handle placeholder markers: skip over them for left/right
-        if (placeholderState.placeholders.size > 0) {
-            if (direction === 'left' || direction === 'right') {
-                const marker = findPlaceholderAt(buffer.lines[newCursor.line], newCursor.column);
-                if (marker) {
-                    newCursor = {
-                        ...newCursor,
-                        column: direction === 'left' ? marker.start : marker.end,
-                    };
-                }
-            }
-            // For up/down with visual-aware navigation, use display-space conversion
-            if ((direction === 'up' || direction === 'down') && width !== undefined) {
-                const { line, column } = newCursor;
-                const currentLine = buffer.lines[line];
-                const displayLine = getDisplayLine(currentLine, placeholderState.placeholders);
-                const displayCol = bufferColToDisplayCol(currentLine, column, placeholderState.placeholders);
-                const rows = getVisualRows(displayLine, width);
-                const getVisualPos = (col, str) => {
-                    const r = getVisualRows(str, width);
-                    for (let i = 0; i < r.length; i++) {
-                        const rowEnd = r[i].start + r[i].length;
-                        if (col >= r[i].start && col < rowEnd) {
-                            return { visualRow: i, visualCol: col - r[i].start };
-                        }
-                        if (col === rowEnd && i === r.length - 1) {
-                            return { visualRow: i, visualCol: r[i].length };
-                        }
-                    }
-                    for (let i = 0; i < r.length; i++) {
-                        if (col === r[i].start + r[i].length && i < r.length - 1) {
-                            return { visualRow: i + 1, visualCol: 0 };
-                        }
-                    }
-                    const lastRow = r[r.length - 1];
-                    return { visualRow: r.length - 1, visualCol: lastRow.length };
-                };
-                const visualPos = getVisualPos(displayCol, displayLine);
-                const displayRowCount = rows.length;
-                if (direction === 'up') {
-                    if (visualPos.visualRow > 0) {
-                        const targetVisRow = visualPos.visualRow - 1;
-                        const targetVisRowLen = targetVisRow < rows.length ? rows[targetVisRow].length : 0;
-                        const targetVisCol = Math.min(visualPos.visualCol, targetVisRowLen);
-                        const targetDispCol = Math.min(rows[targetVisRow].start + targetVisCol, displayLine.length);
-                        const targetBufCol = displayColToBufferCol(currentLine, targetDispCol, placeholderState.placeholders);
-                        newCursor = { line, column: targetBufCol };
-                    }
-                    else if (line > 0) {
-                        const prevLine = buffer.lines[line - 1];
-                        const prevDisplayLine = getDisplayLine(prevLine, placeholderState.placeholders);
-                        const prevRows = getVisualRows(prevDisplayLine, width);
-                        const targetVisRow = prevRows.length - 1;
-                        const targetVisRowLen = targetVisRow >= 0 ? prevRows[targetVisRow].length : 0;
-                        const targetVisCol = Math.min(visualPos.visualCol, targetVisRowLen);
-                        const targetDispCol = targetVisRow >= 0 ? Math.min(prevRows[targetVisRow].start + targetVisCol, prevDisplayLine.length) : 0;
-                        const targetBufCol = displayColToBufferCol(prevLine, targetDispCol, placeholderState.placeholders);
-                        newCursor = { line: line - 1, column: targetBufCol };
-                    }
-                }
-                else {
-                    if (visualPos.visualRow < displayRowCount - 1) {
-                        const targetVisRow = visualPos.visualRow + 1;
-                        const targetVisRowLen = targetVisRow < rows.length ? rows[targetVisRow].length : 0;
-                        const targetVisCol = Math.min(visualPos.visualCol, targetVisRowLen);
-                        const targetDispCol = Math.min(rows[targetVisRow].start + targetVisCol, displayLine.length);
-                        const targetBufCol = displayColToBufferCol(currentLine, targetDispCol, placeholderState.placeholders);
-                        newCursor = { line, column: targetBufCol };
-                    }
-                    else if (line < buffer.lines.length - 1) {
-                        const nextLine = buffer.lines[line + 1];
-                        const nextDisplayLine = getDisplayLine(nextLine, placeholderState.placeholders);
-                        const firstRowLen = nextDisplayLine.length > 0 ? (getVisualRows(nextDisplayLine, width)[0]?.length ?? 0) : 0;
-                        const targetVisCol = Math.min(visualPos.visualCol, firstRowLen);
-                        const targetBufCol = displayColToBufferCol(nextLine, targetVisCol, placeholderState.placeholders);
-                        newCursor = { line: line + 1, column: targetBufCol };
-                    }
-                }
-            }
-        }
+        const newCursor = bufferMoveCursor(buffer, cursor, direction, width, placeholderState.placeholders);
         setCursor(newCursor);
     }, [buffer, cursor, flushPendingInsertBatch, width, placeholderState]);
     const undo = useCallback(() => {
@@ -304,42 +200,33 @@ export function useTextInput({ initialValue = '', width, historyLimit = 100, und
         setRedoStack(newRedoStack);
     }, [buffer, cursor, redoStack, placeholderState, images]);
     const setText = useCallback((text) => {
-        flushPendingInsertBatch();
-        pushToHistory(buffer, cursor);
-        const newBuffer = createBuffer(text);
-        setBuffer(newBuffer);
-        setPlaceholderState(createPlaceholderState());
-        const lines = text.split('\n');
-        setCursor({
-            line: lines.length - 1,
-            column: lines[lines.length - 1].length,
-        });
-        // Clean up orphaned images
-        const fullText = getTextContent(newBuffer);
-        const sentinels = parseSentinels(fullText);
-        const usedIds = new Set(sentinels.map(s => s.id));
-        setImages((prev) => {
-            const next = {};
-            for (const [id, ref] of Object.entries(prev)) {
-                if (usedIds.has(id)) {
-                    next[id] = ref;
+        applyEdit(() => {
+            setPlaceholderState(createPlaceholderState());
+            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 next;
+            });
+            return { buffer: newBuffer, cursor: newCursor };
         });
-    }, [buffer, cursor, flushPendingInsertBatch, pushToHistory]);
+    }, [applyEdit]);
     const insertImage = useCallback((imageRef) => {
-        flushPendingInsertBatch();
-        pushToHistory(buffer, cursor);
-        const sentinel = createSentinel(imageRef.id, imageRef.displayNumber);
-        const result = bufferInsertText(buffer, cursor, sentinel);
-        setBuffer(result.buffer);
-        setCursor(result.cursor);
-        setImages((prev) => ({ ...prev, [imageRef.id]: imageRef }));
-        if (imageRef.displayNumber >= nextDisplayNumberRef.current) {
-            nextDisplayNumberRef.current = imageRef.displayNumber + 1;
-        }
-    }, [buffer, cursor, flushPendingInsertBatch, pushToHistory]);
+        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));
+        });
+    }, [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]);

package/package.json

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