Window Frame · Tinyrack Design System

핵심 속성

속성	값	기본값
`variant`	`macos`, `browser`	`macos`
`padding` (Body)	`none`, `sm`, `md`, `lg`	`md`
parts	`Root`, `TitleBar`, `Controls`, `Control`, `Title`, `AddressBar`, `Body`	compound API

설치

pnpm add @tinyrack/ui

긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.

스타일

@import '@tinyrack/ui/components/window-frame.css';

긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.

가져오기

import { TRWindowFrame } from '@tinyrack/ui/components/window-frame';

긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.

플레이그라운드

zsh — tinyrack

❯ npx @tinyrack/cli init
✓ Created tinyrack.config.ts
✓ Linked 3 dotfiles

사용법

터미널 창 고유 링크

시그니처 룩. macOS 크롬으로 어두운 터미널을 감싸요. Controls는 신호등 점 3개를 자동으로 그리고, 본문은 --tr-window-frame-body-* 커스텀 속성으로 어두워져서 프레임과 콘텐츠의 톤이 맞아요.

zsh — tinyrack

❯ npx @tinyrack/cli init
✓ Created tinyrack.config.ts
✓ Linked 3 dotfiles

예시

macOS와 브라우저 크롬 고유 링크

제목이 있는 앱 창에는 variant macos를, 타이틀 바를 채우는 주소 표시줄이 있는 웹 목업에는 browser를 사용해요. 둘 다 터미널만이 아니라 실제 UI를 감쌀 수 있어요.

설정

모양시스템 테마 · 동기화 켜짐

https://dotweave.tinyrack.net/en/

dotfile을 버전 관리모든 머신에서 셸 설정을 추적하고 동기화하고 되돌려요.

커스텀 테마 고유 링크

모든 게 커스텀 속성으로 테마링돼요. --tr-window-frame-control-*로 신호등 점을, --tr-window-frame-body-*로 원하는 팔레트를 칠해요. 별도 variant는 필요 없어요.

tokyonight

❯ dotweave status
● 3 tracked · 0 drifted

API

파트	기본 요소	주요 prop
`TRWindowFrame.Root`	`div`	`variant`, `render`
`TRWindowFrame.TitleBar`	`div`	네이티브 div prop
`TRWindowFrame.Controls`	`div`	점 3개를 자동 표시하고 기본으로 `aria-hidden`
`TRWindowFrame.Control`	`div`	`tone`(`close`, `minimize`, `maximize`)
`TRWindowFrame.Title`	`span`	heading으로 만들기 위한 `render`
`TRWindowFrame.AddressBar`	`div`	네이티브 div prop
`TRWindowFrame.Body`	`div`	`padding`(`none`, `sm`, `md`, `lg`)

TRWindowFrame.Root와 TRWindowFrame.Title은 Base UI의 additive render 계약을 지원해서, 프레임을 <article>이나 <figure>로, 제목을 heading으로 바꿀 수 있어요. 신호등 점은 장식용이라 Controls는 aria-hidden을 설정하고 상호작용하지 않는 요소를 렌더링해요. 본문은 테마를 따라가므로 --tr-window-frame-body-background, --tr-window-frame-body-color, --tr-window-frame-body-font로 어두운 터미널을 만들고, --tr-window-frame-control-close, --tr-window-frame-control-minimize, --tr-window-frame-control-maximize로 점 색을 바꿀 수 있어요.