릴리즈 노트
opt-ui 계열 패키지 변경만 따로 모아서 확인할 수 있도록 패키지 기준으로 정리했습니다.
reopt design업데이트
1. 포함 범위
- 이 페이지는
@reopt-ai/opt-ui,@reopt-ai/opt-cli, 과거@reopt-ai/opt-ui-surface계열 변경만 보여줍니다. opt-datagrid와opt-editor릴리즈는 각각 해당 패키지 문서로 분리했습니다.- Surface 변경은 CLI registry 배포와 함께 묶여 전달되므로 CLI 버전도 함께 확인해야 합니다.
2. 버전별 변경 이력
v1.8.2
Latest@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 래핑 구조적 강제