@autumnsgrove/gossamer 0.0.1 → 0.1.1

package/dist/svelte/presets.d.ts

@@ -0,0 +1,38 @@
+import { PresetConfig } from '../index';
+
+/**
+ * Grove-themed presets
+ * Organic, nature-inspired effects
+ */
+export declare const grovePresets: Record<string, PresetConfig>;
+/**
+ * Seasonal presets
+ * Effects themed around the four seasons
+ */
+export declare const seasonalPresets: Record<string, PresetConfig>;
+/**
+ * Ambient presets
+ * Subtle background textures
+ */
+export declare const ambientPresets: Record<string, PresetConfig>;
+/**
+ * All presets combined for easy access
+ */
+export declare const PRESETS: Record<string, PresetConfig>;
+/**
+ * Get a preset by name
+ */
+export declare function getPreset(name: string): PresetConfig | undefined;
+/**
+ * List all available preset names
+ */
+export declare function getPresetNames(): string[];
+/**
+ * List preset names by category
+ */
+export declare function getPresetsByCategory(): {
+    grove: string[];
+    seasonal: string[];
+    ambient: string[];
+};
+//# sourceMappingURL=presets.d.ts.map

package/dist/svelte/presets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"presets.d.ts","sourceRoot":"","sources":["../../src/svelte/presets.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAyCrD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAyCxD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CA+BvD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAIhD,CAAC;AAEF;;GAEG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,YAAY,GAAG,SAAS,CAEhE;AAED;;GAEG;AACH,wBAAgB,cAAc,IAAI,MAAM,EAAE,CAEzC;AAED;;GAEG;AACH,wBAAgB,oBAAoB,IAAI;IACtC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB,CAMA"}

package/dist/utils/canvas.d.ts

@@ -0,0 +1,73 @@
+/**
+ * Canvas Utilities
+ *
+ * Helper functions for canvas creation, setup, and manipulation.
+ */
+/**
+ * Options for canvas creation
+ */
+export interface CanvasOptions {
+    /** Canvas width in pixels */
+    width?: number;
+    /** Canvas height in pixels */
+    height?: number;
+    /** Whether to use high DPI scaling */
+    highDPI?: boolean;
+    /** CSS class to add to canvas */
+    className?: string;
+    /** Inline styles to apply */
+    style?: Partial<CSSStyleDeclaration>;
+}
+/**
+ * Create a canvas element with optimal settings
+ */
+export declare function createCanvas(options?: CanvasOptions): HTMLCanvasElement;
+/**
+ * Get the device pixel ratio
+ */
+export declare function getDevicePixelRatio(): number;
+/**
+ * Resize canvas to match container dimensions
+ */
+export declare function resizeCanvasToContainer(canvas: HTMLCanvasElement, container: HTMLElement, highDPI?: boolean): {
+    width: number;
+    height: number;
+};
+/**
+ * Create an offscreen canvas for buffer rendering
+ */
+export declare function createOffscreenCanvas(width: number, height: number): HTMLCanvasElement | OffscreenCanvas;
+/**
+ * Clear a canvas
+ */
+export declare function clearCanvas(ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D, width: number, height: number, backgroundColor?: string): void;
+/**
+ * Get image data from a canvas region
+ */
+export declare function getImageData(ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D, x?: number, y?: number, width?: number, height?: number): ImageData;
+/**
+ * Set optimal rendering context settings
+ */
+export declare function optimizeContext(ctx: CanvasRenderingContext2D): void;
+/**
+ * Set text rendering options for ASCII display
+ */
+export declare function setupTextRendering(ctx: CanvasRenderingContext2D, fontSize: number, fontFamily?: string, color?: string): void;
+/**
+ * Measure text width for a given font configuration
+ */
+export declare function measureTextWidth(ctx: CanvasRenderingContext2D, text: string, fontSize: number, fontFamily?: string): number;
+/**
+ * Calculate optimal cell size for a given canvas and desired columns
+ */
+export declare function calculateCellSize(canvasWidth: number, canvasHeight: number, targetCols: number): {
+    cellWidth: number;
+    cellHeight: number;
+    cols: number;
+    rows: number;
+};
+/**
+ * Apply a CSS blend mode to canvas compositing
+ */
+export declare function setBlendMode(ctx: CanvasRenderingContext2D, mode: 'normal' | 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten' | 'color-dodge' | 'color-burn' | 'soft-light' | 'hard-light' | 'difference' | 'exclusion'): void;
+//# sourceMappingURL=canvas.d.ts.map

package/dist/utils/canvas.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas.d.ts","sourceRoot":"","sources":["../../src/utils/canvas.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;CACtC;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,OAAO,GAAE,aAAkB,GAAG,iBAAiB,CA8B3E;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,MAAM,CAE5C;AAED;;GAEG;AACH,wBAAgB,uBAAuB,CACrC,MAAM,EAAE,iBAAiB,EACzB,SAAS,EAAE,WAAW,EACtB,OAAO,GAAE,OAAc,GACtB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAoBnC;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,iBAAiB,GAAG,eAAe,CAUxG;AAED;;GAEG;AACH,wBAAgB,WAAW,CACzB,GAAG,EAAE,wBAAwB,GAAG,iCAAiC,EACjE,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,eAAe,CAAC,EAAE,MAAM,GACvB,IAAI,CAON;AAED;;GAEG;AACH,wBAAgB,YAAY,CAC1B,GAAG,EAAE,wBAAwB,GAAG,iCAAiC,EACjE,CAAC,GAAE,MAAU,EACb,CAAC,GAAE,MAAU,EACb,KAAK,CAAC,EAAE,MAAM,EACd,MAAM,CAAC,EAAE,MAAM,GACd,SAAS,CAMX;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,GAAG,EAAE,wBAAwB,GAAG,IAAI,CAMnE;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAChC,GAAG,EAAE,wBAAwB,EAC7B,QAAQ,EAAE,MAAM,EAChB,UAAU,GAAE,MAAoB,EAChC,KAAK,GAAE,MAAkB,GACxB,IAAI,CAKN;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAC9B,GAAG,EAAE,wBAAwB,EAC7B,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,EAChB,UAAU,GAAE,MAAoB,GAC/B,MAAM,CAMR;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,MAAM,EACpB,UAAU,EAAE,MAAM,GACjB;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAQvE;AAED;;GAEG;AACH,wBAAgB,YAAY,CAC1B,GAAG,EAAE,wBAAwB,EAC7B,IAAI,EAAE,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,aAAa,GAAG,YAAY,GAAG,YAAY,GAAG,YAAY,GAAG,YAAY,GAAG,WAAW,GAClK,IAAI,CAEN"}

package/dist/utils/image.d.ts

@@ -0,0 +1,74 @@
+/**
+ * Image Utilities
+ *
+ * Image loading, processing, and pixel manipulation for ASCII conversion.
+ */
+/**
+ * Image loading options
+ */
+export interface ImageLoadOptions {
+    /** Cross-origin setting for external images */
+    crossOrigin?: 'anonymous' | 'use-credentials' | '';
+    /** Maximum width to scale image to */
+    maxWidth?: number;
+    /** Maximum height to scale image to */
+    maxHeight?: number;
+    /** Whether to preserve aspect ratio when scaling */
+    preserveAspectRatio?: boolean;
+}
+/**
+ * Load an image from a URL
+ */
+export declare function loadImage(src: string, options?: ImageLoadOptions): Promise<HTMLImageElement>;
+/**
+ * Load and scale an image to fit within bounds
+ */
+export declare function loadAndScaleImage(src: string, maxWidth: number, maxHeight: number, options?: ImageLoadOptions): Promise<{
+    image: HTMLImageElement;
+    width: number;
+    height: number;
+}>;
+/**
+ * Draw an image to a canvas and get its pixel data
+ */
+export declare function imageToPixelData(image: HTMLImageElement | HTMLCanvasElement | ImageBitmap, width?: number, height?: number): ImageData;
+/**
+ * Extract brightness values from image data
+ */
+export declare function extractBrightness(imageData: ImageData, brightnessFunction?: (r: number, g: number, b: number) => number): number[];
+/**
+ * Sample image data at cell-based intervals
+ */
+export declare function sampleImageCells(imageData: ImageData, cellWidth: number, cellHeight: number, brightnessFunction?: (r: number, g: number, b: number) => number): {
+    brightness: number;
+    color: string;
+}[][];
+/**
+ * Convert RGB to hex color string
+ */
+export declare function rgbToHex(r: number, g: number, b: number): string;
+/**
+ * Convert hex color to RGB
+ */
+export declare function hexToRgb(hex: string): {
+    r: number;
+    g: number;
+    b: number;
+} | null;
+/**
+ * Adjust image brightness
+ */
+export declare function adjustBrightness(imageData: ImageData, amount: number): ImageData;
+/**
+ * Adjust image contrast
+ */
+export declare function adjustContrast(imageData: ImageData, amount: number): ImageData;
+/**
+ * Invert image colors
+ */
+export declare function invertColors(imageData: ImageData): ImageData;
+/**
+ * Convert image to grayscale
+ */
+export declare function toGrayscale(imageData: ImageData): ImageData;
+//# sourceMappingURL=image.d.ts.map

package/dist/utils/image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../src/utils/image.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,+CAA+C;IAC/C,WAAW,CAAC,EAAE,WAAW,GAAG,iBAAiB,GAAG,EAAE,CAAC;IACnD,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,GAAE,gBAAqB,GAAG,OAAO,CAAC,gBAAgB,CAAC,CAahG;AAED;;GAEG;AACH,wBAAsB,iBAAiB,CACrC,GAAG,EAAE,MAAM,EACX,QAAQ,EAAE,MAAM,EAChB,SAAS,EAAE,MAAM,EACjB,OAAO,GAAE,gBAAqB,GAC7B,OAAO,CAAC;IAAE,KAAK,EAAE,gBAAgB,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC,CAiBrE;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,gBAAgB,GAAG,iBAAiB,GAAG,WAAW,EACzD,KAAK,CAAC,EAAE,MAAM,EACd,MAAM,CAAC,EAAE,MAAM,GACd,SAAS,CAeX;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,SAAS,EAAE,SAAS,EACpB,kBAAkB,GAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,MAAoD,GAC5G,MAAM,EAAE,CASV;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAC9B,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,MAAM,EACjB,UAAU,EAAE,MAAM,EAClB,kBAAkB,GAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,MAAoD,GAC5G;IAAE,UAAU,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EAAE,EAAE,CAsB3C;AA6CD;;GAEG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAMhE;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAShF;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,GAAG,SAAS,CAYhF;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,GAAG,SAAS,CAa9E;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,SAAS,EAAE,SAAS,GAAG,SAAS,CAY5D;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,SAAS,EAAE,SAAS,GAAG,SAAS,CAa3D"}

package/dist/utils/performance.d.ts

@@ -0,0 +1,86 @@
+/**
+ * Performance Utilities
+ *
+ * Visibility detection, resource management, and optimization helpers.
+ */
+/**
+ * Visibility observer callback type
+ */
+export type VisibilityCallback = (isVisible: boolean, entry: IntersectionObserverEntry) => void;
+/**
+ * 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 declare function createVisibilityObserver(element: Element, callback: VisibilityCallback, threshold?: number): () => void;
+/**
+ * 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 declare function createResizeObserver(element: Element, callback: (width: number, height: number, entry: ResizeObserverEntry) => void, debounceMs?: number): () => void;
+/**
+ * Check if the user prefers reduced motion
+ */
+export declare function prefersReducedMotion(): boolean;
+/**
+ * Create a listener for reduced motion preference changes
+ *
+ * @param callback - Called when preference changes
+ * @returns Cleanup function to remove listener
+ */
+export declare function onReducedMotionChange(callback: (prefersReduced: boolean) => void): () => void;
+/**
+ * Check if the browser is in a low-power mode or has reduced capabilities
+ */
+export declare function isLowPowerMode(): boolean;
+/**
+ * Get recommended FPS based on device capabilities
+ */
+export declare function getRecommendedFPS(): number;
+/**
+ * Performance monitoring for debugging
+ */
+export interface PerformanceMetrics {
+    fps: number;
+    frameTime: number;
+    droppedFrames: number;
+}
+/**
+ * Create a simple FPS counter
+ */
+export declare function createFPSCounter(): {
+    tick: () => void;
+    getFPS: () => number;
+    getMetrics: () => PerformanceMetrics;
+    reset: () => void;
+};
+/**
+ * Request idle callback with fallback
+ */
+export declare function requestIdleCallback(callback: () => void, options?: {
+    timeout?: number;
+}): number;
+/**
+ * Cancel idle callback with fallback
+ */
+export declare function cancelIdleCallback(id: number): void;
+/**
+ * Check if we're running in a browser environment
+ */
+export declare function isBrowser(): boolean;
+/**
+ * Check if Canvas is supported
+ */
+export declare function isCanvasSupported(): boolean;
+/**
+ * Check if OffscreenCanvas is supported
+ */
+export declare function isOffscreenCanvasSupported(): boolean;
+//# sourceMappingURL=performance.d.ts.map

package/dist/utils/performance.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"performance.d.ts","sourceRoot":"","sources":["../../src/utils/performance.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,yBAAyB,KAAK,IAAI,CAAC;AAEhG;;;;;;;GAOG;AACH,wBAAgB,wBAAwB,CACtC,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,kBAAkB,EAC5B,SAAS,GAAE,MAAY,GACtB,MAAM,IAAI,CAeZ;AAED;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,mBAAmB,KAAK,IAAI,EAC7E,UAAU,GAAE,MAAY,GACvB,MAAM,IAAI,CAyBZ;AAED;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,OAAO,CAG9C;AAED;;;;;GAKG;AACH,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,CAAC,cAAc,EAAE,OAAO,KAAK,IAAI,GAAG,MAAM,IAAI,CAmB7F;AAED;;GAEG;AACH,wBAAgB,cAAc,IAAI,OAAO,CAcxC;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,MAAM,CAW1C;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;CACvB;AAED;;GAEG;AACH,wBAAgB,gBAAgB,IAAI;IAClC,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,MAAM,EAAE,MAAM,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,kBAAkB,CAAC;IACrC,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB,CAqDA;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,MAAM,IAAI,EACpB,OAAO,CAAC,EAAE;IAAE,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,GAC7B,MAAM,CAaR;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAYnD;AAED;;GAEG;AACH,wBAAgB,SAAS,IAAI,OAAO,CAEnC;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,OAAO,CAK3C;AAED;;GAEG;AACH,wBAAgB,0BAA0B,IAAI,OAAO,CAEpD"}

package/package.json

@@ -1,16 +1,24 @@
 {
   "name": "@autumnsgrove/gossamer",
-  "version": "0.0.1",
+  "version": "0.1.1",
   "description": "ASCII visual effects library - Threads of light for your web applications",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "svelte": "./dist/svelte/index.js",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
-    }
+    },
+    "./svelte": {
+      "types": "./dist/svelte/index.d.ts",
+      "svelte": "./dist/svelte/index.js",
+      "import": "./dist/svelte/index.js"
+    },
+    "./svelte/style.css": "./dist/style.css",
+    "./style.css": "./dist/style.css"
   },
   "files": [
     "dist",
@@ -18,11 +26,15 @@
   ],
   "scripts": {
     "dev": "vite build --watch",
-    "build": "tsc && vite build",
+    "build": "vite build",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
-    "clean": "rm -rf dist"
+    "clean": "rm -rf dist",
+    "prepublishOnly": "pnpm run clean && pnpm run build",
+    "export-gif": "tsx scripts/export-gif.ts",
+    "export-gif:all": "tsx scripts/export-gif.ts --all",
+    "export-gif:random": "tsx scripts/export-gif.ts --random"
   },
   "keywords": [
     "ascii",
@@ -34,7 +46,9 @@
     "text-art",
     "ambient",
     "texture",
-    "pattern"
+    "pattern",
+    "svelte",
+    "svelte-5"
   ],
   "author": "AutumnsGrove",
   "license": "MIT",
@@ -44,11 +58,24 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/AutumnsGrove/Gossamer.git",
-    "directory": "packages/core"
+    "url": "https://github.com/AutumnsGrove/Gossamer.git"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "svelte": {
+      "optional": true
+    }
   },
   "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "@types/node": "^20.10.0",
+    "canvas": "^3.2.1",
+    "gif-encoder-2": "^1.0.5",
+    "jsdom": "^27.4.0",
+    "svelte": "^5.0.0",
+    "tsx": "^4.21.0",
     "typescript": "^5.3.0",
     "vite": "^5.0.0",
     "vite-plugin-dts": "^3.7.0",

package/src/animation.test.ts

@@ -0,0 +1,254 @@
+/**
+ * Tests for animation utilities
+ */
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { throttle, debounce, calculateFPS, easings, createAnimationLoop } from './animation';
+
+describe('throttle', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('should call function immediately on first call', () => {
+    const fn = vi.fn();
+    const throttled = throttle(fn, 100);
+
+    throttled();
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it('should throttle subsequent calls within limit', () => {
+    const fn = vi.fn();
+    const throttled = throttle(fn, 100);
+
+    throttled();
+    throttled();
+    throttled();
+
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it('should call function again after limit expires', () => {
+    const fn = vi.fn();
+    const throttled = throttle(fn, 100);
+
+    throttled();
+    expect(fn).toHaveBeenCalledTimes(1);
+
+    vi.advanceTimersByTime(150);
+    throttled();
+    expect(fn).toHaveBeenCalledTimes(2);
+  });
+
+  it('should pass arguments to throttled function', () => {
+    const fn = vi.fn();
+    const throttled = throttle(fn, 100);
+
+    throttled('arg1', 'arg2');
+    expect(fn).toHaveBeenCalledWith('arg1', 'arg2');
+  });
+});
+
+describe('debounce', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('should not call function immediately', () => {
+    const fn = vi.fn();
+    const debounced = debounce(fn, 100);
+
+    debounced();
+    expect(fn).not.toHaveBeenCalled();
+  });
+
+  it('should call function after delay', () => {
+    const fn = vi.fn();
+    const debounced = debounce(fn, 100);
+
+    debounced();
+    vi.advanceTimersByTime(100);
+
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it('should reset timer on subsequent calls', () => {
+    const fn = vi.fn();
+    const debounced = debounce(fn, 100);
+
+    debounced();
+    vi.advanceTimersByTime(50);
+    debounced();
+    vi.advanceTimersByTime(50);
+
+    expect(fn).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(50);
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it('should pass arguments to debounced function', () => {
+    const fn = vi.fn();
+    const debounced = debounce(fn, 100);
+
+    debounced('test', 123);
+    vi.advanceTimersByTime(100);
+
+    expect(fn).toHaveBeenCalledWith('test', 123);
+  });
+});
+
+describe('calculateFPS', () => {
+  it('should return 0 for empty array', () => {
+    expect(calculateFPS([])).toBe(0);
+  });
+
+  it('should return 0 for single frame time', () => {
+    expect(calculateFPS([1000])).toBe(0);
+  });
+
+  it('should calculate FPS correctly', () => {
+    // 60 frames over 1 second = 60 FPS
+    const frameTimes = Array.from({ length: 61 }, (_, i) => i * (1000 / 60));
+    const fps = calculateFPS(frameTimes);
+
+    expect(fps).toBeCloseTo(60, 0);
+  });
+
+  it('should handle 30 FPS', () => {
+    // 30 frames over 1 second = 30 FPS
+    const frameTimes = Array.from({ length: 31 }, (_, i) => i * (1000 / 30));
+    const fps = calculateFPS(frameTimes);
+
+    expect(fps).toBeCloseTo(30, 0);
+  });
+
+  it('should use sample size parameter', () => {
+    // Create 100 frame times
+    const frameTimes = Array.from({ length: 100 }, (_, i) => i * 16.67);
+
+    // Should only use last 10 samples
+    const fps = calculateFPS(frameTimes, 10);
+    expect(fps).toBeCloseTo(60, 0);
+  });
+});
+
+describe('easings', () => {
+  describe('linear', () => {
+    it('should return input unchanged', () => {
+      expect(easings.linear(0)).toBe(0);
+      expect(easings.linear(0.5)).toBe(0.5);
+      expect(easings.linear(1)).toBe(1);
+    });
+  });
+
+  describe('easeIn', () => {
+    it('should start slow', () => {
+      expect(easings.easeIn(0)).toBe(0);
+      expect(easings.easeIn(0.5)).toBe(0.25);
+      expect(easings.easeIn(1)).toBe(1);
+    });
+  });
+
+  describe('easeOut', () => {
+    it('should end slow', () => {
+      expect(easings.easeOut(0)).toBe(0);
+      expect(easings.easeOut(0.5)).toBe(0.75);
+      expect(easings.easeOut(1)).toBe(1);
+    });
+  });
+
+  describe('easeInOut', () => {
+    it('should start and end slow', () => {
+      expect(easings.easeInOut(0)).toBe(0);
+      expect(easings.easeInOut(0.5)).toBe(0.5);
+      expect(easings.easeInOut(1)).toBe(1);
+    });
+
+    it('should be symmetric around 0.5', () => {
+      const val1 = easings.easeInOut(0.25);
+      const val2 = 1 - easings.easeInOut(0.75);
+      expect(val1).toBeCloseTo(val2, 5);
+    });
+  });
+
+  describe('sineIn', () => {
+    it('should return 0 at start and 1 at end', () => {
+      expect(easings.sineIn(0)).toBe(0);
+      expect(easings.sineIn(1)).toBeCloseTo(1, 5);
+    });
+  });
+
+  describe('sineOut', () => {
+    it('should return 0 at start and 1 at end', () => {
+      expect(easings.sineOut(0)).toBe(0);
+      expect(easings.sineOut(1)).toBeCloseTo(1, 5);
+    });
+  });
+
+  describe('sineInOut', () => {
+    it('should return 0 at start, 0.5 at middle, 1 at end', () => {
+      expect(easings.sineInOut(0)).toBeCloseTo(0, 5);
+      expect(easings.sineInOut(0.5)).toBeCloseTo(0.5, 5);
+      expect(easings.sineInOut(1)).toBeCloseTo(1, 5);
+    });
+  });
+
+  describe('bounceOut', () => {
+    it('should return 0 at start and 1 at end', () => {
+      expect(easings.bounceOut(0)).toBe(0);
+      expect(easings.bounceOut(1)).toBeCloseTo(1, 5);
+    });
+
+    it('should overshoot intermediate values', () => {
+      // bounceOut creates bouncing effect with values close to 1
+      const val = easings.bounceOut(0.9);
+      expect(val).toBeGreaterThan(0.9);
+    });
+  });
+});
+
+describe('createAnimationLoop', () => {
+  it('should return control functions', () => {
+    const loop = createAnimationLoop({
+      onFrame: () => {},
+    });
+
+    expect(typeof loop.start).toBe('function');
+    expect(typeof loop.stop).toBe('function');
+    expect(typeof loop.pause).toBe('function');
+    expect(typeof loop.resume).toBe('function');
+    expect(typeof loop.getState).toBe('function');
+  });
+
+  it('should initialize with correct default state', () => {
+    const loop = createAnimationLoop({
+      fps: 60,
+      onFrame: () => {},
+    });
+
+    const state = loop.getState();
+    expect(state.isRunning).toBe(false);
+    expect(state.frameId).toBeNull();
+    expect(state.frameInterval).toBeCloseTo(1000 / 60, 1);
+    expect(state.elapsedTime).toBe(0);
+    expect(state.frameCount).toBe(0);
+  });
+
+  it('should use default FPS of 30', () => {
+    const loop = createAnimationLoop({
+      onFrame: () => {},
+    });
+
+    const state = loop.getState();
+    expect(state.frameInterval).toBeCloseTo(1000 / 30, 1);
+  });
+});