sellmate-design-system-react 9.0.0-beta.7 → 9.0.0-beta.70

package/dist/components/SDraggableList/README.md

@@ -25,9 +25,13 @@
 | `items` | `T[]` | — | 현재 순서대로 렌더링할 아이템 목록 |
 | `getKey` | `(item: T, index: number) => string` | — | 아이템을 식별할 안정적인 key |
 | `renderItem` | `(item: T, index: number, state: SDraggableListRenderState) => ReactNode` | — | 아이템 렌더링 함수 |
-| `selectedKey?` | `string` | — | 외부에서 제어하는 selected 아이템 key |
-| `defaultSelectedKey?` | `string` | — | 초기 selected 아이템 key |
+| `selectedKey?` | `string` | — | 외부에서 제어하는 selected 아이템 key. 이 셋(`selectedKey`·`defaultSelectedKey`·`onSelectedKeyChange`) 중 하나라도 주면 **행 선택이 켜진다** — 행이 `role="button"` 이 되어 클릭·Enter·Space 로 선택된다. 아무것도 주지 않으면 행은 아무 상호작용도 갖지 않는다. |
+| `defaultSelectedKey?` | `string` | — | 초기 selected 아이템 key. 주면 행 선택이 켜진다 (`selectedKey` 참조) |
 | `getDisabled?` | `(item: T, index: number) => boolean` | — | disabled 아이템은 선택 및 드래그에서 제외 |
+| `getDepth?` | `(item: T, index: number) => number` | — | 아이템의 중첩 단계. 기본값은 1 |
+| `setDepth?` | `(item: T, depth: number) => T` | — | depth 변경이 필요한 드롭에서 다음 아이템을 만드는 함수 |
+| `getCanHaveChildren?` | `(item: T, index: number) => boolean` | — | 하위 depth 를 가질 수 있는 아이템인지 판정 |
+| `maxDepth?` | `number` | `3` | 허용할 최대 depth |
 | `listId?` | `string` | — | Provider 안에서 사용할 리스트 식별자 |
 | `group?` | `string` | — | 같은 group 값을 가진 리스트끼리 드래그 이벤트를 공유 |
 
@@ -36,7 +40,7 @@
 | Event | Type | Description |
 |-------|------|-------------|
 | `onChange` | `(items: T[]) => void` | 단독 리스트에서 드래그가 끝난 뒤 변경된 순서 |
-| `onSelectedKeyChange` | `(key: string) => void` | selected 아이템이 변경될 때 호출 |
+| `onSelectedKeyChange` | `(key: string) => void` | selected 아이템이 변경될 때 호출. 주면 행 선택이 켜진다 (`selectedKey` 참조) |
 
 ### SDraggableProvider
 
@@ -46,6 +50,32 @@
 |------|------|---------|-------------|
 | `children` | `ReactNode` | — |  |
 
+## Types
+
+### SDraggableGroupMoveEvent
+
+```ts
+export interface SDraggableGroupMoveEvent {
+  group: string;
+  itemKey: string;
+  fromListId: string;
+  fromIndex: number;
+  toListId: string;
+  toIndex: number;
+}
+```
+
+### SDraggableListRenderState
+
+```ts
+export interface SDraggableListRenderState {
+  onDragHandleMouseDown: (event: MouseEvent<HTMLDivElement>) => void;
+  selected: boolean;
+  disabled: boolean;
+  depth: number;
+}
+```
+
 ## Dependencies
 
 ### Depends on

package/dist/components/SDraggableList/SDraggableList.d.ts

@@ -3,7 +3,10 @@ import { type SListProps } from '../SList';
 export interface SDraggableListRenderState {
     onDragHandleMouseDown: (event: MouseEvent<HTMLDivElement>) => void;
     selected: boolean;
+    disabled: boolean;
+    depth: number;
 }
+export type SDraggableListDropIntent = 'before' | 'inside' | 'after';
 export interface SDraggableListProps<T> extends Omit<SListProps, 'children' | 'onChange'> {
     /** 현재 순서대로 렌더링할 아이템 목록 */
     items: T[];
@@ -13,14 +16,26 @@ export interface SDraggableListProps<T> extends Omit<SListProps, 'children' | 'o
     renderItem: (item: T, index: number, state: SDraggableListRenderState) => ReactNode;
     /** 단독 리스트에서 드래그가 끝난 뒤 변경된 순서 */
     onChange?: (items: T[]) => void;
-    /** 외부에서 제어하는 selected 아이템 key */
+    /**
+     * 외부에서 제어하는 selected 아이템 key.
+     * 이 셋(`selectedKey`·`defaultSelectedKey`·`onSelectedKeyChange`) 중 하나라도 주면 **행 선택이 켜진다** —
+     * 행이 `role="button"` 이 되어 클릭·Enter·Space 로 선택된다. 아무것도 주지 않으면 행은 아무 상호작용도 갖지 않는다.
+     */
     selectedKey?: string;
-    /** 초기 selected 아이템 key */
+    /** 초기 selected 아이템 key. 주면 행 선택이 켜진다 (`selectedKey` 참조) */
     defaultSelectedKey?: string;
-    /** selected 아이템이 변경될 때 호출 */
+    /** selected 아이템이 변경될 때 호출. 주면 행 선택이 켜진다 (`selectedKey` 참조) */
     onSelectedKeyChange?: (key: string) => void;
     /** disabled 아이템은 선택 및 드래그에서 제외 */
     getDisabled?: (item: T, index: number) => boolean;
+    /** 아이템의 중첩 단계. 기본값은 1 */
+    getDepth?: (item: T, index: number) => number;
+    /** depth 변경이 필요한 드롭에서 다음 아이템을 만드는 함수 */
+    setDepth?: (item: T, depth: number) => T;
+    /** 하위 depth 를 가질 수 있는 아이템인지 판정 */
+    getCanHaveChildren?: (item: T, index: number) => boolean;
+    /** 허용할 최대 depth */
+    maxDepth?: number;
     /** Provider 안에서 사용할 리스트 식별자 */
     listId?: string;
     /** 같은 group 값을 가진 리스트끼리 드래그 이벤트를 공유 */

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

@@ -1,2 +1,2 @@
-export { SDraggableList, type SDraggableListProps, type SDraggableListRenderState, } from './SDraggableList';
+export { SDraggableList, type SDraggableListDropIntent, type SDraggableListProps, type SDraggableListRenderState, } from './SDraggableList';
 export { SDraggableProvider, SDraggableGroup, type SDraggableGroupMoveEvent, type SDraggableGroupProps, type SDraggableProviderProps, } from './SDraggableGroup';

package/dist/components/SDrawer/README.md

@@ -29,6 +29,14 @@
 | `onClose` | `() => void` | 닫기(X) 버튼 클릭 |
 | `onWidthChange` | `(width: number) => void` | 너비가 확정될 때(드래그를 놓거나 방향키 조작). 드래그하는 동안에는 오지 않는다 |
 
+## Types
+
+### SDrawerButton
+
+```ts
+export type SDrawerButton = SFooterButton;
+```
+
 ## Dependencies
 
 ### Depends on

package/dist/components/SDropdownButton/README.md

@@ -33,6 +33,25 @@
 | `open` | `() => void` | 드롭다운 열기 (sdOpen) |
 | `close` | `() => void` | 드롭다운 닫기 (sdClose) |
 
+## Types
+
+### SDropdownButtonSize
+
+```ts
+export type SDropdownButtonSize = 'xs' | 'sm' | 'md';
+```
+
+### SDropdownButtonItem
+
+```ts
+export interface SDropdownButtonItem {
+  value: string | number;
+  label: string;
+  icon?: SIconName;
+  disabled?: boolean;
+}
+```
+
 ## Dependencies
 
 ### Depends on

package/dist/components/SEditor/EditorBody.d.ts

@@ -0,0 +1,36 @@
+import { type CSSProperties, type RefObject } from 'react';
+import { type SEditorToolbarItem } from './editor.config';
+import type { SEditorHandle } from './SEditor';
+import type { TiptapApi } from './tiptap-api';
+export interface EditorBodyProps {
+    /** 다 불러온 tiptap — 이 컴포넌트는 준비된 뒤에만 마운트된다 */
+    api: TiptapApi;
+    value?: string;
+    defaultValue?: string;
+    /** 지금 화면에 있는 HTML. 껍데기(SEditor)가 규칙 검증·폼 제출에 쓴다 */
+    htmlRef: RefObject<string>;
+    /** 사용자가 고쳐서 값이 바뀌었다 (setHTML·clear 같은 프로그램 조작은 제외) */
+    onInput: (html: string) => void;
+    onFocusChange: (focused: boolean) => void;
+    /** 에디터 인스턴스가 생겼다 — 껍데기가 밀린 focus() 를 흘려보낸다 */
+    onReady: () => void;
+    placeholder: string;
+    editable: boolean;
+    disabled: boolean;
+    minHeight?: number | string;
+    maxHeight?: number | string;
+    toolbar: SEditorToolbarItem[];
+    /** 선택 영역 위에 뜨는 서식 판 — 편집할 수 있으면 언제나 뜬다 (SEditor 주석 참고) */
+    bubbleMenu: SEditorToolbarItem[];
+    onImageUpload?: (file: File) => Promise<string>;
+    editorClassName?: string;
+    editorStyle?: CSSProperties;
+}
+/**
+ * SEditor 의 편집 영역 (내부 전용 — 배럴로 내보내지 않는다).
+ *
+ * tiptap 을 실제로 부리는 곳은 여기뿐이고, 그 tiptap 조차 `api` prop 으로 받는다.
+ * 이 파일이 `@tiptap/*` 을 정적으로 import 하면 그 순간 SEditor 를 쓰지 않는 소비 앱까지
+ * tiptap 이 번들에 남는다 (tiptap-api.ts 주석 참고) — 타입만 가져온다.
+ */
+export declare const EditorBody: import("react").ForwardRefExoticComponent<EditorBodyProps & import("react").RefAttributes<SEditorHandle>>;

package/dist/components/SEditor/EditorToolbar.d.ts

@@ -0,0 +1,93 @@
+import type { Editor } from '@tiptap/core';
+import { type SEditorHeadingLevel, type SEditorToolbarItem } from './editor.config';
+import type { TiptapApi } from './tiptap-api';
+/**
+ * 툴바 막대 — 엔진을 불러오는 동안 SEditor 가 같은 높이를 잡아 두는 데도 쓴다.
+ *
+ * **자리를 고정한다.** 긴 글을 쓰는 동안 막대가 화면 밖으로 나가면 서식을 걸 때마다 위로
+ * 되돌아가야 한다. 편집 영역이 자기 안에서 스크롤할 때(`maxHeight`)는 막대가 그 위에 있어
+ * 이미 남아 있고, 상한 없이 자라 페이지가 스크롤할 때는 `sticky` 가 화면 위쪽에 붙여 둔다.
+ *
+ * 글이 막대 아래로 지나가므로 배경을 칠해야 한다 — 필드가 상태(읽기전용·비활성)마다 다른
+ * 색을 쓰므로 값을 다시 적지 않고 `bg-inherit` 로 테두리 박스의 색을 그대로 받는다.
+ */
+export declare const TOOLBAR_BAR_CLASS = "sticky top-0 z-[1] flex flex-wrap items-center gap-[2px] border-b border-solid bg-inherit px-[8px] py-[4px]";
+export declare const TOOLBAR_BAR_STYLE: {
+    borderBottomColor: string;
+};
+/** 버튼의 눌림 표시에 필요한 것만 추린 에디터 상태 */
+declare const readEditorState: (e: Editor) => {
+    heading: SEditorHeadingLevel | 0;
+    bold: boolean;
+    italic: boolean;
+    underline: boolean;
+    strike: boolean;
+    code: boolean;
+    alignLeft: boolean;
+    alignCenter: boolean;
+    alignRight: boolean;
+    alignJustify: boolean;
+    bulletList: boolean;
+    orderedList: boolean;
+    taskList: boolean;
+    blockquote: boolean;
+    codeBlock: boolean;
+    link: boolean;
+    inTable: boolean;
+    canMergeCells: boolean;
+    canSplitCell: boolean;
+    linkHref: string;
+    color: string;
+    fontSize: string;
+    canUndo: boolean;
+    canRedo: boolean;
+};
+export type EditorToolbarState = ReturnType<typeof readEditorState>;
+/** 에디터가 아직 없을 때의 상태 — 아무것도 켜져 있지 않고 되돌릴 것도 없다 */
+export declare const IDLE_TOOLBAR_STATE: EditorToolbarState;
+export interface EditorToolbarBarProps {
+    /** 눌림 표시 — 에디터가 아직 없으면 `IDLE_TOOLBAR_STATE` */
+    state: EditorToolbarState;
+    /** 없으면 버튼을 눌러도 아무 일도 하지 않는다 (그때는 disabled 로 함께 잠근다) */
+    editor: Editor | null;
+    items: SEditorToolbarItem[];
+    /** 이미지 업로드 훅. 없으면 `image` 항목을 그리지 않는다 */
+    onImageUpload?: (file: File) => Promise<string>;
+    /** 편집 불가(비활성·읽기전용·엔진 로딩 중) — 모든 버튼을 잠근다 */
+    disabled: boolean;
+    /**
+     * `'bar'` 는 편집 영역 위에 붙는 막대, `'bubble'` 은 선택 영역 위에 뜨는 판이다.
+     * 그리는 버튼은 같고 담는 상자와 줄바꿈만 다르다.
+     */
+    variant?: 'bar' | 'bubble';
+}
+interface EditorToolbarProps extends Omit<EditorToolbarBarProps, 'state'> {
+    /** 동적으로 불러온 tiptap (useEditorState) */
+    api: TiptapApi;
+}
+/**
+ * 툴바 막대 (내부 전용 — 배럴로 내보내지 않는다).
+ *
+ * tiptap 을 모른다 — 눌림 상태는 `state` 로 받고 명령은 `editor` 가 있을 때만 나간다.
+ * 그래서 엔진을 불러오는 동안에도 SEditor 가 같은 막대를 그려 자리를 지킬 수 있다.
+ * 버튼 개수·아이콘이 같아야 줄바꿈까지 같아, 엔진이 붙는 순간 화면이 밀리지 않는다.
+ */
+export declare function EditorToolbarBar({ state, editor, items, onImageUpload, disabled, variant, }: EditorToolbarBarProps): import("react").JSX.Element;
+/**
+ * 버블 메뉴 — 글을 선택하면 그 위에 서식 판이 뜬다.
+ *
+ * tiptap Simple Editor 에는 없는 것이다(템플릿은 막대 하나뿐이다). 막대와 같은 버튼을
+ * 같은 코드로 그리고 담는 상자만 바꾼다 — 두 곳의 눌림 표시가 어긋날 일이 없다.
+ *
+ * 판은 `appendTo` 로 소속 모달(없으면 `body`)에 붙인다. 그대로 두면 tiptap 이 편집 영역의
+ * 부모에 붙이는데, 그 부모는 `maxHeight` 를 받으면 스크롤 상자가 되어 판 위쪽이 잘린다.
+ */
+export declare function EditorBubbleMenu({ api, editor, ...rest }: EditorToolbarProps): import("react").JSX.Element | null;
+/**
+ * SEditor 툴바 — 눌림 상태를 tiptap 에서 구독해 막대에 넘긴다.
+ *
+ * `useEditorState` 를 거치는 이유: tiptap v3 는 트랜잭션마다 리렌더하지 않으므로, 이걸
+ * 거치지 않으면 커서를 굵은 글자 위로 옮겨도 B 버튼이 켜지지 않는다.
+ */
+export declare function EditorToolbar({ api, editor, ...rest }: EditorToolbarProps): import("react").JSX.Element;
+export {};

package/dist/components/SEditor/README.md

@@ -0,0 +1,204 @@
+# SEditor
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### EditorBody
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `api` | `TiptapApi` | — | 다 불러온 tiptap — 이 컴포넌트는 준비된 뒤에만 마운트된다 |
+| `value?` | `string` | — |  |
+| `defaultValue?` | `string` | — |  |
+| `htmlRef` | `RefObject<string>` | — | 지금 화면에 있는 HTML. 껍데기(SEditor)가 규칙 검증·폼 제출에 쓴다 |
+| `placeholder` | `string` | — |  |
+| `editable` | `boolean` | — |  |
+| `disabled` | `boolean` | — |  |
+| `minHeight?` | `number \| string` | — |  |
+| `maxHeight?` | `number \| string` | — |  |
+| `toolbar` | `SEditorToolbarItem[]` | — |  |
+| `bubbleMenu` | `SEditorToolbarItem[]` | — | 선택 영역 위에 뜨는 서식 판 — 편집할 수 있으면 언제나 뜬다 (SEditor 주석 참고) |
+| `editorClassName?` | `string` | — |  |
+| `editorStyle?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onInput` | `(html: string) => void` | 사용자가 고쳐서 값이 바뀌었다 (setHTML·clear 같은 프로그램 조작은 제외) |
+| `onFocusChange` | `(focused: boolean) => void` |  |
+| `onReady` | `() => void` | 에디터 인스턴스가 생겼다 — 껍데기가 밀린 focus() 를 흘려보낸다 |
+| `onImageUpload` | `(file: File) => Promise<string>` |  |
+
+### EditorToolbarBar
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `state` | `EditorToolbarState` | — | 눌림 표시 — 에디터가 아직 없으면 `IDLE_TOOLBAR_STATE` |
+| `editor` | `Editor \| null` | — | 없으면 버튼을 눌러도 아무 일도 하지 않는다 (그때는 disabled 로 함께 잠근다) |
+| `items` | `SEditorToolbarItem[]` | — |  |
+| `disabled` | `boolean` | — | 편집 불가(비활성·읽기전용·엔진 로딩 중) — 모든 버튼을 잠근다 |
+| `variant?` | `'bar' \| 'bubble'` | `'bar'` | `'bar'` 는 편집 영역 위에 붙는 막대, `'bubble'` 은 선택 영역 위에 뜨는 판이다. 그리는 버튼은 같고 담는 상자와 줄바꿈만 다르다. |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onImageUpload` | `(file: File) => Promise<string>` | 이미지 업로드 훅. 없으면 `image` 항목을 그리지 않는다 |
+
+### SEditor
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value?` | `string` | — | 값 (제어) — HTML 문자열 |
+| `defaultValue?` | `string` | — | 초기값 (비제어) — HTML 문자열 |
+| `placeholder?` | `string` | `'내용을 입력해 주세요.'` | 빈 문서에 보일 안내 문구 |
+| `minHeight?` | `number \| string` | `200` | 편집 영역 최소 높이 (숫자=px) |
+| `maxHeight?` | `number \| string` | — | 편집 영역 최대 높이 (숫자=px). 넘으면 편집 영역 안에서만 스크롤한다 |
+| `simple?` | `boolean` | `false` | **글자에 거는 서식만** 남긴다 — 목록·정렬·인용·코드·링크·이미지·구분선이 빠진다. 막대와 버블 메뉴 양쪽에 함께 걸린다 (한쪽에만 남으면 아무것도 막지 못한다). 받은 글의 문단 구조까지 작성자를 따라가면 곤란한 자리 — 좁은 칸의 메모·사유·짧은 안내문 — 에 쓴다. 반대로 서식이 아예 필요 없다면 `SEditor` 가 아니라 `STextarea` 다. |
+| `rules?` | `Rule[]` | — | 유효성 규칙 — blur 시 자동 검증 |
+| `status?` | `SFieldStatus` | — | 필드 상태 ('default' | 'pass' | 'error') |
+| `focused?` | `boolean` | — | 포커스 상태를 밖에서 지정한다 — 강조 테두리·링이 즉시 걸린다 (SField 로 그대로 넘어간다) |
+| `hovered?` | `boolean` | — | 호버 상태를 밖에서 지정한다 — 강조는 `focused` 와 같다 (SField 로 그대로 넘어간다) |
+| `name?` | `string` | — | 폼 전송용 name |
+| `editorClassName?` | `string` | — | 편집 영역 className |
+| `editorStyle?` | `CSSProperties` | — | 편집 영역 style |
+| `label?` | `string` | — |  |
+| `labelPosition?` | `SFieldLabelPosition` | — | 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다). |
+| `labelWidth?` | `number \| string` | — |  |
+| `icon?` | `SIconName` | — | 레이블 영역 아이콘 |
+| `iconColor?` | `SColor` | — |  |
+| `labelTooltip?` | `string` | — | 레이블 툴팁 텍스트 |
+| `labelTooltipProps?` | `Partial<STooltipProps>` | — | 레이블 툴팁 상세 옵션 |
+| `addonLabel?` | `string` | — | 우측 어드온 레이블 |
+| `addonAlign?` | `SFieldAddonAlign` | — | 어드온 정렬 |
+| `hint?` | `string` | — |  |
+| `error?` | `boolean` | — |  |
+| `errorMessage?` | `string` | — |  |
+| `width?` | `SFieldWidth` | `'100%'` | 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이. 본문 길이에 상한이 없으므로 기본은 `"100%"`(행 전체)다. |
+| `disabled?` | `boolean` | `false` |  |
+| `readOnly?` | `boolean` | `false` |  |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onValueChange` | `(html: string) => void` | 값 변경 (sdUpdate) — 빈 문서면 빈 문자열을 준다 |
+| `onImageUpload` | `(file: File) => Promise<string>` | 이미지 업로드 — 고른 파일을 저장하고 **표시할 URL 을 돌려준다.** 저장 위치는 앱마다 다르므로 DS 가 정하지 않는다. 이 훅이 없으면 툴바에서 이미지 항목이 빠진다 (본문에 base64 를 박지 않는다 — HTML 이 그대로 DB 로 실려 간다). |
+| `onFocus` | `() => void` | 포커스 진입 |
+| `onBlur` | `() => void` | 포커스 이탈 |
+
+#### Methods (ref)
+
+| Method | Type | Description |
+|--------|------|-------------|
+| `focus` | `() => void` | 편집 영역에 포커스 |
+| `blur` | `() => void` | 포커스 해제 |
+| `getHTML` | `() => string` | 현재 내용을 HTML 로 반환 (빈 문서면 빈 문자열) |
+| `getText` | `() => string` | 현재 내용을 서식 없는 텍스트로 반환 |
+| `setHTML` | `(html: string) => void` | 내용을 HTML 로 교체 (onValueChange 를 발생시키지 않는다) |
+| `clear` | `() => void` | 내용을 비운다 |
+| `editor` | `Editor \| null` | tiptap 에디터 인스턴스 — 확장 명령이 필요할 때만 쓴다 |
+
+## Types
+
+### TiptapApi
+
+```ts
+/** 동적으로 불러온 tiptap — 이 객체를 거치지 않고는 에디터 코드가 tiptap 을 만지지 않는다. */
+export interface TiptapApi {
+  useEditor: TiptapReact['useEditor'];
+  useEditorState: TiptapReact['useEditorState'];
+  EditorContent: TiptapReact['EditorContent'];
+  /** 선택 영역 위에 뜨는 판 — 자리는 floating-ui 가 잡는다 */
+  BubbleMenu: TiptapMenus['BubbleMenu'];
+  /** tiptap 확장 구성 — 아래 createExtensions 주석 참고 */
+  createExtensions: (options: SEditorExtensionOptions) => AnyExtension[];
+}
+```
+
+### SEditorToolbarItem
+
+```ts
+export type SEditorToolbarItem = SEditorToolbarAction | '|';
+```
+
+### EditorToolbarState
+
+```ts
+export type EditorToolbarState = ReturnType<typeof readEditorState>;
+```
+
+### SEditorExtensionOptions
+
+```ts
+export interface SEditorExtensionOptions {
+  /** 빈 문서에 보일 문구를 그때그때 읽어 오는 게터 */
+  getPlaceholder: () => string;
+}
+```
+
+### SEditorToolbarAction
+
+```ts
+export type SEditorToolbarAction = (typeof SEDITOR_TOOLBAR_ITEMS)[number];
+```
+
+### SEDITOR_TOOLBAR_ITEMS
+
+```ts
+/** 툴바에 놓을 수 있는 항목. `'|'` 는 구분선이다. */
+export const SEDITOR_TOOLBAR_ITEMS = [
+  'heading',
+  'fontSize',
+  'bold',
+  'italic',
+  'underline',
+  'strike',
+  'code',
+  'color',
+  'alignLeft',
+  'alignCenter',
+  'alignRight',
+  'alignJustify',
+  'bulletList',
+  'orderedList',
+  'taskList',
+  'list',
+  'blockquote',
+  'codeBlock',
+  'horizontalRule',
+  'link',
+  'image',
+  'table',
+  'undo',
+  'redo',
+] as const;
+```
+
+## Dependencies
+
+### Depends on
+
+- [SButton](../SButton)
+- [SField](../SField)
+- [SIcon](../SIcon)
+- [SInput](../SInput)
+
+### Graph
+
+```mermaid
+graph TD;
+  SEditor --> SButton
+  SEditor --> SField
+  SEditor --> SIcon
+  SEditor --> SInput
+  style SEditor fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SEditor/SEditor.d.ts

@@ -0,0 +1,121 @@
+import { type CSSProperties } from 'react';
+import type { Editor } from '@tiptap/core';
+import { type SColor } from '../../lib/color';
+import { type SFieldWidth } from '../../lib/field-width';
+import { type Rule } from '../../lib/form';
+import { type SFieldAddonAlign, type SFieldStatus, type SFieldLabelPosition } from '../SField';
+import { type SIconName } from '../SIcon';
+import { type STooltipProps } from '../STooltip';
+/** ref 로 노출되는 조작 메서드 */
+export interface SEditorHandle {
+    /** 편집 영역에 포커스 */
+    focus: () => void;
+    /** 포커스 해제 */
+    blur: () => void;
+    /** 현재 내용을 HTML 로 반환 (빈 문서면 빈 문자열) */
+    getHTML: () => string;
+    /** 현재 내용을 서식 없는 텍스트로 반환 */
+    getText: () => string;
+    /** 내용을 HTML 로 교체 (onValueChange 를 발생시키지 않는다) */
+    setHTML: (html: string) => void;
+    /** 내용을 비운다 */
+    clear: () => void;
+    /** tiptap 에디터 인스턴스 — 확장 명령이 필요할 때만 쓴다 */
+    editor: Editor | null;
+}
+export interface SEditorProps {
+    /** 값 (제어) — HTML 문자열 */
+    value?: string;
+    /** 초기값 (비제어) — HTML 문자열 */
+    defaultValue?: string;
+    /** 값 변경 (sdUpdate) — 빈 문서면 빈 문자열을 준다 */
+    onValueChange?: (html: string) => void;
+    /** 빈 문서에 보일 안내 문구 */
+    placeholder?: string;
+    /** 편집 영역 최소 높이 (숫자=px) */
+    minHeight?: number | string;
+    /** 편집 영역 최대 높이 (숫자=px). 넘으면 편집 영역 안에서만 스크롤한다 */
+    maxHeight?: number | string;
+    /**
+     * **글자에 거는 서식만** 남긴다 — 목록·정렬·인용·코드·링크·이미지·구분선이 빠진다.
+     * 막대와 버블 메뉴 양쪽에 함께 걸린다 (한쪽에만 남으면 아무것도 막지 못한다).
+     *
+     * 받은 글의 문단 구조까지 작성자를 따라가면 곤란한 자리 — 좁은 칸의 메모·사유·짧은
+     * 안내문 — 에 쓴다. 반대로 서식이 아예 필요 없다면 `SEditor` 가 아니라 `STextarea` 다.
+     */
+    simple?: boolean;
+    /**
+     * 이미지 업로드 — 고른 파일을 저장하고 **표시할 URL 을 돌려준다.**
+     * 저장 위치는 앱마다 다르므로 DS 가 정하지 않는다. 이 훅이 없으면 툴바에서
+     * 이미지 항목이 빠진다 (본문에 base64 를 박지 않는다 — HTML 이 그대로 DB 로 실려 간다).
+     */
+    onImageUpload?: (file: File) => Promise<string>;
+    /** 유효성 규칙 — blur 시 자동 검증 */
+    rules?: Rule[];
+    /** 필드 상태 ('default' | 'pass' | 'error') */
+    status?: SFieldStatus;
+    /** 포커스 상태를 밖에서 지정한다 — 강조 테두리·링이 즉시 걸린다 (SField 로 그대로 넘어간다) */
+    focused?: boolean;
+    /** 호버 상태를 밖에서 지정한다 — 강조는 `focused` 와 같다 (SField 로 그대로 넘어간다) */
+    hovered?: boolean;
+    /** 폼 전송용 name */
+    name?: string;
+    /** 편집 영역 className */
+    editorClassName?: string;
+    /** 편집 영역 style */
+    editorStyle?: CSSProperties;
+    /** 포커스 진입 */
+    onFocus?: () => void;
+    /** 포커스 이탈 */
+    onBlur?: () => void;
+    label?: string;
+    /**
+     * 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다).
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    labelPosition?: SFieldLabelPosition;
+    labelWidth?: number | string;
+    /** 레이블 영역 아이콘 */
+    icon?: SIconName;
+    iconColor?: SColor;
+    /** 레이블 툴팁 텍스트 */
+    labelTooltip?: string;
+    /** 레이블 툴팁 상세 옵션 */
+    labelTooltipProps?: Partial<STooltipProps>;
+    /** 우측 어드온 레이블 */
+    addonLabel?: string;
+    /** 어드온 정렬 */
+    addonAlign?: SFieldAddonAlign;
+    hint?: string;
+    error?: boolean;
+    errorMessage?: string;
+    /**
+     * 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이.
+     * 본문 길이에 상한이 없으므로 기본은 `"100%"`(행 전체)다.
+     */
+    width?: SFieldWidth;
+    disabled?: boolean;
+    readOnly?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * SEditor — tiptap 기반 리치 텍스트 에디터.
+ *
+ * 값은 **HTML 문자열**로 주고받는다. 들어온 HTML 은 tiptap 스키마가 파싱하므로 스키마에 없는
+ * 태그·속성(script·onerror …)은 그 자리에서 떨어져 나간다 — 별도 살균기를 거치지 않는다.
+ * 테두리 박스·라벨·에러 표시는 `SField`(multiline) 가 소유하고, 이 컴포넌트는 그 안에
+ * 툴바와 편집 영역만 세로로 쌓는다.
+ *
+ * 글을 선택했을 때 그 위에 뜨는 서식 판(버블 메뉴)은 **끄고 켜는 것이 아니다** — 편집할 수
+ * 있으면 언제나 뜬다. 툴바까지 커서를 옮기지 않고 바로 서식을 거는 길이라 화면마다 있고
+ * 없고가 달라지면 그 자체가 학습 비용이 된다. 구성은 `simple` 이 툴바와 함께 정한다.
+ *
+ * tiptap 은 **마운트한 뒤에 불러온다** — 정적으로 묶으면 SEditor 를 한 번도 쓰지 않는 소비
+ * 앱까지 tiptap·prosemirror 를 번들에 지고 간다 (`tiptap-api.ts` 주석 참고). 불러오는 동안은
+ * 같은 크기의 빈 편집 영역이 자리를 지키므로 화면이 튀지 않고, 그 사이 `ref` 의 메서드는
+ * 아무 일도 하지 않는다 — `focus()` 만은 기억해 두었다가 준비되는 순간 흘려보낸다.
+ */
+export declare const SEditor: import("react").ForwardRefExoticComponent<SEditorProps & import("react").RefAttributes<SEditorHandle>>;

package/dist/components/SEditor/editor-icons.d.ts

@@ -0,0 +1,63 @@
+import type { SVGProps } from 'react';
+/**
+ * SEditor 서식 툴바 아이콘 (로컬 전용).
+ *
+ * 공용 아이콘 셋(`SIcon` / `icons.gen.tsx`)은 디자인팀 소유이고 서식(bold·italic·정렬·목록 …)
+ * 아이콘이 아직 없다. 여기 있는 것들은 그 자리를 메우는 임시 도형이며, 정식 아이콘이 셋에
+ * 들어오면 이 파일을 지우고 `SIcon` 으로 교체한다. **다른 컴포넌트에서 import 하지 않는다.**
+ *
+ * 도형은 tiptap Simple Editor 템플릿의 아이콘 셋을 그대로 옮겼다
+ * (ueberdosis/tiptap-ui-components, MIT © 2025 Tiptap — `apps/web/src/components/tiptap-icons`).
+ * 24×24 격자에 획 굵기 2 의 면(fill) 도형이고 색은 전부 `currentColor` 를 따른다 — 버튼이
+ * 토큰으로 정한 색이 그대로 내려온다. 새 아이콘을 더할 때도 이 격자·굵기를 지킨다.
+ *
+ * 템플릿에 없어 직접 그린 것은 `IconTextColor`·`IconHorizontalRule`·`IconTable` 뿐이다
+ * (각 주석 참고).
+ */
+export type SEditorIconProps = {
+    size?: number | string;
+} & SVGProps<SVGSVGElement>;
+/** 제목 — 지금 단계의 도형을 보여 준다 (본문이면 단계 없는 H) */
+export declare const IconHeading: ({ level, ...p }: SEditorIconProps & {
+    level?: 0 | 1 | 2 | 3;
+}) => import("react").JSX.Element;
+export declare const IconBold: (p: SEditorIconProps) => import("react").JSX.Element;
+export declare const IconItalic: (p: SEditorIconProps) => import("react").JSX.Element;
+export declare const IconUnderline: (p: SEditorIconProps) => import("react").JSX.Element;
+export declare const IconStrike: (p: SEditorIconProps) => import("react").JSX.Element;
+/** 인라인 코드 */
+export declare const IconCode: (p: SEditorIconProps) => import("react").JSX.Element;
+export declare const IconCodeBlock: (p: SEditorIconProps) => import("react").JSX.Element;
+export declare const IconBlockquote: (p: SEditorIconProps) => import("react").JSX.Element;
+export declare const IconAlignLeft: (p: SEditorIconProps) => import("react").JSX.Element;
+export declare const IconAlignCenter: (p: SEditorIconProps) => import("react").JSX.Element;
+export declare const IconAlignRight: (p: SEditorIconProps) => import("react").JSX.Element;
+export declare const IconAlignJustify: (p: SEditorIconProps) => import("react").JSX.Element;
+export declare const IconBulletList: (p: SEditorIconProps) => import("react").JSX.Element;
+export declare const IconOrderedList: (p: SEditorIconProps) => import("react").JSX.Element;
+export declare const IconTaskList: (p: SEditorIconProps) => import("react").JSX.Element;
+export declare const IconLink: (p: SEditorIconProps) => import("react").JSX.Element;
+/** 좁은 화면 툴바의 하위 뷰에서 되돌아가기 */
+export declare const IconArrowLeft: (p: SEditorIconProps) => import("react").JSX.Element;
+export declare const IconUndo: (p: SEditorIconProps) => import("react").JSX.Element;
+export declare const IconRedo: (p: SEditorIconProps) => import("react").JSX.Element;
+/**
+ * 글자색 — 템플릿에 없어 직접 그렸다 (Simple Editor 에는 글자색 항목이 없다).
+ *
+ * 나머지 아이콘이 면 도형이라 A 도 같은 굵기(2)로 보이도록 획으로 긋고 끝을 둥글렸다 —
+ * 템플릿의 막대(`rx=1` 인 2px 사각형)와 같은 인상이다. 지금 고른 색은 툴바 버튼이 아이콘
+ * 아래 막대로 따로 보여 준다.
+ */
+export declare const IconTextColor: (p: SEditorIconProps) => import("react").JSX.Element;
+/**
+ * 표 — 템플릿에 없어 직접 그렸다 (Simple Editor 에는 표가 없다).
+ *
+ * 테두리를 획으로 긋지 않고 **칸 네 개를 면으로 찍는다** — 다른 아이콘이 모두 면 도형이라
+ * 16px 에서 획으로 그린 격자만 유독 흐려 보인다. 첫 줄이 헤더라 한 덩어리로 이어 붙였다.
+ */
+export declare const IconTable: (p: SEditorIconProps) => import("react").JSX.Element;
+/**
+ * 구분선 — 템플릿에 없어 직접 그렸다 (Simple Editor 는 구분선 노드는 있지만 툴바 항목이 없다).
+ * 막대는 템플릿의 정렬 아이콘과 같은 규격(높이 2, `rx=1`)이다.
+ */
+export declare const IconHorizontalRule: (p: SEditorIconProps) => import("react").JSX.Element;