@xterm/xterm 6.1.0-beta.23 → 6.1.0-beta.230

package/src/browser/services/RenderService.ts

@@ -7,10 +7,10 @@ import { RenderDebouncer } from 'browser/RenderDebouncer';
 import { IRenderDebouncerWithCallback } from 'browser/Types';
 import { IRenderDimensions, IRenderer } from 'browser/renderer/shared/Types';
 import { ICharSizeService, ICoreBrowserService, IRenderService, IThemeService } from 'browser/services/Services';
-import { Disposable, MutableDisposable, toDisposable } from 'vs/base/common/lifecycle';
+import { Disposable, MutableDisposable, toDisposable } from 'common/Lifecycle';
 import { DebouncedIdleTask } from 'common/TaskQueue';
-import { IBufferService, ICoreService, IDecorationService, IOptionsService } from 'common/services/Services';
-import { Emitter } from 'vs/base/common/event';
+import { IBufferService, ICoreService, IDecorationService, ILogService, IOptionsService } from 'common/services/Services';
+import { Emitter } from 'common/Event';
 
 interface ISelectionState {
   start: [number, number] | undefined;
@@ -27,8 +27,9 @@ export class RenderService extends Disposable implements IRenderService {
 
   private _renderer: MutableDisposable<IRenderer> = this._register(new MutableDisposable());
   private _renderDebouncer: IRenderDebouncerWithCallback;
-  private _pausedResizeTask = new DebouncedIdleTask();
+  private _pausedResizeTask: DebouncedIdleTask;
   private _observerDisposable = this._register(new MutableDisposable());
+  private _intersectionObserver: IntersectionObserver | undefined;
 
   private _isPaused: boolean = false;
   private _needsFullRefresh: boolean = false;
@@ -58,6 +59,7 @@ export class RenderService extends Disposable implements IRenderService {
     private _rowCount: number,
     screenElement: HTMLElement,
     @IOptionsService private readonly _optionsService: IOptionsService,
+    @ILogService private readonly _logService: ILogService,
     @ICharSizeService private readonly _charSizeService: ICharSizeService,
     @ICoreService private readonly _coreService: ICoreService,
     @IDecorationService decorationService: IDecorationService,
@@ -67,6 +69,8 @@ export class RenderService extends Disposable implements IRenderService {
   ) {
     super();
 
+    this._pausedResizeTask = this._register(new DebouncedIdleTask(this._logService));
+
     this._renderDebouncer = new RenderDebouncer((start, end) => this._renderRows(start, end), this._coreBrowserService);
     this._register(this._renderDebouncer);
 
@@ -111,7 +115,7 @@ export class RenderService extends Disposable implements IRenderService {
     this._register(this._optionsService.onMultipleOptionChange([
       'cursorBlink',
       'cursorStyle'
-    ], () => this.refreshRows(bufferService.buffer.y, bufferService.buffer.y, true)));
+    ], () => this.refreshRows(bufferService.buffer.y, bufferService.buffer.y, undefined, true)));
 
     this._register(themeService.onChangeColors(() => this._fullRefresh()));
 
@@ -124,13 +128,18 @@ export class RenderService extends Disposable implements IRenderService {
     // and resume based on terminal visibility if so
     if ('IntersectionObserver' in w) {
       const observer = new w.IntersectionObserver(e => this._handleIntersectionChange(e[e.length - 1]), { threshold: 0 });
+      this._observerDisposable.value = toDisposable(() => {
+        this._intersectionObserver?.disconnect();
+        this._intersectionObserver = undefined;
+      });
+      this._intersectionObserver = observer;
       observer.observe(screenElement);
-      this._observerDisposable.value = toDisposable(() => observer.disconnect());
     }
   }
 
   private _handleIntersectionChange(entry: IntersectionObserverEntry): void {
     this._isPaused = entry.isIntersecting === undefined ? (entry.intersectionRatio === 0) : !entry.isIntersecting;
+    this._renderer.value?.handleViewportVisibilityChange?.(!this._isPaused);
 
     // Terminal was hidden on open
     if (!this._isPaused && !this._charSizeService.hasValidSize) {
@@ -144,7 +153,7 @@ export class RenderService extends Disposable implements IRenderService {
     }
   }
 
-  public refreshRows(start: number, end: number, isRedrawOnly: boolean = false): void {
+  public refreshRows(start: number, end: number, sync: boolean = false, isRedrawOnly: boolean = false): void {
     if (this._isPaused) {
       this._needsFullRefresh = true;
       return;
@@ -164,7 +173,12 @@ export class RenderService extends Disposable implements IRenderService {
     if (!isRedrawOnly) {
       this._isNextRenderRedrawOnly = false;
     }
-    this._renderDebouncer.refresh(start, end, this._rowCount);
+
+    if (sync) {
+      this._renderRows(start, end);
+    } else {
+      this._renderDebouncer.refresh(start, end, this._rowCount);
+    }
   }
 
   private _renderRows(start: number, end: number): void {
@@ -234,7 +248,7 @@ export class RenderService extends Disposable implements IRenderService {
     this._renderer.value = renderer;
     // If the value was not set, the terminal is being disposed so ignore it
     if (this._renderer.value) {
-      this._renderer.value.onRequestRedraw(e => this.refreshRows(e.start, e.end, true));
+      this._renderer.value.onRequestRedraw(e => this.refreshRows(e.start, e.end, e.sync, true));
 
       // Force a refresh
       this._needsSelectionRefresh = true;
@@ -342,13 +356,11 @@ class SynchronizedOutputHandler {
       this._end = Math.max(this._end, end);
     }
 
-    if (this._timeout === undefined) {
-      this._timeout = this._coreBrowserService.window.setTimeout(() => {
-        this._timeout = undefined;
-        this._coreService.decPrivateModes.synchronizedOutput = false;
-        this._onTimeout();
-      }, Constants.SYNCHRONIZED_OUTPUT_TIMEOUT_MS);
-    }
+    this._timeout ??= this._coreBrowserService.window.setTimeout(() => {
+      this._timeout = undefined;
+      this._coreService.decPrivateModes.synchronizedOutput = false;
+      this._onTimeout();
+    }, Constants.SYNCHRONIZED_OUTPUT_TIMEOUT_MS);
   }
 
   public flush(): { start: number, end: number } | undefined {

package/src/browser/services/SelectionService.ts

@@ -8,37 +8,36 @@ import { getCoordsRelativeToElement } from 'browser/input/Mouse';
 import { moveToCellSequence } from 'browser/input/MoveToCell';
 import { SelectionModel } from 'browser/selection/SelectionModel';
 import { ISelectionRedrawRequestEvent, ISelectionRequestScrollLinesEvent } from 'browser/selection/Types';
-import { ICoreBrowserService, IMouseService, IRenderService, ISelectionService } from 'browser/services/Services';
-import { Disposable, toDisposable } from 'vs/base/common/lifecycle';
+import { ICoreBrowserService, IMouseCoordsService, IRenderService, ISelectionService } from 'browser/services/Services';
+import { Disposable, toDisposable } from 'common/Lifecycle';
 import * as Browser from 'common/Platform';
-import { IBufferLine, IDisposable } from 'common/Types';
+import { IBufferLine, ICellData, IDisposable } from 'common/Types';
 import { getRangeLength } from 'common/buffer/BufferRange';
 import { CellData } from 'common/buffer/CellData';
 import { IBuffer } from 'common/buffer/Types';
 import { IBufferService, ICoreService, IOptionsService } from 'common/services/Services';
-import { Emitter } from 'vs/base/common/event';
+import { Emitter } from 'common/Event';
 
-/**
- * The number of pixels the mouse needs to be above or below the viewport in
- * order to scroll at the maximum speed.
- */
-const DRAG_SCROLL_MAX_THRESHOLD = 50;
-
-/**
- * The maximum scrolling speed
- */
-const DRAG_SCROLL_MAX_SPEED = 15;
-
-/**
- * The number of milliseconds between drag scroll updates.
- */
-const DRAG_SCROLL_INTERVAL = 50;
-
-/**
- * The maximum amount of time that can have elapsed for an alt click to move the
- * cursor.
- */
-const ALT_CLICK_MOVE_CURSOR_TIME = 500;
+const enum Constants {
+  /**
+   * The number of pixels the mouse needs to be above or below the viewport in
+   * order to scroll at the maximum speed.
+   */
+  DRAG_SCROLL_MAX_THRESHOLD = 50,
+  /**
+   * The maximum scrolling speed
+   */
+  DRAG_SCROLL_MAX_SPEED = 15,
+  /**
+   * The number of milliseconds between drag scroll updates.
+   */
+  DRAG_SCROLL_INTERVAL = 50,
+  /**
+   * The maximum amount of time that can have elapsed for an alt click to move the
+   * cursor.
+   */
+  ALT_CLICK_MOVE_CURSOR_TIME = 500
+}
 
 const NON_BREAKING_SPACE_CHAR = String.fromCharCode(160);
 const ALL_NON_BREAKING_SPACE_REGEX = new RegExp(NON_BREAKING_SPACE_CHAR, 'g');
@@ -126,7 +125,7 @@ export class SelectionService extends Disposable implements ISelectionService {
     private readonly _linkifier: ILinkifier2,
     @IBufferService private readonly _bufferService: IBufferService,
     @ICoreService private readonly _coreService: ICoreService,
-    @IMouseService private readonly _mouseService: IMouseService,
+    @IMouseCoordsService private readonly _mouseCoordsService: IMouseCoordsService,
     @IOptionsService private readonly _optionsService: IOptionsService,
     @IRenderService private readonly _renderService: IRenderService,
     @ICoreBrowserService private readonly _coreBrowserService: ICoreBrowserService
@@ -395,7 +394,7 @@ export class SelectionService extends Disposable implements ISelectionService {
    * @param event The mouse event.
    */
   private _getMouseBufferCoords(event: MouseEvent): [number, number] | undefined {
-    const coords = this._mouseService.getCoords(event, this._screenElement, this._bufferService.cols, this._bufferService.rows, true);
+    const coords = this._mouseCoordsService.getCoords(event, this._screenElement, this._bufferService.cols, this._bufferService.rows, true);
     if (!coords) {
       return undefined;
     }
@@ -424,9 +423,9 @@ export class SelectionService extends Disposable implements ISelectionService {
       offset -= terminalHeight;
     }
 
-    offset = Math.min(Math.max(offset, -DRAG_SCROLL_MAX_THRESHOLD), DRAG_SCROLL_MAX_THRESHOLD);
-    offset /= DRAG_SCROLL_MAX_THRESHOLD;
-    return (offset / Math.abs(offset)) + Math.round(offset * (DRAG_SCROLL_MAX_SPEED - 1));
+    offset = Math.min(Math.max(offset, -Constants.DRAG_SCROLL_MAX_THRESHOLD), Constants.DRAG_SCROLL_MAX_THRESHOLD);
+    offset /= Constants.DRAG_SCROLL_MAX_THRESHOLD;
+    return (offset / Math.abs(offset)) + Math.round(offset * (Constants.DRAG_SCROLL_MAX_SPEED - 1));
   }
 
   /**
@@ -500,7 +499,7 @@ export class SelectionService extends Disposable implements ISelectionService {
       this._screenElement.ownerDocument.addEventListener('mousemove', this._mouseMoveListener);
       this._screenElement.ownerDocument.addEventListener('mouseup', this._mouseUpListener);
     }
-    this._dragScrollIntervalTimer = this._coreBrowserService.window.setInterval(() => this._dragScroll(), DRAG_SCROLL_INTERVAL);
+    this._dragScrollIntervalTimer = this._coreBrowserService.window.setInterval(() => this._dragScroll(), Constants.DRAG_SCROLL_INTERVAL);
   }
 
   /**
@@ -532,6 +531,9 @@ export class SelectionService extends Disposable implements ISelectionService {
    * @param event The mouse event.
    */
   private _handleSingleClick(event: MouseEvent): void {
+    // Track if there was a selection before clearing
+    const hadSelection = this.hasSelection;
+
     this._model.selectionStartLength = 0;
     this._model.isSelectAllActive = false;
     this._activeSelectionMode = this.shouldColumnSelect(event) ? SelectionMode.COLUMN : SelectionMode.NORMAL;
@@ -543,6 +545,11 @@ export class SelectionService extends Disposable implements ISelectionService {
     }
     this._model.selectionEnd = undefined;
 
+    // Fire selection change event if a selection was cleared
+    if (hadSelection) {
+      this._fireOnSelectionChange(this._model.finalSelectionStart, this._model.finalSelectionEnd, false);
+    }
+
     // Ensure the line exists
     const line = this._bufferService.buffer.lines.get(this._model.selectionStart[1]);
     if (!line) {
@@ -667,7 +674,7 @@ export class SelectionService extends Disposable implements ISelectionService {
   }
 
   /**
-   * The callback that occurs every DRAG_SCROLL_INTERVAL ms that does the
+   * The callback that occurs every Constants.DRAG_SCROLL_INTERVAL ms that does the
    * scrolling of the viewport.
    */
   private _dragScroll(): void {
@@ -705,9 +712,9 @@ export class SelectionService extends Disposable implements ISelectionService {
 
     this._removeMouseDownListeners();
 
-    if (this.selectionText.length <= 1 && timeElapsed < ALT_CLICK_MOVE_CURSOR_TIME && event.altKey && this._optionsService.rawOptions.altClickMovesCursor) {
+    if (this.selectionText.length <= 1 && timeElapsed < Constants.ALT_CLICK_MOVE_CURSOR_TIME && event.altKey && this._optionsService.rawOptions.altClickMovesCursor) {
       if (this._bufferService.buffer.ybase === this._bufferService.buffer.ydisp) {
-        const coordinates = this._mouseService.getCoords(
+        const coordinates = this._mouseCoordsService.getCoords(
           event,
           this._element,
           this._bufferService.cols,
@@ -1013,7 +1020,7 @@ export class SelectionService extends Disposable implements ISelectionService {
    * word logic.
    * @param cell The cell to check.
    */
-  private _isCharWordSeparator(cell: CellData): boolean {
+  private _isCharWordSeparator(cell: ICellData): boolean {
     // Zero width characters are never separators as they are always to the
     // right of wide characters
     if (cell.getWidth() === 0) {

package/src/browser/services/Services.ts

@@ -7,8 +7,8 @@ import { IRenderDimensions, IRenderer } from 'browser/renderer/shared/Types';
 import { IColorSet, ILink, ReadonlyColorSet } from 'browser/Types';
 import { ISelectionRedrawRequestEvent as ISelectionRequestRedrawEvent, ISelectionRequestScrollLinesEvent } from 'browser/selection/Types';
 import { createDecorator } from 'common/services/ServiceRegistry';
-import { AllColorIndex, IDisposable } from 'common/Types';
-import type { Event } from 'vs/base/common/event';
+import { AllColorIndex, IDisposable, IKeyboardResult } from 'common/Types';
+import type { IEvent } from 'common/Event';
 
 export const ICharSizeService = createDecorator<ICharSizeService>('CharSizeService');
 export interface ICharSizeService {
@@ -18,7 +18,7 @@ export interface ICharSizeService {
   readonly height: number;
   readonly hasValidSize: boolean;
 
-  readonly onCharSizeChange: Event<void>;
+  readonly onCharSizeChange: IEvent<void>;
 
   measure(): void;
 }
@@ -29,8 +29,8 @@ export interface ICoreBrowserService {
 
   readonly isFocused: boolean;
 
-  readonly onDprChange: Event<number>;
-  readonly onWindowChange: Event<Window & typeof globalThis>;
+  readonly onDprChange: IEvent<number>;
+  readonly onWindowChange: IEvent<Window & typeof globalThis>;
 
   /**
    * Gets or sets the parent window that the terminal is rendered into. DOM and rendering APIs (e.g.
@@ -49,35 +49,49 @@ export interface ICoreBrowserService {
   readonly dpr: number;
 }
 
-export const IMouseService = createDecorator<IMouseService>('MouseService');
-export interface IMouseService {
+export const IMouseCoordsService = createDecorator<IMouseCoordsService>('MouseCoordsService');
+export interface IMouseCoordsService {
   serviceBrand: undefined;
 
   getCoords(event: {clientX: number, clientY: number}, element: HTMLElement, colCount: number, rowCount: number, isSelection?: boolean): [number, number] | undefined;
   getMouseReportCoords(event: MouseEvent, element: HTMLElement): { col: number, row: number, x: number, y: number } | undefined;
 }
 
+export const IMouseService = createDecorator<IMouseService>('MouseService');
+export interface IMouseService {
+  serviceBrand: undefined;
+
+  bindMouse(target: IMouseServiceTarget, register: (disposable: IDisposable) => void, focus: () => void): void;
+  reset(): void;
+}
+export interface IMouseServiceTarget {
+  element: HTMLElement;
+  screenElement: HTMLElement;
+  document: Document;
+  handleTouchScroll?(amount: number): void;
+}
+
 export const IRenderService = createDecorator<IRenderService>('RenderService');
 export interface IRenderService extends IDisposable {
   serviceBrand: undefined;
 
-  onDimensionsChange: Event<IRenderDimensions>;
+  onDimensionsChange: IEvent<IRenderDimensions>;
   /**
    * Fires when buffer changes are rendered. This does not fire when only cursor
    * or selections are rendered.
    */
-  onRenderedViewportChange: Event<{ start: number, end: number }>;
+  onRenderedViewportChange: IEvent<{ start: number, end: number }>;
   /**
    * Fires on render
    */
-  onRender: Event<{ start: number, end: number }>;
-  onRefreshRequest: Event<{ start: number, end: number }>;
+  onRender: IEvent<{ start: number, end: number }>;
+  onRefreshRequest: IEvent<{ start: number, end: number }>;
 
   dimensions: IRenderDimensions;
 
   addRefreshCallback(callback: FrameRequestCallback): number;
 
-  refreshRows(start: number, end: number): void;
+  refreshRows(start: number, end: number, sync?: boolean): void;
   clearTextureAtlas(): void;
   resize(cols: number, rows: number): void;
   hasRenderer(): boolean;
@@ -101,10 +115,10 @@ export interface ISelectionService {
   readonly selectionStart: [number, number] | undefined;
   readonly selectionEnd: [number, number] | undefined;
 
-  readonly onLinuxMouseSelection: Event<string>;
-  readonly onRequestRedraw: Event<ISelectionRequestRedrawEvent>;
-  readonly onRequestScrollLines: Event<ISelectionRequestScrollLinesEvent>;
-  readonly onSelectionChange: Event<void>;
+  readonly onLinuxMouseSelection: IEvent<string>;
+  readonly onRequestRedraw: IEvent<ISelectionRequestRedrawEvent>;
+  readonly onRequestScrollLines: IEvent<ISelectionRequestScrollLinesEvent>;
+  readonly onSelectionChange: IEvent<void>;
 
   disable(): void;
   enable(): void;
@@ -136,7 +150,7 @@ export interface IThemeService {
 
   readonly colors: ReadonlyColorSet;
 
-  readonly onChangeColors: Event<ReadonlyColorSet>;
+  readonly onChangeColors: IEvent<ReadonlyColorSet>;
 
   restoreColor(slot?: AllColorIndex): void;
   /**
@@ -156,3 +170,12 @@ export interface ILinkProviderService extends IDisposable {
 export interface ILinkProvider {
   provideLinks(y: number, callback: (links: ILink[] | undefined) => void): void;
 }
+
+export const IKeyboardService = createDecorator<IKeyboardService>('KeyboardService');
+export interface IKeyboardService {
+  serviceBrand: undefined;
+  evaluateKeyDown(event: KeyboardEvent): IKeyboardResult;
+  evaluateKeyUp(event: KeyboardEvent): IKeyboardResult | undefined;
+  readonly useKitty: boolean;
+  readonly useWin32InputMode: boolean;
+}

package/src/browser/services/ThemeService.ts

@@ -7,10 +7,10 @@ import { ColorContrastCache } from 'browser/ColorContrastCache';
 import { IThemeService } from 'browser/services/Services';
 import { DEFAULT_ANSI_COLORS, IColorContrastCache, IColorSet, ReadonlyColorSet } from 'browser/Types';
 import { color, css, NULL_COLOR } from 'common/Color';
-import { Disposable } from 'vs/base/common/lifecycle';
+import { Disposable } from 'common/Lifecycle';
 import { IOptionsService, ITheme } from 'common/services/Services';
 import { AllColorIndex, IColor, SpecialColorIndex } from 'common/Types';
-import { Emitter } from 'vs/base/common/event';
+import { Emitter } from 'common/Event';
 
 interface IRestoreColorSet {
   foreground: IColor;

package/src/common/Async.ts

@@ -0,0 +1,141 @@
+/**
+ * Copyright (c) 2026 The xterm.js authors. All rights reserved.
+ * @license MIT
+ *
+ * Minimal async helpers for xterm.js core.
+ */
+
+import { DisposableStore, IDisposable, toDisposable } from 'common/Lifecycle';
+
+export function timeout(millis: number): Promise<void> {
+  return new Promise(resolve => setTimeout(resolve, millis));
+}
+
+/**
+ * Creates a timeout that can be disposed using its returned value.
+ * @param handler The timeout handler.
+ * @param timeout An optional timeout in milliseconds.
+ * @param store An optional {@link DisposableStore} that will have the timeout disposable managed
+ * automatically.
+ */
+export function disposableTimeout(handler: () => void, timeout = 0, store?: DisposableStore): IDisposable {
+  const timer = setTimeout(() => {
+    handler();
+    if (store) {
+      disposable.dispose();
+    }
+  }, timeout);
+  const disposable = toDisposable(() => {
+    clearTimeout(timer);
+  });
+  store?.add(disposable);
+  return disposable;
+}
+
+export class TimeoutTimer implements IDisposable {
+  private _token: any = -1;
+  private _isDisposed = false;
+
+  public dispose(): void {
+    this.cancel();
+    this._isDisposed = true;
+  }
+
+  public cancel(): void {
+    if (this._token !== -1) {
+      clearTimeout(this._token);
+      this._token = -1;
+    }
+  }
+
+  public cancelAndSet(runner: () => void, timeout: number): void {
+    if (this._isDisposed) {
+      throw new Error('Calling cancelAndSet on a disposed TimeoutTimer');
+    }
+    this.cancel();
+    this._token = setTimeout(() => {
+      this._token = -1;
+      runner();
+    }, timeout);
+  }
+
+  public setIfNotSet(runner: () => void, timeout: number): void {
+    if (this._isDisposed) {
+      throw new Error('Calling setIfNotSet on a disposed TimeoutTimer');
+    }
+    if (this._token !== -1) {
+      return;
+    }
+    this._token = setTimeout(() => {
+      this._token = -1;
+      runner();
+    }, timeout);
+  }
+}
+
+/**
+ * Schedules a single runner on the microtask queue. Unlike {@link TimeoutTimer}, a scheduled
+ * microtask cannot be unqueued; {@link cancel} prevents the runner from executing if it has not
+ * run yet.
+ */
+export class MicrotaskTimer implements IDisposable {
+  private _isScheduled = false;
+  private _isDisposed = false;
+
+  public dispose(): void {
+    this.cancel();
+    this._isDisposed = true;
+  }
+
+  public cancel(): void {
+    this._isScheduled = false;
+  }
+
+  public set(runner: () => void): void {
+    if (this._isDisposed) {
+      throw new Error('Calling set on a disposed MicrotaskTimer');
+    }
+    if (this._isScheduled) {
+      return;
+    }
+    this._isScheduled = true;
+    queueMicrotask(() => {
+      if (!this._isScheduled) {
+        return;
+      }
+      this._isScheduled = false;
+      runner();
+    });
+  }
+}
+
+export class IntervalTimer implements IDisposable {
+  private _disposable: IDisposable | undefined;
+  private _isDisposed = false;
+
+  public cancel(): void {
+    this._disposable?.dispose();
+    this._disposable = undefined;
+  }
+
+  public cancelAndSet(runner: () => void, interval: number, context: Window | typeof globalThis = globalThis): void {
+    if (this._isDisposed) {
+      throw new Error('Calling cancelAndSet on a disposed IntervalTimer');
+    }
+    this.cancel();
+    const handle = context.setInterval(() => {
+      runner();
+    }, interval);
+    this._disposable = {
+      dispose: () => {
+        context.clearInterval(handle as any);
+        this._disposable = undefined;
+      }
+    };
+  }
+
+  public dispose(): void {
+    this.cancel();
+    this._isDisposed = true;
+  }
+}

package/src/common/CircularList.ts

@@ -4,8 +4,8 @@
  */
 
 import { ICircularList } from 'common/Types';
-import { Disposable } from 'vs/base/common/lifecycle';
-import { Emitter } from 'vs/base/common/event';
+import { Disposable } from 'common/Lifecycle';
+import { Emitter } from 'common/Event';
 
 export interface IInsertEvent {
   index: number;

package/src/common/Color.ts

@@ -184,6 +184,14 @@ export namespace css {
       return channels.toColor($r, $g, $b, $a);
     }
 
+    // Handle the "transparent" keyword
+    if (css === 'transparent') {
+      return {
+        css: 'transparent',
+        rgba: 0x00000000
+      };
+    }
+
     // Validate the context is available for canvas-based color parsing
     if (!$ctx || !$litmusColor) {
       throw new Error('css.toColor: Unsupported css format');