@simplysm/sd-claude 14.0.50 → 14.0.52

package/claude/references/sd-simplysm-v14/angular/styling/classes.md

@@ -0,0 +1,149 @@
+# CSS Classes
+
+전역 유틸리티 CSS 클래스. `@layer base, theme-variant, utilities` 순서로 구성되며, 유틸리티 클래스는 `@layer utilities`에 정의된다.
+
+## Layout
+
+### Flex
+
+| Class | Description |
+|-------|-------------|
+| `.flex-row` | `display: flex; flex-direction: row` (기본 gap 없음) |
+| `.flex-column` | `display: flex; flex-direction: column` (기본 gap 없음) |
+| `.flex-row-inline` | `display: inline-flex; flex-direction: row` |
+| `.flex-column-inline` | `display: inline-flex; flex-direction: column` |
+| `.flex-fill` | `flex: 1 1 auto; overflow: auto` |
+| `.flex-auto` | `flex: 1 0 auto` |
+| `.flex-min` | `flex: 0 0 0` |
+
+### Grid
+
+| Class | Description |
+|-------|-------------|
+| `.grid` | `display: grid; grid-template-columns: repeat(12, 1fr)` |
+| `.grid-{1..12}` | `grid-column-end: span {n}` |
+| `.grid-sm-{1..12}` | `@media (max-width: 1280px)` 반응형 |
+| `.grid-xs-{1..12}` | `@media (max-width: 1024px)` 반응형 |
+| `.grid-xxs-{1..12}` | `@media (max-width: 800px)` 반응형 |
+
+### Alignment
+
+| Class | Description |
+|-------|-------------|
+| `.main-align-start` | `justify-content: start` |
+| `.main-align-end` | `justify-content: end` |
+| `.main-align-center` | `justify-content: center` |
+| `.cross-align-start` | `align-items: start` |
+| `.cross-align-end` | `align-items: end` |
+| `.cross-align-center` | `align-items: center` |
+
+## Spacing
+
+gap 키: `xxs`, `xs`, `sm`, `default`, `lg`, `xl`, `xxl`, `0`, `auto`
+
+| Pattern | Description |
+|---------|-------------|
+| `.p-{key}` | 전체 padding |
+| `.pv-{key}` | 수직 padding (top + bottom) |
+| `.ph-{key}` | 수평 padding (left + right) |
+| `.pt-{key}`, `.pr-{key}`, `.pb-{key}`, `.pl-{key}` | 방향별 padding |
+| `.m-{key}` | 전체 margin |
+| `.mv-{key}` | 수직 margin |
+| `.mh-{key}` | 수평 margin |
+| `.mt-{key}`, `.mr-{key}`, `.mb-{key}`, `.ml-{key}` | 방향별 margin |
+| `.gap-{key}` | flex/grid gap |
+| `.sw-{key}` | width |
+| `.sh-{key}` | height |
+| `.p-{key}-{key}` | padding: vertical horizontal |
+| `.m-{key}-{key}` | margin: vertical horizontal |
+| `.t-{key}`, `.r-{key}`, `.b-{key}`, `.l-{key}` | position offset (top, right, bottom, left) |
+
+## Card
+
+| Class | Description |
+|-------|-------------|
+| `.card` | 카드 컨테이너 (배경, 그림자, 진입 애니메이션) |
+
+## Form
+
+| Class | Description |
+|-------|-------------|
+| `.form-box` | 수직 폼 레이아웃 (`flex-direction: column`, gap `default`) |
+| `.form-box-inline` | 인라인 폼 레이아웃 (`inline-flex`, `flex-wrap: wrap`, gap `sm`) |
+| `.form-table` | 테이블 형태 폼 레이아웃 (`display: table`) |
+| `.form-table-header` | form-table 내 섹션 헤더 (`<th class="form-table-header">`) |
+| `.form-control` | 기본 폼 컨트롤 스타일 (padding, font, line-height) |
+
+## Table
+
+| Class | Description |
+|-------|-------------|
+| `.table` | 기본 테이블 스타일 (border, spacing) |
+| `.table-inset` | 외곽 border 제거 |
+| `.table-inline` | `width: auto` |
+| `.table-bd-v` | 수직 border만 제거 |
+| `.table-bd-h` | 수평 border만 제거 |
+
+## Display
+
+| Class | Description |
+|-------|-------------|
+| `.block` | `display: block` |
+| `.inline-block` | `display: inline-block` |
+| `.inline` | `display: inline` |
+| `.fill` | `height: 100%; width: 100%; overflow: auto` |
+| `.nowrap` | `white-space: nowrap` |
+| `.overflow-auto` | `overflow: auto` |
+| `.position-relative` | `position: relative` |
+| `.sticky-top` | `position: sticky; top: 0; z-index: 1` |
+
+## Text
+
+| Pattern | Description |
+|---------|-------------|
+| `.ft-size-{key}` | 폰트 크기 (key: h1, h2, h3, h4, h5, h6, lg, default, sm) |
+| `.tx-left`, `.tx-right`, `.tx-center` | text-align |
+| `.tx-line-through` | 취소선 |
+| `.tx-underline` | 밑줄 |
+| `.tx-trans-{key}` | 텍스트 투명도 색상 (key: dark, default, light, lighter, lightest, rev-default, rev-dark, rev-darker) |
+| `.tx-theme-{theme}-{shade}` | 테마별 텍스트 색상 |
+
+## Background
+
+| Pattern | Description |
+|---------|-------------|
+| `.bg-theme-{theme}-{shade}` | 테마별 배경색 |
+| `.bg-trans-{key}` | 투명도 배경색 |
+| `.bg-default` | 기본 배경색 (`--background-color`) |
+| `.bg-control` | 컨트롤 배경색 (`--control-color`) |
+
+## Border
+
+| Pattern | Description |
+|---------|-------------|
+| `.bd` | `border: 1px solid` |
+| `.bd-none` | `border: none` |
+| `.bd-transparent` | `border-color: transparent` |
+| `.bd-theme-{theme}-{shade}` | 테마별 border 색상 |
+| `.bd-trans-{key}` | 투명도 border 색상 |
+| `.bd-color-{key}` | border-color 변수 (key: lighter, light, default, dark, darker) |
+| `.bd{d}` | 방향별 border (d: t, r, b, l) |
+| `.bd{d}-theme-{theme}-{shade}` | 방향별 테마 border 색상 |
+| `.bd{d}-trans-{key}` | 방향별 투명도 border 색상 |
+| `.bd{d}-color-{key}` | 방향별 border-color 변수 |
+| `.bd{d}-none` | 방향별 border 제거 |
+| `.bd{d}-transparent` | 방향별 border 투명 |
+| `.bd-width-{key}` | border 두께 |
+| `.bd{d}-width-{key}` | 방향별 border 두께 |
+| `.bd-radius-{key}` | border-radius (key: xs, sm, default, lg, xl, xxl) |
+| `.bd{d}-radius-{key}` | 방향별 border-radius (d: t, b, l, r) |
+
+## Special
+
+| Class | Description |
+|-------|-------------|
+| `.help` | 도움말 스타일 (dotted underline, help cursor) |
+| `.control-header` | 컨트롤 헤더 (작은 폰트, 회색) |
+| `.page-header` | 페이지 헤더 (작은 폰트, 회색, 하단 여백) |
+| `.sh-topbar` | `height: var(--topbar-height)` |
+| `.sw-sidebar` | `width: var(--sidebar-width)` |

package/claude/references/sd-simplysm-v14/angular/styling/mixins.md

@@ -0,0 +1,100 @@
+# Mixins / Functions
+
+공개 SCSS mixin과 function. `scss/commons/_mixins.scss`에 정의된다.
+
+## Mixins
+
+### `writeVars($value, $prevKey)`
+
+SCSS 맵을 CSS 커스텀 프로퍼티로 변환하여 출력한다. 중첩 맵은 키를 `-`로 연결한다.
+
+```scss
+@include mixins.writeVars(variables.$vars, "");
+// 출력: --theme-gray-lightest: ...; --theme-gray-lighter: ...; ...
+```
+
+| Param | Type | Description |
+|-------|------|-------------|
+| `$value` | `map \| value` | 변환할 SCSS 맵 또는 값 |
+| `$prevKey` | `string` | 키 접두사 (루트 호출 시 `""`) |
+
+### `elevation($value)`
+
+Material Design 스타일 box-shadow를 적용한다.
+
+```scss
+@include mixins.elevation(4);  // 양수: 외부 그림자
+@include mixins.elevation(-2); // 음수: 내부(inset) 그림자
+@include mixins.elevation(0);  // 그림자 제거
+```
+
+| Param | Type | Description |
+|-------|------|-------------|
+| `$value` | `number` | 그림자 강도. 양수: 외부, 음수: 내부, 0/none: 제거 |
+
+### `form-control-base()`
+
+��본 폼 컨트롤 스타일. padding, font, line-height, color를 설정한다. 매개변수 없음.
+
+```scss
+@include mixins.form-control-base();
+// display: block; padding: var(--gap-sm) var(--gap-default);
+// font-size, font-family, font-variant-numeric, line-height, color
+```
+
+### `help()`
+
+도움말 스타일 (점선 밑줄 + help 커서). 매개변수 없음.
+
+```scss
+@include mixins.help();
+// text-decoration-line: underline; text-decoration-style: dotted; cursor: help;
+```
+
+### `border-direction-variants($dir, $d)`
+
+특정 방향의 border 유틸리티 클래스를 일괄 생성한다. 내부적으로 `_styles.scss`에서 4방향에 대해 호출된다.
+
+| Param | Type | Description |
+|-------|------|-------------|
+| `$dir` | `string` | CSS 방향 (`top`, `right`, `bottom`, `left`) |
+| `$d` | `string` | 약어 (`t`, `r`, `b`, `l`) |
+
+### `flex-direction($direction, $defaultGap?)`
+
+flex-direction과 gap을 설정한다. Chrome 84 이하(flex gap 미지원)를 위한 margin 폴백을 포함한다.
+
+```scss
+@include mixins.flex-direction(row, var(--gap-sm));
+// flex-direction: row; gap: var(--gap-sm);
+// + @supports not (appearance: auto) { gap: 0; > * + * { margin-left: ... } }
+```
+
+| Param | Type | Description |
+|-------|------|-------------|
+| `$direction` | `row \| column` | flex 방향 |
+| `$defaultGap` | `value \| null` | 기본 gap 값 (선택) |
+
+## Functions
+
+### `to-rgb($oklch-color)`
+
+OKLCH 색상을 RGB 색상 공간으로 변환한다. `_variables.scss`에 정의된다.
+
+```scss
+$blue: to-rgb(oklch(0.707 0.165 254.624));
+```
+
+### `color-map($base, $offset?)`
+
+기본 색상에서 7단계(lightest~darkest) shade 맵을 생성한다. `_variables.scss`에 정의된다.
+
+```scss
+$primary: color-map(map.get($colors, blue));
+// (lightest: ..., lighter: ..., light: ..., default: ..., dark: ..., darker: ..., darkest: ...)
+```
+
+| Param | Type | Description |
+|-------|------|-------------|
+| `$base` | `color` | 기본 색상 |
+| `$offset` | `percentage` | lightness 오프셋 (기본 `0%`) |

package/claude/references/sd-simplysm-v14/angular/styling/themes.md

@@ -0,0 +1,35 @@
+# Themes
+
+## `.sd-theme-dark`
+
+다크 모드 테마 클래스. `<body>`에 `SdThemeProvider`가 자동으로 토글한다.
+
+`@layer theme-variant`에 정의되며, `:root`의 CSS 커스텀 프로퍼티를 오버라이드한다.
+
+### 오버라이드 변수
+
+| Category | Description |
+|----------|-------------|
+| `--theme-{group}-{shade}` | 모든 테마 색상이 반전된다. lightest가 어두운 톤, darkest가 밝은 톤으로 변환 |
+| `--trans-*` | 투명도 값이 흰색 기반(`rgba(255,255,255,...)`)으로 변경 |
+| `--text-trans-*` | 텍스트 색상이 흰색 기반으로 변경 (`dark: white`, `default: rgba(255,255,255,0.87)` 등) |
+| `--border-color-*` | border 색상이 다크 테마 기준으로 변경 |
+| `--background-color` | `#000` |
+| `--background-rev-color` | `#fff` |
+| `--control-color` | `#000` |
+| `--busy-overlay-bg` | `rgba(0, 0, 0, 0.6)` |
+| `--sheet-bg` | 다크 테마 시트 배경 |
+
+### 이미지 반전
+
+```css
+.sd-theme-dark img:not(.no-invert) {
+  filter: invert(1) hue-rotate(180deg);
+}
+```
+
+다크 모드에서 모든 `<img>`가 자동 반전된다. 반전을 원하지 않는 이미지에 `class="no-invert"`를 추가한다.
+
+### 활성화
+
+`SdThemeProvider.dark` signal이 `true`일 때 `<body>`에 `.sd-theme-dark` 클래스가 추가된다. `provideSdAngular`가 localStorage와 자동 동기화한다.

package/claude/references/sd-simplysm-v14/angular/styling/variables.md

@@ -0,0 +1,147 @@
+# CSS Custom Properties
+
+`:root`에 선언되는 CSS 커스텀 프로퍼티. SCSS `$vars` 맵에서 `mixins.writeVars()`로 생성된다.
+
+## Theme Colors
+
+OKLCH 기반 17+5 색상 팔레트. 각 테마 그룹에 7단계 shade가 존재한다.
+
+**테마 그룹**: gray, blue-gray, primary, secondary, info, success, warning, danger
+
+**Shade 단계**: lightest (+90%), lighter (+75%), light (+60%), default, dark (-10%), darker (-25%), darkest (-40%)
+
+| Property Pattern | Description |
+|------------------|-------------|
+| `--theme-{group}-lightest` | 가장 밝은 단계 |
+| `--theme-{group}-lighter` | 밝은 단계 |
+| `--theme-{group}-light` | 약간 밝은 단계 |
+| `--theme-{group}-default` | 기본 단계 |
+| `--theme-{group}-dark` | 약간 어두운 단계 |
+| `--theme-{group}-darker` | 어두운 단계 |
+| `--theme-{group}-darkest` | 가장 어두운 단계 |
+
+**기본 색상 매핑** (OKLCH):
+
+| Theme Group | Base Color |
+|-------------|------------|
+| gray | `oklch(0.707 0.022 261.325)` (gray) |
+| blue-gray | `oklch(0.704 0.04 256.788)` (slate) |
+| primary | `oklch(0.707 0.165 254.624)` (blue) |
+| secondary | `oklch(0.707 0.165 254.624)` (blue) |
+| info | `oklch(0.789 0.154 211.53)` (cyan) |
+| success | `oklch(0.841 0.238 128.85)` (lime) |
+| warning | `oklch(0.75 0.183 55.934)` (orange) |
+| danger | `oklch(0.704 0.191 22.216)` (red) |
+
+## Transparency
+
+| Property | Default | Description |
+|----------|---------|-------------|
+| `--trans-darkest` | `rgba(0, 0, 0, 0.5)` | 가장 어두운 투명 |
+| `--trans-darker` | `rgba(0, 0, 0, 0.4)` | |
+| `--trans-dark` | `rgba(0, 0, 0, 0.3)` | |
+| `--trans-default` | `rgba(0, 0, 0, 0.2)` | |
+| `--trans-light` | `rgba(0, 0, 0, 0.1)` | |
+| `--trans-lighter` | `rgba(0, 0, 0, 0.05)` | |
+| `--trans-lightest` | `rgba(0, 0, 0, 0.03)` | |
+| `--trans-rev-default` | `rgba(255, 255, 255, 0.1)` | 역방향 투명 |
+| `--trans-rev-light` | `rgba(255, 255, 255, 0.2)` | |
+| `--trans-rev-lighter` | `rgba(255, 255, 255, 0.3)` | |
+| `--trans-rev-lightest` | `rgba(255, 255, 255, 0.4)` | |
+
+## Text Colors
+
+| Property | Default | Description |
+|----------|---------|-------------|
+| `--text-trans-dark` | `black` | 강조 텍스트 |
+| `--text-trans-default` | `rgba(0, 0, 0, 0.87)` | 기본 텍스트 |
+| `--text-trans-light` | `rgba(0, 0, 0, 0.6)` | 보조 텍스트 |
+| `--text-trans-lighter` | `rgba(0, 0, 0, 0.38)` | 비활성 텍스트 |
+| `--text-trans-lightest` | `rgba(0, 0, 0, 0.2)` | 최소 텍스트 |
+| `--text-trans-rev-default` | `white` | 역방향 기본 텍스트 |
+| `--text-trans-rev-dark` | `rgba(255, 255, 255, 0.7)` | 역방향 강조 텍스트 |
+| `--text-trans-rev-darker` | `rgba(255, 255, 255, 0.5)` | 역방향 더 강조 |
+
+## Font Size
+
+| Property | Default | Description |
+|----------|---------|-------------|
+| `--font-size-h1` | `2rem` | h1 |
+| `--font-size-h2` | `1.5rem` | h2 |
+| `--font-size-h3` | `1.3333rem` | h3 |
+| `--font-size-h4` | `1.1667rem` | h4 |
+| `--font-size-h5` | `1rem` | h5 |
+| `--font-size-h6` | `0.9167rem` | h6 |
+| `--font-size-lg` | `1.1667rem` | 큰 폰트 |
+| `--font-size-default` | `1rem` | 기본 폰트 |
+| `--font-size-sm` | `0.9167rem` | 작은 폰트 |
+
+## Gap (Spacing)
+
+| Property | Default | Description |
+|----------|---------|-------------|
+| `--gap-xxs` | `0.0833rem` | 초소형 |
+| `--gap-xs` | `0.1667rem` | 소형 |
+| `--gap-sm` | `0.3333rem` | 중소형 |
+| `--gap-default` | `0.5rem` | 기본 |
+| `--gap-lg` | `0.6667rem` | 중대형 |
+| `--gap-xl` | `1rem` | 대형 |
+| `--gap-xxl` | `1.5rem` | 초대형 |
+| `--gap-0` | `0` | 없음 |
+| `--gap-auto` | `auto` | 자동 |
+
+## Border
+
+| Property | Default | Description |
+|----------|---------|-------------|
+| `--border-color-lighter` | `var(--theme-gray-lightest)` | 가장 밝은 border |
+| `--border-color-light` | `var(--theme-gray-lighter)` | 밝은 border |
+| `--border-color-default` | `var(--theme-gray-light)` | 기본 border |
+| `--border-color-dark` | `var(--theme-gray-default)` | 어두운 border |
+| `--border-color-darker` | `var(--theme-gray-dark)` | 가장 어두운 border |
+| `--border-radius-xs` | `var(--gap-xxs)` | |
+| `--border-radius-sm` | `var(--gap-xs)` | |
+| `--border-radius-default` | `var(--gap-sm)` | |
+| `--border-radius-lg` | `var(--gap-default)` | |
+| `--border-radius-xl` | `var(--gap-lg)` | |
+| `--border-radius-xxl` | `var(--gap-xl)` | |
+
+## Layout & Z-Index
+
+| Property | Default | Description |
+|----------|---------|-------------|
+| `--line-height` | `1.5em` | 기본 line-height |
+| `--font-family` | `sans-serif` | 기본 폰트 패밀리 |
+| `--font-family-monospace` | `monospace` | 코드 폰트 패밀리 |
+| `--background-color` | `white` | 페이지 배경색 |
+| `--background-rev-color` | `black` | 역방향 배경색 |
+| `--control-color` | `white` | 컨트롤 배경색 |
+| `--busy-overlay-bg` | `rgba(255, 255, 255, 0.6)` | busy 오버레이 배경 |
+| `--animation-duration` | `0.2s` | 애니메이션 지속 시간 |
+| `--elevation-size` | `0.0833rem` | elevation 단위 |
+| `--sidebar-width` | `15em` | 사이드바 너비 |
+| `--topbar-height` | `3em` | 탑바 높이 |
+| `--z-index-toast` | `9999` | 토스트 z-index |
+| `--z-index-busy` | `9998` | busy z-index |
+| `--z-index-dropdown` | `5000` | 드롭다운 z-index |
+| `--z-index-modal` | `4000` | 모달 z-index |
+| `--z-index-sidebar` | `3000` | 사이드바 z-index |
+
+## Sheet
+
+| Property | Default | Description |
+|----------|---------|-------------|
+| `--sheet-pv` | `var(--gap-xs)` | 시트 셀 수직 padding |
+| `--sheet-ph` | `var(--gap-sm)` | 시트 셀 수평 padding |
+| `--sheet-bg` | `var(--theme-gray-lightest)` | 시트 배경색 |
+
+## Breakpoints (SCSS 전용)
+
+CSS 커스텀 프로퍼티가 아닌 SCSS 변수. media query에서 사용된다.
+
+| Variable | Value | Description |
+|----------|-------|-------------|
+| `$breakpoint-mobile` | `520px` | 모바일 |
+| `$breakpoint-xxs` | `800px` | 초소형 |
+| `$breakpoint-xs` | `1024px` | 소형 |
+| `$breakpoint-sm` | `1280px` | 중소형 |

package/claude/references/sd-simplysm-v14/angular/type-utilities/directive-input-signals.md

@@ -0,0 +1,232 @@
+# Type Utilities
+
+컴포넌트/디렉티브 입력 시그널 타입 추출 유틸리티 모음.
+
+## `DirectiveInputSignals`
+
+컴포넌트/디렉티브의 InputSignal 프로퍼티에서 값 타입을 추출하는 유틸리티 타입. InputSignal이 아닌 프로퍼티는 제외되며, undefined를 포함하는 필드는 optional로 변환된다.
+
+```typescript
+type DirectiveInputSignals<T> = UndefToOptional<{
+  [P in keyof T as T[P] extends InputSignal<any> ? P : never]: T[P] extends InputSignal<infer V> ? V : never;
+}>
+```
+
+### 예시
+
+```typescript
+class MyComponent {
+  name = input.required<string>();
+  age = input(0);
+}
+// DirectiveInputSignals<MyComponent> = { name: string; age: number }
+```
+
+## `UndefToOptional`
+
+undefined를 포함하는 프로퍼티를 optional로 변환하는 유틸리티 타입.
+
+```typescript
+type UndefToOptional<T> = {
+  [K in keyof T as undefined extends T[K] ? never : K]: T[K];
+} & {
+  [K in keyof T as undefined extends T[K] ? K : never]?: Exclude<T[K], undefined>;
+}
+```
+
+예시: `{ name: string; age: number | undefined }` → `{ name: string; age?: number }`
+
+## `WithOptional`
+
+특정 키를 optional로 변환하는 유틸리티 타입.
+
+```typescript
+type WithOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>
+```
+
+## `SdViewType`
+
+뷰 타입.
+
+```typescript
+type SdViewType = "page" | "modal" | "control"
+```
+
+## `SortingDef`
+
+정렬 정의.
+
+```typescript
+interface SortingDef {
+  key: string;
+  desc: boolean;
+}
+```
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `key` | `string` | 정렬 키. **컬럼 `key`가 `"vendor.name"`, `"lot.goods.code"` 같은 체인 경로일 수 있다.** 정렬 처리 시 `item[key]` 단순 접근 대신 `obj.getChainValue(item, key)` (from `@simplysm/core-common`)를 사용해야 한다 |
+| `desc` | `boolean` | 내림차순 여부 |
+
+## `ExpandItemDef`
+
+트리 확장 항목 정의.
+
+```typescript
+interface ExpandItemDef<T> {
+  item: T;
+  parentDef: ExpandItemDef<T> | undefined;
+  hasChildren: boolean;
+  depth: number;
+}
+```
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `item` | `T` | 항목 |
+| `parentDef` | `ExpandItemDef<T> \| undefined` | 부모 정의 |
+| `hasChildren` | `boolean` | 자식 존재 여부 |
+| `depth` | `number` | 깊이 |
+
+## `SdTextfieldTypes`
+
+텍스트필드 타입별 값 타입 매핑.
+
+```typescript
+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;
+}
+```
+
+## `sdTextfieldTypes`
+
+텍스트필드 타입 문자열 배열.
+
+```typescript
+const sdTextfieldTypes: (keyof SdTextfieldTypes)[] = [
+  "number", "text", "password", "color", "email", "format",
+  "date", "month", "year", "datetime", "datetime-sec", "time", "time-sec",
+]
+```
+
+## `SelectModeValue`
+
+select mode별 value 타입 매핑.
+
+```typescript
+type SelectModeValue<T> = {
+  multi: T[];
+  single: T;
+}
+```
+
+## `SdSidebarUserMenu`
+
+사이드바 사용자 메뉴 항목.
+
+```typescript
+interface SdSidebarUserMenu {
+  title: string;
+  menus: {
+    title: string;
+    onClick: () => void;
+  }[];
+}
+```
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `title` | `string` | 사용자 메뉴 제목 |
+| `menus` | `{ title: string; onClick: () => void }[]` | 하위 메뉴 항목 배열 |
+
+## `SdTopbarUserMenu`
+
+탑바 사용자 메뉴 항목.
+
+```typescript
+interface SdTopbarUserMenu {
+  title: string;
+  onClick: () => void;
+}
+```
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `title` | `string` | 메뉴 제목 |
+| `onClick` | `() => void` | 클릭 핸들러 |
+
+## `SdStatePresetDef`
+
+상태 프리셋 데이터.
+
+```typescript
+interface SdStatePresetDef {
+  name: string;
+  state: any;
+}
+```
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `name` | `string` | 프리셋 이름 |
+| `state` | `any` | 저장된 상태 데이터 |
+
+## Kanban Types
+
+### `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;
+}
+```
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `value()` | `T \| undefined` | 드래그 중인 칸반 아이템의 값 |
+| `heightOnDrag()` | `number` | 드래그 시작 시점의 요소 높이 |
+
+### `SdKanbanDropTarget`
+
+```typescript
+interface SdKanbanDropTarget<L, T> {
+  targetLaneValue(): L | undefined;
+  targetKanbanValue?(): T | undefined;
+}
+```
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `targetLaneValue()` | `L \| undefined` | 드롭 대상 레인의 값 |
+| `targetKanbanValue?()` | `T \| undefined` | 드롭 대상 칸반 아이템의 값 (optional) |

package/claude/references/sd-simplysm-v14/angular/ui-data/sd-list.md

@@ -0,0 +1,37 @@
+# `SdList`
+
+리스트 컴포넌트.
+
+```typescript
+@Component({ selector: "sd-list" })
+class SdList {
+  inset = input(false, { transform: booleanAttribute });
+}
+```
+
+## Members
+
+| Member | Kind | Type | Default | Description |
+|--------|------|------|---------|-------------|
+| `inset` | input | `boolean` | `false` | 삽입 스타일 (테두리 없음) |
+
+## Related Types
+
+### `SdListItem`
+
+리스트 항목 컴포넌트. 접기/펼치기 자식 리스트를 지원한다.
+
+```typescript
+@Component({ selector: "sd-list-item" })
+class SdListItem {
+  open = model(false);
+  selected = input(false, { transform: booleanAttribute });
+  readonly = input(false, { transform: booleanAttribute });
+}
+```
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `open` | `boolean` | `false` | 자식 리스트 펼침 (two-way) |
+| `selected` | `boolean` | `false` | 선택 상태 |
+| `readonly` | `boolean` | `false` | 읽기 전용 |