opt-devtool
opt-ui debugger를 포함한 전역 overlay를 기준으로 opt-ui, opt-datagrid, opt-editor, opt-shell의 개발용 진단 경험을 한곳에 모으는 devtools layer입니다.
reopt design업데이트
dev-only overlay, opt-ui debugger migration, datagrid/editor/harness bridge, cross-module inspection surface를 담당합니다.
1. 왜 따로 분리했는가
opt-devtool는 제품 런타임에 노출되는 UI가 아니라, design 프로젝트의 각 opt 모듈을 개발할 때 상태를 읽고 경계를 검증하는 devtool layer를 담당합니다. 기존 opt-ui 안의 debugger를 여기로 옮겨서, 한 번 마운트한 overlay 안에 module별 snapshot 탭을 함께 모으는 구조로 정리했습니다.
내장 opt-ui 디버거
포커스 추적, tab order, spatial navigation, composite bounds를 기본 탭으로 제공합니다.
플러그인 레지스트리
opt-datagrid, opt-editor, brandapp, opt-shell, theme bridge가 페이지별 snapshot을 같은 overlay에 등록합니다. editor와 brandapp은 전용 상단 탭으로 분리됩니다.
개발 전용 런타임
실제 제품 UI가 아니라 개발 중 원인 분석, 계약 확인, 워크플로우 점검을 돕는 것이 목적입니다.
2. 루트 마운트
앱 루트에서 OptDevtoolProvider로 registry를 감싸고, 개발 모드에서만 OptDevtool를 한 번 렌더링하면 됩니다. 이후 각 화면이 bridge hook으로 자신의 탭을 등록합니다.
import { OptDevtool, OptDevtoolProvider } from "@reopt-ai/opt-devtool";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="ko">
<body>
<OptDevtoolProvider>
{children}
{process.env.NODE_ENV === "development" ? <OptDevtool /> : null}
</OptDevtoolProvider>
</body>
</html>
);
}3. entrypoint와 bridge
루트 overlay는 @reopt-ai/opt-devtool에서 가져오고, 엔진별 bridge hook은 subpath export에서 가져옵니다. package export 기준으로 datagrid, editor, brandapp, harness, theme, ui가 분리되어 있습니다.
import { OptDevtool, OptDevtoolProvider } from "@reopt-ai/opt-devtool";
import { OPT_DEVTOOL_CONFIGURE_EVENT } from "@reopt-ai/opt-devtool/ui";
import { useDataGridDevtoolBridge } from "@reopt-ai/opt-devtool/datagrid";
import { useEditorDevtoolBridge } from "@reopt-ai/opt-devtool/editor";
import { useBrandappDevtoolBridge } from "@reopt-ai/opt-devtool/brandapp";
import { useShellDevtoolBridge } from "@reopt-ai/opt-devtool/harness";
import { useThemeDevtoolBridge } from "@reopt-ai/opt-devtool/theme";4. Overlay 표면
| 영역 | 역할 |
|---|---|
| opt-ui | 포커스 요소, 컴포넌트 체인, tab order, event log, spatial candidate를 추적합니다. |
| DataGrid | active cell, selection, editing state, visible region, history, draft error를 snapshot으로 노출합니다. |
| Editor | spec version, selection IDs/types, root/element count, undo/redo, focus target, external stream, state store key count를 함께 읽습니다. |
| Brandapp | Brandapp ID, masked client ID, auth/env/EAV/AI 상태와 route wiring을 snapshot으로 노출합니다. |
| Harness | manifest, density, content width, state boundary, adapter chrome 상태를 page shell 기준으로 보여줍니다. |
| Theme | Shell theme event를 받아 preset/generated token, seed palette, contrast pair를 표시합니다. |