레이아웃 컴포넌트¶

표면(surface)과 간격 프리미티브. 콘텐츠를 그룹화하거나 분리할 때 사용. 가로/세로 배치는 컴포넌트가 아니라 row/col 레이아웃 프리미티브를 쓰세요.

모든 컴포넌트는 아래 나열된 프롭 외에 공통 프롭(base props)도 받습니다.

이 파일의 프롭 표는 npm run gen:docs로 zod 스키마에서 자동 생성됩니다.  블록 안의 수동 편집은 덮어씌워집니다.

`container`¶

옵션 패딩이 있는 중립적인 사각 표면. 경계가 보이는 래퍼가 필요할 때.

컴포넌트별 프롭 없음 — 공통 프롭(base props)만 받습니다.

container:
  pad: 16
  w: 300
  h: 120

제목과 옵션 본문이 있는 표면 — 기본 "콘텐츠 카드" 모양.

프롭	타입	설명
`title`	string	Card heading
`body`	string	Card body text

card:
  title: "Revenue"
  body: "$12,400 this quarter"

뚜렷한 헤더 바가 있는 카드 스타일 표면 — 헤딩과 임의 콘텐츠를 묶을 때 card보다 좋습니다.

프롭	타입	설명
`header`	string	패널 헤더 텍스트

panel:
  header: "Account settings"
  w: 420
  h: 240

가늘고 가로 또는 세로인 구분선. 섹션 시각적 분리에 유용.

프롭	타입	설명
`orientation`	`"horizontal"` \| `"vertical"`	구분선 방향

screen:
  - heading: { text: "Profile" }
  - divider: {}
  - heading: { text: "Preferences" }

보이지 않는 간격 — 부모 row/col의 gap:으로 부족할 때 강제로 공간을 줍니다.

프롭	타입	설명
`size`	number	간격 크기 (픽셀)

col:
  items:
    - button: { label: "Save" }
    - spacer: { size: 24 }
    - button: { label: "Delete", variant: danger }