@nine-lab/nine-mu 0.1.289 → 0.1.291

package/package.json

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

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")}";` : "";
@@ -32,14 +32,16 @@ export class NineDiffPopup extends HTMLElement {
             </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" id="layer_MyBatis"></nine-tab-page>
+                    <nine-tab-page caption="SERVICE" id="layer_Service"></nine-tab-page>
+                    <nine-tab-page caption="CONTROLLER" id="layer_Controller"></nine-tab-page>
+                    <nine-tab-page caption="JAVASCRIPT" id="layer_JavaScript"></nine-tab-page>
+                </nine-tab>
+                
+                <div class="footer">
+                    <button class="btn btn-cancel">취소</button>
+                    <button class="btn btn-confirm">모두 저장</button>
                 </div>
             </nine-dialog>
         `;
@@ -57,17 +59,12 @@ export class NineDiffPopup extends HTMLElement {
     }
 
     /**
-     * 💡 [정석 데이터 위임 연동 엔진]
+     * 💡 [틀 고정 + 에디터 동적 인스턴싱 엔진]
      */
     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';
@@ -76,40 +73,59 @@ 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})`;
+        // 1. ⏰ nine-tab 컴포넌트의 오리지널 정적 파싱(#renderTabs) 연산이 완료될 때까지 미세한 마진 확보
+        setTimeout(() => {
+            const activeLayers = fileList.map(f => f.layer);
 
-            // 💡 탭 내부에 주입될 에디터 뼈대 마크업 준비
-            const targetHtmlContent = `
-                <div class="diff-wrapper">
-                    <nine-diff class="${layer}"></nine-diff>
-                </div>
-            `;
+            // 탭 컴포넌트 내부 섀도우 돔으로 이사 간 실제 탭 페이지 버튼과 컨텐츠 컨테이너 영역 확보
+            const tabButtons = this.#tabContainer.shadowRoot.querySelectorAll('.tab-button');
 
-            if (this.#tabContainer && typeof this.#tabContainer.addTabPage === 'function') {
-                this.#tabContainer.addTabPage(captionName, targetHtmlContent);
-            }
-        });
+            // 4대 고정 레이어 명세 정의
+            const targetLayers = ["MyBatis", "Service", "Controller", "JavaScript"];
 
-        // 3. ⏰ [핵심 수정]: 마운트 완료 후, nine-tab의 Shadow DOM 내부로 깊숙이 파고들어 에디터를 셀렉팅합니다.
-        setTimeout(() => {
-            fileList.forEach((file) => {
-                const { layer, full_path, asis_source, source } = file;
+            targetLayers.forEach((layerName, index) => {
+                const currentBtn = tabButtons[index];
+                // nine-tab 내부 섀도우 돔에 조립되어 대기 중인 실제 페이지 몸체 본문 div
+                const pageBody = this.#tabContainer.shadowRoot.getElementById(`content${index}`);
 
-                // 🎯 변경 포인트: 렌더링 결과물은 nine-tab 컴포넌트 내부 섀도우 루트 안에 안착해 있습니다!
-                const diff = this.#tabContainer.shadowRoot.querySelector(`nine-diff.${layer}`);
+                if (!pageBody) return;
 
-                if (diff) {
-                    const lang = detectLanguage(full_path);
-                    diff.initialize(asis_source || "", source || "", lang);
+                // 이번 백엔드 완료 시그널에 해당 레이어 수정 명세가 포함되어 있다면?
+                if (activeLayers.includes(layerName)) {
+                    const fileData = fileList.find(f => f.layer === layerName);
+                    const fileName = fileData.full_path.split('/').pop() || "Unknown";
+
+                    // A. 상단 탭 버튼 텍스트를 실제 파일명으로 동적 업데이트 및 노출
+                    if (currentBtn) {
+                        currentBtn.textContent = `${layerName.toUpperCase()} (${fileName})`;
+                        currentBtn.style.display = "unset";
+                    }
+
+                    // B. 🔥 [핵심 수정]: 내부 에디터 슬롯만 런타임에 싱싱하게 완전히 새로 구워서 주입 (지연 차단)
+                    pageBody.innerHTML = `<nine-diff class="${layerName}"></nine-diff>`;
+
+                    // C. 새로 태어난 동적 에디터 단말 장치 즉시 인터페이스 초기화
+                    const freshDiff = pageBody.querySelector(`nine-diff.${layerName}`);
+                    if (freshDiff) {
+                        const lang = detectLanguage(fileData.full_path);
+                        freshDiff.initialize(fileData.asis_source || "", fileData.source || "", lang);
+                    }
                 } else {
-                    trace.error(`❌ 에디터 탐색 실패: nine-diff.${layer}`);
+                    // 이번 태스크에서 수정되지 않은 제외 영역은 상단 버튼을 hide 처리하여 깔끔하게 마스킹
+                    if (currentBtn) {
+                        currentBtn.style.display = "none";
+                        currentBtn.classList.remove("active");
+                    }
+                    pageBody.innerHTML = ""; // 컨텐츠 본문 초기화
                 }
             });
-        }, 150); // 돔 트래킹 안정성을 위해 마진 확보
+
+            // 2. 동적 에디터 갱신 및 마스킹 완료 후, 첫 번째 활성화(Visible)된 탭으로 자동 클릭 이동
+            if (this.#tabContainer && typeof this.#tabContainer.initialize === 'function') {
+                this.#tabContainer.initialize();
+            }
+
+        }, 120);
 
         return this;
     }
@@ -123,7 +139,7 @@ export class NineDiffPopup extends HTMLElement {
         for (const file of this.#fileList) {
             const { layer, full_path, asis_source } = file;
 
-            // 🎯 변경 포인트: 저장 시점에도 nine-tab의 shadowRoot를 경유하여 최종 수정본 소스를 캡처합니다.
+            // nine-tab 내부 섀도우 영역 안에서 동적 가동 중인 에디터 컨텐츠 타겟팅 캡처
             const diff = this.#tabContainer.shadowRoot.querySelector(`nine-diff.${layer}`);
             const currentContent = diff ? diff.getContents() : asis_source;