@getmicdrop/svelte-components 5.17.0 → 5.17.3

package/dist/utils/imageOptimizer.spec.js

@@ -0,0 +1,201 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { createImage, supportsWebP, optimizeImage } from './imageOptimizer';
+describe('imageOptimizer', () => {
+    describe('createImage', () => {
+        it('creates an HTMLImageElement', () => {
+            // In jsdom, Image load events don't fire for data URLs reliably,
+            // so we test the function creates the right structure
+            const promise = createImage('https://example.com/test.png');
+            // The promise is pending, but we can verify it returns a promise
+            expect(promise).toBeInstanceOf(Promise);
+        });
+        it('does not set crossOrigin for blob URLs', () => {
+            const blob = new Blob([''], { type: 'image/png' });
+            const blobUrl = URL.createObjectURL(blob);
+            // Verify the logic by manually checking: blob URLs should not get crossOrigin
+            expect(blobUrl.startsWith('blob:')).toBe(true);
+            URL.revokeObjectURL(blobUrl);
+        });
+    });
+    describe('supportsWebP', () => {
+        it('returns true when canvas supports webp', () => {
+            const toDataURL = vi.fn().mockReturnValue('data:image/webp;base64,abc');
+            vi.spyOn(document, 'createElement').mockReturnValue({
+                width: 0,
+                height: 0,
+                toDataURL,
+            });
+            expect(supportsWebP()).toBe(true);
+            expect(toDataURL).toHaveBeenCalledWith('image/webp');
+            vi.restoreAllMocks();
+        });
+        it('returns false when canvas does not support webp', () => {
+            const toDataURL = vi.fn().mockReturnValue('data:image/png;base64,abc');
+            vi.spyOn(document, 'createElement').mockReturnValue({
+                width: 0,
+                height: 0,
+                toDataURL,
+            });
+            expect(supportsWebP()).toBe(false);
+            vi.restoreAllMocks();
+        });
+    });
+    describe('optimizeImage', () => {
+        let mockCanvas;
+        let mockCtx;
+        let originalImage;
+        beforeEach(() => {
+            mockCtx = {
+                imageSmoothingEnabled: false,
+                imageSmoothingQuality: '',
+                drawImage: vi.fn(),
+            };
+            mockCanvas = {
+                width: 0,
+                height: 0,
+                getContext: vi.fn().mockReturnValue(mockCtx),
+                toBlob: vi.fn(),
+                toDataURL: vi.fn().mockReturnValue('data:image/png;base64,abc'),
+            };
+            let callCount = 0;
+            vi.spyOn(document, 'createElement').mockImplementation((tag) => {
+                if (tag === 'canvas') {
+                    callCount++;
+                    // First canvas call is for optimizeImage, second is for supportsWebP
+                    if (callCount === 1) {
+                        return mockCanvas;
+                    }
+                    return {
+                        width: 0,
+                        height: 0,
+                        toDataURL: vi.fn().mockReturnValue('data:image/png;base64,abc'),
+                    };
+                }
+                return Object.getPrototypeOf(document).createElement.call(document, tag);
+            });
+            vi.spyOn(URL, 'createObjectURL').mockReturnValue('blob:test');
+            vi.spyOn(URL, 'revokeObjectURL').mockImplementation(() => { });
+            originalImage = globalThis.Image;
+        });
+        afterEach(() => {
+            vi.restoreAllMocks();
+            globalThis.Image = originalImage;
+        });
+        function mockImageConstructor(width, height, shouldFail = false) {
+            // @ts-expect-error mock constructor
+            globalThis.Image = class MockImage {
+                constructor() {
+                    this.width = width;
+                    this.height = height;
+                    this.crossOrigin = '';
+                    this.src = '';
+                    this.listeners = {};
+                }
+                addEventListener(event, handler) {
+                    if (!this.listeners[event])
+                        this.listeners[event] = [];
+                    this.listeners[event].push(handler);
+                    if (event === 'load' && !shouldFail) {
+                        setTimeout(() => handler(), 0);
+                    }
+                    if (event === 'error' && shouldFail) {
+                        setTimeout(() => handler(new Error('load failed')), 0);
+                    }
+                }
+                setAttribute(name, value) {
+                    if (name === 'crossOrigin')
+                        this.crossOrigin = value;
+                }
+            };
+        }
+        it('optimizes a landscape image with default options', async () => {
+            mockImageConstructor(2000, 1000);
+            mockCanvas.toBlob.mockImplementation((cb) => {
+                cb(new Blob(['optimized'], { type: 'image/jpeg' }));
+            });
+            const file = new File(['test'], 'photo.jpg', { type: 'image/jpeg' });
+            const result = await optimizeImage(file);
+            expect(result).toBeInstanceOf(File);
+            expect(result.name).toMatch(/photo\.(jpg|webp)$/);
+            expect(URL.revokeObjectURL).toHaveBeenCalledWith('blob:test');
+            expect(mockCanvas.width).toBe(1000);
+            expect(mockCanvas.height).toBe(500);
+        });
+        it('optimizes a portrait image', async () => {
+            mockImageConstructor(500, 2000);
+            mockCanvas.toBlob.mockImplementation((cb) => {
+                cb(new Blob(['optimized'], { type: 'image/jpeg' }));
+            });
+            const file = new File(['test'], 'photo.png', { type: 'image/png' });
+            const result = await optimizeImage(file);
+            expect(result).toBeInstanceOf(File);
+            expect(mockCanvas.height).toBe(1000);
+            expect(mockCanvas.width).toBe(250);
+        });
+        it('does not upscale small images', async () => {
+            mockImageConstructor(200, 150);
+            mockCanvas.toBlob.mockImplementation((cb) => {
+                cb(new Blob(['optimized'], { type: 'image/jpeg' }));
+            });
+            const file = new File(['test'], 'small.jpg', { type: 'image/jpeg' });
+            await optimizeImage(file);
+            expect(mockCanvas.width).toBe(200);
+            expect(mockCanvas.height).toBe(150);
+        });
+        it('handles forceSquare option', async () => {
+            mockImageConstructor(800, 600);
+            mockCanvas.toBlob.mockImplementation((cb) => {
+                cb(new Blob(['optimized'], { type: 'image/jpeg' }));
+            });
+            const file = new File(['test'], 'photo.jpg', { type: 'image/jpeg' });
+            await optimizeImage(file, { forceSquare: true, maxSize: 500 });
+            expect(mockCanvas.width).toBe(500);
+            expect(mockCanvas.height).toBe(500);
+            expect(mockCtx.drawImage).toHaveBeenCalledWith(expect.anything(), 100, 0, 600, 600, 0, 0, 500, 500);
+        });
+        it('uses custom quality when provided', async () => {
+            mockImageConstructor(2000, 1000);
+            mockCanvas.toBlob.mockImplementation((cb) => {
+                cb(new Blob(['optimized'], { type: 'image/jpeg' }));
+            });
+            const file = new File(['test'], 'photo.jpg', { type: 'image/jpeg' });
+            await optimizeImage(file, { quality: 0.5 });
+            expect(mockCanvas.toBlob).toHaveBeenCalledWith(expect.any(Function), expect.any(String), 0.5);
+        });
+        it('uses custom maxSize', async () => {
+            mockImageConstructor(2000, 1000);
+            mockCanvas.toBlob.mockImplementation((cb) => {
+                cb(new Blob(['optimized'], { type: 'image/jpeg' }));
+            });
+            const file = new File(['test'], 'photo.jpg', { type: 'image/jpeg' });
+            await optimizeImage(file, { maxSize: 500 });
+            expect(mockCanvas.width).toBe(500);
+            expect(mockCanvas.height).toBe(250);
+        });
+        it('revokes blob URL even on error', async () => {
+            mockImageConstructor(0, 0, true);
+            const file = new File(['test'], 'bad.jpg', { type: 'image/jpeg' });
+            await expect(optimizeImage(file)).rejects.toBeDefined();
+            expect(URL.revokeObjectURL).toHaveBeenCalledWith('blob:test');
+        });
+        it('replaces file extension in output filename', async () => {
+            mockImageConstructor(200, 100);
+            mockCanvas.toBlob.mockImplementation((cb) => {
+                cb(new Blob(['optimized'], { type: 'image/jpeg' }));
+            });
+            const file = new File(['test'], 'my-photo.png', { type: 'image/png' });
+            const result = await optimizeImage(file);
+            expect(result.name).toMatch(/my-photo\.(jpg|webp)$/);
+        });
+        it('sets imageSmoothingEnabled and quality', async () => {
+            mockImageConstructor(200, 100);
+            mockCanvas.toBlob.mockImplementation((cb) => {
+                cb(new Blob(['optimized'], { type: 'image/jpeg' }));
+            });
+            const file = new File(['test'], 'photo.jpg', { type: 'image/jpeg' });
+            await optimizeImage(file);
+            expect(mockCtx.imageSmoothingEnabled).toBe(true);
+            expect(mockCtx.imageSmoothingQuality).toBe('high');
+        });
+    });
+});

package/dist/utils/imageValidation.js

@@ -1,121 +1,121 @@
-/**
- * Image validation utilities for file uploads
- *
- * Guidelines:
- * - Formats: PNG, JPG, JPEG, WebP, HEIC, HEIF
- * - Max dimension: 8000px (to handle phone screenshots up to 4K)
- * - Max file size: 20MB (we crop and optimize to 1000x1000 WebP anyway)
- * - Aspect ratio: Any
- */
-
-const MAX_FILE_SIZE = 20 * 1024 * 1024; // 20 MB - generous since we optimize
-const MAX_DIMENSION = 8000; // pixels - handles 4K+ phone screenshots
-const ALLOWED_IMAGE_TYPES = [
-  'image/jpeg',
-  'image/jpg',
-  'image/png',
-  'image/webp',
-  'image/heic',
-  'image/heif'
-];
-
-/**
- * Validates an image file according to upload guidelines
- * @param {File} file - The image file to validate
- * @returns {Promise<{valid: boolean, error: string|null, dimensions: {width: number, height: number}}>}
- */
-export async function validateImage(file) {
-  // Check file type
-  if (!ALLOWED_IMAGE_TYPES.includes(file.type.toLowerCase())) {
-    return {
-      valid: false,
-      error: 'Invalid file format. Please upload PNG, JPG, WebP, or HEIC images only.',
-      dimensions: null
-    };
-  }
-
-  // Check file size
-  if (file.size > MAX_FILE_SIZE) {
-    const sizeMB = (file.size / (1024 * 1024)).toFixed(2);
-    return {
-      valid: false,
-      error: `File too large (${sizeMB}MB). Maximum file size is 20MB.`,
-      dimensions: null
-    };
-  }
-
-  // Check dimensions
-  try {
-    const dimensions = await getImageDimensions(file);
-
-    if (dimensions.width > MAX_DIMENSION || dimensions.height > MAX_DIMENSION) {
-      return {
-        valid: false,
-        error: `Image dimensions too large (${dimensions.width}x${dimensions.height}px). Maximum dimension is ${MAX_DIMENSION}px.`,
-        dimensions
-      };
-    }
-
-    return {
-      valid: true,
-      error: null,
-      dimensions
-    };
-  } catch (_error) {
-    return {
-      valid: false,
-      error: 'Failed to read image dimensions. Please try another file.',
-      dimensions: null
-    };
-  }
-}
-
-/**
- * Gets the dimensions of an image file
- * @param {File} file - The image file
- * @returns {Promise<{width: number, height: number}>}
- */
-function getImageDimensions(file) {
-  return new Promise((resolve, reject) => {
-    const img = new Image();
-    const objectUrl = URL.createObjectURL(file);
-
-    img.onload = function() {
-      URL.revokeObjectURL(objectUrl);
-      resolve({
-        width: this.width,
-        height: this.height
-      });
-    };
-
-    img.onerror = function() {
-      URL.revokeObjectURL(objectUrl);
-      reject(new Error('Failed to load image'));
-    };
-
-    img.src = objectUrl;
-  });
-}
-
-/**
- * Gets the accept attribute value for file inputs
- * @returns {string}
- */
-export function getImageAcceptAttribute() {
-  return 'image/png,image/jpeg,image/jpg,image/webp,image/heic,image/heif';
-}
-
-/**
- * Gets formatted error messages for display in UI
- * @returns {object}
- */
-export function getValidationMessages() {
-  return {
-    formats: 'PNG, JPG, WebP, HEIC',
-    maxSize: '20MB',
-    maxDimension: '8000px',
-    aspectRatio: 'Any'
-  };
-}
-
-export { MAX_FILE_SIZE, MAX_DIMENSION, ALLOWED_IMAGE_TYPES };
+/**
+ * Image validation utilities for file uploads
+ *
+ * Guidelines:
+ * - Formats: PNG, JPG, JPEG, WebP, HEIC, HEIF
+ * - Max dimension: 8000px (to handle phone screenshots up to 4K)
+ * - Max file size: 20MB (we crop and optimize to 1000x1000 WebP anyway)
+ * - Aspect ratio: Any
+ */
+
+const MAX_FILE_SIZE = 20 * 1024 * 1024; // 20 MB - generous since we optimize
+const MAX_DIMENSION = 8000; // pixels - handles 4K+ phone screenshots
+const ALLOWED_IMAGE_TYPES = [
+  'image/jpeg',
+  'image/jpg',
+  'image/png',
+  'image/webp',
+  'image/heic',
+  'image/heif'
+];
+
+/**
+ * Validates an image file according to upload guidelines
+ * @param {File} file - The image file to validate
+ * @returns {Promise<{valid: boolean, error: string|null, dimensions: {width: number, height: number}}>}
+ */
+export async function validateImage(file) {
+  // Check file type
+  if (!ALLOWED_IMAGE_TYPES.includes(file.type.toLowerCase())) {
+    return {
+      valid: false,
+      error: 'Invalid file format. Please upload PNG, JPG, WebP, or HEIC images only.',
+      dimensions: null
+    };
+  }
+
+  // Check file size
+  if (file.size > MAX_FILE_SIZE) {
+    const sizeMB = (file.size / (1024 * 1024)).toFixed(2);
+    return {
+      valid: false,
+      error: `File too large (${sizeMB}MB). Maximum file size is 20MB.`,
+      dimensions: null
+    };
+  }
+
+  // Check dimensions
+  try {
+    const dimensions = await getImageDimensions(file);
+
+    if (dimensions.width > MAX_DIMENSION || dimensions.height > MAX_DIMENSION) {
+      return {
+        valid: false,
+        error: `Image dimensions too large (${dimensions.width}x${dimensions.height}px). Maximum dimension is ${MAX_DIMENSION}px.`,
+        dimensions
+      };
+    }
+
+    return {
+      valid: true,
+      error: null,
+      dimensions
+    };
+  } catch (_error) {
+    return {
+      valid: false,
+      error: 'Failed to read image dimensions. Please try another file.',
+      dimensions: null
+    };
+  }
+}
+
+/**
+ * Gets the dimensions of an image file
+ * @param {File} file - The image file
+ * @returns {Promise<{width: number, height: number}>}
+ */
+function getImageDimensions(file) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    const objectUrl = URL.createObjectURL(file);
+
+    img.onload = function() {
+      URL.revokeObjectURL(objectUrl);
+      resolve({
+        width: this.width,
+        height: this.height
+      });
+    };
+
+    img.onerror = function() {
+      URL.revokeObjectURL(objectUrl);
+      reject(new Error('Failed to load image'));
+    };
+
+    img.src = objectUrl;
+  });
+}
+
+/**
+ * Gets the accept attribute value for file inputs
+ * @returns {string}
+ */
+export function getImageAcceptAttribute() {
+  return 'image/png,image/jpeg,image/jpg,image/webp,image/heic,image/heif';
+}
+
+/**
+ * Gets formatted error messages for display in UI
+ * @returns {object}
+ */
+export function getValidationMessages() {
+  return {
+    formats: 'PNG, JPG, WebP, HEIC',
+    maxSize: '20MB',
+    maxDimension: '8000px',
+    aspectRatio: 'Any'
+  };
+}
+
+export { MAX_FILE_SIZE, MAX_DIMENSION, ALLOWED_IMAGE_TYPES };

package/dist/utils/logger.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=logger.spec.d.ts.map

package/dist/utils/logger.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"logger.spec.d.ts","sourceRoot":"","sources":["../../src/lib/utils/logger.spec.ts"],"names":[],"mappings":""}

package/dist/utils/logger.spec.js

@@ -0,0 +1,95 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { logger, configureLogger } from './logger';
+describe('logger', () => {
+    beforeEach(() => {
+        vi.spyOn(console, 'log').mockImplementation(() => { });
+        vi.spyOn(console, 'info').mockImplementation(() => { });
+        vi.spyOn(console, 'warn').mockImplementation(() => { });
+        vi.spyOn(console, 'error').mockImplementation(() => { });
+        // Reset to default enabled state
+        configureLogger({ enabled: true, level: 'debug', prefix: '[MicDrop]' });
+    });
+    afterEach(() => {
+        vi.restoreAllMocks();
+    });
+    describe('log methods', () => {
+        it('debug logs with console.log', () => {
+            logger.debug('test message');
+            expect(console.log).toHaveBeenCalledWith('[MicDrop] [DEBUG] test message');
+        });
+        it('info logs with console.info', () => {
+            logger.info('test message');
+            expect(console.info).toHaveBeenCalledWith('[MicDrop] [INFO] test message');
+        });
+        it('warn logs with console.warn', () => {
+            logger.warn('test message');
+            expect(console.warn).toHaveBeenCalledWith('[MicDrop] [WARN] test message');
+        });
+        it('error logs with console.error', () => {
+            logger.error('test message');
+            expect(console.error).toHaveBeenCalledWith('[MicDrop] [ERROR] test message');
+        });
+        it('passes extra arguments through', () => {
+            const data = { foo: 'bar' };
+            logger.debug('message', data);
+            expect(console.log).toHaveBeenCalledWith('[MicDrop] [DEBUG] message', data);
+        });
+        it('passes multiple extra arguments', () => {
+            logger.info('msg', 1, 'two', { three: 3 });
+            expect(console.info).toHaveBeenCalledWith('[MicDrop] [INFO] msg', 1, 'two', { three: 3 });
+        });
+    });
+    describe('configureLogger', () => {
+        it('can disable logging', () => {
+            configureLogger({ enabled: false });
+            logger.debug('should not appear');
+            logger.info('should not appear');
+            logger.warn('should not appear');
+            logger.error('should not appear');
+            expect(console.log).not.toHaveBeenCalled();
+            expect(console.info).not.toHaveBeenCalled();
+            expect(console.warn).not.toHaveBeenCalled();
+            expect(console.error).not.toHaveBeenCalled();
+        });
+        it('can change prefix', () => {
+            configureLogger({ prefix: '[Custom]' });
+            logger.debug('test');
+            expect(console.log).toHaveBeenCalledWith('[Custom] [DEBUG] test');
+        });
+        it('can set log level to filter lower levels', () => {
+            configureLogger({ level: 'warn' });
+            logger.debug('debug msg');
+            logger.info('info msg');
+            logger.warn('warn msg');
+            logger.error('error msg');
+            expect(console.log).not.toHaveBeenCalled();
+            expect(console.info).not.toHaveBeenCalled();
+            expect(console.warn).toHaveBeenCalledTimes(1);
+            expect(console.error).toHaveBeenCalledTimes(1);
+        });
+        it('level info filters out debug', () => {
+            configureLogger({ level: 'info' });
+            logger.debug('debug msg');
+            logger.info('info msg');
+            expect(console.log).not.toHaveBeenCalled();
+            expect(console.info).toHaveBeenCalledTimes(1);
+        });
+        it('level error filters out everything except error', () => {
+            configureLogger({ level: 'error' });
+            logger.debug('d');
+            logger.info('i');
+            logger.warn('w');
+            logger.error('e');
+            expect(console.log).not.toHaveBeenCalled();
+            expect(console.info).not.toHaveBeenCalled();
+            expect(console.warn).not.toHaveBeenCalled();
+            expect(console.error).toHaveBeenCalledTimes(1);
+        });
+        it('partial config merges with existing', () => {
+            configureLogger({ prefix: '[Test]' });
+            configureLogger({ level: 'warn' });
+            logger.warn('test');
+            expect(console.warn).toHaveBeenCalledWith('[Test] [WARN] test');
+        });
+    });
+});

package/dist/utils/transitions.js

@@ -40,10 +40,10 @@ export function bloom(_node, { duration = 200, delay = 0, origin = 'top right' }
         easing: cubicOut,
         css: (t) => {
             const scale = 0.95 + 0.05 * t;
-            return `
-        transform: scale(${scale});
-        transform-origin: ${origin};
-        opacity: ${t};
+            return `
+        transform: scale(${scale});
+        transform-origin: ${origin};
+        opacity: ${t};
       `;
         },
     };