@mastra/playground-ui 61.0.0 → 62.0.0-alpha.1

package/dist/message-scroller-CdKh_ee4.js

@@ -0,0 +1,830 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { ArrowDownIcon } from 'lucide-react';
+import * as React from 'react';
+import { D as DEFAULT_SCROLLABLE, e as DEFAULT_VISIBILITY, f as DEFAULT_SCROLL_MARGIN, A as AUTO_SCROLL_ATTACH_THRESHOLD, g as DEFAULT_SCROLL_EDGE_THRESHOLD, h as DEFAULT_SCROLL_PREVIOUS_ITEM_PEEK, i as DEFAULT_REACH_START_THRESHOLD, M as MessageScrollerActionsContext, c as MessageScrollerScrollableContext, d as MessageScrollerVisibilityContext, u as useRequiredMessageScrollerActionsContext, a as useRequiredMessageScrollerScrollableContext } from './message-scroller-context-BF1Qo4vC.js';
+import { overlaySurfaceStyle } from './primitives/raised-surface.es.js';
+import { m as mergeRefs } from './merge-refs-DA1xt2OQ.js';
+import { c as cn } from './cn-coERSHz5.js';
+
+const VISIBILITY_EPSILON = 0.5;
+const getContentPadding = (contentElement) => {
+  if (!contentElement) return { start: 0, end: 0 };
+  const styles = window.getComputedStyle(contentElement);
+  return {
+    start: Number.parseFloat(styles.paddingBlockStart || styles.paddingTop) || 0,
+    end: Number.parseFloat(styles.paddingBlockEnd || styles.paddingBottom) || 0
+  };
+};
+const getMaxScroll = (viewportElement) => Math.max(0, viewportElement.scrollHeight - viewportElement.clientHeight);
+const getRelativeTop = (element, viewportElement) => {
+  const elementRect = element.getBoundingClientRect();
+  const viewportRect = viewportElement.getBoundingClientRect();
+  return elementRect.top - viewportRect.top + viewportElement.scrollTop;
+};
+const getScrollTarget = ({
+  align,
+  contentElement,
+  element,
+  scrollMargin,
+  viewportElement
+}) => {
+  const contentPadding = getContentPadding(contentElement);
+  const elementTop = getRelativeTop(element, viewportElement);
+  const elementHeight = element.getBoundingClientRect().height;
+  const visibleHeight = Math.max(0, viewportElement.clientHeight - contentPadding.start - contentPadding.end);
+  if (align === "center") return elementTop - contentPadding.start - (visibleHeight - elementHeight) / 2 - scrollMargin;
+  if (align === "end")
+    return elementTop - viewportElement.clientHeight + elementHeight + contentPadding.end + scrollMargin;
+  if (align === "nearest") {
+    const elementBottom = elementTop + elementHeight;
+    const viewportTop = viewportElement.scrollTop + contentPadding.start;
+    const viewportBottom = viewportElement.scrollTop + viewportElement.clientHeight - contentPadding.end;
+    if (elementTop >= viewportTop && elementBottom <= viewportBottom) return viewportElement.scrollTop;
+    return elementTop < viewportTop ? elementTop - contentPadding.start - scrollMargin : elementBottom - viewportElement.clientHeight + contentPadding.end + scrollMargin;
+  }
+  return elementTop - contentPadding.start - scrollMargin;
+};
+const getFollowTarget = ({
+  contentElement,
+  items,
+  viewportElement
+}) => {
+  const end = getMaxScroll(viewportElement);
+  const lastRow = items.at(-1)?.[1].element;
+  if (!lastRow || !contentElement) return end;
+  const contentBottom = getRelativeTop(contentElement, viewportElement) + contentElement.getBoundingClientRect().height;
+  const belowContent = Math.max(0, viewportElement.scrollHeight - contentBottom);
+  const rowBottom = getRelativeTop(lastRow, viewportElement) + lastRow.getBoundingClientRect().height;
+  return Math.min(end, Math.max(0, rowBottom + belowContent - viewportElement.clientHeight));
+};
+const getCurrentAnchorId = ({
+  fallbackAnchorId,
+  items,
+  scrollMargin,
+  scrollPreviousItemPeek,
+  visibleMessageIds,
+  viewportElement
+}) => {
+  const anchorLine = viewportElement.getBoundingClientRect().top + scrollMargin + scrollPreviousItemPeek;
+  const anchors = items.filter(([, item]) => item.scrollAnchor);
+  let anchoredAboveViewport;
+  for (const [messageId, item] of anchors) {
+    if (item.element.getBoundingClientRect().top <= anchorLine + VISIBILITY_EPSILON) {
+      anchoredAboveViewport = messageId;
+    }
+  }
+  if (anchoredAboveViewport) return anchoredAboveViewport;
+  return anchors.find(([messageId]) => visibleMessageIds.has(messageId))?.[0] ?? fallbackAnchorId;
+};
+
+const GLIDE_MAX = 240;
+const GLIDE_MS = 220;
+const GLIDE_EASE = "cubic-bezier(0.33, 1, 0.68, 1)";
+function currentOffset(element) {
+  if (typeof DOMMatrixReadOnly === "undefined") return 0;
+  const { transform } = getComputedStyle(element);
+  if (!transform || transform === "none") return 0;
+  return new DOMMatrixReadOnly(transform).m42;
+}
+const travels = /* @__PURE__ */ new WeakMap();
+function release(element) {
+  travels.get(element)?.abort();
+  travels.delete(element);
+  element.style.transition = "";
+  element.style.transform = "";
+}
+function calm() {
+  if (typeof window === "undefined" || !window.matchMedia) return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function glideContent(element, delta) {
+  if (!element || delta <= 0 || calm()) return;
+  const offset = currentOffset(element) + delta;
+  if (offset > GLIDE_MAX) {
+    release(element);
+    return;
+  }
+  element.style.transition = "none";
+  element.style.transform = `translateY(${offset}px)`;
+  void element.offsetHeight;
+  element.style.transition = `transform ${GLIDE_MS}ms ${GLIDE_EASE}`;
+  element.style.transform = "translateY(0)";
+  travels.get(element)?.abort();
+  const travel = new AbortController();
+  travels.set(element, travel);
+  const settle = (event) => {
+    if (event.target !== element) return;
+    if (currentOffset(element) === 0) release(element);
+  };
+  element.addEventListener("transitionend", settle, { signal: travel.signal });
+  element.addEventListener("transitioncancel", settle, { signal: travel.signal });
+}
+
+const TRIP_MS = 560;
+const TRIP_OVERTIME_MS = 240;
+const easeOutQuint = (t) => 1 - (1 - t) ** 5;
+function startTrip(viewportElement, getTarget, onEnd) {
+  const reduceMotion = typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  const duration = reduceMotion ? 0 : TRIP_MS;
+  const startedAt = performance.now();
+  const from = viewportElement.scrollTop;
+  let lastWritten = from;
+  let frame = 0;
+  let ended = false;
+  const end = (reason) => {
+    ended = true;
+    onEnd(reason);
+  };
+  const step = () => {
+    if (Math.abs(viewportElement.scrollTop - lastWritten) > 1) return end("interrupted");
+    const target = getTarget();
+    if (target === void 0) return end("expired");
+    const elapsed = performance.now() - startedAt;
+    const progress = duration === 0 ? 1 : Math.min(1, elapsed / duration);
+    viewportElement.scrollTop = from + (target - from) * easeOutQuint(progress);
+    lastWritten = viewportElement.scrollTop;
+    if (progress === 1 && Math.abs(lastWritten - target) <= VISIBILITY_EPSILON) return end("arrived");
+    if (elapsed >= duration + TRIP_OVERTIME_MS) return end("expired");
+    frame = window.requestAnimationFrame(step);
+  };
+  frame = window.requestAnimationFrame(step);
+  return {
+    cancel: () => {
+      if (ended) return;
+      ended = true;
+      window.cancelAnimationFrame(frame);
+    }
+  };
+}
+
+const scrollableMatches = (left, right) => left.start === right.start && left.end === right.end;
+const visibilityMatches = (left, right) => left.currentAnchorId === right.currentAnchorId && left.visibleMessageIds.length === right.visibleMessageIds.length && left.visibleMessageIds.every((messageId, index) => messageId === right.visibleMessageIds[index]);
+const orderItemsByDocumentPosition = (items) => items.sort(([, left], [, right]) => {
+  const position = left.element.compareDocumentPosition(right.element);
+  if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
+  if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;
+  return 0;
+});
+const scrollViewportTo = (viewportElement, top, behavior) => {
+  if (typeof viewportElement.scrollTo === "function") {
+    viewportElement.scrollTo({ top, behavior });
+    return;
+  }
+  viewportElement.scrollTop = top;
+};
+const scheduleScrollSync = (callback) => {
+  if (typeof window.requestAnimationFrame === "function") {
+    window.requestAnimationFrame(callback);
+    return;
+  }
+  window.setTimeout(callback, 0);
+};
+function MessageScrollerProvider({
+  autoScroll = false,
+  children,
+  defaultScrollPosition = "end",
+  onReachStart,
+  preserveScrollOnPrepend = false,
+  reachStartThreshold = DEFAULT_REACH_START_THRESHOLD,
+  scrollEdgeThreshold = DEFAULT_SCROLL_EDGE_THRESHOLD,
+  scrollMargin = DEFAULT_SCROLL_MARGIN,
+  scrollPreviousItemPeek = DEFAULT_SCROLL_PREVIOUS_ITEM_PEEK
+}) {
+  const itemsRef = React.useRef(null);
+  itemsRef.current ??= /* @__PURE__ */ new Map();
+  const itemsRegistry = itemsRef.current;
+  const orderedItemsRef = React.useRef(null);
+  const visibleMessageIdsRef = React.useRef(null);
+  visibleMessageIdsRef.current ??= /* @__PURE__ */ new Set();
+  const intersectingMessageIds = visibleMessageIdsRef.current;
+  const [itemsVersion, setItemsVersion] = React.useState(0);
+  const [rootElement, setRootElement] = React.useState(null);
+  const [viewportElement, setViewportElement] = React.useState(null);
+  const [contentElement, setContentElement] = React.useState(null);
+  const defaultScrollAppliedRef = React.useRef(false);
+  const deferDefaultScrollRef = React.useRef(false);
+  const defaultScrollScheduledRef = React.useRef(false);
+  const seenAnchorIdsRef = React.useRef(null);
+  seenAnchorIdsRef.current ??= /* @__PURE__ */ new Set();
+  const seenAnchorIds = seenAnchorIdsRef.current;
+  const seenAnchorElementsRef = React.useRef(null);
+  seenAnchorElementsRef.current ??= /* @__PURE__ */ new WeakSet();
+  const seenAnchorElements = seenAnchorElementsRef.current;
+  const turnAnchoringArmedRef = React.useRef(false);
+  const [scrollable, setScrollable] = React.useState(DEFAULT_SCROLLABLE);
+  const [visibility, setVisibility] = React.useState(DEFAULT_VISIBILITY);
+  const atEndRef = React.useRef(true);
+  const followingRef = React.useRef(true);
+  const tripRef = React.useRef(null);
+  const tripAnimationRef = React.useRef(null);
+  const lastScrollTopRef = React.useRef(0);
+  const reachStartArmedRef = React.useRef(false);
+  const reachStartFiredRef = React.useRef(false);
+  const prependAnchorRef = React.useRef(null);
+  const firstItemIdRef = React.useRef(void 0);
+  const onReachStartRef = React.useRef(onReachStart);
+  React.useEffect(() => {
+    onReachStartRef.current = onReachStart;
+  }, [onReachStart]);
+  const publishScrollable = React.useCallback(
+    (nextScrollable) => {
+      const scrollableValue = [nextScrollable.start && "start", nextScrollable.end && "end"].filter(Boolean).join(" ");
+      for (const element of [rootElement, viewportElement]) {
+        if (!element) continue;
+        if (scrollableValue) {
+          element.setAttribute("data-scrollable", scrollableValue);
+        } else {
+          element.removeAttribute("data-scrollable");
+        }
+      }
+      setScrollable((current) => scrollableMatches(current, nextScrollable) ? current : nextScrollable);
+    },
+    [rootElement, viewportElement]
+  );
+  const publishVisibility = React.useCallback((nextVisibility) => {
+    setVisibility((current) => visibilityMatches(current, nextVisibility) ? current : nextVisibility);
+  }, []);
+  const getOrderedItems = React.useCallback(() => {
+    orderedItemsRef.current ??= orderItemsByDocumentPosition(Array.from(itemsRegistry.entries()));
+    return orderedItemsRef.current;
+  }, [itemsRegistry]);
+  const followTarget = React.useCallback(() => {
+    if (!viewportElement) return 0;
+    return getFollowTarget({ contentElement, items: getOrderedItems(), viewportElement });
+  }, [contentElement, getOrderedItems, viewportElement]);
+  const anchorTripTarget = React.useCallback(
+    (anchorId) => {
+      const item = itemsRegistry.get(anchorId);
+      if (!item || !viewportElement) return void 0;
+      return Math.max(
+        0,
+        getScrollTarget({ align: "start", contentElement, element: item.element, scrollMargin, viewportElement })
+      );
+    },
+    [contentElement, itemsRegistry, scrollMargin, viewportElement]
+  );
+  const parkTripTarget = React.useCallback(
+    (anchorId) => {
+      const target = anchorTripTarget(anchorId);
+      if (target === void 0 || !viewportElement) return target;
+      return Math.min(target, getMaxScroll(viewportElement));
+    },
+    [anchorTripTarget, viewportElement]
+  );
+  const cancelTripAnimation = React.useCallback(() => {
+    tripAnimationRef.current?.cancel();
+    tripAnimationRef.current = null;
+  }, []);
+  const updateScrollable = React.useCallback(
+    ({ fromScroll = false } = {}) => {
+      if (!viewportElement) {
+        atEndRef.current = true;
+        publishScrollable(DEFAULT_SCROLLABLE);
+        return false;
+      }
+      const { scrollTop } = viewportElement;
+      const remainingScroll = followTarget() - scrollTop;
+      const wentBack = scrollTop < lastScrollTopRef.current;
+      atEndRef.current = remainingScroll < AUTO_SCROLL_ATTACH_THRESHOLD;
+      if (tripRef.current === "end" && (wentBack || atEndRef.current)) tripRef.current = null;
+      lastScrollTopRef.current = scrollTop;
+      if (fromScroll && tripRef.current === null && (wentBack || atEndRef.current)) {
+        followingRef.current = atEndRef.current;
+      }
+      publishScrollable({
+        start: scrollTop > scrollEdgeThreshold,
+        end: remainingScroll > scrollEdgeThreshold && !(autoScroll && followingRef.current)
+      });
+      return wentBack;
+    },
+    [autoScroll, followTarget, publishScrollable, scrollEdgeThreshold, viewportElement]
+  );
+  const getLastAnchorId = React.useCallback(
+    () => getOrderedItems().filter(([, item]) => item.scrollAnchor).at(-1)?.[0],
+    [getOrderedItems]
+  );
+  const updateVisibility = React.useCallback(() => {
+    const items = getOrderedItems();
+    const fallbackAnchorId = getLastAnchorId() ?? items.at(-1)?.[0];
+    if (items.length === 0) {
+      publishVisibility(DEFAULT_VISIBILITY);
+      return;
+    }
+    if (!viewportElement) {
+      publishVisibility({
+        currentAnchorId: fallbackAnchorId,
+        visibleMessageIds: fallbackAnchorId ? [fallbackAnchorId] : []
+      });
+      return;
+    }
+    const viewportRect = viewportElement.getBoundingClientRect();
+    const visibleMessageIds = /* @__PURE__ */ new Set();
+    if (typeof IntersectionObserver === "undefined") {
+      const visibilityTop = viewportRect.top + scrollMargin + scrollPreviousItemPeek;
+      items.forEach(([messageId, item]) => {
+        const rect = item.element.getBoundingClientRect();
+        if (rect.bottom > visibilityTop && rect.top < viewportRect.bottom) visibleMessageIds.add(messageId);
+      });
+    } else {
+      intersectingMessageIds.forEach((messageId) => visibleMessageIds.add(messageId));
+    }
+    const orderedVisibleMessageIds = items.flatMap(
+      ([messageId]) => visibleMessageIds.has(messageId) ? [messageId] : []
+    );
+    publishVisibility({
+      currentAnchorId: getCurrentAnchorId({
+        fallbackAnchorId,
+        items,
+        scrollMargin,
+        scrollPreviousItemPeek,
+        visibleMessageIds,
+        viewportElement
+      }),
+      visibleMessageIds: orderedVisibleMessageIds.length > 0 ? orderedVisibleMessageIds : fallbackAnchorId ? [fallbackAnchorId] : []
+    });
+  }, [
+    getLastAnchorId,
+    getOrderedItems,
+    intersectingMessageIds,
+    publishVisibility,
+    scrollMargin,
+    scrollPreviousItemPeek,
+    viewportElement
+  ]);
+  const syncAfterScroll = React.useCallback(() => {
+    updateScrollable();
+    updateVisibility();
+  }, [updateScrollable, updateVisibility]);
+  const notifyScroll = React.useCallback(() => {
+    const wasScrollable = Boolean(viewportElement && viewportElement.scrollHeight > viewportElement.clientHeight);
+    const readerWentBack = updateScrollable({ fromScroll: true });
+    updateVisibility();
+    if (!viewportElement) return;
+    if (readerWentBack && wasScrollable) reachStartArmedRef.current = true;
+    if (!reachStartArmedRef.current) return;
+    if (!wasScrollable) return;
+    if (viewportElement.scrollTop > reachStartThreshold) {
+      reachStartFiredRef.current = false;
+      return;
+    }
+    if (reachStartFiredRef.current) return;
+    if (!onReachStartRef.current) return;
+    reachStartFiredRef.current = true;
+    if (preserveScrollOnPrepend) {
+      prependAnchorRef.current = {
+        scrollHeight: viewportElement.scrollHeight,
+        scrollTop: viewportElement.scrollTop
+      };
+    }
+    onReachStartRef.current();
+  }, [preserveScrollOnPrepend, reachStartThreshold, updateScrollable, updateVisibility, viewportElement]);
+  const scrollToElement = React.useCallback(
+    (element, {
+      align = "start",
+      behavior = "auto",
+      scrollMargin: optionScrollMargin = scrollMargin
+    } = {}) => {
+      if (!viewportElement || !contentElement?.contains(element)) return false;
+      const nextScrollTop = Math.max(
+        0,
+        getScrollTarget({ align, contentElement, element, scrollMargin: optionScrollMargin, viewportElement })
+      );
+      if (Math.abs(viewportElement.scrollTop - nextScrollTop) <= VISIBILITY_EPSILON) {
+        scrollViewportTo(viewportElement, nextScrollTop, "auto");
+        syncAfterScroll();
+        return true;
+      }
+      scrollViewportTo(viewportElement, nextScrollTop, behavior);
+      scheduleScrollSync(syncAfterScroll);
+      return true;
+    },
+    [contentElement, scrollMargin, syncAfterScroll, viewportElement]
+  );
+  const scrollToStart = React.useCallback(
+    ({ behavior = "auto" } = {}) => {
+      if (!viewportElement) return false;
+      cancelTripAnimation();
+      tripRef.current = null;
+      scrollViewportTo(viewportElement, 0, behavior);
+      scheduleScrollSync(syncAfterScroll);
+      return true;
+    },
+    [cancelTripAnimation, syncAfterScroll, viewportElement]
+  );
+  const scrollToEnd = React.useCallback(
+    ({ behavior = "auto" } = {}) => {
+      if (!viewportElement) return false;
+      cancelTripAnimation();
+      followingRef.current = true;
+      tripRef.current = behavior === "smooth" ? "end" : null;
+      scrollViewportTo(viewportElement, followTarget(), behavior);
+      syncAfterScroll();
+      scheduleScrollSync(syncAfterScroll);
+      return true;
+    },
+    [cancelTripAnimation, followTarget, syncAfterScroll, viewportElement]
+  );
+  const scrollToMessage = React.useCallback(
+    (messageId, options) => {
+      const item = itemsRegistry.get(messageId);
+      if (!item) return false;
+      return scrollToElement(item.element, options);
+    },
+    [itemsRegistry, scrollToElement]
+  );
+  const notifyContentResize = React.useCallback(() => {
+    const trip = tripRef.current;
+    const onAnchorTrip = trip !== null && trip !== "end";
+    if (!onAnchorTrip && autoScroll && defaultScrollAppliedRef.current && followingRef.current && viewportElement) {
+      const overflow = followTarget() - viewportElement.scrollTop;
+      if (overflow > VISIBILITY_EPSILON) {
+        const travelling = trip === "end";
+        scrollViewportTo(viewportElement, followTarget(), travelling ? "smooth" : "auto");
+        if (!travelling) glideContent(contentElement, overflow);
+      }
+    }
+    syncAfterScroll();
+  }, [autoScroll, contentElement, followTarget, syncAfterScroll, viewportElement]);
+  const registerItem = React.useCallback(
+    (messageId, element, scrollAnchor) => {
+      itemsRegistry.set(messageId, { element, scrollAnchor });
+      orderedItemsRef.current = null;
+      setItemsVersion((version) => version + 1);
+      return () => {
+        const current = itemsRegistry.get(messageId);
+        if (current?.element !== element) return;
+        itemsRegistry.delete(messageId);
+        intersectingMessageIds.delete(messageId);
+        orderedItemsRef.current = null;
+        setItemsVersion((version) => version + 1);
+      };
+    },
+    [intersectingMessageIds, itemsRegistry]
+  );
+  React.useEffect(() => {
+    if (!contentElement || !viewportElement || typeof IntersectionObserver === "undefined") {
+      updateVisibility();
+      return void 0;
+    }
+    const messageIdByElement = /* @__PURE__ */ new Map();
+    for (const [messageId, item] of itemsRegistry) {
+      messageIdByElement.set(item.element, messageId);
+    }
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          const messageId = messageIdByElement.get(entry.target);
+          if (!messageId) continue;
+          if (entry.isIntersecting) {
+            intersectingMessageIds.add(messageId);
+          } else {
+            intersectingMessageIds.delete(messageId);
+          }
+        }
+        updateVisibility();
+      },
+      {
+        root: viewportElement,
+        rootMargin: `${-(scrollMargin + scrollPreviousItemPeek)}px 0px 0px 0px`,
+        threshold: [0, 0.01, 0.5, 1]
+      }
+    );
+    for (const [, item] of itemsRegistry) observer.observe(item.element);
+    updateVisibility();
+    return () => observer.disconnect();
+  }, [
+    contentElement,
+    intersectingMessageIds,
+    itemsRegistry,
+    itemsVersion,
+    scrollMargin,
+    scrollPreviousItemPeek,
+    updateVisibility,
+    viewportElement
+  ]);
+  React.useEffect(() => {
+    if (!viewportElement || typeof ResizeObserver === "undefined") return void 0;
+    const observer = new ResizeObserver(syncAfterScroll);
+    observer.observe(viewportElement);
+    return () => observer.disconnect();
+  }, [syncAfterScroll, viewportElement]);
+  React.useLayoutEffect(() => {
+    updateScrollable();
+    updateVisibility();
+  }, [itemsVersion, updateScrollable, updateVisibility]);
+  React.useLayoutEffect(() => {
+    if (defaultScrollAppliedRef.current || !viewportElement) return void 0;
+    if (itemsRegistry.size === 0) {
+      deferDefaultScrollRef.current = true;
+      return void 0;
+    }
+    const applyDefaultScroll = () => {
+      const lastAnchorId = getLastAnchorId();
+      followingRef.current = false;
+      let didScroll = false;
+      if (defaultScrollPosition === "start") {
+        didScroll = scrollToStart({ behavior: "auto" });
+      } else if (defaultScrollPosition === "last-anchor") {
+        didScroll = lastAnchorId ? scrollToMessage(lastAnchorId, { align: "start", behavior: "auto" }) : scrollToEnd({ behavior: "auto" });
+      } else {
+        didScroll = scrollToEnd({ behavior: "auto" });
+      }
+      if (!didScroll) return;
+      defaultScrollAppliedRef.current = true;
+      if (autoScroll && getMaxScroll(viewportElement) <= VISIBILITY_EPSILON) followingRef.current = true;
+      for (const [messageId, item] of getOrderedItems()) {
+        if (!item.scrollAnchor) continue;
+        seenAnchorIds.add(messageId);
+        seenAnchorElements.add(item.element);
+      }
+      turnAnchoringArmedRef.current = true;
+    };
+    if (!deferDefaultScrollRef.current) {
+      applyDefaultScroll();
+      return void 0;
+    }
+    if (defaultScrollScheduledRef.current) return void 0;
+    defaultScrollScheduledRef.current = true;
+    let cancelled = false;
+    scheduleScrollSync(() => {
+      scheduleScrollSync(() => {
+        defaultScrollScheduledRef.current = false;
+        if (!cancelled && !defaultScrollAppliedRef.current) applyDefaultScroll();
+      });
+    });
+    return () => {
+      cancelled = true;
+      defaultScrollScheduledRef.current = false;
+    };
+  }, [
+    autoScroll,
+    defaultScrollPosition,
+    getLastAnchorId,
+    getOrderedItems,
+    itemsRegistry,
+    itemsVersion,
+    scrollToEnd,
+    scrollToMessage,
+    scrollToStart,
+    seenAnchorElements,
+    seenAnchorIds,
+    viewportElement
+  ]);
+  React.useLayoutEffect(() => {
+    const lastAnchorId = getLastAnchorId();
+    const lastAnchor = lastAnchorId ? itemsRegistry.get(lastAnchorId) : void 0;
+    const opensTurn = turnAnchoringArmedRef.current && lastAnchorId !== void 0 && lastAnchor !== void 0 && !seenAnchorIds.has(lastAnchorId) && !seenAnchorElements.has(lastAnchor.element);
+    for (const [messageId, item] of getOrderedItems()) {
+      if (!item.scrollAnchor) continue;
+      seenAnchorIds.add(messageId);
+      seenAnchorElements.add(item.element);
+    }
+    turnAnchoringArmedRef.current = defaultScrollAppliedRef.current;
+    if (opensTurn && lastAnchorId) {
+      if (autoScroll) followingRef.current = true;
+      cancelTripAnimation();
+      const target = viewportElement ? anchorTripTarget(lastAnchorId) : void 0;
+      if (target === void 0 || !viewportElement || Math.abs(target - viewportElement.scrollTop) <= VISIBILITY_EPSILON) {
+        tripRef.current = null;
+      } else {
+        tripRef.current = { anchorId: lastAnchorId };
+        tripAnimationRef.current = startTrip(
+          viewportElement,
+          () => parkTripTarget(lastAnchorId),
+          (reason) => {
+            tripAnimationRef.current = null;
+            tripRef.current = null;
+            if (reason === "interrupted") followingRef.current = atEndRef.current;
+            syncAfterScroll();
+          }
+        );
+      }
+      syncAfterScroll();
+      return;
+    }
+    if (!autoScroll || !defaultScrollAppliedRef.current || !followingRef.current) return;
+    if (tripRef.current !== null && tripRef.current !== "end") return;
+    if (viewportElement && followTarget() - viewportElement.scrollTop <= VISIBILITY_EPSILON) return;
+    scrollToEnd({ behavior: tripRef.current === "end" ? "smooth" : "auto" });
+  }, [
+    anchorTripTarget,
+    autoScroll,
+    cancelTripAnimation,
+    followTarget,
+    getLastAnchorId,
+    getOrderedItems,
+    itemsRegistry,
+    itemsVersion,
+    parkTripTarget,
+    scrollToEnd,
+    seenAnchorElements,
+    seenAnchorIds,
+    syncAfterScroll,
+    viewportElement
+  ]);
+  React.useEffect(
+    () => () => {
+      cancelTripAnimation();
+      tripRef.current = null;
+    },
+    [cancelTripAnimation, viewportElement]
+  );
+  React.useLayoutEffect(() => {
+    const previousFirstItemId = firstItemIdRef.current;
+    const firstItemId = contentElement?.querySelector('[data-slot="message-scroller-item"]')?.dataset.messageId;
+    firstItemIdRef.current = firstItemId;
+    const anchor = prependAnchorRef.current;
+    prependAnchorRef.current = null;
+    if (!anchor || !viewportElement || firstItemId === previousFirstItemId) return;
+    reachStartFiredRef.current = false;
+    const grownBy = viewportElement.scrollHeight - anchor.scrollHeight;
+    if (grownBy > 0) viewportElement.scrollTop = anchor.scrollTop + grownBy;
+  }, [contentElement, itemsVersion, viewportElement]);
+  const actionsContextValue = React.useMemo(
+    () => ({
+      notifyContentResize,
+      notifyScroll,
+      registerItem,
+      scrollToEnd,
+      scrollToMessage,
+      scrollToStart,
+      setContentElement,
+      setRootElement,
+      setViewportElement,
+      syncAfterScroll
+    }),
+    [notifyContentResize, notifyScroll, registerItem, scrollToEnd, scrollToMessage, scrollToStart, syncAfterScroll]
+  );
+  const scrollableContextValue = React.useMemo(
+    () => ({
+      end: scrollable.end,
+      start: scrollable.start
+    }),
+    [scrollable.end, scrollable.start]
+  );
+  const visibilityContextValue = React.useMemo(
+    () => ({
+      currentAnchorId: visibility.currentAnchorId,
+      visibleMessageIds: visibility.visibleMessageIds
+    }),
+    [visibility.currentAnchorId, visibility.visibleMessageIds]
+  );
+  return /* @__PURE__ */ jsx(MessageScrollerActionsContext.Provider, { value: actionsContextValue, children: /* @__PURE__ */ jsx(MessageScrollerScrollableContext.Provider, { value: scrollableContextValue, children: /* @__PURE__ */ jsx(MessageScrollerVisibilityContext.Provider, { value: visibilityContextValue, children }) }) });
+}
+const MessageScroller = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    const { setRootElement } = useRequiredMessageScrollerActionsContext("MessageScroller");
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: mergeRefs(setRootElement, ref),
+        "data-slot": "message-scroller",
+        className: cn("group/message-scroller relative flex size-full min-h-0 flex-col", className),
+        ...props
+      }
+    );
+  }
+);
+MessageScroller.displayName = "MessageScroller";
+const MessageScrollerViewport = React.forwardRef(
+  ({ className, onScroll, role, tabIndex, ...props }, ref) => {
+    const { setViewportElement, notifyScroll } = useRequiredMessageScrollerActionsContext("MessageScrollerViewport");
+    const viewportRef = React.useMemo(() => mergeRefs(setViewportElement, ref), [ref, setViewportElement]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: viewportRef,
+        role: role ?? "region",
+        tabIndex: tabIndex ?? 0,
+        "data-slot": "message-scroller-viewport",
+        className: cn(
+          // Size container so consumers can size the room under a live turn in cqh.
+          "[container-type:size] size-full min-h-0 min-w-0 overflow-y-auto overscroll-contain",
+          "data-autoscrolling:scrollbar-thumb-transparent data-autoscrolling:scrollbar-track-transparent",
+          className
+        ),
+        onScroll: (event) => {
+          notifyScroll();
+          onScroll?.(event);
+        },
+        ...props
+      }
+    );
+  }
+);
+MessageScrollerViewport.displayName = "MessageScrollerViewport";
+const MessageScrollerContent = React.forwardRef(
+  ({ children, className, spacerClassName, role, "aria-relevant": ariaRelevant = "additions", ...props }, ref) => {
+    const { setContentElement, notifyContentResize, syncAfterScroll } = useRequiredMessageScrollerActionsContext("MessageScrollerContent");
+    const [contentElement, setLocalContentElement] = React.useState(null);
+    const contentRef = React.useMemo(
+      () => mergeRefs(setContentElement, setLocalContentElement, ref),
+      [ref, setContentElement]
+    );
+    React.useLayoutEffect(() => {
+      syncAfterScroll();
+    }, [syncAfterScroll]);
+    React.useEffect(() => {
+      if (!contentElement || typeof MutationObserver === "undefined") return void 0;
+      const observer = new MutationObserver(notifyContentResize);
+      observer.observe(contentElement, { childList: true, subtree: false });
+      return () => observer.disconnect();
+    }, [contentElement, notifyContentResize]);
+    React.useEffect(() => {
+      if (!contentElement || typeof ResizeObserver === "undefined") return void 0;
+      const observer = new ResizeObserver(notifyContentResize);
+      observer.observe(contentElement);
+      return () => observer.disconnect();
+    }, [contentElement, notifyContentResize]);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: contentRef,
+        role: role ?? "log",
+        "aria-relevant": ariaRelevant,
+        "data-slot": "message-scroller-content",
+        className: cn("flex h-max min-h-full flex-col gap-6", className),
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsx("div", { "aria-hidden": "true", "data-message-scroller-spacer": "", hidden: true, className: spacerClassName })
+        ]
+      }
+    );
+  }
+);
+MessageScrollerContent.displayName = "MessageScrollerContent";
+const MessageScrollerItem = React.forwardRef(
+  ({ className, messageId, scrollAnchor = false, ...props }, ref) => {
+    const registerItem = React.useContext(MessageScrollerActionsContext)?.registerItem;
+    const unregisterRef = React.useRef(void 0);
+    const itemRef = React.useCallback(
+      (element) => {
+        unregisterRef.current?.();
+        unregisterRef.current = void 0;
+        mergeRefs(ref)(element);
+        if (!element || !messageId || !registerItem) return;
+        unregisterRef.current = registerItem(messageId, element, scrollAnchor);
+      },
+      [messageId, ref, registerItem, scrollAnchor]
+    );
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: itemRef,
+        "data-slot": "message-scroller-item",
+        "data-message-id": messageId,
+        "data-scroll-anchor": scrollAnchor ? "true" : "false",
+        className: cn(
+          "-m-1 min-w-0 shrink-0 p-1 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+MessageScrollerItem.displayName = "MessageScrollerItem";
+const MessageScrollerButton = React.forwardRef(
+  ({ behavior = "smooth", direction = "end", className, children, onClick, tabIndex, type = "button", ...props }, ref) => {
+    const { scrollToEnd, scrollToStart } = useRequiredMessageScrollerActionsContext("MessageScrollerButton");
+    const { start, end } = useRequiredMessageScrollerScrollableContext("MessageScrollerButton");
+    const active = direction === "start" ? start : end;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type,
+        ...props,
+        "data-slot": "message-scroller-button",
+        "data-active": active ? "true" : "false",
+        "data-direction": direction,
+        tabIndex: active ? tabIndex : -1,
+        className: cn(
+          overlaySurfaceStyle,
+          "absolute inset-s-1/2 inline-flex min-h-5 min-w-7 -translate-x-1/2 items-center justify-center rounded-full text-foreground transition-[scale,opacity] duration-200 hover:[--surface-tint:var(--fill-subtle)] data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=start]:top-4 rtl:translate-x-1/2 data-[direction=start]:[&_svg]:rotate-180",
+          className
+        ),
+        onClick: (event) => {
+          if (!active) return;
+          onClick?.(event);
+          if (event.defaultPrevented) return;
+          event.currentTarget.blur();
+          if (direction === "start") {
+            scrollToStart({ behavior });
+          } else {
+            scrollToEnd({ behavior });
+          }
+        },
+        children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(ArrowDownIcon, { className: "size-4", "aria-hidden": true }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: direction === "end" ? "Scroll to end" : "Scroll to start" })
+        ] })
+      }
+    );
+  }
+);
+MessageScrollerButton.displayName = "MessageScrollerButton";
+
+export { MessageScroller as M, MessageScrollerButton as a, MessageScrollerContent as b, MessageScrollerItem as c, MessageScrollerProvider as d, MessageScrollerViewport as e };
+//# sourceMappingURL=message-scroller-CdKh_ee4.js.map