From 4658b5a8b8ede4cf0ec3806b1ad52dc71fed3a2a Mon Sep 17 00:00:00 2001
From: Andymick <andymick03@yahoo.com>
Date: Sat, 18 Jul 2026 11:54:05 +0100
Subject: [PATCH] Fix: Pass product prop to PrintSurface for ruler calculations

- Add product parameter to PrintSurface component props
- Pass product to both front and back PrintSurface calls
- Allows rulers to access product.printAreaWidthMm for cm calculations
- Fixes ReferenceError: product is not defined

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 src/components/DesignCanvas.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/DesignCanvas.tsx b/src/components/DesignCanvas.tsx
index 032a8ba..66ae779 100644
--- a/src/components/DesignCanvas.tsx
+++ b/src/components/DesignCanvas.tsx
@@ -167,6 +167,7 @@ function PrintSurface({
   caption,
   onNodeReady,
   scale,
+  product,
 }: {
   photo: React.ReactNode;
   printArea: PrintArea;
@@ -181,6 +182,7 @@ function PrintSurface({
   caption: string;
   onNodeReady: () => void;
   scale: number;
+  product: ProductDTO;
 }) {
   const stageW = printArea.wPct * DISPLAY;
   const stageH = printArea.hPct * DISPLAY;
@@ -721,6 +723,7 @@ export default function DesignCanvas({ product }: { product: ProductDTO }) {
               caption="Dashed line marks the print area"
               onNodeReady={() => setNodeReadyTick((t) => t + 1)}
               scale={canvasScale}
+              product={product}
             />
 
             {hasBack && (
@@ -738,6 +741,7 @@ export default function DesignCanvas({ product }: { product: ProductDTO }) {
                 caption="Dashed line marks the print area (back)"
                 onNodeReady={() => setNodeReadyTick((t) => t + 1)}
                 scale={canvasScale}
+                product={product}
               />
             )}
           </>