@mondrianai/runyourai-design-system 0.0.26 → 0.0.27

package/README.md

@@ -1,56 +1,33 @@
 # @mondrianai/runyourai-design-system
 
-RunYourAI Design System — React component library built on [shadcn/ui](https://ui.shadcn.com/) components, [Radix UI](https://www.radix-ui.com/) primitives, and [Tailwind CSS v4](https://tailwindcss.com/).
+RunYourAI Design System — [shadcn/ui](https://ui.shadcn.com/) · [Radix UI](https://www.radix-ui.com/) · [Tailwind CSS v4](https://tailwindcss.com/) 기반 React 컴포넌트 라이브러리입니다.
 
-## Requirements
+| 항목 | 내용 |
+| --- | --- |
+| 최종 수정 | 2026-08-11 (Seulki Yun) |
 
-- React 18+
-- Next.js 15+
-- Tailwind CSS v4
-
-## Installation
-
-```bash
-npm install @mondrianai/runyourai-design-system
-# or
-yarn add @mondrianai/runyourai-design-system
-```
-
-## Local Development (yalc)
-
-소비 앱에서 로컬 빌드를 테스트할 때는 [yalc](https://github.com/wclr/yalc)를 사용합니다.
-
-```bash
-# 최초 1회: 소비 앱에 yalc 연결
-# (design system 레포에서)
-yalc publish
-# (소비 앱 레포에서)
-yalc add @mondrianai/runyourai-design-system
-
-# 이후 변경사항 반영 시 (design system 레포에서)
-npm run build && yalc push
-# 소비 앱 dev 서버 재시작 필요
-```
+---
 
-> **주의**: `sidebar.tsx`, `button.tsx` 등 컴포넌트 소스를 수정한 경우, 반드시 `npm run build && yalc push` 를 실행해야 소비 앱에 변경사항이 반영됩니다. 소스 파일을 수정해도 소비 앱의 dev server hot-reload만으로는 dist가 갱신되지 않습니다.
+소비 앱은 `main-frontend`(React 18 · antd 5)와 `core-frontend`(Next.js 16 · React 19 · antd 6) 두 곳입니다. 이 레포는 라이브러리이면서 동시에 **쇼케이스 앱**(`src/app/`)을 겸하고 있어, `yarn dev` 로 모든 컴포넌트를 눈으로 확인할 수 있습니다.
 
----
+| 항목 | 값 |
+| --- | --- |
+| Peer deps | React 18+ · Tailwind CSS v4 |
+| 배포 | Bitbucket Pipelines — `v*` 태그 push 시 npm publish |
+| 로컬 연동 | [yalc](https://github.com/wclr/yalc) |
 
-## Setup
+## 소비 앱에 설치하기
 
 ### 1. 패키지 설치
 
 ```bash
-npm install @mondrianai/runyourai-design-system tailwindcss
-npm install --save-dev @tailwindcss/postcss
-# or
 yarn add @mondrianai/runyourai-design-system tailwindcss
 yarn add --dev @tailwindcss/postcss
 ```
 
 ### 2. PostCSS 설정
 
-프로젝트 루트에 `postcss.config.mjs`를 생성합니다.
+프로젝트 루트에 `postcss.config.mjs` 를 만듭니다.
 
 ```js
 // postcss.config.mjs
@@ -65,7 +42,7 @@ export default config;
 
 ### 3. Next.js (Turbopack) 설정
 
-Next.js 15+ / 16의 기본 번들러인 Turbopack은 CSS `@import`에서 `package.json`의 `exports` 서브패스를 해석하지 못합니다. `next.config.ts`에 아래 `resolveAlias`를 추가해야 합니다.
+Next.js 15+ / 16 의 기본 번들러인 Turbopack 은 CSS `@import` 에서 `package.json` 의 `exports` 서브패스를 해석하지 못합니다. `next.config.ts` 에 `resolveAlias` 를 추가합니다.
 
 ```ts
 // next.config.ts
@@ -85,11 +62,11 @@ const nextConfig: NextConfig = {
 export default nextConfig;
 ```
 
-> Turbopack을 사용하지 않는 경우(webpack 기반 커스텀 설정 등)에는 이 단계를 건너뜁니다.
+> Turbopack 을 쓰지 않으면(webpack 기반 커스텀 설정 등) 이 단계는 건너뜁니다.
 
 ### 4. Tailwind CSS 설정
 
-`globals.css`에 아래 내용을 추가합니다. 디자인 토큰, Tailwind 테마, 애니메이션, 다크모드 설정이 모두 적용됩니다.
+`globals.css` 에 아래를 추가하면 디자인 토큰 · Tailwind 테마 · 애니메이션 · 다크모드가 모두 적용됩니다.
 
 ```css
 /* globals.css */
@@ -98,60 +75,53 @@ export default nextConfig;
 @import '@mondrianai/runyourai-design-system/tailwind-theme';
 
 /* globals.css 위치 기준 node_modules 상대 경로 — 프로젝트 구조에 따라 조정하세요
- * globals.css가 app/globals.css 에 있는 경우: ../node_modules/...
- * globals.css가 src/app/globals.css 에 있는 경우: ../../node_modules/...
+ * app/globals.css      → ../node_modules/...
+ * src/app/globals.css  → ../../node_modules/...
  */
 @source "../node_modules/@mondrianai/runyourai-design-system/dist";
 ```
 
-> **`@import` 순서 주의**
->
-> - `url(...)` 형태의 외부 폰트 import가 있다면 `@import 'tailwindcss'` **앞에** 위치시킵니다.
-> - `@mondrianai/runyourai-design-system/styles`, `@mondrianai/runyourai-design-system/tailwind-theme`는 `@import 'tailwindcss'` **뒤에** 위치시킵니다.
-
-> **디자인 토큰 오버라이드 주의**
->
-> `:root`에서 디자인 시스템 CSS 변수를 오버라이드할 때, **컴포넌트 표면색 토큰**(`--background`, `--card`, `--popover` 등)을 페이지 배경색 설정 목적으로 변경하면 안 됩니다. 이 변수들은 `Button` outline, `Card`, `Popover` 등 컴포넌트의 배경색에 직접 사용됩니다.
->
-> **페이지 배경색**은 CSS 토큰 오버라이드 대신 `html`/`body`에 직접 지정하세요.
->
-> ```css
-> /* ❌ 잘못된 예 — Button outline 등 컴포넌트 배경색까지 바뀜 */
-> :root {
->   --background: #fdfdfd;
-> }
->
-> /* ✅ 올바른 예 — 페이지 배경만 변경, 컴포넌트 토큰 무영향 */
-> html, body {
->   background-color: #fdfdfd;
-> }
-> ```
-
-> **기존 CSS 리셋 주의 (Tailwind v4)**
-> 프로젝트에 `* { margin: 0; padding: 0; }` 같은 전역 리셋이 있다면 반드시 `@layer base`로 감싸야 합니다. Tailwind v4에서 레이어 밖의 스타일은 `@layer utilities`보다 우선순위가 높아 `px-*`, `py-*` 등의 유틸리티 클래스가 무효화됩니다.
->
-> ```css
-> @layer base {
->   *,
->   *::before,
->   *::after {
->     box-sizing: border-box;
->   }
->
->   * {
->     margin: 0;
->     padding: 0;
->   }
-> }
-> ```
+**`@import` 순서** — `url(...)` 형태의 외부 폰트 import 는 `@import 'tailwindcss'` **앞에**, 디자인 시스템 두 줄은 **뒤에** 둡니다.
+
+**디자인 토큰 오버라이드** — `:root` 에서 **컴포넌트 표면색 토큰**(`--background` · `--card` · `--popover` 등)을 페이지 배경색 목적으로 바꾸면 안 됩니다. 이 변수들은 `Button` outline · `Card` · `Popover` 의 배경색에 직접 쓰입니다.
+
+```css
+/* ❌ Button outline 등 컴포넌트 배경색까지 바뀜 */
+:root {
+  --background: #fdfdfd;
+}
+
+/* ✅ 페이지 배경만 변경, 컴포넌트 토큰 무영향 */
+html,
+body {
+  background-color: #fdfdfd;
+}
+```
+
+**기존 CSS 리셋** — `* { margin: 0; padding: 0; }` 같은 전역 리셋이 있다면 반드시 `@layer base` 로 감쌉니다. Tailwind v4 에서 레이어 밖 스타일은 `@layer utilities` 보다 우선순위가 높아 `px-*` · `py-*` 가 무효화됩니다.
+
+```css
+@layer base {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  * {
+    margin: 0;
+    padding: 0;
+  }
+}
+```
 
 ### 5. Provider 설정
 
-`Tooltip` 등 Radix UI 기반 컴포넌트가 올바르게 동작하려면 앱 최상단에 `Providers`를 감싸야 합니다.
+`Tooltip` · `toast()` 등 Radix · sonner 기반 컴포넌트가 동작하려면 앱 최상단을 `RyaiDsProvider` 로 감쌉니다.
 
 ```tsx
 // app/layout.tsx
-import { Providers } from '@mondrianai/runyourai-design-system';
+import { RyaiDsProvider } from '@mondrianai/runyourai-design-system';
 
 export default function RootLayout({
   children,
@@ -161,19 +131,21 @@ export default function RootLayout({
   return (
     <html lang='ko'>
       <body>
-        <Providers>{children}</Providers>
+        <RyaiDsProvider>{children}</RyaiDsProvider>
       </body>
     </html>
   );
 }
 ```
 
-## Usage
+> antd 를 함께 쓴다면 **antd `ConfigProvider` 바깥**에 둡니다.
+
+## 사용
 
 ```tsx
 import { Button, Badge, Card } from '@mondrianai/runyourai-design-system';
 
-export default function Page() {
+export function Page() {
   return (
     <Card>
       <Badge text='New' />
@@ -183,78 +155,59 @@ export default function Page() {
 }
 ```
 
-### Utilities
-
 ```tsx
 import { cn } from '@mondrianai/runyourai-design-system/utils';
 
 <div className={cn('base-class', isActive && 'active-class')} />;
 ```
 
-## Components
-
-| Component                             | Description               |
-| ------------------------------------- | ------------------------- |
-| `Accordion`                           | 펼침/접힘 컨텐츠 영역     |
-| `AlertDialog`                         | 확인/취소 모달 다이얼로그 |
-| `Alert`                               | 인라인 알림 메시지        |
-| `Avatar` / `AvatarGroup`              | 유저 아바타 및 그룹       |
-| `Badge`                               | 상태·카테고리 배지        |
-| `Breadcrumb`                          | 페이지 경로 탐색          |
-| `Button`                              | 버튼                      |
-| `Card`                                | 카드 컨테이너             |
-| `Checkbox` / `CheckboxCard`           | 체크박스                  |
-| `ChoiceCardGroup` / `ChoiceCardItem`  | 선택형 카드 그룹          |
-| `Collapsible`                         | 접을 수 있는 컨텐츠       |
-| `Combobox`                            | 검색 가능한 선택 입력     |
-| `Field` / `FieldSection` / `FieldRow` | 폼 필드 레이아웃          |
-| `GroupedSelect`                       | 그룹 구분이 있는 셀렉트   |
-| `Header`                              | 앱 상단 헤더              |
-| `Icon`                                | Lucide 아이콘 래퍼        |
-| `MarkdownMessage`                     | 마크다운 렌더링 메시지    |
-| `Menubar`                             | 메뉴바                    |
-| `MessageFooter`                       | 메시지 하단 액션 영역     |
-| `NumberBadge`                         | 숫자 배지                 |
-| `SegmentedControl`                    | 세그먼트 탭 컨트롤        |
-| `Select`                              | 셀렉트 박스               |
-| `Sheet`                               | 사이드 슬라이드 패널      |
-| `Sidebar`                             | 앱 사이드바               |
-| `Slider`                              | 슬라이더                  |
-| `Stepper`                             | 단계 진행 표시            |
-| `Switch` / `SwitchField`              | 토글 스위치               |
-| `Tooltip` / `TooltipWithIcon`         | 툴팁                      |
-| `UserMessageBubble`                   | 채팅 메시지 말풍선        |
-
-## Icons
-
-### Custom Icons
+아이콘도 같은 진입점에서 가져옵니다. `size-*` · `text-*` 클래스로 크기와 색을 제어합니다.
 
 ```tsx
 import {
-  SparklesIcon,
-  TrashIcon,
-  StarIcon,
+  SparklesIcon, // 커스텀 아이콘
+  ClaudeIcon, // 브랜드 아이콘
+  RyaiLogoIcon, // 로고
 } from '@mondrianai/runyourai-design-system';
 
 <SparklesIcon className='size-4 text-primary' />;
 ```
 
-### Brand Icons
+**제공 컴포넌트 목록**은 여기 적지 않습니다 — 목록은 금방 낡습니다. `src/components/index.ts` 의 export 를 보거나, `yarn dev` 로 쇼케이스 앱을 띄워 확인하세요.
 
-```tsx
-import {
-  ClaudeIcon,
-  OpenAiIcon,
-  GeminiIcon,
-} from '@mondrianai/runyourai-design-system';
+## 로컬 개발
 
-<ClaudeIcon className='size-6' />;
+```bash
+yarn install
+yarn dev           # 쇼케이스 앱 (port 3999)
+yarn build         # 라이브러리 빌드 — tsc --noEmit && tsup
+yarn lint
 ```
 
-### Logo
+소비 앱에서 로컬 빌드를 테스트할 때는 yalc 를 씁니다.
 
-```tsx
-import { RyaiLogoIcon } from '@mondrianai/runyourai-design-system';
+```bash
+# 디자인 시스템 레포에서 (최초 1회)
+yarn build && yalc publish
+# 소비 앱에서 (최초 1회)
+yalc add @mondrianai/runyourai-design-system
 
-<RyaiLogoIcon />;
+# 이후 변경마다 — 디자인 시스템 레포에서
+yarn build && yalc push
 ```
+
+> **소스만 고치면 소비 앱에 반영되지 않습니다.** 소비 앱은 `dist/` 를 보므로 반드시 `yarn build` 를 거쳐야 합니다. 최초 세팅·트러블슈팅은 [개발 사이클](./docs/operations/dev-cycle.md).
+
+## 문서
+
+| 문서 | 내용 |
+| --- | --- |
+| [`AGENTS.md`](./AGENTS.md) | **작업 규칙** — 코드를 만지기 전에 읽습니다. 디자이너·개발자 갈래가 나뉩니다 |
+| [`docs/`](./docs/README.md) | 문서 인덱스 — 디자인 · 아키텍처 · 운영 · 계획 |
+| [Figma 구현](./docs/design/figma-implementation.md) | 시안을 1px 오차 없이 옮기는 기준 |
+| [디자인 토큰](./docs/design/tokens.md) | `variables.json` → CSS 세 파일 동기화 |
+| [컴포넌트 API](./docs/architecture/component-api.md) | 공개 표면 설계 원칙 |
+| [개발 사이클](./docs/operations/dev-cycle.md) | 구현 후 마무리 · yalc 반영 · 트러블슈팅 |
+| [릴리스](./docs/operations/release.md) | 버전 결정 · 태그 · npm 배포 |
+
+디렉터리 구조와 설정 항목은 문서로 옮겨두지 않습니다. `src/` 와 `tsup.config.ts` · `package.json` 을 직접 보세요. 왜 그렇게 되어 있는지는 위 문서에 있습니다.

package/dist/index.d.mts

@@ -114,7 +114,7 @@ declare function BreadcrumbSeparator({ iconName, className, ...props }: React__d
 
 declare const buttonVariants: (props?: ({
     variant?: "link" | "primary" | "secondary" | "outline" | "ghost" | "destructive" | "ghostDestructive" | null | undefined;
-    size?: "rounded" | "default" | "icon" | "pill" | null | undefined;
+    size?: "rounded" | "default" | "sm" | "icon" | "pill" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     /** Radix Slot 패턴 — true 이면 자식 요소에 props를 병합 */
@@ -819,7 +819,7 @@ type SelectProps = SingleSelectProps | MultiSelectProps;
  * - 열린 상태에서 listbox에 포커스가 이동하고 `aria-activedescendant`로 활성 옵션을 연결한다.
  * - 키보드: ↑/↓/Home/End 이동, Enter/Space 선택(다중은 토글), Esc 닫힘, 타입어헤드 점프.
  * - 역할: 컨테이너 `role="listbox"`(+다중 시 `aria-multiselectable`), 옵션 `role="option"`+`aria-selected`.
- * 배경·설계 근거: {@link ../../../docs/todo/select-a11y-keyboard-aria.md}
+ * 배경·설계 근거: {@link ../../../docs/plans/select-a11y-keyboard-aria.md}
  */
 declare function Select(props: SelectProps): react_jsx_runtime.JSX.Element;
 
@@ -999,7 +999,7 @@ interface TabsProps<T extends string = string> {
  *
  * NOTE: 콘텐츠 패널은 사용처가 바깥에서 `current`로 렌더하므로 Tabs.Content(및 aria-controls↔
  *   aria-labelledby 연결)가 없다. 키보드·역할 a11y는 확보했으나 탭↔패널 연결은 미완.
- *   구 pill 사용처 이관 및 릴리스 체크리스트: docs/todo/tabs-segmented-control.md
+ *   구 pill 사용처 이관 및 릴리스 체크리스트: docs/plans/tabs-segmented-control.md
  */
 declare function Tabs<T extends string = string>({ allTabs, current, onTabChange, block, className, }: TabsProps<T>): react_jsx_runtime.JSX.Element;
 
@@ -1396,6 +1396,15 @@ type ToastOptions = {
     duration?: number;
     /** 표시 위치. 미지정 시 `<Toaster />` 기본값(top-center). */
     position?: ExternalToast['position'];
+    /**
+     * 기본 너비(356px)에서 줄바꿈하지 않고 문구 길이만큼 토스트를 넓힌다.
+     * 목록처럼 길이가 가변적인 문구(예: 지원하지 않는 파일 형식 나열)에 사용한다.
+     *
+     * 무한정 넓어지지는 않는다. `--toast-nowrap-max`(기본 `min(90vw, 720px)`)에서
+     * 멈추고, 그보다 긴 문구는 그 지점부터 다시 줄바꿈한다. 좁은 뷰포트에서
+     * 토스트가 화면 밖으로 나가지 않도록 하는 안전장치다.
+     */
+    nowrap?: boolean;
     /** 토스트 컨테이너에 추가할 클래스 */
     className?: string;
 };
@@ -1443,7 +1452,7 @@ type ToastPromiseMessages<T> = {
  *   error: '실패',
  * });
  */
-declare function promiseToast<T>(promise: Promise<T> | (() => Promise<T>), messages: ToastPromiseMessages<T>): string | number;
+declare function promiseToast<T>(promise: Promise<T> | (() => Promise<T>), messages: ToastPromiseMessages<T>, options?: ToastMethodOptions): string | number;
 /**
  * 이미 떠 있는 하나의 토스트를 이후 상태로 갱신하는 핸들.
  * `toast.loading()`이 반환하며, `{ id }`를 옵션으로 넘겨 다시 지정할 필요 없이

package/dist/index.d.ts

@@ -114,7 +114,7 @@ declare function BreadcrumbSeparator({ iconName, className, ...props }: React__d
 
 declare const buttonVariants: (props?: ({
     variant?: "link" | "primary" | "secondary" | "outline" | "ghost" | "destructive" | "ghostDestructive" | null | undefined;
-    size?: "rounded" | "default" | "icon" | "pill" | null | undefined;
+    size?: "rounded" | "default" | "sm" | "icon" | "pill" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     /** Radix Slot 패턴 — true 이면 자식 요소에 props를 병합 */
@@ -819,7 +819,7 @@ type SelectProps = SingleSelectProps | MultiSelectProps;
  * - 열린 상태에서 listbox에 포커스가 이동하고 `aria-activedescendant`로 활성 옵션을 연결한다.
  * - 키보드: ↑/↓/Home/End 이동, Enter/Space 선택(다중은 토글), Esc 닫힘, 타입어헤드 점프.
  * - 역할: 컨테이너 `role="listbox"`(+다중 시 `aria-multiselectable`), 옵션 `role="option"`+`aria-selected`.
- * 배경·설계 근거: {@link ../../../docs/todo/select-a11y-keyboard-aria.md}
+ * 배경·설계 근거: {@link ../../../docs/plans/select-a11y-keyboard-aria.md}
  */
 declare function Select(props: SelectProps): react_jsx_runtime.JSX.Element;
 
@@ -999,7 +999,7 @@ interface TabsProps<T extends string = string> {
  *
  * NOTE: 콘텐츠 패널은 사용처가 바깥에서 `current`로 렌더하므로 Tabs.Content(및 aria-controls↔
  *   aria-labelledby 연결)가 없다. 키보드·역할 a11y는 확보했으나 탭↔패널 연결은 미완.
- *   구 pill 사용처 이관 및 릴리스 체크리스트: docs/todo/tabs-segmented-control.md
+ *   구 pill 사용처 이관 및 릴리스 체크리스트: docs/plans/tabs-segmented-control.md
  */
 declare function Tabs<T extends string = string>({ allTabs, current, onTabChange, block, className, }: TabsProps<T>): react_jsx_runtime.JSX.Element;
 
@@ -1396,6 +1396,15 @@ type ToastOptions = {
     duration?: number;
     /** 표시 위치. 미지정 시 `<Toaster />` 기본값(top-center). */
     position?: ExternalToast['position'];
+    /**
+     * 기본 너비(356px)에서 줄바꿈하지 않고 문구 길이만큼 토스트를 넓힌다.
+     * 목록처럼 길이가 가변적인 문구(예: 지원하지 않는 파일 형식 나열)에 사용한다.
+     *
+     * 무한정 넓어지지는 않는다. `--toast-nowrap-max`(기본 `min(90vw, 720px)`)에서
+     * 멈추고, 그보다 긴 문구는 그 지점부터 다시 줄바꿈한다. 좁은 뷰포트에서
+     * 토스트가 화면 밖으로 나가지 않도록 하는 안전장치다.
+     */
+    nowrap?: boolean;
     /** 토스트 컨테이너에 추가할 클래스 */
     className?: string;
 };
@@ -1443,7 +1452,7 @@ type ToastPromiseMessages<T> = {
  *   error: '실패',
  * });
  */
-declare function promiseToast<T>(promise: Promise<T> | (() => Promise<T>), messages: ToastPromiseMessages<T>): string | number;
+declare function promiseToast<T>(promise: Promise<T> | (() => Promise<T>), messages: ToastPromiseMessages<T>, options?: ToastMethodOptions): string | number;
 /**
  * 이미 떠 있는 하나의 토스트를 이후 상태로 갱신하는 핸들.
  * `toast.loading()`이 반환하며, `{ id }`를 옵션으로 넘겨 다시 지정할 필요 없이

package/dist/index.js

@@ -716,12 +716,15 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
       /**
        * size — 버튼 크기
        * default      h-9 (36px)  px-4  텍스트 버튼 표준
+       * sm           h-8 (32px)  px-3 py-1.5  표 안 액션 등 좁은 자리용 (Figma 6320:6085)
        * icon         36×36 정사각형  아이콘 전용, rounded-lg 유지 / hover: opacity-80
        * rounded      36×36 원형     아이콘 전용, rounded-full     / hover: opacity-80
        * pill         px-3 py-1.5 rounded-full  Rounded-text 필셋 스타일
        */
       size: {
         default: "h-9 px-4 py-2",
+        /** Small — Figma node 6320:6085. 높이 32px, 패딩만 default 와 다르다 */
+        sm: "h-8 px-3 py-1.5",
         icon: "size-9 p-0 hover:opacity-80",
         rounded: "size-9 p-0 rounded-full hover:opacity-80",
         pill: "px-3 py-1.5 rounded-full"
@@ -1051,8 +1054,8 @@ function AvatarGroup({ avatars, size = "md", className }) {
 
 // src/components/ui/badge.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var TEXT_BADGE_BASE = "inline-flex w-fit shrink-0 items-center justify-center gap-1 h-5.5 rounded-lg px-2.5 py-0.5 text-xs font-medium leading-xs tracking-tight whitespace-nowrap";
-var BADGE_ICON_BASE = "size-3";
+var TEXT_BADGE_BASE = "inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-full px-2.5 py-1 text-sm font-medium leading-5 tracking-tight whitespace-nowrap";
+var BADGE_ICON_BASE = "size-4";
 var BADGE_VARIANT_STYLES = {
   default: "bg-primary text-primary-foreground",
   secondary: "bg-secondary text-secondary-foreground",
@@ -4725,13 +4728,13 @@ MenubarSeparator.displayName = import_radix_ui13.Menubar.Separator.displayName;
 
 // src/components/ui/number-badge.tsx
 var import_jsx_runtime34 = require("react/jsx-runtime");
-var NUMBER_BADGE_BASE = "inline-flex shrink-0 items-center justify-center rounded-full font-mono text-xs font-medium leading-xs whitespace-nowrap";
+var NUMBER_BADGE_BASE = "inline-flex h-7 shrink-0 items-center justify-center rounded-full font-mono text-sm font-medium leading-4 whitespace-nowrap";
 function NumberBadge({
   count,
   variant = "default",
   className
 }) {
-  const sizeClass = count < 10 ? "size-5" : "h-5 min-w-5 px-2";
+  const sizeClass = count < 10 ? "w-5" : "min-w-5 px-2";
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     "span",
     {
@@ -7236,29 +7239,63 @@ var TYPE_TOAST = {
   info: import_sonner.toast.info,
   error: import_sonner.toast.error
 };
+var WIDTH_CLASS = {
+  /**
+   * 내용 크기로 줄이고, --width(356px)를 넘으면 줄바꿈.
+   *
+   * w-fit으로 줄이면 absolute+left/right auto라 컨테이너 좌측 끝에 붙어 왼쪽으로
+   * 치우친다. left/right:0 + margin-inline:auto로 컨테이너 안에서 다시 중앙 정렬한다.
+   * (left:50%로 잡으면 fit-content의 available space가 컨테이너의 절반으로 줄어
+   * 토스트가 178px에서 줄바꿈해 버리므로 이 조합이어야 한다.)
+   */
+  fit: "!w-fit !max-w-[var(--width)] data-[x-position=center]:!left-0 data-[x-position=center]:!right-0 data-[x-position=center]:!mx-auto",
+  /**
+   * 한 줄로 늘리고, --toast-nowrap-max에서 멈춘 뒤 줄바꿈.
+   *
+   * 컨테이너(--width)보다 넓어질 수 있어서 fit의 중앙 정렬 방식을 쓸 수 없다.
+   * left:0 + right:0 + margin auto는 over-constrained가 되고, CSS 규격상 마진이
+   * 음수가 되어야 하는 경우 ltr에서는 margin-left가 0으로 고정되어 좌측으로 쏠린다.
+   * 대신 left:50% + translate로 잡는다. Tailwind v4의 translate 유틸리티는
+   * `transform`이 아니라 `translate` 속성을 쓰므로, sonner가 스택 애니메이션에
+   * 사용하는 transform과 겹치지 않고 합성된다.
+   */
+  nowrap: "!w-max !max-w-[var(--toast-nowrap-max)] data-[x-position=center]:!left-1/2 data-[x-position=center]:!right-auto data-[x-position=center]:-translate-x-1/2"
+};
+function toSonnerOptions(options) {
+  const _a = options != null ? options : {}, { nowrap, className } = _a, rest = __objRest(_a, ["nowrap", "className"]);
+  return __spreadProps(__spreadValues({}, rest), {
+    className: cn(nowrap ? WIDTH_CLASS.nowrap : WIDTH_CLASS.fit, className)
+  });
+}
 function baseToast(message, options) {
   const _a = options != null ? options : {}, { type } = _a, rest = __objRest(_a, ["type"]);
-  if (type) return TYPE_TOAST[type](message, rest);
-  return (0, import_sonner.toast)(message, rest);
+  const sonnerOptions = toSonnerOptions(rest);
+  if (type) return TYPE_TOAST[type](message, sonnerOptions);
+  return (0, import_sonner.toast)(message, sonnerOptions);
 }
 function resolveMessage(message, arg) {
   return typeof message === "function" ? message(arg) : message;
 }
-function promiseToast(promise, messages) {
+function promiseToast(promise, messages, options) {
   const running = typeof promise === "function" ? promise() : promise;
-  const id = import_sonner.toast.loading(messages.loading, {
+  const sonnerOptions = toSonnerOptions(options);
+  const id = import_sonner.toast.loading(messages.loading, __spreadProps(__spreadValues({}, sonnerOptions), {
     description: messages.description
-  });
+  }));
   running.then(
-    (data) => import_sonner.toast.success(resolveMessage(messages.success, data), { id })
+    (data) => import_sonner.toast.success(resolveMessage(messages.success, data), __spreadProps(__spreadValues({}, sonnerOptions), {
+      id
+    }))
   ).catch(
-    (error) => import_sonner.toast.error(resolveMessage(messages.error, error), { id })
+    (error) => import_sonner.toast.error(resolveMessage(messages.error, error), __spreadProps(__spreadValues({}, sonnerOptions), {
+      id
+    }))
   );
   return id;
 }
 function makeToastHandle(id) {
   const update = (fn) => (message, options) => {
-    fn(message, __spreadProps(__spreadValues({}, options), { id }));
+    fn(message, __spreadProps(__spreadValues({}, toSonnerOptions(options)), { id }));
   };
   return {
     id,
@@ -7293,7 +7330,7 @@ var toast = Object.assign(baseToast, {
    *   onError:   () => t.error('저장 실패'),
    * });
    */
-  loading: (message, options) => makeToastHandle(import_sonner.toast.loading(message, options)),
+  loading: (message, options) => makeToastHandle(import_sonner.toast.loading(message, toSonnerOptions(options))),
   /** Promise/async 함수를 받아 로딩→성공/실패로 자동 전환. */
   promise: promiseToast,
   /** id로 특정 토스트를 닫는다. 인자 없으면 전체 닫기. */
@@ -7321,16 +7358,18 @@ function Toaster(_a) {
       style: {
         "--normal-bg": "var(--popover)",
         "--normal-text": "var(--popover-foreground)",
-        "--normal-border": "var(--border)"
+        "--normal-border": "var(--border)",
+        // `nowrap` 토스트의 상한. 뷰포트 밖으로 나가지 않도록 90vw로 막고,
+        // 대화면에서 과도하게 길어지지 않도록 절대값도 함께 건다.
+        "--toast-nowrap-max": "min(90vw, 720px)"
       },
       toastOptions: {
         classNames: {
-          // 세로 패딩만 약간 축소(16→12px). 너비는 내용에 맞추고(fit-content),
-          // 기본 너비(--width, 356px)를 넘어서면 줄바꿈. (sonner 기본 규칙보다 특이도가 필요해 ! 사용)
-          // w-fit으로 토스트를 내용 크기로 줄이면 absolute+left/right auto라 컨테이너 좌측
-          // 끝에 붙어 왼쪽으로 치우친다. left/right:0 + margin-inline:auto로 컨테이너 안에서
-          // 다시 중앙 정렬한다(transform은 stacking 애니메이션이 쓰므로 건드리지 않는다).
-          toast: "!w-fit !max-w-[var(--width)] !py-3 data-[x-position=center]:!left-0 data-[x-position=center]:!right-0 data-[x-position=center]:!mx-auto",
+          // 세로 패딩만 약간 축소(16→12px).
+          // 너비·중앙 정렬은 토스트마다 달라지므로 여기 두지 않는다. sonner의 내부 cn은
+          // 단순 join이라 전역 클래스와 개별 클래스가 충돌해도 정리해 주지 않는다.
+          // `toast()`에서 cn()(tailwind-merge)으로 합쳐 WIDTH_CLASS로 붙인다.
+          toast: "!py-3",
           title: "text-sm font-medium leading-5 tracking-tight break-words",
           description: "text-sm leading-5 tracking-tight text-muted-foreground break-words"
         }