@nine-lab/nine-mu 0.1.290 → 0.1.292

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nine-lab/nine-mu",
-  "version": "0.1.290",
+  "version": "0.1.292",
   "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,8 +19,7 @@ export class NineDiffPopup extends HTMLElement {
     }
 
     /**
-     * 💡 [기존 방식 복구] 스타일 전량 제거하고,
-     * 기존 소스처럼 nine-tab 내부에 nine-tab-page 2개를 정적으로 미리 박아 놓습니다.
+     * 💡 탭 페이지 외곽 정적 구조 확보
      */
     #renderScaffolding() {
         const customImport = this.getAttribute("css-path") ? `@import "${this.getAttribute("css-path")}";` : "";
@@ -34,12 +33,10 @@ export class NineDiffPopup extends HTMLElement {
             
             <nine-dialog>
                 <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-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">
@@ -62,8 +59,7 @@ export class NineDiffPopup extends HTMLElement {
     }
 
     /**
-     * 💡 [기존 정적 매핑 방식]
-     * 동적 생성 없이, 이미 조립되어 들어간 nine-tab 내부의 에디터를 정밀 타격하여 데이터만 꽂습니다.
+     * 💡 [틀 고정 + 에디터 동적 인스턴싱 엔진]
      */
     async data(fileList) {
         if (!Array.isArray(fileList) || fileList.length === 0) return this;
@@ -77,40 +73,62 @@ export class NineDiffPopup extends HTMLElement {
             return 'javascript';
         };
 
-        // 💡 중요: nine-tab의 #renderTabs()와 #init()이 끝난 뒤
-        // 섀도우 돔 내부(.tab-pages)로 이사 간 에디터 인스턴스들을 정확하게 추적합니다.
+        // 1. ⏰ 자식 nine-tab의 오리지널 뼈대 파싱이 완벽히 마운트될 때까지 1차 대기
         setTimeout(() => {
-            fileList.forEach((file) => {
-                const { layer, full_path, asis_source, source } = file;
+            const activeLayers = fileList.map(f => f.layer);
+            const tabButtons = this.#tabContainer.shadowRoot.querySelectorAll('.tab-button');
+            const targetLayers = ["MyBatis", "Service", "Controller", "JavaScript"];
 
-                // 🎯 렌더링이 완료된 실제 단말 장치는 nine-tab의 shadowRoot 안에 박혀 있습니다.
-                const diff = this.#tabContainer.shadowRoot.querySelector(`nine-diff.${layer}`);
+            targetLayers.forEach((layerName, index) => {
+                const currentBtn = tabButtons[index];
+                const pageBody = this.#tabContainer.shadowRoot.getElementById(`content${index}`);
 
-                if (diff) {
-                    const lang = detectLanguage(full_path);
+                if (!pageBody) return;
 
-                    // 탭 버튼의 상단 텍스트(캡션)도 실제 파일명에 맞춰 동기화 시켜줍니다.
-                    const fileName = full_path.split('/').pop() || "Unknown";
-                    const tabButtons = this.#tabContainer.shadowRoot.querySelectorAll('.tab-button');
+                if (activeLayers.includes(layerName)) {
+                    const fileData = fileList.find(f => f.layer === layerName);
+                    const fileName = fileData.full_path.split('/').pop() || "Unknown";
 
-                    tabButtons.forEach(btn => {
-                        if (btn.textContent.trim() === layer.toUpperCase()) {
-                            btn.textContent = `${layer.toUpperCase()} (${fileName})`;
-                        }
-                    });
+                    if (currentBtn) {
+                        currentBtn.textContent = `${layerName.toUpperCase()} (${fileName})`;
+                        currentBtn.style.display = "unset";
+                    }
 
-                    // 날것의 소스 데이터 바인딩 초기화 실행
-                    diff.initialize(asis_source || "", source || "", lang);
+                    // 💡 에디터 슬롯 동적 재생성
+                    pageBody.innerHTML = `<nine-diff class="${layerName}"></nine-diff>`;
                 } else {
-                    trace.error(`❌ 에디터 인스턴스를 찾을 수 없습니다: nine-diff.${layer}`);
+                    if (currentBtn) {
+                        currentBtn.style.display = "none";
+                        currentBtn.classList.remove("active");
+                    }
+                    pageBody.innerHTML = "";
                 }
             });
 
-            // 데이터 세팅 완료 후 nine-tab 초기 포커싱 가동
-            if (this.#tabContainer && typeof this.#tabContainer.initialize === 'function') {
-                this.#tabContainer.initialize();
-            }
-        }, 100);
+            // 2. ⚡ [결정적 크래시 해결 장치]:
+            // 브라우저가 동적 주입된 <nine-diff>의 내부 CodeMirror 인스턴스 렌더링을 완전히 마칠 때까지
+            // 프레임 연산을 2단계(더블 틱) 지연시켜 안전 기동 큐를 확보합니다.
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    fileList.forEach((file) => {
+                        const { layer, full_path, asis_source, source } = file;
+                        const diff = this.#tabContainer.shadowRoot.querySelector(`nine-diff.${layer}`);
+
+                        if (diff && typeof diff.initialize === 'function') {
+                            const lang = detectLanguage(full_path);
+                            // 내부 CodeMirror 프레임워크가 완전히 ready 된 시점에 데이터를 바인딩합니다.
+                            diff.initialize(asis_source || "", source || "", lang);
+                        }
+                    });
+
+                    // 데이터 주입 완료 후 첫 활성 탭으로 화면 전환 포커싱
+                    if (this.#tabContainer && typeof this.#tabContainer.initialize === 'function') {
+                        this.#tabContainer.initialize();
+                    }
+                });
+            });
+
+        }, 120);
 
         return this;
     }
@@ -123,8 +141,6 @@ export class NineDiffPopup extends HTMLElement {
 
         for (const file of this.#fileList) {
             const { layer, full_path, asis_source } = file;
-
-            // 저장 시점에도 nine-tab의 shadowRoot를 관통하여 데이터를 스캔합니다.
             const diff = this.#tabContainer.shadowRoot.querySelector(`nine-diff.${layer}`);
             const currentContent = diff ? diff.getContents() : asis_source;