@mastra/playground-ui 60.0.0-alpha.8 → 60.0.0

package/dist/message-scroller-v1kQVq2v.js

@@ -1,834 +0,0 @@
-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, d as MessageScrollerScrollableContext, a as MessageScrollerVisibilityContext, u as useRequiredMessageScrollerActionsContext, b as useRequiredMessageScrollerScrollableContext } from './message-scroller-context-DFynTlSh.js';
-import { overlaySurfaceStyle } from './primitives/raised-surface.es.js';
-import { c as cn } from './cn-65Adrsfj.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 mergeRefs = (...refs) => (element) => {
-  refs.forEach((ref) => {
-    if (!ref) return;
-    if (typeof ref === "function") {
-      ref(element);
-      return;
-    }
-    ref.current = element;
-  });
-};
-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;
-      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;
-    };
-  }, [
-    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 overflow-hidden", 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("min-w-0 shrink-0 [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-[translate,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]:translate-y-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=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full 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-v1kQVq2v.js.map