Remove reference size inputs from personalization page

- Remove Reference Size input fields from customer design page
- Rulers now use product.referenceWidthCm and product.referenceHeightCm
- Reference size is set by admin when editing product (not customer)
- Simplify Add to bag validation - only check for design elements
- Remove reference size state from DesignCanvas component

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

src/components/DesignCanvas.tsx

@@ -168,8 +168,6 @@ function PrintSurface({
   onNodeReady,
   scale,
   product,
-  referenceWidthCm,
-  referenceHeightCm,
 }: {
   photo: React.ReactNode;
   printArea: PrintArea;
@@ -185,8 +183,6 @@ function PrintSurface({
   onNodeReady: () => void;
   scale: number;
   product: ProductDTO;
-  referenceWidthCm: number | null;
-  referenceHeightCm: number | null;
 }) {
   const stageW = printArea.wPct * DISPLAY;
   const stageH = printArea.hPct * DISPLAY;
@@ -208,7 +204,7 @@ function PrintSurface({
         </div>
 
         {/* Horizontal Ruler */}
-        {referenceWidthCm && referenceWidthCm > 0 && (
+        {product.referenceWidthCm && product.referenceWidthCm > 0 && (
         <div
           className="absolute pointer-events-none bg-paper border-b border-line text-xs font-mono"
           style={{
@@ -223,9 +219,9 @@ function PrintSurface({
         >
           {(() => {
             const marks = [];
-            const pxPerCm = DISPLAY / referenceWidthCm;
+            const pxPerCm = DISPLAY / product.referenceWidthCm;
 
-            for (let cm = 0; cm <= Math.ceil(referenceWidthCm); cm += 2) {
+            for (let cm = 0; cm <= Math.ceil(product.referenceWidthCm); cm += 2) {
               const px = cm * pxPerCm;
               if (px > DISPLAY) break;
               marks.push(
@@ -250,7 +246,7 @@ function PrintSurface({
         )}
 
         {/* Vertical Ruler */}
-        {referenceHeightCm && referenceHeightCm > 0 && (
+        {product.referenceHeightCm && product.referenceHeightCm > 0 && (
         <div
           className="absolute pointer-events-none bg-paper border-r border-line text-xs font-mono"
           style={{
@@ -266,9 +262,9 @@ function PrintSurface({
         >
           {(() => {
             const marks = [];
-            const pxPerCm = DISPLAY / referenceHeightCm;
+            const pxPerCm = DISPLAY / product.referenceHeightCm;
 
-            for (let cm = 0; cm <= Math.ceil(referenceHeightCm); cm += 2) {
+            for (let cm = 0; cm <= Math.ceil(product.referenceHeightCm); cm += 2) {
               const px = cm * pxPerCm;
               if (px > DISPLAY) break;
               marks.push(
@@ -406,8 +402,6 @@ export default function DesignCanvas({ product }: { product: ProductDTO }) {
   const [justAdded, setJustAdded] = useState(false);
   const [showLoginPrompt, setShowLoginPrompt] = useState(false);
   const [nodeReadyTick, setNodeReadyTick] = useState(0);
-  const [referenceWidthCm, setReferenceWidthCm] = useState<number | null>(null);
-  const [referenceHeightCm, setReferenceHeightCm] = useState<number | null>(null);
 
   const stageFrontRef = useRef<Konva.Stage | null>(null);
   const stageBackRef = useRef<Konva.Stage | null>(null);
@@ -443,10 +437,9 @@ export default function DesignCanvas({ product }: { product: ProductDTO }) {
   const activeStageW = activePrintArea.wPct * DISPLAY;
   const activeStageH = activePrintArea.hPct * DISPLAY;
 
-  // Calculate cm per pixel for display using reference size
+  // Calculate cm per pixel for display using product reference size
   // Reference size maps to full canvas width/height (560px)
-  const cmPerPx = referenceWidthCm && referenceWidthCm > 0 ? referenceWidthCm / DISPLAY : 0;
+  const cmPerPx = product.referenceWidthCm && product.referenceWidthCm > 0 ? product.referenceWidthCm / DISPLAY : 0;
-  const cmPerPxHeight = referenceHeightCm && referenceHeightCm > 0 ? referenceHeightCm / DISPLAY : 0;
   const pxToCm = (px: number) => {
     if (!cmPerPx || cmPerPx <= 0) return '—';
     const cm = px * cmPerPx;
@@ -750,8 +743,6 @@ export default function DesignCanvas({ product }: { product: ProductDTO }) {
               onNodeReady={() => setNodeReadyTick((t) => t + 1)}
               scale={canvasScale}
               product={product}
-              referenceWidthCm={referenceWidthCm}
-              referenceHeightCm={referenceHeightCm}
             />
 
             {hasBack && (
@@ -770,8 +761,6 @@ export default function DesignCanvas({ product }: { product: ProductDTO }) {
                 onNodeReady={() => setNodeReadyTick((t) => t + 1)}
                 scale={canvasScale}
                 product={product}
-                referenceWidthCm={referenceWidthCm}
-                referenceHeightCm={referenceHeightCm}
               />
             )}
           </>
@@ -861,38 +850,6 @@ export default function DesignCanvas({ product }: { product: ProductDTO }) {
           </div>
         )}
 
-        {canPersonalize && (
-        <div>
-          <p className="tag-label mb-3">Reference Size (cm)</p>
-          <div className="flex gap-3">
-            <div className="flex-1">
-              <label className="text-xs text-muted">Width</label>
-              <input
-                type="number"
-                min="1"
-                step="0.1"
-                value={referenceWidthCm ?? ''}
-                onChange={(e) => setReferenceWidthCm(e.target.value ? Number(e.target.value) : null)}
-                placeholder="e.g. 40"
-                className="w-full border border-line bg-paper px-3 py-2 text-sm placeholder:text-muted"
-              />
-            </div>
-            <div className="flex-1">
-              <label className="text-xs text-muted">Height</label>
-              <input
-                type="number"
-                min="1"
-                step="0.1"
-                value={referenceHeightCm ?? ''}
-                onChange={(e) => setReferenceHeightCm(e.target.value ? Number(e.target.value) : null)}
-                placeholder="e.g. 60"
-                className="w-full border border-line bg-paper px-3 py-2 text-sm placeholder:text-muted"
-              />
-            </div>
-          </div>
-        </div>
-        )}
-
         {canPersonalize && (
         <div>
           <p className="tag-label mb-3">
@@ -1040,9 +997,9 @@ export default function DesignCanvas({ product }: { product: ProductDTO }) {
             </div>
             <button
               onClick={handleAddToBag}
-              disabled={!canPersonalize || (elementsFront.length === 0 && elementsBack.length === 0) || !referenceWidthCm || !referenceHeightCm}
+              disabled={elementsFront.length === 0 && elementsBack.length === 0}
               className={`flex-1 px-6 py-3 text-sm font-medium transition-colors ${
-                !canPersonalize || (elementsFront.length === 0 && elementsBack.length === 0) || !referenceWidthCm || !referenceHeightCm
+                elementsFront.length === 0 && elementsBack.length === 0
                   ? 'bg-muted text-muted/50 cursor-not-allowed'
                   : 'bg-clay text-paper hover:bg-clay-dark'
               }`}
@@ -1050,10 +1007,7 @@ export default function DesignCanvas({ product }: { product: ProductDTO }) {
               Add to bag — <Price cents={((elementsFront.length > 0 || elementsBack.length > 0) ? effectivePriceForPersonalised : product.effectivePrice) * quantity} />
             </button>
           </div>
-          {canPersonalize && (!referenceWidthCm || !referenceHeightCm) && (
+          {elementsFront.length === 0 && elementsBack.length === 0 && (
-            <p className="text-xs text-splash-pink">Please enter the reference size (width and height) before adding to bag</p>
-          )}
-          {canPersonalize && (elementsFront.length === 0 && elementsBack.length === 0) && (referenceWidthCm && referenceHeightCm) && (
             <p className="text-xs text-splash-pink">Add text or images to personalize your design before adding to bag</p>
           )}
           {justAdded && <p className="text-sm text-pine">Added to your bag.</p>}