/**
 * 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;
    /** CSS border-radius for the content area */
    contentBorderRadius: 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;