@nmakarov/cli-toolkit 0.81.0 → 0.84.0

package/dist/index.cjs

@@ -634,23 +634,23 @@ function formatKeyBindings(bindings, mode = "long") {
   })));
   groups.sort((a, b) => a.order - b.order);
   const items = [];
-  groups.forEach((group) => {
+  groups.forEach((group, groupIndex) => {
     const bindingWithCustom = resolvedBindings.find(
-      (b) => group.keys.includes(b.key) && typeof b.resolvedCaption !== "string"
+      (b) => group.keys.includes(formatBindingKey(b)) && typeof b.resolvedCaption !== "string"
     );
     if (bindingWithCustom && bindingWithCustom.resolvedCaption) {
       items.push(bindingWithCustom.resolvedCaption);
     } else {
-      const keyStr = formatKeys(group.keys);
-      if (mode === "long") {
-        items.push(`${keyStr} to ${group.caption}`);
-      } else {
-        items.push(keyStr);
-      }
+      items.push(formatFooterHotkey(formatKeys(group.keys), group.caption, mode, `kb-${groupIndex}`));
     }
   });
   return items;
 }
+function formatFooterHotkey(keyStr, caption = "", mode = "long", reactKey = "hotkey") {
+  const keyNode = (0, import_react3.createElement)(import_ink3.Text, { key: `${reactKey}-key`, ...FOOTER_HOTKEY_STYLE }, keyStr);
+  if (mode !== "long" || !caption) return keyNode;
+  return (0, import_react3.createElement)(import_ink3.Text, { key: reactKey, dimColor: true, color: "white" }, keyNode, ` to ${caption}`);
+}
 function formatKeys(keys) {
   const keyMap = {
     escape: "esc",
@@ -920,7 +920,7 @@ async function showMultiColumnListWithPreviewScreen(config2) {
     }
   });
 }
-var import_react3, import_ink3, showMenuScreen, showWordGridScreen;
+var import_react3, import_ink3, FOOTER_HOTKEY_STYLE, showMenuScreen, showWordGridScreen;
 var init_screens = __esm({
   "src/screen/screens.js"() {
     import_react3 = require("react");
@@ -928,6 +928,7 @@ var init_screens = __esm({
     init_components();
     init_list_components();
     init_key_bindings();
+    FOOTER_HOTKEY_STYLE = { bold: true, color: "white", dimColor: false };
     showMenuScreen = showListScreen;
     showWordGridScreen = showMultiColumnListScreen;
   }
@@ -1042,7 +1043,44 @@ var init_follow_scroll = __esm({
   }
 });
 
-// src/screen/scrollable-text.js
+// src/screen/visible-text.js
+function stripAnsi(text) {
+  return String(text ?? "").replace(ANSI_RE, "");
+}
+function visibleWidth(text) {
+  return [...stripAnsi(text)].length;
+}
+function sliceVisible(text, cols) {
+  const w = Math.max(0, Math.floor(Number(cols) || 0));
+  const s = String(text ?? "");
+  if (w === 0) return "";
+  let vis = 0;
+  let out = "";
+  let i = 0;
+  while (i < s.length && vis < w) {
+    ANSI_RE.lastIndex = i;
+    const m = ANSI_RE.exec(s);
+    if (m && m.index === i) {
+      out += m[0];
+      i += m[0].length;
+      continue;
+    }
+    const cp3 = s.codePointAt(i);
+    const ch = String.fromCodePoint(cp3);
+    out += ch;
+    i += ch.length;
+    vis += 1;
+  }
+  return out;
+}
+function padEndVisible(text, cols) {
+  const w = Math.max(0, Math.floor(Number(cols) || 0));
+  const s = String(text ?? "");
+  const vis = visibleWidth(s);
+  if (vis === w) return s;
+  if (vis > w) return sliceVisible(s, w);
+  return s + " ".repeat(w - vis);
+}
 function wrapTextLines(text, cols) {
   const w = Math.max(1, Math.floor(Number(cols) || 1));
   const out = [];
@@ -1051,20 +1089,28 @@ function wrapTextLines(text, cols) {
       out.push("");
       continue;
     }
+    if (visibleWidth(raw) <= w) {
+      out.push(raw);
+      continue;
+    }
     let rest = raw;
-    while (rest.length > w) {
-      out.push(rest.slice(0, w));
-      rest = rest.slice(w);
+    while (visibleWidth(rest) > w) {
+      const head = sliceVisible(rest, w);
+      out.push(head);
+      rest = rest.slice(head.length);
     }
     if (rest.length > 0) out.push(rest);
   }
   return out;
 }
-function padEndVisible(s, w) {
-  const t = String(s ?? "");
-  if (t.length >= w) return t.slice(0, w);
-  return t + " ".repeat(w - t.length);
-}
+var ANSI_RE;
+var init_visible_text = __esm({
+  "src/screen/visible-text.js"() {
+    ANSI_RE = /\u001b(?:[@-Z\\-_]|\[[0-?]*[ -/]*[@-~])/g;
+  }
+});
+
+// src/screen/scrollable-text.js
 function ScrollableText({
   ctx,
   text = "",
@@ -1132,14 +1178,17 @@ function ScrollableText({
   }, [ctx, bindKeys, followBottom]);
   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" : "") + (followBottom && following ? " \xB7 follow" : followBottom ? " \xB7 follow off" : "");
   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
+      import_ink5.Box,
+      { key: `L${clamped + i}`, flexDirection: "row", width: contentCols, flexShrink: 0 },
+      h5(
+        import_ink5.Box,
+        { width: textWidth, flexShrink: 0 },
+        h5(import_ink5.Text, { wrap: "truncate" }, padEndVisible(line, textWidth))
+      ),
+      showScrollbar ? h5(import_ink5.Box, { width: 1, flexShrink: 0 }, h5(import_ink5.Text, { color: isThumb ? "cyan" : "gray" }, glyph)) : null
     );
   });
   if (bar && visible.length < viewportRows) {
@@ -1147,10 +1196,10 @@ function ScrollableText({
       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)
+          import_ink5.Box,
+          { key: `pad${i}`, flexDirection: "row", width: contentCols, flexShrink: 0 },
+          h5(import_ink5.Box, { width: textWidth, flexShrink: 0 }, h5(import_ink5.Text, {}, padEndVisible("", textWidth))),
+          h5(import_ink5.Box, { width: 1, flexShrink: 0 }, h5(import_ink5.Text, { color: glyph === BAR_THUMB ? "cyan" : "gray" }, glyph))
         )
       );
     }
@@ -1171,7 +1220,9 @@ var init_scrollable_text = __esm({
     init_components();
     init_scrollbar();
     init_follow_scroll();
+    init_visible_text();
     init_scrollbar();
+    init_visible_text();
     h5 = import_react5.createElement;
     SCROLL_KEYS = [
       { key: "upArrow", caption: "scroll", action: "scrollUp", order: 0 },
@@ -1326,6 +1377,7 @@ var init_screen = __esm({
     init_components();
     init_ui_elements();
     init_scrollable_text();
+    init_visible_text();
     init_follow_scroll();
     init_scrollbar();
     init_key_bindings();
@@ -1351,6 +1403,7 @@ __export(src_exports, {
   DEFAULT_RUNTIME_PARAM_SPECS: () => DEFAULT_RUNTIME_PARAM_SPECS,
   Db: () => Db,
   Divider: () => Divider,
+  FOOTER_HOTKEY_STYLE: () => FOOTER_HOTKEY_STYLE,
   FileDatabase: () => FileDatabase,
   FileDatabaseError: () => FileDatabaseError,
   FooterPresets: () => FooterPresets,
@@ -1435,6 +1488,7 @@ __export(src_exports, {
   ensureTasksRuntime: () => ensureTasksRuntime,
   flushTaskIpcLogs: () => flushTaskIpcLogs,
   formatBindingKey: () => formatBindingKey,
+  formatFooterHotkey: () => formatFooterHotkey,
   getArgsInstance: () => getArgsInstance,
   getPm2Process: () => getPm2Process,
   h: () => import_react6.createElement,
@@ -1465,6 +1519,7 @@ __export(src_exports, {
   npmEnv: () => npmEnv,
   npmInstallEnv: () => npmInstallEnv,
   organizeFooterMessages: () => organizeFooterMessages,
+  padEndVisible: () => padEndVisible,
   parseGitHost: () => parseGitHost,
   parsePm2Jlist: () => parsePm2Jlist,
   prepareGitHost: () => prepareGitHost,
@@ -1510,9 +1565,11 @@ __export(src_exports, {
   showMultiColumnListWithPreviewScreen: () => showMultiColumnListWithPreviewScreen,
   showScreen: () => showScreen,
   showWordGridScreen: () => showWordGridScreen,
+  sliceVisible: () => sliceVisible,
   sshRun: () => sshRun,
   startPm2: () => startPm2,
   stopPm2: () => stopPm2,
+  stripAnsi: () => stripAnsi,
   syncEnv: () => syncEnv,
   taskHistoryInsertFromQueueRow: () => taskHistoryInsertFromQueueRow,
   timeMatcher: () => timeMatcher,
@@ -1529,6 +1586,7 @@ __export(src_exports, {
   useMemo: () => import_react6.useMemo,
   useRef: () => import_react6.useRef,
   useState: () => import_react6.useState,
+  visibleWidth: () => visibleWidth,
   waitForTaskResult: () => waitForTaskResult,
   waitPm2: () => waitPm2,
   wrapTextLines: () => wrapTextLines,
@@ -10329,6 +10387,7 @@ var TasksManager = class _TasksManager {
   DEFAULT_RUNTIME_PARAM_SPECS,
   Db,
   Divider,
+  FOOTER_HOTKEY_STYLE,
   FileDatabase,
   FileDatabaseError,
   FooterPresets,
@@ -10413,6 +10472,7 @@ var TasksManager = class _TasksManager {
   ensureTasksRuntime,
   flushTaskIpcLogs,
   formatBindingKey,
+  formatFooterHotkey,
   getArgsInstance,
   getPm2Process,
   h,
@@ -10443,6 +10503,7 @@ var TasksManager = class _TasksManager {
   npmEnv,
   npmInstallEnv,
   organizeFooterMessages,
+  padEndVisible,
   parseGitHost,
   parsePm2Jlist,
   prepareGitHost,
@@ -10488,9 +10549,11 @@ var TasksManager = class _TasksManager {
   showMultiColumnListWithPreviewScreen,
   showScreen,
   showWordGridScreen,
+  sliceVisible,
   sshRun,
   startPm2,
   stopPm2,
+  stripAnsi,
   syncEnv,
   taskHistoryInsertFromQueueRow,
   timeMatcher,
@@ -10507,6 +10570,7 @@ var TasksManager = class _TasksManager {
   useMemo,
   useRef,
   useState,
+  visibleWidth,
   waitForTaskResult,
   waitPm2,
   wrapTextLines,