TUI 디자인 시스템 (Ratatui)
인터랙션 모델을 깨지 않으면서 새로운 Ratatui TUI 비주얼을 만들거나 개편하기 위한 규칙입니다. 이 사용자의 Rust 터미널 대시보드를 대상으로 하며, 저장소 로컬 앱 지침과 함께 사용하십시오.
사용 시기
- 새로운 Ratatui 대시보드 비주얼 레이어 (테마, 패널, 배지, 게이지, 탭).
- 기존 Ratatui TUI를 재설계/재스타일링할 때 (특히 여러 테마, 라이브 테마 선택기, 마우스 히트 테스트, CI의 결정론적 스크린샷 게이트 포함).
토큰 아키텍처
- 팔레트는 평면적이고, 상수이며, 적게 유지하십시오: 테마당 하나의 의미론적 역할 구조체를 포인터로 교체합니다. 모든 계층화되거나 혼합된 색상은 하나의 RGB
blend()로 해당 역할에서 토큰으로 파생시킵니다:surface및surface_hi(패널, 오버레이 채움),track(빈 막대 끝),fade(배경 방향으로 희미해진 색상),gradient(강조 런),on_color(읽기 가능한 배지 텍스트, 휘도로 선택). 새 팔레트는 모든 컴포넌트를 한 번에 재스타일링하므로, 라이브 테마 선택기에 필요합니다. - 위젯은 절대 리터럴
Color를 사용하지 않고, 테마 토큰만 사용합니다. blend()를 RGB가 아닌 엔드포인트로부터 보호하십시오: ANSI 색상에는 채널이 없으므로, 더 가까운 엔드포인트로 스냅하고 새로 만들지 마십시오.
배경 없는 테마
Color::Reset배경이 있는 테마 (모노/TTY 팔레트)는 모든 채움을 저하시켜야 합니다: 표면은Reset으로 떨어지고, 배지는 괄호로 묶인 컬러 텍스트가 되며, 빈 막대 끝은 파생된 트랙(이것은Reset이며, 터미널 기본 전경색으로 렌더링됨) 대신 테두리 색상을 사용합니다. 오직Reset과 선택 강조 표시만 칠해지는지 테스트하십시오.
배경 무결성
- 모든 뷰 × 오버레이를 셀 버퍼 테스트로 검사하십시오: 각 셀 배경은 하드코딩된 색상 목록이 아닌 테마 제공 화이트리스트(
is_background토큰 목록)에 속해야 합니다. 하드코딩된 목록은 새 토큰마다 편집이 필요하며 쉽게 잊혀집니다. Clear는 다시 칠하지 않고 셀을 재설정합니다; 그 후에 그려지는 것은 무엇이든 배경을 다시 스타일링해야 합니다. 오버레이를 올려진 표면으로 채워서 패널 위에 떠 있게 하십시오.- ratatui의
Chart는Canvas를 통해 플롯 영역을 그리며, 배경 기본값은Color::Reset입니다. 틴티드 패널에서, 차트 배경을 패널의 채움으로 설정하고 페이지의 채움으로 설정하지 마십시오: 표면 색상 카드 내부의 페이지 색상은 같은 구멍, 한 단계 위입니다.
레이아웃 결합 히트 테스트
- 마우스 히트 테스트가 그려진 레이아웃을 미러링하는 경우(탭 스트립, 세그먼트된 바, 상태 필드), 동일한 편집에서 그리기와 미러 수학을 변경하십시오. 각 레이블을 그려진 열별로 찾는 렌더링 기반 테스트를 선호하십시오; 수동으로 작성된 사각형 어설션은 실제 레이아웃이 위젯을 다른 곳에 배치하는 동안 통과합니다.
- 목록 강조 표시 심볼을 추가하거나 넓히면 모든 행의 텍스트가 이동합니다. 클릭 가능한 행 영역은 전체 너비이거나 일치하도록 다시 계산되어야 합니다.
글리프
- 서브셀 게이지 정밀도는 8분할 블록(U+258F..U+2589), 블록 요소를 사용합니다: 유니코드 경로만; ASCII 폴백은 전체 셀을 채웁니다. 브레이 차트와 스파크라인도 마찬가지입니다: ASCII 대체를 제공하고,
--ascii모드에 상자 그리기를 유출하지 마십시오. - 정렬된 열 아이콘은 단일 너비 BMP 심볼이어야 합니다. 이모지는 이중 너비이므로, 행의 이후 모든 열을 조용히 이동시킵니다.
검증
- 재설계: 스타일을 먼저 변경하고, 텍스트는 나중에 변경하십시오. 렌더링 테스트는 텍스트 내용을 어설션하므로, 변경되지 않은 문자열은 룩이 변경되는 동안 스위트를 녹색으로 유지합니다.
- 시각적 게이트: 프로젝트의 결정론적 스크린샷 생성기(고정 프레임 카운터, 벽시계 없음, RNG 없음). 텍스트 덤프 모드가 가장 빠른 레이아웃 검토입니다. CI의 드리프트 방지 검사가 통과하도록 소스 변경과 함께 재생성된 이미지를 커밋하십시오.
- 셀 버퍼에서 배경을 확인하고, 렌더링된 이미지에서는 확인하지 마십시오:
Color::Reset을 테마 배경으로 해석하는 이미지 작성기는 버퍼 스위프가 잡아내는 정확히 그 구멍을 숨깁니다. - 재현 가능한 스크린샷을 위해 프레임 카운터 기반 애니메이션(펄스, 깜빡임)을 결정론적으로 유지하십시오.