@nmakarov/cli-toolkit 0.80.0 → 0.81.0

package/dist/init.js

@@ -1001,6 +1001,30 @@ var init_ui_elements = __esm({
   }
 });
 
+// src/screen/follow-scroll.js
+function clampScroll(scrollTop, maxScroll) {
+  const max = Math.max(0, Number(maxScroll) || 0);
+  const top = Number(scrollTop) || 0;
+  return Math.min(Math.max(0, top), max);
+}
+function isScrolledToBottom(scrollTop, maxScroll) {
+  return clampScroll(scrollTop, maxScroll) >= Math.max(0, Number(maxScroll) || 0);
+}
+function nextScrollAfterUserMove(scrollTop, maxScroll, delta) {
+  const next = clampScroll((Number(scrollTop) || 0) + (Number(delta) || 0), maxScroll);
+  return { scrollTop: next, following: isScrolledToBottom(next, maxScroll) };
+}
+function nextScrollAfterContentChange({ following, scrollTop, maxScroll }) {
+  const max = Math.max(0, Number(maxScroll) || 0);
+  if (following) return { scrollTop: max, following: true };
+  const next = clampScroll(scrollTop, max);
+  return { scrollTop: next, following: isScrolledToBottom(next, max) };
+}
+var init_follow_scroll = __esm({
+  "src/screen/follow-scroll.js"() {
+  }
+});
+
 // src/screen/scrollable-text.js
 import { useState as useState3, useEffect as useEffect2, useMemo, useRef as useRef2, createElement as createElement2 } from "react";
 import { Box as Box4, Text as Text5 } from "ink";
@@ -1035,9 +1059,11 @@ function ScrollableText({
   showScrollbar = true,
   showStatus = true,
   bindKeys = true,
-  header = null
+  header = null,
+  followBottom = false
 }) {
   const [scrollTop, setScrollTop] = useState3(0);
+  const [following, setFollowing] = useState3(() => !!followBottom);
   const [, bump] = useState3(0);
   const termRows = process.stdout.rows || 24;
   const viewportRows = Math.max(
@@ -1056,39 +1082,40 @@ function ScrollableText({
   const clamped = Math.min(Math.max(0, scrollTop), maxScroll);
   const visible = allLines.slice(clamped, clamped + viewportRows);
   const bar = needsBar ? scrollbarGlyphs(viewportRows, allLines.length, clamped) : null;
-  useEffect2(() => {
-    setScrollTop((s) => Math.min(s, maxScroll));
-  }, [maxScroll]);
   const maxScrollRef = useRef2(maxScroll);
   const pageSizeRef = useRef2(viewportRows);
+  const scrollTopRef = useRef2(scrollTop);
+  const followingRef = useRef2(following);
   maxScrollRef.current = maxScroll;
   pageSizeRef.current = viewportRows;
+  scrollTopRef.current = scrollTop;
+  followingRef.current = following;
+  useEffect2(() => {
+    const next = nextScrollAfterContentChange({
+      following: followBottom && followingRef.current,
+      scrollTop: scrollTopRef.current,
+      maxScroll
+    });
+    if (next.scrollTop !== scrollTopRef.current) setScrollTop(next.scrollTop);
+    if (followBottom && next.following !== followingRef.current) setFollowing(next.following);
+  }, [maxScroll, followBottom]);
+  const applyUserScroll = (delta) => {
+    const next = nextScrollAfterUserMove(scrollTopRef.current, maxScrollRef.current, delta);
+    setScrollTop(next.scrollTop);
+    if (followBottom) setFollowing(next.following);
+    bump((n) => n + 1);
+    ctx?.update?.();
+  };
   useEffect2(() => {
     if (!ctx || !bindKeys) return void 0;
     ctx.setKeyBinding(SCROLL_KEYS);
-    ctx.setAction("scrollUp", () => {
-      setScrollTop((s) => Math.max(0, s - 1));
-      bump((n) => n + 1);
-      ctx.update?.();
-    });
-    ctx.setAction("scrollDown", () => {
-      setScrollTop((s) => Math.min(maxScrollRef.current, s + 1));
-      bump((n) => n + 1);
-      ctx.update?.();
-    });
-    ctx.setAction("pageUp", () => {
-      setScrollTop((s) => Math.max(0, s - pageSizeRef.current));
-      bump((n) => n + 1);
-      ctx.update?.();
-    });
-    ctx.setAction("pageDown", () => {
-      setScrollTop((s) => Math.min(maxScrollRef.current, s + pageSizeRef.current));
-      bump((n) => n + 1);
-      ctx.update?.();
-    });
+    ctx.setAction("scrollUp", () => applyUserScroll(-1));
+    ctx.setAction("scrollDown", () => applyUserScroll(1));
+    ctx.setAction("pageUp", () => applyUserScroll(-pageSizeRef.current));
+    ctx.setAction("pageDown", () => applyUserScroll(pageSizeRef.current));
     return void 0;
-  }, [ctx, bindKeys]);
-  const status = allLines.length === 0 ? "empty" : `lines ${clamped + 1}-${Math.min(clamped + visible.length, allLines.length)} of ${allLines.length}` + (needsBar ? " \xB7 \u2325\u2191/\u2193 or PgUp/Dn page" : "");
+  }, [ctx, bindKeys, followBottom]);
+  const status = allLines.length === 0 ? "empty" : `lines ${clamped + 1}-${Math.min(clamped + visible.length, allLines.length)} of ${allLines.length}` + (needsBar ? " \xB7 \u2325\u2191/\u2193 or PgUp/Dn page" : "") + (followBottom && following ? " \xB7 follow" : followBottom ? " \xB7 follow off" : "");
   const rowNodes = visible.map((line, i) => {
     const body = padEndVisible(line, textWidth);
     const glyph = bar ? bar[i] ?? BAR_TRACK : showScrollbar ? " " : "";
@@ -1126,6 +1153,7 @@ var init_scrollable_text = __esm({
   "src/screen/scrollable-text.js"() {
     init_components();
     init_scrollbar();
+    init_follow_scroll();
     init_scrollbar();
     h5 = createElement2;
     SCROLL_KEYS = [
@@ -1294,10 +1322,14 @@ __export(screen_exports, {
   buildBreadcrumb: () => buildBreadcrumb,
   buildDetailBreadcrumb: () => buildDetailBreadcrumb,
   buildFooter: () => buildFooter,
+  clampScroll: () => clampScroll,
   formatBindingKey: () => formatBindingKey,
   h: () => createElement3,
+  isScrolledToBottom: () => isScrolledToBottom,
   load: () => load,
   memo: () => memo,
+  nextScrollAfterContentChange: () => nextScrollAfterContentChange,
+  nextScrollAfterUserMove: () => nextScrollAfterUserMove,
   organizeFooterMessages: () => organizeFooterMessages,
   scrollbarGlyphs: () => scrollbarGlyphs,
   showListScreen: () => showListScreen,
@@ -1334,6 +1366,7 @@ var init_screen = __esm({
     init_components();
     init_ui_elements();
     init_scrollable_text();
+    init_follow_scroll();
     init_scrollbar();
     init_key_bindings();
     init_utils();