@reopt-ai/opt-ui 1.5.0 → 1.6.0

package/dist/core/index.js

@@ -1,324 +1,4 @@
 "use client";
-import {
-  AccordionContent,
-  AccordionItem,
-  AccordionRoot,
-  AccordionTrigger,
-  Avatar,
-  AvatarGroup,
-  BlockLayout,
-  Breadcrumb,
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-  CircularProgress,
-  ConditionBuilder,
-  Container,
-  DrawerClose,
-  DrawerPanel,
-  DrawerRoot,
-  DropdownContent,
-  DropdownItem,
-  DropdownMenu,
-  DropdownSeparator,
-  DropdownTrigger,
-  Heading,
-  Input,
-  Logo,
-  Meter,
-  OtpField,
-  PageHeader,
-  Progress,
-  Radio,
-  RadioGroup,
-  ResizableHandle,
-  ResizablePanel,
-  ResizablePanelGroup,
-  SHADER_OVERLAY_PARAM_KEYS,
-  SHADER_PARAM_FALLBACK,
-  SHADER_PARAM_KEYS,
-  SHADER_PRESETS,
-  SHADER_PRESET_IDS,
-  ScrollArea,
-  Section,
-  Separator,
-  ShaderSurface,
-  Skeleton,
-  SkeletonAvatar,
-  SkeletonCard,
-  SkeletonTable,
-  SkeletonText,
-  StepBuilder,
-  Switch,
-  Text,
-  Textarea,
-  Toggle,
-  ToggleGroup,
-  VirtualList,
-  createBlock,
-  getShaderFragment,
-  getShaderPreset
-} from "../chunk-VBGPEW45.js";
-import {
-  Alert,
-  AlertDialogPanel,
-  Badge,
-  Button,
-  Checkbox,
-  CheckboxGroup,
-  ColorPicker,
-  ComboboxEmpty,
-  ComboboxGroup,
-  ComboboxGroupLabel,
-  ComboboxInput,
-  ComboboxItem,
-  ComboboxPopover,
-  ComboboxRoot,
-  Composite,
-  CompositeItem,
-  CompositeProvider,
-  CompositeRow,
-  CompositeZone,
-  DEFAULT_PRESETS,
-  DateRangePicker,
-  DialogBody,
-  DialogDescription,
-  DialogDisclosure,
-  DialogDismiss,
-  DialogFooter,
-  DialogHeader,
-  DialogHeading,
-  DialogPanel,
-  DialogRoot,
-  DisclosureContent,
-  DisclosureRoot,
-  DisclosureTrigger,
-  EmptyState,
-  FormCheckbox,
-  FormControl,
-  FormDescription,
-  FormError,
-  FormField,
-  FormGroup,
-  FormGroupLabel,
-  FormInput,
-  FormLabel,
-  FormProvider,
-  FormPush,
-  FormRadio,
-  FormRadioGroup,
-  FormRemove,
-  FormReset,
-  FormRoot,
-  FormSelect,
-  FormSelectItem,
-  FormSelectPopover,
-  FormSubmit,
-  FormSwitch,
-  FormTextarea,
-  IconPicker,
-  Kbd,
-  MenuButtonArrow,
-  MenuItem,
-  MenuItemCheckbox,
-  MenuItemRadio,
-  MenuPopover,
-  MenuRoot,
-  MenuSeparator,
-  MenuTrigger,
-  MenubarContainer,
-  MenubarRoot,
-  NumberInput,
-  Pagination,
-  PopoverClose,
-  PopoverContent,
-  PopoverRoot,
-  PopoverTrigger,
-  SelectItem,
-  SelectLabel,
-  SelectPopover,
-  SelectRoot,
-  SelectTrigger,
-  Slider,
-  Spinner,
-  StatCard,
-  Tab,
-  TabList,
-  TabPanel,
-  TabsRoot,
-  TagInput,
-  ToolbarButton,
-  ToolbarContainer,
-  ToolbarRoot,
-  ToolbarSeparator,
-  Tooltip,
-  TooltipAnchor,
-  TooltipProvider,
-  useFormContext,
-  useFormStore
-} from "../chunk-RBM2RNC2.js";
-import "../chunk-3GWWZKX7.js";
-export {
-  AccordionContent,
-  AccordionItem,
-  AccordionRoot,
-  AccordionTrigger,
-  Alert,
-  AlertDialogPanel,
-  Avatar,
-  AvatarGroup,
-  Badge,
-  BlockLayout,
-  Breadcrumb,
-  Button,
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-  Checkbox,
-  CheckboxGroup,
-  CircularProgress,
-  ColorPicker,
-  ComboboxEmpty,
-  ComboboxGroup,
-  ComboboxGroupLabel,
-  ComboboxInput,
-  ComboboxItem,
-  ComboboxPopover,
-  ComboboxRoot,
-  Composite,
-  CompositeItem,
-  CompositeProvider,
-  CompositeRow,
-  CompositeZone,
-  ConditionBuilder,
-  Container,
-  DEFAULT_PRESETS,
-  DateRangePicker,
-  DialogBody,
-  DialogDescription,
-  DialogDisclosure,
-  DialogDismiss,
-  DialogFooter,
-  DialogHeader,
-  DialogHeading,
-  DialogPanel,
-  DialogRoot,
-  DisclosureContent,
-  DisclosureRoot,
-  DisclosureTrigger,
-  DrawerClose,
-  DrawerPanel,
-  DrawerRoot,
-  DropdownContent,
-  DropdownItem,
-  DropdownMenu,
-  DropdownSeparator,
-  DropdownTrigger,
-  EmptyState,
-  FormCheckbox,
-  FormControl,
-  FormDescription,
-  FormError,
-  FormField,
-  FormGroup,
-  FormGroupLabel,
-  FormInput,
-  FormLabel,
-  FormProvider,
-  FormPush,
-  FormRadio,
-  FormRadioGroup,
-  FormRemove,
-  FormReset,
-  FormRoot,
-  FormSelect,
-  FormSelectItem,
-  FormSelectPopover,
-  FormSubmit,
-  FormSwitch,
-  FormTextarea,
-  Heading,
-  IconPicker,
-  Input,
-  Kbd,
-  Logo,
-  MenuButtonArrow,
-  MenuItem,
-  MenuItemCheckbox,
-  MenuItemRadio,
-  MenuPopover,
-  MenuRoot,
-  MenuSeparator,
-  MenuTrigger,
-  MenubarContainer,
-  MenubarRoot,
-  Meter,
-  NumberInput,
-  OtpField,
-  PageHeader,
-  Pagination,
-  PopoverClose,
-  PopoverContent,
-  PopoverRoot,
-  PopoverTrigger,
-  Progress,
-  Radio,
-  RadioGroup,
-  ResizableHandle,
-  ResizablePanel,
-  ResizablePanelGroup,
-  SHADER_OVERLAY_PARAM_KEYS,
-  SHADER_PARAM_FALLBACK,
-  SHADER_PARAM_KEYS,
-  SHADER_PRESETS,
-  SHADER_PRESET_IDS,
-  ScrollArea,
-  Section,
-  SelectItem,
-  SelectLabel,
-  SelectPopover,
-  SelectRoot,
-  SelectTrigger,
-  Separator,
-  ShaderSurface,
-  Skeleton,
-  SkeletonAvatar,
-  SkeletonCard,
-  SkeletonTable,
-  SkeletonText,
-  Slider,
-  Spinner,
-  StatCard,
-  StepBuilder,
-  BlockLayout as SurfaceLayout,
-  Switch,
-  Tab,
-  TabList,
-  TabPanel,
-  TabsRoot,
-  TagInput,
-  Text,
-  Textarea,
-  Toggle,
-  ToggleGroup,
-  ToolbarButton,
-  ToolbarContainer,
-  ToolbarRoot,
-  ToolbarSeparator,
-  Tooltip,
-  TooltipAnchor,
-  TooltipProvider,
-  VirtualList,
-  createBlock,
-  createBlock as createSurface,
-  getShaderFragment,
-  getShaderPreset,
-  useFormContext,
-  useFormStore
-};
+import { $ as TooltipAnchor, A as FormSwitch, At as SelectPopover, Bt as Composite, C as FormRoot, Ct as DialogFooter, Dt as DialogRoot, E as FormSelectPopover, Et as DialogPanel, F as useFormStore, Ft as TabPanel, G as PopoverTrigger, H as PopoverClose, Hn as Kbd, Ht as CompositeProvider, I as DEFAULT_PRESETS, It as TabsRoot, J as ToolbarButton, Jt as Spinner, K as Slider, L as DateRangePicker, Lt as DisclosureContent, M as FormTextarea, Mt as SelectTrigger, Nt as Tab, Ot as SelectItem, P as useFormContext, Pt as TabList, Q as Tooltip, R as TagInput, Rt as DisclosureRoot, S as FormReset, St as DialogDismiss, T as FormSelectItem, Tt as DialogHeading, U as PopoverContent, Ut as CompositeRow, V as ColorPicker, Vt as CompositeItem, W as PopoverRoot, Wt as CompositeZone, X as ToolbarRoot, Xt as EmptyState, Y as ToolbarContainer, Yt as Badge, Z as ToolbarSeparator, Zt as Button, _ as FormProvider, _t as ComboboxRoot, at as MenuPopover, b as FormRadioGroup, bt as DialogDescription, c as FormDescription, ct as MenuTrigger, d as FormGroup, dt as ComboboxEmpty, et as TooltipProvider, f as FormGroupLabel, ft as ComboboxGroup, gt as ComboboxPopover, h as FormLabel, ht as ComboboxItem, i as FormCheckbox, it as MenuItemRadio, jt as SelectRoot, k as FormSubmit, kt as SelectLabel, l as FormError, lt as MenubarContainer, m as FormInput, mt as ComboboxInput, n as Checkbox, nt as MenuItem, o as FormControl, ot as MenuRoot, pt as ComboboxGroupLabel, q as NumberInput, qt as Alert, r as CheckboxGroup, rt as MenuItemCheckbox, st as MenuSeparator, t as Pagination, tn as StatCard, tt as MenuButtonArrow, u as FormField, ut as MenubarRoot, v as FormPush, vt as AlertDialogPanel, w as FormSelect, wt as DialogHeader, x as FormRemove, xt as DialogDisclosure, y as FormRadio, yt as DialogBody, z as IconPicker, zt as DisclosureTrigger } from "../pagination-By7Ozv3U.js";
+import { $ as CardFooter, A as DropdownTrigger, B as Avatar, D as DropdownItem, E as DropdownContent, G as SkeletonCard, H as Textarea, I as StepBuilder, J as Switch, K as SkeletonTable, L as Meter, O as DropdownMenu, Q as CardDescription, R as CircularProgress, S as BlockLayout, T as RadioGroup, U as Skeleton, V as AvatarGroup, W as SkeletonAvatar, X as Card, Y as Input, Z as CardContent, _ as Section, a as SHADER_PRESETS, at as AccordionRoot, b as PageHeader, c as getShaderPreset, ct as ToggleGroup, d as DrawerPanel, dt as Heading, et as CardHeader, f as DrawerRoot, ft as Text, g as ResizablePanelGroup, h as ResizablePanel, i as SHADER_PARAM_KEYS, it as AccordionItem, j as ConditionBuilder, k as DropdownSeparator, l as VirtualList, lt as OtpField, m as ResizableHandle, n as SHADER_OVERLAY_PARAM_KEYS, nt as Breadcrumb, o as SHADER_PRESET_IDS, ot as AccordionTrigger, p as Logo, q as SkeletonText, r as SHADER_PARAM_FALLBACK, rt as AccordionContent, s as getShaderFragment, st as Toggle, t as ShaderSurface, tt as CardTitle, u as DrawerClose, ut as Separator, v as Container, w as Radio, x as createBlock, y as ScrollArea, z as Progress } from "../shader-surface-BWhO2xkk.js";
+export { AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger, Alert, AlertDialogPanel, Avatar, AvatarGroup, Badge, BlockLayout, BlockLayout as SurfaceLayout, Breadcrumb, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxGroup, CircularProgress, ColorPicker, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxPopover, ComboboxRoot, Composite, CompositeItem, CompositeProvider, CompositeRow, CompositeZone, ConditionBuilder, Container, DEFAULT_PRESETS, DateRangePicker, DialogBody, DialogDescription, DialogDisclosure, DialogDismiss, DialogFooter, DialogHeader, DialogHeading, DialogPanel, DialogRoot, DisclosureContent, DisclosureRoot, DisclosureTrigger, DrawerClose, DrawerPanel, DrawerRoot, DropdownContent, DropdownItem, DropdownMenu, DropdownSeparator, DropdownTrigger, EmptyState, FormCheckbox, FormControl, FormDescription, FormError, FormField, FormGroup, FormGroupLabel, FormInput, FormLabel, FormProvider, FormPush, FormRadio, FormRadioGroup, FormRemove, FormReset, FormRoot, FormSelect, FormSelectItem, FormSelectPopover, FormSubmit, FormSwitch, FormTextarea, Heading, IconPicker, Input, Kbd, Logo, MenuButtonArrow, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuRoot, MenuSeparator, MenuTrigger, MenubarContainer, MenubarRoot, Meter, NumberInput, OtpField, PageHeader, Pagination, PopoverClose, PopoverContent, PopoverRoot, PopoverTrigger, Progress, Radio, RadioGroup, ResizableHandle, ResizablePanel, ResizablePanelGroup, SHADER_OVERLAY_PARAM_KEYS, SHADER_PARAM_FALLBACK, SHADER_PARAM_KEYS, SHADER_PRESETS, SHADER_PRESET_IDS, ScrollArea, Section, SelectItem, SelectLabel, SelectPopover, SelectRoot, SelectTrigger, Separator, ShaderSurface, Skeleton, SkeletonAvatar, SkeletonCard, SkeletonTable, SkeletonText, Slider, Spinner, StatCard, StepBuilder, Switch, Tab, TabList, TabPanel, TabsRoot, TagInput, Text, Textarea, Toggle, ToggleGroup, ToolbarButton, ToolbarContainer, ToolbarRoot, ToolbarSeparator, Tooltip, TooltipAnchor, TooltipProvider, VirtualList, createBlock, createBlock as createSurface, getShaderFragment, getShaderPreset, useFormContext, useFormStore };

package/dist/docs/01-getting-started.md

@@ -17,14 +17,34 @@ related:
 - React 19+
 - Tailwind CSS v4
 
-## 1. Install
+## 1. Agent skill setup (recommended)
+
+Run from the consumer project root:
+
+```bash
+npx skills add reopt-ai/reopt-skills/opt-ui-install
+```
+
+Then ask your agent:
+
+```text
+Use the opt-ui-install skill to set up @reopt-ai/opt-ui in this project and verify the result.
+```
+
+The skill auto-detects install versus upgrade, idempotently updates the reopt
+marker block in `AGENTS.md` (or `CLAUDE.md`), follows the docs shipped in this
+`dist/docs/` directory, wires Tailwind v4 and `OptThemeProvider`, and runs
+`opt doctor`. Source:
+[`reopt-ai/reopt-skills`](https://github.com/reopt-ai/reopt-skills/tree/main/skills/opt-ui-install).
+
+## 2. Manual install
 
 ```bash
 bun add @reopt-ai/opt-ui @reopt-ai/opt-ui-primitives
 bun add -d tailwindcss @tailwindcss/postcss postcss
 ```
 
-## 2. Global CSS
+## 3. Global CSS
 
 ### `app/globals.css` (Next.js App Router)
 
@@ -47,7 +67,7 @@ bun add -d tailwindcss @tailwindcss/postcss postcss
 > `@source` 경로는 CSS 파일 위치 기준 상대 경로입니다.
 > `@reopt-ai/opt-ui/tailwind.css`에 테마 프리셋, dark variant, 토큰 매핑, 기본값이 포함되어 있습니다.
 
-## 3. PostCSS
+## 4. PostCSS
 
 `postcss.config.mjs`:
 
@@ -59,7 +79,7 @@ export default {
 };
 ```
 
-## 4. Root Layout (Next.js App Router)
+## 5. Root Layout (Next.js App Router)
 
 ```tsx
 import { OptThemeProvider } from "@reopt-ai/opt-ui";
@@ -80,7 +100,7 @@ export default function RootLayout({
 }
 ```
 
-## 5. Optional: next.config.ts
+## 6. Optional: next.config.ts
 
 Next.js에서 ESM 또는 패키지 트랜스파일 이슈가 발생하면 추가합니다:
 

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

@@ -1,7 +1,7 @@
 ---
 title: "Core Components"
 description: "59 Core layer components — props, examples, keyboard shortcuts."
-version: "1.4.1"
+version: "1.6.0"
 generated: true
 ---
 
@@ -745,9 +745,11 @@ const store = useFormStore({
 
 **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`    |          |         | 기본 스타일 오버라이드                                                          |
 
 ### Button
 
@@ -1198,26 +1200,31 @@ import {
 
 **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:**
 
@@ -1664,7 +1671,7 @@ import {
 | 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`                                                                                                                                 |
@@ -1818,17 +1825,18 @@ import {
 
 ### BlockLayout
 
-> Block 루트 레이아웃. flex + 기본 section spacing 적용, loading prop으로 LoadingOverlay 자동 래핑.
+> Block 루트 레이아웃. 자식 간 section spacing과 선택적 시맨틱 inset을 제공하고 loading prop으로 LoadingOverlay를 자동 래핑합니다.
 
 **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:**
 
@@ -1837,7 +1845,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>;

package/dist/docs/02-components/02-visuals.md

@@ -1,7 +1,7 @@
 ---
 title: "Visual Components"
 description: "0 Visual layer components — props, examples, keyboard shortcuts."
-version: "1.4.1"
+version: "1.6.0"
 generated: true
 ---
 

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

@@ -1,7 +1,7 @@
 ---
 title: "Shell Components"
 description: "75 Shell layer components — props, examples, keyboard shortcuts."
-version: "1.4.1"
+version: "1.6.0"
 generated: true
 ---
 
@@ -483,6 +483,15 @@ import { DataTable } from "@reopt-ai/opt-ui";
 
 **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`                                                    |          |         | 기본 스타일 오버라이드                                                |
+
 ### EventIcon
 
 > 이벤트 아이콘. semantic key 또는 ReactNode 아이콘과 배경색을 표시합니다.
@@ -944,17 +953,17 @@ const fields = [
 **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 슬롯 (파일 선택 후 표시) |
 
 ### WizardForm
 
@@ -1099,6 +1108,25 @@ const fields = [
 **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`                      |          |         | 기본 스타일 오버라이드                                                           |
+
 ### EventMetaEditor
 
 > 이벤트 메타 에디터. 레이블이 연결된 IconPicker + ColorPicker + TagInput 조합으로 이벤트 메타데이터를 편집합니다.

package/dist/docs/02-components/04-surfaces.md

@@ -1,7 +1,7 @@
 ---
 title: "Surface Components"
 description: "0 Surface layer components — props, examples, keyboard shortcuts."
-version: "1.4.1"
+version: "1.6.0"
 generated: true
 ---
 

package/dist/docs/02-components/index.md

@@ -1,7 +1,7 @@
 ---
 title: "Component Reference"
 description: "Complete reference for 134 @reopt-ai/opt-ui components across 4 layers."
-version: "1.4.1"
+version: "1.6.0"
 generated: true
 ---