@nmakarov/cli-toolkit 0.67.0 → 0.68.0

package/dist/screen.js

@@ -1,6 +1,6 @@
 // src/screen/index.js
-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";
 
 // src/screen/screens.js
 import { useState as useState2, createElement as h3 } from "react";
@@ -459,6 +459,54 @@ function ListComponent({ items, ctx, selectedIndexRef, renderItem, getTitle, sor
   );
 }
 
+// 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;
+}
+var KEY_LABELS = {
+  escape: "esc",
+  leftArrow: "\u2190",
+  rightArrow: "\u2192",
+  upArrow: "\u2191",
+  downArrow: "\u2193",
+  return: "enter",
+  pageUp: "PgUp",
+  pageDown: "PgDn"
+};
+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;
+}
+
 // src/screen/screens.js
 function groupKeyBindings(bindings) {
   const groups = {};
@@ -472,7 +520,7 @@ function groupKeyBindings(bindings) {
         order: binding.order || 999
       };
     }
-    groups[caption].keys.push(binding.key);
+    groups[caption].keys.push(formatBindingKey(binding));
   });
   return Object.values(groups);
 }
@@ -512,12 +560,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("/");
 }
@@ -557,7 +607,10 @@ async function showScreen(config) {
         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) {
@@ -581,7 +634,10 @@ async function showScreen(config) {
           });
         },
         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],
@@ -589,11 +645,13 @@ async function showScreen(config) {
             };
           }
         },
-        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);
@@ -634,24 +692,11 @@ async function showScreen(config) {
         }
         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]({
@@ -865,6 +910,152 @@ function InputField({ prompt, value, onChange: _onChange, onSubmit: _onSubmit })
   );
 }
 
+// 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";
+var h5 = createElement2;
+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);
+}
+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 }
+];
+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
+  );
+}
+
 // src/screen/utils.js
 function buildBreadcrumb(parts) {
   if (parts.length === 0) return "";
@@ -1000,7 +1191,7 @@ if (typeof window === "undefined") {
   });
 }
 export {
-  Box4 as Box,
+  Box5 as Box,
   Divider,
   FooterPresets,
   GridCell,
@@ -1016,15 +1207,20 @@ export {
   ScreenFooter,
   ScreenRow,
   ScreenTitle,
-  Text5 as Text,
+  ScrollableText,
+  Text6 as Text,
   TextBlock,
+  bindingIdentity,
+  bindingMatchesInput,
   buildBreadcrumb,
   buildDetailBreadcrumb,
   buildFooter,
-  createElement2 as h,
+  formatBindingKey,
+  createElement3 as h,
   load,
   memo,
   organizeFooterMessages,
+  scrollbarGlyphs,
   showListScreen,
   showMenuScreen,
   showMultiColumnListScreen,
@@ -1032,11 +1228,12 @@ export {
   showScreen,
   showWordGridScreen,
   useCallback,
-  useEffect2 as useEffect,
+  useEffect3 as useEffect,
   useInput2 as useInput,
   useLayoutEffect,
-  useMemo,
-  useRef2 as useRef,
-  useState3 as useState
+  useMemo2 as useMemo,
+  useRef3 as useRef,
+  useState4 as useState,
+  wrapTextLines
 };
 //# sourceMappingURL=screen.js.map