📁 Subsystem Deep Dive

components/CustomSelect/

📁 components/CustomSelect/ 📄 7 files

Tutorial: CustomSelect

This project creates a sophisticated interactive list component for terminal applications using React Ink. It separates the "brain" (navigation and viewport logic) from the "rules" (selection behavior) to efficiently handle both single and multi-select workflows. It leverages a specialized doubly-linked list data structure for fast scrolling and includes versatile renderers for displaying text, inputs, and images.

flowchart TD A0["Navigation Engine & Viewport"] A1["Selection Behavior Hooks"] A2["Input Controller"] A3["Option Renderers"] A4["Linked Option Data Structure"] A5["Multi-Select Container"] A5 -->|"Initializes state from"| A1 A5 -->|"Renders visual rows using"| A3 A1 -->|"Delegates scrolling logic to"| A0 A0 -->|"Organizes data with"| A4 A2 -->|"Manipulates state via inputs"| A1