@nine-lab/nine-mu 0.1.341 → 0.1.343

package/dist/nine-mu.js

@@ -17537,7 +17537,7 @@ render_fn = function() {
   const customImport = nine$1.cssPath ? `@import "${nine$1.cssPath}/nine-mu.css";` : "";
   this.shadowRoot.innerHTML = `
             <style>
-                @import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-mu@${"0.1.340"}/dist/css/nine-mu.css";
+                @import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-mu@${"0.1.342"}/dist/css/nine-mu.css";
                 ${customImport}
             </style>
             <div class="wrapper">
@@ -43787,7 +43787,7 @@ class NineDiff extends HTMLElement {
     const customImport = nine.cssPath ? `@import "${nine.cssPath}/nine-mu.css";` : "";
     this.shadowRoot.innerHTML = `
            	<style>
-                @import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-mu@${"0.1.340"}/dist/css/nine-mu.css";
+                @import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-mu@${"0.1.342"}/dist/css/nine-mu.css";
                 ${customImport}
             </style>
 
@@ -43927,7 +43927,7 @@ renderScaffolding_fn = function() {
   const customImport = nine$1.cssPath ? `@import "${nine$1.cssPath}/nine-mu.css";` : "";
   this.shadowRoot.innerHTML = `
             <style>
-                @import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-mu@${"0.1.340"}/dist/css/nine-mu.css";
+                @import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-mu@${"0.1.342"}/dist/css/nine-mu.css";
                 ${customImport}
             </style>
             
@@ -44036,7 +44036,7 @@ render_fn2 = function() {
   const customImport = nine$1.cssPath ? `@import "${nine$1.cssPath}/nine-mu.css";` : "";
   this.shadowRoot.innerHTML = `
            	<style>
-                @import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-mu@${"0.1.340"}/dist/css/nine-mu.css";
+                @import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-mu@${"0.1.342"}/dist/css/nine-mu.css";
                 ${customImport}
             </style>
             
@@ -44366,7 +44366,7 @@ class ChatMessageBody extends HTMLElement {
       const customImport = nine.cssPath ? `@import "${nine.cssPath}/nine-mu.css";` : "";
       this.shadowRoot.innerHTML = `
             <style>
-                @import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-mu@${"0.1.340"}/dist/css/nine-mu.css";
+                @import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-mu@${"0.1.342"}/dist/css/nine-mu.css";
                 ${customImport}
             </style>
             
@@ -44476,11 +44476,29 @@ class ExceptionHook extends HTMLElement {
       const customImport = nine$1.cssPath ? `@import "${nine$1.cssPath}/nine-mu.css";` : "";
       this.shadowRoot.innerHTML = `
 			<style>
-				@import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-mu@${"0.1.340"}/dist/css/nine-mu.css";
+				@import "https://cdn.jsdelivr.net/npm/@nine-lab/nine-mu@${"0.1.342"}/dist/css/nine-mu.css";
 				${customImport}
+				
+				:host {
+					display: block;
+					width: 100%;
+					height: 100%;
+				}
+				/* 어떤 로딩 레이어가 돌고 있어도 뷰포트 기준 무조건 맨 앞(최상단)으로 빼버리는 절대 방어 클래스 */
+				.nine-hook-full-overlay {
+					position: fixed !important;
+					top: 0 !important;
+					left: 0 !important;
+					width: 100vw !important;
+					height: 100vh !important;
+					box-sizing: border-box !important;
+					background-color: #FFF5F5 !important;
+					z-index: 99999999 !important; 
+					overflow: auto !important;
+				}
 			</style>
 			
-			<div class="nine-hook-core">
+			<div class="nine-hook-core" style="width: 100%; height: 100%;">
 				<slot></slot>
 			</div>
 			<div class="nine-exception-board"></div>
@@ -44527,7 +44545,7 @@ class ExceptionHook extends HTMLElement {
           const coreContainer = this.shadowRoot.querySelector(".nine-hook-core");
           if (coreContainer) coreContainer.style.display = "";
         }
-      }, 10);
+      }, 50);
     });
     __privateAdd(this, _sendToAiAction, async (errorMessage, errorStack) => {
       trace.log("🚀 [nine-exception-hook] AI 수정 요청 버튼 클릭됨");
@@ -44624,37 +44642,42 @@ renderError_fn = function(errorMessage, errorStack) {
   if (__privateGet(this, _hasError)) return;
   __privateSet(this, _hasError, true);
   setTimeout(() => {
-    console.log("🎨 [nine-exception-hook] 리액트 사이클 종료 후 에러 UI 최종 렌더링");
+    trace.log("🎨 [nine-exception-hook] 리액트 사이클 종료 후 에러 UI 최종 렌더링");
     const coreContainer = this.shadowRoot.querySelector(".nine-hook-core");
     if (coreContainer) {
       coreContainer.style.display = "none";
-      console.log("🎨 [nine-exception-hook] <slot> 본문 영역 컨테이너 숨김");
+      trace.log("🎨 [nine-exception-hook] <slot> 본문 영역 컨테이너 숨김");
     }
     const exceptionBoard = this.shadowRoot.querySelector(".nine-exception-board");
     if (!exceptionBoard) {
-      console.error("❌ [nine-exception-hook] .nine-exception-board 엘리먼트를 찾을 수 없습니다.");
+      trace.error("❌ [nine-exception-hook] .nine-exception-board 엘리먼트를 찾을 수 없습니다.");
       return;
     }
     const errorHTML = `
-				<div class="nine-error-container">
-					<h3 class="nine-error-title">⚠️ 시스템 예외 감지 (${this.tagName.toLowerCase()})</h3>
-					<p class="nine-error-label">[에러 원인 로그]:</p>
-					<pre class="nine-error-log">${errorMessage}</pre>
-					
-					<div class="nine-action-area" style="margin-top: 20px; display: flex; align-items: center; gap: 15px;">
-						<button class="nine-ai-btn">🤖 AI에게 소스코드 수정 요청</button>
-						<div class="nine-error-footer">
-							버튼을 누르면 AI가 로그 및 컴포넌트 맵을 역추적하여 수정을 시작합니다.
+				<div class="nine-hook-full-overlay">
+					<div class="nine-error-container" style="padding: 40px; max-width: 1200px; margin: 40px auto; font-family: sans-serif; background: white; border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.08); text-align: left;">
+						<h3 class="nine-error-title" style="color: #C53030; margin-top: 0; font-size: 22px; font-weight: 700; border-bottom: 2px solid #FED2D2; padding-bottom: 12px;">⚠️ 시스템 예외 감지 (${this.tagName.toLowerCase()})</h3>
+						<p class="nine-error-label" style="font-weight: bold; margin: 20px 0 8px 0; color: #4A5568; font-size: 15px;">[에러 원인 로그]:</p>
+						<pre class="nine-error-log" style="background: #1A202C; color: #EDF2F7; padding: 20px; border-radius: 6px; overflow-x: auto; white-space: pre-wrap; font-family: monospace; font-size: 14px; line-height: 1.6; margin-bottom: 25px;">${errorMessage}
+
+[Stack Trace]
+${errorStack}</pre>
+						
+						<div class="nine-action-area" style="display: flex; align-items: center; gap: 20px; border-top: 1px solid #E2E8F0; padding-top: 20px;">
+							<button class="nine-ai-btn" style="background: #3182CE; color: white; border: none; padding: 14px 28px; border-radius: 6px; font-weight: bold; cursor: pointer; font-size: 16px; transition: background 0.2s;">🤖 AI에게 소스코드 수정 요청</button>
+							<div class="nine-error-footer" style="font-size: 14px; color: #718096; line-height: 1.4;">
+								버튼을 누르면 AI가 로그 및 컴포넌트 맵을 역추적하여 수정을 시작합니다.
+							</div>
 						</div>
 					</div>
 				</div>
 			`;
     exceptionBoard.innerHTML = errorHTML;
-    console.log("🎨 [nine-exception-hook] Shadow DOM에 에러 UI 최종 삽입 성공");
+    trace.log("🎨 [nine-exception-hook] Shadow DOM에 에러 UI 최종 삽입 성공");
     const aiBtn = this.shadowRoot.querySelector(".nine-ai-btn");
     if (aiBtn) {
       aiBtn.addEventListener("click", () => __privateGet(this, _sendToAiAction).call(this, errorMessage, errorStack));
-      console.log("🎨 [nine-exception-hook] AI 요청 버튼 이벤트 리스너 최종 바인딩 성공");
+      trace.log("🎨 [nine-exception-hook] AI 요청 버튼 이벤트 리스너 최종 바인딩 성공");
     }
   }, 0);
 };
@@ -44662,7 +44685,7 @@ if (!customElements.get("nine-exception-hook")) {
   customElements.define("nine-exception-hook", ExceptionHook);
 }
 const NineMu = {
-  version: "0.1.340",
+  version: "0.1.342",
   init: (config2) => {
     trace$1.log("🛠️ Nine-Mu Engine initialized", config2);
   }