@hex1b/web-terminal 0.167.0-alpha.1512.1.d6b2173 → 0.167.0-alpha.1519.1.b8be265

package/README.md

@@ -1,6 +1,6 @@
 # @hex1b/web-terminal
 
-The first-party WebGPU browser terminal for Hex1b. It renders server-authoritative
+The first-party GPU-rendered browser terminal for Hex1b. It renders server-authoritative
 cells and graphics in a module worker, with local input routing, producer-backed
 history and selection, clipboard actions, and primary/secondary view sizing.
 There are no runtime package dependencies.
@@ -53,10 +53,42 @@ connection, not the container or server-side shared terminal.
 
 ### Browser and deployment requirements
 
-Use HTTPS or localhost and a browser with WebGPU, module workers, transferable
-OffscreenCanvas, worker animation frames, ResizeObserver, and CSS Font Loading.
-Clipboard access also requires browser permission and, for relevant actions, a
-user gesture. There is no Canvas2D terminal-rendering fallback.
+Use a browser with WebGPU or WebGL2, module workers, transferable OffscreenCanvas,
+worker animation frames, ResizeObserver, and CSS Font Loading. WebGPU requires
+HTTPS or localhost; WebGL2 rendering also works on ordinary HTTP origins.
+Clipboard API access still requires a secure context, browser permission and,
+for relevant actions, a user gesture. There is no Canvas2D terminal-rendering fallback.
+Renderer selection does not change transport security: use HTTPS/WSS to protect
+terminal input and output.
+
+### Renderer selection
+
+Set the mount-time `renderer` option to `"auto"` (the default), `"webgpu"`, or
+`"webgl2"`. Auto prefers WebGPU and uses WebGL2 if the secure context, API,
+adapter, device acquisition, or presentation context is unavailable. Explicit
+modes require that backend and report an error rather than falling back.
+Shader, font, validation, and unexpected initialization errors are not
+compatibility fallbacks. Runtime GPU/context loss terminates the view with an
+error; it does not switch backends behind the caller's back.
+
+```ts
+const terminal = await WebTerminal.mount(container, {
+  url: "/ws/terminal",
+  renderer: "webgl2", // Use WebGL2 even if WebGPU is available.
+  onStats(stats) {
+    console.log(stats.renderer, stats.rendererFallbackReason);
+  }
+});
+```
+
+`stats.renderer` identifies the active backend after initialization.
+`stats.rendererFallbackReason` explains an automatic fallback and is absent
+for explicit selections and successful WebGPU initialization. Both backends
+share glyph rasterization, frame preparation, clipping, and image ordering.
+WebGPU preference is not a performance guarantee; compare representative
+workloads on your target browsers and devices.
+
+### Module and worker deployment
 
 The package contains browser ES modules, not a single bundle. For bare static
 hosting, copy **all of `dist/`**, preserving its directory structure, and import
@@ -100,6 +132,7 @@ workers, fonts, and the intended WebSocket endpoint.
 | --- | --- |
 | `workerUrl` | Optional module-worker entry; useful when worker assets are deployed separately. |
 | `scale` | GPU backing scale `0.5`–`3`, or `"auto"` (default, bounded device pixel ratio). |
+| `renderer` | `"auto"` (prefer WebGPU), `"webgpu"`, or `"webgl2"`; selected once per mount. |
 | `font` | One family and optional downloadable font faces; see below. |
 | `sizing` | `{ mode: "auto", fontSize?: number }` or `{ mode: "fixed", columns, rows, fontSize?: number }`. |
 | `readOnly` | Disable application input while retaining history inspection and selection. |
@@ -253,5 +286,6 @@ Only `dist/`, this README, the MIT license, and package metadata are shipped.
 A prepared tarball is self-contained and can be published with
 `npm publish ./hex1b-web-terminal-<version>.tgz --ignore-scripts`; it does not
 need development sources or build scripts. The package name is always
-`@hex1b/web-terminal`, including GitHub Packages. Registry selection is left to
-the caller; no registry is pinned in `package.json`.
+`@hex1b/web-terminal`. CI publishes main/release builds to npmjs; PR builds
+provide the tarball as the `npm-web-terminal` workflow artifact and do not
+publish it to a registry. No registry is pinned in `package.json`.

package/dist/backend-selection.d.ts

@@ -0,0 +1,7 @@
+import type { RenderBackend } from "./render-backend.js";
+import type { TerminalRendererPreference } from "./types.js";
+export declare function createRenderBackend(canvas: OffscreenCanvas, onFatal: (error: Error) => void, preference?: TerminalRendererPreference): Promise<{
+    backend: RenderBackend;
+    fallbackReason?: string;
+}>;
+//# sourceMappingURL=backend-selection.d.ts.map

package/dist/backend-selection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"backend-selection.d.ts","sourceRoot":"","sources":["../src/backend-selection.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAIzD,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAC;AAE7D,wBAAsB,mBAAmB,CAAC,MAAM,EAAE,eAAe,EAAE,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,EAChG,UAAU,GAAE,0BAAmC,GAAG,OAAO,CAAC;IAAE,OAAO,EAAE,aAAa,CAAC;IAAC,cAAc,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAe/G"}

package/dist/backend-selection.js

@@ -0,0 +1,23 @@
+import { RendererUnavailableError } from "./render-backend.js";
+import { normalizeRenderer } from "./renderer-options.js";
+import { WebGpuBackend } from "./webgpu-backend.js";
+import { WebGl2Backend } from "./webgl2-backend.js";
+export async function createRenderBackend(canvas, onFatal, preference = "auto") {
+    const requested = normalizeRenderer(preference);
+    if (requested === "webgl2")
+        return { backend: await WebGl2Backend.create(canvas, onFatal) };
+    try {
+        return { backend: await WebGpuBackend.create(canvas, onFatal) };
+    }
+    catch (error) {
+        if (requested !== "auto" || !(error instanceof RendererUnavailableError))
+            throw error;
+        try {
+            return { backend: await WebGl2Backend.create(canvas, onFatal), fallbackReason: error.message };
+        }
+        catch (fallbackError) {
+            throw new AggregateError([error, fallbackError], `WebGPU unavailable (${error.message}); WebGL2 initialization failed: ${fallbackError instanceof Error ? fallbackError.message : String(fallbackError)}`);
+        }
+    }
+}
+//# sourceMappingURL=backend-selection.js.map

package/dist/backend-selection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"backend-selection.js","sourceRoot":"","sources":["../src/backend-selection.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAE/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAGpD,MAAM,CAAC,KAAK,UAAU,mBAAmB,CAAC,MAAuB,EAAE,OAA+B,EAChG,aAAyC,MAAM;IAC/C,MAAM,SAAS,GAAG,iBAAiB,CAAC,UAAU,CAAC,CAAC;IAChD,IAAI,SAAS,KAAK,QAAQ;QAAE,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IAC5F,IAAI,CAAC;QACH,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IAClE,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,IAAI,SAAS,KAAK,MAAM,IAAI,CAAC,CAAC,KAAK,YAAY,wBAAwB,CAAC;YAAE,MAAM,KAAK,CAAC;QACtF,IAAI,CAAC;YACH,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,cAAc,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC;QACjG,CAAC;QAAC,OAAO,aAAa,EAAE,CAAC;YACvB,MAAM,IAAI,cAAc,CAAC,CAAC,KAAK,EAAE,aAAa,CAAC,EAC7C,uBAAuB,KAAK,CAAC,OAAO,oCAClC,aAAa,YAAY,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;QACxF,CAAC;IACH,CAAC;AACH,CAAC","sourcesContent":["import { RendererUnavailableError } from \"./render-backend.js\";\nimport type { RenderBackend } from \"./render-backend.js\";\nimport { normalizeRenderer } from \"./renderer-options.js\";\nimport { WebGpuBackend } from \"./webgpu-backend.js\";\nimport { WebGl2Backend } from \"./webgl2-backend.js\";\nimport type { TerminalRendererPreference } from \"./types.js\";\n\nexport async function createRenderBackend(canvas: OffscreenCanvas, onFatal: (error: Error) => void,\n  preference: TerminalRendererPreference = \"auto\"): Promise<{ backend: RenderBackend; fallbackReason?: string }> {\n  const requested = normalizeRenderer(preference);\n  if (requested === \"webgl2\") return { backend: await WebGl2Backend.create(canvas, onFatal) };\n  try {\n    return { backend: await WebGpuBackend.create(canvas, onFatal) };\n  } catch (error) {\n    if (requested !== \"auto\" || !(error instanceof RendererUnavailableError)) throw error;\n    try {\n      return { backend: await WebGl2Backend.create(canvas, onFatal), fallbackReason: error.message };\n    } catch (fallbackError) {\n      throw new AggregateError([error, fallbackError],\n        `WebGPU unavailable (${error.message}); WebGL2 initialization failed: ${\n          fallbackError instanceof Error ? fallbackError.message : String(fallbackError)}`);\n    }\n  }\n}\n"]}

package/dist/render-backend.d.ts

@@ -0,0 +1,31 @@
+export declare const QUAD_STRIDE = 16;
+export type RenderColor = [number, number, number, number];
+export type RenderPixels = Uint8Array<ArrayBuffer> | Uint8ClampedArray<ArrayBuffer>;
+export interface RenderTexture {
+    readonly width: number;
+    readonly height: number;
+    writePixels(pixels: RenderPixels, width: number, height: number, x?: number, y?: number): void;
+    writeBitmap(bitmap: ImageBitmap): void;
+    destroy(): void;
+}
+export interface RenderBatch {
+    resource: RenderTexture;
+    start: number;
+    count: number;
+}
+/** Internal graphics boundary; layout, rasterization and ordering belong to TerminalRenderer. */
+export interface RenderBackend {
+    readonly kind: "webgpu" | "webgl2";
+    readonly maxTextureDimension2D: number;
+    readonly maxCanvasDimension2D: number;
+    readonly instanceBufferBytes: number;
+    createTexture(width: number, height: number, label: string): RenderTexture;
+    resize(width: number, height: number): void;
+    submit(instances: Float32Array<ArrayBuffer>, quadCount: number, batches: readonly RenderBatch[], background: RenderColor): void;
+    idle(): Promise<void>;
+    dispose(): void;
+}
+/** Only capability/device acquisition failures may trigger automatic backend fallback. */
+export declare class RendererUnavailableError extends Error {
+}
+//# sourceMappingURL=render-backend.d.ts.map

package/dist/render-backend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render-backend.d.ts","sourceRoot":"","sources":["../src/render-backend.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,KAAK,CAAC;AAE9B,MAAM,MAAM,WAAW,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AAC3D,MAAM,MAAM,YAAY,GAAG,UAAU,CAAC,WAAW,CAAC,GAAG,iBAAiB,CAAC,WAAW,CAAC,CAAC;AAEpF,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/F,WAAW,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IACvC,OAAO,IAAI,IAAI,CAAC;CACjB;AAED,MAAM,WAAW,WAAW;IAAG,QAAQ,EAAE,aAAa,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE;AAEtF,iGAAiG;AACjG,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACnC,QAAQ,CAAC,qBAAqB,EAAE,MAAM,CAAC;IACvC,QAAQ,CAAC,oBAAoB,EAAE,MAAM,CAAC;IACtC,QAAQ,CAAC,mBAAmB,EAAE,MAAM,CAAC;IACrC,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,aAAa,CAAC;IAC3E,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,WAAW,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,WAAW,EAAE,EAC7F,UAAU,EAAE,WAAW,GAAG,IAAI,CAAC;IACjC,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IACtB,OAAO,IAAI,IAAI,CAAC;CACjB;AAED,0FAA0F;AAC1F,qBAAa,wBAAyB,SAAQ,KAAK;CAAG"}

package/dist/render-backend.js

@@ -0,0 +1,5 @@
+export const QUAD_STRIDE = 16;
+/** Only capability/device acquisition failures may trigger automatic backend fallback. */
+export class RendererUnavailableError extends Error {
+}
+//# sourceMappingURL=render-backend.js.map

package/dist/render-backend.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"render-backend.js","sourceRoot":"","sources":["../src/render-backend.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,WAAW,GAAG,EAAE,CAAC;AA6B9B,0FAA0F;AAC1F,MAAM,OAAO,wBAAyB,SAAQ,KAAK;CAAG","sourcesContent":["export const QUAD_STRIDE = 16;\n\nexport type RenderColor = [number, number, number, number];\nexport type RenderPixels = Uint8Array<ArrayBuffer> | Uint8ClampedArray<ArrayBuffer>;\n\nexport interface RenderTexture {\n  readonly width: number;\n  readonly height: number;\n  writePixels(pixels: RenderPixels, width: number, height: number, x?: number, y?: number): void;\n  writeBitmap(bitmap: ImageBitmap): void;\n  destroy(): void;\n}\n\nexport interface RenderBatch { resource: RenderTexture; start: number; count: number }\n\n/** Internal graphics boundary; layout, rasterization and ordering belong to TerminalRenderer. */\nexport interface RenderBackend {\n  readonly kind: \"webgpu\" | \"webgl2\";\n  readonly maxTextureDimension2D: number;\n  readonly maxCanvasDimension2D: number;\n  readonly instanceBufferBytes: number;\n  createTexture(width: number, height: number, label: string): RenderTexture;\n  resize(width: number, height: number): void;\n  submit(instances: Float32Array<ArrayBuffer>, quadCount: number, batches: readonly RenderBatch[],\n    background: RenderColor): void;\n  idle(): Promise<void>;\n  dispose(): void;\n}\n\n/** Only capability/device acquisition failures may trigger automatic backend fallback. */\nexport class RendererUnavailableError extends Error {}\n"]}

package/dist/renderer-options.d.ts

@@ -0,0 +1,3 @@
+import type { TerminalRendererPreference } from "./types.js";
+export declare function normalizeRenderer(value?: unknown): TerminalRendererPreference;
+//# sourceMappingURL=renderer-options.d.ts.map

package/dist/renderer-options.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderer-options.d.ts","sourceRoot":"","sources":["../src/renderer-options.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAC;AAE7D,wBAAgB,iBAAiB,CAAC,KAAK,GAAE,OAAgB,GAAG,0BAA0B,CAGrF"}

package/dist/renderer-options.js

@@ -0,0 +1,6 @@
+export function normalizeRenderer(value = "auto") {
+    if (value === "auto" || value === "webgpu" || value === "webgl2")
+        return value;
+    throw new TypeError('renderer must be "auto", "webgpu", or "webgl2"');
+}
+//# sourceMappingURL=renderer-options.js.map

package/dist/renderer-options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderer-options.js","sourceRoot":"","sources":["../src/renderer-options.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,iBAAiB,CAAC,QAAiB,MAAM;IACvD,IAAI,KAAK,KAAK,MAAM,IAAI,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,QAAQ;QAAE,OAAO,KAAK,CAAC;IAC/E,MAAM,IAAI,SAAS,CAAC,gDAAgD,CAAC,CAAC;AACxE,CAAC","sourcesContent":["import type { TerminalRendererPreference } from \"./types.js\";\n\nexport function normalizeRenderer(value: unknown = \"auto\"): TerminalRendererPreference {\n  if (value === \"auto\" || value === \"webgpu\" || value === \"webgl2\") return value;\n  throw new TypeError('renderer must be \"auto\", \"webgpu\", or \"webgl2\"');\n}\n"]}

package/dist/renderer.d.ts

@@ -1,13 +1,9 @@
+import type { RenderBackend, RenderBatch, RenderColor, RenderTexture } from "./render-backend.js";
 import type { FontMetrics, LoadedFont, NormalizedFont } from "./terminal-font.js";
-import type { TerminalFont, TerminalSize } from "./types.js";
+import type { TerminalFont, TerminalRendererPreference, TerminalSize } from "./types.js";
 import type { FrameImage, FrameMetadata, ImagePlacement, TerminalCell } from "./wire-types.js";
-type Vector4 = [number, number, number, number];
-interface TextureResource {
-    texture: GPUTexture;
-    bindGroup: GPUBindGroup;
-    width: number;
-    height: number;
-}
+type Vector4 = RenderColor;
+type TextureResource = RenderTexture;
 interface Shelf {
     x: number;
     y: number;
@@ -28,20 +24,16 @@ interface Glyph {
     u1: number;
     v1: number;
 }
-interface Batch {
-    resource: TextureResource;
-    start: number;
-    count: number;
-}
-/** WebGPU instanced quads; Canvas2D is used only to rasterize reusable glyphs. */
+type Batch = RenderBatch;
+/** Shared instanced-quad preparation; Canvas2D rasterizes reusable glyphs for either backend. */
 export declare class TerminalRenderer {
     canvas: OffscreenCanvas;
     scale: number;
     backingScale: number;
-    device: GPUDevice;
+    backend: RenderBackend;
+    fallbackReason?: string;
     fontConfiguration: NormalizedFont;
     fontMetrics: Map<number, FontMetrics>;
-    context: GPUCanvasContext;
     images: Map<string, TextureResource>;
     glyphs: Map<string, Glyph>;
     imageUploadBytes: number;
@@ -50,16 +42,10 @@ export declare class TerminalRenderer {
     atlasRebuilds: number;
     textureBytes: number;
     instances: Float32Array<ArrayBuffer>;
-    instanceBuffer: GPUBuffer | null;
-    instanceBufferBytes: number;
     disposed: boolean;
     columns: number;
     rows: number;
     font: LoadedFont;
-    format: GPUTextureFormat;
-    uniform: GPUBuffer;
-    sampler: GPUSampler;
-    pipeline: GPURenderPipeline;
     rasterCanvas: OffscreenCanvas;
     raster: OffscreenCanvasRenderingContext2D;
     atlas: TextureResource;
@@ -70,8 +56,8 @@ export declare class TerminalRenderer {
     height: number;
     quadCount: number;
     batches: Batch[];
-    static create(canvas: OffscreenCanvas, scale: number, onFatal: (error: Error | GPUError) => void, font: TerminalFont): Promise<TerminalRenderer>;
-    constructor(canvas: OffscreenCanvas, scale: number, device: GPUDevice, font: NormalizedFont);
+    static create(canvas: OffscreenCanvas, scale: number, onFatal: (error: Error) => void, font?: TerminalFont, preference?: TerminalRendererPreference): Promise<TerminalRenderer>;
+    constructor(canvas: OffscreenCanvas, scale: number, backend: RenderBackend, font: NormalizedFont);
     initialize(): Promise<void>;
     createTexture(width: number, height: number, label: string): TextureResource;
     resetAtlas(size: number): void;
@@ -91,6 +77,8 @@ export declare class TerminalRenderer {
         drawCalls: number;
     };
     metrics(): {
+        renderer: "webgl2" | "webgpu";
+        rendererFallbackReason: string | undefined;
         fontFamily: string;
         rasterScale: number;
         backingScale: number;

package/dist/renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../src/renderer.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../src/renderer.ts"],"names":[],"mappings":"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"}

package/dist/renderer.js

@@ -1,53 +1,14 @@
 import { LIMITS } from "./protocol.js";
 import { loadFont, measureFont, normalizeFont } from "./terminal-font.js";
+import { createRenderBackend } from "./backend-selection.js";
+import { QUAD_STRIDE } from "./render-backend.js";
 const CELL_WIDTH = 10;
 const CELL_HEIGHT = 20;
 const MAX_QUADS = 1024 * 1024;
 const MAX_GLYPHS = 16384;
 const MAX_GLYPH_KEY_UNITS = 1024 * 1024;
-const STRIDE = 16;
+const STRIDE = QUAD_STRIDE;
 const WHITE = [1, 1, 1, 1];
-const shader = /* wgsl */ `
-struct Viewport { size: vec2f, padding: vec2f }
-@group(0) @binding(0) var<uniform> viewport: Viewport;
-@group(0) @binding(1) var image: texture_2d<f32>;
-@group(0) @binding(2) var imageSampler: sampler;
-
-struct VertexOut {
-  @builtin(position) position: vec4f,
-  @location(0) uv: vec2f,
-  @location(1) color: vec4f,
-  @location(2) @interpolate(flat) mode: f32,
-}
-
-@vertex fn vertex(
-  @builtin(vertex_index) index: u32,
-  @location(0) rect: vec4f,
-  @location(1) uvRect: vec4f,
-  @location(2) color: vec4f,
-  @location(3) mode: f32,
-) -> VertexOut {
-  let corners = array<vec2f, 6>(
-    vec2f(0, 0), vec2f(1, 0), vec2f(0, 1),
-    vec2f(0, 1), vec2f(1, 0), vec2f(1, 1)
-  );
-  let corner = corners[index];
-  let position = rect.xy + corner * rect.zw;
-  var out: VertexOut;
-  out.position = vec4f(position / viewport.size * vec2f(2, -2) + vec2f(-1, 1), 0, 1);
-  out.uv = mix(uvRect.xy, uvRect.zw, corner);
-  out.color = color;
-  out.mode = mode;
-  return out;
-}
-
-@fragment fn fragment(in: VertexOut) -> @location(0) vec4f {
-  // Explicit LOD avoids derivative-uniformity requirements across solid/mask/image batches.
-  let texel = textureSampleLevel(image, imageSampler, in.uv, 0);
-  if (in.mode < 0.5) { return in.color; }
-  if (in.mode < 1.5) { return vec4f(in.color.rgb, in.color.a * texel.a); }
-  return texel * in.color;
-}`;
 function rgba(packed) {
     return [
         (packed & 255) / 255,
@@ -81,15 +42,15 @@ function packGlyphs(glyphs, size, scale, initial = { x: 0, y: 0, rowHeight: 0 })
     }
     return { placements, shelf: { x, y, rowHeight } };
 }
-/** WebGPU instanced quads; Canvas2D is used only to rasterize reusable glyphs. */
+/** Shared instanced-quad preparation; Canvas2D rasterizes reusable glyphs for either backend. */
 export class TerminalRenderer {
     canvas;
     scale;
     backingScale;
-    device;
+    backend;
+    fallbackReason;
     fontConfiguration;
     fontMetrics;
-    context;
     images;
     glyphs;
     imageUploadBytes;
@@ -98,17 +59,11 @@ export class TerminalRenderer {
     atlasRebuilds;
     textureBytes;
     instances;
-    instanceBuffer;
-    instanceBufferBytes;
     disposed;
     columns;
     rows;
     // Initialized by create() before the renderer can prepare or submit frames.
     font;
-    format;
-    uniform;
-    sampler;
-    pipeline;
     rasterCanvas;
     raster;
     atlas;
@@ -119,22 +74,13 @@ export class TerminalRenderer {
     height = 0;
     quadCount = 0;
     batches = [];
-    static async create(canvas, scale, onFatal, font) {
+    static async create(canvas, scale, onFatal, font, preference = "auto") {
         const normalizedFont = normalizeFont(font);
-        if (!self.isSecureContext)
-            throw new Error("WebGPU requires HTTPS or localhost");
-        if (!navigator.gpu)
-            throw new Error("WebGPU is unavailable in this browser worker");
-        const adapter = await navigator.gpu.requestAdapter();
-        if (!adapter)
-            throw new Error("No WebGPU adapter is available; check browser GPU support");
-        const device = await adapter.requestDevice();
-        const renderer = new TerminalRenderer(canvas, scale, device, normalizedFont);
-        device.lost.then(info => {
-            if (!renderer.disposed)
-                onFatal(new Error(`WebGPU device lost: ${info.message || info.reason}`));
-        });
-        device.addEventListener("uncapturederror", event => onFatal(event.error));
+        if (!Number.isFinite(scale) || scale < 0.5 || scale > 3)
+            throw new Error("Invalid backing scale");
+        const { backend, fallbackReason } = await createRenderBackend(canvas, onFatal, preference);
+        const renderer = new TerminalRenderer(canvas, scale, backend, normalizedFont);
+        renderer.fallbackReason = fallbackReason;
         try {
             await renderer.initialize();
             return renderer;
@@ -144,19 +90,15 @@ export class TerminalRenderer {
             throw error;
         }
     }
-    constructor(canvas, scale, device, font) {
+    constructor(canvas, scale, backend, font) {
         if (!Number.isFinite(scale) || scale < 0.5 || scale > 3)
             throw new Error("Invalid backing scale");
         this.canvas = canvas;
         this.scale = scale;
         this.backingScale = scale;
-        this.device = device;
+        this.backend = backend;
         this.fontConfiguration = font;
         this.fontMetrics = new Map();
-        const context = canvas.getContext("webgpu");
-        if (!context)
-            throw new Error("Could not create an OffscreenCanvas WebGPU context");
-        this.context = context;
         this.images = new Map();
         this.glyphs = new Map();
         this.imageUploadBytes = 0;
@@ -165,78 +107,24 @@ export class TerminalRenderer {
         this.atlasRebuilds = 0;
         this.textureBytes = 0;
         this.instances = new Float32Array(4096 * STRIDE);
-        this.instanceBuffer = null;
-        this.instanceBufferBytes = 0;
         this.disposed = false;
         this.columns = 0;
         this.rows = 0;
     }
     async initialize() {
         this.font = await loadFont(this.fontConfiguration);
-        const device = this.device;
-        this.format = navigator.gpu.getPreferredCanvasFormat();
-        this.context.configure({ device, format: this.format, alphaMode: "opaque" });
-        this.uniform = device.createBuffer({ size: 16, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST });
-        this.sampler = device.createSampler({ minFilter: "linear", magFilter: "linear" });
-        const module = device.createShaderModule({ code: shader });
-        this.pipeline = await device.createRenderPipelineAsync({
-            layout: "auto",
-            vertex: {
-                module,
-                entryPoint: "vertex",
-                buffers: [{
-                        arrayStride: STRIDE * 4,
-                        stepMode: "instance",
-                        attributes: [
-                            { shaderLocation: 0, offset: 0, format: "float32x4" },
-                            { shaderLocation: 1, offset: 16, format: "float32x4" },
-                            { shaderLocation: 2, offset: 32, format: "float32x4" },
-                            { shaderLocation: 3, offset: 48, format: "float32" },
-                        ],
-                    }],
-            },
-            fragment: {
-                module,
-                entryPoint: "fragment",
-                targets: [{
-                        format: this.format,
-                        blend: {
-                            color: { srcFactor: "src-alpha", dstFactor: "one-minus-src-alpha" },
-                            alpha: { srcFactor: "one", dstFactor: "one-minus-src-alpha" },
-                        },
-                    }],
-            },
-            primitive: { topology: "triangle-list" },
-        });
         this.rasterCanvas = new OffscreenCanvas(1, 1);
         const raster = this.rasterCanvas.getContext("2d", { willReadFrequently: true });
         if (!raster)
             throw new Error("Worker glyph rasterization is unavailable");
         this.raster = raster;
-        this.resetAtlas(Math.min(2048, device.limits.maxTextureDimension2D));
+        this.resetAtlas(Math.min(2048, this.backend.maxTextureDimension2D));
     }
     createTexture(width, height, label) {
-        if (width > this.device.limits.maxTextureDimension2D || height > this.device.limits.maxTextureDimension2D) {
-            throw new Error(`${label} exceeds the GPU texture dimension limit`);
-        }
-        const texture = this.device.createTexture({
-            label,
-            size: [width, height],
-            format: "rgba8unorm",
-            usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
-        });
-        const bindGroup = this.device.createBindGroup({
-            layout: this.pipeline.getBindGroupLayout(0),
-            entries: [
-                { binding: 0, resource: { buffer: this.uniform } },
-                { binding: 1, resource: texture.createView() },
-                { binding: 2, resource: this.sampler },
-            ],
-        });
-        return { texture, bindGroup, width, height };
+        return this.backend.createTexture(width, height, label);
     }
     resetAtlas(size) {
-        this.atlas?.texture.destroy();
+        this.atlas?.destroy();
         this.atlas = this.createTexture(size, size, "Glyph atlas");
         this.glyphs.clear();
         this.glyphKeyUnits = 0;
@@ -245,7 +133,7 @@ export class TerminalRenderer {
     resize(columns, rows, viewport) {
         const width = columns * CELL_WIDTH;
         const height = rows * CELL_HEIGHT;
-        const limit = this.device.limits.maxTextureDimension2D;
+        const limit = this.backend.maxCanvasDimension2D;
         const requested = Math.min(this.scale, viewport ? viewport.width / width : Infinity, viewport ? viewport.height / height : Infinity);
         this.canvasLimited = width * requested > limit || height * requested > limit;
         this.backingScale = Math.min(requested, limit / width, limit / height);
@@ -259,7 +147,7 @@ export class TerminalRenderer {
         this.height = height;
         this.canvas.width = backingWidth;
         this.canvas.height = backingHeight;
-        this.device.queue.writeBuffer(this.uniform, 0, new Float32Array([width, height, 0, 0]));
+        this.backend.resize(width, height);
     }
     /** Call only between submissions. Missing/over-budget resources terminate the session. */
     async updateImages(incoming, retainedKeys) {
@@ -276,7 +164,7 @@ export class TerminalRenderer {
             throw new Error("Retained images exceed the 256 MiB texture budget");
         for (const [key, image] of this.images) {
             if (!retained.has(key) || replacements.has(key)) {
-                image.texture.destroy();
+                image.destroy();
                 this.textureBytes -= image.width * image.height * 4;
                 this.images.delete(key);
             }
@@ -285,7 +173,7 @@ export class TerminalRenderer {
             const resource = this.createTexture(image.width, image.height, `Image ${image.key}`);
             try {
                 if (image.format === "rgba") {
-                    this.device.queue.writeTexture({ texture: resource.texture }, image.bytes, { bytesPerRow: image.width * 4, rowsPerImage: image.height }, [image.width, image.height]);
+                    resource.writePixels(image.bytes, image.width, image.height);
                 }
                 else {
                     // Check IHDR before decoding so a tiny PNG cannot claim unbounded decoded dimensions.
@@ -302,7 +190,7 @@ export class TerminalRenderer {
                     try {
                         if (bitmap.width !== image.width || bitmap.height !== image.height)
                             throw new Error("Decoded PNG dimension mismatch");
-                        this.device.queue.copyExternalImageToTexture({ source: bitmap }, { texture: resource.texture, premultipliedAlpha: false }, [image.width, image.height]);
+                        resource.writeBitmap(bitmap);
                     }
                     finally {
                         bitmap.close();
@@ -314,7 +202,7 @@ export class TerminalRenderer {
                 this.imagePayloadBytes += image.byteLength;
             }
             catch (error) {
-                resource.texture.destroy();
+                resource.destroy();
                 throw error;
             }
         }
@@ -338,7 +226,7 @@ export class TerminalRenderer {
         let plan = metadataFits ? packGlyphs(missing, this.atlas.width, this.scale, this.shelf) : null;
         if (!plan) {
             let size = this.atlas.width;
-            const maxSize = Math.min(4096, this.device.limits.maxTextureDimension2D);
+            const maxSize = Math.min(4096, this.backend.maxTextureDimension2D);
             while (!(plan = packGlyphs(visible, size, this.scale)) && size < maxSize) {
                 size = Math.min(size * 2, maxSize);
             }
@@ -378,7 +266,7 @@ export class TerminalRenderer {
                 break;
             }
         }
-        this.device.queue.writeTexture({ texture: this.atlas.texture, origin: [x, y] }, pixels.data, { bytesPerRow: width * 4, rowsPerImage: height }, [width, height]);
+        this.atlas.writePixels(pixels.data, width, height, x, y);
         this.glyphUploadBytes += width * height * 4;
         this.glyphs.set(key, {
             colored,
@@ -526,39 +414,14 @@ export class TerminalRenderer {
                 this.solid(x, y, CELL_WIDTH, CELL_HEIGHT, color);
             }
         }
-        const usedBytes = this.quadCount * STRIDE * 4;
-        if (!this.instanceBuffer || usedBytes > this.instanceBufferBytes) {
-            this.instanceBuffer?.destroy();
-            this.instanceBufferBytes = Math.max(256, this.instances.byteLength);
-            this.instanceBuffer = this.device.createBuffer({
-                size: this.instanceBufferBytes,
-                usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
-            });
-        }
-        if (usedBytes)
-            this.device.queue.writeBuffer(this.instanceBuffer, 0, this.instances, 0, this.quadCount * STRIDE);
-        const encoder = this.device.createCommandEncoder();
         const base = rgba(metadata.defaultBackground ?? cells[0]?.background ?? 0xff000000);
-        const pass = encoder.beginRenderPass({
-            colorAttachments: [{
-                    view: this.context.getCurrentTexture().createView(),
-                    clearValue: { r: base[0], g: base[1], b: base[2], a: 1 },
-                    loadOp: "clear",
-                    storeOp: "store",
-                }],
-        });
-        pass.setPipeline(this.pipeline);
-        pass.setVertexBuffer(0, this.instanceBuffer);
-        for (const batch of this.batches) {
-            pass.setBindGroup(0, batch.resource.bindGroup);
-            pass.draw(6, batch.count, 0, batch.start);
-        }
-        pass.end();
-        this.device.queue.submit([encoder.finish()]);
+        this.backend.submit(this.instances, this.quadCount, this.batches, base);
         return { cpuMs: performance.now() - start, quads: this.quadCount, drawCalls: this.batches.length };
     }
     metrics() {
         return {
+            renderer: this.backend.kind,
+            rendererFallbackReason: this.fallbackReason,
             fontFamily: this.font.family,
             rasterScale: this.scale,
             backingScale: this.backingScale,
@@ -572,24 +435,23 @@ export class TerminalRenderer {
             imageUploadBytes: this.imageUploadBytes,
             imagePayloadBytes: this.imagePayloadBytes,
             glyphUploadBytes: this.glyphUploadBytes,
-            instanceBufferBytes: this.instanceBufferBytes,
+            instanceBufferBytes: this.backend.instanceBufferBytes,
         };
     }
     async idle() {
-        await this.device.queue.onSubmittedWorkDone();
+        await this.backend.idle();
     }
     dispose() {
+        if (this.disposed)
+            return;
         this.disposed = true;
         for (const image of this.images.values())
-            image.texture.destroy();
+            image.destroy();
         this.images.clear();
-        this.atlas?.texture.destroy();
-        this.instanceBuffer?.destroy();
-        this.uniform?.destroy();
+        this.atlas?.destroy();
         this.font?.dispose();
         this.fontMetrics.clear();
-        this.context.unconfigure();
-        this.device.destroy();
+        this.backend.dispose();
     }
 }
 //# sourceMappingURL=renderer.js.map