autokap 1.0.2 → 1.0.4

package/dist/mockup.js

@@ -1,604 +0,0 @@
-import { readFile, readdir } from 'fs/promises';
-import path from 'path';
-import sharp from 'sharp';
-import { fileURLToPath } from 'url';
-import { generateMockupPage, computeMockupLayout } from './mockup-html.js';
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const DEVICES_DIR = path.join(__dirname, '..', 'assets', 'devices');
-const FRAMES_DIR = path.join(__dirname, '..', 'assets', 'frames');
-// Supabase config for DB-backed mockup loading
-const SUPABASE_URL = process.env.NEXT_PUBLIC_SUPABASE_URL;
-const SUPABASE_SERVICE_KEY = process.env.SUPABASE_SERVICE_ROLE_KEY;
-const DEFAULT_MOCKUP_OPTIONS = {
-    orientation: 'portrait',
-    outputScale: 2,
-    showStatusBar: true,
-    showSafeAreaTop: true,
-    showSafeAreaBottom: true,
-    showSafeAreaLeft: true,
-    showSafeAreaRight: true,
-    showHomeIndicator: true,
-    safeAreaTopColor: '',
-    safeAreaBottomColor: '',
-    safeAreaLeftColor: '',
-    safeAreaRightColor: '',
-    statusBar: {},
-    browserBar: {},
-    windowBorder: { color: '', width: 0, radius: 0 },
-};
-const CONFIG_CACHE_TTL_MS = 5 * 60 * 1000; // 5 minutes
-let configCache = null;
-// In-memory cache for downloaded frame asset Buffers
-const frameBufferCache = new Map();
-const FRAME_CACHE_TTL_MS = 10 * 60 * 1000; // 10 minutes
-export function invalidateDeviceConfigCache() {
-    configCache = null;
-    frameBufferCache.clear();
-}
-function resolveBrowserOrientation(config, requestedOrientation) {
-    const supported = config.supportedOrientations ?? [];
-    if (supported.length > 0) {
-        return supported[0] ?? requestedOrientation;
-    }
-    const available = Object.keys(config.orientations ?? {});
-    return available[0] ?? config.frameOrientation ?? requestedOrientation;
-}
-function normalizeBrowserSafeAreaTop(configuredTop, dpr, fallbackLogicalTop) {
-    const rawTop = configuredTop ?? 0;
-    if (rawTop <= 0) {
-        return fallbackLogicalTop * dpr;
-    }
-    // Browser configs store safeArea.top in logical px, but some historical rows
-    // may already contain a DPR-scaled physical value. Normalize both shapes.
-    const logicalTop = rawTop > fallbackLogicalTop * 1.5
-        ? rawTop / Math.max(dpr, 1)
-        : rawTop;
-    return logicalTop * dpr;
-}
-function normalizeBrowserWindowBorder(windowBorder, dpr) {
-    if (!windowBorder) {
-        return undefined;
-    }
-    return {
-        ...windowBorder,
-        radius: windowBorder.radius > 0
-            ? windowBorder.radius * dpr
-            : windowBorder.radius,
-    };
-}
-function normalizeBrowserCornerRadius(cornerRadius, dpr) {
-    if (!cornerRadius || cornerRadius <= 0) {
-        return 0;
-    }
-    return cornerRadius * dpr;
-}
-/**
- * Resolve the orientation config for a given orientation.
- * Prefers per-orientation configs; falls back to rotation logic for legacy format.
- */
-function resolveOrientationConfig(config, requestedOrientation) {
-    // Check for per-orientation config (new format)
-    const orientationData = config.orientations?.[requestedOrientation];
-    if (orientationData) {
-        return {
-            screen: orientationData.screen,
-            safeArea: orientationData.safeArea ?? { top: 0, bottom: 0 },
-            statusBar: orientationData.statusBar,
-            homeIndicator: orientationData.homeIndicator,
-            frame: orientationData.frame,
-            frameUrl: orientationData.frameUrl ?? config._rowFrameUrl,
-            frameDarkUrl: orientationData.frameDarkUrl,
-            windowBorder: orientationData.windowBorder,
-            browserBarZones: orientationData.browserBarZones,
-            frameRotation: orientationData.frameRotation ?? 0,
-            needsRotation: false,
-            disableOverlays: false,
-            frameBehindContent: orientationData.frameBehindContent ?? false,
-        };
-    }
-    // Legacy: single config, may need auto-rotation
-    const nativeOrientation = config.frameOrientation ?? 'portrait';
-    const needsRotation = requestedOrientation !== nativeOrientation;
-    const disableOverlays = config.category === 'phone' && needsRotation;
-    return {
-        screen: config.screen ?? { logicalWidth: 0, logicalHeight: 0, scale: 1, cornerRadius: 0 },
-        safeArea: config.safeArea ?? { top: 0, bottom: 0 },
-        statusBar: config.statusBar,
-        homeIndicator: config.homeIndicator,
-        frame: config.frame,
-        frameRotation: 0,
-        needsRotation,
-        disableOverlays,
-        frameBehindContent: false,
-    };
-}
-async function loadDeviceConfigs() {
-    if (configCache && configCache.expiresAt > Date.now()) {
-        return configCache.configs;
-    }
-    // Try Supabase first
-    if (SUPABASE_URL && SUPABASE_SERVICE_KEY) {
-        try {
-            const res = await fetch(`${SUPABASE_URL}/rest/v1/device_mockups?is_active=eq.true&order=category.asc,name.asc&select=id,config,frame_url`, {
-                headers: {
-                    apikey: SUPABASE_SERVICE_KEY,
-                    Authorization: `Bearer ${SUPABASE_SERVICE_KEY}`,
-                },
-            });
-            if (res.ok) {
-                const rows = await res.json();
-                const configs = new Map();
-                for (const row of rows) {
-                    const config = row.config;
-                    if (row.frame_url)
-                        config._rowFrameUrl = row.frame_url;
-                    configs.set(row.id, config);
-                }
-                configCache = { configs, expiresAt: Date.now() + CONFIG_CACHE_TTL_MS };
-                return configs;
-            }
-        }
-        catch {
-            // Fall through to filesystem
-        }
-    }
-    // Fallback: local filesystem
-    const files = await readdir(DEVICES_DIR);
-    const configs = new Map();
-    for (const file of files) {
-        if (!file.endsWith('.json'))
-            continue;
-        const raw = await readFile(path.join(DEVICES_DIR, file), 'utf-8');
-        const config = JSON.parse(raw);
-        configs.set(config.id, config);
-    }
-    configCache = { configs, expiresAt: Date.now() + CONFIG_CACHE_TTL_MS };
-    return configs;
-}
-async function loadFrameAsset(config, resolved) {
-    // Check for orientation-specific frame URL first
-    const frameUrl = resolved.frameUrl;
-    const cacheKey = frameUrl ?? config.id;
-    if (frameUrl) {
-        const cached = frameBufferCache.get(cacheKey);
-        if (cached && cached.expiresAt > Date.now())
-            return cached.buffer;
-        try {
-            const res = await fetch(frameUrl);
-            if (res.ok) {
-                const buffer = Buffer.from(await res.arrayBuffer());
-                frameBufferCache.set(cacheKey, { buffer, expiresAt: Date.now() + FRAME_CACHE_TTL_MS });
-                return buffer;
-            }
-        }
-        catch {
-            // Fall through to filesystem
-        }
-    }
-    // Fallback: local filesystem
-    return readFile(path.join(FRAMES_DIR, resolved.frame.asset));
-}
-function computeResolvedFrameGeometry(resolved) {
-    const rotation = resolved.frameRotation || (resolved.needsRotation ? 90 : 0);
-    const is90or270 = rotation % 180 !== 0;
-    if (rotation !== 0) {
-        if (is90or270) {
-            if (resolved.needsRotation) {
-                const origSr = resolved.frame.screenRect;
-                const origH = resolved.frame.height;
-                return {
-                    frameWidth: resolved.frame.height,
-                    frameHeight: resolved.frame.width,
-                    frameRotation: rotation,
-                    screenRect: {
-                        x: origH - origSr.y - origSr.height,
-                        y: origSr.x,
-                        width: origSr.height,
-                        height: origSr.width,
-                    },
-                };
-            }
-            return {
-                frameWidth: resolved.frame.height,
-                frameHeight: resolved.frame.width,
-                frameRotation: rotation,
-                screenRect: { ...resolved.frame.screenRect },
-            };
-        }
-        return {
-            frameWidth: resolved.frame.width,
-            frameHeight: resolved.frame.height,
-            frameRotation: rotation,
-            screenRect: { ...resolved.frame.screenRect },
-        };
-    }
-    return {
-        frameWidth: resolved.frame.width,
-        frameHeight: resolved.frame.height,
-        frameRotation: 0,
-        screenRect: { ...resolved.frame.screenRect },
-    };
-}
-async function loadFrameAssetFromDescriptor(descriptor) {
-    const cacheKey = descriptor.frameUrl ?? `${descriptor.id}:${descriptor.orientation}`;
-    const cached = frameBufferCache.get(cacheKey);
-    if (cached && cached.expiresAt > Date.now())
-        return cached.buffer;
-    if (descriptor.frameUrl) {
-        try {
-            const res = await fetch(descriptor.frameUrl);
-            if (res.ok) {
-                const buffer = Buffer.from(await res.arrayBuffer());
-                frameBufferCache.set(cacheKey, {
-                    buffer,
-                    expiresAt: Date.now() + FRAME_CACHE_TTL_MS,
-                });
-                return buffer;
-            }
-        }
-        catch {
-            // Fall through to filesystem
-        }
-    }
-    return readFile(path.join(FRAMES_DIR, descriptor.frame.asset));
-}
-export async function resolveDeviceFrameDescriptor(id, options) {
-    const configs = await loadDeviceConfigs();
-    const config = configs.get(id);
-    if (!config)
-        return null;
-    const orientation = options?.orientation ?? config.frameOrientation ?? 'portrait';
-    const resolved = resolveOrientationConfig(config, orientation);
-    const geometry = computeResolvedFrameGeometry(resolved);
-    return {
-        id: config.id,
-        name: config.name,
-        category: config.category,
-        orientation,
-        screen: resolved.screen,
-        safeArea: resolved.safeArea,
-        statusBar: resolved.statusBar,
-        homeIndicator: resolved.homeIndicator,
-        frame: {
-            type: resolved.frame.type,
-            asset: resolved.frame.asset,
-            width: resolved.frame.width,
-            height: resolved.frame.height,
-        },
-        frameUrl: resolved.frameUrl,
-        frameWidth: geometry.frameWidth,
-        frameHeight: geometry.frameHeight,
-        screenRect: geometry.screenRect,
-        frameRotation: geometry.frameRotation,
-        frameBehindContent: resolved.frameBehindContent,
-        disableOverlays: resolved.disableOverlays,
-    };
-}
-export async function rasterizeDeviceFrame(descriptor, outputScale) {
-    const rawFrame = await loadFrameAssetFromDescriptor(descriptor);
-    const isSvg = descriptor.frame.type === 'svg';
-    const rasterWidth = Math.round(descriptor.frame.width * outputScale);
-    const rasterHeight = Math.round(descriptor.frame.height * outputScale);
-    const svgDensity = Math.max(72, Math.round(72 * outputScale));
-    let rendered = isSvg
-        ? await sharp(rawFrame, { density: svgDensity })
-            .resize(rasterWidth, rasterHeight)
-            .png()
-            .toBuffer()
-        : await sharp(rawFrame)
-            .resize(rasterWidth, rasterHeight)
-            .png()
-            .toBuffer();
-    if (descriptor.frameRotation !== 0) {
-        rendered = await sharp(rendered).rotate(descriptor.frameRotation).png().toBuffer();
-    }
-    const renderedMeta = await sharp(rendered).metadata();
-    if (renderedMeta.width !== Math.round(descriptor.frameWidth * outputScale) ||
-        renderedMeta.height !== Math.round(descriptor.frameHeight * outputScale)) {
-        rendered = await sharp(rendered)
-            .resize(Math.round(descriptor.frameWidth * outputScale), Math.round(descriptor.frameHeight * outputScale))
-            .png()
-            .toBuffer();
-    }
-    return rendered;
-}
-// ── Public API ─────────────────────────────────────────────────────────
-export async function getDeviceFrames() {
-    const configs = await loadDeviceConfigs();
-    return Array.from(configs.values()).map(({ id, name, category, viewport }) => ({
-        id, name, category, viewport,
-    }));
-}
-export async function getDeviceFrame(id) {
-    const configs = await loadDeviceConfigs();
-    const c = configs.get(id);
-    if (!c)
-        return undefined;
-    return { id: c.id, name: c.name, category: c.category, viewport: c.viewport };
-}
-export async function applyDeviceFrame(screenshot, deviceId, browserContext, options) {
-    const configs = await loadDeviceConfigs();
-    const config = configs.get(deviceId);
-    if (!config)
-        throw new Error(`Unknown device frame: ${deviceId}`);
-    const opts = { ...DEFAULT_MOCKUP_OPTIONS, ...options };
-    const requestedOrientation = opts.orientation ?? 'portrait';
-    // Resolve orientation-specific config
-    // Browser devices ignore requested orientation. Capture uses a single browser
-    // geometry, and Studio must mirror that behavior even if stale configs contain
-    // bogus extra orientations.
-    const effectiveOrientation = config.category === 'browser'
-        ? resolveBrowserOrientation(config, requestedOrientation)
-        : requestedOrientation;
-    const resolved = resolveOrientationConfig(config, effectiveOrientation);
-    // Disable overlays if rotation requires it (legacy phone rotation)
-    if (resolved.disableOverlays) {
-        opts.showStatusBar = false;
-        opts.showSafeAreaTop = false;
-        opts.showSafeAreaBottom = false;
-        opts.showSafeAreaLeft = false;
-        opts.showSafeAreaRight = false;
-    }
-    const scale = resolved.screen?.scale ?? 1;
-    const isBrowserDevice = config.category === 'browser';
-    const hasFrameEarly = !!(resolved.frameUrl || resolved.frame.asset);
-    // For frameless browser devices, the screenshot is already at final pixel resolution
-    // (captured at the device's native viewport). outputScale would double it again.
-    const os = (isBrowserDevice && !hasFrameEarly) ? 1 : Math.max(0.5, Math.min(4, opts.outputScale));
-    console.log(`[mockup] applyDeviceFrame: id=${deviceId}, category=${config.category}, orientation=${requestedOrientation}`);
-    console.log(`[mockup]   hasOrientationConfig=${!!config.orientations?.[requestedOrientation]}, orientations=${JSON.stringify(Object.keys(config.orientations ?? {}))}`);
-    console.log(`[mockup]   resolved.screen:`, JSON.stringify(resolved.screen));
-    console.log(`[mockup]   resolved.frame: w=${resolved.frame.width} h=${resolved.frame.height} asset="${resolved.frame.asset}" url=${resolved.frameUrl ? 'yes' : 'no'}`);
-    console.log(`[mockup]   resolved.safeArea:`, JSON.stringify(resolved.safeArea));
-    console.log(`[mockup]   scale=${scale}, outputScale=${os}`);
-    // Browser devices can work without a frame image
-    const hasFrame = !!(resolved.frameUrl || resolved.frame.asset);
-    let frameData = null;
-    if (hasFrame) {
-        // Load and potentially rotate frame asset
-        const rawFrame = await loadFrameAsset(config, resolved);
-        const isSvg = resolved.frame.type === 'svg';
-        frameData = isSvg
-            ? await sharp(rawFrame, { density: 72 * os })
-                .resize(Math.round(resolved.frame.width * os), Math.round(resolved.frame.height * os))
-                .png().toBuffer()
-            : await sharp(rawFrame)
-                .resize(Math.round(resolved.frame.width * os), Math.round(resolved.frame.height * os))
-                .png().toBuffer();
-    }
-    // Apply frame rotation
-    const geometry = computeResolvedFrameGeometry(resolved);
-    let geo = {
-        frameWidth: geometry.frameWidth,
-        frameHeight: geometry.frameHeight,
-        screenRect: geometry.screenRect,
-    };
-    let browserDeviceResolutionFactor = 1;
-    // For frameless browser devices: derive dimensions from the actual screenshot
-    // and ensure safe area top is set for the Chrome toolbar (86px @ 1x = 129px @ 1.5x)
-    const BROWSER_BAR_HEIGHT = 86; // Chrome toolbar logical height at 1x
-    if (isBrowserDevice && !hasFrame) {
-        const sMeta = await sharp(screenshot).metadata();
-        const sw = sMeta.width ?? 1440;
-        const sh = sMeta.height ?? 900;
-        // Detect the actual DPR from the screenshot dimensions vs the device's logical viewport.
-        // This handles the case where the caller doesn't know the original capture DPR (e.g. Studio editor).
-        const logicalW = resolved.screen?.logicalWidth || 1440;
-        const inferredDpr = logicalW > 0 && sw > logicalW
-            ? Math.round(sw / logicalW * 10) / 10
-            : 1;
-        // Use whichever is larger: the explicitly requested outputScale or the inferred DPR.
-        // This ensures the browser bar is correctly sized even when outputScale=1 is passed
-        // but the screenshot is at a higher pixel density.
-        const dpr = Math.max(inferredDpr, Math.max(0.5, Math.min(4, opts.outputScale)));
-        browserDeviceResolutionFactor = dpr;
-        const safeAreaTop = normalizeBrowserSafeAreaTop(resolved.safeArea.top, dpr, BROWSER_BAR_HEIGHT);
-        resolved.safeArea = { ...resolved.safeArea, top: safeAreaTop };
-        resolved.screen = {
-            ...resolved.screen,
-            cornerRadius: normalizeBrowserCornerRadius(resolved.screen?.cornerRadius, dpr),
-        };
-        const saTop = resolved.safeArea.top * scale;
-        // Frame = screenshot width × (screenshot height + safe area for toolbar)
-        geo.frameWidth = sw;
-        geo.frameHeight = sh + saTop;
-        geo.screenRect = { x: 0, y: 0, width: sw, height: sh + saTop };
-        console.log(`[mockup]   frameless browser: screenshot=${sw}x${sh}, logicalW=${logicalW}, inferredDpr=${inferredDpr}, dpr=${dpr}, safeAreaTop=${saTop}, geo=${geo.frameWidth}x${geo.frameHeight}`);
-    }
-    else if (!hasFrame && geo.frameWidth === 0 && geo.frameHeight === 0) {
-        // Non-browser frameless fallback
-        geo.frameWidth = geo.screenRect.width || resolved.screen?.logicalWidth || 1440;
-        geo.frameHeight = geo.screenRect.height || resolved.screen?.logicalHeight || 900;
-        if (geo.screenRect.width === 0)
-            geo.screenRect = { x: 0, y: 0, width: geo.frameWidth, height: geo.frameHeight };
-    }
-    if (frameData && geometry.frameRotation !== 0) {
-        // Rotate the frame image by the specified angle
-        frameData = await sharp(frameData).rotate(geometry.frameRotation).png().toBuffer();
-    }
-    // Always compute content area with all safe areas visible — this matches
-    // the browser viewport the screenshot was captured at.
-    // Safe area toggles only affect the visual overlays (fills, status bar),
-    // NOT the screenshot sizing or placement.
-    const layout = computeMockupLayout({
-        frameSrc: '',
-        frameWidth: geo.frameWidth,
-        frameHeight: geo.frameHeight,
-        frameRotation: 0,
-        screenRect: geo.screenRect,
-        cornerRadius: (resolved.screen?.cornerRadius ?? 0) * scale,
-        safeArea: resolved.safeArea,
-        scale,
-        showSafeAreaTop: true,
-        showSafeAreaBottom: true,
-        showSafeAreaLeft: true,
-        showSafeAreaRight: true,
-    });
-    const contentW = layout.contentArea.width;
-    const contentH = layout.contentArea.height;
-    console.log(`[mockup]   hasFrame=${hasFrame}, geo: fw=${geo.frameWidth} fh=${geo.frameHeight} sr=${JSON.stringify(geo.screenRect)}`);
-    console.log(`[mockup]   layout: container=${layout.containerWidth}x${layout.containerHeight} content=${contentW}x${contentH} contentArea=${JSON.stringify(layout.contentArea)}`);
-    // Get incoming screenshot dimensions for logging
-    const screenshotMeta = await sharp(screenshot).metadata();
-    console.log(`[mockup]   input screenshot: ${screenshotMeta.width}x${screenshotMeta.height}`);
-    console.log(`[mockup]   resize target: ${Math.round(contentW * os)}x${Math.round(contentH * os)}`);
-    // Resize screenshot to outputScale× of the content area for crisp rendering
-    const screenshotForMockup = await sharp(screenshot)
-        .resize(Math.round(contentW * os), Math.round(contentH * os), { fit: 'fill' })
-        .png()
-        .toBuffer();
-    const screenshotBase64 = screenshotForMockup.toString('base64');
-    // Sample edge colors for dynamic safe area fills
-    const colors = await sampleEdgeColors(screenshotForMockup);
-    if (opts.safeAreaTopColor)
-        colors.topColor = opts.safeAreaTopColor;
-    if (opts.safeAreaBottomColor)
-        colors.bottomColor = opts.safeAreaBottomColor;
-    if (opts.safeAreaLeftColor)
-        colors.leftColor = opts.safeAreaLeftColor;
-    if (opts.safeAreaRightColor)
-        colors.rightColor = opts.safeAreaRightColor;
-    // Determine color scheme from edge colors
-    const autoColorScheme = isDarkBackground(colors.topColor) ? 'dark' : 'light';
-    const lum = parseLuminance(colors.bottomColor);
-    const hiColor = lum > 170 ? 'rgba(0,0,0,0.35)' : 'rgba(255,255,255,0.5)';
-    // Browser devices: swap frame to dark variant if needed
-    if (frameData && isBrowserDevice && autoColorScheme === 'dark' && resolved.frameDarkUrl) {
-        try {
-            const darkRes = await fetch(resolved.frameDarkUrl);
-            if (darkRes.ok) {
-                const darkRaw = Buffer.from(await darkRes.arrayBuffer());
-                const isSvg = resolved.frame.type === 'svg';
-                frameData = isSvg
-                    ? await sharp(darkRaw, { density: 72 * os })
-                        .resize(Math.round(resolved.frame.width * os), Math.round(resolved.frame.height * os))
-                        .png().toBuffer()
-                    : await sharp(darkRaw)
-                        .resize(Math.round(resolved.frame.width * os), Math.round(resolved.frame.height * os))
-                        .png().toBuffer();
-                if (geometry.frameRotation !== 0) {
-                    frameData = await sharp(frameData).rotate(geometry.frameRotation).png().toBuffer();
-                }
-            }
-        }
-        catch {
-            // Keep light frame as fallback
-        }
-    }
-    const frameBase64 = frameData ? frameData.toString('base64') : '';
-    const browserWindowBorder = isBrowserDevice
-        ? normalizeBrowserWindowBorder(opts.windowBorder?.width ? opts.windowBorder : resolved.windowBorder, browserDeviceResolutionFactor)
-        : undefined;
-    // Safe area toggles: when hidden, make fills transparent instead of removing them.
-    // This keeps the content area (screenshot placement) at the viewport-matching size.
-    const safeAreaFillColors = {
-        top: opts.showSafeAreaTop ? colors.topColor : 'transparent',
-        bottom: opts.showSafeAreaBottom ? colors.bottomColor : 'transparent',
-        left: opts.showSafeAreaLeft ? colors.leftColor : 'transparent',
-        right: opts.showSafeAreaRight ? colors.rightColor : 'transparent',
-    };
-    // Use shared HTML generator (single source of truth for mockup rendering)
-    // Always pass showSafeArea=true so the content area matches the viewport.
-    const html = generateMockupPage({
-        frameSrc: frameBase64 ? `data:image/png;base64,${frameBase64}` : undefined,
-        frameWidth: geo.frameWidth,
-        frameHeight: geo.frameHeight,
-        frameRotation: 0, // frame already rotated by sharp
-        frameBehindContent: resolved.frameBehindContent,
-        screenRect: geo.screenRect,
-        cornerRadius: (resolved.screen?.cornerRadius ?? 0) * scale,
-        screenBackground: 'transparent',
-        safeArea: resolved.safeArea,
-        scale,
-        showSafeAreaTop: true,
-        showSafeAreaBottom: true,
-        showSafeAreaLeft: true,
-        showSafeAreaRight: true,
-        safeAreaColors: safeAreaFillColors,
-        statusBar: !isBrowserDevice && resolved.statusBar ? {
-            height: resolved.statusBar.height,
-            width: resolved.statusBar.width,
-            type: resolved.statusBar.type ?? 'iphone-dynamic-island',
-            layout: resolved.statusBar.layout,
-        } : undefined,
-        showStatusBar: !isBrowserDevice && opts.showStatusBar,
-        statusBarConfig: { ...opts.statusBar, colorScheme: autoColorScheme },
-        colorScheme: autoColorScheme,
-        showBrowserBar: isBrowserDevice,
-        browserBarConfig: isBrowserDevice ? { ...opts.browserBar, colorScheme: autoColorScheme } : undefined,
-        homeIndicator: resolved.homeIndicator,
-        showHomeIndicator: opts.showHomeIndicator,
-        homeIndicatorColor: hiColor,
-        windowBorder: browserWindowBorder,
-        contentHtml: `<img style="width:100%;height:100%;display:block" src="data:image/png;base64,${screenshotBase64}">`,
-        pixelScale: os,
-    });
-    // Compute final render size — must match the HTML page container (including window border)
-    const wbw = browserWindowBorder?.width ?? 0;
-    const renderW = Math.round((geo.frameWidth + wbw * 2) * os);
-    const renderH = Math.round((geo.frameHeight + wbw * 2) * os);
-    console.log(`[mockup]   renderMockup: ${renderW}x${renderH}, showBrowserBar=${isBrowserDevice}, windowBorderWidth=${wbw}, browserDpr=${browserDeviceResolutionFactor}`);
-    return renderMockup(browserContext, html, renderW, renderH);
-}
-// ── Edge Color Sampling ────────────────────────────────────────────────
-async function sampleEdgeColors(preparedScreenshot) {
-    const meta = await sharp(preparedScreenshot).metadata();
-    const w = meta.width ?? 1;
-    const h = meta.height ?? 1;
-    const [topStats, bottomStats, leftStats, rightStats] = await Promise.all([
-        sharp(preparedScreenshot).extract({ left: 0, top: 0, width: w, height: 1 }).stats(),
-        sharp(preparedScreenshot).extract({ left: 0, top: h - 1, width: w, height: 1 }).stats(),
-        sharp(preparedScreenshot).extract({ left: 0, top: 0, width: 1, height: h }).stats(),
-        sharp(preparedScreenshot).extract({ left: w - 1, top: 0, width: 1, height: h }).stats(),
-    ]);
-    return {
-        topColor: channelsToRgb(topStats.channels),
-        bottomColor: channelsToRgb(bottomStats.channels),
-        leftColor: channelsToRgb(leftStats.channels),
-        rightColor: channelsToRgb(rightStats.channels),
-    };
-}
-function channelsToRgb(channels) {
-    const r = Math.round(channels[0].mean);
-    const g = Math.round(channels[1].mean);
-    const b = Math.round(channels[2].mean);
-    return `rgb(${r},${g},${b})`;
-}
-function isDarkBackground(rgbStr) {
-    const match = rgbStr.match(/\d+/g);
-    if (!match)
-        return false;
-    const [r, g, b] = match.map(Number);
-    return r * 0.299 + g * 0.587 + b * 0.114 < 128;
-}
-function parseLuminance(rgbStr) {
-    const match = rgbStr.match(/\d+/g);
-    if (!match)
-        return 128;
-    const [r, g, b] = match.map(Number);
-    return r * 0.299 + g * 0.587 + b * 0.114;
-}
-// ── Playwright Renderer ────────────────────────────────────────────────
-async function renderMockup(browserContext, html, width, height) {
-    const browser = browserContext.browser();
-    if (!browser)
-        throw new Error('Browser not available for mockup rendering');
-    const renderCtx = await browser.newContext({
-        viewport: { width, height },
-        deviceScaleFactor: 1,
-    });
-    const page = await renderCtx.newPage();
-    try {
-        await page.setContent(html, { waitUntil: 'load' });
-        await page.evaluate(() => document.fonts.ready);
-        await page.waitForTimeout(50);
-        const buffer = await page.screenshot({ type: 'png', fullPage: false, omitBackground: true });
-        return Buffer.from(buffer);
-    }
-    finally {
-        await page.close();
-        await renderCtx.close();
-    }
-}
-//# sourceMappingURL=mockup.js.map

package/dist/mouse-animation.d.ts

@@ -1,46 +0,0 @@
-import type { Page } from 'playwright';
-export interface BezierMoveOptions {
-    /** Total duration in milliseconds. Default: proportional to distance (300–800ms) */
-    durationMs?: number;
-    /** Number of intermediate points. Default: 30 */
-    steps?: number;
-}
-/**
- * Move the mouse from `from` to `to` along a cubic Bezier curve with natural
- * human-like motion: ease-in-out timing, randomized control points, micro-jitter.
- */
-export declare function moveMouse(page: Page, from: {
-    x: number;
-    y: number;
-}, to: {
-    x: number;
-    y: number;
-}, options?: BezierMoveOptions): Promise<void>;
-/**
- * Move the mouse to `target` with Bezier curve animation and click.
- *
- * @param fromCurrent - Optional current mouse position. If omitted, the click
- *   is performed at `target` without a preceding Bezier move (first action).
- */
-export declare function animatedClick(page: Page, target: {
-    x: number;
-    y: number;
-}, fromCurrent?: {
-    x: number;
-    y: number;
-}, options?: BezierMoveOptions): Promise<void>;
-/**
- * Move the mouse to `target` (for hover/highlight actions) without clicking.
- */
-export declare function animatedHover(page: Page, target: {
-    x: number;
-    y: number;
-}, fromCurrent?: {
-    x: number;
-    y: number;
-}, options?: BezierMoveOptions): Promise<void>;
-/**
- * Type text into the currently focused element at a human-like typing speed.
- * Assumes the field is already focused (via a preceding click).
- */
-export declare function humanType(page: Page, text: string): Promise<void>;