@reopt-ai/opt-ui 1.4.1 → 1.6.0

package/COMPONENT_CATALOG.md

@@ -2,7 +2,7 @@
 
 <!-- DEPRECATED: Prefer dist/docs/02-components/ for per-layer reference. -->
 <!-- Auto-generated from ComponentMeta. Do not edit. -->
-<!-- Version: 1.4.1 -->
+<!-- Version: 1.6.0 -->
 
 ## Quick Stats
 
@@ -184,7 +184,7 @@
 | 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`                                                                                                                                   |
+| BlockLayout   | Block 루트 레이아웃. 자식 간 section spacing과 선택적 시맨틱 inset을 제공하고 loading prop으로 LoadingOverlay를 자동 래핑합니다.                         | `BlockLayout`                                                                                                                                   |
 | createBlock   | Block 팩토리 함수. BlockLayout 래핑을 구조적으로 강제하여 loading/className 처리를 자동화합니다.                                                         | `createBlock`                                                                                                                                   |
 | StarRating    | 1~N점 별점을 선택하는 인터랙티브 레이팅 입력. 읽기 전용 표시도 지원.                                                                                     | `StarRating`                                                                                                                                    |
 | ErrorBoundary | React 에러 바운더리. 자식 컴포넌트 렌더 에러를 잡아 fallback UI를 표시합니다.                                                                            | `ErrorBoundary`                                                                                                                                 |
@@ -200,23 +200,23 @@
 
 ### 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`         |
+| 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영역 페이지 레이아웃 템플릿. AppShell.Sidebar는 모든 viewport에서 기본 표시되며 반응형 숨김/Drawer 전환은 소비자가 제어합니다. | `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
 
@@ -254,7 +254,7 @@
 | StatusSelect       | 색상 인디케이터가 있는 상태 선택 드롭다운.                                                                         | `StatusSelect`       |
 | BranchSelect       | Git 브랜치 선택 드롭다운. Select primitive 래퍼.                                                                   | `BranchSelect`       |
 | FilterBar          | 필터링 바 컴포넌트. 검색, 선택, 다중 선택 필터 지원.                                                               | `FilterBar`          |
-| SavedFilters       | 필터 프리셋 관리. 현재 필터를 저장하고 불러오는 Popover UI.                                                        | `SavedFilters`       |
+| SavedFilters       | 필터 프리셋 관리. 키보드 목록 탐색, 현재 필터 저장, 안전한 삭제 확인 흐름을 제공하는 Popover UI.                   | `SavedFilters`       |
 | QuickActions       | 빠른 작업 패널. 그리드/리스트 레이아웃, 단축키 표시 지원.                                                          | `QuickActions`       |
 | TimeRangeSelector  | 시간 범위 선택기. Popover + DateRangePicker + 프리셋 버튼 조합. 12개 시계열 Surface에서 사용.                      | `TimeRangeSelector`  |
 | ComparisonSelector | 비교 선택기. 고유 레이블이 연결된 Select × 2 + Swap 버튼 조합. CohortComparison, FunnelAnalysis 등에서 사용합니다. | `ComparisonSelector` |
@@ -373,9 +373,11 @@
 
 **Import:** `import { Kbd } from "@reopt-ai/opt-ui"`
 
-| Prop       | Type        | Required | Default | Description          |
-| ---------- | ----------- | -------- | ------- | -------------------- |
-| `children` | `ReactNode` | Yes      |         | 표시할 단축키 텍스트 |
+| Prop        | Type        | Required | Default | Description                                                                     |
+| ----------- | ----------- | -------- | ------- | ------------------------------------------------------------------------------- |
+| `children`  | `ReactNode` | Yes      |         | 표시할 단축키 텍스트                                                            |
+| `hint`      | `boolean`   |          |         | 인라인 힌트 배지로 표시. `data-shortcut-hints="hidden"`일 때 숨겨진다 (app.css) |
+| `className` | `string`    |          |         | 기본 스타일 오버라이드                                                          |
 
 #### Separator
 
@@ -495,6 +497,15 @@
 | `focusWrap` | `boolean`   |          | true    | 행 끝에서 다음 행으로 이동        |
 | `className` | `string`    |          |         | 컨테이너 CSS 클래스               |
 
+**Keyboard Shortcuts:**
+
+| Keys      | Action               |
+| --------- | -------------------- |
+| `↑ ↓ ← →` | 2D 방향 탐색         |
+| `Home`    | 첫 항목으로 이동     |
+| `End`     | 마지막 항목으로 이동 |
+| `Tab`     | 영역 밖으로 이동     |
+
 #### Disclosure
 
 **Import:** `import { DisclosureRoot } from "@reopt-ai/opt-ui"`
@@ -521,32 +532,43 @@
 | `children`  | `ReactNode` | Yes      |         | 접히는 콘텐츠          |
 | `className` | `string`    |          |         | 기본 스타일 오버라이드 |
 
+**Keyboard Shortcuts:**
+
+| Keys            | Action         |
+| --------------- | -------------- |
+| `Enter / Space` | 열기/닫기 토글 |
+
 #### 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` |          |         | 제어 모드: 탭 변경 핸들러 |
+| Prop                | Type                           | Required | Default | Description                                                                            |
+| ------------------- | ------------------------------ | -------- | ------- | -------------------------------------------------------------------------------------- |
+| `variant`           | `"underline" \| "workspace"`   |          |         | 탭 프레임 형태. workspace는 편집기 탭(문서/쿼리처럼 열고 닫히며 상태를 갖는 작업 단위) |
+| `defaultSelectedId` | `string`                       |          |         | 초기 선택된 탭 ID                                                                      |
+| `selectedId`        | `string \| null`               |          |         | 제어 모드: 선택된 탭 ID                                                                |
+| `setSelectedId`     | `(id: string \| null) => void` |          |         | 제어 모드: 탭 변경 핸들러                                                              |
 
 **TabList:**
 
-| Prop        | Type        | Required | Default | Description            |
-| ----------- | ----------- | -------- | ------- | ---------------------- |
-| `children`  | `ReactNode` | Yes      |         | Tab 요소들             |
-| `className` | `string`    |          |         | 기본 스타일 오버라이드 |
+| Prop        | Type        | Required | Default | Description                                                                            |
+| ----------- | ----------- | -------- | ------- | -------------------------------------------------------------------------------------- |
+| `children`  | `ReactNode` | Yes      |         | Tab 요소들                                                                             |
+| `actions`   | `ReactNode` |          |         | 탭 줄 오른쪽 액션 영역 (새 탭, 닫기 등). tablist 바깥에 렌더돼 탭 순회에 끼어들지 않음 |
+| `className` | `string`    |          |         | 기본 스타일 오버라이드                                                                 |
 
 **Tab:**
 
-| Prop        | Type        | Required | Default | Description                          |
-| ----------- | ----------- | -------- | ------- | ------------------------------------ |
-| `id`        | `string`    | Yes      |         | 탭 고유 ID (TabPanel의 tabId와 매칭) |
-| `children`  | `ReactNode` | Yes      |         | 탭 레이블                            |
-| `className` | `string`    |          |         | 기본 스타일 오버라이드               |
+| Prop          | Type                   | Required | Default | Description                                       |
+| ------------- | ---------------------- | -------- | ------- | ------------------------------------------------- |
+| `id`          | `string`               | Yes      |         | 탭 고유 ID (TabPanel의 tabId와 매칭)              |
+| `children`    | `ReactNode`            | Yes      |         | 탭 레이블                                         |
+| `icon`        | `ReactNode`            |          |         | 탭 이름 앞 아이콘. 활성 탭에서 accent 색으로 전환 |
+| `status`      | `"dirty" \| "running"` |          |         | 저장되지 않은 변경 / 실행 중 인디케이터           |
+| `statusLabel` | `string`               |          |         | status 인디케이터의 접근성 레이블                 |
+| `className`   | `string`               |          |         | 기본 스타일 오버라이드                            |
 
 **TabPanel:**
 
@@ -556,6 +578,14 @@
 | `children`  | `ReactNode` | Yes      |         | 패널 콘텐츠            |
 | `className` | `string`    |          |         | 기본 스타일 오버라이드 |
 
+**Keyboard Shortcuts:**
+
+| Keys   | Action              |
+| ------ | ------------------- |
+| `← →`  | 탭 탐색             |
+| `Home` | 첫 번째 탭으로 이동 |
+| `End`  | 마지막 탭으로 이동  |
+
 #### Select
 
 **Import:** `import { SelectRoot } from "@reopt-ai/opt-ui"`
@@ -600,6 +630,15 @@
 | `children`  | `ReactNode` | Yes      |         | 옵션 레이블            |
 | `className` | `string`    |          |         | 기본 스타일 오버라이드 |
 
+**Keyboard Shortcuts:**
+
+| Keys            | Action         |
+| --------------- | -------------- |
+| `↑ ↓`           | 옵션 탐색      |
+| `Enter / Space` | 옵션 선택      |
+| `Esc`           | 팝오버 닫기    |
+| `문자 입력`     | Typeahead 탐색 |
+
 **Examples:**
 
 _기본 선택:_
@@ -687,6 +726,13 @@ import {
 | ---------- | ----------- | -------- | ------- | -------------- |
 | `children` | `ReactNode` | Yes      |         | 액션 버튼 영역 |
 
+**Keyboard Shortcuts:**
+
+| Keys  | Action                           |
+| ----- | -------------------------------- |
+| `Esc` | 다이얼로그 닫기                  |
+| `Tab` | 다이얼로그 내 포커스 이동 (트랩) |
+
 **Examples:**
 
 _모달 대화상자:_
@@ -766,6 +812,14 @@ import {
 | `children`  | `ReactNode` |          | "결과가 없습니다." | 빈 상태 메시지         |
 | `className` | `string`    |          |                    | 기본 스타일 오버라이드 |
 
+**Keyboard Shortcuts:**
+
+| Keys    | Action      |
+| ------- | ----------- |
+| `↑ ↓`   | 항목 탐색   |
+| `Enter` | 항목 선택   |
+| `Esc`   | 팝오버 닫기 |
+
 #### Menu
 
 **Import:** `import { MenubarRoot } from "@reopt-ai/opt-ui"`
@@ -844,6 +898,15 @@ import {
 | ----------- | -------- | -------- | ------- | ---------------------- |
 | `className` | `string` |          |         | 기본 스타일 오버라이드 |
 
+**Keyboard Shortcuts:**
+
+| Keys            | Action         |
+| --------------- | -------------- |
+| `← →`           | 메뉴 간 탐색   |
+| `↑ ↓`           | 메뉴 항목 탐색 |
+| `Enter / Space` | 항목 선택/토글 |
+| `Esc`           | 메뉴 닫기      |
+
 #### Toolbar
 
 **Import:** `import { ToolbarRoot } from "@reopt-ai/opt-ui"`
@@ -894,6 +957,15 @@ import {
 | `children`  | `ReactNode` | Yes      |         | 툴팁 내용              |
 | `className` | `string`    |          |         | 기본 스타일 오버라이드 |
 
+**Keyboard Shortcuts:**
+
+| Keys            | Action                |
+| --------------- | --------------------- |
+| `← →`           | 버튼 간 탐색          |
+| `Enter / Space` | 버튼 활성화           |
+| `Home`          | 첫 번째 버튼으로 이동 |
+| `End`           | 마지막 버튼으로 이동  |
+
 #### Form
 
 **Import:** `import { FormRoot } from "@reopt-ai/opt-ui"`
@@ -1533,6 +1605,14 @@ import {
 | `description` | `string`               |          |         | 레이블 아래 설명 텍스트                                    |
 | `size`        | `"sm" \| "md" \| "lg"` |          | "md"    | 라디오 크기                                                |
 
+**Keyboard Shortcuts:**
+
+| Keys    | Action              |
+| ------- | ------------------- |
+| `↑ ↓`   | 라디오 옵션 간 탐색 |
+| `← →`   | 라디오 옵션 간 탐색 |
+| `Space` | 현재 옵션 선택      |
+
 #### DateRangePicker
 
 **Import:** `import { DateRangePicker } from "@reopt-ai/opt-ui"`
@@ -1569,6 +1649,17 @@ import {
 | `delimiters`      | `(string \| RegExp)[]`     |          | [",", ";", "\n"] | 붙여넣기 시 태그를 분할할 구분자 목록     |
 | `allowDuplicates` | `boolean`                  |          | false            | 중복 태그 허용 여부                       |
 
+**Keyboard Shortcuts:**
+
+| Keys           | Action                                   |
+| -------------- | ---------------------------------------- |
+| `Enter`        | 태그 추가                                |
+| `Backspace`    | 마지막 태그 삭제 (입력 비어있을 때)      |
+| `←/→`          | 태그 간 이동 (Composite roving tabindex) |
+| `Delete`       | 포커스된 태그 삭제                       |
+| `Ctrl+Z`       | 실행취소                                 |
+| `Ctrl+Shift+Z` | 다시실행                                 |
+
 #### ColorPicker
 
 **Import:** `import { ColorPicker } from "@reopt-ai/opt-ui"`
@@ -1630,6 +1721,13 @@ import {
 | `gutter`    | `number` |          | 8       | 트리거와의 간격 (px) |
 | `className` | `string` |          |         | 커스텀 CSS 클래스    |
 
+**Keyboard Shortcuts:**
+
+| Keys            | Action        |
+| --------------- | ------------- |
+| `Esc`           | 팝오버 닫기   |
+| `Enter / Space` | 트리거 활성화 |
+
 #### DropdownMenu
 
 **Import:** `import { DropdownMenu } from "@reopt-ai/opt-ui"`
@@ -1648,6 +1746,14 @@ import {
 | `onClick`  | `() => void`                 |          |           | 항목 클릭 핸들러                                    |
 | `disabled` | `boolean`                    |          |           | 비활성 상태                                         |
 
+**Keyboard Shortcuts:**
+
+| Keys            | Action         |
+| --------------- | -------------- |
+| `↑ ↓`           | 메뉴 항목 탐색 |
+| `Enter / Space` | 항목 선택      |
+| `Esc`           | 메뉴 닫기      |
+
 #### NumberInput
 
 **Import:** `import { NumberInput } from "@reopt-ai/opt-ui"`
@@ -1668,6 +1774,13 @@ import {
 | `disabledReason` | `string`                          |          |         | aria-disabled 상태에서 노출할 비활성 사유        |
 | `labels`         | `NumberInputLabels`               |          |         | 입력/증감/clear/invalid 접근성 문구              |
 
+**Keyboard Shortcuts:**
+
+| Keys | Action              |
+| ---- | ------------------- |
+| `↑`  | 값 증가 (step 단위) |
+| `↓`  | 값 감소 (step 단위) |
+
 #### Slider
 
 **Import:** `import { Slider } from "@reopt-ai/opt-ui"`
@@ -1735,42 +1848,50 @@ import {
 
 **ResizablePanelGroup:**
 
-| Prop         | Type                         | Required | Default | Description                              |
-| ------------ | ---------------------------- | -------- | ------- | ---------------------------------------- |
-| `direction`  | `"horizontal" \| "vertical"` | Yes      |         | 패널 분할 방향                           |
-| `children`   | `ReactNode`                  | Yes      |         | ResizablePanel + ResizableHandle 조합    |
-| `autoSaveId` | `string`                     |          |         | 로컬 스토리지에 크기 상태 저장 (고유 ID) |
-| `className`  | `string`                     |          |         | 커스텀 CSS 클래스                        |
+| Prop              | Type                                       | Required | Default | Description                                         |
+| ----------------- | ------------------------------------------ | -------- | ------- | --------------------------------------------------- |
+| `direction`       | `"horizontal" \| "vertical"`               | Yes      |         | 패널 분할 방향                                      |
+| `children`        | `ReactNode`                                | Yes      |         | ResizablePanel + ResizableHandle 조합               |
+| `id`              | `string`                                   |          |         | 그룹과 defaultLayout의 패널 크기를 식별하는 고유 ID |
+| `defaultLayout`   | `Record<string, number>`                   |          |         | 패널 ID별 초기 비율(0-100)                          |
+| `onLayoutChanged` | `(layout: Record<string, number>) => void` |          |         | 드래그가 끝난 뒤 확정된 레이아웃 콜백               |
+| `groupRef`        | `Ref<ResizablePanelGroupHandle>`           |          |         | 레이아웃 조회·설정을 위한 명령형 그룹 ref           |
+| `autoSaveId`      | `string`                                   |          |         | id의 deprecated 별칭                                |
+| `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 클래스             |
+| Prop          | Type                                                                                       | Required | Default | Description                                        |
+| ------------- | ------------------------------------------------------------------------------------------ | -------- | ------- | -------------------------------------------------- |
+| `defaultSize` | `number \| string`                                                                         |          |         | 초기 크기. 숫자는 퍼센트, 문자열은 명시한 CSS 단위 |
+| `minSize`     | `number \| string`                                                                         |          |         | 최소 크기. 숫자는 퍼센트                           |
+| `maxSize`     | `number \| string`                                                                         |          |         | 최대 크기. 숫자는 퍼센트                           |
+| `collapsible` | `boolean`                                                                                  |          | false   | 최소 크기 이하 시 접히기 허용                      |
+| `onResize`    | `(size: ResizablePanelSize, id?: string \| number, previous?: ResizablePanelSize) => void` |          |         | 패널 크기 변경 콜백                                |
+| `panelRef`    | `Ref<ResizablePanelHandle>`                                                                |          |         | 접기·펼치기·크기 제어를 위한 명령형 패널 ref       |
+| `children`    | `ReactNode`                                                                                | Yes      |         | 패널 콘텐츠                                        |
+| `className`   | `string`                                                                                   |          |         | 커스텀 CSS 클래스                                  |
 
 **ResizableHandle:**
 
-| Prop         | Type      | Required | Default | Description             |
-| ------------ | --------- | -------- | ------- | ----------------------- |
-| `withHandle` | `boolean` |          | false   | 시각적 드래그 핸들 표시 |
-| `className`  | `string`  |          |         | 커스텀 CSS 클래스       |
+| Prop         | Type      | Required | Default | Description                        |
+| ------------ | --------- | -------- | ------- | ---------------------------------- |
+| `withHandle` | `boolean` |          | false   | 시각적 드래그 핸들 표시            |
+| `disabled`   | `boolean` |          |         | 드래그 및 키보드 리사이즈 비활성화 |
+| `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`                                      |          |           | 기본 스타일 오버라이드                                                               |
+| 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로 낮출 수 있음                 |
+| `inset`        | `"section" \| "group" \| "element" \| "none"` |          |           | Block 안쪽 여백. 페이지 콘텐츠 경계에는 section을 사용하고, 이미 여백을 제공하는 Shell 안에서는 생략 |
+| `className`    | `string`                                      |          |           | 기본 스타일 오버라이드                                                                               |
 
 **Examples:**
 
@@ -1779,7 +1900,7 @@ _Block 루트:_
 ```tsx
 import { BlockLayout, PageHeader } from "@reopt-ai/opt-ui";
 
-<BlockLayout loading={isLoading} spacing="section">
+<BlockLayout loading={isLoading} spacing="section" inset="section">
   <PageHeader title="대시보드" description="프로젝트 현황" />
   <section>콘텐츠 영역</section>
 </BlockLayout>;
@@ -1856,6 +1977,13 @@ const MyDashboard = createBlock<MyDashboardProps>(
 | `swipeToDismiss`        | `boolean`                        |          | true    | 가장자리 방향으로 드래그해 닫기 활성화 |
 | `swipeDismissThreshold` | `number`                         |          | 80      | 닫힘 커밋에 필요한 드래그 거리(px)     |
 
+**Keyboard Shortcuts:**
+
+| Keys  | Action                  |
+| ----- | ----------------------- |
+| `Esc` | 드로어 닫기             |
+| `Tab` | 드로어 내부 포커스 이동 |
+
 #### Pagination
 
 **Import:** `import { Pagination } from "@reopt-ai/opt-ui"`
@@ -1909,6 +2037,15 @@ const MyDashboard = createBlock<MyDashboardProps>(
 | `readOnly` | `boolean`                 |          | false   | 읽기 전용 모드   |
 | `size`     | `"sm" \| "md" \| "lg"`    |          | "md"    | 별 아이콘 크기   |
 
+**Keyboard Shortcuts:**
+
+| Keys                    | Action           |
+| ----------------------- | ---------------- |
+| `ArrowRight / ArrowUp`  | 별점 1 증가      |
+| `ArrowLeft / ArrowDown` | 별점 1 감소      |
+| `Home`                  | 별점 1로 설정    |
+| `End`                   | 별점 최대로 설정 |
+
 #### ErrorBoundary
 
 **Import:** `import { ErrorBoundary } from "@reopt-ai/opt-ui"`
@@ -1951,6 +2088,15 @@ const MyDashboard = createBlock<MyDashboardProps>(
 | `keywords` | `string[]`                |          |         | value에 더해 검색어와 비교할 추가 키워드 |
 | `onSelect` | `(value: string) => void` |          |         | Enter/클릭 시 호출                       |
 
+**Keyboard Shortcuts:**
+
+| Keys         | Action           |
+| ------------ | ---------------- |
+| `↑ ↓`        | 활성 항목 이동   |
+| `Home / End` | 처음/마지막 항목 |
+| `Enter`      | 활성 항목 선택   |
+| `Esc`        | dialog 닫기      |
+
 #### ShaderSurface
 
 **Import:** `import { ShaderSurface } from "@reopt-ai/opt-ui"`
@@ -2014,6 +2160,13 @@ const MyDashboard = createBlock<MyDashboardProps>(
 | `stats`   | `StatCard[]` | Yes      |         | 통계 데이터 배열. { id, title, value, change, trend } |
 | `columns` | `number`     |          | 3       | 행당 컬럼 수                                          |
 
+**Keyboard Shortcuts:**
+
+| Keys      | Action             |
+| --------- | ------------------ |
+| `↑ ↓ ← →` | 카드 간 2D 탐색    |
+| `Tab`     | 다음 섹션으로 이동 |
+
 #### SearchCombobox
 
 **Import:** `import { SearchCombobox } from "@reopt-ai/opt-ui"`
@@ -2212,6 +2365,17 @@ const fields = [
 | `bar`      | `(row: T) => number` |          |             | 인라인 프로그레스 바 비율(0-1) 계산 함수. 범위 밖/NaN은 보정 |
 | `barColor` | `string`             |          | "bg-accent" | 인라인 바 색상 클래스                                        |
 
+**Keyboard Shortcuts:**
+
+| Keys                             | Action                             |
+| -------------------------------- | ---------------------------------- |
+| `↑ ↓`                            | 행 탐색                            |
+| `← →`                            | 셀 탐색                            |
+| `Enter / Space`                  | 정렬 가능한 헤더 또는 행 활성화    |
+| `리사이즈 핸들: ← →`             | 컬럼 너비를 10px 단위로 조절       |
+| `리사이즈 핸들: Shift+← Shift+→` | 컬럼 너비를 40px 단위로 조절       |
+| `리사이즈 핸들: Home / End`      | 컬럼 너비를 최솟값/최댓값으로 이동 |
+
 **Examples:**
 
 _기본 테이블:_
@@ -2301,6 +2465,14 @@ import { DataTable } from "@reopt-ai/opt-ui";
 | `onTaskStatusChange` | `(task: TaskDef, completed: boolean) => void` |          |             | 완료 상태 변경 핸들러                                      |
 | `showSubtasks`       | `boolean`                                     |          | false       | 하위 작업 표시 여부                                        |
 
+**Keyboard Shortcuts:**
+
+| Keys    | Action       |
+| ------- | ------------ |
+| `↑ ↓`   | 작업 간 이동 |
+| `Enter` | 작업 선택    |
+| `Space` | 완료 토글    |
+
 #### ActivityFeed
 
 **Import:** `import { ActivityFeed } from "@reopt-ai/opt-ui"`
@@ -2315,6 +2487,13 @@ import { DataTable } from "@reopt-ai/opt-ui";
 | `layout`          | `"list" \| "compact"`                  |          | "list"      | 시간 표시 레이아웃 모드                               |
 | `renderActions`   | `(activity: ActivityDef) => ReactNode` |          |             | 각 활동 항목 우측 액션 슬롯 렌더 함수                 |
 
+**Keyboard Shortcuts:**
+
+| Keys    | Action       |
+| ------- | ------------ |
+| `↑ ↓`   | 활동 간 이동 |
+| `Enter` | 활동 선택    |
+
 #### FilterBar
 
 **Import:** `import { FilterBar } from "@reopt-ai/opt-ui"`
@@ -2357,6 +2536,14 @@ const filters = [
 | `layout`  | `"grid" \| "list"` |          | "grid"      | 레이아웃 모드                                                     |
 | `columns` | `2 \| 3 \| 4`      |          | 3           | 그리드 컬럼 수                                                    |
 
+**Keyboard Shortcuts:**
+
+| Keys      | Action                |
+| --------- | --------------------- |
+| `↑ ↓ ← →` | 그리드에서 4방향 탐색 |
+| `↑ ↓`     | 리스트에서 수직 탐색  |
+| `Enter`   | 작업 실행             |
+
 #### TeamMemberList
 
 **Import:** `import { TeamMemberList } from "@reopt-ai/opt-ui"`
@@ -2370,6 +2557,13 @@ const filters = [
 | `maxDisplay`    | `number`                                |          |         | 최대 표시 인원                                          |
 | `onMemberClick` | `(member: TeamMemberDef) => void`       |          |         | 팀원 클릭 핸들러                                        |
 
+**Keyboard Shortcuts:**
+
+| Keys    | Action       |
+| ------- | ------------ |
+| `↑ ↓`   | 팀원 간 이동 |
+| `Enter` | 팀원 선택    |
+
 #### AuthForm
 
 **Import:** `import { AuthForm } from "@reopt-ai/opt-ui"`
@@ -2419,17 +2613,17 @@ const filters = [
 **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 슬롯 (파일 선택 후 표시) |
+| 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
 
@@ -2441,6 +2635,19 @@ const filters = [
 | `color` | `string`                    |          | theme accent | 사용자 지정 아이콘 색상. 없으면 theme accent 토큰을 사용하고, 전달하면 전경색과 tint 배경에 적용됩니다. |
 | `size`  | `"sm" \| "md" \| "lg"`      |          | "md"         | 아이콘 크기 (sm=20px, md=28px, lg=36px)                                                                 |
 
+#### ConnectionIndicator
+
+**Import:** `import { ConnectionIndicator } from "@reopt-ai/opt-ui"`
+
+| Prop        | Type                                                        | Required | Default | Description                                                           |
+| ----------- | ----------------------------------------------------------- | -------- | ------- | --------------------------------------------------------------------- |
+| `status`    | `"connected" \| "connecting" \| "disconnected" \| "error"`  |          |         | 연결 상태 프리셋. tone과 pulse의 기본값을 정함                        |
+| `tone`      | `"neutral" \| "success" \| "warning" \| "danger" \| "info"` |          |         | status로 표현되지 않는 도메인 상태의 색을 직접 지정 (status보다 우선) |
+| `label`     | `string`                                                    |          |         | 상태 문구                                                             |
+| `showLabel` | `boolean`                                                   |          |         | 문구 표시 여부                                                        |
+| `pulse`     | `boolean`                                                   |          |         | 점 애니메이션. 생략하면 status 프리셋을 따름                          |
+| `className` | `string`                                                    |          |         | 기본 스타일 오버라이드                                                |
+
 #### TemplatePicker
 
 **Import:** `import { TemplatePicker } from "@reopt-ai/opt-ui"`
@@ -2466,6 +2673,13 @@ const filters = [
 | `onFailureClick` | `(failure: FailureItem) => void`      |          |             | 실패 항목 클릭 핸들러                                                |
 | `renderActions`  | `(failure: FailureItem) => ReactNode` |          |             | 각 항목 우측 액션 슬롯 렌더 함수                                     |
 
+**Keyboard Shortcuts:**
+
+| Keys    | Action            |
+| ------- | ----------------- |
+| `↑ ↓`   | 실패 항목 간 이동 |
+| `Enter` | 실패 항목 선택    |
+
 #### KeyValueEditor
 
 **Import:** `import { KeyValueEditor } from "@reopt-ai/opt-ui"`
@@ -2482,6 +2696,12 @@ const filters = [
 | `renderActions`    | `(entry: KeyValueEntry, index: number) => ReactNode`             |          |         | 항목별 커스텀 액션 슬롯           |
 | `validateKey`      | `(key: string, entries: KeyValueEntry[]) => string \| undefined` |          |         | 키 유효성 검사 함수               |
 
+**Keyboard Shortcuts:**
+
+| Keys  | Action             |
+| ----- | ------------------ |
+| `Tab` | 키/값 필드 간 이동 |
+
 #### WorkflowCanvas
 
 **Import:** `import { WorkflowCanvas } from "@reopt-ai/opt-ui"`
@@ -2494,6 +2714,13 @@ const filters = [
 | `onStepMove`   | `(stepId: string, row: number, col: number) => void` |          |         | 화살표 키 이동 핸들러                       |
 | `onSelectStep` | `(step: WorkflowCanvasStep) => void`                 |          |         | 스텝 선택 핸들러                            |
 
+**Keyboard Shortcuts:**
+
+| Keys      | Action                              |
+| --------- | ----------------------------------- |
+| `↑ ↓ ← →` | 선택 스텝 이동 (onStepMove 제공 시) |
+| `Enter`   | 스텝 선택                           |
+
 #### CodeSnippetViewer
 
 **Import:** `import { CodeSnippetViewer } from "@reopt-ai/opt-ui"`
@@ -2522,6 +2749,30 @@ const filters = [
 | `error`   | `string`                         |          |         | assertive 오류 상태     |
 | `labels`  | `QueryResultsTableLabels`        |          |         | 로딩/빈 상태/행 수 문구 |
 
+#### SqlEditor
+
+**Import:** `import { SqlEditor } from "@reopt-ai/opt-ui"`
+**Dependencies:** button (core)
+
+| Prop                | Type                          | Required | Default | Description                                                                      |
+| ------------------- | ----------------------------- | -------- | ------- | -------------------------------------------------------------------------------- |
+| `value`             | `string`                      | Yes      |         | 편집 중인 SQL                                                                    |
+| `onChange`          | `(sql: string) => void`       | Yes      |         | 본문 변경 핸들러                                                                 |
+| `onRun`             | `(sql: string) => void`       |          |         | Mod+Enter 실행 핸들러                                                            |
+| `onRunAndAdvance`   | `(sql: string) => void`       |          |         | Shift+Enter — 실행 후 다음 셀/탭으로 이동                                        |
+| `schema`            | `SqlEditorSchema`             |          |         | 테이블/컬럼 자동완성 스키마. 변경 시 에디터를 다시 만들지 않고 자동완성만 재구성 |
+| `completionSources` | `SqlEditorCompletionSource[]` |          |         | 스키마 자동완성에 더할 완성 소스 (함수 시그니처, 스니펫)                         |
+| `keymap`            | `SqlEditorKeyBinding[]`       |          |         | 추가 키 바인딩. 내장 실행 바인딩보다 먼저 평가                                   |
+| `extensions`        | `SqlEditorExtension[]`        |          |         | 임의의 CodeMirror 확장. 내장 확장 뒤에 붙어 우선권을 가짐                        |
+| `height`            | `number \| "fill"`            |          |         | px 고정 높이. fill이면 부모가 정한 높이를 채움                                   |
+| `placeholder`       | `string`                      |          |         | 빈 편집기 안내 문구                                                              |
+| `readOnly`          | `boolean`                     |          |         | 편집 잠금                                                                        |
+| `ariaLabel`         | `string`                      |          |         | 편집 영역 접근성 레이블                                                          |
+| `autoFocus`         | `boolean`                     |          |         | 마운트 시 포커스                                                                 |
+| `showFooter`        | `boolean`                     |          |         | 실행 힌트/버튼 표시. 기본값은 onRun이 있을 때 표시                               |
+| `labels`            | `SqlEditorLabels`             |          |         | 문구 오버라이드                                                                  |
+| `className`         | `string`                      |          |         | 기본 스타일 오버라이드                                                           |
+
 #### ReportBuilder
 
 **Import:** `import { ReportBuilder } from "@reopt-ai/opt-ui"`
@@ -2668,6 +2919,14 @@ const filters = [
 | `badge`     | `ReactNode`  |          |         | 우측 배지 (숫자/텍스트). 접힌 상태에서 아이콘 위 dot으로 축소 |
 | `className` | `string`     |          |         | 커스텀 CSS 클래스                                             |
 
+**Keyboard Shortcuts:**
+
+| Keys         | Action                                |
+| ------------ | ------------------------------------- |
+| `Ctrl+[`     | 사이드바 접기/펼치기 토글             |
+| `↑ ↓`        | 사이드바 항목 간 이동                 |
+| `Home / End` | 첫 번째/마지막 사이드바 항목으로 이동 |
+
 #### AppShell
 
 **Import:** `import { AppShell } from "@reopt-ai/opt-ui"`
@@ -2876,16 +3135,40 @@ import { AppShell } from "@reopt-ai/opt-ui";
 #### 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 클래스    |
+**Dependencies:** popover (core), input (core), button (core)
+
+**SavedFilters:**
+
+| 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      |         | 프리셋 삭제 콜백                                   |
+| `labels`         | `SavedFiltersLabels`                                       |          |         | 트리거, 빈 상태, 저장 및 삭제 확인 문구 오버라이드 |
+| `className`      | `string`                                                   |          |         | 커스텀 CSS 클래스                                  |
+
+**SavedFiltersLabels:**
+
+| Prop                 | Type                        | Required | Default            | Description                             |
+| -------------------- | --------------------------- | -------- | ------------------ | --------------------------------------- |
+| `triggerLabel`       | `(count: number) => string` |          |                    | 저장된 프리셋 수를 포함한 트리거 레이블 |
+| `emptyMessage`       | `string`                    |          | "No saved filters" | 프리셋이 없을 때 표시할 메시지          |
+| `deleteLabel`        | `(name: string) => string`  |          |                    | 프리셋 삭제 버튼의 접근 가능한 이름     |
+| `namePlaceholder`    | `string`                    |          | "Filter name…"     | 새 프리셋 이름 입력 안내                |
+| `saveLabel`          | `string`                    |          | "Save"             | 새 프리셋 저장 버튼 레이블              |
+| `confirmDeleteLabel` | `string`                    |          | "Confirm"          | 삭제 확인 버튼 레이블                   |
+| `cancelDeleteLabel`  | `string`                    |          | "Cancel"           | 삭제 취소 버튼 레이블                   |
+
+**Keyboard Shortcuts:**
+
+| Keys         | Action                                      |
+| ------------ | ------------------------------------------- |
+| `↑ ↓`        | 저장된 프리셋 간 이동                       |
+| `Home / End` | 첫 번째/마지막 프리셋으로 이동              |
+| `Enter`      | 프리셋 불러오기 또는 새 프리셋 저장         |
+| `Escape`     | 삭제 확인 취소 후 삭제 버튼으로 포커스 복귀 |
 
 #### NotificationCenter
 
@@ -2954,6 +3237,13 @@ import { AppShell } from "@reopt-ai/opt-ui";
 | `showHint`     | `boolean`                   |          | true    | Shift+Enter 힌트 표시 여부 |
 | `labels`       | `ChatInputLabels`           |          |         | i18n 라벨 오버라이드       |
 
+**Keyboard Shortcuts:**
+
+| Keys            | Action      |
+| --------------- | ----------- |
+| `Enter`         | 메시지 전송 |
+| `Shift + Enter` | 줄바꿈      |
+
 **Examples:**
 
 _채팅 입력:_