@syntrologie/adapt-overlays 2.16.0 → 2.17.0

package/dist/celebrations/effects/__tests__/sparkles.test.js

@@ -1,79 +0,0 @@
-import { describe, expect, it, vi } from 'vitest';
-const defaultConfig = {
-    duration: 3000,
-    intensity: 'medium',
-    colors: ['#ffd700', '#ffffff', '#fffacd'],
-};
-describe('sparkles effect', () => {
-    describe('init', () => {
-        it('creates particles at random positions across the screen', async () => {
-            const { sparklesEffect } = await import('../sparkles');
-            const particles = sparklesEffect.init(800, 600, defaultConfig);
-            expect(particles.length).toBeGreaterThan(0);
-            // Particles should be spread across the viewport
-            const xs = particles.map((p) => p.x);
-            const minX = Math.min(...xs);
-            const maxX = Math.max(...xs);
-            expect(maxX - minX).toBeGreaterThan(100);
-        });
-        it('scales count with intensity', async () => {
-            const { sparklesEffect } = await import('../sparkles');
-            const light = sparklesEffect.init(800, 600, { ...defaultConfig, intensity: 'light' });
-            const heavy = sparklesEffect.init(800, 600, { ...defaultConfig, intensity: 'heavy' });
-            expect(heavy.length).toBeGreaterThan(light.length);
-        });
-        it('uses colors from config', async () => {
-            const { sparklesEffect } = await import('../sparkles');
-            const particles = sparklesEffect.init(800, 600, defaultConfig);
-            for (const p of particles) {
-                expect(defaultConfig.colors).toContain(p.color);
-            }
-        });
-    });
-    describe('update', () => {
-        it('moves particles upward (vy is negative)', async () => {
-            const { sparklesEffect } = await import('../sparkles');
-            const particles = sparklesEffect.init(800, 600, defaultConfig);
-            const initialY = particles[0].y;
-            sparklesEffect.update(particles, 16, 16);
-            expect(particles[0].y).toBeLessThan(initialY);
-        });
-        it('returns true while particles are visible', async () => {
-            const { sparklesEffect } = await import('../sparkles');
-            const particles = sparklesEffect.init(800, 600, defaultConfig);
-            expect(sparklesEffect.update(particles, 16, 16)).toBe(true);
-        });
-        it('returns false when all particles have faded', async () => {
-            const { sparklesEffect } = await import('../sparkles');
-            const particles = sparklesEffect.init(800, 600, defaultConfig);
-            for (const p of particles) {
-                p.opacity = 0;
-                if (p.data)
-                    p.data.baseOpacity = 0;
-            }
-            expect(sparklesEffect.update(particles, 16, 5000)).toBe(false);
-        });
-    });
-    describe('render', () => {
-        it('draws to canvas context', async () => {
-            const { sparklesEffect } = await import('../sparkles');
-            const particles = sparklesEffect.init(800, 600, defaultConfig);
-            const ctx = {
-                save: vi.fn(),
-                restore: vi.fn(),
-                translate: vi.fn(),
-                rotate: vi.fn(),
-                beginPath: vi.fn(),
-                moveTo: vi.fn(),
-                lineTo: vi.fn(),
-                closePath: vi.fn(),
-                fill: vi.fn(),
-                globalAlpha: 1,
-                fillStyle: '',
-            };
-            sparklesEffect.render(ctx, particles);
-            expect(ctx.save).toHaveBeenCalled();
-            expect(ctx.restore).toHaveBeenCalled();
-        });
-    });
-});

package/dist/celebrations/effects/confetti.js

@@ -1,80 +0,0 @@
-const INTENSITY_COUNTS = { light: 50, medium: 100, heavy: 200 };
-const DEFAULT_COLORS = [
-    '#ff0000',
-    '#00ff00',
-    '#0000ff',
-    '#ffff00',
-    '#ff00ff',
-    '#00ffff',
-    '#ff8800',
-    '#8800ff',
-];
-export const confettiEffect = {
-    init(width, height, config) {
-        const count = INTENSITY_COUNTS[config.intensity];
-        const colors = config.colors.length > 0 ? config.colors : DEFAULT_COLORS;
-        const particles = [];
-        for (let i = 0; i < count; i++) {
-            particles.push({
-                x: Math.random() * width,
-                y: Math.random() * -height * 0.3,
-                vx: (Math.random() - 0.5) * 4,
-                vy: Math.random() * 2 + 1,
-                rotation: Math.random() * Math.PI * 2,
-                rotationSpeed: (Math.random() - 0.5) * 0.2,
-                size: Math.random() * 6 + 4,
-                color: colors[Math.floor(Math.random() * colors.length)],
-                opacity: 1,
-                shape: Math.random() > 0.5 ? 'rect' : 'circle',
-            });
-        }
-        return particles;
-    },
-    update(particles, _dt, _elapsed) {
-        let anyVisible = false;
-        for (const p of particles) {
-            // Gravity
-            p.vy += 0.15;
-            // Air resistance
-            p.vx *= 0.99;
-            // Movement
-            p.x += p.vx;
-            p.y += p.vy;
-            // Rotation
-            p.rotation += p.rotationSpeed;
-            // Fade when past 80% of a typical viewport height (use a reasonable default)
-            if (p.y > 0 && p.opacity > 0) {
-                // Gradually fade based on how far the particle has traveled
-                if (p.y > 500) {
-                    p.opacity -= 0.02;
-                    if (p.opacity < 0)
-                        p.opacity = 0;
-                }
-            }
-            if (p.opacity > 0.01) {
-                anyVisible = true;
-            }
-        }
-        return anyVisible;
-    },
-    render(ctx, particles) {
-        for (const p of particles) {
-            if (p.opacity < 0.01)
-                continue;
-            ctx.save();
-            ctx.globalAlpha = p.opacity;
-            ctx.fillStyle = p.color;
-            ctx.translate(p.x, p.y);
-            ctx.rotate(p.rotation);
-            if (p.shape === 'circle') {
-                ctx.beginPath();
-                ctx.arc(0, 0, p.size / 2, 0, Math.PI * 2);
-                ctx.fill();
-            }
-            else {
-                ctx.fillRect(-p.size / 2, -p.size / 2, p.size, p.size * 0.6);
-            }
-            ctx.restore();
-        }
-    },
-};

package/dist/celebrations/effects/emoji-rain.js

@@ -1,73 +0,0 @@
-const INTENSITY_COUNTS = { light: 20, medium: 40, heavy: 80 };
-const DEFAULT_EMOJI = '🎉';
-export const emojiRainEffect = {
-    init(width, _height, config) {
-        const count = INTENSITY_COUNTS[config.intensity];
-        const emoji = typeof config.props?.emoji === 'string' ? config.props.emoji : DEFAULT_EMOJI;
-        const particles = [];
-        for (let i = 0; i < count; i++) {
-            particles.push({
-                x: Math.random() * width,
-                y: Math.random() * -200,
-                vx: 0,
-                vy: Math.random() * 1.5 + 1,
-                rotation: 0,
-                rotationSpeed: 0,
-                size: Math.random() * 12 + 16,
-                color: '#000000',
-                opacity: 1,
-                shape: 'emoji',
-                emoji,
-                data: {
-                    /** Phase offset for horizontal wobble */
-                    wobblePhase: Math.random() * Math.PI * 2,
-                    /** Amplitude of horizontal wobble */
-                    wobbleAmp: Math.random() * 1.5 + 0.5,
-                    /** Original x for wobble base */
-                    originX: 0,
-                },
-            });
-        }
-        // Store originX after x is set
-        for (const p of particles) {
-            if (p.data)
-                p.data.originX = p.x;
-        }
-        return particles;
-    },
-    update(particles, _dt, elapsed) {
-        let anyVisible = false;
-        for (const p of particles) {
-            // Fall downward
-            p.y += p.vy;
-            // Horizontal wobble via sine wave
-            const phase = p.data?.wobblePhase ?? 0;
-            const amp = p.data?.wobbleAmp ?? 1;
-            const originX = p.data?.originX ?? p.x;
-            p.x = originX + Math.sin(elapsed * 0.003 + phase) * amp * 20;
-            // Fade when past bottom of viewport
-            if (p.y > 600) {
-                p.opacity -= 0.02;
-                if (p.opacity < 0)
-                    p.opacity = 0;
-            }
-            if (p.opacity > 0.01) {
-                anyVisible = true;
-            }
-        }
-        return anyVisible;
-    },
-    render(ctx, particles) {
-        for (const p of particles) {
-            if (p.opacity < 0.01 || !p.emoji)
-                continue;
-            ctx.save();
-            ctx.globalAlpha = p.opacity;
-            ctx.font = `${p.size}px serif`;
-            ctx.textAlign = 'center';
-            ctx.textBaseline = 'middle';
-            ctx.fillText(p.emoji, p.x, p.y);
-            ctx.restore();
-        }
-    },
-};

package/dist/celebrations/effects/fireworks.js

@@ -1,69 +0,0 @@
-const PARTICLES_PER_BURST = { light: 20, medium: 40, heavy: 80 };
-const BURST_COUNTS = { light: 3, medium: 4, heavy: 5 };
-export const fireworksEffect = {
-    init(width, height, config) {
-        const perBurst = PARTICLES_PER_BURST[config.intensity];
-        const burstCount = BURST_COUNTS[config.intensity];
-        const colors = config.colors.length > 0 ? config.colors : ['#ff4444', '#44ff44', '#4444ff'];
-        const particles = [];
-        for (let b = 0; b < burstCount; b++) {
-            const cx = Math.random() * width * 0.8 + width * 0.1;
-            const cy = Math.random() * height * 0.6;
-            const burstColor = colors[Math.floor(Math.random() * colors.length)];
-            for (let i = 0; i < perBurst; i++) {
-                const angle = (Math.PI * 2 * i) / perBurst + (Math.random() - 0.5) * 0.3;
-                const speed = Math.random() * 3 + 2;
-                particles.push({
-                    x: cx,
-                    y: cy,
-                    vx: Math.cos(angle) * speed,
-                    vy: Math.sin(angle) * speed,
-                    rotation: 0,
-                    rotationSpeed: 0,
-                    size: Math.random() * 3 + 2,
-                    color: burstColor,
-                    opacity: 1,
-                    shape: 'circle',
-                    data: { centerX: cx, centerY: cy },
-                });
-            }
-        }
-        return particles;
-    },
-    update(particles, _dt, _elapsed) {
-        let anyVisible = false;
-        for (const p of particles) {
-            // Deceleration
-            p.vx *= 0.97;
-            p.vy *= 0.97;
-            // Slight gravity
-            p.vy += 0.03;
-            // Movement
-            p.x += p.vx;
-            p.y += p.vy;
-            // Fade over time
-            p.opacity -= 0.008;
-            if (p.opacity < 0)
-                p.opacity = 0;
-            if (p.opacity > 0.01) {
-                anyVisible = true;
-            }
-        }
-        return anyVisible;
-    },
-    render(ctx, particles) {
-        for (const p of particles) {
-            if (p.opacity < 0.01)
-                continue;
-            ctx.save();
-            ctx.globalAlpha = p.opacity;
-            ctx.fillStyle = p.color;
-            ctx.shadowBlur = 12;
-            ctx.shadowColor = p.color;
-            ctx.beginPath();
-            ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
-            ctx.fill();
-            ctx.restore();
-        }
-    },
-};

package/dist/celebrations/effects/sparkles.js

@@ -1,83 +0,0 @@
-const INTENSITY_COUNTS = { light: 30, medium: 60, heavy: 120 };
-export const sparklesEffect = {
-    init(width, height, config) {
-        const count = INTENSITY_COUNTS[config.intensity];
-        const colors = config.colors.length > 0 ? config.colors : ['#ffd700', '#ffffff', '#fffacd'];
-        const particles = [];
-        for (let i = 0; i < count; i++) {
-            particles.push({
-                x: Math.random() * width,
-                y: Math.random() * height,
-                vx: (Math.random() - 0.5) * 0.3,
-                vy: -(Math.random() * 0.5 + 0.2),
-                rotation: Math.random() * Math.PI * 2,
-                rotationSpeed: (Math.random() - 0.5) * 0.1,
-                size: Math.random() * 4 + 2,
-                color: colors[Math.floor(Math.random() * colors.length)],
-                opacity: Math.random() * 0.5 + 0.5,
-                shape: 'circle',
-                data: {
-                    /** Phase offset for sine-wave twinkle */
-                    phase: Math.random() * Math.PI * 2,
-                    /** Base opacity before twinkle modulation */
-                    baseOpacity: Math.random() * 0.5 + 0.5,
-                },
-            });
-        }
-        return particles;
-    },
-    update(particles, _dt, elapsed) {
-        let anyVisible = false;
-        for (const p of particles) {
-            // Gentle upward float
-            p.x += p.vx;
-            p.y += p.vy;
-            p.rotation += p.rotationSpeed;
-            // Gradually fade out over lifetime
-            if (p.data) {
-                p.data.baseOpacity = (p.data.baseOpacity ?? 1) - 0.001;
-                if (p.data.baseOpacity < 0)
-                    p.data.baseOpacity = 0;
-            }
-            // Twinkle — oscillate opacity with sine wave
-            const phase = p.data?.phase ?? 0;
-            const baseOpacity = p.data?.baseOpacity ?? 1;
-            if (baseOpacity <= 0.01) {
-                p.opacity = 0;
-            }
-            else {
-                const twinkle = Math.sin(elapsed * 0.005 + phase) * 0.4 + 0.6;
-                p.opacity = baseOpacity * twinkle;
-            }
-            if (p.opacity > 0.01) {
-                anyVisible = true;
-            }
-        }
-        return anyVisible;
-    },
-    render(ctx, particles) {
-        for (const p of particles) {
-            if (p.opacity < 0.01)
-                continue;
-            ctx.save();
-            ctx.globalAlpha = p.opacity;
-            ctx.fillStyle = p.color;
-            ctx.translate(p.x, p.y);
-            ctx.rotate(p.rotation);
-            // Draw a 4-point diamond/star shape
-            const s = p.size;
-            ctx.beginPath();
-            ctx.moveTo(0, -s);
-            ctx.lineTo(s * 0.3, -s * 0.3);
-            ctx.lineTo(s, 0);
-            ctx.lineTo(s * 0.3, s * 0.3);
-            ctx.lineTo(0, s);
-            ctx.lineTo(-s * 0.3, s * 0.3);
-            ctx.lineTo(-s, 0);
-            ctx.lineTo(-s * 0.3, -s * 0.3);
-            ctx.closePath();
-            ctx.fill();
-            ctx.restore();
-        }
-    },
-};

package/dist/celebrations/engine.js

@@ -1,93 +0,0 @@
-export class CelebrationEngine {
-    constructor() {
-        this.canvas = null;
-        this.ctx = null;
-        this.rafId = null;
-        this.particles = [];
-        this.startTime = 0;
-        this.lastFrame = 0;
-        this.duration = 0;
-        this.effect = null;
-        this.container = null;
-    }
-    start(container, effect, config) {
-        const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-        if (prefersReducedMotion) {
-            return;
-        }
-        this.container = container;
-        this.effect = effect;
-        this.duration = config.duration;
-        // Create fullscreen canvas
-        const canvas = document.createElement('canvas');
-        canvas.setAttribute('data-syntro-celebrate', '');
-        Object.assign(canvas.style, {
-            position: 'fixed',
-            inset: '0',
-            pointerEvents: 'none',
-            zIndex: '2147483646',
-        });
-        const dpr = window.devicePixelRatio || 1;
-        const width = window.innerWidth;
-        const height = window.innerHeight;
-        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) {
-            return;
-        }
-        ctx.scale(dpr, dpr);
-        this.canvas = canvas;
-        this.ctx = ctx;
-        container.appendChild(canvas);
-        // Initialize particles
-        this.particles = effect.init(width, height, config);
-        this.startTime = performance.now();
-        this.lastFrame = this.startTime;
-        // Start animation loop
-        this.tick = this.tick.bind(this);
-        this.rafId = requestAnimationFrame(this.tick);
-    }
-    stop() {
-        if (this.rafId !== null) {
-            cancelAnimationFrame(this.rafId);
-            this.rafId = null;
-        }
-        if (this.canvas && this.container) {
-            this.canvas.remove();
-            this.canvas = null;
-        }
-        this.ctx = null;
-        this.effect = null;
-        this.container = null;
-        this.particles = [];
-    }
-    tick(now) {
-        if (!this.ctx || !this.canvas || !this.effect)
-            return;
-        const elapsed = now - this.startTime;
-        const dt = now - this.lastFrame;
-        this.lastFrame = now;
-        // Auto-stop after duration
-        if (elapsed >= this.duration) {
-            this.stop();
-            return;
-        }
-        // Clear canvas
-        const width = this.canvas.width / (window.devicePixelRatio || 1);
-        const height = this.canvas.height / (window.devicePixelRatio || 1);
-        this.ctx.clearRect(0, 0, width, height);
-        // Update physics — stop if all particles are done
-        const alive = this.effect.update(this.particles, dt, elapsed);
-        if (!alive) {
-            this.stop();
-            return;
-        }
-        // Render
-        this.effect.render(this.ctx, this.particles);
-        // Next frame
-        this.rafId = requestAnimationFrame(this.tick);
-    }
-}

package/dist/celebrations/index.js

@@ -1,73 +0,0 @@
-import { confettiEffect } from './effects/confetti';
-import { emojiRainEffect } from './effects/emoji-rain';
-import { fireworksEffect } from './effects/fireworks';
-import { sparklesEffect } from './effects/sparkles';
-import { CelebrationEngine } from './engine';
-const FALLBACK_COLORS = [
-    '#ff0000',
-    '#00ff00',
-    '#0000ff',
-    '#ffff00',
-    '#ff00ff',
-    '#00ffff',
-    '#ff8800',
-    '#8800ff',
-];
-/**
- * Build a celebration palette from the theme's primary/hover colors.
- * Returns 6 color variants (solid, transparent, white accent) for visual variety.
- */
-function buildThemePalette(primary, hover) {
-    return [primary, hover, `${primary}cc`, `${hover}cc`, '#ffffff', `${primary}80`];
-}
-/**
- * Read --sc-color-primary and --sc-color-primary-hover from the overlay root.
- * Returns a theme palette if both are available, otherwise null.
- */
-function readThemeColors(overlayRoot) {
-    try {
-        const styles = getComputedStyle(overlayRoot);
-        const primary = styles.getPropertyValue('--sc-color-primary')?.trim();
-        const hover = styles.getPropertyValue('--sc-color-primary-hover')?.trim();
-        if (primary?.startsWith('#') && primary.length >= 7) {
-            return buildThemePalette(primary, hover || primary);
-        }
-    }
-    catch {
-        /* fallback */
-    }
-    return null;
-}
-const effectRegistry = new Map([
-    ['confetti', confettiEffect],
-    ['fireworks', fireworksEffect],
-    ['sparkles', sparklesEffect],
-    ['emoji-rain', emojiRainEffect],
-]);
-export const executeCelebrate = async (action, context) => {
-    const effect = effectRegistry.get(action.effect);
-    if (!effect) {
-        console.warn(`[adaptive-overlays] Unknown celebration effect: "${action.effect}". Available: ${[...effectRegistry.keys()].join(', ')}`);
-        return { cleanup: () => { } };
-    }
-    // Colors priority: action.colors > theme palette > hardcoded fallback
-    const colors = action.colors ?? readThemeColors(context.overlayRoot) ?? FALLBACK_COLORS;
-    const config = {
-        duration: action.duration ?? 3000,
-        intensity: action.intensity ?? 'medium',
-        colors,
-        props: action.props,
-    };
-    const engine = new CelebrationEngine();
-    engine.start(context.overlayRoot, effect, config);
-    context.publishEvent('action.applied', {
-        id: context.generateId(),
-        kind: 'overlays:celebrate',
-        effect: action.effect,
-    });
-    return {
-        cleanup: () => {
-            engine.stop();
-        },
-    };
-};

package/dist/celebrations/types.js

@@ -1 +0,0 @@
-export {};

package/dist/editor.d.ts

@@ -1,27 +0,0 @@
-/**
- * Adaptive Overlays - Editor Module (barrel)
- *
- * Re-exports from the split modules for backward compatibility.
- * - State/helpers: overlay-editor-state.ts
- * - UI component:  overlay-editor-ui.tsx
- */
-import { OverlaysEditor } from './overlay-editor-ui';
-export { OverlaysEditor };
-/**
- * Editor module configuration.
- */
-export declare const editor: {
-    panel: {
-        title: string;
-        icon: string;
-        description: string;
-    };
-    component: typeof OverlaysEditor;
-};
-export declare const editorPanel: {
-    title: string;
-    icon: string;
-    description: string;
-};
-export default OverlaysEditor;
-//# sourceMappingURL=editor.d.ts.map

package/dist/editor.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../src/editor.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B;;GAEG;AACH,eAAO,MAAM,MAAM;;;;;;;CAOlB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;CAAe,CAAC;AAExC,eAAe,cAAc,CAAC"}

package/dist/editor.js

@@ -1,22 +0,0 @@
-/**
- * Adaptive Overlays - Editor Module (barrel)
- *
- * Re-exports from the split modules for backward compatibility.
- * - State/helpers: overlay-editor-state.ts
- * - UI component:  overlay-editor-ui.tsx
- */
-import { OverlaysEditor } from './overlay-editor-ui';
-export { OverlaysEditor };
-/**
- * Editor module configuration.
- */
-export const editor = {
-    panel: {
-        title: 'Overlays',
-        icon: '\u{1f4ac}',
-        description: 'Tooltips, highlights, and visual overlays',
-    },
-    component: OverlaysEditor,
-};
-export const editorPanel = editor.panel;
-export default OverlaysEditor;