@simplysm/sd-claude 14.0.82 → 14.0.84

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplysm/sd-claude",
-  "version": "14.0.82",
+  "version": "14.0.84",
   "description": "심플리즘 패키지 - Claude Code 셋업",
   "author": "심플리즘",
   "license": "Apache-2.0",

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

@@ -1,37 +0,0 @@
-# @simplysm/angular
-
-Angular 기반 simplysm 공통 UI/상태/인프라 컴포넌트·디렉티브·서비스 모음. zoneless·signal 기반. 모든 컴포넌트 standalone.
-
-## 사용 트리거 인덱스
-
-- **provideSdAngular / SdAngularConfigProvider** — 앱 부트스트랩 시 1회. 아래 "부트스트랩" 참조.
-- **버튼류** (`SdButton`/`SdAnchor`/`SdAdditionalButton`/`SdModalSelectButton`/`SdSelectModal`/`SdSelectModalInfo`) — 클릭 트리거 UI. 자세히: [buttons.md](./buttons.md)
-- **폼 입력류** (`SdTextfield`/`SdTextfieldTypes`/`sdTextfieldTypes`/`SdTextarea`/`SdNumpad`/`SdRange`/`SdDateRangePicker`/`SdSelect`/`SelectModeValue`/`SdSelectItem`/`SdSelectButton`/`SdCheckbox`/`SdSwitch`/`SdCheckboxGroup`/`SdCheckboxGroupItem`/`SdForm`/`SdDropdown`/`SdDropdownPopup`) — 값 입력·서밋. 자세히: [forms.md](./forms.md)
-- **모달** (`SdModalProvider`/`SdModal`/`SdActivatedModalProvider`/`SdModalContentDef`/`SdModalInfo`/`SdModalOptions`/`SdPromptModal`/`SdConfirmModal`/`SelectModalOutputResult`) — 프로그래밍 다이얼로그. 자세히: [modal.md](./modal.md)
-- **토스트·바쁨·프린트** (`SdToastProvider`/`SdToast`/`SdToastContainer`/`SdToastSeverity`/`SdToastTheme`/`SdToastContentDef`/`SdToastInput`/`SdBusyProvider`/`SdBusyContainer`/`SdBusyType`/`SdPrintProvider`/`SdPrint`/`SdPrintInput`) — 알림·로딩·인쇄. 자세히: [toast.md](./toast.md)
-- **앱 구조·권한** (`SdAppStructureProvider`/`SdAppStructureUtils`/`SdMenu`/`SdFlatMenu`/`SdPermission`/`injectPermsSignal`/`SdPermissionTable`) — 메뉴 트리·권한 매트릭스. 자세히: [app-structure.md](./app-structure.md)
-- **공유 데이터** (`SdSharedDataProvider`/`SharedDataBase`/`SharedDataInfo`/`SharedDataHandle`/`SdSharedDataChangeEvent`/`SdSharedDataSelect`/`SdSharedDataSelectButton`/`SdSharedDataSelectList`/`matchesSearchText`) — 서버 마스터데이터 캐시+선택 UI. 자세히: [shared-data.md](./shared-data.md)
-- **시트** (`SdSheet`/`SdSheetColumn`/`SdSheetColumnCellTemplate`/`SdSheetConfigModal`/`SdSheetCellContext`/`SdSheetColumnDef`/`SdSheetConfig`/`SdSheetHeaderDef`/`SdSheetItemKeydownEventParam`/`SdSheetCellKeydownEventParam`) — 표 그리드. 자세히: [sheet.md](./sheet.md)
-- **칸반** (`SdKanbanBoard`/`SdKanban`/`SdKanbanLane`/`SdKanbanBoardDropInfo`/`SdKanbanDragRef`/`SdKanbanDropTarget`) — 드래그 보드. 자세히: [kanban.md](./kanban.md)
-- **CRUD 화면 골격** (`SdBaseContainer`/`SdCrudList`/`SdCrudDetail`/`SdStatePreset`/`SdStatePresetDef`) — 목록/상세 페이지 컨테이너. 자세히: [crud.md](./crud.md)
-- **레이아웃** (`SdSidebarContainer`/`SdSidebar`/`SdSidebarMenu`/`SdSidebarUser`/`SdSidebarUserMenu`/`SdTopbarContainer`/`SdTopbar`/`SdTopbarMenu`/`SdTopbarUser`/`SdTopbarUserMenu`) — 사이드바·탑바 골격. 자세히: [layout.md](./layout.md)
-- **셀렉트/확장/정렬 매니저** (`useSelectionManager`/`useExpandingManager`/`useSortingManager`/`ExpandItemDef`/`SortingDef`) — 리스트 내부 상태 헬퍼. 자세히: [selection-managers.md](./selection-managers.md)
-- **라우팅** (`SdRouterLink`/`SdNavigateWindowProvider`/`injectCurrentPageCodeSignal`/`injectFullPageCodeSignal`/`injectViewTitleSignal`/`injectViewTypeSignal`/`SdViewType`/`setupCanDeactivate`/`getMenuRouterLinkOption`/`getIsMenuSelected`) — 라우터 보조. 자세히: [routing.md](./routing.md)
-- **인프라/유틸** (`SdSystemLogProvider`/`SdLocalStorageProvider`/`SdSystemConfigProvider`/`injectSdSystemConfigResource`/`SdServiceClientFactoryProvider`/`SdFileDialogProvider`/`SdGlobalErrorHandlerPlugin`/`SdThemeProvider`/`SdThemeSelector`/`FormatPipe`/`mark`/`setSafeStyle`/`setupBgTheme`/`setupModelHook`/`DirectiveInputSignals`/`UndefToOptional`/`WithOptional`/`SdEvents`/`SdOptionEventPlugin`/`SdResizeDirective`/`SdResizeEvent`/`SdIntersectionDirective`/`SdIntersectionEvent`/`SdCommandDirective`/`SdRipple`/`setupRipple`/`SdShowEffect`/`setupRevealOnShow`/`SdInvalid`/`setupInvalid`/`SdTypedTemplate`/`SdItemOfTemplate`/`SdItemOfTemplateContext`) — 자세히: [infrastructure.md](./infrastructure.md)
-- **시각 위젯** (`SdLabel`/`SdNote`/`SdProgress`/`SdCalendar`/`SdBarcode`/`BarcodeType`/`SdEcharts`/`SdTiptapEditor`/`SdAddressSearchModal`/`Address`/`SdCollapse`/`SdCollapseIcon`/`SdTab`/`SdTabItem`/`SdList`/`SdListItem`/`SdGap`/`SdPagination`) — 자세히: [visual.md](./visual.md)
-
-## 부트스트랩
-
-```ts
-provideSdAngular(opt: { clientName: string }): EnvironmentProviders
-```
-
-- `clientName` — `SdAngularConfigProvider.clientName` 으로 저장. `SdLocalStorageProvider` 키 prefix, `SdServiceClientFactoryProvider` 의 `createServiceClient(clientName, …)`, `SdAppStructureProvider.initialize` 의 `itemsMap[clientName]` 조회에 사용.
-- 호출 부수효과: zoneless change detection 활성, `IMAGE_CONFIG` 경고 끔, ng-icons 기본(stroke 1.5/size 1.33em), `EVENT_MANAGER_PLUGINS` 에 `SdOptionEventPlugin` 추가, `ErrorHandler` 를 `SdGlobalErrorHandlerPlugin` 으로 교체, `unhandledrejection`·`error` 글로벌 리스너 등록, `SdThemeProvider.dark`/`fontSize` 를 `SdLocalStorageProvider` 와 양방향 sync(`sd-theme-dark`·`sd-theme-font-size` 키), `Router` 네비게이션 동안 `SdBusyProvider.globalBusyCount` 증감, `SwUpdate` 활성 시 5분~1시간 백오프로 업데이트 확인 후 사용자 컨펌 → reload.
-
-```ts
-@Injectable({ providedIn: "root" }) class SdAngularConfigProvider { clientName!: string }
-```
-
-- 직접 쓸 일은 거의 없음. 다른 simplysm 프로바이더가 inject 해 prefix·키로 사용.
-- 사용 예: `bootstrapApplication(App, { providers: [provideSdAngular({ clientName: "my-app" })] })`

package/claude/references/sd-simplysm14/apis/angular/app-structure.md

@@ -1,92 +0,0 @@
-# @simplysm/angular — app-structure
-
-서버 `AppStructureService` 에서 받은 메뉴·권한 트리(`AppStructureItem<TModule>[]`)를 클라이언트에서 사용 가능 형태로 변환·캐시.
-
-## SdAppStructureProvider<TModule> (root)
-
-```ts
-usableModules: WritableSignal<TModule[]|undefined>;
-permRecord: WritableSignal<Record<string, boolean>|undefined>;
-items: WritableSignal<AppStructureItem<TModule>[]>;
-
-usableMenus: Signal<SdMenu[]>;                // items × modules × perms 필터된 트리 메뉴
-usableFlatMenus: Signal<SdFlatMenu<TModule>[]>;  // 평탄화된 메뉴 리스트 (검색 등)
-
-initialize(serviceKey: string): Promise<void>;
-getPermissionsByStructure(items, codeChain?): SdPermission<TModule>[];
-getTitleByFullCode(fullCode: string): string;       // 부모 chain 포함 타이틀("[A > B] C")
-getItemChainByFullCode(fullCode: string): AppStructureItem<TModule>[];
-getPermsByFullCode<K extends string>(fullCodes: string[], permKeys: K[]): K[];
-```
-
-- `initialize` — `SdServiceClientFactoryProvider.get(serviceKey)` 에서 `AppStructureService.getItems()` 호출, `clientName` (`SdAngularConfigProvider`) 키로 트리 적재.
-- `usableModules` — 활성 모듈 식별자 배열. 메뉴/권한 필터링에 사용. 미세팅(`undefined`) 이면 모듈 체크 통과(전체 허용).
-- `permRecord` — `<fullCode>.<permKey>` (예: `sales.invoice.use`) → boolean. `undefined` 면 권한 체크 통과.
-- `usableMenus` — 그룹 메뉴는 표시 가능한 leaf 자식이 있어야 포함. leaf 는 `<code>.use` 권한 검사.
-- `usableFlatMenus` — leaf 만 평탄화. modulesChain 정보 포함.
-- `getPermsByFullCode` — 해당 화면들에 대해 사용자가 가진 권한키들 추출(`perms` 자체가 정의 안된 화면은 모든 permKey 통과).
-
-## SdAppStructureUtils (abstract static class)
-
-```ts
-static getTitleByFullCode/getPermsByFullCode/getItemChainByFullCode
-static getMenus(items, codeChain, usableModules, permRecord): SdMenu[]
-static getFlatMenus(items, usableModules, permRecord): SdFlatMenu<TModule>[]
-static getPermissions(items, codeChain, usableModules): SdPermission<TModule>[]
-static getFlatPermissions(items, usableModules)        // service-common 의 동명 함수 위임
-```
-
-- 프로바이더가 내부적으로 호출. 트리 변환 로직 직접 쓰고 싶으면 호출 가능.
-
-## injectPermsSignal
-
-```ts
-function injectPermsSignal<K extends string>(viewCodes: string[], keys: K[]): Signal<K[]>
-```
-
-- 컴포넌트/페이지에서 자기 화면 코드들과 검사할 권한키 배열을 주면, 현재 사용자가 가진 키만 담은 signal 반환. 버튼 enable 조건 등에 사용.
-
-```ts
-readonly perms = injectPermsSignal(["sales.invoice"], ["use", "edit"]);
-// 템플릿: @if (perms().includes("edit")) { <sd-button>편집</sd-button> }
-```
-
-## SdPermissionTable — `<sd-permission-table>`
-
-```ts
-class SdPermissionTable<TModule>
-value = model<Record<string, boolean>>({});      // permRecord 형태(key: <fullCode>.<permKey>)
-items = input<SdPermission<TModule>[]>([]);
-disabled = input(false);
-```
-
-- 권한 트리를 표 형태로 표시·편집. `value` 양방향. 관리자 권한 설정 화면용.
-
-## 타입
-
-```ts
-interface SdMenu {
-  title: string; codeChain: string[]; url?: string; icon?: string; children?: SdMenu[];
-}
-interface SdFlatMenu<TModule = unknown> {
-  titleChain: string[]; codeChain: string[]; modulesChain: TModule[][];
-}
-interface SdPermission<TModule = unknown> {
-  title: string; codeChain: string[]; modules: TModule[]|undefined;
-  perms: ("use"|"edit")[]|undefined;
-  children: SdPermission<TModule>[]|undefined;
-}
-```
-
-- `SdMenu` — `url` 또는 `children` 중 하나. 라우터 링크 분기는 `getMenuRouterLinkOption` 이 담당 ([routing.md](./routing.md)).
-- `SdFlatMenu.modulesChain` — 조상부터 자신까지 누적된 modules 배열 묶음. 모듈 활성 여부 검사 시 사용.
-- `SdPermission.perms` — 해당 화면이 정의한 권한 키들. undefined 면 권한 개념 없음(모두 허용).
-
-## 부트스트랩 순서
-
-```ts
-const sdAppStructure = inject(SdAppStructureProvider);
-sdAppStructure.usableModules.set(myActiveModules);
-sdAppStructure.permRecord.set(myPermRecord);
-await sdAppStructure.initialize("main");   // serviceKey = SdServiceClientFactoryProvider 의 등록 key
-```

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

@@ -1,88 +0,0 @@
-# @simplysm/angular — buttons
-
-## SdButton — `<sd-button>`
-
-```ts
-type = input<"button" | "submit">("button");
-theme = input<"primary"|"secondary"|"info"|"success"|"warning"|"danger"|"gray"|"blue-gray"|"link"|"link-primary"|"link-secondary"|"link-info"|"link-success"|"link-warning"|"link-danger"|"link-gray"|"link-blue-gray"|"link-rev">();
-inline = input(false); inset = input(false); size = input<"sm"|"lg">();
-disabled = input(false); buttonStyle = input<string>(); buttonClass = input<string>();
-```
-
-- `type` — 내부 `<button type>`. `submit` 이면 둘러싼 `<sd-form>`·`<form>` 의 서밋을 트리거.
-- `theme` — 색상·강조. `link-*` 는 배경 없는 텍스트 링크 룩. 미지정이면 디폴트 회색.
-- `inline` — true 면 인라인 블록 폭(콘텐츠 크기). false 면 부모 폭 채움.
-- `inset` — true 면 외곽 보더/그림자 제거(컨테이너 안에 박힌 룩).
-- `size` — `sm`/`lg` 만. 미지정 = 기본 크기.
-- `disabled` — true 면 클릭·포커스 차단.
-- `buttonStyle`/`buttonClass` — 내부 `<button>` 에 style/class 추가.
-
-```html
-<sd-button theme="primary" (click)="onSave()">저장</sd-button>
-```
-
-## SdAnchor — `<sd-anchor>`
-
-```ts
-disabled = input(false);
-theme = input<"primary"|"secondary"|"info"|"success"|"warning"|"danger"|"gray"|"blue-gray"|...>();
-```
-
-- 링크 룩 클릭 영역. 버튼보다 강조 낮음. `theme` 미지정이면 현재 텍스트 색 상속.
-- `disabled` — 클릭·포커스 차단.
-
-```html
-<sd-anchor (click)="onEdit()">수정</sd-anchor>
-```
-
-## SdAdditionalButton — `<sd-additional-button>`
-
-```ts
-size = input<"sm"|"lg">(); inset = input(false);
-```
-
-- 입력 컨트롤(`<sd-textfield>` 등) 옆에 붙이는 보조 버튼 슬롯. `<ng-content>` 로 아이콘/텍스트 투영. 키패드 등 입력 우측에 액션 붙일 때.
-
-```html
-<sd-textfield type="text" [(value)]="q" /><sd-additional-button (click)="onSearch()">검색</sd-additional-button>
-```
-
-## SdModalSelectButton — `<sd-modal-select-button>`
-
-```ts
-class SdModalSelectButton<M extends "single"|"multi", K, T extends SdSelectModal<K>>
-modal = input.required<SdSelectModalInfo<SdSelectModal<K>>>();
-value = model<SelectModeValue<K>[M]>();
-disabled = input(false); required = input(false); inset = input(false);
-size = input<"sm"|"lg">(); selectMode = input<M>("single" as M);
-modalOptions = input<SdModalOptions>();
-searchIcon = input(tablerSearch);
-
-interface SdSelectModal<TKey> extends SdModalContentDef<SelectModalOutputResult<TKey>> {
-  selectMode: InputSignal<"single"|"multi"|undefined>;
-  selectedKeys: InputSignal<TKey[]>;
-}
-type SdSelectModalInfo<T extends SdSelectModal<any>> = SdModalInfo<T, "selectMode"|"selectedKeys">;
-```
-
-- 입력 옆에 검색 버튼이 붙은 모달 트리거 컨트롤. 검색 아이콘 클릭 → 지정 모달 표시 → 모달이 `SelectModalOutputResult<TKey>` emit → `value` 에 반영.
-- `modal` — 표시할 모달 컴포넌트 정의(`SdSelectModal` 구현). 필수.
-- `value` — `single` 모드면 단일 키, `multi` 면 키 배열. `model` 이므로 양방향.
-- `selectMode` — 모달에 전달되는 선택 모드. `single` 기본.
-- `required` — true 면 값이 있어도 지우개 아이콘 표시 안 함. false + 값 있음 → 우측에 지우개 아이콘 노출.
-- `inset` — 컨테이너 안에 박힌 룩(보더 제거).
-- `disabled` — 검색·지우개 버튼 모두 숨김.
-- `modalOptions` — `SdModalProvider.showAsync` 에 전달되는 옵션 ([modal.md](./modal.md)).
-- `searchIcon` — 우측 버튼 아이콘. 기본 `tablerSearch`.
-- `<ng-content>` — 좌측 값 표시 영역.
-
-```html
-<sd-modal-select-button [(value)]="userId" [modal]="{ title: '직원선택', type: EmpSelectModal, inputs: {} }">
-  {{ userName() }}
-</sd-modal-select-button>
-```
-
-## 공통 주의
-
-- 모든 버튼류는 standalone. 별도 NgModule 등록 불필요.
-- `theme` 의 같은 8개 baseline(`primary`~`blue-gray`)은 디자인 토큰 `--theme-<name>-default` 에 연결. `SdButton.theme` 만 `link-*` 변종 추가.

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

@@ -1,100 +0,0 @@
-# @simplysm/angular — crud
-
-CRUD 화면 골격. 공통 컨테이너(`SdBaseContainer`) + 리스트(`SdCrudList`) + 상세(`SdCrudDetail`) + 사용자 상태 프리셋(`SdStatePreset`).
-
-## SdBaseContainer — `<sd-base-container>`
-
-```ts
-ready = model(false);
-initialized = input(false);
-busyCount = model(0);
-restricted = input(false);
-viewType = input.required<SdViewType>();      // "page"|"modal"|"control" (routing.md)
-
-// content slots: #topbarTpl #commandTpl #contentTpl #bottomCommandTpl
-```
-
-- 모든 simplysm 화면의 기본 컨테이너. 진입 시 `SdSharedDataProvider.wait()` 후 `ready` true.
-- `restricted=true` 면 권한 없음 안내 화면 표시(데이터 로드 스킵).
-- `viewType` — 보통 `injectViewTypeSignal()` 결과 바인딩.
-- 슬롯: `<ng-template #topbarTpl>` 상단 영역, `#commandTpl` 명령바, `#contentTpl` 본문, `#bottomCommandTpl` 하단.
-
-## SdCrudList — `<sd-crud-list>`
-
-```ts
-class SdCrudList<TItem, TKey>
-ready = model(false); initialized = input(false); busyCount = model(0);
-restricted = input(false); readonly = input(false);
-viewType = input.required<SdViewType>();
-selectMode = input<"single"|"multi">();
-key = input.required<string>();                // 시트/프리셋 key prefix
-
-filterSubmit = output(); submit = output();
-create = output(); delete = output<TItem[]>(); restore = output<TItem[]>();
-
-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) => TKey>();
-
-// content slots: #commandTpl #filterTpl #toolTpl #bottomCommandTpl
-// + 자식: <sd-sheet-column> 들
-```
-
-- 표준 리스트 화면: 필터 영역 + 시트 + 페이지바 + 명령(저장/추가/삭제/복원).
-- `filterSubmit` — 필터 폼 submit. 호출자가 데이터 fetch.
-- `submit` — 명령바의 저장 버튼.
-- `create`/`delete`/`restore` — 행 추가/선택 삭제/선택 복원.
-- `currDeletedItems` — soft-delete 표시. 해당 행 셀에 취소선 자동.
-- `readonly=true` 면 명령바·편집 차단.
-- 모달로 띄워서 선택 picker 로도 동작: 모달 confirm 시 `SdActivatedModalProvider.contentComponent.close.emit({ selectedKeys })`.
-- `key` — 자식 `<sd-sheet key>` 와 `SdStatePreset key` 가 이 값을 prefix 로 사용.
-
-```html
-<sd-crud-list [viewType]="viewType()" key="invoice" [trackByFn]="trackById"
-              [items]="items()" [(selectedKeys)]="sel" selectMode="multi"
-              (filterSubmit)="reload()" (create)="onCreate()" (delete)="onDelete($event)">
-  <ng-template #filterTpl>...필터 폼...</ng-template>
-  <sd-sheet-column key="no" header="번호" />
-</sd-crud-list>
-```
-
-## SdCrudDetail — `<sd-crud-detail>`
-
-```ts
-ready = model(false); initialized = input(false); busyCount = model(0);
-restricted = input(false); readonly = input(false);
-viewType = input.required<SdViewType>();
-submit = output();
-
-// content slots: #commandTpl #contentTpl #bottomCommandTpl
-```
-
-- 상세 화면 골격. 내부에 `<sd-form>` 자동 배치. 저장 버튼 클릭 시 form submit → invalid 없으면 `submit` 발화.
-
-## SdStatePreset — `<sd-state-preset>`
-
-```ts
-key = input.required<string>();
-state = model<any>();              // 적용할 상태 객체 (필터 등)
-size = input<"sm"|"lg">();
-
-interface SdStatePresetDef { name: string; state: any; }
-```
-
-- 사용자가 현재 `state` 를 이름 붙여 저장/불러오기. `SdSystemConfigProvider` 키 `key` 로 `SdStatePresetDef[]` 저장.
-- 별 아이콘 클릭 → 이름 입력(`SdPromptModal`) → 추가. 프리셋 클릭 → `state` 에 적용. 디스켓 아이콘 → 현재 state 덮어쓰기. X 아이콘 → 삭제.
-
-```html
-<sd-state-preset key="invoice-filter" [(state)]="filter" />
-```
-
-## 주의
-
-- 모든 CRUD 컴포넌트의 `ready` 는 진입 후 데이터 준비 완료 시 true. 호출자가 `[ready]="ready()"` 로 자식 조건부 렌더링.
-- `key` 는 한 클라이언트 내 고유해야 함. 시트 컬럼 설정·프리셋·기타 영구 상태가 이 키로 충돌 없이 저장됨.
-- `SdCrudList` 의 selectMode 가 설정되었고 컨테이너가 모달 안에 있으면 자동으로 picker 모드로 동작.

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)).