Initial import

docs/components/check-combo.md

@@ -0,0 +1,34 @@
+# Check Combo Input
+
+## 목적
+
+`code/value` 데이터를 받아 여러 항목을 체크박스 형태로 선택하고, 실제 값은 `code[]`로 유지하는 다중 선택 combo 입력 컴포넌트입니다.
+
+## 폴더 구조
+
+```text
+src/components/inputs/checkCombo
+├─ CheckComboUI.tsx
+├─ index.ts
+├─ plugins/
+├─ samples/
+└─ types/
+```
+
+## 주요 props
+
+- `data: { code, value }[]`
+- `value`, `defaultValue`
+- `onChange(codes, items)`
+- `showSearch`
+- `allowClear`
+- `placeholder`
+
+## plugins
+
+- `createCheckComboPlaceholderPlugin`
+- `createCheckComboSortPlugin`
+
+## 샘플
+
+- 대표 샘플: `src/components/inputs/checkCombo/samples/Sample.tsx`

docs/components/codex-diff-previewer.md

@@ -0,0 +1,35 @@
+# Codex Diff Previewer
+
+## 목적
+
+변경 파일의 전체 소스와 raw diff를 codex 스타일 아코디언으로 함께 보여주는 공통 preview 컴포넌트입니다.
+
+## 폴더 구조
+
+```text
+src/components/previewer
+├─ CodexDiffBlock.tsx
+├─ CodexDiffPreviewer.tsx
+├─ CodexDiffPreviewer.css
+├─ samples/
+│  └─ CodexDiffSample.tsx
+└─ index.ts
+```
+
+## 주요 props
+
+- `files`
+- `diffText`
+- `title`
+- `description`
+- `height`
+
+## 공통 사용처
+
+- 작업일지 `## 소스` 탭
+- 일반 문서의 ````diff```` 코드 블록
+- previewer 샘플 갤러리
+
+## 샘플
+
+- 대표 샘플: `src/components/previewer/samples/CodexDiffSample.tsx`

docs/components/component-addition-suggestions.md

@@ -0,0 +1,130 @@
+# 신규 컴포넌트 후보 2차 정리
+
+## 신규 컴포넌트 후보 7차 제안
+
+### 목적
+
+현재 `release` 브랜치 기준으로 기존 컴포넌트와 겹치지 않는 신규 공통 컴포넌트 후보를 제안합니다.
+
+이 글은 검토용 plan 게시판 작성만 수행하며, 자동화 접수는 하지 않고 미접수 상태로 유지합니다.
+
+### release 기준 확인
+
+- 이미 존재: Dashboard Report Card, Progress/MultiProgress, Search Command, Popup/Select/CheckCombo 입력, Markdown Preview, Previewer/Codex Diff, Status Badge, Window, DataListTable, EmbeddedMap, TextMemo/GPS/API 샘플 위젯
+- 제안 방향: Plan/Board/History 화면에서 반복될 가능성이 높지만 아직 공통 컴포넌트로 분리되지 않은 조합형 UI
+
+### 신규 후보
+
+#### 1. Query Filter Builder UI
+
+복수 조건 필터를 행 단위로 추가하고 저장할 수 있는 필터 빌더 컴포넌트입니다.
+
+- 적용 위치: Plan Board 고급 필터, History 검색, Board 검색
+- 주요 props: `fields`, `operators`, `value`, `onChange`, `presets`, `compact`
+- 기대 효과: 화면마다 흩어질 수 있는 필터 조건 UI를 일관된 패턴으로 정리
+
+#### 2. Timeline Activity Feed UI
+
+작업 상태 변경, 접수, release/main 반영, 오류 이벤트를 시간순으로 보여주는 활동 피드 컴포넌트입니다.
+
+- 적용 위치: Plan 상세, History 상세, 자동화 실행 이력
+- 주요 props: `items`, `groupByDate`, `statusResolver`, `dense`, `renderMeta`
+- 기대 효과: 로그성 텍스트를 추적 가능한 UI로 전환하고 최근 변경 맥락을 빠르게 파악
+
+#### 3. Evidence Attachment Strip UI
+
+스크린샷, diff, 로그, 링크 같은 증빙 자료를 한 줄 카드 목록으로 노출하는 첨부 스트립 컴포넌트입니다.
+
+- 적용 위치: Plan 검증 증빙, Preview 결과, History 상세
+- 주요 props: `attachments`, `onPreview`, `onDownload`, `maxVisible`, `variant`
+- 기대 효과: 증빙 자료 표시와 미리보기 진입점을 공통화
+
+### 우선순위 제안
+
+1. Query Filter Builder UI
+2. Timeline Activity Feed UI
+3. Evidence Attachment Strip UI
+
+우선 1번을 먼저 검토하는 것이 좋습니다. Plan Board와 History에서 필터 조건이 계속 늘어날 가능성이 높아 재사용 효과가 가장 큽니다.
+
+## 목적
+
+기존에 개발 완료된 `FormField`, `StateKit`, `DataListTable`과 이미 개발 접수된 `Action Toolbar UI`, `Detail Inspector Panel`, `Timeline / Activity Log UI`, `Confirm Dialog UI`, `Notification Toast / Action Feedback UI`, `Date Range Input`, `File Attachment List`, `Component Usage Doc Card`, `Split Pane Layout`은 이번 후보에서 제외합니다.
+
+이번 문서는 현재 코드베이스와 기존 Board/Plan 접수 이력에 없는 신규 공통 컴포넌트만 다시 추려 이후 Plan 후속 작업 후보를 만드는 목적입니다.
+
+## 제외 기준
+
+- 이미 구현 완료된 공통 컴포넌트는 중복 후보로 다시 올리지 않음
+- 이미 Board/Plan에서 개발 접수된 컴포넌트는 신규 후보에서 제외
+- 앱 전용 화면 조합보다 여러 기능에서 재사용 가능한 공통 UI를 우선 선정
+
+## 신규 후보
+
+### 1. Drawer / Side Sheet UI
+
+본문 흐름을 끊지 않고 우측 또는 하단에서 보조 편집 화면을 여는 컴포넌트입니다.
+
+- 적용 위치: Plan 상세 보조 편집, 설정 화면, 모바일 상세 패널
+- 주요 props: `open`, `placement`, `width`, `title`, `footer`, `onClose`
+- 기대 효과: 전체 화면 전환 없이 보조 작업을 열고 닫는 패턴을 공통화
+
+### 2. Description List / Key Value Summary UI
+
+상세 정보 화면에서 라벨과 값을 읽기 전용으로 정리하는 컴포넌트입니다.
+
+- 적용 위치: Plan 메타 정보, 방문 이력 상세, 앱 설정 요약
+- 주요 props: `items`, `columns`, `size`, `labelWidth`, `copyable`
+- 기대 효과: 상세 화면마다 반복되는 메타 정보 레이아웃을 줄임
+
+### 3. Stepper / Process Flow UI
+
+등록, 작업중, `release` 반영, `main` 반영 같은 단계를 순서형으로 보여주는 컴포넌트입니다.
+
+- 적용 위치: Plan 상태 흐름, 배포 진행 표시, 자동화 단계 요약
+- 주요 props: `steps`, `current`, `status`, `direction`, `compact`
+- 기대 효과: 텍스트 상태 나열보다 현재 단계와 다음 단계를 직관적으로 전달
+
+### 4. Tag Input UI
+
+여러 키워드나 라벨을 직접 추가하고 삭제하는 입력 컴포넌트입니다.
+
+- 적용 위치: Board 태그, 검색 조건 저장, 증적 분류, 빠른 필터 조합
+- 주요 props: `value`, `suggestions`, `maxTags`, `allowCustom`, `onChange`
+- 기대 효과: 다중 조건 입력을 `select`와 별도로 다뤄 반복 필터 구성이 쉬워짐
+
+### 5. Breadcrumb / Context Path UI
+
+현재 위치와 상위 경로를 짧게 보여주는 탐색 보조 컴포넌트입니다.
+
+- 적용 위치: Docs 상세, Components 샘플 상세, History 상세 진입 경로
+- 주요 props: `items`, `separator`, `compact`, `onNavigate`
+- 기대 효과: 깊은 메뉴 구조에서 현재 위치 파악과 상위 이동 비용을 낮춤
+
+### 6. Property Grid UI
+
+설정값이나 옵션 목록을 2열 또는 다열로 배치해 빠르게 편집하는 설정형 컴포넌트입니다.
+
+- 적용 위치: 앱 설정, 자동화 설정, 위젯 옵션 편집
+- 주요 props: `sections`, `fields`, `columns`, `readonly`, `onChange`
+- 기대 효과: 설정 폼을 긴 세로 나열 대신 밀도 있게 구성 가능
+
+## 권장 진행 순서
+
+1. `Description List / Key Value Summary UI`
+2. `Stepper / Process Flow UI`
+3. `Drawer / Side Sheet UI`
+4. `Tag Input UI`
+5. `Property Grid UI`
+6. `Breadcrumb / Context Path UI`
+
+## 검증 기준
+
+- 모바일 폭에서 `drawer`, `stepper`, `property grid`가 가로 넘침 없이 동작하는지 확인
+- Plan 상세와 설정 화면에 붙였을 때 기존 `antd` 기본 컴포넌트 조합보다 반복 코드가 줄어드는지 확인
+- 읽기 전용 화면과 편집 화면에서 같은 컴포넌트를 무리 없이 재사용할 수 있는지 확인
+
+## 메모
+
+- 다음 후보 구현 시에는 `samples/BaseSample.tsx`, `samples/Sample.tsx`, 필요 시 `plugins/*.plugin.ts`를 같은 묶음으로 준비
+- Docs 문서에는 목적, 주요 props, 적용 위치, 확장 포인트를 함께 기록

docs/components/evidence-attachment-strip-ui.md

@@ -0,0 +1,46 @@
+# Evidence Attachment Strip UI
+
+## 목적
+
+Plan/Board 계열 화면에서 반복되는 산출물 카드, 링크, 미리보기 진입 UI를 공통 스트립으로 정리하는 컴포넌트입니다.
+
+## 지원 타입
+
+- `image`
+- `markdown`
+- `code`
+- `text`
+- `json`
+- `preview`
+- `video`
+- `audio`
+- `pdf`
+- `empty`
+
+## 주요 props
+
+- `attachments`
+- `onPreview`
+- `onCopy`
+- `maxVisible`
+- `compact`
+- `emptyText`
+- `title`
+- `description`
+
+## 기본 액션
+
+- 링크 열기
+- 복사
+- 미리보기 진입
+
+## 적용 예시
+
+- `PlanBoardPage`의 `WorklogEvidenceTab` 산출물 Preview 영역
+- 작업일지/스크린샷/로그/preview 링크 혼합 카드 목록
+- 모바일 보조 패널 또는 상세 모달의 compact 첨부 목록
+
+## 확장 포인트
+
+- `EvidenceAttachmentPreviewBody`를 별도 export 하므로 상세 모달 본문에서 같은 렌더러를 재사용할 수 있습니다.
+- `copyValue`, `language`, `format`을 항목별로 제어해 코드/텍스트/경로형 산출물 표현을 조정할 수 있습니다.

docs/components/input.md

@@ -0,0 +1,66 @@
+# Input
+
+## 목적
+
+Ant Design `Input`을 기반으로 하되, 타이핑 중에는 내부 상태만 변경하고 `Enter` 또는 `blur` 시점에만 외부 `onChange`를 호출하는 입력 컴포넌트입니다.
+
+## 폴더 구조
+
+```text
+src/components/inputs/primitives/input
+├─ plugins/
+│  ├─ index.ts
+│  └─ input.plugin.ts
+├─ samples/
+│  ├─ Sample.tsx
+│  └─ ValidInputSample.tsx
+├─ types/
+│  ├─ index.ts
+│  └─ input.ts
+├─ InputUI.tsx
+└─ index.ts
+```
+
+## 동작 방식
+
+- 입력 중에는 내부 `draftValue`만 변경
+- `Enter` 시 외부 `onChange` 호출
+- `blur` 시 외부 `onChange` 호출
+- 검증이나 추가 기능은 `commitPlugins`로 주입
+- 나머지 props는 Ant Design `InputProps`를 그대로 전달
+
+## 샘플 규칙
+
+- `samples/Sample.tsx`: 기본형 `InputUI`
+- `samples/ValidInputSample.tsx`: validation plugin을 적용한 확장 샘플
+
+## 사용 예시
+
+```tsx
+<InputUI
+  value={value}
+  placeholder="입력 후 Enter"
+  onChange={(event) => {
+    setValue(event.target.value);
+  }}
+/>
+```
+
+```tsx
+<InputUI
+  value={value}
+  placeholder="3글자 이상만 허용"
+  commitPlugins={[
+    createValidInputPlugin(({ nextValue }) => nextValue.trim().length >= 3),
+  ]}
+  onChange={(event) => {
+    setValue(event.target.value);
+  }}
+/>
+```
+
+## 참고
+
+- 외부에서 제어하는 값은 확정 시점에만 변경됩니다.
+- `InputUI.tsx` 하나만 두고 기능은 plugin으로 확장하는 구조입니다.
+- API 게시판이나 문서 예시는 `samples/Sample.tsx`를 대표 샘플로 사용합니다.

docs/components/popup.md

@@ -0,0 +1,35 @@
+# Popup Input
+
+## 목적
+
+`[input][button][readonly input]` 형태로 검색어 입력, 버튼 액션, 선택 결과 표시를 한 줄에서 처리하는 입력 컴포넌트입니다.
+
+## 폴더 구조
+
+```text
+src/components/inputs/popup
+├─ PopupUI.tsx
+├─ index.ts
+├─ plugins/
+├─ samples/
+└─ types/
+```
+
+## 주요 props
+
+- `value`, `defaultValue`
+- `resultValue`
+- `onChange`
+- `onButtonClick`
+- `buttonText`
+- `inputPlaceholder`
+- `resultPlaceholder`
+
+## plugins
+
+- `createPopupButtonTextPlugin`
+- `createPopupResultPlaceholderPlugin`
+
+## 샘플
+
+- 대표 샘플: `src/components/inputs/popup/samples/Sample.tsx`

docs/components/previewer-ui.md

@@ -0,0 +1,30 @@
+# Previewer UI
+
+## 목적
+
+다양한 데이터를 공통 카드 형태로 미리보기할 수 있는 previewer 컴포넌트입니다.
+
+## 지원 타입
+
+- `text`
+- `json`
+- `code`
+- `image`
+- `markdown`
+- `empty`
+
+## 추가로 유용한 preview 타입
+
+- `markdown`: 작업일지, 문서 미리보기
+- `empty`: 파일 미선택, 데이터 없음 상태
+
+## 주요 props
+
+- `type`
+- `title`
+- `description`
+- `value`
+- `language`
+- `imageAlt`
+- `height`
+- `toolbar`

docs/components/process-flow-ui.md

@@ -0,0 +1,108 @@
+# Process Flow UI
+
+## 목적
+
+Plan, Board, History 화면에서 공통으로 사용할 수 있는 단계형 진행 표시 컴포넌트입니다.
+현재 단계, 완료 단계, 실패 단계, 다음 대기 단계를 한 번에 보여주며 가로/세로 배치와 compact 모드를 지원합니다.
+
+## 폴더 구조
+
+```text
+src/components/processFlow
+├─ samples/
+│  └─ BaseSample.tsx
+├─ types/
+│  ├─ index.ts
+│  └─ process-flow.ts
+├─ ProcessFlowUI.css
+├─ ProcessFlowUI.tsx
+└─ index.ts
+```
+
+## 기본 Props
+
+```ts
+type ProcessFlowStepStatus = 'complete' | 'current' | 'failed' | 'pending';
+
+type ProcessFlowStep = {
+  key: string;
+  label: ReactNode;
+  description?: ReactNode;
+  status?: ProcessFlowStepStatus;
+};
+
+type ProcessFlowUIProps = {
+  steps: ProcessFlowStep[];
+  currentStepKey?: string;
+  direction?: 'horizontal' | 'vertical';
+  compact?: boolean;
+  showConnector?: boolean;
+  onStepClick?: (step: ProcessFlowStep, index: number) => void;
+  statusIcons?: Partial<Record<ProcessFlowStepStatus, ReactNode>>;
+  statusStyles?: Partial<Record<ProcessFlowStepStatus, Partial<ProcessFlowStatusAppearance>>>;
+  statusLabels?: Partial<Record<ProcessFlowStepStatus, string>>;
+};
+```
+
+## 동작 규칙
+
+- `step.status` 가 있으면 해당 상태를 우선 사용합니다.
+- `step.status` 가 없으면 `currentStepKey` 기준으로 이전 단계는 `complete`, 현재 단계는 `current`, 이후 단계는 `pending` 으로 계산합니다.
+- `direction="horizontal"` 은 넓은 화면에서 단계 흐름을 한 줄로 보여주고, 모바일 폭에서는 자동으로 세로 스택으로 바뀝니다.
+- `direction="vertical"` 은 긴 설명이나 운영 절차처럼 텍스트가 많은 흐름에 적합합니다.
+- `compact` 는 카드 안쪽, 테이블 상세, 모바일 요약 영역처럼 밀도가 필요한 구간에 사용합니다.
+
+## 기본 예시
+
+```tsx
+import { ProcessFlowUI } from '@/components/processFlow';
+
+const steps = [
+  { key: 'created', label: '등록' },
+  { key: 'working', label: '작업중' },
+  { key: 'done', label: '작업완료' },
+  { key: 'released', label: '릴리즈완료' },
+  { key: 'completed', label: '완료' },
+];
+
+export function PlanStatusFlow() {
+  return <ProcessFlowUI steps={steps} currentStepKey="working" />;
+}
+```
+
+## 상태 확장 예시
+
+```tsx
+import { CheckOutlined, SyncOutlined } from '@ant-design/icons';
+
+<ProcessFlowUI
+  steps={steps}
+  currentStepKey="released"
+  statusIcons={{
+    complete: <CheckOutlined />,
+    current: <SyncOutlined spin />,
+  }}
+  statusStyles={{
+    current: {
+      accent: '#7c3aed',
+      accentSoft: 'rgba(124, 58, 237, 0.12)',
+      border: 'rgba(124, 58, 237, 0.22)',
+      background: 'linear-gradient(180deg, rgba(245, 243, 255, 0.98) 0%, rgba(237, 233, 254, 0.84) 100%)',
+      text: '#4c1d95',
+      connector: 'rgba(124, 58, 237, 0.28)',
+    },
+  }}
+/>
+```
+
+## 적용 예시
+
+- Plan 상세: `등록 -> 작업중 -> 작업완료 -> 릴리즈완료 -> 완료`
+- release/main 반영 대기 흐름 표시
+- Board 자동화 접수 후 현재 진행 단계 요약
+
+## 재사용 가이드
+
+- 공통 운영 상태를 이미 문자열로 보유하고 있다면 화면 레이어에서 `steps` 와 `currentStepKey` 로만 변환해서 바로 사용할 수 있습니다.
+- 상태 라벨이 운영 용어와 다르면 `statusLabels` 로 화면별 텍스트만 바꿉니다.
+- 프로젝트 고유 색이나 아이콘이 필요하면 `statusStyles`, `statusIcons` 만 덮어쓰고 기본 레이아웃은 유지합니다.

docs/components/search-command.md

@@ -0,0 +1,23 @@
+# Search Command
+
+## 목적
+
+문서, API, 컴포넌트, 위젯을 키워드로 빠르게 찾고 바로 이동할 수 있는 통합 검색 모달입니다.
+
+## 특징
+
+- `AutoComplete` 기반 추천 드롭다운
+- 모달 오픈 시 입력창 자동 포커스
+- `Enter`, 항목 선택, 바깥 클릭, `Esc`로 닫기/이동
+- 모바일 상단 제스처와 연결 가능
+
+## 주요 props
+
+- `open`
+- `options`
+- `onClose`
+
+## 샘플/연결
+
+- `src/components/search/SearchCommandModal.tsx`
+- `src/layer/search/context/SearchLayerContext.tsx`

docs/components/select.md

@@ -0,0 +1,34 @@
+# Select Input
+
+## 목적
+
+`code/value` 데이터를 받아 실제 값은 `code`로 유지하고, 드롭다운 표시와 검색은 `value` 기준으로 처리하는 select combo 입력 컴포넌트입니다.
+
+## 폴더 구조
+
+```text
+src/components/inputs/select
+├─ SelectUI.tsx
+├─ index.ts
+├─ plugins/
+├─ samples/
+└─ types/
+```
+
+## 주요 props
+
+- `data: { code, value }[]`
+- `value`, `defaultValue`
+- `onChange(code, item)`
+- `showSearch`
+- `allowClear`
+- `placeholder`
+
+## plugins
+
+- `createSelectPlaceholderPlugin`
+- `createSelectSortPlugin`
+
+## 샘플
+
+- 대표 샘플: `src/components/inputs/select/samples/Sample.tsx`

docs/components/status-badge.md

@@ -0,0 +1,106 @@
+# StatusBadge
+
+## 목적
+
+상태 값을 간단한 UI 배지로 표현하는 컴포넌트입니다.
+
+## 폴더 구조
+
+```text
+src/components/status-badge
+├─ plugins/
+│  ├─ index.ts
+│  └─ status-badge.plugin.ts
+├─ samples/
+│  └─ Sample.tsx
+├─ types/
+│  ├─ index.ts
+│  └─ status-badge.ts
+├─ StatusBadgeUI.tsx
+└─ index.ts
+```
+
+## 구성 원칙
+
+- `StatusBadgeUI.tsx`: 실제 UI 렌더링
+- `types/`: props, plugin input 타입 관리
+- `plugins/`: 외부 입력 변환, props 후처리, 커링 플러그인 관리
+- `samples/Sample.tsx`: 대표 샘플
+
+공통 플러그인 제네릭은 `src/types/component-plugin.ts` 에서 관리합니다.
+
+## 기본 Props
+
+```ts
+type StatusBadgeProps = {
+  label: string;
+  tone?: 'success' | 'warning' | 'error' | 'processing' | 'default';
+};
+```
+
+## Plugin Input 예시
+
+```ts
+type StatusBadgePluginInput = {
+  text: string;
+  status?: 'ready' | 'working' | 'blocked' | 'done';
+};
+```
+
+## 공통 Plugin 타입
+
+```ts
+type PropsPlugin<TProps> = (props: TProps) => TProps;
+
+type ComponentPlugin<TInput, TProps = TInput> = (input: TInput) => TProps;
+
+type ComponentPluginFactory<TArgs extends unknown[] = [], TInput = unknown, TProps = TInput> =
+  (...args: TArgs) => ComponentPlugin<TInput, TProps>;
+```
+
+`PropsPlugin<TProps>` 는 질문하신 `plugin<T>(T props) => T` 형태를 직접 표현합니다.  
+`ComponentPlugin` 과 `ComponentPluginFactory` 는 입력 타입과 UI props 타입이 다르거나, 커링이 필요한 경우까지 확장하기 위한 타입입니다.
+
+## 여러 Plugin 합성
+
+```ts
+function plugins<TProps>(
+  props: TProps,
+  pluginList: ReadonlyArray<PropsPlugin<TProps>>,
+): TProps
+```
+
+`plugins<T>(props, Plugin[])` 형태로 여러 props 플러그인을 순서대로 적용합니다.
+
+## Plugin 구현 예시
+
+```ts
+const mapStatusBadgeInputToProps: ComponentPlugin<
+  StatusBadgePluginInput,
+  StatusBadgeProps
+> = (input) => ({
+  label: input.text,
+  tone: input.status ? statusToneMap[input.status] : 'default',
+});
+
+const createStatusBadgeTonePlugin: ComponentPluginFactory<
+  [options?: StatusBadgePluginOptions],
+  StatusBadgeProps
+> = (options) => (props) => ({
+  ...props,
+  tone: props.tone === 'default' ? options?.fallbackTone ?? 'default' : props.tone,
+});
+```
+
+## Sample 활용 목적
+
+- API 게시판에서 예제 UI 노출
+- 문서 페이지에서 동작 방식 설명
+- QA 시 컴포넌트 빠른 확인
+
+## 확장 방향
+
+- `map input -> props` 와 `props -> props` 플러그인 체인을 조합
+- `plugins(props, pluginList)` 로 여러 후처리 플러그인 적용
+- 기본형은 `PropsPlugin<TProps>` 로, 확장형은 `ComponentPluginFactory` 로 표준화
+- 샘플 자동 수집 페이지 구성

docs/components/stepper.md

@@ -0,0 +1,43 @@
+# Stepper
+
+## 목적
+
+여러 단계를 순서대로 표시하고 현재 진행 위치를 강조하는 stepper 컴포넌트입니다.
+
+## 구현 위치
+
+```text
+src/components/stepper
+├─ StepperUI.tsx
+├─ index.ts
+├─ types.ts
+└─ samples/
+   └─ BaseSample.tsx
+```
+
+## 특징
+
+- 내부적으로 `ProcessFlowUI`를 재사용해 동일한 상태 표현과 스타일을 유지합니다.
+- `horizontal`, `vertical` 두 방향을 지원합니다.
+- `currentStepKey`만 넘겨도 현재 단계를 기준으로 완료/진행중/대기 상태를 계산합니다.
+- 각 단계에 `status`를 직접 지정하면 수동 상태 제어도 가능합니다.
+- `compact`, `showConnector`, `statusLabels`, `statusIcons`, `statusStyles`를 그대로 사용할 수 있습니다.
+
+## 기본 예시
+
+```tsx
+<Stepper
+  steps={[
+    { key: 'draft', label: '초안' },
+    { key: 'review', label: '검토' },
+    { key: 'done', label: '완료' },
+  ]}
+  currentStepKey="review"
+/>
+```
+
+## 참고
+
+- `Stepper`와 `StepperUI`를 함께 export하므로 둘 중 하나를 선택해 사용할 수 있습니다.
+- `ProcessFlowUI`의 별칭 성격 컴포넌트이므로 동작 규칙과 스타일 계열은 동일합니다.
+- 대표 샘플은 `src/components/stepper/samples/BaseSample.tsx`를 사용합니다.

docs/components/window-ui.md

@@ -0,0 +1,27 @@
+# Window UI
+
+## 목적
+
+부모 영역 안에서 이동 가능한 모달 스타일 윈도우를 제공합니다.
+
+## 특징
+
+- 헤더 작업줄 드래그 이동
+- 부모 영역 내부로 이동 범위 제한
+- 모서리/변 리사이즈
+- 리사이즈 테두리 더 넓은 히트영역
+- 리사이즈 변/모서리 더블클릭 및 더블탭 시 해당 방향으로 즉시 확장
+- 최소화 / 최대화 / 복원
+- 헤더 더블클릭 최대화 토글
+
+## 주요 props
+
+- `title`
+- `subtitle`
+- `defaultFrame`
+- `minWidth`
+- `minHeight`
+
+## 샘플
+
+- `src/components/window/samples/Sample.tsx`