@reopt-ai/opt-ui 1.4.1 → 1.5.0

package/dist/docs/02-components/01-core.md

@@ -117,6 +117,13 @@ const store = useFormStore({ defaultValues: { name: "" } });
 | `disabledReason` | `string`                          |          |         | aria-disabled 상태에서 노출할 비활성 사유        |
 | `labels`         | `NumberInputLabels`               |          |         | 입력/증감/clear/invalid 접근성 문구              |
 
+**Keyboard Shortcuts:**
+
+| Keys | Action              |
+| ---- | ------------------- |
+| `↑`  | 값 증가 (step 단위) |
+| `↓`  | 값 감소 (step 단위) |
+
 ### Checkbox
 
 > 독립적인 체크박스 컴포넌트. 레이블, 설명, 그룹과 DOM property까지 동기화되는 indeterminate 상태를 지원합니다.
@@ -172,6 +179,14 @@ const store = useFormStore({ defaultValues: { name: "" } });
 | `description` | `string`               |          |         | 레이블 아래 설명 텍스트                                    |
 | `size`        | `"sm" \| "md" \| "lg"` |          | "md"    | 라디오 크기                                                |
 
+**Keyboard Shortcuts:**
+
+| Keys    | Action              |
+| ------- | ------------------- |
+| `↑ ↓`   | 라디오 옵션 간 탐색 |
+| `← →`   | 라디오 옵션 간 탐색 |
+| `Space` | 현재 옵션 선택      |
+
 ### Switch
 
 > 토글 스위치 컴포넌트. 3가지 크기와 레이블/설명의 명시적 접근성 연결을 지원합니다.
@@ -234,6 +249,15 @@ const store = useFormStore({ defaultValues: { name: "" } });
 | `children`  | `ReactNode` | Yes      |         | 옵션 레이블            |
 | `className` | `string`    |          |         | 기본 스타일 오버라이드 |
 
+**Keyboard Shortcuts:**
+
+| Keys            | Action         |
+| --------------- | -------------- |
+| `↑ ↓`           | 옵션 탐색      |
+| `Enter / Space` | 옵션 선택      |
+| `Esc`           | 팝오버 닫기    |
+| `문자 입력`     | Typeahead 탐색 |
+
 **Examples:**
 
 _기본 선택:_
@@ -316,6 +340,14 @@ import {
 | `children`  | `ReactNode` |          | "결과가 없습니다." | 빈 상태 메시지         |
 | `className` | `string`    |          |                    | 기본 스타일 오버라이드 |
 
+**Keyboard Shortcuts:**
+
+| Keys    | Action      |
+| ------- | ----------- |
+| `↑ ↓`   | 항목 탐색   |
+| `Enter` | 항목 선택   |
+| `Esc`   | 팝오버 닫기 |
+
 ### DateRangePicker
 
 > 날짜 범위 선택 컴포넌트. 프리셋, 달력 UI, 포커스 관리와 RTL 방향 탐색 아이콘을 지원합니다.
@@ -356,6 +388,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
 
 > 색상 선택 컴포넌트. 프리셋 팔레트와 hex 입력을 지원합니다.
@@ -1092,6 +1135,15 @@ import {
 | ----------- | -------- | -------- | ------- | ---------------------- |
 | `className` | `string` |          |         | 기본 스타일 오버라이드 |
 
+**Keyboard Shortcuts:**
+
+| Keys            | Action         |
+| --------------- | -------------- |
+| `← →`           | 메뉴 간 탐색   |
+| `↑ ↓`           | 메뉴 항목 탐색 |
+| `Enter / Space` | 항목 선택/토글 |
+| `Esc`           | 메뉴 닫기      |
+
 ### DropdownMenu
 
 > Menu Core 위의 간편 래퍼. 단일 트리거 드롭다운 메뉴에 특화되었습니다.
@@ -1112,6 +1164,14 @@ import {
 | `onClick`  | `() => void`                 |          |           | 항목 클릭 핸들러                                    |
 | `disabled` | `boolean`                    |          |           | 비활성 상태                                         |
 
+**Keyboard Shortcuts:**
+
+| Keys            | Action         |
+| --------------- | -------------- |
+| `↑ ↓`           | 메뉴 항목 탐색 |
+| `Enter / Space` | 항목 선택      |
+| `Esc`           | 메뉴 닫기      |
+
 ### Popover
 
 > Popover 프리미티브 래퍼. 트리거 요소에 연결된 플로팅 콘텐츠를 표시합니다.
@@ -1123,6 +1183,13 @@ import {
 | `gutter`    | `number` |          | 8       | 트리거와의 간격 (px) |
 | `className` | `string` |          |         | 커스텀 CSS 클래스    |
 
+**Keyboard Shortcuts:**
+
+| Keys            | Action        |
+| --------------- | ------------- |
+| `Esc`           | 팝오버 닫기   |
+| `Enter / Space` | 트리거 활성화 |
+
 ### Tabs
 
 > 탭 패널 시스템. 4-part anatomy: Root, TabList, Tab, TabPanel.
@@ -1160,6 +1227,14 @@ import {
 | `children`  | `ReactNode` | Yes      |         | 패널 콘텐츠            |
 | `className` | `string`    |          |         | 기본 스타일 오버라이드 |
 
+**Keyboard Shortcuts:**
+
+| Keys   | Action              |
+| ------ | ------------------- |
+| `← →`  | 탭 탐색             |
+| `Home` | 첫 번째 탭으로 이동 |
+| `End`  | 마지막 탭으로 이동  |
+
 ### Disclosure
 
 > 접기/펼치기 콘텐츠 영역. 3-part anatomy: Root, Trigger, Content.
@@ -1188,6 +1263,12 @@ import {
 | `children`  | `ReactNode` | Yes      |         | 접히는 콘텐츠          |
 | `className` | `string`    |          |         | 기본 스타일 오버라이드 |
 
+**Keyboard Shortcuts:**
+
+| Keys            | Action         |
+| --------------- | -------------- |
+| `Enter / Space` | 열기/닫기 토글 |
+
 ### Dialog
 
 > 모달 다이얼로그. 9-part anatomy: Root, Disclosure, Panel, Heading, Description, Dismiss, Header, Body, Footer.
@@ -1253,6 +1334,13 @@ import {
 | ---------- | ----------- | -------- | ------- | -------------- |
 | `children` | `ReactNode` | Yes      |         | 액션 버튼 영역 |
 
+**Keyboard Shortcuts:**
+
+| Keys  | Action                           |
+| ----- | -------------------------------- |
+| `Esc` | 다이얼로그 닫기                  |
+| `Tab` | 다이얼로그 내 포커스 이동 (트랩) |
+
 **Examples:**
 
 _모달 대화상자:_
@@ -1298,6 +1386,13 @@ import {
 | `swipeToDismiss`        | `boolean`                        |          | true    | 가장자리 방향으로 드래그해 닫기 활성화 |
 | `swipeDismissThreshold` | `number`                         |          | 80      | 닫힘 커밋에 필요한 드래그 거리(px)     |
 
+**Keyboard Shortcuts:**
+
+| Keys  | Action                  |
+| ----- | ----------------------- |
+| `Esc` | 드로어 닫기             |
+| `Tab` | 드로어 내부 포커스 이동 |
+
 ### Toolbar
 
 > 툴바 컨테이너 + 툴팁. 7 exports: ToolbarRoot, ToolbarContainer, ToolbarButton, ToolbarSeparator, TooltipProvider, TooltipAnchor, Tooltip.
@@ -1350,6 +1445,15 @@ import {
 | `children`  | `ReactNode` | Yes      |         | 툴팁 내용              |
 | `className` | `string`    |          |         | 기본 스타일 오버라이드 |
 
+**Keyboard Shortcuts:**
+
+| Keys            | Action                |
+| --------------- | --------------------- |
+| `← →`           | 버튼 간 탐색          |
+| `Enter / Space` | 버튼 활성화           |
+| `Home`          | 첫 번째 버튼으로 이동 |
+| `End`           | 마지막 버튼으로 이동  |
+
 ### Pagination
 
 > 페이지 넘김 네비게이션. ellipsis 포함 페이지 번호, compact/count variant, totalPages/cursor pagination, Prev/Next 버튼을 제공합니다.
@@ -1397,6 +1501,15 @@ import {
 | `focusWrap` | `boolean`   |          | true    | 행 끝에서 다음 행으로 이동        |
 | `className` | `string`    |          |         | 컨테이너 CSS 클래스               |
 
+**Keyboard Shortcuts:**
+
+| Keys      | Action               |
+| --------- | -------------------- |
+| `↑ ↓ ← →` | 2D 방향 탐색         |
+| `Home`    | 첫 항목으로 이동     |
+| `End`     | 마지막 항목으로 이동 |
+| `Tab`     | 영역 밖으로 이동     |
+
 ### PageHeader
 
 > 페이지 제목, 설명, 액션 슬롯을 제공하는 레이아웃 헤더 컴포넌트.
@@ -1456,30 +1569,37 @@ 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 클래스                  |
 
 ### VirtualList
 
@@ -1775,6 +1895,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
 
 > React 에러 바운더리. 자식 컴포넌트 렌더 에러를 잡아 fallback UI를 표시합니다.
@@ -1821,6 +1950,15 @@ const MyDashboard = createBlock<MyDashboardProps>(
 | `keywords` | `string[]`                |          |         | value에 더해 검색어와 비교할 추가 키워드 |
 | `onSelect` | `(value: string) => void` |          |         | Enter/클릭 시 호출                       |
 
+**Keyboard Shortcuts:**
+
+| Keys         | Action           |
+| ------------ | ---------------- |
+| `↑ ↓`        | 활성 항목 이동   |
+| `Home / End` | 처음/마지막 항목 |
+| `Enter`      | 활성 항목 선택   |
+| `Esc`        | dialog 닫기      |
+
 ### ShaderSurface
 
 > ogl 기반 애니메이션 WebGL 셰이더 배경. 럭셔리 프리셋(메탈릭/실크/유리 등) + 색·파라미터로 배경·카드 배경을 만든다. 정지 프레임·PNG 캡처·WebGL 폴백 지원.

package/dist/docs/02-components/03-shells.md

@@ -9,23 +9,23 @@ generated: true
 
 ## 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`         |
 
 ### AppMenubar
 
@@ -106,9 +106,17 @@ generated: true
 | `badge`     | `ReactNode`  |          |         | 우측 배지 (숫자/텍스트). 접힌 상태에서 아이콘 위 dot으로 축소 |
 | `className` | `string`     |          |         | 커스텀 CSS 클래스                                             |
 
+**Keyboard Shortcuts:**
+
+| Keys         | Action                                |
+| ------------ | ------------------------------------- |
+| `Ctrl+[`     | 사이드바 접기/펼치기 토글             |
+| `↑ ↓`        | 사이드바 항목 간 이동                 |
+| `Home / End` | 첫 번째/마지막 사이드바 항목으로 이동 |
+
 ### AppShell
 
-> Header + Sidebar + Content + Footer 4영역 페이지 레이아웃 템플릿. Sidebar 컴포넌트와 조합.
+> Header + Sidebar + Content + Footer 4영역 페이지 레이아웃 템플릿. AppShell.Sidebar는 모든 viewport에서 기본 표시되며 반응형 숨김/Drawer 전환은 소비자가 제어합니다.
 
 **Import:** `import { AppShell } from "@reopt-ai/opt-ui"`
 **Dependencies:** sidebar (shells), page-header (core)
@@ -298,6 +306,17 @@ import { AppShell } from "@reopt-ai/opt-ui";
 | `bar`      | `(row: T) => number` |          |             | 인라인 프로그레스 바 비율(0-1) 계산 함수. 범위 밖/NaN은 보정 |
 | `barColor` | `string`             |          | "bg-accent" | 인라인 바 색상 클래스                                        |
 
+**Keyboard Shortcuts:**
+
+| Keys                             | Action                             |
+| -------------------------------- | ---------------------------------- |
+| `↑ ↓`                            | 행 탐색                            |
+| `← →`                            | 셀 탐색                            |
+| `Enter / Space`                  | 정렬 가능한 헤더 또는 행 활성화    |
+| `리사이즈 핸들: ← →`             | 컬럼 너비를 10px 단위로 조절       |
+| `리사이즈 핸들: Shift+← Shift+→` | 컬럼 너비를 40px 단위로 조절       |
+| `리사이즈 핸들: Home / End`      | 컬럼 너비를 최솟값/최댓값으로 이동 |
+
 **Examples:**
 
 _기본 테이블:_
@@ -401,6 +420,13 @@ import { DataTable } from "@reopt-ai/opt-ui";
 | `stats`   | `StatCard[]` | Yes      |         | 통계 데이터 배열. { id, title, value, change, trend } |
 | `columns` | `number`     |          | 3       | 행당 컬럼 수                                          |
 
+**Keyboard Shortcuts:**
+
+| Keys      | Action             |
+| --------- | ------------------ |
+| `↑ ↓ ← →` | 카드 간 2D 탐색    |
+| `Tab`     | 다음 섹션으로 이동 |
+
 ### SummaryRow
 
 > 통계 요약 행. StatCard 그리드 레이아웃을 표준화합니다. loading 시 SkeletonCard 표시.
@@ -495,6 +521,14 @@ import { DataTable } from "@reopt-ai/opt-ui";
 | `onTaskStatusChange` | `(task: TaskDef, completed: boolean) => void` |          |             | 완료 상태 변경 핸들러                                      |
 | `showSubtasks`       | `boolean`                                     |          | false       | 하위 작업 표시 여부                                        |
 
+**Keyboard Shortcuts:**
+
+| Keys    | Action       |
+| ------- | ------------ |
+| `↑ ↓`   | 작업 간 이동 |
+| `Enter` | 작업 선택    |
+| `Space` | 완료 토글    |
+
 ### ActivityFeed
 
 > 활동 피드/로그 컴포넌트. 타임라인 스타일, 상대 시간 표시.
@@ -511,6 +545,13 @@ import { DataTable } from "@reopt-ai/opt-ui";
 | `layout`          | `"list" \| "compact"`                  |          | "list"      | 시간 표시 레이아웃 모드                               |
 | `renderActions`   | `(activity: ActivityDef) => ReactNode` |          |             | 각 활동 항목 우측 액션 슬롯 렌더 함수                 |
 
+**Keyboard Shortcuts:**
+
+| Keys    | Action       |
+| ------- | ------------ |
+| `↑ ↓`   | 활동 간 이동 |
+| `Enter` | 활동 선택    |
+
 ### TeamMemberList
 
 > 팀원 목록 컴포넌트. 온라인 상태, 다양한 레이아웃(list, compact, avatars-only) 지원.
@@ -526,6 +567,13 @@ import { DataTable } from "@reopt-ai/opt-ui";
 | `maxDisplay`    | `number`                                |          |         | 최대 표시 인원                                          |
 | `onMemberClick` | `(member: TeamMemberDef) => void`       |          |         | 팀원 클릭 핸들러                                        |
 
+**Keyboard Shortcuts:**
+
+| Keys    | Action       |
+| ------- | ------------ |
+| `↑ ↓`   | 팀원 간 이동 |
+| `Enter` | 팀원 선택    |
+
 ### KanbanBoard
 
 > 칸반 보드. HTML5 DnD로 카드를 컬럼 간 드래그&드롭.
@@ -579,7 +627,7 @@ import { DataTable } from "@reopt-ai/opt-ui";
 | 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` |
@@ -697,19 +745,43 @@ const filters = [
 
 ### SavedFilters
 
-> 필터 프리셋 관리. 현재 필터를 저장하고 불러오는 Popover UI.
+> 필터 프리셋 관리. 키보드 목록 탐색, 현재 필터 저장, 안전한 삭제 확인 흐름을 제공하는 Popover UI.
 
 **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`     | 삭제 확인 취소 후 삭제 버튼으로 포커스 복귀 |
 
 ### QuickActions
 
@@ -725,6 +797,14 @@ const filters = [
 | `layout`  | `"grid" \| "list"` |          | "grid"      | 레이아웃 모드                                                     |
 | `columns` | `2 \| 3 \| 4`      |          | 3           | 그리드 컬럼 수                                                    |
 
+**Keyboard Shortcuts:**
+
+| Keys      | Action                |
+| --------- | --------------------- |
+| `↑ ↓ ← →` | 그리드에서 4방향 탐색 |
+| `↑ ↓`     | 리스트에서 수직 탐색  |
+| `Enter`   | 작업 실행             |
+
 ### TimeRangeSelector
 
 > 시간 범위 선택기. Popover + DateRangePicker + 프리셋 버튼 조합. 12개 시계열 Surface에서 사용.
@@ -1206,6 +1286,13 @@ const fields = [
 | `onStepMove`   | `(stepId: string, row: number, col: number) => void` |          |         | 화살표 키 이동 핸들러                       |
 | `onSelectStep` | `(step: WorkflowCanvasStep) => void`                 |          |         | 스텝 선택 핸들러                            |
 
+**Keyboard Shortcuts:**
+
+| Keys      | Action                              |
+| --------- | ----------------------------------- |
+| `↑ ↓ ← →` | 선택 스텝 이동 (onStepMove 제공 시) |
+| `Enter`   | 스텝 선택                           |
+
 ## Other
 
 | Component       | Description                                                                | Key Exports       |
@@ -1249,6 +1336,13 @@ const fields = [
 | `onFailureClick` | `(failure: FailureItem) => void`      |          |             | 실패 항목 클릭 핸들러                                                |
 | `renderActions`  | `(failure: FailureItem) => ReactNode` |          |             | 각 항목 우측 액션 슬롯 렌더 함수                                     |
 
+**Keyboard Shortcuts:**
+
+| Keys    | Action            |
+| ------- | ----------------- |
+| `↑ ↓`   | 실패 항목 간 이동 |
+| `Enter` | 실패 항목 선택    |
+
 ### KeyValueEditor
 
 > 키-값 쌍 편집기. 동적 행 추가/삭제, 비밀값 토글, 유효성 검사를 지원합니다.
@@ -1267,6 +1361,12 @@ const fields = [
 | `renderActions`    | `(entry: KeyValueEntry, index: number) => ReactNode`             |          |         | 항목별 커스텀 액션 슬롯           |
 | `validateKey`      | `(key: string, entries: KeyValueEntry[]) => string \| undefined` |          |         | 키 유효성 검사 함수               |
 
+**Keyboard Shortcuts:**
+
+| Keys  | Action             |
+| ----- | ------------------ |
+| `Tab` | 키/값 필드 간 이동 |
+
 ### AuditTimeline
 
 > 변경 이력 타임라인. 액션별 색상 코딩 + 확장 가능한 diff 뷰.
@@ -1315,6 +1415,13 @@ const fields = [
 | `showHint`     | `boolean`                   |          | true    | Shift+Enter 힌트 표시 여부 |
 | `labels`       | `ChatInputLabels`           |          |         | i18n 라벨 오버라이드       |
 
+**Keyboard Shortcuts:**
+
+| Keys            | Action      |
+| --------------- | ----------- |
+| `Enter`         | 메시지 전송 |
+| `Shift + Enter` | 줄바꿈      |
+
 **Examples:**
 
 _채팅 입력:_

package/dist/docs/03-recipes/03-layouts.md

@@ -18,6 +18,10 @@ All imports from `@reopt-ai/opt-ui`.
 
 Full application chrome: header, collapsible sidebar, main content area.
 
+`AppShell.Sidebar` stays mounted and visible at every viewport size. Apply a
+responsive `className` such as `hidden xl:block`, or replace it with a mobile
+drawer, when the product should hide navigation on smaller screens.
+
 ```tsx
 "use client";
 

package/dist/docs/04-theming.md

@@ -186,7 +186,9 @@ Dark mode uses the `[data-theme="preset-dark"]` selector. The compound theme sys
 
 /* Dark mode */
 [data-theme="default-dark"] {
-  --opt-surface: hsl(204 4% 16%);
+  --opt-surface: hsl(204 5% 7%);
+  --opt-surface-raised: hsl(204 5% 9%);
+  --opt-surface-overlay: hsl(204 5% 12%);
   --opt-text: hsl(0 0% 82%);
 }
 ```

package/dist/id-registry.cjs

@@ -1043,19 +1043,19 @@ var ID_REGISTRY = Object.freeze({
     layer: "shells",
     metaName: "ReportBuilder"
   },
-  "7QWEQ": {
+  "6Z22W": {
     slug: "resizable",
     exportName: "ResizableHandle",
     layer: "core",
     metaName: "Resizable"
   },
-  QRQV9: {
+  "88X4V": {
     slug: "resizable",
     exportName: "ResizablePanel",
     layer: "core",
     metaName: "Resizable"
   },
-  MW6TZ: {
+  BM5RR: {
     slug: "resizable",
     exportName: "ResizablePanelGroup",
     layer: "core",
@@ -1067,7 +1067,7 @@ var ID_REGISTRY = Object.freeze({
     layer: "shells",
     metaName: "RichTextEditor"
   },
-  DAB08: {
+  SPRCB: {
     slug: "saved-filters",
     exportName: "SavedFilters",
     layer: "shells",
@@ -1570,11 +1570,11 @@ var SLUG_TO_ID = Object.freeze({
   "radio-group.Radio": "HY7YG",
   "radio-group.RadioGroup": "2F20H",
   "report-builder.ReportBuilder": "K9STD",
-  "resizable.ResizableHandle": "7QWEQ",
-  "resizable.ResizablePanel": "QRQV9",
-  "resizable.ResizablePanelGroup": "MW6TZ",
+  "resizable.ResizableHandle": "6Z22W",
+  "resizable.ResizablePanel": "88X4V",
+  "resizable.ResizablePanelGroup": "BM5RR",
   "rich-text-editor.RichTextEditor": "441JQ",
-  "saved-filters.SavedFilters": "DAB08",
+  "saved-filters.SavedFilters": "SPRCB",
   "scroll-area.ScrollArea": "A9X4K",
   "search-combobox.SearchCombobox": "KH4TQ",
   "section.Section": "M3QXW",