@nine-lab/nine-mu 0.1.28 → 0.1.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nine-lab/nine-mu",
-  "version": "0.1.28",
+  "version": "0.1.30",
   "description": "AI-Driven Full-Stack Code Fabrication Engine",
   "type": "module",
   "main": "./dist/nine-mu.umd.js",

package/public/css/nine-mu.css

@@ -813,10 +813,16 @@
 		cursor: pointer;
 		outline: none;
 	}
-}
-
-:host(nine-diff-container) {
 
+	nx-dialog { --dialog-width: 90vw; --dialog-height: 85vh; }
+	.main-layout { width: 100%; height: 100%; display: flex; flex-direction: column; }
+	.diff-area { flex: 1; min-height: 0; border: 1px solid #ddd; }
+	.footer {
+		display: flex; justify-content: flex-end; gap: 10px;
+		padding: 12px; background: #f9f9f9; border-top: 1px solid #eee;
+	}
+	.btn { padding: 8px 20px; cursor: pointer; border-radius: 4px; border: 1px solid #ccc; font-weight: bold; }
+	.btn-confirm { background: #007bff; color: white; border: none; }
 }
 
 :host(nine-diff) {

package/src/components/NineDiffPopup.js

@@ -1,9 +1,10 @@
 import { trace } from '@nine-lab/nine-util';
 
 export class NineDiffPopup extends HTMLElement {
-    #container = null;
     #dialog = null;
+    #diffView = null; // Container 대신 직접 에디터 뷰를 참조
     #resolve = null;
+    #asisBackup = "";
 
     constructor() {
         super();
@@ -17,62 +18,51 @@ export class NineDiffPopup extends HTMLElement {
     render() {
         this.shadowRoot.innerHTML = `
             <style>
-                @import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-ai@${__APP_VERSION__}/dist/css/nine-ai.css";
-                /* nx-dialog 내부 스타일 조정 */
-                nx-dialog { --dialog-width: 90vw; --dialog-height: 85vh; }
-                .footer { 
-                    display: flex; 
-                    justify-content: flex-end; 
-                    gap: 10px; 
-                    padding: 15px; 
-                    background: #f9f9f9; 
-                    border-top: 1px solid #ddd;
-                }
-                .btn { padding: 8px 20px; cursor: pointer; border-radius: 4px; border: 1px solid #ccc; }
-                .btn.primary { background: #007bff; color: white; border: none; }
+                @import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-mu@${__APP_VERSION__}/dist/css/nine-mu.css";
             </style>
             
             <nx-dialog>
-                <div style="width: 100%; height: 100%; display: flex; flex-direction: column;">
-                    <div style="flex: 1; min-height: 0;">
-                        <nine-diff-container id="diff-container"></nine-diff-container>
+                <div class="main-layout">
+                    <div class="diff-area">
+                        <nine-diff id="editor"></nine-diff>
                     </div>
                     <div class="footer">
                         <button class="btn btn-cancel">취소</button>
-                        <button class="btn btn-confirm primary">최종 확정 및 저장</button>
+                        <button class="btn btn-confirm">최종 확정 및 저장</button>
                     </div>
                 </div>
             </nx-dialog>
         `;
 
         this.#dialog = this.shadowRoot.querySelector('nx-dialog');
-        this.#container = this.shadowRoot.querySelector('#diff-container');
+        this.#diffView = this.shadowRoot.querySelector('#editor');
 
-        // 버튼 이벤트 바인딩
         this.shadowRoot.querySelector('.btn-confirm').onclick = () => this.#handleConfirm();
         this.shadowRoot.querySelector('.btn-cancel').onclick = () => this.#handleCancel();
     }
 
-    /**
-     * 외부 호출용 팝업 실행 메서드
-     * @param {Object} diffData - { asis, tobe, lang }
-     * @returns {Promise<string|null>} - 확정 시 수정된 텍스트, 취소 시 null
-     */
-    async popup(diffData) {
+    async popup(data) {
         return new Promise((resolve) => {
             this.#resolve = resolve;
+            this.#asisBackup = data?.asis || "";
+
+            // 에디터 초기화 (Container가 하던 일)
+            if (this.#diffView) {
+                const asisStr = typeof data.asis === 'object' ? JSON.stringify(data.asis, null, 2) : data.asis;
+                const tobeStr = typeof data.tobe === 'object' ? JSON.stringify(data.tobe, null, 2) : data.tobe;
+                this.#diffView.initialize(asisStr, tobeStr, data.lang || "javascript");
+            }
 
-            // 데이터 설정 및 팝업 표시
-            this.#container.setData(diffData);
             this.#dialog.showModal();
         });
     }
 
     #handleConfirm() {
-        const finalContent = this.#container.getContents();
+        // 에디터에서 직접 콘텐츠 추출
+        const finalContent = this.#diffView ? this.#diffView.getContents() : this.#asisBackup;
         this.#dialog.close();
         if (this.#resolve) this.#resolve(finalContent);
-        this.remove(); // 사용 후 제거
+        this.remove();
     }
 
     #handleCancel() {
@@ -82,6 +72,4 @@ export class NineDiffPopup extends HTMLElement {
     }
 }
 
-if (!customElements.get("nine-diff-popup")) {
-    customElements.define("nine-diff-popup", NineDiffPopup);
-}
+customElements.define("nine-diff-popup", NineDiffPopup);

package/src/index.js

@@ -1,7 +1,6 @@
 import { trace } from '@nine-lab/nine-util';
 import { NineChat } from './components/NineChat.js';
 import { NineDiff } from './components/NineDiff.js';
-import { NineDiffContainer } from './components/NineDiffContainer.js';
 import { NineDiffPopup } from './components/NineDiffPopup.js';
 import { NineDialog } from './components/NineDialog.js';
 
@@ -18,4 +17,4 @@ export const NineMu = {
 
 // 기본 export 및 컴포넌트 export
 export default NineMu;
-export { NineChat, NineDiff, NineDiffContainer, NineDialog, NineDiffPopup };
+export { NineChat, NineDiff, NineDialog, NineDiffPopup };

package/src/components/NineDiffContainer.js

@@ -1,58 +0,0 @@
-export class NineDiffContainer extends HTMLElement {
-	#asis = "";
-	#tobe = "";
-	#lang = "javascript";
-	#diffView = null;
-
-	constructor() {
-		super();
-		this.attachShadow({ mode: 'open' });
-	}
-
-	/**
-	 * 단일 비교 데이터를 설정합니다.
-	 * @param {Object} data - { asis, tobe, lang }
-	 */
-	setData = (data) => {
-
-		try {
-			this.#asis = data?.asis || "";
-			this.#tobe = data?.tobe || "";
-			this.#lang = data?.lang || "";
-		} catch (e) {}
-
-
-		this.render();
-	}
-
-	// 최종 결과물(사용자가 편집한 ASIS 내용)을 가져옵니다.
-	getContents = () => {
-		return this.#diffView ? this.#diffView.getContents() : this.#asis;
-	}
-
-	render() {
-		const customImport = this.getAttribute("css-path") ? `@import "${this.getAttribute("css-path")}";` : "";
-
-		this.shadowRoot.innerHTML = `
-           	<style>
-                @import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-mu@${__APP_VERSION__}/dist/css/nine-mu.css";
-                ${customImport}
-            </style>
-            
-            <div class="diff-wrapper">
-                <nine-diff id="single-diff"></nine-diff>
-            </div>
-        `;
-
-		this.#diffView = this.shadowRoot.querySelector('#single-diff');
-
-		// 데이터 주입 (DOM이 렌더링된 직후 실행)
-		if (this.#diffView) {
-			this.#diffView.initialize(this.#asis, this.#tobe, this.#lang);
-		}
-	}
-}
-
-if (!customElements.get("nine-diff-container")) {
-	customElements.define("nine-diff-container", NineDiffContainer);
-}