autokap 1.0.6 → 1.0.8

package/dist/mockup-html.d.ts

@@ -0,0 +1,119 @@
+/**
+ * Shared mockup HTML generator — single source of truth for mockup rendering.
+ *
+ * Used by:
+ *   - Server-side: src/mockup.ts (applyDeviceFrame → Playwright screenshot)
+ *   - Client-side: web/components/mockup-renderer.tsx (dangerouslySetInnerHTML)
+ *
+ * Z-index scheme (all absolute within the same parent):
+ *   0  — frame image (when frameBehindContent)
+ *   1  — screen background + safe area fills
+ *   2  — content slot (screenshot img on server, React children on client)
+ *   4  — home indicator
+ *   5  — status bar
+ *   6  — overlay slot (dock on client)
+ *   8  — frame image (when !frameBehindContent)
+ */
+import type { StatusBarDeviceType, StatusBarLayout, StatusBarConfig } from './status-bar.js';
+import type { BrowserBarConfig } from './browser-bar.js';
+export interface MockupHtmlParams {
+    frameSrc?: string;
+    frameWidth: number;
+    frameHeight: number;
+    frameRotation?: number;
+    frameBehindContent?: boolean;
+    screenRect: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    cornerRadius: number;
+    screenBackground?: string;
+    isLaptop?: boolean;
+    safeArea: {
+        top: number;
+        bottom: number;
+        left?: number;
+        right?: number;
+    };
+    scale: number;
+    showSafeAreaTop?: boolean;
+    showSafeAreaBottom?: boolean;
+    showSafeAreaLeft?: boolean;
+    showSafeAreaRight?: boolean;
+    safeAreaColors?: {
+        top?: string;
+        bottom?: string;
+        left?: string;
+        right?: string;
+    };
+    statusBar?: {
+        height: number;
+        width: number;
+        type: StatusBarDeviceType;
+        layout?: StatusBarLayout;
+    };
+    showStatusBar?: boolean;
+    statusBarConfig?: StatusBarConfig;
+    colorScheme?: 'light' | 'dark';
+    homeIndicator?: {
+        width: number;
+        height: number;
+        cornerRadius: number;
+        bottomOffset: number;
+    };
+    showHomeIndicator?: boolean;
+    homeIndicatorColor?: string;
+    showBrowserBar?: boolean;
+    browserBarConfig?: BrowserBarConfig;
+    windowBorder?: {
+        color: string;
+        width: number;
+        radius: number;
+    };
+    contentHtml?: string;
+    overlayHtml?: string;
+    pixelScale?: number;
+}
+export interface MockupLayout {
+    /** Post-rotation container dimensions */
+    containerWidth: number;
+    containerHeight: number;
+    /** Content area (inside safe areas) relative to the container */
+    contentArea: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    /** Screen area relative to the container */
+    screenArea: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    /** CSS border-radius for the screen area */
+    screenBorderRadius: string;
+}
+/**
+ * Compute the mockup layout — positions and dimensions for all elements.
+ * This is the single source of truth for both server and client rendering.
+ */
+export declare function computeMockupLayout(params: MockupHtmlParams): MockupLayout;
+/**
+ * Generate the complete mockup HTML structure.
+ *
+ * All elements are absolutely positioned within a container div
+ * (position:relative). This allows the client to inject React children
+ * as siblings at z-index:2 (between screen bg and status bar).
+ *
+ * The returned HTML is a FRAGMENT (no wrapping div), meant to be placed
+ * inside a position:relative container of the correct dimensions.
+ */
+export declare function generateMockupHtml(params: MockupHtmlParams): string;
+/**
+ * Generate a complete HTML page wrapping the mockup (for server-side Playwright rendering).
+ */
+export declare function generateMockupPage(params: MockupHtmlParams): string;

package/dist/mockup-html.js

@@ -0,0 +1,263 @@
+/**
+ * Shared mockup HTML generator — single source of truth for mockup rendering.
+ *
+ * Used by:
+ *   - Server-side: src/mockup.ts (applyDeviceFrame → Playwright screenshot)
+ *   - Client-side: web/components/mockup-renderer.tsx (dangerouslySetInnerHTML)
+ *
+ * Z-index scheme (all absolute within the same parent):
+ *   0  — frame image (when frameBehindContent)
+ *   1  — screen background + safe area fills
+ *   2  — content slot (screenshot img on server, React children on client)
+ *   4  — home indicator
+ *   5  — status bar
+ *   6  — overlay slot (dock on client)
+ *   8  — frame image (when !frameBehindContent)
+ */
+import { generateStatusBarHtml, STATUS_BAR_FONT_CSS } from './status-bar.js';
+import { generateBrowserBarHtml } from './browser-bar.js';
+// ── Layout Computation ──────────────────────────────────────────────────
+/**
+ * Compute the mockup layout — positions and dimensions for all elements.
+ * This is the single source of truth for both server and client rendering.
+ */
+export function computeMockupLayout(params) {
+    const { frameWidth, frameHeight, frameRotation = 0, screenRect, cornerRadius, safeArea, scale, isLaptop = false, showSafeAreaTop = true, showSafeAreaBottom = true, showSafeAreaLeft = true, showSafeAreaRight = true, } = params;
+    const is90or270 = frameRotation % 180 !== 0;
+    const containerWidth = is90or270 ? frameHeight : frameWidth;
+    const containerHeight = is90or270 ? frameWidth : frameHeight;
+    const showTop = showSafeAreaTop && safeArea.top > 0;
+    const showBottom = showSafeAreaBottom && safeArea.bottom > 0;
+    const showLeft = showSafeAreaLeft && (safeArea.left ?? 0) > 0;
+    const showRight = showSafeAreaRight && (safeArea.right ?? 0) > 0;
+    const topPx = showTop ? safeArea.top * scale : 0;
+    const bottomPx = showBottom ? safeArea.bottom * scale : 0;
+    const leftPx = showLeft ? (safeArea.left ?? 0) * scale : 0;
+    const rightPx = showRight ? (safeArea.right ?? 0) * scale : 0;
+    const contentW = Math.max(1, screenRect.width - leftPx - rightPx);
+    const contentH = Math.max(1, screenRect.height - topPx - bottomPx);
+    const borderW = params.windowBorder?.width ?? 0;
+    const screenCornerRadius = Math.max(0, cornerRadius);
+    const screenBorderRadius = isLaptop
+        ? `${screenCornerRadius}px ${screenCornerRadius}px 0 0`
+        : `${screenCornerRadius}px`;
+    return {
+        containerWidth,
+        containerHeight,
+        contentArea: {
+            x: screenRect.x + leftPx,
+            y: screenRect.y + topPx,
+            width: contentW,
+            height: contentH,
+        },
+        screenArea: {
+            x: screenRect.x,
+            y: screenRect.y,
+            width: screenRect.width,
+            height: screenRect.height,
+        },
+        screenBorderRadius,
+    };
+}
+// ── HTML Generation ─────────────────────────────────────────────────────
+/**
+ * Generate the complete mockup HTML structure.
+ *
+ * All elements are absolutely positioned within a container div
+ * (position:relative). This allows the client to inject React children
+ * as siblings at z-index:2 (between screen bg and status bar).
+ *
+ * The returned HTML is a FRAGMENT (no wrapping div), meant to be placed
+ * 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;
+    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;
+    const showBottom = showSafeAreaBottom && safeArea.bottom > 0;
+    const showLeft = showSafeAreaLeft && (safeArea.left ?? 0) > 0;
+    const showRight = showSafeAreaRight && (safeArea.right ?? 0) > 0;
+    const topPx = showTop ? safeArea.top * scale : 0;
+    const bottomPx = showBottom ? safeArea.bottom * scale : 0;
+    const leftPx = showLeft ? (safeArea.left ?? 0) * scale : 0;
+    const rightPx = showRight ? (safeArea.right ?? 0) * scale : 0;
+    const cornerPx = Math.max(0, cornerRadius);
+    const screenBorderRadius = layout.screenBorderRadius;
+    const screenBorderRadiusCss = screenBorderRadius
+        .split(' ')
+        .map((v) => px(parseFloat(v)) + 'px')
+        .join(' ');
+    // ── Screen background + safe area fills (z:1) ──
+    let safeAreaFillsHtml = '';
+    const topColor = safeAreaColors?.top ?? screenBackground;
+    const bottomColor = safeAreaColors?.bottom ?? screenBackground;
+    const leftColor = safeAreaColors?.left ?? screenBackground;
+    const rightColor = safeAreaColors?.right ?? screenBackground;
+    if (showLeft) {
+        safeAreaFillsHtml += `<div style="position:absolute;top:0;left:0;bottom:0;width:${px(leftPx)}px;background:${leftColor}"></div>`;
+    }
+    if (showRight) {
+        safeAreaFillsHtml += `<div style="position:absolute;top:0;right:0;bottom:0;width:${px(rightPx)}px;background:${rightColor}"></div>`;
+    }
+    if (showTop) {
+        safeAreaFillsHtml += `<div style="position:absolute;top:0;left:${px(leftPx)}px;right:${px(rightPx)}px;height:${px(topPx)}px;background:${topColor}"></div>`;
+    }
+    if (showBottom) {
+        safeAreaFillsHtml += `<div style="position:absolute;bottom:0;left:${px(leftPx)}px;right:${px(rightPx)}px;height:${px(bottomPx)}px;background:${bottomColor}"></div>`;
+    }
+    const screenBgHtml = `<div style="position:absolute;left:${px(sr.x)}px;top:${px(sr.y)}px;width:${px(sr.width)}px;height:${px(sr.height)}px;border-radius:${screenBorderRadiusCss};overflow:hidden;background:${screenBackground};z-index:1">${safeAreaFillsHtml}</div>`;
+    // ── Content (z:2) ──
+    let contentSlotHtml = '';
+    if (contentHtml) {
+        // 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) ──
+    let homeIndicatorHtml = '';
+    if (showHomeIndicator && homeIndicator && safeArea.bottom > 0) {
+        const hiW = homeIndicator.width * scale;
+        const hiH = homeIndicator.height * scale;
+        const hiR = homeIndicator.cornerRadius * scale;
+        const hiBottom = homeIndicator.bottomOffset * scale;
+        const hiColor = homeIndicatorColor ??
+            (colorScheme === 'dark' ? 'rgba(255,255,255,0.5)' : 'rgba(0,0,0,0.35)');
+        // Position: centered horizontally in screen rect, offset from bottom of screen rect
+        const hiLeft = sr.x + (sr.width - hiW) / 2;
+        const hiTop = sr.y + sr.height - hiBottom - hiH;
+        homeIndicatorHtml = `<div style="position:absolute;left:${px(hiLeft)}px;top:${px(hiTop)}px;width:${px(hiW)}px;height:${px(hiH)}px;border-radius:${px(hiR)}px;background:${hiColor};z-index:4"></div>`;
+    }
+    // ── Status bar (z:5) ──
+    let statusBarHtml = '';
+    if (showStatusBar && statusBar && safeArea.top > 0) {
+        const sbH = statusBar.height * scale;
+        const sbConfig = {
+            time: '9:41',
+            signalStrength: 4,
+            networkType: '5G',
+            wifiStrength: 3,
+            batteryLevel: 100,
+            batteryCharging: false,
+            colorScheme,
+            ...statusBarConfig,
+        };
+        const sbInnerHtml = generateStatusBarHtml({
+            config: sbConfig,
+            width: sr.width,
+            height: sbH,
+            scale,
+            deviceType: statusBar.type,
+            layout: statusBar.layout,
+            includeFontStyles: options.includeInlineStatusBarFontStyles,
+        });
+        if (pixelScale === 1) {
+            // Client: render at 1× (status bar HTML handles its own internal scaling)
+            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: 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) — coded Chrome/Safari toolbar, same pattern as status bar ──
+    let browserBarHtml = '';
+    if (showBrowserBar && safeArea.top > 0) {
+        const bbH = safeArea.top * scale;
+        const bbConfig = {
+            url: 'example.com',
+            pageTitle: 'New Tab',
+            colorScheme,
+            ...browserBarConfig,
+        };
+        // Browser bar handles its own internal scaling (SVG transform:scale).
+        // We generate it at the FINAL pixel dimensions and place it without extra transform.
+        const bbInnerHtml = generateBrowserBarHtml({
+            config: bbConfig,
+            width: px(sr.width),
+            height: px(bbH),
+            scale,
+            pixelScale: 1,
+        });
+        const bbBorderRadius = `${px(cornerPx)}px ${px(cornerPx)}px 0 0`;
+        browserBarHtml = `<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:${bbBorderRadius};z-index:5;pointer-events:none">${bbInnerHtml}</div>`;
+    }
+    // ── Overlay (z:6) ──
+    let overlaySlotHtml = '';
+    if (overlayHtml) {
+        overlaySlotHtml = `<div style="position:absolute;left:${px(sr.x)}px;top:${px(sr.y)}px;width:${px(sr.width)}px;height:${px(sr.height)}px;z-index:6;pointer-events:none">${overlayHtml}</div>`;
+    }
+    // ── Frame image ──
+    const frameZ = frameBehindContent ? 0 : 8;
+    const is90or270 = frameRotation % 180 !== 0;
+    const effectiveWidth = is90or270 ? frameHeight : frameWidth;
+    let frameTransform = '';
+    let frameMargins = '';
+    if (frameRotation) {
+        frameTransform = `transform:rotate(${frameRotation}deg);transform-origin:top left;`;
+        if (frameRotation === 90) {
+            frameMargins = `margin-left:${px(effectiveWidth)}px;`;
+        }
+        else if (frameRotation === 180) {
+            const effectiveHeight = is90or270 ? frameWidth : frameHeight;
+            frameMargins = `margin-left:${px(effectiveWidth)}px;margin-top:${px(effectiveHeight)}px;`;
+        }
+        else if (frameRotation === 270 || frameRotation === -90) {
+            const effectiveHeight = is90or270 ? frameWidth : frameHeight;
+            frameMargins = `margin-top:${px(effectiveHeight)}px;`;
+        }
+    }
+    const frameHtml = frameSrc
+        ? `<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);
+        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');
+}
+/**
+ * Generate a complete HTML page wrapping the mockup (for server-side Playwright rendering).
+ */
+export function generateMockupPage(params) {
+    const layout = computeMockupLayout(params);
+    const ps = params.pixelScale ?? 1;
+    const w = Math.round(layout.containerWidth * ps);
+    const h = Math.round(layout.containerHeight * ps);
+    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">
+${inner}
+</div>
+</body></html>`;
+}
+//# sourceMappingURL=mockup-html.js.map

package/dist/mockup.d.ts

@@ -0,0 +1,187 @@
+import type { StatusBarConfig, StatusBarLayout, StatusBarDeviceType } from './status-bar.js';
+import type { BrowserBarConfig } from './browser-bar.js';
+export type DeviceCategory = 'phone' | 'tablet' | 'laptop' | 'browser';
+export type DeviceFrameId = 'iphone-16-pro' | (string & {});
+export interface DeviceFrameDefinition {
+    id: string;
+    name: string;
+    category: DeviceCategory;
+    viewport: {
+        width: number;
+        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;
+    outputScale?: number;
+    showStatusBar?: boolean;
+    showSafeAreaTop?: boolean;
+    showSafeAreaBottom?: boolean;
+    showSafeAreaLeft?: boolean;
+    showSafeAreaRight?: boolean;
+    showHomeIndicator?: boolean;
+    safeAreaTopColor?: string;
+    safeAreaBottomColor?: string;
+    safeAreaLeftColor?: string;
+    safeAreaRightColor?: string;
+    statusBar?: StatusBarConfig;
+    browserBar?: BrowserBarConfig;
+    /** Window border for frameless mockups (browser category) */
+    windowBorder?: {
+        color: string;
+        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;
+        scale: number;
+        cornerRadius: 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;
+    };
+    frameUrl?: string;
+    frameWidth: number;
+    frameHeight: number;
+    screenRect: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    frameRotation: number;
+    frameBehindContent: boolean;
+    browserStyle?: OrientationConfigData['browserStyle'];
+    disableOverlays: boolean;
+}
+export declare function invalidateDeviceConfigCache(): void;
+export declare function resolveDeviceFrameDescriptor(id: DeviceFrameId, options?: {
+    orientation?: MockupOrientation;
+}): Promise<ResolvedDeviceFrameDescriptor | null>;
+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, options?: MockupOptions): Promise<Buffer>;
+export {};