feat: accessibility, UX polish, and build tooling improvements

- Add touch event support in selection overlay (issue #1)
- Add keyboard navigation/ARIA for asset grid (issue #2)
- Add Forgot Password flow in AuthForm (issue #3)
- Replace simulated progress with XHR real progress (issue #4)
- Add restricted tab URL check before captureVisibleTab (issue #5)
- Pass output format/quality to offscreen watermark (issue #6)
- Add 30s timeout for offscreen operations (issue #7)
- Add ctx.save()/ctx.restore() around canvas drawing (issue #8)
- Convert share page from raw DOM to React (issue #9)
- Extract inline styles to CSS classes (issue #10)
- Rename createSignedMetadata to createMetadataPayload (issue #11)
- Add sourcemap: 'hidden' to vite.config.ts (issue #12)
- Add pre-build version sync validation (issue #13)

Co-authored-by: numbers-official <181934381+numbers-official@users.noreply.github.com>

Author: Copilot

package-lock.json

@@ -5,6 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite build --watch --mode development",
+    "prebuild": "node scripts/validate-version.js",
     "build": "tsc && vite build",
     "preview": "vite preview",
     "type-check": "tsc --noEmit",

package.json

@@ -64,9 +64,9 @@ const zipPath = join(distZipDir, zipName);
 
 console.log(`Creating ${zipName}...`);
 
-// Use native zip command with absolute path
+// Use native zip command with absolute path, excluding source maps
 try {
-  execSync(`zip -r "${zipPath}" .`, {
+  execSync(`zip -r "${zipPath}" . --exclude "*.map"`, {
     cwd: join(rootDir, 'dist'),
     stdio: 'inherit'
   });

scripts/package.js

@@ -0,0 +1,25 @@
+#!/usr/bin/env node
+/**
+ * Pre-build validation: ensure package.json and manifest.template.json have the same version.
+ */
+
+import { readFileSync } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const rootDir = join(__dirname, '..');
+
+const pkg = JSON.parse(readFileSync(join(rootDir, 'package.json'), 'utf-8'));
+const manifest = JSON.parse(readFileSync(join(rootDir, 'manifest.template.json'), 'utf-8'));
+
+if (pkg.version !== manifest.version) {
+  console.error(
+    `Version mismatch: package.json has "${pkg.version}" but manifest.template.json has "${manifest.version}".`
+  );
+  console.error('Please keep both versions in sync before building.');
+  process.exit(1);
+}
+
+console.log(`✓ Version check passed: ${pkg.version}`);

scripts/validate-version.js

@@ -238,27 +238,34 @@ async function handleSelectionComplete(payload: any) {
     // Crop and add watermark via offscreen document
     await ensureOffscreenDocument();
 
-    const response = await chrome.runtime.sendMessage({
-      type: 'ADD_WATERMARK',
-      payload: {
-        dataUrl,
-        timestamp: captureTime.toISOString(),
-        width: coordinates.width,
-        height: coordinates.height,
-        timestampSize: settings.timestampSize,
-        timestampFormat: settings.timestampFormat,
-        timestampOpacity: settings.timestampOpacity,
-        timestampPosition: settings.timestampPosition,
-        includeTimestamp: settings.includeTimestamp,
-        crop: coordinates,
-      },
-    });
-
-    if (response.success) {
-      dataUrl = response.data.dataUrl;
+    const watermarkResponse = await Promise.race([
+      chrome.runtime.sendMessage({
+        type: 'ADD_WATERMARK',
+        payload: {
+          dataUrl,
+          timestamp: captureTime.toISOString(),
+          width: coordinates.width,
+          height: coordinates.height,
+          timestampSize: settings.timestampSize,
+          timestampFormat: settings.timestampFormat,
+          timestampOpacity: settings.timestampOpacity,
+          timestampPosition: settings.timestampPosition,
+          includeTimestamp: settings.includeTimestamp,
+          outputFormat: settings.screenshotFormat === 'jpeg' ? 'jpeg' : 'png',
+          outputQuality: settings.screenshotFormat === 'jpeg' ? settings.screenshotQuality / 100 : undefined,
+          crop: coordinates,
+        },
+      }),
+      new Promise<never>((_, reject) =>
+        setTimeout(() => reject(new Error('Offscreen operation timed out')), 30000)
+      ),
+    ]) as any;
+
+    if (watermarkResponse.success) {
+      dataUrl = watermarkResponse.data.dataUrl;
       console.log('✅ Selection cropped and watermark added');
     } else {
-      console.warn('Failed to process selection:', response.error);
+      console.warn('Failed to process selection:', watermarkResponse.error);
     }
 
     // Get location if enabled via offscreen document
@@ -418,6 +425,20 @@ async function handleScreenshotCapture(
       return await handleSelectionCapture(tab);
     }
 
+    // Check for restricted URLs that cannot be captured
+    const restrictedPatterns = [
+      /^chrome:\/\//,
+      /^chrome-extension:\/\//,
+      /^https:\/\/chrome\.google\.com\/webstore/,
+      /^about:/,
+      /^edge:\/\//,
+    ];
+    if (tab.url && restrictedPatterns.some((re) => re.test(tab.url!))) {
+      throw new Error(
+        'Screenshots cannot be taken on this page. Please navigate to a regular website and try again.'
+      );
+    }
+
     // Capture timestamp at the very start for consistency
     const captureTime = new Date();
 
@@ -439,26 +460,33 @@ async function handleScreenshotCapture(
     try {
       await ensureOffscreenDocument();
 
-      const response = await chrome.runtime.sendMessage({
-        type: 'ADD_WATERMARK',
-        payload: {
-          dataUrl,
-          timestamp: captureTime.toISOString(),
-          width,
-          height,
-          timestampSize: settings.timestampSize,
-          timestampFormat: settings.timestampFormat,
-          timestampOpacity: settings.timestampOpacity,
-          timestampPosition: settings.timestampPosition,
-          includeTimestamp: settings.includeTimestamp,
-        },
-      });
-
-      if (response.success) {
-        dataUrl = response.data.dataUrl;
+      const watermarkResponse = await Promise.race([
+        chrome.runtime.sendMessage({
+          type: 'ADD_WATERMARK',
+          payload: {
+            dataUrl,
+            timestamp: captureTime.toISOString(),
+            width,
+            height,
+            timestampSize: settings.timestampSize,
+            timestampFormat: settings.timestampFormat,
+            timestampOpacity: settings.timestampOpacity,
+            timestampPosition: settings.timestampPosition,
+            includeTimestamp: settings.includeTimestamp,
+            outputFormat: settings.screenshotFormat === 'jpeg' ? 'jpeg' : 'png',
+            outputQuality: settings.screenshotFormat === 'jpeg' ? settings.screenshotQuality / 100 : undefined,
+          },
+        }),
+        new Promise<never>((_, reject) =>
+          setTimeout(() => reject(new Error('Offscreen operation timed out')), 30000)
+        ),
+      ]) as any;
+
+      if (watermarkResponse.success) {
+        dataUrl = watermarkResponse.data.dataUrl;
         console.log('✅ Watermark added successfully');
       } else {
-        console.warn('Failed to add watermark:', response.error);
+        console.warn('Failed to add watermark:', watermarkResponse.error);
       }
     } catch (error) {
       console.error('Watermark error:', error);

src/background/service-worker.ts

@@ -89,6 +89,11 @@ if (!(window as any).__proofSnapSelectionActive) {
     document.addEventListener('mousemove', handleMouseMove);
     document.addEventListener('mouseup', handleMouseUp);
     document.addEventListener('keydown', handleKeyDown);
+
+    // Touch event support for touchscreen devices
+    overlay.addEventListener('touchstart', handleTouchStart, { passive: false });
+    document.addEventListener('touchmove', handleTouchMove, { passive: false });
+    document.addEventListener('touchend', handleTouchEnd);
   }
 
   /**
@@ -175,6 +180,90 @@ if (!(window as any).__proofSnapSelectionActive) {
     });
   }
 
+  /**
+   * Handle touch start - begin selection on touchscreen devices
+   */
+  function handleTouchStart(e: TouchEvent): void {
+    e.preventDefault();
+    const touch = e.touches[0];
+    isSelecting = true;
+    startX = touch.clientX;
+    startY = touch.clientY;
+
+    if (selectionBox) {
+      selectionBox.style.display = 'block';
+      selectionBox.style.left = `${startX}px`;
+      selectionBox.style.top = `${startY}px`;
+      selectionBox.style.width = '0px';
+      selectionBox.style.height = '0px';
+    }
+
+    if (overlay) {
+      overlay.style.background = 'transparent';
+    }
+  }
+
+  /**
+   * Handle touch move - update selection box on touchscreen devices
+   */
+  function handleTouchMove(e: TouchEvent): void {
+    e.preventDefault();
+    if (!isSelecting || !selectionBox) return;
+
+    const touch = e.touches[0];
+    const currentX = touch.clientX;
+    const currentY = touch.clientY;
+
+    const left = Math.min(startX, currentX);
+    const top = Math.min(startY, currentY);
+    const width = Math.abs(currentX - startX);
+    const height = Math.abs(currentY - startY);
+
+    selectionBox.style.left = `${left}px`;
+    selectionBox.style.top = `${top}px`;
+    selectionBox.style.width = `${width}px`;
+    selectionBox.style.height = `${height}px`;
+  }
+
+  /**
+   * Handle touch end - complete selection on touchscreen devices
+   */
+  function handleTouchEnd(e: TouchEvent): void {
+    if (!isSelecting) return;
+
+    isSelecting = false;
+
+    const touch = e.changedTouches[0];
+    const currentX = touch.clientX;
+    const currentY = touch.clientY;
+
+    const left = Math.min(startX, currentX);
+    const top = Math.min(startY, currentY);
+    const width = Math.abs(currentX - startX);
+    const height = Math.abs(currentY - startY);
+
+    if (width < 10 || height < 10) {
+      cleanup();
+      sendResponse({ cancelled: true, reason: 'Selection too small' });
+      return;
+    }
+
+    const dpr = window.devicePixelRatio || 1;
+    const coordinates: SelectionCoordinates = {
+      x: Math.round(left * dpr),
+      y: Math.round(top * dpr),
+      width: Math.round(width * dpr),
+      height: Math.round(height * dpr),
+    };
+
+    cleanup();
+    sendResponse({
+      cancelled: false,
+      coordinates,
+      viewportCoordinates: { x: left, y: top, width, height },
+    });
+  }
+
   /**
    * Handle key down - cancel on Escape
    */
@@ -203,6 +292,12 @@ if (!(window as any).__proofSnapSelectionActive) {
     document.removeEventListener('mouseup', handleMouseUp);
     document.removeEventListener('keydown', handleKeyDown);
 
+    if (overlay) {
+      overlay.removeEventListener('touchstart', handleTouchStart);
+    }
+    document.removeEventListener('touchmove', handleTouchMove);
+    document.removeEventListener('touchend', handleTouchEnd);
+
     const elements = [
       'proofsnap-selection-overlay',
       'proofsnap-selection-box',

src/content/selection-overlay.ts

@@ -16,6 +16,8 @@ interface WatermarkPayload {
   timestampOpacity?: number;
   timestampPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
   includeTimestamp?: boolean;
+  outputFormat?: 'png' | 'jpeg' | 'webp';
+  outputQuality?: number;
   // Crop coordinates (optional)
   crop?: {
     x: number;
@@ -151,19 +153,31 @@ async function addWatermark(payload: WatermarkPayload): Promise<{ dataUrl: strin
 
   // Add timestamp if enabled
   if (payload.includeTimestamp !== false) {
+    ctx.save();
     drawTimestamp(ctx, payload.timestamp, {
       size: payload.timestampSize,
       format: payload.timestampFormat,
       opacity: payload.timestampOpacity,
       position: payload.timestampPosition,
     });
+    ctx.restore();
   }
 
   // Always draw logo
+  ctx.save();
   await drawLogo(ctx, canvas.width, canvas.height);
-
-  // Convert to data URL
-  return { dataUrl: canvas.toDataURL('image/png') };
+  ctx.restore();
+
+  // Convert to data URL using the requested format
+  const mimeType =
+    payload.outputFormat === 'jpeg' ? 'image/jpeg' :
+    payload.outputFormat === 'webp' ? 'image/webp' :
+    'image/png';
+  const quality =
+    (payload.outputFormat === 'jpeg' || payload.outputFormat === 'webp')
+      ? (payload.outputQuality ?? 0.9)
+      : undefined;
+  return { dataUrl: canvas.toDataURL(mimeType, quality) };
 }
 
 /**