import type { ResponsivePreset, ServerStoryFile, StoryContext } from '../types';
/**
 * Create initial preview state
 */
export declare function createPreviewState(): PreviewState;
/**
 * Generate iframe HTML for component preview
 */
export declare function generatePreviewIframe(story: ServerStoryFile, variantId: string, state: PreviewState, ctx: StoryContext): string;
/**
 * Generate viewport selector HTML
 */
export declare function generateViewportSelector(presets: ResponsivePreset[], currentWidth: number | null): string;
/**
 * Generate zoom controls HTML
 */
export declare function generateZoomControls(currentZoom: number): string;
/**
 * Generate background selector HTML
 */
export declare function generateBackgroundSelector(presets: { label: string, color: string }[], currentColor: string): string;
/**
 * Generate toolbar overlay buttons
 */
export declare function generateOverlayButtons(state: PreviewState): string;
/**
 * Generate side-by-side comparison view
 */
export declare function generateComparisonView(story: ServerStoryFile, variantId1: string, variantId2: string, ctx: StoryContext): string;
/**
 * Get preview styles
 */
export declare function getPreviewStyles(): string;
/**
 * Preview state
 */
export declare interface PreviewState {
  viewportWidth: number | null
  viewportHeight: number | null
  zoom: number
  background: string
  showGrid: boolean
  showRuler: boolean
  showOutline: boolean
  props: Record<string, any>
}