@nine-lab/nine-mu 0.1.308 → 0.1.310

package/package.json

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

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();
@@ -308,6 +315,10 @@ export class NineDiff extends HTMLElement {
 							asisReady = true;
 							checkAllReady(); // ASIS 준비 완료
 						}
+
+						if (update.docChanged) {
+							this.#checkDirtyState();
+						}
 					})
 				]
 			}),
@@ -330,6 +341,10 @@ export class NineDiff extends HTMLElement {
 							tobeReady = true;
 							checkAllReady(); // ASIS 준비 완료
 						}
+
+						if (update.docChanged) {
+							this.#checkDirtyState();
+						}
 					})
 				]
 			}),
@@ -339,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);
@@ -506,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

@@ -39,7 +39,7 @@ export class NineMenuDiffPopup extends HTMLElement {
                     </div>
                     <div class="footer">
                         <button class="btn btn-cancel">취소</button>
-                        <button class="btn btn-confirm">저장</button>
+                        <button class="btn btn-confirm" disabled>저장</button>
                     </div>
                 </div>
             </nine-dialog>
@@ -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() {