refactor(ux): consolidate BMAD skills, update design system, and clean up Prisma generated client

keep-notes/components/lab/canvas-board.tsx

@@ -23,7 +23,8 @@ export function CanvasBoard({ initialData, canvasId, name }: CanvasBoardProps) {
   const [isDarkMode, setIsDarkMode] = useState(false)
   const [saveStatus, setSaveStatus] = useState<'saved' | 'saving' | 'error'>('saved')
   const saveTimeoutRef = useRef<NodeJS.Timeout | null>(null)
-  
+  const filesRef = useRef<BinaryFiles>({})
+
   // Parse initial state safely (ONLY ON MOUNT to prevent Next.js revalidation infinite loops)
   const [elements] = useState<readonly ExcalidrawElement[]>(() => {
     if (initialData) {
@@ -32,6 +33,10 @@ export function CanvasBoard({ initialData, canvasId, name }: CanvasBoardProps) {
         if (parsed && Array.isArray(parsed)) {
             return parsed
         } else if (parsed && parsed.elements) {
+            // Restore binary files if present
+            if (parsed.files && typeof parsed.files === 'object') {
+              filesRef.current = parsed.files
+            }
             return parsed.elements
         }
       } catch (e) {
@@ -57,34 +62,21 @@ export function CanvasBoard({ initialData, canvasId, name }: CanvasBoardProps) {
     return () => observer.disconnect()
   }, [])
 
-  // Prevent Excalidraw from overriding document.documentElement.dir.
-  // Excalidraw internally sets `document.documentElement.dir = "ltr"` which
-  // breaks the RTL layout of the parent sidebar and header.
-  useEffect(() => {
-    const savedDir = document.documentElement.dir || 'ltr'
-
-    const dirObserver = new MutationObserver(() => {
-      if (document.documentElement.dir !== savedDir) {
-        document.documentElement.dir = savedDir
-      }
-    })
-    dirObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['dir'] })
-
-    return () => dirObserver.disconnect()
-  }, [])
-
   const handleChange = (
     excalidrawElements: readonly ExcalidrawElement[],
     appState: AppState,
     files: BinaryFiles
   ) => {
+    // Keep files ref up to date so we can include them in the save payload
+    if (files) filesRef.current = files
+
     if (saveTimeoutRef.current) clearTimeout(saveTimeoutRef.current)
-    
+
     setSaveStatus('saving')
     saveTimeoutRef.current = setTimeout(async () => {
       try {
-        // Excalidraw states are purely based on the geometric elements
-        const snapshot = JSON.stringify(excalidrawElements)
+        // Save both elements and binary files so images persist across page changes
+        const snapshot = JSON.stringify({ elements: excalidrawElements, files: filesRef.current })
         await fetch('/api/canvas', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
@@ -100,8 +92,8 @@ export function CanvasBoard({ initialData, canvasId, name }: CanvasBoardProps) {
 
   return (
     <div className="absolute inset-0 h-full w-full bg-slate-50 dark:bg-[#121212]" dir="ltr">
-      <Excalidraw 
-        initialData={{ elements }}
+      <Excalidraw
+        initialData={{ elements, files: filesRef.current }}
         theme={isDarkMode ? "dark" : "light"}
         onChange={handleChange}
         libraryReturnUrl={typeof window !== 'undefined' ? window.location.origin + window.location.pathname + window.location.search : undefined}