@nine-lab/nine-mu 0.1.16 → 0.1.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nine-lab/nine-mu",
-  "version": "0.1.16",
+  "version": "0.1.18",
   "description": "AI-Driven Full-Stack Code Fabrication Engine",
   "type": "module",
   "main": "./dist/nine-mu.umd.js",
@@ -33,7 +33,7 @@
     "access": "public"
   },
   "keywords": [
-    "fab",
+    "mu",
     "codegen",
     "ai",
     "gemini",

package/src/components/NineChat.js

@@ -40,6 +40,24 @@ export class NineChat extends HTMLElement {
                 $settings.classList.toggle("expand", clicked.classList.contains('menu-setting'));
             });
         });
+
+        this.shadowRoot.querySelector(".source-gen")?.addEventListener("click", async e => {
+            const command = "";
+            const targets = "";
+
+            try {
+                const result = await this.#service.generateAll(command, targets, this.#routes);
+
+                // 4. 성공 처리
+                $status.textContent = "✅ 완료";
+                nine.alert("소스 생성 성공").rgb();
+                this.dispatchEvent(new CustomEvent('nine-mu-completed', { detail: result, bubbles: true }));
+            } catch (err) {
+                // 5. 실패 처리
+                $status.textContent = "❌ 실패";
+                nine.alert(err.message).rgb().shake();
+            }
+        });
     }
 
     // --- [그룹 2: Action] 엔터키 입력 시 서비스 호출 ---
@@ -68,7 +86,7 @@ export class NineChat extends HTMLElement {
                     // 4. 성공 처리
                     $status.textContent = "✅ 완료";
                     nine.alert("소스 생성 성공").rgb();
-                    this.dispatchEvent(new CustomEvent('nine-fab-completed', { detail: result, bubbles: true }));
+                    this.dispatchEvent(new CustomEvent('nine-mu-completed', { detail: result, bubbles: true }));
                 } catch (err) {
                     // 5. 실패 처리
                     $status.textContent = "❌ 실패";
@@ -84,7 +102,7 @@ export class NineChat extends HTMLElement {
 
         this.shadowRoot.innerHTML = `
             <style>
-                @import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-fab@${__APP_VERSION__}/dist/css/nine-mu.css";
+                @import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-mu@${__APP_VERSION__}/dist/css/nine-mu.css";
                 ${customImport}
             </style>
             <div class="wrapper">
@@ -92,7 +110,7 @@ export class NineChat extends HTMLElement {
                 <div class="container">
                     <div class="head">
                         <div class="logo"><span></span></div>
-                        <div id="status-tag" style="font-size:10px; color:#ff5722; padding:5px;">Fab Engine Ready</div>
+                        <div id="status-tag" style="font-size:10px; color:#ff5722; padding:5px;">nine-mu Engine Ready</div>
                     </div>
                     <nx-ai-chat></nx-ai-chat>
                     <div class="foot">
@@ -109,9 +127,10 @@ export class NineChat extends HTMLElement {
                 </div>
                 <div class="menu">
                     <div class="collapse-icon"></div>
-                    <div class="menu-icon menu-filter active"></div>
-                    <div class="menu-icon menu-general"></div>
+                    <div class="menu-icon menu-filter"></div>
+                    <div class="menu-icon menu-general active"></div>
                     <div class="menu-icon menu-setting"></div>
+                    <div class="menu-icon source-gen"></div>
                 </div>
             </div>
             <div class="expand-icon"></div>

package/src/components/NineDiff.js

@@ -0,0 +1,532 @@
+import { trace } from "@nine-lab/nine-util";
+
+import {
+	EditorView, lineNumbers, highlightSpecialChars, drawSelection,
+	dropCursor, keymap, highlightActiveLine, highlightActiveLineGutter,
+	Decoration, WidgetType
+} from "@codemirror/view";
+import {
+	EditorState, Compartment, StateField,
+	RangeSetBuilder,
+	StateEffect,
+	Text
+} from "@codemirror/state";
+import { history, historyKeymap, indentWithTab, selectAll, defaultKeymap } from "@codemirror/commands";
+import { searchKeymap, highlightSelectionMatches } from "@codemirror/search";
+import { indentOnInput, bracketMatching, syntaxHighlighting, defaultHighlightStyle } from "@codemirror/language";
+import { javascript } from "@codemirror/lang-javascript";
+import { lintKeymap } from "@codemirror/lint";
+import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
+
+import { diff_match_patch } from 'diff-match-patch';
+
+// --- Diff 데코레이션을 위한 StateEffect 정의 ---
+const setAsisDecorationsEffect = StateEffect.define();
+const setTobeDecorationsEffect = StateEffect.define();
+
+// --- 버튼 데코레이션을 위한 새로운 StateEffect 정의 ---
+const setAsisButtonDecorationsEffect = StateEffect.define();
+const setTobeButtonDecorationsEffect = StateEffect.define();
+
+// --- Diff 데코레이션을 위한 StateField 정의 ---
+const asisDiffDecorations = StateField.define({
+	create() {
+		return Decoration.none;
+	},
+	update(decorations, tr) {
+		decorations = decorations.map(tr.changes);
+		for (let effect of tr.effects) {
+			if (effect.is(setAsisDecorationsEffect)) {
+				return effect.value;
+			}
+		}
+		return decorations;
+	},
+	provide: f => EditorView.decorations.from(f)
+});
+
+const tobeDiffDecorations = StateField.define({
+	create() {
+		return Decoration.none;
+	},
+	update(decorations, tr) {
+		decorations = decorations.map(tr.changes);
+		for (let effect of tr.effects) {
+			if (effect.is(setTobeDecorationsEffect)) {
+				return effect.value;
+			}
+		}
+		return decorations;
+	},
+	provide: f => EditorView.decorations.from(f)
+});
+
+// --- 버튼 데코레이션을 위한 새로운 StateField 정의 ---
+const asisButtonDecorations = StateField.define({
+	create() {
+		return Decoration.none;
+	},
+	update(decorations, tr) {
+		decorations = decorations.map(tr.changes);
+		for (let effect of tr.effects) {
+			if (effect.is(setAsisButtonDecorationsEffect)) {
+				return effect.value;
+			}
+		}
+		return decorations;
+	},
+	provide: f => EditorView.decorations.from(f)
+});
+
+const tobeButtonDecorations = StateField.define({
+	create() {
+		return Decoration.none;
+	},
+	update(decorations, tr) {
+		decorations = decorations.map(tr.changes);
+		for (let effect of tr.effects) {
+			if (effect.is(setTobeButtonDecorationsEffect)) {
+				return effect.value;
+			}
+		}
+		return decorations;
+	},
+	provide: f => EditorView.decorations.from(f)
+});
+
+
+// NineDiff 클래스 외부 (파일 상단 or 하단)에 추가
+class MergeButtonWidget extends WidgetType {
+	constructor(isAsisButton, textToApply, targetEditorView, diffRange, hostComponent) {
+		super();
+		this.isAsisButton = isAsisButton; // 이 버튼이 ASIS 에디터에 붙는 버튼인가 (true) TOBE 에디터에 붙는 버튼인가 (false)
+		this.textToApply = textToApply; // 적용할 텍스트
+		this.targetEditorView = targetEditorView; // 텍스트를 적용할 에디터 뷰 (상대편 에디터)
+		this.diffRange = diffRange; // 대상 에디터에서 변경이 일어날 정확한 from/to 오프셋
+		this.hostComponent = hostComponent; // NineDiff 인스턴스 참조
+	}
+
+	// 위젯이 차지할 공간을 텍스트 줄에 할당할지 여부. false로 설정하여 버튼이 줄 사이에 끼어들지 않도록 함.
+	eq(other) { return false; }
+
+	// 위젯의 DOM 요소를 생성합니다.
+	toDOM(view) {
+		const button = document.createElement("button");
+		// SVN 기준 명칭으로 변경
+		if (this.isAsisButton) {
+			// ASIS (왼쪽) 에디터에 붙는 버튼: AI가 삭제한 것을 '삭제' (ASIS에서 제거)
+			button.className = "cm-merge-button revert"; // 'revert' 클래스 사용 (빨간색)
+			//button.textContent = "삭제"; // 텍스트 변경
+		} else {
+			// TOBE (오른쪽) 에디터에 붙는 버튼: AI가 추가한 것을 '적용' (ASIS에 반영)
+			button.className = "cm-merge-button accept"; // 'accept' 클래스 사용 (녹색)
+			//button.textContent = "← 적용"; // 화살표 방향 변경
+		}
+
+		// 클릭 이벤트 핸들러
+		button.addEventListener("click", () => {
+			trace.log(`버튼 클릭: ${this.isAsisButton ? 'ASIS 쪽 (삭제)' : 'TOBE 쪽 (적용)'}`, this.textToApply);
+			trace.log("대상 에디터:", this.targetEditorView === this.hostComponent.asisEditorView ? "ASIS" : "TOBE");
+			trace.log("대상 범위:", this.diffRange);
+
+			this.applyChanges(this.textToApply, this.targetEditorView, this.diffRange);
+		});
+
+		const container = document.createElement("div");
+		container.className = "cm-merge-button-container";
+		container.appendChild(button);
+		return container;
+	}
+
+	// 실제 변경 적용 로직
+	applyChanges(text, editorView, range) {
+		if (!editorView || !range) {
+			trace.error("Target editor view or range is undefined.", editorView, range);
+			return;
+		}
+
+		editorView.dispatch({
+			changes: {
+				from: range.from,
+				to: range.to,
+				insert: text
+			}
+		});
+
+		requestAnimationFrame(() => {
+			this.hostComponent.recalculateDiff();
+		});
+	}
+}
+
+
+export class NineDiff extends HTMLElement {
+	//#host;
+	#asisEditorView;
+	#tobeEditorView;
+	#asisEditorEl;
+	#tobeEditorEl;
+
+	#languageCompartment = new Compartment();
+
+	#isScrollSyncActive = false;
+	_asisScrollHandler = null;
+	_tobeScrollHandler = null;
+
+	// MergeButtonWidget에서 접근할 수 있도록 Getter를 공개합니다.
+	get asisEditorView() {
+		return this.#asisEditorView;
+	}
+	get tobeEditorView() {
+		return this.#tobeEditorView;
+	}
+
+
+	constructor() {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
+
+	connectedCallback() {
+
+		const customImport = this.getAttribute("css-path") ? `@import "${this.getAttribute("css-path")}";` : "";
+
+		/**
+		 * nine-ai > nine-ai-diff-popup > nx-tab > nine-ai-diff
+		 */
+		//this.#host = this.getRootNode().host.getRootNode().host.getRootNode().host;
+
+
+		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="wrapper">
+                <div class="panel asis"></div>
+                <nx-splitter></nx-splitter>
+                <div class="panel tobe"></div>
+            </div>
+        `;
+
+		requestAnimationFrame(() => {
+			this.#initCodeMirror();
+		});
+	}
+
+	disconnectedCallback() {
+		if (this._asisScrollHandler) {
+			this.#asisEditorView.scrollDOM.removeEventListener('scroll', this._asisScrollHandler);
+			this.#tobeEditorView.scrollDOM.removeEventListener('scroll', this._tobeScrollHandler);
+			this._asisScrollHandler = null;
+			this._tobeScrollHandler = null;
+		}
+		if (this.#asisEditorView) {
+			this.#asisEditorView.destroy();
+		}
+		if (this.#tobeEditorView) {
+			this.#tobeEditorView.destroy();
+		}
+	}
+
+	getContents = () => {
+		return (this.#tobeEditorView) ? this.#tobeEditorView.state.doc.toString() : "";
+	};
+
+	#initCodeMirror = () => {
+		this.#asisEditorEl = this.shadowRoot.querySelector('.panel.asis');
+		this.#tobeEditorEl = this.shadowRoot.querySelector('.panel.tobe');
+
+		if (!this.#asisEditorEl || !this.#tobeEditorEl) {
+			trace.error('CodeMirror panel containers not found!');
+			return;
+		}
+
+		const basicExtensions = [
+			lineNumbers(),
+			highlightSpecialChars(),
+			history(),
+			drawSelection(),
+			dropCursor(),
+			EditorState.allowMultipleSelections.of(true),
+			indentOnInput(),
+			bracketMatching(),
+			highlightActiveLine(),
+			highlightActiveLineGutter(),
+			highlightSelectionMatches(),
+			keymap.of([
+				...defaultKeymap,
+				...searchKeymap,
+				...historyKeymap,
+				...lintKeymap,
+				...completionKeymap,
+				indentWithTab,
+				selectAll
+			]),
+			syntaxHighlighting(defaultHighlightStyle),
+			autocompletion(),
+		];
+
+		this.#asisEditorView = new EditorView({
+			state: EditorState.create({
+				doc: '',
+				extensions: [
+					basicExtensions,
+					this.#languageCompartment.of(javascript()),
+					// ASIS는 읽기 전용으로 유지 (원본 소스) - 필요에 따라 편집 가능하도록 변경 가능
+					EditorState.readOnly.of(false), // ASIS를 편집 가능하게 변경
+					asisDiffDecorations,
+					asisButtonDecorations,
+					EditorView.updateListener.of((update) => {
+						if (update.view.contentDOM.firstChild && !update.view._initialAsisContentLoaded) {
+							update.view._initialAsisContentLoaded = true;
+							trace.log("CodeMirror ASIS view is ready for initial content.");
+						}
+					})
+				]
+			}),
+			parent: this.#asisEditorEl
+		});
+
+		this.#tobeEditorView = new EditorView({
+			state: EditorState.create({
+				doc: '',
+				extensions: [
+					basicExtensions,
+					this.#languageCompartment.of(javascript()),
+					EditorState.readOnly.of(true), // TOBE는 AI 추천 소스이므로 읽기 전용 유지
+					tobeDiffDecorations,
+					tobeButtonDecorations,
+					EditorView.updateListener.of((update) => {
+						if (update.view.contentDOM.firstChild && !update.view._initialTobeContentLoaded) {
+							update.view._initialTobeContentLoaded = true;
+							trace.log("CodeMirror TOBE view is ready for initial content.");
+						}
+					})
+				]
+			}),
+			parent: this.#tobeEditorEl
+		});
+
+		this.#setupScrollSync();
+	};
+
+	#setupScrollSync = () => {
+		if (this._asisScrollHandler) {
+			this.#asisEditorView.scrollDOM.removeEventListener('scroll', this._asisScrollHandler);
+			this.#tobeEditorView.scrollDOM.removeEventListener('scroll', this._tobeScrollHandler);
+		}
+
+		let scrollingA = false;
+		let scrollingB = false;
+
+		this._asisScrollHandler = () => {
+			if (!this.#isScrollSyncActive) return;
+
+			if (!scrollingB) {
+				scrollingA = true;
+				this.#tobeEditorView.scrollDOM.scrollTop = this.#asisEditorView.scrollDOM.scrollTop;
+				this.#tobeEditorView.scrollDOM.scrollLeft = this.#asisEditorView.scrollDOM.scrollLeft;
+			}
+			scrollingB = false;
+		};
+
+		this._tobeScrollHandler = () => {
+			if (!this.#isScrollSyncActive) return;
+
+			if (!scrollingA) {
+				scrollingB = true;
+				this.#asisEditorView.scrollDOM.scrollTop = this.#tobeEditorView.scrollDOM.scrollTop;
+				this.#asisEditorView.scrollDOM.scrollLeft = this.#tobeEditorView.scrollDOM.scrollLeft;
+			}
+			scrollingA = false;
+		};
+
+		this.#asisEditorView.scrollDOM.addEventListener('scroll', this._asisScrollHandler);
+		this.#tobeEditorView.scrollDOM.addEventListener('scroll', this._tobeScrollHandler);
+	};
+
+	#applyDiffDecorations = (asisSrc, tobeSrc) => {
+		const dmp = new diff_match_patch();
+
+		const a = dmp.diff_linesToChars_(asisSrc, tobeSrc);
+		const lineText1 = a.chars1;
+		const lineText2 = a.chars2;
+		const lineArray = a.lineArray;
+
+		const diffs = dmp.diff_main(lineText1, lineText2, true);
+		dmp.diff_cleanupSemantic(diffs);
+		dmp.diff_charsToLines_(diffs, lineArray);
+
+		//console.log("Calculated Diffs:", diffs);
+
+		const asisLineBuilder = new RangeSetBuilder();
+		const tobeLineBuilder = new RangeSetBuilder();
+		const asisButtonBuilder = new RangeSetBuilder();
+		const tobeButtonBuilder = new RangeSetBuilder();
+
+		let asisCursor = 0;
+		let tobeCursor = 0;
+
+		const insertedLineDeco = Decoration.line({ class: "cm-inserted-line-bg" });
+		const deletedLineDeco = Decoration.line({ class: "cm-deleted-line-bg" });
+
+		const currentInstance = this;
+
+		for (const [op, text] of diffs) {
+			const len = text.length;
+
+			const asisRangeStart = asisCursor;
+			const tobeRangeStart = tobeCursor;
+
+			switch (op) {
+				case diff_match_patch.DIFF_INSERT: // TOBE (AI 추천)에 추가된 내용 (ASIS에는 없음)
+					trace.log("DIFF_INSERT (TOBE added):", JSON.stringify(text));
+					const tobeLines = text.split('\n');
+					for (let i = 0; i < tobeLines.length; i++) {
+						if (!(i === tobeLines.length - 1 && tobeLines[i] === '' && text.endsWith('\n'))) {
+							tobeLineBuilder.add(tobeCursor, tobeCursor, insertedLineDeco);
+						}
+						tobeCursor += tobeLines[i].length + (i < tobeLines.length - 1 ? 1 : 0);
+					}
+
+					// ⭐️ TOBE (AI 추천) 에디터에 버튼 추가: TOBE의 추가 내용을 ASIS (현재 소스)에 '적용'
+					tobeButtonBuilder.add(
+						tobeRangeStart,
+						tobeRangeStart,
+						Decoration.widget({
+							widget: new MergeButtonWidget(
+								false, // 이 버튼은 TOBE 에디터에 붙는 버튼
+								text,  // AI가 추가한 내용을 ASIS에 '삽입'
+								currentInstance.#asisEditorView, // 대상 에디터는 ASIS (현재 소스)
+								{ from: asisRangeStart, to: asisRangeStart + 0 }, // ASIS에서의 '삽입될' 위치
+								currentInstance
+							),
+							side: 1
+						})
+					);
+					break;
+
+				case diff_match_patch.DIFF_DELETE: // ASIS (현재 소스)에서 삭제된 내용 (TOBE에는 없음)
+					trace.log("DIFF_DELETE (ASIS deleted):", JSON.stringify(text));
+					const asisLines = text.split('\n');
+					for (let i = 0; i < asisLines.length; i++) {
+						if (!(i === asisLines.length - 1 && asisLines[i] === '' && text.endsWith('\n'))) {
+							asisLineBuilder.add(asisCursor, asisCursor, deletedLineDeco);
+						}
+						asisCursor += asisLines[i].length + (i < asisLines.length - 1 ? 1 : 0);
+					}
+
+					// ⭐️ ASIS (현재 소스) 에디터에 버튼 추가: AI의 삭제를 '삭제' (ASIS에서 해당 내용을 제거)
+					asisButtonBuilder.add(
+						asisRangeStart,
+						asisRangeStart,
+						Decoration.widget({
+							widget: new MergeButtonWidget(
+								true, // 이 버튼은 ASIS 에디터에 붙는 버튼
+								"",   // ASIS에서 해당 내용을 '제거'하므로 삽입할 텍스트는 없음
+								currentInstance.#asisEditorView, // 대상 에디터는 ASIS (현재 소스)
+								{ from: asisRangeStart, to: asisRangeStart + text.length }, // ASIS에서 '삭제될' 범위
+								currentInstance
+							),
+							side: 1
+						})
+					);
+					break;
+
+				case diff_match_patch.DIFF_EQUAL: // 동일한 내용
+					asisCursor += len;
+					tobeCursor += len;
+					break;
+			}
+		}
+
+		return {
+			asisDecorations: asisLineBuilder.finish(),
+			tobeDecorations: tobeLineBuilder.finish(),
+			asisButtonDecorations: asisButtonBuilder.finish(),
+			tobeButtonDecorations: tobeButtonBuilder.finish()
+		};
+	};
+
+	recalculateDiff = () => {
+		const asisDoc = this.#asisEditorView.state.doc.toString();
+		const tobeDoc = this.#tobeEditorView.state.doc.toString();
+
+		const { asisDecorations, tobeDecorations, asisButtonDecorations, tobeButtonDecorations } = this.#applyDiffDecorations(asisDoc, tobeDoc);
+
+		this.#asisEditorView.dispatch({
+			effects: [
+				setAsisDecorationsEffect.of(asisDecorations),
+				setAsisButtonDecorationsEffect.of(asisButtonDecorations)
+			]
+		});
+		this.#tobeEditorView.dispatch({
+			effects: [
+				setTobeDecorationsEffect.of(tobeDecorations),
+				setTobeButtonDecorationsEffect.of(tobeButtonDecorations)
+			]
+		});
+	};
+
+	initialize = (src1, src2, language = 'javascript') => {
+		if (!this.#asisEditorView || !this.#tobeEditorView) {
+			trace.warn('CodeMirror Editors not initialized yet.');
+			return;
+		}
+
+
+		//console.log(src1, src2, language);
+
+		this.#isScrollSyncActive = false;
+
+		let langExtension;
+		switch(language) {
+			case 'javascript':
+				langExtension = javascript();
+				break;
+			default:
+				langExtension = javascript();
+		}
+
+		this.#asisEditorView.dispatch({
+			changes: { from: 0, to: this.#asisEditorView.state.doc.length, insert: src1 },
+			effects: [
+				this.#languageCompartment.reconfigure(langExtension)
+			]
+		});
+
+		this.#tobeEditorView.dispatch({
+			changes: { from: 0, to: this.#tobeEditorView.state.doc.length, insert: src2 },
+			effects: [
+				this.#languageCompartment.reconfigure(langExtension)
+			]
+		});
+
+		requestAnimationFrame(() => {
+			const { asisDecorations, tobeDecorations, asisButtonDecorations, tobeButtonDecorations } = this.#applyDiffDecorations(src1, src2);
+
+			this.#asisEditorView.dispatch({
+				effects: [
+					setAsisDecorationsEffect.of(asisDecorations),
+					setAsisButtonDecorationsEffect.of(asisButtonDecorations)
+				]
+			});
+			this.#tobeEditorView.dispatch({
+				effects: [
+					setTobeDecorationsEffect.of(tobeDecorations),
+					setTobeButtonDecorationsEffect.of(tobeButtonDecorations)
+				]
+			});
+
+			requestAnimationFrame(() => {
+				this.#isScrollSyncActive = true;
+			});
+		});
+	};
+}
+
+if (!customElements.get("nine-diff")) {
+	customElements.define("nine-diff", NineDiff);
+}

package/src/components/NineDiffContainer.js

@@ -0,0 +1,63 @@
+export class NineDiffContainer extends HTMLElement {
+	#asis = "";
+	#tobe = "";
+	#lang = "javascript";
+	#diffView = null;
+
+	constructor() {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
+
+	/**
+	 * 단일 비교 데이터를 설정합니다.
+	 * @param {Object} data - { asis, tobe, lang }
+	 */
+	setData = ({ asis, tobe, lang }) => {
+		this.#asis = asis || "";
+		this.#tobe = tobe || "";
+		this.#lang = lang || "javascript";
+
+		this.render();
+	}
+
+	// 최종 결과물(사용자가 편집한 ASIS 내용)을 가져옵니다.
+	getContents = () => {
+		return this.#diffView ? this.#diffView.getContents() : this.#asis;
+	}
+
+	render() {
+		this.shadowRoot.innerHTML = `
+            <style>
+                :host { 
+                    display: block; 
+                    width: 100%; 
+                    height: 100%; 
+                    border: 1px solid #ddd;
+                    background: #fff;
+                }
+                .diff-wrapper {
+                    width: 100%;
+                    height: 100%;
+                    overflow: hidden;
+                }
+                nine-diff {
+                    width: 100%;
+                    height: 100%;
+                }
+            </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);
+		}
+	}
+}
+
+customElements.define("nine-diff-container", NineDiffContainer);

package/src/index.js

@@ -1,17 +1,19 @@
 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';
 
 /**
- * Nine-Fab 엔진 메인 클래스
+ * Nine-Mu 엔진 메인 클래스
  */
-export const NineFab = {
+export const NineMu = {
     version: typeof __APP_VERSION__ !== 'undefined' ? __APP_VERSION__ : '0.1.0',
     init: (config) => {
-        trace.log("🛠️ Nine-Fab Engine initialized", config);
+        trace.log("🛠️ Nine-Mu Engine initialized", config);
         // 향후 커넥터 URL 전역 설정이나 인증 토큰 처리 로직 추가 가능
     }
 };
 
 // 기본 export 및 컴포넌트 export
-export default NineFab;
-export { NineChat };
+export default NineMu;
+export { NineChat, NineDiff, NineDiffContainer };