blots-editor 0.0.9 → 0.0.11

package/dist/core/document/document.d.ts

@@ -17,6 +17,8 @@ export declare class Document {
     private _lines;
     private _cursor;
     private _scrollTop;
+    private _wrapWidth;
+    private _viewScrollTop;
     readonly indentWidth: number;
     constructor(text: string, options?: DocumentOptions);
     get lineCount(): number;
@@ -25,6 +27,35 @@ export declare class Document {
     getLine(i: number): string;
     get cursor(): CursorState;
     get scrollTop(): number;
+    /** Soft-wrap width in terminal cells; `Infinity` disables wrapping. */
+    get wrapWidth(): number;
+    /** Set the soft-wrap width (clamped to at least 1 cell). */
+    setWrapWidth(width: number): void;
+    /** The soft-wrap segments of one logical line (an empty line is one empty segment). */
+    private lineSegments;
+    /** Total number of visual (soft-wrapped) lines across the document. */
+    get visualLineCount(): number;
+    /**
+     * Map a global visual line to its logical line and the segment's logical
+     * span. `first` marks the segment that starts at the logical line start
+     * (the one that carries the line number).
+     */
+    visualLineAt(vline: number): {
+        line: number;
+        start: number;
+        end: number;
+        first: boolean;
+    } | null;
+    /** Global visual line the cursor sits on. */
+    get cursorVisualLine(): number;
+    /** Visual offset of the cursor within its current soft-wrap segment. */
+    get cursorSegmentVisual(): number;
+    /**
+     * The target logical column for a vertical move onto `segment` (in any
+     * line): keep the cursor's offset within its current segment, clamping to
+     * the segment end only when the target segment is narrower.
+     */
+    private moveToSegment;
     /** Gutter width = decimal digit count of the last line number (at least 1). */
     getLineNumberWidth(): number;
     setLine(i: number, text: string): void;
@@ -40,6 +71,10 @@ export declare class Document {
      * (see {@link TextLine.logicalAt}).
      */
     setCursorAtVisual(line: number, visual: number): void;
+    /** Terminal column on a logical line → nearest logical column. */
+    logicalAtVisual(line: number, visual: number): number;
+    /** Logical column → terminal column on a logical line. */
+    visualAtLogical(line: number, logical: number): number;
     moveLeft(): void;
     moveRight(): void;
     /** Vertical movement aligns by visual column, so wide-character lines do not drift. */
@@ -53,13 +88,21 @@ export declare class Document {
     moveWordForward(): void;
     /** A word is a run of non-whitespace; jump back to the current/previous word start. */
     moveWordBackward(): void;
-    /** Page up: move the cursor up by `height - 1` lines (one line of overlap), keeping the visual column. */
+    /** Page up: move the cursor up by `height - 1` visual lines (one line of overlap), keeping the visual column. */
     movePageUp(height: number): void;
     movePageDown(height: number): void;
     /**
-     * Scroll the viewport so the cursor stays visible: if the cursor is above
-     * the viewport, scroll to its line; if below, scroll so it becomes the
-     * last visible line. Returns the new scrollTop.
+     * Scroll the viewport by `delta` visual lines without moving the cursor,
+     * clamped to the document range. Locks the view in place (Ctrl+wheel
+     * browsing) until the cursor moves.
+     */
+    scrollView(delta: number, height: number): number;
+    /**
+     * Scroll the viewport so the cursor stays visible, in visual-line terms:
+     * if the cursor's visual line is above the viewport, scroll to it; if
+     * below, scroll so it becomes the last visible line. Returns the new
+     * scrollTop (in visual lines). While the view is manually locked
+     * (`scrollView`), the position is kept instead and only clamped.
      */
     updateScroll(height: number): number;
 }

package/dist/core/document/document.js

@@ -14,6 +14,10 @@ export class Document {
     _lines;
     _cursor;
     _scrollTop = 0;
+    _wrapWidth = Infinity;
+    // Non-null while the user is scrolling the view manually (Ctrl+wheel):
+    // updateScroll keeps this position instead of following the cursor.
+    _viewScrollTop = null;
     indentWidth;
     constructor(text, options = {}) {
         this._lines = text.split(/\r?\n/).map((t) => new TextLine(t));
@@ -41,6 +45,106 @@ export class Document {
     get scrollTop() {
         return this._scrollTop;
     }
+    /** Soft-wrap width in terminal cells; `Infinity` disables wrapping. */
+    get wrapWidth() {
+        return this._wrapWidth;
+    }
+    /** Set the soft-wrap width (clamped to at least 1 cell). */
+    setWrapWidth(width) {
+        this._wrapWidth = Math.max(1, width);
+    }
+    /** The soft-wrap segments of one logical line (an empty line is one empty segment). */
+    lineSegments(line) {
+        const tl = this._lines[line];
+        if (tl.text.length === 0) {
+            return [{ start: 0, end: 0 }];
+        }
+        const segs = [];
+        let segVisual = 0;
+        let segStart = 0;
+        while (segStart < tl.text.length) {
+            const seg = tl.segmentFrom(segVisual, this._wrapWidth);
+            segs.push({ start: segStart, end: seg.endLogical });
+            if (seg.text === "") {
+                break;
+            }
+            segStart = seg.endLogical;
+            segVisual = seg.endVisual;
+        }
+        return segs;
+    }
+    /** Total number of visual (soft-wrapped) lines across the document. */
+    get visualLineCount() {
+        let total = 0;
+        for (let i = 0; i < this._lines.length; i++) {
+            total += this.lineSegments(i).length;
+        }
+        return total;
+    }
+    /**
+     * Map a global visual line to its logical line and the segment's logical
+     * span. `first` marks the segment that starts at the logical line start
+     * (the one that carries the line number).
+     */
+    visualLineAt(vline) {
+        if (vline < 0) {
+            return null;
+        }
+        let remaining = vline;
+        for (let line = 0; line < this._lines.length; line++) {
+            const segs = this.lineSegments(line);
+            if (remaining < segs.length) {
+                return {
+                    line,
+                    start: segs[remaining].start,
+                    end: segs[remaining].end,
+                    first: remaining === 0,
+                };
+            }
+            remaining -= segs.length;
+        }
+        return null;
+    }
+    /** Global visual line the cursor sits on. */
+    get cursorVisualLine() {
+        const { line, logical } = this._cursor;
+        let v = 0;
+        for (let i = 0; i < line; i++) {
+            v += this.lineSegments(i).length;
+        }
+        const segs = this.lineSegments(line);
+        let idx = 0;
+        // A cursor exactly on a segment boundary belongs to the segment
+        // starting there, so visual lines read like real lines: the boundary
+        // column is the first cell of the next visual line.
+        while (idx < segs.length - 1 && logical >= segs[idx + 1].start) {
+            idx++;
+        }
+        return v + idx;
+    }
+    /** Visual offset of the cursor within its current soft-wrap segment. */
+    get cursorSegmentVisual() {
+        const tl = this._lines[this._cursor.line];
+        const segs = this.lineSegments(this._cursor.line);
+        const { logical } = this._cursor;
+        let idx = segs.length - 1;
+        while (idx > 0 && logical < segs[idx].start) {
+            idx--;
+        }
+        return tl.visualAt(logical) - tl.visualAt(segs[idx].start);
+    }
+    /**
+     * The target logical column for a vertical move onto `segment` (in any
+     * line): keep the cursor's offset within its current segment, clamping to
+     * the segment end only when the target segment is narrower.
+     */
+    moveToSegment(segment) {
+        const offset = this.cursorSegmentVisual;
+        const targetVisual = this.visualAtLogical(segment.line, segment.start) + offset;
+        let col = this.logicalAtVisual(segment.line, targetVisual);
+        col = Math.min(Math.max(col, segment.start), segment.end);
+        this.setCursor(segment.line, col);
+    }
     /** Gutter width = decimal digit count of the last line number (at least 1). */
     getLineNumberWidth() {
         return Math.max(String(this._lines.length - 1).length, 1);
@@ -59,8 +163,22 @@ export class Document {
     /** Set the cursor, clamping out-of-range values (line to `[0, lineCount-1]`, column to end of line). */
     setCursor(line, logical) {
         const l = Math.max(0, Math.min(line, this._lines.length - 1));
-        const len = this._lines[l].text.length;
-        this._cursor = { line: l, logical: Math.max(0, Math.min(logical, len)) };
+        const text = this._lines[l].text;
+        let col = Math.max(0, Math.min(logical, text.length));
+        // The cursor must never sit between the halves of a surrogate pair —
+        // typing there would split the emoji — so snap it to the pair start.
+        if (col > 0 &&
+            col < text.length &&
+            text.charCodeAt(col) >= 0xdc00 &&
+            text.charCodeAt(col) <= 0xdfff &&
+            text.charCodeAt(col - 1) >= 0xd800 &&
+            text.charCodeAt(col - 1) <= 0xdbff) {
+            col--;
+        }
+        this._cursor = { line: l, logical: col };
+        // Any cursor movement releases the manual view-scroll lock so the
+        // viewport follows the cursor again.
+        this._viewScrollTop = null;
     }
     /**
      * Set the cursor by terminal column instead of code unit index — the
@@ -71,32 +189,70 @@ export class Document {
         const l = Math.max(0, Math.min(line, this._lines.length - 1));
         this.setCursor(l, this._lines[l].logicalAt(visual));
     }
+    /** Terminal column on a logical line → nearest logical column. */
+    logicalAtVisual(line, visual) {
+        return this._lines[line].logicalAt(visual);
+    }
+    /** Logical column → terminal column on a logical line. */
+    visualAtLogical(line, logical) {
+        return this._lines[line].visualAt(logical);
+    }
     moveLeft() {
         const { line, logical } = this._cursor;
         if (logical > 0) {
-            this.setCursor(line, logical - 1);
+            let target = logical - 1;
+            // Step over the whole emoji: stopping at its trailing half would
+            // leave the cursor inside the pair.
+            const ch = this._lines[line].text.charCodeAt(target);
+            if (target > 0 && ch >= 0xdc00 && ch <= 0xdfff) {
+                target--;
+            }
+            this.setCursor(line, target);
         }
     }
     moveRight() {
         const { line, logical } = this._cursor;
-        if (logical < this._lines[line].text.length) {
-            this.setCursor(line, logical + 1);
+        const text = this._lines[line].text;
+        if (logical < text.length) {
+            let target = logical + 1;
+            // Step over the whole emoji: stopping at its leading half would
+            // leave the cursor inside the pair.
+            const ch = text.charCodeAt(logical);
+            if (target < text.length && ch >= 0xd800 && ch <= 0xdbff) {
+                target++;
+            }
+            this.setCursor(line, target);
         }
     }
     /** Vertical movement aligns by visual column, so wide-character lines do not drift. */
     moveUp() {
         const { line, logical } = this._cursor;
-        if (line > 0) {
-            const visual = this._lines[line].visualAt(logical);
-            this.setCursor(line - 1, this._lines[line - 1].logicalAt(visual));
+        if (this.cursorVisualLine === 0) {
+            // Already on the first visual line: still move to the start of the
+            // current segment (like up-to-line-start in vim).
+            const segs = this.lineSegments(line);
+            let idx = 0;
+            while (idx < segs.length - 1 && logical >= segs[idx + 1].start) {
+                idx++;
+            }
+            this.setCursor(line, segs[idx].start);
+            return;
+        }
+        const prev = this.visualLineAt(this.cursorVisualLine - 1);
+        if (!prev) {
+            return;
         }
+        this.moveToSegment(prev);
     }
     moveDown() {
-        const { line, logical } = this._cursor;
-        if (line < this._lines.length - 1) {
-            const visual = this._lines[line].visualAt(logical);
-            this.setCursor(line + 1, this._lines[line + 1].logicalAt(visual));
+        if (this.cursorVisualLine >= this.visualLineCount - 1) {
+            return;
         }
+        const next = this.visualLineAt(this.cursorVisualLine + 1);
+        if (!next) {
+            return;
+        }
+        this.moveToSegment(next);
     }
     moveToLineStart() {
         this.setCursor(this._cursor.line, 0);
@@ -140,34 +296,63 @@ export class Document {
         }
         this.setCursor(line, i);
     }
-    /** Page up: move the cursor up by `height - 1` lines (one line of overlap), keeping the visual column. */
+    /** Page up: move the cursor up by `height - 1` visual lines (one line of overlap), keeping the visual column. */
     movePageUp(height) {
-        const { line, logical } = this._cursor;
-        const visual = this._lines[line].visualAt(logical);
-        const target = Math.max(0, line - Math.max(1, height - 1));
-        this.setCursor(target, this._lines[target].logicalAt(visual));
+        const target = Math.max(0, this.cursorVisualLine - Math.max(1, height - 1));
+        const seg = this.visualLineAt(target);
+        if (!seg) {
+            return;
+        }
+        this.moveToSegment(seg);
     }
     movePageDown(height) {
-        const { line, logical } = this._cursor;
-        const visual = this._lines[line].visualAt(logical);
-        const target = Math.min(this._lines.length - 1, line + Math.max(1, height - 1));
-        this.setCursor(target, this._lines[target].logicalAt(visual));
+        const target = Math.min(this.visualLineCount - 1, this.cursorVisualLine + Math.max(1, height - 1));
+        const seg = this.visualLineAt(target);
+        if (!seg) {
+            return;
+        }
+        this.moveToSegment(seg);
     }
     /**
-     * Scroll the viewport so the cursor stays visible: if the cursor is above
-     * the viewport, scroll to its line; if below, scroll so it becomes the
-     * last visible line. Returns the new scrollTop.
+     * Scroll the viewport by `delta` visual lines without moving the cursor,
+     * clamped to the document range. Locks the view in place (Ctrl+wheel
+     * browsing) until the cursor moves.
+     */
+    scrollView(delta, height) {
+        const total = this.visualLineCount;
+        const effectiveH = height > 0 ? height : total;
+        const maxScroll = Math.max(0, total - effectiveH);
+        const base = this._viewScrollTop ?? this._scrollTop;
+        const vs = Math.max(0, Math.min(base + delta, maxScroll));
+        this._viewScrollTop = vs;
+        this._scrollTop = vs;
+        return vs;
+    }
+    /**
+     * Scroll the viewport so the cursor stays visible, in visual-line terms:
+     * if the cursor's visual line is above the viewport, scroll to it; if
+     * below, scroll so it becomes the last visible line. Returns the new
+     * scrollTop (in visual lines). While the view is manually locked
+     * (`scrollView`), the position is kept instead and only clamped.
      */
     updateScroll(height) {
-        const effectiveH = height > 0 ? height : this._lines.length;
+        const total = this.visualLineCount;
+        const effectiveH = height > 0 ? height : total;
+        const maxScroll = Math.max(0, total - effectiveH);
+        if (this._viewScrollTop !== null) {
+            const vs = Math.max(0, Math.min(this._viewScrollTop, maxScroll));
+            this._viewScrollTop = vs;
+            this._scrollTop = vs;
+            return vs;
+        }
+        const vline = this.cursorVisualLine;
         let vs = this._scrollTop;
-        if (this._cursor.line < vs) {
-            vs = this._cursor.line;
+        if (vline < vs) {
+            vs = vline;
         }
-        else if (this._cursor.line >= vs + effectiveH) {
-            vs = this._cursor.line - effectiveH + 1;
+        else if (vline >= vs + effectiveH) {
+            vs = vline - effectiveH + 1;
         }
-        const maxScroll = Math.max(0, this._lines.length - effectiveH);
         vs = Math.max(0, Math.min(vs, maxScroll));
         this._scrollTop = vs;
         return vs;

package/dist/core/document/operations.js

@@ -26,10 +26,15 @@ export class DeleteBeforeOp {
         const { line, logical } = doc.cursor;
         if (logical > 0) {
             const cur = doc.getLine(line);
-            this._deletedChar = cur[logical - 1];
+            // Deleting only the trailing half of a surrogate pair would leave a
+            // broken half-rendering char, so delete the whole code point.
+            const last = cur.charCodeAt(logical - 1);
+            const isTrail = last >= 0xdc00 && last <= 0xdfff && logical >= 2;
+            const units = isTrail ? 2 : 1;
+            this._deletedChar = cur.slice(logical - units, logical);
             this._joined = false;
-            doc.setLine(line, cur.slice(0, logical - 1) + cur.slice(logical));
-            doc.setCursor(line, logical - 1);
+            doc.setLine(line, cur.slice(0, logical - units) + cur.slice(logical));
+            doc.setCursor(line, logical - units);
         }
         else if (line > 0) {
             const prev = doc.getLine(line - 1);
@@ -45,7 +50,7 @@ export class DeleteBeforeOp {
             const { line, logical } = doc.cursor;
             const cur = doc.getLine(line);
             doc.setLine(line, cur.slice(0, logical) + this._deletedChar + cur.slice(logical));
-            doc.setCursor(line, logical + 1);
+            doc.setCursor(line, logical + this._deletedChar.length);
         }
         else {
             // Cursor sits at the end of the merged line; split it back at that point.
@@ -65,9 +70,14 @@ export class DeleteAfterOp {
         const { line, logical } = doc.cursor;
         const cur = doc.getLine(line);
         if (logical < cur.length) {
-            this._deletedChar = cur[logical];
+            // Deleting only the leading half of a surrogate pair would leave a
+            // broken half-rendering char, so delete the whole code point.
+            const first = cur.charCodeAt(logical);
+            const isLead = first >= 0xd800 && first <= 0xdbff && logical + 1 < cur.length;
+            const units = isLead ? 2 : 1;
+            this._deletedChar = cur.slice(logical, logical + units);
             this._joined = false;
-            doc.setLine(line, cur.slice(0, logical) + cur.slice(logical + 1));
+            doc.setLine(line, cur.slice(0, logical) + cur.slice(logical + units));
         }
         else if (line < doc.lineCount - 1) {
             const next = doc.getLine(line + 1);

package/dist/core/document/text-line.d.ts

@@ -21,4 +21,17 @@ export declare class TextLine {
      * (largest prefix not exceeding the target).
      */
     logicalAt(visual: number): number;
+    /**
+     * Cut one soft-wrap segment starting at `startVisual`: the longest
+     * slice whose terminal width is at most `wrapWidth`. Returns the segment
+     * text plus the visual/logical position where it ends (the next call's
+     * `startVisual`). A single character wider than `wrapWidth` (or the
+     * trailing empty segment at line end) is returned on its own so the
+     * caller always makes progress.
+     */
+    segmentFrom(startVisual: number, wrapWidth: number): {
+        text: string;
+        endVisual: number;
+        endLogical: number;
+    };
 }

package/dist/core/document/text-line.js

@@ -57,4 +57,35 @@ export class TextLine {
         }
         return lo;
     }
+    /**
+     * Cut one soft-wrap segment starting at `startVisual`: the longest
+     * slice whose terminal width is at most `wrapWidth`. Returns the segment
+     * text plus the visual/logical position where it ends (the next call's
+     * `startVisual`). A single character wider than `wrapWidth` (or the
+     * trailing empty segment at line end) is returned on its own so the
+     * caller always makes progress.
+     */
+    segmentFrom(startVisual, wrapWidth) {
+        const start = this.logicalAt(startVisual);
+        if (start >= this.text.length) {
+            return {
+                text: "",
+                endVisual: this.visualAt(start),
+                endLogical: start,
+            };
+        }
+        const startVisualActual = this.visualAt(start);
+        const limit = startVisualActual + Math.max(1, wrapWidth);
+        let end = this.logicalAt(limit);
+        // `logicalAt` may snap left onto a wide char; guarantee progress by
+        // taking at least one code point (a surrogate pair counts as one).
+        if (end <= start) {
+            end = start + (this.text.codePointAt(start) > 0xffff ? 2 : 1);
+        }
+        return {
+            text: this.text.slice(start, end),
+            endVisual: this.visualAt(end),
+            endLogical: end,
+        };
+    }
 }

package/dist/core/editor-controller.js

@@ -80,11 +80,22 @@ export class EditorController {
             const height = typeof args?.height === "number" ? args.height : 1;
             doc.movePageDown(height);
         });
-        // Mouse click: position the cursor by terminal column (not code units).
+        // Mouse click: position the cursor by logical column (soft-wrap aware).
         this.defineCommand("cursor.setPosition", (doc, args) => {
             const line = typeof args?.line === "number" ? args.line : doc.cursor.line;
-            const visual = typeof args?.visual === "number" ? args.visual : doc.cursor.visual;
-            doc.setCursorAtVisual(line, visual);
+            if (typeof args?.logical === "number") {
+                doc.setCursor(line, args.logical);
+            }
+            else {
+                const visual = typeof args?.visual === "number" ? args.visual : doc.cursor.visual;
+                doc.setCursorAtVisual(line, visual);
+            }
+        });
+        // Ctrl+wheel: scroll the view without moving the cursor (clamped).
+        this.defineCommand("view.scroll", (doc, args) => {
+            const delta = typeof args?.delta === "number" ? args.delta : 0;
+            const height = typeof args?.height === "number" ? args.height : 1;
+            doc.scrollView(delta, height);
         });
     }
 }

package/dist/view/click-mapping.d.ts

@@ -1,16 +1,21 @@
+import type { Document } from "../core/document/document.js";
 export type ClickTarget = {
     line: number;
-    visual: number;
+    logical: number;
 };
 /**
  * Convert a 1-based terminal click (from `useMouseRegion`) into a document
- * position, accounting for the line-number gutter and the vertical scroll
- * offset.
+ * position, accounting for the line-number gutter, the vertical scroll
+ * offset, and soft-wrap segments.
  *
  * Assumes the region is the editor box itself with no padding, so
  * `event.x - rect.x` is a 0-based cell column inside the region. Columns
  * left of the gutter (clicks on the line numbers) snap to the text area's
  * left edge; rows past the last document line clamp to it.
+ *
+ * The clicked visual line is mapped through `doc.visualLineAt`, so a click
+ * on a wrapped continuation lands on the same logical line with the segment
+ * offset translated back to a logical column.
  */
 export declare function clickToPosition(event: {
     x: number;
@@ -20,4 +25,4 @@ export declare function clickToPosition(event: {
     y: number;
     width: number;
     height: number;
-}, gutterWidth: number, visibleStart: number, lineCount: number): ClickTarget;
+}, gutterWidth: number, visibleStart: number, doc: Document): ClickTarget;

package/dist/view/click-mapping.js

@@ -1,17 +1,29 @@
 /**
  * Convert a 1-based terminal click (from `useMouseRegion`) into a document
- * position, accounting for the line-number gutter and the vertical scroll
- * offset.
+ * position, accounting for the line-number gutter, the vertical scroll
+ * offset, and soft-wrap segments.
  *
  * Assumes the region is the editor box itself with no padding, so
  * `event.x - rect.x` is a 0-based cell column inside the region. Columns
  * left of the gutter (clicks on the line numbers) snap to the text area's
  * left edge; rows past the last document line clamp to it.
+ *
+ * The clicked visual line is mapped through `doc.visualLineAt`, so a click
+ * on a wrapped continuation lands on the same logical line with the segment
+ * offset translated back to a logical column.
  */
-export function clickToPosition(event, rect, gutterWidth, visibleStart, lineCount) {
+export function clickToPosition(event, rect, gutterWidth, visibleStart, doc) {
     const localX = event.x - rect.x;
     const localY = event.y - rect.y;
-    const visual = Math.max(0, localX - gutterWidth);
-    const line = Math.max(0, Math.min(visibleStart + localY, lineCount - 1));
-    return { line, visual };
+    const vline = visibleStart + localY;
+    const seg = doc.visualLineAt(vline);
+    if (!seg) {
+        const last = doc.lineCount - 1;
+        return { line: last, logical: doc.getLine(last).length };
+    }
+    const segmentOffset = Math.max(0, localX - gutterWidth);
+    const segStartVisual = doc.visualAtLogical(seg.line, seg.start);
+    const col = doc.logicalAtVisual(seg.line, segStartVisual + segmentOffset);
+    const logical = Math.min(Math.max(col, seg.start), seg.end);
+    return { line: seg.line, logical };
 }

package/dist/view/editor.js

@@ -110,44 +110,61 @@ export function Editor({ value: initialText = "", lineNumberRightSpacing = 1, cu
         switchMode,
     ]);
     const ref = useRef(null);
-    const { height } = useBoxMetrics(ref);
+    const { height, width } = useBoxMetrics(ref);
     const doc = controller.document;
     const lineNumberWidth = doc.getLineNumberWidth();
+    // Soft-wrap the text at the editable width minus one cell, leaving a
+    // right-hand margin so the last column never hugs the edge.
+    doc.setWrapWidth(width - lineNumberWidth - lineNumberRightSpacing - 1);
     const visibleStart = doc.updateScroll(height);
-    const effectiveH = height > 0 ? height : doc.lineCount;
-    const visibleLines = doc.lines.slice(visibleStart, visibleStart + effectiveH);
+    const effectiveH = height > 0 ? height : doc.visualLineCount;
     const cursor = doc.cursor;
-    const cursorX = cursor.visual + lineNumberWidth + lineNumberRightSpacing + cursorOffset;
-    const cursorY = cursor.line - visibleStart + cursorHeightOffset;
+    const cursorVisualLine = doc.cursorVisualLine;
+    const cursorX = doc.cursorSegmentVisual + lineNumberWidth + lineNumberRightSpacing + cursorOffset;
+    const cursorY = cursorVisualLine - visibleStart + cursorHeightOffset;
     setCursorPosition({ x: cursorX, y: cursorY });
-    // Mouse: clicks position the cursor in any mode; the wheel scrolls one
-    // line at a time. The callbacks close over this render's metrics.
+    // Mouse: clicks position the cursor in any mode. A plain wheel moves the
+    // cursor one visual line per notch; Ctrl+wheel scrolls the view without
+    // moving the cursor (clamped to the document). Callbacks close over this
+    // render's metrics.
     const mouseRef = useMouseRegion({
         onClick: (event, rect) => {
-            const target = clickToPosition(event, rect, lineNumberWidth + lineNumberRightSpacing, doc.scrollTop, doc.lineCount);
+            const target = clickToPosition(event, rect, lineNumberWidth + lineNumberRightSpacing, doc.scrollTop, doc);
             controller.execute("cursor.setPosition", {
                 line: target.line,
-                visual: target.visual,
+                logical: target.logical,
             });
         },
         onWheel: (event) => {
-            if (event.button === "wheel-up") {
-                controller.execute("cursor.pageUp", { height: 1 });
+            const up = event.button === "wheel-up";
+            const down = event.button === "wheel-down";
+            if (!up && !down) {
+                return;
             }
-            else if (event.button === "wheel-down") {
-                controller.execute("cursor.pageDown", { height: 1 });
+            if (event.ctrl) {
+                controller.execute("view.scroll", {
+                    delta: up ? -1 : 1,
+                    height,
+                });
+                return;
             }
+            controller.execute(up ? "cursor.pageUp" : "cursor.pageDown", {
+                height: 1,
+            });
         },
     });
     const modeText = mode === "normal" ? t("editor.mode.normal") : t("editor.mode.insert");
     return (React.createElement(Box, { flexDirection: "column", height: "100%", width: "100%" },
         React.createElement(InformationBar, { mode: modeText, cursor: { line: cursor.line, column: cursor.visual } }),
         React.createElement(Box, { ref: mouseRef, flexGrow: 1, width: "100%", backgroundColor: "#1e1e1e" },
-            React.createElement(Box, { ref: ref, height: "100%", width: "100%", flexDirection: "column" }, visibleLines.map((each, i) => {
-                const lineNumber = visibleStart + i;
-                return (React.createElement(Box, { key: lineNumber, flexDirection: "row" },
-                    React.createElement(Box, { width: lineNumberWidth, justifyContent: "flex-end", marginRight: lineNumberRightSpacing },
-                        React.createElement(Text, { bold: cursor.line === lineNumber }, lineNumber)),
-                    React.createElement(Text, null, each)));
+            React.createElement(Box, { ref: ref, height: "100%", width: "100%", flexDirection: "column" }, Array.from({ length: effectiveH }, (_, i) => {
+                const vline = visibleStart + i;
+                const seg = doc.visualLineAt(vline);
+                if (!seg) {
+                    return null;
+                }
+                return (React.createElement(Box, { key: vline, flexDirection: "row" },
+                    React.createElement(Box, { width: lineNumberWidth, justifyContent: "flex-end", marginRight: lineNumberRightSpacing }, seg.first ? (React.createElement(Text, { bold: cursor.line === seg.line }, seg.line)) : null),
+                    React.createElement(Text, null, doc.getLine(seg.line).slice(seg.start, seg.end))));
             })))));
 }

package/dist/view/logo.d.ts

@@ -1,9 +1,6 @@
 /**
- * "Blots Editor" ASCII logo — figlet box-drawing style (█ ╔ ═ ║ ╚ ╝), whose
- * shaded edges give a pseudo-3D look. "BLOTS" renders white, "EDITOR" gray.
- *
- * To swap the style, replace these lines with your own art, keeping the
- * white/gray per-line split.
+ * Pick the logo variant for the current terminal size. Wider screens get the
+ * words side by side; narrower screens stack them, and shrinking height steps
+ * the font down (block → simple → chrome → tiny) so buttons stay visible.
  */
-export declare const LOGO_WHITE: string[];
-export declare const LOGO_GRAY: string[];
+export declare function getLogo(columns: number, rows: number): string;

package/dist/view/logo.js

@@ -1,23 +1,87 @@
+import chalk from "chalk";
+import cfonts from "cfonts";
+import gradient from "gradient-string";
 /**
- * "Blots Editor" ASCII logo — figlet box-drawing style (█ ╔ ═ ║ ╚ ╝), whose
- * shaded edges give a pseudo-3D look. "BLOTS" renders white, "EDITOR" gray.
+ * "Blots Editor" rainbow-gradient logo.
  *
- * To swap the style, replace these lines with your own art, keeping the
- * white/gray per-line split.
+ * Generated with the same stack `oh-my-logo --filled` uses (cfonts block
+ * glyphs + gradient-string palette) but as a plain string, since
+ * oh-my-logo's own `renderFilled` renders through its own ink instance and
+ * cannot be embedded. `chalk.level` is forced so the gradient survives
+ * non-interactive output (pipes, tests).
+ *
+ * `getLogo(columns, rows)` picks a size tier from terminal dimensions so the
+ * logo shrinks instead of crowding out the menu buttons on small screens.
  */
-export const LOGO_WHITE = [
-    "██████╗ ██╗     ██████╗ ████████╗ ██████╗  ",
-    "██╔══██╗██║     ██╔══██╗╚══██╔══╝██╔════╝  ",
-    "██████╔╝██║     ██║  ██║   ██║   ███████╗  ",
-    "██╔══██╗██║     ██║  ██║   ██║   ╚════██║  ",
-    "██████╔╝██║     ██║  ██║   ██║   ███████║  ",
-    "╚═════╝ ╚██████╗╚██████╔╝   ╚═╝   ╚══════╝  ",
+chalk.level = 3;
+const RAINBOW = [
+    "#FF0000",
+    "#FF7F00",
+    "#FFFF00",
+    "#00FF00",
+    "#0000FF",
+    "#8B00FF",
 ];
-export const LOGO_GRAY = [
-    "███████╗ ██████╗ ████████╗ ████████╗ ██████╗ ██████╗",
-    "██╔════╝ ██╔══██╗    ██╔═╝ ╚══██╔══╝ ██╔══██╗ ██╔══██╗",
-    "█████╗   ██║  ██║    ██║     ██║   ██║  ██║ ██████╔╝",
-    "██╔══╝   ██║  ██║    ██║     ██║   ██║  ██║ ██╔══██╗",
-    "███████╗ ██║  ██║    ██║     ██║   ██║  ██║ ██║  ██║",
-    "╚══════╝ ╚█████╔╝    ╚═╝     ╚═╝   ╚██████╔╝ ╚═╝  ╚═╝",
+const FONTS = {
+    block: "block",
+    simple: "simple",
+    chrome: "chrome",
+    tiny: "tiny",
+};
+const renderBlock = (text, font) => {
+    const result = cfonts.render(text, {
+        font: FONTS[font],
+        align: "left",
+        colors: ["system"],
+        backgroundColor: "transparent",
+        letterSpacing: 1,
+        lineHeight: 1,
+        space: true,
+        maxLength: 0,
+    });
+    // cfonts returns `false` when it cannot render; fall back to plain text.
+    const art = (result === false ? text : result.string).replace(/^\n+|\n+$/g, "");
+    return art.split("\n");
+};
+/** Side-by-side layout: "Blots  Editor" on shared lines. */
+const wide = (font) => {
+    const blots = renderBlock("Blots", font);
+    const editor = renderBlock("Editor", font);
+    return blots.map((line, i) => `${line}  ${editor[i] ?? ""}`).join("\n");
+};
+/** Stacked layout: "Blots" above "Editor". */
+const narrow = (font) => `${renderBlock("Blots", font).join("\n")}\n\n${renderBlock("Editor", font).join("\n")}`;
+/** Same gradient pass across the whole logo, whichever layout/font. */
+const toLogo = (plain) => gradient(RAINBOW).multiline(plain);
+/** Size tiers: (min rows, min cols for side-by-side) → (layout, font). */
+const TIERS = [
+    // Wide screens: words side by side; shrink the font as height drops.
+    { minCols: 104, minRows: 26, build: () => wide("block") },
+    { minCols: 104, minRows: 20, build: () => wide("simple") },
+    { minCols: 104, minRows: 0, build: () => wide("tiny") },
+    // Narrow screens: words stacked; shrink the font as height drops.
+    { minCols: 0, minRows: 30, build: () => narrow("block") },
+    { minCols: 0, minRows: 24, build: () => narrow("simple") },
+    { minCols: 0, minRows: 20, build: () => narrow("chrome") },
+    { minCols: 0, minRows: 0, build: () => narrow("tiny") },
 ];
+const cache = new Map();
+/**
+ * Pick the logo variant for the current terminal size. Wider screens get the
+ * words side by side; narrower screens stack them, and shrinking height steps
+ * the font down (block → simple → chrome → tiny) so buttons stay visible.
+ */
+export function getLogo(columns, rows) {
+    for (const tier of TIERS) {
+        if (columns >= tier.minCols && rows >= tier.minRows) {
+            const key = tier.build.toString();
+            let logo = cache.get(key);
+            if (!logo) {
+                logo = toLogo(tier.build());
+                cache.set(key, logo);
+            }
+            return logo;
+        }
+    }
+    return toLogo(wide("block"));
+}

package/dist/view/main-menu.js

@@ -1,10 +1,10 @@
-import { Box, Text } from "ink";
+import { Box, Text, useWindowSize } from "ink";
 import { useI18n, useKeyboard, useMouseRegion } from "ink-cartridge";
 import React, { useEffect, useState } from "react";
 import { Editor } from "./editor.js";
 import { Settings } from "./settings.js";
 import { gotoScreen } from "ink-cartridge";
-import { LOGO_GRAY, LOGO_WHITE } from "./logo.js";
+import { getLogo } from "./logo.js";
 /**
  * A borderless text button: the plain Box provides the mouse hit area,
  * hovering inverts the text as visual feedback, disabled buttons dim.
@@ -30,6 +30,11 @@ function MenuButton({ label, shortcut, disabled, onClick }) {
 export function MainMenu() {
     const { t } = useI18n();
     const { boundKeyboard } = useKeyboard();
+    // The wide logo needs ≈100 columns; below that the words stack vertically.
+    // On short screens `getLogo` also shrinks the font so buttons stay visible.
+    const { columns, rows } = useWindowSize();
+    const narrow = columns < 104;
+    const logo = getLogo(columns, rows);
     useEffect(() => {
         const unbinds = [
             boundKeyboard(["e"], () => gotoScreen(Editor, {})),
@@ -39,12 +44,9 @@ export function MainMenu() {
         return () => unbinds.forEach((fn) => fn());
     }, [boundKeyboard]);
     return (React.createElement(Box, { flexDirection: "column", justifyContent: "center", alignItems: "center", width: "100%", height: "100%" },
-        React.createElement(Box, { flexDirection: "column", gap: 1, marginBottom: 6 }, LOGO_WHITE.map((line, i) => (React.createElement(Box, { key: i, flexDirection: "row" },
-            React.createElement(Text, { color: "white" },
-                line,
-                " "),
-            React.createElement(Text, { color: "gray" }, LOGO_GRAY[i]))))),
-        React.createElement(Box, { flexDirection: "row", gap: 6 },
+        React.createElement(Box, { flexDirection: "column", marginBottom: narrow ? 2 : 6 },
+            React.createElement(Text, null, logo)),
+        React.createElement(Box, { flexDirection: narrow ? "column" : "row", gap: narrow ? 1 : 6, alignItems: "center" },
             React.createElement(MenuButton, { label: t("menu.edit"), shortcut: "e", onClick: () => gotoScreen(Editor, {}) }),
             React.createElement(MenuButton, { label: t("menu.settings"), shortcut: "s", onClick: () => gotoScreen(Settings, {}) }),
             React.createElement(MenuButton, { label: t("menu.other"), disabled: true }),

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "blots-editor",
-	"version": "0.0.9",
+	"version": "0.0.11",
 	"description": "A lightweight Markdown editor for the terminal, built on ink-cartridge",
 	"type": "module",
 	"main": "./dist/index.js",
@@ -51,10 +51,15 @@
 		"react": ">=18"
 	},
 	"dependencies": {
+		"cfonts": "^3.3.1",
+		"chalk": "^4.1.2",
+		"gradient-string": "^2.0.2",
 		"ink-cartridge": "*",
+		"oh-my-logo": "^0.5.0",
 		"string-width": "^8.2.2"
 	},
 	"devDependencies": {
+		"@types/gradient-string": "^1.1.6",
 		"@types/node": "^20.19.39",
 		"@types/react": "^19.2.14",
 		"ink": "^7.1.1",