@mandujs/core 0.18.9 → 0.18.11

package/package.json

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

package/src/bundler/build.ts

@@ -778,7 +778,8 @@ if (typeof window !== 'undefined') {
       minify: false, // dev only
       sourcemap: options.sourcemap ? "external" : "none",
       target: "browser",
-      external: ["react", "react-dom", "react-dom/client"],
+      // React를 인라인 번들링 (import map 없이도 독립 동작)
+      // DevTools는 Shadow DOM 격리 → 앱 React와 충돌 없음
       define: {
         "process.env.NODE_ENV": JSON.stringify("development"),
         ...options.define,
@@ -1251,6 +1252,15 @@ export async function buildClientBundles(
   // Hydration 라우트가 없어도 빈 매니페스트를 저장해야 함
   // (이전 빌드의 stale 매니페스트 참조 방지)
   if (hydratedRoutes.length === 0) {
+    // Dev 모드에서는 DevTools 번들 빌드 (island 없어도 동작해야 함)
+    const isDev = env === "development";
+    if (isDev) {
+      const devtoolsResult = await buildDevtoolsBundle(outDir, options);
+      if (!devtoolsResult.success) {
+        console.warn("[Mandu] DevTools bundle build failed:", devtoolsResult.errors.join(", "));
+      }
+    }
+
     const emptyManifest = createEmptyManifest(env);
     await fs.writeFile(
       path.join(rootDir, ".mandu/manifest.json"),

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(0, 0, 0, 0.4), 0 0 0 4px ${stateColor}33`
+      : `0 4px 12px rgba(0, 0, 0, 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>
   );