autokap 1.0.7 → 1.0.8

package/dist/mockup-html.js

@@ -14,7 +14,7 @@
  *   6  — overlay slot (dock on client)
  *   8  — frame image (when !frameBehindContent)
  */
-import { generateStatusBarHtml } from './status-bar.js';
+import { generateStatusBarHtml, STATUS_BAR_FONT_CSS } from './status-bar.js';
 import { generateBrowserBarHtml } from './browser-bar.js';
 // ── Layout Computation ──────────────────────────────────────────────────
 /**
@@ -41,21 +41,18 @@ export function computeMockupLayout(params) {
     const screenBorderRadius = isLaptop
         ? `${screenCornerRadius}px ${screenCornerRadius}px 0 0`
         : `${screenCornerRadius}px`;
-    // Expand container for window border (browser frameless mockups)
-    const finalContainerWidth = containerWidth + borderW * 2;
-    const finalContainerHeight = containerHeight + borderW * 2;
     return {
-        containerWidth: finalContainerWidth,
-        containerHeight: finalContainerHeight,
+        containerWidth,
+        containerHeight,
         contentArea: {
-            x: screenRect.x + leftPx + borderW,
-            y: screenRect.y + topPx + borderW,
+            x: screenRect.x + leftPx,
+            y: screenRect.y + topPx,
             width: contentW,
             height: contentH,
         },
         screenArea: {
-            x: screenRect.x + borderW,
-            y: screenRect.y + borderW,
+            x: screenRect.x,
+            y: screenRect.y,
             width: screenRect.width,
             height: screenRect.height,
         },
@@ -74,12 +71,14 @@ export function computeMockupLayout(params) {
  * inside a position:relative container of the correct dimensions.
  */
 export function generateMockupHtml(params) {
+    return generateMockupHtmlInternal(params, { includeInlineStatusBarFontStyles: true });
+}
+function generateMockupHtmlInternal(params, options) {
     const { frameSrc, frameWidth, frameHeight, frameRotation = 0, frameBehindContent = false, screenRect, cornerRadius, screenBackground = 'transparent', isLaptop = false, safeArea, scale, showSafeAreaTop = true, showSafeAreaBottom = true, showSafeAreaLeft = true, showSafeAreaRight = true, safeAreaColors, statusBar, showStatusBar = true, statusBarConfig, colorScheme = 'light', showBrowserBar = false, browserBarConfig, homeIndicator, showHomeIndicator = true, homeIndicatorColor, windowBorder, contentHtml = '', overlayHtml = '', pixelScale = 1, } = params;
     const px = (v) => Math.round(v * pixelScale);
     const layout = computeMockupLayout(params);
     const borderW = windowBorder?.width ?? 0;
-    // Offset screen rect by border width so everything shifts inward
-    const sr = { x: screenRect.x + borderW, y: screenRect.y + borderW, width: screenRect.width, height: screenRect.height };
+    const sr = { x: screenRect.x, y: screenRect.y, width: screenRect.width, height: screenRect.height };
     const ca = layout.contentArea;
     // Safe area visibility
     const showTop = showSafeAreaTop && safeArea.top > 0;
@@ -118,9 +117,15 @@ export function generateMockupHtml(params) {
     // ── Content (z:2) ──
     let contentSlotHtml = '';
     if (contentHtml) {
-        const contentBorderRadius = topPx > 0
-            ? `0 0 ${px(cornerPx)}px ${px(cornerPx)}px`
-            : screenBorderRadiusCss;
+        // Content area border-radius: only round corners where the content
+        // touches the screen edge (no safe area on that side).
+        const contentBorderRadius = topPx > 0 && bottomPx > 0
+            ? '0' // Content doesn't touch any rounded edge
+            : topPx > 0
+                ? (isLaptop ? '0' : `0 0 ${px(cornerPx)}px ${px(cornerPx)}px`)
+                : bottomPx > 0
+                    ? `${px(cornerPx)}px ${px(cornerPx)}px 0 0`
+                    : screenBorderRadiusCss;
         contentSlotHtml = `<div style="position:absolute;left:${px(ca.x)}px;top:${px(ca.y)}px;width:${px(ca.width)}px;height:${px(ca.height)}px;z-index:2;overflow:hidden;border-radius:${contentBorderRadius}">${contentHtml}</div>`;
     }
     // ── Home indicator (z:4) ──
@@ -158,19 +163,22 @@ export function generateMockupHtml(params) {
             scale,
             deviceType: statusBar.type,
             layout: statusBar.layout,
+            includeFontStyles: options.includeInlineStatusBarFontStyles,
         });
-        // Status bar needs its own border-radius clipping (top corners only)
-        const sbBorderRadius = `${px(cornerPx)}px ${px(cornerPx)}px 0 0`;
         if (pixelScale === 1) {
             // Client: render at 1× (status bar HTML handles its own internal scaling)
-            statusBarHtml = `<div style="position:absolute;left:${px(sr.x)}px;top:${px(sr.y)}px;width:${px(sr.width)}px;height:${px(safeArea.top * scale)}px;overflow:hidden;border-radius:${sbBorderRadius};z-index:5;pointer-events:none">${sbInnerHtml}</div>`;
+            const sbBR = `${px(cornerPx)}px ${px(cornerPx)}px 0 0`;
+            statusBarHtml = `<div style="position:absolute;left:${px(sr.x)}px;top:${px(sr.y)}px;width:${px(sr.width)}px;height:${px(safeArea.top * scale)}px;overflow:hidden;border-radius:${sbBR};z-index:5;pointer-events:none">${sbInnerHtml}</div>`;
         }
         else {
-            // Server: render at pixelScale× with transform
-            statusBarHtml = `<div style="position:absolute;left:${px(sr.x)}px;top:${px(sr.y)}px;width:${px(sr.width)}px;height:${px(sbH)}px;overflow:hidden;border-radius:${sbBorderRadius};z-index:5;transform:scale(${pixelScale});transform-origin:top left">${sbInnerHtml}</div>`;
+            // Server: inner content is at 1× dimensions → use raw (unscaled) container
+            // and let transform:scale(pixelScale) bring it to final pixel size.
+            // Position (left/top) stays px-scaled since it's in the already-scaled page.
+            const sbBR = `${cornerPx}px ${cornerPx}px 0 0`;
+            statusBarHtml = `<div style="position:absolute;left:${px(sr.x)}px;top:${px(sr.y)}px;width:${sr.width}px;height:${sbH}px;overflow:hidden;border-radius:${sbBR};z-index:5;transform:scale(${pixelScale});transform-origin:top left">${sbInnerHtml}</div>`;
         }
     }
-    // ── Browser bar (z:5) — full Chrome toolbar, same pattern as status bar ──
+    // ── Browser bar (z:5) — coded Chrome/Safari toolbar, same pattern as status bar ──
     let browserBarHtml = '';
     if (showBrowserBar && safeArea.top > 0) {
         const bbH = safeArea.top * scale;
@@ -218,15 +226,14 @@ export function generateMockupHtml(params) {
         }
     }
     const frameHtml = frameSrc
-        ? `<img src="${frameSrc}" alt="Device frame" style="position:absolute;top:${px(borderW)}px;left:${px(borderW)}px;width:${px(frameWidth)}px;height:${px(frameHeight)}px;max-width:none;pointer-events:none;z-index:${frameZ};${frameTransform}${frameMargins}" draggable="false">`
+        ? `<img src="${frameSrc}" alt="Device frame" style="position:absolute;top:0;left:0;width:${px(frameWidth)}px;height:${px(frameHeight)}px;max-width:none;pointer-events:none;z-index:${frameZ};${frameTransform}${frameMargins}" draggable="false">`
         : '';
     // ── Window border (z:9, outside the screen rect) ──
     let windowBorderHtml = '';
     if (windowBorder && windowBorder.width > 0) {
         const bw = px(windowBorder.width);
         const br = px(windowBorder.radius);
-        // Border wraps around the screen rect — container was expanded by borderW on each side
-        windowBorderHtml = `<div style="position:absolute;left:0;top:0;width:${px(sr.width + borderW * 2)}px;height:${px(sr.height + borderW * 2)}px;border:${bw}px solid ${windowBorder.color};border-radius:${br}px;pointer-events:none;z-index:9;box-sizing:border-box"></div>`;
+        windowBorderHtml = `<div style="position:absolute;left:0;top:0;width:${px(sr.width)}px;height:${px(sr.height)}px;border:${bw}px solid ${windowBorder.color};border-radius:${br}px;pointer-events:none;z-index:9;box-sizing:border-box"></div>`;
     }
     // ── Assemble ──
     return [screenBgHtml, contentSlotHtml, homeIndicatorHtml, statusBarHtml, browserBarHtml, overlaySlotHtml, frameHtml, windowBorderHtml].join('\n');
@@ -239,10 +246,13 @@ export function generateMockupPage(params) {
     const ps = params.pixelScale ?? 1;
     const w = Math.round(layout.containerWidth * ps);
     const h = Math.round(layout.containerHeight * ps);
-    const inner = generateMockupHtml(params);
+    const shouldInjectStatusBarFonts = params.showStatusBar !== false && !!params.statusBar && params.safeArea.top > 0;
+    const inner = generateMockupHtmlInternal(params, { includeInlineStatusBarFontStyles: !shouldInjectStatusBarFonts });
+    const fontCss = shouldInjectStatusBarFonts ? `${STATUS_BAR_FONT_CSS}\n` : '';
     return `<!DOCTYPE html>
 <html><head><meta charset="utf-8"><style>
 *{margin:0;padding:0;box-sizing:border-box}
+${fontCss}
 body{width:${w}px;height:${h}px;overflow:hidden;background:transparent}
 </style></head><body>
 <div style="position:relative;width:${w}px;height:${h}px">

package/dist/mockup.d.ts

@@ -1,4 +1,3 @@
-import type { BrowserContext } from 'playwright';
 import type { StatusBarConfig, StatusBarLayout, StatusBarDeviceType } from './status-bar.js';
 import type { BrowserBarConfig } from './browser-bar.js';
 export type DeviceCategory = 'phone' | 'tablet' | 'laptop' | 'browser';
@@ -12,6 +11,91 @@ export interface DeviceFrameDefinition {
         height: number;
     };
 }
+interface OrientationConfigData {
+    screen: {
+        logicalWidth: number;
+        logicalHeight: number;
+        scale: number;
+        cornerRadius: number;
+    };
+    viewport: {
+        width: number;
+        height: number;
+    };
+    safeArea?: {
+        top: number;
+        bottom: number;
+        left?: number;
+        right?: number;
+    };
+    statusBar?: {
+        asset?: string;
+        height: number;
+        width: number;
+        type?: StatusBarDeviceType;
+        layout?: StatusBarLayout;
+    };
+    homeIndicator?: {
+        width: number;
+        height: number;
+        cornerRadius: number;
+        bottomOffset: number;
+    };
+    frame: {
+        type: 'png' | 'svg';
+        asset: string;
+        width: number;
+        height: number;
+        screenRect: {
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+        };
+    };
+    /** Rotation angle (degrees CW) applied to the frame image */
+    frameRotation?: number;
+    /** When true, the frame is rendered behind the screen content */
+    frameBehindContent?: boolean;
+    frameUrl?: string;
+    /** Window border for frameless browser mockups */
+    windowBorder?: {
+        color: string;
+        width: number;
+        radius: number;
+    };
+    /** Dark-mode frame URL (browser category) */
+    frameDarkUrl?: string;
+    /** Configurable zones for browser bar dynamic content */
+    browserBarZones?: {
+        favicon?: {
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+        };
+        pageTitle?: {
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+            fontSize?: number;
+            fontWeight?: number | string;
+            textAlign?: 'left' | 'center' | 'right';
+        };
+        url?: {
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+            fontSize?: number;
+            fontWeight?: number | string;
+            textAlign?: 'left' | 'center' | 'right';
+        };
+    };
+    /** Which coded browser chrome style to render. Defaults to 'chrome'. */
+    browserStyle?: 'chrome' | 'safari';
+}
 export type MockupOrientation = 'portrait' | 'landscape';
 export interface MockupOptions {
     orientation?: MockupOrientation;
@@ -34,12 +118,19 @@ export interface MockupOptions {
         width: number;
         radius: number;
     };
+    /** Explicit color scheme override — bypasses auto-detection from edge colors */
+    colorScheme?: 'light' | 'dark';
 }
 export interface ResolvedDeviceFrameDescriptor {
     id: string;
     name: string;
     category: DeviceCategory;
     orientation: MockupOrientation;
+    /** Pre-computed viewport from the device config (content area) */
+    viewport?: {
+        width: number;
+        height: number;
+    };
     screen: {
         logicalWidth: number;
         logicalHeight: number;
@@ -82,6 +173,7 @@ export interface ResolvedDeviceFrameDescriptor {
     };
     frameRotation: number;
     frameBehindContent: boolean;
+    browserStyle?: OrientationConfigData['browserStyle'];
     disableOverlays: boolean;
 }
 export declare function invalidateDeviceConfigCache(): void;
@@ -91,4 +183,5 @@ export declare function resolveDeviceFrameDescriptor(id: DeviceFrameId, options?
 export declare function rasterizeDeviceFrame(descriptor: ResolvedDeviceFrameDescriptor, outputScale: number): Promise<Buffer>;
 export declare function getDeviceFrames(): Promise<DeviceFrameDefinition[]>;
 export declare function getDeviceFrame(id: DeviceFrameId): Promise<DeviceFrameDefinition | undefined>;
-export declare function applyDeviceFrame(screenshot: Buffer, deviceId: DeviceFrameId, browserContext: BrowserContext, options?: MockupOptions): Promise<Buffer>;
+export declare function applyDeviceFrame(screenshot: Buffer, deviceId: DeviceFrameId, options?: MockupOptions): Promise<Buffer>;
+export {};