@nmakarov/cli-toolkit 0.18.0 → 0.23.0

package/dist/screen.cjs

@@ -1,12 +1,3 @@
-"use strict";
-
-var __esmCache = {};
-var __loadESMSync = function(moduleName) {
-  if (!__esmCache[moduleName]) {
-    throw new Error(`ESM module "${moduleName}" not loaded. Please call the load() function first: const toolkit = require("@nmakarov/cli-toolkit"); await toolkit.load();`);
-  }
-  return __esmCache[moduleName];
-};
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -35,7 +26,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/screen/index.ts
+// src/screen/index.js
 var screen_exports = {};
 __export(screen_exports, {
   Box: () => import_ink5.Box,
@@ -61,6 +52,7 @@ __export(screen_exports, {
   buildFooter: () => buildFooter,
   h: () => import_react5.createElement,
   load: () => load,
+  memo: () => import_react5.memo,
   organizeFooterMessages: () => organizeFooterMessages,
   showListScreen: () => showListScreen,
   showMenuScreen: () => showMenuScreen,
@@ -71,6 +63,7 @@ __export(screen_exports, {
   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
@@ -79,11 +72,11 @@ module.exports = __toCommonJS(screen_exports);
 var import_react5 = null; // Will be set by load();
 var import_ink5 = null; // Will be set by load();
 
-// src/screen/screens.ts
+// src/screen/screens.js
 var import_react3 = null; // Will be set by load();
 var import_ink3 = null; // Will be set by load();
 
-// src/screen/components.ts
+// src/screen/components.js
 var import_react = null; // Will be set by load();
 var import_ink = null; // Will be set by load();
 function getScreenWidth(maxWidth = null) {
@@ -158,7 +151,7 @@ function ScreenFooter({ lines, textStyle }) {
   );
 }
 
-// src/screen/list-components.ts
+// src/screen/list-components.js
 var import_react2 = null; // Will be set by load();
 var import_ink2 = null; // Will be set by load();
 // Removed: intermediate assignment - code will access import variable directly
@@ -313,11 +306,13 @@ function MultiColumnListWithPreviewComponent({
     ...previewRows
   );
 }
-function ListComponent({ items, ctx, selectedIndexRef, renderItem, getTitle, sortable = false, maxHeight, sortHighlightStyle, selectionMarker = " " }) {
+function ListComponent({ items, ctx, selectedIndexRef, renderItem, getTitle, sortable = false, maxHeight, sortHighlightStyle, selectionMarker = " ", onSelectionChange }) {
   const [, forceUpdate] = (0, import_react2.useState)({});
   const [sortOrder, setSortOrder] = (0, import_react2.useState)("none");
   const [scrollOffset, setScrollOffset] = (0, import_react2.useState)(0);
   const scrollStateRef = (0, import_react2.useRef)({ scrollOffset: 0, maxHeight: 0, totalItems: 0 });
+  const itemsRef = (0, import_react2.useRef)(items);
+  itemsRef.current = items;
   const defaultGetTitle = (item) => {
     return getTitle ? getTitle(item) : typeof item.value === "string" ? item.value : item.value?.title || item.name;
   };
@@ -331,18 +326,24 @@ function ListComponent({ items, ctx, selectedIndexRef, renderItem, getTitle, sor
       return titleA > titleB ? -1 : titleA < titleB ? 1 : 0;
     }
   }) : items;
+  const displayItemsRef = (0, import_react2.useRef)(displayItems);
+  displayItemsRef.current = displayItems;
   const effectiveMaxHeight = maxHeight || displayItems.length;
-  const canScroll = displayItems.length > effectiveMaxHeight;
+  const _canScroll = displayItems.length > effectiveMaxHeight;
   const maxScrollOffset = Math.max(0, displayItems.length - effectiveMaxHeight);
   const clampedScrollOffset = Math.min(Math.max(0, scrollOffset), maxScrollOffset);
   const visibleItems = displayItems.slice(clampedScrollOffset, clampedScrollOffset + effectiveMaxHeight);
   const canScrollUp = clampedScrollOffset > 0;
   const canScrollDown = clampedScrollOffset < maxScrollOffset;
   scrollStateRef.current = { scrollOffset, maxHeight: effectiveMaxHeight, totalItems: displayItems.length };
+  const onSelectionChangeRef = (0, import_react2.useRef)(onSelectionChange);
+  onSelectionChangeRef.current = onSelectionChange;
   (0, import_react2.useEffect)(() => {
     ctx.setAction("moveUp", () => {
       const newIndex = Math.max(0, selectedIndexRef.current - 1);
       selectedIndexRef.current = newIndex;
+      const list = displayItemsRef.current;
+      onSelectionChangeRef.current?.(newIndex, list[newIndex]);
       const { scrollOffset: currentScrollOffset, maxHeight: currentMaxHeight, totalItems } = scrollStateRef.current;
       const currentMaxScrollOffset = Math.max(0, totalItems - currentMaxHeight);
       const currentClampedScrollOffset = Math.min(Math.max(0, currentScrollOffset), currentMaxScrollOffset);
@@ -352,18 +353,11 @@ function ListComponent({ items, ctx, selectedIndexRef, renderItem, getTitle, sor
       forceUpdate({});
     });
     ctx.setAction("moveDown", () => {
-      const currentItems = sortable && sortOrder !== "none" ? [...items].sort((a, b) => {
-        const titleA = titleGetter(a).toLowerCase();
-        const titleB = titleGetter(b).toLowerCase();
-        if (sortOrder === "asc") {
-          return titleA < titleB ? -1 : titleA > titleB ? 1 : 0;
-        } else {
-          return titleA > titleB ? -1 : titleA < titleB ? 1 : 0;
-        }
-      }) : items;
-      const maxIndex = currentItems.length - 1;
+      const currentItems = displayItemsRef.current;
+      const maxIndex = Math.max(0, currentItems.length - 1);
       const newIndex = Math.min(maxIndex, selectedIndexRef.current + 1);
       selectedIndexRef.current = newIndex;
+      onSelectionChangeRef.current?.(newIndex, currentItems[newIndex]);
       const { scrollOffset: currentScrollOffset, maxHeight: currentMaxHeight, totalItems } = scrollStateRef.current;
       const currentMaxScrollOffset = Math.max(0, totalItems - currentMaxHeight);
       const currentClampedScrollOffset = Math.min(Math.max(0, currentScrollOffset), currentMaxScrollOffset);
@@ -373,8 +367,7 @@ function ListComponent({ items, ctx, selectedIndexRef, renderItem, getTitle, sor
       forceUpdate({});
     });
     ctx.setAction("scrollUp", () => {
-      const { scrollOffset: currentScrollOffset, maxHeight: currentMaxHeight, totalItems } = scrollStateRef.current;
-      const currentMaxScrollOffset = Math.max(0, totalItems - currentMaxHeight);
+      const { scrollOffset: currentScrollOffset } = scrollStateRef.current;
       const newScrollOffset = Math.max(0, currentScrollOffset - 1);
       setScrollOffset(newScrollOffset);
       forceUpdate({});
@@ -389,9 +382,9 @@ function ListComponent({ items, ctx, selectedIndexRef, renderItem, getTitle, sor
     if (sortable) {
       ctx.setAction("toggleSort", () => {
         const nextSort = sortOrder === "none" ? "asc" : sortOrder === "asc" ? "desc" : "none";
-        const currentSelectedItem = displayItems[selectedIndexRef.current];
+        const currentSelectedItem = displayItemsRef.current[selectedIndexRef.current];
         setSortOrder(nextSort);
-        const newSortedItems = nextSort !== "none" ? [...items].sort((a, b) => {
+        const newSortedItems = nextSort !== "none" ? [...itemsRef.current].sort((a, b) => {
           const titleA = titleGetter(a).toLowerCase();
           const titleB = titleGetter(b).toLowerCase();
           if (nextSort === "asc") {
@@ -399,7 +392,7 @@ function ListComponent({ items, ctx, selectedIndexRef, renderItem, getTitle, sor
           } else {
             return titleA > titleB ? -1 : titleA < titleB ? 1 : 0;
           }
-        }) : items;
+        }) : itemsRef.current;
         const newIndex = newSortedItems.findIndex((item) => item === currentSelectedItem);
         if (newIndex !== -1) {
           selectedIndexRef.current = newIndex;
@@ -536,7 +529,7 @@ function ListComponent({ items, ctx, selectedIndexRef, renderItem, getTitle, sor
   );
 }
 
-// src/screen/screens.ts
+// src/screen/screens.js
 function groupKeyBindings(bindings) {
   const groups = {};
   const enabledBindings = bindings.filter((b) => b.enabled !== false);
@@ -612,7 +605,7 @@ async function showScreen(config) {
     let renderResult = null;
     let initialized = false;
     const Screen = () => {
-      const [updateCounter, setUpdateCounter] = (0, import_react3.useState)(0);
+      const [, setUpdateCounter] = (0, import_react3.useState)(0);
       if (!initialized) {
         const defaultBindings = [
           { key: "escape", caption: "go back", action: "back", protected: true, order: 1 },
@@ -731,7 +724,7 @@ async function showScreen(config) {
           }
         }
         if (matchedBinding && actions[matchedBinding.action]) {
-          const actionResult = actions[matchedBinding.action]({
+          actions[matchedBinding.action]({
             input,
             key,
             binding: matchedBinding
@@ -862,7 +855,7 @@ async function showMultiColumnListWithPreviewScreen(config) {
 var showMenuScreen = showListScreen;
 var showWordGridScreen = showMultiColumnListScreen;
 
-// src/screen/ui-elements.ts
+// src/screen/ui-elements.js
 var import_react4 = null; // Will be set by load();
 var import_ink4 = null; // Will be set by load();
 function ListItem({
@@ -889,7 +882,7 @@ function TextBlock({
   color = "white",
   dimmed = false,
   bold = false,
-  maxWidth
+  maxWidth: _maxWidth
 }) {
   return (0, import_react4.createElement)(
     import_ink4.Box,
@@ -929,7 +922,7 @@ function GridCell({
     }, children)
   );
 }
-function InputField({ prompt, value, onChange, onSubmit }) {
+function InputField({ prompt, value, onChange: _onChange, onSubmit: _onSubmit }) {
   return (0, import_react4.createElement)(
     import_ink4.Box,
     { flexDirection: "column" },
@@ -942,7 +935,7 @@ function InputField({ prompt, value, onChange, onSubmit }) {
   );
 }
 
-// src/screen/utils.ts
+// src/screen/utils.js
 function buildBreadcrumb(parts) {
   if (parts.length === 0) return "";
   if (parts.length === 1) return parts[0];
@@ -956,7 +949,7 @@ function buildDetailBreadcrumb(path, suffix = "") {
   return suffix ? `${breadcrumb} ${suffix}` : breadcrumb;
 }
 
-// src/screen/footer-builder.ts
+// src/screen/footer-builder.js
 function buildFooter(config = {}) {
   const {
     navigation = null,
@@ -1061,7 +1054,7 @@ function organizeFooterMessages(messages) {
   return lines;
 }
 
-// src/screen/index.ts
+// src/screen/index.js
 var loadPromise = null;
 async function load() {
   if (loadPromise) return loadPromise;
@@ -1111,6 +1104,7 @@ if (typeof window === "undefined") {
   buildFooter,
   h,
   load,
+  memo,
   organizeFooterMessages,
   showListScreen,
   showMenuScreen,
@@ -1121,6 +1115,7 @@ if (typeof window === "undefined") {
   useCallback,
   useEffect,
   useInput,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState