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

package/AGENTS.md

@@ -26,7 +26,7 @@
 
 | 분류 | 컴포넌트 |
 | --- | --- |
-| **버튼·링크** | `SButton` `SGhostButton` `SDropdownButton` `STextLink` `SSwitch` `SToggle` |
+| **버튼·링크** | `SButton` `SGhostButton` `SDropdownButton` `SSystemActionButton` `STextLink` `SSwitch` `SToggle` |
 | **입력 (폼)** | `SForm` `SField` `SInput` `SSearchInput` `SNumberInput` `STextarea` `SEditor` `SSelect` `SCheckbox` `SRadio` `SRadioGroup` `SRadioButton` `SChip` `SChipInput` `SBarcodeInput` `SFilePicker` |
 | **날짜·시간** | `SCalendar` `SDatePicker` `SDatePickerYearListbox` `SDatePickerMonthListbox` `SDateRangePicker` `STimePicker` `STimeRangePicker` |
 | **표·목록** | `STable` `STableBar` `SChipFilter` `SKeyValueTable` `SList` `SListItem` `SExpansionList` `SDraggableList` `SDraggableItem` `STree` |
@@ -152,7 +152,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | --- | --- | --- |
 | **셸** | 앱 전체 뼈대. 페이지가 바뀌어도 남는다 | `SLayout` `SGnb` `SPage`(제목 영역은 `header` prop) |
 | **블록** | `SPage` 의 직계 자식. 페이지를 세로로 쌓는 단위 | `SSectionHeaderCard` `SCard` `SForm` `SSplitter` `SScrollArea` `STable` `STableBar` `SChipFilter` `SKeyValueTable` `SList` `SExpansionList` `SDraggableList` `STree` `SCallout` `STabs` `SStepper` `SPagination` `SDivider` |
-| **요소** | 블록 **안에** 놓이는 컨트롤. 혼자 페이지에 서지 않는다 | `SButton` `SGhostButton` `SDropdownButton` `SField` `SInput` `SSearchInput` `SNumberInput` `STextarea` `SEditor` `SSelect` `SCheckbox` `SRadio` `SRadioGroup` `SRadioButton` `SSwitch` `SToggle` `SChipInput` `SBarcodeInput` `SFilePicker` `SDatePicker` `SDatePickerYearListbox` `SDatePickerMonthListbox` `SDateRangePicker` `STimePicker` `STimeRangePicker` `SCalendar` `SListItem` `SExpansionItem` `SDraggableItem` `SImage` `SLinearProgress` `SCircleProgress` |
+| **요소** | 블록 **안에** 놓이는 컨트롤. 혼자 페이지에 서지 않는다 | `SButton` `SGhostButton` `SDropdownButton` `SSystemActionButton` `SField` `SInput` `SSearchInput` `SNumberInput` `STextarea` `SEditor` `SSelect` `SCheckbox` `SRadio` `SRadioGroup` `SRadioButton` `SSwitch` `SToggle` `SChipInput` `SBarcodeInput` `SFilePicker` `SDatePicker` `SDatePickerYearListbox` `SDatePickerMonthListbox` `SDateRangePicker` `STimePicker` `STimeRangePicker` `SCalendar` `SListItem` `SExpansionItem` `SDraggableItem` `SImage` `SLinearProgress` `SCircleProgress` |
 | **인라인** | 텍스트 흐름·셀·라벨 안에 섞인다. 혼자 블록이 되지 않는다 | `STag` `SBadge` `SIcon` `STextLink` `SChip` |
 | **레이어** | 문서 흐름 **밖**에 떠서 그려진다. 어느 층에서 띄우든 레이아웃에 영향이 없다 | `SModal` `SActionModal` `SConfirmModal` `SPopup` `SDrawer` `SPopover` `STooltip` `SPortal` `SToast` `SLoadingModal` `SLoadingContainer` `SGuide` |
 
@@ -523,6 +523,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | 라벨이 있는 일반 액션을 준다 | `SButton` | §3-5 |
 | 아이콘 하나로 뜻이 통하는 부가 조작을 준다 | `SGhostButton` | §3-5-5 |
 | 한 버튼에 여러 선택지를 매단다 | `SDropdownButton` | §3-5-4 |
+| GNB system 패널에서 한 줄짜리 행 액션을 준다 | `SSystemActionButton` | §3-5-7 |
 
 #### D. 화면을 담고 나눈다
 
@@ -1012,6 +1013,7 @@ const columns: STableColumn[] = [
 | **아이콘 하나로 뜻이 통하는 부가 조작** | **`SGhostButton`** — 라벨이 없는 아이콘 전용 버튼 (아래 3-5-5) |
 | 본문 속 이동 링크 | `STextLink` |
 | 메인 액션 + 부가 메뉴 | `SDropdownButton` |
+| **GNB system 패널의 한 줄 액션** | **`SSystemActionButton`** — 행 전체가 버튼인 표면형 (아래 3-5-7) |
 
 #### 3-5-1. 채움 버튼은 페이지당 개수 제한이 있다
 
@@ -1144,6 +1146,34 @@ const columns: STableColumn[] = [
 </div>
 ```
 
+#### 3-5-7. `SSystemActionButton` — GNB system 패널의 한 줄 액션
+
+**행 전체가 하나의 버튼**인 표면형 컨트롤이다. 아이콘 프레임 + 라벨 + 우측 액션이 한 줄에 붙고, hover 하면 표면색이 한 단계 바뀐다.
+
+| 상황 | 사용 |
+| --- | --- |
+| 페이지·모달의 일반 액션 | `SButton` — 라벨 폭만큼만 차지한다 |
+| 목록에서 항목 하나를 고르게 한다 | `SListItem` · `STree` (§3-7-6·§3-7-7) |
+| 좌측 내비게이션의 메뉴 | `SGnb` 의 `menus` (§4-1) |
+| **GNB system 패널에서 설정·연결 상태를 한 줄씩 쌓고, 그 줄을 눌러 들어가게 한다** | **`SSystemActionButton`** |
+
+**무엇이 그려지는지는 `type` 이 정한다.** 타입마다 다른 값만 `option` 으로 받으므로, 타입에 맞지 않는 `option` 은 타입 에러가 된다.
+
+| `type` | 선행 아이콘 | 라벨 | 우측 | 언제 |
+| --- | --- | --- | --- | --- |
+| `account` | `user` 고정 | `label` | 없음 | 로그인한 계정을 보여주고 계정 화면으로 보낼 때 |
+| `select` | `option.icon` (필수) | `label` | 화살표 | 눌러서 하위 화면으로 들어갈 때 |
+| `switch` | `option.icon` (필수) | `label` | `option.text` + 새로고침 | 지금 붙어 있는 대상을 갈아 끼울 때 |
+| `subSelect` | `option.icon` (필수) | `label` | `option.text` + 화살표 | 지금 선택돼 있는 값을 함께 보여줄 때 |
+| `status` | 없음 | 상태 태그(`option.color`·`option.label`) | 화살표 | 라벨 대신 상태 자체가 제목일 때 |
+
+- **`SPage` 본문에 직접 놓지 않는다.** 폭을 가득 채우는 행이라 페이지에 바로 놓으면 표처럼 보인다. GNB system 패널·`SDrawer`·`SPopover` 처럼 **좁은 폭이 정해진 자리**에 쌓는다. 행 사이 간격은 `--cmp-gnb-system-panel-gap` 이다.
+- **`color` 는 놓이는 표면을 따라간다** — 흰 면이면 `light`, 오션블루 면이면 `dark`, 네이비 면이면 `darker`. 배경과 다른 색을 고르면 버튼만 떠 보인다.
+- **상태는 default·hover 둘뿐이다.** 토큰에 selected 가 없으므로 "지금 열려 있는 항목"을 이 버튼으로 표시하지 않는다. 선택 상태가 필요한 자리면 `SGnb` 메뉴나 `SListItem`(§3-7-6) 이다.
+- **선행 아이콘이 비는 행은 없다.** `account` 는 `user` 고정, `status` 는 태그가 자리를 차지하고, 나머지는 `option.icon` 이 필수다.
+- **우측 아이콘은 `type` 이 정하므로 밖에서 바꾸지 않는다.** 화살표가 필요한데 문구가 없으면 `select`, 문구가 함께 필요하면 `subSelect` 다.
+- 높이·라운드·아이콘 크기·좌우 여백은 전부 토큰이 넣는다. 직접 주지 않는다.
+
 ### 3-6. 영역 나누기 — SDivider vs SSplitter
 
 | 상황 | 사용 |
@@ -1217,9 +1247,19 @@ const columns: STableColumn[] = [
 
 `SEditor` 는 **서식이 값의 일부일 때만** 쓴다. 값을 HTML 문자열로 주고받으므로 저장·검색·비교가 평문보다 비싸고, 화면에 다시 보여줄 때도 HTML 로 렌더해야 한다. 서식이 필요 없는 메모·사유는 `STextarea` 다 — "입력창이 커 보여서" 고르는 컴포넌트가 아니다. 반대로 공지·안내문·상품 상세처럼 **작성자가 정한 강조와 목록이 그대로 보여야 하는 글**이면 `STextarea` 로는 표현할 수 없다.
 
-`SEditor` 도 `SInput`·`STextarea` 와 같은 폼 필드다 — `label`·`hint`·`rules`·`errorMessage` 를 자기 prop 으로 받고 `SForm` 제출 검증에도 들어간다. 빈 문서는 빈 문자열로 나오므로 `required` 규칙이 그대로 걸린다. 툴바 구성은 `toolbar` 로 줄이거나 늘릴 수 있고, 서식 입력이 필요 없는 자리에 굳이 놓아야 한다면 `toolbar={false}` 가 아니라 `STextarea` 를 고른다.
+`SEditor` 도 `SInput`·`STextarea` 와 같은 폼 필드다 — `label`·`hint`·`rules`·`errorMessage` 를 자기 prop 으로 받고 `SForm` 제출 검증에도 들어간다. 빈 문서는 빈 문자열로 나오므로 `required` 규칙이 그대로 걸린다. **툴바를 끄는 길은 없다** — 서식 입력이 필요 없는 자리라면 서식 없는 `SEditor` 가 아니라 `STextarea` 를 고른다.
+
+툴바는 **프리셋 둘 중 하나뿐이다.** 기본은 쓸 수 있는 것을 모두 보이고, **`simple` 을 켜면 글자에 거는 서식만 남는다** — 목록·정렬·인용·코드·링크·이미지·구분선이 빠지고 선택했을 때 뜨는 판도 같은 범위로 줄어든다. 받은 글의 **문단 구조까지 작성자를 따라가면 곤란한 자리**(좁은 칸의 메모·사유·짧은 안내문)가 `simple` 이다. 항목을 직접 조합하는 prop 은 없다 — 화면마다 다른 툴바가 서면 그 자체가 학습 비용이 된다.
+
+본문에서 따옴표·하이픈·화살표는 **자동으로 치환된다**(`"` → `“”`, `--` → `—`, `->` → `→`). 끌 수 없으므로, 상품 코드·규격 문자열처럼 **입력한 그대로 남아야 하는 값**은 `SEditor` 본문이 아니라 `SInput` 으로 따로 받는다.
+
+툴바는 **자리를 지킨다**(고정). 긴 글을 쓰는 동안 막대가 화면 밖으로 나가지 않으므로, 툴바를 따로 감싸거나 위치를 주지 않는다.
+
+툴바에는 **글자 크기 드롭다운**과 **글자색 팔레트**가 들어 있다 — 작성자가 문단마다 크기·색을 직접 지정할 수 있고, 크기 목록 맨 위 `기본` 은 지정을 떼는 자리다. 크기 눈금은 화면 타이포(§2-1)가 아니라 워드프로세서의 눈금이라 본문보다 훨씬 큰 단계까지 있다. **눈금도 팔레트도 좁히는 prop 이 없다** — 화면마다 고를 수 있는 것이 다르면 같은 글이 어디에 붙느냐에 따라 다르게 보이기 때문이다. 그래서 **작성자가 화면 리듬을 벗어나면 곤란한 자리(상품 상세 설명·반복 노출되는 안내문 등)라면 `SEditor` 가 맞는 자리인지 먼저 본다** — 서식이 값의 일부가 아니라면 `STextarea` 다. 고른 크기·색은 저장되는 HTML 에 그대로 남아 나중에 되돌릴 수 없다.
+
+본문에는 **표**도 들어간다 — 툴바의 `표` 드롭다운에서 격자를 끌어 크기를 고르고(최대 8행 × 10열), 행·열을 늘리고, 칸을 병합한다. **열 너비는 균등 고정이고 바꿀 수 없다**: 너비를 저장하면 그 값이 px 로 박혀 작성한 화면보다 좁은 곳에서 표가 넘친다. 대신 어떤 폭에서도 표가 상자 안에 들어오도록 열을 고르게 나눈다 — 열이 많은 표는 좁은 칸에서 글자가 잘게 접히므로, **열이 넷을 넘어가는 표라면 `SEditor` 본문이 아니라 `STable` 이 맞는 자리인지 본다.** 표는 작성자가 쓰는 글의 일부일 때만 여기에 있고, 데이터를 줄 세워 보여 주는 것은 `STable` 이다.
 
-글을 선택하면 **그 위에 서식 판이 뜬다**(버블 메뉴). 툴바까지 커서를 옮기지 않고 바로 굵게·색·링크를 걸기 위한 것이라 기본으로 켜져 있고, 읽기 전용·비활성일 때는 뜨지 않는다. 판은 한 줄이라 줄바꿈하지 않으므로 **좁은 칸에 놓인 에디터라면 `bubbleMenu` 로 항목을 줄이거나 `false` 로 끈다** — 그대로 두면 필드 밖으로 넘친다. 뜨는 자리는 DS 가 잡는다, 직접 감싸거나 위치를 주지 않는다.
+글을 선택하면 **그 위에 서식 판이 뜬다**(버블 메뉴). 툴바까지 커서를 옮기지 않고 바로 굵게·색·링크를 거는 길이다. **끄고 켜는 prop 은 없다** — 편집할 수 있으면 언제나 뜨고, 읽기 전용·비활성일 때는 뜨지 않는다. 화면마다 있고 없고가 달라지면 그 자체가 학습 비용이 되기 때문이다. 판의 구성은 `simple` 이 막대와 함께 정한다. 뜨는 자리는 DS 가 잡는다, 직접 감싸거나 위치를 주지 않는다.
 
 `SEditor` 는 화면에 처음 놓일 때 **에디터 엔진을 따로 불러온다** — 앱 초기 번들에는 들어가지 않는다. 그동안은 같은 크기의 빈 편집 영역이 자리를 지키므로 레이아웃은 흔들리지 않지만, **마운트하자마자 `ref.current.getHTML()` 로 값을 읽거나 툴바를 누를 수는 없다.** 열자마자 커서를 놓고 싶으면 `ref.current.focus()` 를 그냥 부르면 된다 — 준비되는 순간 대신 실행된다.
 

package/dist/components/SChipFilter/README.md

@@ -77,14 +77,15 @@ export interface SChipFilterChangeDetail {
 
 ```ts
 /** 필터 하나의 정의. type에 따라 쓸 수 있는 속성이 달라진다 —
- *  options는 single·multi·keyword, presets·selectable·maxRange는 date·period,
- *  render는 custom 에만 있다 */
+ *  options는 select·select-multi·keyword, presets·maxRange·radioButton은
+ *  datepicker-range·datepicker-statistics, render는 custom 에만 있다 */
 export type SChipFilterField =
-  | SChipFilterSingleField
-  | SChipFilterMultiField
+  | SChipFilterSelectField
+  | SChipFilterSelectMultiField
+  | SChipFilterDatePickerDayField
+  | SChipFilterDatePickerRangeField
+  | SChipFilterDatePickerStatisticsField
   | SChipFilterKeywordField
-  | SChipFilterDateField
-  | SChipFilterPeriodField
   | SChipFilterCustomField;
 ```
 
@@ -112,21 +113,57 @@ export type SChipFilterValue =
   | undefined;
 ```
 
-### SChipFilterSingleField
+### SChipFilterSelectField
 
 ```ts
 /** 후보 하나를 고른다 */
-export interface SChipFilterSingleField extends SChipFilterOptionsField {
-  type: 'single';
+export interface SChipFilterSelectField extends SChipFilterOptionsField {
+  type: 'select';
 }
 ```
 
-### SChipFilterMultiField
+### SChipFilterSelectMultiField
 
 ```ts
 /** 후보 여럿을 고른다 */
-export interface SChipFilterMultiField extends SChipFilterOptionsField {
-  type: 'multi';
+export interface SChipFilterSelectMultiField extends SChipFilterOptionsField {
+  type: 'select-multi';
+}
+```
+
+### SChipFilterDatePickerDayField
+
+```ts
+/** 날짜 하나를 고른다 — 캘린더 트리거 하나만 놓인다. 프리셋으로 고르게 하거나 시작~종료를
+ *  받아야 하면 datepicker-range 다 */
+export interface SChipFilterDatePickerDayField extends SChipFilterFieldBase {
+  type: 'datepicker-day';
+  /** 캘린더 트리거의 placeholder */
+  placeholder?: string;
+  /** 선택 가능 범위 */
+  selectable?: [string, string];
+}
+```
+
+### SChipFilterDatePickerRangeField
+
+```ts
+/** 기간(시작~종료)을 고른다. presets를 주면 프리셋 라디오 목록으로 고르고,
+ *  주지 않으면 기간 피커 하나만 놓인다 */
+export interface SChipFilterDatePickerRangeField extends SChipFilterPresetsField {
+  type: 'datepicker-range';
+  /** presets를 필터 바에 세그먼트 라디오로 펼쳐 놓는다(팝오버 없음).
+   *  기본 false — 칩 클릭 시 팝오버 안에 세로 라디오 목록(+사용자 지정 선택 시 기간 피커) */
+  radioButton?: boolean;
+}
+```
+
+### SChipFilterDatePickerStatisticsField
+
+```ts
+/** 집계 단위(일·월·분기·반기·연)와 그 단위의 값을 함께 고른다 */
+export interface SChipFilterDatePickerStatisticsField extends SChipFilterPresetsField {
+  type: 'datepicker-statistics';
 }
 ```
 
@@ -151,29 +188,6 @@ export interface SChipFilterKeywordField extends SChipFilterOptionsField {
 }
 ```
 
-### SChipFilterDateField
-
-```ts
-/** 날짜 하나 또는 기간을 고른다 */
-export interface SChipFilterDateField extends SChipFilterPresetsField {
-  type: 'date';
-  /** presets 없이 단일 캘린더 트리거로 동작할 때의 placeholder */
-  placeholder?: string;
-  /** presets를 필터 바에 세그먼트 라디오로 펼쳐 놓는다(팝오버 없음).
-   *  기본 false — 칩 클릭 시 팝오버 안에 세로 라디오 목록(+사용자 지정 선택 시 기간 피커) */
-  radioButton?: boolean;
-}
-```
-
-### SChipFilterPeriodField
-
-```ts
-/** 집계 단위(일·월·분기·반기·연)와 그 단위의 값을 함께 고른다 */
-export interface SChipFilterPeriodField extends SChipFilterPresetsField {
-  type: 'period';
-}
-```
-
 ### SChipFilterCustomField
 
 ```ts
@@ -211,7 +225,7 @@ export interface SChipFilterKeywordValue {
 ### SChipFilterPeriodValue
 
 ```ts
-/** period 필드 값 — 선택 단위(unit)와 그 단위의 입력값(value)을 함께 보관한다 */
+/** datepicker-statistics 필드 값 — 선택 단위(unit)와 그 단위의 입력값(value)을 함께 보관한다 */
 export interface SChipFilterPeriodValue {
   unit: SChipFilterPeriodUnit;
   value?: string | number | SDateRangeValue | null;
@@ -228,35 +242,13 @@ export type SChipFilterCustomValue = Record<string, unknown>;
 ### SChipFilterOptionsField
 
 ```ts
-/** 후보 목록에서 고르는 필터 — single·multi·keyword */
+/** 후보 목록에서 고르는 필터 — select·select-multi·keyword */
 export interface SChipFilterOptionsField extends SChipFilterFieldBase {
   /** 고를 수 있는 후보 목록 */
   options?: SChipFilterOption[];
 }
 ```
 
-### SChipFilterKeywordInput
-
-```ts
-/** keyword 필드의 입력 방식 — 무엇을 키워드 하나의 끝으로 볼지 */
-export type SChipFilterKeywordInput = 'tag' | 'csv';
-```
-
-### SChipFilterPresetsField
-
-```ts
-/** 프리셋으로 기간을 고르는 필터 — date·period */
-export interface SChipFilterPresetsField extends SChipFilterFieldBase {
-  /** 프리셋 라디오 목록. date에서 지정하지 않으면 단일 캘린더 트리거로 동작하고,
-   *  period에서 지정하지 않으면 일별·월별·분기별·반기별·연도별·사용자 지정 기본 목록을 쓴다 */
-  presets?: SChipFilterDatePreset[];
-  /** 선택 가능 범위 */
-  selectable?: [string, string];
-  /** "사용자 지정" 프리셋으로 기간을 고를 때의 최대 선택 일수 */
-  maxRange?: number;
-}
-```
-
 ### SChipFilterFieldBase
 
 ```ts
@@ -273,9 +265,17 @@ export interface SChipFilterFieldBase {
    *  required도 같은 효과를 낸다 — 처음부터 바에 보이는 것은 fixed이거나 required인 필드뿐이고,
    *  나머지는 전부 "필터 추가"에서 골라야 나타난다 */
   fixed?: boolean;
-  /** 초기값 및 clearable 클릭 시 되돌아갈 값. required 여부와 무관하게 적용된다 — 값이 비어 있으면
-   *  마운트(또는 "필터 추가"로 활성화) 시 이 값이 자동으로 채워진다. required인데 지정하지 않으면
-   *  타입별 내장 기본값(single: 첫 번째 옵션, date: 오늘 날짜)을 대신 쓴다 */
+  /** 초기값 및 clearable 클릭 시 되돌아갈 값.
+   *
+   *  **`fixed` 또는 `required` 필드에서만 쓴다.** 그 외 필드에 지정하면 무시하고 콘솔에 알린다 —
+   *  뺄 수 있는 필터는 처음에 바에 없는데, 값 맵에는 기본값이 채워져 **보이지도 지울 수도 없는
+   *  조건이 검색에 걸린다.** 칩을 지워 값을 비워도 "검색 초기화"가 그 값을 되돌려 놓아 필터가
+   *  조용히 되살아난다. 처음부터 값이 정해져 있어야 하는 필터라면 그것이 `fixed`·`required` 다.
+   *
+   *  required인데 지정하지 않으면 타입별 내장 기본값(select: 첫 번째 옵션,
+   *  datepicker-day·datepicker-range: 오늘 날짜)을 대신 쓴다. 인라인(radioButton) datepicker-range
+   *  필드는 팝오버 없이 바에 바로 노출되어 빈 상태로 둘 수 없으므로, 이 규칙과 무관하게 언제나
+   *  오늘이 채워진다 */
   defaultValue?: SChipFilterValue;
   /** 이 필터만 비활성. 바에 남아 있되 팝오버가 열리지 않고 clearable도 눌리지 않는다.
    *  바 전체를 잠그려면 SChipFilterProps.disabled를 쓴다 — 둘은 OR로 합쳐진다 */
@@ -283,6 +283,28 @@ export interface SChipFilterFieldBase {
 }
 ```
 
+### SChipFilterPresetsField
+
+```ts
+/** 프리셋으로 기간을 고르는 필터 — datepicker-range·datepicker-statistics */
+export interface SChipFilterPresetsField extends SChipFilterFieldBase {
+  /** 프리셋 라디오 목록. datepicker-range에서 지정하지 않으면 프리셋 없이 기간 피커 하나만 놓이고,
+   *  datepicker-statistics에서 지정하지 않으면 일별·월별·분기별·반기별·연도별·사용자 지정 기본 목록을 쓴다 */
+  presets?: SChipFilterDatePreset[];
+  /** 선택 가능 범위 */
+  selectable?: [string, string];
+  /** "사용자 지정" 프리셋으로 기간을 고를 때의 최대 선택 일수 */
+  maxRange?: number;
+}
+```
+
+### SChipFilterKeywordInput
+
+```ts
+/** keyword 필드의 입력 방식 — 무엇을 키워드 하나의 끝으로 볼지 */
+export type SChipFilterKeywordInput = 'tag' | 'csv';
+```
+
 ### SChipFilterMatchMode
 
 ```ts
@@ -308,7 +330,7 @@ export interface SChipFilterOption {
 ### SChipFilterDatePreset
 
 ```ts
-/** date/period 필드의 프리셋 라디오 항목 (오늘/지난 7일/일별/월별/사용자 지정 등) */
+/** datepicker-range·datepicker-statistics 필드의 프리셋 라디오 항목 (오늘/지난 7일/일별/월별/사용자 지정 등) */
 export interface SChipFilterDatePreset {
   /** 프리셋 식별자 */
   value: string;
@@ -316,7 +338,8 @@ export interface SChipFilterDatePreset {
   label: string;
   /** true면 "사용자 지정" — 선택 시 날짜/기간 피커가 추가로 노출된다. resolve는 무시된다. */
   custom?: boolean;
-  /** custom이 아닐 때 실제 값을 계산한다. 단일 날짜(string) 또는 기간([start,end]) 모두 가능 */
+  /** custom이 아닐 때 실제 값을 계산한다. 단일 날짜(string) 또는 기간([start,end]) 모두 가능 —
+   *  datepicker-range 에서는 'd' 를 그 하루짜리 기간 ['d', 'd'] 와 같은 값으로 본다 */
   resolve?: () => string | SDateRangeValue;
 }
 ```

package/dist/components/SChipFilter/SChipFilter.d.ts

@@ -1,8 +1,9 @@
 import { type CSSProperties, type ReactNode } from 'react';
 import { type SDateRangeValue } from '../SDateRangePicker';
 /** 필터가 값을 받는 방식. 각 값에 대응하는 필드 인터페이스가 따로 있다 —
- *  SChipFilterSingleField·SChipFilterMultiField·SChipFilterKeywordField·
- *  SChipFilterDateField·SChipFilterPeriodField·SChipFilterCustomField */
+ *  SChipFilterSelectField·SChipFilterSelectMultiField·SChipFilterKeywordField·
+ *  SChipFilterDatePickerDayField·SChipFilterDatePickerRangeField·
+ *  SChipFilterDatePickerStatisticsField·SChipFilterCustomField */
 export type SChipFilterType = SChipFilterField['type'];
 export type SChipFilterOptionValue = string | number;
 export type SChipFilterMatchMode = 'contains' | 'exact' | 'excludes';
@@ -12,7 +13,7 @@ export interface SChipFilterOption {
     label: string;
     disabled?: boolean;
 }
-/** date/period 필드의 프리셋 라디오 항목 (오늘/지난 7일/일별/월별/사용자 지정 등) */
+/** datepicker-range·datepicker-statistics 필드의 프리셋 라디오 항목 (오늘/지난 7일/일별/월별/사용자 지정 등) */
 export interface SChipFilterDatePreset {
     /** 프리셋 식별자 */
     value: string;
@@ -20,7 +21,8 @@ export interface SChipFilterDatePreset {
     label: string;
     /** true면 "사용자 지정" — 선택 시 날짜/기간 피커가 추가로 노출된다. resolve는 무시된다. */
     custom?: boolean;
-    /** custom이 아닐 때 실제 값을 계산한다. 단일 날짜(string) 또는 기간([start,end]) 모두 가능 */
+    /** custom이 아닐 때 실제 값을 계산한다. 단일 날짜(string) 또는 기간([start,end]) 모두 가능 —
+     *  datepicker-range 에서는 'd' 를 그 하루짜리 기간 ['d', 'd'] 와 같은 값으로 본다 */
     resolve?: () => string | SDateRangeValue;
 }
 /** keyword 필드에서 matchModes 활성 시 사용하는 값 형태 — 입력해 추가한 키워드 목록 */
@@ -28,7 +30,7 @@ export interface SChipFilterKeywordValue {
     keywords: string[];
     mode: SChipFilterMatchMode;
 }
-/** period 필드 값 — 선택 단위(unit)와 그 단위의 입력값(value)을 함께 보관한다 */
+/** datepicker-statistics 필드 값 — 선택 단위(unit)와 그 단위의 입력값(value)을 함께 보관한다 */
 export interface SChipFilterPeriodValue {
     unit: SChipFilterPeriodUnit;
     value?: string | number | SDateRangeValue | null;
@@ -50,23 +52,31 @@ export interface SChipFilterFieldBase {
      *  required도 같은 효과를 낸다 — 처음부터 바에 보이는 것은 fixed이거나 required인 필드뿐이고,
      *  나머지는 전부 "필터 추가"에서 골라야 나타난다 */
     fixed?: boolean;
-    /** 초기값 및 clearable 클릭 시 되돌아갈 값. required 여부와 무관하게 적용된다 — 값이 비어 있으면
-     *  마운트(또는 "필터 추가"로 활성화) 시 이 값이 자동으로 채워진다. required인데 지정하지 않으면
-     *  타입별 내장 기본값(single: 첫 번째 옵션, date: 오늘 날짜)을 대신 쓴다 */
+    /** 초기값 및 clearable 클릭 시 되돌아갈 값.
+     *
+     *  **`fixed` 또는 `required` 필드에서만 쓴다.** 그 외 필드에 지정하면 무시하고 콘솔에 알린다 —
+     *  뺄 수 있는 필터는 처음에 바에 없는데, 값 맵에는 기본값이 채워져 **보이지도 지울 수도 없는
+     *  조건이 검색에 걸린다.** 칩을 지워 값을 비워도 "검색 초기화"가 그 값을 되돌려 놓아 필터가
+     *  조용히 되살아난다. 처음부터 값이 정해져 있어야 하는 필터라면 그것이 `fixed`·`required` 다.
+     *
+     *  required인데 지정하지 않으면 타입별 내장 기본값(select: 첫 번째 옵션,
+     *  datepicker-day·datepicker-range: 오늘 날짜)을 대신 쓴다. 인라인(radioButton) datepicker-range
+     *  필드는 팝오버 없이 바에 바로 노출되어 빈 상태로 둘 수 없으므로, 이 규칙과 무관하게 언제나
+     *  오늘이 채워진다 */
     defaultValue?: SChipFilterValue;
     /** 이 필터만 비활성. 바에 남아 있되 팝오버가 열리지 않고 clearable도 눌리지 않는다.
      *  바 전체를 잠그려면 SChipFilterProps.disabled를 쓴다 — 둘은 OR로 합쳐진다 */
     disabled?: boolean;
 }
-/** 후보 목록에서 고르는 필터 — single·multi·keyword */
+/** 후보 목록에서 고르는 필터 — select·select-multi·keyword */
 export interface SChipFilterOptionsField extends SChipFilterFieldBase {
     /** 고를 수 있는 후보 목록 */
     options?: SChipFilterOption[];
 }
-/** 프리셋으로 기간을 고르는 필터 — date·period */
+/** 프리셋으로 기간을 고르는 필터 — datepicker-range·datepicker-statistics */
 export interface SChipFilterPresetsField extends SChipFilterFieldBase {
-    /** 프리셋 라디오 목록. date에서 지정하지 않으면 단일 캘린더 트리거로 동작하고,
-     *  period에서 지정하지 않으면 일별·월별·분기별·반기별·연도별·사용자 지정 기본 목록을 쓴다 */
+    /** 프리셋 라디오 목록. datepicker-range에서 지정하지 않으면 프리셋 없이 기간 피커 하나만 놓이고,
+     *  datepicker-statistics에서 지정하지 않으면 일별·월별·분기별·반기별·연도별·사용자 지정 기본 목록을 쓴다 */
     presets?: SChipFilterDatePreset[];
     /** 선택 가능 범위 */
     selectable?: [string, string];
@@ -74,12 +84,12 @@ export interface SChipFilterPresetsField extends SChipFilterFieldBase {
     maxRange?: number;
 }
 /** 후보 하나를 고른다 */
-export interface SChipFilterSingleField extends SChipFilterOptionsField {
-    type: 'single';
+export interface SChipFilterSelectField extends SChipFilterOptionsField {
+    type: 'select';
 }
 /** 후보 여럿을 고른다 */
-export interface SChipFilterMultiField extends SChipFilterOptionsField {
-    type: 'multi';
+export interface SChipFilterSelectMultiField extends SChipFilterOptionsField {
+    type: 'select-multi';
 }
 /** keyword 필드의 입력 방식 — 무엇을 키워드 하나의 끝으로 볼지 */
 export type SChipFilterKeywordInput = 'tag' | 'csv';
@@ -99,18 +109,26 @@ export interface SChipFilterKeywordField extends SChipFilterOptionsField {
      *  기본 false — 2개(포함/일치)만 */
     excludeMode?: boolean;
 }
-/** 날짜 하나 또는 기간을 고른다 */
-export interface SChipFilterDateField extends SChipFilterPresetsField {
-    type: 'date';
-    /** presets 없이 단일 캘린더 트리거로 동작할 때의 placeholder */
+/** 날짜 하나를 고른다 — 캘린더 트리거 하나만 놓인다. 프리셋으로 고르게 하거나 시작~종료를
+ *  받아야 하면 datepicker-range 다 */
+export interface SChipFilterDatePickerDayField extends SChipFilterFieldBase {
+    type: 'datepicker-day';
+    /** 캘린더 트리거의 placeholder */
     placeholder?: string;
+    /** 선택 가능 범위 */
+    selectable?: [string, string];
+}
+/** 기간(시작~종료)을 고른다. presets를 주면 프리셋 라디오 목록으로 고르고,
+ *  주지 않으면 기간 피커 하나만 놓인다 */
+export interface SChipFilterDatePickerRangeField extends SChipFilterPresetsField {
+    type: 'datepicker-range';
     /** presets를 필터 바에 세그먼트 라디오로 펼쳐 놓는다(팝오버 없음).
      *  기본 false — 칩 클릭 시 팝오버 안에 세로 라디오 목록(+사용자 지정 선택 시 기간 피커) */
     radioButton?: boolean;
 }
 /** 집계 단위(일·월·분기·반기·연)와 그 단위의 값을 함께 고른다 */
-export interface SChipFilterPeriodField extends SChipFilterPresetsField {
-    type: 'period';
+export interface SChipFilterDatePickerStatisticsField extends SChipFilterPresetsField {
+    type: 'datepicker-statistics';
 }
 /** 칩+팝오버를 거치지 않고 바에 놓을 노드를 앱이 직접 그린다 */
 export interface SChipFilterCustomField extends SChipFilterFieldBase {
@@ -126,9 +144,9 @@ export interface SChipFilterCustomField extends SChipFilterFieldBase {
     }) => ReactNode;
 }
 /** 필터 하나의 정의. type에 따라 쓸 수 있는 속성이 달라진다 —
- *  options는 single·multi·keyword, presets·selectable·maxRange는 date·period,
- *  render는 custom 에만 있다 */
-export type SChipFilterField = SChipFilterSingleField | SChipFilterMultiField | SChipFilterKeywordField | SChipFilterDateField | SChipFilterPeriodField | SChipFilterCustomField;
+ *  options는 select·select-multi·keyword, presets·maxRange·radioButton은
+ *  datepicker-range·datepicker-statistics, render는 custom 에만 있다 */
+export type SChipFilterField = SChipFilterSelectField | SChipFilterSelectMultiField | SChipFilterDatePickerDayField | SChipFilterDatePickerRangeField | SChipFilterDatePickerStatisticsField | SChipFilterKeywordField | SChipFilterCustomField;
 export interface SChipFilterChangeDetail {
     key: string;
     value: SChipFilterValue;

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

@@ -1 +1 @@
-export { SChipFilter, type SChipFilterChangeDetail, type SChipFilterCustomField, type SChipFilterDateField, type SChipFilterDatePreset, type SChipFilterField, type SChipFilterFieldBase, type SChipFilterGroup, type SChipFilterGroupRule, type SChipFilterHandle, type SChipFilterKeywordField, type SChipFilterKeywordInput, type SChipFilterKeywordValue, type SChipFilterMatchMode, type SChipFilterMultiField, type SChipFilterOption, type SChipFilterOptionValue, type SChipFilterOptionsField, type SChipFilterPeriodField, type SChipFilterPresetsField, type SChipFilterProps, type SChipFilterSingleField, type SChipFilterType, type SChipFilterValue, type SChipFilterValueMap, } from './SChipFilter';
+export { SChipFilter, type SChipFilterChangeDetail, type SChipFilterCustomField, type SChipFilterDatePickerDayField, type SChipFilterDatePickerRangeField, type SChipFilterDatePickerStatisticsField, type SChipFilterDatePreset, type SChipFilterField, type SChipFilterFieldBase, type SChipFilterGroup, type SChipFilterGroupRule, type SChipFilterHandle, type SChipFilterKeywordField, type SChipFilterKeywordInput, type SChipFilterKeywordValue, type SChipFilterMatchMode, type SChipFilterOption, type SChipFilterOptionValue, type SChipFilterOptionsField, type SChipFilterPresetsField, type SChipFilterProps, type SChipFilterSelectField, type SChipFilterSelectMultiField, type SChipFilterType, type SChipFilterValue, type SChipFilterValueMap, } from './SChipFilter';

package/dist/components/SDraggableList/README.md

@@ -71,6 +71,7 @@ export interface SDraggableGroupMoveEvent {
 export interface SDraggableListRenderState {
   onDragHandleMouseDown: (event: MouseEvent<HTMLDivElement>) => void;
   selected: boolean;
+  disabled: boolean;
   depth: number;
 }
 ```

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

@@ -3,6 +3,7 @@ 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';

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

@@ -1,5 +1,5 @@
 import { type CSSProperties, type RefObject } from 'react';
-import { type SEditorColorOption, type SEditorToolbarItem } from './editor.config';
+import { type SEditorToolbarItem } from './editor.config';
 import type { SEditorHandle } from './SEditor';
 import type { TiptapApi } from './tiptap-api';
 export interface EditorBodyProps {
@@ -15,17 +15,13 @@ export interface EditorBodyProps {
     /** 에디터 인스턴스가 생겼다 — 껍데기가 밀린 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[];
+    toolbar: SEditorToolbarItem[];
+    /** 선택 영역 위에 뜨는 서식 판 — 편집할 수 있으면 언제나 뜬다 (SEditor 주석 참고) */
+    bubbleMenu: SEditorToolbarItem[];
     onImageUpload?: (file: File) => Promise<string>;
     editorClass?: string;
     editorStyle?: CSSProperties;

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;
 /**
  * 버블 메뉴 — 글을 선택하면 그 위에 서식 판이 뜬다.
  *