Capture placement preview when sending design to customer

Also capture the design composited on the product photo, so customers
see both the design preview and how it looks on the actual product.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

src/components/DesignCanvas.tsx

@@ -1061,6 +1061,31 @@ export default function DesignCanvas({
         backGuides.forEach((g) => g.show());
       }
 
+      // Capture placement preview (design on product)
+      let frontPlacementUrl: string | null = null;
+      const getPhotoInfo = (v: 'front' | 'back') => {
+        const colorPhoto = v === 'front' ? product.colorPhotos[color] : product.colorPhotosBack[color];
+        if (colorPhoto) return { url: colorPhoto, tint: false };
+        const activePhoto = v === 'front' ? product.imageUrl : product.imageUrlBack;
+        if (activePhoto && product.photoRecolorable) return { url: activePhoto, tint: true };
+        return activePhoto ? { url: activePhoto, tint: false } : null;
+      };
+      const photoInfo = getPhotoInfo('front');
+      const box = {
+        left: frontPrintArea.xPct * DISPLAY,
+        top: frontPrintArea.yPct * DISPLAY,
+        w: frontPrintArea.wPct * DISPLAY,
+        h: frontPrintArea.hPct * DISPLAY,
+      };
+      if (photoInfo) {
+        frontPlacementUrl = await composePlacementImage(
+          photoInfo.url,
+          photoInfo.tint ? { tint: true, color } : null,
+          frontStage,
+          box,
+        ).catch(() => null);
+      }
+
       // Send to API with the new preview images
       const res = await fetch(`/api/designs/${id}/send-to-customer`, {
         method: 'POST',
@@ -1068,6 +1093,7 @@ export default function DesignCanvas({
         body: JSON.stringify({
           designPreviewUrl: frontDataUrl,
           designPreviewUrlBack: backDataUrl,
+          placementPreviewUrl: frontPlacementUrl,
         }),
       });