@reopt-ai/opt-ui 1.4.1

package/COMPONENT_CATALOG.md

@@ -0,0 +1,3000 @@
+# @reopt-ai/opt-ui Component Catalog
+
+<!-- DEPRECATED: Prefer dist/docs/02-components/ for per-layer reference. -->
+<!-- Auto-generated from ComponentMeta. Do not edit. -->
+<!-- Version: 1.4.1 -->
+
+## Quick Stats
+
+| Layer     | Count   |
+| --------- | ------- |
+| Core      | 59      |
+| Visuals   | 0       |
+| Shells    | 75      |
+| Surfaces  | 0       |
+| **Total** | **134** |
+
+## Component Selection Guide
+
+| 요구사항            | 추천 컴포넌트                                      | 레이어       |
+| ------------------- | -------------------------------------------------- | ------------ |
+| 텍스트 입력         | Input                                              | Core         |
+| 멀티라인 텍스트     | Textarea                                           | Core         |
+| 숫자 입력           | NumberInput                                        | Core         |
+| 드롭다운 선택       | Select / StatusSelect / BranchSelect               | Core / Shell |
+| 검색 + 선택         | Combobox / SearchCombobox / AsyncCombobox          | Core / Shell |
+| 체크박스            | Checkbox / CheckboxGroup                           | Core         |
+| 라디오 버튼         | RadioGroup                                         | Core         |
+| 토글 스위치         | Switch                                             | Core         |
+| 날짜 범위 선택      | DateRangePicker                                    | Core         |
+| 태그 입력           | TagInput                                           | Core         |
+| 색상 선택           | ColorPicker                                        | Core         |
+| 아이콘 선택         | IconPicker                                         | Core         |
+| 데이터 테이블       | DataTable                                          | Shell        |
+| 인라인 편집 테이블  | InlineEditTable                                    | Shell        |
+| 트리/계층 테이블    | TreeTable                                          | Shell        |
+| 칸반 보드           | KanbanBoard                                        | Shell        |
+| 필터 바             | FilterBar                                          | Shell        |
+| 필터 프리셋 저장    | SavedFilters                                       | Shell        |
+| 일괄 작업           | BulkActions                                        | Shell        |
+| 컬럼 표시 토글      | ColumnToggler                                      | Shell        |
+| 시간 범위 선택      | TimeRangeSelector                                  | Shell        |
+| A/B 비교 선택       | ComparisonSelector                                 | Shell        |
+| 선 차트 / 영역 차트 | LineChart / AreaChart                              | Visual       |
+| 막대 차트           | BarChart                                           | Visual       |
+| 파이/도넛 차트      | PieChart                                           | Visual       |
+| 인라인 스파크라인   | Sparkline                                          | Visual       |
+| 흐름 다이어그램     | SankeyChart                                        | Visual       |
+| 퍼널 차트           | FunnelChart                                        | Visual       |
+| 리텐션 히트맵       | RetentionHeatmap                                   | Visual       |
+| 캘린더 히트맵       | CalendarHeatmap                                    | Visual       |
+| 폭포 차트           | WaterfallChart                                     | Visual       |
+| 버블 차트           | BubbleChart                                        | Visual       |
+| 게이지/미터         | GaugeChart                                         | Visual       |
+| KPI/통계 카드       | StatCard (Core) / MetricsCard / SummaryRow (Shell) | Core / Shell |
+| 모달 대화상자       | Dialog                                             | Core         |
+| 확인 대화상자       | ConfirmDialog                                      | Shell        |
+| 서랍 패널           | Drawer                                             | Core         |
+| 팝오버              | Popover                                            | Core         |
+| 드롭다운 메뉴       | DropdownMenu                                       | Core         |
+| 토스트 알림         | NotificationToast                                  | Shell        |
+| 알림 센터           | NotificationCenter                                 | Shell        |
+| 사이드바 내비게이션 | SidebarNav / Sidebar                               | Shell        |
+| 앱 레이아웃         | AppShell                                           | Shell        |
+| 탭 내비게이션       | Tabs (Core) / ContentTabs / VerticalTabs (Shell)   | Core / Shell |
+| 메뉴                | Menu (Core) / AppMenubar / MegaMenu (Shell)        | Core / Shell |
+| 커맨드 팔레트       | CommandPalette                                     | Shell        |
+| 아코디언            | Disclosure (Core) / FaqAccordion (Shell)           | Core / Shell |
+| 설정 폼             | SettingsForm                                       | Shell        |
+| 로그인 폼           | AuthForm                                           | Shell        |
+| 다단계 폼           | WizardForm                                         | Shell        |
+| 동적 필드 폼        | DynamicFieldForm                                   | Shell        |
+| 파일 업로드 폼      | FileUploadForm                                     | Shell        |
+| SQL 에디터          | SqlEditor                                          | Shell        |
+| 코드 표시           | CodeSnippetViewer                                  | Shell        |
+| 코드 비교           | CodeDiffViewer                                     | Shell        |
+| 리치 텍스트 에디터  | RichTextEditor                                     | Shell        |
+| 단계 빌더           | StepBuilder                                        | Core         |
+| 조건 빌더           | ConditionBuilder                                   | Core         |
+| 경로 탐색           | Breadcrumb                                         | Core         |
+| 빈 상태 표시        | EmptyState                                         | Core         |
+| 로딩 스피너         | Spinner / LoadingOverlay                           | Core         |
+| 프로그레스 바       | Progress                                           | Core         |
+| 아바타              | Avatar                                             | Core         |
+| 페이지네이션        | Pagination                                         | Core         |
+| 가상 목록           | VirtualList                                        | Core         |
+| 리사이즈 패널       | Resizable                                          | Core         |
+| 페이지 헤더         | PageHeader                                         | Core         |
+| 테마 전환           | ThemeSwitcher                                      | Shell        |
+| 데이터 내보내기     | ExportButton                                       | Shell        |
+| 데이터 임포트       | DataImportWizard                                   | Shell        |
+| 웹훅 설정           | WebhookConfig                                      | Shell        |
+| 피처 플래그         | FeatureFlagPanel                                   | Shell        |
+| 감사 로그           | AuditLog                                           | Shell        |
+| 워크플로우 에디터   | WorkflowCanvas                                     | Shell        |
+| 인사이트/이상탐지   | InsightsPanel                                      | Shell        |
+| 프롬프트 템플릿     | PromptTemplate                                     | Shell        |
+
+## Core Components (59)
+
+### Input
+
+| Component       | Description                                                                                                                | Key Exports                                                                                                                |
+| --------------- | -------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
+| Input           | 독립적인 텍스트 입력 컴포넌트. 레이블, 에러, 힌트, 아이콘 지원.                                                            | `Input`                                                                                                                    |
+| Textarea        | 멀티라인 텍스트 입력. Input과 동일한 API (label, error, hint).                                                             | `Textarea`                                                                                                                 |
+| NumberInput     | 숫자 입력 컴포넌트. +/- 버튼, nullable/clear, unit suffix, invalid draft alert, min/max, step, 키보드 화살표를 지원합니다. | `NumberInput`                                                                                                              |
+| Checkbox        | 독립적인 체크박스 컴포넌트. 레이블, 설명, 그룹과 DOM property까지 동기화되는 indeterminate 상태를 지원합니다.              | `Checkbox`, `CheckboxGroup`                                                                                                |
+| RadioGroup      | 독립적인 라디오 그룹 컴포넌트. 그룹 설명과 항목별 설명을 분리 연결하고 다양한 크기를 지원합니다.                           | `RadioGroup`, `Radio`                                                                                                      |
+| Switch          | 토글 스위치 컴포넌트. 3가지 크기와 레이블/설명의 명시적 접근성 연결을 지원합니다.                                          | `Switch`                                                                                                                   |
+| Select          | 드롭다운 선택 컴포넌트. 5-part anatomy: Root, Label, Trigger, Popover, Item.                                               | `SelectRoot`, `SelectLabel`, `SelectTrigger`, `SelectPopover`, `SelectItem`                                                |
+| Combobox        | 자동완성 검색 입력. 7 exports: Root, Input, Popover, Item, Group, GroupLabel, Empty.                                       | `ComboboxRoot`, `ComboboxInput`, `ComboboxPopover`, `ComboboxItem`, `ComboboxGroup`, `ComboboxGroupLabel`, `ComboboxEmpty` |
+| DateRangePicker | 날짜 범위 선택 컴포넌트. 프리셋, 달력 UI, 포커스 관리와 RTL 방향 탐색 아이콘을 지원합니다.                                 | `DateRangePicker`                                                                                                          |
+| TagInput        | 태그 입력 컴포넌트. 텍스트를 입력하고 Enter로 태그를 추가, Backspace로 삭제합니다.                                         | `TagInput`                                                                                                                 |
+| ColorPicker     | 색상 선택 컴포넌트. 프리셋 팔레트와 hex 입력을 지원합니다.                                                                 | `ColorPicker`                                                                                                              |
+| IconPicker      | 아이콘 선택 컴포넌트. 검색, 그룹별 분류, semantic key 기반 Lucide 아이콘과 커스텀 ReactNode를 지원합니다.                  | `IconPicker`                                                                                                               |
+| Slider          | 범위 슬라이더 입력. native range input 래핑, 범위로 정규화된 값/ARIA 상태, 값 표시와 포맷 함수를 지원합니다.               | `Slider`                                                                                                                   |
+
+### Form Integration
+
+| Component | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | Key Exports                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Form      | 접근성 폼 시스템. opt-ui-primitives Form API 기반. 31 exports: FormRoot, FormProvider, FormGroup, FormGroupLabel, FormDescription, FormField, FormControl, FormInput, FormTextarea, FormSelect, FormSelectPopover, FormSelectItem, FormSwitch, FormLabel, FormError, FormSubmit, FormCheckbox, FormRadioGroup, FormRadio, FormPush, FormRemove, FormReset, FormNumberInput, FormSlider, FormStarRating, FormColorPicker, FormIconPicker, FormTagInput, FormDateRangePicker + useFormStore, useFormContext hooks. | `FormRoot`, `FormProvider`, `FormGroup`, `FormGroupLabel`, `FormDescription`, `FormField`, `FormControl`, `FormInput`, `FormTextarea`, `FormSelect`, `FormSelectPopover`, `FormSelectItem`, `FormSwitch`, `FormLabel`, `FormError`, `FormSubmit`, `FormCheckbox`, `FormRadioGroup`, `FormRadio`, `FormPush`, `FormRemove`, `FormReset`, `FormNumberInput`, `FormSlider`, `FormStarRating`, `FormColorPicker`, `FormIconPicker`, `FormTagInput`, `FormDateRangePicker`, `useFormStore`, `useFormContext` |
+
+### Display
+
+| Component      | Description                                                                                                                 | Key Exports                                                                       |
+| -------------- | --------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
+| Kbd            | 키보드 단축키를 시각적으로 표시하는 인라인 뱃지 컴포넌트.                                                                   | `Kbd`                                                                             |
+| Button         | 접근성 버튼 컴포넌트. 4가지 변형(primary, secondary, ghost, danger), 3가지 크기, 로딩/아이콘과 aria-busy 상태를 지원합니다. | `Button`                                                                          |
+| Badge          | 인라인 상태 뱃지. 5가지 색상 변형, 상태 점(dot) 옵션 지원.                                                                  | `Badge`                                                                           |
+| Alert          | 알림 메시지 컴포넌트. 4가지 변형(info, success, warning, error), 제목/본문/닫기 버튼 지원.                                  | `Alert`                                                                           |
+| Spinner        | 로딩 상태 표시 스피너. 3가지 크기와 장식용 aria-hidden 모드를 지원합니다.                                                   | `Spinner`                                                                         |
+| LoadingOverlay | 로딩 오버레이. 중복 status 없이 하나의 aria-busy 라이브 영역으로 콘텐츠 위 로딩 상태를 표시합니다.                          | `LoadingOverlay`                                                                  |
+| Progress       | 진행률 표시. Linear/Circular, determinate/indeterminate 변형과 안전하게 보정된 ARIA 값을 지원합니다.                        | `Progress`, `CircularProgress`                                                    |
+| Avatar         | 사용자 아바타. 이미지, 이니셜 자동 생성, 스크린 리더에 노출되는 상태 인디케이터, 그룹을 지원합니다.                         | `Avatar`, `AvatarGroup`                                                           |
+| Skeleton       | 로딩 플레이스홀더. text/circular/rectangular 변형. 프리셋 컴포넌트 포함.                                                    | `Skeleton`, `SkeletonText`, `SkeletonAvatar`, `SkeletonCard`, `SkeletonTable`     |
+| Card           | 범용 카드 컨테이너. Header, Title, Description, Content, Footer 하위 컴포넌트 포함.                                         | `Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, `CardFooter` |
+| Breadcrumb     | 현재 위치를 표시하고 계층 탐색을 제공하는 컴포넌트.                                                                         | `Breadcrumb`                                                                      |
+| EmptyState     | 데이터가 없을 때 표시하는 빈 상태 컴포넌트. 아이콘, 제목, 설명, 액션 버튼 지원.                                             | `EmptyState`                                                                      |
+| StatCard       | 트렌드 방향과 변화량을 표시하는 통계 카드.                                                                                  | `StatCard`                                                                        |
+| Logo           | 아이콘+텍스트 조합, 이미지, 링크 래핑을 지원하는 로고 컴포넌트. Sidebar 등에서 활용.                                        | `Logo`                                                                            |
+
+### Navigation & Overlay
+
+| Component    | Description                                                                                                                                                                          | Key Exports                                                                                                                                                              |
+| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Menu         | 메뉴바 + 개별 메뉴 시스템. 10 exports: MenubarRoot, MenubarContainer, MenuRoot, MenuTrigger, MenuButtonArrow, MenuPopover, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuSeparator. | `MenubarRoot`, `MenubarContainer`, `MenuRoot`, `MenuTrigger`, `MenuButtonArrow`, `MenuPopover`, `MenuItem`, `MenuItemCheckbox`, `MenuItemRadio`, `MenuSeparator`         |
+| DropdownMenu | Menu Core 위의 간편 래퍼. 단일 트리거 드롭다운 메뉴에 특화되었습니다.                                                                                                                | `DropdownMenu`, `DropdownTrigger`, `DropdownContent`, `DropdownItem`, `DropdownSeparator`                                                                                |
+| Popover      | Popover 프리미티브 래퍼. 트리거 요소에 연결된 플로팅 콘텐츠를 표시합니다.                                                                                                            | `PopoverRoot`, `PopoverTrigger`, `PopoverContent`, `PopoverClose`                                                                                                        |
+| Tabs         | 탭 패널 시스템. 4-part anatomy: Root, TabList, Tab, TabPanel.                                                                                                                        | `TabsRoot`, `TabList`, `Tab`, `TabPanel`                                                                                                                                 |
+| Disclosure   | 접기/펼치기 콘텐츠 영역. 3-part anatomy: Root, Trigger, Content.                                                                                                                     | `DisclosureRoot`, `DisclosureTrigger`, `DisclosureContent`                                                                                                               |
+| Dialog       | 모달 다이얼로그. 9-part anatomy: Root, Disclosure, Panel, Heading, Description, Dismiss, Header, Body, Footer.                                                                       | `DialogRoot`, `DialogDisclosure`, `DialogPanel`, `AlertDialogPanel`, `DialogHeading`, `DialogDescription`, `DialogDismiss`, `DialogHeader`, `DialogBody`, `DialogFooter` |
+| Drawer       | 사이드/하단 슬라이드 패널. Dialog 기반 compound 패턴으로 접근성을 보장합니다.                                                                                                        | `DrawerRoot`, `DrawerPanel`, `DrawerClose`                                                                                                                               |
+| Toolbar      | 툴바 컨테이너 + 툴팁. 7 exports: ToolbarRoot, ToolbarContainer, ToolbarButton, ToolbarSeparator, TooltipProvider, TooltipAnchor, Tooltip.                                            | `ToolbarRoot`, `ToolbarContainer`, `ToolbarButton`, `ToolbarSeparator`, `TooltipProvider`, `TooltipAnchor`, `Tooltip`                                                    |
+| Pagination   | 페이지 넘김 네비게이션. ellipsis 포함 페이지 번호, compact/count variant, totalPages/cursor pagination, Prev/Next 버튼을 제공합니다.                                                 | `Pagination`                                                                                                                                                             |
+
+### Layout
+
+| Component     | Description                                                                     | Key Exports                                                |
+| ------------- | ------------------------------------------------------------------------------- | ---------------------------------------------------------- |
+| CompositeZone | Composite 기반 2D 키보드 탐색 컨테이너. 화살표 키로 자식 요소 간 이동 가능.     | `CompositeZone`                                            |
+| PageHeader    | 페이지 제목, 설명, 액션 슬롯을 제공하는 레이아웃 헤더 컴포넌트.                 | `PageHeader`                                               |
+| ScrollArea    | 커스텀 스크롤바를 제공하는 스크롤 컨테이너. 수직/수평/양방향 지원.              | `ScrollArea`                                               |
+| Container     | 최대 너비 제약과 중앙 정렬을 제공하는 래퍼. 페이지 콘텐츠 폭 제한용.            | `Container`                                                |
+| Section       | 시맨틱 스페이싱 블록. 제목이 있으면 aria-labelledby를 자동 설정합니다.          | `Section`                                                  |
+| Resizable     | react-resizable-panels 래퍼. 드래그로 크기를 조절할 수 있는 패널 분할 레이아웃. | `ResizablePanelGroup`, `ResizablePanel`, `ResizableHandle` |
+| VirtualList   | 가상 스크롤 리스트. 대량 데이터를 윈도잉 기법으로 효율적으로 렌더링합니다.      | `VirtualList`                                              |
+
+### Builder
+
+| Component        | Description                                                               | Key Exports        |
+| ---------------- | ------------------------------------------------------------------------- | ------------------ |
+| StepBuilder      | 순서가 있는 단계를 추가, 제거, 재정렬할 수 있는 빌더 컴포넌트.            | `StepBuilder`      |
+| ConditionBuilder | AND/OR 로직으로 조건 그룹을 구성하는 빌더. 속성, 연산자, 값을 조합합니다. | `ConditionBuilder` |
+
+### Other
+
+| Component     | Description                                                                                                                                              | Key Exports                                                                                                                                     |
+| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| Text          | 본문, 레이블, 보조 설명, 코드에 일관된 의미 기반 타이포그래피를 적용합니다.                                                                              | `Text`                                                                                                                                          |
+| Heading       | 문서의 의미 계층과 시각적 타이포그래피 계층을 독립적으로 제어합니다.                                                                                     | `Heading`                                                                                                                                       |
+| Separator     | 콘텐츠를 구분하는 가로/세로 디바이더. 라벨을 넣으면 가운데 정렬 구분선이 된다.                                                                           | `Separator`                                                                                                                                     |
+| OtpField      | 일회용 코드(OTP)/PIN 입력. 셀 단위 입력, 붙여넣기 분배, 자동 포커스 이동, 백스페이스 네비게이션과 폼 이름/오류 연결을 지원합니다.                        | `OtpField`                                                                                                                                      |
+| Toggle        | 눌림(pressed) 두 상태 버튼. 단독 사용하거나 ToggleGroup으로 묶어 단일/다중 선택을 만든다.                                                                | `Toggle`, `ToggleGroup`                                                                                                                         |
+| Accordion     | 수직으로 쌓인 펼침/접힘 패널. single(한 개)/multiple(여러 개) 모드와 collapsible 지원.                                                                   | `AccordionRoot`, `AccordionItem`, `AccordionTrigger`, `AccordionContent`                                                                        |
+| Meter         | 범위 내 스칼라 측정값 게이지 (디스크 사용량·점수·용량 등). role=meter로 작업 진행률(Progress)과 구분된다.                                                | `Meter`                                                                                                                                         |
+| BlockLayout   | Block 루트 레이아웃. flex + 기본 section spacing 적용, loading prop으로 LoadingOverlay 자동 래핑.                                                        | `BlockLayout`                                                                                                                                   |
+| createBlock   | Block 팩토리 함수. BlockLayout 래핑을 구조적으로 강제하여 loading/className 처리를 자동화합니다.                                                         | `createBlock`                                                                                                                                   |
+| StarRating    | 1~N점 별점을 선택하는 인터랙티브 레이팅 입력. 읽기 전용 표시도 지원.                                                                                     | `StarRating`                                                                                                                                    |
+| ErrorBoundary | React 에러 바운더리. 자식 컴포넌트 렌더 에러를 잡아 fallback UI를 표시합니다.                                                                            | `ErrorBoundary`                                                                                                                                 |
+| Command       | cmdk 스타일 명령 anatomy. 자동 필터링 + 키보드 내비게이션. 인라인 또는 CommandDialog로 사용.                                                             | `Command`, `CommandDialog`, `CommandInput`, `CommandList`, `CommandEmpty`, `CommandGroup`, `CommandItem`, `CommandSeparator`, `CommandShortcut` |
+| ShaderSurface | ogl 기반 애니메이션 WebGL 셰이더 배경. 럭셔리 프리셋(메탈릭/실크/유리 등) + 색·파라미터로 배경·카드 배경을 만든다. 정지 프레임·PNG 캡처·WebGL 폴백 지원. | `ShaderSurface`                                                                                                                                 |
+
+## Visual Components (0)
+
+| Component | Description | Key Exports |
+| --------- | ----------- | ----------- |
+
+## Shell Components (75)
+
+### Navigation & Layout
+
+| Component             | Description                                                                                                           | Key Exports             |
+| --------------------- | --------------------------------------------------------------------------------------------------------------------- | ----------------------- |
+| AppMenubar            | 데스크톱 스타일 메뉴바. 체크박스, 라디오 메뉴 항목 지원.                                                              | `AppMenubar`            |
+| MegaMenu              | 메가 메뉴. Popover + CSS grid 멀티컬럼 + 카테고리 헤딩 + footer 슬롯.                                                 | `MegaMenu`              |
+| SidebarNav            | Composite 기반 사이드바 네비게이션. pathname 자동 동기화.                                                             | `SidebarNav`            |
+| Sidebar               | 접기/펼치기를 지원하는 compound 사이드바. Header/Content/Footer 구조 + Group/Item으로 네비게이션 구성. Ctrl+[ 단축키. | `Sidebar`, `useSidebar` |
+| AppShell              | Header + Sidebar + Content + Footer 4영역 페이지 레이아웃 템플릿. Sidebar 컴포넌트와 조합.                            | `AppShell`              |
+| ContentTabs           | 탭 콘텐츠 패널. Tabs primitive 래퍼.                                                                                  | `ContentTabs`           |
+| VerticalTabs          | 세로 탭 레이아웃. 좌측 탭 리스트 + 우측 패널 구성입니다.                                                              | `VerticalTabs`          |
+| FaqAccordion          | FAQ 질문/답변 아코디언. Composite + Disclosure 조합.                                                                  | `FaqAccordion`          |
+| CommandPalette        | Cmd+K 스타일 커맨드 팔레트. Dialog + Combobox + match-sorter 퍼지 검색.                                               | `CommandPalette`        |
+| CommandPaletteTrigger | CommandPalette + Cmd+K 키보드 단축키 자동 바인딩.                                                                     | `CommandPaletteTrigger` |
+| ProjectSwitcher       | 프로젝트 검색 전환기. Combobox + match-sorter 퍼지 검색 지원.                                                         | `ProjectSwitcher`       |
+| EditorToolbar         | 리치 텍스트 에디터 스타일 툴바. Toolbar + Tooltip 조합.                                                               | `EditorToolbar`         |
+| FloatingActionBar     | 플로팅 액션 바. 선택된 항목에 대한 일괄 작업 버튼을 하단에 표시합니다.                                                | `FloatingActionBar`     |
+| TemplatePicker        | 템플릿 선택기. 카테고리별 그리드와 검색을 제공하며 featured/tags 표시를 지원합니다.                                   | `TemplatePicker`        |
+| ThemeSwitcher         | 테마 프리셋 선택기. 프리셋과 light/dark/system 모드 전환.                                                             | `ThemeSwitcher`         |
+
+### Data Display
+
+| Component           | Description                                                                                                                  | Key Exports                                   |
+| ------------------- | ---------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- |
+| DataTable           | 제네릭 데이터 테이블. 동적 컬럼, 결측값 안전 정렬, 키보드 컬럼 리사이즈, 보정된 인라인 진행률과 Composite 탐색을 지원합니다. | `DataTable`                                   |
+| InlineEditTable     | 인라인 편집 테이블. 더블클릭으로 셀 편집, Enter 확정, Escape 취소.                                                           | `InlineEditTable`                             |
+| TreeTable           | 계층형 트리 테이블. 재귀 행 렌더링 + 펼침/접기 셰브론.                                                                       | `TreeTable`                                   |
+| DomainTable         | 도메인 테이블. Composite 기반 그리드로 키보드 탐색 지원.                                                                     | `DomainTable`                                 |
+| QueryResultsTable   | 쿼리 결과 테이블. SQL 결과와 스크린 리더에 안내되는 로딩, 에러, 빈 상태를 지원합니다.                                        | `QueryResultsTable`                           |
+| DashboardGrid       | Composite 기반 통계 카드 그리드. 유효한 1–4열 레이아웃과 화살표 키 2D 탐색을 지원합니다.                                     | `DashboardGrid`                               |
+| SummaryRow          | 통계 요약 행. StatCard 그리드 레이아웃을 표준화합니다. loading 시 SkeletonCard 표시.                                         | `SummaryRow`                                  |
+| CodeSnippetViewer   | 코드 스니펫 뷰어. 줄 번호, 복사 버튼, 포커스 가능한 스크롤 영역, syntaxTheme 톤을 지원합니다.                                | `CodeSnippetViewer`                           |
+| CodeDiffViewer      | 코드 비교 뷰어. LCS 알고리즘 기반 unified/split 모드 diff와 포커스 가능한 스크롤 영역을 제공합니다.                          | `CodeDiffViewer`                              |
+| ConnectionIndicator | 연결 상태 표시기. connected, connecting, disconnected, error 상태를 지원합니다.                                              | `ConnectionIndicator`                         |
+| EventIcon           | 이벤트 아이콘. semantic key 또는 ReactNode 아이콘과 배경색을 표시합니다.                                                     | `EventIcon`, `POPULAR_ICONS`, `COLOR_PRESETS` |
+
+### Lists & Feeds
+
+| Component          | Description                                                                         | Key Exports          |
+| ------------------ | ----------------------------------------------------------------------------------- | -------------------- |
+| TaskList           | 작업 목록 관리 컴포넌트. 우선순위, 상태, 담당자, 태그, 하위 작업 지원.              | `TaskList`           |
+| ActivityFeed       | 활동 피드/로그 컴포넌트. 타임라인 스타일, 상대 시간 표시.                           | `ActivityFeed`       |
+| TeamMemberList     | 팀원 목록 컴포넌트. 온라인 상태, 다양한 레이아웃(list, compact, avatars-only) 지원. | `TeamMemberList`     |
+| KanbanBoard        | 칸반 보드. HTML5 DnD로 카드를 컬럼 간 드래그&드롭.                                  | `KanbanBoard`        |
+| AuditLog           | 감사 로그 타임라인. 아바타 + 액션 텍스트 + 메타데이터 배지 레이아웃.                | `AuditLog`           |
+| NotificationCenter | 알림 센터. 벨 아이콘 트리거 + 미읽음 배지 + 스크롤 알림 목록.                       | `NotificationCenter` |
+
+### Filters & Search
+
+| Component          | Description                                                                                                        | Key Exports          |
+| ------------------ | ------------------------------------------------------------------------------------------------------------------ | -------------------- |
+| SearchCombobox     | match-sorter 기반 퍼지 검색 콤보박스.                                                                              | `SearchCombobox`     |
+| AsyncCombobox      | 비동기 검색 콤보박스. 디바운스 + 로딩 스피너와 stale response 방어를 내장합니다.                                   | `AsyncCombobox`      |
+| StatusSelect       | 색상 인디케이터가 있는 상태 선택 드롭다운.                                                                         | `StatusSelect`       |
+| BranchSelect       | Git 브랜치 선택 드롭다운. Select primitive 래퍼.                                                                   | `BranchSelect`       |
+| FilterBar          | 필터링 바 컴포넌트. 검색, 선택, 다중 선택 필터 지원.                                                               | `FilterBar`          |
+| SavedFilters       | 필터 프리셋 관리. 현재 필터를 저장하고 불러오는 Popover UI.                                                        | `SavedFilters`       |
+| QuickActions       | 빠른 작업 패널. 그리드/리스트 레이아웃, 단축키 표시 지원.                                                          | `QuickActions`       |
+| TimeRangeSelector  | 시간 범위 선택기. Popover + DateRangePicker + 프리셋 버튼 조합. 12개 시계열 Surface에서 사용.                      | `TimeRangeSelector`  |
+| ComparisonSelector | 비교 선택기. 고유 레이블이 연결된 Select × 2 + Swap 버튼 조합. CohortComparison, FunnelAnalysis 등에서 사용합니다. | `ComparisonSelector` |
+| ColumnToggler      | 테이블 컬럼 표시/숨김 토글러. Popover + Checkbox 리스트입니다.                                                     | `ColumnToggler`      |
+| BulkActions        | 일괄 작업 바. 선택 카운트 배지 + DropdownMenu 액션 목록 + 해제 버튼.                                               | `BulkActions`        |
+
+### Forms
+
+| Component        | Description                                                                                                            | Key Exports        |
+| ---------------- | ---------------------------------------------------------------------------------------------------------------------- | ------------------ |
+| SettingsForm     | 데이터 기반 설정 폼. 유효성 검증, 라디오, 체크박스 지원.                                                               | `SettingsForm`     |
+| AuthForm         | 로그인/회원가입 모드 전환 가능한 인증 폼. 이메일·비밀번호 검증, FormSwitch로 로그인 상태 유지 옵션 지원.               | `AuthForm`         |
+| DynamicFieldForm | 런타임 필드 추가/제거 폼. 최소/최대 필드 수 제약, 개별 검증, 동적 스토어 업데이트 지원.                                | `DynamicFieldForm` |
+| FileUploadForm   | 파일 선택, 메타데이터 표시, 이미지 미리보기를 포함한 업로드 폼. 파일 크기 제한, 설명 입력 지원.                        | `FileUploadForm`   |
+| WizardForm       | 다단계 순차 입력 폼. FormFieldDef 기반 필드 정의, 단계별 검증, 현재 단계가 연결된 진행 표시기, 리뷰 단계를 지원합니다. | `WizardForm`       |
+| ConfirmDialog    | 확인/취소 대화 상자. danger 변형으로 위험 작업 확인을 지원합니다.                                                      | `ConfirmDialog`    |
+| PromptTemplate   | AI 프롬프트 뷰어/헬퍼. 변수 입력 → 실시간 치환 → 복사 기능.                                                            | `PromptTemplate`   |
+
+### Infrastructure
+
+| Component          | Description                                                                 | Key Exports          |
+| ------------------ | --------------------------------------------------------------------------- | -------------------- |
+| DeploymentTimeline | 배포 단계 타임라인. Composite 기반 키보드 탐색 지원.                        | `DeploymentTimeline` |
+| EnvPanel           | 환경변수 패널. Disclosure로 환경별 그룹 접기/펼치기, Composite로 변수 탐색. | `EnvPanel`           |
+| WebhookConfig      | 웹훅 설정 패널. URL 입력 + 이벤트 체크박스 + 재시도 설정 + 테스트 버튼.     | `WebhookConfig`      |
+| FeatureFlagPanel   | 피처 플래그 관리 패널. 플래그 토글 + 환경 배지 + 롤아웃 % 조절.             | `FeatureFlagPanel`   |
+| DataImportWizard   | 데이터 임포트 마법사. 4단계: 업로드 → 컬럼 매핑 → 미리보기 → 확인.          | `DataImportWizard`   |
+
+### Analytics
+
+| Component        | Description                                                                                                      | Key Exports        |
+| ---------------- | ---------------------------------------------------------------------------------------------------------------- | ------------------ |
+| SqlEditor        | SQL 에디터. CodeMirror 기반의 SQL 편집기로 구문 강조와 자동 완성을 지원합니다.                                   | `SqlEditor`        |
+| EventMetaEditor  | 이벤트 메타 에디터. 레이블이 연결된 IconPicker + ColorPicker + TagInput 조합으로 이벤트 메타데이터를 편집합니다. | `EventMetaEditor`  |
+| PropertyExplorer | 프로퍼티 탐색기. 검색 가능한 속성 목록을 그룹별로 표시합니다.                                                    | `PropertyExplorer` |
+| RichTextEditor   | 마크다운 리치 텍스트 에디터. 서식 툴바 + textarea 조합.                                                          | `RichTextEditor`   |
+| ExportButton     | 데이터 내보내기 버튼. CSV/JSON 변환 내장, PDF는 콜백 위임. DropdownMenu 기반.                                    | `ExportButton`     |
+| InsightsPanel    | 이상 탐지 인사이트 패널. severity별 카드, 통계 필터, dismiss 기능, 검출 설정(유형/Z-score/days).                 | `InsightsPanel`    |
+
+### Builders
+
+| Component      | Description                                                                                                        | Key Exports      |
+| -------------- | ------------------------------------------------------------------------------------------------------------------ | ---------------- |
+| AlertBuilder   | 알림 빌더. 명시적으로 연결된 폼 레이블로 메트릭 조건, 빈도, 채널을 구성합니다.                                     | `AlertBuilder`   |
+| SegmentBuilder | 세그먼트 빌더. 각 조건 컨트롤의 접근 가능한 이름을 유지하며 event, property, cohort, custom 세그먼트를 정의합니다. | `SegmentBuilder` |
+| ReportBuilder  | 리포트 빌더. 레이블이 연결된 4단계 위저드 (차트 타입 → 데이터 설정 → 스타일 → 미리보기).                           | `ReportBuilder`  |
+
+### Widgets & Reports
+
+| Component  | Description                                                                              | Key Exports  |
+| ---------- | ---------------------------------------------------------------------------------------- | ------------ |
+| WidgetGrid | 위젯 그리드. react-grid-layout 래퍼로 드래그/리사이즈 가능한 대시보드 위젯을 배치합니다. | `WidgetGrid` |
+
+### Notification
+
+| Component         | Description                                                                                                               | Key Exports                                               |
+| ----------------- | ------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- |
+| NotificationToast | 토스트 알림 시스템. 포인터/키보드 상호작용 중 자동 닫힘을 일시 정지하고, 중요도별 live region으로 전역 알림을 관리합니다. | `ToastProvider`, `useToast`, `NotificationToast`, `toast` |
+
+### Development
+
+| Component        | Description                                                                                         | Key Exports        |
+| ---------------- | --------------------------------------------------------------------------------------------------- | ------------------ |
+| DesignGuidePanel | 디자인 시스템 참조 패널. 프리미티브 맵, 키보드 패턴, Tailwind 셀렉터, 접근성 속성 등 6개 섹션 제공. | `DesignGuidePanel` |
+
+### Workflow
+
+| Component      | Description                                                                        | Key Exports      |
+| -------------- | ---------------------------------------------------------------------------------- | ---------------- |
+| WorkflowCanvas | 워크플로우 캔버스. 그리드 셀 기반 스텝 배치, SVG 연결선, 키보드 이동을 지원합니다. | `WorkflowCanvas` |
+
+### Other
+
+| Component       | Description                                                                | Key Exports       |
+| --------------- | -------------------------------------------------------------------------- | ----------------- |
+| PageAside       | Sticky 페이지 사이드 aside chrome. 고정 너비 + header/body/footer 3-slot.  | `PageAside`       |
+| FailureList     | 실패 목록 패널. severity별 색상 강조, 그룹핑, 액션 슬롯을 지원합니다.      | `FailureList`     |
+| KeyValueEditor  | 키-값 쌍 편집기. 동적 행 추가/삭제, 비밀값 토글, 유효성 검사를 지원합니다. | `KeyValueEditor`  |
+| AuditTimeline   | 변경 이력 타임라인. 액션별 색상 코딩 + 확장 가능한 diff 뷰.                | `AuditTimeline`   |
+| ChatSidebar     | AI 채팅 사이드바. 대화 목록, 검색, 새 대화 버튼.                           | `ChatSidebar`     |
+| ChatInput       | 채팅 입력 컴포넌트. 자동 리사이즈 textarea, 파일 첨부, 모델/스타일 Select. | `ChatInput`       |
+| ChatMessageList | 채팅 메시지 목록. 역할별 말풍선, 타이핑 인디케이터, 자동 스크롤.           | `ChatMessageList` |
+
+## Surface Components (0)
+
+| Surface | Description | Key Props | Dependencies |
+| ------- | ----------- | --------- | ------------ |
+
+## Detailed Props Reference
+
+### Core Layer
+
+#### Text
+
+**Import:** `import { Text } from "@reopt-ai/opt-ui"`
+
+| Prop       | Type                                                  | Required | Default | Description           |
+| ---------- | ----------------------------------------------------- | -------- | ------- | --------------------- |
+| `as`       | `"span" \| "p" \| "div" \| "label" \| "code"`         |          |         | 렌더링할 HTML 요소    |
+| `variant`  | `"body" \| "label" \| "supporting" \| "code"`         |          |         | 시각적 텍스트 역할    |
+| `tone`     | `"primary" \| "secondary" \| "tertiary" \| "inherit"` |          |         | 의미 기반 텍스트 색상 |
+| `truncate` | `boolean`                                             |          |         | 한 줄 말줄임 적용     |
+| `children` | `ReactNode`                                           |          |         | 텍스트 콘텐츠         |
+
+#### Heading
+
+**Import:** `import { Heading } from "@reopt-ai/opt-ui"`
+
+| Prop       | Type                                                                     | Required | Default | Description              |
+| ---------- | ------------------------------------------------------------------------ | -------- | ------- | ------------------------ |
+| `level`    | `1 \| 2 \| 3 \| 4 \| 5 \| 6`                                             |          |         | 의미 기반 HTML 제목 레벨 |
+| `variant`  | `"heading-1" … "heading-6" \| "display-1" \| "display-2" \| "display-3"` |          |         | 시각적 제목 역할         |
+| `children` | `ReactNode`                                                              |          |         | 제목 콘텐츠              |
+
+#### Kbd
+
+**Import:** `import { Kbd } from "@reopt-ai/opt-ui"`
+
+| Prop       | Type        | Required | Default | Description          |
+| ---------- | ----------- | -------- | ------- | -------------------- |
+| `children` | `ReactNode` | Yes      |         | 표시할 단축키 텍스트 |
+
+#### Separator
+
+**Import:** `import { Separator } from "@reopt-ai/opt-ui"`
+
+| Prop          | Type                         | Required | Default | Description                           |
+| ------------- | ---------------------------- | -------- | ------- | ------------------------------------- |
+| `orientation` | `"horizontal" \| "vertical"` |          |         | 구분선 방향 (기본 horizontal)         |
+| `decorative`  | `boolean`                    |          |         | 접근성 트리에서 숨김 (순수 시각 구분) |
+| `children`    | `ReactNode`                  |          |         | 가운데 라벨 (horizontal 전용)         |
+| `className`   | `string`                     |          |         | 추가 CSS 클래스                       |
+
+#### OtpField
+
+**Import:** `import { OtpField } from "@reopt-ai/opt-ui"`
+
+| Prop           | Type                          | Required | Default | Description                                 |
+| -------------- | ----------------------------- | -------- | ------- | ------------------------------------------- |
+| `length`       | `number`                      |          |         | 셀 개수 (기본 6)                            |
+| `value`        | `string`                      |          |         | 제어 모드 값                                |
+| `defaultValue` | `string`                      |          |         | 비제어 초기값                               |
+| `onChange`     | `(value: string) => void`     |          |         | 값 변경 콜백                                |
+| `onComplete`   | `(value: string) => void`     |          |         | 모든 셀이 채워지면 1회 호출                 |
+| `type`         | `"numeric" \| "alphanumeric"` |          |         | 허용 문자 (기본 numeric)                    |
+| `mask`         | `boolean`                     |          |         | 채워진 셀을 점(•)으로 마스킹 (PIN 용)       |
+| `disabled`     | `boolean`                     |          |         | 비활성화                                    |
+| `name`         | `string`                      |          |         | 폼 필드명. 전체 값을 담은 hidden input 렌더 |
+| `label`        | `string`                      |          |         | 필드 레이블                                 |
+| `error`        | `string`                      |          |         | 에러 메시지                                 |
+| `hint`         | `string`                      |          |         | 도움말 텍스트                               |
+
+#### Toggle
+
+**Import:** `import { Toggle } from "@reopt-ai/opt-ui"`
+
+**Toggle:**
+
+| Prop              | Type                         | Required | Default | Description                              |
+| ----------------- | ---------------------------- | -------- | ------- | ---------------------------------------- |
+| `pressed`         | `boolean`                    |          |         | 제어 모드: 눌림 상태 (단독 사용)         |
+| `defaultPressed`  | `boolean`                    |          |         | 비제어 초기 눌림 상태 (단독 사용)        |
+| `onPressedChange` | `(pressed: boolean) => void` |          |         | 눌림 상태 변경 콜백 (단독 사용)          |
+| `value`           | `string`                     |          |         | ToggleGroup 내에서 이 토글을 식별하는 값 |
+| `size`            | `"sm" \| "md"`               |          |         | 크기 (기본 md)                           |
+| `disabled`        | `boolean`                    |          |         | 비활성화                                 |
+| `children`        | `ReactNode`                  |          |         | 토글 콘텐츠                              |
+
+**ToggleGroup:**
+
+| Prop             | Type                                  | Required | Default | Description                                       |
+| ---------------- | ------------------------------------- | -------- | ------- | ------------------------------------------------- |
+| `value`          | `string \| string[]`                  |          |         | 선택 값. 단일은 string, toggleMultiple은 string[] |
+| `defaultValue`   | `string \| string[]`                  |          |         | 비제어 초기 선택 값                               |
+| `onValueChange`  | `(value: string \| string[]) => void` |          |         | 선택 변경 콜백                                    |
+| `toggleMultiple` | `boolean`                             |          |         | 동시에 여러 개 눌림 허용                          |
+| `orientation`    | `"horizontal" \| "vertical"`          |          |         | 배치 방향 (기본 horizontal)                       |
+| `disabled`       | `boolean`                             |          |         | 그룹 전체 비활성화                                |
+| `children`       | `ReactNode`                           |          |         | Toggle 항목들                                     |
+
+#### Accordion
+
+**Import:** `import { AccordionRoot } from "@reopt-ai/opt-ui"`
+
+**AccordionRoot:**
+
+| Prop            | Type                                          | Required | Default | Description                                                   |
+| --------------- | --------------------------------------------- | -------- | ------- | ------------------------------------------------------------- |
+| `type`          | `"single" \| "multiple"`                      |          |         | 한 개만 열림(single) 또는 여러 개 열림(multiple). 기본 single |
+| `value`         | `string \| string[] \| null`                  |          |         | 열린 항목 값. single은 string\|null, multiple은 string[]      |
+| `defaultValue`  | `string \| string[] \| null`                  |          |         | 비제어 초기 열림 값                                           |
+| `onValueChange` | `(value: string \| string[] \| null) => void` |          |         | 열림 변경 콜백                                                |
+| `collapsible`   | `boolean`                                     |          |         | single 모드에서 열린 패널을 다시 닫을 수 있게 허용            |
+| `disabled`      | `boolean`                                     |          |         | 전체 비활성화                                                 |
+| `animated`      | `boolean`                                     |          |         | 콘텐츠 enter/leave 애니메이션 (기본 true)                     |
+| `children`      | `ReactNode`                                   |          |         | AccordionItem 목록                                            |
+
+**AccordionItem:**
+
+| Prop       | Type        | Required | Default | Description        |
+| ---------- | ----------- | -------- | ------- | ------------------ |
+| `value`    | `string`    | Yes      |         | 항목 식별 값       |
+| `disabled` | `boolean`   |          |         | 이 항목만 비활성화 |
+| `children` | `ReactNode` |          |         | Trigger + Content  |
+
+**AccordionTrigger:**
+
+| Prop       | Type        | Required | Default | Description                         |
+| ---------- | ----------- | -------- | ------- | ----------------------------------- |
+| `children` | `ReactNode` | Yes      |         | 헤더 라벨 (쉐브론 아이콘 자동 추가) |
+
+**AccordionContent:**
+
+| Prop       | Type        | Required | Default | Description        |
+| ---------- | ----------- | -------- | ------- | ------------------ |
+| `children` | `ReactNode` | Yes      |         | 펼쳐지는 패널 본문 |
+
+#### StatCard
+
+**Import:** `import { StatCard } from "@reopt-ai/opt-ui"`
+
+| Prop     | Type                          | Required | Default | Description                     |
+| -------- | ----------------------------- | -------- | ------- | ------------------------------- |
+| `title`  | `string`                      | Yes      |         | 통계 제목                       |
+| `value`  | `string`                      | Yes      |         | 통계 값                         |
+| `change` | `string`                      | Yes      |         | 변화량 텍스트 (예: '+12.5%')    |
+| `trend`  | `"up" \| "down" \| "neutral"` | Yes      |         | 트렌드 방향. 색상과 아이콘 결정 |
+
+#### CompositeZone
+
+**Import:** `import { CompositeZone } from "@reopt-ai/opt-ui"`
+
+| Prop        | Type        | Required | Default | Description                       |
+| ----------- | ----------- | -------- | ------- | --------------------------------- |
+| `children`  | `ReactNode` | Yes      |         | CompositeRow + CompositeItem 자식 |
+| `label`     | `string`    | Yes      |         | aria-label 값                     |
+| `focusLoop` | `boolean`   |          | true    | 포커스가 끝에서 처음으로 순환     |
+| `focusWrap` | `boolean`   |          | true    | 행 끝에서 다음 행으로 이동        |
+| `className` | `string`    |          |         | 컨테이너 CSS 클래스               |
+
+#### Disclosure
+
+**Import:** `import { DisclosureRoot } from "@reopt-ai/opt-ui"`
+
+**DisclosureRoot:**
+
+| Prop          | Type                      | Required | Default | Description                 |
+| ------------- | ------------------------- | -------- | ------- | --------------------------- |
+| `open`        | `boolean`                 |          |         | 제어 모드: 열림 상태        |
+| `setOpen`     | `(open: boolean) => void` |          |         | 제어 모드: 상태 변경 핸들러 |
+| `defaultOpen` | `boolean`                 |          | false   | 비제어 모드: 초기 열림 상태 |
+
+**DisclosureTrigger:**
+
+| Prop        | Type        | Required | Default | Description            |
+| ----------- | ----------- | -------- | ------- | ---------------------- |
+| `children`  | `ReactNode` | Yes      |         | 트리거 내용            |
+| `className` | `string`    |          |         | 기본 스타일 오버라이드 |
+
+**DisclosureContent:**
+
+| Prop        | Type        | Required | Default | Description            |
+| ----------- | ----------- | -------- | ------- | ---------------------- |
+| `children`  | `ReactNode` | Yes      |         | 접히는 콘텐츠          |
+| `className` | `string`    |          |         | 기본 스타일 오버라이드 |
+
+#### Tabs
+
+**Import:** `import { TabsRoot } from "@reopt-ai/opt-ui"`
+
+**TabsRoot:**
+
+| Prop                | Type                           | Required | Default | Description               |
+| ------------------- | ------------------------------ | -------- | ------- | ------------------------- |
+| `defaultSelectedId` | `string`                       |          |         | 초기 선택된 탭 ID         |
+| `selectedId`        | `string \| null`               |          |         | 제어 모드: 선택된 탭 ID   |
+| `setSelectedId`     | `(id: string \| null) => void` |          |         | 제어 모드: 탭 변경 핸들러 |
+
+**TabList:**
+
+| Prop        | Type        | Required | Default | Description            |
+| ----------- | ----------- | -------- | ------- | ---------------------- |
+| `children`  | `ReactNode` | Yes      |         | Tab 요소들             |
+| `className` | `string`    |          |         | 기본 스타일 오버라이드 |
+
+**Tab:**
+
+| Prop        | Type        | Required | Default | Description                          |
+| ----------- | ----------- | -------- | ------- | ------------------------------------ |
+| `id`        | `string`    | Yes      |         | 탭 고유 ID (TabPanel의 tabId와 매칭) |
+| `children`  | `ReactNode` | Yes      |         | 탭 레이블                            |
+| `className` | `string`    |          |         | 기본 스타일 오버라이드               |
+
+**TabPanel:**
+
+| Prop        | Type        | Required | Default | Description            |
+| ----------- | ----------- | -------- | ------- | ---------------------- |
+| `tabId`     | `string`    | Yes      |         | 연결된 Tab의 ID        |
+| `children`  | `ReactNode` | Yes      |         | 패널 콘텐츠            |
+| `className` | `string`    |          |         | 기본 스타일 오버라이드 |
+
+#### Select
+
+**Import:** `import { SelectRoot } from "@reopt-ai/opt-ui"`
+
+**SelectRoot:**
+
+| Prop            | Type                                  | Required | Default | Description                                              |
+| --------------- | ------------------------------------- | -------- | ------- | -------------------------------------------------------- |
+| `value`         | `string \| string[]`                  |          |         | 제어 모드: 현재 선택 값 (multiple이면 string[])          |
+| `onValueChange` | `(value: string \| string[]) => void` |          |         | 제어 모드: 값 변경 핸들러                                |
+| `defaultValue`  | `string \| string[]`                  |          |         | 비제어 모드: 초기값                                      |
+| `multiple`      | `boolean`                             |          |         | 다중 선택 허용 (값이 string[]이 됨)                      |
+| `name`          | `string`                              |          |         | 폼 필드명. 선택값마다 hidden input을 렌더해 폼 전송 지원 |
+
+**SelectLabel:**
+
+| Prop       | Type        | Required | Default | Description   |
+| ---------- | ----------- | -------- | ------- | ------------- |
+| `children` | `ReactNode` | Yes      |         | 레이블 텍스트 |
+
+**SelectTrigger:**
+
+| Prop        | Type        | Required | Default | Description                  |
+| ----------- | ----------- | -------- | ------- | ---------------------------- |
+| `children`  | `ReactNode` | Yes      |         | 트리거 내용 (선택된 값 표시) |
+| `className` | `string`    |          |         | 기본 스타일 오버라이드       |
+
+**SelectPopover:**
+
+| Prop        | Type        | Required | Default | Description            |
+| ----------- | ----------- | -------- | ------- | ---------------------- |
+| `children`  | `ReactNode` | Yes      |         | SelectItem 목록        |
+| `sameWidth` | `boolean`   |          | true    | 트리거와 같은 너비     |
+| `gutter`    | `number`    |          | 4       | 트리거와의 간격 (px)   |
+| `className` | `string`    |          |         | 기본 스타일 오버라이드 |
+
+**SelectItem:**
+
+| Prop        | Type        | Required | Default | Description            |
+| ----------- | ----------- | -------- | ------- | ---------------------- |
+| `value`     | `string`    | Yes      |         | 옵션 값                |
+| `children`  | `ReactNode` | Yes      |         | 옵션 레이블            |
+| `className` | `string`    |          |         | 기본 스타일 오버라이드 |
+
+**Examples:**
+
+_기본 선택:_
+
+```tsx
+import {
+  SelectRoot,
+  SelectLabel,
+  SelectTrigger,
+  SelectPopover,
+  SelectItem,
+} from "@reopt-ai/opt-ui";
+
+<SelectRoot value={role} onValueChange={setRole}>
+  <SelectLabel>역할</SelectLabel>
+  <SelectTrigger>{role || "선택하세요"}</SelectTrigger>
+  <SelectPopover>
+    <SelectItem value="admin">관리자</SelectItem>
+    <SelectItem value="editor">편집자</SelectItem>
+    <SelectItem value="viewer">뷰어</SelectItem>
+  </SelectPopover>
+</SelectRoot>;
+```
+
+#### Dialog
+
+**Import:** `import { DialogRoot } from "@reopt-ai/opt-ui"`
+
+**DialogRoot:**
+
+| Prop      | Type                      | Required | Default | Description                 |
+| --------- | ------------------------- | -------- | ------- | --------------------------- |
+| `open`    | `boolean`                 |          |         | 제어 모드: 열림 상태        |
+| `setOpen` | `(open: boolean) => void` |          |         | 제어 모드: 상태 변경 핸들러 |
+
+**DialogDisclosure:**
+
+| Prop        | Type        | Required | Default | Description            |
+| ----------- | ----------- | -------- | ------- | ---------------------- |
+| `children`  | `ReactNode` | Yes      |         | 트리거 버튼 내용       |
+| `className` | `string`    |          |         | 기본 스타일 오버라이드 |
+
+**DialogPanel:**
+
+| Prop        | Type                                             | Required | Default             | Description            |
+| ----------- | ------------------------------------------------ | -------- | ------------------- | ---------------------- |
+| `children`  | `ReactNode`                                      | Yes      |                     | 다이얼로그 콘텐츠      |
+| `size`      | `"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "full"` |          | "md"                | 최대 너비 프리셋       |
+| `backdrop`  | `ReactElement`                                   |          | <div> (반투명 배경) | 배경 오버레이 요소     |
+| `className` | `string`                                         |          |                     | 기본 스타일 오버라이드 |
+
+**DialogHeading:**
+
+| Prop       | Type        | Required | Default | Description                             |
+| ---------- | ----------- | -------- | ------- | --------------------------------------- |
+| `children` | `ReactNode` | Yes      |         | 제목 텍스트 (자동 aria-labelledby 연결) |
+
+**DialogDescription:**
+
+| Prop       | Type        | Required | Default | Description                              |
+| ---------- | ----------- | -------- | ------- | ---------------------------------------- |
+| `children` | `ReactNode` | Yes      |         | 설명 텍스트 (자동 aria-describedby 연결) |
+
+**DialogDismiss:**
+
+| Prop       | Type        | Required | Default | Description    |
+| ---------- | ----------- | -------- | ------- | -------------- |
+| `children` | `ReactNode` |          |         | 닫기 버튼 내용 |
+
+**DialogHeader:**
+
+| Prop       | Type        | Required | Default | Description                                  |
+| ---------- | ----------- | -------- | ------- | -------------------------------------------- |
+| `children` | `ReactNode` | Yes      |         | Heading, Description, Dismiss 등 헤더 콘텐츠 |
+
+**DialogBody:**
+
+| Prop       | Type        | Required | Default | Description               |
+| ---------- | ----------- | -------- | ------- | ------------------------- |
+| `children` | `ReactNode` | Yes      |         | 스크롤 가능한 본문 콘텐츠 |
+
+**DialogFooter:**
+
+| Prop       | Type        | Required | Default | Description    |
+| ---------- | ----------- | -------- | ------- | -------------- |
+| `children` | `ReactNode` | Yes      |         | 액션 버튼 영역 |
+
+**Examples:**
+
+_모달 대화상자:_
+
+```tsx
+import {
+  DialogRoot,
+  DialogDisclosure,
+  DialogPanel,
+  DialogHeading,
+  DialogDismiss,
+} from "@reopt-ai/opt-ui";
+
+<DialogRoot>
+  <DialogDisclosure>열기</DialogDisclosure>
+  <DialogPanel size="md">
+    <DialogHeading>확인</DialogHeading>
+    <p>변경 사항을 저장하시겠습니까?</p>
+    <DialogDismiss>닫기</DialogDismiss>
+  </DialogPanel>
+</DialogRoot>;
+```
+
+#### Combobox
+
+**Import:** `import { ComboboxRoot } from "@reopt-ai/opt-ui"`
+
+**ComboboxRoot:**
+
+| Prop               | Type                      | Required | Default | Description                |
+| ------------------ | ------------------------- | -------- | ------- | -------------------------- |
+| `setValue`         | `(value: string) => void` |          |         | 입력값 변경 핸들러         |
+| `resetValueOnHide` | `boolean`                 |          | false   | 팝오버 닫힐 때 입력값 리셋 |
+
+**ComboboxInput:**
+
+| Prop          | Type      | Required | Default | Description            |
+| ------------- | --------- | -------- | ------- | ---------------------- |
+| `placeholder` | `string`  |          |         | 플레이스홀더 텍스트    |
+| `autoSelect`  | `boolean` |          | false   | 첫 항목 자동 선택      |
+| `className`   | `string`  |          |         | 기본 스타일 오버라이드 |
+
+**ComboboxPopover:**
+
+| Prop        | Type        | Required | Default | Description             |
+| ----------- | ----------- | -------- | ------- | ----------------------- |
+| `children`  | `ReactNode` | Yes      |         | ComboboxItem/Group 목록 |
+| `sameWidth` | `boolean`   |          | true    | 입력과 같은 너비        |
+| `gutter`    | `number`    |          | 4       | 입력과의 간격 (px)      |
+| `className` | `string`    |          |         | 기본 스타일 오버라이드  |
+
+**ComboboxItem:**
+
+| Prop        | Type        | Required | Default | Description            |
+| ----------- | ----------- | -------- | ------- | ---------------------- |
+| `value`     | `string`    | Yes      |         | 항목 값                |
+| `children`  | `ReactNode` | Yes      |         | 항목 내용              |
+| `className` | `string`    |          |         | 기본 스타일 오버라이드 |
+
+**ComboboxGroup:**
+
+| Prop       | Type        | Required | Default | Description            |
+| ---------- | ----------- | -------- | ------- | ---------------------- |
+| `children` | `ReactNode` | Yes      |         | GroupLabel + Item 그룹 |
+
+**ComboboxGroupLabel:**
+
+| Prop        | Type        | Required | Default | Description            |
+| ----------- | ----------- | -------- | ------- | ---------------------- |
+| `children`  | `ReactNode` | Yes      |         | 그룹 레이블            |
+| `className` | `string`    |          |         | 기본 스타일 오버라이드 |
+
+**ComboboxEmpty:**
+
+| Prop        | Type        | Required | Default            | Description            |
+| ----------- | ----------- | -------- | ------------------ | ---------------------- |
+| `children`  | `ReactNode` |          | "결과가 없습니다." | 빈 상태 메시지         |
+| `className` | `string`    |          |                    | 기본 스타일 오버라이드 |
+
+#### Menu
+
+**Import:** `import { MenubarRoot } from "@reopt-ai/opt-ui"`
+
+**MenubarRoot:**
+
+| Prop | Type | Required | Default | Description |
+| ---- | ---- | -------- | ------- | ----------- |
+
+**MenubarContainer:**
+
+| Prop        | Type        | Required | Default | Description            |
+| ----------- | ----------- | -------- | ------- | ---------------------- |
+| `children`  | `ReactNode` | Yes      |         | MenuRoot 요소들        |
+| `className` | `string`    |          |         | 기본 스타일 오버라이드 |
+
+**MenuRoot:**
+
+| Prop | Type | Required | Default | Description |
+| ---- | ---- | -------- | ------- | ----------- |
+
+**MenuTrigger:**
+
+| Prop        | Type        | Required | Default | Description            |
+| ----------- | ----------- | -------- | ------- | ---------------------- |
+| `children`  | `ReactNode` | Yes      |         | 메뉴 버튼 레이블       |
+| `className` | `string`    |          |         | 기본 스타일 오버라이드 |
+
+**MenuButtonArrow:**
+
+| Prop        | Type     | Required | Default | Description       |
+| ----------- | -------- | -------- | ------- | ----------------- |
+| `className` | `string` |          |         | 화살표 CSS 클래스 |
+
+**MenuPopover:**
+
+| Prop        | Type        | Required | Default | Description            |
+| ----------- | ----------- | -------- | ------- | ---------------------- |
+| `children`  | `ReactNode` | Yes      |         | MenuItem 목록          |
+| `gutter`    | `number`    |          | 8       | 트리거와의 간격 (px)   |
+| `className` | `string`    |          |         | 기본 스타일 오버라이드 |
+
+**MenuItem:**
+
+| Prop        | Type         | Required | Default | Description            |
+| ----------- | ------------ | -------- | ------- | ---------------------- |
+| `children`  | `ReactNode`  | Yes      |         | 메뉴 항목 내용         |
+| `onClick`   | `() => void` |          |         | 클릭 핸들러            |
+| `className` | `string`     |          |         | 기본 스타일 오버라이드 |
+
+**MenuItemCheckbox:**
+
+| Prop        | Type                       | Required | Default | Description            |
+| ----------- | -------------------------- | -------- | ------- | ---------------------- |
+| `name`      | `string`                   | Yes      |         | 체크박스 이름          |
+| `value`     | `string`                   | Yes      |         | 체크박스 값            |
+| `checked`   | `boolean`                  |          |         | 체크 상태              |
+| `onChange`  | `(e: ChangeEvent) => void` |          |         | 변경 핸들러            |
+| `children`  | `ReactNode`                | Yes      |         | 항목 내용              |
+| `className` | `string`                   |          |         | 기본 스타일 오버라이드 |
+
+**MenuItemRadio:**
+
+| Prop        | Type                       | Required | Default | Description            |
+| ----------- | -------------------------- | -------- | ------- | ---------------------- |
+| `name`      | `string`                   | Yes      |         | 라디오 그룹 이름       |
+| `value`     | `string`                   | Yes      |         | 라디오 값              |
+| `checked`   | `boolean`                  |          |         | 선택 상태              |
+| `onChange`  | `(e: ChangeEvent) => void` |          |         | 변경 핸들러            |
+| `children`  | `ReactNode`                | Yes      |         | 항목 내용              |
+| `className` | `string`                   |          |         | 기본 스타일 오버라이드 |
+
+**MenuSeparator:**
+
+| Prop        | Type     | Required | Default | Description            |
+| ----------- | -------- | -------- | ------- | ---------------------- |
+| `className` | `string` |          |         | 기본 스타일 오버라이드 |
+
+#### Toolbar
+
+**Import:** `import { ToolbarRoot } from "@reopt-ai/opt-ui"`
+
+**ToolbarRoot:**
+
+| Prop        | Type      | Required | Default | Description      |
+| ----------- | --------- | -------- | ------- | ---------------- |
+| `focusLoop` | `boolean` |          | false   | 포커스 순환 여부 |
+
+**ToolbarContainer:**
+
+| Prop        | Type        | Required | Default | Description                    |
+| ----------- | ----------- | -------- | ------- | ------------------------------ |
+| `children`  | `ReactNode` | Yes      |         | ToolbarButton/Separator 요소들 |
+| `className` | `string`    |          |         | 기본 스타일 오버라이드         |
+
+**ToolbarButton:**
+
+| Prop        | Type         | Required | Default | Description            |
+| ----------- | ------------ | -------- | ------- | ---------------------- |
+| `children`  | `ReactNode`  | Yes      |         | 버튼 내용              |
+| `onClick`   | `() => void` |          |         | 클릭 핸들러            |
+| `className` | `string`     |          |         | 기본 스타일 오버라이드 |
+
+**ToolbarSeparator:**
+
+| Prop        | Type     | Required | Default | Description            |
+| ----------- | -------- | -------- | ------- | ---------------------- |
+| `className` | `string` |          |         | 기본 스타일 오버라이드 |
+
+**TooltipProvider:**
+
+| Prop | Type | Required | Default | Description |
+| ---- | ---- | -------- | ------- | ----------- |
+
+**TooltipAnchor:**
+
+| Prop       | Type           | Required | Default | Description        |
+| ---------- | -------------- | -------- | ------- | ------------------ |
+| `render`   | `ReactElement` |          |         | 앵커로 사용할 요소 |
+| `children` | `ReactNode`    |          |         | 앵커 내용          |
+
+**Tooltip:**
+
+| Prop        | Type        | Required | Default | Description            |
+| ----------- | ----------- | -------- | ------- | ---------------------- |
+| `children`  | `ReactNode` | Yes      |         | 툴팁 내용              |
+| `className` | `string`    |          |         | 기본 스타일 오버라이드 |
+
+#### Form
+
+**Import:** `import { FormRoot } from "@reopt-ai/opt-ui"`
+
+**FormRoot:**
+
+| Prop        | Type        | Required | Default | Description                                                              |
+| ----------- | ----------- | -------- | ------- | ------------------------------------------------------------------------ |
+| `store`     | `FormStore` |          |         | useFormStore()로 생성한 폼 스토어. 미지정 시 자식의 FormProvider가 제공. |
+| `children`  | `ReactNode` | Yes      |         | 폼 필드들                                                                |
+| `className` | `string`    |          |         | 기본 스타일 오버라이드                                                   |
+
+**FormInput:**
+
+| Prop          | Type     | Required | Default | Description                     |
+| ------------- | -------- | -------- | ------- | ------------------------------- |
+| `name`        | `string` | Yes      |         | 폼 필드 이름 (스토어 키와 매칭) |
+| `type`        | `string` |          | "text"  | 입력 타입                       |
+| `placeholder` | `string` |          |         | 플레이스홀더                    |
+| `className`   | `string` |          |         | 기본 스타일 오버라이드          |
+
+**FormTextarea:**
+
+| Prop          | Type                                             | Required | Default    | Description     |
+| ------------- | ------------------------------------------------ | -------- | ---------- | --------------- |
+| `name`        | `string`                                         | Yes      |            | 폼 필드 이름    |
+| `rows`        | `number`                                         |          | 4          | 표시 줄 수      |
+| `resize`      | `"none" \| "vertical" \| "horizontal" \| "both"` |          | "vertical" | 크기 조절 방향  |
+| `placeholder` | `string`                                         |          |            | 플레이스홀더    |
+| `className`   | `string`                                         |          |            | 추가 CSS 클래스 |
+
+**FormSelect:**
+
+| Prop          | Type        | Required | Default | Description                    |
+| ------------- | ----------- | -------- | ------- | ------------------------------ |
+| `name`        | `string`    | Yes      |         | 폼 필드 이름                   |
+| `children`    | `ReactNode` | Yes      |         | FormSelectPopover 등 자식 요소 |
+| `placeholder` | `string`    |          |         | 미선택 시 표시 텍스트          |
+| `className`   | `string`    |          |         | 추가 CSS 클래스                |
+
+**FormSelectPopover:**
+
+| Prop        | Type        | Required | Default | Description          |
+| ----------- | ----------- | -------- | ------- | -------------------- |
+| `children`  | `ReactNode` | Yes      |         | FormSelectItem 목록  |
+| `sameWidth` | `boolean`   |          | true    | 트리거와 같은 너비   |
+| `gutter`    | `number`    |          | 4       | 트리거와의 간격 (px) |
+
+**FormSelectItem:**
+
+| Prop       | Type        | Required | Default | Description |
+| ---------- | ----------- | -------- | ------- | ----------- |
+| `value`    | `string`    | Yes      |         | 옵션 값     |
+| `children` | `ReactNode` | Yes      |         | 옵션 레이블 |
+
+**FormSwitch:**
+
+| Prop       | Type                   | Required | Default | Description   |
+| ---------- | ---------------------- | -------- | ------- | ------------- |
+| `name`     | `string`               | Yes      |         | 폼 필드 이름  |
+| `size`     | `"sm" \| "md" \| "lg"` |          | "md"    | 스위치 크기   |
+| `disabled` | `boolean`              |          |         | 비활성화 상태 |
+
+**FormLabel:**
+
+| Prop        | Type        | Required | Default | Description            |
+| ----------- | ----------- | -------- | ------- | ---------------------- |
+| `name`      | `string`    | Yes      |         | 연결된 필드 이름       |
+| `children`  | `ReactNode` | Yes      |         | 레이블 텍스트          |
+| `className` | `string`    |          |         | 기본 스타일 오버라이드 |
+
+**FormError:**
+
+| Prop        | Type     | Required | Default | Description            |
+| ----------- | -------- | -------- | ------- | ---------------------- |
+| `name`      | `string` | Yes      |         | 연결된 필드 이름       |
+| `className` | `string` |          |         | 기본 스타일 오버라이드 |
+
+**FormSubmit:**
+
+| Prop        | Type        | Required | Default | Description            |
+| ----------- | ----------- | -------- | ------- | ---------------------- |
+| `children`  | `ReactNode` | Yes      |         | 버튼 텍스트            |
+| `className` | `string`    |          |         | 기본 스타일 오버라이드 |
+
+**FormProvider:**
+
+| Prop       | Type        | Required | Default | Description                       |
+| ---------- | ----------- | -------- | ------- | --------------------------------- |
+| `store`    | `FormStore` | Yes      |         | useFormStore()로 생성한 폼 스토어 |
+| `children` | `ReactNode` | Yes      |         | 자식 폼 요소                      |
+
+**FormGroup:**
+
+| Prop        | Type        | Required | Default | Description            |
+| ----------- | ----------- | -------- | ------- | ---------------------- |
+| `children`  | `ReactNode` | Yes      |         | 그룹 내 필드들         |
+| `className` | `string`    |          |         | 기본 스타일 오버라이드 |
+
+**FormGroupLabel:**
+
+| Prop        | Type        | Required | Default | Description            |
+| ----------- | ----------- | -------- | ------- | ---------------------- |
+| `children`  | `ReactNode` | Yes      |         | 그룹 레이블 텍스트     |
+| `className` | `string`    |          |         | 기본 스타일 오버라이드 |
+
+**FormDescription:**
+
+| Prop        | Type        | Required | Default | Description            |
+| ----------- | ----------- | -------- | ------- | ---------------------- |
+| `name`      | `string`    | Yes      |         | 연결된 필드 이름       |
+| `children`  | `ReactNode` | Yes      |         | 도움말 텍스트          |
+| `className` | `string`    |          |         | 기본 스타일 오버라이드 |
+
+**FormField:**
+
+| Prop        | Type        | Required | Default | Description              |
+| ----------- | ----------- | -------- | ------- | ------------------------ |
+| `name`      | `string`    | Yes      |         | 필드 이름                |
+| `children`  | `ReactNode` | Yes      |         | label + input + error 등 |
+| `className` | `string`    |          |         | 기본 스타일 오버라이드   |
+
+**FormControl:**
+
+| Prop        | Type     | Required | Default | Description            |
+| ----------- | -------- | -------- | ------- | ---------------------- |
+| `name`      | `string` | Yes      |         | 연결된 필드 이름       |
+| `className` | `string` |          |         | 기본 스타일 오버라이드 |
+
+**FormCheckbox:**
+
+| Prop        | Type     | Required | Default | Description              |
+| ----------- | -------- | -------- | ------- | ------------------------ |
+| `name`      | `string` | Yes      |         | 폼 필드 이름 (스토어 키) |
+| `className` | `string` |          |         | 기본 스타일 오버라이드   |
+
+**FormRadioGroup:**
+
+| Prop        | Type        | Required | Default | Description              |
+| ----------- | ----------- | -------- | ------- | ------------------------ |
+| `name`      | `string`    | Yes      |         | 폼 필드 이름 (스토어 키) |
+| `children`  | `ReactNode` | Yes      |         | FormRadio 목록           |
+| `className` | `string`    |          |         | 기본 스타일 오버라이드   |
+
+**FormRadio:**
+
+| Prop        | Type     | Required | Default | Description              |
+| ----------- | -------- | -------- | ------- | ------------------------ |
+| `name`      | `string` | Yes      |         | 폼 필드 이름 (스토어 키) |
+| `value`     | `string` | Yes      |         | 라디오 값                |
+| `className` | `string` |          |         | 기본 스타일 오버라이드   |
+
+**FormPush:**
+
+| Prop        | Type        | Required | Default | Description            |
+| ----------- | ----------- | -------- | ------- | ---------------------- |
+| `name`      | `string`    | Yes      |         | 배열 필드 이름         |
+| `value`     | `unknown`   | Yes      |         | 추가할 기본값          |
+| `children`  | `ReactNode` | Yes      |         | 버튼 텍스트            |
+| `className` | `string`    |          |         | 기본 스타일 오버라이드 |
+
+**FormRemove:**
+
+| Prop        | Type        | Required | Default | Description            |
+| ----------- | ----------- | -------- | ------- | ---------------------- |
+| `name`      | `string`    | Yes      |         | 배열 필드 이름         |
+| `index`     | `number`    | Yes      |         | 제거할 인덱스          |
+| `children`  | `ReactNode` | Yes      |         | 버튼 텍스트            |
+| `className` | `string`    |          |         | 기본 스타일 오버라이드 |
+
+**FormReset:**
+
+| Prop        | Type        | Required | Default | Description            |
+| ----------- | ----------- | -------- | ------- | ---------------------- |
+| `children`  | `ReactNode` | Yes      |         | 버튼 텍스트            |
+| `className` | `string`    |          |         | 기본 스타일 오버라이드 |
+
+**useFormContext:**
+
+| Prop | Type | Required | Default | Description |
+| ---- | ---- | -------- | ------- | ----------- |
+
+**useFormStore:**
+
+| Prop            | Type                      | Required | Default | Description |
+| --------------- | ------------------------- | -------- | ------- | ----------- |
+| `defaultValues` | `Record<string, unknown>` |          |         | 초기 폼 값  |
+
+**Examples:**
+
+_기본 폼:_
+
+```tsx
+import {
+  useFormStore,
+  FormRoot,
+  FormField,
+  FormControl,
+  FormLabel,
+  FormError,
+  FormSubmit,
+  Input,
+} from "@reopt-ai/opt-ui";
+
+const store = useFormStore({ defaultValues: { name: "", email: "" } });
+
+<FormRoot store={store}>
+  <FormField name="name">
+    <FormLabel name="name">이름</FormLabel>
+    <FormControl name="name">
+      <Input />
+    </FormControl>
+    <FormError name="name" />
+  </FormField>
+  <FormSubmit>저장</FormSubmit>
+</FormRoot>;
+```
+
+_검증 + 비동기 제출:_
+
+```tsx
+import {
+  useFormStore,
+  FormRoot,
+  FormField,
+  FormControl,
+  FormLabel,
+  FormError,
+  FormSubmit,
+  Input,
+} from "@reopt-ai/opt-ui";
+
+const store = useFormStore({
+  defaultValues: { email: "" },
+  validate: (values) => {
+    const errors: Record<string, string> = {};
+    if (!values.email) errors.email = "이메일을 입력하세요";
+    return errors;
+  },
+  onSubmit: async (values) => {
+    await fetch("/api/submit", {
+      method: "POST",
+      body: JSON.stringify(values),
+    });
+  },
+});
+```
+
+_schemaValidator (Zod):_
+
+```tsx
+import { useFormStore, schemaValidator } from "@reopt-ai/opt-ui";
+import { z } from "zod";
+
+const schema = z.object({
+  name: z.string().min(1, "필수 항목"),
+  age: z.number().min(0, "0 이상"),
+});
+
+const store = useFormStore({
+  defaultValues: { name: "", age: 0 },
+  validate: schemaValidator(schema),
+});
+```
+
+#### Button
+
+**Import:** `import { Button } from "@reopt-ai/opt-ui"`
+
+| Prop        | Type                                              | Required | Default   | Description                               |
+| ----------- | ------------------------------------------------- | -------- | --------- | ----------------------------------------- |
+| `variant`   | `"primary" \| "secondary" \| "ghost" \| "danger"` |          | "primary" | 버튼 스타일 변형                          |
+| `size`      | `"sm" \| "md" \| "lg"`                            |          | "md"      | 버튼 크기                                 |
+| `loading`   | `boolean`                                         |          | false     | 로딩 상태. true면 스피너 표시 및 비활성화 |
+| `leftIcon`  | `ReactNode`                                       |          |           | 버튼 텍스트 왼쪽에 표시할 아이콘          |
+| `rightIcon` | `ReactNode`                                       |          |           | 버튼 텍스트 오른쪽에 표시할 아이콘        |
+| `disabled`  | `boolean`                                         |          |           | 비활성화 상태                             |
+
+**Examples:**
+
+_버튼 변형:_
+
+```tsx
+import { Button } from "@reopt-ai/opt-ui";
+
+<Button variant="primary">Primary</Button>
+<Button variant="secondary">Secondary</Button>
+<Button variant="ghost">Ghost</Button>
+<Button variant="danger" disabled>Danger</Button>
+<Button variant="primary" loading>저장 중...</Button>
+```
+
+#### Badge
+
+**Import:** `import { Badge } from "@reopt-ai/opt-ui"`
+
+| Prop           | Type                                                       | Required | Default   | Description                                  |
+| -------------- | ---------------------------------------------------------- | -------- | --------- | -------------------------------------------- |
+| `variant`      | `"default" \| "success" \| "warning" \| "error" \| "info"` |          | "default" | 뱃지 색상 변형                               |
+| `size`         | `"sm" \| "md"`                                             |          | "md"      | 뱃지 크기                                    |
+| `dot`          | `boolean`                                                  |          | false     | 상태 점 표시 여부                            |
+| `progress`     | `number`                                                   |          |           | 원형 프로그레스 값 (0-100). 설정 시 dot 무시 |
+| `progressSize` | `number`                                                   |          | 16        | 프로그레스 링 SVG 크기 (px)                  |
+
+#### Spinner
+
+**Import:** `import { Spinner } from "@reopt-ai/opt-ui"`
+
+| Prop   | Type                   | Required | Default | Description |
+| ------ | ---------------------- | -------- | ------- | ----------- |
+| `size` | `"sm" \| "md" \| "lg"` |          | "md"    | 스피너 크기 |
+
+#### Alert
+
+**Import:** `import { Alert } from "@reopt-ai/opt-ui"`
+
+| Prop          | Type                                          | Required | Default | Description                                           |
+| ------------- | --------------------------------------------- | -------- | ------- | ----------------------------------------------------- |
+| `variant`     | `"info" \| "success" \| "warning" \| "error"` |          | "info"  | 알림 변형 (색상 및 아이콘 결정)                       |
+| `title`       | `string`                                      |          |         | 알림 제목                                             |
+| `icon`        | `ReactNode`                                   |          |         | 커스텀 아이콘. 미지정 시 변형에 따른 기본 아이콘 사용 |
+| `dismissible` | `boolean`                                     |          | false   | 닫기 버튼 표시 여부                                   |
+| `onDismiss`   | `() => void`                                  |          |         | 닫기 버튼 클릭 핸들러                                 |
+
+#### Input
+
+**Import:** `import { Input } from "@reopt-ai/opt-ui"`
+
+| Prop        | Type        | Required | Default | Description                                 |
+| ----------- | ----------- | -------- | ------- | ------------------------------------------- |
+| `label`     | `string`    |          |         | 입력 필드 레이블                            |
+| `error`     | `string`    |          |         | 에러 메시지. 표시 시 aria-invalid=true 설정 |
+| `hint`      | `string`    |          |         | 힌트 텍스트 (에러 없을 때만 표시)           |
+| `leftIcon`  | `ReactNode` |          |         | 입력 필드 왼쪽에 표시할 아이콘              |
+| `rightIcon` | `ReactNode` |          |         | 입력 필드 오른쪽에 표시할 아이콘            |
+| `fullWidth` | `boolean`   |          | false   | 전체 너비 사용 여부                         |
+
+**Examples:**
+
+_기본 사용:_
+
+```tsx
+import { Input } from "@reopt-ai/opt-ui";
+
+<Input
+  label="이메일"
+  hint="업무용 이메일을 입력하세요"
+  placeholder="user@example.com"
+  value={email}
+  onChange={(e) => setEmail(e.target.value)}
+/>;
+```
+
+_FormStore 연동:_
+
+```tsx
+import {
+  useFormStore,
+  FormRoot,
+  FormField,
+  FormControl,
+  FormLabel,
+  Input,
+} from "@reopt-ai/opt-ui";
+
+const store = useFormStore({ defaultValues: { name: "" } });
+
+<FormRoot store={store}>
+  <FormField name="name">
+    <FormLabel name="name">이름</FormLabel>
+    <FormControl name="name">
+      <Input />
+    </FormControl>
+  </FormField>
+</FormRoot>;
+```
+
+#### Switch
+
+**Import:** `import { Switch } from "@reopt-ai/opt-ui"`
+
+| Prop             | Type                         | Required | Default | Description                 |
+| ---------------- | ---------------------------- | -------- | ------- | --------------------------- |
+| `label`          | `string`                     |          |         | 스위치 레이블               |
+| `description`    | `string`                     |          |         | 레이블 아래 설명 텍스트     |
+| `checked`        | `boolean`                    |          |         | 제어 모드: 체크 상태        |
+| `defaultChecked` | `boolean`                    |          |         | 비제어 모드: 초기 체크 상태 |
+| `onChange`       | `(checked: boolean) => void` |          |         | 상태 변경 핸들러            |
+| `size`           | `"sm" \| "md" \| "lg"`       |          | "md"    | 스위치 크기                 |
+| `disabled`       | `boolean`                    |          |         | 비활성화 상태               |
+
+#### Skeleton
+
+**Import:** `import { Skeleton } from "@reopt-ai/opt-ui"`
+
+**Skeleton:**
+
+| Prop       | Type                                    | Required | Default | Description             |
+| ---------- | --------------------------------------- | -------- | ------- | ----------------------- |
+| `variant`  | `"text" \| "circular" \| "rectangular"` |          | "text"  | 스켈레톤 형태           |
+| `width`    | `string \| number`                      |          |         | 너비 (px 또는 CSS 값)   |
+| `height`   | `string \| number`                      |          |         | 높이 (px 또는 CSS 값)   |
+| `lines`    | `number`                                |          | 1       | text variant일 때 줄 수 |
+| `animated` | `boolean`                               |          | true    | 펄스 애니메이션 활성화  |
+
+**SkeletonText:**
+
+| Prop    | Type     | Required | Default | Description  |
+| ------- | -------- | -------- | ------- | ------------ |
+| `lines` | `number` |          | 3       | 텍스트 줄 수 |
+
+**SkeletonAvatar:**
+
+| Prop   | Type     | Required | Default | Description      |
+| ------ | -------- | -------- | ------- | ---------------- |
+| `size` | `number` |          | 40      | 아바타 크기 (px) |
+
+**SkeletonTable:**
+
+| Prop      | Type     | Required | Default | Description  |
+| --------- | -------- | -------- | ------- | ------------ |
+| `rows`    | `number` |          | 5       | 테이블 행 수 |
+| `columns` | `number` |          | 4       | 테이블 열 수 |
+
+#### Textarea
+
+**Import:** `import { Textarea } from "@reopt-ai/opt-ui"`
+
+| Prop        | Type                                             | Required | Default    | Description      |
+| ----------- | ------------------------------------------------ | -------- | ---------- | ---------------- |
+| `label`     | `string`                                         |          |            | 입력 필드 레이블 |
+| `error`     | `string`                                         |          |            | 에러 메시지      |
+| `hint`      | `string`                                         |          |            | 힌트 텍스트      |
+| `fullWidth` | `boolean`                                        |          | false      | 전체 너비 사용   |
+| `resize`    | `"none" \| "vertical" \| "horizontal" \| "both"` |          | "vertical" | 크기 조절 방향   |
+| `rows`      | `number`                                         |          | 4          | 표시 줄 수       |
+
+#### Avatar
+
+**Import:** `import { Avatar } from "@reopt-ai/opt-ui"`
+
+**Avatar:**
+
+| Prop       | Type                                        | Required | Default | Description                            |
+| ---------- | ------------------------------------------- | -------- | ------- | -------------------------------------- |
+| `src`      | `string`                                    |          |         | 이미지 URL                             |
+| `alt`      | `string`                                    |          |         | 이미지 대체 텍스트                     |
+| `name`     | `string`                                    |          |         | 사용자 이름 (이니셜 생성 및 색상 결정) |
+| `size`     | `"xs" \| "sm" \| "md" \| "lg" \| "xl"`      |          | "md"    | 아바타 크기                            |
+| `fallback` | `ReactNode`                                 |          |         | 이미지 실패 시 표시할 콘텐츠           |
+| `status`   | `"online" \| "offline" \| "busy" \| "away"` |          |         | 상태 인디케이터                        |
+
+**AvatarGroup:**
+
+| Prop       | Type                                   | Required | Default | Description    |
+| ---------- | -------------------------------------- | -------- | ------- | -------------- |
+| `max`      | `number`                               |          | 4       | 최대 표시 개수 |
+| `size`     | `"xs" \| "sm" \| "md" \| "lg" \| "xl"` |          | "md"    | 아바타 크기    |
+| `children` | `ReactNode`                            | Yes      |         | Avatar 요소들  |
+
+#### Progress
+
+**Import:** `import { Progress } from "@reopt-ai/opt-ui"`
+
+**Progress:**
+
+| Prop            | Type                                             | Required | Default   | Description                          |
+| --------------- | ------------------------------------------------ | -------- | --------- | ------------------------------------ |
+| `value`         | `number`                                         |          |           | 현재 값. 생략하면 indeterminate 상태 |
+| `max`           | `number`                                         |          | 100       | 최대 값                              |
+| `size`          | `"sm" \| "md" \| "lg"`                           |          | "md"      | 진행바 높이                          |
+| `variant`       | `"default" \| "success" \| "warning" \| "error"` |          | "default" | 색상 변형                            |
+| `showLabel`     | `boolean`                                        |          | false     | 퍼센트 표시                          |
+| `label`         | `string`                                         |          |           | 레이블 텍스트                        |
+| `animated`      | `boolean`                                        |          | true      | 애니메이션 활성화                    |
+| `indeterminate` | `boolean`                                        |          | false     | 값을 알 수 없는 진행 상태            |
+
+**CircularProgress:**
+
+| Prop            | Type                                             | Required | Default   | Description                          |
+| --------------- | ------------------------------------------------ | -------- | --------- | ------------------------------------ |
+| `value`         | `number`                                         |          |           | 현재 값. 생략하면 indeterminate 상태 |
+| `max`           | `number`                                         |          | 100       | 최대 값                              |
+| `size`          | `number`                                         |          | 48        | 원 크기 (px)                         |
+| `strokeWidth`   | `number`                                         |          | 4         | 선 두께                              |
+| `variant`       | `"default" \| "success" \| "warning" \| "error"` |          | "default" | 색상 변형                            |
+| `showLabel`     | `boolean`                                        |          | false     | 중앙에 퍼센트 표시                   |
+| `label`         | `string`                                         |          |           | 접근성 레이블                        |
+| `indeterminate` | `boolean`                                        |          | false     | 값을 알 수 없는 진행 상태            |
+
+#### Meter
+
+**Import:** `import { Meter } from "@reopt-ai/opt-ui"`
+
+| Prop        | Type                                             | Required | Default   | Description   |
+| ----------- | ------------------------------------------------ | -------- | --------- | ------------- |
+| `value`     | `number`                                         | Yes      |           | 현재 값       |
+| `min`       | `number`                                         |          | 0         | 최소 값       |
+| `max`       | `number`                                         |          | 100       | 최대 값       |
+| `size`      | `"sm" \| "md" \| "lg"`                           |          | "md"      | 게이지 높이   |
+| `variant`   | `"default" \| "success" \| "warning" \| "error"` |          | "default" | 색상 변형     |
+| `showValue` | `boolean`                                        |          | false     | 퍼센트 표시   |
+| `label`     | `string`                                         |          |           | 레이블 텍스트 |
+
+#### Breadcrumb
+
+**Import:** `import { Breadcrumb } from "@reopt-ai/opt-ui"`
+
+| Prop         | Type                             | Required | Default | Description                                 |
+| ------------ | -------------------------------- | -------- | ------- | ------------------------------------------- |
+| `items`      | `BreadcrumbItem[]`               | Yes      |         | 경로 항목 배열. { id, label, href?, icon? } |
+| `separator`  | `ReactNode`                      |          | "/"     | 항목 간 구분자                              |
+| `onNavigate` | `(item: BreadcrumbItem) => void` |          |         | 항목 클릭 핸들러                            |
+
+#### EmptyState
+
+**Import:** `import { EmptyState } from "@reopt-ai/opt-ui"`
+
+| Prop          | Type                 | Required | Default | Description                                  |
+| ------------- | -------------------- | -------- | ------- | -------------------------------------------- |
+| `title`       | `string`             | Yes      |         | 빈 상태 제목                                 |
+| `description` | `string`             |          |         | 빈 상태 설명                                 |
+| `icon`        | `ReactNode`          |          |         | 표시할 아이콘                                |
+| `actions`     | `EmptyStateAction[]` |          |         | 액션 버튼 배열. { label, onClick, variant? } |
+
+#### Card
+
+**Import:** `import { Card } from "@reopt-ai/opt-ui"`
+
+**Card:**
+
+| Prop               | Type                                | Required | Default   | Description                    |
+| ------------------ | ----------------------------------- | -------- | --------- | ------------------------------ |
+| `variant`          | `"default" \| "outline" \| "ghost"` |          | "default" | 카드 스타일 변형               |
+| `padding`          | `"none" \| "sm" \| "md" \| "lg"`    |          | "md"      | 내부 패딩 크기                 |
+| `selectable`       | `boolean`                           |          | false     | 선택 가능 모드 활성화          |
+| `selected`         | `boolean`                           |          |           | 선택 상태 (selectable=true 시) |
+| `onSelectedChange` | `(selected: boolean) => void`       |          |           | 선택 상태 변경 콜백            |
+
+**CardHeader:**
+
+| Prop | Type | Required | Default | Description |
+| ---- | ---- | -------- | ------- | ----------- |
+
+**CardTitle:**
+
+| Prop | Type | Required | Default | Description |
+| ---- | ---- | -------- | ------- | ----------- |
+
+**CardDescription:**
+
+| Prop | Type | Required | Default | Description |
+| ---- | ---- | -------- | ------- | ----------- |
+
+**CardContent:**
+
+| Prop | Type | Required | Default | Description |
+| ---- | ---- | -------- | ------- | ----------- |
+
+**CardFooter:**
+
+| Prop | Type | Required | Default | Description |
+| ---- | ---- | -------- | ------- | ----------- |
+
+**Examples:**
+
+_카드 레이아웃:_
+
+```tsx
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from "@reopt-ai/opt-ui";
+
+<Card>
+  <CardHeader>
+    <CardTitle>프로젝트 요약</CardTitle>
+    <CardDescription>최근 7일간 활동 현황</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p>활성 사용자: 1,234명</p>
+  </CardContent>
+</Card>;
+```
+
+#### Checkbox
+
+**Import:** `import { Checkbox } from "@reopt-ai/opt-ui"`
+
+**Checkbox:**
+
+| Prop             | Type                         | Required | Default | Description                        |
+| ---------------- | ---------------------------- | -------- | ------- | ---------------------------------- |
+| `label`          | `string`                     |          |         | 체크박스 레이블                    |
+| `description`    | `string`                     |          |         | 레이블 아래 설명 텍스트            |
+| `checked`        | `boolean`                    |          |         | 제어 모드: 체크 상태               |
+| `defaultChecked` | `boolean`                    |          |         | 비제어 모드: 초기 체크 상태        |
+| `onChange`       | `(checked: boolean) => void` |          |         | 상태 변경 핸들러                   |
+| `size`           | `"sm" \| "md" \| "lg"`       |          | "md"    | 체크박스 크기                      |
+| `value`          | `string`                     |          |         | CheckboxGroup 내에서 사용할 값     |
+| `indeterminate`  | `boolean`                    |          | false   | 불확정 상태 표시 (마이너스 아이콘) |
+
+**CheckboxGroup:**
+
+| Prop           | Type                         | Required | Default    | Description                    |
+| -------------- | ---------------------------- | -------- | ---------- | ------------------------------ |
+| `value`        | `string[]`                   |          |            | 제어 모드: 선택된 값 배열      |
+| `defaultValue` | `string[]`                   |          | []         | 비제어 모드: 초기 선택 값 배열 |
+| `onChange`     | `(value: string[]) => void`  |          |            | 선택 변경 핸들러               |
+| `orientation`  | `"horizontal" \| "vertical"` |          | "vertical" | 레이아웃 방향                  |
+| `label`        | `string`                     |          |            | 그룹 레이블                    |
+
+#### RadioGroup
+
+**Import:** `import { RadioGroup } from "@reopt-ai/opt-ui"`
+
+**RadioGroup:**
+
+| Prop           | Type                         | Required | Default    | Description               |
+| -------------- | ---------------------------- | -------- | ---------- | ------------------------- |
+| `value`        | `string`                     |          |            | 제어 모드: 선택된 값      |
+| `defaultValue` | `string`                     |          | ""         | 비제어 모드: 초기 선택 값 |
+| `onChange`     | `(value: string) => void`    |          |            | 선택 변경 핸들러          |
+| `orientation`  | `"horizontal" \| "vertical"` |          | "vertical" | 레이아웃 방향             |
+| `label`        | `string`                     |          |            | 그룹 레이블               |
+| `name`         | `string`                     |          |            | 폼 제출 시 사용할 이름    |
+
+**Radio:**
+
+| Prop          | Type                   | Required | Default | Description                                                |
+| ------------- | ---------------------- | -------- | ------- | ---------------------------------------------------------- |
+| `value`       | `string`               |          |         | 라디오 값 (RadioGroup 안에서는 부모가 관리하므로 optional) |
+| `label`       | `string`               |          |         | 라디오 레이블                                              |
+| `description` | `string`               |          |         | 레이블 아래 설명 텍스트                                    |
+| `size`        | `"sm" \| "md" \| "lg"` |          | "md"    | 라디오 크기                                                |
+
+#### DateRangePicker
+
+**Import:** `import { DateRangePicker } from "@reopt-ai/opt-ui"`
+
+| Prop                  | Type                                                  | Required | Default             | Description                                            |
+| --------------------- | ----------------------------------------------------- | -------- | ------------------- | ------------------------------------------------------ |
+| `value`               | `DateRange`                                           |          |                     | 제어 모드: { start: Date \| null, end: Date \| null }  |
+| `onChange`            | `(range: DateRange) => void`                          |          |                     | 범위 변경 핸들러                                       |
+| `presets`             | `DateRangePreset[]`                                   |          |                     | 빠른 선택 프리셋 배열 (기본: Today, Last 7/30/90 days) |
+| `placeholder`         | `string`                                              |          | "Select date range" | 미선택 시 표시 텍스트                                  |
+| `label`               | `string`                                              |          |                     | 입력 필드 레이블                                       |
+| `disabled`            | `boolean`                                             |          | false               | 비활성화 상태                                          |
+| `format`              | `(date: Date) => string`                              |          |                     | 날짜 포맷 함수                                         |
+| `comparison`          | `boolean`                                             |          | false               | 비교 모드 활성화                                       |
+| `comparisonMode`      | `"previous" \| "year-over-year"`                      |          | "previous"          | 비교 기준 (이전 기간 / 전년 동기)                      |
+| `onComparisonChange`  | `(comparison: boolean, mode: ComparisonMode) => void` |          |                     | 비교 모드 변경 콜백                                    |
+| `showGranularity`     | `boolean`                                             |          | false               | 시간 단위 선택기 표시                                  |
+| `granularity`         | `"hour" \| "day" \| "week" \| "month"`                |          | "day"               | 시간 단위                                              |
+| `onGranularityChange` | `(granularity: DateGranularity) => void`              |          |                     | 시간 단위 변경 콜백                                    |
+
+#### TagInput
+
+**Import:** `import { TagInput } from "@reopt-ai/opt-ui"`
+
+| Prop              | Type                       | Required | Default          | Description                               |
+| ----------------- | -------------------------- | -------- | ---------------- | ----------------------------------------- |
+| `value`           | `string[]`                 |          |                  | 제어 모드: 현재 태그 배열                 |
+| `onChange`        | `(tags: string[]) => void` |          |                  | 태그 변경 핸들러                          |
+| `placeholder`     | `string`                   |          | "Add tag..."     | 입력 플레이스홀더                         |
+| `label`           | `string`                   |          |                  | 입력 필드 레이블                          |
+| `maxTags`         | `number`                   |          |                  | 최대 태그 수                              |
+| `disabled`        | `boolean`                  |          | false            | 비활성화 상태                             |
+| `suggestions`     | `string[]`                 |          |                  | 자동완성 드롭다운에 표시할 추천 태그 목록 |
+| `delimiters`      | `(string \| RegExp)[]`     |          | [",", ";", "\n"] | 붙여넣기 시 태그를 분할할 구분자 목록     |
+| `allowDuplicates` | `boolean`                  |          | false            | 중복 태그 허용 여부                       |
+
+#### ColorPicker
+
+**Import:** `import { ColorPicker } from "@reopt-ai/opt-ui"`
+
+| Prop       | Type                      | Required | Default | Description                            |
+| ---------- | ------------------------- | -------- | ------- | -------------------------------------- |
+| `value`    | `string`                  |          |         | 제어 모드: hex 색상 값 (예: '#3b82f6') |
+| `onChange` | `(color: string) => void` |          |         | 색상 변경 핸들러                       |
+| `presets`  | `string[]`                |          |         | 프리셋 색상 배열 (기본 16색)           |
+| `label`    | `string`                  |          |         | 입력 필드 레이블                       |
+| `disabled` | `boolean`                 |          | false   | 비활성화 상태                          |
+
+#### IconPicker
+
+**Import:** `import { IconPicker } from "@reopt-ai/opt-ui"`
+
+| Prop       | Type                       | Required | Default | Description                                |
+| ---------- | -------------------------- | -------- | ------- | ------------------------------------------ |
+| `value`    | `string`                   |          |         | 제어 모드: 선택된 아이콘 ID                |
+| `onChange` | `(iconId: string) => void` |          |         | 아이콘 변경 핸들러                         |
+| `icons`    | `IconDef[]`                |          |         | 아이콘 목록 (기본 24개 Lucide 아이콘 제공) |
+| `label`    | `string`                   |          |         | 입력 필드 레이블                           |
+| `disabled` | `boolean`                  |          | false   | 비활성화 상태                              |
+
+#### StepBuilder
+
+**Import:** `import { StepBuilder } from "@reopt-ai/opt-ui"`
+
+| Prop       | Type                         | Required | Default | Description                             |
+| ---------- | ---------------------------- | -------- | ------- | --------------------------------------- |
+| `steps`    | `StepDef[]`                  | Yes      |         | 단계 배열 ({ id, label, description? }) |
+| `onChange` | `(steps: StepDef[]) => void` | Yes      |         | 단계 변경 핸들러                        |
+| `label`    | `string`                     |          |         | 빌더 레이블                             |
+| `maxSteps` | `number`                     |          |         | 최대 단계 수                            |
+
+#### ConditionBuilder
+
+**Import:** `import { ConditionBuilder } from "@reopt-ai/opt-ui"`
+
+| Prop                  | Type                                    | Required | Default            | Description                            |
+| --------------------- | --------------------------------------- | -------- | ------------------ | -------------------------------------- |
+| `groups`              | `ConditionGroup[]`                      | Yes      |                    | 조건 그룹 배열                         |
+| `onChange`            | `(groups: ConditionGroup[]) => void`    | Yes      |                    | 그룹 변경 핸들러                       |
+| `properties`          | `string[]`                              |          |                    | 선택 가능한 속성 목록 (기본 10개 제공) |
+| `label`               | `string`                                |          |                    | 빌더 레이블                            |
+| `nested`              | `boolean`                               |          | false              | 중첩 AND/OR 그룹 활성화                |
+| `maxDepth`            | `number`                                |          | 3                  | 최대 중첩 깊이                         |
+| `conditionTypes`      | `Record<string, ConditionTypeRenderer>` |          |                    | 이질적 조건 타입 렌더러 레지스트리     |
+| `onPreview`           | `(groups: ConditionGroup[]) => void`    |          |                    | 조건 변경 시 미리보기 콜백             |
+| `previewCount`        | `number`                                |          |                    | 매치 카운트 표시 (toLocaleString 포맷) |
+| `addNestedGroupLabel` | `string`                                |          | "Add nested group" | 중첩 그룹 추가 버튼 텍스트             |
+
+#### Popover
+
+**Import:** `import { PopoverRoot } from "@reopt-ai/opt-ui"`
+
+| Prop        | Type     | Required | Default | Description          |
+| ----------- | -------- | -------- | ------- | -------------------- |
+| `gutter`    | `number` |          | 8       | 트리거와의 간격 (px) |
+| `className` | `string` |          |         | 커스텀 CSS 클래스    |
+
+#### DropdownMenu
+
+**Import:** `import { DropdownMenu } from "@reopt-ai/opt-ui"`
+
+**DropdownContent:**
+
+| Prop     | Type     | Required | Default | Description          |
+| -------- | -------- | -------- | ------- | -------------------- |
+| `gutter` | `number` |          | 4       | 트리거와의 간격 (px) |
+
+**DropdownItem:**
+
+| Prop       | Type                         | Required | Default   | Description                                         |
+| ---------- | ---------------------------- | -------- | --------- | --------------------------------------------------- |
+| `variant`  | `"default" \| "destructive"` |          | "default" | 메뉴 아이템 시각 변형. destructive는 위험 작업 강조 |
+| `onClick`  | `() => void`                 |          |           | 항목 클릭 핸들러                                    |
+| `disabled` | `boolean`                    |          |           | 비활성 상태                                         |
+
+#### NumberInput
+
+**Import:** `import { NumberInput } from "@reopt-ai/opt-ui"`
+
+| Prop             | Type                              | Required | Default | Description                                      |
+| ---------------- | --------------------------------- | -------- | ------- | ------------------------------------------------ |
+| `value`          | `number \| null`                  |          |         | 제어 모드 값. nullable=true일 때 null 허용       |
+| `defaultValue`   | `number \| null`                  |          | 0       | 비제어 모드 초기값. nullable=true일 때 null 허용 |
+| `onChange`       | `(value: number \| null) => void` |          |         | 값 변경 핸들러                                   |
+| `nullable`       | `boolean`                         |          | false   | 빈 값을 null로 커밋할지 여부                     |
+| `clearable`      | `boolean`                         |          | false   | nullable 값 지우기 버튼 표시                     |
+| `min`            | `number`                          |          |         | 최솟값                                           |
+| `max`            | `number`                          |          |         | 최댓값                                           |
+| `step`           | `number`                          |          | 1       | 증감 단위                                        |
+| `label`          | `string`                          |          |         | 라벨 텍스트                                      |
+| `unit`           | `ReactNode`                       |          |         | 입력값 단위 suffix                               |
+| `disabled`       | `boolean`                         |          |         | 비활성 상태                                      |
+| `disabledReason` | `string`                          |          |         | aria-disabled 상태에서 노출할 비활성 사유        |
+| `labels`         | `NumberInputLabels`               |          |         | 입력/증감/clear/invalid 접근성 문구              |
+
+#### Slider
+
+**Import:** `import { Slider } from "@reopt-ai/opt-ui"`
+
+| Prop           | Type                        | Required | Default | Description        |
+| -------------- | --------------------------- | -------- | ------- | ------------------ |
+| `value`        | `number`                    |          |         | 제어 모드 값       |
+| `defaultValue` | `number`                    |          | 0       | 비제어 모드 초기값 |
+| `onChange`     | `(value: number) => void`   |          |         | 값 변경 핸들러     |
+| `min`          | `number`                    |          | 0       | 최솟값             |
+| `max`          | `number`                    |          | 100     | 최댓값             |
+| `step`         | `number`                    |          | 1       | 증감 단위          |
+| `label`        | `string`                    |          |         | 레이블 텍스트      |
+| `showValue`    | `boolean`                   |          | false   | 현재 값 표시 여부  |
+| `formatValue`  | `(value: number) => string` |          |         | 값 포맷 함수       |
+| `disabled`     | `boolean`                   |          |         | 비활성화           |
+| `className`    | `string`                    |          |         | 최외곽 CSS 클래스  |
+
+#### PageHeader
+
+**Import:** `import { PageHeader } from "@reopt-ai/opt-ui"`
+
+| Prop          | Type        | Required | Default | Description                         |
+| ------------- | ----------- | -------- | ------- | ----------------------------------- |
+| `title`       | `string`    | Yes      |         | 페이지 제목                         |
+| `description` | `string`    |          |         | 제목 아래 설명 텍스트               |
+| `actions`     | `ReactNode` |          |         | 오른쪽에 표시할 액션 슬롯 (버튼 등) |
+| `className`   | `string`    |          |         | 커스텀 CSS 클래스                   |
+
+#### ScrollArea
+
+**Import:** `import { ScrollArea } from "@reopt-ai/opt-ui"`
+
+| Prop          | Type                                   | Required | Default    | Description       |
+| ------------- | -------------------------------------- | -------- | ---------- | ----------------- |
+| `children`    | `ReactNode`                            | Yes      |            | 스크롤할 콘텐츠   |
+| `orientation` | `"vertical" \| "horizontal" \| "both"` |          | "vertical" | 스크롤 방향       |
+| `className`   | `string`                               |          |            | 커스텀 CSS 클래스 |
+
+#### Container
+
+**Import:** `import { Container } from "@reopt-ai/opt-ui"`
+
+| Prop        | Type                                              | Required | Default | Description              |
+| ----------- | ------------------------------------------------- | -------- | ------- | ------------------------ |
+| `children`  | `ReactNode`                                       | Yes      |         | 래핑할 콘텐츠            |
+| `maxWidth`  | `"sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "full"` |          | "xl"    | 최대 너비 크기           |
+| `center`    | `boolean`                                         |          | true    | 중앙 정렬 여부 (mx-auto) |
+| `className` | `string`                                          |          |         | 커스텀 CSS 클래스        |
+
+#### Section
+
+**Import:** `import { Section } from "@reopt-ai/opt-ui"`
+
+| Prop          | Type        | Required | Default | Description           |
+| ------------- | ----------- | -------- | ------- | --------------------- |
+| `children`    | `ReactNode` | Yes      |         | 섹션 콘텐츠           |
+| `title`       | `string`    |          |         | 섹션 제목 (h3)        |
+| `description` | `string`    |          |         | 제목 아래 설명 텍스트 |
+| `className`   | `string`    |          |         | 커스텀 CSS 클래스     |
+
+#### Resizable
+
+**Import:** `import { ResizablePanelGroup } from "@reopt-ai/opt-ui"`
+
+**ResizablePanelGroup:**
+
+| Prop         | Type                         | Required | Default | Description                              |
+| ------------ | ---------------------------- | -------- | ------- | ---------------------------------------- |
+| `direction`  | `"horizontal" \| "vertical"` | Yes      |         | 패널 분할 방향                           |
+| `children`   | `ReactNode`                  | Yes      |         | ResizablePanel + ResizableHandle 조합    |
+| `autoSaveId` | `string`                     |          |         | 로컬 스토리지에 크기 상태 저장 (고유 ID) |
+| `className`  | `string`                     |          |         | 커스텀 CSS 클래스                        |
+
+**ResizablePanel:**
+
+| Prop          | Type        | Required | Default | Description                   |
+| ------------- | ----------- | -------- | ------- | ----------------------------- |
+| `defaultSize` | `number`    |          |         | 초기 크기 (퍼센트, 0-100)     |
+| `minSize`     | `number`    |          |         | 최소 크기 (퍼센트)            |
+| `maxSize`     | `number`    |          |         | 최대 크기 (퍼센트)            |
+| `collapsible` | `boolean`   |          | false   | 최소 크기 이하 시 접히기 허용 |
+| `children`    | `ReactNode` | Yes      |         | 패널 콘텐츠                   |
+| `className`   | `string`    |          |         | 커스텀 CSS 클래스             |
+
+**ResizableHandle:**
+
+| Prop         | Type      | Required | Default | Description             |
+| ------------ | --------- | -------- | ------- | ----------------------- |
+| `withHandle` | `boolean` |          | false   | 시각적 드래그 핸들 표시 |
+| `className`  | `string`  |          |         | 커스텀 CSS 클래스       |
+
+#### BlockLayout
+
+**Import:** `import { BlockLayout } from "@reopt-ai/opt-ui"`
+
+| Prop           | Type                                          | Required | Default   | Description                                                                          |
+| -------------- | --------------------------------------------- | -------- | --------- | ------------------------------------------------------------------------------------ |
+| `children`     | `ReactNode`                                   | Yes      |           | Block 콘텐츠                                                                         |
+| `loading`      | `boolean`                                     |          |           | 로딩 상태. 설정 시 LoadingOverlay로 자동 래핑                                        |
+| `loadingLabel` | `string`                                      |          |           | LoadingOverlay 접근성 레이블                                                         |
+| `spacing`      | `"section" \| "group" \| "element" \| "none"` |          | "section" | Block 최상위 자식 사이 간격. 데이터 밀도가 높은 Block는 group/element로 낮출 수 있음 |
+| `className`    | `string`                                      |          |           | 기본 스타일 오버라이드                                                               |
+
+**Examples:**
+
+_Block 루트:_
+
+```tsx
+import { BlockLayout, PageHeader } from "@reopt-ai/opt-ui";
+
+<BlockLayout loading={isLoading} spacing="section">
+  <PageHeader title="대시보드" description="프로젝트 현황" />
+  <section>콘텐츠 영역</section>
+</BlockLayout>;
+```
+
+#### createBlock
+
+**Import:** `import { createBlock } from "@reopt-ai/opt-ui"`
+
+| Prop                      | Type                                                      | Required | Default | Description                         |
+| ------------------------- | --------------------------------------------------------- | -------- | ------- | ----------------------------------- |
+| `name`                    | `string`                                                  | Yes      |         | 컴포넌트 displayName                |
+| `render`                  | `(props: Omit<P, 'loading' \| 'className'>) => ReactNode` | Yes      |         | 콘텐츠를 반환하는 렌더 함수         |
+| `options.layoutClassName` | `string`                                                  |          |         | BlockLayout에 전달할 기본 className |
+
+**Examples:**
+
+_Block 팩토리:_
+
+```tsx
+import { createBlock, PageHeader } from "@reopt-ai/opt-ui";
+
+interface MyDashboardProps {
+  title: string;
+  count: number;
+}
+
+const MyDashboard = createBlock<MyDashboardProps>(
+  "MyDashboard",
+  ({ title, count }) => (
+    <>
+      <PageHeader title={title} />
+      <p>항목 수: {count}</p>
+    </>
+  ),
+);
+
+// loading, className은 자동 처리
+<MyDashboard title="개요" count={42} loading={false} />;
+```
+
+#### Logo
+
+**Import:** `import { Logo } from "@reopt-ai/opt-ui"`
+
+| Prop        | Type                   | Required | Default | Description                      |
+| ----------- | ---------------------- | -------- | ------- | -------------------------------- |
+| `src`       | `string`               |          |         | 로고 이미지 URL                  |
+| `icon`      | `ReactNode`            |          |         | 로고 아이콘 — src 미설정 시 표시 |
+| `text`      | `string`               |          |         | 텍스트 레이블                    |
+| `alt`       | `string`               |          | "Logo"  | 이미지 alt 텍스트                |
+| `size`      | `"sm" \| "md" \| "lg"` |          | "md"    | 크기 (sm=24px, md=32px, lg=40px) |
+| `href`      | `string`               |          |         | 링크 URL — 설정 시 <a>로 래핑    |
+| `onClick`   | `() => void`           |          |         | 클릭 핸들러                      |
+| `className` | `string`               |          |         | 커스텀 CSS 클래스                |
+
+#### Drawer
+
+**Import:** `import { DrawerRoot } from "@reopt-ai/opt-ui"`
+
+**DrawerRoot:**
+
+| Prop      | Type         | Required | Default | Description         |
+| --------- | ------------ | -------- | ------- | ------------------- |
+| `open`    | `boolean`    |          |         | 제어 모드 열림 상태 |
+| `onClose` | `() => void` |          |         | 닫힘 콜백           |
+
+**DrawerPanel:**
+
+| Prop                    | Type                             | Required | Default | Description                            |
+| ----------------------- | -------------------------------- | -------- | ------- | -------------------------------------- |
+| `side`                  | `"left" \| "right" \| "bottom"`  |          | "right" | 슬라이드 방향                          |
+| `size`                  | `"sm" \| "md" \| "lg" \| "full"` |          | "md"    | 패널 크기                              |
+| `swipeToDismiss`        | `boolean`                        |          | true    | 가장자리 방향으로 드래그해 닫기 활성화 |
+| `swipeDismissThreshold` | `number`                         |          | 80      | 닫힘 커밋에 필요한 드래그 거리(px)     |
+
+#### Pagination
+
+**Import:** `import { Pagination } from "@reopt-ai/opt-ui"`
+
+| Prop              | Type                                        | Required | Default      | Description                                 |
+| ----------------- | ------------------------------------------- | -------- | ------------ | ------------------------------------------- |
+| `totalItems`      | `number`                                    |          |              | 전체 항목 수                                |
+| `totalPages`      | `number`                                    |          |              | 전체 페이지 수. 전체 항목 수를 모를 때 사용 |
+| `hasMore`         | `boolean`                                   |          |              | cursor pagination에서 다음 페이지 존재 여부 |
+| `pageSize`        | `number`                                    |          |              | 페이지당 항목 수                            |
+| `currentPage`     | `number`                                    | Yes      |              | 현재 페이지 (1부터 시작)                    |
+| `onPageChange`    | `(page: number) => void`                    | Yes      |              | 페이지 변경 콜백                            |
+| `showPageNumbers` | `boolean`                                   |          | true         | 페이지 번호 표시 여부                       |
+| `siblingCount`    | `number`                                    |          | 1            | 현재 페이지 좌우 표시할 페이지 수           |
+| `variant`         | `"pages" \| "count" \| "compact" \| "none"` |          | "pages"      | 중앙 표시 방식                              |
+| `isDisabled`      | `boolean`                                   |          | false        | 전체 pagination 비활성화                    |
+| `label`           | `string`                                    |          | "Pagination" | navigation landmark 접근성 라벨             |
+| `labels`          | `PaginationLabels`                          |          |              | Prev/Next/page/count 접근성 및 표시 문구    |
+
+#### VirtualList
+
+**Import:** `import { VirtualList } from "@reopt-ai/opt-ui"`
+
+| Prop         | Type                                    | Required | Default | Description                       |
+| ------------ | --------------------------------------- | -------- | ------- | --------------------------------- |
+| `items`      | `T[]`                                   | Yes      |         | 렌더링할 항목 배열                |
+| `renderItem` | `(item: T, index: number) => ReactNode` | Yes      |         | 항목 렌더 함수                    |
+| `itemHeight` | `number`                                | Yes      |         | 각 항목의 고정 높이(px)           |
+| `overscan`   | `number`                                |          | 3       | 뷰포트 밖에 미리 렌더링할 항목 수 |
+
+#### LoadingOverlay
+
+**Import:** `import { LoadingOverlay } from "@reopt-ai/opt-ui"`
+**Dependencies:** spinner (core)
+
+| Prop       | Type        | Required | Default    | Description   |
+| ---------- | ----------- | -------- | ---------- | ------------- |
+| `loading`  | `boolean`   | Yes      |            | 로딩 상태     |
+| `children` | `ReactNode` | Yes      |            | 감싸는 콘텐츠 |
+| `label`    | `string`    |          | "Loading…" | 로딩 텍스트   |
+
+#### StarRating
+
+**Import:** `import { StarRating } from "@reopt-ai/opt-ui"`
+
+| Prop       | Type                      | Required | Default | Description      |
+| ---------- | ------------------------- | -------- | ------- | ---------------- |
+| `value`    | `number`                  |          |         | 현재 선택된 별점 |
+| `onChange` | `(value: number) => void` |          |         | 별점 변경 콜백   |
+| `max`      | `number`                  |          | 5       | 최대 별 개수     |
+| `readOnly` | `boolean`                 |          | false   | 읽기 전용 모드   |
+| `size`     | `"sm" \| "md" \| "lg"`    |          | "md"    | 별 아이콘 크기   |
+
+#### ErrorBoundary
+
+**Import:** `import { ErrorBoundary } from "@reopt-ai/opt-ui"`
+
+| Prop       | Type                                         | Required | Default | Description                                                                              |
+| ---------- | -------------------------------------------- | -------- | ------- | ---------------------------------------------------------------------------------------- |
+| `children` | `ReactNode`                                  | Yes      |         | 에러를 감시할 자식 컴포넌트                                                              |
+| `fallback` | `ReactNode \| ((error: Error) => ReactNode)` |          |         | 에러 발생 시 표시할 UI. 함수 전달 시 에러 객체를 인자로 받음. 미지정 시 Alert error 표시 |
+| `onError`  | `(error: Error, info: ErrorInfo) => void`    |          |         | 에러 발생 시 호출되는 콜백 (에러 리포팅용)                                               |
+
+#### Command
+
+**Import:** `import { Command } from "@reopt-ai/opt-ui"`
+
+**Command:**
+
+| Prop           | Type                                                             | Required | Default | Description                                         |
+| -------------- | ---------------------------------------------------------------- | -------- | ------- | --------------------------------------------------- |
+| `shouldFilter` | `boolean`                                                        |          |         | 자동 필터링 여부 (기본 true)                        |
+| `filter`       | `(value: string, search: string, keywords: string[]) => boolean` |          |         | 커스텀 필터 함수 (기본: case-insensitive substring) |
+
+**CommandInput:**
+
+| Prop               | Type        | Required | Default | Description                         |
+| ------------------ | ----------- | -------- | ------- | ----------------------------------- |
+| `trailing`         | `ReactNode` |          |         | 검색 입력 우측에 표시할 보조 콘텐츠 |
+| `wrapperClassName` | `string`    |          |         | 입력 wrapper className              |
+
+**CommandList:**
+
+| Prop         | Type     | Required | Default    | Description         |
+| ------------ | -------- | -------- | ---------- | ------------------- |
+| `aria-label` | `string` |          | "Commands" | listbox 접근성 라벨 |
+
+**CommandItem:**
+
+| Prop       | Type                      | Required | Default | Description                              |
+| ---------- | ------------------------- | -------- | ------- | ---------------------------------------- |
+| `value`    | `string`                  | Yes      |         | 이 항목의 검색 가능 값 (고유 식별자)     |
+| `keywords` | `string[]`                |          |         | value에 더해 검색어와 비교할 추가 키워드 |
+| `onSelect` | `(value: string) => void` |          |         | Enter/클릭 시 호출                       |
+
+#### ShaderSurface
+
+**Import:** `import { ShaderSurface } from "@reopt-ai/opt-ui"`
+
+| Prop         | Type             | Required | Default | Description                                |
+| ------------ | ---------------- | -------- | ------- | ------------------------------------------ |
+| `preset`     | `ShaderPresetId` | Yes      |         | 렌더할 셰이더 프리셋 id                    |
+| `colors`     | `string[]`       |          |         | hex 색상 배열 (미지정 시 프리셋 기본 색)   |
+| `scale`      | `number`         |          |         | 패턴 스케일                                |
+| `speed`      | `number`         |          |         | 애니메이션 속도                            |
+| `distortion` | `number`         |          |         | 왜곡 강도                                  |
+| `grain`      | `number`         |          |         | 필름 그레인 양                             |
+| `contrast`   | `number`         |          |         | 하이라이트 대비                            |
+| `angle`      | `number`         |          |         | 회전 각도(도)                              |
+| `paused`     | `boolean`        |          |         | true면 단일 프레임만 렌더 (카드 배경 등)   |
+| `dpr`        | `number`         |          |         | device pixel ratio 상한 (기본 min(dpr, 2)) |
+
+### Visual Layer
+
+### Shell Layer
+
+#### FaqAccordion
+
+**Import:** `import { FaqAccordion } from "@reopt-ai/opt-ui"`
+**Dependencies:** disclosure (core)
+
+| Prop    | Type        | Required | Default | Description                             |
+| ------- | ----------- | -------- | ------- | --------------------------------------- |
+| `items` | `FaqItem[]` | Yes      |         | FAQ 항목 배열. { id, question, answer } |
+
+#### PageAside
+
+**Import:** `import { PageAside } from "@reopt-ai/opt-ui"`
+
+| Prop             | Type        | Required | Default | Description                            |
+| ---------------- | ----------- | -------- | ------- | -------------------------------------- |
+| `header`         | `ReactNode` |          |         | 상단 고정 슬롯 (예: package switcher). |
+| `children`       | `ReactNode` | Yes      |         | 스크롤 가능한 네비게이션 영역.         |
+| `footer`         | `ReactNode` |          |         | 하단 고정 슬롯 (예: version label).    |
+| `widthClassName` | `string`    |          |         | 너비 Tailwind 클래스. 기본값 `w-60`.   |
+| `label`          | `string`    |          |         | `<aside>`의 aria-label.                |
+| `hideOnMobile`   | `boolean`   |          |         | md 아래에서 숨김. 기본값 true.         |
+
+#### ContentTabs
+
+**Import:** `import { ContentTabs } from "@reopt-ai/opt-ui"`
+**Dependencies:** tabs (core)
+
+| Prop           | Type       | Required | Default | Description                          |
+| -------------- | ---------- | -------- | ------- | ------------------------------------ |
+| `tabs`         | `TabDef[]` | Yes      |         | 탭 정의 배열. { id, label, content } |
+| `defaultTabId` | `string`   |          |         | 초기 선택 탭 ID. 미지정 시 첫 탭     |
+
+#### DashboardGrid
+
+**Import:** `import { DashboardGrid } from "@reopt-ai/opt-ui"`
+**Dependencies:** stat-card (core), composite-zone (core)
+
+| Prop      | Type         | Required | Default | Description                                           |
+| --------- | ------------ | -------- | ------- | ----------------------------------------------------- |
+| `stats`   | `StatCard[]` | Yes      |         | 통계 데이터 배열. { id, title, value, change, trend } |
+| `columns` | `number`     |          | 3       | 행당 컬럼 수                                          |
+
+#### SearchCombobox
+
+**Import:** `import { SearchCombobox } from "@reopt-ai/opt-ui"`
+**Dependencies:** combobox (core)
+
+| Prop          | Type                                   | Required | Default   | Description                      |
+| ------------- | -------------------------------------- | -------- | --------- | -------------------------------- |
+| `items`       | `string[]`                             | Yes      |           | 검색 대상 문자열 목록            |
+| `placeholder` | `string`                               |          | "검색..." | 입력 플레이스홀더                |
+| `label`       | `string`                               |          | "검색"    | 입력 레이블                      |
+| `onSelect`    | `(item: string) => void`               |          |           | 항목 선택 핸들러                 |
+| `labels`      | `SearchComboboxLabels`                 |          |           | noResults/loading 문구           |
+| `async`       | `boolean`                              |          | false     | 비동기 검색 모드 활성화          |
+| `onSearch`    | `(query: string) => Promise<string[]>` |          |           | async=true일 때 사용할 검색 콜백 |
+| `debounceMs`  | `number`                               |          | 300       | 비동기 검색 디바운스 ms          |
+
+**Examples:**
+
+_검색 + 선택:_
+
+```tsx
+import { SearchCombobox } from "@reopt-ai/opt-ui";
+
+<SearchCombobox
+  items={["React", "Vue", "Angular", "Svelte"]}
+  placeholder="프레임워크 검색..."
+  onSelect={(item) => console.log(item)}
+/>;
+```
+
+#### StatusSelect
+
+**Import:** `import { StatusSelect } from "@reopt-ai/opt-ui"`
+**Dependencies:** select (core)
+
+| Prop       | Type                      | Required | Default | Description                         |
+| ---------- | ------------------------- | -------- | ------- | ----------------------------------- |
+| `options`  | `SelectOption[]`          | Yes      |         | 옵션 목록. { value, label, color? } |
+| `value`    | `string`                  |          |         | 제어 모드: 현재 선택 값             |
+| `onChange` | `(value: string) => void` |          |         | 제어 모드: 값 변경 핸들러           |
+| `label`    | `string`                  |          | "상태"  | Select 레이블                       |
+
+#### EditorToolbar
+
+**Import:** `import { EditorToolbar } from "@reopt-ai/opt-ui"`
+**Dependencies:** toolbar (core)
+
+| Prop            | Type                   | Required | Default | Description                                |
+| --------------- | ---------------------- | -------- | ------- | ------------------------------------------ |
+| `buttons`       | `ToolbarButtonDef[]`   | Yes      |         | 버튼 정의. { id, label, icon, separator? } |
+| `onAction`      | `(id: string) => void` |          |         | 버튼 클릭 핸들러                           |
+| `activeButtons` | `string[]`             |          | []      | 활성 상태 버튼 ID 배열                     |
+
+#### SidebarNav
+
+**Import:** `import { SidebarNav } from "@reopt-ai/opt-ui"`
+
+| Prop    | Type           | Required | Default | Description                                                     |
+| ------- | -------------- | -------- | ------- | --------------------------------------------------------------- |
+| `items` | `NavItemDef[]` | Yes      |         | 네비게이션 항목. { id, label, href, separator?, sectionLabel? } |
+
+#### SettingsForm
+
+**Import:** `import { SettingsForm } from "@reopt-ai/opt-ui"`
+**Dependencies:** form (core), checkbox (core), radio-group (core), switch (core)
+
+| Prop       | Type                                        | Required | Default | Description       |
+| ---------- | ------------------------------------------- | -------- | ------- | ----------------- |
+| `fields`   | `FormFieldDef[]`                            | Yes      |         | 폼 필드 정의 배열 |
+| `onSubmit` | `(values: Record<string, unknown>) => void` |          |         | 제출 핸들러       |
+
+**Examples:**
+
+_설정 폼:_
+
+```tsx
+import { SettingsForm } from "@reopt-ai/opt-ui";
+
+const fields = [
+  { name: "username", label: "사용자명", type: "text", required: true },
+  { name: "theme", label: "테마", type: "select", options: ["light", "dark"] },
+  { name: "notifications", label: "알림", type: "switch" },
+];
+
+<SettingsForm fields={fields} onSubmit={(values) => console.log(values)} />;
+```
+
+#### AppMenubar
+
+**Import:** `import { AppMenubar } from "@reopt-ai/opt-ui"`
+**Dependencies:** menu (core), kbd (core)
+
+| Prop    | Type        | Required | Default | Description                                         |
+| ------- | ----------- | -------- | ------- | --------------------------------------------------- |
+| `menus` | `MenuDef[]` | Yes      |         | 메뉴 정의 배열. { id, label, items: MenuItemDef[] } |
+
+#### CommandPalette
+
+**Import:** `import { CommandPalette } from "@reopt-ai/opt-ui"`
+**Dependencies:** dialog (core), combobox (core), kbd (core)
+
+| Prop            | Type                                         | Required | Default | Description                                           |
+| --------------- | -------------------------------------------- | -------- | ------- | ----------------------------------------------------- |
+| `commands`      | `Omit<Command, "action">[]`                  | Yes      |         | 커맨드 목록. { id, label, group, shortcut? }          |
+| `open`          | `boolean`                                    | Yes      |         | 열림 상태                                             |
+| `onOpenChange`  | `(open: boolean) => void`                    | Yes      |         | 상태 변경 핸들러                                      |
+| `onSelect`      | `(command: Omit<Command, 'action'>) => void` |          |         | 커맨드 선택 핸들러                                    |
+| `inline`        | `boolean`                                    |          | false   | true일 때 풀스크린 Dialog 대신 인라인 팝업으로 렌더링 |
+| `labels`        | `CommandPaletteLabels`                       |          |         | title/description/input/list/empty/escape 문구        |
+| `footer`        | `ReactNode`                                  |          |         | 명령 목록 아래에 표시할 footer slot                   |
+| `empty`         | `ReactNode`                                  |          |         | 결과가 없을 때 표시할 empty slot                      |
+| `inputTrailing` | `ReactNode`                                  |          |         | 검색 입력 우측 보조 콘텐츠                            |
+
+#### CommandPaletteTrigger
+
+**Import:** `import { CommandPaletteTrigger } from "@reopt-ai/opt-ui"`
+**Dependencies:** command-palette (shells)
+
+| Prop       | Type                                         | Required | Default | Description                                        |
+| ---------- | -------------------------------------------- | -------- | ------- | -------------------------------------------------- |
+| `commands` | `Omit<Command, "action">[]`                  | Yes      |         | 커맨드 목록                                        |
+| `onSelect` | `(command: Omit<Command, 'action'>) => void` |          |         | 커맨드 선택 핸들러                                 |
+| `labels`   | `CommandPaletteTriggerLabels`                |          |         | 내부 CommandPalette에 전달할 title/input/list 문구 |
+
+#### DeploymentTimeline
+
+**Import:** `import { DeploymentTimeline } from "@reopt-ai/opt-ui"`
+
+| Prop    | Type               | Required | Default         | Description                                              |
+| ------- | ------------------ | -------- | --------------- | -------------------------------------------------------- |
+| `steps` | `DeploymentStep[]` | Yes      |                 | 배포 단계 배열. { id, name, status, duration?, detail? } |
+| `title` | `string`           |          | "배포 타임라인" | 타임라인 제목                                            |
+
+#### ProjectSwitcher
+
+**Import:** `import { ProjectSwitcher } from "@reopt-ai/opt-ui"`
+**Dependencies:** combobox (core)
+
+| Prop          | Type                   | Required | Default            | Description                                             |
+| ------------- | ---------------------- | -------- | ------------------ | ------------------------------------------------------- |
+| `projects`    | `ProjectDef[]`         | Yes      |                    | 프로젝트 목록. { id, name, framework, status, domain? } |
+| `value`       | `string`               |          |                    | 제어 모드: 현재 선택된 프로젝트 ID                      |
+| `onChange`    | `(id: string) => void` |          |                    | 프로젝트 선택 핸들러                                    |
+| `placeholder` | `string`               |          | "프로젝트 검색..." | 검색 입력 플레이스홀더                                  |
+
+#### EnvPanel
+
+**Import:** `import { EnvPanel } from "@reopt-ai/opt-ui"`
+**Dependencies:** disclosure (core)
+
+| Prop     | Type            | Required | Default | Description                                |
+| -------- | --------------- | -------- | ------- | ------------------------------------------ |
+| `groups` | `EnvGroupDef[]` | Yes      |         | 환경 그룹 배열. { env, vars: EnvVarDef[] } |
+
+#### BranchSelect
+
+**Import:** `import { BranchSelect } from "@reopt-ai/opt-ui"`
+**Dependencies:** select (core)
+
+| Prop       | Type                     | Required | Default  | Description                                             |
+| ---------- | ------------------------ | -------- | -------- | ------------------------------------------------------- |
+| `branches` | `BranchDef[]`            | Yes      |          | 브랜치 목록. { name, isDefault?, lastCommit?, author? } |
+| `value`    | `string`                 |          |          | 제어 모드: 현재 선택된 브랜치 이름                      |
+| `onChange` | `(name: string) => void` |          |          | 브랜치 선택 핸들러                                      |
+| `label`    | `string`                 |          | "브랜치" | Select 레이블                                           |
+
+#### DomainTable
+
+**Import:** `import { DomainTable } from "@reopt-ai/opt-ui"`
+
+| Prop      | Type          | Required | Default  | Description                                               |
+| --------- | ------------- | -------- | -------- | --------------------------------------------------------- |
+| `domains` | `DomainDef[]` | Yes      |          | 도메인 목록. { domain, status, ssl, redirect?, addedAt? } |
+| `title`   | `string`      |          | "도메인" | 테이블 제목                                               |
+
+#### DataTable
+
+**Import:** `import { DataTable } from "@reopt-ai/opt-ui"`
+**Dependencies:** composite-zone (core), button (core), checkbox (core)
+
+**DataTable:**
+
+| Prop           | Type                 | Required | Default             | Description                                         |
+| -------------- | -------------------- | -------- | ------------------- | --------------------------------------------------- |
+| `data`         | `T[]`                | Yes      |                     | 테이블 데이터 배열                                  |
+| `columns`      | `ColumnDef<T>[]`     | Yes      |                     | 컬럼 정의. { id, header, accessor, width?, align? } |
+| `keyExtractor` | `(row: T) => string` | Yes      |                     | 각 행의 고유 키 추출 함수                           |
+| `title`        | `string`             |          | "데이터 테이블"     | 테이블 제목                                         |
+| `onRowClick`   | `(row: T) => void`   |          |                     | 행 클릭 핸들러                                      |
+| `emptyMessage` | `string`             |          | "데이터가 없습니다" | 데이터 없을 때 표시할 메시지                        |
+
+**ColumnDef:**
+
+| Prop       | Type                 | Required | Default     | Description                                                  |
+| ---------- | -------------------- | -------- | ----------- | ------------------------------------------------------------ |
+| `bar`      | `(row: T) => number` |          |             | 인라인 프로그레스 바 비율(0-1) 계산 함수. 범위 밖/NaN은 보정 |
+| `barColor` | `string`             |          | "bg-accent" | 인라인 바 색상 클래스                                        |
+
+**Examples:**
+
+_기본 테이블:_
+
+```tsx
+import { DataTable } from "@reopt-ai/opt-ui";
+
+const columns = [
+  { id: "name", header: "이름", accessor: (r) => r.name },
+  { id: "email", header: "이메일", accessor: (r) => r.email },
+];
+const data = [
+  { name: "홍길동", email: "hong@example.com" },
+  { name: "김철수", email: "kim@example.com" },
+];
+
+<DataTable columns={columns} data={data} keyExtractor={(r) => r.email} />;
+```
+
+_선택 + 정렬:_
+
+```tsx
+import { DataTable } from "@reopt-ai/opt-ui";
+
+<DataTable
+  columns={columns}
+  data={data}
+  keyExtractor={(r) => r.id}
+  selectable
+  selectedKeys={selected}
+  onSelectionChange={setSelected}
+  sortable
+  onSort={(colId, dir) => console.log(colId, dir)}
+/>;
+```
+
+#### NotificationToast
+
+**Import:** `import { ToastProvider } from "@reopt-ai/opt-ui"`
+**Dependencies:** alert (core)
+
+**ToastProvider:**
+
+| Prop              | Type                                                           | Required | Default     | Description         |
+| ----------------- | -------------------------------------------------------------- | -------- | ----------- | ------------------- |
+| `children`        | `ReactNode`                                                    | Yes      |             | 앱 컨텐츠           |
+| `position`        | `"top-right" \| "top-left" \| "bottom-right" \| "bottom-left"` |          | "top-right" | 토스트 표시 위치    |
+| `defaultDuration` | `number`                                                       |          | 5000        | 기본 표시 시간 (ms) |
+
+**useToast:**
+
+| Prop      | Type                                | Required | Default | Description              |
+| --------- | ----------------------------------- | -------- | ------- | ------------------------ |
+| `returns` | `{ toasts, addToast, removeToast }` |          |         | 토스트 상태 및 제어 함수 |
+
+**toast:**
+
+| Prop                                     | Type                                    | Required | Default | Description                                                                          |
+| ---------------------------------------- | --------------------------------------- | -------- | ------- | ------------------------------------------------------------------------------------ |
+| `toast.success / error / info / warning` | `(message: string, options?) => string` |          |         | 훅 없이 어디서든 호출하는 프로그램매틱 API. toast.dismiss(id) / toast.clear()도 제공 |
+
+**NotificationToast:**
+
+| Prop        | Type           | Required | Default | Description        |
+| ----------- | -------------- | -------- | ------- | ------------------ |
+| `toast`     | `ToastMessage` | Yes      |         | 토스트 메시지 객체 |
+| `onDismiss` | `() => void`   | Yes      |         | 닫기 핸들러        |
+
+#### DesignGuidePanel
+
+**Import:** `import { DesignGuidePanel } from "@reopt-ai/opt-ui"`
+
+| Prop        | Type     | Required | Default | Description     |
+| ----------- | -------- | -------- | ------- | --------------- |
+| `className` | `string` |          |         | 추가 CSS 클래스 |
+
+#### TaskList
+
+**Import:** `import { TaskList } from "@reopt-ai/opt-ui"`
+**Dependencies:** avatar (core), checkbox (core)
+
+| Prop                 | Type                                          | Required | Default     | Description                                                |
+| -------------------- | --------------------------------------------- | -------- | ----------- | ---------------------------------------------------------- |
+| `tasks`              | `TaskDef[]`                                   | Yes      |             | 작업 배열. { id, title, status, priority, assignee?, ... } |
+| `title`              | `string`                                      |          | "작업 목록" | 섹션 제목                                                  |
+| `onTaskClick`        | `(task: TaskDef) => void`                     |          |             | 작업 클릭 핸들러                                           |
+| `onTaskStatusChange` | `(task: TaskDef, completed: boolean) => void` |          |             | 완료 상태 변경 핸들러                                      |
+| `showSubtasks`       | `boolean`                                     |          | false       | 하위 작업 표시 여부                                        |
+
+#### ActivityFeed
+
+**Import:** `import { ActivityFeed } from "@reopt-ai/opt-ui"`
+**Dependencies:** avatar (core)
+
+| Prop              | Type                                   | Required | Default     | Description                                           |
+| ----------------- | -------------------------------------- | -------- | ----------- | ----------------------------------------------------- |
+| `activities`      | `ActivityDef[]`                        | Yes      |             | 활동 배열. { id, type, title, actor, timestamp, ... } |
+| `title`           | `string`                               |          | "활동 피드" | 섹션 제목                                             |
+| `maxItems`        | `number`                               |          |             | 최대 표시 개수                                        |
+| `onActivityClick` | `(activity: ActivityDef) => void`      |          |             | 활동 클릭 핸들러                                      |
+| `layout`          | `"list" \| "compact"`                  |          | "list"      | 시간 표시 레이아웃 모드                               |
+| `renderActions`   | `(activity: ActivityDef) => ReactNode` |          |             | 각 활동 항목 우측 액션 슬롯 렌더 함수                 |
+
+#### FilterBar
+
+**Import:** `import { FilterBar } from "@reopt-ai/opt-ui"`
+**Dependencies:** select (core), input (core), button (core), switch (core), checkbox (core), date-range-picker (core)
+
+| Prop             | Type                                                    | Required | Default | Description                                           |
+| ---------------- | ------------------------------------------------------- | -------- | ------- | ----------------------------------------------------- |
+| `filters`        | `FilterGroupDef[]`                                      | Yes      |         | 필터 그룹 배열. { id, label, type, options?, value? } |
+| `onFilterChange` | `(filterId: string, value: string \| string[]) => void` |          |         | 필터 변경 핸들러                                      |
+| `onClearAll`     | `() => void`                                            |          |         | 모든 필터 초기화 핸들러                               |
+
+**Examples:**
+
+_필터 바:_
+
+```tsx
+import { FilterBar } from "@reopt-ai/opt-ui";
+
+const filters = [
+  { id: "status", label: "상태", type: "select", options: ["활성", "비활성"] },
+  { id: "search", label: "검색", type: "search" },
+];
+
+<FilterBar
+  filters={filters}
+  onFilterChange={(id, value) => console.log(id, value)}
+  onClearAll={() => console.log("clear")}
+/>;
+```
+
+#### QuickActions
+
+**Import:** `import { QuickActions } from "@reopt-ai/opt-ui"`
+**Dependencies:** kbd (core)
+
+| Prop      | Type               | Required | Default     | Description                                                       |
+| --------- | ------------------ | -------- | ----------- | ----------------------------------------------------------------- |
+| `actions` | `QuickActionDef[]` | Yes      |             | 작업 배열. { id, label, description?, icon?, shortcut?, onClick } |
+| `title`   | `string`           |          | "빠른 작업" | 섹션 제목                                                         |
+| `layout`  | `"grid" \| "list"` |          | "grid"      | 레이아웃 모드                                                     |
+| `columns` | `2 \| 3 \| 4`      |          | 3           | 그리드 컬럼 수                                                    |
+
+#### TeamMemberList
+
+**Import:** `import { TeamMemberList } from "@reopt-ai/opt-ui"`
+**Dependencies:** avatar (core)
+
+| Prop            | Type                                    | Required | Default | Description                                             |
+| --------------- | --------------------------------------- | -------- | ------- | ------------------------------------------------------- |
+| `members`       | `TeamMemberDef[]`                       | Yes      |         | 팀원 배열. { id, name, email, avatar?, role?, status? } |
+| `title`         | `string`                                |          | "팀원"  | 섹션 제목                                               |
+| `layout`        | `"list" \| "compact" \| "avatars-only"` |          | "list"  | 레이아웃 모드                                           |
+| `maxDisplay`    | `number`                                |          |         | 최대 표시 인원                                          |
+| `onMemberClick` | `(member: TeamMemberDef) => void`       |          |         | 팀원 클릭 핸들러                                        |
+
+#### AuthForm
+
+**Import:** `import { AuthForm } from "@reopt-ai/opt-ui"`
+**Dependencies:** form (core)
+
+| Prop                | Type                                                                         | Required | Default | Description                                  |
+| ------------------- | ---------------------------------------------------------------------------- | -------- | ------- | -------------------------------------------- |
+| `defaultMode`       | `"login" \| "signup"`                                                        |          | "login" | 초기 모드 (비제어)                           |
+| `mode`              | `"login" \| "signup"`                                                        |          |         | 제어 모드: 현재 모드                         |
+| `onModeChange`      | `(mode: "login" \| "signup") => void`                                        |          |         | 모드 변경 핸들러                             |
+| `showRememberMe`    | `boolean`                                                                    |          | true    | 로그인 모드에서 '로그인 상태 유지' 표시 여부 |
+| `minPasswordLength` | `number`                                                                     |          | 8       | 비밀번호 최소 길이                           |
+| `onSubmit`          | `(values: { email, password, confirmPassword?, rememberMe?, mode }) => void` |          |         | 제출 핸들러                                  |
+| `labels`            | `AuthFormLabels`                                                             |          |         | i18n용 라벨 오버라이드                       |
+
+#### WizardForm
+
+**Import:** `import { WizardForm } from "@reopt-ai/opt-ui"`
+**Dependencies:** form (core), checkbox (core), radio-group (core)
+
+| Prop           | Type                                        | Required | Default | Description                                |
+| -------------- | ------------------------------------------- | -------- | ------- | ------------------------------------------ |
+| `fields`       | `FormFieldDef[]`                            | Yes      |         | 폼 필드 정의 배열                          |
+| `steps`        | `WizardStepDef[]`                           | Yes      |         | 단계 정의. { id, label, fields: string[] } |
+| `showReview`   | `boolean`                                   |          | true    | 마지막 리뷰 단계 표시 여부                 |
+| `onSubmit`     | `(values: Record<string, unknown>) => void` |          |         | 제출 핸들러                                |
+| `onStepChange` | `(stepIndex: number) => void`               |          |         | 단계 변경 핸들러                           |
+| `labels`       | `WizardFormLabels`                          |          |         | i18n용 라벨 오버라이드                     |
+
+#### DynamicFieldForm
+
+**Import:** `import { DynamicFieldForm } from "@reopt-ai/opt-ui"`
+**Dependencies:** form (core)
+
+| Prop            | Type                                                    | Required | Default | Description            |
+| --------------- | ------------------------------------------------------- | -------- | ------- | ---------------------- |
+| `initialCount`  | `number`                                                |          | 1       | 초기 필드 수           |
+| `minFields`     | `number`                                                |          | 1       | 최소 필드 수           |
+| `maxFields`     | `number`                                                |          |         | 최대 필드 수           |
+| `fieldType`     | `"text" \| "email" \| "url" \| "number"`                |          | "text"  | 필드 입력 타입         |
+| `validateField` | `(value: string, index: number) => string \| undefined` |          |         | 커스텀 필드 검증 함수  |
+| `onSubmit`      | `(values: string[]) => void`                            |          |         | 제출 핸들러            |
+| `labels`        | `DynamicFieldFormLabels`                                |          |         | i18n용 라벨 오버라이드 |
+
+#### FileUploadForm
+
+**Import:** `import { FileUploadForm } from "@reopt-ai/opt-ui"`
+**Dependencies:** form (core)
+
+| Prop              | Type                                             | Required | Default                    | Description                               |
+| ----------------- | ------------------------------------------------ | -------- | -------------------------- | ----------------------------------------- |
+| `accept`          | `string`                                         |          | "image/\*,.pdf,.doc,.docx" | 허용 파일 타입                            |
+| `showPreview`     | `boolean`                                        |          | true                       | 이미지 미리보기 표시                      |
+| `showFileInfo`    | `boolean`                                        |          | true                       | 파일 정보 표시                            |
+| `showDescription` | `boolean`                                        |          | true                       | 설명 텍스트영역 표시                      |
+| `maxFileSize`     | `number`                                         |          |                            | 최대 파일 크기 (bytes)                    |
+| `onSubmit`        | `(values: { title, description, file }) => void` |          |                            | 제출 핸들러                               |
+| `labels`          | `FileUploadFormLabels`                           |          |                            | i18n용 라벨 오버라이드                    |
+| `onPreview`       | `(file: File) => void`                           |          |                            | 파일 선택 후 프리뷰 콜백                  |
+| `columnMapping`   | `ReactNode`                                      |          |                            | CSV 컬럼 매핑 UI 슬롯 (파일 선택 후 표시) |
+
+#### EventIcon
+
+**Import:** `import { EventIcon } from "@reopt-ai/opt-ui"`
+
+| Prop    | Type                        | Required | Default      | Description                                                                                             |
+| ------- | --------------------------- | -------- | ------------ | ------------------------------------------------------------------------------------------------------- |
+| `icon`  | `string \| React.ReactNode` | Yes      |              | semantic icon key, legacy key, 또는 React 노드 (Lucide 등)                                              |
+| `color` | `string`                    |          | theme accent | 사용자 지정 아이콘 색상. 없으면 theme accent 토큰을 사용하고, 전달하면 전경색과 tint 배경에 적용됩니다. |
+| `size`  | `"sm" \| "md" \| "lg"`      |          | "md"         | 아이콘 크기 (sm=20px, md=28px, lg=36px)                                                                 |
+
+#### TemplatePicker
+
+**Import:** `import { TemplatePicker } from "@reopt-ai/opt-ui"`
+
+| Prop         | Type                           | Required | Default | Description                                                                 |
+| ------------ | ------------------------------ | -------- | ------- | --------------------------------------------------------------------------- |
+| `templates`  | `TemplateDef[]`                | Yes      |         | 템플릿 배열. { id, name, description?, icon?, category?, featured?, tags? } |
+| `selected`   | `string`                       |          |         | 현재 선택된 템플릿 ID                                                       |
+| `onSelect`   | `(templateId: string) => void` | Yes      |         | 템플릿 선택 핸들러                                                          |
+| `showSearch` | `boolean`                      |          | false   | 검색 입력 표시 여부                                                         |
+
+#### FailureList
+
+**Import:** `import { FailureList } from "@reopt-ai/opt-ui"`
+**Dependencies:** badge (core)
+
+| Prop             | Type                                  | Required | Default     | Description                                                          |
+| ---------------- | ------------------------------------- | -------- | ----------- | -------------------------------------------------------------------- |
+| `failures`       | `FailureItem[]`                       | Yes      |             | 실패 항목 배열. { id, title, message?, severity, timestamp, group? } |
+| `title`          | `string`                              |          | "최근 실패" | 섹션 제목                                                            |
+| `maxItems`       | `number`                              |          |             | 최대 표시 개수                                                       |
+| `grouped`        | `boolean`                             |          | false       | group 필드 기준으로 그룹핑 표시                                      |
+| `onFailureClick` | `(failure: FailureItem) => void`      |          |             | 실패 항목 클릭 핸들러                                                |
+| `renderActions`  | `(failure: FailureItem) => ReactNode` |          |             | 각 항목 우측 액션 슬롯 렌더 함수                                     |
+
+#### KeyValueEditor
+
+**Import:** `import { KeyValueEditor } from "@reopt-ai/opt-ui"`
+
+| Prop               | Type                                                             | Required | Default | Description                       |
+| ------------------ | ---------------------------------------------------------------- | -------- | ------- | --------------------------------- |
+| `value`            | `KeyValueEntry[]`                                                |          |         | 현재 엔트리 (controlled 모드)     |
+| `defaultValue`     | `KeyValueEntry[]`                                                |          |         | 초기 엔트리 (uncontrolled 모드)   |
+| `onChange`         | `(entries: KeyValueEntry[]) => void`                             |          |         | 엔트리 변경 핸들러                |
+| `showSecretToggle` | `boolean`                                                        |          | false   | 비밀값 표시/숨김 토글 버튼 활성화 |
+| `maxEntries`       | `number`                                                         |          |         | 최대 항목 수 제한                 |
+| `readOnly`         | `boolean`                                                        |          | false   | 읽기 전용 모드                    |
+| `labels`           | `KeyValueEditorLabels`                                           |          |         | i18n 라벨 오버라이드              |
+| `renderActions`    | `(entry: KeyValueEntry, index: number) => ReactNode`             |          |         | 항목별 커스텀 액션 슬롯           |
+| `validateKey`      | `(key: string, entries: KeyValueEntry[]) => string \| undefined` |          |         | 키 유효성 검사 함수               |
+
+#### WorkflowCanvas
+
+**Import:** `import { WorkflowCanvas } from "@reopt-ai/opt-ui"`
+**Dependencies:** badge (core)
+
+| Prop           | Type                                                 | Required | Default | Description                                 |
+| -------------- | ---------------------------------------------------- | -------- | ------- | ------------------------------------------- |
+| `steps`        | `WorkflowCanvasStep[]`                               | Yes      |         | 스텝 배열. { id, title, row, col, status? } |
+| `connections`  | `WorkflowCanvasConnection[]`                         |          | []      | 연결선 배열. { from, to, label? }           |
+| `onStepMove`   | `(stepId: string, row: number, col: number) => void` |          |         | 화살표 키 이동 핸들러                       |
+| `onSelectStep` | `(step: WorkflowCanvasStep) => void`                 |          |         | 스텝 선택 핸들러                            |
+
+#### CodeSnippetViewer
+
+**Import:** `import { CodeSnippetViewer } from "@reopt-ai/opt-ui"`
+
+| Prop              | Type                                           | Required | Default   | Description                       |
+| ----------------- | ---------------------------------------------- | -------- | --------- | --------------------------------- |
+| `code`            | `string`                                       | Yes      |           | 표시할 코드 문자열                |
+| `language`        | `string`                                       |          | "text"    | 코드 언어 라벨                    |
+| `title`           | `string`                                       |          |           | 헤더에 표시할 제목                |
+| `showLineNumbers` | `boolean`                                      |          | true      | 줄 번호 표시 여부                 |
+| `showCopyButton`  | `boolean`                                      |          | true      | 복사 버튼 표시 여부               |
+| `maxHeight`       | `number`                                       |          | 400       | 스크롤 영역의 최대 높이(px)       |
+| `syntaxTheme`     | `"default" \| "muted" \| "dark" \| "terminal"` |          | "default" | 코드 블록 색상 톤                 |
+| `className`       | `string`                                       |          |           | 커스텀 CSS 클래스                 |
+| `labels`          | `CodeSnippetViewerLabels`                      |          |           | 복사 버튼과 코드 영역 레이블 문구 |
+
+#### QueryResultsTable
+
+**Import:** `import { QueryResultsTable } from "@reopt-ai/opt-ui"`
+
+| Prop      | Type                             | Required | Default | Description             |
+| --------- | -------------------------------- | -------- | ------- | ----------------------- |
+| `columns` | `string[]`                       | Yes      |         | 컬럼 이름               |
+| `rows`    | `Array<Record<string, unknown>>` | Yes      |         | 결과 행                 |
+| `loading` | `boolean`                        |          |         | polite 로딩 상태        |
+| `error`   | `string`                         |          |         | assertive 오류 상태     |
+| `labels`  | `QueryResultsTableLabels`        |          |         | 로딩/빈 상태/행 수 문구 |
+
+#### ReportBuilder
+
+**Import:** `import { ReportBuilder } from "@reopt-ai/opt-ui"`
+**Dependencies:** button (core), input (core)
+
+| Prop          | Type                                                               | Required | Default | Description                         |
+| ------------- | ------------------------------------------------------------------ | -------- | ------- | ----------------------------------- |
+| `chartTypes`  | `ChartTypeDef[]`                                                   |          |         | 차트 타입 그리드 (기본 9종 제공)    |
+| `dataSources` | `DataSourceDef[]`                                                  |          |         | 데이터 소스 드롭다운 옵션           |
+| `configForm`  | `ReactNode`                                                        |          |         | 차트별 데이터 설정 폼 슬롯 (step 2) |
+| `styleForm`   | `ReactNode`                                                        |          |         | 차트별 스타일 설정 폼 슬롯 (step 3) |
+| `preview`     | `ReactNode`                                                        |          |         | 차트 미리보기 슬롯 (step 4)         |
+| `onSave`      | `(report: { name, description, chartType, dataSourceId }) => void` |          |         | 저장 콜백                           |
+| `onCancel`    | `() => void`                                                       |          |         | 취소 콜백                           |
+| `labels`      | `ReportBuilderLabels`                                              |          |         | UI 텍스트 커스터마이징              |
+
+#### InsightsPanel
+
+**Import:** `import { InsightsPanel } from "@reopt-ai/opt-ui"`
+**Dependencies:** button (core), stat-card (core), badge (core)
+
+| Prop                      | Type                                | Required | Default | Description                                        |
+| ------------------------- | ----------------------------------- | -------- | ------- | -------------------------------------------------- |
+| `insights`                | `InsightItem[]`                     | Yes      |         | 인사이트 항목 배열                                 |
+| `stats`                   | `InsightsStat[]`                    |          |         | 통계 필터 카드 배열 (클릭 가능)                    |
+| `detectionTypes`          | `DetectionTypeDef[]`                |          |         | 검출 유형 토글 배열 (volume_anomaly, new_event 등) |
+| `detectionConfig`         | `DetectionConfig`                   |          |         | 검출 파라미터 (days, zScoreThreshold)              |
+| `onDetectionConfigChange` | `(config: DetectionConfig) => void` |          |         | 검출 파라미터 변경 핸들러                          |
+| `onDismiss`               | `(id: string) => void`              |          |         | 인사이트 dismiss 핸들러                            |
+
+#### TimeRangeSelector
+
+**Import:** `import { TimeRangeSelector } from "@reopt-ai/opt-ui"`
+**Dependencies:** button (core), popover (core), date-range-picker (core)
+
+| Prop       | Type                         | Required | Default | Description                          |
+| ---------- | ---------------------------- | -------- | ------- | ------------------------------------ |
+| `value`    | `DateRange`                  |          |         | 현재 선택된 날짜 범위                |
+| `onChange` | `(range: DateRange) => void` |          |         | 범위 변경 핸들러                     |
+| `presets`  | `TimePresetDef[]`            |          |         | 빠른 프리셋 목록 (Today, Last 7d 등) |
+| `labels`   | `TimeRangeSelectorLabels`    |          |         | i18n용 라벨 오버라이드               |
+
+#### ExportButton
+
+**Import:** `import { ExportButton } from "@reopt-ai/opt-ui"`
+**Dependencies:** dropdown-menu (core), button (core)
+
+| Prop       | Type                             | Required | Default         | Description              |
+| ---------- | -------------------------------- | -------- | --------------- | ------------------------ |
+| `data`     | `Record<string, unknown>[]`      | Yes      |                 | 내보낼 데이터 배열       |
+| `columns`  | `ExportColumn[]`                 |          |                 | 컬럼 매핑 (key → header) |
+| `fileName` | `string`                         |          | "export"        | 파일 이름                |
+| `formats`  | `ExportFormat[]`                 |          | ["csv", "json"] | 지원 포맷                |
+| `onExport` | `(format: ExportFormat) => void` |          |                 | 커스텀 내보내기 핸들러   |
+
+#### SummaryRow
+
+**Import:** `import { SummaryRow } from "@reopt-ai/opt-ui"`
+**Dependencies:** stat-card (core), skeleton (core)
+
+| Prop                       | Type                             | Required | Default | Description                      |
+| -------------------------- | -------------------------------- | -------- | ------- | -------------------------------- |
+| `stats`                    | `StatCardType[]`                 | Yes      |         | 통계 카드 배열                   |
+| `columns`                  | `2 \| 3 \| 4`                    |          | 4       | 컬럼 수                          |
+| `onStatClick`              | `(stat: StatCardType) => void`   |          |         | 카드 클릭 핸들러                 |
+| `formatValue`              | `(stat: StatCardType) => string` |          |         | 값 표시 커스텀 포맷 함수         |
+| `durationFractionDigits`   | `number`                         |          | 1       | duration 포맷 시 소수점 자리수   |
+| `percentageFractionDigits` | `number`                         |          | 1       | percentage 포맷 시 소수점 자리수 |
+| `loading`                  | `boolean`                        |          | false   | 로딩 시 스켈레톤 표시            |
+
+#### ComparisonSelector
+
+**Import:** `import { ComparisonSelector } from "@reopt-ai/opt-ui"`
+**Dependencies:** select (core), button (core)
+
+| Prop        | Type                       | Required | Default | Description               |
+| ----------- | -------------------------- | -------- | ------- | ------------------------- |
+| `segments`  | `ComparisonOption[]`       | Yes      |         | 선택 가능한 세그먼트 목록 |
+| `valueA`    | `string`                   |          |         | Base 선택값               |
+| `valueB`    | `string`                   |          |         | Compare 선택값            |
+| `onChangeA` | `(value: string) => void`  |          |         | Base 변경 핸들러          |
+| `onChangeB` | `(value: string) => void`  |          |         | Compare 변경 핸들러       |
+| `labels`    | `ComparisonSelectorLabels` |          |         | i18n용 라벨 오버라이드    |
+
+#### ThemeSwitcher
+
+**Import:** `import { ThemeSwitcher } from "@reopt-ai/opt-ui"`
+
+| Prop     | Type                  | Required | Default | Description            |
+| -------- | --------------------- | -------- | ------- | ---------------------- |
+| `labels` | `ThemeSwitcherLabels` |          |         | i18n용 라벨 오버라이드 |
+
+#### PromptTemplate
+
+**Import:** `import { PromptTemplate } from "@reopt-ai/opt-ui"`
+**Dependencies:** input (core)
+
+| Prop          | Type                   | Required | Default | Description                                                  |
+| ------------- | ---------------------- | -------- | ------- | ------------------------------------------------------------ |
+| `title`       | `string`               | Yes      |         | 프롬프트 제목                                                |
+| `description` | `string`               |          |         | 프롬프트 설명 (헤더 아래 표시)                               |
+| `template`    | `string`               | Yes      |         | 프롬프트 템플릿. {변수명}으로 치환 가능                      |
+| `variables`   | `PromptVariable[]`     |          |         | 변수 정의 배열. { name, label, placeholder?, defaultValue? } |
+| `labels`      | `PromptTemplateLabels` |          |         | i18n용 라벨 오버라이드                                       |
+
+#### Sidebar
+
+**Import:** `import { Sidebar } from "@reopt-ai/opt-ui"`
+**Dependencies:** sidebar-nav (shells)
+
+**Sidebar:**
+
+| Prop                | Type                           | Required | Default    | Description                                               |
+| ------------------- | ------------------------------ | -------- | ---------- | --------------------------------------------------------- |
+| `children`          | `ReactNode`                    | Yes      |            | Sidebar.Header, Sidebar.Content, Sidebar.Footer 자식 요소 |
+| `collapsible`       | `boolean`                      |          | false      | 접기/펼치기 토글 지원                                     |
+| `defaultCollapsed`  | `boolean`                      |          | false      | 초기 접힘 상태                                            |
+| `collapsed`         | `boolean`                      |          |            | 제어 모드: 접힘 상태                                      |
+| `onCollapsedChange` | `(collapsed: boolean) => void` |          |            | 제어 모드: 접힘 상태 변경 핸들러                          |
+| `width`             | `number`                       |          | 280        | 펼침 상태 너비 (px)                                       |
+| `collapsedWidth`    | `number`                       |          | 56         | 접힘 상태 너비 (px)                                       |
+| `side`              | `"left" \| "right"`            |          | "left"     | 사이드바 위치                                             |
+| `label`             | `string`                       |          | "사이드바" | aside aria-label                                          |
+| `className`         | `string`                       |          |            | 커스텀 CSS 클래스                                         |
+
+**Sidebar.Group:**
+
+| Prop        | Type        | Required | Default | Description                        |
+| ----------- | ----------- | -------- | ------- | ---------------------------------- |
+| `children`  | `ReactNode` | Yes      |         | Sidebar.Item 요소들                |
+| `label`     | `string`    |          |         | 그룹 레이블 (접힌 상태에서 숨겨짐) |
+| `className` | `string`    |          |         | 커스텀 CSS 클래스                  |
+
+**Sidebar.Item:**
+
+| Prop        | Type         | Required | Default | Description                                                   |
+| ----------- | ------------ | -------- | ------- | ------------------------------------------------------------- |
+| `children`  | `ReactNode`  | Yes      |         | 항목 레이블 텍스트                                            |
+| `icon`      | `ReactNode`  |          |         | 아이콘 (접힌 상태에서도 표시)                                 |
+| `active`    | `boolean`    |          | false   | 활성 상태 (aria-current=page)                                 |
+| `onClick`   | `() => void` |          |         | 클릭 핸들러                                                   |
+| `href`      | `string`     |          |         | 링크 URL — 설정 시 <a> 태그로 렌더링                          |
+| `tooltip`   | `string`     |          |         | 접힌 상태에서 Tooltip 표시 (미지정 시 children 텍스트)        |
+| `badge`     | `ReactNode`  |          |         | 우측 배지 (숫자/텍스트). 접힌 상태에서 아이콘 위 dot으로 축소 |
+| `className` | `string`     |          |         | 커스텀 CSS 클래스                                             |
+
+#### AppShell
+
+**Import:** `import { AppShell } from "@reopt-ai/opt-ui"`
+**Dependencies:** sidebar (shells), page-header (core)
+
+| Prop        | Type        | Required | Default | Description                                                                    |
+| ----------- | ----------- | -------- | ------- | ------------------------------------------------------------------------------ |
+| `children`  | `ReactNode` | Yes      |         | AppShell.Header, AppShell.Sidebar, AppShell.Content, AppShell.Footer 자식 요소 |
+| `className` | `string`    |          |         | 커스텀 CSS 클래스                                                              |
+
+**Examples:**
+
+_앱 레이아웃:_
+
+```tsx
+import { AppShell } from "@reopt-ai/opt-ui";
+
+<AppShell>
+  <AppShell.Header>헤더 영역</AppShell.Header>
+  <AppShell.Sidebar>사이드바 영역</AppShell.Sidebar>
+  <AppShell.Content>메인 콘텐츠</AppShell.Content>
+</AppShell>;
+```
+
+#### ConfirmDialog
+
+**Import:** `import { ConfirmDialog } from "@reopt-ai/opt-ui"`
+**Dependencies:** dialog (core)
+
+| Prop           | Type                    | Required | Default   | Description      |
+| -------------- | ----------------------- | -------- | --------- | ---------------- |
+| `open`         | `boolean`               | Yes      |           | 열림 상태        |
+| `onConfirm`    | `() => void`            | Yes      |           | 확인 콜백        |
+| `onCancel`     | `() => void`            | Yes      |           | 취소 콜백        |
+| `title`        | `string`                | Yes      |           | 대화 상자 제목   |
+| `description`  | `string`                |          |           | 설명 텍스트      |
+| `confirmLabel` | `string`                |          | "Confirm" | 확인 버튼 텍스트 |
+| `cancelLabel`  | `string`                |          | "Cancel"  | 취소 버튼 텍스트 |
+| `variant`      | `"default" \| "danger"` |          | "default" | 변형             |
+
+#### AsyncCombobox
+
+**Import:** `import { AsyncCombobox } from "@reopt-ai/opt-ui"`
+**Dependencies:** combobox (core), spinner (core)
+
+| Prop          | Type                               | Required | Default   | Description                              |
+| ------------- | ---------------------------------- | -------- | --------- | ---------------------------------------- |
+| `onSearch`    | `(q: string) => Promise<string[]>` | Yes      |           | 검색 콜백                                |
+| `debounceMs`  | `number`                           |          | 300       | 디바운스 ms                              |
+| `minChars`    | `number`                           |          | 1         | 최소 검색 글자 수                        |
+| `placeholder` | `string`                           |          | "Search…" | 플레이스홀더                             |
+| `onSelect`    | `(value: string) => void`          |          |           | 선택 콜백                                |
+| `labels`      | `AsyncComboboxLabels`              |          |           | input/loading/noResults/placeholder 문구 |
+| `loadingText` | `string`                           |          |           | 로딩 문구. labels.loading 사용 권장      |
+
+#### VerticalTabs
+
+**Import:** `import { VerticalTabs } from "@reopt-ai/opt-ui"`
+**Dependencies:** tabs (core)
+
+| Prop           | Type       | Required | Default | Description       |
+| -------------- | ---------- | -------- | ------- | ----------------- |
+| `tabs`         | `TabDef[]` | Yes      |         | 탭 정의 배열      |
+| `defaultTabId` | `string`   |          |         | 기본 선택 탭 ID   |
+| `className`    | `string`   |          |         | 커스텀 CSS 클래스 |
+
+#### ColumnToggler
+
+**Import:** `import { ColumnToggler } from "@reopt-ai/opt-ui"`
+**Dependencies:** popover (core), checkbox (core)
+
+| Prop             | Type                                 | Required | Default | Description            |
+| ---------------- | ------------------------------------ | -------- | ------- | ---------------------- |
+| `columns`        | `ColumnTogglerColumn[]`              | Yes      |         | 전체 컬럼 목록         |
+| `visibleColumns` | `string[]`                           | Yes      |         | 표시 중인 컬럼 ID 배열 |
+| `onChange`       | `(visibleColumns: string[]) => void` | Yes      |         | 변경 콜백              |
+
+#### TreeTable
+
+**Import:** `import { TreeTable } from "@reopt-ai/opt-ui"`
+**Dependencies:** data-table (shells)
+
+| Prop              | Type                 | Required | Default | Description        |
+| ----------------- | -------------------- | -------- | ------- | ------------------ |
+| `data`            | `TreeNode<T>[]`      | Yes      |         | 트리 노드 배열     |
+| `columns`         | `TreeColumnDef<T>[]` | Yes      |         | 컬럼 정의          |
+| `defaultExpanded` | `string[]`           |          | []      | 기본 펼침 노드 ID  |
+| `indentSize`      | `number`             |          | 24      | 들여쓰기 크기 (px) |
+| `className`       | `string`             |          |         | 커스텀 CSS 클래스  |
+
+#### InlineEditTable
+
+**Import:** `import { InlineEditTable } from "@reopt-ai/opt-ui"`
+**Dependencies:** data-table (shells)
+
+| Prop           | Type                                                       | Required | Default | Description                      |
+| -------------- | ---------------------------------------------------------- | -------- | ------- | -------------------------------- |
+| `data`         | `T[]`                                                      | Yes      |         | 행 데이터 배열                   |
+| `columns`      | `InlineEditColumnDef<T>[]`                                 | Yes      |         | 컬럼 정의 (editable 플래그 포함) |
+| `keyExtractor` | `(row: T) => string`                                       | Yes      |         | 행 키 추출기                     |
+| `onCellEdit`   | `(rowId: string, columnId: string, value: string) => void` |          |         | 셀 편집 확정 콜백                |
+| `className`    | `string`                                                   |          |         | 커스텀 CSS 클래스                |
+
+#### KanbanBoard
+
+**Import:** `import { KanbanBoard } from "@reopt-ai/opt-ui"`
+**Dependencies:** scroll-area (core)
+
+| Prop           | Type                                        | Required | Default | Description                      |
+| -------------- | ------------------------------------------- | -------- | ------- | -------------------------------- |
+| `columns`      | `KanbanColumn<T>[]`                         | Yes      |         | 컬럼 목록 (각 컬럼에 items 배열) |
+| `onDragEnd`    | `(itemId, fromCol, toCol, toIndex) => void` | Yes      |         | 드래그 완료 콜백                 |
+| `renderCard`   | `(item: T) => ReactNode`                    | Yes      |         | 카드 렌더링 함수                 |
+| `keyExtractor` | `(item: T) => string`                       | Yes      |         | 항목 키 추출기                   |
+| `className`    | `string`                                    |          |         | 커스텀 CSS 클래스                |
+
+#### RichTextEditor
+
+**Import:** `import { RichTextEditor } from "@reopt-ai/opt-ui"`
+
+| Prop          | Type                      | Required | Default                                                  | Description       |
+| ------------- | ------------------------- | -------- | -------------------------------------------------------- | ----------------- |
+| `value`       | `string`                  | Yes      |                                                          | 텍스트 값         |
+| `onChange`    | `(value: string) => void` | Yes      |                                                          | 변경 콜백         |
+| `placeholder` | `string`                  |          | "Write something…"                                       | 플레이스홀더      |
+| `toolbar`     | `ToolbarAction[]`         |          | ["bold","italic","code","link","heading","list","quote"] | 툴바 액션 목록    |
+| `className`   | `string`                  |          |                                                          | 커스텀 CSS 클래스 |
+
+#### CodeDiffViewer
+
+**Import:** `import { CodeDiffViewer } from "@reopt-ai/opt-ui"`
+
+| Prop              | Type                   | Required | Default   | Description                             |
+| ----------------- | ---------------------- | -------- | --------- | --------------------------------------- |
+| `original`        | `string`               | Yes      |           | 원본 코드                               |
+| `modified`        | `string`               | Yes      |           | 수정된 코드                             |
+| `mode`            | `"split" \| "unified"` |          | "unified" | 뷰 모드                                 |
+| `showLineNumbers` | `boolean`              |          | true      | 줄 번호 표시                            |
+| `scrollLabel`     | `string`               |          |           | 스크롤 가능한 diff 영역의 접근성 레이블 |
+| `className`       | `string`               |          |           | 커스텀 CSS 클래스                       |
+
+#### WebhookConfig
+
+**Import:** `import { WebhookConfig } from "@reopt-ai/opt-ui"`
+**Dependencies:** input (core), checkbox (core), number-input (core), button (core)
+
+| Prop              | Type                            | Required | Default | Description             |
+| ----------------- | ------------------------------- | -------- | ------- | ----------------------- |
+| `webhook`         | `WebhookDef`                    | Yes      |         | 웹훅 설정 객체          |
+| `onChange`        | `(webhook: WebhookDef) => void` | Yes      |         | 변경 콜백               |
+| `availableEvents` | `string[]`                      | Yes      |         | 선택 가능한 이벤트 목록 |
+| `onTest`          | `() => void`                    |          |         | 테스트 버튼 콜백        |
+| `className`       | `string`                        |          |         | 커스텀 CSS 클래스       |
+
+#### FeatureFlagPanel
+
+**Import:** `import { FeatureFlagPanel } from "@reopt-ai/opt-ui"`
+**Dependencies:** switch (core), badge (core), number-input (core)
+
+| Prop              | Type                                           | Required | Default | Description        |
+| ----------------- | ---------------------------------------------- | -------- | ------- | ------------------ |
+| `flags`           | `FeatureFlag[]`                                | Yes      |         | 피처 플래그 목록   |
+| `onToggle`        | `(flagId: string, enabled: boolean) => void`   | Yes      |         | 토글 콜백          |
+| `onRolloutChange` | `(flagId: string, percentage: number) => void` |          |         | 롤아웃 % 변경 콜백 |
+| `environments`    | `string[]`                                     | Yes      |         | 전체 환경 목록     |
+| `className`       | `string`                                       |          |         | 커스텀 CSS 클래스  |
+
+#### DataImportWizard
+
+**Import:** `import { DataImportWizard } from "@reopt-ai/opt-ui"`
+**Dependencies:** button (core)
+
+| Prop              | Type                      | Required | Default | Description         |
+| ----------------- | ------------------------- | -------- | ------- | ------------------- |
+| `fields`          | `ImportFieldDef[]`        | Yes      |         | 매핑 대상 필드 목록 |
+| `onImport`        | `(mapping, data) => void` | Yes      |         | 임포트 확정 콜백    |
+| `acceptedFormats` | `string`                  |          | ".csv"  | 허용 파일 형식      |
+| `className`       | `string`                  |          |         | 커스텀 CSS 클래스   |
+
+#### MegaMenu
+
+**Import:** `import { MegaMenu } from "@reopt-ai/opt-ui"`
+**Dependencies:** popover (core)
+
+| Prop           | Type                | Required | Default | Description        |
+| -------------- | ------------------- | -------- | ------- | ------------------ |
+| `menus`        | `MegaMenuSection[]` | Yes      |         | 메뉴 섹션 배열     |
+| `columns`      | `number`            |          | 3       | 그리드 컬럼 수     |
+| `footer`       | `ReactNode`         |          |         | 하단 footer 슬롯   |
+| `triggerLabel` | `string`            |          | "Menu"  | 트리거 버튼 텍스트 |
+| `className`    | `string`            |          |         | 커스텀 CSS 클래스  |
+
+#### BulkActions
+
+**Import:** `import { BulkActions } from "@reopt-ai/opt-ui"`
+**Dependencies:** dropdown-menu (core), badge (core)
+
+| Prop            | Type                         | Required | Default | Description                                  |
+| --------------- | ---------------------------- | -------- | ------- | -------------------------------------------- |
+| `selectedCount` | `number`                     | Yes      |         | 선택된 항목 수                               |
+| `actions`       | `BulkActionDef[]`            | Yes      |         | 액션 목록. { id, label, variant?: "danger" } |
+| `onAction`      | `(actionId: string) => void` | Yes      |         | 액션 실행 콜백                               |
+| `onClear`       | `() => void`                 | Yes      |         | 선택 해제 콜백                               |
+| `className`     | `string`                     |          |         | 커스텀 CSS 클래스                            |
+
+#### SavedFilters
+
+**Import:** `import { SavedFilters } from "@reopt-ai/opt-ui"`
+**Dependencies:** popover (core), input (core)
+
+| Prop             | Type                                                       | Required | Default | Description          |
+| ---------------- | ---------------------------------------------------------- | -------- | ------- | -------------------- |
+| `currentFilters` | `Record<string, unknown>`                                  | Yes      |         | 현재 적용 중인 필터  |
+| `presets`        | `FilterPreset[]`                                           | Yes      |         | 저장된 프리셋 목록   |
+| `onSavePreset`   | `(name: string, filters: Record<string, unknown>) => void` | Yes      |         | 프리셋 저장 콜백     |
+| `onLoadPreset`   | `(preset: FilterPreset) => void`                           | Yes      |         | 프리셋 불러오기 콜백 |
+| `onDeletePreset` | `(presetId: string) => void`                               | Yes      |         | 프리셋 삭제 콜백     |
+| `className`      | `string`                                                   |          |         | 커스텀 CSS 클래스    |
+
+#### NotificationCenter
+
+**Import:** `import { NotificationCenter } from "@reopt-ai/opt-ui"`
+**Dependencies:** popover (core), badge (core), scroll-area (core)
+
+| Prop            | Type                   | Required | Default | Description         |
+| --------------- | ---------------------- | -------- | ------- | ------------------- |
+| `notifications` | `NotificationItem[]`   | Yes      |         | 알림 목록           |
+| `onMarkRead`    | `(id: string) => void` | Yes      |         | 읽음 처리 콜백      |
+| `onMarkAllRead` | `() => void`           | Yes      |         | 전체 읽음 처리 콜백 |
+| `onAction`      | `(id: string) => void` |          |         | 알림 액션 콜백      |
+| `className`     | `string`               |          |         | 커스텀 CSS 클래스   |
+
+#### AuditLog
+
+**Import:** `import { AuditLog } from "@reopt-ai/opt-ui"`
+**Dependencies:** avatar (core), badge (core)
+
+| Prop         | Type           | Required | Default | Description         |
+| ------------ | -------------- | -------- | ------- | ------------------- |
+| `entries`    | `AuditEntry[]` | Yes      |         | 감사 로그 항목 배열 |
+| `onLoadMore` | `() => void`   |          |         | 더 보기 콜백        |
+| `loading`    | `boolean`      |          | false   | 로딩 상태           |
+| `className`  | `string`       |          |         | 커스텀 CSS 클래스   |
+
+#### AuditTimeline
+
+**Import:** `import { AuditTimeline } from "@reopt-ai/opt-ui"`
+**Dependencies:** badge (core), button (core), empty-state (core)
+
+| Prop           | Type                          | Required | Default | Description            |
+| -------------- | ----------------------------- | -------- | ------- | ---------------------- |
+| `entries`      | `AuditEntry[]`                | Yes      |         | 변경 이력 항목 배열    |
+| `labels`       | `AuditTimelineLabels`         |          |         | UI 텍스트 커스터마이징 |
+| `onEntryClick` | `(entry: AuditEntry) => void` |          |         | 항목 클릭 콜백         |
+| `className`    | `string`                      |          |         | 커스텀 CSS 클래스      |
+
+#### ChatSidebar
+
+**Import:** `import { ChatSidebar } from "@reopt-ai/opt-ui"`
+**Dependencies:** button (core), input (core), scroll-area (core), empty-state (core)
+
+| Prop                   | Type                                          | Required | Default | Description                                                     |
+| ---------------------- | --------------------------------------------- | -------- | ------- | --------------------------------------------------------------- |
+| `conversations`        | `ChatConversationDef[]`                       | Yes      |         | 대화 목록 배열. { id, title, lastMessage?, timestamp, unread? } |
+| `activeConversationId` | `string`                                      |          |         | 현재 활성 대화 ID                                               |
+| `onConversationSelect` | `(conversation: ChatConversationDef) => void` |          |         | 대화 선택 핸들러                                                |
+| `onNewChat`            | `() => void`                                  |          |         | 새 대화 생성 핸들러                                             |
+| `onSearch`             | `(query: string) => void`                     |          |         | 검색 핸들러                                                     |
+| `labels`               | `ChatSidebarLabels`                           |          |         | i18n 라벨 오버라이드                                            |
+
+#### ChatInput
+
+**Import:** `import { ChatInput } from "@reopt-ai/opt-ui"`
+**Dependencies:** button (core), kbd (core), select (core)
+
+| Prop           | Type                        | Required | Default | Description                |
+| -------------- | --------------------------- | -------- | ------- | -------------------------- |
+| `value`        | `string`                    |          |         | 제어 모드: 입력 값         |
+| `onSend`       | `(message: string) => void` |          |         | 메시지 전송 핸들러         |
+| `onFileAttach` | `() => void`                |          |         | 파일 첨부 클릭 핸들러      |
+| `models`       | `ChatModelDef[]`            |          |         | 모델 선택 옵션             |
+| `stylePresets` | `ChatStylePresetDef[]`      |          |         | 스타일 프리셋 옵션         |
+| `maxRows`      | `number`                    |          | 6       | textarea 최대 행 수        |
+| `showHint`     | `boolean`                   |          | true    | Shift+Enter 힌트 표시 여부 |
+| `labels`       | `ChatInputLabels`           |          |         | i18n 라벨 오버라이드       |
+
+**Examples:**
+
+_채팅 입력:_
+
+```tsx
+import { ChatInput } from "@reopt-ai/opt-ui";
+
+<ChatInput
+  placeholder="메시지를 입력하세요..."
+  onSend={(message) => console.log(message)}
+/>;
+```
+
+#### ChatMessageList
+
+**Import:** `import { ChatMessageList } from "@reopt-ai/opt-ui"`
+**Dependencies:** scroll-area (core), avatar (core), empty-state (core)
+
+| Prop              | Type                                     | Required | Default | Description                                   |
+| ----------------- | ---------------------------------------- | -------- | ------- | --------------------------------------------- |
+| `messages`        | `ChatMessageDef[]`                       | Yes      |         | 메시지 배열. { id, role, content, timestamp } |
+| `loading`         | `boolean`                                |          | false   | 타이핑 인디케이터 표시                        |
+| `renderContent`   | `(message: ChatMessageDef) => ReactNode` |          |         | 커스텀 메시지 렌더러. 기본: plain text        |
+| `assistantAvatar` | `string`                                 |          |         | 어시스턴트 아바타 이미지 URL                  |
+| `showTimestamps`  | `boolean`                                |          | true    | 타임스탬프 표시 여부                          |
+| `autoScroll`      | `boolean`                                |          | true    | 새 메시지 시 자동 스크롤                      |
+| `labels`          | `ChatMessageListLabels`                  |          |         | i18n 라벨 오버라이드                          |
+
+**Examples:**
+
+_메시지 목록:_
+
+```tsx
+import { ChatMessageList } from "@reopt-ai/opt-ui";
+
+const messages = [
+  { id: "1", role: "user", content: "안녕하세요!", timestamp: new Date() },
+  { id: "2", role: "assistant", content: "반갑습니다.", timestamp: new Date() },
+];
+
+<ChatMessageList messages={messages} loading={false} />;
+```
+
+### Surface Layer