@nine-lab/nine-mu 0.1.287 → 0.1.289

package/package.json

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

package/src/components/NineDiffPopup.js

@@ -29,44 +29,6 @@ export class NineDiffPopup extends HTMLElement {
             <style>
                 @import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-mu@${appVersion}/dist/css/nine-mu.css";
                 ${customImport}
-                
-                .main-layout {
-                    display: flex;
-                    flex-direction: column;
-                    height: 80vh;
-                    width: 85vw;
-                    min-width: 800px;
-                }
-                .tab-area {
-                    flex: 1;
-                    overflow: hidden;
-                    display: flex;
-                    flex-direction: column;
-                }
-                nine-tab {
-                    flex: 1;
-                    display: flex;
-                    flex-direction: column;
-                    height: 100%;
-                }
-                /* 💡 하얗게 안 보이는 현상을 방지하기 위해 에디터 영역의 높이를 확실히 보장 */
-                .diff-wrapper {
-                    height: calc(80vh - 160px); 
-                    width: 100%;
-                    display: block;
-                }
-                nine-diff {
-                    display: block;
-                    width: 100%;
-                    height: 100%;
-                }
-                .footer {
-                    display: flex;
-                    justify-content: flex-end;
-                    gap: 10px;
-                    padding: 15px 0 0 0;
-                    border-top: 1px solid #e5e7eb;
-                }
             </style>
             
             <nine-dialog>
@@ -96,18 +58,16 @@ export class NineDiffPopup extends HTMLElement {
 
     /**
      * 💡 [정석 데이터 위임 연동 엔진]
-     * @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. 🧼 nine-tab 내부에 구축된 일괄 정화 API를 호출하여 기존 버퍼 완전 리셋 (React 가상 DOM 충돌 차단)
+        // 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';
@@ -116,44 +76,46 @@ export class NineDiffPopup extends HTMLElement {
             return 'javascript';
         };
 
-        // 2. ⚡ 백엔드 조립 완료 데이터를 순회하며 선언적 주입 기동
+        // 2. ⚡ 백엔드 조립 데이터를 순회하며 탭 스케폴딩 빌드
         fileList.forEach((file) => {
-            const { layer, full_path, asis_source, source } = file;
+            const { layer, full_path } = file;
             const fileName = full_path.split('/').pop() || "Unknown";
             const captionName = `${layer.toUpperCase()} (${fileName})`;
 
-            // 내부 래퍼와 에디터 뼈대 마크업 준비
+            // 💡 탭 내부에 주입될 에디터 뼈대 마크업 준비
             const targetHtmlContent = `
                 <div class="diff-wrapper">
                     <nine-diff class="${layer}"></nine-diff>
                 </div>
             `;
 
-            // 3. 🚀 nine-tab 확장 인터페이스를 호출하여 표준 Light DOM 트리에 안전하게 탑재
             if (this.#tabContainer && typeof this.#tabContainer.addTabPage === 'function') {
                 this.#tabContainer.addTabPage(captionName, targetHtmlContent);
             }
         });
 
-        // 4. ⏰ 조립 리빌드가 끝난 후, 섀도우 돔 내에 바인딩 완료된 각 에디터 장치들에 순수 소스코드 주입 실행
-        // (addTabPage 내부에서 refresh()와 initialize()가 돌기 때문에 부드럽게 돔을 돌파합니다)
+        // 3. ⏰ [핵심 수정]: 마운트 완료 후, nine-tab의 Shadow DOM 내부로 깊숙이 파고들어 에디터를 셀렉팅합니다.
         setTimeout(() => {
             fileList.forEach((file) => {
                 const { layer, full_path, asis_source, source } = file;
-                const diff = this.shadowRoot.querySelector(`nine-tab`).shadowRoot.querySelector(`nine-diff.${layer}`);
+
+                // 🎯 변경 포인트: 렌더링 결과물은 nine-tab 컴포넌트 내부 섀도우 루트 안에 안착해 있습니다!
+                const diff = this.#tabContainer.shadowRoot.querySelector(`nine-diff.${layer}`);
 
                 if (diff) {
                     const lang = detectLanguage(full_path);
                     diff.initialize(asis_source || "", source || "", lang);
+                } else {
+                    trace.error(`❌ 에디터 탐색 실패: nine-diff.${layer}`);
                 }
             });
-        }, 50); // 안전 마운트를 위한 최소한의 틱 디레이징 마진만 유지
+        }, 150); // 돔 트래킹 안정성을 위해 마진 확보
 
         return this;
     }
 
     /**
-     * 💡 [일괄 물리 파일 라이팅]
+     * 💡 [일괄 물리 저장]
      */
     async #handleConfirmAll() {
         const payloadList = [];
@@ -161,8 +123,8 @@ export class NineDiffPopup extends HTMLElement {
         for (const file of this.#fileList) {
             const { layer, full_path, asis_source } = file;
 
-            // nine-tab의 Shadow DOM 내부에 캡슐화되어 렌더링된 에디터 인스턴스 타겟 셀렉팅 추적
-            const diff = this.shadowRoot.querySelector(`nine-tab`).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({
@@ -175,7 +137,6 @@ export class NineDiffPopup extends HTMLElement {
 
         try {
             await api.post(`/nine-mu/source/generateJsonFileBatch`, { fileList: payloadList });
-
             await nine.alert("요청하신 모든 파일의 소스 변경 사항이 성공적으로 반영되었습니다.");
             this.#dialog.close();
         } catch (error) {