@mastra/playground-ui 45.0.0 → 45.1.0-alpha.1

package/dist/kbd-Br7kdwaB.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbd-Br7kdwaB.cjs","sources":["../src/ds/components/Kbd/kbd.tsx"],"sourcesContent":["import { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type KbdProps = {\n  children: React.ReactNode;\n  theme?: 'light' | 'dark';\n  size?: 'default' | 'sm' | 'xs';\n  className?: string;\n};\n\nconst themeClasses: Record<NonNullable<KbdProps['theme']>, string> = {\n  light: 'bg-gray-100 border-gray-300 text-gray-700 shadow-[0_1px_0_rgba(0,0,0,0.1)]',\n  dark: 'bg-surface4 border-border1 text-neutral5 shadow-[0_1px_0_rgba(0,0,0,0.3)]',\n};\n\n// Fixed heights, not padding — `font-mono` normal leading varies per glyph set and desyncs the scale\nconst sizeClasses: Record<NonNullable<KbdProps['size']>, string> = {\n  default: 'h-6 min-w-6 rounded-md px-1.5 text-ui-sm',\n  sm: 'h-5 min-w-5 rounded-md px-1 text-ui-xs',\n  xs: 'h-4 min-w-4 rounded px-1 text-ui-xs leading-none',\n};\n\nexport const Kbd = ({ children, theme = 'dark', size = 'default', className }: KbdProps) => {\n  return (\n    <kbd\n      className={cn(\n        'inline-flex items-center justify-center border font-mono',\n        sizeClasses[size],\n        transitions.transform,\n        'active:scale-95 active:shadow-none',\n        themeClasses[theme],\n        className,\n      )}\n    >\n      {children}\n    </kbd>\n  );\n};\n"],"names":["jsx","cn","transitions"],"mappings":";;;;;;AAUA,MAAM,YAAA,GAA+D;AAAA,EACnE,KAAA,EAAO,4EAAA;AAAA,EACP,IAAA,EAAM;AACR,CAAA;AAGA,MAAM,WAAA,GAA6D;AAAA,EACjE,OAAA,EAAS,0CAAA;AAAA,EACT,EAAA,EAAI,wCAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEO,MAAM,GAAA,GAAM,CAAC,EAAE,QAAA,EAAU,QAAQ,MAAA,EAAQ,IAAA,GAAO,SAAA,EAAW,SAAA,EAAU,KAAgB;AAC1F,EAAA,uBACEA,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,WAAA;AAAA,QACT,0DAAA;AAAA,QACA,YAAY,IAAI,CAAA;AAAA,QAChBC,kCAAA,CAAY,SAAA;AAAA,QACZ,oCAAA;AAAA,QACA,aAAa,KAAK,CAAA;AAAA,QAClB;AAAA,OACF;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;;;;"}

package/dist/kbd-DE0nj4DL.js

@@ -0,0 +1,32 @@
+import { jsx } from 'react/jsx-runtime';
+import { transitions } from './primitives/transitions.es.js';
+import { c as cn } from './cn-BakJzhuv.js';
+
+const themeClasses = {
+  light: "bg-gray-100 border-gray-300 text-gray-700 shadow-[0_1px_0_rgba(0,0,0,0.1)]",
+  dark: "bg-surface4 border-border1 text-neutral5 shadow-[0_1px_0_rgba(0,0,0,0.3)]"
+};
+const sizeClasses = {
+  default: "h-6 min-w-6 rounded-md px-1.5 text-ui-sm",
+  sm: "h-5 min-w-5 rounded-md px-1 text-ui-xs",
+  xs: "h-4 min-w-4 rounded px-1 text-ui-xs leading-none"
+};
+const Kbd = ({ children, theme = "dark", size = "default", className }) => {
+  return /* @__PURE__ */ jsx(
+    "kbd",
+    {
+      className: cn(
+        "inline-flex items-center justify-center border font-mono",
+        sizeClasses[size],
+        transitions.transform,
+        "active:scale-95 active:shadow-none",
+        themeClasses[theme],
+        className
+      ),
+      children
+    }
+  );
+};
+
+export { Kbd as K };
+//# sourceMappingURL=kbd-DE0nj4DL.js.map

package/dist/kbd-DE0nj4DL.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbd-DE0nj4DL.js","sources":["../src/ds/components/Kbd/kbd.tsx"],"sourcesContent":["import { transitions } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nexport type KbdProps = {\n  children: React.ReactNode;\n  theme?: 'light' | 'dark';\n  size?: 'default' | 'sm' | 'xs';\n  className?: string;\n};\n\nconst themeClasses: Record<NonNullable<KbdProps['theme']>, string> = {\n  light: 'bg-gray-100 border-gray-300 text-gray-700 shadow-[0_1px_0_rgba(0,0,0,0.1)]',\n  dark: 'bg-surface4 border-border1 text-neutral5 shadow-[0_1px_0_rgba(0,0,0,0.3)]',\n};\n\n// Fixed heights, not padding — `font-mono` normal leading varies per glyph set and desyncs the scale\nconst sizeClasses: Record<NonNullable<KbdProps['size']>, string> = {\n  default: 'h-6 min-w-6 rounded-md px-1.5 text-ui-sm',\n  sm: 'h-5 min-w-5 rounded-md px-1 text-ui-xs',\n  xs: 'h-4 min-w-4 rounded px-1 text-ui-xs leading-none',\n};\n\nexport const Kbd = ({ children, theme = 'dark', size = 'default', className }: KbdProps) => {\n  return (\n    <kbd\n      className={cn(\n        'inline-flex items-center justify-center border font-mono',\n        sizeClasses[size],\n        transitions.transform,\n        'active:scale-95 active:shadow-none',\n        themeClasses[theme],\n        className,\n      )}\n    >\n      {children}\n    </kbd>\n  );\n};\n"],"names":[],"mappings":";;;;AAUA,MAAM,YAAA,GAA+D;AAAA,EACnE,KAAA,EAAO,4EAAA;AAAA,EACP,IAAA,EAAM;AACR,CAAA;AAGA,MAAM,WAAA,GAA6D;AAAA,EACjE,OAAA,EAAS,0CAAA;AAAA,EACT,EAAA,EAAI,wCAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEO,MAAM,GAAA,GAAM,CAAC,EAAE,QAAA,EAAU,QAAQ,MAAA,EAAQ,IAAA,GAAO,SAAA,EAAW,SAAA,EAAU,KAAgB;AAC1F,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,0DAAA;AAAA,QACA,YAAY,IAAI,CAAA;AAAA,QAChB,WAAA,CAAY,SAAA;AAAA,QACZ,oCAAA;AAAA,QACA,aAAa,KAAK,CAAA;AAAA,QAClB;AAAA,OACF;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;;;;"}

package/dist/message-scroller-BQpwFsqj.js

@@ -0,0 +1,563 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { ArrowDownIcon } from 'lucide-react';
+import * as React from 'react';
+import { D as DEFAULT_SCROLLABLE, a as DEFAULT_VISIBILITY, A as AUTO_SCROLL_ATTACH_THRESHOLD, b as DEFAULT_SCROLL_EDGE_THRESHOLD, c as DEFAULT_SCROLL_MARGIN, d as DEFAULT_SCROLL_PREVIOUS_ITEM_PEEK, e as DEFAULT_REACH_START_THRESHOLD, M as MessageScrollerActionsContext, f as MessageScrollerScrollableContext, g as MessageScrollerVisibilityContext, u as useRequiredMessageScrollerActionsContext, h as useRequiredMessageScrollerScrollableContext } from './message-scroller-context-tTA6jxho.js';
+import { c as cn } from './cn-BakJzhuv.js';
+
+const VISIBILITY_EPSILON = 0.5;
+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 getContentPadding = (contentElement) => {
+  if (!contentElement) return { start: 0, end: 0 };
+  const styles = window.getComputedStyle(contentElement);
+  return {
+    start: Number.parseFloat(styles.paddingBlockStart || styles.paddingTop || "0") || 0,
+    end: Number.parseFloat(styles.paddingBlockEnd || styles.paddingBottom || "0") || 0
+  };
+};
+const getRelativeTop = (element, viewportElement) => {
+  const elementRect = element.getBoundingClientRect();
+  const viewportRect = viewportElement.getBoundingClientRect();
+  return elementRect.top - viewportRect.top + viewportElement.scrollTop;
+};
+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);
+};
+const getScrollTarget = ({
+  align,
+  element,
+  scrollMargin,
+  viewportElement
+}) => {
+  const contentPadding = getContentPadding(element.parentElement);
+  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 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;
+};
+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 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 [scrollable, setScrollable] = React.useState(DEFAULT_SCROLLABLE);
+  const [visibility, setVisibility] = React.useState(DEFAULT_VISIBILITY);
+  const atEndRef = React.useRef(true);
+  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 updateScrollable = React.useCallback(() => {
+    if (!viewportElement) {
+      atEndRef.current = true;
+      publishScrollable(DEFAULT_SCROLLABLE);
+      return;
+    }
+    const remainingScroll = viewportElement.scrollHeight - viewportElement.scrollTop - viewportElement.clientHeight;
+    atEndRef.current = remainingScroll < AUTO_SCROLL_ATTACH_THRESHOLD;
+    publishScrollable({
+      start: viewportElement.scrollTop > scrollEdgeThreshold,
+      end: remainingScroll > scrollEdgeThreshold
+    });
+  }, [publishScrollable, scrollEdgeThreshold, viewportElement]);
+  const updateVisibility = React.useCallback(() => {
+    const items = Array.from(itemsRegistry.entries());
+    const fallbackAnchorId = items.filter(([, item]) => item.scrollAnchor).at(-1)?.[0] ?? 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] : []
+    });
+  }, [intersectingMessageIds, itemsRegistry, publishVisibility, scrollMargin, scrollPreviousItemPeek, viewportElement]);
+  const syncAfterScroll = React.useCallback(() => {
+    updateScrollable();
+    updateVisibility();
+  }, [updateScrollable, updateVisibility]);
+  const notifyScroll = React.useCallback(() => {
+    const wasScrollable = Boolean(viewportElement && viewportElement.scrollHeight > viewportElement.clientHeight);
+    syncAfterScroll();
+    if (!viewportElement) return;
+    if (atEndRef.current && 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, syncAfterScroll, viewportElement]);
+  const notifyContentResize = React.useCallback(() => {
+    const followEnd = autoScroll && defaultScrollAppliedRef.current && atEndRef.current && viewportElement;
+    if (followEnd) {
+      scrollViewportTo(
+        viewportElement,
+        Math.max(0, viewportElement.scrollHeight - viewportElement.clientHeight),
+        "auto"
+      );
+    }
+    syncAfterScroll();
+  }, [autoScroll, syncAfterScroll, 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, 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;
+      scrollViewportTo(viewportElement, 0, behavior);
+      scheduleScrollSync(syncAfterScroll);
+      return true;
+    },
+    [syncAfterScroll, viewportElement]
+  );
+  const scrollToEnd = React.useCallback(
+    ({ behavior = "auto" } = {}) => {
+      if (!viewportElement) return false;
+      scrollViewportTo(
+        viewportElement,
+        Math.max(0, viewportElement.scrollHeight - viewportElement.clientHeight),
+        behavior
+      );
+      scheduleScrollSync(syncAfterScroll);
+      return true;
+    },
+    [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 registerItem = React.useCallback(
+    (messageId, element, scrollAnchor) => {
+      itemsRegistry.set(messageId, { element, scrollAnchor });
+      setItemsVersion((version) => version + 1);
+      return () => {
+        const current = itemsRegistry.get(messageId);
+        if (current?.element !== element) return;
+        itemsRegistry.delete(messageId);
+        intersectingMessageIds.delete(messageId);
+        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 || itemsRegistry.size === 0) return;
+    let didScroll = false;
+    if (defaultScrollPosition === "start") {
+      didScroll = scrollToStart({ behavior: "auto" });
+    } else if (defaultScrollPosition === "last-anchor") {
+      const lastAnchorId = Array.from(itemsRegistry.entries()).filter(([, item]) => item.scrollAnchor).at(-1)?.[0];
+      didScroll = lastAnchorId ? scrollToMessage(lastAnchorId, { align: "start", behavior: "auto" }) : scrollToEnd({ behavior: "auto" });
+    } else {
+      didScroll = scrollToEnd({ behavior: "auto" });
+    }
+    if (didScroll) defaultScrollAppliedRef.current = true;
+  }, [
+    defaultScrollPosition,
+    itemsRegistry,
+    itemsVersion,
+    scrollToEnd,
+    scrollToMessage,
+    scrollToStart,
+    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]);
+  React.useLayoutEffect(() => {
+    if (!autoScroll || !defaultScrollAppliedRef.current || !atEndRef.current) return;
+    scrollToEnd({ behavior: "auto" });
+  }, [autoScroll, itemsVersion, scrollToEnd]);
+  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-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(
+          "absolute inset-s-1/2 inline-flex min-h-5 min-w-7 -translate-x-1/2 items-center justify-center rounded-full border border-border1 bg-surface3 text-neutral6 shadow-[0_1px_2px_-1px_oklch(0%_0_0deg/10%),0_8px_20px_-12px_oklch(0%_0_0deg/25%)] transition-[translate,scale,opacity] duration-200 hover:bg-surface4 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-BQpwFsqj.js.map