@simplysm/sd-claude 14.0.47 → 14.0.48

package/claude/references/sd-simplysm14/angular/docs/styling.md

@@ -1,222 +0,0 @@
-# Styling
-
-`dist/styles.css`로 컴파일되며, `package.json`의 `style` 필드에서 참조된다. CSS Layers: `@layer base, theme-variant, utilities`.
-
-## CSS Classes
-
-### Flexbox
-
-| Class | Description |
-|-------|-------------|
-| `.flex-row` | `display: flex; flex-direction: row; flex-wrap: nowrap` |
-| `.flex-column` | `display: flex; flex-direction: column; flex-wrap: nowrap` |
-| `.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-{1..12}` | `grid-template-columns: repeat(N, 1fr)` |
-| `.grid-sm-{1..12}` | `@media (max-width: 1280px)` 반응형 |
-| `.grid-xs-{1..12}` | `@media (max-width: 1024px)` 반응형 |
-| `.grid-xxs-{1..12}` | `@media (max-width: 800px)` 반응형 |
-
-### Layout
-
-| Class | Description |
-|-------|-------------|
-| `.card` | 카드 스타일 (배경, 테두리, 라운드, 엘리베이션) |
-| `.fill` | `height: 100%; width: 100%; overflow: auto` |
-| `.sticky-top` | `position: sticky; top: 0; z-index: 1` |
-| `.overflow-auto` | `overflow: auto` |
-| `.position-relative` | `position: relative` |
-| `.nowrap` | `white-space: nowrap` |
-
-### Form Layout
-
-| Class | Description |
-|-------|-------------|
-| `.form-box` | 폼 박스 레이아웃 |
-| `.form-box-inline` | 인라인 폼 박스 |
-| `.form-table` | 테이블 형태 폼 |
-| `.form-control` | 기본 폼 컨트롤 스타일 (padding, border, font) |
-| `.table` | 테이블 스타일 |
-| `.table-inset` | 테두리 없는 테이블 |
-| `.table-inline` | 인라인 테이블 |
-| `.table-bd-v` | 수직 테두리만 있는 테이블 |
-| `.table-bd-h` | 수평 테두리만 있는 테이블 |
-
-### Spacing
-
-키: `xxs`, `xs`, `sm`, `default`, `lg`, `xl`, `xxl`, `0`, `auto`
-
-| Pattern | Description |
-|---------|-------------|
-| `.p-{key}` | 전체 padding |
-| `.pv-{key}`, `.ph-{key}` | 수직/수평 padding |
-| `.pt-{key}`, `.pr-{key}`, `.pb-{key}`, `.pl-{key}` | 방향별 padding |
-| `.m-{key}` | 전체 margin |
-| `.mv-{key}`, `.mh-{key}` | 수직/수평 margin |
-| `.mt-{key}`, `.mr-{key}`, `.mb-{key}`, `.ml-{key}` | 방향별 margin |
-| `.gap-{key}` | flex/grid gap |
-| `.sw-{key}` | width 설정 |
-| `.sh-{key}` | height 설정 |
-| `.p-{key1}-{key2}` | `padding: {key1} {key2}` 조합 |
-
-### Font Size
-
-| Class | Description |
-|-------|-------------|
-| `.ft-size-{key}` | 폰트 크기 (h1~h6, sm, default, lg 등) |
-
-### Text
-
-| Class | Description |
-|-------|-------------|
-| `.tx-left`, `.tx-right`, `.tx-center` | 텍스트 정렬 |
-| `.tx-line-through` | 취소선 |
-| `.tx-underline` | 밑줄 |
-| `.tx-trans-{key}` | 텍스트 투명도 색상 |
-| `.tx-theme-{group}-{shade}` | 테마 텍스트 색상 |
-
-### Background
-
-| Class | Description |
-|-------|-------------|
-| `.bg-theme-{group}-{shade}` | 테마 배경 색상 |
-| `.bg-trans-{key}` | 투명도 배경 |
-| `.bg-default` | 기본 배경 |
-| `.bg-control` | 컨트롤 배경 |
-
-### Border
-
-| Class | Description |
-|-------|-------------|
-| `.bd` | 전체 테두리 |
-| `.bdt`, `.bdr`, `.bdb`, `.bdl` | 방향별 테두리 |
-| `.bd-theme-{group}-{shade}` | 테마 테두리 색상 |
-| `.bd-trans-{key}` | 투명도 테두리 |
-| `.bd-none`, `.bd-transparent` | 테두리 없음/투명 |
-| `.bd-radius-{key}` | 테두리 라운드 |
-| `.bd-width-{key}` | 테두리 두께 |
-
-### Alignment
-
-| Class | Description |
-|-------|-------------|
-| `.main-align-start`, `.main-align-end`, `.main-align-center` | justify-content |
-| `.cross-align-start`, `.cross-align-end`, `.cross-align-center` | align-items |
-
-### Special
-
-| Class | Description |
-|-------|-------------|
-| `.sh-topbar` | 탑바 높이 |
-| `.sw-sidebar` | 사이드바 너비 |
-| `.help` | 도움말 스타일 (점선 밑줄, 도움말 커서) |
-| `.control-header` | 컨트롤 헤더 텍스트 |
-| `.page-header` | 페이지 헤더 텍스트 |
-
-## CSS Custom Properties
-
-### Theme Colors
-
-OKLCH 기반 색상 팔레트. 각 그룹에 7단계 shade가 있다.
-
-테마 그룹: `gray`, `blue-gray`, `primary`, `secondary`, `info`, `success`, `warning`, `danger`
-
-| Property | Description |
-|----------|-------------|
-| `--theme-{group}-lightest` | 가장 밝은 색조 |
-| `--theme-{group}-lighter` | 더 밝은 색조 |
-| `--theme-{group}-light` | 밝은 색조 |
-| `--theme-{group}-default` | 기본 색조 |
-| `--theme-{group}-dark` | 어두운 색조 |
-| `--theme-{group}-darker` | 더 어두운 색조 |
-| `--theme-{group}-darkest` | 가장 어두운 색조 |
-
-### Layout
-
-| Property | Description |
-|----------|-------------|
-| `--background-color` | body 배경 색상 |
-| `--control-color` | 컨트롤 배경 색상 |
-| `--font-family` | 기본 폰트 패밀리 |
-| `--font-family-monospace` | 고정폭 폰트 패밀리 |
-| `--font-size-default` | 기본 폰트 크기 |
-| `--line-height` | 기본 줄 높이 |
-| `--border-radius-default` | 기본 테두리 라운드 |
-| `--topbar-height` | 탑바 높이 |
-| `--sidebar-width` | 사이드바 너비 |
-| `--elevation-size` | 그림자 기본 크기 |
-| `--animation-duration` | 애니메이션 지속 시간 |
-
-### Gap (Spacing)
-
-| Property | Description |
-|----------|-------------|
-| `--gap-xxs` | 가장 작은 간격 |
-| `--gap-xs` | 매우 작은 간격 |
-| `--gap-sm` | 작은 간격 |
-| `--gap-default` | 기본 간격 |
-| `--gap-lg` | 큰 간격 |
-| `--gap-xl` | 매우 큰 간격 |
-| `--gap-xxl` | 가장 큰 간격 |
-
-### Transparency
-
-| Property | Description |
-|----------|-------------|
-| `--trans-lightest` | 가장 투명한 반투명 |
-| `--trans-lighter` | 더 투명한 반투명 |
-| `--trans-light` | 투명한 반투명 |
-| `--trans-default` | 기본 반투명 |
-| `--trans-dark` | 불투명한 반투명 |
-| `--trans-darker` | 더 불투명한 반투명 |
-| `--trans-darkest` | 가장 불투명한 반투명 |
-
-### Text Transparency
-
-| Property | Description |
-|----------|-------------|
-| `--text-trans-default` | 기본 텍스트 색상 |
-| `--text-trans-light` | 밝은 텍스트 색상 |
-| `--text-trans-lighter` | 더 밝은 텍스트 색상 |
-| `--text-trans-dark` | 어두운 텍스트 색상 |
-
-## Themes
-
-### `.sd-theme-dark`
-
-다크 모드 테마. `SdThemeProvider.dark` signal로 body에 토글된다. `themes/_variables-dark.scss`에서 색상 팔레트를 반전한다.
-
-- 배경: 어두운 색상으로 전환
-- 텍스트: 밝은 색상으로 전환
-- `img:not(.no-invert)`: 이미지 자동 반전
-
-### Responsive Breakpoints
-
-SCSS 변수로 정의되어 media query에서 사용된다:
-
-| Variable | Value | Description |
-|----------|-------|-------------|
-| `$breakpoint-mobile` | `520px` | 모바일 |
-| `$breakpoint-xxs` | `800px` | 매우 작은 화면 |
-| `$breakpoint-xs` | `1024px` | 작은 화면 |
-| `$breakpoint-sm` | `1280px` | 중간 화면 |
-
-## Mixins / Functions
-
-| Name | Signature | Description |
-|------|-----------|-------------|
-| `writeVars` | `@mixin writeVars($value, $prevKey)` | 맵을 재귀 순회하여 CSS custom properties 생성 |
-| `elevation` | `@mixin elevation($value)` | box-shadow 기반 엘리베이션 효과. 양수=외부, 음수=내부, 0/none=없음 |
-| `form-control-base` | `@mixin form-control-base()` | 폼 컨트롤 기본 스타일 (display, padding, border, font) |
-| `help` | `@mixin help()` | 도움말 스타일 (점선 밑줄, 커서) |
-| `border-direction-variants` | `@mixin border-direction-variants($dir, $d)` | 방향별 테두리 유틸리티 클래스 생성 |
-| `flex-direction` | `@mixin flex-direction($direction, $defaultGap?)` | flex-direction 설정 + Chrome 61 gap 폴백 |

package/claude/references/sd-simplysm14/angular/docs/type-utilities.md

@@ -1,250 +0,0 @@
-# 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` | 정렬 키 |
-| `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` | 깊이 |
-
-## `SdSelectModal`
-
-모달 선택 컴포넌트가 구현해야 하는 인터페이스. `SdModalContentDef`를 확장.
-
-```typescript
-interface SdSelectModal<T> extends SdModalContentDef<SelectModalOutputResult<T>> {
-  selectMode: InputSignal<"single" | "multi" | undefined>;
-  selectedItemKeys: InputSignal<any[]>;
-}
-```
-
-## `SdSelectModalInfo`
-
-모달 선택 정보. `SdModalInfo`에서 selectMode/selectedItemKeys를 제외.
-
-```typescript
-type SdSelectModalInfo<T extends SdSelectModal<any>> = SdModalInfo<T, "selectMode" | "selectedItemKeys">
-```
-
-## `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 타입 매핑. `SdSelect`에서 export됨.
-
-```typescript
-type SelectModeValue<T> = {
-  multi: T[];
-  single: T;
-}
-```
-
-## `SdSidebarUserMenu`
-
-사이드바 사용자 메뉴 항목. `SdSidebarUser`에서 export됨.
-
-```typescript
-interface SdSidebarUserMenu {
-  title: string;
-  menus: {
-    title: string;
-    onClick: () => void;
-  }[];
-}
-```
-
-| Field | Type | Description |
-|-------|------|-------------|
-| `title` | `string` | 사용자 메뉴 제목 |
-| `menus` | `{ title: string; onClick: () => void }[]` | 하위 메뉴 항목 배열 |
-
-## `SdTopbarUserMenu`
-
-탑바 사용자 메뉴 항목. `SdTopbarUser`에서 export됨.
-
-```typescript
-interface SdTopbarUserMenu {
-  title: string;
-  onClick: () => void;
-}
-```
-
-| Field | Type | Description |
-|-------|------|-------------|
-| `title` | `string` | 메뉴 제목 |
-| `onClick` | `() => void` | 클릭 핸들러 |
-
-## `SdStatePresetDef`
-
-상태 프리셋 데이터. `SdStatePreset`에서 export됨.
-
-```typescript
-interface SdStatePresetDef {
-  name: string;
-  state: any;
-}
-```
-
-| Field | Type | Description |
-|-------|------|-------------|
-| `name` | `string` | 프리셋 이름 |
-| `state` | `any` | 저장된 상태 데이터 |
-
-## `SdKanbanBoardDropInfo`
-
-칸반 보드 드롭 정보. `SdKanbanBoard`에서 export됨.
-
-```typescript
-interface SdKanbanBoardDropInfo<L, T> {
-  sourceKanbanValue?: T;
-  targetLaneValue?: L;
-  targetKanbanValue?: T;
-}
-```
-
-| Field | Type | Description |
-|-------|------|-------------|
-| `sourceKanbanValue` | `T \| undefined` | 드래그한 칸반 아이템의 값 |
-| `targetLaneValue` | `L \| undefined` | 드롭 대상 레인의 값 |
-| `targetKanbanValue` | `T \| undefined` | 드롭 대상 칸반 아이템의 값 (칸반 위에 드롭 시) |
-
-## `SdKanbanDragRef`
-
-칸반 드래그 참조 인터페이스. `SdKanbanBoard`에서 export됨.
-
-```typescript
-interface SdKanbanDragRef<_L, T> {
-  value(): T | undefined;
-  heightOnDrag(): number;
-}
-```
-
-| Field | Type | Description |
-|-------|------|-------------|
-| `value()` | `T \| undefined` | 드래그 중인 칸반 아이템의 값 |
-| `heightOnDrag()` | `number` | 드래그 시작 시점의 요소 높이 |
-
-## `SdKanbanDropTarget`
-
-칸반 드롭 타겟 인터페이스. `SdKanbanBoard`에서 export됨.
-
-```typescript
-interface SdKanbanDropTarget<L, T> {
-  targetLaneValue(): L | undefined;
-  targetKanbanValue?(): T | undefined;
-}
-```
-
-| Field | Type | Description |
-|-------|------|-------------|
-| `targetLaneValue()` | `L \| undefined` | 드롭 대상 레인의 값 |
-| `targetKanbanValue?()` | `T \| undefined` | 드롭 대상 칸반 아이템의 값 (optional) |