@mandujs/core 0.18.14 → 0.18.16

package/package.json

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

package/src/devtools/client/components/kitchen-root.tsx

@@ -43,6 +43,19 @@ const baseStyles = `
     line-height: 1.5;
   }
 
+  button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-family: inherit;
+    color: inherit;
+    font-size: inherit;
+    -webkit-appearance: none;
+    appearance: none;
+    padding: 0;
+    margin: 0;
+  }
+
   .mk-badge-container {
     position: fixed;
     z-index: ${zIndex.devtools};
@@ -72,6 +85,25 @@ const baseStyles = `
   .mk-badge-container.panel-open {
     opacity: 0;
     pointer-events: none;
+    transform: scale(0.8);
+  }
+
+  @keyframes mk-badge-breathe {
+    0%, 100% { transform: scale(1) translateY(0px); }
+    50% { transform: scale(1.04) translateY(0px); }
+  }
+
+  @keyframes mk-badge-attention {
+    0%, 100% { transform: scale(1) translateY(0px); }
+    15% { transform: scale(1.08) translateY(0px); }
+    30% { transform: scale(0.98) translateY(0px); }
+    45% { transform: scale(1.04) translateY(0px); }
+    60% { transform: scale(1) translateY(0px); }
+  }
+
+  @keyframes mk-badge-float {
+    0%, 100% { transform: scale(1) translateY(0px); }
+    50% { transform: scale(1) translateY(-3px); }
   }
 `;
 

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

@@ -203,37 +203,78 @@ export function ManduBadge({
   const character = MANDU_CHARACTERS[state];
   const stateColor = stateColors[state];
   const [isHovered, setIsHovered] = React.useState(false);
+  const [isPressed, setIsPressed] = React.useState(false);
 
   const badgeStyle: React.CSSProperties = {
+    position: 'relative',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    gap: '8px',
-    padding: count > 0 ? '10px 16px' : '0',
-    width: count > 0 ? 'auto' : '48px',
-    height: '48px',
+    width: '52px',
+    height: '52px',
+    padding: 0,
     borderRadius: '9999px',
-    backgroundColor: colors.background.dark,
-    border: `2px solid ${isHovered ? colors.brand.accent : stateColor}`,
+    backgroundColor: isPressed
+      ? colors.background.light
+      : isHovered
+        ? colors.background.medium
+        : colors.background.dark,
+    border: `2px solid ${isPressed ? stateColor : isHovered ? colors.brand.accent : stateColor + '70'}`,
     cursor: 'pointer',
-    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',
+    transition: `all 200ms ${animation.easing.spring}`,
+    boxShadow: isPressed
+      ? `0 2px 8px rgba(8, 6, 18, 0.4), inset 0 2px 4px rgba(0, 0, 0, 0.15)`
+      : isHovered
+        ? `0 8px 32px rgba(8, 6, 18, 0.45), 0 0 20px ${stateColor}55, 0 0 0 3px ${stateColor}20`
+        : `0 4px 16px rgba(8, 6, 18, 0.35), 0 0 10px ${stateColor}30`,
     userSelect: 'none',
-    transform: isHovered ? 'scale(1.08)' : 'scale(1)',
+    transform: isPressed
+      ? 'scale(0.92) translateY(1px)'
+      : isHovered
+        ? 'scale(1.1) translateY(-2px)'
+        : 'scale(1) translateY(0px)',
     outline: 'none',
     lineHeight: 1,
+    animation: isHovered || isPressed
+      ? 'none'
+      : state === 'normal'
+        ? 'mk-badge-breathe 3s ease-in-out infinite'
+        : state === 'error' && count > 0
+          ? 'mk-badge-attention 2s ease-in-out infinite'
+          : state === 'loading'
+            ? 'mk-badge-float 2s ease-in-out infinite'
+            : 'none',
   };
 
-  const countStyle: React.CSSProperties = {
-    fontSize: '13px',
+  const emojiStyle: React.CSSProperties = {
+    fontFamily: "'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif",
+    color: colors.text.primary,
+    fontSize: '24px',
+    lineHeight: 1,
+    transition: `transform 200ms ${animation.easing.spring}`,
+    transform: isHovered ? 'rotate(-8deg)' : 'rotate(0deg)',
+  };
+
+  const countBubbleStyle: React.CSSProperties = {
+    position: 'absolute',
+    top: '-4px',
+    right: '-4px',
+    minWidth: '20px',
+    height: '20px',
+    padding: '0 5px',
+    borderRadius: '9999px',
+    backgroundColor: stateColor,
+    color: colors.background.dark,
+    fontSize: '11px',
     fontWeight: 700,
-    color: stateColor,
-    minWidth: '18px',
-    textAlign: 'center',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
     lineHeight: 1,
+    boxShadow: `0 2px 8px ${stateColor}66`,
+    border: `2px solid ${colors.background.dark}`,
+    transition: `all 200ms ${animation.easing.spring}`,
+    transform: isHovered ? 'scale(1.15)' : 'scale(1)',
   };
 
   return (
@@ -242,13 +283,19 @@ export function ManduBadge({
       style={badgeStyle}
       onClick={onClick}
       onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
+      onMouseLeave={() => { setIsHovered(false); setIsPressed(false); }}
+      onMouseDown={() => setIsPressed(true)}
+      onMouseUp={() => setIsPressed(false)}
       onFocus={() => setIsHovered(true)}
-      onBlur={() => setIsHovered(false)}
+      onBlur={() => { setIsHovered(false); setIsPressed(false); }}
       aria-label={`Mandu Kitchen: ${character.message}${count > 0 ? `, ${count} issues` : ''}`}
     >
-      <span aria-hidden="true">🥟</span>
-      {count > 0 && <span style={countStyle}>{count}</span>}
+      <span aria-hidden="true" style={emojiStyle}>🥟</span>
+      {count > 0 && (
+        <span style={countBubbleStyle}>
+          {count > 99 ? '99+' : count}
+        </span>
+      )}
     </button>
   );
 }

package/src/devtools/client/components/panel/panel-container.tsx

@@ -112,7 +112,7 @@ const styles = {
   tabActive: {
     color: colors.brand.accent,
     borderBottomColor: colors.brand.accent,
-    backgroundColor: colors.background.medium,
+    backgroundColor: 'rgba(232, 150, 122, 0.12)',
   },
   tabIcon: {
     fontSize: typography.fontSize.md,
@@ -166,6 +166,8 @@ export function PanelContainer({
 }: PanelContainerProps): React.ReactElement {
   const [isResizing, setIsResizing] = useState(false);
   const [height, setHeight] = useState(400);
+  const [hoveredTab, setHoveredTab] = useState<TabId | null>(null);
+  const [isCloseHovered, setIsCloseHovered] = useState(false);
 
   const getTabBadgeCount = useCallback((tabId: TabId): number => {
     switch (tabId) {
@@ -206,8 +208,13 @@ export function PanelContainer({
           <span>Mandu Kitchen</span>
         </div>
         <button
-          style={styles.closeButton}
+          style={{
+            ...styles.closeButton,
+            ...(isCloseHovered ? { color: colors.text.primary, backgroundColor: 'rgba(255, 255, 255, 0.08)' } : {}),
+          }}
           onClick={onClose}
+          onMouseEnter={() => setIsCloseHovered(true)}
+          onMouseLeave={() => setIsCloseHovered(false)}
           aria-label="패널 닫기"
         >
           ×
@@ -229,8 +236,14 @@ export function PanelContainer({
               style={{
                 ...styles.tab,
                 ...(isActive ? styles.tabActive : {}),
+                ...(!isActive && hoveredTab === tab.id ? {
+                  color: colors.text.primary,
+                  backgroundColor: 'rgba(255, 255, 255, 0.05)',
+                } : {}),
               }}
               onClick={() => onTabChange(tab.id)}
+              onMouseEnter={() => setHoveredTab(tab.id)}
+              onMouseLeave={() => setHoveredTab(null)}
             >
               <span style={styles.tabIcon}>{tab.icon}</span>
               <span>{tab.label}</span>