autokap 1.0.7 → 1.0.8

package/dist/mockup.js

@@ -2,7 +2,9 @@ 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';
+import { renderStatusBarBuffer } from './status-bar-render.js';
+import { generateBrowserBarSvg } from './browser-bar.js';
+import { computeMockupLayout } from './mockup-html.js';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const DEVICES_DIR = path.join(__dirname, '..', 'assets', 'devices');
@@ -30,6 +32,16 @@ const DEFAULT_MOCKUP_OPTIONS = {
     browserBar: {},
     windowBorder: { color: '', width: 0, radius: 0 },
 };
+/**
+ * Strip anything that is not a valid CSS color token.
+ * Accepts hex (#fff, #aabbcc, #aabbccdd), rgb/rgba/hsl/hsla/oklch functions,
+ * and named CSS colors. Rejects anything else to prevent CSS injection.
+ */
+const CSS_COLOR_RE = /^(#[0-9a-f]{3,8}|(?:rgb|rgba|hsl|hsla|oklch|oklab|lch|lab)\([^)]{1,80}\)|[a-z]{3,24}|transparent)$/i;
+function sanitizeCssColor(value) {
+    const trimmed = value.trim();
+    return CSS_COLOR_RE.test(trimmed) ? trimmed : 'transparent';
+}
 const CONFIG_CACHE_TTL_MS = 5 * 60 * 1000; // 5 minutes
 let configCache = null;
 // In-memory cache for downloaded frame asset Buffers
@@ -39,13 +51,17 @@ export function invalidateDeviceConfigCache() {
     configCache = null;
     frameBufferCache.clear();
 }
-function resolveBrowserOrientation(config, requestedOrientation) {
+function resolveSupportedOrientation(config, requestedOrientation) {
     const supported = config.supportedOrientations ?? [];
     if (supported.length > 0) {
-        return supported[0] ?? requestedOrientation;
+        return supported.includes(requestedOrientation)
+            ? requestedOrientation
+            : (supported[0] ?? requestedOrientation);
     }
     const available = Object.keys(config.orientations ?? {});
-    return available[0] ?? config.frameOrientation ?? requestedOrientation;
+    return available.includes(requestedOrientation)
+        ? requestedOrientation
+        : (available[0] ?? config.frameOrientation ?? requestedOrientation);
 }
 function normalizeBrowserSafeAreaTop(configuredTop, dpr, fallbackLogicalTop) {
     const rawTop = configuredTop ?? 0;
@@ -86,6 +102,7 @@ function resolveOrientationConfig(config, requestedOrientation) {
     if (orientationData) {
         return {
             screen: orientationData.screen,
+            viewport: orientationData.viewport,
             safeArea: orientationData.safeArea ?? { top: 0, bottom: 0 },
             statusBar: orientationData.statusBar,
             homeIndicator: orientationData.homeIndicator,
@@ -94,6 +111,7 @@ function resolveOrientationConfig(config, requestedOrientation) {
             frameDarkUrl: orientationData.frameDarkUrl,
             windowBorder: orientationData.windowBorder,
             browserBarZones: orientationData.browserBarZones,
+            browserStyle: orientationData.browserStyle,
             frameRotation: orientationData.frameRotation ?? 0,
             needsRotation: false,
             disableOverlays: false,
@@ -106,14 +124,20 @@ function resolveOrientationConfig(config, requestedOrientation) {
     const disableOverlays = config.category === 'phone' && needsRotation;
     return {
         screen: config.screen ?? { logicalWidth: 0, logicalHeight: 0, scale: 1, cornerRadius: 0 },
+        viewport: config.viewport,
         safeArea: config.safeArea ?? { top: 0, bottom: 0 },
         statusBar: config.statusBar,
         homeIndicator: config.homeIndicator,
         frame: config.frame,
-        frameRotation: 0,
+        frameUrl: config._rowFrameUrl,
+        frameDarkUrl: config.frameDarkUrl,
+        windowBorder: config.windowBorder,
+        browserBarZones: config.browserBarZones,
+        browserStyle: config.browserStyle,
+        frameRotation: config.frameRotation ?? 0,
         needsRotation,
         disableOverlays,
-        frameBehindContent: false,
+        frameBehindContent: config.frameBehindContent ?? false,
     };
 }
 async function loadDeviceConfigs() {
@@ -124,7 +148,7 @@ async function loadDeviceConfigs() {
     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`, {
+            const res = await fetch(`${supabaseUrl}/rest/v1/device_mockups?is_active=eq.true&order=category.asc,name.asc&select=id,slug,config,frame_url`, {
                 headers: {
                     apikey: supabaseServiceKey,
                     Authorization: `Bearer ${supabaseServiceKey}`,
@@ -138,6 +162,9 @@ async function loadDeviceConfigs() {
                     if (row.frame_url)
                         config._rowFrameUrl = row.frame_url;
                     configs.set(row.id, config);
+                    if (row.slug) {
+                        configs.set(row.slug, config);
+                    }
                 }
                 configCache = { configs, expiresAt: Date.now() + CONFIG_CACHE_TTL_MS };
                 return configs;
@@ -252,15 +279,31 @@ export async function resolveDeviceFrameDescriptor(id, options) {
     const config = configs.get(id);
     if (!config)
         return null;
-    const orientation = options?.orientation ?? config.frameOrientation ?? 'portrait';
+    // Normalize against supported orientations so stale extra configs in Supabase
+    // do not override landscape-only desktop/tablet frames.
+    const requestedOrientation = options?.orientation ?? config.frameOrientation ?? 'portrait';
+    const orientation = resolveSupportedOrientation(config, requestedOrientation);
     const resolved = resolveOrientationConfig(config, orientation);
     const geometry = computeResolvedFrameGeometry(resolved);
+    // When auto-rotation is applied (legacy device with needsRotation), the frame
+    // geometry is already correctly rotated by computeResolvedFrameGeometry(), but
+    // screen logical dimensions still reflect the native orientation. Swap them so
+    // that consumers (e.g. resolveDeviceViewport) compute the correct viewport.
+    const screen = resolved.needsRotation
+        ? {
+            logicalWidth: resolved.screen.logicalHeight,
+            logicalHeight: resolved.screen.logicalWidth,
+            scale: resolved.screen.scale,
+            cornerRadius: resolved.screen.cornerRadius,
+        }
+        : resolved.screen;
     return {
         id: config.id,
         name: config.name,
         category: config.category,
         orientation,
-        screen: resolved.screen,
+        viewport: resolved.viewport,
+        screen,
         safeArea: resolved.safeArea,
         statusBar: resolved.statusBar,
         homeIndicator: resolved.homeIndicator,
@@ -276,6 +319,7 @@ export async function resolveDeviceFrameDescriptor(id, options) {
         screenRect: geometry.screenRect,
         frameRotation: geometry.frameRotation,
         frameBehindContent: resolved.frameBehindContent,
+        browserStyle: resolved.browserStyle,
         disableOverlays: resolved.disableOverlays,
     };
 }
@@ -307,6 +351,33 @@ export async function rasterizeDeviceFrame(descriptor, outputScale) {
     }
     return rendered;
 }
+async function rasterizeFrameAssetBuffer(options) {
+    const sourceRasterWidth = Math.max(1, Math.round(options.sourceWidth * options.outputScale));
+    const sourceRasterHeight = Math.max(1, Math.round(options.sourceHeight * options.outputScale));
+    const targetRasterWidth = Math.max(1, Math.round(options.targetWidth * options.outputScale));
+    const targetRasterHeight = Math.max(1, Math.round(options.targetHeight * options.outputScale));
+    const svgDensity = Math.max(72, Math.round(72 * options.outputScale));
+    let rendered = options.frameType === "svg"
+        ? await sharp(options.rawFrame, { density: svgDensity })
+            .resize(sourceRasterWidth, sourceRasterHeight)
+            .png()
+            .toBuffer()
+        : await sharp(options.rawFrame)
+            .resize(sourceRasterWidth, sourceRasterHeight)
+            .png()
+            .toBuffer();
+    if (options.frameRotation !== 0) {
+        rendered = await sharp(rendered).rotate(options.frameRotation).png().toBuffer();
+    }
+    const renderedMeta = await sharp(rendered).metadata();
+    if (renderedMeta.width !== targetRasterWidth || renderedMeta.height !== targetRasterHeight) {
+        rendered = await sharp(rendered)
+            .resize(targetRasterWidth, targetRasterHeight)
+            .png()
+            .toBuffer();
+    }
+    return rendered;
+}
 // ── Public API ─────────────────────────────────────────────────────────
 export async function getDeviceFrames() {
     const configs = await loadDeviceConfigs();
@@ -321,20 +392,75 @@ export async function getDeviceFrame(id) {
         return undefined;
     return { id: c.id, name: c.name, category: c.category, viewport: c.viewport };
 }
-export async function applyDeviceFrame(screenshot, deviceId, browserContext, options) {
+// ── Sharp Compositing Helpers ──────────────────────────────────────────
+/** Rasterize an SVG string to a PNG buffer using resvg-js.
+ *  Resolves external image references (e.g. favicon URLs) before rendering. */
+async function rasterizeSvg(svg, width) {
+    const { Resvg } = await import('@resvg/resvg-js');
+    const opts = {
+        fitTo: { mode: 'width', value: width },
+    };
+    const resvg = new Resvg(svg, opts);
+    // Resolve external image references (e.g. <image href="https://..."/>)
+    const imagesToLoad = resvg.imagesToResolve();
+    for (const href of imagesToLoad) {
+        if (href.startsWith('http://') || href.startsWith('https://')) {
+            try {
+                const res = await fetch(href);
+                if (res.ok) {
+                    resvg.resolveImage(href, Buffer.from(await res.arrayBuffer()));
+                }
+            }
+            catch {
+                // Skip unresolvable images — fallback globe icon is already inline
+            }
+        }
+    }
+    const rendered = resvg.render();
+    return Buffer.from(rendered.asPng());
+}
+/** Create a solid-color PNG rectangle. */
+async function createColorRect(width, height, color) {
+    const rgba = parseCssColor(color);
+    return sharp({
+        create: { width: Math.max(1, width), height: Math.max(1, height), channels: 4, background: rgba },
+    }).png().toBuffer();
+}
+/** Parse a CSS color string (#hex or rgb()) into sharp-compatible RGBA. */
+function parseCssColor(color) {
+    if (color.startsWith('#')) {
+        const hex = color.slice(1);
+        if (hex.length === 3) {
+            return { r: parseInt(hex[0] + hex[0], 16), g: parseInt(hex[1] + hex[1], 16), b: parseInt(hex[2] + hex[2], 16), alpha: 1 };
+        }
+        if (hex.length === 6) {
+            return { r: parseInt(hex.slice(0, 2), 16), g: parseInt(hex.slice(2, 4), 16), b: parseInt(hex.slice(4, 6), 16), alpha: 1 };
+        }
+        if (hex.length === 8) {
+            return { r: parseInt(hex.slice(0, 2), 16), g: parseInt(hex.slice(2, 4), 16), b: parseInt(hex.slice(4, 6), 16), alpha: parseInt(hex.slice(6, 8), 16) / 255 };
+        }
+    }
+    const rgbMatch = color.match(/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/);
+    if (rgbMatch) {
+        return { r: +rgbMatch[1], g: +rgbMatch[2], b: +rgbMatch[3], alpha: 1 };
+    }
+    const rgbaMatch = color.match(/^rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*([\d.]+)\s*\)$/);
+    if (rgbaMatch) {
+        return { r: +rgbaMatch[1], g: +rgbaMatch[2], b: +rgbaMatch[3], alpha: +rgbaMatch[4] };
+    }
+    // Fallback: transparent
+    return { r: 0, g: 0, b: 0, alpha: 0 };
+}
+export async function applyDeviceFrame(screenshot, deviceId, 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;
+    // Normalize against supported orientations so stale extra configs in Supabase
+    // do not override landscape-only desktop/tablet/browser frames.
+    const effectiveOrientation = resolveSupportedOrientation(config, requestedOrientation);
     const resolved = resolveOrientationConfig(config, effectiveOrientation);
     // Disable overlays if rotation requires it (legacy phone rotation)
     if (resolved.disableOverlays) {
@@ -346,10 +472,8 @@ export async function applyDeviceFrame(screenshot, deviceId, browserContext, opt
     }
     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));
+    const os = Math.max(0.5, Math.min(4, opts.outputScale));
+    const geometry = computeResolvedFrameGeometry(resolved);
     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));
@@ -359,56 +483,29 @@ export async function applyDeviceFrame(screenshot, deviceId, browserContext, opt
     // 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
+    // For frameless browser devices: use device config logical dimensions as reference.
+    // The screenshot is resized to fit the content area (sharp fit:'fill').
+    // This matches how the Studio client renders frameless browsers.
+    // Safari uses a 52px visible toolbar (cropped from the 88px asset);
+    // Chrome uses a two-row 86px toolbar.
+    const BROWSER_BAR_HEIGHT = resolved.browserStyle === 'safari' ? 52 : 86;
     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);
+        const logicalH = resolved.screen?.logicalHeight || 900;
+        // Normalize safe area top for Chrome toolbar
+        const safeAreaTop = normalizeBrowserSafeAreaTop(resolved.safeArea.top, 1, // logical pixels — pixelScale (os) handles final scaling
+        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}`);
+        // Frame = device config logical dimensions (not screenshot dimensions)
+        geo.frameWidth = logicalW;
+        geo.frameHeight = logicalH;
+        geo.screenRect = { x: 0, y: 0, width: logicalW, height: logicalH };
+        console.log(`[mockup]   frameless browser: logicalW=${logicalW}, logicalH=${logicalH}, os=${os}, geo=${geo.frameWidth}x${geo.frameHeight}`);
     }
     else if (!hasFrame && geo.frameWidth === 0 && geo.frameHeight === 0) {
         // Non-browser frameless fallback
@@ -417,9 +514,18 @@ export async function applyDeviceFrame(screenshot, deviceId, browserContext, opt
         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();
+    if (hasFrame) {
+        const rawFrame = await loadFrameAsset(config, resolved);
+        frameData = await rasterizeFrameAssetBuffer({
+            rawFrame,
+            frameType: resolved.frame.type,
+            sourceWidth: resolved.frame.width,
+            sourceHeight: resolved.frame.height,
+            targetWidth: geo.frameWidth,
+            targetHeight: geo.frameHeight,
+            frameRotation: geometry.frameRotation,
+            outputScale: os,
+        });
     }
     // Always compute content area with all safe areas visible — this matches
     // the browser viewport the screenshot was captured at.
@@ -446,25 +552,36 @@ export async function applyDeviceFrame(screenshot, deviceId, browserContext, opt
     // 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 physicalContentW = Math.round(contentW * os);
+    const physicalContentH = Math.round(contentH * os);
+    console.log(`[mockup]   resize target: ${physicalContentW}x${physicalContentH}`);
+    // Sample edge colors from the ORIGINAL screenshot before resize.
+    // Resizing (especially large downscales with fit:'fill') averages edge pixels,
+    // producing grayish artifacts that make safe area fills look darker than intended.
+    const colors = await sampleEdgeColors(screenshot);
+    // Resize screenshot to physical content dimensions (contentW*os × contentH*os).
+    // The mockup HTML container is sized at logical dimensions (contentW × contentH)
+    // with the <img> at width:100%;height:100%. Playwright renders the mockup at
+    // deviceScaleFactor=os, so the physical-resolution image maps 1:1 to output pixels.
     const screenshotForMockup = await sharp(screenshot)
-        .resize(Math.round(contentW * os), Math.round(contentH * os), { fit: 'fill' })
+        .resize(physicalContentW, physicalContentH, { 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;
+        colors.topColor = sanitizeCssColor(opts.safeAreaTopColor);
     if (opts.safeAreaBottomColor)
-        colors.bottomColor = opts.safeAreaBottomColor;
+        colors.bottomColor = sanitizeCssColor(opts.safeAreaBottomColor);
     if (opts.safeAreaLeftColor)
-        colors.leftColor = opts.safeAreaLeftColor;
+        colors.leftColor = sanitizeCssColor(opts.safeAreaLeftColor);
     if (opts.safeAreaRightColor)
-        colors.rightColor = opts.safeAreaRightColor;
-    // Determine color scheme from edge colors
-    const autoColorScheme = isDarkBackground(colors.topColor) ? 'dark' : 'light';
+        colors.rightColor = sanitizeCssColor(opts.safeAreaRightColor);
+    console.log(`[mockup]   sampled colors: top=${colors.topColor} bottom=${colors.bottomColor} left=${colors.leftColor} right=${colors.rightColor}`);
+    // Determine color scheme: use explicit override if provided, otherwise auto-detect from edge colors.
+    // Laptops (MacBook) always use dark menu bar (white text on black background).
+    const isLaptop = config.category === 'laptop';
+    const autoColorScheme = isLaptop
+        ? 'dark'
+        : (opts.colorScheme ?? (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
@@ -473,96 +590,262 @@ export async function applyDeviceFrame(screenshot, deviceId, browserContext, opt
             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();
-                }
+                frameData = await rasterizeFrameAssetBuffer({
+                    rawFrame: darkRaw,
+                    frameType: resolved.frame.type,
+                    sourceWidth: resolved.frame.width,
+                    sourceHeight: resolved.frame.height,
+                    targetWidth: geo.frameWidth,
+                    targetHeight: geo.frameHeight,
+                    frameRotation: geometry.frameRotation,
+                    outputScale: os,
+                });
             }
         }
         catch {
             // Keep light frame as fallback
         }
     }
-    const frameBase64 = frameData ? frameData.toString('base64') : '';
+    const rawWindowBorder = opts.windowBorder?.width ? opts.windowBorder : resolved.windowBorder;
     const browserWindowBorder = isBrowserDevice
-        ? normalizeBrowserWindowBorder(opts.windowBorder?.width ? opts.windowBorder : resolved.windowBorder, browserDeviceResolutionFactor)
+        ? normalizeBrowserWindowBorder(rawWindowBorder ? { ...rawWindowBorder, color: sanitizeCssColor(rawWindowBorder.color) } : rawWindowBorder, 1)
         : 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',
+        top: isLaptop ? '#000000' : (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);
+    const renderW = Math.round(geo.frameWidth);
+    const renderH = Math.round(geo.frameHeight);
+    const cornerRadius = (resolved.screen?.cornerRadius ?? 0) * scale;
+    console.log(`[mockup]   composeMockup: ${renderW}x${renderH} @${os}x, showBrowserBar=${isBrowserDevice}, windowBorderWidth=${wbw}`);
+    // ── Sharp compositing — layer-by-layer mockup assembly ──
+    // All dimensions in physical pixels (logical * os).
+    const pw = Math.round(renderW * os);
+    const ph = Math.round(renderH * os);
+    const p = (v) => Math.round(v * os);
+    // Browser window border is painted as an overlay within the existing geometry.
+    // It must not change the mockup's intrinsic size or shift the screen rect.
+    const sr = { x: geo.screenRect.x, y: geo.screenRect.y, width: geo.screenRect.width, height: geo.screenRect.height };
+    const compositeInputs = [];
+    // z:0 — Frame behind content
+    if (frameData && resolved.frameBehindContent) {
+        compositeInputs.push({ input: frameData, left: 0, top: 0 });
+    }
+    // z:1 — Screen background with rounded corners + safe area fills
+    // Build the screen content as a sub-composition with rounded-corner mask
+    const screenW = p(sr.width);
+    const screenH = p(sr.height);
+    if (screenW > 0 && screenH > 0) {
+        const screenLayers = [];
+        // Safe area fill rectangles (relative to screen rect origin)
+        const showTop = resolved.safeArea.top > 0;
+        const showBottom = resolved.safeArea.bottom > 0;
+        const showLeft = (resolved.safeArea.left ?? 0) > 0;
+        const showRight = (resolved.safeArea.right ?? 0) > 0;
+        const topPx = showTop ? resolved.safeArea.top * scale : 0;
+        const bottomPx = showBottom ? resolved.safeArea.bottom * scale : 0;
+        const leftPx = showLeft ? (resolved.safeArea.left ?? 0) * scale : 0;
+        const rightPx = showRight ? (resolved.safeArea.right ?? 0) * scale : 0;
+        if (showLeft && safeAreaFillColors.left !== 'transparent') {
+            screenLayers.push({
+                input: await createColorRect(p(leftPx), screenH, safeAreaFillColors.left),
+                left: 0, top: 0,
+            });
+        }
+        if (showRight && safeAreaFillColors.right !== 'transparent') {
+            screenLayers.push({
+                input: await createColorRect(p(rightPx), screenH, safeAreaFillColors.right),
+                left: screenW - p(rightPx), top: 0,
+            });
+        }
+        if (showTop && safeAreaFillColors.top !== 'transparent') {
+            screenLayers.push({
+                input: await createColorRect(screenW - p(leftPx) - p(rightPx), p(topPx), safeAreaFillColors.top),
+                left: p(leftPx), top: 0,
+            });
+        }
+        if (showBottom && safeAreaFillColors.bottom !== 'transparent') {
+            screenLayers.push({
+                input: await createColorRect(screenW - p(leftPx) - p(rightPx), p(bottomPx), safeAreaFillColors.bottom),
+                left: p(leftPx), top: screenH - p(bottomPx),
+            });
+        }
+        // z:2 — Screenshot content
+        screenLayers.push({
+            input: screenshotForMockup,
+            left: p(layout.contentArea.x - sr.x),
+            top: p(layout.contentArea.y - sr.y),
+        });
+        // z:4 — Home indicator
+        if (opts.showHomeIndicator && resolved.homeIndicator && resolved.safeArea.bottom > 0) {
+            const hi = resolved.homeIndicator;
+            const hiW = p(hi.width * scale);
+            const hiH = p(hi.height * scale);
+            const hiR = p(hi.cornerRadius * scale);
+            const hiLeft = p((sr.width - hi.width * scale) / 2);
+            const hiTop = p(sr.height - hi.bottomOffset * scale - hi.height * scale);
+            const hiSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="${hiW}" height="${hiH}"><rect width="${hiW}" height="${hiH}" rx="${hiR}" fill="${hiColor}"/></svg>`;
+            screenLayers.push({
+                input: await rasterizeSvg(hiSvg, hiW),
+                left: hiLeft, top: hiTop,
+            });
+        }
+        // z:5 — Status bar or Browser bar
+        // Status bar uses satori (CSS flexbox engine) for pixel-perfect parity
+        // with the client HTML rendering. Generated at logical dimensions, then
+        // rasterized at physical pixel width.
+        const showStatusBar = !isBrowserDevice && (isLaptop || opts.showStatusBar);
+        if (showStatusBar && resolved.statusBar && resolved.safeArea.top > 0) {
+            const sbW_logical = Math.round(sr.width);
+            const sbH_logical = Math.round(resolved.safeArea.top * scale);
+            const sbPng = await renderStatusBarBuffer({
+                config: { ...opts.statusBar, colorScheme: autoColorScheme },
+                width: sbW_logical,
+                height: sbH_logical,
+                scale,
+                deviceType: resolved.statusBar.type ?? 'iphone-dynamic-island',
+                layout: resolved.statusBar.layout,
+            }, screenW);
+            screenLayers.push({ input: sbPng, left: 0, top: 0 });
+        }
+        if (isBrowserDevice && resolved.safeArea.top > 0) {
+            // Browser bar uses viewBox-based scaling internally, so it can accept
+            // either logical or physical dimensions. We pass physical for consistency
+            // with the compositing canvas.
+            const bbW = screenW;
+            const bbH = p(resolved.safeArea.top * scale);
+            const bbSvg = generateBrowserBarSvg({
+                config: {
+                    ...opts.browserBar,
+                    colorScheme: autoColorScheme,
+                    style: resolved.browserStyle ?? 'chrome',
+                },
+                width: bbW,
+                height: bbH,
+                scale,
+            });
+            screenLayers.push({
+                input: await rasterizeSvg(bbSvg, bbW),
+                left: 0, top: 0,
+            });
+        }
+        // Compose screen content, then apply rounded-corner mask
+        let screenBuffer = await sharp({
+            create: { width: screenW, height: screenH, channels: 4, background: { r: 0, g: 0, b: 0, alpha: 0 } },
+        }).composite(screenLayers).png().toBuffer();
+        // Apply rounded corner mask if radius > 0
+        if (cornerRadius > 0) {
+            const cr = p(cornerRadius);
+            const borderRadius = isLaptop ? `${cr},${cr},0,0` : `${cr}`;
+            const maskSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="${screenW}" height="${screenH}"><rect width="${screenW}" height="${screenH}" rx="${borderRadius.split(',')[0]}" ry="${borderRadius.split(',')[0]}" fill="white"/></svg>`;
+            const maskBuffer = await rasterizeSvg(maskSvg, screenW);
+            // For laptop: only top corners are rounded
+            let finalMask;
+            if (isLaptop) {
+                const laptopMaskSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="${screenW}" height="${screenH}">
+          <path d="M${cr},0 L${screenW - cr},0 Q${screenW},0 ${screenW},${cr} L${screenW},${screenH} L0,${screenH} L0,${cr} Q0,0 ${cr},0 Z" fill="white"/>
+        </svg>`;
+                finalMask = await rasterizeSvg(laptopMaskSvg, screenW);
+            }
+            else {
+                finalMask = maskBuffer;
+            }
+            // Apply mask as alpha channel
+            screenBuffer = await sharp(screenBuffer)
+                .composite([{ input: finalMask, blend: 'dest-in' }])
+                .png().toBuffer();
+        }
+        compositeInputs.push({ input: screenBuffer, left: p(sr.x), top: p(sr.y) });
+    }
+    // z:8 — Frame on top (when !frameBehindContent)
+    if (frameData && !resolved.frameBehindContent) {
+        compositeInputs.push({ input: frameData, left: 0, top: 0 });
+    }
+    // z:9 — Window border (browser frameless)
+    if (browserWindowBorder && browserWindowBorder.width > 0) {
+        const bw = p(browserWindowBorder.width);
+        const br = p(browserWindowBorder.radius ?? 0);
+        const bc = sanitizeCssColor(browserWindowBorder.color);
+        const borderSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="${pw}" height="${ph}">
+      <rect x="${bw / 2}" y="${bw / 2}" width="${pw - bw}" height="${ph - bw}" rx="${br}" ry="${br}" fill="none" stroke="${bc}" stroke-width="${bw}"/>
+    </svg>`;
+        compositeInputs.push({
+            input: await rasterizeSvg(borderSvg, pw),
+            left: 0, top: 0,
+        });
+    }
+    // Final composition
+    return sharp({
+        create: { width: pw, height: ph, channels: 4, background: { r: 0, g: 0, b: 0, alpha: 0 } },
+    }).composite(compositeInputs).png().toBuffer();
 }
 // ── Edge Color Sampling ────────────────────────────────────────────────
-async function sampleEdgeColors(preparedScreenshot) {
-    const meta = await sharp(preparedScreenshot).metadata();
+async function sampleEdgeColors(screenshot) {
+    const meta = await sharp(screenshot).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(),
+    // Sample a centered strip slightly inset from each edge:
+    // - Center third horizontally (for top/bottom) or vertically (for left/right)
+    //   to avoid scrollbars and corner artefacts
+    // - Inset 2px from the edge to skip viewport border artefacts
+    // - Use MEDIAN instead of MEAN to ignore dark foreground elements (text, icons)
+    //   that drag the average down and produce falsely darker safe area fills
+    const inset = Math.min(2, Math.floor(Math.min(w, h) / 10));
+    const stripH = Math.max(1, Math.min(6, Math.floor(h / 20)));
+    const stripW = Math.max(1, Math.min(6, Math.floor(w / 20)));
+    const cX = Math.floor(w / 3);
+    const cW = Math.max(1, Math.floor(w / 3));
+    const cY = Math.floor(h / 3);
+    const cH = Math.max(1, Math.floor(h / 3));
+    const [topRgb, bottomRgb, leftRgb, rightRgb] = await Promise.all([
+        medianColor(screenshot, { left: cX, top: inset, width: cW, height: stripH }),
+        medianColor(screenshot, { left: cX, top: h - inset - stripH, width: cW, height: stripH }),
+        medianColor(screenshot, { left: inset, top: cY, width: stripW, height: cH }),
+        medianColor(screenshot, { left: w - inset - stripW, top: cY, width: stripW, height: cH }),
     ]);
     return {
-        topColor: channelsToRgb(topStats.channels),
-        bottomColor: channelsToRgb(bottomStats.channels),
-        leftColor: channelsToRgb(leftStats.channels),
-        rightColor: channelsToRgb(rightStats.channels),
+        topColor: snapEdgeColor(topRgb),
+        bottomColor: snapEdgeColor(bottomRgb),
+        leftColor: snapEdgeColor(leftRgb),
+        rightColor: snapEdgeColor(rightRgb),
     };
 }
+/** Extract the median RGB color from a region — robust to dark text/icons on light backgrounds */
+async function medianColor(buf, region) {
+    const { data, info } = await sharp(buf)
+        .extract(region)
+        .removeAlpha()
+        .raw()
+        .toBuffer({ resolveWithObject: true });
+    const n = info.width * info.height;
+    const r = new Array(n);
+    const g = new Array(n);
+    const b = new Array(n);
+    for (let i = 0; i < n; i++) {
+        r[i] = data[i * 3];
+        g[i] = data[i * 3 + 1];
+        b[i] = data[i * 3 + 2];
+    }
+    r.sort((a, b) => a - b);
+    g.sort((a, b) => a - b);
+    b.sort((a, b) => a - b);
+    const mid = Math.floor(n / 2);
+    return `rgb(${r[mid]},${g[mid]},${b[mid]})`;
+}
+/** Snap near-white and near-black edge colors to pure values */
+function snapEdgeColor(rgb) {
+    const lum = parseLuminance(rgb);
+    if (lum > 240)
+        return 'rgb(255,255,255)';
+    if (lum < 15)
+        return 'rgb(0,0,0)';
+    return rgb;
+}
 function channelsToRgb(channels) {
     const r = Math.round(channels[0].mean);
     const g = Math.round(channels[1].mean);
@@ -583,26 +866,4 @@ function parseLuminance(rgbStr) {
     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