@utsp/render 0.16.1 → 0.17.0-nightly.20260120215017.712755a

package/dist/index.d.ts

@@ -66,473 +66,457 @@ declare function getCharGridPosition(charCode: number, blocks: AtlasBlocks): {
 };
 
 /**
- * Représente une cellule du terminal
- */
-interface TerminalCell {
-    /** Le caractère à afficher */
-    char: string;
-    /** Couleur du caractère (format CSS) */
-    fgColor: string;
-    /** Couleur de fond de la cellule (format CSS) */
-    bgColor: string;
-}
-/**
- * Données brutes pour définir le terminal en une fois
+ * WebGL compatibility report
  */
-interface TerminalData {
-    /** Largeur en cellules */
-    width: number;
-    /** Hauteur en cellules */
-    height: number;
-    /** Tableau de cellules (longueur = width * height) */
-    cells: Array<{
-        /** Code du caractère ou le caractère lui-même */
-        char: string;
-        /** Couleur du texte (format CSS) */
-        fgColor: string;
-        /** Couleur de fond (format CSS) */
-        bgColor: string;
-    }>;
+interface WebGLCompatibilityReport {
+    /** WebGL 1.0 support */
+    webgl1: boolean;
+    /** OES_element_index_uint extension (Uint32 indices) */
+    uint32Indices: boolean;
+    /** Maximum texture size */
+    maxTextureSize: number;
+    /** Maximum viewport dimensions */
+    maxViewportDims: [number, number];
+    /** Maximum terminal size with Uint16 indices (cols × rows) */
+    maxCellsUint16: number;
+    /** Maximum terminal size with Uint32 indices (cols × rows) */
+    maxCellsUint32: number;
+    /** Recommended maximum terminal size for this device */
+    recommendedMaxCells: number;
+    /** Warnings (empty if fully compatible) */
+    warnings: string[];
+    /** Errors (empty if compatible) */
+    errors: string[];
 }
 /**
- * Police bitmap matricielle
- * Map qui associe un code de caractère (charCode) à une représentation bitmap 8x8
- * Chaque Uint8Array contient 8 octets, un par ligne de pixels
- */
-type BitmapFont$1 = Map<number, Uint8Array>;
-/**
- * Type de police à utiliser
- */
-type FontType = {
-    type: 'web';
-    fontFamily: string;
-    fontSize: number;
-} | {
-    type: 'bitmap';
-    font: BitmapFont$1;
-    charWidth: number;
-    charHeight: number;
-};
-/**
- * Options pour la configuration du terminal
+ * Options for WebGL terminal configuration
  */
-interface RenderOptions {
-    /** Largeur d'une cellule en pixels (défaut: 8) - ignoré en mode fixedGrid */
-    cellWidth?: number;
-    /** Hauteur d'une cellule en pixels (défaut: 8) - ignoré en mode fixedGrid */
-    cellHeight?: number;
-    /** Taille de la police en pixels (défaut: 12) */
-    fontSize?: number;
-    /** Famille de police (défaut: "monospace") */
-    fontFamily?: string;
-    /** Couleur de texte par défaut (défaut: "#ffffff") */
-    defaultFgColor?: string;
-    /** Couleur de fond par défaut (défaut: "#000000") */
-    defaultBgColor?: string;
-    /** Couleur de fond du canvas lui-même (défaut: transparent). Si null ou undefined, le canvas sera transparent */
+interface TerminalGLOptions {
+    /** Number of columns (required) */
+    cols: number;
+    /** Number of rows (required) */
+    rows: number;
+    /** Character width in pixels */
+    charWidth?: number;
+    /** Character height in pixels */
+    charHeight?: number;
+    /** Canvas background color (CSS format, for gl.clearColor) */
     canvasBgColor?: string | null;
-    /** Afficher une grille de débogage (défaut: false) */
-    showDebugGrid?: boolean;
-    /** Couleur de la grille de débogage (défaut: "rgba(255, 0, 0, 0.3)") */
-    debugGridColor?: string;
-    /** Classes CSS additionnelles pour le canvas */
-    className?: string;
-    /** Style inline pour le canvas */
-    style?: Partial<CSSStyleDeclaration>;
-    /** Nombre de colonnes fixe (active le mode fixedGrid) */
-    fixedCols?: number;
-    /** Nombre de lignes fixe (active le mode fixedGrid) */
-    fixedRows?: number;
-    /** Ratio largeur/hauteur de cellule pour mode fixedGrid (défaut: 1 = carré) */
-    cellAspectRatio?: number;
+    /** Show cell delimitation grid (debug) */
+    showGrid?: boolean;
+    /** Force Uint16 indices (for compatibility testing, auto-detected by default) */
+    forceUint16?: boolean;
     /**
      * Scaling mode for pixel-perfect rendering (default: ScalingMode.None)
      *
      * Controls how the canvas is scaled to fit the container:
-     * - ScalingMode.None: Scales cells to fill space, may have sub-pixel artifacts
+     * - ScalingMode.None: Fills available space, may have sub-pixel artifacts (default)
      * - ScalingMode.Eighth: Snaps to 0.125 increments (1.0, 1.125, 1.25...)
      * - ScalingMode.Quarter: Snaps to 0.25 increments (1.0, 1.25, 1.5...)
      * - ScalingMode.Half: Snaps to 0.5 increments (1.0, 1.5, 2.0...)
      * - ScalingMode.Integer: Integer scaling only (1x, 2x, 3x...), crispest pixels
-     *
-     * Note: For ImageFont mode, this uses native glyph sizes + CSS transform scaling.
      */
     scalingMode?: ScalingMode;
+    /**
+     * Ambient effect configuration
+     *
+     * Creates a blurred glow effect around the terminal when using pixel-perfect
+     * scaling modes that leave empty space around the canvas.
+     *
+     * - false or undefined: Disabled (default)
+     * - true: Enabled with default settings (blur: 30px, scale: 1.15, opacity: 0.7)
+     * - object: Custom configuration
+     */
+    ambientEffect?: boolean | {
+        /** Blur radius in pixels (default: 30) */
+        blur?: number;
+        /** Scale factor for the background canvas (default: 1.15) */
+        scale?: number;
+        /** Opacity of the ambient effect (0-1, default: 0.7) */
+        opacity?: number;
+    };
 }
 /**
- * UTSP Render - Gère une grille de caractères avec couleurs
- * Similaire à un terminal mais avec contrôle total de chaque cellule
+ * Simplified terminal using WebGL for basic rendering
+ * Only supports bitmap fonts with atlas
+ * Implements IRenderer interface for dependency injection with core
  *
- * Implements IRenderer interface for compatibility with TerminalGL and dependency injection.
+ * ✨ SIMPLIFIED VERSION: Only backgrounds + colored characters
  */
-declare class Terminal2D implements IRenderer {
-    private containerDiv;
+declare class TerminalGL implements IRenderer {
+    /**
+     * Check WebGL 1.0 compatibility and device capabilities
+     *
+     * Tests all required WebGL features and returns a detailed compatibility report.
+     * Use this before creating a TerminalGL instance to ensure device support.
+     *
+     * @returns Detailed compatibility report with warnings and errors
+     *
+     * @example
+     * ```typescript
+     * const report = TerminalGL.checkCompatibility();
+     * if (report.errors.length > 0) {
+     *   console.error('WebGL not supported:', report.errors);
+     *   // Fallback to Canvas 2D renderer
+     * } else if (report.warnings.length > 0) {
+     *   console.warn('WebGL limitations:', report.warnings);
+     * }
+     * console.log(`Max terminal size: ${report.recommendedMaxCells} cells`);
+     * ```
+     */
+    static checkCompatibility(): WebGLCompatibilityReport;
     private canvas;
-    private ctx;
+    private gl;
     private parentElement;
-    private cells;
+    private containerDiv;
     private cols;
     private rows;
-    private fontSize;
-    private fontFamily;
-    private defaultFgColor;
-    private defaultBgColor;
-    private canvasBgColor;
+    private charWidth;
+    private charHeight;
     private cellWidth;
     private cellHeight;
-    private offsetX;
-    private offsetY;
-    private fontType;
-    private bitmapFont?;
-    private bitmapAtlas?;
-    private imageAtlas?;
-    private bitmapCharWidth;
-    private bitmapCharHeight;
-    private showDebugGrid;
-    private debugGridColor;
+    private glyphOffsetX;
+    private glyphOffsetY;
+    private canvasBgColor;
+    private showGrid;
+    private supportsUint32Indices;
+    private useUint16Indices;
     private gridOverlay?;
-    private fixedGridMode;
-    private fixedCols?;
-    private fixedRows?;
-    private cellAspectRatio;
+    private bitmapFont?;
+    private atlasTexture;
+    private atlasCanvas?;
+    private atlasColumns;
+    private fontLoaded;
+    private paletteTexture;
+    private program;
+    private positionBuffer;
+    private texCoordBuffer;
+    private colorIndexBuffer;
+    private indexBuffer;
+    private aPosition?;
+    private aTexCoord?;
+    private aColorIndex?;
+    private uResolution;
+    private uTexture;
+    private uPalette;
     private resizeObserver?;
-    private imageDataBuffer?;
-    private useImageDataRendering;
-    private paletteCache?;
-    private scalingMode;
+    private charCodeToAtlasIndex;
+    private atlasUVs;
+    private cachedAtlasWidth;
+    private cachedAtlasHeight;
+    private paletteFloat;
+    private maxCells;
+    private renderPositions;
+    private renderTexCoords;
+    private renderColorIndices;
+    private renderIndices;
+    private cachedResolution;
+    private cachedTextureUnit;
+    private cachedPaletteUnit;
+    private cachedTextureUniform;
+    private cachedPaletteUniform;
+    private paletteHash;
     private currentScale;
-    private customCellSize;
+    private scalingMode;
+    private ambientEffectEnabled;
+    private ambientEffectCanvas;
+    private ambientEffectCtx;
+    private ambientEffectBlur;
+    private ambientEffectScale;
+    private ambientEffectOpacity;
+    private onResizeCallback?;
+    private staticPositionsInitialized;
+    private vaoExtension;
+    private vao;
+    private instancedExtension;
+    private useInstancing;
+    private instanceDataBuffer;
+    private instanceData;
+    private templateQuadPositions;
+    private templateQuadIndices;
+    private aInstanceOffset;
+    private aInstanceUVs;
+    private aInstanceColors;
+    private uCellSize;
+    constructor(parentDiv: HTMLDivElement, options: TerminalGLOptions);
     /**
-     * Crée une instance de UTSPRender
-     * @param parentDiv - L'élément HTML parent dans lequel créer le canvas
-     * @param options - Options de configuration du terminal
+     * 🚀 INSTANCING: Initialize template quad and instance buffers
+     * Called once at init if instancing is supported
      */
-    constructor(parentDiv: HTMLElement, options?: RenderOptions);
+    private initInstancedBuffers;
     /**
-     * Calcule le nombre de colonnes et de lignes en fonction de la taille du parent
-     * et centre le terminal dans le canvas
-     *
-     * 🎯 PIXEL-PERFECT APPROACH (like TerminalGL):
-     * 1. Cell dimensions are ALWAYS integers (native font size)
-     * 2. Canvas renders at native resolution (cols * cellWidth)
-     * 3. CSS transform: scale() handles visual upscaling
-     * 4. Flexbox handles centering
+     * 🚀 OPTIMIZATION: Initialize pre-allocated buffers for rendering
+     * Avoids allocations each frame
+     * Uses Uint16 or Uint32 indices based on device support
      */
-    private calculateGridSize;
+    private initRenderBuffers;
     /**
-     * Crée une grille vide avec les valeurs par défaut
+     * 🚀 MEGA OPTIMIZATION: Pre-compute static positions for ALL possible quads
+     * Called only once after font load, or after resize
+     * Positions never change during rendering - only colors and UVs change!
      */
-    private createEmptyGrid;
+    private precomputeStaticPositions;
     /**
-     * Active le redimensionnement automatique
-     * Recalcule le nombre de colonnes/lignes quand le parent change de taille
+     * Initialize WebGL (shaders, buffers, etc.)
      */
-    private enableAutoResize;
-    /**
-     * Définit le contenu d'une cellule
-     * @param col - Colonne (0-indexed)
-     * @param row - Ligne (0-indexed)
-     * @param char - Caractère à afficher
-     * @param fgColor - Couleur du texte (optionnel, utilise la valeur par défaut si non fourni)
-     * @param bgColor - Couleur de fond (optionnel, utilise la valeur par défaut si non fourni)
-     */
-    setCell(col: number, row: number, char: string, fgColor?: string, bgColor?: string): void;
-    /**
-     * Récupère le contenu d'une cellule
-     * @param col - Colonne (0-indexed)
-     * @param row - Ligne (0-indexed)
-     */
-    getCell(col: number, row: number): TerminalCell | null;
+    private initWebGL;
     /**
-     * Écrit une chaîne de caractères à partir d'une position
-     * @param col - Colonne de départ
-     * @param row - Ligne
-     * @param text - Texte à écrire
-     * @param fgColor - Couleur du texte (optionnel)
-     * @param bgColor - Couleur de fond (optionnel)
+     * Compile a shader
      */
-    write(col: number, row: number, text: string, fgColor?: string, bgColor?: string): void;
+    private compileShader;
     /**
-     * Remplit une zone rectangulaire
-     * @param startCol - Colonne de départ
-     * @param startRow - Ligne de départ
-     * @param width - Largeur en cellules
-     * @param height - Hauteur en cellules
-     * @param char - Caractère de remplissage
-     * @param fgColor - Couleur du texte (optionnel)
-     * @param bgColor - Couleur de fond (optionnel)
+     * 🔲 Initialize 2D canvas overlay for debug grid
+     * Performance: 2D canvas drawn only once, 0ms per frame
      */
-    fillRect(startCol: number, startRow: number, width: number, height: number, char?: string, fgColor?: string, bgColor?: string): void;
+    private initGridOverlay;
     /**
-     * Efface tout le terminal (remplit avec des espaces)
+     * 🔲 Draw grid lines on 2D canvas overlay
+     * Called only once at init and resize
+     *
+     * The grid must match the terminal's pixel-perfect scaling:
+     * - Same base size as the main canvas
+     * - Same transform: scale() factor
+     * - Centered in the container like the main canvas (via flexbox or calculated position)
      */
-    clear(): void;
+    private updateGridOverlay;
     /**
-     * Définit tout le contenu du terminal à partir d'un tableau de données
-     * Le tableau doit contenir width * height éléments
-     * Les cellules sont lues ligne par ligne (row-major order)
+     * Configure bitmap font and generate atlas
      *
-     * @param data - Données du terminal avec dimensions et cellules
-     * @throws Error si le tableau n'a pas la bonne taille
+     * ⚠️ **INTERNAL USE ONLY** - This method is called automatically by ClientRuntime's
+     * event system when Core.loadBitmapFontById() is called. Do NOT call this directly
+     * unless you're implementing a custom runtime.
      *
-     * @example
-     * terminal.setFromArray({
-     *   width: 3,
-     *   height: 2,
-     *   cells: [
-     *     { char: 'A', fgColor: '#ff0000', bgColor: '#000000' }, // (0,0)
-     *     { char: 'B', fgColor: '#00ff00', bgColor: '#000000' }, // (1,0)
-     *     { char: 'C', fgColor: '#0000ff', bgColor: '#000000' }, // (2,0)
-     *     { char: 'D', fgColor: '#ffff00', bgColor: '#000000' }, // (0,1)
-     *     { char: 'E', fgColor: '#ff00ff', bgColor: '#000000' }, // (1,1)
-     *     { char: 'F', fgColor: '#00ffff', bgColor: '#000000' }, // (2,1)
-     *   ]
-     * });
-     */
-    setFromArray(data: TerminalData): void;
-    /**
-     * Rend la grille sur le canvas
-     * @param clearCanvas - Whether to clear the canvas before rendering (default: true)
-     *                      Set to false for multi-pass rendering (stacking layers)
+     * Event flow: Core.loadBitmapFontById() → Core.onBitmapFontChangedCallback
+     * → ClientRuntime.onCoreBitmapFontChanged() → RendererManager.setBitmapFont()
+     *
+     * @param font - Bitmap font mapping (charCode → byte array)
+     * @param charWidth - Width of each character in pixels
+     * @param charHeight - Height of each character in pixels
      */
-    render(clearCanvas?: boolean): void;
+    setBitmapFont(font: Map<number, Uint8Array>, charWidth: number, charHeight: number, cellWidth?: number, cellHeight?: number): void;
     /**
-     * Rendu ultra-rapide avec ImageData (bitmap)
-     * ~10-20× plus rapide que fillRect en boucle
-     * Fonctionne avec scaling : buffer natif 8×8 puis drawImage() pour upscale
-     * @param clearCanvas - Whether to clear the canvas before rendering
+     * Convertit la police Bitmap en texture Atlas
      */
-    private renderWithImageData;
+    private generateAtlas;
     /**
-     * Parse une couleur CSS en composantes RGBA
+     * Initialize ImageFont structure (allocate texture)
      */
-    private parseColorToRGB;
+    setImageFontStructure(glyphWidth: number, glyphHeight: number, cellWidth: number, cellHeight: number, atlasBlocks: AtlasBlocks): Promise<void>;
     /**
-     * Rendu classique avec fillRect/fillText (compatible scaling, web fonts, etc.)
-     * @param clearCanvas - Whether to clear the canvas before rendering
+     * Upload an image block to the atlas
      */
-    private renderClassic;
+    setImageFontBlock(blockIndex: number, data: Uint8Array): Promise<void>;
     /**
-     * Dessine un caractère en utilisant une police bitmap
+     * Set image font (legacy/full)
      */
-    private drawBitmapChar;
+    setImageFont(imageData: Uint8Array, glyphWidth: number, glyphHeight: number, cellWidth: number, cellHeight: number, atlasBlocks: AtlasBlocks): Promise<void>;
     /**
-     * Dessine une grille de débogage pour visualiser les cellules
+     * Load PNG image and create WebGL texture
      */
-    private drawDebugGrid;
+    private loadImageFontAtlas;
     /**
-     * Obtient le canvas HTML
+     * Pre-compute UVs for ImageFont (block-based grid layout)
+     *
+     * Atlas layout for multi-block fonts:
+     * - Each block contains 256 chars in a 16×16 grid
+     * - Blocks are arranged visually:
+     *   - 1 block:  1×1 (16×16 chars)
+     *   - 4 blocks: 2×2 (32×32 chars total)
+     *   - 16 blocks: 4×4 (64×64 chars total)
+     *
+     * CharCode mapping:
+     *   charCode 0-255   → Block 0 (top-left)
+     *   charCode 256-511 → Block 1 (top-right for 4 blocks)
+     *   charCode 512-767 → Block 2 (bottom-left for 4 blocks)
+     *   etc.
      */
-    getCanvas(): HTMLCanvasElement;
+    private precomputeImageFontUVs;
     /**
-     * Obtient le contexte 2D
+     * Create WebGL texture from atlas (Empty allocation)
      */
-    getContext(): CanvasRenderingContext2D;
+    private allocateAtlasTexture;
     /**
-     * Obtient les dimensions de la grille
+     * Create WebGL texture from atlas (Legacy canvas based)
      */
-    getDimensions(): {
-        cols: number;
-        rows: number;
-    };
+    private createAtlasTexture;
     /**
-     * Obtient les dimensions des cellules
+     * Clear entire terminal
+     *
+     * Clears the WebGL canvas. Note: Actual terminal content clearing is handled
+     * by Core's RenderState, not by this renderer.
+     *
+     * @example
+     * ```typescript
+     * renderer.clear();
+     * ```
      */
-    getCellDimensions(): {
-        cellWidth: number;
-        cellHeight: number;
-    };
+    clear(): void;
     /**
-     * Obtient la largeur d'une cellule
+     * Parse CSS color to normalized RGBA (0-1)
      */
-    getCellWidth(): number;
+    private parseColor;
     /**
-     * Obtient la hauteur d'une cellule
+     * Configure ResizeObserver to adapt canvas
      */
-    getCellHeight(): number;
+    private setupResizeObserver;
     /**
-     * Get current scaling factor (for pixel-perfect modes)
-     * Returns 1 if scalingMode is None or not using ImageFont
+     * Update canvas display size
+     *
+     * Supports multiple scaling modes:
+     *
+     * 🎯 INTEGER MODE (ScalingMode.Integer):
+     * Uses integer scaling (1x, 2x, 3x...) for crisp pixels without artifacts.
+     * The canvas is centered in the container via flexbox.
+     * May leave empty space around the canvas.
+     *
+     * 📐 HALF MODE (ScalingMode.Half):
+     * Snaps to half increments (1.0, 1.5, 2.0...).
+     * Good balance between space usage and visual quality.
+     *
+     * 📏 QUARTER MODE (ScalingMode.Quarter):
+     * Snaps to quarter increments (1.0, 1.25, 1.5, 1.75, 2.0...).
+     * Finer control over scaling with minimal artifacts.
+     *
+     * 🔲 NONE MODE (ScalingMode.None):
+     * Scales to fill as much space as possible while maintaining aspect ratio.
+     * May cause some lines to appear thicker due to sub-pixel rendering.
+     * Useful when maximizing screen usage is more important than pixel purity.
      */
-    getCurrentScale(): number;
+    private updateCanvasSize;
     /**
-     * Get scaling mode
+     * 🌈 AMBIENT EFFECT: Copy main canvas to ambient effect background
+     *
+     * This creates a glow effect around the terminal by copying the main
+     * WebGL canvas to a 2D canvas behind it, which has CSS blur applied.
      */
-    getScalingMode(): ScalingMode;
+    private updateAmbientEffect;
     /**
-     * Obtient les décalages de centrage du terminal
+     * Set color palette and upload to GPU
+     *
+     * ⚠️ IMPORTANT: This is the ONLY way to update the palette.
+     * Typically called automatically by ClientRuntime via Core.onPaletteChanged() event.
+     * Do NOT call this directly unless you know what you're doing.
+     *
+     * @param palette - Array of 256 RGB colors
+     *
+     * @example
+     * ```typescript
+     * // ✅ Normal usage: Core handles this automatically
+     * core.loadPaletteToSlot(0, [...]);
+     * display.switchPalette(0);
+     * // → ClientRuntime applies slot palette
+     * // → renderer.setPalette() called automatically
+     *
+     * // ⚠️ Manual usage (advanced):
+     * const myPalette: RGBColor[] = [
+     *   { r: 0, g: 0, b: 0, a: 255 },      // Color 0: Black
+     *   { r: 255, g: 0, b: 0, a: 255 },    // Color 1: Red
+     *   // ... 254 more colors
+     * ];
+     * renderer.setPalette(myPalette);
+     * ```
      */
-    getOffsets(): {
-        offsetX: number;
-        offsetY: number;
-    };
+    setPalette(palette: RGBColor[]): void;
     /**
-     * Active ou désactive la grille de débogage
-     * @param show - true pour afficher la grille, false pour la masquer
+     * 🚀 GPU OPTIMIZATION: Upload palette to GPU texture (256×1 RGBA)
      */
-    setDebugGrid(show: boolean): void;
+    private updatePaletteTexture;
     /**
-     * Change la couleur de fond du canvas
-     * @param color - Couleur CSS (ex: "#000000", "rgba(0,0,0,0.5)") ou null pour transparent
+     * Render display data from core engine (ULTRA-OPTIMIZED)
+     *
+     * Bypasses internal cells and renders directly from RenderState for maximum performance.
+     * Uses GPU palette texture lookup to minimize CPU→GPU bandwidth (4× reduction).
+     *
+     * @param data - Render state containing cells, dimensions, and palette
+     *
+     * @example
+     * ```typescript
+     * const renderState: RenderState = {
+     *   cells: [...],
+     *   width: 80,
+     *   height: 25,
+     *   palette: [...]
+     * };
+     * renderer.renderDisplayData(renderState);
+     * ```
      */
-    setCanvasBackgroundColor(color: string | null): void;
+    renderDisplayData(data: RenderState): void;
     /**
-     * Obtient la couleur de fond actuelle du canvas
-     * @returns La couleur de fond ou null si transparent
+     * Render multiple passes in order, clearing once then layering.
      */
-    getCanvasBackgroundColor(): string | null;
+    private renderMultiPass;
     /**
-     * Active le mode grille fixe avec le nombre de colonnes/lignes spécifié
-     * Les cellules s'adapteront en taille pour maintenir les dimensions demandées
-     * @param cols - Nombre de colonnes fixe
-     * @param rows - Nombre de lignes fixe
-     * @param aspectRatio - Ratio largeur/hauteur de cellule (optionnel, défaut: 10/14)
+     * 🚀 NEW METHOD: Render directly from RenderState
+     * Bypass this.cells for maximum performance
      */
-    setFixedGrid(cols: number, rows: number, aspectRatio?: number): void;
+    private renderDirect;
     /**
-     * Désactive le mode grille fixe et revient au mode adaptatif
-     * @param cellWidth - Largeur de cellule en pixels (optionnel)
-     * @param cellHeight - Hauteur de cellule en pixels (optionnel)
+     * 🚀 INSTANCED RENDERING: 1 draw call for entire terminal
+     * MASSIVE performance boost - reduces draw calls from cols×rows×2 to just 1!
      */
-    setAdaptiveGrid(cellWidth?: number, cellHeight?: number): void;
+    private renderInstanced;
     /**
-     * Vérifie si le terminal est en mode grille fixe
+     * 🚀 ULTRA-OPTIMIZED: Update ONLY dynamic data (colors + UVs)
+     * Positions are static and pre-computed - only updated on resize!
+     * This is a MASSIVE performance win - positions never change during normal rendering
      */
-    isFixedGridMode(): boolean;
+    private renderDirectBuffers;
     /**
-     * Définit la couleur de la grille de débogage
-     * @param color - Couleur CSS (ex: "rgba(255, 0, 0, 0.3)" ou "#ff0000")
-     */
-    setDebugGridColor(color: string): void;
-    /**
-     * Vérifie si la grille de débogage est activée
-     */
-    isDebugGridEnabled(): boolean;
-    /**
-     * Active ou désactive le rendu optimisé avec ImageData
-     * Uniquement disponible pour les polices bitmap à taille native (pas de scaling)
-     * Environ 10-20× plus rapide que le rendu classique, idéal pour les benchmarks
+     * Resize the terminal dimensions
      *
-     * @param enable - true pour activer, false pour désactiver
-     */
-    setImageDataRendering(enable: boolean): void;
-    /**
-     * Vérifie si le rendu ImageData est activé
-     */
-    isImageDataRenderingEnabled(): boolean;
-    /**
-     * Configure une police web (CSS)
-     * @param fontFamily - Nom de la police CSS (ex: "Courier New", "monospace")
-     * @param fontSize - Taille de la police en pixels (optionnel, garde la taille actuelle si non spécifié)
-     */
-    setWebFont(fontFamily: string, fontSize?: number): void;
-    /**
-     * Configure une police bitmap matricielle
-     * @param font - Map contenant les définitions bitmap des caractères (charCode -> Uint8Array)
-     * @param charWidth - Largeur du glyphe en pixels (bitmap source)
-     * @param charHeight - Hauteur du glyphe en pixels (bitmap source)
-     * @param cellWidth - Largeur de la cellule de rendu en pixels
-     * @param cellHeight - Hauteur de la cellule de rendu en pixels
-     */
-    setBitmapFont(font: BitmapFont$1, charWidth: number, charHeight: number, cellWidth: number, cellHeight: number): void;
-    /**
-     * Configure une police image (atlas PNG)
-     * @param imageData - Données PNG brutes
-     * @param glyphWidth - Largeur du glyphe en pixels
-     * @param glyphHeight - Hauteur du glyphe en pixels
-     * @param cellWidth - Largeur de la cellule en pixels
-     * @param cellHeight - Hauteur de la cellule en pixels
-     * @param atlasBlocks - Nombre de blocs de 256 caractères (1, 4, ou 16)
-     */
-    setImageFont(imageData: Uint8Array, glyphWidth: number, glyphHeight: number, cellWidth: number, cellHeight: number, atlasBlocks: AtlasBlocks): Promise<void>;
-    /**
-     * Retourne le type de police actuellement utilisé
-     */
-    getFontType(): 'web' | 'bitmap' | 'image';
-    /**
-     * Retourne la police bitmap actuelle (si applicable)
-     */
-    getBitmapFont(): BitmapFont$1 | undefined;
-    /**
-     * Retourne les dimensions de caractère bitmap (si applicable)
-     */
-    getBitmapCharDimensions(): {
-        width: number;
-        height: number;
-    } | null;
-    /**
-     * Set color palette (IRenderer contract).
-     * Called by ClientRuntime when Core palette changes.
+     * Changes the number of columns and rows. Preserves existing cell content
+     * where possible. Reallocates render buffers if needed.
      *
-     * @param palette - Array of 256 RGBA colors
-     */
-    setPalette(palette: RGBColor[]): void;
-    /**
-     * Render display data (IRenderer contract).
-     * Converts RenderState from Core to cell-based rendering.
+     * @param cols - New number of columns (must be positive integer)
+     * @param rows - New number of rows (must be positive integer)
      *
-     * @param display - Display data with palette indices
-     */
-    /**
-     * Helper: Convert palette index to CSS color
+     * @example
+     * ```typescript
+     * renderer.resize(120, 40); // Resize to 120×40
+     * ```
      */
-    private convertColor;
+    resize(cols: number, rows: number): void;
     /**
-     * Helper: Render a specific set of cells (one pass or full display)
+     * Get canvas element
      */
-    private renderDirect;
-    renderDisplayData(display: RenderState): void;
+    getCanvas(): HTMLCanvasElement;
     /**
-     * Check if renderer is ready to render (IRenderer contract).
-     * Canvas 2D is always ready immediately (no async initialization).
-     *
-     * @returns Always true for Canvas 2D
+     * Get grid dimensions
      */
-    isReady(): boolean;
+    getGridSize(): {
+        cols: number;
+        rows: number;
+    };
     /**
-     * Get width in columns (IRenderer contract).
+     * Get cell width
      */
-    getCols(): number;
+    getCellWidth(): number;
     /**
-     * Get height in rows (IRenderer contract).
+     * Get cell height
      */
-    getRows(): number;
+    getCellHeight(): number;
     /**
-     * Resize renderer dimensions (IRenderer contract).
-     *
-     * @param cols - New width in columns
-     * @param rows - New height in rows
+     * Get current integer scale factor
+     * Used by PostProcessOverlay to sync dimensions
      */
-    resize(cols: number, rows: number): void;
+    getCurrentScale(): number;
     /**
-     * Set scaling mode for pixel-perfect rendering
-     *
-     * @param mode - ScalingMode enum value:
-     *   - ScalingMode.None: Fill space, may have sub-pixel artifacts
-     *   - ScalingMode.Eighth: Snap to 0.125 increments (1.0, 1.125, 1.25...)
-     *   - ScalingMode.Quarter: Snap to 0.25 increments (1.0, 1.25, 1.5...)
-     *   - ScalingMode.Half: Snap to 0.5 increments (1.0, 1.5, 2.0...)
-     *   - ScalingMode.Integer: Crisp pixels, may waste space (1x, 2x, 3x...)
-     *   - ScalingMode.Responsive: No CSS scaling, cols/rows adapt to space
+     * Get base canvas dimensions (before scaling)
+     * Used by PostProcessOverlay to sync dimensions
      */
-    setScalingMode(mode: ScalingMode): void;
+    getBaseDimensions(): {
+        width: number;
+        height: number;
+    };
     /**
-     * Set cell dimensions in pixels (for Responsive mode)
-     *
-     * Changes the native pixel size of each character cell.
-     * This will trigger a canvas resize and re-render.
-     *
-     * @param cellWidth - Cell width in pixels (1-255)
-     * @param cellHeight - Cell height in pixels (1-255)
+     * Set callback to be called after every resize
+     * Used by ClientRuntime to sync PostProcessOverlay
      */
-    setCellSize(cellWidth: number, cellHeight: number): void;
+    setOnResizeCallback(callback: () => void): void;
     /**
-     * Get current cell size
+     * Clear the resize callback
      */
-    getCellSize(): {
-        cellWidth: number;
-        cellHeight: number;
-    };
+    clearOnResizeCallback(): void;
     /**
      * Get the available size from the parent container.
      * This is the actual pixel space available for rendering.
@@ -545,812 +529,588 @@ declare class Terminal2D implements IRenderer {
         height: number;
     };
     /**
-     * Get the maximum number of cells this renderer can handle
-     *
-     * Canvas 2D has very generous limits compared to WebGL.
-     * The main constraint is memory for the ImageData buffer.
-     *
-     * @returns Maximum cells supported (256×256 = 65536 for compatibility)
-     */
-    getMaxCells(): number;
-    /**
-     * Détruit le terminal et nettoie les ressources
-     */
-    destroy(): void;
-}
-
-/**
- * WebGL compatibility report
- */
-interface WebGLCompatibilityReport {
-    /** WebGL 1.0 support */
-    webgl1: boolean;
-    /** OES_element_index_uint extension (Uint32 indices) */
-    uint32Indices: boolean;
-    /** Maximum texture size */
-    maxTextureSize: number;
-    /** Maximum viewport dimensions */
-    maxViewportDims: [number, number];
-    /** Maximum terminal size with Uint16 indices (cols × rows) */
-    maxCellsUint16: number;
-    /** Maximum terminal size with Uint32 indices (cols × rows) */
-    maxCellsUint32: number;
-    /** Recommended maximum terminal size for this device */
-    recommendedMaxCells: number;
-    /** Warnings (empty if fully compatible) */
-    warnings: string[];
-    /** Errors (empty if compatible) */
-    errors: string[];
-}
-/**
- * Options for WebGL terminal configuration
- */
-interface TerminalGLOptions {
-    /** Number of columns (required) */
-    cols: number;
-    /** Number of rows (required) */
-    rows: number;
-    /** Character width in pixels */
-    charWidth?: number;
-    /** Character height in pixels */
-    charHeight?: number;
-    /** Canvas background color (CSS format, for gl.clearColor) */
-    canvasBgColor?: string | null;
-    /** Show cell delimitation grid (debug) */
-    showGrid?: boolean;
-    /** Force Uint16 indices (for compatibility testing, auto-detected by default) */
-    forceUint16?: boolean;
-    /**
-     * Scaling mode for pixel-perfect rendering (default: ScalingMode.None)
-     *
-     * Controls how the canvas is scaled to fit the container:
-     * - ScalingMode.None: Fills available space, may have sub-pixel artifacts (default)
-     * - ScalingMode.Eighth: Snaps to 0.125 increments (1.0, 1.125, 1.25...)
-     * - ScalingMode.Quarter: Snaps to 0.25 increments (1.0, 1.25, 1.5...)
-     * - ScalingMode.Half: Snaps to 0.5 increments (1.0, 1.5, 2.0...)
-     * - ScalingMode.Integer: Integer scaling only (1x, 2x, 3x...), crispest pixels
-     */
-    scalingMode?: ScalingMode;
-    /**
-     * Ambient effect configuration
-     *
-     * Creates a blurred glow effect around the terminal when using pixel-perfect
-     * scaling modes that leave empty space around the canvas.
-     *
-     * - false or undefined: Disabled (default)
-     * - true: Enabled with default settings (blur: 30px, scale: 1.15, opacity: 0.7)
-     * - object: Custom configuration
-     */
-    ambientEffect?: boolean | {
-        /** Blur radius in pixels (default: 30) */
-        blur?: number;
-        /** Scale factor for the background canvas (default: 1.15) */
-        scale?: number;
-        /** Opacity of the ambient effect (0-1, default: 0.7) */
-        opacity?: number;
-    };
-}
-/**
- * Simplified terminal using WebGL for basic rendering
- * Only supports bitmap fonts with atlas
- * Implements IRenderer interface for dependency injection with core
- *
- * ✨ SIMPLIFIED VERSION: Only backgrounds + colored characters
- */
-declare class TerminalGL implements IRenderer {
-    /**
-     * Check WebGL 1.0 compatibility and device capabilities
-     *
-     * Tests all required WebGL features and returns a detailed compatibility report.
-     * Use this before creating a TerminalGL instance to ensure device support.
-     *
-     * @returns Detailed compatibility report with warnings and errors
+     * Set scaling mode
      *
-     * @example
-     * ```typescript
-     * const report = TerminalGL.checkCompatibility();
-     * if (report.errors.length > 0) {
-     *   console.error('WebGL not supported:', report.errors);
-     *   // Fallback to Canvas 2D renderer
-     * } else if (report.warnings.length > 0) {
-     *   console.warn('WebGL limitations:', report.warnings);
-     * }
-     * console.log(`Max terminal size: ${report.recommendedMaxCells} cells`);
-     * ```
-     */
-    static checkCompatibility(): WebGLCompatibilityReport;
-    private canvas;
-    private gl;
-    private parentElement;
-    private containerDiv;
-    private cols;
-    private rows;
-    private charWidth;
-    private charHeight;
-    private cellWidth;
-    private cellHeight;
-    private glyphOffsetX;
-    private glyphOffsetY;
-    private canvasBgColor;
-    private showGrid;
-    private supportsUint32Indices;
-    private useUint16Indices;
-    private gridOverlay?;
-    private bitmapFont?;
-    private atlasTexture;
-    private atlasCanvas?;
-    private atlasColumns;
-    private fontLoaded;
-    private paletteTexture;
-    private program;
-    private positionBuffer;
-    private texCoordBuffer;
-    private colorIndexBuffer;
-    private indexBuffer;
-    private aPosition?;
-    private aTexCoord?;
-    private aColorIndex?;
-    private uResolution;
-    private uTexture;
-    private uPalette;
-    private resizeObserver?;
-    private charCodeToAtlasIndex;
-    private atlasUVs;
-    private cachedAtlasWidth;
-    private cachedAtlasHeight;
-    private paletteFloat;
-    private maxCells;
-    private renderPositions;
-    private renderTexCoords;
-    private renderColorIndices;
-    private renderIndices;
-    private cachedResolution;
-    private cachedTextureUnit;
-    private cachedPaletteUnit;
-    private cachedTextureUniform;
-    private cachedPaletteUniform;
-    private paletteHash;
-    private currentScale;
-    private scalingMode;
-    private ambientEffectEnabled;
-    private ambientEffectCanvas;
-    private ambientEffectCtx;
-    private ambientEffectBlur;
-    private ambientEffectScale;
-    private ambientEffectOpacity;
-    private onResizeCallback?;
-    private staticPositionsInitialized;
-    private vaoExtension;
-    private vao;
-    private instancedExtension;
-    private useInstancing;
-    private instanceDataBuffer;
-    private instanceData;
-    private templateQuadPositions;
-    private templateQuadIndices;
-    private aInstanceOffset;
-    private aInstanceUVs;
-    private aInstanceColors;
-    private uCellSize;
-    constructor(parentDiv: HTMLDivElement, options: TerminalGLOptions);
-    /**
-     * 🚀 INSTANCING: Initialize template quad and instance buffers
-     * Called once at init if instancing is supported
-     */
-    private initInstancedBuffers;
-    /**
-     * 🚀 OPTIMIZATION: Initialize pre-allocated buffers for rendering
-     * Avoids allocations each frame
-     * Uses Uint16 or Uint32 indices based on device support
-     */
-    private initRenderBuffers;
-    /**
-     * 🚀 MEGA OPTIMIZATION: Pre-compute static positions for ALL possible quads
-     * Called only once after font load, or after resize
-     * Positions never change during rendering - only colors and UVs change!
+     * @param mode - ScalingMode enum value:
+     *   - ScalingMode.None: Fill space, may have sub-pixel artifacts
+     *   - ScalingMode.Eighth: Snap to 0.125 increments (1.0, 1.125, 1.25...)
+     *   - ScalingMode.Quarter: Snap to 0.25 increments (1.0, 1.25, 1.5...)
+     *   - ScalingMode.Half: Snap to 0.5 increments (1.0, 1.5, 2.0...)
+     *   - ScalingMode.Integer: Crisp pixels, may waste space (1x, 2x, 3x...)
      */
-    private precomputeStaticPositions;
+    setScalingMode(mode: ScalingMode): void;
     /**
-     * Initialize WebGL (shaders, buffers, etc.)
+     * Get current scaling mode
      */
-    private initWebGL;
+    getScalingMode(): ScalingMode;
     /**
-     * Compile a shader
+     * Set cell dimensions in pixels
+     *
+     * Changes the native pixel size of each character cell.
+     * This will trigger a canvas resize and buffer reallocation.
+     *
+     * @param cellWidth - Cell width in pixels (1-255)
+     * @param cellHeight - Cell height in pixels (1-255)
      */
-    private compileShader;
+    setCellSize(cellWidth: number, cellHeight: number): void;
     /**
-     * 🔲 Initialize 2D canvas overlay for debug grid
-     * Performance: 2D canvas drawn only once, 0ms per frame
+     * Get current cell size
      */
-    private initGridOverlay;
+    getCellSize(): {
+        cellWidth: number;
+        cellHeight: number;
+    };
     /**
-     * 🔲 Draw grid lines on 2D canvas overlay
-     * Called only once at init and resize
+     * Get the maximum number of cells this renderer can handle
      *
-     * The grid must match the terminal's pixel-perfect scaling:
-     * - Same base size as the main canvas
-     * - Same transform: scale() factor
-     * - Centered in the container like the main canvas (via flexbox or calculated position)
+     * This depends on device capabilities:
+     * - With instanced rendering: ~262,144 cells (limited by GPU memory)
+     * - With Uint32 indices: ~262,144 cells
+     * - With Uint16 indices only: ~8,191 cells (~90×90)
+     *
+     * Use this in responsive mode to clamp calculated cols/rows.
+     *
+     * @returns Maximum cells supported by this renderer
      */
-    private updateGridOverlay;
+    getMaxCells(): number;
     /**
-     * Configure bitmap font and generate atlas
-     *
-     * ⚠️ **INTERNAL USE ONLY** - This method is called automatically by ClientRuntime's
-     * event system when Core.loadBitmapFontById() is called. Do NOT call this directly
-     * unless you're implementing a custom runtime.
+     * Enable or configure debug grid overlay
      *
-     * Event flow: Core.loadBitmapFontById() → Core.onBitmapFontChangedCallback
-     * → ClientRuntime.onCoreBitmapFontChanged() → RendererManager.setBitmapFont()
+     * The grid shows cell boundaries aligned with the terminal grid.
+     * Useful for debugging layout and alignment issues.
      *
-     * @param font - Bitmap font mapping (charCode → byte array)
-     * @param charWidth - Width of each character in pixels
-     * @param charHeight - Height of each character in pixels
-     * @param cellWidth - Width of each cell in pixels
-     * @param cellHeight - Height of each cell in pixels
-     * @throws {Error} If atlas generation fails
+     * @param config - Configuration options:
+     *   - enabled: Whether to show the grid
+     *   - color: CSS color string (e.g., 'rgba(255,0,0,0.5)', '#ff0000')
+     *   - lineWidth: Line width in pixels (1-10)
      *
      * @example
      * ```typescript
-     * // ❌ DON'T: Call setBitmapFont directly
-     * renderer.setBitmapFont(font, 8, 16, 8, 16);
-     *
-     * // ✅ DO: Use Core's loadBitmapFontById (triggers event automatically)
-     * core.loadBitmapFontById(1, {
-     *   charWidth: 8, charHeight: 16,
-     *   cellWidth: 8, cellHeight: 16,
-     *   glyphs: new Map([[65, new Uint8Array([...])]])
-     * });
-     * ```
-     */
-    setBitmapFont(font: BitmapFont$1, charWidth: number, charHeight: number, cellWidth: number, cellHeight: number): void;
-    /**
-     * Set image font (PNG atlas) for extended character rendering
-     * Supports 1, 4, or 16 blocks (256, 1024, or 4096 characters)
+     * // Enable with default red color
+     * renderer.setGrid({ enabled: true });
+     *
+     * // Custom green grid
+     * renderer.setGrid({ enabled: true, color: 'rgba(0, 255, 0, 0.5)' });
      *
-     * @param imageData - PNG image data as Uint8Array
-     * @param glyphWidth - Glyph width in pixels
-     * @param glyphHeight - Glyph height in pixels
-     * @param cellWidth - Cell width in pixels
-     * @param cellHeight - Cell height in pixels
-     * @param atlasBlocks - Number of 256-char blocks (1, 4, or 16)
+     * // Disable grid
+     * renderer.setGrid({ enabled: false });
+     * ```
      */
-    setImageFont(imageData: Uint8Array, glyphWidth: number, glyphHeight: number, cellWidth: number, cellHeight: number, atlasBlocks: AtlasBlocks): Promise<void>;
+    setGrid(config: {
+        enabled: boolean;
+        color?: string;
+        lineWidth?: number;
+    }): void;
     /**
-     * Load PNG image and create WebGL texture
+     * Check if grid is currently enabled
      */
-    private loadImageFontAtlas;
+    isGridEnabled(): boolean;
     /**
-     * Pre-compute UVs for ImageFont (block-based grid layout)
+     * Enable or configure ambient effect
      *
-     * Atlas layout for multi-block fonts:
-     * - Each block contains 256 chars in a 16×16 grid
-     * - Blocks are arranged visually:
-     *   - 1 block:  1×1 (16×16 chars)
-     *   - 4 blocks: 2×2 (32×32 chars total)
-     *   - 16 blocks: 4×4 (64×64 chars total)
+     * Ambient effect creates a blurred glow around the terminal canvas,
+     * filling the unused space with colors from the terminal content.
      *
-     * CharCode mapping:
-     *   charCode 0-255   → Block 0 (top-left)
-     *   charCode 256-511 → Block 1 (top-right for 4 blocks)
-     *   charCode 512-767 → Block 2 (bottom-left for 4 blocks)
-     *   etc.
-     */
-    private precomputeImageFontUVs;
-    /**
-     * Generate texture atlas from bitmap font
+     * @param config - true to enable with defaults, false to disable,
+     *                 or object with blur and scale settings
+     *
+     * @example
+     * ```typescript
+     * // Enable with defaults (blur: 30px, scale: 1.3)
+     * renderer.setAmbientEffect(true);
+     *
+     * // Disable
+     * renderer.setAmbientEffect(false);
+     *
+     * // Custom settings
+     * renderer.setAmbientEffect({ blur: 50, scale: 1.5 });
+     * ```
      */
-    private generateAtlas;
+    setAmbientEffect(config: boolean | {
+        blur?: number;
+        scale?: number;
+    }): void;
     /**
-     * 🚀 OPTIMIZED: Build charCode → atlas index using direct array lookup
+     * Create the ambient effect canvas element (called lazily if needed)
      */
-    private buildCharCodeMap;
+    private createAmbientEffectCanvas;
     /**
-     * 🚀 MEGA OPTIMIZATION: Pre-compute ALL atlas UVs
-     * Called once after atlas generation - UVs never change!
-     * Eliminates per-frame division and modulo operations
+     * Check if ambient effect is enabled
      */
-    private precomputeAtlasUVs;
+    isAmbientEffectEnabled(): boolean;
     /**
-     * Create WebGL texture from atlas
+     * Get current ambient effect configuration
      */
-    private createAtlasTexture;
+    getAmbientEffectConfig(): {
+        enabled: boolean;
+        blur: number;
+        scale: number;
+    };
     /**
-     * Clear entire terminal
+     * Get number of columns (IRenderer interface)
      *
-     * Clears the WebGL canvas. Note: Actual terminal content clearing is handled
-     * by Core's RenderState, not by this renderer.
+     * @returns Current number of columns
      *
      * @example
      * ```typescript
-     * renderer.clear();
+     * const cols = renderer.getCols(); // 80
      * ```
      */
-    clear(): void;
-    /**
-     * Parse CSS color to normalized RGBA (0-1)
-     */
-    private parseColor;
+    getCols(): number;
     /**
-     * Configure ResizeObserver to adapt canvas
+     * Get number of rows (IRenderer interface)
+     *
+     * @returns Current number of rows
+     *
+     * @example
+     * ```typescript
+     * const rows = renderer.getRows(); // 25
+     * ```
      */
-    private setupResizeObserver;
+    getRows(): number;
     /**
-     * Update canvas display size
+     * Check if renderer is ready (IRenderer interface)
      *
-     * Supports multiple scaling modes:
+     * Returns true when bitmap font, atlas texture, and shader program are initialized.
      *
-     * 🎯 INTEGER MODE (ScalingMode.Integer):
-     * Uses integer scaling (1x, 2x, 3x...) for crisp pixels without artifacts.
-     * The canvas is centered in the container via flexbox.
-     * May leave empty space around the canvas.
+     * @returns true if ready to render, false otherwise
      *
-     * 📐 HALF MODE (ScalingMode.Half):
-     * Snaps to half increments (1.0, 1.5, 2.0...).
-     * Good balance between space usage and visual quality.
+     * @example
+     * ```typescript
+     * if (renderer.isReady()) {
+     *   renderer.renderDisplayData(data);
+     * }
+     * ```
+     */
+    isReady(): boolean;
+    /**
+     * Destroy/cleanup resources (IRenderer interface)
      *
-     * 📏 QUARTER MODE (ScalingMode.Quarter):
-     * Snaps to quarter increments (1.0, 1.25, 1.5, 1.75, 2.0...).
-     * Finer control over scaling with minimal artifacts.
+     * Destroys WebGL resources (textures, buffers), disconnects ResizeObserver,
+     * and removes canvases from DOM. Call this before removing the renderer.
      *
-     * 🔲 NONE MODE (ScalingMode.None):
-     * Scales to fill as much space as possible while maintaining aspect ratio.
-     * May cause some lines to appear thicker due to sub-pixel rendering.
-     * Useful when maximizing screen usage is more important than pixel purity.
+     * @example
+     * ```typescript
+     * renderer.destroy();
+     * renderer = null;
+     * ```
      */
-    private updateCanvasSize;
+    destroy(): void;
     /**
-     * 🌈 AMBIENT EFFECT: Copy main canvas to ambient effect background
-     *
-     * This creates a glow effect around the terminal by copying the main
-     * WebGL canvas to a 2D canvas behind it, which has CSS blur applied.
+     * Cleanup resources
      */
-    private updateAmbientEffect;
+    dispose(): void;
+}
+
+/**
+ * Représente une cellule du terminal
+ */
+interface TerminalCell {
+    /** Le caractère à afficher */
+    char: string;
+    /** Couleur du caractère (format CSS) */
+    fgColor: string;
+    /** Couleur de fond de la cellule (format CSS) */
+    bgColor: string;
+}
+/**
+ * Données brutes pour définir le terminal en une fois
+ */
+interface TerminalData {
+    /** Largeur en cellules */
+    width: number;
+    /** Hauteur en cellules */
+    height: number;
+    /** Tableau de cellules (longueur = width * height) */
+    cells: Array<{
+        /** Code du caractère ou le caractère lui-même */
+        char: string;
+        /** Couleur du texte (format CSS) */
+        fgColor: string;
+        /** Couleur de fond (format CSS) */
+        bgColor: string;
+    }>;
+}
+/**
+ * Options pour la configuration du terminal
+ */
+interface RenderOptions {
+    /** Largeur d'une cellule en pixels (défaut: 8) - ignoré en mode fixedGrid */
+    cellWidth?: number;
+    /** Hauteur d'une cellule en pixels (défaut: 8) - ignoré en mode fixedGrid */
+    cellHeight?: number;
+    /** Couleur de texte par défaut (défaut: "#ffffff") */
+    defaultFgColor?: string;
+    /** Couleur de fond par défaut (défaut: "#000000") */
+    defaultBgColor?: string;
+    /** Couleur de fond du canvas lui-même (défaut: transparent). Si null ou undefined, le canvas sera transparent */
+    canvasBgColor?: string | null;
+    /** Afficher une grille de débogage (défaut: false) */
+    showDebugGrid?: boolean;
+    /** Couleur de la grille de débogage (défaut: "rgba(255, 0, 0, 0.3)") */
+    debugGridColor?: string;
+    /** Classes CSS additionnelles pour le canvas */
+    className?: string;
+    /** Style inline pour le canvas */
+    style?: Partial<CSSStyleDeclaration>;
+    /** Nombre de colonnes fixe (active le mode fixedGrid) */
+    fixedCols?: number;
+    /** Nombre de lignes fixe (active le mode fixedGrid) */
+    fixedRows?: number;
+    /** Ratio largeur/hauteur de cellule pour mode fixedGrid (défaut: 1 = carré) */
+    cellAspectRatio?: number;
     /**
-     * Set color palette and upload to GPU
-     *
-     * ⚠️ IMPORTANT: This is the ONLY way to update the palette.
-     * Typically called automatically by ClientRuntime via Core.onPaletteChanged() event.
-     * Do NOT call this directly unless you know what you're doing.
-     *
-     * @param palette - Array of 256 RGB colors
+     * Scaling mode for pixel-perfect rendering (default: ScalingMode.None)
      *
-     * @example
-     * ```typescript
-     * // ✅ Normal usage: Core handles this automatically
-     * core.loadPalette([...]);
-     * // → Core emits event
-     * // → ClientRuntime receives event
-     * // → renderer.setPalette() called automatically
+     * Controls how the canvas is scaled to fit the container:
+     * - ScalingMode.None: Scales cells to fill space, may have sub-pixel artifacts
+     * - ScalingMode.Eighth: Snaps to 0.125 increments (1.0, 1.125, 1.25...)
+     * - ScalingMode.Quarter: Snaps to 0.25 increments (1.0, 1.25, 1.5...)
+     * - ScalingMode.Half: Snaps to 0.5 increments (1.0, 1.5, 2.0...)
+     * - ScalingMode.Integer: Integer scaling only (1x, 2x, 3x...), crispest pixels
      *
-     * // ⚠️ Manual usage (advanced):
-     * const myPalette: RGBColor[] = [
-     *   { r: 0, g: 0, b: 0, a: 255 },      // Color 0: Black
-     *   { r: 255, g: 0, b: 0, a: 255 },    // Color 1: Red
-     *   // ... 254 more colors
-     * ];
-     * renderer.setPalette(myPalette);
-     * ```
+     * Note: For ImageFont mode, this uses native glyph sizes + CSS transform scaling.
      */
-    setPalette(palette: RGBColor[]): void;
+    scalingMode?: ScalingMode;
+}
+/**
+ * UTSP Render - Gère une grille de caractères avec couleurs
+ * Similaire à un terminal mais avec contrôle total de chaque cellule
+ *
+ * Implements IRenderer interface for compatibility with TerminalGL and dependency injection.
+ */
+declare class Terminal2D implements IRenderer {
+    private containerDiv;
+    private canvas;
+    private ctx;
+    private parentElement;
+    private cells;
+    private cols;
+    private rows;
+    private defaultFgColor;
+    private defaultBgColor;
+    private canvasBgColor;
+    private cellWidth;
+    private cellHeight;
+    private offsetX;
+    private offsetY;
+    private imageAtlas?;
+    private showDebugGrid;
+    private debugGridColor;
+    private gridOverlay?;
+    private fixedGridMode;
+    private fixedCols?;
+    private fixedRows?;
+    private cellAspectRatio;
+    private resizeObserver?;
+    private paletteCache?;
+    private scalingMode;
+    private currentScale;
+    private customCellSize;
     /**
-     * 🚀 GPU OPTIMIZATION: Upload palette to GPU texture (256×1 RGBA)
+     * Crée une instance de UTSPRender
+     * @param parentDiv - L'élément HTML parent dans lequel créer le canvas
+     * @param options - Options de configuration du terminal
      */
-    private updatePaletteTexture;
+    constructor(parentDiv: HTMLElement, options?: RenderOptions);
     /**
-     * Render display data from core engine (ULTRA-OPTIMIZED)
-     *
-     * Bypasses internal cells and renders directly from RenderState for maximum performance.
-     * Uses GPU palette texture lookup to minimize CPU→GPU bandwidth (4× reduction).
-     *
-     * @param data - Render state containing cells, dimensions, and palette
+     * Calcule le nombre de colonnes et de lignes en fonction de la taille du parent
+     * et centre le terminal dans le canvas
      *
-     * @example
-     * ```typescript
-     * const renderState: RenderState = {
-     *   cells: [...],
-     *   width: 80,
-     *   height: 25,
-     *   palette: [...]
-     * };
-     * renderer.renderDisplayData(renderState);
-     * ```
+     * 🎯 PIXEL-PERFECT APPROACH (like TerminalGL):
+     * 1. Cell dimensions are ALWAYS integers (native font size)
+     * 2. Canvas renders at native resolution (cols * cellWidth)
+     * 3. CSS transform: scale() handles visual upscaling
+     * 4. Flexbox handles centering
      */
-    renderDisplayData(data: RenderState): void;
+    private calculateGridSize;
     /**
-     * Render multiple passes in order, clearing once then layering.
+     * Crée une grille vide avec les valeurs par défaut
      */
-    private renderMultiPass;
+    private createEmptyGrid;
     /**
-     * 🚀 NEW METHOD: Render directly from RenderState
-     * Bypass this.cells for maximum performance
+     * Active le redimensionnement automatique
+     * Recalcule le nombre de colonnes/lignes quand le parent change de taille
      */
-    private renderDirect;
+    private enableAutoResize;
     /**
-     * 🚀 INSTANCED RENDERING: 1 draw call for entire terminal
-     * MASSIVE performance boost - reduces draw calls from cols×rows×2 to just 1!
+     * Définit le contenu d'une cellule
+     * @param col - Colonne (0-indexed)
+     * @param row - Ligne (0-indexed)
+     * @param char - Caractère à afficher
+     * @param fgColor - Couleur du texte (optionnel, utilise la valeur par défaut si non fourni)
+     * @param bgColor - Couleur de fond (optionnel, utilise la valeur par défaut si non fourni)
      */
-    private renderInstanced;
+    setCell(col: number, row: number, char: string, fgColor?: string, bgColor?: string): void;
     /**
-     * 🚀 ULTRA-OPTIMIZED: Update ONLY dynamic data (colors + UVs)
-     * Positions are static and pre-computed - only updated on resize!
-     * This is a MASSIVE performance win - positions never change during normal rendering
+     * Récupère le contenu d'une cellule
+     * @param col - Colonne (0-indexed)
+     * @param row - Ligne (0-indexed)
      */
-    private renderDirectBuffers;
+    getCell(col: number, row: number): TerminalCell | null;
     /**
-     * Resize the terminal dimensions
-     *
-     * Changes the number of columns and rows. Preserves existing cell content
-     * where possible. Reallocates render buffers if needed.
-     *
-     * @param cols - New number of columns (must be positive integer)
-     * @param rows - New number of rows (must be positive integer)
-     *
-     * @example
-     * ```typescript
-     * renderer.resize(120, 40); // Resize to 120×40
-     * ```
+     * Écrit une chaîne de caractères à partir d'une position
+     * @param col - Colonne de départ
+     * @param row - Ligne
+     * @param text - Texte à écrire
+     * @param fgColor - Couleur du texte (optionnel)
+     * @param bgColor - Couleur de fond (optionnel)
      */
-    resize(cols: number, rows: number): void;
+    write(col: number, row: number, text: string, fgColor?: string, bgColor?: string): void;
     /**
-     * Get canvas element
+     * Remplit une zone rectangulaire
+     * @param startCol - Colonne de départ
+     * @param startRow - Ligne de départ
+     * @param width - Largeur en cellules
+     * @param height - Hauteur en cellules
+     * @param char - Caractère de remplissage
+     * @param fgColor - Couleur du texte (optionnel)
+     * @param bgColor - Couleur de fond (optionnel)
      */
-    getCanvas(): HTMLCanvasElement;
+    fillRect(startCol: number, startRow: number, width: number, height: number, char?: string, fgColor?: string, bgColor?: string): void;
     /**
-     * Get grid dimensions
+     * Efface tout le terminal (remplit avec des espaces)
      */
-    getGridSize(): {
-        cols: number;
-        rows: number;
-    };
+    clear(): void;
     /**
-     * Get cell width
+     * Définit tout le contenu du terminal à partir d'un tableau de données
+     * Le tableau doit contenir width * height éléments
+     * Les cellules sont lues ligne par ligne (row-major order)
+     *
+     * @param data - Données du terminal avec dimensions et cellules
+     * @throws Error si le tableau n'a pas la bonne taille
+     *
+     * @example
+     * terminal.setFromArray({
+     *   width: 3,
+     *   height: 2,
+     *   cells: [
+     *     { char: 'A', fgColor: '#ff0000', bgColor: '#000000' }, // (0,0)
+     *     { char: 'B', fgColor: '#00ff00', bgColor: '#000000' }, // (1,0)
+     *     { char: 'C', fgColor: '#0000ff', bgColor: '#000000' }, // (2,0)
+     *     { char: 'D', fgColor: '#ffff00', bgColor: '#000000' }, // (0,1)
+     *     { char: 'E', fgColor: '#ff00ff', bgColor: '#000000' }, // (1,1)
+     *     { char: 'F', fgColor: '#00ffff', bgColor: '#000000' }, // (2,1)
+     *   ]
+     * });
      */
-    getCellWidth(): number;
+    setFromArray(data: TerminalData): void;
     /**
-     * Get cell height
+     * Rend la grille sur le canvas
+     * @param clearCanvas - Whether to clear the canvas before rendering (default: true)
+     *                      Set to false for multi-pass rendering (stacking layers)
      */
-    getCellHeight(): number;
+    render(clearCanvas?: boolean): void;
     /**
-     * Get current integer scale factor
-     * Used by PostProcessOverlay to sync dimensions
+     * Rendu classique avec fillRect + atlas/bitmap
+     * @param clearCanvas - Whether to clear the canvas before rendering
      */
-    getCurrentScale(): number;
+    private renderClassic;
     /**
-     * Get base canvas dimensions (before scaling)
-     * Used by PostProcessOverlay to sync dimensions
+     * Dessine une grille de débogage pour visualiser les cellules
      */
-    getBaseDimensions(): {
-        width: number;
-        height: number;
-    };
+    private drawDebugGrid;
     /**
-     * Set callback to be called after every resize
-     * Used by ClientRuntime to sync PostProcessOverlay
+     * Obtient le canvas HTML
      */
-    setOnResizeCallback(callback: () => void): void;
+    getCanvas(): HTMLCanvasElement;
     /**
-     * Clear the resize callback
+     * Obtient le contexte 2D
      */
-    clearOnResizeCallback(): void;
+    getContext(): CanvasRenderingContext2D;
     /**
-     * Get the available size from the parent container.
-     * This is the actual pixel space available for rendering.
-     * Useful in Responsive mode to calculate how many cells can fit.
-     *
-     * @returns Object with width and height in pixels
+     * Obtient les dimensions de la grille
      */
-    getAvailableSize(): {
-        width: number;
-        height: number;
+    getDimensions(): {
+        cols: number;
+        rows: number;
     };
     /**
-     * Set scaling mode
-     *
-     * @param mode - ScalingMode enum value:
-     *   - ScalingMode.None: Fill space, may have sub-pixel artifacts
-     *   - ScalingMode.Eighth: Snap to 0.125 increments (1.0, 1.125, 1.25...)
-     *   - ScalingMode.Quarter: Snap to 0.25 increments (1.0, 1.25, 1.5...)
-     *   - ScalingMode.Half: Snap to 0.5 increments (1.0, 1.5, 2.0...)
-     *   - ScalingMode.Integer: Crisp pixels, may waste space (1x, 2x, 3x...)
-     */
-    setScalingMode(mode: ScalingMode): void;
-    /**
-     * Get current scaling mode
-     */
-    getScalingMode(): ScalingMode;
-    /**
-     * Set cell dimensions in pixels
-     *
-     * Changes the native pixel size of each character cell.
-     * This will trigger a canvas resize and buffer reallocation.
-     *
-     * @param cellWidth - Cell width in pixels (1-255)
-     * @param cellHeight - Cell height in pixels (1-255)
-     */
-    setCellSize(cellWidth: number, cellHeight: number): void;
-    /**
-     * Get current cell size
+     * Obtient les dimensions des cellules
      */
-    getCellSize(): {
+    getCellDimensions(): {
         cellWidth: number;
         cellHeight: number;
     };
     /**
-     * Get the maximum number of cells this renderer can handle
-     *
-     * This depends on device capabilities:
-     * - With instanced rendering: ~262,144 cells (limited by GPU memory)
-     * - With Uint32 indices: ~262,144 cells
-     * - With Uint16 indices only: ~8,191 cells (~90×90)
-     *
-     * Use this in responsive mode to clamp calculated cols/rows.
-     *
-     * @returns Maximum cells supported by this renderer
+     * Obtient la largeur d'une cellule
      */
-    getMaxCells(): number;
+    getCellWidth(): number;
     /**
-     * Enable or configure debug grid overlay
-     *
-     * The grid shows cell boundaries aligned with the terminal grid.
-     * Useful for debugging layout and alignment issues.
-     *
-     * @param config - Configuration options:
-     *   - enabled: Whether to show the grid
-     *   - color: CSS color string (e.g., 'rgba(255,0,0,0.5)', '#ff0000')
-     *   - lineWidth: Line width in pixels (1-10)
-     *
-     * @example
-     * ```typescript
-     * // Enable with default red color
-     * renderer.setGrid({ enabled: true });
-     *
-     * // Custom green grid
-     * renderer.setGrid({ enabled: true, color: 'rgba(0, 255, 0, 0.5)' });
-     *
-     * // Disable grid
-     * renderer.setGrid({ enabled: false });
-     * ```
+     * Obtient la hauteur d'une cellule
      */
-    setGrid(config: {
-        enabled: boolean;
-        color?: string;
-        lineWidth?: number;
-    }): void;
+    getCellHeight(): number;
     /**
-     * Check if grid is currently enabled
+     * Get current scaling factor (for pixel-perfect modes)
+     * Returns 1 if scalingMode is None or not using ImageFont
      */
-    isGridEnabled(): boolean;
+    getCurrentScale(): number;
     /**
-     * Enable or configure ambient effect
-     *
-     * Ambient effect creates a blurred glow around the terminal canvas,
-     * filling the unused space with colors from the terminal content.
-     *
-     * @param config - true to enable with defaults, false to disable,
-     *                 or object with blur and scale settings
-     *
-     * @example
-     * ```typescript
-     * // Enable with defaults (blur: 30px, scale: 1.3)
-     * renderer.setAmbientEffect(true);
-     *
-     * // Disable
-     * renderer.setAmbientEffect(false);
-     *
-     * // Custom settings
-     * renderer.setAmbientEffect({ blur: 50, scale: 1.5 });
-     * ```
+     * Get scaling mode
      */
-    setAmbientEffect(config: boolean | {
-        blur?: number;
-        scale?: number;
-    }): void;
+    getScalingMode(): ScalingMode;
     /**
-     * Create the ambient effect canvas element (called lazily if needed)
+     * Obtient les décalages de centrage du terminal
      */
-    private createAmbientEffectCanvas;
+    getOffsets(): {
+        offsetX: number;
+        offsetY: number;
+    };
     /**
-     * Check if ambient effect is enabled
+     * Active ou désactive la grille de débogage
+     * @param show - true pour afficher la grille, false pour la masquer
      */
-    isAmbientEffectEnabled(): boolean;
+    setDebugGrid(show: boolean): void;
     /**
-     * Get current ambient effect configuration
+     * Change la couleur de fond du canvas
+     * @param color - Couleur CSS (ex: "#000000", "rgba(0,0,0,0.5)") ou null pour transparent
      */
-    getAmbientEffectConfig(): {
-        enabled: boolean;
-        blur: number;
-        scale: number;
-    };
+    setCanvasBackgroundColor(color: string | null): void;
     /**
-     * Get number of columns (IRenderer interface)
-     *
-     * @returns Current number of columns
-     *
-     * @example
-     * ```typescript
-     * const cols = renderer.getCols(); // 80
-     * ```
+     * Obtient la couleur de fond actuelle du canvas
+     * @returns La couleur de fond ou null si transparent
      */
-    getCols(): number;
+    getCanvasBackgroundColor(): string | null;
     /**
-     * Get number of rows (IRenderer interface)
-     *
-     * @returns Current number of rows
-     *
-     * @example
-     * ```typescript
-     * const rows = renderer.getRows(); // 25
-     * ```
+     * Active le mode grille fixe avec le nombre de colonnes/lignes spécifié
+     * Les cellules s'adapteront en taille pour maintenir les dimensions demandées
+     * @param cols - Nombre de colonnes fixe
+     * @param rows - Nombre de lignes fixe
+     * @param aspectRatio - Ratio largeur/hauteur de cellule (optionnel, défaut: 10/14)
      */
-    getRows(): number;
+    setFixedGrid(cols: number, rows: number, aspectRatio?: number): void;
     /**
-     * Check if renderer is ready (IRenderer interface)
-     *
-     * Returns true when bitmap font, atlas texture, and shader program are initialized.
-     *
-     * @returns true if ready to render, false otherwise
-     *
-     * @example
-     * ```typescript
-     * if (renderer.isReady()) {
-     *   renderer.renderDisplayData(data);
-     * }
-     * ```
+     * Désactive le mode grille fixe et revient au mode adaptatif
+     * @param cellWidth - Largeur de cellule en pixels (optionnel)
+     * @param cellHeight - Hauteur de cellule en pixels (optionnel)
      */
-    isReady(): boolean;
+    setAdaptiveGrid(cellWidth?: number, cellHeight?: number): void;
     /**
-     * Destroy/cleanup resources (IRenderer interface)
-     *
-     * Destroys WebGL resources (textures, buffers), disconnects ResizeObserver,
-     * and removes canvases from DOM. Call this before removing the renderer.
-     *
-     * @example
-     * ```typescript
-     * renderer.destroy();
-     * renderer = null;
-     * ```
+     * Vérifie si le terminal est en mode grille fixe
      */
-    destroy(): void;
+    isFixedGridMode(): boolean;
     /**
-     * Cleanup resources
+     * Définit la couleur de la grille de débogage
+     * @param color - Couleur CSS (ex: "rgba(255, 0, 0, 0.3)" ou "#ff0000")
      */
-    dispose(): void;
-}
-
-/**
- * Police bitmap matricielle
- * Map qui associe un code de caractère (charCode) à une représentation bitmap
- */
-type BitmapFont = Map<number, Uint8Array>;
-/**
- * Atlas à une résolution spécifique
- */
-interface AtlasResolution {
-    canvas: HTMLCanvasElement;
-    ctx: CanvasRenderingContext2D;
-    scale: number;
-    charWidth: number;
-    charHeight: number;
-}
-/**
- * Classe pour générer et gérer un atlas de police bitmap multi-résolution
- * Convertit une police matricielle (bits) en plusieurs textures canvas à différentes échelles
- * pour un rendu ultra-rapide avec qualité optimale quelque soit le zoom
- *
- * Utilise un cache LRU de glyphes colorés pour éviter la re-colorisation
- */
-declare class BitmapFontAtlas {
-    private atlases;
-    private charMap;
-    private baseCharWidth;
-    private baseCharHeight;
-    private baseCellWidth;
-    private baseCellHeight;
-    private atlasColumns;
-    private font;
-    private readonly SCALES;
-    private colorCache;
-    private readonly MAX_CACHE_SIZE;
+    setDebugGridColor(color: string): void;
     /**
-     * Construit un atlas de police bitmap multi-résolution
-     * @param font La police bitmap source
-     * @param charWidth Largeur de base d'un caractère en pixels (taille du glyphe dans l'atlas)
-     * @param charHeight Hauteur de base d'un caractère en pixels (taille du glyphe dans l'atlas)
-     * @param cellWidth Largeur de base d'une cellule en pixels (peut être > charWidth pour l'espacement)
-     * @param cellHeight Hauteur de base d'une cellule en pixels (peut être > charHeight pour l'espacement)
+     * Vérifie si la grille de débogage est activée
      */
-    constructor(font: BitmapFont, charWidth: number, charHeight: number, cellWidth?: number, cellHeight?: number); /**
-     * Génère les 4 atlas à différentes résolutions (1x, 2x, 4x, 8x)
-     * Très rapide: ~4-8ms pour 256 caractères × 4 résolutions
+    isDebugGridEnabled(): boolean;
+    /**
+     * Configure une police image (atlas PNG)
+     * @param imageData - Données PNG brutes
+     * @param glyphWidth - Largeur du glyphe en pixels
+     * @param glyphHeight - Hauteur du glyphe en pixels
+     * @param cellWidth - Largeur de la cellule en pixels
+     * @param cellHeight - Hauteur de la cellule en pixels
+     * @param atlasBlocks - Nombre de blocs de 256 caractères (1, 4, ou 16)
      */
-    private generateAtlases;
+    setImageFont(imageData: Uint8Array, glyphWidth: number, glyphHeight: number, cellWidth: number, cellHeight: number, atlasBlocks: AtlasBlocks): Promise<void>;
     /**
-     * Récupère ou crée un atlas pour une échelle donnée
+     * Initialise la structure pour une police progressive
      */
-    private getOrCreateAtlas;
+    setImageFontStructure(glyphWidth: number, glyphHeight: number, cellWidth: number, cellHeight: number, atlasBlocks: AtlasBlocks): Promise<void>;
     /**
-     * Rend un caractère bitmap dans un atlas à une résolution donnée
-     * Utilise fillRect pour un rendu ultra-rapide
+     * Ajoute un bloc d'image à la police courante
      */
-    private renderBitmapToAtlas;
+    setImageFontBlock(blockIndex: number, data: Uint8Array): Promise<void>;
     /**
-     * Dessine un caractère en utilisant le cache de glyphes colorés
-     * Ultra-rapide: 1 seul drawImage() par caractère
-     * Utilise ImageData pour coloriser + Canvas cache pour éviter la re-colorisation
+     * Set color palette (IRenderer contract).
+     * Called by ClientRuntime when Core palette changes.
      *
-     * @param ctx - Contexte de destination
-     * @param charCode - Code du caractère à dessiner
-     * @param x - Position X de destination (coin de la cellule)
-     * @param y - Position Y de destination (coin de la cellule)
-     * @param width - Largeur de la cellule de destination
-     * @param height - Hauteur de la cellule de destination
-     * @param color - Couleur du caractère (format CSS)
+     * @param palette - Array of 256 RGBA colors
      */
-    drawChar(ctx: CanvasRenderingContext2D, charCode: number, x: number, y: number, width: number, height: number, color: string): void;
+    setPalette(palette: RGBColor[]): void;
     /**
-     * Crée un glyphe colorisé à partir de l'atlas blanc
-     * Utilise ImageData pour une colorisation ultra-rapide
+     * Render display data (IRenderer contract).
+     * Converts RenderState from Core to cell-based rendering.
+     *
+     * @param display - Display data with palette indices
      */
-    private createColoredGlyph;
     /**
-     * Convertit une couleur hex en RGB
+     * Helper: Convert palette index to CSS color
      */
-    private hexToRgb;
+    private convertColor;
     /**
-     * Élimine les entrées les moins récemment utilisées du cache (LRU)
+     * Helper: Render a specific set of cells (one pass or full display)
      */
-    private evictLRU;
+    private renderDirect;
+    renderDisplayData(display: RenderState): void;
     /**
-     * Retourne le canvas d'atlas pour une résolution donnée (pour débogage/visualisation)
-     * Par défaut retourne l'atlas 1x
+     * Check if renderer is ready to render (IRenderer contract).
+     * Canvas 2D is always ready immediately (no async initialization).
+     *
+     * @returns Always true for Canvas 2D
      */
-    getAtlasCanvas(scale?: number): HTMLCanvasElement | undefined;
+    isReady(): boolean;
     /**
-     * Retourne tous les atlas disponibles
+     * Get width in columns (IRenderer contract).
      */
-    getAllAtlases(): Map<number, AtlasResolution>;
+    getCols(): number;
     /**
-     * Retourne les dimensions de base d'un caractère
+     * Get height in rows (IRenderer contract).
      */
-    getCharDimensions(): {
-        width: number;
-        height: number;
-    };
+    getRows(): number;
     /**
-     * Retourne le nombre de caractères dans l'atlas
+     * Resize renderer dimensions (IRenderer contract).
+     *
+     * @param cols - New width in columns
+     * @param rows - New height in rows
      */
-    getCharCount(): number;
+    resize(cols: number, rows: number): void;
     /**
-     * Vérifie si un caractère existe dans l'atlas
+     * Set scaling mode for pixel-perfect rendering
+     *
+     * @param mode - ScalingMode enum value:
+     *   - ScalingMode.None: Fill space, may have sub-pixel artifacts
+     *   - ScalingMode.Eighth: Snap to 0.125 increments (1.0, 1.125, 1.25...)
+     *   - ScalingMode.Quarter: Snap to 0.25 increments (1.0, 1.25, 1.5...)
+     *   - ScalingMode.Half: Snap to 0.5 increments (1.0, 1.5, 2.0...)
+     *   - ScalingMode.Integer: Crisp pixels, may waste space (1x, 2x, 3x...)
+     *   - ScalingMode.Responsive: No CSS scaling, cols/rows adapt to space
      */
-    hasChar(charCode: number): boolean;
+    setScalingMode(mode: ScalingMode): void;
     /**
-     * Retourne les dimensions d'un atlas à une résolution donnée
+     * Set cell dimensions in pixels (for Responsive mode)
+     *
+     * Changes the native pixel size of each character cell.
+     * This will trigger a canvas resize and re-render.
+     *
+     * @param cellWidth - Cell width in pixels (1-255)
+     * @param cellHeight - Cell height in pixels (1-255)
      */
-    getAtlasDimensions(scale?: number): {
-        width: number;
-        height: number;
-    } | undefined;
+    setCellSize(cellWidth: number, cellHeight: number): void;
     /**
-     * Exporte un atlas en Data URL (pour débogage)
-     * Permet de visualiser l'atlas ou de le sauvegarder
+     * Get current cell size
      */
-    toDataURL(scale?: number, type?: string): string | undefined;
+    getCellSize(): {
+        cellWidth: number;
+        cellHeight: number;
+    };
     /**
-     * Retourne les statistiques du cache de glyphes colorés
+     * Get the available size from the parent container.
+     * This is the actual pixel space available for rendering.
+     * Useful in Responsive mode to calculate how many cells can fit.
+     *
+     * @returns Object with width and height in pixels
      */
-    getCacheStats(): {
-        size: number;
-        maxSize: number;
-        hitRate?: number;
+    getAvailableSize(): {
+        width: number;
+        height: number;
     };
     /**
-     * Vide le cache de glyphes colorés
+     * Get the maximum number of cells this renderer can handle
+     *
+     * Canvas 2D has very generous limits compared to WebGL.
+     * The main constraint is memory for the ImageData buffer.
+     *
+     * @returns Maximum cells supported (256×256 = 65536 for compatibility)
      */
-    clearCache(): void;
+    getMaxCells(): number;
     /**
-     * Libère les ressources
+     * Détruit le terminal et nettoie les ressources
      */
     destroy(): void;
 }
@@ -1394,7 +1154,29 @@ declare class ImageFontAtlas {
     private readonly MAX_CACHE_SIZE;
     constructor(config: ImageFontAtlasConfig);
     /**
-     * Load atlas from PNG binary data
+     * Get the underlying canvas method
+     */
+    getCanvas(): HTMLCanvasElement | null;
+    /**
+     * Get glyph width
+     */
+    getGlyphWidth(): number;
+    /**
+     * Get glyph height
+     */
+    getGlyphHeight(): number;
+    /**
+     * Initialize empty atlas properties
+     */
+    prepare(): void;
+    /**
+     * Load a block into the atlas
+     * @param blockIndex Block index (0-15)
+     * @param pngData PNG data for the block
+     */
+    loadBlock(blockIndex: number, pngData: Uint8Array): Promise<void>;
+    /**
+     * Load atlas from PNG binary data (Legacy Monolithic)
      * @param pngData PNG image as Uint8Array
      * @returns Promise that resolves when atlas is loaded
      */
@@ -1988,5 +1770,5 @@ declare function createTestRenderState(width: number, height: number): RenderSta
 
 declare const version = "0.1.0";
 
-export { AutoplayOverlay, BitmapFontAtlas, DEFAULT_PALETTE, GridOverlay, ImageFontAtlas, PostProcessOverlay, Terminal2D, TerminalANSI, TerminalGL, colorToPaletteIndex, createTestRenderState, getAtlasColumns, getCharGridPosition, getMaxCharCode, hexToRGB, paletteIndexToColor, rgbToHex, version };
-export type { AtlasBlocks, AutoplayOverlayOptions, BitmapFont$1 as BitmapFont, FontType, ImageFontAtlasConfig, PostProcessOverlayOptions, RenderOptions, TerminalANSIOptions, TerminalCell, TerminalData, TerminalGLOptions, WebGLCompatibilityReport };
+export { AutoplayOverlay, DEFAULT_PALETTE, GridOverlay, ImageFontAtlas, PostProcessOverlay, Terminal2D, TerminalANSI, TerminalGL, colorToPaletteIndex, createTestRenderState, getAtlasColumns, getCharGridPosition, getMaxCharCode, hexToRGB, paletteIndexToColor, rgbToHex, version };
+export type { AtlasBlocks, AutoplayOverlayOptions, ImageFontAtlasConfig, PostProcessOverlayOptions, RenderOptions, TerminalANSIOptions, TerminalCell, TerminalData, TerminalGLOptions, WebGLCompatibilityReport };