@nmakarov/cli-toolkit 0.68.0 → 0.70.0

package/dist/screen.js

@@ -84,7 +84,43 @@ function ScreenFooter({ lines, textStyle }) {
 // src/screen/list-components.js
 import React, { useState, useEffect, useRef, createElement } from "react";
 import { Box as Box2, Text as Text2 } from "ink";
+
+// src/screen/scrollbar.js
+var BAR_THUMB = "#";
+var BAR_TRACK = "|";
+function scrollbarGlyphs(viewportRows, totalLines, scrollTop) {
+  const view = Math.max(1, Math.floor(viewportRows));
+  const total = Math.max(0, Math.floor(totalLines));
+  if (total <= view) return null;
+  const maxScroll = total - view;
+  const thumbSize = Math.max(1, Math.round(view / total * view));
+  const travel = Math.max(0, view - thumbSize);
+  const s = Math.min(Math.max(0, Math.floor(scrollTop)), maxScroll);
+  const thumbStart = maxScroll === 0 ? 0 : Math.round(s / maxScroll * travel);
+  const glyphs = [];
+  for (let i = 0; i < view; i++) {
+    glyphs.push(i >= thumbStart && i < thumbStart + thumbSize ? BAR_THUMB : BAR_TRACK);
+  }
+  return glyphs;
+}
+var PAGE_SCROLL_KEY_BINDINGS = [
+  { key: "upArrow", meta: true, caption: "page", action: "pageUp", order: 0 },
+  { key: "downArrow", meta: true, caption: "page", action: "pageDown", order: 0 },
+  { key: "upArrow", ctrl: true, caption: "page", action: "pageUp", order: 0 },
+  { key: "downArrow", ctrl: true, caption: "page", action: "pageDown", order: 0 },
+  { key: "pageUp", caption: "page", action: "pageUp", order: 0 },
+  { key: "pageDown", caption: "page", action: "pageDown", order: 0 }
+];
+
+// src/screen/list-components.js
 var h2 = createElement;
+function clipNameForScrollbar(name, needsBar) {
+  if (!needsBar || name == null) return name;
+  const s = String(name);
+  if (s.length <= 1) return s;
+  if (/\s$/.test(s)) return s.slice(0, -1);
+  return s;
+}
 function MultiColumnListComponent({ items, ctx, selectedIndexRef }) {
   const [, forceUpdate] = useState({});
   const termWidth = (process.stdout.columns || 80) - 8;
@@ -298,17 +334,42 @@ function ListComponent({ items, ctx, selectedIndexRef, renderItem, getTitle, sor
     });
     ctx.setAction("scrollUp", () => {
       const { scrollOffset: currentScrollOffset } = scrollStateRef.current;
-      const newScrollOffset = Math.max(0, currentScrollOffset - 1);
-      setScrollOffset(newScrollOffset);
+      setScrollOffset(Math.max(0, currentScrollOffset - 1));
       forceUpdate({});
     });
     ctx.setAction("scrollDown", () => {
       const { scrollOffset: currentScrollOffset, maxHeight: currentMaxHeight, totalItems } = scrollStateRef.current;
       const currentMaxScrollOffset = Math.max(0, totalItems - currentMaxHeight);
-      const newScrollOffset = Math.min(currentMaxScrollOffset, currentScrollOffset + 1);
-      setScrollOffset(newScrollOffset);
+      setScrollOffset(Math.min(currentMaxScrollOffset, currentScrollOffset + 1));
       forceUpdate({});
     });
+    ctx.setAction("pageUp", () => {
+      const { maxHeight: vh } = scrollStateRef.current;
+      const page = Math.max(1, vh || 1);
+      const newIndex = Math.max(0, selectedIndexRef.current - page);
+      selectedIndexRef.current = newIndex;
+      const list = displayItemsRef.current;
+      onSelectionChangeRef.current?.(newIndex, list[newIndex]);
+      setScrollOffset(newIndex);
+      forceUpdate({});
+    });
+    ctx.setAction("pageDown", () => {
+      const { maxHeight: vh, totalItems } = scrollStateRef.current;
+      const page = Math.max(1, vh || 1);
+      const maxIndex = Math.max(0, totalItems - 1);
+      const newIndex = Math.min(maxIndex, selectedIndexRef.current + page);
+      selectedIndexRef.current = newIndex;
+      const list = displayItemsRef.current;
+      onSelectionChangeRef.current?.(newIndex, list[newIndex]);
+      const maxScroll = Math.max(0, totalItems - page);
+      setScrollOffset(Math.min(maxScroll, Math.max(0, newIndex - page + 1)));
+      forceUpdate({});
+    });
+    const navBindings = [
+      { key: "upArrow", caption: "navigate", action: "moveUp", order: 0 },
+      { key: "downArrow", caption: "navigate", action: "moveDown", order: 0 },
+      ...PAGE_SCROLL_KEY_BINDINGS
+    ];
     if (sortable) {
       ctx.setAction("toggleSort", () => {
         const nextSort = sortOrder === "none" ? "asc" : sortOrder === "asc" ? "desc" : "none";
@@ -355,8 +416,7 @@ function ListComponent({ items, ctx, selectedIndexRef, renderItem, getTitle, sor
         }
       };
       ctx.setKeyBinding([
-        { key: "upArrow", caption: "navigate", action: "moveUp", order: 0 },
-        { key: "downArrow", caption: "navigate", action: "moveDown", order: 0 },
+        ...navBindings,
         {
           key: "s",
           caption: sortCaption,
@@ -366,47 +426,47 @@ function ListComponent({ items, ctx, selectedIndexRef, renderItem, getTitle, sor
       ]);
       ctx.update();
     } else {
-      ctx.setKeyBinding([
-        { key: "upArrow", caption: "navigate", action: "moveUp", order: 0 },
-        { key: "downArrow", caption: "navigate", action: "moveDown", order: 0 }
-      ]);
+      ctx.setKeyBinding(navBindings);
     }
   }, [sortOrder, sortable]);
   const selectedIndex = selectedIndexRef.current;
+  const needsBar = displayItems.length > effectiveMaxHeight;
+  const barGlyphs = needsBar ? scrollbarGlyphs(effectiveMaxHeight, displayItems.length, clampedScrollOffset) : null;
+  const appendBar = (rowContent, displayIndex) => {
+    if (!barGlyphs) return rowContent;
+    const glyph = barGlyphs[displayIndex] ?? BAR_TRACK;
+    return h2(
+      Box2,
+      { flexDirection: "row" },
+      rowContent,
+      h2(Text2, { color: glyph === BAR_THUMB ? "cyan" : "gray" }, glyph)
+    );
+  };
   const defaultRenderItem = (item, isSelected, displayIndex, actualIndex) => {
     const isFirstVisible = displayIndex === 0;
     const isLastVisible = displayIndex === visibleItems.length - 1;
-    let arrowPrefix = "";
-    let selectionPrefix = "";
-    if (isFirstVisible && canScrollUp) {
-      arrowPrefix = "\u2191 ";
-    } else if (isLastVisible && canScrollDown) {
-      arrowPrefix = "\u2193 ";
-    } else {
-      arrowPrefix = "  ";
-    }
-    if (isSelected) {
-      selectionPrefix = selectionMarker;
-    } else {
-      selectionPrefix = " ".repeat(selectionMarker.length);
+    let arrowPrefix = "  ";
+    if (!needsBar) {
+      if (isFirstVisible && canScrollUp) arrowPrefix = "\u2191 ";
+      else if (isLastVisible && canScrollDown) arrowPrefix = "\u2193 ";
     }
+    const selectionPrefix = isSelected ? selectionMarker : " ".repeat(selectionMarker.length);
+    const label = clipNameForScrollbar(item.name, needsBar);
     return h2(
       Box2,
       { flexDirection: "row" },
-      // Arrow (clickable if functional, not highlighted)
-      h2(Text2, {
-        key: `arrow-${actualIndex}`,
-        color: "white"
-      }, arrowPrefix),
-      // Selection marker space (always same width, not highlighted) 
+      h2(Text2, { key: `arrow-${actualIndex}`, color: "white" }, arrowPrefix),
       h2(Text2, { key: `marker-${actualIndex}`, color: "white" }, selectionPrefix),
-      // Item name (highlighted if selected)
-      h2(Text2, {
-        key: `name-${actualIndex}`,
-        color: isSelected ? "black" : "white",
-        backgroundColor: isSelected ? "cyan" : void 0,
-        bold: isSelected
-      }, item.name)
+      h2(
+        Text2,
+        {
+          key: `name-${actualIndex}`,
+          color: isSelected ? "black" : "white",
+          backgroundColor: isSelected ? "cyan" : void 0,
+          bold: isSelected
+        },
+        label
+      )
     );
   };
   const itemRenderer = renderItem || defaultRenderItem;
@@ -419,42 +479,32 @@ function ListComponent({ items, ctx, selectedIndexRef, renderItem, getTitle, sor
       if (renderItem) {
         const isFirstVisible = displayIndex === 0;
         const isLastVisible = displayIndex === visibleItems.length - 1;
-        let arrowPrefix = "";
-        let selectionPrefix = "";
-        if (isFirstVisible && canScrollUp) {
-          arrowPrefix = "\u2191 ";
-        } else if (isLastVisible && canScrollDown) {
-          arrowPrefix = "\u2193 ";
-        } else {
-          arrowPrefix = "  ";
-        }
-        if (isSelected) {
-          selectionPrefix = selectionMarker;
-        } else {
-          selectionPrefix = " ".repeat(selectionMarker.length);
+        let arrowPrefix = "  ";
+        if (!needsBar) {
+          if (isFirstVisible && canScrollUp) arrowPrefix = "\u2191 ";
+          else if (isLastVisible && canScrollDown) arrowPrefix = "\u2193 ";
         }
+        const selectionPrefix = isSelected ? selectionMarker : " ".repeat(selectionMarker.length);
+        const clipped = needsBar ? { ...item, name: clipNameForScrollbar(item.name, true) } : item;
+        const row = h2(
+          Box2,
+          { flexDirection: "row" },
+          h2(Text2, { key: `arrow-${actualIndex}`, color: "white" }, arrowPrefix),
+          h2(Text2, { key: `marker-${actualIndex}`, color: "white" }, selectionPrefix),
+          renderItem(clipped, isSelected, displayIndex)
+        );
         return h2(ScreenRow, {
           key: `item-${actualIndex}`,
-          children: h2(
-            Box2,
-            { flexDirection: "row" },
-            // Arrow (clickable if functional, not highlighted)
-            h2(Text2, {
-              key: `arrow-${actualIndex}`,
-              color: "white"
-            }, arrowPrefix),
-            // Selection marker space (always same width, not highlighted) 
-            h2(Text2, { key: `marker-${actualIndex}`, color: "white" }, selectionPrefix),
-            // Custom rendered content
-            renderItem(item, isSelected, displayIndex)
-          )
-        });
-      } else {
-        return h2(ScreenRow, {
-          key: `item-${actualIndex}`,
-          children: itemRenderer(item, isSelected, displayIndex, actualIndex)
+          children: appendBar(row, displayIndex)
         });
       }
+      return h2(ScreenRow, {
+        key: `item-${actualIndex}`,
+        children: appendBar(
+          itemRenderer(item, isSelected, displayIndex, actualIndex),
+          displayIndex
+        )
+      });
     })
   );
 }
@@ -931,21 +981,6 @@ function wrapTextLines(text, cols) {
   }
   return out;
 }
-function scrollbarGlyphs(viewportRows, totalLines, scrollTop) {
-  const view = Math.max(1, Math.floor(viewportRows));
-  const total = Math.max(0, Math.floor(totalLines));
-  if (total <= view) return null;
-  const maxScroll = total - view;
-  const thumbSize = Math.max(1, Math.round(view / total * view));
-  const travel = Math.max(0, view - thumbSize);
-  const s = Math.min(Math.max(0, Math.floor(scrollTop)), maxScroll);
-  const thumbStart = maxScroll === 0 ? 0 : Math.round(s / maxScroll * travel);
-  const glyphs = [];
-  for (let i = 0; i < view; i++) {
-    glyphs.push(i >= thumbStart && i < thumbStart + thumbSize ? "\u2588" : "\u2502");
-  }
-  return glyphs;
-}
 function padEndVisible(s, w) {
   const t = String(s ?? "");
   if (t.length >= w) return t.slice(0, w);
@@ -954,12 +989,7 @@ function padEndVisible(s, w) {
 var SCROLL_KEYS = [
   { key: "upArrow", caption: "scroll", action: "scrollUp", order: 0 },
   { key: "downArrow", caption: "scroll", action: "scrollDown", order: 0 },
-  { key: "upArrow", meta: true, caption: "page", action: "pageUp", order: 0 },
-  { key: "downArrow", meta: true, caption: "page", action: "pageDown", order: 0 },
-  { key: "upArrow", ctrl: true, caption: "page", action: "pageUp", order: 0 },
-  { key: "downArrow", ctrl: true, caption: "page", action: "pageDown", order: 0 },
-  { key: "pageUp", caption: "page", action: "pageUp", order: 0 },
-  { key: "pageDown", caption: "page", action: "pageDown", order: 0 }
+  ...PAGE_SCROLL_KEY_BINDINGS
 ];
 function ScrollableText({
   ctx,
@@ -974,20 +1004,19 @@ function ScrollableText({
 }) {
   const [scrollTop, setScrollTop] = useState3(0);
   const [, bump] = useState3(0);
-  const termCols = process.stdout.columns || 80;
   const termRows = process.stdout.rows || 24;
   const viewportRows = Math.max(
     4,
     maxHeight != null ? Math.floor(maxHeight) : Math.max(8, termRows - 8)
   );
-  const provisionalBar = showScrollbar ? 1 : 0;
-  const wrapCols = Math.max(8, termCols - provisionalBar);
+  const contentCols = Math.max(20, getScreenWidth() - 4);
+  const barCols = showScrollbar ? 1 : 0;
+  const textWidth = Math.max(8, contentCols - barCols);
   const allLines = useMemo(() => {
     if (Array.isArray(linesProp)) return linesProp.map((l) => String(l ?? ""));
-    return wrap ? wrapTextLines(text, wrapCols) : String(text ?? "").split("\n");
-  }, [linesProp, text, wrap, wrapCols]);
+    return wrap ? wrapTextLines(text, textWidth) : String(text ?? "").split("\n");
+  }, [linesProp, text, wrap, textWidth]);
   const needsBar = showScrollbar && allLines.length > viewportRows;
-  const textWidth = Math.max(8, termCols - (needsBar ? 1 : 0));
   const maxScroll = Math.max(0, allLines.length - viewportRows);
   const clamped = Math.min(Math.max(0, scrollTop), maxScroll);
   const visible = allLines.slice(clamped, clamped + viewportRows);
@@ -1027,22 +1056,24 @@ function ScrollableText({
   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" : "");
   const rowNodes = visible.map((line, i) => {
     const body = padEndVisible(line, textWidth);
-    const glyph = bar ? bar[i] ?? "\u2502" : "";
+    const glyph = bar ? bar[i] ?? BAR_TRACK : showScrollbar ? " " : "";
+    const isThumb = glyph === BAR_THUMB;
     return h5(
-      Box4,
-      { key: `L${clamped + i}`, flexDirection: "row" },
-      h5(Text5, {}, body),
-      glyph ? h5(Text5, { color: bar[i] === "\u2588" ? "cyan" : "gray" }, glyph) : null
+      Text5,
+      { key: `L${clamped + i}` },
+      body,
+      glyph ? h5(Text5, { color: isThumb ? "cyan" : "gray" }, glyph) : null
     );
   });
   if (bar && visible.length < viewportRows) {
     for (let i = visible.length; i < viewportRows; i++) {
+      const glyph = bar[i] ?? BAR_TRACK;
       rowNodes.push(
         h5(
-          Box4,
-          { key: `pad${i}`, flexDirection: "row" },
-          h5(Text5, {}, padEndVisible("", textWidth)),
-          h5(Text5, { color: bar[i] === "\u2588" ? "cyan" : "gray" }, bar[i] ?? "\u2502")
+          Text5,
+          { key: `pad${i}` },
+          padEndVisible("", textWidth),
+          h5(Text5, { color: glyph === BAR_THUMB ? "cyan" : "gray" }, glyph)
         )
       );
     }
@@ -1191,6 +1222,8 @@ if (typeof window === "undefined") {
   });
 }
 export {
+  BAR_THUMB,
+  BAR_TRACK,
   Box5 as Box,
   Divider,
   FooterPresets,
@@ -1200,6 +1233,7 @@ export {
   ListItem,
   MultiColumnListComponent,
   MultiColumnListWithPreviewComponent,
+  PAGE_SCROLL_KEY_BINDINGS,
   React2 as React,
   ScreenBody,
   ScreenContainer,