reopt designreopt design
DocsExploreToolsPricingBuilder
Explore/
opt-ui161opt-charts21opt-datagrid5opt-editor5opt-chat6opt-shell14brandapp-ui8Examples12
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • GitHub
  • Terms of Service
  • Privacy Policy

© 2026 reopt-ai. All rights reserved.

Explore/opt-shell/Editor Adapter
Adapteropt-shell example

Editor Adapter

EditorWorkspace와 ShellEditorAdapter 조합으로 authoring chrome과 editor engine의 소유 경계를 분리합니다.

Own the authoring shell while opt-editor remains the document engine.

editoradapterauthoring
bun add @reopt-ai/opt-shell @reopt-ai/opt-editor @reopt-ai/opt-ui
ShellProviderEditorWorkspaceShellEditorAdapter
1024px

Compose memo

A focused authoring workspace with toolbar, status, inspector, and review handoff kept in one route.

Open review surface

Expansion memo draft

The editor is fixture-backed so the page stays deterministic, but it still behaves like a real authoring surface.

Fixture-backed
6 blocksVersion 3Review note pending

ℹ️

Publish checklist
2 of 3
Distribution
PrimaryCommercial committee memo
SecondaryRenewal review packet
Autosave rehearsal completed 09:16 KSTNext action: review the fullscreen surface pattern

Related Examples

Portfolio records

A production-style records workspace that connects filters, portfolio rows, and dossier navigation.

Portfolio table

The grid stays editable while filters, status, and footer remain part of the app workflow.

Revenue portfolio

Showing 5 records with renewal timing and health status.

Apollo Ledger
Jiwoo Han
At risk
14 days
Northstar Renewal
Mina Park
Healthy
37 days
Atlas Claims
Daniel Kim
Expansion
63 days
Meridian Onboarding
Sena Yoon
At risk
21 days
Delta Risk
Chris Lee
Healthy
52 days
5 records · No filterRecommended next step: open an at-risk dossier.
Quick-open dossiers
3 shown
Apollo Ledger
At risk
Jiwoo Han · 14 days
Dossier snapshot
Northstar Renewal
Healthy
Mina Park · 37 days
Dossier snapshot
Atlas Claims
Expansion
Daniel Kim · 63 days
Dossier snapshot
5 of 5 records visibleDataGrid engine with an app-owned workflow frame.
Adapteropt-shell

DataGrid Adapter

ListWorkspace 안에서 ShellDataGridAdapter가 toolbar, status, footer chrome을 소유하면서 opt-datagrid 엔진을 유지합니다.

datagridadapterworkspace
ShellProviderListWorkspaceShellDataGridAdapter
Open
스크롤 가능한 콘텐츠 영역
3개 항목 선택됨
Layoutopt-shell

Bottom Bar

ShellBottomBar로 선택 액션과 승인 액션을 화면 하단에 sticky하게 붙여 작업 맥락을 유지합니다.

stickybulk-actionsfooter
ShellProviderShellBottomBar
Open

Completeness Score

audit finding 수를 조절하면서 점수 변화를 확인하세요.

3/5
72/ 1007/10 passed
layout0%
recipe-contract67%
adapter-ownership100%
state-ux100%
design-document100%
scaffold-bundle100%
accessibility100%
Scoringopt-shell

Completeness Score

computeCompletenessScore로 audit finding을 7개 카테고리로 분류하고 0-100 가중 평균 점수를 산출합니다.

completenessscoreauditscoring
computeCompletenessScore
Open
PreviousDataGrid AdapterNextFullscreen Review