sellmate-design-system-react 9.0.0-beta.8 → 9.0.0-beta.80

package/dist/components/SCallout/README.md

@@ -8,12 +8,28 @@
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `type?` | `SCalloutType` | `'default'` | 콜아웃 타입 (색상·아이콘·타이틀 결정) |
+| `type?` | `SCalloutType` | `'default'` | 콜아웃 타입 (색상·아이콘·타이틀 결정). - `default` — 옅은 회색 면. 흰 페이지(`background="frame"`) 위의 기본 안내. - `white` — 같은 안내인데 배경만 흰 면. 회색 면(`neutral`·`screen`) 위에서 default 가 묻힐 때. - `danger` — 좌측에 주의사항 타이틀이 붙는 경고. |
+| `showTitle?` | `boolean` | `true` | `danger` 좌측의 주의사항 타이틀(아이콘+라벨) 표시 여부. 기본 `true`. `false` 면 타이틀만 빠지고 danger 의 면·테두리·본문색은 그대로다. 다른 타입에는 영향이 없다. |
 | `message?` | `SCalloutMessage[]` | `[]` | 표시할 메시지 목록 (배열 중첩으로 depth 표현). 각 문자열은 인라인 HTML(`<b>`, `<a>` 등)을 허용하며 sanitizeInlineHtml 로 살균 후 렌더된다. |
 | `children?` | `ReactNode` | — | message 대신 직접 본문을 넣을 때 |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
 
+## Types
+
+### SCalloutType
+
+```ts
+export type SCalloutType = 'default' | 'danger' | 'white';
+```
+
+### SCalloutMessage
+
+```ts
+/** 중첩 메시지: 문자열 또는 (한 단계 더 들어간) 문자열 배열 */
+export type SCalloutMessage = string | SCalloutMessage[];
+```
+
 ## Dependencies
 
 ### Depends on

package/dist/components/SCallout/SCallout.d.ts

@@ -1,10 +1,20 @@
 import { type CSSProperties, type ReactNode } from 'react';
-export type SCalloutType = 'default' | 'danger';
+export type SCalloutType = 'default' | 'danger' | 'white';
 /** 중첩 메시지: 문자열 또는 (한 단계 더 들어간) 문자열 배열 */
 export type SCalloutMessage = string | SCalloutMessage[];
 export interface SCalloutProps {
-    /** 콜아웃 타입 (색상·아이콘·타이틀 결정) */
+    /**
+     * 콜아웃 타입 (색상·아이콘·타이틀 결정).
+     * - `default` — 옅은 회색 면. 흰 페이지(`background="frame"`) 위의 기본 안내.
+     * - `white` — 같은 안내인데 배경만 흰 면. 회색 면(`neutral`·`screen`) 위에서 default 가 묻힐 때.
+     * - `danger` — 좌측에 주의사항 타이틀이 붙는 경고.
+     */
     type?: SCalloutType;
+    /**
+     * `danger` 좌측의 주의사항 타이틀(아이콘+라벨) 표시 여부. 기본 `true`.
+     * `false` 면 타이틀만 빠지고 danger 의 면·테두리·본문색은 그대로다. 다른 타입에는 영향이 없다.
+     */
+    showTitle?: boolean;
     /**
      * 표시할 메시지 목록 (배열 중첩으로 depth 표현).
      * 각 문자열은 인라인 HTML(`<b>`, `<a>` 등)을 허용하며 sanitizeInlineHtml 로 살균 후 렌더된다.
@@ -17,8 +27,8 @@ export interface SCalloutProps {
 }
 /**
  * SCallout — sd-callout 포팅.
- * default/danger 타입, 중첩 리스트(불릿은 span으로 렌더), danger는 좌측 타이틀 표시.
- * 색상은 `--cmp-callout-*` 토큰 참조.
+ * default/white/danger 타입, 중첩 리스트(불릿은 span으로 렌더), danger는 좌측 타이틀 표시(showTitle 로 끌 수 있다).
+ * 색상은 `--cmp-callout-*` 토큰 참조(white 만 예외 — SURFACE 주석 참고).
  * message 각 항목은 sanitizeInlineHtml 로 살균한 뒤 innerHTML 로 렌더한다 (원본 sd-callout 과 동일).
  */
 export declare const SCallout: import("react").ForwardRefExoticComponent<SCalloutProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/SCard/README.md

@@ -9,4 +9,21 @@
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `bordered?` | `boolean` | `false` | 테두리 표시 여부 |
+| `footerLeft?` | `ReactNode` | — | 하단 액션 영역 좌측 슬롯. 보조 버튼(취소·목록 등)이 오는 자리다. `footerLeft` 또는 `button` 중 하나라도 있으면 하단 액션 영역이 렌더된다. |
+| `button?` | `SFooterButton` | — | 하단 액션 영역 우측 주 액션 버튼 |
+| `footerSize?` | `SFooterSize` | `'md'` | 하단 액션 영역 크기. 기본은 `md`. 한 화면 안에서 **부분만 확정하는 카드**(옆 패널·분할 영역처럼 화면의 일부를 맡는 카드)일 때만 `sm`. 카드가 화면의 주 액션을 쥐고 있으면 모달·페이지와 같은 `md` 다 (AGENTS.md §3-5-2). `footerLeft` 슬롯의 버튼도 같이 맞춘다 — `sm` 이면 슬롯 버튼도 `size="sm"`. |
+| `footerClassName?` | `string` | — | 하단 액션 영역 클래스 |
 
+## Dependencies
+
+### Depends on
+
+- [SFooter](../SFooter)
+
+### Graph
+
+```mermaid
+graph TD;
+  SCard --> SFooter
+  style SCard fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SCard/SCard.d.ts

@@ -1,7 +1,31 @@
-import { type HTMLAttributes } from 'react';
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type SFooterButton, type SFooterSize } from '../SFooter';
 export interface SCardProps extends HTMLAttributes<HTMLDivElement> {
     /** 테두리 표시 여부 */
     bordered?: boolean;
+    /**
+     * 하단 액션 영역 좌측 슬롯. 보조 버튼(취소·목록 등)이 오는 자리다.
+     * `footerLeft` 또는 `button` 중 하나라도 있으면 하단 액션 영역이 렌더된다.
+     */
+    footerLeft?: ReactNode;
+    /** 하단 액션 영역 우측 주 액션 버튼 */
+    button?: SFooterButton;
+    /**
+     * 하단 액션 영역 크기. 기본은 `md`.
+     *
+     * 한 화면 안에서 **부분만 확정하는 카드**(옆 패널·분할 영역처럼 화면의 일부를 맡는 카드)일 때만
+     * `sm`. 카드가 화면의 주 액션을 쥐고 있으면 모달·페이지와 같은 `md` 다 (AGENTS.md §3-5-2).
+     *
+     * `footerLeft` 슬롯의 버튼도 같이 맞춘다 — `sm` 이면 슬롯 버튼도 `size="sm"`.
+     */
+    footerSize?: SFooterSize;
+    /** 하단 액션 영역 클래스 */
+    footerClassName?: string;
 }
-/** SCard — sd-card 포팅. 라운드 8px, 흰 배경, 옵션 테두리. */
+/**
+ * SCard — sd-card 포팅. 라운드 8px, 흰 배경, 옵션 테두리. 콘텐츠는 라운드 경계에서 잘린다.
+ *
+ * 하단 액션은 `children` 에 직접 두지 않고 `footerLeft`·`button` 으로 넘긴다 — 배경·구분선·여백과
+ * 양끝 분리가 컴포넌트 규칙대로 잡히는 자리다.
+ */
 export declare const SCard: import("react").ForwardRefExoticComponent<SCardProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/SChatAttachedFile/README.md

@@ -0,0 +1,33 @@
+# SChatAttachedFile
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SChatAttachedFile
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `name` | `string` | — | 파일명. 칸을 넘치면 말줄임된다 — 칸의 폭은 부모가 정한다. |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onRemove` | `() => void` | 제거 버튼을 눌렀을 때. 주지 않으면 버튼이 서지 않는다. 입력창 위의 첨부는 보내기 전까지 뺄 수 있어야 하므로 대개 준다 — 버튼을 세우지 않는 것은 보내는 중처럼 무를 수 없는 짧은 순간뿐이다. |
+
+## Dependencies
+
+### Depends on
+
+- [SGhostButton](../SGhostButton)
+- [SIcon](../SIcon)
+
+### Graph
+
+```mermaid
+graph TD;
+  SChatAttachedFile --> SGhostButton
+  SChatAttachedFile --> SIcon
+  style SChatAttachedFile fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SChatAttachedFile/SChatAttachedFile.d.ts

@@ -0,0 +1,13 @@
+import { type HTMLAttributes } from 'react';
+export interface SChatAttachedFileProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** 파일명. 칸을 넘치면 말줄임된다 — 칸의 폭은 부모가 정한다. */
+    name: string;
+    /**
+     * 제거 버튼을 눌렀을 때. 주지 않으면 버튼이 서지 않는다.
+     *
+     * 입력창 위의 첨부는 보내기 전까지 뺄 수 있어야 하므로 대개 준다 —
+     * 버튼을 세우지 않는 것은 보내는 중처럼 무를 수 없는 짧은 순간뿐이다.
+     */
+    onRemove?: () => void;
+}
+export declare const SChatAttachedFile: import("react").ForwardRefExoticComponent<SChatAttachedFileProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/SChatAttachedFile/chatAttachedFile.config.d.ts

@@ -0,0 +1,23 @@
+/**
+ * 보내기 전 첨부 칸이 쓰는 값. `component.chatAttachedFile` 토큰 한 세트가 여백·면·선·칩을
+ * 모두 쥔다.
+ *
+ * 높이는 고정하지 않고 세로 패딩(`paddingY`)과 내용이 정한다 — 예전에 스케일에 안 떨어져
+ * 값으로 두던 높이(30)·타일(20)은 `paddingY` + `icon.wrapper.padding` + 아이콘 크기로 따라온다.
+ */
+export declare const CHAT_ATTACHED_FILE_CONFIG: {
+    /** 바깥 상자 — 좌우·상하 여백·면·선·라운드 */
+    readonly box: "px-(--cmp-chatAttachedFile-paddingX) py-(--cmp-chatAttachedFile-paddingY) rounded-(--cmp-chatAttachedFile-radius) border-(length:--cmp-chatAttachedFile-border-width) border-(--cmp-chatAttachedFile-border-color) bg-(--cmp-chatAttachedFile-bg)";
+    /** 콘텐츠 묶음 ↔ 제거 버튼 간격 */
+    readonly outerGap: "gap-(--cmp-chatAttachedFile-gap)";
+    /** 아이콘 칩 ↔ 파일명 간격 */
+    readonly contentGap: "gap-(--cmp-chatAttachedFile-content-gap)";
+    /** 클립 아이콘이 앉는 칩 — 내부 패딩·면·라운드 (높이는 아이콘+패딩이 정한다) */
+    readonly tile: "p-(--cmp-chatAttachedFile-icon-wrapper-padding) rounded-(--cmp-chatAttachedFile-icon-wrapper-radius) bg-(--cmp-chatAttachedFile-icon-wrapper-bg)";
+    /** 칩 안 클립 아이콘 크기(px). SVG width/height 는 속성값이라 CSS 변수를 못 받아 값으로 둔다 (토큰 값과 동일) */
+    readonly iconSize: 16;
+    /** 파일명 타이포 프리셋 */
+    readonly nameTypo: "typo-body-sm-default";
+    /** 파일명 텍스트색 */
+    readonly textColor: "text-(--cmp-chatAttachedFile-filename-color)";
+};

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

@@ -0,0 +1,2 @@
+export { SChatAttachedFile, type SChatAttachedFileProps } from './SChatAttachedFile';
+export { CHAT_ATTACHED_FILE_CONFIG } from './chatAttachedFile.config';

package/dist/components/SChatFile/README.md

@@ -0,0 +1,33 @@
+# SChatFile
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SChatFile
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `name` | `string` | — | 파일명. 칸을 넘치면 말줄임된다 — 칸의 폭은 부모가 정한다. |
+| `extension?` | `string` | — | 보조 줄에 쓸 형식. 주지 않으면 **파일명의 마지막 점 뒤**를 쓴다. 파일명에서 뽑는 것이 틀리는 자리에서만 준다 — 확장자가 없거나(`README`), 확장자처럼 안 생겼거나(`backup.2026` → `2026`), 두 마디인 경우(`archive.tar.gz` → `gz`). 그 밖에는 주지 않는 편이 낫다. 파일명과 어긋난 형식이 적히는 일을 막는다. 앞의 점과 대소문자는 알아서 정리한다 — `'.CSV'` 와 `'csv'` 가 같게 나온다. |
+| `size` | `number` | — | 파일 크기(바이트). 형식(`extension`)과 묶어 `csv / 9.4KB` 로 그린다. **바이트 수를 그대로 넘긴다** — `'9.4KB'` 같은 완성된 문자열이 아니다. 표기를 앱이 만들면 같은 파일이 화면마다 다른 크기로 읽히므로 서식은 디자인 시스템이 쥔다. 서버가 준 바이트 수를 그대로 넘기면 된다. **필수다** — 보낸 파일은 확장자와 크기를 반드시 밝힌다. 선택으로 두면 빠뜨려도 타입이 통과하고 화면에서 보조 줄만 조용히 사라진다. |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onFileClick` | `() => void` | 칸을 눌렀을 때 — 파일을 여는 자리다. **필수다** — 보낸 파일은 언제나 열 수 있다. 선택으로 두면 빠뜨려도 타입이 통과하고, 커서·hover 면까지 갖춘 칸이 눌러도 아무 일이 없는 화면이 조용히 나간다. 루트가 `div` 라 `role="button"`·`tabIndex`·Enter/Space 를 DS 가 함께 붙인다 — 앱이 `onClick` 만 직접 달면 키보드로 닿지 않는 칸이 되므로 그 대신 이걸 쓴다. |
+
+## Dependencies
+
+### Depends on
+
+- [SIcon](../SIcon)
+
+### Graph
+
+```mermaid
+graph TD;
+  SChatFile --> SIcon
+  style SChatFile fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SChatFile/SChatFile.d.ts

@@ -0,0 +1,37 @@
+import { type HTMLAttributes } from 'react';
+export interface SChatFileProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** 파일명. 칸을 넘치면 말줄임된다 — 칸의 폭은 부모가 정한다. */
+    name: string;
+    /**
+     * 보조 줄에 쓸 형식. 주지 않으면 **파일명의 마지막 점 뒤**를 쓴다.
+     *
+     * 파일명에서 뽑는 것이 틀리는 자리에서만 준다 — 확장자가 없거나(`README`),
+     * 확장자처럼 안 생겼거나(`backup.2026` → `2026`), 두 마디인 경우(`archive.tar.gz` → `gz`).
+     * 그 밖에는 주지 않는 편이 낫다. 파일명과 어긋난 형식이 적히는 일을 막는다.
+     *
+     * 앞의 점과 대소문자는 알아서 정리한다 — `'.CSV'` 와 `'csv'` 가 같게 나온다.
+     */
+    extension?: string;
+    /**
+     * 파일 크기(바이트). 형식(`extension`)과 묶어 `csv / 9.4KB` 로 그린다.
+     *
+     * **바이트 수를 그대로 넘긴다** — `'9.4KB'` 같은 완성된 문자열이 아니다. 표기를 앱이 만들면
+     * 같은 파일이 화면마다 다른 크기로 읽히므로 서식은 디자인 시스템이 쥔다. 서버가 준 바이트 수를
+     * 그대로 넘기면 된다.
+     *
+     * **필수다** — 보낸 파일은 확장자와 크기를 반드시 밝힌다. 선택으로 두면 빠뜨려도 타입이
+     * 통과하고 화면에서 보조 줄만 조용히 사라진다.
+     */
+    size: number;
+    /**
+     * 칸을 눌렀을 때 — 파일을 여는 자리다.
+     *
+     * **필수다** — 보낸 파일은 언제나 열 수 있다. 선택으로 두면 빠뜨려도 타입이 통과하고,
+     * 커서·hover 면까지 갖춘 칸이 눌러도 아무 일이 없는 화면이 조용히 나간다.
+     *
+     * 루트가 `div` 라 `role="button"`·`tabIndex`·Enter/Space 를 DS 가 함께 붙인다 — 앱이
+     * `onClick` 만 직접 달면 키보드로 닿지 않는 칸이 되므로 그 대신 이걸 쓴다.
+     */
+    onFileClick: () => void;
+}
+export declare const SChatFile: import("react").ForwardRefExoticComponent<SChatFileProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/SChatFile/chatFile.config.d.ts

@@ -0,0 +1,56 @@
+/**
+ * 보낸 파일 칸이 쓰는 값. `component.chatFile` 토큰 한 세트가 여백·면·선·칩을 모두 쥔다.
+ *
+ * 높이는 고정하지 않고 세로 패딩(`paddingY`)과 내용이 정한다 — 예전에 스케일에 안 떨어져
+ * 값으로 두던 높이(56)·타일(28)은 `paddingY` + `icon.wrapper.padding` + 아이콘 크기로 따라온다.
+ */
+export declare const CHAT_FILE_CONFIG: {
+    /** 바깥 상자 — 좌우 비대칭 여백·상하 여백·면·선·라운드 */
+    readonly box: "pl-(--cmp-chatFile-paddingLeft) pr-(--cmp-chatFile-paddingRight) py-(--cmp-chatFile-paddingY) rounded-(--cmp-chatFile-radius) border-(length:--cmp-chatFile-border-width) border-(--cmp-chatFile-border-color) bg-(--cmp-chatFile-bg-default)";
+    /** 아이콘 칩 ↔ 파일명 간격 */
+    readonly contentGap: "gap-(--cmp-chatFile-gap)";
+    /**
+     * 클립 아이콘이 앉는 칩 — 내부 패딩·면·라운드 (높이는 아이콘+패딩이 정한다).
+     *
+     * hover 면은 상자가 아니라 여기에도 걸린다 — 카드가 어두워질 때 칩은 반대로 밝아져
+     * 칩이 배경에 묻히지 않는다. 상자의 hover 를 따라가야 하므로 group-hover 로 받는다.
+     *
+     * **`--sys-color-bg-frame` 은 임시다.** 시안의 hover 칩 색(`#FFFFFF`)에 대응하는
+     * 컴포넌트 토큰이 없다 — `component.chatMessage.chatFile.icon.wrapper.bg` 는 값이 하나뿐이라
+     * hover 를 담지 못한다. 상자의 `bg.default` 가 참조하는 것과 같은 시스템 토큰으로 대신 걸어 둔다.
+     * 디자인팀에 `icon.wrapper.bg.hover` 를 요청해 나오는 대로 갈아끼운다.
+     */
+    readonly tile: "p-(--cmp-chatFile-icon-wrapper-padding) rounded-(--cmp-chatFile-icon-wrapper-radius) bg-(--cmp-chatFile-icon-wrapper-bg) group-hover/chat-file:bg-(--sys-color-bg-frame)";
+    /** 칩 안 클립 아이콘 크기(px). SVG width/height 는 속성값이라 CSS 변수를 못 받아 값으로 둔다 (토큰 값과 동일) */
+    readonly iconSize: 20;
+    /** 파일명 타이포 프리셋 */
+    readonly nameTypo: "typo-body-md-bold";
+    /** 파일명·부가정보 텍스트색 */
+    readonly textColor: "text-(--cmp-chatFile-text-color)";
+    /**
+     * 눌리는 모양 — 커서·hover 면·포커스 링. 보낸 파일은 언제나 열 수 있으므로 늘 붙는다
+     * (`onFileClick` 이 필수다).
+     *
+     * 상자의 여백·면·선과 따로 두는 이유: 이건 상호작용을 드러내는 값이라 성격이 다르다.
+     * 링은 `SExpansionItem`·`SStepper` 와 같은 accent outline.
+     */
+    readonly interactive: "cursor-pointer hover:bg-(--cmp-chatFile-bg-hover) focus-visible:outline focus-visible:outline-2 focus-visible:outline-(--sys-color-border-accent)";
+};
+/**
+ * 바이트 수 → `9.4KB` 표기.
+ *
+ * **표기를 앱이 아니라 여기서 정하는 이유**: 문자열로 받으면 제품마다 `9.4KB`·`9.4 KB`·
+ * `9,626B` 로 갈린다. 같은 파일이 화면마다 다른 크기로 읽히는 것을 막으려면 한 곳에서 만든다.
+ *
+ * 1024 배수로 올리고, 바이트는 소수점이 뜻이 없어 정수로, 그 위는 한 자리까지 쓴다(시안 표기).
+ * 금액·수량의 세 자리 콤마 규칙(AGENTS.md §1-4)과는 별개다 — 용량은 단위가 자리를 대신한다.
+ */
+export declare function formatFileSize(bytes: number): string;
+/** 앱이 준 확장자를 표기 형태로 맞춘다 — 앞의 점을 떼고 소문자로. `'.CSV'` → `'csv'` */
+export declare function normalizeExtension(extension: string): string;
+/**
+ * 파일명 → 소문자 확장자. 확장자가 없으면 빈 문자열.
+ *
+ * 맨 앞의 점은 확장자가 아니다(`.gitignore` 는 이름 전체가 이름이다).
+ */
+export declare function fileExtension(name: string): string;

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

@@ -0,0 +1,2 @@
+export { SChatFile, type SChatFileProps } from './SChatFile';
+export { CHAT_FILE_CONFIG, formatFileSize, fileExtension, normalizeExtension, } from './chatFile.config';

package/dist/components/SChatInput/README.md

@@ -0,0 +1,44 @@
+# SChatInput
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SChatInput
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value?` | `string` | `''` | 입력값 (제어) |
+| `placeholder?` | `string` | `DEFAULT_PLACEHOLDER` | 안내 문구. 세 제품이 같은 말로 서도록 기본값을 쥐고 있다 |
+| `disabled?` | `boolean` | `false` | 비활성 |
+| `busy?` | `boolean` | `false` | 응답을 기다리는 중인지. 켜면 전송 버튼 자리에 정지 버튼이 서고 Enter 전송이 잠긴다 — 답이 오는 동안 또 보내지 못하게 막는 자리다. |
+| `footerAction?` | `ReactNode` | — | 입력창 아래 보조 액션 슬롯. 없으면 그 줄이 통째로 빠진다. 상담 종료처럼 **대화 자체를 끝내는, 전송과 층이 다른 동작**이 오는 자리다. 무엇을 놓을지는 앱이 정하고, 입력창은 가운데에 세우는 것까지만 한다 — `STextLink` 를 넣는 것이 보통이다. |
+| `maxRows?` | `number` | `DEFAULT_MAX_ROWS` | 입력창이 자랄 수 있는 최대 줄 수. 여기 닿으면 더 자라지 않고 그 안에서 스크롤한다. |
+| `className?` | `string` | — | 바깥 컨테이너 className (안쪽 textarea 가 아니다) |
+| `style?` | `CSSProperties` | — | 바깥 컨테이너 style |
+| `textareaClassName?` | `string` | — | 안쪽 textarea className |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onValueChange` | `(value: string) => void` | 값 변경 |
+| `onSend` | `(value: string) => void` | 전송. 전송 버튼을 누르거나 Enter 를 쳤을 때 현재 값을 넘긴다. **값이 비면 전송 버튼이 잠긴다** — 빈 메시지는 보낼 수 없다. |
+| `onAttach` | `() => void` | 파일 첨부. **주면 입력창 왼쪽에 첨부 버튼이 선다** |
+| `onStop` | `() => void` | 정지. `busy` 일 때 정지 버튼을 누르면 불린다 |
+
+## Dependencies
+
+### Depends on
+
+- [SGhostButton](../SGhostButton)
+- [STextarea](../STextarea)
+
+### Graph
+
+```mermaid
+graph TD;
+  SChatInput --> SGhostButton
+  SChatInput --> STextarea
+  style SChatInput fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SChatInput/SChatInput.d.ts

@@ -0,0 +1,60 @@
+import { type CSSProperties, type ReactNode, type TextareaHTMLAttributes } from 'react';
+/**
+ * 안쪽 textarea 로 그대로 흘러가는 네이티브 속성 — `SInput`·`STextarea` 와 같은 방식이다.
+ * 컴포넌트가 직접 다루는 것만 뺀다.
+ */
+export interface SChatInputProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onChange' | 'placeholder' | 'disabled' | 'rows' | 'className' | 'style'> {
+    /** 입력값 (제어) */
+    value?: string;
+    /** 값 변경 */
+    onValueChange?: (value: string) => void;
+    /** 안내 문구. 세 제품이 같은 말로 서도록 기본값을 쥐고 있다 */
+    placeholder?: string;
+    /** 비활성 */
+    disabled?: boolean;
+    /**
+     * 전송. 전송 버튼을 누르거나 Enter 를 쳤을 때 현재 값을 넘긴다.
+     *
+     * **값이 비면 전송 버튼이 잠긴다** — 빈 메시지는 보낼 수 없다.
+     */
+    onSend?: (value: string) => void;
+    /** 파일 첨부. **주면 입력창 왼쪽에 첨부 버튼이 선다** */
+    onAttach?: () => void;
+    /**
+     * 응답을 기다리는 중인지. 켜면 전송 버튼 자리에 정지 버튼이 서고 Enter 전송이 잠긴다 —
+     * 답이 오는 동안 또 보내지 못하게 막는 자리다.
+     */
+    busy?: boolean;
+    /** 정지. `busy` 일 때 정지 버튼을 누르면 불린다 */
+    onStop?: () => void;
+    /**
+     * 입력창 아래 보조 액션 슬롯. 없으면 그 줄이 통째로 빠진다.
+     *
+     * 상담 종료처럼 **대화 자체를 끝내는, 전송과 층이 다른 동작**이 오는 자리다. 무엇을 놓을지는
+     * 앱이 정하고, 입력창은 가운데에 세우는 것까지만 한다 — `STextLink` 를 넣는 것이 보통이다.
+     */
+    footerAction?: ReactNode;
+    /**
+     * 입력창이 자랄 수 있는 최대 줄 수. 여기 닿으면 더 자라지 않고 그 안에서 스크롤한다.
+     */
+    maxRows?: number;
+    /** 바깥 컨테이너 className (안쪽 textarea 가 아니다) */
+    className?: string;
+    /** 바깥 컨테이너 style */
+    style?: CSSProperties;
+    /** 안쪽 textarea className */
+    textareaClassName?: string;
+}
+/**
+ * SChatInput — 대화 화면 맨 아래에 서는 입력창.
+ *
+ * 첨부·입력·전송을 한 줄로 세우고, 필요하면 그 아래 보조 액션(상담 종료 등)을 붙인다.
+ * Enter 로 보내고 Shift+Enter 로 줄을 바꾼다 — 한글 조합 중의 Enter 는 보내지 않는다.
+ *
+ * **글이 길어지면 입력창이 자란다** — `maxRows` 줄까지 늘어나고, 거기 닿으면 그 안에서
+ * 스크롤한다. 상한이 없으면 대화가 화면 밖으로 밀려난다.
+ *
+ * **응답을 기다리는 동안에는 `busy` 를 켠다** — 전송 버튼이 정지 버튼으로 바뀌고 Enter 전송이
+ * 잠겨, 답이 오는 중에 또 보내는 일이 막힌다.
+ */
+export declare const SChatInput: import("react").ForwardRefExoticComponent<SChatInputProps & import("react").RefAttributes<HTMLTextAreaElement>>;

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

@@ -0,0 +1 @@
+export { SChatInput, type SChatInputProps } from './SChatInput';

package/dist/components/SChatMessage/README.md

@@ -0,0 +1,86 @@
+# SChatMessage
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SChatMessage
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `direction` | `SChatMessageDirection` | `'incoming'` | 받은 메시지(왼쪽)인지 보낸 메시지(오른쪽)인지. **아바타와 이름 유무도 여기서 갈린다** — 받은 메시지에만 아바타와 `sender` 가 선다. 보낸 메시지는 내가 보냈다는 것이 자리로 이미 드러나 얼굴도 이름도 필요 없다. |
+| `sender?` | `ReactNode` | — | 말풍선 위에 붙는 보낸 사람 이름. 없으면 자리째 빠진다. **받은 메시지에만 쓰인다** — 보낸 메시지에는 넘겨도 그리지 않는다(`direction` 참고). 앱이 데이터를 한 번만 매핑해 방향과 무관하게 넘길 수 있도록 막지 않고 무시한다. |
+| `time?` | `ReactNode` | — | 말풍선 아래에 붙는 시각. 표기는 앱이 정해 문자열로 넘긴다 — 대화 화면의 시각은 `오후 5:52` 처럼 읽는 표기를 쓰므로 카드가 서식을 강제하지 않는다 (AGENTS.md §1-4 예외). |
+| `readStatus?` | `SChatMessageReadStatus` | — | 상대가 읽었는지. 시각 왼쪽에 `읽음`·`안 읽음` 으로 붙고, 주지 않으면 표시하지 않는다. **내가 보낸 메시지에만 붙인다** — 받은 메시지에 읽음 표시를 다는 것은 뜻이 없다. |
+| `avatarSrc?` | `string` | — | 아바타 이미지 경로. 없으면 사람 아이콘 자리표시가 선다. **받은 메시지에만 쓰인다** — 보낸 메시지에는 아바타가 서지 않는다(`direction` 참고). |
+| `avatarAlt?` | `string` | — | 아바타 대체 텍스트 |
+| `continued?` | `boolean` | `false` | 같은 사람이 이어서 말한 묶음인지. 켜면 **아바타와 `sender` 를 그리지 않는다** — 말풍선이 위 묶음과 같은 선에서 시작해 한 사람의 말로 이어 읽힌다. 받은 메시지에서는 아바타 자리를 비워 둔 채 남긴다 — 안 남기면 말풍선이 44px 왼쪽으로 밀려 위 묶음과 어긋난다. 보낸 메시지는 아바타가 없으므로 이름만 숨긴다. `time`·`readStatus` 는 그대로 나온다. 시간이 벌어져 묶음을 나눴어도 얼굴은 한 번만 보이면 되고 시각은 묶음마다 필요하기 때문이다. **얼마나 벌어져야 묶음을 나눌지는 앱이 정한다** — 30분이든 하루든 대화의 성격에 달렸으므로 컴포넌트는 기준을 갖지 않고 스위치만 연다. |
+| `variant?` | `SChatMessageVariant` | `'default'` | 말풍선 종류. `template` 은 미리 등록된 서식으로, `admin` 은 관리자·시스템이 보낸 메시지임을 각각 다른 면으로 드러낸다. 면 색은 토큰이 정하므로 여기서 색을 정하지 않는다. **보낸 메시지(`direction="outgoing"`)에만 쓰인다** — 받은 메시지에는 넘겨도 그리지 않는다. 셋 다 사업자 쪽이 보내는 것이라 받은 쪽에는 뜻이 없다. 앱이 메시지를 한 번만 매핑해 방향과 무관하게 넘길 수 있도록 막지 않고 무시한다. |
+| `actions?` | `ReactNode` | — | 시각 아래에 붙는 동작 슬롯. 없으면 그 줄이 통째로 빠진다. 「상담원 연결」처럼 **이 메시지에 이어서 할 수 있는 동작**이 오는 자리다. 무엇을 놓을지는 앱이 정하고, 메시지는 줄로 세우고 방향에 맞춰 정렬하는 것까지만 한다. 시각과 같은 선에서 시작한다 — 말풍선 끝에서 한 칸 안이다. |
+| `messages?` | `ReactNode[]` | — | 말풍선 목록. **한 항목이 말풍선 하나**가 되어 위에서 아래로 쌓인다. 한 사람이 연달아 말하면 아바타·이름·시각은 한 번만 서고 말풍선만 늘어난다 — 그 묶음이 이 컴포넌트 한 개다. 말풍선 안에는 글뿐 아니라 버튼 같은 요소도 올 수 있다. |
+| `attachments?` | `ReactNode[]` | — | 말풍선 아래에 붙는 파일 목록. **한 항목이 칸 하나**가 되어 위에서 아래로 쌓인다. `SChatFile` 을 넣는 자리다 — 말풍선과 달리 면으로 감싸지 않고 넘긴 것을 그대로 세운다. 파일 칸은 제 면·선·라운드를 이미 갖고 있어 한 번 더 감싸면 칸이 두 겹으로 보인다. **`messages` 대신 여기로 넘긴다.** `messages` 로 넘기면 말풍선 면에 감싸여 그렇게 된다. 아바타·이름·시각·읽음 표시는 글 메시지와 똑같이 이 컴포넌트가 그린다 — 파일을 보낸 것도 대화의 한 줄이므로 행 규칙을 따로 갖지 않는다. |
+
+## Types
+
+### SChatMessageDirection
+
+```ts
+export type SChatMessageDirection = (typeof CHAT_MESSAGE_DIRECTIONS)[number];
+```
+
+### SChatMessageReadStatus
+
+```ts
+export type SChatMessageReadStatus = (typeof CHAT_MESSAGE_READ_STATUSES)[number];
+```
+
+### SChatMessageVariant
+
+```ts
+export type SChatMessageVariant = (typeof CHAT_MESSAGE_VARIANTS)[number];
+```
+
+### CHAT_MESSAGE_DIRECTIONS
+
+```ts
+/** 메시지가 오는 쪽 — 받은 메시지(incoming)는 왼쪽, 보낸 메시지(outgoing)는 오른쪽에 선다. */
+export const CHAT_MESSAGE_DIRECTIONS = ['incoming', 'outgoing'] as const;
+```
+
+### CHAT_MESSAGE_READ_STATUSES
+
+```ts
+/** 상대가 내 메시지를 읽었는지. 시각 왼쪽에 붙는다. */
+export const CHAT_MESSAGE_READ_STATUSES = ['read', 'unread'] as const;
+```
+
+### CHAT_MESSAGE_VARIANTS
+
+```ts
+/**
+ * 말풍선의 종류.
+ * - `default` 사람이 직접 쓴 메시지
+ * - `template` 미리 등록된 서식으로 보내진 메시지
+ * - `admin` 관리자·시스템이 보낸 메시지
+ *
+ * **보낸 메시지에서만 면이 갈린다.** 셋 다 사업자 쪽이 보내는 것이라 받은 메시지에는
+ * 뜻이 없고, 받은 메시지는 무엇으로 보냈든 같은 면으로 선다.
+ */
+export const CHAT_MESSAGE_VARIANTS = ['default', 'template', 'admin'] as const;
+```
+
+## Dependencies
+
+### Depends on
+
+- [SIcon](../SIcon)
+- [SImage](../SImage)
+
+### Graph
+
+```mermaid
+graph TD;
+  SChatMessage --> SIcon
+  SChatMessage --> SImage
+  style SChatMessage fill:#f9f,stroke:#333,stroke-width:4px
+```