Core Concepts

Adapters

opt-datagrid와 opt-editor 엔진을 바꾸지 않고 harness chrome만 덧씌우는 연결층을 설명합니다.

reopt designUpdated Jun 26, 2026

1. adapter가 의미하는 것

adapter는 엔진을 재구현하지 않습니다. DataGrid는 여전히 grid engine이고, Editor는 여전히 document engine입니다. harness는 그 바깥에서 title, description, toolbar, status, empty/error fallback, inspector, footer를 공통 규칙으로 감쌉니다.

방식	누가 무엇을 소유하나	결과
직접 사용	페이지가 toolbar, status, empty, inspector, footer를 모두 직접 배치	화면마다 구조가 흩어지고 engine 주변 chrome이 중복됩니다.
adapter 사용	엔진은 원래 패키지에 두고, chrome과 fallback UX는 harness가 소유	초기 wrapper 설계는 필요하지만 제품 일관성이 훨씬 높아집니다.

2. ShellDataGridAdapter

`ShellDataGridAdapter`는 `rows`, `columns`, `ref`, callback surface는 그대로 `opt-datagrid`에 전달하고, 그 위에 title / toolbar / status / footer / empty state만 얹습니다.

tsx

import { ShellDataGridAdapter } from "@reopt-ai/opt-shell";

<ShellDataGridAdapter
  title="User Directory"
  description="opt-datagrid는 엔진을 유지하고, harness가 toolbar/status/footer를 소유합니다."
  toolbar={<UserActions />}
  status={<GridMetrics />}
  footer={<GridFooter />}
  rows={rows}
  columns={columns}
  getRowId={(row) => row.id}
  onRowsChange={setRows}
  empty={{
    title: "사용자가 없습니다",
    description: "새 사용자를 추가하거나 필터를 해제해 보세요.",
  }}
/>;

3. ShellEditorAdapter

`ShellEditorAdapter`는 `store`, `catalog`, `mode` 같은 editor runtime은 그대로 유지하면서 status, inspector, footer, empty fallback을 공통 chrome으로 정리합니다.

tsx

import { ShellEditorAdapter } from "@reopt-ai/opt-shell";

<ShellEditorAdapter
  title="Release Draft"
  description="opt-editor는 문서 엔진을 유지하고, harness가 status/inspector/footer chrome을 소유합니다."
  toolbar={<DraftToolbar />}
  status={<DraftStatus />}
  inspector={<DraftInspector />}
  footer={<PublishChecklist />}
  store={store}
  catalog={catalog}
  mode="edit"
  isEmpty={spec.root.length === 0}
  empty={{
    title: "초안이 비어 있습니다",
    description: "AI 생성 또는 블록 추가로 문서를 시작하세요.",
  }}
/>;

4. 현재 데모 경로

DataGrid Playground

중앙 panel만 ShellDataGridAdapter로 감싸서 engine과 chrome의 경계를 바로 볼 수 있습니다.

Editor Playground

preview toolbar, inspector, footer를 ShellEditorAdapter가 소유하는 데모입니다.

Builder Rollout

playground에서 확인한 adapter 방식이 Builder 실화면과 proof-aware governance로 어떻게 이어지는지 정리합니다.

1. adapter가 의미하는 것

방식	누가 무엇을 소유하나	결과
직접 사용	페이지가 toolbar, status, empty, inspector, footer를 모두 직접 배치	화면마다 구조가 흩어지고 engine 주변 chrome이 중복됩니다.
adapter 사용	엔진은 원래 패키지에 두고, chrome과 fallback UX는 harness가 소유	초기 wrapper 설계는 필요하지만 제품 일관성이 훨씬 높아집니다.

2. ShellDataGridAdapter

`ShellDataGridAdapter`는 `rows`, `columns`, `ref`, callback surface는 그대로 `opt-datagrid`에 전달하고, 그 위에 title / toolbar / status / footer / empty state만 얹습니다.

tsx

import { ShellDataGridAdapter } from "@reopt-ai/opt-shell";

<ShellDataGridAdapter
  title="User Directory"
  description="opt-datagrid는 엔진을 유지하고, harness가 toolbar/status/footer를 소유합니다."
  toolbar={<UserActions />}
  status={<GridMetrics />}
  footer={<GridFooter />}
  rows={rows}
  columns={columns}
  getRowId={(row) => row.id}
  onRowsChange={setRows}
  empty={{
    title: "사용자가 없습니다",
    description: "새 사용자를 추가하거나 필터를 해제해 보세요.",
  }}
/>;

3. ShellEditorAdapter

`ShellEditorAdapter`는 `store`, `catalog`, `mode` 같은 editor runtime은 그대로 유지하면서 status, inspector, footer, empty fallback을 공통 chrome으로 정리합니다.

tsx

import { ShellEditorAdapter } from "@reopt-ai/opt-shell";

<ShellEditorAdapter
  title="Release Draft"
  description="opt-editor는 문서 엔진을 유지하고, harness가 status/inspector/footer chrome을 소유합니다."
  toolbar={<DraftToolbar />}
  status={<DraftStatus />}
  inspector={<DraftInspector />}
  footer={<PublishChecklist />}
  store={store}
  catalog={catalog}
  mode="edit"
  isEmpty={spec.root.length === 0}
  empty={{
    title: "초안이 비어 있습니다",
    description: "AI 생성 또는 블록 추가로 문서를 시작하세요.",
  }}
/>;