@adecore/editor 0.17.0-beta.2 → 0.18.0

package/dist/controller.js

@@ -51,7 +51,6 @@ const VIEW_COMMANDS = new Set([
 let lineClip = null;
 /* Typing in the same stretch is one undo step until a pause this long. */
 const TYPING_PAUSE_MS = 750;
-const PAIR_CHARACTER = /^[()[\]{}'"`;<]$/;
 /*
  * What a person does to the editor: keys, typing, the clipboard, an input method, the mouse. It turns
  * each into a command on the model and leaves the drawing to the view.
@@ -256,6 +255,7 @@ export class InputController {
             smartEnter: keys.smartIndentOnEnter,
             indentOnPaste: keys.indentOnPaste,
             smartSemicolon: keys.smartSemicolon,
+            smartArrow: keys.smartArrow,
             language: settings.language ?? 'plaintext',
             camelCase: keys.camelHumps,
             visualLine: (offset) => this.view.rowOf(offset),
@@ -369,7 +369,8 @@ export class InputController {
         for (const selection of this.view.model.getSelections()) {
             this.view.ensureVisible(selection.head);
         }
-        if (PAIR_CHARACTER.test(text)) {
+        // Every key goes through the model, which decides by the key before it too, as for the arrow of PHP.
+        if (text.length === 1) {
             this.view.model.typeText(text, { ...this.commandOptions(), historyGroup: this.inputGroup() });
             this.view.revealCaret();
         }

package/dist/editor.css

@@ -8,7 +8,7 @@
     --find-current-text: var(--text);
     --editor-selection: color-mix(in srgb, var(--accent) 16%, transparent);
     --editor-occurrence: color-mix(in srgb, var(--text) 7%, transparent);
-    --editor-guide: color-mix(in srgb, var(--text) 8%, transparent);
+    --editor-guide: color-mix(in srgb, var(--text) 5%, transparent);
     --editor-guide-active: color-mix(in srgb, var(--text) 24%, transparent);
     --editor-margin: color-mix(in srgb, var(--text) 14%, transparent);
     --editor-whitespace: color-mix(in srgb, var(--text) 30%, transparent);
@@ -29,7 +29,7 @@
     --find-match: color-mix(in srgb, var(--status-needs-you) 24%, transparent);
     --editor-selection: color-mix(in srgb, var(--accent) 28%, transparent);
     --editor-occurrence: color-mix(in srgb, var(--text) 9%, transparent);
-    --editor-guide: color-mix(in srgb, var(--text) 10%, transparent);
+    --editor-guide: color-mix(in srgb, var(--text) 6%, transparent);
     --editor-guide-active: color-mix(in srgb, var(--text) 28%, transparent);
     --editor-margin: color-mix(in srgb, var(--text) 16%, transparent);
     --editor-whitespace: color-mix(in srgb, var(--text) 32%, transparent);
@@ -728,13 +728,15 @@
 
 /*
  * A code vision row is quiet text one code line high above a declaration, in the declaration's
- * indentation. Its entries stand a text size apart and light up as a link under the pointer.
+ * indentation, a step below the code as the platform draws it. Its entries stand a text size apart
+ * and light up as a link under the pointer.
  */
 .se-block.se-lens {
     display: flex;
     align-items: center;
     gap: var(--text-xs);
     padding: 0;
+    font-size: max(12px, calc(var(--code-font-size, 13px) - 2px));
     white-space: nowrap;
 }
 .se-lens-entry {

package/dist/engine.js

@@ -537,11 +537,18 @@ class SmartEditor {
                     to: this.offsetAt(symbol.range.end),
                     body: symbol.body
                 })),
-                ranges: (hints.ranges ?? []).map((range) => ({
-                    from: this.model.getLine(Math.min(range.startLine, this.model.getLineCount() - 1)).start,
-                    to: this.model.getLine(Math.min(range.endLine, this.model.getLineCount() - 1)).start,
-                    ...(range.kind === undefined ? {} : { kind: range.kind })
-                }))
+                ranges: (hints.ranges ?? []).map((range) => {
+                    const first = this.model.getLine(Math.min(range.startLine, this.model.getLineCount() - 1));
+                    const last = this.model.getLine(Math.min(range.endLine, this.model.getLineCount() - 1));
+                    const within = (line, character) => Math.min(line.end, line.start + Math.max(0, character));
+                    return {
+                        from: first.start,
+                        to: last.start,
+                        ...(range.kind === undefined ? {} : { kind: range.kind }),
+                        ...(range.startCharacter === undefined ? {} : { head: within(first, range.startCharacter) }),
+                        ...(range.endCharacter === undefined ? {} : { tail: within(last, range.endCharacter) })
+                    };
+                })
             });
     }
     setSmartKeys(keys) {

package/dist/index.d.ts

@@ -2,4 +2,4 @@ export { AGENT_COLORS } from './attribution.ts';
 export { createSmartEditorEngine } from './engine.ts';
 export { DEFAULT_SMART_KEYS } from './smart-keys.ts';
 export { shikiScopeColors, shikiTokenizers } from './shiki.ts';
-export type { Editor, EditorAttributionHover, EditorAttributionMark, EditorMarkColor, EditorBlock, EditorChangeKind, EditorChangeMark, EditorCodeVision, EditorCodeVisionEntry, EditorClick, EditorCodeBlockOptions, EditorClickHandler, EditorCommand, EditorContextMenu, EditorEngine, EditorFindQuery, EditorFoldHints, EditorFoldOutline, EditorFoldRange, EditorFoldSymbol, EditorFolds, EditorFindState, EditorReplaceOptions, EditorGutterAction, EditorGutterMarker, EditorIndentation, EditorContentChange, EditorHighlight, EditorHighlightKind, EditorHover, EditorGhostText, EditorInlayHint, EditorKeyHandler, EditorLineAction, EditorLineHighlight, EditorMarker, EditorMessages, EditorMarkerSeverity, EditorReveal, EditorRect, EditorSmartKeys, EditorOptions, EditorPosition, EditorRemoteCursor, EditorRange, EditorTextChange, EditorTrackedRange, EditorRunCommand, EditorSelectionRanges, EditorTheme, EditorViewCommand, EditorWidget, FoldRole, KeyChord, LineToken, ScopeColorSource, ScopeColors, ScopeStyle, EditorSemanticToken, LineTokenizer, SmartEditorEngineOptions, TokenizedLine, TokenizerSource } from './types.ts';
+export type { Editor, EditorAttributionHover, EditorAttributionMark, EditorMarkColor, EditorBlock, EditorChangeKind, EditorChangeMark, EditorCodeVision, EditorCodeVisionEntry, EditorClick, EditorCodeBlockOptions, EditorClickHandler, EditorCommand, EditorContextMenu, EditorEngine, EditorFindQuery, EditorFoldHints, EditorFoldRangeHint, EditorFoldOutline, EditorFoldRange, EditorFoldSymbol, EditorFolds, EditorFindState, EditorReplaceOptions, EditorGutterAction, EditorGutterMarker, EditorIndentation, EditorContentChange, EditorHighlight, EditorHighlightKind, EditorHover, EditorGhostText, EditorInlayHint, EditorKeyHandler, EditorLineAction, EditorLineHighlight, EditorMarker, EditorMessages, EditorMarkerSeverity, EditorReveal, EditorRect, EditorSmartKeys, EditorOptions, EditorPosition, EditorRemoteCursor, EditorRange, EditorTextChange, EditorTrackedRange, EditorRunCommand, EditorSelectionRanges, EditorTheme, EditorViewCommand, EditorWidget, FoldRole, KeyChord, LineToken, ScopeColorSource, ScopeColors, ScopeStyle, EditorSemanticToken, LineTokenizer, SmartEditorEngineOptions, TokenizedLine, TokenizerSource } from './types.ts';

package/dist/layout.d.ts

@@ -40,6 +40,7 @@ export interface FoldState {
     endLine: number;
     collapsed: boolean;
     closer?: number;
+    head?: number;
 }
 interface RowBase {
     key: string;
@@ -52,6 +53,7 @@ export interface TextRow extends RowBase {
     kind: 'text';
     lastLine: number;
     tail: number | null;
+    head: number | null;
     subRows: number;
 }
 export interface BlockRow extends RowBase {
@@ -139,6 +141,7 @@ export declare class EditorLayout {
     indentX(line: number): number;
     rowForLine(line: number): LayoutRow;
     isHidden(line: number): boolean;
+    hides(offset: number): boolean;
     visibleRows(top: number, height: number, overscan?: number): LayoutRow[];
     geometry(row: TextRow): LineGeometry;
     private stopOf;

package/dist/layout.js

@@ -278,6 +278,7 @@ export class EditorLayout {
             const fold = folds.get(line);
             const last = Math.max(line, Math.min(count - 1, fold?.endLine ?? line));
             const tail = fold?.closer !== undefined && last > line ? this.tailOf(fold.closer, last) : null;
+            const head = fold?.head !== undefined && last > line ? this.tailOf(fold.head, line) : null;
             const index = this.rows.length;
             const bounds = this.wrapWidth === null ? null : this.document.getLine(line);
             const subRows = this.rowCountOf(line, bounds === null ? 0 : bounds.end - bounds.start);
@@ -288,6 +289,7 @@ export class EditorLayout {
                 line,
                 lastLine: last,
                 tail,
+                head,
                 subRows,
                 top: 0,
                 height: subRows * this.metrics.lineHeight
@@ -302,7 +304,7 @@ export class EditorLayout {
         }
         this.reflow();
     }
-    /* The closer a fold ends in, clamped to its last line since the fold may be a moment older than an edit. */
+    /* An offset of a fold clamped to its line, since the fold may be a moment older than an edit. */
     tailOf(closer, line) {
         const bounds = this.document.getLine(line);
         return Math.min(bounds.end, Math.max(bounds.start, closer));
@@ -382,6 +384,12 @@ export class EditorLayout {
         const row = this.rowForLine(line);
         return row.kind === 'text' && line > row.line && line <= row.lastLine;
     }
+    /* Whether a fold hides the offset: on a line it hides, or past where it starts on its first line. */
+    hides(offset) {
+        const line = this.document.positionAt(offset).line;
+        const row = this.rowForLine(line);
+        return row.kind === 'text' && (this.isHidden(line) || (row.head !== null && line === row.line && offset > row.head));
+    }
     visibleRows(top, height, overscan = 120) {
         const result = [];
         for (let index = this.rowAt(top - overscan).index; index < this.rows.length && this.rows[index].top < top + height + overscan; index++) {
@@ -390,6 +398,12 @@ export class EditorLayout {
         return result;
     }
     geometry(row) {
+        if (row.head !== null) {
+            // The first line of a fold that starts within it, laid out up to there; seldom drawn, so never kept.
+            const line = this.document.getLine(row.line);
+            const shown = { ...line, end: row.head, text: line.text.slice(0, row.head - line.start) };
+            return scanLine(shown, this.metrics, this.wrapWidth, (this.inlaysByLine.get(row.line) ?? []).filter((inlay) => inlay.at <= row.head));
+        }
         const cached = this.geometryCache.get(row.line);
         if (cached) {
             return cached;

package/dist/smart-keys.js

@@ -6,6 +6,7 @@ export const DEFAULT_SMART_KEYS = {
     smartIndentOnEnter: true,
     indentOnPaste: true,
     smartSemicolon: true,
+    smartArrow: true,
     camelHumps: false
 };
 /* The keys with what a host left out filled in from the defaults. */

package/dist/types.d.ts

@@ -46,17 +46,21 @@ export interface EditorSmartKeys {
     readonly smartIndentOnEnter: boolean;
     readonly indentOnPaste: boolean;
     readonly smartSemicolon: boolean;
+    readonly smartArrow: boolean;
     readonly camelHumps: boolean;
 }
 export interface EditorFoldSymbol {
     readonly range: EditorRange;
     readonly body: 'function' | 'method' | 'class' | 'value';
 }
+export interface EditorFoldRangeHint extends EditorFoldRange {
+    readonly kind?: string;
+    readonly startCharacter?: number;
+    readonly endCharacter?: number;
+}
 export interface EditorFoldHints {
     readonly symbols?: readonly EditorFoldSymbol[];
-    readonly ranges?: readonly (EditorFoldRange & {
-        readonly kind?: string;
-    })[];
+    readonly ranges?: readonly EditorFoldRangeHint[];
 }
 export interface EditorBlock {
     readonly startLine: number;

package/dist/view.d.ts

@@ -276,6 +276,7 @@ export declare class EditorView {
     private effectiveIndent;
     private activeGuide;
     private scopeGuide;
+    private caretOnGuide;
     private guideRects;
     selectionAtPoint(clientX: number, clientY: number): EditorSelection | null;
     setColumnMode(on: boolean): void;

package/dist/view.js

@@ -446,7 +446,13 @@ export class EditorView {
                 if (this.foldHints !== null) {
                     this.foldHints = {
                         symbols: this.foldHints.symbols?.map((hint) => ({ ...hint, from: mapOffset(hint.from, changes), to: mapOffset(hint.to, changes) })) ?? [],
-                        ranges: this.foldHints.ranges?.map((hint) => ({ ...hint, from: mapOffset(hint.from, changes), to: mapOffset(hint.to, changes) })) ?? []
+                        ranges: this.foldHints.ranges?.map((hint) => ({
+                            ...hint,
+                            from: mapOffset(hint.from, changes),
+                            to: mapOffset(hint.to, changes),
+                            ...(hint.head === undefined ? {} : { head: mapOffset(hint.head, changes) }),
+                            ...(hint.tail === undefined ? {} : { tail: mapOffset(hint.tail, changes) })
+                        })) ?? []
                     };
                 }
                 this.customFolds = this.customFolds.map((fold) => ({ from: mapOffset(fold.from, changes), to: mapOffset(fold.to, changes) }));
@@ -583,12 +589,16 @@ export class EditorView {
         this.render();
     }
     foldStates() {
-        return this.foldRanges.map((range) => ({
-            startLine: range.startLine,
-            endLine: range.endLine,
-            collapsed: this.collapsed.has(range.from),
-            closer: this.collapsed.has(range.from) ? this.closerOf(range) : undefined
-        }));
+        return this.foldRanges.map((range) => {
+            const collapsed = this.collapsed.has(range.from);
+            return {
+                startLine: range.startLine,
+                endLine: range.endLine,
+                collapsed,
+                closer: collapsed ? (range.tail ?? this.closerOf(range)) : undefined,
+                ...(collapsed && range.head !== undefined ? { head: range.head } : {})
+            };
+        });
     }
     /* The folds of the document, a moment after the last edit since they read all of it. */
     scheduleFolds() {
@@ -875,14 +885,14 @@ export class EditorView {
         this.moveHiddenCarets();
         this.render();
     }
-    /* A caret in a line a fold hides would be typing where nobody can see. */
+    /* A caret in what a fold hides would be typing where nobody can see; it goes to where the fold's first line stops. */
     moveHiddenCarets() {
         const visible = (offset) => {
-            const line = this.model.positionAt(offset).line;
-            if (!this.layout.isHidden(line)) {
+            if (!this.layout.hides(offset)) {
                 return offset;
             }
-            return this.model.getLine(this.layout.rowForLine(line).line).end;
+            const row = this.layout.rowForLine(this.model.positionAt(offset).line);
+            return row.kind === 'text' && row.head !== null ? row.head : this.model.getLine(row.line).end;
         };
         const selections = this.model.getSelections();
         const moved = selections.map((selection) => ({ anchor: visible(selection.anchor), head: visible(selection.head) }));
@@ -893,11 +903,11 @@ export class EditorView {
     /* Opens the folds that hide an offset, so a caret or a search result is where it can be seen. */
     ensureVisible(offset) {
         const line = this.model.positionAt(offset).line;
-        if (!this.layout.isHidden(line)) {
+        if (!this.layout.hides(offset)) {
             return;
         }
         for (const range of this.foldRanges) {
-            if (range.startLine < line && range.endLine >= line) {
+            if ((range.startLine < line && range.endLine >= line) || (range.startLine === line && range.head !== undefined && offset > range.head)) {
                 this.collapsed.delete(range.from);
                 this.settled.add(range.from);
             }
@@ -1178,11 +1188,24 @@ export class EditorView {
         const last = inside ? reaches(line, 1) : next > indent ? reaches(line + 1, 1) : line - 1;
         return { column, first, last };
     }
-    /* A line at each indentation level of the rows on screen, joined where the lines go on, and the one of the scope around the caret apart. */
+    /* The line and the indentation column of a caret in the whitespace that leads its line, past the first column, where it can stand on a guide. */
+    caretOnGuide() {
+        const position = this.model.positionAt(this.model.getPrimary().head);
+        const lead = this.model.getLine(position.line).text.slice(0, position.column);
+        if (position.column === 0 || !/^[\t ]*$/.test(lead)) {
+            return null;
+        }
+        return { line: position.line, column: indentationColumn(lead, this.settings.tabSize) };
+    }
+    /*
+     * A line at each indentation level of the rows on screen, joined where the lines go on. Apart from them stand the one
+     * of the scope around the caret, and as the platform does, the one the caret stands on.
+     */
     guideRects(rows) {
         const size = this.settings.tabSize;
         const charWidth = this.layout.metrics.charWidth;
         const active = this.activeGuide();
+        const caret = this.caretOnGuide();
         const plain = [];
         const marked = [];
         const open = new Map();
@@ -1190,7 +1213,9 @@ export class EditorView {
             const segment = open.get(column);
             open.delete(column);
             const rect = { x: column * charWidth, y: segment.top, width: 1, height: segment.bottom - segment.top };
-            (active !== null && active.column === column && segment.last >= active.first && segment.first <= active.last ? marked : plain).push(rect);
+            const scope = active !== null && active.column === column && segment.last >= active.first && segment.first <= active.last;
+            const under = caret !== null && caret.column === column && segment.first <= caret.line && caret.line <= segment.last;
+            (scope || under ? marked : plain).push(rect);
         };
         for (const row of rows) {
             if (row.kind !== 'text') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/editor",
-  "version": "0.17.0-beta.2",
+  "version": "0.18.0",
   "type": "module",
   "exports": {
     ".": {
@@ -39,7 +39,7 @@
     "test": "bun test --conditions=source"
   },
   "dependencies": {
-    "@adecore/editor-core": "0.17.0-beta.2",
+    "@adecore/editor-core": "0.18.0",
     "shiki": "^4.4.3",
     "linkedom": "^0.18.13"
   },

package/src/controller.ts

@@ -77,7 +77,6 @@ let lineClip: string | null = null;
 
 /* Typing in the same stretch is one undo step until a pause this long. */
 const TYPING_PAUSE_MS = 750;
-const PAIR_CHARACTER = /^[()[\]{}'"`;<]$/;
 
 /*
  * What a person does to the editor: keys, typing, the clipboard, an input method, the mouse. It turns
@@ -293,6 +292,7 @@ export class InputController {
             smartEnter: keys.smartIndentOnEnter,
             indentOnPaste: keys.indentOnPaste,
             smartSemicolon: keys.smartSemicolon,
+            smartArrow: keys.smartArrow,
             language: settings.language ?? 'plaintext',
             camelCase: keys.camelHumps,
             visualLine: (offset) => this.view.rowOf(offset),
@@ -415,7 +415,8 @@ export class InputController {
         for (const selection of this.view.model.getSelections()) {
             this.view.ensureVisible(selection.head);
         }
-        if (PAIR_CHARACTER.test(text)) {
+        // Every key goes through the model, which decides by the key before it too, as for the arrow of PHP.
+        if (text.length === 1) {
             this.view.model.typeText(text, { ...this.commandOptions(), historyGroup: this.inputGroup() });
             this.view.revealCaret();
         } else {

package/src/editor.css

@@ -8,7 +8,7 @@
     --find-current-text: var(--text);
     --editor-selection: color-mix(in srgb, var(--accent) 16%, transparent);
     --editor-occurrence: color-mix(in srgb, var(--text) 7%, transparent);
-    --editor-guide: color-mix(in srgb, var(--text) 8%, transparent);
+    --editor-guide: color-mix(in srgb, var(--text) 5%, transparent);
     --editor-guide-active: color-mix(in srgb, var(--text) 24%, transparent);
     --editor-margin: color-mix(in srgb, var(--text) 14%, transparent);
     --editor-whitespace: color-mix(in srgb, var(--text) 30%, transparent);
@@ -29,7 +29,7 @@
     --find-match: color-mix(in srgb, var(--status-needs-you) 24%, transparent);
     --editor-selection: color-mix(in srgb, var(--accent) 28%, transparent);
     --editor-occurrence: color-mix(in srgb, var(--text) 9%, transparent);
-    --editor-guide: color-mix(in srgb, var(--text) 10%, transparent);
+    --editor-guide: color-mix(in srgb, var(--text) 6%, transparent);
     --editor-guide-active: color-mix(in srgb, var(--text) 28%, transparent);
     --editor-margin: color-mix(in srgb, var(--text) 16%, transparent);
     --editor-whitespace: color-mix(in srgb, var(--text) 32%, transparent);
@@ -728,13 +728,15 @@
 
 /*
  * A code vision row is quiet text one code line high above a declaration, in the declaration's
- * indentation. Its entries stand a text size apart and light up as a link under the pointer.
+ * indentation, a step below the code as the platform draws it. Its entries stand a text size apart
+ * and light up as a link under the pointer.
  */
 .se-block.se-lens {
     display: flex;
     align-items: center;
     gap: var(--text-xs);
     padding: 0;
+    font-size: max(12px, calc(var(--code-font-size, 13px) - 2px));
     white-space: nowrap;
 }
 .se-lens-entry {

package/src/engine.ts

@@ -676,11 +676,19 @@ class SmartEditor implements Editor {
                           to: this.offsetAt(symbol.range.end),
                           body: symbol.body
                       })),
-                      ranges: (hints.ranges ?? []).map((range) => ({
-                          from: this.model.getLine(Math.min(range.startLine, this.model.getLineCount() - 1)).start,
-                          to: this.model.getLine(Math.min(range.endLine, this.model.getLineCount() - 1)).start,
-                          ...(range.kind === undefined ? {} : { kind: range.kind })
-                      }))
+                      ranges: (hints.ranges ?? []).map((range) => {
+                          const first = this.model.getLine(Math.min(range.startLine, this.model.getLineCount() - 1));
+                          const last = this.model.getLine(Math.min(range.endLine, this.model.getLineCount() - 1));
+                          const within = (line: { start: number; end: number }, character: number): number =>
+                              Math.min(line.end, line.start + Math.max(0, character));
+                          return {
+                              from: first.start,
+                              to: last.start,
+                              ...(range.kind === undefined ? {} : { kind: range.kind }),
+                              ...(range.startCharacter === undefined ? {} : { head: within(first, range.startCharacter) }),
+                              ...(range.endCharacter === undefined ? {} : { tail: within(last, range.endCharacter) })
+                          };
+                      })
                   }
         );
     }

package/src/index.ts

@@ -20,6 +20,7 @@ export type {
     EditorEngine,
     EditorFindQuery,
     EditorFoldHints,
+    EditorFoldRangeHint,
     EditorFoldOutline,
     EditorFoldRange,
     EditorFoldSymbol,

package/src/layout.ts

@@ -49,6 +49,8 @@ export interface FoldState {
     collapsed: boolean;
     /* Where the closing delimiter starts on `endLine`; a collapsed fold keeps it drawn after its placeholder. */
     closer?: number;
+    /* Where a collapsed fold starts hiding on `startLine`; without it the whole first line stays drawn. */
+    head?: number;
 }
 
 interface RowBase {
@@ -66,6 +68,8 @@ export interface TextRow extends RowBase {
     lastLine: number;
     /* The offset on `lastLine` from which a collapsed fold draws what stays visible after its placeholder. */
     tail: number | null;
+    /* The offset on `line` up to which a collapsed fold draws its first line; null when it draws the whole line. */
+    head: number | null;
     /* Visual lines, which is more than one for a wrapped line. */
     subRows: number;
 }
@@ -429,6 +433,7 @@ export class EditorLayout {
             const fold = folds.get(line);
             const last = Math.max(line, Math.min(count - 1, fold?.endLine ?? line));
             const tail = fold?.closer !== undefined && last > line ? this.tailOf(fold.closer, last) : null;
+            const head = fold?.head !== undefined && last > line ? this.tailOf(fold.head, line) : null;
             const index = this.rows.length;
             const bounds = this.wrapWidth === null ? null : this.document.getLine(line);
             const subRows = this.rowCountOf(line, bounds === null ? 0 : bounds.end - bounds.start);
@@ -439,6 +444,7 @@ export class EditorLayout {
                 line,
                 lastLine: last,
                 tail,
+                head,
                 subRows,
                 top: 0,
                 height: subRows * this.metrics.lineHeight
@@ -454,7 +460,7 @@ export class EditorLayout {
         this.reflow();
     }
 
-    /* The closer a fold ends in, clamped to its last line since the fold may be a moment older than an edit. */
+    /* An offset of a fold clamped to its line, since the fold may be a moment older than an edit. */
     private tailOf(closer: number, line: number): number {
         const bounds = this.document.getLine(line);
         return Math.min(bounds.end, Math.max(bounds.start, closer));
@@ -541,6 +547,13 @@ export class EditorLayout {
         return row.kind === 'text' && line > row.line && line <= row.lastLine;
     }
 
+    /* Whether a fold hides the offset: on a line it hides, or past where it starts on its first line. */
+    hides(offset: number): boolean {
+        const line = this.document.positionAt(offset).line;
+        const row = this.rowForLine(line);
+        return row.kind === 'text' && (this.isHidden(line) || (row.head !== null && line === row.line && offset > row.head));
+    }
+
     visibleRows(top: number, height: number, overscan = 120): LayoutRow[] {
         const result: LayoutRow[] = [];
         for (let index = this.rowAt(top - overscan).index; index < this.rows.length && this.rows[index]!.top < top + height + overscan; index++) {
@@ -550,6 +563,17 @@ export class EditorLayout {
     }
 
     geometry(row: TextRow): LineGeometry {
+        if (row.head !== null) {
+            // The first line of a fold that starts within it, laid out up to there; seldom drawn, so never kept.
+            const line = this.document.getLine(row.line);
+            const shown = { ...line, end: row.head, text: line.text.slice(0, row.head - line.start) };
+            return scanLine(
+                shown,
+                this.metrics,
+                this.wrapWidth,
+                (this.inlaysByLine.get(row.line) ?? []).filter((inlay) => inlay.at <= row.head!)
+            );
+        }
         const cached = this.geometryCache.get(row.line);
         if (cached) {
             return cached;

package/src/smart-keys.ts

@@ -8,6 +8,7 @@ export const DEFAULT_SMART_KEYS: EditorSmartKeys = {
     smartIndentOnEnter: true,
     indentOnPaste: true,
     smartSemicolon: true,
+    smartArrow: true,
     camelHumps: false
 };
 

package/src/types.ts

@@ -103,6 +103,8 @@ export interface EditorSmartKeys {
     readonly indentOnPaste: boolean;
     /* A `;` typed inside a call goes to the end of the statement. */
     readonly smartSemicolon: boolean;
+    /* In PHP a `-` typed after a variable, a member or a `)` or `]` becomes `->`. */
+    readonly smartArrow: boolean;
     /* Moving by word also stops inside `camelCase` and `snake_case` words. Off. */
     readonly camelHumps: boolean;
 }
@@ -114,9 +116,16 @@ export interface EditorFoldSymbol {
     readonly body: 'function' | 'method' | 'class' | 'value';
 }
 
+/* A range a server folds; with characters, a collapsed fold hides from `startCharacter` on its first line up to `endCharacter` on its last, as LSP says. */
+export interface EditorFoldRangeHint extends EditorFoldRange {
+    readonly kind?: string;
+    readonly startCharacter?: number;
+    readonly endCharacter?: number;
+}
+
 export interface EditorFoldHints {
     readonly symbols?: readonly EditorFoldSymbol[];
-    readonly ranges?: readonly (EditorFoldRange & { readonly kind?: string })[];
+    readonly ranges?: readonly EditorFoldRangeHint[];
 }
 
 /* A part of the document with a header line, such as a function, a class or a method. */

package/src/view.ts

@@ -570,7 +570,14 @@ export class EditorView {
                     this.foldHints = {
                         symbols:
                             this.foldHints.symbols?.map((hint) => ({ ...hint, from: mapOffset(hint.from, changes), to: mapOffset(hint.to, changes) })) ?? [],
-                        ranges: this.foldHints.ranges?.map((hint) => ({ ...hint, from: mapOffset(hint.from, changes), to: mapOffset(hint.to, changes) })) ?? []
+                        ranges:
+                            this.foldHints.ranges?.map((hint) => ({
+                                ...hint,
+                                from: mapOffset(hint.from, changes),
+                                to: mapOffset(hint.to, changes),
+                                ...(hint.head === undefined ? {} : { head: mapOffset(hint.head, changes) }),
+                                ...(hint.tail === undefined ? {} : { tail: mapOffset(hint.tail, changes) })
+                            })) ?? []
                     };
                 }
                 this.customFolds = this.customFolds.map((fold) => ({ from: mapOffset(fold.from, changes), to: mapOffset(fold.to, changes) }));
@@ -723,12 +730,16 @@ export class EditorView {
     }
 
     private foldStates(): FoldState[] {
-        return this.foldRanges.map((range) => ({
-            startLine: range.startLine,
-            endLine: range.endLine,
-            collapsed: this.collapsed.has(range.from),
-            closer: this.collapsed.has(range.from) ? this.closerOf(range) : undefined
-        }));
+        return this.foldRanges.map((range) => {
+            const collapsed = this.collapsed.has(range.from);
+            return {
+                startLine: range.startLine,
+                endLine: range.endLine,
+                collapsed,
+                closer: collapsed ? (range.tail ?? this.closerOf(range)) : undefined,
+                ...(collapsed && range.head !== undefined ? { head: range.head } : {})
+            };
+        });
     }
 
     /* The folds of the document, a moment after the last edit since they read all of it. */
@@ -1046,14 +1057,14 @@ export class EditorView {
         this.render();
     }
 
-    /* A caret in a line a fold hides would be typing where nobody can see. */
+    /* A caret in what a fold hides would be typing where nobody can see; it goes to where the fold's first line stops. */
     private moveHiddenCarets(): void {
         const visible = (offset: number): number => {
-            const line = this.model.positionAt(offset).line;
-            if (!this.layout.isHidden(line)) {
+            if (!this.layout.hides(offset)) {
                 return offset;
             }
-            return this.model.getLine(this.layout.rowForLine(line).line).end;
+            const row = this.layout.rowForLine(this.model.positionAt(offset).line);
+            return row.kind === 'text' && row.head !== null ? row.head : this.model.getLine(row.line).end;
         };
         const selections = this.model.getSelections();
         const moved = selections.map((selection) => ({ anchor: visible(selection.anchor), head: visible(selection.head) }));
@@ -1065,11 +1076,11 @@ export class EditorView {
     /* Opens the folds that hide an offset, so a caret or a search result is where it can be seen. */
     ensureVisible(offset: number): void {
         const line = this.model.positionAt(offset).line;
-        if (!this.layout.isHidden(line)) {
+        if (!this.layout.hides(offset)) {
             return;
         }
         for (const range of this.foldRanges) {
-            if (range.startLine < line && range.endLine >= line) {
+            if ((range.startLine < line && range.endLine >= line) || (range.startLine === line && range.head !== undefined && offset > range.head)) {
                 this.collapsed.delete(range.from);
                 this.settled.add(range.from);
             }
@@ -1375,11 +1386,25 @@ export class EditorView {
         return { column, first, last };
     }
 
-    /* A line at each indentation level of the rows on screen, joined where the lines go on, and the one of the scope around the caret apart. */
+    /* The line and the indentation column of a caret in the whitespace that leads its line, past the first column, where it can stand on a guide. */
+    private caretOnGuide(): { line: number; column: number } | null {
+        const position = this.model.positionAt(this.model.getPrimary().head);
+        const lead = this.model.getLine(position.line).text.slice(0, position.column);
+        if (position.column === 0 || !/^[\t ]*$/.test(lead)) {
+            return null;
+        }
+        return { line: position.line, column: indentationColumn(lead, this.settings.tabSize) };
+    }
+
+    /*
+     * A line at each indentation level of the rows on screen, joined where the lines go on. Apart from them stand the one
+     * of the scope around the caret, and as the platform does, the one the caret stands on.
+     */
     private guideRects(rows: readonly LayoutRow[]): { plain: LayoutRect[]; active: LayoutRect[] } {
         const size = this.settings.tabSize;
         const charWidth = this.layout.metrics.charWidth;
         const active = this.activeGuide();
+        const caret = this.caretOnGuide();
         const plain: LayoutRect[] = [];
         const marked: LayoutRect[] = [];
         interface Open {
@@ -1393,7 +1418,9 @@ export class EditorView {
             const segment = open.get(column)!;
             open.delete(column);
             const rect = { x: column * charWidth, y: segment.top, width: 1, height: segment.bottom - segment.top };
-            (active !== null && active.column === column && segment.last >= active.first && segment.first <= active.last ? marked : plain).push(rect);
+            const scope = active !== null && active.column === column && segment.last >= active.first && segment.first <= active.last;
+            const under = caret !== null && caret.column === column && segment.first <= caret.line && caret.line <= segment.last;
+            (scope || under ? marked : plain).push(rect);
         };
         for (const row of rows) {
             if (row.kind !== 'text') {