sellmate-design-system-react 9.0.0-beta.2 → 9.0.0-beta.20

package/dist/components/SDraggableItem/README.md

@@ -12,6 +12,7 @@
 | `supportingText?` | `SDraggableItemSlot` | — | 제목을 보조하는 텍스트 |
 | `supportingTextPosition?` | `SDraggableItemSupportingTextPosition` | `'right'` | 보조 텍스트 위치 |
 | `trailing?` | `SDraggableItemSlot` | — | 타이틀 뒤에 표시할 태그/콘텐츠 |
+| `depth?` | `number` | `1` | 중첩 단계. `SListItem`·`SExpansionItem` 과 같은 들여쓰기 간격을 사용한다 |
 | `accentStripe?` | `boolean` | `false` | 아이템 왼쪽 accent stripe 표시 여부 |
 | `bordered?` | `boolean` | `false` | 외곽 테두리 사용 여부 |
 | `selected?` | `boolean` | `false` | 선택 상태 여부 |
@@ -29,6 +30,42 @@
 |-------|------|-------------|
 | `onDragHandleMouseDown` | `(event: MouseEvent<HTMLDivElement>) => void` | 드래그 핸들 mouse down 이벤트 |
 
+## Types
+
+### SDraggableItemSlot
+
+```ts
+export type SDraggableItemSlot = ReactNode | SDraggableItemRenderProp;
+```
+
+### SDraggableItemSupportingTextPosition
+
+```ts
+export type SDraggableItemSupportingTextPosition = 'right' | 'bottom';
+```
+
+### SDraggableItemSize
+
+```ts
+export type SDraggableItemSize = 'sm' | 'md';
+```
+
+### SDraggableItemRenderProp
+
+```ts
+export type SDraggableItemRenderProp = (state: SDraggableItemRenderState) => ReactNode;
+```
+
+### SDraggableItemRenderState
+
+```ts
+export interface SDraggableItemRenderState {
+  hovered: boolean;
+  dragging: boolean;
+  disabled: boolean;
+}
+```
+
 ## Dependencies
 
 ### Depends on

package/dist/components/SDraggableItem/SDraggableItem.d.ts

@@ -17,6 +17,8 @@ export interface SDraggableItemProps extends Omit<HTMLAttributes<HTMLDivElement>
     supportingTextPosition?: SDraggableItemSupportingTextPosition;
     /** 타이틀 뒤에 표시할 태그/콘텐츠 */
     trailing?: SDraggableItemSlot;
+    /** 중첩 단계. `SListItem`·`SExpansionItem` 과 같은 들여쓰기 간격을 사용한다 */
+    depth?: number;
     /** 아이템 왼쪽 accent stripe 표시 여부 */
     accentStripe?: boolean;
     /** 외곽 테두리 사용 여부 */

package/dist/components/SDraggableList/README.md

@@ -28,6 +28,10 @@
 | `selectedKey?` | `string` | — | 외부에서 제어하는 selected 아이템 key |
 | `defaultSelectedKey?` | `string` | — | 초기 selected 아이템 key |
 | `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 값을 가진 리스트끼리 드래그 이벤트를 공유 |
 
@@ -46,6 +50,31 @@
 |------|------|---------|-------------|
 | `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;
+  depth: number;
+}
+```
+
 ## Dependencies
 
 ### Depends on

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

@@ -3,7 +3,9 @@ import { type SListProps } from '../SList';
 export interface SDraggableListRenderState {
     onDragHandleMouseDown: (event: MouseEvent<HTMLDivElement>) => void;
     selected: boolean;
+    depth: number;
 }
+export type SDraggableListDropIntent = 'before' | 'inside' | 'after';
 export interface SDraggableListProps<T> extends Omit<SListProps, 'children' | 'onChange'> {
     /** 현재 순서대로 렌더링할 아이템 목록 */
     items: T[];
@@ -21,6 +23,14 @@ export interface SDraggableListProps<T> extends Omit<SListProps, 'children' | 'o
     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,40 @@
+import { type CSSProperties, type RefObject } from 'react';
+import { type SEditorColorOption, 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;
+    typography: boolean;
+    editable: boolean;
+    disabled: boolean;
+    minHeight?: number | string;
+    maxHeight?: number | string;
+    toolbar: SEditorToolbarItem[] | false;
+    /** 선택 영역 위에 뜨는 서식 판. `false` 면 그리지 않는다 */
+    bubbleMenu: SEditorToolbarItem[] | false;
+    fontSizes: number[];
+    colors: SEditorColorOption[];
+    highlights: SEditorColorOption[];
+    onImageUpload?: (file: File) => Promise<string>;
+    editorClass?: 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,87 @@
+import type { Editor } from '@tiptap/core';
+import { type SEditorColorOption, type SEditorHeadingLevel, type SEditorToolbarItem } from './editor.config';
+import type { TiptapApi } from './tiptap-api';
+/** 툴바 막대 — 엔진을 불러오는 동안 SEditor 가 같은 높이를 잡아 두는 데도 쓴다 */
+export declare const TOOLBAR_BAR_CLASS = "flex flex-wrap items-center gap-[2px] border-b border-solid 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;
+    superscript: boolean;
+    subscript: boolean;
+    alignLeft: boolean;
+    alignCenter: boolean;
+    alignRight: boolean;
+    alignJustify: boolean;
+    bulletList: boolean;
+    orderedList: boolean;
+    taskList: boolean;
+    blockquote: boolean;
+    codeBlock: boolean;
+    link: boolean;
+    linkHref: string;
+    color: string;
+    highlight: 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[];
+    fontSizes: readonly number[];
+    colors: SEditorColorOption[];
+    highlights: SEditorColorOption[];
+    /** 이미지 업로드 훅. 없으면 `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, fontSizes, colors, highlights, 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,230 @@
+# 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` | — |  |
+| `typography` | `boolean` | — |  |
+| `editable` | `boolean` | — |  |
+| `disabled` | `boolean` | — |  |
+| `minHeight?` | `number \| string` | — |  |
+| `maxHeight?` | `number \| string` | — |  |
+| `toolbar` | `SEditorToolbarItem[] \| false` | — |  |
+| `bubbleMenu` | `SEditorToolbarItem[] \| false` | — | 선택 영역 위에 뜨는 서식 판. `false` 면 그리지 않는다 |
+| `fontSizes` | `number[]` | — |  |
+| `colors` | `SEditorColorOption[]` | — |  |
+| `highlights` | `SEditorColorOption[]` | — |  |
+| `editorClass?` | `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[]` | — |  |
+| `fontSizes` | `readonly number[]` | — |  |
+| `colors` | `SEditorColorOption[]` | — |  |
+| `highlights` | `SEditorColorOption[]` | — |  |
+| `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). 넘으면 편집 영역 안에서만 스크롤한다 |
+| `toolbar?` | `SEditorToolbarItem[] \| false` | `SEDITOR_DEFAULT_TOOLBAR` | 툴바 구성. `false` 면 툴바 없이 본문만 (읽기 화면·간단 메모용) |
+| `bubbleMenu?` | `SEditorToolbarItem[] \| false` | `SEDITOR_DEFAULT_BUBBLE_MENU` | 글을 선택했을 때 그 위에 뜨는 서식 판의 구성. `false` 면 뜨지 않는다. 읽기 전용·비활성일 때는 어차피 뜨지 않는다. 좁은 칸에 놓인 에디터라면 판이 필드 밖으로 넘칠 수 있으니 항목을 줄이거나 `false` 로 끈다. |
+| `fontSizes?` | `number[]` | `[...SEDITOR_FONT_SIZES]` | 글자 크기 드롭다운 선택지 (px) |
+| `colors?` | `SEditorColorOption[]` | `SEDITOR_DEFAULT_COLORS` | 글자색 팔레트 |
+| `highlights?` | `SEditorColorOption[]` | `SEDITOR_DEFAULT_HIGHLIGHTS` | 형광펜(배경색) 팔레트 |
+| `typography?` | `boolean` | `false` | 따옴표·하이픈·화살표 자동 치환 (`"` → `“”`, `--` → `—`, `->` → `→`). 상품 코드·규격 문자열이 입력한 그대로 남아야 하는 화면이 많아 기본은 끔이다. **마운트 시점에만 반영된다** — 값이 바뀌어도 이미 만들어진 에디터에는 적용되지 않는다. |
+| `rules?` | `Rule[]` | — | 유효성 규칙 — blur 시 자동 검증 |
+| `status?` | `SFieldStatus` | — | 필드 상태 ('default' | 'pass' | 'error') |
+| `focused?` | `boolean` | — | 포커스 상태 (제어/반영) |
+| `hovered?` | `boolean` | — | 호버 상태 (제어/반영) |
+| `name?` | `string` | — | 폼 전송용 name |
+| `editorClass?` | `string` | — | 편집 영역 className |
+| `editorStyle?` | `CSSProperties` | — | 편집 영역 style |
+| `label?` | `string` | — |  |
+| `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 | '|';
+```
+
+### SEditorColorOption
+
+```ts
+export interface SEditorColorOption {
+  /** 팔레트 칸의 접근성 레이블·툴팁 */
+  label: string;
+  /** 팔레트 키(`red_75` …) 또는 CSS 색상 문자열 */
+  color: SColor;
+}
+```
+
+### EditorToolbarState
+
+```ts
+export type EditorToolbarState = ReturnType<typeof readEditorState>;
+```
+
+### SEditorExtensionOptions
+
+```ts
+export interface SEditorExtensionOptions {
+  /** 빈 문서에 보일 문구를 그때그때 읽어 오는 게터 */
+  getPlaceholder: () => string;
+  /** 따옴표·하이픈·화살표 자동 치환 (Typography) */
+  typography: boolean;
+}
+```
+
+### 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',
+  'highlight',
+  'superscript',
+  'subscript',
+  'alignLeft',
+  'alignCenter',
+  'alignRight',
+  'alignJustify',
+  'bulletList',
+  'orderedList',
+  'taskList',
+  'list',
+  'blockquote',
+  'codeBlock',
+  'horizontalRule',
+  'link',
+  'image',
+  '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,124 @@
+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 } from '../SField';
+import { type SIconName } from '../SIcon';
+import { type STooltipProps } from '../STooltip';
+import { type SEditorColorOption, type SEditorToolbarItem } from './editor.config';
+/** 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;
+    /** 툴바 구성. `false` 면 툴바 없이 본문만 (읽기 화면·간단 메모용) */
+    toolbar?: SEditorToolbarItem[] | false;
+    /**
+     * 글을 선택했을 때 그 위에 뜨는 서식 판의 구성. `false` 면 뜨지 않는다.
+     *
+     * 읽기 전용·비활성일 때는 어차피 뜨지 않는다. 좁은 칸에 놓인 에디터라면 판이 필드 밖으로
+     * 넘칠 수 있으니 항목을 줄이거나 `false` 로 끈다.
+     */
+    bubbleMenu?: SEditorToolbarItem[] | false;
+    /** 글자 크기 드롭다운 선택지 (px) */
+    fontSizes?: number[];
+    /** 글자색 팔레트 */
+    colors?: SEditorColorOption[];
+    /** 형광펜(배경색) 팔레트 */
+    highlights?: SEditorColorOption[];
+    /**
+     * 이미지 업로드 — 고른 파일을 저장하고 **표시할 URL 을 돌려준다.**
+     * 저장 위치는 앱마다 다르므로 DS 가 정하지 않는다. 이 훅이 없으면 툴바에서
+     * 이미지 항목이 빠진다 (본문에 base64 를 박지 않는다 — HTML 이 그대로 DB 로 실려 간다).
+     */
+    onImageUpload?: (file: File) => Promise<string>;
+    /**
+     * 따옴표·하이픈·화살표 자동 치환 (`"` → `“”`, `--` → `—`, `->` → `→`).
+     * 상품 코드·규격 문자열이 입력한 그대로 남아야 하는 화면이 많아 기본은 끔이다.
+     * **마운트 시점에만 반영된다** — 값이 바뀌어도 이미 만들어진 에디터에는 적용되지 않는다.
+     */
+    typography?: boolean;
+    /** 유효성 규칙 — blur 시 자동 검증 */
+    rules?: Rule[];
+    /** 필드 상태 ('default' | 'pass' | 'error') */
+    status?: SFieldStatus;
+    /** 포커스 상태 (제어/반영) */
+    focused?: boolean;
+    /** 호버 상태 (제어/반영) */
+    hovered?: boolean;
+    /** 폼 전송용 name */
+    name?: string;
+    /** 편집 영역 className */
+    editorClass?: string;
+    /** 편집 영역 style */
+    editorStyle?: CSSProperties;
+    /** 포커스 진입 */
+    onFocus?: () => void;
+    /** 포커스 이탈 */
+    onBlur?: () => void;
+    label?: string;
+    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) 가 소유하고, 이 컴포넌트는 그 안에
+ * 툴바와 편집 영역만 세로로 쌓는다.
+ *
+ * tiptap 은 **마운트한 뒤에 불러온다** — 정적으로 묶으면 SEditor 를 한 번도 쓰지 않는 소비
+ * 앱까지 tiptap·prosemirror 를 번들에 지고 간다 (`tiptap-api.ts` 주석 참고). 불러오는 동안은
+ * 같은 크기의 빈 편집 영역이 자리를 지키므로 화면이 튀지 않고, 그 사이 `ref` 의 메서드는
+ * 아무 일도 하지 않는다 — `focus()` 만은 기억해 두었다가 준비되는 순간 흘려보낸다.
+ */
+export declare const SEditor: import("react").ForwardRefExoticComponent<SEditorProps & import("react").RefAttributes<SEditorHandle>>;