autokap 1.0.2 → 1.0.4

package/dist/llm-usage.js

@@ -1,45 +0,0 @@
-export function extractLlmUsageSnapshot(response) {
-    const usageDetails = response.usage;
-    const promptDetails = usageDetails?.prompt_tokens_details;
-    const completionDetails = usageDetails?.completion_tokens_details;
-    return {
-        generationId: response.id ?? null,
-        modelUsed: response.model ?? null,
-        promptTokens: response.usage?.prompt_tokens ?? null,
-        completionTokens: response.usage?.completion_tokens ?? null,
-        totalTokens: response.usage?.total_tokens ?? null,
-        cacheReadTokens: promptDetails?.cached_tokens
-            ?? usageDetails?.cache_read_input_tokens
-            ?? null,
-        cacheWriteTokens: promptDetails?.cache_creation_input_tokens
-            ?? usageDetails?.cache_write_input_tokens
-            ?? null,
-        reasoningTokens: completionDetails?.reasoning_tokens
-            ?? null,
-    };
-}
-export function buildStepUsageFromSnapshot(snapshot, params) {
-    return {
-        stepNumber: params.stepNumber,
-        stepType: params.stepType,
-        modelRequested: params.modelRequested,
-        imagesInPrompt: params.imagesInPrompt,
-        ...snapshot,
-    };
-}
-export function normalizeLlmUsageSnapshot(snapshot) {
-    return {
-        generationId: snapshot.generationId ?? null,
-        modelUsed: snapshot.modelUsed ?? null,
-        promptTokens: snapshot.promptTokens ?? null,
-        completionTokens: snapshot.completionTokens ?? null,
-        totalTokens: snapshot.totalTokens ?? null,
-        cacheReadTokens: snapshot.cacheReadTokens ?? null,
-        cacheWriteTokens: snapshot.cacheWriteTokens ?? null,
-        reasoningTokens: snapshot.reasoningTokens ?? null,
-    };
-}
-export function extractStepUsage(response, params) {
-    return buildStepUsageFromSnapshot(extractLlmUsageSnapshot(response), params);
-}
-//# sourceMappingURL=llm-usage.js.map

package/dist/mockup-html.d.ts

@@ -1,119 +0,0 @@
-/**
- * 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

@@ -1,253 +0,0 @@
-/**
- * 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 } 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`;
-    // Expand container for window border (browser frameless mockups)
-    const finalContainerWidth = containerWidth + borderW * 2;
-    const finalContainerHeight = containerHeight + borderW * 2;
-    return {
-        containerWidth: finalContainerWidth,
-        containerHeight: finalContainerHeight,
-        contentArea: {
-            x: screenRect.x + leftPx + borderW,
-            y: screenRect.y + topPx + borderW,
-            width: contentW,
-            height: contentH,
-        },
-        screenArea: {
-            x: screenRect.x + borderW,
-            y: screenRect.y + borderW,
-            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) {
-    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 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) {
-        const contentBorderRadius = topPx > 0
-            ? `0 0 ${px(cornerPx)}px ${px(cornerPx)}px`
-            : 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,
-        });
-        // 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>`;
-        }
-        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>`;
-        }
-    }
-    // ── Browser bar (z:5) — full Chrome 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:${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">`
-        : '';
-    // ── 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>`;
-    }
-    // ── 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 inner = generateMockupHtml(params);
-    return `<!DOCTYPE html>
-<html><head><meta charset="utf-8"><style>
-*{margin:0;padding:0;box-sizing:border-box}
-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

@@ -1,94 +0,0 @@
-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';
-export type DeviceFrameId = 'iphone-16-pro' | (string & {});
-export interface DeviceFrameDefinition {
-    id: string;
-    name: string;
-    category: DeviceCategory;
-    viewport: {
-        width: number;
-        height: number;
-    };
-}
-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;
-    };
-}
-export interface ResolvedDeviceFrameDescriptor {
-    id: string;
-    name: string;
-    category: DeviceCategory;
-    orientation: MockupOrientation;
-    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;
-    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, browserContext: BrowserContext, options?: MockupOptions): Promise<Buffer>;