fix: Fabric.js v6 API compatibility + CLAUDE.md SSH commands

- Replace setBackgroundImage() with backgroundImage property (v6 breaking change)
- Replace setWidth/setHeight with Canvas constructor options
- Fix opacity handler to use direct property access
- Update CLAUDE.md: use git -C and docker compose -f instead of cd

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

admin-lehrer/components/ocr-pipeline/FabricReconstructionCanvas.tsx

@@ -100,34 +100,28 @@ export function FabricReconstructionCanvas({
         const canvasEl = canvasElRef.current
         if (!canvasEl) return
 
-        const canvas = new fabricModule.Canvas(canvasEl, {
-          selection: true,
-          preserveObjectStacking: true,
-        }) as unknown as FabricCanvas
-
-        fabricRef.current = canvas
-
-        // Load background image
+        // Load background image first to get dimensions
         const imgUrl = `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/dewarped`
 
-        const bgImg = await new Promise<FabricImage>((resolve, reject) => {
-          fabricModule.FabricImage.fromURL(imgUrl, { crossOrigin: 'anonymous' })
-            .then((img: FabricImage) => resolve(img))
-            .catch((err: Error) => reject(err))
-        })
+        const bgImg = await fabricModule.FabricImage.fromURL(imgUrl, { crossOrigin: 'anonymous' }) as FabricImage
 
         if (disposed) return
 
         const imgW = (bgImg.width || 800) * (bgImg.scaleX || 1)
         const imgH = (bgImg.height || 600) * (bgImg.scaleY || 1)
 
-        canvas.setWidth(imgW)
-        canvas.setHeight(imgH)
-
         bgImg.set({ opacity: opacity / 100, selectable: false, evented: false } as Record<string, unknown>)
-        canvas.setBackgroundImage(bgImg, () => {
-          canvas.renderAll()
-        })
+
+        const canvas = new fabricModule.Canvas(canvasEl, {
+          width: imgW,
+          height: imgH,
+          selection: true,
+          preserveObjectStacking: true,
+          backgroundImage: bgImg,
+        }) as unknown as FabricCanvas
+
+        fabricRef.current = canvas
+        canvas.renderAll()
 
         // Add cell objects
         addCellObjects(canvas, fabricModule, cells, imgW, imgH)
@@ -221,9 +215,8 @@ export function FabricReconstructionCanvas({
     setOpacity(val)
     const canvas = fabricRef.current
     if (!canvas) return
-    // Update background image opacity
-    // Access internal property — Fabric stores bgImage on the canvas
-    const bgImg = (canvas as unknown as Record<string, unknown>).backgroundImage as FabricObject | null
+    // Fabric v6: backgroundImage is a direct property on the canvas
+    const bgImg = (canvas as unknown as { backgroundImage?: FabricObject }).backgroundImage
     if (bgImg) {
       bgImg.set({ opacity: val / 100 })
       canvas.renderAll()
@@ -235,8 +228,8 @@ export function FabricReconstructionCanvas({
     setZoom(val)
     const canvas = fabricRef.current
     if (!canvas) return
-    canvas.setZoom(val / 100)
-    canvas.renderAll()
+    ;(canvas as unknown as { zoom: number }).zoom = val / 100
+    canvas.requestRenderAll()
   }, [])
 
   // ---- Undo / Redo via keyboard ----