ascii-shape-renderer 1.0.0

package/dist/lookup.js

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LookupCache = exports.KdTree = void 0;
+/**
+ * k-d tree for fast nearest-neighbor lookups in 6D space
+ */
+class KdTree {
+    constructor(vectors) {
+        this.root = null;
+        this.dimensions = vectors[0]?.vector.length ?? 6;
+        this.root = this.buildTree(vectors, 0);
+    }
+    buildTree(vectors, depth) {
+        if (vectors.length === 0)
+            return null;
+        const axis = depth % this.dimensions;
+        vectors.sort((a, b) => a.vector[axis] - b.vector[axis]);
+        const mid = Math.floor(vectors.length / 2);
+        return {
+            point: vectors[mid],
+            left: this.buildTree(vectors.slice(0, mid), depth + 1),
+            right: this.buildTree(vectors.slice(mid + 1), depth + 1),
+            axis,
+        };
+    }
+    findNearest(target) {
+        let best = this.root.point;
+        let bestDist = this.squaredDistance(target, best.vector);
+        const search = (node, depth) => {
+            if (!node)
+                return;
+            const dist = this.squaredDistance(target, node.point.vector);
+            if (dist < bestDist) {
+                bestDist = dist;
+                best = node.point;
+            }
+            const axis = node.axis;
+            const diff = target[axis] - node.point.vector[axis];
+            const first = diff < 0 ? node.left : node.right;
+            const second = diff < 0 ? node.right : node.left;
+            search(first, depth + 1);
+            if (diff * diff < bestDist) {
+                search(second, depth + 1);
+            }
+        };
+        search(this.root, 0);
+        return best;
+    }
+    squaredDistance(a, b) {
+        let sum = 0;
+        for (let i = 0; i < a.length; i++) {
+            const d = a[i] - b[i];
+            sum += d * d;
+        }
+        return sum;
+    }
+}
+exports.KdTree = KdTree;
+/**
+ * Cache for character lookups using quantized 30-bit keys
+ */
+class LookupCache {
+    constructor() {
+        this.cache = new Map();
+    }
+    generateKey(vector) {
+        let key = 0;
+        for (const v of vector) {
+            const quantized = Math.min(LookupCache.RANGE - 1, Math.floor(v * LookupCache.RANGE));
+            key = (key << LookupCache.BITS) | quantized;
+        }
+        return key;
+    }
+    get(key) {
+        return this.cache.get(key);
+    }
+    set(key, char) {
+        this.cache.set(key, char);
+    }
+    has(key) {
+        return this.cache.has(key);
+    }
+}
+exports.LookupCache = LookupCache;
+LookupCache.BITS = 5;
+LookupCache.RANGE = 2 ** LookupCache.BITS;

package/dist/renderer.d.ts

@@ -0,0 +1,40 @@
+import { AsciiRendererOptions } from './types';
+export interface ColoredChar {
+    char: string;
+    fg?: string;
+    bg?: string;
+}
+export declare class AsciiRenderer {
+    private options;
+    private shapeVectors;
+    private kdTree;
+    private cache;
+    constructor(options?: AsciiRendererOptions);
+    /**
+     * Convert image data to ASCII string (no color)
+     */
+    render(imageData: ImageData): string;
+    /**
+     * Convert image data to colored ASCII grid
+     */
+    renderColored(imageData: ImageData): ColoredChar[][];
+    /**
+     * Render to ANSI escape codes for terminal output
+     */
+    renderAnsi(imageData: ImageData): string;
+    /**
+     * Render to HTML with inline styles
+     */
+    renderHtml(imageData: ImageData): string;
+    private renderCell;
+    private sampleVector;
+    private sampleCircleLightness;
+    private sampleCellColor;
+    private darken;
+    private hexToRgb;
+    private lookupCharacter;
+    getGridSize(width: number, height: number): {
+        cols: number;
+        rows: number;
+    };
+}

package/dist/renderer.js

@@ -0,0 +1,170 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AsciiRenderer = void 0;
+const shape_vectors_1 = require("./shape-vectors");
+const lookup_1 = require("./lookup");
+const contrast_1 = require("./contrast");
+const DEFAULT_OPTIONS = {
+    cellWidth: 10,
+    cellHeight: 16,
+    samplingQuality: 3,
+    globalContrastExponent: 2,
+    directionalContrastExponent: 3,
+    characters: ' !"#$%&\'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~',
+    colorMode: 'none',
+};
+class AsciiRenderer {
+    constructor(options = {}) {
+        this.options = { ...DEFAULT_OPTIONS, ...options };
+        this.shapeVectors = (0, shape_vectors_1.generateShapeVectors)(this.options.characters, this.options.cellWidth, this.options.cellHeight);
+        this.kdTree = new lookup_1.KdTree(this.shapeVectors);
+        this.cache = new lookup_1.LookupCache();
+    }
+    /**
+     * Convert image data to ASCII string (no color)
+     */
+    render(imageData) {
+        return this.renderColored(imageData).map(row => row.map(c => c.char).join('')).join('\n');
+    }
+    /**
+     * Convert image data to colored ASCII grid
+     */
+    renderColored(imageData) {
+        const { cellWidth, cellHeight, colorMode } = this.options;
+        const cols = Math.floor(imageData.width / cellWidth);
+        const rows = Math.floor(imageData.height / cellHeight);
+        const result = [];
+        for (let row = 0; row < rows; row++) {
+            const line = [];
+            for (let col = 0; col < cols; col++) {
+                const cellX = col * cellWidth;
+                const cellY = row * cellHeight;
+                const char = this.renderCell(imageData, col, row, cols, rows);
+                const colored = { char };
+                if (colorMode !== 'none') {
+                    const color = this.sampleCellColor(imageData, cellX, cellY);
+                    if (colorMode === 'fg' || colorMode === 'both')
+                        colored.fg = color;
+                    if (colorMode === 'bg' || colorMode === 'both')
+                        colored.bg = this.darken(color, 0.3);
+                }
+                line.push(colored);
+            }
+            result.push(line);
+        }
+        return result;
+    }
+    /**
+     * Render to ANSI escape codes for terminal output
+     */
+    renderAnsi(imageData) {
+        const grid = this.renderColored(imageData);
+        return grid.map(row => row.map(c => {
+            let seq = '';
+            if (c.fg)
+                seq += `\x1b[38;2;${this.hexToRgb(c.fg)}m`;
+            if (c.bg)
+                seq += `\x1b[48;2;${this.hexToRgb(c.bg)}m`;
+            return seq + c.char + (c.fg || c.bg ? '\x1b[0m' : '');
+        }).join('')).join('\n');
+    }
+    /**
+     * Render to HTML with inline styles
+     */
+    renderHtml(imageData) {
+        const grid = this.renderColored(imageData);
+        const lines = grid.map(row => row.map(c => {
+            const styles = [];
+            if (c.fg)
+                styles.push(`color:${c.fg}`);
+            if (c.bg)
+                styles.push(`background:${c.bg}`);
+            const escaped = c.char.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+            return styles.length ? `<span style="${styles.join(';')}">${escaped}</span>` : escaped;
+        }).join(''));
+        return `<pre style="font-family:monospace;line-height:1">${lines.join('\n')}</pre>`;
+    }
+    renderCell(imageData, col, row, totalCols, totalRows) {
+        const { cellWidth, cellHeight, globalContrastExponent, directionalContrastExponent } = this.options;
+        const cellX = col * cellWidth;
+        const cellY = row * cellHeight;
+        const internal = this.sampleVector(imageData, cellX, cellY, shape_vectors_1.INTERNAL_CIRCLE_POSITIONS);
+        const external = this.sampleVector(imageData, cellX, cellY, shape_vectors_1.EXTERNAL_CIRCLE_POSITIONS);
+        const enhanced = (0, contrast_1.applyContrastEnhancement)(internal, external, globalContrastExponent, directionalContrastExponent);
+        return this.lookupCharacter(enhanced);
+    }
+    sampleVector(imageData, cellX, cellY, positions) {
+        const { cellWidth, cellHeight, samplingQuality } = this.options;
+        const radius = shape_vectors_1.CIRCLE_RADIUS * Math.min(cellWidth, cellHeight);
+        return positions.map(pos => {
+            const cx = cellX + pos.x * cellWidth;
+            const cy = cellY + pos.y * cellHeight;
+            return this.sampleCircleLightness(imageData, cx, cy, radius, samplingQuality);
+        });
+    }
+    sampleCircleLightness(imageData, cx, cy, radius, quality) {
+        let total = 0, count = 0;
+        for (let i = 0; i < quality; i++) {
+            for (let j = 0; j < quality; j++) {
+                const dx = (i / (quality - 1 || 1) - 0.5) * 2 * radius;
+                const dy = (j / (quality - 1 || 1) - 0.5) * 2 * radius;
+                if (dx * dx + dy * dy <= radius * radius) {
+                    const x = Math.floor(cx + dx), y = Math.floor(cy + dy);
+                    if (x >= 0 && x < imageData.width && y >= 0 && y < imageData.height) {
+                        const idx = (y * imageData.width + x) * 4;
+                        const r = imageData.data[idx] / 255;
+                        const g = imageData.data[idx + 1] / 255;
+                        const b = imageData.data[idx + 2] / 255;
+                        total += 0.2126 * r + 0.7152 * g + 0.0722 * b;
+                        count++;
+                    }
+                }
+            }
+        }
+        return count > 0 ? total / count : 0;
+    }
+    sampleCellColor(imageData, cellX, cellY) {
+        const { cellWidth, cellHeight } = this.options;
+        let r = 0, g = 0, b = 0, count = 0;
+        // Sample center region of cell
+        for (let dy = cellHeight * 0.25; dy < cellHeight * 0.75; dy += 2) {
+            for (let dx = cellWidth * 0.25; dx < cellWidth * 0.75; dx += 2) {
+                const x = Math.floor(cellX + dx), y = Math.floor(cellY + dy);
+                if (x >= 0 && x < imageData.width && y >= 0 && y < imageData.height) {
+                    const idx = (y * imageData.width + x) * 4;
+                    r += imageData.data[idx];
+                    g += imageData.data[idx + 1];
+                    b += imageData.data[idx + 2];
+                    count++;
+                }
+            }
+        }
+        if (count === 0)
+            return '#000000';
+        return `#${[r, g, b].map(c => Math.round(c / count).toString(16).padStart(2, '0')).join('')}`;
+    }
+    darken(hex, amount) {
+        const r = parseInt(hex.slice(1, 3), 16) * (1 - amount);
+        const g = parseInt(hex.slice(3, 5), 16) * (1 - amount);
+        const b = parseInt(hex.slice(5, 7), 16) * (1 - amount);
+        return `#${[r, g, b].map(c => Math.round(c).toString(16).padStart(2, '0')).join('')}`;
+    }
+    hexToRgb(hex) {
+        return `${parseInt(hex.slice(1, 3), 16)};${parseInt(hex.slice(3, 5), 16)};${parseInt(hex.slice(5, 7), 16)}`;
+    }
+    lookupCharacter(vector) {
+        const key = this.cache.generateKey(vector);
+        if (this.cache.has(key))
+            return this.cache.get(key);
+        const result = this.kdTree.findNearest(vector);
+        this.cache.set(key, result.character);
+        return result.character;
+    }
+    getGridSize(width, height) {
+        return {
+            cols: Math.floor(width / this.options.cellWidth),
+            rows: Math.floor(height / this.options.cellHeight),
+        };
+    }
+}
+exports.AsciiRenderer = AsciiRenderer;

package/dist/shape-vectors.d.ts

@@ -0,0 +1,15 @@
+import { ShapeVector } from './types';
+export declare const INTERNAL_CIRCLE_POSITIONS: {
+    x: number;
+    y: number;
+}[];
+export declare const EXTERNAL_CIRCLE_POSITIONS: {
+    x: number;
+    y: number;
+}[];
+export declare const AFFECTING_EXTERNAL_INDICES: number[][];
+export declare const CIRCLE_RADIUS = 0.18;
+/**
+ * Generate shape vectors for all ASCII characters by rendering them to canvas
+ */
+export declare function generateShapeVectors(characters?: string, cellWidth?: number, cellHeight?: number, font?: string): ShapeVector[];

package/dist/shape-vectors.js

@@ -0,0 +1,125 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CIRCLE_RADIUS = exports.AFFECTING_EXTERNAL_INDICES = exports.EXTERNAL_CIRCLE_POSITIONS = exports.INTERNAL_CIRCLE_POSITIONS = void 0;
+exports.generateShapeVectors = generateShapeVectors;
+// Default printable ASCII characters
+const DEFAULT_CHARS = ' !"#$%&\'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~';
+// 6 sampling circle positions (staggered 2x3 grid, normalized 0-1)
+// Left column slightly lower, right column slightly higher for better coverage
+exports.INTERNAL_CIRCLE_POSITIONS = [
+    { x: 0.25, y: 0.20 }, // top-left
+    { x: 0.75, y: 0.13 }, // top-right
+    { x: 0.25, y: 0.50 }, // mid-left
+    { x: 0.75, y: 0.50 }, // mid-right
+    { x: 0.25, y: 0.80 }, // bot-left
+    { x: 0.75, y: 0.87 }, // bot-right
+];
+// 10 external sampling circles for directional contrast
+exports.EXTERNAL_CIRCLE_POSITIONS = [
+    { x: 0.25, y: -0.15 }, // 0: above top-left
+    { x: 0.75, y: -0.15 }, // 1: above top-right
+    { x: -0.15, y: 0.20 }, // 2: left of top-left
+    { x: 1.15, y: 0.13 }, // 3: right of top-right
+    { x: -0.15, y: 0.50 }, // 4: left of mid-left
+    { x: 1.15, y: 0.50 }, // 5: right of mid-right
+    { x: -0.15, y: 0.80 }, // 6: left of bot-left
+    { x: 1.15, y: 0.87 }, // 7: right of bot-right
+    { x: 0.25, y: 1.15 }, // 8: below bot-left
+    { x: 0.75, y: 1.15 }, // 9: below bot-right
+];
+// Which external circles affect each internal circle (for directional contrast)
+exports.AFFECTING_EXTERNAL_INDICES = [
+    [0, 1, 2, 4], // top-left affected by: above-left, above-right, left-top, left-mid
+    [0, 1, 3, 5], // top-right affected by: above-left, above-right, right-top, right-mid
+    [2, 4, 6], // mid-left affected by: left-top, left-mid, left-bot
+    [3, 5, 7], // mid-right affected by: right-top, right-mid, right-bot
+    [4, 6, 8, 9], // bot-left affected by: left-mid, left-bot, below-left, below-right
+    [5, 7, 8, 9], // bot-right affected by: right-mid, right-bot, below-left, below-right
+];
+exports.CIRCLE_RADIUS = 0.18; // relative to cell dimensions
+/**
+ * Generate shape vectors for all ASCII characters by rendering them to canvas
+ */
+function generateShapeVectors(characters = DEFAULT_CHARS, cellWidth = 10, cellHeight = 16, font = 'monospace') {
+    const canvas = createCanvas(cellWidth, cellHeight);
+    const ctx = canvas.getContext('2d');
+    const vectors = [];
+    for (const char of characters) {
+        // Clear and render character
+        ctx.fillStyle = 'black';
+        ctx.fillRect(0, 0, cellWidth, cellHeight);
+        ctx.fillStyle = 'white';
+        ctx.font = `${cellHeight}px ${font}`;
+        ctx.textBaseline = 'top';
+        ctx.textAlign = 'center';
+        ctx.fillText(char, cellWidth / 2, 0);
+        const imageData = ctx.getImageData(0, 0, cellWidth, cellHeight);
+        const vector = sampleShapeVector(imageData, cellWidth, cellHeight);
+        vectors.push({ character: char, vector });
+    }
+    return normalizeShapeVectors(vectors);
+}
+function sampleShapeVector(imageData, cellWidth, cellHeight) {
+    const vector = [];
+    for (const pos of exports.INTERNAL_CIRCLE_POSITIONS) {
+        const overlap = sampleCircleOverlap(imageData, pos.x * cellWidth, pos.y * cellHeight, exports.CIRCLE_RADIUS * Math.min(cellWidth, cellHeight), cellWidth);
+        vector.push(overlap);
+    }
+    return vector;
+}
+function sampleCircleOverlap(imageData, cx, cy, radius, width) {
+    let total = 0;
+    let count = 0;
+    const r2 = radius * radius;
+    // Sample pixels within the circle
+    for (let dy = -radius; dy <= radius; dy++) {
+        for (let dx = -radius; dx <= radius; dx++) {
+            if (dx * dx + dy * dy <= r2) {
+                const x = Math.floor(cx + dx);
+                const y = Math.floor(cy + dy);
+                if (x >= 0 && x < width && y >= 0 && y < imageData.height) {
+                    const idx = (y * width + x) * 4;
+                    total += imageData.data[idx] / 255; // Red channel as lightness
+                    count++;
+                }
+            }
+        }
+    }
+    return count > 0 ? total / count : 0;
+}
+function normalizeShapeVectors(vectors) {
+    const dims = vectors[0].vector.length;
+    const maxPerDim = new Array(dims).fill(0);
+    // Find max value for each dimension
+    for (const { vector } of vectors) {
+        for (let i = 0; i < dims; i++) {
+            maxPerDim[i] = Math.max(maxPerDim[i], vector[i]);
+        }
+    }
+    // Normalize
+    return vectors.map(({ character, vector }) => ({
+        character,
+        vector: vector.map((v, i) => maxPerDim[i] > 0 ? v / maxPerDim[i] : 0),
+    }));
+}
+function createCanvas(width, height) {
+    // Node.js detection
+    const isNode = typeof process !== 'undefined' && process.versions?.node;
+    if (isNode) {
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        const canvas = eval('require')('canvas');
+        return canvas.createCanvas(width, height);
+    }
+    // Browser OffscreenCanvas
+    if (typeof OffscreenCanvas !== 'undefined') {
+        return new OffscreenCanvas(width, height);
+    }
+    // Browser DOM canvas
+    if (typeof document !== 'undefined') {
+        const canvas = document.createElement('canvas');
+        canvas.width = width;
+        canvas.height = height;
+        return canvas;
+    }
+    throw new Error('No canvas implementation available');
+}

package/dist/types.d.ts

@@ -0,0 +1,13 @@
+export interface AsciiRendererOptions {
+    cellWidth?: number;
+    cellHeight?: number;
+    samplingQuality?: number;
+    globalContrastExponent?: number;
+    directionalContrastExponent?: number;
+    characters?: string;
+    colorMode?: 'none' | 'fg' | 'bg' | 'both';
+}
+export interface ShapeVector {
+    character: string;
+    vector: number[];
+}

package/dist/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/video-renderer.d.ts

@@ -0,0 +1,30 @@
+import { VideoAsciiRendererOptions } from './video-types';
+export declare class VideoAsciiRenderer {
+    private options;
+    private renderer;
+    private video;
+    private canvas;
+    private ctx;
+    private output;
+    private container;
+    private animationId;
+    private lastFrameTime;
+    private frameInterval;
+    private _isPlaying;
+    constructor(options?: VideoAsciiRendererOptions);
+    load(source: File | string): Promise<void>;
+    mount(container: HTMLElement): void;
+    play(): void;
+    pause(): void;
+    seek(time: number): void;
+    setSpeed(rate: number): void;
+    get duration(): number;
+    get currentTime(): number;
+    get isPlaying(): boolean;
+    get videoWidth(): number;
+    get videoHeight(): number;
+    private renderLoop;
+    private renderFrame;
+    export(format?: 'webm' | 'mp4', onProgress?: (progress: number) => void): Promise<Blob>;
+    destroy(): void;
+}

package/dist/video-renderer.js

@@ -0,0 +1,198 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VideoAsciiRenderer = void 0;
+const renderer_1 = require("./renderer");
+const DEFAULT_OPTIONS = {
+    cellWidth: 8,
+    cellHeight: 14,
+    globalContrastExponent: 2,
+    directionalContrastExponent: 3,
+    colorMode: 'none',
+    targetFps: 24,
+    maxWidth: 640,
+    characters: ' !"#$%&\'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~',
+};
+class VideoAsciiRenderer {
+    constructor(options = {}) {
+        this.output = null;
+        this.container = null;
+        this.animationId = null;
+        this.lastFrameTime = 0;
+        this._isPlaying = false;
+        this.renderLoop = () => {
+            if (!this._isPlaying)
+                return;
+            const now = performance.now();
+            const elapsed = now - this.lastFrameTime;
+            if (elapsed >= this.frameInterval) {
+                this.lastFrameTime = now - (elapsed % this.frameInterval);
+                this.renderFrame();
+            }
+            if (!this.video.ended) {
+                this.animationId = requestAnimationFrame(this.renderLoop);
+            }
+            else {
+                this._isPlaying = false;
+            }
+        };
+        this.options = { ...DEFAULT_OPTIONS, ...options };
+        this.frameInterval = 1000 / this.options.targetFps;
+        this.renderer = new renderer_1.AsciiRenderer({
+            cellWidth: this.options.cellWidth,
+            cellHeight: this.options.cellHeight,
+            globalContrastExponent: this.options.globalContrastExponent,
+            directionalContrastExponent: this.options.directionalContrastExponent,
+            colorMode: this.options.colorMode,
+            characters: this.options.characters,
+        });
+        this.video = document.createElement('video');
+        this.video.playsInline = true;
+        this.video.muted = false;
+        this.canvas = document.createElement('canvas');
+        this.ctx = this.canvas.getContext('2d', { willReadFrequently: true });
+    }
+    async load(source) {
+        return new Promise((resolve, reject) => {
+            this.video.onloadedmetadata = () => {
+                const scale = Math.min(1, this.options.maxWidth / this.video.videoWidth);
+                this.canvas.width = Math.floor(this.video.videoWidth * scale);
+                this.canvas.height = Math.floor(this.video.videoHeight * scale);
+                resolve();
+            };
+            this.video.onerror = () => reject(new Error('Failed to load video'));
+            if (source instanceof File) {
+                this.video.src = URL.createObjectURL(source);
+            }
+            else {
+                this.video.src = source;
+            }
+        });
+    }
+    mount(container) {
+        this.container = container;
+        container.innerHTML = '';
+        // Create output element
+        this.output = document.createElement('pre');
+        this.output.style.cssText = 'margin:0;line-height:1;font-family:monospace;background:#000;overflow:hidden;';
+        if (this.options.colorMode === 'none') {
+            this.output.style.color = '#0f0';
+        }
+        container.appendChild(this.output);
+    }
+    play() {
+        if (this._isPlaying)
+            return;
+        this._isPlaying = true;
+        this.video.play();
+        this.lastFrameTime = performance.now();
+        this.renderLoop();
+    }
+    pause() {
+        this._isPlaying = false;
+        this.video.pause();
+        if (this.animationId) {
+            cancelAnimationFrame(this.animationId);
+            this.animationId = null;
+        }
+    }
+    seek(time) {
+        this.video.currentTime = time;
+        if (!this._isPlaying) {
+            this.renderFrame();
+        }
+    }
+    setSpeed(rate) {
+        this.video.playbackRate = rate;
+    }
+    get duration() {
+        return this.video.duration;
+    }
+    get currentTime() {
+        return this.video.currentTime;
+    }
+    get isPlaying() {
+        return this._isPlaying;
+    }
+    get videoWidth() {
+        return this.canvas.width;
+    }
+    get videoHeight() {
+        return this.canvas.height;
+    }
+    renderFrame() {
+        if (!this.output)
+            return;
+        this.ctx.drawImage(this.video, 0, 0, this.canvas.width, this.canvas.height);
+        const imageData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);
+        if (this.options.colorMode === 'none') {
+            this.output.textContent = this.renderer.render(imageData);
+        }
+        else {
+            this.output.innerHTML = this.renderer.renderHtml(imageData).replace(/<\/?pre[^>]*>/g, '');
+        }
+    }
+    async export(format = 'webm', onProgress) {
+        const renderCanvas = document.createElement('canvas');
+        const renderCtx = renderCanvas.getContext('2d');
+        // Calculate output dimensions based on ASCII grid
+        const cols = Math.floor(this.canvas.width / this.options.cellWidth);
+        const rows = Math.floor(this.canvas.height / this.options.cellHeight);
+        const fontSize = 10;
+        const charWidth = fontSize * 0.6;
+        renderCanvas.width = Math.ceil(cols * charWidth);
+        renderCanvas.height = rows * fontSize;
+        const stream = renderCanvas.captureStream(this.options.targetFps);
+        // Add audio track if available
+        const audioCtx = new AudioContext();
+        const source = audioCtx.createMediaElementSource(this.video);
+        const dest = audioCtx.createMediaStreamDestination();
+        source.connect(dest);
+        source.connect(audioCtx.destination);
+        dest.stream.getAudioTracks().forEach(track => stream.addTrack(track));
+        const mimeType = format === 'mp4' ? 'video/mp4' : 'video/webm';
+        const recorder = new MediaRecorder(stream, {
+            mimeType: MediaRecorder.isTypeSupported(mimeType) ? mimeType : 'video/webm'
+        });
+        const chunks = [];
+        recorder.ondataavailable = (e) => chunks.push(e.data);
+        return new Promise((resolve) => {
+            recorder.onstop = () => {
+                audioCtx.close();
+                resolve(new Blob(chunks, { type: mimeType }));
+            };
+            this.video.currentTime = 0;
+            recorder.start();
+            const exportFrame = () => {
+                if (this.video.ended || this.video.currentTime >= this.video.duration) {
+                    recorder.stop();
+                    return;
+                }
+                // Draw ASCII to canvas
+                this.ctx.drawImage(this.video, 0, 0, this.canvas.width, this.canvas.height);
+                const imageData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);
+                const ascii = this.renderer.render(imageData);
+                renderCtx.fillStyle = '#000';
+                renderCtx.fillRect(0, 0, renderCanvas.width, renderCanvas.height);
+                renderCtx.fillStyle = this.options.colorMode === 'none' ? '#0f0' : '#fff';
+                renderCtx.font = `${fontSize}px monospace`;
+                renderCtx.textBaseline = 'top';
+                const lines = ascii.split('\n');
+                lines.forEach((line, i) => {
+                    renderCtx.fillText(line, 0, i * fontSize);
+                });
+                onProgress?.(this.video.currentTime / this.video.duration);
+                this.video.requestVideoFrameCallback(exportFrame);
+            };
+            this.video.play();
+            this.video.requestVideoFrameCallback(exportFrame);
+        });
+    }
+    destroy() {
+        this.pause();
+        if (this.video.src.startsWith('blob:')) {
+            URL.revokeObjectURL(this.video.src);
+        }
+        this.container?.replaceChildren();
+    }
+}
+exports.VideoAsciiRenderer = VideoAsciiRenderer;