@nick-skriabin/glyph 0.1.65 → 0.1.67

package/README.md

@@ -276,6 +276,18 @@ Set `focusable={false}` if you want the ScrollView to only scroll when a child e
 </ScrollView>
 ```
 
+**Virtualization:** For large lists (1000+ items), add the `virtualize` prop to only render visible children. Heights are auto-measured — no configuration needed:
+
+```tsx
+<ScrollView virtualize style={{ height: 20, border: "single" }}>
+  {items.map((item) => (
+    <Text key={item.id}>{item.name}</Text>
+  ))}
+</ScrollView>
+```
+
+This renders only visible items + a small overscan buffer, making it fast even with 10,000+ items. Use `estimatedItemHeight` prop if your items are taller than 1 line (default).
+
 ### `<List>`
 
 Keyboard-navigable selection list with a render callback.
@@ -834,6 +846,7 @@ Interactive examples are included in the repo. Each demonstrates different compo
 | **jump-nav** | Quick navigation with keyboard hints | [View →](https://github.com/nick-skriabin/glyph/tree/main/examples/jump-nav) |
 | **ansi-text** | ANSI escape codes and colored output | [View →](https://github.com/nick-skriabin/glyph/tree/main/examples/ansi-text) |
 | **image** | Inline images and OS preview | [View →](https://github.com/nick-skriabin/glyph/tree/main/examples/image) |
+| **virtualized-list** | Virtualized ScrollView with 10k+ items | [View →](https://github.com/nick-skriabin/glyph/tree/main/examples/virtualized-list) |
 | **showcase** | Progress bars, Spinners, Toasts | [View →](https://github.com/nick-skriabin/glyph/tree/main/examples/showcase) |
 | **dashboard** | Full task manager (all components) | [View →](https://github.com/nick-skriabin/glyph/tree/main/examples/dashboard) |
 

package/dist/index.d.ts

@@ -208,8 +208,23 @@ interface ButtonProps {
 }
 declare function Button({ onPress, style, focusedStyle, children, disabled, }: ButtonProps): React.JSX.Element;
 
+/** Visible range passed to render function in virtualized mode */
+interface VisibleRange {
+    /** First visible line index (0-based) */
+    start: number;
+    /** One past the last visible line index */
+    end: number;
+    /** Current scroll offset */
+    scrollOffset: number;
+    /** Viewport height in lines */
+    viewportHeight: number;
+}
 interface ScrollViewProps {
-    children?: ReactNode;
+    /**
+     * Children to render. When `virtualize` is true, only visible children are rendered.
+     * Can also be a render function `(range: VisibleRange) => ReactNode` for line-based virtualization.
+     */
+    children?: ReactNode | ((range: VisibleRange) => ReactNode);
     style?: Style;
     /** Controlled scroll offset (rows from top) */
     scrollOffset?: number;
@@ -229,8 +244,25 @@ interface ScrollViewProps {
     focusable?: boolean;
     /** Style applied when ScrollView is focused */
     focusedStyle?: Style;
+    /**
+     * Total content height in lines (for render function mode).
+     * When set with a render function, enables line-based virtualization.
+     */
+    totalLines?: number;
+    /** Extra lines to render above/below viewport (default: 2) */
+    overscan?: number;
+    /**
+     * Enable virtualization. When true, only visible children are rendered.
+     * Heights are auto-measured - no need to specify them!
+     */
+    virtualize?: boolean;
+    /**
+     * Estimated height per child in lines (default: 1).
+     * Used for initial scroll calculations before actual heights are measured.
+     */
+    estimatedItemHeight?: number;
 }
-declare function ScrollView({ children, style, scrollOffset: controlledOffset, onScroll, defaultScrollOffset, scrollStep, disableKeyboard, scrollToFocus, showScrollbar, focusable, focusedStyle, }: ScrollViewProps): React.JSX.Element;
+declare function ScrollView({ children, style, scrollOffset: controlledOffset, onScroll, defaultScrollOffset, scrollStep, disableKeyboard, scrollToFocus, showScrollbar, focusable, focusedStyle, totalLines, overscan, virtualize, estimatedItemHeight, }: ScrollViewProps): React.JSX.Element;
 
 interface ListItemInfo {
     index: number;
@@ -800,4 +832,4 @@ declare function detectTerminalCapabilities(debug?: boolean): TerminalCapabiliti
  */
 declare function supportsInlineImages(): boolean;
 
-export { type AlertOptions, type AnsiStyle, type AppHandle, type BorderStyle, Box, type BoxProps, Button, type ButtonProps, Checkbox, type CheckboxProps, type Color, type ConfirmOptions, type DialogContextValue, DialogHost, type DialogHostProps, type DimensionValue, type FocusRegistryValue, FocusScope, type FocusScopeProps, type FocusableElement, type HexColor, Image, type ImageProps, type ImageState, Input, type InputProps, type InputType, JumpNav, type JumpNavProps, type Key, Keybind, type KeybindProps, type LayoutRect, List, type ListItemInfo, type ListProps, type MaskOptions, Menu, type MenuItem, type MenuProps, type NamedColor, Portal, type PortalProps, Progress, type ProgressProps, type RGBColor, Radio, type RadioItem, type RadioProps, type RenderOptions, ScrollView, type ScrollViewProps, Select, type SelectItem, type SelectProps, Spacer, type SpacerProps, Spinner, type SpinnerProps, type Style, type StyledSegment, type TerminalCapabilities, Text, type TextAlign, type TextProps, type Toast, ToastHost, type ToastHostProps, type ToastPosition, type ToastVariant, type UseFocusableOptions, type UseFocusableResult, type WrapMode, createMask, detectTerminalCapabilities, masks, parseAnsi, render, stripAnsi, supportsInlineImages, useApp, useDialog, useFocus, useFocusRegistry, useFocusable, useInput, useLayout, useToast };
+export { type AlertOptions, type AnsiStyle, type AppHandle, type BorderStyle, Box, type BoxProps, Button, type ButtonProps, Checkbox, type CheckboxProps, type Color, type ConfirmOptions, type DialogContextValue, DialogHost, type DialogHostProps, type DimensionValue, type FocusRegistryValue, FocusScope, type FocusScopeProps, type FocusableElement, type HexColor, Image, type ImageProps, type ImageState, Input, type InputProps, type InputType, JumpNav, type JumpNavProps, type Key, Keybind, type KeybindProps, type LayoutRect, List, type ListItemInfo, type ListProps, type MaskOptions, Menu, type MenuItem, type MenuProps, type NamedColor, Portal, type PortalProps, Progress, type ProgressProps, type RGBColor, Radio, type RadioItem, type RadioProps, type RenderOptions, ScrollView, type ScrollViewProps, Select, type SelectItem, type SelectProps, Spacer, type SpacerProps, Spinner, type SpinnerProps, type Style, type StyledSegment, type TerminalCapabilities, Text, type TextAlign, type TextProps, type Toast, ToastHost, type ToastHostProps, type ToastPosition, type ToastVariant, type UseFocusableOptions, type UseFocusableResult, type VisibleRange, type WrapMode, createMask, detectTerminalCapabilities, masks, parseAnsi, render, stripAnsi, supportsInlineImages, useApp, useDialog, useFocus, useFocusRegistry, useFocusable, useInput, useLayout, useToast };