@archytechtor/ui 0.0.0-stage → 0.2.0

package/dist/components/message-scroller/message-scroller-primitive.js

@@ -0,0 +1,1349 @@
+"use client";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { createContext, createElement, use, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useSyncExternalStore } from "react";
+import { useRender } from "@base-ui/react/use-render";
+// src/components/message-scroller/message-scroller-primitive.ts
+/** Расстояние до края по умолчанию, при котором лента считается прокрученной до конца */
+const DEFAULT_EDGE_THRESHOLD = 8;
+/** Сколько пикселей предыдущего сообщения видно над якорем по умолчанию */
+const DEFAULT_PREVIOUS_PEEK = 64;
+/** Отступ сверху при прокрутке к сообщению по умолчанию */
+const DEFAULT_SCROLL_MARGIN = 0;
+/** Погрешность сравнения позиций в пикселях */
+const POSITION_EPSILON = .5;
+/** Сколько длится программная прокрутка, пока скрыт ползунок, мс */
+const AUTOSCROLL_DURATION = 180;
+/** Клавиши, которыми пользователь прокручивает ленту сам */
+const SCROLL_KEYS = /* @__PURE__ */ new Set([
+	"ArrowDown",
+	"ArrowUp",
+	"End",
+	"Home",
+	"PageDown",
+	"PageUp",
+	" "
+]);
+/** Нечего прокручивать */
+const EMPTY_SCROLLABLE = {
+	start: false,
+	end: false
+};
+/** Ничего не видно */
+const EMPTY_VISIBILITY = {
+	currentAnchorId: null,
+	visibleMessageIds: []
+};
+/**
+* Создать хранилище
+* @param initial - начальное значение
+* @param isEqual - одинаковы ли значения: тогда подписчики не оповещаются
+* @returns хранилище
+*/
+function createStore(initial, isEqual) {
+	let snapshot = initial;
+	const listeners = /* @__PURE__ */ new Set();
+	return {
+		getSnapshot: () => snapshot,
+		hasListeners: () => listeners.size > 0,
+		setSnapshot: (value) => {
+			if (isEqual(snapshot, value)) return;
+			snapshot = value;
+			listeners.forEach((listener) => listener());
+		},
+		subscribe: (listener, onFirst, onLast) => {
+			const isFirst = listeners.size === 0;
+			listeners.add(listener);
+			if (isFirst) onFirst?.();
+			return () => {
+				listeners.delete(listener);
+				if (listeners.size === 0) onLast?.();
+			};
+		}
+	};
+}
+/**
+* Одинаково ли, куда можно прокручивать
+* @param previous - прошлое значение
+* @param next - новое значение
+* @returns true, если совпадают
+*/
+function isSameScrollable(previous, next) {
+	return previous.start === next.start && previous.end === next.end;
+}
+/**
+* Одинаковы ли видимые сообщения
+* @param previous - прошлое значение
+* @param next - новое значение
+* @returns true, если совпадают
+*/
+function isSameVisibility(previous, next) {
+	if (previous.currentAnchorId !== next.currentAnchorId) return false;
+	if (previous.visibleMessageIds.length !== next.visibleMessageIds.length) return false;
+	return previous.visibleMessageIds.every((id, index) => id === next.visibleMessageIds[index]);
+}
+/**
+* Число из CSS-значения в пикселях
+* @param value - CSS-значение
+* @returns число или 0
+*/
+function parsePixels(value) {
+	if (!value) return 0;
+	const result = Number.parseFloat(value);
+	return Number.isFinite(result) ? result : 0;
+}
+/**
+* Внутренние отступы элемента сверху и снизу
+* @param element - элемент
+* @returns отступы в пикселях
+*/
+function getBlockPadding(element) {
+	const style = window.getComputedStyle(element);
+	return {
+		end: parsePixels(style.paddingBlockEnd || style.paddingBottom),
+		start: parsePixels(style.paddingBlockStart || style.paddingTop)
+	};
+}
+/**
+* Отступы колонки сообщений, внутри которой лежит spacer
+* @param spacer - служебный отступ
+* @returns отступы в пикселях
+*/
+function getSpacerParentPadding(spacer) {
+	const parent = spacer?.parentElement;
+	if (!parent) return {
+		end: 0,
+		start: 0
+	};
+	return getBlockPadding(parent);
+}
+/**
+* Промежуток между строками колонки
+* @param element - колонка
+* @returns промежуток в пикселях
+*/
+function getRowGap(element) {
+	if (!element) return 0;
+	const style = window.getComputedStyle(element);
+	return parsePixels(style.rowGap === "normal" ? style.gap : style.rowGap);
+}
+/**
+* Сообщения ленты без служебного отступа
+* @param content - колонка сообщений
+* @param spacer - служебный отступ
+* @returns элементы сообщений
+*/
+function getMessageElements(content, spacer) {
+	const result = [];
+	for (const child of content.children) if (child instanceof HTMLElement && child !== spacer) result.push(child);
+	return result;
+}
+/**
+* Якорь ли элемент
+* @param element - элемент ленты
+* @returns true, если у элемента scrollAnchor
+*/
+function isAnchor(element) {
+	return element?.dataset.scrollAnchor === "true";
+}
+/**
+* Первый якорь начиная с индекса
+* @param elements - элементы ленты
+* @param start - индекс начала поиска
+* @returns якорь или null
+*/
+function findAnchorFrom(elements, start) {
+	for (let index = start; index < elements.length; index++) if (isAnchor(elements[index])) return elements[index];
+	return null;
+}
+/**
+* Первый якорь, к которому ещё не прокручивали
+* @param elements - элементы ленты
+* @param handled - якоря, к которым уже прокручивали
+* @returns якорь или null
+*/
+function findUnhandledAnchor(elements, handled) {
+	for (const element of elements) if (isAnchor(element) && !handled.has(element)) return element;
+	return null;
+}
+/**
+* Больше ли одного якоря начиная с индекса
+* @param elements - элементы ленты
+* @param start - индекс начала поиска
+* @returns true, если якорей несколько
+*/
+function hasSeveralAnchorsFrom(elements, start) {
+	let count = 0;
+	for (let index = start; index < elements.length; index++) if (isAnchor(elements[index])) {
+		count += 1;
+		if (count > 1) return true;
+	}
+	return false;
+}
+/**
+* Последний якорь ленты
+* @param elements - элементы ленты
+* @returns якорь или null
+*/
+function findLastAnchor(elements) {
+	for (let index = elements.length - 1; index >= 0; index--) if (isAnchor(elements[index])) return elements[index];
+	return null;
+}
+/**
+* Расстояние от верха области до элемента
+* @param element - элемент
+* @param viewport - прокручиваемая область
+* @returns расстояние в пикселях
+*/
+function getViewportTop(element, viewport) {
+	return element.getBoundingClientRect().top - viewport.getBoundingClientRect().top;
+}
+/**
+* Позиция элемента внутри прокручиваемого содержимого
+* @param element - элемент
+* @param viewport - прокручиваемая область
+* @returns позиция в пикселях от начала содержимого
+*/
+function getOffsetInViewport(element, viewport) {
+	return getViewportTop(element, viewport) + viewport.scrollTop;
+}
+/**
+* Высота содержимого без служебного отступа
+* @param elements - колонка, отступ и область
+* @returns высота в пикселях
+*/
+function getContentHeight({ content, spacer, viewport }) {
+	const padding = getBlockPadding(content);
+	const viewportTop = viewport.getBoundingClientRect().top;
+	const { scrollTop } = viewport;
+	let result = padding.start + padding.end;
+	for (const element of getMessageElements(content, spacer)) {
+		const bottom = element.getBoundingClientRect().bottom - viewportTop + scrollTop + padding.end;
+		result = Math.max(result, bottom);
+	}
+	return result;
+}
+/**
+* Высота служебного отступа, чтобы прокрутить область до позиции
+* @param parameters - колонка, отступ, область и позиция
+* @returns высота в пикселях
+*/
+function getSpacerHeight({ scrollTop, ...elements }) {
+	return scrollTop + elements.viewport.clientHeight - getContentHeight(elements);
+}
+/**
+* Наибольшая позиция прокрутки
+* @param viewport - прокручиваемая область
+* @returns позиция в пикселях
+*/
+function getMaxScrollTop(viewport) {
+	return Math.max(0, viewport.scrollHeight - viewport.clientHeight);
+}
+/**
+* Есть ли куда прокручивать
+* @param parameters - колонка, отступ, область и порог края
+* @returns к началу и к концу
+*/
+function getScrollable({ content, scrollEdgeThreshold, spacer, viewport }) {
+	if (!viewport || !content) return EMPTY_SCROLLABLE;
+	const height = getContentHeight({
+		content,
+		spacer: spacer ?? null,
+		viewport
+	});
+	return {
+		start: viewport.scrollTop > scrollEdgeThreshold,
+		end: height - viewport.scrollTop - viewport.clientHeight > scrollEdgeThreshold
+	};
+}
+/**
+* Видимые сообщения и якорь у верхнего края
+* @param parameters - элементы ленты и отступы
+* @returns видимые сообщения и якорь
+*/
+function getVisibility({ content, scrollMargin, scrollPreviousItemPeek, spacer, viewport, visibleMessageIds }) {
+	if (!content || !viewport) return EMPTY_VISIBILITY;
+	const viewportRect = viewport.getBoundingClientRect();
+	const anchorLine = viewportRect.top + scrollMargin + scrollPreviousItemPeek;
+	const withoutObserver = typeof IntersectionObserver === "undefined";
+	const visible = [];
+	let currentAnchorId = null;
+	for (const element of getMessageElements(content, spacer ?? null)) {
+		const { messageId } = element.dataset;
+		if (!messageId) continue;
+		const anchor = isAnchor(element);
+		const rect = anchor || withoutObserver ? element.getBoundingClientRect() : null;
+		let isVisible = visibleMessageIds.has(messageId);
+		if (withoutObserver && rect) isVisible = rect.bottom > anchorLine && rect.top < viewportRect.bottom;
+		if (isVisible) visible.push(messageId);
+		if (anchor && rect && rect.top <= anchorLine + POSITION_EPSILON) currentAnchorId = messageId;
+	}
+	if (visible.length === 0 && currentAnchorId === null) return EMPTY_VISIBILITY;
+	return {
+		currentAnchorId,
+		visibleMessageIds: visible
+	};
+}
+/**
+* Первое видимое сообщение
+* @param elements - колонка, отступ и область
+* @returns сообщение или null
+*/
+function findFirstVisibleMessage({ content, spacer, viewport }) {
+	const viewportRect = viewport.getBoundingClientRect();
+	for (const element of getMessageElements(content, spacer)) {
+		if (!element.dataset.messageId) continue;
+		const rect = element.getBoundingClientRect();
+		if (rect.bottom > viewportRect.top && rect.top < viewportRect.bottom) return element;
+	}
+	return null;
+}
+/**
+* Позиция прокрутки, при которой элемент выровнен как нужно
+* @param parameters - элемент, область и выравнивание
+* @returns позиция в пикселях
+*/
+function getScrollTopForElement({ align, element, scrollMargin, spacer, viewport }) {
+	const offset = getOffsetInViewport(element, viewport);
+	const { height } = element.getBoundingClientRect();
+	const padding = getSpacerParentPadding(spacer);
+	if (align === "center") {
+		const available = Math.max(0, viewport.clientHeight - padding.start - padding.end);
+		return offset - padding.start - (available - height) / 2 - scrollMargin;
+	}
+	if (align === "end") return offset - viewport.clientHeight + height + padding.end + scrollMargin;
+	if (align === "nearest") {
+		const bottom = offset + height;
+		const visibleTop = viewport.scrollTop + padding.start;
+		const visibleBottom = viewport.scrollTop + viewport.clientHeight - padding.end;
+		if (offset >= visibleTop && bottom <= visibleBottom) return viewport.scrollTop;
+		if (offset < visibleTop) return offset - padding.start - scrollMargin;
+		return bottom - viewport.clientHeight + padding.end + scrollMargin;
+	}
+	return offset - padding.start - scrollMargin;
+}
+const ScrollerContext = createContext(null);
+const RegisterMessageContext = createContext(null);
+/**
+* Контекст ленты или ошибка, если часть вне MessageScroller
+* @returns контекст ленты
+*/
+function useScrollerContext() {
+	const context = use(ScrollerContext);
+	if (!context) throw new Error("Хуки и части MessageScroller должны находиться внутри MessageScroller");
+	return context;
+}
+/**
+* Записать элемент в ref любого вида
+* @param ref - ref-функция или объект
+* @param value - элемент
+*/
+function assignRef(ref, value) {
+	if (typeof ref === "function") {
+		ref(value);
+		return;
+	}
+	if (ref) ref.current = value;
+}
+/**
+* Изменяемое состояние и хранилища ленты, созданные один раз
+* @param parameters - параметры поведения
+* @returns ref состояния и хранилища
+*/
+function useScrollerState({ autoScroll, defaultScrollPosition, scrollEdgeThreshold, scrollMargin, scrollPreviousItemPeek }) {
+	const refs = useRef(null);
+	const stores = useRef(null);
+	if (refs.current === null) refs.current = {
+		autoScroll,
+		autoscrolling: false,
+		autoscrollingTimeout: null,
+		streamingTurn: null,
+		content: null,
+		defaultScrollPositionApplied: false,
+		firstItem: null,
+		itemCount: 0,
+		lastScrollTop: 0,
+		messageElements: /* @__PURE__ */ new Map(),
+		mode: autoScroll ? "following-bottom" : "free-scrolling",
+		pendingScrollFrame: null,
+		pendingScrollToMessage: null,
+		prependRestore: null,
+		preserveScrollOnPrepend: true,
+		root: null,
+		scrollEdgeThreshold,
+		scrollMargin,
+		scrollPreviousItemPeek,
+		spacerGap: 0,
+		spacerHeight: 0,
+		spacer: null,
+		stateFrame: null,
+		viewport: null,
+		visibilityFrame: null,
+		visibilityObserver: null,
+		visibleMessageIds: /* @__PURE__ */ new Set(),
+		handledScrollAnchors: /* @__PURE__ */ new WeakSet()
+	};
+	if (stores.current === null) stores.current = {
+		pendingDefaultScroll: createStore(defaultScrollPosition === "end" || defaultScrollPosition === "last-anchor", (previous, next) => previous === next),
+		scrollable: createStore(EMPTY_SCROLLABLE, isSameScrollable),
+		visibility: createStore(EMPTY_VISIBILITY, isSameVisibility)
+	};
+	refs.current.autoScroll = autoScroll;
+	refs.current.scrollEdgeThreshold = scrollEdgeThreshold;
+	refs.current.scrollMargin = scrollMargin;
+	refs.current.scrollPreviousItemPeek = scrollPreviousItemPeek;
+	return {
+		refs,
+		stores: stores.current
+	};
+}
+/**
+* Начальная позиция применена: показать ленту
+* @param refs - состояние ленты
+* @param stores - хранилища ленты
+*/
+function markDefaultScrollApplied(refs, stores) {
+	refs.defaultScrollPositionApplied = true;
+	stores.pendingDefaultScroll.setSnapshot(false);
+}
+/**
+* Команды прокрутки: в начало, в конец, к элементу и сообщению
+* @param parameters - состояние и пересчёты
+* @returns команды
+*/
+function useScrollCommands({ refs, stores, commitScrollState, scheduleStateCommit, scheduleVisibilitySync }) {
+	const setAutoscrolling = useCallback((value) => {
+		const state = refs.current;
+		if (state.autoscrollingTimeout !== null) {
+			window.clearTimeout(state.autoscrollingTimeout);
+			state.autoscrollingTimeout = null;
+		}
+		if (state.autoscrolling !== value) {
+			state.autoscrolling = value;
+			commitScrollState();
+		}
+		if (value) state.autoscrollingTimeout = window.setTimeout(() => {
+			state.autoscrollingTimeout = null;
+			state.autoscrolling = false;
+			commitScrollState();
+		}, AUTOSCROLL_DURATION);
+	}, [refs, commitScrollState]);
+	const setSpacerHeight = useCallback((height) => {
+		const state = refs.current;
+		const { spacer } = state;
+		if (!spacer) return;
+		const nextHeight = Math.max(0, Math.ceil(height));
+		if (state.spacerHeight === nextHeight) return;
+		const marginTop = nextHeight > 0 ? `${-state.spacerGap}px` : "";
+		state.spacerHeight = nextHeight;
+		spacer.hidden = nextHeight === 0;
+		spacer.style.height = `${nextHeight}px`;
+		spacer.style.marginTop = marginTop;
+	}, [refs]);
+	const scrollViewportTo = useCallback((top, { behavior = "auto", autoscrolling = false } = {}) => {
+		const { viewport } = refs.current;
+		if (!viewport) return;
+		const target = Math.max(0, top);
+		if (Math.abs(viewport.scrollTop - target) <= POSITION_EPSILON) {
+			viewport.scrollTop = target;
+			commitScrollState();
+			return;
+		}
+		if (autoscrolling) setAutoscrolling(true);
+		viewport.scrollTo({
+			top: target,
+			behavior
+		});
+		scheduleStateCommit();
+	}, [
+		refs,
+		commitScrollState,
+		scheduleStateCommit,
+		setAutoscrolling
+	]);
+	const scrollToStart = useCallback(({ behavior = "auto" } = {}) => {
+		const state = refs.current;
+		if (!state.viewport) return false;
+		setSpacerHeight(0);
+		state.streamingTurn = null;
+		state.mode = "free-scrolling";
+		scrollViewportTo(0, { behavior });
+		scheduleVisibilitySync();
+		return true;
+	}, [
+		refs,
+		scheduleVisibilitySync,
+		scrollViewportTo,
+		setSpacerHeight
+	]);
+	const scrollToEnd = useCallback(({ behavior = "auto" } = {}) => {
+		const state = refs.current;
+		const { viewport } = state;
+		if (!viewport) return false;
+		setSpacerHeight(0);
+		state.streamingTurn = null;
+		state.mode = state.autoScroll ? "following-bottom" : "free-scrolling";
+		scrollViewportTo(getMaxScrollTop(viewport), {
+			autoscrolling: true,
+			behavior
+		});
+		scheduleVisibilitySync();
+		return true;
+	}, [
+		refs,
+		scheduleVisibilitySync,
+		scrollViewportTo,
+		setSpacerHeight
+	]);
+	const scrollToElement = useCallback((element, { align = "start", behavior = "auto", scrollMargin = refs.current.scrollMargin } = {}, { keepPreviousPeek = false } = {}) => {
+		const state = refs.current;
+		const { content, spacer, viewport } = state;
+		if (!content || !viewport || !content.contains(element)) return false;
+		const top = getScrollTopForElement({
+			align,
+			element,
+			scrollMargin: keepPreviousPeek ? scrollMargin + state.scrollPreviousItemPeek : scrollMargin,
+			spacer,
+			viewport
+		});
+		const spacerHeight = getSpacerHeight({
+			content,
+			scrollTop: top,
+			spacer,
+			viewport
+		});
+		setSpacerHeight(spacerHeight);
+		state.prependRestore = {
+			element,
+			viewportTop: getViewportTop(element, viewport)
+		};
+		state.mode = keepPreviousPeek ? "anchored-to-message" : "settling-jump";
+		state.streamingTurn = keepPreviousPeek ? element : null;
+		scrollViewportTo(top, { behavior });
+		scheduleVisibilitySync();
+		return true;
+	}, [
+		refs,
+		scheduleVisibilitySync,
+		scrollViewportTo,
+		setSpacerHeight
+	]);
+	const reanchorToAnchoredMessage = useCallback(() => {
+		const { mode, streamingTurn } = refs.current;
+		if (!streamingTurn || !streamingTurn.isConnected || mode !== "anchored-to-message") return false;
+		return scrollToElement(streamingTurn, { align: "start" }, { keepPreviousPeek: true });
+	}, [refs, scrollToElement]);
+	const scrollToMessage = useCallback((messageId, options) => {
+		const state = refs.current;
+		const element = state.messageElements.get(messageId);
+		if (element) {
+			markDefaultScrollApplied(state, stores);
+			state.pendingScrollToMessage = scrollToElement(element, options) ? null : {
+				messageId,
+				options
+			};
+			return true;
+		}
+		if (state.itemCount === 0) {
+			state.pendingScrollToMessage = {
+				messageId,
+				options
+			};
+			markDefaultScrollApplied(state, stores);
+			return true;
+		}
+		return false;
+	}, [
+		refs,
+		stores,
+		scrollToElement
+	]);
+	return {
+		flushPendingScrollToMessage: useCallback(() => {
+			const state = refs.current;
+			const pending = state.pendingScrollToMessage;
+			if (!pending) return false;
+			const element = state.messageElements.get(pending.messageId);
+			if (!element || !scrollToElement(element, pending.options)) return false;
+			state.pendingScrollToMessage = null;
+			markDefaultScrollApplied(state, stores);
+			return true;
+		}, [
+			refs,
+			stores,
+			scrollToElement
+		]),
+		reanchorToAnchoredMessage,
+		scrollToElement,
+		scrollToEnd,
+		scrollToMessage,
+		scrollToStart
+	};
+}
+/**
+* Логика ленты: режимы прокрутки, якоря, подгрузка истории, видимость
+* @param parameters - параметры поведения
+* @returns контекст и регистрация сообщений
+*/
+function useScroller(parameters) {
+	const { autoScroll, defaultScrollPosition } = parameters;
+	const { refs, stores } = useScrollerState(parameters);
+	const defaultPositionRef = useRef(defaultScrollPosition);
+	if (defaultPositionRef.current !== defaultScrollPosition) {
+		defaultPositionRef.current = defaultScrollPosition;
+		refs.current.defaultScrollPositionApplied = false;
+	}
+	const applyScrollableAttributes = useCallback((scrollable) => {
+		const { autoscrolling, root, viewport } = refs.current;
+		const tokens = [];
+		if (scrollable.start) tokens.push("start");
+		if (scrollable.end) tokens.push("end");
+		const value = tokens.join(" ");
+		for (const element of [root, viewport]) {
+			if (!element) continue;
+			if (value) element.setAttribute("data-scrollable", value);
+			else element.removeAttribute("data-scrollable");
+			element.toggleAttribute("data-autoscrolling", autoscrolling);
+		}
+	}, [refs]);
+	const updateMode = useCallback((scrollable) => {
+		const state = refs.current;
+		const scrollTop = state.viewport?.scrollTop ?? 0;
+		const movedUp = scrollTop < state.lastScrollTop - POSITION_EPSILON;
+		const isJumping = state.mode === "settling-jump" || state.mode === "anchored-to-message";
+		state.lastScrollTop = scrollTop;
+		if (state.autoScroll && !scrollable.end && !isJumping) {
+			state.mode = "following-bottom";
+			return;
+		}
+		if (state.mode === "following-bottom" && scrollable.end && movedUp && !state.autoscrolling) state.mode = "free-scrolling";
+	}, [refs]);
+	const commitScrollState = useCallback(() => {
+		const state = refs.current;
+		const scrollable = getScrollable({
+			content: state.content ?? void 0,
+			scrollEdgeThreshold: state.scrollEdgeThreshold,
+			spacer: state.spacer,
+			viewport: state.viewport ?? void 0
+		});
+		updateMode(scrollable);
+		const published = state.mode === "following-bottom" ? {
+			start: scrollable.start,
+			end: false
+		} : scrollable;
+		applyScrollableAttributes(published);
+		stores.scrollable.setSnapshot(published);
+	}, [
+		refs,
+		stores,
+		applyScrollableAttributes,
+		updateMode
+	]);
+	const scheduleStateCommit = useCallback(() => {
+		const state = refs.current;
+		if (state.stateFrame !== null) return;
+		state.stateFrame = window.requestAnimationFrame(() => {
+			state.stateFrame = null;
+			commitScrollState();
+		});
+	}, [refs, commitScrollState]);
+	const scheduleVisibilitySync = useCallback(() => {
+		const state = refs.current;
+		if (!stores.visibility.hasListeners() || state.visibilityFrame !== null) return;
+		state.visibilityFrame = window.requestAnimationFrame(() => {
+			state.visibilityFrame = null;
+			if (!stores.visibility.hasListeners()) return;
+			stores.visibility.setSnapshot(getVisibility({
+				content: state.content ?? void 0,
+				scrollMargin: state.scrollMargin,
+				scrollPreviousItemPeek: state.scrollPreviousItemPeek,
+				spacer: state.spacer,
+				viewport: state.viewport ?? void 0,
+				visibleMessageIds: state.visibleMessageIds
+			}));
+		});
+	}, [refs, stores]);
+	const { flushPendingScrollToMessage, reanchorToAnchoredMessage, scrollToElement, scrollToEnd, scrollToMessage, scrollToStart } = useScrollCommands({
+		refs,
+		stores,
+		commitScrollState,
+		scheduleStateCommit,
+		scheduleVisibilitySync
+	});
+	const restorePrependPosition = useCallback(() => {
+		const state = refs.current;
+		const restore = state.prependRestore;
+		const { viewport } = state;
+		if (!restore || !viewport || !restore.element.isConnected) return false;
+		const delta = getViewportTop(restore.element, viewport) - restore.viewportTop;
+		if (Math.abs(delta) <= POSITION_EPSILON) return false;
+		viewport.scrollTop += delta;
+		restore.viewportTop = getViewportTop(restore.element, viewport);
+		scheduleStateCommit();
+		scheduleVisibilitySync();
+		return true;
+	}, [
+		refs,
+		scheduleStateCommit,
+		scheduleVisibilitySync
+	]);
+	const capturePrependAnchor = useCallback(() => {
+		const state = refs.current;
+		const { content, spacer, viewport } = state;
+		if (!content || !viewport) {
+			state.prependRestore = null;
+			return;
+		}
+		const element = findFirstVisibleMessage({
+			content,
+			spacer,
+			viewport
+		});
+		state.prependRestore = element ? {
+			element,
+			viewportTop: getViewportTop(element, viewport)
+		} : null;
+	}, [refs]);
+	const schedulePendingScroll = useCallback(() => {
+		const state = refs.current;
+		if (state.pendingScrollFrame !== null) return;
+		state.pendingScrollFrame = window.requestAnimationFrame(() => {
+			state.pendingScrollFrame = null;
+			if (flushPendingScrollToMessage()) capturePrependAnchor();
+		});
+	}, [
+		refs,
+		capturePrependAnchor,
+		flushPendingScrollToMessage
+	]);
+	const applyDefaultScrollPosition = useCallback(() => {
+		const state = refs.current;
+		if (state.defaultScrollPositionApplied || state.itemCount === 0) return false;
+		let applied;
+		if (defaultScrollPosition === "last-anchor") {
+			const { content, spacer, viewport } = state;
+			const lastAnchor = content && viewport ? findLastAnchor(getMessageElements(content, spacer)) : null;
+			if (!content || !viewport || !lastAnchor) applied = scrollToEnd({ behavior: "auto" });
+			else {
+				const offset = getOffsetInViewport(lastAnchor, viewport);
+				if (getContentHeight({
+					content,
+					spacer,
+					viewport
+				}) - offset <= viewport.clientHeight) applied = scrollToEnd({ behavior: "auto" });
+				else applied = scrollToElement(lastAnchor, { align: "start" }, { keepPreviousPeek: true });
+			}
+		} else if (defaultScrollPosition === "end") applied = scrollToEnd({ behavior: "auto" });
+		else applied = scrollToStart({ behavior: "auto" });
+		if (!applied) return false;
+		markDefaultScrollApplied(state, stores);
+		return true;
+	}, [
+		refs,
+		stores,
+		defaultScrollPosition,
+		scrollToElement,
+		scrollToEnd,
+		scrollToStart
+	]);
+	/**
+	* Реакция на изменение состава сообщений
+	* @param elements - сообщения сейчас
+	* @param previousCount - сколько сообщений было
+	* @param previousFirst - первое сообщение раньше
+	*/
+	const reactToContentChange = useCallback((elements, previousCount, previousFirst) => {
+		const state = refs.current;
+		if (flushPendingScrollToMessage()) return;
+		if (previousCount === 0) {
+			if (applyDefaultScrollPosition()) return;
+			if (elements.length > 0 && state.autoScroll && scrollToEnd({ behavior: "auto" })) return;
+			commitScrollState();
+			scheduleVisibilitySync();
+			return;
+		}
+		const firstIndex = previousFirst ? elements.indexOf(previousFirst) : -1;
+		if (state.preserveScrollOnPrepend && firstIndex > 0) {
+			restorePrependPosition();
+			return;
+		}
+		if (elements.length > previousCount) {
+			const anchor = findAnchorFrom(elements, previousCount);
+			if (anchor) {
+				if (state.autoScroll && state.mode === "following-bottom" && hasSeveralAnchorsFrom(elements, previousCount)) {
+					scrollToEnd({ behavior: "auto" });
+					return;
+				}
+				scrollToElement(anchor, { align: "start" }, { keepPreviousPeek: true });
+				state.handledScrollAnchors.add(anchor);
+				return;
+			}
+		}
+		if (elements.length === previousCount) {
+			const anchor = findUnhandledAnchor(elements, state.handledScrollAnchors);
+			if (anchor) {
+				scrollToElement(anchor, { align: "start" }, { keepPreviousPeek: true });
+				state.handledScrollAnchors.add(anchor);
+				return;
+			}
+		}
+		if (state.mode === "following-bottom" && state.autoScroll) {
+			scrollToEnd({ behavior: "auto" });
+			return;
+		}
+		commitScrollState();
+		scheduleVisibilitySync();
+	}, [
+		refs,
+		applyDefaultScrollPosition,
+		commitScrollState,
+		flushPendingScrollToMessage,
+		restorePrependPosition,
+		scheduleVisibilitySync,
+		scrollToElement,
+		scrollToEnd
+	]);
+	const handleContentChange = useCallback(() => {
+		const state = refs.current;
+		const { content } = state;
+		if (!content) return;
+		const elements = getMessageElements(content, state.spacer);
+		const previousCount = state.itemCount;
+		const previousFirst = state.firstItem;
+		state.itemCount = elements.length;
+		state.firstItem = elements[0] ?? null;
+		reactToContentChange(elements, previousCount, previousFirst);
+		capturePrependAnchor();
+	}, [
+		refs,
+		capturePrependAnchor,
+		reactToContentChange
+	]);
+	const handleResize = useCallback(() => {
+		const state = refs.current;
+		if (state.mode === "following-bottom" && state.autoScroll) {
+			scrollToEnd({ behavior: "auto" });
+			return;
+		}
+		const previousSpacerHeight = state.spacerHeight;
+		if (reanchorToAnchoredMessage()) {
+			if (state.autoScroll && previousSpacerHeight > 0 && state.spacerHeight === 0) scrollToEnd({ behavior: "auto" });
+			return;
+		}
+		scheduleStateCommit();
+		scheduleVisibilitySync();
+	}, [
+		refs,
+		reanchorToAnchoredMessage,
+		scheduleStateCommit,
+		scheduleVisibilitySync,
+		scrollToEnd
+	]);
+	const observeVisibility = useCallback(() => {
+		const state = refs.current;
+		const { viewport } = state;
+		if (!viewport || !stores.visibility.hasListeners()) return;
+		if (typeof IntersectionObserver === "undefined") {
+			scheduleVisibilitySync();
+			return;
+		}
+		if (!state.visibilityObserver) {
+			const topMargin = -(state.scrollMargin + state.scrollPreviousItemPeek);
+			state.visibilityObserver = new IntersectionObserver((entries) => {
+				for (const entry of entries) {
+					const { messageId } = entry.target.dataset;
+					if (!messageId) continue;
+					if (entry.isIntersecting) state.visibleMessageIds.add(messageId);
+					else state.visibleMessageIds.delete(messageId);
+				}
+				scheduleVisibilitySync();
+			}, {
+				root: viewport,
+				rootMargin: `${topMargin}px 0px 0px 0px`,
+				threshold: [
+					0,
+					.01,
+					.5,
+					1
+				]
+			});
+		}
+		for (const element of state.messageElements.values()) state.visibilityObserver.observe(element);
+		scheduleVisibilitySync();
+	}, [
+		refs,
+		stores,
+		scheduleVisibilitySync
+	]);
+	const unobserveVisibility = useCallback(() => {
+		const state = refs.current;
+		if (state.visibilityFrame !== null) {
+			window.cancelAnimationFrame(state.visibilityFrame);
+			state.visibilityFrame = null;
+		}
+		state.visibilityObserver?.disconnect();
+		state.visibilityObserver = null;
+		state.visibleMessageIds.clear();
+		stores.visibility.setSnapshot(EMPTY_VISIBILITY);
+	}, [refs, stores]);
+	const registerMessage = useCallback((messageId, element, previous) => {
+		const state = refs.current;
+		if (element) {
+			state.messageElements.set(messageId, element);
+			state.visibilityObserver?.observe(element);
+			scheduleVisibilitySync();
+			if (state.pendingScrollToMessage?.messageId === messageId) schedulePendingScroll();
+			return;
+		}
+		if (previous && state.messageElements.get(messageId) === previous) {
+			state.messageElements.delete(messageId);
+			state.visibleMessageIds.delete(messageId);
+			state.visibilityObserver?.unobserve(previous);
+			scheduleVisibilitySync();
+		}
+	}, [
+		refs,
+		schedulePendingScroll,
+		scheduleVisibilitySync
+	]);
+	const userScrollIntent = useCallback(() => {
+		const state = refs.current;
+		if (state.mode !== "free-scrolling") {
+			state.streamingTurn = null;
+			state.mode = "free-scrolling";
+		}
+	}, [refs]);
+	const setRootElement = useCallback((element) => {
+		refs.current.root = element;
+		if (element) applyScrollableAttributes(stores.scrollable.getSnapshot());
+	}, [
+		refs,
+		stores,
+		applyScrollableAttributes
+	]);
+	const setViewportElement = useCallback((element) => {
+		refs.current.viewport = element;
+		if (element) applyScrollableAttributes(stores.scrollable.getSnapshot());
+	}, [
+		refs,
+		stores,
+		applyScrollableAttributes
+	]);
+	const setContentElement = useCallback((element) => {
+		refs.current.content = element;
+	}, [refs]);
+	const setSpacerElement = useCallback((element) => {
+		refs.current.spacer = element;
+		refs.current.spacerGap = getRowGap(element?.parentElement ?? null);
+	}, [refs]);
+	const syncAfterScroll = useCallback(() => {
+		commitScrollState();
+		scheduleVisibilitySync();
+		capturePrependAnchor();
+	}, [
+		capturePrependAnchor,
+		commitScrollState,
+		scheduleVisibilitySync
+	]);
+	const context = useMemo(() => ({
+		handleContentChange,
+		handleResize,
+		observeVisibility,
+		scrollToEnd,
+		scrollToMessage,
+		scrollToStart,
+		setContentElement,
+		setRootElement,
+		setSpacerElement,
+		setViewportElement,
+		stores,
+		syncAfterScroll,
+		unobserveVisibility,
+		userScrollIntent,
+		refs
+	}), [
+		handleContentChange,
+		handleResize,
+		observeVisibility,
+		scrollToEnd,
+		scrollToMessage,
+		scrollToStart,
+		setContentElement,
+		setRootElement,
+		setSpacerElement,
+		setViewportElement,
+		stores,
+		syncAfterScroll,
+		unobserveVisibility,
+		userScrollIntent,
+		refs
+	]);
+	useLayoutEffect(() => {
+		if (!applyDefaultScrollPosition() && refs.current.itemCount === 0) stores.pendingDefaultScroll.setSnapshot(false);
+	}, [
+		refs,
+		stores,
+		applyDefaultScrollPosition
+	]);
+	useEffect(() => () => {
+		const state = refs.current;
+		for (const frame of [
+			state.stateFrame,
+			state.visibilityFrame,
+			state.pendingScrollFrame
+		]) if (frame !== null) window.cancelAnimationFrame(frame);
+		if (state.autoscrollingTimeout !== null) window.clearTimeout(state.autoscrollingTimeout);
+		state.stateFrame = null;
+		state.visibilityFrame = null;
+		state.pendingScrollFrame = null;
+		state.autoscrollingTimeout = null;
+		state.visibilityObserver?.disconnect();
+		state.visibilityObserver = null;
+	}, [refs]);
+	useLayoutEffect(() => {
+		const state = refs.current;
+		if (autoScroll && state.mode === "following-bottom" && state.itemCount > 0) {
+			scrollToEnd({ behavior: "auto" });
+			return;
+		}
+		commitScrollState();
+	}, [
+		refs,
+		autoScroll,
+		commitScrollState,
+		scrollToEnd
+	]);
+	return {
+		context,
+		registerMessage
+	};
+}
+/**
+* Команды прокрутки ленты
+* @returns прокрутить в конец, в начало и к сообщению
+*/
+function useMessageScroller() {
+	const { scrollToEnd, scrollToMessage, scrollToStart } = useScrollerContext();
+	return useMemo(() => ({
+		scrollToEnd,
+		scrollToMessage,
+		scrollToStart
+	}), [
+		scrollToEnd,
+		scrollToMessage,
+		scrollToStart
+	]);
+}
+/**
+* Есть ли куда прокручивать ленту
+* @returns к началу и к концу
+*/
+function useMessageScrollerScrollable() {
+	const { stores } = useScrollerContext();
+	return useSyncExternalStore(stores.scrollable.subscribe, stores.scrollable.getSnapshot, stores.scrollable.getSnapshot);
+}
+/**
+* Видимые сообщения и якорь у верхнего края: слежение включается, пока есть подписчики
+* @returns видимые сообщения и якорь
+*/
+function useMessageScrollerVisibility() {
+	const { observeVisibility, unobserveVisibility, stores } = useScrollerContext();
+	const { visibility } = stores;
+	const subscribe = useCallback((listener) => visibility.subscribe(listener, observeVisibility, unobserveVisibility), [
+		observeVisibility,
+		unobserveVisibility,
+		visibility
+	]);
+	return useSyncExternalStore(subscribe, visibility.getSnapshot, visibility.getSnapshot);
+}
+/**
+* Начальная позиция ещё не применена
+* @returns true, пока ленту не прокрутили в начальную позицию
+*/
+function usePendingDefaultScroll() {
+	const { stores } = useScrollerContext();
+	const { pendingDefaultScroll } = stores;
+	return useSyncExternalStore(pendingDefaultScroll.subscribe, pendingDefaultScroll.getSnapshot, pendingDefaultScroll.getSnapshot);
+}
+/**
+* Провайдер ленты: состояние прокрутки и команды
+* @param props - пропсы провайдера
+* @returns контекст ленты
+*/
+function Provider({ autoScroll = false, children, defaultScrollPosition = "end", scrollEdgeThreshold = DEFAULT_EDGE_THRESHOLD, scrollPreviousItemPeek = DEFAULT_PREVIOUS_PEEK, scrollMargin = DEFAULT_SCROLL_MARGIN }) {
+	const { context, registerMessage } = useScroller({
+		autoScroll,
+		defaultScrollPosition,
+		scrollEdgeThreshold,
+		scrollMargin,
+		scrollPreviousItemPeek
+	});
+	const registerProvider = createElement(RegisterMessageContext, { value: registerMessage }, children);
+	return createElement(ScrollerContext, { value: context }, registerProvider);
+}
+/**
+* Атрибут ленты, которую ещё не прокрутили в начальную позицию
+* @param pending - позиция не применена
+* @returns data-pending-scroll или пусто
+*/
+function getPendingAttributes(pending) {
+	if (pending) return { "data-pending-scroll": "" };
+	return {};
+}
+/**
+* Корень ленты
+* @param props - пропсы div
+* @returns div
+*/
+function Root({ ref, ...props }) {
+	const { setRootElement } = useScrollerContext();
+	const pendingAttributes = getPendingAttributes(usePendingDefaultScroll());
+	/**
+	* Запомнить корень и передать элемент в ref потребителя
+	* @param element - корень
+	*/
+	const setRef = useCallback((element) => {
+		setRootElement(element);
+		assignRef(ref, element);
+	}, [ref, setRootElement]);
+	return createElement("div", {
+		...props,
+		...pendingAttributes,
+		ref: setRef
+	});
+}
+/**
+* Прокручиваемая область: отличает прокрутку пользователем от программной
+* @param props - пропсы области
+* @returns div
+*/
+function Viewport({ onKeyDown, onScroll, onTouchMove, onWheel, preserveScrollOnPrepend = true, ref, role = "region", tabIndex = 0, ...props }) {
+	const { handleResize, refs, setViewportElement, syncAfterScroll, userScrollIntent } = useScrollerContext();
+	const pendingAttributes = getPendingAttributes(usePendingDefaultScroll());
+	useLayoutEffect(() => {
+		refs.current.preserveScrollOnPrepend = preserveScrollOnPrepend;
+	}, [refs, preserveScrollOnPrepend]);
+	/**
+	* Запомнить область и передать элемент в ref потребителя
+	* @param element - область
+	*/
+	const setRef = useCallback((element) => {
+		setViewportElement(element);
+		assignRef(ref, element);
+	}, [ref, setViewportElement]);
+	/**
+	* Прокрутка: пересчитать состояние
+	* @param event - событие прокрутки
+	*/
+	const handleScroll = (event) => {
+		syncAfterScroll();
+		onScroll?.(event);
+	};
+	/**
+	* Колесо мыши: пользователь прокручивает сам
+	* @param event - событие колеса
+	*/
+	const handleWheel = (event) => {
+		userScrollIntent();
+		onWheel?.(event);
+	};
+	/**
+	* Касание: пользователь прокручивает сам
+	* @param event - событие касания
+	*/
+	const handleTouchMove = (event) => {
+		userScrollIntent();
+		onTouchMove?.(event);
+	};
+	/**
+	* Клавиши прокрутки: пользователь прокручивает сам
+	* @param event - событие клавиатуры
+	*/
+	const handleKeyDown = (event) => {
+		if (SCROLL_KEYS.has(event.key)) userScrollIntent();
+		onKeyDown?.(event);
+	};
+	useEffect(() => {
+		const viewport = refs.current.viewport;
+		if (!viewport || typeof ResizeObserver === "undefined") return;
+		let frame = 0;
+		const observer = new ResizeObserver(() => {
+			window.cancelAnimationFrame(frame);
+			frame = window.requestAnimationFrame(handleResize);
+		});
+		observer.observe(viewport);
+		return () => {
+			window.cancelAnimationFrame(frame);
+			observer.disconnect();
+		};
+	}, [refs, handleResize]);
+	return createElement("div", {
+		role,
+		tabIndex,
+		onKeyDown: handleKeyDown,
+		onScroll: handleScroll,
+		onTouchMove: handleTouchMove,
+		onWheel: handleWheel,
+		...props,
+		...pendingAttributes,
+		ref: setRef
+	});
+}
+/**
+* Колонка сообщений: role=log, в конце служебный отступ для прокрутки якоря к верху
+* @param props - пропсы колонки
+* @returns div
+*/
+function Content({ "aria-relevant": ariaRelevant = "additions", children, ref, role = "log", spacerClassName, ...props }) {
+	const { handleContentChange, handleResize, setContentElement, setSpacerElement } = useScrollerContext();
+	const contentRef = useRef(null);
+	/**
+	* Запомнить колонку и передать элемент в ref потребителя
+	* @param element - колонка
+	*/
+	const setRef = useCallback((element) => {
+		contentRef.current = element;
+		setContentElement(element);
+		assignRef(ref, element);
+	}, [ref, setContentElement]);
+	useLayoutEffect(() => {
+		const content = contentRef.current;
+		if (!content) return;
+		handleContentChange();
+		if (typeof MutationObserver === "undefined") return;
+		const observer = new MutationObserver(() => {
+			handleContentChange();
+		});
+		observer.observe(content, { childList: true });
+		return () => observer.disconnect();
+	}, [handleContentChange]);
+	useEffect(() => {
+		const content = contentRef.current;
+		if (!content || typeof ResizeObserver === "undefined") return;
+		let frame = 0;
+		const observer = new ResizeObserver(() => {
+			window.cancelAnimationFrame(frame);
+			frame = window.requestAnimationFrame(handleResize);
+		});
+		observer.observe(content);
+		return () => {
+			window.cancelAnimationFrame(frame);
+			observer.disconnect();
+		};
+	}, [handleResize]);
+	const spacer = createElement("div", {
+		"ref": setSpacerElement,
+		"aria-hidden": "true",
+		"data-message-scroller-spacer": "",
+		"hidden": true,
+		"className": spacerClassName
+	});
+	return createElement("div", {
+		role,
+		"aria-relevant": ariaRelevant,
+		...props,
+		ref: setRef
+	}, children, spacer);
+}
+/**
+* Элемент ленты: регистрируется по messageId
+* @param props - пропсы элемента
+* @returns div
+*/
+function Item({ messageId, ref, scrollAnchor = false, ...props }) {
+	const registerMessage = use(RegisterMessageContext);
+	const elementRef = useRef(null);
+	if (!registerMessage) throw new Error("MessageScrollerItem должен находиться внутри MessageScroller");
+	/**
+	* Зарегистрировать элемент и передать его в ref потребителя
+	* @param element - элемент ленты
+	*/
+	const setRef = useCallback((element) => {
+		const previous = elementRef.current;
+		elementRef.current = element;
+		if (messageId) registerMessage(messageId, element, previous);
+		assignRef(ref, element);
+	}, [
+		messageId,
+		ref,
+		registerMessage
+	]);
+	return createElement("div", {
+		"ref": setRef,
+		"data-message-id": messageId,
+		"data-scroll-anchor": scrollAnchor ? "true" : "false",
+		...props
+	});
+}
+/**
+* Атрибут активности кнопки
+* @param active - есть куда прокручивать
+* @returns data-active="true" или "false"
+*/
+function getActiveAttributes(active) {
+	return { "data-active": active ? "true" : "false" };
+}
+/**
+* Кнопка прокрутки: активна, когда в её сторону есть куда прокручивать
+* @param props - пропсы кнопки
+* @returns кнопка
+*/
+function Button({ behavior = "smooth", children, direction = "end", onClick, ref, render, tabIndex, type = "button", ...props }) {
+	const { scrollToEnd, scrollToStart, stores } = useScrollerContext();
+	const { scrollable } = stores;
+	const onClickRef = useRef(onClick);
+	const getActive = useCallback(() => {
+		const snapshot = scrollable.getSnapshot();
+		return direction === "start" ? snapshot.start : snapshot.end;
+	}, [direction, scrollable]);
+	const subscribe = useCallback((listener) => scrollable.subscribe(listener), [scrollable]);
+	const active = useSyncExternalStore(subscribe, getActive, getActive);
+	const buttonTabIndex = active ? tabIndex : -1;
+	useLayoutEffect(() => {
+		onClickRef.current = onClick;
+	}, [onClick]);
+	/**
+	* Нажатие: прокрутить в свою сторону
+	* @param event - событие клика
+	*/
+	const handleClick = useCallback((event) => {
+		if (!active) return;
+		onClickRef.current?.(event);
+		if (event.defaultPrevented) return;
+		event.currentTarget.blur();
+		if (direction === "start") scrollToStart({ behavior });
+		else scrollToEnd({ behavior });
+	}, [
+		active,
+		behavior,
+		direction,
+		scrollToEnd,
+		scrollToStart
+	]);
+	return useRender({
+		defaultTagName: "button",
+		render,
+		ref,
+		state: {
+			active,
+			direction
+		},
+		stateAttributesMapping: { active: getActiveAttributes },
+		props: mergeProps({
+			type,
+			inert: !active,
+			tabIndex: buttonTabIndex,
+			children,
+			onClick: handleClick
+		}, props)
+	});
+}
+/** Части ленты сообщений без оформления */
+const MessageScrollerPrimitive = {
+	Provider,
+	Root,
+	Viewport,
+	Content,
+	Item,
+	Button
+};
+export { MessageScrollerPrimitive, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility };