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>

.claude/CLAUDE.md

@@ -19,15 +19,17 @@
 git push origin main && git push gitea main
 
 # 3. Auf Mac Mini pullen und Container neu bauen:
-ssh macmini "cd /Users/benjaminadmin/Projekte/breakpilot-lehrer && git pull --no-rebase origin main"
-ssh macmini "cd /Users/benjaminadmin/Projekte/breakpilot-lehrer && /usr/local/bin/docker compose build --no-cache <service> && /usr/local/bin/docker compose up -d <service>"
+ssh macmini "git -C /Users/benjaminadmin/Projekte/breakpilot-lehrer pull --no-rebase origin main"
+ssh macmini "/usr/local/bin/docker compose -f /Users/benjaminadmin/Projekte/breakpilot-lehrer/docker-compose.yml build --no-cache <service>"
+ssh macmini "/usr/local/bin/docker compose -f /Users/benjaminadmin/Projekte/breakpilot-lehrer/docker-compose.yml up -d <service>"
 ```
 
 ### SSH-Verbindung (fuer Docker/Tests)
 
-```bash
-ssh macmini "cd /Users/benjaminadmin/Projekte/breakpilot-lehrer && <cmd>"
-```
+**WICHTIG:** `cd` in SSH-Kommandos funktioniert NICHT zuverlaessig! Stattdessen:
+- Git: `git -C /Users/benjaminadmin/Projekte/breakpilot-lehrer <cmd>`
+- Docker: `/usr/local/bin/docker compose -f /Users/benjaminadmin/Projekte/breakpilot-lehrer/docker-compose.yml <cmd>`
+- Logs: `/usr/local/bin/docker logs -f bp-lehrer-<service>`
 
 ---
 
@@ -170,10 +172,10 @@ breakpilot-lehrer/
 
 ```bash
 # Lehrer-Services starten (Core muss laufen!)
-ssh macmini "cd /Users/benjaminadmin/Projekte/breakpilot-lehrer && /usr/local/bin/docker compose up -d"
+ssh macmini "/usr/local/bin/docker compose -f /Users/benjaminadmin/Projekte/breakpilot-lehrer/docker-compose.yml up -d"
 
 # Einzelnen Service neu bauen
-ssh macmini "cd /Users/benjaminadmin/Projekte/breakpilot-lehrer && /usr/local/bin/docker compose build --no-cache <service>"
+ssh macmini "/usr/local/bin/docker compose -f /Users/benjaminadmin/Projekte/breakpilot-lehrer/docker-compose.yml build --no-cache <service>"
 
 # Logs
 ssh macmini "/usr/local/bin/docker logs -f bp-lehrer-<service>"
@@ -183,6 +185,7 @@ ssh macmini "/usr/local/bin/docker ps --filter name=bp-lehrer"
 ```
 
 **WICHTIG:** Docker-Pfad auf Mac Mini ist `/usr/local/bin/docker` (nicht im Standard-SSH-PATH).
+**WICHTIG:** Immer `-f` mit vollem Pfad zur docker-compose.yml nutzen, `cd` in SSH funktioniert nicht!
 
 ### Frontend-Entwicklung
 

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 ----