ide-assi 0.370.0 → 0.372.0

package/dist/bundle.cjs.js

@@ -234776,7 +234776,7 @@ function requireDiffMatchPatch () {
 
 var diffMatchPatchExports = requireDiffMatchPatch();
 
-// Diff 데코레이션을 위한 StateField 정의 (asis 에디터용)
+// Diff 데코레이션을 위한 StateField 정의 (변동 없음)
 const asisDiffDecorations = StateField.define({
 	create() { return Decoration.none; },
 	update(decorations, tr) {
@@ -234790,7 +234790,6 @@ const asisDiffDecorations = StateField.define({
 	provide: f => EditorView.decorations.from(f)
 });
 
-// Diff 데코레이션을 위한 StateField 정의 (tobe 에디터용)
 const tobeDiffDecorations = StateField.define({
 	create() { return Decoration.none; },
 	update(decorations, tr) {
@@ -234804,7 +234803,6 @@ const tobeDiffDecorations = StateField.define({
 	provide: f => EditorView.decorations.from(f)
 });
 
-// 데코레이션 업데이트를 위한 Effect (트랜잭션에 포함시켜 상태 변경 알림)
 const setAsisDecorationsEffect = StateEffect.define();
 const setTobeDecorationsEffect = StateEffect.define();
 
@@ -234817,10 +234815,9 @@ class IdeDiff extends HTMLElement {
 
 	#languageCompartment = new Compartment();
 
-	// ⭐️ 스크롤 동기화 활성/비활성화 플래그 및 핸들러 참조
 	#isScrollSyncActive = false;
-	_asisScrollHandler = null; // 클래스 속성으로 선언하여 removeEventListener에서 참조 가능
-	_tobeScrollHandler = null; // 클래스 속성으로 선언하여 removeEventListener에서 참조 가능
+	_asisScrollHandler = null;
+	_tobeScrollHandler = null;
 
 
 	constructor() {
@@ -234831,38 +234828,35 @@ class IdeDiff extends HTMLElement {
 	connectedCallback() {
 		this.shadowRoot.innerHTML = `
             <style>
-                /* ninegrid CSS 및 필요한 기본 스타일 */
+                /* ninegrid CSS 및 필요한 기본 스타일 (변동 없음) */
                 @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ideDiff.css";
                 ${ninegrid.getCustomPath(this, "ideDiff.css")}
 
-                /* CodeMirror를 위한 기본적인 Flexbox 레이아웃 */
+                /* CodeMirror를 위한 기본적인 Flexbox 레이아웃 (변동 없음) */
                 .wrapper {
                     display: flex;
                     width: 100%;
-                    height: 100%; /* 부모의 높이를 채우도록 설정 */
-                    overflow: hidden; /* 내부 스크롤을 위해 overflow 처리 */
+                    height: 100%;
+                    overflow: hidden;
                 }
                 .panel {
-                    flex: 1; /* 패널들이 남은 공간을 채우도록 */
-                    overflow: hidden; /* CodeMirror EditorView 자체가 스크롤을 처리 */
-                    min-width: 0; /* Flexbox 아이템이 content 때문에 늘어나는 것을 방지 */
+                    flex: 1;
+                    overflow: hidden;
+                    min-width: 0;
                 }
                 .cm-editor {
-                    height: 100%; /* EditorView가 부모 div의 높이를 채우도록 */
+                    height: 100%;
                 }
 
-                /* Diff 시각화를 위한 CSS 클래스 */
-                /* 줄 전체 배경색 */
-                .cm-inserted-line-bg { background-color: #e6ffe6; } /* 연한 녹색 */
-                .cm-deleted-line-bg { background-color: #ffe6e6; } /* 연한 빨간색 */
-
-                /* 인라인(단어/문자) 변경 강조 */
+                /* Diff 시각화를 위한 CSS 클래스 (변동 없음) */
+                .cm-inserted-line-bg { background-color: #e6ffe6; }
+                .cm-deleted-line-bg { background-color: #ffe6e6; }
                 .cm-inserted-inline {
-                    background-color: #90ee90; /* 밝은 녹색 */
+                    background-color: #90ee90;
                     font-weight: bold;
                 }
                 .cm-deleted-inline {
-                    background-color: #ff9999; /* 밝은 빨간색 */
+                    background-color: #ff9999;
                     text-decoration: line-through;
                     font-weight: bold;
                 }
@@ -234923,11 +234917,10 @@ class IdeDiff extends HTMLElement {
 					EditorState.readOnly.of(true),
 					this.#languageCompartment.of(javascript()),
 					asisDiffDecorations,
-					// ⭐️ 중요: 뷰가 DOM에 완전히 렌더링될 때까지 기다립니다.
+					// ⭐️ updateListener는 유지: 뷰가 DOM에 완전히 렌더링될 때까지 기다림
 					EditorView.updateListener.of((update) => {
-						// 뷰의 DOM 내용이 비어있지 않고, 아직 초기 로드가 완료되지 않았다면
 						if (update.view.contentDOM.firstChild && !update.view._initialAsisContentLoaded) {
-							update.view._initialAsisContentLoaded = true; // 플래그 설정
+							update.view._initialAsisContentLoaded = true;
 							console.log("CodeMirror ASIS view is ready for initial content.");
 						}
 					})
@@ -234946,11 +234939,10 @@ class IdeDiff extends HTMLElement {
 					EditorState.readOnly.of(true),
 					this.#languageCompartment.of(javascript()),
 					tobeDiffDecorations,
-					// ⭐️ 중요: 뷰가 DOM에 완전히 렌더링될 때까지 기다립니다.
+					// ⭐️ updateListener는 유지: 뷰가 DOM에 완전히 렌더링될 때까지 기다림
 					EditorView.updateListener.of((update) => {
-						// 뷰의 DOM 내용이 비어있지 않고, 아직 초기 로드가 완료되지 않았다면
 						if (update.view.contentDOM.firstChild && !update.view._initialTobeContentLoaded) {
-							update.view._initialTobeContentLoaded = true; // 플래그 설정
+							update.view._initialTobeContentLoaded = true;
 							console.log("CodeMirror TOBE view is ready for initial content.");
 						}
 					})
@@ -234959,14 +234951,11 @@ class IdeDiff extends HTMLElement {
 			parent: this.#tobeEditorEl
 		});
 
-		// ⭐️ 초기 스크롤 동기화는 여기서 설정만 하고, initialize에서 활성화 제어
 		this.#setupScrollSync();
 	};
 
-	// ⭐️ 스크롤 리스너를 제어할 수 있도록 플래그 및 클래스 메서드 사용
 	#setupScrollSync = () => {
-		// 기존 리스너가 있다면 제거 (중복 방지 및 disconnectedCallback에서 제거 용이)
-		if (this._asisScrollHandler) { // 핸들러가 이미 할당되어 있다면
+		if (this._asisScrollHandler) {
 			this.#asisEditorView.scrollDOM.removeEventListener('scroll', this._asisScrollHandler);
 			this.#tobeEditorView.scrollDOM.removeEventListener('scroll', this._tobeScrollHandler);
 		}
@@ -234975,7 +234964,7 @@ class IdeDiff extends HTMLElement {
 		let scrollingB = false;
 
 		this._asisScrollHandler = () => {
-			if (!this.#isScrollSyncActive) return; // 활성화되지 않았으면 스킵
+			if (!this.#isScrollSyncActive) return;
 
 			if (!scrollingB) {
 				scrollingA = true;
@@ -234986,7 +234975,7 @@ class IdeDiff extends HTMLElement {
 		};
 
 		this._tobeScrollHandler = () => {
-			if (!this.#isScrollSyncActive) return; // 활성화되지 않았으면 스킵
+			if (!this.#isScrollSyncActive) return;
 
 			if (!scrollingA) {
 				scrollingB = true;
@@ -235000,7 +234989,6 @@ class IdeDiff extends HTMLElement {
 		this.#tobeEditorView.scrollDOM.addEventListener('scroll', this._tobeScrollHandler);
 	};
 
-	// #applyDiffDecorations 함수 (이전 수정본과 동일, Text.of 사용)
 	#applyDiffDecorations = (asisSrc, tobeSrc) => {
 		const dmp = new diffMatchPatchExports.diff_match_patch();
 		const diffs = dmp.diff_main(asisSrc, tobeSrc);
@@ -235014,6 +235002,8 @@ class IdeDiff extends HTMLElement {
 		let asisCursor = 0;
 		let tobeCursor = 0;
 
+		// ⭐️ 중요: 새로운 문서 내용을 기반으로 임시 Doc 객체를 생성합니다.
+		// 이 Doc 객체를 사용하여 lineAt()을 호출합니다.
 		const asisDoc = Text.of(asisSrc.split('\n'));
 		const tobeDoc = Text.of(tobeSrc.split('\n'));
 
@@ -235123,8 +235113,7 @@ class IdeDiff extends HTMLElement {
 			return;
 		}
 
-		// 초기화 시작 시 스크롤 동기화 일시 중지
-		this.#isScrollSyncActive = false;
+		this.#isScrollSyncActive = false; // 스크롤 동기화 일시 중지
 
 		let langExtension;
 		switch(language) {
@@ -235139,6 +235128,7 @@ class IdeDiff extends HTMLElement {
 		const { asisEffect, tobeEffect } = this.#applyDiffDecorations(src1, src2);
 
 		// 1단계: 텍스트 내용 변경과 언어 확장을 먼저 디스패치합니다.
+		// 'to' 값을 현재 문서 길이 전체로 지정하여 정확한 교체를 보장합니다.
 		this.#asisEditorView.dispatch({
 			changes: { from: 0, to: this.#asisEditorView.state.doc.length, insert: src1 },
 			effects: [
@@ -235153,10 +235143,9 @@ class IdeDiff extends HTMLElement {
 			]
 		});
 
-		// 2단계: 텍스트 및 언어 변경이 완전히 적용되고 뷰가 안정화된 후,
+		// ⭐️ 2단계: 텍스트 및 언어 변경이 완전히 적용되고 뷰가 안정화될 시간을 줍니다.
 		// 다음 프레임에서 데코레이션 효과만 별도로 디스패치합니다.
 		requestAnimationFrame(() => {
-			console.log(asisEffect, tobeEffect);
 			this.#asisEditorView.dispatch({
 				effects: [asisEffect]
 			});
@@ -235164,8 +235153,8 @@ class IdeDiff extends HTMLElement {
 				effects: [tobeEffect]
 			});
 
-			// 3단계: 데코레이션까지 적용된 후 스크롤 동기화 활성화
-			// (필요하다면 여기도 requestAnimationFrame으로 한 번 더 지연시킬 수 있습니다.)
+			// ⭐️ 3단계: 데코레이션까지 적용된 후 뷰가 다시 안정화될 시간을 한 번 더 줍니다.
+			// 그 다음 프레임에서 스크롤 동기화를 활성화합니다.
 			requestAnimationFrame(() => {
 				this.#isScrollSyncActive = true;
 				// 필요하다면 여기서 초기 스크롤 위치를 0으로 리셋하여 정렬을 보장할 수 있습니다.

package/dist/bundle.esm.js

@@ -234772,7 +234772,7 @@ function requireDiffMatchPatch () {
 
 var diffMatchPatchExports = requireDiffMatchPatch();
 
-// Diff 데코레이션을 위한 StateField 정의 (asis 에디터용)
+// Diff 데코레이션을 위한 StateField 정의 (변동 없음)
 const asisDiffDecorations = StateField.define({
 	create() { return Decoration.none; },
 	update(decorations, tr) {
@@ -234786,7 +234786,6 @@ const asisDiffDecorations = StateField.define({
 	provide: f => EditorView.decorations.from(f)
 });
 
-// Diff 데코레이션을 위한 StateField 정의 (tobe 에디터용)
 const tobeDiffDecorations = StateField.define({
 	create() { return Decoration.none; },
 	update(decorations, tr) {
@@ -234800,7 +234799,6 @@ const tobeDiffDecorations = StateField.define({
 	provide: f => EditorView.decorations.from(f)
 });
 
-// 데코레이션 업데이트를 위한 Effect (트랜잭션에 포함시켜 상태 변경 알림)
 const setAsisDecorationsEffect = StateEffect.define();
 const setTobeDecorationsEffect = StateEffect.define();
 
@@ -234813,10 +234811,9 @@ class IdeDiff extends HTMLElement {
 
 	#languageCompartment = new Compartment();
 
-	// ⭐️ 스크롤 동기화 활성/비활성화 플래그 및 핸들러 참조
 	#isScrollSyncActive = false;
-	_asisScrollHandler = null; // 클래스 속성으로 선언하여 removeEventListener에서 참조 가능
-	_tobeScrollHandler = null; // 클래스 속성으로 선언하여 removeEventListener에서 참조 가능
+	_asisScrollHandler = null;
+	_tobeScrollHandler = null;
 
 
 	constructor() {
@@ -234827,38 +234824,35 @@ class IdeDiff extends HTMLElement {
 	connectedCallback() {
 		this.shadowRoot.innerHTML = `
             <style>
-                /* ninegrid CSS 및 필요한 기본 스타일 */
+                /* ninegrid CSS 및 필요한 기본 스타일 (변동 없음) */
                 @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ideDiff.css";
                 ${ninegrid.getCustomPath(this, "ideDiff.css")}
 
-                /* CodeMirror를 위한 기본적인 Flexbox 레이아웃 */
+                /* CodeMirror를 위한 기본적인 Flexbox 레이아웃 (변동 없음) */
                 .wrapper {
                     display: flex;
                     width: 100%;
-                    height: 100%; /* 부모의 높이를 채우도록 설정 */
-                    overflow: hidden; /* 내부 스크롤을 위해 overflow 처리 */
+                    height: 100%;
+                    overflow: hidden;
                 }
                 .panel {
-                    flex: 1; /* 패널들이 남은 공간을 채우도록 */
-                    overflow: hidden; /* CodeMirror EditorView 자체가 스크롤을 처리 */
-                    min-width: 0; /* Flexbox 아이템이 content 때문에 늘어나는 것을 방지 */
+                    flex: 1;
+                    overflow: hidden;
+                    min-width: 0;
                 }
                 .cm-editor {
-                    height: 100%; /* EditorView가 부모 div의 높이를 채우도록 */
+                    height: 100%;
                 }
 
-                /* Diff 시각화를 위한 CSS 클래스 */
-                /* 줄 전체 배경색 */
-                .cm-inserted-line-bg { background-color: #e6ffe6; } /* 연한 녹색 */
-                .cm-deleted-line-bg { background-color: #ffe6e6; } /* 연한 빨간색 */
-
-                /* 인라인(단어/문자) 변경 강조 */
+                /* Diff 시각화를 위한 CSS 클래스 (변동 없음) */
+                .cm-inserted-line-bg { background-color: #e6ffe6; }
+                .cm-deleted-line-bg { background-color: #ffe6e6; }
                 .cm-inserted-inline {
-                    background-color: #90ee90; /* 밝은 녹색 */
+                    background-color: #90ee90;
                     font-weight: bold;
                 }
                 .cm-deleted-inline {
-                    background-color: #ff9999; /* 밝은 빨간색 */
+                    background-color: #ff9999;
                     text-decoration: line-through;
                     font-weight: bold;
                 }
@@ -234919,11 +234913,10 @@ class IdeDiff extends HTMLElement {
 					EditorState.readOnly.of(true),
 					this.#languageCompartment.of(javascript()),
 					asisDiffDecorations,
-					// ⭐️ 중요: 뷰가 DOM에 완전히 렌더링될 때까지 기다립니다.
+					// ⭐️ updateListener는 유지: 뷰가 DOM에 완전히 렌더링될 때까지 기다림
 					EditorView.updateListener.of((update) => {
-						// 뷰의 DOM 내용이 비어있지 않고, 아직 초기 로드가 완료되지 않았다면
 						if (update.view.contentDOM.firstChild && !update.view._initialAsisContentLoaded) {
-							update.view._initialAsisContentLoaded = true; // 플래그 설정
+							update.view._initialAsisContentLoaded = true;
 							console.log("CodeMirror ASIS view is ready for initial content.");
 						}
 					})
@@ -234942,11 +234935,10 @@ class IdeDiff extends HTMLElement {
 					EditorState.readOnly.of(true),
 					this.#languageCompartment.of(javascript()),
 					tobeDiffDecorations,
-					// ⭐️ 중요: 뷰가 DOM에 완전히 렌더링될 때까지 기다립니다.
+					// ⭐️ updateListener는 유지: 뷰가 DOM에 완전히 렌더링될 때까지 기다림
 					EditorView.updateListener.of((update) => {
-						// 뷰의 DOM 내용이 비어있지 않고, 아직 초기 로드가 완료되지 않았다면
 						if (update.view.contentDOM.firstChild && !update.view._initialTobeContentLoaded) {
-							update.view._initialTobeContentLoaded = true; // 플래그 설정
+							update.view._initialTobeContentLoaded = true;
 							console.log("CodeMirror TOBE view is ready for initial content.");
 						}
 					})
@@ -234955,14 +234947,11 @@ class IdeDiff extends HTMLElement {
 			parent: this.#tobeEditorEl
 		});
 
-		// ⭐️ 초기 스크롤 동기화는 여기서 설정만 하고, initialize에서 활성화 제어
 		this.#setupScrollSync();
 	};
 
-	// ⭐️ 스크롤 리스너를 제어할 수 있도록 플래그 및 클래스 메서드 사용
 	#setupScrollSync = () => {
-		// 기존 리스너가 있다면 제거 (중복 방지 및 disconnectedCallback에서 제거 용이)
-		if (this._asisScrollHandler) { // 핸들러가 이미 할당되어 있다면
+		if (this._asisScrollHandler) {
 			this.#asisEditorView.scrollDOM.removeEventListener('scroll', this._asisScrollHandler);
 			this.#tobeEditorView.scrollDOM.removeEventListener('scroll', this._tobeScrollHandler);
 		}
@@ -234971,7 +234960,7 @@ class IdeDiff extends HTMLElement {
 		let scrollingB = false;
 
 		this._asisScrollHandler = () => {
-			if (!this.#isScrollSyncActive) return; // 활성화되지 않았으면 스킵
+			if (!this.#isScrollSyncActive) return;
 
 			if (!scrollingB) {
 				scrollingA = true;
@@ -234982,7 +234971,7 @@ class IdeDiff extends HTMLElement {
 		};
 
 		this._tobeScrollHandler = () => {
-			if (!this.#isScrollSyncActive) return; // 활성화되지 않았으면 스킵
+			if (!this.#isScrollSyncActive) return;
 
 			if (!scrollingA) {
 				scrollingB = true;
@@ -234996,7 +234985,6 @@ class IdeDiff extends HTMLElement {
 		this.#tobeEditorView.scrollDOM.addEventListener('scroll', this._tobeScrollHandler);
 	};
 
-	// #applyDiffDecorations 함수 (이전 수정본과 동일, Text.of 사용)
 	#applyDiffDecorations = (asisSrc, tobeSrc) => {
 		const dmp = new diffMatchPatchExports.diff_match_patch();
 		const diffs = dmp.diff_main(asisSrc, tobeSrc);
@@ -235010,6 +234998,8 @@ class IdeDiff extends HTMLElement {
 		let asisCursor = 0;
 		let tobeCursor = 0;
 
+		// ⭐️ 중요: 새로운 문서 내용을 기반으로 임시 Doc 객체를 생성합니다.
+		// 이 Doc 객체를 사용하여 lineAt()을 호출합니다.
 		const asisDoc = Text.of(asisSrc.split('\n'));
 		const tobeDoc = Text.of(tobeSrc.split('\n'));
 
@@ -235119,8 +235109,7 @@ class IdeDiff extends HTMLElement {
 			return;
 		}
 
-		// 초기화 시작 시 스크롤 동기화 일시 중지
-		this.#isScrollSyncActive = false;
+		this.#isScrollSyncActive = false; // 스크롤 동기화 일시 중지
 
 		let langExtension;
 		switch(language) {
@@ -235135,6 +235124,7 @@ class IdeDiff extends HTMLElement {
 		const { asisEffect, tobeEffect } = this.#applyDiffDecorations(src1, src2);
 
 		// 1단계: 텍스트 내용 변경과 언어 확장을 먼저 디스패치합니다.
+		// 'to' 값을 현재 문서 길이 전체로 지정하여 정확한 교체를 보장합니다.
 		this.#asisEditorView.dispatch({
 			changes: { from: 0, to: this.#asisEditorView.state.doc.length, insert: src1 },
 			effects: [
@@ -235149,10 +235139,9 @@ class IdeDiff extends HTMLElement {
 			]
 		});
 
-		// 2단계: 텍스트 및 언어 변경이 완전히 적용되고 뷰가 안정화된 후,
+		// ⭐️ 2단계: 텍스트 및 언어 변경이 완전히 적용되고 뷰가 안정화될 시간을 줍니다.
 		// 다음 프레임에서 데코레이션 효과만 별도로 디스패치합니다.
 		requestAnimationFrame(() => {
-			console.log(asisEffect, tobeEffect);
 			this.#asisEditorView.dispatch({
 				effects: [asisEffect]
 			});
@@ -235160,8 +235149,8 @@ class IdeDiff extends HTMLElement {
 				effects: [tobeEffect]
 			});
 
-			// 3단계: 데코레이션까지 적용된 후 스크롤 동기화 활성화
-			// (필요하다면 여기도 requestAnimationFrame으로 한 번 더 지연시킬 수 있습니다.)
+			// ⭐️ 3단계: 데코레이션까지 적용된 후 뷰가 다시 안정화될 시간을 한 번 더 줍니다.
+			// 그 다음 프레임에서 스크롤 동기화를 활성화합니다.
 			requestAnimationFrame(() => {
 				this.#isScrollSyncActive = true;
 				// 필요하다면 여기서 초기 스크롤 위치를 0으로 리셋하여 정렬을 보장할 수 있습니다.

package/dist/components/ideDiff.js

@@ -1,6 +1,6 @@
 import ninegrid from "ninegrid2";
 
-// CodeMirror 6 핵심 및 확장 임포트
+// CodeMirror 6 핵심 및 확장 임포트 (변동 없음)
 import {
 	EditorView, lineNumbers, highlightSpecialChars, drawSelection,
 	dropCursor, keymap, highlightActiveLine, highlightActiveLineGutter,
@@ -21,10 +21,10 @@ import { indentOnInput, syntaxHighlighting, defaultHighlightStyle } from "@codem
 import { lintKeymap } from "@codemirror/lint";
 import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
 
-// Diff 로직을 위해 diff-match-patch 사용
+// Diff 로직을 위해 diff-match-patch 사용 (변동 없음)
 import { diff_match_patch } from 'diff-match-patch';
 
-// Diff 데코레이션을 위한 StateField 정의 (asis 에디터용)
+// Diff 데코레이션을 위한 StateField 정의 (변동 없음)
 const asisDiffDecorations = StateField.define({
 	create() { return Decoration.none; },
 	update(decorations, tr) {
@@ -38,7 +38,6 @@ const asisDiffDecorations = StateField.define({
 	provide: f => EditorView.decorations.from(f)
 });
 
-// Diff 데코레이션을 위한 StateField 정의 (tobe 에디터용)
 const tobeDiffDecorations = StateField.define({
 	create() { return Decoration.none; },
 	update(decorations, tr) {
@@ -52,7 +51,6 @@ const tobeDiffDecorations = StateField.define({
 	provide: f => EditorView.decorations.from(f)
 });
 
-// 데코레이션 업데이트를 위한 Effect (트랜잭션에 포함시켜 상태 변경 알림)
 const setAsisDecorationsEffect = StateEffect.define();
 const setTobeDecorationsEffect = StateEffect.define();
 
@@ -65,10 +63,9 @@ export class IdeDiff extends HTMLElement {
 
 	#languageCompartment = new Compartment();
 
-	// ⭐️ 스크롤 동기화 활성/비활성화 플래그 및 핸들러 참조
 	#isScrollSyncActive = false;
-	_asisScrollHandler = null; // 클래스 속성으로 선언하여 removeEventListener에서 참조 가능
-	_tobeScrollHandler = null; // 클래스 속성으로 선언하여 removeEventListener에서 참조 가능
+	_asisScrollHandler = null;
+	_tobeScrollHandler = null;
 
 
 	constructor() {
@@ -79,38 +76,35 @@ export class IdeDiff extends HTMLElement {
 	connectedCallback() {
 		this.shadowRoot.innerHTML = `
             <style>
-                /* ninegrid CSS 및 필요한 기본 스타일 */
+                /* ninegrid CSS 및 필요한 기본 스타일 (변동 없음) */
                 @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ideDiff.css";
                 ${ninegrid.getCustomPath(this, "ideDiff.css")}
 
-                /* CodeMirror를 위한 기본적인 Flexbox 레이아웃 */
+                /* CodeMirror를 위한 기본적인 Flexbox 레이아웃 (변동 없음) */
                 .wrapper {
                     display: flex;
                     width: 100%;
-                    height: 100%; /* 부모의 높이를 채우도록 설정 */
-                    overflow: hidden; /* 내부 스크롤을 위해 overflow 처리 */
+                    height: 100%;
+                    overflow: hidden;
                 }
                 .panel {
-                    flex: 1; /* 패널들이 남은 공간을 채우도록 */
-                    overflow: hidden; /* CodeMirror EditorView 자체가 스크롤을 처리 */
-                    min-width: 0; /* Flexbox 아이템이 content 때문에 늘어나는 것을 방지 */
+                    flex: 1;
+                    overflow: hidden;
+                    min-width: 0;
                 }
                 .cm-editor {
-                    height: 100%; /* EditorView가 부모 div의 높이를 채우도록 */
+                    height: 100%;
                 }
 
-                /* Diff 시각화를 위한 CSS 클래스 */
-                /* 줄 전체 배경색 */
-                .cm-inserted-line-bg { background-color: #e6ffe6; } /* 연한 녹색 */
-                .cm-deleted-line-bg { background-color: #ffe6e6; } /* 연한 빨간색 */
-
-                /* 인라인(단어/문자) 변경 강조 */
+                /* Diff 시각화를 위한 CSS 클래스 (변동 없음) */
+                .cm-inserted-line-bg { background-color: #e6ffe6; }
+                .cm-deleted-line-bg { background-color: #ffe6e6; }
                 .cm-inserted-inline {
-                    background-color: #90ee90; /* 밝은 녹색 */
+                    background-color: #90ee90;
                     font-weight: bold;
                 }
                 .cm-deleted-inline {
-                    background-color: #ff9999; /* 밝은 빨간색 */
+                    background-color: #ff9999;
                     text-decoration: line-through;
                     font-weight: bold;
                 }
@@ -171,11 +165,10 @@ export class IdeDiff extends HTMLElement {
 					EditorState.readOnly.of(true),
 					this.#languageCompartment.of(javascript()),
 					asisDiffDecorations,
-					// ⭐️ 중요: 뷰가 DOM에 완전히 렌더링될 때까지 기다립니다.
+					// ⭐️ updateListener는 유지: 뷰가 DOM에 완전히 렌더링될 때까지 기다림
 					EditorView.updateListener.of((update) => {
-						// 뷰의 DOM 내용이 비어있지 않고, 아직 초기 로드가 완료되지 않았다면
 						if (update.view.contentDOM.firstChild && !update.view._initialAsisContentLoaded) {
-							update.view._initialAsisContentLoaded = true; // 플래그 설정
+							update.view._initialAsisContentLoaded = true;
 							console.log("CodeMirror ASIS view is ready for initial content.");
 						}
 					})
@@ -194,11 +187,10 @@ export class IdeDiff extends HTMLElement {
 					EditorState.readOnly.of(true),
 					this.#languageCompartment.of(javascript()),
 					tobeDiffDecorations,
-					// ⭐️ 중요: 뷰가 DOM에 완전히 렌더링될 때까지 기다립니다.
+					// ⭐️ updateListener는 유지: 뷰가 DOM에 완전히 렌더링될 때까지 기다림
 					EditorView.updateListener.of((update) => {
-						// 뷰의 DOM 내용이 비어있지 않고, 아직 초기 로드가 완료되지 않았다면
 						if (update.view.contentDOM.firstChild && !update.view._initialTobeContentLoaded) {
-							update.view._initialTobeContentLoaded = true; // 플래그 설정
+							update.view._initialTobeContentLoaded = true;
 							console.log("CodeMirror TOBE view is ready for initial content.");
 						}
 					})
@@ -207,14 +199,11 @@ export class IdeDiff extends HTMLElement {
 			parent: this.#tobeEditorEl
 		});
 
-		// ⭐️ 초기 스크롤 동기화는 여기서 설정만 하고, initialize에서 활성화 제어
 		this.#setupScrollSync();
 	};
 
-	// ⭐️ 스크롤 리스너를 제어할 수 있도록 플래그 및 클래스 메서드 사용
 	#setupScrollSync = () => {
-		// 기존 리스너가 있다면 제거 (중복 방지 및 disconnectedCallback에서 제거 용이)
-		if (this._asisScrollHandler) { // 핸들러가 이미 할당되어 있다면
+		if (this._asisScrollHandler) {
 			this.#asisEditorView.scrollDOM.removeEventListener('scroll', this._asisScrollHandler);
 			this.#tobeEditorView.scrollDOM.removeEventListener('scroll', this._tobeScrollHandler);
 		}
@@ -223,7 +212,7 @@ export class IdeDiff extends HTMLElement {
 		let scrollingB = false;
 
 		this._asisScrollHandler = () => {
-			if (!this.#isScrollSyncActive) return; // 활성화되지 않았으면 스킵
+			if (!this.#isScrollSyncActive) return;
 
 			if (!scrollingB) {
 				scrollingA = true;
@@ -234,7 +223,7 @@ export class IdeDiff extends HTMLElement {
 		};
 
 		this._tobeScrollHandler = () => {
-			if (!this.#isScrollSyncActive) return; // 활성화되지 않았으면 스킵
+			if (!this.#isScrollSyncActive) return;
 
 			if (!scrollingA) {
 				scrollingB = true;
@@ -248,7 +237,6 @@ export class IdeDiff extends HTMLElement {
 		this.#tobeEditorView.scrollDOM.addEventListener('scroll', this._tobeScrollHandler);
 	};
 
-	// #applyDiffDecorations 함수 (이전 수정본과 동일, Text.of 사용)
 	#applyDiffDecorations = (asisSrc, tobeSrc) => {
 		const dmp = new diff_match_patch();
 		const diffs = dmp.diff_main(asisSrc, tobeSrc);
@@ -262,6 +250,8 @@ export class IdeDiff extends HTMLElement {
 		let asisCursor = 0;
 		let tobeCursor = 0;
 
+		// ⭐️ 중요: 새로운 문서 내용을 기반으로 임시 Doc 객체를 생성합니다.
+		// 이 Doc 객체를 사용하여 lineAt()을 호출합니다.
 		const asisDoc = Text.of(asisSrc.split('\n'));
 		const tobeDoc = Text.of(tobeSrc.split('\n'));
 
@@ -371,8 +361,7 @@ export class IdeDiff extends HTMLElement {
 			return;
 		}
 
-		// 초기화 시작 시 스크롤 동기화 일시 중지
-		this.#isScrollSyncActive = false;
+		this.#isScrollSyncActive = false; // 스크롤 동기화 일시 중지
 
 		let langExtension;
 		switch(language) {
@@ -387,6 +376,7 @@ export class IdeDiff extends HTMLElement {
 		const { asisEffect, tobeEffect } = this.#applyDiffDecorations(src1, src2);
 
 		// 1단계: 텍스트 내용 변경과 언어 확장을 먼저 디스패치합니다.
+		// 'to' 값을 현재 문서 길이 전체로 지정하여 정확한 교체를 보장합니다.
 		this.#asisEditorView.dispatch({
 			changes: { from: 0, to: this.#asisEditorView.state.doc.length, insert: src1 },
 			effects: [
@@ -401,10 +391,9 @@ export class IdeDiff extends HTMLElement {
 			]
 		});
 
-		// 2단계: 텍스트 및 언어 변경이 완전히 적용되고 뷰가 안정화된 후,
+		// ⭐️ 2단계: 텍스트 및 언어 변경이 완전히 적용되고 뷰가 안정화될 시간을 줍니다.
 		// 다음 프레임에서 데코레이션 효과만 별도로 디스패치합니다.
 		requestAnimationFrame(() => {
-			console.log(asisEffect, tobeEffect);
 			this.#asisEditorView.dispatch({
 				effects: [asisEffect]
 			});
@@ -412,8 +401,8 @@ export class IdeDiff extends HTMLElement {
 				effects: [tobeEffect]
 			});
 
-			// 3단계: 데코레이션까지 적용된 후 스크롤 동기화 활성화
-			// (필요하다면 여기도 requestAnimationFrame으로 한 번 더 지연시킬 수 있습니다.)
+			// ⭐️ 3단계: 데코레이션까지 적용된 후 뷰가 다시 안정화될 시간을 한 번 더 줍니다.
+			// 그 다음 프레임에서 스크롤 동기화를 활성화합니다.
 			requestAnimationFrame(() => {
 				this.#isScrollSyncActive = true;
 				// 필요하다면 여기서 초기 스크롤 위치를 0으로 리셋하여 정렬을 보장할 수 있습니다.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ide-assi",
   "type": "module",
-  "version": "0.370.0",
+  "version": "0.372.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {

package/src/components/ideDiff.js

@@ -1,6 +1,6 @@
 import ninegrid from "ninegrid2";
 
-// CodeMirror 6 핵심 및 확장 임포트
+// CodeMirror 6 핵심 및 확장 임포트 (변동 없음)
 import {
 	EditorView, lineNumbers, highlightSpecialChars, drawSelection,
 	dropCursor, keymap, highlightActiveLine, highlightActiveLineGutter,
@@ -21,10 +21,10 @@ import { indentOnInput, syntaxHighlighting, defaultHighlightStyle } from "@codem
 import { lintKeymap } from "@codemirror/lint";
 import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
 
-// Diff 로직을 위해 diff-match-patch 사용
+// Diff 로직을 위해 diff-match-patch 사용 (변동 없음)
 import { diff_match_patch } from 'diff-match-patch';
 
-// Diff 데코레이션을 위한 StateField 정의 (asis 에디터용)
+// Diff 데코레이션을 위한 StateField 정의 (변동 없음)
 const asisDiffDecorations = StateField.define({
 	create() { return Decoration.none; },
 	update(decorations, tr) {
@@ -38,7 +38,6 @@ const asisDiffDecorations = StateField.define({
 	provide: f => EditorView.decorations.from(f)
 });
 
-// Diff 데코레이션을 위한 StateField 정의 (tobe 에디터용)
 const tobeDiffDecorations = StateField.define({
 	create() { return Decoration.none; },
 	update(decorations, tr) {
@@ -52,7 +51,6 @@ const tobeDiffDecorations = StateField.define({
 	provide: f => EditorView.decorations.from(f)
 });
 
-// 데코레이션 업데이트를 위한 Effect (트랜잭션에 포함시켜 상태 변경 알림)
 const setAsisDecorationsEffect = StateEffect.define();
 const setTobeDecorationsEffect = StateEffect.define();
 
@@ -65,10 +63,9 @@ export class IdeDiff extends HTMLElement {
 
 	#languageCompartment = new Compartment();
 
-	// ⭐️ 스크롤 동기화 활성/비활성화 플래그 및 핸들러 참조
 	#isScrollSyncActive = false;
-	_asisScrollHandler = null; // 클래스 속성으로 선언하여 removeEventListener에서 참조 가능
-	_tobeScrollHandler = null; // 클래스 속성으로 선언하여 removeEventListener에서 참조 가능
+	_asisScrollHandler = null;
+	_tobeScrollHandler = null;
 
 
 	constructor() {
@@ -79,38 +76,35 @@ export class IdeDiff extends HTMLElement {
 	connectedCallback() {
 		this.shadowRoot.innerHTML = `
             <style>
-                /* ninegrid CSS 및 필요한 기본 스타일 */
+                /* ninegrid CSS 및 필요한 기본 스타일 (변동 없음) */
                 @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ideDiff.css";
                 ${ninegrid.getCustomPath(this, "ideDiff.css")}
 
-                /* CodeMirror를 위한 기본적인 Flexbox 레이아웃 */
+                /* CodeMirror를 위한 기본적인 Flexbox 레이아웃 (변동 없음) */
                 .wrapper {
                     display: flex;
                     width: 100%;
-                    height: 100%; /* 부모의 높이를 채우도록 설정 */
-                    overflow: hidden; /* 내부 스크롤을 위해 overflow 처리 */
+                    height: 100%;
+                    overflow: hidden;
                 }
                 .panel {
-                    flex: 1; /* 패널들이 남은 공간을 채우도록 */
-                    overflow: hidden; /* CodeMirror EditorView 자체가 스크롤을 처리 */
-                    min-width: 0; /* Flexbox 아이템이 content 때문에 늘어나는 것을 방지 */
+                    flex: 1;
+                    overflow: hidden;
+                    min-width: 0;
                 }
                 .cm-editor {
-                    height: 100%; /* EditorView가 부모 div의 높이를 채우도록 */
+                    height: 100%;
                 }
 
-                /* Diff 시각화를 위한 CSS 클래스 */
-                /* 줄 전체 배경색 */
-                .cm-inserted-line-bg { background-color: #e6ffe6; } /* 연한 녹색 */
-                .cm-deleted-line-bg { background-color: #ffe6e6; } /* 연한 빨간색 */
-
-                /* 인라인(단어/문자) 변경 강조 */
+                /* Diff 시각화를 위한 CSS 클래스 (변동 없음) */
+                .cm-inserted-line-bg { background-color: #e6ffe6; }
+                .cm-deleted-line-bg { background-color: #ffe6e6; }
                 .cm-inserted-inline {
-                    background-color: #90ee90; /* 밝은 녹색 */
+                    background-color: #90ee90;
                     font-weight: bold;
                 }
                 .cm-deleted-inline {
-                    background-color: #ff9999; /* 밝은 빨간색 */
+                    background-color: #ff9999;
                     text-decoration: line-through;
                     font-weight: bold;
                 }
@@ -171,11 +165,10 @@ export class IdeDiff extends HTMLElement {
 					EditorState.readOnly.of(true),
 					this.#languageCompartment.of(javascript()),
 					asisDiffDecorations,
-					// ⭐️ 중요: 뷰가 DOM에 완전히 렌더링될 때까지 기다립니다.
+					// ⭐️ updateListener는 유지: 뷰가 DOM에 완전히 렌더링될 때까지 기다림
 					EditorView.updateListener.of((update) => {
-						// 뷰의 DOM 내용이 비어있지 않고, 아직 초기 로드가 완료되지 않았다면
 						if (update.view.contentDOM.firstChild && !update.view._initialAsisContentLoaded) {
-							update.view._initialAsisContentLoaded = true; // 플래그 설정
+							update.view._initialAsisContentLoaded = true;
 							console.log("CodeMirror ASIS view is ready for initial content.");
 						}
 					})
@@ -194,11 +187,10 @@ export class IdeDiff extends HTMLElement {
 					EditorState.readOnly.of(true),
 					this.#languageCompartment.of(javascript()),
 					tobeDiffDecorations,
-					// ⭐️ 중요: 뷰가 DOM에 완전히 렌더링될 때까지 기다립니다.
+					// ⭐️ updateListener는 유지: 뷰가 DOM에 완전히 렌더링될 때까지 기다림
 					EditorView.updateListener.of((update) => {
-						// 뷰의 DOM 내용이 비어있지 않고, 아직 초기 로드가 완료되지 않았다면
 						if (update.view.contentDOM.firstChild && !update.view._initialTobeContentLoaded) {
-							update.view._initialTobeContentLoaded = true; // 플래그 설정
+							update.view._initialTobeContentLoaded = true;
 							console.log("CodeMirror TOBE view is ready for initial content.");
 						}
 					})
@@ -207,14 +199,11 @@ export class IdeDiff extends HTMLElement {
 			parent: this.#tobeEditorEl
 		});
 
-		// ⭐️ 초기 스크롤 동기화는 여기서 설정만 하고, initialize에서 활성화 제어
 		this.#setupScrollSync();
 	};
 
-	// ⭐️ 스크롤 리스너를 제어할 수 있도록 플래그 및 클래스 메서드 사용
 	#setupScrollSync = () => {
-		// 기존 리스너가 있다면 제거 (중복 방지 및 disconnectedCallback에서 제거 용이)
-		if (this._asisScrollHandler) { // 핸들러가 이미 할당되어 있다면
+		if (this._asisScrollHandler) {
 			this.#asisEditorView.scrollDOM.removeEventListener('scroll', this._asisScrollHandler);
 			this.#tobeEditorView.scrollDOM.removeEventListener('scroll', this._tobeScrollHandler);
 		}
@@ -223,7 +212,7 @@ export class IdeDiff extends HTMLElement {
 		let scrollingB = false;
 
 		this._asisScrollHandler = () => {
-			if (!this.#isScrollSyncActive) return; // 활성화되지 않았으면 스킵
+			if (!this.#isScrollSyncActive) return;
 
 			if (!scrollingB) {
 				scrollingA = true;
@@ -234,7 +223,7 @@ export class IdeDiff extends HTMLElement {
 		};
 
 		this._tobeScrollHandler = () => {
-			if (!this.#isScrollSyncActive) return; // 활성화되지 않았으면 스킵
+			if (!this.#isScrollSyncActive) return;
 
 			if (!scrollingA) {
 				scrollingB = true;
@@ -248,7 +237,6 @@ export class IdeDiff extends HTMLElement {
 		this.#tobeEditorView.scrollDOM.addEventListener('scroll', this._tobeScrollHandler);
 	};
 
-	// #applyDiffDecorations 함수 (이전 수정본과 동일, Text.of 사용)
 	#applyDiffDecorations = (asisSrc, tobeSrc) => {
 		const dmp = new diff_match_patch();
 		const diffs = dmp.diff_main(asisSrc, tobeSrc);
@@ -262,6 +250,8 @@ export class IdeDiff extends HTMLElement {
 		let asisCursor = 0;
 		let tobeCursor = 0;
 
+		// ⭐️ 중요: 새로운 문서 내용을 기반으로 임시 Doc 객체를 생성합니다.
+		// 이 Doc 객체를 사용하여 lineAt()을 호출합니다.
 		const asisDoc = Text.of(asisSrc.split('\n'));
 		const tobeDoc = Text.of(tobeSrc.split('\n'));
 
@@ -371,8 +361,7 @@ export class IdeDiff extends HTMLElement {
 			return;
 		}
 
-		// 초기화 시작 시 스크롤 동기화 일시 중지
-		this.#isScrollSyncActive = false;
+		this.#isScrollSyncActive = false; // 스크롤 동기화 일시 중지
 
 		let langExtension;
 		switch(language) {
@@ -387,6 +376,7 @@ export class IdeDiff extends HTMLElement {
 		const { asisEffect, tobeEffect } = this.#applyDiffDecorations(src1, src2);
 
 		// 1단계: 텍스트 내용 변경과 언어 확장을 먼저 디스패치합니다.
+		// 'to' 값을 현재 문서 길이 전체로 지정하여 정확한 교체를 보장합니다.
 		this.#asisEditorView.dispatch({
 			changes: { from: 0, to: this.#asisEditorView.state.doc.length, insert: src1 },
 			effects: [
@@ -401,10 +391,9 @@ export class IdeDiff extends HTMLElement {
 			]
 		});
 
-		// 2단계: 텍스트 및 언어 변경이 완전히 적용되고 뷰가 안정화된 후,
+		// ⭐️ 2단계: 텍스트 및 언어 변경이 완전히 적용되고 뷰가 안정화될 시간을 줍니다.
 		// 다음 프레임에서 데코레이션 효과만 별도로 디스패치합니다.
 		requestAnimationFrame(() => {
-			console.log(asisEffect, tobeEffect);
 			this.#asisEditorView.dispatch({
 				effects: [asisEffect]
 			});
@@ -412,8 +401,8 @@ export class IdeDiff extends HTMLElement {
 				effects: [tobeEffect]
 			});
 
-			// 3단계: 데코레이션까지 적용된 후 스크롤 동기화 활성화
-			// (필요하다면 여기도 requestAnimationFrame으로 한 번 더 지연시킬 수 있습니다.)
+			// ⭐️ 3단계: 데코레이션까지 적용된 후 뷰가 다시 안정화될 시간을 한 번 더 줍니다.
+			// 그 다음 프레임에서 스크롤 동기화를 활성화합니다.
 			requestAnimationFrame(() => {
 				this.#isScrollSyncActive = true;
 				// 필요하다면 여기서 초기 스크롤 위치를 0으로 리셋하여 정렬을 보장할 수 있습니다.