Fix: Preserve print area when editing products

PhotoPrintAreaField now accepts and loads existing print area coordinates
when editing products. Previously, the component always initialized to
DEFAULT_BOX, causing the saved print area to be lost when editing.

Changes:
- Export Box type from PhotoPrintAreaField
- Add existingPrintArea prop to PhotoPrintAreaField
- Initialize box state with existing print area if provided
- Convert print area from database format (0-1 decimals) to component format (0-100 percentages)
- Update edit page to parse and pass existing print area values

Result: Print area masks now persist when editing products and adding them
to different catalogs (ready-made, plain, etc).

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

src/components/PhotoPrintAreaField.tsx

@@ -2,7 +2,7 @@
 
 import { useRef, useState } from 'react';
 
-type Box = { xPct: number; yPct: number; wPct: number; hPct: number }; // 0-100
+export type Box = { xPct: number; yPct: number; wPct: number; hPct: number }; // 0-100
 
 const DEFAULT_BOX: Box = { xPct: 30, yPct: 25, wPct: 40, hPct: 35 };
 const MIN_SIZE = 6; // percent
@@ -10,12 +10,14 @@ const MIN_SIZE = 6; // percent
 export default function PhotoPrintAreaField({
   variant = 'front',
   existingImageUrl,
+  existingPrintArea,
 }: {
   variant?: 'front' | 'back';
   existingImageUrl?: string;
+  existingPrintArea?: Box;
 }) {
   const [previewUrl, setPreviewUrl] = useState<string | null>(null);
-  const [box, setBox] = useState<Box>(DEFAULT_BOX);
+  const [box, setBox] = useState<Box>(existingPrintArea || DEFAULT_BOX);
   const [showPrintAreaEditor, setShowPrintAreaEditor] = useState(false);
   const [isRemoved, setIsRemoved] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);