@simplysm/sd-claude 14.0.88 → 14.0.90

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

@@ -44,20 +44,19 @@ ORM 호출, 파일 변환, 비즈니스 로직 등은 위 두 경우에 해당
 
 ## 패키지 인덱스
 
-- **angular** — Angular 업무 화면 UI 키트(폼/시트/모달·토스트·Busy 오버레이/CRUD 골격/공유데이터/권한·메뉴/테마·에디터·시각화·칸반) 컴포넌트·디렉티브·프로바이더를 쓸 때. 자세히: [apis/angular/README.md](./apis/angular/README.md)
-- **capacitor-plugin-auto-update** — Android(Capacitor) 앱의 APK 자동 업데이트(서버/외부저장소 기반 버전 감지·다운로드·설치)와 그 하부 APK 설치 권한 관리·설치 인텐트 실행을 다룰 때. 자세히: [apis/capacitor-plugin-auto-update/README.md](./apis/capacitor-plugin-auto-update/README.md)
-- **capacitor-plugin-file-system** — Capacitor 기반 네이티브 파일 시스템(Android 외부/앱 저장소, Browser IndexedDB 에뮬레이션) 접근 — 파일 읽기/쓰기, 디렉토리 조회/생성, 삭제, 권한, 저장소 경로 조회가 필요할 때. 자세히: [apis/capacitor-plugin-file-system/README.md](./apis/capacitor-plugin-file-system/README.md)
-- **capacitor-plugin-intent** — Android 인텐트 송수신(브로드캐스트 구독/전송, 실행 인텐트 조회, newIntent 리스너, startActivityForResult 외부 Activity 실행) Capacitor 플러그인. 바코드 스캐너·PDA 등 산업용 디바이스 연동 시 사용, 웹은 미지원 스텁. 자세히: [apis/capacitor-plugin-intent/README.md](./apis/capacitor-plugin-intent/README.md)
-- **capacitor-plugin-usb-storage** — Capacitor USB Mass Storage 플러그인 — 정적 클래스 UsbStorage 로 USB 장치 목록 조회·권한 요청/확인·디렉토리 나열·파일(Bytes) 읽기. Android(libaums)/web(IndexedDB 에뮬레이션). 자세히: [apis/capacitor-plugin-usb-storage/README.md](./apis/capacitor-plugin-usb-storage/README.md)
-- **core-browser** — 브라우저 전용 유틸 — Element/HTMLElement 프로토타입 확장(탐색·가시성·상대좌표·스크롤), 클립보드 copy/paste 핸들러, getBounds 경계측정, Blob 다운로드·파일선택·진행률 fetch, IndexedDB KV 저장소·가상 파일시스템. 자세히: [apis/core-browser/README.md](./apis/core-browser/README.md)
-- **core-common** — 브라우저·Node 공용 유틸: 에러 계층(SdError류), 불변 날짜/시간(DateTime/DateOnly/Time), 큐·이벤트·로거, Array/Set/Map 프로토타입 확장, obj·str·num·bytes·path·json·xml·transfer·wait 네임스페이스, ZIP·코드 템플릿 태그·타입 유틸리티가 필요할 때. 자세히: [apis/core-common/README.md](./apis/core-common/README.md)
-- **core-node** — Node.js 전용 유틸 — 파일시스템 IO(fsx)·자식 프로세스 실행과 인코딩 디코딩(cpx)·경로 POSIX 정규화/판정(pathx)·파일 감시(FsWatcher)·consola 로깅 설정·worker_threads 타입 안전 래퍼(Worker)가 필요할 때. 자세히: [apis/core-node/README.md](./apis/core-node/README.md)
-- **excel** — OOXML(.xlsx) 워크북을 lazy-load 로 읽고 쓸 때 — 시트·셀 값/수식/병합·스타일·조건부 서식·이미지 삽입, Zod 스키마 기반 레코드 매핑(ExcelWrapper), 주소/날짜/숫자형식 변환 유틸(ExcelUtils). 자세히: [apis/excel/README.md](./apis/excel/README.md)
-- **lint** — ESLint flat config 프리셋(eslint-recommended)과 커스텀 규칙 9종 플러그인(eslint-plugin)으로 simplysm 워크스페이스의 JS/TS/HTML lint 규칙을 강제할 때. 자세히: [apis/lint/README.md](./apis/lint/README.md)
-- **orm-common** — Dialect 독립 ORM 코어 — Table/View/Procedure 빌더로 스키마를 정의하고 DbContext 에 등록해 연결·트랜잭션·DDL·마이그레이션을 수행하며, Queryable 체이닝과 expr 표현식 빌더로 타입 안전 SELECT/CUD 쿼리를 QueryDef AST 로 조립할 때. 자세히: [apis/orm-common/README.md](./apis/orm-common/README.md)
-- **orm-node** — Node 환경에서 DbContext 를 MSSQL/MySQL/PostgreSQL 에 연결해 구동하는 ORM 실행 계층. createOrm 으로 트랜잭션 단위 쿼리를 돌리거나, createDbConn/DbConn 저수준 계층으로 원시 SQL·bulk insert·수동 트랜잭션을 직접 다룰 때. 자세히: [apis/orm-node/README.md](./apis/orm-node/README.md)
-- **sd-cli** — sd.config.ts 설정 타입(SdConfig/SdConfigFn/패키지·배포·Capacitor·Electron·PWA), 패키지 .ts 증분 컴파일 엔진(SdTsCompiler), Vitest용 Angular AOT Vite 플러그인(sdAngularPlugin)을 다룰 때. 자세히: [apis/sd-cli/README.md](./apis/sd-cli/README.md)
-- **service-client** — WebSocket 기반 simplysm 서비스 서버 클라이언트 — 서비스 메서드 RPC 호출(getService/ServiceProxy), 인증, 서버 푸시 이벤트 구독, 파일 업/다운로드, 진행률 추적, ORM 원격 트랜잭션 실행이 필요할 때. 자세히: [apis/service-client/README.md](./apis/service-client/README.md)
-- **service-common** — 서버·클라 공유 서비스 통신 계약 — 바이너리 프로토콜(인코딩/청킹/재조립), 서비스 인터페이스 타입(ORM·자동업데이트·업로드), 타입 안전 이벤트 정의(defineEvent), 앱 메뉴/권한 구조 모델. 자세히: [apis/service-common/README.md](./apis/service-common/README.md)
-- **service-server** — Fastify 기반 서비스 서버(WebSocket/HTTP RPC·JWT 인증·정적파일/업로드·서버→클라이언트 이벤트 푸시·ORM/자동업데이트 빌트인 서비스·V1 레거시 호환)를 부팅·서비스 정의·인증 처리할 때. 자세히: [apis/service-server/README.md](./apis/service-server/README.md)
-- **storage** — FTP/FTPS/SFTP 원격 스토리지에 접속해 파일·디렉토리를 업로드·다운로드·조회·삭제할 때(StorageFactory.connect 권장 진입점). 자세히: [apis/storage/README.md](./apis/storage/README.md)
+- **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-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-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)
+- **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)
+- **service-common** — 서버·클라이언트 공유 서비스 통신 계약 — defineEvent 이벤트 정의, 내장 RPC 서비스(OrmService·AutoUpdateService) 시그니처, 앱 메뉴·권한·모듈 구조(AppStructure), WebSocket 바이너리 프로토콜·메시지 타입. 자세히: [apis/service-common/README.md](./apis/service-common/README.md)
+- **service-server** — Fastify 기반 RPC 서비스 서버(WebSocket/HTTP 전송, JWT 인증, 정적 파일·업로드, 서버측 이벤트 브로드캐스트, 내장 ORM/자동업데이트 서비스)를 띄우거나 defineService/auth 로 서비스 메서드를 작성할 때. 자세히: [apis/service-server/README.md](./apis/service-server/README.md)
+- **storage** — FTP/FTPS/SFTP 원격 스토리지에 접속해 파일·디렉토리를 업로드·다운로드·조회·삭제할 때(StorageFactory.connect 로 연결/종료 자동 관리). 자세히: [apis/storage/README.md](./apis/storage/README.md)

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

@@ -1,61 +1,57 @@
 # @simplysm/angular
 
-Angular 기반 업무 화면 UI 컴포넌트·디렉티브·프로바이더 묶음. `provideSdAngular()` 로 부트스트랩하고, 폼 컨트롤·시트·모달/토스트/Busy 오버레이·CRUD 화면 골격·권한/공유데이터 인프라를 standalone 컴포넌트로 제공. zoneless(Signal 기반) 전제이며 모든 입력은 Angular `input()`/`model()` 시그널.
+Angular(zoneless) 기반 SI/업무 클라이언트용 UI 컴포넌트·디렉티브·프로바이더·signal 헬퍼 라이브러리. `import "@simplysm/core-browser"` 를 side-effect 로 로드하며, 모든 컴포넌트는 standalone + OnPush + `ViewEncapsulation.None`, selector 는 `sd-` prefix.
 
-## 사용 트리거 인덱스
-
-- **provideSdAngular / 설정·로깅·서비스 인프라** — 앱 부트스트랩, 클라이언트명 주입, 시스템 로그/로컬스토리지/시스템설정 저장, 서비스 클라이언트 연결, 전역 에러 처리. 자세히: [infra.md](./infra.md)
-- **모달 / 토스트 / Busy / 인쇄(오버레이)** — 프로그래밍 방식 모달·확인/프롬프트 모달, 토스트 알림, 로딩 표시, 인쇄·PDF 생성. 자세히: [overlay.md](./overlay.md)
-- **폼 컨트롤·버튼·선택 컨트롤** — textfield/textarea/numpad/range/checkbox/switch/select/dropdown/form/collapse/tab/list/gap/pagination/button. 자세히: [controls.md](./controls.md)
-- **레이아웃(사이드바·탑바)** — 사이드바/탑바 컨테이너·메뉴·사용자 메뉴로 화면 셸 구성. 자세히: [layout.md](./layout.md)
-- **시트(sd-sheet)** — 트리/페이징/정렬/고정열/셀편집/선택 그리드. 자세히: [sheet.md](./sheet.md)
-- **CRUD 화면 골격** — 목록(sd-crud-list)·상세(sd-crud-detail)·기반 컨테이너(sd-base-container) 화면 템플릿. 자세히: [crud.md](./crud.md)
-- **공유 데이터(shared-data)** — 서버 공유 마스터데이터 등록·구독, 선택 컨트롤(select/select-button/select-list). 자세히: [shared-data.md](./shared-data.md)
-- **라우팅 / 앱 구조(메뉴·권한)** — 페이지 코드·뷰 타입·제목 시그널, 라우터링크, 앱 구조→메뉴/권한 변환, 권한 테이블. 자세히: [routing-appstructure.md](./routing-appstructure.md)
-- **선택/정렬/확장 매니저** — sd-sheet/공유선택 컨트롤이 공유하는 selection/sorting/expanding 로직 컴포저블. 자세히: [selection-managers.md](./selection-managers.md)
-- **부가 기능(테마·주소·에디터·시각화)** — 다크모드/폰트크기, 주소검색 모달, TipTap 리치에디터, 라벨/노트/진행률/달력/바코드/ECharts, 칸반, 상태 프리셋. 자세히: [features.md](./features.md)
-- **호스트 디렉티브·동작 셋업** — resize/intersection/이벤트옵션/명령키 디렉티브, ripple/show-effect/invalid 셋업, 타입드 템플릿. 자세히: [directives.md](./directives.md)
-
-## 유틸 타입·헬퍼 (인라인)
+> 사용 예 패턴 근거: `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` 금지 등은 매뉴얼을 따름.
 
-군에 속하지 않는 소형 유틸. 모두 `@simplysm/angular` 루트에서 직접 import.
-
-### mark
-
-`mark(sig: WritableSignal<any>): void` — 시그널 값을 in-place mutation 한 뒤 소비자에게 변경을 알림.
+## 사용 트리거 인덱스
 
-- `sig` — 대상 WritableSignal. 값이 배열이면 `[...v]`, 객체면 `{...v}` 로 얕은 복사해 새 참조로 set → OnPush/computed 재평가 트리거. push·속성변경 후 한 줄로 갱신 신호를 줄 때.
+- **앱 부트스트랩·전역 프로바이더** — `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)
 
-```typescript
-items().push(x); // 참조 동일 → 안 알려짐
-mark(items);     // 얕은 복사로 새 참조 → 변경 전파
-```
+아래는 군을 별도로 둘 만큼 크지 않은 유틸·타입·표시용 심볼의 인라인 섹션이다.
 
-### setSafeStyle
+## signal·DOM 유틸
 
-`setSafeStyle(renderer: Renderer2, el: HTMLElement, style: Partial<CSSStyleDeclaration>): void` — Renderer2 로 여러 인라인 스타일을 한 번에 적용.
+- `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 내부).
 
-- `renderer` — Angular `Renderer2` 인스턴스. 키별로 `renderer.setStyle` 호출.
-- `el` — 대상 엘리먼트.
-- `style` — CSS 속성 부분 객체. 동작 셋업 함수(setupInvalid 등)가 내부적으로 사용.
+## FormatPipe (`format` 파이프)
 
-### FormatPipe (`| format`)
+- `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' }}`.
 
-`transform(value: string | DateTime | DateOnly | undefined, format: string): string` — 값을 포맷 문자열로 변환하는 standalone 파이프(name `format`).
+## 디렉티브 입력 추론 타입
 
-- `value` — 대상. `null`/`undefined` 면 `""`. `DateTime`/`DateOnly` 면 `value.toFormatString(format)`. 문자열이면 `X` 자리표시자 마스킹 적용(길이 일치 시).
-- `format` — 포맷 문자열. 문자열 입력 시 `|` 로 분리한 후보 중 `X` 개수가 값 길이와 같은 패턴을 골라 `X` 를 한 글자씩 치환(예: `"XXX-XXXX"`).
+모달/토스트/인쇄 provider 의 `inputs` 타입 계산에 쓰이는 유틸 타입. 직접 쓸 일은 드물지만 시그니처 해석용으로 노출됨.
 
-### DirectiveInputSignals / UndefToOptional / WithOptional (타입)
+- `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` 에서 "기본값 있는 입력은 생략 가능" 을 표현.
 
-컴포넌트의 `input()` 시그널 집합에서 값 타입을 추출하는 유틸 타입. 모달/토스트/인쇄 콘텐츠 컴포넌트의 `inputs` 타입 추론에 쓰임.
+## SelectModalOutputResult
 
-- `DirectiveInputSignals<T>` — `T` 의 `InputSignal` 프로퍼티만 골라 `{ key: 값타입 }` 로 변환. `InputSignal<V>` → `V`, undefined 포함 필드는 optional.
-- `UndefToOptional<T>` — `T` 의 필드 중 `undefined` 를 포함하는 키를 optional(`?`)로 바꾸고 값에서 `undefined` 제외.
-- `WithOptional<T, K>` — `T` 의 키 `K` 들만 optional 로 변환.
+- `interface SelectModalOutputResult<TKey = any> { selectedKeys: TKey[] }` — 선택 전용 모달이 close 시 emit 하는 페이로드 규약. `SdSelectModal` / `SdModalSelectButton` / `sd-shared-data-select` 모달 연동의 반환 타입. 선택 모달 컴포넌트는 이 타입을 `close.emit` 으로 돌려줌.
 
-### SelectModalOutputResult (타입)
+## SdGap (`sd-gap`)
 
-`interface SelectModalOutputResult<TKey = any> { selectedKeys: TKey[] }` — 선택 모달이 close 로 반환하는 결과 형태.
+여백 전용 빈 컴포넌트. flex 레이아웃 사이 간격을 토큰/픽셀로 삽입.
 
-- `selectedKeys` — 선택된 키 배열. 단일 선택이어도 배열. `SdSelectModal` 구현 모달이 확정 시 emit.
+- `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'" />`.

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

@@ -1,119 +1,213 @@
-# @simplysm/angular — 폼 컨트롤·버튼·선택 컨트롤
+# @simplysm/angular — 폼·기본 입력 컨트롤
 
-폼·입력·선택·버튼·드롭다운·리스트류 standalone 컴포넌트. 공통 패턴: 값은 `model()` 양방향, `disabled`/`inset`/`size`(`"sm"|"lg"`)/`inline`/`required` 다수 공유. 공통 theme literal = `"primary"|"secondary"|"info"|"success"|"warning"|"danger"|"gray"|"blue-gray"`. `required` 컨트롤은 내부 `setupInvalid` 로 네이티브 폼 검증과 연동되어 `<sd-form>` 안에서 동작.
+버튼·앵커, 텍스트/숫자/날짜 입력, 체크박스/스위치, 셀렉트/드롭다운, 폼/접기/탭/리스트/페이지네이션 등 폼·UI 기본 컨트롤 군. 화면 폼·필터·시트 셀에서 함께 쓰임. 공통: 거의 모든 컨트롤이 `size: "sm"|"lg"`(미지정=기본), `inline`, `inset`(테두리 제거·셀 내장용), `disabled`, `theme` 을 가짐. 매뉴얼(client-component.md "표준 입력 컨트롤"·"버튼 스타일")의 역할별 theme/size 규약을 따름.
 
-## SdButton / SdAnchor / SdAdditionalButton
+## 버튼·앵커
 
-- `<sd-button>` — 버튼. `type: "button"|"submit"`(폼 제출 트리거 여부), `theme`(공통 8색 + `"link"`/`"link-{색}"`/`"link-rev"` 텍스트버튼), `inline`(인라인폭), `inset`(테두리 없는 삽입형), `size`, `disabled`, `buttonStyle`/`buttonClass`(내부 `<button>` 에 적용). 클릭 ripple 내장.
-- `<sd-anchor>` — 텍스트 링크형 클릭 요소. `disabled`, `theme`(공통 8색, 기본 `"primary"`). disabled 면 tabindex 제거.
-- `<sd-additional-button>` — 콘텐츠 + 우측 버튼(`sd-anchor`/`sd-button` 투영) 결합 박스. `size`, `inset`.
+### SdButton (`sd-button`)
 
-## SdModalSelectButton
+- `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>`.
 
-`<sd-modal-select-button>` — 모달로 선택하는 값 입력 버튼(검색 아이콘 → 선택모달, 지우개 → 초기화).
+### SdAnchor (`sd-anchor`)
 
-- `modal = input.required<SdSelectModalInfo<SdSelectModal<K>>>()` — 띄울 선택 모달 정보(`selectMode`/`selectedKeys` 제외 inputs).
-- `value = model<...>()` — 선택 결과 키(single=단일, multi=배열).
-- `selectMode: "single"|"multi"` — 선택 모드. 기본 `"single"`.
-- `disabled`/`required`(필수검증)/`inset`/`size` — 공통.
-- `modalOptions` — `SdModalOptions` 전달.
-- `searchIcon` — 검색 버튼 아이콘(기본 tablerSearch).
+인라인 텍스트 링크/아이콘 버튼.
 
-타입: `SdSelectModal<TKey>`(선택모달 인터페이스, `selectMode`/`selectedKeys` input 추가), `SdSelectModalInfo<T>`(`SdModalInfo` 에서 `selectMode`/`selectedKeys` 제외).
+- `theme: "primary"|...|"blue-gray"` — 텍스트 색(기본 `"primary"`). hover 시 underline.
+- `disabled: boolean` — true 면 흐려지고 포인터·tabindex 제거.
+- 사용: 시트 셀 안 액션 아이콘 `<sd-anchor [theme]="'danger'" (click)="onDelete()"><ng-icon [svg]="tablerEraser" /></sd-anchor>`.
 
-## SdTextfield
+### SdAdditionalButton (`sd-additional-button`)
 
-`<sd-textfield>` — 타입별 단일값 입력. 제네릭 `K extends keyof SdTextfieldTypes` 로 값 타입이 결정됨.
+콘텐츠 + 우측 버튼을 한 테두리로 묶는 컨테이너. `<ng-content>` 본문 + 투영된 `sd-anchor`/`sd-button`.
 
-- `type = input.required<K>()` — 입력 타입(아래 `SdTextfieldTypes` 키). 값 타입·검증·표시 포맷을 결정.
-- `value = model<SdTextfieldTypes[K]>()` — 값(타입별 number/string/DateOnly/DateTime/Time).
-- `placeholder`/`title`/`inputStyle`/`inputClass` — 표시 부가.
-- `disabled`/`readonly` — 비활성/읽기전용(둘 다 input 숨기고 텍스트만).
-- `required`/`min`/`max`/`minlength`/`maxlength`/`pattern`/`validatorFn`/`format` — 검증 옵션. `validatorFn(value) => string | undefined` 는 커스텀 메시지, `format` 은 `type: "format"` 마스킹.
-- `step`/`autocomplete` — 네이티브 속성.
-- `useNumberComma` — number 타입 천단위 콤마. 기본 true.
-- `minDigits` — number 표시 시 최소 소수 자릿수.
-- `inline`/`inset`/`size`/`theme` — 공통 레이아웃.
+- `size: "sm"|"lg"` — 패딩.
+- `inset: boolean` — 테두리·radius 제거.
 
-`SdTextfieldTypes`(타입 키 → 값 타입): `number`→number, `text`/`password`/`color`/`email`/`format`→string, `date`/`month`/`year`→DateOnly, `datetime`/`datetime-sec`→DateTime, `time`/`time-sec`→Time. `sdTextfieldTypes` 는 이 키들의 배열.
+### SdModalSelectButton (`sd-modal-select-button`)
 
-```html
-<sd-textfield [type]="'number'" [(value)]="qty" [min]="0" [required]="true" />
-<sd-textfield [type]="'date'" [(value)]="orderDate" />
-```
+값 표시 + 검색 버튼으로 선택 모달을 띄우는 입력. 선택 결과(`SelectModalOutputResult`)를 `value` 에 반영.
 
-## SdTextarea
+- `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">`.
 
-`<sd-textarea>` — 여러 줄 문자열 입력. `value = model<string>()`, `minRows`(최소 줄수, 내용 따라 자동 확장), `placeholder`/`title`/`disabled`/`readonly`/`required`/`inline`/`inset`/`size`/`theme`/`validatorFn`/`inputStyle`/`inputClass`.
+## 텍스트·숫자·날짜 입력
 
-## SdNumpad
+### SdTextfield<K> (`sd-textfield`)
 
-`<sd-numpad>` — 터치 숫자패드. `value = model<number>()`, `placeholder`, `required`, `inputDisabled`(상단 입력칸 비활성), `useEnterButton`(ENT 버튼 표시), `useMinusButton`(부호 토글), `enterButtonClick = output()`(ENT 클릭).
+타입별 핸들러로 파싱·포맷·검증하는 만능 입력. `value` 타입이 `type` 에 따라 결정됨.
 
-## SdRange
+- `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)" />`.
 
-`<sd-range>` — from~to 범위 입력(textfield 2개). 제네릭 `K extends keyof SdTextfieldTypes`. `type = input.required<K>()`, `from`/`to = model<SdTextfieldTypes[K]>()`(to 의 min 은 from 자동), `inputStyle`, `required`, `disabled`.
+### SdTextarea (`sd-textarea`)
 
-## SdDateRangePicker
+여러 줄 텍스트. 내용 줄 수에 따라 자동 높이(`minRows` 이상).
 
-`<sd-date-range-picker>` — 일/월/범위 기간 선택. `periodType = model<"일"|"월"|"범위">()`(기본 `"범위"`), `from`/`to = model<DateOnly>()`, `required`. 월 선택 시 from/to 를 해당 월 1일~말일로 동기화, 일 선택 시 to=from.
+- `value: model<string>` — 빈 값은 `undefined`.
+- `minRows: number` — 최소 줄 수(기본 1).
+- `placeholder` / `title` / `disabled` / `readonly` / `required` / `validatorFn` / `inline` / `inset` / `size` / `theme` / `inputStyle` / `inputClass` — `sd-textfield` 와 동일 의미.
 
-## SdCheckbox / SdSwitch / SdCheckboxGroup(Item)
+### SdNumpad (`sd-numpad`)
 
-- `<sd-checkbox>` — 체크박스/라디오. `value = model(false)`, `canChangeFn`(변경 허용 함수, `(boolean) => boolean|Promise<boolean>`), `radio`(라디오 외형·체크만 가능), `icon`(체크 아이콘), `disabled`/`size`/`inline`/`inset`/`theme`(공통 8색 + `"white"`), `contentStyle`. Space 키 토글.
-- `<sd-switch>` — 토글 스위치. `value = model(false)`, `canChangeFn`, `disabled`/`inline`/`inset`/`size`/`theme`. on 시 success 색.
-- `<sd-checkbox-group>` — 다중선택 그룹. `value = model<T[]>([])`(선택값 배열), `disabled`.
-- `<sd-checkbox-group-item>` — 그룹 항목. `value = input.required<T>()`(항목 값), `inline`. 부모 group 의 배열에 포함되면 체크.
+터치 숫자 입력 패드 + 표시 필드.
 
-## SdSelect / SdSelectItem / SdSelectButton
+- `value: model<number>` — 입력된 숫자.
+- `placeholder: string` — 표시 필드 placeholder.
+- `required: boolean` — true 면 빈 값에서 ENT 비활성.
+- `inputDisabled: boolean` — true 면 상단 텍스트 직접 입력 막고 패드만.
+- `useEnterButton: boolean` — true 면 ENT 버튼 표시.
+- `useMinusButton: boolean` — true 면 부호(-) 버튼 표시.
+- `enterButtonClick: output()` — ENT 클릭 시 발화(확정 처리 트리거).
 
-- `<sd-select>` — 드롭다운 선택. 제네릭 `<M, T>`.
-  - `selectMode: M("single"|"multi")` — 선택 모드. 기본 `"single"`.
-  - `value = model<SelectModeValue<any>[M]>()` — single=단일값, multi=배열.
-  - `placeholder`/`disabled`/`inline`/`inset`/`size`/`required` — 공통.
-  - `hideSelectAll` — multi 의 전체선택/해제 바 숨김.
-  - `multiSelectionDisplayDirection: "vertical"` — multi 선택 표시 줄바꿈.
-  - `items`/`trackByFn`/`getChildrenFn` — 데이터 바인딩 방식(템플릿 `[itemOf]` 와 병행). `getChildrenFn` 지정 시 트리.
-  - `contentClass`/`contentStyle`, `dropdownOpen = model(false)`.
-  - `SelectModeValue<T>` = `{ multi: T[]; single: T }`.
-- `<sd-select-item>` — 선택 항목. `value = input<T>()`, `disabled`, `hidden`. multi 면 체크박스 표시. 콘텐츠 HTML 이 선택 표시에 사용됨.
-- `<sd-select-button>` — select 내부 우측 액션 버튼(ripple).
+### SdRange<K> (`sd-range`)
 
-```html
-<sd-select [(value)]="deptId" [required]="true">
-  <sd-select-item [value]="undefined">미지정</sd-select-item>
-  @for (d of depts) { <sd-select-item [value]="d.id">{{ d.name }}</sd-select-item> }
-</sd-select>
-```
+`from ~ to` 두 입력. `to` 의 min 을 `from` 으로 자동 제한.
 
-## SdDropdown / SdDropdownPopup
+- `type: input.required<K>` — `sd-textfield` 와 동일 타입 키.
+- `from: model<SdTextfieldTypes[K]>` / `to: model<SdTextfieldTypes[K]>` — 범위 양끝.
+- `required` / `disabled` / `inputStyle` — 공통.
 
-- `<sd-dropdown>` — 트리거 + 팝업 래퍼. `open = model(false)`, `disabled`. 팝업은 body 로 이동·위치 자동 계산(상/하·좌/우), 모바일은 하단 시트 + 백드롭. ArrowDown/Up/Space/ESC 키 처리.
-- `<sd-dropdown-popup>` — 팝업 콘텐츠. content 투영, 높이 300px 초과 시 스크롤 캡.
+### SdDateRangePicker (`sd-date-range-picker`)
 
-## SdForm
+기간 종류(일/월/범위) 선택 + 그에 맞는 날짜 입력. 종류·시작일 변경 시 `to` 자동 동기화(일=from과 동일, 월=그 달 1일~말일, 범위=from>to면 보정).
 
-`<sd-form>` — 네이티브 검증 연동 폼 래퍼. `formSubmit = output<SubmitEvent>()`(검증 통과 시), `formInvalid = output()`(실패 시 `reportValidity` 후). `requestSubmit()` 메서드로 외부 제출. 내부 컨트롤의 `setupInvalid` 검증과 함께 동작.
+- `periodType: model<"일"|"월"|"범위">` — 기간 종류(기본 `"범위"`).
+- `from: model<DateOnly>` / `to: model<DateOnly>` — 기간 양끝.
+- `required: boolean` — 필수 여부.
+- 사용: `<sd-date-range-picker [(from)]="filter().from" [(to)]="filter().to" (fromChange)="mark(filter)" />`.
 
-## SdCollapse / SdCollapseIcon
+## 체크박스·스위치
 
-- `<sd-collapse>` — 높이 애니메이션 접기. `open = input(false)`. 콘텐츠 높이 측정해 margin-top 으로 접음.
-- `<sd-collapse-icon>` — 회전 화살표 아이콘. `icon`(기본 chevronDown), `open = input(false)`, `openRotate = input(90)`(열림 시 회전각).
+### SdCheckbox (`sd-checkbox`)
 
-## SdTab / SdTabItem
+체크박스 또는 라디오. `canChangeFn` 으로 변경 가드.
 
-- `<sd-tab>` — 탭 바. `value = model<any>()` — 선택된 탭 값.
-- `<sd-tab-item>` — 탭 항목. `value = input<any>()`. 부모 value 와 같으면 선택 표시, 클릭 시 부모 value set.
+- `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"` 체크박스 여러 개로.
 
-## SdList / SdListItem
+### SdSwitch (`sd-switch`)
 
-- `<sd-list>` — 리스트 컨테이너. `inset = input(false)`(배경 투명).
-- `<sd-list-item>` — 리스트 항목. `layout: "accordion"|"flat"`(기본 accordion; flat 은 그룹헤더+상시펼침), `open = model(false)`(아코디언 펼침), `selected`, `selectedIcon`(선택 표시 아이콘), `readonly`, `contentStyle`/`contentClass`. 자식 `<sd-list>` 투영 시 하위 트리. `#toolTpl` 로 우측 도구 영역.
+on/off 토글 스위치.
 
-## SdGap
+- `value: model<boolean>` / `canChangeFn` — `sd-checkbox` 와 동일.
+- `disabled` / `inline` / `inset` / `size` / `theme` — 공통.
 
-`<sd-gap>` — 빈 간격. `height`/`width: "xxs"|"xs"|"sm"|"default"|"lg"|"xl"|"xxl"`(CSS 변수 기반), `heightPx`/`widthPx`/`widthEm`(수치). 0 이면 `display:none`, width 계열이면 inline-block, height 면 block.
+### SdCheckboxGroup<T> / SdCheckboxGroupItem<T> (`sd-checkbox-group` / `-item`)
 
-## SdPagination
+배열 값을 항목 체크로 토글하는 그룹.
 
-`<sd-pagination>` — 페이지 네비. `currentPage = model(0)`(0-base 현재 페이지), `totalPageCount = input(0)`(전체 페이지 수), `visiblePageCount = input(10)`(한 그룹에 보일 페이지 버튼 수). 처음/이전그룹/페이지번호/다음그룹/마지막 버튼.
+- `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>`.
+
+## 셀렉트·드롭다운
+
+### 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` — 공통/스타일.
+- `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, 검증 실패 시 네이티브 메시지·포커싱.
+
+- `formSubmit: output<SubmitEvent>` — 검증 통과 후 submit. `(formSubmit)="onSubmit()"`.
+- `formInvalid: output()` — 검증 실패 시.
+- `requestSubmit(): void` — 코드에서 submit 트리거. `formEl` getter 로 native form 접근.
+- `sd-crud-list`/`sd-crud-detail` 는 내부에 form 을 보유하므로 별도 래핑 불필요.
+
+### SdCollapse / SdCollapseIcon (`sd-collapse` / `sd-collapse-icon`)
+
+- `SdCollapse.open: boolean` — true 면 펼침, false 면 높이 0 으로 접힘(높이 트랜지션). 콘텐츠 높이 변화 자동 재측정.
+- `SdCollapseIcon.open: boolean` — 열림이면 회전. `openRotate: number`(기본 90도) 만큼 회전. `icon`(기본 `tablerChevronDown`). 접기 토글 표시용.
+
+### SdTab / SdTabItem (`sd-tab` / `sd-tab-item`)
+
+- `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`)
+
+세로 리스트(중첩 가능, accordion/flat).
+
+- `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` 템플릿으로 행 우측 도구 배치. 사이드바/탑바 메뉴가 이 위에 구성됨.
+
+### SdPagination (`sd-pagination`)
+
+페이지 번호 네비게이터(처음/이전그룹/번호/다음그룹/끝).
+
+- `currentPage: model<number>` — 0-based 현재 페이지.
+- `totalPageCount: number` — 전체 페이지 수(0 이면 비표시).
+- `visiblePageCount: number` — 한 번에 보일 번호 개수(기본 10).
+- 사용: `<sd-pagination [(currentPage)]="page" [totalPageCount]="pageLength()" />`. `sd-sheet`/`sd-crud-list` 가 내장.

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

@@ -1,50 +1,41 @@
-# @simplysm/angular — CRUD 화면 골격
-
-목록·상세 화면의 표준 레이아웃(타이틀바·커맨드 영역·콘텐츠·하단 커맨드)과 busy·권한제한·뷰타입(page/modal/control)별 분기·모달 선택 모드를 제공하는 컨테이너. 콘텐츠는 `<ng-template #...>` 슬롯으로 주입. `viewType` 은 `injectViewTypeSignal()`(routing 군) 결과를 넣는 것이 일반적.
-
-## SdBaseContainer
-
-`<sd-base-container>` — 모든 CRUD 컨테이너의 기반. busy·권한제한·뷰타입 분기·공유데이터 로드 대기 처리.
-
-- `viewType = input.required<SdViewType>()` — `"page"|"modal"|"control"`. page 면 탑바+제목 표시, 그 외엔 콘텐츠만.
-- `initialized = input(false)` — 초기화 완료 여부. false 면 busy 표시.
-- `restricted = input(false)` — 권한 제한. true 면 콘텐츠 대신 "사용권한 없음" 안내.
-- `ready = model(false)` — 준비 완료 신호(공유데이터 대기 후 set).
-- `busyCount = model(0)` — busy 카운트(0 초과 시 busy).
-- 슬롯: `#topbarTpl`(탑바 액션), `#commandTpl`(상단 커맨드 바), `#contentTpl`(본문), `#bottomCommandTpl`(하단 커맨드). `viewTitle` 은 라우팅 군의 제목 신호 자동 사용.
-
-## SdCrudDetail
-
-`<sd-crud-detail>` — 단일 레코드 상세/편집 화면. 저장 버튼·CTRL+S·폼 검증 연동.
-
-- `viewType = input.required<SdViewType>()` — 뷰 타입. page=탑바 저장버튼, control=상단 저장버튼, modal=하단 확인버튼.
-- `initialized`/`restricted`/`busyCount`/`ready` — `SdBaseContainer` 와 동일 의미.
-- `readonly = input(false)` — 읽기전용(폼·저장버튼 숨김).
-- `submit = output()` — 저장(폼 검증 통과) 시 emit. CTRL+S/저장버튼 → 폼 제출 → 이 이벤트.
-- 슬롯: `#commandTpl`/`#contentTpl`/`#bottomCommandTpl`. contentTpl 은 readonly 가 아니면 `<sd-form>` 으로 감싸짐.
-
-## SdCrudList
-
-`<sd-crud-list>` — 목록 화면(필터 폼 + 시트 + 등록/삭제/복구/선택). 제네릭 `<TItem, TKey>`.
-
-- `viewType = input.required<SdViewType>()` / `initialized`/`restricted`/`busyCount`/`ready`/`readonly` — 기반 동일.
-- `key = input.required<string>()` — 시트 설정 키(`{key}-sheet`).
-- `selectMode: "single"|"multi"` — 모달 선택 모드. modal 뷰에서 single 은 행 선택 즉시 확정 close, multi 는 확인 버튼.
-- `items = input<TItem[]>([])` — 목록 데이터.
-- `selectedKeys = model<NonNullable<TKey>[]>([])` — 선택 키.
-- `trackByFn = input.required<(item) => TKey>()` — 행 키 추출.
-- `currDeletedItems = input<TItem[]>([])` — 삭제 표시(취소선) 항목 집합.
-- `currentPage = model(0)`/`totalPageCount`/`itemsPerPage`/`visiblePageCount`/`sorts = model<SortingDef[]>()` — 페이징·정렬(시트로 전달).
-- outputs: `filterSubmit`(조회 버튼), `submit`(저장/CTRL+S), `create`(등록 버튼), `delete = output<TItem[]>()`(선택/행 삭제), `restore = output<TItem[]>()`(선택/행 복구).
-- 슬롯: `#filterTpl`(필터 폼 필드), `#commandTpl`/`#toolTpl`/`#bottomCommandTpl`. `<sd-sheet-column>` 자식은 시트 컬럼으로 합쳐짐(삭제 컬럼은 자동 주입).
-
-```html
-<sd-crud-list [viewType]="viewType()" key="user" [items]="users()"
-              [(selectedKeys)]="sel" [trackByFn]="trackById"
-              (create)="onCreate()" (delete)="onDelete($event)" (submit)="onSave()">
-  <ng-template #filterTpl><sd-textfield [type]="'text'" [(value)]="filter.name" /></ng-template>
-  <sd-sheet-column key="name" header="이름">
-    <ng-template [cell]="users()" let-item="item">{{ item.name }}</ng-template>
-  </sd-sheet-column>
-</sd-crud-list>
-```
+# @simplysm/angular — CRUD 화면 표준 골격
+
+목록/단건 화면의 표준 컨테이너 골격. `sd-base-container`(공통 셸) 위에 `sd-crud-list`(목록), `sd-crud-detail`(단건)이 얹힘. 표준 시그널(ready/initialized/busyCount/viewType)·page/modal/control 컨텍스트별 탑바/하단바 자동 구성·CTRL+S 저장을 내장. 화면 데이터 흐름·시그널 전파 규약은 client-component.md / client-crud.md 를 따름.
+
+## SdBaseContainer (`sd-base-container`)
+
+모든 화면의 공통 셸. busy 오버레이 + 권한 제한 표시 + (page 모드) 탑바 + 슬롯(content/command/bottom) 구성. 공유 데이터 로드 완료까지 ready 를 지연.
+
+- `ready: model<boolean>` — 데이터 로드 시작 허용 시점. 공유데이터 대기 후 자동 true(자식 effect 발화 트리거). 부모↔자식 전파.
+- `initialized: input<boolean>` — 첫 로드 완료 여부. true 여야 콘텐츠 렌더(아니면 busy).
+- `busyCount: model<number>` — 진행 중 작업 수(>0 이면 busy). 자식과 양방향.
+- `restricted: input<boolean>` — true 면 콘텐츠 대신 "사용권한 없음" 안내 표시. `[restricted]="!perms().includes('use')"`.
+- `viewType: input.required<SdViewType>` — page/modal/control. page 면 탑바 + 제목 표시. `injectViewTypeSignal()` 결과 전달.
+- 슬롯: `#topbarTpl`(page 탑바 우측), `#commandTpl`(상단 명령줄), `#contentTpl`(본문), `#bottomCommandTpl`(하단 명령줄).
+- 사용: view 합성의 루트(client-component.md). 직접 화면을 list/detail 없이 짤 때 사용.
+
+## SdCrudList<TItem, TKey> (`sd-crud-list`)
+
+목록 화면 골격. 내부에 `sd-sheet` + 검색 폼 + 등록/삭제/복구 버튼 + (모달 모드) 선택 확정 바를 내장. 투영한 `<sd-sheet-column>` 을 시트로 전달. CTRL+S 로 저장 트리거.
+
+- 표준 시그널: `ready: model<boolean>`, `initialized: input<boolean>`, `busyCount: model<number>`, `restricted: input<boolean>`, `viewType: input.required<SdViewType>`.
+- `readonly: input<boolean>` — true 면 저장/등록/삭제 UI·편집 동작 제거(조회 전용).
+- `selectMode: "single"|"multi"` — 행 선택 모드. modal 모드 + 지정 시 하단에 선택 해제/확인 바. single 은 행 클릭 자동 선택, 미지정+편집 가능이면 multi 기본.
+- `key: input.required<string>` — 시트 설정 저장 키(`<key>-sheet` 로 시트에 전달).
+- `items: TItem[]` — 행 데이터. `selectedKeys: model<NonNullable<TKey>[]>` — 선택 키.
+- `currDeletedItems: TItem[]` — 현재 삭제 상태 항목(취소선 표시 + 선택 시 복구 버튼 노출).
+- 페이징/정렬: `currentPage: model<number>`, `totalPageCount: input<number>`(서버 페이징), `itemsPerPage: input<number>`(클라 페이징), `visiblePageCount: input<number>`(기본 10), `sorts: model<SortingDef[]>`. 서버/클라 페이징 택일은 client-component.md.
+- `trackByFn: input.required<(item: TItem) => TKey>` — 행 키 함수.
+- 출력: `filterSubmit: output()`(검색 폼 submit), `submit: output()`(저장 폼 submit/CTRL+S), `create: output()`(등록), `delete: output<TItem[]>`(선택/행 삭제), `restore: output<TItem[]>`(복구).
+- 슬롯: `#commandTpl`(상단 추가 버튼), `#filterTpl`(검색 폼 항목), `#toolTpl`(시트 위 도구 버튼), `#bottomCommandTpl`(하단), 그리고 직속 `<sd-sheet-column>`.
+- 사용(client-crud.md): `<sd-crud-list [key]="'goods'" [items]="items()" [(selectedKeys)]="selectedKeys" [trackByFn]="trackByFn" [viewType]="viewType()" ... (create)="onCreate()" (delete)="onDelete($event)"><ng-template #filterTpl>...</ng-template><sd-sheet-column .../></sd-crud-list>`.
+
+## SdCrudDetail (`sd-crud-detail`)
+
+단건 보기/편집 화면 골격. 내부에 `sd-form`(편집 시) + page 탑바/modal 하단 확인 버튼을 컨텍스트별 자동 구성. CTRL+S 저장.
+
+- 표준 시그널: `ready: model<boolean>`, `initialized: input<boolean>`, `busyCount: model<number>`, `restricted: input<boolean>`, `viewType: input.required<SdViewType>`.
+- `readonly: input<boolean>` — true 면 form 없이 표시만(저장 버튼 제거).
+- `submit: output()` — 저장 폼 submit/CTRL+S/확인 버튼 클릭 시 발화.
+- 슬롯: `#commandTpl`(명령줄), `#contentTpl`(본문 폼), `#bottomCommandTpl`(하단 추가).
+- 사용: `<sd-crud-detail [viewType]="viewType()" [initialized]="initialized()" [(busyCount)]="busyCount" (submit)="onSubmit()"><ng-template #contentTpl><div class="form-table">...</div></ng-template></sd-crud-detail>`. 식별자 로드·원본 스냅샷·이탈 가드 등 데이터 흐름은 client-component.md "detail 데이터 흐름".