@itookit/dsht 0.3.2 → 0.3.4

package/dist/ui/dialogs/index.d.ts

@@ -63,15 +63,19 @@ export declare function SearchResultsDialog({ query, items, hasMore, width, enab
     onClose(): void;
 }): import("react").JSX.Element;
 /** Title, current selection and confirm action for a picker screen.
- * @param props - Screen title, list identity and navigation state.
+ * @param props - Screen title, list identity, navigation state, usable width and marker key.
  * @returns The picker screen.
  */
-export declare function PickerScreen({ title, identity, choices, enabled, canSelect }: {
+export declare function PickerScreen({ title, identity, choices, enabled, canSelect, width, legend }: {
     title: string;
     identity: string;
     choices: Choice[];
     enabled: boolean;
     canSelect(): boolean;
+    /** Columns the list may occupy inside the composer frame. */
+    width?: number;
+    /** Marker key shown above the list, for a rollup too compact to spell its states out. */
+    legend?: string;
 }): import("react").JSX.Element;
 /** Newest-first reasoning summaries with the preceding user prompt.
  * @param props - Loaded entries and lazy paging action.

package/dist/ui/dialogs/index.js

@@ -64,11 +64,11 @@ export function SearchResultsDialog({ query, items, hasMore, width, enabled, can
                         action: () => onOpen(string(item.sessionId)) })), { key: 'close', label: '← Back', action: onClose }], enabled: enabled, canSelect: canSelect })] });
 }
 /** Title, current selection and confirm action for a picker screen.
- * @param props - Screen title, list identity and navigation state.
+ * @param props - Screen title, list identity, navigation state, usable width and marker key.
  * @returns The picker screen.
  */
-export function PickerScreen({ title, identity, choices, enabled, canSelect }) {
-    return _jsxs(Box, { flexDirection: "column", marginY: 1, children: [_jsx(Text, { bold: true, children: title }), _jsx(Picker, { choices: choices, enabled: enabled, canSelect: canSelect }, identity)] });
+export function PickerScreen({ title, identity, choices, enabled, canSelect, width, legend }) {
+    return _jsxs(Box, { flexDirection: "column", marginY: 1, children: [_jsx(Text, { bold: true, children: title }), legend !== undefined && _jsx(Text, { dimColor: true, wrap: "truncate-end", children: legend }), _jsx(Picker, { choices: choices, enabled: enabled, canSelect: canSelect, width: width }, identity)] });
 }
 /** Newest-first reasoning summaries with the preceding user prompt.
  * @param props - Loaded entries and lazy paging action.

package/dist/ui/dialogs/picker.d.ts

@@ -1,18 +1,36 @@
-/** One selectable row; a `remove` action adds the archive/delete affordance. */
+/** One cell of a table row, optionally coloured by the state it reports. */
+export interface ChoiceCell {
+    text: string;
+    color?: string;
+    bold?: boolean;
+}
+/** One selectable row; a `remove` action adds the archive/delete affordance.
+ *
+ * A row with `title`/`cells`/`detail` is laid out as a table so the state and path columns line up
+ * across rows; a row with only `label` keeps the plain single-text form every dialog uses.
+ */
 export interface Choice {
     key: string;
     label: string;
+    /** Leading table column; the row falls back to `label` when this is absent. */
+    title?: string;
+    /** Cells after the title, each carrying its own colour. */
+    cells?: readonly ChoiceCell[];
+    /** Trailing column, right-aligned and truncated from its start so a path keeps its tail. */
+    detail?: string;
     action(): void;
     remove?(): void;
 }
 /** Keyboard-driven list with paging and optional removal.
- * @param props - Choices, availability, page size and hint text.
+ * @param props - Choices, availability, page size, hint text and the usable column count.
  * @returns The rendered list rows and its navigation hint.
  */
-export declare function Picker({ choices, enabled, canSelect, pageSize, hint }: {
+export declare function Picker({ choices, enabled, canSelect, pageSize, hint, width }: {
     choices: Choice[];
     enabled: boolean;
     canSelect(): boolean;
     pageSize?: number;
     hint?: string;
+    /** Columns this list may occupy inside its frame; defaults to the composer's inner width. */
+    width?: number;
 }): import("react").JSX.Element;

package/dist/ui/dialogs/picker.js

@@ -1,20 +1,26 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 /** Shared list selector used by every picker and dialog. */
 import { useEffect, useRef, useState } from 'react';
-import { Box, Text, useInput, useStdin } from 'ink';
+import { Box, Text, useInput, useStdin, useStdout } from 'ink';
+import stringWidth from 'string-width';
 import { safeText } from "../../transport/wire.js";
 import { useCopyMode } from "../copy-mode.js";
 import { useTheme } from "../theme/index.js";
+/** Display width of one cell list, so wide characters count as two columns. */
+function cellsWidth(cells) {
+    return (cells ?? []).reduce((sum, cell) => sum + stringWidth(cell.text), 0);
+}
 /** Keyboard-driven list with paging and optional removal.
- * @param props - Choices, availability, page size and hint text.
+ * @param props - Choices, availability, page size, hint text and the usable column count.
  * @returns The rendered list rows and its navigation hint.
  */
-export function Picker({ choices, enabled, canSelect, pageSize = 12, hint }) {
+export function Picker({ choices, enabled, canSelect, pageSize = 12, hint, width }) {
     const theme = useTheme();
     const copyMode = useCopyMode();
+    const { internal_eventEmitter } = useStdin();
+    const { stdout } = useStdout();
     const [selected, setSelected] = useState(0);
     const current = Math.min(selected, choices.length - 1);
-    const { internal_eventEmitter } = useStdin();
     const rawKey = useRef('');
     useEffect(() => {
         const remember = (raw) => { rawKey.current = raw; };
@@ -34,5 +40,31 @@ export function Picker({ choices, enabled, canSelect, pageSize = 12, hint }) {
             choices[current]?.action();
     }, { isActive: enabled && !copyMode });
     const start = Math.max(0, current - Math.max(0, pageSize - 1));
-    return _jsxs(Box, { flexDirection: "column", children: [choices.slice(start, start + pageSize).map((choice, index) => _jsxs(Text, { color: start + index === current ? theme.accent : undefined, children: [start + index === current ? '❯ ' : '  ', safeText(choice.label)] }, choice.key)), _jsx(Text, { dimColor: true, children: hint ?? `↑ ↓ select · Enter open${choices.some(choice => choice.remove) ? ' · d/Delete remove / archive' : ''} · Ctrl+C stop / exit` })] });
+    const rows = choices.slice(start, start + pageSize);
+    // The picker sits inside the composer frame, whose border and padding take six columns that Ink
+    // never gives to the content, so a row measured against the terminal width would still wrap.
+    const columns = width ?? Math.max(16, (stdout.columns ?? 80) - 6);
+    // Only a row carrying a table column is measured: an entry such as `+ Add workspace` keeps the
+    // plain full-width form and must not widen the columns the workspace rows share.
+    const tableRows = rows.filter(choice => choice.title !== undefined || choice.cells !== undefined || choice.detail !== undefined);
+    const table = tableRows.length > 0;
+    // Two columns go to the cursor and two separate the title from the cells that follow it. A trailing
+    // path column keeps a readable minimum, so the title yields to it rather than pushing it off screen;
+    // when no row has a path, the title column may use everything the cells do not need.
+    const wantsDetail = tableRows.some(choice => choice.detail !== undefined);
+    const titleWidth = 4 + Math.max(0, ...tableRows.map(choice => stringWidth(choice.title ?? choice.label)));
+    const cellWidth = Math.max(0, ...tableRows.map(choice => cellsWidth(choice.cells)));
+    const available = Math.max(0, columns - (wantsDetail ? 12 : 0));
+    const titleColumn = table ? Math.min(titleWidth, Math.max(Math.min(available, 8), available - cellWidth)) : 0;
+    const cellColumn = table ? Math.min(cellWidth, Math.max(0, available - titleColumn)) : 0;
+    const detailColumn = table ? Math.max(0, columns - titleColumn - cellColumn) : 0;
+    const detailShown = detailColumn >= 8 && wantsDetail;
+    return _jsxs(Box, { flexDirection: "column", children: [rows.map((choice, index) => {
+                const isCurrent = start + index === current;
+                const cursor = isCurrent ? '❯ ' : '  ';
+                const isTableRow = choice.title !== undefined || choice.cells !== undefined || choice.detail !== undefined;
+                if (!table || !isTableRow)
+                    return _jsxs(Text, { color: isCurrent ? theme.accent : undefined, wrap: "truncate-end", children: [cursor, safeText(choice.label)] }, choice.key);
+                return _jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { width: titleColumn, flexShrink: 0, children: _jsxs(Text, { color: isCurrent ? theme.accent : undefined, wrap: "truncate-end", children: [cursor, safeText(choice.title ?? choice.label)] }) }), _jsx(Box, { width: cellColumn, flexShrink: 0, children: _jsx(Text, { wrap: "truncate-end", children: choice.cells?.map((cell, position) => _jsx(Text, { color: cell.color, bold: cell.bold, children: safeText(cell.text) }, position)) }) }), detailShown && choice.detail !== undefined && _jsx(Box, { width: detailColumn, flexShrink: 0, justifyContent: "flex-end", children: _jsx(Text, { dimColor: true, wrap: "truncate-start", children: safeText(choice.detail) }) })] }, choice.key);
+            }), _jsx(Text, { dimColor: true, children: hint ?? `↑ ↓ select · Enter open${choices.some(choice => choice.remove) ? ' · d/Delete remove / archive' : ''} · Ctrl+C stop / exit` })] });
 }

package/dist/ui/input/input.d.ts

@@ -1,3 +1,4 @@
+import { type FoldRegion } from './viewport.ts';
 import { type Key } from 'ink';
 /** Editor offsets are UTF-16 positions at grapheme boundaries; killed text stays local. */
 export interface EditState {
@@ -9,11 +10,17 @@ export interface EditState {
  * @param state - Current text, cursor, and most recently killed text.
  * @param input - Decoded text or control-key letter.
  * @param key - Ink's VT/terminal key flags.
+ * @param regions - Source ranges rendered as a single folded row.
  * @returns The next editor state, without sending a message or exiting.
  */
-export declare function editInput(state: EditState, input: string, key: Partial<Key>): EditState;
-/** Controlled composer with local cursor and kill buffer; Enter submission belongs to the caller. */
-export declare function TextInput({ value, onChange, onCursorChange, onSubmit, focus, placeholder, reservedKeys }: {
+export declare function editInput(state: EditState, input: string, key: Partial<Key>, regions?: readonly FoldRegion[]): EditState;
+/** Controlled composer with local cursor, kill buffer and a cursor-following row window.
+ *
+ * Enter submission belongs to the caller. A draft taller than `maxRows` scrolls inside the composer
+ * so the conversation above it keeps its space; a multiline block taller than the window folds to a
+ * single summary row whose text is still sent in full.
+ */
+export declare function TextInput({ value, onChange, onCursorChange, onSubmit, focus, placeholder, reservedKeys, width, maxRows, prompt, promptColor }: {
     value: string;
     onChange(value: string): void;
     onCursorChange(cursor: number): void;
@@ -22,4 +29,12 @@ export declare function TextInput({ value, onChange, onCursorChange, onSubmit, f
     placeholder: string;
     /** Keys owned by the surrounding picker while the composer is empty. */
     reservedKeys?: readonly string[];
+    /** Cells available to the draft, excluding the prompt and the composer border. */
+    width: number;
+    /** Content rows shown before the composer scrolls. */
+    maxRows: number;
+    /** Prompt drawn on the first visible row. */
+    prompt?: string;
+    /** Prompt colour, which dims while an answer dialog parks the draft. */
+    promptColor?: string;
 }): import("react").JSX.Element;

package/dist/ui/input/input.js

@@ -1,31 +1,46 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/** Single-line terminal editing with explicit cursor ownership and Unicode grapheme movement. */
-import { useEffect, useRef, useState } from 'react';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/** Terminal editing with explicit cursor ownership, Unicode movement and a bounded multi-row window. */
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { isMouseReport } from "./mouse.js";
-import { Text, useInput, useStdin } from 'ink';
+import { cursorPlace, foldLabel, planDraft, windowRows } from "./viewport.js";
+import { Box, Text, useInput, useStdin } from 'ink';
 const segments = new Intl.Segmenter(undefined, { granularity: 'grapheme' });
+/** A cursor position strictly inside a folded block is pulled to the nearer edge, so movement
+ * never parks inside a block that renders as one summary row. */
+function snap(position, regions, direction) {
+    for (const region of regions) {
+        if (position > region.start && position < region.end)
+            return direction < 0 ? region.start : region.end;
+    }
+    return position;
+}
 /** Apply one Ink-decoded terminal key; application commands remain owned by the parent.
  * @param state - Current text, cursor, and most recently killed text.
  * @param input - Decoded text or control-key letter.
  * @param key - Ink's VT/terminal key flags.
+ * @param regions - Source ranges rendered as a single folded row.
  * @returns The next editor state, without sending a message or exiting.
  */
-export function editInput(state, input, key) {
+export function editInput(state, input, key, regions = []) {
     const { text, cursor, killed } = state;
     if (key.eventType === 'release' || key.return || key.tab || key.escape || key.upArrow || key.downArrow || key.pageUp || key.pageDown)
         return state;
-    const previous = () => segments.segment(text).containing(cursor - 1)?.index ?? 0;
+    const previous = () => snap(segments.segment(text).containing(cursor - 1)?.index ?? 0, regions, -1);
     const next = () => {
         const part = segments.segment(text).containing(cursor);
-        return part ? part.index + part.segment.length : text.length;
+        return snap(part ? part.index + part.segment.length : text.length, regions, 1);
     };
-    const wordStart = () => text.slice(0, cursor).replace(/\s+$/u, '').replace(/\S+$/u, '').length;
-    const wordEnd = () => cursor + (/^\s*\S+/u.exec(text.slice(cursor))?.[0].length ?? text.length - cursor);
+    const wordStart = () => snap(text.slice(0, cursor).replace(/\s+$/u, '').replace(/\S+$/u, '').length, regions, -1);
+    const wordEnd = () => snap(cursor + (/^\s*\S+/u.exec(text.slice(cursor))?.[0].length ?? text.length - cursor), regions, 1);
     const move = (position) => position === cursor ? state : ({ ...state, cursor: position });
     const remove = (start, end, kill = false) => ({
         text: text.slice(0, start) + text.slice(end), cursor: start,
         killed: kill && start !== end ? text.slice(start, end) : killed,
     });
+    // A folded block is one object: crossing it is one step, and backspace or delete at its edge
+    // removes the whole block rather than one character of hidden text.
+    const trailingFold = regions.find(region => region.end === cursor);
+    const leadingFold = regions.find(region => region.start === cursor);
     if (key.home || key.ctrl && input === 'a')
         return move(0);
     if (key.end || key.ctrl && input === 'e')
@@ -47,20 +62,26 @@ export function editInput(state, input, key) {
     if (key.meta && input === 'd')
         return remove(cursor, wordEnd(), true);
     if (key.backspace || key.ctrl && input === 'h')
-        return remove(previous(), cursor);
+        return trailingFold ? remove(trailingFold.start, trailingFold.end) : remove(previous(), cursor);
     if (key.delete || key.ctrl && input === 'd')
-        return remove(cursor, next());
+        return leadingFold ? remove(leadingFold.start, leadingFold.end) : remove(cursor, next());
     if (key.ctrl && input === 'y')
         return { ...state, text: text.slice(0, cursor) + killed + text.slice(cursor), cursor: cursor + killed.length };
     if (key.ctrl || key.meta || key.super || key.hyper)
         return state;
-    const inserted = input.replace(/[\r\n\t]+/g, ' ').replace(/[\u0000-\u001f\u007f-\u009f]/g, '');
+    // A paste keeps its line breaks and tabs; the display row is where they are turned into layout.
+    const inserted = input.replace(/\r\n?/g, '\n').replace(/[\u0000-\u0008\u000b\u000c\u000e-\u001f\u007f-\u009f]/g, '');
     if (!inserted)
         return state;
     return { ...state, text: text.slice(0, cursor) + inserted + text.slice(cursor), cursor: cursor + inserted.length };
 }
-/** Controlled composer with local cursor and kill buffer; Enter submission belongs to the caller. */
-export function TextInput({ value, onChange, onCursorChange, onSubmit, focus, placeholder, reservedKeys }) {
+/** Controlled composer with local cursor, kill buffer and a cursor-following row window.
+ *
+ * Enter submission belongs to the caller. A draft taller than `maxRows` scrolls inside the composer
+ * so the conversation above it keeps its space; a multiline block taller than the window folds to a
+ * single summary row whose text is still sent in full.
+ */
+export function TextInput({ value, onChange, onCursorChange, onSubmit, focus, placeholder, reservedKeys, width, maxRows, prompt = '❯ ', promptColor }) {
     const { internal_eventEmitter } = useStdin();
     const rawKey = useRef('');
     useEffect(() => {
@@ -74,6 +95,12 @@ export function TextInput({ value, onChange, onCursorChange, onSubmit, focus, pl
     const [, redraw] = useState(0);
     if (current.current.text !== value)
         current.current = { ...current.current, text: value, cursor: value.length };
+    const { text, cursor } = current.current;
+    const plan = useMemo(() => planDraft(text, width, maxRows), [text, width, maxRows]);
+    // Input callbacks run before Ink refreshes the controlled field, so the handler reads the
+    // freshest regions through a ref instead of the closure it was created with.
+    const regions = useRef(plan.regions);
+    regions.current = plan.regions;
     useInput((input, key) => {
         if (key.eventType === 'release' || isMouseReport(rawKey.current))
             return;
@@ -86,7 +113,7 @@ export function TextInput({ value, onChange, onCursorChange, onSubmit, focus, pl
         const before = current.current;
         const backspace = rawKey.current === '\x7f' || rawKey.current === '\x1b\x7f'
             || /^\x1b\[127(?:;[\d:]+)?u$/.test(rawKey.current);
-        const after = editInput(before, input, key.delete && backspace ? { ...key, delete: false, backspace: true } : key);
+        const after = editInput(before, input, key.delete && backspace ? { ...key, delete: false, backspace: true } : key, regions.current);
         current.current = after;
         if (after.text !== before.text)
             onChange(after.text);
@@ -95,11 +122,23 @@ export function TextInput({ value, onChange, onCursorChange, onSubmit, focus, pl
         if (after.text === before.text && after.cursor !== before.cursor)
             redraw(value => value + 1);
     }, { isActive: focus });
-    const { text, cursor } = current.current;
-    const character = segments.segment(text).containing(cursor)?.segment ?? ' ';
-    if (!text && !focus)
-        return _jsx(Text, { dimColor: true, children: placeholder });
-    if (!text)
-        return _jsxs(Text, { children: [_jsx(Text, { inverse: true, children: placeholder[0] ?? ' ' }), _jsx(Text, { dimColor: true, children: placeholder.slice(1) })] });
-    return _jsxs(Text, { children: [text.slice(0, cursor), _jsx(Text, { inverse: focus, children: character }), text.slice(cursor + character.length)] });
+    if (!text) {
+        if (!focus)
+            return _jsxs(Text, { dimColor: true, children: [prompt, placeholder] });
+        return _jsxs(Text, { children: [_jsx(Text, { color: promptColor, children: prompt }), _jsx(Text, { inverse: true, children: placeholder[0] ?? ' ' }), _jsx(Text, { dimColor: true, children: placeholder.slice(1) })] });
+    }
+    const place = cursorPlace(plan.rows, cursor);
+    const window = windowRows(plan.rows.length, place.row, maxRows);
+    return _jsx(Box, { flexDirection: "column", flexShrink: 0, children: plan.rows.slice(window.start, window.end).map((row, offset) => {
+            const index = window.start + offset;
+            const lead = index === window.start ? prompt : ' '.repeat(prompt.length);
+            const key = `${row.start}:${index}`;
+            if (row.fold)
+                return _jsxs(Text, { dimColor: true, children: [_jsx(Text, { color: promptColor, children: lead }), foldLabel(row.fold)] }, key);
+            if (index !== place.row)
+                return _jsxs(Text, { children: [_jsx(Text, { color: promptColor, children: lead }), row.text] }, key);
+            const at = Math.min(place.index, row.text.length);
+            const end = row.map[cursor - row.start + 1] ?? row.text.length;
+            return _jsxs(Text, { children: [_jsx(Text, { color: promptColor, children: lead }), row.text.slice(0, at), _jsx(Text, { inverse: focus, children: row.text.slice(at, end) || ' ' }), row.text.slice(end)] }, key);
+        }) });
 }

package/dist/ui/input/viewport.d.ts

@@ -0,0 +1,96 @@
+/** Cells a tab advances to; every stop is a multiple of this width. */
+export declare const TAB_WIDTH = 4;
+/** Source range of one block that renders as a summary row instead of its text. */
+export interface FoldRegion {
+    start: number;
+    end: number;
+}
+/** One rendered draft row and the source range it came from. */
+export interface DraftRow {
+    /** Display text; tabs are already expanded to spaces. */
+    text: string;
+    /** First source offset covered by this row. */
+    start: number;
+    /** One past the last source offset covered by this row. */
+    end: number;
+    /** `map[k]` is the index in `text` of source offset `start + k`. */
+    map: number[];
+    /** Present when this row summarizes a folded block rather than showing its text. */
+    fold?: {
+        from: number;
+        to: number;
+        lines: number;
+        bytes: number;
+    };
+}
+/** Where the cursor lands among the rendered rows. */
+export interface CursorPlace {
+    row: number;
+    index: number;
+    column: number;
+}
+/** Rendered rows plus the blocks the editor must treat as single objects. */
+export interface DraftPlan {
+    rows: DraftRow[];
+    regions: FoldRegion[];
+}
+/** Spaces a tab adds to reach the next stop after the given column.
+ * @param column - Cells already used on the row.
+ * @param width - Tab stop width in cells.
+ * @returns Cell count for one tab, always at least one.
+ */
+export declare function tabStop(column: number, width?: number): number;
+/** Byte length of draft text, used for the folded-block size label.
+ * @param text - Source text.
+ * @returns UTF-8 byte length.
+ */
+export declare function byteLength(text: string): number;
+/** Compact size label for a folded block.
+ * @param bytes - UTF-8 byte length.
+ * @returns Bytes, kilobytes or megabytes with one decimal.
+ */
+export declare function formatBytes(bytes: number): string;
+/** Wrap a draft into display rows, expanding tabs and hard-breaking long segments.
+ *
+ * A newline belongs to the end of the row it closes, so a cursor parked on it renders at that row's
+ * end and a cursor just after it renders at the next row's start.
+ * @param text - Source text, including newlines and tabs.
+ * @param width - Row width in cells.
+ * @param tabWidth - Tab stop width in cells.
+ * @returns One entry per rendered row, in order.
+ */
+export declare function wrapDraft(text: string, width: number, tabWidth?: number): DraftRow[];
+/** Locate the cursor among rendered rows.
+ * @param rows - Rendered rows from `wrapDraft`.
+ * @param cursor - Source offset of the cursor.
+ * @returns Row index, display index within that row, and its cell column.
+ */
+export declare function cursorPlace(rows: readonly DraftRow[], cursor: number): CursorPlace;
+/** Choose the visible slice of rows that keeps the cursor on screen.
+ * @param count - Total rendered row count.
+ * @param cursorRow - Row index the cursor occupies.
+ * @param maxRows - Content rows the composer may show.
+ * @returns Half-open row range to render.
+ */
+export declare function windowRows(count: number, cursorRow: number, maxRows: number): {
+    start: number;
+    end: number;
+};
+/** Wrap and fold a draft for display.
+ *
+ * A block is folded only when the draft has interior lines to hide and its whole wrapped height
+ * exceeds the composer window. The decision reads the unfolded height, so folding can never feed
+ * back into itself and oscillate. When the logical line count alone already exceeds the window the
+ * interior is never wrapped, which keeps a very large paste cheap to re-plan on every keystroke.
+ * @param text - Source text, including newlines and tabs.
+ * @param width - Row width in cells.
+ * @param maxRows - Content rows the composer may show.
+ * @param tabWidth - Tab stop width in cells.
+ * @returns Rows to render and the source range of every folded block.
+ */
+export declare function planDraft(text: string, width: number, maxRows: number, tabWidth?: number): DraftPlan;
+/** Display label for a folded block.
+ * @param fold - Folded-block facts.
+ * @returns A single-line summary such as `[84 lines · 6.1 KB]`.
+ */
+export declare function foldLabel(fold: NonNullable<DraftRow['fold']>): string;

package/dist/ui/input/viewport.js

@@ -0,0 +1,173 @@
+/** Multi-row composer geometry: wrapping, tab stops, block folding and the cursor window.
+ *
+ * The draft keeps exactly the bytes the user typed or pasted; nothing here mutates it. Display rows
+ * and folded blocks are derived on every render, so an edit never has to rebase a stored span.
+ */
+import stringWidth from 'string-width';
+/** Cells a tab advances to; every stop is a multiple of this width. */
+export const TAB_WIDTH = 4;
+const segments = new Intl.Segmenter(undefined, { granularity: 'grapheme' });
+/** Spaces a tab adds to reach the next stop after the given column.
+ * @param column - Cells already used on the row.
+ * @param width - Tab stop width in cells.
+ * @returns Cell count for one tab, always at least one.
+ */
+export function tabStop(column, width = TAB_WIDTH) { return width - (column % width); }
+/** Byte length of draft text, used for the folded-block size label.
+ * @param text - Source text.
+ * @returns UTF-8 byte length.
+ */
+export function byteLength(text) { return Buffer.byteLength(text, 'utf8'); }
+/** Compact size label for a folded block.
+ * @param bytes - UTF-8 byte length.
+ * @returns Bytes, kilobytes or megabytes with one decimal.
+ */
+export function formatBytes(bytes) {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    return bytes < 1024 * 1024 ? `${(bytes / 1024).toFixed(1)} KB` : `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+/** Offsets where each newline-separated line begins.
+ * @param text - Source text.
+ * @returns One offset per logical line, always at least the offset zero.
+ */
+function lineStarts(text) {
+    const starts = [0];
+    for (let index = 0; index < text.length;) {
+        const next = text.indexOf('\n', index);
+        if (next === -1)
+            break;
+        starts.push(next + 1);
+        index = next + 1;
+    }
+    return starts;
+}
+/** Wrap a draft into display rows, expanding tabs and hard-breaking long segments.
+ *
+ * A newline belongs to the end of the row it closes, so a cursor parked on it renders at that row's
+ * end and a cursor just after it renders at the next row's start.
+ * @param text - Source text, including newlines and tabs.
+ * @param width - Row width in cells.
+ * @param tabWidth - Tab stop width in cells.
+ * @returns One entry per rendered row, in order.
+ */
+export function wrapDraft(text, width, tabWidth = TAB_WIDTH) {
+    const limit = Math.max(1, Math.floor(width));
+    const rows = [];
+    let row = { text: '', start: 0, end: 0, map: [0] };
+    let column = 0;
+    let offset = 0;
+    const close = (end) => { row.end = end; rows.push(row); };
+    const open = (start) => { row = { text: '', start, end: start, map: [0] }; column = 0; };
+    for (const { segment } of segments.segment(text)) {
+        const length = segment.length;
+        if (segment === '\n') {
+            row.map.push(row.text.length);
+            close(offset + length);
+            open(offset + length);
+            offset += length;
+            continue;
+        }
+        const display = segment === '\t' ? ' '.repeat(tabStop(column, tabWidth)) : segment;
+        const cells = segment === '\t' ? display.length : stringWidth(segment);
+        if (column > 0 && column + cells > limit) {
+            close(offset);
+            open(offset);
+        }
+        row.text += display;
+        column += cells;
+        offset += length;
+        row.map.push(row.text.length);
+    }
+    close(offset);
+    return rows;
+}
+/** Locate the cursor among rendered rows.
+ * @param rows - Rendered rows from `wrapDraft`.
+ * @param cursor - Source offset of the cursor.
+ * @returns Row index, display index within that row, and its cell column.
+ */
+export function cursorPlace(rows, cursor) {
+    for (let row = 0; row < rows.length; row++) {
+        const current = rows[row];
+        if (cursor >= current.start && cursor < current.end) {
+            const index = current.map[cursor - current.start] ?? current.text.length;
+            return { row, index, column: stringWidth(current.text.slice(0, index)) };
+        }
+    }
+    const row = rows.length - 1;
+    const last = rows[row];
+    return { row, index: last.text.length, column: stringWidth(last.text) };
+}
+/** Choose the visible slice of rows that keeps the cursor on screen.
+ * @param count - Total rendered row count.
+ * @param cursorRow - Row index the cursor occupies.
+ * @param maxRows - Content rows the composer may show.
+ * @returns Half-open row range to render.
+ */
+export function windowRows(count, cursorRow, maxRows) {
+    const size = Math.max(1, Math.floor(maxRows));
+    if (count <= size)
+        return { start: 0, end: count };
+    const start = Math.min(Math.max(0, cursorRow - size + 1), count - size);
+    return { start, end: start + size };
+}
+/** Shift a wrapped slice back to the source offsets it was cut from.
+ * @param rows - Rows wrapped from a slice.
+ * @param base - Source offset the slice started at.
+ * @returns The same rows with absolute offsets.
+ */
+function rebase(rows, base) {
+    return base === 0 ? rows : rows.map(row => ({ ...row, start: row.start + base, end: row.end + base }));
+}
+/** Summary row for a folded interior.
+ * @param text - Whole draft.
+ * @param starts - Logical line starts.
+ * @param from - First folded source offset.
+ * @param to - One past the last folded source offset.
+ * @returns The row that replaces the interior.
+ */
+function summary(text, starts, from, to) {
+    return { text: '', start: from, end: to, map: [],
+        fold: { from, to, lines: starts.length - 2, bytes: byteLength(text.slice(from, to)) } };
+}
+/** Wrap and fold a draft for display.
+ *
+ * A block is folded only when the draft has interior lines to hide and its whole wrapped height
+ * exceeds the composer window. The decision reads the unfolded height, so folding can never feed
+ * back into itself and oscillate. When the logical line count alone already exceeds the window the
+ * interior is never wrapped, which keeps a very large paste cheap to re-plan on every keystroke.
+ * @param text - Source text, including newlines and tabs.
+ * @param width - Row width in cells.
+ * @param maxRows - Content rows the composer may show.
+ * @param tabWidth - Tab stop width in cells.
+ * @returns Rows to render and the source range of every folded block.
+ */
+export function planDraft(text, width, maxRows, tabWidth = TAB_WIDTH) {
+    const starts = lineStarts(text);
+    const size = Math.max(1, Math.floor(maxRows));
+    if (starts.length >= 3 && starts.length > size) {
+        const from = starts[1];
+        const to = starts[starts.length - 1];
+        // The head slice ends with the newline that closes its last line, so the empty row that
+        // newline opens belongs to the block being folded, not to the head.
+        const head = wrapDraft(text.slice(0, from), width, tabWidth);
+        head.pop();
+        return { rows: [...head, summary(text, starts, from, to),
+                ...rebase(wrapDraft(text.slice(to), width, tabWidth), to)], regions: [{ start: from, end: to }] };
+    }
+    const rows = wrapDraft(text, width, tabWidth);
+    if (starts.length < 3 || rows.length <= size)
+        return { rows, regions: [] };
+    const from = starts[1];
+    const to = starts[starts.length - 1];
+    return { rows: [...rows.filter(row => row.start < from), summary(text, starts, from, to), ...rows.filter(row => row.start >= to)],
+        regions: [{ start: from, end: to }] };
+}
+/** Display label for a folded block.
+ * @param fold - Folded-block facts.
+ * @returns A single-line summary such as `[84 lines · 6.1 KB]`.
+ */
+export function foldLabel(fold) {
+    return `[${fold.lines} lines · ${formatBytes(fold.bytes)}]`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itookit/dsht",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "type": "module",
   "description": "Remote-first TUI for DeepSeek Harness with SSH-friendly mobile access and request-level cost tracking",
   "engines": {
@@ -25,8 +25,8 @@
     "access": "public"
   },
   "scripts": {
-    "start": "tsx src/cli/index.tsx",
-    "start:profile": "NODE_OPTIONS=\"--expose-gc --heapsnapshot-signal=SIGUSR2\" tsx src/cli/index.tsx",
+    "start": "tsx src/cli/index.ts",
+    "start:profile": "node -e \"require('node:fs').mkdirSync('.diagnostics',{recursive:true})\" && NODE_OPTIONS=\"--expose-gc --heapsnapshot-signal=SIGUSR2 --diagnostic-dir=.diagnostics\" tsx src/cli/index.ts",
     "build": "node -e \"require('node:fs').rmSync('dist',{recursive:true,force:true})\" && tsc",
     "typecheck": "tsc --noEmit && tsc -p tsconfig.tests.json",
     "test": "tsx --test tests/*/*.test.ts tests/*/*.test.tsx",