@reopt-ai/opt-ui 1.12.0 → 1.12.2

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

@@ -1,7 +1,7 @@
 ---
 title: "Shell Components"
 description: "86 Shell layer components — props, examples, keyboard shortcuts."
-version: "1.12.0"
+version: "1.12.1"
 generated: true
 ---
 
@@ -299,37 +299,38 @@ import { AppShell } from "@reopt-ai/opt-ui";
 
 ## Data Display
 
-| Component           | Description                                                                                                                  | Key Exports                                   |
-| ------------------- | ---------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- |
-| DataTable           | 제네릭 데이터 테이블. 동적 컬럼, 결측값 안전 정렬, 키보드 컬럼 리사이즈, 보정된 인라인 진행률과 Composite 탐색을 지원합니다. | `DataTable`                                   |
-| InlineEditTable     | 인라인 편집 테이블. 더블클릭으로 셀 편집, Enter 확정, Escape 취소.                                                           | `InlineEditTable`                             |
-| TreeTable           | 계층형 트리 테이블. 재귀 행 렌더링 + 펼침/접기 셰브론.                                                                       | `TreeTable`                                   |
-| DomainTable         | 도메인 테이블. Composite 기반 그리드로 키보드 탐색 지원.                                                                     | `DomainTable`                                 |
-| QueryResultsTable   | 쿼리 결과 테이블. SQL 결과와 스크린 리더에 안내되는 로딩, 에러, 빈 상태를 지원합니다.                                        | `QueryResultsTable`                           |
-| DashboardGrid       | Composite 기반 통계 카드 그리드. 유효한 1–4열 레이아웃과 화살표 키 2D 탐색을 지원합니다.                                     | `DashboardGrid`                               |
-| SummaryRow          | 통계 요약 행. StatCard 그리드 레이아웃을 표준화합니다. loading 시 SkeletonCard 표시.                                         | `SummaryRow`                                  |
-| CodeSnippetViewer   | 코드 스니펫 뷰어. 줄 번호, 복사 버튼, 포커스 가능한 스크롤 영역, syntaxTheme 톤을 지원합니다.                                | `CodeSnippetViewer`                           |
-| CodeDiffViewer      | 코드 비교 뷰어. LCS 알고리즘 기반 unified/split 모드 diff와 포커스 가능한 스크롤 영역을 제공합니다.                          | `CodeDiffViewer`                              |
-| ConnectionIndicator | 연결 상태 표시기. connected, connecting, disconnected, error 상태를 지원합니다.                                              | `ConnectionIndicator`                         |
-| EventIcon           | 이벤트 아이콘. semantic key 또는 ReactNode 아이콘과 배경색을 표시합니다.                                                     | `EventIcon`, `POPULAR_ICONS`, `COLOR_PRESETS` |
+| Component           | Description                                                                                                                              | Key Exports                                   |
+| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- |
+| DataTable           | 제네릭 데이터 테이블. 제목은 opt-in이고 ariaLabel로 grid를 이름 붙이며, 동적 컬럼·안전 정렬·키보드 리사이즈·Composite 탐색을 지원합니다. | `DataTable`                                   |
+| InlineEditTable     | 인라인 편집 테이블. 더블클릭으로 셀 편집, Enter 확정, Escape 취소.                                                                       | `InlineEditTable`                             |
+| TreeTable           | 계층형 트리 테이블. 재귀 행 렌더링 + 펼침/접기 셰브론.                                                                                   | `TreeTable`                                   |
+| DomainTable         | 도메인 테이블. Composite 기반 그리드로 키보드 탐색 지원.                                                                                 | `DomainTable`                                 |
+| QueryResultsTable   | 쿼리 결과 테이블. SQL 결과와 스크린 리더에 안내되는 로딩, 에러, 빈 상태를 지원합니다.                                                    | `QueryResultsTable`                           |
+| DashboardGrid       | Composite 기반 통계 카드 그리드. 유효한 1–4열 레이아웃과 화살표 키 2D 탐색을 지원합니다.                                                 | `DashboardGrid`                               |
+| SummaryRow          | 통계 요약 행. StatCard 그리드 레이아웃을 표준화합니다. loading 시 SkeletonCard 표시.                                                     | `SummaryRow`                                  |
+| CodeSnippetViewer   | 코드 스니펫 뷰어. 줄 번호, 복사 버튼, 포커스 가능한 스크롤 영역, syntaxTheme 톤을 지원합니다.                                            | `CodeSnippetViewer`                           |
+| CodeDiffViewer      | 코드 비교 뷰어. LCS 알고리즘 기반 unified/split 모드 diff와 포커스 가능한 스크롤 영역을 제공합니다.                                      | `CodeDiffViewer`                              |
+| ConnectionIndicator | 연결 상태 표시기. connected, connecting, disconnected, error 상태를 지원합니다.                                                          | `ConnectionIndicator`                         |
+| EventIcon           | 이벤트 아이콘. semantic key 또는 ReactNode 아이콘과 배경색을 표시합니다.                                                                 | `EventIcon`, `POPULAR_ICONS`, `COLOR_PRESETS` |
 
 ### DataTable
 
-> 제네릭 데이터 테이블. 동적 컬럼, 결측값 안전 정렬, 키보드 컬럼 리사이즈, 보정된 인라인 진행률과 Composite 탐색을 지원합니다.
+> 제네릭 데이터 테이블. 제목은 opt-in이고 ariaLabel로 grid를 이름 붙이며, 동적 컬럼·안전 정렬·키보드 리사이즈·Composite 탐색을 지원합니다.
 
 **Import:** `import { DataTable } from "@reopt-ai/opt-ui"`
 **Dependencies:** composite-zone (core), button (core), checkbox (core)
 
 **DataTable:**
 
-| Prop           | Type                 | Required | Default             | Description                                         |
-| -------------- | -------------------- | -------- | ------------------- | --------------------------------------------------- |
-| `data`         | `T[]`                | Yes      |                     | 테이블 데이터 배열                                  |
-| `columns`      | `ColumnDef<T>[]`     | Yes      |                     | 컬럼 정의. { id, header, accessor, width?, align? } |
-| `keyExtractor` | `(row: T) => string` | Yes      |                     | 각 행의 고유 키 추출 함수                           |
-| `title`        | `string`             |          | "데이터 테이블"     | 테이블 제목                                         |
-| `onRowClick`   | `(row: T) => void`   |          |                     | 행 클릭 핸들러                                      |
-| `emptyMessage` | `string`             |          | "데이터가 없습니다" | 데이터 없을 때 표시할 메시지                        |
+| Prop           | Type                 | Required | Default             | Description                                                 |
+| -------------- | -------------------- | -------- | ------------------- | ----------------------------------------------------------- |
+| `data`         | `T[]`                | Yes      |                     | 테이블 데이터 배열                                          |
+| `columns`      | `ColumnDef<T>[]`     | Yes      |                     | 컬럼 정의. { id, header, accessor, width?, align? }         |
+| `keyExtractor` | `(row: T) => string` | Yes      |                     | 각 행의 고유 키 추출 함수                                   |
+| `title`        | `string`             |          |                     | 테이블 위에 표시할 제목. 생략하면 제목 영역을 렌더하지 않음 |
+| `ariaLabel`    | `string`             |          |                     | 보이는 제목이 없을 때 grid에 제공할 접근 가능한 이름        |
+| `onRowClick`   | `(row: T) => void`   |          |                     | 행 클릭 핸들러                                              |
+| `emptyMessage` | `string`             |          | "No data available" | 데이터 없을 때 표시할 메시지                                |
 
 **ColumnDef:**
 
@@ -1135,14 +1136,14 @@ const fields = [
 
 ## Analytics
 
-| Component        | Description                                                                                                      | Key Exports        |
-| ---------------- | ---------------------------------------------------------------------------------------------------------------- | ------------------ |
-| SqlEditor        | SQL 에디터. CodeMirror 기반의 SQL 편집기로 구문 강조와 자동 완성을 지원합니다.                                   | `SqlEditor`        |
-| EventMetaEditor  | 이벤트 메타 에디터. 레이블이 연결된 IconPicker + ColorPicker + TagInput 조합으로 이벤트 메타데이터를 편집합니다. | `EventMetaEditor`  |
-| PropertyExplorer | 프로퍼티 탐색기. 검색 가능한 속성 목록을 그룹별로 표시합니다.                                                    | `PropertyExplorer` |
-| RichTextEditor   | 마크다운 리치 텍스트 에디터. 서식 툴바 + textarea 조합.                                                          | `RichTextEditor`   |
-| ExportButton     | 데이터 내보내기 버튼. CSV/JSON 변환 내장, PDF는 콜백 위임. DropdownMenu 기반.                                    | `ExportButton`     |
-| InsightsPanel    | 이상 탐지 인사이트 패널. severity별 카드, 통계 필터, dismiss 기능, 검출 설정(유형/Z-score/days).                 | `InsightsPanel`    |
+| Component        | Description                                                                                                | Key Exports        |
+| ---------------- | ---------------------------------------------------------------------------------------------------------- | ------------------ |
+| SqlEditor        | SQL 에디터. CodeMirror 기반의 SQL 편집기로 구문 강조와 자동 완성을 지원합니다.                             | `SqlEditor`        |
+| EventMetaEditor  | 기본 이벤트 메타와 호출자 소유 섹션을 한 폼에서 편집하고, footer의 한 액션으로 함께 저장할 수 있습니다.    | `EventMetaEditor`  |
+| PropertyExplorer | 검색 가능한 속성 목록을 그룹별로 표시하고, 숨김 상태와 호출자 소유의 명시적인 편집 액션을 함께 제공합니다. | `PropertyExplorer` |
+| RichTextEditor   | 마크다운 리치 텍스트 에디터. 서식 툴바 + textarea 조합.                                                    | `RichTextEditor`   |
+| ExportButton     | 데이터 내보내기 버튼. CSV/JSON 변환 내장, PDF는 콜백 위임. DropdownMenu 기반.                              | `ExportButton`     |
+| InsightsPanel    | 이상 탐지 인사이트 패널. severity별 카드, 통계 필터, dismiss 기능, 검출 설정(유형/Z-score/days).           | `InsightsPanel`    |
 
 ### SqlEditor
 
@@ -1172,18 +1173,61 @@ const fields = [
 
 ### EventMetaEditor
 
-> 이벤트 메타 에디터. 레이블이 연결된 IconPicker + ColorPicker + TagInput 조합으로 이벤트 메타데이터를 편집합니다.
+> 기본 이벤트 메타와 호출자 소유 섹션을 한 폼에서 편집하고, footer의 한 액션으로 함께 저장할 수 있습니다.
 
 **Import:** `import { EventMetaEditor } from "@reopt-ai/opt-ui"`
 **Dependencies:** input (core), icon-picker (core), color-picker (core), tag-input (core)
 
+**EventMetaEditor:**
+
+| Prop        | Type                        | Required | Default | Description                                            |
+| ----------- | --------------------------- | -------- | ------- | ------------------------------------------------------ |
+| `value`     | `EventMeta`                 | Yes      |         | 편집 중인 이벤트 메타데이터                            |
+| `onChange`  | `(meta: EventMeta) => void` | Yes      |         | 메타데이터 변경                                        |
+| `icons`     | `IconDef[]`                 |          |         | 선택 가능한 아이콘                                     |
+| `sections`  | `EventMetaEditorSection[]`  |          |         | 기본 여섯 필드 뒤에 렌더할 호출자 소유 섹션            |
+| `footer`    | `ReactNode`                 |          |         | 내장 필드와 추가 섹션을 함께 저장하는 마지막 액션 영역 |
+| `className` | `string`                    |          |         | 추가 CSS 클래스                                        |
+| `labels`    | `EventMetaEditorLabels`     |          |         | 필드 레이블과 placeholder 문구                         |
+
+**EventMetaEditorSection:**
+
+| Prop          | Type        | Required | Default | Description                  |
+| ------------- | ----------- | -------- | ------- | ---------------------------- |
+| `id`          | `string`    | Yes      |         | 섹션 키                      |
+| `title`       | `ReactNode` |          |         | 섹션 제목                    |
+| `description` | `ReactNode` |          |         | 섹션 변경이 미치는 영향 안내 |
+| `children`    | `ReactNode` | Yes      |         | 호출자가 소유하는 필드       |
+
 ### PropertyExplorer
 
-> 프로퍼티 탐색기. 검색 가능한 속성 목록을 그룹별로 표시합니다.
+> 검색 가능한 속성 목록을 그룹별로 표시하고, 숨김 상태와 호출자 소유의 명시적인 편집 액션을 함께 제공합니다.
 
 **Import:** `import { PropertyExplorer } from "@reopt-ai/opt-ui"`
 **Dependencies:** input (core)
 
+**PropertyExplorer:**
+
+| Prop        | Type                              | Required | Default | Description                                                    |
+| ----------- | --------------------------------- | -------- | ------- | -------------------------------------------------------------- |
+| `groups`    | `PropertyGroup[]`                 | Yes      |         | 그룹별 속성 목록. 각 속성은 dataType과 hidden 상태를 포함 가능 |
+| `onSelect`  | `(property: PropertyDef) => void` |          |         | 속성 선택                                                      |
+| `onEdit`    | `(property: PropertyDef) => void` |          |         | 행에 명시적인 편집 버튼을 표시하고 선택한 속성을 전달          |
+| `className` | `string`                          |          |         | 추가 CSS 클래스                                                |
+| `labels`    | `PropertyExplorerLabels`          |          |         | 검색·빈 상태·편집·숨김 문구                                    |
+
+**PropertyDef:**
+
+| Prop           | Type            | Required | Default | Description                                       |
+| -------------- | --------------- | -------- | ------- | ------------------------------------------------- |
+| `name`         | `string`        | Yes      |         | 속성 이름                                         |
+| `type`         | `string`        | Yes      |         | 원본 스키마 타입                                  |
+| `dataType`     | `FieldDataType` |          |         | 호출자가 이미 판정한 opt-ui 필드 타입             |
+| `description`  | `string`        |          |         | 속성 설명                                         |
+| `exampleValue` | `string`        |          |         | 예시 값                                           |
+| `eventCount`   | `number`        |          |         | 관측 이벤트 수                                    |
+| `hidden`       | `boolean`       |          |         | 피커에서는 숨기되 탐색기에서는 흐리게 표시할 상태 |
+
 ### RichTextEditor
 
 > 마크다운 리치 텍스트 에디터. 서식 툴바 + textarea 조합.
@@ -1724,6 +1768,8 @@ const messages = [
 | `footer`      | `ReactNode`             |          |         | 인스펙터 하단                                  |
 | `breakpoint`  | `"lg" \| "xl" \| "2xl"` |          | "xl"    | 이 폭 이상이면 push                            |
 | `width`       | `"sm" \| "md" \| "lg"`  |          | "md"    | push 레이아웃에서의 인스펙터 폭                |
+| `labels`      | `InspectorLayoutLabels` |          |         | 닫기 버튼 등 인스펙터 문구                     |
+| `className`   | `string`                |          |         | 추가 CSS 클래스                                |
 
 ### QueryFilterBar
 
@@ -1742,6 +1788,8 @@ const messages = [
 | `live`           | `boolean`                |          | false   | 매 입력마다 커밋                                                           |
 | `disabled`       | `boolean`                |          | false   | 전체 비활성                                                                |
 | `queryBarLabels` | `QueryBarLabels`         |          |         | QueryBar로 통과되는 나머지 문구. placeholder/ariaLabel은 labels가 이깁니다 |
+| `labels`         | `QueryFilterBarLabels`   |          |         | 검색·필터·초기화 문구                                                      |
+| `className`      | `string`                 |          |         | 추가 CSS 클래스                                                            |
 
 ### CatalogFrame
 
@@ -1784,6 +1832,7 @@ const messages = [
 | `error`                | `ReactNode`                    |          |         | 읽기 실패. 빈 목록과 다른 답                                      |
 | `onRetry`              | `() => void`                   |          |         | 재시도                                                            |
 | `labels`               | `CatalogFrameLabels`           |          |         | 빈/필터된 빈/에러 문구                                            |
+| `className`            | `string`                       |          |         | 추가 CSS 클래스                                                   |
 
 **CatalogRowActions:**
 
@@ -1794,6 +1843,16 @@ const messages = [
 | `visibleCount` | `number`                  |          | 2       | 오버플로 전에 노출할 개수. available 필터링 후에 적용됨 |
 | `labels`       | `CatalogRowActionsLabels` |          |         | 그룹·오버플로 라벨                                      |
 
+**CatalogRowAction:**
+
+| Prop        | Type                   | Required | Default | Description                                     |
+| ----------- | ---------------------- | -------- | ------- | ----------------------------------------------- |
+| `id`        | `string`               | Yes      |         | 액션 키                                         |
+| `label`     | `string`               | Yes      |         | 액션 문구                                       |
+| `icon`      | `ReactNode`            |          |         | 선택적 액션 아이콘                              |
+| `onSelect`  | `(item: T) => void`    | Yes      |         | 행과 함께 호출되는 액션                         |
+| `available` | `(item: T) => boolean` |          |         | 이 행에 적용되지 않는 액션을 비활성화 대신 제거 |
+
 **CatalogCellControls:**
 
 | Prop       | Type        | Required | Default | Description                        |

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.12.0"
+version: "1.12.1"
 generated: true
 ---
 

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

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

package/dist/{field-sidebar-BuO37l4c.js → field-sidebar-BXAXigMS.js}

@@ -1,5 +1,5 @@
 "use client";
-import { $n as OPT_TEXT_LABEL, $t as CompositeProvider, A as FormRadio$1, An as OPT_BADGE_RED, B as FormSubmit$1, Bn as OPT_FOCUS, Bt as SelectLabel$1, Dn as OPT_BADGE_BLUE, Dt as ComboboxPopover$1, E as FormLabel$1, En as OPT_ANIMATE_ENTER_EXIT, Et as ComboboxItem$1, F as FormSelect, Fn as OPT_DIVIDER, Gn as OPT_ITEM_BASE, Gt as TabList$1, Ht as SelectRoot$1, I as FormSelectItem, It as DialogHeading$1, Jt as DisclosureContent$1, K as useFormStore, Kn as OPT_SURFACE, Kt as TabPanel$1, L as FormSelectPopover, Ln as OPT_DOT_GREEN, Lt as DialogPanel$1, Mn as OPT_BORDER, Nn as OPT_DISCLOSURE_CONTENT, On as OPT_BADGE_GREEN, Ot as ComboboxRoot$1, P as FormRoot$1, Pn as OPT_DISCLOSURE_TRIGGER, Qt as CompositeItem, Rn as OPT_DOT_RED, Rt as DialogRoot$1, St as ComboboxEmpty, T as FormInput$1, Tt as ComboboxInput$1, U as FormTextarea, Un as OPT_INPUT, Ut as SelectTrigger$1, V as FormSwitch$1, Vn as OPT_FOCUS_VISIBLE, Vt as SelectPopover$1, Wt as Tab$1, Xn as OPT_TD, Xt as DisclosureTrigger$1, Y as TagInput, Yn as OPT_TABLE_ROW_ACTIVE, Yt as DisclosureRoot$1, Zn as OPT_TD_MUTED, Zt as Composite, _t as MenuRoot$1, ar as _objectWithoutProperties, at as ToolbarButton$1, b as FormError$1, bt as MenubarContainer$1, c as Checkbox, cn as Badge, ct as ToolbarSeparator$1, dt as TooltipProvider$1, en as CompositeRow, er as OPT_TEXT_PRIMARY, et as PopoverContent$1, ft as MenuButtonArrow$1, gt as MenuPopover$1, h as FormCheckbox$1, hn as Skeleton, ht as MenuItemRadio$1, i as FieldToken, in as Input, ir as _objectSpread2, j as FormRadioGroup$1, jn as OPT_BADGE_YELLOW, jt as DialogDescription$1, kn as OPT_BADGE_NEUTRAL, ln as EmptyState, lt as Tooltip$1, m as formatOptTime, mn as StatCard, mt as MenuItemCheckbox$1, n as Highlight, nn as Meter$1, nr as OPT_TEXT_TERTIARY, nt as PopoverTrigger$1, on as Alert, or as Kbd, ot as ToolbarContainer$1, pt as MenuItem$1, qn as OPT_SURFACE_POPOVER, qt as TabsRoot$1, rr as OPT_TH, s as Pagination, sn as Spinner, sr as cn, st as ToolbarRoot$1, t as TextTruncate, tr as OPT_TEXT_SECONDARY, tt as PopoverRoot$1, u as OPT_UI_DEFAULT_LOCALE, un as Button, ut as TooltipAnchor$1, vt as MenuSeparator$1, wn as OPT_ACTIVE_ITEM, xt as MenubarRoot$1, yt as MenuTrigger$1, zn as OPT_DOT_YELLOW, zt as SelectItem$1 } from "./text-truncate-DSuZECy0.js";
+import { $n as OPT_TEXT_LABEL, $t as ToolbarButton$1, A as FormRadio$1, An as OPT_BADGE_RED, At as DialogPanel$1, B as FormSubmit$1, Bn as OPT_FOCUS, Bt as TabsRoot$1, Dn as OPT_BADGE_BLUE, E as FormLabel$1, En as OPT_ANIMATE_ENTER_EXIT, F as FormSelect, Fn as OPT_DIVIDER, Ft as SelectRoot$1, Gn as OPT_ITEM_BASE, Gt as CompositeItem, Ht as DisclosureRoot$1, I as FormSelectItem, It as SelectTrigger$1, K as useFormStore, Kn as OPT_SURFACE, Kt as CompositeProvider, L as FormSelectPopover, Ln as OPT_DOT_GREEN, Lt as Tab$1, Mn as OPT_BORDER, Mt as SelectItem$1, Nn as OPT_DISCLOSURE_CONTENT, Nt as SelectLabel$1, On as OPT_BADGE_GREEN, P as FormRoot$1, Pn as OPT_DISCLOSURE_TRIGGER, Pt as SelectPopover$1, Rn as OPT_DOT_RED, Rt as TabList$1, T as FormInput$1, U as FormTextarea, Un as OPT_INPUT, Ut as DisclosureTrigger$1, V as FormSwitch$1, Vn as OPT_FOCUS_VISIBLE, Vt as DisclosureContent$1, Wt as Composite, Xn as OPT_TD, Y as TagInput, Yn as OPT_TABLE_ROW_ACTIVE, Yt as Meter$1, Zn as OPT_TD_MUTED, Zt as Input, an as TooltipProvider$1, ar as _objectWithoutProperties, at as MenuButtonArrow$1, b as FormError$1, bt as ComboboxPopover$1, c as Checkbox, cn as Badge, ct as MenuItemRadio$1, dt as MenuSeparator$1, en as ToolbarContainer$1, er as OPT_TEXT_PRIMARY, et as PopoverContent$1, ft as MenuTrigger$1, h as FormCheckbox$1, hn as Skeleton, ht as ComboboxEmpty, i as FieldToken, in as TooltipAnchor$1, ir as _objectSpread2, j as FormRadioGroup$1, jn as OPT_BADGE_YELLOW, jt as DialogRoot$1, kn as OPT_BADGE_NEUTRAL, kt as DialogHeading$1, ln as EmptyState, lt as MenuPopover$1, m as formatOptTime, mn as StatCard, mt as MenubarRoot$1, n as Highlight, nn as ToolbarSeparator$1, nr as OPT_TEXT_TERTIARY, nt as PopoverTrigger$1, on as Alert, or as Kbd, ot as MenuItem$1, pt as MenubarContainer$1, qn as OPT_SURFACE_POPOVER, qt as CompositeRow, rn as Tooltip$1, rr as OPT_TH, s as Pagination, sn as Spinner, sr as cn, st as MenuItemCheckbox$1, t as TextTruncate, tn as ToolbarRoot$1, tr as OPT_TEXT_SECONDARY, tt as PopoverRoot$1, u as OPT_UI_DEFAULT_LOCALE, un as Button, ut as MenuRoot$1, vt as ComboboxInput$1, wn as OPT_ACTIVE_ITEM, wt as DialogDescription$1, xt as ComboboxRoot$1, yt as ComboboxItem$1, zn as OPT_DOT_YELLOW, zt as TabPanel$1 } from "./text-truncate-BFWd2cE_.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Fragment as Fragment$1, createContext, forwardRef, memo, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
@@ -2943,7 +2943,7 @@ function Flyout({ open, onClose, title, description, type = "overlay", side = "r
 	});
 	if (type === "inline") return panel;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [scrim && /* @__PURE__ */ jsx("div", {
-		className: "bg-overlay fixed inset-0 z-30",
+		className: "bg-scrim fixed inset-0 z-30",
 		"aria-hidden": "true"
 	}), panel] });
 }

package/dist/{field-sidebar-BYgEmdy0.cjs → field-sidebar-D0ITbhfJ.cjs}

@@ -1,5 +1,5 @@
 "use client";
-const require_text_truncate = require("./text-truncate-I1XLWmRa.cjs");
+const require_text_truncate = require("./text-truncate-DsG5UAOY.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
 react = require_text_truncate.__toESM(react, 1);
@@ -2944,7 +2944,7 @@ function Flyout({ open, onClose, title, description, type = "overlay", side = "r
 	});
 	if (type === "inline") return panel;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [scrim && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "bg-overlay fixed inset-0 z-30",
+		className: "bg-scrim fixed inset-0 z-30",
 		"aria-hidden": "true"
 	}), panel] });
 }

package/dist/index.cjs

@@ -1,8 +1,8 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_text_truncate = require("./text-truncate-I1XLWmRa.cjs");
-const require_key_pad_menu = require("./key-pad-menu-SItoHPLu.cjs");
-const require_field_sidebar = require("./field-sidebar-BYgEmdy0.cjs");
+const require_text_truncate = require("./text-truncate-DsG5UAOY.cjs");
+const require_key_pad_menu = require("./key-pad-menu-1YN221Oi.cjs");
+const require_field_sidebar = require("./field-sidebar-D0ITbhfJ.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
 react = require_text_truncate.__toESM(react, 1);
@@ -149,6 +149,10 @@ const dotSize = {
 * The dot is decorative on purpose. It never carries meaning the text does not
 * also carry, so the component cannot be used to say something in colour alone.
 *
+* Without a `hint` this renders one span and nothing else: a table repeats this
+* on every row, and a tooltip's provider, listeners and floating context are
+* not a cost worth paying hundreds of times for rows that have nothing to say.
+*
 * @example
 * ```tsx
 * <StatusDot tone="warning" hint="7일 이상 수신되지 않음">비활성</StatusDot>
@@ -156,9 +160,9 @@ const dotSize = {
 */
 function StatusDot(_ref) {
 	let { tone = "neutral", size = "md", hint, className, children } = _ref, props = require_text_truncate._objectWithoutProperties(_ref, _excluded$1);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({
-		className: require_text_truncate.cn("inline-flex items-center whitespace-nowrap", sizeStyles$2[size], textTone[tone], className),
-		title: hint
+	const dot = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({
+		className: require_text_truncate.cn("inline-flex items-center whitespace-nowrap", sizeStyles$2[size], textTone[tone], hint && "focus-visible:ring-ring rounded-sm outline-none focus-visible:ring-2", className),
+		tabIndex: hint ? 0 : void 0
 	}, props), {}, {
 		"data-opt-id": "N51AT",
 		"data-opt-slug": "status-dot.StatusDot",
@@ -168,6 +172,8 @@ function StatusDot(_ref) {
 			"aria-hidden": "true"
 		}), children]
 	}));
+	if (!hint) return dot;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_text_truncate.TooltipProvider, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.TooltipAnchor, { render: dot }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_truncate.Tooltip, { children: hint })] });
 }
 //#endregion
 //#region src/core/copy-button.tsx
@@ -4478,6 +4484,19 @@ function toText(value) {
 	if (typeof value === "number" || typeof value === "boolean") return String(value);
 	return JSON.stringify(value);
 }
+/**
+* The values one field holds, as a list.
+*
+* A clause names a single value, so an array field has to be read element by
+* element: `tag:pay` asks whether *any* tag is `pay`, not whether the whole
+* list stringifies to it — and `toText` on an array produces `["pay","cart"]`,
+* which no user ever types. Scalars read as a list of one so both shapes take
+* the same path, and negation stays where it already is: `matchesQuery` flips
+* the result, so `-tag:pay` correctly means "no element matches".
+*/
+function readValues(value) {
+	return Array.isArray(value) ? value : [value];
+}
 function compare(left, right) {
 	const leftNumber = typeof left === "number" ? left : Number(toText(left));
 	const rightNumber = Number(right);
@@ -4488,9 +4507,9 @@ function matchesClause(clause, read, searchable) {
 	if (clause.type === "term") return searchable().toLowerCase().includes(clause.value.toLowerCase());
 	const value = read(clause.field);
 	switch (clause.operator) {
-		case "exists": return value !== void 0 && value !== null && value !== "";
-		case "eq": return clause.values.some((candidate) => toText(value).toLowerCase() === candidate.toLowerCase());
-		case "contains": return clause.values.some((candidate) => toText(value).toLowerCase().includes(candidate.toLowerCase()));
+		case "exists": return readValues(value).some((item) => item !== void 0 && item !== null && item !== "");
+		case "eq": return clause.values.some((candidate) => readValues(value).some((item) => toText(item).toLowerCase() === candidate.toLowerCase()));
+		case "contains": return clause.values.some((candidate) => readValues(value).some((item) => toText(item).toLowerCase().includes(candidate.toLowerCase())));
 		case "gt":
 			var _clause$values$;
 			return compare(value, (_clause$values$ = clause.values[0]) !== null && _clause$values$ !== void 0 ? _clause$values$ : "") > 0;
@@ -4526,7 +4545,7 @@ function matchesQueryObject(query, row, options = {}) {
 	let cached = null;
 	const searchable = () => {
 		var _cached;
-		(_cached = cached) !== null && _cached !== void 0 || (cached = [...Object.values(row).filter((value) => typeof value !== "object"), ...Object.values(nested !== null && nested !== void 0 ? nested : {})].map(toText).join(" "));
+		(_cached = cached) !== null && _cached !== void 0 || (cached = [...Object.values(row).flatMap((value) => Array.isArray(value) ? value.filter((item) => typeof item !== "object") : typeof value === "object" ? [] : [value]), ...Object.values(nested !== null && nested !== void 0 ? nested : {})].map(toText).join(" "));
 		return cached;
 	};
 	return matchesQuery(query, read, searchable);

package/dist/index.d.cts

@@ -64,12 +64,13 @@ interface StatusDotProps extends Omit<ComponentPropsWithoutRef<"span">, "childre
    */
   children: ReactNode;
   /**
-   * How the state was decided, as a `title`.
+   * How the state was decided.
    *
-   * Mouse-only: a `title` does not open on keyboard focus and is unreachable on
-   * touch. It is a bonus for the reader who hovers, never the only place a rule
-   * lives — if knowing the rule is required to act, put it in text beside the
-   * status instead.
+   * Shown in a tooltip that opens on hover and on keyboard focus, so the rule
+   * is reachable without a pointer. Giving a hint makes the dot a tab stop —
+   * the only way a keyboard reader can reach it — so it is still a bonus for
+   * the curious rather than the only place a rule lives: if knowing the rule is
+   * required to act, put it in text beside the status instead.
    */
   hint?: string;
 }
@@ -84,6 +85,10 @@ interface StatusDotProps extends Omit<ComponentPropsWithoutRef<"span">, "childre
  * The dot is decorative on purpose. It never carries meaning the text does not
  * also carry, so the component cannot be used to say something in colour alone.
  *
+ * Without a `hint` this renders one span and nothing else: a table repeats this
+ * on every row, and a tooltip's provider, listeners and floating context are
+ * not a cost worth paying hundreds of times for rows that have nothing to say.
+ *
  * @example
  * ```tsx
  * <StatusDot tone="warning" hint="7일 이상 수신되지 않음">비활성</StatusDot>

package/dist/index.d.ts

@@ -64,12 +64,13 @@ interface StatusDotProps extends Omit<ComponentPropsWithoutRef<"span">, "childre
    */
   children: ReactNode;
   /**
-   * How the state was decided, as a `title`.
+   * How the state was decided.
    *
-   * Mouse-only: a `title` does not open on keyboard focus and is unreachable on
-   * touch. It is a bonus for the reader who hovers, never the only place a rule
-   * lives — if knowing the rule is required to act, put it in text beside the
-   * status instead.
+   * Shown in a tooltip that opens on hover and on keyboard focus, so the rule
+   * is reachable without a pointer. Giving a hint makes the dot a tab stop —
+   * the only way a keyboard reader can reach it — so it is still a bonus for
+   * the curious rather than the only place a rule lives: if knowing the rule is
+   * required to act, put it in text beside the status instead.
    */
   hint?: string;
 }
@@ -84,6 +85,10 @@ interface StatusDotProps extends Omit<ComponentPropsWithoutRef<"span">, "childre
  * The dot is decorative on purpose. It never carries meaning the text does not
  * also carry, so the component cannot be used to say something in colour alone.
  *
+ * Without a `hint` this renders one span and nothing else: a table repeats this
+ * on every row, and a tooltip's provider, listeners and floating context are
+ * not a cost worth paying hundreds of times for rows that have nothing to say.
+ *
  * @example
  * ```tsx
  * <StatusDot tone="warning" hint="7일 이상 수신되지 않음">비활성</StatusDot>

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
-import { $ as PopoverClose, $t as CompositeProvider, A as FormRadio, An as OPT_BADGE_RED, At as DialogBody, B as FormSubmit, Bn as OPT_FOCUS, Bt as SelectLabel, C as FormGroupLabel, Ct as ComboboxGroup, D as FormNumberInput, Dn as OPT_BADGE_BLUE, Dt as ComboboxPopover, E as FormLabel, Et as ComboboxItem, F as FormSelect, Ft as DialogHeader, G as useFormContext, Gt as TabList, H as FormTagInput, Hn as OPT_HOVER_ITEM, Ht as SelectRoot, I as FormSelectItem, In as OPT_DOT_GRAY, It as DialogHeading, J as DateRangePicker, Jt as DisclosureContent, K as useFormStore, Kt as TabPanel, L as FormSelectPopover, Ln as OPT_DOT_GREEN, Lt as DialogPanel, M as FormRemove, Mn as OPT_BORDER, Mt as DialogDisclosure, N as FormReset, Nt as DialogDismiss, O as FormProvider, On as OPT_BADGE_GREEN, Ot as ComboboxRoot, P as FormRoot, Pt as DialogFooter, Q as ColorPicker, Qt as CompositeItem, R as FormSlider, Rn as OPT_DOT_RED, Rt as DialogRoot, S as FormGroup, St as ComboboxEmpty, T as FormInput, Tt as ComboboxInput, U as FormTextarea, Un as OPT_INPUT, Ut as SelectTrigger, V as FormSwitch, Vn as OPT_FOCUS_VISIBLE, Vt as SelectPopover, W as useFieldValue, Wt as Tab, X as IconPicker, Xn as OPT_TD, Xt as DisclosureTrigger, Y as TagInput, Yt as DisclosureRoot, Z as getIconRegistryEntry, Zt as Composite, _ as FormControl, _n as SkeletonCard, _t as MenuRoot, a as FieldTokenLegend, an as useInputId, ar as _objectWithoutProperties, at as ToolbarButton, b as FormError, bn as useControlledState, bt as MenubarContainer, c as Checkbox, cn as Badge, ct as ToolbarSeparator, d as formatOptDateTime, dn as koBreadcrumbLabels, dt as TooltipProvider, en as CompositeRow, er as OPT_TEXT_PRIMARY, et as PopoverContent, f as formatOptNumber, fn as koComboboxLabels, ft as MenuButtonArrow, g as FormColorPicker, gn as SkeletonAvatar, gt as MenuPopover, h as FormCheckbox, hn as Skeleton, ht as MenuItemRadio, i as FieldToken, in as Input, ir as _objectSpread2, it as NumberInput, j as FormRadioGroup, jn as OPT_BADGE_YELLOW, jt as DialogDescription, k as FormPush, kn as OPT_BADGE_NEUTRAL, kt as AlertDialogPanel, l as CheckboxGroup, ln as EmptyState, lt as Tooltip, m as formatOptTime, mn as StatCard, mt as MenuItemCheckbox, n as Highlight, nn as Meter, nr as OPT_TEXT_TERTIARY, nt as PopoverTrigger, o as resolveFieldType, on as Alert, or as Kbd, ot as ToolbarContainer, p as formatOptShortDate, pn as koStarRatingLabels, pt as MenuItem, q as DEFAULT_PRESETS, qt as TabsRoot, r as FIELD_TYPE_TOKENS, rn as StarRating, rr as OPT_TH, rt as Slider, s as Pagination, sn as Spinner, sr as cn, st as ToolbarRoot, t as TextTruncate, tn as CompositeZone, tr as OPT_TEXT_SECONDARY, tt as PopoverRoot, un as Button, ut as TooltipAnchor, v as FormDateRangePicker, vn as SkeletonTable, vt as MenuSeparator, w as FormIconPicker, wt as ComboboxGroupLabel, x as FormField, xt as MenubarRoot, y as FormDescription, yn as SkeletonText, yt as MenuTrigger, z as FormStarRating, zn as OPT_DOT_YELLOW, zt as SelectItem } from "./text-truncate-DSuZECy0.js";
-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, N as LoadingOverlay, 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";
-import { $ as CommandGroup, A as ToastProvider, B as FaqAccordion, C as Flyout, D as KeyValueEditor, E as WorkflowCanvas, F as BranchSelect, G as StatusSelect, H as EditorToolbar, I as EnvPanel, J as CommandPaletteTrigger, K as SearchCombobox, L as ProjectSwitcher, M as useToast, N as DataTable, O as FailureList, P as DomainTable, Q as CommandEmpty, R as DeploymentTimeline, S as withoutField, T as EventTimeline, U as SidebarNav, V as ContentTabs, W as AppMenubar, X as Command, Y as CommandPalette, Z as CommandDialog, _ as fieldValues, a as TimeRangeControl, b as removeClause, c as describeClause, d as quoteValue, et as CommandInput, f as parseQuery, g as applyCellAction, h as addClause, i as DEFAULT_TIME_PRESETS, it as CommandShortcut, j as toast, k as NotificationToast, l as formatClause, m as EMPTY_QUERY, n as LogTable, nt as CommandList, o as useAutoRefresh, p as parseQueryWithDiagnostics, q as DashboardGrid, r as TimeSeriesPanel, rt as CommandSeparator, s as QueryBar, t as FieldSidebar, tt as CommandItem, u as formatQuery, v as isEmptyQuery, w as ScoreBreakdown, x as withFieldValue, y as queryFields, z as SettingsForm } from "./field-sidebar-BuO37l4c.js";
+import { $ as PopoverClose, $t as ToolbarButton, A as FormRadio, An as OPT_BADGE_RED, At as DialogPanel, B as FormSubmit, Bn as OPT_FOCUS, Bt as TabsRoot, C as FormGroupLabel, Ct as DialogBody, D as FormNumberInput, Dn as OPT_BADGE_BLUE, Dt as DialogFooter, E as FormLabel, Et as DialogDismiss, F as FormSelect, Ft as SelectRoot, G as useFormContext, Gt as CompositeItem, H as FormTagInput, Hn as OPT_HOVER_ITEM, Ht as DisclosureRoot, I as FormSelectItem, In as OPT_DOT_GRAY, It as SelectTrigger, J as DateRangePicker, Jt as CompositeZone, K as useFormStore, Kt as CompositeProvider, L as FormSelectPopover, Ln as OPT_DOT_GREEN, Lt as Tab, M as FormRemove, Mn as OPT_BORDER, Mt as SelectItem, N as FormReset, Nt as SelectLabel, O as FormProvider, On as OPT_BADGE_GREEN, Ot as DialogHeader, P as FormRoot, Pt as SelectPopover, Q as ColorPicker, Qt as useInputId, R as FormSlider, Rn as OPT_DOT_RED, Rt as TabList, S as FormGroup, St as AlertDialogPanel, T as FormInput, Tt as DialogDisclosure, U as FormTextarea, Un as OPT_INPUT, Ut as DisclosureTrigger, V as FormSwitch, Vn as OPT_FOCUS_VISIBLE, Vt as DisclosureContent, W as useFieldValue, Wt as Composite, X as IconPicker, Xn as OPT_TD, Xt as StarRating, Y as TagInput, Yt as Meter, Z as getIconRegistryEntry, Zt as Input, _ as FormControl, _n as SkeletonCard, _t as ComboboxGroupLabel, a as FieldTokenLegend, an as TooltipProvider, ar as _objectWithoutProperties, at as MenuButtonArrow, b as FormError, bn as useControlledState, bt as ComboboxPopover, c as Checkbox, cn as Badge, ct as MenuItemRadio, d as formatOptDateTime, dn as koBreadcrumbLabels, dt as MenuSeparator, en as ToolbarContainer, er as OPT_TEXT_PRIMARY, et as PopoverContent, f as formatOptNumber, fn as koComboboxLabels, ft as MenuTrigger, g as FormColorPicker, gn as SkeletonAvatar, gt as ComboboxGroup, h as FormCheckbox, hn as Skeleton, ht as ComboboxEmpty, i as FieldToken, in as TooltipAnchor, ir as _objectSpread2, it as NumberInput, j as FormRadioGroup, jn as OPT_BADGE_YELLOW, jt as DialogRoot, k as FormPush, kn as OPT_BADGE_NEUTRAL, kt as DialogHeading, l as CheckboxGroup, ln as EmptyState, lt as MenuPopover, m as formatOptTime, mn as StatCard, mt as MenubarRoot, n as Highlight, nn as ToolbarSeparator, nr as OPT_TEXT_TERTIARY, nt as PopoverTrigger, o as resolveFieldType, on as Alert, or as Kbd, ot as MenuItem, p as formatOptShortDate, pn as koStarRatingLabels, pt as MenubarContainer, q as DEFAULT_PRESETS, qt as CompositeRow, r as FIELD_TYPE_TOKENS, rn as Tooltip, rr as OPT_TH, rt as Slider, s as Pagination, sn as Spinner, sr as cn, st as MenuItemCheckbox, t as TextTruncate, tn as ToolbarRoot, tr as OPT_TEXT_SECONDARY, tt as PopoverRoot, un as Button, ut as MenuRoot, v as FormDateRangePicker, vn as SkeletonTable, vt as ComboboxInput, w as FormIconPicker, wt as DialogDescription, x as FormField, xt as ComboboxRoot, y as FormDescription, yn as SkeletonText, yt as ComboboxItem, z as FormStarRating, zn as OPT_DOT_YELLOW, zt as TabPanel } from "./text-truncate-BFWd2cE_.js";
+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, N as LoadingOverlay, 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";
+import { $ as CommandGroup, A as ToastProvider, B as FaqAccordion, C as Flyout, D as KeyValueEditor, E as WorkflowCanvas, F as BranchSelect, G as StatusSelect, H as EditorToolbar, I as EnvPanel, J as CommandPaletteTrigger, K as SearchCombobox, L as ProjectSwitcher, M as useToast, N as DataTable, O as FailureList, P as DomainTable, Q as CommandEmpty, R as DeploymentTimeline, S as withoutField, T as EventTimeline, U as SidebarNav, V as ContentTabs, W as AppMenubar, X as Command, Y as CommandPalette, Z as CommandDialog, _ as fieldValues, a as TimeRangeControl, b as removeClause, c as describeClause, d as quoteValue, et as CommandInput, f as parseQuery, g as applyCellAction, h as addClause, i as DEFAULT_TIME_PRESETS, it as CommandShortcut, j as toast, k as NotificationToast, l as formatClause, m as EMPTY_QUERY, n as LogTable, nt as CommandList, o as useAutoRefresh, p as parseQueryWithDiagnostics, q as DashboardGrid, r as TimeSeriesPanel, rt as CommandSeparator, s as QueryBar, t as FieldSidebar, tt as CommandItem, u as formatQuery, v as isEmptyQuery, w as ScoreBreakdown, x as withFieldValue, y as queryFields, z as SettingsForm } from "./field-sidebar-BXAXigMS.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Component, createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
@@ -149,6 +149,10 @@ const dotSize = {
 * The dot is decorative on purpose. It never carries meaning the text does not
 * also carry, so the component cannot be used to say something in colour alone.
 *
+* Without a `hint` this renders one span and nothing else: a table repeats this
+* on every row, and a tooltip's provider, listeners and floating context are
+* not a cost worth paying hundreds of times for rows that have nothing to say.
+*
 * @example
 * ```tsx
 * <StatusDot tone="warning" hint="7일 이상 수신되지 않음">비활성</StatusDot>
@@ -156,9 +160,9 @@ const dotSize = {
 */
 function StatusDot(_ref) {
 	let { tone = "neutral", size = "md", hint, className, children } = _ref, props = _objectWithoutProperties(_ref, _excluded$1);
-	return /* @__PURE__ */ jsxs("span", _objectSpread2(_objectSpread2({
-		className: cn("inline-flex items-center whitespace-nowrap", sizeStyles$2[size], textTone[tone], className),
-		title: hint
+	const dot = /* @__PURE__ */ jsxs("span", _objectSpread2(_objectSpread2({
+		className: cn("inline-flex items-center whitespace-nowrap", sizeStyles$2[size], textTone[tone], hint && "focus-visible:ring-ring rounded-sm outline-none focus-visible:ring-2", className),
+		tabIndex: hint ? 0 : void 0
 	}, props), {}, {
 		"data-opt-id": "N51AT",
 		"data-opt-slug": "status-dot.StatusDot",
@@ -168,6 +172,8 @@ function StatusDot(_ref) {
 			"aria-hidden": "true"
 		}), children]
 	}));
+	if (!hint) return dot;
+	return /* @__PURE__ */ jsxs(TooltipProvider, { children: [/* @__PURE__ */ jsx(TooltipAnchor, { render: dot }), /* @__PURE__ */ jsx(Tooltip, { children: hint })] });
 }
 //#endregion
 //#region src/core/copy-button.tsx
@@ -4478,6 +4484,19 @@ function toText(value) {
 	if (typeof value === "number" || typeof value === "boolean") return String(value);
 	return JSON.stringify(value);
 }
+/**
+* The values one field holds, as a list.
+*
+* A clause names a single value, so an array field has to be read element by
+* element: `tag:pay` asks whether *any* tag is `pay`, not whether the whole
+* list stringifies to it — and `toText` on an array produces `["pay","cart"]`,
+* which no user ever types. Scalars read as a list of one so both shapes take
+* the same path, and negation stays where it already is: `matchesQuery` flips
+* the result, so `-tag:pay` correctly means "no element matches".
+*/
+function readValues(value) {
+	return Array.isArray(value) ? value : [value];
+}
 function compare(left, right) {
 	const leftNumber = typeof left === "number" ? left : Number(toText(left));
 	const rightNumber = Number(right);
@@ -4488,9 +4507,9 @@ function matchesClause(clause, read, searchable) {
 	if (clause.type === "term") return searchable().toLowerCase().includes(clause.value.toLowerCase());
 	const value = read(clause.field);
 	switch (clause.operator) {
-		case "exists": return value !== void 0 && value !== null && value !== "";
-		case "eq": return clause.values.some((candidate) => toText(value).toLowerCase() === candidate.toLowerCase());
-		case "contains": return clause.values.some((candidate) => toText(value).toLowerCase().includes(candidate.toLowerCase()));
+		case "exists": return readValues(value).some((item) => item !== void 0 && item !== null && item !== "");
+		case "eq": return clause.values.some((candidate) => readValues(value).some((item) => toText(item).toLowerCase() === candidate.toLowerCase()));
+		case "contains": return clause.values.some((candidate) => readValues(value).some((item) => toText(item).toLowerCase().includes(candidate.toLowerCase())));
 		case "gt":
 			var _clause$values$;
 			return compare(value, (_clause$values$ = clause.values[0]) !== null && _clause$values$ !== void 0 ? _clause$values$ : "") > 0;
@@ -4526,7 +4545,7 @@ function matchesQueryObject(query, row, options = {}) {
 	let cached = null;
 	const searchable = () => {
 		var _cached;
-		(_cached = cached) !== null && _cached !== void 0 || (cached = [...Object.values(row).filter((value) => typeof value !== "object"), ...Object.values(nested !== null && nested !== void 0 ? nested : {})].map(toText).join(" "));
+		(_cached = cached) !== null && _cached !== void 0 || (cached = [...Object.values(row).flatMap((value) => Array.isArray(value) ? value.filter((item) => typeof item !== "object") : typeof value === "object" ? [] : [value]), ...Object.values(nested !== null && nested !== void 0 ? nested : {})].map(toText).join(" "));
 		return cached;
 	};
 	return matchesQuery(query, read, searchable);

package/dist/{key-pad-menu-SItoHPLu.cjs → key-pad-menu-1YN221Oi.cjs}

@@ -1,5 +1,5 @@
 "use client";
-const require_text_truncate = require("./text-truncate-I1XLWmRa.cjs");
+const require_text_truncate = require("./text-truncate-DsG5UAOY.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
 react = require_text_truncate.__toESM(react, 1);

package/dist/{key-pad-menu-Di2aRGbM.js → key-pad-menu-CUiQ-vKw.js}

@@ -1,5 +1,5 @@
 "use client";
-import { Bn as OPT_FOCUS, Cn as getDescribedBy, En as OPT_ANIMATE_ENTER_EXIT, Ht as SelectRoot$1, Kn as OPT_SURFACE, Mn as OPT_BORDER, Qn as OPT_TEXTAREA_SIZE, Sn as RequiredMark, Tn as OPT_ANIMATE_DRAWER, Un as OPT_INPUT, Ut as SelectTrigger$1, Vn as OPT_FOCUS_VISIBLE, Vt as SelectPopover$1, _t as MenuRoot$1, an as useInputId, ar as _objectWithoutProperties, bn as useControlledState, cn as Badge, dn as koBreadcrumbLabels, er as OPT_TEXT_PRIMARY, f as formatOptNumber, gt as MenuPopover$1, ir as _objectSpread2, nr as OPT_TEXT_TERTIARY, pt as MenuItem$1, sn as Spinner, sr as cn, tr as OPT_TEXT_SECONDARY, un as Button, vt as MenuSeparator$1, xn as FieldMessages, yt as MenuTrigger$1, zt as SelectItem$1 } from "./text-truncate-DSuZECy0.js";
+import { Bn as OPT_FOCUS, Cn as getDescribedBy, En as OPT_ANIMATE_ENTER_EXIT, Ft as SelectRoot$1, It as SelectTrigger$1, Kn as OPT_SURFACE, Mn as OPT_BORDER, Mt as SelectItem$1, Pt as SelectPopover$1, Qn as OPT_TEXTAREA_SIZE, Qt as useInputId, Sn as RequiredMark, Tn as OPT_ANIMATE_DRAWER, Un as OPT_INPUT, Vn as OPT_FOCUS_VISIBLE, ar as _objectWithoutProperties, bn as useControlledState, cn as Badge, dn as koBreadcrumbLabels, dt as MenuSeparator$1, er as OPT_TEXT_PRIMARY, f as formatOptNumber, ft as MenuTrigger$1, ir as _objectSpread2, lt as MenuPopover$1, nr as OPT_TEXT_TERTIARY, ot as MenuItem$1, sn as Spinner, sr as cn, tr as OPT_TEXT_SECONDARY, un as Button, ut as MenuRoot$1, xn as FieldMessages } from "./text-truncate-BFWd2cE_.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { createContext, createElement, forwardRef, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";