@autumnsgrove/gossamer 0.1.1 → 0.2.0

package/dist/svelte/presets.d.ts

@@ -1,5 +1,7 @@
-import { PresetConfig } from '../index';
-
+/**
+ * Preset configurations for Gossamer effects
+ */
+import type { PresetConfig } from '../index';
 /**
  * Grove-themed presets
  * Organic, nature-inspired effects

package/dist/svelte/presets.js

@@ -0,0 +1,161 @@
+/**
+ * Preset configurations for Gossamer effects
+ */
+/**
+ * Grove-themed presets
+ * Organic, nature-inspired effects
+ */
+export const grovePresets = {
+    'grove-mist': {
+        name: 'Grove Mist',
+        description: 'Soft fog effect drifting through the trees',
+        characters: ' ·∙•◦',
+        pattern: 'perlin',
+        frequency: 0.03,
+        amplitude: 0.8,
+        speed: 0.3,
+        opacity: 0.2,
+    },
+    'grove-fireflies': {
+        name: 'Grove Fireflies',
+        description: 'Twinkling points of light in the darkness',
+        characters: ' ·*✦✧',
+        pattern: 'static',
+        frequency: 0.01,
+        amplitude: 1.2,
+        speed: 0.8,
+        opacity: 0.3,
+    },
+    'grove-rain': {
+        name: 'Grove Rain',
+        description: 'Gentle rain falling through the canopy',
+        characters: ' │\\|/',
+        pattern: 'waves',
+        frequency: 0.05,
+        amplitude: 1.0,
+        speed: 1.5,
+        opacity: 0.15,
+    },
+    'grove-dew': {
+        name: 'Grove Dew',
+        description: 'Morning dew glistening on spider silk',
+        characters: ' ·∘∙●',
+        pattern: 'fbm',
+        frequency: 0.04,
+        amplitude: 0.7,
+        speed: 0.1,
+        opacity: 0.15,
+    },
+};
+/**
+ * Seasonal presets
+ * Effects themed around the four seasons
+ */
+export const seasonalPresets = {
+    'winter-snow': {
+        name: 'Winter Snow',
+        description: 'Gentle snowfall on a quiet night',
+        characters: ' ·∙*❄',
+        pattern: 'perlin',
+        frequency: 0.04,
+        amplitude: 0.9,
+        speed: 0.5,
+        opacity: 0.25,
+    },
+    'autumn-leaves': {
+        name: 'Autumn Leaves',
+        description: 'Scattered leaves drifting on the wind',
+        characters: ' 🍂·∙',
+        pattern: 'perlin',
+        frequency: 0.06,
+        amplitude: 1.1,
+        speed: 0.4,
+        opacity: 0.2,
+    },
+    'spring-petals': {
+        name: 'Spring Petals',
+        description: 'Cherry blossom petals floating on the breeze',
+        characters: ' ·✿❀',
+        pattern: 'waves',
+        frequency: 0.05,
+        amplitude: 0.8,
+        speed: 0.6,
+        opacity: 0.2,
+    },
+    'summer-heat': {
+        name: 'Summer Heat',
+        description: 'Heat shimmer rising from sun-warmed ground',
+        characters: ' ~≈∿',
+        pattern: 'waves',
+        frequency: 0.08,
+        amplitude: 1.3,
+        speed: 1.0,
+        opacity: 0.1,
+    },
+};
+/**
+ * Ambient presets
+ * Subtle background textures
+ */
+export const ambientPresets = {
+    'ambient-static': {
+        name: 'Ambient Static',
+        description: 'Gentle static noise texture',
+        characters: ' .:',
+        pattern: 'static',
+        frequency: 0.1,
+        amplitude: 0.5,
+        speed: 0.2,
+        opacity: 0.08,
+    },
+    'ambient-waves': {
+        name: 'Ambient Waves',
+        description: 'Soft flowing wave pattern',
+        characters: ' ·~',
+        pattern: 'waves',
+        frequency: 0.02,
+        amplitude: 0.6,
+        speed: 0.3,
+        opacity: 0.1,
+    },
+    'ambient-clouds': {
+        name: 'Ambient Clouds',
+        description: 'Drifting cloud-like patterns',
+        characters: ' .:-',
+        pattern: 'fbm',
+        frequency: 0.02,
+        amplitude: 0.7,
+        speed: 0.15,
+        opacity: 0.12,
+    },
+};
+/**
+ * All presets combined for easy access
+ */
+export const PRESETS = {
+    ...grovePresets,
+    ...seasonalPresets,
+    ...ambientPresets,
+};
+/**
+ * Get a preset by name
+ */
+export function getPreset(name) {
+    return PRESETS[name];
+}
+/**
+ * List all available preset names
+ */
+export function getPresetNames() {
+    return Object.keys(PRESETS);
+}
+/**
+ * List preset names by category
+ */
+export function getPresetsByCategory() {
+    return {
+        grove: Object.keys(grovePresets),
+        seasonal: Object.keys(seasonalPresets),
+        ambient: Object.keys(ambientPresets),
+    };
+}

package/dist/utils/canvas.js

@@ -0,0 +1,139 @@
+/**
+ * Canvas Utilities
+ *
+ * Helper functions for canvas creation, setup, and manipulation.
+ */
+/**
+ * Create a canvas element with optimal settings
+ */
+export function createCanvas(options = {}) {
+    const { width = 300, height = 150, highDPI = true, className, style } = options;
+    const canvas = document.createElement('canvas');
+    if (highDPI) {
+        const dpr = window.devicePixelRatio || 1;
+        canvas.width = width * dpr;
+        canvas.height = height * dpr;
+        canvas.style.width = `${width}px`;
+        canvas.style.height = `${height}px`;
+        const ctx = canvas.getContext('2d');
+        if (ctx) {
+            ctx.scale(dpr, dpr);
+        }
+    }
+    else {
+        canvas.width = width;
+        canvas.height = height;
+    }
+    if (className) {
+        canvas.className = className;
+    }
+    if (style) {
+        Object.assign(canvas.style, style);
+    }
+    return canvas;
+}
+/**
+ * Get the device pixel ratio
+ */
+export function getDevicePixelRatio() {
+    return typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
+}
+/**
+ * Resize canvas to match container dimensions
+ */
+export function resizeCanvasToContainer(canvas, container, highDPI = true) {
+    const rect = container.getBoundingClientRect();
+    const dpr = highDPI ? getDevicePixelRatio() : 1;
+    const width = rect.width;
+    const height = rect.height;
+    canvas.width = width * dpr;
+    canvas.height = height * dpr;
+    canvas.style.width = `${width}px`;
+    canvas.style.height = `${height}px`;
+    if (highDPI) {
+        const ctx = canvas.getContext('2d');
+        if (ctx) {
+            ctx.scale(dpr, dpr);
+        }
+    }
+    return { width, height };
+}
+/**
+ * Create an offscreen canvas for buffer rendering
+ */
+export function createOffscreenCanvas(width, height) {
+    if (typeof OffscreenCanvas !== 'undefined') {
+        return new OffscreenCanvas(width, height);
+    }
+    // Fallback for environments without OffscreenCanvas
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+    return canvas;
+}
+/**
+ * Clear a canvas
+ */
+export function clearCanvas(ctx, width, height, backgroundColor) {
+    if (backgroundColor) {
+        ctx.fillStyle = backgroundColor;
+        ctx.fillRect(0, 0, width, height);
+    }
+    else {
+        ctx.clearRect(0, 0, width, height);
+    }
+}
+/**
+ * Get image data from a canvas region
+ */
+export function getImageData(ctx, x = 0, y = 0, width, height) {
+    const canvas = ctx.canvas;
+    const w = width ?? canvas.width;
+    const h = height ?? canvas.height;
+    return ctx.getImageData(x, y, w, h);
+}
+/**
+ * Set optimal rendering context settings
+ */
+export function optimizeContext(ctx) {
+    // Disable image smoothing for crisp ASCII rendering
+    ctx.imageSmoothingEnabled = false;
+    // Use source-over for standard compositing
+    ctx.globalCompositeOperation = 'source-over';
+}
+/**
+ * Set text rendering options for ASCII display
+ */
+export function setupTextRendering(ctx, fontSize, fontFamily = 'monospace', color = '#ffffff') {
+    ctx.font = `${fontSize}px ${fontFamily}`;
+    ctx.textBaseline = 'top';
+    ctx.textAlign = 'left';
+    ctx.fillStyle = color;
+}
+/**
+ * Measure text width for a given font configuration
+ */
+export function measureTextWidth(ctx, text, fontSize, fontFamily = 'monospace') {
+    const originalFont = ctx.font;
+    ctx.font = `${fontSize}px ${fontFamily}`;
+    const metrics = ctx.measureText(text);
+    ctx.font = originalFont;
+    return metrics.width;
+}
+/**
+ * Calculate optimal cell size for a given canvas and desired columns
+ */
+export function calculateCellSize(canvasWidth, canvasHeight, targetCols) {
+    const cellWidth = Math.floor(canvasWidth / targetCols);
+    // Use a typical monospace aspect ratio of ~0.6
+    const cellHeight = Math.floor(cellWidth * 1.5);
+    const cols = Math.floor(canvasWidth / cellWidth);
+    const rows = Math.floor(canvasHeight / cellHeight);
+    return { cellWidth, cellHeight, cols, rows };
+}
+/**
+ * Apply a CSS blend mode to canvas compositing
+ */
+export function setBlendMode(ctx, mode) {
+    ctx.globalCompositeOperation = mode === 'normal' ? 'source-over' : mode;
+}

package/dist/utils/image.js

@@ -0,0 +1,195 @@
+/**
+ * Image Utilities
+ *
+ * Image loading, processing, and pixel manipulation for ASCII conversion.
+ */
+/**
+ * Load an image from a URL
+ */
+export function loadImage(src, options = {}) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        if (options.crossOrigin !== undefined) {
+            img.crossOrigin = options.crossOrigin;
+        }
+        img.onload = () => resolve(img);
+        img.onerror = () => reject(new Error(`Failed to load image: ${src}`));
+        img.src = src;
+    });
+}
+/**
+ * Load and scale an image to fit within bounds
+ */
+export async function loadAndScaleImage(src, maxWidth, maxHeight, options = {}) {
+    const img = await loadImage(src, options);
+    let width = img.naturalWidth;
+    let height = img.naturalHeight;
+    // Scale down if needed
+    if (width > maxWidth || height > maxHeight) {
+        const widthRatio = maxWidth / width;
+        const heightRatio = maxHeight / height;
+        const scale = Math.min(widthRatio, heightRatio);
+        width = Math.floor(width * scale);
+        height = Math.floor(height * scale);
+    }
+    return { image: img, width, height };
+}
+/**
+ * Draw an image to a canvas and get its pixel data
+ */
+export function imageToPixelData(image, width, height) {
+    const w = width ?? (image instanceof HTMLImageElement ? image.naturalWidth : image.width);
+    const h = height ?? (image instanceof HTMLImageElement ? image.naturalHeight : image.height);
+    const canvas = document.createElement('canvas');
+    canvas.width = w;
+    canvas.height = h;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+        throw new Error('Failed to get 2D context');
+    }
+    ctx.drawImage(image, 0, 0, w, h);
+    return ctx.getImageData(0, 0, w, h);
+}
+/**
+ * Extract brightness values from image data
+ */
+export function extractBrightness(imageData, brightnessFunction = (r, g, b) => 0.21 * r + 0.72 * g + 0.07 * b) {
+    const { data, width, height } = imageData;
+    const brightness = new Array(width * height);
+    for (let i = 0; i < data.length; i += 4) {
+        brightness[i / 4] = brightnessFunction(data[i], data[i + 1], data[i + 2]);
+    }
+    return brightness;
+}
+/**
+ * Sample image data at cell-based intervals
+ */
+export function sampleImageCells(imageData, cellWidth, cellHeight, brightnessFunction = (r, g, b) => 0.21 * r + 0.72 * g + 0.07 * b) {
+    const { data, width, height } = imageData;
+    const cols = Math.ceil(width / cellWidth);
+    const rows = Math.ceil(height / cellHeight);
+    const result = [];
+    for (let row = 0; row < rows; row++) {
+        result[row] = [];
+        for (let col = 0; col < cols; col++) {
+            const cellData = sampleCell(data, width, col * cellWidth, row * cellHeight, cellWidth, cellHeight);
+            const brightness = brightnessFunction(cellData.r, cellData.g, cellData.b);
+            result[row][col] = {
+                brightness,
+                color: `rgb(${Math.round(cellData.r)}, ${Math.round(cellData.g)}, ${Math.round(cellData.b)})`,
+            };
+        }
+    }
+    return result;
+}
+/**
+ * Sample average color from a cell region
+ */
+function sampleCell(data, imageWidth, startX, startY, cellWidth, cellHeight) {
+    let totalR = 0;
+    let totalG = 0;
+    let totalB = 0;
+    let totalA = 0;
+    let count = 0;
+    for (let y = startY; y < startY + cellHeight; y++) {
+        for (let x = startX; x < startX + cellWidth; x++) {
+            const px = (y * imageWidth + x) * 4;
+            if (px >= 0 && px + 3 < data.length) {
+                totalR += data[px];
+                totalG += data[px + 1];
+                totalB += data[px + 2];
+                totalA += data[px + 3];
+                count++;
+            }
+        }
+    }
+    if (count === 0) {
+        return { r: 0, g: 0, b: 0, a: 0 };
+    }
+    return {
+        r: totalR / count,
+        g: totalG / count,
+        b: totalB / count,
+        a: totalA / count,
+    };
+}
+/**
+ * Convert RGB to hex color string
+ */
+export function rgbToHex(r, g, b) {
+    const toHex = (n) => Math.max(0, Math.min(255, Math.round(n)))
+        .toString(16)
+        .padStart(2, '0');
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+/**
+ * Convert hex color to RGB
+ */
+export function hexToRgb(hex) {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result
+        ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16),
+        }
+        : null;
+}
+/**
+ * Adjust image brightness
+ */
+export function adjustBrightness(imageData, amount) {
+    const { data, width, height } = imageData;
+    const adjusted = new Uint8ClampedArray(data.length);
+    for (let i = 0; i < data.length; i += 4) {
+        adjusted[i] = Math.min(255, Math.max(0, data[i] + amount));
+        adjusted[i + 1] = Math.min(255, Math.max(0, data[i + 1] + amount));
+        adjusted[i + 2] = Math.min(255, Math.max(0, data[i + 2] + amount));
+        adjusted[i + 3] = data[i + 3];
+    }
+    return new ImageData(adjusted, width, height);
+}
+/**
+ * Adjust image contrast
+ */
+export function adjustContrast(imageData, amount) {
+    const { data, width, height } = imageData;
+    const adjusted = new Uint8ClampedArray(data.length);
+    const factor = (259 * (amount + 255)) / (255 * (259 - amount));
+    for (let i = 0; i < data.length; i += 4) {
+        adjusted[i] = Math.min(255, Math.max(0, factor * (data[i] - 128) + 128));
+        adjusted[i + 1] = Math.min(255, Math.max(0, factor * (data[i + 1] - 128) + 128));
+        adjusted[i + 2] = Math.min(255, Math.max(0, factor * (data[i + 2] - 128) + 128));
+        adjusted[i + 3] = data[i + 3];
+    }
+    return new ImageData(adjusted, width, height);
+}
+/**
+ * Invert image colors
+ */
+export function invertColors(imageData) {
+    const { data, width, height } = imageData;
+    const inverted = new Uint8ClampedArray(data.length);
+    for (let i = 0; i < data.length; i += 4) {
+        inverted[i] = 255 - data[i];
+        inverted[i + 1] = 255 - data[i + 1];
+        inverted[i + 2] = 255 - data[i + 2];
+        inverted[i + 3] = data[i + 3];
+    }
+    return new ImageData(inverted, width, height);
+}
+/**
+ * Convert image to grayscale
+ */
+export function toGrayscale(imageData) {
+    const { data, width, height } = imageData;
+    const grayscale = new Uint8ClampedArray(data.length);
+    for (let i = 0; i < data.length; i += 4) {
+        const gray = 0.21 * data[i] + 0.72 * data[i + 1] + 0.07 * data[i + 2];
+        grayscale[i] = gray;
+        grayscale[i + 1] = gray;
+        grayscale[i + 2] = gray;
+        grayscale[i + 3] = data[i + 3];
+    }
+    return new ImageData(grayscale, width, height);
+}

package/dist/utils/performance.js

@@ -0,0 +1,205 @@
+/**
+ * Performance Utilities
+ *
+ * Visibility detection, resource management, and optimization helpers.
+ */
+/**
+ * Create an IntersectionObserver for visibility-based animation control
+ *
+ * @param element - Element to observe
+ * @param callback - Called when visibility changes
+ * @param threshold - Visibility threshold (0-1, default: 0.1)
+ * @returns Cleanup function to disconnect observer
+ */
+export function createVisibilityObserver(element, callback, threshold = 0.1) {
+    const observer = new IntersectionObserver((entries) => {
+        for (const entry of entries) {
+            callback(entry.isIntersecting, entry);
+        }
+    }, { threshold });
+    observer.observe(element);
+    return () => {
+        observer.disconnect();
+    };
+}
+/**
+ * Create a ResizeObserver for responsive canvas sizing
+ *
+ * @param element - Element to observe
+ * @param callback - Called on resize with new dimensions
+ * @param debounceMs - Debounce delay in ms (default: 100)
+ * @returns Cleanup function to disconnect observer
+ */
+export function createResizeObserver(element, callback, debounceMs = 100) {
+    let timeout = null;
+    const observer = new ResizeObserver((entries) => {
+        if (timeout) {
+            clearTimeout(timeout);
+        }
+        timeout = setTimeout(() => {
+            const entry = entries[0];
+            if (entry) {
+                const { width, height } = entry.contentRect;
+                callback(width, height, entry);
+            }
+        }, debounceMs);
+    });
+    observer.observe(element);
+    return () => {
+        if (timeout) {
+            clearTimeout(timeout);
+        }
+        observer.disconnect();
+    };
+}
+/**
+ * Check if the user prefers reduced motion
+ */
+export function prefersReducedMotion() {
+    if (typeof window === 'undefined')
+        return false;
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+/**
+ * Create a listener for reduced motion preference changes
+ *
+ * @param callback - Called when preference changes
+ * @returns Cleanup function to remove listener
+ */
+export function onReducedMotionChange(callback) {
+    if (typeof window === 'undefined') {
+        return () => { };
+    }
+    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+    const handler = (event) => {
+        callback(event.matches);
+    };
+    mediaQuery.addEventListener('change', handler);
+    // Call immediately with current value
+    callback(mediaQuery.matches);
+    return () => {
+        mediaQuery.removeEventListener('change', handler);
+    };
+}
+/**
+ * Check if the browser is in a low-power mode or has reduced capabilities
+ */
+export function isLowPowerMode() {
+    // Check for battery API (if available)
+    if (typeof navigator !== 'undefined' && 'getBattery' in navigator) {
+        // Battery API is async, so this is a simplified check
+        // Real implementation would need to be async
+        return false;
+    }
+    // Fallback: check for hardware concurrency
+    if (typeof navigator !== 'undefined' && navigator.hardwareConcurrency) {
+        return navigator.hardwareConcurrency <= 2;
+    }
+    return false;
+}
+/**
+ * Get recommended FPS based on device capabilities
+ */
+export function getRecommendedFPS() {
+    if (prefersReducedMotion()) {
+        return 0; // No animation
+    }
+    if (isLowPowerMode()) {
+        return 15; // Low power mode
+    }
+    // Default for capable devices
+    return 30;
+}
+/**
+ * Create a simple FPS counter
+ */
+export function createFPSCounter() {
+    const frameTimes = [];
+    const maxSamples = 60;
+    let droppedFrames = 0;
+    let lastFrameTime = performance.now();
+    function tick() {
+        const now = performance.now();
+        const delta = now - lastFrameTime;
+        lastFrameTime = now;
+        frameTimes.push(now);
+        if (frameTimes.length > maxSamples) {
+            frameTimes.shift();
+        }
+        // Count dropped frames (assuming 60fps target, frames taking >20ms are "dropped")
+        if (delta > 20) {
+            droppedFrames += Math.floor(delta / 16.67) - 1;
+        }
+    }
+    function getFPS() {
+        if (frameTimes.length < 2)
+            return 0;
+        const oldest = frameTimes[0];
+        const newest = frameTimes[frameTimes.length - 1];
+        const elapsed = newest - oldest;
+        if (elapsed === 0)
+            return 0;
+        return ((frameTimes.length - 1) / elapsed) * 1000;
+    }
+    function getMetrics() {
+        const fps = getFPS();
+        const frameTime = fps > 0 ? 1000 / fps : 0;
+        return {
+            fps: Math.round(fps * 10) / 10,
+            frameTime: Math.round(frameTime * 100) / 100,
+            droppedFrames,
+        };
+    }
+    function reset() {
+        frameTimes.length = 0;
+        droppedFrames = 0;
+        lastFrameTime = performance.now();
+    }
+    return { tick, getFPS, getMetrics, reset };
+}
+/**
+ * Request idle callback with fallback
+ */
+export function requestIdleCallback(callback, options) {
+    // Use globalThis for cross-environment compatibility
+    const global = globalThis;
+    if (typeof global.requestIdleCallback === 'function') {
+        return global.requestIdleCallback(callback, options);
+    }
+    // Fallback using setTimeout
+    return global.setTimeout(callback, options?.timeout ?? 1);
+}
+/**
+ * Cancel idle callback with fallback
+ */
+export function cancelIdleCallback(id) {
+    // Use globalThis for cross-environment compatibility
+    const global = globalThis;
+    if (typeof global.cancelIdleCallback === 'function') {
+        global.cancelIdleCallback(id);
+    }
+    else {
+        global.clearTimeout(id);
+    }
+}
+/**
+ * Check if we're running in a browser environment
+ */
+export function isBrowser() {
+    return typeof window !== 'undefined' && typeof document !== 'undefined';
+}
+/**
+ * Check if Canvas is supported
+ */
+export function isCanvasSupported() {
+    if (!isBrowser())
+        return false;
+    const canvas = document.createElement('canvas');
+    return !!(canvas.getContext && canvas.getContext('2d'));
+}
+/**
+ * Check if OffscreenCanvas is supported
+ */
+export function isOffscreenCanvasSupported() {
+    return typeof OffscreenCanvas !== 'undefined';
+}