sellmate-design-system-react 9.0.0-beta.8 → 9.0.0-beta.83

package/dist/components/SKeyValueTable/SKeyValueTable.d.ts

@@ -5,10 +5,11 @@ import { type SNumberInputProps } from '../SNumberInput';
 import { type SSelectProps } from '../SSelect';
 import { type SRadioGroupProps } from '../SRadio';
 import { type SCheckboxProps } from '../SCheckbox';
+import { type SSwitchProps } from '../SSwitch';
 import { type SDatePickerProps } from '../SDatePicker';
 import { type SDateRangePickerProps } from '../SDateRangePicker';
 import { type SFilePickerProps } from '../SFilePicker';
-export type SKeyValueFieldType = 'text' | 'input' | 'textarea' | 'number-input' | 'select' | 'radio' | 'checkbox' | 'date-picker' | 'date-range-picker' | 'file-picker';
+export type SKeyValueFieldType = 'text' | 'input' | 'textarea' | 'number-input' | 'select' | 'radio' | 'checkbox' | 'switch' | 'date-picker' | 'date-range-picker' | 'file-picker';
 /** field type과 무관한 공통 속성 (레이아웃·레이블·스팬 등) */
 export interface SKeyValueFieldBase {
     name: string;
@@ -59,6 +60,9 @@ export type SKeyValueFieldByType = {
 } | {
     type: 'checkbox';
     options?: FieldOptions<SCheckboxProps>;
+} | {
+    type: 'switch';
+    options?: FieldOptions<SSwitchProps>;
 } | {
     type: 'date-picker';
     options?: FieldOptions<SDatePickerProps>;
@@ -74,7 +78,7 @@ export type SKeyValueField = SKeyValueFieldBase & SKeyValueFieldByType;
  * field type별 `onChange`로 올라오는 값 타입.
  * - `string`: input · textarea · select · radio · date-picker
  * - `number`: number-input
- * - `boolean`: checkbox
+ * - `boolean`: checkbox · switch
  * - `string[]`: date-range-picker
  */
 export type SKeyValueFieldValue = string | number | boolean | string[];
@@ -100,6 +104,13 @@ export interface SKeyValueTableProps {
      * `onChange`의 `detail.values`와 함께 controlled 패턴으로 사용합니다.
      */
     values?: Record<string, unknown>;
+    /**
+     * 행을 좁게 그린다 — 셀의 상하 패딩(8px → 6px)과 짝이 되는 최소 높이(44px → 32px)를 함께
+     * 내린다. 한 화면에 행이 많아 훑어보기가 목적인 상세 조회 표에 쓴다. 좌우 패딩과 글자 크기는
+     * 그대로다. **`STable` 과 달리 밀도 토글이 붙지 않는 고정값이다** — 준 값 그대로 그린다.
+     * 읽기 전용(`text`) 행에서만 실제로 좁아진다: 폼 필드 행은 필드 높이가 행 높이를 정한다
+     */
+    dense?: boolean;
     /** 우측 검색 패널 */
     search?: boolean;
     /** border-radius 제어 */
@@ -111,6 +122,22 @@ export interface SKeyValueTableProps {
      * 카드가 이미 바깥 테두리를 그리므로, 켜 두면 1px 두 개가 나란히 놓여 그 변만 2px 로 보인다.
      */
     bordered?: boolean;
+    /**
+     * 필드 폭 정책 — **표 하나가 한 번에 정한다**. 필드마다 따로 정하지 않는다.
+     *
+     * 표는 모든 컨트롤에 `width="100%"` 를 넘기지만, 값 길이를 아는 컨트롤(날짜·기간 피커)은
+     * 자기 상한에서 멈춘다. 그래서 한 행에 그런 필드가 섞이면 **왼쪽 끝만 맞고 오른쪽 끝이
+     * 어긋나** 보인다.
+     *
+     * - `'auto'`(기본) — 컨트롤이 자기 폭을 정한다. 상한이 그대로 살아 있어 폭이 "이 칸에 얼마나 긴 값이 들어가는가" 를
+     *   알려준다. 등록·수정 폼처럼 입력 길이를 짐작하게 하는 편이 나은 표에 쓴다.
+     * - `'fill'` — 모든 컨트롤이 셀 끝까지 찬다. 셀 폭은 열 수와 `tdColSpan` 이 정하므로 오른쪽
+     *   끝이 저절로 맞는다. 조회 필터처럼 가지런함이 우선인 표에 쓴다. 대신 폭이 값 길이를
+     *   알려주지 않는다 — 날짜 칸이 메모 칸만큼 넓어진다.
+     *
+     * 개별 필드만 예외로 두려면 그 필드의 `options.maxWidth` 를 준다 — 이 정책보다 우선한다.
+     */
+    fieldWidth?: 'auto' | 'fill';
     /** 값 변경 (sdChange) */
     onChange?: (detail: SKeyValueChangeDetail) => void;
     /** 검색 클릭 (sdSearch) */
@@ -119,5 +146,5 @@ export interface SKeyValueTableProps {
     style?: CSSProperties;
 }
 /** SKeyValueTable — sd-key-value-table 포팅. th/td 폼 레이아웃 + 필드 렌더러. */
-export declare function SKeyValueTable({ fields, values, search, radius, bordered, onChange, onSearch, className, style, }: SKeyValueTableProps): import("react").JSX.Element | null;
+export declare function SKeyValueTable({ fields, values, dense, search, radius, bordered, fieldWidth, onChange, onSearch, className, style, }: SKeyValueTableProps): import("react").JSX.Element | null;
 export {};

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

@@ -1 +1 @@
-export { SKeyValueTable, type SKeyValueTableProps, type SKeyValueField, type SKeyValueFieldType, type SKeyValueChangeDetail, } from './SKeyValueTable';
+export { SKeyValueTable, type SKeyValueTableProps, type SKeyValueField, type SKeyValueFieldBase, type SKeyValueFieldByType, type SKeyValueFieldType, type SKeyValueFieldValue, type SKeyValueChangeDetail, } from './SKeyValueTable';

package/dist/components/SLauncherListBox/README.md

@@ -0,0 +1,82 @@
+# SLauncherListBox
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SLauncherListBox
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `items?` | `SLauncherListBoxItem[]` | — | 목록에 세울 서비스. 비어 있으면 아무것도 렌더하지 않는다. **순서는 넘긴 대로가 아니라 카탈로그 순서다**(`LAUNCHER_SERVICES`) — 같은 런처가 앱마다 다른 순서로 뜨면 사용자가 매번 다시 찾는다. 같은 서비스를 두 번 넘기면 처음 것만 선다. |
+| `consoleHref` | `string` | — | 셀메이트 콘솔 주소. 목록 아래에 **늘 서는** "셀메이트 콘솔로 이동" 글자 링크(`STextLink`)가 누르면 이 주소를 새 탭에서 연다. **필수다** — 어느 서비스의 런처든 콘솔로 가는 길은 있어야 한다. 문구·아이콘은 컴포넌트가 정한다 — 어느 서비스의 런처든 같은 곳을 같은 말로 안내해야 한다. 주소는 서비스 줄의 `href` 처럼 앱마다 QA·실서버가 달라 앱이 넘긴다. |
+| `ariaLabel?` | `string` | — | 목록(ul)의 접근성 레이블 |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onSelect` | `(service: SLauncherService) => void` | 서비스를 고름. **가는 것은 이 콜백이 하지 않는다** — 줄이 링크라 브라우저가 `href` 를 새 탭으로 연다. 고른 것을 앱이 알아야 할 때만(기록·목록 닫기) 준다. 갈 수 없는 줄(주소가 없거나 카탈로그가 아직 출시 전으로 든 서비스)은 눌리지 않으므로 여기로 오지 않는다. |
+| `onConsoleClick` | `() => void` | 콘솔 링크를 누름. **가는 것은 이 콜백이 하지 않는다** — 컴포넌트가 `consoleHref` 를 새 탭으로 이미 연다. 누른 것을 앱이 알아야 할 때만(기록·목록 닫기) 준다. |
+
+## Types
+
+### SLauncherListBoxItem
+
+```ts
+/** 리스트박스의 한 줄 — 옮겨 갈 수 있는 서비스 하나 */
+export interface SLauncherListBoxItem {
+  /**
+   * 어느 서비스인가. **로고·표기·이름·상태 태그는 이 키 하나로 정해진다** — 카탈로그
+   * (`LAUNCHER_SERVICE_CATALOG`)가 들고 있으므로 앱이 넘기지 않는다.
+   */
+  service: SLauncherService;
+  /**
+   * 새 탭에서 열 주소. **디자인 시스템은 주소를 들지 않는다** — 앱마다 QA·실서버가 달라
+   * 여기서 관리할 수 없다.
+   *
+   * **주소를 주는 것이 곧 "갈 수 있다"는 뜻이다.** 비우면 줄은 목록에 남되 눌리지 않고
+   * 물러난다 — 지금 보고 있는 서비스든, 이 앱이 계약하지 않은 서비스든 갈 곳이 없기는 같다.
+   * 못 가는 줄을 막는 별도의 prop 은 없다.
+   */
+  href?: string;
+}
+```
+
+### SLauncherService
+
+```ts
+/**
+ * 런처에 설 수 있는 서비스 키 — **`SLogo` 가 로고를 가진 서비스 전부다(통합 콘솔 제외).**
+ *
+ * 문서에서 바로 읽히도록 키를 풀어 쓴다(`Exclude<SLogoName, …>` 로 두면 README·Storybook 에 무엇이
+ * 있는지 보이지 않는다). 대신 아래 `LOGO_COVERAGE` 가 로고 목록과 어긋나지 않는지 타입으로 지킨다.
+ */
+export type SLauncherService =
+  'sellmate' | 'wms' | 'chat' | 'chatbot' | 'plm' | 'account' | 'people' | 'crm' | 'work' | 'pos';
+```
+
+## Dependencies
+
+### Used by
+
+ - [SGnb](../SGnb)
+
+### Depends on
+
+- [SIcon](../SIcon)
+- [SLogo](../SLogo)
+- [STag](../STag)
+- [STextLink](../STextLink)
+
+### Graph
+
+```mermaid
+graph TD;
+  SLauncherListBox --> SIcon
+  SLauncherListBox --> SLogo
+  SLauncherListBox --> STag
+  SLauncherListBox --> STextLink
+  SGnb --> SLauncherListBox
+  style SLauncherListBox fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SLauncherListBox/SLauncherListBox.d.ts

@@ -0,0 +1,80 @@
+import { type HTMLAttributes } from 'react';
+import { type SLauncherService } from './launcherListBox.config';
+/** 리스트박스의 한 줄 — 옮겨 갈 수 있는 서비스 하나 */
+export interface SLauncherListBoxItem {
+    /**
+     * 어느 서비스인가. **로고·표기·이름·상태 태그는 이 키 하나로 정해진다** — 카탈로그
+     * (`LAUNCHER_SERVICE_CATALOG`)가 들고 있으므로 앱이 넘기지 않는다.
+     */
+    service: SLauncherService;
+    /**
+     * 새 탭에서 열 주소. **디자인 시스템은 주소를 들지 않는다** — 앱마다 QA·실서버가 달라
+     * 여기서 관리할 수 없다.
+     *
+     * **주소를 주는 것이 곧 "갈 수 있다"는 뜻이다.** 비우면 줄은 목록에 남되 눌리지 않고
+     * 물러난다 — 지금 보고 있는 서비스든, 이 앱이 계약하지 않은 서비스든 갈 곳이 없기는 같다.
+     * 못 가는 줄을 막는 별도의 prop 은 없다.
+     */
+    href?: string;
+}
+export interface SLauncherListBoxProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    /**
+     * 목록에 세울 서비스. 비어 있으면 아무것도 렌더하지 않는다.
+     *
+     * **순서는 넘긴 대로가 아니라 카탈로그 순서다**(`LAUNCHER_SERVICES`) — 같은 런처가 앱마다
+     * 다른 순서로 뜨면 사용자가 매번 다시 찾는다. 같은 서비스를 두 번 넘기면 처음 것만 선다.
+     */
+    items?: SLauncherListBoxItem[];
+    /**
+     * 서비스를 고름. **가는 것은 이 콜백이 하지 않는다** — 줄이 링크라 브라우저가 `href` 를
+     * 새 탭으로 연다. 고른 것을 앱이 알아야 할 때만(기록·목록 닫기) 준다.
+     *
+     * 갈 수 없는 줄(주소가 없거나 카탈로그가 아직 출시 전으로 든 서비스)은 눌리지 않으므로
+     * 여기로 오지 않는다.
+     */
+    onSelect?: (service: SLauncherService) => void;
+    /**
+     * 셀메이트 콘솔 주소. 목록 아래에 **늘 서는** "셀메이트 콘솔로 이동" 글자 링크(`STextLink`)가
+     * 누르면 이 주소를 새 탭에서 연다. **필수다** — 어느 서비스의 런처든 콘솔로 가는 길은 있어야 한다.
+     *
+     * 문구·아이콘은 컴포넌트가 정한다 — 어느 서비스의 런처든 같은 곳을 같은 말로 안내해야 한다.
+     * 주소는 서비스 줄의 `href` 처럼 앱마다 QA·실서버가 달라 앱이 넘긴다.
+     */
+    consoleHref: string;
+    /**
+     * 콘솔 링크를 누름. **가는 것은 이 콜백이 하지 않는다** — 컴포넌트가 `consoleHref` 를 새 탭으로
+     * 이미 연다. 누른 것을 앱이 알아야 할 때만(기록·목록 닫기) 준다.
+     */
+    onConsoleClick?: () => void;
+    /** 목록(ul)의 접근성 레이블 */
+    ariaLabel?: string;
+}
+/**
+ * SLauncherListBox — GNB 의 앱런처 버튼을 눌렀을 때 뜨는 서비스 목록.
+ *
+ * 한 줄이 서비스 하나다: 위에 브랜드 로고(+ 상태 태그), 아래에 한글 이름.
+ *
+ * **앱이 넘기는 것은 서비스 키와 주소 둘뿐이다.** 로고는 서비스 키가, 이름·상태 태그는 카탈로그
+ * (`LAUNCHER_SERVICE_CATALOG`)가 서비스마다 한 모습으로 정해 두므로 앱이 넘기지 않는다 —
+ * 넘기게 하면 같은 서비스가 앱마다 다른 이름·색·문구로 선다.
+ *
+ * **주소는 카탈로그에 두지 않는다.** 앱마다 QA·실서버 주소가 달라 디자인 시스템이 관리할 수 없다.
+ * 앱이 `href` 로 넘기면 줄이 링크가 되어 **새 탭에서 열린다** — 가운데 클릭·⌘클릭도 그대로 듣는다.
+ * **주소를 주는 것이 곧 "갈 수 있다"는 뜻이다**: 주지 않은 줄은 눌리지 않는다(지금 보고 있는
+ * 서비스이거나 이 앱이 계약하지 않은 서비스). 줄을 막는 별도의 prop 은 없다.
+ *
+ * **줄에 얹으면 "여기서 나간다"는 것이 드러난다** — 배경이 옅은 파랑으로 물들고 이름이 한 단계
+ * 진해지며, 오른쪽 끝에 페이지 이동 아이콘이 떠오른다. 아이콘 자리는 늘 비워 두므로 얹었다 뗄 때
+ * 글자가 밀리지 않는다.
+ *
+ * 갈 수 없는 줄은 눌리지 않고 로고는 색이 빠지며 이름은 비활성 글자색이 된다. **목록에서 빼지
+ * 않는 것이 기본이다**: 그 서비스가 있다는 사실과 지금은 못 간다는 사실을 함께 알리는 것이 런처의
+ * 일이다. 출시 전인 서비스는 카탈로그가 `출시예정` 태그와 함께 막아 두므로 앱이 할 일이 없다.
+ *
+ * **이 컴포넌트는 패널만 그린다.** 런처 버튼에 붙여 띄우는 것은 `SGnb` 의 `launcher` 가 맡으므로
+ * (`launcher.items` 에 이 목록을 넘긴다), 앱이 직접 팝오버를 조립할 일은 없다.
+ *
+ * 토큰은 `--cmp-gnb-launcher-listBox-*`(패널) · `--cmp-gnb-launcher-button-*`(줄).
+ * **줄 높이는 상수가 아니라 여백에서 나온다** — 토큰이 바뀌면 따라 바뀐다.
+ */
+export declare const SLauncherListBox: import("react").ForwardRefExoticComponent<SLauncherListBoxProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,2 @@
+export { SLauncherListBox, type SLauncherListBoxProps, type SLauncherListBoxItem, } from './SLauncherListBox';
+export { LAUNCHER_LIST_BOX_CONSOLE_HEIGHT, LAUNCHER_LIST_BOX_CONSOLE_ICON, LAUNCHER_LIST_BOX_CONSOLE_LABEL, LAUNCHER_LIST_BOX_LAYOUT, LAUNCHER_LIST_BOX_LOGO_HEIGHT, LAUNCHER_LIST_BOX_TRAILING_ICON, LAUNCHER_LIST_BOX_WIDTH, LAUNCHER_SERVICES, LAUNCHER_SERVICE_CATALOG, type SLauncherService, type SLauncherServiceEntry, } from './launcherListBox.config';

package/dist/components/SLauncherListBox/launcherListBox.config.d.ts

@@ -0,0 +1,154 @@
+import type { SIconName } from '../SIcon';
+import type { SLogoName } from '../SLogo/logo.config';
+import type { STagColor } from '../STag';
+/**
+ * 패널 고정 폭(px, 시안 — 전용 토큰 없음).
+ * 담기는 것은 서비스 로고 한 줄이라 내용 폭을 따르면 로고 길이에 따라 패널이 출렁인다.
+ */
+export declare const LAUNCHER_LIST_BOX_WIDTH = 320;
+/**
+ * 로고 글리프 높이(px, 시안 — 전용 토큰 없음).
+ * 로고 줄 높이(20px = 위아래 여백 4 + 이 값)에서 여백을 뺀 나머지이고, 그 20px 이 태그(STag xs)
+ * 높이와 같아 로고와 태그가 한 줄에 나란히 선다.
+ */
+export declare const LAUNCHER_LIST_BOX_LOGO_HEIGHT = 12;
+/**
+ * 하단 "셀메이트 콘솔로 이동" 줄의 높이(px, 시안 — 전용 토큰 없음).
+ * 글자 한 줄(20)을 가운데 둔 띠라 여백이 아니라 높이로 정한다.
+ */
+export declare const LAUNCHER_LIST_BOX_CONSOLE_HEIGHT = 40;
+/**
+ * 하단 콘솔 줄의 문구. **앱이 바꾸지 않는다** — 모든 서비스의 런처가 같은 곳(통합 콘솔)으로
+ * 같은 말로 안내해야 하기 때문이다.
+ */
+export declare const LAUNCHER_LIST_BOX_CONSOLE_LABEL = "\uC140\uBA54\uC774\uD2B8 \uCF58\uC194\uB85C \uC774\uB3D9";
+/**
+ * 콘솔 링크 앞 아이콘(시안의 글리프와 같다). 뒤의 chevron 은 `STextLink` 의 `rightArrow` 가 그린다.
+ */
+export declare const LAUNCHER_LIST_BOX_CONSOLE_ICON: SIconName;
+/**
+ * hover 때 줄 오른쪽 끝에 나타나는 아이콘 — "여기서 다른 서비스로 옮겨 간다"는 표시.
+ * 크기·색은 토큰이 정하지만 **어떤 글리프인지는 토큰에 없어** 뜻이 가장 가까운 것을 골랐다.
+ * TODO(디자인): 시안의 글리프를 확인해 확정한다.
+ */
+export declare const LAUNCHER_LIST_BOX_TRAILING_ICON: SIconName;
+/**
+ * 런처에 설 수 있는 서비스 키 — **`SLogo` 가 로고를 가진 서비스 전부다(통합 콘솔 제외).**
+ *
+ * 문서에서 바로 읽히도록 키를 풀어 쓴다(`Exclude<SLogoName, …>` 로 두면 README·Storybook 에 무엇이
+ * 있는지 보이지 않는다). 대신 아래 `LOGO_COVERAGE` 가 로고 목록과 어긋나지 않는지 타입으로 지킨다.
+ */
+export type SLauncherService = 'sellmate' | 'wms' | 'chat' | 'chatbot' | 'plm' | 'account' | 'people' | 'crm' | 'work' | 'pos';
+/**
+ * 런처에 설 수 있는 서비스 — **목록의 순서이기도 하다**(로고 순서와 같다).
+ * 앱이 넘긴 순서가 아니라 이 순서로 선다: 같은 런처가 앱마다 다른 순서로 뜨면 사용자가 매번 다시 찾는다.
+ */
+export declare const LAUNCHER_SERVICES: readonly ["sellmate", "wms", "chat", "chatbot", "plm", "account", "people", "crm", "work", "pos"];
+/**
+ * 서비스가 아닌 로고 — 런처의 서비스 줄로 세우지 않는다.
+ * `console` 은 통합 콘솔이라 목록 아래 "셀메이트 콘솔로 이동" 링크가 늘 맡는다. 줄로도 세우면 같은 곳이 두 번 선다.
+ */
+type NonServiceLogo = 'console';
+/**
+ * 로고 ↔ 서비스 키 대조. **로고를 더했는데 위 키에 적지 않았거나, 로고가 없는 키를 적으면 이 줄이
+ * 타입 에러가 된다** — "로고가 있는 서비스는 모두 런처에 설 수 있다"를 손으로 기억하지 않게 한다.
+ * (키를 더하면 `LAUNCHER_SERVICES` 와 아래 카탈로그도 함께 채워야 한다 — 카탈로그는 Record 라 타입이 막는다.)
+ */
+type Uncovered = Exclude<SLogoName, SLauncherService | NonServiceLogo> | Exclude<SLauncherService, SLogoName> | Exclude<SLauncherService, (typeof LAUNCHER_SERVICES)[number]>;
+export declare const LOGO_COVERAGE: [Uncovered] extends [never] ? true : Uncovered;
+/**
+ * 카탈로그 한 줄 — 그 서비스가 런처에서 갖는 고정된 모습.
+ * 로고는 여기 적지 않는다 — 서비스 키를 그대로 `SLogo` 의 `name` 으로 넘겨 그 서비스 로고를 그린다.
+ */
+export interface SLauncherServiceEntry {
+    /** 로고 아래 줄에 적히는 서비스 이름 */
+    name: string;
+    /**
+     * 상태 태그(`출시예정`·`NEW` 등). **앱이 붙이거나 지울 수 없다** — 같은 서비스가 앱마다
+     * 다른 문구를 달면 그 문구를 사용자가 믿을 수 없게 된다.
+     */
+    tag?: string;
+    /** 태그 색. 비우면 `'grey'` */
+    tagColor?: STagColor;
+    /** 태그 라벨 왼쪽 아이콘 */
+    tagIcon?: SIconName;
+    /** 아직 아무도 못 쓰는 서비스(출시 전). 계약 여부처럼 앱마다 갈리는 것은 여기 적지 않는다 */
+    disabled?: boolean;
+}
+/**
+ * 서비스 카탈로그 — **런처에 서는 각 서비스의 모습은 여기가 정한다.**
+ *
+ * 앱은 서비스 키와 갈 주소만 넘긴다. 표기·이름·태그를 앱이 넘기게 하면 같은 서비스가 앱마다 다른
+ * 이름으로 서고(`셀메이트 어카운트` / `Account` / `어카운트`), 한쪽을 고쳐도 나머지는 그대로 남는다.
+ *
+ * **주소는 여기 없다.** 앱마다 QA·실서버 주소가 다르므로 갈 곳은 앱이 `href` 로 넘긴다.
+ *
+ * 서비스가 늘거나 이름·상태가 바뀌면 이 표를 고치고 릴리스한다 — 소비 앱은 고칠 것이 없다.
+ */
+export declare const LAUNCHER_SERVICE_CATALOG: Record<SLauncherService, SLauncherServiceEntry>;
+/** 치수·색 — 전용 토큰이 없는 자리만 위 상수를 쓴다 */
+export declare const LAUNCHER_LIST_BOX_LAYOUT: {
+    /** 패널 배경 */
+    readonly bg: string;
+    /** 패널 라운드 */
+    readonly radius: string;
+    /** 패널 상하좌우 여백 */
+    readonly padding: string;
+    /**
+     * 패널 그림자.
+     * 토큰(`component.gnb.launcher.listBox.shadow` = `{shadow.floating}`)은 값이 배열이라
+     * `--cmp-*` 로 나오지 않는다 — 생성기가 스칼라만 내보내기 때문이다. 그래서 그 별칭이
+     * 가리키는 스케일 토큰을 직접 쓴다(같은 값이다).
+     */
+    readonly shadow: "var(--shadow-floating)";
+    /** 줄 왼쪽 여백 */
+    readonly itemPaddingLeft: string;
+    /** 줄 오른쪽 여백 — 왼쪽보다 좁다(오른쪽 끝은 hover 아이콘 자리다) */
+    readonly itemPaddingRight: string;
+    /** 줄 상하 여백 */
+    readonly itemPaddingY: string;
+    /** 줄 안의 [로고·이름 묶음] ↔ [hover 아이콘] 간격 */
+    readonly itemGap: string;
+    /** 줄 라운드 */
+    readonly itemRadius: string;
+    /** 줄 배경 */
+    readonly itemBg: string;
+    /** 줄 hover 배경 */
+    readonly itemBgHover: string;
+    /** 서비스 이름 글자색 */
+    readonly nameColor: string;
+    /** 서비스 이름 hover 글자색 */
+    readonly nameColorHover: string;
+    /** 로고 줄의 위아래 여백 */
+    readonly logoPaddingY: string;
+    /** 서비스 로고 ↔ 태그 간격 */
+    readonly logoTagGap: string;
+    /** hover 아이콘 크기 */
+    readonly trailingIconSize: string;
+    /** hover 아이콘 색 */
+    readonly trailingIconColor: string;
+    /**
+     * 아직 못 쓰는 서비스의 이름 글자색.
+     * 런처 한 벌에 비활성 색이 없어(시안에 disabled 상태 토큰이 없다) 시맨틱 토큰을 쓴다.
+     */
+    readonly nameDisabledColor: string;
+    /**
+     * 아직 못 쓰는 서비스의 로고 색 — 워드마크와 서비스 표기를 함께 이 한 색으로 덮는다.
+     * 필터(회색화)를 태우지 않는다 — 태우면 밝은 서비스 색이 워드마크보다 더 옅어져 둘이
+     * 따로 논다. 로고는 글자가 아니라 그림에
+     * 가까우므로 글자색(disabled-text)이 아니라 아이콘 비활성색을 쓴다.
+     */
+    readonly logoDisabledColor: string;
+    /** 목록 ↔ 콘솔 줄 구분선 */
+    readonly consoleDivider: string;
+    /** 콘솔 줄 배경 */
+    readonly consoleBg: string;
+    /**
+     * 콘솔 링크 글자색. STextLink 기본(`--cmp-textLink-content-default`)보다 한 단계 옅다(시안).
+     * 크기·간격·hover(밑줄)는 STextLink `sm` 이 정한다.
+     */
+    readonly consoleColor: string;
+    /** 콘솔 링크 앞 아이콘 색. STextLink 기본(파랑)이 아니라 회색이다(시안) */
+    readonly consoleIconColor: string;
+};
+export {};

package/dist/components/SLayout/README.md

@@ -10,7 +10,7 @@
 |------|------|---------|-------------|
 | `type?` | `SLayoutType` | `'box'` | 메뉴 스타일: box(라운드) / belt(풀폭 행). 자식 SGnb 가 이 값을 따른다. |
 | `header?` | `SLayoutHeader` | `'fix'` | 레이아웃 구조: fix(가로 분할) / full(풀폭 상단바). 자식 SGnb·SPage 가 이 값을 따른다. |
-| `useRail?` | `boolean` | `false` | GNB 좌측 레일 사용 여부. 자식 SGnb 가 이 값을 따르고, 그만큼 넓어진 컬럼 폭을 되올린다. 레일에 children 없는 아이템이 있으면 SGnb 가 full 상단바를 요구하고, 이 레이아웃도 그에 맞춰 full 그리드로 선다. |
+| `showRail?` | `boolean` | `false` | GNB 좌측 레일 사용 여부. 자식 SGnb 가 이 값을 따르고, 그만큼 넓어진 컬럼 폭을 되올린다. 레일에 children 없는 아이템이 있으면 SGnb 가 full 상단바를 요구하고, 이 레이아웃도 그에 맞춰 full 그리드로 선다. |
 | `folded?` | `boolean` | — | GNB 접힘 상태 (controlled) |
 | `defaultFolded?` | `boolean` | `false` | GNB 초기 접힘 상태 (uncontrolled) |
 
@@ -20,6 +20,22 @@
 |-------|------|-------------|
 | `onFoldedChange` | `(folded: boolean) => void` | 접힘 상태 변경 |
 
+## Types
+
+### SLayoutType
+
+```ts
+/** 메뉴 스타일: box(라운드) / belt(풀폭 행) — 자식 SGnb 의 메뉴 모양 */
+export type SLayoutType = SGnbType;
+```
+
+### SLayoutHeader
+
+```ts
+/** 레이아웃 구조: fix(좌측 GNB + 페이지 가로 분할) / full(풀폭 상단바 + 아래에 메뉴|페이지) */
+export type SLayoutHeader = SGnbHeader;
+```
+
 ## Dependencies
 
 ### Used by
@@ -27,10 +43,15 @@
  - [SGnb](../SGnb)
  - [SPage](../SPage)
 
+### Depends on
+
+- [SPage](../SPage)
+
 ### Graph
 
 ```mermaid
 graph TD;
+  SLayout --> SPage
   SGnb --> SLayout
   SPage --> SLayout
   style SLayout fill:#f9f,stroke:#333,stroke-width:4px

package/dist/components/SLayout/SLayout.d.ts

@@ -42,7 +42,7 @@ export interface SLayoutContextValue {
      */
     header: SLayoutHeader;
     /** GNB 좌측 레일 사용 여부 — 자식 SGnb 가 따른다 */
-    useRail: boolean;
+    showRail: boolean;
     /** GNB 접힘 상태 */
     folded: boolean;
     /** 접힘 상태 변경 */
@@ -81,7 +81,7 @@ export interface SLayoutProps extends HTMLAttributes<HTMLDivElement> {
      * GNB 좌측 레일 사용 여부. 자식 SGnb 가 이 값을 따르고, 그만큼 넓어진 컬럼 폭을 되올린다.
      * 레일에 children 없는 아이템이 있으면 SGnb 가 full 상단바를 요구하고, 이 레이아웃도 그에 맞춰 full 그리드로 선다.
      */
-    useRail?: boolean;
+    showRail?: boolean;
     /** GNB 접힘 상태 (controlled) */
     folded?: boolean;
     /** GNB 초기 접힘 상태 (uncontrolled) */
@@ -106,5 +106,9 @@ export interface SLayoutProps extends HTMLAttributes<HTMLDivElement> {
  *     "header header"  ← 전폭 상단바 (1행, 높이 = 등록된 topHeight)
  *     "nav    page"    ← 메뉴 열(등록된 columnWidth) | 페이지
  *   접으면 nav 열을 0 으로 접어 페이지가 전폭을 쓴다.
+ *
+ * 자식 순서는 `SGnb` → (선택) `SPageHeader` → `SPage` 다. `SPageHeader` 를 두면 **그 자식부터 뒤가**
+ * 하나의 페이지 열로 묶여(page-column.tsx) 헤더가 페이지 위에 고정되고, 그 아래에서만 스크롤이 일어난다.
+ * 헤더를 두지 않으면 아무것도 감싸지 않는다 — `SPage` 가 예전처럼 프레임의 자식으로 남는다.
  */
 export declare const SLayout: import("react").ForwardRefExoticComponent<SLayoutProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1 +1 @@
-export { SLayout, SLayoutContext, SLAYOUT_MIN_WIDTH, useSLayout, type SLayoutProps, type SLayoutType, type SLayoutHeader, type SLayoutContextValue, } from './SLayout';
+export { SLayout, SLayoutContext, SLAYOUT_MIN_WIDTH, useSLayout, type SLayoutProps, type SLayoutType, type SLayoutHeader, type SLayoutNavState, type SLayoutContextValue, } from './SLayout';

package/dist/components/SLineChart/README.md

@@ -0,0 +1,131 @@
+# SLineChart
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SLineChart
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `categories` | `string[]` | — | 가로축에 놓일 항목 이름 |
+| `series` | `SLineChartSeries[]` | — | 계열 목록. 각 `data` 는 `categories` 와 같은 순서다 |
+| `title?` | `string` | — | 차트 제목 — 왼쪽 위에 놓인다 |
+| `unit?` | `string` | — | 단위 — 오른쪽 위에 "단위 : " 를 붙여 놓는다 |
+| `curve?` | `SLineChartCurve` | `'linear'` | 점을 잇는 방식. `smooth` 는 값을 넘어가 부풀지 않는 곡선이다 |
+| `lineStyle?` | `SLineChartLineStyle` | `'solid'` | 선 모양. `dashed` 는 차트의 모든 선을 점선으로 그린다 |
+| `area?` | `boolean` | `false` | 선 아래를 계열 색으로 채운다. 크기의 변화를 함께 보여줄 때 쓴다 |
+| `stacked?` | `boolean` | `false` | 계열을 겹쳐 그리는 대신 **아래 계열 위에 쌓는다**. 전체의 크기와 그 안의 구성을 함께 볼 때 쓴다 — 맨 위 선이 곧 합계다. 툴팁은 쌓기 전 각 계열의 값을 보여준다 |
+| `palette?` | `SLineChartPalette` | `'default'` | 색 팔레트. `custom` 일 때만 `colors` 를 본다 |
+| `colors?` | `SLineChartColor[]` | — | `palette='custom'` 에서 쓸 색 이름을 계열 순서대로. 계열보다 짧으면 앞에서부터 순환한다 |
+| `max?` | `number` | — | 값 축의 최댓값. 주지 않으면 데이터에서 읽기 좋은 값으로 정한다 |
+| `tickCount?` | `number` | `8` | 값 축 눈금 개수 |
+| `showPoint?` | `boolean` | `true` | 데이터 지점마다 점을 찍는다. 꺼도 짚은 항목의 점은 뜬다 |
+| `showValueLabel?` | `boolean` | `false` | 점마다 값을 적는다. 기본은 끔 — 선 그래프는 항목이 많은 데이터에 쓰는 일이 잦아 숫자가 서로 붙는다. 항목이 대여섯 개 안쪽일 때만 켠다 |
+| `showLegend?` | `boolean` | `true` | 범례를 보인다 |
+| `legendPosition?` | `SLineChartLegendPosition` | `'top'` | 범례 위치 |
+| `showTooltip?` | `boolean` | `true` | 항목에 마우스를 올리면 값 상자를 띄운다 |
+| `formatValue?` | `(value: number) => string` | `defaultFormat` | 값 표시 형식 |
+| `height?` | `number \| string` | — | 차트 높이. **아래 축 텍스트까지 포함한 값**이다 — 그림은 그만큼 줄어든다 |
+| `tooltipFooter?` | `(category: SLineChartTooltipCategory) => ReactNode` | — | 툴팁의 값 아래에 덧붙일 내용. 짚은 항목을 받아 그린다 — 계열 값만으로 모자란 맥락 (합계, 전월 대비 등)을 적는다. 툴팁은 누를 수 없으므로 버튼·링크는 넣지 않는다 |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onPointClick` | `(point: SLineChartPoint) => void` | 점을 눌렀을 때 |
+
+## Types
+
+### SLineChartSeries
+
+```ts
+/** 한 계열 — 선 하나, 범례 한 줄에 대응한다. */
+export interface SLineChartSeries {
+  /** 범례·툴팁에 표시할 이름 */
+  name: string;
+  /** `categories` 와 같은 순서의 값. 빠진 자리(`null`·짧은 배열)에서는 선이 끊긴다 */
+  data: (number | null)[];
+}
+```
+
+### SLineChartCurve
+
+```ts
+/** 점과 점을 잇는 방식. */
+export type SLineChartCurve = 'linear' | 'smooth';
+```
+
+### SLineChartLineStyle
+
+```ts
+/** 선 모양. `dashed` 는 차트의 모든 선에 적용된다 — 일부 계열만 점선으로 구분하려면 쓰지 않는다 */
+export type SLineChartLineStyle = 'solid' | 'dashed';
+```
+
+### SLineChartPalette
+
+```ts
+/**
+ * 색 팔레트.
+ * - `default` 파랑 한 색. 계열이 하나거나 색으로 나눌 것이 없을 때
+ * - `multi` 서로 무관한 항목(11색)을 순서대로
+ * - `gradation` 한 지표의 단계(6색)를 진한 쪽부터 순서대로
+ * - `custom` `colors` 로 고른 색을 순서대로
+ */
+export type SLineChartPalette = 'default' | 'multi' | 'gradation' | 'custom';
+```
+
+### SLineChartColor
+
+```ts
+/**
+ * `palette='custom'` 에서 고를 수 있는 색 이름.
+ * positive=늘어남 · negative=줄어듦 · neutral=변화 없음 을 뜻하므로 뜻에 맞게 고른다.
+ */
+export type SLineChartColor =
+  | 'positivePrimary'
+  | 'positiveSecondary'
+  | 'negativePrimary'
+  | 'negativeSecondary'
+  | 'neutralPrimary'
+  | 'neutralSecondary';
+```
+
+### SLineChartLegendPosition
+
+```ts
+/** 범례 위치. */
+export type SLineChartLegendPosition = 'top' | 'bottom';
+```
+
+### SLineChartPoint
+
+```ts
+/** 툴팁·클릭이 가리키는 지점. */
+export interface SLineChartPoint {
+  /** 계열 인덱스 */
+  seriesIndex: number;
+  /** 카테고리 인덱스 */
+  categoryIndex: number;
+  /** 그 지점의 값. 누적이어도 **그 계열이 제 몫으로 가진 값**이다 */
+  value: number;
+}
+```
+
+### SLineChartTooltipCategory
+
+```ts
+/** 툴팁 하단(`tooltipFooter`)이 받는 짚은 항목. */
+export interface SLineChartTooltipCategory {
+  /** 카테고리 인덱스 */
+  categoryIndex: number;
+  /** 카테고리 이름 */
+  name: string;
+  /** 툴팁에 값이 뜬 지점들 — 값이 없는 계열은 빠진다. 누적이어도 각 계열이 제 몫으로 가진 값이다 */
+  points: SLineChartPoint[];
+}
+```
+