@mandujs/core 0.18.10 → 0.18.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mandujs/core",
-  "version": "0.18.10",
+  "version": "0.18.12",
   "description": "Mandu Framework Core - Spec, Generator, Guard, Runtime",
   "type": "module",
   "main": "./src/index.ts",

package/src/devtools/client/components/mandu-character.tsx

@@ -202,29 +202,38 @@ export function ManduBadge({
 }: ManduBadgeProps): React.ReactElement {
   const character = MANDU_CHARACTERS[state];
   const stateColor = stateColors[state];
+  const [isHovered, setIsHovered] = React.useState(false);
 
   const badgeStyle: React.CSSProperties = {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    gap: '6px',
-    padding: '8px 12px',
+    gap: '8px',
+    padding: count > 0 ? '10px 16px' : '0',
+    width: count > 0 ? 'auto' : '48px',
+    height: '48px',
     borderRadius: '9999px',
     backgroundColor: colors.background.dark,
-    border: `2px solid ${stateColor}`,
+    border: `2px solid ${isHovered ? colors.brand.accent : stateColor}`,
     cursor: 'pointer',
-    transition: `all ${animation.duration.fast} ${animation.easing.easeOut}`,
-    boxShadow: colors.background.overlay,
-    fontSize: '16px',
+    transition: `all ${animation.duration.normal} ${animation.easing.spring}`,
+    boxShadow: isHovered
+      ? `0 8px 24px rgba(8, 6, 18, 0.4), 0 0 0 4px ${stateColor}33`
+      : `0 4px 12px rgba(8, 6, 18, 0.3)`,
+    fontSize: '22px',
     userSelect: 'none',
+    transform: isHovered ? 'scale(1.08)' : 'scale(1)',
+    outline: 'none',
+    lineHeight: 1,
   };
 
   const countStyle: React.CSSProperties = {
-    fontSize: '12px',
-    fontWeight: 600,
+    fontSize: '13px',
+    fontWeight: 700,
     color: stateColor,
     minWidth: '18px',
     textAlign: 'center',
+    lineHeight: 1,
   };
 
   return (
@@ -232,9 +241,13 @@ export function ManduBadge({
       data-testid={testIds.badge}
       style={badgeStyle}
       onClick={onClick}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      onFocus={() => setIsHovered(true)}
+      onBlur={() => setIsHovered(false)}
       aria-label={`Mandu Kitchen: ${character.message}${count > 0 ? `, ${count} issues` : ''}`}
     >
-      <span aria-hidden="true">{character.emoji}</span>
+      <span aria-hidden="true">🥟</span>
       {count > 0 && <span style={countStyle}>{count}</span>}
     </button>
   );

package/src/devtools/design-tokens.ts

@@ -14,21 +14,21 @@ export const colors = {
     accent: '#E8967A',       // 새우 만두 분홍
   },
   semantic: {
-    success: '#90EE90',
-    warning: '#FFD700',
-    error: '#FF6B6B',
-    info: '#87CEEB',
+    success: '#7EC8A0',      // 세이지 그린 (따뜻한 톤)
+    warning: '#E8B84D',      // 앰버 (부드러운 경고)
+    error: '#E86464',        // 소프트 레드
+    info: '#7AAFC8',         // 스틸 블루 (차분한 정보)
   },
   background: {
-    dark: '#1A1A2E',
-    medium: '#2D2D44',
-    light: '#3D3D5C',
-    overlay: 'rgba(0, 0, 0, 0.85)',
+    dark: '#1C1B2E',         // 따뜻한 다크 인디고
+    medium: '#2A2940',       // 따뜻한 미디엄
+    light: '#3A3854',        // 따뜻한 라이트
+    overlay: 'rgba(10, 8, 20, 0.88)',
   },
   text: {
-    primary: '#FFFFFF',
-    secondary: '#B0B0B0',
-    muted: '#707070',
+    primary: '#F0EDE8',      // 크림 화이트 (따뜻한 톤)
+    secondary: '#A8A4A0',    // 따뜻한 그레이
+    muted: '#6B6866',        // 따뜻한 뮤트
   },
 } as const;
 
@@ -99,11 +99,11 @@ export const borderWidth = {
 // ============================================================================
 
 export const shadows = {
-  sm: '0 1px 2px rgba(0, 0, 0, 0.1)',
-  md: '0 4px 6px rgba(0, 0, 0, 0.15)',
-  lg: '0 10px 15px rgba(0, 0, 0, 0.2)',
-  xl: '0 20px 25px rgba(0, 0, 0, 0.25)',
-  overlay: '0 25px 50px rgba(0, 0, 0, 0.5)',
+  sm: '0 1px 3px rgba(8, 6, 18, 0.12)',
+  md: '0 4px 8px rgba(8, 6, 18, 0.18)',
+  lg: '0 10px 20px rgba(8, 6, 18, 0.24)',
+  xl: '0 20px 30px rgba(8, 6, 18, 0.32)',
+  overlay: '0 25px 50px rgba(8, 6, 18, 0.5)',
 } as const;
 
 // ============================================================================