@abraca/nuxt 2.0.1 → 2.0.3

package/dist/runtime/components/aware/APresenceCursors.vue

@@ -43,5 +43,5 @@ function nameFor(p) {
 </template>
 
 <style scoped>
-.aa-cursors-host{height:100%;position:relative;width:100%}.aa-cursors-layer{inset:0;overflow:hidden;pointer-events:none;position:absolute;z-index:50}.aa-cursor{align-items:flex-start;display:flex;gap:.15rem;position:absolute;transform:translate(-2px,-2px);transition:top 60ms linear,left 60ms linear}.aa-cursor__label{border-radius:.25rem .25rem .25rem 0;box-shadow:0 1px 2px rgba(0,0,0,.18);color:#fff;font-size:.6875rem;font-weight:500;line-height:1;margin-left:-2px;margin-top:11px;padding:.2rem .4rem;white-space:nowrap}.aa-cursors-overflow{background:var(--ui-bg-elevated);border:1px solid var(--ui-border);border-radius:999px;bottom:.5rem;color:var(--ui-text-muted);font-size:.6875rem;padding:.15rem .45rem;position:absolute;right:.5rem}
+.aa-cursors-host{height:100%;position:relative;width:100%}.aa-cursors-layer{inset:0;overflow:hidden;pointer-events:none;position:absolute;z-index:50}.aa-cursor{align-items:flex-start;display:flex;gap:.15rem;position:absolute;transform:translate(-2px,-2px);transition:top var(--aa-track-cursor-duration) var(--aa-track-cursor-easing),left var(--aa-track-cursor-duration) var(--aa-track-cursor-easing)}.aa-cursor__label{border-radius:.25rem .25rem .25rem 0;box-shadow:0 1px 2px rgba(0,0,0,.18);color:#fff;font-size:.6875rem;font-weight:500;line-height:1;margin-left:-2px;margin-top:11px;padding:.2rem .4rem;white-space:nowrap}.aa-cursors-overflow{background:var(--ui-bg-elevated);border:1px solid var(--ui-border);border-radius:999px;bottom:.5rem;color:var(--ui-text-muted);font-size:.6875rem;padding:.15rem .45rem;position:absolute;right:.5rem}
 </style>

package/dist/runtime/components/aware/AScroll.d.vue.ts

@@ -2,6 +2,7 @@ type __VLS_Props = {
     fieldKey: string;
     awareness?: boolean;
     live?: boolean;
+    followOnly?: boolean;
     peers?: boolean;
     total?: boolean;
 };
@@ -13,6 +14,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     peers: boolean;
     awareness: boolean;
     live: boolean;
+    followOnly: boolean;
     total: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/aware/AScroll.vue

@@ -3,17 +3,20 @@ import { computed, onBeforeUnmount, onMounted, ref, useAttrs, watch } from "vue"
 import { useAAField } from "../../composables/useAAField";
 import { useAAUIState } from "../../composables/useAAUIState";
 import { useAAEphemeral } from "../../composables/useAAEphemeral";
+import { useAAFollowPeer } from "../../composables/useAAFollowPeer";
 import { awareRingStyle } from "../../utils/awareRingStyle";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   fieldKey: { type: String, required: true },
   awareness: { type: Boolean, required: false, default: true },
   live: { type: Boolean, required: false, default: false },
+  followOnly: { type: Boolean, required: false, default: false },
   peers: { type: Boolean, required: false, default: false },
   total: { type: Boolean, required: false, default: false }
 });
+const { isFollowing } = useAAFollowPeer();
 const enableAwareness = computed(() => props.awareness || props.total);
-const enableLive = computed(() => props.live || props.total);
+const enableLive = computed(() => props.live || props.total || props.followOnly && isFollowing.value);
 const enablePeers = computed(() => props.peers || props.total);
 const { hoverers, focusers, pressers, isPressed, hoverHandlers } = useAAField(() => props.fieldKey);
 const ringStyle = computed(
@@ -40,8 +43,7 @@ function flush() {
 function onScroll() {
   if (!raf) raf = requestAnimationFrame(flush);
 }
-watch(liveScroll, (val) => {
-  if (!enableLive.value) return;
+function applyLiveScroll(val) {
   const el = elRef.value;
   if (!el || !val) return;
   if (Math.abs(el.scrollTop - val.y) < 2 && Math.abs(el.scrollLeft - val.x) < 2) return;
@@ -50,6 +52,14 @@ watch(liveScroll, (val) => {
   queueMicrotask(() => {
     suppress = false;
   });
+}
+watch(liveScroll, (val) => {
+  if (!enableLive.value) return;
+  applyLiveScroll(val);
+});
+watch(enableLive, (now, prev) => {
+  if (!now || prev) return;
+  applyLiveScroll(liveScroll.value);
 });
 onMounted(() => {
   elRef.value?.addEventListener("scroll", onScroll, { passive: true });

package/dist/runtime/components/aware/AScroll.vue.d.ts

@@ -2,6 +2,7 @@ type __VLS_Props = {
     fieldKey: string;
     awareness?: boolean;
     live?: boolean;
+    followOnly?: boolean;
     peers?: boolean;
     total?: boolean;
 };
@@ -13,6 +14,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     peers: boolean;
     awareness: boolean;
     live: boolean;
+    followOnly: boolean;
     total: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/aware/ASlideover.d.vue.ts

@@ -2,6 +2,7 @@ type __VLS_Props = {
     fieldKey: string;
     awareness?: boolean;
     live?: boolean;
+    followOnly?: boolean;
     total?: boolean;
 };
 declare var __VLS_8: {}, __VLS_11: {}, __VLS_14: {}, __VLS_17: {}, __VLS_20: {}, __VLS_31: string, __VLS_32: any;
@@ -21,6 +22,7 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     awareness: boolean;
     live: boolean;
+    followOnly: boolean;
     total: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/aware/ASlideover.vue

@@ -1,15 +1,18 @@
 <script setup>
 import { computed, ref, useAttrs, watch } from "vue";
 import { useAAUIState, useAAUIStateAuthor } from "../../composables/useAAUIState";
+import { useAAFollowPeer } from "../../composables/useAAFollowPeer";
 import { useAwareness } from "../../composables/useAwareness";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   fieldKey: { type: String, required: true },
   awareness: { type: Boolean, required: false, default: true },
   live: { type: Boolean, required: false, default: false },
+  followOnly: { type: Boolean, required: false, default: false },
   total: { type: Boolean, required: false, default: false }
 });
-const enableLive = computed(() => props.live || props.total);
+const { isFollowing } = useAAFollowPeer();
+const enableLive = computed(() => props.live || props.total || props.followOnly && isFollowing.value);
 const attrs = useAttrs();
 const liveOpen = useAAUIState(() => `${props.fieldKey}:open`, { defaultValue: false });
 const author = useAAUIStateAuthor(() => `${props.fieldKey}:open`);
@@ -25,6 +28,11 @@ watch(local, (val) => {
   if (!enableLive.value) return;
   if (!!liveOpen.value !== val) liveOpen.value = val;
 });
+watch(enableLive, (now, prev) => {
+  if (!now || prev) return;
+  const incoming = !!liveOpen.value;
+  if (local.value !== incoming) local.value = incoming;
+});
 const openedByUser = computed(() => {
   if (!enableLive.value || !local.value || author.value == null) return null;
   const state = states.value.get(author.value);

package/dist/runtime/components/aware/ASlideover.vue.d.ts

@@ -2,6 +2,7 @@ type __VLS_Props = {
     fieldKey: string;
     awareness?: boolean;
     live?: boolean;
+    followOnly?: boolean;
     total?: boolean;
 };
 declare var __VLS_8: {}, __VLS_11: {}, __VLS_14: {}, __VLS_17: {}, __VLS_20: {}, __VLS_31: string, __VLS_32: any;
@@ -21,6 +22,7 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     awareness: boolean;
     live: boolean;
+    followOnly: boolean;
     total: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/aware/ASlider.vue

@@ -26,6 +26,7 @@ const range = computed(() => Math.max(1e-4, props.max - props.min));
 function publishThumb(val) {
   if (!enablePeers.value || val == null) return;
   const single = Array.isArray(val) ? val[0] : val;
+  if (single == null) return;
   const norm = (single - props.min) / range.value;
   setThumb(Math.max(0, Math.min(1, norm)));
 }

package/dist/runtime/components/aware/ATabs.d.vue.ts

@@ -2,6 +2,7 @@ type __VLS_Props = {
     fieldKey: string;
     awareness?: boolean;
     live?: boolean;
+    followOnly?: boolean;
     peers?: boolean;
     total?: boolean;
 };
@@ -15,6 +16,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     peers: boolean;
     awareness: boolean;
     live: boolean;
+    followOnly: boolean;
     total: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/aware/ATabs.vue

@@ -3,6 +3,7 @@ import { computed, ref, useAttrs, watch } from "vue";
 import { useAAField } from "../../composables/useAAField";
 import { useAAUIState } from "../../composables/useAAUIState";
 import { useAAEphemeral } from "../../composables/useAAEphemeral";
+import { useAAFollowPeer } from "../../composables/useAAFollowPeer";
 import AHoverItem from "./AHoverItem.vue";
 function tabId(item) {
   if (item == null) return "";
@@ -19,11 +20,13 @@ const props = defineProps({
   fieldKey: { type: String, required: true },
   awareness: { type: Boolean, required: false, default: true },
   live: { type: Boolean, required: false, default: false },
+  followOnly: { type: Boolean, required: false, default: false },
   peers: { type: Boolean, required: false, default: false },
   total: { type: Boolean, required: false, default: false }
 });
+const { isFollowing } = useAAFollowPeer();
 const enableAwareness = computed(() => props.awareness || props.total);
-const enableLive = computed(() => props.live || props.total);
+const enableLive = computed(() => props.live || props.total || props.followOnly && isFollowing.value);
 const enablePeers = computed(() => props.peers || props.total);
 const attrs = useAttrs();
 const { hoverers, focusers, hoverHandlers } = useAAField(() => props.fieldKey);
@@ -42,6 +45,11 @@ watch(local, (val) => {
   if (enableLive.value && (liveActive.value || "") !== val) liveActive.value = val;
   if (enablePeers.value) setLocal(val || null);
 });
+watch(enableLive, (now, prev) => {
+  if (!now || prev) return;
+  const incoming = liveActive.value || "";
+  if (incoming && local.value !== incoming) local.value = incoming;
+});
 const ringStyle = computed(() => {
   if (!enableAwareness.value) return void 0;
   const focusColor = focusers.value[0]?.user?.color;

package/dist/runtime/components/aware/ATabs.vue.d.ts

@@ -2,6 +2,7 @@ type __VLS_Props = {
     fieldKey: string;
     awareness?: boolean;
     live?: boolean;
+    followOnly?: boolean;
     peers?: boolean;
     total?: boolean;
 };
@@ -15,6 +16,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     peers: boolean;
     awareness: boolean;
     live: boolean;
+    followOnly: boolean;
     total: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/chat/ANodeChatPanel.vue

@@ -20,6 +20,7 @@ const typingUsersAdapted = computed(
   () => (typingUsers.value || []).map((id) => ({
     userId: String(id),
     userName: String(id),
+    name: String(id),
     color: "#888"
   }))
 );

package/dist/runtime/components/editor/AEditorRedoButton.d.vue.ts

@@ -9,7 +9,7 @@
 import type { Editor } from '@tiptap/vue-3';
 type __VLS_Props = {
     editor: Editor | null | undefined;
-    size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     variant?: 'ghost' | 'soft' | 'outline' | 'solid' | 'subtle' | 'link';
     color?: 'neutral' | 'primary' | 'secondary' | 'error' | 'warning' | 'success' | 'info';
     icon?: string;
@@ -18,7 +18,7 @@ type __VLS_Props = {
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     color: "neutral" | "primary" | "secondary" | "error" | "warning" | "success" | "info";
     icon: string;
-    size: "2xs" | "xs" | "sm" | "md" | "lg";
+    size: "xs" | "sm" | "md" | "lg" | "xl";
     variant: "ghost" | "soft" | "outline" | "solid" | "subtle" | "link";
     tooltip: string | false;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/editor/AEditorRedoButton.vue.d.ts

@@ -9,7 +9,7 @@
 import type { Editor } from '@tiptap/vue-3';
 type __VLS_Props = {
     editor: Editor | null | undefined;
-    size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     variant?: 'ghost' | 'soft' | 'outline' | 'solid' | 'subtle' | 'link';
     color?: 'neutral' | 'primary' | 'secondary' | 'error' | 'warning' | 'success' | 'info';
     icon?: string;
@@ -18,7 +18,7 @@ type __VLS_Props = {
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     color: "neutral" | "primary" | "secondary" | "error" | "warning" | "success" | "info";
     icon: string;
-    size: "2xs" | "xs" | "sm" | "md" | "lg";
+    size: "xs" | "sm" | "md" | "lg" | "xl";
     variant: "ghost" | "soft" | "outline" | "solid" | "subtle" | "link";
     tooltip: string | false;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/editor/AEditorUndoButton.d.vue.ts

@@ -9,7 +9,7 @@
 import type { Editor } from '@tiptap/vue-3';
 type __VLS_Props = {
     editor: Editor | null | undefined;
-    size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     variant?: 'ghost' | 'soft' | 'outline' | 'solid' | 'subtle' | 'link';
     color?: 'neutral' | 'primary' | 'secondary' | 'error' | 'warning' | 'success' | 'info';
     icon?: string;
@@ -18,7 +18,7 @@ type __VLS_Props = {
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     color: "neutral" | "primary" | "secondary" | "error" | "warning" | "success" | "info";
     icon: string;
-    size: "2xs" | "xs" | "sm" | "md" | "lg";
+    size: "xs" | "sm" | "md" | "lg" | "xl";
     variant: "ghost" | "soft" | "outline" | "solid" | "subtle" | "link";
     tooltip: string | false;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/editor/AEditorUndoButton.vue.d.ts

@@ -9,7 +9,7 @@
 import type { Editor } from '@tiptap/vue-3';
 type __VLS_Props = {
     editor: Editor | null | undefined;
-    size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     variant?: 'ghost' | 'soft' | 'outline' | 'solid' | 'subtle' | 'link';
     color?: 'neutral' | 'primary' | 'secondary' | 'error' | 'warning' | 'success' | 'info';
     icon?: string;
@@ -18,7 +18,7 @@ type __VLS_Props = {
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     color: "neutral" | "primary" | "secondary" | "error" | "warning" | "success" | "info";
     icon: string;
-    size: "2xs" | "xs" | "sm" | "md" | "lg";
+    size: "xs" | "sm" | "md" | "lg" | "xl";
     variant: "ghost" | "soft" | "outline" | "solid" | "subtle" | "link";
     tooltip: string | false;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/shell/AUserProfilePopover.d.vue.ts

@@ -39,8 +39,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     currentDocId: string | null;
     avatarStyle: string;
     isSelf: boolean;
-    showFollow: boolean;
     isFollowing: boolean;
+    showFollow: boolean;
     currentDocLabel: string | null;
     currentDocIcon: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/shell/AUserProfilePopover.vue.d.ts

@@ -39,8 +39,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     currentDocId: string | null;
     avatarStyle: string;
     isSelf: boolean;
-    showFollow: boolean;
     isFollowing: boolean;
+    showFollow: boolean;
     currentDocLabel: string | null;
     currentDocIcon: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/composables/useAAField.js

@@ -2,7 +2,7 @@ import { computed, isRef, onScopeDispose, ref } from "vue";
 import { useAwareness } from "./useAwareness.js";
 import { useAwarenessPeers } from "./useAwarenessPeers.js";
 export function useAAField(key) {
-  const { setField } = useAwareness();
+  const { setField, localState } = useAwareness();
   const { peers } = useAwarenessPeers();
   const fieldKey = computed(
     () => typeof key === "function" ? key() : isRef(key) ? key.value : key
@@ -38,7 +38,8 @@ export function useAAField(key) {
     setField("hover", fieldKey.value);
   }
   function onMouseleave() {
-    setField("hover", null);
+    const current = localState.value?.hover;
+    if (current === fieldKey.value) setField("hover", null);
   }
   function onMousedown() {
     localPress.value = true;
@@ -46,13 +47,15 @@ export function useAAField(key) {
   }
   function onMouseup() {
     localPress.value = false;
-    setField("press", null);
+    const current = localState.value?.press;
+    if (current === fieldKey.value) setField("press", null);
   }
   function onFocus() {
     setField("focus", fieldKey.value);
   }
   function onBlur() {
-    setField("focus", null);
+    const current = localState.value?.focus;
+    if (current === fieldKey.value) setField("focus", null);
   }
   const isPressed = computed(() => localPress.value || pressers.value.length > 0);
   const handlers = {

package/dist/runtime/composables/useAAFocus.js

@@ -97,12 +97,17 @@ export function useAAFocus() {
     const candidates = document.elementsFromPoint(clientX, clientY);
     for (const el of candidates) {
       if (!isAnchorable(el)) continue;
-      const path = pathFromElement(el);
-      if (!path) continue;
-      const r = el.getBoundingClientRect();
-      return { elementPath: path, dx: clientX - r.left, dy: clientY - r.top };
+      const path2 = pathFromElement(el);
+      if (!path2) continue;
+      const r2 = el.getBoundingClientRect();
+      return { elementPath: path2, dx: clientX - r2.left, dy: clientY - r2.top };
     }
-    return null;
+    const picked = pickAnchorElement();
+    if (!picked) return null;
+    const path = pathFromElement(picked.el);
+    if (!path) return null;
+    const r = picked.el.getBoundingClientRect();
+    return { elementPath: path, dx: clientX - r.left, dy: clientY - r.top };
   }
   function snapshot() {
     cancelAnimationFrame(raf);

package/dist/runtime/composables/useAAFollowAnchor.js

@@ -1,4 +1,4 @@
-import { computed, watch } from "vue";
+import { computed, onScopeDispose, watch } from "vue";
 import { useRoute, useRouter } from "#imports";
 import { useAAEphemeral } from "./useAAEphemeral.js";
 import { useAwarenessPeers } from "./useAwarenessPeers.js";
@@ -8,8 +8,11 @@ export function useAAFollowAnchor(leaderId) {
   const { peers: allPeers } = useAwarenessPeers();
   const route = useRoute();
   const router = useRouter();
+  const scrollState = /* @__PURE__ */ new Map();
   let scrollRaf = 0;
-  let lastTargetKey = "";
+  const LERP = 0.18;
+  const SETTLE_PX = 0.5;
+  const MIN_DELTA_PX = 4;
   const leaderPayload = computed(() => {
     const id = leaderId.value;
     if (id == null) return null;
@@ -23,43 +26,74 @@ export function useAAFollowAnchor(leaderId) {
       });
     }
   }, { immediate: true });
-  function scrollToLeader() {
-    cancelAnimationFrame(scrollRaf);
-    scrollRaf = requestAnimationFrame(() => {
-      const payload = leaderPayload.value;
-      if (!payload) return;
-      if (payload.route !== route.path) return;
-      const instructions = [];
-      if (payload.scrollers && payload.scrollers.length) {
-        for (const s of payload.scrollers) {
-          instructions.push({ container: s.containerPath, element: s.elementPath, ratio: s.ratio });
+  function ensureRaf() {
+    if (scrollRaf) return;
+    const tick = () => {
+      let stillMoving = false;
+      for (const [scroller, s] of scrollState) {
+        const delta = s.target - s.current;
+        if (Math.abs(delta) < SETTLE_PX) {
+          if (scroller === window) window.scrollTo({ top: s.target, behavior: "auto" });
+          else scroller.scrollTo({ top: s.target, behavior: "auto" });
+          scrollState.delete(scroller);
+          continue;
         }
-      } else if (payload.kind === "anchor" && payload.anchor) {
-        instructions.push({ element: payload.anchor.elementPath, ratio: payload.anchorRatio ?? 0.05 });
-      } else if (payload.kind === "selection" && payload.start) {
-        instructions.push({ element: payload.start.elementPath, ratio: 0.2 });
+        stillMoving = true;
+        s.current += delta * LERP;
+        if (scroller === window) window.scrollTo({ top: s.current, behavior: "auto" });
+        else scroller.scrollTo({ top: s.current, behavior: "auto" });
       }
-      const fingerprint = [];
-      for (const ins of instructions) {
-        const target = elementFromPath(ins.element);
-        if (!target || !target.isConnected) continue;
-        const scroller = ins.container ? elementFromPath(ins.container) ?? window : window;
-        const isWindow = scroller === window;
-        const scrollerRect = isWindow ? { top: 0, height: window.innerHeight || document.documentElement.clientHeight } : scroller.getBoundingClientRect();
-        const desiredTop = scrollerRect.top + scrollerRect.height * Math.max(0, Math.min(0.9, ins.ratio));
-        const rect = target.getBoundingClientRect();
-        const delta = rect.top - desiredTop;
-        fingerprint.push(`${isWindow ? "w" : ins.container?.join(",")}-${Math.round(rect.top)}-${ins.ratio.toFixed(3)}`);
-        if (Math.abs(delta) < 8) continue;
-        if (isWindow) window.scrollBy({ top: delta, behavior: "smooth" });
-        else scroller.scrollBy({ top: delta, behavior: "smooth" });
+      scrollRaf = stillMoving ? requestAnimationFrame(tick) : 0;
+    };
+    scrollRaf = requestAnimationFrame(tick);
+  }
+  function scrollToLeader() {
+    const payload = leaderPayload.value;
+    if (!payload) return;
+    if (payload.route !== route.path) return;
+    const instructions = [];
+    if (payload.scrollers && payload.scrollers.length) {
+      for (const s of payload.scrollers) {
+        instructions.push({ container: s.containerPath, element: s.elementPath, ratio: s.ratio });
       }
-      const key = fingerprint.join("|");
-      if (key === lastTargetKey) return;
-      lastTargetKey = key;
-    });
+    } else if (payload.kind === "anchor" && payload.anchor) {
+      instructions.push({ element: payload.anchor.elementPath, ratio: payload.anchorRatio ?? 0.05 });
+    } else if (payload.kind === "selection" && payload.start) {
+      instructions.push({ element: payload.start.elementPath, ratio: 0.2 });
+    }
+    let targetsChanged = false;
+    for (const ins of instructions) {
+      const target = elementFromPath(ins.element);
+      if (!target || !target.isConnected) continue;
+      const scroller = ins.container ? elementFromPath(ins.container) ?? window : window;
+      const isWindow = scroller === window;
+      const scrollerRect = isWindow ? { top: 0, height: window.innerHeight || document.documentElement.clientHeight } : scroller.getBoundingClientRect();
+      const desiredTop = scrollerRect.top + scrollerRect.height * Math.max(0, Math.min(0.9, ins.ratio));
+      const rect = target.getBoundingClientRect();
+      const delta = rect.top - desiredTop;
+      if (Math.abs(delta) < MIN_DELTA_PX) continue;
+      const currentScroll = isWindow ? window.scrollY : scroller.scrollTop;
+      const targetScroll = currentScroll + delta;
+      const existing = scrollState.get(scroller);
+      if (existing) {
+        existing.current = currentScroll;
+        if (Math.abs(existing.target - targetScroll) >= 0.5) {
+          existing.target = targetScroll;
+          targetsChanged = true;
+        }
+      } else {
+        scrollState.set(scroller, { current: currentScroll, target: targetScroll });
+        targetsChanged = true;
+      }
+    }
+    if (targetsChanged) ensureRaf();
   }
   watch(leaderPayload, scrollToLeader, { deep: true, flush: "post" });
+  onScopeDispose(() => {
+    if (scrollRaf) cancelAnimationFrame(scrollRaf);
+    scrollRaf = 0;
+    scrollState.clear();
+  });
   const leader = computed(() => {
     const id = leaderId.value;
     if (id == null) return null;

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

@@ -19,11 +19,14 @@ export interface UseAAFollowPeerOptions {
     onBreak?: () => void;
 }
 export declare function useAAFollowPeer(options?: UseAAFollowPeerOptions): {
-    follow: (clientId: number) => void;
+    follow: (clientIdOrPublicKey: number | string) => void;
     unfollow: () => void;
-    followingClientId: import("vue").Ref<number | null, number | null>;
+    followingClientId: import("vue").ComputedRef<number | null>;
+    followingPublicKey: import("vue").ComputedRef<string | null>;
     followingUser: import("vue").ComputedRef<{
-        name?: string;
-        color?: string;
+        name?: string | undefined;
+        color?: string | undefined;
+        publicKey?: string | undefined;
     } | null>;
+    isFollowing: import("vue").ComputedRef<boolean>;
 };