@simplysm/sd-claude 14.0.91 → 14.0.93

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

@@ -1,41 +1,80 @@
-# @simplysm/angular — CRUD 화면 표준 골격
+# @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 를 따름.
+목록/단건 화면의 표준 컨테이너 골격. `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`)
+## 표준 시그널 (3 컴포넌트 공통)
 
-모든 화면의 공통 셸. busy 오버레이 + 권한 제한 표시 + (page 모드) 탑바 + 슬롯(content/command/bottom) 구성. 공유 데이터 로드 완료까지 ready 를 지연.
+세 컴포넌트 모두 화면 표준 시그널을 입력/모델로 받음:
+- `ready: model<boolean>` — 자식이 데이터 로드를 시작해도 되는 시점. 컨테이너가 공유데이터 로드 완료 후 true 로 set.
+- `initialized: input<boolean>` — 첫 데이터 로드 완료 여부(자식이 set 한 값을 받음). true 가 되어야 본문 렌더.
+- `busyCount: model<number>` — 진행 중 비동기 작업 수. 0 보다 크면 busy 표시.
+- `restricted: input<boolean>` — 권한 없음. true 면 "사용권한이 없습니다" 안내만 표시.
+- `viewType: input.required<SdViewType>` — page/modal/control 컨텍스트(`injectViewTypeSignal()` 전달). page 면 탑바를, modal 이면 하단 확인/취소를 구성.
 
-- `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 없이 짤 때 사용.
+## SdBaseContainer
 
-## SdCrudList<TItem, TKey> (`sd-crud-list`)
+selector `sd-base-container`. 모든 화면의 공통 셸(busy·권한 안내·page 탑바·콘텐츠/명령 슬롯).
 
-목록 화면 골격. 내부에 `sd-sheet` + 검색 폼 + 등록/삭제/복구 버튼 + (모달 모드) 선택 확정 바를 내장. 투영한 `<sd-sheet-column>` 을 시트로 전달. CTRL+S 로 저장 트리거.
+- 위 표준 시그널 + 슬롯: `#topbarTpl`(page 탑바 추가 영역), `#commandTpl`(상단 명령 줄), `#contentTpl`(본문), `#bottomCommandTpl`(하단 명령 줄).
+- 생성자에서 `SdSharedDataProvider` 가 있으면 그 로드 완료(`wait()`)를 기다린 뒤 `ready` 를 true 로 set.
 
-- 표준 시그널: `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>`.
+```html
+<sd-base-container [(ready)]="ready" [initialized]="initialized()" [(busyCount)]="busyCount"
+  [restricted]="!perms().includes('use')" [viewType]="viewType()">
+  <ng-template #contentTpl>...</ng-template>
+</sd-base-container>
+```
 
-## SdCrudDetail (`sd-crud-detail`)
+## SdCrudList<TItem, TKey>
 
-단건 보기/편집 화면 골격. 내부에 `sd-form`(편집 시) + page 탑바/modal 하단 확인 버튼을 컨텍스트별 자동 구성. CTRL+S 저장.
+selector `sd-crud-list`. 검색폼·등록/삭제/복원 버튼·시트·페이지네이션을 갖춘 목록 골격. 직속 자식 `<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 면 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 데이터 흐름".
+추가 입력:
+- `readonly: input<boolean>` — 읽기 전용. true 면 등록/삭제/저장 버튼 숨김.
+- `inlineEdit: input<boolean>` — 시트 셀 인라인 편집 + 저장 버튼 노출(기본 true). `readonly` 면 무시.
+- `selectMode: "single"|"multi"` — 선택 모드. 모달 선택 시 하단 확인/해제 버튼 구성.
+- `key: input.required<string>` — 시트 컬럼 구성 영속화 키.
+- `items: input<TItem[]>` — 행 데이터.
+- `selectedKeys: model<NonNullable<TKey>[]>` — 선택 키.
+- `currDeletedItems: input<TItem[]>` — 삭제 표시 행(복원 대상 판정).
+- `currentPage: model<number>`, `totalPageCount`/`itemsPerPage`/`visiblePageCount: input<number>` — 페이징(서버 페이징은 `totalPageCount`, 클라 페이징은 `itemsPerPage`).
+- `sorts: model<SortingDef[]>` — 정렬 상태.
+- `trackByFn: input.required<(item) => TKey>` — 행 키 함수.
+- `getItemSelectableFn: input<(item) => boolean | string>` — 행 선택 가능 여부(문자열 반환 시 불가 사유). 내부 시트로 전달.
+
+출력:
+- `filterSubmit: output` — 검색폼 제출(조회).
+- `submit: output` — 인라인 편집 저장(Ctrl+S/저장 버튼).
+- `create: output` — 등록 버튼.
+- `delete: output<TItem[]>` — 선택 행 삭제(선택 항목 전달).
+- `restore: output<TItem[]>` — 선택된 삭제 행 복원.
+
+슬롯: `#filterTpl`(검색 폼 항목), `#commandTpl`/`#bottomCommandTpl`(명령 줄), `#toolTpl`(도구 줄).
+
+```html
+<sd-crud-list [viewType]="viewType()" [key]="'goods-list'" [(selectedKeys)]="selectedKeys"
+  [items]="items()" [trackByFn]="trackByFn" [totalPageCount]="pageLength()" [(currentPage)]="page"
+  (filterSubmit)="onFilterSubmit()" (create)="onCreate()" (delete)="onDelete($event)">
+  <ng-template #filterTpl>...</ng-template>
+  <sd-sheet-column [key]="'name'" [header]="'이름'">
+    <ng-template [cell]="items()" let-item="item"><div class="p-xs-sm">{{ item.name }}</div></ng-template>
+  </sd-sheet-column>
+</sd-crud-list>
+```
+
+## SdCrudDetail
+
+selector `sd-crud-detail`. 단건 편집 골격(폼 + 저장 명령).
+
+추가 입력/출력:
+- `readonly: input<boolean>` — 읽기 전용(저장 버튼 숨김).
+- `submit: output` — 저장(폼 제출/저장 버튼).
+- 슬롯: `#commandTpl`(상단 명령), `#contentTpl`(폼 본문), `#bottomCommandTpl`(하단 명령).
+- `onSaveButtonClick()` — 내부 폼의 `requestSubmit()` 호출(저장 트리거).
+
+```html
+<sd-crud-detail [viewType]="viewType()" [(ready)]="ready" [initialized]="initialized()"
+  [(busyCount)]="busyCount" (submit)="onSubmit()">
+  <ng-template #contentTpl><div class="form-table">...</div></ng-template>
+</sd-crud-detail>
+```

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

@@ -1,78 +1,76 @@
-# @simplysm/angular — 디렉티브·signal setup 헬퍼
+# @simplysm/angular — 호스트 디렉티브·signal 헬퍼·선택 매니저
 
-DOM 관찰(리사이즈/교차)·캡처 이벤트·커맨드 단축키·ripple·노출 애니메이션·invalid 표시·타입드 템플릿을 호스트 엘리먼트에 붙이는 군. `setup*` 헬퍼는 컴포넌트 `constructor` 안에서 호출(`inject(ElementRef)` 의존), `Sd*` 디렉티브는 그 헬퍼를 attribute 로 래핑한 것.
+DOM 관찰(리사이즈/교차)·캡처 이벤트·커맨드 단축키·ripple·노출 애니메이션·invalid 표시·타입드 템플릿을 호스트 엘리먼트에 붙이는 디렉티브와, 선택/정렬/펼침 상태를 시그널로 관리하는 매니저 함수 군. `setup*` 헬퍼는 컴포넌트 `constructor` 에서 호출(`inject(ElementRef)` 의존), `Sd*` 디렉티브는 그 헬퍼를 attribute 로 래핑.
 
-## SdResizeDirective (`[sdResize]`)
+## DOM 관찰 디렉티브
 
-`ResizeObserver` 를 requestAnimationFrame 으로 디바운스해 크기 변화를 emit.
+### SdResizeDirective — `[sdResize]`
+ResizeObserver 로 크기 변경 감지(rAF 디바운스).
+- `sdResize: output<SdResizeEvent>` — `{ heightChanged: boolean; widthChanged: boolean; target: HTMLElement; contentRect: DOMRectReadOnly }`. 폭/높이 변경 여부와 새 크기.
 
-- `sdResize: output<SdResizeEvent>` — 크기 변화 시 발화.
-- `SdResizeEvent = { heightChanged: boolean; widthChanged: boolean; target: HTMLElement; contentRect: DOMRectReadOnly }` — 어떤 축이 바뀌었는지·대상·새 사각형. `heightChanged`/`widthChanged` 로 필요한 축만 처리.
-- 사용: `<div (sdResize)="onResize($event)">`. `sd-sheet`·`sd-collapse`·`sd-echarts` 등이 hostDirective 로 사용.
+### SdIntersectionDirective — `[sdIntersection]`
+IntersectionObserver 로 화면 교차 감지.
+- `sdIntersection: output<SdIntersectionEvent>` — `{ entry: IntersectionObserverEntry }`. 마지막 entry 전달. 무한 스크롤·등장 트리거에.
 
-## SdIntersectionDirective (`[sdIntersection]`)
+## 캡처 이벤트·명령 단축키
 
-`IntersectionObserver` 로 뷰포트 진입/이탈 emit.
+### SdEvents
+표준 이벤트를 capture/passive/once 옵션으로 받는 디렉티브. 셀렉터에 등록된 속성(`(click.capture)`, `(scroll.passive)`, `(wheel.capture.passive)`, `(touchstart.passive)`, `(transitionend.once)` 등) 으로 바인딩. 각 output 은 원본 DOM 이벤트(`MouseEvent`/`KeyboardEvent`/`WheelEvent`/`TouchEvent` 등)를 emit. `.capture`=캡처 단계, `.passive`=passive 리스너, `.once`=1회.
 
-- `sdIntersection: output<SdIntersectionEvent>` — 교차 변화 시 발화.
-- `SdIntersectionEvent = { entry: IntersectionObserverEntry }` — `entry.isIntersecting` 으로 진입 판단. 무한 스크롤·지연 로드에 사용.
+### SdOptionEventPlugin
+위 `.capture`/`.passive`/`.once` 접미사 이벤트를 Angular 가 인식하게 하는 `EventManagerPlugin`. `provideSdAngular` 가 등록하므로 직접 쓸 일은 없음.
 
-## SdEvents (옵션부 이벤트)
+### SdCommandDirective — `[sdRefreshCommand],[sdSaveCommand],[sdInsertCommand]`
+전역 키보드 단축키를 명령으로 변환(최상위 열린 모달 기준으로만 처리).
+- `sdRefreshCommand: output<KeyboardEvent>` — `Ctrl+Alt+L` (조회).
+- `sdSaveCommand: output<KeyboardEvent>` — `Ctrl+S` (저장).
+- `sdInsertCommand: output<KeyboardEvent>` — `Ctrl+Insert` (등록).
 
-Angular 기본 바인딩이 못 거는 capture/passive/once 이벤트를 output 으로 노출하는 디렉티브. selector 에 든 attribute 중 쓰는 것만 바인딩하면 됨(전부 listen 하지 않음). `SdOptionEventPlugin`(provideSdAngular 가 등록) 이 실제 옵션 처리.
+## 시각 효과·유효성 디렉티브 + setup 헬퍼
 
-- 클릭/마우스: `click.capture`, `click.once`, `click.capture.once`, `mousedown.capture`, `mouseup.capture`, `mouseover.capture`, `mouseout.capture` — `output<MouseEvent>`.
-- 키보드: `keydown.capture`, `keyup.capture` — `output<KeyboardEvent>`.
-- 포커스: `focus.capture`, `blur.capture` — `output<FocusEvent>`(버블 안 되므로 capture 필수).
-- 폼: `invalid.capture` — `output<Event>`.
-- 스크롤/휠: `scroll.capture`, `scroll.passive`, `scroll.capture.passive`, `wheel.passive`, `wheel.capture.passive` — passive 로 스크롤 성능 확보.
-- 터치: `touchstart.passive`(+capture), `touchmove.passive`(+capture), `touchend.passive` — `output<TouchEvent>`.
-- 드래그: `dragover.capture`, `dragenter.capture`, `dragleave.capture`, `drop.capture` — `output<DragEvent>`.
-- 애니메이션: `transitionend.once`, `animationend.once` — 1회만.
-- `.capture` = 캡처 단계 수신, `.passive` = preventDefault 불가(스크롤 블로킹 방지), `.once` = 1회 후 자동 해제.
-- 사용: `<div (scroll.passive)="onScroll()">`, `<div (keydown.capture)="onKeydown($event)">`.
+### setupRipple / SdRipple
+클릭 위치에서 퍼지는 ripple 효과.
+- `setupRipple(enableFn?: () => boolean): void` — 호스트에 ripple 부착. `enableFn` 이 false 반환 시 비활성.
+- `SdRipple`(`[sdRipple]`): `sdRipple: input.required<boolean>` — ripple 활성 여부.
 
-## SdCommandDirective (`[sdRefreshCommand],[sdSaveCommand],[sdInsertCommand]`)
+### setupRevealOnShow / SdShowEffect
+교차 시 페이드+슬라이드 등장.
+- `setupRevealOnShow(optFn?: () => { type?: "l2r"|"t2b"; enabled?: boolean }): void` — `type` 이 등장 방향(`"t2b"` 위→아래 기본, `"l2r"` 좌→우), `enabled` false 면 애니메이션 없이 즉시 표시.
+- `SdShowEffect`(`[sdShowEffect]`): `sdShowEffect: input.required<boolean>`(활성), `sdShowEffectType: "l2r"|"t2b"`.
 
-문서 레벨 Ctrl 단축키를 명령 output 으로. 최상위 열린 모달 안에서만 동작(다른 컨텍스트로 새지 않게 가드).
+### setupInvalid / SdInvalid
+커스텀 유효성 메시지를 네이티브 폼 검증으로 표시(빨간 인디케이터 + form submit 차단).
+- `setupInvalid(getInvalidMessage: () => string): void` — 빈 문자열이면 유효, 아니면 그 메시지로 invalid. 숨겨진 input 의 `setCustomValidity` 로 처리.
+- `SdInvalid`(`[sdInvalid]`): `sdInvalid: input.required<string>` — 오류 메시지(빈 값=유효).
 
-- `sdRefreshCommand: output<KeyboardEvent>` — Ctrl+Alt+L.
-- `sdSaveCommand: output<KeyboardEvent>` — Ctrl+S.
-- `sdInsertCommand: output<KeyboardEvent>` — Ctrl+Insert.
-- 매칭 시 preventDefault + stopPropagation. `sd-crud-list`/`sd-crud-detail` 가 `sdSaveCommand` 를 hostDirective 로 받아 저장 트리거.
+## 타입드 템플릿 디렉티브
 
-## SdRipple (`[sdRipple]`) / setupRipple
+### SdTypedTemplate — `ng-template[typed]`
+`ng-template` 컨텍스트에 타입을 부여.
+- `typed: input.required<T>` — 컨텍스트 타입 토큰. `ngTemplateContextGuard` 로 `let-` 변수 타입 추론.
 
-클릭 지점에서 퍼지는 물결 효과.
+### SdItemOfTemplate<TItem> — `ng-template[itemOf]`
+배열 항목 순회 템플릿에 타입 부여(셀렉트·공유데이터 선택·달력의 항목 렌더).
+- `itemOf: input.required<TItem[]>` — 항목 배열. 컨텍스트 `SdItemOfTemplateContext`: `$implicit`/`item: TItem`, `index: number`, `depth: number`.
 
-- `SdRipple.sdRipple: input.required(booleanAttribute)` — true 일 때만 ripple 동작(disabled 토글). `<sd-button [sdRipple]="!disabled()">`.
-- `setupRipple(enableFn?: () => boolean): void` — constructor 에서 호출하는 헬퍼. `enableFn` 이 false 반환 시 해당 클릭은 ripple 생략. 커스텀 컴포넌트 내부에서 직접 ripple 부여 시.
+```html
+<ng-template [itemOf]="items()" let-item="item">{{ item.name }}</ng-template>
+```
 
-## SdShowEffect (`[sdShowEffect]`) / setupRevealOnShow
+## 선택·정렬·펼침 매니저 (signal 기반)
 
-뷰포트 진입 시 페이드+슬라이드로 나타나는 효과.
+목록/시트가 선택·정렬·트리펼침 상태를 시그널로 관리하도록 돕는 순수 함수. 외부 시그널을 받아 파생 시그널·조작 함수를 반환.
 
-- `SdShowEffect.sdShowEffect: input.required(booleanAttribute)` — true 면 효과 적용, false 면 효과 없이 즉시 표시.
-- `SdShowEffect.sdShowEffectType: "l2r" | "t2b"` — 등장 방향. `"t2b"`(기본) = 위에서 아래로, `"l2r"` = 왼쪽에서 오른쪽으로.
-- `setupRevealOnShow(optFn?: () => { type?: "l2r"|"t2b"; enabled?: boolean }): void` — constructor 헬퍼. `enabled` false 면 트랜지션 없이 노출.
+### useSelectionManager<TItem, TKey>
+- 입력: `displayItems`/`selectedKeys`(model)/`selectMode`/`getItemSelectableFn`/`trackByFn`(모두 Signal).
+- 반환: `hasSelectable`/`isAllSelected`(Signal), `getSelectable(item)`(true/사유문자열/undefined), `getCanChangeFn(item)`, `select`/`deselect`/`toggle`/`toggleAll`/`isSelected`. `selectMode` 가 `"single"` 이면 단일, `"multi"` 면 누적 선택. 키 비교는 `obj.equal` 으로 결측·객체 키도 안전.
 
-## SdInvalid (`[sdInvalid]`) / setupInvalid
+### useSortingManager
+- 입력: `sorts: WritableSignal<SortingDef[]>`.
+- 반환: `defMap`(키→`{ indexText?, desc }`, 다중 정렬 시 순번 표시), `toggle(key, multiple)`(미정렬→오름차순→내림차순→해제 순환, `multiple` 이면 누적), `sort<T>(items)`(현재 정렬로 배열 정렬, null 은 앞쪽).
+- `SortingDef` — `{ key: string; desc: boolean }`.
 
-폼 검증 실패를 좌상단 빨간 점 + 네이티브 form 검증으로 표시. 숨은 input 에 `setCustomValidity` 를 걸어 form submit 시 차단.
-
-- `SdInvalid.sdInvalid: input.required<string>` — 빈 문자열이면 유효, 비어있지 않으면 그 메시지로 invalid 표시.
-- `setupInvalid(getInvalidMessage: () => string): void` — constructor 헬퍼. 반환 문자열이 비면 valid, 아니면 invalid. 모든 입력 컨트롤(`sd-textfield`/`sd-select`/`sd-modal-select-button` 등)이 내부에서 이걸로 required/형식 검증을 구현. 커스텀 입력 컴포넌트 작성 시 동일 패턴.
-
-## SdTypedTemplate (`ng-template[typed]`)
-
-`<ng-template>` 컨텍스트에 타입을 주는 디렉티브(런타임 동작 없음, 타입 가드만).
-
-- `typed: input.required<T>` — 컨텍스트 타입 토큰. `let-x` 변수에 `T` 타입이 추론됨. 사이드바/탑바 메뉴 재귀 템플릿이 사용.
-
-## SdItemOfTemplate (`ng-template[itemOf]`)
-
-항목 반복 템플릿에 항목 타입을 주는 디렉티브.
-
-- `itemOf: input.required<TItem[]>` — 항목 배열(타입 추론용 더미, 실제 반복은 부모가 수행).
-- 컨텍스트: `SdItemOfTemplateContext<TItem> = { $implicit; item; index: number; depth: number }`. `let-item="item"` / `let-index="index"` / `let-depth="depth"`.
-- 사용: `sd-shared-data-select`·`sd-calendar` 의 항목 템플릿. `<ng-template [itemOf]="items()" let-item="item">{{ item.name }}</ng-template>`.
+### useExpandingManager<T>
+- 입력: `items`/`expandedItems`(model)/`getChildrenFn`/`sort`.
+- 반환: `displayItems`(펼침 반영 평면 목록)/`hasExpandable`/`isAllExpanded`(Signal), `toggle`/`toggleAll`/`isVisible(item)`(조상이 모두 펼쳐졌는지)/`def(item)`(`ExpandItemDef`).
+- `ExpandItemDef<T>` — `{ item; parentDef; hasChildren; depth }`.

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

@@ -1,127 +1,108 @@
-# @simplysm/angular — 기능 컴포넌트 (칸반·권한표·상태프리셋·테마선택·주소검색·에디터·시각화)
+# @simplysm/angular — 부가 기능(칸반·권한표·상태프리셋·테마·주소·에디터·시각화)
 
 위 군에 들지 않는 도메인성/표시용 컴포넌트 모음. 특정 화면 기능을 붙일 때 개별로 읽힘.
 
-## 칸반 (드래그 보드)
+## 칸반 보드 (드래그 앤 드롭)
 
-### SdKanbanBoard<L, T> (`sd-kanban-board`)
+레인-카드 보드. `sd-kanban-board` > `sd-kanban-lane` > `sd-kanban` 중첩.
 
-레인(`L`)·카드(`T`) 드래그 보드의 루트. 드래그 종료 시 drop 정보 emit.
+### SdKanbanBoard<L, T> — `sd-kanban-board`
+- `selectedValues: model<T[]>` — 선택된 카드 값(Shift+클릭 다중 선택).
+- `drop: output<SdKanbanBoardDropInfo<L, T>>` — 카드 드롭 시 emit. `{ sourceKanbanValue?, targetLaneValue?, targetKanbanValue? }`(이동한 카드/대상 레인/대상 카드 값).
 
-- `selectedValues: model<T[]>` — Shift+클릭으로 선택된 카드 값들.
-- `drop: output<SdKanbanBoardDropInfo<L, T>>` — 카드 drop 시 발화.
-- `SdKanbanBoardDropInfo<L, T> = { sourceKanbanValue?: T; targetLaneValue?: L; targetKanbanValue?: T }` — 옮긴 카드·대상 레인·대상 카드(앞에 끼움).
-- `SdKanbanDragRef`/`SdKanbanDropTarget` — 내부 드래그/드롭 인터페이스.
-
-### SdKanbanLane<L, T> (`sd-kanban-lane`)
-
-레인(컬럼). 카드들을 담고 drop 대상이 됨.
-
-- `value: input<L>` — 레인 값(drop 시 `targetLaneValue`).
-- `busy: boolean` — 레인 busy 오버레이.
-- `useCollapse: boolean` — 접기 토글 표시. `collapse: model<boolean>` — 접힘 상태.
-- 슬롯: `#titleTpl`(제목), `#toolTpl`(도구). 전체선택 체크박스는 선택 가능 카드가 있을 때.
-
-### SdKanban<L, T> (`sd-kanban`)
-
-카드. 드래그 소스 + 선택 대상.
+### SdKanbanLane<L, T> — `sd-kanban-lane`
+- `value: input<L>` — 레인 식별 값(드롭 대상).
+- `busy: boolean` — 레인 busy 표시.
+- `useCollapse: boolean` — 접기 버튼 노출.
+- `collapse: model<boolean>` — 접힘 상태.
+- 슬롯: `#titleTpl`(레인 제목), `#toolTpl`(도구). 자식 `sd-kanban` 들 배치.
 
+### SdKanban<L, T> — `sd-kanban`
 - `value: input<T>` — 카드 값.
-- `draggable: boolean` — true 면 드래그 가능.
-- `selectable: boolean` — true 면 Shift+클릭 선택 가능.
-- `contentClass: string` — 카드 본문 클래스.
-- 사용: `<sd-kanban-board (drop)="onDrop($event)"><sd-kanban-lane [value]="lane"><sd-kanban [value]="card" [draggable]="true">...</sd-kanban></sd-kanban-lane></sd-kanban-board>`.
-
-## SdPermissionTable<TModule> (`sd-permission-table`)
-
-권한 트리를 표로 표시·편집(use/edit 체크박스). `SdAppStructureProvider.getPermissionsByStructure(...)` 결과를 입력.
+- `selectable: boolean` — Shift+클릭 선택 가능.
+- `draggable: boolean` — 드래그 가능.
+- `contentClass: string` — 카드 클래스.
 
-- `value: model<Record<string, boolean>>` — `<코드>.<use|edit>` → 부여 여부 맵.
-- `items: SdPermission<TModule>[]` — 권한 트리(routing-appstructure.md 의 `SdPermission`).
-- `disabled: boolean` — 편집 비활성(조회).
+```html
+<sd-kanban-board [(selectedValues)]="selected" (drop)="onDrop($event)">
+  <sd-kanban-lane [value]="'todo'"><sd-kanban [value]="task" [draggable]="true">{{ task.title }}</sd-kanban></sd-kanban-lane>
+</sd-kanban-board>
+```
 
-## SdStatePreset<TState> (`sd-state-preset`)
+## SdPermissionTable — `sd-permission-table`
 
-화면 검색/필터 상태를 이름붙은 프리셋으로 저장·복원(즐겨찾기). 프리셋은 `injectSdSystemConfigResource` 로 영속.
+권한 트리(`SdPermission[]`)를 체크박스 표로 편집. routing-appstructure.md 의 `SdAppStructureProvider.getPermissionsByStructure()` 결과를 입력.
+- `value: model<Record<string, boolean>>` — `"코드.액션"→보유` 권한 맵(체크 상태).
+- `items: input<SdPermission<TModule>[]>` — 권한 트리.
+- `disabled: boolean` — 읽기 전용.
 
-- `key: input.required<string>` — 프리셋 저장 키.
-- `state: model.required<TState>` — 현재 상태(프리셋 적용 시 이 모델에 set). 저장은 현재 state 를 스냅샷.
-- `size: "sm"|"lg"` — 버튼 크기.
-- `SdStatePresetDef<TState> = { name: string; state: TState }` — 저장된 프리셋 1개.
-- 별(추가)·저장·삭제 동작은 내장(이름 prompt/덮어쓰기 confirm 모달 사용).
+## SdStatePreset<TState> — `sd-state-preset`
 
-## SdThemeProvider 관련 — SdThemeSelector (`sd-theme-selector`)
+화면 상태(필터 등)를 이름 붙여 저장·복원하는 프리셋 바. 프리셋은 `injectSdSystemConfigResource(key)` 로 영속.
+- `key: input.required<string>` — 프리셋 저장 키(화면 식별).
+- `state: model.required<TState>` — 현재 화면 상태. 프리셋 클릭 시 이 모델에 복원, 저장 시 현재 값을 프리셋에 기록.
+- `size: "sm"|"lg"` — 크기.
+- `SdStatePresetDef<TState>` — `{ name: string; state: TState }`(저장 단위).
 
-글자 크기 증감 + 다크모드 스위치를 담은 드롭다운 UI. 내부에서 `SdThemeProvider`(infra.md)를 조작.
+## SdThemeSelector — `sd-theme-selector`
 
-- (입력 없음) 탑바 등에 `<sd-theme-selector />` 로 배치. 글자 크기는 `fontSizePresets` 단계, 다크는 `dark` 토글.
+글자 크기 증감 + 다크모드 토글 드롭다운. `SdThemeProvider`(infra.md)를 조작. 입력 없음.
 
-## SdAddressSearchModal (`sd-address-search-modal`)
+## SdAddressSearchModal — `sd-address-search-modal`
 
-다음(카카오) 우편번호 검색 모달(`SdModalContentDef<Address>`). 외부 스크립트를 동적 로드해 임베드.
+다음(Daum) 우편번호 검색 모달(`SdModalContentDef<Address>`). 스크립트를 동적 로드해 표시, 선택 시 주소 emit.
+- `close: output<Address>` — 선택 결과. `Address` = `{ postNumber?: string; address?: string; buildingName?: string }`(미입력 필드는 undefined 보존).
 
-- `close: output<Address>` — 선택한 주소 emit.
-- `initialized: Signal<boolean>` — 스크립트 로드 완료 여부.
-- `Address = { postNumber?: string; address?: string; buildingName?: string }` — 결과(각 필드 결측 가능).
-- 사용: `const addr = await this._sdModal.showAsync({ type: SdAddressSearchModal, title: "주소 검색", inputs: {} }); if (!addr) return;`.
+```ts
+const addr = await sdModal.showAsync({ type: SdAddressSearchModal, title: "주소 검색", inputs: {} });
+```
 
-## SdTiptapEditor (`sd-tiptap-editor`)
+## SdTiptapEditor — `sd-tiptap-editor`
 
-Tiptap 기반 리치 텍스트(HTML) 에디터. 툴바 내장.
-
-- `value: model<string>` — HTML 문자열.
-- `disabled: boolean` — 비활성. `readonly: boolean` — 읽기 전용.
-- `required: boolean` — 빈 값이면 invalid. `validatorFn: (value) => string | undefined` — 커스텀 검증.
-- `placeholder: string` — 빈 에디터 안내.
+리치텍스트(Tiptap) 에디터. 색상·정렬·목록 툴바 내장.
+- `value: model<string>` — HTML 값.
+- `disabled`/`readonly`/`required: boolean` — 상태.
+- `placeholder: string` — 빈 상태 안내.
+- `validatorFn: (value) => string | undefined` — 커스텀 검증(반환 문자열이 오류).
 - `extensions: AnyExtension[]` — 추가 Tiptap 확장.
 
-## 시각화·표시 컴포넌트 (features/visual)
-
-### SdLabel (`sd-label`)
-
-배지/태그. `<ng-content>` 본문.
-
-- `theme: "primary"|"secondary"|"info"|"success"|"warning"|"danger"|"gray"|"blue-gray"` — 배경 색(미지정=회색 darker). 상태 표시에 의미별 색.
-- `color: string` — 임의 배경색 직접 지정(theme 대신).
-- `clickable: boolean` — true 면 포인터 커서 + hover 효과.
-
-### SdNote (`sd-note`)
-
-안내 박스(연한 배경). `<ng-content>` 본문.
-
-- `theme: "primary"|...|"blue-gray"` — 박스 색(미지정=회색 lightest).
-- `size: "sm"|"lg"` — 패딩.
-- `inset: boolean` — 테두리 제거.
-
-### SdProgress (`sd-progress`)
-
-가로 진행 바 + 퍼센트 텍스트.
-
-- `value: input.required<number>` — 진행값(0~1, percent 파이프로 표시).
-- `theme: input.required<...>` — 바 색(필수).
-- `size: "sm"|"lg"` / `inset: boolean` — 크기/테두리.
-
-### SdCalendar<T> (`sd-calendar`)
-
-월 달력 그리드에 항목을 날짜별로 배치. 항목 템플릿으로 셀 내용 렌더.
-
-- `items: input.required<T[]>` — 표시할 항목들.
-- `getItemDateFn: input.required<(item, index) => DateOnly>` — 항목의 날짜 추출.
-- `yearMonth: input<DateOnly>` — 표시 연월(기본 이번 달 1일).
-- `weekStartDay: number` — 주 시작 요일(0=일, 기본 0). `minDaysInFirstWeek: number` — 첫 주 최소 일수(기본 1).
-- 항목 템플릿: `<ng-template [itemOf]="items()" let-item="item">`(필수).
-
-### SdBarcode (`sd-barcode`)
-
-바코드/QR 등을 SVG 로 렌더(bwip-js).
-
-- `type: input.required<BarcodeType>` — 바코드 종류. `BarcodeType` 은 `"code128"|"qrcode"|"ean13"|"datamatrix"|...`(bwip-js 의 100+ 심볼로지 리터럴 유니온). 대표: `"code128"`(범용 1D), `"qrcode"`(QR), `"ean13"`/`"upca"`(상품), `"datamatrix"`(소형 2D).
-- `value: string` — 인코딩할 데이터(빈 값이면 미렌더).
-
-### SdEcharts (`sd-echarts`)
-
-ECharts 차트(SVG 렌더). 리사이즈 자동 대응.
-
-- `option: input.required<echarts.EChartsOption>` — 차트 옵션. 변경 시 재설정.
-- `notMerge: boolean` — true 면 옵션 병합 없이 교체(기본 false=병합).
-- `loading: boolean` — true 면 로딩 인디케이터.
+보조 헬퍼 `useTiptapToolbar(opt)` — 에디터 시그널을 받아 툴바 상태/명령을 반환(`activeStates`/`activeColor`/`execCmd`/`refreshActiveStates`/`toggleColorPicker`/`applyColor` 등). `TiptapActiveStates` 는 h1/h2/bold/italic/underline/strike/bulletList/orderedList/blockquote/codeBlock/align* 의 활성 여부 맵.
+
+## 시각화 컴포넌트
+
+### SdLabel — `sd-label`
+배지/태그.
+- `theme` — 테마 계열(미지정=기본 회색).
+- `color: string` — 직접 색상 지정.
+- `clickable: boolean` — 클릭 가능 스타일.
+
+### SdNote — `sd-note`
+강조 노트 블록.
+- `theme` — 테마 계열.
+- `size: "sm"|"lg"`, `inset: boolean`.
+
+### SdProgress — `sd-progress`
+진행 바.
+- `theme: input.required<테마 계열>` — 바 색상(필수).
+- `value: input.required<number>` — 진행값(0~1, 내부에서 0~100% 클램프).
+- `size: "sm"|"lg"`, `inset: boolean`.
+
+### SdCalendar<T> — `sd-calendar`
+월 단위 달력에 항목 배치.
+- `items: input.required<T[]>` — 표시 항목.
+- `getItemDateFn: input.required<(item, index) => DateOnly>` — 항목의 날짜.
+- `yearMonth: DateOnly` — 표시 연월(기본 이번 달 1일).
+- `weekStartDay: number` — 주 시작 요일(기본 0=일).
+- `minDaysInFirstWeek: number` — 첫 주 최소 일수(기본 1).
+- 컨텐츠: `<ng-template [itemOf]>` 로 날짜 셀 항목 렌더.
+
+### SdBarcode — `sd-barcode`
+바코드/QR SVG 렌더(bwip-js).
+- `type: input.required<BarcodeType>` — 심볼 종류(`qrcode`/`code128`/`ean13`/`datamatrix` 등 다수, `BarcodeType` union).
+- `value: string` — 인코딩할 데이터(빈 값이면 미표시).
+
+### SdEcharts — `sd-echarts`
+ECharts 차트(SVG 렌더).
+- `option: input.required<echarts.EChartsOption>` — 차트 옵션. 변경 시 갱신.
+- `notMerge: boolean` — 옵션 set 시 기존과 병합하지 않고 교체.
+- `loading: boolean` — 로딩 오버레이.