@xterm/xterm 6.1.0-beta.18 → 6.1.0-beta.180

package/src/browser/Dom.ts

@@ -0,0 +1,178 @@
+/**
+ * Copyright (c) 2026 The xterm.js authors. All rights reserved.
+ * @license MIT
+ *
+ * Minimal DOM helpers for xterm.js browser code.
+ */
+
+import { IntervalTimer } from 'common/Async';
+import { IDisposable } from 'common/Lifecycle';
+
+export function getWindow(e: Node | UIEvent | undefined | null): Window {
+  const candidateNode = e as Node | undefined | null;
+  if (candidateNode?.ownerDocument?.defaultView) {
+    return candidateNode.ownerDocument.defaultView;
+  }
+
+  const candidateEvent = e as UIEvent | undefined | null;
+  if (candidateEvent?.view) {
+    return candidateEvent.view;
+  }
+
+  return window;
+}
+
+class DomListener implements IDisposable {
+  private _handler: ((e: any) => void) | null;
+  private _node: EventTarget | null;
+  private readonly _type: string;
+  private readonly _options: boolean | AddEventListenerOptions | undefined;
+
+  constructor(node: EventTarget, type: string, handler: (e: any) => void, options?: boolean | AddEventListenerOptions) {
+    this._node = node;
+    this._type = type;
+    this._handler = handler;
+    this._options = options;
+    node.addEventListener(type, handler, options);
+  }
+
+  public dispose(): void {
+    if (!this._node || !this._handler) {
+      return;
+    }
+    this._node.removeEventListener(this._type, this._handler, this._options);
+    this._node = null;
+    this._handler = null;
+  }
+}
+
+export function addDisposableListener<K extends keyof GlobalEventHandlersEventMap>(node: EventTarget, type: K, handler: (event: GlobalEventHandlersEventMap[K]) => void, useCapture?: boolean): IDisposable;
+export function addDisposableListener(node: EventTarget, type: string, handler: (event: any) => void, useCapture?: boolean): IDisposable;
+export function addDisposableListener(node: EventTarget, type: string, handler: (event: any) => void, options: AddEventListenerOptions): IDisposable;
+export function addDisposableListener(node: EventTarget, type: string, handler: (event: any) => void, useCaptureOrOptions?: boolean | AddEventListenerOptions): IDisposable {
+  return new DomListener(node, type, handler, useCaptureOrOptions);
+}
+
+export function addStandardDisposableListener(node: HTMLElement, type: string, handler: (event: any) => void, useCapture?: boolean): IDisposable {
+  return addDisposableListener(node, type, handler, useCapture);
+}
+
+export const eventType = {
+  CLICK: 'click',
+  MOUSE_DOWN: 'mousedown',
+  MOUSE_OVER: 'mouseover',
+  MOUSE_LEAVE: 'mouseleave',
+  KEY_DOWN: 'keydown',
+  KEY_UP: 'keyup',
+  INPUT: 'input',
+  BLUR: 'blur',
+  FOCUS: 'focus',
+  CHANGE: 'change',
+  POINTER_DOWN: 'pointerdown',
+  POINTER_MOVE: 'pointermove',
+  POINTER_UP: 'pointerup',
+  MOUSE_WHEEL: 'wheel',
+  WHEEL: 'wheel'
+} as const;
+
+export function getDomNodePagePosition(domNode: HTMLElement): { left: number, top: number, width: number, height: number } {
+  const bb = domNode.getBoundingClientRect();
+  const win = getWindow(domNode);
+  return {
+    left: bb.left + win.scrollX,
+    top: bb.top + win.scrollY,
+    width: bb.width,
+    height: bb.height
+  };
+}
+
+class AnimationFrameQueueItem implements IDisposable {
+  private _canceled = false;
+
+  constructor(private readonly _runner: () => void, public priority: number) {
+  }
+
+  public dispose(): void {
+    this._canceled = true;
+  }
+
+  public execute(): void {
+    if (this._canceled) {
+      return;
+    }
+    try {
+      this._runner();
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  public static sort(a: AnimationFrameQueueItem, b: AnimationFrameQueueItem): number {
+    return b.priority - a.priority;
+  }
+}
+
+interface IWindowAnimationFrameState {
+  next: AnimationFrameQueueItem[];
+  current: AnimationFrameQueueItem[];
+  animFrameRequested: boolean;
+  inAnimationFrameRunner: boolean;
+}
+
+const animationFrameState = new Map<Window, IWindowAnimationFrameState>();
+
+function getAnimationFrameState(targetWindow: Window): IWindowAnimationFrameState {
+  let state = animationFrameState.get(targetWindow);
+  if (!state) {
+    state = {
+      next: [],
+      current: [],
+      animFrameRequested: false,
+      inAnimationFrameRunner: false
+    };
+    animationFrameState.set(targetWindow, state);
+  }
+  return state;
+}
+
+function animationFrameRunner(targetWindow: Window): void {
+  const state = getAnimationFrameState(targetWindow);
+  state.animFrameRequested = false;
+
+  state.current = state.next;
+  state.next = [];
+
+  state.inAnimationFrameRunner = true;
+  while (state.current.length > 0) {
+    state.current.sort(AnimationFrameQueueItem.sort);
+    const top = state.current.shift()!;
+    top.execute();
+  }
+  state.inAnimationFrameRunner = false;
+}
+
+export function scheduleAtNextAnimationFrame(targetWindow: Window, runner: () => void, priority: number = 0): IDisposable {
+  const state = getAnimationFrameState(targetWindow);
+  const item = new AnimationFrameQueueItem(runner, priority);
+  state.next.push(item);
+
+  if (!state.animFrameRequested) {
+    state.animFrameRequested = true;
+    targetWindow.requestAnimationFrame(() => animationFrameRunner(targetWindow));
+  }
+
+  return item;
+}
+
+export class WindowIntervalTimer extends IntervalTimer {
+  private readonly _defaultTarget?: Window;
+
+  constructor(node?: Node) {
+    super();
+    this._defaultTarget = node ? getWindow(node) : undefined;
+  }
+
+  public cancelAndSet(runner: () => void, interval: number, targetWindow?: Window): void {
+    super.cancelAndSet(runner, interval, targetWindow ?? this._defaultTarget ?? window);
+  }
+}

package/src/browser/Linkifier.ts

@@ -4,12 +4,12 @@
  */
 
 import { IBufferCellPosition, ILink, ILinkDecorations, ILinkWithState, ILinkifier2, ILinkifierEvent } from 'browser/Types';
-import { Disposable, dispose, toDisposable } from 'vs/base/common/lifecycle';
+import { Disposable, dispose, toDisposable } from 'common/Lifecycle';
 import { IDisposable } from 'common/Types';
 import { IBufferService } from 'common/services/Services';
 import { ILinkProviderService, IMouseService, IRenderService } from './services/Services';
-import { Emitter } from 'vs/base/common/event';
-import { addDisposableListener } from 'vs/base/browser/dom';
+import { Emitter } from 'common/Event';
+import { addDisposableListener } from 'browser/Dom';
 
 export class Linkifier extends Disposable implements ILinkifier2 {
   public get currentLink(): ILinkWithState | undefined { return this._currentLink; }

package/src/browser/OscLinkProvider.ts

@@ -9,6 +9,8 @@ import { CellData } from 'common/buffer/CellData';
 import { IBufferService, IOptionsService, IOscLinkService } from 'common/services/Services';
 
 export class OscLinkProvider implements ILinkProvider {
+  private readonly _workCell = new CellData();
+
   constructor(
     @IBufferService private readonly _bufferService: IBufferService,
     @IOptionsService private readonly _optionsService: IOptionsService,
@@ -25,7 +27,7 @@ export class OscLinkProvider implements ILinkProvider {
 
     const result: ILink[] = [];
     const linkHandler = this._optionsService.rawOptions.linkHandler;
-    const cell = new CellData();
+    const cell = this._workCell;
     const lineLength = line.getTrimmedLength();
     let currentLinkId = -1;
     let currentStart = -1;

package/src/browser/RenderDebouncer.ts

@@ -40,8 +40,8 @@ export class RenderDebouncer implements IRenderDebouncerWithCallback {
   public refresh(rowStart: number | undefined, rowEnd: number | undefined, rowCount: number): void {
     this._rowCount = rowCount;
     // Get the min/max row start/end for the arg values
-    rowStart = rowStart !== undefined ? rowStart : 0;
-    rowEnd = rowEnd !== undefined ? rowEnd : this._rowCount - 1;
+    rowStart = rowStart ?? 0;
+    rowEnd = rowEnd ?? this._rowCount - 1;
     // Set the properties to the updated values
     this._rowStart = this._rowStart !== undefined ? Math.min(this._rowStart, rowStart) : rowStart;
     this._rowEnd = this._rowEnd !== undefined ? Math.max(this._rowEnd, rowEnd) : rowEnd;

package/src/browser/TimeBasedDebouncer.ts

@@ -37,8 +37,8 @@ export class TimeBasedDebouncer implements IRenderDebouncer {
   public refresh(rowStart: number | undefined, rowEnd: number | undefined, rowCount: number): void {
     this._rowCount = rowCount;
     // Get the min/max row start/end for the arg values
-    rowStart = rowStart !== undefined ? rowStart : 0;
-    rowEnd = rowEnd !== undefined ? rowEnd : this._rowCount - 1;
+    rowStart = rowStart ?? 0;
+    rowEnd = rowEnd ?? this._rowCount - 1;
     // Set the properties to the updated values
     this._rowStart = this._rowStart !== undefined ? Math.min(this._rowStart, rowStart) : rowStart;
     this._rowEnd = this._rowEnd !== undefined ? Math.max(this._rowEnd, rowEnd) : rowEnd;

package/src/browser/Types.ts

@@ -5,9 +5,9 @@
 
 import { CharData, IColor, ICoreTerminal, ITerminalOptions } from 'common/Types';
 import { IBuffer } from 'common/buffer/Types';
-import { IDisposable, Terminal as ITerminalApi } from '@xterm/xterm';
+import { IDisposable, IRenderDimensions as IRenderDimensionsApi, Terminal as ITerminalApi } from '@xterm/xterm';
 import { channels, css } from 'common/Color';
-import type { Event } from 'vs/base/common/event';
+import type { IEvent } from 'common/Event';
 
 /**
  * A portion of the public API that are implemented identially internally and simply passed through.
@@ -21,13 +21,14 @@ export interface ITerminal extends InternalPassthroughApis, ICoreTerminal {
   linkifier: ILinkifier2 | undefined;
   options: Required<ITerminalOptions>;
 
-  onBlur: Event<void>;
-  onFocus: Event<void>;
-  onA11yChar: Event<string>;
-  onA11yTab: Event<number>;
-  onWillOpen: Event<HTMLElement>;
+  readonly dimensions: IRenderDimensionsApi | undefined;
 
-  cancel(ev: MouseEvent | WheelEvent | KeyboardEvent | InputEvent, force?: boolean): boolean | void;
+  onBlur: IEvent<void>;
+  onFocus: IEvent<void>;
+  onDimensionsChange: IEvent<IRenderDimensionsApi>;
+  onA11yChar: IEvent<string>;
+  onA11yTab: IEvent<number>;
+  onWillOpen: IEvent<HTMLElement>;
 }
 
 export type CustomKeyEventHandler = (event: KeyboardEvent) => boolean;
@@ -98,7 +99,7 @@ export interface IPartialColorSet {
 
 export interface IViewport extends IDisposable {
   scrollBarWidth: number;
-  readonly onRequestScrollLines: Event<{ amount: number, suppressScrollEvent: boolean }>;
+  readonly onRequestScrollLines: IEvent<{ amount: number, suppressScrollEvent: boolean }>;
   syncScrollArea(immediate?: boolean, force?: boolean): void;
   getLinesScrolled(ev: WheelEvent): number;
   getBufferElements(startLine: number, endLine?: number): { bufferElements: HTMLElement[], cursorElement?: HTMLElement };
@@ -128,8 +129,8 @@ export interface ILinkWithState {
 }
 
 export interface ILinkifier2 extends IDisposable {
-  onShowLinkUnderline: Event<ILinkifierEvent>;
-  onHideLinkUnderline: Event<ILinkifierEvent>;
+  onShowLinkUnderline: IEvent<ILinkifierEvent>;
+  onHideLinkUnderline: IEvent<ILinkifierEvent>;
   readonly currentLink: ILinkWithState | undefined;
 }
 

package/src/browser/Viewport.ts

@@ -5,14 +5,15 @@
 
 import { ICoreBrowserService, IRenderService, IThemeService } from 'browser/services/Services';
 import { ViewportConstants } from 'browser/shared/Constants';
-import { Disposable, toDisposable } from 'vs/base/common/lifecycle';
+import { Disposable, toDisposable } from 'common/Lifecycle';
 import { IBufferService, ICoreMouseService, IOptionsService } from 'common/services/Services';
 import { CoreMouseEventType } from 'common/Types';
-import { scheduleAtNextAnimationFrame } from 'vs/base/browser/dom';
-import { SmoothScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElement';
-import type { ScrollableElementChangeOptions } from 'vs/base/browser/ui/scrollbar/scrollableElementOptions';
-import { Emitter, Event } from 'vs/base/common/event';
-import { Scrollable, ScrollbarVisibility, type ScrollEvent } from 'vs/base/common/scrollable';
+import { addDisposableListener, scheduleAtNextAnimationFrame } from 'browser/Dom';
+import { SmoothScrollableElement } from 'browser/scrollable/scrollableElement';
+import type { IScrollableElementChangeOptions } from 'browser/scrollable/scrollableElementOptions';
+import { Emitter, EventUtils } from 'common/Event';
+import { Scrollable, ScrollbarVisibility, type IScrollEvent } from 'browser/scrollable/scrollable';
+import { Gesture, EventType as GestureEventType, type IGestureEvent } from 'browser/scrollable/touch';
 
 export class Viewport extends Disposable {
 
@@ -51,16 +52,17 @@ export class Viewport extends Disposable {
     }));
 
     this._scrollableElement = this._register(new SmoothScrollableElement(screenElement, {
-      vertical: ScrollbarVisibility.Auto,
-      horizontal: ScrollbarVisibility.Hidden,
+      vertical: ScrollbarVisibility.AUTO,
+      horizontal: ScrollbarVisibility.HIDDEN,
       useShadows: false,
       mouseWheelSmoothScroll: true,
+      verticalHasArrows: this._optionsService.rawOptions.scrollbar?.showArrows ?? false,
       ...this._getChangeOptions()
     }, scrollable));
     this._register(this._optionsService.onMultipleOptionChange([
       'scrollSensitivity',
       'fastScrollSensitivity',
-      'overviewRuler'
+      'scrollbar'
     ], () => this._scrollableElement.updateOptions(this._getChangeOptions())));
     // Don't handle mouse wheel if wheel events are supported by the current mouse prototcol
     this._register(coreMouseService.onProtocolChange(type => {
@@ -70,7 +72,8 @@ export class Viewport extends Disposable {
     }));
 
     this._scrollableElement.setScrollDimensions({ height: 0, scrollHeight: 0 });
-    this._register(Event.runAndSubscribe(themeService.onChangeColors, () => {
+    this._register(EventUtils.runAndSubscribe(themeService.onChangeColors, () => {
+      element.style.backgroundColor = themeService.colors.background.css;
       this._scrollableElement.getDomNode().style.backgroundColor = themeService.colors.background.css;
     }));
     element.appendChild(this._scrollableElement.getDomNode());
@@ -79,15 +82,15 @@ export class Viewport extends Disposable {
     this._styleElement = coreBrowserService.mainDocument.createElement('style');
     screenElement.appendChild(this._styleElement);
     this._register(toDisposable(() => this._styleElement.remove()));
-    this._register(Event.runAndSubscribe(themeService.onChangeColors, () => {
+    this._register(EventUtils.runAndSubscribe(themeService.onChangeColors, () => {
       this._styleElement.textContent = [
-        `.xterm .xterm-scrollable-element > .scrollbar > .slider {`,
+        `.xterm .xterm-scrollable-element > .xterm-scrollbar > .xterm-slider {`,
         `  background: ${themeService.colors.scrollbarSliderBackground.css};`,
         `}`,
-        `.xterm .xterm-scrollable-element > .scrollbar > .slider:hover {`,
+        `.xterm .xterm-scrollable-element > .xterm-scrollbar > .xterm-slider:hover {`,
         `  background: ${themeService.colors.scrollbarSliderHoverBackground.css};`,
         `}`,
-        `.xterm .xterm-scrollable-element > .scrollbar > .slider.active {`,
+        `.xterm .xterm-scrollable-element > .xterm-scrollbar > .xterm-slider.xterm-active {`,
         `  background: ${themeService.colors.scrollbarSliderActiveBackground.css};`,
         `}`
       ].join('\n');
@@ -103,6 +106,10 @@ export class Viewport extends Disposable {
     this._register(this._bufferService.onScroll(() => this._sync()));
 
     this._register(this._scrollableElement.onScroll(e => this._handleScroll(e)));
+
+    // Touch/gesture scrolling support
+    this._register(Gesture.addTarget(screenElement));
+    this._register(addDisposableListener(screenElement, GestureEventType.CHANGE, (e: IGestureEvent) => this._handleGestureChange(e)));
   }
 
   public scrollLines(disp: number): void {
@@ -123,11 +130,18 @@ export class Viewport extends Disposable {
     });
   }
 
-  private _getChangeOptions(): ScrollableElementChangeOptions {
+  private _getChangeOptions(): IScrollableElementChangeOptions {
+    const showScrollbar = this._optionsService.rawOptions.scrollbar?.showScrollbar ?? true;
+    const showArrows = this._optionsService.rawOptions.scrollbar?.showArrows ?? false;
+    const verticalScrollbarSize = showScrollbar
+      ? (this._optionsService.rawOptions.scrollbar?.width ?? ViewportConstants.DEFAULT_SCROLL_BAR_WIDTH)
+      : 0;
     return {
       mouseWheelScrollSensitivity: this._optionsService.rawOptions.scrollSensitivity,
       fastScrollSensitivity: this._optionsService.rawOptions.fastScrollSensitivity,
-      verticalScrollbarSize: this._optionsService.rawOptions.overviewRuler?.width || ViewportConstants.DEFAULT_SCROLL_BAR_WIDTH
+      vertical: showScrollbar ? ScrollbarVisibility.AUTO : ScrollbarVisibility.HIDDEN,
+      verticalScrollbarSize,
+      verticalHasArrows: showArrows
     };
   }
 
@@ -173,7 +187,7 @@ export class Viewport extends Disposable {
     this._isSyncing = false;
   }
 
-  private _handleScroll(e: ScrollEvent): void {
+  private _handleScroll(e: IScrollEvent): void {
     if (!this._renderService) {
       return;
     }
@@ -189,4 +203,13 @@ export class Viewport extends Disposable {
     }
     this._isHandlingScroll = false;
   }
+
+  private _handleGestureChange(e: IGestureEvent): void {
+    e.preventDefault();
+    e.stopPropagation();
+    const pos = this._scrollableElement.getScrollPosition();
+    this._scrollableElement.setScrollPosition({
+      scrollTop: pos.scrollTop - e.translationY
+    });
+  }
 }

package/src/browser/decorations/BufferDecorationRenderer.ts

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { ICoreBrowserService, IRenderService } from 'browser/services/Services';
-import { Disposable, toDisposable } from 'vs/base/common/lifecycle';
+import { Disposable, toDisposable } from 'common/Lifecycle';
 import { IBufferService, IDecorationService, IInternalDecoration } from 'common/services/Services';
 
 export class BufferDecorationRenderer extends Disposable {

package/src/browser/decorations/OverviewRulerRenderer.ts

@@ -5,7 +5,7 @@
 
 import { ColorZoneStore, IColorZone, IColorZoneStore } from 'browser/decorations/ColorZoneStore';
 import { ICoreBrowserService, IRenderService, IThemeService } from 'browser/services/Services';
-import { Disposable, toDisposable } from 'vs/base/common/lifecycle';
+import { Disposable, toDisposable } from 'common/Lifecycle';
 import { IBufferService, IDecorationService, IOptionsService } from 'common/services/Services';
 
 const enum Constants {
@@ -38,7 +38,12 @@ export class OverviewRulerRenderer extends Disposable {
   private readonly _ctx: CanvasRenderingContext2D;
   private readonly _colorZoneStore: IColorZoneStore = new ColorZoneStore();
   private get _width(): number {
-    return this._optionsService.options.overviewRuler?.width || 0;
+    const scrollbar = this._optionsService.rawOptions.scrollbar;
+    const showScrollbar = scrollbar?.showScrollbar ?? true;
+    if (!showScrollbar) {
+      return 0;
+    }
+    return scrollbar?.width ?? 0;
   }
   private _animationFrame: number | undefined;
 
@@ -46,8 +51,6 @@ export class OverviewRulerRenderer extends Disposable {
   private _shouldUpdateAnchor: boolean | undefined = true;
   private _lastKnownBufferLength: number = 0;
 
-  private _containerHeight: number | undefined;
-
   constructor(
     private readonly _viewportElement: HTMLElement,
     private readonly _screenElement: HTMLElement,
@@ -86,16 +89,10 @@ export class OverviewRulerRenderer extends Disposable {
       }
     }));
 
-    // Container height changed
-    this._register(this._renderService.onRender((): void => {
-      if (!this._containerHeight || this._containerHeight !== this._screenElement.clientHeight) {
-        this._queueRefresh(true);
-        this._containerHeight = this._screenElement.clientHeight;
-      }
-    }));
+    this._register(this._renderService.onDimensionsChange(() => this._queueRefresh(true)));
 
     this._register(this._coreBrowserService.onDprChange(() => this._queueRefresh(true)));
-    this._register(this._optionsService.onSpecificOptionChange('overviewRuler', () => this._queueRefresh(true)));
+    this._register(this._optionsService.onSpecificOptionChange('scrollbar', () => this._queueRefresh(true)));
     this._register(this._themeService.onChangeColors(() => this._queueRefresh()));
     this._queueRefresh(true);
   }
@@ -139,10 +136,12 @@ export class OverviewRulerRenderer extends Disposable {
   }
 
   private _refreshCanvasDimensions(): void {
+    const cssCanvasHeight = this._renderService.dimensions.css.canvas.height;
+    const deviceCanvasHeight = this._renderService.dimensions.device.canvas.height;
     this._canvas.style.width = `${this._width}px`;
     this._canvas.width = Math.round(this._width * this._coreBrowserService.dpr);
-    this._canvas.style.height = `${this._screenElement.clientHeight}px`;
-    this._canvas.height = Math.round(this._screenElement.clientHeight * this._coreBrowserService.dpr);
+    this._canvas.style.height = `${cssCanvasHeight}px`;
+    this._canvas.height = deviceCanvasHeight;
     this._refreshDrawConstants();
     this._refreshColorZonePadding();
   }
@@ -176,10 +175,10 @@ export class OverviewRulerRenderer extends Disposable {
   private _renderRulerOutline(): void {
     this._ctx.fillStyle = this._themeService.colors.overviewRulerBorder.css;
     this._ctx.fillRect(0, 0, Constants.OVERVIEW_RULER_BORDER_WIDTH, this._canvas.height);
-    if (this._optionsService.rawOptions.overviewRuler.showTopBorder) {
+    if (this._optionsService.rawOptions.scrollbar?.overviewRuler?.showTopBorder) {
       this._ctx.fillRect(Constants.OVERVIEW_RULER_BORDER_WIDTH, 0, this._canvas.width - Constants.OVERVIEW_RULER_BORDER_WIDTH, Constants.OVERVIEW_RULER_BORDER_WIDTH);
     }
-    if (this._optionsService.rawOptions.overviewRuler.showBottomBorder) {
+    if (this._optionsService.rawOptions.scrollbar?.overviewRuler?.showBottomBorder) {
       this._ctx.fillRect(Constants.OVERVIEW_RULER_BORDER_WIDTH, this._canvas.height - Constants.OVERVIEW_RULER_BORDER_WIDTH, this._canvas.width - Constants.OVERVIEW_RULER_BORDER_WIDTH, this._canvas.height);
     }
   }

package/src/browser/input/CompositionHelper.ts

@@ -41,6 +41,11 @@ export class CompositionHelper {
    */
   private _dataAlreadySent: string;
 
+  /**
+   * The pending textarea change timer, if any.
+   */
+  private _textareaChangeTimer?: number;
+
   constructor(
     private readonly _textarea: HTMLTextAreaElement,
     private readonly _compositionView: HTMLElement,
@@ -184,8 +189,12 @@ export class CompositionHelper {
    * IME is active.
    */
   private _handleAnyTextareaChanges(): void {
+    if (this._textareaChangeTimer) {
+      return;
+    }
     const oldValue = this._textarea.value;
-    setTimeout(() => {
+    this._textareaChangeTimer = window.setTimeout(() => {
+      this._textareaChangeTimer = undefined;
       // Ignore if a composition has started since the timeout
       if (!this._isComposing) {
         const newValue = this._textarea.value;
@@ -230,6 +239,12 @@ export class CompositionHelper {
       this._compositionView.style.lineHeight = cellHeight + 'px';
       this._compositionView.style.fontFamily = this._optionsService.rawOptions.fontFamily;
       this._compositionView.style.fontSize = this._optionsService.rawOptions.fontSize + 'px';
+      // Limit the composition view width to the space between the cursor and
+      // the terminal's right edge, preventing it from overflowing the terminal.
+      const maxWidth = this._bufferService.cols * this._renderService.dimensions.css.cell.width - cursorLeft;
+      this._compositionView.style.maxWidth = maxWidth + 'px';
+      this._compositionView.style.overflow = 'hidden';
+      this._compositionView.style.direction = 'rtl';
       // Sync the textarea to the exact position of the composition view so the IME knows where the
       // text is.
       const compositionViewBounds = this._compositionView.getBoundingClientRect();

package/src/browser/public/Terminal.ts

@@ -6,14 +6,14 @@
 import * as Strings from 'browser/LocalizableStrings';
 import { CoreBrowserTerminal as TerminalCore } from 'browser/CoreBrowserTerminal';
 import { IBufferRange, ITerminal } from 'browser/Types';
-import { Disposable } from 'vs/base/common/lifecycle';
+import { Disposable } from 'common/Lifecycle';
 import { ITerminalOptions } from 'common/Types';
 import { AddonManager } from 'common/public/AddonManager';
 import { BufferNamespaceApi } from 'common/public/BufferNamespaceApi';
 import { ParserApi } from 'common/public/ParserApi';
 import { UnicodeApi } from 'common/public/UnicodeApi';
-import { IBufferNamespace as IBufferNamespaceApi, IDecoration, IDecorationOptions, IDisposable, ILinkProvider, ILocalizableStrings, IMarker, IModes, IParser, ITerminalAddon, Terminal as ITerminalApi, ITerminalInitOnlyOptions, IUnicodeHandling } from '@xterm/xterm';
-import type { Event } from 'vs/base/common/event';
+import { IBufferNamespace as IBufferNamespaceApi, IDecoration, IDecorationOptions, IDisposable, ILinkProvider, ILocalizableStrings, IMarker, IModes, IParser, IRenderDimensions, ITerminalAddon, Terminal as ITerminalApi, ITerminalInitOnlyOptions, IUnicodeHandling } from '@xterm/xterm';
+import type { IEvent } from 'common/Event';
 
 /**
  * The set of options that only have an effect when set in the Terminal constructor.
@@ -68,25 +68,24 @@ export class Terminal extends Disposable implements ITerminalApi {
     }
   }
 
-  public get onBell(): Event<void> { return this._core.onBell; }
-  public get onBinary(): Event<string> { return this._core.onBinary; }
-  public get onCursorMove(): Event<void> { return this._core.onCursorMove; }
-  public get onData(): Event<string> { return this._core.onData; }
-  public get onKey(): Event<{ key: string, domEvent: KeyboardEvent }> { return this._core.onKey; }
-  public get onLineFeed(): Event<void> { return this._core.onLineFeed; }
-  public get onRender(): Event<{ start: number, end: number }> { return this._core.onRender; }
-  public get onResize(): Event<{ cols: number, rows: number }> { return this._core.onResize; }
-  public get onScroll(): Event<number> { return this._core.onScroll; }
-  public get onSelectionChange(): Event<void> { return this._core.onSelectionChange; }
-  public get onTitleChange(): Event<string> { return this._core.onTitleChange; }
-  public get onWriteParsed(): Event<void> { return this._core.onWriteParsed; }
+  public get onBell(): IEvent<void> { return this._core.onBell; }
+  public get onBinary(): IEvent<string> { return this._core.onBinary; }
+  public get onCursorMove(): IEvent<void> { return this._core.onCursorMove; }
+  public get onData(): IEvent<string> { return this._core.onData; }
+  public get onKey(): IEvent<{ key: string, domEvent: KeyboardEvent }> { return this._core.onKey; }
+  public get onLineFeed(): IEvent<void> { return this._core.onLineFeed; }
+  public get onRender(): IEvent<{ start: number, end: number }> { return this._core.onRender; }
+  public get onResize(): IEvent<{ cols: number, rows: number }> { return this._core.onResize; }
+  public get onScroll(): IEvent<number> { return this._core.onScroll; }
+  public get onSelectionChange(): IEvent<void> { return this._core.onSelectionChange; }
+  public get onTitleChange(): IEvent<string> { return this._core.onTitleChange; }
+  public get onWriteParsed(): IEvent<void> { return this._core.onWriteParsed; }
+  public get onDimensionsChange(): IEvent<IRenderDimensions> { return this._core.onDimensionsChange; }
 
   public get element(): HTMLElement | undefined { return this._core.element; }
+  public get screenElement(): HTMLElement | undefined { return this._core.screenElement; }
   public get parser(): IParser {
-    if (!this._parser) {
-      this._parser = new ParserApi(this._core);
-    }
-    return this._parser;
+    return this._parser ??= new ParserApi(this._core);
   }
   public get unicode(): IUnicodeHandling {
     this._checkProposedApi();
@@ -96,13 +95,9 @@ export class Terminal extends Disposable implements ITerminalApi {
   public get rows(): number { return this._core.rows; }
   public get cols(): number { return this._core.cols; }
   public get buffer(): IBufferNamespaceApi {
-    if (!this._buffer) {
-      this._buffer = this._register(new BufferNamespaceApi(this._core));
-    }
-    return this._buffer;
+    return this._buffer ??= this._register(new BufferNamespaceApi(this._core));
   }
   public get markers(): ReadonlyArray<IMarker> {
-    this._checkProposedApi();
     return this._core.markers;
   }
   public get modes(): IModes {
@@ -123,10 +118,15 @@ export class Terminal extends Disposable implements ITerminalApi {
       originMode: m.origin,
       reverseWraparoundMode: m.reverseWraparound,
       sendFocusMode: m.sendFocus,
+      showCursor: !this._core.coreService.isCursorHidden,
       synchronizedOutputMode: m.synchronizedOutput,
+      win32InputMode: m.win32InputMode,
       wraparoundMode: m.wraparound
     };
   }
+  public get dimensions(): IRenderDimensions | undefined {
+    return this._core.dimensions;
+  }
   public get options(): Required<ITerminalOptions> {
     return this._publicOptions;
   }
@@ -161,11 +161,9 @@ export class Terminal extends Disposable implements ITerminalApi {
     return this._core.registerLinkProvider(linkProvider);
   }
   public registerCharacterJoiner(handler: (text: string) => [number, number][]): number {
-    this._checkProposedApi();
     return this._core.registerCharacterJoiner(handler);
   }
   public deregisterCharacterJoiner(joinerId: number): void {
-    this._checkProposedApi();
     this._core.deregisterCharacterJoiner(joinerId);
   }
   public registerMarker(cursorYOffset: number = 0): IMarker {
@@ -173,7 +171,6 @@ export class Terminal extends Disposable implements ITerminalApi {
     return this._core.registerMarker(cursorYOffset);
   }
   public registerDecoration(decorationOptions: IDecorationOptions): IDecoration | undefined {
-    this._checkProposedApi();
     this._verifyPositiveIntegers(decorationOptions.x ?? 0, decorationOptions.width ?? 0, decorationOptions.height ?? 0);
     return this._core.registerDecoration(decorationOptions);
   }