@abraca/nuxt 1.6.0 → 1.8.0

package/dist/runtime/components/renderers/table/ATableHierarchyMode.vue.d.ts

@@ -0,0 +1,26 @@
+import type { useTableView } from '../../../composables/useTableView.js';
+import type { AbracadabraLocale } from '../../../locale.js';
+type TableLabels = AbracadabraLocale['renderers']['table'];
+type __VLS_Props = {
+    tree: ReturnType<typeof import('../../../composables/useChildTree').useChildTree>;
+    tableView: ReturnType<typeof useTableView>;
+    states: Array<Record<string, any>>;
+    myClientId: number;
+    setLocalState: (state: Record<string, any>) => void;
+    editable?: boolean;
+    labels?: Partial<TableLabels>;
+};
+declare function addColumn(): void;
+declare function addRow(): void;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    addColumn: typeof addColumn;
+    addRow: typeof addRow;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    openNode: (id: string, label: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOpenNode?: ((id: string, label: string) => any) | undefined;
+}>, {
+    editable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/composables/useAwareness.js

@@ -13,20 +13,31 @@ export function useAwareness() {
     states.value = new Map(awareness.getStates());
   }
   let _unsub = null;
+  let _rafId = null;
+  let _rafPending = false;
+  const _throttledSync = () => {
+    if (_rafPending) return;
+    _rafPending = true;
+    _rafId = requestAnimationFrame(() => {
+      _rafPending = false;
+      _rafId = null;
+      _syncStates();
+    });
+  };
   function _subscribe() {
     _unsub?.();
     _unsub = null;
     const awareness = provider.value?.awareness;
     if (!awareness) return;
     _syncStates();
-    const handler = () => _syncStates();
-    awareness.on("change", handler);
-    _unsub = () => awareness.off("change", handler);
+    awareness.on("change", _throttledSync);
+    _unsub = () => awareness.off("change", _throttledSync);
   }
   watch(provider, () => _subscribe(), { immediate: true });
   tryOnScopeDispose(() => {
     _unsub?.();
     _unsub = null;
+    if (_rafId !== null) cancelAnimationFrame(_rafId);
   });
   const localState = computed(() => {
     const awareness = provider.value?.awareness;

package/dist/runtime/composables/useBackgroundSync.js

@@ -6,6 +6,8 @@ const lastCompletedAt = ref(null);
 let _manager = null;
 let _stopPeriodicSync = null;
 let _periodicIntervalMs = 5 * 60 * 1e3;
+let _pendingStateChanges = null;
+let _flushScheduled = false;
 const syncedCount = computed(() => {
   let n = 0;
   for (const s of syncStates.value.values()) {
@@ -32,8 +34,22 @@ const progress = computed(() => {
 export function _initBackgroundSync(manager, intervalMs = 5 * 60 * 1e3) {
   _manager = manager;
   _periodicIntervalMs = intervalMs;
+  _pendingStateChanges = null;
+  _flushScheduled = false;
   _manager.on("stateChanged", ({ docId, state }) => {
-    syncStates.value = new Map(syncStates.value).set(docId, state);
+    if (!_pendingStateChanges) _pendingStateChanges = /* @__PURE__ */ new Map();
+    _pendingStateChanges.set(docId, state);
+    if (!_flushScheduled) {
+      _flushScheduled = true;
+      queueMicrotask(() => {
+        _flushScheduled = false;
+        if (!_pendingStateChanges) return;
+        const next = new Map(syncStates.value);
+        for (const [id, s] of _pendingStateChanges) next.set(id, s);
+        _pendingStateChanges = null;
+        syncStates.value = next;
+      });
+    }
   });
   _manager.init().then(() => {
     const existing = _manager.getSyncStatus();
@@ -47,6 +63,8 @@ export function _destroyBackgroundSync() {
   _stopPeriodicSync = null;
   _manager?.destroy();
   _manager = null;
+  _pendingStateChanges = null;
+  _flushScheduled = false;
   syncStates.value = /* @__PURE__ */ new Map();
   isSyncing.value = false;
   isPaused.value = false;

package/dist/runtime/composables/useFileIndex.js

@@ -1,4 +1,5 @@
 import { watch } from "vue";
+import { useDebounceFn } from "@vueuse/core";
 import * as Y from "yjs";
 import { useAbracadabra } from "./useAbracadabra.js";
 import { useBackgroundSync } from "./useBackgroundSync.js";
@@ -29,26 +30,46 @@ export function _destroyFileIndex() {
 function _startWatcher() {
   const { syncStates } = useBackgroundSync();
   const { provider } = useAbracadabra();
-  const stop = watch(syncStates, async (states) => {
-    const p = provider.value;
-    if (!p) return;
-    for (const [docId, state] of states.entries()) {
-      if (state.status !== "synced") continue;
-      try {
-        const childProvider = await p.loadChild(docId);
-        await childProvider.ready;
-        const treeMap = p.document.getMap("doc-tree");
-        const docLabel = treeMap.get(docId)?.label ?? "";
-        const files = [];
-        walkXmlForFiles(childProvider.document.getXmlFragment("default"), docId, docLabel, files);
-        for (const [key, val] of _fileEntries.entries()) {
-          if (val.docId === docId) _fileEntries.delete(key);
+  const pendingDocIds = /* @__PURE__ */ new Set();
+  let isProcessing = false;
+  async function processPending() {
+    if (isProcessing) return;
+    isProcessing = true;
+    try {
+      const batch = [...pendingDocIds];
+      pendingDocIds.clear();
+      const p = provider.value;
+      if (!p) return;
+      for (let i = 0; i < batch.length; i++) {
+        const docId = batch[i];
+        try {
+          const childProvider = await p.loadChild(docId);
+          await childProvider.ready;
+          const treeMap = p.document.getMap("doc-tree");
+          const docLabel = treeMap.get(docId)?.label ?? "";
+          const files = [];
+          walkXmlForFiles(childProvider.document.getXmlFragment("default"), docId, docLabel, files);
+          for (const [key, val] of _fileEntries.entries()) {
+            if (val.docId === docId) _fileEntries.delete(key);
+          }
+          for (const f of files) _fileEntries.set(f.uploadId, f);
+        } catch (e) {
+          if (import.meta.dev) console.warn(`[abracadabra] file-index: failed to index doc ${docId}:`, e);
         }
-        for (const f of files) _fileEntries.set(f.uploadId, f);
-      } catch (e) {
-        if (import.meta.dev) console.warn(`[abracadabra] file-index: failed to index doc ${docId}:`, e);
+        if (i % 5 === 4) await new Promise((r) => setTimeout(r, 0));
       }
+    } finally {
+      isProcessing = false;
+      if (pendingDocIds.size > 0) debouncedProcess();
+    }
+  }
+  const debouncedProcess = useDebounceFn(processPending, 500);
+  const stop = watch(syncStates, (states) => {
+    for (const [docId, state] of states.entries()) {
+      if (state.status !== "synced") continue;
+      pendingDocIds.add(docId);
     }
+    if (pendingDocIds.size > 0) debouncedProcess();
   }, { deep: false });
   _stopWatcher = stop;
 }

package/dist/runtime/composables/useSearchIndex.js

@@ -1,9 +1,11 @@
 import { ref, computed, watch } from "vue";
+import { useDebounceFn } from "@vueuse/core";
 import * as Y from "yjs";
 import { useAbracadabra } from "./useAbracadabra.js";
 import { useBackgroundSync } from "./useBackgroundSync.js";
 let _searchIndex = null;
 const _indexedVersions = /* @__PURE__ */ new Map();
+const _lastSyncedCache = /* @__PURE__ */ new Map();
 const _isReady = ref(false);
 const _indexedCount = ref(0);
 const _error = ref(null);
@@ -51,6 +53,7 @@ export function _initSearchIndex(serverOrigin) {
     _searchIndex = new SearchIndex(serverOrigin);
     _isReady.value = true;
     _indexedVersions.clear();
+    _lastSyncedCache.clear();
     _indexedCount.value = 0;
     _startWatcher();
   }).catch((e) => {
@@ -65,34 +68,56 @@ export function _destroySearchIndex() {
   _searchIndex = null;
   _isReady.value = false;
   _indexedVersions.clear();
+  _lastSyncedCache.clear();
   _indexedCount.value = 0;
   _error.value = null;
 }
 function _startWatcher() {
   const { syncStates } = useBackgroundSync();
   const { provider } = useAbracadabra();
-  const stop = watch(syncStates, async (states) => {
+  const pendingDocIds = /* @__PURE__ */ new Set();
+  let isProcessing = false;
+  async function processPending() {
+    if (isProcessing) return;
+    isProcessing = true;
+    try {
+      const batch = [...pendingDocIds];
+      pendingDocIds.clear();
+      const p = provider.value;
+      if (!p || !_searchIndex) return;
+      for (let i = 0; i < batch.length; i++) {
+        const docId = batch[i];
+        try {
+          const childProvider = await p.loadChild(docId);
+          await childProvider.ready;
+          const rootDoc = p.document;
+          const treeMap = rootDoc.getMap("doc-tree");
+          const entry = treeMap.get(docId);
+          const texts = extractDocTexts(childProvider.document, entry?.label ?? "", entry?.meta);
+          await _searchIndex.index(docId, texts);
+          _indexedVersions.set(docId, _lastSyncedCache.get(docId) ?? 0);
+          _indexedCount.value = _indexedVersions.size;
+        } catch (e) {
+          if (import.meta.dev) console.warn(`[abracadabra] search: failed to index doc ${docId}:`, e);
+        }
+        if (i % 5 === 4) await new Promise((r) => setTimeout(r, 0));
+      }
+    } finally {
+      isProcessing = false;
+      if (pendingDocIds.size > 0) debouncedProcess();
+    }
+  }
+  const debouncedProcess = useDebounceFn(processPending, 500);
+  const stop = watch(syncStates, (states) => {
     if (!_searchIndex) return;
-    const p = provider.value;
-    if (!p) return;
     for (const [docId, state] of states.entries()) {
       if (state.status !== "synced") continue;
       const lastSynced = state.lastSynced ?? 0;
       if (_indexedVersions.get(docId) === lastSynced) continue;
-      try {
-        const childProvider = await p.loadChild(docId);
-        await childProvider.ready;
-        const rootDoc = p.document;
-        const treeMap = rootDoc.getMap("doc-tree");
-        const entry = treeMap.get(docId);
-        const texts = extractDocTexts(childProvider.document, entry?.label ?? "", entry?.meta);
-        await _searchIndex.index(docId, texts);
-        _indexedVersions.set(docId, lastSynced);
-        _indexedCount.value = _indexedVersions.size;
-      } catch (e) {
-        if (import.meta.dev) console.warn(`[abracadabra] search: failed to index doc ${docId}:`, e);
-      }
+      _lastSyncedCache.set(docId, lastSynced);
+      pendingDocIds.add(docId);
     }
+    if (pendingDocIds.size > 0) debouncedProcess();
   }, { deep: false });
   _stopWatcher = stop;
 }

package/dist/runtime/composables/useSlidesNavigation.d.ts

@@ -0,0 +1,45 @@
+import type { Ref } from 'vue';
+import type { TreeEntry } from './useChildTree.js';
+export interface SlidePosition {
+    groupIndex: number;
+    subIndex: number;
+}
+export interface SlidesNavigationOptions {
+    tree: {
+        childrenOf: (parentId: string | null) => TreeEntry[];
+        treeMap: any;
+    };
+    docId: string;
+    setLocalState: (state: any) => void;
+    followingUser: () => string | null | undefined;
+    states: Ref<any[]>;
+}
+export declare function useSlidesNavigation(options: SlidesNavigationOptions): {
+    position: Ref<{
+        groupIndex: number;
+        subIndex: number;
+    }, SlidePosition | {
+        groupIndex: number;
+        subIndex: number;
+    }>;
+    currentSlideId: import("vue").ComputedRef<string | null>;
+    currentSlide: import("vue").ComputedRef<TreeEntry | null>;
+    canGoLeft: import("vue").ComputedRef<boolean>;
+    canGoRight: import("vue").ComputedRef<boolean>;
+    canGoUp: import("vue").ComputedRef<boolean>;
+    canGoDown: import("vue").ComputedRef<boolean>;
+    goLeft: () => void;
+    goRight: () => void;
+    goUp: () => void;
+    goDown: () => void;
+    goTo: (pos: SlidePosition) => void;
+    goNext: () => void;
+    goPrev: () => void;
+    groups: import("vue").ComputedRef<TreeEntry[]>;
+    subSlidesOf: (groupId: string) => TreeEntry[];
+    currentNumber: import("vue").ComputedRef<number>;
+    totalSlides: import("vue").ComputedRef<number>;
+    currentTransition: import("vue").ComputedRef<string>;
+    lastDirection: Ref<"left" | "right" | "up" | "down", "left" | "right" | "up" | "down">;
+    adjacentSlideIds: import("vue").ComputedRef<string[]>;
+};

package/dist/runtime/composables/useSlidesNavigation.js

@@ -0,0 +1,185 @@
+import { ref, computed, watch, nextTick, onBeforeUnmount } from "vue";
+export function useSlidesNavigation(options) {
+  const { tree, setLocalState, followingUser, states } = options;
+  const position = ref({ groupIndex: 0, subIndex: 0 });
+  let syncingFromFollow = false;
+  let lastAppliedT = 0;
+  const lastDirection = ref("right");
+  const groups = computed(() => tree.childrenOf(null));
+  function subSlidesOf(groupId) {
+    return tree.childrenOf(groupId);
+  }
+  const currentSlideId = computed(() => {
+    const g = groups.value[position.value.groupIndex];
+    if (!g) return null;
+    if (position.value.subIndex === 0) return g.id;
+    const subs = subSlidesOf(g.id);
+    const sub = subs[position.value.subIndex - 1];
+    return sub?.id ?? g.id;
+  });
+  const currentSlide = computed(() => {
+    const g = groups.value[position.value.groupIndex];
+    if (!g) return null;
+    if (position.value.subIndex === 0) return g;
+    const subs = subSlidesOf(g.id);
+    return subs[position.value.subIndex - 1] ?? g;
+  });
+  const canGoLeft = computed(() => position.value.groupIndex > 0);
+  const canGoRight = computed(() => position.value.groupIndex < groups.value.length - 1);
+  const canGoUp = computed(() => position.value.subIndex > 0);
+  const canGoDown = computed(() => {
+    const g = groups.value[position.value.groupIndex];
+    if (!g) return false;
+    const subs = subSlidesOf(g.id);
+    return position.value.subIndex < subs.length;
+  });
+  function goLeft() {
+    if (!canGoLeft.value) return;
+    lastDirection.value = "left";
+    position.value = { groupIndex: position.value.groupIndex - 1, subIndex: 0 };
+    broadcastPosition();
+  }
+  function goRight() {
+    if (!canGoRight.value) return;
+    lastDirection.value = "right";
+    position.value = { groupIndex: position.value.groupIndex + 1, subIndex: 0 };
+    broadcastPosition();
+  }
+  function goUp() {
+    if (!canGoUp.value) return;
+    lastDirection.value = "up";
+    position.value = { ...position.value, subIndex: position.value.subIndex - 1 };
+    broadcastPosition();
+  }
+  function goDown() {
+    if (!canGoDown.value) return;
+    lastDirection.value = "down";
+    position.value = { ...position.value, subIndex: position.value.subIndex + 1 };
+    broadcastPosition();
+  }
+  function goTo(pos) {
+    const gi = Math.max(0, Math.min(pos.groupIndex, groups.value.length - 1));
+    const g = groups.value[gi];
+    const maxSub = g ? subSlidesOf(g.id).length : 0;
+    const si = Math.max(0, Math.min(pos.subIndex, maxSub));
+    position.value = { groupIndex: gi, subIndex: si };
+    broadcastPosition();
+  }
+  function goNext() {
+    if (canGoDown.value) goDown();
+    else if (canGoRight.value) goRight();
+  }
+  function goPrev() {
+    if (canGoUp.value) goUp();
+    else if (canGoLeft.value) {
+      lastDirection.value = "left";
+      const newGi = position.value.groupIndex - 1;
+      const g = groups.value[newGi];
+      const maxSub = g ? subSlidesOf(g.id).length : 0;
+      position.value = { groupIndex: newGi, subIndex: maxSub };
+      broadcastPosition();
+    }
+  }
+  const totalSlides = computed(() => {
+    let count = 0;
+    for (const g of groups.value) {
+      count += 1 + subSlidesOf(g.id).length;
+    }
+    return count;
+  });
+  const currentNumber = computed(() => {
+    let n = 0;
+    for (let i = 0; i < groups.value.length; i++) {
+      const g = groups.value[i];
+      if (i < position.value.groupIndex) {
+        n += 1 + subSlidesOf(g.id).length;
+      } else if (i === position.value.groupIndex) {
+        n += position.value.subIndex + 1;
+        break;
+      }
+    }
+    return n;
+  });
+  const currentTransition = computed(() => {
+    return currentSlide.value?.meta?.slidesTransition ?? "fade";
+  });
+  const adjacentSlideIds = computed(() => {
+    const ids = [];
+    const gi = position.value.groupIndex;
+    const si = position.value.subIndex;
+    if (gi > 0) ids.push(groups.value[gi - 1].id);
+    if (gi < groups.value.length - 1) ids.push(groups.value[gi + 1].id);
+    const g = groups.value[gi];
+    if (g) {
+      const subs = subSlidesOf(g.id);
+      if (si === 1) ids.push(g.id);
+      else if (si > 1 && subs[si - 2]) ids.push(subs[si - 2].id);
+      if (si === 0 && subs.length > 0) ids.push(subs[0].id);
+      else if (si > 0 && subs[si]) ids.push(subs[si].id);
+    }
+    return ids;
+  });
+  function broadcastPosition() {
+    if (syncingFromFollow || followingUser()) return;
+    setLocalState({
+      "slides:position": {
+        groupIndex: position.value.groupIndex,
+        subIndex: position.value.subIndex,
+        t: Date.now()
+      }
+    });
+  }
+  watch([followingUser, states], () => {
+    const key = followingUser();
+    if (!key) return;
+    const state = states.value.find((s) => s.user?.publicKey === key);
+    const pos = state?.["slides:position"];
+    if (!pos || pos.t <= lastAppliedT) return;
+    lastAppliedT = pos.t;
+    syncingFromFollow = true;
+    goTo({ groupIndex: pos.groupIndex, subIndex: pos.subIndex });
+    nextTick(() => {
+      syncingFromFollow = false;
+    });
+  });
+  watch(groups, (gs) => {
+    if (gs.length === 0) {
+      position.value = { groupIndex: 0, subIndex: 0 };
+      return;
+    }
+    const gi = Math.min(position.value.groupIndex, gs.length - 1);
+    const g = gs[gi];
+    const maxSub = g ? subSlidesOf(g.id).length : 0;
+    const si = Math.min(position.value.subIndex, maxSub);
+    if (gi !== position.value.groupIndex || si !== position.value.subIndex) {
+      position.value = { groupIndex: gi, subIndex: si };
+    }
+  });
+  broadcastPosition();
+  onBeforeUnmount(() => {
+    setLocalState({ "slides:position": null });
+  });
+  return {
+    position,
+    currentSlideId,
+    currentSlide,
+    canGoLeft,
+    canGoRight,
+    canGoUp,
+    canGoDown,
+    goLeft,
+    goRight,
+    goUp,
+    goDown,
+    goTo,
+    goNext,
+    goPrev,
+    groups,
+    subSlidesOf,
+    currentNumber,
+    totalSlides,
+    currentTransition,
+    lastDirection,
+    adjacentSlideIds
+  };
+}

package/dist/runtime/composables/useYDoc.d.ts

@@ -4,7 +4,7 @@
  * IMPORTANT: All `doc` and `provider` parameters must be ShallowRef.
  * Never pass plain refs or reactive() wrappers — Vue's deep proxy breaks Yjs internals.
  *
- * Ported from cou-sh/app/composables/useYDoc.ts with minor cleanup.
+ * Ported from cou-sh/app/composables/useYDoc.ts.
  * Three.js multiplayer utilities (useMultiplayerObject, useSmoothedCursors) are
  * included for parity but require Three.js in the consuming app.
  */

package/dist/runtime/composables/useYDoc.js

@@ -4,6 +4,7 @@ import {
   shallowRef,
   computed,
   watch,
+  nextTick,
   onMounted,
   onBeforeUnmount
 } from "vue";
@@ -11,11 +12,17 @@ export function useSyncedMap(doc, mapName) {
   const state = reactive({});
   const ymap = shallowRef(null);
   const lastUpdateLocal = shallowRef(true);
+  function readVal(map, key) {
+    const raw = map.get(key);
+    if (raw == null) return void 0;
+    return raw && typeof raw === "object" && "toJSON" in raw && typeof raw.toJSON === "function" && raw._map !== void 0 ? raw.toJSON() : raw;
+  }
   const observer = (event) => {
     lastUpdateLocal.value = event.transaction.local;
     event.keysChanged.forEach((key) => {
-      if (ymap.value.has(key)) state[key] = ymap.value.get(key);
-      else delete state[key];
+      if (ymap.value.has(key)) {
+        state[key] = readVal(ymap.value, key);
+      } else delete state[key];
     });
   };
   const init = (newDoc) => {
@@ -23,9 +30,20 @@ export function useSyncedMap(doc, mapName) {
     ymap.value = newDoc.getMap(mapName);
     for (const key in state) delete state[key];
     ymap.value.forEach((value, key) => {
-      state[key] = value;
+      state[key] = value && typeof value === "object" && "toJSON" in value && typeof value.toJSON === "function" && value._map !== void 0 ? value.toJSON() : value;
     });
     ymap.value.observe(observer);
+    nextTick(() => {
+      if (!ymap.value) return;
+      const map = ymap.value;
+      map.forEach((value, key) => {
+        const v = value && typeof value === "object" && "toJSON" in value && typeof value.toJSON === "function" && value._map !== void 0 ? value.toJSON() : value;
+        if (state[key] !== v) state[key] = v;
+      });
+      for (const key in state) {
+        if (!map.has(key)) delete state[key];
+      }
+    });
   };
   watch(doc, (d) => d && init(d), { immediate: true });
   onBeforeUnmount(() => {
@@ -37,7 +55,7 @@ export function useSyncedMap(doc, mapName) {
     set: (key, value) => ymap.value?.set(key, value),
     remove: (key) => ymap.value?.delete(key),
     clear: () => ymap.value?.clear(),
-    get: (key) => ymap.value?.get(key),
+    get: (key) => ymap.value ? readVal(ymap.value, key) : void 0,
     yMap: computed(() => ymap.value)
   };
 }
@@ -63,6 +81,10 @@ export function useSyncedArray(doc, arrayName) {
     yarray.value = newDoc.getArray(arrayName);
     list.value = yarray.value.toArray();
     yarray.value.observe(observer);
+    nextTick(() => {
+      if (!yarray.value) return;
+      list.value = yarray.value.toArray();
+    });
   };
   watch(doc, (d) => d && init(d), { immediate: true });
   onBeforeUnmount(() => {
@@ -95,6 +117,10 @@ export function useSyncedText(doc, textName) {
     ytext.value = newDoc.getText(textName);
     text.value = ytext.value.toString();
     ytext.value.observe(observer);
+    nextTick(() => {
+      if (!ytext.value) return;
+      text.value = ytext.value.toString();
+    });
   };
   watch(doc, (d) => d && init(d), { immediate: true });
   onBeforeUnmount(() => {
@@ -118,20 +144,32 @@ export function useSyncedXml(doc, xmlName) {
 export function useAwarenessOf(provider) {
   const states = ref([]);
   const currentUser = ref(null);
-  const update = () => {
-    if (!provider.value) return;
+  let _rafId = null;
+  const flush = () => {
+    _rafId = null;
+    if (!provider.value?.awareness) return;
     const awareness = provider.value.awareness;
     states.value = Array.from(awareness.getStates().entries()).map(([id, state]) => ({ clientId: id, ...state }));
     const local = awareness.getLocalState();
     if (local) currentUser.value = { clientId: awareness.clientID, ...local };
   };
+  const update = () => {
+    if (_rafId === null) _rafId = requestAnimationFrame(flush);
+  };
   watch(provider, (p, oldP) => {
-    if (oldP) oldP.awareness.off("change", update);
-    if (p) {
+    if (oldP?.awareness) oldP.awareness.off("change", update);
+    if (_rafId !== null) {
+      cancelAnimationFrame(_rafId);
+      _rafId = null;
+    }
+    if (p?.awareness) {
       p.awareness.on("change", update);
-      update();
+      flush();
     }
   }, { immediate: true });
+  onBeforeUnmount(() => {
+    if (_rafId !== null) cancelAnimationFrame(_rafId);
+  });
   const setLocalState = (state) => {
     if (!provider.value) return;
     const awareness = provider.value.awareness;