# @axe/ui — AXE Labs Design System

토큰 · 컴포넌트 · layout chrome 을 한 SSOT 로 — React · Rust(maud) · Python(jinja) 어디서나 같은 마크업, 같은 화면.
Version: v0.22.0 (semver)
Home: https://design.axelabs.ai/
Components index: https://design.axelabs.ai/components
Page patterns: https://design.axelabs.ai/patterns
Stability contract: https://design.axelabs.ai/contract
Machine-readable: https://design.axelabs.ai/docs.json · https://design.axelabs.ai/llms.txt

## 계약 요약
- 명명: `.axe-<component>` 루트 / `__part` 내부 / `--variant` 변형. 색·간격·폰트는 CSS 변수(`var(--accent)` 등).
- 안정성: 클래스는 stable(minor 내 rename 금지 · 제거는 major+1버전 deprecation 유예) 또는 internal(예고 없이 변경).
- React: ESM JS + `.d.ts` package의 `@axe/ui`; Shiki RSC는 `@axe/ui/server`. React/DOM은 host peer, Next 의존 없음.
- CSS-only: `axe-ui.consumer.json` + `axe-ui-export --config ...`; font/theme → CSS → SHA lock을 writer-lock 기반 staged promotion하고 `--check`로 drift 차단.
- 단일 CSS entry: `@axe/ui/bundle.css`(local @import 0). React font-only 설치는 `axe-ui-copy-fonts --out public/fonts`.
- package/Consumer Kit CSS의 remote URL은 0이며 Pretendard·Sarasa는 same-origin. Clash는 host가 공식 Fontshare API 500/600을 route-scoped 또는 first-paint 뒤 opt-in하는 유일한 예외. registry/tag 승인 전 0.22.0 package는 private/unpublished이며 과거 raw TS git tag 사용 금지. 자세히는 /contract.

## 페이지 패턴
- Landing — AI 실행 · 사람 승인 · 증거 기록을 한 운영 흐름으로 보여주는 AI-native ERP 랜딩. https://design.axelabs.ai/patterns/landing
- Authentication — Microsoft SSO와 이메일 매직링크를 조합한 passwordless 인증 화면. https://design.axelabs.ai/patterns/authentication

## 컴포넌트 (75)

### 레이아웃 (layout)
- AppShell (app-shell) — 페이지 전체 레이아웃 chrome — 슬롯 골격과 Design/Gate 공용 workspace 표면. https://design.axelabs.ai/components/app-shell
- Footer (footer) — 페이지 하단 — 로고 + 링크 컬럼 + 소셜 + 하단 바. https://design.axelabs.ai/components/footer
- Layout (layout) — Stack · Cluster · Grid · Container — inline flex/grid 재발명을 대체하는 레이아웃 프리미티브 4종. https://design.axelabs.ai/components/layout
- MasterDetailLayout (master-detail) — 반응형 2컬럼 master/detail 패턴(모바일에서 스택 + back). https://design.axelabs.ai/components/master-detail
- Splitter (splitter) — 키보드·a11y 갖춘 2-pane 리사이즈 컨테이너. https://design.axelabs.ai/components/splitter

### 내비게이션 (navigation)
- Breadcrumb (breadcrumb) — 현재 위치까지의 페이지 경로 트레일 (semantic <nav> + <ol>). https://design.axelabs.ai/components/breadcrumb
- NavMenu (nav-menu) — TopNav 우측에 얹는 통일된 드롭다운 메뉴 1종 (entity-selector · user-menu). https://design.axelabs.ai/components/nav-menu
- Pagination (pagination) — 페이지 네비게이션 컨트롤 (DataTable 와 짝). https://design.axelabs.ai/components/pagination
- ResponsiveTabs (responsive-tabs) — 뷰포트에 따라 데스크톱 pill 탭 ↔ 모바일 하단 고정 bottom-nav 로 전환. https://design.axelabs.ai/components/responsive-tabs
- Sidebar (sidebar) — 앱 셸 좌측 세로 네비게이션 — 활성 항목 + 접이식 그룹. https://design.axelabs.ai/components/sidebar
- TopNav (top-nav) — 상단 네비게이션 바 — 데스크톱 inline · 모바일 2-드로어. https://design.axelabs.ai/components/top-nav

### 액션 (action)
- Button (button) — 행동을 트리거하는 기본 버튼. https://design.axelabs.ai/components/button
- Toggle (toggle) — 하나의 on/off 누름 상태를 갖는 단일 standalone 토글 버튼. https://design.axelabs.ai/components/toggle
- ToggleGroup (toggle-group) — 눌림 상태 버튼 묶음 — 다중 토글 또는 해제 가능한 단일 선택. https://design.axelabs.ai/components/toggle-group

### 입력 (input)
- Calendar (calendar) — 단일 날짜 선택 그리드(월 단위) — 외부 dep 0, 순수 날짜 산술 + role="grid". https://design.axelabs.ai/components/calendar
- ChatInput (chat-input) — Enter 전송·자동 높이 조절·툴바 슬롯을 갖춘 AI 채팅 입력창. https://design.axelabs.ai/components/chat-input
- Checkbox (checkbox) — Radix 기반 tri-state 체크박스 (checked / unchecked / indeterminate). https://design.axelabs.ai/components/checkbox
- Combobox (combobox) — 타이핑으로 필터링하는 인라인 자동완성 (input + listbox). https://design.axelabs.ai/components/combobox
- FormField (form) — Label · hint · error · 필수(*) 마크를 묶는 폼 필드 컴포지션 래퍼. https://design.axelabs.ai/components/form
- Input (input) — 테마 토큰 기반 텍스트 입력 필드 — 단일행 Input 과 다행 Textarea. https://design.axelabs.ai/components/input
- RadioGroup (radio) — Radix 기반 단일 선택 라디오 그룹 (roving tabindex). https://design.axelabs.ai/components/radio
- Select (select) — 옵션 목록에서 하나를 고르는 커스텀 셀렉트 (Radix Select 기반). https://design.axelabs.ai/components/select
- Slider (slider) — 범위 안에서 단일 값을 고르는 슬라이더 (네이티브 range, dep 0). https://design.axelabs.ai/components/slider
- Switch (switch) — on/off 를 즉시 전환하는 토글 스위치 (Radix Switch 기반). https://design.axelabs.ai/components/switch

### 컨테이너 (container)
- Accordion (accordion) — collapsible disclosure 스택(single/multiple). https://design.axelabs.ai/components/accordion
- Card (card) — 콘텐츠를 담는 elevated 표면 컨테이너. https://design.axelabs.ai/components/card
- Collapsible (collapsible) — 단일 disclosure 영역(한 트리거 ↔ 한 컨텐츠 show/hide). https://design.axelabs.ai/components/collapsible
- Hero (hero) — 페이지 첫 화면 — eyebrow·title(h1)·subtitle·badges·actions·image 슬롯. https://design.axelabs.ai/components/hero
- Section (section) — 페이지 본문 한 블록 — eyebrow·heading·subtitle 헤더 + children 본문. https://design.axelabs.ai/components/section
- Tabs (tabs) — 접근성 탭 네비게이션(가로/세로) — Radix Tabs 위 .axe-tabs 스타일. https://design.axelabs.ai/components/tabs

### 콘텐츠 (content)
- Avatar (avatar) — user/agent 신원 배지 — 이미지 실패 시 initials 폴백. https://design.axelabs.ai/components/avatar
- Badge (badge) — 상태·분류를 나타내는 소형 인라인 라벨. https://design.axelabs.ai/components/badge
- Code (code) — 인라인 코드 토큰 <code>. https://design.axelabs.ai/components/code
- CodeBlock (code-block) — 복사 버튼이 있는 클라이언트 코드 블록. https://design.axelabs.ai/components/code-block
- Prose (prose) — 임의 마크다운/HTML 트리에 AXE 타이포·간격·컬러를 입히는 본문 래퍼. https://design.axelabs.ai/components/prose
- ServerCodeBlock (server-code-block) — shiki 문법 하이라이팅 서버 코드 블록(RSC). https://design.axelabs.ai/components/server-code-block
- Table (table) — 시맨틱 <table> 을 감싼 최소 표 — 가로 스크롤 래퍼 + 기본 표 스타일만. https://design.axelabs.ai/components/table

### 오버레이 (overlay)
- AlertDialog (alert-dialog) — 되돌릴 수 없는 행동을 확인시키는 경고 모달 (Radix AlertDialog 기반). https://design.axelabs.ai/components/alert-dialog
- CommandPalette (command-palette) — ⌘K 스타일 검색·명령 팔레트 오버레이. https://design.axelabs.ai/components/command-palette
- ContextMenu (context-menu) — 우클릭(또는 길게 누르기)으로 대상 영역 위에 여는 컨텍스트 액션 메뉴 (Radix ContextMenu 기반). https://design.axelabs.ai/components/context-menu
- Dialog (dialog) — 포커스를 가두는 모달 다이얼로그 (Radix Dialog 기반). https://design.axelabs.ai/components/dialog
- DropdownMenu (dropdown-menu) — 버튼 클릭으로 여는 메뉴 — 액션·토글·라디오·단축키를 한 표면에 묶는다 (Radix DropdownMenu 기반). https://design.axelabs.ai/components/dropdown-menu
- HoverCard (hover-card) — hover(또는 focus)만으로 뜨는 가벼운 미리보기 카드 — @-멘션·링크 프리뷰용 (Radix HoverCard 기반). https://design.axelabs.ai/components/hover-card
- Popover (popover) — 트리거에 앵커되어 뜨는 인터랙티브 부동 패널 (Radix Popover 기반). https://design.axelabs.ai/components/popover
- Sheet (sheet) — 화면 가장자리에서 슬라이드인하는 드로어 패널 (Radix Dialog 기반). https://design.axelabs.ai/components/sheet
- Toast (toast) — 화면 모서리에 쌓이는 비동기 알림 — sonner 래퍼 + AXE 토큰/클래스. https://design.axelabs.ai/components/toast
- Tooltip (tooltip) — hover/focus 로 뜨는 가벼운 힌트 — 인터랙티브 컨텐츠는 담지 않는다 (Radix Tooltip 기반). https://design.axelabs.ai/components/tooltip

### 피드백 (feedback)
- Callout (callout) — 본문 흐름 안에 끼우는 시맨틱 강조 박스(info/success/warning/danger/note). https://design.axelabs.ai/components/callout
- EmptyState (empty-state) — "데이터/결과 없음" 상태의 표준 placeholder — icon·title·description·action 4파트. https://design.axelabs.ai/components/empty-state
- ErrorBoundary (error-boundary) — 렌더 중 throw 를 격리·복구하는 React 에러 경계. https://design.axelabs.ai/components/error-boundary
- Progress (progress) — 측정 가능한 비동기 작업의 진척 바 — determinate / indeterminate. https://design.axelabs.ai/components/progress
- Skeleton (skeleton) — 콘텐츠 도착 전 자리를 차지하는 placeholder — shimmer 로딩 시각. https://design.axelabs.ai/components/skeleton
- Spinner (spinner) — 진척률을 알 수 없는 로딩 시그널 — CSS-only 회전 원. https://design.axelabs.ai/components/spinner
- StatusBanner (status-banner) — 폼/영역 옆에 고정되는 동적 상태 전이 알림 — SR 자동 발화. https://design.axelabs.ai/components/status-banner
- StatusLight (status-light) — 운영자 대시보드용 색 dot(+선택 label/timestamp) — 4-state 색 표준. https://design.axelabs.ai/components/status-light

### 데이터 (data)
- Chart (chart) — recharts 를 axe 토큰으로 감싼 얇은 wrapper — LineChart · BarChart · AreaChart 3종이 동일한 data/xKey/series API 를 공유. https://design.axelabs.ai/components/chart
- DataTable (data-table) — 정렬·페이지 슬라이싱·행 클릭을 갖춘 제네릭 데이터 표. https://design.axelabs.ai/components/data-table
- DescriptionList (description-list) — 레코드 하나의 필드를 세로로 읽는 키·값 목록(<dl>). https://design.axelabs.ai/components/description-list
- DocViz (doc-viz) — 인쇄 문서(.axe-doc)용 서버 SVG 데이터 비주얼 5종. https://design.axelabs.ai/components/doc-viz
- LazyCharts (lazy-charts) — React.lazy + Suspense로 recharts 청크를 실제 렌더 시점까지 지연 로드하는 framework-neutral LazyLineChart · LazyBarChart · LazyAreaChart — props는 각 즉시 로드 차트와 동일. https://design.axelabs.ai/components/lazy-charts
- MetricCard (metric-card) — 운영자·에이전트 대시보드용 KPI 타일 — 값 + 증감(delta) + 미니 스파크라인. https://design.axelabs.ai/components/metric-card
- PipelineTable (pipeline-table) — run/job/agent 상태 행에 특화된 표 — 행 좌측 status dot + drill-down 클릭. https://design.axelabs.ai/components/pipeline-table
- Timeline (timeline) — 날짜로 묶은 활동 피드 — 좌측 dot + 수직 레일, 한국어 상대 날짜 헤더. https://design.axelabs.ai/components/timeline
- Tree (tree) — 재귀 collapsible 트리 — 키보드 nav·단일 선택·텍스트 필터 내장(Radix 무의존). https://design.axelabs.ai/components/tree

### 채팅 · AI (chat)
- AgentExecutor (agent-executor) — Phase 8 AI-first 컴포지트 — 채팅 셸(AgentExecutor) + 점진 테이블(StreamingTable) + 멀티모달 입력(MultiModalChatInput). https://design.axelabs.ai/components/agent-executor
- MessageBubble (message-bubble) — 아바타·역할 라벨·본문 슬롯을 가진 채팅 메시지 한 줄. https://design.axelabs.ai/components/message-bubble
- MessageWithSources (message-with-sources) — MessageBubble 확장 — 본문에 출처 인용·신뢰도 배지·토큰 메타·복사 버튼을 합친 RAG 응답 카드. https://design.axelabs.ai/components/message-with-sources
- StreamingMarkdown (streaming-markdown) — 스트리밍 중인 LLM 응답을 Prose 로 감싸고 끝에 깜박이는 cursor 를 얹는 얇은 래퍼. https://design.axelabs.ai/components/streaming-markdown
- ToolCallCard (tool-call-card) — 에이전트 도구 호출 하나를 접이식 카드로 — 이름·상태 배지 + 펼치면 input/output. https://design.axelabs.ai/components/tool-call-card
- TypingIndicator (typing-indicator) — AI 응답 생성 중을 나타내는 3-dot wave 애니메이션 인디케이터. https://design.axelabs.ai/components/typing-indicator

### 유틸리티 (utility)
- Kbd (kbd) — 키보드 입력을 표시하는 <kbd> 토큰. https://design.axelabs.ai/components/kbd
- Logo (logo) — 브랜드 워드마크 — 홈으로 가는 텍스트 앵커. https://design.axelabs.ai/components/logo
- Seg (seg) — 항상 하나가 선택되는 단일 필수 선택용 segmented control. https://design.axelabs.ai/components/seg
- ThemeToggle (theme-toggle) — light / system / dark 전환 컨트롤 — useTheme 위의 얇은 UI. https://design.axelabs.ai/components/theme-toggle
- Tone (tone) — 표면 톤 래퍼 — Signature / Editorial / Console. https://design.axelabs.ai/components/tone