@mastra/playground-ui 68.0.0 → 69.0.0-alpha.1

package/dist/MessageScroller-D-mK1uuu.cjs

@@ -0,0 +1,976 @@
+const require_rolldown_runtime = require("./rolldown-runtime-CmQyd0Gu.cjs");
+const require_primitives_raised_surface = require("./primitives/raised-surface.cjs.js");
+const require_merge_refs = require("./merge-refs-C0BDbPAW.cjs");
+const require_utils = require("./utils-uDc1ofX1.cjs");
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+// src/ds/components/MessageScroller/message-scroller-context.ts
+var DEFAULT_SCROLLABLE = {
+	start: false,
+	end: false
+};
+var DEFAULT_VISIBILITY = {
+	currentAnchorId: void 0,
+	visibleMessageIds: []
+};
+var MessageScrollerActionsContext = react.createContext(null);
+var MessageScrollerScrollableContext = react.createContext(null);
+var MessageScrollerVisibilityContext = react.createContext(null);
+var useRequiredContext = (context, hookName) => {
+	const value = react.useContext(context);
+	if (!value) throw new Error(`${hookName} must be used within MessageScrollerProvider.`);
+	return value;
+};
+var useRequiredMessageScrollerActionsContext = (hookName) => useRequiredContext(MessageScrollerActionsContext, hookName);
+var useRequiredMessageScrollerScrollableContext = (hookName) => useRequiredContext(MessageScrollerScrollableContext, hookName);
+var useRequiredMessageScrollerVisibilityContext = (hookName) => useRequiredContext(MessageScrollerVisibilityContext, hookName);
+// src/ds/components/MessageScroller/message-scroller-geometry.ts
+/** Sub-pixel slack, so a message resting exactly on the anchor line still counts. */
+var VISIBILITY_EPSILON = .5;
+var 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
+	};
+};
+var getMaxScroll = (viewportElement) => Math.max(0, viewportElement.scrollHeight - viewportElement.clientHeight);
+var getRelativeTop = (element, viewportElement) => {
+	const elementRect = element.getBoundingClientRect();
+	const viewportRect = viewportElement.getBoundingClientRect();
+	return elementRect.top - viewportRect.top + viewportElement.scrollTop;
+};
+var 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;
+};
+/**
+* Whether a row has a box to measure. A row hidden by `display: none` — its own or
+* an ancestor's — stays registered but has none, and reports a zero rect at the
+* window origin: read as a position, it sits wherever the reader happens to be.
+*/
+var isDrawn = (element) => element.getClientRects().length > 0;
+/**
+* Where the reader must sit for the last drawn row to rest at the end of the view.
+*
+* Not the end of the scroll: a chat reserves room under a live turn so a reply
+* grows into empty space, and docks its composer in the flow. Both sit below the
+* last row, so scrolling to the end of the box carries that row — and the message
+* that opened the turn — out of the view above. Reading it from the rows means no
+* one has to publish a height for anyone else to subtract.
+*/
+var getFollowTarget = ({ contentElement, items, viewportElement }) => {
+	const end = getMaxScroll(viewportElement);
+	const lastRow = items.findLast(([, item]) => isDrawn(item.element))?.[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));
+};
+var getCurrentAnchorId = ({ fallbackAnchorId, items, scrollMargin, scrollPreviousItemPeek, visibleMessageIds, viewportElement }) => {
+	const anchorLine = viewportElement.getBoundingClientRect().top + scrollMargin + scrollPreviousItemPeek;
+	const anchors = items.filter(([, item]) => item.scrollAnchor);
+	const passedLine = (index) => (anchors[index]?.[1].element.getBoundingClientRect().top ?? Infinity) <= anchorLine + VISIBILITY_EPSILON;
+	let firstUnpassed = 0;
+	let lastCandidate = anchors.length;
+	while (firstUnpassed < lastCandidate) {
+		const middle = firstUnpassed + lastCandidate >>> 1;
+		if (passedLine(middle)) firstUnpassed = middle + 1;
+		else lastCandidate = middle;
+	}
+	const anchoredAboveViewport = anchors[firstUnpassed - 1]?.[0];
+	if (anchoredAboveViewport) return anchoredAboveViewport;
+	return anchors.find(([messageId]) => visibleMessageIds.has(messageId))?.[0] ?? fallbackAnchorId;
+};
+// src/ds/components/MessageScroller/message-scroller-glide.ts
+/** Longest single growth worth smoothing. Past it the move is one the reader asked for. */
+var GLIDE_MAX = 240;
+var GLIDE_MS = 220;
+var 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;
+}
+var 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;
+}
+/**
+* Hides a scroll that has already happened. The end is pinned instantly, as it must
+* be, then the content is put back where the reader last saw it and travels to zero
+* on the compositor — so a reply growing a line at a time reads as one movement
+* rather than a snap per wrapped line.
+*
+* Transform, not layout: `scrollHeight` never changes, so nothing here can feed the
+* resize that called it. A line landing mid-travel only adds to the distance left.
+*/
+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)`;
+	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 });
+}
+// src/ds/components/MessageScroller/message-scroller-trip.ts
+/** One designed curve for the one scripted trip: fast liftoff, long settle. */
+var TRIP_MS = 560;
+/** How long past its clock a trip may chase a destination the layout hasn't released yet. */
+var TRIP_OVERTIME_MS = 240;
+var easeOutQuint = (t) => 1 - (1 - t) ** 5;
+/**
+* Drives the viewport to a destination the way a transition would, not the way
+* `scrollTo({ behavior: 'smooth' })` does: the destination is re-read every frame,
+* so a layout still settling under the trip — the reserved room opening beneath a
+* new turn — bends the path instead of restarting the curve. Writes are clamped by
+* the browser, so until the room has opened far enough the trip simply rides the
+* end of the box down.
+*
+* The reader keeps the last word: a scroll position this trip didn't write ends it.
+*/
+function startTrip(viewportElement, getTarget, onEnd) {
+	const duration = typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches ? 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) <= .5) 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);
+	} };
+}
+// src/ds/components/MessageScroller/message-scroller-visibility-store.ts
+var visibilityMatches = (left, right) => left.currentAnchorId === right.currentAnchorId && left.visibleMessageIds.length === right.visibleMessageIds.length && left.visibleMessageIds.every((messageId, index) => messageId === right.visibleMessageIds[index]);
+function createVisibilityStore() {
+	let visibility = DEFAULT_VISIBILITY;
+	const listeners = /* @__PURE__ */ new Set();
+	return {
+		getSnapshot: () => visibility,
+		subscribe: (onChange) => {
+			listeners.add(onChange);
+			return () => listeners.delete(onChange);
+		},
+		publish: (next) => {
+			if (visibilityMatches(visibility, next)) return;
+			visibility = next;
+			for (const listener of listeners) listener();
+		}
+	};
+}
+// src/ds/components/MessageScroller/message-scroller.tsx
+var scrollableMatches = (left, right) => left.start === right.start && left.end === right.end;
+var 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;
+});
+var scrollViewportTo = (viewportElement, top, behavior) => {
+	if (typeof viewportElement.scrollTo === "function") {
+		viewportElement.scrollTo({
+			top,
+			behavior
+		});
+		return;
+	}
+	viewportElement.scrollTop = top;
+};
+var 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 = 160, scrollEdgeThreshold = 8, scrollMargin = 0, scrollPreviousItemPeek = 64 }) {
+	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 [visibilityStore] = react.useState(createVisibilityStore);
+	const publishVisibility = visibilityStore.publish;
+	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 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 < 160;
+		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) <= .5) {
+			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;
+		if (!(trip !== null && trip !== "end") && autoScroll && defaultScrollAppliedRef.current && followingRef.current && viewportElement) {
+			const overflow = followTarget() - viewportElement.scrollTop;
+			if (overflow > .5) {
+				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 () => {
+			if (itemsRegistry.get(messageId)?.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;
+		}
+		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,
+				.01,
+				.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;
+		}
+		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) <= .5) 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;
+		}
+		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) <= .5) 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 <= .5) 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]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessageScrollerActionsContext.Provider, {
+		value: actionsContextValue,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessageScrollerScrollableContext.Provider, {
+			value: scrollableContextValue,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessageScrollerVisibilityContext.Provider, {
+				value: visibilityStore,
+				children
+			})
+		})
+	});
+}
+var MessageScroller = react.forwardRef(({ className, ...props }, ref) => {
+	const { setRootElement } = useRequiredMessageScrollerActionsContext("MessageScroller");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: require_merge_refs.mergeRefs(setRootElement, ref),
+		"data-slot": "message-scroller",
+		className: require_utils.cn("group/message-scroller relative flex size-full min-h-0 flex-col", className),
+		...props
+	});
+});
+MessageScroller.displayName = "MessageScroller";
+var MessageScrollerViewport = react.forwardRef(({ className, onScroll, role, tabIndex, ...props }, ref) => {
+	const { setViewportElement, notifyScroll } = useRequiredMessageScrollerActionsContext("MessageScrollerViewport");
+	const viewportRef = react.useMemo(() => require_merge_refs.mergeRefs(setViewportElement, ref), [ref, setViewportElement]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: viewportRef,
+		role: role ?? "region",
+		tabIndex: tabIndex ?? 0,
+		"data-slot": "message-scroller-viewport",
+		className: require_utils.cn("[container-type:size] size-full min-h-0 min-w-0 overflow-y-auto overscroll-y-contain", "data-autoscrolling:scrollbar-thumb-transparent data-autoscrolling:scrollbar-track-transparent", className),
+		onScroll: (event) => {
+			notifyScroll();
+			onScroll?.(event);
+		},
+		...props
+	});
+});
+MessageScrollerViewport.displayName = "MessageScrollerViewport";
+var 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(() => require_merge_refs.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: contentRef,
+		role: role ?? "log",
+		"aria-relevant": ariaRelevant,
+		"data-slot": "message-scroller-content",
+		className: require_utils.cn("flex h-max min-h-full flex-col gap-6", className),
+		...props,
+		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"aria-hidden": "true",
+			"data-message-scroller-spacer": "",
+			hidden: true,
+			className: spacerClassName
+		})]
+	});
+});
+MessageScrollerContent.displayName = "MessageScrollerContent";
+var 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;
+		require_merge_refs.mergeRefs(ref)(element);
+		if (!element || !messageId || !registerItem) return;
+		unregisterRef.current = registerItem(messageId, element, scrollAnchor);
+	}, [
+		messageId,
+		ref,
+		registerItem,
+		scrollAnchor
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: itemRef,
+		"data-slot": "message-scroller-item",
+		"data-message-id": messageId,
+		"data-scroll-anchor": scrollAnchor ? "true" : "false",
+		className: require_utils.cn("-m-1 min-w-0 shrink-0 p-1 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]", className),
+		...props
+	});
+});
+MessageScrollerItem.displayName = "MessageScrollerItem";
+var 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__ */ (0, react_jsx_runtime.jsx)("button", {
+		ref,
+		type,
+		...props,
+		"data-slot": "message-scroller-button",
+		"data-active": active ? "true" : "false",
+		"data-direction": direction,
+		tabIndex: active ? tabIndex : -1,
+		className: require_utils.cn(require_primitives_raised_surface.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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowDownIcon, {
+			className: "size-4",
+			"aria-hidden": true
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "sr-only",
+			children: direction === "end" ? "Scroll to end" : "Scroll to start"
+		})] })
+	});
+});
+MessageScrollerButton.displayName = "MessageScrollerButton";
+// src/ds/components/MessageScroller/message-scroller-hooks.ts
+var subscribeNowhere = () => () => {};
+var noVisibility = () => void 0;
+var useMessageScroller = () => {
+	const { scrollToEnd, scrollToMessage, scrollToStart } = useRequiredMessageScrollerActionsContext("useMessageScroller");
+	return react.useMemo(() => ({
+		scrollToEnd,
+		scrollToMessage,
+		scrollToStart
+	}), [
+		scrollToEnd,
+		scrollToMessage,
+		scrollToStart
+	]);
+};
+var useOptionalMessageScroller = () => {
+	const context = react.useContext(MessageScrollerActionsContext);
+	return react.useMemo(() => {
+		if (!context) return void 0;
+		return {
+			scrollToEnd: context.scrollToEnd,
+			scrollToMessage: context.scrollToMessage,
+			scrollToStart: context.scrollToStart
+		};
+	}, [context]);
+};
+var useMessageScrollerScrollable = () => {
+	const { start, end } = useRequiredMessageScrollerScrollableContext("useMessageScrollerScrollable");
+	return react.useMemo(() => ({
+		start,
+		end
+	}), [end, start]);
+};
+var useOptionalMessageScrollerScrollable = () => {
+	const context = react.useContext(MessageScrollerScrollableContext);
+	return react.useMemo(() => context ? {
+		start: context.start,
+		end: context.end
+	} : void 0, [context]);
+};
+var useMessageScrollerVisibility = () => {
+	const store = useRequiredMessageScrollerVisibilityContext("useMessageScrollerVisibility");
+	return react.useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
+};
+var useOptionalMessageScrollerVisibility = () => {
+	const store = react.useContext(MessageScrollerVisibilityContext);
+	const getSnapshot = store?.getSnapshot ?? noVisibility;
+	return react.useSyncExternalStore(store?.subscribe ?? subscribeNowhere, getSnapshot, getSnapshot);
+};
+Object.defineProperty(exports, "MessageScroller", {
+	enumerable: true,
+	get: function() {
+		return MessageScroller;
+	}
+});
+Object.defineProperty(exports, "MessageScrollerButton", {
+	enumerable: true,
+	get: function() {
+		return MessageScrollerButton;
+	}
+});
+Object.defineProperty(exports, "MessageScrollerContent", {
+	enumerable: true,
+	get: function() {
+		return MessageScrollerContent;
+	}
+});
+Object.defineProperty(exports, "MessageScrollerItem", {
+	enumerable: true,
+	get: function() {
+		return MessageScrollerItem;
+	}
+});
+Object.defineProperty(exports, "MessageScrollerProvider", {
+	enumerable: true,
+	get: function() {
+		return MessageScrollerProvider;
+	}
+});
+Object.defineProperty(exports, "MessageScrollerViewport", {
+	enumerable: true,
+	get: function() {
+		return MessageScrollerViewport;
+	}
+});
+Object.defineProperty(exports, "useMessageScroller", {
+	enumerable: true,
+	get: function() {
+		return useMessageScroller;
+	}
+});
+Object.defineProperty(exports, "useMessageScrollerScrollable", {
+	enumerable: true,
+	get: function() {
+		return useMessageScrollerScrollable;
+	}
+});
+Object.defineProperty(exports, "useMessageScrollerVisibility", {
+	enumerable: true,
+	get: function() {
+		return useMessageScrollerVisibility;
+	}
+});
+Object.defineProperty(exports, "useOptionalMessageScroller", {
+	enumerable: true,
+	get: function() {
+		return useOptionalMessageScroller;
+	}
+});
+Object.defineProperty(exports, "useOptionalMessageScrollerScrollable", {
+	enumerable: true,
+	get: function() {
+		return useOptionalMessageScrollerScrollable;
+	}
+});
+Object.defineProperty(exports, "useOptionalMessageScrollerVisibility", {
+	enumerable: true,
+	get: function() {
+		return useOptionalMessageScrollerVisibility;
+	}
+});
+
+//# sourceMappingURL=MessageScroller-D-mK1uuu.cjs.map