@nine-lab/nine-mu 0.1.286 → 0.1.288

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nine-lab/nine-mu",
-  "version": "0.1.286",
+  "version": "0.1.288",
   "description": "AI-Driven Full-Stack Code Fabrication Engine",
   "type": "module",
   "main": "./dist/nine-mu.umd.js",
@@ -24,7 +24,7 @@
     "@nine-lab/nine-ai": "*",
     "@nine-lab/nine-nomenu": "*",
     "@nine-lab/nine-util": "^0.9.126",
-    "@nine-lab/nine-ux": "*",
+    "@nine-lab/nine-ux": "^0.1.243",
     "terser": "^5.31.0",
     "vite": "^6.0.0"
   },

package/src/components/NineDiffPopup.js

@@ -19,7 +19,7 @@ export class NineDiffPopup extends HTMLElement {
     }
 
     /**
-     * 💡 기본 다이얼로그 외곽 프레임만 정적으로 선언 (탭 레이아웃은 비워둠)
+     * 💡 기본 다이얼로그 외곽 프레임 및 스타일 스케폴딩 렌더링
      */
     #renderScaffolding() {
         const customImport = this.getAttribute("css-path") ? `@import "${this.getAttribute("css-path")}";` : "";
@@ -49,9 +49,9 @@ export class NineDiffPopup extends HTMLElement {
                     flex-direction: column;
                     height: 100%;
                 }
-                /* 💡 하얗게 안 보이는 현상을 방지하기 위해 동적 삽입될 에디터 영역의 높이를 확실히 보장 */
+                /* 💡 에디터 영역의 가시성 및 너비/높이 한계선 고정 */
                 .diff-wrapper {
-                    height: calc(80vh - 120px); 
+                    height: calc(80vh - 160px); 
                     width: 100%;
                     display: block;
                 }
@@ -95,18 +95,17 @@ export class NineDiffPopup extends HTMLElement {
     }
 
     /**
-     * 💡 [100% 동적 빌딩 시스템]
-     * 들어온 데이터 개수에 정확히 맞추어 런타임에 탭 페이지와 에디터를 일대일 매핑으로 직접 조립합니다.
-     * @param {Array} fileList - [{ layer: "MyBatis", full_path: "...", asis_source: "...", source: "..." }]
+     * 💡 [정석 데이터 위임 연동 엔진]
      */
     async data(fileList) {
         if (!Array.isArray(fileList) || fileList.length === 0) return this;
         this.#fileList = fileList;
 
-        // 1. 🧼 이전 실행 흔적이 있다면 동적 컨텐츠 내부를 완전히 청소 (인덱스 리셋)
-        this.#tabContainer.innerHTML = "";
+        // 1. 🧼 기존 동적 버퍼 완전 리셋
+        if (this.#tabContainer && typeof this.#tabContainer.clearTabs === 'function') {
+            this.#tabContainer.clearTabs();
+        }
 
-        // 확장자 기반 주석/언어 유추 헬퍼
         const detectLanguage = (path) => {
             const lower = (path || "").toLowerCase();
             if (lower.endsWith('.xml')) return 'xml';
@@ -115,49 +114,40 @@ export class NineDiffPopup extends HTMLElement {
             return 'javascript';
         };
 
-        // 2. ⚡ 수신된 파일 갯수만큼 루프를 돌며 필요한 요소만 정확히 DOM 생성(Injection)
+        // 2. ⚡ 백엔드 조립 데이터를 순회하며 탭 스케폴딩 빌드
         fileList.forEach((file) => {
             const { layer, full_path } = file;
-            const lang = detectLanguage(full_path);
             const fileName = full_path.split('/').pop() || "Unknown";
-            const captionName = `${layer.toUpperCase()} (${fileName})`; // 예: MYBATIS (MemberUsersMapper.xml)
-
-            // A. <nine-tab-page> 런타임 인스턴싱
-            const tabPage = document.createElement('nine-tab-page');
-            tabPage.setAttribute('caption', captionName);
-
-            // B. 높이 유실 방어용 래퍼 생성
-            const diffWrapper = document.createElement('div');
-            diffWrapper.className = 'diff-wrapper';
+            const captionName = `${layer.toUpperCase()} (${fileName})`;
 
-            // C. <nine-diff> 에디터 장치 동적 생성 및 매칭용 레이어 클래스 주입
-            const diffView = document.createElement('nine-diff');
-            diffView.className = layer; // 예: class="MyBatis" 또는 class="JavaScript"
+            // 💡 탭 내부에 주입될 에디터 뼈대 마크업 준비
+            const targetHtmlContent = `
+                <div class="diff-wrapper">
+                    <nine-diff class="${layer}"></nine-diff>
+                </div>
+            `;
 
-            // D. 하위 트리 계층 결합 및 실제 탭 컨테이너 레이아웃에 안착
-            diffWrapper.appendChild(diffView);
-            tabPage.appendChild(diffWrapper);
-            this.#tabContainer.appendChild(tabPage);
+            if (this.#tabContainer && typeof this.#tabContainer.addTabPage === 'function') {
+                this.#tabContainer.addTabPage(captionName, targetHtmlContent);
+            }
         });
 
-        // 3. ⏰ 브라우저가 동적으로 추가된 태그들을 완벽하게 렌더트리에 마운트할 수 있도록 비동기 여유 마진 확보
+        // 3. ⏰ [핵심 수정]: 마운트 완료 후, nine-tab의 Shadow DOM 내부로 깊숙이 파고들어 에디터를 셀렉팅합니다.
         setTimeout(() => {
             fileList.forEach((file) => {
-                const { layer, asis_source, source } = file;
-                const diff = this.shadowRoot.querySelector(`nine-diff.${layer}`);
+                const { layer, full_path, asis_source, source } = file;
+
+                // 🎯 변경 포인트: 렌더링 결과물은 nine-tab 컴포넌트 내부 섀도우 루트 안에 안착해 있습니다!
+                const diff = this.#tabContainer.shadowRoot.querySelector(`nine-diff.${layer}`);
 
                 if (diff) {
-                    const lang = detectLanguage(file.full_path);
-                    // 확보된 실제 에디터 버퍼 장치에 소스코드 강제 바인딩 초기화
+                    const lang = detectLanguage(full_path);
                     diff.initialize(asis_source || "", source || "", lang);
+                } else {
+                    trace.error(`❌ 에디터 탐색 실패: nine-diff.${layer}`);
                 }
             });
-
-            // E. 데이터 주입이 모두 완벽히 끝난 시점에 nine-tab 컴포넌트의 가상 빌더 엔진 트리거!
-            if (this.#tabContainer && typeof this.#tabContainer.initialize === 'function') {
-                this.#tabContainer.initialize();
-            }
-        }, 150); // 150ms의 마진 타임 적용
+        }, 150); // 돔 트래킹 안정성을 위해 마진 확보
 
         return this;
     }
@@ -170,9 +160,9 @@ export class NineDiffPopup extends HTMLElement {
 
         for (const file of this.#fileList) {
             const { layer, full_path, asis_source } = file;
-            // 각 레이어 클래스로 지정해 둔 동적 에디터를 순회하며 텍스트 캡처
-            const diff = this.shadowRoot.querySelector(`nine-diff.${layer}`);
 
+            // 🎯 변경 포인트: 저장 시점에도 nine-tab의 shadowRoot를 경유하여 최종 수정본 소스를 캡처합니다.
+            const diff = this.#tabContainer.shadowRoot.querySelector(`nine-diff.${layer}`);
             const currentContent = diff ? diff.getContents() : asis_source;
 
             payloadList.push({
@@ -185,7 +175,6 @@ export class NineDiffPopup extends HTMLElement {
 
         try {
             await api.post(`/nine-mu/source/generateJsonFileBatch`, { fileList: payloadList });
-
             await nine.alert("요청하신 모든 파일의 소스 변경 사항이 성공적으로 반영되었습니다.");
             this.#dialog.close();
         } catch (error) {