@simplysm/sd-claude 14.0.50 → 14.0.52

package/claude/references/sd-simplysm-v14/angular/ui-form/sd-numpad.md

@@ -0,0 +1,26 @@
+# `SdNumpad`
+
+숫자 패드 입력 컴포넌트. 버튼을 클릭하여 숫자를 입력한다.
+
+```typescript
+@Component({ selector: "sd-numpad", ... })
+export class SdNumpad
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `value` | model | `number \| undefined` | 숫자 값 |
+| `placeholder` | input | `string \| undefined` | 플레이스홀더 |
+| `required` | input | `boolean` | 필수 여부 (기본값: `false`) |
+| `inputDisabled` | input | `boolean` | 상단 텍스트 입력 비활성화 (기본값: `false`) |
+| `useEnterButton` | input | `boolean` | 확인 버튼 표시 (기본값: `false`) |
+| `useMinusButton` | input | `boolean` | 부호 반전 버튼 표시 (기본값: `false`) |
+| `enterButtonClick` | output | `void` | 확인 버튼 클릭 이벤트 |
+
+## Usage
+
+```html
+<sd-numpad [(value)]="quantity" [useEnterButton]="true" (enterButtonClick)="onConfirm()" />
+```

package/claude/references/sd-simplysm-v14/angular/ui-form/sd-range.md

@@ -0,0 +1,26 @@
+# `SdRange`
+
+범위 입력 컴포넌트. `from`/`to` 두 개의 `SdTextfield`를 나란히 배치한다.
+
+```typescript
+@Component({ selector: "sd-range", ... })
+export class SdRange<K extends keyof SdTextfieldTypes>
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `type` | input (required) | `K` | 텍스트필드 타입 (`SdTextfieldTypes`의 키) |
+| `from` | model | `SdTextfieldTypes[K] \| undefined` | 시작 값 |
+| `to` | model | `SdTextfieldTypes[K] \| undefined` | 종료 값 |
+| `inputStyle` | input | `string \| undefined` | 인라인 스타일 |
+| `required` | input | `boolean` | 필수 여부 (기본값: `false`) |
+| `disabled` | input | `boolean` | 비활성화 (기본값: `false`) |
+
+## Usage
+
+```html
+<sd-range [type]="'date'" [(from)]="startDate" [(to)]="endDate" />
+<sd-range [type]="'number'" [(from)]="minValue" [(to)]="maxValue" />
+```

package/claude/references/sd-simplysm-v14/angular/ui-form/sd-select.md

@@ -0,0 +1,68 @@
+# `SdSelect`
+
+드롭다운 선택 컴포넌트. single/multi 모드를 지원한다.
+
+```typescript
+@Component({ selector: "sd-select" })
+class SdSelect<T, M extends keyof SelectModeValue<T>> {
+  selectMode = input("single" as M);
+  value = model<SelectModeValue<any>[M]>();
+  placeholder = input<string>();
+  disabled = input(false, { transform: booleanAttribute });
+  inline = input(false, { transform: booleanAttribute });
+  inset = input(false, { transform: booleanAttribute });
+  size = input<"sm" | "lg">();
+  required = input(false, { transform: booleanAttribute });
+  hideSelectAll = input(false, { transform: booleanAttribute });
+  multiSelectionDisplayDirection = input<"vertical">();
+  items = input<T[]>();
+  getChildrenFn = input<(item: T) => T[] | undefined>();
+  contentClass = input<string>();
+  contentStyle = input<string>();
+}
+```
+
+## Members
+
+| Member | Kind | Type | Default | Description |
+|--------|------|------|---------|-------------|
+| `selectMode` | input | `M` | `"single"` | 선택 모드 |
+| `value` | model | `SelectModeValue<any>[M]` | - | 선택된 값 (two-way) |
+| `placeholder` | input | `string \| undefined` | `undefined` | 플레이스홀더 |
+| `disabled` | input | `boolean` | `false` | 비활성화 |
+| `inline` | input | `boolean` | `false` | 인라인 표시 |
+| `inset` | input | `boolean` | `false` | 삽입 스타일 |
+| `size` | input | `"sm" \| "lg" \| undefined` | `undefined` | 크기 |
+| `required` | input | `boolean` | `false` | 필수 |
+| `hideSelectAll` | input | `boolean` | `false` | multi 모드에서 전체 선택 숨김 |
+| `multiSelectionDisplayDirection` | input | `"vertical" \| undefined` | `undefined` | multi 모드 표시 방향 |
+| `items` | input | `T[] \| undefined` | `undefined` | 항목 배열 |
+| `getChildrenFn` | input | `((item) => T[] \| undefined) \| undefined` | `undefined` | 트리 구조 자식 함수 |
+| `contentClass` | input | `string \| undefined` | `undefined` | 트리거 영역 CSS 클래스 |
+| `contentStyle` | input | `string \| undefined` | `undefined` | 트리거 영역 인라인 스타일 |
+
+**스타일 적용**: `contentClass`/`contentStyle`은 트리거 영역(선택값 텍스트와 드롭다운 화살표가 함께 놓인 박스)에만 적용된다.
+
+## Related Types
+
+### `SdSelectItem`
+
+드롭다운 선택 항목.
+
+```typescript
+@Component({ selector: "sd-select-item" })
+class SdSelectItem<T> {
+  value = input.required<T>();
+  disabled = input(false, { transform: booleanAttribute });
+  hidden = input(false, { transform: booleanAttribute });
+}
+```
+
+### `SdSelectButton`
+
+버튼 스타일 선택 컴포넌트.
+
+```typescript
+@Component({ selector: "sd-select-button" })
+class SdSelectButton<T> { }
+```

package/claude/references/sd-simplysm-v14/angular/ui-form/sd-shared-data-select.md

@@ -0,0 +1,52 @@
+# `SdSharedDataSelect`
+
+공유 데이터 드롭다운 선택 컴포넌트. 검색 기능 포함. 상세 API는 [features/sd-shared-data-components.md](../features/sd-shared-data-components.md#sdshareddataselect)를 참조한다.
+
+## 시트 셀 내 사용 패턴
+
+시트 셀 안에서 사용할 때 `[inset]="true" [size]="'sm'"`을 반드시 지정한다.
+
+```html
+<sd-sheet-column [header]="'거래처'" [key]="'vendorId'">
+  <ng-template [cell]="items()" let-item let-edit="edit">
+    <sd-shared-data-select
+      [items]="sharedVendors()"
+      [inset]="true"
+      [size]="'sm'"
+      [disabled]="!canEdit()"
+      [readonly]="!edit"
+      [(value)]="item.vendorId"
+      (valueChange)="mark(items)"
+    >
+      <ng-template [itemOf]="sharedVendors()">
+        <div class="flex-row gap-sm">
+          <div>{{ item.__searchText }}</div>
+        </div>
+      </ng-template>
+    </sd-shared-data-select>
+  </ng-template>
+</sd-sheet-column>
+```
+
+## 일반 form 내 사용 패턴
+
+```html
+<sd-shared-data-select
+  [items]="sharedVendors()"
+  [(value)]="data().vendorId"
+  (valueChange)="mark(data)"
+>
+  <ng-template [itemOf]="sharedVendors()">
+    <div class="flex-row gap-sm">
+      <div>{{ item.__searchText }}</div>
+    </div>
+  </ng-template>
+</sd-shared-data-select>
+```
+
+`<ng-template [itemOf]>` 패턴으로 드롭다운 항목의 표시 형식을 커스터마이징한다.
+
+### 실사용 예
+
+- [crud-list.md §5 확장 A: inline 편집/저장](../recipes/crud-list.md#5-확장-a-inline-편집저장) — 시트 셀 내 공유 데이터 선택
+- [crud-detail.md §9 확장 E: 보조 기능 영역](../recipes/crud-detail.md#9-확장-e-보조-기능-영역) — 보조 form 셀렉터

package/claude/references/sd-simplysm-v14/angular/ui-form/sd-state-preset.md

@@ -0,0 +1,37 @@
+# `SdStatePreset`
+
+화면 상태(검색 조건 등)를 로컬 스토리지에 저장하고 불러오는 프리셋 컴포넌트.
+`SdSystemConfigProvider`를 통해 설정 키 기반으로 저장한다.
+
+```typescript
+@Component({ selector: "sd-state-preset", ... })
+export class SdStatePreset
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `key` | input (required) | `string` | 저장 키 (`SdSystemConfigProvider` 기반) |
+| `state` | model | `any` | 현재 상태 객체. 프리셋 클릭 시 해당 프리셋의 상태로 업데이트됨 |
+| `size` | input | `"sm" \| "lg" \| undefined` | 크기 |
+
+## Related Types
+
+### `SdStatePresetDef`
+
+```typescript
+interface SdStatePresetDef {
+  name: string;
+  state: any;
+}
+```
+
+## Usage
+
+```html
+<sd-state-preset [key]="'order-list-search'" [(state)]="searchState" />
+```
+
+> 프리셋 아이콘 클릭 → 이름 입력 모달 → 현재 `state`를 해당 이름으로 저장.
+> 저장된 프리셋 클릭 → `state`가 해당 프리셋의 값으로 업데이트됨.

package/claude/references/sd-simplysm-v14/angular/ui-form/sd-switch.md

@@ -0,0 +1,27 @@
+# `SdSwitch`
+
+토글 스위치 컴포넌트. `value` model로 on/off 상태를 관리한다.
+
+```typescript
+@Component({ selector: "sd-switch", ... })
+export class SdSwitch
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `value` | model | `boolean` | on/off 상태 (기본값: `false`) |
+| `canChangeFn` | input | `(item: boolean) => boolean \| Promise<boolean>` | 변경 가드 함수 (기본값: 항상 `true`) |
+| `disabled` | input | `boolean` | 비활성화 (기본값: `false`) |
+| `inline` | input | `boolean` | 인라인 표시 (기본값: `false`) |
+| `inset` | input | `boolean` | 인셋 스타일 (기본값: `false`) |
+| `size` | input | `"sm" \| "lg" \| undefined` | 크기 |
+| `theme` | input | `"primary" \| "secondary" \| "info" \| "success" \| "warning" \| "danger" \| "gray" \| "blue-gray" \| undefined` | 색상 테마 |
+
+## Usage
+
+```html
+<sd-switch [(value)]="isActive" [theme]="'primary'" />
+<sd-switch [(value)]="isEnabled" [canChangeFn]="canChangeActiveAsync" />
+```

package/claude/references/sd-simplysm-v14/angular/ui-form/sd-textarea.md

@@ -0,0 +1,33 @@
+# `SdTextarea`
+
+멀티라인 텍스트 입력 컴포넌트. 내용에 따라 행 수가 자동으로 늘어난다.
+
+```typescript
+@Component({ selector: "sd-textarea", ... })
+export class SdTextarea
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `value` | model | `string \| undefined` | 입력 값 |
+| `placeholder` | input | `string \| undefined` | 플레이스홀더 텍스트 |
+| `title` | input | `string \| undefined` | 툴팁 |
+| `minRows` | input | `number` | 최소 행 수 (기본값: `1`) |
+| `disabled` | input | `boolean` | 비활성화 (기본값: `false`) |
+| `readonly` | input | `boolean` | 읽기 전용 (기본값: `false`) |
+| `required` | input | `boolean` | 필수 여부 (기본값: `false`) |
+| `inline` | input | `boolean` | 인라인 표시 (기본값: `false`) |
+| `inset` | input | `boolean` | 인셋 스타일 (기본값: `false`) |
+| `size` | input | `"sm" \| "lg" \| undefined` | 크기 |
+| `validatorFn` | input | `(value: string \| undefined) => string \| undefined` | 커스텀 유효성 검사 함수 |
+| `theme` | input | `"primary" \| "secondary" \| "info" \| "success" \| "warning" \| "danger" \| "gray" \| "blue-gray" \| undefined` | 배경 테마 |
+| `inputStyle` | input | `string \| undefined` | 인라인 스타일 |
+| `inputClass` | input | `string \| undefined` | 추가 CSS 클래스 |
+
+## Usage
+
+```html
+<sd-textarea [(value)]="description" [placeholder]="'설명을 입력하세요'" [minRows]="3" />
+```

package/claude/references/sd-simplysm-v14/angular/ui-form/sd-textfield.md

@@ -0,0 +1,145 @@
+# `SdTextfield`
+
+텍스트 입력 컴포넌트. 13가지 타입을 지원한다.
+
+```typescript
+@Component({ selector: "sd-textfield" })
+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, { transform: booleanAttribute });
+  readonly = input(false, { transform: booleanAttribute });
+  required = input(false, { transform: booleanAttribute });
+  min = input<SdTextfieldTypes[K]>();
+  max = input<SdTextfieldTypes[K]>();
+  minlength = input<number>();
+  maxlength = input<number>();
+  pattern = input<string>();
+  validatorFn = input<(value: SdTextfieldTypes[K] | undefined) => string | undefined>();
+  format = input<string>();
+  step = input<number>();
+  autocomplete = input<string>();
+  useNumberComma = input(true, { transform: booleanAttribute });
+  minDigits = input<number>();
+  inline = input(false, { transform: booleanAttribute });
+  inset = input(false, { transform: booleanAttribute });
+  size = input<"sm" | "lg">();
+  theme = input<string>();
+}
+```
+
+## Members
+
+| Member | Kind | Type | Default | Description |
+|--------|------|------|---------|-------------|
+| `type` | input (required) | `keyof SdTextfieldTypes` | - | 입력 타입 (number, text, password, color, email, format, date, month, year, datetime, datetime-sec, time, time-sec) |
+| `value` | model | `SdTextfieldTypes[K] \| undefined` | - | 값 (two-way) |
+| `placeholder` | input | `string \| undefined` | `undefined` | 플레이스홀더 |
+| `title` | input | `string \| undefined` | `undefined` | title 속성 |
+| `inputStyle` | input | `string \| undefined` | `undefined` | input 인라인 스타일 |
+| `inputClass` | input | `string \| undefined` | `undefined` | input CSS 클래스 |
+| `disabled` | input | `boolean` | `false` | 비활성화 |
+| `readonly` | input | `boolean` | `false` | 읽기 전용 |
+| `required` | input | `boolean` | `false` | 필수 |
+| `min` | input | `SdTextfieldTypes[K] \| undefined` | `undefined` | 최소값 |
+| `max` | input | `SdTextfieldTypes[K] \| undefined` | `undefined` | 최대값 |
+| `minlength` | input | `number \| undefined` | `undefined` | 최소 길이 |
+| `maxlength` | input | `number \| undefined` | `undefined` | 최대 길이 |
+| `pattern` | input | `string \| undefined` | `undefined` | 입력 패턴 (정규식) |
+| `validatorFn` | input | `((value) => string \| undefined) \| undefined` | `undefined` | 커스텀 유효성 검증 함수 (에러 메시지 반환) |
+| `format` | input | `string \| undefined` | `undefined` | format 타입에서 사용할 포맷 문자열 |
+| `step` | input | `number \| undefined` | `undefined` | 증감 단위 |
+| `autocomplete` | input | `string \| undefined` | `undefined` | autocomplete 속성 |
+| `useNumberComma` | input | `boolean` | `true` | number 타입에서 천 단위 쉼표 사용 |
+| `minDigits` | input | `number \| undefined` | `undefined` | number 타입 최소 자릿수 |
+| `inline` | input | `boolean` | `false` | 인라인 표시 |
+| `inset` | input | `boolean` | `false` | 삽입 스타일 |
+| `size` | input | `"sm" \| "lg" \| undefined` | `undefined` | 크기 |
+| `theme` | input | `string \| undefined` | `undefined` | 테마 |
+
+**스타일 적용**: 입력 영역 스타일은 `inputClass`/`inputStyle`을 사용한다. 호스트(`<sd-textfield>`)에 직접 `class`/`style`을 줘도 입력 영역 외형은 변경되지 않는다.
+
+### 실사용 예
+
+- [crud-list.md §3 최소 뼈대: 조회 전용 page](../recipes/crud-list.md#3-최소-뼈대-조회-전용-page) — 필터 영역 텍스트 입력
+- [crud-list.md §5 확장 A: inline 편집/저장](../recipes/crud-list.md#5-확장-a-inline-편집저장) — 시트 셀 내 편집 (inset+sm, readonly=!edit)
+- [crud-detail.md §3 최소 뼈대: 읽기 전용 상세 폼](../recipes/crud-detail.md#3-최소-뼈대-읽기-전용-상세-폼) — 읽기 전용 필드 (readonly=true)
+- [crud-detail.md §5 확장 A: 편집/저장](../recipes/crud-detail.md#5-확장-a-편집저장) — 편집 가능 필드 (disabled=!canEdit)
+- [crud-detail.md §10 확장 F: 복합 상세](../recipes/crud-detail.md#10-확장-f-복합-상세-내부-sd-sheet) — 하위 컬렉션 시트 셀 내 편집
+
+## Related Types
+
+### `SdTextarea`
+
+멀티라인 텍스트 입력 컴포넌트.
+
+```typescript
+@Component({ selector: "sd-textarea" })
+class SdTextarea {
+  value = model<string>();
+  placeholder = input<string>();
+  title = input<string>();
+  minRows = input<number>(1);
+  disabled = input(false, { transform: booleanAttribute });
+  readonly = input(false, { transform: booleanAttribute });
+  required = input(false, { transform: booleanAttribute });
+  inline = input(false, { transform: booleanAttribute });
+  inset = input(false, { transform: booleanAttribute });
+  size = input<"sm" | "lg">();
+  validatorFn = input<(value: string | undefined) => string | undefined>();
+  theme = input<string>();
+  inputStyle = input<string>();
+  inputClass = input<string>();
+}
+```
+
+### `SdNumpad`
+
+숫자 패드 컴포넌트.
+
+```typescript
+@Component({ selector: "sd-numpad" })
+class SdNumpad {
+  placeholder = input<string>();
+  value = model<number>();
+  required = input(false, { transform: booleanAttribute });
+  inputDisabled = input(false, { transform: booleanAttribute });
+  useEnterButton = input(false, { transform: booleanAttribute });
+  useMinusButton = input(false, { transform: booleanAttribute });
+  enterButtonClick = output();
+}
+```
+
+### `SdRange`
+
+범위 슬라이더 컴포넌트.
+
+```typescript
+@Component({ selector: "sd-range" })
+class SdRange<K extends keyof SdTextfieldTypes> {
+  type = input.required<K>();
+  from = model<SdTextfieldTypes[K]>();
+  to = model<SdTextfieldTypes[K]>();
+  inputStyle = input<string>();
+  required = input(false, { transform: booleanAttribute });
+  disabled = input(false, { transform: booleanAttribute });
+}
+```
+
+### `SdDateRangePicker`
+
+날짜 범위 선택기.
+
+```typescript
+@Component({ selector: "sd-date-range-picker" })
+class SdDateRangePicker {
+  periodType = model<"일" | "월" | "범위">("범위");
+  from = model<DateOnly>();
+  to = model<DateOnly>();
+  required = input(false, { transform: booleanAttribute });
+}
+```

package/claude/references/sd-simplysm-v14/angular/ui-layout/sd-dock-container.md

@@ -0,0 +1,64 @@
+# `SdDockContainer`
+
+도킹 레이아웃 컨테이너. `SdDock`과 함께 사용하여 상/하/좌/우 고정 영역을 만든다.
+
+```typescript
+@Component({ selector: "sd-dock-container" })
+class SdDockContainer { }
+```
+
+## Related Types
+
+### `SdDock`
+
+도킹 영역 컴포넌트. `SdDockContainer` 내부에서 사용.
+
+```typescript
+@Component({ selector: "sd-dock" })
+class SdDock {
+  key = input<string>();
+  position = input<"top" | "bottom" | "right" | "left">("top");
+  resizable = input(false, { transform: booleanAttribute });
+}
+```
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `key` | `string \| undefined` | `undefined` | 리사이즈 설정 저장 키 |
+| `position` | `"top" \| "bottom" \| "right" \| "left"` | `"top"` | 도킹 위치 |
+| `resizable` | `boolean` | `false` | 크기 조절 가능 여부 |
+
+## Usage
+
+필터·도구 바는 `position="top"` (기본값이므로 생략 가능), 하단 액션 바는 `[position]="'bottom'"`으로 배치한다.
+
+```html
+<sd-dock-container>
+  <sd-dock>
+    <!-- 상단 필터/도구 바 (기본 position="top") -->
+  </sd-dock>
+  <!-- 메인 콘텐츠 -->
+  <sd-dock [position]="'bottom'">
+    <!-- 하단 액션 바 -->
+  </sd-dock>
+</sd-dock-container>
+```
+
+> **CRITICAL — modal 하단 바에 `[position]="'bottom'"` 반드시 명시**
+> 기본값은 `"top"`이다. modal 하단 액션 바에 `[position]`을 누락하면 상단에 렌더링되어 레이아웃이 깨진다.
+
+### 실사용 예
+
+- [crud-list.md §3 최소 뼈대: 조회 전용 page](../recipes/crud-list.md#3-최소-뼈대-조회-전용-page) — 필터 영역 dock(top)
+- [crud-list.md §8 확장 D: 선택 모달 전환](../recipes/crud-list.md#8-확장-d-선택-모달-전환) — modal 하단 선택 바 dock(bottom)
+- [crud-detail.md §7 확장 C: modal 뷰](../recipes/crud-detail.md#7-확장-c-modal-뷰) — modal 하단 액션 바 dock(bottom)
+- [crud-detail.md §8 확장 D: control 뷰](../recipes/crud-detail.md#8-확장-d-control-뷰) — control 상단 바 dock(top)
+
+## `SdGap`
+
+간격(gap) 컴포넌트. 요소 사이에 공간을 추가한다.
+
+```typescript
+@Component({ selector: "sd-gap" })
+class SdGap { }
+```

package/claude/references/sd-simplysm-v14/angular/ui-layout/sd-dock.md

@@ -0,0 +1,37 @@
+# `SdDock`
+
+`SdDockContainer` 내부에 배치되는 도킹 패널 컴포넌트. `position`으로 도킹 위치를 지정하고, `resizable`로 크기 조절을 허용한다.
+
+```typescript
+@Component({ selector: "sd-dock", ... })
+export class SdDock
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `key` | input | `string \| undefined` | 시스템 설정 저장 키 (크기 저장에 사용) |
+| `position` | input | `"top" \| "bottom" \| "right" \| "left"` | 도킹 위치 (기본값: `"top"`) |
+| `resizable` | input | `boolean` | 크기 조절 가능 여부 (기본값: `false`) |
+
+## Usage
+
+```html
+<sd-dock-container>
+  <sd-dock [position]="'top'">
+    <!-- 상단 고정 영역 -->
+  </sd-dock>
+  <sd-dock [position]="'bottom'" [resizable]="true" [key]="'my-page-bottom-dock'">
+    <!-- 하단 조절 가능 영역 -->
+  </sd-dock>
+  <ng-content /> <!-- 나머지 영역 -->
+</sd-dock-container>
+```
+
+### 실사용 예
+
+- [crud-list.md §3 최소 뼈대: 조회 전용 page](../recipes/crud-list.md#3-최소-뼈대-조회-전용-page) — 필터 영역 dock(top)
+- [crud-list.md §8 확장 D: 선택 모달 전환](../recipes/crud-list.md#8-확장-d-선택-모달-전환) — modal 하단 선택 바 dock(bottom)
+- [crud-detail.md §7 확장 C: modal 뷰](../recipes/crud-detail.md#7-확장-c-modal-뷰) — modal 하단 액션 바 dock(bottom)
+- [crud-detail.md §8 확장 D: control 뷰](../recipes/crud-detail.md#8-확장-d-control-뷰) — control 상단 바 dock(top)

package/claude/references/sd-simplysm-v14/angular/ui-layout/sd-gap.md

@@ -0,0 +1,26 @@
+# `SdGap`
+
+레이아웃 간격 컴포넌트. 세로/가로 공백을 삽입한다.
+
+```typescript
+@Component({ selector: "sd-gap", ... })
+export class SdGap
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `height` | input | `"xxs" \| "xs" \| "sm" \| "default" \| "lg" \| "xl" \| "xxl" \| undefined` | 세로 간격 (CSS 변수 `--gap-*` 기반) |
+| `heightPx` | input | `number \| undefined` | 세로 간격 (픽셀) |
+| `width` | input | `"xxs" \| "xs" \| "sm" \| "default" \| "lg" \| "xl" \| "xxl" \| undefined` | 가로 간격 (CSS 변수 `--gap-*` 기반) |
+| `widthPx` | input | `number \| undefined` | 가로 간격 (픽셀) |
+| `widthEm` | input | `number \| undefined` | 가로 간격 (em) |
+
+## Usage
+
+```html
+<sd-gap [height]="'lg'" />
+<sd-gap [width]="'default'" />
+<sd-gap [heightPx]="32" />
+```

package/claude/references/sd-simplysm-v14/angular/ui-layout/sd-kanban-board.md

@@ -0,0 +1,96 @@
+# `SdKanbanBoard`
+
+칸반 보드 컨테이너. 드래그앤드롭을 지원한다.
+
+```typescript
+@Component({ selector: "sd-kanban-board" })
+class SdKanbanBoard<L, T> {
+  selectedValues = model<T[]>([]);
+  drop = output<SdKanbanBoardDropInfo<L, T>>();
+}
+```
+
+## Members
+
+| Member | Kind | Type | Default | Description |
+|--------|------|------|---------|-------------|
+| `selectedValues` | model | `T[]` | `[]` | 선택된 칸반 아이템 값 배열 (two-way) |
+| `drop` | output | `SdKanbanBoardDropInfo<L, T>` | - | 드롭 완료 시 발생 |
+
+## Related Types
+
+### `SdKanban`
+
+칸반 아이템 컴포넌트.
+
+```typescript
+@Component({ selector: "sd-kanban" })
+class SdKanban<L, T> {
+  value = input<T>();
+  selectable = input(false, { transform: booleanAttribute });
+  draggable = input(false, { transform: booleanAttribute });
+  contentClass = input<string>();
+}
+```
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `value` | `T \| undefined` | `undefined` | 칸반 아이템의 값 |
+| `selectable` | `boolean` | `false` | 선택 가능 여부 |
+| `draggable` | `boolean` | `false` | 드래그 가능 여부 |
+| `contentClass` | `string \| undefined` | `undefined` | 컨텐츠 CSS 클래스 |
+
+### `SdKanbanLane`
+
+칸반 레인 컴포넌트.
+
+```typescript
+@Component({ selector: "sd-kanban-lane" })
+class SdKanbanLane<L, T> {
+  busy = input(false, { transform: booleanAttribute });
+  useCollapse = input(false, { transform: booleanAttribute });
+  collapse = model(false);
+  value = input<L>();
+}
+```
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `busy` | `boolean` | `false` | busy 상태 |
+| `useCollapse` | `boolean` | `false` | 접기 기능 사용 |
+| `collapse` | `boolean` | `false` | 접힘 상태 (two-way) |
+| `value` | `L \| undefined` | `undefined` | 레인의 값 |
+
+### `SdKanbanBoardDropInfo`
+
+```typescript
+interface SdKanbanBoardDropInfo<L, T> {
+  sourceKanbanValue?: T;
+  targetLaneValue?: L;
+  targetKanbanValue?: T;
+}
+```
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `sourceKanbanValue` | `T \| undefined` | 드래그한 칸반 아이템의 값 |
+| `targetLaneValue` | `L \| undefined` | 드롭 대상 레인의 값 |
+| `targetKanbanValue` | `T \| undefined` | 드롭 대상 칸반 아이템의 값 |
+
+### `SdKanbanDragRef`
+
+```typescript
+interface SdKanbanDragRef<_L, T> {
+  value(): T | undefined;
+  heightOnDrag(): number;
+}
+```
+
+### `SdKanbanDropTarget`
+
+```typescript
+interface SdKanbanDropTarget<L, T> {
+  targetLaneValue(): L | undefined;
+  targetKanbanValue?(): T | undefined;
+}
+```

package/claude/references/sd-simplysm-v14/angular/ui-layout/sd-kanban-lane.md

@@ -0,0 +1,34 @@
+# `SdKanbanLane`
+
+칸반 레인 컴포넌트. `SdKanbanBoard` 내부에 배치되며, `SdKanban` 아이템을 수직으로 나열한다.
+
+```typescript
+@Component({ selector: "sd-kanban-lane", ... })
+export class SdKanbanLane<L, T> implements SdKanbanDropTarget<L, T>
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `value` | input | `L \| undefined` | 이 레인의 값 |
+| `busy` | input | `boolean` | 로딩 표시 (기본값: `false`) |
+| `useCollapse` | input | `boolean` | 접기 기능 사용 (기본값: `false`) |
+| `collapse` | model | `boolean` | 접힘 상태 (기본값: `false`) |
+
+## Usage
+
+```html
+<sd-kanban-board [(selectedValues)]="selectedItems">
+  @for (lane of lanes; track lane.id) {
+    <sd-kanban-lane [value]="lane">
+      <ng-template #titleTpl>{{ lane.name }}</ng-template>
+      @for (item of lane.items; track item.id) {
+        <sd-kanban [value]="item" [draggable]="true">
+          {{ item.title }}
+        </sd-kanban>
+      }
+    </sd-kanban-lane>
+  }
+</sd-kanban-board>
+```