Note

import { Note } from '@coldsurfers/surf-ui/primitives'export default function Example() {  return (    <>      <Note meta="9월 20일 19:00">언니네 이발관 단독공연</Note>      <Note meta="어제 저장함" tone="muted">        Slowdive 첫 내한      </Note>      <Note>메타 없이 한 줄만</Note>    </>  )}

메타 11px ↔ 헤드라인 14px, 차이 3px, 무게는 둘 다 medium 하나입니다. 위계를 크기가 아니라 여백과 순서로 만드는 규율이 여기서 가장 압축돼 있습니다.

meta 는 시각·수치·출처처럼 헤드라인을 놓을 자리를 말하는 줄이라 mono 입니다. 없으면 안 그립니다.

슬롯이 둘뿐인 이유

배치가 아니라 타이포 묶음입니다. 자유로운 ReactNode 배치를 열면 부르는 쪽이 매번 두 줄의 크기·무게를 다시 정하게 되고, 그럼 이 컴포넌트가 막으려던 드리프트가 그대로 돌아옵니다. 링크·<time> 으로 감싸는 건 되지만 다른 서식을 얹는 자리는 아닙니다.

여러 장을 쌓는 패널은 여기 없습니다 — 배경이 그라디언트든 surface2 든 호출자가 정하는 축이고, 그 껍데기는 <div> 한 겹이라 추출할 중복이 없습니다.

값은 랜딩 정본 그대로입니다

apps/im-coldsurf 랜딩의 알림 패널이 이 톤의 정본이고 나머지 표면이 그쪽으로 옮겨 가는 중이라, 정본이 픽셀 하나도 움직이면 안 됩니다. 그래서 눈금 밖 리터럴 넷(radius 14 · padding 16/18/22 · 헤드라인 15px)을 접지 않고 슬롯 안에 그대로 뒀습니다.

반응형 축도 정본을 따라 desktop(1024) 하나입니다 — 정본이 "태블릿 시안이 없으므로 중간 단을 만들지 않는다"고 못박아 뒀습니다. 여기서 tablet(768)을 쓰면 정본이 일부러 안 만든 중간 단이 생깁니다.

tone 기본값이 accent 인 이유

정본이 그렇습니다. 「accent 글자는 누를 것에만」 규율의 명시적 예외 자리입니다 — 노트의 메타 한 줄은 그 규율이 처음부터 인정한 유일한 채도 자리입니다. 읽는 글로 쓰는 노트는 tone="muted" 로 내립니다.

Props

그 밖의 Omit<HTMLAttributes<HTMLDivElement>, 'children'> 속성은 루트 엘리먼트로 그대로 통과한다.