fix: improve painter cursor performance by bypassing Vue reactivity (#9339)

## Summary
Previously painter has node performance issue. 
Use direct DOM manipulation for cursor position updates instead of
reactive refs, and add will-change-transform for GPU layer promotion.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9339-fix-improve-painter-cursor-performance-by-bypassing-Vue-reactivity-3176d73d365081d88b23d26e774cebf5)
by [Unito](https://www.unito.io)

src/composables/painter/usePainter.ts

@@ -27,11 +27,12 @@ export const PAINTER_TOOLS: Record<string, PainterTool> = {
 
 interface UsePainterOptions {
   canvasEl: Ref<HTMLCanvasElement | null>
+  cursorEl: Ref<HTMLElement | null>
   modelValue: Ref<string>
 }
 
 export function usePainter(nodeId: string, options: UsePainterOptions) {
-  const { canvasEl, modelValue } = options
+  const { canvasEl, cursorEl, modelValue } = options
   const { t } = useI18n()
   const nodeOutputStore = useNodeOutputStore()
   const toastStore = useToastStore()
@@ -41,8 +42,6 @@ export function usePainter(nodeId: string, options: UsePainterOptions) {
   const canvasWidth = ref(512)
   const canvasHeight = ref(512)
 
-  const cursorX = ref(0)
-  const cursorY = ref(0)
   const cursorVisible = ref(false)
 
   const inputImageUrl = ref<string | null>(null)
@@ -518,8 +517,10 @@ export function usePainter(nodeId: string, options: UsePainterOptions) {
   }
 
   function updateCursorPos(e: PointerEvent) {
-    cursorX.value = e.offsetX
-    cursorY.value = e.offsetY
+    const el = cursorEl.value
+    if (!el) return
+    const size = displayBrushSize.value
+    el.style.transform = `translate(${e.offsetX - size / 2}px, ${e.offsetY - size / 2}px)`
   }
 
   function handlePointerDown(e: PointerEvent) {
@@ -760,8 +761,6 @@ export function usePainter(nodeId: string, options: UsePainterOptions) {
     canvasWidth,
     canvasHeight,
 
-    cursorX,
-    cursorY,
     cursorVisible,
     displayBrushSize,