fix: HIGH issues #13,#14,#18,#19,#20 — frontend state/sync: copy-paste selection, dynamic activeLayer, group creation, Yjs awareness protocol, connect sync

frontend/src/crdt/useYjsBinding.ts

@@ -82,17 +82,18 @@ export function useYjsBinding(opts: UseYjsBindingOptions): UseYjsBindingResult {
     const doc = new YjsDocument();
     yjsDocRef.current = doc;
 
+    const awareness = new AwarenessManager(doc, userId);
+    awarenessRef.current = awareness;
+
     const provider = new WebSocketProvider({
       url: wsUrl,
       docName,
       yjsDoc: doc,
+      awareness,
       onStatusChange: (s) => setStatus(s),
     });
     providerRef.current = provider;
 
-    const awareness = new AwarenessManager(doc, userId);
-    awarenessRef.current = awareness;
-
     // Sync local state from Y.Doc on changes
     const syncState = () => {
       setElements(doc.getElements());
@@ -123,6 +124,8 @@ export function useYjsBinding(opts: UseYjsBindingOptions): UseYjsBindingResult {
 
     // Forward local updates to server
     const unbindLocal = provider.bindLocalUpdates();
+    // Forward local awareness updates to server
+    const unbindAwarenessUpdates = provider.bindAwarenessUpdates();
 
     // Connect
     provider.connect(token);
@@ -135,7 +138,9 @@ export function useYjsBinding(opts: UseYjsBindingOptions): UseYjsBindingResult {
       unbindDoc();
       unbindAwareness();
       unbindLocal();
+      unbindAwarenessUpdates();
       awareness.removeSelf();
+      awareness.destroy();
       provider.disconnect();
       doc.destroy();
       yjsDocRef.current = null;