@simplysm/sd-claude 14.0.91 → 14.0.92

package/claude/references/sd-simplysm14/README.md

@@ -25,17 +25,17 @@ ORM 호출, 파일 변환, 비즈니스 로직 등은 위 두 경우에 해당
 
 | 트리거                                                  | 매뉴얼                                                 |
 | ------------------------------------------------------- | ------------------------------------------------------ |
-| 클라이언트 코드 (앱 패키지·`@simplysm/angular`) 를 작성·수정하는 모든 작업 | [client-rules.md](./manuals/client-rules.md)           |
+| 클라이언트 공통 lint/template 규칙 (예: `$any` 금지) | [client-rules.md](./manuals/client-rules.md)           |
 | 화면 컴포넌트(`<domain>.<역할>.ts`) 작성/수정           | [client-component.md](./manuals/client-component.md)   |
 | `sd-crud-list` / `sd-crud-detail` 채택한 목록·단건 화면 | [client-crud.md](./manuals/client-crud.md)             |
 | 클라이언트 데모 컴포넌트 작성                           | [client-demo.md](./manuals/client-demo.md)             |
 | `<sd-tab>` 사용                                         | [client-tab.md](./manuals/client-tab.md)               |
 | 앱에서 서버 서비스·이벤트 호출 (provider 정의·항목 추가) | [client-service.md](./manuals/client-service.md)       |
 | 앱에서 ORM(DB) 사용 (AppOrmProvider 정의)               | [client-orm.md](./manuals/client-orm.md)               |
-| 앱에서 공유 마스터 데이터 사용 (provider 정의·항목 추가) | [client-shared-data.md](./manuals/client-shared-data.md) |
+| 앱에서 공유 마스터 데이터 사용 (provider 정의·항목 추가, 선택 컨트롤의 관리·선택 모달) | [client-shared-data.md](./manuals/client-shared-data.md) |
 | 클라이언트·서버 간 실시간 이벤트 정의·발생·구독         | [event.md](./manuals/event.md)                         |
 | 앱 메뉴 구조·권한 정의 추가/수정                        | [client-app-structure.md](./manuals/client-app-structure.md) |
-| DB 스키마 정의 또는 ORM 쿼리 작성                       | [orm.md](./manuals/orm.md)                             |
+| ORM 쿼리 작성(조회 흐름·안티패턴), 컬럼 nullable/default 정책, 삭제 전략 | [orm.md](./manuals/orm.md)                             |
 | 이종 엔티티를 한 목록으로 합쳐 표시 (UNION)             | [orm-union.md](./manuals/orm-union.md)                 |
 | CRUD 처리에 데이터 변경 이력 적재·조회 (누가·언제·무엇을 변경) | [data-log.md](./manuals/data-log.md)                   |
 | 콘솔 로깅 코드 작성/수정 (모든 패키지)                  | [logging.md](./manuals/logging.md)                     |
@@ -45,15 +45,16 @@ ORM 호출, 파일 변환, 비즈니스 로직 등은 위 두 경우에 해당
 ## 패키지 인덱스
 
 - **angular** — Angular(zoneless) 기반 SI/업무 클라이언트용 UI 컴포넌트·디렉티브·전역 프로바이더·signal 헬퍼 — 부트스트랩(provideSdAngular)·모달/토스트/busy/인쇄·라우팅/메뉴/권한·폼 입력 컨트롤·시트(sd-sheet)·공유 마스터 데이터·CRUD 화면 골격·사이드바/탑바 레이아웃·칸반/권한표/에디터/시각화를 쓸 때. 자세히: [apis/angular/README.md](./apis/angular/README.md)
-- **capacitor-plugin-auto-update** — Android APK 자동 업데이트 Capacitor 플러그인 — 부팅 시 서버/외부저장소의 최신 APK 를 받아 설치하는 오케스트레이터(AutoUpdate)와 저수준 설치·권한·버전 조회 정적 클래스(ApkInstaller). 자세히: [apis/capacitor-plugin-auto-update/README.md](./apis/capacitor-plugin-auto-update/README.md)
+- **capacitor-plugin-auto-update** — Android APK 자동 업데이트 Capacitor 플러그인 — 부팅 시 서버/외부저장소의 최신 APK 를 받아 설치하는 오케스트레이터(AutoUpdate.run/runByExternalStorage)와 저수준 설치·권한·버전 조회 정적 클래스(ApkInstaller) 및 브리지 타입(ApkInstallerPlugin/VersionInfo)을 쓸 때. 자세히: [apis/capacitor-plugin-auto-update/README.md](./apis/capacitor-plugin-auto-update/README.md)
 - **capacitor-plugin-file-system** — Capacitor 네이티브 파일 시스템 접근(Android OS 파일 시스템 / 웹 IndexedDB 에뮬레이션). FileSystem 정적 메서드로 권한 확인·요청, 디렉토리 읽기/생성, 파일 읽기/쓰기/삭제, 저장소 경로·파일 URI 조회 시. 자세히: [apis/capacitor-plugin-file-system/README.md](./apis/capacitor-plugin-file-system/README.md)
 - **capacitor-plugin-intent** — Android 인텐트 송수신 Capacitor 플러그인(Intent 정적 클래스) — 브로드캐스트 구독/전송, 실행 인텐트 조회, newIntent 리스닝, startActivityForResult 외부 Activity 실행·결과 수신. 바코드 스캐너·PDA 등 산업용 디바이스 연동 시 사용. 자세히: [apis/capacitor-plugin-intent/README.md](./apis/capacitor-plugin-intent/README.md)
 - **capacitor-plugin-usb-storage** — 연결된 USB Mass Storage 장치를 열거·권한확인 후 디렉토리/파일을 읽는 Capacitor 플러그인. 정적 클래스 UsbStorage 와 입출력 타입(UsbDeviceInfo/UsbDeviceFilter/UsbFileInfo/UsbStoragePlugin) 제공. 자세히: [apis/capacitor-plugin-usb-storage/README.md](./apis/capacitor-plugin-usb-storage/README.md)
 - **core-browser** — 브라우저 전용 유틸리티 — DOM 요소 탐색·위치 계산·가시성 확장, IndexedDB 영속화 및 가상 파일시스템, Blob 다운로드·URL 바이너리 수신·파일 선택 대화상자가 필요할 때. 자세히: [apis/core-browser/README.md](./apis/core-browser/README.md)
-- **core-common** — 브라우저·Node 공용 기반 유틸 — 날짜/시간 값 타입(DateTime/DateOnly/Time), 에러 클래스(SdError 등), 배열/객체 조작, 직렬화(json/xml/bytes/transfer), 비동기 큐·이벤트·대기, 로거·환경변수가 필요할 때. 자세히: [apis/core-common/README.md](./apis/core-common/README.md)
+- **core-common** — 브라우저·Node 공용 기반 유틸 — 날짜/시간 값 타입(DateTime/DateOnly/Time/Uuid), 에러 클래스(SdError 등), 배열/Set/Map 프로토타입 확장, 객체 깊은 복사·비교·병합(obj), 직렬화(json/xml/bytes/transfer), 비동기 큐·이벤트·대기·자동만료 Map, 문자열/숫자/경로/날짜포맷 유틸, 로거·환경변수·원시타입 매핑이 필요할 때. 자세히: [apis/core-common/README.md](./apis/core-common/README.md)
 - **core-node** — Node 전용 유틸: 파일시스템 IO(fsx)·경로 가공(pathx)·자식 프로세스 실행(cpx)·glob 감시(FsWatcher)·consola 로깅 셋업(setupConsola)·worker_threads 타입 안전 래퍼(Worker/createWorker)가 필요할 때. 자세히: [apis/core-node/README.md](./apis/core-node/README.md)
 - **excel** — OOXML(.xlsx) 워크북을 ZIP 단위 lazy-load 로 읽고 쓰는 라이브러리. ExcelWorkbook/ExcelWorksheet 로 시트·셀 값/수식·스타일·조건부 서식·이미지·행 복사·뷰를, ExcelWrapper 로 Zod 스키마 기반 레코드 ↔ 엑셀 변환을, ExcelUtils 로 주소·날짜 시리얼·숫자형식 변환을 다룰 때. 자세히: [apis/excel/README.md](./apis/excel/README.md)
-- **orm-common** — Dialect 독립 ORM 코어 — DbContext 상속·연결/트랜잭션/DDL/마이그레이션, Table/View/Procedure 스키마 빌더, Queryable 체이닝·CRUD·검색·UNION, expr 표현식 빌더, QueryDef/Expr AST·QueryBuilder·결과 파싱을 다룰 때 참조. 자세히: [apis/orm-common/README.md](./apis/orm-common/README.md)
+- **lint** — 심플리즘 ESLint 자산. 커스텀 규칙 9종 플러그인(`@simplysm/lint/eslint-plugin`)과 그 규칙 + typescript-eslint/angular-eslint/import/unused-imports 를 묶은 flat config 프리셋(`@simplysm/lint/eslint-recommended`)을 프로젝트 eslint.config 에 적용하거나 개별 규칙의 검사 대상·메시지·autofix·옵션을 파악할 때. 자세히: [apis/lint/README.md](./apis/lint/README.md)
+- **orm-common** — Dialect(MySQL/MSSQL/PostgreSQL) 독립 ORM 코어 — Table/View/Procedure 스키마 빌더, DbContext 상속(연결·트랜잭션·DDL·마이그레이션), Queryable 체이닝(SELECT/CUD·join/include/union/recursive·검색), expr 표현식 빌더(비교·집계·조건·윈도우·서브쿼리), QueryDef/Expr AST·dialect QueryBuilder·결과 파싱을 다룰 때. 자세히: [apis/orm-common/README.md](./apis/orm-common/README.md)
 - **orm-node** — Node.js 환경에서 DbContext 를 MySQL/MSSQL/PostgreSQL 에 연결·실행하는 ORM 런타임 — 고수준 createOrm(트랜잭션 경계) 과 저수준 createDbConn/DbConn(raw SQL·파라미터 쿼리·bulk insert·수동 트랜잭션) 제공. 자세히: [apis/orm-node/README.md](./apis/orm-node/README.md)
 - **sd-cli** — sd.config.ts 설정 타입(SdConfigFn·타겟별 패키지 설정·배포/Capacitor/Electron/PWA), 패키지 단위 TS/Angular AOT 증분 컴파일러 SdTsCompiler, Vitest용 Angular Vite 플러그인 sdAngularPlugin 을 다룰 때. 자세히: [apis/sd-cli/README.md](./apis/sd-cli/README.md)
 - **service-client** — WebSocket 으로 서비스 서버에 접속해 서비스 RPC 호출·서버 푸시 이벤트 구독/발행·파일 업다운로드·서버측 ORM 원격 실행을 수행하는 클라이언트(브라우저/Node 양용)가 필요할 때. 자세히: [apis/service-client/README.md](./apis/service-client/README.md)

package/claude/references/sd-simplysm14/apis/angular/README.md

@@ -1,57 +1,77 @@
 # @simplysm/angular
 
-Angular(zoneless) 기반 SI/업무 클라이언트용 UI 컴포넌트·디렉티브·프로바이더·signal 헬퍼 라이브러리. `import "@simplysm/core-browser"` 를 side-effect 로 로드하며, 모든 컴포넌트는 standalone + OnPush + `ViewEncapsulation.None`, selector 는 `sd-` prefix.
-
-> 사용 예 패턴 근거: `manuals/client-component.md`, `client-shared-data.md`, `client-system-log.md`, `client-demo.md`, `client-rules.md`. 화면 작성 시 provider 경유 호출·표준 시그널(ready/initialized/busyCount/viewType)·`mark` 사용·`$any` 금지 등은 매뉴얼을 따름.
+Angular(zoneless) 기반 SI/업무 클라이언트용 UI 컴포넌트·디렉티브·전역 프로바이더·signal 헬퍼 모음. `provideSdAngular` 부트스트랩 위에서 모달/토스트/busy/인쇄, 라우팅/메뉴/권한, 폼 입력 컨트롤, 시트(sd-sheet), 공유 마스터 데이터, CRUD 화면 골격, 사이드바/탑바 레이아웃, 칸반/권한표/에디터/시각화를 제공. `import "@simplysm/core-browser"` 를 side-effect 로 로드하며, 컴포넌트는 standalone + OnPush + `ViewEncapsulation.None`, selector 는 `sd-` prefix.
 
 ## 사용 트리거 인덱스
 
-- **앱 부트스트랩·전역 프로바이더** — `provideSdAngular`, 테마/로컬스토리지/시스템설정/시스템로그/서비스클라이언트 provider 를 배선할 때. 자세히: [infra.md](./infra.md)
-- **모달·토스트·busy·인쇄 (오버레이/전역 피드백)** — 화면에서 모달을 띄우거나, 토스트로 알림·진행률을 표시하거나, busy 인디케이터·인쇄/PDF 를 호출할 때. 자세히: [overlay.md](./overlay.md)
-- **라우팅·앱 구조(메뉴·권한)** — 라우터 링크, 현재 페이지 코드·뷰 타입·뷰 제목 signal, 메뉴·권한 트리(`injectPermsSignal`) 를 다룰 때. 자세히: [routing-appstructure.md](./routing-appstructure.md)
-- **디렉티브·signal setup 헬퍼** — 리사이즈/교차/캡처 이벤트, 커맨드 단축키, ripple, 노출 애니메이션, invalid 표시, 타입드 템플릿을 붙일 때. 자세히: [directives.md](./directives.md)
-- **폼·기본 입력 컨트롤** — 버튼/앵커, textfield/textarea/numpad/range/날짜범위, checkbox/switch/group, select/dropdown, form/collapse/tab/list/pagination 을 배치할 때. 자세히: [controls.md](./controls.md)
-- **레이아웃 셸 (사이드바·탑바)** — 앱 좌측 사이드바/상단바 + 메뉴/사용자 메뉴를 구성할 때. 자세히: [layout.md](./layout.md)
-- **시트(그리드)** — `sd-sheet` + 컬럼/셀 템플릿으로 다건 목록·편집 표를 그릴 때. 자세히: [sheet.md](./sheet.md)
-- **공유 마스터 데이터 + 선택 컨트롤** — `SdSharedDataProvider` 등록·조회, `sd-shared-data-select`(드롭다운/버튼/리스트) 로 마스터 데이터를 선택할 때. 자세히: [shared-data.md](./shared-data.md)
-- **selection/sorting/expanding 매니저** — 커스텀 목록 컴포넌트에서 선택·정렬·트리 펼침 상태 로직을 signal 로 합성할 때. 자세히: [selection-managers.md](./selection-managers.md)
-- **CRUD 화면 표준 골격** — `sd-base-container` / `sd-crud-list` / `sd-crud-detail` 로 목록/단건 화면을 만들 때. 자세히: [crud.md](./crud.md)
-- **기능 컴포넌트 (칸반·권한표·상태프리셋·테마선택·주소검색·에디터·시각화)** — 위 군에 안 드는 도메인성 컴포넌트를 쓸 때. 자세히: [features.md](./features.md)
+- **앱 부트스트랩·전역 설정** — `provideSdAngular` 로 zoneless 앱을 띄우고, 클라이언트명·테마·로컬스토리지·시스템설정·시스템로그·서비스클라이언트 프로바이더를 설정할 때. 자세히: [infra.md](./infra.md)
+- **오버레이(모달·토스트·busy·인쇄)** — 코드로 모달/토스트를 띄우거나, 화면 busy 표시·인쇄/PDF 출력을 할 때. 자세히: [overlay.md](./overlay.md)
+- **라우팅·메뉴·권한(app-structure)** — 페이지 코드·뷰 타입·제목 시그널, 라우터 링크/창 열기, 이탈 가드, 메뉴/권한 트리 계산을 할 때. 자세히: [routing-appstructure.md](./routing-appstructure.md)
+- **공유 마스터 데이터** — `SdSharedDataProvider` 로 고객사·품목 등 마스터를 한 번 등록해 화면에서 공유 시그널로 쓰고, 선택 컨트롤로 관리·선택 모달을 띄울 때. 자세히: [shared-data.md](./shared-data.md)
+- **시트(sd-sheet)** — 컬럼·셀 템플릿·정렬·페이징·선택·트리·요약 행을 가진 데이터 그리드를 그릴 때. 자세히: [sheet.md](./sheet.md)
+- **CRUD 화면 골격** — 목록(`sd-crud-list`)·단건(`sd-crud-detail`)·공통 컨테이너(`sd-base-container`) 표준 화면 골격을 채택할 때. 자세히: [crud.md](./crud.md)
+- **폼·입력 컨트롤** — 버튼·텍스트필드·체크박스·셀렉트·드롭다운·폼·페이지네이션 등 입력 컨트롤을 쓸 때. 자세히: [controls.md](./controls.md)
+- **레이아웃(사이드바·탑바)** — 앱 셸의 사이드바/탑바/메뉴/유저 메뉴를 배치할 때. 자세히: [layout.md](./layout.md)
+- **호스트 디렉티브·signal 헬퍼·선택 매니저** — 리사이즈/교차/리플/등장효과/유효성 디렉티브, 명령 단축키, 옵션 이벤트 플러그인, 템플릿 타입 가드, 선택/정렬/펼침 매니저를 쓸 때. 자세히: [directives.md](./directives.md)
+- **부가 기능(칸반·권한표·상태프리셋·테마·주소·에디터·시각화)** — 칸반 보드, 권한 트리 표, 상태 프리셋, 테마 토글, 주소 검색 모달, Tiptap 에디터, 라벨/노트/진행바/달력/바코드/ECharts 를 쓸 때. 자세히: [features.md](./features.md)
+
+## 공통 인라인 (소형 심볼)
+
+### FormatPipe
+
+문자열·날짜를 표시 포맷으로 변환하는 standalone pipe. name `format`.
+
+- `transform(value: string | DateTime | DateOnly | undefined, format: string): string` — `value` 가 null 이면 `""`. `DateTime`/`DateOnly` 면 `value.toFormatString(format)`. 문자열이면 `format` 을 `|` 로 분리해 `X` 개수가 문자열 길이와 같은 패턴을 골라 `X` 자리에 글자를 끼워 넣음(전화번호·사업자번호 등 자릿수 마스킹). 매칭 패턴 없으면 원문 반환.
+
+```html
+{{ phone | format: "XXX-XXXX-XXXX|XX-XXXX-XXXX" }}
+{{ regDate | format: "yyyy-MM-dd" }}
+```
+
+### mark
+
+시그널 값을 in-place 변경한 뒤 소비자에게 변경 알림만 발행.
+
+- `mark(sig: WritableSignal<any>): void` — `sig` 가 배열이면 `[...v]`, 객체면 `{...v}` 로 shallow copy 해 set. 객체·배열 시그널 내부 필드만 바꾼 뒤(`data().name = ...; mark(data)`) 양방향 바인딩의 `(valueChange)` 에 묶어 호출하거나, 값이 같아도 effect 를 강제 재발화시킬 때 사용.
+
+```html
+<sd-textfield [(value)]="data().name" (valueChange)="mark(data)" />
+```
+
+### setSafeStyle
+
+`Renderer2` 로 여러 스타일 속성을 한 번에 설정.
+
+- `setSafeStyle(renderer: Renderer2, el: HTMLElement, style: Partial<CSSStyleDeclaration>): void` — `style` 의 각 키를 `renderer.setStyle` 로 적용. 디렉티브·setup 헬퍼에서 호스트 엘리먼트에 스타일을 줄 때 사용.
 
-아래는 군을 별도로 둘 만큼 크지 않은 유틸·타입·표시용 심볼의 인라인 섹션이다.
+### setupBgTheme
 
-## signal·DOM 유틸
+현재 컴포넌트가 살아있는 동안 `document.body` 배경색 CSS 변수를 테마색으로 설정(파괴 시 해제). injection 컨텍스트(생성자)에서 호출.
 
-- `mark(sig: WritableSignal<any>): void` — WritableSignal 의 값을 in-place 변경한 뒤 변경 알림만 발행. 내부적으로 배열이면 `[...v]`, 객체면 `{...v}` 로 shallow copy 해 새 참조를 set. effect 강제 재발화나 객체/배열 필드 변경 알림에 사용. 매뉴얼 권장 패턴: `doRefresh(){ mark(this.lastFilter); }`, 양방향 바인딩 자식 변경 시 `(valueChange)="mark(filter)"`.
-- `setSafeStyle(renderer: Renderer2, el: HTMLElement, style: Partial<CSSStyleDeclaration>): void` — `style` 객체의 각 키를 `renderer.setStyle` 로 적용. Angular Renderer 경유로 DOM 스타일을 안전하게 일괄 세팅할 때(직접 `el.style` 대입을 피해야 하는 디렉티브/setup 내부).
+- `options.theme: "primary"|"secondary"|"info"|"success"|"warning"|"danger"|"gray"|"blue-gray"` — 배경 테마 계열. 미지정 시 배경색 변수를 빈 값으로 둠(기본 배경 유지).
+- `options.lightness: "lightest"|"lighter"` — 테마색 밝기. 미지정 시 `"lightest"`. 페이지 전체 배경을 옅게 깔 때 사용.
 
-## FormatPipe (`format` 파이프)
+```ts
+constructor() { setupBgTheme({ theme: "gray", lightness: "lightest" }); }
+```
 
-- `transform(value: string | DateTime | DateOnly | undefined, format: string): string` — 값 표시 포매팅 파이프(`name: "format"`).
-  - `value` 가 `null`/`undefined` → `""` 반환(결측 보존).
-  - `DateTime`/`DateOnly` → `value.toFormatString(format)`.
-  - `string` → `format` 을 `|` 로 끊어 각 후보에서 `X` 개수가 문자열 길이와 같은 것을 찾아 `X` 자리에 한 글자씩 끼워 마스킹(예: 전화번호 `"XXX-XXXX-XXXX"`). 매칭 후보가 없으면 원문 그대로.
-  - 사용: `{{ phone | format: 'XXX-XXXX-XXXX' }}`, `{{ date | format: 'yyyy-MM-dd' }}`.
+### setupModelHook
 
-## 디렉티브 입력 추론 타입
+`WritableSignal` 의 `set`/`update` 를 가로채 변경 허용 여부를 콜백으로 검사(비동기 허용). injection 컨텍스트에서 호출.
 
-모달/토스트/인쇄 provider 의 `inputs` 타입 계산에 쓰이는 유틸 타입. 직접 쓸 일은 드물지만 시그니처 해석용으로 노출됨.
+- `model: WritableSignal<T>` — 가드를 걸 대상 모델 시그널.
+- `canFn: Signal<(item: T) => boolean | Promise<boolean>>` — 새 값을 받기 전 호출. `false` 면 반영 차단, `true` 면 즉시 반영, `Promise` 면 resolve 가 `false` 가 아닐 때만 반영(reject 는 `ErrorHandler` 로). 체크박스·스위치의 변경 확인 후에만 모델을 바꿔야 할 때.
 
-- `DirectiveInputSignals<T>` — 컴포넌트/디렉티브 클래스 `T` 의 `InputSignal` 프로퍼티만 골라 `{ 키: 값타입 }` 으로 추출. `InputSignal` 아닌 멤버는 제외, `undefined` 포함 필드는 optional 로 변환.
-- `UndefToOptional<T>` — `undefined` 를 포함하는 프로퍼티를 optional(`?`)로 바꾸는 매핑 타입. `DirectiveInputSignals` 내부에서 사용.
-- `WithOptional<T, K extends keyof T>` — 특정 키 `K` 만 optional 로 만든 타입(`Omit<T,K> & Partial<Pick<T,K>>`). provider 의 `inputs` 에서 "기본값 있는 입력은 생략 가능" 을 표현.
+### SelectModalOutputResult
 
-## SelectModalOutputResult
+선택 모달이 close 페이로드로 돌려주는 결과 타입.
 
-- `interface SelectModalOutputResult<TKey = any> { selectedKeys: TKey[] }` — 선택 전용 모달이 close 시 emit 하는 페이로드 규약. `SdSelectModal` / `SdModalSelectButton` / `sd-shared-data-select` 모달 연동의 반환 타입. 선택 모달 컴포넌트는 이 타입을 `close.emit` 으로 돌려줌.
+- `selectedKeys: TKey[]` — 모달에서 선택된 키 배열. 단건 선택도 배열로 반환(첫 키만 사용). `sd-modal-select-button`·`sd-shared-data-select` 가 이 페이로드로 선택을 갱신.
 
-## SdGap (`sd-gap`)
+### 타입 유틸 (directive-input-signals)
 
-여백 전용 빈 컴포넌트. flex 레이아웃 사이 간격을 토큰/픽셀로 삽입.
+컴포넌트 input 시그널에서 값 타입을 뽑는 매핑 타입. 모달/토스트/인쇄 `inputs` 의 정적 타입 검증에 쓰임.
 
-- `height: "xxs"|"xs"|"sm"|"default"|"lg"|"xl"|"xxl"` — 세로 간격 토큰(`--gap-*`). 세로 스택 사이 간격에 사용. 지정 시 display=block.
-- `heightPx: number` — 세로 간격 px. `0` 이면 display=none(간격 제거).
-- `width: "xxs"|...|"xxl"` — 가로 간격 토큰. 가로 나열 사이 간격에 사용. 지정 시 display=inline-block.
-- `widthPx: number` — 가로 간격 px. `0` 이면 display=none.
-- `widthEm: number` — 가로 간격 em. `0` 이면 display=none.
-- 사용: `<sd-gap [width]="'sm'" />`.
+- `DirectiveInputSignals<T>` — `T` 의 `InputSignal` 프로퍼티만 골라 값 타입으로 변환한 객체 타입. `undefined` 포함 필드는 optional 로.
+- `UndefToOptional<T>` — `undefined` 를 포함하는 프로퍼티를 optional(`?`) 로 변환.
+- `WithOptional<T, K>` — `T` 에서 키 `K` 들만 optional 로 변환.

package/claude/references/sd-simplysm14/apis/angular/controls.md

@@ -1,213 +1,146 @@
-# @simplysm/angular — 폼·기본 입력 컨트롤
+# @simplysm/angular — 폼·입력 컨트롤
 
-버튼·앵커, 텍스트/숫자/날짜 입력, 체크박스/스위치, 셀렉트/드롭다운, 폼/접기/탭/리스트/페이지네이션 등 폼·UI 기본 컨트롤 군. 화면 폼·필터·시트 셀에서 함께 쓰임. 공통: 거의 모든 컨트롤이 `size: "sm"|"lg"`(미지정=기본), `inline`, `inset`(테두리 제거·셀 내장용), `disabled`, `theme` 을 가짐. 매뉴얼(client-component.md "표준 입력 컨트롤"·"버튼 스타일")의 역할별 theme/size 규약을 따름.
+버튼·앵커, 텍스트/숫자/날짜 입력, 체크박스/스위치, 셀렉트/드롭다운, 폼/접기/탭/리스트/페이지네이션 등 폼·UI 기본 컨트롤 군. 화면 폼·필터·시트 셀에서 함께 쓰임. 공통: 대부분 컨트롤이 `size: "sm"|"lg"`(미지정=기본), `inline`, `inset`(테두리 제거·셀 내장용), `disabled`, `theme` 을 가짐. 매뉴얼(client-component.md "표준 입력 컨트롤"·"버튼 스타일")의 역할별 theme/size 규약을 따름.
 
-## 버튼·앵커
-
-### SdButton (`sd-button`)
-
-- `type: "button"|"submit"` — 버튼 타입. `"submit"` 이면 부모 `sd-form` submit 트리거. 기본 `"button"`.
-- `theme` — 색 테마. 일반 시리즈 `"primary"|"secondary"|"info"|"success"|"warning"|"danger"|"gray"|"blue-gray"`(채움 버튼), link 시리즈 `"link"|"link-primary"|...|"link-blue-gray"|"link-rev"`(테두리·배경 없는 텍스트 버튼). 저장/삭제 등 데이터 변경 최상위 액션은 일반 시리즈, 유틸/시트 위 버튼은 link 시리즈(client-component.md).
-- `size: "sm"|"lg"` — 패딩 크기. 시트 위/셀 버튼은 `"sm"`.
-- `inline: boolean` — true 면 width auto(인라인 배치). 기본은 width 100%.
-- `inset: boolean` — true 면 테두리·radius 제거(컨테이너 내장 버튼).
-- `disabled: boolean` — 비활성.
-- `buttonStyle: string` / `buttonClass: string` — 내부 `<button>` 에 직접 줄 스타일/클래스.
-- 사용: `<sd-button [theme]="'primary'" (click)="onSave()">저장</sd-button>`.
-
-### SdAnchor (`sd-anchor`)
-
-인라인 텍스트 링크/아이콘 버튼.
-
-- `theme: "primary"|...|"blue-gray"` — 텍스트 색(기본 `"primary"`). hover 시 underline.
-- `disabled: boolean` — true 면 흐려지고 포인터·tabindex 제거.
-- 사용: 시트 셀 안 액션 아이콘 `<sd-anchor [theme]="'danger'" (click)="onDelete()"><ng-icon [svg]="tablerEraser" /></sd-anchor>`.
-
-### SdAdditionalButton (`sd-additional-button`)
-
-콘텐츠 + 우측 버튼을 한 테두리로 묶는 컨테이너. `<ng-content>` 본문 + 투영된 `sd-anchor`/`sd-button`.
-
-- `size: "sm"|"lg"` — 패딩.
-- `inset: boolean` — 테두리·radius 제거.
-
-### SdModalSelectButton (`sd-modal-select-button`)
+테마 계열(여러 컨트롤 공통): `"primary"|"secondary"|"info"|"success"|"warning"|"danger"|"gray"|"blue-gray"`. 버튼은 추가로 link 계열(`"link"`·`"link-primary"`…`"link-rev"`)을 가짐.
 
-값 표시 + 검색 버튼으로 선택 모달을 띄우는 입력. 선택 결과(`SelectModalOutputResult`)를 `value` 에 반영.
+## 버튼·앵커
 
-- `modal: input.required<SdSelectModalInfo<SdSelectModal<K>>>` — 띄울 선택 모달 정보(`selectMode`/`selectedKeys` 는 자동 주입되므로 inputs 에서 제외).
-- `value: model<...>` — 선택 값. `selectMode="single"` 이면 단일 키, `"multi"` 면 키 배열.
-- `selectMode: "single"|"multi"` — 선택 모드(기본 `"single"`).
-- `modalOptions: SdModalOptions` — 모달 표시 옵션.
-- `required: boolean` — true 면 값 없을 때 invalid(빨간 점) + 지우개 버튼 숨김.
-- `disabled` / `inset` / `size` — 공통.
-- `searchIcon: input` — 검색 버튼 아이콘(기본 `tablerSearch`).
-- 동작: 검색 버튼 클릭 → 현재 값으로 `selectedKeys` 채워 모달 표시 → 결과로 `value` 갱신. required 가 아니고 값 있으면 지우개로 비움.
-- `SdSelectModal<TKey>` = `SdModalContentDef<SelectModalOutputResult<TKey>>` + `selectMode`/`selectedKeys` input. 선택 모달 컴포넌트가 구현(보통 `sd-crud-list` 를 모달로).
-- `SdSelectModalInfo<T>` = `SdModalInfo<T, "selectMode"|"selectedKeys">`.
+### SdButton — `sd-button`
+- `type: "button"|"submit"` — 폼 제출 버튼이면 `"submit"`.
+- `theme` — 위 테마 계열 + link 계열. 데이터 변경 액션은 일반 계열, 유틸/시트 버튼은 link 계열.
+- `size: "sm"|"lg"` — 크기. 시트 위 버튼은 `"sm"`.
+- `inline`/`inset`/`disabled: boolean` — 인라인 배치/테두리 제거/비활성.
+- `buttonStyle`/`buttonClass: string` — 내부 `<button>` 에 스타일/클래스 주입.
+
+### SdAnchor — `sd-anchor`
+- `disabled: boolean` — 비활성(클릭/포커스 차단).
+- `theme` — 테마 계열(기본 `"primary"`). 텍스트 링크형 액션.
+
+### SdAdditionalButton — `sd-additional-button`
+입력 옆에 버튼을 붙이는 컨테이너.
+- `size: "sm"|"lg"` — 크기.
+- `inset: boolean` — 테두리 제거.
+
+### SdModalSelectButton<K> — `sd-modal-select-button`
+모달로 항목을 골라 값으로 받는 버튼(필수 검증 내장).
+- `modal: input.required<SdSelectModalInfo<...>>` — 선택 모달. `selectMode`/현재 선택키 주입.
+- `value: model<단일|배열>` — 선택 결과.
+- `selectMode: "single"|"multi"` — 선택 모드(기본 single).
+- `required`/`disabled`/`inset: boolean`, `size: "sm"|"lg"` — 상태/크기.
+- `modalOptions: SdModalOptions` — 모달 옵션.
+- `searchIcon` — 검색 버튼 아이콘.
 
 ## 텍스트·숫자·날짜 입력
 
-### SdTextfield<K> (`sd-textfield`)
-
-타입별 핸들러로 파싱·포맷·검증하는 만능 입력. `value` 타입이 `type` 에 따라 결정됨.
-
-- `type: input.required<K extends keyof SdTextfieldTypes>` — 입력 타입. 값 타입 매핑(`SdTextfieldTypes`):
-  - `"text"|"password"|"email"|"color"|"format"` → `string`.
-  - `"number"` → `number`(콤마 표시, 우정렬).
-  - `"date"|"month"|"year"` → `DateOnly`.
-  - `"datetime"|"datetime-sec"` → `DateTime`(sec 는 초 포함).
-  - `"time"|"time-sec"` → `Time`.
-  - (`sdTextfieldTypes` 는 이 키들의 런타임 배열.)
-- `value: model<SdTextfieldTypes[K]>` — 값. 빈 입력은 `undefined`(결측 보존). 파싱 실패 시 표시값 롤백.
-- `placeholder` / `title` — 안내/툴팁.
-- `disabled` / `readonly` — readonly 는 값 표시만(input 미렌더).
-- `required: boolean` — 빈 값이면 invalid.
-- `min` / `max: SdTextfieldTypes[K]` — 숫자/날짜/시간 범위 검증.
-- `minlength` / `maxlength: number` / `pattern: string` — 문자열 길이·정규식 검증(text 계열).
-- `format: string` — `"format"` 타입의 마스킹 패턴(예: `"XXX-XXXX"`, `|` 로 여러 길이 후보).
-- `validatorFn: (value) => string | undefined` — 커스텀 검증. 메시지 반환 시 invalid.
-- `step: number` — 숫자/날짜 스텝.
-- `autocomplete: string` — 자동완성 속성.
-- `useNumberComma: boolean` — `"number"` 표시 시 천단위 콤마(기본 true). false 면 콤마 없이.
-- `minDigits: number` — 숫자 표시 최소 소수 자릿수.
-- `inline` / `inset` / `size` / `theme` / `inputStyle` / `inputClass` — 공통/스타일.
-- 사용: `<sd-textfield [type]="'number'" [(value)]="data().qty" (valueChange)="mark(data)" />`.
-
-### SdTextarea (`sd-textarea`)
-
-여러 줄 텍스트. 내용 줄 수에 따라 자동 높이(`minRows` 이상).
-
-- `value: model<string>` — 빈 값은 `undefined`.
-- `minRows: number` — 최소 줄 수(기본 1).
-- `placeholder` / `title` / `disabled` / `readonly` / `required` / `validatorFn` / `inline` / `inset` / `size` / `theme` / `inputStyle` / `inputClass` — `sd-textfield` 와 동일 의미.
-
-### SdNumpad (`sd-numpad`)
-
-터치 숫자 입력 패드 + 표시 필드.
-
-- `value: model<number>` — 입력된 숫자.
-- `placeholder: string` — 표시 필드 placeholder.
-- `required: boolean` — true 면 빈 값에서 ENT 비활성.
-- `inputDisabled: boolean` — true 면 상단 텍스트 직접 입력 막고 패드만.
-- `useEnterButton: boolean` — true 면 ENT 버튼 표시.
-- `useMinusButton: boolean` — true 면 부호(-) 버튼 표시.
-- `enterButtonClick: output()` — ENT 클릭 시 발화(확정 처리 트리거).
-
-### SdRange<K> (`sd-range`)
-
-`from ~ to` 두 입력. `to` 의 min 을 `from` 으로 자동 제한.
-
-- `type: input.required<K>` — `sd-textfield` 와 동일 타입 키.
-- `from: model<SdTextfieldTypes[K]>` / `to: model<SdTextfieldTypes[K]>` — 범위 양끝.
-- `required` / `disabled` / `inputStyle` — 공통.
-
-### SdDateRangePicker (`sd-date-range-picker`)
-
-기간 종류(일/월/범위) 선택 + 그에 맞는 날짜 입력. 종류·시작일 변경 시 `to` 자동 동기화(일=from과 동일, 월=그 달 1일~말일, 범위=from>to면 보정).
-
-- `periodType: model<"일"|"월"|"범위">` — 기간 종류(기본 `"범위"`).
-- `from: model<DateOnly>` / `to: model<DateOnly>` — 기간 양끝.
-- `required: boolean` — 필수 여부.
-- 사용: `<sd-date-range-picker [(from)]="filter().from" [(to)]="filter().to" (fromChange)="mark(filter)" />`.
+### SdTextfield<K> — `sd-textfield`
+타입별(`type` 으로 결정) 단일 입력. `SdTextfieldTypes` 키로 값 타입 결정.
+- `type: input.required<K>` — `SdTextfieldTypes` 의 키. 값 타입을 결정.
+- `value: model<SdTextfieldTypes[K]>` — 값(타입에 따라 string/number/`DateOnly`/`DateTime`/`Time`).
+- `placeholder`/`title: string` — 안내/타이틀.
+- `disabled`/`readonly`/`required: boolean` — 상태.
+- `min`/`max: SdTextfieldTypes[K]`, `minlength`/`maxlength`/`pattern`/`step` — 검증 제약.
+- `validatorFn: (value) => string | undefined` — 커스텀 검증(반환 문자열이 오류 메시지).
+- `format: string` — `format` 타입의 마스킹 패턴.
+- `useNumberComma: boolean` — 숫자 천단위 콤마(기본 true).
+- `minDigits: number` — 숫자 표시 최소 자릿수.
+- `inline`/`inset: boolean`, `size: "sm"|"lg"`, `theme` — 배치/크기/테마.
+- `inputStyle`/`inputClass`/`autocomplete` — 내부 input 속성.
+
+`SdTextfieldTypes` 키: `number`(number), `text`/`password`/`color`/`email`/`format`(string), `date`/`month`/`year`(`DateOnly`), `datetime`/`datetime-sec`(`DateTime`), `time`/`time-sec`(`Time`). 런타임 키 배열 `sdTextfieldTypes`.
+
+```html
+<sd-textfield [type]="'number'" [(value)]="data().qty" (valueChange)="mark(data)" [required]="true" />
+```
+
+### SdTextarea — `sd-textarea`
+여러 줄 텍스트. `value: model<string>`, `minRows: number`(기본 1), 외에 textfield 와 유사한 `placeholder`/`disabled`/`readonly`/`required`/`validatorFn`/`size`/`theme`/`inline`/`inset`/`inputStyle`/`inputClass`.
+
+### SdNumpad — `sd-numpad`
+화면 숫자 키패드 입력.
+- `value: model<number>` — 값.
+- `placeholder: string`, `required`/`inputDisabled: boolean` — 안내/필수/직접입력 비활성.
+- `useEnterButton`/`useMinusButton: boolean` — 엔터/마이너스 버튼 노출.
+- `enterButtonClick: output` — 엔터 버튼 클릭.
+
+### SdRange<K> — `sd-range`
+같은 타입 두 값(from/to) 범위 입력.
+- `type: input.required<K>` — `SdTextfieldTypes` 키.
+- `from`/`to: model<SdTextfieldTypes[K]>` — 범위 양끝.
+- `required`/`disabled: boolean`, `inputStyle: string`.
+
+### SdDateRangePicker — `sd-date-range-picker`
+기간 유형 + 날짜 범위 입력.
+- `periodType: model<"일"|"월"|"범위">` — 기간 단위(기본 `"범위"`). `"일"`/`"월"` 은 단일 날짜를 from/to 로 환산.
+- `from`/`to: model<DateOnly>` — 시작/끝 날짜.
+- `required: boolean`.
 
 ## 체크박스·스위치
 
-### SdCheckbox (`sd-checkbox`)
-
-체크박스 또는 라디오. `canChangeFn` 으로 변경 가드.
-
-- `value: model<boolean>` — 체크 상태.
-- `canChangeFn: (next: boolean) => boolean | Promise<boolean>` — 변경 시도 시 false(또는 Promise<false>) 면 변경 차단. 비동기 확인 후 변경에 사용.
-- `radio: boolean` — true 면 라디오 모양(클릭 시 항상 true, 토글 안 함).
-- `icon: input` — 체크 아이콘(기본 `tablerCheck`).
-- `disabled` / `size` / `inline` / `inset` / `theme`(+`"white"`) / `contentStyle` — 공통/스타일.
-- 사용: 라디오 그룹은 같은 모델을 `[radio]="true"` 체크박스 여러 개로.
-
-### SdSwitch (`sd-switch`)
-
-on/off 토글 스위치.
-
-- `value: model<boolean>` / `canChangeFn` — `sd-checkbox` 와 동일.
-- `disabled` / `inline` / `inset` / `size` / `theme` — 공통.
+### SdCheckbox — `sd-checkbox`
+- `value: model<boolean>` — 체크 여부.
+- `radio: boolean` — 라디오 모양(그룹 내 단일 선택).
+- `canChangeFn: (item) => boolean | Promise<boolean>` — 변경 허용 가드(`setupModelHook` 경유).
+- `icon` — 체크 아이콘(기본 `tablerCheck`).
+- `disabled`/`inline`/`inset: boolean`, `size: "sm"|"lg"` — 상태/크기.
+- `theme` — 테마 계열 + `"white"`. `contentStyle: string`.
 
-### SdCheckboxGroup<T> / SdCheckboxGroupItem<T> (`sd-checkbox-group` / `-item`)
+### SdSwitch — `sd-switch`
+- `value: model<boolean>` — on/off.
+- `canChangeFn` — 변경 가드.
+- `disabled`/`inline`/`inset: boolean`, `size`, `theme` — 상태/크기/테마.
 
-배열 값을 항목 체크로 토글하는 그룹.
-
-- `SdCheckboxGroup.value: model<T[]>` — 선택된 항목 배열.
-- `SdCheckboxGroup.disabled: boolean` — 그룹 전체 비활성.
-- `SdCheckboxGroupItem.value: input.required<T>` — 이 항목의 값. 체크 시 그룹 배열에 추가/제거.
-- `SdCheckboxGroupItem.inline: boolean` — 인라인 표시.
-- 사용: `<sd-checkbox-group [(value)]="selected"><sd-checkbox-group-item [value]="'a'">A</sd-checkbox-group-item>...</sd-checkbox-group>`.
+### SdCheckboxGroup<T> / SdCheckboxGroupItem<T>
+여러 항목 다중 선택 그룹.
+- `SdCheckboxGroup`: `value: model<T[]>`(선택된 값 배열), `disabled: boolean`.
+- `SdCheckboxGroupItem`: `value: input.required<T>`(이 항목 값), `inline: boolean`.
 
 ## 셀렉트·드롭다운
 
-### SdSelect<M,T> (`sd-select`) + SdSelectItem<T> / SdSelectButton
-
-드롭다운 셀렉트. 정적 항목(`sd-select-item` 투영) 또는 `items`+`itemOf` 템플릿, single/multi.
-
-- `selectMode: "single"|"multi"` — 선택 모드(기본 single). multi 면 헤더에 전체선택/해제 + 체크박스.
-- `value: model<SelectModeValue<any>[M]>` — single 이면 단일 값, multi 면 배열. `SelectModeValue<T> = { single: T; multi: T[] }`.
-- `placeholder: string` — 미선택 표시.
-- `required: boolean` — 빈 값이면 invalid.
-- `items: T[]` + `getChildrenFn: (item) => T[]|undefined` — 데이터 기반 항목(트리 가능). `trackByFn: (item, index) => unknown`.
-- `hideSelectAll: boolean` — multi 의 전체선택/해제 바 숨김.
-- `multiSelectionDisplayDirection: "vertical"` — multi 선택 표시를 세로 나열.
-- `disabled` / `inline` / `inset` / `size` / `contentClass` / `contentStyle` — 공통/스타일.
+### SdSelect<T, M> — `sd-select`
+드롭다운 선택. 직속 `<sd-select-item>` 들 또는 `[items]`+`[itemOf]` 템플릿으로 옵션 구성.
+- `selectMode: M`("single"|"multi", 기본 single) — 선택 모드.
+- `value: model<단일|배열>` — 선택 값(들).
+- `items: input<T[]>` + `trackByFn`/`getChildrenFn` — 데이터 기반 옵션(트리 지원).
+- `placeholder: string`, `required`/`disabled`/`inline`/`inset: boolean`, `size`.
+- `hideSelectAll: boolean` — multi 모드 전체선택 숨김.
+- `multiSelectionDisplayDirection: "vertical"` — 다중 선택 표시를 세로로.
 - `dropdownOpen: model<boolean>` — 드롭다운 열림 상태.
-- 내부 메서드 `selectItem`/`toggleItem`/`openDropdown`/`closeDropdown` 은 자식 `sd-select-item` 이 호출.
-- `SdSelectItem.value: input<T>` — 항목 값. `disabled` / `hidden` 으로 개별 제어. 클릭 시 부모 select 토글(single 은 닫힘).
-- `SdSelectButton` (`sd-select-button`) — 드롭다운 우측에 끼우는 액션 버튼(검색/편집 등). `<sd-select-button>` 으로 투영.
-- 사용: `<sd-select [(value)]="data().state" [required]="true"><sd-select-item [value]="'작성'">작성</sd-select-item></sd-select>`.
-
-### SdDropdown / SdDropdownPopup (`sd-dropdown` / `sd-dropdown-popup`)
-
-범용 드롭다운 토글 + 팝업. 위치 자동 배치, 모바일에선 하단 시트, 외부 클릭/blur/ESC 로 닫힘.
-
-- `SdDropdown.open: model<boolean>` — 열림 상태.
-- `SdDropdown.disabled: boolean` — true 면 토글 막음.
-- 본문 콘텐츠와 `<sd-dropdown-popup>` 을 자식으로 둠. `sd-select`·`sd-topbar-menu`·`sd-theme-selector` 등이 내부에서 사용.
-
-## 폼·접기·탭·리스트·페이지네이션
-
-### SdForm (`sd-form`)
-
-native form 래퍼. Enter/submit 버튼으로 submit, 검증 실패 시 네이티브 메시지·포커싱.
+- `contentClass`/`contentStyle: string`.
 
-- `formSubmit: output<SubmitEvent>` — 검증 통과 후 submit. `(formSubmit)="onSubmit()"`.
-- `formInvalid: output()` — 검증 실패 시.
-- `requestSubmit(): void` — 코드에서 submit 트리거. `formEl` getter 로 native form 접근.
-- `sd-crud-list`/`sd-crud-detail` 는 내부에 form 을 보유하므로 별도 래핑 불필요.
+`SelectModeValue<T>` — `{ multi: T[]; single: T }`(선택 모드별 값 타입).
 
-### SdCollapse / SdCollapseIcon (`sd-collapse` / `sd-collapse-icon`)
+### SdSelectItem<T> — `sd-select-item`
+- `value: input<T>` — 항목 값.
+- `disabled`/`hidden: boolean` — 비활성/숨김.
 
-- `SdCollapse.open: boolean` — true 면 펼침, false 면 높이 0 으로 접힘(높이 트랜지션). 콘텐츠 높이 변화 자동 재측정.
-- `SdCollapseIcon.open: boolean` — 열림이면 회전. `openRotate: number`(기본 90도) 만큼 회전. `icon`(기본 `tablerChevronDown`). 접기 토글 표시용.
+### SdSelectButton — `sd-select-button`
+셀렉트 드롭다운 안에 끼우는 액션 버튼(리플 내장). 입력 없음.
 
-### SdTab / SdTabItem (`sd-tab` / `sd-tab-item`)
+### SdDropdown / SdDropdownPopup — `sd-dropdown` / `sd-dropdown-popup`
+범용 드롭다운. `SdDropdown`: `open: model<boolean>`, `disabled: boolean`. 자식으로 트리거 컨텐츠 + `<sd-dropdown-popup>`(팝업 본문) 배치.
 
-- `SdTab.value: model<any>` — 선택된 탭 값.
-- `SdTabItem.value: input<any>` — 이 탭의 값. 클릭 시 부모 `value` 로 set, 일치하면 선택 표시.
-- 사용: `<sd-tab [(value)]="tab"><sd-tab-item [value]="'a'">A</sd-tab-item></sd-tab>`.
+## 폼·레이아웃 컨트롤
 
-### SdList / SdListItem (`sd-list` / `sd-list-item`)
+### SdForm — `sd-form`
+Enter 로 submit 처리. `formSubmit: output<SubmitEvent>`, `formInvalid: output`. (`sd-crud-*` 는 내부에 폼 보유, 별도 래핑 불필요.)
 
-세로 리스트(중첩 가능, accordion/flat).
+### SdCollapse / SdCollapseIcon
+- `SdCollapse`(`sd-collapse`): `open: boolean` — 펼침. 자식을 높이 애니메이션으로 접기/펼치기.
+- `SdCollapseIcon`(`sd-collapse-icon`): `icon`(기본 chevron), `open: boolean`, `openRotate: number`(열림 시 회전각, 기본 90).
 
-- `SdList.inset: boolean` — 배경 투명(중첩 리스트용).
-- `SdListItem.layout: "accordion"|"flat"` — 자식 리스트 동작. `"accordion"`(기본) = 클릭 토글로 펼침, `"flat"` = 항상 펼침(섹션 헤더처럼).
-- `SdListItem.open: model<boolean>` — accordion 펼침 상태.
-- `SdListItem.selected: boolean` — 선택 강조.
-- `SdListItem.selectedIcon: string` — leaf 항목에 선택 아이콘 표시.
-- `SdListItem.readonly: boolean` — 클릭 토글 비활성.
-- `SdListItem.contentStyle` / `contentClass` — 콘텐츠 행 스타일.
-- `#toolTpl` 템플릿으로 행 우측 도구 배치. 사이드바/탑바 메뉴가 이 위에 구성됨.
+### SdTab / SdTabItem
+- `SdTab`(`sd-tab`): `value: model<any>` — 선택된 탭 값.
+- `SdTabItem`(`sd-tab-item`): `value: input<any>` — 이 탭 값. 클릭 시 부모 `value` 갱신.
 
-### SdPagination (`sd-pagination`)
+### SdList / SdListItem
+- `SdList`(`sd-list`): `inset: boolean` — 테두리 제거(중첩 리스트).
+- `SdListItem`(`sd-list-item`): `layout: "accordion"|"flat"`(기본 accordion, 자식 펼침 방식), `open: model<boolean>`, `selected: boolean`, `selectedIcon: string`, `readonly: boolean`, `contentStyle`/`contentClass: string`.
 
-페이지 번호 네비게이터(처음/이전그룹/번호/다음그룹/끝).
+### SdGap — `sd-gap`
+빈 간격. `height`/`width: "xxs"|"xs"|"sm"|"default"|"lg"|"xl"|"xxl"`(토큰 간격), `heightPx`/`widthPx`/`widthEm: number`(절대 간격).
 
-- `currentPage: model<number>` — 0-based 현재 페이지.
-- `totalPageCount: number` — 전체 페이지 수(0 이면 비표시).
-- `visiblePageCount: number` — 한 번에 보일 번호 개수(기본 10).
-- 사용: `<sd-pagination [(currentPage)]="page" [totalPageCount]="pageLength()" />`. `sd-sheet`/`sd-crud-list` 가 내장.
+### SdPagination — `sd-pagination`
+- `currentPage: model<number>` — 현재 페이지(0 기반).
+- `totalPageCount: number` — 총 페이지 수.
+- `visiblePageCount: number` — 한 번에 보이는 페이지 번호 수(기본 10).