@nine-lab/nine-mu 0.1.293 → 0.1.295

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nine-lab/nine-mu",
-  "version": "0.1.293",
+  "version": "0.1.295",
   "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 {
     }
 
     /**
-     * 💡 [100% 데이터 기반 동적 탭/에디터 빌드 엔진]
+     * 💡 [원프레임 통짜 일괄 동적 빌드 엔진]
      */
     async data(fileList) {
         if (!Array.isArray(fileList) || fileList.length === 0) return this;
         this.#fileList = fileList;
 
-        // 1. 🧼 새로운 바인딩 세션 시작 전 Light DOM 자식 노드 전량 청소 (이전 잔상 제거)
+        // 1. 🧼 이전 실행 세션 흔적 깨끗하게 포맷
         if (this.#tabContainer && typeof this.#tabContainer.clearTabs === 'function') {
             this.#tabContainer.clearTabs();
         }
@@ -73,40 +73,45 @@ export class NineDiffPopup extends HTMLElement {
             return 'javascript';
         };
 
-        // 2. ⚡ 들어온 데이터 갯수와 레이어 명세에 맞춰 <nine-tab-page> 구조를 조립하여 밀어 넣습니다.
+        // 2. ⚡ [핵심 교정]: appendChild로 하나씩 밀어넣지 않고, 통짜 마크업 문자열로 조립합니다.
+        let totalTabHtml = "";
+
         fileList.forEach((file) => {
             const { layer, full_path } = file;
             const fileName = full_path.split('/').pop() || "Unknown";
             const captionName = `${layer.toUpperCase()} (${fileName})`;
 
-            // 💡 정석 컴포넌트 규격에 맞추어 태그 템플릿 스트링 형태로 가공하여 push
-            const targetHtmlContent = `<nine-diff class="${layer}"></nine-diff>`;
-
-            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. ⏰ [결정적 타이밍 튜닝]: nine-tab 내부에서 refresh() 연산이 끝나
-        //    에디터 단말 장치들이 섀도우 돔 안착을 완벽하게 끝마치도록 더블 프레임 마진(requestAnimationFrame) 확보
+        // 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;
 
-                    // nine-tab의 shadowRoot 내부 관제를 통해 안정적으로 분할 이사 완료된 에디터 인스턴스 정밀 추적
+                    // 이제 정상적인 통로(nine-tab의 shadowRoot 내부)로 안전하게 이사 간 에디터 타겟팅 추적
                     const diff = this.#tabContainer.shadowRoot.querySelector(`nine-diff.${layer}`);
 
                     if (diff && typeof diff.initialize === 'function') {
                         const lang = detectLanguage(full_path);
-                        // 에디터 핵심 모듈(CodeMirror) 기동 시그널 전송
                         diff.initialize(asis_source || "", source || "", lang);
-                    } else {
-                        trace.error(`❌ 동적 에디터 탐색 유실: nine-diff.${layer}`);
                     }
                 });
 
-                // 4. 모든 데이터 로드가 에러 없이 완전히 탑재된 것을 확정하고 포커싱 액츄에이터 최종 가동!
+                // 소스 바인딩이 완벽히 끝난 최종 시점에 포커싱 액츄에이터 가동 (첫 번째 동적 탭 클릭 강제 트리거)
                 if (this.#tabContainer && typeof this.#tabContainer.initialize === 'function') {
                     this.#tabContainer.initialize();
                 }
@@ -117,15 +122,13 @@ export class NineDiffPopup extends HTMLElement {
     }
 
     /**
-     * 💡 [일괄 물리 파일 저장]
+     * 💡 [일괄 물리 저장]
      */
     async #handleConfirmAll() {
         const payloadList = [];
 
         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;