@nine-lab/nine-mu 0.1.360 → 0.1.361

package/package.json

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

package/src/components/exception/ExceptionHook.js

@@ -8,58 +8,61 @@ export const NineExceptionStyles = {
 		minHeight: '100%',
 		flexGrow: 1,
 		padding: '25px',
-		background: '#121314',
-		// ⭐ 모든 요소가 완벽한 터미널 정렬을 갖추도록 고정폭 서체를 부모에 강제 주입
+		background: '#121314',              // 터미널 다크 블랙 배경
+		// ⭐ 모든 요소의 폰트 크기, 패딩, 높이 기준을 부모 레벨에서 완벽히 통일
 		fontFamily: 'Consolas, Monaco, "Courier New", monospace',
+		fontSize: '14px',
+		lineHeight: '1.6',                  // 줄간격을 터미널 배시 화면 비율(1.6)로 고정
+		color: '#999',                      // 기본 텍스트 색상 #999 적용
 		textAlign: 'left',
 		boxShadow: '0 4px 12px rgba(0,0,0,0.3)',
-
-		// 내부 라인들을 인라인 텍스트 흐름처럼 촘촘하게 쌓기 위해 flex 간격 조정
-		display: 'flex',
-		flexDirection: 'column',
-		gap: '10px',                 // 줄간 간격을 10px로 타이트하게 조여 터미널 감성 극대화
-		lineHeight: '1.2'            // 모든 라인의 글자 높이 기준 통일
+		boxSizing: 'border-box'
 	},
+	// 1. 모든 라인의 display 형식을 'block'으로 맞추고 마진/패딩을 0으로 통일
 	systemError: {
-		color: '#999',               // 요청하신 대로 #999 색상 지정
+		color: '#999',
 		fontWeight: 'bold',
-		fontSize: '14px',
-		margin: '0',                 // 수동 마진 제거 (부모 gap으로 일괄 제어)
-		letterSpacing: '0.5px',
-		padding: '0'
+		margin: '0',
+		padding: '0',
+		display: 'block'
 	},
+	// 2. 에러 본문 텍스트도 불필요한 속성을 다 버리고 일반 라인과 똑같이 흐르게 교정
 	pre: {
 		background: 'transparent',
-		color: '#666',
+		color: '#666',                      // aa is not defined는 요청하신 #666 적용
 		padding: '0',
-		margin: '0',                 // pre 태그 고유의 불규칙한 여백 완전 제거
+		margin: '0',
 		border: 'none',
 		overflowX: 'auto',
 		whiteSpace: 'pre-wrap',
-		fontFamily: 'Consolas, Monaco, monospace',
-		fontSize: '14px',
+		fontFamily: 'inherit',              // 부모 폰트 그대로 상속
+		fontSize: 'inherit',                // 부모 크기 그대로 상속
 		display: 'block'
 	},
+	// 3. 에러 위치 추적 라인
+	locationRow: {
+		color: '#666',
+		margin: '0',
+		padding: '0',
+		display: 'block'
+	},
+	// 4. 하단 영역의 flex와 gap을 완전히 제거하여 줄간격 왜곡 원천 차단
 	footer: {
-		fontSize: '14px',
-		color: '#999',
 		margin: '0',
 		padding: '0',
-		display: 'flex',
-		flexDirection: 'column',
-		gap: '10px'                  // 후속 로그가 찍힐 때도 동일한 간격 유지
+		display: 'block'
 	},
 	promptRow: {
 		margin: '0',
 		padding: '0',
 		display: 'block',
-		color: '#999'                // 대화형 구문도 완벽하게 #999 색상 일치
+		color: '#999'
 	},
 	cliLink: {
-		color: '#38A169',            // 선택지 y는 선명한 터미널 그린
-		padding: '0 2px',
-		fontFamily: 'Consolas, Monaco, monospace',
-		fontSize: '14px',
+		color: '#38A169',                   // y 링크 터미널 그린
+		padding: '0',
+		fontFamily: 'inherit',
+		fontSize: 'inherit',
 		fontWeight: 'bold',
 		cursor: 'pointer',
 		textDecoration: 'underline',
@@ -154,14 +157,11 @@ export class NineExceptionHook extends React.Component {
 			const errorMessage = this.state.error?.message || String(this.state.error);
 			const customStyles = this.props.styles || {};
 
-			// 🔍 React 컴포넌트 스택에서 파일명과 라인 번호 추출기
+			// 🔍 React 컴포넌트 스택에서 파일명과 라인 번호 추출
 			let errorLocation = '';
 			if (this.state.errorInfo?.componentStack) {
-				// 스택 트레이스 문자열에서 실제 파일 경로가 포함된 첫 줄을 타겟팅합니다.
 				const lines = this.state.errorInfo.componentStack.trim().split('\n');
 				const targetLine = lines[0] || '';
-
-				// 정규식을 이용해 파일명과 라인 번호 정제 (예: at UserList (at users.js:42) -> UserList (users.js:42))
 				const match = targetLine.match(/at\s+(\w+)\s+\((.*)\)/) || targetLine.match(/at\s+(.*)/);
 				if (match) {
 					errorLocation = match[2] ? `${match[1]} (${match[2]})` : match[1];
@@ -176,24 +176,24 @@ export class NineExceptionHook extends React.Component {
 					style: { ...NineExceptionStyles.container, ...customStyles.container, ...this.props.containerStyle }
 				},
 
-				// 1. 에러 감지 로그
+				// 1. [SYSTEM] 라인
 				React.createElement(
 					'div',
 					{ style: { ...NineExceptionStyles.systemError, ...customStyles.systemError } },
 					'[SYSTEM] COMPONENT RENDER ERROR DETECTED'
 				),
 
-				// 2. 에러 내용 (aa is not defined)
+				// 2. aa is not defined 라인
 				React.createElement('pre', { style: { ...NineExceptionStyles.pre, ...customStyles.pre } }, errorMessage),
 
-				// ⭐ 3. [추가] 파싱된 에러 발생 파일명 및 라인 위치 (터미널 그레이 색상 매칭)
+				// 3. at MemberUsers 라인
 				errorLocation && React.createElement(
 					'div',
-					{ style: { color: '#666', fontSize: '14px', margin: '0 0 12px 0', fontFamily: 'Consolas, Monaco, monospace', lineHeight: '1' } },
+					{ style: { ...NineExceptionStyles.locationRow, ...customStyles.locationRow } },
 					`  at ${errorLocation}`
 				),
 
-				// 4. CLI 프롬프트 영역
+				// 4. CLI 프롬프트 및 후속 결과 라인 영역
 				React.createElement(
 					'div',
 					{ style: { ...NineExceptionStyles.footer, ...customStyles.footer } },
@@ -213,17 +213,18 @@ export class NineExceptionHook extends React.Component {
 						React.createElement('span', null, '/n)?')
 					),
 
+					// display: 'block'과 margin/padding 0을 주어 다른 라인들과 오차 없이 간격을 맞춤
 					this.state.reportStatus === 'sending' && React.createElement(
 						'div',
-						{ style: { color: '#ED8936', margin: '0', lineHeight: '1' } },
+						{ style: { color: '#ED8936', margin: '0', padding: '0', display: 'block' } },
 						'>> Connecting to Control Tower... Sending payload.'
 					),
 
 					this.state.reportStatus === 'success' && React.createElement(
 						'div',
-						{ style: { display: 'flex', flexDirection: 'column', gap: '12px', margin: '0' } },
-						React.createElement('div', { style: { color: '#38A169', fontWeight: 'bold', lineHeight: '1' } }, '>> Transmit complete. Core engine initialized.'),
-						React.createElement('div', { style: { color: '#A0AEC0', fontStyle: 'italic', fontSize: '13px', lineHeight: '1' } }, 'AI가 소스 코드를 재수정하는 동안 잠시만 기다려주세요...')
+						{ style: { margin: '0', padding: '0', display: 'block' } },
+						React.createElement('div', { style: { color: '#38A169', fontWeight: 'bold', display: 'block', margin: '0' } }, '>> Transmit complete. Core engine initialized.'),
+						React.createElement('div', { style: { color: '#A0AEC0', fontStyle: 'italic', fontSize: '13px', display: 'block', margin: '4px 0 0 0' } }, 'AI가 소스 코드를 재수정하는 동안 잠시만 기다려주세요...')
 					)
 				)
 			);