@termaxjs/web-ui 0.1.1

package/dist/renderer/DomRenderer.js

@@ -0,0 +1,112 @@
+import { CellFlags } from '@termaxjs/web-core';
+export class DomRenderer {
+    element;
+    lineElements = [];
+    options;
+    constructor(options = {}) {
+        this.options = {
+            cols: options.cols || 80,
+            rows: options.rows || 24,
+            fontFamily: options.fontFamily || 'monospace',
+            fontSize: options.fontSize || 14,
+            lineHeight: options.lineHeight || 1.2,
+            theme: options.theme || {},
+            cursorBlink: options.cursorBlink ?? true,
+            cursorStyle: options.cursorStyle || 'block',
+        };
+        const fontSize = this.options.fontSize || 14;
+        const fontFamily = this.options.fontFamily || 'monospace';
+        const lineHeight = this.options.lineHeight || 1.2;
+        this.element = document.createElement('div');
+        this.element.className = 'termaxui-dom-renderer';
+        this.element.setAttribute('role', 'region');
+        this.element.setAttribute('aria-label', 'Terminal Output');
+        this.element.setAttribute('aria-live', 'polite');
+        this.element.style.fontFamily = fontFamily;
+        this.element.style.fontSize = `${fontSize}px`;
+        this.element.style.lineHeight = `${lineHeight}`;
+        this.element.style.backgroundColor = this.options.theme?.background || '#181818';
+        this.element.style.color = this.options.theme?.foreground || '#ffffff';
+        this.element.style.whiteSpace = 'pre';
+        this.element.style.userSelect = 'text';
+        this.initLines(this.options.rows || 24);
+    }
+    attach(container) {
+        container.appendChild(this.element);
+    }
+    resize(cols, rows) {
+        this.options.cols = cols;
+        this.options.rows = rows;
+        this.initLines(rows);
+    }
+    updateTheme(theme) {
+        this.options.theme = theme;
+        this.element.style.backgroundColor = theme.background || '#181818';
+        this.element.style.color = theme.foreground || '#ffffff';
+    }
+    applyDiff(diff) {
+        if (diff.rows !== (this.options.rows || 24)) {
+            this.resize(diff.cols, diff.rows);
+        }
+        for (const dirtyRow of diff.dirtyRows) {
+            if (dirtyRow.row < this.lineElements.length) {
+                this.renderLine(dirtyRow.row, dirtyRow.cells);
+            }
+        }
+    }
+    initLines(rows) {
+        this.element.replaceChildren();
+        this.lineElements = new Array(rows);
+        for (let r = 0; r < rows; r++) {
+            const lineDiv = document.createElement('div');
+            lineDiv.className = 'termaxui-line';
+            lineDiv.textContent = ' ';
+            this.element.appendChild(lineDiv);
+            this.lineElements[r] = lineDiv;
+        }
+    }
+    renderLine(row, cells) {
+        const lineEl = this.lineElements[row];
+        if (!lineEl)
+            return;
+        lineEl.replaceChildren();
+        let currentSpan = null;
+        let currentStyle = '';
+        for (let col = 0; col < cells.length; col++) {
+            const cell = cells[col];
+            if (cell.width === 0)
+                continue;
+            const style = this.computeCellStyle(cell);
+            if (!currentSpan || style !== currentStyle) {
+                currentSpan = document.createElement('span');
+                if (style)
+                    currentSpan.style.cssText = style;
+                lineEl.appendChild(currentSpan);
+                currentStyle = style;
+            }
+            currentSpan.textContent += cell.char;
+        }
+        if (!lineEl.hasChildNodes()) {
+            lineEl.textContent = ' ';
+        }
+    }
+    computeCellStyle(cell) {
+        let css = '';
+        if (cell.fg.type === 'rgb' && cell.fg.r !== undefined) {
+            css += `color: rgb(${cell.fg.r},${cell.fg.g},${cell.fg.b});`;
+        }
+        if (cell.bg.type === 'rgb' && cell.bg.r !== undefined) {
+            css += `background-color: rgb(${cell.bg.r},${cell.bg.g},${cell.bg.b});`;
+        }
+        if (cell.flags & CellFlags.BOLD)
+            css += 'font-weight:bold;';
+        if (cell.flags & CellFlags.ITALIC)
+            css += 'font-style:italic;';
+        if (cell.flags & CellFlags.UNDERLINE)
+            css += 'text-decoration:underline;';
+        if (cell.flags & CellFlags.STRIKETHROUGH)
+            css += 'text-decoration:line-through;';
+        return css;
+    }
+}
+//# sourceMappingURL=DomRenderer.js.map

package/dist/renderer/DomRenderer.js.map

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

package/dist/renderer/GlyphAtlas.d.ts

@@ -0,0 +1,26 @@
+export interface GlyphLocation {
+    u0: number;
+    v0: number;
+    u1: number;
+    v1: number;
+    width: number;
+    height: number;
+}
+export declare class GlyphAtlas {
+    readonly width = 2048;
+    readonly height = 2048;
+    private canvas;
+    private ctx;
+    private glyphCache;
+    private nextX;
+    private nextY;
+    private rowHeight;
+    private dpr;
+    isDirty: boolean;
+    constructor(dpr?: number);
+    getCanvas(): HTMLCanvasElement | null;
+    getGlyph(char: string, font: string, fontSize: number, charWidth: number, charHeight: number): GlyphLocation;
+    private rasterizeGlyph;
+    clear(): void;
+}
+//# sourceMappingURL=GlyphAtlas.d.ts.map

package/dist/renderer/GlyphAtlas.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlyphAtlas.d.ts","sourceRoot":"","sources":["../../src/renderer/GlyphAtlas.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,qBAAa,UAAU;IACrB,SAAgB,KAAK,QAAQ;IAC7B,SAAgB,MAAM,QAAQ;IAC9B,OAAO,CAAC,MAAM,CAAkC;IAChD,OAAO,CAAC,GAAG,CAAyC;IACpD,OAAO,CAAC,UAAU,CAAyC;IAE3D,OAAO,CAAC,KAAK,CAAK;IAClB,OAAO,CAAC,KAAK,CAAK;IAClB,OAAO,CAAC,SAAS,CAAK;IACtB,OAAO,CAAC,GAAG,CAAK;IACT,OAAO,UAAS;gBAEX,GAAG,SAAI;IAcZ,SAAS,IAAI,iBAAiB,GAAG,IAAI;IAIrC,QAAQ,CACb,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,EAChB,SAAS,EAAE,MAAM,EACjB,UAAU,EAAE,MAAM,GACjB,aAAa;IAQhB,OAAO,CAAC,cAAc;IAsDf,KAAK,IAAI,IAAI;CAWrB"}

package/dist/renderer/GlyphAtlas.js

@@ -0,0 +1,86 @@
+export class GlyphAtlas {
+    width = 2048;
+    height = 2048;
+    canvas = null;
+    ctx = null;
+    glyphCache = new Map();
+    nextX = 0;
+    nextY = 0;
+    rowHeight = 0;
+    dpr = 1;
+    isDirty = false;
+    constructor(dpr = 1) {
+        this.dpr = dpr;
+        if (typeof document !== 'undefined') {
+            this.canvas = document.createElement('canvas');
+            this.canvas.width = this.width;
+            this.canvas.height = this.height;
+            this.ctx = this.canvas.getContext('2d', { willReadFrequently: true });
+            if (this.ctx) {
+                this.ctx.fillStyle = '#000000';
+                this.ctx.fillRect(0, 0, this.width, this.height);
+            }
+        }
+    }
+    getCanvas() {
+        return this.canvas;
+    }
+    getGlyph(char, font, fontSize, charWidth, charHeight) {
+        const key = `${char}_${font}_${fontSize}`;
+        const cached = this.glyphCache.get(key);
+        if (cached)
+            return cached;
+        return this.rasterizeGlyph(char, font, fontSize, charWidth, charHeight, key);
+    }
+    rasterizeGlyph(char, font, fontSize, charWidth, charHeight, key) {
+        const glyphW = Math.ceil(charWidth * this.dpr);
+        const glyphH = Math.ceil(charHeight * this.dpr);
+        if (this.nextX + glyphW > this.width) {
+            this.nextX = 0;
+            this.nextY += this.rowHeight + 2;
+            this.rowHeight = 0;
+        }
+        if (this.nextY + glyphH > this.height) {
+            // Atlas is full; reset
+            this.clear();
+        }
+        const x = this.nextX;
+        const y = this.nextY;
+        this.nextX += glyphW + 2;
+        this.rowHeight = Math.max(this.rowHeight, glyphH);
+        if (this.ctx) {
+            this.ctx.save();
+            this.ctx.fillStyle = '#000000';
+            this.ctx.fillRect(x, y, glyphW, glyphH);
+            this.ctx.fillStyle = '#ffffff';
+            this.ctx.font = `${fontSize * this.dpr}px ${font}`;
+            this.ctx.textBaseline = 'middle';
+            this.ctx.textAlign = 'left';
+            this.ctx.fillText(char, x, y + glyphH / 2);
+            this.ctx.restore();
+            this.isDirty = true;
+        }
+        const location = {
+            u0: x / this.width,
+            v0: y / this.height,
+            u1: (x + glyphW) / this.width,
+            v1: (y + glyphH) / this.height,
+            width: charWidth,
+            height: charHeight,
+        };
+        this.glyphCache.set(key, location);
+        return location;
+    }
+    clear() {
+        this.glyphCache.clear();
+        this.nextX = 0;
+        this.nextY = 0;
+        this.rowHeight = 0;
+        if (this.ctx) {
+            this.ctx.fillStyle = '#000000';
+            this.ctx.fillRect(0, 0, this.width, this.height);
+            this.isDirty = true;
+        }
+    }
+}
+//# sourceMappingURL=GlyphAtlas.js.map

package/dist/renderer/GlyphAtlas.js.map

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

package/dist/renderer/WebGpuRenderer.d.ts

@@ -0,0 +1,31 @@
+import { HoveredLink, ITerminalOptions, SearchMatch, SelectionRange, TerminalDiff, TerminalImage, TerminalTheme } from '@termaxjs/web-core';
+export declare class WebGpuRenderer {
+    readonly canvas: HTMLCanvasElement;
+    private fallbackRenderer;
+    private isWebGpuSupported;
+    private adapter;
+    private device;
+    private context;
+    private pipeline;
+    private atlas;
+    charWidth: number;
+    charHeight: number;
+    private dpr;
+    private options;
+    constructor(options?: ITerminalOptions);
+    private initWebGpu;
+    attach(container: HTMLElement): void;
+    updateTheme(theme: TerminalTheme): void;
+    setSelection(selection: SelectionRange | null): void;
+    setSearchMatches(matches: SearchMatch[]): void;
+    setHoveredLink(link: HoveredLink | null): void;
+    setImages(images: TerminalImage[]): void;
+    updateScroll(viewportY: number, totalLines: number): void;
+    resize(cols: number, rows: number): void;
+    applyDiff(diff: TerminalDiff): void;
+    renderAll(): void;
+    measureFont(): void;
+    resizeCanvas(): void;
+    isSupported(): boolean;
+}
+//# sourceMappingURL=WebGpuRenderer.d.ts.map

package/dist/renderer/WebGpuRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WebGpuRenderer.d.ts","sourceRoot":"","sources":["../../src/renderer/WebGpuRenderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,WAAW,EACX,gBAAgB,EAChB,WAAW,EACX,cAAc,EAGd,YAAY,EACZ,aAAa,EACb,aAAa,EACd,MAAM,oBAAoB,CAAC;AAqD5B,qBAAa,cAAc;IACzB,SAAgB,MAAM,EAAE,iBAAiB,CAAC;IAC1C,OAAO,CAAC,gBAAgB,CAAiB;IACzC,OAAO,CAAC,iBAAiB,CAAS;IAElC,OAAO,CAAC,OAAO,CAAa;IAC5B,OAAO,CAAC,MAAM,CAAa;IAC3B,OAAO,CAAC,OAAO,CAAa;IAC5B,OAAO,CAAC,QAAQ,CAAa;IAC7B,OAAO,CAAC,KAAK,CAAa;IAEnB,SAAS,SAAK;IACd,UAAU,SAAM;IACvB,OAAO,CAAC,GAAG,CAAK;IAChB,OAAO,CAAC,OAAO,CAAmB;gBAEtB,OAAO,GAAE,gBAAqB;YAQ5B,UAAU;IAsBjB,MAAM,CAAC,SAAS,EAAE,WAAW,GAAG,IAAI;IAIpC,WAAW,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAIvC,YAAY,CAAC,SAAS,EAAE,cAAc,GAAG,IAAI,GAAG,IAAI;IAIpD,gBAAgB,CAAC,OAAO,EAAE,WAAW,EAAE,GAAG,IAAI;IAI9C,cAAc,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,IAAI;IAI9C,SAAS,CAAC,MAAM,EAAE,aAAa,EAAE,GAAG,IAAI;IAIxC,YAAY,CAAC,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,IAAI;IAIzD,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI;IAIxC,SAAS,CAAC,IAAI,EAAE,YAAY,GAAG,IAAI;IAInC,SAAS,IAAI,IAAI;IAIjB,WAAW,IAAI,IAAI;IAMnB,YAAY,IAAI,IAAI;IAIpB,WAAW,IAAI,OAAO;CAG9B"}

package/dist/renderer/WebGpuRenderer.js

@@ -0,0 +1,134 @@
+import { GlyphAtlas } from './GlyphAtlas.js';
+import { CanvasRenderer } from './CanvasRenderer.js';
+const TERMINAL_WGSL = `
+struct Uniforms {
+  screenSize: vec2<f32>,
+  cellSize: vec2<f32>,
+};
+
+struct VertexInput {
+  @location(0) position: vec2<f32>,
+  @location(1) uv: vec2<f32>,
+  @location(2) cellPos: vec2<f32>,
+  @location(3) glyphUV0: vec2<f32>,
+  @location(4) glyphUV1: vec2<f32>,
+  @location(5) fgColor: vec4<f32>,
+  @location(6) bgColor: vec4<f32>,
+};
+
+struct VertexOutput {
+  @builtin(position) position: vec4<f32>,
+  @location(0) uv: vec2<f32>,
+  @location(1) fgColor: vec4<f32>,
+  @location(2) bgColor: vec4<f32>,
+};
+
+@group(0) @binding(0) var<uniform> uniforms: Uniforms;
+@group(0) @binding(1) var atlasTexture: texture_2d<f32>;
+@group(0) @binding(2) var atlasSampler: sampler;
+
+@vertex
+fn vs_main(input: VertexInput) -> VertexOutput {
+  var output: VertexOutput;
+  
+  let pixelPos = input.cellPos * uniforms.cellSize + input.position * uniforms.cellSize;
+  let ndc = (pixelPos / uniforms.screenSize) * 2.0 - 1.0;
+  output.position = vec4<f32>(ndc.x, -ndc.y, 0.0, 1.0);
+  
+  output.uv = mix(input.glyphUV0, input.glyphUV1, input.uv);
+  output.fgColor = input.fgColor;
+  output.bgColor = input.bgColor;
+  return output;
+}
+
+@fragment
+fn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {
+  let glyphAlpha = textureSample(atlasTexture, atlasSampler, input.uv).r;
+  let finalColor = mix(input.bgColor, input.fgColor, glyphAlpha);
+  return finalColor;
+}
+`;
+export class WebGpuRenderer {
+    canvas;
+    fallbackRenderer;
+    isWebGpuSupported = false;
+    adapter = null;
+    device = null;
+    context = null;
+    pipeline = null;
+    atlas;
+    charWidth = 9;
+    charHeight = 18;
+    dpr = 1;
+    options;
+    constructor(options = {}) {
+        this.options = options;
+        this.fallbackRenderer = new CanvasRenderer(options);
+        this.canvas = this.fallbackRenderer.canvas;
+        this.atlas = new GlyphAtlas(this.dpr);
+        this.initWebGpu();
+    }
+    async initWebGpu() {
+        if (typeof navigator === 'undefined' || !navigator.gpu) {
+            this.isWebGpuSupported = false;
+            return false;
+        }
+        try {
+            this.adapter = await navigator.gpu.requestAdapter();
+            if (!this.adapter)
+                return false;
+            this.device = await this.adapter.requestDevice();
+            this.context = this.canvas.getContext('webgpu');
+            if (!this.context)
+                return false;
+            this.isWebGpuSupported = true;
+            return true;
+        }
+        catch {
+            this.isWebGpuSupported = false;
+            return false;
+        }
+    }
+    attach(container) {
+        this.fallbackRenderer.attach(container);
+    }
+    updateTheme(theme) {
+        this.fallbackRenderer.updateTheme(theme);
+    }
+    setSelection(selection) {
+        this.fallbackRenderer.setSelection(selection);
+    }
+    setSearchMatches(matches) {
+        this.fallbackRenderer.setSearchMatches(matches);
+    }
+    setHoveredLink(link) {
+        this.fallbackRenderer.setHoveredLink(link);
+    }
+    setImages(images) {
+        this.fallbackRenderer.setImages(images);
+    }
+    updateScroll(viewportY, totalLines) {
+        this.fallbackRenderer.updateScroll(viewportY, totalLines);
+    }
+    resize(cols, rows) {
+        this.fallbackRenderer.resize(cols, rows);
+    }
+    applyDiff(diff) {
+        this.fallbackRenderer.applyDiff(diff);
+    }
+    renderAll() {
+        this.fallbackRenderer.renderAll();
+    }
+    measureFont() {
+        this.fallbackRenderer.measureFont();
+        this.charWidth = this.fallbackRenderer.charWidth;
+        this.charHeight = this.fallbackRenderer.charHeight;
+    }
+    resizeCanvas() {
+        this.fallbackRenderer.resizeCanvas();
+    }
+    isSupported() {
+        return this.isWebGpuSupported;
+    }
+}
+//# sourceMappingURL=WebGpuRenderer.js.map

package/dist/renderer/WebGpuRenderer.js.map

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

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@termaxjs/web-ui",
+  "version": "0.1.1",
+  "description": "High-performance Canvas/WebGL terminal renderer engine and Terminal controller for Termax",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "dependencies": {
+    "@termaxjs/web-core": "0.1.1"
+  },
+  "type": "module",
+  "devDependencies": {
+    "typescript": "^5.7.2",
+    "vitest": "^3.0.5"
+  },
+  "license": "Apache-2.0",
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc",
+    "check-types": "tsc --noEmit",
+    "test": "vitest run --passWithNoTests"
+  }
+}