feat: add clipboard copy, improved downloads, and PWA support

Phase 3 features:
- Copy to clipboard button on each processed photo card
- Visible download + copy buttons in info bar (no hover required)
- PWA support via vite-plugin-pwa with service worker and manifest
- Offline-capable with workbox precaching
- Added .npmrc for legacy-peer-deps (vite-plugin-pwa compat)
- Fixed tsconfig.app.json to exclude test files from build

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: esmcelroy

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

package-lock.json

@@ -26,6 +26,7 @@
     "@eslint/js": "^9.39.4",
     "@playwright/test": "^1.59.1",
     "@tailwindcss/vite": "^4.2.2",
+    "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
@@ -43,6 +44,7 @@
     "typescript": "~6.0.2",
     "typescript-eslint": "^8.58.0",
     "vite": "^8.0.4",
+    "vite-plugin-pwa": "^1.2.0",
     "vitest": "^4.1.4"
   }
 }

package.json

@@ -227,6 +227,7 @@ export default function App() {
           maxAspectRatio={maxAspectRatio}
           onRemove={handleRemove}
           isProcessed={isProcessed}
+          outputFormat={settings.outputFormat}
         />
       </main>
     </div>

src/App.tsx

@@ -20,6 +20,7 @@ const defaultProps = {
   maxAspectRatio: 800 / 600,
   onRemove: vi.fn(),
   isProcessed: false,
+  outputFormat: 'png',
 };
 
 describe('PhotoGrid', () => {
@@ -43,7 +44,7 @@ describe('PhotoGrid', () => {
       makePhoto({ id: 'p1', aspectRatio: 1.5 }),
       makePhoto({ id: 'p2', aspectRatio: 2.0 }),
     ];
-    render(<PhotoGrid photos={photos} maxAspectRatio={2.0} onRemove={vi.fn()} isProcessed={false} />);
+    render(<PhotoGrid photos={photos} maxAspectRatio={2.0} onRemove={vi.fn()} isProcessed={false} outputFormat="png" />);
     expect(screen.getByText('Widest')).toBeInTheDocument();
   });
 
@@ -53,12 +54,12 @@ describe('PhotoGrid', () => {
     ];
 
     const { rerender } = render(
-      <PhotoGrid photos={photos} maxAspectRatio={800 / 600} onRemove={vi.fn()} isProcessed={false} />
+      <PhotoGrid photos={photos} maxAspectRatio={800 / 600} onRemove={vi.fn()} isProcessed={false} outputFormat="png" />
     );
     expect(screen.queryByTitle('Download')).not.toBeInTheDocument();
 
     rerender(
-      <PhotoGrid photos={photos} maxAspectRatio={800 / 600} onRemove={vi.fn()} isProcessed={true} />
+      <PhotoGrid photos={photos} maxAspectRatio={800 / 600} onRemove={vi.fn()} isProcessed={true} outputFormat="png" />
     );
     expect(screen.getByTitle('Download')).toBeInTheDocument();
   });

src/__tests__/PhotoGrid.test.tsx

@@ -1,12 +1,13 @@
 import { useState } from 'react';
-import { Download, Trash2, Crown, Eye, EyeOff } from 'lucide-react';
+import { Download, Trash2, Crown, Eye, EyeOff, Copy, Check } from 'lucide-react';
 import type { UploadedPhoto } from '../types';
 
 interface PhotoGridProps {
   photos: UploadedPhoto[];
   maxAspectRatio: number;
   onRemove: (id: string) => void;
   isProcessed: boolean;
+  outputFormat: string;
 }
 
 function downloadDataUrl(dataUrl: string, filename: string) {
@@ -16,15 +17,60 @@ function downloadDataUrl(dataUrl: string, filename: string) {
   a.click();
 }
 
-export function PhotoGrid({ photos, maxAspectRatio, onRemove, isProcessed }: PhotoGridProps) {
+async function copyToClipboard(dataUrl: string): Promise<boolean> {
+  try {
+    const res = await fetch(dataUrl);
+    const blob = await res.blob();
+    // Clipboard API requires PNG for images
+    const pngBlob = blob.type === 'image/png' ? blob : await convertToPngBlob(dataUrl);
+    await navigator.clipboard.write([
+      new ClipboardItem({ 'image/png': pngBlob }),
+    ]);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function convertToPngBlob(dataUrl: string): Promise<Blob> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => {
+      const canvas = document.createElement('canvas');
+      canvas.width = img.width;
+      canvas.height = img.height;
+      const ctx = canvas.getContext('2d')!;
+      ctx.drawImage(img, 0, 0);
+      canvas.toBlob(blob => {
+        if (blob) resolve(blob);
+        else reject(new Error('Failed to convert to PNG'));
+      }, 'image/png');
+    };
+    img.onerror = reject;
+    img.src = dataUrl;
+  });
+}
+
+export function PhotoGrid({ photos, maxAspectRatio, onRemove, isProcessed, outputFormat }: PhotoGridProps) {
   const [showOriginal, setShowOriginal] = useState<Record<string, boolean>>({});
+  const [copiedId, setCopiedId] = useState<string | null>(null);
 
   if (photos.length === 0) return null;
 
   const togglePreview = (id: string) => {
     setShowOriginal(prev => ({ ...prev, [id]: !prev[id] }));
   };
 
+  const handleCopy = async (id: string, dataUrl: string) => {
+    const ok = await copyToClipboard(dataUrl);
+    if (ok) {
+      setCopiedId(id);
+      setTimeout(() => setCopiedId(null), 2000);
+    }
+  };
+
+  const ext = outputFormat === 'jpeg' ? 'jpg' : outputFormat;
+
   return (
     <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
       {photos.map((photo, idx) => {
@@ -33,7 +79,7 @@ export function PhotoGrid({ photos, maxAspectRatio, onRemove, isProcessed }: Pho
         const displayUrl = isProcessed && photo.paddedDataUrl && !viewingOriginal
           ? photo.paddedDataUrl
           : photo.dataUrl;
-        const filename = `squarify-${String(idx + 1).padStart(2, '0')}.png`;
+        const filename = `squarify-${String(idx + 1).padStart(2, '0')}.${ext}`;
 
         return (
           <div key={photo.id} className="group relative bg-gray-100 dark:bg-gray-800 rounded-xl overflow-hidden border border-gray-200 dark:border-gray-700 hover:border-indigo-300 dark:hover:border-indigo-600 transition-colors">
@@ -59,31 +105,44 @@ export function PhotoGrid({ photos, maxAspectRatio, onRemove, isProcessed }: Pho
               </div>
             )}
 
-            {/* Info bar */}
+            {/* Info bar with action buttons */}
             <div className="px-3 py-2 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700">
-              <p className="text-xs text-gray-500 dark:text-gray-400 truncate" title={photo.file.name}>{photo.file.name}</p>
-              <p className="text-xs text-gray-400 dark:text-gray-500">{photo.width} × {photo.height}</p>
+              <div className="flex items-center justify-between">
+                <div className="min-w-0 flex-1">
+                  <p className="text-xs text-gray-500 dark:text-gray-400 truncate" title={photo.file.name}>{photo.file.name}</p>
+                  <p className="text-xs text-gray-400 dark:text-gray-500">{photo.width} × {photo.height}</p>
+                </div>
+                {isProcessed && photo.paddedDataUrl && (
+                  <div className="flex items-center gap-1 ml-2 shrink-0">
+                    <button
+                      onClick={() => handleCopy(photo.id, photo.paddedDataUrl!)}
+                      title="Copy to clipboard"
+                      className="p-1.5 rounded-lg text-gray-400 hover:text-indigo-600 hover:bg-indigo-50 dark:hover:bg-indigo-950 transition-colors"
+                    >
+                      {copiedId === photo.id ? <Check className="w-3.5 h-3.5 text-emerald-500" /> : <Copy className="w-3.5 h-3.5" />}
+                    </button>
+                    <button
+                      onClick={() => downloadDataUrl(photo.paddedDataUrl!, filename)}
+                      title="Download"
+                      className="p-1.5 rounded-lg text-gray-400 hover:text-indigo-600 hover:bg-indigo-50 dark:hover:bg-indigo-950 transition-colors"
+                    >
+                      <Download className="w-3.5 h-3.5" />
+                    </button>
+                  </div>
+                )}
+              </div>
             </div>
 
             {/* Action overlay */}
             <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
               {isProcessed && photo.paddedDataUrl && (
-                <>
-                  <button
-                    onClick={() => togglePreview(photo.id)}
-                    title={viewingOriginal ? 'Show padded' : 'Show original'}
-                    className="p-2 bg-white rounded-full text-gray-700 hover:bg-indigo-50 hover:text-indigo-700 transition-colors shadow"
-                  >
-                    {viewingOriginal ? <Eye className="w-4 h-4" /> : <EyeOff className="w-4 h-4" />}
-                  </button>
-                  <button
-                    onClick={() => downloadDataUrl(photo.paddedDataUrl!, filename)}
-                    title="Download"
-                    className="p-2 bg-white rounded-full text-gray-700 hover:bg-indigo-50 hover:text-indigo-700 transition-colors shadow"
-                  >
-                    <Download className="w-4 h-4" />
-                  </button>
-                </>
+                <button
+                  onClick={() => togglePreview(photo.id)}
+                  title={viewingOriginal ? 'Show padded' : 'Show original'}
+                  className="p-2 bg-white rounded-full text-gray-700 hover:bg-indigo-50 hover:text-indigo-700 transition-colors shadow"
+                >
+                  {viewingOriginal ? <Eye className="w-4 h-4" /> : <EyeOff className="w-4 h-4" />}
+                </button>
               )}
               <button
                 onClick={() => onRemove(photo.id)}

src/components/PhotoGrid.tsx

@@ -21,5 +21,6 @@
     "erasableSyntaxOnly": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src"]
+  "include": ["src"],
+  "exclude": ["src/__tests__"]
 }

tsconfig.app.json

@@ -1,11 +1,39 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'
+import { VitePWA } from 'vite-plugin-pwa'
 
 export default defineConfig({
   base: '/',
   plugins: [
     tailwindcss(),
     react(),
+    VitePWA({
+      registerType: 'autoUpdate',
+      includeAssets: ['favicon.svg'],
+      manifest: {
+        name: 'Squarify',
+        short_name: 'Squarify',
+        description: 'Pad photos to a uniform aspect ratio',
+        theme_color: '#4f46e5',
+        background_color: '#f9fafb',
+        display: 'standalone',
+        start_url: '/',
+        icons: [
+          { src: '/favicon.svg', sizes: 'any', type: 'image/svg+xml', purpose: 'any maskable' },
+        ],
+      },
+      workbox: {
+        globPatterns: ['**/*.{js,css,html,svg,png,woff2}'],
+        maximumFileSizeToCacheInBytes: 3 * 1024 * 1024, // 3 MB for libheif-js WASM
+        runtimeCaching: [
+          {
+            urlPattern: /^https:\/\/fonts\.googleapis\.com\/.*/i,
+            handler: 'CacheFirst',
+            options: { cacheName: 'google-fonts-cache', expiration: { maxEntries: 10, maxAgeSeconds: 60 * 60 * 24 * 365 } },
+          },
+        ],
+      },
+    }),
   ],
 })