@nine-lab/nine-mu 0.1.285 → 0.1.287

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nine-lab/nine-mu",
-  "version": "0.1.285",
+  "version": "0.1.287",
   "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": "*",
+    "@nine-lab/nine-ux": "^0.1.243",
     "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")}";` : "";
@@ -49,9 +49,9 @@ export class NineDiffPopup extends HTMLElement {
                     flex-direction: column;
                     height: 100%;
                 }
-                /* 💡 하얗게 안 보이는 현상을 방지하기 위해 동적 삽입될 에디터 영역의 높이를 확실히 보장 */
+                /* 💡 하얗게 안 보이는 현상을 방지하기 위해 에디터 영역의 높이를 확실히 보장 */
                 .diff-wrapper {
-                    height: calc(80vh - 120px); 
+                    height: calc(80vh - 160px); 
                     width: 100%;
                     display: block;
                 }
@@ -95,16 +95,17 @@ export class NineDiffPopup extends HTMLElement {
     }
 
     /**
-     * 💡 [100% 동적 빌딩 시스템]
-     * 들어온 데이터 개수에 정확히 맞추어 런타임에 탭 페이지와 에디터를 일대일 매핑으로 직접 조립합니다.
+     * 💡 [정석 데이터 위임 연동 엔진]
      * @param {Array} fileList - [{ layer: "MyBatis", full_path: "...", asis_source: "...", source: "..." }]
      */
     async data(fileList) {
         if (!Array.isArray(fileList) || fileList.length === 0) return this;
         this.#fileList = fileList;
 
-        // 1. 🧼 이전 실행 흔적이 있다면 동적 컨텐츠 내부를 완전히 청소 (인덱스 리셋)
-        this.#tabContainer.innerHTML = "";
+        // 1. 🧼 nine-tab 내부에 구축된 일괄 정화 API를 호출하여 기존 버퍼 완전 리셋 (React 가상 DOM 충돌 차단)
+        if (this.#tabContainer && typeof this.#tabContainer.clearTabs === 'function') {
+            this.#tabContainer.clearTabs();
+        }
 
         // 확장자 기반 주석/언어 유추 헬퍼
         const detectLanguage = (path) => {
@@ -115,64 +116,53 @@ export class NineDiffPopup extends HTMLElement {
             return 'javascript';
         };
 
-        // 2. ⚡ 수신된 파일 갯수만큼 루프를 돌며 필요한 요소만 정확히 DOM 생성(Injection)
+        // 2. ⚡ 백엔드 조립 완료 데이터를 순회하며 선언적 주입 기동
         fileList.forEach((file) => {
-            const { layer, full_path } = file;
-            const lang = detectLanguage(full_path);
+            const { layer, full_path, asis_source, source } = file;
             const fileName = full_path.split('/').pop() || "Unknown";
-            const captionName = `${layer.toUpperCase()} (${fileName})`; // 예: MYBATIS (MemberUsersMapper.xml)
-
-            // A. <nine-tab-page> 런타임 인스턴싱
-            const tabPage = document.createElement('nine-tab-page');
-            tabPage.setAttribute('caption', captionName);
+            const captionName = `${layer.toUpperCase()} (${fileName})`;
 
-            // B. 높이 유실 방어용 래퍼 생성
-            const diffWrapper = document.createElement('div');
-            diffWrapper.className = 'diff-wrapper';
-
-            // C. <nine-diff> 에디터 장치 동적 생성 및 매칭용 레이어 클래스 주입
-            const diffView = document.createElement('nine-diff');
-            diffView.className = layer; // 예: class="MyBatis" 또는 class="JavaScript"
+            // 내부 래퍼와 에디터 뼈대 마크업 준비
+            const targetHtmlContent = `
+                <div class="diff-wrapper">
+                    <nine-diff class="${layer}"></nine-diff>
+                </div>
+            `;
 
-            // D. 하위 트리 계층 결합 및 실제 탭 컨테이너 레이아웃에 안착
-            diffWrapper.appendChild(diffView);
-            tabPage.appendChild(diffWrapper);
-            this.#tabContainer.appendChild(tabPage);
+            // 3. 🚀 nine-tab 확장 인터페이스를 호출하여 표준 Light DOM 트리에 안전하게 탑재
+            if (this.#tabContainer && typeof this.#tabContainer.addTabPage === 'function') {
+                this.#tabContainer.addTabPage(captionName, targetHtmlContent);
+            }
         });
 
-        // 3. ⏰ 브라우저가 동적으로 추가된 태그들을 완벽하게 렌더트리에 마운트할 수 있도록 비동기 여유 마진 확보
+        // 4. ⏰ 조립 리빌드가 끝난 후, 섀도우 돔 내에 바인딩 완료된 각 에디터 장치들에 순수 소스코드 주입 실행
+        // (addTabPage 내부에서 refresh()와 initialize()가 돌기 때문에 부드럽게 돔을 돌파합니다)
         setTimeout(() => {
             fileList.forEach((file) => {
-                const { layer, asis_source, source } = file;
-                const diff = this.shadowRoot.querySelector(`nine-diff.${layer}`);
+                const { layer, full_path, asis_source, source } = file;
+                const diff = this.shadowRoot.querySelector(`nine-tab`).shadowRoot.querySelector(`nine-diff.${layer}`);
 
                 if (diff) {
-                    const lang = detectLanguage(file.full_path);
-                    // 확보된 실제 에디터 버퍼 장치에 소스코드 강제 바인딩 초기화
+                    const lang = detectLanguage(full_path);
                     diff.initialize(asis_source || "", source || "", lang);
                 }
             });
-
-            // E. 데이터 주입이 모두 완벽히 끝난 시점에 nine-tab 컴포넌트의 가상 빌더 엔진 트리거!
-            if (this.#tabContainer && typeof this.#tabContainer.initialize === 'function') {
-                this.#tabContainer.initialize();
-            }
-        }, 150); // 150ms의 마진 타임 적용
+        }, 50); // 안전 마운트를 위한 최소한의 틱 디레이징 마진만 유지
 
         return this;
     }
 
     /**
-     * 💡 [일괄 물리 저장]
+     * 💡 [일괄 물리 파일 라이팅]
      */
     async #handleConfirmAll() {
         const payloadList = [];
 
         for (const file of this.#fileList) {
             const { layer, full_path, asis_source } = file;
-            // 각 레이어 클래스로 지정해 둔 동적 에디터를 순회하며 텍스트 캡처
-            const diff = this.shadowRoot.querySelector(`nine-diff.${layer}`);
 
+            // nine-tab의 Shadow DOM 내부에 캡슐화되어 렌더링된 에디터 인스턴스 타겟 셀렉팅 추적
+            const diff = this.shadowRoot.querySelector(`nine-tab`).shadowRoot.querySelector(`nine-diff.${layer}`);
             const currentContent = diff ? diff.getContents() : asis_source;
 
             payloadList.push({