터미널 UI 엔진

1// src/ink/ink.tsx — Ink 렌더링 엔진
2 
3import React from 'react'
4import type { FiberRoot } from 'react-reconciler'
5import reconciler from './reconciler.js'
6import renderNodeToOutput from './render-node-to-output.js'
7import { optimize } from './optimizer.js'
8import { writeDiffToTerminal } from './terminal.js'
9 
10export default class Ink {
11  // 렌더링 파이프라인:
12  // 1. React Reconciler → DOM 트리 변환💡
13  //    reconciler.updateContainer(element, rootNode)
14  //
15  // 2. Yoga 레이아웃 → Flexbox 계산💡
16  //    yogaNode.calculateLayout(termWidth, termHeight)
17  //
18  // 3. renderNodeToOutput() → ANSI 코드 생성
19  //    DOM 트리를 순회하며 ANSI 이스케이프 시퀀스 생성
20  //
21  // 4. optimize() → 프레임 최적화💡
22  //    이전 프레임과 diff하여 변경분만 추출
23  //
24  // 5. writeDiffToTerminal() → 화면 출력
25  //    변경된 영역만 터미널에 쓰기
26 
27  // 더블 버퍼링:
28  // front frame (현재 화면) ↔ back frame (다음 화면)💡
29  // 전환 시 깜빡임 방지
30 
31  // 마우스 트래킹 (mode-1003):
32  // ENABLE_MOUSE_TRACKING → 클릭 이벤트 수신
33  // AlternateScreen에서만 활성화
34 
35  // Kitty 키보드 프로토콜:
36  // ENABLE_KITTY_KEYBOARD → 확장 키 입력
37  // Ctrl+C, 함수 키, 수정자 키 정확한 감지
38}