@ddwang/magnitude-core 0.3.1-ddwang.2 → 0.3.1-ddwang.21

package/dist/web/visualizer/index.js

@@ -1,47 +0,0 @@
-import { CursorVisual } from "./cursor";
-import { MouseEffectVisual } from "./mouseEffects";
-import { TypeEffectVisual } from "./typeEffects";
-export class ActionVisualizer {
-    options;
-    context;
-    page;
-    cursor;
-    mouseEffects;
-    typeEffects;
-    constructor(context, options) {
-        this.context = context;
-        this.options = {
-            showCursor: options.showCursor ?? true,
-            showHoverCircle: options.showHoverCircle ?? false,
-            showClickRipple: options.showClickRipple ?? true,
-            showDragLine: options.showDragLine ?? false,
-            showTypeEffects: options.showTypeEffects ?? true
-        };
-        this.cursor = new CursorVisual();
-        this.mouseEffects = new MouseEffectVisual(this.options);
-        this.typeEffects = new TypeEffectVisual();
-    }
-    async setup() {
-        // await this.mouseEffects.setContext(this.context);
-        // if (this.options.showTypeEffects) {
-        //     await this.typeEffects.setContext(this.context);
-        // }
-        //this.showAll();
-    }
-    async setActivePage(page) {
-        this.page = page;
-        await this.cursor.setActivePage(page);
-        await this.mouseEffects.setActivePage(page);
-        await this.typeEffects.setActivePage(page);
-    }
-    async moveVirtualCursor(x, y) {
-        // Takes like 300ms for smooth anim
-        await this.cursor.move(x, y);
-    }
-    async hideAll() {
-        await this.cursor.hide();
-    }
-    async showAll() {
-        await this.cursor.show();
-    }
-}

package/dist/web/visualizer/mouseEffects.d.ts

@@ -1,18 +0,0 @@
-import { Page } from "playwright";
-interface MouseEffectOptions {
-    baseOpacity?: number;
-    showHoverCircle?: boolean;
-    showClickRipple?: boolean;
-    showDragLine?: boolean;
-}
-export declare class MouseEffectVisual {
-    private baseOpacity;
-    private showHoverCircle;
-    private showClickRipple;
-    private showDragLine;
-    private page;
-    constructor(options?: MouseEffectOptions);
-    setActivePage(page: Page): Promise<void>;
-    setupOnPage(): Promise<void>;
-}
-export {};

package/dist/web/visualizer/mouseEffects.js

@@ -1,287 +0,0 @@
-import { retryOnErrorIsSuccess } from "@/common";
-export class MouseEffectVisual {
-    baseOpacity;
-    showHoverCircle;
-    showClickRipple;
-    showDragLine;
-    page;
-    constructor(options = {}) {
-        this.baseOpacity = options.baseOpacity ?? 0.5;
-        this.showHoverCircle = options.showHoverCircle ?? true;
-        this.showClickRipple = options.showClickRipple ?? true;
-        this.showDragLine = options.showDragLine ?? true;
-    }
-    async setActivePage(page) {
-        this.page = page;
-        page.on('load', async () => {
-            // Clear the initialized flag on navigation to ensure re-initialization
-            await page.evaluate(() => {
-                window.__mouseEffectsInitialized = false;
-            }).catch(() => { }); // Ignore errors
-            await retryOnErrorIsSuccess(this.setupOnPage.bind(this), { mode: 'retry_all', delayMs: 200, retryLimit: 10 });
-        });
-        await retryOnErrorIsSuccess(this.setupOnPage.bind(this), { mode: 'retry_all', delayMs: 200, retryLimit: 10 });
-    }
-    async setupOnPage() {
-        await this.page.evaluate((options) => {
-            if (window.__mouseEffectsInitialized) {
-                return;
-            }
-            window.__mouseEffectsInitialized = true;
-            // Create custom cursor element only if enabled
-            let cursor = null;
-            if (options.showHoverCircle) {
-                cursor = document.createElement('div');
-                cursor.id = 'custom-cursor';
-                cursor.style.cssText = `
-                    position: fixed;
-                    width: 20px;
-                    height: 20px;
-                    border: 2px solid rgba(0, 150, 255, ${options.opacity});
-                    border-radius: 50%;
-                    background: rgba(0, 150, 255, ${options.opacity * 0.5});
-                    pointer-events: none;
-                    z-index: 1000000050;
-                    transition: transform 0.1s ease-out;
-                `;
-                document.body.appendChild(cursor);
-            }
-            // Create drag line element only if enabled
-            let dragLine = null;
-            let line = null;
-            if (options.showDragLine) {
-                dragLine = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-                dragLine.id = 'drag-line';
-                dragLine.style.cssText = `
-                    position: fixed;
-                    top: 0;
-                    left: 0;
-                    width: 100vw;
-                    height: 100vh;
-                    pointer-events: none;
-                    z-index: 1000000030;
-                    overflow: visible;
-                `;
-                line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
-                line.setAttribute('stroke', '#0096ff');
-                line.setAttribute('stroke-width', '2');
-                line.setAttribute('stroke-dasharray', '5,5');
-                line.setAttribute('opacity', '0.8');
-                line.style.display = 'none';
-                dragLine.appendChild(line);
-                document.body.appendChild(dragLine);
-            }
-            let isMouseDown = false;
-            let dragStartX = 0;
-            let dragStartY = 0;
-            const activeRipples = new Set();
-            // Track mouse movement
-            document.addEventListener('mousemove', (e) => {
-                // Update cursor position - always center on mouse
-                if (cursor) {
-                    cursor.style.left = e.clientX - 10 + 'px';
-                    cursor.style.top = e.clientY - 10 + 'px';
-                }
-                // Update drag line if dragging
-                if (isMouseDown && line) {
-                    line.setAttribute('x1', dragStartX.toString());
-                    line.setAttribute('y1', dragStartY.toString());
-                    line.setAttribute('x2', e.clientX.toString());
-                    line.setAttribute('y2', e.clientY.toString());
-                    line.style.display = 'block';
-                }
-            });
-            // Mouse down - start drag and shrink cursor
-            document.addEventListener('mousedown', (e) => {
-                isMouseDown = true;
-                dragStartX = e.clientX;
-                dragStartY = e.clientY;
-                // Use transform scale instead of changing width/height
-                if (cursor) {
-                    cursor.style.transform = 'scale(0.5)';
-                    cursor.style.background = `rgba(0, 150, 255, ${options.opacity * 1.5})`;
-                    cursor.style.border = `2px solid rgba(0, 150, 255, ${options.opacity * 2})`;
-                }
-            });
-            // Mouse up - end drag and restore cursor
-            document.addEventListener('mouseup', (e) => {
-                isMouseDown = false;
-                // Hide drag line
-                if (line) {
-                    line.style.display = 'none';
-                }
-                // Restore cursor
-                if (cursor) {
-                    cursor.style.transform = 'scale(1)';
-                    cursor.style.background = `rgba(0, 150, 255, ${options.opacity * 0.5})`;
-                    cursor.style.border = `2px solid rgba(0, 150, 255, ${options.opacity})`;
-                }
-            });
-            // Visualize clicks
-            document.addEventListener('click', (e) => {
-                if (options.showClickRipple) {
-                    // Add ripple animation styles once
-                    if (!document.querySelector('style[data-cursor-effects]')) {
-                        const style = document.createElement('style');
-                        style.setAttribute('data-cursor-effects', 'true');
-                        style.textContent = `
-                            @keyframes ripple {
-                                0% {
-                                    transform: scale(0);
-                                    opacity: 1;
-                                }
-                                100% {
-                                    transform: scale(2);
-                                    opacity: 0;
-                                }
-                            }
-                            .click-ripple {
-                                position: fixed;
-                                width: 60px;
-                                height: 60px;
-                                border: 3px solid #0096ff;
-                                border-radius: 50%;
-                                pointer-events: none;
-                                z-index: 1000000040;
-                                transform: scale(0);
-                                opacity: 0;
-                            }
-                            .click-ripple.active {
-                                animation: ripple 0.6s ease-out forwards;
-                            }
-                        `;
-                        document.head.appendChild(style);
-                    }
-                    // Create ripple effect
-                    const ripple = document.createElement('div');
-                    ripple.className = 'click-ripple';
-                    ripple.style.left = `${e.clientX - 30}px`;
-                    ripple.style.top = `${e.clientY - 30}px`;
-                    document.body.appendChild(ripple);
-                    activeRipples.add(ripple);
-                    // Trigger animation on next frame to ensure proper initialization
-                    requestAnimationFrame(() => {
-                        ripple.classList.add('active');
-                    });
-                    // Remove ripple after animation
-                    setTimeout(() => {
-                        ripple.remove();
-                        activeRipples.delete(ripple);
-                    }, 600);
-                }
-                // Flash the cursor only if not already scaled down
-                if (cursor) {
-                    const currentTransform = cursor.style.transform;
-                    if (currentTransform !== 'scale(0.5)') {
-                        cursor.style.background = `rgba(0, 150, 255, ${options.opacity * 1.5})`;
-                        cursor.style.border = `2px solid rgba(0, 150, 255, 1)`;
-                        cursor.style.transform = 'scale(1.5)';
-                        setTimeout(() => {
-                            cursor.style.background = `rgba(0, 150, 255, ${options.opacity * 0.5})`;
-                            cursor.style.border = `2px solid rgba(0, 150, 255, ${options.opacity})`;
-                            cursor.style.transform = 'scale(1)';
-                        }, 200);
-                    }
-                }
-            });
-            // Also track right clicks
-            document.addEventListener('contextmenu', (e) => {
-                // Don't prevent default - let context menu show
-                if (options.showClickRipple) {
-                    // Create ripple for right click (reuse same styles)
-                    const ripple = document.createElement('div');
-                    ripple.className = 'click-ripple';
-                    ripple.style.left = `${e.clientX - 30}px`;
-                    ripple.style.top = `${e.clientY - 30}px`;
-                    document.body.appendChild(ripple);
-                    activeRipples.add(ripple);
-                    // Trigger animation on next frame
-                    requestAnimationFrame(() => {
-                        ripple.classList.add('active');
-                    });
-                    setTimeout(() => {
-                        ripple.remove();
-                        activeRipples.delete(ripple);
-                    }, 600);
-                }
-            });
-            // Scroll visualization
-            let scrollTimeout;
-            let scrollArrow = null;
-            // Create the single scroll arrow
-            scrollArrow = document.createElement('div');
-            scrollArrow.style.cssText = `
-                position: fixed;
-                width: 40px;
-                height: 40px;
-                font-size: 24px;
-                color: #0096ff;
-                text-align: center;
-                line-height: 40px;
-                pointer-events: none;
-                z-index: 1000000045;
-                display: none;
-                transition: transform 0.1s ease-out, opacity 0.2s ease-out;
-            `;
-            document.body.appendChild(scrollArrow);
-            // Handle both wheel and scroll events
-            const handleScroll = (e) => {
-                if (!scrollArrow)
-                    return;
-                // Skip if no vertical scroll
-                if (Math.abs(e.deltaY) < 0.5)
-                    return;
-                // Clear existing timeout
-                if (scrollTimeout) {
-                    clearTimeout(scrollTimeout);
-                }
-                // Update arrow
-                const scrollDirection = e.deltaY > 0 ? 'down' : 'up';
-                scrollArrow.textContent = scrollDirection === 'down' ? '▼' : '▲';
-                // Position above/below cursor based on direction
-                // Arrow is 40px tall, cursor is ~20px, add 10px spacing
-                const offset = scrollDirection === 'down' ? 30 : -30;
-                scrollArrow.style.left = `${e.clientX - 20}px`;
-                scrollArrow.style.top = `${e.clientY + offset - 20}px`; // -20 to account for arrow center
-                // Scale based on deltaY magnitude
-                const scale = 0.8 + Math.min(Math.abs(e.deltaY) / 10, 0.4);
-                scrollArrow.style.transform = `scale(${scale})`;
-                scrollArrow.style.opacity = '0.4';
-                scrollArrow.style.display = 'block';
-                // Hide after scroll stops
-                scrollTimeout = setTimeout(() => {
-                    if (scrollArrow) {
-                        scrollArrow.style.opacity = '0';
-                        setTimeout(() => {
-                            if (scrollArrow)
-                                scrollArrow.style.display = 'none';
-                        }, 200);
-                    }
-                }, 150);
-            };
-            // Add event listeners for both wheel and scroll events
-            document.addEventListener('wheel', handleScroll, { passive: true });
-            // Also listen to scroll events on window and document.body for better compatibility
-            window.addEventListener('wheel', handleScroll, { passive: true });
-            document.body.addEventListener('wheel', handleScroll, { passive: true });
-            // Hide cursor when it leaves the viewport
-            document.addEventListener('mouseleave', () => {
-                if (cursor) {
-                    cursor.style.display = 'none';
-                }
-                // Clean up any active ripples
-                activeRipples.forEach(ripple => ripple.remove());
-                activeRipples.clear();
-                // Hide scroll arrow
-                if (scrollArrow) {
-                    scrollArrow.style.display = 'none';
-                }
-            });
-            document.addEventListener('mouseenter', () => {
-                if (cursor) {
-                    cursor.style.display = 'block';
-                }
-            });
-        }, { opacity: this.baseOpacity, showHoverCircle: this.showHoverCircle, showClickRipple: this.showClickRipple, showDragLine: this.showDragLine });
-    }
-}

package/dist/web/visualizer/typeEffects.d.ts

@@ -1,10 +0,0 @@
-import { Page } from "playwright";
-export declare class TypeEffectVisual {
-    private baseOpacity;
-    private displayDuration;
-    private maxKeys;
-    private page;
-    constructor(baseOpacity?: number, displayDuration?: number, maxKeys?: number);
-    setActivePage(page: Page): Promise<void>;
-    setupOnPage(): Promise<void>;
-}

package/dist/web/visualizer/typeEffects.js

@@ -1,190 +0,0 @@
-import { retryOnErrorIsSuccess } from "@/common";
-export class TypeEffectVisual {
-    baseOpacity;
-    displayDuration;
-    maxKeys;
-    page;
-    constructor(baseOpacity = 0.6, displayDuration = 2000, maxKeys = 5) {
-        this.baseOpacity = baseOpacity;
-        this.displayDuration = displayDuration;
-        this.maxKeys = maxKeys;
-    }
-    async setActivePage(page) {
-        this.page = page;
-        page.on('load', async () => {
-            await retryOnErrorIsSuccess(this.setupOnPage.bind(this), { mode: 'retry_all', delayMs: 200, retryLimit: 10 });
-        });
-        await retryOnErrorIsSuccess(this.setupOnPage.bind(this), { mode: 'retry_all', delayMs: 200, retryLimit: 5 });
-    }
-    async setupOnPage() {
-        await this.page.evaluate((options) => {
-            if (window.__typeEffectsInitialized) {
-                return;
-            }
-            window.__typeEffectsInitialized = true;
-            // Create container for key badges
-            const container = document.createElement('div');
-            container.id = 'type-effects-container';
-            container.style.cssText = `
-                position: fixed;
-                bottom: 40px;
-                left: 50%;
-                transform: translateX(-50%);
-                display: flex;
-                gap: 8px;
-                align-items: center;
-                pointer-events: none;
-                z-index: 1000000060;
-            `;
-            document.body.appendChild(container);
-            // Add styles for key badges
-            const style = document.createElement('style');
-            style.setAttribute('data-type-effects', 'true');
-            style.textContent = `
-                @keyframes keyIn {
-                    0% {
-                        opacity: 0;
-                        transform: scale(0.5) translateY(20px);
-                    }
-                    100% {
-                        opacity: 1;
-                        transform: scale(1) translateY(0);
-                    }
-                }
-                @keyframes keyOut {
-                    0% {
-                        opacity: 1;
-                        transform: scale(1) translateY(0);
-                    }
-                    100% {
-                        opacity: 0;
-                        transform: scale(0.8) translateY(10px);
-                    }
-                }
-                .key-badge {
-                    display: inline-flex;
-                    align-items: center;
-                    justify-content: center;
-                    min-width: 40px;
-                    height: 40px;
-                    padding: 0 12px;
-                    background: rgba(0, 100, 200, ${options.opacity * 0.9});
-                    border: none;
-                    border-radius: 6px;
-                    font-family: monospace;
-                    font-size: 16px;
-                    font-weight: bold;
-                    color: white;
-                    animation: keyIn 0.2s ease-out forwards;
-                    white-space: nowrap;
-                    user-select: none;
-                    -webkit-user-select: none;
-                    -moz-user-select: none;
-                    -ms-user-select: none;
-                }
-                .key-badge.fading {
-                    animation: keyOut 0.3s ease-out forwards;
-                }
-            `;
-            document.head.appendChild(style);
-            // Define special keys to track (excluding modifiers on their own)
-            const specialKeys = {
-                'Enter': '↵ Enter',
-                'Tab': '⇥ Tab',
-                'Delete': '⌦ Del',
-                'Escape': '⎋ Esc',
-                'ArrowUp': '↑',
-                'ArrowDown': '↓',
-                'ArrowLeft': '←',
-                'ArrowRight': '→',
-                'Home': '⇱ Home',
-                'End': '⇲ End',
-                'PageUp': '⇞ PgUp',
-                'PageDown': '⇟ PgDn',
-                'Insert': 'Ins',
-            };
-            // Active badges
-            const activeBadges = [];
-            // Handle keydown events
-            document.addEventListener('keydown', (e) => {
-                const key = e.key;
-                // Check if we have meaningful modifiers (Ctrl or Cmd)
-                const hasMeaningfulModifiers = e.ctrlKey || e.metaKey;
-                // For modifier combos, we want to show them with ANY key (including letters/numbers)
-                if (hasMeaningfulModifiers) {
-                    // Skip if it's just a modifier key by itself
-                    if (['Control', 'Alt', 'Shift', 'Meta'].includes(key)) {
-                        return;
-                    }
-                    // Build the combo display
-                    let modifiers = [];
-                    if (e.ctrlKey)
-                        modifiers.push('Ctrl');
-                    if (e.metaKey)
-                        modifiers.push('⌘');
-                    // Include Shift/Alt only if Ctrl or Cmd is also pressed
-                    if ((e.ctrlKey || e.metaKey) && e.shiftKey)
-                        modifiers.push('Shift');
-                    if ((e.ctrlKey || e.metaKey) && e.altKey)
-                        modifiers.push('Alt');
-                    // Get the key display
-                    let keyDisplay = specialKeys[key] || key.toUpperCase();
-                    if (key.length === 1) {
-                        keyDisplay = key.toUpperCase();
-                    }
-                    const displayText = modifiers.join('+') + '+' + keyDisplay;
-                    // Create badge
-                    createBadge(displayText);
-                }
-                else {
-                    // No modifiers - only show if it's a special key
-                    const keyDisplay = specialKeys[key];
-                    if (keyDisplay) {
-                        createBadge(keyDisplay);
-                    }
-                }
-            });
-            function createBadge(displayText) {
-                // Create badge element
-                const badge = document.createElement('div');
-                badge.className = 'key-badge';
-                badge.textContent = displayText;
-                // Add to container
-                container.appendChild(badge);
-                // Set up removal timeout
-                const timeout = setTimeout(() => {
-                    badge.classList.add('fading');
-                    setTimeout(() => {
-                        badge.remove();
-                        // Remove from active badges
-                        const index = activeBadges.findIndex(b => b.element === badge);
-                        if (index !== -1) {
-                            activeBadges.splice(index, 1);
-                        }
-                    }, 300);
-                }, options.displayDuration);
-                // Track active badge
-                activeBadges.push({ element: badge, timeout });
-                // Remove oldest badges if we exceed max
-                while (activeBadges.length > options.maxKeys) {
-                    const oldest = activeBadges.shift();
-                    if (oldest) {
-                        clearTimeout(oldest.timeout);
-                        oldest.element.classList.add('fading');
-                        setTimeout(() => oldest.element.remove(), 300);
-                    }
-                }
-            }
-            // Clean up on page hide
-            document.addEventListener('visibilitychange', () => {
-                if (document.hidden) {
-                    activeBadges.forEach(({ element, timeout }) => {
-                        clearTimeout(timeout);
-                        element.remove();
-                    });
-                    activeBadges.length = 0;
-                }
-            });
-        }, { opacity: this.baseOpacity, displayDuration: this.displayDuration, maxKeys: this.maxKeys });
-    }
-}

package/dist/web/zodReexport.test.d.ts

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

package/dist/web/zodReexport.test.js

@@ -1,14 +0,0 @@
-import { describe, expect, test } from 'bun:test';
-describe('z re-export', () => {
-    test('z.object() returns a valid schema via entry point', async () => {
-        const { z } = await import('@/index');
-        const schema = z.object({ name: z.string() });
-        const result = schema.safeParse({ name: 'test' });
-        expect(result.success).toBe(true);
-    });
-    test('re-exported z is the same zod instance', async () => {
-        const { z: reexported } = await import('@/index');
-        const { z: direct } = await import('zod');
-        expect(reexported).toBe(direct);
-    });
-});