@abraca/nuxt 0.3.0 → 1.6.0

package/dist/runtime/composables/useMediaPlayback.js

@@ -0,0 +1,465 @@
+import { ref, shallowRef, computed, watch, nextTick, onBeforeUnmount } from "vue";
+const SYNC_LEAD_TIME = 300;
+const DRIFT_CHECK_INTERVAL = 500;
+const DRIFT_DEAD_ZONE = 0.2;
+const DRIFT_SOFT_THRESHOLD = 1;
+const DRIFT_RATE_FAST = 1.02;
+const DRIFT_RATE_SLOW = 0.98;
+const DRIFT_RATE_DURATION = 2e3;
+export function useMediaPlayback(options) {
+  const { mediaElementRef, childDoc, playlist, repeatMode, shuffle, getBlobUrl, useSyncedMap, onTrackChange } = options;
+  const currentTrack = shallowRef(null);
+  const currentTrackIndex = ref(-1);
+  const isPlaying = ref(false);
+  const currentTime = ref(0);
+  const totalDuration = ref(0);
+  const progressFraction = ref(0);
+  const volume = ref(1);
+  const isMuted = ref(false);
+  const isLoading = ref(false);
+  const currentBlobUrl = ref(null);
+  const syncMap = useSyncedMap(childDoc, "media-sync");
+  const isSynced = ref(false);
+  let animFrameId = null;
+  let localPlayStartedAt = 0;
+  let localPlayStartPosition = 0;
+  let driftIntervalId = null;
+  let rateResetTimeoutId = null;
+  let scheduledPlayTimeout = null;
+  let _applying = false;
+  let _applyPending = false;
+  let _applyingSync = false;
+  async function loadTrackBlob(track) {
+    isLoading.value = true;
+    try {
+      return await getBlobUrl(track.docId, track.uploadId);
+    } finally {
+      isLoading.value = false;
+    }
+  }
+  function clearScheduledPlay() {
+    if (scheduledPlayTimeout !== null) {
+      clearTimeout(scheduledPlayTimeout);
+      scheduledPlayTimeout = null;
+    }
+  }
+  function schedulePlayAt(el, position, scheduledMs) {
+    clearScheduledPlay();
+    const delay = scheduledMs - Date.now();
+    if (delay <= 0) {
+      const elapsed = -delay / 1e3;
+      const adjustedPos = position + elapsed;
+      el.currentTime = adjustedPos;
+      el.play();
+      isPlaying.value = true;
+      localPlayStartPosition = adjustedPos;
+      localPlayStartedAt = Date.now();
+      startAnimLoop();
+      startDriftCorrection();
+    } else {
+      el.currentTime = position;
+      scheduledPlayTimeout = setTimeout(() => {
+        scheduledPlayTimeout = null;
+        el.play();
+        isPlaying.value = true;
+        localPlayStartPosition = position;
+        localPlayStartedAt = Date.now();
+        startAnimLoop();
+        startDriftCorrection();
+      }, delay);
+    }
+  }
+  async function playTrack(track, startAt = 0) {
+    const el = mediaElementRef.value;
+    if (!el) return;
+    const idx = playlist.value.findIndex((t) => t.id === track.id);
+    currentTrack.value = track;
+    currentTrackIndex.value = idx;
+    totalDuration.value = track.duration ?? 0;
+    currentTime.value = startAt;
+    progressFraction.value = 0;
+    const url = await loadTrackBlob(track);
+    if (!url) return;
+    currentBlobUrl.value = url;
+    if (currentTrack.value?.id !== track.id) return;
+    el.src = url;
+    el.currentTime = startAt;
+    el.volume = volume.value;
+    el.muted = isMuted.value;
+    try {
+      await el.play();
+      isPlaying.value = true;
+      startAnimLoop();
+    } catch {
+      isPlaying.value = false;
+    }
+    onTrackChange?.(track);
+    if (isSynced.value && !_applyingSync) {
+      const scheduledMs = Date.now() + SYNC_LEAD_TIME;
+      writeSyncState({ trackId: track.id, isPlaying: true, positionAtUpdate: startAt, scheduledStartMs: scheduledMs });
+      el.pause();
+      isPlaying.value = false;
+      stopAnimLoop();
+      schedulePlayAt(el, startAt, scheduledMs);
+    }
+  }
+  function togglePlay() {
+    const el = mediaElementRef.value;
+    if (!el || !currentTrack.value) return;
+    if (isSynced.value) {
+      const pos = el.currentTime;
+      if (isPlaying.value) {
+        clearScheduledPlay();
+        writeSyncState({ isPlaying: false, positionAtUpdate: pos });
+        el.pause();
+        isPlaying.value = false;
+        stopAnimLoop();
+        stopDriftCorrection();
+      } else {
+        const scheduledMs = Date.now() + SYNC_LEAD_TIME;
+        writeSyncState({ isPlaying: true, positionAtUpdate: pos, scheduledStartMs: scheduledMs });
+        schedulePlayAt(el, pos, scheduledMs);
+      }
+      return;
+    }
+    if (isPlaying.value) {
+      el.pause();
+      isPlaying.value = false;
+      stopAnimLoop();
+    } else {
+      el.play();
+      isPlaying.value = true;
+      startAnimLoop();
+    }
+  }
+  function seek(position) {
+    const el = mediaElementRef.value;
+    if (!el) return;
+    if (isSynced.value) {
+      if (isPlaying.value) {
+        const scheduledMs = Date.now() + SYNC_LEAD_TIME;
+        writeSyncState({ positionAtUpdate: position, scheduledStartMs: scheduledMs });
+        el.pause();
+        isPlaying.value = false;
+        stopAnimLoop();
+        stopDriftCorrection();
+        schedulePlayAt(el, position, scheduledMs);
+      } else {
+        writeSyncState({ positionAtUpdate: position });
+        el.currentTime = position;
+        currentTime.value = position;
+        if (totalDuration.value > 0) progressFraction.value = position / totalDuration.value;
+      }
+      return;
+    }
+    el.currentTime = position;
+    currentTime.value = position;
+    if (totalDuration.value > 0) progressFraction.value = position / totalDuration.value;
+  }
+  function nextTrack() {
+    const list = playlist.value;
+    if (!list.length) return;
+    let nextIdx;
+    if (shuffle.value) {
+      nextIdx = Math.floor(Math.random() * list.length);
+    } else {
+      nextIdx = currentTrackIndex.value + 1;
+      if (nextIdx >= list.length) {
+        if (repeatMode.value === "all") nextIdx = 0;
+        else return;
+      }
+    }
+    const track = list[nextIdx];
+    if (isSynced.value) {
+      writeSyncState({ trackId: track.id, isPlaying: true, positionAtUpdate: 0, scheduledStartMs: Date.now() + SYNC_LEAD_TIME });
+      _applyingSync = true;
+      playTrack(track, 0).finally(() => {
+        _applyingSync = false;
+      });
+    } else {
+      playTrack(track);
+    }
+  }
+  function prevTrack() {
+    const el = mediaElementRef.value;
+    if (el && el.currentTime > 3) {
+      seek(0);
+      return;
+    }
+    const list = playlist.value;
+    if (!list.length) return;
+    let prevIdx = currentTrackIndex.value - 1;
+    if (prevIdx < 0) {
+      prevIdx = repeatMode.value === "all" ? list.length - 1 : 0;
+    }
+    const track = list[prevIdx];
+    if (isSynced.value) {
+      writeSyncState({ trackId: track.id, isPlaying: true, positionAtUpdate: 0, scheduledStartMs: Date.now() + SYNC_LEAD_TIME });
+      _applyingSync = true;
+      playTrack(track, 0).finally(() => {
+        _applyingSync = false;
+      });
+    } else {
+      playTrack(track);
+    }
+  }
+  function setVolume(val) {
+    volume.value = val;
+    if (mediaElementRef.value) mediaElementRef.value.volume = val;
+    if (val > 0 && isMuted.value) {
+      isMuted.value = false;
+      if (mediaElementRef.value) mediaElementRef.value.muted = false;
+    }
+  }
+  function toggleMute() {
+    isMuted.value = !isMuted.value;
+    if (mediaElementRef.value) mediaElementRef.value.muted = isMuted.value;
+  }
+  function tick() {
+    const el = mediaElementRef.value;
+    if (el && totalDuration.value > 0) {
+      currentTime.value = el.currentTime;
+      progressFraction.value = el.currentTime / totalDuration.value;
+    }
+    if (isPlaying.value) animFrameId = requestAnimationFrame(tick);
+  }
+  function startAnimLoop() {
+    if (animFrameId !== null) return;
+    animFrameId = requestAnimationFrame(tick);
+  }
+  function stopAnimLoop() {
+    if (animFrameId !== null) {
+      cancelAnimationFrame(animFrameId);
+      animFrameId = null;
+    }
+  }
+  function onTrackEnded() {
+    if (repeatMode.value === "one") {
+      const el = mediaElementRef.value;
+      if (el) {
+        el.currentTime = 0;
+        el.play();
+      }
+      return;
+    }
+    stopAnimLoop();
+    isPlaying.value = false;
+    nextTrack();
+  }
+  function onLoadedMetadata() {
+    const el = mediaElementRef.value;
+    if (el && el.duration && Number.isFinite(el.duration)) totalDuration.value = el.duration;
+  }
+  function computeExpectedPosition() {
+    if (!isPlaying.value) return localPlayStartPosition;
+    return localPlayStartPosition + (Date.now() - localPlayStartedAt) / 1e3;
+  }
+  function startDriftCorrection() {
+    stopDriftCorrection();
+    driftIntervalId = setInterval(checkDrift, DRIFT_CHECK_INTERVAL);
+  }
+  function stopDriftCorrection() {
+    if (driftIntervalId !== null) {
+      clearInterval(driftIntervalId);
+      driftIntervalId = null;
+    }
+    if (rateResetTimeoutId !== null) {
+      clearTimeout(rateResetTimeoutId);
+      rateResetTimeoutId = null;
+    }
+    const el = mediaElementRef.value;
+    if (el) el.playbackRate = 1;
+  }
+  function checkDrift() {
+    const el = mediaElementRef.value;
+    if (!el || !isSynced.value || !isPlaying.value) return;
+    const expected = computeExpectedPosition();
+    const actual = el.currentTime;
+    const drift = expected - actual;
+    if (Math.abs(drift) > DRIFT_SOFT_THRESHOLD) {
+      el.currentTime = expected;
+      el.playbackRate = 1;
+      localPlayStartPosition = expected;
+      localPlayStartedAt = Date.now();
+    } else if (Math.abs(drift) > DRIFT_DEAD_ZONE) {
+      el.playbackRate = drift > 0 ? DRIFT_RATE_FAST : DRIFT_RATE_SLOW;
+      if (rateResetTimeoutId !== null) clearTimeout(rateResetTimeoutId);
+      rateResetTimeoutId = setTimeout(() => {
+        if (el) el.playbackRate = 1;
+        rateResetTimeoutId = null;
+      }, DRIFT_RATE_DURATION);
+    } else {
+      el.playbackRate = 1;
+    }
+  }
+  function writeSyncState(patch) {
+    const fullPatch = { ...patch, epoch: (syncMap.data.epoch ?? 0) + 1 };
+    const yMap = syncMap.yMap.value;
+    const doc = childDoc.value;
+    if (yMap && doc) {
+      doc.transact(() => {
+        for (const [key, value] of Object.entries(fullPatch)) yMap.set(key, value);
+      }, "media-sync-local");
+    } else {
+      for (const [key, value] of Object.entries(fullPatch)) syncMap.set(key, value);
+    }
+    if ("positionAtUpdate" in patch) {
+      localPlayStartPosition = patch.positionAtUpdate;
+      localPlayStartedAt = Date.now();
+    }
+  }
+  async function joinSync() {
+    isSynced.value = true;
+    if (!syncMap.data.trackId && currentTrack.value) {
+      const el = mediaElementRef.value;
+      const pos = el?.currentTime ?? 0;
+      if (isPlaying.value) {
+        const scheduledMs = Date.now() + SYNC_LEAD_TIME;
+        writeSyncState({ trackId: currentTrack.value.id, isPlaying: true, positionAtUpdate: pos, scheduledStartMs: scheduledMs });
+        if (el) {
+          el.pause();
+          isPlaying.value = false;
+          stopAnimLoop();
+          schedulePlayAt(el, pos, scheduledMs);
+        }
+      } else {
+        writeSyncState({ trackId: currentTrack.value.id, isPlaying: false, positionAtUpdate: pos });
+      }
+    } else if (syncMap.data.trackId) {
+      await applySyncState();
+    }
+  }
+  function leaveSync() {
+    isSynced.value = false;
+    clearScheduledPlay();
+    stopDriftCorrection();
+    const el = mediaElementRef.value;
+    if (el) el.playbackRate = 1;
+  }
+  async function applySyncState() {
+    if (_applying) {
+      _applyPending = true;
+      return;
+    }
+    _applying = true;
+    try {
+      await _doApplySyncState();
+    } finally {
+      _applying = false;
+      if (_applyPending) {
+        _applyPending = false;
+        await nextTick();
+        await applySyncState();
+      }
+    }
+  }
+  async function _doApplySyncState() {
+    const data = syncMap.data;
+    const trackId = data.trackId;
+    if (!trackId) return;
+    const track = playlist.value.find((t) => t.id === trackId);
+    if (!track) return;
+    const shouldPlay = data.isPlaying ?? false;
+    const position = data.positionAtUpdate ?? 0;
+    const scheduledMs = data.scheduledStartMs ?? 0;
+    if (!shouldPlay) {
+      clearScheduledPlay();
+      stopDriftCorrection();
+      localPlayStartPosition = position;
+      localPlayStartedAt = Date.now();
+      if (currentTrack.value?.id !== trackId) {
+        _applyingSync = true;
+        try {
+          await playTrack(track, position);
+        } finally {
+          _applyingSync = false;
+        }
+        mediaElementRef.value?.pause();
+        isPlaying.value = false;
+        stopAnimLoop();
+      } else {
+        const el2 = mediaElementRef.value;
+        if (el2) el2.currentTime = position;
+        if (isPlaying.value) {
+          mediaElementRef.value?.pause();
+          isPlaying.value = false;
+          stopAnimLoop();
+        }
+      }
+      return;
+    }
+    clearScheduledPlay();
+    stopDriftCorrection();
+    if (currentTrack.value?.id !== trackId) {
+      _applyingSync = true;
+      try {
+        await playTrack(track, position);
+        const el2 = mediaElementRef.value;
+        if (el2) {
+          el2.pause();
+          isPlaying.value = false;
+          stopAnimLoop();
+        }
+      } finally {
+        _applyingSync = false;
+      }
+    }
+    const el = mediaElementRef.value;
+    if (!el) return;
+    if (scheduledMs > 0) {
+      schedulePlayAt(el, position, scheduledMs);
+    } else {
+      el.currentTime = position;
+      el.play();
+      isPlaying.value = true;
+      localPlayStartPosition = position;
+      localPlayStartedAt = Date.now();
+      startAnimLoop();
+      startDriftCorrection();
+    }
+  }
+  watch(
+    () => ({ trackId: syncMap.data.trackId, isPlaying: syncMap.data.isPlaying, positionAtUpdate: syncMap.data.positionAtUpdate, scheduledStartMs: syncMap.data.scheduledStartMs, epoch: syncMap.data.epoch }),
+    () => {
+      if (!isSynced.value) return;
+      if (syncMap.lastUpdateLocal.value) return;
+      applySyncState();
+    },
+    { deep: true }
+  );
+  onBeforeUnmount(() => {
+    clearScheduledPlay();
+    stopAnimLoop();
+    stopDriftCorrection();
+    const el = mediaElementRef.value;
+    if (el) {
+      el.pause();
+      el.src = "";
+    }
+  });
+  return {
+    currentTrack: computed(() => currentTrack.value),
+    currentTrackIndex: computed(() => currentTrackIndex.value),
+    isPlaying: computed(() => isPlaying.value),
+    currentTime: computed(() => currentTime.value),
+    totalDuration: computed(() => totalDuration.value),
+    progressFraction: computed(() => progressFraction.value),
+    volume: computed(() => volume.value),
+    isMuted: computed(() => isMuted.value),
+    isLoading: computed(() => isLoading.value),
+    currentBlobUrl: computed(() => currentBlobUrl.value),
+    isSynced: computed(() => isSynced.value),
+    syncData: syncMap.data,
+    playTrack,
+    togglePlay,
+    seek,
+    nextTrack,
+    prevTrack,
+    setVolume,
+    toggleMute,
+    joinSync,
+    leaveSync,
+    onTrackEnded,
+    onLoadedMetadata
+  };
+}

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

@@ -0,0 +1,26 @@
+interface NodeContextMenuOptions {
+    nodeId: string;
+    label: string;
+    type?: string;
+    meta?: Record<string, any>;
+    tree: {
+        renameEntry: (id: string, label: string) => void;
+        updateMeta: (id: string, patch: Record<string, any>) => void;
+        deleteEntry: (id: string) => void;
+        duplicateEntry: (id: string) => string;
+        moveEntry: (id: string, parentId: string | null, order: number) => void;
+    };
+    onRename?: (id: string) => void;
+    onNavigate?: (id: string) => void;
+    onCopyLink?: (id: string) => void;
+    onChangeType?: (id: string, newType: string) => void;
+    favorites?: {
+        isFavorite: (id: string) => boolean;
+        toggleFavorite: (id: string) => void;
+    };
+    registry?: any;
+}
+export declare function useNodeContextMenu(opts: NodeContextMenuOptions): {
+    items: any[][];
+};
+export {};

package/dist/runtime/composables/useNodeContextMenu.js

@@ -0,0 +1,99 @@
+import { getAvailableDocTypes } from "../utils/docTypes.js";
+import { UI_COLORS } from "../types.js";
+export function useNodeContextMenu(opts) {
+  const { nodeId, label: _label, type, tree, registry } = opts;
+  const docTypes = getAvailableDocTypes(registry);
+  const editGroup = [
+    {
+      label: "Rename",
+      icon: "i-lucide-pencil",
+      onSelect() {
+        opts.onRename?.(nodeId);
+      }
+    },
+    {
+      label: "Duplicate",
+      icon: "i-lucide-copy",
+      onSelect() {
+        tree.duplicateEntry(nodeId);
+      }
+    },
+    {
+      label: "Change type",
+      icon: "i-lucide-repeat",
+      children: docTypes.map((dt) => ({
+        label: dt.label,
+        icon: `i-lucide-${dt.icon}`,
+        active: dt.key === type,
+        onSelect() {
+          if (opts.onChangeType) {
+            opts.onChangeType(nodeId, dt.key);
+          } else {
+            tree.updateMeta(nodeId, {});
+            const entry = tree.treeMap?.get?.(nodeId);
+            if (entry) {
+              tree.treeMap?.set?.(nodeId, { ...entry, type: dt.key, updatedAt: Date.now() });
+            }
+          }
+        }
+      }))
+    }
+  ];
+  const colorItems = UI_COLORS.slice(0, 12).map((colorName) => ({
+    label: colorName.charAt(0).toUpperCase() + colorName.slice(1),
+    icon: "i-lucide-circle",
+    iconClass: `text-${colorName}-500`,
+    onSelect() {
+      tree.updateMeta(nodeId, { color: colorName });
+    }
+  }));
+  colorItems.push({
+    label: "None",
+    icon: "i-lucide-circle-off",
+    iconClass: "",
+    onSelect() {
+      tree.updateMeta(nodeId, { color: void 0 });
+    }
+  });
+  const appearanceGroup = [
+    {
+      label: "Color",
+      icon: "i-lucide-palette",
+      children: colorItems
+    }
+  ];
+  const actionsGroup = [];
+  if (opts.onCopyLink) {
+    actionsGroup.push({
+      label: "Copy link",
+      icon: "i-lucide-link",
+      onSelect() {
+        opts.onCopyLink(nodeId);
+      }
+    });
+  }
+  if (opts.favorites) {
+    const isFav = opts.favorites.isFavorite(nodeId);
+    actionsGroup.push({
+      label: isFav ? "Remove from favorites" : "Add to favorites",
+      icon: isFav ? "i-lucide-star-off" : "i-lucide-star",
+      onSelect() {
+        opts.favorites.toggleFavorite(nodeId);
+      }
+    });
+  }
+  const dangerGroup = [
+    {
+      label: "Move to trash",
+      icon: "i-lucide-trash-2",
+      color: "error",
+      onSelect() {
+        tree.deleteEntry(nodeId);
+      }
+    }
+  ];
+  const items = [editGroup, appearanceGroup];
+  if (actionsGroup.length > 0) items.push(actionsGroup);
+  items.push(dangerGroup);
+  return { items };
+}

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

@@ -1,14 +1,20 @@
 import type { ShallowRef } from 'vue';
+export interface UseNodePanelOptions {
+    /** Timeout in ms waiting for child provider sync (default: 8000) */
+    syncTimeout?: number;
+}
 /**
  * Manages the state for opening a child document in a slide-over panel.
  * Loads the child provider, waits for sync, and primes the Y.XmlFragment
  * so TipTap can initialise without errors.
  */
-export declare function useNodePanel(parentProvider: ShallowRef<any>): {
+export declare function useNodePanel(parentProvider: ShallowRef<any>, options?: UseNodePanelOptions): {
     openNodeId: import("vue").Ref<string | null, string | null>;
     openNodeLabel: import("vue").Ref<string, string>;
     openNodeProvider: import("vue").Ref<any, any>;
     isLoading: import("vue").Ref<boolean, boolean>;
+    loadError: import("vue").Ref<string | null, string | null>;
     openNode: (nodeId: string, label: string) => Promise<void>;
     closePanel: () => void;
+    retry: () => void;
 };

package/dist/runtime/composables/useNodePanel.js

@@ -1,24 +1,43 @@
 import { ref } from "vue";
-export function useNodePanel(parentProvider) {
+export function useNodePanel(parentProvider, options) {
+  const syncTimeout = options?.syncTimeout ?? 8e3;
   const openNodeId = ref(null);
   const openNodeLabel = ref("");
   const openNodeProvider = ref(null);
   const isLoading = ref(false);
+  const loadError = ref(null);
+  let _lastNodeId = null;
   async function openNode(nodeId, label) {
     if (!parentProvider.value) return;
+    loadError.value = null;
     isLoading.value = true;
+    if (openNodeProvider.value && openNodeId.value && openNodeId.value !== nodeId) {
+      try {
+        openNodeProvider.value.detach?.();
+      } catch {
+      }
+      openNodeProvider.value = null;
+    }
+    _lastNodeId = nodeId;
     try {
       const childProv = await parentProvider.value.loadChild(nodeId);
+      if (_lastNodeId !== nodeId) return;
       if (!childProv.isSynced) {
-        await new Promise((resolve) => {
-          const done = () => {
-            childProv.off("synced", done);
+        await new Promise((resolve, reject) => {
+          const timer = setTimeout(() => {
+            childProv.off("synced", onSynced);
+            reject(new Error(`Sync timeout after ${syncTimeout}ms`));
+          }, syncTimeout);
+          function onSynced({ state }) {
+            if (!state) return;
+            clearTimeout(timer);
+            childProv.off("synced", onSynced);
             resolve();
-          };
-          childProv.on("synced", done);
-          setTimeout(resolve, 6e3);
+          }
+          childProv.on("synced", onSynced);
         });
       }
+      if (_lastNodeId !== nodeId) return;
       const doc = childProv.document;
       const frag = doc.getXmlFragment("default");
       if (!frag._item) {
@@ -31,22 +50,40 @@ export function useNodePanel(parentProvider) {
       openNodeId.value = nodeId;
     } catch (e) {
       console.error("Failed to load node:", e);
+      loadError.value = e?.message || "Failed to load document";
     } finally {
       isLoading.value = false;
     }
   }
   function closePanel() {
+    if (openNodeProvider.value) {
+      try {
+        openNodeProvider.value.detach?.();
+      } catch {
+      }
+    }
     openNodeId.value = null;
     openNodeLabel.value = "";
     openNodeProvider.value = null;
     isLoading.value = false;
+    loadError.value = null;
+    _lastNodeId = null;
+  }
+  function retry() {
+    if (_lastNodeId) {
+      const nodeId = _lastNodeId;
+      const label = openNodeLabel.value || "Untitled";
+      openNode(nodeId, label);
+    }
   }
   return {
     openNodeId,
     openNodeLabel,
     openNodeProvider,
     isLoading,
+    loadError,
     openNode,
-    closePanel
+    closePanel,
+    retry
   };
 }

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

@@ -0,0 +1,2 @@
+import type { Ref } from 'vue';
+export declare function useNodePanelFollow(openNodeId: Ref<string | null>, openNodeLabel: Ref<string>, openNode: (id: string, label: string) => Promise<void>, closePanel: () => void, followingUser: () => string | null | undefined, states: Ref<any[]>, setLocalState: (s: any) => void): void;