@autumnsgrove/gossamer 0.1.0 → 0.2.0

package/dist/patterns.test.js

@@ -0,0 +1,223 @@
+/**
+ * Tests for pattern generators
+ */
+import { describe, it, expect } from 'vitest';
+import { perlinNoise2D, fbmNoise, wavePattern, ripplePattern, staticNoise, seededNoise2D, generateBrightnessGrid, gridToImageData, DEFAULT_PATTERN_CONFIG, } from './patterns';
+describe('perlinNoise2D', () => {
+    it('should return value between -1 and 1', () => {
+        for (let i = 0; i < 100; i++) {
+            const x = Math.random() * 100;
+            const y = Math.random() * 100;
+            const value = perlinNoise2D(x, y);
+            expect(value).toBeGreaterThanOrEqual(-1);
+            expect(value).toBeLessThanOrEqual(1);
+        }
+    });
+    it('should be deterministic (same input = same output)', () => {
+        const val1 = perlinNoise2D(5.5, 3.2);
+        const val2 = perlinNoise2D(5.5, 3.2);
+        expect(val1).toBe(val2);
+    });
+    it('should vary with position', () => {
+        // Use non-integer coordinates (Perlin returns 0 at integer coords)
+        const val1 = perlinNoise2D(0.5, 0.5);
+        const val2 = perlinNoise2D(10.5, 10.5);
+        expect(val1).not.toBe(val2);
+    });
+    it('should produce smooth transitions', () => {
+        const val1 = perlinNoise2D(1.0, 1.0);
+        const val2 = perlinNoise2D(1.01, 1.01);
+        const diff = Math.abs(val1 - val2);
+        expect(diff).toBeLessThan(0.1);
+    });
+});
+describe('fbmNoise', () => {
+    it('should return value between -1 and 1', () => {
+        for (let i = 0; i < 50; i++) {
+            const x = Math.random() * 100;
+            const y = Math.random() * 100;
+            const value = fbmNoise(x, y);
+            expect(value).toBeGreaterThanOrEqual(-1);
+            expect(value).toBeLessThanOrEqual(1);
+        }
+    });
+    it('should be deterministic', () => {
+        const val1 = fbmNoise(3.3, 7.7);
+        const val2 = fbmNoise(3.3, 7.7);
+        expect(val1).toBe(val2);
+    });
+    it('should accept octaves parameter', () => {
+        // Use non-integer coordinates (noise returns 0 at integer coords)
+        const val1 = fbmNoise(5.5, 5.5, 2);
+        const val2 = fbmNoise(5.5, 5.5, 8);
+        // Different octaves should produce different results
+        expect(val1).not.toBe(val2);
+    });
+    it('should accept persistence parameter', () => {
+        // Use non-integer coordinates (noise returns 0 at integer coords)
+        const val1 = fbmNoise(5.5, 5.5, 4, 0.3);
+        const val2 = fbmNoise(5.5, 5.5, 4, 0.7);
+        expect(val1).not.toBe(val2);
+    });
+});
+describe('wavePattern', () => {
+    it('should return value between -1 and 1', () => {
+        for (let t = 0; t < 10; t++) {
+            const value = wavePattern(50, 50, t);
+            expect(value).toBeGreaterThanOrEqual(-1);
+            expect(value).toBeLessThanOrEqual(1);
+        }
+    });
+    it('should vary with time', () => {
+        const val1 = wavePattern(10, 10, 0);
+        const val2 = wavePattern(10, 10, 5);
+        expect(val1).not.toBe(val2);
+    });
+    it('should use custom config', () => {
+        const config = { frequency: 0.1, amplitude: 0.5, speed: 1.0 };
+        const value = wavePattern(10, 10, 1, config);
+        expect(Math.abs(value)).toBeLessThanOrEqual(0.5);
+    });
+});
+describe('ripplePattern', () => {
+    it('should return value between -1 and 1', () => {
+        for (let i = 0; i < 50; i++) {
+            const value = ripplePattern(Math.random() * 100, Math.random() * 100, 50, 50, Math.random() * 10);
+            expect(value).toBeGreaterThanOrEqual(-1);
+            expect(value).toBeLessThanOrEqual(1);
+        }
+    });
+    it('should vary with distance from center', () => {
+        const centerVal = ripplePattern(50, 50, 50, 50, 0);
+        const edgeVal = ripplePattern(100, 50, 50, 50, 0);
+        expect(centerVal).not.toBe(edgeVal);
+    });
+    it('should animate over time', () => {
+        const val1 = ripplePattern(60, 60, 50, 50, 0);
+        const val2 = ripplePattern(60, 60, 50, 50, 1);
+        expect(val1).not.toBe(val2);
+    });
+});
+describe('staticNoise', () => {
+    it('should return value between 0 and 1', () => {
+        for (let i = 0; i < 100; i++) {
+            const value = staticNoise();
+            expect(value).toBeGreaterThanOrEqual(0);
+            expect(value).toBeLessThanOrEqual(1);
+        }
+    });
+    it('should be deterministic with seed', () => {
+        const val1 = staticNoise(12345);
+        const val2 = staticNoise(12345);
+        expect(val1).toBe(val2);
+    });
+    it('should vary with different seeds', () => {
+        const val1 = staticNoise(1);
+        const val2 = staticNoise(2);
+        expect(val1).not.toBe(val2);
+    });
+});
+describe('seededNoise2D', () => {
+    it('should return value between 0 and 1', () => {
+        for (let i = 0; i < 100; i++) {
+            const value = seededNoise2D(Math.random() * 100, Math.random() * 100);
+            expect(value).toBeGreaterThanOrEqual(0);
+            expect(value).toBeLessThanOrEqual(1);
+        }
+    });
+    it('should be deterministic', () => {
+        const val1 = seededNoise2D(5, 10, 42);
+        const val2 = seededNoise2D(5, 10, 42);
+        expect(val1).toBe(val2);
+    });
+    it('should vary with coordinates', () => {
+        const val1 = seededNoise2D(0, 0);
+        const val2 = seededNoise2D(10, 10);
+        expect(val1).not.toBe(val2);
+    });
+    it('should vary with seed', () => {
+        const val1 = seededNoise2D(5, 5, 0);
+        const val2 = seededNoise2D(5, 5, 100);
+        expect(val1).not.toBe(val2);
+    });
+});
+describe('DEFAULT_PATTERN_CONFIG', () => {
+    it('should have expected default values', () => {
+        expect(DEFAULT_PATTERN_CONFIG.frequency).toBe(0.05);
+        expect(DEFAULT_PATTERN_CONFIG.amplitude).toBe(1.0);
+        expect(DEFAULT_PATTERN_CONFIG.speed).toBe(0.5);
+    });
+});
+describe('generateBrightnessGrid', () => {
+    it('should generate grid with correct dimensions', () => {
+        const grid = generateBrightnessGrid(10, 8, 'perlin');
+        expect(grid.length).toBe(8); // rows
+        expect(grid[0].length).toBe(10); // cols
+    });
+    it('should generate brightness values between 0 and 255', () => {
+        const grid = generateBrightnessGrid(20, 15, 'perlin');
+        for (const row of grid) {
+            for (const value of row) {
+                expect(value).toBeGreaterThanOrEqual(0);
+                expect(value).toBeLessThanOrEqual(255);
+                expect(Number.isInteger(value)).toBe(true);
+            }
+        }
+    });
+    it('should support all pattern types', () => {
+        const patterns = [
+            'perlin',
+            'waves',
+            'static',
+            'ripple',
+            'fbm',
+        ];
+        for (const pattern of patterns) {
+            const grid = generateBrightnessGrid(5, 5, pattern);
+            expect(grid.length).toBe(5);
+            expect(grid[0].length).toBe(5);
+        }
+    });
+    it('should use time parameter for animation', () => {
+        const grid1 = generateBrightnessGrid(10, 10, 'perlin', 0);
+        const grid2 = generateBrightnessGrid(10, 10, 'perlin', 100);
+        // At least some values should differ
+        let hasDifference = false;
+        for (let r = 0; r < 10 && !hasDifference; r++) {
+            for (let c = 0; c < 10 && !hasDifference; c++) {
+                if (grid1[r][c] !== grid2[r][c]) {
+                    hasDifference = true;
+                }
+            }
+        }
+        expect(hasDifference).toBe(true);
+    });
+});
+// Note: gridToImageData tests require browser environment with canvas support
+// These tests are skipped in Node.js/jsdom as ImageData is not available
+describe.skip('gridToImageData (browser only)', () => {
+    it('should create ImageData with correct dimensions', () => {
+        const grid = [
+            [100, 150],
+            [200, 50],
+        ];
+        const imageData = gridToImageData(grid, 8, 12);
+        expect(imageData.width).toBe(16); // 2 cols * 8
+        expect(imageData.height).toBe(24); // 2 rows * 12
+    });
+    it('should fill cells with brightness values', () => {
+        const grid = [[128]]; // Single cell
+        const imageData = gridToImageData(grid, 2, 2);
+        // Check first pixel (should be brightness 128)
+        expect(imageData.data[0]).toBe(128); // R
+        expect(imageData.data[1]).toBe(128); // G
+        expect(imageData.data[2]).toBe(128); // B
+        expect(imageData.data[3]).toBe(255); // A (full opacity)
+    });
+    it('should handle empty grid', () => {
+        const grid = [];
+        const imageData = gridToImageData(grid, 8, 12);
+        expect(imageData.width).toBe(0);
+        expect(imageData.height).toBe(0);
+    });
+});

package/dist/renderer.d.ts

@@ -37,7 +37,15 @@ export declare class GossamerRenderer {
     private animationId;
     private lastFrameTime;
     private isRunning;
+    private charAtlas;
+    private atlasCharacters;
     constructor(canvas: HTMLCanvasElement, config?: Partial<Omit<RenderConfig, 'canvas'>>);
+    /**
+     * Build character texture atlas for fast rendering
+     * Pre-renders all characters to an offscreen canvas, then uses drawImage
+     * instead of fillText for 5-10x faster rendering
+     */
+    private buildCharacterAtlas;
     /**
      * Set up the canvas with optimal rendering settings
      */
@@ -85,6 +93,25 @@ export declare class GossamerRenderer {
         x: number;
         y: number;
     }>): void;
+    /**
+     * PERFORMANCE: Render from BrightnessBuffer using texture atlas
+     *
+     * Uses pre-rendered character sprites instead of fillText calls.
+     * 5-10x faster than renderFromBrightnessGrid for large canvases.
+     *
+     * @param buffer - BrightnessBuffer from fillBrightnessBuffer
+     */
+    renderFromBuffer(buffer: {
+        data: Uint8Array;
+        cols: number;
+        rows: number;
+    }): void;
+    /**
+     * PERFORMANCE: Render brightness grid using atlas (legacy grid format)
+     *
+     * @param grid - 2D array of brightness values
+     */
+    renderGridFast(grid: number[][]): void;
     /**
      * Calculate average brightness for a cell region
      */

package/dist/renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../src/renderer.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AASH;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,kCAAkC;IAClC,MAAM,EAAE,iBAAiB,CAAC;IAC1B,+CAA+C;IAC/C,UAAU,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,8CAA8C;IAC9C,UAAU,EAAE,MAAM,CAAC;IACnB,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,eAAe,EAAE,MAAM,CAAC;IACxB,kBAAkB;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,kBAAkB,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;CACjE;AAeD;;;;;GAKG;AACH,qBAAa,gBAAgB;IAC3B,OAAO,CAAC,GAAG,CAA2B;IACtC,OAAO,CAAC,MAAM,CAAe;IAC7B,OAAO,CAAC,WAAW,CAAuB;IAC1C,OAAO,CAAC,aAAa,CAAa;IAClC,OAAO,CAAC,SAAS,CAAkB;gBAEvB,MAAM,EAAE,iBAAiB,EAAE,MAAM,GAAE,OAAO,CAAC,IAAI,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAM;IAgBzF;;OAEG;IACH,OAAO,CAAC,WAAW;IAYnB;;OAEG;IACH,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,GAAG,IAAI;IAKjE;;OAEG;IACH,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI;IAO3C;;OAEG;IACH,aAAa,IAAI;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE;IAOlD;;OAEG;IACH,YAAY,IAAI;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE;IAU9C;;OAEG;IACH,KAAK,IAAI,IAAI;IAWb;;OAEG;IACH,WAAW,CAAC,SAAS,EAAE,SAAS,GAAG,IAAI;IAoBvC;;OAEG;IACH,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,GAAG,IAAI;IAmBhD;;OAEG;IACH,gBAAgB,CAAC,IAAI,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG,IAAI;IAW1F;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAyBzB;;OAEG;IACH,cAAc,CACZ,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,SAAS,GAAG,MAAM,EAAE,EAAE,EACrE,GAAG,GAAE,MAAW,GACf,IAAI;IAgCP;;OAEG;IACH,aAAa,IAAI,IAAI;IAQrB;;OAEG;IACH,WAAW,IAAI,OAAO;IAItB;;OAEG;IACH,KAAK,IAAI,IAAI;IAQb;;OAEG;IACH,OAAO,IAAI,IAAI;CAGhB"}
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../src/renderer.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AASH;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,kCAAkC;IAClC,MAAM,EAAE,iBAAiB,CAAC;IAC1B,+CAA+C;IAC/C,UAAU,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,8CAA8C;IAC9C,UAAU,EAAE,MAAM,CAAC;IACnB,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,eAAe,EAAE,MAAM,CAAC;IACxB,kBAAkB;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,kBAAkB,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;CACjE;AAeD;;;;;GAKG;AACH,qBAAa,gBAAgB;IAC3B,OAAO,CAAC,GAAG,CAA2B;IACtC,OAAO,CAAC,MAAM,CAAe;IAC7B,OAAO,CAAC,WAAW,CAAuB;IAC1C,OAAO,CAAC,aAAa,CAAa;IAClC,OAAO,CAAC,SAAS,CAAkB;IAGnC,OAAO,CAAC,SAAS,CAAoD;IACrE,OAAO,CAAC,eAAe,CAAc;gBAEzB,MAAM,EAAE,iBAAiB,EAAE,MAAM,GAAE,OAAO,CAAC,IAAI,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAM;IAiBzF;;;;OAIG;IACH,OAAO,CAAC,mBAAmB;IA6C3B;;OAEG;IACH,OAAO,CAAC,WAAW;IAYnB;;OAEG;IACH,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,GAAG,IAAI;IAiBjE;;OAEG;IACH,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI;IAO3C;;OAEG;IACH,aAAa,IAAI;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE;IAOlD;;OAEG;IACH,YAAY,IAAI;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE;IAU9C;;OAEG;IACH,KAAK,IAAI,IAAI;IAWb;;OAEG;IACH,WAAW,CAAC,SAAS,EAAE,SAAS,GAAG,IAAI;IAoBvC;;OAEG;IACH,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,GAAG,IAAI;IAmBhD;;OAEG;IACH,gBAAgB,CAAC,IAAI,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG,IAAI;IAW1F;;;;;;;OAOG;IACH,gBAAgB,CAAC,MAAM,EAAE;QAAE,IAAI,EAAE,UAAU,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI;IAgDhF;;;;OAIG;IACH,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,GAAG,IAAI;IAiCtC;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAyBzB;;OAEG;IACH,cAAc,CACZ,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,SAAS,GAAG,MAAM,EAAE,EAAE,EACrE,GAAG,GAAE,MAAW,GACf,IAAI;IAgCP;;OAEG;IACH,aAAa,IAAI,IAAI;IAQrB;;OAEG;IACH,WAAW,IAAI,OAAO;IAItB;;OAEG;IACH,KAAK,IAAI,IAAI;IAQb;;OAEG;IACH,OAAO,IAAI,IAAI;CAGhB"}

package/dist/renderer.js

@@ -0,0 +1,362 @@
+/**
+ * Gossamer Core Renderer
+ *
+ * Canvas-based ASCII rendering engine. Converts image data to ASCII characters
+ * by mapping brightness values to a character set.
+ */
+// Define locally to avoid circular dependency with index.ts
+const DEFAULT_CHARACTERS = ' .:-=+*#%@';
+function calculateBrightness(r, g, b) {
+    return 0.21 * r + 0.72 * g + 0.07 * b;
+}
+/**
+ * Default render configuration
+ */
+const DEFAULT_RENDER_CONFIG = {
+    characters: DEFAULT_CHARACTERS,
+    cellWidth: 8,
+    cellHeight: 12,
+    color: '#ffffff',
+    backgroundColor: '',
+    fontFamily: 'monospace',
+    brightnessFunction: calculateBrightness,
+};
+/**
+ * Core ASCII renderer class
+ *
+ * Handles all canvas rendering operations for ASCII effects.
+ * Supports both static rendering and animation loops.
+ */
+export class GossamerRenderer {
+    constructor(canvas, config = {}) {
+        this.animationId = null;
+        this.lastFrameTime = 0;
+        this.isRunning = false;
+        // Performance: Character texture atlas
+        this.charAtlas = null;
+        this.atlasCharacters = '';
+        const context = canvas.getContext('2d');
+        if (!context) {
+            throw new Error('Failed to get 2D rendering context');
+        }
+        this.ctx = context;
+        this.config = {
+            canvas,
+            ...DEFAULT_RENDER_CONFIG,
+            ...config,
+        };
+        this.setupCanvas();
+        this.buildCharacterAtlas();
+    }
+    /**
+     * Build character texture atlas for fast rendering
+     * Pre-renders all characters to an offscreen canvas, then uses drawImage
+     * instead of fillText for 5-10x faster rendering
+     */
+    buildCharacterAtlas() {
+        const { characters, cellWidth, cellHeight, color, fontFamily } = this.config;
+        // Skip if atlas already built with same characters
+        if (this.atlasCharacters === characters && this.charAtlas) {
+            return;
+        }
+        // Create offscreen canvas (use OffscreenCanvas if available for better perf)
+        const atlasWidth = characters.length * cellWidth;
+        const atlasHeight = cellHeight;
+        if (typeof OffscreenCanvas !== 'undefined') {
+            this.charAtlas = new OffscreenCanvas(atlasWidth, atlasHeight);
+        }
+        else {
+            this.charAtlas = document.createElement('canvas');
+            this.charAtlas.width = atlasWidth;
+            this.charAtlas.height = atlasHeight;
+        }
+        const ctx = this.charAtlas.getContext('2d');
+        if (!ctx) {
+            this.charAtlas = null;
+            return;
+        }
+        // Clear with transparent background
+        ctx.clearRect(0, 0, atlasWidth, atlasHeight);
+        // Render each character
+        ctx.fillStyle = color;
+        ctx.font = `${cellHeight}px ${fontFamily}`;
+        ctx.textBaseline = 'top';
+        for (let i = 0; i < characters.length; i++) {
+            const char = characters[i];
+            if (char !== ' ') {
+                ctx.fillText(char, i * cellWidth, 0);
+            }
+        }
+        this.atlasCharacters = characters;
+    }
+    /**
+     * Set up the canvas with optimal rendering settings
+     */
+    setupCanvas() {
+        const { fontFamily, cellHeight } = this.config;
+        // Set font for consistent character sizing
+        this.ctx.font = `${cellHeight}px ${fontFamily}`;
+        this.ctx.textBaseline = 'top';
+        // Enable image smoothing for better quality
+        this.ctx.imageSmoothingEnabled = true;
+        this.ctx.imageSmoothingQuality = 'high';
+    }
+    /**
+     * Update the renderer configuration
+     */
+    updateConfig(config) {
+        const needsAtlasRebuild = config.characters !== undefined ||
+            config.color !== undefined ||
+            config.cellWidth !== undefined ||
+            config.cellHeight !== undefined ||
+            config.fontFamily !== undefined;
+        this.config = { ...this.config, ...config };
+        this.setupCanvas();
+        if (needsAtlasRebuild) {
+            this.atlasCharacters = ''; // Force rebuild
+            this.buildCharacterAtlas();
+        }
+    }
+    /**
+     * Resize the canvas to match new dimensions
+     */
+    resize(width, height) {
+        const { canvas } = this.config;
+        canvas.width = width;
+        canvas.height = height;
+        this.setupCanvas();
+    }
+    /**
+     * Get the current canvas dimensions
+     */
+    getDimensions() {
+        return {
+            width: this.config.canvas.width,
+            height: this.config.canvas.height,
+        };
+    }
+    /**
+     * Calculate the number of cells that fit in the canvas
+     */
+    getCellCount() {
+        const { width, height } = this.getDimensions();
+        const { cellWidth, cellHeight } = this.config;
+        return {
+            cols: Math.ceil(width / cellWidth),
+            rows: Math.ceil(height / cellHeight),
+        };
+    }
+    /**
+     * Clear the canvas
+     */
+    clear() {
+        const { canvas, backgroundColor } = this.config;
+        if (backgroundColor) {
+            this.ctx.fillStyle = backgroundColor;
+            this.ctx.fillRect(0, 0, canvas.width, canvas.height);
+        }
+        else {
+            this.ctx.clearRect(0, 0, canvas.width, canvas.height);
+        }
+    }
+    /**
+     * Render a single frame from image data
+     */
+    renderFrame(imageData) {
+        const { canvas, characters, cellWidth, cellHeight, color, brightnessFunction } = this.config;
+        const { width, data } = imageData;
+        this.clear();
+        this.ctx.fillStyle = color;
+        for (let y = 0; y < canvas.height; y += cellHeight) {
+            for (let x = 0; x < canvas.width; x += cellWidth) {
+                const brightness = this.getCellBrightness(data, x, y, width, cellWidth, cellHeight, brightnessFunction);
+                const charIndex = Math.floor((brightness / 255) * (characters.length - 1));
+                const char = characters[Math.min(charIndex, characters.length - 1)];
+                if (char !== ' ') {
+                    this.ctx.fillText(char, x, y);
+                }
+            }
+        }
+    }
+    /**
+     * Render ASCII from a brightness grid (for pattern-based rendering)
+     */
+    renderFromBrightnessGrid(grid) {
+        const { characters, cellWidth, cellHeight, color } = this.config;
+        this.clear();
+        this.ctx.fillStyle = color;
+        for (let row = 0; row < grid.length; row++) {
+            for (let col = 0; col < grid[row].length; col++) {
+                const brightness = grid[row][col];
+                const charIndex = Math.floor((brightness / 255) * (characters.length - 1));
+                const char = characters[Math.min(charIndex, characters.length - 1)];
+                if (char !== ' ') {
+                    this.ctx.fillText(char, col * cellWidth, row * cellHeight);
+                }
+            }
+        }
+    }
+    /**
+     * Render ASCII with per-cell colors (for colored image rendering)
+     */
+    renderWithColors(data) {
+        this.clear();
+        for (const { char, color, x, y } of data) {
+            if (char !== ' ') {
+                this.ctx.fillStyle = color;
+                this.ctx.fillText(char, x, y);
+            }
+        }
+    }
+    /**
+     * PERFORMANCE: Render from BrightnessBuffer using texture atlas
+     *
+     * Uses pre-rendered character sprites instead of fillText calls.
+     * 5-10x faster than renderFromBrightnessGrid for large canvases.
+     *
+     * @param buffer - BrightnessBuffer from fillBrightnessBuffer
+     */
+    renderFromBuffer(buffer) {
+        const { characters, cellWidth, cellHeight } = this.config;
+        this.clear();
+        // Fall back to fillText if atlas not available
+        if (!this.charAtlas) {
+            this.ctx.fillStyle = this.config.color;
+            const charLen = characters.length - 1;
+            let idx = 0;
+            for (let row = 0; row < buffer.rows; row++) {
+                for (let col = 0; col < buffer.cols; col++) {
+                    const brightness = buffer.data[idx++];
+                    const charIndex = (brightness / 255 * charLen) | 0;
+                    const char = characters[Math.min(charIndex, charLen)];
+                    if (char !== ' ') {
+                        this.ctx.fillText(char, col * cellWidth, row * cellHeight);
+                    }
+                }
+            }
+            return;
+        }
+        // Use atlas for fast rendering via drawImage
+        const charLen = characters.length - 1;
+        let idx = 0;
+        for (let row = 0; row < buffer.rows; row++) {
+            const y = row * cellHeight;
+            for (let col = 0; col < buffer.cols; col++) {
+                const brightness = buffer.data[idx++];
+                const charIndex = (brightness / 255 * charLen) | 0;
+                // Skip space characters (index 0 in most charsets)
+                if (charIndex === 0 && characters[0] === ' ') {
+                    continue;
+                }
+                // Draw from atlas: source is the character's position in the atlas
+                this.ctx.drawImage(this.charAtlas, charIndex * cellWidth, 0, cellWidth, cellHeight, // source
+                col * cellWidth, y, cellWidth, cellHeight // destination
+                );
+            }
+        }
+    }
+    /**
+     * PERFORMANCE: Render brightness grid using atlas (legacy grid format)
+     *
+     * @param grid - 2D array of brightness values
+     */
+    renderGridFast(grid) {
+        const { characters, cellWidth, cellHeight } = this.config;
+        this.clear();
+        if (!this.charAtlas) {
+            // Fallback to standard method
+            this.renderFromBrightnessGrid(grid);
+            return;
+        }
+        const charLen = characters.length - 1;
+        for (let row = 0; row < grid.length; row++) {
+            const y = row * cellHeight;
+            const rowData = grid[row];
+            for (let col = 0; col < rowData.length; col++) {
+                const brightness = rowData[col];
+                const charIndex = (brightness / 255 * charLen) | 0;
+                if (charIndex === 0 && characters[0] === ' ') {
+                    continue;
+                }
+                this.ctx.drawImage(this.charAtlas, charIndex * cellWidth, 0, cellWidth, cellHeight, col * cellWidth, y, cellWidth, cellHeight);
+            }
+        }
+    }
+    /**
+     * Calculate average brightness for a cell region
+     */
+    getCellBrightness(data, startX, startY, imageWidth, cellWidth, cellHeight, brightnessFunction) {
+        let total = 0;
+        let count = 0;
+        for (let cy = 0; cy < cellHeight; cy++) {
+            for (let cx = 0; cx < cellWidth; cx++) {
+                const px = ((startY + cy) * imageWidth + (startX + cx)) * 4;
+                if (px >= 0 && px + 2 < data.length) {
+                    total += brightnessFunction(data[px], data[px + 1], data[px + 2]);
+                    count++;
+                }
+            }
+        }
+        return count > 0 ? total / count : 0;
+    }
+    /**
+     * Start an animation loop with FPS limiting
+     */
+    startAnimation(updateFn, fps = 30) {
+        if (this.isRunning) {
+            this.stopAnimation();
+        }
+        this.isRunning = true;
+        const frameInterval = 1000 / fps;
+        this.lastFrameTime = performance.now();
+        const animate = (currentTime) => {
+            if (!this.isRunning)
+                return;
+            const deltaTime = currentTime - this.lastFrameTime;
+            if (deltaTime >= frameInterval) {
+                const result = updateFn(currentTime, deltaTime);
+                if (result instanceof ImageData) {
+                    this.renderFrame(result);
+                }
+                else {
+                    this.renderFromBrightnessGrid(result);
+                }
+                this.lastFrameTime = currentTime - (deltaTime % frameInterval);
+            }
+            this.animationId = requestAnimationFrame(animate);
+        };
+        this.animationId = requestAnimationFrame(animate);
+    }
+    /**
+     * Stop the animation loop
+     */
+    stopAnimation() {
+        this.isRunning = false;
+        if (this.animationId !== null) {
+            cancelAnimationFrame(this.animationId);
+            this.animationId = null;
+        }
+    }
+    /**
+     * Check if animation is currently running
+     */
+    isAnimating() {
+        return this.isRunning;
+    }
+    /**
+     * Pause animation (can be resumed)
+     */
+    pause() {
+        this.isRunning = false;
+        if (this.animationId !== null) {
+            cancelAnimationFrame(this.animationId);
+            this.animationId = null;
+        }
+    }
+    /**
+     * Clean up and destroy the renderer
+     */
+    destroy() {
+        this.stopAnimation();
+    }
+}

package/dist/svelte/GossamerBorder.svelte.d.ts

@@ -1 +1,56 @@
-export { SvelteComponentTyped as default } from 'svelte';
+export type BorderStyle = 'dots' | 'dashes' | 'stars' | 'corners' | 'simple' | 'double';
+export interface GossamerBorderProps {
+    /** Border style preset */
+    style?: BorderStyle;
+    /** Custom characters for border (overrides style) */
+    characters?: {
+        horizontal?: string;
+        vertical?: string;
+        topLeft?: string;
+        topRight?: string;
+        bottomLeft?: string;
+        bottomRight?: string;
+    };
+    /** Border color */
+    color?: string;
+    /** Border thickness in characters */
+    thickness?: number;
+    /** Character size in pixels */
+    charSize?: number;
+    /** Enable animation */
+    animated?: boolean;
+    /** Animation speed */
+    speed?: number;
+    /** Padding inside the border */
+    padding?: number;
+    /** Additional CSS class */
+    class?: string;
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const GossamerBorder: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<GossamerBorderProps, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, "">;
+type GossamerBorder = InstanceType<typeof GossamerBorder>;
+export default GossamerBorder;
+//# sourceMappingURL=GossamerBorder.svelte.d.ts.map