@nmakarov/cli-toolkit 0.69.0 → 0.70.0

package/dist/init.js

@@ -93,9 +93,48 @@ var init_components = __esm({
   }
 });
 
+// src/screen/scrollbar.js
+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 BAR_THUMB, BAR_TRACK, PAGE_SCROLL_KEY_BINDINGS;
+var init_scrollbar = __esm({
+  "src/screen/scrollbar.js"() {
+    BAR_THUMB = "#";
+    BAR_TRACK = "|";
+    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
 import React, { useState, useEffect, useRef, createElement } from "react";
 import { Box as Box2, Text as Text2 } from "ink";
+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;
@@ -309,17 +348,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";
@@ -366,8 +430,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,
@@ -377,47 +440,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;
@@ -430,42 +493,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
+        )
+      });
     })
   );
 }
@@ -473,6 +526,7 @@ var h2;
 var init_list_components = __esm({
   "src/screen/list-components.js"() {
     init_components();
+    init_scrollbar();
     h2 = createElement;
   }
 });
@@ -967,21 +1021,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 ? BAR_THUMB : BAR_TRACK);
-  }
-  return glyphs;
-}
 function padEndVisible(s, w) {
   const t = String(s ?? "");
   if (t.length >= w) return t.slice(0, w);
@@ -1082,22 +1121,17 @@ function ScrollableText({
     ...rowNodes
   );
 }
-var h5, BAR_THUMB, BAR_TRACK, SCROLL_KEYS;
+var h5, SCROLL_KEYS;
 var init_scrollable_text = __esm({
   "src/screen/scrollable-text.js"() {
     init_components();
+    init_scrollbar();
+    init_scrollbar();
     h5 = createElement2;
-    BAR_THUMB = "#";
-    BAR_TRACK = "|";
     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
     ];
   }
 });
@@ -1233,6 +1267,8 @@ var init_footer_builder = __esm({
 // src/screen/index.js
 var screen_exports = {};
 __export(screen_exports, {
+  BAR_THUMB: () => BAR_THUMB,
+  BAR_TRACK: () => BAR_TRACK,
   Box: () => Box5,
   Divider: () => Divider,
   FooterPresets: () => FooterPresets,
@@ -1242,6 +1278,7 @@ __export(screen_exports, {
   ListItem: () => ListItem,
   MultiColumnListComponent: () => MultiColumnListComponent,
   MultiColumnListWithPreviewComponent: () => MultiColumnListWithPreviewComponent,
+  PAGE_SCROLL_KEY_BINDINGS: () => PAGE_SCROLL_KEY_BINDINGS,
   React: () => React2,
   ScreenBody: () => ScreenBody,
   ScreenContainer: () => ScreenContainer,
@@ -1297,6 +1334,7 @@ var init_screen = __esm({
     init_components();
     init_ui_elements();
     init_scrollable_text();
+    init_scrollbar();
     init_key_bindings();
     init_utils();
     init_footer_builder();