핵심 개념
아키텍처
opt-ui Core/Shells/Surfaces와 opt-charts 분리, docs/registry 연결 방식을 설명합니다.
reopt design업데이트
1. Layer model
opt-ui는 Core → Shells → Surfaces를 맡고, 차트와 데이터
시각화는 @reopt-ai/opt-charts가 소유합니다. docs는 내부
호환성을 위해 visuals 카테고리 키를 유지하되 공개 경로는
opt-charts로 분리합니다.
Templates — 페이지 레이아웃 (앱별 정의)
Surfaces — Shells 조합 + 상태 공유
Shells — Core와 opt-charts를 감싸서 기능 확장
opt-charts — Recharts 래퍼 + 데이터 시각화
Core — 접근성 프리미티브 + 단일 책임
opt-ui-primitives / Recharts — 접근성 엔진과 차트 엔진
- Core는 opt-ui-primitives 기반 단일 책임 UI primitive입니다.
- opt-charts는 Recharts 래퍼와 차트 전용 shell을 포함합니다.
- Shells는 Core와 전문 패키지를 감싸는 비즈니스 조합 계층입니다.
- Surfaces는 Shells를 조합한 페이지 템플릿이며 CLI로 배포됩니다.
2. docs와 registry 연결
문서 앱은 packages/opt-ui, packages/opt-charts
메타와 @reopt-ai/opt-cli/registry.json 을 합쳐서 단일 docs
registry를 구성합니다.
패키지/문서 흐름
3. 현재 카탈로그
| 계층 | 컴포넌트 수 |
|---|---|
| Core | 55 |
| opt-charts | 21 |
| Shells | 75 |
| Surfaces | 31 |
4. repo manifest와 publish snapshot
저장소에서는 workspace 개발 편의를 위해 source manifest를 유지하고, 실제 배포 시에는 publish-safe snapshot으로 변환합니다.
json
{
"exports": {
".": "./src/index.ts",
"./core": "./src/core/index.ts",
"./shells": "./src/shells/index.ts",
"./surfaces": "./src/surfaces/index.ts"
}
}release workflow는 이 source manifest를 dist 기반 snapshot으로 변환하고,
opt-charts는 별도 패키지 manifest에서 차트 export를 관리합니다. CI는
registry.json 과 dist/docs/ freshness를
검증합니다.