릴리즈 노트
opt-ui 계열 패키지 변경만 따로 모아서 확인할 수 있도록 패키지 기준으로 정리했습니다.
reopt designUpdated
1. 포함 범위
- 이 페이지는
@reopt-ai/opt-ui,@reopt-ai/opt-cli, 과거@reopt-ai/opt-ui-surface계열 변경만 보여줍니다. opt-datagrid와opt-editor릴리즈는 각각 해당 패키지 문서로 분리했습니다.- Surface 변경은 CLI registry 배포와 함께 묶여 전달되므로 CLI 버전도 함께 확인해야 합니다.
2. 버전별 변경 이력
v1.32.0
LatestBreaking ChangesSqlEditor를 @reopt-ai/opt-ui/sql-editor로 이동 / 다이얼로그 안의 floating overlay를 스크롤 영역 위에 유지
- !SqlEditor를 @reopt-ai/opt-ui/sql-editor로 이동(opt-ui)
SqlEditor는 optional peer인 CodeMirror 패키지를 import()로 불러옵니다. webpack·Turbopack은 동적 import도 빌드 때 resolve하므로, 루트와 /shells가 SqlEditor를 내보내는 동안 DataTable이나 OptThemeProvider만 쓰는 Next 앱도 CodeMirror가 없으면 빌드가 실패했습니다. SqlEditor와 SqlEditor* 타입은 이제 /sql-editor에서만 import합니다. 이전에 복사한 sql-workspace 블록도 같은 import 수정이 필요합니다.
- ~다이얼로그 안의 floating overlay를 스크롤 영역 위에 유지(opt-ui)
Select, Combobox, Popover, Menu, Tooltip이 감싸는 DialogRoot로 자동 portal되고, TagInput과 QueryBar 제안 목록도 같은 위치 계산을 씁니다. DialogPanel과 DrawerPanel은 보이는 표면을 네이티브 dialog 안쪽으로 옮겨 floating 콘텐츠가 스크롤 영역에 갇히지 않습니다. Drawer 닫힘은 표면 애니메이션을 기다리고, QueryBar는 IME 조합 확정 키를 무시합니다.
- +opt project가 Builder에서 발급한 CLI 액세스 토큰으로 인증(opt-cli)
OPT_PROJECT_TOKEN을 설정하면 Authorization: Bearer로 전송합니다. 토큰은 Builder의 프로젝트 → 설정 → CLI 연결에서 만들고 만들 때 한 번만 표시됩니다. 기존 OPT_PROJECT_COOKIE도 동작하며 둘 다 있으면 토큰이 우선합니다. CLI 연결은 Pro 플랜 기능입니다.
- ~블록이 쓰는 엔트리의 optional peer를 설치 의존성으로 표시(opt-cli)
블록이 optional peer를 가진 엔트리를 import하면 그 peer를 dependencies로 나열합니다. opt block add sql-workspace가 @reopt-ai/opt-ui/sql-editor에 필요한 CodeMirror 패키지를 함께 설치합니다.
- +디자인 카탈로그에 opt-deck 등록(opt-cli)
공개 디자인 카탈로그가 opt-deck 패키지와 엔트리를 포함합니다.
v1.30.0
브레이크다운·리텐션 블록을 차트 표준에 맞춰 갱신.
- ^브레이크다운 블록은 순위형 분포를 가로 막대로, 리텐션 블록은 코호트 열·히트맵 라벨을 노출(opt-cli)
순위가 있는 범주는 가로 막대가 맞는 형태입니다 — 긴 범주명이 잘리지 않고 범주 수와 무관하게 막대 두께가 읽힙니다. 리텐션 블록은 `labels.cohortColumn`·`labels.heatmapLabel`로 현지화할 수 있습니다.
v1.29.0
프리셋 차트 팔레트 토큰 갱신과 StatCard 추세 색을 상태 토큰으로
- ^프리셋 차트 팔레트 토큰 갱신과 StatCard 추세 색을 상태 토큰으로(opt-ui)
Tailwind에 `chart-other`·`chart-grid`·`chart-axis`·`chart-cursor`와 sequential·diverging 색이 노출됩니다. 팔레트 게이트를 잠그는 테스트가 추가됐습니다.
v1.28.0
- ~좁은 상세 패널에서도 헤더 버튼 너비를 유지하고 닫기 버튼을 수직 중앙에 정렬합니다.(opt-ui)
v1.27.0
페이지 헤더와 조회 조건의 공통 구성
- +페이지 제목·작업·탭·조회 조건·상태의 배치를 공통 헤더로 통합했습니다.(opt-ui)
PageHeader에 제목 수준, 대상 정보, 탐색 탭, 조회 도구, 운영 상태 슬롯을 추가했습니다. 버튼과 링크는 공통 작업 규격을 사용하고 가용 폭에 따라 줄바꿈합니다.
PageHeader - +검색 조건과 적용된 필터, 결과 안내를 함께 구성할 수 있습니다.(opt-ui)
FilterBar의 커스텀 컨트롤·적용 필터·결과 요약 슬롯을 추가했습니다. 기존 슬롯 API는 계속 사용할 수 있습니다.
FilterBar - ^기간 선택의 높이·간격과 직접 입력 흐름을 정리했습니다.(opt-ui)
자주 쓰는 기간과 직접 입력을 구분하고, 단위 표시와 허용 단위를 설정할 수 있습니다. 잘못된 기간은 적용되지 않습니다.
TimeRangeControl - ^새 페이지 구성 API를 CLI 카탈로그와 블록 레지스트리에 반영했습니다.(opt-cli)
v1.26.0
셀렉트·필터·기간 선택·요약 지표의 간격과 반응형 배치를 공통 컴포넌트에서 관리합니다.
- +선택 값과 아이콘을 정렬하는 displayValue, 라벨이 있는 필터 패널, 반응형 지표 그룹을 추가했습니다.(opt-ui)
기존 children과 기본 카드 배치는 유지됩니다. 검색 초기화와 긴 값·확대 글자·로딩 상태의 배치를 함께 개선했습니다.
SelectTriggerFilterBarSummaryRowTimeRangeControl - ^새로운 컨트롤 API와 opt-ui 2.1.0을 반영한 카탈로그·블록 레지스트리를 제공합니다.(opt-cli)
v1.25.0
입력 필드·다이얼로그·필터 영역의 배치와 접근성을 개선했습니다. / opt-ui 2.0.1에 맞춰 설치용 레지스트리와 컴포넌트 카탈로그를 갱신했습니다.
- ~입력 필드·다이얼로그·필터 영역의 배치와 접근성을 개선했습니다.(opt-ui)
Input과 Textarea의 레이블·메시지 구조 및 내부 여백을 통일하고 외부 설명과 오류 설명을 함께 유지합니다. 다이얼로그의 화면 여백과 스크롤 범위를 보장하고 기본 닫기 버튼을 제공합니다. CatalogFrame 필터 영역을 구분하고 EventMetaEditor의 필드와 액션을 정돈했습니다.
- ~opt-ui 2.0.1에 맞춰 설치용 레지스트리와 컴포넌트 카탈로그를 갱신했습니다.(opt-cli)
v1.24.0
Breaking ChangesNext.js 전용 컴포넌트를 /next 엔트리로 분리했습니다. / 입력·선택·버튼 높이와 선택 컨트롤의 레이블 정렬을 통일했습니다.
- !Next.js 전용 컴포넌트를 /next 엔트리로 분리했습니다.(opt-ui)
SidebarNav와 RouteFocusManager의 import 경로가 바뀝니다. root·core·shells는 Next.js 없이 사용할 수 있습니다.
- ~입력·선택·버튼 높이와 선택 컨트롤의 레이블 정렬을 통일했습니다.(opt-ui)
Switch·Checkbox·Radio는 첫 줄에 맞춰 정렬하고 설명 간격을 공유합니다. 로딩 상태의 대비를 유지하며 비활성 상태는 중립 색상을 사용합니다.
- ~서버 메타데이터와 선택적 의존성의 경계를 정리했습니다.(opt-ui)
id-registry를 서버에서 사용할 수 있고 SqlEditor 타입은 CodeMirror를 설치하지 않아도 해석됩니다. 재생·CriteriaBuilder 예제와 하위 경로 import 메타데이터도 갱신했습니다.
- ^공통 컨트롤·차트·행 평가의 카탈로그를 갱신했습니다.(opt-cli)
컴포넌트별 importPath를 표시합니다. 현재 CLI 런타임 요구사항은 Node.js 22.12 이상입니다.
마이그레이션 가이드
SidebarNav와 RouteFocusManager의 import를 @reopt-ai/opt-ui/next로 변경하세요. 사용자 테마에서 --opt-danger를 지정하면 --opt-danger-solid-fg도 함께 지정하세요.
v1.23.1
npm 패키지에 dist/docs 복구
- ~npm 패키지에 dist/docs 복구(opt-ui)
1.16.0 tarball에 dist/docs가 빠져 있었습니다(파일 71개 → 57개). 그래서 `npx @reopt-ai/opt-cli guide`가 문서를 찾지 못했고, 설치된 패키지의 문서 경로도 모두 비어 있었습니다. 1.16.1은 1.16.0 태그에서 문서만 다시 생성해 배포했으며 코드는 같습니다.
v1.23.0
SummaryRow가 카드별 스파크라인을 통과시킴
- ~SummaryRow가 카드별 스파크라인을 통과시킴(opt-ui)
StatCard는 처음부터 스파크라인을 그렸지만 카드를 배치하는 행이 그 필드를 버려, 행을 쓰는 제품은 형태 없는 숫자만 받았습니다. 델타는 숫자가 얼마나 움직였는지 말하고, 스파크라인은 그것이 서서히 흘렀는지 하루에 뛰었는지를 말합니다.
SummaryRow
v1.22.0
ReplayScrubber 추가 / ReplayTransport 추가
- +ReplayScrubber 추가(opt-ui)
절대 시각 기반 탐색 트랙입니다. segments(active/inactive/gap/buffer), buffered 범위, 0..1 activity 버킷(로그 스케일 영역), markers(가까운 것은 병합, 위험 톤 우선)를 그리고 onSeek은 포인터·키보드 조작이 끝날 때 한 번만 호출합니다. onPreview는 호버·드래그 미리보기용이며 groupReplayMarkers를 함께 내보냅니다.
ReplayScrubber - +ReplayTransport 추가(opt-ui)
재생/일시정지(끝에서는 처음부터), 처음으로, 배속에 비례하는 앞뒤 점프, 0.5×~16× 배속 메뉴, 대기 건너뛰기 토글, 전체화면, 경과/실제 시각 타임코드 전환을 제공합니다. 재생 상태는 호스트가 소유하고 모든 문구는 labels로 바꿀 수 있으며 formatReplayElapsed를 내보냅니다.
ReplayTransport - +ReplayPlayerLayout 추가(opt-ui)
stage·meta·controls·inspector 슬롯을 배치하고 인스펙터를 ResizablePanelGroup으로 리사이즈·영속합니다. 전체화면은 플레이어 루트에 요청하며 브라우저가 스스로 나가면 onFullscreenChange로 알립니다. shortcuts는 포커스가 안에 있고 입력 필드가 아닐 때만 동작하고 키 이름은 replayShortcutKey가 정규화합니다.
ReplayPlayerLayout
v1.21.0
CriteriaBuilder 추가 / ConditionBuilder 미리보기 문구를 labels로 바꿀 수 있음
- +CriteriaBuilder 추가(opt-ui)
루트와 그룹마다 AND/OR 세그먼트 컨트롤(legend 포함), 레터마크 그룹 배지, 조건 행의 부정 토글·위/아래 이동·복제(원본 앞 삽입)·제거, group별 섹션과 negatedLabel 항목을 가진 조건 추가 메뉴, 알 수 없는 kind의 경고 행(바꾸기/제거), 조건·그룹 id별 errors와 aria-describedby 연결, A(조건 추가)·G(그룹 추가) 단축키, 빈 상태, aside 미리보기 슬롯을 제공합니다. 모든 문구는 labels(기본 한국어)이고 배열 연산은 criteriaBuilderMove·Duplicate·Remove·Insert·RemoveGroup·DuplicateGroup·criteriaGroupLetter로 내보냅니다.
CriteriaBuilder - ^ConditionBuilder 미리보기 문구를 labels로 바꿀 수 있음(opt-ui)
labels.previewSuffix(기본 "matches")나 labels.formatPreview로 하드코딩된 영어 접미사를 대체합니다. 기존 소비자는 그대로 동작합니다.
ConditionBuilder
v1.20.0
PathAnalysis 블록을 설정 사이드바 + PathFlowChart 구조로 재작성
- ^PathAnalysis 블록을 설정 사이드바 + PathFlowChart 구조로 재작성(opt-ui)
단계 기준·시작/종료점 피커·단계 수·행 수·제외 태그·반복 병합·URL 그룹핑·최소 리본 세션·세그먼트를 담은 PathAnalysisConfig 편집기와 흐름 탭(grid/sankey 전환, flowDetail·entryExitActions 슬롯)을 갖췄습니다. 탭은 controlled로 두어 dev 이중 마운트에서 선택이 튀지 않습니다.
PathAnalysis
v1.19.0
쿼리 워크스페이스 셸 9종 추가 / SqlEditor가 선택·커서를 전달하고 테마를 따릅니다
- +쿼리 워크스페이스 셸 9종 추가(opt-ui)
QueryWorkspace(3-pane, 좁은 화면에서는 사이드바가 시트로 스택), SchemaTree, QueryToolbar, QueryOutputPane, QueryResultChart, QueryFiltersMenu, QueryVariablesMenu, QueryHistoryList, SaveQueryDialog. 문장 분리와 플레이스홀더 헬퍼(splitSqlStatements 등)는 문자열과 주석을 건너뜁니다.
QueryWorkspaceSchemaTreeQueryToolbarQueryOutputPaneQueryResultChartQueryFiltersMenuQueryVariablesMenuQueryHistoryListSaveQueryDialog - ^SqlEditor가 선택·커서를 전달하고 테마를 따릅니다(opt-ui)
ref 핸들(insertText, getSelection, getCursorOffset)을 노출하고, onRun에 선택 영역과 커서 오프셋을 넘기며, theme auto가 OptThemeProvider의 resolved mode를 읽습니다. 줄 번호를 표시하고 선택적 @codemirror/commands 피어로 undo/redo를 제공합니다.
SqlEditor - ^QueryResultsTable을 타입 헤더·정렬·리사이즈·윈도잉으로 재작성(opt-ui)
컬럼 타입을 FieldToken으로 표시하고, 로컬 정렬(aria-sort), 드래그 너비 조절, 행 윈도잉, 행 상세 flyout을 갖췄습니다. NULL·불리언·JSON을 빈칸 대신 글자로 씁니다. 문자열 컬럼 배열도 그대로 받습니다.
QueryResultsTable
v1.18.0
v1.17.0
Checkbox와 Radio의 입력이 컨트롤 전체의 클릭 타깃이 됩니다 / Callout·CopyButton·StatusDot·SegmentedControl과 CatalogFrame·InspectorLayout·QueryFilterBar 추가
- ~Checkbox와 Radio의 입력이 컨트롤 전체의 클릭 타깃이 됩니다(opt-ui)
둘 다 sr-only라 그려진 네모·동그라미가 입력 위에 덮여 있었습니다. 사람이 누르는 것은 그대로였지만 — 브라우저가 라벨 클릭을 컨트롤로 넘겨줍니다 — 컨트롤을 가리키는 클릭(getByRole("checkbox").click() 등)은 스팬에 막혀 시간 초과로 실패했습니다. 1.12.3에서 SegmentedControl에 적용한 것과 같이, 입력이 라벨 위를 투명하게 덮습니다. peer-*·group-* 스타일은 형제 선택자라 위치를 따지지 않고, 접근성 트리·접근 가능한 이름·포커스 링은 그대로입니다. Switch는 진짜 <button role="switch">라 손댈 것이 없었습니다. **라벨 텍스트를 클릭하던 자동화 테스트는 계속 동작하지만**, role 클릭이 시간 초과라 어쩔 수 없이 그렇게 쓰던 테스트는 이제 컨트롤을 직접 가리킬 수 있습니다.
CheckboxRadio - +Callout·CopyButton·StatusDot·SegmentedControl과 CatalogFrame·InspectorLayout·QueryFilterBar 추가(opt-ui)
복사·상태·고지·뷰 전환을 공통 Core로 제공하고, Query 하나를 공유하는 필터와 목록을 유지하는 인스펙터를 카탈로그 Shell로 제공합니다.
CalloutCopyButtonStatusDotSegmentedControlCatalogFrameInspectorLayoutQueryFilterBar - ^FieldToken·DataTable·EventMetaEditor·PropertyExplorer의 카탈로그 편집 계약 확장(opt-ui)
타입 레이블, 제목 없는 grid 이름, 호출자 소유 편집 섹션, 숨김·편집 어포던스를 공식 API로 제공합니다. 제어형 Tabs는 탭 해제 중 소유자 상태를 다시 쓰지 않습니다.
FieldTokenDataTableEventMetaEditorPropertyExplorerTabs - +PropertyCatalog 추가 및 EventCatalog를 단일 Query·인스펙터 구조로 개편(opt-ui-surface)
빈 상태와 읽기 실패를 구분하고, 행 선택·일괄 작업·페이지·필터·상세 패널을 같은 카탈로그 프레임에서 다룹니다.
PropertyCatalogEventCatalog - ~오버레이 Flyout의 스크림이 페이지를 덮던 문제 수정(opt-ui)
스크림이 팝오버 표면색(bg-overlay)을 쓰고 있어 좁은 화면에서 인스펙터 뒤의 목록이 통째로 가려졌습니다. Dialog와 같은 방식으로 페이지를 어둡게 덮는 bg-scrim으로 바꿨습니다.
FlyoutInspectorLayout - ~SegmentedControl의 라디오가 세그먼트 전체의 클릭 타깃이 됩니다(opt-ui)
라디오가 sr-only라 라벨 텍스트에 덮여 있었습니다. 사람이 누르는 것은 그대로였지만, 컨트롤을 가리키는 클릭(getByRole("radio").click() 등)은 텍스트에 막혀 실패했습니다. **라벨 텍스트를 클릭하던 자동화 테스트는 role 클릭으로 바꿔야 합니다** — 이제는 라디오가 텍스트 위에 있습니다.
SegmentedControl - ~스크린리더만 듣는 문구도 호출자가 번역할 수 있습니다(opt-ui)
DataTable이 선택·리사이즈 문구를 labels로 받고, CatalogFrame은 인스펙터 닫기 버튼을, EventMetaEditor는 아이콘 피커의 placeholder를 각각 전달합니다. ColumnDef.headerHidden은 행 액션처럼 제목이 필요 없는 컬럼을 그리지 않고 이름만 붙입니다. EventIcon은 빈 문자열을 아이콘 없음으로 읽어 "Event: "를 만들지 않습니다.
DataTableCatalogFrameEventMetaEditorEventIcon - ~토스트 영역의 접근 가능한 이름을 번역할 수 있습니다(opt-ui)
ToastProvider의 labels.regionLabel로 토스트 live region의 이름을 지정할 수 있습니다. 토스트 본문은 호출자가 작성하고, 라이브러리가 소유하던 기본 이름까지 같은 언어로 맞출 수 있습니다.
NotificationToast - ~좁은 인스펙터에서 EventMetaEditor의 이름 필드가 겹치지 않습니다(opt-ui)
입력이 기본 폭(w-auto)을 유지해 2열 트랙보다 넓어지면서 두 필드가 서로 겹치고 패널 밖으로 나갔습니다. 이제 열을 채우고, 창이 아니라 인스펙터 폭에 반응하는 컨테이너 쿼리로 좁을 때 쌓입니다.
EventMetaEditor - ~쿼리 매처가 배열 필드를 원소 단위로 비교하고, Callout이 status로 읽힙니다(opt-ui)
tag:pay가 ["pay","checkout"]에 맞지 않던 문제를 고쳤습니다(부정은 "어느 원소도 불일치", 빈 배열은 field:*를 만족하지 않음). StatusDot의 hint는 title 대신 포커스로 열리는 툴팁이고, Callout은 role="status"라 조건이 참이 되어 나타난 고지가 화면을 보지 않는 독자에게도 닿습니다.
StatusDotCallout - ~분석·설정 Block의 상태 전이와 접근성 의미를 보강했습니다(opt-ui-surface)
InsightsDashboard의 dismissed 보기, RealtimeDashboard의 실시간 피드 안내, SqlWorkspace의 저장 쿼리 로딩을 고쳤습니다. ProjectSettings의 보존 정책은 native radio로 동작하며, 분석·대시보드의 빈 상태는 native output으로 읽힙니다.
InsightsDashboardRealtimeDashboardSqlWorkspaceCustomDashboardProjectSettingsAcquisitionAnalysisBreakdownAnalysisPathAnalysisRetentionAnalysis
v1.16.0
DescriptionList·Identity·EventTimeline·ScoreBreakdown·Flyout 추가 / EmptyState·StatCard·SummaryRow의 의미·상태·밀도 계약 확장
- +DescriptionList·Identity·EventTimeline·ScoreBreakdown·Flyout 추가(opt-ui)
의미가 보존되는 상세 필드, 식별·익명 사용자 fallback, 세션별 이벤트 근거, 가중 점수 축, 목록 문맥을 유지하는 비모달 상세 패널을 제공합니다.
DescriptionListIdentityEventTimelineScoreBreakdownFlyout - ^EmptyState·StatCard·SummaryRow의 의미·상태·밀도 계약 확장(opt-ui)
실패와 빈 결과의 tone을 구분하고, 지표 polarity와 단일 focus stop 선택을 지원하며, 요약 행을 5·6열까지 확장했습니다.
EmptyStateStatCardSummaryRow
v1.15.0
FieldToken·Facet·Expression·TextTruncate·Highlight·LiveRegion·ColorPalette·InlineEdit·KeyPadMenu 추가
- +FieldToken·Facet·Expression·TextTruncate·Highlight·LiveRegion·ColorPalette·InlineEdit·KeyPadMenu 추가(opt-ui)
필드 타입, 값 분포, 조건식, 긴 식별자, 검색 강조, 실시간 접근성 안내처럼 데이터 제품에서 반복되던 UI를 독립적인 Core primitive로 제공합니다.
FieldTokenFacetExpressionTextTruncateHighlightLiveRegionColorPaletteInlineEditKeyPadMenu
v1.13.0
소비 프로젝트의 초기 설정 누락을 막는 app.css 부트스트랩과 시맨틱 BlockLayout inset 추가 / 프로젝트 link·pull·push·status 동기화와 Surface 설치·업데이트·제거·진단 흐름 강화
- +소비 프로젝트의 초기 설정 누락을 막는 app.css 부트스트랩과 시맨틱 BlockLayout inset 추가(opt-ui)
- +프로젝트 link·pull·push·status 동기화와 Surface 설치·업데이트·제거·진단 흐름 강화(opt-cli)
마이그레이션 가이드
opt-editor 런타임 스키마 import 변경: `@reopt-ai/opt-editor/server` → `@reopt-ai/opt-editor/schemas`. `@reopt-ai/opt-editor/ai-sdk` import와 type-only export는 변경되지 않습니다.
v1.12.0
Breaking ChangesResizable 컴포넌트에서 프로덕션 에디터 컨트롤(콜백·ref·resize·a11y prop) 노출 + server-safe theme/server 엔트리(createThemeBootScript) / Core에 Meter·AlertDialogPanel 노출, number input·pagination·command palette 접근성 강화, primitives의 base-ui 패턴 흡수
- +Resizable 컴포넌트에서 프로덕션 에디터 컨트롤(콜백·ref·resize·a11y prop) 노출 + server-safe theme/server 엔트리(createThemeBootScript)(opt-ui)
- +Core에 Meter·AlertDialogPanel 노출, number input·pagination·command palette 접근성 강화, primitives의 base-ui 패턴 흡수(opt-ui)
- !런타임 Surface export 제거 — opt-cli 블록 registry로 이관(opt-ui)
ChatAssistant·DataExplorer·DeploymentCenter·createSurface 등은 더 이상 @reopt-ai/opt-ui에서 export되지 않습니다. `npx @reopt-ai/opt-cli surface add <slug>`로 소비하세요.
- -SurfaceLayout → BlockLayout / createBlock(opt-ui)
- +블록을 HTTP로 서빙하고 CLI가 원격 fetch, 서명된 원격 배포 워크플로우 + brandapp EAV 저장 백엔드. 컴포넌트 카탈로그에 신규 차트 15종 반영.(opt-cli)
마이그레이션 가이드
런타임 Surface import 제거: `import { ChatAssistant } from "@reopt-ai/opt-ui"` → `npx @reopt-ai/opt-cli surface add <slug>`. 레이아웃: `SurfaceLayout` → `BlockLayout` / `createBlock`.v1.8.2
@reopt-ai/opt-ui-primitives@1.4.2 / opt-ui@1.4.1 — Base UI v1.6.0 참조 기반 프리미티브 정합성 보강 / 차트 sizing, builder id, demo workflow, deterministic id-registry 안정화
- ^@reopt-ai/opt-ui-primitives@1.4.2 / opt-ui@1.4.1 — Base UI v1.6.0 참조 기반 프리미티브 정합성 보강(opt-ui)
Accordion, Combobox, Dialog, Select, Separator, Toggle, OtpField 등 primitives/core 계약을 보강하고 opt-ui는 새 primitives 런타임 의존성을 참조합니다.
- ~차트 sizing, builder id, demo workflow, deterministic id-registry 안정화(opt-ui)
chart sizing과 e2e startup, builder/demo id 생성 흐름을 보강하고 COMPONENT_CATALOG 및 id-registry 산출물을 최신 메타 기준으로 재생성했습니다.
- ^@reopt-ai/opt-cli@1.1.1 — Surface registry 38종과 opt-ui 1.4.1 peer metadata 동기화(opt-cli)
opt-ui surfaces 7종, opt-ui-surface 24종, brandapp-ui 7종을 포함한 registry.json과 id-registry.json을 재생성했습니다.
v1.8.0
@reopt-ai/opt-ui-primitives@1.4.0 — WAI-ARIA·키보드·React 정합성 overhaul / @reopt-ai/opt-ui@1.4.0 — 불필요한 재연산·리렌더 감소, 하이드레이션 날짜 포맷 안정화
- ^@reopt-ai/opt-ui-primitives@1.4.0 — WAI-ARIA·키보드·React 정합성 overhaul(opt-ui)
포커스/키보드 내비게이션 및 ARIA 패턴 전반 교정. opt-ui 1.4.0이 새 primitives를 런타임 의존성으로 참조.
- ^@reopt-ai/opt-ui@1.4.0 — 불필요한 재연산·리렌더 감소, 하이드레이션 날짜 포맷 안정화(opt-ui)
opt 패키지 전반 구조적 공유 및 메모이제이션 개선. opt-harness→opt-shell 리브랜드 참조 정리.
- +@reopt-ai/opt-cli@1.1.0 — `opt surface diff` 명령 + browser-safe `./audit` 서브-export(opt-cli)
하네스 감사 툴킷을 opt-cli로 이동(브라우저 안전). opt-shell을 peer로 전환. registry.json 1.4.0 동기화(37 surfaces).
마이그레이션 가이드
opt-harness 사용처는 @reopt-ai/opt-shell로 교체하고 Harness* 식별자를 Shell*로 변경하세요. 하네스 감사 도구는 @reopt-ai/opt-cli의 ./audit에서 import합니다.
v1.7.0
Breaking Changesdata-opt-id 인프라 Phase 1-6 완성 — 250/250 컴포넌트 100% 적용 + ESLint 룰 + meta-props-sync strict / 테마 시스템 통합 기반 — THEME_REGISTRY + ThemeSpec + mono-dark preset + codegen
- +data-opt-id 인프라 Phase 1-6 완성 — 250/250 컴포넌트 100% 적용 + ESLint 룰 + meta-props-sync strict(opt-ui)
Phase 1 인프라 / Phase 2 ESLint 룰 + core 53개 / Phase 3-5 visuals·shells·surfaces 일괄 / Phase 6 inspector 메타 배지. 새 ./id-registry export로 카탈로그 조회 가능.
data-opt-idid-registryid-registry.json - +테마 시스템 통합 기반 — THEME_REGISTRY + ThemeSpec + mono-dark preset + codegen(opt-ui)
OptThemeProvider가 ThemeSpec + generated 모드 지원. 프리셋 정리(corporate/playful 제거, mono-dark 추가). presets/tokens.ts가 CSS의 단일 진실의 원천. ThemeSwitcher 동적화 + i18n 라벨 + FOUC 제거.
OptThemeProviderTHEME_REGISTRYThemeSpecThemeSwitcher - !프리셋 corporate/playful export 제거 — mono-dark로 교체 (major)(opt-ui)
import "@reopt-ai/opt-ui/theme/presets/corporate.css" / playful.css 사용 중인 소비자는 default / minimal / natural / pro / mono-dark 중 하나로 교체 필요.
- +PageAside shell 컴포넌트 추가(opt-ui)PageAside
- ^Command anatomy 재작성 — cmdk 스타일 + dialog floating 제거 (opt-ui-primitives 1.3.0)(opt-ui)Command
- ~a11y 깊은 점검(high 우선순위 정리) + popover/menu jump 버그(transform → translate 분리) + Dialog 가로 중앙 정렬 깨짐(opt-ui)PopoverMenuDialog
- +@reopt-ai/opt-cli@1.0.0 신규 publish — 통합 opt 바이너리 (구 @reopt-ai/opt-ui-cli@1.2.1 대체)(opt-cli)
harness check / surface 관리 / opt ids 카탈로그 조회 / opt test (Vite+ 전용) / gstack 패턴 기반 5단계 harness CLI. @google/design.md canonical 린터 통합.
- !@reopt-ai/opt-ui-cli → @reopt-ai/opt-cli 로 패키지 이름 변경 (major)(opt-cli)
소비자는 bun add @reopt-ai/opt-cli@1.0.0로 교체 필요. CLI 진입점은 동일하게 `opt`.
- ^ESLint 룰 강화 — no-raw-color를 Tailwind palette 전체로 확장, require-use-client detector 정밀화로 28개 정적 컴포넌트 server-safe 전환(opt-ui)
no-raw-color는 dark: prefix 자동 허용. detector는 hooks/forwardRef/이벤트/HTMLAttributes/외부 *Props/generic factory를 자동 분류. active-item overlay를 raw white에서 accent-fg 토큰으로 전환.
마이그레이션 가이드
1. @reopt-ai/opt-palette를 직접 설치할 필요는 없음 (opt-ui transitively dep). 2. 테마 프리셋 corporate/playful 사용 중이면 mono-dark 또는 다른 프리셋으로 교체. 3. @reopt-ai/opt-ui-cli → @reopt-ai/opt-cli로 패키지 교체 (CLI 진입점은 동일하게 `opt`). 4. data-opt-id 사용 시 ./id-registry sub-export 활용 가능.
v1.1.1
StarRating Core, MarketplaceCatalog/ItemDetail Surface 추가, Publish Readiness Audit 도입
- +StarRating Core 컴포넌트 추가 (키보드 탐색, hover 미리보기, readOnly)(opt-ui)StarRating
- +MarketplaceCatalog Surface 추가 (카드 그리드, 검색/탭/정렬)(opt-ui-surface)MarketplaceCatalog
- +ItemDetail Surface 추가 (breadcrumb, 리뷰 폼, content 슬롯)(opt-ui-surface)ItemDetail
- +Publish Readiness Audit 시스템 도입 (5가지 교차 검증 + 자동 수정)
- ^SettingsForm 강화 (FormFieldDef 확장)(opt-ui)SettingsForm
- ~StarRating meta keyboardShortcuts 필드명 수정(opt-ui)
v1.1.0
Ariakit 의존성 완전 제거 → opt-ui-primitives 전환, 접근성/API 계약 강화
- +opt-ui-primitives: Ariakit 대체 네이티브 접근성 프리미티브 패키지 초기 구현
- +Ariakit → opt-ui-primitives 전면 마이그레이션 + @ariakit/react 의존성 완전 제거(opt-ui)
- +lucide 아이콘 표준화(opt-ui)
- +문서 인프라 개선(opt-ui)
- ~Core 접근성 및 API 계약 수정(opt-ui)
- ~테마 해상도 통합(opt-ui)
- ~opt-ui-primitives: form-store useValidate/useSubmit 구현 추가
- ^테스트 성능 최적화 및 안정화 (787 tests)(opt-ui)
v1.0.7
Dialog animated freeze 수정, 테마 텍스트 시인성 개선, Core 입력 컴포넌트 일괄 강화
- ~Dialog animated prop을 설정 가능하게 변경 — Ariakit #4075 freeze 우회(opt-ui)Dialog
- ~Dialog 타입을 DialogProviderProps로 수정 (ComponentPropsWithoutRef 추출 오류)(opt-ui)Dialog
- ^테마 프리셋 텍스트 색상을 rgba() → hsl() 순수값으로 변환하여 시인성 개선(opt-ui)
- ^AuditLog 리디자인 — 타임라인 UI, 액션별 색상, expand/collapse(opt-ui)AuditLog
- ^Core 입력 컴포넌트 P0-P3 일괄 개선 (Input, Textarea, Select, Checkbox, Switch, RadioGroup, NumberInput)(opt-ui)InputTextareaSelectCheckboxSwitchRadioGroupNumberInput
- ^TagInput 메타데이터 추가 + Surface 스타일 정리(opt-ui)TagInput
v1.0.6
reopt-data 리포트 B8+C5 전항목 구현 — AuditTimeline 신규 Shell, 8개 기존 컴포넌트 강화
- +AuditTimeline 신규 Shell — diff 뷰, 액션별 색상, expand/collapse(opt-ui)AuditTimeline
- +ReportBuilder 4단계 위저드 재작성 (type→config→style→preview)(opt-ui)ReportBuilder
- ^TagInput suggestions 자동완성 드롭다운 + 키보드 탐색(opt-ui)TagInput
- ^DateRangePicker presets + comparison 모드 + granularity 선택(opt-ui)DateRangePicker
- ^Card selectable/selected 상태 지원 (ring highlight)(opt-ui)Card
- ^Badge progress 원형 프로그레스 링 (SVG)(opt-ui)Badge
- ^ConditionBuilder nested AND/OR + conditionTypes + previewCount(opt-ui)ConditionBuilder
- ^DataTable inline bar 시각화 (bar/barColor ColumnDef)(opt-ui)DataTable
- ^FileUploadForm onPreview + columnMapping 슬롯(opt-ui)FileUploadForm
- ^EventIcon POPULAR_ICONS/COLOR_PRESETS + ReactNode 아이콘(opt-ui)EventIcon
v1.0.5
Dialog 9-part anatomy + Ariakit Form 12종 컴포넌트 래핑
- +Dialog 9-part anatomy — Heading, Description, Disclosure, Header/Body/Footer 추가(opt-ui)DialogHeadingDialogDescriptionDialogDisclosureDialogHeaderDialogBodyDialogFooter
- +Ariakit Form API 전면 래핑 — FormProvider, FormGroup, FormField, FormControl 등 12개 신규 컴포넌트(opt-ui)FormProviderFormGroupFormGroupLabelFormDescriptionFormFieldFormControlFormCheckboxFormRadioGroupFormRadioFormPushFormRemoveFormReset
- ^SettingsPanel UX 개선 — 사이드바 border-r 구분선, accent 선택 상태, description 필드 추가(opt-ui)SettingsPanel
- ^TimeRangeSelector 통합 스타일 — 프리셋 버튼과 DateRangePicker를 단일 bordered 컨테이너로 통합(opt-ui)TimeRangeSelectorDateRangePicker
- ~ToolbarButton 패딩 비율 조정 — 넙데데한 버튼 개선(opt-ui)ToolbarButton
- ~Shells/Core 레이어 가이드 위반 수정 — 접근성, displayName, 타입 안전(opt-ui)
v1.0.4
/opt-ui-reference 스킬 + 빌드 시 COMPONENT_CATALOG.md 자동 생성
- +/opt-ui-reference 스킬 추가 — 레이어별 목록, 선택 가이드, 컴포넌트 상세, 키워드 검색(opt-ui)
- +빌드 시 COMPONENT_CATALOG.md 자동 생성 — npm 패키지에 포함되어 소비자 프로젝트에서 접근 가능(opt-ui)
- +/docs/releases 페이지 추가 — 릴리즈 히스토리 확인(opt-ui)
- ^opt-ui-publish 스킬에 릴리즈 노트 자동 생성 Step 추가(opt-ui)
v1.0.3
tailwind.css 통합 entry 추가 — 소비자 단일 import
- +tailwind.css 통합 entry 추가 — 소비자가 단일 import로 스타일 적용 가능(opt-ui)
- ^패키징 개선 — sideEffects CSS 선언, sourcemaps 제거, files 필드 정리(opt-ui)
- ^opt-ui-doctor 체크 13-17 추가 + publish sideEffects 규칙 업데이트
v1.0.2
테마 프리셋 CSS 빌드 수정 + opt-ui-doctor 스킬 추가
- ~빌드 시 테마 프리셋 CSS가 dist/에 복사되지 않던 문제 수정(opt-ui)
- +opt-ui-doctor 스킬 추가 — 12가지 환경 진단 체크
v1.0.1
reopt-data 마이그레이션용 Surface 강화 (B+C 항목)
- ^reopt-data B 항목 — 9개 Surface 강화 (마이그레이션 호환성)(opt-ui-surface)
- ^reopt-data C 항목 — 7개 Surface 개선 + ProjectOverview 신규(opt-ui-surface)
- ~opt-ui-migrate 스킬 Surface 목록, 버전, prerequisites 동기화
v1.0.0
첫 정식 릴리즈 — 163개 컴포넌트 (Core 47 + Visuals 17 + Shells 74 + Surfaces 25)
- +Core 47개, Visuals 17개, Shells 74개, Surfaces 5개 컴포넌트 첫 정식 배포(opt-ui)
- +Surfaces 20개 컴포넌트 첫 정식 배포(opt-ui-surface)
- +Compound Theme 아키텍처 — 6 프리셋 x light/dark, CSS 변수 기반
- +시맨틱 스페이싱 토큰 — gap-section/group/element + SurfaceLayout
- +createSurface 팩토리 — SurfaceLayout 래핑 구조적 강제