Use src/ imports in addons; bundle test output via esbuild

Addons no longer import from out/ or out-esbuild in source. TypeScript
and editors resolve ../../../src/common|browser directly. Addon unit test
artifacts bundle those dependencies from source (platform node, npm
packages external).

Reverts preserveConstEnums; const enums are handled in bundled output.

Co-authored-by: Daniel Imms <Tyriar@users.noreply.github.com>

.agents/skills/benchmark/SKILL.md

@@ -1,7 +1,11 @@
 ---
-applyTo: '**/*.benchmark.ts'
+name: benchmark
+description: Run and author benchmark tests in xterm.js. Use when editing benchmark files, working in `*.benchmark.ts`, or when asked how to run the full benchmark suite, a single benchmark file, or a single benchmark case.
 ---
-# Benchmark run instructions
+
+# Benchmark Run Instructions
+
+## Running Benchmarks
 
 - Full suite: `npm run benchmark`
 - Single benchmark file:
@@ -11,8 +15,14 @@ applyTo: '**/*.benchmark.ts'
   - Use `-t` to get the path, then:
   - `npm run benchmark -- -s "<path>" out-test/benchmark/Event.benchmark.js`
 
-When writing instructions, use `RuntimeCase` to measure pure runtime in ms, use `ThroughputRuntimeCase` when measuring throughput in MB/s.
+## Benchmark Case Selection
+
+When writing benchmark instructions:
+
+- Use `RuntimeCase` to measure pure runtime in ms.
+- Use `ThroughputRuntimeCase` when measuring throughput in MB/s.
+
+## Notes
 
-Notes:
 - Benchmarks run from built JS in `out-test/benchmark/*.benchmark.js`.
 - Keep `NODE_PATH=./out` (handled by the npm script).

.agents/skills/unit-test/SKILL.md

@@ -1,7 +1,11 @@
 ---
-applyTo: '**/*.test.ts'
+name: unit-test
+description: Write and review xterm.js unit tests with project conventions. Use when editing `*.test.ts` files or when asked for test authoring guidelines.
 ---
-When writing unit tests follow these rules:
+
+# Unit Test Instructions
+
+When writing unit tests, follow these rules:
 
 - When writing unit tests for addons, always create a real xterm.js instance instead of mocking it.
 - Prefer `assert.ok` over `assert.notStrictEqual` when checking something is undefined or not.

.github/hooks/setupRepo.json

@@ -1,10 +0,0 @@
-{
-	"hooks": {
-		"SessionStart": [
-			{
-				"type": "command",
-				"command": "npm run agent:setup-repo"
-			}
-		]
-	}
-}

.github/workflows/ci.yml

@@ -207,31 +207,31 @@ jobs:
     - name: Build demo server
       run: npm run esbuild-demo-server
     - name: Integration tests (core) # Tests use 50% workers to reduce flakiness
-      run: npm run test-integration-${{ matrix.browser }} --workers=50% --forbid-only --suite=core
+      run: npm run test-integration-${{ matrix.browser }} -- --workers=50% --forbid-only --suite=core
     - name: Integration tests (addon-attach)
-      run: npm run test-integration-${{ matrix.browser }} --workers=50% --forbid-only --suite=addon-attach
+      run: npm run test-integration-${{ matrix.browser }} -- --workers=50% --forbid-only --suite=addon-attach
     - name: Integration tests (addon-clipboard)
-      run: npm run test-integration-${{ matrix.browser }} --workers=50% --forbid-only --suite=addon-clipboard
+      run: npm run test-integration-${{ matrix.browser }} -- --workers=50% --forbid-only --suite=addon-clipboard
     - name: Integration tests (addon-fit)
-      run: npm run test-integration-${{ matrix.browser }} --workers=50% --forbid-only --suite=addon-fit
+      run: npm run test-integration-${{ matrix.browser }} -- --workers=50% --forbid-only --suite=addon-fit
     - name: Integration tests (addon-image)
-      run: npm run test-integration-${{ matrix.browser }} --workers=50% --forbid-only --suite=addon-image
+      run: npm run test-integration-${{ matrix.browser }} -- --workers=50% --forbid-only --suite=addon-image
     - name: Integration tests (addon-progress)
-      run: npm run test-integration-${{ matrix.browser }} --workers=50% --forbid-only --suite=addon-progress
+      run: npm run test-integration-${{ matrix.browser }} -- --workers=50% --forbid-only --suite=addon-progress
     - name: Integration tests (addon-search)
-      run: npm run test-integration-${{ matrix.browser }} --workers=50% --forbid-only --suite=addon-search
+      run: npm run test-integration-${{ matrix.browser }} -- --workers=50% --forbid-only --suite=addon-search
     - name: Integration tests (addon-serialize)
-      run: npm run test-integration-${{ matrix.browser }} --workers=50% --forbid-only --suite=addon-serialize
+      run: npm run test-integration-${{ matrix.browser }} -- --workers=50% --forbid-only --suite=addon-serialize
     - name: Integration tests (addon-unicode-graphemes)
-      run: npm run test-integration-${{ matrix.browser }} --workers=50% --forbid-only --suite=addon-unicode-graphemes
+      run: npm run test-integration-${{ matrix.browser }} -- --workers=50% --forbid-only --suite=addon-unicode-graphemes
     - name: Integration tests (addon-unicode11)
-      run: npm run test-integration-${{ matrix.browser }} --workers=50% --forbid-only --suite=addon-unicode11
+      run: npm run test-integration-${{ matrix.browser }} -- --workers=50% --forbid-only --suite=addon-unicode11
     - name: Integration tests (addon-web-fonts)
-      run: npm run test-integration-${{ matrix.browser }} --workers=50% --forbid-only --suite=addon-web-fonts
+      run: npm run test-integration-${{ matrix.browser }} -- --workers=50% --forbid-only --suite=addon-web-fonts
     - name: Integration tests (addon-web-links)
-      run: npm run test-integration-${{ matrix.browser }} --workers=50% --forbid-only --suite=addon-web-links
+      run: npm run test-integration-${{ matrix.browser }} -- --workers=50% --forbid-only --suite=addon-web-links
     - name: Integration tests (addon-webgl)
-      run: npm run test-integration-${{ matrix.browser }} --workers=50% --forbid-only --suite=addon-webgl
+      run: npm run test-integration-${{ matrix.browser }} -- --workers=50% --forbid-only --suite=addon-webgl
 
   release-dry-run:
     needs: build

.gitignore

@@ -22,6 +22,10 @@ build/
 yarn.lock
 test-results/
 
+# Tracing/debug files
+.cursor/nal-trace/
+.cursor/*.log
+
 # Keep bundled code out of Git
 dist/
 demo/dist/

AGENTS.md

@@ -57,6 +57,13 @@ export class MyAddon implements ITerminalAddon {
 - Proposed APIs require `allowProposedApi: true` option
 - Constructor-only options (cols, rows) cannot be changed after instantiation
 
+**Disposable Management**:
+- When a disposable object can be replaced over time, prefer a registered `MutableDisposable` over manual dispose/reassign logic.
+- Register it on the owning class (for example, `this._register(new MutableDisposable())`) and assign through `.value`; this automatically disposes the previous value and avoids accidentally leaking resources.
+
+**TypeScript Constants**:
+- Prefer `const enum` over top-level `const` declarations for primitive constants when appropriate, since values are inlined and avoid runtime property lookups.
+
 **Testing Utilities**: Use `TestUtils.ts` helpers:
 - `openTerminal(ctx, options)` for setup
 - `pollFor(page, fn, expectedValue)` for async assertions

README.md

@@ -24,7 +24,36 @@ First, you need to install the module. We ship exclusively through [npm](https:/
 npm install --save @xterm/xterm
 ```
 
-To start using xterm.js on your browser, add the `xterm.js` and `xterm.css` to the head of your HTML page. Then create a `<div id="terminal"></div>` onto which xterm can attach itself. Finally, instantiate the `Terminal` object and then call the `open` function with the DOM object of the `div`.
+The recommended way to load xterm.js with the ES module syntax, either using TypeScript or a modern JS tooling. Note that both CommonJS and ES module files are shipped with the npm package.
+
+```javascript
+import { Terminal } from '@xterm/xterm';
+```
+
+Then instantiate a `Terminal` object, open it on an element and write to it:
+
+```javascript
+const term = new Terminal();
+term.open(document.getElementById('terminal'));
+term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')
+```
+
+Most use cases will hook up input and output to a pseudoterminal API such as [node-pty](https://www.npmjs.com/package/node-pty) which will drive the terminal.
+
+```javascript
+pty.onData(data => term.write(data));
+term.onData(data => pty.write(data));
+```
+
+Then make sure to also include the `css/xterm.css` file, for example in HTML:
+
+```html
+<link rel="stylesheet" href="node_modules/@xterm/xterm/css/xterm.css" />
+```
+
+### Standalone example
+
+Here is a complete standalone example in a HTML file:
 
 ```html
 <!doctype html>
@@ -36,7 +65,7 @@ To start using xterm.js on your browser, add the `xterm.js` and `xterm.css` to t
     <body>
       <div id="terminal"></div>
       <script>
-        var term = new Terminal();
+        const term = new Terminal();
         term.open(document.getElementById('terminal'));
         term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')
       </script>
@@ -44,14 +73,6 @@ To start using xterm.js on your browser, add the `xterm.js` and `xterm.css` to t
   </html>
 ```
 
-### Importing
-
-The recommended way to load xterm.js is via the ES6 module syntax:
-
-```javascript
-import { Terminal } from '@xterm/xterm';
-```
-
 ### Addons
 
 Addons are separate modules that extend the `Terminal` by building on the [xterm.js API](https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts). To use an addon, you first need to install it in your project:
@@ -94,7 +115,7 @@ Since xterm.js is typically implemented as a developer tool, generally only mode
 
 ### Node.js Support
 
-We also publish [`xterm-headless`](https://www.npmjs.com/package/xterm-headless) which is a stripped down version of xterm.js that runs headless in Node.js. An example use case for this is to keep track of a terminal's state where the process is running and using the [serialize addon](https://www.npmjs.com/package/@xterm/addon-serialize) so it can get all state restored upon reconnection.
+We also publish [`@xterm/headless`](https://www.npmjs.com/package/@xterm/headless) which is a stripped down version of xterm.js that runs headless in Node.js. An example use case for this is to keep track of a terminal's state where the process is running and using the [serialize addon](https://www.npmjs.com/package/@xterm/addon-serialize) so it can get all state restored upon reconnection.
 
 ## API
 
@@ -229,6 +250,10 @@ Xterm.js is used in many world-class applications to provide great terminal expe
 - [**ecmaOS**](https://ecmaos.sh): A kernel and suite of applications tying modern web technologies into a browser-based operating system.
 - [**LabEx**](https://labex.io): Interactive learning platform with hands-on labs and xterm.js-based online terminals, focused on learn-by-doing approach.
 - [**EmuDevz**](https://afska.github.io/emudevz): A free coding game where players learn how to build an emulator from scratch.
+- [**SSH Connection Manager**](https://github.com/Amtrend/ssh-manager): Modern web-based SSH terminal and SFTP manager with AES-256 encryption, PWA support, and session management.
+- [**WooTTY**](https://github.com/icoretech/wootty): Flawless browser terminal for real operators.
+- [**Orca**](https://github.com/stablyai/orca): Agentic development environment for 100x builders.
+- [**4bit**](https://ciembor.github.io/4bit): Terminal Color Scheme Designer.
 - [And much more...](https://github.com/xtermjs/xterm.js/network/dependents?package_id=UGFja2FnZS0xNjYzMjc4OQ%3D%3D)
 
 Do you use xterm.js in your application as well? Please [open a Pull Request](https://github.com/sourcelair/xterm.js/pulls) to include it here. We would love to have it on our list. Please add any new contributions to the end of the list.

addons/addon-attach/src/tsconfig.json

@@ -13,15 +13,11 @@
     "strict": true,
     "types": [
       "../../../node_modules/@types/mocha"
-    ],
-    "paths": {
-      "@xterm/addon-attach": [
-        "../typings/addon-attach.d.ts"
-      ]
-    }
+    ]
   },
   "include": [
     "./**/*",
-    "../../../typings/xterm.d.ts"
+    "../../../typings/xterm.d.ts",
+    "../typings/addon-attach.d.ts"
   ]
 }

addons/addon-attach/test/tsconfig.json

@@ -3,23 +3,12 @@
     "module": "commonjs",
     "target": "ESNext",
     "lib": [
-      "es2021",
+      "es2021"
     ],
     "rootDir": ".",
     "outDir": "../out-test",
     "sourceMap": true,
     "removeComments": true,
-    "paths": {
-      "common/*": [
-        "../../../src/common/*"
-      ],
-      "browser/*": [
-        "../../../src/browser/*"
-      ],
-      "*": [
-        "./*"
-      ]
-    },
     "strict": true,
     "types": [
       "../../../node_modules/@types/node"

addons/addon-attach/tsconfig.json

@@ -2,7 +2,11 @@
   "files": [],
   "include": [],
   "references": [
-    { "path": "./src" },
-    { "path": "./test" }
+    {
+      "path": "./src"
+    },
+    {
+      "path": "./test"
+    }
   ]
 }

addons/addon-clipboard/package.json

@@ -21,8 +21,5 @@
     "package": "../../node_modules/.bin/webpack",
     "prepublishOnly": "npm run package",
     "start": "node ../../demo/start"
-  },
-  "dependencies": {
-    "js-base64": "^3.7.5"
   }
 }

addons/addon-clipboard/src/ClipboardAddon.ts

@@ -4,8 +4,7 @@
  */
 
 import type { IDisposable, ITerminalAddon, Terminal } from '@xterm/xterm';
-import { type IClipboardProvider, ClipboardSelectionType, type IBase64 } from '@xterm/addon-clipboard';
-import { Base64 as JSBase64 } from 'js-base64';
+import { type IClipboardProvider, type IBase64 } from '@xterm/addon-clipboard';
 
 export class ClipboardAddon implements ITerminalAddon {
   private _terminal?: Terminal;
@@ -25,7 +24,7 @@ export class ClipboardAddon implements ITerminalAddon {
     return this._disposable?.dispose();
   }
 
-  private _readText(sel: ClipboardSelectionType, data: string): void {
+  private _readText(sel: string, data: string): void {
     const b64 = this._base64.encodeText(data);
     this._terminal?.input(`\x1b]52;${sel};${b64}\x07`, false);
   }
@@ -36,7 +35,7 @@ export class ClipboardAddon implements ITerminalAddon {
       return true;
     }
 
-    const pc = args[0] as ClipboardSelectionType;
+    const pc = args[0];
     const pd = args[1];
     if (pd === '?') {
       const text = this._provider.readText(pc);
@@ -70,30 +69,23 @@ export class ClipboardAddon implements ITerminalAddon {
 }
 
 export class BrowserClipboardProvider implements IClipboardProvider {
-  public async readText(selection: ClipboardSelectionType): Promise<string> {
-    if (selection !== 'c') {
-      return Promise.resolve('');
-    }
+  public readText(selection: string): Promise<string> {
     return navigator.clipboard.readText();
   }
 
-  public async writeText(selection: ClipboardSelectionType, text: string): Promise<void> {
-    if (selection !== 'c') {
-      return Promise.resolve();
-    }
+  public writeText(selection: string, text: string): Promise<void> {
     return navigator.clipboard.writeText(text);
   }
 }
 
 export class Base64 implements IBase64 {
   public encodeText(data: string): string {
-    return JSBase64.encode(data);
+    return btoa(data);
   }
   public decodeText(data: string): string {
-    const text = JSBase64.decode(data);
-    if (!JSBase64.isValid(data) || JSBase64.encode(text) !== data) {
-      return '';
-    }
-    return text;
+    try {
+      return atob(data);
+    } catch {}
+    return '';
   }
 }

addons/addon-clipboard/src/tsconfig.json

@@ -13,19 +13,12 @@
     "strict": true,
     "types": [
       "../../../node_modules/@types/mocha"
-    ],
-    "paths": {
-      "browser/*": [
-        "../../../src/browser/*"
-      ],
-      "@xterm/addon-clipboard": [
-        "../typings/addon-clipboard.d.ts"
-      ]
-    }
+    ]
   },
   "include": [
     "./**/*",
-    "../../../typings/xterm.d.ts"
+    "../../../typings/xterm.d.ts",
+    "../typings/addon-clipboard.d.ts"
   ],
   "references": [
     {

addons/addon-clipboard/test/ClipboardAddon.test.ts

@@ -20,7 +20,7 @@ test.describe('ClipboardAddon', () => {
 
   test.beforeEach(async ({}, testInfo) => {
     // DEBT: This test doesn't work since the migration to @playwright/test
-    if (ctx.browser.browserType().name() !== 'chromium') {
+    if (ctx.browser.browserType().name() === 'webkit') {
       testInfo.skip();
       return;
     }
@@ -48,6 +48,14 @@ test.describe('ClipboardAddon', () => {
       await ctx.proxy.write(`\x1b]52;c;${testDataEncoded}\x07`);
       deepEqual(await ctx.page.evaluate(() => window.navigator.clipboard.readText()), testDataDecoded);
     });
+    test('primary selection', async () => {
+      await ctx.proxy.write(`\x1b]52;p;${testDataEncoded}\x07`);
+      deepEqual(await ctx.page.evaluate(() => window.navigator.clipboard.readText()), testDataDecoded);
+    });
+    test('empty selection (default)', async () => {
+      await ctx.proxy.write(`\x1b]52;;${testDataEncoded}\x07`);
+      deepEqual(await ctx.page.evaluate(() => window.navigator.clipboard.readText()), testDataDecoded);
+    });
     test('invalid base64 string', async () => {
       await ctx.proxy.write(`\x1b]52;c;${testDataEncoded}invalid\x07`);
       deepEqual(await ctx.page.evaluate(() => window.navigator.clipboard.readText()), '');
@@ -60,15 +68,24 @@ test.describe('ClipboardAddon', () => {
   });
 
   test.describe('read data', async function (): Promise<any> {
-    test('simple string', async () => {
+    test.beforeAll(async () => {
       await ctx.page.evaluate(`
         window.data = [];
         window.term.onData(e => data.push(e));
       `);
+    });
+    test('simple string', async () => {
+      await ctx.page.evaluate('window.data.length = 0;');
       await ctx.page.evaluate(() => window.navigator.clipboard.writeText('hello world'));
       await ctx.proxy.write(`\x1b]52;c;?\x07`);
       deepEqual(await ctx.page.evaluate('window.data'), [`\x1b]52;c;${testDataEncoded}\x07`]);
     });
+    test('primary selection', async () => {
+      await ctx.page.evaluate('window.data.length = 0;');
+      await ctx.page.evaluate(() => window.navigator.clipboard.writeText('hello world'));
+      await ctx.proxy.write(`\x1b]52;p;?\x07`);
+      deepEqual(await ctx.page.evaluate('window.data'), [`\x1b]52;p;${testDataEncoded}\x07`]);
+    });
     test('clear clipboard', async () => {
       await ctx.proxy.write(`\x1b]52;c;!\x07`);
       await ctx.proxy.write(`\x1b]52;c;?\x07`);

addons/addon-clipboard/test/tsconfig.json

@@ -3,23 +3,12 @@
     "module": "commonjs",
     "target": "ESNext",
     "lib": [
-      "es2021",
+      "es2021"
     ],
     "rootDir": ".",
     "outDir": "../out-test",
     "sourceMap": true,
     "removeComments": true,
-    "paths": {
-      "common/*": [
-        "../../../src/common/*"
-      ],
-      "browser/*": [
-        "../../../src/browser/*"
-      ],
-      "*": [
-        "./*"
-      ]
-    },
     "strict": true,
     "types": [
       "../../../node_modules/@types/node"

addons/addon-clipboard/tsconfig.json

@@ -2,7 +2,11 @@
   "files": [],
   "include": [],
   "references": [
-    { "path": "./src" },
-    { "path": "./test" }
+    {
+      "path": "./src"
+    },
+    {
+      "path": "./test"
+    }
   ]
 }

addons/addon-clipboard/typings/addon-clipboard.d.ts

@@ -30,18 +30,6 @@ declare module '@xterm/addon-clipboard' {
     public dispose(): void
   }
 
-  /**
-   * Clipboard selection type. This is used to specify which selection buffer to
-   * read or write to.
-   * - SYSTEM `c`: The system clipboard.
-   * - PRIMARY `p`: The primary clipboard. This is provided for compatibility
-   *  with Linux X11.
-   */
-  export const enum ClipboardSelectionType {
-    SYSTEM = 'c',
-    PRIMARY = 'p',
-  }
-
   export interface IBase64 {
     /**
     * Converts a utf-8 string to a base64 string.
@@ -78,36 +66,39 @@ declare module '@xterm/addon-clipboard' {
   export interface IClipboardProvider {
     /**
      * Gets the clipboard content.
-     * @param selection The clipboard selection to read.
+     * @param selection The clipboard selection to read (see OSC 52 spec of xterm).
      * @returns A promise that resolves with clipboard selection data.
      */
-    readText(selection: ClipboardSelectionType): string | Promise<string>;
+    readText(selection: string): string | Promise<string>;
 
     /**
      * Sets the clipboard content.
-     * @param selection The clipboard selection to set.
+     * @param selection The clipboard selection to set (see OSC 52 spec of xterm).
      * @param data The clipboard text to write.
      */
-    writeText(selection: ClipboardSelectionType, text: string): void | Promise<void>;
+    writeText(selection: string, text: string): void | Promise<void>;
   }
 
   /**
-   * The clipboard provider interface that enables xterm.js to access the system clipboard.
+   * The clipboard provider interface that enables xterm.js to access the browser clipboard.
+   *
+   * Note this this clipboard provider does not implement own cut buffers as xterm does,
+   * but redirect the selection parameter always to navigator.clipboard.
    */
   export class BrowserClipboardProvider implements IClipboardProvider{
     /**
      * Reads text from the clipboard.
-     * @param selection The selection type to read from.
+     * @param selection The selection type to read from (always refers to navigator.clipboard).
      * @returns A promise that resolves with the text from the clipboard.
      */
-    public readText(selection: ClipboardSelectionType): Promise<string>;
+    public readText(selection: string): Promise<string>;
 
     /**
      * Writes text to the clipboard.
-     * @param selection The selection type to write to.
+     * @param selection The selection type to write to (always refers to navigator.clipboard).
      * @param data The text to write to the clipboard.
      * @returns A promise that resolves when the text has been written to the clipboard.
      */
-    public writeText(selection: ClipboardSelectionType, data: string): Promise<void>;
+    public writeText(selection: string, data: string): Promise<void>;
   }
 }

addons/addon-fit/src/FitAddon.ts

@@ -5,7 +5,7 @@
 
 import type { Terminal, ITerminalAddon, IRenderDimensions } from '@xterm/xterm';
 import type { FitAddon as IFitApi } from '@xterm/addon-fit';
-import { ViewportConstants } from 'browser/shared/Constants';
+import { ViewportConstants } from '../../../src/browser/shared/Constants';
 
 interface ITerminalDimensions {
   /**
@@ -19,8 +19,10 @@ interface ITerminalDimensions {
   cols: number;
 }
 
-const MINIMUM_COLS = 2;
-const MINIMUM_ROWS = 1;
+const enum Constants {
+  MINIMUM_COLS = 2,
+  MINIMUM_ROWS = 1
+}
 
 function getWindow(e: Node): Window {
   if (e?.ownerDocument?.defaultView) {
@@ -48,10 +50,7 @@ export class FitAddon implements ITerminalAddon, IFitApi {
       return;
     }
 
-    // Force a full render
-    if (this._terminal.rows !== dims.rows || this._terminal.cols !== dims.cols) {
-      this._terminal.resize(dims.cols, dims.rows);
-    }
+    this._terminal.resize(dims.cols, dims.rows);
   }
 
   public proposeDimensions(): ITerminalDimensions | undefined {
@@ -89,8 +88,8 @@ export class FitAddon implements ITerminalAddon, IFitApi {
     const availableHeight = parentElementHeight - elementPaddingVer;
     const availableWidth = parentElementWidth - elementPaddingHor - scrollbarWidth;
     const geometry = {
-      cols: Math.max(MINIMUM_COLS, Math.floor(availableWidth / dims.css.cell.width)),
-      rows: Math.max(MINIMUM_ROWS, Math.floor(availableHeight / dims.css.cell.height))
+      cols: Math.max(Constants.MINIMUM_COLS, Math.floor(availableWidth / dims.css.cell.width)),
+      rows: Math.max(Constants.MINIMUM_ROWS, Math.floor(availableHeight / dims.css.cell.height))
     };
     return geometry;
   }

addons/addon-fit/src/tsconfig.json

@@ -13,19 +13,12 @@
     "strict": true,
     "types": [
       "../../../node_modules/@types/mocha"
-    ],
-    "paths": {
-      "browser/*": [
-        "../../../src/browser/*"
-      ],
-      "@xterm/addon-fit": [
-        "../typings/addon-fit.d.ts"
-      ]
-    }
+    ]
   },
   "include": [
     "./**/*",
-    "../../../typings/xterm.d.ts"
+    "../../../typings/xterm.d.ts",
+    "../typings/addon-fit.d.ts"
   ],
   "references": [
     {

addons/addon-fit/test/FitAddon.test.ts

@@ -119,6 +119,17 @@ test.describe('FitAddon', () => {
       strictEqual(await ctx.proxy.cols, 2);
       strictEqual(await ctx.proxy.rows, 1);
     });
+
+    test('same dimensions', async function(): Promise<any> {
+      await setDimensions();
+      await ctx.page.evaluate(`window.fit.fit()`);
+      const cols: number = await ctx.proxy.cols;
+      const rows: number = await ctx.proxy.rows;
+      // Calling fit() again at the same container size should not throw
+      await ctx.page.evaluate(`window.fit.fit()`);
+      strictEqual(await ctx.proxy.cols, cols);
+      strictEqual(await ctx.proxy.rows, rows);
+    });
   });
 });
 

addons/addon-fit/test/tsconfig.json

@@ -3,23 +3,12 @@
     "module": "commonjs",
     "target": "ESNext",
     "lib": [
-      "es2021",
+      "es2021"
     ],
     "rootDir": ".",
     "outDir": "../out-test",
     "sourceMap": true,
     "removeComments": true,
-    "paths": {
-      "common/*": [
-        "../../../src/common/*"
-      ],
-      "browser/*": [
-        "../../../src/browser/*"
-      ],
-      "*": [
-        "./*"
-      ]
-    },
     "strict": true,
     "types": [
       "../../../node_modules/@types/node"

addons/addon-fit/tsconfig.json

@@ -2,7 +2,11 @@
   "files": [],
   "include": [],
   "references": [
-    { "path": "./src" },
-    { "path": "./test" }
+    {
+      "path": "./src"
+    },
+    {
+      "path": "./test"
+    }
   ]
 }

addons/addon-image/README.md

@@ -25,14 +25,14 @@ const customSettings: IImageAddonOptions = {
   pixelLimit: 16777216,       // max. pixel size of a single image
   sixelSupport: true,         // enable sixel support
   sixelScrolling: true,       // whether to scroll on image output
-  sixelPaletteLimit: 256,     // initial sixel palette size
-  sixelSizeLimit: 25000000,   // size limit of a single sixel sequence
+  sixelPaletteLimit: 4096,    // initial sixel palette size
+  sixelSizeLimit: 33554432,   // size limit of a single sixel sequence
   storageLimit: 128,          // FIFO storage limit in MB
   showPlaceholder: true,      // whether to show a placeholder for evicted images
   iipSupport: true,           // enable iTerm IIP support
-  iipSizeLimit: 20000000,     // size limit of a single IIP sequence
+  iipSizeLimit: 33554432,     // size limit of a single IIP sequence
   kittySupport: true,         // enable Kitty graphics support
-  kittySizeLimit: 20000000    // size limit of a single Kitty sequence
+  kittySizeLimit: 33554432    // size limit of a single Kitty sequence
 }
 
 // initialization

addons/addon-image/package.json

@@ -25,6 +25,6 @@
   },
   "devDependencies": {
     "sixel": "^0.16.0",
-    "xterm-wasm-parts": "^0.3.0"
+    "xterm-wasm-parts": "^0.4.1"
   }
 }

addons/addon-image/src/IIPHandler.ts

@@ -7,6 +7,7 @@ import { ImageRenderer } from './ImageRenderer';
 import { IIPImageStorage } from './IIPImageStorage';
 import { CELL_SIZE_DEFAULT } from './ImageStorage';
 import Base64Decoder from 'xterm-wasm-parts/lib/base64/Base64Decoder.wasm';
+import QoiDecoder from 'xterm-wasm-parts/lib/qoi/QoiDecoder.wasm';
 import { HeaderParser, IHeaderFields, HeaderState } from './IIPHeaderParser';
 import { imageType, UNSUPPORTED_TYPE } from './IIPMetrics';
 
@@ -36,6 +37,7 @@ export class IIPHandler implements IOscHandler, IResetHandler {
   private _hp = new HeaderParser();
   private _header: IHeaderFields = DEFAULT_HEADER;
   private _dec: Base64Decoder;
+  private _qoiDec: QoiDecoder;
   private _metrics = UNSUPPORTED_TYPE;
 
   constructor(
@@ -47,6 +49,7 @@ export class IIPHandler implements IOscHandler, IResetHandler {
     const maxEncodedBytes = Math.ceil(this._opts.iipSizeLimit * 4 / 3);
     const initialBytes = Math.min(DecoderConst.INITIAL_DATA, maxEncodedBytes);
     this._dec = new Base64Decoder(DecoderConst.KEEP_DATA, maxEncodedBytes, initialBytes);
+    this._qoiDec = new QoiDecoder(DecoderConst.KEEP_DATA);
   }
 
   public reset(): void {}
@@ -115,27 +118,27 @@ export class IIPHandler implements IOscHandler, IResetHandler {
       return true;
     }
 
-    // HACK: The types on Blob are too restrictive, this is a Uint8Array so the browser accepts it
-    const blob = new Blob([this._dec.data8 as Uint8Array<ArrayBuffer>], { type: this._metrics.mime });
-    this._dec.release();
-
-    if (!window.createImageBitmap) {
-      const url = URL.createObjectURL(blob);
-      const img = new Image();
-      return new Promise<boolean>(r => {
-        img.addEventListener('load', () => {
-          URL.revokeObjectURL(url);
-          const canvas = ImageRenderer.createCanvas(window.document, w, h);
-          canvas.getContext('2d')?.drawImage(img, 0, 0, w, h);
-          this._storage.addImage(canvas);
-          r(true);
-        });
-        img.src = url;
-        // sanity measure to avoid terminal blocking from dangling promise
-        // happens from corrupt data (onload never gets fired)
-        setTimeout(() => r(true), 1000);
-      });
+    let blob: Blob | ImageData;
+    if (this._metrics.mime === 'image/qoi') {
+      const data = this._qoiDec.decode(this._dec.data8);
+      blob = new ImageData(
+        new Uint8ClampedArray(data.buffer, data.byteOffset, data.byteLength),
+        this._qoiDec.width,
+        this._qoiDec.height
+      );
+      this._qoiDec.release();
+      if (w === this._qoiDec.width && h === this._qoiDec.height) {
+        // use fast-path if we don't need to rescale
+        this._dec.release();
+        const canvas = ImageRenderer.createCanvas(undefined, this._qoiDec.width, this._qoiDec.height);
+        canvas.getContext('2d')?.putImageData(blob, 0, 0);
+        this._storage.addImage(canvas);
+        return true;
+      }
+    } else {
+      blob = new Blob([this._dec.data8], { type: this._metrics.mime });
     }
+    this._dec.release();
     return createImageBitmap(blob, { resizeWidth: w, resizeHeight: h })
       .then(bm => {
         this._storage.addImage(bm);

addons/addon-image/src/IIPMetrics.ts

@@ -4,7 +4,7 @@
  */
 
 
-export type ImageType = 'image/png' | 'image/jpeg' | 'image/gif' | 'unsupported' | '';
+export type ImageType = 'image/png' | 'image/jpeg' | 'image/gif' | 'image/qoi' | 'unsupported' | '';
 
 export interface IMetrics {
   mime: ImageType;
@@ -45,6 +45,14 @@ export function imageType(d: Uint8Array): IMetrics {
       height: d[9] << 8 | d[8]
     };
   }
+  // QOI: qoif
+  if (d32[0] === 0x66696F71) {
+    return {
+      mime: 'image/qoi',
+      width: d[4] << 24 | d[5] << 16 | d[6] << 8 | d[7],
+      height: d[8] << 24 | d[9] << 16 | d[10] << 8 | d[11]
+    };
+  }
   return UNSUPPORTED_TYPE;
 }
 

addons/addon-image/src/ImageAddon.ts

@@ -5,6 +5,7 @@
 
 import type { ITerminalAddon, IDisposable } from '@xterm/xterm';
 import type { ImageAddon as IImageApi } from '@xterm/addon-image';
+import { Emitter, type IEvent } from '../../../src/common/Event';
 import { IIPHandler } from './IIPHandler';
 import { ImageRenderer } from './ImageRenderer';
 import { ImageStorage, CELL_SIZE_DEFAULT } from './ImageStorage';
@@ -15,20 +16,61 @@ import { SixelImageStorage } from './SixelImageStorage';
 import { IIPImageStorage } from './IIPImageStorage';
 import { ITerminalExt, IImageAddonOptions, IResetHandler } from './Types';
 
+
+/**
+ * Document VT features provided by this addon.
+ *
+ * @vt: #E[Supported via @xterm/addon-image.] DCS SIXEL "SIXEL Graphics"  "DCS Ps ; Ps ; Ps ; q Pt ST"  "Draw SIXEL image."
+ *
+ * Sixel support is provided by the addon @xterm/addon-image with these limitations:
+ * - immediate coloring (no shared palette, allows high color settings of `img2sixel`)
+ * - max. palette size of 4096 colors
+ * - max. pixel width of 16K
+ * - max. 25 MB per sixel sequence
+ * - VT340 cursor positioning (begin of last sixel data row)
+ *
+ * See [addon readme](https://github.com/xtermjs/xterm.js/tree/master/addons/addon-image) for more details.
+ *
+ *
+ * @vt: #E[Supported via @xterm/addon-image.] OSC 1337  "iTerm2 Commands"   "OSC 1337 ; Pt BEL"  "Custom iTerm2 commands."
+ *
+ * Only the inline image protocol (IIP) is supported by the addon @xterm/addon-image with
+ * the following limitations:
+ * - sequence:
+ *   - format: `OSC 1337 ; File=inline=1 ; size=<unencoded size> ; ... : <base64 payload> BEL`
+ *   - size param must be set and payload may not exceed CEIL(size * 4 / 3)
+ *   - strict base64 handling as of RFC4648 §4 (standard alphabet, optional padding,
+ *     no separator bytes allowed)
+ *   - supported params: size, name, width, height, preserveAspectRatio
+ * - image formats: PNG, JPEG and GIF
+ * - no animation support (renders first image of a GIF)
+ * - no multipart support
+ * - VT340 cursor positioning (begin of last sixel data row)
+ *
+ * See [addon readme](https://github.com/xtermjs/xterm.js/tree/master/addons/addon-image)
+ * and [iTerm2 IIP docs](https://iterm2.com/documentation-images.html) for more details.
+ *
+ *
+ * @vt: #E[Supported via @xterm/addon-image.] APC KITTY_GRAPHICS "Kitty Graphics"  "APC G Pt ST"  "Kitty Graphics Protocol."
+ *
+ * Kitty graphics support is provided by the addon @xterm/addon-image.
+ * Note that while basic image output already works, this is still work in progress.
+ */
+
 // default values of addon ctor options
 const DEFAULT_OPTIONS: IImageAddonOptions = {
   enableSizeReports: true,
   pixelLimit: 16777216, // limit to 4096 * 4096 pixels
   sixelSupport: true,
   sixelScrolling: true,
-  sixelPaletteLimit: 256,
-  sixelSizeLimit: 25000000,
+  sixelPaletteLimit: 4096,
+  sixelSizeLimit: 33554432,
   storageLimit: 128,
   showPlaceholder: true,
   iipSupport: true,
-  iipSizeLimit: 20000000,
+  iipSizeLimit: 33554432,
   kittySupport: true,
-  kittySizeLimit: 20000000
+  kittySizeLimit: 33554432
 };
 
 // max palette size supported by the sixel lib (compile time setting)
@@ -62,6 +104,8 @@ export class ImageAddon implements ITerminalAddon, IImageApi {
   private _disposables: IDisposable[] = [];
   private _terminal: ITerminalExt | undefined;
   private _handlers: Map<String, IResetHandler> = new Map();
+  private readonly _onImageAdded = new Emitter<void>();
+  public readonly onImageAdded: IEvent<void> = this._onImageAdded.event;
 
   constructor(opts?: Partial<IImageAddonOptions>) {
     this._opts = Object.assign({}, DEFAULT_OPTIONS, opts);
@@ -74,6 +118,7 @@ export class ImageAddon implements ITerminalAddon, IImageApi {
     }
     this._disposables.length = 0;
     this._handlers.clear();
+    this._onImageAdded.dispose();
   }
 
   private _disposeLater(...args: IDisposable[]): void {
@@ -88,6 +133,7 @@ export class ImageAddon implements ITerminalAddon, IImageApi {
     // internal data structures
     this._renderer = new ImageRenderer(terminal);
     this._storage = new ImageStorage(terminal, this._renderer, this._opts);
+    this._storage.onImageAdded = () => this._onImageAdded.fire();
 
     // enable size reports
     if (this._opts.enableSizeReports) {
@@ -161,7 +207,7 @@ export class ImageAddon implements ITerminalAddon, IImageApi {
       this._disposeLater(
         kittyStorage,
         kittyHandler,
-        terminal._core._inputHandler._parser.registerApcHandler(0x47, kittyHandler)
+        terminal._core._inputHandler._parser.registerApcHandler({ final: 'G' }, kittyHandler)
       );
     }
   }

addons/addon-image/src/ImageRenderer.ts

@@ -6,10 +6,12 @@
 import { toRGBA8888 } from 'sixel/lib/Colors';
 import { IDisposable } from '@xterm/xterm';
 import { ICellSize, ImageLayer, ITerminalExt, IImageSpec, IRenderDimensions, IRenderService } from './Types';
-import { Disposable, MutableDisposable, toDisposable } from 'common/Lifecycle';
+import { Disposable, MutableDisposable, toDisposable } from '../../../src/common/Lifecycle';
 
-const PLACEHOLDER_LENGTH = 4096;
-const PLACEHOLDER_HEIGHT = 24;
+const enum Constants {
+  PLACEHOLDER_LENGTH = 4096,
+  PLACEHOLDER_HEIGHT = 24
+}
 
 /**
  * ImageRenderer - terminal frontend extension:
@@ -110,7 +112,7 @@ export class ImageRenderer extends Disposable implements IDisposable {
   public showPlaceholder(value: boolean): void {
     if (value) {
       if (!this._placeholder && this.cellSize.height !== -1) {
-        this._createPlaceHolder(Math.max(this.cellSize.height + 1, PLACEHOLDER_HEIGHT));
+        this._createPlaceHolder(Math.max(this.cellSize.height + 1, Constants.PLACEHOLDER_HEIGHT));
       }
     } else {
       this._placeholderBitmap?.close();
@@ -249,7 +251,7 @@ export class ImageRenderer extends Disposable implements IDisposable {
       }
 
       if (!this._placeholder) {
-        this._createPlaceHolder(Math.max(height + 1, PLACEHOLDER_HEIGHT));
+        this._createPlaceHolder(Math.max(height + 1, Constants.PLACEHOLDER_HEIGHT));
       } else if (height >= this._placeholder!.height) {
         this._createPlaceHolder(height + 1);
       }
@@ -358,7 +360,7 @@ export class ImageRenderer extends Disposable implements IDisposable {
       canvas.style.zIndex = '0';
       screenElement.appendChild(canvas);
     }
-    const ctx = canvas.getContext('2d', { alpha: true, desynchronized: true });
+    const ctx = canvas.getContext('2d', { alpha: true });
     if (!ctx) {
       canvas.remove();
       return;
@@ -379,7 +381,7 @@ export class ImageRenderer extends Disposable implements IDisposable {
     return this._layers.has(layer);
   }
 
-  private _createPlaceHolder(height: number = PLACEHOLDER_HEIGHT): void {
+  private _createPlaceHolder(height: number = Constants.PLACEHOLDER_HEIGHT): void {
     this._placeholderBitmap?.close();
     this._placeholderBitmap = undefined;
 
@@ -403,7 +405,7 @@ export class ImageRenderer extends Disposable implements IDisposable {
     ctx.putImageData(imgData, 0, 0);
 
     // create placeholder line, width aligned to blueprint width
-    const width = (screen.width + bWidth - 1) & ~(bWidth - 1) || PLACEHOLDER_LENGTH;
+    const width = (screen.width + bWidth - 1) & ~(bWidth - 1) || Constants.PLACEHOLDER_LENGTH;
     this._placeholder = ImageRenderer.createCanvas(this.document, width, height);
     const ctx2 = this._placeholder.getContext('2d', { alpha: false });
     if (!ctx2) {

addons/addon-image/src/ImageStorage.ts

@@ -124,6 +124,7 @@ export class ImageStorage implements IDisposable {
   private _pixelLimit: number = 2500000;
 
   private _viewportMetrics: { cols: number, rows: number };
+  public onImageAdded: (() => void) | undefined;
   public onImageDeleted: ((storageId: number) => void) | undefined;
 
   constructor(
@@ -336,6 +337,7 @@ export class ImageStorage implements IDisposable {
 
     // finally add the image
     this._images.set(imageId, imgSpec);
+    this.onImageAdded?.();
     return imageId;
   }
 

addons/addon-image/src/SixelHandler.ts

@@ -91,7 +91,7 @@ export class SixelHandler implements IDcsHandler, IResetHandler {
     const height = this._dec.height;
 
     // partial fix for https://github.com/jerch/xterm-addon-image/issues/37
-    if (!width || ! height) {
+    if (!width || !height) {
       if (height) {
         this._storage.advanceCursor(height);
       }

addons/addon-image/src/Types.ts

@@ -6,13 +6,13 @@
 import { IDisposable, IMarker, Terminal } from '@xterm/xterm';
 
 // private imports from base repo we build against
-import { Attributes, BgFlags, Content, ExtFlags, UnderlineStyle } from 'common/buffer/Constants';
-import type { AttributeData } from 'common/buffer/AttributeData';
-import type { IParams, IDcsHandler, IOscHandler, IApcHandler, IEscapeSequenceParser } from 'common/parser/Types';
-import type { IBufferLine, IExtendedAttrs, IInputHandler } from 'common/Types';
-import type { ITerminal, ReadonlyColorSet } from 'browser/Types';
-import type { IRenderDimensions } from 'browser/renderer/shared/Types';
-import type { ICoreBrowserService, IRenderService, IThemeService } from 'browser/services/Services';
+import { Attributes, BgFlags, Content, ExtFlags, UnderlineStyle } from '../../../src/common/buffer/Constants';
+import type { AttributeData } from '../../../src/common/buffer/AttributeData';
+import type { IParams, IDcsHandler, IOscHandler, IApcHandler, IEscapeSequenceParser } from '../../../src/common/parser/Types';
+import type { IBufferLine, IExtendedAttrs, IInputHandler } from '../../../src/common/Types';
+import type { ITerminal, ReadonlyColorSet } from '../../../src/browser/Types';
+import type { IRenderDimensions } from '../../../src/browser/renderer/shared/Types';
+import type { ICoreBrowserService, IRenderService, IThemeService } from '../../../src/browser/services/Services';
 
 export const enum Cell {
   CONTENT = 0,  // codepoint and wcwidth information (enum Content)

addons/addon-image/src/kitty/KittyGraphicsHandler.ts

@@ -16,24 +16,23 @@ import {
   IKittyCommand,
   IPendingTransmission,
   IKittyImageData,
-  BYTES_PER_PIXEL_RGB,
-  BYTES_PER_PIXEL_RGBA,
-  ALPHA_OPAQUE,
+  KittyPixelConstants,
   parseKittyCommand
 } from './KittyGraphicsTypes';
 
-// Memory limit for base64 decoder (4MB, same as IIPHandler)
-const DECODER_KEEP_DATA = 4194304;
-const DECODER_INITIAL_DATA = 4194304; // 4MB
+const enum Constants {
+  // Memory limit for base64 decoder (4MB, same as IIPHandler)
+  DECODER_KEEP_DATA = 4194304,
+  DECODER_INITIAL_DATA = 4194304, // 4MB
+  // Local mirror of const enum (esbuild can't inline const enums from external packages)
+  DECODER_OK = 0,
+  // Maximum control data size
+  MAX_CONTROL_DATA_SIZE = 512,
+  // Semicolon codepoint
+  SEMICOLON = 0x3B
+}
 
-// Local mirror of const enum (esbuild can't inline const enums from external packages)
-const DECODER_OK: DecodeStatus.OK = 0;
-
-// Maximum control data size
-const MAX_CONTROL_DATA_SIZE = 512;
-
-// Semicolon codepoint
-const SEMICOLON = 0x3B;
+const DECODER_OK = Constants.DECODER_OK as unknown as DecodeStatus.OK;
 
 // Kitty graphics protocol handler with streaming base64 decoding.
 export class KittyGraphicsHandler implements IApcHandler, IResetHandler, IDisposable {
@@ -50,7 +49,7 @@ export class KittyGraphicsHandler implements IApcHandler, IResetHandler, IDispos
   private _inControlData = true;
 
   // Buffer for control data.
-  private _controlData = new Uint32Array(MAX_CONTROL_DATA_SIZE);
+  private _controlData = new Uint32Array(Constants.MAX_CONTROL_DATA_SIZE);
   private _controlLength = 0;
 
   // Pre-calculated encoded size limit
@@ -77,7 +76,7 @@ export class KittyGraphicsHandler implements IApcHandler, IResetHandler, IDispos
     // Convert decoded size limit -> max encoded bytes.
     this._maxEncodedBytes = Math.ceil(this._opts.kittySizeLimit * 4 / 3);
     // ensure we preallocate more than configured limit while using 4mb initial size.
-    this._initialEncodedBytes = Math.min(DECODER_INITIAL_DATA, this._maxEncodedBytes);
+    this._initialEncodedBytes = Math.min(Constants.DECODER_INITIAL_DATA, this._maxEncodedBytes);
   }
 
   public reset(): void {
@@ -129,7 +128,7 @@ export class KittyGraphicsHandler implements IApcHandler, IResetHandler, IDispos
       // Scan for semicolon
       let controlEnd = end;
       for (let i = start; i < end; i++) {
-        if (data[i] === SEMICOLON) {
+        if (data[i] === Constants.SEMICOLON) {
           this._inControlData = false;
           controlEnd = i;
           break;
@@ -138,7 +137,7 @@ export class KittyGraphicsHandler implements IApcHandler, IResetHandler, IDispos
 
       // Copy control data
       const copyLength = controlEnd - start;
-      if (this._controlLength + copyLength > MAX_CONTROL_DATA_SIZE) {
+      if (this._controlLength + copyLength > Constants.MAX_CONTROL_DATA_SIZE) {
         this._aborted = true;
         return;
       }
@@ -201,7 +200,7 @@ export class KittyGraphicsHandler implements IApcHandler, IResetHandler, IDispos
       this._activeDecoder = pending.decoder;
     }
     if (!this._activeDecoder) {
-      this._activeDecoder = new Base64Decoder(DECODER_KEEP_DATA, this._maxEncodedBytes, this._initialEncodedBytes);
+      this._activeDecoder = new Base64Decoder(Constants.DECODER_KEEP_DATA, this._maxEncodedBytes, this._initialEncodedBytes);
       this._activeDecoder.init();
     }
 
@@ -377,14 +376,15 @@ export class KittyGraphicsHandler implements IApcHandler, IResetHandler, IDispos
     if (cmd.id === undefined) {
       return true;
     }
-    const image = this._kittyStorage.getImage(cmd.id);
+    const id = cmd.id;
+    const image = this._kittyStorage.getImage(id);
     if (!image) {
-      this._sendResponse(cmd.id, 'ENOENT:image not found', cmd.quiet ?? 0, cmd.placementId);
+      this._sendResponse(id, 'ENOENT:image not found', cmd.quiet ?? 0, cmd.placementId);
       return true;
     }
     const result = this._displayImage(image, cmd);
     return result.then(success => {
-      this._sendResponse(cmd.id!, success ? 'OK' : 'EINVAL:image rendering failed', cmd.quiet ?? 0, cmd.placementId);
+      this._sendResponse(id, success ? 'OK' : 'EINVAL:image rendering failed', cmd.quiet ?? 0, cmd.placementId);
       return true;
     });
   }
@@ -483,7 +483,7 @@ export class KittyGraphicsHandler implements IApcHandler, IResetHandler, IDispos
         return true;
       }
 
-      const bytesPerPixel = format === KittyFormat.RGBA ? BYTES_PER_PIXEL_RGBA : BYTES_PER_PIXEL_RGB;
+      const bytesPerPixel = format === KittyFormat.RGBA ? KittyPixelConstants.BYTES_PER_PIXEL_RGBA : KittyPixelConstants.BYTES_PER_PIXEL_RGB;
       const expectedBytes = width * height * bytesPerPixel;
 
       if (bytes.length < expectedBytes) {
@@ -511,6 +511,10 @@ export class KittyGraphicsHandler implements IApcHandler, IResetHandler, IDispos
         break;
       case 'i':
       case 'I':
+        // TODO: When placement id tracking is implemented (see TODO in
+        // KittyImageStorage), d=i with p=<pid> should delete only that
+        // specific placement, while d=i without p should delete all
+        // placements for the image.
         if (cmd.id !== undefined) {
           const pending = this._pendingTransmissions.get(cmd.id);
           if (pending) {
@@ -529,8 +533,8 @@ export class KittyGraphicsHandler implements IApcHandler, IResetHandler, IDispos
 
   private _sendResponse(id: number, message: string, quiet: number, placementId?: number): void {
     const isOk = message === 'OK';
-    if (isOk && quiet === 1) return;
-    if (!isOk && quiet === 2) return;
+    if (isOk && quiet >= 1) return;
+    if (!isOk && quiet >= 2) return;
 
     const pPart = placementId ? `,p=${placementId}` : '';
     const response = `\x1b_Gi=${id}${pPart};${message}\x1b\\`;
@@ -546,135 +550,137 @@ export class KittyGraphicsHandler implements IApcHandler, IResetHandler, IDispos
   }
 
   private async _decodeAndDisplay(image: IKittyImageData, cmd: IKittyCommand): Promise<void> {
-    let bitmap = await this._createBitmap(image);
+    let bitmap: ImageBitmap | undefined = await this._createBitmap(image);
 
-    const cropX = Math.max(0, cmd.x ?? 0);
-    const cropY = Math.max(0, cmd.y ?? 0);
-    const cropW = cmd.sourceWidth || (bitmap.width - cropX);
-    const cropH = cmd.sourceHeight || (bitmap.height - cropY);
+    try {
+      const cropX = Math.max(0, cmd.x ?? 0);
+      const cropY = Math.max(0, cmd.y ?? 0);
+      const cropW = cmd.sourceWidth || (bitmap.width - cropX);
+      const cropH = cmd.sourceHeight || (bitmap.height - cropY);
 
-    const maxCropW = Math.max(0, bitmap.width - cropX);
-    const maxCropH = Math.max(0, bitmap.height - cropY);
-    const finalCropW = Math.max(0, Math.min(cropW, maxCropW));
-    const finalCropH = Math.max(0, Math.min(cropH, maxCropH));
+      const maxCropW = Math.max(0, bitmap.width - cropX);
+      const maxCropH = Math.max(0, bitmap.height - cropY);
+      const finalCropW = Math.max(0, Math.min(cropW, maxCropW));
+      const finalCropH = Math.max(0, Math.min(cropH, maxCropH));
 
-    if (finalCropW === 0 || finalCropH === 0) {
-      bitmap.close();
-      throw new Error('invalid source rectangle');
-    }
-
-    if (cropX !== 0 || cropY !== 0 || finalCropW !== bitmap.width || finalCropH !== bitmap.height) {
-      const cropped = await createImageBitmap(bitmap, cropX, cropY, finalCropW, finalCropH);
-      bitmap.close();
-      bitmap = cropped;
-    }
-
-    const cw = this._renderer.dimensions?.css.cell.width || CELL_SIZE_DEFAULT.width;
-    const ch = this._renderer.dimensions?.css.cell.height || CELL_SIZE_DEFAULT.height;
-
-    // Per spec: c/r default to image's natural cell dimensions.
-    // If only one of c/r is specified, compute the other from image aspect ratio.
-    let imgCols: number;
-    let imgRows: number;
-    if (cmd.columns !== undefined && cmd.rows !== undefined) {
-      imgCols = cmd.columns;
-      imgRows = cmd.rows;
-    } else if (cmd.columns !== undefined) {
-      imgCols = cmd.columns;
-      imgRows = Math.max(1, Math.ceil((bitmap.height / bitmap.width) * (imgCols * cw) / ch));
-    } else if (cmd.rows !== undefined) {
-      imgRows = cmd.rows;
-      imgCols = Math.max(1, Math.ceil((bitmap.width / bitmap.height) * (imgRows * ch) / cw));
-    } else {
-      imgCols = Math.ceil(bitmap.width / cw);
-      imgRows = Math.ceil(bitmap.height / ch);
-    }
-
-    let w = bitmap.width;
-    let h = bitmap.height;
-
-    // Scale bitmap to fit placement rectangle when c/r are specified
-    if (cmd.columns !== undefined || cmd.rows !== undefined) {
-      w = Math.round(imgCols * cw);
-      h = Math.round(imgRows * ch);
-    }
-
-    if (w * h > this._opts.pixelLimit) {
-      bitmap.close();
-      throw new Error('image exceeds pixel limit');
-    }
-
-    // Save cursor position before addImage modifies it
-    const buffer = this._coreTerminal._core.buffer;
-    const savedX = buffer.x;
-    const savedY = buffer.y;
-    const savedYbase = buffer.ybase;
-
-    // Determine layer based on z-index: negative = behind text, 0+ = on top.
-    // When z<0 we always use the bottom layer even without allowTransparency —
-    // the image will simply be hidden behind the opaque text background, which
-    // is the correct behavior (client asked for "behind text").
-    const wantsBottom = cmd.zIndex !== undefined && cmd.zIndex < 0;
-    const layer: ImageLayer = wantsBottom ? 'bottom' : 'top';
-
-    let finalBitmap = bitmap;
-    if (w !== bitmap.width || h !== bitmap.height) {
-      finalBitmap = await createImageBitmap(bitmap, { resizeWidth: w, resizeHeight: h });
-      bitmap.close();
-    }
-
-    // Per spec: X/Y are pixel offsets within the first cell, so clamp to cell dimensions
-    const xOffset = Math.min(Math.max(0, cmd.xOffset ?? 0), cw - 1);
-    const yOffset = Math.min(Math.max(0, cmd.yOffset ?? 0), ch - 1);
-    if (xOffset !== 0 || yOffset !== 0) {
-      // Per spec: X/Y is not added to c/r area. When c/r are explicit, the
-      // total placement area remains c*cw × r*ch pixels and the offset image
-      // is clipped to fit. When c/r are unset, the padded canvas determines
-      // the natural cell dimensions.
-      const canvasW = (cmd.columns !== undefined) ? Math.round(imgCols * cw) : finalBitmap.width + xOffset;
-      const canvasH = (cmd.rows !== undefined) ? Math.round(imgRows * ch) : finalBitmap.height + yOffset;
-      const offsetCanvas = ImageRenderer.createCanvas(window.document, canvasW, canvasH);
-      const offsetCtx = offsetCanvas.getContext('2d');
-      if (!offsetCtx) {
-        finalBitmap.close();
-        throw new Error('Failed to create offset canvas context');
+      if (finalCropW === 0 || finalCropH === 0) {
+        throw new Error('invalid source rectangle');
+      }
+
+      if (cropX !== 0 || cropY !== 0 || finalCropW !== bitmap.width || finalCropH !== bitmap.height) {
+        const cropped = await createImageBitmap(bitmap, cropX, cropY, finalCropW, finalCropH);
+        bitmap.close();
+        bitmap = cropped;
+      }
+
+      const cw = this._renderer.dimensions?.css.cell.width || CELL_SIZE_DEFAULT.width;
+      const ch = this._renderer.dimensions?.css.cell.height || CELL_SIZE_DEFAULT.height;
+
+      // Per spec: c/r default to image's natural cell dimensions.
+      // If only one of c/r is specified, compute the other from image aspect ratio.
+      let imgCols: number;
+      let imgRows: number;
+      if (cmd.columns !== undefined && cmd.rows !== undefined) {
+        imgCols = cmd.columns;
+        imgRows = cmd.rows;
+      } else if (cmd.columns !== undefined) {
+        imgCols = cmd.columns;
+        imgRows = Math.max(1, Math.ceil((bitmap.height / bitmap.width) * (imgCols * cw) / ch));
+      } else if (cmd.rows !== undefined) {
+        imgRows = cmd.rows;
+        imgCols = Math.max(1, Math.ceil((bitmap.width / bitmap.height) * (imgRows * ch) / cw));
+      } else {
+        imgCols = Math.ceil(bitmap.width / cw);
+        imgRows = Math.ceil(bitmap.height / ch);
+      }
+
+      let w = bitmap.width;
+      let h = bitmap.height;
+
+      // Scale bitmap to fit placement rectangle when c/r are specified
+      if (cmd.columns !== undefined || cmd.rows !== undefined) {
+        w = Math.round(imgCols * cw);
+        h = Math.round(imgRows * ch);
       }
-      offsetCtx.drawImage(finalBitmap, xOffset, yOffset);
 
-      const offsetBitmap = await createImageBitmap(offsetCanvas);
-      offsetCanvas.width = offsetCanvas.height = 0;
-      finalBitmap.close();
-      finalBitmap = offsetBitmap;
-      w = finalBitmap.width;
-      h = finalBitmap.height;
       if (w * h > this._opts.pixelLimit) {
-        finalBitmap.close();
         throw new Error('image exceeds pixel limit');
       }
-      if (cmd.columns === undefined) {
-        imgCols = Math.ceil(finalBitmap.width / cw);
-      }
-      if (cmd.rows === undefined) {
-        imgRows = Math.ceil(finalBitmap.height / ch);
-      }
-    }
 
-    const zIndex = cmd.zIndex ?? 0;
-    this._kittyStorage.addImage(image.id, finalBitmap, true, layer, zIndex);
+      // Save cursor position before addImage modifies it
+      const buffer = this._coreTerminal._core.buffer;
+      const savedX = buffer.x;
+      const savedY = buffer.y;
+      const savedYbase = buffer.ybase;
 
-    // Kitty cursor movement
-    // Per spec: cursor placed at first column after last image column,
-    // on the last row of the image. C=1 means don't move cursor.
-    if (cmd.cursorMovement === 1) {
-      // C=1: restore cursor to position before image was placed
-      const scrolled = buffer.ybase - savedYbase;
-      buffer.x = savedX;
-      // Can't restore cursor to scrollback?
-      buffer.y = Math.max(savedY - scrolled, 0);
-    } else {
-      // Default (C=0): advance cursor horizontally past the image
-      // addImage already positioned cursor on the last row via lineFeeds
-      buffer.x = Math.min(savedX + imgCols, this._coreTerminal.cols);
+      // Determine layer based on z-index: negative = behind text, 0+ = on top.
+      // When z<0 we always use the bottom layer even without allowTransparency —
+      // the image will simply be hidden behind the opaque text background, which
+      // is the correct behavior (client asked for "behind text").
+      const wantsBottom = cmd.zIndex !== undefined && cmd.zIndex < 0;
+      const layer: ImageLayer = wantsBottom ? 'bottom' : 'top';
+
+      if (w !== bitmap.width || h !== bitmap.height) {
+        const scaled = await createImageBitmap(bitmap, { resizeWidth: w, resizeHeight: h });
+        bitmap.close();
+        bitmap = scaled;
+      }
+
+      // Per spec: X/Y are pixel offsets within the first cell, so clamp to cell dimensions
+      const xOffset = Math.min(Math.max(0, cmd.xOffset ?? 0), cw - 1);
+      const yOffset = Math.min(Math.max(0, cmd.yOffset ?? 0), ch - 1);
+      if (xOffset !== 0 || yOffset !== 0) {
+        // Per spec: X/Y is not added to c/r area. When c/r are explicit, the
+        // total placement area remains c*cw × r*ch pixels and the offset image
+        // is clipped to fit. When c/r are unset, the padded canvas determines
+        // the natural cell dimensions.
+        const canvasW = (cmd.columns !== undefined) ? Math.round(imgCols * cw) : bitmap.width + xOffset;
+        const canvasH = (cmd.rows !== undefined) ? Math.round(imgRows * ch) : bitmap.height + yOffset;
+        const offsetCanvas = ImageRenderer.createCanvas(window.document, canvasW, canvasH);
+        const offsetCtx = offsetCanvas.getContext('2d');
+        if (!offsetCtx) {
+          throw new Error('Failed to create offset canvas context');
+        }
+        offsetCtx.drawImage(bitmap, xOffset, yOffset);
+
+        const offsetBitmap = await createImageBitmap(offsetCanvas);
+        offsetCanvas.width = offsetCanvas.height = 0;
+        bitmap.close();
+        bitmap = offsetBitmap;
+        w = bitmap.width;
+        h = bitmap.height;
+        if (w * h > this._opts.pixelLimit) {
+          throw new Error('image exceeds pixel limit');
+        }
+        if (cmd.columns === undefined) {
+          imgCols = Math.ceil(bitmap.width / cw);
+        }
+        if (cmd.rows === undefined) {
+          imgRows = Math.ceil(bitmap.height / ch);
+        }
+      }
+
+      const zIndex = cmd.zIndex ?? 0;
+      this._kittyStorage.addImage(image.id, bitmap, true, layer, zIndex);
+      bitmap = undefined;  // ownership transferred to storage
+
+      // Kitty cursor movement
+      // Per spec: cursor placed at first column after last image column,
+      // on the last row of the image. C=1 means don't move cursor.
+      if (cmd.cursorMovement === 1) {
+        // C=1: restore cursor to position before image was placed
+        const scrolled = buffer.ybase - savedYbase;
+        buffer.x = savedX;
+        // Can't restore cursor to scrollback?
+        buffer.y = Math.max(savedY - scrolled, 0);
+      } else {
+        // Default (C=0): advance cursor horizontally past the image
+        // addImage already positioned cursor on the last row via lineFeeds
+        buffer.x = Math.min(savedX + imgCols, this._coreTerminal.cols);
+      }
+    } catch (e) {
+      bitmap?.close();
+      throw e;
     }
   }
 
@@ -716,7 +722,7 @@ export class KittyGraphicsHandler implements IApcHandler, IResetHandler, IDispos
       throw new Error('Width and height required for raw pixel data');
     }
 
-    const bytesPerPixel = image.format === KittyFormat.RGBA ? BYTES_PER_PIXEL_RGBA : BYTES_PER_PIXEL_RGB;
+    const bytesPerPixel = image.format === KittyFormat.RGBA ? KittyPixelConstants.BYTES_PER_PIXEL_RGBA : KittyPixelConstants.BYTES_PER_PIXEL_RGB;
     const expectedBytes = width * height * bytesPerPixel;
 
     if (bytes.length < expectedBytes) {
@@ -727,13 +733,13 @@ export class KittyGraphicsHandler implements IApcHandler, IResetHandler, IDispos
 
     if (image.format === KittyFormat.RGBA) {
       // RGBA: use bytes directly — no copy needed
-      return createImageBitmap(new ImageData(new Uint8ClampedArray(bytes.buffer as ArrayBuffer, bytes.byteOffset, pixelCount * BYTES_PER_PIXEL_RGBA), width, height));
+      return createImageBitmap(new ImageData(new Uint8ClampedArray(bytes.buffer as ArrayBuffer, bytes.byteOffset, pixelCount * KittyPixelConstants.BYTES_PER_PIXEL_RGBA), width, height));
     }
 
     // RGB→RGBA: interleave alpha using uint32 block processing (4 pixels per iteration).
     // 3 uint32 reads + 4 uint32 writes per 4 pixels vs 28 byte reads/writes — ~6x faster.
     // Assumes little-endian (all modern browsers/Node.js).
-    const data = new Uint8ClampedArray(pixelCount * BYTES_PER_PIXEL_RGBA);
+    const data = new Uint8ClampedArray(pixelCount * KittyPixelConstants.BYTES_PER_PIXEL_RGBA);
     const src32 = new Uint32Array(bytes.buffer, bytes.byteOffset, Math.floor(bytes.byteLength / 4));
     const dst32 = new Uint32Array(data.buffer);
     const alignedPixels = pixelCount & ~3;  // round down to multiple of 4
@@ -745,22 +751,22 @@ export class KittyGraphicsHandler implements IApcHandler, IResetHandler, IDispos
       const b1 = src32[srcOffset++];
       const b2 = src32[srcOffset++];
       // Little-endian: pixel bytes are [R,G,B] → uint32 ABGR layout
-      dst32[dstOffset++] = (b0 & 0x00FFFFFF) | 0xFF000000;
-      dst32[dstOffset++] = ((b0 >>> 24) | (b1 << 8)) & 0x00FFFFFF | 0xFF000000;
-      dst32[dstOffset++] = ((b1 >>> 16) | (b2 << 16)) & 0x00FFFFFF | 0xFF000000;
-      dst32[dstOffset++] = (b2 >>> 8) | 0xFF000000;
+      dst32[dstOffset++] = 0xFF000000 | b0;
+      dst32[dstOffset++] = 0xFF000000 | (b0 >>> 24) | (b1 << 8);
+      dst32[dstOffset++] = 0xFF000000 | (b1 >>> 16) | (b2 << 16);
+      dst32[dstOffset++] = 0xFF000000 | (b2 >>> 8);
     }
 
     // Handle remaining 1–3 pixels
-    let srcByte = alignedPixels * BYTES_PER_PIXEL_RGB;
-    let dstByte = alignedPixels * BYTES_PER_PIXEL_RGBA;
+    let srcByte = alignedPixels * KittyPixelConstants.BYTES_PER_PIXEL_RGB;
+    let dstByte = alignedPixels * KittyPixelConstants.BYTES_PER_PIXEL_RGBA;
     for (let i = alignedPixels; i < pixelCount; i++) {
       data[dstByte]     = bytes[srcByte];
       data[dstByte + 1] = bytes[srcByte + 1];
       data[dstByte + 2] = bytes[srcByte + 2];
-      data[dstByte + 3] = ALPHA_OPAQUE;
-      srcByte += BYTES_PER_PIXEL_RGB;
-      dstByte += BYTES_PER_PIXEL_RGBA;
+      data[dstByte + 3] = KittyPixelConstants.ALPHA_OPAQUE;
+      srcByte += KittyPixelConstants.BYTES_PER_PIXEL_RGB;
+      dstByte += KittyPixelConstants.BYTES_PER_PIXEL_RGBA;
     }
 
     return createImageBitmap(new ImageData(data, width, height));

addons/addon-image/src/kitty/KittyGraphicsTypes.ts

@@ -82,9 +82,11 @@ export const enum KittyKey {
 }
 
 // Pixel format constants
-export const BYTES_PER_PIXEL_RGB = 3;
-export const BYTES_PER_PIXEL_RGBA = 4;
-export const ALPHA_OPAQUE = 255;
+export const enum KittyPixelConstants {
+  BYTES_PER_PIXEL_RGB = 3,
+  BYTES_PER_PIXEL_RGBA = 4,
+  ALPHA_OPAQUE = 255
+}
 
 // Parsed Kitty graphics command.
 export interface IKittyCommand {

addons/addon-image/src/kitty/KittyImageStorage.ts

@@ -20,6 +20,15 @@ export class KittyImageStorage implements IDisposable {
 
   private _nextImageId = 1;
   private readonly _images: Map<number, IKittyImageData> = new Map();
+  // TODO: Support multiple placements per image. The kitty spec identifies
+  // placements by an (image id, placement id) pair — same i + different p
+  // values should coexist, and same i + same p should replace the prior
+  // placement. Currently we track only one storage entry per kitty image id,
+  // so multiple placements of the same image overwrite each other. Fixing
+  // this requires changing these maps to Map<number, Map<number, number>>
+  // (kittyId → placementId → storageId) and updating addImage/deleteById
+  // accordingly. The underlying shared ImageStorage would also need to
+  // support multiple entries per logical image.
   private readonly _kittyIdToStorageId: Map<number, number> = new Map();
   private readonly _storageIdToKittyId: Map<number, number> = new Map();
 

addons/addon-image/src/tsconfig.json

@@ -10,20 +10,19 @@
     "preserveWatchOutput": true,
     "types": [
       "../../../node_modules/@types/mocha"
-    ],
-    "paths": {
-      "browser/*": [ "../../../src/browser/*" ],
-      "common/*": [ "../../../src/common/*" ],
-      "@xterm/addon-image": [ "../typings/addon-image.d.ts" ],
-      "*": [ "./*" ]
-    }
+    ]
   },
   "include": [
     "./**/*",
-    "../../../typings/xterm.d.ts"
+    "../../../typings/xterm.d.ts",
+    "../typings/addon-image.d.ts"
   ],
   "references": [
-    { "path": "../../../src/browser" },
-    { "path": "../../../src/common" }
+    {
+      "path": "../../../src/browser"
+    },
+    {
+      "path": "../../../src/common"
+    }
   ]
 }

addons/addon-image/test/ImageAddon.test.ts

@@ -8,6 +8,7 @@ import { readFileSync } from 'fs';
 import { FINALIZER, introducer, sixelEncode } from 'sixel';
 import { ITestContext, createTestContext, openTerminal, pollFor, timeout } from '../../../test/playwright/TestUtils';
 import { deepStrictEqual, ok, strictEqual } from 'assert';
+import QoiEncoder from 'xterm-wasm-parts/lib/qoi/QoiEncoder.wasm';
 
 /**
  * Plugin ctor options.
@@ -74,6 +75,10 @@ const TESTDATA_IIP: [string, [number, number]][] = [
   [readFileSync('./addons/addon-image/fixture/iip/w3c_jpg.iip', { encoding: 'utf-8' }), [72, 48]],
   [readFileSync('./addons/addon-image/fixture/iip/w3c_png.iip', { encoding: 'utf-8' }), [72, 48]]
 ];
+const PALETTE_PNG_BASE64 = readFileSync('./addons/addon-image/fixture/palette.png').toString('base64');
+const qoiEnc = new QoiEncoder(1024*1024);
+const qoiData = qoiEnc.encode(TESTDATA.bytes, 640, 80);
+const PALETTE_QOI_BASE64 = Buffer.from(qoiData).toString('base64');
 
 let ctx: ITestContext;
 test.beforeAll(async ({ browser }) => {
@@ -85,11 +90,6 @@ test.afterAll(async () => await ctx.page.close());
 test.describe('ImageAddon', () => {
 
   test.beforeEach(async ({}, testInfo) => {
-    // DEBT: This test never worked on webkit
-    if (ctx.browser.browserType().name() === 'webkit') {
-      testInfo.skip();
-      return;
-    }
     await ctx.page.evaluate(`
       window.term.reset()
       window.imageAddon?.dispose();
@@ -132,13 +132,13 @@ test.describe('ImageAddon', () => {
         sixelSupport: true,
         sixelScrolling: true,
         sixelPaletteLimit: 512,  // set to 512 to get example image working
-        sixelSizeLimit: 25000000,
+        sixelSizeLimit: 33554432,
         storageLimit: 128,
         showPlaceholder: true,
         iipSupport: true,
-        iipSizeLimit: 20000000,
+        iipSizeLimit: 33554432,
         kittySupport: true,
-        kittySizeLimit: 20000000
+        kittySizeLimit: 33554432
       };
       deepStrictEqual(await ctx.page.evaluate(`window.imageAddon._opts`), DEFAULT_OPTIONS);
     });
@@ -196,6 +196,18 @@ test.describe('ImageAddon', () => {
   });
 
   test.describe('image lifecycle & eviction', () => {
+    test('onImageAdded fires for each image', async () => {
+      await ctx.page.evaluate(`
+        window._imageAddedCount = 0;
+        window.imageAddon.onImageAdded(() => { window._imageAddedCount++; });
+      `);
+      await ctx.proxy.write(SIXEL_SEQ_0);
+      await pollFor(ctx.page, 'window._imageAddedCount', 1);
+      await ctx.proxy.write(SIXEL_SEQ_0);
+      await pollFor(ctx.page, 'window._imageAddedCount', 2);
+      await ctx.proxy.write(SIXEL_SEQ_0);
+      await pollFor(ctx.page, 'window._imageAddedCount', 3);
+    });
     test('delete image once scrolled off', async () => {
       await ctx.proxy.write(SIXEL_SEQ_0);
       pollFor(ctx.page, 'window.imageAddon._storage._images.size', 1);
@@ -300,6 +312,68 @@ test.describe('ImageAddon', () => {
       deepStrictEqual(await getOrigSize(1), TESTDATA_IIP[4][1]);
     });
   });
+
+  test.describe('IIP - QOI support', () => {
+    test('palette should yield same bytes from PNG and QOI', async () => {
+      await ctx.proxy.write(`\x1b]1337;File=inline=1;size=525:${PALETTE_PNG_BASE64}\x07`);
+      deepStrictEqual(await getOrigSize(1), [640, 80]);
+      await ctx.proxy.write(`\x1b[10H\x1b]1337;File=inline=1;size=${qoiData.length}:${PALETTE_QOI_BASE64}\x07`);
+      deepStrictEqual(await getOrigSize(2), [640, 80]);
+      const pngScrape = await getImageAtBufferCell(0, 0);
+      const qoiScrape = await getImageAtBufferCell(0, 11);
+      deepStrictEqual(qoiScrape, pngScrape);
+    });
+  });
+
+  test.describe('IIP - resizing', () => {
+    /**
+     * The correct resize behavior is wonky and needs to be tested against iTerm2,
+     * especially for missing params to derive correct default behavior.
+     * We document the current behavior here w'o claiming to be fully in line with iTerm2.
+     * ref: https://iterm2.com/documentation-images.html
+     * imgcat: https://iterm2.com/utilities/imgcat
+     *
+     * NOTE: QOI has a slightly different parse path, thus we test resizing explicitly
+     */
+    const images = [
+      ['palette.png', 525, PALETTE_PNG_BASE64],
+      ['palette.qoi', qoiData.length, PALETTE_QOI_BASE64]
+    ];
+    for (const [name, size, payload] of images) {
+      test(name + ': N --> width=20 height=5 preserveAspectRatio=0', async () => {
+        // cell based resize
+        const header = 'width=20;height=5;preserveAspectRatio=0';
+        await ctx.proxy.write(`\x1b]1337;File=inline=1;size=${size};${header}:${payload}\x07`);
+        const dim = await getDimensions();
+        deepStrictEqual(await getOrigSize(1), [dim.cellWidth * 20, dim.cellHeight * 5]);
+      });
+      test(name + ': Npx --> width=320px height=160px preserveAspectRatio=0', async () => {
+        // pixel based resize
+        const header = 'width=320px;height=160px;preserveAspectRatio=0';
+        await ctx.proxy.write(`\x1b]1337;File=inline=1;size=${size};${header}:${payload}\x07`);
+        deepStrictEqual(await getOrigSize(1), [320, 160]);
+      });
+      test(name + ': N% --> width=50% height=30% preserveAspectRatio=0', async () => {
+        // % of viewport resize
+        const header = 'width=50%;height=30%;preserveAspectRatio=0';
+        await ctx.proxy.write(`\x1b]1337;File=inline=1;size=${size};${header}:${payload}\x07`);
+        const dim = await getDimensions();
+        deepStrictEqual(await getOrigSize(1), [Math.floor(dim.width * 0.5), Math.floor(dim.height * 0.3)]);
+      });
+      test(name + ': ommitted dimension assumes preserveAspectRatio=1', async () => {
+        // width provided in percent
+        const header = 'width=50%';
+        await ctx.proxy.write(`\x1b]1337;File=inline=1;size=${size};${header}:${payload}\x07`);
+        const dim = await getDimensions();
+        const width = Math.floor(dim.width * 0.5);
+        deepStrictEqual(await getOrigSize(1), [width, Math.floor(width * 80 / 640)]);
+        // height provided in pixel
+        const header2 = 'height=200px';
+        await ctx.proxy.write(`\x1b]1337;File=inline=1;size=${size};${header2}:${payload}\x07`);
+        deepStrictEqual(await getOrigSize(2), [Math.floor(200 * 640 / 80), 200]);
+      });
+    }
+  });
 });
 
 /**
@@ -333,3 +407,7 @@ async function getOrigSize(id: number): Promise<[number, number]> {
     window.imageAddon._storage._images.get(${id}).orig.height
   ]`);
 }
+
+async function getImageAtBufferCell(x: number, y: number): Promise<string | undefined> {
+  return ctx.page.evaluate<any>(`window.imageAddon.getImageAtBufferCell(${x}, ${y})?.toDataURL('image/png')`);
+}

addons/addon-image/test/KittyGraphics.test.ts

@@ -109,11 +109,6 @@ test.describe('Kitty Graphics Protocol', () => {
   // TODO: Distinguish lowercase delete selectors (placement only) from uppercase (placement + free data)
 
   test.beforeEach(async ({}, testInfo) => {
-    // DEBT: This test never worked on webkit
-    if (ctx.browser.browserType().name() === 'webkit') {
-      testInfo.skip();
-      return;
-    }
     await ctx.page.evaluate(`
       window.term.reset()
       window.imageAddon?.dispose();
@@ -622,6 +617,18 @@ test.describe('Kitty Graphics Protocol', () => {
       strictEqual(await ctx.page.evaluate('window.kittyGotResponse'), false);
     });
 
+    test('suppresses OK response when q=2', async () => {
+      await ctx.page.evaluate(() => {
+        (window as any).kittyGotResponse = false;
+        (window as any).term.onData(() => { (window as any).kittyGotResponse = true; });
+      });
+
+      await ctx.proxy.write(`\x1b_Gi=81,a=q,q=2,f=100;${KITTY_BLACK_1X1_BASE64}\x1b\\`);
+      await timeout(100);
+
+      strictEqual(await ctx.page.evaluate('window.kittyGotResponse'), false);
+    });
+
     test('suppresses error response when q=2', async () => {
       await ctx.page.evaluate(() => {
         (window as any).kittyGotResponse = false;
@@ -802,6 +809,30 @@ test.describe('Kitty Graphics Protocol', () => {
 
       strictEqual(await ctx.page.evaluate('window.kittyGotResponse'), false);
     });
+
+    test('a=t OK suppressed by q=2', async () => {
+      await ctx.page.evaluate(() => {
+        (window as any).kittyGotResponse = false;
+        (window as any).term.onData(() => { (window as any).kittyGotResponse = true; });
+      });
+
+      await ctx.proxy.write(`\x1b_Gi=181,a=t,q=2,f=100;${KITTY_BLACK_1X1_BASE64}\x1b\\`);
+      await timeout(100);
+
+      strictEqual(await ctx.page.evaluate('window.kittyGotResponse'), false);
+    });
+
+    test('a=T OK suppressed by q=2', async () => {
+      await ctx.page.evaluate(() => {
+        (window as any).kittyGotResponse = false;
+        (window as any).term.onData(() => { (window as any).kittyGotResponse = true; });
+      });
+
+      await ctx.proxy.write(`\x1b_Gi=191,a=T,q=2,f=100;${KITTY_BLACK_1X1_BASE64}\x1b\\`);
+      await timeout(100);
+
+      strictEqual(await ctx.page.evaluate('window.kittyGotResponse'), false);
+    });
   });
 
   test.describe('Transmission medium rejection', () => {
@@ -1151,6 +1182,22 @@ test.describe('Kitty Graphics Protocol', () => {
       strictEqual(await getImageStorageLength(), 1);
     });
 
+    test('OK response suppressed by q=2', async () => {
+      await ctx.proxy.write(`\x1b_Ga=t,f=100,i=221;${KITTY_BLACK_1X1_BASE64}\x1b\\`);
+      await timeout(100);
+
+      await ctx.page.evaluate(() => {
+        (window as any).kittyGotResponse = false;
+        (window as any).term.onData(() => { (window as any).kittyGotResponse = true; });
+      });
+
+      await ctx.proxy.write(`\x1b_Ga=p,i=221,q=2\x1b\\`);
+      await timeout(100);
+
+      strictEqual(await ctx.page.evaluate('window.kittyGotResponse'), false);
+      strictEqual(await getImageStorageLength(), 1);
+    });
+
     test('ENOENT error suppressed by q=2', async () => {
       await ctx.page.evaluate(() => {
         (window as any).kittyGotResponse = false;
@@ -2159,6 +2206,19 @@ test.describe('Kitty Graphics Protocol', () => {
       strictEqual(await ctx.page.evaluate(`window.imageAddon._storage._images.has(${oldStorageId})`), false);
     });
   });
+
+  test.describe('onImageAdded callback', () => {
+    test('onImageAdded fires for each kitty image', async () => {
+      await ctx.page.evaluate(`
+        window._imageAddedCount = 0;
+        window.imageAddon.onImageAdded(() => { window._imageAddedCount++; });
+      `);
+      await ctx.proxy.write(`\x1b_Ga=T,f=100;${KITTY_BLACK_1X1_BASE64}\x1b\\`);
+      await pollFor(ctx.page, 'window._imageAddedCount', 1);
+      await ctx.proxy.write(`\x1b_Ga=T,f=100;${KITTY_RGB_3X1_BASE64}\x1b\\`);
+      await pollFor(ctx.page, 'window._imageAddedCount', 2);
+    });
+  });
 });
 
 /**

addons/addon-image/test/tsconfig.json

@@ -3,23 +3,12 @@
     "module": "commonjs",
     "target": "ESNext",
     "lib": [
-      "es2021",
+      "es2021"
     ],
     "rootDir": ".",
     "outDir": "../out-test",
     "sourceMap": true,
     "removeComments": true,
-    "paths": {
-      "common/*": [
-        "../../../src/common/*"
-      ],
-      "browser/*": [
-        "../../../src/browser/*"
-      ],
-      "*": [
-        "./*"
-      ]
-    },
     "strict": true,
     "types": [
       "../../../node_modules/@types/node"

addons/addon-image/tsconfig.json

@@ -2,7 +2,11 @@
   "files": [],
   "include": [],
   "references": [
-    { "path": "./src" },
-    { "path": "./test" }
+    {
+      "path": "./src"
+    },
+    {
+      "path": "./test"
+    }
   ]
 }

addons/addon-image/typings/addon-image.d.ts

@@ -3,7 +3,7 @@
  * @license MIT
  */
 
-import { Terminal, ITerminalAddon } from '@xterm/xterm';
+import { Terminal, ITerminalAddon, IEvent } from '@xterm/xterm';
 
 declare module '@xterm/addon-image' {
   export interface IImageAddonOptions {
@@ -116,6 +116,11 @@ declare module '@xterm/addon-image' {
      */
     public showPlaceholder: boolean;
 
+    /**
+     * Event fired whenever a new image is added to storage.
+     */
+    public readonly onImageAdded: IEvent<void>;
+
     /**
      * Get original image canvas at buffer position.
      */

addons/addon-ligatures/package.json

@@ -20,7 +20,7 @@
     "package": "webpack",
     "pretest": "npm run build",
     "test": "nyc mocha out/**/*.test.js",
-    "prepublish": "npm run package"
+    "prepublishOnly": "npm run package"
   },
   "keywords": [
     "font",
@@ -37,9 +37,9 @@
   "devDependencies": {
     "@types/lru-cache": "^5.1.0",
     "@types/opentype.js": "^0.7.0",
-    "axios": "^1.6.0",
+    "axios": "^1.15.2",
     "font-finder": "^1.1.0",
     "mkdirp": "0.5.5",
-    "yauzl": "^2.10.0"
+    "yauzl": "^3.2.1"
   }
 }

addons/addon-ligatures/src/tsconfig.json

@@ -10,17 +10,12 @@
     "preserveWatchOutput": true,
     "types": [
       "../../../node_modules/@types/mocha",
-      // HACK: src shouldn't use node types but it's needed for index.test.ts
       "../../../node_modules/@types/node"
-    ],
-    "paths": {
-      "@xterm/addon-ligatures" : [
-        "../typings/addon-ligatures.d.ts"
-      ]
-    }
+    ]
   },
   "include": [
     "./**/*",
-    "../../../typings/xterm.d.ts"
+    "../../../typings/xterm.d.ts",
+    "../typings/addon-ligatures.d.ts"
   ]
 }

addons/addon-ligatures/test/tsconfig.json

@@ -10,11 +10,6 @@
     "sourceMap": true,
     "removeComments": true,
     "strict": true,
-    "paths": {
-      "*": [
-        "./*"
-      ]
-    },
     "types": [
       "../../../node_modules/@types/mocha",
       "../../../node_modules/@types/node"

addons/addon-ligatures/tsconfig.json

@@ -2,7 +2,11 @@
   "files": [],
   "include": [],
   "references": [
-    { "path": "./src" },
-    { "path": "./test" }
+    {
+      "path": "./src"
+    },
+    {
+      "path": "./test"
+    }
   ]
 }

addons/addon-progress/src/ProgressAddon.ts

@@ -5,7 +5,7 @@
 
 import type { Terminal, ITerminalAddon, IDisposable } from '@xterm/xterm';
 import type { ProgressAddon as IProgressApi, IProgressState } from '@xterm/addon-progress';
-import type { Emitter, IEvent } from 'common/Event';
+import type { Emitter, IEvent } from '../../../src/common/Event';
 
 
 const enum ProgressType {

addons/addon-progress/src/tsconfig.json

@@ -13,22 +13,12 @@
     "strict": true,
     "types": [
       "../../../node_modules/@types/mocha"
-    ],
-    "paths": {
-      "common/*": [
-        "../../../src/common/*"
-      ],
-      "browser/*": [
-        "../../../src/browser/*"
-      ],
-      "@xterm/addon-progress": [
-        "../typings/addon-progress.d.ts"
-      ]
-    }
+    ]
   },
   "include": [
     "./**/*",
-    "../../../typings/xterm.d.ts"
+    "../../../typings/xterm.d.ts",
+    "../typings/addon-progress.d.ts"
   ],
   "references": [
     {

addons/addon-progress/test/tsconfig.json

@@ -3,23 +3,12 @@
     "module": "commonjs",
     "target": "ESNext",
     "lib": [
-      "es2021",
+      "es2021"
     ],
     "rootDir": ".",
     "outDir": "../out-test",
     "sourceMap": true,
     "removeComments": true,
-    "paths": {
-      "common/*": [
-        "../../../src/common/*"
-      ],
-      "browser/*": [
-        "../../../src/browser/*"
-      ],
-      "*": [
-        "./*"
-      ]
-    },
     "strict": true,
     "types": [
       "../../../node_modules/@types/node"

addons/addon-progress/tsconfig.json

@@ -2,7 +2,11 @@
   "files": [],
   "include": [],
   "references": [
-    { "path": "./src" },
-    { "path": "./test" }
+    {
+      "path": "./src"
+    },
+    {
+      "path": "./test"
+    }
   ]
 }

addons/addon-search/src/DecorationManager.ts

@@ -5,7 +5,7 @@
 
 import type { Terminal, IDisposable, IDecoration } from '@xterm/xterm';
 import type { ISearchDecorationOptions } from '@xterm/addon-search';
-import { dispose, Disposable, toDisposable } from 'common/Lifecycle';
+import { dispose, Disposable, toDisposable } from '../../../src/common/Lifecycle';
 import type { ISearchResult } from './SearchEngine';
 
 /**

addons/addon-search/src/SearchAddon.ts

@@ -5,9 +5,9 @@
 
 import type { Terminal, IDisposable, ITerminalAddon } from '@xterm/xterm';
 import type { SearchAddon as ISearchApi, ISearchOptions, ISearchAddonOptions, ISearchResultChangeEvent, ISearchDecorationOptions } from '@xterm/addon-search';
-import { Emitter, type IEvent } from 'common/Event';
-import { Disposable, MutableDisposable, toDisposable } from 'common/Lifecycle';
-import { disposableTimeout } from 'common/Async';
+import { Emitter, type IEvent } from '../../../src/common/Event';
+import { Disposable, MutableDisposable, toDisposable } from '../../../src/common/Lifecycle';
+import { disposableTimeout } from '../../../src/common/Async';
 import { SearchLineCache } from './SearchLineCache';
 import { SearchState } from './SearchState';
 import { SearchEngine, type ISearchResult } from './SearchEngine';

addons/addon-search/src/SearchEngine.test.ts

@@ -5,9 +5,9 @@
 import { assert } from 'chai';
 import { SearchEngine } from './SearchEngine';
 import { SearchLineCache } from './SearchLineCache';
-import { Terminal } from 'browser/public/Terminal';
+import { Terminal } from '../../../src/browser/public/Terminal';
 import type { ISearchOptions } from '@xterm/addon-search';
-import { DisposableStore } from 'common/Lifecycle';
+import { DisposableStore } from '../../../src/common/Lifecycle';
 
 function writeP(terminal: Terminal, data: string): Promise<void> {
   return new Promise(r => terminal.write(data, r));

addons/addon-search/src/SearchLineCache.test.ts

@@ -4,8 +4,8 @@
  */
 import { assert } from 'chai';
 import { SearchLineCache, LineCacheEntry } from './SearchLineCache';
-import { Terminal } from 'browser/public/Terminal';
-import { timeout } from 'common/Async';
+import { Terminal } from '../../../src/browser/public/Terminal';
+import { timeout } from '../../../src/common/Async';
 
 function writeP(terminal: Terminal, data: string): Promise<void> {
   return new Promise(r => terminal.write(data, r));

addons/addon-search/src/SearchLineCache.ts

@@ -4,8 +4,8 @@
  */
 
 import type { Terminal } from '@xterm/xterm';
-import { combinedDisposable, Disposable, MutableDisposable, toDisposable } from 'common/Lifecycle';
-import { disposableTimeout } from 'common/Async';
+import { combinedDisposable, Disposable, MutableDisposable, toDisposable } from '../../../src/common/Lifecycle';
+import { disposableTimeout } from '../../../src/common/Async';
 
 export type LineCacheEntry = [
   /**

addons/addon-search/src/SearchResultTracker.ts

@@ -5,8 +5,8 @@
 
 import type { ISearchResultChangeEvent } from '@xterm/addon-search';
 import type { IDisposable } from '@xterm/xterm';
-import { Emitter, type IEvent } from 'common/Event';
-import { Disposable } from 'common/Lifecycle';
+import { Emitter, type IEvent } from '../../../src/common/Event';
+import { Disposable } from '../../../src/common/Lifecycle';
 import type { ISearchResult } from './SearchEngine';
 
 /**

addons/addon-search/src/tsconfig.json

@@ -4,7 +4,7 @@
     "target": "es2021",
     "lib": [
       "dom",
-      "es2021",
+      "es2021"
     ],
     "rootDir": ".",
     "outDir": "../out",
@@ -13,22 +13,12 @@
     "strict": true,
     "types": [
       "../../../node_modules/@types/mocha"
-    ],
-    "paths": {
-      "common/*": [
-        "../../../src/common/*"
-      ],
-      "browser/*": [
-        "../../../src/browser/*"
-      ],
-      "@xterm/addon-search" : [
-        "../typings/addon-search.d.ts"
-      ]
-    }
+    ]
   },
   "include": [
     "./**/*",
-    "../../../typings/xterm.d.ts"
+    "../../../typings/xterm.d.ts",
+    "../typings/addon-search.d.ts"
   ],
   "references": [
     {

addons/addon-search/test/tsconfig.json

@@ -3,23 +3,12 @@
     "module": "commonjs",
     "target": "ESNext",
     "lib": [
-      "es2021",
+      "es2021"
     ],
     "rootDir": ".",
     "outDir": "../out-test",
     "sourceMap": true,
     "removeComments": true,
-    "paths": {
-      "common/*": [
-        "../../../src/common/*"
-      ],
-      "browser/*": [
-        "../../../src/browser/*"
-      ],
-      "*": [
-        "./*"
-      ]
-    },
     "strict": true,
     "types": [
       "../../../node_modules/@types/node"

addons/addon-search/tsconfig.json

@@ -2,7 +2,11 @@
   "files": [],
   "include": [],
   "references": [
-    { "path": "./src" },
-    { "path": "./test" }
+    {
+      "path": "./src"
+    },
+    {
+      "path": "./test"
+    }
   ]
 }

addons/addon-serialize/benchmark/SerializeAddon.benchmark.ts

@@ -6,9 +6,9 @@
 import { perfContext, before, ThroughputRuntimeCase } from 'xterm-benchmark';
 
 import { spawn } from 'node-pty';
-import { Utf8ToUtf32, stringFromCodePoint } from 'common/input/TextDecoder';
-import { Terminal } from 'browser/public/Terminal';
-import { SerializeAddon } from 'SerializeAddon';
+import { Utf8ToUtf32, stringFromCodePoint } from '../../../src/common/input/TextDecoder';
+import { Terminal } from '../../../src/browser/public/Terminal';
+import { SerializeAddon } from '../src/SerializeAddon';
 
 class TestTerminal extends Terminal {
   public writeSync(data: string): void {

addons/addon-serialize/benchmark/tsconfig.json

@@ -6,24 +6,28 @@
     ],
     "rootDir": "..",
     "outDir": "../out-benchmark",
-    "types": ["../../../node_modules/@types/node"],
+    "types": [
+      "../../../node_modules/@types/node"
+    ],
     "moduleResolution": "node",
     "strict": false,
     "target": "es2021",
-    "module": "commonjs",
-    "paths": {
-      "common/*": ["../../../src/common/*"],
-      "browser/*": ["../../../src/browser/*"],
-      "SerializeAddon": ["../src/SerializeAddon"],
-      "@xterm/addon-serialize": [
-        "../typings/addon-serialize.d.ts"
-      ]
-    }
+    "module": "commonjs"
   },
-  "include": ["../**/*", "../../../typings/xterm.d.ts"],
-  "exclude": ["../../../**/*test.ts", "../../**/*api.ts"],
+  "include": [
+    "../**/*",
+    "../../../typings/xterm.d.ts"
+  ],
+  "exclude": [
+    "../../../**/*test.ts",
+    "../../**/*api.ts"
+  ],
   "references": [
-    { "path": "../../../src/common" },
-    { "path": "../../../src/browser" }
+    {
+      "path": "../../../src/common"
+    },
+    {
+      "path": "../../../src/browser"
+    }
   ]
 }

addons/addon-serialize/src/SerializeAddon.test.ts

@@ -6,10 +6,10 @@
 import jsdom = require('jsdom');
 import { assert } from 'chai';
 import { SerializeAddon } from './SerializeAddon';
-import { Terminal } from 'browser/public/Terminal';
-import { SelectionModel } from 'browser/selection/SelectionModel';
-import { IBufferService } from 'common/services/Services';
-import { ThemeService } from 'browser/services/ThemeService';
+import { Terminal } from '../../../src/browser/public/Terminal';
+import { SelectionModel } from '../../../src/browser/selection/SelectionModel';
+import { IBufferService } from '../../../src/common/services/Services';
+import { ThemeService } from '../../../src/browser/services/ThemeService';
 
 function sgr(...seq: string[]): string {
   return `\x1b[${seq.join(';')}m`;

addons/addon-serialize/src/SerializeAddon.ts

@@ -7,9 +7,9 @@
 
 import type { IBuffer, IBufferCell, IBufferRange, ITerminalAddon, Terminal } from '@xterm/xterm';
 import type { IHTMLSerializeOptions, SerializeAddon as ISerializeApi, ISerializeOptions, ISerializeRange } from '@xterm/addon-serialize';
-import { IAttributeData, IColor } from 'common/Types';
-import { DEFAULT_ANSI_COLORS } from 'browser/Types';
-import { UnderlineStyle } from 'common/buffer/Constants';
+import { IAttributeData, IColor } from '../../../src/common/Types';
+import { DEFAULT_ANSI_COLORS } from '../../../src/browser/Types';
+import { UnderlineStyle } from '../../../src/common/buffer/Constants';
 
 function constrain(value: number, low: number, high: number): number {
   return Math.max(low, Math.min(value, high));

addons/addon-serialize/src/tsconfig.json

@@ -10,17 +10,6 @@
     "outDir": "../out",
     "sourceMap": true,
     "removeComments": true,
-    "paths": {
-      "common/*": [
-        "../../../src/common/*"
-      ],
-      "browser/*": [
-        "../../../src/browser/*"
-      ],
-      "@xterm/addon-serialize": [
-        "../typings/addon-serialize.d.ts"
-      ]
-    },
     "strict": true,
     "skipLibCheck": true,
     "types": [
@@ -29,7 +18,8 @@
   },
   "include": [
     "./**/*",
-    "../../../typings/xterm.d.ts"
+    "../../../typings/xterm.d.ts",
+    "../typings/addon-serialize.d.ts"
   ],
   "references": [
     {

addons/addon-serialize/test/SerializeAddon.test.ts

@@ -49,7 +49,14 @@ test.describe('SerializeAddon', () => {
         for (let i = 0; i < buffer.length; i++) {
           // Do this intentionally to get content of underlining source
           const bufferLine = buffer.getLine(i)._line;
-          lines.push(JSON.stringify(bufferLine));
+          lines.push(JSON.stringify(bufferLine, (key, value) => {
+            // BufferLine caches are internal/transient and can legitimately differ
+            // across equivalent terminal states.
+            if (key === '_stringCache' || key === '_stringCacheEntryRef') {
+              return undefined;
+            }
+            return value;
+          }));
         }
         return {
           x: buffer.cursorX,

addons/addon-serialize/test/tsconfig.json

@@ -3,20 +3,12 @@
     "module": "commonjs",
     "target": "ESNext",
     "lib": [
-      "es2021",
+      "es2021"
     ],
     "rootDir": ".",
     "outDir": "../out-test",
     "sourceMap": true,
     "removeComments": true,
-    "paths": {
-      "common/*": [
-        "../../../src/common/*"
-      ],
-      "browser/*": [
-        "../../../src/browser/*"
-      ]
-    },
     "strict": true,
     "types": [
       "../../../node_modules/@types/node"

addons/addon-serialize/tsconfig.json

@@ -2,8 +2,14 @@
   "files": [],
   "include": [],
   "references": [
-    { "path": "./src" },
-    { "path": "./test" },
-    { "path": "./benchmark" }
+    {
+      "path": "./src"
+    },
+    {
+      "path": "./test"
+    },
+    {
+      "path": "./benchmark"
+    }
   ]
 }

addons/addon-unicode-graphemes/benchmark/UnicodeGraphemeAddon.benchmark.ts

@@ -6,9 +6,9 @@
 import { perfContext, before, ThroughputRuntimeCase } from 'xterm-benchmark';
 
 import { spawn } from 'node-pty';
-import { Utf8ToUtf32, stringFromCodePoint } from 'common/input/TextDecoder';
-import { CoreBrowserTerminal } from 'browser/CoreBrowserTerminal';
-import { UnicodeGraphemeProvider } from 'UnicodeGraphemeProvider';
+import { Utf8ToUtf32, stringFromCodePoint } from '../../../src/common/input/TextDecoder';
+import { CoreBrowserTerminal } from '../../../src/browser/CoreBrowserTerminal';
+import { UnicodeGraphemeProvider } from '../src/UnicodeGraphemeProvider';
 
 
 function fakedAddonLoad(terminal: any): void {

addons/addon-unicode-graphemes/benchmark/tsconfig.json

@@ -1,26 +1,33 @@
 {
   "compilerOptions": {
-    "lib": ["dom", "es6"],
+    "lib": [
+      "dom",
+      "es6"
+    ],
     "rootDir": "..",
     "outDir": "../out-benchmark",
-    "types": ["../../../node_modules/@types/node"],
+    "types": [
+      "../../../node_modules/@types/node"
+    ],
     "moduleResolution": "node",
     "strict": false,
     "target": "es2015",
-    "module": "commonjs",
-    "paths": {
-      "common/*": ["../../../src/common/*"],
-      "browser/*": ["../../../src/browser/*"],
-      "UnicodeGraphemeProvider": ["../src/UnicodeGraphemeProvider"],
-      "@xterm/addon-unicode-graphemes": [
-        "../typings/addon-unicode-graphemes.d.ts"
-      ]
-    }
+    "module": "commonjs"
   },
-  "include": ["../**/*", "../../../typings/xterm.d.ts"],
-  "exclude": ["../../../**/*test.ts", "../../**/*api.ts"],
+  "include": [
+    "../**/*",
+    "../../../typings/xterm.d.ts"
+  ],
+  "exclude": [
+    "../../../**/*test.ts",
+    "../../**/*api.ts"
+  ],
   "references": [
-    { "path": "../../../src/common" },
-    { "path": "../../../src/browser" }
+    {
+      "path": "../../../src/common"
+    },
+    {
+      "path": "../../../src/browser"
+    }
   ]
 }

addons/addon-unicode-graphemes/src/UnicodeGraphemeProvider.ts

@@ -4,8 +4,8 @@
  */
 
 import { IUnicodeVersionProvider } from '@xterm/xterm';
-import { UnicodeCharProperties, UnicodeCharWidth } from 'common/services/Services';
-import { UnicodeService } from 'common/services/UnicodeService';
+import { UnicodeCharProperties, UnicodeCharWidth } from '../../../src/common/services/Services';
+import { UnicodeService } from '../../../src/common/services/UnicodeService';
 import * as UC from './third-party/UnicodeProperties';
 
 export class UnicodeGraphemeProvider implements IUnicodeVersionProvider {

addons/addon-unicode-graphemes/src/tsconfig.json

@@ -11,21 +11,14 @@
     "sourceMap": true,
     "removeComments": true,
     "strict": true,
-    "paths": {
-      "common/*": [
-        "../../../src/common/*"
-      ],
-      "@xterm/addon-unicode-graphemes": [
-        "../typings/addon-unicode-graphemes.d.ts"
-      ]
-    },
     "types": [
       "../../../node_modules/@types/mocha"
     ]
   },
   "include": [
     "./**/*",
-    "../../../typings/xterm.d.ts"
+    "../../../typings/xterm.d.ts",
+    "../typings/addon-unicode-graphemes.d.ts"
   ],
   "references": [
     {

addons/addon-unicode-graphemes/test/tsconfig.json

@@ -3,20 +3,12 @@
     "module": "commonjs",
     "target": "ESNext",
     "lib": [
-      "es2021",
+      "es2021"
     ],
     "rootDir": ".",
     "outDir": "../out-test",
     "sourceMap": true,
     "removeComments": true,
-    "paths": {
-      "common/*": [
-        "../../../src/common/*"
-      ],
-      "browser/*": [
-        "../../../src/browser/*"
-      ]
-    },
     "strict": true,
     "types": [
       "../../../node_modules/@types/node"

addons/addon-unicode-graphemes/tsconfig.json

@@ -2,8 +2,14 @@
   "files": [],
   "include": [],
   "references": [
-    { "path": "./src" },
-    { "path": "./test" },
-    { "path": "./benchmark" }
+    {
+      "path": "./src"
+    },
+    {
+      "path": "./test"
+    },
+    {
+      "path": "./benchmark"
+    }
   ]
 }

addons/addon-unicode11/src/UnicodeV11.ts

@@ -4,8 +4,8 @@
  */
 
 import { IUnicodeVersionProvider } from '@xterm/xterm';
-import { UnicodeCharProperties, UnicodeCharWidth } from 'common/services/Services';
-import { UnicodeService } from 'common/services/UnicodeService';
+import { UnicodeCharProperties, UnicodeCharWidth } from '../../../src/common/services/Services';
+import { UnicodeService } from '../../../src/common/services/UnicodeService';
 
 const BMP_COMBINING = [
   [0x0300, 0x036F], [0x0483, 0x0489], [0x0591, 0x05BD],

addons/addon-unicode11/src/tsconfig.json

@@ -11,24 +11,14 @@
     "sourceMap": true,
     "removeComments": true,
     "strict": true,
-    "paths": {
-      "common/*": [
-        "../../../src/common/*"
-      ],
-      "@xterm/addon-unicode11": [
-        "../typings/addon-unicode11.d.ts"
-      ],
-      "*": [
-        "./*"
-      ]
-    },
     "types": [
       "../../../node_modules/@types/mocha"
     ]
   },
   "include": [
     "./**/*",
-    "../../../typings/xterm.d.ts"
+    "../../../typings/xterm.d.ts",
+    "../typings/addon-unicode11.d.ts"
   ],
   "references": [
     {

addons/addon-unicode11/test/tsconfig.json

@@ -3,23 +3,12 @@
     "module": "commonjs",
     "target": "ESNext",
     "lib": [
-      "es2021",
+      "es2021"
     ],
     "rootDir": ".",
     "outDir": "../out-test",
     "sourceMap": true,
     "removeComments": true,
-    "paths": {
-      "common/*": [
-        "../../../src/common/*"
-      ],
-      "browser/*": [
-        "../../../src/browser/*"
-      ],
-      "*": [
-        "./*"
-      ]
-    },
     "strict": true,
     "types": [
       "../../../node_modules/@types/node"

addons/addon-unicode11/tsconfig.json

@@ -2,7 +2,11 @@
   "files": [],
   "include": [],
   "references": [
-    { "path": "./src" },
-    { "path": "./test" }
+    {
+      "path": "./src"
+    },
+    {
+      "path": "./test"
+    }
   ]
 }

addons/addon-web-fonts/src/tsconfig.json

@@ -14,15 +14,11 @@
     "strict": true,
     "types": [
       "../../../node_modules/@types/mocha"
-    ],
-    "paths": {
-      "@xterm/addon-web-fonts": [
-        "../typings/addon-web-fonts.d.ts"
-      ]
-    }
+    ]
   },
   "include": [
     "./**/*",
-    "../../../typings/xterm.d.ts"
+    "../../../typings/xterm.d.ts",
+    "../typings/addon-web-fonts.d.ts"
   ]
 }

addons/addon-web-fonts/test/WebFontsAddon.test.ts

@@ -33,16 +33,16 @@ test.describe('WebFontsAddon', () => {
   test.describe('font loading at runtime', () => {
     test('loadFonts (JS)', async () => {
       await ctx.page.evaluate(`
-        const ff1 = new FontFace('Kongtext', "url(/kongtext.regular.ttf) format('truetype')");
-        const ff2 = new FontFace('BPdots', "url(/bpdots.regular.otf) format('opentype')");
+        const ff1 = new FontFace('Kongtext', "url(/fonts/kongtext.regular.ttf) format('truetype')");
+        const ff2 = new FontFace('BPdots', "url(/fonts/bpdots.regular.otf) format('opentype')");
         loadFonts([ff1, ff2]);
       `);
       deepStrictEqual(await getDocumentFonts(), [{ family: 'Kongtext', status: 'loaded' }, { family: 'BPdots', status: 'loaded' }]);
     });
     test('loadFonts (CSS, unquoted)', async () => {
       await ctx.page.evaluate(`
-        document.styleSheets[0].insertRule("@font-face {font-family: Kongtext; src: url(/kongtext.regular.ttf) format('truetype')}", 0);
-        document.styleSheets[0].insertRule("@font-face {font-family: BPdots; src: url(/bpdots.regular.otf) format('opentype')}", 1);
+        document.styleSheets[0].insertRule("@font-face {font-family: Kongtext; src: url(/fonts/kongtext.regular.ttf) format('truetype')}", 0);
+        document.styleSheets[0].insertRule("@font-face {font-family: BPdots; src: url(/fonts/bpdots.regular.otf) format('opentype')}", 1);
         loadFonts(['Kongtext', 'BPdots']);
       `);
       deepStrictEqual(await getDocumentFonts(), [{ family: 'Kongtext', status: 'loaded' }, { family: 'BPdots', status: 'loaded' }]);
@@ -50,8 +50,8 @@ test.describe('WebFontsAddon', () => {
     test('loadFonts (CSS, quoted)', async ({ browser }) => {
       // NOTE: firefox preserves family quotes from CSS rules in fontface, all other browsers unquote them
       await ctx.page.evaluate(`
-        document.styleSheets[0].insertRule("@font-face {font-family: 'Kongtext'; src: url(/kongtext.regular.ttf) format('truetype')}", 0);
-        document.styleSheets[0].insertRule("@font-face {font-family: 'BPdots'; src: url(/bpdots.regular.otf) format('opentype')}", 1);
+        document.styleSheets[0].insertRule("@font-face {font-family: 'Kongtext'; src: url(/fonts/kongtext.regular.ttf) format('truetype')}", 0);
+        document.styleSheets[0].insertRule("@font-face {font-family: 'BPdots'; src: url(/fonts/bpdots.regular.otf) format('opentype')}", 1);
         loadFonts(['Kongtext', 'BPdots']);
       `);
       if (browser.browserType().name() === 'firefox') {
@@ -63,8 +63,8 @@ test.describe('WebFontsAddon', () => {
     test('FontFace hashing', async () => {
       // multiple calls of `loadFonts` with the same objects shall not bloat document.fonts
       await ctx.page.evaluate(`
-        const ff1 = new FontFace('Kongtext', "url(/kongtext.regular.ttf) format('truetype')");
-        const ff2 = new FontFace('BPdots', "url(/bpdots.regular.otf) format('opentype')");
+        const ff1 = new FontFace('Kongtext', "url(/fonts/kongtext.regular.ttf) format('truetype')");
+        const ff2 = new FontFace('BPdots', "url(/fonts/bpdots.regular.otf) format('opentype')");
         loadFonts([ff1, ff2]);
         loadFonts([ff1, ff2]);
         loadFonts([ff1, ff2]).then(() => loadFonts([ff1, ff2]));
@@ -76,7 +76,7 @@ test.describe('WebFontsAddon', () => {
       // to make this test work, we exclude the default measurement char W (x57) by restricting unicode-range
       // now the browser will postpone font loading until codepoint is hit --> wrong glyph metrics on first usage
       const data = await ctx.page.evaluate(`
-          document.styleSheets[0].insertRule("@font-face {font-family: Kongtext; src: url(/kongtext.regular.ttf) format('truetype'); unicode-range: U+00A0-00FF}", 0);
+          document.styleSheets[0].insertRule("@font-face {font-family: Kongtext; src: url(/fonts/kongtext.regular.ttf) format('truetype'); unicode-range: U+00A0-00FF}", 0);
         `);
       deepStrictEqual(await getDocumentFonts(), [{ family: 'Kongtext', status: 'unloaded' }]);
 
@@ -88,7 +88,11 @@ test.describe('WebFontsAddon', () => {
 
       // safari loads the font, firefox & chrome dont
       if (browser.browserType().name() === 'webkit') {
-        deepStrictEqual(await getDocumentFonts(), [{ family: 'Kongtext', status: 'loaded' }]);
+        try {
+          deepStrictEqual(await getDocumentFonts(), [{ family: 'Kongtext', status: 'loading' }]);
+        } catch (e) {
+          deepStrictEqual(await getDocumentFonts(), [{ family: 'Kongtext', status: 'loaded' }]);
+        }
       } else {
         deepStrictEqual(await getDocumentFonts(), [{ family: 'Kongtext', status: 'unloaded' }]);
       }
@@ -103,7 +107,10 @@ test.describe('WebFontsAddon', () => {
           window.helperTerm.open(term.element);
         `);
       await timeout(100);
-      deepStrictEqual(await getDocumentFonts(), [{ family: 'Kongtext', status: 'loaded' }]);
+      if (browser.browserType().name() !== 'webkit') {
+        // safari sometimes reports 'unloadeed'?
+        deepStrictEqual(await getDocumentFonts(), [{ family: 'Kongtext', status: 'loaded' }]);
+      }
 
       // cleanup this messy test case
       await ctx.page.evaluate(`

addons/addon-web-fonts/test/tsconfig.json

@@ -3,24 +3,12 @@
     "module": "commonjs",
     "target": "es2021",
     "lib": [
-      "es2021",
+      "es2021"
     ],
-    // "downlevelIteration": true,
     "rootDir": ".",
     "outDir": "../out-test",
     "sourceMap": true,
     "removeComments": true,
-    "paths": {
-      "common/*": [
-        "../../../src/common/*"
-      ],
-      "browser/*": [
-        "../../../src/browser/*"
-      ],
-      "*": [
-        "./*"
-      ]
-    },
     "strict": true,
     "types": [
       "../../../node_modules/@types/node"

addons/addon-web-fonts/tsconfig.json

@@ -2,7 +2,11 @@
   "files": [],
   "include": [],
   "references": [
-    { "path": "./src" },
-    { "path": "./test" }
+    {
+      "path": "./src"
+    },
+    {
+      "path": "./test"
+    }
   ]
 }

addons/addon-web-links/src/tsconfig.json

@@ -13,15 +13,11 @@
     "strict": true,
     "types": [
       "../../../node_modules/@types/mocha"
-    ],
-    "paths": {
-      "@xterm/addon-web-links": [
-        "../typings/addon-web-links.d.ts"
-      ]
-    }
+    ]
   },
   "include": [
     "./**/*",
-    "../../../typings/xterm.d.ts"
+    "../../../typings/xterm.d.ts",
+    "../typings/addon-web-links.d.ts"
   ]
 }

addons/addon-web-links/test/tsconfig.json

@@ -3,24 +3,12 @@
     "module": "commonjs",
     "target": "es2021",
     "lib": [
-      "es2021",
+      "es2021"
     ],
-    // "downlevelIteration": true,
     "rootDir": ".",
     "outDir": "../out-test",
     "sourceMap": true,
     "removeComments": true,
-    "paths": {
-      "common/*": [
-        "../../../src/common/*"
-      ],
-      "browser/*": [
-        "../../../src/browser/*"
-      ],
-      "*": [
-        "./*"
-      ]
-    },
     "strict": true,
     "types": [
       "../../../node_modules/@types/node"

addons/addon-web-links/tsconfig.json

@@ -2,7 +2,11 @@
   "files": [],
   "include": [],
   "references": [
-    { "path": "./src" },
-    { "path": "./test" }
+    {
+      "path": "./src"
+    },
+    {
+      "path": "./test"
+    }
   ]
 }

addons/addon-webgl/src/CellColorResolver.ts

@@ -1,12 +1,12 @@
-import { ISelectionRenderModel } from 'browser/renderer/shared/Types';
-import { ICoreBrowserService, IThemeService } from 'browser/services/Services';
-import { ReadonlyColorSet } from 'browser/Types';
-import { Attributes, BgFlags, ExtFlags, FgFlags, NULL_CELL_CODE, UnderlineStyle } from 'common/buffer/Constants';
-import { IDecorationService, IOptionsService } from 'common/services/Services';
-import { ICellData } from 'common/Types';
+import { ISelectionRenderModel } from '../../../src/browser/renderer/shared/Types';
+import { ICoreBrowserService, IThemeService } from '../../../src/browser/services/Services';
+import { ReadonlyColorSet } from '../../../src/browser/Types';
+import { Attributes, BgFlags, ExtFlags, FgFlags, NULL_CELL_CODE, UnderlineStyle } from '../../../src/common/buffer/Constants';
+import { IDecorationService, IOptionsService } from '../../../src/common/services/Services';
+import { ICellData } from '../../../src/common/Types';
 import { Terminal } from '@xterm/xterm';
-import { rgba } from 'common/Color';
-import { treatGlyphAsBackgroundColor } from 'browser/renderer/shared/RendererUtils';
+import { rgba } from '../../../src/common/Color';
+import { treatGlyphAsBackgroundColor } from '../../../src/browser/renderer/shared/RendererUtils';
 import { blockPatternCodepoints } from './customGlyphs/CustomGlyphDefinitions';
 
 // Work variables to avoid garbage collection

addons/addon-webgl/src/CharAtlasCache.ts

@@ -5,10 +5,10 @@
 
 import { TextureAtlas } from './TextureAtlas';
 import { ITerminalOptions, Terminal } from '@xterm/xterm';
-import { ITerminal, ReadonlyColorSet } from 'browser/Types';
+import { ITerminal, ReadonlyColorSet } from '../../../src/browser/Types';
 import { ICharAtlasConfig, ITextureAtlas } from './Types';
 import { generateConfig, configEquals } from './CharAtlasUtils';
-import type { ILogService } from 'common/services/Services';
+import type { ILogService } from '../../../src/common/services/Services';
 
 interface ITextureAtlasCacheEntry {
   atlas: ITextureAtlas;

addons/addon-webgl/src/CharAtlasUtils.test.ts

@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) 2026 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { assert } from 'chai';
+import { configEquals } from './CharAtlasUtils';
+import { ICharAtlasConfig } from './Types';
+import { NULL_COLOR } from '../../../src/common/Color';
+import { IColor } from '../../../src/common/Types';
+
+function createTestConfig(overrides: Partial<ICharAtlasConfig> = {}): ICharAtlasConfig {
+  const color: IColor = { css: '#ffffff', rgba: 0xffffffff };
+  const contrastCache = {
+    clear: () => {},
+    setCss: () => {},
+    getCss: () => undefined,
+    setColor: () => {},
+    getColor: () => undefined
+  };
+  const colors = {
+    foreground: color,
+    background: color,
+    cursor: NULL_COLOR,
+    cursorAccent: NULL_COLOR,
+    selectionForeground: undefined,
+    selectionBackgroundTransparent: NULL_COLOR,
+    selectionBackgroundOpaque: NULL_COLOR,
+    selectionInactiveBackgroundTransparent: NULL_COLOR,
+    selectionInactiveBackgroundOpaque: NULL_COLOR,
+    overviewRulerBorder: NULL_COLOR,
+    scrollbarSliderBackground: NULL_COLOR,
+    scrollbarSliderHoverBackground: NULL_COLOR,
+    scrollbarSliderActiveBackground: NULL_COLOR,
+    ansi: new Array(256).fill(color),
+    contrastCache,
+    halfContrastCache: contrastCache
+  };
+  return {
+    customGlyphs: true,
+    devicePixelRatio: 1,
+    deviceMaxTextureSize: 4096,
+    letterSpacing: 0,
+    lineHeight: 1,
+    fontSize: 15,
+    fontFamily: 'monospace',
+    fontWeight: 'normal',
+    fontWeightBold: 'bold',
+    deviceCellWidth: 10,
+    deviceCellHeight: 20,
+    deviceCharWidth: 8,
+    deviceCharHeight: 16,
+    allowTransparency: false,
+    drawBoldTextInBrightColors: true,
+    minimumContrastRatio: 1,
+    colors,
+    ...overrides
+  };
+}
+
+describe('CharAtlasUtils', () => {
+  describe('configEquals', () => {
+    it('should return true for identical configs', () => {
+      const a = createTestConfig();
+      const b = createTestConfig();
+      assert.ok(configEquals(a, b));
+    });
+
+    it('should return false when deviceMaxTextureSize differs', () => {
+      const a = createTestConfig();
+      const b = createTestConfig({ deviceMaxTextureSize: 8192 });
+      assert.ok(!configEquals(a, b));
+    });
+
+    it('should return false when deviceCellWidth differs', () => {
+      const a = createTestConfig();
+      const b = createTestConfig({ deviceCellWidth: 11 });
+      assert.ok(!configEquals(a, b));
+    });
+
+    it('should return false when deviceCellHeight differs', () => {
+      const a = createTestConfig();
+      const b = createTestConfig({ deviceCellHeight: 21 });
+      assert.ok(!configEquals(a, b));
+    });
+  });
+});

addons/addon-webgl/src/CharAtlasUtils.ts

@@ -4,10 +4,10 @@
  */
 
 import { ICharAtlasConfig } from './Types';
-import { Attributes } from 'common/buffer/Constants';
+import { Attributes } from '../../../src/common/buffer/Constants';
 import { ITerminalOptions } from '@xterm/xterm';
-import { IColorSet, ReadonlyColorSet } from 'browser/Types';
-import { NULL_COLOR } from 'common/Color';
+import { IColorSet, ReadonlyColorSet } from '../../../src/browser/Types';
+import { NULL_COLOR } from '../../../src/common/Color';
 
 export function generateConfig(deviceCellWidth: number, deviceCellHeight: number, deviceCharWidth: number, deviceCharHeight: number, options: Required<ITerminalOptions>, colors: ReadonlyColorSet, devicePixelRatio: number, deviceMaxTextureSize: number, customGlyphs: boolean = true): ICharAtlasConfig {
   // null out some fields that don't matter
@@ -59,6 +59,7 @@ export function configEquals(a: ICharAtlasConfig, b: ICharAtlasConfig): boolean
     }
   }
   return a.devicePixelRatio === b.devicePixelRatio &&
+      a.deviceMaxTextureSize === b.deviceMaxTextureSize &&
       a.customGlyphs === b.customGlyphs &&
       a.lineHeight === b.lineHeight &&
       a.letterSpacing === b.letterSpacing &&
@@ -67,6 +68,8 @@ export function configEquals(a: ICharAtlasConfig, b: ICharAtlasConfig): boolean
       a.fontWeight === b.fontWeight &&
       a.fontWeightBold === b.fontWeightBold &&
       a.allowTransparency === b.allowTransparency &&
+      a.deviceCellWidth === b.deviceCellWidth &&
+      a.deviceCellHeight === b.deviceCellHeight &&
       a.deviceCharWidth === b.deviceCharWidth &&
       a.deviceCharHeight === b.deviceCharHeight &&
       a.drawBoldTextInBrightColors === b.drawBoldTextInBrightColors &&

addons/addon-webgl/src/Constants.ts

@@ -3,7 +3,7 @@
  * @license MIT
  */
 
-import { isFirefox, isLegacyEdge } from 'common/Platform';
+import { isFirefox, isLegacyEdge } from '../../../src/common/Platform';
 
 export const DIM_OPACITY = 0.5;
 // The text baseline is set conditionally by browser. Using 'ideographic' for Firefox or Legacy Edge

addons/addon-webgl/src/CursorBlinkStateManager.ts

@@ -3,8 +3,8 @@
  * @license MIT
  */
 
-import { RendererConstants } from 'browser/renderer/shared/Constants';
-import { ICoreBrowserService } from 'browser/services/Services';
+import { RendererConstants } from '../../../src/browser/renderer/shared/Constants';
+import { ICoreBrowserService } from '../../../src/browser/services/Services';
 
 const enum Constants {
   /**

addons/addon-webgl/src/DevicePixelObserver.ts

@@ -3,7 +3,7 @@
  * @license MIT
  */
 
-import { toDisposable, IDisposable } from 'common/Lifecycle';
+import { toDisposable, IDisposable } from '../../../src/common/Lifecycle';
 
 export function observeDevicePixelDimensions(element: HTMLElement, parentWindow: Window & typeof globalThis, callback: (deviceWidth: number, deviceHeight: number) => void): IDisposable {
   // Observe any resizes to the element and extract the actual pixel size of the element if the

addons/addon-webgl/src/GlyphRenderer.ts

@@ -3,14 +3,14 @@
  * @license MIT
  */
 import { TextureAtlas } from './TextureAtlas';
-import { IRenderDimensions } from 'browser/renderer/shared/Types';
-import { NULL_CELL_CODE } from 'common/buffer/Constants';
-import { Disposable, toDisposable } from 'common/Lifecycle';
+import { IRenderDimensions } from '../../../src/browser/renderer/shared/Types';
+import { NULL_CELL_CODE } from '../../../src/common/buffer/Constants';
+import { Disposable, toDisposable } from '../../../src/common/Lifecycle';
 import { Terminal } from '@xterm/xterm';
 import { IRenderModel, IWebGL2RenderingContext, IWebGLVertexArrayObject, type IRasterizedGlyph, type ITextureAtlas } from './Types';
 import { createProgram, GLTexture, PROJECTION_MATRIX } from './WebglUtils';
-import type { IOptionsService } from 'common/services/Services';
-import { allowRescaling, throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
+import type { ILogService, IOptionsService } from '../../../src/common/services/Services';
+import { allowRescaling, throwIfFalsy } from '../../../src/browser/renderer/shared/RendererUtils';
 
 interface IVertices {
   attributes: Float32Array;
@@ -78,9 +78,11 @@ void main() {
 }`);
 }
 
-const INDICES_PER_CELL = 11;
-const BYTES_PER_CELL = INDICES_PER_CELL * Float32Array.BYTES_PER_ELEMENT;
-const CELL_POSITION_INDICES = 2;
+const enum Constants {
+  INDICES_PER_CELL = 11,
+  BYTES_PER_CELL = INDICES_PER_CELL * 4/* Float32Array.BYTES_PER_ELEMENT */,
+  CELL_POSITION_INDICES = 2
+}
 
 // Work variables to avoid garbage collection
 let $i = 0;
@@ -112,7 +114,8 @@ export class GlyphRenderer extends Disposable {
     private readonly _terminal: Terminal,
     private readonly _gl: IWebGL2RenderingContext,
     private _dimensions: IRenderDimensions,
-    private readonly _optionsService: IOptionsService
+    private readonly _optionsService: IOptionsService,
+    private readonly _logService: ILogService
   ) {
     super();
 
@@ -125,7 +128,7 @@ export class GlyphRenderer extends Disposable {
       TextureAtlas.maxTextureSize = throwIfFalsy(gl.getParameter(gl.MAX_TEXTURE_SIZE) as number | null);
     }
 
-    this._program = throwIfFalsy(createProgram(gl, vertexShaderSource, createFragmentShaderSource(TextureAtlas.maxAtlasPages)));
+    this._program = throwIfFalsy(createProgram(gl, vertexShaderSource, createFragmentShaderSource(TextureAtlas.maxAtlasPages), this._logService));
     this._register(toDisposable(() => gl.deleteProgram(this._program)));
 
     // Uniform locations
@@ -134,8 +137,9 @@ export class GlyphRenderer extends Disposable {
     this._textureLocation = throwIfFalsy(gl.getUniformLocation(this._program, 'u_texture'));
 
     // Create and set the vertex array object
-    this._vertexArrayObject = gl.createVertexArray();
-    gl.bindVertexArray(this._vertexArrayObject);
+    const vertexArrayObject = this._vertexArrayObject = gl.createVertexArray();
+    this._register(toDisposable(() => gl.deleteVertexArray(vertexArrayObject)));
+    gl.bindVertexArray(vertexArrayObject);
 
     // Setup a_unitquad, this defines the 4 vertices of a rectangle
     const unitQuadVertices = new Float32Array([0, 0, 1, 0, 0, 1, 1, 1]);
@@ -160,22 +164,22 @@ export class GlyphRenderer extends Disposable {
     this._register(toDisposable(() => gl.deleteBuffer(this._attributesBuffer)));
     gl.bindBuffer(gl.ARRAY_BUFFER, this._attributesBuffer);
     gl.enableVertexAttribArray(VertexAttribLocations.OFFSET);
-    gl.vertexAttribPointer(VertexAttribLocations.OFFSET, 2, gl.FLOAT, false, BYTES_PER_CELL, 0);
+    gl.vertexAttribPointer(VertexAttribLocations.OFFSET, 2, gl.FLOAT, false, Constants.BYTES_PER_CELL, 0);
     gl.vertexAttribDivisor(VertexAttribLocations.OFFSET, 1);
     gl.enableVertexAttribArray(VertexAttribLocations.SIZE);
-    gl.vertexAttribPointer(VertexAttribLocations.SIZE, 2, gl.FLOAT, false, BYTES_PER_CELL, 2 * Float32Array.BYTES_PER_ELEMENT);
+    gl.vertexAttribPointer(VertexAttribLocations.SIZE, 2, gl.FLOAT, false, Constants.BYTES_PER_CELL, 2 * Float32Array.BYTES_PER_ELEMENT);
     gl.vertexAttribDivisor(VertexAttribLocations.SIZE, 1);
     gl.enableVertexAttribArray(VertexAttribLocations.TEXPAGE);
-    gl.vertexAttribPointer(VertexAttribLocations.TEXPAGE, 1, gl.FLOAT, false, BYTES_PER_CELL, 4 * Float32Array.BYTES_PER_ELEMENT);
+    gl.vertexAttribPointer(VertexAttribLocations.TEXPAGE, 1, gl.FLOAT, false, Constants.BYTES_PER_CELL, 4 * Float32Array.BYTES_PER_ELEMENT);
     gl.vertexAttribDivisor(VertexAttribLocations.TEXPAGE, 1);
     gl.enableVertexAttribArray(VertexAttribLocations.TEXCOORD);
-    gl.vertexAttribPointer(VertexAttribLocations.TEXCOORD, 2, gl.FLOAT, false, BYTES_PER_CELL, 5 * Float32Array.BYTES_PER_ELEMENT);
+    gl.vertexAttribPointer(VertexAttribLocations.TEXCOORD, 2, gl.FLOAT, false, Constants.BYTES_PER_CELL, 5 * Float32Array.BYTES_PER_ELEMENT);
     gl.vertexAttribDivisor(VertexAttribLocations.TEXCOORD, 1);
     gl.enableVertexAttribArray(VertexAttribLocations.TEXSIZE);
-    gl.vertexAttribPointer(VertexAttribLocations.TEXSIZE, 2, gl.FLOAT, false, BYTES_PER_CELL, 7 * Float32Array.BYTES_PER_ELEMENT);
+    gl.vertexAttribPointer(VertexAttribLocations.TEXSIZE, 2, gl.FLOAT, false, Constants.BYTES_PER_CELL, 7 * Float32Array.BYTES_PER_ELEMENT);
     gl.vertexAttribDivisor(VertexAttribLocations.TEXSIZE, 1);
     gl.enableVertexAttribArray(VertexAttribLocations.CELL_POSITION);
-    gl.vertexAttribPointer(VertexAttribLocations.CELL_POSITION, 2, gl.FLOAT, false, BYTES_PER_CELL, 9 * Float32Array.BYTES_PER_ELEMENT);
+    gl.vertexAttribPointer(VertexAttribLocations.CELL_POSITION, 2, gl.FLOAT, false, Constants.BYTES_PER_CELL, 9 * Float32Array.BYTES_PER_ELEMENT);
     gl.vertexAttribDivisor(VertexAttribLocations.CELL_POSITION, 1);
 
     // Setup static uniforms
@@ -222,12 +226,12 @@ export class GlyphRenderer extends Disposable {
   }
 
   private _updateCell(array: Float32Array, x: number, y: number, code: number | undefined, bg: number, fg: number, ext: number, chars: string, width: number, lastBg: number): void {
-    $i = (y * this._terminal.cols + x) * INDICES_PER_CELL;
+    $i = (y * this._terminal.cols + x) * Constants.INDICES_PER_CELL;
 
     // Exit early if this is a null character, allow space character to continue as it may have
     // underline/strikethrough styles
     if (code === NULL_CELL_CODE || code === undefined/* This is used for the right side of wide chars */) {
-      array.fill(0, $i, $i + INDICES_PER_CELL - 1 - CELL_POSITION_INDICES);
+      array.fill(0, $i, $i + Constants.INDICES_PER_CELL - 1 - Constants.CELL_POSITION_INDICES);
       return;
     }
 
@@ -288,7 +292,7 @@ export class GlyphRenderer extends Disposable {
 
   public clear(): void {
     const terminal = this._terminal;
-    const newCount = terminal.cols * terminal.rows * INDICES_PER_CELL;
+    const newCount = terminal.cols * terminal.rows * Constants.INDICES_PER_CELL;
 
     // Clear vertices
     if (this._vertices.count !== newCount) {
@@ -310,7 +314,7 @@ export class GlyphRenderer extends Disposable {
       for (let x = 0; x < terminal.cols; x++) {
         this._vertices.attributes[i + 9] = x / terminal.cols;
         this._vertices.attributes[i + 10] = y / terminal.rows;
-        i += INDICES_PER_CELL;
+        i += Constants.INDICES_PER_CELL;
       }
     }
   }
@@ -346,8 +350,8 @@ export class GlyphRenderer extends Disposable {
     // - So we don't send vertices for all the line-ending whitespace to the GPU
     let bufferLength = 0;
     for (let y = 0; y < renderModel.lineLengths.length; y++) {
-      const si = y * this._terminal.cols * INDICES_PER_CELL;
-      const sub = this._vertices.attributes.subarray(si, si + renderModel.lineLengths[y] * INDICES_PER_CELL);
+      const si = y * this._terminal.cols * Constants.INDICES_PER_CELL;
+      const sub = this._vertices.attributes.subarray(si, si + renderModel.lineLengths[y] * Constants.INDICES_PER_CELL);
       activeBuffer.set(sub, bufferLength);
       bufferLength += sub.length;
     }
@@ -356,7 +360,9 @@ export class GlyphRenderer extends Disposable {
     gl.bindBuffer(gl.ARRAY_BUFFER, this._attributesBuffer);
     gl.bufferData(gl.ARRAY_BUFFER, activeBuffer.subarray(0, bufferLength), gl.STREAM_DRAW);
 
-    // Bind the atlas page texture if they have changed
+    // Bind the atlas page texture if they have changed. AtlasPage.version is globally
+    // monotonic, so a page object swap at the same index (which happens after a page merge)
+    // is detected by the same comparison.
     for (let i = 0; i < this._atlas.pages.length; i++) {
       if (this._atlas.pages[i].version !== this._atlasTextures[i].version) {
         this._bindAtlasPageTexture(gl, this._atlas, i);
@@ -364,11 +370,15 @@ export class GlyphRenderer extends Disposable {
     }
 
     // Draw the viewport
-    gl.drawElementsInstanced(gl.TRIANGLE_STRIP, 4, gl.UNSIGNED_BYTE, 0, bufferLength / INDICES_PER_CELL);
+    gl.drawElementsInstanced(gl.TRIANGLE_STRIP, 4, gl.UNSIGNED_BYTE, 0, bufferLength / Constants.INDICES_PER_CELL);
   }
 
   public setAtlas(atlas: ITextureAtlas): void {
     this._atlas = atlas;
+    this.invalidateAtlasTextures();
+  }
+
+  public invalidateAtlasTextures(): void {
     for (const glTexture of this._atlasTextures) {
       glTexture.version = -1;
     }

addons/addon-webgl/src/RectangleRenderer.ts

@@ -3,17 +3,18 @@
  * @license MIT
  */
 
-import { IRenderDimensions } from 'browser/renderer/shared/Types';
-import { IThemeService } from 'browser/services/Services';
-import { ReadonlyColorSet } from 'browser/Types';
-import { Attributes, FgFlags } from 'common/buffer/Constants';
-import { Disposable, toDisposable } from 'common/Lifecycle';
-import { IColor } from 'common/Types';
+import { IRenderDimensions } from '../../../src/browser/renderer/shared/Types';
+import { IThemeService } from '../../../src/browser/services/Services';
+import { ReadonlyColorSet } from '../../../src/browser/Types';
+import { Attributes, FgFlags } from '../../../src/common/buffer/Constants';
+import { Disposable, toDisposable } from '../../../src/common/Lifecycle';
+import { IColor } from '../../../src/common/Types';
 import { Terminal } from '@xterm/xterm';
-import { RENDER_MODEL_BG_OFFSET, RENDER_MODEL_FG_OFFSET, RENDER_MODEL_INDICIES_PER_CELL } from './RenderModel';
+import { RenderModelConstants } from './RenderModel';
 import { IRenderModel, IWebGL2RenderingContext, IWebGLVertexArrayObject } from './Types';
 import { createProgram, expandFloat32Array, PROJECTION_MATRIX } from './WebglUtils';
-import { throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
+import { throwIfFalsy } from '../../../src/browser/renderer/shared/RendererUtils';
+import type { ILogService } from '../../../src/common/services/Services';
 
 const enum VertexAttribLocations {
   POSITION = 0,
@@ -89,21 +90,23 @@ export class RectangleRenderer extends Disposable {
     private _terminal: Terminal,
     private _gl: IWebGL2RenderingContext,
     private _dimensions: IRenderDimensions,
-    private readonly _themeService: IThemeService
+    private readonly _themeService: IThemeService,
+    private readonly _logService: ILogService
   ) {
     super();
 
     const gl = this._gl;
 
-    this._program = throwIfFalsy(createProgram(gl, vertexShaderSource, fragmentShaderSource));
+    this._program = throwIfFalsy(createProgram(gl, vertexShaderSource, fragmentShaderSource, this._logService));
     this._register(toDisposable(() => gl.deleteProgram(this._program)));
 
     // Uniform locations
     this._projectionLocation = throwIfFalsy(gl.getUniformLocation(this._program, 'u_projection'));
 
     // Create and set the vertex array object
-    this._vertexArrayObject = gl.createVertexArray();
-    gl.bindVertexArray(this._vertexArrayObject);
+    const vertexArrayObject = this._vertexArrayObject = gl.createVertexArray();
+    this._register(toDisposable(() => gl.deleteVertexArray(vertexArrayObject)));
+    gl.bindVertexArray(vertexArrayObject);
 
     // Setup a_unitquad, this defines the 4 vertices of a rectangle
     const unitQuadVertices = new Float32Array([0, 0, 1, 0, 0, 1, 1, 1]);
@@ -217,9 +220,9 @@ export class RectangleRenderer extends Disposable {
       currentFg = 0;
       currentInverse = false;
       for (x = 0; x < terminal.cols; x++) {
-        modelIndex = ((y * terminal.cols) + x) * RENDER_MODEL_INDICIES_PER_CELL;
-        bg = model.cells[modelIndex + RENDER_MODEL_BG_OFFSET];
-        fg = model.cells[modelIndex + RENDER_MODEL_FG_OFFSET];
+        modelIndex = ((y * terminal.cols) + x) * RenderModelConstants.INDICIES_PER_CELL;
+        bg = model.cells[modelIndex + RenderModelConstants.BG_OFFSET];
+        fg = model.cells[modelIndex + RenderModelConstants.FG_OFFSET];
         inverse = !!(fg & FgFlags.INVERSE);
         if (bg !== currentBg || (fg !== currentFg && (currentInverse || inverse))) {
           // A rectangle needs to be drawn if going from non-default to another color
@@ -336,8 +339,9 @@ export class RectangleRenderer extends Disposable {
       }
     }
 
-    if (vertices.attributes.length < offset + 4) {
-      vertices.attributes = expandFloat32Array(vertices.attributes, this._terminal.rows * this._terminal.cols * INDICES_PER_RECTANGLE);
+    if (vertices.attributes.length < offset + INDICES_PER_RECTANGLE) {
+      // +1 for the viewport-clear rectangle at offset 0.
+      vertices.attributes = expandFloat32Array(vertices.attributes, (this._terminal.rows * this._terminal.cols + 1) * INDICES_PER_RECTANGLE);
     }
     $x1 = startX * this._dimensions.device.cell.width;
     $y1 = y * this._dimensions.device.cell.height;

addons/addon-webgl/src/RenderModel.ts

@@ -4,13 +4,15 @@
  */
 
 import { ICursorRenderModel, IRenderModel } from './Types';
-import { ISelectionRenderModel } from 'browser/renderer/shared/Types';
-import { createSelectionRenderModel } from 'browser/renderer/shared/SelectionRenderModel';
+import { ISelectionRenderModel } from '../../../src/browser/renderer/shared/Types';
+import { createSelectionRenderModel } from '../../../src/browser/renderer/shared/SelectionRenderModel';
 
-export const RENDER_MODEL_INDICIES_PER_CELL = 4;
-export const RENDER_MODEL_BG_OFFSET = 1;
-export const RENDER_MODEL_FG_OFFSET = 2;
-export const RENDER_MODEL_EXT_OFFSET = 3;
+export const enum RenderModelConstants {
+  INDICIES_PER_CELL = 4,
+  BG_OFFSET = 1,
+  FG_OFFSET = 2,
+  EXT_OFFSET = 3
+}
 
 export const COMBINED_CHAR_BIT_MASK = 0x80000000;
 
@@ -27,7 +29,7 @@ export class RenderModel implements IRenderModel {
   }
 
   public resize(cols: number, rows: number): void {
-    const indexCount = cols * rows * RENDER_MODEL_INDICIES_PER_CELL;
+    const indexCount = cols * rows * RenderModelConstants.INDICIES_PER_CELL;
     if (indexCount !== this.cells.length) {
       this.cells = new Uint32Array(indexCount);
       this.lineLengths = new Uint32Array(rows);

addons/addon-webgl/src/TextureAtlas.ts

@@ -3,19 +3,19 @@
  * @license MIT
  */
 
-import { IColorContrastCache } from 'browser/Types';
+import { IColorContrastCache } from '../../../src/browser/Types';
 import { DIM_OPACITY, TEXT_BASELINE } from './Constants';
 import { tryDrawCustomGlyph } from './customGlyphs/CustomGlyphRasterizer';
-import { computeNextVariantOffset, treatGlyphAsBackgroundColor, isPowerlineGlyph, isRestrictedPowerlineGlyph, throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
+import { computeNextVariantOffset, treatGlyphAsBackgroundColor, isPowerlineGlyph, isRestrictedPowerlineGlyph, throwIfFalsy } from '../../../src/browser/renderer/shared/RendererUtils';
 import { IBoundingBox, ICharAtlasConfig, IRasterizedGlyph, ITextureAtlas } from './Types';
-import { NULL_COLOR, channels, color, rgba } from 'common/Color';
-import { FourKeyMap } from 'common/MultiKeyMap';
-import { IdleTaskQueue } from 'common/TaskQueue';
-import { IColor } from 'common/Types';
-import { AttributeData } from 'common/buffer/AttributeData';
-import { Attributes, DEFAULT_COLOR, DEFAULT_EXT, UnderlineStyle } from 'common/buffer/Constants';
-import { ILogService, IUnicodeService } from 'common/services/Services';
-import { Emitter } from 'common/Event';
+import { NULL_COLOR, channels, color, rgba } from '../../../src/common/Color';
+import { FourKeyMap } from '../../../src/common/MultiKeyMap';
+import { IdleTaskQueue } from '../../../src/common/TaskQueue';
+import { IColor } from '../../../src/common/Types';
+import { AttributeData } from '../../../src/common/buffer/AttributeData';
+import { Attributes, DEFAULT_COLOR, DEFAULT_EXT, UnderlineStyle } from '../../../src/common/buffer/Constants';
+import { ILogService, IUnicodeService } from '../../../src/common/services/Services';
+import { Emitter } from '../../../src/common/Event';
 
 /**
  * A shared object which is used to draw nothing for a particular cell.
@@ -109,6 +109,7 @@ export class TextureAtlas implements ITextureAtlas {
       page.canvas.remove();
     }
     this._onAddTextureAtlasCanvas.dispose();
+    this._onRemoveTextureAtlasCanvas.dispose();
   }
 
   public warmUp(): void {
@@ -133,7 +134,9 @@ export class TextureAtlas implements ITextureAtlas {
 
   private _requestClearModel = false;
   public beginFrame(): boolean {
-    return this._requestClearModel;
+    const result = this._requestClearModel;
+    this._requestClearModel = false;
+    return result;
   }
 
   public clearTexture(): void {
@@ -193,7 +196,7 @@ export class TextureAtlas implements ITextureAtlas {
 
       // Merge into the new page
       const mergedPage = this._mergePages(mergingPages, mergedPageIndex);
-      mergedPage.version++;
+      mergedPage.version = ++AtlasPage.nextVersion;
 
       // Delete the pages, shifting glyph texture pages as needed
       for (let i = sortedMergingPagesIndexes.length - 1; i >= 0; i--) {
@@ -251,7 +254,7 @@ export class TextureAtlas implements ITextureAtlas {
       for (const g of adjustingPage.glyphs) {
         g.texturePage--;
       }
-      adjustingPage.version++;
+      adjustingPage.version = ++AtlasPage.nextVersion;
     }
   }
 
@@ -527,7 +530,7 @@ export class TextureAtlas implements ITextureAtlas {
     let customGlyph = false;
     if (this._config.customGlyphs !== false) {
       const variantOffset = this._workAttributeData.getUnderlineVariantOffset();
-      customGlyph = tryDrawCustomGlyph(this._tmpCtx, chars, padding, padding, this._config.deviceCellWidth, this._config.deviceCellHeight, this._config.deviceCharWidth, this._config.deviceCharHeight, this._config.fontSize, this._config.devicePixelRatio, backgroundColor.css, variantOffset);
+      customGlyph = tryDrawCustomGlyph(this._tmpCtx, chars, padding, padding, this._config.deviceCellWidth, this._config.deviceCellHeight, this._config.deviceCharWidth, this._config.deviceCharHeight, this._config.fontSize, this._config.devicePixelRatio, this._logService, backgroundColor.css, variantOffset);
     }
 
     // Whether to clear pixels based on a threshold difference between the glyph color and the
@@ -937,7 +940,7 @@ export class TextureAtlas implements ITextureAtlas {
       rasterizedGlyph.size.y
     );
     activePage.addGlyph(rasterizedGlyph);
-    activePage.version++;
+    activePage.version = ++AtlasPage.nextVersion;
 
     return rasterizedGlyph;
   }
@@ -1047,9 +1050,13 @@ class AtlasPage {
   }
 
   /**
-   * Used to check whether the canvas of the atlas page has changed.
+   * Monotonically increasing across all atlas pages globally. Used to detect when the texture
+   * unit at a given index needs to be re-uploaded — both for content changes within the same
+   * page and for a page object swap at the same index (which happens after a page merge,
+   * where a per-page counter could coincide with the previously-bound page's value).
    */
-  public version = 0;
+  public static nextVersion: number = 0;
+  public version = ++AtlasPage.nextVersion;
 
   // Texture atlas current positioning data. The texture packing strategy used is to fill from
   // left-to-right and top-to-bottom. When the glyph being written is less than half of the current
@@ -1092,7 +1099,7 @@ class AtlasPage {
     this.currentRow.y = 0;
     this.currentRow.height = 0;
     this.fixedRows.length = 0;
-    this.version++;
+    this.version = ++AtlasPage.nextVersion;
   }
 }
 

addons/addon-webgl/src/Types.ts

@@ -4,10 +4,10 @@
  */
 
 import { FontWeight } from '@xterm/xterm';
-import { IColorSet } from 'browser/Types';
-import { ISelectionRenderModel } from 'browser/renderer/shared/Types';
-import { CursorInactiveStyle, CursorStyle, type IDisposable } from 'common/Types';
-import type { IEvent } from 'common/Event';
+import { IColorSet } from '../../../src/browser/Types';
+import { ISelectionRenderModel } from '../../../src/browser/renderer/shared/Types';
+import { CursorInactiveStyle, CursorStyle, type IDisposable } from '../../../src/common/Types';
+import type { IEvent } from '../../../src/common/Event';
 
 export interface IRenderModel {
   cells: Uint32Array;
@@ -28,6 +28,7 @@ export interface ICursorRenderModel {
 export interface IWebGL2RenderingContext extends WebGLRenderingContext {
   vertexAttribDivisor(index: number, divisor: number): void;
   createVertexArray(): IWebGLVertexArrayObject;
+  deleteVertexArray(vao: IWebGLVertexArrayObject): void;
   bindVertexArray(vao: IWebGLVertexArrayObject): void;
   drawElementsInstanced(mode: number, count: number, type: number, offset: number, instanceCount: number): void;
 }

addons/addon-webgl/src/WebglAddon.ts

@@ -5,14 +5,14 @@
 
 import type { ITerminalAddon, Terminal } from '@xterm/xterm';
 import type { IWebglAddonOptions, WebglAddon as IWebglApi } from '@xterm/addon-webgl';
-import { ICharacterJoinerService, ICharSizeService, ICoreBrowserService, IRenderService, IThemeService } from 'browser/services/Services';
-import { ITerminal } from 'browser/Types';
-import { Disposable, toDisposable } from 'common/Lifecycle';
-import { getSafariVersion, isSafari } from 'common/Platform';
-import { ICoreService, IDecorationService, IOptionsService } from 'common/services/Services';
+import { ICharacterJoinerService, ICharSizeService, ICoreBrowserService, IRenderService, IThemeService } from '../../../src/browser/services/Services';
+import { ITerminal } from '../../../src/browser/Types';
+import { Disposable, toDisposable } from '../../../src/common/Lifecycle';
+import { getSafariVersion, isSafari } from '../../../src/common/Platform';
+import { ICoreService, IDecorationService, ILogService, IOptionsService } from '../../../src/common/services/Services';
 import { IWebGL2RenderingContext } from './Types';
 import { WebglRenderer } from './WebglRenderer';
-import { Emitter, EventUtils } from 'common/Event';
+import { Emitter, EventUtils } from '../../../src/common/Event';
 
 export class WebglAddon extends Disposable implements ITerminalAddon, IWebglApi {
   private _terminal?: Terminal;
@@ -65,6 +65,7 @@ export class WebglAddon extends Disposable implements ITerminalAddon, IWebglApi
     const charSizeService: ICharSizeService = unsafeCore._charSizeService;
     const coreBrowserService: ICoreBrowserService = unsafeCore._coreBrowserService;
     const decorationService: IDecorationService = unsafeCore._decorationService;
+    const logService: ILogService = unsafeCore._logService;
     const themeService: IThemeService = unsafeCore._themeService;
 
     this._renderer = this._register(new WebglRenderer(
@@ -74,6 +75,7 @@ export class WebglAddon extends Disposable implements ITerminalAddon, IWebglApi
       coreBrowserService,
       coreService,
       decorationService,
+      logService,
       optionsService,
       themeService,
       this._customGlyphs,

addons/addon-webgl/src/WebglRenderer.ts

@@ -3,34 +3,38 @@
  * @license MIT
  */
 
-import { ITerminal } from 'browser/Types';
+import { ITerminal } from '../../../src/browser/Types';
 import { CellColorResolver } from './CellColorResolver';
 import { acquireTextureAtlas, removeTerminalFromCache } from './CharAtlasCache';
 import { CursorBlinkStateManager } from './CursorBlinkStateManager';
 import { observeDevicePixelDimensions } from './DevicePixelObserver';
-import { IRenderDimensions, IRenderer, IRequestRedrawEvent } from 'browser/renderer/shared/Types';
-import { ICharSizeService, ICharacterJoinerService, ICoreBrowserService, IThemeService } from 'browser/services/Services';
-import { CharData, IBufferLine, ICellData } from 'common/Types';
-import { AttributeData } from 'common/buffer/AttributeData';
-import { CellData } from 'common/buffer/CellData';
-import { Attributes, Content, FgFlags, NULL_CELL_CHAR, NULL_CELL_CODE } from 'common/buffer/Constants';
-import { TextBlinkStateManager } from 'browser/renderer/shared/TextBlinkStateManager';
-import { ICoreService, IDecorationService, IOptionsService } from 'common/services/Services';
+import { IRenderDimensions, IRenderer, IRequestRedrawEvent } from '../../../src/browser/renderer/shared/Types';
+import { ICharSizeService, ICharacterJoinerService, ICoreBrowserService, IThemeService } from '../../../src/browser/services/Services';
+import { CharData, IBufferLine, ICellData } from '../../../src/common/Types';
+import { AttributeData } from '../../../src/common/buffer/AttributeData';
+import { CellData } from '../../../src/common/buffer/CellData';
+import { Attributes, Content, FgFlags, NULL_CELL_CHAR, NULL_CELL_CODE } from '../../../src/common/buffer/Constants';
+import { TextBlinkStateManager } from '../../../src/browser/renderer/shared/TextBlinkStateManager';
+import { ICoreService, IDecorationService, ILogService, IOptionsService } from '../../../src/common/services/Services';
 import { Terminal } from '@xterm/xterm';
 import { GlyphRenderer } from './GlyphRenderer';
 import { RectangleRenderer } from './RectangleRenderer';
-import { COMBINED_CHAR_BIT_MASK, RENDER_MODEL_BG_OFFSET, RENDER_MODEL_EXT_OFFSET, RENDER_MODEL_FG_OFFSET, RENDER_MODEL_INDICIES_PER_CELL, RenderModel } from './RenderModel';
+import { COMBINED_CHAR_BIT_MASK, RenderModel, RenderModelConstants } from './RenderModel';
 import { IWebGL2RenderingContext, type ITextureAtlas } from './Types';
 import { LinkRenderLayer } from './renderLayer/LinkRenderLayer';
 import { IRenderLayer } from './renderLayer/Types';
-import { Emitter, EventUtils } from 'common/Event';
-import { addDisposableListener } from 'browser/Dom';
-import { combinedDisposable, Disposable, MutableDisposable, toDisposable } from 'common/Lifecycle';
-import { createRenderDimensions } from 'browser/renderer/shared/RendererUtils';
+import { Emitter, EventUtils } from '../../../src/common/Event';
+import { addDisposableListener } from '../../../src/browser/Dom';
+import { combinedDisposable, Disposable, MutableDisposable, toDisposable } from '../../../src/common/Lifecycle';
+import { createRenderDimensions } from '../../../src/browser/renderer/shared/RendererUtils';
+
+const enum Constants {
+  MERGE_RETRY_LIMIT = 32
+}
 
 export class WebglRenderer extends Disposable implements IRenderer {
   private _renderLayers: IRenderLayer[];
-  private _cursorBlinkStateManager: MutableDisposable<CursorBlinkStateManager> = new MutableDisposable();
+  private _cursorBlinkStateManager: MutableDisposable<CursorBlinkStateManager> = this._register(new MutableDisposable());
   private _textBlinkStateManager: TextBlinkStateManager;
   private _charAtlasDisposable = this._register(new MutableDisposable());
   private _charAtlas: ITextureAtlas | undefined;
@@ -73,6 +77,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
     private readonly _coreBrowserService: ICoreBrowserService,
     private readonly _coreService: ICoreService,
     private readonly _decorationService: IDecorationService,
+    private readonly _logService: ILogService,
     private readonly _optionsService: IOptionsService,
     private readonly _themeService: IThemeService,
     private readonly _customGlyphs: boolean = true,
@@ -118,19 +123,19 @@ export class WebglRenderer extends Disposable implements IRenderer {
     this._deviceMaxTextureSize = this._gl.getParameter(this._gl.MAX_TEXTURE_SIZE);
 
     this._register(addDisposableListener(this._canvas, 'webglcontextlost', (e) => {
-      console.log('webglcontextlost event received');
+      this._logService.debug('webglcontextlost event received');
       // Prevent the default behavior in order to enable WebGL context restoration.
       e.preventDefault();
       // Wait a few seconds to see if the 'webglcontextrestored' event is fired.
       // If not, dispatch the onContextLoss notification to observers.
       this._contextRestorationTimeout = setTimeout(() => {
         this._contextRestorationTimeout = undefined;
-        console.warn('webgl context not restored; firing onContextLoss');
+        this._logService.warn('webgl context not restored; firing onContextLoss');
         this._onContextLoss.fire(e);
       }, 3000 /* ms */);
     }));
     this._register(addDisposableListener(this._canvas, 'webglcontextrestored', (e) => {
-      console.warn('webglcontextrestored event received');
+      this._logService.warn('webglcontextrestored event received');
       clearTimeout(this._contextRestorationTimeout);
       this._contextRestorationTimeout = undefined;
       // The texture atlas and glyph renderer must be fully reinitialized
@@ -154,6 +159,8 @@ export class WebglRenderer extends Disposable implements IRenderer {
     this._isAttached = this._core.screenElement!.isConnected;
 
     this._register(toDisposable(() => {
+      clearTimeout(this._contextRestorationTimeout);
+      this._contextRestorationTimeout = undefined;
       for (const l of this._renderLayers) {
         l.dispose();
       }
@@ -270,8 +277,8 @@ export class WebglRenderer extends Disposable implements IRenderer {
    * Initializes members dependent on WebGL context state.
    */
   private _initializeWebGLState(): [RectangleRenderer, GlyphRenderer] {
-    this._rectangleRenderer.value = new RectangleRenderer(this._terminal, this._gl, this.dimensions, this._themeService);
-    this._glyphRenderer.value = new GlyphRenderer(this._terminal, this._gl, this.dimensions, this._optionsService);
+    this._rectangleRenderer.value = new RectangleRenderer(this._terminal, this._gl, this.dimensions, this._themeService, this._logService);
+    this._glyphRenderer.value = new GlyphRenderer(this._terminal, this._gl, this.dimensions, this._optionsService, this._logService);
 
     // Update dimensions and acquire char atlas
     this.handleCharSizeChanged();
@@ -375,6 +382,19 @@ export class WebglRenderer extends Disposable implements IRenderer {
       this._updateModel(start, end);
     }
 
+    // A mid-update atlas page merge invalidates vertex data and may not bump the host
+    // page's version, so re-run the update and force a full texture rebind.
+    let merged = false;
+    let mergeRetries = 0;
+    while (this._charAtlas && this._glyphRenderer.value.beginFrame() && mergeRetries++ < Constants.MERGE_RETRY_LIMIT) {
+      merged = true;
+      this._clearModel(true);
+      this._updateModel(0, this._terminal.rows - 1);
+    }
+    if (merged) {
+      this._glyphRenderer.value.invalidateAtlasTextures();
+    }
+
     // Render
     this._rectangleRenderer.value.renderBackgrounds();
     this._glyphRenderer.value.render(this._model);
@@ -493,7 +513,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
 
         chars = cell.getChars();
         code = cell.getCode();
-        i = ((y * terminal.cols) + x) * RENDER_MODEL_INDICIES_PER_CELL;
+        i = ((y * terminal.cols) + x) * RenderModelConstants.INDICIES_PER_CELL;
 
         if (!rowHasBlinkingCells && cell.isBlink()) {
           rowHasBlinkingCells = true;
@@ -538,9 +558,9 @@ export class WebglRenderer extends Disposable implements IRenderer {
 
         // Nothing has changed, no updates needed
         if (this._model.cells[i] === code &&
-            this._model.cells[i + RENDER_MODEL_BG_OFFSET] === this._cellColorResolver.result.bg &&
-            this._model.cells[i + RENDER_MODEL_FG_OFFSET] === this._cellColorResolver.result.fg &&
-            this._model.cells[i + RENDER_MODEL_EXT_OFFSET] === this._cellColorResolver.result.ext) {
+            this._model.cells[i + RenderModelConstants.BG_OFFSET] === this._cellColorResolver.result.bg &&
+            this._model.cells[i + RenderModelConstants.FG_OFFSET] === this._cellColorResolver.result.fg &&
+            this._model.cells[i + RenderModelConstants.EXT_OFFSET] === this._cellColorResolver.result.ext) {
           continue;
         }
 
@@ -553,9 +573,9 @@ export class WebglRenderer extends Disposable implements IRenderer {
 
         // Cache the results in the model
         this._model.cells[i] = code;
-        this._model.cells[i + RENDER_MODEL_BG_OFFSET] = this._cellColorResolver.result.bg;
-        this._model.cells[i + RENDER_MODEL_FG_OFFSET] = this._cellColorResolver.result.fg;
-        this._model.cells[i + RENDER_MODEL_EXT_OFFSET] = this._cellColorResolver.result.ext;
+        this._model.cells[i + RenderModelConstants.BG_OFFSET] = this._cellColorResolver.result.bg;
+        this._model.cells[i + RenderModelConstants.FG_OFFSET] = this._cellColorResolver.result.fg;
+        this._model.cells[i + RenderModelConstants.EXT_OFFSET] = this._cellColorResolver.result.ext;
 
         width = cell.getWidth();
         this._glyphRenderer.value!.updateCell(x, y, code, this._cellColorResolver.result.bg, this._cellColorResolver.result.fg, this._cellColorResolver.result.ext, chars, width, lastBg);
@@ -566,14 +586,14 @@ export class WebglRenderer extends Disposable implements IRenderer {
 
           // Null out non-first cells
           for (x++; x <= lastCharX; x++) {
-            j = ((y * terminal.cols) + x) * RENDER_MODEL_INDICIES_PER_CELL;
+            j = ((y * terminal.cols) + x) * RenderModelConstants.INDICIES_PER_CELL;
             this._glyphRenderer.value!.updateCell(x, y, NULL_CELL_CODE, 0, 0, 0, NULL_CELL_CHAR, 0, 0);
             this._model.cells[j] = NULL_CELL_CODE;
             // Don't re-resolve the cell color since multi-colored ligature backgrounds are not
             // supported
-            this._model.cells[j + RENDER_MODEL_BG_OFFSET] = this._cellColorResolver.result.bg;
-            this._model.cells[j + RENDER_MODEL_FG_OFFSET] = this._cellColorResolver.result.fg;
-            this._model.cells[j + RENDER_MODEL_EXT_OFFSET] = this._cellColorResolver.result.ext;
+            this._model.cells[j + RenderModelConstants.BG_OFFSET] = this._cellColorResolver.result.bg;
+            this._model.cells[j + RenderModelConstants.FG_OFFSET] = this._cellColorResolver.result.fg;
+            this._model.cells[j + RenderModelConstants.EXT_OFFSET] = this._cellColorResolver.result.ext;
           }
           x--; // Go back to the previous update cell for next iteration
         }

addons/addon-webgl/src/WebglUtils.ts

@@ -3,7 +3,8 @@
  * @license MIT
  */
 
-import { throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
+import { throwIfFalsy } from '../../../src/browser/renderer/shared/RendererUtils';
+import type { ILogService } from '../../../src/common/services/Services';
 
 /**
  * A matrix that when multiplies will translate 0-1 coordinates (left to right,
@@ -16,21 +17,21 @@ export const PROJECTION_MATRIX = new Float32Array([
   -1, 1, 0, 1
 ]);
 
-export function createProgram(gl: WebGLRenderingContext, vertexSource: string, fragmentSource: string): WebGLProgram | undefined {
+export function createProgram(gl: WebGLRenderingContext, vertexSource: string, fragmentSource: string, logService: ILogService): WebGLProgram | undefined {
   const program = throwIfFalsy(gl.createProgram());
-  gl.attachShader(program, throwIfFalsy(createShader(gl, gl.VERTEX_SHADER, vertexSource)));
-  gl.attachShader(program, throwIfFalsy(createShader(gl, gl.FRAGMENT_SHADER, fragmentSource)));
+  gl.attachShader(program, throwIfFalsy(createShader(gl, gl.VERTEX_SHADER, vertexSource, logService)));
+  gl.attachShader(program, throwIfFalsy(createShader(gl, gl.FRAGMENT_SHADER, fragmentSource, logService)));
   gl.linkProgram(program);
   const success = gl.getProgramParameter(program, gl.LINK_STATUS);
   if (success) {
     return program;
   }
 
-  console.error(gl.getProgramInfoLog(program));
+  logService.error(gl.getProgramInfoLog(program));
   gl.deleteProgram(program);
 }
 
-export function createShader(gl: WebGLRenderingContext, type: number, source: string): WebGLShader | undefined {
+export function createShader(gl: WebGLRenderingContext, type: number, source: string, logService: ILogService): WebGLShader | undefined {
   const shader = throwIfFalsy(gl.createShader(type));
   gl.shaderSource(shader, source);
   gl.compileShader(shader);
@@ -39,7 +40,7 @@ export function createShader(gl: WebGLRenderingContext, type: number, source: st
     return shader;
   }
 
-  console.error(gl.getShaderInfoLog(shader));
+  logService.error(gl.getShaderInfoLog(shader));
   gl.deleteShader(shader);
 }
 

addons/addon-webgl/src/customGlyphs/CustomGlyphRasterizer.ts

@@ -3,7 +3,8 @@
  * @license MIT
  */
 
-import { throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
+import { throwIfFalsy } from '../../../../src/browser/renderer/shared/RendererUtils';
+import type { ILogService } from '../../../../src/common/services/Services';
 import { customGlyphDefinitions } from './CustomGlyphDefinitions';
 import { CustomGlyphDefinitionType, CustomGlyphScaleType, CustomGlyphVectorType, type CustomGlyphDefinitionPart, type CustomGlyphPathDrawFunctionDefinition, type CustomGlyphPatternDefinition, type ICustomGlyphSolidOctantBlockVector, type ICustomGlyphVectorShape } from './Types';
 
@@ -22,6 +23,7 @@ export function tryDrawCustomGlyph(
   deviceCharHeight: number,
   fontSize: number,
   devicePixelRatio: number,
+  logService: ILogService,
   backgroundColor?: string,
   variantOffset: number = 0
 ): boolean {
@@ -30,7 +32,7 @@ export function tryDrawCustomGlyph(
     // Normalize to array for uniform handling
     const parts = Array.isArray(unifiedCharDefinition) ? unifiedCharDefinition : [unifiedCharDefinition];
     for (const part of parts) {
-      drawDefinitionPart(ctx, part, xOffset, yOffset, deviceCellWidth, deviceCellHeight, deviceCharWidth, deviceCharHeight, fontSize, devicePixelRatio, backgroundColor, variantOffset);
+      drawDefinitionPart(ctx, part, xOffset, yOffset, deviceCellWidth, deviceCellHeight, deviceCharWidth, deviceCharHeight, fontSize, devicePixelRatio, logService, backgroundColor, variantOffset);
     }
     return true;
   }
@@ -49,6 +51,7 @@ function drawDefinitionPart(
   deviceCharHeight: number,
   fontSize: number,
   devicePixelRatio: number,
+  logService: ILogService,
   backgroundColor?: string,
   variantOffset: number = 0
 ): void {
@@ -79,7 +82,7 @@ function drawDefinitionPart(
       drawPatternChar(ctx, part.data, drawXOffset, drawYOffset, drawWidth, drawHeight, variantOffset);
       break;
     case CustomGlyphDefinitionType.PATH_FUNCTION:
-      drawPathFunctionCharacter(ctx, part.data, drawXOffset, drawYOffset, drawWidth, drawHeight, devicePixelRatio, part.strokeWidth);
+      drawPathFunctionCharacter(ctx, part.data, drawXOffset, drawYOffset, drawWidth, drawHeight, devicePixelRatio, logService, part.strokeWidth);
       break;
     case CustomGlyphDefinitionType.PATH:
       drawPathDefinitionCharacter(ctx, part.data, drawXOffset, drawYOffset, drawWidth, drawHeight, devicePixelRatio, part.strokeWidth);
@@ -88,7 +91,7 @@ function drawDefinitionPart(
       drawPathNegativeDefinitionCharacter(ctx, part.data, drawXOffset, drawYOffset, drawWidth, drawHeight, devicePixelRatio, backgroundColor);
       break;
     case CustomGlyphDefinitionType.VECTOR_SHAPE:
-      drawVectorShape(ctx, part.data, drawXOffset, drawYOffset, drawWidth, drawHeight, fontSize, devicePixelRatio);
+      drawVectorShape(ctx, part.data, drawXOffset, drawYOffset, drawWidth, drawHeight, fontSize, devicePixelRatio, logService);
       break;
     case CustomGlyphDefinitionType.BRAILLE:
       drawBrailleCharacter(ctx, part.data, drawXOffset, drawYOffset, drawWidth, drawHeight);
@@ -510,6 +513,7 @@ function drawPathFunctionCharacter(
   deviceCellWidth: number,
   deviceCellHeight: number,
   devicePixelRatio: number,
+  logService: ILogService,
   strokeWidth?: number
 ): void {
   ctx.save();
@@ -536,7 +540,7 @@ function drawPathFunctionCharacter(
     }
     const f = svgToCanvasInstructionMap[type];
     if (!f) {
-      console.error(`Could not find drawing instructions for "${type}"`);
+      logService.error(`Could not find drawing instructions for "${type}"`);
       continue;
     }
     const args: string[] = instruction.substring(1).split(',');
@@ -598,7 +602,8 @@ function drawVectorShape(
   deviceCellWidth: number,
   deviceCellHeight: number,
   fontSize: number,
-  devicePixelRatio: number
+  devicePixelRatio: number,
+  logService: ILogService
 ): void {
   // Clip the cell to make sure drawing doesn't occur beyond bounds
   const clipRegion = new Path2D();
@@ -619,7 +624,7 @@ function drawVectorShape(
     }
     const f = svgToCanvasInstructionMap[type];
     if (!f) {
-      console.error(`Could not find drawing instructions for "${type}"`);
+      logService.error(`Could not find drawing instructions for "${type}"`);
       continue;
     }
     const args: string[] = instruction.substring(1).split(',');

addons/addon-webgl/src/renderLayer/BaseRenderLayer.ts

@@ -3,16 +3,16 @@
  * @license MIT
  */
 
-import { ReadonlyColorSet } from 'browser/Types';
+import { ReadonlyColorSet } from '../../../../src/browser/Types';
 import { acquireTextureAtlas } from '../CharAtlasCache';
-import { IRenderDimensions } from 'browser/renderer/shared/Types';
-import { ICoreBrowserService, IThemeService } from 'browser/services/Services';
-import { Disposable, toDisposable } from 'common/Lifecycle';
-import { CellData } from 'common/buffer/CellData';
-import { IOptionsService } from 'common/services/Services';
+import { IRenderDimensions } from '../../../../src/browser/renderer/shared/Types';
+import { ICoreBrowserService, IThemeService } from '../../../../src/browser/services/Services';
+import { Disposable, toDisposable } from '../../../../src/common/Lifecycle';
+import { CellData } from '../../../../src/common/buffer/CellData';
+import { IOptionsService } from '../../../../src/common/services/Services';
 import { Terminal } from '@xterm/xterm';
 import { IRenderLayer } from './Types';
-import { throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
+import { throwIfFalsy } from '../../../../src/browser/renderer/shared/RendererUtils';
 import { TEXT_BASELINE } from '../Constants';
 import type { ITextureAtlas } from '../Types';
 

addons/addon-webgl/src/renderLayer/LinkRenderLayer.ts

@@ -4,11 +4,11 @@
  */
 
 import { is256Color } from '../CharAtlasUtils';
-import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/shared/Constants';
-import { IRenderDimensions } from 'browser/renderer/shared/Types';
-import { ICoreBrowserService, IThemeService } from 'browser/services/Services';
-import { ILinkifier2, ILinkifierEvent } from 'browser/Types';
-import { IOptionsService } from 'common/services/Services';
+import { INVERTED_DEFAULT_COLOR } from '../../../../src/browser/renderer/shared/Constants';
+import { IRenderDimensions } from '../../../../src/browser/renderer/shared/Types';
+import { ICoreBrowserService, IThemeService } from '../../../../src/browser/services/Services';
+import { ILinkifier2, ILinkifierEvent } from '../../../../src/browser/Types';
+import { IOptionsService } from '../../../../src/common/services/Services';
 import { Terminal } from '@xterm/xterm';
 import { BaseRenderLayer } from './BaseRenderLayer';