@simplysm/sd-claude 14.0.76 → 14.0.77

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

@@ -1,36 +1,80 @@
 # @simplysm/angular — kanban
 
-드래그·드롭 칸반 보드.
+드래그·드롭 칸반 보드. lane 간 카드 이동·다중 선택.
+
+## SdKanbanBoard — `<sd-kanban-board>`
+
+```ts
+class SdKanbanBoard<L, T>
+selectedValues = model<T[]>([]);                 // 선택된 카드 value 목록
+drop = output<SdKanbanBoardDropInfo<L, T>>();
+
+interface SdKanbanBoardDropInfo<L, T> {
+  sourceKanbanValue?: T;
+  targetLaneValue?: L;
+  targetKanbanValue?: T;     // 특정 카드 위에 떨어뜨렸을 때
+}
+```
+
+- 자식으로 `<sd-kanban-lane>` 들. 카드를 lane 또는 다른 카드 위로 드롭하면 `drop` 발화. 호출자는 데이터 reorder 책임.
+- `selectedValues` — `<sd-kanban selectable>` 의 클릭 시 선택 토글.
 
 ```html
-<sd-kanban-board [(selectedValues)]="selected" (drop)="onDrop($event)">
-  <sd-kanban-lane [value]="laneA" [busy]="loading">
-    <ng-template #titleTpl>레인 A</ng-template>
-    <sd-kanban [value]="card" [draggable]="true" [selectable]="true">{{ card.title }}</sd-kanban>
-  </sd-kanban-lane>
+<sd-kanban-board (drop)="onDrop($event)">
+  @for (lane of lanes; track lane.id) {
+    <sd-kanban-lane [value]="lane">
+      <div sd-kanban-lane-title>{{ lane.title }}</div>
+      @for (card of lane.cards; track card.id) {
+        <sd-kanban [value]="card" draggable>{{ card.title }}</sd-kanban>
+      }
+    </sd-kanban-lane>
+  }
 </sd-kanban-board>
 ```
 
-## `<sd-kanban-board<L, T>>`
-
-- `selectedValues = model<T[]>([])`.
-- `drop = output<SdKanbanBoardDropInfo<L, T>>` (`{ sourceKanbanValue?, targetLaneValue?, targetKanbanValue? }`).
-- `dragKanban = signal<SdKanbanDragRef | undefined>` — 자식이 드래그 시작 시 설정. document `dragend` 시 자동 해제.
+## SdKanbanLane — `<sd-kanban-lane>`
 
-## `<sd-kanban-lane<L, T>>`
+```ts
+class SdKanbanLane<L, T>
+value = input<L>();                              // lane 식별 데이터
+busy = input(false);                             // lane 영역에 SdBusyContainer 효과
+useCollapse = input(false);                      // 접기 버튼 노출
+collapse = model(false);                         // 접힌 상태
+```
 
-`value: L`, `busy`, `useCollapse`, `collapse` (model, default `false`). drop target 구현. `useCollapse=true` 면 토글 아이콘 노출. 자식 `kanbanControls.filter(selectable)` 가 있으면 전체선택 체크박스 노출.
+- `value` 는 `drop.targetLaneValue` 로 사용.
+- `useCollapse=true` + `collapse(true)` 면 컨텐츠 숨김(헤더만).
 
-content templates: `<ng-template #titleTpl>` (헤더 영역), `<ng-template #toolTpl>` (전체선택 우측 도구 영역).
+## SdKanban — `<sd-kanban>`
 
-## `<sd-kanban<L, T>>`
+```ts
+class SdKanban<L, T> implements SdKanbanDragRef<L, T>, SdKanbanDropTarget<L, T>
+value = input<T>();
+selectable = input(false);
+draggable = input(false);
+contentClass = input<string>();
+```
 
-`value: T`, `draggable`, `selectable`, `contentClass`. drag ref + drop target 둘 다 구현(카드 위에 드롭 가능). Shift+클릭 시 `selectable=true` 인 경우 `selectedValues` 토글.
+- `draggable=true` 면 드래그 핸들 활성. `selectable=true` 면 클릭 시 `SdKanbanBoard.selectedValues` 토글.
+- `value` 는 `drop.sourceKanbanValue`/`targetKanbanValue` 로 사용.
+- `<ng-content>` 가 카드 본문.
 
 ## 타입
 
-```typescript
-interface SdKanbanBoardDropInfo<L, T> { sourceKanbanValue?: T; targetLaneValue?: L; targetKanbanValue?: T }
-interface SdKanbanDragRef<_L, T>      { value(): T | undefined; heightOnDrag(): number }
-interface SdKanbanDropTarget<L, T>    { targetLaneValue(): L | undefined; targetKanbanValue?(): T | undefined }
+```ts
+interface SdKanbanDragRef<_L, T> {
+  value(): T|undefined;
+  heightOnDrag(): number;
+}
+interface SdKanbanDropTarget<L, T> {
+  targetLaneValue(): L|undefined;
+  targetKanbanValue?(): T|undefined;
+}
 ```
+
+- 보드 내부에서 드래그 소스/드롭 타겟 구분에 사용. 컴포넌트 클래스가 직접 구현. 외부에서 직접 구현할 일은 거의 없음.
+
+## 주의
+
+- 드롭 후 데이터 반영은 호출자가 해야 함. `drop` 이벤트만으로 자동 재정렬되지 않음.
+- 같은 카드를 자기 자신에 드롭하면 `sourceKanbanValue === targetKanbanValue`. 호출자가 무시 처리.

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

@@ -1,47 +1,92 @@
 # @simplysm/angular — layout
 
-## 사이드바
+앱 셸 레이아웃. 사이드바·탑바 컨테이너와 메뉴 위젯.
 
-```html
-<sd-sidebar-container>
-  <sd-sidebar>
-    <sd-sidebar-user [userMenu]="userMenu">유저영역 컨텐츠</sd-sidebar-user>
-    <sd-sidebar-menu [menus]="menus" [layout]="'accordion'" [getMenuIsSelectedFn]="isSel" />
-  </sd-sidebar>
-  <ng-content />
-</sd-sidebar-container>
+## SdSidebarContainer — `<sd-sidebar-container>`
+
+```ts
+toggle: WritableSignal<boolean>;     // 사이드바 표시 여부
+```
+
+- 사이드바 + 메인 영역 컨테이너. `Router` 네비게이션 시작 시 `toggle` 자동 false(모바일에서 메뉴 자동 닫힘).
+- 자식: `<sd-sidebar>` + 본문 컨텐츠.
+
+## SdSidebar — `<sd-sidebar>`
+
+```ts
+toggle = computed(() => parent.toggle());
+```
+
+- 사이드바 패널. 부모 `SdSidebarContainer.toggle` 에 연동되어 슬라이드 표시.
+- `<ng-content>` 가 사이드바 내부 컨텐츠(보통 `<sd-sidebar-user>` + `<sd-sidebar-menu>`).
+
+## SdSidebarMenu — `<sd-sidebar-menu>`
+
+```ts
+menus = input<SdMenu[]>([]);
+layout = input<"accordion"|"flat">();
+getMenuIsSelectedFn = input<(menu: SdMenu) => boolean>();
 ```
 
-- `SdSidebarContainer`: `toggle = signal(false)`. 데스크탑은 토글 시 본문 left padding 제거, 모바일(`max-width:520px`)에서는 사이드바가 슬라이드. Router `NavigationStart` 이벤트에 자동 false (페이지 이동 시 자동 닫힘).
-- `SdSidebar`: 부모 container의 toggle 추종. content projection.
-- `SdSidebarMenu`: `menus: SdMenu[]`, `layout: "accordion"|"flat"` (미지정 시 `menus.length <= 3` 이면 `"flat"`, 아니면 `"accordion"` 자동), `getMenuIsSelectedFn?: (menu) => boolean`. 자식 메뉴는 항상 `"accordion"`. `menu.url != null` 이면 클릭 시 새창 open.
-- `SdSidebarUser`: `userMenu?: SdSidebarUserMenu` + 상단 영역 content projection. userMenu.title 클릭 시 메뉴 항목 펼침/접기.
+- `menus` — 보통 `sdAppStructure.usableMenus()` 결과.
+- `layout` — `accordion`: 그룹 메뉴 펼침/접힘, `flat`: 상시 전개. 미지정 시 메뉴 ≤3 → `flat`, 초과 → `accordion`.
+- `getMenuIsSelectedFn` — 현재 선택 메뉴 판정 커스텀. 미지정 시 `fullPageCode === menu.codeChain.join(".")`.
+
+## SdSidebarUser — `<sd-sidebar-user>`
+
+```ts
+userMenu = input<SdSidebarUserMenu>();
 
-```typescript
 interface SdSidebarUserMenu {
   title: string;
   menus: { title: string; onClick: () => void }[];
 }
 ```
 
-## 탑바
+- 사이드바 상단 사용자 정보 + 드롭다운 메뉴(로그아웃 등). `<ng-content>` 가 사용자 표시 영역(아바타·이름).
 
-```html
-<sd-topbar-container>
-  <sd-topbar>
-    <h4>{{ title }}</h4>
-    <sd-topbar-menu [menus]="menus" />
-    <sd-topbar-user [menus]="userMenus">유저표시</sd-topbar-user>
-  </sd-topbar>
-  <ng-content />
-</sd-topbar-container>
+## SdTopbarContainer — `<sd-topbar-container>`
+
+- 탑바 + 본문 컨테이너. inputs 없음. 자식: `<sd-topbar>` + 본문.
+
+## SdTopbar — `<sd-topbar>`
+
+```ts
+sidebarContainer = input<SdSidebarContainer>();
 ```
 
-- `SdTopbarContainer`: flex-column 100% 컨테이너.
-- `SdTopbar`: `sidebarContainer?: SdSidebarContainer` 입력(미지정 시 inject 시도). 사이드바 있으면 햄버거 버튼 노출 → 클릭 시 `sc.toggle` 토글.
-- `SdTopbarMenu`: `menus: SdMenu[]`, `getMenuIsSelectedFn?`. 각 최상위 menu는 dropdown 으로 노출. leaf 클릭 후 dropdown 자동 닫힘.
-- `SdTopbarUser`: `menus: SdTopbarUserMenu[]` (required, `{ title, onClick }[]`) + 트리거 영역 content projection. dropdown 으로 menus 표시, 클릭 후 자동 close.
+- 상단 바. 햄버거 버튼 클릭 시 사이드바 토글. `sidebarContainer` 명시 안 하면 ancestor inject 자동 탐색.
+
+## SdTopbarMenu — `<sd-topbar-menu>`
+
+```ts
+menus = input<SdMenu[]>([]);
+getMenuIsSelectedFn = input<(menu: SdMenu) => boolean>();
+```
 
-## 메뉴 데이터
+- 탑바 가로 메뉴. 그룹 메뉴는 드롭다운 자동.
+
+## SdTopbarUser — `<sd-topbar-user>`
+
+```ts
+menus = input.required<SdTopbarUserMenu[]>();
+
+interface SdTopbarUserMenu { title: string; onClick: () => void }
+```
 
-`SdMenu` (`./app-structure.md` 참조)을 그대로 입력. 선택 상태는 `getIsMenuSelected(menu, fullPageCode, customFn?)` 또는 `getMenuIsSelectedFn` 으로. leaf 메뉴는 `getMenuRouterLinkOption(menu)` 으로 `[sdRouterLink]` 옵션 자동 생성.
+- 탑바 우측 사용자 드롭다운(아바타 → 메뉴). `<ng-content>` 가 트리거 표시 영역.
+
+## 사용 예
+
+```html
+<sd-sidebar-container>
+  <sd-sidebar>
+    <sd-sidebar-user [userMenu]="userMenu()">{{ user().name }}</sd-sidebar-user>
+    <sd-sidebar-menu [menus]="appStructure.usableMenus()" />
+  </sd-sidebar>
+  <sd-topbar-container>
+    <sd-topbar><h1>{{ viewTitle() }}</h1><sd-topbar-user [menus]="topbarMenus()" /></sd-topbar>
+    <router-outlet />
+  </sd-topbar-container>
+</sd-sidebar-container>
+```

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

@@ -1,63 +1,115 @@
 # @simplysm/angular — modal
 
-선언형 `<sd-modal>` 과 프로그래밍 방식 `SdModalProvider` 둘 다 지원.
-
-## 프로그래밍 방식
-
-```typescript
-const result = await inject(SdModalProvider).showAsync(
-  {
-    title: "주문 선택",
-    type: OrderSelectModal,            // SdModalContentDef<TOutput> 구현
-    inputs: { mode: "single" },        // DirectiveInputSignals<T> (close/initialized 등 제외)
-  },
-  { fill: true, resizable: true, key: "order-select" },
-);
-```
+`SdModalProvider.showAsync` 로 프로그래밍 호출, 또는 `<sd-modal>` 컴포넌트 직접 배치.
 
-- `showAsync<T>(info, options?)` → `Promise<TOutput | undefined>`. `close.emit(value)` 시 resolve.
-- `SdModalProvider.modalCount = signal(0)` (열린 모달 수).
-- `key`를 주면 `SdSystemConfigProvider` 통해 width/height/위치 영속화.
-- `noFirstControlFocusing: true`면 첫 tabbable 요소가 아닌 dialog 자체 포커스.
+## SdModalProvider (root)
 
-### 모달 컨텐츠 컴포넌트 인터페이스
+```ts
+modalCount: WritableSignal<number>;
+showAsync<T extends SdModalContentDef<any>>(modal: SdModalInfo<T>, options?: SdModalOptions): Promise<O|undefined>;
 
-```typescript
 interface SdModalContentDef<O> {
   initialized: Signal<boolean>;
-  close: OutputEmitterRef<O | undefined>;
+  close: OutputEmitterRef<O|undefined>;
   actionTplRef?: TemplateRef<any>;
-  readonly _optionalModalInputs?: string;   // 키 union → 해당 input들이 optional 처리
+  readonly _optionalModalInputs?: string;  // type-level marker, optional inputs 이름 union
+}
+
+interface SdModalInfo<T, X = ""> {
+  title: string;
+  type: Type<T>;
+  inputs: ...;   // T 의 InputSignal prop 들 (close/initialized 등 제외, _optionalModalInputs 마킹 prop 은 optional)
 }
+
+interface SdModalOptions {
+  key?: string; hideHeader?: boolean; hideCloseButton?: boolean;
+  headerStyle?: string;
+  useCloseByBackdrop?: boolean; useCloseByEscapeKey?: boolean;
+  float?: boolean; fill?: boolean;
+  resizable?: boolean; movable?: boolean;
+  position?: "bottom-right"|"top-right";
+  minHeightPx?: number; minWidthPx?: number;
+  heightPx?: number; widthPx?: number;
+  noFirstControlFocusing?: boolean;
+}
+```
+
+- `showAsync` — 컴포넌트 동적 생성·body 부착·열림 애니메이션·포커스 캡처. 컨텐츠 컴포넌트가 `close.emit(result)` 또는 배경/ESC/닫기버튼으로 `closeRequest` 발화하면 close 진행, Promise 가 result 로 resolve(취소는 undefined).
+- `modalCount` — 동시 열린 모달 수. 키보드 이벤트 핸들러 등에서 활용.
+- `SdModalContentDef.initialized` — 모달 컴포넌트가 자기 준비 끝났을 때 `true` 로 set. `SdPrintProvider` 등은 이걸 기다림(`SdModalProvider` 는 직접 사용 안 함).
+- `SdModalContentDef.actionTplRef` — 모달 헤더 우측 추가 액션 영역에 띄울 `TemplateRef`. set 하면 자동으로 `<sd-modal>` 의 `actionTplRef` 로 브릿지.
+- `_optionalModalInputs` — `SdModalInfo.inputs` 의 일부 prop 을 optional 로 만들 때 사용하는 type-level 마커(`= "fieldA" | "fieldB"`). 런타임 값 없음.
+- `SdModalOptions` 필드별:
+  - `key` — 지정 시 `SdSystemConfigProvider` 키 `sd-modal.<key>` 로 width/height/left/top 자동 저장·복원.
+  - `hideHeader`/`hideCloseButton` — 헤더 영역 전체/닫기 버튼만 숨김.
+  - `headerStyle` — 헤더 인라인 style 문자열.
+  - `useCloseByBackdrop`/`useCloseByEscapeKey` — 기본 true. false 면 배경 클릭/ESC 무시.
+  - `float` — true 면 배경 어둡지 않고 그림자만(비차단 플로팅).
+  - `fill` — true 면 전체 화면. 헤더 투명·테두리 없음.
+  - `resizable` — true 면 8방향 리사이즈 핸들.
+  - `movable` — true 면 헤더 드래그로 이동.
+  - `position` — `bottom-right`/`top-right` 절대 배치. 미지정 = 상단 가운데.
+  - `minWidthPx`/`minHeightPx`/`widthPx`/`heightPx` — 사이즈 제약·고정.
+  - `noFirstControlFocusing` — true 면 첫 탭가능 요소가 아니라 dialog 박스 자체에 포커스.
+
+```ts
+const result = await sdModal.showAsync({ title: "직원선택", type: EmpSelectModal, inputs: {} }, { resizable: true, key: "emp-select" });
 ```
 
-`SdModalInfo<T, X>`: `X`는 inputs에서 제외할 추가 키 union (예: `SdSelectModalInfo`가 `selectMode|selectedKeys` 제외).
+## SdModal — `<sd-modal>`
+
+`SdModalProvider` 가 내부에서 사용. 직접 템플릿에 두려면:
+
+```ts
+open = model(false); key = input<string|undefined>();
+title = input(""); hideHeader = input(false); hideCloseButton = input(false);
+headerStyle = input<string|undefined>();
+useCloseByBackdrop = input(true); useCloseByEscapeKey = input(true);
+float = input(false); fill = input(false);
+resizable = input(false); movable = input(false);
+position = input<"bottom-right"|"top-right"|undefined>();
+minHeightPx/minWidthPx/heightPx/widthPx = input<number|undefined>();
+actionTplRef = input<TemplateRef<any>|undefined>();
+closeRequest = output<void>();
+```
 
-### `SdModalOptions`
+- 의미는 위 `SdModalOptions` 와 1:1. `closeRequest` 발화 시 부모가 `open.set(false)` 책임.
 
-`key`, `hideHeader`, `hideCloseButton`, `headerStyle`, `useCloseByBackdrop`, `useCloseByEscapeKey`, `float`, `fill`, `resizable`, `movable`, `position: "bottom-right"|"top-right"`, `minHeightPx`, `minWidthPx`, `heightPx`, `widthPx`, `noFirstControlFocusing`.
+## SdActivatedModalProvider (inject inside modal content)
 
-## 선언형 `<sd-modal>`
+```ts
+modalComponent: WritableSignal<SdModal|undefined>;
+contentComponent: WritableSignal<T|undefined>;
+canDeactivateFn: () => boolean;  // 닫기 차단 시 false 반환
+```
 
-`open` model, `title`/`key`/`hideHeader`/`hideCloseButton`/`headerStyle`/`useCloseByBackdrop`/`useCloseByEscapeKey`/`float`/`fill`/`resizable`/`movable`/`position`/`minHeightPx`/`minWidthPx`/`heightPx`/`widthPx`/`actionTplRef` input. `closeRequest` output (배경 클릭/ESC/닫기 버튼).
+- 컨텐츠 컴포넌트 내부에서 `inject(SdActivatedModalProvider)` 로 자기 모달 참조 가져오기. `canDeactivateFn` 을 함수로 덮어쓰면 ESC/배경/닫기버튼이 false 시 닫힘 차단(저장 안된 변경 사항 보호 패턴).
+- `setupCanDeactivate(fn)` 헬퍼가 이걸 set 함 ([routing.md](./routing.md)).
 
-## 내부에서 모달 정보 사용
+## SdPromptModal / SdConfirmModal (사전 정의 컨텐츠)
 
-```typescript
-const am = inject(SdActivatedModalProvider, { optional: true });
-am?.modalComponent();    // signal<SdModal> (title() 등)
-am?.contentComponent();  // signal<T> 컨텐츠 인스턴스
-am.canDeactivateFn = () => isClean();   // 닫기 차단 (false 반환 시)
+```ts
+class SdPromptModal implements SdModalContentDef<string> { message = input.required<string>(); }
+class SdConfirmModal implements SdModalContentDef<boolean> { message = input.required<string>(); }
 ```
 
-## 내장 컨텐츠 컴포넌트
+- 확인 시 prompt 는 입력값, confirm 은 `true` emit. 취소는 둘 다 `undefined`.
+
+```ts
+const input = await sdModal.showAsync({ title: "입력", type: SdPromptModal, inputs: { message: "이름?" } });
+const ok = await sdModal.showAsync({ title: "확인", type: SdConfirmModal, inputs: { message: "삭제할까요?" } });
+```
+
+## SelectModalOutputResult<TKey>
+
+```ts
+interface SelectModalOutputResult<TKey = any> { selectedKeys: TKey[]; }
+```
 
-- `SdPromptModal` (`SdModalContentDef<string>`): `message` input. Enter/확인 → `close.emit(value)` (빈 값이면 emit X), 취소 → `undefined`.
-- `SdConfirmModal` (`SdModalContentDef<boolean>`): `message` input. 확인 → `true`, 취소 → `undefined`.
-- `SdAddressSearchModal` (`SdModalContentDef<Address>`): Daum Postcode 스크립트 자동 로드. `Address = { postNumber, address, buildingName }`.
+- `SdModalSelectButton`/`SdSharedDataSelect*` 가 선택 모달을 호출할 때 모달이 emit 할 표준 출력 형태.
 
 ## 주의
 
-- `SdModalContentDef` 의 `initialized` signal 은 컨텐츠 준비 후 `true` 로 (인쇄/모달 등이 대기).
-- 모달은 body에 직접 attach (z-index 자동 할당, 최상위로 끌어올림). focus trap 적용.
-- 닫힘 애니메이션 transition duration 대기 후 destroy.
+- 컨텐츠 컴포넌트가 `close.emit(value)` 를 호출해야 Promise 가 resolve. 닫기 버튼/ESC/배경 클릭은 `closeRequest` → `undefined` resolve.
+- 컨텐츠 안에 `<ng-template #actionTpl>...</ng-template>` 두고 컴포넌트 클래스에서 `actionTplRef = viewChild('actionTpl')` 한 뒤 set 하면 헤더 액션 영역 표시됨.
+- `resizable`/`movable`/`key` 조합 시 사용자 조정 사이즈·위치가 `sd-modal.<key>` 키로 `SdSystemConfigProvider` 에 저장됨.

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

@@ -1,46 +1,107 @@
 # @simplysm/angular — routing
 
-Angular Router 위에 페이지 코드(`a.b.c` 형식)·뷰 타입·새창 네비게이션을 얹는 헬퍼.
+Angular Router 위에 페이지 코드(`a.b.c` 점 표기)·뷰 타입·새창 네비게이션 헬퍼.
+
+## SdRouterLink — `[sdRouterLink]` (Directive)
+
+```ts
+option = input<{
+  link: string;
+  params?: Record<string, string>;
+  window?: { width?: number; height?: number };  // 새창 띄울 때 크기
+  outletName?: string;
+  queryParams?: Record<string, string>;
+} | undefined>(undefined, { alias: "sdRouterLink" });
+```
 
-## `SdRouterLink` 디렉티브
+- click 처리. `Alt+click` 무시(브라우저 기본 다운로드 거동 보존). 새창 모드(`SdNavigateWindowProvider.isWindow=true` 또는 `Ctrl/Shift+click`)면 `window.open` 으로 새창 띄움. 일반 모드면 `Router.navigate`.
+- `link` — 라우터 경로. `window` 옵션 지정 시 width/height (기본 800x800) 으로 새창.
+- `outletName` — 보조 outlet 라우팅용. 미지정 시 primary.
+- `params`/`queryParams` — 라우터 매트릭스 파라미터/쿼리 파라미터.
 
 ```html
-<a [sdRouterLink]="{ link: '/home/order/list', params: { id }, queryParams, outletName, window: { width: 800, height: 600 } }">go</a>
+<sd-anchor [sdRouterLink]="{ link: '/home/sales/invoice', params: { id: '1' } }">송장</sd-anchor>
+```
+
+## SdNavigateWindowProvider (root)
+
+```ts
+get isWindow: boolean;        // 현재 URL hash 의 ;window=true 여부
+open(navigate: string, params?: Record<string, string>, features?: string): void;
+```
+
+- 현재 창이 simplysm 새창 모드인지 판단(`location.hash` 의 `;window=true`).
+- `open` — 새창이거나 `features` 가 주어지면 `window.open(... features)`. 일반 모드면 `_blank` 탭. 부모창 close 시 자식들도 일괄 종료.
+
+## injectCurrentPageCodeSignal
+
+```ts
+function injectCurrentPageCodeSignal(): Signal<string> | undefined
 ```
 
-- 일반 클릭 → `router.navigate`. Ctrl/Shift 클릭 또는 현재가 새창 컨텍스트(`SdNavigateWindowProvider.isWindow`)일 때 → `SdNavigateWindowProvider.open` 으로 새 창. Alt+click 무시.
-- `outletName` 지정 시 named outlet 으로 navigate.
-- `window: { width, height }` 옵션은 isWindow 컨텍스트에서 새 창 features 로만 사용 (Ctrl/Shift 새창에는 미적용).
+- `ActivatedRoute.pathFromRoot.slice(2)` 의 url segments 를 `.` 으로 join. 라우터 컨텍스트 없으면 undefined.
+- 예: `/home/sales/invoice` → `"sales.invoice"`.
 
-## `SdNavigateWindowProvider`
+## injectFullPageCodeSignal
 
-```typescript
-const nav = inject(SdNavigateWindowProvider);
-nav.open("/home/order/list", { id }, "width=800,height=600");
-nav.isWindow; // 현재 컨텍스트가 팝업 윈도우인지
+```ts
+function injectFullPageCodeSignal(): Signal<string>
 ```
 
-URL hash 끝에 `;window=true` 가 있으면 `isWindow=true`. 부모 unload 시 자기가 연 창 자동 close.
+- `Router.events` 의 NavigationEnd → URL → segment 2개부터 `.` join. matrix/query 제거.
+- "전체 페이지 코드" 로 메뉴 선택 상태 판정에 사용.
+
+## injectViewTitleSignal
 
-## Page Code Signal
+```ts
+function injectViewTitleSignal(): Signal<string>
+```
+
+- 모달 안이면 `SdActivatedModalProvider.modalComponent().title()`.
+- 그 외엔 `SdAppStructureProvider.getTitleByFullCode(currentPageCode ?? fullPageCode)`.
+- 페이지/모달 상단에 표시할 제목.
 
-페이지 코드 = activated route URL segment 를 `.` 으로 join.
+## injectViewTypeSignal
 
-- `injectCurrentPageCodeSignal()`: 현재 라우트의 segment 신호 (`undefined` if no ActivatedRoute).
-- `injectFullPageCodeSignal()`: router.url 기반 풀 코드.
-- `injectViewTitleSignal()`: 모달이면 `modalComponent.title()`, 아니면 `SdAppStructureProvider.getTitleByFullCode`.
-- `injectViewTypeSignal(): Signal<SdViewType>`. `SdViewType = "page" | "modal" | "control"`. 모달 컨텍스트면 `"modal"`, page-level route component면 `"page"`, 그 외 `"control"`.
+```ts
+function injectViewTypeSignal(): Signal<SdViewType>;
+type SdViewType = "page" | "modal" | "control";
+```
 
-## `setupCanDeactivate(fn: () => boolean)`
+- `page`: 라우터 진입 페이지 컴포넌트, `modal`: 모달 컨텐츠, `control`: 그 외(다른 컴포넌트의 자식). 컴포넌트가 자기 컨텍스트별로 다르게 그릴 때.
 
-constructor 내 호출. 모달 컨텍스트면 `SdActivatedModalProvider.canDeactivateFn` 설정, 라우트 컨텍스트면 `route.routeConfig.canDeactivate` 에 push (destroy 시 제거).
+## setupCanDeactivate
 
-## 메뉴 유틸
+```ts
+function setupCanDeactivate(fn: () => boolean): void
+```
+
+- 모달 안: `SdActivatedModalProvider.canDeactivateFn = fn` 으로 ESC/배경/닫기 차단.
+- 라우터 페이지: route config 에 `CanDeactivate` 가드 추가(컴포넌트 파괴 시 자동 제거).
+- 저장 안된 변경 사항 보호용.
+
+```ts
+setupCanDeactivate(() => !isDirty() || confirm("변경 사항이 있습니다. 나가시겠습니까?"));
+```
+
+## getMenuRouterLinkOption
+
+```ts
+function getMenuRouterLinkOption(menu: SdMenu): { link: string; queryParams: Record<string, string>|undefined } | undefined
+```
+
+- leaf 메뉴(`children` 도 `url` 도 없음)만 결과 반환. 그룹/외부URL 메뉴는 undefined.
+- 반환 link 는 `/home/<codeChain join "/">`. 마지막 segment 에 `?key=val` 포함 시 분리해 queryParams 로.
+
+## getIsMenuSelected
+
+```ts
+function getIsMenuSelected(menu: SdMenu, fullPageCode: string|undefined, customFn?: (menu) => boolean): boolean
+```
 
-- `getMenuRouterLinkOption(menu: SdMenu)`: leaf 메뉴를 `SdRouterLink` 옵션(`{ link, queryParams }`)으로 변환. children/url 있으면 `undefined`.
-- `getIsMenuSelected(menu, fullPageCode, customFn?)`: 현재 페이지가 메뉴와 일치하는지.
+- 커스텀 함수 있으면 그것 사용. 없으면 `fullPageCode === menu.codeChain.join(".")`.
 
 ## 주의
 
-- 페이지 코드는 hash router 기준 `/home/<code>` 구조 가정.
-- `injectCurrentPageCodeSignal` 은 `pathFromRoot.slice(2)` 사용 — root + `home` 두 레벨 위 라우트 컴포넌트에서 의미 있음.
+- 페이지 코드는 `/home/` 다음의 segment 들 `.` join. 라우터를 이 컨벤션에 맞춰 설계해야 메뉴 선택 표시·뷰 타이틀 자동 동작.
+- `SdRouterLink` 의 `link` 는 라우터 절대경로 또는 상대경로. `link` 에 `?queryString` 직접 쓰지 말고 `queryParams` 객체로 분리.

package/claude/references/sd-simplysm14/apis/angular/selection-managers.md

@@ -1,51 +1,82 @@
 # @simplysm/angular — selection-managers
 
-`<sd-sheet>`/`<sd-select>` 등이 내부에서 쓰는 선택·확장·정렬 로직을 외부 컴포넌트에서도 재사용할 수 있도록 추출된 함수 훅들. signal 바인딩.
-
-## `useSelectionManager<TItem, TKey>(options)`
-
-```typescript
-const sm = useSelectionManager({
-  displayItems,                                // Signal<TItem[]>
-  selectedKeys,                                // WritableSignal<TKey[]>
-  selectMode,                                  // Signal<"single"|"multi"|undefined>
-  getItemSelectableFn,                         // Signal<((item) => boolean|string) | undefined>
-  trackByFn,                                   // Signal<(item, idx) => TKey>
-});
-sm.hasSelectable; sm.isAllSelected;
-sm.getSelectable(item);    // true | string(reason) | undefined
-sm.select(item); sm.deselect(item); sm.toggle(item); sm.toggleAll();
-sm.isSelected(item); sm.getCanChangeFn(item);   // () => boolean (체크박스 canChangeFn 으로 직결)
+리스트 컴포넌트 내부에서 쓰는 선택·확장·정렬 로직 함수 훅. signal 바인딩.
+
+## useSelectionManager
+
+```ts
+function useSelectionManager<TItem, TKey>(options: {
+  displayItems: Signal<TItem[]>;
+  selectedKeys: WritableSignal<TKey[]>;
+  selectMode: Signal<"single"|"multi"|undefined>;
+  getItemSelectableFn: Signal<((item: TItem) => boolean|string)|undefined>;
+  trackByFn: Signal<(item, index) => TKey>;
+}): {
+  hasSelectable: Signal<boolean>;
+  isAllSelected: Signal<boolean>;
+  getSelectable(item): true|string|undefined;
+  getCanChangeFn(item): () => boolean;
+  select(item): void;
+  deselect(item): void;
+  toggle(item): void;
+  toggleAll(): void;
+  isSelected(item): boolean;
+};
 ```
 
-- `single`이면 select 시 기존 키 대체. `multi` 면 추가.
-- 키 비교는 `obj.equal` (`@simplysm/core-common`).
-- `trackByFn` 반환이 `null`이면 선택 불가.
-- `hasSelectable`은 `selectMode != null` 여부 (선택 가능 모드인지). 선택 가능한 아이템 존재 여부는 `isAllSelected` 로직에서 자동 처리.
-
-## `useExpandingManager<T>(binding)`
-
-```typescript
-interface ExpandItemDef<T> { item; parentDef?; hasChildren; depth }
-const em = useExpandingManager({
-  items, expandedItems,
-  getChildrenFn,    // Signal<((item, idx) => T[] | undefined) | undefined>
-  sort,             // (items: T[]) => T[]
-});
-em.displayItems; em.hasExpandable; em.isAllExpanded;
-em.toggle(item); em.toggleAll(); em.isVisible(item); em.def(item);
+- `selectMode=single` 이면 `select` 가 기존 키 덮어씀, `multi` 면 추가.
+- `getItemSelectableFn` — true: 선택 가능, false: 불가, string: 불가 + 사유.
+- `getSelectable` 반환 → `true` (선택 가능), `string` (사유), `undefined` (해당 없음).
+- `isAllSelected` — selectable 항목 전체가 선택된 상태.
+- 키 비교는 `obj.equal` (deep equal).
+
+## useExpandingManager
+
+```ts
+function useExpandingManager<T>(binding: {
+  items: Signal<T[]>;
+  expandedItems: WritableSignal<T[]>;
+  getChildrenFn: Signal<((item: T, index: number) => T[]|undefined)|undefined>;
+  sort: (items: T[]) => T[];
+}): {
+  displayItems: Signal<T[]>;     // 트리 평탄화 + 정렬 적용
+  hasExpandable: Signal<boolean>;
+  isAllExpanded: Signal<boolean>;
+  toggle(item): void;
+  toggleAll(): void;
+  isVisible(item): boolean;       // 조상 모두 expanded 인지
+  def(item): ExpandItemDef<T>;
+};
+
+interface ExpandItemDef<T> {
+  item: T;
+  parentDef: ExpandItemDef<T>|undefined;
+  hasChildren: boolean;
+  depth: number;
+}
 ```
 
-부모가 collapsed면 자식은 `isVisible=false`.
+- `getChildrenFn` 으로 트리 워킹 → 깊이·부모 정보 포함한 def 배열 생성.
+- `sort` — 각 depth 별 자식들에 적용할 정렬 함수(보통 `useSortingManager.sort`).
+- `isVisible` — 항목이 화면에 보일 조건(모든 조상이 expanded).
+
+## useSortingManager
 
-## `useSortingManager(options)`
+```ts
+function useSortingManager(options: { sorts: WritableSignal<SortingDef[]> }): {
+  defMap: Signal<Map<string, { indexText?: string; desc: boolean }>>;
+  toggle(key: string, multiple: boolean): void;
+  sort<T>(items: T[]): T[];
+};
 
-```typescript
-interface SortingDef { key: string; desc: boolean }
-const sm = useSortingManager({ sorts });
-sm.defMap;     // Signal<Map<key, { indexText?, desc }>>
-sm.toggle(key, multiple);  // multiple=true면 multi-key sort, 아니면 단일
-sm.sort(items);            // null < non-null, string localeCompare
+interface SortingDef { key: string; desc: boolean; }
 ```
 
-`toggle` 토글 순서: 없음 → asc → desc → 제거.
+- 컬럼 클릭 시 `toggle(key, ctrlKey)`. 단일 정렬은 `asc → desc → 없음` 순환, 다중(`multiple=true`)은 같은 키 누적 + 마지막에 제거.
+- `defMap.indexText` — 다중 정렬일 때 컬럼 헤더에 표시할 순번 ("1", "2"…). 단일이면 undefined.
+- `sort` — `key` 별 prop 값 비교. string 은 localeCompare, number 는 산술, 그 외는 String 변환 localeCompare. null/undefined 는 최소값.
+
+## 주의
+
+- 세 훅 모두 컴포넌트의 inject 컨텍스트 없이 호출 가능(순수 함수). 단 signal 바인딩이므로 reactive 컨텍스트에서 사용.
+- `<sd-sheet>` 가 내부적으로 셋 다 사용. 새 리스트 컴포넌트 만들 때 같은 동작 원하면 재사용.