@nine-lab/nine-mu 0.1.307 → 0.1.309

package/package.json

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

package/public/css/nine-mu.css

@@ -804,8 +804,8 @@
 }
 
 
-
-:host(nine-diff-popup) {
+:host(nine-diff-popup),
+:host(nine-menu-diff-popup) {
 
 	div.buttons {
 		position: absolute;
@@ -862,6 +862,7 @@
 	}
 }
 
+
 :host(nine-diff) {
 	width: 100%;
 	height: 100%;

package/src/components/NineDiff.js

@@ -166,6 +166,10 @@ export class NineDiff extends HTMLElement {
 	#tobeEditorView;
 	#asisEditorEl;
 	#tobeEditorEl;
+	#isDirty = false;
+	#initialAsisSrc;
+	#initialTobeSrc;
+
 
 	#languageCompartment = new Compartment();
 
@@ -181,6 +185,9 @@ export class NineDiff extends HTMLElement {
 		return this.#tobeEditorView;
 	}
 
+	get isDirty() {
+		return this.#isDirty;
+	}
 
 	constructor() {
 		super();
@@ -233,10 +240,19 @@ export class NineDiff extends HTMLElement {
 		}
 	}
 
+
 	getContents = () => {
 		return (this.#tobeEditorView) ? this.#tobeEditorView.state.doc.toString() : "";
 	};
 
+	getAsisContents = () => {
+		return (this.#asisEditorView) ? this.#asisEditorView.state.doc.toString() : "";
+	};
+
+	getTobeContents = () => {
+		return (this.#tobeEditorView) ? this.#tobeEditorView.state.doc.toString() : "";
+	};
+
 	#initCodeMirror = () => {
 
 		let asisReady = false;
@@ -299,6 +315,10 @@ export class NineDiff extends HTMLElement {
 							asisReady = true;
 							checkAllReady(); // ASIS 준비 완료
 						}
+
+						if (update.docChanged) {
+							this.#checkDirtyState();
+						}
 					})
 				]
 			}),
@@ -321,6 +341,10 @@ export class NineDiff extends HTMLElement {
 							tobeReady = true;
 							checkAllReady(); // ASIS 준비 완료
 						}
+
+						if (update.docChanged) {
+							this.#checkDirtyState();
+						}
 					})
 				]
 			}),
@@ -330,6 +354,25 @@ export class NineDiff extends HTMLElement {
 		this.#setupScrollSync();
 	};
 
+	#checkDirtyState = () => {
+		const currentAsis = this.getAsisContents();
+		const currentTobe = this.getTobeContents();
+
+		// 원본 소스와 하나라도 다르면 dirty 상태로 판정
+		const nextDirty = (currentAsis !== this.#initialAsisSrc) || (currentTobe !== this.#initialTobeSrc);
+
+		// 상태가 바뀔 때만 이벤트를 디스패치해서 불필요한 이벤트 연발을 막음
+		if (this.#isDirty !== nextDirty) {
+			this.#isDirty = nextDirty;
+			this.dispatchEvent(new CustomEvent('change-dirty', {
+				detail: { isDirty: this.#isDirty },
+				bubbles: true,
+				composed: true
+			}));
+			trace.log(`[NineDiff] 상태 변경 - isDirty: ${this.#isDirty}`);
+		}
+	};
+
 	#setupScrollSync = () => {
 		if (this._asisScrollHandler) {
 			this.#asisEditorView.scrollDOM.removeEventListener('scroll', this._asisScrollHandler);
@@ -497,6 +540,9 @@ export class NineDiff extends HTMLElement {
 		//console.log(src1, src2, language);
 
 		this.#isScrollSyncActive = false;
+		this.#isDirty = false;
+		this.#initialAsisSrc = src1 ?? "";
+		this.#initialTobeSrc = src2 ?? "";
 
 		let langExtension;
 		switch(language) {

package/src/components/NineMenuDiffPopup.js

@@ -48,8 +48,16 @@ export class NineMenuDiffPopup extends HTMLElement {
         this.#dialog = this.shadowRoot.querySelector('nine-dialog');
         this.#diffView = this.shadowRoot.querySelector('nine-diff');
 
-        this.shadowRoot.querySelector('.btn-confirm').onclick = () => this.#handleConfirm();
+        const $btnConfirm = this.shadowRoot.querySelector('.btn-confirm');
+
+        $btnConfirm.onclick = () => this.#handleConfirm();
         this.shadowRoot.querySelector('.btn-cancel').onclick = () => this.#handleCancel();
+
+        this.#diffView.addEventListener('change-dirty', (e) => {
+            const { isDirty } = e.detail;
+            console.log(e);
+            $btnConfirm.disabled = !isDirty; // 수정되었을 때만 저장 버튼 활성화
+        });
     }
 
     popup() {
@@ -104,7 +112,7 @@ export class NineMenuDiffPopup extends HTMLElement {
 
     #handleConfirm() {
         // 에디터에서 직접 콘텐츠 추출
-        const content = this.#diffView ? this.#diffView.getContents() : this.#asisBackup;
+        const content = this.#diffView ? this.#diffView.getAsisContents() : this.#asisBackup;
 
         const params = {
             packageName: this.#host.getAttribute('package-name'),