@aurigax-ai/ghostty-web 0.2.0 → 0.3.1

package/lib/webgl-renderer.ts

@@ -11,6 +11,7 @@
  */
 
 import { drawBoxGlyph, isBoxGlyph } from './box-glyphs';
+import { glyphInk } from './glyph-ink';
 import type { ITheme } from './interfaces';
 import {
   type FrameOverlay,
@@ -21,13 +22,20 @@ import {
 } from './renderer';
 import type { GhosttyCell } from './types';
 import { CellFlags } from './types';
-
-const RECT_WORDS = 5;
-const GLYPH_WORDS = 8;
-const OVERLAY_RECTS = 4;
-const ATLAS_START = 1024;
+import {
+  GLYPH_WORDS,
+  type InstanceArrays,
+  RECT_WORDS,
+  compactGlyphs,
+  compactRects,
+  instanceArrays,
+} from './webgl-instances';
+
+const CURSOR_RECTS = 4;
+const SCROLLBAR_RECTS = 2;
+const OVERLAY_RECTS = CURSOR_RECTS + SCROLLBAR_RECTS;
+const ATLAS_START = 512;
 const ATLAS_MAX = 4096;
-const COLORED_SPREAD = 24;
 
 const VERTEX_RECT = `#version 300 es
 layout(location = 0) in vec2 a_corner;
@@ -86,11 +94,14 @@ void main() {
   }
 }`;
 
+/** A glyph's ink in the atlas; `ox`, `oy` place it within the glyph's padded slot. */
 interface AtlasEntry {
   x: number;
   y: number;
   w: number;
   h: number;
+  ox: number;
+  oy: number;
   colored: boolean;
 }
 
@@ -99,10 +110,15 @@ function pack(r: number, g: number, b: number, a: number): number {
   return (r | (g << 8) | (b << 16) | (a << 24)) >>> 0;
 }
 
-/** Glyph atlas: a CPU canvas mirrored into a texture, so growing it keeps every entry. */
+/**
+ * Glyph atlas: a texture packed in shelves of one slot height. Each glyph is
+ * rasterized in a scratch canvas the size of one slot and uploaded; the
+ * texture grows by copying itself on the GPU, so entries stay valid and no
+ * CPU copy of the atlas is kept.
+ */
 class GlyphAtlas {
   size = ATLAS_START;
-  private mirror: HTMLCanvasElement;
+  private readonly scratch: HTMLCanvasElement;
   private ctx: CanvasRenderingContext2D;
   private entries = new Map<number | string, AtlasEntry | null>();
   private shelfX = 0;
@@ -115,31 +131,31 @@ class GlyphAtlas {
     private readonly gl: WebGL2RenderingContext,
     private slotHeight: number
   ) {
-    this.mirror = document.createElement('canvas');
-    this.ctx = this.newMirror(this.size);
-    this.texture = gl.createTexture()!;
-    this.allocateTexture();
+    this.scratch = document.createElement('canvas');
+    this.ctx = this.scratchContext(1, slotHeight);
+    this.texture = this.newTexture(this.size);
   }
 
-  private newMirror(size: number): CanvasRenderingContext2D {
-    this.mirror.width = size;
-    this.mirror.height = size;
-    const ctx = this.mirror.getContext('2d', { willReadFrequently: true });
-    if (!ctx) throw new Error('Failed to get the glyph atlas context');
+  private scratchContext(w: number, h: number): CanvasRenderingContext2D {
+    if (this.scratch.width < w) this.scratch.width = w;
+    if (this.scratch.height !== h) this.scratch.height = h;
+    const ctx = this.scratch.getContext('2d', { willReadFrequently: true });
+    if (!ctx) throw new Error('Failed to get the glyph scratch context');
     ctx.textBaseline = 'alphabetic';
     ctx.textAlign = 'left';
     return ctx;
   }
 
-  private allocateTexture(): void {
+  private newTexture(size: number): WebGLTexture {
     const gl = this.gl;
-    gl.bindTexture(gl.TEXTURE_2D, this.texture);
-    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+    const texture = gl.createTexture()!;
+    gl.bindTexture(gl.TEXTURE_2D, texture);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this.mirror);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, size, size, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+    return texture;
   }
 
   /** Drops every glyph, for a new font or cell size. */
@@ -148,21 +164,37 @@ class GlyphAtlas {
     this.entries.clear();
     this.shelfX = 0;
     this.shelfY = 0;
-    this.ctx.clearRect(0, 0, this.size, this.size);
-    this.allocateTexture();
+    this.gl.deleteTexture(this.texture);
+    this.size = ATLAS_START;
+    this.texture = this.newTexture(this.size);
   }
 
   lookup(key: number | string): AtlasEntry | null | undefined {
     return this.entries.get(key);
   }
 
-  /** Rasterizes a glyph with `draw` into a free slot w px wide and uploads it. */
+  /** Rasterizes a glyph with `draw` (at 0, 0 of a w px wide slot) and uploads it. */
   add(
     key: number | string,
     w: number,
     draw: (ctx: CanvasRenderingContext2D, x: number, y: number) => void
   ): AtlasEntry | null {
     const h = this.slotHeight;
+    if (this.scratch.width < w || this.scratch.height !== h) this.ctx = this.scratchContext(w, h);
+    const ctx = this.ctx;
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(0, 0, w, h);
+    ctx.clip();
+    ctx.clearRect(0, 0, w, h);
+    draw(ctx, 0, 0);
+    ctx.restore();
+    const pixels = ctx.getImageData(0, 0, w, h);
+    const ink = glyphInk(pixels.data, w, h);
+    if (!ink) {
+      this.entries.set(key, null);
+      return null;
+    }
     if (this.shelfX + w > this.size) {
       this.shelfX = 0;
       this.shelfY += h;
@@ -174,56 +206,42 @@ class GlyphAtlas {
     const x = this.shelfX;
     const y = this.shelfY;
     this.shelfX += w;
-    const ctx = this.ctx;
-    ctx.save();
-    ctx.beginPath();
-    ctx.rect(x, y, w, h);
-    ctx.clip();
-    ctx.clearRect(x, y, w, h);
-    draw(ctx, x, y);
-    ctx.restore();
-    const pixels = ctx.getImageData(x, y, w, h);
-    const data = pixels.data;
-    let inked = false;
-    let colored = false;
-    for (let i = 0; i < data.length; i += 4) {
-      if (data[i + 3] === 0) continue;
-      inked = true;
-      const r = data[i];
-      const g = data[i + 1];
-      const b = data[i + 2];
-      if (Math.max(r, g, b) - Math.min(r, g, b) > COLORED_SPREAD) {
-        colored = true;
-        break;
-      }
-    }
-    if (!inked) {
-      this.shelfX = x;
-      this.entries.set(key, null);
-      return null;
-    }
     const gl = this.gl;
     gl.bindTexture(gl.TEXTURE_2D, this.texture);
     gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
     gl.texSubImage2D(gl.TEXTURE_2D, 0, x, y, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
-    const entry = { x, y, w, h, colored };
+    const entry = {
+      x: x + ink.left,
+      y: y + ink.top,
+      w: ink.width,
+      h: ink.height,
+      ox: ink.left,
+      oy: ink.top,
+      colored: ink.colored,
+    };
     this.entries.set(key, entry);
     return entry;
   }
 
+  /** Doubles the texture, copying the old one into its top-left corner on the GPU. */
   private grow(): boolean {
-    const limit = Math.min(ATLAS_MAX, this.gl.getParameter(this.gl.MAX_TEXTURE_SIZE) as number);
+    const gl = this.gl;
+    const limit = Math.min(ATLAS_MAX, gl.getParameter(gl.MAX_TEXTURE_SIZE) as number);
     if (this.size * 2 > limit) return false;
-    const old = document.createElement('canvas');
-    old.width = this.size;
-    old.height = this.size;
-    old.getContext('2d')!.drawImage(this.mirror, 0, 0);
+    const old = this.texture;
+    const oldSize = this.size;
     this.size *= 2;
-    this.ctx = this.newMirror(this.size);
-    this.ctx.drawImage(old, 0, 0);
-    this.allocateTexture();
+    this.texture = this.newTexture(this.size);
+    const framebuffer = gl.createFramebuffer();
+    gl.bindFramebuffer(gl.READ_FRAMEBUFFER, framebuffer);
+    gl.framebufferTexture2D(gl.READ_FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, old, 0);
+    gl.bindTexture(gl.TEXTURE_2D, this.texture);
+    gl.copyTexSubImage2D(gl.TEXTURE_2D, 0, 0, 0, 0, 0, oldSize, oldSize);
+    gl.bindFramebuffer(gl.READ_FRAMEBUFFER, null);
+    gl.deleteFramebuffer(framebuffer);
+    gl.deleteTexture(old);
     this.shelfX = 0;
-    this.shelfY = old.height;
+    this.shelfY = oldSize;
     return true;
   }
 
@@ -244,6 +262,7 @@ export class WebglRenderer extends TerminalRenderer {
   private readonly glyphBuffer: WebGLBuffer;
   private readonly overlayRectBuffer: WebGLBuffer;
   private readonly overlayGlyphBuffer: WebGLBuffer;
+  private readonly decoBuffer: WebGLBuffer;
   private bgVao!: WebGLVertexArrayObject;
   private decoVao!: WebGLVertexArrayObject;
   private glyphVao!: WebGLVertexArrayObject;
@@ -262,6 +281,12 @@ export class WebglRenderer extends TerminalRenderer {
   private rectColors = new Uint32Array(0);
   private glyphWords = new Float32Array(0);
   private glyphColors = new Uint32Array(0);
+  private packedBg = instanceArrays(0, RECT_WORDS);
+  private packedDeco = instanceArrays(0, RECT_WORDS);
+  private packedGlyphs = instanceArrays(0, GLYPH_WORDS);
+  private bgCount = 0;
+  private decoCount = 0;
+  private glyphCount = 0;
   private readonly overlayRects = new Float32Array(OVERLAY_RECTS * RECT_WORDS);
   private readonly overlayRectColors = new Uint32Array(this.overlayRects.buffer);
   private readonly overlayGlyph = new Float32Array(GLYPH_WORDS);
@@ -286,6 +311,8 @@ export class WebglRenderer extends TerminalRenderer {
     selectionBackground: number;
     selectionForeground: number;
     link: number;
+    match: number;
+    activeMatch: number;
   };
 
   /** Called once if the WebGL context is lost; the terminal then switches renderer. */
@@ -327,6 +354,7 @@ export class WebglRenderer extends TerminalRenderer {
     );
     this.rectBuffer = gl.createBuffer()!;
     this.glyphBuffer = gl.createBuffer()!;
+    this.decoBuffer = gl.createBuffer()!;
     this.overlayRectBuffer = gl.createBuffer()!;
     this.overlayGlyphBuffer = gl.createBuffer()!;
     gl.bindBuffer(gl.ARRAY_BUFFER, this.overlayRectBuffer);
@@ -335,7 +363,7 @@ export class WebglRenderer extends TerminalRenderer {
     gl.bufferData(gl.ARRAY_BUFFER, this.overlayGlyph.byteLength, gl.DYNAMIC_DRAW);
     this.overlayRectVao = this.rectVao(this.overlayRectBuffer, 0);
     this.overlayGlyphVao = this.glyphVaoFor(this.overlayGlyphBuffer);
-    this.scrollbarVao = this.rectVao(this.overlayRectBuffer, RECT_WORDS * 4);
+    this.scrollbarVao = this.rectVao(this.overlayRectBuffer, CURSOR_RECTS * RECT_WORDS * 4);
     this.rectResolution = gl.getUniformLocation(this.rectProgram, 'u_resolution');
     this.glyphResolution = gl.getUniformLocation(this.glyphProgram, 'u_resolution');
     this.glyphAtlasSize = gl.getUniformLocation(this.glyphProgram, 'u_atlas');
@@ -410,16 +438,22 @@ export class WebglRenderer extends TerminalRenderer {
       const glyphs = new ArrayBuffer(cells * GLYPH_WORDS * 4);
       this.glyphWords = new Float32Array(glyphs);
       this.glyphColors = new Uint32Array(glyphs);
+      this.packedBg = instanceArrays(cells, RECT_WORDS);
+      this.packedDeco = instanceArrays(cells * 2, RECT_WORDS);
+      this.packedGlyphs = instanceArrays(cells, GLYPH_WORDS);
       const gl = this.gl;
-      gl.bindBuffer(gl.ARRAY_BUFFER, this.rectBuffer);
-      gl.bufferData(gl.ARRAY_BUFFER, rects.byteLength, gl.DYNAMIC_DRAW);
-      gl.bindBuffer(gl.ARRAY_BUFFER, this.glyphBuffer);
-      gl.bufferData(gl.ARRAY_BUFFER, glyphs.byteLength, gl.DYNAMIC_DRAW);
+      const allocate = (buffer: WebGLBuffer, packed: InstanceArrays) => {
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        gl.bufferData(gl.ARRAY_BUFFER, packed.bits.byteLength, gl.DYNAMIC_DRAW);
+      };
+      allocate(this.rectBuffer, this.packedBg);
+      allocate(this.decoBuffer, this.packedDeco);
+      allocate(this.glyphBuffer, this.packedGlyphs);
       for (const vao of [this.bgVao, this.decoVao, this.glyphVao]) {
         if (vao) gl.deleteVertexArray(vao);
       }
       this.bgVao = this.rectVao(this.rectBuffer, 0);
-      this.decoVao = this.rectVao(this.rectBuffer, cells * RECT_WORDS * 4);
+      this.decoVao = this.rectVao(this.decoBuffer, 0);
       this.glyphVao = this.glyphVaoFor(this.glyphBuffer);
     }
     this.markAllRows();
@@ -443,6 +477,10 @@ export class WebglRenderer extends TerminalRenderer {
     this.markAllRows();
   }
 
+  protected searchColorsChanged(): void {
+    this.parseTheme();
+  }
+
   private markAllRows(): void {
     this.dirtyFrom = 0;
     this.dirtyTo = this.rows - 1;
@@ -477,6 +515,8 @@ export class WebglRenderer extends TerminalRenderer {
       selectionBackground: this.parseColor(t.selectionBackground),
       selectionForeground: this.parseColor(t.selectionForeground),
       link: this.parseColor(LINK_COLOR),
+      match: this.parseColor(this.highlightColors.match),
+      activeMatch: this.parseColor(this.highlightColors.active),
     };
   }
 
@@ -521,8 +561,11 @@ export class WebglRenderer extends TerminalRenderer {
       const inverse = cell.flags & CellFlags.INVERSE;
 
       let bgWord = 0;
+      const highlight = selected ? 0 : this.highlightAt(x, y);
       if (selected) {
         bgWord = theme.selectionBackground;
+      } else if (highlight) {
+        bgWord = highlight === 2 ? theme.activeMatch : theme.match;
       } else {
         const r = inverse ? cell.fg_r : cell.bg_r;
         const g = inverse ? cell.fg_g : cell.bg_g;
@@ -538,17 +581,26 @@ export class WebglRenderer extends TerminalRenderer {
       }
 
       let fgWord: number;
-      if (selected) fgWord = theme.selectionForeground;
-      else if (inverse) fgWord = pack(cell.bg_r, cell.bg_g, cell.bg_b, 255);
-      else fgWord = pack(cell.fg_r, cell.fg_g, cell.fg_b, 255);
+      if (selected) {
+        fgWord = theme.selectionForeground;
+      } else {
+        const fg = inverse
+          ? (cell.bg_r << 16) | (cell.bg_g << 8) | cell.bg_b
+          : (cell.fg_r << 16) | (cell.fg_g << 8) | cell.fg_b;
+        const back = inverse
+          ? (cell.fg_r << 16) | (cell.fg_g << 8) | cell.fg_b
+          : (cell.bg_r << 16) | (cell.bg_g << 8) | cell.bg_b;
+        const shown = this.contrastedForeground(fg, back === 0 ? null : back);
+        fgWord = pack((shown >> 16) & 0xff, (shown >> 8) & 0xff, shown & 0xff, 255);
+      }
       if (cell.flags & CellFlags.FAINT) fgWord = ((fgWord & 0x00ffffff) | (128 << 24)) >>> 0;
       if (cell.flags & CellFlags.INVISIBLE) continue;
 
       if (!isBlank(cell)) {
         const entry = this.glyphFor(cell, x, y);
         if (entry) {
-          glyphs[glyph] = left - this.padX;
-          glyphs[glyph + 1] = top - this.padY;
+          glyphs[glyph] = left - this.padX + entry.ox;
+          glyphs[glyph + 1] = top - this.padY + entry.oy;
           glyphs[glyph + 2] = entry.x;
           glyphs[glyph + 3] = entry.y;
           glyphs[glyph + 4] = entry.w;
@@ -606,10 +658,7 @@ export class WebglRenderer extends TerminalRenderer {
   }
 
   private atlasFont(style: number): string {
-    let prefix = '';
-    if (style & CellFlags.ITALIC) prefix += 'italic ';
-    if (style & CellFlags.BOLD) prefix += 'bold ';
-    return `${prefix}${this.fontSize * this.devicePixelRatio}px ${this.fontFamily}`;
+    return this.fontString(style, this.fontSize * this.devicePixelRatio);
   }
 
   // ==========================================================================
@@ -650,7 +699,19 @@ export class WebglRenderer extends TerminalRenderer {
       rects[1] = top;
       rects[2] = width;
       rects[3] = height;
-      if (this.cursorStyle === 'underline') {
+      if (!overlay.focused) {
+        const t = Math.max(1, Math.round(this.devicePixelRatio));
+        const edges = [
+          [left, top, width, t],
+          [left, top + height - t, width, t],
+          [left, top, t, height],
+          [left + width - t, top, t, height],
+        ];
+        edges.forEach((edge, i) => {
+          rects.set(edge, i * RECT_WORDS);
+          colors[i * RECT_WORDS + 4] = theme.cursor;
+        });
+      } else if (this.cursorStyle === 'underline') {
         const h = Math.max(2, Math.floor(height * 0.15));
         rects[1] = top + height - h;
         rects[3] = h;
@@ -658,15 +719,15 @@ export class WebglRenderer extends TerminalRenderer {
         rects[2] = Math.max(2, Math.floor(width * 0.15));
       }
       colors[4] = theme.cursor;
-      key = `${left},${top},${this.cursorStyle}`;
-      if (this.cursorStyle === 'block') {
+      key = `${left},${top},${this.cursorStyle},${overlay.focused}`;
+      if (overlay.focused && this.cursorStyle === 'block') {
         const cell = this.currentBuffer?.getLine(overlay.cursorY)?.[overlay.cursorX];
         if (cell && !isBlank(cell) && !(cell.flags & CellFlags.INVISIBLE)) {
           const entry = this.glyphFor(cell, overlay.cursorX, overlay.cursorY);
           if (entry) {
             const g = this.overlayGlyph;
-            g[0] = left - this.padX;
-            g[1] = top - this.padY;
+            g[0] = left - this.padX + entry.ox;
+            g[1] = top - this.padY + entry.oy;
             g[2] = entry.x;
             g[3] = entry.y;
             g[4] = entry.w;
@@ -683,13 +744,13 @@ export class WebglRenderer extends TerminalRenderer {
       const dpr = this.devicePixelRatio;
       const opacity = overlay.scrollbarOpacity;
       const base = overlay.viewportY > 0 ? 0.5 : 0.3;
-      const track = RECT_WORDS;
+      const track = CURSOR_RECTS * RECT_WORDS;
       rects[track] = thumb.x * dpr;
       rects[track + 1] = thumb.trackY * dpr;
       rects[track + 2] = thumb.width * dpr;
       rects[track + 3] = thumb.trackHeight * dpr;
       colors[track + 4] = pack(128, 128, 128, Math.round(0.1 * opacity * 255));
-      const bar = RECT_WORDS * 2;
+      const bar = (CURSOR_RECTS + 1) * RECT_WORDS;
       rects[bar] = thumb.x * dpr;
       rects[bar + 1] = thumb.thumbY * dpr;
       rects[bar + 2] = thumb.width * dpr;
@@ -704,16 +765,22 @@ export class WebglRenderer extends TerminalRenderer {
     if (this.dirtyTo < this.dirtyFrom) return;
     const gl = this.gl;
     const cells = this.cols * this.rows;
-    const from = this.dirtyFrom * this.cols;
-    const count = (this.dirtyTo - this.dirtyFrom + 1) * this.cols;
-    gl.bindBuffer(gl.ARRAY_BUFFER, this.rectBuffer);
-    for (let segment = 0; segment < 3; segment++) {
-      const start = (segment * cells + from) * RECT_WORDS;
-      gl.bufferSubData(gl.ARRAY_BUFFER, start * 4, this.rectWords, start, count * RECT_WORDS);
-    }
-    gl.bindBuffer(gl.ARRAY_BUFFER, this.glyphBuffer);
-    const start = from * GLYPH_WORDS;
-    gl.bufferSubData(gl.ARRAY_BUFFER, start * 4, this.glyphWords, start, count * GLYPH_WORDS);
+    const slots = { words: this.rectWords, bits: this.rectColors };
+    this.bgCount = compactRects(slots, 0, cells, this.packedBg);
+    this.decoCount = compactRects(slots, cells, cells * 2, this.packedDeco);
+    this.glyphCount = compactGlyphs(
+      { words: this.glyphWords, bits: this.glyphColors },
+      cells,
+      this.packedGlyphs
+    );
+    const send = (buffer: WebGLBuffer, packed: InstanceArrays, count: number, wordsPer: number) => {
+      if (count === 0) return;
+      gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+      gl.bufferSubData(gl.ARRAY_BUFFER, 0, packed.bits, 0, count * wordsPer);
+    };
+    send(this.rectBuffer, this.packedBg, this.bgCount, RECT_WORDS);
+    send(this.decoBuffer, this.packedDeco, this.decoCount, RECT_WORDS);
+    send(this.glyphBuffer, this.packedGlyphs, this.glyphCount, GLYPH_WORDS);
     this.dirtyFrom = Number.POSITIVE_INFINITY;
     this.dirtyTo = -1;
   }
@@ -722,7 +789,6 @@ export class WebglRenderer extends TerminalRenderer {
     const gl = this.gl;
     const width = this.glCanvas.width;
     const height = this.glCanvas.height;
-    const cells = this.cols * this.rows;
     gl.viewport(0, 0, width, height);
     const bg = this.themeWords.background;
     const a = (bg >>> 24) / 255;
@@ -736,8 +802,10 @@ export class WebglRenderer extends TerminalRenderer {
 
     gl.useProgram(this.rectProgram);
     gl.uniform2f(this.rectResolution, width, height);
-    gl.bindVertexArray(this.bgVao);
-    gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, cells);
+    if (this.bgCount > 0) {
+      gl.bindVertexArray(this.bgVao);
+      gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, this.bgCount);
+    }
 
     gl.useProgram(this.glyphProgram);
     gl.uniform2f(this.glyphResolution, width, height);
@@ -745,18 +813,22 @@ export class WebglRenderer extends TerminalRenderer {
     gl.activeTexture(gl.TEXTURE0);
     gl.bindTexture(gl.TEXTURE_2D, this.atlas.texture);
     gl.uniform1i(this.glyphTexture, 0);
-    gl.bindVertexArray(this.glyphVao);
-    gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, cells);
+    if (this.glyphCount > 0) {
+      gl.bindVertexArray(this.glyphVao);
+      gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, this.glyphCount);
+    }
 
     gl.useProgram(this.rectProgram);
-    gl.bindVertexArray(this.decoVao);
-    gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, cells * 2);
+    if (this.decoCount > 0) {
+      gl.bindVertexArray(this.decoVao);
+      gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, this.decoCount);
+    }
 
     if (overlayKey) {
       gl.bindBuffer(gl.ARRAY_BUFFER, this.overlayRectBuffer);
       gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.overlayRects);
       gl.bindVertexArray(this.overlayRectVao);
-      gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, 1);
+      gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, CURSOR_RECTS);
       if (this.overlayGlyph[4] > 0) {
         gl.bindBuffer(gl.ARRAY_BUFFER, this.overlayGlyphBuffer);
         gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.overlayGlyph);
@@ -766,7 +838,7 @@ export class WebglRenderer extends TerminalRenderer {
         gl.useProgram(this.rectProgram);
       }
       gl.bindVertexArray(this.scrollbarVao);
-      gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, OVERLAY_RECTS - 1);
+      gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, SCROLLBAR_RECTS);
     }
     gl.bindVertexArray(null);
   }
@@ -832,6 +904,7 @@ export class WebglRenderer extends TerminalRenderer {
       for (const buffer of [
         this.quad,
         this.rectBuffer,
+        this.decoBuffer,
         this.glyphBuffer,
         this.overlayRectBuffer,
         this.overlayGlyphBuffer,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurigax-ai/ghostty-web",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "Ghostty's terminal engine (libghostty-vt) in the browser: WebAssembly build, an xterm.js-shaped API and WebGL and canvas renderers. A hard fork of coder/ghostty-web.",
   "type": "module",
   "main": "./lib/index.ts",