figrecipe 0.7.4__py3-none-any.whl → 0.9.0__py3-none-any.whl

figrecipe/_dev/browser/_caption.py

@@ -0,0 +1,356 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""Caption overlay for demo recordings.
+
+Shows text captions/banners during demo recordings to explain
+what is happening in the demo.
+"""
+
+# JavaScript template for showing caption
+SHOW_CAPTION_JS = """
+(text) => {
+    // Remove existing caption if any
+    const existing = document.getElementById('demo-caption');
+    if (existing) existing.remove();
+
+    // Add CSS if not exists
+    if (!document.getElementById('demo-caption-style')) {
+        const style = document.createElement('style');
+        style.id = 'demo-caption-style';
+        style.textContent = `
+            @keyframes demo-caption-fade-in {
+                0% { opacity: 0; transform: translateY(20px); }
+                100% { opacity: 1; transform: translateY(0); }
+            }
+            @keyframes demo-caption-fade-out {
+                0% { opacity: 1; transform: translateY(0); }
+                100% { opacity: 0; transform: translateY(-20px); }
+            }
+        `;
+        document.head.appendChild(style);
+    }
+
+    // Create caption element
+    const caption = document.createElement('div');
+    caption.id = 'demo-caption';
+    caption.textContent = text;
+    caption.style.cssText = `
+        position: fixed;
+        bottom: 50px;
+        left: 50%;
+        transform: translateX(-50%);
+        background: rgba(0, 0, 0, 0.85);
+        color: white;
+        padding: 18px 40px;
+        border-radius: 10px;
+        font-size: 24px;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        font-weight: 500;
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+        z-index: 2147483645;
+        pointer-events: none;
+        animation: demo-caption-fade-in 0.3s ease-out forwards;
+        max-width: 80%;
+        text-align: center;
+    `;
+    document.body.appendChild(caption);
+
+    return true;
+}
+"""
+
+HIDE_CAPTION_JS = """
+() => {
+    const caption = document.getElementById('demo-caption');
+    if (caption) {
+        caption.style.animation = 'demo-caption-fade-out 0.3s ease-out forwards';
+        setTimeout(() => caption.remove(), 300);
+    }
+    return true;
+}
+"""
+
+# JavaScript for title screen with blur overlay
+TITLE_SCREEN_JS = """
+async (args) => {
+    const { title, subtitle = '', timestamp = '', duration = 2000 } = args;
+
+    // Add CSS animations if not exists
+    if (!document.getElementById('demo-title-style')) {
+        const style = document.createElement('style');
+        style.id = 'demo-title-style';
+        style.textContent = `
+            @keyframes demo-title-fade-in {
+                0% { opacity: 0; }
+                100% { opacity: 1; }
+            }
+            @keyframes demo-title-fade-out {
+                0% { opacity: 1; }
+                100% { opacity: 0; }
+            }
+            @keyframes demo-title-text-in {
+                0% { opacity: 0; transform: scale(0.9); }
+                100% { opacity: 1; transform: scale(1); }
+            }
+        `;
+        document.head.appendChild(style);
+    }
+
+    // Create blur overlay
+    const overlay = document.createElement('div');
+    overlay.id = 'demo-title-overlay';
+    overlay.style.cssText = `
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.7);
+        backdrop-filter: blur(8px);
+        -webkit-backdrop-filter: blur(8px);
+        z-index: 2147483646;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        animation: demo-title-fade-in 0.5s ease-out forwards;
+    `;
+
+    // Create title text
+    const titleEl = document.createElement('div');
+    titleEl.style.cssText = `
+        color: white;
+        font-size: 48px;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        font-weight: 700;
+        text-align: center;
+        animation: demo-title-text-in 0.6s ease-out 0.2s both;
+        text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+    `;
+    titleEl.textContent = title;
+    overlay.appendChild(titleEl);
+
+    // Create subtitle if provided
+    if (subtitle) {
+        const subtitleEl = document.createElement('div');
+        subtitleEl.style.cssText = `
+            color: rgba(255, 255, 255, 0.8);
+            font-size: 24px;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            font-weight: 400;
+            margin-top: 16px;
+            text-align: center;
+            animation: demo-title-text-in 0.6s ease-out 0.4s both;
+        `;
+        subtitleEl.textContent = subtitle;
+        overlay.appendChild(subtitleEl);
+    }
+
+    // Create timestamp if provided
+    if (timestamp) {
+        const timestampEl = document.createElement('div');
+        timestampEl.style.cssText = `
+            color: rgba(255, 255, 255, 0.5);
+            font-size: 14px;
+            font-family: monospace;
+            margin-top: 24px;
+            text-align: center;
+            animation: demo-title-text-in 0.6s ease-out 0.5s both;
+        `;
+        timestampEl.textContent = timestamp;
+        overlay.appendChild(timestampEl);
+    }
+
+    document.body.appendChild(overlay);
+
+    // Wait and fade out
+    await new Promise(r => setTimeout(r, duration));
+
+    overlay.style.animation = 'demo-title-fade-out 0.5s ease-out forwards';
+    await new Promise(r => setTimeout(r, 500));
+    overlay.remove();
+
+    return true;
+}
+"""
+
+
+async def show_caption(page, text: str) -> bool:
+    """Show caption text overlay on page.
+
+    Parameters
+    ----------
+    page : playwright.async_api.Page
+        Playwright page object.
+    text : str
+        Caption text to display.
+
+    Returns
+    -------
+    bool
+        True if successful.
+    """
+    return await page.evaluate(SHOW_CAPTION_JS, text)
+
+
+async def hide_caption(page) -> bool:
+    """Hide caption overlay from page.
+
+    Parameters
+    ----------
+    page : playwright.async_api.Page
+        Playwright page object.
+
+    Returns
+    -------
+    bool
+        True if successful.
+    """
+    return await page.evaluate(HIDE_CAPTION_JS)
+
+
+async def show_title_screen(
+    page,
+    title: str,
+    subtitle: str = "",
+    timestamp: str = "",
+    duration_ms: int = 2000,
+) -> bool:
+    """Show title screen with blur overlay and fade effect.
+
+    Parameters
+    ----------
+    page : playwright.async_api.Page
+        Playwright page object.
+    title : str
+        Main title text.
+    subtitle : str, optional
+        Subtitle text (default: "").
+    timestamp : str, optional
+        Timestamp to display (default: "").
+    duration_ms : int, optional
+        Duration to show title in milliseconds (default: 2000).
+
+    Returns
+    -------
+    bool
+        True if successful.
+    """
+    args = {
+        "title": title,
+        "subtitle": subtitle,
+        "timestamp": timestamp,
+        "duration": duration_ms,
+    }
+    return await page.evaluate(TITLE_SCREEN_JS, args)
+
+
+# JavaScript for closing branding screen
+CLOSING_SCREEN_JS = """
+async (args) => {
+    const { duration = 2500 } = args;
+
+    // Add CSS animations
+    if (!document.getElementById('demo-closing-style')) {
+        const style = document.createElement('style');
+        style.id = 'demo-closing-style';
+        style.textContent = `
+            @keyframes demo-closing-fade-in {
+                0% { opacity: 0; }
+                100% { opacity: 1; }
+            }
+            @keyframes demo-closing-fade-out {
+                0% { opacity: 1; }
+                100% { opacity: 0; }
+            }
+        `;
+        document.head.appendChild(style);
+    }
+
+    // Create overlay
+    const overlay = document.createElement('div');
+    overlay.id = 'demo-closing-overlay';
+    overlay.style.cssText = `
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+        z-index: 2147483646;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        animation: demo-closing-fade-in 0.5s ease-out forwards;
+    `;
+
+    // FigRecipe title
+    const title = document.createElement('div');
+    title.style.cssText = `
+        color: white;
+        font-size: 56px;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        font-weight: 700;
+        margin-bottom: 16px;
+    `;
+    title.textContent = 'FigRecipe';
+    overlay.appendChild(title);
+
+    // Part of SciTeX
+    const scitex = document.createElement('div');
+    scitex.style.cssText = `
+        color: rgba(255, 255, 255, 0.7);
+        font-size: 20px;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        margin-bottom: 24px;
+    `;
+    scitex.innerHTML = 'Part of SciTeX™';
+    overlay.appendChild(scitex);
+
+    // URL
+    const url = document.createElement('div');
+    url.style.cssText = `
+        color: #4da6ff;
+        font-size: 18px;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    `;
+    url.textContent = 'https://scitex.ai';
+    overlay.appendChild(url);
+
+    document.body.appendChild(overlay);
+
+    // Wait and fade out
+    await new Promise(r => setTimeout(r, duration));
+
+    overlay.style.animation = 'demo-closing-fade-out 0.5s ease-out forwards';
+    await new Promise(r => setTimeout(r, 500));
+    overlay.remove();
+
+    return true;
+}
+"""
+
+
+async def show_closing_screen(page, duration_ms: int = 2500) -> bool:
+    """Show closing branding screen with FigRecipe and SciTeX.
+
+    Parameters
+    ----------
+    page : playwright.async_api.Page
+        Playwright page object.
+    duration_ms : int, optional
+        Duration to show screen in milliseconds (default: 2500).
+
+    Returns
+    -------
+    bool
+        True if successful.
+    """
+    args = {"duration": duration_ms}
+    return await page.evaluate(CLOSING_SCREEN_JS, args)
+
+
+__all__ = ["show_caption", "hide_caption", "show_title_screen", "show_closing_screen"]
+
+# EOF

figrecipe/_dev/browser/_click_effect.py

@@ -0,0 +1,146 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""Click effect visualization for demo recordings.
+
+Shows ripple/pulse animation at click locations to make
+mouse clicks visible in recordings.
+"""
+
+# JavaScript to inject click effect handler
+CLICK_EFFECT_JS = """
+() => {
+    // Add CSS animation if not exists
+    if (!document.getElementById('demo-click-style')) {
+        const style = document.createElement('style');
+        style.id = 'demo-click-style';
+        style.textContent = `
+            @keyframes demo-click-ripple {
+                0% {
+                    transform: translate(-50%, -50%) scale(0);
+                    opacity: 1;
+                }
+                100% {
+                    transform: translate(-50%, -50%) scale(1);
+                    opacity: 0;
+                }
+            }
+            .demo-click-ripple {
+                position: fixed;
+                width: 60px;
+                height: 60px;
+                border: 4px solid #FF4444;
+                border-radius: 50%;
+                pointer-events: none;
+                z-index: 2147483646;
+                animation: demo-click-ripple 0.6s ease-out forwards;
+            }
+        `;
+        document.head.appendChild(style);
+    }
+
+    // Initialize click sound audio element
+    if (!window._demoClickAudio) {
+        window._demoClickAudio = new Audio('/static/audio/click.mp3');
+        window._demoClickAudio.volume = 0.15;
+    }
+
+    // Function to play click sound
+    window._playClickSound = () => {
+        if (window._demoClickAudio) {
+            window._demoClickAudio.currentTime = 0;
+            window._demoClickAudio.play().catch(() => {});
+        }
+    };
+
+    // Remove existing handler if any
+    if (window._demoClickHandler) {
+        document.removeEventListener('mousedown', window._demoClickHandler);
+    }
+
+    // Add click handler
+    window._demoClickHandler = (e) => {
+        // Play click sound
+        if (window._playClickSound) window._playClickSound();
+
+        const ripple = document.createElement('div');
+        ripple.className = 'demo-click-ripple';
+        ripple.style.left = e.clientX + 'px';
+        ripple.style.top = e.clientY + 'px';
+        document.body.appendChild(ripple);
+
+        // Also pulse the cursor if it exists
+        const cursor = document.getElementById('demo-cursor');
+        if (cursor) {
+            cursor.style.transform = 'translate(-50%, -50%) scale(1.3)';
+            setTimeout(() => {
+                cursor.style.transform = 'translate(-50%, -50%) scale(1)';
+            }, 150);
+        }
+
+        // Remove ripple after animation
+        setTimeout(() => ripple.remove(), 600);
+    };
+    document.addEventListener('mousedown', window._demoClickHandler);
+
+    return true;
+}
+"""
+
+REMOVE_CLICK_EFFECT_JS = """
+() => {
+    // Remove handler
+    if (window._demoClickHandler) {
+        document.removeEventListener('mousedown', window._demoClickHandler);
+        delete window._demoClickHandler;
+    }
+    // Remove audio element
+    if (window._demoClickAudio) {
+        window._demoClickAudio.pause();
+        delete window._demoClickAudio;
+    }
+    delete window._playClickSound;
+    // Remove style
+    const style = document.getElementById('demo-click-style');
+    if (style) style.remove();
+    // Remove any remaining ripples
+    document.querySelectorAll('.demo-click-ripple').forEach(el => el.remove());
+    return true;
+}
+"""
+
+
+async def inject_click_effect(page) -> bool:
+    """Inject click ripple effect handler into page.
+
+    Parameters
+    ----------
+    page : playwright.async_api.Page
+        Playwright page object.
+
+    Returns
+    -------
+    bool
+        True if successful.
+    """
+    return await page.evaluate(CLICK_EFFECT_JS)
+
+
+async def remove_click_effect(page) -> bool:
+    """Remove click effect handler from page.
+
+    Parameters
+    ----------
+    page : playwright.async_api.Page
+        Playwright page object.
+
+    Returns
+    -------
+    bool
+        True if successful.
+    """
+    return await page.evaluate(REMOVE_CLICK_EFFECT_JS)
+
+
+__all__ = ["inject_click_effect", "remove_click_effect"]
+
+# EOF

figrecipe/_dev/browser/_cursor.py

@@ -0,0 +1,196 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""Mouse cursor visualization for demo recordings.
+
+Injects a visible cursor element that follows mouse movements,
+making demos more intuitive when the system cursor isn't captured.
+"""
+
+# JavaScript to inject cursor visualization
+CURSOR_JS = """
+() => {
+    // Remove existing cursor if any
+    const existing = document.getElementById('demo-cursor');
+    if (existing) existing.remove();
+
+    // Create cursor element
+    const cursor = document.createElement('div');
+    cursor.id = 'demo-cursor';
+    cursor.style.cssText = `
+        position: fixed;
+        width: 24px;
+        height: 24px;
+        border: 3px solid #FF4444;
+        border-radius: 50%;
+        pointer-events: none;
+        z-index: 2147483647;
+        box-shadow: 0 0 10px rgba(255, 68, 68, 0.5);
+        transform: translate(-50%, -50%);
+        transition: transform 0.05s ease-out;
+    `;
+    document.body.appendChild(cursor);
+
+    // Create inner dot
+    const dot = document.createElement('div');
+    dot.style.cssText = `
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 6px;
+        height: 6px;
+        background: #FF4444;
+        border-radius: 50%;
+        transform: translate(-50%, -50%);
+    `;
+    cursor.appendChild(dot);
+
+    // Track mouse movement
+    window._demoCursorHandler = (e) => {
+        cursor.style.left = e.clientX + 'px';
+        cursor.style.top = e.clientY + 'px';
+    };
+    document.addEventListener('mousemove', window._demoCursorHandler);
+
+    // Initial position at center
+    cursor.style.left = window.innerWidth / 2 + 'px';
+    cursor.style.top = window.innerHeight / 2 + 'px';
+
+    return true;
+}
+"""
+
+REMOVE_CURSOR_JS = """
+() => {
+    const cursor = document.getElementById('demo-cursor');
+    if (cursor) cursor.remove();
+    if (window._demoCursorHandler) {
+        document.removeEventListener('mousemove', window._demoCursorHandler);
+        delete window._demoCursorHandler;
+    }
+    return true;
+}
+"""
+
+# JavaScript to animate cursor to a position
+MOVE_CURSOR_JS = """
+async (args) => {
+    const { x, y, duration = 500 } = args;
+    const cursor = document.getElementById('demo-cursor');
+    if (!cursor) return false;
+
+    // Get current position
+    const startX = parseFloat(cursor.style.left) || window.innerWidth / 2;
+    const startY = parseFloat(cursor.style.top) || window.innerHeight / 2;
+
+    // Animate to target
+    const startTime = performance.now();
+
+    return new Promise((resolve) => {
+        function animate(currentTime) {
+            const elapsed = currentTime - startTime;
+            const progress = Math.min(elapsed / duration, 1);
+
+            // Ease-out cubic for natural motion
+            const eased = 1 - Math.pow(1 - progress, 3);
+
+            const currentX = startX + (x - startX) * eased;
+            const currentY = startY + (y - startY) * eased;
+
+            cursor.style.left = currentX + 'px';
+            cursor.style.top = currentY + 'px';
+
+            if (progress < 1) {
+                requestAnimationFrame(animate);
+            } else {
+                resolve(true);
+            }
+        }
+        requestAnimationFrame(animate);
+    });
+}
+"""
+
+
+async def inject_cursor(page) -> bool:
+    """Inject visible cursor element into page.
+
+    Parameters
+    ----------
+    page : playwright.async_api.Page
+        Playwright page object.
+
+    Returns
+    -------
+    bool
+        True if successful.
+    """
+    return await page.evaluate(CURSOR_JS)
+
+
+async def remove_cursor(page) -> bool:
+    """Remove cursor visualization from page.
+
+    Parameters
+    ----------
+    page : playwright.async_api.Page
+        Playwright page object.
+
+    Returns
+    -------
+    bool
+        True if successful.
+    """
+    return await page.evaluate(REMOVE_CURSOR_JS)
+
+
+async def move_cursor_to(page, x: float, y: float, duration_ms: int = 500) -> bool:
+    """Animate cursor to a specific position.
+
+    Parameters
+    ----------
+    page : playwright.async_api.Page
+        Playwright page object.
+    x : float
+        Target X coordinate.
+    y : float
+        Target Y coordinate.
+    duration_ms : int, optional
+        Animation duration in milliseconds (default: 500).
+
+    Returns
+    -------
+    bool
+        True if successful.
+    """
+    args = {"x": x, "y": y, "duration": duration_ms}
+    return await page.evaluate(MOVE_CURSOR_JS, args)
+
+
+async def move_cursor_to_element(page, locator, duration_ms: int = 500) -> bool:
+    """Animate cursor to an element's center.
+
+    Parameters
+    ----------
+    page : playwright.async_api.Page
+        Playwright page object.
+    locator : playwright.async_api.Locator
+        Playwright locator for target element.
+    duration_ms : int, optional
+        Animation duration in milliseconds (default: 500).
+
+    Returns
+    -------
+    bool
+        True if successful.
+    """
+    box = await locator.bounding_box()
+    if not box:
+        return False
+    x = box["x"] + box["width"] / 2
+    y = box["y"] + box["height"] / 2
+    return await move_cursor_to(page, x, y, duration_ms)
+
+
+__all__ = ["inject_cursor", "remove_cursor", "move_cursor_to", "move_cursor_to_element"]
+
+# EOF