Add a remove button

src/app/photo-collage/photo-collage.component.css

@@ -132,3 +132,12 @@ canvas {
   transform: scale(1.1);
   background: white;
 }
+
+.remove-btn {
+  background: #ff4444;
+  color: white;
+}
+
+.remove-btn:hover {
+  background: #ff6666;
+}

src/app/photo-collage/photo-collage.component.html

@@ -30,6 +30,9 @@
         <button (click)="moveToBack(hoveredPhoto)" class="control-btn">⤓</button>
         <button (click)="moveToFront(hoveredPhoto)" class="control-btn">⤒</button>
       </div>
+      <div class="controls-row">
+        <button (click)="removePhoto(hoveredPhoto)" class="control-btn remove-btn">×</button>
+      </div>
     </div>
   </div>
   <input #fileInput 

src/app/photo-collage/photo-collage.component.ts

@@ -586,6 +586,23 @@ export class PhotoCollageComponent implements AfterViewInit, OnDestroy {
     this.render();
   }
 
+  removePhoto(photo: PhotoElement) {
+    // Find and remove the photo from the array
+    const index = this.photos.findIndex(p => p.id === photo.id);
+    if (index !== -1) {
+      // Remove the photo's object URL to prevent memory leaks
+      URL.revokeObjectURL(photo.url);
+      this.photos.splice(index, 1);
+
+      // Reset hovered photo if it was the removed one
+      if (this.hoveredPhoto && this.hoveredPhoto.id === photo.id) {
+        this.hoveredPhoto = null;
+      }
+
+      this.render();
+    }
+  }
+
   private applyGridLayout() {
     if (!this.photos.length) return;