Layoutopt-shell example

Bottom Bar

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

Sticky bottom action bar for bulk actions and commit flows.

stickybulk-actionsfooter

bun add @reopt-ai/opt-shell @reopt-ai/opt-ui

ShellProviderShellBottomBar

1024px

스크롤 가능한 콘텐츠 영역

3개 항목 선택됨

Related Examples

Completeness Score

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

Findings: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

Coverage Report

8개 라우트 파일 대비 하네스 rollout target 매칭 결과

75%6/8 covered

Recipe Breakdown

dashboard: 1list: 1detail: 1editor: 1fullscreen: 1

Uncovered Paths

app/settings/page.tsx
app/analytics/page.tsx

Scoringopt-shell

Coverage Report

computeShellCoverage로 라우트 파일 대비 하네스 채택률을 정적 분석하고 recipe별 breakdown과 미커버 경로를 표시합니다.

coverageroutesrolloutscoring

computeShellCoverage

Open

대시보드

파이프라인 상태 요약

메트릭

활성: 24

실패: 3

Workspaceopt-shell

Dashboard Workspace

DashboardWorkspace와 ShellSection으로 상단 헤더, 메트릭 카드, 사이드 패널이 있는 기본 운영 화면을 구성합니다.

dashboardworkspaceshell

ShellProviderDashboardWorkspaceShellSection

Open