sellmate-design-system-react 9.0.0-beta.9 → 9.0.0-beta.91

package/dist/components/SGnbSystem/SGnbSystem.d.ts

@@ -0,0 +1,179 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type SAccountListBoxContent } from '../SAccountListBox';
+import { type SSystemActionButtonProps } from '../SSystemActionButton';
+import { type SGnbSystemColor } from './gnbSystem.config';
+/** 유니온을 유지한 채 키를 걷어낸다 — 그냥 Omit 하면 판별 유니온이 한 덩어리로 뭉개진다. */
+type DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;
+/**
+ * 패널 상단에 쌓이는 행 하나. `SSystemActionButton` 의 props 를 그대로 받는다 —
+ * 단 `color` 는 패널이 정하므로 받지 않고, 목록 key 로 쓸 `value` 만 더한다.
+ *
+ * `type: 'account'` 는 받지 않는다. 계정 행은 이 패널에 **하나뿐**이고 서는 자리도 맨 아래로
+ * 정해져 있어(§3-5-8) `account` prop 이 따로 있다 — 여기로도 받으면 계정 행이 둘인 패널이
+ * 만들어지고, 그중 하나는 자리가 틀린다.
+ */
+export type SGnbSystemAction = DistributiveOmit<Exclude<SSystemActionButtonProps, {
+    type: 'account';
+}>, 'color'> & {
+    /** 목록 key. 없으면 순서를 key 로 쓴다 */
+    value?: string;
+};
+/** 알림 버튼 */
+export interface SGnbSystemAlert {
+    /** 라벨 텍스트. 기본 `'알림'` */
+    label?: string;
+    /**
+     * 읽지 않은 알림 개수. 1 이상이면 벨이 울리는 아이콘·강조색으로 바뀌고 개수가 붙는다.
+     * 개수를 적을 가로가 모자란 자리(접힌 레일 · 기본 폭보다 좁게 줄인 판)에서는 점 배지로 바뀐다.
+     * 표기는 컴포넌트가 맡는다 — 세 자리마다 콤마를 넣어 그리므로 앱이 포맷한 문자열을 넘기지 않는다.
+     */
+    count?: number;
+    /** 클릭 */
+    onClick?: () => void;
+    /**
+     * 알림 버튼에 붙는 안내 툴팁의 문구(한 줄이 한 항목). 주면 뜬다 — **문구만 앱이 정하고**
+     * 색·방향·여닫힘은 컴포넌트가 쥔다: 색은 판이 light 면 기본, 그 밖(dark·상단바)이면 강조색이고
+     * 방향은 자리가 정한다(판·접힌 레일이면 오른쪽, 상단바면 아래).
+     *
+     * 스스로 사라지지 않는다 — **알림 버튼을 누르거나, 버튼에 얹었다 커서를 뺄 때** 닫히고,
+     * 같은 값을 계속 넘기는 동안에는 다시 뜨지 않는다.
+     *
+     * **다시 띄우려면 비웠다가 다시 넘긴다**(`undefined` → 문구). 문구가 같아도 상관없다 —
+     * 컴포넌트는 닫았다는 사실만 기억하고 문구 내용은 기억하지 않으므로, 새 알림마다 같은 안내를
+     * 다시 띄우는 화면도 막히지 않는다.
+     */
+    tooltip?: string[];
+    /**
+     * 알림을 누르면 뜨는 목록의 **내용**. 주면 컴포넌트가 알림 버튼에 붙여 띄운다 —
+     * 목록에 무엇을 쌓을지는 서비스마다 다르지만 **뜨는 자리는 늘 같아야 하므로**, 방향·앵커·
+     * 여닫힘(바깥 클릭·ESC 포함)과 배경·라운드·그림자는 컴포넌트가 쥐고 앱은 안에 담을 것만 준다.
+     * 방향은 자리가 정한다 — 판·접힌 레일이면 버튼 오른쪽, 상단바면 아래.
+     */
+    listBox?: ReactNode;
+    /**
+     * 알림 목록이 열리고 닫힐 때. 여닫는 것은 알림 버튼이 스스로 하므로 **그 사실을 알아야 할
+     * 때만** 준다(연 김에 읽음 처리하거나, 열려 있는 동안 다른 층을 접어 두는 화면).
+     *
+     * 앱이 누르지 않은 닫힘도 온다: GNB 를 접거나 펴면 알림 버튼이 다른 자리로 옮겨 서므로
+     * 목록이 닫히고 `false` 가 온다(계정 행과 같다).
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * 안내 툴팁이 닫힐 때. 받아서 `tooltip` 을 비워 두는 것이 기본 사용법이다 — 그러면 앱이
+     * 다음에 넘기는 문구가 곧 다음 안내가 된다.
+     *
+     * 컴포넌트가 아는 "다시 뜨지 않는다" 는 **이 자리가 서 있는 동안**뿐이라(새로고침하거나
+     * GNB 를 접어 알림이 다른 자리로 옮겨 서면 새로 마운트된다), 그 사용자에게 두 번 다시 보이지
+     * 않아야 하면 앱이 이 신호를 저장해 두고 `tooltip` 을 그만 넘긴다.
+     */
+    onTooltipDismiss?: () => void;
+}
+/** 설정 버튼 */
+export interface SGnbSystemSetting {
+    /** 라벨 텍스트. 기본 `'설정'` */
+    label?: string;
+    /** 클릭 */
+    onClick?: () => void;
+}
+/** 계정 행 */
+export interface SGnbSystemAccount {
+    /** 계정 이름 */
+    label?: string;
+    /** 클릭. 패널은 어차피 열리므로, 여는 것 말고 따로 할 일이 있을 때만 준다 */
+    onClick?: () => void;
+    /**
+     * 계정 리스트박스가 열리고 닫힐 때. 여닫는 것은 계정 행이 스스로 하므로 **그 사실을 알아야 할
+     * 때만** 준다 — 열려 있는 동안 다른 층을 접어 두거나, 연 것을 기록하는 화면이 그렇다.
+     *
+     * 앱이 누르지 않은 닫힘도 온다: `header="fix"` 에서 GNB 를 접거나 펴면 계정 행이 다른 자리로
+     * 옮겨 서므로 패널이 닫히고 `false` 가 온다.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * 누르면 뜨는 계정 리스트박스(`SAccountListBox`) 내용. **필수다** — 계정 행은 늘 이 패널의
+     * 트리거이고, 눌러도 아무것도 뜨지 않는 계정 행은 없다.
+     * 뜨는 방향은 패널이 놓인 자리가 정하므로 앱이 넘기지 않는다.
+     */
+    listBox: SAccountListBoxContent;
+}
+export interface SGnbSystemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
+    /**
+     * 색상(패널 표면). light = 흰 면, dark = 오션블루 면.
+     * 미지정 시 자기를 담은 SGnb 의 color 를 따른다(단독으로 쓰면 `'light'`).
+     */
+    color?: SGnbSystemColor;
+    /**
+     * 접힌(min) 형태 — 48px 레일 폭에 맞춰 알림·계정 아이콘만 남는다.
+     * 미지정 시 자기를 담은 SGnb 의 접힘 상태를 따른다. 상단바 자리에서는 뜻이 없다.
+     */
+    folded?: boolean;
+    /**
+     * 행 목록. 각 원소는 `SSystemActionButton` 의 props 다(`color` 제외 · 계정 행은 `account` 로
+     * 따로 준다). 판에서는 맨 위에 쌓이고,
+     * 상단바에서는 맨 왼쪽에 선다. 옆(아래)에 다른 조각이 있으면 그 사이에 구분선이 그어진다.
+     * 접히면 자리가 없어 렌더되지 않는다.
+     */
+    actions?: SGnbSystemAction[];
+    /** 도메인 태그 텍스트. 접히면 자리가 없어 렌더되지 않는다 */
+    domain?: string;
+    /**
+     * 알림 버튼. 없으면 렌더하지 않는다. 판에서는 설정과 나란히 서면 남는 폭을 먹고 혼자면 폭을 다 먹는다.
+     * 상단바에서는 자리가 넉넉하지 않아 라벨 없이 아이콘+개수만 선다.
+     */
+    alert?: SGnbSystemAlert;
+    /**
+     * 설정 버튼. 없으면 렌더하지 않는다. 판에서는 알림과 나란히 서면 제 폭만 갖고 혼자면 폭을 다 먹고,
+     * 상단바에서는 라벨 없이 아이콘만 선다.
+     * 접히면 자리가 없어 렌더되지 않는다 — 접힌 상태에서도 닿아야 하면 SGnb 의 `foldedFooter` 에 둔다.
+     */
+    setting?: SGnbSystemSetting;
+    /** 계정 행. 없으면 렌더하지 않는다 */
+    account?: SGnbSystemAccount;
+}
+/**
+ * SGnbSystem — GNB 의 system 조각들(액션 · 도메인 · 알림 · 설정 · 계정).
+ *
+ * 어디에 놓이느냐로 두 형태가 있고, 그 자리는 담은 SGnb 의 `header` 가 정해 내려준다(앱이 고르지 않는다).
+ * - `panel` (header="fix") — GNB 바닥에 깔리는 세로 판. 위에서부터 [행 목록(`actions`)] · 구분선 ·
+ *   [도메인 태그] · [알림 | 설정] · [계정] 을 쌓는다.
+ * - `top` (header="full") — 레이아웃 전폭 상단바의 오른쪽 끝에 서는 가로 한 줄.
+ *   [행 목록] | [알림] | [설정] | [도메인 계정] 순으로 서고 조각 사이에 세로 구분선이 놓인다
+ *   (도메인·계정은 한 덩어리라 그 사이만 선 없이 붙는다).
+ *
+ * 각 조각은 해당 prop 을 줄 때만 나타나므로, 서비스마다 필요한 만큼만 켜서 쓴다 — 계정만, 알림만,
+ * 설정만, 알림+계정 … 어떤 부분집합이어도 그 조합만으로 판이 성립하도록 다음을 지킨다.
+ *
+ * - **구분선은 양쪽에 내용이 있을 때만** 긋는다. `actions` 만 주면 뜻 없는 선이 남지 않는다.
+ * - **판에서 알림·설정은 혼자 서면 폭을 다 먹는다.** 둘이 나란히 서면 알림이 남는 폭을, 설정이 제 폭을
+ *   갖고 사이에 세로선이 놓인다. 어느 쪽이 빠져도 왼쪽 끝은 위아래 행과 맞는다.
+ * - **켜진 조각이 하나도 없으면 아무것도 렌더하지 않는다** — 빈 판은 GNB 바닥에 정체 모를 경계선만 남긴다.
+ *
+ * 판에서 알림·설정·계정은 늘 함께 붙어 다니는 한 덩어리라 사이를 띄우지 않고, 그 위 조각들만 간격을 갖는다.
+ * 상단바에서는 자리가 가로로 넉넉하지 않아 알림·설정이 라벨을 벗고 아이콘(+개수)만 남는다.
+ *
+ * `folded` 면 48px 레일 폭에 맞춘 min 형태가 된다 — **알림·계정 아이콘만** 남고 라벨·태그·행 목록·설정은
+ * 빠진다(시안). 알림 개수는 적을 자리가 없어 점 배지로 바뀐다. 둘 다 없는 조합(설정만 쓰는 앱 등)이면
+ * 접힌 패널은 렌더되지 않으므로, 접힌 상태에서도 닿아야 하는 것은 SGnb 의 `foldedTop`·`foldedFooter` 에 둔다.
+ * 상단바는 접어도 남으므로 `top` 에는 접힘 형태가 없다.
+ *
+ * `alert.count` 가 1 이상이면 벨이 울리는 아이콘(`bellRinging`)과 강조색으로 바뀐다 — light 는 파랑,
+ * 어두운 면은 노랑(토큰이 정한다). 0 이거나 없으면 조용한 벨(`bell`)에 기본 색이다.
+ *
+ * 안내 툴팁(`alert.tooltip`)은 문구를 받은 동안 떠 있다가 알림을 누르거나 커서를 빼면 닫힌다.
+ * 다시 띄우는 신호는 문구가 **없음 → 있음** 으로 바뀌는 것이라, 같은 문구도 비웠다 다시 넘기면
+ * 새 안내로 뜬다.
+ *
+ * 판이 **메뉴 기본 폭보다 좁으면**(GNB 의 `resizable` 로 줄인 컬럼) 알림 개수를 적을 가로가
+ * 모자라 접힘과 같은 점 배지로 바뀐다 — 숫자가 설정 버튼을 밀어내거나 잘리는 대신, 알림이
+ * 있다는 사실만 남긴다. 좁은지는 담은 SGnb 가 내려주므로 앱이 고르는 prop 이 없다.
+ *
+ * 색은 놓인 면을 따른다: 판 위는 `light`/`dark`(오션블루 판), 판 없이 상단바 면에 바로 얹는 `top` 의
+ * dark 는 한 단계 어두운 `darker`(네이비) 색표다 — GNB_SYSTEM_TOP_COLOR_CONFIG 가 그 대응을 쥔다.
+ *
+ * **놓이는 자리(`placement`)는 prop 이 아니다** — 자기를 담은 SGnb 가 `header` 로 정해 내려준다.
+ * 앱이 고르면 세로 판 자리에 가로 한 줄이 서는 조합이 만들어지고, 그것을 고를 이유가 있는 화면은 없다.
+ * `color`·`folded` 도 슬롯 안에서는 GNB 가 내려주므로 다시 넘기지 않는다.
+ * 판은 폭이 늘 부모를 가득 채우고, 상단바 줄은 내용 폭만 갖는다.
+ */
+export declare const SGnbSystem: import("react").ForwardRefExoticComponent<SGnbSystemProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/SGnbSystem/gnbSystem.config.d.ts

@@ -0,0 +1,122 @@
+import type { SSystemActionButtonColor } from '../SSystemActionButton';
+/**
+ * SGnbSystem 설정.
+ *
+ * 토큰은 GNB system 패널 한 벌(`--cmp-gnb-system-*`)이다.
+ *   패널(배경·경계·구분선·간격)      → --cmp-gnb-system-panel-*
+ *   도메인 태그                       → --cmp-gnb-system-domainTag-*
+ *   행 공통(높이·라운드·아이콘 프레임) → --cmp-gnb-system-item-*        (SSystemActionButton 과 공유)
+ *   알림 버튼                         → --cmp-gnb-system-alertButton-*
+ *   설정 버튼                         → --cmp-gnb-system-setting-*
+ *   펼침·접힘 패널 여백                → --cmp-gnb-system-project-padding · --cmp-gnb-system-min-padding
+ *
+ * 타이포그래피는 CSS 변수가 아니라 `.typo-*` 프리셋으로 나온다.
+ *   domainTag.typography      → typo-body-sm-medium   (12/500/20)
+ *   item.label.typography     → typo-body-sm-semibold (12/600/20)
+ *   alertButton.count         → typo-body-md-bold     (13/700/22)
+ */
+/** 색상(표면). light = 흰 면, dark = 오션블루 면. GNB 의 color 를 그대로 따라간다 */
+export declare const GNB_SYSTEM_COLORS: readonly ["light", "dark"];
+export type SGnbSystemColor = (typeof GNB_SYSTEM_COLORS)[number];
+/**
+ * 조각들이 놓이는 자리. GNB 의 `header` 가 정하므로 앱이 고르지 않는다.
+ * - `panel` — GNB 바닥에 깔리는 세로 판 (header="fix"). 접히면 48px 레일용 min 형태가 된다.
+ * - `top`   — 레이아웃 전폭 상단바 위 (header="full"). 판을 깔지 않고 가로 한 줄로 선다.
+ */
+export declare const GNB_SYSTEM_PLACEMENTS: readonly ["panel", "top"];
+export type SGnbSystemPlacement = (typeof GNB_SYSTEM_PLACEMENTS)[number];
+/**
+ * 패널 색이 곧 행 색이다 — 행(아이콘 프레임·라벨·hover)은 SSystemActionButton 과 같은
+ * `--cmp-gnb-system-item-*` 토큰을 쓰므로, 그 색표를 그대로 빌려 두 컴포넌트가 어긋나지 않게 한다.
+ * `darker`(판 없이 어두운 GNB 면에 바로 얹는 색)는 판을 깔지 않는 `top` 자리가 쓴다
+ * → GNB_SYSTEM_TOP_COLOR_CONFIG.
+ */
+export type GnbSystemItemColor = SSystemActionButtonColor;
+export interface GnbSystemColorTokens {
+    /** 패널 배경 */
+    bg: string;
+    /**
+     * 패널 위쪽 경계 (GNB 본문과 나누는 선). 배경만으로 경계가 읽히는 색에서는 없다.
+     * 토큰에는 light·dark 모두 정의돼 있지만, dark 는 시안이 선을 긋지 않는다 — 아래 주석 참고.
+     */
+    border?: string;
+    /** 패널 안 구분선 (가로 divider · 알림↔설정 세로선) */
+    divider: string;
+    /** 도메인 태그 배경 */
+    domainBg: string;
+    /** 도메인 태그 글자색 */
+    domainText: string;
+    /** 알림이 있을 때의 벨 글리프색 */
+    alertIcon: string;
+    /** 알림 개수(펼침) · 점 배지(접힘) 색 */
+    alertCount: string;
+    /** 알림이 있을 때의 hover 배경. 없으면 행 기본 hover 를 쓴다 */
+    alertHoverBg?: string;
+}
+export declare const GNB_SYSTEM_COLOR_CONFIG: Record<SGnbSystemColor, GnbSystemColorTokens>;
+/**
+ * `top` 자리(전폭 상단바)의 색.
+ *
+ * 상단바에는 판을 깔지 않고 조각을 GNB 면에 바로 얹는다 — 그래서 행 색이 패널과 한 단계 다르다.
+ * dark 는 패널의 오션블루(`dark`)가 아니라 GNB 네이비 면용 `darker` 를 쓰고, 구분선·도메인 태그도
+ * 그에 맞춘 `*-darker-*` 토큰을 쓴다. 알림 강조색은 darker 대응 토큰이 없어 dark 값을 그대로 쓴다
+ * (두 면 모두 어두운 면이라 같은 노랑이 맞는다).
+ */
+export interface GnbSystemTopColorTokens {
+    /** 조각(액션·알림·설정·계정)이 쓰는 행 색 */
+    item: GnbSystemItemColor;
+    /** 조각 사이 세로 구분선 */
+    divider: string;
+    /** 도메인 태그 배경 */
+    domainBg: string;
+    /** 도메인 태그 글자색 */
+    domainText: string;
+    /** 알림이 있을 때의 벨 글리프색 */
+    alertIcon: string;
+    /** 알림 개수 색 */
+    alertCount: string;
+    /** 알림이 있을 때의 hover 배경. 없으면 행 기본 hover 를 쓴다 */
+    alertHoverBg?: string;
+}
+export declare const GNB_SYSTEM_TOP_COLOR_CONFIG: Record<SGnbSystemColor, GnbSystemTopColorTokens>;
+/** 치수 — 전부 토큰 참조 */
+export declare const GNB_SYSTEM_LAYOUT: {
+    /** 펼친 패널의 안쪽 여백 */
+    readonly padding: "var(--cmp-gnb-system-project-padding)";
+    /** 접힌(min) 패널의 안쪽 여백 */
+    readonly foldedPadding: "var(--cmp-gnb-system-min-padding)";
+    /**
+     * 패널이 쌓는 블록 사이 간격. 알림↔설정 사이의 가로 간격도 전용 토큰이 없어 이 값을 쓴다
+     * (시안에서 두 간격이 같다).
+     */
+    readonly gap: string;
+    /** 행 높이 */
+    readonly itemHeight: string;
+    /** 행 라운드 */
+    readonly itemRadius: string;
+    /** 아이콘 프레임 한 변 */
+    readonly iconFrame: string;
+    /** 아이콘 글리프 크기 */
+    readonly iconGlyph: string;
+    /** 아이콘 프레임 라운드 */
+    readonly iconRadius: string;
+    /** 아이콘 프레임 ↔ 라벨 간격 */
+    readonly iconLabelGap: string;
+    /** 알림 버튼 좌우 여백 */
+    readonly alertPaddingX: string;
+    /** 설정 버튼 좌우 여백 */
+    readonly settingPaddingX: "var(--cmp-gnb-system-setting-paddingX)";
+    /** 도메인 태그 */
+    readonly domainPaddingX: string;
+    readonly domainPaddingY: string;
+    readonly domainRadius: string;
+};
+/**
+ * 알림 점 배지 지름(px). 접힌 패널에는 개수를 적을 자리가 없어 점만 찍는다.
+ * 전용 토큰이 없어 시안 값을 상수로 둔다.
+ */
+export declare const GNB_SYSTEM_ALERT_DOT_SIZE = 6;
+/** 알림 버튼 기본 라벨 */
+export declare const GNB_SYSTEM_ALERT_LABEL = "\uC54C\uB9BC";
+/** 설정 버튼 기본 라벨 */
+export declare const GNB_SYSTEM_SETTING_LABEL = "\uC124\uC815";

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

@@ -0,0 +1,2 @@
+export { SGnbSystem, type SGnbSystemProps, type SGnbSystemAction, type SGnbSystemAlert, type SGnbSystemSetting, type SGnbSystemAccount, } from './SGnbSystem';
+export { GNB_SYSTEM_COLORS, GNB_SYSTEM_COLOR_CONFIG, GNB_SYSTEM_LAYOUT, GNB_SYSTEM_PLACEMENTS, GNB_SYSTEM_TOP_COLOR_CONFIG, type SGnbSystemColor, type SGnbSystemPlacement, type GnbSystemColorTokens, type GnbSystemTopColorTokens, } from './gnbSystem.config';

package/dist/components/SGuide/README.md

@@ -13,10 +13,25 @@
 | `message?` | `SGuideMessage` | `''` | 팝업 메시지 (배열이면 리스트, 중첩 배열이면 depth 표현) |
 | `url?` | `string` | `''` | notion 타입 클릭 시 이동 URL |
 | `popupTitle?` | `string` | `''` | 팝업 제목 (없으면 type 기본값) |
-| `popupWidth?` | `number` | — | 팝업 너비 (px, 기본 426). 창보다 넓게 줘도 창 폭까지만 벌어진다. |
+| `popupWidth?` | `number \| 'auto'` | `'auto'` | 팝업 너비. 기본 `'auto'` 는 내용 폭에 맞춘다 — 가장 긴 줄이 곧 팝업 폭이다. 숫자(px)를 주면 그 폭으로 고정한다. 어느 쪽이든 창 좌우에 여백을 남기는 선까지만 벌어진다. |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
 
+## Types
+
+### SGuideType
+
+```ts
+export type SGuideType = 'tip' | 'notion';
+```
+
+### SGuideMessage
+
+```ts
+/** 중첩 배열로 depth 표현 (원본 renderListItem 대응). 예: ['상위', ['하위1', '하위2']] */
+export type SGuideMessage = string | SGuideMessage[];
+```
+
 ## Dependencies
 
 ### Depends on

package/dist/components/SGuide/SGuide.d.ts

@@ -13,8 +13,11 @@ export interface SGuideProps {
     url?: string;
     /** 팝업 제목 (없으면 type 기본값) */
     popupTitle?: string;
-    /** 팝업 너비 (px, 기본 426). 창보다 넓게 줘도 창 폭까지만 벌어진다. */
-    popupWidth?: number;
+    /**
+     * 팝업 너비. 기본 `'auto'` 는 내용 폭에 맞춘다 — 가장 긴 줄이 곧 팝업 폭이다.
+     * 숫자(px)를 주면 그 폭으로 고정한다. 어느 쪽이든 창 좌우에 여백을 남기는 선까지만 벌어진다.
+     */
+    popupWidth?: number | 'auto';
     className?: string;
     style?: CSSProperties;
 }

package/dist/components/SIcon/README.md

@@ -20,24 +20,32 @@
 
 ### Used by
 
+ - [SAccountListBox](../SAccountListBox)
  - [SButton](../SButton)
  - [SCallout](../SCallout)
+ - [SChatAttachedFile](../SChatAttachedFile)
+ - [SChatFile](../SChatFile)
+ - [SChatMessage](../SChatMessage)
  - [SCheckbox](../SCheckbox)
  - [SChipFilter](../SChipFilter)
  - [SChipInput](../SChipInput)
  - [SConfirmModal](../SConfirmModal)
+ - [SContextAlert](../SContextAlert)
  - [SDatePicker](../SDatePicker)
  - [SDateRangePicker](../SDateRangePicker)
  - [SDraggableItem](../SDraggableItem)
  - [SDropdownButton](../SDropdownButton)
+ - [SEditor](../SEditor)
  - [SExpansionItem](../SExpansionItem)
  - [SField](../SField)
  - [SFilePicker](../SFilePicker)
  - [SGhostButton](../SGhostButton)
  - [SGnb](../SGnb)
+ - [SGnbSystem](../SGnbSystem)
  - [SGuide](../SGuide)
  - [SImage](../SImage)
  - [SKeyValueTable](../SKeyValueTable)
+ - [SLauncherListBox](../SLauncherListBox)
  - [SListItem](../SListItem)
  - [SLoadingModal](../SLoadingModal)
  - [SNumberInput](../SNumberInput)
@@ -47,6 +55,7 @@
  - [SSectionHeaderCard](../SSectionHeaderCard)
  - [SSelect](../SSelect)
  - [SStepper](../SStepper)
+ - [SSystemActionButton](../SSystemActionButton)
  - [STable](../STable)
  - [STag](../STag)
  - [STextLink](../STextLink)
@@ -59,24 +68,32 @@
 
 ```mermaid
 graph TD;
+  SAccountListBox --> SIcon
   SButton --> SIcon
   SCallout --> SIcon
+  SChatAttachedFile --> SIcon
+  SChatFile --> SIcon
+  SChatMessage --> SIcon
   SCheckbox --> SIcon
   SChipFilter --> SIcon
   SChipInput --> SIcon
   SConfirmModal --> SIcon
+  SContextAlert --> SIcon
   SDatePicker --> SIcon
   SDateRangePicker --> SIcon
   SDraggableItem --> SIcon
   SDropdownButton --> SIcon
+  SEditor --> SIcon
   SExpansionItem --> SIcon
   SField --> SIcon
   SFilePicker --> SIcon
   SGhostButton --> SIcon
   SGnb --> SIcon
+  SGnbSystem --> SIcon
   SGuide --> SIcon
   SImage --> SIcon
   SKeyValueTable --> SIcon
+  SLauncherListBox --> SIcon
   SListItem --> SIcon
   SLoadingModal --> SIcon
   SNumberInput --> SIcon
@@ -86,6 +103,7 @@ graph TD;
   SSectionHeaderCard --> SIcon
   SSelect --> SIcon
   SStepper --> SIcon
+  SSystemActionButton --> SIcon
   STable --> SIcon
   STag --> SIcon
   STextLink --> SIcon

package/dist/components/SIcon/SIcon.d.ts

@@ -17,6 +17,6 @@ export interface SIconProps {
 }
 /**
  * SIcon — sd-icon 포팅.
- * 94개 SVG(icons.gen.tsx)를 currentColor 기반으로 렌더한다.
+ * icons.gen.tsx 의 SVG 를 currentColor 기반으로 렌더한다.
  */
 export declare const SIcon: import("react").ForwardRefExoticComponent<SIconProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/SIcon/icons.gen.d.ts

@@ -3,9 +3,15 @@ export type IconRenderProps = {
     size?: number | string;
 } & SVGProps<SVGSVGElement>;
 export declare const ICONS: {
+    readonly account: (p: IconRenderProps) => import("react").JSX.Element;
     readonly add: (p: IconRenderProps) => import("react").JSX.Element;
     readonly alert: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly alignCenter: (p: IconRenderProps) => import("react").JSX.Element;
     readonly alignKorean: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly alignLeft: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly alignMiddle: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly alignRight: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly alignTop: (p: IconRenderProps) => import("react").JSX.Element;
     readonly archive: (p: IconRenderProps) => import("react").JSX.Element;
     readonly arrowDown: (p: IconRenderProps) => import("react").JSX.Element;
     readonly arrowLeft: (p: IconRenderProps) => import("react").JSX.Element;
@@ -13,8 +19,10 @@ export declare const ICONS: {
     readonly arrowUp: (p: IconRenderProps) => import("react").JSX.Element;
     readonly asterisk: (p: IconRenderProps) => import("react").JSX.Element;
     readonly attachFile: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly back: (p: IconRenderProps) => import("react").JSX.Element;
     readonly barcode: (p: IconRenderProps) => import("react").JSX.Element;
     readonly bell: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly bellRinging: (p: IconRenderProps) => import("react").JSX.Element;
     readonly bill: (p: IconRenderProps) => import("react").JSX.Element;
     readonly board: (p: IconRenderProps) => import("react").JSX.Element;
     readonly box: (p: IconRenderProps) => import("react").JSX.Element;
@@ -25,6 +33,7 @@ export declare const ICONS: {
     readonly caretLeft: (p: IconRenderProps) => import("react").JSX.Element;
     readonly caretRight: (p: IconRenderProps) => import("react").JSX.Element;
     readonly caretUp: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly chat: (p: IconRenderProps) => import("react").JSX.Element;
     readonly check: (p: IconRenderProps) => import("react").JSX.Element;
     readonly checkFill: (p: IconRenderProps) => import("react").JSX.Element;
     readonly checkOutline: (p: IconRenderProps) => import("react").JSX.Element;
@@ -39,28 +48,36 @@ export declare const ICONS: {
     readonly clockFill: (p: IconRenderProps) => import("react").JSX.Element;
     readonly clockOutline: (p: IconRenderProps) => import("react").JSX.Element;
     readonly close: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly company: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly connect: (p: IconRenderProps) => import("react").JSX.Element;
     readonly copy: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly counsel: (p: IconRenderProps) => import("react").JSX.Element;
     readonly coupon: (p: IconRenderProps) => import("react").JSX.Element;
     readonly dashboard: (p: IconRenderProps) => import("react").JSX.Element;
     readonly date: (p: IconRenderProps) => import("react").JSX.Element;
-    readonly delete: (p: IconRenderProps) => import("react").JSX.Element;
     readonly dot: (p: IconRenderProps) => import("react").JSX.Element;
     readonly download: (p: IconRenderProps) => import("react").JSX.Element;
     readonly drag: (p: IconRenderProps) => import("react").JSX.Element;
     readonly edit: (p: IconRenderProps) => import("react").JSX.Element;
     readonly etc: (p: IconRenderProps) => import("react").JSX.Element;
     readonly event: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly focus: (p: IconRenderProps) => import("react").JSX.Element;
     readonly global: (p: IconRenderProps) => import("react").JSX.Element;
     readonly helpFill: (p: IconRenderProps) => import("react").JSX.Element;
     readonly helpOutline: (p: IconRenderProps) => import("react").JSX.Element;
     readonly history: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly home: (p: IconRenderProps) => import("react").JSX.Element;
     readonly image: (p: IconRenderProps) => import("react").JSX.Element;
     readonly inline: (p: IconRenderProps) => import("react").JSX.Element;
     readonly launcher: (p: IconRenderProps) => import("react").JSX.Element;
     readonly leftRight: (p: IconRenderProps) => import("react").JSX.Element;
     readonly line: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly link: (p: IconRenderProps) => import("react").JSX.Element;
     readonly location: (p: IconRenderProps) => import("react").JSX.Element;
     readonly logout: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly megaphone: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly messageClose: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly messageOpen: (p: IconRenderProps) => import("react").JSX.Element;
     readonly minus: (p: IconRenderProps) => import("react").JSX.Element;
     readonly monitor: (p: IconRenderProps) => import("react").JSX.Element;
     readonly new: (p: IconRenderProps) => import("react").JSX.Element;
@@ -76,6 +93,7 @@ export declare const ICONS: {
     readonly reset: (p: IconRenderProps) => import("react").JSX.Element;
     readonly robot: (p: IconRenderProps) => import("react").JSX.Element;
     readonly row: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly rowDense: (p: IconRenderProps) => import("react").JSX.Element;
     readonly save: (p: IconRenderProps) => import("react").JSX.Element;
     readonly search: (p: IconRenderProps) => import("react").JSX.Element;
     readonly send: (p: IconRenderProps) => import("react").JSX.Element;
@@ -84,6 +102,7 @@ export declare const ICONS: {
     readonly shield: (p: IconRenderProps) => import("react").JSX.Element;
     readonly sidebar: (p: IconRenderProps) => import("react").JSX.Element;
     readonly star: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly stop: (p: IconRenderProps) => import("react").JSX.Element;
     readonly store: (p: IconRenderProps) => import("react").JSX.Element;
     readonly synchronize: (p: IconRenderProps) => import("react").JSX.Element;
     readonly thumbsDown: (p: IconRenderProps) => import("react").JSX.Element;

package/dist/components/SImage/README.md

@@ -15,10 +15,13 @@
 | `position?` | `string` | `'50% 50%'` | 이미지 정렬 위치 (object-position) |
 | `loading?` | `'lazy' \| 'eager'` | `'lazy'` | 브라우저 로딩 방식 |
 | `loadingShowDelay?` | `number` | `0` | 스피너를 띄우기까지 기다리는 시간(ms). 이 시간 안에 로드되면 스피너를 아예 그리지 않는다 — 캐시된 이미지에서 스피너가 한 프레임 번쩍이는 것을 막는다. |
-| `noSpinner?` | `boolean` | `false` | 로딩 중에도 스피너를 그리지 않는다 |
+| `showSpinner?` | `boolean` | `true` | 로딩 중 스피너를 그릴지. 끄면 `loadingSlot` 도 없을 때 로딩 표시가 아무것도 남지 않는다. |
 | `loadingSlot?` | `ReactNode` | — | 로딩 중 표시를 직접 지정한다 (기본: 스피너) |
 | `errorSlot?` | `ReactNode` | — | 실패·빈 상태 표시를 직접 지정한다 (기본: 빈 이미지 아이콘) |
 | `imgProps?` | `ImgHTMLAttributes<HTMLImageElement>` | — | 안쪽 `<img>` 로 넘길 네이티브 속성 (srcSet · sizes · crossOrigin · draggable 등) |
+| `previewOnHover?` | `boolean` | `false` | 호버하면 큰 이미지를 포털로 띄운다. 썸네일이 작아 내용을 알아볼 수 없는 자리에 쓴다 |
+| `previewSrc?` | `string` | — | 미리보기에 띄울 경로. 원본 URL 이 썸네일과 다를 때 준다 (기본: `src` 와 같은 경로) |
+| `previewSize?` | `number` | `PREVIEW_MAX_SIZE` | 미리보기 상자의 한 변(px). 상자는 정사각형이고 이미지는 `contain` 으로 들어간다. **200px 이 상한이라 더 큰 값을 줘도 200 으로 잘린다** — 미리보기가 화면을 덮지 않게 하는 규격이다. |
 
 #### Events
 
@@ -27,8 +30,26 @@
 | `onLoad` | `(src: string) => void` | 로드 완료. 로드된 src 를 넘긴다 |
 | `onError` | `(event: SyntheticEvent<HTMLImageElement>) => void` | 로드 실패 |
 
+## Types
+
+### SImageFit
+
+```ts
+export type SImageFit = (typeof IMAGE_FITS)[number];
+```
+
+### IMAGE_FITS
+
+```ts
+export const IMAGE_FITS = ['cover', 'contain', 'fill', 'none', 'scale-down'] as const;
+```
+
 ## Dependencies
 
+### Used by
+
+ - [SChatMessage](../SChatMessage)
+
 ### Depends on
 
 - [SCircleProgress](../SCircleProgress)
@@ -40,5 +61,6 @@
 graph TD;
   SImage --> SCircleProgress
   SImage --> SIcon
+  SChatMessage --> SImage
   style SImage fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/dist/components/SImage/SImage.d.ts

@@ -19,23 +19,26 @@ export interface SImageProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onLoa
      * 캐시된 이미지에서 스피너가 한 프레임 번쩍이는 것을 막는다.
      */
     loadingShowDelay?: number;
-    /** 로딩 중에도 스피너를 그리지 않는다 */
-    noSpinner?: boolean;
+    /** 로딩 중 스피너를 그릴지. 끄면 `loadingSlot` 도 없을 때 로딩 표시가 아무것도 남지 않는다. */
+    showSpinner?: boolean;
     /** 로딩 중 표시를 직접 지정한다 (기본: 스피너) */
     loadingSlot?: ReactNode;
     /** 실패·빈 상태 표시를 직접 지정한다 (기본: 빈 이미지 아이콘) */
     errorSlot?: ReactNode;
     /** 안쪽 `<img>` 로 넘길 네이티브 속성 (srcSet · sizes · crossOrigin · draggable 등) */
     imgProps?: ImgHTMLAttributes<HTMLImageElement>;
+    /** 호버하면 큰 이미지를 포털로 띄운다. 썸네일이 작아 내용을 알아볼 수 없는 자리에 쓴다 */
+    previewOnHover?: boolean;
+    /** 미리보기에 띄울 경로. 원본 URL 이 썸네일과 다를 때 준다 (기본: `src` 와 같은 경로) */
+    previewSrc?: string;
+    /**
+     * 미리보기 상자의 한 변(px). 상자는 정사각형이고 이미지는 `contain` 으로 들어간다.
+     * **200px 이 상한이라 더 큰 값을 줘도 200 으로 잘린다** — 미리보기가 화면을 덮지 않게 하는 규격이다.
+     */
+    previewSize?: number;
     /** 로드 완료. 로드된 src 를 넘긴다 */
     onLoad?: (src: string) => void;
     /** 로드 실패 */
     onError?: (event: SyntheticEvent<HTMLImageElement>) => void;
 }
-/**
- * SImage — 이미지 로딩·실패 상태를 스스로 표현하는 이미지 상자.
- *
- * 로딩 중에는 스피너, `src` 가 없거나 로드에 실패하면 빈 이미지 아이콘을 컨테이너 높이에
- * 비례한 크기로 가운데에 그린다.
- */
 export declare const SImage: import("react").ForwardRefExoticComponent<SImageProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/SInput/README.md

@@ -18,11 +18,13 @@
 | `clearable?` | `boolean` | `false` | 지우기 버튼 |
 | `rules?` | `Rule[]` | — | 유효성 규칙 — blur 시 자동 검증 |
 | `status?` | `SFieldStatus` | — | 필드 상태 ('default' | 'pass' | 'error') |
-| `focused?` | `boolean` | — | 포커스 상태 (제어/반영) |
-| `hovered?` | `boolean` | — | 호버 상태 (제어/반영) |
-| `inputClass?` | `string` | — | 내부 input 요소 className |
+| `focused?` | `boolean` | — | 포커스 상태를 밖에서 지정한다 — 강조 테두리·링이 즉시 걸린다 (SField 로 그대로 넘어간다) |
+| `hovered?` | `boolean` | — | 호버 상태를 밖에서 지정한다 — 강조는 `focused` 와 같다 (SField 로 그대로 넘어간다) |
+| `inputClassName?` | `string` | — | 내부 input 요소 className |
 | `inputStyle?` | `CSSProperties` | — | 내부 input 요소 style |
 | `label?` | `string` | — |  |
+| `labelPosition?` | `SFieldLabelPosition` | — | 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다) |
+| `subLabel?` | `string` | — | 보조 레이블 — 레이블 오른쪽 같은 줄에 붙는다 (SField 로 그대로 넘어간다). |
 | `labelWidth?` | `number \| string` | — |  |
 | `labelTooltip?` | `string` | — | 레이블 툴팁 텍스트 |
 | `labelTooltipProps?` | `Partial<STooltipProps>` | — | 레이블 툴팁 상세 옵션 |
@@ -31,7 +33,7 @@
 | `errorMessage?` | `string` | — |  |
 | `addonLabel?` | `string` | — |  |
 | `addonAlign?` | `SFieldAddonAlign` | — | 어드온 정렬 |
-| `width?` | `number \| string` | — |  |
+| `width?` | `SFieldWidth` | — | 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이. 등급은 `--cmp-field-width-*` 토큰으로 풀리며 `maxLength`(= 스키마 상한)로 고른다. 상한이 `xl` 을 넘거나 상한이 없으면 `"100%"`. (`sellmate/field-width-grade` 가 검사한다) |
 | `disabled?` | `boolean` | `false` |  |
 | `readOnly?` | `boolean` | `false` |  |
 | `className?` | `string` | — |  |
@@ -48,6 +50,7 @@
 
 ### Used by
 
+ - [SEditor](../SEditor)
  - [SKeyValueTable](../SKeyValueTable)
 
 ### Depends on
@@ -61,6 +64,7 @@
 graph TD;
   SInput --> SField
   SInput --> SGhostButton
+  SEditor --> SInput
   SKeyValueTable --> SInput
   style SInput fill:#f9f,stroke:#333,stroke-width:4px
 ```