sellmate-design-system-react 9.0.0-beta.21 → 9.0.0-beta.24

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

@@ -1,8 +1,17 @@
 import type { Editor } from '@tiptap/core';
-import { type SEditorColorOption, type SEditorHeadingLevel, type SEditorToolbarItem } from './editor.config';
+import { 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]";
+/**
+ * 툴바 막대 — 엔진을 불러오는 동안 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;
 };
@@ -14,8 +23,6 @@ declare const readEditorState: (e: Editor) => {
     underline: boolean;
     strike: boolean;
     code: boolean;
-    superscript: boolean;
-    subscript: boolean;
     alignLeft: boolean;
     alignCenter: boolean;
     alignRight: boolean;
@@ -26,9 +33,11 @@ declare const readEditorState: (e: Editor) => {
     blockquote: boolean;
     codeBlock: boolean;
     link: boolean;
+    inTable: boolean;
+    canMergeCells: boolean;
+    canSplitCell: boolean;
     linkHref: string;
     color: string;
-    highlight: string;
     fontSize: string;
     canUndo: boolean;
     canRedo: boolean;
@@ -42,9 +51,6 @@ export interface EditorToolbarBarProps {
     /** 없으면 버튼을 눌러도 아무 일도 하지 않는다 (그때는 disabled 로 함께 잠근다) */
     editor: Editor | null;
     items: SEditorToolbarItem[];
-    fontSizes: readonly number[];
-    colors: SEditorColorOption[];
-    highlights: SEditorColorOption[];
     /** 이미지 업로드 훅. 없으면 `image` 항목을 그리지 않는다 */
     onImageUpload?: (file: File) => Promise<string>;
     /** 편집 불가(비활성·읽기전용·엔진 로딩 중) — 모든 버튼을 잠근다 */
@@ -66,7 +72,7 @@ interface EditorToolbarProps extends Omit<EditorToolbarBarProps, 'state'> {
  * 그래서 엔진을 불러오는 동안에도 SEditor 가 같은 막대를 그려 자리를 지킬 수 있다.
  * 버튼 개수·아이콘이 같아야 줄바꿈까지 같아, 엔진이 붙는 순간 화면이 밀리지 않는다.
  */
-export declare function EditorToolbarBar({ state, editor, items, fontSizes, colors, highlights, onImageUpload, disabled, variant, }: EditorToolbarBarProps): import("react").JSX.Element;
+export declare function EditorToolbarBar({ state, editor, items, onImageUpload, disabled, variant, }: EditorToolbarBarProps): import("react").JSX.Element;
 /**
  * 버블 메뉴 — 글을 선택하면 그 위에 서식 판이 뜬다.
  *

package/dist/components/SEditor/README.md

@@ -13,16 +13,12 @@
 | `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[]` | — |  |
+| `toolbar` | `SEditorToolbarItem[]` | — |  |
+| `bubbleMenu` | `SEditorToolbarItem[]` | — | 선택 영역 위에 뜨는 서식 판 — 편집할 수 있으면 언제나 뜬다 (SEditor 주석 참고) |
 | `editorClass?` | `string` | — |  |
 | `editorStyle?` | `CSSProperties` | — |  |
 
@@ -44,9 +40,6 @@
 | `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'` 은 선택 영역 위에 뜨는 판이다. 그리는 버튼은 같고 담는 상자와 줄바꿈만 다르다. |
 
@@ -67,12 +60,7 @@
 | `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` | 따옴표·하이픈·화살표 자동 치환 (`"` → `“”`, `--` → `—`, `->` → `→`). 상품 코드·규격 문자열이 입력한 그대로 남아야 하는 화면이 많아 기본은 끔이다. **마운트 시점에만 반영된다** — 값이 바뀌어도 이미 만들어진 에디터에는 적용되지 않는다. |
+| `simple?` | `boolean` | `false` | **글자에 거는 서식만** 남긴다 — 목록·정렬·인용·코드·링크·이미지·구분선이 빠진다. 막대와 버블 메뉴 양쪽에 함께 걸린다 (한쪽에만 남으면 아무것도 막지 못한다). 받은 글의 문단 구조까지 작성자를 따라가면 곤란한 자리 — 좁은 칸의 메모·사유·짧은 안내문 — 에 쓴다. 반대로 서식이 아예 필요 없다면 `SEditor` 가 아니라 `STextarea` 다. |
 | `rules?` | `Rule[]` | — | 유효성 규칙 — blur 시 자동 검증 |
 | `status?` | `SFieldStatus` | — | 필드 상태 ('default' | 'pass' | 'error') |
 | `focused?` | `boolean` | — | 포커스 상태 (제어/반영) |
@@ -141,17 +129,6 @@ export interface TiptapApi {
 export type SEditorToolbarItem = SEditorToolbarAction | '|';
 ```
 
-### SEditorColorOption
-
-```ts
-export interface SEditorColorOption {
-  /** 팔레트 칸의 접근성 레이블·툴팁 */
-  label: string;
-  /** 팔레트 키(`red_75` …) 또는 CSS 색상 문자열 */
-  color: SColor;
-}
-```
-
 ### EditorToolbarState
 
 ```ts
@@ -164,8 +141,6 @@ export type EditorToolbarState = ReturnType<typeof readEditorState>;
 export interface SEditorExtensionOptions {
   /** 빈 문서에 보일 문구를 그때그때 읽어 오는 게터 */
   getPlaceholder: () => string;
-  /** 따옴표·하이픈·화살표 자동 치환 (Typography) */
-  typography: boolean;
 }
 ```
 
@@ -188,9 +163,6 @@ export const SEDITOR_TOOLBAR_ITEMS = [
   'strike',
   'code',
   'color',
-  'highlight',
-  'superscript',
-  'subscript',
   'alignLeft',
   'alignCenter',
   'alignRight',
@@ -204,6 +176,7 @@ export const SEDITOR_TOOLBAR_ITEMS = [
   'horizontalRule',
   'link',
   'image',
+  'table',
   'undo',
   'redo',
 ] as const;

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

@@ -6,7 +6,6 @@ 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 {
     /** 편집 영역에 포커스 */
@@ -37,33 +36,20 @@ export interface SEditorProps {
     minHeight?: number | string;
     /** 편집 영역 최대 높이 (숫자=px). 넘으면 편집 영역 안에서만 스크롤한다 */
     maxHeight?: number | string;
-    /** 툴바 구성. `false` 면 툴바 없이 본문만 (읽기 화면·간단 메모용) */
-    toolbar?: SEditorToolbarItem[] | false;
     /**
-     * 글을 선택했을 때 그 위에 뜨는 서식 판의 구성. `false` 면 뜨지 않는다.
+     * **글자에 거는 서식만** 남긴다 — 목록·정렬·인용·코드·링크·이미지·구분선이 빠진다.
+     * 막대와 버블 메뉴 양쪽에 함께 걸린다 (한쪽에만 남으면 아무것도 막지 못한다).
      *
-     * 읽기 전용·비활성일 때는 어차피 뜨지 않는다. 좁은 칸에 놓인 에디터라면 판이 필드 밖으로
-     * 넘칠 수 있으니 항목을 줄이거나 `false` 로 끈다.
+     * 받은 글의 문단 구조까지 작성자를 따라가면 곤란한 자리 — 좁은 칸의 메모·사유·짧은
+     * 안내문 — 에 쓴다. 반대로 서식이 아예 필요 없다면 `SEditor` 가 아니라 `STextarea` 다.
      */
-    bubbleMenu?: SEditorToolbarItem[] | false;
-    /** 글자 크기 드롭다운 선택지 (px) */
-    fontSizes?: number[];
-    /** 글자색 팔레트 */
-    colors?: SEditorColorOption[];
-    /** 형광펜(배경색) 팔레트 */
-    highlights?: SEditorColorOption[];
+    simple?: boolean;
     /**
      * 이미지 업로드 — 고른 파일을 저장하고 **표시할 URL 을 돌려준다.**
      * 저장 위치는 앱마다 다르므로 DS 가 정하지 않는다. 이 훅이 없으면 툴바에서
      * 이미지 항목이 빠진다 (본문에 base64 를 박지 않는다 — HTML 이 그대로 DB 로 실려 간다).
      */
     onImageUpload?: (file: File) => Promise<string>;
-    /**
-     * 따옴표·하이픈·화살표 자동 치환 (`"` → `“”`, `--` → `—`, `->` → `→`).
-     * 상품 코드·규격 문자열이 입력한 그대로 남아야 하는 화면이 많아 기본은 끔이다.
-     * **마운트 시점에만 반영된다** — 값이 바뀌어도 이미 만들어진 에디터에는 적용되지 않는다.
-     */
-    typography?: boolean;
     /** 유효성 규칙 — blur 시 자동 검증 */
     rules?: Rule[];
     /** 필드 상태 ('default' | 'pass' | 'error') */
@@ -116,6 +102,10 @@ export interface SEditorProps {
  * 테두리 박스·라벨·에러 표시는 `SField`(multiline) 가 소유하고, 이 컴포넌트는 그 안에
  * 툴바와 편집 영역만 세로로 쌓는다.
  *
+ * 글을 선택했을 때 그 위에 뜨는 서식 판(버블 메뉴)은 **끄고 켜는 것이 아니다** — 편집할 수
+ * 있으면 언제나 뜬다. 툴바까지 커서를 옮기지 않고 바로 서식을 거는 길이라 화면마다 있고
+ * 없고가 달라지면 그 자체가 학습 비용이 된다. 구성은 `simple` 이 툴바와 함께 정한다.
+ *
  * tiptap 은 **마운트한 뒤에 불러온다** — 정적으로 묶으면 SEditor 를 한 번도 쓰지 않는 소비
  * 앱까지 tiptap·prosemirror 를 번들에 지고 간다 (`tiptap-api.ts` 주석 참고). 불러오는 동안은
  * 같은 크기의 빈 편집 영역이 자리를 지키므로 화면이 튀지 않고, 그 사이 `ref` 의 메서드는

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

@@ -11,7 +11,8 @@ import type { SVGProps } from 'react';
  * 24×24 격자에 획 굵기 2 의 면(fill) 도형이고 색은 전부 `currentColor` 를 따른다 — 버튼이
  * 토큰으로 정한 색이 그대로 내려온다. 새 아이콘을 더할 때도 이 격자·굵기를 지킨다.
  *
- * 템플릿에 없어 직접 그린 것은 `IconTextColor`·`IconHorizontalRule` 둘뿐이다 (아래 주석 참고).
+ * 템플릿에 없어 직접 그린 것은 `IconTextColor`·`IconHorizontalRule`·`IconTable` 뿐이다
+ * (각 주석 참고).
  */
 export type SEditorIconProps = {
     size?: number | string;
@@ -28,10 +29,6 @@ export declare const IconStrike: (p: SEditorIconProps) => import("react").JSX.El
 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 IconHighlight: (p: SEditorIconProps) => import("react").JSX.Element;
-export declare const IconSuperscript: (p: SEditorIconProps) => import("react").JSX.Element;
-export declare const IconSubscript: (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;
@@ -48,10 +45,17 @@ export declare const IconRedo: (p: SEditorIconProps) => import("react").JSX.Elem
  * 글자색 — 템플릿에 없어 직접 그렸다 (Simple Editor 에는 글자색 항목이 없다).
  *
  * 나머지 아이콘이 면 도형이라 A 도 같은 굵기(2)로 보이도록 획으로 긋고 끝을 둥글렸다 —
- * 템플릿의 막대(`rx=1` 인 2px 사각형)와 같은 인상이다. 지금 고른 색은 형광펜과 마찬가지로
- * 툴바 버튼이 아이콘 아래 막대로 보여 준다.
+ * 템플릿의 막대(`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`)이다.

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

@@ -1,22 +1,32 @@
 import type { CSSProperties } from 'react';
 import type { SColor } from '../../lib/color';
 /** 툴바에 놓을 수 있는 항목. `'|'` 는 구분선이다. */
-export declare const SEDITOR_TOOLBAR_ITEMS: readonly ["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"];
+export declare const SEDITOR_TOOLBAR_ITEMS: readonly ["heading", "fontSize", "bold", "italic", "underline", "strike", "code", "color", "alignLeft", "alignCenter", "alignRight", "alignJustify", "bulletList", "orderedList", "taskList", "list", "blockquote", "codeBlock", "horizontalRule", "link", "image", "table", "undo", "redo"];
 export type SEditorToolbarAction = (typeof SEDITOR_TOOLBAR_ITEMS)[number];
 export type SEditorToolbarItem = SEditorToolbarAction | '|';
 /**
- * 기본 툴바 — tiptap Simple Editor 템플릿과 같은 순서다.
+ * 기본 툴바 — 쓸 수 있는 것을 **모두** 보인다. 순서는 tiptap Simple Editor 템플릿을 따른다.
  *
- * 이력 → 블록(제목·목록·인용·코드블록) → 서식 → 첨자 → 정렬 → 삽입. 목록 셋은 `list`
- * 드롭다운 하나로 묶여 있다(개별 버튼으로 펼치려면 `bulletList`·`orderedList`·`taskList`).
+ * 이력 → 블록(제목·글자 크기·목록·인용·코드블록) → 서식 → 정렬 → 삽입.
  *
- * 전체 항목(`SEDITOR_TOOLBAR_ITEMS`) 중 `fontSize`·`horizontalRule` 만 기본에서 빠져 있다 —
- * 필요한 화면에서 `toolbar` 로 켠다. 글자색(`color`)은 템플릿에 없지만 공지·안내문에서
- * 자주 쓰여 형광펜 옆에 함께 둔다.
+ * 빠진 것은 `bulletList`·`orderedList`·`taskList` 뿐인데, 이 셋은 `list` 드롭다운 하나로
+ * 이미 들어와 있다 — 함께 놓으면 같은 명령이 툴바에 두 번 나온다. 목록을 드롭다운이 아니라
+ * 버튼 셋으로 펼치고 싶은 화면만 `toolbar` 로 직접 조합한다.
  *
  * `image` 는 `onImageUpload` 를 받았을 때만 그려진다 (훅이 없으면 저장할 곳이 없다).
  */
 export declare const SEDITOR_DEFAULT_TOOLBAR: SEditorToolbarItem[];
+/**
+ * 간단 툴바 (`simple`) — **글자에 거는 서식만** 남긴다.
+ *
+ * 목록·정렬·인용·코드·링크·이미지·구분선처럼 **글의 구조를 바꾸는** 항목을 뺀 구성이다.
+ * 받은 글이 다시 화면에 그려질 때 문단 구조까지 작성자를 따라가면 곤란한 자리 — 좁은 칸에
+ * 놓인 메모·사유·짧은 안내문 — 를 위한 것이다.
+ *
+ * 제목·글자 크기는 남긴다. 둘 다 글의 뼈대가 아니라 **글자의 크기**를 정하는 항목이라
+ * 강조를 거는 데 쓰이고, 이것까지 빼면 남는 것이 굵게·색뿐이라 `STextarea` 와 다를 바 없다.
+ */
+export declare const SEDITOR_SIMPLE_TOOLBAR: SEditorToolbarItem[];
 /**
  * 기본 버블 메뉴 — 글을 선택했을 때 그 위에 뜨는 판의 구성.
  *
@@ -27,16 +37,33 @@ export declare const SEDITOR_DEFAULT_TOOLBAR: SEditorToolbarItem[];
  * 판은 선택 영역 위에 뜨는 한 줄이라 줄바꿈하지 않는다 — 항목을 늘릴 때 폭을 함께 본다.
  */
 export declare const SEDITOR_DEFAULT_BUBBLE_MENU: SEditorToolbarItem[];
+/**
+ * 간단 모드(`simple`)의 버블 메뉴 — 막대와 같은 범위로 맞춘다.
+ *
+ * 막대에서 링크·코드를 뺐는데 판에는 남아 있으면 간단 모드가 아무것도 막지 못한다.
+ * 선택한 글에 걸 수 있는 것은 두 곳이 같아야 한다.
+ */
+export declare const SEDITOR_SIMPLE_BUBBLE_MENU: SEditorToolbarItem[];
 /** 제목 단계 — 본문 12px 위로 14 / 16 / 18 (DS 타이포 heading sm·md·lg) */
 export declare const SEDITOR_HEADING_LEVELS: readonly [1, 2, 3];
 export type SEditorHeadingLevel = (typeof SEDITOR_HEADING_LEVELS)[number];
 export declare const SEDITOR_HEADING_LABELS: Record<SEditorHeadingLevel | 0, string>;
 /**
- * 글자 크기 선택지 (px). DS 타이포 스케일(`--text-*`)에서 본문에 쓰이는 단계만 추렸다.
- * 이 서비스는 정보 밀도가 높아 본문이 12px 다 (AGENTS.md §2-1).
+ * 글자 크기 선택지 (px) — 워드프로세서의 눈금과 같은 단계다.
+ *
+ * 화면의 본문 리듬은 DS 타이포 스케일(`--text-*`)이 잡는다. 이 목록은 그 리듬이 아니라
+ * **작성자가 글 안에서 직접 크기를 지정할 때** 쓰는 눈금이라 훨씬 넓다 — 24 이상은 안내문
+ * 표지·행사 배너처럼 본문이 아닌 글을 위한 것이다.
+ *
+ * **눈금을 좁히는 prop 은 없다** — 화면마다 고를 수 있는 크기가 다르면 같은 글이 어디에
+ * 붙느냐에 따라 다르게 보인다. 작성자가 리듬(AGENTS.md §2-1: 본문 12px)을 벗어나면 곤란한
+ * 자리라면 애초에 `SEditor` 가 아니라 `STextarea` 가 맞는 자리인지 먼저 본다.
+ */
+export declare const SEDITOR_FONT_SIZES: readonly [8, 9, 10, 11, 12, 14, 16, 18, 24, 30, 36, 48, 60, 72];
+/**
+ * 크기를 지정하지 않은 문단이 실제로 보이는 크기 — 드롭다운의 `기본` 항목이 되돌리는 자리다.
+ * 제목(h1~h3)은 자기 크기를 따로 가지므로 이 값과 무관하다.
  */
-export declare const SEDITOR_FONT_SIZES: readonly [11, 12, 14, 16, 18];
-/** 크기를 지정하지 않은 문단이 실제로 보이는 크기 — 드롭다운의 선택 표시 기준이다. */
 export declare const SEDITOR_DEFAULT_FONT_SIZE = 12;
 export interface SEditorColorOption {
     /** 팔레트 칸의 접근성 레이블·툴팁 */
@@ -45,24 +72,31 @@ export interface SEditorColorOption {
     color: SColor;
 }
 /**
- * 기본 글자색 팔레트 — 역할 토큰(`--color-fg-*`)을 그대로 쓴다.
+ * 글자색 팔레트 — 역할 토큰(`--color-fg-*`)을 그대로 쓴다. 바꾸는 prop 은 없다.
  *
  * 저장되는 HTML 에 `style="color: var(--color-fg-danger)"` 형태로 남으므로 토큰이 바뀌면
  * 이미 저장된 글도 따라간다. 대신 **DS `theme.css` 가 없는 환경(메일 본문 등)으로 그대로
- * 내보내면 색이 풀린다** — 그런 용도라면 `colors` 에 hex 를 직접 넘긴다.
+ * 내보내면 색이 풀린다** — 그런 반출이 필요하면 내보내는 쪽에서 토큰을 실제 색으로 푼다.
  */
 export declare const SEDITOR_DEFAULT_COLORS: SEditorColorOption[];
-/** 기본 형광펜 팔레트 — 글자가 그 위에서 읽혀야 하므로 팔레트의 밝은 단계만 쓴다. */
-export declare const SEDITOR_DEFAULT_HIGHLIGHTS: SEditorColorOption[];
-/** ProseMirror 가 만드는 요소에 붙는 클래스 — 자식 선택자의 기준점이 된다. */
+/**
+ * ProseMirror 가 만드는 요소에 붙는 클래스 — 자식 선택자의 기준점이 된다.
+ *
+ * **아래 `SEDITOR_CONTENT_CLASS` 에서는 이 상수를 끼워 넣지 말고 이름을 그대로 적는다.**
+ * Tailwind 는 소스를 글자로 훑을 뿐 코드를 돌려 보지 않아 `` `[&_.${TASK_LIST_CLASS}]:pl-0` ``
+ * 같은 문자열에서는 클래스 후보를 찾지 못하고, 그 규칙이 통째로 CSS 에서 빠진다 — 화면에는
+ * 아무 에러 없이 스타일만 사라진다 (표 테두리가 통째로 없던 실제 사고).
+ */
 export declare const TASK_LIST_CLASS = "sd-editor-task-list";
 export declare const TASK_ITEM_CLASS = "sd-editor-task-item";
 export declare const IMAGE_CLASS = "sd-editor-image";
+export declare const TABLE_CLASS = "sd-editor-table";
+export declare const TABLE_ROW_CLASS = "sd-editor-table-row";
+export declare const TABLE_HEADER_CLASS = "sd-editor-table-header";
+export declare const TABLE_CELL_CLASS = "sd-editor-table-cell";
 export interface SEditorExtensionOptions {
     /** 빈 문서에 보일 문구를 그때그때 읽어 오는 게터 */
     getPlaceholder: () => string;
-    /** 따옴표·하이픈·화살표 자동 치환 (Typography) */
-    typography: boolean;
 }
 /**
  * 편집 영역 안쪽 서식 스타일.

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

@@ -1,2 +1,8 @@
 export { SEditor, type SEditorProps, type SEditorHandle } from './SEditor';
-export { SEDITOR_TOOLBAR_ITEMS, SEDITOR_DEFAULT_TOOLBAR, SEDITOR_DEFAULT_BUBBLE_MENU, SEDITOR_HEADING_LEVELS, SEDITOR_HEADING_LABELS, SEDITOR_FONT_SIZES, SEDITOR_DEFAULT_FONT_SIZE, SEDITOR_DEFAULT_COLORS, SEDITOR_DEFAULT_HIGHLIGHTS, type SEditorToolbarAction, type SEditorToolbarItem, type SEditorHeadingLevel, type SEditorColorOption, } from './editor.config';
+/**
+ * 여기 남은 것은 **저장된 HTML 이 어떻게 보이는지**를 알려 주는 값뿐이다 — 읽기 화면을
+ * 직접 그릴 때 쓴다. 툴바 구성(`SEDITOR_*_TOOLBAR`·`SEditorToolbarItem` …)·글자색
+ * 팔레트·글자 크기 눈금처럼 **에디터에 넘기던 값**은 그것을 바꾸는 prop 이 모두 없어져
+ * 내보내지 않는다. 툴바 구성은 `simple` 로만 고른다.
+ */
+export { SEDITOR_HEADING_LEVELS, SEDITOR_HEADING_LABELS, SEDITOR_DEFAULT_FONT_SIZE, type SEditorHeadingLevel, } from './editor.config';

package/dist/components/SEditor/use-is-mobile.d.ts

@@ -2,7 +2,7 @@
  * 좁은 화면인가 (SEditor 전용 — 다른 컴포넌트에서 import 하지 않는다).
  *
  * 이 DS 에는 브레이크포인트 개념이 없다. 여기에 필요한 이유는 하나뿐이라서 — 손가락으로
- * 쓰는 좁은 화면에서는 툴바 위에 뜨는 팝오버(형광펜 팔레트·링크 입력)가 화면 밖으로
+ * 쓰는 좁은 화면에서는 툴바 위에 뜨는 팝오버(글자색 팔레트·링크 입력)가 화면 밖으로
  * 밀리거나 소프트 키보드에 가린다 — 공용 `lib/` 로 올리지 않고 이 폴더에 둔다. 나중에
  * DS 차원의 브레이크포인트가 생기면 그걸로 갈아끼운다.
  *

package/dist/components/STable/README.md

@@ -24,12 +24,11 @@
 | `noDataLabel?` | `string` | `'데이터가 없습니다.'` |  |
 | `noDataSlot?` | `ReactNode` | — | 데이터가 없을 때 body 영역 전체를 대체하는 슬롯. 지정하면 `noDataLabel` 대신 이 콘텐츠가 헤더 아래 영역을 채우며, 버튼 등 인터랙션도 동작한다. |
 | `isLoading?` | `boolean` | `false` |  |
-| `dense?` | `boolean` | `false` | 행 높이를 좁게 (세로 여백만 줄인다 — 좌우 패딩은 그대로) |
+| `dense?` | `boolean` | `false` | 행 높이를 좁게 (세로 여백만 줄인다 — 좌우 패딩은 그대로). **시작 밀도이자 밀도 토글의 스위치다.** 켜면 하단 바 우측에 `좁게 보기` · `넓게 보기` 토글이 붙는다 — 페이지네이션이 없으면 이 바를 토글만 담아 그린다. 누른 뒤의 밀도는 테이블이 내부 상태로 들고 가므로 `onDenseChange` 를 받지 않아도 토글은 동작하고, 넓게 본 뒤에도 토글은 그대로 남는다(붙일지는 이 prop 이 정한다). 이 prop 값이 바뀌면 내부 밀도도 그 값으로 맞춰진다. |
 | `noHover?` | `boolean` | `false` | true면 행에 마우스를 올려도 hover 배경(grey_05)을 표시하지 않는다 |
 | `pagination?` | `STablePagination` | — | 페이지네이션 (있으면 하단 표시) |
 | `useInternalPagination?` | `boolean` | `false` | 테이블 내부에서 페이지네이션을 직접 관리 (rows를 내부 슬라이싱) |
 | `useRowsPerPageSelect?` | `boolean` | `false` | 페이지당 행 수 셀렉트 표시 |
-| `useDensityToggle?` | `boolean` | `false` | 페이지네이션 바에 밀도 토글(`좁게 보기` · `넓게 보기`) 표시. **페이지네이션이 있을 때만 나타난다** — 토글이 사는 곳이 그 바이기 때문이다. `onDenseChange` 와 함께 준다. 밀도는 컴포넌트가 갖지 않으므로, 핸들러 없이 켜면 눌러도 아무 일도 일어나지 않는다. |
 | `rowsPerPageOption?` | `SSelectOption[]` | `DEFAULT_ROWS_PER_PAGE_OPTION` |  |
 | `useVirtualScroll?` | `boolean` | `false` | 가상 스크롤 |
 | `rowHeight?` | `number` | — |  |
@@ -45,7 +44,7 @@
 |-------|------|-------------|
 | `onSelectedChange` | `(rows: SRow[]) => void` |  |
 | `onSortChange` | `(sort: STableSort \| null) => void` | 정렬 헤더 클릭 (`asc → desc → 해제` 3단). 해제되면 `null` 이 온다. 다중 정렬은 1차 안에서 지원하지 않는다. |
-| `onDenseChange` | `(dense: boolean) => void` | 밀도 변경 (`useDensityToggle` 로 띄운 토글을 눌렀을 때). 컴포넌트는 밀도 상태를 갖지 않는다 — `dense` 가 곧 현재 상태이고, 그 진실은 페이지에 있다. 사용자가 고른 밀도를 다음 방문까지 기억해 두는 것(로컬 저장 등)도 페이지 몫이다. |
+| `onDenseChange` | `(dense: boolean) => void` | 밀도 변경 (하단 바의 밀도 토글을 눌렀을 때). 표시는 테이블이 알아서 바꾸므로 받지 않아도 되고, 사용자가 고른 밀도를 다음 방문까지 기억해 두려는(로컬 저장 등) 페이지만 받으면 된다. |
 | `onPageChange` | `(page: number) => void` |  |
 | `onRowsPerPageChange` | `(perPage: number) => void` |  |
 | `onVirtualUpdate` | `(range: { from: number; to: number }) => void` |  |

package/dist/components/STable/STable.d.ts

@@ -218,12 +218,20 @@ export interface STableProps {
      */
     noDataSlot?: ReactNode;
     isLoading?: boolean;
-    /** 행 높이를 좁게 (세로 여백만 줄인다 — 좌우 패딩은 그대로) */
+    /**
+     * 행 높이를 좁게 (세로 여백만 줄인다 — 좌우 패딩은 그대로).
+     *
+     * **시작 밀도이자 밀도 토글의 스위치다.** 켜면 하단 바 우측에 `좁게 보기` · `넓게 보기` 토글이
+     * 붙는다 — 페이지네이션이 없으면 이 바를 토글만 담아 그린다.
+     *
+     * 누른 뒤의 밀도는 테이블이 내부 상태로 들고 가므로 `onDenseChange` 를 받지 않아도 토글은
+     * 동작하고, 넓게 본 뒤에도 토글은 그대로 남는다(붙일지는 이 prop 이 정한다). 이 prop 값이
+     * 바뀌면 내부 밀도도 그 값으로 맞춰진다.
+     */
     dense?: boolean;
     /**
-     * 밀도 변경 (`useDensityToggle` 로 띄운 토글을 눌렀을 때). 컴포넌트는 밀도 상태를 갖지 않는다 —
-     * `dense` 가 곧 현재 상태이고, 그 진실은 페이지에 있다. 사용자가 고른 밀도를 다음 방문까지
-     * 기억해 두는 것(로컬 저장 등)도 페이지 몫이다.
+     * 밀도 변경 (하단 바의 밀도 토글을 눌렀을 때). 표시는 테이블이 알아서 바꾸므로 받지 않아도 되고,
+     * 사용자가 고른 밀도를 다음 방문까지 기억해 두려는(로컬 저장 등) 페이지만 받으면 된다.
      */
     onDenseChange?: (dense: boolean) => void;
     /** true면 행에 마우스를 올려도 hover 배경(grey_05)을 표시하지 않는다 */
@@ -235,14 +243,6 @@ export interface STableProps {
     useInternalPagination?: boolean;
     /** 페이지당 행 수 셀렉트 표시 */
     useRowsPerPageSelect?: boolean;
-    /**
-     * 페이지네이션 바에 밀도 토글(`좁게 보기` · `넓게 보기`) 표시.
-     *
-     * **페이지네이션이 있을 때만 나타난다** — 토글이 사는 곳이 그 바이기 때문이다.
-     * `onDenseChange` 와 함께 준다. 밀도는 컴포넌트가 갖지 않으므로, 핸들러 없이 켜면 눌러도
-     * 아무 일도 일어나지 않는다.
-     */
-    useDensityToggle?: boolean;
     rowsPerPageOption?: SSelectOption[];
     onRowsPerPageChange?: (perPage: number) => void;
     /** 가상 스크롤 */