@olenbetong/appframe-cli 4.3.1 → 4.4.0

package/cli/editor/TransactionsPreviewDialog.js

@@ -1,116 +1,178 @@
 "use strict";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Box, Text, useInput } from "ink";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { transactionStatusLabels } from "@olenbetong/appframe-updater";
+import { Box, Text } from "ink";
+import { useMemo } from "react";
 import { FullScreenBox } from "./FullScreenBox.js";
+import { STATUS_DIRTY_INDICATOR } from "./tableFormatting.js";
+import { useCommand } from "./useCommand.js";
 import { useScreenSize } from "./useScreenSize.js";
-function formatPreviewValue(value) {
-  if (typeof value === "string") {
-    let lines = value.split(/\r?\n/);
-    return lines.length > 0 ? lines : [""];
-  }
-  if (value && typeof value === "object") {
-    try {
-      let serialized = JSON.stringify(value, null, 2);
-      if (serialized) {
-        return serialized.split("\n");
-      }
-    } catch {
-    }
-  }
-  if (value === null) {
-    return ["null"];
+import { useScrollableText } from "./useScrollableText.js";
+import { useTransactionEdits } from "./useTransactionEdits.js";
+import { useTransactions } from "./useTransactions.js";
+import { useTransactionText } from "./useTransactionText.js";
+import { useVirtualText } from "./useVirtualText.js";
+const PREVIEW_SAVE_SHORTCUTS = ["ctrl+s", "meta+s"];
+const NO_TRANSACTION_FILTER = "1 = 0";
+function escapePrimKey(primKey) {
+  return primKey.replace(/'/g, "''");
+}
+function createPrimKeyFilter(primKey) {
+  if (!primKey) {
+    return NO_TRANSACTION_FILTER;
   }
-  return [String(value)];
+  return `PrimKey = '${escapePrimKey(primKey)}'`;
 }
-export function TransactionsPreviewDialog({ record, frameWidth }) {
-  let previewEntries = useMemo(
-    () => Object.entries(record).filter(([key]) => key !== "PrimKey").map(([key, value]) => ({ key, lines: formatPreviewValue(value) })),
-    [record]
-  );
-  let maxKeyLength = useMemo(
-    () => previewEntries.reduce((max, entry) => Math.max(max, entry.key.length), 0),
-    [previewEntries]
+function Shortcut({ keyboard, command }) {
+  return /* @__PURE__ */ jsxs(Text, { children: [
+    "[",
+    keyboard,
+    "] ",
+    command
+  ] });
+}
+export function TransactionsPreviewDialog({
+  server,
+  namespace,
+  frameWidth,
+  focusedPrimKey,
+  focusNext,
+  focusPrevious
+}) {
+  let transactionFilter = useMemo(() => createPrimKeyFilter(focusedPrimKey), [focusedPrimKey]);
+  let { loading, error, refresh, normalizedTransactions, transactionMap } = useTransactions({
+    server,
+    namespace,
+    filter: transactionFilter
+  });
+  let selectedPrimKeys = useMemo(
+    () => focusedPrimKey ? /* @__PURE__ */ new Set([focusedPrimKey]) : /* @__PURE__ */ new Set(),
+    [focusedPrimKey]
   );
-  let previewItems = useMemo(() => {
-    if (previewEntries.length === 0) {
-      return [];
+  let { pendingStatuses, cycleStatus, save } = useTransactionEdits({
+    normalizedTransactions,
+    transactionRecordMap: transactionMap,
+    selectedPrimKeys,
+    server,
+    refresh
+  });
+  let record = focusedPrimKey ? transactionMap.get(focusedPrimKey) : void 0;
+  let pendingStatus = focusedPrimKey ? pendingStatuses[focusedPrimKey] : void 0;
+  let statusPreviewValue = useMemo(() => {
+    if (!record) {
+      return "";
+    }
+    let originalStatus = record.Status;
+    let numericOriginal = typeof originalStatus === "number" ? originalStatus : typeof originalStatus === "string" ? Number(originalStatus) : null;
+    let baseText;
+    if (pendingStatus !== void 0) {
+      baseText = String(pendingStatus);
+    } else if (originalStatus === null) {
+      baseText = "null";
+    } else if (originalStatus === void 0) {
+      baseText = "";
+    } else {
+      baseText = String(originalStatus);
     }
-    let items = [];
-    previewEntries.forEach((entry, entryIndex) => {
-      entry.lines.forEach((line, lineIndex) => {
-        items.push({
-          type: "line",
-          key: `${entry.key}-${lineIndex}`,
-          entryKey: entry.key,
-          line,
-          lineIndex
-        });
-      });
-      if (entryIndex < previewEntries.length - 1) {
-        items.push({ type: "spacer", key: `${entry.key}-spacer` });
+    let labelSource = null;
+    if (pendingStatus !== void 0) {
+      labelSource = pendingStatus;
+    } else if (numericOriginal !== null && Number.isFinite(numericOriginal)) {
+      labelSource = numericOriginal;
+    }
+    if (labelSource !== null) {
+      let label = transactionStatusLabels[labelSource];
+      if (label) {
+        baseText = baseText.length > 0 ? `${baseText} (${label})` : `(${label})`;
       }
-    });
-    return items;
-  }, [previewEntries]);
-  let rawKeyColumnWidth = Math.max(maxKeyLength, 1);
-  let availableDialogWidth = Math.max(frameWidth - 4, 1);
-  let dialogWidth = Math.min(Math.max(rawKeyColumnWidth + 80, 10), availableDialogWidth);
-  let keyColumnWidth = Math.min(rawKeyColumnWidth, Math.max(dialogWidth - 4, 1));
+    }
+    let isDirty = false;
+    if (pendingStatus !== void 0) {
+      isDirty = numericOriginal === null || !Number.isFinite(numericOriginal) || pendingStatus !== numericOriginal;
+    }
+    if (isDirty) {
+      baseText = `${baseText}${STATUS_DIRTY_INDICATOR}`;
+    }
+    return baseText;
+  }, [pendingStatus, record]);
+  let { text: transactionText, dialogWidth } = useTransactionText({
+    transaction: record,
+    statusPreviewValue,
+    frameWidth
+  });
   let { height: screenHeight } = useScreenSize();
-  let headerLineCount = 3 + (record.Name ? 1 : 0);
+  let headerLineCount = 3 + (record?.Name ? 1 : 0);
   let marginLines = 1;
-  let nonContentLines = headerLineCount + marginLines;
-  let contentLineCount = previewItems.length > 0 ? previewItems.length : 1;
-  let naturalDialogHeight = nonContentLines + contentLineCount;
-  let maxDialogHeight = Math.max(screenHeight - 4, nonContentLines + 1);
-  maxDialogHeight = Math.min(maxDialogHeight, Math.max(screenHeight - 2, 1));
-  let dialogHeight = Math.min(naturalDialogHeight, maxDialogHeight);
-  let contentHeight = Math.max(dialogHeight - nonContentLines, 1);
-  let [scrollOffset, setScrollOffset] = useState(0);
+  let baseNonContentLines = headerLineCount + marginLines;
+  let contentLineCount = transactionText.length > 0 ? transactionText.length : 1;
+  let computeLayout = (extraNonContentLines) => {
+    let nonContentLines = baseNonContentLines + extraNonContentLines;
+    let naturalDialogHeight = nonContentLines + contentLineCount;
+    let maxDialogHeight = Math.max(screenHeight - 4, nonContentLines + 1);
+    maxDialogHeight = Math.min(maxDialogHeight, Math.max(screenHeight - 2, 1));
+    let dialogHeightValue = Math.min(naturalDialogHeight, maxDialogHeight);
+    let contentHeightValue = Math.max(dialogHeightValue - nonContentLines, 1);
+    return { dialogHeight: dialogHeightValue, contentHeight: contentHeightValue, nonContentLines };
+  };
+  let { dialogHeight, contentHeight } = computeLayout(0);
+  let showScrollSummary = record && transactionText.length > contentHeight;
+  if (showScrollSummary) {
+    ({ dialogHeight, contentHeight } = computeLayout(2));
+  }
   let previewSignature = useMemo(
-    () => previewItems.map((item) => item.type === "spacer" ? item.key : `${item.key}:${item.line}`).join("|"),
-    [previewItems]
+    () => `${focusedPrimKey ?? ""}|${transactionText.join("|")}`,
+    [focusedPrimKey, transactionText]
   );
-  let lastPreviewSignatureRef = useRef(previewSignature);
-  useEffect(() => {
-    if (lastPreviewSignatureRef.current !== previewSignature) {
-      lastPreviewSignatureRef.current = previewSignature;
-      setScrollOffset(0);
-    }
-  }, [previewSignature]);
-  let totalItems = previewItems.length;
-  let maxScrollOffset = Math.max((totalItems || 1) - contentHeight, 0);
-  useEffect(() => {
-    setScrollOffset((offset) => Math.min(offset, maxScrollOffset));
-  }, [maxScrollOffset]);
-  useInput(
-    (_, key) => {
-      if (key.upArrow) {
-        setScrollOffset((offset) => Math.max(offset - 1, 0));
-        return;
-      }
-      if (key.downArrow) {
-        setScrollOffset((offset) => Math.min(offset + 1, maxScrollOffset));
-        return;
+  let { scrollOffset } = useScrollableText({
+    textLength: transactionText.length,
+    viewportHeight: contentHeight,
+    signature: previewSignature
+  });
+  let { visibleText, totalLines, offset } = useVirtualText({
+    text: transactionText,
+    viewportHeight: contentHeight,
+    scrollOffset
+  });
+  useCommand("left", focusPrevious, true);
+  useCommand("right", focusNext, true);
+  useCommand(
+    PREVIEW_SAVE_SHORTCUTS,
+    () => {
+      if (focusedPrimKey) {
+        save({ primKey: focusedPrimKey });
       }
-      if (key.pageUp) {
-        setScrollOffset((offset) => Math.max(offset - Math.max(contentHeight - 1, 1), 0));
-        return;
-      }
-      if (key.pageDown) {
-        setScrollOffset((offset) => Math.min(offset + Math.max(contentHeight - 1, 1), maxScrollOffset));
-        return;
+    },
+    focusedPrimKey !== null
+  );
+  useCommand(
+    "s",
+    () => {
+      if (focusedPrimKey) {
+        cycleStatus(focusedPrimKey, { exclusive: true });
       }
     },
-    { isActive: previewItems.length > contentHeight }
+    focusedPrimKey !== null
   );
-  let visibleItems = previewItems.slice(scrollOffset, scrollOffset + contentHeight);
   let summaryText = useMemo(() => {
-    let start = scrollOffset + 1;
-    let end = Math.min(scrollOffset + contentHeight, previewItems.length);
-    return `Showing ${start}\u2013${end} of ${previewItems.length}`;
-  }, [contentHeight, previewItems.length, scrollOffset]);
+    if (totalLines === 0) {
+      return "";
+    }
+    let start = offset + 1;
+    let end = Math.min(offset + contentHeight, totalLines);
+    return `Showing ${start}\u2013${end} of ${totalLines}`;
+  }, [contentHeight, offset, totalLines]);
+  let bodyContent;
+  if (!focusedPrimKey) {
+    bodyContent = /* @__PURE__ */ jsx(Text, { color: "gray", children: "No transaction selected." });
+  } else if (error) {
+    bodyContent = /* @__PURE__ */ jsx(Text, { color: "red", children: error.message });
+  } else if (!record) {
+    bodyContent = loading ? /* @__PURE__ */ jsx(Text, { color: "gray", children: "Loading transaction\u2026" }) : /* @__PURE__ */ jsx(Text, { color: "yellow", children: "Transaction not found." });
+  } else if (transactionText.length === 0) {
+    bodyContent = /* @__PURE__ */ jsx(Text, { color: "gray", children: "No data available." });
+  } else {
+    bodyContent = visibleText.map((line, index) => /* @__PURE__ */ jsx(Text, { children: line.length > 0 ? line : " " }, `${offset + index}`));
+  }
   return /* @__PURE__ */ jsx(FullScreenBox, { position: "absolute", justifyContent: "center", alignItems: "center", children: /* @__PURE__ */ jsxs(
     Box,
     {
@@ -123,15 +185,24 @@ export function TransactionsPreviewDialog({ record, frameWidth }) {
       backgroundColor: "black",
       children: [
         /* @__PURE__ */ jsx(Text, { bold: true, children: "Transaction preview" }),
-        record.Name ? /* @__PURE__ */ jsx(Text, { children: record.Name }) : null,
-        /* @__PURE__ */ jsx(Text, { color: "gray", children: "Press Escape to close. Use \u2191/\u2193 or PgUp/PgDn to scroll." }),
-        /* @__PURE__ */ jsx(Box, { marginTop: 1, flexDirection: "column", height: contentHeight, children: previewEntries.length === 0 ? /* @__PURE__ */ jsx(Text, { color: "gray", children: "No data available." }) : visibleItems.map(
-          (item) => item.type === "spacer" ? /* @__PURE__ */ jsx(Text, { children: " " }, item.key) : /* @__PURE__ */ jsxs(Box, { flexDirection: "row", alignItems: "flex-start", children: [
-            /* @__PURE__ */ jsx(Box, { width: keyColumnWidth, marginRight: 1, flexShrink: 0, children: /* @__PURE__ */ jsx(Text, { bold: item.lineIndex === 0, wrap: "truncate-end", children: item.lineIndex === 0 ? item.entryKey.padEnd(keyColumnWidth) : "" }) }),
-            /* @__PURE__ */ jsx(Box, { flexGrow: 1, flexShrink: 1, children: /* @__PURE__ */ jsx(Text, { wrap: "wrap", children: item.line }) })
-          ] }, item.key)
-        ) }),
-        previewEntries.length > 0 && previewItems.length > contentHeight ? /* @__PURE__ */ jsx(Text, { color: "gray", children: summaryText }) : null
+        record?.Name ? /* @__PURE__ */ jsx(Text, { children: record.Name }) : null,
+        /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+          /* @__PURE__ */ jsx(Shortcut, { keyboard: "esc", command: "Close preview" }),
+          " \xB7 ",
+          /* @__PURE__ */ jsx(Shortcut, { keyboard: "\u2190/\u2192", command: "Change focus" }),
+          " \xB7",
+          " ",
+          /* @__PURE__ */ jsx(Shortcut, { keyboard: "\u2191/\u2193", command: "Scroll" }),
+          " \xB7 ",
+          /* @__PURE__ */ jsx(Shortcut, { keyboard: "PgUp/PgDn", command: "Scroll faster" }),
+          " \xB7",
+          " ",
+          /* @__PURE__ */ jsx(Shortcut, { keyboard: "s", command: "Cycle status" }),
+          " \xB7 ",
+          /* @__PURE__ */ jsx(Shortcut, { keyboard: "Ctrl+S", command: "Save" })
+        ] }),
+        /* @__PURE__ */ jsx(Box, { marginTop: 1, flexDirection: "column", height: contentHeight, children: bodyContent }),
+        showScrollSummary ? /* @__PURE__ */ jsx(Box, { marginTop: 1, flexDirection: "column", children: /* @__PURE__ */ jsx(Text, { color: "gray", children: summaryText }) }) : null
       ]
     }
   ) });

package/cli/editor/tableFormatting.js

@@ -9,7 +9,6 @@ const STATUS_COLUMN_MIN_WIDTH = (() => {
   let longest = labels.reduce((max, label) => Math.max(max, label.length), 0);
   return Math.max("Status".length, longest + STATUS_DIRTY_INDICATOR.length);
 })();
-export const ERROR_COLUMN_MAX_LINES = 5;
 export function sanitizeCellValue(value) {
   let s = String(value ?? "");
   s = s.replace(/[\r\n]+/g, " ").replace(/\t/g, " ");
@@ -28,55 +27,6 @@ export function truncateCellValue(value, width) {
   }
   return `${value.slice(0, width - 1)}\u2026`;
 }
-export function wrapCellValue(value, width, maxLines) {
-  if (width <= 0 || maxLines <= 0) {
-    return [];
-  }
-  let sanitized = sanitizeCellValue(value);
-  if (sanitized.length === 0) {
-    return ["".padEnd(width, " ")];
-  }
-  let remaining = sanitized;
-  let lines = [];
-  while (remaining.length > 0 && lines.length < maxLines) {
-    if (remaining.length <= width) {
-      lines.push(remaining.padEnd(width, " "));
-      remaining = "";
-      break;
-    }
-    let sliceEnd = Math.min(width, remaining.length);
-    let breakIndex = remaining.lastIndexOf(" ", sliceEnd);
-    if (breakIndex <= 0) {
-      breakIndex = sliceEnd;
-    }
-    let chunk = remaining.slice(0, breakIndex).trimEnd();
-    if (chunk.length === 0) {
-      chunk = remaining.slice(0, width);
-      breakIndex = chunk.length;
-    }
-    lines.push(chunk.padEnd(width, " "));
-    remaining = remaining.slice(breakIndex).trimStart();
-  }
-  if (remaining.length > 0) {
-    let ellipsisLine;
-    if (lines.length === 0) {
-      let truncated = remaining.slice(0, Math.max(width - 1, 0));
-      ellipsisLine = `${truncated}${width > 0 ? "\u2026" : ""}`;
-    } else {
-      let last = lines.pop() ?? "";
-      let trimmed = last.trimEnd();
-      if (trimmed.length >= width) {
-        trimmed = trimmed.slice(0, Math.max(width - 1, 0));
-      }
-      ellipsisLine = `${trimmed}${width > 0 ? "\u2026" : ""}`;
-    }
-    lines.push(ellipsisLine.padEnd(width, " "));
-  }
-  if (lines.length === 0) {
-    lines.push("".padEnd(width, " "));
-  }
-  return lines;
-}
 export function calculateColumnWidths({
   columns,
   rows,
@@ -156,35 +106,16 @@ export function formatRowLines({
   widths,
   separator = DEFAULT_TABLE_SEPARATOR
 }) {
-  let columnLines = columns.map((column, index) => {
+  let parts = columns.map((column, index) => {
     let width = widths[index];
-    if (column.wrap) {
-      let maxLines = column.maxWrapLines ?? 1;
-      return wrapCellValue(String(row[column.key] ?? ""), width, maxLines);
-    }
     let value = sanitizeCellValue(row[column.key]);
-    return [truncateCellValue(value, width)];
+    return truncateCellValue(value, width);
   });
-  let height = columnLines.reduce((max, lines2) => Math.max(max, lines2.length), 0);
-  let lines = [];
-  for (let lineIndex = 0; lineIndex < height; lineIndex++) {
-    let parts = columnLines.map((column, index) => {
-      let width = widths[index];
-      let value = column[lineIndex] ?? "";
-      if (value.length < width) {
-        return value.padEnd(width, " ");
-      }
-      if (value.length > width) {
-        return truncateCellValue(value, width);
-      }
-      return value;
-    });
-    lines.push(parts.join(separator));
-  }
-  if (lines.length === 0) {
-    lines.push(columns.map((_, index) => "".padEnd(widths[index], " ")).join(separator));
+  let line = parts.join(separator);
+  if (line.length === 0) {
+    return [columns.map((_, index) => "".padEnd(widths[index], " ")).join(separator)];
   }
-  return lines;
+  return [line];
 }
 export function addViewportEllipsis(line) {
   if (line.length === 0) {
@@ -233,8 +164,8 @@ export function createStatusLine(message, stats, lineWidth, prefix = "") {
 export function createTransactionColumns(showError) {
   let columns = [
     { key: "Namespace", header: "Namespace", min: 10, max: 24, weight: 0, shrinkPriority: 3 },
-    { key: "Name", header: "Name", min: 4, max: 40, weight: 1, shrinkPriority: 1 },
-    { key: "CreatedBy", header: "CreatedBy", min: 8, max: 20, weight: 0, shrinkPriority: 4 },
+    { key: "Name", header: "Name", min: 32, max: 40, weight: 1, shrinkPriority: 1 },
+    { key: "CreatedBy", header: "CreatedBy", min: 13, max: 20, weight: 0, shrinkPriority: 4 },
     {
       key: "Status",
       header: "Status",
@@ -251,9 +182,7 @@ export function createTransactionColumns(showError) {
       min: 20,
       max: 120,
       weight: 2,
-      shrinkPriority: 0,
-      wrap: true,
-      maxWrapLines: ERROR_COLUMN_MAX_LINES
+      shrinkPriority: 0
     });
   }
   return columns;

package/cli/editor/useCommand.js

@@ -0,0 +1,148 @@
+"use strict";
+import { useInput } from "ink";
+import { useCallback, useMemo, useRef } from "react";
+const HOME_SEQUENCES = /* @__PURE__ */ new Set(["\x1B[H", "\x1B[1~", "\x1BOH"]);
+const END_SEQUENCES = /* @__PURE__ */ new Set(["\x1B[F", "\x1B[4~", "\x1BOF"]);
+const PAGE_UP_SEQUENCES = /* @__PURE__ */ new Set(["\x1B[5~"]);
+const PAGE_DOWN_SEQUENCES = /* @__PURE__ */ new Set(["\x1B[6~"]);
+const KEY_ALIASES = {
+  leftarrow: "left",
+  rightarrow: "right",
+  uparrow: "up",
+  downarrow: "down",
+  return: "enter",
+  enter: "enter",
+  esc: "escape",
+  spacebar: "space",
+  pagedown: "pagedown",
+  pageup: "pageup"
+};
+const RELAXED_KEYS = /* @__PURE__ */ new Set([
+  "escape",
+  "left",
+  "right",
+  "up",
+  "down",
+  "home",
+  "end",
+  "pageup",
+  "pagedown",
+  "tab",
+  "enter",
+  "delete",
+  "backspace"
+]);
+function parseShortcut(shortcut) {
+  let tokens = shortcut.trim().toLowerCase().split("+").map((token) => token.trim()).filter(Boolean);
+  let definition = {
+    key: null,
+    ctrl: false,
+    meta: false,
+    shift: false
+  };
+  for (let token of tokens) {
+    if (token === "ctrl" || token === "control") {
+      definition.ctrl = true;
+      continue;
+    }
+    if (token === "meta" || token === "cmd" || token === "command") {
+      definition.meta = true;
+      continue;
+    }
+    if (token === "shift") {
+      definition.shift = true;
+      continue;
+    }
+    let alias = KEY_ALIASES[token];
+    definition.key = alias ?? token;
+  }
+  return definition;
+}
+function getInputKey(input, key) {
+  if (key.escape) {
+    return "escape";
+  }
+  if (key.leftArrow) {
+    return "left";
+  }
+  if (key.rightArrow) {
+    return "right";
+  }
+  if (key.upArrow) {
+    return "up";
+  }
+  if (key.downArrow) {
+    return "down";
+  }
+  if (key.pageUp || PAGE_UP_SEQUENCES.has(input)) {
+    return "pageup";
+  }
+  if (key.pageDown || PAGE_DOWN_SEQUENCES.has(input)) {
+    return "pagedown";
+  }
+  if (key.return) {
+    return "enter";
+  }
+  if (key.delete) {
+    return "delete";
+  }
+  if (key.backspace) {
+    return "backspace";
+  }
+  if (key.tab) {
+    return "tab";
+  }
+  if (key.shift && !input) {
+    return null;
+  }
+  if (input === " ") {
+    return "space";
+  }
+  if (HOME_SEQUENCES.has(input) || (key.home ?? false)) {
+    return "home";
+  }
+  if (END_SEQUENCES.has(input) || (key.end ?? false)) {
+    return "end";
+  }
+  if (input) {
+    return input.toLowerCase();
+  }
+  return null;
+}
+function matchesShortcut(definition, input, key) {
+  let actualKey = getInputKey(input, key);
+  let relaxed = actualKey !== null && RELAXED_KEYS.has(actualKey);
+  if (definition.ctrl && !key.ctrl) return false;
+  if (definition.meta && !key.meta) return false;
+  if (definition.shift && !key.shift) return false;
+  if (!relaxed) {
+    if (!definition.ctrl && key.ctrl) return false;
+    if (!definition.meta && key.meta) return false;
+    if (!definition.shift && key.shift) return false;
+  }
+  if (definition.key === null) {
+    return actualKey !== null;
+  }
+  return actualKey === definition.key;
+}
+function normalizeShortcuts(shortcuts) {
+  let entries = Array.isArray(shortcuts) ? shortcuts : [shortcuts];
+  return entries.map(parseShortcut);
+}
+export function useCommand(shortcut, handler, enabled = true) {
+  let definitions = useMemo(() => normalizeShortcuts(shortcut), [shortcut]);
+  let callback = useRef(handler);
+  callback.current = handler;
+  let inputHandler = useCallback(
+    (input, key) => {
+      for (let definition of definitions) {
+        if (matchesShortcut(definition, input, key)) {
+          callback.current();
+          return;
+        }
+      }
+    },
+    [definitions]
+  );
+  useInput(inputHandler, { isActive: enabled });
+}

package/cli/editor/useScrollableText.js

@@ -0,0 +1,28 @@
+"use strict";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useCommand } from "./useCommand.js";
+export function useScrollableText({
+  textLength,
+  viewportHeight,
+  signature
+}) {
+  let [scrollOffset, setScrollOffset] = useState(0);
+  let lastSignatureRef = useRef(signature);
+  useEffect(() => {
+    if (lastSignatureRef.current !== signature) {
+      lastSignatureRef.current = signature;
+      setScrollOffset(0);
+    }
+  }, [signature]);
+  let maxScrollOffset = useMemo(() => Math.max((textLength || 1) - viewportHeight, 0), [textLength, viewportHeight]);
+  useEffect(() => {
+    setScrollOffset((offset) => Math.min(offset, maxScrollOffset));
+  }, [maxScrollOffset]);
+  let canScroll = textLength > viewportHeight && viewportHeight > 0;
+  let pageStep = useMemo(() => Math.max(viewportHeight - 1, 1), [viewportHeight]);
+  useCommand("up", () => setScrollOffset((offset) => Math.max(offset - 1, 0)), canScroll);
+  useCommand("down", () => setScrollOffset((offset) => Math.min(offset + 1, maxScrollOffset)), canScroll);
+  useCommand("pageup", () => setScrollOffset((offset) => Math.max(offset - pageStep, 0)), canScroll);
+  useCommand("pagedown", () => setScrollOffset((offset) => Math.min(offset + pageStep, maxScrollOffset)), canScroll);
+  return { scrollOffset, canScroll, maxScrollOffset, pageStep };
+}