@nmakarov/cli-toolkit 0.67.0 → 0.69.0

package/dist/screen.cjs

@@ -29,7 +29,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/screen/index.js
 var screen_exports = {};
 __export(screen_exports, {
-  Box: () => import_ink5.Box,
+  Box: () => import_ink6.Box,
   Divider: () => Divider,
   FooterPresets: () => FooterPresets,
   GridCell: () => GridCell,
@@ -38,39 +38,45 @@ __export(screen_exports, {
   ListItem: () => ListItem,
   MultiColumnListComponent: () => MultiColumnListComponent,
   MultiColumnListWithPreviewComponent: () => MultiColumnListWithPreviewComponent,
-  React: () => import_react5.default,
+  React: () => import_react6.default,
   ScreenBody: () => ScreenBody,
   ScreenContainer: () => ScreenContainer,
   ScreenDivider: () => ScreenDivider,
   ScreenFooter: () => ScreenFooter,
   ScreenRow: () => ScreenRow,
   ScreenTitle: () => ScreenTitle,
-  Text: () => import_ink5.Text,
+  ScrollableText: () => ScrollableText,
+  Text: () => import_ink6.Text,
   TextBlock: () => TextBlock,
+  bindingIdentity: () => bindingIdentity,
+  bindingMatchesInput: () => bindingMatchesInput,
   buildBreadcrumb: () => buildBreadcrumb,
   buildDetailBreadcrumb: () => buildDetailBreadcrumb,
   buildFooter: () => buildFooter,
-  h: () => import_react5.createElement,
+  formatBindingKey: () => formatBindingKey,
+  h: () => import_react6.createElement,
   load: () => load,
-  memo: () => import_react5.memo,
+  memo: () => import_react6.memo,
   organizeFooterMessages: () => organizeFooterMessages,
+  scrollbarGlyphs: () => scrollbarGlyphs,
   showListScreen: () => showListScreen,
   showMenuScreen: () => showMenuScreen,
   showMultiColumnListScreen: () => showMultiColumnListScreen,
   showMultiColumnListWithPreviewScreen: () => showMultiColumnListWithPreviewScreen,
   showScreen: () => showScreen,
   showWordGridScreen: () => showWordGridScreen,
-  useCallback: () => import_react5.useCallback,
-  useEffect: () => import_react5.useEffect,
-  useInput: () => import_ink5.useInput,
-  useLayoutEffect: () => import_react5.useLayoutEffect,
-  useMemo: () => import_react5.useMemo,
-  useRef: () => import_react5.useRef,
-  useState: () => import_react5.useState
+  useCallback: () => import_react6.useCallback,
+  useEffect: () => import_react6.useEffect,
+  useInput: () => import_ink6.useInput,
+  useLayoutEffect: () => import_react6.useLayoutEffect,
+  useMemo: () => import_react6.useMemo,
+  useRef: () => import_react6.useRef,
+  useState: () => import_react6.useState,
+  wrapTextLines: () => wrapTextLines
 });
 module.exports = __toCommonJS(screen_exports);
-var import_react5 = null; // Will be set by load();
-var import_ink5 = null; // Will be set by load();
+var import_react6 = null; // Will be set by load();
+var import_ink6 = null; // Will be set by load();
 
 // src/screen/screens.js
 var import_react3 = null; // Will be set by load();
@@ -529,6 +535,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 = {};
@@ -542,7 +596,7 @@ function groupKeyBindings(bindings) {
         order: binding.order || 999
       };
     }
-    groups[caption].keys.push(binding.key);
+    groups[caption].keys.push(formatBindingKey(binding));
   });
   return Object.values(groups);
 }
@@ -582,12 +636,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("/");
 }
@@ -627,7 +683,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) {
@@ -651,7 +710,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],
@@ -659,11 +721,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);
@@ -704,24 +768,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]({
@@ -935,6 +986,155 @@ function InputField({ prompt, value, onChange: _onChange, onSubmit: _onSubmit })
   );
 }
 
+// src/screen/scrollable-text.js
+var import_react5 = null; // Will be set by load();
+var import_ink5 = null; // Will be set by load();
+// Removed: intermediate assignment - code will access import variable directly
+var BAR_THUMB = "#";
+var BAR_TRACK = "|";
+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 ? BAR_THUMB : BAR_TRACK);
+  }
+  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] = (0, import_react5.useState)(0);
+  const [, bump] = (0, import_react5.useState)(0);
+  const termRows = process.stdout.rows || 24;
+  const viewportRows = Math.max(
+    4,
+    maxHeight != null ? Math.floor(maxHeight) : Math.max(8, termRows - 8)
+  );
+  const contentCols = Math.max(20, getScreenWidth() - 4);
+  const barCols = showScrollbar ? 1 : 0;
+  const textWidth = Math.max(8, contentCols - barCols);
+  const allLines = (0, import_react5.useMemo)(() => {
+    if (Array.isArray(linesProp)) return linesProp.map((l) => String(l ?? ""));
+    return wrap ? wrapTextLines(text, textWidth) : String(text ?? "").split("\n");
+  }, [linesProp, text, wrap, textWidth]);
+  const needsBar = showScrollbar && allLines.length > viewportRows;
+  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;
+  (0, import_react5.useEffect)(() => {
+    setScrollTop((s) => Math.min(s, maxScroll));
+  }, [maxScroll]);
+  const maxScrollRef = (0, import_react5.useRef)(maxScroll);
+  const pageSizeRef = (0, import_react5.useRef)(viewportRows);
+  maxScrollRef.current = maxScroll;
+  pageSizeRef.current = viewportRows;
+  (0, import_react5.useEffect)(() => {
+    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] ?? BAR_TRACK : showScrollbar ? " " : "";
+    const isThumb = glyph === BAR_THUMB;
+    return h5(
+      import_ink5.Text,
+      { key: `L${clamped + i}` },
+      body,
+      glyph ? h5(import_ink5.Text, { 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(
+          import_ink5.Text,
+          { key: `pad${i}` },
+          padEndVisible("", textWidth),
+          h5(import_ink5.Text, { color: glyph === BAR_THUMB ? "cyan" : "gray" }, glyph)
+        )
+      );
+    }
+  }
+  return h5(
+    import_ink5.Box,
+    { flexDirection: "column" },
+    header == null ? null : typeof header === "string" ? h5(import_ink5.Text, { color: "gray" }, header) : header,
+    showStatus ? h5(import_ink5.Text, { color: "gray" }, status) : null,
+    ...rowNodes
+  );
+}
+
 // src/screen/utils.js
 function buildBreadcrumb(parts) {
   if (parts.length === 0) return "";
@@ -1060,18 +1260,20 @@ async function load() {
   if (loadPromise) return loadPromise;
     var reactMod = await import("react");
     __esmCache["react"] = reactMod;
-    import_react5 = __toESM(reactMod, 1);
+    import_react6 = __toESM(reactMod, 1);
     import_react3 = reactMod;
     import_react = reactMod;
     import_react2 = __toESM(reactMod, 1);
     import_react4 = reactMod;
+    import_react5 = reactMod;
     var inkMod = await import("ink");
     __esmCache["ink"] = inkMod;
-    import_ink5 = inkMod;
+    import_ink6 = inkMod;
     import_ink3 = inkMod;
     import_ink = inkMod;
     import_ink2 = inkMod;
     import_ink4 = inkMod;
+    import_ink5 = inkMod;
   loadPromise = Promise.resolve();
   return loadPromise;
 }
@@ -1097,15 +1299,20 @@ if (typeof window === "undefined") {
   ScreenFooter,
   ScreenRow,
   ScreenTitle,
+  ScrollableText,
   Text,
   TextBlock,
+  bindingIdentity,
+  bindingMatchesInput,
   buildBreadcrumb,
   buildDetailBreadcrumb,
   buildFooter,
+  formatBindingKey,
   h,
   load,
   memo,
   organizeFooterMessages,
+  scrollbarGlyphs,
   showListScreen,
   showMenuScreen,
   showMultiColumnListScreen,
@@ -1118,6 +1325,7 @@ if (typeof window === "undefined") {
   useLayoutEffect,
   useMemo,
   useRef,
-  useState
+  useState,
+  wrapTextLines
 });
 //# sourceMappingURL=screen.cjs.map