ink-virtual-list 0.2.1 → 0.2.3

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 archcorsair
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2025 archcorsair
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,213 +1,213 @@
-# ink-virtual-list
-
-A virtualized list component for [Ink](https://github.com/vadimdemedes/ink) terminal applications. Only renders visible items for optimal performance with large datasets.
-
-## Features
-
-- **Virtualized rendering** - Only renders items visible in the viewport
-- **Automatic scrolling** - Keeps selected item in view as you navigate
-- **Terminal-aware** - Responds to terminal resize events
-- **Flexible height** - Fixed height or auto-fill available terminal space
-- **Customizable indicators** - Override default overflow indicators ("▲ N more")
-- **TypeScript first** - Full type safety with generics
-- **Imperative API** - Programmatic scrolling via ref
-
-## Installation
-
-```bash
-# npm
-npm install ink-virtual-list
-
-# jsr
-npx jsr add @archcorsair/ink-virtual-list
-
-# bun
-bun add ink-virtual-list
-```
-
-## Usage
-
-### Basic Example
-
-```tsx
-import { VirtualList } from 'ink-virtual-list';
-import { Text } from 'ink';
-import { useState } from 'react';
-
-function App() {
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  const items = Array.from({ length: 1000 }, (_, i) => `Item ${i + 1}`);
-
-  return (
-    <VirtualList
-      items={items}
-      selectedIndex={selectedIndex}
-      height={10}
-      renderItem={({ item, isSelected }) => (
-        <Text color={isSelected ? 'cyan' : 'white'}>
-          {isSelected ? '> ' : '  '}
-          {item}
-        </Text>
-      )}
-    />
-  );
-}
-```
-
-### Auto-fill Terminal Height
-
-```tsx
-<VirtualList
-  items={items}
-  height="auto"
-  reservedLines={5}  // Reserve space for header/footer
-  renderItem={({ item }) => <Text>{item}</Text>}
-/>
-```
-
-### Custom Overflow Indicators
-
-```tsx
-<VirtualList
-  items={items}
-  renderOverflowTop={(count) => <Text dimColor>↑ {count} hidden</Text>}
-  renderOverflowBottom={(count) => <Text dimColor>↓ {count} hidden</Text>}
-  renderItem={({ item }) => <Text>{item}</Text>}
-/>
-```
-
-### Imperative Scrolling
-
-```tsx
-import { useRef } from 'react';
-import type { VirtualListRef } from 'ink-virtual-list';
-
-function App() {
-  const listRef = useRef<VirtualListRef>(null);
-
-  const scrollToTop = () => {
-    listRef.current?.scrollToIndex(0, 'top');
-  };
-
-  return (
-    <VirtualList
-      ref={listRef}
-      items={items}
-      renderItem={({ item }) => <Text>{item}</Text>}
-    />
-  );
-}
-```
-
-## API
-
-### Props
-
-#### Required
-
-- **`items: T[]`** - Array of items to render
-- **`renderItem: (props: RenderItemProps<T>) => ReactNode`** - Render function for each visible item
-  - Receives: `{ item: T, index: number, isSelected: boolean }`
-
-#### Optional
-
-- **`selectedIndex?: number`** - Index of currently selected item (default: `0`)
-- **`keyExtractor?: (item: T, index: number) => string`** - Custom key extractor for list items
-- **`height?: number | "auto"`** - Fixed height in lines or `"auto"` to fill terminal (default: `10`)
-- **`reservedLines?: number`** - Lines to reserve when using `height="auto"` (default: `0`)
-- **`itemHeight?: number`** - Height of each item in lines (default: `1`)
-- **`showOverflowIndicators?: boolean`** - Show "N more" indicators (default: `true`)
-- **`renderOverflowTop?: (count: number) => ReactNode`** - Custom top overflow indicator
-- **`renderOverflowBottom?: (count: number) => ReactNode`** - Custom bottom overflow indicator
-- **`renderScrollBar?: (viewport: ViewportState) => ReactNode`** - Custom scrollbar renderer
-- **`onViewportChange?: (viewport: ViewportState) => void`** - Callback when viewport changes
-
-### Ref Methods
-
-```typescript
-interface VirtualListRef {
-  scrollToIndex: (index: number, alignment?: 'auto' | 'top' | 'center' | 'bottom') => void;
-  getViewport: () => ViewportState;
-  remeasure: () => void;
-}
-```
-
-- **`scrollToIndex(index, alignment?)`** - Scroll to bring an index into view
-  - `'auto'` (default) - Only scroll if needed
-  - `'top'` - Align item to top of viewport
-  - `'center'` - Center item in viewport
-  - `'bottom'` - Align item to bottom of viewport
-- **`getViewport()`** - Get current viewport state (`{ offset, visibleCount, totalCount }`)
-- **`remeasure()`** - Force recalculation of viewport dimensions
-
-### Types
-
-```typescript
-interface RenderItemProps<T> {
-  item: T;
-  index: number;
-  isSelected: boolean;
-}
-
-interface ViewportState {
-  offset: number;       // Items scrolled past
-  visibleCount: number; // Items currently visible
-  totalCount: number;   // Total items
-}
-```
-
-## Advanced Example
-
-```tsx
-import { VirtualList } from 'ink-virtual-list';
-import { Box, Text } from 'ink';
-import { useRef, useState } from 'react';
-import type { VirtualListRef } from 'ink-virtual-list';
-
-interface Todo {
-  id: string;
-  title: string;
-  completed: boolean;
-}
-
-function TodoApp() {
-  const [todos] = useState<Todo[]>([
-    { id: '1', title: 'Learn Ink', completed: true },
-    { id: '2', title: 'Build CLI', completed: false },
-    // ... 1000s more
-  ]);
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  const listRef = useRef<VirtualListRef>(null);
-
-  return (
-    <Box flexDirection="column">
-      <Text bold>My Todos ({todos.length})</Text>
-
-      <VirtualList
-        ref={listRef}
-        items={todos}
-        selectedIndex={selectedIndex}
-        height="auto"
-        reservedLines={3}
-        keyExtractor={(todo) => todo.id}
-        renderItem={({ item, isSelected }) => (
-          <Box>
-            <Text color={isSelected ? 'cyan' : 'white'}>
-              {isSelected ? '❯ ' : '  '}
-              {item.completed ? '✓' : '○'} {item.title}
-            </Text>
-          </Box>
-        )}
-      />
-
-      <Text dimColor>
-        {selectedIndex + 1} / {todos.length}
-      </Text>
-    </Box>
-  );
-}
-```
-
-## License
-
-MIT
+# ink-virtual-list
+
+A virtualized list component for [Ink](https://github.com/vadimdemedes/ink) terminal applications. Only renders visible items for optimal performance with large datasets.
+
+## Features
+
+- **Virtualized rendering** - Only renders items visible in the viewport
+- **Automatic scrolling** - Keeps selected item in view as you navigate
+- **Terminal-aware** - Responds to terminal resize events
+- **Flexible height** - Fixed height or auto-fill available terminal space
+- **Customizable indicators** - Override default overflow indicators ("▲ N more")
+- **TypeScript first** - Full type safety with generics
+- **Imperative API** - Programmatic scrolling via ref
+
+## Installation
+
+```bash
+# npm
+npm install ink-virtual-list
+
+# jsr
+npx jsr add @archcorsair/ink-virtual-list
+
+# bun
+bun add ink-virtual-list
+```
+
+## Usage
+
+### Basic Example
+
+```tsx
+import { VirtualList } from 'ink-virtual-list';
+import { Text } from 'ink';
+import { useState } from 'react';
+
+function App() {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const items = Array.from({ length: 1000 }, (_, i) => `Item ${i + 1}`);
+
+  return (
+    <VirtualList
+      items={items}
+      selectedIndex={selectedIndex}
+      height={10}
+      renderItem={({ item, isSelected }) => (
+        <Text color={isSelected ? 'cyan' : 'white'}>
+          {isSelected ? '> ' : '  '}
+          {item}
+        </Text>
+      )}
+    />
+  );
+}
+```
+
+### Auto-fill Terminal Height
+
+```tsx
+<VirtualList
+  items={items}
+  height="auto"
+  reservedLines={5}  // Reserve space for header/footer
+  renderItem={({ item }) => <Text>{item}</Text>}
+/>
+```
+
+### Custom Overflow Indicators
+
+```tsx
+<VirtualList
+  items={items}
+  renderOverflowTop={(count) => <Text dimColor>↑ {count} hidden</Text>}
+  renderOverflowBottom={(count) => <Text dimColor>↓ {count} hidden</Text>}
+  renderItem={({ item }) => <Text>{item}</Text>}
+/>
+```
+
+### Imperative Scrolling
+
+```tsx
+import { useRef } from 'react';
+import type { VirtualListRef } from 'ink-virtual-list';
+
+function App() {
+  const listRef = useRef<VirtualListRef>(null);
+
+  const scrollToTop = () => {
+    listRef.current?.scrollToIndex(0, 'top');
+  };
+
+  return (
+    <VirtualList
+      ref={listRef}
+      items={items}
+      renderItem={({ item }) => <Text>{item}</Text>}
+    />
+  );
+}
+```
+
+## API
+
+### Props
+
+#### Required
+
+- **`items: T[]`** - Array of items to render
+- **`renderItem: (props: RenderItemProps<T>) => ReactNode`** - Render function for each visible item
+  - Receives: `{ item: T, index: number, isSelected: boolean }`
+
+#### Optional
+
+- **`selectedIndex?: number`** - Index of currently selected item (default: `0`)
+- **`keyExtractor?: (item: T, index: number) => string`** - Custom key extractor for list items
+- **`height?: number | "auto"`** - Fixed height in lines or `"auto"` to fill terminal (default: `10`)
+- **`reservedLines?: number`** - Lines to reserve when using `height="auto"` (default: `0`)
+- **`itemHeight?: number`** - Height of each item in lines (default: `1`)
+- **`showOverflowIndicators?: boolean`** - Show "N more" indicators (default: `true`)
+- **`renderOverflowTop?: (count: number) => ReactNode`** - Custom top overflow indicator
+- **`renderOverflowBottom?: (count: number) => ReactNode`** - Custom bottom overflow indicator
+- **`renderScrollBar?: (viewport: ViewportState) => ReactNode`** - Custom scrollbar renderer
+- **`onViewportChange?: (viewport: ViewportState) => void`** - Callback when viewport changes
+
+### Ref Methods
+
+```typescript
+interface VirtualListRef {
+  scrollToIndex: (index: number, alignment?: 'auto' | 'top' | 'center' | 'bottom') => void;
+  getViewport: () => ViewportState;
+  remeasure: () => void;
+}
+```
+
+- **`scrollToIndex(index, alignment?)`** - Scroll to bring an index into view
+  - `'auto'` (default) - Only scroll if needed
+  - `'top'` - Align item to top of viewport
+  - `'center'` - Center item in viewport
+  - `'bottom'` - Align item to bottom of viewport
+- **`getViewport()`** - Get current viewport state (`{ offset, visibleCount, totalCount }`)
+- **`remeasure()`** - Force recalculation of viewport dimensions
+
+### Types
+
+```typescript
+interface RenderItemProps<T> {
+  item: T;
+  index: number;
+  isSelected: boolean;
+}
+
+interface ViewportState {
+  offset: number;       // Items scrolled past
+  visibleCount: number; // Items currently visible
+  totalCount: number;   // Total items
+}
+```
+
+## Advanced Example
+
+```tsx
+import { VirtualList } from 'ink-virtual-list';
+import { Box, Text } from 'ink';
+import { useRef, useState } from 'react';
+import type { VirtualListRef } from 'ink-virtual-list';
+
+interface Todo {
+  id: string;
+  title: string;
+  completed: boolean;
+}
+
+function TodoApp() {
+  const [todos] = useState<Todo[]>([
+    { id: '1', title: 'Learn Ink', completed: true },
+    { id: '2', title: 'Build CLI', completed: false },
+    // ... 1000s more
+  ]);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const listRef = useRef<VirtualListRef>(null);
+
+  return (
+    <Box flexDirection="column">
+      <Text bold>My Todos ({todos.length})</Text>
+
+      <VirtualList
+        ref={listRef}
+        items={todos}
+        selectedIndex={selectedIndex}
+        height="auto"
+        reservedLines={3}
+        keyExtractor={(todo) => todo.id}
+        renderItem={({ item, isSelected }) => (
+          <Box>
+            <Text color={isSelected ? 'cyan' : 'white'}>
+              {isSelected ? '❯ ' : '  '}
+              {item.completed ? '✓' : '○'} {item.title}
+            </Text>
+          </Box>
+        )}
+      />
+
+      <Text dimColor>
+        {selectedIndex + 1} / {todos.length}
+      </Text>
+    </Box>
+  );
+}
+```
+
+## License
+
+MIT

package/dist/index.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["src\\useTerminalSize.ts", "src\\VirtualList.tsx"],
+  "sources": ["src/useTerminalSize.ts", "src/VirtualList.tsx"],
   "sourcesContent": [
     "import { useStdout } from \"ink\";\nimport { useEffect, useState } from \"react\";\n\n/**\n * Represents the terminal dimensions.\n */\nexport interface TerminalSize {\n  /** Number of rows (lines) in the terminal */\n  rows: number;\n  /** Number of columns (characters) in the terminal */\n  columns: number;\n}\n\nconst DEFAULT_ROWS = 24;\nconst DEFAULT_COLUMNS = 80;\n\n/**\n * Hook that returns the current terminal size and updates on resize.\n * Uses Ink's stdout to detect terminal dimensions.\n */\nexport function useTerminalSize(): TerminalSize {\n  const { stdout } = useStdout();\n  const [size, setSize] = useState<TerminalSize>({\n    rows: stdout.rows ?? DEFAULT_ROWS,\n    columns: stdout.columns ?? DEFAULT_COLUMNS,\n  });\n\n  useEffect(() => {\n    // Skip resize listener in non-TTY environments (CI, pipes)\n    if (!stdout.isTTY) {\n      return;\n    }\n\n    const handleResize = () => {\n      setSize({\n        rows: stdout.rows ?? DEFAULT_ROWS,\n        columns: stdout.columns ?? DEFAULT_COLUMNS,\n      });\n    };\n\n    stdout.on(\"resize\", handleResize);\n    return () => {\n      stdout.off(\"resize\", handleResize);\n    };\n  }, [stdout]);\n\n  return size;\n}\n",
     "import { Box, Text } from \"ink\";\nimport { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from \"react\";\nimport type { RenderItemProps, ViewportState, VirtualListProps, VirtualListRef } from \"./types\";\nimport { useTerminalSize } from \"./useTerminalSize\";\n\nconst DEFAULT_HEIGHT = 10;\nconst DEFAULT_ITEM_HEIGHT = 1;\n\n/**\n * Attempts to extract a stable key from an item.\n * Checks for 'id' or 'key' properties on objects before falling back to index.\n */\nfunction getDefaultKey<T>(item: T, index: number): string {\n  if (item && typeof item === \"object\") {\n    const obj = item as Record<string, unknown>;\n    if (\"id\" in obj && (typeof obj.id === \"string\" || typeof obj.id === \"number\")) {\n      return String(obj.id);\n    }\n    if (\"key\" in obj && (typeof obj.key === \"string\" || typeof obj.key === \"number\")) {\n      return String(obj.key);\n    }\n  }\n  return String(index);\n}\n\n/**\n * Validates that itemHeight is a positive integer.\n * Throws an error if invalid.\n *\n * @param itemHeight - The height to validate\n */\nexport function validateItemHeight(itemHeight: number): void {\n  if (!Number.isInteger(itemHeight) || itemHeight < 1) {\n    throw new Error(`[ink-virtual-list] itemHeight must be a positive integer, got: ${itemHeight}`);\n  }\n}\n\n/**\n * Calculates the new viewport offset (scroll position) to ensure the selected index is visible.\n *\n * @param selectedIndex - The currently selected item index\n * @param currentOffset - The current viewport offset (top visible index)\n * @param visibleCount - The number of items that fit in the viewport\n * @returns The new offset, clamped to ensure the selection is visible\n */\nfunction calculateViewportOffset(selectedIndex: number, currentOffset: number, visibleCount: number): number {\n  // Selection above viewport - scroll up\n  if (selectedIndex < currentOffset) {\n    return selectedIndex;\n  }\n\n  // Selection below viewport - scroll down\n  if (selectedIndex >= currentOffset + visibleCount) {\n    return selectedIndex - visibleCount + 1;\n  }\n\n  // Selection visible - no change\n  return currentOffset;\n}\n\n/**\n * Inner component for VirtualList.\n * Handles the actual rendering logic, state management, and ref exposure.\n */\nfunction VirtualListInner<T>(props: VirtualListProps<T>, ref: React.ForwardedRef<VirtualListRef>): React.JSX.Element {\n  const {\n    items,\n    renderItem,\n    selectedIndex = 0,\n    keyExtractor,\n    height = DEFAULT_HEIGHT,\n    reservedLines = 0,\n    itemHeight = DEFAULT_ITEM_HEIGHT,\n    showOverflowIndicators = true,\n    overflowIndicatorThreshold = 1,\n    renderOverflowTop,\n    renderOverflowBottom,\n    renderScrollBar,\n    onViewportChange,\n  } = props;\n\n  // Validate itemHeight\n  validateItemHeight(itemHeight);\n\n  const { rows: terminalRows } = useTerminalSize();\n\n  // Calculate resolved height\n  const resolvedHeight = useMemo(() => {\n    if (typeof height === \"number\") {\n      return height;\n    }\n    // 'auto' - use terminal rows minus reserved\n    return Math.max(1, terminalRows - reservedLines);\n  }, [height, terminalRows, reservedLines]);\n\n  const resolvedItemHeight = itemHeight ?? DEFAULT_ITEM_HEIGHT;\n\n  // Reserve space for overflow indicators within the height budget\n  const indicatorLines = showOverflowIndicators ? 2 : 0;\n  const availableHeight = Math.max(0, resolvedHeight - indicatorLines);\n\n  // Calculate how many items fit in viewport\n  const visibleCount = Math.floor(availableHeight / resolvedItemHeight);\n\n  // Clamp selectedIndex to valid range\n  const clampedSelectedIndex = Math.max(0, Math.min(selectedIndex, items.length - 1));\n\n  // Lazy initial offset - positions selection at bottom of viewport if needed\n  const [viewportOffset, setViewportOffset] = useState(() => {\n    if (items.length === 0) return 0;\n    const maxOffset = Math.max(0, items.length - visibleCount);\n    if (clampedSelectedIndex >= visibleCount) {\n      return Math.min(clampedSelectedIndex - visibleCount + 1, maxOffset);\n    }\n    return 0;\n  });\n\n  // Sync viewport when selection changes\n  useEffect(() => {\n    const maxOffset = Math.max(0, items.length - visibleCount);\n    const targetOffset = calculateViewportOffset(clampedSelectedIndex, viewportOffset, visibleCount);\n    const clampedOffset = Math.min(Math.max(0, targetOffset), maxOffset);\n    if (clampedOffset !== viewportOffset) {\n      setViewportOffset(clampedOffset);\n    }\n  }, [clampedSelectedIndex, viewportOffset, visibleCount, items.length]);\n\n  // Build viewport state\n  const viewport: ViewportState = useMemo(\n    () => ({\n      offset: viewportOffset,\n      visibleCount,\n      totalCount: items.length,\n    }),\n    [viewportOffset, visibleCount, items.length],\n  );\n\n  // Notify on viewport change\n  useEffect(() => {\n    onViewportChange?.(viewport);\n  }, [viewport, onViewportChange]);\n\n  // Imperative handle\n  useImperativeHandle(\n    ref,\n    () => ({\n      scrollToIndex: (index: number, alignment: \"auto\" | \"top\" | \"center\" | \"bottom\" = \"auto\") => {\n        const clampedIndex = Math.max(0, Math.min(index, items.length - 1));\n        let newOffset: number;\n\n        switch (alignment) {\n          case \"top\":\n            newOffset = clampedIndex;\n            break;\n          case \"center\":\n            newOffset = clampedIndex - Math.floor(visibleCount / 2);\n            break;\n          case \"bottom\":\n            newOffset = clampedIndex - visibleCount + 1;\n            break;\n          default: // 'auto'\n            newOffset = calculateViewportOffset(clampedIndex, viewportOffset, visibleCount);\n        }\n\n        const maxOffset = Math.max(0, items.length - visibleCount);\n        setViewportOffset(Math.min(Math.max(0, newOffset), maxOffset));\n      },\n      getViewport: () => viewport,\n      remeasure: () => {\n        // Force recalculation by updating state\n        setViewportOffset((prev) => {\n          const maxOffset = Math.max(0, items.length - visibleCount);\n          return Math.min(prev, maxOffset);\n        });\n      },\n    }),\n    [items.length, visibleCount, viewportOffset, viewport],\n  );\n\n  // Calculate overflow counts\n  const overflowTop = viewportOffset;\n  const overflowBottom = Math.max(0, items.length - viewportOffset - visibleCount);\n\n  // Get visible items\n  const visibleItems = items.slice(viewportOffset, viewportOffset + visibleCount);\n\n  // Default overflow renderers (paddingLeft aligns with list content)\n  const defaultOverflowTop = (count: number) => (\n    <Box paddingLeft={2}>\n      <Text dimColor>▲ {count} more</Text>\n    </Box>\n  );\n  const defaultOverflowBottom = (count: number) => (\n    <Box paddingLeft={2}>\n      <Text dimColor>▼ {count} more</Text>\n    </Box>\n  );\n\n  const topIndicator = renderOverflowTop ?? defaultOverflowTop;\n  const bottomIndicator = renderOverflowBottom ?? defaultOverflowBottom;\n\n  return (\n    <Box flexDirection=\"column\">\n      {showOverflowIndicators && overflowTop >= overflowIndicatorThreshold && topIndicator(overflowTop)}\n\n      {visibleItems.map((item, idx) => {\n        const actualIndex = viewportOffset + idx;\n        const key = keyExtractor ? keyExtractor(item, actualIndex) : getDefaultKey(item, actualIndex);\n\n        const itemProps: RenderItemProps<T> = {\n          item,\n          index: actualIndex,\n          isSelected: actualIndex === clampedSelectedIndex,\n        };\n\n        return (\n          <Box key={key} height={resolvedItemHeight} overflow=\"hidden\">\n            {renderItem(itemProps)}\n          </Box>\n        );\n      })}\n\n      {showOverflowIndicators && overflowBottom >= overflowIndicatorThreshold && bottomIndicator(overflowBottom)}\n\n      {renderScrollBar?.(viewport)}\n    </Box>\n  );\n}\n\n/**\n * A virtualized list component for Ink.\n *\n * Efficiently renders large lists by only rendering items currently visible in the viewport.\n * Supports keyboard navigation, scrolling, and dynamic resizing.\n *\n * @example\n * ```tsx\n * <VirtualList\n *   items={['Item 1', 'Item 2']}\n *   renderItem={({item}) => <Text>{item}</Text>}\n * />\n * ```\n */\nexport const VirtualList = forwardRef(VirtualListInner) as <T>(\n  props: VirtualListProps<T> & { ref?: React.ForwardedRef<VirtualListRef> },\n) => ReturnType<typeof VirtualListInner>;\n"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ink-virtual-list",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "A virtualized list component for Ink terminal applications",
   "type": "module",
   "files": [