@codingame/monaco-vscode-api 24.3.0 → 25.0.0

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

@@ -11,9 +11,9 @@ import { localize } from '../../../../../../../nls.js';
 import { IHoverService } from '../../../../../../../platform/hover/browser/hover.service.js';
 import { IKeybindingService } from '../../../../../../../platform/keybinding/common/keybinding.service.js';
 import { asCssVariable } from '../../../../../../../platform/theme/common/colorUtils.js';
-import '../../../../../../../platform/theme/common/colors/baseColors.js';
+import { contrastBorder } from '../../../../../../../platform/theme/common/colors/baseColors.js';
 import '../../../../../../../platform/theme/common/colors/chartsColors.js';
-import { editorBackground, editorHoverForeground } from '../../../../../../../platform/theme/common/colors/editorColors.js';
+import { editorHoverForeground } from '../../../../../../../platform/theme/common/colors/editorColors.js';
 import '../../../../../../../platform/theme/common/colors/inputColors.js';
 import '../../../../../../../platform/theme/common/colors/listColors.js';
 import '../../../../../../../platform/theme/common/colors/menuColors.js';
@@ -32,7 +32,7 @@ import { ILanguageService } from '../../../../../../common/languages/language.se
 import { TokenArray, LineTokens } from '../../../../../../common/tokens/lineTokens.js';
 import { inlineSuggestCommitAlternativeActionId } from '../../../controller/commandIds.js';
 import { InlineEditClickEvent } from '../inlineEditsViewInterface.js';
-import { getOriginalBorderColor, getModifiedBorderColor, modifiedChangedTextOverlayColor, inlineEditIndicatorPrimaryForeground, inlineEditIndicatorPrimaryBackground, inlineEditIndicatorPrimaryBorder, observeColor, originalChangedTextOverlayColor } from '../theme.js';
+import { getOriginalBorderColor, getModifiedBorderColor, observeColor, modifiedChangedTextOverlayColor, inlineEditIndicatorPrimaryForeground, inlineEditIndicatorPrimaryBackground, inlineEditIndicatorPrimaryBorder, getEditorBackgroundColor, INLINE_EDITS_BORDER_RADIUS, originalChangedTextOverlayColor } from '../theme.js';
 import { mapOutFalsy, rectToProps, getEditorValidOverlayRect } from '../utils/utils.js';
 import { observableFromPromise } from '../../../../../../../base/common/observableInternal/utils/utils.js';
 import { constObservable } from '../../../../../../../base/common/observableInternal/observables/constObservable.js';
@@ -41,8 +41,9 @@ import { derived } from '../../../../../../../base/common/observableInternal/obs
 import { observableFromEvent } from '../../../../../../../base/common/observableInternal/observables/observableFromEvent.js';
 
 class WordReplacementsViewData {
-    constructor(edit, alternativeAction) {
+    constructor(edit, editorType, alternativeAction) {
         this.edit = edit;
+        this.editorType = editorType;
         this.alternativeAction = alternativeAction;
     }
     equals(other) {
@@ -114,10 +115,10 @@ let InlineEditsWordReplacementView = class InlineEditsWordReplacementView extend
                 const count = altCount.read(reader);
                 const active = altModifierActive.read(reader);
                 const occurrencesLabel = count !== undefined ? count === 1 ?
-                    ( localize(1320, "{0} 1 occurrence", label)) :
-                    ( localize(1321, "{0} {1} occurrences", label, count))
+                    ( localize(1324, "{0} 1 occurrence", label)) :
+                    ( localize(1325, "{0} {1} occurrences", label, count))
                     : label;
-                const keybindingTooltip = ( localize(1322, "{0} show occurrences", '[shift]'));
+                const keybindingTooltip = ( localize(1326, "{0} show occurrences", '[shift]'));
                 alternativeAction = {
                     label: count !== undefined ? (active ? occurrencesLabel : label) : label,
                     tooltip: occurrencesLabel ? `${occurrencesLabel}\n${keybindingTooltip}` : undefined,
@@ -161,24 +162,30 @@ let InlineEditsWordReplacementView = class InlineEditsWordReplacementView extend
                 const secondaryElementHovered = constObservable(false);
                 const alternativeAction = ( layout.map(l => l.alternativeAction));
                 const alternativeActionActive = derived(reader => (alternativeAction.read(reader)?.active.read(reader) ?? false) || secondaryElementHovered.read(reader));
+                const isHighContrast = observableFromEvent(this._themeService.onDidColorThemeChange, () => {
+                    const theme = this._themeService.getColorTheme();
+                    return theme.type === 'hcDark' || theme.type === 'hcLight';
+                }).read(reader);
+                const hcBorderColor = isHighContrast ? observeColor(contrastBorder, this._themeService).read(reader) : null;
                 const primaryActiveStyles = {
-                    borderColor: modifiedBorderColor,
+                    borderColor: hcBorderColor ? ( hcBorderColor.toString()) : modifiedBorderColor,
                     backgroundColor: asCssVariable(modifiedChangedTextOverlayColor),
                     color: '',
                     opacity: '1',
                 };
                 const secondaryActiveStyles = {
-                    borderColor: asCssVariable(inlineEditIndicatorPrimaryBorder),
+                    borderColor: hcBorderColor ? ( hcBorderColor.toString()) : asCssVariable(inlineEditIndicatorPrimaryBorder),
                     backgroundColor: asCssVariable(inlineEditIndicatorPrimaryBackground),
                     color: asCssVariable(inlineEditIndicatorPrimaryForeground),
                     opacity: '1',
                 };
                 const passiveStyles = {
-                    borderColor: ( observeColor(editorHoverForeground, this._themeService).map(c => ( ( c.transparent(0.2)).toString()))).read(reader),
-                    backgroundColor: asCssVariable(editorBackground),
+                    borderColor: hcBorderColor ? ( hcBorderColor.toString()) : ( observeColor(editorHoverForeground, this._themeService).map(c => ( ( c.transparent(0.2)).toString()))).read(reader),
+                    backgroundColor: getEditorBackgroundColor(this._viewData.editorType),
                     color: '',
                     opacity: '0.7',
                 };
+                const editorBackground = getEditorBackgroundColor(this._viewData.editorType);
                 const primaryActionStyles = derived(this, r => alternativeActionActive.read(r) ? primaryActiveStyles : primaryActiveStyles);
                 const secondaryActionStyles = derived(this, r => alternativeActionActive.read(r) ? secondaryActiveStyles : passiveStyles);
                 return [
@@ -195,7 +202,7 @@ let InlineEditsWordReplacementView = class InlineEditsWordReplacementView extend
                             style: {
                                 position: 'absolute',
                                 ...rectToProps(reader => layout.read(reader).lowerBackground.withMargin(BORDER_WIDTH, 2 * BORDER_WIDTH, BORDER_WIDTH, 0)),
-                                background: asCssVariable(editorBackground),
+                                background: editorBackground,
                                 cursor: 'pointer',
                                 pointerEvents: 'auto',
                             },
@@ -209,11 +216,11 @@ let InlineEditsWordReplacementView = class InlineEditsWordReplacementView extend
                                 width: undefined,
                                 pointerEvents: 'auto',
                                 boxSizing: 'border-box',
-                                borderRadius: '4px',
-                                background: asCssVariable(editorBackground),
+                                borderRadius: `${INLINE_EDITS_BORDER_RADIUS}px`,
+                                background: editorBackground,
                                 display: 'flex',
                                 justifyContent: 'left',
-                                outline: `2px solid ${asCssVariable(editorBackground)}`,
+                                outline: `2px solid ${editorBackground}`,
                             },
                             onmousedown: (e) => this._mouseDown(e),
                         }, [
@@ -224,7 +231,7 @@ let InlineEditsWordReplacementView = class InlineEditsWordReplacementView extend
                                     fontSize: this._editor.getOption(EditorOption.fontSize),
                                     fontWeight: this._editor.getOption(EditorOption.fontWeight),
                                     width: rectToProps(reader => layout.read(reader).codeLine.withMargin(BORDER_WIDTH, 2 * BORDER_WIDTH)).width,
-                                    borderRadius: '4px',
+                                    borderRadius: `${INLINE_EDITS_BORDER_RADIUS}px`,
                                     border: ( primaryActionStyles.map(s => `${BORDER_WIDTH}px solid ${s.borderColor}`)),
                                     boxSizing: 'border-box',
                                     padding: `${BORDER_WIDTH}px`,
@@ -252,7 +259,7 @@ let InlineEditsWordReplacementView = class InlineEditsWordReplacementView extend
                                     id: DOM_ID_RENAME,
                                     style: {
                                         position: 'relative',
-                                        borderRadius: '4px',
+                                        borderRadius: `${INLINE_EDITS_BORDER_RADIUS}px`,
                                         borderTop: `${BORDER_WIDTH}px solid`,
                                         borderRight: `${BORDER_WIDTH}px solid`,
                                         borderBottom: `${BORDER_WIDTH}px solid`,
@@ -291,7 +298,7 @@ let InlineEditsWordReplacementView = class InlineEditsWordReplacementView extend
                                 position: 'absolute',
                                 ...rectToProps(reader => layout.read(reader).originalLine.withMargin(BORDER_WIDTH)),
                                 boxSizing: 'border-box',
-                                borderRadius: '4px',
+                                borderRadius: `${INLINE_EDITS_BORDER_RADIUS}px`,
                                 border: `${BORDER_WIDTH}px solid ${originalBorderColor}`,
                                 background: asCssVariable(originalChangedTextOverlayColor),
                                 pointerEvents: 'none',

package/vscode/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/longDistanceHint/inlineEditsLongDistanceHint.d.ts

@@ -12,6 +12,7 @@ import { OffsetRange } from "../../../../../../../common/core/ranges/offsetRange
 import { IThemeService } from "../../../../../../../../platform/theme/common/themeService.service.js";
 import { IKeybindingService } from "../../../../../../../../platform/keybinding/common/keybinding.service.js";
 import { InlineSuggestionGutterMenuData, SimpleInlineSuggestModel } from "../../components/gutterIndicatorView.js";
+import { InlineCompletionEditorType } from "../../../../model/provideInlineCompletions.js";
 export declare class InlineEditsLongDistanceHint extends Disposable implements IInlineEditsView {
     private readonly _editor;
     private readonly _viewState;
@@ -46,6 +47,7 @@ export interface ILongDistanceViewState {
     edit: InlineEditWithChanges;
     diff: DetailedLineRangeMapping[];
     nextCursorPosition: Position | null;
+    editorType: InlineCompletionEditorType;
     model: SimpleInlineSuggestModel;
     inlineSuggestInfo: InlineSuggestionGutterMenuData;
 }

package/vscode/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/longDistanceHint/inlineEditsLongDistanceHint.js

@@ -17,15 +17,13 @@ import { Codicon } from '../../../../../../../../base/common/codicons.js';
 import { renderIcon } from '../../../../../../../../base/browser/ui/iconLabel/iconLabels.js';
 import { SymbolKinds } from '../../../../../../../common/languages.js';
 import { distributeFlexBoxLayout } from '../../utils/flexBoxLayout.js';
-import { Size2D } from '../../../../../../../common/core/2d/size.js';
-import { getMaxTowerHeightInAvailableArea } from '../../utils/towersLayout.js';
 import { IThemeService } from '../../../../../../../../platform/theme/common/themeService.service.js';
 import { IKeybindingService } from '../../../../../../../../platform/keybinding/common/keybinding.service.js';
-import { inlineEditIndicatorSuccessfulBackground, inlineEditIndicatorPrimaryBackground, inlineEditIndicatorSecondaryBackground, getEditorBlendedColor } from '../../theme.js';
+import { observeColor, inlineEditIndicatorSuccessfulBackground, inlineEditIndicatorPrimaryBackground, inlineEditIndicatorSecondaryBackground, getEditorBlendedColor, getEditorBackgroundColor } from '../../theme.js';
 import { asCssVariable } from '../../../../../../../../platform/theme/common/colorUtils.js';
 import { descriptionForeground } from '../../../../../../../../platform/theme/common/colors/baseColors.js';
 import '../../../../../../../../platform/theme/common/colors/chartsColors.js';
-import { editorWidgetBackground, editorBackground } from '../../../../../../../../platform/theme/common/colors/editorColors.js';
+import { editorWidgetBackground, editorWidgetBorder } from '../../../../../../../../platform/theme/common/colors/editorColors.js';
 import '../../../../../../../../platform/theme/common/colors/inputColors.js';
 import '../../../../../../../../platform/theme/common/colors/listColors.js';
 import '../../../../../../../../platform/theme/common/colors/menuColors.js';
@@ -35,14 +33,24 @@ import '../../../../../../../../platform/theme/common/colors/quickpickColors.js'
 import '../../../../../../../../platform/theme/common/colors/searchColors.js';
 import { LongDistancePreviewEditor } from './longDistancePreviewEditor.js';
 import { jumpToNextInlineEditId } from '../../../../controller/commandIds.js';
+import { splitIntoContinuousLineRanges, WidgetPlacementContext } from './longDistnaceWidgetPlacement.js';
+import { InlineCompletionEditorType } from '../../../../model/provideInlineCompletions.js';
 import { debouncedObservable2 } from '../../../../../../../../base/common/observableInternal/utils/utils.js';
 import { derived, derivedDisposable } from '../../../../../../../../base/common/observableInternal/observables/derived.js';
+import { observableFromEvent } from '../../../../../../../../base/common/observableInternal/observables/observableFromEvent.js';
 import { constObservable } from '../../../../../../../../base/common/observableInternal/observables/constObservable.js';
 import { autorun } from '../../../../../../../../base/common/observableInternal/reactions/autorun.js';
 
-const BORDER_RADIUS = 4;
+const BORDER_RADIUS = 6;
 const MAX_WIDGET_WIDTH = { EMPTY_SPACE: 425, OVERLAY: 375 };
 const MIN_WIDGET_WIDTH = 250;
+const DEFAULT_WIDGET_LAYOUT_CONSTANTS = {
+    previewEditorMargin: 2,
+    widgetPadding: 2,
+    widgetBorder: 1,
+    lowerBarHeight: 20,
+    minWidgetWidth: MIN_WIDGET_WIDTH,
+};
 let InlineEditsLongDistanceHint = class InlineEditsLongDistanceHint extends Disposable {
     constructor(_editor, _viewState, _previewTextModel, _tabAction, _instantiationService, _themeService, _keybindingService) {
         super();
@@ -63,23 +71,19 @@ let InlineEditsLongDistanceHint = class InlineEditsLongDistanceHint extends Disp
             const viewState = this._viewState.read(reader);
             const p = this._hintTextPosition.read(reader);
             if (!viewState || !p) {
-                return undefined;
+                return [];
             }
             const model = this._editorObs.model.read(reader);
             if (!model) {
-                return undefined;
+                return [];
             }
             const range = LineRange.ofLength(p.lineNumber, 1).addMargin(5, 5).intersect(LineRange.ofLength(1, model.getLineCount()));
             if (!range) {
-                return undefined;
+                return [];
             }
             const sizes = getContentSizeOfLines(this._editorObs, range, reader);
             const top = this._editorObs.observeTopForLineNumber(range.startLineNumber).read(reader);
-            return {
-                lineRange: range,
-                top: top,
-                sizes: sizes,
-            };
+            return splitIntoContinuousLineRanges(range, sizes, top, this._editorObs, reader);
         });
         this._isVisibleDelayed = debouncedObservable2(derived(this, reader => this._viewState.read(reader)?.hint.isVisible), (lastValue, newValue) => lastValue === true && newValue === false ? 200 : 0);
         this._previewEditorLayoutInfo = derived(this, (reader) => {
@@ -87,8 +91,8 @@ let InlineEditsLongDistanceHint = class InlineEditsLongDistanceHint extends Disp
             if (!viewState || !this._isVisibleDelayed.read(reader)) {
                 return undefined;
             }
-            const lineSizes = this._lineSizesAroundHintPosition.read(reader);
-            if (!lineSizes) {
+            const continousLineRanges = this._lineSizesAroundHintPosition.read(reader);
+            if (continousLineRanges.length === 0) {
                 return undefined;
             }
             const editorScrollTop = this._editorObs.scrollTop.read(reader);
@@ -105,51 +109,35 @@ let InlineEditsLongDistanceHint = class InlineEditsLongDistanceHint extends Disp
             if (!c) {
                 return undefined;
             }
-            const availableSpaceSizes = ( lineSizes.sizes.map((s, idx) => {
-                const lineNumber = lineSizes.lineRange.startLineNumber + idx;
-                let linePaddingLeft = 20;
-                if (lineNumber === viewState.hint.lineNumber) {
-                    linePaddingLeft = 40;
-                }
-                return ( new Size2D(Math.max(0, editorTrueContentWidth - s.width - linePaddingLeft), s.height));
-            }));
-            const availableSpaceHeightPrefixSums = getSums(availableSpaceSizes, s => s.height);
-            const availableSpaceSizesTransposed = ( availableSpaceSizes.map(s => s.transpose()));
-            const previewEditorMargin = 2;
-            const widgetPadding = 2;
-            const lowerBarHeight = 20;
-            const widgetBorder = 1;
+            const layoutConstants = DEFAULT_WIDGET_LAYOUT_CONSTANTS;
             const extraGutterMarginToAvoidScrollBar = 2;
             const previewEditorHeight = previewContentHeight + extraGutterMarginToAvoidScrollBar;
-            function getWidgetVerticalOutline(lineNumber) {
-                const sizeIdx = lineNumber - lineSizes.lineRange.startLineNumber;
-                const top = lineSizes.top + availableSpaceHeightPrefixSums[sizeIdx];
-                const editorRange = OffsetRange.ofStartAndLength(top, previewEditorHeight);
-                const verticalWidgetRange = editorRange.withMargin(previewEditorMargin + widgetPadding + widgetBorder).withMargin(0, lowerBarHeight);
-                return verticalWidgetRange;
-            }
-            let possibleWidgetOutline = findFirstMinimzeDistance(lineSizes.lineRange.addMargin(-1, -1), viewState.hint.lineNumber, lineNumber => {
-                const verticalWidgetRange = getWidgetVerticalOutline(lineNumber);
-                const maxWidth = getMaxTowerHeightInAvailableArea(verticalWidgetRange.delta(-lineSizes.top), availableSpaceSizesTransposed);
-                if (maxWidth < MIN_WIDGET_WIDTH) {
-                    return undefined;
+            let possibleWidgetOutline;
+            let lastPlacementContext;
+            const endOfLinePadding = (lineNumber) => lineNumber === viewState.hint.lineNumber ? 40 : 20;
+            for (const continousLineRange of continousLineRanges) {
+                const placementContext = ( new WidgetPlacementContext(continousLineRange, editorTrueContentWidth, endOfLinePadding));
+                lastPlacementContext = placementContext;
+                possibleWidgetOutline = placementContext.tryFindWidgetOutline(viewState.hint.lineNumber, previewEditorHeight, editorTrueContentRight, layoutConstants);
+                if (possibleWidgetOutline) {
+                    break;
                 }
-                const horizontalWidgetRange = OffsetRange.ofStartAndLength(editorTrueContentRight - maxWidth, maxWidth);
-                return { horizontalWidgetRange, verticalWidgetRange };
-            });
+            }
             let position = 'empty-space';
             if (!possibleWidgetOutline) {
                 position = 'overlay';
                 const maxAvailableWidth = Math.min(editorLayout.width - editorLayout.contentLeft, MAX_WIDGET_WIDTH.OVERLAY);
+                const fallbackPlacementContext = lastPlacementContext ?? ( new WidgetPlacementContext(continousLineRanges[0], editorTrueContentWidth, endOfLinePadding));
                 possibleWidgetOutline = {
                     horizontalWidgetRange: OffsetRange.ofStartAndLength(editorTrueContentRight - maxAvailableWidth, maxAvailableWidth),
-                    verticalWidgetRange: getWidgetVerticalOutline(viewState.hint.lineNumber + 2).delta(10),
+                    verticalWidgetRange: fallbackPlacementContext.getWidgetVerticalOutline(viewState.hint.lineNumber + 2, previewEditorHeight, layoutConstants).delta(10),
                 };
             }
             if (!possibleWidgetOutline) {
                 return undefined;
             }
             const rectAvailableSpace = Rect.fromRanges(possibleWidgetOutline.horizontalWidgetRange, possibleWidgetOutline.verticalWidgetRange).translateX(-editorScrollLeft).translateY(-editorScrollTop);
+            const { previewEditorMargin, widgetPadding, widgetBorder, lowerBarHeight } = layoutConstants;
             const maxWidgetWidth = Math.min(position === 'overlay' ? MAX_WIDGET_WIDTH.OVERLAY : MAX_WIDGET_WIDTH.EMPTY_SPACE, previewEditorContentLayout.maxEditorWidth + previewEditorMargin + widgetPadding);
             const layout = distributeFlexBoxLayout(rectAvailableSpace.width, {
                 spaceBefore: { min: 0, max: 10, priority: 1 },
@@ -222,7 +210,7 @@ let InlineEditsLongDistanceHint = class InlineEditsLongDistanceHint extends Disp
                 style: {
                     overflow: 'hidden',
                     padding: ( this._previewEditorLayoutInfo.map(i => i?.previewEditorMargin)),
-                    background: asCssVariable(editorBackground),
+                    background: ( this._styles.map(s => s.background)),
                     pointerEvents: 'none',
                 },
             }, [
@@ -290,24 +278,37 @@ let InlineEditsLongDistanceHint = class InlineEditsLongDistanceHint extends Disp
             const factory = HideUnchangedRegionsFeature._breadcrumbsSourceFactory.read(reader);
             return (!m || !factory) ? undefined : factory(m, this._instantiationService);
         });
-        this._styles = ( this._tabAction.map((v, reader) => {
-            let border;
-            switch (v) {
-                case InlineEditTabAction.Inactive:
-                    border = inlineEditIndicatorSecondaryBackground;
-                    break;
-                case InlineEditTabAction.Jump:
-                    border = inlineEditIndicatorPrimaryBackground;
-                    break;
-                case InlineEditTabAction.Accept:
-                    border = inlineEditIndicatorSuccessfulBackground;
-                    break;
+        this._styles = derived(reader => {
+            const v = this._tabAction.read(reader);
+            const widgetBorderColor = observeColor(editorWidgetBorder, this._themeService).read(reader);
+            const isHighContrast = observableFromEvent(this._themeService.onDidColorThemeChange, () => {
+                const theme = this._themeService.getColorTheme();
+                return theme.type === 'hcDark' || theme.type === 'hcLight';
+            }).read(reader);
+            let borderColor;
+            if (isHighContrast) {
+                borderColor = widgetBorderColor;
+            }
+            else {
+                let border;
+                switch (v) {
+                    case InlineEditTabAction.Inactive:
+                        border = inlineEditIndicatorSecondaryBackground;
+                        break;
+                    case InlineEditTabAction.Jump:
+                        border = inlineEditIndicatorPrimaryBackground;
+                        break;
+                    case InlineEditTabAction.Accept:
+                        border = inlineEditIndicatorSuccessfulBackground;
+                        break;
+                }
+                borderColor = getEditorBlendedColor(border, this._themeService).read(reader);
             }
             return {
-                border: ( getEditorBlendedColor(border, this._themeService).read(reader).toString()),
-                background: asCssVariable(editorBackground)
+                border: ( borderColor.toString()),
+                background: getEditorBackgroundColor(( this._viewState.map(s => s?.editorType ?? InlineCompletionEditorType.TextEditor)).read(reader)),
             };
-        }));
+        });
         this._editorObs = observableCodeEditor(this._editor);
         this._previewEditor = this._register(this._instantiationService.createInstance(LongDistancePreviewEditor, this._previewTextModel, derived(reader => {
             const viewState = this._viewState.read(reader);
@@ -354,36 +355,6 @@ function lengthsToOffsetRanges(lengths, initialOffset = 0) {
     }
     return result;
 }
-function findFirstMinimzeDistance(range, targetLine, predicate) {
-    for (let offset = 0;; offset++) {
-        const down = targetLine + offset;
-        if (down <= range.endLineNumberExclusive) {
-            const result = predicate(down);
-            if (result !== undefined) {
-                return result;
-            }
-        }
-        const up = targetLine - offset;
-        if (up >= range.startLineNumber) {
-            const result = predicate(up);
-            if (result !== undefined) {
-                return result;
-            }
-        }
-        if (up < range.startLineNumber && down > range.endLineNumberExclusive) {
-            return undefined;
-        }
-    }
-}
-function getSums(array, fn) {
-    const result = [0];
-    let sum = 0;
-    for (const item of array) {
-        sum += fn(item);
-        result.push(sum);
-    }
-    return result;
-}
 function scrollToReveal(currentScrollPosition, windowWidth, contentRangeToReveal) {
     const visibleRange = ( new OffsetRange(currentScrollPosition, currentScrollPosition + windowWidth));
     if (visibleRange.containsRange(contentRangeToReveal)) {

package/vscode/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/longDistanceHint/longDistnaceWidgetPlacement.d.ts

@@ -0,0 +1,54 @@
+import { IReader } from "../../../../../../../../base/common/observable.js";
+import { ObservableCodeEditor } from "../../../../../../../browser/observableCodeEditor.js";
+import { Size2D } from "../../../../../../../common/core/2d/size.js";
+import { LineRange } from "../../../../../../../common/core/ranges/lineRange.js";
+import { OffsetRange } from "../../../../../../../common/core/ranges/offsetRange.js";
+/**
+ * Layout constants used for the long-distance hint widget.
+ */
+export interface WidgetLayoutConstants {
+    readonly previewEditorMargin: number;
+    readonly widgetPadding: number;
+    readonly widgetBorder: number;
+    readonly lowerBarHeight: number;
+    readonly minWidgetWidth: number;
+}
+/**
+ * Represents a widget placement outline with horizontal and vertical ranges.
+ */
+export interface WidgetOutline {
+    readonly horizontalWidgetRange: OffsetRange;
+    readonly verticalWidgetRange: OffsetRange;
+}
+/**
+ * Represents a continuous range of lines with their sizes and positioning.
+ * Used to compute available space for widget placement.
+ */
+export interface ContinuousLineSizes {
+    readonly lineRange: LineRange;
+    readonly top: number;
+    readonly sizes: Size2D[];
+}
+/**
+ * Context for computing widget placement within a continuous line range.
+ */
+export declare class WidgetPlacementContext {
+    private readonly _lineRangeInfo;
+    readonly availableSpaceSizes: Size2D[];
+    readonly availableSpaceHeightPrefixSums: number[];
+    readonly availableSpaceSizesTransposed: Size2D[];
+    constructor(_lineRangeInfo: ContinuousLineSizes, editorTrueContentWidth: number, endOfLinePadding: (lineNumber: number) => number);
+    /**
+     * Computes the vertical outline for a widget placed at the given line number.
+     */
+    getWidgetVerticalOutline(lineNumber: number, previewEditorHeight: number, layoutConstants: WidgetLayoutConstants): OffsetRange;
+    /**
+     * Tries to find a valid widget outline within this line range context.
+     */
+    tryFindWidgetOutline(targetLineNumber: number, previewEditorHeight: number, editorTrueContentRight: number, layoutConstants: WidgetLayoutConstants): WidgetOutline | undefined;
+}
+/**
+ * Splits line size information into continuous ranges, breaking at positions where
+ * the expected vertical position differs from the actual position (e.g., due to folded regions).
+ */
+export declare function splitIntoContinuousLineRanges(lineRange: LineRange, sizes: Size2D[], top: number, editorObs: ObservableCodeEditor, reader: IReader): ContinuousLineSizes[];

package/vscode/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/longDistanceHint/longDistnaceWidgetPlacement.js

@@ -0,0 +1,105 @@
+
+import '../../../../../../../../base/common/observableInternal/index.js';
+import { Size2D } from '../../../../../../../common/core/2d/size.js';
+import { LineRange } from '../../../../../../../common/core/ranges/lineRange.js';
+import { OffsetRange } from '../../../../../../../common/core/ranges/offsetRange.js';
+import { getMaxTowerHeightInAvailableArea } from '../../utils/towersLayout.js';
+import { derived } from '../../../../../../../../base/common/observableInternal/observables/derived.js';
+
+class WidgetPlacementContext {
+    constructor(_lineRangeInfo, editorTrueContentWidth, endOfLinePadding) {
+        this._lineRangeInfo = _lineRangeInfo;
+        this.availableSpaceSizes = ( _lineRangeInfo.sizes.map((s, idx) => {
+            const lineNumber = _lineRangeInfo.lineRange.startLineNumber + idx;
+            const linePaddingLeft = endOfLinePadding(lineNumber);
+            return ( new Size2D(Math.max(0, editorTrueContentWidth - s.width - linePaddingLeft), s.height));
+        }));
+        this.availableSpaceHeightPrefixSums = getSums(this.availableSpaceSizes, s => s.height);
+        this.availableSpaceSizesTransposed = ( this.availableSpaceSizes.map(s => s.transpose()));
+    }
+    getWidgetVerticalOutline(lineNumber, previewEditorHeight, layoutConstants) {
+        const sizeIdx = lineNumber - this._lineRangeInfo.lineRange.startLineNumber;
+        const top = this._lineRangeInfo.top + this.availableSpaceHeightPrefixSums[sizeIdx];
+        const editorRange = OffsetRange.ofStartAndLength(top, previewEditorHeight);
+        const { previewEditorMargin, widgetPadding, widgetBorder, lowerBarHeight } = layoutConstants;
+        const verticalWidgetRange = editorRange.withMargin(previewEditorMargin + widgetPadding + widgetBorder).withMargin(0, lowerBarHeight);
+        return verticalWidgetRange;
+    }
+    tryFindWidgetOutline(targetLineNumber, previewEditorHeight, editorTrueContentRight, layoutConstants) {
+        if (this._lineRangeInfo.lineRange.length < 3) {
+            return undefined;
+        }
+        return findFirstMinimzeDistance(this._lineRangeInfo.lineRange.addMargin(-1, -1), targetLineNumber, lineNumber => {
+            const verticalWidgetRange = this.getWidgetVerticalOutline(lineNumber, previewEditorHeight, layoutConstants);
+            const maxWidth = getMaxTowerHeightInAvailableArea(verticalWidgetRange.delta(-this._lineRangeInfo.top), this.availableSpaceSizesTransposed);
+            if (maxWidth < layoutConstants.minWidgetWidth) {
+                return undefined;
+            }
+            const horizontalWidgetRange = OffsetRange.ofStartAndLength(editorTrueContentRight - maxWidth, maxWidth);
+            return { horizontalWidgetRange, verticalWidgetRange };
+        });
+    }
+}
+function splitIntoContinuousLineRanges(lineRange, sizes, top, editorObs, reader) {
+    const result = [];
+    let currentRangeStart = lineRange.startLineNumber;
+    let currentRangeTop = top;
+    let currentSizes = [];
+    for (let i = 0; i < sizes.length; i++) {
+        const lineNumber = lineRange.startLineNumber + i;
+        const expectedTop = currentRangeTop + currentSizes.reduce((p, c) => p + c.height, 0);
+        const actualTop = editorObs.editor.getTopForLineNumber(lineNumber);
+        if (i > 0 && actualTop !== expectedTop) {
+            result.push({
+                lineRange: LineRange.ofLength(currentRangeStart, lineNumber - currentRangeStart),
+                top: currentRangeTop,
+                sizes: currentSizes,
+            });
+            currentRangeStart = lineNumber;
+            currentRangeTop = actualTop;
+            currentSizes = [];
+        }
+        currentSizes.push(sizes[i]);
+    }
+    result.push({
+        lineRange: LineRange.ofLength(currentRangeStart, lineRange.endLineNumberExclusive - currentRangeStart),
+        top: currentRangeTop,
+        sizes: currentSizes,
+    });
+    derived({ owner: 'splitIntoContinuousLineRanges' }, r => {
+        return editorObs.observeTopForLineNumber(lineRange.endLineNumberExclusive - 1).read(r);
+    }).read(reader);
+    return result;
+}
+function findFirstMinimzeDistance(range, targetLine, predicate) {
+    for (let offset = 0;; offset++) {
+        const down = targetLine + offset;
+        if (down <= range.endLineNumberExclusive) {
+            const result = predicate(down);
+            if (result !== undefined) {
+                return result;
+            }
+        }
+        const up = targetLine - offset;
+        if (up >= range.startLineNumber) {
+            const result = predicate(up);
+            if (result !== undefined) {
+                return result;
+            }
+        }
+        if (up < range.startLineNumber && down > range.endLineNumberExclusive) {
+            return undefined;
+        }
+    }
+}
+function getSums(array, fn) {
+    const result = [0];
+    let sum = 0;
+    for (const item of array) {
+        sum += fn(item);
+        result.push(sum);
+    }
+    return result;
+}
+
+export { WidgetPlacementContext, splitIntoContinuousLineRanges };

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

@@ -5,11 +5,12 @@ import { AbstractText } from "../../../../../../common/core/text/abstractText.js
 import { DetailedLineRangeMapping } from "../../../../../../common/diff/rangeMapping.js";
 import { ITextModel } from "../../../../../../common/model.js";
 import { IInlineEditsView, InlineEditClickEvent } from "../inlineEditsViewInterface.js";
+import { InlineCompletionEditorType } from "../../../model/provideInlineCompletions.js";
 export interface IOriginalEditorInlineDiffViewState {
     diff: DetailedLineRangeMapping[];
     modifiedText: AbstractText;
     mode: "insertionInline" | "sideBySide" | "deletion" | "lineReplacement";
-    isInDiffEditor: boolean;
+    editorType: InlineCompletionEditorType;
     modifiedCodeEditor: ICodeEditor;
 }
 export declare class OriginalEditorInlineDiffView extends Disposable implements IInlineEditsView {

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

@@ -11,6 +11,7 @@ import { EndOfLinePreference, InjectedTextCursorStops } from '../../../../../../
 import { ModelDecorationOptions } from '../../../../../../common/model/textModel.js';
 import { InlineEditClickEvent } from '../inlineEditsViewInterface.js';
 import { classNames } from '../utils/utils.js';
+import { InlineCompletionEditorType } from '../../../model/provideInlineCompletions.js';
 import { derived } from '../../../../../../../base/common/observableInternal/observables/derived.js';
 import { autorunWithStore } from '../../../../../../../base/common/observableInternal/reactions/autorun.js';
 import { observableFromEvent } from '../../../../../../../base/common/observableInternal/observables/observableFromEvent.js';
@@ -163,7 +164,7 @@ class OriginalEditorInlineDiffView extends Disposable {
                     }
                 }
             }
-            if (diff.isInDiffEditor) {
+            if (diff.editorType === InlineCompletionEditorType.DiffEditor) {
                 for (const m of diff.diff) {
                     if (!m.original.isEmpty) {
                         originalDecorations.push({

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

@@ -2,6 +2,7 @@ import { Color } from "../../../../../../base/common/color.js";
 import { IObservable } from "../../../../../../base/common/observable.js";
 import { ColorIdentifier } from "../../../../../../platform/theme/common/colorUtils.js";
 import { IThemeService } from "../../../../../../platform/theme/common/themeService.service.js";
+import { InlineCompletionEditorType } from "../../model/provideInlineCompletions.js";
 import { InlineEditTabAction } from "./inlineEditsViewInterface.js";
 export declare const originalBackgroundColor: string;
 export declare const modifiedBackgroundColor: string;
@@ -22,4 +23,6 @@ export declare const inlineEditIndicatorBackground: string;
 export declare function getModifiedBorderColor(tabAction: IObservable<InlineEditTabAction>): IObservable<string>;
 export declare function getOriginalBorderColor(tabAction: IObservable<InlineEditTabAction>): IObservable<string>;
 export declare function getEditorBlendedColor(colorIdentifier: ColorIdentifier | IObservable<ColorIdentifier>, themeService: IThemeService): IObservable<Color>;
+export declare function getEditorBackgroundColor(editorType: InlineCompletionEditorType): string;
 export declare function observeColor(colorIdentifier: ColorIdentifier, themeService: IThemeService): IObservable<Color>;
+export declare const INLINE_EDITS_BORDER_RADIUS = 3;