키보드 패턴

// CompositeZone은 built-in roving tabindex를 활용합니다
import { CompositeZone, CompositeRow, CompositeItem } from "@reopt-ai/opt-ui";

<CompositeZone
  aria-label="대시보드 그리드"
  focusLoop    // 마지막 항목에서 첫 항목으로 순환
  focusWrap    // 행 끝에서 다음 행으로 자동 이동
>
  <CompositeRow>
    <CompositeItem>카드 1</CompositeItem>
    <CompositeItem>카드 2</CompositeItem>
  </CompositeRow>
  <CompositeRow>
    <CompositeItem>카드 3</CompositeItem>
    <CompositeItem>카드 4</CompositeItem>
  </CompositeRow>
</CompositeZone>

// 수직 방향만 반응하는 사이드바
<CompositeZone orientation="vertical" focusLoop>
  <CompositeItem>홈</CompositeItem>
  <CompositeItem>대시보드</CompositeItem>
  <CompositeItem>설정</CompositeItem>
</CompositeZone>

// 수평 방향만 반응하는 탭 목록
<TabList orientation="horizontal">
  <Tab>개요</Tab>
  <Tab>설정</Tab>
  <Tab>로그</Tab>
</TabList>

// 점수 계산 공식
score = distance + (alignment_offset * penalty)

// distance: 두 요소 중심 간 직선 거리
// alignment_offset: 이동 방향의 수직축 오프셋
// penalty: 정렬 페널티 계수 (기본 0.5)

// 예시: 오른쪽으로 이동할 때
// - 완벽히 정렬된 요소 (Y축 차이 0): score = 100 + 0 = 100
// - 약간 어긋난 요소 (Y축 차이 50): score = 100 + 25 = 125
// → 정렬된 요소가 선택됨