@adecore/editor 0.17.0-beta.1 → 0.17.0

package/LICENSE

@@ -6,7 +6,7 @@ FSL-1.1-MIT
 
 ## Notice
 
-Copyright 2026 Bas Milius
+Copyright 2026 - present Bas Milius
 
 ## Terms and Conditions
 

package/README.md

@@ -1,82 +1,57 @@
 # @adecore/editor
 
-Read the [browser editor handbook](https://adecore.dev/editor/handbook/) for the complete setup, concepts, host integration and testing guides.
+[![npm](https://img.shields.io/npm/v/@adecore/editor)](https://www.npmjs.com/package/@adecore/editor)
+[![Docs](https://img.shields.io/badge/docs-adecore.dev-blue)](https://adecore.dev/editor/)
 
-The DOM view of the smart editor. It draws a `DocumentModel` from `@adecore/editor-core` with its own layout and implements the `EditorEngine` contract. Language features live in `@adecore/editor-react`; the engine itself needs no language service.
+A code editor for the DOM. It draws a [`DocumentModel`](https://adecore.dev/editor-core/) with a layout of its own, renders only the rows in view, and takes the decorations, rows and marks a host hands it: problems, inlay hints, semantic colors, change marks, widgets between lines, code vision, agent attribution and ghost text. It knows no language server; [`@adecore/editor-react`](https://adecore.dev/editor-react/) adds one.
 
-```ts
-const engine = createSmartEditorEngine({
-    tokenizer: shikiTokenizers(() => highlighter),
-    handBack: shellShortcuts,
-    apple
-});
-const editor = engine.mount(element, { text, language: 'typescript', theme: 'github-dark' });
-```
-
-Import `@adecore/ui/theme.css`, then `@adecore/editor/editor.css`. The element needs a positioned box sized by its parent. Editor, find, change and attribution colors have defaults on Adecore theme tokens. The code face uses `--font-mono`, `--code-font-size` and `--code-line-height`; the latter two default to `--text-code` and `--text-code--line-height`. Override them after the editor CSS, and call `refreshFont()` when they change.
-
-## How it is put together
-
-- `layout.ts`: the rows of the document, free of the DOM. A row is a line, a widget or a fold's first line. It owns wrapping into visual lines, tab stops, inlays, folded lines, caret and selection boxes, hit testing and moving by visual line. Only the rows on screen are measured; the others stand on an estimate that the first draw corrects.
-- `view.ts`: the DOM, the scroll (native: the gutter and the pinned headers stick to the corner of the one scroll container, and the scroll event draws the rows, a viewport of them on each side, in the frame it shows in), the folds and what is drawn behind and above the text. `paint.ts` holds the drawing of rows, the gutter, the selection and the carets. Rows are absolutely placed runs of text, so the layout decides where each character is. A draw reads the viewport's scroll position and size once at its start, since a read after the first write of a frame makes the browser lay the page out again, and a host setter whose value did not change draws nothing. The horizontal scroll extent is the widest line measured since the text last changed, inlays included, plus three columns as on the platform; a host row follows the scroll and clips what it draws past its width, since an overflow there would grow the extent with every scroll and carry the sticky gutter out of view.
-- `controller.ts`: what a person does. Keys come from one table (`keymap-table.ts`, which the client prints in its menus as well) and are mapped in `keymap.ts` to the model's commands, typing goes through `DocumentModel.typeText`, a paste through `DocumentModel.paste`, the mouse through `pointer.ts`. A copy or cut of a bare caret remembers its text for every editor of the page, and pasting that same text again, in any of them, lands as whole lines. Adding a caret above or below is the double tap of a modifier and an arrow (`modifier-gesture.ts`). The smart keys (`EditorSmartKeys`: pairing, surrounding, tabbing out, smart Enter, indent on paste, the smart semicolon and the camel humps) are options of the editor, set at mounting and changed with `setSmartKeys`; all are on except the camel humps. The textarea (`native-input.ts`) is only the sink for the platform's typing, composition and paste, and carries the text around the caret for assistive technology.
-- `tokens.ts` and `shiki.ts`: coloring. A grammar needs the state the previous line ended in, so lines are colored from a frontier down, a slice at a time, on the screen plus a margin. An edit moves the frontier to the changed line and stops as soon as a line ends in the state it had before. The tokenizer is injected (`TokenizerSource`); `shikiTokenizers` adapts the viewer's Shiki highlighter. It loads the languages a grammar embeds only on demand (a style block's `lang="scss"`, a Markdown fence) when the document names them, since Shiki rebuilds the host grammar when one loads later, and a tokenizer says so with `stale` so the colors start over from the top. A language added to a document after it opened (a new fence) is colored once the file opens again. `php-html.ts` is the grammar for a PHP file as a document (HTML with PHP between its tags), which Shiki does not bundle; PHP inside an HTML attribute is not colored.
-- `outline.ts`: the blocks of the document with a header line, read from braces and indentation until the host hands over better ones with `setBlocks` (a language server's symbols). Sticky scroll pins the headers of the blocks scrolled out of sight, and `onScope` reports the named blocks around the caret for a breadcrumb.
-- `overview.ts`: the ticks in the scroll track for the host's change marks (`setChangeMarks`, also drawn in the gutter) and the find matches.
-- `find.ts`: the matches of the host's find bar. They are marked in the editor and never touch the selection until `endFind`.
-- `semantic.ts` and `theme-scopes.ts`: what a language server classified, drawn over the grammar's colors. The host hands scopes (`setSemanticTokens`), and the theme's own rules decide the color (`scopeColors`, `shikiScopeColors`), so a class is the theme's class color. A scope the theme says nothing about keeps what the grammar made.
-- `scroll.ts` and `scroll-animation.ts`: where a scroll goes (the platform's scrolling model: margins, and a jump a third from the top) and how it gets there, over up to a tenth of a second and never for a line or less.
-- `keymap-table.ts`: the keys of every editor and language command for macOS and the other platforms, which the client prints in its menus too (`@adecore/editor/keymap`).
-- `engine.ts`: the `Editor` contract over a model and a view.
-
-## What a language feature gets
-
-The editor knows no language server. It reports every change of the text as LSP content changes (`onTextChange`, with its source), says where the caret is (`getCaret`, `onCaret`) and where a character is on the screen (`rectAt`, in the page's pixels so a popup is right at any canvas zoom), and takes what a host draws or does: `setMarkers` (squiggles, faded and struck text, a lane in the scroll track), `setInlayHints`, `setSemanticTokens`, `setHighlights`, `setBlocks`, `setWidgets` (rows of the host's own DOM next to lines, drawn in the layout's block rows; `placement: 'above'` puts one over its line, and each owner has its own set, see below), `setCodeVision` (a quiet row above a declaration, see below), `setGhostText` (a suggestion after the caret, see below), `setGutterAction` (one button in the gutter, such as a lightbulb, which `onGutterAction` reports), `setGutterMarkers` (small buttons in the gutter per owner, such as the mark of a saved inline edit, which `onGutterMarker` reports by id; a marker stays on its line until its owner sets them again), `setLink` (a name underlined as a link while a modifier is held) `trackRange` (a range that follows the text through edits and reads null once an edit touched it, inside or across an end; text inserted exactly at an end does not count, so a range that was a selection still holds the same text) and `applyEdits`. A marker's `message` is what the tick of the problem says in the scroll track, where a press on the tick goes to the problem. `getSelection`, `getSelections`, `setSelections` (the last range is the primary one), `getVisibleRange` and `getIndentation` say what a feature asks about, and `setSelection` selects a range, such as the stop of a snippet. `onHover` reports the character under the pointer, `onClick` offers a press on a character first (Mod+click follows a name) and `onContextMenu` asks the host for its menu, which the editor does not draw, `onKeyDown` lets a host take a key before the editor does, and `onViewChange` says when the screen position of a character moved.
-
-`setText` applies the difference as a line diff in one batch (`changedSpans`), one undo step reported as an external change, so a reload from disk or a sync between two editors on a file keeps the scroll, carets, folds, markers, inlays and code vision rows wherever the text around them stayed. A language server hears it as the one stretch from the first change to the last.
-
-`runCommand` runs an editing command by name, which is how a menu or the palette reaches the editor; the folding commands (collapse and expand a region, all, recursively, a selection, documentation comments and "expand all to level 1 through 5") and column mode are the view's own.
-
-A collapsed fold is one row for the line commands, as the platform has it: delete, duplicate, comment, move and a copy or cut with no selection take the whole fold (a moved fold stays collapsed on its new lines), a word move steps over it and add caret above and below skips it. The view hands the commands its rows through `lineSpan`.
+**[Documentation with live demos](https://adecore.dev/editor/)**
 
-Folds are kept by line (`getFolds`, and `folds` on mounting), the way scroll and caret are. A fold has a role (the file header, imports, documentation comments, regions, the body of a function, a method or a class, object and array literals, tags, attributes and so on, `FoldRole` of the core), and `foldDefaults` on mounting lists the roles that fold by themselves in a file that has no folds of its own. `setFoldHints` hands over a language server's symbols and folding ranges, which name the bodies and tags the text cannot, and the defaults fold what they name once: not a fold somebody opened or closed, not one that holds the caret, and nothing after the first edit. `foldOutline` (`off`, `hover` or `always`) says when the arrow shows in the gutter. Indent guides, whitespace and a right margin are options and setters (`guides`, `whitespace`, `rightMargin`). The find takes `inSelection`, `selectFindMatches` puts a caret on every match, `setReplacePreview` draws what a regular expression writes under the current match, and `findFromCursor` steps without a find bar.
+## Install
 
-`handBack` shortcuts are not handled by the editor and not prevented, so the page's own listeners get them. Mod+S is `onSave`.
-
-## Agent marks
-
-`setAttributionMarks` draws a three pixel bar in the gutter, where the change marks are, for each run of lines (`id`, one-based `startLine` and `endLine`, `color`). The color is a custom property of the page (`--agent-1` to `--agent-6`, `AGENT_COLORS`, defined in `editor.css` for both themes, with `--agent-ink` for text on them) or any CSS color. On a line that has both, the bar stands in the place of the git change mark, which the scroll track still shows; a removal triangle between lines stays. A run follows its text through edits until the host sets the marks again, and an edit costs one mapping of two offsets per run, so thousands of runs stay smooth. `onAttributionHover` reports the id and the bar's box on the line under the pointer (a few pixels either side of the bar count), and null when it leaves.
-
-`setRemoteCursors` draws the caret of an agent (`id`, `position`, `name`, `color`, the same colors) over the text, two pixels wide with its name in a label above it, the label's lower left corner square. Where there is no room above the caret (the first line, or under the pinned headers) the name goes under it. It follows its text through edits until set again, is not interactive, and is left out on a line a fold hides. The editor's own caret and selection never move for it.
-
-## Review and conflict rows
-
-`setLineHighlights` tints lines behind the text (`startLine` and `endLine` one-based, a `color`, an optional `sign` such as `+` in the gutter beside the number, an optional `fill` that paints the rows as it stands instead of the 14% tint of the color), one box per row so a widget row between two tinted lines stays clear. It follows its text through edits like the marks do. `renderCode(container, text, options)` fills a widget row's element with lines that are not in the document, such as the lines an agent removed or the other side of a conflict, in the editor's face and token colors, with a gutter column as wide as the editor's, so the text lines up with the document's (`firstLine` for numbers, `sign`, `color` for the tint and the bar, `emphasis` for character ranges per line drawn in a stronger tint, such as the words a change replaced, and `faded` for text that is gone). Both take the same colors as the attribution marks. A widget has `placement: 'above'` for a row over its line. `setLineActions(actions, owner?)` puts the host's own DOM after the last character of a line (`id`, zero-based `line`, `render(container)` once per action), such as the buttons of a change under review. It is no row: it takes no height, follows its line through edits, is hidden where a fold hides the line, and a press on it never moves the caret. A long line with no wrap pushes it past the edge of the view.
-
-## Widgets per owner
+```sh
+bun add @adecore/editor
+```
 
-`setWidgets(widgets, owner?)` replaces the rows of one owner, `default` without one, and leaves every other owner's alone, so a peek, the review rows of an agent's change and a conflict stand together. Rows next to the same line are ordered by their owners' names and then in the order each owner gave them, not by who set them last, so they never swap places. An empty list takes the owner's rows away.
+## Set up
 
-## Code vision rows
+```css
+@import '@adecore/ui/theme.css';
+@import '@adecore/editor/editor.css';
+```
 
-`setCodeVision` takes a row per declaration: the line, and the entries of the row (`id`, `text`, an optional `user` or `users` icon, and `activate`, which gets the box of the pressed entry in the page's pixels). The row is a block row above the line (`lens` on a `BlockWidget`, `lens.ts` for its buttons), one code line high whatever its entries are, placed at the indentation of the declaration and never measured, so it holds its height with no entries and the text does not move when they arrive. It follows its declaration through edits like every block does, is kept apart from `setWidgets` (a peek under a name never takes a row away), and is drawn again only when the words of its entries change. An entry stands a text size from the next one, is muted, and lights up as a link with an underline under the pointer; a press on it never moves the caret or takes the focus.
+```ts
+import { createSmartEditorEngine, shikiTokenizers } from '@adecore/editor';
 
-## Ghost text
+const engine = createSmartEditorEngine({ tokenizer: shikiTokenizers(getHighlighter) });
+const editor = engine.mount(element, { text, language: 'typescript', theme: 'github-light' });
+```
 
-`setGhostText({ position, text, accessory? })` draws a suggestion after the caret that is not in the document, such as a continuation from a model, and `null` takes it away. The first line of `text` sits in the line in the code face and the editor's faint color, italic, and the caret stays in front of it. Further lines are a row under the line, in the same color and with the gutter column of the document, so the lines below move down while it is shown. `accessory` fills an element drawn after the end of the line, such as the keys that take the suggestion. The editor never accepts it: the host binds the keys (Tab, `acceptGhostWord`) and inserts the text with `applyEdits`, which is one undo step. Any change of the text takes the suggestion away, so the host sets it again for the text it was made for; moving the caret does not, and the host decides what that means.
+The element needs a position and a size from its parent.
 
-## Limits
+## Entry points
 
-- No rendered documentation blocks.
-- Wrapped lines break at spaces and inside a word that does not fit, and continue at the line's indentation plus two characters. A click past the end of a visual line draws the caret at its end until the caret moves; an arrow key onto that offset draws it at the start of the next line.
-- A line over 20,000 characters is not colored.
-- Every edit rebuilds the row list, which is linear in the number of lines.
-- No bidirectional text, and no screen reader testing beyond the textarea's own context.
+| Import | What it holds |
+|---|---|
+| `@adecore/editor` | `createSmartEditorEngine`, the `Editor` contract and its types, the Shiki adapters |
+| `@adecore/editor/editor.css` | The styles |
+| `@adecore/editor/shiki` | The Shiki adapters and grammar loading |
+| `@adecore/editor/keymap` | The key table, `resolveKeymap`, `chordOf` and `parseChord` |
+| `@adecore/editor/fake` | `FakeEditorEngine`, for tests of host code |
+| `@adecore/editor/testing` | `mountEditor` on a LinkeDOM page |
 
-## Keymaps and package exports
+## Documentation
 
-`@adecore/editor/keymap` exports `KEYMAP`, `resolveKeymap`, `chordOf` and `parseChord`. Pass the same resolved keymap and `apple` flag to the engine and to `ProjectLanguage` so editor keys, language commands and menu hints agree. Application collisions belong in host overrides. AI commands have no universal bindings. `handBack` remains the host's global shortcut list.
+| Page | What it covers |
+|---|---|
+| [Getting started](https://adecore.dev/editor/getting-started) | Install, styles, mounting and the engine options |
+| [Options and keymaps](https://adecore.dev/editor/options) | Every option and setter, smart keys and the key table |
+| [Text and events](https://adecore.dev/editor/editing) | Positions, edits, selections, events and tracked ranges |
+| [Decorations](https://adecore.dev/editor/decorations), [Rows and widgets](https://adecore.dev/editor/rows), [Agents](https://adecore.dev/editor/agents) | What a host draws into the editor |
+| [Find and folding](https://adecore.dev/editor/find-folding) | The find matcher, folds and sticky scroll |
+| [Theme and syntax](https://adecore.dev/editor/theme) | CSS tokens, Shiki and a tokenizer of your own |
+| [Testing](https://adecore.dev/editor/testing) | `mountEditor` and `FakeEditorEngine` |
 
-The root exports the engine and its types. `/shiki` supplies the Shiki adapter, `/fake` supplies the DOM-free `FakeEditorEngine`, and `/testing` supplies DOM fixtures backed by LinkeDOM. `/editor.css` supplies the required editor chrome.
+## License
 
-This unpublished package is private at version `0.0.0` and retains FSL-1.1-MIT. Source consumers enable the `source` condition in the bundler, TypeScript and Bun. Default exports use compiled JavaScript and declarations. Run `bun run build`, `bun run typecheck` and `bun run test` from this package after workspace installation. See the editor migration guide for consumer adapters and the transferred revision.
+FSL-1.1-MIT

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

@@ -5,6 +5,7 @@ import { emit, subscribe } from './listeners.js';
 import { fillLens, lensSignature } from './lens.js';
 import { EditorView } from './view.js';
 const DEFAULT_TAB_SIZE = 4;
+const DEFAULT_LABEL = 'Code editor';
 const DEFAULT_WIDGET_OWNER = 'default';
 class SmartEditor {
     model;
@@ -41,6 +42,7 @@ class SmartEditor {
             wrap: options.wrap ?? false,
             smartKeys: resolveSmartKeys(options.smartKeys),
             messages: options.messages ?? {},
+            label: options.label ?? DEFAULT_LABEL,
             guides: options.guides !== false,
             whitespace: options.whitespace === true,
             rightMargin: options.rightMargin ?? null,
@@ -522,6 +524,10 @@ class SmartEditor {
         this.settings.foldOutline = outline;
         this.view.applySettings();
     }
+    setLabel(label) {
+        this.settings.label = label;
+        this.view.applySettings();
+    }
     setFoldHints(hints) {
         this.view.setFoldHints(hints === null
             ? null
@@ -531,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/fake.d.ts

@@ -111,6 +111,8 @@ export declare class FakeEditor implements Editor {
     foldOutline: EditorFoldOutline;
     foldHints: EditorFoldHints | null;
     setFoldOutline(outline: EditorFoldOutline): void;
+    label: string;
+    setLabel(label: string): void;
     setFoldHints(hints: EditorFoldHints | null): void;
     setSmartKeys(keys: Partial<EditorSmartKeys>): void;
     setIndentation(indentation: EditorIndentation): void;

package/dist/fake.js

@@ -43,6 +43,7 @@ export class FakeEditor {
         this.theme = options.theme;
         this.readOnly = options.readOnly ?? false;
         this.readOnlyReason = options.readOnlyReason;
+        this.label = options.label ?? 'Code editor';
         this.revealedLine = options.line ?? null;
         this.column = options.column ?? null;
         this.scrollTop = options.scrollTop ?? null;
@@ -372,6 +373,10 @@ export class FakeEditor {
     setFoldOutline(outline) {
         this.foldOutline = outline;
     }
+    label;
+    setLabel(label) {
+        this.label = label;
+    }
     setFoldHints(hints) {
         this.foldHints = hints;
     }

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

@@ -28,6 +28,7 @@ export interface EditorOptions {
     readonly rightMargin?: number | null;
     readonly foldOutline?: EditorFoldOutline;
     readonly messages?: Partial<EditorMessages>;
+    readonly label?: string;
     readonly folds?: EditorFolds;
     readonly foldDefaults?: readonly FoldRole[];
     readonly line?: number;
@@ -45,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;
@@ -258,6 +263,7 @@ export interface Editor {
     setWhitespace(whitespace: boolean): void;
     setRightMargin(column: number | null): void;
     setFoldOutline(outline: EditorFoldOutline): void;
+    setLabel(label: string): void;
     setFoldHints(hints: EditorFoldHints | null): void;
     setChangeMarks(marks: readonly EditorChangeMark[]): void;
     setBlocks(blocks: readonly EditorBlock[] | null): void;

package/dist/view.d.ts

@@ -13,6 +13,7 @@ export interface ViewSettings {
     wrap: boolean;
     smartKeys: EditorSmartKeys;
     messages: Partial<EditorMessages>;
+    label: string;
     guides: boolean;
     whitespace: boolean;
     rightMargin: number | null;
@@ -275,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

@@ -208,7 +208,6 @@ export class EditorView {
             this.input.setAttribute(name, 'off');
         }
         this.input.setAttribute('aria-multiline', 'true');
-        this.input.setAttribute('aria-label', 'Code editor');
         this.sticky.setAttribute('aria-hidden', 'true');
         this.sticky.hidden = true;
         this.overview = make('div', 'se-overview');
@@ -252,6 +251,7 @@ export class EditorView {
     /* Settings that are read off the page or off `settings` are applied again: after a change to either. */
     applySettings() {
         this.input.readOnly = this.settings.readOnly;
+        this.input.setAttribute('aria-label', this.settings.label);
         this.root.dataset.readonly = String(this.settings.readOnly);
         this.root.dataset.wrap = String(this.settings.wrap);
         this.root.dataset.foldOutline = this.settings.foldOutline;
@@ -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.1",
+  "version": "0.17.0",
   "type": "module",
   "exports": {
     ".": {
@@ -39,7 +39,7 @@
     "test": "bun test --conditions=source"
   },
   "dependencies": {
-    "@adecore/editor-core": "0.17.0-beta.1",
+    "@adecore/editor-core": "0.17.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

@@ -51,6 +51,7 @@ import { fillLens, lensSignature } from './lens.ts';
 import { EditorView, type ViewSettings } from './view.ts';
 
 const DEFAULT_TAB_SIZE = 4;
+const DEFAULT_LABEL = 'Code editor';
 const DEFAULT_WIDGET_OWNER = 'default';
 
 class SmartEditor implements Editor {
@@ -90,6 +91,7 @@ class SmartEditor implements Editor {
             wrap: options.wrap ?? false,
             smartKeys: resolveSmartKeys(options.smartKeys),
             messages: options.messages ?? {},
+            label: options.label ?? DEFAULT_LABEL,
             guides: options.guides !== false,
             whitespace: options.whitespace === true,
             rightMargin: options.rightMargin ?? null,
@@ -659,6 +661,11 @@ class SmartEditor implements Editor {
         this.view.applySettings();
     }
 
+    setLabel(label: string): void {
+        this.settings.label = label;
+        this.view.applySettings();
+    }
+
     setFoldHints(hints: EditorFoldHints | null): void {
         this.view.setFoldHints(
             hints === null
@@ -669,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/fake.ts

@@ -91,6 +91,7 @@ export class FakeEditor implements Editor {
         this.theme = options.theme;
         this.readOnly = options.readOnly ?? false;
         this.readOnlyReason = options.readOnlyReason;
+        this.label = options.label ?? 'Code editor';
         this.revealedLine = options.line ?? null;
         this.column = options.column ?? null;
         this.scrollTop = options.scrollTop ?? null;
@@ -487,6 +488,12 @@ export class FakeEditor implements Editor {
         this.foldOutline = outline;
     }
 
+    label: string;
+
+    setLabel(label: string): void {
+        this.label = label;
+    }
+
     setFoldHints(hints: EditorFoldHints | null): void {
         this.foldHints = hints;
     }

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

@@ -68,6 +68,8 @@ export interface EditorOptions {
     readonly foldOutline?: EditorFoldOutline;
     /* What the editor says to a person itself, in the host's words. */
     readonly messages?: Partial<EditorMessages>;
+    /* The accessible name of the editor, such as "Commit message", in the host's language; `Code editor` without one. */
+    readonly label?: string;
     /* The folds a host kept when the file was last open. */
     readonly folds?: EditorFolds;
     /* Without remembered folds, the folds of these roles fold, as they do the first time a file opens, and again as a language server names more of them. */
@@ -101,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;
 }
@@ -112,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. */
@@ -491,6 +502,7 @@ export interface Editor {
     /* The column to draw a line at; null takes it away. */
     setRightMargin(column: number | null): void;
     setFoldOutline(outline: EditorFoldOutline): void;
+    setLabel(label: string): void;
     /* What a language server knows about the folds: the bodies of symbols and the ranges it folds. They follow their text through edits until set again; null forgets them. */
     setFoldHints(hints: EditorFoldHints | null): void;
     /* Marks that follow their lines through edits until the host sets them again. */

package/src/view.ts

@@ -67,6 +67,7 @@ export interface ViewSettings {
     wrap: boolean;
     smartKeys: EditorSmartKeys;
     messages: Partial<EditorMessages>;
+    label: string;
     /* A line at each indentation level, and the one of the scope around the caret stronger. */
     guides: boolean;
     /* Spaces drawn as dots and tabs as arrows. */
@@ -299,7 +300,6 @@ export class EditorView {
             this.input.setAttribute(name, 'off');
         }
         this.input.setAttribute('aria-multiline', 'true');
-        this.input.setAttribute('aria-label', 'Code editor');
         this.sticky.setAttribute('aria-hidden', 'true');
         this.sticky.hidden = true;
         this.overview = make('div', 'se-overview');
@@ -345,6 +345,7 @@ export class EditorView {
     /* Settings that are read off the page or off `settings` are applied again: after a change to either. */
     applySettings(): void {
         this.input.readOnly = this.settings.readOnly;
+        this.input.setAttribute('aria-label', this.settings.label);
         this.root.dataset.readonly = String(this.settings.readOnly);
         this.root.dataset.wrap = String(this.settings.wrap);
         this.root.dataset.foldOutline = this.settings.foldOutline;
@@ -569,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) }));
@@ -722,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. */
@@ -1045,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) }));
@@ -1064,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);
             }
@@ -1374,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 {
@@ -1392,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') {