@codingame/monaco-vscode-api 13.1.6 → 14.0.0

package/vscode/src/vs/editor/contrib/inlineCompletions/browser/view/ghostText/ghostTextView.js

@@ -19,7 +19,6 @@ import { Range } from '../../../../../common/core/range.js';
 import { StringBuilder } from '../../../../../common/core/stringBuilder.js';
 import { ILanguageService } from '../../../../../common/languages/language.js';
 import { InjectedTextCursorStops, PositionAffinity } from '../../../../../common/model.js';
-import { LineEditWithAdditionalLines } from '../../../../../common/tokenizationTextModelPart.js';
 import { LineTokens } from '../../../../../common/tokens/lineTokens.js';
 import { LineDecoration } from '../../../../../common/viewLayout/lineDecorations.js';
 import { renderViewLine, RenderLineInput } from '../../../../../common/viewLayout/viewLineRenderer.js';
@@ -29,14 +28,24 @@ import { ColumnRange } from '../../utils.js';
 import './ghostTextView.css.js';
 
 let GhostTextView = class GhostTextView extends Disposable {
-    constructor(_editor, _model, _languageService) {
+    constructor(_editor, _model, _options, _shouldKeepCursorStable, _languageService) {
         super();
         this._editor = _editor;
         this._model = _model;
+        this._options = _options;
+        this._shouldKeepCursorStable = _shouldKeepCursorStable;
         this._languageService = _languageService;
         this._isDisposed = observableValue(this, false);
         this._editorObs = observableCodeEditor(this._editor);
-        this._useSyntaxHighlighting = ( this._editorObs.getOption(EditorOption.inlineSuggest).map(v => v.syntaxHighlightingEnabled));
+        this._useSyntaxHighlighting = ( this._options.map(o => o.syntaxHighlightingEnabled));
+        this._extraClassNames = derived(this, reader => {
+            const extraClasses = [...(this._options.read(reader).extraClasses ?? [])];
+            if (this._useSyntaxHighlighting.read(reader)) {
+                extraClasses.push('syntax-highlighted');
+            }
+            const extraClassNames = ( extraClasses.map(c => ` ${c}`)).join('');
+            return extraClassNames;
+        });
         this.uiState = derived(this, reader => {
             if (this._isDisposed.read(reader)) {
                 return undefined;
@@ -51,16 +60,17 @@ let GhostTextView = class GhostTextView extends Disposable {
             }
             const replacedRange = ghostText instanceof GhostTextReplacement ? ghostText.columnRange : undefined;
             const syntaxHighlightingEnabled = this._useSyntaxHighlighting.read(reader);
-            const extraClassName = syntaxHighlightingEnabled ? ' syntax-highlighted' : '';
-            const { inlineTexts, additionalLines, hiddenRange } = computeGhostTextViewData(ghostText, textModel, 'ghost-text' + extraClassName);
+            const extraClassNames = this._extraClassNames.read(reader);
+            const { inlineTexts, additionalLines, hiddenRange } = computeGhostTextViewData(ghostText, textModel, 'ghost-text' + extraClassNames);
+            const currentLine = textModel.getLineContent(ghostText.lineNumber);
             const edit = ( new OffsetEdit(( inlineTexts.map(t => SingleOffsetEdit.insert(t.column - 1, t.text)))));
-            const tokens = syntaxHighlightingEnabled ? textModel.tokenization.tokenizeLineWithEdit(ghostText.lineNumber, ( new LineEditWithAdditionalLines(edit, ( additionalLines.map(l => l.content))))) : undefined;
+            const tokens = syntaxHighlightingEnabled ? textModel.tokenization.tokenizeLinesAt(ghostText.lineNumber, [edit.apply(currentLine), ...( additionalLines.map(l => l.content))]) : undefined;
             const newRanges = edit.getNewTextRanges();
             const inlineTextsWithTokens = ( inlineTexts.map(
-                (t, idx) => ({ ...t, tokens: tokens?.mainLineTokens?.getTokensInRange(newRanges[idx]) })
+                (t, idx) => ({ ...t, tokens: tokens?.[0]?.getTokensInRange(newRanges[idx]) })
             ));
             const tokenizedAdditionalLines = ( additionalLines.map((l, idx) => ({
-                content: tokens?.additionalLines?.[idx] ?? LineTokens.createEmpty(l.content, this._languageService.languageIdCodec),
+                content: tokens?.[idx + 1] ?? LineTokens.createEmpty(l.content, this._languageService.languageIdCodec),
                 decorations: l.decorations,
             })));
             return {
@@ -80,11 +90,11 @@ let GhostTextView = class GhostTextView extends Disposable {
                 return [];
             }
             const decorations = [];
-            const extraClassName = uiState.syntaxHighlightingEnabled ? ' syntax-highlighted' : '';
+            const extraClassNames = this._extraClassNames.read(reader);
             if (uiState.replacedRange) {
                 decorations.push({
                     range: uiState.replacedRange.toRange(uiState.lineNumber),
-                    options: { inlineClassName: 'inline-completion-text-to-replace' + extraClassName, description: 'GhostTextReplacement' }
+                    options: { inlineClassName: 'inline-completion-text-to-replace' + extraClassNames, description: 'GhostTextReplacement' }
                 });
             }
             if (uiState.hiddenRange) {
@@ -101,7 +111,7 @@ let GhostTextView = class GhostTextView extends Disposable {
                         after: {
                             content: p.text,
                             tokens: p.tokens,
-                            inlineClassName: p.preview ? 'ghost-text-decoration-preview' : 'ghost-text-decoration' + extraClassName,
+                            inlineClassName: p.preview ? 'ghost-text-decoration-preview' : 'ghost-text-decoration' + extraClassNames,
                             cursorStops: InjectedTextCursorStops.Left
                         },
                         showIfCollapsed: true,
@@ -118,7 +128,11 @@ let GhostTextView = class GhostTextView extends Disposable {
                 minReservedLineCount: uiState.additionalReservedLineCount,
                 targetTextModel: uiState.targetTextModel,
             } : undefined;
-        }))));
+        }), this._shouldKeepCursorStable)));
+        this.height = derived(this, reader => {
+            const lineHeight = this._editorObs.getOption(EditorOption.lineHeight).read(reader);
+            return lineHeight + (this.additionalLinesWidget.viewZoneHeight.read(reader) ?? 0);
+        });
         this._register(toDisposable(() => { this._isDisposed.set(true, undefined); }));
         this._register(this._editorObs.setDecorations(this.decorations));
     }
@@ -127,7 +141,7 @@ let GhostTextView = class GhostTextView extends Disposable {
     }
 };
 GhostTextView = ( __decorate([
-    ( __param(2, ILanguageService))
+    ( __param(4, ILanguageService))
 ], GhostTextView));
 function computeGhostTextViewData(ghostText, textModel, ghostTextClassName) {
     const inlineTexts = [];
@@ -184,12 +198,14 @@ function computeGhostTextViewData(ghostText, textModel, ghostTextClassName) {
     };
 }
 class AdditionalLinesWidget extends Disposable {
-    get viewZoneId() { return this._viewZoneId; }
-    constructor(editor, lines) {
+    get viewZoneId() { return this._viewZoneInfo?.viewZoneId; }
+    get viewZoneHeight() { return this._viewZoneHeight; }
+    constructor(editor, lines, shouldKeepCursorStable) {
         super();
         this.editor = editor;
         this.lines = lines;
-        this._viewZoneId = undefined;
+        this.shouldKeepCursorStable = shouldKeepCursorStable;
+        this._viewZoneHeight = observableValue('viewZoneHeight', undefined);
         this.editorOptionsChanged = observableSignalFromEvent('editorOptionChanged', Event.filter(this.editor.onDidChangeConfiguration, e => e.hasChanged(EditorOption.disableMonospaceOptimizations)
             || e.hasChanged(EditorOption.stopRenderingLineAfter)
             || e.hasChanged(EditorOption.renderWhitespace)
@@ -214,10 +230,7 @@ class AdditionalLinesWidget extends Disposable {
     }
     clear() {
         this.editor.changeViewZones((changeAccessor) => {
-            if (this._viewZoneId) {
-                changeAccessor.removeZone(this._viewZoneId);
-                this._viewZoneId = undefined;
-            }
+            this.removeActiveViewZone(changeAccessor);
         });
     }
     updateLines(lineNumber, additionalLines, minReservedLineCount) {
@@ -227,23 +240,45 @@ class AdditionalLinesWidget extends Disposable {
         }
         const { tabSize } = textModel.getOptions();
         this.editor.changeViewZones((changeAccessor) => {
-            if (this._viewZoneId) {
-                changeAccessor.removeZone(this._viewZoneId);
-                this._viewZoneId = undefined;
-            }
+            this.removeActiveViewZone(changeAccessor);
             const heightInLines = Math.max(additionalLines.length, minReservedLineCount);
             if (heightInLines > 0) {
                 const domNode = document.createElement('div');
                 renderLines(domNode, tabSize, additionalLines, this.editor.getOptions());
-                this._viewZoneId = changeAccessor.addZone({
-                    afterLineNumber: lineNumber,
-                    heightInLines: heightInLines,
-                    domNode,
-                    afterColumnAffinity: PositionAffinity.Right
-                });
+                this.addViewZone(changeAccessor, lineNumber, heightInLines, domNode);
             }
         });
     }
+    addViewZone(changeAccessor, afterLineNumber, heightInLines, domNode) {
+        const id = changeAccessor.addZone({
+            afterLineNumber: afterLineNumber,
+            heightInLines: heightInLines,
+            domNode,
+            afterColumnAffinity: PositionAffinity.Right,
+            onComputedHeight: (height) => {
+                this._viewZoneHeight.set(height, undefined);
+            }
+        });
+        this.keepCursorStable(afterLineNumber, heightInLines);
+        this._viewZoneInfo = { viewZoneId: id, heightInLines, lineNumber: afterLineNumber };
+    }
+    removeActiveViewZone(changeAccessor) {
+        if (this._viewZoneInfo) {
+            changeAccessor.removeZone(this._viewZoneInfo.viewZoneId);
+            this.keepCursorStable(this._viewZoneInfo.lineNumber, -this._viewZoneInfo.heightInLines);
+            this._viewZoneInfo = undefined;
+            this._viewZoneHeight.set(undefined, undefined);
+        }
+    }
+    keepCursorStable(lineNumber, heightInLines) {
+        if (!this.shouldKeepCursorStable) {
+            return;
+        }
+        const cursorLineNumber = this.editor.getSelection()?.getStartPosition()?.lineNumber;
+        if (cursorLineNumber !== undefined && lineNumber < cursorLineNumber) {
+            this.editor.setScrollTop(this.editor.getScrollTop() + heightInLines * this.editor.getOption(EditorOption.lineHeight));
+        }
+    }
 }
 function renderLines(domNode, tabSize, lines, opts) {
     const disableMonospaceOptimizations = opts.get(EditorOption.disableMonospaceOptimizations);

package/vscode/src/vs/editor/contrib/inlineCompletions/browser/view/inlineCompletionsView.d.ts

@@ -1,21 +1,22 @@
 import { Disposable } from "../../../../../base/common/lifecycle.js";
-import { IObservable } from "../../../../../base/common/observable.js";
+import { IObservable, ISettableObservable } from "../../../../../base/common/observable.js";
 import { IInstantiationService } from "../../../../../platform/instantiation/common/instantiation.js";
 import { ICodeEditor } from "../../../../browser/editorBrowser.js";
 import { InlineCompletionsModel } from "../model/inlineCompletionsModel.js";
-import { InlineEditsViewAndDiffProducer } from "./inlineEdits/inlineEditsViewAndDiffProducer.js";
+import { InlineEditsViewAndDiffProducer } from "./inlineEdits/viewAndDiffProducer.js";
 export declare class InlineCompletionsView extends Disposable {
     private readonly _editor;
     private readonly _model;
+    private readonly _focusIsInMenu;
     private readonly _instantiationService;
     private readonly _ghostTexts;
     private readonly _stablizedGhostTexts;
+    private readonly _editorObs;
     private readonly _ghostTextWidgets;
     private readonly _inlineEdit;
     private readonly _everHadInlineEdit;
-    protected readonly _inlineEditWidget: IObservable<InlineEditsViewAndDiffProducer | undefined, unknown>;
-    private readonly _editorObs;
+    protected readonly _inlineEditWidget: IObservable<InlineEditsViewAndDiffProducer | undefined>;
     private readonly _fontFamily;
-    constructor(_editor: ICodeEditor, _model: IObservable<InlineCompletionsModel | undefined>, _instantiationService: IInstantiationService);
+    constructor(_editor: ICodeEditor, _model: IObservable<InlineCompletionsModel | undefined>, _focusIsInMenu: ISettableObservable<boolean>, _instantiationService: IInstantiationService);
     shouldShowHoverAtViewZone(viewZoneId: string): boolean;
 }

package/vscode/src/vs/editor/contrib/inlineCompletions/browser/view/inlineCompletionsView.js

@@ -15,34 +15,35 @@ import { EditorOption } from '../../../../common/config/editorOptions.js';
 import { InlineCompletionsHintsWidget } from '../hintsWidget/inlineCompletionsHintsWidget.js';
 import { convertItemsToStableObservables } from '../utils.js';
 import { GhostTextView } from './ghostText/ghostTextView.js';
-import { InlineEditsViewAndDiffProducer } from './inlineEdits/inlineEditsViewAndDiffProducer.js';
+import { InlineEditsViewAndDiffProducer } from './inlineEdits/viewAndDiffProducer.js';
 
 let InlineCompletionsView = class InlineCompletionsView extends Disposable {
-    constructor(_editor, _model, _instantiationService) {
+    constructor(_editor, _model, _focusIsInMenu, _instantiationService) {
         super();
         this._editor = _editor;
         this._model = _model;
+        this._focusIsInMenu = _focusIsInMenu;
         this._instantiationService = _instantiationService;
         this._ghostTexts = derived(this, (reader) => {
             const model = this._model.read(reader);
             return model?.ghostTexts.read(reader) ?? [];
         });
         this._stablizedGhostTexts = convertItemsToStableObservables(this._ghostTexts, this._store);
+        this._editorObs = observableCodeEditor(this._editor);
         this._ghostTextWidgets = mapObservableArrayCached(this, this._stablizedGhostTexts, (ghostText, store) => derivedDisposable((reader) => this._instantiationService.createInstance(readHotReloadableExport(GhostTextView), this._editor, {
             ghostText: ghostText,
             minReservedLineCount: constObservable(0),
             targetTextModel: ( this._model.map(v => v?.textModel)),
-        })).recomputeInitiallyAndOnChange(store)).recomputeInitiallyAndOnChange(this._store);
+        }, ( this._editorObs.getOption(EditorOption.inlineSuggest).map(v => ({ syntaxHighlightingEnabled: v.syntaxHighlightingEnabled }))), false)).recomputeInitiallyAndOnChange(store)).recomputeInitiallyAndOnChange(this._store);
         this._inlineEdit = derived(this, reader => this._model.read(reader)?.inlineEditState.read(reader)?.inlineEdit);
         this._everHadInlineEdit = derivedObservableWithCache(this, (reader, last) => last || !!this._inlineEdit.read(reader));
         this._inlineEditWidget = derivedDisposable(reader => {
             if (!this._everHadInlineEdit.read(reader)) {
                 return undefined;
             }
-            return this._instantiationService.createInstance(InlineEditsViewAndDiffProducer.hot.read(reader), this._editor, this._inlineEdit, this._model);
+            return this._instantiationService.createInstance(InlineEditsViewAndDiffProducer.hot.read(reader), this._editor, this._inlineEdit, this._model, this._focusIsInMenu);
         })
             .recomputeInitiallyAndOnChange(this._store);
-        this._editorObs = observableCodeEditor(this._editor);
         this._fontFamily = ( this._editorObs.getOption(EditorOption.inlineSuggest).map(val => val.fontFamily));
         this._register(createStyleSheetFromObservable(derived(reader => {
             const fontFamily = this._fontFamily.read(reader);
@@ -63,7 +64,7 @@ let InlineCompletionsView = class InlineCompletionsView extends Disposable {
     }
 };
 InlineCompletionsView = ( __decorate([
-    ( __param(2, IInstantiationService))
+    ( __param(3, IInstantiationService))
 ], InlineCompletionsView));
 
 export { InlineCompletionsView };

package/vscode/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/deletionView.d.ts

@@ -0,0 +1,29 @@
+import { Disposable } from "../../../../../../base/common/lifecycle.js";
+import { IObservable } from "../../../../../../base/common/observable.js";
+import { ICodeEditor } from "../../../../../browser/editorBrowser.js";
+import { LineRange } from "../../../../../common/core/lineRange.js";
+import { Range } from "../../../../../common/core/range.js";
+import { IInlineEditsView } from "./sideBySideDiff.js";
+import { InlineEditWithChanges } from "./viewAndDiffProducer.js";
+export declare class InlineEditsDeletionView extends Disposable implements IInlineEditsView {
+    private readonly _editor;
+    private readonly _edit;
+    private readonly _uiState;
+    private readonly _editorObs;
+    constructor(_editor: ICodeEditor, _edit: IObservable<InlineEditWithChanges | undefined>, _uiState: IObservable<{
+        originalRange: LineRange;
+        deletions: Range[];
+    } | undefined>);
+    private readonly _display;
+    private readonly _originalStartPosition;
+    private readonly _originalEndPosition;
+    private readonly _originalVerticalStartPosition;
+    private readonly _originalVerticalEndPosition;
+    private readonly _originalDisplayRange;
+    private readonly _editorMaxContentWidthInRange;
+    private readonly _maxPrefixTrim;
+    private readonly _editorLayoutInfo;
+    private readonly _foregroundSvg;
+    private readonly _nonOverflowView;
+    readonly isHovered: IObservable<boolean>;
+}

package/vscode/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/deletionView.js

@@ -0,0 +1,141 @@
+
+import { Disposable } from '../../../../../../base/common/lifecycle.js';
+import '../../../../../../base/common/arrays.js';
+import '../../../../../../base/common/event.js';
+import '../../../../../../base/common/observableInternal/autorun.js';
+import { derived } from '../../../../../../base/common/observableInternal/derived.js';
+import '../../../../../../base/common/cancellation.js';
+import { constObservable, derivedObservableWithCache } from '../../../../../../base/common/observableInternal/utils.js';
+import { observableCodeEditor } from '../../../../../browser/observableCodeEditor.js';
+import { Point } from '../../../../../browser/point.js';
+import { Position } from '../../../../../common/core/position.js';
+import { maxContentWidthInRange, getPrefixTrim, n, mapOutFalsy, createRectangle } from './utils.js';
+
+class InlineEditsDeletionView extends Disposable {
+    constructor(_editor, _edit, _uiState) {
+        super();
+        this._editor = _editor;
+        this._edit = _edit;
+        this._uiState = _uiState;
+        this._editorObs = observableCodeEditor(this._editor);
+        this._display = derived(this, reader => !!this._uiState.read(reader) ? 'block' : 'none');
+        this._originalStartPosition = derived(this, (reader) => {
+            const inlineEdit = this._edit.read(reader);
+            return inlineEdit ? ( new Position(inlineEdit.originalLineRange.startLineNumber, 1)) : null;
+        });
+        this._originalEndPosition = derived(this, (reader) => {
+            const inlineEdit = this._edit.read(reader);
+            return inlineEdit ? ( new Position(inlineEdit.originalLineRange.endLineNumberExclusive, 1)) : null;
+        });
+        this._originalVerticalStartPosition = ( this._editorObs.observePosition(this._originalStartPosition, this._store).map(p => p?.y));
+        this._originalVerticalEndPosition = ( this._editorObs.observePosition(this._originalEndPosition, this._store).map(p => p?.y));
+        this._originalDisplayRange = ( this._uiState.map(s => s?.originalRange));
+        this._editorMaxContentWidthInRange = ( derived(this, reader => {
+            const originalDisplayRange = this._originalDisplayRange.read(reader);
+            if (!originalDisplayRange) {
+                return constObservable(0);
+            }
+            this._editorObs.versionId.read(reader);
+            return derivedObservableWithCache(this, (reader, lastValue) => {
+                const maxWidth = maxContentWidthInRange(this._editorObs, originalDisplayRange, reader);
+                return Math.max(maxWidth, lastValue ?? 0);
+            });
+        }).map((v, r) => v.read(r)));
+        this._maxPrefixTrim = derived(reader => {
+            const state = this._uiState.read(reader);
+            if (!state) {
+                return { prefixTrim: 0, prefixLeftOffset: 0 };
+            }
+            return getPrefixTrim(state.deletions, state.originalRange, [], this._editor);
+        });
+        this._editorLayoutInfo = derived(this, (reader) => {
+            const inlineEdit = this._edit.read(reader);
+            if (!inlineEdit) {
+                return null;
+            }
+            const state = this._uiState.read(reader);
+            if (!state) {
+                return null;
+            }
+            const editorLayout = this._editorObs.layoutInfo.read(reader);
+            const horizontalScrollOffset = this._editorObs.scrollLeft.read(reader);
+            const left = editorLayout.contentLeft + this._editorMaxContentWidthInRange.read(reader) - horizontalScrollOffset;
+            const range = inlineEdit.originalLineRange;
+            const selectionTop = this._originalVerticalStartPosition.read(reader) ?? this._editor.getTopForLineNumber(range.startLineNumber) - this._editorObs.scrollTop.read(reader);
+            const selectionBottom = this._originalVerticalEndPosition.read(reader) ?? this._editor.getTopForLineNumber(range.endLineNumberExclusive) - this._editorObs.scrollTop.read(reader);
+            const codeLeft = editorLayout.contentLeft + this._maxPrefixTrim.read(reader).prefixLeftOffset;
+            if (left <= codeLeft) {
+                return null;
+            }
+            const code1 = ( new Point(left, selectionTop));
+            const codeStart1 = ( new Point(codeLeft, selectionTop));
+            const code2 = ( new Point(left, selectionBottom));
+            const codeStart2 = ( new Point(codeLeft, selectionBottom));
+            const codeHeight = selectionBottom - selectionTop;
+            return {
+                code1,
+                codeStart1,
+                code2,
+                codeStart2,
+                codeHeight,
+                horizontalScrollOffset,
+                padding: 3,
+                borderRadius: 4,
+            };
+        }).recomputeInitiallyAndOnChange(this._store);
+        this._foregroundSvg = n.svg({
+            transform: 'translate(-0.5 -0.5)',
+            style: { overflow: 'visible', pointerEvents: 'none', position: 'absolute' },
+        }, derived(reader => {
+            const layoutInfoObs = mapOutFalsy(this._editorLayoutInfo).read(reader);
+            if (!layoutInfoObs) {
+                return undefined;
+            }
+            const layoutInfo = layoutInfoObs.read(reader);
+            const rectangleOverlay = createRectangle({
+                topLeft: layoutInfo.codeStart1,
+                width: layoutInfo.code1.x - layoutInfo.codeStart1.x + 1,
+                height: layoutInfo.code2.y - layoutInfo.code1.y + 1,
+            }, layoutInfo.padding, layoutInfo.borderRadius, { hideLeft: layoutInfo.horizontalScrollOffset !== 0 });
+            return [
+                n.svgElem('path', {
+                    class: 'originalOverlay',
+                    d: rectangleOverlay,
+                    style: {
+                        fill: 'var(--vscode-inlineEdit-originalBackground, transparent)',
+                        stroke: 'var(--vscode-inlineEdit-originalBorder)',
+                        strokeWidth: '1px',
+                    }
+                }),
+            ];
+        })).keepUpdated(this._store);
+        this._nonOverflowView = n.div({
+            class: 'inline-edits-view',
+            style: {
+                position: 'absolute',
+                overflow: 'visible',
+                top: '0px',
+                left: '0px',
+                zIndex: '0',
+                display: this._display,
+            },
+        }, [
+            [this._foregroundSvg],
+        ]).keepUpdated(this._store);
+        this.isHovered = constObservable(false);
+        this._register(this._editorObs.createOverlayWidget({
+            domNode: this._nonOverflowView.element,
+            position: constObservable(null),
+            allowEditorOverflow: false,
+            minContentWidthInPx: derived(reader => {
+                const info = this._editorLayoutInfo.read(reader);
+                if (info === null) {
+                    return 0;
+                }
+                return info.code1.x - info.codeStart1.x;
+            }),
+        }));
+    }
+}
+
+export { InlineEditsDeletionView };

package/vscode/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/gutterIndicatorMenu.d.ts

@@ -0,0 +1,19 @@
+import { IObservable } from "../../../../../../base/common/observable.js";
+import { ICommandService } from "../../../../../../platform/commands/common/commands.service.js";
+import { IContextKeyService } from "../../../../../../platform/contextkey/common/contextkey.service.js";
+import { IKeybindingService } from "../../../../../../platform/keybinding/common/keybinding.service.js";
+import { Command } from "../../../../../common/languages.js";
+import { LiveElement } from "./utils.js";
+export declare class GutterIndicatorMenuContent {
+    private readonly _menuTitle;
+    private readonly _tabAction;
+    private readonly _close;
+    private readonly _extensionCommands;
+    private readonly _contextKeyService;
+    private readonly _keybindingService;
+    private readonly _commandService;
+    constructor(_menuTitle: IObservable<string>, _tabAction: IObservable<"jump" | "accept" | "inactive">, _close: (focusEditor: boolean) => void, _extensionCommands: IObservable<readonly Command[] | undefined>, _contextKeyService: IContextKeyService, _keybindingService: IKeybindingService, _commandService: ICommandService);
+    toDisposableLiveElement(): LiveElement;
+    private _createHoverContent;
+    private _getKeybinding;
+}

package/vscode/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/gutterIndicatorMenu.js

@@ -0,0 +1,143 @@
+
+import { __decorate, __param } from '../../../../../../../../../external/tslib/tslib.es6.js';
+import { renderIcon } from '../../../../../../base/browser/ui/iconLabel/iconLabels.js';
+import { KeybindingLabel, unthemedKeybindingLabelOptions } from '../../../../../../base/browser/ui/keybindingLabel/keybindingLabel.js';
+import { Codicon } from '../../../../../../base/common/codicons.js';
+import { observableValue } from '../../../../../../base/common/observableInternal/base.js';
+import '../../../../../../base/common/arrays.js';
+import '../../../../../../base/common/event.js';
+import '../../../../../../base/common/lifecycle.js';
+import { autorun } from '../../../../../../base/common/observableInternal/autorun.js';
+import { derived, derivedWithStore } from '../../../../../../base/common/observableInternal/derived.js';
+import '../../../../../../base/common/cancellation.js';
+import { constObservable, observableFromEvent } from '../../../../../../base/common/observableInternal/utils.js';
+import { OS } from '../../../../../../base/common/platform.js';
+import { ThemeIcon } from '../../../../../../base/common/themables.js';
+import { localize } from '../../../../../../nls.js';
+import { ICommandService } from '../../../../../../platform/commands/common/commands.service.js';
+import { IContextKeyService } from '../../../../../../platform/contextkey/common/contextkey.service.js';
+import { IKeybindingService } from '../../../../../../platform/keybinding/common/keybinding.service.js';
+import { AcceptInlineCompletion, JumpToNextInlineEdit, HideInlineCompletion } from '../../controller/commands.js';
+import { n } from './utils.js';
+
+let GutterIndicatorMenuContent = class GutterIndicatorMenuContent {
+    constructor(_menuTitle, _tabAction, _close, _extensionCommands, _contextKeyService, _keybindingService, _commandService) {
+        this._menuTitle = _menuTitle;
+        this._tabAction = _tabAction;
+        this._close = _close;
+        this._extensionCommands = _extensionCommands;
+        this._contextKeyService = _contextKeyService;
+        this._keybindingService = _keybindingService;
+        this._commandService = _commandService;
+    }
+    toDisposableLiveElement() {
+        return this._createHoverContent().toDisposableLiveElement();
+    }
+    _createHoverContent() {
+        const activeElement = observableValue('active', undefined);
+        const createOptionArgs = (options) => {
+            return {
+                title: options.title,
+                icon: options.icon,
+                keybinding: typeof options.commandId === 'string' ? this._getKeybinding(options.commandArgs ? undefined : options.commandId) : derived(reader => typeof options.commandId === 'string' ? undefined : this._getKeybinding(options.commandArgs ? undefined : options.commandId.read(reader)).read(reader)),
+                isActive: ( activeElement.map(v => v === options.id)),
+                onHoverChange: v => activeElement.set(v ? options.id : undefined, undefined),
+                onAction: () => {
+                    this._close(true);
+                    return this._commandService.executeCommand(typeof options.commandId === 'string' ? options.commandId : options.commandId.get(), ...(options.commandArgs ?? []));
+                },
+            };
+        };
+        return hoverContent([
+            header(this._menuTitle),
+            option(createOptionArgs({ id: 'gotoAndAccept', title: `${( localize(1232, "Go To"))} / ${( localize(1233, "Accept"))}`, icon: ( this._tabAction.map(action => action === 'accept' ? Codicon.check : Codicon.arrowRight)), commandId: ( this._tabAction.map(action => action === 'accept' ? ( new AcceptInlineCompletion()).id : ( new JumpToNextInlineEdit()).id)) })),
+            option(createOptionArgs({ id: 'reject', title: ( localize(1234, "Reject")), icon: Codicon.close, commandId: ( new HideInlineCompletion()).id })),
+            separator(),
+            this._extensionCommands?.map(c => c && c.length > 0 ? [
+                ...( c.map(
+                    c => option(createOptionArgs({ id: c.id, title: c.title, icon: Codicon.symbolEvent, commandId: c.id, commandArgs: c.arguments }))
+                )),
+                separator()
+            ] : []),
+            option(createOptionArgs({ id: 'settings', title: ( localize(1235, "Settings")), icon: Codicon.gear, commandId: 'workbench.action.openSettings', commandArgs: ['@tag:nextEditSuggestions'] })),
+        ]);
+    }
+    _getKeybinding(commandId) {
+        if (!commandId) {
+            return constObservable(undefined);
+        }
+        return observableFromEvent(this._contextKeyService.onDidChangeContext, () => this._keybindingService.lookupKeybinding(commandId));
+    }
+};
+GutterIndicatorMenuContent = ( __decorate([
+    ( __param(4, IContextKeyService)),
+    ( __param(5, IKeybindingService)),
+    ( __param(6, ICommandService))
+], GutterIndicatorMenuContent));
+function hoverContent(content) {
+    return n.div({
+        class: 'content',
+        style: {
+            margin: 4,
+            minWidth: 150,
+        }
+    }, content);
+}
+function header(title) {
+    return n.div({
+        class: 'header',
+        style: {
+            color: 'var(--vscode-descriptionForeground)',
+            fontSize: '12px',
+            fontWeight: '600',
+            padding: '0 10px',
+            lineHeight: 26,
+        }
+    }, [title]);
+}
+function option(props) {
+    return derivedWithStore((_reader, store) => n.div({
+        class: ['monaco-menu-option', props.isActive?.map(v => v && 'active')],
+        onmouseenter: () => props.onHoverChange?.(true),
+        onmouseleave: () => props.onHoverChange?.(false),
+        onclick: props.onAction,
+        onkeydown: e => {
+            if (e.key === 'Enter') {
+                props.onAction?.();
+            }
+        },
+        tabIndex: 0,
+    }, [
+        n.elem('span', {
+            style: {
+                fontSize: 16,
+                display: 'flex',
+            }
+        }, [ThemeIcon.isThemeIcon(props.icon) ? renderIcon(props.icon) : ( props.icon.map(icon => renderIcon(icon)))]),
+        n.elem('span', {}, [props.title]),
+        n.div({
+            style: { marginLeft: 'auto', opacity: '0.6' },
+            ref: elem => {
+                const keybindingLabel = store.add(( new KeybindingLabel(elem, OS, { disableTitle: true, ...unthemedKeybindingLabelOptions })));
+                store.add(autorun(reader => {
+                    keybindingLabel.set(props.keybinding.read(reader));
+                }));
+            }
+        })
+    ]));
+}
+function separator() {
+    return n.div({
+        class: 'menu-separator',
+        style: {
+            color: 'var(--vscode-editorActionList-foreground)',
+            padding: '2px 0',
+        }
+    }, n.div({
+        style: {
+            borderBottom: '1px solid var(--vscode-editorHoverWidget-border)',
+        }
+    }));
+}
+
+export { GutterIndicatorMenuContent };

package/vscode/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/gutterIndicatorView.d.ts

@@ -0,0 +1,37 @@
+import { Disposable } from "../../../../../../base/common/lifecycle.js";
+import { IObservable, ISettableObservable } from "../../../../../../base/common/observable.js";
+import { IInstantiationService } from "../../../../../../platform/instantiation/common/instantiation.js";
+import { ObservableCodeEditor } from "../../../../../browser/observableCodeEditor.js";
+import { HoverService } from "../../../../../browser/services/hoverService/hoverService.js";
+import { LineRange } from "../../../../../common/core/lineRange.js";
+import { InlineCompletionsModel } from "../../model/inlineCompletionsModel.js";
+import { IAccessibilityService } from "../../../../../../platform/accessibility/common/accessibility.service.js";
+export declare const inlineEditIndicatorPrimaryForeground: string;
+export declare const inlineEditIndicatorPrimaryBackground: string;
+export declare const inlineEditIndicatorSecondaryForeground: string;
+export declare const inlineEditIndicatorSecondaryBackground: string;
+export declare const inlineEditIndicatorsuccessfulForeground: string;
+export declare const inlineEditIndicatorsuccessfulBackground: string;
+export declare const inlineEditIndicatorBackground: string;
+export declare class InlineEditsGutterIndicator extends Disposable {
+    private readonly _editorObs;
+    private readonly _originalRange;
+    private readonly _verticalOffset;
+    private readonly _model;
+    private readonly _isHoveringOverInlineEdit;
+    private readonly _focusIsInMenu;
+    private readonly _hoverService;
+    private readonly _instantiationService;
+    constructor(_editorObs: ObservableCodeEditor, _originalRange: IObservable<LineRange | undefined>, _verticalOffset: IObservable<number>, _model: IObservable<InlineCompletionsModel | undefined>, _isHoveringOverInlineEdit: IObservable<boolean>, _focusIsInMenu: ISettableObservable<boolean>, _hoverService: HoverService, _instantiationService: IInstantiationService, accessibilityService: IAccessibilityService);
+    private readonly _originalRangeObs;
+    private readonly _state;
+    private readonly _stickyScrollController;
+    private readonly _stickyScrollHeight;
+    private readonly _layout;
+    private readonly _tabAction;
+    private readonly _iconRef;
+    private _hoverVisible;
+    private readonly _isHoveredOverIcon;
+    private _showHover;
+    private readonly _indicator;
+}