@mandujs/core 0.18.14 → 0.18.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mandujs/core",
-  "version": "0.18.14",
+  "version": "0.18.15",
   "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};

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

@@ -247,7 +247,10 @@ export function ManduBadge({
       onBlur={() => setIsHovered(false)}
       aria-label={`Mandu Kitchen: ${character.message}${count > 0 ? `, ${count} issues` : ''}`}
     >
-      <span aria-hidden="true">🥟</span>
+      <span
+        aria-hidden="true"
+        style={{ fontFamily: "'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif" }}
+      >🥟</span>
       {count > 0 && <span style={countStyle}>{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>