@nine-lab/nine-mu 0.1.282 → 0.1.284

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nine-lab/nine-mu",
-  "version": "0.1.282",
+  "version": "0.1.284",
   "description": "AI-Driven Full-Stack Code Fabrication Engine",
   "type": "module",
   "main": "./dist/nine-mu.umd.js",

package/src/components/NineDiffPopup.js

@@ -5,7 +5,7 @@ import '@nine-lab/nine-util';
 export class NineDiffPopup extends HTMLElement {
     #dialog = null;
     #tabContainer = null;
-    #filesMap = new Map(); // 각 탭(파일)별 원본 및 에디터 뷰 인스턴스, 메타데이터 관리를 위한 맵
+    #filesMap = new Map(); // 각 탭(파일)별 메타데이터 및 에디터 인스턴스를 관리할 고유 저장소
     #host;
 
     constructor() {
@@ -19,7 +19,7 @@ export class NineDiffPopup extends HTMLElement {
     }
 
     /**
-     * 💡 기본 다이얼로그 및 레이아웃 스케폴딩 렌더링
+     * 💡 기본 다이얼로그 프레임 및 스타일 스케폴딩 렌더링
      */
     #renderScaffolding() {
         const customImport = this.getAttribute("css-path") ? `@import "${this.getAttribute("css-path")}";` : "";
@@ -43,15 +43,23 @@ export class NineDiffPopup extends HTMLElement {
                     display: flex;
                     flex-direction: column;
                 }
+                /* 💡 nx-tab / nine-tab 프레임워크가 100% 자라나도록 높이 강제 배치 */
                 nine-tab {
                     flex: 1;
                     display: flex;
                     flex-direction: column;
                     height: 100%;
                 }
+                /* 💡 내부 에디터 가시성이 유실되어 숨겨지는 현상을 확실하게 방어 */
                 .diff-wrapper {
-                    height: calc(80vh - 120px); /* 푸터와 탭 헤더 높이를 제외한 에디터 영역 확보 */
+                    height: calc(80vh - 120px); 
                     width: 100%;
+                    display: block;
+                }
+                nine-diff {
+                    display: block;
+                    width: 100%;
+                    height: 100%;
                 }
                 .footer {
                     display: flex;
@@ -88,17 +96,18 @@ export class NineDiffPopup extends HTMLElement {
     }
 
     /**
-     * 💡 [핵심 고도화] 여러 파일 리스트를 받아 동적으로 탭을 생성하고 데이터를 주입하는 함수
+     * 💡 [완벽 동적 빌딩 시스템]
+     * 백엔드 완료 시그널로부터 모아진 collectedFiles 가 들어오면, 런타임에 해당하는 탭만 정확하게 파싱하여 주입합니다.
      * @param {Array} fileList - [{ layer: "MyBatis", full_path: "...", asis_source: "...", source: "..." }]
      */
     async data(fileList) {
         if (!Array.isArray(fileList) || fileList.length === 0) return this;
 
-        // 기존에 빌드된 탭이 있다면 초기화
+        // 1. 기존에 잔존하던 동적 탭 컨텐츠 구성원 완전 청소
         this.#tabContainer.innerHTML = "";
         this.#filesMap.clear();
 
-        // 확장자 기반 주석/언어(Language) 유추 헬퍼
+        // 확장자 기반 언어셋 하이라이팅 추론 헬퍼
         const detectLanguage = (path) => {
             const lower = (path || "").toLowerCase();
             if (lower.endsWith('.xml')) return 'xml';
@@ -107,25 +116,32 @@ export class NineDiffPopup extends HTMLElement {
             return 'javascript';
         };
 
-        // 각 파일별로 nine-tab-page 및 nine-diff 엘리먼트 동적 빌드
+        // 2. 수신된 파일 명세 묶음 크기만큼 루프를 돌며 웹 컴포넌트 런타임 인스턴싱
         fileList.forEach((file, index) => {
             const { layer, full_path, asis_source, source } = file;
             const lang = detectLanguage(full_path);
-            const caption = `${layer} (${full_path.split('/').pop()})`; // 탭 캡션 명세 (레이어명 + 파일명)
 
-            // 1. 탭 페이지 템플릿 마크업 생성
+            // 파일명만 추출하여 보기 좋게 캡션 가공
+            const fileName = full_path.split('/').pop() || "Unknown";
+            const caption = `${layer.toUpperCase()} (${fileName})`;
+
+            // A. <nine-tab-page> 엘리먼트 동적 생성 및 헤더 캡션 설정
             const tabPage = document.createElement('nine-tab-page');
             tabPage.setAttribute('caption', caption);
 
+            // B. 차분 레이아웃 정밀 래퍼 생성
             const diffWrapper = document.createElement('div');
             diffWrapper.className = 'diff-wrapper';
 
+            // C. <nine-diff> 소스 비교 전용 에디터 장치 인스턴싱
             const diffView = document.createElement('nine-diff');
+
+            // D. 계층 하위 조립 및 완성된 컴포넌트 트리를 실제 탭 컨테이너에 피딩
             diffWrapper.appendChild(diffView);
             tabPage.appendChild(diffWrapper);
             this.#tabContainer.appendChild(tabPage);
 
-            // 2. 파일별 변경 상태 관리를 위해 맵(Map)에 정보 보존
+            // E. 추후 [모두 저장] 작동시 순회 타겟 명세 확보를 위한 고유 맵 바인딩
             const fileKey = `file_tab_${index}`;
             this.#filesMap.set(fileKey, {
                 layer,
@@ -134,26 +150,34 @@ export class NineDiffPopup extends HTMLElement {
                 diffView: diffView
             });
 
-            // 3. 각 Web Component 에디터가 준비 완료(ready)되면 순수 소스 매핑 및 초기화
+            // F. 동적으로 추가된 에디터 가상 장치가 준비 완료(ready) 상태를 발행하면 소스 코드 로드 기동
             diffView.addEventListener('ready', () => {
                 diffView.initialize(asis_source || "", source || "", lang);
             }, { once: true });
         });
 
+        // 3. 렌더링 트리 결합 후 nine-tab 컴포넌트 자체 라이프사이클 엔진 강제 구동
+        setTimeout(() => {
+            if (typeof this.#tabContainer.initialize === 'function') {
+                this.#tabContainer.initialize();
+            }
+        }, 50);
+
         return this;
     }
 
     /**
-     * 💡 [일괄 처리 갱신] 오픈된 모든 탭의 수정한 수정본 코드를 취합하여 백엔드로 API 일괄 전송
+     * 💡 [일괄 물리 파일 라이팅]
+     * 활성화된 모든 탭 영역의 우측 창(TO-BE) 최종 소스들을 취합하여 단 한 번의 일괄 요청으로 커밋
      */
     async #handleConfirmAll() {
         const payloadList = [];
 
-        // 맵을 순회하며 변경 완료된 오른쪽 창(tobe)의 소스코드를 추출
+        // 관리용 맵 저장소를 순회하며 최종 수정본 코드 스냅샷 추출
         for (const [key, fileObj] of this.#filesMap.entries()) {
             const { diffView, fullPath, asisSource, layer } = fileObj;
 
-            // 사용자가 수정한 최종 TO-BE 코드를 추출 (에디터가 없거나 로드 전이면 원본 유지)
+            // 사용자가 수정한 최종 우측 창 텍스트를 추출 (에디터 로드 전 예외 발생 시 원본 보호용 fallback)
             const currentContent = diffView ? diffView.getContents() : asisSource;
 
             payloadList.push({
@@ -165,15 +189,14 @@ export class NineDiffPopup extends HTMLElement {
         }
 
         try {
-            // 변경 사항을 일괄 전송하는 백엔드 규격 API 호출
-            // (컨트롤러 측 구조에 맞춰 묶음 발송 처리 하거나 루프를 활용하세요)
+            // 변경된 멀티 레이어 파일 묶음을 전송하는 일괄 일치 컨트롤러 API 최종 동기화
             await api.post(`/nine-mu/source/generateJsonFileBatch`, { fileList: payloadList });
 
             await nine.alert("요청하신 모든 파일의 소스 변경 사항이 성공적으로 반영되었습니다.");
-            this.#dialog.close();
+            this.#dialog.close(); // 팝업 모달 소멸
         } catch (error) {
             trace.error("일괄 파일 저장 처리 중 실패:", error);
-            nine.alert("소스 저장 중 오류가 발생했습니다.");
+            nine.alert("소스 일괄 저장 연동 중 치명적인 오류가 발생했습니다.");
         }
     }
 
@@ -182,4 +205,7 @@ export class NineDiffPopup extends HTMLElement {
     }
 }
 
-customElements.define("nine-diff-popup", NineDiffPopup);
+// 중복 등록 충돌 방지 처리 포함 등록
+if (!customElements.get("nine-diff-popup")) {
+    customElements.define("nine-diff-popup", NineDiffPopup);
+}