@nine-lab/nine-mu 0.1.294 → 0.1.296

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nine-lab/nine-mu",
-  "version": "0.1.294",
+  "version": "0.1.296",
   "description": "AI-Driven Full-Stack Code Fabrication Engine",
   "type": "module",
   "main": "./dist/nine-mu.umd.js",
@@ -24,7 +24,7 @@
     "@nine-lab/nine-ai": "*",
     "@nine-lab/nine-nomenu": "*",
     "@nine-lab/nine-util": "^0.9.126",
-    "@nine-lab/nine-ux": "^0.1.243",
+    "@nine-lab/nine-ux": "^0.1.244",
     "terser": "^5.31.0",
     "vite": "^6.0.0"
   },

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")}";` : "";
@@ -54,13 +54,13 @@ export class NineDiffPopup extends HTMLElement {
     }
 
     /**
-     * 💡 [완벽 캡슐화 데이터 피딩]
+     * 💡 [원프레임 통짜 일괄 동적 빌드 엔진]
      */
     async data(fileList) {
         if (!Array.isArray(fileList) || fileList.length === 0) return this;
         this.#fileList = fileList;
 
-        // 1. 🧼 이전 세션의 동적 버튼과 컨텐츠들을 완전히 초기화(Clean)
+        // 1. 🧼 이전 실행 세션 흔적 깨끗하게 포맷
         if (this.#tabContainer && typeof this.#tabContainer.clearTabs === 'function') {
             this.#tabContainer.clearTabs();
         }
@@ -73,39 +73,50 @@ export class NineDiffPopup extends HTMLElement {
             return 'javascript';
         };
 
-        // 2. ⚡ 백엔드 명세 개수만큼 순수하게 고유 관제탑 API만 트리거
+        // 2. ⚡ [핵심 교정]: appendChild로 하나씩 밀어넣지 않고, 통짜 마크업 문자열로 조립합니다.
+        let totalTabHtml = "";
+
         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);
-            }
+            totalTabHtml += `
+                <nine-tab-page caption="${captionName}">
+                    <nine-diff class="${layer}"></nine-diff>
+                </nine-tab-page>
+            `;
         });
 
-        // 3. ⏰ 데이터 주입 연산 실행
-        // 요소를 섀도우 돔의 가시 렌더 트리에 직접 꽂았기 때문에 긴 지연 시간이 전혀 필요 없습니다.
-        setTimeout(() => {
-            fileList.forEach((file) => {
-                const { layer, full_path, asis_source, source } = file;
-                const diff = this.#tabContainer.shadowRoot.querySelector(`nine-diff.${layer}`);
+        // 3. 🚀 단 한 번의 연산으로 Light DOM 트리에 완전 슛 주입!
+        this.#tabContainer.innerHTML = totalTabHtml;
+
+        // 4. ⚙️ 주입이 끝났으므로 nine-tab의 오리지널 기동 초기화 로직(#init)을 강제로 다시 깨웁니다.
+        if (this.#tabContainer && typeof this.#tabContainer.connectedCallback === 'function') {
+            this.#tabContainer.connectedCallback();
+        }
+
+        // 5. ⏰ 브라우저가 일괄 생성된 하위 에디터들의 구조 해석을 완벽히 마칠 수 있도록 더블 프레임 마진 스케줄링
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                fileList.forEach((file) => {
+                    const { layer, full_path, asis_source, source } = file;
 
-                if (diff && typeof diff.initialize === 'function') {
-                    const lang = detectLanguage(full_path);
-                    diff.initialize(asis_source || "", source || "", lang);
+                    // 이제 정상적인 통로(nine-tab의 shadowRoot 내부)로 안전하게 이사 간 에디터 타겟팅 추적
+                    const diff = this.#tabContainer.shadowRoot.querySelector(`nine-diff.${layer}`);
+
+                    if (diff && typeof diff.initialize === 'function') {
+                        const lang = detectLanguage(full_path);
+                        diff.initialize(asis_source || "", source || "", lang);
+                    }
+                });
+
+                // 소스 바인딩이 완벽히 끝난 최종 시점에 포커싱 액츄에이터 가동 (첫 번째 동적 탭 클릭 강제 트리거)
+                if (this.#tabContainer && typeof this.#tabContainer.initialize === 'function') {
+                    this.#tabContainer.initialize();
                 }
             });
-
-            // 4. 모든 소스 동기화 완료 후 오리지널 포커싱 액츄에이터 트리거 (첫 번째 활성 탭 열기)
-            if (this.#tabContainer && typeof this.#tabContainer.initialize === 'function') {
-                this.#tabContainer.initialize();
-            }
-        }, 50);
+        });
 
         return this;
     }