@copilotkit/vue 2.0.0-rc.19 → 2.0.0-rc.20

package/src/v2/components/chat/inspector-shortcuts.ts

@@ -1,34 +1,28 @@
+import { ɵinspectorShortcuts } from "@copilotkit/core";
 import { onBeforeUnmount, readonly, ref } from "vue";
 import type { Ref } from "vue";
 
-// Page-lifetime preference, shared by every message and chat. Deliberately
-// avoid sessionStorage: it survives reloads, while this preference must not.
-let shortcutsHidden = false;
-const listeners = new Set<() => void>();
-
 /**
  * Whether the user hid the Inspector buttons in the message toolbars ("Hide
- * this icon"), until the page reloads.
+ * this icon"), until the page reloads. Core's `ɵinspectorShortcuts` holds
+ * the page-lifetime preference.
  * @internal
  */
 export function useInspectorShortcutsHidden(): Readonly<Ref<boolean>> {
-  const hidden = ref(shortcutsHidden);
-  const listener = () => {
-    hidden.value = shortcutsHidden;
-  };
-  listeners.add(listener);
-  onBeforeUnmount(() => listeners.delete(listener));
+  const hidden = ref(ɵinspectorShortcuts.hidden);
+  const unsubscribe = ɵinspectorShortcuts.subscribe(() => {
+    hidden.value = ɵinspectorShortcuts.hidden;
+  });
+  onBeforeUnmount(unsubscribe);
   return readonly(hidden);
 }
 
 /** Hides the Inspector buttons of every message until the page reloads. */
 export function hideInspectorShortcuts(): void {
-  shortcutsHidden = true;
-  listeners.forEach((listener) => listener());
+  ɵinspectorShortcuts.hide();
 }
 
 /** @internal Shows the buttons again, so each test starts fresh. */
 export function ɵresetInspectorShortcuts(): void {
-  shortcutsHidden = false;
-  listeners.forEach((listener) => listener());
+  ɵinspectorShortcuts.reset();
 }

package/src/v2/components/chat/message-feedback.ts

@@ -1,23 +1,30 @@
 import type { AssistantMessage } from "@ag-ui/core";
 import type { CopilotKitCore } from "@copilotkit/core";
-import { computed, inject, onBeforeUnmount, ref, shallowRef, watch } from "vue";
-import type { ComputedRef, InjectionKey, Ref } from "vue";
 import {
-  getMessageFeedback,
-  setMessageFeedback,
-  subscribeToMessageFeedback,
-} from "../../lib/message-feedback";
+  ɵFeedbackCommentController,
+  ɵgetMessageFeedbackControls,
+  ɵisLearningFeedbackEnabled,
+  ɵsubscribeToLearningFeedbackEnabled,
+  ɵsubscribeToMessageFeedback,
+} from "@copilotkit/core";
+import type {
+  ɵMessageFeedbackControls,
+  ɵMessageFeedbackScope,
+} from "@copilotkit/core";
+import { computed, inject, onBeforeUnmount, ref, shallowRef, watch } from "vue";
 import type {
-  MessageFeedback,
-  MessageFeedbackRating,
-} from "../../lib/message-feedback";
+  ComputedRef,
+  InjectionKey,
+  Ref,
+  ShallowRef,
+  WritableComputedRef,
+} from "vue";
 
 /** The chat whose assistant messages collect feedback for Learning. */
-export interface MessageFeedbackScope {
-  readonly copilotkit: CopilotKitCore;
-  readonly agentId: string;
-  readonly threadId: string;
-}
+export type MessageFeedbackScope = ɵMessageFeedbackScope;
+
+/** Current feedback for one assistant message, and how to change it. */
+export type MessageFeedbackControls = ɵMessageFeedbackControls;
 
 /**
  * Provided by the message view while Learning is on for this chat. Assistant
@@ -29,68 +36,27 @@ export const MessageFeedbackScopeKey: InjectionKey<
   Ref<MessageFeedbackScope | null>
 > = Symbol("CopilotMessageFeedbackScope");
 
-// Cores that captured since Learning was configured, for chats that mount
-// while capture reconnects or is stopped. A Core leaves when its config goes.
-const capturedCores = new WeakSet<CopilotKitCore>();
-
-const rememberCapture = (copilotkit: CopilotKitCore) => {
-  if (capturedCores.has(copilotkit)) return;
-  capturedCores.add(copilotkit);
-  const unsubscribe = copilotkit.ɵsubscribeToLearningConfigured(() => {
-    if (copilotkit.ɵlearningConfigured) return;
-    capturedCores.delete(copilotkit);
-    unsubscribe();
-  });
-};
-
 /**
- * Whether the thumbs record feedback for Learning. True once a Trajectory of
- * this Core has started and as long as Learning stays configured, also while
- * capture reconnects or is stopped, so the buttons do not flicker. Ratings
- * given meanwhile still show but, like any Trajectory event, are not sent.
+ * Whether the thumbs record feedback for Learning. See core's
+ * `ɵisLearningFeedbackEnabled` for the rules.
  * @internal
  */
 export function useLearningFeedbackEnabled(
   copilotkit: Ref<CopilotKitCore>,
 ): ComputedRef<boolean> {
-  const configured = ref(false);
-  const capturing = ref(false);
-
+  const enabled = ref(false);
   watch(
     copilotkit,
     (core, _previous, onCleanup) => {
       const read = () => {
-        configured.value = core.ɵlearningConfigured;
-        capturing.value = core.trajectoryId !== null;
-        if (capturing.value) rememberCapture(core);
+        enabled.value = ɵisLearningFeedbackEnabled(core);
       };
       read();
-      const unsubscribeConfigured = core.ɵsubscribeToLearningConfigured(read);
-      const subscription = core.subscribe({ onTrajectoryChanged: read });
-      onCleanup(() => {
-        unsubscribeConfigured();
-        subscription.unsubscribe();
-      });
+      onCleanup(ɵsubscribeToLearningFeedbackEnabled(core, read));
     },
     { immediate: true },
   );
-
-  return computed(
-    () =>
-      configured.value &&
-      (capturing.value || capturedCores.has(copilotkit.value)),
-  );
-}
-
-/** Current feedback for one assistant message, and how to change it. */
-export interface MessageFeedbackControls {
-  readonly feedback: MessageFeedback | undefined;
-  /** Gives `rating`; a different rating than before starts without a comment. */
-  readonly rate: (rating: MessageFeedbackRating) => void;
-  /** Removes the rating and its comment. */
-  readonly clear: () => void;
-  /** Sets the current rating's comment; an empty one removes it. */
-  readonly comment: (comment: string) => void;
+  return computed(() => enabled.value);
 }
 
 /** Feedback controls for `message`, or `null` when this chat collects none. */
@@ -106,7 +72,7 @@ export function useMessageFeedback(
     (current, _previous, onCleanup) => {
       if (!current) return;
       onCleanup(
-        subscribeToMessageFeedback(current.agentId, current.threadId, () => {
+        ɵsubscribeToMessageFeedback(current.agentId, current.threadId, () => {
           version.value++;
         }),
       );
@@ -118,174 +84,73 @@ export function useMessageFeedback(
     const current = scope.value;
     if (!current) return null;
     void version.value;
-    const target = message.value;
-    const feedback = getMessageFeedback(
-      current.agentId,
-      current.threadId,
-      target.id,
-    );
-    const save = (next: MessageFeedback | null) =>
-      setMessageFeedback({ ...current, message: target, feedback: next });
-    return {
-      feedback,
-      rate: (rating) => {
-        if (feedback?.rating !== rating) save({ rating });
-      },
-      clear: () => {
-        if (feedback) save(null);
-      },
-      comment: (comment) => {
-        if (feedback) save({ rating: feedback.rating, comment });
-      },
-    };
+    return ɵgetMessageFeedbackControls(current, message.value);
   });
 }
 
-/**
- * How long the pointer may be away from the rating and its comment before the
- * comment closes: enough to cross the gap between them, short enough that
- * passing over a rating does not leave it open.
- */
-export const FEEDBACK_COMMENT_CLOSE_DELAY_MS = 150;
-
 /** The comment popover of one rated message: when it shows and what it holds. */
 export interface FeedbackComment {
-  readonly open: Ref<boolean>;
+  readonly open: ComputedRef<boolean>;
   /** The comment being edited. */
-  readonly draft: Ref<string>;
+  readonly draft: WritableComputedRef<string>;
   /** Grows each time the field should take focus: after a keyboard rating. */
-  readonly focusRequest: Ref<number>;
+  readonly focusRequest: ComputedRef<number>;
   /** Whether a focus request waits; reading it answers the request. */
   readonly takeFocusRequest: () => boolean;
   /** The comment field, for moving focus into it. */
-  readonly input: Ref<HTMLInputElement | null>;
+  readonly input: ShallowRef<HTMLInputElement | null>;
   /** Opens with `comment` in the field. */
-  readonly show: (options: { comment: string; focus: boolean }) => void;
+  readonly show: ɵFeedbackCommentController["show"];
   /** The pointer or focus reached the rating or the popover. */
-  readonly enter: (via?: "pointer" | "focus") => void;
+  readonly enter: ɵFeedbackCommentController["enter"];
   /**
    * It left them: close soon, unless the user is editing the comment or, when
    * focus left, the pointer is still on the rating or the popover.
    */
-  readonly leave: (via?: "pointer" | "focus") => void;
+  readonly leave: ɵFeedbackCommentController["leave"];
   /** Tracks whether focus is in the comment form. */
   readonly setEditing: (editing: boolean) => void;
   /** Closes, saving a changed comment unless `save` is false. */
-  readonly close: (options?: { save?: boolean }) => void;
+  readonly close: ɵFeedbackCommentController["close"];
   /** Moves focus back to the thumb without opening the comment again. */
   readonly returnFocus: (target: HTMLElement | null) => void;
 }
 
 /**
- * Drives the comment popover of a rated message, as React's
- * `useFeedbackComment` does.
- *
- * It opens when a rating is given and whenever the pointer or keyboard focus
- * reaches the chosen thumb, with the saved comment in the field. It closes by
- * itself shortly after the pointer leaves the thumb and the popover, unless
- * focus is in the field: then it stays until focus moves away, Enter, or
- * Escape. Closing saves a changed comment; Escape, a click on a thumb, and
- * removing the rating discard it.
+ * Drives the comment popover of a rated message with core's
+ * `ɵFeedbackCommentController`, which holds the open and close rules.
  * @internal
  */
 export function useFeedbackComment(
   controls: Ref<MessageFeedbackControls | null>,
 ): FeedbackComment {
-  const open = ref(false);
-  const draft = ref("");
-  const focusRequest = ref(0);
-  const input = shallowRef<HTMLInputElement | null>(null);
-  let timer: ReturnType<typeof setTimeout> | undefined;
-  let editing = false;
-  let focusWaiting = false;
-  // Whether the pointer is on the chosen thumb or the popover. Browsers that
-  // do not focus a clicked button move focus to nothing while it stays there.
-  let pointerOver = false;
-  // Set while focus moves back to the thumb, whose focus would open it again.
-  let returning = false;
-
-  const takeFocusRequest = () => {
-    const waiting = focusWaiting;
-    focusWaiting = false;
-    return waiting;
-  };
-
-  const cancelClose = () => {
-    if (timer === undefined) return;
-    clearTimeout(timer);
-    timer = undefined;
-  };
-
-  const savedComment = () => controls.value?.feedback?.comment ?? "";
-
-  const close = ({ save = true }: { save?: boolean } = {}) => {
-    cancelClose();
-    focusWaiting = false;
-    pointerOver = false;
-    if (!open.value) return;
-    const current = controls.value;
-    if (save && current?.feedback && draft.value.trim() !== savedComment())
-      current.comment(draft.value);
-    editing = false;
-    open.value = false;
-  };
-
-  const show = ({ comment, focus }: { comment: string; focus: boolean }) => {
-    cancelClose();
-    draft.value = comment;
-    if (focus) {
-      focusWaiting = true;
-      focusRequest.value++;
-    }
-    open.value = true;
-  };
-
+  const controller = new ɵFeedbackCommentController({
+    getControls: () => controls.value,
+  });
+  const state = shallowRef(controller.getSnapshot());
+  const unsubscribe = controller.subscribe(() => {
+    state.value = controller.getSnapshot();
+  });
   // A message that unmounts (scrolled out of a virtual list) keeps its edit.
   onBeforeUnmount(() => {
-    cancelClose();
-    const current = controls.value;
-    if (
-      open.value &&
-      current?.feedback &&
-      draft.value.trim() !== savedComment()
-    )
-      current.comment(draft.value);
+    controller.dispose();
+    unsubscribe();
   });
 
   return {
-    open,
-    draft,
-    focusRequest,
-    takeFocusRequest,
-    input,
-    show,
-    enter: (via = "focus") => {
-      cancelClose();
-      if (via === "pointer") pointerOver = true;
-      if (returning) return;
-      if (!open.value && controls.value?.feedback)
-        show({ comment: savedComment(), focus: false });
-    },
-    leave: (via = "focus") => {
-      if (via === "pointer") pointerOver = false;
-      else if (pointerOver) return;
-      cancelClose();
-      timer = setTimeout(() => {
-        timer = undefined;
-        if (!editing) close();
-      }, FEEDBACK_COMMENT_CLOSE_DELAY_MS);
-    },
-    setEditing: (value) => {
-      editing = value;
-    },
-    close,
-    returnFocus: (target) => {
-      returning = true;
-      try {
-        target?.focus();
-      } finally {
-        returning = false;
-      }
-    },
+    open: computed(() => state.value.open),
+    draft: computed({
+      get: () => state.value.draft,
+      set: controller.setDraft,
+    }),
+    focusRequest: computed(() => state.value.focusRequest),
+    takeFocusRequest: controller.takeFocusRequest,
+    input: shallowRef<HTMLInputElement | null>(null),
+    show: controller.show,
+    enter: controller.enter,
+    leave: controller.leave,
+    setEditing: controller.setEditing,
+    close: controller.close,
+    returnFocus: controller.returnFocus,
   };
 }

package/src/v2/components/chat/normalize-auto-scroll.ts

@@ -1,17 +1,3 @@
-export type AutoScrollMode = "pin-to-bottom" | "pin-to-send" | "none";
-
-const VALID: readonly AutoScrollMode[] = [
-  "pin-to-bottom",
-  "pin-to-send",
-  "none",
-];
-
-export function normalizeAutoScroll(
-  value: AutoScrollMode | boolean | undefined,
-): AutoScrollMode {
-  if (value === undefined) return "pin-to-bottom";
-  if (value === true) return "pin-to-bottom";
-  if (value === false) return "none";
-  if ((VALID as readonly string[]).includes(value)) return value;
-  return "pin-to-bottom";
-}
+// The rules live in core. This module keeps the import path stable.
+export { ɵnormalizeAutoScroll as normalizeAutoScroll } from "@copilotkit/core";
+export type { ɵAutoScrollMode as AutoScrollMode } from "@copilotkit/core";

package/src/v2/components/chat/use-copy-feedback.ts

@@ -0,0 +1,21 @@
+import { onBeforeUnmount, readonly, ref } from "vue";
+import { ɵCopyFeedback } from "@copilotkit/core";
+
+/**
+ * The "copied" check mark of a copy button, from core's `ɵCopyFeedback`:
+ * `copy(text)` writes to the clipboard and shows the check mark for two
+ * seconds; a second copy restarts the wait.
+ * @internal
+ */
+export function useCopyFeedback() {
+  const feedback = new ɵCopyFeedback();
+  const copied = ref(feedback.getSnapshot());
+  const unsubscribe = feedback.subscribe(() => {
+    copied.value = feedback.getSnapshot();
+  });
+  onBeforeUnmount(() => {
+    unsubscribe();
+    feedback.dispose();
+  });
+  return { copied: readonly(copied), copy: feedback.copy };
+}

package/src/v2/hooks/use-keyboard-height.ts

@@ -1,4 +1,6 @@
-import { onBeforeUnmount, onMounted, readonly, ref, type Ref } from "vue";
+import { onBeforeUnmount, onMounted, readonly, ref } from "vue";
+import type { Ref } from "vue";
+import { ɵinitialKeyboardState, ɵwatchKeyboardState } from "@copilotkit/core";
 
 /**
  * Vue-idiomatic result of {@link useKeyboardHeight}. Fields mirror the React
@@ -32,50 +34,25 @@ export interface KeyboardState {
  * ```
  */
 export function useKeyboardHeight(): KeyboardState {
-  const initialHeight = typeof window !== "undefined" ? window.innerHeight : 0;
-  const isKeyboardOpen = ref(false);
-  const keyboardHeight = ref(0);
-  const availableHeight = ref(initialHeight);
-  const viewportHeight = ref(initialHeight);
-
-  const updateKeyboardState = () => {
-    if (typeof window === "undefined") return;
-    const visualViewport = window.visualViewport;
-    if (!visualViewport) return;
-
-    const layoutHeight = window.innerHeight;
-    const visualHeight = visualViewport.height;
-
-    // Keyboard height = layout viewport minus visual viewport, clamped to 0.
-    const nextKeyboardHeight = Math.max(0, layoutHeight - visualHeight);
-    // Only treat the keyboard as open past the 150px threshold, matching
-    // the React implementation's mobile heuristic.
-    const nextIsOpen = nextKeyboardHeight > 150;
-
-    keyboardHeight.value = nextKeyboardHeight;
-    isKeyboardOpen.value = nextIsOpen;
-    availableHeight.value = visualHeight;
-    viewportHeight.value = layoutHeight;
-  };
-
-  let visualViewport: VisualViewport | null = null;
+  const initial = ɵinitialKeyboardState();
+  const isKeyboardOpen = ref(initial.isKeyboardOpen);
+  const keyboardHeight = ref(initial.keyboardHeight);
+  const availableHeight = ref(initial.availableHeight);
+  const viewportHeight = ref(initial.viewportHeight);
+  let stopWatching: (() => void) | undefined;
 
   onMounted(() => {
-    if (typeof window === "undefined") return;
-    visualViewport = window.visualViewport ?? null;
-    if (!visualViewport) return;
-
-    updateKeyboardState();
-
-    visualViewport.addEventListener("resize", updateKeyboardState);
-    visualViewport.addEventListener("scroll", updateKeyboardState);
+    stopWatching = ɵwatchKeyboardState((state) => {
+      keyboardHeight.value = state.keyboardHeight;
+      isKeyboardOpen.value = state.isKeyboardOpen;
+      availableHeight.value = state.availableHeight;
+      viewportHeight.value = state.viewportHeight;
+    });
   });
 
   onBeforeUnmount(() => {
-    if (!visualViewport) return;
-    visualViewport.removeEventListener("resize", updateKeyboardState);
-    visualViewport.removeEventListener("scroll", updateKeyboardState);
-    visualViewport = null;
+    stopWatching?.();
+    stopWatching = undefined;
   });
 
   return {

package/src/v2/hooks/use-pin-to-send.ts

@@ -1,5 +1,6 @@
 import { inject, watch } from "vue";
 import type { Ref } from "vue";
+import { ɵpinMessageToTop } from "@copilotkit/core";
 import {
   LastUserMessageKey,
   createDefaultLastUserMessageRef,
@@ -19,18 +20,10 @@ export interface UsePinToSendOptions {
  * pinned near the top of the viewport while the assistant streams a
  * response beneath it.
  *
- * Implementation parity with React:
- * - Reads the latest user message via the `LastUserMessageContext`
- *   equivalent (`LastUserMessageKey` + `Ref<LastUserMessageState>`).
- * - On each `sendNonce` increment, sizes the spacer to
- *   `viewportHeight - bubbleHeight - topOffset` and scrolls so the bubble
- *   sits `topOffset` from the viewport top (padding above the bubble is
- *   pushed off-screen).
- * - Installs a `ResizeObserver` on `contentRef` that adjusts the spacer in
- *   both directions as content below the anchored message changes, keeping
- *   the bubble pinned.
- * - Cancels the scheduled `requestAnimationFrame` and disconnects the
- *   `ResizeObserver` on subsequent re-runs and on scope dispose.
+ * Reads the latest user message via `LastUserMessageKey` and, on each
+ * `sendNonce` increment, runs core's `ɵpinMessageToTop`, which sizes the
+ * spacer, scrolls, and follows the reply's growth. The previous pin stops on
+ * the next run and on scope dispose.
  */
 export function usePinToSend({
   scrollRef,
@@ -45,17 +38,6 @@ export function usePinToSend({
   );
 
   let lastNonce = -1;
-  let raf: number | null = null;
-  let ro: ResizeObserver | null = null;
-
-  function teardown() {
-    if (raf !== null && typeof cancelAnimationFrame === "function") {
-      cancelAnimationFrame(raf);
-    }
-    raf = null;
-    ro?.disconnect();
-    ro = null;
-  }
 
   watch(
     [
@@ -67,90 +49,24 @@ export function usePinToSend({
       () => topOffset,
     ],
     ([id, sendNonce, scrollEl, contentEl, spacerEl], _old, onCleanup) => {
-      // Always tear down the previous run's RAF / ResizeObserver before
-      // evaluating any of the early-exit guards below. Mirrors React
-      // `useEffect` cleanup semantics: the prior run's cleanup runs before
-      // the next callback executes regardless of why the deps changed.
-      // Without this, a reactive `autoScroll` mode change (e.g. switching
-      // away from `"pin-to-send"`) or a `ref` swap that doesn't bump
-      // `sendNonce` would leak the stale content-element observer because
-      // the nonce guard skips the body. Registering via `onCleanup` also
-      // covers watcher stop on scope dispose, so an explicit
-      // `onScopeDispose(teardown)` is no longer required.
-      onCleanup(teardown);
-
       if (sendNonce === lastNonce) return;
       lastNonce = sendNonce;
 
       if (!id) return;
       if (!scrollEl || !contentEl || !spacerEl) return;
 
-      const escaped =
-        typeof CSS !== "undefined" && typeof CSS.escape === "function"
-          ? CSS.escape(id)
-          : id.replace(/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, "\\$&");
-      const targetEl = contentEl.querySelector<HTMLElement>(
-        `[data-message-id="${escaped}"]`,
+      // Registered through `onCleanup`, so the previous pin stops before the
+      // next run and when the watcher stops on scope dispose.
+      onCleanup(
+        ɵpinMessageToTop({
+          scrollEl,
+          contentEl,
+          spacerEl,
+          messageId: id,
+          topOffset,
+        }),
       );
-      if (!targetEl) return;
-
-      // The target message's element has a top padding (e.g. `pt-10`) that
-      // creates breathing room above the visible bubble. When we "anchor at
-      // the top", we mean anchor the *bubble*, not the element's padded box.
-      // So we scroll past the padding (it goes above the viewport, hiding
-      // whatever was above the element too — including the previous message's
-      // trailing copy button).
-      const viewportHeight = scrollEl.clientHeight;
-      const userMessageHeight = targetEl.getBoundingClientRect().height;
-      const paddingTop = parseFloat(getComputedStyle(targetEl).paddingTop) || 0;
-      const bubbleHeight = Math.max(0, userMessageHeight - paddingTop);
-      const spacerHeight = Math.max(
-        0,
-        viewportHeight - bubbleHeight - topOffset,
-      );
-
-      spacerEl.style.height = `${spacerHeight}px`;
-
-      if (typeof requestAnimationFrame === "function") {
-        raf = requestAnimationFrame(() => {
-          // Scroll so the BUBBLE is `topOffset` from the viewport top — the
-          // padding above the bubble ends up scrolled off-screen.
-          const targetTop =
-            computeOffsetTop(targetEl, scrollEl) + paddingTop - topOffset;
-          scrollEl.scrollTo({
-            top: Math.max(0, targetTop),
-            behavior: "smooth",
-          });
-        });
-      }
-
-      // As content below the anchored user message changes, adjust the spacer
-      // by the same amount so total scrollable space below the bubble stays
-      // constant and the bubble stays pinned.
-      if (typeof ResizeObserver !== "undefined") {
-        ro = new ResizeObserver(() => {
-          if (!contentEl || !spacerEl || !scrollEl) return;
-          const contentHeight = contentEl.getBoundingClientRect().height;
-          const targetOffsetWithinContent = computeOffsetTop(
-            targetEl,
-            contentEl,
-          );
-          const consumedBelow =
-            contentHeight - targetOffsetWithinContent - userMessageHeight;
-          const remaining = Math.max(0, spacerHeight - consumedBelow);
-          spacerEl.style.height = `${remaining}px`;
-        });
-        ro.observe(contentEl);
-      }
     },
     { immediate: true, flush: "post" },
   );
 }
-
-// Compute the offset of el relative to stopAt, accounting for stopAt's current scrollTop.
-// Uses getBoundingClientRect so it works regardless of CSS positioning (including position:static).
-function computeOffsetTop(el: HTMLElement, stopAt: HTMLElement): number {
-  const elRect = el.getBoundingClientRect();
-  const stopRect = stopAt.getBoundingClientRect();
-  return elRect.top - stopRect.top + stopAt.scrollTop;
-}