Components

Tailwind v4 + Radix + tailwind-variants 위에서, 데스크탑 밀도(14px 본문) 기준으로 슬롯·variant 구조를 정의한다. 헤드리스는 가능한 모두 Radix UI 로 위임하고, 토큰은 var(--pds-*) 한 계층만 노출한다.

분류는 사이드바 그루핑(meta.json)과 동일하다.

Primitives

• Separator — @radix-ui/react-separator
• Avatar — @radix-ui/react-avatar
• Icon — phosphor 래퍼
• BrandIcons — @lobehub/icons 어댑터

Actions

• Button — @radix-ui/react-slot
• IconButton
• TextButton
• Chip
• ActionCard
• ActionTile
• Input — native <input> + compose-refs

Form

• Checkbox — @radix-ui/react-checkbox
• Switch — @radix-ui/react-switch
• RadioGroup — @radix-ui/react-radio-group
• Select — @radix-ui/react-select
• SegmentedControl
• Combobox — @radix-ui/react-popover + cmdk
• Form — useId 기반 a11y 래퍼 (FormField/Label/Control/Description/Error)

Layout

• AppShell
• PageContainer
• Panel
• SectionHeader

Navigation

• Tabs — @radix-ui/react-tabs (segmented + label variant)
• RemovableTabBar — 닫기 가능한 워크스페이스 탭 (sm/md)
• SidebarMenu
• SidebarList

Overlays

• Tooltip — @radix-ui/react-tooltip
• DropdownMenu — @radix-ui/react-dropdown-menu
• Popover — @radix-ui/react-popover
• Dialog — @radix-ui/react-dialog

Feedback

• Badge
• Progress — @radix-ui/react-progress
• Spinner
• Toast — @radix-ui/react-toast
• ScrollArea — @radix-ui/react-scroll-area

AI / Agent Chat

pluto-note chat-panel/ 소스를 Anthropic Messages API 계약의 controlled 컴포넌트로 이식. @assistant-ui/react · Zustand 의존성 제거, 아이콘은 @fluxloop-ai/pds-icons 로 통일.

• ChatLoadingDots — primitive
• ChatUserMessage
• ChatAssistantMessage
• ChatProcessTrace — thinking · tool_use · tool_result 트레이스
• ChatComposer
• ChatAttachmentChip
• Chat Markdown — 가이드 (@fluxloop-ai/pds-markdown)

Markdown 렌더링과 syntax highlighting 은 renderMarkdown / renderCode slot 주입으로 PDS 본체에서 분리한다.

공통 원칙

• slot/variant 보존: slot 개수·variant 축을 임의 축약하지 않음
• 토큰: theme.semantic.* → var(--pds-*) 일괄 치환
• 전역 squircle: corner-shape: squircle 이 모든 radius 에 자동 적용
• Motion 토큰: duration/easing 은 var(--pds-duration-*) / var(--pds-ease-*)
• 단일 tv(): slot/variant/compound 를 한 정의로

현재 미포함

• Dialog bottom variant (모바일 패턴)
• TextFieldButton / TextFieldContent 서브컴포넌트
• 다크 모드 토큰
• Table · Accordion · Command palette