@nine-lab/nine-mu 0.1.345 → 0.1.347

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nine-lab/nine-mu",
-  "version": "0.1.345",
+  "version": "0.1.347",
   "description": "AI-Driven Full-Stack Code Fabrication Engine",
   "type": "module",
   "main": "./dist/nine-mu.umd.js",
@@ -25,6 +25,7 @@
     "@nine-lab/nine-nomenu": "*",
     "@nine-lab/nine-util": "^0.9.126",
     "@nine-lab/nine-ux": "^0.1.244",
+    "@vitejs/plugin-react": "^6.0.2",
     "terser": "^5.31.0",
     "vite": "^6.0.0"
   },

package/src/components/exception/ExceptionHook.js

@@ -1,211 +1,92 @@
-// src/components/exception/ExceptionHook.js
-import { nine } from '@nine-lab/nine-util';
-import { trace } from '@nopeer';
+import React from 'react';
 
-export class ExceptionHook extends HTMLElement {
-	#lastPath = window.location.pathname;
-	#hasError = false;
-	#cssPath = "/css/nine-exception-hook.css";
-	#oldOnError = null;
+export class NineExceptionHook extends React.Component {
 
-	constructor() {
-		super();
-		this.attachShadow({ mode: 'open' });
+	constructor(props) {
+		super(props);
+		this.state = { hasError: false, error: null };
+		this.lastPath = window.location.pathname;
+		this.handleLocationChange = this.handleLocationChange.bind(this);
 	}
 
-	connectedCallback() {
-		this.#renderer();
-		this.#injectShadowStylesheet();
-		this.#setupGlobalSniffer();
-
-		window.addEventListener('unhandledrejection', this.#handlePromiseError, true);
-		window.addEventListener('popstate', this.#handleLocationChange);
-		document.addEventListener('click', this.#handleLocationChange, true);
+	static getDerivedStateFromError(error) {
+		return { hasError: true, error };
 	}
 
-	disconnectedCallback() {
-		window.removeEventListener('error', this.#handleRuntimeError, true);
-		window.removeEventListener('unhandledrejection', this.#handlePromiseError, true);
-		window.removeEventListener('popstate', this.#handleLocationChange);
-		document.removeEventListener('click', this.#handleLocationChange, true);
+	componentDidCatch(error, errorInfo) {
+		console.error("🚨 [Nine-Library] 본문 렌더링 에러 포착:", error);
 
-		if (window.onerror === this.#handleRuntimeError || this.#oldOnError) {
-			window.onerror = this.#oldOnError;
+		if (window.triggerAutoRecovery) {
+			window.triggerAutoRecovery(error.message || String(error));
 		}
-	}
-
-	#setupGlobalSniffer() {
-		window.addEventListener('error', this.#handleRuntimeError, true);
-
-		this.#oldOnError = window.onerror;
-		window.onerror = (message, source, lineno, colno, error) => {
-			if (!this.#hasError) {
-				const errorMessage = error?.message || message || "알 수 없는 런타임 예외";
-				const errorStack = error?.stack || `${source}:${lineno}:${colno}`;
-				this.#renderError(errorMessage, errorStack);
-			}
-			if (this.#oldOnError) {
-				return this.#oldOnError(message, source, lineno, colno, error);
-			}
-			return false;
-		};
-	}
-
-	#renderer = () => {
-		const customImport = nine.cssPath ? `@import "${nine.cssPath}/nine-mu.css";` : "";
-
-		// 🎯 [핵심 변경 1] :host 자체를 absolute의 기준점이 되는 block으로 잡고,
-		// 리액트 슬롯 내용물(메뉴 등)은 절대 숨기지 않고 100% 크기로 유지합니다.
-		this.shadowRoot.innerHTML = `
-			<style>
-				@import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-mu@${__APP_VERSION__}/dist/css/nine-mu.css";
-				${customImport}
-				
-				:host {
-					display: block;
-					width: 100%;
-					height: 100%;
-					position: relative !important; /* 내부 에러 보드의 기준점 기둥 생성 */
-				}
-				
-				.nine-hook-core {
-					width: 100%;
-					height: 100%;
-				}
-
-				/* 🎯 [핵심 변경 2] 리액트 슬롯을 가리지 않고, 오직 "이 컴포넌트 구역"만 가득 채우는 독립 팝업 레이어 */
-				.nine-hook-inner-cover {
-					position: absolute !important;
-					top: 0 !important;
-					left: 0 !important;
-					width: 100% !important;
-					height: 100% !important;
-					box-sizing: border-box !important;
-					background-color: #FFF5F5 !important;
-					z-index: 2147483647 !important; /* 리액트 내부 그 어떤 오버레이보다 무조건 위 */
-					overflow: auto !important;
-					display: none; /* 평소엔 숨김 */
-				}
-			</style>
-			
-			<div class="nine-hook-core">
-				<slot></slot>
-			</div>
-			<div class="nine-exception-board class-target-board"></div>
-		`;
-	}
-
-	#injectShadowStylesheet() {
-		if (this.shadowRoot.querySelector(`link[href="${this.#cssPath}"]`)) return;
-
-		const link = document.createElement('link');
-		link.rel = 'stylesheet';
-		link.href = this.#cssPath;
-		this.shadowRoot.appendChild(link);
-	}
-
-	#handleRuntimeError = (event) => {
-		if (this.#hasError) return;
-
-		const errorMessage = event.error?.message || event.message || String(event);
-		const errorStack = event.error?.stack || "No stack trace available";
 
-		if (errorMessage && errorMessage !== "Script error.") {
-			this.#renderError(errorMessage, errorStack);
+		if (this.props.onCatch) {
+			this.props.onCatch(error, errorInfo);
 		}
 	}
 
-	#handlePromiseError = (event) => {
-		if (this.#hasError) return;
-
-		const reason = event.reason;
-		const errorMessage = reason?.message || String(reason || "Unhandled Promise Rejection");
-		const errorStack = reason?.stack || "No stack trace available";
+	componentDidMount() {
+		window.addEventListener('popstate', this.handleLocationChange);
+		document.addEventListener('click', this.handleLocationChange, true);
+	}
 
-		this.#renderError(errorMessage, errorStack);
+	componentWillUnmount() {
+		window.removeEventListener('popstate', this.handleLocationChange);
+		document.removeEventListener('click', this.handleLocationChange, true);
 	}
 
-	#handleLocationChange = () => {
+	handleLocationChange() {
 		setTimeout(() => {
-			if (this.#hasError && this.#lastPath !== window.location.pathname) {
-				this.#lastPath = window.location.pathname;
-				this.#hasError = false;
-
-				const exceptionBoard = this.shadowRoot.querySelector('.nine-exception-board');
-				if (exceptionBoard) {
-					exceptionBoard.innerHTML = '';
-					exceptionBoard.className = 'nine-exception-board'; // 클래스 리셋
-				}
+			if (this.state.hasError && this.lastPath !== window.location.pathname) {
+				console.log("✨ [Nine-Library] 페이지 주소 변경 감지 -> 리액트 에러 상태 초기화");
+				this.lastPath = window.location.pathname;
+				this.setState({ hasError: false, error: null });
 			}
-		}, 50);
+		}, 10);
 	}
 
-	#sendToAiAction = async (errorMessage, errorStack) => {
-		const btn = this.shadowRoot.querySelector('.nine-ai-btn');
-		const footer = this.shadowRoot.querySelector('.nine-error-footer');
-		if (!btn) return;
-
-		btn.disabled = true;
-		btn.innerText = "⚡ AI 관제탑에 소스 분석 요청 중...";
-		btn.classList.add('loading');
-
-		try {
-			if (window.triggerAutoRecovery) {
-				await window.triggerAutoRecovery({
-					message: errorMessage,
-					stack: errorStack || "No stack trace available",
-					path: window.location.pathname
-				});
-
-				footer.innerHTML = `✅ <b>AI 관제탑 접수 완료:</b> 분석을 바탕으로 소스 코드를 교정하고 있습니다. 잠시만 기다려주세요.`;
-				btn.innerText = "🚀 전송 완료";
-			} else {
-				throw new Error("window.triggerAutoRecovery 관제탑 엔진이 로드되지 않았습니다.");
+	render() {
+		if (this.state.hasError) {
+			if (this.props.fallback) {
+				return this.props.fallback(this.state.error);
 			}
-		} catch (err) {
-			btn.disabled = false;
-			btn.innerText = "❌ 재전송 시도";
-			footer.innerHTML = `<span style="color: #E53E3E;">⚠️ 전송 실패: ${err.message}</span>`;
-		}
-	}
 
-	#renderError(errorMessage, errorStack) {
-		if (this.#hasError) return;
-		this.#hasError = true;
-
-		setTimeout(() => {
-			const exceptionBoard = this.shadowRoot.querySelector('.nine-exception-board');
-			if (!exceptionBoard) return;
-
-			// 🎯 [핵심 변경 3] 기존 슬롯 컨테이너를 숨기지(display: none) 않습니다!
-			// 대신 에러 보드에 커버 클래스를 주입하여 "오직 본문 공간만" 물리적으로 완전히 덮어씌웁니다.
-			exceptionBoard.className = 'nine-hook-inner-cover';
-
-			const errorHTML = `
-				<div class="nine-error-container" style="padding: 30px; box-sizing: border-box; font-family: sans-serif; background: white; min-height: 100%; text-align: left;">
-					<h3 class="nine-error-title" style="color: #C53030; margin-top: 0; font-size: 20px; font-weight: 700; border-bottom: 2px solid #FED2D2; padding-bottom: 12px; font-family: sans-serif;">⚠️ 시스템 예외 감지 (${this.tagName.toLowerCase()})</h3>
-					<p class="nine-error-label" style="font-weight: bold; margin: 15px 0 6px 0; color: #4A5568; font-size: 14px; font-family: sans-serif;">[에러 원인 로그]:</p>
-					<pre class="nine-error-log" style="background: #1A202C; color: #EDF2F7; padding: 15px; border-radius: 6px; overflow-x: auto; white-space: pre-wrap; font-family: monospace; font-size: 13px; line-height: 1.5; margin-bottom: 20px;">${errorMessage}\n\n[Stack Trace]\n${errorStack}</pre>
-					
-					<div class="nine-action-area" style="display: flex; align-items: center; gap: 15px; border-top: 1px solid #E2E8F0; padding-top: 15px;">
-						<button class="nine-ai-btn" style="background: #3182CE; color: white; border: none; padding: 10px 20px; border-radius: 6px; font-weight: bold; cursor: pointer; font-size: 14px;">🤖 AI에게 소스코드 수정 요청</button>
-						<div class="nine-error-footer" style="font-size: 13px; color: #718096; line-height: 1.4; font-family: sans-serif;">
-							버튼을 누르면 AI가 로그 및 컴포넌트 맵을 역추적하여 수정을 시작합니다.
-						</div>
-					</div>
-				</div>
-			`;
-
-			exceptionBoard.innerHTML = errorHTML;
+			const errorMessage = this.state.error?.message || String(this.state.error);
+
+			// ⭐ Vite 빌드 통과를 위해 순수 자바스크립트 함수(React.createElement)로 변경
+			return React.createElement(
+				'div',
+				{
+					style: {
+						padding: '30px',
+						margin: '20px',
+						background: '#FFF5F5',
+						border: '1px solid #FEB2B2',
+						borderRadius: '8px',
+						fontFamily: 'sans-serif',
+						textAlign: 'left',
+						...this.props.containerStyle
+					}
+				},
+				React.createElement('h3', { style: { color: '#C53030', marginTop: 0, fontSize: '18px' } }, '⚠️ 컴포넌트 빌드/렌더링 에러 감지'),
+				React.createElement('p', { style: { margin: '10px 0 5px 0', fontWeight: 'bold', color: '#4A5568' } }, '[에러 원인 로그]:'),
+				React.createElement('pre', {
+					style: {
+						background: '#1A202C',
+						color: '#EDF2F7',
+						padding: '15px',
+						borderRadius: '6px',
+						overflowX: 'auto',
+						whiteSpace: 'pre-wrap',
+						fontFamily: 'monospace'
+					}
+				}, errorMessage),
+				React.createElement('div', { style: { marginTop: '15px', fontSize: '14px', color: '#718096' } }, '🔄 에러 로그가 관제탑으로 자동 피드백되었습니다. AI가 소스 코드를 재수정하는 동안 잠시만 기다려주세요...')
+			);
+		}
 
-			const aiBtn = exceptionBoard.querySelector('.nine-ai-btn');
-			if (aiBtn) {
-				aiBtn.addEventListener('click', () => this.#sendToAiAction(errorMessage, errorStack));
-			}
-		}, 0);
+		return this.props.children;
 	}
 }
 
-if (!customElements.get('nine-exception-hook')) {
-	customElements.define('nine-exception-hook', ExceptionHook);
-}
+export default NineExceptionHook;

package/src/index.js

@@ -4,7 +4,7 @@ import { NineDiff } from './components/NineDiff.js';
 import { NineDiffPopup } from './components/NineDiffPopup.js';
 import { NineMenuDiffPopup } from './components/NineMenuDiffPopup.js';
 import './components/ChatMessage.js';
-import './components/exception/ExceptionHook.js';
+import { NineExceptionHook } from './components/exception/ExceptionHook.js';
 
 /**
  * Nine-Mu 엔진 메인 클래스
@@ -20,4 +20,4 @@ export const NineMu = {
 
 // 기본 export 및 컴포넌트 export
 export default NineMu;
-export { NineChat, NineDiff, NineDiffPopup };
+export { NineChat, NineDiff, NineDiffPopup, NineExceptionHook };

package/vite.config.js

@@ -19,7 +19,7 @@ export default defineConfig({
       formats: ['es', 'umd']
     },
     rollupOptions: {
-      external: ['@nine-lab/nine-ai', '@nine-lab/nine-util', '@nine-lab/nine-ux'],
+      external: ['@nine-lab/nine-ai', '@nine-lab/nine-util', '@nine-lab/nine-ux', 'react', 'react-dom'],
       output: {
         globals: {
           '@nine-lab/nine-ai': 'NineAi',
@@ -31,5 +31,9 @@ export default defineConfig({
     minify: 'terser',
     sourcemap: true,
     emptyOutDir: true
+  },
+  esbuild: {
+    loader: 'jsx',
+    include: /src\/.*\.js$/, // src 폴더 내의 모든 .js 파일을 대상으로 지정
   }
 });