@nmakarov/cli-toolkit 0.68.0 → 0.69.0

package/dist/init.js

@@ -978,7 +978,7 @@ function scrollbarGlyphs(viewportRows, totalLines, scrollTop) {
   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");
+    glyphs.push(i >= thumbStart && i < thumbStart + thumbSize ? BAR_THUMB : BAR_TRACK);
   }
   return glyphs;
 }
@@ -1000,20 +1000,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);
@@ -1053,22 +1052,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)
         )
       );
     }
@@ -1081,10 +1082,13 @@ function ScrollableText({
     ...rowNodes
   );
 }
-var h5, SCROLL_KEYS;
+var h5, BAR_THUMB, BAR_TRACK, SCROLL_KEYS;
 var init_scrollable_text = __esm({
   "src/screen/scrollable-text.js"() {
+    init_components();
     h5 = createElement2;
+    BAR_THUMB = "#";
+    BAR_TRACK = "|";
     SCROLL_KEYS = [
       { key: "upArrow", caption: "scroll", action: "scrollUp", order: 0 },
       { key: "downArrow", caption: "scroll", action: "scrollDown", order: 0 },