@nmakarov/cli-toolkit 0.67.0 → 0.68.0

package/dist/init.js

@@ -477,6 +477,59 @@ var init_list_components = __esm({
   }
 });
 
+// src/screen/key-bindings.js
+function bindingIdentity(b) {
+  return [
+    String(b?.key ?? ""),
+    b?.meta ? "m" : "",
+    b?.ctrl ? "c" : "",
+    b?.shift ? "s" : ""
+  ].join("|");
+}
+function bindingMatchesInput(binding, input, key) {
+  if (!binding?.key) return false;
+  let keyMatches = false;
+  if (key?.[binding.key]) {
+    keyMatches = true;
+  } else if (input === binding.key) {
+    keyMatches = true;
+  } else if (key?.name === binding.key) {
+    keyMatches = true;
+  }
+  if (!keyMatches) return false;
+  const modOk = (flag, pressed) => {
+    if (flag === true) return !!pressed;
+    if (flag === false) return !pressed;
+    return !pressed;
+  };
+  if (!modOk(binding.meta, key?.meta)) return false;
+  if (!modOk(binding.ctrl, key?.ctrl)) return false;
+  if (binding.shift !== void 0 && !!key?.shift !== !!binding.shift) return false;
+  return true;
+}
+function formatBindingKey(binding) {
+  let label = KEY_LABELS[binding.key] || binding.key;
+  if (binding.shift) label = `\u21E7${label}`;
+  if (binding.ctrl) label = `^${label}`;
+  if (binding.meta) label = `\u2325${label}`;
+  return label;
+}
+var KEY_LABELS;
+var init_key_bindings = __esm({
+  "src/screen/key-bindings.js"() {
+    KEY_LABELS = {
+      escape: "esc",
+      leftArrow: "\u2190",
+      rightArrow: "\u2192",
+      upArrow: "\u2191",
+      downArrow: "\u2193",
+      return: "enter",
+      pageUp: "PgUp",
+      pageDown: "PgDn"
+    };
+  }
+});
+
 // src/screen/screens.js
 import { useState as useState2, createElement as h3 } from "react";
 import { render, useInput, Text as Text3 } from "ink";
@@ -492,7 +545,7 @@ function groupKeyBindings(bindings) {
         order: binding.order || 999
       };
     }
-    groups[caption].keys.push(binding.key);
+    groups[caption].keys.push(formatBindingKey(binding));
   });
   return Object.values(groups);
 }
@@ -532,12 +585,14 @@ function formatKeyBindings(bindings, mode = "long") {
 }
 function formatKeys(keys) {
   const keyMap = {
-    "escape": "esc",
-    "leftArrow": "\u2190",
-    "rightArrow": "\u2192",
-    "upArrow": "\u2191",
-    "downArrow": "\u2193",
-    "return": "enter"
+    escape: "esc",
+    leftArrow: "\u2190",
+    rightArrow: "\u2192",
+    upArrow: "\u2191",
+    downArrow: "\u2193",
+    return: "enter",
+    pageUp: "PgUp",
+    pageDown: "PgDn"
   };
   return keys.map((k) => keyMap[k] || k).join("/");
 }
@@ -577,7 +632,10 @@ async function showScreen(config2) {
         setKeyBinding: (bindingOrBindings) => {
           const bindingsToSet = Array.isArray(bindingOrBindings) ? bindingOrBindings : [bindingOrBindings];
           bindingsToSet.forEach((binding) => {
-            const existingIndex = keyBindings.findIndex((b) => b.key === binding.key);
+            const id = bindingIdentity(binding);
+            const existingIndex = keyBindings.findIndex(
+              (b) => bindingIdentity(b) === id
+            );
             if (existingIndex >= 0) {
               const existing = keyBindings[existingIndex];
               if (existing.protected) {
@@ -601,7 +659,10 @@ async function showScreen(config2) {
           });
         },
         updateKeyBinding: (keyName, updates) => {
-          const index = keyBindings.findIndex((b) => b.key === keyName);
+          const id = updates && (updates.meta != null || updates.ctrl != null || updates.shift != null) ? bindingIdentity({ key: keyName, ...updates }) : null;
+          const index = keyBindings.findIndex(
+            (b) => id ? bindingIdentity(b) === id : b.key === keyName
+          );
           if (index >= 0) {
             keyBindings[index] = {
               ...keyBindings[index],
@@ -609,11 +670,13 @@ async function showScreen(config2) {
             };
           }
         },
-        removeKeyBinding: (keyName) => {
-          const index = keyBindings.findIndex((b) => b.key === keyName);
+        removeKeyBinding: (keyNameOrBinding) => {
+          const index = typeof keyNameOrBinding === "object" && keyNameOrBinding ? keyBindings.findIndex(
+            (b) => bindingIdentity(b) === bindingIdentity(keyNameOrBinding)
+          ) : keyBindings.findIndex((b) => b.key === keyNameOrBinding);
           if (index >= 0) {
             if (keyBindings[index].protected) {
-              console.warn(`Cannot remove protected key: ${keyName}`);
+              console.warn(`Cannot remove protected key: ${keyNameOrBinding}`);
               return;
             }
             keyBindings.splice(index, 1);
@@ -654,24 +717,11 @@ async function showScreen(config2) {
         }
         let matchedBinding = null;
         for (const binding of keyBindings) {
-          let keyMatches = false;
-          if (key[binding.key]) {
-            keyMatches = true;
-          } else if (input === binding.key) {
-            keyMatches = true;
-          } else if (key?.name === binding.key) {
-            keyMatches = true;
-          }
-          if (keyMatches) {
-            if (binding.enabled === false) {
-              continue;
-            }
-            if (binding.condition && !binding.condition(context)) {
-              continue;
-            }
-            matchedBinding = binding;
-            break;
-          }
+          if (binding.enabled === false) continue;
+          if (!bindingMatchesInput(binding, input, key)) continue;
+          if (binding.condition && !binding.condition(context)) continue;
+          matchedBinding = binding;
+          break;
         }
         if (matchedBinding && actions[matchedBinding.action]) {
           actions[matchedBinding.action]({
@@ -807,6 +857,7 @@ var init_screens = __esm({
   "src/screen/screens.js"() {
     init_components();
     init_list_components();
+    init_key_bindings();
     showMenuScreen = showListScreen;
     showWordGridScreen = showMultiColumnListScreen;
   }
@@ -896,6 +947,157 @@ var init_ui_elements = __esm({
   }
 });
 
+// src/screen/scrollable-text.js
+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";
+function wrapTextLines(text, cols) {
+  const w = Math.max(1, Math.floor(Number(cols) || 1));
+  const out = [];
+  for (const raw of String(text ?? "").split("\n")) {
+    if (raw.length === 0) {
+      out.push("");
+      continue;
+    }
+    let rest = raw;
+    while (rest.length > w) {
+      out.push(rest.slice(0, w));
+      rest = rest.slice(w);
+    }
+    if (rest.length > 0) out.push(rest);
+  }
+  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);
+  return t + " ".repeat(w - t.length);
+}
+function ScrollableText({
+  ctx,
+  text = "",
+  lines: linesProp,
+  maxHeight,
+  wrap = true,
+  showScrollbar = true,
+  showStatus = true,
+  bindKeys = true,
+  header = null
+}) {
+  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 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]);
+  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);
+  const bar = needsBar ? scrollbarGlyphs(viewportRows, allLines.length, clamped) : null;
+  useEffect2(() => {
+    setScrollTop((s) => Math.min(s, maxScroll));
+  }, [maxScroll]);
+  const maxScrollRef = useRef2(maxScroll);
+  const pageSizeRef = useRef2(viewportRows);
+  maxScrollRef.current = maxScroll;
+  pageSizeRef.current = viewportRows;
+  useEffect2(() => {
+    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?.();
+    });
+    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" : "");
+  const rowNodes = visible.map((line, i) => {
+    const body = padEndVisible(line, textWidth);
+    const glyph = bar ? bar[i] ?? "\u2502" : "";
+    return h5(
+      Box4,
+      { key: `L${clamped + i}`, flexDirection: "row" },
+      h5(Text5, {}, body),
+      glyph ? h5(Text5, { color: bar[i] === "\u2588" ? "cyan" : "gray" }, glyph) : null
+    );
+  });
+  if (bar && visible.length < viewportRows) {
+    for (let i = visible.length; i < viewportRows; i++) {
+      rowNodes.push(
+        h5(
+          Box4,
+          { key: `pad${i}`, flexDirection: "row" },
+          h5(Text5, {}, padEndVisible("", textWidth)),
+          h5(Text5, { color: bar[i] === "\u2588" ? "cyan" : "gray" }, bar[i] ?? "\u2502")
+        )
+      );
+    }
+  }
+  return h5(
+    Box4,
+    { flexDirection: "column" },
+    header == null ? null : typeof header === "string" ? h5(Text5, { color: "gray" }, header) : header,
+    showStatus ? h5(Text5, { color: "gray" }, status) : null,
+    ...rowNodes
+  );
+}
+var h5, SCROLL_KEYS;
+var init_scrollable_text = __esm({
+  "src/screen/scrollable-text.js"() {
+    h5 = createElement2;
+    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 }
+    ];
+  }
+});
+
 // src/screen/utils.js
 function buildBreadcrumb(parts) {
   if (parts.length === 0) return "";
@@ -1027,7 +1229,7 @@ var init_footer_builder = __esm({
 // src/screen/index.js
 var screen_exports = {};
 __export(screen_exports, {
-  Box: () => Box4,
+  Box: () => Box5,
   Divider: () => Divider,
   FooterPresets: () => FooterPresets,
   GridCell: () => GridCell,
@@ -1043,15 +1245,20 @@ __export(screen_exports, {
   ScreenFooter: () => ScreenFooter,
   ScreenRow: () => ScreenRow,
   ScreenTitle: () => ScreenTitle,
-  Text: () => Text5,
+  ScrollableText: () => ScrollableText,
+  Text: () => Text6,
   TextBlock: () => TextBlock,
+  bindingIdentity: () => bindingIdentity,
+  bindingMatchesInput: () => bindingMatchesInput,
   buildBreadcrumb: () => buildBreadcrumb,
   buildDetailBreadcrumb: () => buildDetailBreadcrumb,
   buildFooter: () => buildFooter,
-  h: () => createElement2,
+  formatBindingKey: () => formatBindingKey,
+  h: () => createElement3,
   load: () => load,
   memo: () => memo,
   organizeFooterMessages: () => organizeFooterMessages,
+  scrollbarGlyphs: () => scrollbarGlyphs,
   showListScreen: () => showListScreen,
   showMenuScreen: () => showMenuScreen,
   showMultiColumnListScreen: () => showMultiColumnListScreen,
@@ -1059,15 +1266,16 @@ __export(screen_exports, {
   showScreen: () => showScreen,
   showWordGridScreen: () => showWordGridScreen,
   useCallback: () => useCallback,
-  useEffect: () => useEffect2,
+  useEffect: () => useEffect3,
   useInput: () => useInput2,
   useLayoutEffect: () => useLayoutEffect,
-  useMemo: () => useMemo,
-  useRef: () => useRef2,
-  useState: () => useState3
+  useMemo: () => useMemo2,
+  useRef: () => useRef3,
+  useState: () => useState4,
+  wrapTextLines: () => wrapTextLines
 });
-import React2, { useState as useState3, useEffect as useEffect2, useLayoutEffect, useRef as useRef2, useMemo, useCallback, memo, createElement as createElement2 } from "react";
-import { Box as Box4, Text as Text5, useInput as useInput2 } from "ink";
+import React2, { useState as useState4, useEffect as useEffect3, useLayoutEffect, useRef as useRef3, useMemo as useMemo2, useCallback, memo, createElement as createElement3 } from "react";
+import { Box as Box5, Text as Text6, useInput as useInput2 } from "ink";
 async function load() {
   if (loadPromise) return loadPromise;
   loadPromise = Promise.all([
@@ -1084,6 +1292,8 @@ var init_screen = __esm({
     init_list_components();
     init_components();
     init_ui_elements();
+    init_scrollable_text();
+    init_key_bindings();
     init_utils();
     init_footer_builder();
     loadPromise = null;