@nine-lab/nine-mu 0.1.292 → 0.1.294

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nine-lab/nine-mu",
-  "version": "0.1.292",
+  "version": "0.1.294",
   "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,12 +32,7 @@ export class NineDiffPopup extends HTMLElement {
             </style>
             
             <nine-dialog>
-                <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>
+                <nine-tab theme="theme-3"></nine-tab>
                 
                 <div class="footer">
                     <button class="btn btn-cancel">취소</button>
@@ -59,12 +54,17 @@ export class NineDiffPopup extends HTMLElement {
     }
 
     /**
-     * 💡 [틀 고정 + 에디터 동적 인스턴싱 엔진]
+     * 💡 [완벽 캡슐화 데이터 피딩]
      */
     async data(fileList) {
         if (!Array.isArray(fileList) || fileList.length === 0) return this;
         this.#fileList = fileList;
 
+        // 1. 🧼 이전 세션의 동적 버튼과 컨텐츠들을 완전히 초기화(Clean)
+        if (this.#tabContainer && typeof this.#tabContainer.clearTabs === 'function') {
+            this.#tabContainer.clearTabs();
+        }
+
         const detectLanguage = (path) => {
             const lower = (path || "").toLowerCase();
             if (lower.endsWith('.xml')) return 'xml';
@@ -73,62 +73,39 @@ export class NineDiffPopup extends HTMLElement {
             return 'javascript';
         };
 
-        // 1. ⏰ 자식 nine-tab의 오리지널 뼈대 파싱이 완벽히 마운트될 때까지 1차 대기
+        // 2. ⚡ 백엔드 명세 개수만큼 순수하게 고유 관제탑 API만 트리거
+        fileList.forEach((file) => {
+            const { layer, full_path } = file;
+            const fileName = full_path.split('/').pop() || "Unknown";
+            const captionName = `${layer.toUpperCase()} (${fileName})`;
+
+            // 날것의 에디터 마크업 문자열 패키징
+            const targetHtmlContent = `<nine-diff class="${layer}"></nine-diff>`;
+
+            // 💡 핵심: 정석대로 NineTab 내부 실시간 조립 기동 지시
+            if (this.#tabContainer && typeof this.#tabContainer.addTabPage === 'function') {
+                this.#tabContainer.addTabPage(captionName, targetHtmlContent);
+            }
+        });
+
+        // 3. ⏰ 데이터 주입 연산 실행
+        // 요소를 섀도우 돔의 가시 렌더 트리에 직접 꽂았기 때문에 긴 지연 시간이 전혀 필요 없습니다.
         setTimeout(() => {
-            const activeLayers = fileList.map(f => f.layer);
-            const tabButtons = this.#tabContainer.shadowRoot.querySelectorAll('.tab-button');
-            const targetLayers = ["MyBatis", "Service", "Controller", "JavaScript"];
-
-            targetLayers.forEach((layerName, index) => {
-                const currentBtn = tabButtons[index];
-                const pageBody = this.#tabContainer.shadowRoot.getElementById(`content${index}`);
-
-                if (!pageBody) return;
-
-                if (activeLayers.includes(layerName)) {
-                    const fileData = fileList.find(f => f.layer === layerName);
-                    const fileName = fileData.full_path.split('/').pop() || "Unknown";
-
-                    if (currentBtn) {
-                        currentBtn.textContent = `${layerName.toUpperCase()} (${fileName})`;
-                        currentBtn.style.display = "unset";
-                    }
-
-                    // 💡 에디터 슬롯 동적 재생성
-                    pageBody.innerHTML = `<nine-diff class="${layerName}"></nine-diff>`;
-                } else {
-                    if (currentBtn) {
-                        currentBtn.style.display = "none";
-                        currentBtn.classList.remove("active");
-                    }
-                    pageBody.innerHTML = "";
-                }
-            });
+            fileList.forEach((file) => {
+                const { layer, full_path, asis_source, source } = file;
+                const diff = this.#tabContainer.shadowRoot.querySelector(`nine-diff.${layer}`);
 
-            // 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();
-                    }
-                });
+                if (diff && typeof diff.initialize === 'function') {
+                    const lang = detectLanguage(full_path);
+                    diff.initialize(asis_source || "", source || "", lang);
+                }
             });
 
-        }, 120);
+            // 4. 모든 소스 동기화 완료 후 오리지널 포커싱 액츄에이터 트리거 (첫 번째 활성 탭 열기)
+            if (this.#tabContainer && typeof this.#tabContainer.initialize === 'function') {
+                this.#tabContainer.initialize();
+            }
+        }, 50);
 
         return this;
     }