@nine-lab/nine-mu 0.1.288 → 0.1.290

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nine-lab/nine-mu",
-  "version": "0.1.288",
+  "version": "0.1.290",
   "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;
-    #fileList = []; // 최종 [모두 저장]을 위한 차분 명세 데이터 버퍼
+    #fileList = []; // 최종 일괄 저장을 위한 데이터 버퍼
     #host;
 
     constructor() {
@@ -19,7 +19,8 @@ export class NineDiffPopup extends HTMLElement {
     }
 
     /**
-     * 💡 기본 다이얼로그 외곽 프레임 및 스타일 스케폴딩 렌더링
+     * 💡 [기존 방식 복구] 스타일 전량 제거하고,
+     * 기존 소스처럼 nine-tab 내부에 nine-tab-page 2개를 정적으로 미리 박아 놓습니다.
      */
     #renderScaffolding() {
         const customImport = this.getAttribute("css-path") ? `@import "${this.getAttribute("css-path")}";` : "";
@@ -29,55 +30,21 @@ 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>
-                <div class="main-layout">
-                    <div class="tab-area">
-                        <nine-tab theme="theme-3"></nine-tab>
-                    </div>
-                    <div class="footer">
-                        <button class="btn btn-cancel">취소</button>
-                        <button class="btn btn-confirm">모두 저장</button>
-                    </div>
+                <nine-tab theme="theme-3">
+                    <nine-tab-page caption="MYBATIS">
+                        <nine-diff class="MyBatis"></nine-diff>
+                    </nine-tab-page>
+                    <nine-tab-page caption="JAVASCRIPT">
+                        <nine-diff class="JavaScript"></nine-diff>
+                    </nine-tab-page>
+                </nine-tab>
+                
+                <div class="footer">
+                    <button class="btn btn-cancel">취소</button>
+                    <button class="btn btn-confirm">모두 저장</button>
                 </div>
             </nine-dialog>
         `;
@@ -95,17 +62,13 @@ export class NineDiffPopup extends HTMLElement {
     }
 
     /**
-     * 💡 [정석 데이터 위임 연동 엔진]
+     * 💡 [기존 정적 매핑 방식]
+     * 동적 생성 없이, 이미 조립되어 들어간 nine-tab 내부의 에디터를 정밀 타격하여 데이터만 꽂습니다.
      */
     async data(fileList) {
         if (!Array.isArray(fileList) || fileList.length === 0) return this;
         this.#fileList = fileList;
 
-        // 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';
@@ -114,40 +77,40 @@ export class NineDiffPopup extends HTMLElement {
             return 'javascript';
         };
 
-        // 2. ⚡ 백엔드 조립 데이터를 순회하며 탭 스케폴딩 빌드
-        fileList.forEach((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>
-            `;
-
-            if (this.#tabContainer && typeof this.#tabContainer.addTabPage === 'function') {
-                this.#tabContainer.addTabPage(captionName, targetHtmlContent);
-            }
-        });
-
-        // 3. ⏰ [핵심 수정]: 마운트 완료 후, nine-tab의 Shadow DOM 내부로 깊숙이 파고들어 에디터를 셀렉팅합니다.
+        // 💡 중요: nine-tab의 #renderTabs()와 #init()이 끝난 뒤
+        // 섀도우 돔 내부(.tab-pages)로 이사 간 에디터 인스턴스들을 정확하게 추적합니다.
         setTimeout(() => {
             fileList.forEach((file) => {
                 const { layer, full_path, asis_source, source } = file;
 
-                // 🎯 변경 포인트: 렌더링 결과물은 nine-tab 컴포넌트 내부 섀도우 루트 안에 안착해 있습니다!
+                // 🎯 렌더링이 완료된 실제 단말 장치는 nine-tab의 shadowRoot 안에 박혀 있습니다.
                 const diff = this.#tabContainer.shadowRoot.querySelector(`nine-diff.${layer}`);
 
                 if (diff) {
                     const lang = detectLanguage(full_path);
+
+                    // 탭 버튼의 상단 텍스트(캡션)도 실제 파일명에 맞춰 동기화 시켜줍니다.
+                    const fileName = full_path.split('/').pop() || "Unknown";
+                    const tabButtons = this.#tabContainer.shadowRoot.querySelectorAll('.tab-button');
+
+                    tabButtons.forEach(btn => {
+                        if (btn.textContent.trim() === layer.toUpperCase()) {
+                            btn.textContent = `${layer.toUpperCase()} (${fileName})`;
+                        }
+                    });
+
+                    // 날것의 소스 데이터 바인딩 초기화 실행
                     diff.initialize(asis_source || "", source || "", lang);
                 } else {
-                    trace.error(`❌ 에디터 탐색 실패: nine-diff.${layer}`);
+                    trace.error(`❌ 에디터 인스턴스를 찾을 수 없습니다: nine-diff.${layer}`);
                 }
             });
-        }, 150); // 돔 트래킹 안정성을 위해 마진 확보
+
+            // 데이터 세팅 완료 후 nine-tab 초기 포커싱 가동
+            if (this.#tabContainer && typeof this.#tabContainer.initialize === 'function') {
+                this.#tabContainer.initialize();
+            }
+        }, 100);
 
         return this;
     }
@@ -161,7 +124,7 @@ export class NineDiffPopup extends HTMLElement {
         for (const file of this.#fileList) {
             const { layer, full_path, asis_source } = file;
 
-            // 🎯 변경 포인트: 저장 시점에도 nine-tab의 shadowRoot를 경유하여 최종 수정본 소스를 캡처합니다.
+            // 저장 시점에도 nine-tab의 shadowRoot를 관통하여 데이터를 스캔합니다.
             const diff = this.#tabContainer.shadowRoot.querySelector(`nine-diff.${layer}`);
             const currentContent = diff ? diff.getContents() : asis_source;