Fix fabric.js v6 import error causing blank page

- Replace deprecated 'import { fabric } from fabric' with named imports
- Editor.vue: import Canvas, Rect, FabricText
- symmetry.js: import FabricImage, Rect, Group
- Clear Vite cache to rebuild dependencies

frontend/src/utils/symmetry.js

@@ -1,12 +1,12 @@
-import { fabric } from 'fabric'
+import { FabricImage, Rect, Group } from 'fabric'
 
 export async function createSymmetricalImage(originalImage, canvasWidth, canvasHeight) {
   const imgWidth = originalImage.width
   const imgHeight = originalImage.height
   const halfHeight = imgHeight / 2
 
-  const topHalf = new fabric.Image(originalImage, {
-    clipPath: new fabric.Rect({
+  const topHalf = new FabricImage(originalImage, {
+    clipPath: new Rect({
       width: imgWidth,
       height: halfHeight,
       originX: 'left',
@@ -17,8 +17,8 @@ export async function createSymmetricalImage(originalImage, canvasWidth, canvasH
     scaleY: (canvasHeight / 2) / halfHeight
   })
 
-  const bottomHalf = new fabric.Image(originalImage, {
-    clipPath: new fabric.Rect({
+  const bottomHalf = new FabricImage(originalImage, {
+    clipPath: new Rect({
       width: imgWidth,
       height: halfHeight,
       originX: 'left',
@@ -31,7 +31,7 @@ export async function createSymmetricalImage(originalImage, canvasWidth, canvasH
     flipY: true
   })
 
-  const group = new fabric.Group([topHalf, bottomHalf], {
+  const group = new Group([topHalf, bottomHalf], {
     left: 0,
     top: 0,
     width: canvasWidth,
@@ -42,20 +42,16 @@ export async function createSymmetricalImage(originalImage, canvasWidth, canvasH
 }
 
 export async function loadAndProcessImage(imageUrl) {
-  return new Promise((resolve, reject) => {
-    fabric.Image.fromURL(imageUrl, (img) => {
-      if (!img) {
-        reject(new Error('Failed to load image'))
-        return
-      }
-      resolve(img)
-    }, { crossOrigin: 'anonymous' })
-  })
+  const img = await FabricImage.fromURL(imageUrl, { crossOrigin: 'anonymous' })
+  if (!img) {
+    throw new Error('Failed to load image')
+  }
+  return img
 }
 
 export function applySymmetryToFaceCard(canvas, imageUrl, cardWidth, cardHeight) {
   return new Promise((resolve, reject) => {
-    fabric.Image.fromURL(imageUrl, async (originalImage) => {
+    FabricImage.fromURL(imageUrl, { crossOrigin: 'anonymous' }).then(async (originalImage) => {
       if (!originalImage) {
         reject(new Error('Failed to load image'))
         return
@@ -76,6 +72,6 @@ export function applySymmetryToFaceCard(canvas, imageUrl, cardWidth, cardHeight)
       canvas.add(symmetricalGroup)
       canvas.renderAll()
       resolve(symmetricalGroup)
-    }, { crossOrigin: 'anonymous' })
+    }).catch(reject)
   })
-}
+}