@simplysm/sd-claude 14.0.82 → 14.0.83

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

@@ -1,200 +0,0 @@
-# @simplysm/angular — forms
-
-폼 컨테이너 + 값 입력 컨트롤. 모든 입력 컨트롤은 `value` model 기반. native form validity API 활용.
-
-## SdForm — `<sd-form>`
-
-```ts
-formSubmit = output<SubmitEvent>();
-formInvalid = output();
-```
-
-- 내부에 native `<form>` 구성. 자식 `<sd-textfield required>` 등 native invalid 상태가 있으면 submit 막고 `formInvalid` 발화. 모두 valid 면 `formSubmit` 발화.
-
-```html
-<sd-form (formSubmit)="onSubmit()"><sd-textfield type="text" required [(value)]="name"/></sd-form>
-```
-
-## SdTextfield — `<sd-textfield>`
-
-```ts
-class SdTextfield<K extends keyof SdTextfieldTypes>
-value = model<SdTextfieldTypes[K]>();
-type = input.required<K>();
-placeholder = input<string>(); title = input<string>();
-inputStyle = input<string>(); inputClass = input<string>();
-disabled = input(false); readonly = input(false); required = input(false);
-min/max = input<SdTextfieldTypes[K]>(); minlength/maxlength = input<number>();
-pattern = input<string>();
-validatorFn = input<(value) => string|undefined>();
-format = input<string>(); step = input<number>(); autocomplete = input<string>();
-useNumberComma = input(true); minDigits = input<number>();
-inline = input(false); inset = input(false); size = input<"sm"|"lg">();
-theme = input<"primary"|"secondary"|"info"|"success"|"warning"|"danger"|"gray"|"blue-gray">();
-
-type SdTextfieldTypes = {
-  number: number; text: string; password: string; color: string; email: string;
-  format: string; date: DateOnly; month: DateOnly; year: DateOnly;
-  datetime: DateTime; "datetime-sec": DateTime; time: Time; "time-sec": Time;
-}
-const sdTextfieldTypes: (keyof SdTextfieldTypes)[]
-```
-
-- `type` — 위 13개 중 1개. 각 타입별 핸들러가 파싱/포맷/입력 제한 담당. `number` 는 콤마 표시, `date`/`month`/`year` 는 `DateOnly`, `datetime[-sec]` 는 `DateTime`, `time[-sec]` 는 `Time`, `format` 은 `format` 입력에 따른 자유 포맷.
-- `value` — 양방향. 타입에 맞는 객체/숫자/문자열.
-- `format` — `type=format` 또는 표시 포맷팅용. `XXX-XXXX` 같은 패턴(`X` 자리).
-- `validatorFn` — 반환 문자열이 있으면 invalid 메시지로 표시. undefined 면 통과.
-- `useNumberComma` — `type=number` 기본 true. 천 단위 콤마 표시.
-- `minDigits` — `type=number` 정수부 자릿수(부족 시 0 패딩).
-- `min`/`max`/`minlength`/`maxlength`/`pattern`/`required` — native 검증으로 위임.
-- `inline`/`inset`/`size`/`theme` — 레이아웃 옵션. `inset` 은 sd-sheet/모달 셀 안에 박힌 룩.
-- `readonly` — 편집 차단(포커스 가능). `disabled` — 포커스 불가.
-
-```html
-<sd-textfield type="number" [(value)]="qty" [min]="0" />
-<sd-textfield type="date" [(value)]="dueDate" required />
-```
-
-## SdTextarea — `<sd-textarea>`
-
-```ts
-value = model<string>();
-placeholder/title/inputStyle/inputClass = input<string>(); minRows = input<number>(1);
-disabled/readonly/required/inline/inset = input(false);
-size = input<"sm"|"lg">();
-validatorFn = input<(v) => string|undefined>();
-theme = input<...8 themes>();
-```
-
-- 멀티라인 입력. `minRows` 만큼 시작 높이 확보, 내용 늘면 자동 확장.
-
-## SdNumpad — `<sd-numpad>`
-
-```ts
-value = model<number>(); placeholder = input<string>();
-required = input(false); inputDisabled = input(false);
-useEnterButton = input(false); useMinusButton = input(false);
-enterButtonClick = output();
-```
-
-- 터치용 숫자 패드. `useEnterButton` true 면 엔터 키 노출, 클릭 시 `enterButtonClick` 발화. `useMinusButton` true 면 부호 토글 키 노출. `inputDisabled` true 면 상단 표시 영역의 직접 타이핑 차단(패드만 사용).
-
-## SdRange — `<sd-range>`
-
-```ts
-class SdRange<K extends keyof SdTextfieldTypes>
-type = input.required<K>(); from = model<SdTextfieldTypes[K]>(); to = model<SdTextfieldTypes[K]>();
-inputStyle = input<string>(); required = input(false); disabled = input(false);
-```
-
-- `SdTextfield` 2개를 `~` 로 묶은 범위 입력. `type` 은 `SdTextfield` 와 동일 키.
-
-## SdDateRangePicker — `<sd-date-range-picker>`
-
-```ts
-periodType = model<"일"|"월"|"범위">("범위");
-from = model<DateOnly>(); to = model<DateOnly>();
-required = input(false);
-```
-
-- `periodType` — `일`: 단일 날짜(`from`=`to`), `월`: 단일 월, `범위`: from/to 자유 범위. 사용자가 토글 가능.
-
-## SdSelect — `<sd-select>`
-
-```ts
-class SdSelect<M extends "single"|"multi", T>
-selectMode = input("single" as M);
-value = model<SelectModeValue<any>[M]>();      // single → T, multi → T[]
-placeholder = input<string>();
-disabled/inline/inset/required = input(false); size = input<"sm"|"lg">();
-hideSelectAll = input(false);
-multiSelectionDisplayDirection = input<"vertical">();
-items = input<T[]>(); trackByFn = input<(item, index) => unknown>((item) => item);
-getChildrenFn = input<(item: T) => T[]|undefined>();
-contentClass = input<string>(); contentStyle = input<string>();
-dropdownOpen = model(false);
-
-type SelectModeValue<T> = { multi: T[]; single: T };
-```
-
-- 드롭다운 셀렉트. `items` 를 직접 주거나, content projection 으로 `<sd-select-item>` 나열.
-- `selectMode` — `single`: 단일 선택, `multi`: 체크박스 다중 선택(`hideSelectAll` false 면 전체 선택 옵션 노출).
-- `getChildrenFn` — 트리형 선택지. 자식 있는 노드 펼침.
-- `multiSelectionDisplayDirection` — multi 모드에서 선택값 표시 방향. `vertical` 만.
-- `dropdownOpen` — 양방향. 외부에서 강제 열림 제어 가능.
-- `<ng-content>` — 표시 영역 커스텀 템플릿 또는 `<sd-select-item>` 리스트.
-
-## SdSelectItem — `<sd-select-item>`
-
-```ts
-class SdSelectItem<T> { value = input<T|undefined>(); disabled = input(false); hidden = input(false); }
-```
-
-- `SdSelect` 자식. content projection 으로 표시할 옵션. `hidden` true 면 필터링 결과 등으로 숨김.
-
-## SdSelectButton — `<sd-select-button>`
-
-- `SdSelect` 트리거 버튼 슬롯. inputs 없음. `<sd-select>` 내부에 표시 영역 커스터마이즈 시 content projection 으로 사용.
-
-## SdCheckbox — `<sd-checkbox>`
-
-```ts
-value = model(false);
-canChangeFn = input<(item: boolean) => boolean|Promise<boolean>>(() => true);
-icon = input(tablerCheck); radio = input(false);
-disabled = input(false); size = input<"sm"|"lg">();
-inline = input(false); inset = input(false);
-theme = input<...8 themes>(); contentStyle = input<string>();
-```
-
-- `radio` true 면 라디오 룩(원형). false 면 체크박스(사각).
-- `canChangeFn` — 변경 직전 호출, false 반환·Promise<false> 면 무시. 비동기 확인용.
-- `icon` — 체크 상태 아이콘. 기본 `tablerCheck`.
-
-## SdSwitch — `<sd-switch>`
-
-```ts
-value = model(false);
-canChangeFn = input<(item) => boolean|Promise<boolean>>(() => true);
-disabled = input(false); inline = input(false); inset = input(false);
-size = input<"sm"|"lg">(); theme = input<...8 themes>();
-```
-
-- 토글 스위치. `SdCheckbox` 와 의미 같지만 룩만 슬라이더.
-
-## SdCheckboxGroup — `<sd-checkbox-group>`
-
-```ts
-class SdCheckboxGroup<T> { value = model<T[]>([]); disabled = input(false); }
-```
-
-- 자식 `<sd-checkbox-group-item>` 들을 묶어 `value` 배열로 관리.
-
-## SdCheckboxGroupItem — `<sd-checkbox-group-item>`
-
-```ts
-class SdCheckboxGroupItem<T> { value = input.required<T>(); inline = input(false); }
-```
-
-- 그룹의 단일 옵션. `value` 가 그룹 배열에 있으면 체크 상태.
-
-## SdDropdown — `<sd-dropdown>`
-
-```ts
-open = model(false); disabled = input(false);
-```
-
-- 트리거 + 팝업 컨테이너. content projection 으로 트리거와 `<sd-dropdown-popup>` 을 함께 둠.
-
-## SdDropdownPopup — `<sd-dropdown-popup>`
-
-- `SdDropdown` 의 팝업 슬롯. inputs 없음. content projection 으로 내용 채움.
-
-```html
-<sd-dropdown [(open)]="open">트리거<sd-dropdown-popup>...팝업 내용...</sd-dropdown-popup></sd-dropdown>
-```
-
-## 주의
-
-- `value` model 인 컨트롤은 모두 `[(value)]="..."` 양방향.
-- 입력 컨트롤은 `<sd-form>` 안에 두면 invalid 시 native `:invalid` 처리됨. `SdInvalid` 디렉티브로 커스텀 invalid 표시 추가 가능 ([infrastructure.md](./infrastructure.md)).

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

@@ -1,231 +0,0 @@
-# @simplysm/angular — infrastructure
-
-앱 인프라 프로바이더·DOM 이벤트/효과 디렉티브·유틸 함수·타입 헬퍼. 전부 standalone, root 제공자거나 함수.
-
-## 설정·저장 프로바이더
-
-### SdSystemLogProvider (root)
-
-```ts
-writeFn?: (severity, ...data) => Promise<void>|void;
-writeAsync(severity: "error"|"warn"|"log", ...data): Promise<void>;
-```
-
-- consola 태그(`angular:system-log`)로 로컬 로그. `writeFn` 세팅 시 서버 등으로 추가 전송. 전송 실패는 로컬 error 만 남기고 throw 안 함.
-
-### SdLocalStorageProvider<T> (root)
-
-```ts
-set<K>(key: K, value: T[K]); get<K>(key: K): T[K]|undefined; remove(key: K);
-```
-
-- 키 prefix = `clientName` (`SdAngularConfigProvider`). JSON 직렬화. 파싱 실패 시 undefined.
-
-### SdSystemConfigProvider<T> (root)
-
-```ts
-fn?: { set<K>(key, data): Promise<void>|void; get(key): PromiseLike<any> };
-setAsync<K>(key, data): Promise<void>;
-getAsync(key): Promise<...>;
-```
-
-- `fn` 미세팅이면 `SdLocalStorageProvider` 위임. `fn` 세팅 시 서버 영구 저장으로 전환. 모달 사이즈·시트 컬럼 설정·프리셋이 이걸 통함.
-
-### injectSdSystemConfigResource<T>
-
-```ts
-function injectSdSystemConfigResource<T>(options: { key: Signal<string|undefined> }): {
-  value: Signal<T|undefined>; isLoading: Signal<boolean>;
-  status; hasValue(); reload();
-  set(value: T|undefined): void;
-  update(fn: (prev: T|undefined) => T|undefined): void;
-};
-```
-
-- 컴포넌트의 element tag + key signal 조합으로 `SdSystemConfigProvider` 값 resource 화. `set`/`update` 시 microtask 로 server 저장(에러는 `ErrorHandler.handleError`).
-
-## 서비스 클라이언트
-
-### SdServiceClientFactoryProvider (root)
-
-```ts
-connectAsync(key: string, options?: Partial<ServiceConnectionOptions>): Promise<void>;
-closeAsync(key: string): Promise<void>;
-get(key: string): ServiceClient;
-```
-
-- key 별 `ServiceClient` 풀. `connectAsync` 시 기본 host/port 는 현재 `location` 기준(https 면 443, http 면 80). request/response progress 시 자동으로 `SdToastProvider.info(..., true)` progress 토스트.
-- 중복 connect 또는 closed key 재사용은 throw. destroy 시 모든 클라이언트 close.
-
-## 파일·에러·테마
-
-### SdFileDialogProvider (root)
-
-```ts
-showAsync(multiple?: false, accept?: string): Promise<File|undefined>;
-showAsync(multiple: true, accept?: string): Promise<File[]|undefined>;
-```
-
-- `<input type="file">` 동적 생성 → click → 선택 후 결과. 취소 시 undefined.
-- `accept` — MIME/확장자(`"image/*"`·`".pdf,.docx"`).
-
-### SdGlobalErrorHandlerPlugin (Angular `ErrorHandler` 교체용)
-
-- `provideSdAngular` 가 자동 등록. 직접 등록 안 해도 됨.
-- `PromiseRejectionEvent`/`ErrorEvent`/`Error`/임의 값 분류해 `SdSystemLogProvider.writeAsync('error', ...)` + 전체 화면 에러 오버레이 표시 + Angular `ApplicationRef.destroy()`. 오버레이 클릭 → 홈으로 reload.
-
-### SdThemeProvider (root)
-
-```ts
-dark: WritableSignal<boolean>;
-readonly fontSizePresets: readonly number[];   // [12,14,16,20,24,28]
-fontSize: WritableSignal<number>;              // body html font-size px
-increaseFontSize(): void; decreaseFontSize(): void;
-```
-
-- `dark` 효과 → `<body class="sd-theme-dark">`. `fontSize` → `<html style="font-size:Npx">`.
-- `increase`/`decrease` — presets 의 인접 값으로만 이동.
-
-### SdThemeSelector — `<sd-theme-selector>`
-
-- inputs 없음. 팔레트(다크 토글) + 폰트 크기 ± 버튼 UI.
-
-## 유틸 함수
-
-### FormatPipe — `{{ value | format: pattern }}`
-
-- `value: string|DateTime|DateOnly|undefined`, `format: string` → 포맷팅된 string.
-- DateTime/DateOnly → `toFormatString(format)`.
-- 문자열 → `X` 자리에 1글자씩 매핑. `|` 로 여러 패턴 alt 가능(value 길이 일치하는 첫 패턴 선택). 매칭 실패 시 원본 반환.
-- 예: `"01012345678" | format: "XXX-XXXX-XXXX|XXX-XXX-XXXX"` → `"010-1234-5678"`.
-
-### mark
-
-```ts
-function mark(sig: WritableSignal<any>): void
-```
-
-- in-place mutation 후 signal 소비자에게 변경 알림. 배열은 shallow copy, 객체는 spread. mutable 데이터로 setter 호출 누락 방지용.
-
-### setSafeStyle
-
-```ts
-function setSafeStyle(renderer: Renderer2, el: HTMLElement, style: Partial<CSSStyleDeclaration>): void
-```
-
-- `Renderer2.setStyle` 을 객체 단위로 일괄 적용. SSR/zoneless 안전.
-
-### setupBgTheme
-
-```ts
-function setupBgTheme(options?: {
-  theme?: "primary"|"secondary"|"info"|"success"|"warning"|"danger"|"gray"|"blue-gray";
-  lightness?: "lightest"|"lighter";
-}): void
-```
-
-- 컴포넌트 진입 동안 `document.body --background-color` 를 테마 변수로 설정. destroy 시 원복.
-- `lightness` 기본 `lightest`.
-
-### setupModelHook
-
-```ts
-function setupModelHook<T>(model: WritableSignal<T>, canFn: Signal<(item: T) => boolean|Promise<boolean>>): void
-```
-
-- model 의 `set`/`update` 를 가로채 `canFn(value)` 결과가 true(또는 Promise<true>) 일 때만 적용. false 면 무시. Promise reject 는 `ErrorHandler`.
-- 체크박스/스위치 등의 `canChangeFn` 패턴 구현체.
-
-## 타입 헬퍼
-
-```ts
-type UndefToOptional<T>            // undefined 가능 prop 을 optional 로
-type DirectiveInputSignals<T>      // 컴포넌트의 InputSignal prop → 값 타입 객체
-type WithOptional<T, K extends keyof T>   // 일부 키를 optional 로
-```
-
-- `SdModalInfo.inputs` / `SdPrintInput.inputs` 등의 타입 빌딩에 사용.
-
-## DOM 이벤트 디렉티브
-
-### SdEvents — `<el (click.capture)="..." (scroll.passive)="..." ...>`
-
-- 이벤트 이름 끝에 `.capture`/`.passive`/`.once` 조합 가능한 다중 셀렉터 디렉티브. 표준 Angular 이벤트 바인딩으로는 옵션 못 주는 listener option 활성.
-- 지원 이벤트: click/mouse*/keydown/keyup/focus/blur/invalid/scroll/wheel/touch*/drag*/transitionend/animationend.
-
-### SdOptionEventPlugin
-
-- `provideSdAngular` 가 `EVENT_MANAGER_PLUGINS` 에 등록. `SdEvents` 가 의존. 직접 호출 X.
-
-### SdResizeDirective — `[sdResize]`
-
-```ts
-sdResize = output<SdResizeEvent>();
-interface SdResizeEvent { heightChanged: boolean; widthChanged: boolean; target: HTMLElement; contentRect: DOMRectReadOnly; }
-```
-
-- `ResizeObserver` + rAF 디바운스. 너비/높이 변경 플래그 포함.
-
-### SdIntersectionDirective — `[sdIntersection]`
-
-```ts
-sdIntersection = output<SdIntersectionEvent>();
-interface SdIntersectionEvent { entry: IntersectionObserverEntry; }
-```
-
-- `IntersectionObserver` 래퍼. 무한 스크롤 트리거 등.
-
-### SdCommandDirective — `[sdRefreshCommand]`/`[sdSaveCommand]`/`[sdInsertCommand]`
-
-- 전역 키 단축키 출력. `Ctrl+Alt+L` → refresh, `Ctrl+S` → save, `Insert` → insert. 최상위 열린 모달 또는 호스트가 활성 영역일 때만 발화(다른 모달 위면 무시).
-
-## 효과 디렉티브
-
-### SdRipple — `[sdRipple]` + setupRipple
-
-```ts
-enabled = input.required({ alias: "sdRipple", transform: booleanAttribute });
-```
-
-- 클릭 시 머티리얼풍 잉크 효과. `setupRipple(enableFn?)` 은 컴포넌트 안에서 inject 후 직접 호출하는 형태.
-
-### SdShowEffect — `[sdShowEffect]` + setupRevealOnShow
-
-```ts
-enabled = input.required({ alias: "sdShowEffect", transform: booleanAttribute });
-sdShowEffectType = input<"l2r"|"t2b">("t2b");
-```
-
-- 스크롤로 첫 표시 시 페이드인 + 슬라이드. `l2r`: 좌→우, `t2b`: 위→아래(기본).
-
-### SdInvalid — `[sdInvalid]` + setupInvalid
-
-```ts
-invalidMessage = input.required<string>({ alias: "sdInvalid" });
-```
-
-- 호스트 요소를 invalid 상태로 표시(빨간 점 인디케이터 + form submit 막기). 빈 문자열이면 valid. 직접 form 검증 메시지 표시할 때.
-
-## 템플릿 디렉티브
-
-### SdTypedTemplate — `<ng-template typed>`
-
-```ts
-class SdTypedTemplate<T> { typed = input.required<T>(); }
-```
-
-- 템플릿 컨텍스트 타입 명시용. `typed` 에 token 값/객체 바인딩.
-
-### SdItemOfTemplate — `<ng-template itemOf>`
-
-```ts
-class SdItemOfTemplate<TItem> { itemOf = input.required<TItem[]>(); }
-interface SdItemOfTemplateContext<TItem> { $implicit: TItem; item: TItem; index: number; depth: number; }
-```
-
-- 리스트 아이템 템플릿 컨텍스트 타입 추론. `let-item`, `let-index="index"`, `let-depth="depth"` 사용 가능. `SdCalendar` 등이 자식으로 요구.
-
-## 주의
-
-- `provideSdAngular` 호출만으로 `SdGlobalErrorHandlerPlugin`/`SdOptionEventPlugin`/`SdEvents` 가 모두 활성. 별도 추가 불필요.
-- `SdLocalStorageProvider`/`SdSystemConfigProvider` 의 키는 `clientName.<key>` 형태. 같은 도메인의 다른 simplysm 앱과 충돌 방지.

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

@@ -1,80 +0,0 @@
-# @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 (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>
-```
-
-## SdKanbanLane — `<sd-kanban-lane>`
-
-```ts
-class SdKanbanLane<L, T>
-value = input<L>();                              // lane 식별 데이터
-busy = input(false);                             // lane 영역에 SdBusyContainer 효과
-useCollapse = input(false);                      // 접기 버튼 노출
-collapse = model(false);                         // 접힌 상태
-```
-
-- `value` 는 `drop.targetLaneValue` 로 사용.
-- `useCollapse=true` + `collapse(true)` 면 컨텐츠 숨김(헤더만).
-
-## SdKanban — `<sd-kanban>`
-
-```ts
-class SdKanban<L, T> implements SdKanbanDragRef<L, T>, SdKanbanDropTarget<L, T>
-value = input<T>();
-selectable = input(false);
-draggable = input(false);
-contentClass = input<string>();
-```
-
-- `draggable=true` 면 드래그 핸들 활성. `selectable=true` 면 클릭 시 `SdKanbanBoard.selectedValues` 토글.
-- `value` 는 `drop.sourceKanbanValue`/`targetKanbanValue` 로 사용.
-- `<ng-content>` 가 카드 본문.
-
-## 타입
-
-```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,92 +0,0 @@
-# @simplysm/angular — layout
-
-앱 셸 레이아웃. 사이드바·탑바 컨테이너와 메뉴 위젯.
-
-## 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>();
-```
-
-- `menus` — 보통 `sdAppStructure.usableMenus()` 결과.
-- `layout` — `accordion`: 그룹 메뉴 펼침/접힘, `flat`: 상시 전개. 미지정 시 메뉴 ≤3 → `flat`, 초과 → `accordion`.
-- `getMenuIsSelectedFn` — 현재 선택 메뉴 판정 커스텀. 미지정 시 `fullPageCode === menu.codeChain.join(".")`.
-
-## SdSidebarUser — `<sd-sidebar-user>`
-
-```ts
-userMenu = input<SdSidebarUserMenu>();
-
-interface SdSidebarUserMenu {
-  title: string;
-  menus: { title: string; onClick: () => void }[];
-}
-```
-
-- 사이드바 상단 사용자 정보 + 드롭다운 메뉴(로그아웃 등). `<ng-content>` 가 사용자 표시 영역(아바타·이름).
-
-## SdTopbarContainer — `<sd-topbar-container>`
-
-- 탑바 + 본문 컨테이너. inputs 없음. 자식: `<sd-topbar>` + 본문.
-
-## SdTopbar — `<sd-topbar>`
-
-```ts
-sidebarContainer = input<SdSidebarContainer>();
-```
-
-- 상단 바. 햄버거 버튼 클릭 시 사이드바 토글. `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 }
-```
-
-- 탑바 우측 사용자 드롭다운(아바타 → 메뉴). `<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>
-```