From 11a9305bcea320335dbab55501ff5732ecc0f2a8 Mon Sep 17 00:00:00 2001
From: Andymick <andymick03@yahoo.com>
Date: Sat, 18 Jul 2026 11:51:31 +0100
Subject: [PATCH] Add rulers to design specification sheet for reference

- Display ruler marks every 2cm on X and Y axes
- Labels show cm measurements on spec sheet
- Rulers persist on downloaded/printed spec sheets
- Helps manufacturers verify placement and dimensions

Rulers are now visible both during personalization and on final spec sheet.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 src/app/api/orders/[id]/design-spec/route.ts | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/app/api/orders/[id]/design-spec/route.ts b/src/app/api/orders/[id]/design-spec/route.ts
index ab9dc30..5cc139a 100644
--- a/src/app/api/orders/[id]/design-spec/route.ts
+++ b/src/app/api/orders/[id]/design-spec/route.ts
@@ -78,6 +78,21 @@ export async function GET(req: Request, { params }: { params: { id: string } })
             <div style="position: relative; display: inline-block; margin: 15px 0;">
               <img src="${placement}" alt="${side} design placement" class="mockup-image" style="max-height: 400px; width: auto; display: block; border: 1px solid #ddd;">
               <svg viewBox="-60 -60 680 680" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;" preserveAspectRatio="xMidYMid meet">
+                <!-- Ruler marks every 2cm -->
+                ${Array.from({ length: Math.ceil((DISPLAY / (10 * (printAreaWidthMm / 100)))) }).map((_, i) => {
+                  const cm = i * 2;
+                  const px = (cm * DISPLAY) / (printAreaWidthMm / 10);
+                  if (px > DISPLAY) return '';
+                  return `
+                    <!-- Horizontal ruler tick at ${cm}cm -->
+                    <line x1="${px}" y1="-5" x2="${px}" y2="0" stroke="#ddd" stroke-width="1"/>
+                    <text x="${px}" y="-8" font-size="10" fill="#999" text-anchor="middle">${cm}cm</text>
+
+                    <!-- Vertical ruler tick at ${cm}cm -->
+                    <line x1="-5" y1="${px}" x2="0" y2="${px}" stroke="#ddd" stroke-width="1"/>
+                    <text x="-8" y="${px + 3}" font-size="10" fill="#999" text-anchor="end">${cm}</text>
+                  `;
+                }).join('')}
                 <!-- Print area border -->
                 <rect x="${printAreaStartX}" y="${printAreaStartY}" width="${printAreaWidthPx}" height="${printAreaHeightPx}"
                   fill="none" stroke="red" stroke-width="2" stroke-dasharray="5,5" opacity="0.8"/>