@nmakarov/cli-toolkit 0.80.0 → 0.82.0

package/dist/screen.cjs

@@ -56,11 +56,16 @@ __export(screen_exports, {
   buildBreadcrumb: () => buildBreadcrumb,
   buildDetailBreadcrumb: () => buildDetailBreadcrumb,
   buildFooter: () => buildFooter,
+  clampScroll: () => clampScroll,
   formatBindingKey: () => formatBindingKey,
   h: () => import_react6.createElement,
+  isScrolledToBottom: () => isScrolledToBottom,
   load: () => load,
   memo: () => import_react6.memo,
+  nextScrollAfterContentChange: () => nextScrollAfterContentChange,
+  nextScrollAfterUserMove: () => nextScrollAfterUserMove,
   organizeFooterMessages: () => organizeFooterMessages,
+  padEndVisible: () => padEndVisible,
   scrollbarGlyphs: () => scrollbarGlyphs,
   showListScreen: () => showListScreen,
   showMenuScreen: () => showMenuScreen,
@@ -68,6 +73,8 @@ __export(screen_exports, {
   showMultiColumnListWithPreviewScreen: () => showMultiColumnListWithPreviewScreen,
   showScreen: () => showScreen,
   showWordGridScreen: () => showWordGridScreen,
+  sliceVisible: () => sliceVisible,
+  stripAnsi: () => stripAnsi,
   useCallback: () => import_react6.useCallback,
   useEffect: () => import_react6.useEffect,
   useInput: () => import_ink6.useInput,
@@ -75,6 +82,7 @@ __export(screen_exports, {
   useMemo: () => import_react6.useMemo,
   useRef: () => import_react6.useRef,
   useState: () => import_react6.useState,
+  visibleWidth: () => visibleWidth,
   wrapTextLines: () => wrapTextLines
 });
 module.exports = __toCommonJS(screen_exports);
@@ -1042,7 +1050,66 @@ function InputField({ prompt, value, onChange: _onChange, onSubmit: _onSubmit })
 // src/screen/scrollable-text.js
 var import_react5 = null; // Will be set by load();
 var import_ink5 = null; // Will be set by load();
-// Removed: intermediate assignment - code will access import variable directly
+
+// 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) };
+}
+
+// src/screen/visible-text.js
+var ANSI_RE = /\u001b(?:[@-Z\\-_]|\[[0-?]*[ -/]*[@-~])/g;
+function stripAnsi(text) {
+  return String(text ?? "").replace(ANSI_RE, "");
+}
+function visibleWidth(text) {
+  return [...stripAnsi(text)].length;
+}
+function sliceVisible(text, cols) {
+  const w = Math.max(0, Math.floor(Number(cols) || 0));
+  const s = String(text ?? "");
+  if (w === 0) return "";
+  let vis = 0;
+  let out = "";
+  let i = 0;
+  while (i < s.length && vis < w) {
+    ANSI_RE.lastIndex = i;
+    const m = ANSI_RE.exec(s);
+    if (m && m.index === i) {
+      out += m[0];
+      i += m[0].length;
+      continue;
+    }
+    const cp = s.codePointAt(i);
+    const ch = String.fromCodePoint(cp);
+    out += ch;
+    i += ch.length;
+    vis += 1;
+  }
+  return out;
+}
+function padEndVisible(text, cols) {
+  const w = Math.max(0, Math.floor(Number(cols) || 0));
+  const s = String(text ?? "");
+  const vis = visibleWidth(s);
+  if (vis === w) return s;
+  if (vis > w) return sliceVisible(s, w);
+  return s + " ".repeat(w - vis);
+}
 function wrapTextLines(text, cols) {
   const w = Math.max(1, Math.floor(Number(cols) || 1));
   const out = [];
@@ -1051,20 +1118,23 @@ function wrapTextLines(text, cols) {
       out.push("");
       continue;
     }
+    if (visibleWidth(raw) <= w) {
+      out.push(raw);
+      continue;
+    }
     let rest = raw;
-    while (rest.length > w) {
-      out.push(rest.slice(0, w));
-      rest = rest.slice(w);
+    while (visibleWidth(rest) > w) {
+      const head = sliceVisible(rest, w);
+      out.push(head);
+      rest = rest.slice(head.length);
     }
     if (rest.length > 0) out.push(rest);
   }
   return out;
 }
-function padEndVisible(s, w) {
-  const t = String(s ?? "");
-  if (t.length >= w) return t.slice(0, w);
-  return t + " ".repeat(w - t.length);
-}
+
+// src/screen/scrollable-text.js
+// Removed: intermediate assignment - code will access import variable directly
 var SCROLL_KEYS = [
   { key: "upArrow", caption: "scroll", action: "scrollUp", order: 0 },
   { key: "downArrow", caption: "scroll", action: "scrollDown", order: 0 },
@@ -1079,9 +1149,11 @@ function ScrollableText({
   showScrollbar = true,
   showStatus = true,
   bindKeys = true,
-  header = null
+  header = null,
+  followBottom = false
 }) {
   const [scrollTop, setScrollTop] = (0, import_react5.useState)(0);
+  const [following, setFollowing] = (0, import_react5.useState)(() => !!followBottom);
   const [, bump] = (0, import_react5.useState)(0);
   const termRows = process.stdout.rows || 24;
   const viewportRows = Math.max(
@@ -1100,48 +1172,52 @@ 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;
-  (0, import_react5.useEffect)(() => {
-    setScrollTop((s) => Math.min(s, maxScroll));
-  }, [maxScroll]);
   const maxScrollRef = (0, import_react5.useRef)(maxScroll);
   const pageSizeRef = (0, import_react5.useRef)(viewportRows);
+  const scrollTopRef = (0, import_react5.useRef)(scrollTop);
+  const followingRef = (0, import_react5.useRef)(following);
   maxScrollRef.current = maxScroll;
   pageSizeRef.current = viewportRows;
+  scrollTopRef.current = scrollTop;
+  followingRef.current = following;
+  (0, import_react5.useEffect)(() => {
+    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?.();
+  };
   (0, import_react5.useEffect)(() => {
     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 ? " " : "";
     const isThumb = glyph === BAR_THUMB;
     return h5(
-      import_ink5.Text,
-      { key: `L${clamped + i}` },
-      body,
-      glyph ? h5(import_ink5.Text, { color: isThumb ? "cyan" : "gray" }, glyph) : null
+      import_ink5.Box,
+      { key: `L${clamped + i}`, flexDirection: "row", width: contentCols, flexShrink: 0 },
+      h5(
+        import_ink5.Box,
+        { width: textWidth, flexShrink: 0 },
+        h5(import_ink5.Text, { wrap: "truncate" }, padEndVisible(line, textWidth))
+      ),
+      showScrollbar ? h5(import_ink5.Box, { width: 1, flexShrink: 0 }, h5(import_ink5.Text, { color: isThumb ? "cyan" : "gray" }, glyph)) : null
     );
   });
   if (bar && visible.length < viewportRows) {
@@ -1149,10 +1225,10 @@ function ScrollableText({
       const glyph = bar[i] ?? BAR_TRACK;
       rowNodes.push(
         h5(
-          import_ink5.Text,
-          { key: `pad${i}` },
-          padEndVisible("", textWidth),
-          h5(import_ink5.Text, { color: glyph === BAR_THUMB ? "cyan" : "gray" }, glyph)
+          import_ink5.Box,
+          { key: `pad${i}`, flexDirection: "row", width: contentCols, flexShrink: 0 },
+          h5(import_ink5.Box, { width: textWidth, flexShrink: 0 }, h5(import_ink5.Text, {}, padEndVisible("", textWidth))),
+          h5(import_ink5.Box, { width: 1, flexShrink: 0 }, h5(import_ink5.Text, { color: glyph === BAR_THUMB ? "cyan" : "gray" }, glyph))
         )
       );
     }
@@ -1341,11 +1417,16 @@ if (typeof window === "undefined") {
   buildBreadcrumb,
   buildDetailBreadcrumb,
   buildFooter,
+  clampScroll,
   formatBindingKey,
   h,
+  isScrolledToBottom,
   load,
   memo,
+  nextScrollAfterContentChange,
+  nextScrollAfterUserMove,
   organizeFooterMessages,
+  padEndVisible,
   scrollbarGlyphs,
   showListScreen,
   showMenuScreen,
@@ -1353,6 +1434,8 @@ if (typeof window === "undefined") {
   showMultiColumnListWithPreviewScreen,
   showScreen,
   showWordGridScreen,
+  sliceVisible,
+  stripAnsi,
   useCallback,
   useEffect,
   useInput,
@@ -1360,6 +1443,7 @@ if (typeof window === "undefined") {
   useMemo,
   useRef,
   useState,
+  visibleWidth,
   wrapTextLines
 });
 //# sourceMappingURL=screen.cjs.map