autokap 1.0.6 → 1.0.7

package/dist/mockup.js

@@ -0,0 +1,608 @@
+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');
+function getSupabaseMockupConfig() {
+    return {
+        url: process.env.SUPABASE_URL ?? process.env.NEXT_PUBLIC_SUPABASE_URL,
+        serviceKey: 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
+    const { url: supabaseUrl, serviceKey: supabaseServiceKey } = getSupabaseMockupConfig();
+    if (supabaseUrl && supabaseServiceKey) {
+        try {
+            const res = await fetch(`${supabaseUrl}/rest/v1/device_mockups?is_active=eq.true&order=category.asc,name.asc&select=id,config,frame_url`, {
+                headers: {
+                    apikey: supabaseServiceKey,
+                    Authorization: `Bearer ${supabaseServiceKey}`,
+                },
+            });
+            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

@@ -0,0 +1,46 @@
+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>;