feat: add code folding support via Tree-sitter queries

Implement code folding across the editor with per-language fold detection
using Tree-sitter syntax queries. Users can collapse and expand foldable
regions (functions, classes, blocks, etc.) by clicking toggle buttons in
a new gutter column.

Core changes:
- Add FoldRange type and getFoldRanges() to Code, computing foldable
  regions from Tree-sitter captures on every reparse
- Add foldsQuery to the Lang interface so each language declares its own
  foldable node types
- Add foldsQuery definitions for all 18 supported languages (TypeScript,
  JavaScript, Rust, Python, Go, C, C++, C#, Java, Kotlin, Lua, Bash,
  CSS, HTML, JSON, TOML, YAML, Zig)
- Track collapsed fold state (collapsedFoldStarts) in AnycodeEditor and
  pass it through EditorState to the renderer
- Integrate fold visibility into the VisualRow pipeline — folded lines
  are excluded from visual rows, interacting correctly with focused diff
  separators
- Add a new .folds gutter column with expand/collapse toggle buttons,
  including CSS hover/opacity animations
- Extend LineRenderer.createLineElements to produce fold indicator cells
- Extend DiffRenderer to handle the fold column (ghost lines, gap rows,
  separator logic aware of folded regions)
- Refactor mouse.ts to handle clicks on the new fold column via a
  unified .closest('.bt, .ln, .fd') lookup
- Adjust selection rendering to clamp offsets that fall within fold gaps

Performance:
- Pre-build a Set<number> of all hidden line indices in
  updateCollapsedMap for O(1) isHiddenByFold lookups instead of
  iterating over collapsed intervals per line

Cleanup:
- Remove Lua-specific hack from foldRangeFromNode; use function_body
  instead of function_statement in Lua foldsQuery for correct ranges
- Fix Lua comment prefix from '#' to '--'
- Add yaml/yml extension mappings

Tests:
- Add folding.test.ts with coverage for 10 languages
- Add DiffRenderer test cases for fold-aware separator insertion

Author: vipmax

.gitignore

@@ -12,3 +12,4 @@ csharp-test-project
 test.py
 
 .zed
+anycode-react/dist/Component.js

anycode-base/src/code.ts

@@ -73,6 +73,12 @@ export interface Patch {
     replace: string;
 }
 
+export interface FoldRange {
+    startLine: number;
+    endLine: number;
+    kind: string;
+}
+
 var langsCache: Map<string, Parser.Language> = new Map();
 var pendingLangsCache: Map<string, Promise<Parser.Language>> = new Map();
 
@@ -83,7 +89,9 @@ export class Code {
     private parser: Parser | undefined
     private tree: Parser.Tree | undefined
     private query: Parser.Query | undefined
+    private foldsQuery: Parser.Query | undefined
     private runnablesQuery: Parser.Query | undefined
+    private foldRanges: FoldRange[] = []
 
     public runnables: Map<number, any> = new Map()
 
@@ -121,7 +129,9 @@ export class Code {
             this.parser = undefined;
             this.tree = undefined;
             this.query = undefined;
+            this.foldsQuery = undefined;
             this.runnablesQuery = undefined;
+            this.foldRanges = [];
             return;
         }
 
@@ -154,6 +164,9 @@ export class Code {
         if (this.language) {
             let q = this.getQuery();
             if (q) this.query = lang.query(q);
+            const foldsQ = this.getFoldsQuery();
+            if (foldsQ) this.foldsQuery = lang.query(foldsQ);
+            this.updateFoldRanges();
             if (this.query) await this.initInjections();
             // let tq = this.getRunnablesQuery();
             // if (tq) this.runnablesQuery = lang.query(tq);
@@ -360,6 +373,7 @@ export class Code {
         this.buffer = pieceTree;
 
         if (this.parser) this.tree = this.parser.parse(this.input) || undefined;
+        this.updateFoldRanges();
     }
 
     public insert(text: string, offset: number, addHistory: boolean = false) {
@@ -464,6 +478,7 @@ export class Code {
         const newTree = this.parser!.parse(this.input, old);
         this.tree!.delete();
         this.tree = newTree || undefined;
+        this.updateFoldRanges();
     }
 
     tx() {
@@ -601,6 +616,59 @@ export class Code {
         return language?.runnablesQuery || null;
     }
 
+    getFoldsQuery(): string | null {
+        if (!this.language) return null;
+
+        const language = this.getLang(this.language);
+        return language?.foldsQuery || null;
+    }
+
+    private updateFoldRanges() {
+        if (!this.tree || !this.foldsQuery) {
+            this.foldRanges = [];
+            return;
+        }
+
+        const ranges: FoldRange[] = [];
+        const seen = new Set<string>();
+        const captures = this.foldsQuery.captures(this.tree.rootNode);
+
+        for (const capture of captures) {
+            if (capture.name !== 'fold') continue;
+
+            const range = this.foldRangeFromNode(capture.node);
+            if (!range) continue;
+
+            const { startLine, endLine } = range;
+
+            const key = `${startLine}:${endLine}`;
+            if (seen.has(key)) continue;
+            seen.add(key);
+
+            ranges.push({
+                startLine,
+                endLine,
+                kind: capture.node.type,
+            });
+        }
+
+        ranges.sort((a, b) => a.startLine - b.startLine || a.endLine - b.endLine);
+        this.foldRanges = ranges;
+    }
+
+    public getFoldRanges(): FoldRange[] {
+        return this.foldRanges;
+    }
+
+    private foldRangeFromNode(node: Parser.SyntaxNode):
+        { startLine: number; endLine: number } | null {
+        const startLine = node.startPosition.row;
+        const endLine = node.endPosition.row;
+
+        if (endLine <= startLine) return null;
+        return { startLine, endLine };
+    }
+
     getIndent(): Lang["indent"] | null {
         if (!this.language) return null;
 

anycode-base/src/editor.ts

@@ -1,4 +1,4 @@
-import { Code, Change, Position, Operation } from "./code";
+import { Code, Change, Position, Operation, type FoldRange } from "./code";
 import { Renderer } from './renderer/Renderer';
 import { getPosFromMouse } from './mouse';
 import { Selection, hasDiagnosticSelection } from "./selection";
@@ -38,6 +38,7 @@ export interface EditorOptions {
     readOnly?: boolean;
     focusedDiffEnabled?: boolean;
     focusedDiffContextLines?: number;
+    codeFoldingEnabled?: boolean;
 }
 
 export interface EditorState {
@@ -50,6 +51,9 @@ export interface EditorState {
     settings: EditorSettings;
     diffs?: Map<number, DiffInfo>;
     readOnly?: boolean;
+    foldRanges: FoldRange[];
+    collapsedFoldStarts: Set<number>;
+    codeFoldingEnabled: boolean;
 }
 
 export class AnycodeEditor {
@@ -60,6 +64,7 @@ export class AnycodeEditor {
     private container!: HTMLDivElement;
     private buttonsColumn!: HTMLDivElement;
     private gutter!: HTMLDivElement;
+    private foldsColumn!: HTMLDivElement;
     private codeContent!: HTMLDivElement;
 
     private isMouseSelecting: boolean = false;
@@ -97,6 +102,8 @@ export class AnycodeEditor {
     private originalCode?: Code;
     private diffs?: Map<number, DiffInfo>;
     private readonly readOnly: boolean;
+    private collapsedFoldStarts: Set<number> = new Set();
+    private codeFoldingEnabled: boolean;
 
     constructor(
         initialText = '',
@@ -108,6 +115,7 @@ export class AnycodeEditor {
         this.readOnly = options.readOnly ?? false;
         this.focusedDiffEnabled = options.focusedDiffEnabled ?? false;
         this.focusedDiffContextLines = Math.max(0, options.focusedDiffContextLines ?? 3);
+        this.codeFoldingEnabled = options.codeFoldingEnabled ?? true;
         // Set initial cursor position
         if (options.line !== undefined && options.column !== undefined) {
             this.offset = this.code.getOffset(options.line, options.column);
@@ -123,7 +131,7 @@ export class AnycodeEditor {
             addCssToDocument(css, 'anyeditor-theme');
         }
         this.createDomElements();
-        this.renderer = new Renderer(this.container, this.buttonsColumn, this.gutter, this.codeContent);
+        this.renderer = new Renderer(this.container, this.buttonsColumn, this.gutter, this.foldsColumn, this.codeContent);
         this.renderer.setFocusedDiffMode(this.focusedDiffEnabled, this.focusedDiffContextLines);
     }
 
@@ -137,6 +145,9 @@ export class AnycodeEditor {
         this.gutter = document.createElement('div');
         this.gutter.className = 'gutter';
 
+        this.foldsColumn = document.createElement('div');
+        this.foldsColumn.className = 'folds';
+
         this.codeContent = document.createElement('div');
         this.codeContent.className = 'code';
         this.codeContent.setAttribute("contentEditable", this.readOnly ? "false" : "true");
@@ -146,9 +157,13 @@ export class AnycodeEditor {
         if (this.readOnly) {
             this.container.classList.add('readonly');
         }
+        if (!this.codeFoldingEnabled) {
+            this.container.classList.add('no-folding');
+        }
 
         this.container.appendChild(this.buttonsColumn);
         this.container.appendChild(this.gutter);
+        this.container.appendChild(this.foldsColumn);
         this.container.appendChild(this.codeContent);
     }
 
@@ -247,6 +262,10 @@ export class AnycodeEditor {
         return this.code.getContentLength();
     }
 
+    public getFoldRanges(): FoldRange[] {
+        return this.code.getFoldRanges();
+    }
+
     public async init() {
         await this.code.init();
         if (this.readOnly) {
@@ -417,6 +436,7 @@ export class AnycodeEditor {
         this.handleClick = this.handleClick.bind(this);
         this.codeContent.addEventListener('click', this.handleClick);
         this.gutter.addEventListener('click', this.handleClick);
+        this.foldsColumn.addEventListener('click', this.handleClick);
 
         this.handleKeydown = this.handleKeydown.bind(this);
         this.codeContent.addEventListener('keydown', this.handleKeydown);
@@ -450,6 +470,7 @@ export class AnycodeEditor {
         this.container.removeEventListener("scroll", this.handleScroll);
         this.codeContent.removeEventListener('click', this.handleClick);
         this.gutter.removeEventListener('click', this.handleClick);
+        this.foldsColumn.removeEventListener('click', this.handleClick);
         this.codeContent.removeEventListener('keydown', this.handleKeydown);
         this.codeContent.removeEventListener('paste', this.handlePasteEvent);
         this.container.removeEventListener('beforeinput', this.handleBeforeInput);
@@ -505,9 +526,20 @@ export class AnycodeEditor {
             },
             diffs: this.diffs,
             readOnly: this.readOnly,
+            foldRanges: this.code.getFoldRanges(),
+            collapsedFoldStarts: this.collapsedFoldStarts,
+            codeFoldingEnabled: this.codeFoldingEnabled,
         };
     }
 
+    private toggleFoldAtLine(line: number) {
+        if (this.collapsedFoldStarts.has(line)) {
+            this.collapsedFoldStarts.delete(line);
+        } else {
+            this.collapsedFoldStarts.add(line);
+        }
+    }
+
     public render() {
         this.renderer.render(this.getEditorState(), this.search);
     }
@@ -564,6 +596,22 @@ export class AnycodeEditor {
             return;
         }
 
+        const foldToggle = this.codeFoldingEnabled ? (e.target as HTMLElement | null)?.closest('.fold-toggle') as HTMLElement | null : null;
+        if (foldToggle) {
+            const line = Number.parseInt(foldToggle.dataset.line ?? '-1', 10);
+            if (line >= 0) {
+                e.preventDefault();
+                e.stopPropagation();
+                this.toggleFoldAtLine(line);
+                this.renderer.render(this.getEditorState(), this.search);
+                if (!this.readOnly) {
+                    this.codeContent.focus({ preventScroll: true });
+                    this.renderer.renderCursorOrSelection(this.getEditorState(), false);
+                }
+            }
+            return;
+        }
+
         const oldCursor = this.code.getPosition(this.offset);
 
         if (this.selection && this.selection.nonEmpty()) { return; }
@@ -1020,7 +1068,7 @@ export class AnycodeEditor {
     }
 
     private adjustFocusedDiffNavigationOffset(result: ActionResult, action: Action): void {
-        if (!this.focusedDiffEnabled) return;
+        if (!this.focusedDiffEnabled && this.collapsedFoldStarts.size === 0) return;
         if (
             action !== Action.ARROW_LEFT
             && action !== Action.ARROW_RIGHT

anycode-base/src/index.ts

@@ -1,4 +1,4 @@
 export { AnycodeEditor } from './editor';
-export { type Edit, type Change } from './code';
+export { type Edit, type Change, type FoldRange } from './code';
 export { Operation } from './code';
 export { setWasmBasePath } from './utils';

anycode-base/src/lang.ts

@@ -1,5 +1,6 @@
 export interface Lang {
   query: string;
+  foldsQuery?: string;
   indent: {
     width: number;
     unit: string;

anycode-base/src/langs/bash.ts

@@ -75,10 +75,24 @@ const query = `
 let indent = { width: 4, unit: " " };
 let comment = "#";
 
+let foldsQuery = `
+[
+  (function_definition)
+  (if_statement)
+  (for_statement)
+  (while_statement)
+  (case_statement)
+  (case_item)
+  (subshell)
+  (compound_statement)
+  (heredoc_body)
+  (comment)
+] @fold
+`
+
 let executable = true;
 let cmd = "./{file}";
 
-
 export default {
-  query, executable, cmd,  indent, comment
+  query, foldsQuery, executable, cmd, indent, comment
 } satisfies Lang

anycode-base/src/langs/c.ts

@@ -96,9 +96,29 @@ const query = `
 (comment) @comment
 `
 
+let foldsQuery = `
+[
+  (compound_statement)
+  (initializer_list)
+  (field_declaration_list)
+  (comment)
+] @fold
+
+[
+  (struct_specifier)
+  (union_specifier)
+  (enum_specifier)
+  (function_definition)
+  (preproc_if)
+  (preproc_ifdef)
+  (preproc_elif)
+  (preproc_else)
+] @fold
+`
+
 let indent = { width: 4, unit: " " };
 let comment = "//";
 
 export default {
-    query, indent, comment
+    query, foldsQuery, indent, comment
 } satisfies Lang

anycode-base/src/langs/cpp.ts

@@ -166,9 +166,33 @@ const query = `
 "operator" @function
 `
 
+let foldsQuery = `
+[
+  (compound_statement)
+  (initializer_list)
+  (field_declaration_list)
+  (declaration_list)
+  (comment)
+] @fold
+
+[
+  (namespace_definition)
+  (class_specifier)
+  (struct_specifier)
+  (union_specifier)
+  (enum_specifier)
+  (template_declaration)
+  (function_definition)
+  (preproc_if)
+  (preproc_ifdef)
+  (preproc_elif)
+  (preproc_else)
+] @fold
+`
+
 let indent = { width: 4, unit: " " };
 let comment = "//";
 
 export default {
-    query, indent, comment
+    query, foldsQuery, indent, comment
 } satisfies Lang