@simplysm/sd-claude 14.0.97 → 14.0.99

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

@@ -1,75 +1,89 @@
-# @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-crud.md](../manuals/client-crud.md) 참조.
+목록/단건 화면의 표준 컨테이너 골격. `sd-base-container`(공통 셸) 위에 `sd-crud-list`(목록)·`sd-crud-detail`(단건)이 얹힘. 표준 시그널(`ready`/`initialized`/`busyCount`/`viewType`)·page/modal/control 컨텍스트별 탑바·하단바 자동 구성·CTRL+S 저장을 내장. 화면 작성 절차·데이터 흐름은 [client-crud.md](../manuals/client-crud.md) · [client-component.md](../manuals/client-component.md) 참조. 함께 쓰는 권한 테이블·상태 프리셋도 이 군에 둠.
 
-## SdBaseContainer — `<sd-base-container>`
+공통: 세 컨테이너 모두 `viewType: SdViewType`(required, `"page"|"modal"|"control"`)에 따라 동작이 갈림. `"page"` = 라우팅 진입(탑바에 액션), `"modal"` = 모달(하단 명령바·확인 버튼), `"control"` = view 임베드(명령 영역에 액션).
 
-```ts
-ready = model(false); initialized = input(false); busyCount = model(0);
-restricted = input(false); viewType = input.required<SdViewType>(); // "page"|"modal"|"control"
-viewTitle = injectViewTitleSignal(); // 자동
-// 슬롯: #topbarTpl #commandTpl #contentTpl #bottomCommandTpl
+## `SdBaseContainer` — `<sd-base-container>`
+
+busy 컨테이너로 감싸고(`page` 면 탑바 포함) 권한 없음 placeholder 를 제공하는 공통 셸. `SdSharedDataProvider` 로드를 기다린 뒤 `ready` 를 set.
+
+- `ready: model(false)` — 공유데이터 로드 완료(또는 `restricted` 면 즉시) 후 자동 `true`. 자식 effect 발화 시점.
+- `initialized: input(false)` — true 일 때만 콘텐츠 렌더. busy 스피너는 `initialized() && busyCount() > 0` 일 때.
+- `busyCount: model(0)` — 진행 중 작업 수. `>0` 이면 busy.
+- `restricted: input(false)` — true 면 "사용권한 없음" 메시지 렌더 + `ready` 즉시 set(공유데이터 대기 스킵).
+- `viewType: input.required<SdViewType>` — `"page"` 면 `<sd-topbar-container>` + viewTitle 렌더, `"modal"`/`"control"` 면 탑바 없이 콘텐츠.
+- 슬롯: `#topbarTpl`(page 탑바 추가 버튼) / `#commandTpl`(콘텐츠 위 명령바) / `#contentTpl`(본문) / `#bottomCommandTpl`(하단 명령바).
+
+```html
+<sd-base-container [(ready)]="ready" [initialized]="initialized()" [(busyCount)]="busyCount" [restricted]="!perms().includes('use')" [viewType]="viewType()">
+  <ng-template #contentTpl>...</ng-template>
+</sd-base-container>
 ```
 
-- `initialized` — false 동안 busy 표시. `busyCount`>0 이면 busy(model 양방향, 화면이 +1/-1 누적). `restricted`=권한 없음 안내 화면 표시(콘텐츠 미렌더).
-- `viewType` — `"page"`=탑바(제목+#topbarTpl) 포함, `"modal"`/`"control"`=콘텐츠만. `ready` 는 공유데이터 로드 완료 후 true(model, 화면이 이를 보고 초기화 진행).
-- 직접 쓰기보다 `sd-crud-list`/`sd-crud-detail` 또는 커스텀 화면 셸로 사용. 슬롯은 `#topbarTpl`(탑바 추가), `#commandTpl`(명령영역), `#contentTpl`(본문), `#bottomCommandTpl`(하단).
-
-## SdCrudList — `<sd-crud-list>`
-
-```ts
-ready = model(false); initialized = input(false); busyCount = model(0);
-restricted = input(false); readonly = input(false); inlineEdit = input(true);
-viewType = input.required<SdViewType>(); selectMode = input<"single" | "multi">();
-key = input.required<string>();
-items = input<TItem[]>([]); selectedKeys = model<NonNullable<TKey>[]>([]);
-currDeletedItems = input<TItem[]>([]);
-currentPage = model(0); totalPageCount = input(0); itemsPerPage = input(0); visiblePageCount = input(10);
-sorts = model<SortingDef[]>([]);
-trackByFn = input.required<(item: TItem) => TKey>();
-getItemSelectableFn = input<(item: TItem) => boolean | string>();
-
-filterSubmit = output(); submit = output(); create = output();
-delete = output<TItem[]>(); restore = output<TItem[]>();
-// 슬롯: #filterTpl #toolTpl #commandTpl #bottomCommandTpl, 직속 <sd-sheet-column>
+## `SdCrudDetail` — `<sd-crud-detail>`
+
+단건 편집 폼 골격(`sd-base-container` 기반). `readonly` 가 아니면 콘텐츠를 `<sd-form>` 으로 감싸고 저장 컨트롤 제공. `SdCommandDirective` 호스트(CTRL+S → 저장).
+
+- `ready: model(false)` / `initialized: input(false)` / `busyCount: model(0)` / `restricted: input(false)` — base 로 전달.
+- `readonly: input(false)` — true 면 저장 버튼 숨김 + `<sd-form>` 없이 plain `<div>` 렌더(제출 불가); false 면 `<sd-form>` 래핑 + 저장 컨트롤.
+- `viewType: input.required<SdViewType>` — `"page"` = 탑바 `#topbarTpl` 에 "저장 (CTRL+S)" 버튼; `"control"` = `#commandTpl` 에 저장 버튼; `"modal"` = 하단 명령바에 "확인" 버튼.
+- `submit: output()` — 내부 `<sd-form>` 의 유효 제출 시 emit.
+- 슬롯: `#contentTpl`(필수, 폼 본문) / `#commandTpl` / `#bottomCommandTpl`.
+- 메서드: `onSaveButtonClick()` — `formCtrl().requestSubmit()`.
+
+```html
+<sd-crud-detail [(ready)]="ready" [initialized]="initialized()" [(busyCount)]="busyCount" [restricted]="!perms().includes('use')" [readonly]="!canEdit()" [viewType]="viewType()" (submit)="onSubmit()">
+  <ng-template #contentTpl>...</ng-template>
+</sd-crud-detail>
 ```
 
-- 목록 표준 골격(시트 + 검색폼 + 등록/삭제/복구 버튼 + CTRL+S 저장 + 모달 선택모드).
-- `readonly` — 편집 전체 불가(시트 선택만). `inlineEdit`(기본 true) — true 면 시트를 `<sd-form>` 으로 감싸 셀 인라인 편집 + per-row 삭제컬럼, false 면 조회·선택 전용(편집은 외부 상세/모달). 둘은 직교.
-- `selectMode` — `"single"`=행 클릭 즉시(modal 이면 close), `"multi"`=하단 확인 버튼. modal+selectMode 면 close 시 `{ selectedKeys }` 자동 전달.
-- `currDeletedItems` — 현재 삭제(soft delete)된 항목들. 해당 행은 취소선 + 복구 버튼으로 표시. `key` 는 시트 설정 저장 키(`<key>-sheet`).
-- 출력: `filterSubmit`(검색), `submit`(인라인 편집 저장, inlineEdit=true 일 때만), `create`(등록), `delete`/`restore`(선택 항목 배열). `<sd-sheet-column>` 을 직속에 두면 내부 시트로 투영.
+## `SdCrudList<TItem, TKey>` — `<sd-crud-list>`
+
+목록 골격(`sd-base-container` + `sd-sheet`). 시트·검색 폼·등록/삭제/복구·CTRL+S 저장·페이징·정렬·선택·인라인 편집·모달 선택을 일괄 제공. `SdCommandDirective` 호스트.
+
+- `ready: model(false)` / `initialized: input(false)` / `busyCount: model(0)` / `restricted: input(false)` — base 로 전달.
+- `readonly: input(false)` — true 면 등록/삭제/복구 버튼 숨김 + 인라인 편집 비활성 + 삭제 행 취소선.
+- `inlineEdit: input(true)` — true(비-readonly)면 시트를 `<sd-form>` 으로 감싸 셀 인라인 편집 + 삭제 컬럼 + 저장. false 면 인라인 편집 chrome 제거(조회·선택 전용, `submit` 미발화).
+- `viewType: input.required<SdViewType>` — `"page"` = 탑바 저장 버튼(인라인 편집 시); `"modal"` = 하단 선택 명령바("선택 해제", multi 면 "확인(n)").
+- `selectMode: "single"|"multi"|undefined` — `"single"` = 선택 삭제/복구 숨김·클릭 즉시 modal close; `"multi"` = 다중 선택·삭제/복구·"확인(n)"; `undefined`(비-modal) = 비-readonly 면 `'multi'`.
+- `key: input.required<string>` — 시트 설정 키(내부 시트는 `key()+'-sheet'`).
+- `items: TItem[]` (기본 `[]`) — 행 데이터.
+- `currDeletedItems: TItem[]` (기본 `[]`) — 삭제(soft delete) 행. 취소선·복구 버튼·삭제/복구 아이콘 토글에. 삭제항목 포함 검색 목록은 필수.
+- `trackByFn: input.required<(item: TItem) => TKey>` — 키 추출(선택 멤버십·시트 추적).
+- `getItemSelectableFn: (item) => boolean | string | undefined` — 시트로 전달, `string`=불가+툴팁.
+- `currentPage: model(0)` / `totalPageCount: input(0)`(서버 페이징; `0`이면 useAutoSort 활성) / `itemsPerPage: input(0)`(클라이언트 페이징) / `visiblePageCount: input(10)` / `sorts: model<SortingDef[]>([])` — 시트로 전달.
+- `selectedKeys: model<NonNullable<TKey>[]>([])` — 선택 키(시트와 양방향).
+- output: `filterSubmit`(조회 폼 제출) / `submit`(인라인 편집 저장) / `create`(등록) / `delete: TItem[]`(삭제 대상) / `restore: TItem[]`(복구 대상).
+- 슬롯: `#filterTpl`(검색 폼; 내부가 이미 `form-box-inline`) / `#toolTpl`(도구 버튼) / `#commandTpl` / `#bottomCommandTpl`. `<sd-sheet-column>` 직속 자식은 내부 시트로 자동 투영.
 
 ```html
-<sd-crud-list [(ready)]="ready" [initialized]="initialized()" [(busyCount)]="busyCount"
-  [restricted]="!perms().includes('use')" [readonly]="!canEdit()" [viewType]="viewType()"
-  [key]="'role'" [items]="items()" [trackByFn]="trackByFn" [(selectedKeys)]="selectedKeys"
-  (create)="onCreate()" (delete)="onDelete($event)" (restore)="onRestore($event)">
+<sd-crud-list [(ready)]="ready" [initialized]="initialized()" [(busyCount)]="busyCount" [restricted]="!perms().includes('use')" [readonly]="!canEdit()" [viewType]="viewType()" [selectMode]="selectMode() ?? 'multi'" [key]="'role'" [items]="items()" [currDeletedItems]="deletedItems()" [trackByFn]="trackByFn" [(selectedKeys)]="selectedKeys" [(currentPage)]="page" [totalPageCount]="pageLength()" [(sorts)]="sortingDefs" (filterSubmit)="onFilterSubmit()" (submit)="onSubmit()" (create)="onCreate()" (delete)="onDelete($event)" (restore)="onRestore($event)">
   <ng-template #filterTpl>...</ng-template>
-  <sd-sheet-column [key]="'name'" [header]="'이름'">
-    <ng-template [cell]="items()" let-item="item">{{ item.name }}</ng-template>
-  </sd-sheet-column>
+  <sd-sheet-column [key]="'name'" [header]="'이름'"><ng-template [cell]="items()" let-item="item">...</ng-template></sd-sheet-column>
 </sd-crud-list>
 ```
 
-## SdCrudDetail — `<sd-crud-detail>`
+## `SdStatePreset<TState>` — `<sd-state-preset>`
 
-```ts
-ready = model(false); initialized = input(false); busyCount = model(0);
-restricted = input(false); readonly = input(false);
-viewType = input.required<SdViewType>();
-submit = output();
-// 슬롯: #contentTpl(필수) #commandTpl #bottomCommandTpl
-```
+임의 상태의 명명 스냅샷을 저장·복원(system config 영속화). 필터 프리셋 등에.
+
+- `key: input.required<string>` — 프리셋 배열 저장 키.
+- `state: model.required<TState>` — 현재 상태(양방향). 프리셋 클릭 시 그 상태로 set(deep clone), 저장 시 현재 상태 clone 보관.
+- `size: "sm"|"lg"|undefined` — 추가 버튼/칩 패딩 스케일.
+- 메서드: `onAddClick()`(이름 입력·중복 거부·추가) / `onPresetClick(preset)`(적용) / `onSaveClick(preset)`(덮어쓰기) / `onDeleteClick(preset)`(확인 후 삭제).
+- `SdStatePresetDef<TState>` — `{ name: string; state: TState }`.
 
-- 단건 편집 표준 골격(폼 래핑 + CTRL+S 저장 + 저장 버튼 + modal "확인" 자동).
-- `readonly` — true 면 `#contentTpl` 을 `<sd-form>` 없이 그대로(읽기), false 면 폼으로 감싸 `submit` 출력. `viewType` `"page"`=상단 저장버튼, `"control"`=명령영역 저장버튼, `"modal"`=하단 우측 "확인" 자동.
-- `#contentTpl`(필수) 폼 본문, `#commandTpl`/`#bottomCommandTpl` 추가 액션.
+## `SdPermissionTable<TModule>` — `<sd-permission-table>`
+
+권한 트리(사용/편집 체크박스)를 계층 표시. 부모/자식·use→edit 의존 규칙 강제. 권한 관리 화면에서 `getPermissionsByStructure` 결과를 넘김([client-app-structure.md](../manuals/client-app-structure.md)).
+
+- `value: model<Record<string, boolean>>({})` — `"<codeChain>.<use|edit>" → boolean` 맵. 토글이 자식에 캐스케이드, `use` 해제 시 `edit` 자동 해제, `use` 미체크면 `edit` 체크 무시.
+- `items: SdPermission<TModule>[]` (기본 `[]`) — 권한 트리.
+- `disabled: boolean` — true 면 전체 체크박스 비활성.
 
 ```html
-<sd-crud-detail [(ready)]="ready" [initialized]="initialized()" [(busyCount)]="busyCount"
-  [restricted]="!perms().includes('use')" [readonly]="!canEdit()" [viewType]="viewType()"
-  (submit)="onSubmit()">
-  <ng-template #contentTpl><!-- 폼 본문 --></ng-template>
-</sd-crud-detail>
+<sd-permission-table [items]="permissions()" [(value)]="data" />
 ```
+
+(`SdPermission<TModule>` 타입은 [routing-appstructure.md](./routing-appstructure.md) 참조.)

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

@@ -1,167 +1,107 @@
-# @simplysm/angular — 호스트 디렉티브·signal 헬퍼
+# @simplysm/angular — 디렉티브·signal 헬퍼
 
-DOM 관찰(리사이즈/교차)·캡처 이벤트·커맨드 단축키·ripple·노출 애니메이션·invalid 표시·타입드 템플릿을 호스트 엘리먼트에 붙이는 디렉티브와, signal/model 을 다루는 작은 헬퍼 군. `setup*` 헬퍼는 컴포넌트 `constructor`(주입 컨텍스트)에서 호출(`inject(ElementRef)` 의존), `Sd*` 디렉티브는 그 헬퍼를 attribute 로 래핑.
+DOM 관찰(리사이즈/교차)·캡처 이벤트·커맨드 단축키·ripple·노출 애니메이션·invalid 표시·타입드 템플릿을 호스트 엘리먼트에 붙이는 디렉티브와, 그 디렉티브가 래핑하는 `setup*` 헬퍼 군. `setup*`/`inject*` 헬퍼는 컴포넌트 `constructor`(주입 컨텍스트)에서 호출(`inject(ElementRef)` 등 의존). 모든 디렉티브는 standalone, attribute selector.
 
 ## DOM 관찰 디렉티브
 
-### SdResizeDirective — `[sdResize]`
+### `SdResizeDirective` — `[sdResize]`
 
-```ts
-sdResize = output<SdResizeEvent>();
-// SdResizeEvent { heightChanged: boolean; widthChanged: boolean; target: HTMLElement; contentRect: DOMRectReadOnly }
-```
-
-- `ResizeObserver` 로 크기 변화를 rAF 디바운스해 방출. `heightChanged`/`widthChanged` 로 변경 축을 구분(불필요한 재계산 회피). 시트·collapse·echarts 가 사용.
+- `sdResize: output<SdResizeEvent>` — `ResizeObserver` 기반, `requestAnimationFrame` 디바운스. `SdResizeEvent` = `{ heightChanged: boolean; widthChanged: boolean; target: HTMLElement; contentRect: DOMRectReadOnly }`.
 
 ```html
 <div (sdResize)="onResize($event)">...</div>
 ```
 
-### SdIntersectionDirective — `[sdIntersection]`
-
-```ts
-sdIntersection = output<SdIntersectionEvent>();
-// SdIntersectionEvent { entry: IntersectionObserverEntry }
-```
-
-- `IntersectionObserver` 로 뷰포트 진입/이탈을 방출. 지연 로드·노출 트리거에 사용. `entry.isIntersecting` 으로 판정.
+### `SdIntersectionDirective` — `[sdIntersection]`
 
-## 이벤트·커맨드 디렉티브
+- `sdIntersection: output<SdIntersectionEvent>` — `IntersectionObserver` 기반, 콜백 배치의 마지막 엔트리 emit. `SdIntersectionEvent` = `{ entry: IntersectionObserverEntry }`.
 
-### SdEvents — 이벤트 수식어 출력
+## 캡처/옵션 이벤트
 
-```ts
-// selector 의 각 어트리뷰트가 output. 예:
-"click.capture", "click.once", "scroll.passive", "wheel.passive",
-"touchstart.passive", "keydown.capture", "focus.capture", "blur.capture",
-"invalid.capture", "transitionend.once", "animationend.once" ...
-```
+### `SdEvents` (디렉티브)
 
-- capture/passive/once 수식어가 붙은 DOM 이벤트를 Angular 출력으로 노출(`SdOptionEventPlugin` 과 함께 동작). 성능·캡처가 필요한 이벤트 바인딩에 사용. 호스트 디렉티브로도 쓰임(시트가 `keydown.capture` 등 사용).
+native DOM 리스너 옵션(`capture`/`passive`/`once`)을 이벤트명 접미사로 노출하는 디렉티브. `SdOptionEventPlugin` 과 함께 동작. 출력은 접미사 그대로의 이름: `click.capture`/`click.once`/`click.capture.once`, `mousedown.capture`/`mouseup.capture`/`mouseover.capture`/`mouseout.capture`, `keydown.capture`/`keyup.capture`, `focus.capture`/`blur.capture`, `invalid.capture`, `scroll.capture`/`scroll.passive`/`scroll.capture.passive`, `wheel.passive`/`wheel.capture.passive`, `touchstart.passive`/`touchmove.passive`/`touchend.passive`(및 `.capture.passive` 변형), `dragover.capture`/`dragenter.capture`/`dragleave.capture`/`drop.capture`, `transitionend.once`, `animationend.once`. 각 출력의 페이로드 타입은 해당 native 이벤트(`MouseEvent`/`KeyboardEvent`/`FocusEvent`/`DragEvent`/`WheelEvent`/`TouchEvent`/`TransitionEvent`/`AnimationEvent`/`Event`).
 
 ```html
-<div (scroll.passive)="onScroll()" (keydown.capture)="onKeydown($event)">...</div>
-```
-
-### SdOptionEventPlugin
-
-```ts
-class SdOptionEventPlugin extends EventManagerPlugin
+<div (keydown.capture)="onKeydownCapture($event)" (scroll.passive)="onScroll($event)">...</div>
 ```
 
-- `.capture`/`.passive`/`.once` 수식어 이벤트를 처리하는 Angular `EVENT_MANAGER_PLUGINS`. `provideSdAngular` 가 등록(직접 사용 안 함). `SdEvents` 디렉티브의 기반.
+### `SdOptionEventPlugin`
 
-### SdCommandDirective — `[sdRefreshCommand]` / `[sdSaveCommand]` / `[sdInsertCommand]`
-
-```ts
-sdRefreshCommand = output<KeyboardEvent>(); // Ctrl+Alt+L
-sdSaveCommand = output<KeyboardEvent>();    // Ctrl+S
-sdInsertCommand = output<KeyboardEvent>();  // Insert
-```
+`EventManagerPlugin` 확장(`provideSdAngular` 가 `EVENT_MANAGER_PLUGINS` multi 로 등록). 이벤트명 접미사 `.capture`/`.passive`/`.once` 를 native 리스너 옵션으로 변환. 위 `SdEvents` 출력이 이 플러그인 위에서 동작.
 
-- 전역 키보드 단축키를 출력으로. 최상위 열린 모달 안에서만 동작(다른 화면 간섭 방지). crud 골격이 `sdSaveCommand` 로 CTRL+S 저장 연결.
+## 커맨드 단축키
 
-### SdGlobalErrorHandlerPlugin
+### `SdCommandDirective` — `[sdRefreshCommand],[sdSaveCommand],[sdInsertCommand]`
 
-```ts
-class SdGlobalErrorHandlerPlugin implements ErrorHandler
-```
+전역 키 조합을 받아 출력으로 발화하는 디렉티브. 호스트가 최상위 열린 모달 안이거나 모달이 없을 때만 처리.
 
-- 전역 에러 핸들러. 처리되지 않은 에러/Promise 거부를 시스템 로그 적재 + 전체화면 에러 오버레이로 표시(앱 destroy 후 클릭 시 reload). `provideSdAngular` 가 `ErrorHandler` 로 등록(직접 사용 안 함).
+- `sdRefreshCommand: output<KeyboardEvent>` — `Ctrl+Alt+L`.
+- `sdSaveCommand: output<KeyboardEvent>` — `Ctrl+S`(Alt 없이). `sd-crud-list`/`sd-crud-detail` 이 hostDirective 로 사용해 저장에 배선.
+- `sdInsertCommand: output<KeyboardEvent>` — `Ctrl+Insert`.
 
-## 시각 효과·검증 디렉티브
+## ripple
 
-### setupRipple / SdRipple — `[sdRipple]`
+### `setupRipple`
 
 ```ts
-setupRipple(enableFn?: () => boolean): void;
-// SdRipple: enabled = input.required({ alias: "sdRipple", transform: booleanAttribute });
+function setupRipple(enableFn?: () => boolean): void
 ```
 
-- 클릭 시 파동(ripple) 효과. `setupRipple` 은 constructor 에서, `[sdRipple]="true"` 디렉티브는 템플릿에서. `enableFn`/`enabled` 가 false 면 효과 비활성(disabled 컨트롤). 버튼·체크박스·리스트가 사용.
+- 주입 컨텍스트에서 호출. 호스트를 `position:relative; overflow:hidden` 으로 만들고 `pointerdown` 시 확장 원형 ripple 생성. `enableFn` 이 false 반환 시 스킵. SSR no-op.
 
-### setupRevealOnShow / SdShowEffect — `[sdShowEffect]`
+### `SdRipple` — `[sdRipple]`
 
-```ts
-setupRevealOnShow(optFn?: () => { type?: "l2r" | "t2b"; enabled?: boolean }): void;
-// SdShowEffect: enabled = input.required({ alias: "sdShowEffect" }); sdShowEffectType = input<"l2r"|"t2b">("t2b");
-```
+- `enabled: input.required({ alias: "sdRipple", transform: booleanAttribute })` — 속성값을 boolean 으로. `setupRipple(() => enabled())` 배선.
 
-- 뷰포트 진입 시 페이드+슬라이드 노출 애니메이션. `type` `"t2b"`=위→아래(기본), `"l2r"`=좌→우. `enabled`=false 면 애니메이션 없이 즉시 표시.
+## 노출 애니메이션
 
-### setupInvalid / SdInvalid — `[sdInvalid]`
+### `setupRevealOnShow`
 
 ```ts
-setupInvalid(getInvalidMessage: () => string): void;
-// SdInvalid: invalidMessage = input.required<string>({ alias: "sdInvalid" });
+function setupRevealOnShow(optFn?: () => { type?: "l2r" | "t2b"; enabled?: boolean }): void
 ```
 
-- 호스트에 숨김 input 을 붙여 native form 검증에 참여. `getInvalidMessage()`/`invalidMessage` 가 빈 문자열이 아니면 invalid(좌상단 빨간 인디케이터 + form 제출 차단). 폼 입력 컨트롤이 내부 사용.
+- 초기 숨김(opacity 0 + 이동) 후 `IntersectionObserver` 로 화면 진입 시 슬라이드-인. `type` = `"l2r"`(좌→우) / `"t2b"`(위→아래, 기본). `enabled` 기본 true(false 면 즉시 표시).
 
-## 타입드 템플릿 디렉티브
+### `SdShowEffect` — `[sdShowEffect]`
 
-### SdTypedTemplate — `ng-template[typed]`
+- `enabled: input.required({ alias: "sdShowEffect", transform: booleanAttribute })`.
+- `sdShowEffectType: input<"l2r" | "t2b">("t2b")` — 노출 방향.
 
-```ts
-typed = input.required<T>();
-```
-
-- `ng-template` 컨텍스트 타입을 명시(`ngTemplateContextGuard`). 재귀 메뉴/트리 템플릿에서 `let-x` 의 타입 안전성 확보. `[typed]` 에 타입 토큰을 넘김.
+## invalid 표시
 
-### SdItemOfTemplate — `ng-template[itemOf]`
+### `setupInvalid`
 
 ```ts
-itemOf = input.required<TItem[]>();
-// SdItemOfTemplateContext<TItem> { $implicit; item; index; depth }
+function setupInvalid(getInvalidMessage: () => string): void
 ```
 
-- 반복 항목 템플릿 마커. `[itemOf]="items()"` 로 항목 타입을 추론해 `let-item`/`let-index`/`let-depth` 제공. select·shared-data·calendar 등의 항목 슬롯에 사용.
+- 호스트에 danger 인디케이터 점 + 숨김 input(native validity 운반)을 주입. `getInvalidMessage()` 가 빈 문자열이 아니면 invalid(점 표시·`setCustomValidity`). `sd-form` 의 `checkValidity()` 에 연동. 모든 검증 컨트롤(`sd-textfield` 등)의 내부 기반.
 
-## signal·model 헬퍼
+### `SdInvalid` — `[sdInvalid]`
 
-### setupModelHook
-
-```ts
-setupModelHook<T>(model: WritableSignal<T>, canFn: Signal<(item: T) => boolean | Promise<boolean>>): void;
-```
+- `invalidMessage: input.required<string>({ alias: "sdInvalid" })` — 비어있지 않으면 호스트를 invalid 표시.
 
-- model 의 `set`/`update` 를 가로채 `canFn` 이 허용할 때만 적용. false 면 변경 거부, Promise 면 비동기 확인 후 적용(에러는 `ErrorHandler`). 체크박스·스위치·select-list 의 `canChangeFn` 이 사용.
+## 타입드 템플릿
 
-### mark
+### `SdTypedTemplate<T>` — `ng-template[typed]`
 
-```ts
-mark(sig: WritableSignal<any>): void;
-```
+- `typed: input.required<T>()` — 템플릿 컨텍스트 타입을 정하는 값. 정적 `ngTemplateContextGuard` 로 컨텍스트를 `T` 로 좁힘.
 
-- in-place mutation 한 signal 값에 shallow copy(배열/객체)로 새 참조를 만들어 변경 통지. 시트 셀에서 객체 필드를 직접 수정한 뒤 호출(`(valueChange)="mark(items)"`).
+### `SdItemOfTemplate<TItem>` — `ng-template[itemOf]`
 
-### setSafeStyle
-
-```ts
-setSafeStyle(renderer: Renderer2, el: HTMLElement, style: Partial<CSSStyleDeclaration>): void;
-```
-
-- `Renderer2.setStyle` 로 여러 스타일을 한 번에 적용하는 헬퍼(키별 순회). `style` 객체의 각 CSS 속성을 엘리먼트에 설정. 디렉티브/composable 에서 DOM 스타일을 안전하게 줄 때 사용(`setupInvalid` 등이 내부 사용).
-
-### FormatPipe — `| format`
-
-```ts
-@Pipe({ name: "format" }) transform(value: string | DateTime | DateOnly | undefined, format: string): string;
-```
-
-- 값 포맷. `DateTime`/`DateOnly` 는 `toFormatString(format)`, 문자열은 `X` 마스크(`|` 로 길이 분기). null 이면 빈 문자열(결측 보존). calendar 등이 사용.
+- `itemOf: input.required<TItem[]>()` — 항목 배열; 원소 타입으로 per-item 컨텍스트를 정함. 공유데이터 select·calendar 등 항목 렌더 템플릿에 사용.
+- `SdItemOfTemplateContext<TItem>` = `{ $implicit: TItem; item: TItem; index: number; depth: number }`. 템플릿에서 `let-item="item"` 등으로 받음.
 
 ```html
-{{ date | format: "yyyy-MM-dd" }}
+<sd-shared-data-select [items]="sharedCustomers.items()" ...>
+  <ng-template [itemOf]="sharedCustomers.items()" let-item="item">{{ item.name }}</ng-template>
+</sd-shared-data-select>
 ```
 
-### 타입 유틸
+## 전역 에러 핸들러
 
-```ts
-DirectiveInputSignals<T> // 컴포넌트의 InputSignal 프로퍼티 → 값 타입 매핑(undefined 포함 필드는 optional)
-UndefToOptional<T>       // undefined 포함 프로퍼티를 optional 로 변환
-WithOptional<T, K>       // 특정 키 K 를 optional 로
-SelectModalOutputResult<TKey> { selectedKeys: TKey[] } // 선택 모달 close 페이로드
-```
+### `SdGlobalErrorHandlerPlugin`
 
-- `DirectiveInputSignals<T>` — 모달/토스트/인쇄의 `inputs` 타입 계산에 쓰이는 유틸(컴포넌트 input signal 을 일반 값 객체로 매핑). `SelectModalOutputResult` — 선택형 모달이 close 로 돌려주는 표준 페이로드.
+Angular `ErrorHandler` 구현(`provideSdAngular` 가 `ErrorHandler` 로 등록). `handleError(event)` — 브라우저에서 에러를 분류해 1회 전체화면 오버레이 표시 + `SdSystemLogProvider` 적재 + 앱 파괴(클릭 시 새로고침). SSR 에선 로깅만. 직접 호출할 일은 없고 등록만.

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

@@ -1,122 +1,94 @@
-# @simplysm/angular — 부가 기능(권한표·상태프리셋·테마·주소·에디터·시각화)
+# @simplysm/angular — features(테마·주소·에디터·시각화)
 
-위 군에 들지 않는 도메인성/표시용 컴포넌트 모음. 특정 화면 기능을 붙일 때 개별로 읽힘. 모두 standalone `sd-*` 컴포넌트.
+테마 토글·폰트 크기, 주소 검색 모달, 리치텍스트 에디터, 라벨·노트·진행률·캘린더·바코드·차트 등 표시용 컴포넌트 모음. 특정 화면 기능을 붙일 때 개별로 읽힘.
 
-## SdPermissionTable — `<sd-permission-table>`
+## 테마
 
-```ts
-value = model<Record<string, boolean>>({}); // "<코드>.use"/"<코드>.edit" → boolean
-items = input<SdPermission<TModule>[]>([]);
-disabled = input(false);
-```
+### `SdThemeProvider`
 
-- 권한 트리 편집표. `items`(`SdPermission` 트리, routing-appstructure.md)를 사용/편집 체크박스 표로 렌더. `value` 는 `<코드>.use`/`<코드>.edit` 키의 boolean 맵(양방향).
-- use 미체크면 edit 불가, use 해제 시 edit 자동 해제, 부모 토글 시 하위 일괄 변경. `disabled`=전체 읽기전용. 권한 관리 화면에 사용.
+`@Injectable({ providedIn: "root" })`. (`provideSdAngular` 가 dark/fontSize 를 `SdLocalStorageProvider` 에 영속화)
 
-## SdStatePreset — `<sd-state-preset>`
+- `dark: WritableSignal<boolean>` (초기 false) — `effect` 로 body `sd-theme-dark` 클래스 토글(브라우저 전용).
+- `fontSize: WritableSignal<number>` (초기 12) — `effect` 로 `documentElement.style.fontSize` 설정.
+- `fontSizePresets: readonly number[]` = `[12, 14, 16, 20, 24, 28]`.
+- `increaseFontSize()` / `decreaseFontSize()` — 다음/이전 프리셋으로(경계에서 no-op).
 
-```ts
-key = input.required<string>(); state = model.required<TState>(); size = input<"sm"|"lg">();
-// SdStatePresetDef<TState> { name: string; state: TState }
-```
+### `SdThemeSelector` — `<sd-theme-selector>`
 
-- 현재 화면 상태(`state`)를 이름붙여 저장·복원하는 프리셋 바(검색 조건 즐겨찾기 등). 별 버튼=현재 상태 저장(이름 prompt), 프리셋 클릭=상태 적용, 저장/삭제 버튼 제공.
-- `key` 로 `injectSdSystemConfigResource` 에 영속. `state` 는 화면이 들고 있는 상태 시그널(양방향).
+팔레트 아이콘 드롭다운(폰트 +/- · 다크모드 스위치). input 없음. `isMinFontSize`/`isMaxFontSize: computed` 로 +/- 버튼 비활성.
 
-## SdThemeProvider 셀렉터
+## 주소
 
-### SdThemeSelector — `<sd-theme-selector>`
+### `SdAddressSearchModal` — `<sd-address-search-modal>`
 
-```ts
-// 입력 없음. SdThemeProvider 를 inject.
-```
+Daum 우편번호 위젯 모달. `SdModalContentDef<Address>` 구현 — `_sdModal.showAsync({ type: SdAddressSearchModal, ... })` 로 띄움.
 
-- 다크모드 토글 + 글자크기 증감 UI 드롭다운. `SdThemeProvider` 를 직접 조작(`fontSize`/`dark`). 탑바 등에 배치. provider 본체는 [README.md](./README.md) "테마·배경".
+- input 없음. `close: output<Address>` — 선택 완료 시 주소 emit.
+- `Address` = `{ postNumber: string | undefined; address: string | undefined; buildingName: string | undefined }`.
 
-## SdAddressSearchModal — `<sd-address-search-modal>`
-
-```ts
-close = output<Address>(); // SdModalContentDef<Address>
-// Address { postNumber: string | undefined; address: string | undefined; buildingName: string | undefined }
-```
+## 에디터
 
-- 다음(Daum) 우편번호 검색 모달. `SdModalProvider.showAsync({ type: SdAddressSearchModal, inputs: {} })` 로 띄움. 스크립트를 동적 로드하며 실패 시 에러 메시지 표시. 선택 시 `{ postNumber, address, buildingName }` 으로 close.
+### `SdTiptapEditor` — `<sd-tiptap-editor>`
 
-```ts
-const addr = await this._sdModal.showAsync({ title: "주소 검색", type: SdAddressSearchModal, inputs: {} });
-```
-
-## SdTiptapEditor — `<sd-tiptap-editor>`
-
-```ts
-value = model<string>(); // HTML
-disabled; readonly; required; placeholder = input<string>();
-validatorFn = input<(value: string | undefined) => string | undefined>();
-extensions = input<AnyExtension[]>();
-editor: WritableSignal<Editor | undefined>; // @internal — TipTap 인스턴스
-```
+툴바 내장 리치텍스트(TipTap) 에디터.
 
-- 리치 텍스트(WYSIWYG) 에디터. `value` 는 HTML 문자열(빈 내용이면 undefined, 결측 보존). 내장 툴바(제목·굵게·색·정렬·목록·인용·코드블록 등) 제공.
-- `extensions` 지정 시 기본 확장 대체, 미지정 시 StarterKit + 색/하이라이트/정렬/이미지/밑줄(+placeholder). `disabled`/`readonly`=편집 불가, `required`/`validatorFn`=form 검증(`setupInvalid`).
+- `value: model<string>` — HTML 콘텐츠(비면 `undefined`).
+- `disabled: boolean` — true 면 툴바 숨김 + 비편집.
+- `readonly: boolean` — 비편집(기본 커서 유지). 편집 가능 = `!disabled && !readonly`.
+- `required: boolean` — 빈 값일 때 "값을 입력하세요.".
+- `placeholder: string` — Placeholder 확장 추가(`extensions` 미지정 시).
+- `validatorFn: (value) => string | undefined` — 커스텀 검증.
+- `extensions: AnyExtension[]` — 기본 확장 셋 전체 override.
+- 기본 확장: StarterKit·TextStyle·Color·Highlight·TextAlign·Image(base64)·Underline(+placeholder 시 Placeholder). 툴바: h1/h2·bold/italic/underline/strike·텍스트/배경색·리스트·들여쓰기·인용·코드블록·정렬·clean.
 
 ## 시각화
 
-### SdLabel — `<sd-label>`
+### `SdLabel` — `<sd-label>`
 
-```ts
-theme = input<"primary"|"secondary"|"info"|"success"|"warning"|"danger"|"gray"|"blue-gray">();
-color = input<string>(); clickable = input(false);
-```
+- `theme: "primary"|...|"blue-gray"|undefined` — 배경(`--theme-{key}-default`; 미지정 시 gray-darker).
+- `color: string` — 명시 배경색(theme 보다 우선).
+- `clickable: boolean` — true 면 포인터 커서 + hover 진해짐.
 
-- 짧은 배지/태그. `theme` 또는 임의 `color`(배경) 지정. `clickable`=호버 강조 + 커서 포인터. 상태 표시에 사용.
+### `SdNote` — `<sd-note>`
 
-### SdNote — `<sd-note>`
+- `theme: "primary"|...|"blue-gray"|undefined` — `--theme-{key}-lightest` 배경+테두리(미지정 시 gray-lightest, 테두리 없음).
+- `size: "sm"|"lg"` — `"sm"` 작은 폰트/패딩, `"lg"` 큰 패딩.
+- `inset: boolean` — true 면 라운드 제거(flush).
 
-```ts
-theme = input<...8색>(); size = input<"sm"|"lg">(); inset = input(false);
-```
+### `SdProgress` — `<sd-progress>`
 
-- 안내 박스(callout). `theme` 의 옅은 배경. `inset`=라운드 제거(영역 내장). 주의/도움말 문구에 사용.
+- `theme: input.required<"primary"|...|"blue-gray">` — 진행 바 색(`--theme-{key}-default`).
+- `value: input.required<number>` — 0~1 비율(퍼센트 표시).
+- `inset: boolean` — true 면 라운드/테두리 제거. `size: "sm"|"lg"` — 패딩.
 
-### SdProgress — `<sd-progress>`
+### `SdCalendar<T>` — `<sd-calendar>`
 
-```ts
-theme = input.required<...8색>(); value = input.required<number>(); // 0~1
-inset; size = input<"sm"|"lg">();
-```
+6×7 월 그리드에 일자별 항목 투영.
 
-- 진행률 막대. `value`(0~1)를 퍼센트 텍스트 + 채움 막대로 표시(0~100% clamp). `theme` 필수.
-
-### SdCalendar — `<sd-calendar>`
-
-```ts
-items = input.required<T[]>(); getItemDateFn = input.required<(item: T, index: number) => DateOnly>();
-yearMonth = input(new DateOnly().setDay(1));
-weekStartDay = input(0); minDaysInFirstWeek = input(1);
-itemTplRef = contentChild.required(SdItemOfTemplate); // [itemOf] 셀 항목 템플릿(필수)
-```
-
-- 월간 캘린더. `getItemDateFn` 으로 각 항목의 날짜를 산출해 해당 칸에 `[itemOf]` 템플릿으로 렌더. `yearMonth`=표시 월, `weekStartDay`=주 시작 요일(0=일), `minDaysInFirstWeek`=첫 주 판정.
+- `items: input.required<T[]>` — 데이터.
+- `getItemDateFn: input.required<(item, index) => DateOnly>` — 항목→일자 매핑.
+- `yearMonth: DateOnly` (기본 이번달 1일) — 표시 월(밖 일자는 `not-current` 클래스).
+- `weekStartDay: number` (기본 0=일요일) — 첫 열 요일.
+- `minDaysInFirstWeek: number` (기본 1) — 첫 주 시작 계산.
+- 콘텐츠: `[itemOf]` 항목 템플릿(필수).
 
 ```html
-<sd-calendar [items]="schedules()" [getItemDateFn]="getDate" [yearMonth]="month()">
-  <ng-template [itemOf]="schedules()" let-item="item">{{ item.title }}</ng-template>
+<sd-calendar [items]="events()" [getItemDateFn]="getDate" [(yearMonth)]="month">
+  <ng-template [itemOf]="events()" let-item="item">{{ item.title }}</ng-template>
 </sd-calendar>
 ```
 
-### SdBarcode — `<sd-barcode>`
+### `SdBarcode` — `<sd-barcode>`
 
-```ts
-type = input.required<BarcodeType>(); value = input<string>();
-// BarcodeType: "qrcode"|"code128"|"ean13"|"datamatrix"|... (bwip-js 전체 심볼 유니온)
-```
+bwip-js 로 바코드/QR 을 인라인 SVG 렌더.
 
-- 바코드/QR 렌더(bwip-js SVG). `type`=심볼 종류, `value`=인코딩 문자열(빈 값이면 미표시). `BarcodeType` 는 bwip-js 가 지원하는 전체 바코드 유형 리터럴 유니온.
+- `type: input.required<BarcodeType>` — bwip-js `bcid`(심볼로지). `BarcodeType` 은 bwip-js 전 심볼로지 문자열 union(예 `"qrcode"`·`"code128"`·`"code39"`·`"ean13"`·`"datamatrix"`·`"pdf417"`·`"upca"` 등 ~150종).
+- `value: string` — 바코드 텍스트(비면 미렌더).
 
-### SdEcharts — `<sd-echarts>`
+### `SdEcharts` — `<sd-echarts>`
 
-```ts
-option = input.required<echarts.EChartsOption>(); notMerge = input(false); loading = input(false);
-```
+Apache ECharts(SVG) 래퍼. `SdResizeDirective` hostDirective 로 자동 리사이즈.
 
-- ECharts 차트. `option` 변경 시 `setOption` 적용(`notMerge`=true 면 기존 옵션 병합 안 함). `loading`=로딩 인디케이터. 호스트 리사이즈 시 자동 `resize`(svg 렌더).
+- `option: input.required<echarts.EChartsOption>` — 차트 옵션(반응형 `setOption`).
+- `notMerge: boolean` (기본 false) — true 면 이전 옵션과 병합 없이 교체.
+- `loading: boolean` (기본 false) — true 면 `showLoading()`, false 면 `hideLoading()`.