Add BMAD framework, authentication, and new features

keep-notes/hooks/use-resize-observer.ts

@@ -0,0 +1,33 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+
+export function useResizeObserver(callback: (entry: ResizeObserverEntry) => void) {
+  const ref = useRef<HTMLElement>(null);
+  const frameId = useRef<number>(0);
+
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+
+    const observer = new ResizeObserver((entries) => {
+      // Cancel previous frame to avoid stacking updates
+      if (frameId.current) cancelAnimationFrame(frameId.current);
+      
+      frameId.current = requestAnimationFrame(() => {
+        for (const entry of entries) {
+          callback(entry);
+        }
+      });
+    });
+
+    observer.observe(element);
+
+    return () => {
+      observer.disconnect();
+      if (frameId.current) cancelAnimationFrame(frameId.current);
+    };
+  }, [callback]);
+
+  return ref;
+}