@nmakarov/cli-toolkit 0.7.0 → 0.7.2

package/dist/init.js

@@ -1,9 +1,1101 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
 var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
   get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
 }) : x)(function(x) {
   if (typeof require !== "undefined") return require.apply(this, arguments);
   throw Error('Dynamic require of "' + x + '" is not supported');
 });
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/screen/components.ts
+import { createElement as h } from "react";
+import { Box, Text } from "ink";
+function getScreenWidth(maxWidth = null) {
+  const terminalWidth = process.stdout.columns || 80;
+  const availableWidth = Math.max(20, terminalWidth - 4);
+  return maxWidth ? Math.min(availableWidth, maxWidth) : availableWidth;
+}
+function ScreenContainer({ children }) {
+  const width = getScreenWidth();
+  return h(Box, {
+    flexDirection: "column",
+    marginTop: 1,
+    borderStyle: "single",
+    borderColor: "cyan",
+    paddingX: 1,
+    width
+    // Use the calculated width directly
+  }, children);
+}
+function ScreenRow({ children }) {
+  return h(Box, { flexDirection: "column" }, children);
+}
+function ScreenTitle({ text }) {
+  return h(
+    ScreenRow,
+    {},
+    h(Text, { bold: true, color: "cyan" }, text)
+  );
+}
+function ScreenDivider({ width }) {
+  const dividerWidth = width || getScreenWidth() - 4;
+  return h(Text, { color: "cyan", dimColor: true }, "\u2500".repeat(dividerWidth));
+}
+function ScreenBody({ children, alignItems = "flex-start" }) {
+  return h(Box, { flexDirection: "column", alignItems }, children);
+}
+function ScreenFooter({ lines, textStyle }) {
+  const defaultTextStyle = {
+    dimColor: true,
+    color: "white"
+  };
+  const finalTextStyle = { ...defaultTextStyle, ...textStyle };
+  const flattenAndWrap = (items, keyPrefix = "") => {
+    const result = [];
+    let keyIndex = 0;
+    items.forEach((item, index) => {
+      if (Array.isArray(item)) {
+        const nested = flattenAndWrap(item, `${keyPrefix}-${index}`);
+        result.push(...nested);
+      } else if (typeof item === "string") {
+        result.push(
+          h(Text, { key: `${keyPrefix}-${keyIndex++}`, ...finalTextStyle }, item)
+        );
+      } else {
+        const element = item;
+        if (element.key === null || element.key === void 0) {
+          result.push(
+            h(Text, { key: `${keyPrefix}-${keyIndex++}`, ...finalTextStyle }, element)
+          );
+        } else {
+          result.push(element);
+        }
+      }
+    });
+    return result;
+  };
+  const wrappedItems = flattenAndWrap(lines);
+  return h(
+    Box,
+    { flexDirection: "column" },
+    h(Box, { flexDirection: "row" }, ...wrappedItems)
+  );
+}
+var init_components = __esm({
+  "src/screen/components.ts"() {
+    "use strict";
+  }
+});
+
+// src/screen/list-components.ts
+import React2, { useState, useEffect, useRef, createElement } from "react";
+import { Box as Box2, Text as Text2 } from "ink";
+function MultiColumnListComponent({ items, ctx, selectedIndexRef }) {
+  const [, forceUpdate] = useState({});
+  const termWidth = (process.stdout.columns || 80) - 8;
+  const maxItemLength = Math.max(...items.map((w) => w.length));
+  const columnWidth = maxItemLength + 3;
+  const columns = Math.max(1, Math.floor(termWidth / columnWidth));
+  const itemsPerColumn = Math.ceil(items.length / columns);
+  useEffect(() => {
+    ctx.setAction("moveUp", () => {
+      selectedIndexRef.current = Math.max(0, selectedIndexRef.current - 1);
+      forceUpdate({});
+    });
+    ctx.setAction("moveDown", () => {
+      selectedIndexRef.current = Math.min(items.length - 1, selectedIndexRef.current + 1);
+      forceUpdate({});
+    });
+    ctx.setAction("moveLeft", () => {
+      if (selectedIndexRef.current === 0) {
+        ctx.goBack();
+      } else {
+        selectedIndexRef.current = Math.max(0, selectedIndexRef.current - itemsPerColumn);
+        forceUpdate({});
+      }
+    });
+    ctx.setAction("moveRight", () => {
+      selectedIndexRef.current = Math.min(items.length - 1, selectedIndexRef.current + itemsPerColumn);
+      forceUpdate({});
+    });
+    ctx.setKeyBinding([
+      { key: "leftArrow", caption: "navigate", action: "moveLeft", order: 0 },
+      { key: "rightArrow", caption: "navigate", action: "moveRight", order: 0 },
+      { key: "upArrow", caption: "navigate", action: "moveUp", order: 0 },
+      { key: "downArrow", caption: "navigate", action: "moveDown", order: 0 }
+    ]);
+    ctx.addFooter(`Total: ${items.length} items`);
+  }, []);
+  const selectedIndex = selectedIndexRef.current;
+  const rows = [];
+  for (let row = 0; row < itemsPerColumn; row++) {
+    const cols = [];
+    for (let col = 0; col < columns; col++) {
+      const index = col * itemsPerColumn + row;
+      if (index < items.length) {
+        const isSelected = index === selectedIndex;
+        cols.push(
+          h2(
+            Box2,
+            { key: index, width: columnWidth },
+            h2(Text2, {
+              color: isSelected ? "black" : "white",
+              backgroundColor: isSelected ? "cyan" : void 0,
+              bold: isSelected
+            }, items[index].padEnd(maxItemLength))
+          )
+        );
+      }
+    }
+    rows.push(
+      h2(ScreenRow, { key: row, children: h2(Box2, { flexDirection: "row" }, ...cols) })
+    );
+  }
+  return h2(Box2, { flexDirection: "column" }, ...rows);
+}
+function MultiColumnListWithPreviewComponent({
+  items,
+  getPreviewContent,
+  ctx,
+  selectedIndexRef
+}) {
+  const [, forceUpdate] = useState({});
+  const termWidth = (process.stdout.columns || 80) - 8;
+  const maxItemLength = Math.max(...items.map((w) => w.length));
+  const columnWidth = maxItemLength + 3;
+  const columns = Math.max(1, Math.floor(termWidth / columnWidth));
+  const itemsPerColumn = Math.ceil(items.length / columns);
+  useEffect(() => {
+    ctx.setAction("moveUp", () => {
+      selectedIndexRef.current = Math.max(0, selectedIndexRef.current - 1);
+      forceUpdate({});
+    });
+    ctx.setAction("moveDown", () => {
+      selectedIndexRef.current = Math.min(items.length - 1, selectedIndexRef.current + 1);
+      forceUpdate({});
+    });
+    ctx.setAction("moveLeft", () => {
+      if (selectedIndexRef.current === 0) {
+        ctx.goBack();
+      } else {
+        selectedIndexRef.current = Math.max(0, selectedIndexRef.current - itemsPerColumn);
+        forceUpdate({});
+      }
+    });
+    ctx.setAction("moveRight", () => {
+      selectedIndexRef.current = Math.min(items.length - 1, selectedIndexRef.current + itemsPerColumn);
+      forceUpdate({});
+    });
+    ctx.setKeyBinding([
+      { key: "leftArrow", caption: "navigate", action: "moveLeft", order: 0 },
+      { key: "rightArrow", caption: "navigate", action: "moveRight", order: 0 },
+      { key: "upArrow", caption: "navigate", action: "moveUp", order: 0 },
+      { key: "downArrow", caption: "navigate", action: "moveDown", order: 0 }
+    ]);
+    ctx.addFooter(`Total: ${items.length} items`);
+  }, []);
+  const selectedIndex = selectedIndexRef.current;
+  const selectedItem = items[selectedIndex];
+  const rows = [];
+  for (let row = 0; row < itemsPerColumn; row++) {
+    const cols = [];
+    for (let col = 0; col < columns; col++) {
+      const index = col * itemsPerColumn + row;
+      if (index < items.length) {
+        const isSelected = index === selectedIndex;
+        cols.push(
+          h2(
+            Box2,
+            { key: index, width: columnWidth },
+            h2(Text2, {
+              color: isSelected ? "black" : "white",
+              backgroundColor: isSelected ? "cyan" : void 0,
+              bold: isSelected
+            }, items[index].padEnd(maxItemLength))
+          )
+        );
+      }
+    }
+    rows.push(
+      h2(ScreenRow, { key: row, children: h2(Box2, { flexDirection: "row" }, ...cols) })
+    );
+  }
+  const previewContent = getPreviewContent ? getPreviewContent(selectedItem) : selectedItem;
+  const previewRows = [];
+  if (typeof previewContent === "string") {
+    previewRows.push(h2(ScreenRow, { key: "preview-string", children: h2(Text2, { bold: true }, previewContent) }));
+  } else if (typeof previewContent === "object" && !React2.isValidElement(previewContent) && previewContent !== null) {
+    Object.entries(previewContent).forEach(([key, value], idx) => {
+      previewRows.push(h2(ScreenRow, { key: `preview-${key}-${idx}`, children: h2(Text2, {}, `${key}: ${value}`) }));
+    });
+  } else if (React2.isValidElement(previewContent)) {
+    previewRows.push(h2(ScreenRow, { key: "preview-element", children: previewContent }));
+  }
+  return h2(
+    Box2,
+    { flexDirection: "column" },
+    ...rows,
+    h2(ScreenRow, { key: "spacer-1", children: h2(Text2, {}, " ") }),
+    h2(ScreenDivider, { key: "divider" }),
+    h2(ScreenRow, { key: "spacer-2", children: h2(Text2, {}, " ") }),
+    ...previewRows
+  );
+}
+function ListComponent({ items, ctx, selectedIndexRef, renderItem, getTitle, sortable = false, maxHeight, sortHighlightStyle, selectionMarker = " " }) {
+  const [, forceUpdate] = useState({});
+  const [sortOrder, setSortOrder] = useState("none");
+  const [scrollOffset, setScrollOffset] = useState(0);
+  const scrollStateRef = useRef({ scrollOffset: 0, maxHeight: 0, totalItems: 0 });
+  const defaultGetTitle = (item) => {
+    return getTitle ? getTitle(item) : typeof item.value === "string" ? item.value : item.value?.title || item.name;
+  };
+  const titleGetter = getTitle || defaultGetTitle;
+  const displayItems = 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 effectiveMaxHeight = maxHeight || displayItems.length;
+  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 };
+  useEffect(() => {
+    ctx.setAction("moveUp", () => {
+      const newIndex = Math.max(0, selectedIndexRef.current - 1);
+      selectedIndexRef.current = 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);
+      if (newIndex < currentClampedScrollOffset) {
+        setScrollOffset(newIndex);
+      }
+      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 newIndex = Math.min(maxIndex, selectedIndexRef.current + 1);
+      selectedIndexRef.current = 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);
+      if (newIndex >= currentClampedScrollOffset + currentMaxHeight) {
+        setScrollOffset(newIndex - currentMaxHeight + 1);
+      }
+      forceUpdate({});
+    });
+    ctx.setAction("scrollUp", () => {
+      const { scrollOffset: currentScrollOffset, maxHeight: currentMaxHeight, totalItems } = scrollStateRef.current;
+      const currentMaxScrollOffset = Math.max(0, totalItems - currentMaxHeight);
+      const newScrollOffset = Math.max(0, currentScrollOffset - 1);
+      setScrollOffset(newScrollOffset);
+      forceUpdate({});
+    });
+    ctx.setAction("scrollDown", () => {
+      const { scrollOffset: currentScrollOffset, maxHeight: currentMaxHeight, totalItems } = scrollStateRef.current;
+      const currentMaxScrollOffset = Math.max(0, totalItems - currentMaxHeight);
+      const newScrollOffset = Math.min(currentMaxScrollOffset, currentScrollOffset + 1);
+      setScrollOffset(newScrollOffset);
+      forceUpdate({});
+    });
+    if (sortable) {
+      ctx.setAction("toggleSort", () => {
+        const nextSort = sortOrder === "none" ? "asc" : sortOrder === "asc" ? "desc" : "none";
+        const currentSelectedItem = displayItems[selectedIndexRef.current];
+        setSortOrder(nextSort);
+        const newSortedItems = nextSort !== "none" ? [...items].sort((a, b) => {
+          const titleA = titleGetter(a).toLowerCase();
+          const titleB = titleGetter(b).toLowerCase();
+          if (nextSort === "asc") {
+            return titleA < titleB ? -1 : titleA > titleB ? 1 : 0;
+          } else {
+            return titleA > titleB ? -1 : titleA < titleB ? 1 : 0;
+          }
+        }) : items;
+        const newIndex = newSortedItems.findIndex((item) => item === currentSelectedItem);
+        if (newIndex !== -1) {
+          selectedIndexRef.current = newIndex;
+          setScrollOffset(newIndex);
+        } else {
+          selectedIndexRef.current = 0;
+          setScrollOffset(0);
+        }
+        forceUpdate({});
+      });
+      const defaultHighlightStyle = {
+        color: "black",
+        backgroundColor: "green",
+        bold: true
+      };
+      const highlightStyle = { ...defaultHighlightStyle, ...sortHighlightStyle };
+      const sortCaption = () => {
+        if (sortOrder === "none") {
+          return h2(Text2, {}, "s to toggle sort");
+        } else {
+          const sortLabel = sortOrder === "asc" ? "ASC" : "DESC";
+          return h2(
+            Text2,
+            {},
+            "s to toggle ",
+            h2(Text2, { color: "white", bold: true }, "sort"),
+            " ",
+            h2(Text2, highlightStyle, ` ${sortLabel} `)
+          );
+        }
+      };
+      ctx.setKeyBinding([
+        { key: "upArrow", caption: "navigate", action: "moveUp", order: 0 },
+        { key: "downArrow", caption: "navigate", action: "moveDown", order: 0 },
+        {
+          key: "s",
+          caption: sortCaption,
+          action: "toggleSort",
+          order: 5
+        }
+      ]);
+      ctx.update();
+    } else {
+      ctx.setKeyBinding([
+        { key: "upArrow", caption: "navigate", action: "moveUp", order: 0 },
+        { key: "downArrow", caption: "navigate", action: "moveDown", order: 0 }
+      ]);
+    }
+  }, [sortOrder, sortable]);
+  const selectedIndex = selectedIndexRef.current;
+  const defaultRenderItem = (item, isSelected, displayIndex, actualIndex) => {
+    const isFirstVisible = displayIndex === 0;
+    const isLastVisible = displayIndex === visibleItems.length - 1;
+    let arrowPrefix = "";
+    let selectionPrefix = "";
+    if (isFirstVisible && canScrollUp) {
+      arrowPrefix = "\u2191 ";
+    } else if (isLastVisible && canScrollDown) {
+      arrowPrefix = "\u2193 ";
+    } else {
+      arrowPrefix = "  ";
+    }
+    if (isSelected) {
+      selectionPrefix = selectionMarker;
+    } else {
+      selectionPrefix = " ".repeat(selectionMarker.length);
+    }
+    return h2(
+      Box2,
+      { flexDirection: "row" },
+      // Arrow (clickable if functional, not highlighted)
+      h2(Text2, {
+        key: `arrow-${actualIndex}`,
+        color: "white"
+      }, arrowPrefix),
+      // Selection marker space (always same width, not highlighted) 
+      h2(Text2, { key: `marker-${actualIndex}`, color: "white" }, selectionPrefix),
+      // Item name (highlighted if selected)
+      h2(Text2, {
+        key: `name-${actualIndex}`,
+        color: isSelected ? "black" : "white",
+        backgroundColor: isSelected ? "cyan" : void 0,
+        bold: isSelected
+      }, item.name)
+    );
+  };
+  const itemRenderer = renderItem || defaultRenderItem;
+  return h2(
+    Box2,
+    { flexDirection: "column" },
+    ...visibleItems.map((item, displayIndex) => {
+      const actualIndex = clampedScrollOffset + displayIndex;
+      const isSelected = actualIndex === selectedIndex;
+      if (renderItem) {
+        const isFirstVisible = displayIndex === 0;
+        const isLastVisible = displayIndex === visibleItems.length - 1;
+        let arrowPrefix = "";
+        let selectionPrefix = "";
+        if (isFirstVisible && canScrollUp) {
+          arrowPrefix = "\u2191 ";
+        } else if (isLastVisible && canScrollDown) {
+          arrowPrefix = "\u2193 ";
+        } else {
+          arrowPrefix = "  ";
+        }
+        if (isSelected) {
+          selectionPrefix = selectionMarker;
+        } else {
+          selectionPrefix = " ".repeat(selectionMarker.length);
+        }
+        return h2(ScreenRow, {
+          key: `item-${actualIndex}`,
+          children: h2(
+            Box2,
+            { flexDirection: "row" },
+            // Arrow (clickable if functional, not highlighted)
+            h2(Text2, {
+              key: `arrow-${actualIndex}`,
+              color: "white"
+            }, arrowPrefix),
+            // Selection marker space (always same width, not highlighted) 
+            h2(Text2, { key: `marker-${actualIndex}`, color: "white" }, selectionPrefix),
+            // Custom rendered content
+            renderItem(item, isSelected, displayIndex)
+          )
+        });
+      } else {
+        return h2(ScreenRow, {
+          key: `item-${actualIndex}`,
+          children: itemRenderer(item, isSelected, displayIndex, actualIndex)
+        });
+      }
+    })
+  );
+}
+var h2;
+var init_list_components = __esm({
+  "src/screen/list-components.ts"() {
+    "use strict";
+    init_components();
+    h2 = createElement;
+  }
+});
+
+// src/screen/screens.ts
+import { useState as useState2, createElement as h3 } from "react";
+import { render, useInput, Text as Text3 } from "ink";
+function groupKeyBindings(bindings) {
+  const groups = {};
+  const enabledBindings = bindings.filter((b) => b.enabled !== false);
+  enabledBindings.forEach((binding) => {
+    const caption = typeof binding.caption === "string" ? binding.caption : "";
+    if (!groups[caption]) {
+      groups[caption] = {
+        keys: [],
+        caption,
+        order: binding.order || 999
+      };
+    }
+    groups[caption].keys.push(binding.key);
+  });
+  return Object.values(groups);
+}
+function formatKeyBindings(bindings, mode = "long") {
+  const resolvedBindings = bindings.map((binding) => {
+    let resolvedCaption = binding.caption;
+    if (typeof binding.caption === "function") {
+      resolvedCaption = binding.caption();
+    }
+    return {
+      ...binding,
+      resolvedCaption
+    };
+  });
+  const groups = groupKeyBindings(resolvedBindings.map((b) => ({
+    ...b,
+    caption: typeof b.resolvedCaption === "string" ? b.resolvedCaption : ""
+  })));
+  groups.sort((a, b) => a.order - b.order);
+  const items = [];
+  groups.forEach((group) => {
+    const bindingWithCustom = resolvedBindings.find(
+      (b) => group.keys.includes(b.key) && 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);
+      }
+    }
+  });
+  return items;
+}
+function formatKeys(keys) {
+  const keyMap = {
+    "escape": "esc",
+    "leftArrow": "\u2190",
+    "rightArrow": "\u2192",
+    "upArrow": "\u2191",
+    "downArrow": "\u2193",
+    "return": "enter"
+  };
+  return keys.map((k) => keyMap[k] || k).join("/");
+}
+async function showScreen(config2) {
+  const {
+    title,
+    onRender,
+    parentData = {}
+  } = config2;
+  return new Promise((resolve2) => {
+    let instance;
+    const keyBindings = [];
+    const actions = {};
+    const customFooterItems = [];
+    let renderResult = null;
+    let initialized = false;
+    const Screen = () => {
+      const [updateCounter, setUpdateCounter] = useState2(0);
+      if (!initialized) {
+        const defaultBindings = [
+          { key: "escape", caption: "go back", action: "back", protected: true, order: 1 },
+          { key: "leftArrow", caption: "go back", action: "back", protected: false, order: 1 }
+          // Note: 'select' is not a default - components add it if needed
+        ];
+        defaultBindings.forEach((binding) => {
+          keyBindings.push(binding);
+        });
+        actions.back = () => {
+          cleanup(null);
+        };
+        initialized = true;
+      }
+      const context = {
+        setAction: (actionName, handlerFn) => {
+          actions[actionName] = handlerFn;
+        },
+        setKeyBinding: (bindingOrBindings) => {
+          const bindingsToSet = Array.isArray(bindingOrBindings) ? bindingOrBindings : [bindingOrBindings];
+          bindingsToSet.forEach((binding) => {
+            const existingIndex = keyBindings.findIndex((b) => b.key === binding.key);
+            if (existingIndex >= 0) {
+              const existing = keyBindings[existingIndex];
+              if (existing.protected) {
+                console.warn(`Cannot override protected key: ${binding.key}`);
+                return;
+              }
+              keyBindings[existingIndex] = {
+                ...existing,
+                ...binding,
+                order: binding.order !== void 0 ? binding.order : existing.order,
+                enabled: binding.enabled !== void 0 ? binding.enabled : existing.enabled !== void 0 ? existing.enabled : true
+              };
+            } else {
+              keyBindings.push({
+                protected: false,
+                order: 999,
+                enabled: true,
+                ...binding
+              });
+            }
+          });
+        },
+        updateKeyBinding: (keyName, updates) => {
+          const index = keyBindings.findIndex((b) => b.key === keyName);
+          if (index >= 0) {
+            keyBindings[index] = {
+              ...keyBindings[index],
+              ...updates
+            };
+          }
+        },
+        removeKeyBinding: (keyName) => {
+          const index = keyBindings.findIndex((b) => b.key === keyName);
+          if (index >= 0) {
+            if (keyBindings[index].protected) {
+              console.warn(`Cannot remove protected key: ${keyName}`);
+              return;
+            }
+            keyBindings.splice(index, 1);
+          }
+        },
+        addFooter: (item) => {
+          customFooterItems.push(item);
+        },
+        clearFooter: () => {
+          customFooterItems.length = 0;
+        },
+        setFooter: (items) => {
+          customFooterItems.length = 0;
+          const itemsArray = Array.isArray(items) ? items : [items];
+          customFooterItems.push(...itemsArray);
+        },
+        update: () => {
+          setUpdateCounter((c) => c + 1);
+        },
+        goBack: () => {
+          if (actions.back) {
+            actions.back();
+          }
+        },
+        close: (result) => {
+          cleanup(result);
+        },
+        parentData
+      };
+      if (!renderResult) {
+        renderResult = onRender(context);
+      }
+      useInput((input, key) => {
+        if (key.ctrl && input === "c") {
+          cleanup(null);
+          process.exit(0);
+          return;
+        }
+        let matchedBinding = null;
+        for (const binding of keyBindings) {
+          let keyMatches = false;
+          if (key[binding.key]) {
+            keyMatches = true;
+          } else if (input === binding.key) {
+            keyMatches = true;
+          }
+          if (keyMatches) {
+            if (binding.enabled === false) {
+              continue;
+            }
+            if (binding.condition && !binding.condition(context)) {
+              continue;
+            }
+            matchedBinding = binding;
+            break;
+          }
+        }
+        if (matchedBinding && actions[matchedBinding.action]) {
+          const actionResult = actions[matchedBinding.action]({
+            input,
+            key,
+            binding: matchedBinding
+          });
+        }
+      });
+      const footerLines = [];
+      const bindingItems = formatKeyBindings(keyBindings, "long");
+      if (bindingItems.length > 0) {
+        const bindingsLine = [];
+        bindingItems.forEach((item, idx) => {
+          if (idx > 0) {
+            bindingsLine.push(", ");
+          }
+          bindingsLine.push(item);
+        });
+        const allStrings = bindingItems.every((item) => typeof item === "string");
+        if (allStrings) {
+          footerLines.push(bindingsLine.join(""));
+        } else {
+          const wrappedBindingsLine = bindingsLine.map(
+            (item) => typeof item === "string" ? h3(Text3, {}, item) : item
+          );
+          footerLines.push(wrappedBindingsLine);
+        }
+      }
+      customFooterItems.forEach((item) => {
+        if (typeof item === "string") {
+          footerLines.push(item);
+        } else {
+          footerLines.push(item);
+        }
+      });
+      return h3(
+        ScreenContainer,
+        {},
+        h3(ScreenTitle, { text: title }),
+        h3(ScreenDivider),
+        h3(ScreenRow, {}, h3(Text3, {}, " ")),
+        renderResult,
+        h3(ScreenRow, {}, h3(Text3, {}, " ")),
+        h3(ScreenDivider),
+        h3(ScreenFooter, { lines: footerLines })
+      );
+    };
+    const cleanup = (result) => {
+      if (instance) instance.unmount();
+      setTimeout(() => resolve2(result), 50);
+    };
+    instance = render(h3(Screen));
+  });
+}
+async function showListScreen(config2) {
+  const { title, items, onSelect, onEscape, parentData, initialSelectedIndex = 0, renderItem, getTitle, sortable, maxHeight, sortHighlightStyle, selectionMarker } = config2;
+  return showScreen({
+    title,
+    parentData,
+    onRender: (ctx) => {
+      const selectedIndexRef = { current: initialSelectedIndex };
+      ctx.setAction("select", () => {
+        const selected = items[selectedIndexRef.current];
+        if (onSelect) {
+          const result = onSelect(selected.value, selectedIndexRef.current);
+          ctx.close(result);
+        }
+      });
+      if (onEscape) {
+        ctx.setAction("back", () => {
+          const result = onEscape(selectedIndexRef.current);
+          ctx.close(result);
+        });
+      }
+      ctx.setKeyBinding({ key: "return", caption: "select", action: "select", order: 2 });
+      return h3(ListComponent, { items, ctx, selectedIndexRef, renderItem, getTitle, sortable, maxHeight, sortHighlightStyle, selectionMarker });
+    }
+  });
+}
+async function showMultiColumnListScreen(config2) {
+  const { title, items, onSelect, onEscape, parentData, initialSelectedIndex = 0 } = config2;
+  return showScreen({
+    title,
+    parentData,
+    onRender: (ctx) => {
+      const selectedIndexRef = { current: initialSelectedIndex };
+      ctx.setAction("select", () => {
+        const selected = items[selectedIndexRef.current];
+        if (onSelect) {
+          const result = onSelect(selected, selectedIndexRef.current);
+          ctx.close(result);
+        }
+      });
+      if (onEscape) {
+        ctx.setAction("back", () => {
+          const result = onEscape(selectedIndexRef.current);
+          ctx.close(result);
+        });
+      }
+      ctx.setKeyBinding({ key: "return", caption: "select", action: "select", order: 2 });
+      return h3(MultiColumnListComponent, { items, ctx, selectedIndexRef });
+    }
+  });
+}
+async function showMultiColumnListWithPreviewScreen(config2) {
+  const { title, items, getPreviewContent, onSelect, onEscape, parentData, initialSelectedIndex = 0 } = config2;
+  return showScreen({
+    title,
+    parentData,
+    onRender: (ctx) => {
+      const selectedIndexRef = { current: initialSelectedIndex };
+      ctx.setAction("select", () => {
+        const selected = items[selectedIndexRef.current];
+        if (onSelect) {
+          const result = onSelect(selected, selectedIndexRef.current);
+          ctx.close(result);
+        }
+      });
+      if (onEscape) {
+        ctx.setAction("back", () => {
+          const result = onEscape(selectedIndexRef.current);
+          ctx.close(result);
+        });
+      }
+      ctx.setKeyBinding({ key: "return", caption: "select", action: "select", order: 2 });
+      return h3(MultiColumnListWithPreviewComponent, { items, getPreviewContent, ctx, selectedIndexRef });
+    }
+  });
+}
+var showMenuScreen, showWordGridScreen;
+var init_screens = __esm({
+  "src/screen/screens.ts"() {
+    "use strict";
+    init_components();
+    init_list_components();
+    showMenuScreen = showListScreen;
+    showWordGridScreen = showMultiColumnListScreen;
+  }
+});
+
+// src/screen/ui-elements.ts
+import { createElement as h4 } from "react";
+import { Box as Box4, Text as Text4 } from "ink";
+function ListItem({
+  children,
+  isSelected = false,
+  color = "white",
+  backgroundColor,
+  bold = false,
+  dimColor = false
+}) {
+  return h4(
+    Box4,
+    {},
+    h4(Text4, {
+      color: isSelected ? backgroundColor || "green" : color,
+      backgroundColor: isSelected ? color : backgroundColor,
+      bold: isSelected || bold,
+      dimColor: !isSelected && dimColor
+    }, children)
+  );
+}
+function TextBlock({
+  text,
+  color = "white",
+  dimmed = false,
+  bold = false,
+  maxWidth
+}) {
+  return h4(
+    Box4,
+    {},
+    h4(Text4, {
+      color,
+      dimColor: dimmed,
+      bold
+    }, text)
+  );
+}
+function Divider({ character = "\u2500", width = 80 }) {
+  return h4(
+    Box4,
+    { marginY: 1 },
+    h4(Text4, { dimColor: true }, character.repeat(width))
+  );
+}
+function GridCell({
+  children,
+  width,
+  color = "white",
+  backgroundColor,
+  bold = false,
+  dimColor = false,
+  align = "left"
+}) {
+  return h4(
+    Box4,
+    { width },
+    h4(Text4, {
+      color,
+      backgroundColor,
+      bold,
+      dimColor,
+      textAlign: align
+    }, children)
+  );
+}
+function InputField({ prompt, value, onChange, onSubmit }) {
+  return h4(
+    Box4,
+    { flexDirection: "column" },
+    h4(Text4, {}, prompt),
+    h4(
+      Box4,
+      { marginTop: 1 },
+      h4(Text4, { color: "cyan" }, " > ", value, "_")
+    )
+  );
+}
+var init_ui_elements = __esm({
+  "src/screen/ui-elements.ts"() {
+    "use strict";
+  }
+});
+
+// src/screen/utils.ts
+function buildBreadcrumb(parts) {
+  if (parts.length === 0) return "";
+  if (parts.length === 1) return parts[0];
+  return parts.slice(1).map((part) => `\u2190  ${part}`).join("  ");
+}
+function buildDetailBreadcrumb(path, suffix = "") {
+  if (path.length <= 1) {
+    return suffix ? `\u2190  ${suffix}` : path[0] || "";
+  }
+  const breadcrumb = buildBreadcrumb(path);
+  return suffix ? `${breadcrumb} ${suffix}` : breadcrumb;
+}
+var init_utils = __esm({
+  "src/screen/utils.ts"() {
+    "use strict";
+  }
+});
+
+// src/screen/footer-builder.ts
+function buildFooter(config2 = {}) {
+  const {
+    navigation = null,
+    actions = null,
+    info = null,
+    escape = "Esc to go back",
+    custom = null
+  } = config2;
+  const lines = [];
+  const mainParts = [];
+  if (navigation) {
+    mainParts.push(navigation);
+  }
+  if (actions) {
+    mainParts.push(actions);
+  }
+  if (escape) {
+    mainParts.push(escape);
+  }
+  if (mainParts.length > 0) {
+    lines.push(mainParts.join(", "));
+  }
+  if (info) {
+    const infoLines = Array.isArray(info) ? info : [info];
+    lines.push(...infoLines);
+  }
+  if (custom) {
+    const customLines = Array.isArray(custom) ? custom : [custom];
+    lines.push(...customLines);
+  }
+  return lines;
+}
+function organizeFooterMessages(messages) {
+  if (!messages || messages.length === 0) {
+    return ["Esc to go back"];
+  }
+  const navigation = messages.filter((m) => m.includes("\u2191") || m.includes("\u2193") || m.includes("\u2190") || m.includes("\u2192"));
+  const actions = messages.filter((m) => m.includes("Enter") || m.includes("select") || m.includes("submit"));
+  const escape = messages.filter((m) => m.includes("Esc"));
+  const others = messages.filter(
+    (m) => !navigation.includes(m) && !actions.includes(m) && !escape.includes(m)
+  );
+  const lines = [];
+  const mainLine = [...navigation, ...actions, ...escape].join(", ");
+  if (mainLine) lines.push(mainLine);
+  lines.push(...others);
+  return lines;
+}
+var FooterPresets;
+var init_footer_builder = __esm({
+  "src/screen/footer-builder.ts"() {
+    "use strict";
+    FooterPresets = {
+      /**
+       * Menu screen footer
+       */
+      menu: (customInfo = null) => buildFooter({
+        navigation: "\u2191/\u2193 to navigate",
+        actions: "Enter to select",
+        escape: "Esc to go back",
+        info: customInfo
+      }),
+      /**
+       * Word grid footer
+       */
+      wordGrid: (totalWords) => buildFooter({
+        navigation: "\u2191\u2193\u2190\u2192 to navigate",
+        actions: "Enter to select",
+        escape: "Esc to go back",
+        info: `Total: ${totalWords} words`
+      }),
+      /**
+       * Text input footer
+       */
+      textInput: () => buildFooter({
+        actions: "Type and press Enter to submit",
+        escape: "Esc to cancel"
+      }),
+      /**
+       * Info/static screen footer
+       */
+      info: () => buildFooter({
+        escape: "Esc to continue"
+      }),
+      /**
+       * Main menu footer (escape exits)
+       */
+      mainMenu: () => buildFooter({
+        navigation: "\u2191/\u2193 to navigate",
+        actions: "Enter to select",
+        escape: "Esc to exit"
+      }),
+      /**
+       * Action menu footer (for word cards, etc.)
+       */
+      actionMenu: (hasAudio = false) => {
+        const parts = buildFooter({
+          navigation: "\u2191/\u2193 to navigate",
+          actions: "Enter to select",
+          escape: "Esc to go back"
+        });
+        if (hasAudio) {
+          parts.push("Audio available");
+        }
+        return parts;
+      }
+    };
+  }
+});
+
+// src/screen/index.ts
+var screen_exports = {};
+__export(screen_exports, {
+  Box: () => Box5,
+  Divider: () => Divider,
+  FooterPresets: () => FooterPresets,
+  GridCell: () => GridCell,
+  InputField: () => InputField,
+  ListComponent: () => ListComponent,
+  ListItem: () => ListItem,
+  MultiColumnListComponent: () => MultiColumnListComponent,
+  MultiColumnListWithPreviewComponent: () => MultiColumnListWithPreviewComponent,
+  React: () => React5,
+  ScreenBody: () => ScreenBody,
+  ScreenContainer: () => ScreenContainer,
+  ScreenDivider: () => ScreenDivider,
+  ScreenFooter: () => ScreenFooter,
+  ScreenRow: () => ScreenRow,
+  ScreenTitle: () => ScreenTitle,
+  Text: () => Text5,
+  TextBlock: () => TextBlock,
+  buildBreadcrumb: () => buildBreadcrumb,
+  buildDetailBreadcrumb: () => buildDetailBreadcrumb,
+  buildFooter: () => buildFooter,
+  h: () => createElement2,
+  load: () => load,
+  organizeFooterMessages: () => organizeFooterMessages,
+  showListScreen: () => showListScreen,
+  showMenuScreen: () => showMenuScreen,
+  showMultiColumnListScreen: () => showMultiColumnListScreen,
+  showMultiColumnListWithPreviewScreen: () => showMultiColumnListWithPreviewScreen,
+  showScreen: () => showScreen,
+  showWordGridScreen: () => showWordGridScreen,
+  useCallback: () => useCallback,
+  useEffect: () => useEffect3,
+  useInput: () => useInput2,
+  useMemo: () => useMemo,
+  useRef: () => useRef3,
+  useState: () => useState3
+});
+import React5, { useState as useState3, useEffect as useEffect3, useRef as useRef3, useMemo, useCallback, createElement as createElement2 } from "react";
+import { Box as Box5, Text as Text5, useInput as useInput2 } from "ink";
+async function load() {
+  if (loadPromise) return loadPromise;
+  loadPromise = Promise.all([
+    import("react"),
+    import("ink")
+  ]).then(() => {
+  });
+  return loadPromise;
+}
+var loadPromise;
+var init_screen = __esm({
+  "src/screen/index.ts"() {
+    "use strict";
+    init_screens();
+    init_list_components();
+    init_components();
+    init_ui_elements();
+    init_utils();
+    init_footer_builder();
+    loadPromise = null;
+    if (typeof window === "undefined") {
+      load().catch(() => {
+      });
+    }
+  }
+});
 
 // src/args/index.ts
 import { readFileSync, existsSync } from "fs";
@@ -1023,6 +2115,18 @@ async function init(flow, opts = {}) {
   let stop = false;
   let context = null;
   try {
+    try {
+      const screenModule = await Promise.resolve().then(() => (init_screen(), screen_exports));
+      if (screenModule && typeof screenModule.load === "function") {
+        await screenModule.load();
+      }
+    } catch {
+      if (typeof __require !== "undefined") {
+        try {
+        } catch {
+        }
+      }
+    }
     context = setup(opts);
     context.isStop = () => stop;
     context = await setupModules(context, opts);