ajo-ui 0.1.0

package/dist/message-scroller.js

@@ -0,0 +1,446 @@
+import { browser, callHandler, callRef, frame, overflow, resize, scrolling, timer } from "ajo-cloves";
+import { context } from "ajo/context";
+import { Fragment, jsx } from "ajo/jsx-runtime";
+//#region packages/ajo-ui/src/message-scroller.tsx
+/** Read the public controller inherited from the nearest MessageScrollerProvider. */
+var MessageScrollerContext = context(null);
+var MessageScrollerPartsContext = context(null);
+var edge = 2;
+var messageScroller = () => {
+	const api = MessageScrollerContext();
+	if (!api) throw new Error("MessageScroller controls must be used within a <MessageScrollerProvider />");
+	return api;
+};
+var messageScrollerParts = () => {
+	const parts = MessageScrollerPartsContext();
+	if (!parts) throw new Error("MessageScroller parts must be used within a <MessageScrollerProvider />");
+	return parts;
+};
+var getItems = (content) => content ? Array.from(content.querySelectorAll("[data-slot=\"message-scroller-item\"]")) : [];
+var rectTop = (viewport, element) => element.getBoundingClientRect().top - viewport.getBoundingClientRect().top;
+var stamp = (element, name, value) => {
+	if (element.getAttribute(name) !== value) element.setAttribute(name, value);
+};
+/** Unstyled provider for imperative scroll behavior and visibility state. */
+var MessageScrollerProvider = function* ({ autoScroll = true, defaultScrollPosition = "end", preserveScrollOnPrepend = true, scrollPreviousItemPeek = 0 }) {
+	let root = null;
+	let viewport = null;
+	let content = null;
+	let mutation;
+	let initialized = false;
+	let didInitialScroll = false;
+	let following = defaultScrollPosition !== "start";
+	let currentAutoScroll = autoScroll;
+	let currentDefaultPosition = defaultScrollPosition;
+	let currentPreserve = preserveScrollOnPrepend;
+	let currentPeek = scrollPreviousItemPeek;
+	let currentSetApi;
+	let pending = null;
+	let preserveAnchor = null;
+	let settles = 0;
+	const items = /* @__PURE__ */ new Map();
+	const buttons = {
+		end: null,
+		start: null
+	};
+	const scrollable = {
+		end: false,
+		start: false
+	};
+	const visibility = { visibleMessageIds: [] };
+	const autoscroll = timer(this);
+	const setAutoscrolling = (active) => {
+		if (!viewport || !root) return;
+		root.toggleAttribute("data-autoscrolling", active);
+		viewport.toggleAttribute("data-autoscrolling", active);
+		if (!active) {
+			autoscroll.stop();
+			return;
+		}
+		autoscroll.start(1200, () => {
+			root?.toggleAttribute("data-autoscrolling", false);
+			viewport?.toggleAttribute("data-autoscrolling", false);
+		});
+	};
+	const atStart = () => !viewport || viewport.scrollTop <= edge;
+	const atEnd = () => !viewport || viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight <= edge;
+	const buttonActive = (direction) => direction === "start" ? scrollable.start : scrollable.end;
+	const updateButton = (direction) => {
+		const button = buttons[direction];
+		if (!button) return;
+		const active = buttonActive(direction);
+		const tabIndex = active ? 0 : -1;
+		stamp(button, "data-active", String(active));
+		if (button.tabIndex !== tabIndex) button.tabIndex = tabIndex;
+		if (button.hasAttribute("inert") === active) button.toggleAttribute("inert", !active);
+	};
+	const readEdges = () => {
+		const canStart = !atStart();
+		return {
+			canEnd: !atEnd(),
+			canStart
+		};
+	};
+	const commitEdges = ({ canEnd, canStart }) => {
+		scrollable.start = canStart;
+		scrollable.end = canEnd;
+		updateButton("start");
+		updateButton("end");
+	};
+	const updateData = () => commitEdges(readEdges());
+	const findItem = (messageId) => {
+		const registered = items.get(messageId);
+		if (registered) return registered;
+		return getItems(content).find((item) => item.dataset.messageId === messageId);
+	};
+	const readItems = () => {
+		if (!viewport || !content) return {
+			currentAnchorId: void 0,
+			preserveAnchor: null,
+			visibleMessageIds: []
+		};
+		const viewportRect = viewport.getBoundingClientRect();
+		const visible = [];
+		let anchor;
+		let preserved = null;
+		for (const item of getItems(content)) {
+			const rect = item.getBoundingClientRect();
+			const id = item.dataset.messageId;
+			const intersects = rect.bottom > viewportRect.top && rect.top < viewportRect.bottom;
+			if (intersects && id) visible.push(id);
+			if (currentPreserve && !preserveAnchor && !preserved && intersects && id) preserved = {
+				id,
+				top: rect.top - viewportRect.top
+			};
+			if (id && item.dataset.scrollAnchor === "true" && rect.top <= viewportRect.top + viewport.clientHeight * .65) anchor = id;
+		}
+		return {
+			currentAnchorId: anchor,
+			preserveAnchor: preserved,
+			visibleMessageIds: visible
+		};
+	};
+	const commitItems = (reading) => {
+		visibility.currentAnchorId = reading.currentAnchorId;
+		visibility.visibleMessageIds = reading.visibleMessageIds;
+		if (!currentPreserve) preserveAnchor = null;
+		else preserveAnchor ??= reading.preserveAnchor;
+	};
+	const sync = () => {
+		const edges = readEdges();
+		commitItems(readItems());
+		commitEdges(edges);
+	};
+	const schedule = frame(sync);
+	const handleViewportScroll = (element) => {
+		if (!element.hasAttribute("data-autoscrolling")) following = atEnd();
+		preserveAnchor = null;
+		sync();
+	};
+	const handleViewportEnd = (element) => {
+		if (following && !atEnd() && settles < 10) {
+			settles += 1;
+			setAutoscrolling(true);
+			element.scrollTo({
+				behavior: "auto",
+				top: element.scrollHeight
+			});
+		} else setAutoscrolling(false);
+		schedule();
+	};
+	const viewportScroll = scrolling(this, {
+		target: () => viewport,
+		onScroll: handleViewportScroll,
+		onEnd: handleViewportEnd
+	});
+	const viewportSize = resize(this, {
+		target: () => viewport,
+		onResize: sync
+	});
+	const edges = overflow(this, { target: () => viewport });
+	const scrollTopFor = (element, options = {}) => {
+		if (!viewport) return 0;
+		const peek = options.peek ?? currentPeek;
+		const top = rectTop(viewport, element) + viewport.scrollTop;
+		if (options.position === "center") return top - (viewport.clientHeight - element.offsetHeight) / 2;
+		if (options.position === "end") return top - viewport.clientHeight + element.offsetHeight + peek;
+		return top - peek;
+	};
+	const scrollToTop = (top, behavior = "smooth") => {
+		if (!viewport) return false;
+		preserveAnchor = null;
+		settles = 0;
+		setAutoscrolling(true);
+		viewport.scrollTo({
+			behavior,
+			top: Math.max(0, top)
+		});
+		schedule();
+		return true;
+	};
+	const scrollToStart = (options = {}) => {
+		following = false;
+		return scrollToTop(0, options.behavior);
+	};
+	const scrollToEnd = (options = {}) => {
+		if (!viewport) return false;
+		following = true;
+		return scrollToTop(viewport.scrollHeight, options.behavior);
+	};
+	const scrollToMessage = (messageId, options = {}) => {
+		const item = findItem(messageId);
+		if (!item) {
+			if (!initialized) {
+				pending = {
+					id: messageId,
+					options
+				};
+				return true;
+			}
+			return false;
+		}
+		following = false;
+		return scrollToTop(scrollTopFor(item, options), options.behavior);
+	};
+	const flushPending = () => {
+		if (!pending) return;
+		const target = pending;
+		pending = null;
+		if (!scrollToMessage(target.id, {
+			behavior: "auto",
+			...target.options
+		})) pending = target;
+	};
+	const restoreAnchor = () => {
+		if (!viewport || !preserveAnchor || following || !currentPreserve) return;
+		const item = findItem(preserveAnchor.id);
+		if (!item) {
+			preserveAnchor = null;
+			return;
+		}
+		const nextTop = rectTop(viewport, item);
+		viewport.scrollTop += nextTop - preserveAnchor.top;
+	};
+	const handleContentChange = () => {
+		queueMicrotask(() => {
+			restoreAnchor();
+			if (currentAutoScroll && following) scrollToEnd({ behavior: "auto" });
+			flushPending();
+			edges.sync();
+			schedule();
+		});
+	};
+	const contentSize = resize(this, {
+		target: () => content,
+		onResize: handleContentChange
+	});
+	const applyInitialScroll = () => {
+		if (didInitialScroll || !viewport) return;
+		didInitialScroll = true;
+		initialized = true;
+		if (pending) flushPending();
+		else if (currentDefaultPosition === "start") scrollToStart({ behavior: "auto" });
+		else if (currentDefaultPosition === "last-anchor") {
+			const anchor = getItems(content).filter((item) => item.dataset.scrollAnchor === "true" && item.dataset.messageId).at(-1);
+			if (anchor?.dataset.messageId) scrollToMessage(anchor.dataset.messageId, {
+				behavior: "auto",
+				peek: currentPeek
+			});
+			else scrollToEnd({ behavior: "auto" });
+		} else scrollToEnd({ behavior: "auto" });
+		sync();
+	};
+	const scheduleInitial = frame(applyInitialScroll);
+	const scheduleInitialScroll = () => {
+		if (!browser() || didInitialScroll) return;
+		scheduleInitial();
+	};
+	const setRoot = (element) => {
+		root = element;
+		updateData();
+	};
+	const setViewport = (element) => {
+		if (viewport === element) return;
+		viewport = element;
+		viewportScroll.sync();
+		viewportSize.sync();
+		edges.sync();
+		if (!element) {
+			updateData();
+			return;
+		}
+		updateData();
+		scheduleInitialScroll();
+	};
+	const setContent = (element) => {
+		if (content === element) return;
+		mutation?.disconnect();
+		content = element;
+		contentSize.sync();
+		edges.sync();
+		if (!element) {
+			updateData();
+			return;
+		}
+		if (typeof MutationObserver !== "undefined") {
+			mutation = new MutationObserver(handleContentChange);
+			mutation.observe(element, {
+				childList: true,
+				subtree: true
+			});
+		}
+		updateData();
+		scheduleInitialScroll();
+	};
+	const setItem = (messageId, element) => {
+		if (element) {
+			for (const [registeredId, registered] of items) if (registered === element && registeredId !== messageId) items.delete(registeredId);
+			if (messageId) {
+				items.set(messageId, element);
+				flushPending();
+			}
+		} else if (messageId) items.delete(messageId);
+		schedule();
+	};
+	const setButton = (direction, element) => {
+		if (element) {
+			for (const registeredDirection of ["start", "end"]) if (registeredDirection !== direction && buttons[registeredDirection] === element) buttons[registeredDirection] = null;
+		}
+		buttons[direction] = element;
+		updateButton("start");
+		updateButton("end");
+	};
+	const publicApi = {
+		scrollToEnd,
+		scrollToMessage,
+		scrollToStart,
+		scrollable,
+		visibility
+	};
+	const parts = {
+		setButton,
+		setContent,
+		setItem,
+		setRoot,
+		setViewport
+	};
+	this.signal.addEventListener("abort", () => {
+		schedule.cancel();
+		scheduleInitial.cancel();
+		mutation?.disconnect();
+	});
+	for (const { autoScroll = true, children, defaultScrollPosition = "end", preserveScrollOnPrepend = true, scrollPreviousItemPeek = 0, setApi } of this) {
+		const wasPreserving = currentPreserve;
+		currentAutoScroll = autoScroll;
+		currentDefaultPosition = defaultScrollPosition;
+		currentPreserve = preserveScrollOnPrepend;
+		if (!currentPreserve) preserveAnchor = null;
+		else if (!wasPreserving && !following) preserveAnchor = readItems().preserveAnchor;
+		currentPeek = scrollPreviousItemPeek;
+		if (setApi && setApi !== currentSetApi) {
+			currentSetApi = setApi;
+			setApi(publicApi);
+		}
+		viewportScroll.sync();
+		viewportSize.sync();
+		edges.sync();
+		contentSize.sync();
+		MessageScrollerContext(publicApi);
+		MessageScrollerPartsContext(parts);
+		queueMicrotask(scheduleInitialScroll);
+		yield /* @__PURE__ */ jsx(Fragment, { children });
+	}
+};
+MessageScrollerProvider.attrs = { "data-slot": "message-scroller-provider" };
+/** Unstyled root container for a scroll-managed message transcript. */
+var MessageScroller = ({ children, ref, ...attrs }) => {
+	const parts = messageScrollerParts();
+	return /* @__PURE__ */ jsx("div", {
+		...attrs,
+		"data-slot": "message-scroller",
+		ref: (element) => {
+			parts.setRoot(element);
+			callRef(ref, element);
+		},
+		children
+	});
+};
+/** Unstyled keyboard-focusable transcript viewport. */
+var MessageScrollerViewport = ({ children, role = "region", tabIndex = 0, "aria-label": label = "Messages", ref, ...attrs }) => {
+	const parts = messageScrollerParts();
+	return /* @__PURE__ */ jsx("div", {
+		...attrs,
+		"aria-label": label,
+		"data-slot": "message-scroller-viewport",
+		ref: (element) => {
+			parts.setViewport(element);
+			callRef(ref, element);
+		},
+		role,
+		tabIndex,
+		children
+	});
+};
+/** Unstyled live-region content list for rendered messages. */
+var MessageScrollerContent = ({ children, role = "log", "aria-live": live = "polite", "aria-relevant": relevant = "additions", ref, ...attrs }) => {
+	const parts = messageScrollerParts();
+	return /* @__PURE__ */ jsx("div", {
+		...attrs,
+		"aria-live": live,
+		"aria-relevant": relevant,
+		"data-slot": "message-scroller-content",
+		ref: (element) => {
+			parts.setContent(element);
+			callRef(ref, element);
+		},
+		role,
+		children
+	});
+};
+/** Unstyled scroll-trackable transcript item. */
+var MessageScrollerItem = ({ children, messageId, ref, scrollAnchor = false, ...attrs }) => {
+	const parts = messageScrollerParts();
+	return /* @__PURE__ */ jsx("div", {
+		...attrs,
+		"data-message-id": messageId,
+		"data-scroll-anchor": String(scrollAnchor),
+		"data-slot": "message-scroller-item",
+		ref: (element) => {
+			parts.setItem(messageId, element);
+			callRef(ref, element);
+		},
+		children
+	});
+};
+/** Unstyled floating button that jumps to the start or end of the transcript. */
+var MessageScrollerButton = ({ "aria-label": label, children, direction = "end", disabled, ref, type = "button", "set:onclick": onClick, ...attrs }) => {
+	const scroller = messageScroller();
+	const parts = messageScrollerParts();
+	const buttonActive = (next) => next === "start" ? scroller.scrollable.start : scroller.scrollable.end;
+	const active = buttonActive(direction);
+	const title = label ?? (direction === "end" ? "Scroll to end" : "Scroll to start");
+	const click = (event) => {
+		callHandler(onClick, event);
+		if (event.defaultPrevented || disabled || !buttonActive(direction)) return;
+		if (direction === "start") scroller.scrollToStart();
+		else scroller.scrollToEnd();
+	};
+	return /* @__PURE__ */ jsx("button", {
+		...attrs,
+		"aria-label": title,
+		"data-active": active ? "true" : "false",
+		"data-direction": direction,
+		"data-slot": "message-scroller-button",
+		disabled,
+		ref: (element) => {
+			parts.setButton(direction, element);
+			callRef(ref, element);
+		},
+		"set:onclick": click,
+		tabIndex: active ? attrs.tabIndex : -1,
+		type,
+		children
+	});
+};
+//#endregion
+export { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerContext, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport };