// );
// if (!cell.collapsed) {
// // For non-collapsed cells, calculate and draw the blurry average
// const pixelColors = Array.from(
// { length: kernelSize * kernelSize },
// () => []
// );
// cell.options.forEach((optionIndex) => {
// const tileData = spriteTileSet[optionIndex].tileData;
// for (let i = 0; i < tileData.length; i += 4) {
// const pixelIndex = i / 4;
// pixelColors[pixelIndex].push([
// tileData[i],
// tileData[i + 1],
// tileData[i + 2]
// ]);
// }
// });
// pixelColors.forEach((colors, index) => {
// if (colors.length > 0) {
// const averageColor = calculateAverageColor(colors);
// const colorString = `rgb(${averageColor[0]},${averageColor[1]},${averageColor[2]})`;
// const dx = index % kernelSize;
// const dy = Math.floor(index / kernelSize);
// context.fillStyle = colorString;
// context.fillRect(
// cell.x * kernelSize + dx,
// cell.y * kernelSize + dy,
// 1,
// 1
// );
// }
// });
// } else if (cell.contents?.tileData) {
// // For collapsed cells with contents, draw as before
// for (let i = 0; i < cell.contents.tileData.length; i += 4) {
// const tileData = cell.contents.tileData;
// const color = `rgb(${tileData[i]},${tileData[i + 1]},${
// tileData[i + 2]
// })`;
// const pixelIndex = i / 4;
// const dx = pixelIndex % kernelSize;
// const dy = Math.floor(pixelIndex / kernelSize);
// context.fillStyle = color;
// context.fillRect(
// cell.x * kernelSize + dx,
// cell.y * kernelSize + dy,
// 1,
// 1
// );
// }
// } else {
// // Fallback for collapsed cells without contents (should not happen in a correct simulation)
// context.fillStyle = "black";
// context.fillRect(
// cell.x * kernelSize,
// cell.y * kernelSize,
// kernelSize,
// kernelSize
// );
// }
// });
// return context.canvas;
// }