# Horon Design System

> Horon 제품을 위한 디자인 시스템. 토큰 하나에서 웹 CSS가 나오고, @horon-ai/react 컴포넌트가 그 값을 참조합니다.

## Docs

- [Get Started](https://design.horon.ai/get-started/): 설치와 첫 화면 구성
- [Foundations](https://design.horon.ai/foundations/): 색, 타이포, 간격, 반경, 높이, 모션, 유리 표면
- [Develop](https://design.horon.ai/develop/): React와 Flutter 패키지 사용법
- [Components](https://design.horon.ai/components/): 컴포넌트 전체 목록
- [Mascot](https://design.horon.ai/mascot/): 마스코트 26컷과 브랜드 팔레트
- [Updates](https://design.horon.ai/updates/): 변경 기록

## Foundations

- [Design Token](https://design.horon.ai/foundations/tokens/)
- [Color](https://design.horon.ai/foundations/color/)
- [Typography](https://design.horon.ai/foundations/typography/)
- [Spacing](https://design.horon.ai/foundations/spacing/)
- [Radius](https://design.horon.ai/foundations/radius/)
- [Glass](https://design.horon.ai/foundations/glass/)

## Develop

### React · 시작하기

- [소개](https://design.horon.ai/develop/react/)
- [설치](https://design.horon.ai/develop/react/installation/)
- [스타일](https://design.horon.ai/develop/react/styling/)
- [테마](https://design.horon.ai/develop/react/theming/)
- [아이콘](https://design.horon.ai/develop/react/icons/)

### React · 개념

- [가져오기](https://design.horon.ai/develop/react/imports/)
- [유리 표면](https://design.horon.ai/develop/react/liquid-glass/)
- [모션](https://design.horon.ai/develop/react/motion/)
- [플랫폼과 단축키](https://design.horon.ai/develop/react/platform/)
- [커서 잔상](https://design.horon.ai/develop/react/cursor-ghost/)

### React · 훅

- [useActiveIndicator](https://design.horon.ai/develop/react/hooks/use-active-indicator/)
- [useColorScheme](https://design.horon.ai/develop/react/hooks/use-color-scheme/)
- [useCopyToClipboard](https://design.horon.ai/develop/react/hooks/use-copy-to-clipboard/)
- [useDevice](https://design.horon.ai/develop/react/hooks/use-device/)
- [useHotkey](https://design.horon.ai/develop/react/hooks/use-hotkey/)
- [useMediaQuery](https://design.horon.ai/develop/react/hooks/use-media-query/)
- [usePlatform](https://design.horon.ai/develop/react/hooks/use-platform/)
- [useReducedMotion](https://design.horon.ai/develop/react/hooks/use-reduced-motion/)

### React · 기여

- [저장소에서 개발](https://design.horon.ai/develop/react/contributing/)

### Flutter

- [소개](https://design.horon.ai/develop/flutter/)

## Components

### 입력과 선택

- [Button](https://design.horon.ai/components/button/): 동작을 실행하는 버튼입니다. Primary, Glass, Solid, Danger, Link 변형과 세 크기가 있습니다.
- [Icon Button](https://design.horon.ai/components/icon-button/): 아이콘 하나로 동작을 실행하는 원형 버튼입니다. Glass와 Solid 표면이 있습니다.
- [Input](https://design.horon.ai/components/input/): 한 줄 텍스트 입력 필드입니다. 유리(Glass)와 불투명(Solid) 표면을 고릅니다.
- [Textarea](https://design.horon.ai/components/textarea/): 여러 줄 텍스트를 입력받습니다. 유리(Glass)와 불투명(Solid) 표면을 고릅니다.
- [Field](https://design.horon.ai/components/field/): 라벨, 설명, 오류 문구를 입력과 묶습니다.
- [Textarea Field](https://design.horon.ai/components/textarea-field/): 글자 수 표시와 보내기 버튼이 붙은 여러 줄 입력입니다.
- [Input Group](https://design.horon.ai/components/input-group/): 입력 앞뒤에 국가 코드, 통화 같은 선택 칸(Select 또는 Combobox)을 붙여 하나로 묶습니다.
- [Select](https://design.horon.ai/components/select/): 목록에서 하나를 고르는 드롭다운입니다.
- [Combobox](https://design.horon.ai/components/combobox/): 입력해서 목록을 좁힌 뒤 고르는 검색 선택입니다. 하나만 또는 여러 개를 고를 수 있습니다.
- [Checkbox](https://design.horon.ai/components/checkbox/): 항목을 독립적으로 켜고 끄는 선택 컨트롤입니다.
- [Radio Group](https://design.horon.ai/components/radio-group/): 여러 선택지 중 하나만 고릅니다.
- [Switch](https://design.horon.ai/components/switch/): 즉시 반영되는 켜짐·꺼짐을 전환합니다.
- [Slider](https://design.horon.ai/components/slider/): 가는 트랙 위 손잡이로 값을 고릅니다.
- [Chip](https://design.horon.ai/components/chip/): 필터처럼 눌러서 켜고 끄는 불투명 칩입니다.
- [Segmented Control](https://design.horon.ai/components/segmented-control/): 몇 개의 보기 중 하나를 고르는 분할 컨트롤입니다.
- [Date Field](https://design.horon.ai/components/date-field/): 달력을 열어 날짜를 고르는 입력입니다.
- [Calendar](https://design.horon.ai/components/calendar/): 날짜 하나 또는 범위를 고르는 월 달력입니다.
- [Schedule](https://design.horon.ai/components/schedule/): 루틴의 반복, 요일, 시간을 정하는 일정 카드와 부품입니다.
- [Composer](https://design.horon.ai/components/composer/): 첨부, 입력, 음성·보내기 버튼을 갖춘 메시지 입력창입니다.
- [Split Button](https://design.horon.ai/components/split-button/): 주 동작과 보조 메뉴 캐럿을 한 알약에 담은 버튼입니다.
- [Tool Permissions](https://design.horon.ai/components/tool-permissions/): 도구마다 허용, 확인, 끔을 고르는 권한 목록입니다.
- [File Drop](https://design.horon.ai/components/file-drop/): 파일을 끌어다 놓는 점선 영역입니다.
- [Choice Card](https://design.horon.ai/components/choice-card/): 두 카드 중 하나를 고르는 라디오 카드입니다.

### 표시

- [Badge](https://design.horon.ai/components/badge/): 상태를 짧은 알약 모양 라벨로 표시합니다.
- [Avatar](https://design.horon.ai/components/avatar/): 사람의 이니셜, 봇, 이미지를 원형으로 보여주고 실행 중이면 점을 붙입니다. 점 테두리 색은 liveRingClassName으로 바꿉니다.
- [Card](https://design.horon.ai/components/card/): 제목과 설명을 담는 두꺼운 유리 카드입니다.
- [Banner](https://design.horon.ai/components/banner/): 화면 위쪽에 정보나 위험을 알리는 띠입니다.
- [Kbd](https://design.horon.ai/components/kbd/): 단축키를 작은 키캡으로 표시합니다.
- [Progress](https://design.horon.ai/components/progress/): 작업의 진행률을 6px 막대로 보여줍니다. 값을 생략하면 불확정 스윕 막대가 됩니다.
- [Usage Meter](https://design.horon.ai/components/usage-meter/): 이번 달 사용량을 막대와 설명으로 보여주는 카드입니다.
- [Spinner](https://design.horon.ai/components/spinner/): 처리 중임을 알리는 회전 표시입니다.
- [Skeleton](https://design.horon.ai/components/skeleton/): 내용이 오기 전 자리를 회색 면으로 잡아 둡니다.
- [Empty State](https://design.horon.ai/components/empty-state/): 결과가 없거나 오류가 났을 때 마스코트와 안내를 보여줍니다.
- [Data Table](https://design.horon.ai/components/data-table/): TanStack Table로 정렬, 검색, 행 선택, 페이지 나눔을 처리하는 표입니다.
- [Integration Row](https://design.horon.ai/components/integration-row/): 연결된 서비스의 상태와 연결 동작을 한 줄로 보여줍니다.
- [Liquid Glass](https://design.horon.ai/components/liquid-glass/): 모든 유리 표면 아래 깔리는 색조, 안쪽 음영, 빛 테두리 레이어입니다.
- [Flue Background](https://design.horon.ai/components/flue-background/): 사이드바 뒤에서 천천히 피어오르는 하늘색 연기 그라데이션입니다. 커서를 따라 휘어집니다.
- [Horon Icon](https://design.horon.ai/components/horon-icon/): 내비게이션에서 Horon을 나타내는 매의 눈 아이콘입니다.
- [Horon Wordmark](https://design.horon.ai/components/horon-wordmark/): UI 크기의 Horon 글자 로고입니다.
- [Settings List](https://design.horon.ai/components/settings-list/): 라벨과 스위치를 구분선으로 나눈 설정 목록 카드입니다.
- [MCP Server Row](https://design.horon.ai/components/mcp-server-row/): 연결된 MCP 서버의 이름, 태그, 상태를 보여 주는 행입니다. statusTone으로 상태 알약의 톤을 connected, warning, neutral 중에서 고릅니다.
- [Directory Card](https://design.horon.ai/components/directory-card/): 디렉터리 항목을 소개하는 카드입니다. onAdd를 넘기면 추가 버튼이 나타납니다.
- [Plugin Row](https://design.horon.ai/components/plugin-row/): 플러그인 이름, 버전, 업데이트와 켜기 스위치를 담은 행입니다.
- [Marketplace Card](https://design.horon.ai/components/marketplace-card/): 마켓플레이스 항목의 설명을 담은 카드입니다. onInstall을 넘기면 설치 버튼이 나타납니다.
- [List Detail](https://design.horon.ai/components/list-detail/): 왼쪽 목록과 오른쪽 상세를 나란히 놓은 두 단 패널입니다.
- [Code Panel](https://design.horon.ai/components/code-panel/): 설정 화면에서 쓰는 밝은 코드 패널입니다.

### 내비게이션

- [Tabs](https://design.horon.ai/components/tabs/): 같은 맥락의 화면을 알약 모양 탭으로 나눕니다.
- [Tab Bar](https://design.horon.ai/components/tab-bar/): 모바일 하단의 아이콘 탭 막대입니다.
- [Breadcrumb](https://design.horon.ai/components/breadcrumb/): 워크스페이스부터 현재 위치까지의 경로입니다.
- [Sidebar](https://design.horon.ai/components/sidebar/): 워크스페이스, 메뉴, 펼쳐지는 프로젝트, 계정을 담는 왼쪽 패널입니다.
- [Page Header](https://design.horon.ai/components/page-header/): 뒤로 가기, 제목, 동작, 필터를 담는 유리 머리말입니다.
- [Top Bar](https://design.horon.ai/components/top-bar/): 뒤로가기, 봇 아바타, 제목과 부제, 더보기를 한 줄에 담은 모바일 상단 바입니다. onBack과 onMore를 넘길 때만 해당 버튼이 나타납니다.
- [Breadcrumb Header](https://design.horon.ai/components/breadcrumb-header/): 브레드크럼과 검색·더보기 아이콘 버튼을 한 줄에 담은 유리 머리말입니다. onSearch와 onMore를 넘길 때만 해당 버튼이 나타납니다.
- [Filter Bar](https://design.horon.ai/components/filter-bar/): 개수를 함께 보여 주는 알약 필터 바입니다.

### 오버레이

- [Dialog](https://design.horon.ai/components/dialog/): 화면을 어둡게 덮고 확인을 받는 대화상자입니다.
- [Modal](https://design.horon.ai/components/modal/): 폼이나 긴 내용을 담는 창입니다. 본문만 스크롤되고 동작 버튼은 오른쪽 아래에 고정됩니다.
- [Bottom Sheet](https://design.horon.ai/components/bottom-sheet/): 모바일에서 아래에서 올라오는 시트입니다.
- [Menu](https://design.horon.ai/components/menu/): 동작 목록을 띄우는 메뉴입니다. 유리와 불투명 표면이 있습니다.
- [Tooltip](https://design.horon.ai/components/tooltip/): 아이콘 버튼의 이름을 짧게 알려 줍니다.
- [Toast](https://design.horon.ai/components/toast/): 작업 결과를 잠깐 띄워 알립니다.
- [Command Palette](https://design.horon.ai/components/command-palette/): 봇, 프로젝트, 동작을 검색해 바로 엽니다.
- [Workspace Menu](https://design.horon.ai/components/workspace-menu/): 워크스페이스를 고르고 새 워크스페이스를 만드는 솔리드 메뉴입니다.

### 대화

- [Chat Bubble](https://design.horon.ai/components/chat-bubble/): 내가 보낸 말과 봇의 답을 구분하는 말풍선입니다.
- [Approval Card](https://design.horon.ai/components/approval-card/): 봇이 실행 전에 승인을 받는 카드입니다.
- [Bot List Row](https://design.horon.ai/components/bot-list-row/): 봇 이름, 최근 활동, 실행 여부를 한 줄로 보여줍니다.
- [Chat Controls](https://design.horon.ai/components/chat-controls/): 최신 메시지로 이동, 새 메시지 알림, 음성 입력 막대입니다.
- [Message Extras](https://design.horon.ai/components/message-extras/): 메시지 동작, 날짜 구분선, 첨부, 코드 블록입니다.

### 에이전트

- [Agent Activity](https://design.horon.ai/components/agent-activity/): 생각 중 표시, 스트리밍 글, 도구 단계, 작업 기록입니다.
- [Agent Panel](https://design.horon.ai/components/agent-panel/): 봇에게 일을 맡기는 입력창과 작업 목록을 담는 패널입니다.
- [Task Row](https://design.horon.ai/components/task-row/): 맡긴 작업의 진행, 검토, 실패, 완료 상태를 보여줍니다.
- [Agent Lane](https://design.horon.ai/components/agent-lane/): 나눠 맡긴 하위 봇 하나의 진행을 보여줍니다.
- [Tool Call](https://design.horon.ai/components/tool-call/): 봇이 부른 도구의 인자와 결과를 펼쳐 봅니다.
- [Plan Step](https://design.horon.ai/components/plan-step/): 실행 계획의 한 단계를 레일 위에 표시합니다.
- [Source Row](https://design.horon.ai/components/source-row/): 지식 소스의 수집·분할·임베딩 단계를 보여줍니다.
- [Orchestrator Panel](https://design.horon.ai/components/orchestrator-panel/): 리드 봇과 병렬 레인, 요약을 보여 주는 오케스트레이터 패널입니다.
- [Plan Card](https://design.horon.ai/components/plan-card/): 계획 단계를 감싸는 카드 껍데기입니다.
- [Knowledge Base Panel](https://design.horon.ai/components/knowledge-base-panel/): 지식 소스의 색인 상태를 보여 주는 패널입니다.
- [Agent Steering Panel](https://design.horon.ai/components/agent-steering-panel/): 실행 중인 봇에게 방향을 지시하는 스티어링 패널입니다.
- [Agent Lanes Timeline](https://design.horon.ai/components/agent-lanes-timeline/): 봇별 실행 구간을 시간축에 놓은 타임라인입니다. onRangeClick을 넘기면 범위 알약이 버튼이 됩니다.
- [Bot Instructions Panel](https://design.horon.ai/components/bot-instructions-panel/): 봇 지침과 예시를 탭으로 보여 주는 패널입니다. onVersionClick과 onBotClick을 넘기면 버전·봇 알약이 버튼이 됩니다.
- [Document Extract Panel](https://design.horon.ai/components/document-extract-panel/): 문서 뷰어와 추출된 필드를 나란히 보여 주는 패널입니다. onOpenFile을 넘기면 파일 이름이 버튼이 되고, 시트 내부는 테마와 무관한 neutral 잉크를 씁니다.
- [Bot Memory Panel](https://design.horon.ai/components/bot-memory-panel/): 봇이 기억한 내용을 분류해 보여 주는 메모리 패널입니다. onSearch를 넘기면 검색 버튼이 생깁니다.
- [Research Run Panel](https://design.horon.ai/components/research-run-panel/): 리서치 질문, 진행 상태, 검색어 목록을 보여 주는 패널입니다. onOpenSources와 onToggleStatus를 넘기면 출처 알약과 상태 줄이 버튼이 됩니다.
- [Tool Calls Header](https://design.horon.ai/components/tool-calls-header/): 도구 호출 묶음의 제목 줄과 도구 칩입니다.

총 84개 컴포넌트.