@utsp/render 0.10.0 → 0.11.0-nightly.20251213232121.8b318c1

package/dist/common/index.d.ts

@@ -0,0 +1,390 @@
+import { PostProcessConfig, ScanlinesConfig } from '@utsp/types';
+export { IColorPalette, IRenderer, PostProcessConfig, RenderState, ScanlinesConfig } from '@utsp/types';
+
+/**
+ * Default color palette (VGA colors + extended)
+ * Maps palette index to CSS color string
+ */
+declare const DEFAULT_PALETTE: readonly string[];
+/**
+ * Convert a color palette index to CSS color string
+ */
+declare function paletteIndexToColor(index: number, palette?: readonly string[]): string;
+/**
+ * Convert CSS color string to palette index (finds closest match)
+ */
+declare function colorToPaletteIndex(color: string, palette?: readonly string[]): number;
+
+/**
+ * 🔲 GridOverlay - Classe réutilisable pour gérer le canvas de grille de débogage
+ *
+ * Gère un canvas 2D superposé qui affiche une grille de cellules.
+ * Au lieu de simples lignes, dessine un cadre fin à l'intérieur de chaque cellule
+ * pour une meilleure visualisation.
+ *
+ * @example
+ * ```typescript
+ * const grid = new GridOverlay(containerElement);
+ * grid.setDimensions(80, 24, 10, 16);
+ * grid.render();
+ * ```
+ */
+declare class GridOverlay {
+    private canvas;
+    private ctx;
+    private container;
+    private cols;
+    private rows;
+    private cellWidth;
+    private cellHeight;
+    private offsetX;
+    private offsetY;
+    private strokeColor;
+    private lineWidth;
+    /**
+     * Crée une nouvelle overlay de grille
+     * @param container - Élément parent qui contiendra le canvas
+     * @param options - Options de configuration
+     */
+    constructor(container: HTMLElement, options?: {
+        strokeColor?: string;
+        lineWidth?: number;
+        zIndex?: number;
+    });
+    /**
+     * Configure les dimensions de la grille
+     * @param cols - Nombre de colonnes
+     * @param rows - Nombre de lignes
+     * @param cellWidth - Largeur d'une cellule en pixels
+     * @param cellHeight - Hauteur d'une cellule en pixels
+     * @param offsetX - Décalage horizontal (optionnel)
+     * @param offsetY - Décalage vertical (optionnel)
+     */
+    setDimensions(cols: number, rows: number, cellWidth: number, cellHeight: number, offsetX?: number, offsetY?: number): void;
+    /**
+     * Configure la taille physique du canvas
+     * Le canvas doit avoir la MÊME approche que le canvas principal WebGL :
+     * - Résolution physique = dimensions de base (SANS DPR)
+     * - Taille CSS = dimensions de base
+     * - Le scaling visuel est fait via transform: scale()
+     *
+     * @param baseWidth - Largeur de base en pixels
+     * @param baseHeight - Hauteur de base en pixels
+     */
+    setCanvasSize(baseWidth: number, baseHeight: number): void;
+    /**
+     * Configure les options visuelles
+     * @param options - Options de rendu
+     */
+    setStyle(options: {
+        strokeColor?: string;
+        lineWidth?: number;
+    }): void;
+    /**
+     * Configure la transformation et le positionnement du canvas de grille
+     * pour qu'il corresponde exactement au canvas principal (pixel-perfect scaling)
+     *
+     * APPROCHE SIMPLE : On ne fait PAS de transform: scale().
+     * On définit le canvas à la taille finale (scalée) directement,
+     * et on le positionne exactement où est le canvas principal.
+     *
+     * Le dessin de la grille doit alors être fait à l'échelle scalée.
+     *
+     * @param scale - Facteur de scale (même valeur que le canvas principal)
+     * @param baseWidth - Largeur de base du canvas (avant scale)
+     * @param baseHeight - Hauteur de base du canvas (avant scale)
+     * @param mainCanvasRect - Le getBoundingClientRect() du canvas principal
+     * @param containerRect - Le getBoundingClientRect() du container
+     */
+    setTransform(_scale: number, _baseWidth: number, _baseHeight: number, mainCanvasRect: DOMRect, containerRect: DOMRect): void;
+    /**
+     * Dessine la grille avec des lignes fines continues
+     * Les lignes sont dessinées aux bords exacts des cellules.
+     */
+    render(): void;
+    /**
+     * Met à jour et redessine la grille avec de nouvelles dimensions
+     * Méthode pratique qui combine setDimensions, setCanvasSize et render
+     *
+     * @param cols - Nombre de colonnes
+     * @param rows - Nombre de lignes
+     * @param cellWidth - Largeur d'une cellule
+     * @param cellHeight - Hauteur d'une cellule
+     * @param displayWidth - Largeur d'affichage du canvas
+     * @param displayHeight - Hauteur d'affichage du canvas
+     * @param offsetX - Décalage horizontal (optionnel)
+     * @param offsetY - Décalage vertical (optionnel)
+     */
+    update(cols: number, rows: number, cellWidth: number, cellHeight: number, displayWidth: number, displayHeight: number, offsetX?: number, offsetY?: number): void;
+    /**
+     * Affiche ou cache la grille
+     * @param visible - true pour afficher, false pour cacher
+     */
+    setVisible(visible: boolean): void;
+    /**
+     * Supprime le canvas de grille du DOM
+     */
+    destroy(): void;
+    /**
+     * Retourne le canvas HTML
+     */
+    getCanvas(): HTMLCanvasElement;
+}
+
+/**
+ * AutoplayOverlay - Displays a play button overlay that must be clicked to start the application
+ *
+ * This is useful for:
+ * - Audio APIs that require user interaction before playing
+ * - Preventing automatic resource consumption
+ * - Better UX on mobile where autoplay may not be desired
+ *
+ * @example
+ * ```typescript
+ * const overlay = new AutoplayOverlay(container, {
+ *   buttonText: 'Click to Start',
+ *   onStart: () => {
+ *     // Application starts here
+ *   }
+ * });
+ *
+ * // To programmatically start (e.g., if autoplay is enabled):
+ * overlay.start();
+ *
+ * // Cleanup:
+ * overlay.destroy();
+ * ```
+ */
+interface AutoplayOverlayOptions {
+    /** Text to display on the button (default: 'Click to Start') */
+    buttonText?: string;
+    /** Callback when user clicks the button */
+    onStart?: () => void;
+    /** Background color of the overlay (default: 'rgba(0, 0, 0, 0.8)') */
+    backgroundColor?: string;
+    /** Button background color (default: '#4a90d9') */
+    buttonColor?: string;
+    /** Button hover color (default: '#357abd') */
+    buttonHoverColor?: string;
+    /** Button text color (default: '#ffffff') */
+    buttonTextColor?: string;
+    /** Z-index of the overlay (default: 1000) */
+    zIndex?: number;
+}
+declare class AutoplayOverlay {
+    private container;
+    private overlayDiv;
+    private button;
+    private options;
+    private started;
+    private onStartCallback?;
+    constructor(container: HTMLElement, options?: AutoplayOverlayOptions);
+    /**
+     * Create the overlay DOM elements
+     */
+    private createOverlay;
+    /**
+     * Start the application (hide overlay and call onStart callback)
+     * Can be called programmatically if autoplay is enabled
+     */
+    start(): void;
+    /**
+     * Check if the overlay has been started
+     */
+    isStarted(): boolean;
+    /**
+     * Check if the overlay is currently visible
+     */
+    isVisible(): boolean;
+    /**
+     * Remove the overlay from DOM
+     */
+    private removeOverlay;
+    /**
+     * Set the button text
+     */
+    setButtonText(text: string): void;
+    /**
+     * Update the onStart callback
+     */
+    setOnStart(callback: () => void): void;
+    /**
+     * Destroy the overlay and cleanup
+     */
+    destroy(): void;
+}
+
+/**
+ * PostProcessOverlay - Static overlay canvas for post-processing effects
+ *
+ * This overlay is completely INDEPENDENT of the terminal renderer.
+ * It covers the entire container and draws effects at native screen resolution.
+ *
+ * 🎯 SIMPLE DESIGN:
+ * - Canvas fills 100% of the parent container
+ * - Effects are drawn at native resolution (no scaling needed)
+ * - ResizeObserver handles container size changes
+ * - No synchronization with TerminalGL required
+ *
+ * 🎨 EFFECTS:
+ * - Scanlines: Horizontal, vertical, or grid patterns
+ * - Lines are drawn at fixed pixel intervals (e.g., every 2 pixels)
+ * - Works regardless of terminal scale or cell size
+ *
+ * 🛡️ ROBUST:
+ * - Uses !important on critical CSS properties
+ * - pointer-events: none to not interfere with input
+ * - Redraws only on config change or container resize
+ */
+
+/**
+ * Options for PostProcessOverlay constructor
+ */
+interface PostProcessOverlayOptions {
+}
+/**
+ * Static post-processing overlay
+ *
+ * Key design principles:
+ * 1. INDEPENDENT of TerminalGL - no sync required
+ * 2. Fills entire container at native resolution
+ * 3. Rendered ONCE when configured (no per-frame cost)
+ * 4. Own ResizeObserver for container size changes
+ */
+declare class PostProcessOverlay {
+    private canvas;
+    private ctx;
+    private containerDiv;
+    private parentElement;
+    private resizeObserver;
+    private width;
+    private height;
+    private currentConfig;
+    private configHash;
+    constructor(parentElement: HTMLElement, _options?: PostProcessOverlayOptions);
+    /**
+     * Handle container resize
+     */
+    private handleResize;
+    /**
+     * Set the post-processing configuration
+     * Only re-renders if config actually changed
+     */
+    setConfig(config: PostProcessConfig | null): void;
+    /**
+     * Update scanlines configuration
+     */
+    setScanlines(config: ScanlinesConfig | null): void;
+    /**
+     * Enable/disable scanlines with default settings
+     */
+    setScanlinesEnabled(enabled: boolean): void;
+    /**
+     * Set scanlines opacity (0-1)
+     */
+    setScanlinesOpacity(opacity: number): void;
+    /**
+     * Set scanlines pattern
+     */
+    setScanlinesPattern(pattern: 'horizontal' | 'vertical' | 'grid'): void;
+    /**
+     * Set scanlines spacing (pixels between lines)
+     */
+    setScanlinesSpacing(spacing: number): void;
+    /**
+     * Get current configuration
+     */
+    getConfig(): PostProcessConfig | null;
+    /**
+     * Check if any effect is currently active
+     */
+    isActive(): boolean;
+    /**
+     * Cleanup resources
+     */
+    destroy(): void;
+    /**
+     * @deprecated No longer needed - overlay is independent of renderer
+     */
+    syncWithRenderer(_renderer: unknown): void;
+    /**
+     * @deprecated No longer needed - overlay handles its own resize
+     */
+    resize(_cols: number, _rows: number): void;
+    /**
+     * @deprecated No longer needed - overlay is independent
+     */
+    setCellDimensions(_cellWidth: number, _cellHeight: number): void;
+    private show;
+    private hide;
+    private clear;
+    private isActiveConfig;
+    /**
+     * Render all active effects to the canvas
+     */
+    private render;
+    /**
+     * Render scanlines pattern at native resolution
+     *
+     * Simply draws lines at fixed pixel intervals across the entire canvas.
+     * Completely independent of terminal scaling.
+     */
+    private renderScanlines;
+    /**
+     * Create a hash of the config to detect changes
+     */
+    private hashConfig;
+}
+
+/**
+ * Atlas Utilities
+ *
+ * Shared utilities for block-based font atlas calculations.
+ * Used by both TerminalGL (WebGL) and ImageFontAtlas (Canvas2D).
+ */
+/**
+ * Number of 256-char blocks in an atlas
+ * - 1 block = 16×16 grid = 256 chars (8-bit)
+ * - 4 blocks = 32×32 grid = 1024 chars (10-bit)
+ * - 16 blocks = 64×64 grid = 4096 chars (12-bit)
+ */
+type AtlasBlocks = 1 | 4 | 16;
+/**
+ * Get the number of columns in the atlas grid
+ * @param blocks - Number of 256-char blocks (1, 4, or 16)
+ * @returns Number of character columns (16, 32, or 64)
+ */
+declare function getAtlasColumns(blocks: AtlasBlocks): number;
+/**
+ * Get the maximum valid charCode for a given atlas size
+ * @param blocks - Number of 256-char blocks (1, 4, or 16)
+ * @returns Maximum charCode (255, 1023, or 4095)
+ */
+declare function getMaxCharCode(blocks: AtlasBlocks): number;
+/**
+ * Get character grid position in a block-based atlas
+ *
+ * Atlas layout for multi-block fonts:
+ * - Each block contains 256 chars in a 16×16 grid
+ * - Blocks are arranged in a square:
+ *   - 1 block:  1×1 (16×16 chars total)
+ *   - 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.
+ *
+ * @param charCode - Character code (0 to maxCharCode)
+ * @param blocks - Number of 256-char blocks (1, 4, or 16)
+ * @returns Grid position { col, row } in the atlas
+ */
+declare function getCharGridPosition(charCode: number, blocks: AtlasBlocks): {
+    col: number;
+    row: number;
+};
+
+export { AutoplayOverlay, DEFAULT_PALETTE, GridOverlay, PostProcessOverlay, colorToPaletteIndex, getAtlasColumns, getCharGridPosition, getMaxCharCode, paletteIndexToColor };
+export type { AtlasBlocks, AutoplayOverlayOptions, PostProcessOverlayOptions };

package/dist/common/index.mjs

@@ -0,0 +1,50 @@
+var S=Object.defineProperty;var T=(a,t,e)=>t in a?S(a,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):a[t]=e;var h=(a,t)=>S(a,"name",{value:t,configurable:!0});var s=(a,t,e)=>(T(a,typeof t!="symbol"?t+"":t,e),e);var b=["#000000","#800000","#008000","#808000","#000080","#800080","#008080","#c0c0c0","#808080","#ff0000","#00ff00","#ffff00","#0000ff","#ff00ff","#00ffff","#ffffff","#080808","#121212","#1c1c1c","#262626","#303030","#3a3a3a","#444444","#4e4e4e","#585858","#626262","#6c6c6c","#767676","#808080","#8a8a8a","#949494","#9e9e9e","#a80000","#00a800","#a8a800","#0000a8","#a800a8","#00a8a8","#a8a8a8","#545454","#fc5454","#54fc54","#fcfc54","#5454fc","#fc54fc","#54fcfc","#fcfcfc","#000000",...Array(192).fill("#808080")];function E(a,t=b){return a<0||a>=t.length?"#ff00ff":t[a]}h(E,"paletteIndexToColor");function D(a,t=b){let e=t.indexOf(a.toLowerCase());return e>=0?e:0}h(D,"colorToPaletteIndex");var y=class y{constructor(t,e){s(this,"canvas");s(this,"ctx");s(this,"container");s(this,"cols",0);s(this,"rows",0);s(this,"cellWidth",0);s(this,"cellHeight",0);s(this,"offsetX",0);s(this,"offsetY",0);s(this,"strokeColor","rgba(80, 80, 80, 0.4)");s(this,"lineWidth",1);this.container=t,this.canvas=document.createElement("canvas"),this.canvas.className="grid-overlay-canvas";let o=e?.zIndex??10;this.canvas.style.cssText=`
+      display: block !important;
+      position: absolute !important;
+      pointer-events: none !important;
+      image-rendering: pixelated !important;
+      image-rendering: crisp-edges !important;
+      z-index: ${o} !important;
+    `,this.container.appendChild(this.canvas);let i=this.canvas.getContext("2d");if(!i)throw new Error("[GridOverlay] Impossible de cr\xE9er le contexte 2D");this.ctx=i,e&&(e.strokeColor&&(this.strokeColor=e.strokeColor),e.lineWidth!==void 0&&(this.lineWidth=e.lineWidth))}setDimensions(t,e,o,i,r=0,c=0){this.cols=t,this.rows=e,this.cellWidth=o,this.cellHeight=i,this.offsetX=r,this.offsetY=c}setCanvasSize(t,e){this.canvas.width=t,this.canvas.height=e,this.ctx.setTransform(1,0,0,1,0,0)}setStyle(t){t.strokeColor&&(this.strokeColor=t.strokeColor),t.lineWidth!==void 0&&(this.lineWidth=t.lineWidth)}setTransform(t,e,o,i,r){let c=i.left-r.left,l=i.top-r.top,n=i.width,v=i.height;(this.canvas.width!==n||this.canvas.height!==v)&&(this.canvas.width=n,this.canvas.height=v);let p=this.canvas.style;p.width=`${n}px`,p.height=`${v}px`,p.left=`${c}px`,p.top=`${l}px`}render(){if(!this.ctx)return;let t=this.cols*this.cellWidth,e=this.rows*this.cellHeight,o=t>0?this.canvas.width/t:1,i=e>0?this.canvas.height/e:1,r=Math.min(o,i),c=this.cellWidth*r,l=this.cellHeight*r,n=this.cols*c,v=this.rows*l,p=this.offsetX*r,m=this.offsetY*r;if(!(n===0||v===0)){this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height),this.ctx.strokeStyle=this.strokeColor,this.ctx.lineWidth=Math.max(1,this.lineWidth*r),this.ctx.beginPath();for(let d=0;d<=this.cols;d++){let u=p+d*c+.5;this.ctx.moveTo(u,m),this.ctx.lineTo(u,m+v)}for(let d=0;d<=this.rows;d++){let u=m+d*l+.5;this.ctx.moveTo(p,u),this.ctx.lineTo(p+n,u)}this.ctx.stroke()}}update(t,e,o,i,r,c,l=0,n=0){this.setDimensions(t,e,o,i,l,n),this.setCanvasSize(r,c),this.render()}setVisible(t){this.canvas.style.display=t?"block":"none"}destroy(){this.canvas.parentElement&&this.canvas.parentElement.removeChild(this.canvas)}getCanvas(){return this.canvas}};h(y,"GridOverlay");var g=y;var x=class x{constructor(t,e={}){s(this,"container");s(this,"overlayDiv",null);s(this,"button",null);s(this,"options");s(this,"started",!1);s(this,"onStartCallback");this.container=t,this.options={buttonText:e.buttonText??"Click to Start",onStart:e.onStart??(()=>{}),backgroundColor:e.backgroundColor??"rgba(0, 0, 0, 0.8)",buttonColor:e.buttonColor??"#4a90d9",buttonHoverColor:e.buttonHoverColor??"#357abd",buttonTextColor:e.buttonTextColor??"#ffffff",zIndex:e.zIndex??1e3},this.onStartCallback=e.onStart,this.createOverlay()}createOverlay(){let t=window.getComputedStyle(this.container).position;t!=="relative"&&t!=="absolute"&&t!=="fixed"&&(this.container.style.position="relative"),this.overlayDiv=document.createElement("div"),this.overlayDiv.className="utsp-autoplay-overlay",this.overlayDiv.style.cssText=`
+      position: absolute !important;
+      top: 0 !important;
+      left: 0 !important;
+      width: 100% !important;
+      height: 100% !important;
+      background-color: ${this.options.backgroundColor} !important;
+      display: flex !important;
+      justify-content: center !important;
+      align-items: center !important;
+      z-index: ${this.options.zIndex} !important;
+      cursor: pointer !important;
+    `,this.button=document.createElement("button"),this.button.className="utsp-autoplay-button",this.button.textContent=this.options.buttonText,this.button.style.cssText=`
+      padding: 16px 32px !important;
+      font-size: 18px !important;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif !important;
+      font-weight: 600 !important;
+      color: ${this.options.buttonTextColor} !important;
+      background-color: ${this.options.buttonColor} !important;
+      border: none !important;
+      border-radius: 8px !important;
+      cursor: pointer !important;
+      transition: background-color 0.2s ease, transform 0.1s ease !important;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
+    `,this.button.addEventListener("mouseenter",()=>{this.button&&(this.button.style.backgroundColor=`${this.options.buttonHoverColor} !important`,this.button.style.transform="scale(1.05)")}),this.button.addEventListener("mouseleave",()=>{this.button&&(this.button.style.backgroundColor=`${this.options.buttonColor} !important`,this.button.style.transform="scale(1)")}),this.button.addEventListener("click",e=>{e.stopPropagation(),this.start()}),this.overlayDiv.addEventListener("click",()=>{this.start()}),this.overlayDiv.appendChild(this.button),this.container.appendChild(this.overlayDiv)}start(){this.started||(this.started=!0,this.overlayDiv&&(this.overlayDiv.style.transition="opacity 0.3s ease",this.overlayDiv.style.opacity="0",setTimeout(()=>{this.removeOverlay()},300)),this.onStartCallback&&this.onStartCallback())}isStarted(){return this.started}isVisible(){return this.overlayDiv!==null&&!this.started}removeOverlay(){this.overlayDiv&&this.overlayDiv.parentElement&&this.overlayDiv.parentElement.removeChild(this.overlayDiv),this.overlayDiv=null,this.button=null}setButtonText(t){this.options.buttonText=t,this.button&&(this.button.textContent=t)}setOnStart(t){this.onStartCallback=t}destroy(){this.removeOverlay(),this.started=!1}};h(x,"AutoplayOverlay");var C=x;import{POST_PROCESS_DEFAULTS as f}from"@utsp/types";var w=class w{constructor(t,e){s(this,"canvas");s(this,"ctx");s(this,"containerDiv");s(this,"parentElement");s(this,"resizeObserver");s(this,"width",0);s(this,"height",0);s(this,"currentConfig",null);s(this,"configHash","");this.parentElement=t,this.containerDiv=document.createElement("div"),this.containerDiv.className="postprocess-container",this.containerDiv.style.cssText=`
+      position: absolute !important;
+      top: 0 !important;
+      left: 0 !important;
+      right: 0 !important;
+      bottom: 0 !important;
+      width: 100% !important;
+      height: 100% !important;
+      pointer-events: none !important;
+      z-index: 10 !important;
+      overflow: hidden !important;
+    `,this.canvas=document.createElement("canvas"),this.canvas.className="postprocess-canvas",this.canvas.style.cssText=`
+      position: absolute !important;
+      top: 0 !important;
+      left: 0 !important;
+      width: 100% !important;
+      height: 100% !important;
+      pointer-events: none !important;
+    `;let o=this.canvas.getContext("2d",{alpha:!0});if(!o)throw new Error("PostProcessOverlay: Failed to get 2D context");this.ctx=o,this.containerDiv.appendChild(this.canvas),this.parentElement.appendChild(this.containerDiv),this.resizeObserver=new ResizeObserver(r=>{for(let c of r){let{width:l,height:n}=c.contentRect;l>0&&n>0&&this.handleResize(Math.floor(l),Math.floor(n))}}),this.resizeObserver.observe(this.parentElement);let i=this.parentElement.getBoundingClientRect();i.width>0&&i.height>0&&this.handleResize(Math.floor(i.width),Math.floor(i.height)),this.hide()}handleResize(t,e){this.width===t&&this.height===e||(this.width=t,this.height=e,this.canvas.width=t,this.canvas.height=e,this.currentConfig&&this.isActive()&&this.render())}setConfig(t){let e=this.hashConfig(t);if(e!==this.configHash){if(this.currentConfig=t,this.configHash=e,!t||!this.isActiveConfig(t)){this.clear(),this.hide();return}this.show(),this.render()}}setScanlines(t){t===null?this.setConfig({scanlines:{enabled:!1}}):this.setConfig({scanlines:t})}setScanlinesEnabled(t){if(t){let e=this.currentConfig?.scanlines;this.setScanlines({enabled:!0,opacity:e?.opacity??f.scanlines.opacity,pattern:e?.pattern??"horizontal",spacing:e?.spacing??2,thickness:e?.thickness??1,color:e?.color??{r:0,g:0,b:0}})}else this.setScanlines({enabled:!1})}setScanlinesOpacity(t){let e=Math.max(0,Math.min(1,t)),o=this.currentConfig?.scanlines;this.setScanlines({enabled:o?.enabled??!0,opacity:e,pattern:o?.pattern??"horizontal",spacing:o?.spacing??2,thickness:o?.thickness??1,color:o?.color??{r:0,g:0,b:0}})}setScanlinesPattern(t){let e=this.currentConfig?.scanlines;this.setScanlines({enabled:e?.enabled??!0,opacity:e?.opacity??f.scanlines.opacity,pattern:t,spacing:e?.spacing??2,thickness:e?.thickness??1,color:e?.color??{r:0,g:0,b:0}})}setScanlinesSpacing(t){let e=Math.max(2,Math.round(t)),o=this.currentConfig?.scanlines;this.setScanlines({enabled:o?.enabled??!0,opacity:o?.opacity??f.scanlines.opacity,pattern:o?.pattern??"horizontal",spacing:e,thickness:o?.thickness??1,color:o?.color??{r:0,g:0,b:0}})}getConfig(){return this.currentConfig}isActive(){return this.isActiveConfig(this.currentConfig)}destroy(){this.resizeObserver.disconnect(),this.containerDiv.parentElement&&this.containerDiv.parentElement.removeChild(this.containerDiv)}syncWithRenderer(t){}resize(t,e){}setCellDimensions(t,e){}show(){this.containerDiv.style.display="block"}hide(){this.containerDiv.style.display="none"}clear(){this.ctx.clearRect(0,0,this.width,this.height)}isActiveConfig(t){return t?.scanlines?.enabled??!1}render(){this.clear(),this.currentConfig?.scanlines?.enabled&&this.renderScanlines(this.currentConfig.scanlines)}renderScanlines(t){let e=t.opacity??f.scanlines.opacity,o=t.pattern??"horizontal",i=t.spacing??2,r=t.thickness??1,c=t.color??{r:0,g:0,b:0},l=this.ctx;switch(l.fillStyle=`rgba(${c.r}, ${c.g}, ${c.b}, ${e})`,o){case"horizontal":for(let n=i-1;n<this.height;n+=i)l.fillRect(0,n,this.width,r);break;case"vertical":for(let n=i-1;n<this.width;n+=i)l.fillRect(n,0,r,this.height);break;case"grid":for(let n=i-1;n<this.height;n+=i)l.fillRect(0,n,this.width,r);for(let n=i-1;n<this.width;n+=i)l.fillRect(n,0,r,this.height);break}}hashConfig(t){return t?JSON.stringify(t):"null"}};h(w,"PostProcessOverlay");var k=w;function O(a){return Math.sqrt(a)*16}h(O,"getAtlasColumns");function P(a){return a*256-1}h(P,"getMaxCharCode");function M(a,t){let e=Math.floor(a/256),o=a%256,i=Math.sqrt(t),r=e%i,c=Math.floor(e/i),l=o%16,n=Math.floor(o/16);return{col:r*16+l,row:c*16+n}}h(M,"getCharGridPosition");export{C as AutoplayOverlay,b as DEFAULT_PALETTE,g as GridOverlay,k as PostProcessOverlay,D as colorToPaletteIndex,O as getAtlasColumns,M as getCharGridPosition,P as getMaxCharCode,E as paletteIndexToColor};