@nine-lab/nine-mu 0.1.20 → 0.1.22

package/package.json

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

package/src/components/NineDiffContainer.js

@@ -60,4 +60,6 @@ export class NineDiffContainer extends HTMLElement {
 	}
 }
 
-customElements.define("nine-diff-container", NineDiffContainer);
+if (!customElements.get("nine-diff-container")) {
+	customElements.define("nine-diff-container", NineDiffContainer);
+}

package/src/components/NineDiffPopup.js

@@ -0,0 +1,87 @@
+import { trace } from '@nine-lab/nine-util';
+
+class NineDiffPopup extends HTMLElement {
+    #container = null;
+    #dialog = null;
+    #resolve = null;
+
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+
+    connectedCallback() {
+        this.render();
+    }
+
+    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; }
+            </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>
+                    <div class="footer">
+                        <button class="btn btn-cancel">취소</button>
+                        <button class="btn btn-confirm primary">최종 확정 및 저장</button>
+                    </div>
+                </div>
+            </nx-dialog>
+        `;
+
+        this.#dialog = this.shadowRoot.querySelector('nx-dialog');
+        this.#container = this.shadowRoot.querySelector('#diff-container');
+
+        // 버튼 이벤트 바인딩
+        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) {
+        return new Promise((resolve) => {
+            this.#resolve = resolve;
+
+            // 데이터 설정 및 팝업 표시
+            this.#container.setData(diffData);
+            this.#dialog.showModal();
+        });
+    }
+
+    #handleConfirm() {
+        const finalContent = this.#container.getContents();
+        this.#dialog.close();
+        if (this.#resolve) this.#resolve(finalContent);
+        this.remove(); // 사용 후 제거
+    }
+
+    #handleCancel() {
+        this.#dialog.close();
+        if (this.#resolve) this.#resolve(null);
+        this.remove();
+    }
+}
+
+if (!customElements.get("nine-diff-popup")) {
+    customElements.define("nine-diff-popup", NineDiffPopup);
+}