# Input Examples Progression

Seven files that build on each other, each solving a specific problem or expanding features from the previous. Start at [`1-raw.ts`](./src/1-raw.ts) and work down.

| File                                 | Problem                                                                                                                                                 | Solution                                                                  | Deps                                               |
| ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- | -------------------------------------------------- |
| [`1-raw.ts`](./src/1-raw.ts)         | `data.toString()` can't decode escape sequences — arrow keys produce mojibake                                                                           | `createInput()` decodes raw bytes into structured events                  | `@bomb.sh/tty`                                     |
| [`2-parser.ts`](./src/2-parser.ts)   | Duplicated event handling in data handler and flush timeout                                                                                             | Extract `processEvent()` as a pure function                               | —                                                  |
| [`3-signals.ts`](./src/3-signals.ts) | Manual `render()` calls become difficult manage with scale. Use a library which can subscribe to changes and trigger a render after every state change. | `signal()` + `effect()` auto-renders on state change                      | `alien-signals` (choice optional, user can choose) |
| [`4-modes.ts`](./src/4-modes.ts)     | Change `seeings()` which requires a revert on before process exits.                                                                                     | `alternateBuffer()` + `settings()` — quit becomes a state flag            | `@bomb.sh/tty`                                     |
| [`5-stream.ts`](./src/5-stream.ts)   | Refactor overloaded data handler with an async iterator and flush all events in one callback.                                                           | Async iterator moves flush logic into its own function                    | `@bomb.sh/tty`                                     |
| [`6-events.ts`](./src/6-events.ts)   | One all event types including mouse movements and element transitions                                                                                   | Same iterator yields all types; reactive signals drive color transitions  | `@bomb.sh/tty`                                     |
| [`7-focus.ts`](./src/7-focus.ts)     | Double our inputs and handle focus changes (Tab) between them while still supporting transitions                                                        | Two panels, Tab/Shift+Tab focus, full reactive treatment on focused panel | `@clack/ui`                                        |