@termaxjs/editor 0.1.0

package/dist/TermaxEditor.js

@@ -0,0 +1,728 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useEffect, useState, useMemo, useId, useCallback, useImperativeHandle, forwardRef, } from "react";
+import { EditorProvider, useEditorContext } from "@termaxjs/editor-react";
+import { isPositionInRange, getWordRangeAt, getTextInRange, } from "@termaxjs/editor-core";
+import { measureMonospaceFont } from "@termaxjs/editor-canvas";
+import { OffscreenInput } from "./input/OffscreenInput.js";
+import { VirtualizedLines } from "./renderer/VirtualizedLines.js";
+import { computeWindowedRange, measureLongestLine } from "./renderer/windowing.js";
+import { CanvasViewport } from "./renderer/CanvasViewport.js";
+import { Minimap } from "./minimap/Minimap.js";
+import { FindReplace } from "./overlay/FindReplace.js";
+import { HoverTooltip } from "./overlay/HoverTooltip.js";
+import { CompletionMenu } from "./overlay/CompletionMenu.js";
+import { SignatureHelpTooltip } from "./overlay/SignatureHelpTooltip.js";
+import { THEMES, githubDark } from "./themes/index.js";
+import { formatCode } from "./format/formatter.js";
+import { detectLanguageFromPath, getDefaultLanguageAdapter } from "./languages/index.js";
+import { FoldGutter, computeFoldRanges } from "./gutter/FoldGutter.js";
+import { LineNumbers } from "./gutter/LineNumbers.js";
+import { filterAndSortCompletions, parseSnippet } from "./snippet/SnippetEngine.js";
+import { VimEngine } from "./vim/VimState.js";
+import { VimStatusBar } from "./vim/VimStatusBar.js";
+import { StickyScrollHeader } from "./navigation/StickyScrollHeader.js";
+import { GitGutterManager } from "./git/GitGutterManager.js";
+const InnerEditor = forwardRef(function InnerEditor({ language, filePath, languageAdapter, rendererMode, readOnly = false, lineHeight, charWidth: fallbackCharWidth, showLineNumbers, foldable, showMinimap, minimapPosition = "right", minimapWidth = 70, renderMinimap, theme, diagnostics, signatureHelp, vimMode = false, className, style, stickyScroll = true, baseContent, gitGutterMarkers, blameManager, codeLensProvider, showColorSwatches = true, ghostText: propsGhostText, onAcceptGhostText, onDismissGhostText, streamingDiffChunks, onSnapshot, }, ref) {
+    const outerRef = useRef(null);
+    const scrollRef = useRef(null);
+    const inputRef = useRef(null);
+    const measureRef = useRef(null);
+    const vimEngine = useMemo(() => new VimEngine(), []);
+    const [vimState, setVimState] = useState({
+        mode: "NORMAL",
+        buffer: "",
+        ex: "",
+    });
+    const [exactCharWidth, setExactCharWidth] = useState(() => {
+        if (fallbackCharWidth)
+            return fallbackCharWidth;
+        if (typeof document !== "undefined") {
+            const m = measureMonospaceFont("monospace", 13);
+            if (m.charWidth > 0)
+                return m.charWidth;
+        }
+        return 7.8;
+    });
+    const { lines, setContent, getContent, undo, redo, insertText, deleteSelectionOrChar, enter, setCursor, setSelection, addCursor, applyCodeAction, cursor, selection, selections, snapshot, ghostText, setGhostText, acceptGhostText, } = useEditorContext();
+    useEffect(() => {
+        if (propsGhostText !== undefined) {
+            setGhostText(propsGhostText);
+        }
+    }, [propsGhostText, setGhostText]);
+    const onSnapshotRef = useRef(onSnapshot);
+    onSnapshotRef.current = onSnapshot;
+    useEffect(() => {
+        onSnapshotRef.current?.(snapshot);
+    }, [snapshot]);
+    const [foldedLines, setFoldedLines] = useState(new Set());
+    const [showFind, setShowFind] = useState(false);
+    // Active language adapter
+    const activeLangAdapter = useMemo(() => {
+        return languageAdapter || getDefaultLanguageAdapter();
+    }, [languageAdapter]);
+    const activeDiagnostic = useMemo(() => {
+        if (!diagnostics || diagnostics.length === 0)
+            return null;
+        return diagnostics.find((d) => isPositionInRange(cursor, d.range)) ?? null;
+    }, [diagnostics, cursor]);
+    const [completionItems, setCompletionItems] = useState([]);
+    const [completionIndex, setCompletionIndex] = useState(0);
+    const [showCompletions, setShowCompletions] = useState(false);
+    const listboxId = useId();
+    const completionsVisible = showCompletions && completionItems.length > 0;
+    const activeOptionId = `${listboxId}-option-${completionIndex}`;
+    useEffect(() => {
+        if (!activeLangAdapter.provideCompletionItems) {
+            setShowCompletions(false);
+            return;
+        }
+        const curLine = lines[cursor.line] ?? "";
+        const wordRange = getWordRangeAt(curLine, cursor.line, cursor.column);
+        const prefix = curLine.slice(wordRange.start.column, cursor.column);
+        if (prefix.length >= 1) {
+            void activeLangAdapter.provideCompletionItems(language, cursor, prefix).then((items) => {
+                if (items && items.length > 0) {
+                    const filtered = filterAndSortCompletions(prefix, items);
+                    if (filtered.length > 0) {
+                        setCompletionItems(filtered);
+                        setCompletionIndex(0);
+                        setShowCompletions(true);
+                        return;
+                    }
+                }
+                setShowCompletions(false);
+            });
+        }
+        else {
+            setShowCompletions(false);
+        }
+    }, [cursor, lines, activeLangAdapter, language]);
+    const handleAcceptCompletion = useCallback((item) => {
+        const rawInsert = item.insertText || item.label;
+        const curLine = lines[cursor.line] ?? "";
+        const wordRange = getWordRangeAt(curLine, cursor.line, cursor.column);
+        setSelection({ start: wordRange.start, end: cursor });
+        // If snippet template
+        if (item.kind === "snippet" || rawInsert.includes("$")) {
+            const parsed = parseSnippet(rawInsert);
+            insertText(parsed.text);
+        }
+        else {
+            insertText(rawInsert);
+        }
+        setShowCompletions(false);
+    }, [cursor, lines, setSelection, insertText]);
+    const handleVimKeyDown = useCallback((e) => {
+        if (!vimMode)
+            return false;
+        const ctx = {
+            lines,
+            cursor,
+            selection,
+            selections,
+            insertText,
+            deleteSelectionOrChar,
+            enter,
+            setCursor,
+            setSelection,
+            setSelections: (sels) => {
+                if (sels && sels.length > 0) {
+                    setSelection({ start: sels[0].anchor, end: sels[0].head });
+                }
+            },
+            setContent,
+            undo,
+            redo,
+        };
+        const handled = vimEngine.handleKey(e.key, ctx, {
+            ctrlKey: e.ctrlKey,
+            metaKey: e.metaKey,
+            preventDefault: () => e.preventDefault(),
+        });
+        setVimState({
+            mode: vimEngine.mode,
+            buffer: vimEngine.commandBuffer,
+            ex: vimEngine.exInput,
+        });
+        return handled;
+    }, [
+        vimMode,
+        vimEngine,
+        lines,
+        cursor,
+        selection,
+        selections,
+        insertText,
+        deleteSelectionOrChar,
+        enter,
+        setCursor,
+        setSelection,
+        setContent,
+        undo,
+        redo,
+    ]);
+    // Measure exact monospace character width
+    useEffect(() => {
+        if (typeof document !== "undefined") {
+            const m = measureMonospaceFont("monospace", 13);
+            if (m.charWidth > 0) {
+                setExactCharWidth(m.charWidth);
+                return;
+            }
+        }
+        if (measureRef.current) {
+            const rect = measureRef.current.getBoundingClientRect();
+            if (rect.width > 0) {
+                setExactCharWidth(rect.width / 10);
+            }
+        }
+    }, []);
+    const activeTheme = typeof theme === "string"
+        ? THEMES[theme] || (theme === "light" ? THEMES.githubLight : githubDark)
+        : theme || githubDark;
+    const focusInput = useCallback(() => {
+        inputRef.current?.focus();
+    }, []);
+    const isDraggingRef = useRef(false);
+    const dragStartRef = useRef(null);
+    const linesRef = useRef(lines);
+    linesRef.current = lines;
+    const cursorRef = useRef(cursor);
+    cursorRef.current = cursor;
+    const charWidthRef = useRef(exactCharWidth);
+    charWidthRef.current = exactCharWidth;
+    const lineHeightRef = useRef(lineHeight);
+    lineHeightRef.current = lineHeight;
+    const computeCanvasPosition = useCallback((clientX, clientY) => {
+        const scrollEl = scrollRef.current;
+        if (!scrollEl)
+            return { line: 0, column: 0 };
+        const rect = scrollEl.getBoundingClientRect();
+        const scrollTop = scrollEl.scrollTop;
+        const scrollLeft = scrollEl.scrollLeft;
+        const currentLines = linesRef.current;
+        const currentLineHeight = lineHeightRef.current;
+        const currentCharWidth = charWidthRef.current;
+        const maxDigits = Math.max(2, String(currentLines.length).length);
+        const gutterWidth = showLineNumbers ? Math.round(maxDigits * currentCharWidth + 24) : 0;
+        const textStartX = gutterWidth + 8;
+        const clickX = clientX - rect.left - textStartX + scrollLeft;
+        const clickY = clientY - rect.top + scrollTop;
+        const lineIdx = Math.max(0, Math.min(currentLines.length - 1, Math.floor(clickY / currentLineHeight)));
+        const lineText = currentLines[lineIdx] ?? "";
+        const colIdx = clickX <= 0
+            ? 0
+            : Math.max(0, Math.min(lineText.length, Math.round(clickX / currentCharWidth)));
+        return { line: lineIdx, column: colIdx };
+    }, [showLineNumbers]);
+    const handleCanvasMouseDown = (e) => {
+        if (e.button !== 0)
+            return;
+        const scrollEl = scrollRef.current;
+        if (!scrollEl)
+            return;
+        const rect = scrollEl.getBoundingClientRect();
+        // Ignore clicks on native scrollbars
+        if (e.clientX >= rect.left + scrollEl.clientWidth ||
+            e.clientY >= rect.top + scrollEl.clientHeight) {
+            return;
+        }
+        e.preventDefault();
+        focusInput();
+        const pos = computeCanvasPosition(e.clientX, e.clientY);
+        if (e.altKey) {
+            isDraggingRef.current = false;
+            dragStartRef.current = null;
+            addCursor(pos);
+            return;
+        }
+        if (e.shiftKey && cursorRef.current) {
+            isDraggingRef.current = false;
+            dragStartRef.current = null;
+            setCursor(pos, true);
+            setSelection({ start: cursorRef.current, end: pos });
+        }
+        else if (e.detail === 2) {
+            isDraggingRef.current = false;
+            dragStartRef.current = null;
+            // Double-click word selection
+            const lineText = linesRef.current[pos.line] ?? "";
+            const wordRange = getWordRangeAt(lineText, pos.line, pos.column);
+            setCursor(wordRange.end, true);
+            setSelection(wordRange);
+        }
+        else if (e.detail === 3) {
+            isDraggingRef.current = false;
+            dragStartRef.current = null;
+            // Triple-click line selection
+            const lineText = linesRef.current[pos.line] ?? "";
+            setCursor({ line: pos.line, column: lineText.length }, true);
+            setSelection({
+                start: { line: pos.line, column: 0 },
+                end: { line: pos.line, column: lineText.length },
+            });
+        }
+        else {
+            isDraggingRef.current = true;
+            dragStartRef.current = pos;
+            setSelection(null);
+            setCursor(pos);
+        }
+    };
+    useEffect(() => {
+        const handleMouseMove = (e) => {
+            if (!isDraggingRef.current || !dragStartRef.current)
+                return;
+            e.preventDefault();
+            const scrollEl = scrollRef.current;
+            if (scrollEl) {
+                const rect = scrollEl.getBoundingClientRect();
+                const SCROLL_MARGIN = 20;
+                const SCROLL_SPEED = 15;
+                if (e.clientY < rect.top + SCROLL_MARGIN && scrollEl.scrollTop > 0) {
+                    scrollEl.scrollTop -= SCROLL_SPEED;
+                }
+                else if (e.clientY > rect.bottom - SCROLL_MARGIN) {
+                    scrollEl.scrollTop += SCROLL_SPEED;
+                }
+            }
+            const pos = computeCanvasPosition(e.clientX, e.clientY);
+            if (pos.line === dragStartRef.current.line && pos.column === dragStartRef.current.column) {
+                setSelection(null);
+                setCursor(pos);
+            }
+            else {
+                setCursor(pos, true);
+                setSelection({ start: dragStartRef.current, end: pos });
+            }
+        };
+        const handleMouseUp = () => {
+            isDraggingRef.current = false;
+            dragStartRef.current = null;
+        };
+        window.addEventListener("mousemove", handleMouseMove);
+        window.addEventListener("mouseup", handleMouseUp);
+        return () => {
+            window.removeEventListener("mousemove", handleMouseMove);
+            window.removeEventListener("mouseup", handleMouseUp);
+        };
+    }, [computeCanvasPosition, setCursor, setSelection]);
+    const scrollToScrollTop = useCallback((targetTop) => {
+        if (scrollRef.current) {
+            scrollRef.current.scrollTop = targetTop;
+        }
+    }, []);
+    const scrollToLine = useCallback((lineIdx) => {
+        scrollToScrollTop(lineIdx * lineHeight);
+    }, [scrollToScrollTop, lineHeight]);
+    const handleToggleFold = (lineIdx) => {
+        setFoldedLines((prev) => {
+            const next = new Set(prev);
+            if (next.has(lineIdx))
+                next.delete(lineIdx);
+            else
+                next.add(lineIdx);
+            return next;
+        });
+    };
+    const formatDocument = useCallback(async () => {
+        if (readOnly)
+            return;
+        const currentText = getContent();
+        const formatted = languageAdapter?.formatDocument
+            ? await languageAdapter.formatDocument(language, currentText)
+            : await formatCode(currentText, language);
+        if (formatted !== currentText) {
+            setContent(formatted);
+        }
+    }, [getContent, language, languageAdapter, setContent, readOnly]);
+    const [searchQuery, setSearchQuery] = useState("");
+    const [searchMatchIndex, setSearchMatchIndex] = useState(0);
+    const searchMatches = useMemo(() => {
+        if (!searchQuery)
+            return [];
+        const results = [];
+        try {
+            const escaped = searchQuery.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+            const regex = new RegExp(escaped, "gi");
+            lines.forEach((lineText, lineIdx) => {
+                for (;;) {
+                    const match = regex.exec(lineText);
+                    if (match === null)
+                        break;
+                    results.push({
+                        line: lineIdx,
+                        column: match.index,
+                        length: match[0].length,
+                    });
+                    if (!regex.global)
+                        break;
+                }
+            });
+        }
+        catch {
+            // Ignore regex errors
+        }
+        return results;
+    }, [lines, searchQuery]);
+    const goToSearchMatch = useCallback((idx) => {
+        if (searchMatches.length === 0)
+            return;
+        const bounded = (idx + searchMatches.length) % searchMatches.length;
+        setSearchMatchIndex(bounded);
+        const m = searchMatches[bounded];
+        if (!m)
+            return;
+        const start = { line: m.line, column: m.column };
+        const end = { line: m.line, column: m.column + m.length };
+        setCursor(end);
+        setSelection({ start, end });
+        scrollToLine(m.line);
+    }, [searchMatches, setCursor, setSelection, scrollToLine]);
+    useImperativeHandle(ref, () => ({
+        focus: focusInput,
+        format: formatDocument,
+        getValue: getContent,
+        setValue: (val) => {
+            if (!readOnly)
+                setContent(val);
+        },
+        undo: () => {
+            if (!readOnly)
+                undo();
+        },
+        redo: () => {
+            if (!readOnly)
+                redo();
+        },
+        gotoLine: (line) => {
+            setCursor({ line: Math.max(0, line - 1), column: 0 });
+            scrollToLine(line - 1);
+        },
+        find: (q) => {
+            setSearchQuery(q);
+            setSearchMatchIndex(0);
+            if (q) {
+                const escaped = q.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+                const regex = new RegExp(escaped, "gi");
+                for (let lineIdx = 0; lineIdx < lines.length; lineIdx++) {
+                    const m = regex.exec(lines[lineIdx] ?? "");
+                    if (m) {
+                        const start = { line: lineIdx, column: m.index };
+                        const end = { line: lineIdx, column: m.index + m[0].length };
+                        setCursor(end);
+                        setSelection({ start, end });
+                        scrollToLine(lineIdx);
+                        break;
+                    }
+                }
+            }
+        },
+        findNext: () => {
+            goToSearchMatch(searchMatchIndex + 1);
+        },
+        findPrevious: () => {
+            goToSearchMatch(searchMatchIndex - 1);
+        },
+        setQuery: (q) => {
+            setSearchQuery(q);
+        },
+        clearQuery: () => {
+            setSearchQuery("");
+        },
+        hasSelection: () => {
+            if (!selection)
+                return false;
+            const { start, end } = selection;
+            return start.line !== end.line || start.column !== end.column;
+        },
+        getSelection: () => {
+            return getTextInRange(lines, selection);
+        },
+        setGhostText: (ghost) => {
+            setGhostText(ghost);
+        },
+        acceptGhostText: (mode = "full") => {
+            acceptGhostText(mode);
+            onAcceptGhostText?.(mode);
+        },
+        dismissGhostText: () => {
+            setGhostText(null);
+            onDismissGhostText?.();
+        },
+    }), [
+        focusInput,
+        formatDocument,
+        getContent,
+        setContent,
+        undo,
+        redo,
+        setCursor,
+        setSelection,
+        readOnly,
+        lines,
+        selection,
+        searchMatchIndex,
+        goToSearchMatch,
+        scrollToLine,
+        setGhostText,
+        acceptGhostText,
+        onAcceptGhostText,
+        onDismissGhostText,
+    ]);
+    const handleKeyDown = (e) => {
+        // Intercept Tab / Escape for active AI Ghost Text
+        if (ghostText) {
+            if (e.key === "Tab") {
+                e.preventDefault();
+                acceptGhostText("full");
+                onAcceptGhostText?.("full");
+                return;
+            }
+            if (e.key === "Escape") {
+                e.preventDefault();
+                setGhostText(null);
+                onDismissGhostText?.();
+                return;
+            }
+        }
+        // Find shortcut (Cmd+F / Ctrl+F)
+        if ((e.metaKey || e.ctrlKey) && (e.key === "f" || e.key === "F")) {
+            e.preventDefault();
+            setShowFind((prev) => !prev);
+            return;
+        }
+        // Format Document shortcut (Alt+Shift+F or Cmd+Shift+I)
+        if ((e.altKey && e.shiftKey && (e.key === "f" || e.key === "F")) ||
+            (e.metaKey && e.shiftKey && (e.key === "i" || e.key === "I"))) {
+            e.preventDefault();
+            void formatDocument();
+            return;
+        }
+    };
+    const [viewportState, setViewportState] = useState({
+        scrollTop: 0,
+        scrollLeft: 0,
+        clientHeight: 600,
+        clientWidth: 800,
+    });
+    // biome-ignore lint/correctness/useExhaustiveDependencies: the scroll container element swaps when rendererMode changes, so the listeners must re-attach then and only then.
+    useEffect(() => {
+        const scrollEl = scrollRef.current;
+        if (!scrollEl)
+            return;
+        const updateViewport = () => {
+            setViewportState({
+                scrollTop: scrollEl.scrollTop,
+                scrollLeft: scrollEl.scrollLeft,
+                clientHeight: scrollEl.clientHeight || 600,
+                clientWidth: scrollEl.clientWidth || 800,
+            });
+        };
+        updateViewport();
+        let rafId = null;
+        const onScroll = () => {
+            if (rafId !== null)
+                cancelAnimationFrame(rafId);
+            rafId = requestAnimationFrame(() => {
+                updateViewport();
+                rafId = null;
+            });
+        };
+        scrollEl.addEventListener("scroll", onScroll, { passive: true });
+        window.addEventListener("resize", onScroll, { passive: true });
+        return () => {
+            scrollEl.removeEventListener("scroll", onScroll);
+            window.removeEventListener("resize", onScroll);
+            if (rafId !== null)
+                cancelAnimationFrame(rafId);
+        };
+    }, [rendererMode]);
+    const foldRanges = useMemo(() => {
+        return computeFoldRanges(lines);
+    }, [lines]);
+    const foldRangesList = useMemo(() => {
+        const list = [];
+        foldRanges.forEach((endLine, startLine) => {
+            list.push({ startLine, endLine });
+        });
+        return list;
+    }, [foldRanges]);
+    const gitGutterManager = useMemo(() => new GitGutterManager(), []);
+    const activeGitMarkers = useMemo(() => {
+        if (gitGutterMarkers)
+            return gitGutterMarkers;
+        if (baseContent !== undefined) {
+            return gitGutterManager.update(baseContent, lines.join("\n"));
+        }
+        return undefined;
+    }, [gitGutterMarkers, baseContent, lines, gitGutterManager]);
+    const visualLineIndices = useMemo(() => {
+        const result = [];
+        let skipUntil = -1;
+        for (let i = 0; i < lines.length; i++) {
+            if (skipUntil >= 0 && i <= skipUntil) {
+                continue;
+            }
+            result.push(i);
+            if (foldedLines.has(i)) {
+                const endLine = foldRanges.get(i);
+                if (endLine !== undefined && endLine > i) {
+                    skipUntil = endLine;
+                }
+            }
+        }
+        return result;
+    }, [lines, foldedLines, foldRanges]);
+    const { startVisualIndex, endVisualIndex, topSpacerHeight, bottomSpacerHeight } = computeWindowedRange({
+        visualLineCount: visualLineIndices.length,
+        scrollTop: viewportState.scrollTop,
+        clientHeight: viewportState.clientHeight,
+        lineHeight,
+    });
+    const windowedLineIndices = useMemo(() => {
+        if (visualLineIndices.length === 0)
+            return [];
+        return visualLineIndices.slice(startVisualIndex, endVisualIndex + 1);
+    }, [visualLineIndices, startVisualIndex, endVisualIndex]);
+    const totalContentHeight = Math.max(1, visualLineIndices.length * lineHeight);
+    const longestLineLen = useMemo(() => measureLongestLine(lines), [lines]);
+    const totalContentWidth = longestLineLen * exactCharWidth + 200;
+    return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: container-level shortcut keys for events bubbling up from the focused textarea; the container itself takes no focus.
+    _jsxs("div", { ref: outerRef, onKeyDown: handleKeyDown, className: ["termax-editor-frame", className].filter(Boolean).join(" "), style: {
+            position: "relative",
+            display: "flex",
+            flexDirection: "column",
+            overflow: "hidden",
+            backgroundColor: activeTheme.background,
+            color: activeTheme.foreground,
+            fontFamily: "monospace",
+            fontSize: "13px",
+            height: "100%",
+            width: "100%",
+            border: `1px solid ${activeTheme.border}`,
+            borderRadius: "6px",
+            boxSizing: "border-box",
+            ...style,
+        }, children: [_jsx("style", { children: `
+          @keyframes termax-blink {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0; }
+          }
+          .termax-editor-frame:focus-within {
+            outline: 1px solid #388bfd;
+            outline-offset: -1px;
+          }
+        ` }), _jsx("span", { ref: measureRef, style: {
+                    position: "absolute",
+                    top: -9999,
+                    left: -9999,
+                    visibility: "hidden",
+                    pointerEvents: "none",
+                    fontFamily: "inherit",
+                    fontSize: "inherit",
+                    whiteSpace: "pre",
+                }, children: "0123456789" }), showFind && _jsx(FindReplace, { onClose: () => setShowFind(false), onScrollToLine: scrollToLine }), _jsx(OffscreenInput, { inputRef: inputRef, lineHeight: lineHeight, charWidth: exactCharWidth, readOnly: readOnly, completionKeys: {
+                    visible: completionsVisible,
+                    listboxId,
+                    activeId: activeOptionId,
+                    onCycle: (delta) => setCompletionIndex((i) => (i + delta + completionItems.length) % completionItems.length),
+                    onAccept: () => {
+                        const item = completionItems[completionIndex];
+                        if (item)
+                            handleAcceptCompletion(item);
+                    },
+                    onClose: () => setShowCompletions(false),
+                }, scrollTop: viewportState.scrollTop, scrollLeft: viewportState.scrollLeft, gutterWidth: showLineNumbers
+                    ? Math.round(Math.max(2, String(lines.length).length) * exactCharWidth + 24)
+                    : 0, onKeyDown: handleVimKeyDown }), _jsxs("div", { style: {
+                    position: "relative",
+                    display: "flex",
+                    flexDirection: "row",
+                    flex: 1,
+                    minHeight: 0,
+                    width: "100%",
+                    height: "100%",
+                    overflow: "hidden",
+                }, children: [showMinimap &&
+                        minimapPosition === "left" &&
+                        (renderMinimap ? (renderMinimap({
+                            width: minimapWidth,
+                            position: "left",
+                            lineHeight,
+                            viewportHeight: viewportState.clientHeight,
+                            scrollTop: viewportState.scrollTop,
+                            onScrollTo: scrollToScrollTop,
+                        })) : (_jsx(Minimap, { width: minimapWidth, position: "left", lineHeight: lineHeight, viewportHeight: viewportState.clientHeight, scrollTop: viewportState.scrollTop, onScrollTo: scrollToScrollTop }))), _jsxs("div", { style: {
+                            position: "relative",
+                            flex: 1,
+                            minWidth: 0,
+                            height: "100%",
+                            overflow: "hidden",
+                        }, children: [stickyScroll && (_jsx(StickyScrollHeader, { lines: lines, foldRanges: foldRangesList, topVisibleLine: Math.floor(viewportState.scrollTop / lineHeight), lineHeight: lineHeight, onJumpToLine: (line) => {
+                                    setCursor({ line, column: 0 });
+                                    scrollToLine(line);
+                                    focusInput();
+                                } })), rendererMode === "canvas" ? (_jsxs(_Fragment, { children: [_jsx(CanvasViewport, { lines: lines, language: language, languageAdapter: activeLangAdapter, theme: activeTheme, fontFamily: "monospace", fontSize: 13, lineHeight: lineHeight, charWidth: exactCharWidth, showLineNumbers: showLineNumbers, cursor: cursor, selection: selection, selections: selections, diagnostics: diagnostics, scrollContainerRef: scrollRef, onSetCursor: setCursor, onSetSelection: setSelection, onFocusInput: focusInput }), _jsx("div", { ref: scrollRef, onMouseDown: handleCanvasMouseDown, style: {
+                                            position: "absolute",
+                                            inset: 0,
+                                            overflow: "auto",
+                                            zIndex: 1,
+                                            pointerEvents: "auto",
+                                            cursor: "text",
+                                            userSelect: "none",
+                                            WebkitUserSelect: "none",
+                                        }, children: _jsx("div", { style: {
+                                                height: totalContentHeight,
+                                                width: totalContentWidth,
+                                                pointerEvents: "none",
+                                            } }) })] })) : (_jsx("div", { ref: scrollRef, style: {
+                                    width: "100%",
+                                    height: "100%",
+                                    overflow: "auto",
+                                }, children: _jsxs("div", { style: {
+                                        display: "flex",
+                                        width: "max-content",
+                                        minWidth: "100%",
+                                        minHeight: "100%",
+                                    }, children: [showLineNumbers && (_jsx(LineNumbers, { lineHeight: lineHeight, scrollTop: viewportState.scrollTop, viewportHeight: viewportState.clientHeight, totalLines: lines.length, onFocusInput: focusInput, gitGutterMarkers: activeGitMarkers })), foldable && (_jsx(FoldGutter, { lineHeight: lineHeight, scrollTop: viewportState.scrollTop, viewportHeight: viewportState.clientHeight, totalLines: lines.length, foldedLines: foldedLines, foldRanges: foldRanges, onToggleFold: handleToggleFold })), _jsx(VirtualizedLines, { lineHeight: lineHeight, charWidth: exactCharWidth, language: language, filePath: filePath, onFocusInput: focusInput, visibleLineIndices: windowedLineIndices, foldedLines: foldedLines, foldRanges: foldRanges, onToggleFold: handleToggleFold, topSpacerHeight: topSpacerHeight, bottomSpacerHeight: bottomSpacerHeight, diagnostics: diagnostics, inlineBlame: blameManager, codeLensProvider: codeLensProvider, showColorSwatches: showColorSwatches, streamingDiffChunks: streamingDiffChunks })] }) }))] }), showMinimap &&
+                        minimapPosition !== "left" &&
+                        (renderMinimap ? (renderMinimap({
+                            width: minimapWidth,
+                            position: "right",
+                            lineHeight,
+                            viewportHeight: viewportState.clientHeight,
+                            scrollTop: viewportState.scrollTop,
+                            onScrollTo: scrollToScrollTop,
+                        })) : (_jsx(Minimap, { width: minimapWidth, position: "right", lineHeight: lineHeight, viewportHeight: viewportState.clientHeight, scrollTop: viewportState.scrollTop, onScrollTo: scrollToScrollTop })))] }), activeDiagnostic && (_jsx(HoverTooltip, { visible: true, x: (showLineNumbers
+                    ? Math.round(Math.max(2, String(lines.length).length) * exactCharWidth + 24)
+                    : 0) +
+                    8 +
+                    activeDiagnostic.range.start.column * exactCharWidth -
+                    viewportState.scrollLeft, y: (activeDiagnostic.range.start.line + 1) * lineHeight - viewportState.scrollTop, diagnostic: activeDiagnostic, onApplyCodeAction: applyCodeAction })), signatureHelp && (_jsx(SignatureHelpTooltip, { visible: true, x: (showLineNumbers
+                    ? Math.round(Math.max(2, String(lines.length).length) * exactCharWidth + 24)
+                    : 0) +
+                    8 +
+                    cursor.column * exactCharWidth -
+                    viewportState.scrollLeft, y: cursor.line * lineHeight - viewportState.scrollTop, signatureHelp: signatureHelp })), showCompletions && completionItems.length > 0 && (_jsx(CompletionMenu, { visible: showCompletions, items: completionItems, selectedIndex: completionIndex, listboxId: listboxId, x: (showLineNumbers
+                    ? Math.round(Math.max(2, String(lines.length).length) * exactCharWidth + 24)
+                    : 0) +
+                    8 +
+                    cursor.column * exactCharWidth -
+                    viewportState.scrollLeft, y: (cursor.line + 1) * lineHeight - viewportState.scrollTop, onSelect: handleAcceptCompletion, onSelectIndex: setCompletionIndex, onClose: () => setShowCompletions(false) })), vimMode && (_jsx(VimStatusBar, { mode: vimState.mode, commandBuffer: vimState.buffer, exInput: vimState.ex }))] }));
+});
+export const TermaxEditor = forwardRef(function TermaxEditor({ defaultValue = "", value, language: explicitLanguage, filePath, adapter, languageAdapter, rendererMode = "canvas", onChange, readOnly = false, lineHeight = 20, charWidth = 7.8, showLineNumbers = true, foldable = true, showMinimap = false, minimapPosition = "right", minimapWidth = 70, renderMinimap, theme = "githubDark", diagnostics, signatureHelp, vimMode = false, className, style, stickyScroll = true, baseContent, gitGutterMarkers, blameManager, codeLensProvider, showColorSwatches = true, ghostText, onAcceptGhostText, onDismissGhostText, streamingDiffChunks, onSnapshot, }, ref) {
+    const language = useMemo(() => {
+        if (explicitLanguage)
+            return explicitLanguage;
+        if (filePath)
+            return detectLanguageFromPath(filePath);
+        return "typescript";
+    }, [explicitLanguage, filePath]);
+    return (_jsx(EditorProvider, { initialContent: value ?? defaultValue, adapter: adapter, 
+        // Keying the adapter buffer by path keeps two editors on different
+        // files from sharing one host buffer.
+        bufferId: filePath ?? "default", onChange: onChange, children: _jsx(InnerEditor, { ref: ref, language: language, filePath: filePath, languageAdapter: languageAdapter, rendererMode: rendererMode, readOnly: readOnly, lineHeight: lineHeight, charWidth: charWidth, showLineNumbers: showLineNumbers, foldable: foldable, showMinimap: showMinimap, minimapPosition: minimapPosition, minimapWidth: minimapWidth, renderMinimap: renderMinimap, theme: theme, diagnostics: diagnostics, signatureHelp: signatureHelp, vimMode: vimMode, className: className, style: style, stickyScroll: stickyScroll, baseContent: baseContent, gitGutterMarkers: gitGutterMarkers, blameManager: blameManager, codeLensProvider: codeLensProvider, showColorSwatches: showColorSwatches, ghostText: ghostText, onAcceptGhostText: onAcceptGhostText, onDismissGhostText: onDismissGhostText, streamingDiffChunks: streamingDiffChunks, onSnapshot: onSnapshot }) }, filePath ?? "default"));
+});
+//# sourceMappingURL=TermaxEditor.js.map