sellmate-design-system-react 7.1.0 → 8.1.0

package/dist/components/SDrawer/SDrawer.d.ts

@@ -16,14 +16,25 @@ export interface SDrawerProps {
     persistent?: boolean;
     /** 접근성 제목 및 헤더 제목 */
     title?: string;
-    /** Drawer 너비. 기본값은 Figma drawer 기준 572px이다. */
+    /**
+     * Drawer 너비. 기본값은 Figma drawer 기준 572px이다.
+     * 창이 이보다 좁으면 창 폭까지만 넓어진다 — 드로어가 화면 밖으로 나가지 않는다.
+     * `resizable` 로 조절한 폭은 이 값이 바뀔 때 되돌아간다 — 앱이 폭을 저장해 두었다가
+     * 다시 열 때 넘겨주면 그 폭으로 열린다.
+     */
     width?: number | string;
-    /** true면 왼쪽 테두리를 드래그해 너비를 조절할 수 있다. */
+    /**
+     * 왼쪽 테두리를 끌어 너비를 조절할 수 있게 한다. 조절선은 패널 왼쪽 경계 전체이며
+     * 평소엔 보이지 않다가 hover·포커스·조절 중에만 드러난다(SSplitter·SGnb 와 같은 선).
+     * 포커스를 받아 방향키(Shift 는 크게)·Home·End 로도 조절된다.
+     */
     resizable?: boolean;
-    /** 리사이즈 가능한 최소 너비(px, %, vw, vh) */
+    /** 리사이즈 가능한 최소 너비(px, %, vw, vh). % 는 viewport 기준이며, 창 폭보다 클 수 없다 */
     minWidth?: number | string;
-    /** 리사이즈 가능한 최대 너비(px, %, vw, vh) */
+    /** 리사이즈 가능한 최대 너비(px, %, vw, vh). % 는 viewport 기준이며, 주지 않으면 창 폭이 상한이다 */
     maxWidth?: number | string;
+    /** 너비가 확정될 때(드래그를 놓거나 방향키 조작). 드래그하는 동안에는 오지 않는다 */
+    onWidthChange?: (width: number) => void;
     /** footer 좌측 슬롯 */
     footerLeft?: ReactNode;
     /** 우측 기본 액션 버튼 */
@@ -39,4 +50,4 @@ export interface SDrawerProps {
  * 모달을 추가로 열면 새 모달이 Drawer 위에 쌓이고, Drawer 내부 floating은 전용 portal
  * container를 통해 Drawer의 backdrop 위에 표시된다.
  */
-export declare function SDrawer({ open, onOpenChange, onClose, persistent, title, width, resizable, minWidth, maxWidth, footerLeft, button, children, className, style, }: SDrawerProps): import("react").JSX.Element;
+export declare function SDrawer({ open, onOpenChange, onClose, persistent, title, width, resizable, minWidth, maxWidth, onWidthChange, footerLeft, button, children, className, style, }: SDrawerProps): import("react").JSX.Element;

package/dist/components/SExpansionItem/README.md

@@ -22,6 +22,7 @@
 | `interaction?` | `SExpansionItemInteraction` | — | hover/selected 상태에서 적용할 인터랙션 preset |
 | `accentStripe?` | `boolean` | `false` | 아이템 왼쪽 accent stripe 표시 여부 |
 | `dense?` | `boolean` | `false` |  |
+| `size?` | `SExpansionItemSize` | `'sm'` | 타이포그래피 크기 |
 | `disabled?` | `boolean` | `false` |  |
 
 #### Events

package/dist/components/SExpansionItem/SExpansionItem.d.ts

@@ -7,6 +7,7 @@ export interface SExpansionItemRenderState {
 export type SExpansionItemRenderProp = (state: SExpansionItemRenderState) => ReactNode;
 export type SExpansionItemInteraction = 'chevron';
 export type SExpansionItemSupportingTextPosition = 'right' | 'bottom';
+export type SExpansionItemSize = 'sm' | 'md';
 export interface SExpansionItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onToggle' | 'title'> {
     title: ReactNode;
     /** 제목을 보조하는 텍스트 */
@@ -31,6 +32,8 @@ export interface SExpansionItemProps extends Omit<HTMLAttributes<HTMLDivElement>
     /** 아이템 왼쪽 accent stripe 표시 여부 */
     accentStripe?: boolean;
     dense?: boolean;
+    /** 타이포그래피 크기 */
+    size?: SExpansionItemSize;
     disabled?: boolean;
     onToggle?: (expanded: boolean, event: MouseEvent<HTMLButtonElement>) => void;
 }

package/dist/components/SGnb/README.md

@@ -17,9 +17,15 @@
 | `folded?` | `boolean` | — | 접힘(레일) 상태. 미지정 시 SLayout 의 folded 를 따른다. |
 | `logo?` | `ReactNode` | — | 상단바 로고 영역 (slot). header="full" 이면 폭이 140px 로 고정된다. |
 | `topContent?` | `ReactNode` | — | 상단바 로고 오른쪽 슬롯 (검색·액션 등). 로고와 16px 띄고 남는 폭을 모두 차지하므로 안에서 자유롭게 정렬한다. 상단바가 전폭인 header="full" 에서만 렌더된다 (fix 는 상단바가 좁은 GNB 컬럼 안이라 놓을 자리가 없다). |
+| `railTop?` | `ReactNode` | — | 레일 상단 고정 슬롯. 레일 아이템이 많아 넘치면 아이템 목록(ul)만 스크롤되고 이 슬롯은 레일 상단(상단바 바로 아래)에 붙어 고정된다. useRail 일 때만 렌더된다. |
 | `railFooter?` | `ReactNode` | — | 레일 하단 고정 슬롯. 레일 아이템이 많아 넘치면 아이템 목록(ul)만 스크롤되고 이 슬롯은 레일 하단에 붙어 고정된다. useRail 일 때만 렌더된다. |
+| `menuTop?` | `ReactNode` | — | 메뉴 상단 고정 슬롯. 메뉴 아이템이 많아 넘치면 메뉴 목록(ul)만 스크롤되고 이 슬롯은 메뉴 상단에 붙어 고정된다. 메뉴가 렌더될 때만(showMenu) 나타난다. |
 | `menuFooter?` | `ReactNode` | — | 메뉴 하단 고정 슬롯. 메뉴 아이템이 많아 넘치면 메뉴 목록(ul)만 스크롤되고 이 슬롯은 메뉴 하단에 붙어 고정된다. 메뉴가 렌더될 때만(showMenu) 나타난다. |
+| `foldedTop?` | `ReactNode` | — | 접힘(fix 레일) 상단 고정 슬롯. 접으면 본문이 빠져나가며 rail/menu top 도 사라지므로, 48px 폴드 레일 상단(상단바 바로 아래)에 붙는 별도 슬롯이다. header="fix" 로 접혔을 때만 나타난다. |
 | `foldedFooter?` | `ReactNode` | — | 접힘(fix 레일) 하단 고정 슬롯. 접으면 본문이 빠져나가며 rail/menu footer 도 사라지므로, 48px 폴드 레일 바닥에 붙는 별도 슬롯이다. header="fix" 로 접혔을 때만 나타난다. |
+| `resizable?` | `boolean` | `false` | 메뉴 폭을 드래그로 조절할 수 있게 한다. 레일 폭은 고정이고 **메뉴 컬럼만** 늘고 준다. 조절선은 GNB 컬럼의 오른쪽 경계 전체다 — fix 는 상단바 높이까지, full 은 상단바가 전폭이라 본문 높이까지. 접혀 있거나 깔 메뉴가 없으면(레일 리프가 활성) 조절선이 나오지 않는다. |
+| `menuWidth?` | `number` | — | 메뉴 폭(px). 주면 controlled — onMenuWidthChange 로 직접 갱신해야 움직인다 |
+| `defaultMenuWidth?` | `number` | — | 메뉴 초기 폭(px). uncontrolled |
 | `ariaLabel?` | `string` | `'global navigation'` | 메뉴 landmark(nav) 의 접근성 레이블. 한 화면에 nav 가 여럿일 때 구분한다. |
 
 #### Events
@@ -30,6 +36,7 @@
 | `onRailChange` | `(value: string) => void` | 레일 선택 변경. 레일 아이템을 눌러 패널이 바뀔 때 알린다(선택 상태는 SGnb 가 자체 관리). |
 | `onFoldChange` | `(folded: boolean) => void` | 접힘 토글 (sdFoldChange) |
 | `onLauncherClick` | `() => void` | 앱런처(그리드) 버튼 클릭. 미지정 시 런처 버튼을 렌더하지 않는다. 접힘 레일(fix)에는 폴드 버튼만 남으므로 표시되지 않는다. |
+| `onMenuWidthChange` | `(width: number) => void` | 메뉴 폭이 확정될 때(드래그를 놓거나 방향키 조작). 드래그하는 동안에는 오지 않는다 |
 
 ## Dependencies
 

package/dist/components/SGnb/SGnb.d.ts

@@ -38,21 +38,48 @@ export interface SGnbProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>
      * (fix 는 상단바가 좁은 GNB 컬럼 안이라 놓을 자리가 없다).
      */
     topContent?: ReactNode;
+    /**
+     * 레일 상단 고정 슬롯. 레일 아이템이 많아 넘치면 아이템 목록(ul)만 스크롤되고
+     * 이 슬롯은 레일 상단(상단바 바로 아래)에 붙어 고정된다. useRail 일 때만 렌더된다.
+     */
+    railTop?: ReactNode;
     /**
      * 레일 하단 고정 슬롯. 레일 아이템이 많아 넘치면 아이템 목록(ul)만 스크롤되고
      * 이 슬롯은 레일 하단에 붙어 고정된다. useRail 일 때만 렌더된다.
      */
     railFooter?: ReactNode;
+    /**
+     * 메뉴 상단 고정 슬롯. 메뉴 아이템이 많아 넘치면 메뉴 목록(ul)만 스크롤되고
+     * 이 슬롯은 메뉴 상단에 붙어 고정된다. 메뉴가 렌더될 때만(showMenu) 나타난다.
+     */
+    menuTop?: ReactNode;
     /**
      * 메뉴 하단 고정 슬롯. 메뉴 아이템이 많아 넘치면 메뉴 목록(ul)만 스크롤되고
      * 이 슬롯은 메뉴 하단에 붙어 고정된다. 메뉴가 렌더될 때만(showMenu) 나타난다.
      */
     menuFooter?: ReactNode;
+    /**
+     * 접힘(fix 레일) 상단 고정 슬롯. 접으면 본문이 빠져나가며 rail/menu top 도 사라지므로,
+     * 48px 폴드 레일 상단(상단바 바로 아래)에 붙는 별도 슬롯이다. header="fix" 로 접혔을 때만 나타난다.
+     */
+    foldedTop?: ReactNode;
     /**
      * 접힘(fix 레일) 하단 고정 슬롯. 접으면 본문이 빠져나가며 rail/menu footer 도 사라지므로,
      * 48px 폴드 레일 바닥에 붙는 별도 슬롯이다. header="fix" 로 접혔을 때만 나타난다.
      */
     foldedFooter?: ReactNode;
+    /**
+     * 메뉴 폭을 드래그로 조절할 수 있게 한다. 레일 폭은 고정이고 **메뉴 컬럼만** 늘고 준다.
+     * 조절선은 GNB 컬럼의 오른쪽 경계 전체다 — fix 는 상단바 높이까지, full 은 상단바가 전폭이라 본문 높이까지.
+     * 접혀 있거나 깔 메뉴가 없으면(레일 리프가 활성) 조절선이 나오지 않는다.
+     */
+    resizable?: boolean;
+    /** 메뉴 폭(px). 주면 controlled — onMenuWidthChange 로 직접 갱신해야 움직인다 */
+    menuWidth?: number;
+    /** 메뉴 초기 폭(px). uncontrolled */
+    defaultMenuWidth?: number;
+    /** 메뉴 폭이 확정될 때(드래그를 놓거나 방향키 조작). 드래그하는 동안에는 오지 않는다 */
+    onMenuWidthChange?: (width: number) => void;
     /** 메뉴 landmark(nav) 의 접근성 레이블. 한 화면에 nav 가 여럿일 때 구분한다. */
     ariaLabel?: string;
 }

package/dist/components/SGnb/gnb.config.d.ts

@@ -115,6 +115,19 @@ export declare const GNB_EXPAND_MS = 200;
  * header="full" 에서 SLayout 이 "메뉴 오른쪽 = 페이지" 영역을 잡을 때도 이 값을 쓴다.
  */
 export declare const GNB_MENU_WIDTH = 240;
+/**
+ * resizable 일 때 메뉴 폭이 움직일 수 있는 범위(px). 레일 폭은 고정이고 메뉴 컬럼만 늘고 준다.
+ * 디자인이 아직 확정한 값이 아니라 임시다 — 확정되면 토큰으로 내려온다.
+ */
+export declare const GNB_MENU_MIN_WIDTH = 200;
+export declare const GNB_MENU_MAX_WIDTH = 300;
+/** 메뉴 폭 조절에서 방향키 한 번에 움직이는 양(px). Shift 를 함께 누르면 large. */
+export declare const GNB_MENU_RESIZE_KEY_STEP: {
+    normal: number;
+    large: number;
+};
+/** 메뉴 폭을 허용 범위 안으로 자른다. */
+export declare const clampGnbMenuWidth: (width: number) => number;
 /**
  * header="full" 상단바의 로고 슬롯 고정 폭(토큰 없음 → 상수).
  * 전폭 상단바에서는 로고 오른쪽에 topContent 슬롯이 이어지므로, 로고 내용이 바뀌어도

package/dist/components/SIcon/SIcon.d.ts

@@ -17,6 +17,6 @@ export interface SIconProps {
 }
 /**
  * SIcon — sd-icon 포팅.
- * 89개 SVG(icons.gen.tsx)를 currentColor 기반으로 렌더한다.
+ * 94개 SVG(icons.gen.tsx)를 currentColor 기반으로 렌더한다.
  */
 export declare const SIcon: import("react").ForwardRefExoticComponent<SIconProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/SIcon/icons.gen.d.ts

@@ -11,6 +11,7 @@ export declare const ICONS: {
     readonly arrowLeft: (p: IconRenderProps) => import("react").JSX.Element;
     readonly arrowRight: (p: IconRenderProps) => import("react").JSX.Element;
     readonly arrowUp: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly asterisk: (p: IconRenderProps) => import("react").JSX.Element;
     readonly attachFile: (p: IconRenderProps) => import("react").JSX.Element;
     readonly barcode: (p: IconRenderProps) => import("react").JSX.Element;
     readonly bell: (p: IconRenderProps) => import("react").JSX.Element;
@@ -53,10 +54,10 @@ export declare const ICONS: {
     readonly helpFill: (p: IconRenderProps) => import("react").JSX.Element;
     readonly helpOutline: (p: IconRenderProps) => import("react").JSX.Element;
     readonly history: (p: IconRenderProps) => import("react").JSX.Element;
-    readonly imageFill: (p: IconRenderProps) => import("react").JSX.Element;
-    readonly imageOutline: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly image: (p: IconRenderProps) => import("react").JSX.Element;
     readonly inline: (p: IconRenderProps) => import("react").JSX.Element;
     readonly launcher: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly leftRight: (p: IconRenderProps) => import("react").JSX.Element;
     readonly line: (p: IconRenderProps) => import("react").JSX.Element;
     readonly location: (p: IconRenderProps) => import("react").JSX.Element;
     readonly logout: (p: IconRenderProps) => import("react").JSX.Element;
@@ -77,14 +78,18 @@ export declare const ICONS: {
     readonly row: (p: IconRenderProps) => import("react").JSX.Element;
     readonly save: (p: IconRenderProps) => import("react").JSX.Element;
     readonly search: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly send: (p: IconRenderProps) => import("react").JSX.Element;
     readonly setting: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly settingOutline: (p: IconRenderProps) => import("react").JSX.Element;
     readonly shield: (p: IconRenderProps) => import("react").JSX.Element;
     readonly sidebar: (p: IconRenderProps) => import("react").JSX.Element;
-    readonly star: (p: IconRenderProps) => import("react").JSX.Element;
     readonly store: (p: IconRenderProps) => import("react").JSX.Element;
     readonly synchronize: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly thumbsDown: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly thumbsUp: (p: IconRenderProps) => import("react").JSX.Element;
     readonly updown: (p: IconRenderProps) => import("react").JSX.Element;
     readonly user: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly users: (p: IconRenderProps) => import("react").JSX.Element;
     readonly visibilityOff: (p: IconRenderProps) => import("react").JSX.Element;
     readonly visibilityOn: (p: IconRenderProps) => import("react").JSX.Element;
     readonly warehouseFill: (p: IconRenderProps) => import("react").JSX.Element;

package/dist/components/SLayout/SLayout.d.ts

@@ -26,6 +26,12 @@ export interface SLayoutNavState {
      * true 면 header prop 과 무관하게 full 로 선다.
      */
     requireFullHeader: boolean;
+    /**
+     * GNB 폭을 지금 드래그로 조절하는 중인지.
+     * 참이면 메뉴 열의 폭 전환을 끈다 — 접힘용 전환(foldMs)이 그대로 걸려 있으면
+     * 열이 손보다 그 길이만큼 늦게 따라와 끌리는 느낌이 사라진다.
+     */
+    resizing?: boolean;
 }
 export interface SLayoutContextValue {
     /** 메뉴 스타일 — 자식 SGnb 가 스타일을 맞추는 기준 */

package/dist/components/SListItem/README.md

@@ -20,6 +20,7 @@
 | `interaction?` | `SListItemInteraction` | — | hover/selected 상태에서 적용할 인터랙션 preset |
 | `accentStripe?` | `boolean` | `false` | 아이템 왼쪽 accent stripe 표시 여부 |
 | `dense?` | `boolean` | `false` | 조밀한 높이 사용 여부 |
+| `size?` | `SListItemSize` | `'sm'` | 타이포그래피 크기 |
 | `disabled?` | `boolean` | `false` | 비활성 상태 여부 |
 
 ## Dependencies

package/dist/components/SListItem/SListItem.d.ts

@@ -7,6 +7,7 @@ export type SListItemRenderProp = (state: SListItemRenderState) => ReactNode;
 export type SListItemSlot = ReactNode | SListItemRenderProp;
 export type SListItemInteraction = 'chevron';
 export type SListItemSupportingTextPosition = 'right' | 'bottom';
+export type SListItemSize = 'sm' | 'md';
 export interface SListItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> {
     /** 리스트 아이템 제목 */
     title: SListItemSlot;
@@ -32,6 +33,8 @@ export interface SListItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'ch
     accentStripe?: boolean;
     /** 조밀한 높이 사용 여부 */
     dense?: boolean;
+    /** 타이포그래피 크기 */
+    size?: SListItemSize;
     /** 비활성 상태 여부 */
     disabled?: boolean;
 }

package/dist/components/SModal/README.md

@@ -6,6 +6,8 @@
 
 호출 시마다 `document.body` 에 컨테이너를 만들어 모달을 렌더하고, 닫힘 애니메이션이 끝나면 자동으로 언마운트한다. 모든 메서드는 체이닝 핸들 [`SModalRef`](#smodalref) 를 반환한다.
 
+> **앱 부트스트랩에 [`<SModalOutlet />`](#smodaloutlet) 을 한 번 렌더한다.** 그래야 명령형 모달이 앱 렌더 트리의 자식으로 그려져 QueryClient·Router·Theme 등 Context 를 상속한다. 없으면 예전처럼 별도 React 루트로 떠서 **앱의 Provider 가 하나도 닿지 않는다.**
+
 | 메서드 | 띄우는 모달 | 용도 | 주요 콜백/제어 |
 |---|---|---|---|
 | [`SModal.confirm(options)`](#smodalconfirm) | `SConfirmModal` | 확인/취소 | `onOk` / `onCancel` / `onClose` |
@@ -20,6 +22,29 @@ import { SModal } from 'sellmate-design-system-react';
 
 ---
 
+## SModalOutlet
+
+명령형 모달이 **그려지는 자리**. 앱 부트스트랩에서 Provider 안쪽에 **한 번만** 렌더한다. props 는 없다.
+
+```tsx
+import { SModalOutlet } from 'sellmate-design-system-react';
+
+<QueryClientProvider client={queryClient}>
+  <RouterProvider router={router} />
+  <SModalOutlet />   {/* 앱 전체에 하나 */}
+</QueryClientProvider>;
+```
+
+`SModal.confirm/loading/create` 는 전역 스토어에 모달을 넣기만 하고, outlet 이 그것을 `createPortal` 로 `body` 에 그린다. **DOM 위치·쌓임 순서는 outlet 유무와 무관하게 같고**, 달라지는 것은 렌더 트리다 — outlet 이 있으면 모달이 앱 트리의 자식이 되어 Context 를 상속한다.
+
+- outlet 을 어디에 두든(Provider 안쪽이기만 하면) 모달은 `body` 로 portal 되므로 레이아웃·`overflow`·`transform` 의 영향을 받지 않는다.
+- **호출부 API 는 그대로다.** outlet 도입 전 코드를 고칠 필요가 없다.
+- outlet 이 없으면 예전처럼 별도 React 루트(`createRoot`)로 마운트되어 모달은 뜨지만 앱의 Provider 가 닿지 않는다 (개발 모드에서 1회 `console.warn`).
+- 모달 본문이 렌더 중 예외를 던지면 모달만 닫히고 앱 트리는 유지된다 — 원인을 지목하는 `console.error` 가 함께 찍힌다.
+- 모달이 떠 있는 채로 outlet 이 언마운트되면(앱 언마운트·Provider 교체) 그 모달은 정리되고 `onDismissed` 가 발화한다 — 남아서 되살아나지 않는다.
+
+---
+
 ## SModal.confirm
 
 아이콘 + 제목 + 메시지 + 확인/취소 버튼. `type` 에 따라 아이콘·메인 버튼 색이 결정된다.
@@ -121,30 +146,40 @@ SModal.create({ component: OrderModal, componentProps: { orderId: 'ORD-001' } })
 
 ### 비동기 제출 — 응답 보고 닫기
 
-SActionModal `button` 의 푸터 버튼은 클릭 시 **즉시 닫힌다**. 저장 API 응답에 따라 닫힘 여부를 정해야 하면 푸터 버튼 대신 **본문에 버튼을 두고** `modalRef` 로 닫힘 시점을 직접 제어한다.
+**하단 버튼은 본문에 직접 두지 않는다.** 주 액션은 `button`(의도적으로 단수), 보조 버튼은 `footerLeft` 슬롯에 넣는다 — 그래야 푸터 배경·여백·양끝 분리가 컴포넌트 규칙대로 잡힌다.
+
+`button` 은 클릭해도 **모달을 닫지 않는다.** `onClick` 만 발화하므로 저장 API 응답을 보고 `modalRef.ok()` 로 닫으면 된다.
 
 ```tsx
 function OrderModal({ open, onOpenChange, onClose, modalRef, orderId }: OrderModalProps) {
   const [error, setError] = useState('');
+  const [saving, setSaving] = useState(false);
   const handleSubmit = async () => {
+    setSaving(true);
     try {
       await save(orderId);
       modalRef.ok();          // 성공 → onOk + 닫기
     } catch {
       setError('저장 실패');   // 실패 → 모달 유지
+    } finally {
+      setSaving(false);
     }
   };
   return (
-    // button 을 주지 않으면 푸터가 렌더되지 않는다
-    <SActionModal open={open} onOpenChange={onOpenChange} onClose={onClose} persistent modalTitle="주문 처리">
+    // button 도 footerLeft 도 주지 않으면 푸터가 렌더되지 않는다
+    <SActionModal
+      open={open} onOpenChange={onOpenChange} onClose={onClose} persistent modalTitle="주문 처리"
+      button={{ label: saving ? '저장 중...' : '저장', disabled: saving, onClick: handleSubmit }}
+      footerLeft={<SButton color="neutral" outline size="md" label="취소" disabled={saving} onClick={() => modalRef.cancel()} />}
+    >
       {error && <p>{error}</p>}
-      <SButton label="저장" onClick={handleSubmit} />
-      <SButton label="취소" onClick={() => modalRef.cancel()} />
     </SActionModal>
   );
 }
 ```
 
+`button` 은 `label` · `color`(기본 `primary`) · `outline` · `size`(기본 `md`) · `disabled` · `onClick` 을 받는다. `footerLeft` 는 슬롯이라 `SButton` 을 직접 배치하며, 푸터 규칙상 `size="md"` 를 명시한다.
+
 ---
 
 ## SModalRef
@@ -180,7 +215,7 @@ function OrderModal({ open, onOpenChange, onClose, modalRef, orderId }: OrderMod
 
 - **선언형과 공존**: 서비스는 추가 API다. open 상태가 앱 상태/라우트에 묶인 경우엔 선언형 `<SConfirmModal open>` / `<SLoadingModal open>` 이 더 적합하다.
 - **백드롭·ESC = 중립적 닫힘**: 특정 콜백(onClose 등) 없이 `onDismissed` 만 발화한다. 명시적 버튼·메서드만 onOk/onCancel/onClose 를 발화한다.
-- **Context 미상속**: `create` 의 커스텀 컴포넌트는 새 React 트리(createRoot)에서 렌더되어 부모의 Context Provider(Theme·Store 등)를 상속하지 않는다. 필요하면 컴포넌트 내부에서 직접 Provider 로 감싸라. (confirm/loading 은 토큰이 `:root` CSS 변수라 무관)
+- **Context 는 outlet 이 있어야 상속된다**: [`<SModalOutlet />`](#smodaloutlet) 을 앱 부트스트랩에 렌더하면 `create` 의 커스텀 컴포넌트(와 `confirm/loading` 의 `contentSlot`)가 앱 트리의 자식으로 렌더되어 QueryClient·Router·Theme 등을 그대로 쓴다. outlet 이 없으면 별도 React 트리에서 렌더되어 Provider 가 닿지 않는다 — `useQuery` 는 `No QueryClient set`, `useNavigate` 는 `may be used only in the context of a <Router>` 로 죽는다. (토큰은 `:root` CSS 변수라 어느 쪽이든 무관)
 - **`create` 의 `component` 는 SActionModal 을 루트로**: `create` 는 컨테이너를 덧씌우지 않으므로, 본문만 렌더하는 컴포넌트를 넘기면 딤·카드 없이 콘텐츠가 그대로 화면에 붙는다. TypeScript 는 이를 막지 못한다(`component` 타입이 아무 컴포넌트나 허용). 개발 모드에서는 마운트 직후 렌더 결과로 이를 감지해 `console.warn` 으로 경고한다 — 세 모달은 모두 Portal 로 `body` 에 렌더되므로 `create` 가 만든 host 는 비어 있어야 하는데, host 에 엘리먼트가 남아 있으면 모달이 아닌 것으로 판정한다.
 
 ## Dependencies

package/dist/components/SModal/SModalOutlet.d.ts

@@ -0,0 +1,18 @@
+/**
+ * SModalOutlet — 명령형 모달(`SModal.confirm` / `loading` / `create`)이 그려지는 자리.
+ *
+ * **앱 부트스트랩에서 Provider 안쪽에 한 번만 렌더한다.** 이 outlet 이 있으면 명령형 모달이
+ * 앱 렌더 트리의 자식으로 그려져 QueryClient·Router·Theme 등 앱의 Context 를 그대로 상속한다.
+ * DOM 상으로는 예전과 같이 `body` 직속으로 portal 되므로 위치·쌓임 순서는 달라지지 않는다.
+ *
+ * outlet 을 렌더하지 않아도 모달은 뜨지만, 예전처럼 별도 React 루트로 마운트되어 앱의
+ * Context 가 닿지 않는다(개발 모드에서 1회 경고).
+ *
+ * @example
+ * // 앱 부트스트랩 — 한 번만. Provider 안쪽이어야 모달이 상속받는다.
+ * <QueryClientProvider client={queryClient}>
+ *   <RouterProvider router={router} />
+ *   <SModalOutlet />
+ * </QueryClientProvider>
+ */
+export declare function SModalOutlet(): import("react").JSX.Element;

package/dist/components/SModal/index.d.ts

@@ -1 +1,2 @@
 export { SModal, type SModalRef, type SConfirmOptions, type SLoadingOptions, type SCreateOptions, type SModalCreateComponentProps, } from './SModal';
+export { SModalOutlet } from './SModalOutlet';

package/dist/components/SSplitter/README.md

@@ -0,0 +1,27 @@
+# SSplitter
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SSplitter
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value?` | `number` | — | 첫 패널 크기. unit 단위. 주면 controlled |
+| `defaultValue?` | `number` | — | 첫 패널 초기 크기. uncontrolled. 기본은 '%' 면 50, 'px' 면 240 |
+| `unit?` | `SSplitterUnit` | `'%'` | 모델·limits 를 읽는 단위 |
+| `limits?` | `readonly [number, number]` | — | [최소, 최대]. 생략하면 '%' 는 [10, 90], 'px' 는 [50, Infinity] |
+| `emitImmediately?` | `boolean` | `false` | 드래그하는 동안에도 onValueChange 를 계속 보낸다 |
+| `vertical?` | `boolean` | `false` | true면 패널을 위아래로 쌓는다 (Quasar q-splitter 의 horizontal 에 해당) |
+| `disabled?` | `boolean` | `false` | true면 크기를 바꿀 수 없다. 커서도 구분선도 나오지 않는다 |
+| `dividerClassName?` | `string` | — | 구분선에 얹을 클래스 |
+| `dividerStyle?` | `CSSProperties` | — | 구분선에 얹을 인라인 스타일 |
+| `children?` | `ReactNode` | — | SSplitter.Before 와 SSplitter.After 둘 |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onValueChange` | `(value: number) => void` | 크기가 확정될 때. emitImmediately 가 아니면 드래그를 놓는 순간 한 번만 온다 |
+

package/dist/components/SSplitter/SSplitter.d.ts

@@ -0,0 +1,32 @@
+import { type CSSProperties, type HTMLAttributes, type ReactNode } from 'react';
+import { type SSplitterUnit } from './splitter.config';
+/** 패널은 순수 슬롯이다 — 크기·제약은 전부 루트가 소유한다. */
+export type SSplitterPaneProps = HTMLAttributes<HTMLDivElement>;
+export interface SSplitterProps extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue'> {
+    /** 첫 패널 크기. unit 단위. 주면 controlled */
+    value?: number;
+    /** 첫 패널 초기 크기. uncontrolled. 기본은 '%' 면 50, 'px' 면 240 */
+    defaultValue?: number;
+    /** 크기가 확정될 때. emitImmediately 가 아니면 드래그를 놓는 순간 한 번만 온다 */
+    onValueChange?: (value: number) => void;
+    /** 모델·limits 를 읽는 단위 */
+    unit?: SSplitterUnit;
+    /** [최소, 최대]. 생략하면 '%' 는 [10, 90], 'px' 는 [50, Infinity] */
+    limits?: readonly [number, number];
+    /** 드래그하는 동안에도 onValueChange 를 계속 보낸다 */
+    emitImmediately?: boolean;
+    /** true면 패널을 위아래로 쌓는다 (Quasar q-splitter 의 horizontal 에 해당) */
+    vertical?: boolean;
+    /** true면 크기를 바꿀 수 없다. 커서도 구분선도 나오지 않는다 */
+    disabled?: boolean;
+    /** 구분선에 얹을 클래스 */
+    dividerClassName?: string;
+    /** 구분선에 얹을 인라인 스타일 */
+    dividerStyle?: CSSProperties;
+    /** SSplitter.Before 와 SSplitter.After 둘 */
+    children?: ReactNode;
+}
+export declare const SSplitter: import("react").ForwardRefExoticComponent<SSplitterProps & import("react").RefAttributes<HTMLDivElement>> & {
+    Before: import("react").ForwardRefExoticComponent<SSplitterPaneProps & import("react").RefAttributes<HTMLDivElement>>;
+    After: import("react").ForwardRefExoticComponent<SSplitterPaneProps & import("react").RefAttributes<HTMLDivElement>>;
+};

package/dist/components/SSplitter/index.d.ts

@@ -0,0 +1,2 @@
+export { SSplitter, type SSplitterPaneProps, type SSplitterProps } from './SSplitter';
+export { SSPLITTER_UNITS, type SSplitterUnit } from './splitter.config';

package/dist/components/SSplitter/splitter.config.d.ts

@@ -0,0 +1,15 @@
+export declare const SSPLITTER_UNITS: readonly ["%", "px"];
+/** 모델·limits 를 읽는 단위. Quasar QSplitter 의 `unit` 과 같다. */
+export type SSplitterUnit = (typeof SSPLITTER_UNITS)[number];
+/** limits 를 주지 않았을 때의 기본 범위. Quasar 와 같은 값이다. */
+export declare const SSPLITTER_DEFAULT_LIMITS: Record<SSplitterUnit, readonly [number, number]>;
+/** value·defaultValue 를 주지 않았을 때의 시작값. */
+export declare const SSPLITTER_DEFAULT_VALUE: Record<SSplitterUnit, number>;
+/**
+ * 방향키 한 번에 움직이는 양. 단위가 다르면 체감도 달라야 하므로 단위별로 둔다.
+ * 두께·색과 달리 대응 토큰이 없어 상수다(SLAYOUT_MIN_WIDTH 와 같은 이유).
+ */
+export declare const SSPLITTER_KEY_STEP: Record<SSplitterUnit, {
+    normal: number;
+    large: number;
+}>;

package/dist/components/STooltip/README.md

@@ -47,6 +47,7 @@
  - [SField](../SField)
  - [SKeyValueTable](../SKeyValueTable)
  - [SSectionHeaderCard](../SSectionHeaderCard)
+ - [SStepper](../SStepper)
 
 ### Depends on
 
@@ -62,5 +63,6 @@ graph TD;
   SField --> STooltip
   SKeyValueTable --> STooltip
   SSectionHeaderCard --> STooltip
+  SStepper --> STooltip
   style STooltip fill:#f9f,stroke:#333,stroke-width:4px
 ```