@simplysm/angular 14.0.49 → 14.0.51

package/docs/bootstrap/provide-sd-angular.md

@@ -0,0 +1,37 @@
+# `provideSdAngular`
+
+모든 기반 설정을 제공하는 환경 프로바이더 팩토리. `bootstrapApplication`의 `providers`에 추가한다.
+
+```typescript
+function provideSdAngular(opt: { clientName: string }): EnvironmentProviders
+```
+
+## Parameters
+
+| Param | Type | Description |
+|-------|------|-------------|
+| `opt.clientName` | `string` | 클라이언트 이름 (localStorage 키 접두사 등에 사용) |
+
+## 제공하는 기능
+
+- `provideZonelessChangeDetection()` — Zone 없는 변경 감지
+- `IMAGE_CONFIG` — 이미지 크기/지연 로딩 경고 비활성화
+- `provideNgIconsConfig({ strokeWidth: 1.5, size: "1.33em" })`
+- `SdOptionEventPlugin` 등록 (`EVENT_MANAGER_PLUGINS` multi-provider) — `.capture`/`.passive`/`.once` 이벤트 수식어
+- `SdGlobalErrorHandlerPlugin` — 글로벌 에러 핸들러
+- 테마 초기화 (localStorage 동기화, body 클래스 토글)
+- Service Worker 업데이트 폴링 (5분 간격, 실패 시 exponential backoff, 최대 1시간)
+- 라우터 네비게이션 busy 상태 추적 (`SdBusyProvider.globalBusyCount` signal 증감)
+
+## Usage
+
+```typescript
+import { provideSdAngular } from "@simplysm/angular";
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideSdAngular({ clientName: "my-app" }),
+    provideRouter(routes),
+  ],
+});
+```

package/docs/bootstrap/sd-angular-config-provider.md

@@ -0,0 +1,16 @@
+# `SdAngularConfigProvider`
+
+`clientName` 설정을 보유하는 프로바이더. [`provideSdAngular`](./provide-sd-angular.md)에서 자동 설정된다.
+
+```typescript
+@Injectable({ providedIn: "root" })
+class SdAngularConfigProvider {
+  clientName!: string;
+}
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `clientName` | property | `string` | 클라이언트 이름 |

package/docs/directives/sd-command-directive.md

@@ -0,0 +1,30 @@
+# `SdCommandDirective`
+
+키보드 단축키를 output 이벤트로 제공하는 디렉티브. `document` keydown을 감지하며, `shouldProcessCommandEvent()`로 최상위 모달만 이벤트 처리한다.
+
+```typescript
+@Directive({ selector: "[sdRefreshCommand],[sdSaveCommand],[sdInsertCommand]" })
+class SdCommandDirective {
+  sdRefreshCommand = output<KeyboardEvent>(); // Ctrl+Alt+L
+  sdSaveCommand = output<KeyboardEvent>();    // Ctrl+S
+  sdInsertCommand = output<KeyboardEvent>();  // Ctrl+Insert
+}
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `sdRefreshCommand` | output | `KeyboardEvent` | Ctrl+Alt+L 단축키 이벤트 |
+| `sdSaveCommand` | output | `KeyboardEvent` | Ctrl+S 단축키 이벤트 |
+| `sdInsertCommand` | output | `KeyboardEvent` | Ctrl+Insert 단축키 이벤트 |
+
+## Usage
+
+```html
+<div
+  (sdSaveCommand)="onSave($event)"
+  (sdRefreshCommand)="onRefresh($event)"
+  (sdInsertCommand)="onInsert($event)"
+></div>
+```

package/docs/directives/sd-events.md

@@ -0,0 +1,25 @@
+# `SdEvents`
+
+`.capture`, `.passive`, `.once` 수식어 및 커스텀 이벤트 바인딩을 지원하는 디렉티브. Angular 템플릿에서 해당 이벤트를 사용할 때 자동 매칭된다.
+
+```typescript
+@Directive({
+  selector: `[click.capture], [scroll.passive], ...`,
+})
+class SdEvents {}
+```
+
+## 지원 이벤트
+
+- 클릭: `click.capture`, `click.once`, `click.capture.once`
+- 마우스: `mousedown.capture`, `mouseup.capture`, `mouseover.capture`, `mouseout.capture`
+- 키보드: `keydown.capture`, `keyup.capture`
+- 포커스: `focus.capture`, `blur.capture`
+- 폼: `invalid.capture`
+- 스크롤: `scroll.capture`, `scroll.passive`, `scroll.capture.passive`
+- 휠: `wheel.passive`, `wheel.capture.passive`
+- 터치: `touchstart.passive`, `touchstart.capture.passive`, `touchmove.passive`, `touchmove.capture.passive`, `touchend.passive`
+- 드래그: `dragover.capture`, `dragenter.capture`, `dragleave.capture`, `drop.capture`
+- 애니메이션: `transitionend.once`, `animationend.once`
+
+> **NOTE:** `sdResize`, `sdSaveCommand`, `sdRefreshCommand`, `sdInsertCommand`는 `SdEvents`에서 분리되어 각각 [`SdResizeDirective`](./sd-resize-directive.md), [`SdIntersectionDirective`](./sd-intersection-directive.md), [`SdCommandDirective`](./sd-command-directive.md)로 독립 디렉티브로 제공된다.

package/docs/directives/sd-intersection-directive.md

@@ -0,0 +1,36 @@
+# `SdIntersectionDirective`
+
+IntersectionObserver 기반 intersection output 이벤트 디렉티브.
+
+```typescript
+@Directive({ selector: "[sdIntersection]" })
+class SdIntersectionDirective {
+  sdIntersection = output<SdIntersectionEvent>();
+}
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `sdIntersection` | output | `SdIntersectionEvent` | 뷰포트와의 교차 변경 시 발생 |
+
+## Related Types
+
+### `SdIntersectionEvent`
+
+```typescript
+interface SdIntersectionEvent {
+  entry: IntersectionObserverEntry;
+}
+```
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `entry` | `IntersectionObserverEntry` | 마지막 IntersectionObserver 엔트리 |
+
+## Usage
+
+```html
+<div (sdIntersection)="onIntersect($event)"></div>
+```

package/docs/directives/sd-invalid.md

@@ -0,0 +1,24 @@
+# `SdInvalid`
+
+호스트 요소에 유효성 검증 표시기를 추가하는 디렉티브. 빨간 점 표시기와 숨겨진 input으로 구성.
+
+```typescript
+@Directive({ selector: "[sdInvalid]" })
+class SdInvalid {
+  invalidMessage = input.required<string>({ alias: "sdInvalid" });
+}
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `invalidMessage` (`sdInvalid`) | input (required) | `string` | 유효성 오류 메시지. 빈 문자열이면 유효, 비어있지 않으면 무효 |
+
+## Usage
+
+```html
+<div [sdInvalid]="name이 비어있습니다">
+  <!-- 메시지가 있으면 빨간 점 표시기 노출 -->
+</div>
+```

package/docs/directives/sd-resize-directive.md

@@ -0,0 +1,42 @@
+# `SdResizeDirective`
+
+ResizeObserver 기반 resize output 이벤트 디렉티브. `requestAnimationFrame`으로 디바운스.
+
+```typescript
+@Directive({ selector: "[sdResize]" })
+class SdResizeDirective {
+  sdResize = output<SdResizeEvent>();
+}
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `sdResize` | output | `SdResizeEvent` | 요소 크기 변경 시 발생 |
+
+## Related Types
+
+### `SdResizeEvent`
+
+```typescript
+interface SdResizeEvent {
+  heightChanged: boolean;
+  widthChanged: boolean;
+  target: HTMLElement;
+  contentRect: DOMRectReadOnly;
+}
+```
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `heightChanged` | `boolean` | 높이 변경 여부 |
+| `widthChanged` | `boolean` | 너비 변경 여부 |
+| `target` | `HTMLElement` | 대상 요소 |
+| `contentRect` | `DOMRectReadOnly` | 컨텐츠 영역 크기 |
+
+## Usage
+
+```html
+<div (sdResize)="onResize($event)"></div>
+```

package/docs/directives/sd-ripple.md

@@ -0,0 +1,23 @@
+# `SdRipple`
+
+호스트 요소에 리플 효과를 추가하는 디렉티브.
+
+```typescript
+@Directive({ selector: "[sdRipple]" })
+class SdRipple {
+  enabled = input.required({ alias: "sdRipple", transform: booleanAttribute });
+}
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `enabled` (`sdRipple`) | input (required) | `boolean` | 리플 효과 활성화 여부 |
+
+## Usage
+
+```html
+<div [sdRipple]="true">리플 효과 있음</div>
+<div sdRipple>리플 효과 있음 (boolean attribute)</div>
+```

package/docs/directives/sd-router-link.md

@@ -0,0 +1,38 @@
+# `SdRouterLink`
+
+라우터 네비게이션 디렉티브. 일반 클릭은 라우터 네비게이션, Ctrl/Shift+클릭은 새 창, 팝업 윈도우에서는 팝업 형태로 열린다.
+
+```typescript
+@Directive({
+  selector: "[sdRouterLink]",
+  host: {
+    "[style.cursor]": "option() ? 'pointer' : ''",
+    "(click)": "onClick($event)",
+  },
+})
+class SdRouterLink {
+  option = input<{
+    link: string;
+    params?: Record<string, string>;
+    window?: { width?: number; height?: number };
+    outletName?: string;
+    queryParams?: Record<string, string>;
+  } | undefined>(undefined, { alias: "sdRouterLink" });
+}
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `option` (`sdRouterLink`) | input | `{ link, params?, window?, outletName?, queryParams? } \| undefined` | 라우터 링크 옵션 |
+
+## Option Fields
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `link` | `string` | 네비게이션 경로 |
+| `params` | `Record<string, string> \| undefined` | 라우터 파라미터 |
+| `window` | `{ width?, height? } \| undefined` | 팝업 윈도우 크기 (설정 시 팝업으로 열림) |
+| `outletName` | `string \| undefined` | named outlet |
+| `queryParams` | `Record<string, string> \| undefined` | 쿼리 파라미터 |

package/docs/directives/sd-show-effect.md

@@ -0,0 +1,18 @@
+# `SdShowEffect`
+
+뷰포트에 진입할 때 reveal 애니메이션을 적용하는 디렉티브. IntersectionObserver 사용.
+
+```typescript
+@Directive({ selector: "[sdShowEffect]" })
+class SdShowEffect {
+  enabled = input.required({ alias: "sdShowEffect", transform: booleanAttribute });
+  sdShowEffectType = input<"l2r" | "t2b">("t2b");
+}
+```
+
+## Members
+
+| Member | Kind | Type | Default | Description |
+|--------|------|------|---------|-------------|
+| `enabled` (`sdShowEffect`) | input (required) | `boolean` | - | 효과 활성화 여부 |
+| `sdShowEffectType` | input | `"l2r" \| "t2b"` | `"t2b"` | 애니메이션 방향 (좌→우 / 위→아래) |

package/docs/directives/sd-typed-template.md

@@ -0,0 +1,69 @@
+# `SdTypedTemplate`
+
+`ng-template`의 컨텍스트 타입을 지정하는 디렉티브. 타입 가드를 통해 템플릿 내부에서 정확한 타입을 사용할 수 있다.
+
+```typescript
+@Directive({ selector: "ng-template[typed]" })
+class SdTypedTemplate<T> {
+  typed = input.required<T>();
+
+  static ngTemplateContextGuard<TypeToken>(
+    _dir: SdTypedTemplate<TypeToken>,
+    _ctx: unknown,
+  ): _ctx is TypeToken;
+}
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `typed` | input (required) | `T` | 컨텍스트 타입 토큰 |
+
+## Related Types
+
+### `SdItemOfTemplate`
+
+항목 반복 템플릿의 컨텍스트 타입을 지정하는 디렉티브.
+
+```typescript
+@Directive({ selector: "ng-template[itemOf]" })
+class SdItemOfTemplate<TItem> {
+  itemOf = input.required<TItem[]>();
+
+  static ngTemplateContextGuard<TContextItem>(
+    _dir: SdItemOfTemplate<TContextItem>,
+    _ctx: unknown,
+  ): _ctx is SdItemOfTemplateContext<TContextItem>;
+}
+```
+
+### `SdItemOfTemplateContext`
+
+```typescript
+interface SdItemOfTemplateContext<TItem> {
+  $implicit: TItem;
+  item: TItem;
+  index: number;
+  depth: number;
+}
+```
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `$implicit` | `TItem` | 현재 항목 (let-item으로 접근) |
+| `item` | `TItem` | 현재 항목 (명시적 접근) |
+| `index` | `number` | 인덱스 |
+| `depth` | `number` | 깊이 (트리 구조에서 사용) |
+
+## Usage
+
+```html
+<ng-template [typed]="typedVar" let-item>
+  <!-- item의 타입이 typeof typedVar -->
+</ng-template>
+
+<ng-template [itemOf]="items()" let-item let-index="index">
+  {{ item.name }}
+</ng-template>
+```

package/docs/features/sd-address-search-modal.md

@@ -0,0 +1,50 @@
+# `SdAddressSearchModal`
+
+Daum Postcode API를 사용한 주소 검색 모달. `SdModalContentDef<Address>`를 구현한다.
+
+```typescript
+@Component({ selector: "sd-address-search-modal" })
+class SdAddressSearchModal implements SdModalContentDef<Address>, OnInit {
+  close = output<Address>();
+  initialized = signal(false);
+}
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `close` | output | `Address` | 주소 선택 완료 시 발생 |
+| `initialized` | signal | `boolean` | 초기화 완료 여부 |
+
+## Related Types
+
+### `Address`
+
+```typescript
+interface Address {
+  postNumber: string | undefined;
+  address: string | undefined;
+  buildingName: string | undefined;
+}
+```
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `postNumber` | `string \| undefined` | 우편번호 |
+| `address` | `string \| undefined` | 주소 |
+| `buildingName` | `string \| undefined` | 건물명 |
+
+## Usage
+
+```typescript
+const result = await this._sdModal.showAsync({
+  title: "주소 검색",
+  type: SdAddressSearchModal,
+  inputs: {},
+});
+if (result != null) {
+  this.data().address = result.address;
+  mark(this.data);
+}
+```

package/docs/features/sd-permission-table.md

@@ -0,0 +1,20 @@
+# `SdPermissionTable`
+
+권한 매트릭스 테이블. `SdPermission` 트리를 테이블로 렌더링하여 use/edit 체크박스를 표시한다.
+
+```typescript
+@Component({ selector: "sd-permission-table" })
+class SdPermissionTable<TModule = unknown> {
+  value = model<Record<string, boolean>>({});
+  items = input<SdPermission<TModule>[]>([]);
+  disabled = input(false, { transform: booleanAttribute });
+}
+```
+
+## Members
+
+| Member | Kind | Type | Default | Description |
+|--------|------|------|---------|-------------|
+| `value` | model | `Record<string, boolean>` | `{}` | 권한 레코드 (two-way). 키는 `codeChain.join(".") + ".use"` 또는 `".edit"` 형태 |
+| `items` | input | `SdPermission<TModule>[]` | `[]` | 권한 트리 |
+| `disabled` | input | `boolean` | `false` | 비활성화 |

package/docs/features/sd-shared-data-components.md

@@ -0,0 +1,158 @@
+# Shared Data Components
+
+공유 데이터(`SdSharedDataProvider`)와 연동하는 UI 컴포넌트 모음.
+
+## `SdSharedDataSelect`
+
+공유 데이터 드롭다운 선택 컴포넌트. 검색 기능 포함.
+
+```typescript
+@Component({ selector: "sd-shared-data-select" })
+class SdSharedDataSelect<
+  TItem extends SharedDataBase<string | number>,
+  TMode extends keyof SelectModeValue<...>,
+  TModal extends SdSelectModal<any>
+> {
+  value = model<SelectModeValue<TItem["__valueKey"] | undefined>[TMode]>();
+  items = input.required<TItem[]>();
+  disabled = input(false, { transform: booleanAttribute });
+  required = input(false, { transform: booleanAttribute });
+  useUndefined = input(false, { transform: booleanAttribute });
+  inset = input(false, { transform: booleanAttribute });
+  inline = input(false, { transform: booleanAttribute });
+  size = input<"sm" | "lg">();
+  selectMode = input("single" as TMode);
+  filterFn = input<(item: TItem, index: number, ...params: any[]) => boolean>();
+  filterFnParams = input<any[]>();
+  modal = input<SdSelectModalInfo<TModal>>();
+  editModal = input<SdModalInfo<SdModalContentDef<boolean>>>();
+  selectClass = input<string>();
+  multiSelectionDisplayDirection = input<"vertical">();
+  getIsHiddenFn = input<(item: TItem, index: number) => boolean>();
+  getSearchTextFn = input<(item: TItem, index: number) => string>();
+  displayOrderKeyProp = input<string>();
+}
+```
+
+### Members
+
+| Member | Kind | Type | Default | Description |
+|--------|------|------|---------|-------------|
+| `value` | model | `SelectModeValue<TItem["__valueKey"] \| undefined>[TMode]` | - | 선택된 값 (two-way) |
+| `items` | input (required) | `TItem[]` | - | 공유 데이터 항목 |
+| `disabled` | input | `boolean` | `false` | 비활성화 |
+| `required` | input | `boolean` | `false` | 필수 |
+| `useUndefined` | input | `boolean` | `false` | undefined 항목 포함 |
+| `inset` | input | `boolean` | `false` | 삽입 스타일 |
+| `inline` | input | `boolean` | `false` | 인라인 표시 |
+| `size` | input | `"sm" \| "lg" \| undefined` | `undefined` | 크기 |
+| `selectMode` | input | `TMode` | `"single"` | 선택 모드 |
+| `filterFn` | input | `((item, index, ...params) => boolean) \| undefined` | `undefined` | 필터 함수 |
+| `modal` | input | `SdSelectModalInfo<TModal> \| undefined` | `undefined` | 모달 선택 정보 |
+
+### 시트 셀 내 사용 패턴
+
+```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>
+```
+
+시트 셀 내 사용 시 `[inset]="true" [size]="'sm'"`을 반드시 지정한다.
+
+## `SdSharedDataSelectButton`
+
+공유 데이터 모달 선택 버튼. `<sd-modal-select-button>`을 컴포지션하여 공유 데이터 항목을 표시한다.
+
+```typescript
+@Component({ selector: "sd-shared-data-select-button" })
+class SdSharedDataSelectButton<
+  TItem extends SharedDataBase<string | number>,
+  TMode extends keyof SelectModeValue<string | number>,
+  TModal extends SdSelectModal<any>
+> {
+  value = model<SelectModeValue<string | number>[TMode]>();
+  items = input<TItem[]>([]);
+  modal = input.required<SdSelectModalInfo<TModal>>();
+  selectMode = input<TMode>("single" as TMode);
+  disabled = input(false, { transform: booleanAttribute });
+  required = input(false, { transform: booleanAttribute });
+  inset = input(false, { transform: booleanAttribute });
+  size = input<"sm" | "lg">();
+}
+```
+
+### Members
+
+| Member | Kind | Type | Default | Description |
+|--------|------|------|---------|-------------|
+| `value` | model | `SelectModeValue<string \| number>[TMode]` | - | 선택된 값 (two-way) |
+| `items` | input | `TItem[]` | `[]` | 공유 데이터 항목 |
+| `modal` | input (required) | `SdSelectModalInfo<TModal>` | - | 모달 정보 |
+| `selectMode` | input | `TMode` | `"single"` | 선택 모드 |
+| `disabled` | input | `boolean` | `false` | 비활성화 |
+| `required` | input | `boolean` | `false` | 필수 |
+
+## `SdSharedDataSelectList`
+
+공유 데이터 목록형 선택 컴포넌트. 검색, 페이지네이션, 외부 링크 기능을 포함한다.
+
+```typescript
+@Component({ selector: "sd-shared-data-select-list" })
+class SdSharedDataSelectList<
+  TItem extends SharedDataBase<string | number>,
+  TModal extends SdSelectModal<any>
+> {
+  selectedItem = model<TItem>();
+  canChangeFn = input<(item: TItem | undefined) => boolean | Promise<boolean>>(() => true);
+  items = input.required<TItem[]>();
+  selectedIcon = input<string>();
+  useUndefined = input(false, { transform: booleanAttribute });
+  filterFn = input<(item: TItem, index: number) => boolean>();
+  modal = input<SdSelectModalInfo<TModal>>();
+  header = input<string>();
+  pageItemCount = input<number>();
+}
+```
+
+### Members
+
+| Member | Kind | Type | Default | Description |
+|--------|------|------|---------|-------------|
+| `selectedItem` | model | `TItem \| undefined` | - | 선택된 항목 (two-way) |
+| `canChangeFn` | input | `(item) => boolean \| Promise<boolean>` | `() => true` | 선택 변경 가능 여부 함수 |
+| `items` | input (required) | `TItem[]` | - | 공유 데이터 항목 |
+| `selectedIcon` | input | `string \| undefined` | `undefined` | 선택됨 아이콘 |
+| `useUndefined` | input | `boolean` | `false` | undefined 항목 포함 |
+| `filterFn` | input | `((item, index) => boolean) \| undefined` | `undefined` | 필터 함수 |
+| `modal` | input | `SdSelectModalInfo<TModal> \| undefined` | `undefined` | 모달 선택 정보 |
+| `header` | input | `string \| undefined` | `undefined` | 헤더 텍스트 |
+| `pageItemCount` | input | `number \| undefined` | `undefined` | 페이지당 항목 수 |
+
+Content children: `#headerTpl`, `#filterTpl`, `SdItemOfTemplate`, `#undefinedTpl`
+
+## `matchesSearchText`
+
+공백 구분 AND 조건 텍스트 검색 매칭 함수.
+
+```typescript
+function matchesSearchText(itemText: string, searchQuery: string | undefined): boolean
+```
+
+모든 검색어(공백으로 분할)가 `itemText`에 포함되면 `true`. `searchQuery`가 undefined이거나 빈 문자열이면 항상 `true`.

package/docs/features/sd-tiptap-editor.md

@@ -0,0 +1,26 @@
+# `SdTiptapEditor`
+
+TipTap 기반 리치 텍스트 에디터 컴포넌트. 툴바를 통해 텍스트 서식(제목, 굵게, 기울임, 색상, 정렬 등)을 제어한다.
+
+```typescript
+@Component({ selector: "sd-tiptap-editor", ... })
+export class SdTiptapEditor
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `value` | model | `string \| undefined` | HTML 콘텐츠 |
+| `disabled` | input | `boolean` | 비활성화 — 툴바 숨김, 편집 불가 (기본값: `false`) |
+| `readonly` | input | `boolean` | 읽기 전용 — 편집 불가, 툴바 표시 (기본값: `false`) |
+| `required` | input | `boolean` | 필수 여부 (기본값: `false`) |
+| `placeholder` | input | `string \| undefined` | 플레이스홀더 텍스트 |
+| `validatorFn` | input | `(value: string \| undefined) => string \| undefined` | 커스텀 유효성 검사 함수 |
+| `extensions` | input | `AnyExtension[] \| undefined` | 추가 TipTap 확장 (기본 확장: StarterKit, TextStyle, Color, Highlight, TextAlign, Image, Underline, Placeholder) |
+
+## Usage
+
+```html
+<sd-tiptap-editor [(value)]="content" [placeholder]="'내용을 입력하세요'" />
+```

package/docs/{pipes.md → pipes/format-pipe.md}

@@ -1,6 +1,4 @@
-# Pipes
-
-## `FormatPipe`
+# `FormatPipe`
 
 DateTime, DateOnly, string 값을 포맷팅하는 파이프. 파이프명: `format`
 
@@ -11,6 +9,19 @@ class FormatPipe implements PipeTransform {
 }
 ```
 
+## Parameters
+
+| Param | Type | Description |
+|-------|------|-------------|
+| `value` | `string \| DateTime \| DateOnly \| undefined` | 포맷팅할 값 |
+| `format` | `string` | 포맷 문자열 |
+
+## Returns
+
+`string` — 포맷팅된 문자열. `undefined` 또는 `null` 입력 시 빈 문자열 반환.
+
+## Usage
+
 ### DateTime / DateOnly
 
 `value.toFormatString(format)`을 호출한다.
@@ -28,5 +39,3 @@ format 문자열에서 `X` 문자를 값의 문자로 치환한다. `|`로 구
 <!-- "01012345678" → "010-1234-5678" -->
 {{ phone | format: "XXX-XXXX-XXXX|XX-XXX-XXXX|XX-XXXX-XXXX" }}
 ```
-
-`undefined` 또는 `null` 입력 시 빈 문자열 반환.

package/docs/plugins/sd-global-error-handler.md

@@ -0,0 +1,23 @@
+# `SdGlobalErrorHandlerPlugin`
+
+글로벌 에러 핸들러. Angular `ErrorHandler`를 구현하여 처리되지 않은 에러를 포착하고 화면에 표시한다.
+
+```typescript
+@Injectable({ providedIn: null })
+export class SdGlobalErrorHandlerPlugin implements ErrorHandler
+```
+
+`provideSdAngular()`에 의해 자동 등록된다. 직접 등록할 필요 없다.
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `handleError(event)` | method | `(any) => void` | 에러 처리. `PromiseRejectionEvent`, `ErrorEvent`, `Error` 등을 구분하여 처리 |
+
+## 동작
+
+- `PromiseRejectionEvent` → reason이 `Error`면 메시지+스택, 객체면 JSON 표시
+- `ErrorEvent` → error가 `Error`면 메시지+스택, string이면 그대로 표시
+- `Error` → 메시지+스택 표시
+- devMode에서는 toast로, prodMode에서는 alert로 표시 (중복 표시 방지)