synabun 2.0.0 → 2.0.5

package/neural-interface/public/shared/editor/editor-theme.js

@@ -0,0 +1,244 @@
+// ═══════════════════════════════════════════
+// SynaBun Neural Interface — Code editor: theme
+// ═══════════════════════════════════════════
+//
+// The CodeMirror theme and highlight style of the File Explorer's editor.
+// Every colour is a `var(--ed-*)` declared on `.fe-editor-panel` in styles.css,
+// with the values the editor had before CodeMirror, so a skin restyles the
+// editor by overriding those variables. Sizes that follow a preference are
+// variables too (`--ed-font-size`, `--ed-ligatures`), set on the panel by
+// editor-panel.js. Takes the vendored bundle as an argument: no imports.
+
+export const EDITOR_FONT_FAMILY = "'JetBrains Mono', 'SF Mono', 'Consolas', monospace";
+/** 12px on a 20px line; the height follows the size. */
+export const EDITOR_LINE_HEIGHT = '1.667';
+
+/**
+ * The ten colours of the old regular-expression highlighter, mapped onto syntax tags. Kinds it never coloured
+ * take the nearest of them (SPEC, section 6). The highlight style is built from this table, and the minimap
+ * colours its blocks by it.
+ * @param {object} t the bundle's `tags`
+ * @returns {{ tag: any, color?: string, fontStyle?: string, fontWeight?: string, textDecoration?: string }[]}
+ */
+export function highlightSpecs(t) {
+  return [
+    { tag: t.keyword, color: 'var(--ed-kw)' },
+    { tag: [t.modifier, t.self], color: 'var(--ed-kw)' },
+    { tag: [t.string, t.special(t.string), t.character, t.docString, t.attributeValue, t.regexp, t.escape, t.monospace], color: 'var(--ed-str)' },
+    { tag: t.comment, color: 'var(--ed-cm)', fontStyle: 'italic' },
+    { tag: [t.number, t.bool, t.null, t.atom, t.constant(t.name), t.unit, t.color], color: 'var(--ed-num)' },
+    {
+      tag: [t.function(t.variableName), t.function(t.propertyName), t.function(t.definition(t.variableName)),
+        t.className, t.typeName, t.namespace, t.labelName, t.macroName],
+      color: 'var(--ed-fn)',
+    },
+    { tag: [t.angleBracket, t.processingInstruction, t.contentSeparator, t.documentMeta], color: 'var(--ed-op)' },
+    { tag: t.tagName, color: 'var(--ed-tag)' },
+    { tag: [t.attributeName, t.constant(t.className), t.annotation, t.meta], color: 'var(--ed-attr)' },
+    { tag: [t.propertyName, t.special(t.variableName)], color: 'var(--ed-prop)' },
+    { tag: [t.paren, t.squareBracket, t.brace], color: 'var(--ed-br)' },
+    { tag: t.heading, color: 'var(--ed-kw)', fontWeight: '600' },
+    { tag: t.strong, fontWeight: '600' },
+    { tag: t.emphasis, fontStyle: 'italic' },
+    { tag: t.strikethrough, textDecoration: 'line-through' },
+    { tag: [t.link, t.url], color: 'var(--ed-prop)', textDecoration: 'underline' },
+    { tag: t.quote, color: 'var(--ed-str)' },
+    { tag: t.inserted, color: 'var(--ed-add)' },
+    { tag: t.deleted, color: 'var(--ed-del)' },
+    { tag: t.changed, color: 'var(--ed-warn)' },
+    { tag: t.invalid, color: 'var(--ed-error)' },
+  ];
+}
+
+/**
+ * @param {object} cm the vendored CodeMirror bundle (editor-loader.js)
+ * @returns {import('@codemirror/state').Extension[]}
+ */
+export function editorTheme(cm) {
+  const { EditorView, HighlightStyle, syntaxHighlighting, tags: t } = cm;
+
+  const theme = EditorView.theme({
+    '&': {
+      height: '100%',
+      color: 'var(--ed-fg)',
+      backgroundColor: 'transparent',
+      fontSize: 'var(--ed-font-size, 12px)',
+    },
+    '&.cm-focused': { outline: 'none' },
+    '.cm-scroller': {
+      fontFamily: EDITOR_FONT_FAMILY,
+      lineHeight: EDITOR_LINE_HEIGHT,
+      overflow: 'auto',
+    },
+    '.cm-content': {
+      padding: '10px 0',
+      caretColor: 'var(--ed-caret)',
+      fontVariantLigatures: 'var(--ed-ligatures, normal)',
+    },
+    '.cm-line': { padding: '0 16px' },
+
+    // Gutter: line numbers, then the fold arrows. 48px in a file of up to 9,999 lines, as before.
+    '.cm-gutters': {
+      backgroundColor: 'var(--ed-gutter-bg)',
+      color: 'var(--ed-gutter-fg)',
+      border: 'none',
+      borderRight: '1px solid var(--ed-gutter-border)',
+      userSelect: 'none',
+    },
+    '.cm-lineNumbers .cm-gutterElement': { padding: '0 2px 0 6px', minWidth: '37px', textAlign: 'right' },
+    '.cm-foldGutter .cm-gutterElement': { width: '10px', padding: '0', textAlign: 'center', cursor: 'pointer' },
+    '.cm-foldGutter .cm-gutterElement span': { color: 'var(--ed-gutter-fg)' },
+    '.cm-foldGutter .cm-gutterElement:hover span': { color: 'var(--ed-gutter-fg-active)' },
+    '.cm-activeLineGutter': { backgroundColor: 'transparent', color: 'var(--ed-gutter-fg-active)' },
+    '.cm-activeLine': { backgroundColor: 'var(--ed-line-active)' },
+
+    // Carets and selections (drawn by CodeMirror, so several can show at once).
+    '.cm-cursor, .cm-dropCursor': { borderLeftColor: 'var(--ed-caret)' },
+    '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground': {
+      backgroundColor: 'var(--ed-selection)',
+    },
+    '.cm-content ::selection': { backgroundColor: 'var(--ed-selection)' },
+    '.cm-selectionMatch': { backgroundColor: 'var(--ed-match)' },
+    '.cm-searchMatch': { backgroundColor: 'var(--ed-match)', outline: 'none' },
+    '.cm-searchMatch.cm-searchMatch-selected': { backgroundColor: 'var(--ed-match-current)' },
+    '&.cm-focused .cm-matchingBracket': { backgroundColor: 'var(--ed-match)', outline: '1px solid var(--ed-gutter-fg)' },
+    '&.cm-focused .cm-nonmatchingBracket': { backgroundColor: 'transparent', color: 'var(--ed-error)' },
+    '.cm-specialChar': { color: 'var(--ed-error)' },
+    '.cm-foldPlaceholder': {
+      backgroundColor: 'var(--ed-match)',
+      border: 'none',
+      color: 'var(--ed-gutter-fg-active)',
+      margin: '0 2px',
+      padding: '0 4px',
+      borderRadius: '3px',
+    },
+
+    // An AI suggestion: upright, so it is never taken for a comment (those are italic), whatever it sits in.
+    '.cm-ghost': { color: 'var(--ed-ghost)', fontStyle: 'normal', fontWeight: 'normal', textDecoration: 'none' },
+
+    // A comparison with another version (editor-compare.js): the diff colours of the design, the gutter says
+    // which lines changed. What the other version had is not part of the document: it is drawn in the delete colour.
+    '&.cm-merge-b .cm-changedLine, & .cm-inlineChangedLine': { backgroundColor: 'var(--ed-add-bg)' },
+    '&.cm-merge-b .cm-changedText': { background: 'var(--ed-add-bg)' },
+    // A line that is new as a whole has the line's tint and no second layer of it (the two together took the text
+    // under 4.5:1). The words changed inside a modified line keep theirs: that is what tells them from the rest.
+    '&.cm-merge-b .cm-addedWhole .cm-changedText': { background: 'none' },
+    // The block of a difference (what the other version had) is what its button is placed in, and the button never
+    // lies over text. With wrapped lines it floats at the block's end: the rows of removed text are shorter beside
+    // it. The block contains the float, so a difference that only adds lines, whose block holds no removed line,
+    // still has a row for the button (it was a box of no height that the button hung out of, under the first added
+    // line: a line is positioned, and comes later). With lines that are not wrapped, text makes no room for a float
+    // and the block is as wide as the longest line: there the button has a row of its own, and is held at the end of
+    // what is in view (clear of the minimap, which is 64 px of the scroller) however far the text is scrolled.
+    '& .cm-deletedChunk': { position: 'relative', display: 'flow-root', backgroundColor: 'var(--ed-del-bg)', color: 'var(--ed-del)', paddingLeft: '16px' },
+    '& .cm-deletedChunk .cm-chunkButtons': { position: 'static', float: 'right', marginInlineEnd: '5px' },
+    '& .cm-content:not(.cm-lineWrapping) .cm-deletedChunk .cm-chunkButtons': { float: 'none', position: 'sticky', right: '5px', width: 'fit-content', marginInlineStart: 'auto' },
+    '& .cm-scroller:has(.cm-minimap) .cm-content:not(.cm-lineWrapping) .cm-deletedChunk .cm-chunkButtons': { right: '69px' },
+    // A block that holds the button alone took nothing away: its row is not tinted as removed text is.
+    '& .cm-deletedChunk:not(:has(.cm-deletedLine))': { backgroundColor: 'transparent' },
+    '& .cm-deletedChunk .cm-deletedText': { background: 'var(--ed-del-bg)' },
+    '& .cm-deletedChunk .cm-deletedLine, & .cm-deletedChunk .cm-deletedLine del, & .cm-insertedLine': { textDecoration: 'none' },
+    '&.cm-merge-b .cm-changedLineGutter': { background: 'var(--ed-add)' },
+    '& .cm-deletedLineGutter': { background: 'var(--ed-del)' },
+    '& .cm-collapsedLines': {
+      background: 'var(--ed-gutter-bg)',
+      color: 'var(--ed-gutter-fg-active)',
+      padding: '2px 16px',
+      fontSize: '11px',
+    },
+    '& .cm-collapsedLines:hover': { color: 'var(--ed-menu-fg-active)' },
+    '& .cm-collapsedLines:before, & .cm-collapsedLines:after': { content: '""', margin: '0' },
+
+    // Git markers (editor-git.js): a 4px column after the fold arrows. Added and modified lines carry a bar in
+    // the diff colours; where committed lines were removed, a mark sits on the edge between two lines.
+    '.cm-gitGutter': { width: '4px' },
+    '.cm-gitGutter .cm-gutterElement': { position: 'relative', padding: '0' },
+    '.cm-gitGutter .cm-gitLine-added': { backgroundColor: 'var(--ed-add)' },
+    '.cm-gitGutter .cm-gitLine-modified': { backgroundColor: 'var(--ed-warn)' },
+    '.cm-gitGutter .cm-gitLine-deleted::before': {
+      content: '""', position: 'absolute', left: '0', top: '-2px', width: '4px', height: '4px', backgroundColor: 'var(--ed-del)',
+    },
+    '.cm-gitGutter .cm-gitLine-deleted.cm-gitLine-after::before': { top: 'auto', bottom: '-2px' },
+
+    // Problems (editor-lint.js): a wavy underline, a dot in a narrow column of its own, the message in the
+    // editor's tooltip.
+    '.cm-lintRange': { backgroundImage: 'none', paddingBottom: '0' },
+    '.cm-lintRange-error': { textDecoration: 'underline wavy var(--ed-error)', textUnderlineOffset: '3px', textDecorationSkipInk: 'none' },
+    '.cm-lintRange-warning': { textDecoration: 'underline wavy var(--ed-warn)', textUnderlineOffset: '3px', textDecorationSkipInk: 'none' },
+    '.cm-lintRange-active': { backgroundColor: 'var(--ed-match)' },
+    '.cm-lintPoint:after': { borderBottomColor: 'var(--ed-error)' },
+    '.cm-gutter-lint': { width: '10px' },
+    '.cm-gutter-lint .cm-gutterElement': { padding: '0', display: 'flex', alignItems: 'center', justifyContent: 'center' },
+    '.cm-lint-marker': { content: 'normal', width: '6px', height: '6px', borderRadius: '50%', cursor: 'default' },
+    '.cm-lint-marker-error': { content: 'normal', backgroundColor: 'var(--ed-error)' },
+    '.cm-lint-marker-warning': { content: 'normal', backgroundColor: 'var(--ed-warn)' },
+    '.cm-tooltip.cm-tooltip-lint, .cm-tooltip.cm-tooltip-hover': { fontFamily: EDITOR_FONT_FAMILY, fontSize: '11px', maxWidth: '480px' },
+    '.cm-diagnostic': { padding: '4px 8px', marginLeft: '0', whiteSpace: 'pre-wrap', lineHeight: '1.5' },
+    '.cm-diagnostic-error': { borderLeft: '2px solid var(--ed-error)' },
+    '.cm-diagnostic-warning': { borderLeft: '2px solid var(--ed-warn)' },
+
+    // Spaces and tabs made visible (the whitespace preference): a dot, and a rule the width of the tab.
+    '.cm-highlightSpace': { backgroundImage: 'radial-gradient(circle at 50% 55%, var(--ed-whitespace) 20%, transparent 5%)' },
+    '.cm-highlightTab': {
+      backgroundImage: 'linear-gradient(var(--ed-whitespace), var(--ed-whitespace))',
+      backgroundSize: 'calc(100% - 4px) 1px',
+      backgroundPosition: 'center',
+      backgroundRepeat: 'no-repeat',
+    },
+
+    // The minimap (editor-minimap.js): a part of the scroller that stays in view; the text is laid out beside it.
+    '.cm-minimap': {
+      position: 'sticky',
+      top: '0',
+      right: '0',
+      zIndex: '3',
+      flexShrink: '0',
+      boxSizing: 'border-box',
+      width: '64px',
+      height: '100%',
+      overflow: 'hidden',
+      backgroundColor: 'var(--ed-bg)',
+      boxShadow: 'inset 1px 0 0 var(--ed-gutter-border)',
+      cursor: 'default',
+      userSelect: 'none',
+      touchAction: 'none',
+    },
+    '.cm-minimap canvas': { display: 'block', width: '100%', height: '100%' },
+    '.cm-minimap-box': { position: 'absolute', left: '0', right: '0', backgroundColor: 'var(--ed-minimap-box)', boxShadow: 'inset 0 0 0 1px var(--ed-minimap-edge)', pointerEvents: 'none' },
+    '.cm-minimap:hover .cm-minimap-box, .cm-minimap-dragging .cm-minimap-box': { backgroundColor: 'var(--ed-minimap-box-active)' },
+
+    // The find and go-to-line bars are panels: their own look is in styles.css (.fe-editor-find, .fe-editor-goto).
+    '.cm-panels': { backgroundColor: 'transparent', color: 'inherit' },
+    '.cm-panels.cm-panels-top': { borderBottom: 'none' },
+    '.cm-panels.cm-panels-bottom': { borderTop: 'none' },
+
+    // Completion list: the menu treatment of DESIGN.md.
+    '.cm-tooltip': {
+      backgroundColor: 'var(--ed-menu-bg)',
+      color: 'var(--ed-menu-fg)',
+      border: '1px solid var(--ed-menu-border)',
+      borderRadius: 'var(--ed-menu-radius, 8px)',
+      boxShadow: 'var(--ed-menu-shadow)',
+      overflow: 'hidden',
+    },
+    '.cm-tooltip.cm-tooltip-autocomplete > ul': {
+      fontFamily: EDITOR_FONT_FAMILY,
+      fontSize: '11px',
+      maxHeight: '14em',
+      padding: '4px',
+    },
+    '.cm-tooltip.cm-tooltip-autocomplete > ul > li': { padding: '2px 8px', borderRadius: '4px', lineHeight: '1.6' },
+    '.cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected]': {
+      backgroundColor: 'var(--ed-menu-hover)',
+      color: 'var(--ed-menu-fg-active)',
+    },
+    '.cm-completionMatchedText': { textDecoration: 'none', color: 'var(--ed-menu-fg-active)', fontWeight: '600' },
+    '.cm-completionDetail': { color: 'var(--ed-gutter-fg-active)', fontStyle: 'normal' },
+    '.cm-completionIcon': { opacity: '0.5', width: '1em', paddingRight: '0.5em' },
+    '.cm-tooltip.cm-completionInfo': { padding: '6px 8px', fontSize: '11px', maxWidth: '360px' },
+  }, { dark: true });
+
+  const highlight = HighlightStyle.define(highlightSpecs(t));
+
+  return [theme, syntaxHighlighting(highlight)];
+}

package/neural-interface/public/shared/editor/editor-view.js

@@ -0,0 +1,332 @@
+// ═══════════════════════════════════════════
+// SynaBun Neural Interface — Code editor: the CodeMirror view
+// ═══════════════════════════════════════════
+//
+// Builds the editor: one CodeMirror view for the panel, and a state for each
+// document it is given (its own history, selection, folds and find bar). The
+// panel keeps the state of every open tab and hands the view the one to show;
+// a state that is not showing can still be changed (a language that arrives
+// late, a file reloaded from disk). What can change while a document is open
+// sits in a compartment: language, line wrapping, indentation, read-only, the
+// editing preferences, the comparison with another text, the git markers, the
+// problem check and the minimap.
+// Takes the vendored bundle as an argument.
+
+import { editorTheme } from './editor-theme.js';
+import { EDITOR_COMMANDS, commandKeymap, physicalKeyHandler } from './editor-commands.js';
+import { baseName, resolveLanguage } from './editor-languages.js';
+import { positionAt } from './editor-doc.js';
+import { editorCompletionList } from './editor-completion-list.js';
+
+// After an edit the parser reuses, from the tree it had, only the nodes stored as trees of their own; smaller
+// ones are packed into buffers and read again. With the parser's default buffer (1024) a file made of many
+// small pieces, such as a stylesheet's rules, is read again from its start on every keystroke, for up to the
+// 20 ms CodeMirror allows per edit. A quarter of that keeps those pieces reusable: measured on a 1 MB
+// stylesheet, the parse after a keystroke went from 59 ms to 1 ms, for 4 MB more memory per MB of text.
+export const PARSER_BUFFER_LENGTH = 256;
+
+/** A language's support with its parser set up for small edits in large files. Other kinds of parser pass through. */
+export function withReusableNodes(cm, support) {
+  const language = support?.language;
+  if (typeof language?.configure !== 'function' || typeof language.parser?.configure !== 'function') return support;
+  if (!(language.parser.bufferLength > PARSER_BUFFER_LENGTH)) return support;
+  return new cm.LanguageSupport(language.configure({ bufferLength: PARSER_BUFFER_LENGTH }), support.support);
+}
+
+/** What the panel offers to commands: each is called on the panel's `actions` when a command asks for it. */
+export const PANEL_ACTIONS = Object.freeze([
+  'save', 'toggleWordWrap', 'nextTab', 'previousTab', 'closeTab',
+  'toggleMinimap', 'toggleIndentGuides', 'cycleWhitespace', 'fontLarger', 'fontSmaller', 'fontReset',
+  'openPalette', 'openGoToFile', 'nextProblem', 'previousProblem', 'toggleDiff',
+]);
+
+/**
+ * Spaces and tabs drawn inside the selection only. They take the classes CodeMirror's own "all whitespace"
+ * extension uses, so the theme styles both the same way.
+ */
+export function selectionWhitespace(cm) {
+  const { Decoration, RangeSetBuilder, ViewPlugin } = cm;
+  const space = Decoration.mark({ class: 'cm-highlightSpace' });
+  const tab = Decoration.mark({ class: 'cm-highlightTab' });
+  const build = (view) => {
+    const builder = new RangeSetBuilder();
+    const selected = view.state.selection.ranges.filter((range) => !range.empty);
+    if (!selected.length) return builder.finish();
+    for (const visible of view.visibleRanges) {
+      for (const range of selected) {
+        const from = Math.max(range.from, visible.from);
+        const to = Math.min(range.to, visible.to);
+        if (from >= to) continue;
+        const text = view.state.sliceDoc(from, to);
+        for (let i = 0; i < text.length; i++) {
+          const c = text.charCodeAt(i);
+          if (c === 32) builder.add(from + i, from + i + 1, space);
+          else if (c === 9) builder.add(from + i, from + i + 1, tab);
+        }
+      }
+    }
+    return builder.finish();
+  };
+  return ViewPlugin.fromClass(class {
+    constructor(view) { this.decorations = build(view); }
+    update(update) { if (update.docChanged || update.selectionSet || update.viewportChanged) this.decorations = build(update.view); }
+  }, { decorations: (plugin) => plugin.decorations });
+}
+
+const FOLD_ICON = {
+  open: '<svg viewBox="0 0 24 24" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg>',
+  closed: '<svg viewBox="0 0 24 24" aria-hidden="true"><polyline points="9 6 15 12 9 18"/></svg>',
+};
+
+/**
+ * @param {object} cm the vendored CodeMirror bundle (editor-loader.js)
+ * @param {object} o
+ * @param {HTMLElement} o.parent where the editor is mounted
+ * @param {object} o.search what editorSearch() returned
+ * @param {object} [o.ai] what editorAi() returned: the suggestion extension and its commands
+ * @param {{ save: () => void, toggleWordWrap: () => void, nextTab?: () => void, previousTab?: () => void, closeTab?: () => void }} o.actions
+ *   what the panel offers to commands (PANEL_ACTIONS names them all)
+ * @param {(key: string, params?: object) => string} o.t
+ * @param {(update: object) => void} [o.onUpdate] called for every view update
+ */
+export function createEditorView(cm, { parent, search, ai = null, actions, t, onUpdate = () => {} }) {
+  const { Compartment, EditorState, EditorView, StateEffect, StateField, keymap } = cm;
+
+  const language = new Compartment();
+  const wrapping = new Compartment();
+  const indentation = new Compartment();
+  const readOnly = new Compartment();
+  const preferences = new Compartment();
+  const comparing = new Compartment();
+  const gitMarkers = new Compartment();
+  const problems = new Compartment();
+  const minimap = new Compartment();
+
+  const commandContext = {
+    cm,
+    actions: {
+      // The panel's own: looked up when a command runs, so the panel may add to them after the view exists.
+      ...Object.fromEntries(PANEL_ACTIONS.map((name) => [name, (...args) => actions[name]?.(...args)])),
+      openFind: search.openFind,
+      openReplace: search.openReplace,
+      findNext: search.findNext,
+      findPrevious: search.findPrevious,
+      openGoToLine: search.openGoToLine,
+      dismiss: search.dismiss,
+      aiAccept: ai?.accept,
+      aiAcceptWord: ai?.acceptWord,
+      aiDismiss: ai?.dismiss,
+      aiTrigger: ai?.trigger,
+    },
+  };
+  const physicalKey = physicalKeyHandler(EDITOR_COMMANDS, commandContext);
+
+  // The completion list: what the language offers, and the words of the document (in every language). While AI
+  // autocomplete is expected to suggest for the document, its words wait to be asked for (Ctrl-Space).
+  const completionList = editorCompletionList(cm, { wordsYield: () => ai?.expectsSuggestions?.() === true });
+
+  const foldMarker = (open) => {
+    const marker = document.createElement('span');
+    marker.className = open ? 'fe-editor-fold fe-editor-fold--open' : 'fe-editor-fold fe-editor-fold--closed';
+    marker.innerHTML = open ? FOLD_ICON.open : FOLD_ICON.closed;
+    marker.setAttribute('aria-label', t(open ? 'editor.fold.fold' : 'editor.fold.unfold'));
+    return marker;
+  };
+
+  // A save is an undo boundary: the first edit after it starts a step of its own, so undoing it lands on
+  // what was saved instead of on some point before. The mark is part of the document's state: each tab has its own.
+  const markSaved = StateEffect.define();
+  const savedBoundary = StateField.define({
+    create: () => false,
+    update(value, tr) {
+      if (tr.docChanged) return false;
+      return tr.effects.some((effect) => effect.is(markSaved)) ? true : value;
+    },
+  });
+  const startUndoStep = EditorState.transactionExtender.of((tr) => (
+    tr.docChanged && tr.startState.field(savedBoundary, false) ? { annotations: cm.isolateHistory.of('before') } : null
+  ));
+
+  // The same for every document.
+  const fixed = [
+    savedBoundary,
+    startUndoStep,
+    cm.lineNumbers(),
+    cm.highlightActiveLineGutter(),
+    cm.highlightSpecialChars(),
+    cm.history(),
+    cm.foldGutter({ markerDOM: foldMarker }),
+    cm.drawSelection(),
+    cm.dropCursor(),
+    EditorState.allowMultipleSelections.of(true),
+    // Alt-click adds a caret; Shift-Alt-drag selects a column (VS Code's gestures).
+    EditorView.clickAddsSelectionRange.of((event) => event.altKey && !event.shiftKey),
+    cm.rectangularSelection({ eventFilter: (event) => event.altKey && event.shiftKey && event.button === 0 }),
+    cm.indentOnInput(),
+    cm.bracketMatching(),
+    cm.closeBrackets(),
+    completionList.extension,
+    cm.highlightActiveLine(),
+    cm.highlightSelectionMatches(),
+    search.extension,
+    ai ? ai.extension : [],
+    editorTheme(cm),
+    EditorView.contentAttributes.of({ 'aria-label': t('editor.aria.content') }),
+    EditorView.domEventHandlers({ keydown: (event, view) => physicalKey(event, view) }),
+    keymap.of([
+      ...commandKeymap(EDITOR_COMMANDS, commandContext),
+      ...cm.closeBracketsKeymap,
+      ...cm.defaultKeymap,
+      ...cm.historyKeymap,
+      ...cm.foldKeymap,
+      ...cm.completionKeymap,
+    ]),
+    EditorView.updateListener.of((update) => onUpdate(update)),
+  ];
+
+  const wrapExtension = (on) => (on ? EditorView.lineWrapping : []);
+  const indentExtension = ({ unit = '  ', tabSize = 2 } = {}) => [cm.indentUnit.of(unit), EditorState.tabSize.of(tabSize)];
+  const readOnlyExtension = (on) => EditorState.readOnly.of(!!on);
+  const indentGuides = cm.indentationMarkers({
+    highlightActiveBlock: true,
+    thickness: 1,
+    colors: {
+      light: 'var(--ed-guide)', dark: 'var(--ed-guide)',
+      activeLight: 'var(--ed-guide-active)', activeDark: 'var(--ed-guide-active)',
+    },
+  });
+  const whitespace = { all: cm.highlightWhitespace(), selection: selectionWhitespace(cm) };
+  const preferenceExtension = (editing = {}) => [
+    editing.indentGuides === false ? [] : indentGuides,
+    whitespace[editing.renderWhitespace] || [],
+  ];
+
+  const stateFor = ({ text = '', indent, wrap = true, editing, locked = false, git = null, lint = null, minimap: map = null } = {}) => EditorState.create({
+    doc: text,
+    extensions: [
+      fixed,
+      language.of([]),
+      wrapping.of(wrapExtension(wrap)),
+      indentation.of(indentExtension(indent)),
+      readOnly.of(readOnlyExtension(locked)),
+      preferences.of(preferenceExtension(editing)),
+      comparing.of([]),
+      gitMarkers.of(git || []),
+      problems.of(lint || []),
+      minimap.of(map || []),
+    ],
+  });
+
+  const view = new EditorView({ state: stateFor(), parent });
+
+  // A key pressed in the editor (the text, or one of its bars) is the editor's: it does not travel on to the
+  // document, where the app's shortcuts and "Escape closes this" listeners wait.
+  for (const type of ['keydown', 'keyup', 'keypress']) {
+    view.dom.addEventListener(type, (event) => event.stopPropagation());
+  }
+
+  // A language's support, once loaded, is the same object for every tab that uses it.
+  const supports = new Map();
+
+  return {
+    view,
+    /** What commands are given to act with (the palette runs a command through the same ones). */
+    actions: commandContext.actions,
+
+    /**
+     * A state for a document. Its history starts empty.
+     * @param {{ text: string, indent: { unit: string, tabSize: number }, wrap: boolean, editing: object,
+     *   git?: any, lint?: any, minimap?: any }} doc `git`, `lint`, `minimap`: what the document has of each from
+     *   the start (an extension of editor-git.js, editor-lint.js, editor-minimap.js), nothing when left out
+     */
+    createState: (doc) => stateFor(doc),
+
+    /**
+     * Put a document's state in the view.
+     * @param {object} state from createState(), or one the view held before
+     * @param {{ scroll?: object | null, top?: number | null }} [o] `scroll`: what snapshotScroll() returned when
+     *   this document was last showing; `top`: else a document position to put at the top of the view
+     */
+    show(state, { scroll = null, top = null } = {}) {
+      view.setState(state);
+      if (scroll) view.dispatch({ effects: scroll });
+      else if (top) view.dispatch({ effects: EditorView.scrollIntoView(Math.min(top, state.doc.length), { y: 'start', yMargin: 0 }) });
+    },
+
+    /** Where the view is scrolled to, as something show() puts back. */
+    snapshotScroll: () => view.scrollSnapshot(),
+    /** The document position of the first line that is visible. */
+    topPosition: () => view.lineBlockAtHeight(view.scrollDOM.getBoundingClientRect().top - view.documentTop).from,
+
+    /**
+     * Change a document: through the view when its state is the one showing (pass null), on the state itself
+     * otherwise. Returns the state after the change.
+     */
+    apply(state, spec) {
+      if (!state || state === view.state) { view.dispatch(spec); return view.state; }
+      return state.update(spec).state;
+    },
+
+    /** Effects for apply(), one for each thing that can change while a document is open. */
+    effects: {
+      wrap: (on) => wrapping.reconfigure(wrapExtension(on)),
+      indent: (indent) => indentation.reconfigure(indentExtension(indent)),
+      readOnly: (on) => readOnly.reconfigure(readOnlyExtension(on)),
+      editing: (editing) => preferences.reconfigure(preferenceExtension(editing)),
+      /** `support`: what loadLanguage() resolved to; nothing for plain text. */
+      language: (support) => language.reconfigure(support || []),
+      /** `extension`: what editor-compare.js built; nothing to leave the comparison. */
+      compare: (extension) => comparing.reconfigure(extension || []),
+      /** `extension`: editor-git.js's column; nothing for a document git markers are not shown for. */
+      git: (extension) => gitMarkers.reconfigure(extension || []),
+      /** `extension`: editor-lint.js's check for the document's kind; nothing for a document that is not checked. */
+      lint: (extension) => problems.reconfigure(extension || []),
+      /** `extension`: editor-minimap.js's; nothing while the document shows no minimap. */
+      minimap: (extension) => minimap.reconfigure(extension || []),
+      /** The next edit starts a new undo step (after a save, or a reload from disk). */
+      saved: () => markSaved.of(null),
+    },
+
+    /** The language a file name is highlighted as (a description of the bundle's language-data), or null. */
+    describeLanguage(fileName) {
+      const wanted = resolveLanguage(fileName);
+      if (wanted.known) return wanted.language ? cm.languages.find((entry) => entry.name === wanted.language) || null : null;
+      return cm.LanguageDescription.matchFilename(cm.languages, baseName(fileName));
+    },
+    /** Every language of the bundle. */
+    languages: () => cm.languages,
+    /**
+     * Load a language (its chunk is fetched the first time). Resolves to null when it cannot be loaded: the
+     * file stays readable and editable as plain text.
+     */
+    loadLanguage(description) {
+      if (!description) return Promise.resolve(null);
+      if (!supports.has(description.name)) {
+        supports.set(description.name, description.load().then((support) => withReusableNodes(cm, support)));
+      }
+      return supports.get(description.name).catch((error) => {
+        supports.delete(description.name);
+        console.warn(`[editor] could not load the ${description.name} language`, error);
+        return null;
+      });
+    },
+
+    /** Drop the document (the panel closed). */
+    clear() { view.setState(stateFor()); },
+
+    /** Put the caret at a 1-based line and column, with a few lines of context above it. */
+    reveal(line, column = 1) {
+      const { pos } = positionAt(view.state.doc, line, column);
+      view.dispatch({ selection: { anchor: pos }, effects: EditorView.scrollIntoView(pos, { y: 'start', yMargin: 100 }) });
+    },
+
+    focus() { view.focus(); },
+    hasFocus() { return view.hasFocus; },
+    /** The showing document, line breaks as "\n". */
+    text() { return view.state.doc.toString(); },
+    doc() { return view.state.doc; },
+    /** Sizes changed from outside (font size, the panel's width): measure again. */
+    remeasure() { view.requestMeasure(); },
+    destroy() { view.destroy(); },
+  };
+}