@nmakarov/cli-toolkit 0.69.0 → 0.71.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
+        )
+      });
     })
   );
 }
@@ -914,8 +964,6 @@ function InputField({ prompt, value, onChange: _onChange, onSubmit: _onSubmit })
 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";
 var h5 = createElement2;
-var BAR_THUMB = "#";
-var BAR_TRACK = "|";
 function wrapTextLines(text, cols) {
   const w = Math.max(1, Math.floor(Number(cols) || 1));
   const out = [];
@@ -933,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 ? BAR_THUMB : BAR_TRACK);
-  }
-  return glyphs;
-}
 function padEndVisible(s, w) {
   const t = String(s ?? "");
   if (t.length >= w) return t.slice(0, w);
@@ -956,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,
@@ -1194,6 +1222,8 @@ if (typeof window === "undefined") {
   });
 }
 export {
+  BAR_THUMB,
+  BAR_TRACK,
   Box5 as Box,
   Divider,
   FooterPresets,
@@ -1203,6 +1233,7 @@ export {
   ListItem,
   MultiColumnListComponent,
   MultiColumnListWithPreviewComponent,
+  PAGE_SCROLL_KEY_BINDINGS,
   React2 as React,
   ScreenBody,
   ScreenContainer,