sellmate-design-system-react 9.0.0-beta.22 → 9.0.0-beta.25

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/SIcon/README.md

@@ -48,6 +48,7 @@
  - [SSectionHeaderCard](../SSectionHeaderCard)
  - [SSelect](../SSelect)
  - [SStepper](../SStepper)
+ - [SSystemActionButton](../SSystemActionButton)
  - [STable](../STable)
  - [STag](../STag)
  - [STextLink](../STextLink)
@@ -88,6 +89,7 @@ graph TD;
   SSectionHeaderCard --> SIcon
   SSelect --> SIcon
   SStepper --> SIcon
+  SSystemActionButton --> SIcon
   STable --> SIcon
   STag --> SIcon
   STextLink --> SIcon

package/dist/components/SSystemActionButton/README.md

@@ -0,0 +1,129 @@
+# SSystemActionButton
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SSystemActionButtonAccount
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `type` | `'account'` | — | 계정 행 |
+| `label?` | `string` | — | 라벨 텍스트 |
+| `option?` | `never` | — | 아이콘이 `user` 로 고정이라 받을 것이 없다 |
+
+### SSystemActionButtonBase
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `color?` | `SSystemActionButtonColor` | — | 색상(놓이는 표면). light = 흰 면, dark = 오션블루 면, darker = 네이비 면. 기본 `'light'` |
+| `disabled?` | `boolean` | — | 비활성 여부. 기본 `false` |
+
+### SSystemActionButtonSelect
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `type` | `'select'` | — | 화살표만 붙는 행 |
+| `label?` | `string` | — | 라벨 텍스트 |
+| `option` | `SSystemActionButtonIconOption` | — | 선행 아이콘 |
+
+### SSystemActionButtonStatus
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `type` | `'status'` | — | 라벨 자리에 상태 태그가 들어가는 행 |
+| `label?` | `never` | — | 태그가 라벨 자리를 차지하므로 받지 않는다 |
+| `option?` | `SSystemActionButtonStatusOption` | — | 상태 태그 |
+
+### SSystemActionButtonText
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `type` | `'switch' \| 'subSelect'` | — | 우측에 문구가 붙는 행. switch = 보조 조작 문구, subSelect = 지금 선택된 값 |
+| `label?` | `string` | — | 라벨 텍스트 |
+| `option` | `SSystemActionButtonTextOption` | — | 선행 아이콘 + 우측 액션 텍스트 |
+
+## Types
+
+### SSystemActionButtonColor
+
+```ts
+export type SSystemActionButtonColor = (typeof SYSTEM_ACTION_BUTTON_COLORS)[number];
+```
+
+### SSystemActionButtonIconOption
+
+```ts
+/** 선행 아이콘만 받는 타입(`select`)의 option */
+export interface SSystemActionButtonIconOption {
+  /** 선행 아이콘명 */
+  icon: SIconName;
+}
+```
+
+### SSystemActionButtonStatusOption
+
+```ts
+/** `status` 타입의 option — 라벨 자리에 들어가는 상태 태그 */
+export interface SSystemActionButtonStatusOption {
+  /** 상태 태그 색 */
+  color?: STagColor;
+  /** 상태 태그 텍스트 */
+  label?: string;
+}
+```
+
+### SSystemActionButtonTextOption
+
+```ts
+/** 우측 액션 텍스트까지 받는 타입(`switch` · `subSelect`)의 option */
+export interface SSystemActionButtonTextOption extends SSystemActionButtonIconOption {
+  /** 우측 액션 텍스트 */
+  text?: string;
+}
+```
+
+### SYSTEM_ACTION_BUTTON_COLORS
+
+```ts
+/**
+ * SSystemActionButton 설정.
+ *
+ * 토큰은 GNB system 패널 한 벌(`--cmp-gnb-system-*`)을 그대로 쓴다.
+ *   행 공통(높이·라운드·아이콘 프레임·라벨)  → --cmp-gnb-system-item-*
+ *   색(color 축) light / dark / darker        → --cmp-gnb-system-item-<color>-*
+ *   우측 액션(패딩·간격·아이콘·텍스트색)      → --cmp-gnb-system-actionButton-*
+ *
+ * 타이포그래피는 CSS 변수가 아니라 `.typo-*` 프리셋으로 나온다.
+ *   item.label              → typo-body-sm-semibold  (12/600/20)
+ *   actionButton.switch     → typo-field-sm-default   (12/400/20)
+ *   actionButton.selectData → typo-control-xs-medium  (12/500/20)
+ */
+
+/** 색상(표면). light = 흰 면, dark = 오션블루 면, darker = 네이비 면 */
+export const SYSTEM_ACTION_BUTTON_COLORS = ['light', 'dark', 'darker'] as const;
+```
+
+## Dependencies
+
+### Depends on
+
+- [SIcon](../SIcon)
+- [STag](../STag)
+
+### Graph
+
+```mermaid
+graph TD;
+  SSystemActionButton --> SIcon
+  SSystemActionButton --> STag
+  style SSystemActionButton fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SSystemActionButton/SSystemActionButton.d.ts

@@ -0,0 +1,79 @@
+import { type ButtonHTMLAttributes } from 'react';
+import { type SIconName } from '../SIcon';
+import { type STagColor } from '../STag';
+import { type SSystemActionButtonColor } from './systemActionButton.config';
+/** 선행 아이콘만 받는 타입(`select`)의 option */
+export interface SSystemActionButtonIconOption {
+    /** 선행 아이콘명 */
+    icon: SIconName;
+}
+/** 우측 액션 텍스트까지 받는 타입(`switch` · `subSelect`)의 option */
+export interface SSystemActionButtonTextOption extends SSystemActionButtonIconOption {
+    /** 우측 액션 텍스트 */
+    text?: string;
+}
+/** `status` 타입의 option — 라벨 자리에 들어가는 상태 태그 */
+export interface SSystemActionButtonStatusOption {
+    /** 상태 태그 색 */
+    color?: STagColor;
+    /** 상태 태그 텍스트 */
+    label?: string;
+}
+/** 모든 타입이 공통으로 받는 props */
+export interface SSystemActionButtonBaseProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'type' | 'children'> {
+    /** 색상(놓이는 표면). light = 흰 면, dark = 오션블루 면, darker = 네이비 면. 기본 `'light'` */
+    color?: SSystemActionButtonColor;
+    /** 비활성 여부. 기본 `false` */
+    disabled?: boolean;
+}
+/** 계정 행 — 아이콘이 `user` 로 고정이고 우측 액션이 없다 */
+export interface SSystemActionButtonAccountProps extends SSystemActionButtonBaseProps {
+    /** 계정 행 */
+    type: 'account';
+    /** 라벨 텍스트 */
+    label?: string;
+    /** 아이콘이 `user` 로 고정이라 받을 것이 없다 */
+    option?: never;
+}
+/** 화살표만 붙는 행 — 눌러 들어간다는 뜻 */
+export interface SSystemActionButtonSelectProps extends SSystemActionButtonBaseProps {
+    /** 화살표만 붙는 행 */
+    type: 'select';
+    /** 라벨 텍스트 */
+    label?: string;
+    /** 선행 아이콘 */
+    option: SSystemActionButtonIconOption;
+}
+/** 우측에 문구가 붙는 행 — `switch` 는 보조 조작 문구, `subSelect` 는 지금 선택된 값 */
+export interface SSystemActionButtonTextProps extends SSystemActionButtonBaseProps {
+    /** 우측에 문구가 붙는 행. switch = 보조 조작 문구, subSelect = 지금 선택된 값 */
+    type: 'switch' | 'subSelect';
+    /** 라벨 텍스트 */
+    label?: string;
+    /** 선행 아이콘 + 우측 액션 텍스트 */
+    option: SSystemActionButtonTextOption;
+}
+/** 라벨 자리에 상태 태그가 들어가는 행 */
+export interface SSystemActionButtonStatusProps extends SSystemActionButtonBaseProps {
+    /** 라벨 자리에 상태 태그가 들어가는 행 */
+    type: 'status';
+    /** 태그가 라벨 자리를 차지하므로 받지 않는다 */
+    label?: never;
+    /** 상태 태그 */
+    option?: SSystemActionButtonStatusOption;
+}
+/** `type` 으로 갈리는 판별 유니온. 타입에 맞지 않는 option 은 컴파일 단계에서 막힌다. */
+export type SSystemActionButtonProps = SSystemActionButtonAccountProps | SSystemActionButtonSelectProps | SSystemActionButtonTextProps | SSystemActionButtonStatusProps;
+/**
+ * SSystemActionButton — GNB system 패널의 한 줄짜리 액션 버튼.
+ *
+ * 아이콘 프레임 + 라벨 + 우측 액션이 한 행에 붙고, 행 전체가 버튼이다. 무엇이 그려지는지는
+ * `type` 이 정하고(`account` `switch` `select` `subSelect` `status`), 타입마다 다른 값만
+ * `option` 으로 받는다. 선행 아이콘은 항상 있다 — `account` 는 `user` 고정, `status` 는 태그가
+ * 자리를 차지해 아이콘이 없고, 나머지는 `option.icon` 이 필수다.
+ *
+ * hover 하면 표면색이 한 단계 바뀌고, 어두운 색에서는 아이콘 프레임이 흰색으로 떠오른다.
+ * 상태는 default·hover 둘뿐이다 — 토큰에 selected 가 없다.
+ * 토큰은 `--cmp-gnb-system-item-*` · `--cmp-gnb-system-actionButton-*`.
+ */
+export declare const SSystemActionButton: import("react").ForwardRefExoticComponent<SSystemActionButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,2 @@
+export { SSystemActionButton, type SSystemActionButtonProps, type SSystemActionButtonBaseProps, type SSystemActionButtonAccountProps, type SSystemActionButtonSelectProps, type SSystemActionButtonTextProps, type SSystemActionButtonStatusProps, type SSystemActionButtonIconOption, type SSystemActionButtonTextOption, type SSystemActionButtonStatusOption, } from './SSystemActionButton';
+export { SYSTEM_ACTION_BUTTON_COLORS, SYSTEM_ACTION_BUTTON_TYPES, SYSTEM_ACTION_BUTTON_COLOR_CONFIG, SYSTEM_ACTION_BUTTON_TYPE_CONFIG, SYSTEM_ACTION_BUTTON_LAYOUT, type SSystemActionButtonColor, type SSystemActionButtonType, } from './systemActionButton.config';

package/dist/components/SSystemActionButton/systemActionButton.config.d.ts

@@ -0,0 +1,87 @@
+import type { SIconName } from '../SIcon';
+/**
+ * SSystemActionButton 설정.
+ *
+ * 토큰은 GNB system 패널 한 벌(`--cmp-gnb-system-*`)을 그대로 쓴다.
+ *   행 공통(높이·라운드·아이콘 프레임·라벨)  → --cmp-gnb-system-item-*
+ *   색(color 축) light / dark / darker        → --cmp-gnb-system-item-<color>-*
+ *   우측 액션(패딩·간격·아이콘·텍스트색)      → --cmp-gnb-system-actionButton-*
+ *
+ * 타이포그래피는 CSS 변수가 아니라 `.typo-*` 프리셋으로 나온다.
+ *   item.label              → typo-body-sm-semibold  (12/600/20)
+ *   actionButton.switch     → typo-field-sm-default   (12/400/20)
+ *   actionButton.selectData → typo-control-xs-medium  (12/500/20)
+ */
+/** 색상(표면). light = 흰 면, dark = 오션블루 면, darker = 네이비 면 */
+export declare const SYSTEM_ACTION_BUTTON_COLORS: readonly ["light", "dark", "darker"];
+export type SSystemActionButtonColor = (typeof SYSTEM_ACTION_BUTTON_COLORS)[number];
+/**
+ * 행 구성.
+ * - `account` — 계정 행. 아이콘이 `user` 로 고정이고 우측 액션이 없다
+ * - `switch` — 보조 조작 문구 + 새로고침 아이콘
+ * - `select` — 화살표만. 눌러 들어간다는 뜻
+ * - `subSelect` — 지금 선택돼 있는 값 + 화살표
+ * - `status` — 라벨 자리에 상태 태그가 들어가고 화살표가 붙는다
+ */
+export declare const SYSTEM_ACTION_BUTTON_TYPES: readonly ["account", "switch", "select", "subSelect", "status"];
+export type SSystemActionButtonType = (typeof SYSTEM_ACTION_BUTTON_TYPES)[number];
+/** 우측 액션 텍스트의 색·타이포가 어느 토큰 그룹을 쓰는지 (토큰의 하위 그룹명과 같다) */
+export type SystemActionButtonActionTextToken = 'switch' | 'selectData';
+export interface SystemActionButtonColorTokens {
+    /** 행 배경 (기본) */
+    bg: string;
+    /** 행 배경 (hover·selected) */
+    bgHover: string;
+    /** 아이콘 프레임 배경 (기본) */
+    iconBg: string;
+    /** 아이콘 프레임 배경 (hover·selected) */
+    iconBgHover: string;
+    /** 아이콘 글리프색 (기본) */
+    iconGlyph: string;
+    /** 아이콘 글리프색 (hover·selected) */
+    iconGlyphHover: string;
+    /** 라벨 텍스트색 */
+    text: string;
+    /** 우측 액션 텍스트색 (토큰 그룹별) */
+    actionText: Record<SystemActionButtonActionTextToken, string>;
+    /** 우측 액션 아이콘색 */
+    actionIcon: string;
+}
+export declare const SYSTEM_ACTION_BUTTON_COLOR_CONFIG: Record<SSystemActionButtonColor, SystemActionButtonColorTokens>;
+export interface SystemActionButtonTypeSpec {
+    /** 선행 아이콘 고정값. 있으면 `option.icon` 을 받지 않는다 */
+    fixedIcon?: SIconName;
+    /** 우측 액션 텍스트의 색·타이포. 없으면 텍스트를 그리지 않는다 */
+    actionText?: {
+        token: SystemActionButtonActionTextToken;
+        typo: string;
+    };
+    /** 우측 액션 아이콘. 타입이 정하므로 밖에서 바꾸지 않는다 */
+    actionIcon?: {
+        name: SIconName;
+        size: string;
+    };
+}
+/** 타입이 정하는 고정 구성 — 무엇이 그려지는가 */
+export declare const SYSTEM_ACTION_BUTTON_TYPE_CONFIG: Record<SSystemActionButtonType, SystemActionButtonTypeSpec>;
+/** 치수 — 전부 토큰 참조 */
+export declare const SYSTEM_ACTION_BUTTON_LAYOUT: {
+    /** 행 높이 */
+    readonly height: string;
+    /** 행 라운드 */
+    readonly radius: string;
+    /** 아이콘 프레임 한 변 */
+    readonly iconFrame: string;
+    /** 아이콘 글리프 크기 */
+    readonly iconGlyph: string;
+    /** 아이콘 프레임 라운드 */
+    readonly iconRadius: string;
+    /** 아이콘 프레임 ↔ 라벨 간격 */
+    readonly iconLabelGap: string;
+    /** 좌측 여백 */
+    readonly paddingLeft: string;
+    /** 우측 여백 */
+    readonly paddingRight: string;
+    /** 액션 텍스트 ↔ 액션 아이콘 간격 */
+    readonly actionGap: string;
+};