@simplysm/sd-claude 14.0.94 → 14.0.96

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

@@ -1,76 +1,167 @@
-# @simplysm/angular — 호스트 디렉티브·signal 헬퍼·선택 매니저
+# @simplysm/angular — 호스트 디렉티브·signal 헬퍼
 
-DOM 관찰(리사이즈/교차)·캡처 이벤트·커맨드 단축키·ripple·노출 애니메이션·invalid 표시·타입드 템플릿을 호스트 엘리먼트에 붙이는 디렉티브와, 선택/정렬/펼침 상태를 시그널로 관리하는 매니저 함수 군. `setup*` 헬퍼는 컴포넌트 `constructor` 에서 호출(`inject(ElementRef)` 의존), `Sd*` 디렉티브는 그 헬퍼를 attribute 로 래핑.
+DOM 관찰(리사이즈/교차)·캡처 이벤트·커맨드 단축키·ripple·노출 애니메이션·invalid 표시·타입드 템플릿을 호스트 엘리먼트에 붙이는 디렉티브와, signal/model 을 다루는 작은 헬퍼 군. `setup*` 헬퍼는 컴포넌트 `constructor`(주입 컨텍스트)에서 호출(`inject(ElementRef)` 의존), `Sd*` 디렉티브는 그 헬퍼를 attribute 로 래핑.
 
 ## DOM 관찰 디렉티브
 
 ### SdResizeDirective — `[sdResize]`
-ResizeObserver 로 크기 변경 감지(rAF 디바운스).
-- `sdResize: output<SdResizeEvent>` — `{ heightChanged: boolean; widthChanged: boolean; target: HTMLElement; contentRect: DOMRectReadOnly }`. 폭/높이 변경 여부와 새 크기.
+
+```ts
+sdResize = output<SdResizeEvent>();
+// SdResizeEvent { heightChanged: boolean; widthChanged: boolean; target: HTMLElement; contentRect: DOMRectReadOnly }
+```
+
+- `ResizeObserver` 로 크기 변화를 rAF 디바운스해 방출. `heightChanged`/`widthChanged` 로 변경 축을 구분(불필요한 재계산 회피). 시트·collapse·echarts 가 사용.
+
+```html
+<div (sdResize)="onResize($event)">...</div>
+```
 
 ### SdIntersectionDirective — `[sdIntersection]`
-IntersectionObserver 로 화면 교차 감지.
-- `sdIntersection: output<SdIntersectionEvent>` — `{ entry: IntersectionObserverEntry }`. 마지막 entry 전달. 무한 스크롤·등장 트리거에.
 
-## 캡처 이벤트·명령 단축키
+```ts
+sdIntersection = output<SdIntersectionEvent>();
+// SdIntersectionEvent { entry: IntersectionObserverEntry }
+```
+
+- `IntersectionObserver` 로 뷰포트 진입/이탈을 방출. 지연 로드·노출 트리거에 사용. `entry.isIntersecting` 으로 판정.
 
-### 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회.
+## 이벤트·커맨드 디렉티브
+
+### 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" ...
+```
+
+- capture/passive/once 수식어가 붙은 DOM 이벤트를 Angular 출력으로 노출(`SdOptionEventPlugin` 과 함께 동작). 성능·캡처가 필요한 이벤트 바인딩에 사용. 호스트 디렉티브로도 쓰임(시트가 `keydown.capture` 등 사용).
+
+```html
+<div (scroll.passive)="onScroll()" (keydown.capture)="onKeydown($event)">...</div>
+```
 
 ### SdOptionEventPlugin
-위 `.capture`/`.passive`/`.once` 접미사 이벤트를 Angular 가 인식하게 하는 `EventManagerPlugin`. `provideSdAngular` 가 등록하므로 직접 쓸 일은 없음.
 
-### SdCommandDirective — `[sdRefreshCommand],[sdSaveCommand],[sdInsertCommand]`
-전역 키보드 단축키를 명령으로 변환(최상위 열린 모달 기준으로만 처리).
-- `sdRefreshCommand: output<KeyboardEvent>` — `Ctrl+Alt+L` (조회).
-- `sdSaveCommand: output<KeyboardEvent>` — `Ctrl+S` (저장).
-- `sdInsertCommand: output<KeyboardEvent>` — `Ctrl+Insert` (등록).
+```ts
+class SdOptionEventPlugin extends EventManagerPlugin
+```
+
+- `.capture`/`.passive`/`.once` 수식어 이벤트를 처리하는 Angular `EVENT_MANAGER_PLUGINS`. `provideSdAngular` 가 등록(직접 사용 안 함). `SdEvents` 디렉티브의 기반.
+
+### SdCommandDirective — `[sdRefreshCommand]` / `[sdSaveCommand]` / `[sdInsertCommand]`
+
+```ts
+sdRefreshCommand = output<KeyboardEvent>(); // Ctrl+Alt+L
+sdSaveCommand = output<KeyboardEvent>();    // Ctrl+S
+sdInsertCommand = output<KeyboardEvent>();  // Insert
+```
+
+- 전역 키보드 단축키를 출력으로. 최상위 열린 모달 안에서만 동작(다른 화면 간섭 방지). crud 골격이 `sdSaveCommand` 로 CTRL+S 저장 연결.
+
+### SdGlobalErrorHandlerPlugin
+
+```ts
+class SdGlobalErrorHandlerPlugin implements ErrorHandler
+```
+
+- 전역 에러 핸들러. 처리되지 않은 에러/Promise 거부를 시스템 로그 적재 + 전체화면 에러 오버레이로 표시(앱 destroy 후 클릭 시 reload). `provideSdAngular` 가 `ErrorHandler` 로 등록(직접 사용 안 함).
+
+## 시각 효과·검증 디렉티브
+
+### setupRipple / SdRipple — `[sdRipple]`
+
+```ts
+setupRipple(enableFn?: () => boolean): void;
+// SdRipple: enabled = input.required({ alias: "sdRipple", transform: booleanAttribute });
+```
+
+- 클릭 시 파동(ripple) 효과. `setupRipple` 은 constructor 에서, `[sdRipple]="true"` 디렉티브는 템플릿에서. `enableFn`/`enabled` 가 false 면 효과 비활성(disabled 컨트롤). 버튼·체크박스·리스트가 사용.
+
+### setupRevealOnShow / SdShowEffect — `[sdShowEffect]`
+
+```ts
+setupRevealOnShow(optFn?: () => { type?: "l2r" | "t2b"; enabled?: boolean }): void;
+// SdShowEffect: enabled = input.required({ alias: "sdShowEffect" }); sdShowEffectType = input<"l2r"|"t2b">("t2b");
+```
 
-## 시각 효과·유효성 디렉티브 + setup 헬퍼
+- 뷰포트 진입 시 페이드+슬라이드 노출 애니메이션. `type` `"t2b"`=위→아래(기본), `"l2r"`=좌→우. `enabled`=false 면 애니메이션 없이 즉시 표시.
 
-### setupRipple / SdRipple
-클릭 위치에서 퍼지는 ripple 효과.
-- `setupRipple(enableFn?: () => boolean): void` — 호스트에 ripple 부착. `enableFn` 이 false 반환 시 비활성.
-- `SdRipple`(`[sdRipple]`): `sdRipple: input.required<boolean>` — ripple 활성 여부.
+### setupInvalid / SdInvalid — `[sdInvalid]`
 
-### setupRevealOnShow / SdShowEffect
-교차 시 페이드+슬라이드 등장.
-- `setupRevealOnShow(optFn?: () => { type?: "l2r"|"t2b"; enabled?: boolean }): void` — `type` 이 등장 방향(`"t2b"` 위→아래 기본, `"l2r"` 좌→우), `enabled` false 면 애니메이션 없이 즉시 표시.
-- `SdShowEffect`(`[sdShowEffect]`): `sdShowEffect: input.required<boolean>`(활성), `sdShowEffectType: "l2r"|"t2b"`.
+```ts
+setupInvalid(getInvalidMessage: () => string): void;
+// SdInvalid: invalidMessage = input.required<string>({ alias: "sdInvalid" });
+```
 
-### setupInvalid / SdInvalid
-커스텀 유효성 메시지를 네이티브 폼 검증으로 표시(빨간 인디케이터 + form submit 차단).
-- `setupInvalid(getInvalidMessage: () => string): void` — 빈 문자열이면 유효, 아니면 그 메시지로 invalid. 숨겨진 input 의 `setCustomValidity` 로 처리.
-- `SdInvalid`(`[sdInvalid]`): `sdInvalid: input.required<string>` — 오류 메시지(빈 값=유효).
+- 호스트에 숨김 input 을 붙여 native form 검증에 참여. `getInvalidMessage()`/`invalidMessage` 가 빈 문자열이 아니면 invalid(좌상단 빨간 인디케이터 + form 제출 차단). 폼 입력 컨트롤이 내부 사용.
 
 ## 타입드 템플릿 디렉티브
 
 ### 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`.
+```ts
+typed = input.required<T>();
+```
+
+- `ng-template` 컨텍스트 타입을 명시(`ngTemplateContextGuard`). 재귀 메뉴/트리 템플릿에서 `let-x` 의 타입 안전성 확보. `[typed]` 에 타입 토큰을 넘김.
 
-```html
-<ng-template [itemOf]="items()" let-item="item">{{ item.name }}</ng-template>
+### SdItemOfTemplate — `ng-template[itemOf]`
+
+```ts
+itemOf = input.required<TItem[]>();
+// SdItemOfTemplateContext<TItem> { $implicit; item; index; depth }
 ```
 
-## 선택·정렬·펼침 매니저 (signal 기반)
+- 반복 항목 템플릿 마커. `[itemOf]="items()"` 로 항목 타입을 추론해 `let-item`/`let-index`/`let-depth` 제공. select·shared-data·calendar 등의 항목 슬롯에 사용.
+
+## signal·model 헬퍼
 
-목록/시트가 선택·정렬·트리펼침 상태를 시그널로 관리하도록 돕는 순수 함수. 외부 시그널을 받아 파생 시그널·조작 함수를 반환.
+### setupModelHook
+
+```ts
+setupModelHook<T>(model: WritableSignal<T>, canFn: Signal<(item: T) => boolean | Promise<boolean>>): void;
+```
 
-### 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` 으로 결측·객체 키도 안전.
+- model 의 `set`/`update` 를 가로채 `canFn` 이 허용할 때만 적용. false 면 변경 거부, Promise 면 비동기 확인 후 적용(에러는 `ErrorHandler`). 체크박스·스위치·select-list 의 `canChangeFn` 이 사용.
+
+### mark
+
+```ts
+mark(sig: WritableSignal<any>): void;
+```
 
-### useSortingManager
-- 입력: `sorts: WritableSignal<SortingDef[]>`.
-- 반환: `defMap`(키→`{ indexText?, desc }`, 다중 정렬 시 순번 표시), `toggle(key, multiple)`(미정렬→오름차순→내림차순→해제 순환, `multiple` 이면 누적), `sort<T>(items)`(현재 정렬로 배열 정렬, null 은 앞쪽).
-- `SortingDef` — `{ key: string; desc: boolean }`.
+- in-place mutation 한 signal 값에 shallow copy(배열/객체)로 새 참조를 만들어 변경 통지. 시트 셀에서 객체 필드를 직접 수정한 뒤 호출(`(valueChange)="mark(items)"`).
+
+### 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 등이 사용.
+
+```html
+{{ date | format: "yyyy-MM-dd" }}
+```
+
+### 타입 유틸
+
+```ts
+DirectiveInputSignals<T> // 컴포넌트의 InputSignal 프로퍼티 → 값 타입 매핑(undefined 포함 필드는 optional)
+UndefToOptional<T>       // undefined 포함 프로퍼티를 optional 로 변환
+WithOptional<T, K>       // 특정 키 K 를 optional 로
+SelectModalOutputResult<TKey> { selectedKeys: TKey[] } // 선택 모달 close 페이로드
+```
 
-### useExpandingManager<T>
-- 입력: `items`/`expandedItems`(model)/`getChildrenFn`/`sort`.
-- 반환: `displayItems`(펼침 반영 평면 목록)/`hasExpandable`/`isAllExpanded`(Signal), `toggle`/`toggleAll`/`isVisible(item)`(조상이 모두 펼쳐졌는지)/`def(item)`(`ExpandItemDef`).
-- `ExpandItemDef<T>` — `{ item; parentDef; hasChildren; depth }`.
+- `DirectiveInputSignals<T>` — 모달/토스트/인쇄의 `inputs` 타입 계산에 쓰이는 유틸(컴포넌트 input signal 을 일반 값 객체로 매핑). `SelectModalOutputResult` — 선택형 모달이 close 로 돌려주는 표준 페이로드.

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

@@ -1,108 +1,122 @@
-# @simplysm/angular — 부가 기능(칸반·권한표·상태프리셋·테마·주소·에디터·시각화)
+# @simplysm/angular — 부가 기능(권한표·상태프리셋·테마·주소·에디터·시각화)
 
-위 군에 들지 않는 도메인성/표시용 컴포넌트 모음. 특정 화면 기능을 붙일 때 개별로 읽힘.
+위 군에 들지 않는 도메인성/표시용 컴포넌트 모음. 특정 화면 기능을 붙일 때 개별로 읽힘. 모두 standalone `sd-*` 컴포넌트.
 
-## 칸반 보드 (드래그 앤 드롭)
+## SdPermissionTable — `<sd-permission-table>`
 
-레인-카드 보드. `sd-kanban-board` > `sd-kanban-lane` > `sd-kanban` 중첩.
+```ts
+value = model<Record<string, boolean>>({}); // "<코드>.use"/"<코드>.edit" → boolean
+items = input<SdPermission<TModule>[]>([]);
+disabled = input(false);
+```
+
+- 권한 트리 편집표. `items`(`SdPermission` 트리, routing-appstructure.md)를 사용/편집 체크박스 표로 렌더. `value` 는 `<코드>.use`/`<코드>.edit` 키의 boolean 맵(양방향).
+- use 미체크면 edit 불가, use 해제 시 edit 자동 해제, 부모 토글 시 하위 일괄 변경. `disabled`=전체 읽기전용. 권한 관리 화면에 사용.
 
-### SdKanbanBoard<L, T> — `sd-kanban-board`
-- `selectedValues: model<T[]>` — 선택된 카드 값(Shift+클릭 다중 선택).
-- `drop: output<SdKanbanBoardDropInfo<L, T>>` — 카드 드롭 시 emit. `{ sourceKanbanValue?, targetLaneValue?, targetKanbanValue? }`(이동한 카드/대상 레인/대상 카드 값).
+## SdStatePreset — `<sd-state-preset>`
 
-### SdKanbanLane<L, T> — `sd-kanban-lane`
-- `value: input<L>` — 레인 식별 값(드롭 대상).
-- `busy: boolean` — 레인 busy 표시.
-- `useCollapse: boolean` — 접기 버튼 노출.
-- `collapse: model<boolean>` — 접힘 상태.
-- 슬롯: `#titleTpl`(레인 제목), `#toolTpl`(도구). 자식 `sd-kanban` 들 배치.
+```ts
+key = input.required<string>(); state = model.required<TState>(); size = input<"sm"|"lg">();
+// SdStatePresetDef<TState> { name: string; state: TState }
+```
 
-### SdKanban<L, T> — `sd-kanban`
-- `value: input<T>` — 카드 값.
-- `selectable: boolean` — Shift+클릭 선택 가능.
-- `draggable: boolean` — 드래그 가능.
-- `contentClass: string` — 카드 클래스.
+- 현재 화면 상태(`state`)를 이름붙여 저장·복원하는 프리셋 바(검색 조건 즐겨찾기 등). 별 버튼=현재 상태 저장(이름 prompt), 프리셋 클릭=상태 적용, 저장/삭제 버튼 제공.
+- `key` 로 `injectSdSystemConfigResource` 에 영속. `state` 는 화면이 들고 있는 상태 시그널(양방향).
 
-```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>
+## SdThemeProvider 셀렉터
+
+### SdThemeSelector — `<sd-theme-selector>`
+
+```ts
+// 입력 없음. SdThemeProvider 를 inject.
 ```
 
-## SdPermissionTable — `sd-permission-table`
+- 다크모드 토글 + 글자크기 증감 UI 드롭다운. `SdThemeProvider` 를 직접 조작(`fontSize`/`dark`). 탑바 등에 배치. provider 본체는 [README.md](./README.md) "테마·배경".
 
-권한 트리(`SdPermission[]`)를 체크박스 표로 편집. routing-appstructure.md 의 `SdAppStructureProvider.getPermissionsByStructure()` 결과를 입력.
-- `value: model<Record<string, boolean>>` — `"코드.액션"→보유` 권한 맵(체크 상태).
-- `items: input<SdPermission<TModule>[]>` — 권한 트리.
-- `disabled: boolean` — 읽기 전용.
+## SdAddressSearchModal — `<sd-address-search-modal>`
 
-## SdStatePreset<TState> — `sd-state-preset`
+```ts
+close = output<Address>(); // SdModalContentDef<Address>
+// Address { postNumber: string | undefined; address: string | undefined; buildingName: string | undefined }
+```
 
-화면 상태(필터 등)를 이름 붙여 저장·복원하는 프리셋 바. 프리셋은 `injectSdSystemConfigResource(key)` 로 영속.
-- `key: input.required<string>` — 프리셋 저장 키(화면 식별).
-- `state: model.required<TState>` — 현재 화면 상태. 프리셋 클릭 시 이 모델에 복원, 저장 시 현재 값을 프리셋에 기록.
-- `size: "sm"|"lg"` — 크기.
-- `SdStatePresetDef<TState>` — `{ name: string; state: TState }`(저장 단위).
+- 다음(Daum) 우편번호 검색 모달. `SdModalProvider.showAsync({ type: SdAddressSearchModal, inputs: {} })` 로 띄움. 스크립트를 동적 로드하며 실패 시 에러 메시지 표시. 선택 시 `{ postNumber, address, buildingName }` 으로 close.
 
-## SdThemeSelector — `sd-theme-selector`
+```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 인스턴스
+```
+
+- 리치 텍스트(WYSIWYG) 에디터. `value` 는 HTML 문자열(빈 내용이면 undefined, 결측 보존). 내장 툴바(제목·굵게·색·정렬·목록·인용·코드블록 등) 제공.
+- `extensions` 지정 시 기본 확장 대체, 미지정 시 StarterKit + 색/하이라이트/정렬/이미지/밑줄(+placeholder). `disabled`/`readonly`=편집 불가, `required`/`validatorFn`=form 검증(`setupInvalid`).
+
+## 시각화
+
+### SdLabel — `<sd-label>`
+
+```ts
+theme = input<"primary"|"secondary"|"info"|"success"|"warning"|"danger"|"gray"|"blue-gray">();
+color = input<string>(); clickable = input(false);
+```
 
-글자 크기 증감 + 다크모드 토글 드롭다운. `SdThemeProvider`(infra.md)를 조작. 입력 없음.
+- 짧은 배지/태그. `theme` 또는 임의 `color`(배경) 지정. `clickable`=호버 강조 + 커서 포인터. 상태 표시에 사용.
+
+### SdNote — `<sd-note>`
+
+```ts
+theme = input<...8색>(); size = input<"sm"|"lg">(); inset = input(false);
+```
+
+- 안내 박스(callout). `theme` 의 옅은 배경. `inset`=라운드 제거(영역 내장). 주의/도움말 문구에 사용.
+
+### SdProgress — `<sd-progress>`
+
+```ts
+theme = input.required<...8색>(); value = input.required<number>(); // 0~1
+inset; size = input<"sm"|"lg">();
+```
+
+- 진행률 막대. `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`=첫 주 판정.
+
+```html
+<sd-calendar [items]="schedules()" [getItemDateFn]="getDate" [yearMonth]="month()">
+  <ng-template [itemOf]="schedules()" let-item="item">{{ item.title }}</ng-template>
+</sd-calendar>
+```
+
+### SdBarcode — `<sd-barcode>`
+
+```ts
+type = input.required<BarcodeType>(); value = input<string>();
+// BarcodeType: "qrcode"|"code128"|"ean13"|"datamatrix"|... (bwip-js 전체 심볼 유니온)
+```
 
-## SdAddressSearchModal — `sd-address-search-modal`
+- 바코드/QR 렌더(bwip-js SVG). `type`=심볼 종류, `value`=인코딩 문자열(빈 값이면 미표시). `BarcodeType` 는 bwip-js 가 지원하는 전체 바코드 유형 리터럴 유니온.
 
-다음(Daum) 우편번호 검색 모달(`SdModalContentDef<Address>`). 스크립트를 동적 로드해 표시, 선택 시 주소 emit.
-- `close: output<Address>` — 선택 결과. `Address` = `{ postNumber?: string; address?: string; buildingName?: string }`(미입력 필드는 undefined 보존).
+### SdEcharts — `<sd-echarts>`
 
 ```ts
-const addr = await sdModal.showAsync({ type: SdAddressSearchModal, title: "주소 검색", inputs: {} });
+option = input.required<echarts.EChartsOption>(); notMerge = input(false); loading = input(false);
 ```
 
-## SdTiptapEditor — `sd-tiptap-editor`
-
-리치텍스트(Tiptap) 에디터. 색상·정렬·목록 툴바 내장.
-- `value: model<string>` — HTML 값.
-- `disabled`/`readonly`/`required: boolean` — 상태.
-- `placeholder: string` — 빈 상태 안내.
-- `validatorFn: (value) => string | undefined` — 커스텀 검증(반환 문자열이 오류).
-- `extensions: AnyExtension[]` — 추가 Tiptap 확장.
-
-보조 헬퍼 `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` — 로딩 오버레이.
+- ECharts 차트. `option` 변경 시 `setOption` 적용(`notMerge`=true 면 기존 옵션 병합 안 함). `loading`=로딩 인디케이터. 호스트 리사이즈 시 자동 `resize`(svg 렌더).

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

@@ -0,0 +1,54 @@
+# @simplysm/angular — 칸반(kanban)
+
+드래그앤드롭으로 카드를 레인 간 이동하고 카드를 다중 선택하는 칸반 보드 군. `sd-kanban-board`(보드) > `sd-kanban-lane`(레인) > `sd-kanban`(카드) 의 3계층으로 구성. `L`=레인 값 타입, `T`=카드 값 타입.
+
+## SdKanbanBoard — `<sd-kanban-board>`
+
+```ts
+selectedValues = model<T[]>([]);
+drop = output<SdKanbanBoardDropInfo<L, T>>();
+// SdKanbanBoardDropInfo<L,T> { sourceKanbanValue?: T; targetLaneValue?: L; targetKanbanValue?: T }
+```
+
+- 칸반 전체 보드(레인을 가로 배치). `selectedValues`=선택된 카드 값들(다중선택, model). `drop`=카드를 다른 위치에 떨군 결과(소스 카드값 + 대상 레인값 + 대상 카드값). 호스트가 `drop` 을 받아 데이터 재배치.
+
+```html
+<sd-kanban-board [(selectedValues)]="selected" (drop)="onDrop($event)">
+  <sd-kanban-lane [value]="'todo'"> ... </sd-kanban-lane>
+</sd-kanban-board>
+```
+
+## SdKanbanLane — `<sd-kanban-lane>`
+
+```ts
+busy = input(false); useCollapse = input(false); collapse = model(false);
+value = input<L>();
+// 슬롯: #titleTpl(제목) #toolTpl(도구) , 콘텐츠로 <sd-kanban>
+```
+
+- 한 레인(열). `value`=레인 식별값(drop 대상 판정·targetLaneValue). `busy`=레인 busy 오버레이, `useCollapse`=접기 토글 버튼(접으면 카드 숨김, `collapse` model).
+- 선택 가능한 카드가 있으면 레인 전체선택 체크박스 자동 노출. `#titleTpl`/`#toolTpl` 로 헤더/도구 영역.
+
+## SdKanban — `<sd-kanban>`
+
+```ts
+value = input<T>(); selectable = input(false); draggable = input(false);
+contentClass = input<string>();
+```
+
+- 한 카드. `value`=카드 식별값. `draggable`=드래그 이동 허용, `selectable`=Shift+클릭 다중선택 허용(`board.selectedValues` 에 토글). 콘텐츠가 카드 본문. 드래그 중 드롭 위치 표시를 내장.
+
+```html
+<sd-kanban [value]="item" [draggable]="true" [selectable]="true">
+  <div>{{ item.title }}</div>
+</sd-kanban>
+```
+
+## 드래그/드롭 타입
+
+```ts
+SdKanbanDragRef<_L, T> { value(): T | undefined; heightOnDrag(): number }
+SdKanbanDropTarget<L, T> { targetLaneValue(): L | undefined; targetKanbanValue?(): T | undefined }
+```
+
+- `SdKanbanDragRef` — 드래그 중인 카드 참조(보드가 추적). `SdKanbanDropTarget` — 드롭 대상(레인 또는 카드가 구현). 둘 다 컴포넌트가 내부 구현하는 계약으로, 직접 다룰 일은 드묾.

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

@@ -1,53 +1,77 @@
 # @simplysm/angular — 레이아웃(사이드바·탑바)
 
-앱 셸의 좌측 사이드바·상단바와 그 안의 메뉴/사용자 메뉴 컴포넌트 군. 앱 루트 레이아웃(`app.root` 등)에서 한 번 구성. 메뉴 항목 타입(`SdMenu`)·라우터 링크는 routing-appstructure.md 의 것을 사용.
+앱 셸의 좌측 사이드바·상단바와 그 안의 메뉴/사용자 메뉴 컴포넌트 군. 앱 루트 레이아웃(`app.root` 등)에서 한 번 구성. 메뉴 항목 타입(`SdMenu`)·라우터 링크는 [routing-appstructure.md](./routing-appstructure.md) 의 것을 사용.
 
 ## 사이드바
 
-### SdSidebarContainer — `sd-sidebar-container`
-사이드바 + 본문을 감싸는 컨테이너. 토글 시 본문 패딩을 조정하고 모바일에서 backdrop 표시. 라우팅 시작 시 자동 닫힘. 입력 없음(내부 `toggle` 상태 보유).
+### SdSidebarContainer — `<sd-sidebar-container>`
 
-### SdSidebar — `sd-sidebar`
-실제 사이드바 패널. 부모 컨테이너의 `toggle` 을 따라 슬라이드. 입력 없음. 자식으로 메뉴/유저 메뉴 배치.
+```ts
+toggle: WritableSignal<boolean>;
+```
+
+- 사이드바 + 본문을 감싸는 컨테이너. `toggle` 로 사이드바 접힘 제어(데스크탑은 본문 패딩 토글, 모바일은 backdrop). 네비게이션 시작 시 자동 닫힘. 자식 컴포넌트가 `inject` 해 접근.
+
+### SdSidebar — `<sd-sidebar>`
 
-### SdSidebarMenu — `sd-sidebar-menu`
-메뉴 트리를 리스트로 렌더.
-- `menus: input<SdMenu[]>` — 표시할 메뉴 트리(보통 `appStructure.usableMenus()`).
-- `layout: "accordion"|"flat"` — 펼침 방식. 미지정 시 루트 메뉴 3개 이하면 `"flat"`, 초과면 `"accordion"` 자동.
-- `getMenuIsSelectedFn: (menu) => boolean` — 선택 판정 커스텀(미지정 시 현재 페이지 코드 일치).
+```ts
+toggle = computed(...); // 부모 컨테이너의 toggle 미러
+```
+
+- 좌측 고정 사이드바 영역. `SdSidebarContainer` 안에 두면 toggle 상태에 따라 슬라이드. 콘텐츠로 로고·메뉴·사용자를 투영.
 
-### SdSidebarUser — `sd-sidebar-user`
-사이드바 상단 사용자 영역(이름 + 펼침 메뉴).
-- `userMenu: input<SdSidebarUserMenu>` — `{ icon?, title, menus: { title, onClick }[] }`. `title` 이 사용자명, `menus` 가 펼침 항목(로그아웃 등).
+### SdSidebarMenu — `<sd-sidebar-menu>`
 
-```html
-<sd-sidebar-container>
-  <sd-sidebar>
-    <sd-sidebar-user [userMenu]="{ title: userName(), menus: [{ title: '로그아웃', onClick: logout }] }" />
-    <sd-sidebar-menu [menus]="menus()" />
-  </sd-sidebar>
-  <router-outlet />
-</sd-sidebar-container>
+```ts
+menus = input<SdMenu[]>([]);
+layout = input<"accordion" | "accordion-expanded" | "flat">();
+getMenuIsSelectedFn = input<(menu: SdMenu) => boolean>();
 ```
 
+- 메뉴 트리를 사이드바 리스트로 렌더(`SdRouterLink` 연결). `layout` 미지정 시 루트 메뉴 3개 이하면 `flat`, 초과면 `accordion` 자동. `accordion-expanded`=accordion 과 동일한 클릭 토글 구조이되 모든 깊이 항목이 펼친 채로 시작(이후 클릭하면 접힘), 명시 지정 시에만 적용(자동 선택 대상 아님). `getMenuIsSelectedFn`=선택 강조 커스텀(기본은 현재 페이지 코드 매칭). `menus` 는 보통 `SdAppStructureProvider.usableMenus()`.
+
+### SdSidebarUser — `<sd-sidebar-user>`
+
+```ts
+userMenu = input<SdSidebarUserMenu>();
+// SdSidebarUserMenu = { icon?: string; title: string; menus: { title: string; onClick: () => Promise<void>|void }[] }
+```
+
+- 사이드바 하단 사용자 영역. 콘텐츠로 사용자 정보를 투영하고, `userMenu` 지정 시 접이식 메뉴(로그아웃 등) 표시. 각 menu 의 `onClick` 으로 동작.
+
 ## 탑바
 
-### SdTopbarContainer — `sd-topbar-container`
-탑바 + 본문 세로 컨테이너. 입력 없음. (`sd-base-container` 가 page 모드에서 내부적으로 사용.)
+### SdTopbarContainer — `<sd-topbar-container>`
 
-### SdTopbar — `sd-topbar`
-상단바. 사이드바 토글 버튼 + 타이틀/명령 슬롯.
-- `sidebarContainer: input<SdSidebarContainer>` — 토글 대상 사이드바 컨테이너(미지정 시 inject 로 상위 컨테이너 사용). 둘 중 하나라도 있으면 토글 버튼 노출.
+```ts
+// 입력 없음. flex-column 셸.
+```
 
-### SdTopbarMenu — `sd-topbar-menu`
-상단 가로 메뉴.
-- `menus: input<SdMenu[]>` — 메뉴 항목.
-- `getMenuIsSelectedFn: (menu) => boolean` — 선택 판정 커스텀.
+- 탑바 + 본문 세로 셸. 상단 `<sd-topbar>` + `flex-fill` 본문 구조로 사용(`sd-base-container` 가 page 모드에서 내부 사용).
 
-### SdTopbarUser — `sd-topbar-user`
-상단 우측 사용자 드롭다운.
-- `menus: input.required<SdTopbarUserMenu[]>` — `{ title, onClick }[]`. 클릭 시 `onClick` 실행 후 드롭다운 닫힘.
+### SdTopbar — `<sd-topbar>`
+
+```ts
+sidebarContainer = input<SdSidebarContainer>();
+hasSidebar = computed(...);
+```
+
+- 상단바. 사이드바가 있으면(주입 또는 `sidebarContainer` 입력) 좌측 토글 버튼 자동 노출. 콘텐츠로 제목·액션을 투영.
+
+### SdTopbarMenu — `<sd-topbar-menu>`
+
+```ts
+menus = input<SdMenu[]>([]);
+getMenuIsSelectedFn = input<(menu: SdMenu) => boolean>();
+```
+
+- 탑바에 드롭다운 형태로 메뉴 트리를 렌더. 루트 메뉴마다 드롭다운, 하위는 평면 리스트. 선택 강조는 사이드바 메뉴와 동일 규약.
+
+### SdTopbarUser — `<sd-topbar-user>`
+
+```ts
+menus = input.required<SdTopbarUserMenu[]>();
+// SdTopbarUserMenu = { title: string; onClick: () => void }
+```
 
-### 타입
-- `SdSidebarUserMenu` — `{ icon?: string; title: string; menus: { title: string; onClick: () => Promise<void>|void }[] }`.
-- `SdTopbarUserMenu` — `{ title: string; onClick: () => void }`.
+- 탑바 우측 사용자 드롭다운. 콘텐츠로 사용자 표시명을 투영, `menus` 항목 클릭 시 `onClick` 실행 후 드롭다운 닫힘.