@reopt-ai/opt-ui 1.12.0 → 1.12.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/COMPONENT_CATALOG.md +138 -66
  2. package/README.md +6 -1
  3. package/dist/core/index.cjs +2 -2
  4. package/dist/core/index.js +2 -2
  5. package/dist/docs/02-components/01-core.md +41 -38
  6. package/dist/docs/02-components/02-visuals.md +1 -1
  7. package/dist/docs/02-components/03-shells.md +92 -33
  8. package/dist/docs/02-components/04-surfaces.md +1 -1
  9. package/dist/docs/02-components/index.md +1 -1
  10. package/dist/{field-sidebar-BuO37l4c.js → field-sidebar-BXAXigMS.js} +2 -2
  11. package/dist/{field-sidebar-BYgEmdy0.cjs → field-sidebar-D0ITbhfJ.cjs} +2 -2
  12. package/dist/index.cjs +29 -10
  13. package/dist/index.d.cts +10 -5
  14. package/dist/index.d.ts +10 -5
  15. package/dist/index.js +29 -10
  16. package/dist/{key-pad-menu-SItoHPLu.cjs → key-pad-menu-1YN221Oi.cjs} +1 -1
  17. package/dist/{key-pad-menu-Di2aRGbM.js → key-pad-menu-CUiQ-vKw.js} +1 -1
  18. package/dist/meta.cjs +218 -11
  19. package/dist/meta.js +218 -11
  20. package/dist/query.cjs +19 -6
  21. package/dist/query.js +19 -6
  22. package/dist/shells/index.cjs +1 -1
  23. package/dist/shells/index.js +1 -1
  24. package/dist/tailwind.css +7 -0
  25. package/dist/{text-truncate-DSuZECy0.js → text-truncate-BFWd2cE_.js} +116 -116
  26. package/dist/{text-truncate-I1XLWmRa.cjs → text-truncate-DsG5UAOY.cjs} +115 -115
  27. package/package.json +1 -1
package/COMPONENT_CATALOG.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  <!-- DEPRECATED: Prefer dist/docs/02-components/ for per-layer reference. -->
4
4
  <!-- Auto-generated from ComponentMeta. Do not edit. -->
5
- <!-- Version: 1.12.0 -->
5
+ <!-- Version: 1.12.1 -->
6
6
 
7
7
  ## Quick Stats
8
8
 
@@ -175,36 +175,36 @@
175
175
 
176
176
  ### Other
177
177
 
178
- | Component | Description | Key Exports |
179
- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
180
- | FieldToken | 필드 타입을 글리프 하나로 표현하는 토큰. 문자열·숫자·날짜·IP·지오 등 분석 스키마 타입마다 고정된 아이콘과 팔레트 슬롯을 부여해 필드 목록·컬럼 헤더·속성 테이블 전역에서 같은 어휘를 쓴다. | `FieldToken`, `FIELD_TYPE_TOKENS`, `resolveFieldType` |
181
- | Facet | 필드 값 분포를 카운트와 점유율 막대로 보여주고 그 행 자체가 필터가 되는 패싯. 긴 꼬리는 접어 두고 상위 값부터 읽힌다. | `Facet`, `FacetGroup` |
182
- | Expression | 조건을 폼이 아니라 문장으로 쓰고 그 자리에서 편집하는 표현식 절. 알림 규칙·세그먼트 필터처럼 읽어서 검증해야 하는 조건에 쓴다. | `Expression`, `ExpressionGroup` |
183
- | TextTruncate | 실제 폰트로 실제 가용 폭을 측정해 문자열의 식별력이 가장 낮은 부분을 잘라내는 생략. CSS가 못 하는 앞·중간·양끝 생략을 지원하고 전체 문자열은 접근성 트리에 남는다. | `TextTruncate` |
184
- | Highlight | 검색어에 해당하는 구간을 <mark>로 표시. 긴 항목 우선 매칭이라 겹치는 검색어도 조각나지 않는다. | `Highlight` |
185
- | LiveRegion | 라이브 뷰의 변화를 스크린 리더에 읽어 주는 영역. 스로틀로 폭주를 요약하고 두 노드를 번갈아 써서 같은 문구도 다시 읽힌다. | `LiveRegion` |
186
- | ColorPalette | 시각화 색 팔레트를 그 팔레트의 모습 그대로 보여 주고 고르게 하는 컴포넌트. 범주형은 블록, 순차·발산형은 그라디언트로 그려 데이터 종류를 그림이 말한다. | `ColorPaletteDisplay`, `ColorPalettePicker`, `THEME_PALETTES` |
187
- | InlineEdit | 대시보드 제목·지표 이름처럼 읽히는 횟수가 훨씬 많은 값을 그 자리에서 고치는 편집. Enter 확정, Escape 되돌리기, 거절된 저장은 입력을 유지한다. | `InlineEdit` |
188
- | KeyPadMenu | 이름보다 그림으로 알아보기 쉬운 선택지를 타일로 고르는 메뉴. 내부는 실제 radio·checkbox라 키보드와 스크린 리더가 그대로 동작한다. | `KeyPadMenu` |
189
- | Text | 본문, 레이블, 보조 설명, 코드에 일관된 의미 기반 타이포그래피를 적용합니다. | `Text` |
190
- | Heading | 문서의 의미 계층과 시각적 타이포그래피 계층을 독립적으로 제어합니다. | `Heading` |
191
- | Separator | 콘텐츠를 구분하는 가로/세로 디바이더. 라벨을 넣으면 가운데 정렬 구분선이 된다. | `Separator` |
192
- | OtpField | 일회용 코드(OTP)/PIN 입력. 셀 단위 입력, 붙여넣기 분배, 자동 포커스 이동, 백스페이스 네비게이션과 폼 이름/오류 연결을 지원합니다. | `OtpField` |
193
- | Toggle | 눌림(pressed) 두 상태 버튼. 단독 사용하거나 ToggleGroup으로 묶어 단일/다중 선택을 만든다. | `Toggle`, `ToggleGroup` |
194
- | Accordion | 수직으로 쌓인 펼침/접힘 패널. single(한 개)/multiple(여러 개) 모드와 collapsible 지원. | `AccordionRoot`, `AccordionItem`, `AccordionTrigger`, `AccordionContent` |
195
- | Meter | 범위 내 스칼라 측정값 게이지 (디스크 사용량·점수·용량 등). role=meter로 작업 진행률(Progress)과 구분된다. | `Meter` |
196
- | DescriptionList | 한 대상의 라벨 있는 사실들을 시맨틱 <dl>로 표시한다. 상세 패널의 필드 나열을 표준화하고 식별자 복사를 제공한다. | `DescriptionList` |
197
- | Identity | 사람(또는 익명 디바이스)을 목록 셀 한 칸으로 표현한다. 이름→이메일→ID 폴백과 익명 표식을 한 곳에서 처리한다. | `Identity` |
198
- | BlockLayout | Block 루트 레이아웃. 자식 간 section spacing과 선택적 시맨틱 inset을 제공하고 loading prop으로 LoadingOverlay를 자동 래핑합니다. | `BlockLayout` |
199
- | createBlock | Block 팩토리 함수. BlockLayout 래핑을 구조적으로 강제하여 loading/className 처리를 자동화합니다. | `createBlock` |
200
- | StarRating | 1~N점 별점을 선택하는 인터랙티브 레이팅 입력. 읽기 전용 표시도 지원. | `StarRating` |
201
- | ErrorBoundary | React 에러 바운더리. 자식 컴포넌트 렌더 에러를 잡아 fallback UI를 표시합니다. | `ErrorBoundary` |
202
- | Command | cmdk 스타일 명령 anatomy. 자동 필터링 + 키보드 내비게이션. 인라인 또는 CommandDialog로 사용. | `Command`, `CommandDialog`, `CommandInput`, `CommandList`, `CommandEmpty`, `CommandGroup`, `CommandItem`, `CommandSeparator`, `CommandShortcut` |
203
- | ShaderSurface | ogl 기반 애니메이션 WebGL 셰이더 배경. 럭셔리 프리셋(메탈릭/실크/유리 등) + 색·파라미터로 배경·카드 배경을 만든다. 정지 프레임·PNG 캡처·WebGL 폴백 지원. | `ShaderSurface` |
204
- | Callout | 페이지에 머무는 인페이지 고지. Alert와 달리 dismiss가 없고, 조건이 참인 동안 레이아웃의 일부로 남습니다. | `Callout` |
205
- | StatusDot | 점 + 텍스트로 상태를 표현합니다. 라벨이 필수라 색만으로 상태를 말할 수 없습니다. | `StatusDot` |
206
- | CopyButton | 값을 클립보드에 올리고 성공 여부를 알립니다. 클립보드 거부를 삼키지 않습니다. | `CopyButton` |
207
- | SegmentedControl | 선택지를 모두 보여주는 단일 선택 컨트롤. radio-group 프리미티브 위에 올려 화살표 키가 동작합니다. | `SegmentedControl` |
178
+ | Component | Description | Key Exports |
179
+ | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------- |
180
+ | FieldToken | 필드 타입을 일관된 글리프와 선택적 텍스트 레이블로 표현합니다. 문자열·숫자·날짜·IP·지오 등 분석 스키마 타입마다 같은 아이콘과 팔레트 슬롯을 씁니다. | `FieldToken`, `FIELD_TYPE_TOKENS`, `resolveFieldType` |
181
+ | Facet | 필드 값 분포를 카운트와 점유율 막대로 보여주고 그 행 자체가 필터가 되는 패싯. 긴 꼬리는 접어 두고 상위 값부터 읽힌다. | `Facet`, `FacetGroup` |
182
+ | Expression | 조건을 폼이 아니라 문장으로 쓰고 그 자리에서 편집하는 표현식 절. 알림 규칙·세그먼트 필터처럼 읽어서 검증해야 하는 조건에 쓴다. | `Expression`, `ExpressionGroup` |
183
+ | TextTruncate | 실제 폰트로 실제 가용 폭을 측정해 문자열의 식별력이 가장 낮은 부분을 잘라내는 생략. CSS가 못 하는 앞·중간·양끝 생략을 지원하고 전체 문자열은 접근성 트리에 남는다. | `TextTruncate` |
184
+ | Highlight | 검색어에 해당하는 구간을 <mark>로 표시. 긴 항목 우선 매칭이라 겹치는 검색어도 조각나지 않는다. | `Highlight` |
185
+ | LiveRegion | 라이브 뷰의 변화를 스크린 리더에 읽어 주는 영역. 스로틀로 폭주를 요약하고 두 노드를 번갈아 써서 같은 문구도 다시 읽힌다. | `LiveRegion` |
186
+ | ColorPalette | 시각화 색 팔레트를 그 팔레트의 모습 그대로 보여 주고 고르게 하는 컴포넌트. 범주형은 블록, 순차·발산형은 그라디언트로 그려 데이터 종류를 그림이 말한다. | `ColorPaletteDisplay`, `ColorPalettePicker`, `THEME_PALETTES` |
187
+ | InlineEdit | 대시보드 제목·지표 이름처럼 읽히는 횟수가 훨씬 많은 값을 그 자리에서 고치는 편집. Enter 확정, Escape 되돌리기, 거절된 저장은 입력을 유지한다. | `InlineEdit` |
188
+ | KeyPadMenu | 이름보다 그림으로 알아보기 쉬운 선택지를 타일로 고르는 메뉴. 내부는 실제 radio·checkbox라 키보드와 스크린 리더가 그대로 동작한다. | `KeyPadMenu` |
189
+ | Text | 본문, 레이블, 보조 설명, 코드에 일관된 의미 기반 타이포그래피를 적용합니다. | `Text` |
190
+ | Heading | 문서의 의미 계층과 시각적 타이포그래피 계층을 독립적으로 제어합니다. | `Heading` |
191
+ | Separator | 콘텐츠를 구분하는 가로/세로 디바이더. 라벨을 넣으면 가운데 정렬 구분선이 된다. | `Separator` |
192
+ | OtpField | 일회용 코드(OTP)/PIN 입력. 셀 단위 입력, 붙여넣기 분배, 자동 포커스 이동, 백스페이스 네비게이션과 폼 이름/오류 연결을 지원합니다. | `OtpField` |
193
+ | Toggle | 눌림(pressed) 두 상태 버튼. 단독 사용하거나 ToggleGroup으로 묶어 단일/다중 선택을 만든다. | `Toggle`, `ToggleGroup` |
194
+ | Accordion | 수직으로 쌓인 펼침/접힘 패널. single(한 개)/multiple(여러 개) 모드와 collapsible 지원. | `AccordionRoot`, `AccordionItem`, `AccordionTrigger`, `AccordionContent` |
195
+ | Meter | 범위 내 스칼라 측정값 게이지 (디스크 사용량·점수·용량 등). role=meter로 작업 진행률(Progress)과 구분된다. | `Meter` |
196
+ | DescriptionList | 한 대상의 라벨 있는 사실들을 시맨틱 <dl>로 표시한다. 상세 패널의 필드 나열을 표준화하고 식별자 복사를 제공한다. | `DescriptionList` |
197
+ | Identity | 사람(또는 익명 디바이스)을 목록 셀 한 칸으로 표현한다. 이름→이메일→ID 폴백과 익명 표식을 한 곳에서 처리한다. | `Identity` |
198
+ | BlockLayout | Block 루트 레이아웃. 자식 간 section spacing과 선택적 시맨틱 inset을 제공하고 loading prop으로 LoadingOverlay를 자동 래핑합니다. | `BlockLayout` |
199
+ | createBlock | Block 팩토리 함수. BlockLayout 래핑을 구조적으로 강제하여 loading/className 처리를 자동화합니다. | `createBlock` |
200
+ | StarRating | 1~N점 별점을 선택하는 인터랙티브 레이팅 입력. 읽기 전용 표시도 지원. | `StarRating` |
201
+ | ErrorBoundary | React 에러 바운더리. 자식 컴포넌트 렌더 에러를 잡아 fallback UI를 표시합니다. | `ErrorBoundary` |
202
+ | Command | cmdk 스타일 명령 anatomy. 자동 필터링 + 키보드 내비게이션. 인라인 또는 CommandDialog로 사용. | `Command`, `CommandDialog`, `CommandInput`, `CommandList`, `CommandEmpty`, `CommandGroup`, `CommandItem`, `CommandSeparator`, `CommandShortcut` |
203
+ | ShaderSurface | ogl 기반 애니메이션 WebGL 셰이더 배경. 럭셔리 프리셋(메탈릭/실크/유리 등) + 색·파라미터로 배경·카드 배경을 만든다. 정지 프레임·PNG 캡처·WebGL 폴백 지원. | `ShaderSurface` |
204
+ | Callout | 페이지에 머무는 인페이지 고지. Alert와 달리 dismiss가 없고, 조건이 참인 동안 레이아웃의 일부로 남습니다. | `Callout` |
205
+ | StatusDot | 점 + 텍스트로 상태를 표현합니다. 라벨이 필수라 색만으로 상태를 말할 수 없습니다. | `StatusDot` |
206
+ | CopyButton | 값을 클립보드에 올리고 성공 여부를 알립니다. 클립보드 거부를 삼키지 않습니다. | `CopyButton` |
207
+ | SegmentedControl | 선택지를 모두 보여주는 단일 선택 컨트롤. radio-group 프리미티브 위에 올려 화살표 키가 동작합니다. | `SegmentedControl` |
208
208
 
209
209
  ## Visual Components (0)
210
210
 
@@ -235,19 +235,19 @@
235
235
 
236
236
  ### Data Display
237
237
 
238
- | Component | Description | Key Exports |
239
- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- |
240
- | DataTable | 제네릭 데이터 테이블. 동적 컬럼, 결측값 안전 정렬, 키보드 컬럼 리사이즈, 보정된 인라인 진행률과 Composite 탐색을 지원합니다. | `DataTable` |
241
- | InlineEditTable | 인라인 편집 테이블. 더블클릭으로 셀 편집, Enter 확정, Escape 취소. | `InlineEditTable` |
242
- | TreeTable | 계층형 트리 테이블. 재귀 행 렌더링 + 펼침/접기 셰브론. | `TreeTable` |
243
- | DomainTable | 도메인 테이블. Composite 기반 그리드로 키보드 탐색 지원. | `DomainTable` |
244
- | QueryResultsTable | 쿼리 결과 테이블. SQL 결과와 스크린 리더에 안내되는 로딩, 에러, 빈 상태를 지원합니다. | `QueryResultsTable` |
245
- | DashboardGrid | Composite 기반 통계 카드 그리드. 유효한 1–4열 레이아웃과 화살표 키 2D 탐색을 지원합니다. | `DashboardGrid` |
246
- | SummaryRow | 통계 요약 행. StatCard 그리드 레이아웃을 표준화합니다. loading 시 SkeletonCard 표시. | `SummaryRow` |
247
- | CodeSnippetViewer | 코드 스니펫 뷰어. 줄 번호, 복사 버튼, 포커스 가능한 스크롤 영역, syntaxTheme 톤을 지원합니다. | `CodeSnippetViewer` |
248
- | CodeDiffViewer | 코드 비교 뷰어. LCS 알고리즘 기반 unified/split 모드 diff와 포커스 가능한 스크롤 영역을 제공합니다. | `CodeDiffViewer` |
249
- | ConnectionIndicator | 연결 상태 표시기. connected, connecting, disconnected, error 상태를 지원합니다. | `ConnectionIndicator` |
250
- | EventIcon | 이벤트 아이콘. semantic key 또는 ReactNode 아이콘과 배경색을 표시합니다. | `EventIcon`, `POPULAR_ICONS`, `COLOR_PRESETS` |
238
+ | Component | Description | Key Exports |
239
+ | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- |
240
+ | DataTable | 제네릭 데이터 테이블. 제목은 opt-in이고 ariaLabel로 grid를 이름 붙이며, 동적 컬럼·안전 정렬·키보드 리사이즈·Composite 탐색을 지원합니다. | `DataTable` |
241
+ | InlineEditTable | 인라인 편집 테이블. 더블클릭으로 셀 편집, Enter 확정, Escape 취소. | `InlineEditTable` |
242
+ | TreeTable | 계층형 트리 테이블. 재귀 행 렌더링 + 펼침/접기 셰브론. | `TreeTable` |
243
+ | DomainTable | 도메인 테이블. Composite 기반 그리드로 키보드 탐색 지원. | `DomainTable` |
244
+ | QueryResultsTable | 쿼리 결과 테이블. SQL 결과와 스크린 리더에 안내되는 로딩, 에러, 빈 상태를 지원합니다. | `QueryResultsTable` |
245
+ | DashboardGrid | Composite 기반 통계 카드 그리드. 유효한 1–4열 레이아웃과 화살표 키 2D 탐색을 지원합니다. | `DashboardGrid` |
246
+ | SummaryRow | 통계 요약 행. StatCard 그리드 레이아웃을 표준화합니다. loading 시 SkeletonCard 표시. | `SummaryRow` |
247
+ | CodeSnippetViewer | 코드 스니펫 뷰어. 줄 번호, 복사 버튼, 포커스 가능한 스크롤 영역, syntaxTheme 톤을 지원합니다. | `CodeSnippetViewer` |
248
+ | CodeDiffViewer | 코드 비교 뷰어. LCS 알고리즘 기반 unified/split 모드 diff와 포커스 가능한 스크롤 영역을 제공합니다. | `CodeDiffViewer` |
249
+ | ConnectionIndicator | 연결 상태 표시기. connected, connecting, disconnected, error 상태를 지원합니다. | `ConnectionIndicator` |
250
+ | EventIcon | 이벤트 아이콘. semantic key 또는 ReactNode 아이콘과 배경색을 표시합니다. | `EventIcon`, `POPULAR_ICONS`, `COLOR_PRESETS` |
251
251
 
252
252
  ### Lists & Feeds
253
253
 
@@ -300,14 +300,14 @@
300
300
 
301
301
  ### Analytics
302
302
 
303
- | Component | Description | Key Exports |
304
- | ---------------- | ---------------------------------------------------------------------------------------------------------------- | ------------------ |
305
- | SqlEditor | SQL 에디터. CodeMirror 기반의 SQL 편집기로 구문 강조와 자동 완성을 지원합니다. | `SqlEditor` |
306
- | EventMetaEditor | 이벤트 메타 에디터. 레이블이 연결된 IconPicker + ColorPicker + TagInput 조합으로 이벤트 메타데이터를 편집합니다. | `EventMetaEditor` |
307
- | PropertyExplorer | 프로퍼티 탐색기. 검색 가능한 속성 목록을 그룹별로 표시합니다. | `PropertyExplorer` |
308
- | RichTextEditor | 마크다운 리치 텍스트 에디터. 서식 툴바 + textarea 조합. | `RichTextEditor` |
309
- | ExportButton | 데이터 내보내기 버튼. CSV/JSON 변환 내장, PDF는 콜백 위임. DropdownMenu 기반. | `ExportButton` |
310
- | InsightsPanel | 이상 탐지 인사이트 패널. severity별 카드, 통계 필터, dismiss 기능, 검출 설정(유형/Z-score/days). | `InsightsPanel` |
303
+ | Component | Description | Key Exports |
304
+ | ---------------- | ---------------------------------------------------------------------------------------------------------- | ------------------ |
305
+ | SqlEditor | SQL 에디터. CodeMirror 기반의 SQL 편집기로 구문 강조와 자동 완성을 지원합니다. | `SqlEditor` |
306
+ | EventMetaEditor | 기본 이벤트 메타와 호출자 소유 섹션을 한 폼에서 편집하고, footer의 한 액션으로 함께 저장할 수 있습니다. | `EventMetaEditor` |
307
+ | PropertyExplorer | 검색 가능한 속성 목록을 그룹별로 표시하고, 숨김 상태와 호출자 소유의 명시적인 편집 액션을 함께 제공합니다. | `PropertyExplorer` |
308
+ | RichTextEditor | 마크다운 리치 텍스트 에디터. 서식 툴바 + textarea 조합. | `RichTextEditor` |
309
+ | ExportButton | 데이터 내보내기 버튼. CSV/JSON 변환 내장, PDF는 콜백 위임. DropdownMenu 기반. | `ExportButton` |
310
+ | InsightsPanel | 이상 탐지 인사이트 패널. severity별 카드, 통계 필터, dismiss 기능, 검출 설정(유형/Z-score/days). | `InsightsPanel` |
311
311
 
312
312
  ### Builders
313
313
 
@@ -385,6 +385,8 @@
385
385
  | `shape` | `"square" \| "circle"` | | "square" | 토큰 모양 |
386
386
  | `title` | `string` | | | 접근성 이름. 기본값은 타입 이름 |
387
387
  | `decorative` | `boolean` | | false | 인접 텍스트가 타입을 이미 말할 때 접근성 트리에서 제외 |
388
+ | `withLabel` | `boolean` | | false | 글리프 옆에 타입 이름을 함께 표시 |
389
+ | `label` | `string` | | | withLabel이 표시할 문구. 기본값은 타입 이름 |
388
390
  | `className` | `string` | | | 추가 CSS 클래스 |
389
391
 
390
392
  #### Facet
@@ -2383,12 +2385,12 @@ const MyDashboard = createBlock<MyDashboardProps>(
2383
2385
 
2384
2386
  **Import:** `import { StatusDot } from "@reopt-ai/opt-ui"`
2385
2387
 
2386
- | Prop | Type | Required | Default | Description |
2387
- | ---------- | ---------------------------------------------------------------------- | -------- | --------- | -------------------------------------- |
2388
- | `tone` | `"neutral" \| "muted" \| "info" \| "success" \| "warning" \| "danger"` | | "neutral" | 점 색상 |
2389
- | `size` | `"sm" \| "md"` | | "md" | 점과 글자 크기 |
2390
- | `children` | `ReactNode` | Yes | | 상태 라벨. 필수 — 색은 상태가 아닙니다 |
2391
- | `hint` | `string` | | | 판정 기준 툴팁 |
2388
+ | Prop | Type | Required | Default | Description |
2389
+ | ---------- | ---------------------------------------------------------------------- | -------- | --------- | -------------------------------------------------------------------------------------- |
2390
+ | `tone` | `"neutral" \| "muted" \| "info" \| "success" \| "warning" \| "danger"` | | "neutral" | 점 색상 |
2391
+ | `size` | `"sm" \| "md"` | | "md" | 점과 글자 크기 |
2392
+ | `children` | `ReactNode` | Yes | | 상태 라벨. 필수 — 색은 상태가 아닙니다 |
2393
+ | `hint` | `string` | | | 판정 기준. 호버·키보드 포커스로 열리는 툴팁이며, 지정하면 이 항목이 탭 정지점이 됩니다 |
2392
2394
 
2393
2395
  #### CopyButton
2394
2396
 
@@ -2416,6 +2418,7 @@ const MyDashboard = createBlock<MyDashboardProps>(
2416
2418
  | `fullWidth` | `boolean` | | false | 컨테이너를 균등 분할 |
2417
2419
  | `disabled` | `boolean` | | false | 전체 비활성 |
2418
2420
  | `aria-label` | `string` | Yes | | radiogroup 이름. 필수 |
2421
+ | `className` | `string` | | | 추가 CSS 클래스 |
2419
2422
 
2420
2423
  ### Visual Layer
2421
2424
 
@@ -2668,14 +2671,15 @@ const fields = [
2668
2671
 
2669
2672
  **DataTable:**
2670
2673
 
2671
- | Prop | Type | Required | Default | Description |
2672
- | -------------- | -------------------- | -------- | ------------------- | --------------------------------------------------- |
2673
- | `data` | `T[]` | Yes | | 테이블 데이터 배열 |
2674
- | `columns` | `ColumnDef<T>[]` | Yes | | 컬럼 정의. { id, header, accessor, width?, align? } |
2675
- | `keyExtractor` | `(row: T) => string` | Yes | | 각 행의 고유 키 추출 함수 |
2676
- | `title` | `string` | | "데이터 테이블" | 테이블 제목 |
2677
- | `onRowClick` | `(row: T) => void` | | | 행 클릭 핸들러 |
2678
- | `emptyMessage` | `string` | | "데이터가 없습니다" | 데이터 없을 때 표시할 메시지 |
2674
+ | Prop | Type | Required | Default | Description |
2675
+ | -------------- | -------------------- | -------- | ------------------- | ----------------------------------------------------------- |
2676
+ | `data` | `T[]` | Yes | | 테이블 데이터 배열 |
2677
+ | `columns` | `ColumnDef<T>[]` | Yes | | 컬럼 정의. { id, header, accessor, width?, align? } |
2678
+ | `keyExtractor` | `(row: T) => string` | Yes | | 각 행의 고유 키 추출 함수 |
2679
+ | `title` | `string` | | | 테이블 위에 표시할 제목. 생략하면 제목 영역을 렌더하지 않음 |
2680
+ | `ariaLabel` | `string` | | | 보이는 제목이 없을 때 grid에 제공할 접근 가능한 이름 |
2681
+ | `onRowClick` | `(row: T) => void` | | | 행 클릭 핸들러 |
2682
+ | `emptyMessage` | `string` | | "No data available" | 데이터 없을 때 표시할 메시지 |
2679
2683
 
2680
2684
  **ColumnDef:**
2681
2685
 
@@ -3056,6 +3060,33 @@ const filters = [
3056
3060
  | `className` | `string` | | | 커스텀 CSS 클래스 |
3057
3061
  | `labels` | `CodeSnippetViewerLabels` | | | 복사 버튼과 코드 영역 레이블 문구 |
3058
3062
 
3063
+ #### PropertyExplorer
3064
+
3065
+ **Import:** `import { PropertyExplorer } from "@reopt-ai/opt-ui"`
3066
+ **Dependencies:** input (core)
3067
+
3068
+ **PropertyExplorer:**
3069
+
3070
+ | Prop | Type | Required | Default | Description |
3071
+ | ----------- | --------------------------------- | -------- | ------- | -------------------------------------------------------------- |
3072
+ | `groups` | `PropertyGroup[]` | Yes | | 그룹별 속성 목록. 각 속성은 dataType과 hidden 상태를 포함 가능 |
3073
+ | `onSelect` | `(property: PropertyDef) => void` | | | 속성 선택 |
3074
+ | `onEdit` | `(property: PropertyDef) => void` | | | 행에 명시적인 편집 버튼을 표시하고 선택한 속성을 전달 |
3075
+ | `className` | `string` | | | 추가 CSS 클래스 |
3076
+ | `labels` | `PropertyExplorerLabels` | | | 검색·빈 상태·편집·숨김 문구 |
3077
+
3078
+ **PropertyDef:**
3079
+
3080
+ | Prop | Type | Required | Default | Description |
3081
+ | -------------- | --------------- | -------- | ------- | ------------------------------------------------- |
3082
+ | `name` | `string` | Yes | | 속성 이름 |
3083
+ | `type` | `string` | Yes | | 원본 스키마 타입 |
3084
+ | `dataType` | `FieldDataType` | | | 호출자가 이미 판정한 opt-ui 필드 타입 |
3085
+ | `description` | `string` | | | 속성 설명 |
3086
+ | `exampleValue` | `string` | | | 예시 값 |
3087
+ | `eventCount` | `number` | | | 관측 이벤트 수 |
3088
+ | `hidden` | `boolean` | | | 피커에서는 숨기되 탐색기에서는 흐리게 표시할 상태 |
3089
+
3059
3090
  #### QueryResultsTable
3060
3091
 
3061
3092
  **Import:** `import { QueryResultsTable } from "@reopt-ai/opt-ui"`
@@ -3092,6 +3123,32 @@ const filters = [
3092
3123
  | `labels` | `SqlEditorLabels` | | | 문구 오버라이드 |
3093
3124
  | `className` | `string` | | | 기본 스타일 오버라이드 |
3094
3125
 
3126
+ #### EventMetaEditor
3127
+
3128
+ **Import:** `import { EventMetaEditor } from "@reopt-ai/opt-ui"`
3129
+ **Dependencies:** input (core), icon-picker (core), color-picker (core), tag-input (core)
3130
+
3131
+ **EventMetaEditor:**
3132
+
3133
+ | Prop | Type | Required | Default | Description |
3134
+ | ----------- | --------------------------- | -------- | ------- | ------------------------------------------------------ |
3135
+ | `value` | `EventMeta` | Yes | | 편집 중인 이벤트 메타데이터 |
3136
+ | `onChange` | `(meta: EventMeta) => void` | Yes | | 메타데이터 변경 |
3137
+ | `icons` | `IconDef[]` | | | 선택 가능한 아이콘 |
3138
+ | `sections` | `EventMetaEditorSection[]` | | | 기본 여섯 필드 뒤에 렌더할 호출자 소유 섹션 |
3139
+ | `footer` | `ReactNode` | | | 내장 필드와 추가 섹션을 함께 저장하는 마지막 액션 영역 |
3140
+ | `className` | `string` | | | 추가 CSS 클래스 |
3141
+ | `labels` | `EventMetaEditorLabels` | | | 필드 레이블과 placeholder 문구 |
3142
+
3143
+ **EventMetaEditorSection:**
3144
+
3145
+ | Prop | Type | Required | Default | Description |
3146
+ | ------------- | ----------- | -------- | ------- | ---------------------------- |
3147
+ | `id` | `string` | Yes | | 섹션 키 |
3148
+ | `title` | `ReactNode` | | | 섹션 제목 |
3149
+ | `description` | `ReactNode` | | | 섹션 변경이 미치는 영향 안내 |
3150
+ | `children` | `ReactNode` | Yes | | 호출자가 소유하는 필드 |
3151
+
3095
3152
  #### ReportBuilder
3096
3153
 
3097
3154
  **Import:** `import { ReportBuilder } from "@reopt-ai/opt-ui"`
@@ -3790,6 +3847,8 @@ const messages = [
3790
3847
  | `footer` | `ReactNode` | | | 인스펙터 하단 |
3791
3848
  | `breakpoint` | `"lg" \| "xl" \| "2xl"` | | "xl" | 이 폭 이상이면 push |
3792
3849
  | `width` | `"sm" \| "md" \| "lg"` | | "md" | push 레이아웃에서의 인스펙터 폭 |
3850
+ | `labels` | `InspectorLayoutLabels` | | | 닫기 버튼 등 인스펙터 문구 |
3851
+ | `className` | `string` | | | 추가 CSS 클래스 |
3793
3852
 
3794
3853
  #### QueryFilterBar
3795
3854
 
@@ -3806,6 +3865,8 @@ const messages = [
3806
3865
  | `live` | `boolean` | | false | 매 입력마다 커밋 |
3807
3866
  | `disabled` | `boolean` | | false | 전체 비활성 |
3808
3867
  | `queryBarLabels` | `QueryBarLabels` | | | QueryBar로 통과되는 나머지 문구. placeholder/ariaLabel은 labels가 이깁니다 |
3868
+ | `labels` | `QueryFilterBarLabels` | | | 검색·필터·초기화 문구 |
3869
+ | `className` | `string` | | | 추가 CSS 클래스 |
3809
3870
 
3810
3871
  #### CatalogFrame
3811
3872
 
@@ -3846,6 +3907,7 @@ const messages = [
3846
3907
  | `error` | `ReactNode` | | | 읽기 실패. 빈 목록과 다른 답 |
3847
3908
  | `onRetry` | `() => void` | | | 재시도 |
3848
3909
  | `labels` | `CatalogFrameLabels` | | | 빈/필터된 빈/에러 문구 |
3910
+ | `className` | `string` | | | 추가 CSS 클래스 |
3849
3911
 
3850
3912
  **CatalogRowActions:**
3851
3913
 
@@ -3856,6 +3918,16 @@ const messages = [
3856
3918
  | `visibleCount` | `number` | | 2 | 오버플로 전에 노출할 개수. available 필터링 후에 적용됨 |
3857
3919
  | `labels` | `CatalogRowActionsLabels` | | | 그룹·오버플로 라벨 |
3858
3920
 
3921
+ **CatalogRowAction:**
3922
+
3923
+ | Prop | Type | Required | Default | Description |
3924
+ | ----------- | ---------------------- | -------- | ------- | ----------------------------------------------- |
3925
+ | `id` | `string` | Yes | | 액션 키 |
3926
+ | `label` | `string` | Yes | | 액션 문구 |
3927
+ | `icon` | `ReactNode` | | | 선택적 액션 아이콘 |
3928
+ | `onSelect` | `(item: T) => void` | Yes | | 행과 함께 호출되는 액션 |
3929
+ | `available` | `(item: T) => boolean` | | | 이 행에 적용되지 않는 액션을 비활성화 대신 제거 |
3930
+
3859
3931
  **CatalogCellControls:**
3860
3932
 
3861
3933
  | Prop | Type | Required | Default | Description |
package/README.md CHANGED
@@ -214,13 +214,18 @@ import {
214
214
  ```ts
215
215
  import { matchesQueryObject, parseQuery } from "@reopt-ai/opt-ui/query";
216
216
 
217
- const query = parseQuery("service:api -status:200 duration>250");
217
+ const query = parseQuery("service:api tags:checkout -status:200");
218
218
 
219
219
  const visibleRows = rows.filter((row) =>
220
220
  matchesQueryObject(query, row, { nested: "properties" }),
221
221
  );
222
222
  ```
223
223
 
224
+ 문자열·숫자 같은 단일 값과 `tags: ["checkout", "payment"]` 같은 배열 필드는
225
+ 같은 쿼리로 다룰 수 있습니다. `tags:checkout`과 `tags:*`는 배열 전체를 문자열로
226
+ 바꾸지 않고 각 원소를 비교하며, 빈 배열은 `tags:*`에 일치하지 않습니다. 필드가
227
+ 없는 bare term 검색도 문자열·숫자·불리언 배열 원소를 검색합니다.
228
+
224
229
  UI에서는 동일한 <code>Query</code>를 <code>QueryBar</code>에 전달하고,
225
230
  <code>LogTable</code>의 cell action을 <code>applyCellAction</code>으로 다시
226
231
  쿼리에 합칩니다. <code>FieldSidebar</code>의 값 분포 필터도 같은
package/dist/core/index.cjs CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const require_text_truncate = require("../text-truncate-I1XLWmRa.cjs");
4
- const require_key_pad_menu = require("../key-pad-menu-SItoHPLu.cjs");
3
+ const require_text_truncate = require("../text-truncate-DsG5UAOY.cjs");
4
+ const require_key_pad_menu = require("../key-pad-menu-1YN221Oi.cjs");
5
5
  let _reopt_ai_opt_ui_primitives = require("@reopt-ai/opt-ui-primitives");
6
6
  exports.AccordionContent = require_key_pad_menu.AccordionContent;
7
7
  exports.AccordionItem = require_key_pad_menu.AccordionItem;
package/dist/core/index.js CHANGED
@@ -1,4 +1,4 @@
1
1
  "use client";
2
- import { $ as PopoverClose, $t as CompositeProvider, A as FormRadio, At as DialogBody, B as FormSubmit, Bt as SelectLabel, C as FormGroupLabel, Ct as ComboboxGroup, Dt as ComboboxPopover, E as FormLabel, Et as ComboboxItem, F as FormSelect, Ft as DialogHeader, G as useFormContext, Gt as TabList, Ht as SelectRoot, I as FormSelectItem, It as DialogHeading, J as DateRangePicker, Jt as DisclosureContent, K as useFormStore, Kt as TabPanel, L as FormSelectPopover, Lt as DialogPanel, M as FormRemove, Mt as DialogDisclosure, N as FormReset, Nt as DialogDismiss, O as FormProvider, Ot as ComboboxRoot, P as FormRoot, Pt as DialogFooter, Q as ColorPicker, Qt as CompositeItem, Rt as DialogRoot, S as FormGroup, St as ComboboxEmpty, T as FormInput, Tt as ComboboxInput, U as FormTextarea, Ut as SelectTrigger, V as FormSwitch, Vt as SelectPopover, Wt as Tab, X as IconPicker, Xt as DisclosureTrigger, Y as TagInput, Yt as DisclosureRoot, Zt as Composite, _ as FormControl, _n as SkeletonCard, _t as MenuRoot, at as ToolbarButton, b as FormError, bt as MenubarContainer, c as Checkbox, cn as Badge, ct as ToolbarSeparator, dt as TooltipProvider, en as CompositeRow, et as PopoverContent, ft as MenuButtonArrow, gn as SkeletonAvatar, gt as MenuPopover, h as FormCheckbox, hn as Skeleton, ht as MenuItemRadio, i as FieldToken, in as Input, it as NumberInput, j as FormRadioGroup, jt as DialogDescription, k as FormPush, kt as AlertDialogPanel, l as CheckboxGroup, ln as EmptyState, lt as Tooltip, mn as StatCard, mt as MenuItemCheckbox, n as Highlight, nn as Meter, nt as PopoverTrigger, o as resolveFieldType, on as Alert, or as Kbd, ot as ToolbarContainer, pt as MenuItem, q as DEFAULT_PRESETS, qt as TabsRoot, r as FIELD_TYPE_TOKENS, rt as Slider, s as Pagination, sn as Spinner, st as ToolbarRoot, t as TextTruncate, tn as CompositeZone, tt as PopoverRoot, un as Button, ut as TooltipAnchor, vn as SkeletonTable, vt as MenuSeparator, wt as ComboboxGroupLabel, x as FormField, xt as MenubarRoot, y as FormDescription, yn as SkeletonText, yt as MenuTrigger, zt as SelectItem } from "../text-truncate-DSuZECy0.js";
3
- import { $ as Identity, A as PageHeader, B as DropdownTrigger, C as Logo, D as Section, E as ResizablePanelGroup, F as RadioGroup, G as Textarea, H as StepBuilder, I as DropdownContent, J as CardContent, K as Switch, L as DropdownItem, M as BlockLayout, O as Container, P as Radio, Q as CardTitle, R as DropdownMenu, S as DrawerRoot, T as ResizablePanel, U as CircularProgress, V as ConditionBuilder, W as Progress, X as CardFooter, Y as CardDescription, Z as CardHeader, _ as getShaderFragment, a as THEME_PALETTES, at as AccordionItem, b as DrawerClose, c as ExpressionGroup, ct as Toggle, d as ShaderSurface, dt as Separator, et as Avatar, f as SHADER_OVERLAY_PARAM_KEYS, ft as Heading, g as SHADER_PRESET_IDS, h as SHADER_PRESETS, i as ColorPalettePicker, it as AccordionContent, j as createBlock, k as ScrollArea, l as Facet, lt as ToggleGroup, m as SHADER_PARAM_KEYS, n as InlineEdit, nt as DescriptionList, o as LiveRegion, ot as AccordionRoot, p as SHADER_PARAM_FALLBACK, pt as Text, q as Card, r as ColorPaletteDisplay, rt as Breadcrumb, s as Expression, st as AccordionTrigger, t as KeyPadMenu, tt as AvatarGroup, u as FacetGroup, ut as OtpField, v as getShaderPreset, w as ResizableHandle, x as DrawerPanel, y as VirtualList, z as DropdownSeparator } from "../key-pad-menu-Di2aRGbM.js";
2
+ import { $ as PopoverClose, $t as ToolbarButton, A as FormRadio, At as DialogPanel, B as FormSubmit, Bt as TabsRoot, C as FormGroupLabel, Ct as DialogBody, Dt as DialogFooter, E as FormLabel, Et as DialogDismiss, F as FormSelect, Ft as SelectRoot, G as useFormContext, Gt as CompositeItem, Ht as DisclosureRoot, I as FormSelectItem, It as SelectTrigger, J as DateRangePicker, Jt as CompositeZone, K as useFormStore, Kt as CompositeProvider, L as FormSelectPopover, Lt as Tab, M as FormRemove, Mt as SelectItem, N as FormReset, Nt as SelectLabel, O as FormProvider, Ot as DialogHeader, P as FormRoot, Pt as SelectPopover, Q as ColorPicker, Rt as TabList, S as FormGroup, St as AlertDialogPanel, T as FormInput, Tt as DialogDisclosure, U as FormTextarea, Ut as DisclosureTrigger, V as FormSwitch, Vt as DisclosureContent, Wt as Composite, X as IconPicker, Y as TagInput, Yt as Meter, Zt as Input, _ as FormControl, _n as SkeletonCard, _t as ComboboxGroupLabel, an as TooltipProvider, at as MenuButtonArrow, b as FormError, bt as ComboboxPopover, c as Checkbox, cn as Badge, ct as MenuItemRadio, dt as MenuSeparator, en as ToolbarContainer, et as PopoverContent, ft as MenuTrigger, gn as SkeletonAvatar, gt as ComboboxGroup, h as FormCheckbox, hn as Skeleton, ht as ComboboxEmpty, i as FieldToken, in as TooltipAnchor, it as NumberInput, j as FormRadioGroup, jt as DialogRoot, k as FormPush, kt as DialogHeading, l as CheckboxGroup, ln as EmptyState, lt as MenuPopover, mn as StatCard, mt as MenubarRoot, n as Highlight, nn as ToolbarSeparator, nt as PopoverTrigger, o as resolveFieldType, on as Alert, or as Kbd, ot as MenuItem, pt as MenubarContainer, q as DEFAULT_PRESETS, qt as CompositeRow, r as FIELD_TYPE_TOKENS, rn as Tooltip, rt as Slider, s as Pagination, sn as Spinner, st as MenuItemCheckbox, t as TextTruncate, tn as ToolbarRoot, tt as PopoverRoot, un as Button, ut as MenuRoot, vn as SkeletonTable, vt as ComboboxInput, wt as DialogDescription, x as FormField, xt as ComboboxRoot, y as FormDescription, yn as SkeletonText, yt as ComboboxItem, zt as TabPanel } from "../text-truncate-BFWd2cE_.js";
3
+ import { $ as Identity, A as PageHeader, B as DropdownTrigger, C as Logo, D as Section, E as ResizablePanelGroup, F as RadioGroup, G as Textarea, H as StepBuilder, I as DropdownContent, J as CardContent, K as Switch, L as DropdownItem, M as BlockLayout, O as Container, P as Radio, Q as CardTitle, R as DropdownMenu, S as DrawerRoot, T as ResizablePanel, U as CircularProgress, V as ConditionBuilder, W as Progress, X as CardFooter, Y as CardDescription, Z as CardHeader, _ as getShaderFragment, a as THEME_PALETTES, at as AccordionItem, b as DrawerClose, c as ExpressionGroup, ct as Toggle, d as ShaderSurface, dt as Separator, et as Avatar, f as SHADER_OVERLAY_PARAM_KEYS, ft as Heading, g as SHADER_PRESET_IDS, h as SHADER_PRESETS, i as ColorPalettePicker, it as AccordionContent, j as createBlock, k as ScrollArea, l as Facet, lt as ToggleGroup, m as SHADER_PARAM_KEYS, n as InlineEdit, nt as DescriptionList, o as LiveRegion, ot as AccordionRoot, p as SHADER_PARAM_FALLBACK, pt as Text, q as Card, r as ColorPaletteDisplay, rt as Breadcrumb, s as Expression, st as AccordionTrigger, t as KeyPadMenu, tt as AvatarGroup, u as FacetGroup, ut as OtpField, v as getShaderPreset, w as ResizableHandle, x as DrawerPanel, y as VirtualList, z as DropdownSeparator } from "../key-pad-menu-CUiQ-vKw.js";
4
4
  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, ColorPaletteDisplay, ColorPalettePicker, ColorPicker, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxPopover, ComboboxRoot, Composite, CompositeItem, CompositeProvider, CompositeRow, CompositeZone, ConditionBuilder, Container, DEFAULT_PRESETS, DateRangePicker, DescriptionList, DialogBody, DialogDescription, DialogDisclosure, DialogDismiss, DialogFooter, DialogHeader, DialogHeading, DialogPanel, DialogRoot, DisclosureContent, DisclosureRoot, DisclosureTrigger, DrawerClose, DrawerPanel, DrawerRoot, DropdownContent, DropdownItem, DropdownMenu, DropdownSeparator, DropdownTrigger, EmptyState, Expression, ExpressionGroup, FIELD_TYPE_TOKENS, Facet, FacetGroup, FieldToken, FormCheckbox, FormControl, FormDescription, FormError, FormField, FormGroup, FormGroupLabel, FormInput, FormLabel, FormProvider, FormPush, FormRadio, FormRadioGroup, FormRemove, FormReset, FormRoot, FormSelect, FormSelectItem, FormSelectPopover, FormSubmit, FormSwitch, FormTextarea, Heading, Highlight, IconPicker, Identity, InlineEdit, Input, Kbd, KeyPadMenu, LiveRegion, 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, THEME_PALETTES, Tab, TabList, TabPanel, TabsRoot, TagInput, Text, TextTruncate, Textarea, Toggle, ToggleGroup, ToolbarButton, ToolbarContainer, ToolbarRoot, ToolbarSeparator, Tooltip, TooltipAnchor, TooltipProvider, VirtualList, createBlock, createBlock as createSurface, getShaderFragment, getShaderPreset, resolveFieldType, useFormContext, useFormStore };
package/dist/docs/02-components/01-core.md CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  title: "Core Components"
3
3
  description: "74 Core layer components — props, examples, keyboard shortcuts."
4
- version: "1.12.0"
4
+ version: "1.12.1"
5
5
  generated: true
6
6
  ---
7
7
 
@@ -1682,40 +1682,40 @@ import {
1682
1682
 
1683
1683
  ## Other
1684
1684
 
1685
- | Component | Description | Key Exports |
1686
- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
1687
- | FieldToken | 필드 타입을 글리프 하나로 표현하는 토큰. 문자열·숫자·날짜·IP·지오 등 분석 스키마 타입마다 고정된 아이콘과 팔레트 슬롯을 부여해 필드 목록·컬럼 헤더·속성 테이블 전역에서 같은 어휘를 쓴다. | `FieldToken`, `FIELD_TYPE_TOKENS`, `resolveFieldType` |
1688
- | Facet | 필드 값 분포를 카운트와 점유율 막대로 보여주고 그 행 자체가 필터가 되는 패싯. 긴 꼬리는 접어 두고 상위 값부터 읽힌다. | `Facet`, `FacetGroup` |
1689
- | Expression | 조건을 폼이 아니라 문장으로 쓰고 그 자리에서 편집하는 표현식 절. 알림 규칙·세그먼트 필터처럼 읽어서 검증해야 하는 조건에 쓴다. | `Expression`, `ExpressionGroup` |
1690
- | TextTruncate | 실제 폰트로 실제 가용 폭을 측정해 문자열의 식별력이 가장 낮은 부분을 잘라내는 생략. CSS가 못 하는 앞·중간·양끝 생략을 지원하고 전체 문자열은 접근성 트리에 남는다. | `TextTruncate` |
1691
- | Highlight | 검색어에 해당하는 구간을 <mark>로 표시. 긴 항목 우선 매칭이라 겹치는 검색어도 조각나지 않는다. | `Highlight` |
1692
- | LiveRegion | 라이브 뷰의 변화를 스크린 리더에 읽어 주는 영역. 스로틀로 폭주를 요약하고 두 노드를 번갈아 써서 같은 문구도 다시 읽힌다. | `LiveRegion` |
1693
- | ColorPalette | 시각화 색 팔레트를 그 팔레트의 모습 그대로 보여 주고 고르게 하는 컴포넌트. 범주형은 블록, 순차·발산형은 그라디언트로 그려 데이터 종류를 그림이 말한다. | `ColorPaletteDisplay`, `ColorPalettePicker`, `THEME_PALETTES` |
1694
- | InlineEdit | 대시보드 제목·지표 이름처럼 읽히는 횟수가 훨씬 많은 값을 그 자리에서 고치는 편집. Enter 확정, Escape 되돌리기, 거절된 저장은 입력을 유지한다. | `InlineEdit` |
1695
- | KeyPadMenu | 이름보다 그림으로 알아보기 쉬운 선택지를 타일로 고르는 메뉴. 내부는 실제 radio·checkbox라 키보드와 스크린 리더가 그대로 동작한다. | `KeyPadMenu` |
1696
- | Text | 본문, 레이블, 보조 설명, 코드에 일관된 의미 기반 타이포그래피를 적용합니다. | `Text` |
1697
- | Heading | 문서의 의미 계층과 시각적 타이포그래피 계층을 독립적으로 제어합니다. | `Heading` |
1698
- | Separator | 콘텐츠를 구분하는 가로/세로 디바이더. 라벨을 넣으면 가운데 정렬 구분선이 된다. | `Separator` |
1699
- | OtpField | 일회용 코드(OTP)/PIN 입력. 셀 단위 입력, 붙여넣기 분배, 자동 포커스 이동, 백스페이스 네비게이션과 폼 이름/오류 연결을 지원합니다. | `OtpField` |
1700
- | Toggle | 눌림(pressed) 두 상태 버튼. 단독 사용하거나 ToggleGroup으로 묶어 단일/다중 선택을 만든다. | `Toggle`, `ToggleGroup` |
1701
- | Accordion | 수직으로 쌓인 펼침/접힘 패널. single(한 개)/multiple(여러 개) 모드와 collapsible 지원. | `AccordionRoot`, `AccordionItem`, `AccordionTrigger`, `AccordionContent` |
1702
- | Meter | 범위 내 스칼라 측정값 게이지 (디스크 사용량·점수·용량 등). role=meter로 작업 진행률(Progress)과 구분된다. | `Meter` |
1703
- | DescriptionList | 한 대상의 라벨 있는 사실들을 시맨틱 <dl>로 표시한다. 상세 패널의 필드 나열을 표준화하고 식별자 복사를 제공한다. | `DescriptionList` |
1704
- | Identity | 사람(또는 익명 디바이스)을 목록 셀 한 칸으로 표현한다. 이름→이메일→ID 폴백과 익명 표식을 한 곳에서 처리한다. | `Identity` |
1705
- | BlockLayout | Block 루트 레이아웃. 자식 간 section spacing과 선택적 시맨틱 inset을 제공하고 loading prop으로 LoadingOverlay를 자동 래핑합니다. | `BlockLayout` |
1706
- | createBlock | Block 팩토리 함수. BlockLayout 래핑을 구조적으로 강제하여 loading/className 처리를 자동화합니다. | `createBlock` |
1707
- | StarRating | 1~N점 별점을 선택하는 인터랙티브 레이팅 입력. 읽기 전용 표시도 지원. | `StarRating` |
1708
- | ErrorBoundary | React 에러 바운더리. 자식 컴포넌트 렌더 에러를 잡아 fallback UI를 표시합니다. | `ErrorBoundary` |
1709
- | Command | cmdk 스타일 명령 anatomy. 자동 필터링 + 키보드 내비게이션. 인라인 또는 CommandDialog로 사용. | `Command`, `CommandDialog`, `CommandInput`, `CommandList`, `CommandEmpty`, `CommandGroup`, `CommandItem`, `CommandSeparator`, `CommandShortcut` |
1710
- | ShaderSurface | ogl 기반 애니메이션 WebGL 셰이더 배경. 럭셔리 프리셋(메탈릭/실크/유리 등) + 색·파라미터로 배경·카드 배경을 만든다. 정지 프레임·PNG 캡처·WebGL 폴백 지원. | `ShaderSurface` |
1711
- | Callout | 페이지에 머무는 인페이지 고지. Alert와 달리 dismiss가 없고, 조건이 참인 동안 레이아웃의 일부로 남습니다. | `Callout` |
1712
- | StatusDot | 점 + 텍스트로 상태를 표현합니다. 라벨이 필수라 색만으로 상태를 말할 수 없습니다. | `StatusDot` |
1713
- | CopyButton | 값을 클립보드에 올리고 성공 여부를 알립니다. 클립보드 거부를 삼키지 않습니다. | `CopyButton` |
1714
- | SegmentedControl | 선택지를 모두 보여주는 단일 선택 컨트롤. radio-group 프리미티브 위에 올려 화살표 키가 동작합니다. | `SegmentedControl` |
1685
+ | Component | Description | Key Exports |
1686
+ | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------- |
1687
+ | FieldToken | 필드 타입을 일관된 글리프와 선택적 텍스트 레이블로 표현합니다. 문자열·숫자·날짜·IP·지오 등 분석 스키마 타입마다 같은 아이콘과 팔레트 슬롯을 씁니다. | `FieldToken`, `FIELD_TYPE_TOKENS`, `resolveFieldType` |
1688
+ | Facet | 필드 값 분포를 카운트와 점유율 막대로 보여주고 그 행 자체가 필터가 되는 패싯. 긴 꼬리는 접어 두고 상위 값부터 읽힌다. | `Facet`, `FacetGroup` |
1689
+ | Expression | 조건을 폼이 아니라 문장으로 쓰고 그 자리에서 편집하는 표현식 절. 알림 규칙·세그먼트 필터처럼 읽어서 검증해야 하는 조건에 쓴다. | `Expression`, `ExpressionGroup` |
1690
+ | TextTruncate | 실제 폰트로 실제 가용 폭을 측정해 문자열의 식별력이 가장 낮은 부분을 잘라내는 생략. CSS가 못 하는 앞·중간·양끝 생략을 지원하고 전체 문자열은 접근성 트리에 남는다. | `TextTruncate` |
1691
+ | Highlight | 검색어에 해당하는 구간을 <mark>로 표시. 긴 항목 우선 매칭이라 겹치는 검색어도 조각나지 않는다. | `Highlight` |
1692
+ | LiveRegion | 라이브 뷰의 변화를 스크린 리더에 읽어 주는 영역. 스로틀로 폭주를 요약하고 두 노드를 번갈아 써서 같은 문구도 다시 읽힌다. | `LiveRegion` |
1693
+ | ColorPalette | 시각화 색 팔레트를 그 팔레트의 모습 그대로 보여 주고 고르게 하는 컴포넌트. 범주형은 블록, 순차·발산형은 그라디언트로 그려 데이터 종류를 그림이 말한다. | `ColorPaletteDisplay`, `ColorPalettePicker`, `THEME_PALETTES` |
1694
+ | InlineEdit | 대시보드 제목·지표 이름처럼 읽히는 횟수가 훨씬 많은 값을 그 자리에서 고치는 편집. Enter 확정, Escape 되돌리기, 거절된 저장은 입력을 유지한다. | `InlineEdit` |
1695
+ | KeyPadMenu | 이름보다 그림으로 알아보기 쉬운 선택지를 타일로 고르는 메뉴. 내부는 실제 radio·checkbox라 키보드와 스크린 리더가 그대로 동작한다. | `KeyPadMenu` |
1696
+ | Text | 본문, 레이블, 보조 설명, 코드에 일관된 의미 기반 타이포그래피를 적용합니다. | `Text` |
1697
+ | Heading | 문서의 의미 계층과 시각적 타이포그래피 계층을 독립적으로 제어합니다. | `Heading` |
1698
+ | Separator | 콘텐츠를 구분하는 가로/세로 디바이더. 라벨을 넣으면 가운데 정렬 구분선이 된다. | `Separator` |
1699
+ | OtpField | 일회용 코드(OTP)/PIN 입력. 셀 단위 입력, 붙여넣기 분배, 자동 포커스 이동, 백스페이스 네비게이션과 폼 이름/오류 연결을 지원합니다. | `OtpField` |
1700
+ | Toggle | 눌림(pressed) 두 상태 버튼. 단독 사용하거나 ToggleGroup으로 묶어 단일/다중 선택을 만든다. | `Toggle`, `ToggleGroup` |
1701
+ | Accordion | 수직으로 쌓인 펼침/접힘 패널. single(한 개)/multiple(여러 개) 모드와 collapsible 지원. | `AccordionRoot`, `AccordionItem`, `AccordionTrigger`, `AccordionContent` |
1702
+ | Meter | 범위 내 스칼라 측정값 게이지 (디스크 사용량·점수·용량 등). role=meter로 작업 진행률(Progress)과 구분된다. | `Meter` |
1703
+ | DescriptionList | 한 대상의 라벨 있는 사실들을 시맨틱 <dl>로 표시한다. 상세 패널의 필드 나열을 표준화하고 식별자 복사를 제공한다. | `DescriptionList` |
1704
+ | Identity | 사람(또는 익명 디바이스)을 목록 셀 한 칸으로 표현한다. 이름→이메일→ID 폴백과 익명 표식을 한 곳에서 처리한다. | `Identity` |
1705
+ | BlockLayout | Block 루트 레이아웃. 자식 간 section spacing과 선택적 시맨틱 inset을 제공하고 loading prop으로 LoadingOverlay를 자동 래핑합니다. | `BlockLayout` |
1706
+ | createBlock | Block 팩토리 함수. BlockLayout 래핑을 구조적으로 강제하여 loading/className 처리를 자동화합니다. | `createBlock` |
1707
+ | StarRating | 1~N점 별점을 선택하는 인터랙티브 레이팅 입력. 읽기 전용 표시도 지원. | `StarRating` |
1708
+ | ErrorBoundary | React 에러 바운더리. 자식 컴포넌트 렌더 에러를 잡아 fallback UI를 표시합니다. | `ErrorBoundary` |
1709
+ | Command | cmdk 스타일 명령 anatomy. 자동 필터링 + 키보드 내비게이션. 인라인 또는 CommandDialog로 사용. | `Command`, `CommandDialog`, `CommandInput`, `CommandList`, `CommandEmpty`, `CommandGroup`, `CommandItem`, `CommandSeparator`, `CommandShortcut` |
1710
+ | ShaderSurface | ogl 기반 애니메이션 WebGL 셰이더 배경. 럭셔리 프리셋(메탈릭/실크/유리 등) + 색·파라미터로 배경·카드 배경을 만든다. 정지 프레임·PNG 캡처·WebGL 폴백 지원. | `ShaderSurface` |
1711
+ | Callout | 페이지에 머무는 인페이지 고지. Alert와 달리 dismiss가 없고, 조건이 참인 동안 레이아웃의 일부로 남습니다. | `Callout` |
1712
+ | StatusDot | 점 + 텍스트로 상태를 표현합니다. 라벨이 필수라 색만으로 상태를 말할 수 없습니다. | `StatusDot` |
1713
+ | CopyButton | 값을 클립보드에 올리고 성공 여부를 알립니다. 클립보드 거부를 삼키지 않습니다. | `CopyButton` |
1714
+ | SegmentedControl | 선택지를 모두 보여주는 단일 선택 컨트롤. radio-group 프리미티브 위에 올려 화살표 키가 동작합니다. | `SegmentedControl` |
1715
1715
 
1716
1716
  ### FieldToken
1717
1717
 
1718
- > 필드 타입을 글리프 하나로 표현하는 토큰. 문자열·숫자·날짜·IP·지오 등 분석 스키마 타입마다 고정된 아이콘과 팔레트 슬롯을 부여해 필드 목록·컬럼 헤더·속성 테이블 전역에서 같은 어휘를 쓴다.
1718
+ > 필드 타입을 일관된 글리프와 선택적 텍스트 레이블로 표현합니다. 문자열·숫자·날짜·IP·지오 등 분석 스키마 타입마다 같은 아이콘과 팔레트 슬롯을 씁니다.
1719
1719
 
1720
1720
  **Import:** `import { FieldToken } from "@reopt-ai/opt-ui"`
1721
1721
 
@@ -1727,6 +1727,8 @@ import {
1727
1727
  | `shape` | `"square" \| "circle"` | | "square" | 토큰 모양 |
1728
1728
  | `title` | `string` | | | 접근성 이름. 기본값은 타입 이름 |
1729
1729
  | `decorative` | `boolean` | | false | 인접 텍스트가 타입을 이미 말할 때 접근성 트리에서 제외 |
1730
+ | `withLabel` | `boolean` | | false | 글리프 옆에 타입 이름을 함께 표시 |
1731
+ | `label` | `string` | | | withLabel이 표시할 문구. 기본값은 타입 이름 |
1730
1732
  | `className` | `string` | | | 추가 CSS 클래스 |
1731
1733
 
1732
1734
  ### Facet
@@ -2270,12 +2272,12 @@ const MyDashboard = createBlock<MyDashboardProps>(
2270
2272
 
2271
2273
  **Import:** `import { StatusDot } from "@reopt-ai/opt-ui"`
2272
2274
 
2273
- | Prop | Type | Required | Default | Description |
2274
- | ---------- | ---------------------------------------------------------------------- | -------- | --------- | -------------------------------------- |
2275
- | `tone` | `"neutral" \| "muted" \| "info" \| "success" \| "warning" \| "danger"` | | "neutral" | 점 색상 |
2276
- | `size` | `"sm" \| "md"` | | "md" | 점과 글자 크기 |
2277
- | `children` | `ReactNode` | Yes | | 상태 라벨. 필수 — 색은 상태가 아닙니다 |
2278
- | `hint` | `string` | | | 판정 기준 툴팁 |
2275
+ | Prop | Type | Required | Default | Description |
2276
+ | ---------- | ---------------------------------------------------------------------- | -------- | --------- | -------------------------------------------------------------------------------------- |
2277
+ | `tone` | `"neutral" \| "muted" \| "info" \| "success" \| "warning" \| "danger"` | | "neutral" | 점 색상 |
2278
+ | `size` | `"sm" \| "md"` | | "md" | 점과 글자 크기 |
2279
+ | `children` | `ReactNode` | Yes | | 상태 라벨. 필수 — 색은 상태가 아닙니다 |
2280
+ | `hint` | `string` | | | 판정 기준. 호버·키보드 포커스로 열리는 툴팁이며, 지정하면 이 항목이 탭 정지점이 됩니다 |
2279
2281
 
2280
2282
  ### CopyButton
2281
2283
 
@@ -2307,3 +2309,4 @@ const MyDashboard = createBlock<MyDashboardProps>(
2307
2309
  | `fullWidth` | `boolean` | | false | 컨테이너를 균등 분할 |
2308
2310
  | `disabled` | `boolean` | | false | 전체 비활성 |
2309
2311
  | `aria-label` | `string` | Yes | | radiogroup 이름. 필수 |
2312
+ | `className` | `string` | | | 추가 CSS 클래스 |
package/dist/docs/02-components/02-visuals.md CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  title: "Visual Components"
3
3
  description: "0 Visual layer components — props, examples, keyboard shortcuts."
4
- version: "1.12.0"
4
+ version: "1.12.1"
5
5
  generated: true
6
6
  ---
7
7