fix: use accurate overlayGrid for grid previews

web/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Grid } from "lucide-react";
 // import MosaicGrid from "./components/MosaicGrid";
 // import TileModal from "./components/TileModal";
@@ -7,7 +7,7 @@ import Header from "./components/Header";
 import { ThemeProvider } from "./contexts/ThemeContext";
 import { ColorMatchingMethod } from "./components/colorMatchingMethods";
 
-import { Mosaic, ResizeType } from "phomo";
+import { Mosaic, ResizeType, overlayGrid } from "phomo";
 
 const App: React.FC = () => {
   // const [showModal, setShowModal] = useState(false);
@@ -16,6 +16,7 @@ const App: React.FC = () => {
   //   index: number;
   // } | null>(null);
   const [masterImage, setMasterImage] = useState<string | null>(null);
+  const [gridOverlay, setGridOverlay] = useState<string | null>(null);
   const [tileImages, setTileImages] = useState<{ url: string; name: string }[]>(
     [],
   );
@@ -121,6 +122,17 @@ const App: React.FC = () => {
     return new Uint8Array(arrayBuffer);
   };
 
+  useEffect(() => {
+    async function run() {
+      if (masterImage === null) return;
+      const masterImageBytes = await fetchImageAsBytes(masterImage);
+      setGridOverlay(
+        `data:image/png;base64,${overlayGrid(masterImageBytes, gridWidth, gridHeight)}`,
+      );
+    }
+    run();
+  }, [masterImage, gridWidth, gridHeight]);
+
   return (
     <ThemeProvider>
       <div className="min-h-screen bg-gray-100 dark:bg-gray-900 px-4 sm:px-8 pb-8 pt-4 transition-colors duration-200">
@@ -136,6 +148,7 @@ const App: React.FC = () => {
             gridHeight={gridHeight}
             tileImages={tileImages}
             masterImage={masterImage}
+            gridOverlay={gridOverlay}
             onRemoveMasterImage={handleRemoveMasterImage}
             onRemoveTileImage={handleRemoveTileImage}
             onClearTileImages={handleClearTileImages}

web/src/components/MosaicControls.tsx

@@ -17,7 +17,6 @@ import {
 import TileManagementModal from "./TileManagementModal";
 import { ResizeType } from "phomo";
 import { ColorMatchingMethod } from "./colorMatchingMethods";
-import MosaicGrid from "./MosaicGrid";
 
 interface MosaicControlsProps {
   onMasterImageSelect: (file: File) => void;
@@ -29,6 +28,7 @@ interface MosaicControlsProps {
   gridHeight: number;
   tileImages: { url: string; name: string }[];
   masterImage: string | null;
+  gridOverlay: string | null;
   onRemoveMasterImage: () => void;
   onRemoveTileImage: (index: number) => void;
   onClearTileImages: () => void;
@@ -48,6 +48,7 @@ const MosaicControls: React.FC<MosaicControlsProps> = ({
   gridHeight,
   tileImages,
   masterImage,
+  gridOverlay,
   onRemoveMasterImage,
   onRemoveTileImage,
   onClearTileImages,
@@ -372,14 +373,9 @@ const MosaicControls: React.FC<MosaicControlsProps> = ({
               <ChevronDown className="text-gray-600 dark:text-gray-300" />
             )}
           </div>
-          {showGrid && masterImage && (
-            <div className="rounded-md bg-gray-200 dark:bg-gray-700 p-2 flex flex-center flex-col justify-center w-full gap-2 text-gray-700 dark:text-gray-300 font-medium text-center">
-              <h3>Approximate Grid</h3>
-              <MosaicGrid
-                masterImage={masterImage}
-                gridWidth={gridWidth}
-                gridHeight={gridHeight}
-              />
+          {showGrid && masterImage && gridOverlay && (
+            <div className="rounded-md p-2 flex flex-center flex-col justify-center align-middle items-center w-full">
+              <img src={gridOverlay} className="max-w-xl rounded-lg" />
             </div>
           )}
         </div>