export interface OverlayInput {
designSrc: string;
domSrc: string;
heatmapSrc: string;
width: number;
height: number;
diffPercent: number;
diffBounds?: DiffBoundsPct | null;
}
/** Diff bounding box as percentages of the frame, for CSS positioning. */
export interface DiffBoundsPct {
left: number;
top: number;
width: number;
height: number;
}
export function renderOverlayHtml(input: OverlayInput): string {
const { designSrc, domSrc, heatmapSrc, width, height, diffPercent, diffBounds } = input;
const pct = diffPercent.toFixed(2);
const diffColor = diffPercent > 1 ? "#ff8a80" : "#a5d6a7";
const boundsStyle = diffBounds
? `left:${diffBounds.left.toFixed(4)}%;top:${diffBounds.top.toFixed(4)}%;width:${diffBounds.width.toFixed(4)}%;height:${diffBounds.height.toFixed(4)}%`
: "";
return `
design-diff overlay
`;
}