docs: 문서 업데이트

Author: lee-sihun

docs/plugin/api-reference/keys/page.mdx

@@ -48,7 +48,14 @@ interface KeyPosition {
   count: number;
   noteColor: string | { type: "gradient"; top: string; bottom: string };
   noteOpacity: number;
+  noteEffectEnabled: boolean;
+  noteGlowEnabled: boolean;
+  noteGlowSize: number;
+  noteGlowOpacity: number;
+  noteGlowColor?: string | { type: "gradient"; top: string; bottom: string };
+  noteAutoYCorrection: boolean;
   className?: string;
+  zIndex?: number;
   counter: KeyCounterSettings;
 }
 ```

docs/plugin/api-reference/plugin/page.mdx

@@ -62,6 +62,23 @@ interface PluginDefinition {
   /** 최대 인스턴스 개수 (0 = 무제한, 기본값) */
   maxInstances?: number;
 
+  /**
+   * 그리드에서 크기 조절 가능 여부
+   * @default false
+   */
+  resizable?: boolean;
+
+  /**
+   * 설정 변경 시 유지할 축
+   * resizable이 true일 때만 적용됨
+   * - 'width': 가로 크기 유지, 세로는 콘텐츠 따라감
+   * - 'height': 세로 크기 유지, 가로는 콘텐츠 따라감
+   * - 'both': 둘 다 유지 (기본값)
+   * - 'none': 둘 다 콘텐츠 따라감
+   * @default 'both'
+   */
+  preserveAxis?: "width" | "height" | "both" | "none";
+
   /**
    * 리사이즈 앵커 (크기 변경 시 기준점)
    * @default "top-left"

docs/plugin/ui-api/page.mdx

@@ -366,6 +366,37 @@ dmn.ui.displayElement.add({
 });
 ```
 
+## Color Picker
+
+색상 선택기를 표시합니다.
+
+```javascript
+dmn.ui.pickColor({
+  initialColor: "#ff0000",
+  onColorChange: (color) => {
+    console.log("색상 변경 중:", color);
+  },
+  onColorChangeComplete: (color) => {
+    console.log("색상 선택 완료:", color);
+  },
+  // 선택적 옵션
+  position: { x: 100, y: 100 }, // 직접 위치 지정
+  referenceElement: document.getElementById("my-button"), // 요소 기준 위치
+});
+```
+
+### 옵션
+
+| 속성                    | 타입            | 설명                                        |
+| ----------------------- | --------------- | ------------------------------------------- |
+| `initialColor`          | string          | 초기 색상 (HEX)                             |
+| `onColorChange`         | (color) => void | 색상이 변경될 때마다 호출                   |
+| `onColorChangeComplete` | (color) => void | 색상 선택이 완료되었을 때 호출              |
+| `onClose`               | () => void      | 색상 선택기가 닫힐 때 호출                  |
+| `position`              | \{ x, y \}      | 표시 위치 (referenceElement가 없을 때 사용) |
+| `referenceElement`      | HTMLElement     | 이 요소를 기준으로 위치 설정                |
+| `id`                    | string          | 고유 ID (중복 방지용)                       |
+
 ## 실전 예제: 설정 패널
 
 ```javascript