@mandujs/core 0.19.2 → 0.20.0

package/package.json

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

package/src/bundler/build.ts

@@ -11,11 +11,67 @@ import type {
   BundleManifest,
   BundleStats,
   BundlerOptions,
+  IslandFileEntry,
 } from "./types";
 import { HYDRATION } from "../constants";
 import path from "path";
 import fs from "fs/promises";
 
+/** Scan for *.island.tsx / *.island.ts files across hydrated route directories. */
+async function scanIslandFiles(routes: RouteSpec[], rootDir: string): Promise<IslandFileEntry[]> {
+  const entries: IslandFileEntry[] = [];
+  const seenDirs = new Set<string>();
+
+  for (const route of routes) {
+    const dir = path.dirname(path.join(rootDir, route.componentModule ?? route.module));
+    if (seenDirs.has(dir)) continue;
+    seenDirs.add(dir);
+
+    let files: string[];
+    try { files = await fs.readdir(dir); } catch { continue; }
+
+    const priority = getRouteHydration(route)?.priority || HYDRATION.DEFAULT_PRIORITY;
+    for (const file of files) {
+      if (/\.island\.tsx?$/.test(file)) {
+        entries.push({
+          name: file.replace(/\.island\.tsx?$/, ""),
+          filePath: path.join(dir, file),
+          routeId: route.id,
+          priority,
+        });
+      }
+    }
+  }
+  return entries;
+}
+
+/** Build a single per-island bundle. */
+async function buildPerIslandBundle(
+  entry: IslandFileEntry, outDir: string, options: BundlerOptions
+): Promise<{ name: string; js: string; route: string; priority: IslandFileEntry["priority"] }> {
+  const entryPath = path.join(outDir, `_entry_island_${entry.name}.js`);
+  const outputName = `${entry.name}.island.js`;
+  try {
+    await Bun.write(entryPath, generateIslandEntry(entry.name, entry.filePath));
+    const result = await Bun.build({
+      entrypoints: [entryPath],
+      outdir: outDir,
+      naming: outputName,
+      minify: options.minify ?? process.env.NODE_ENV === "production",
+      sourcemap: options.sourcemap ? "external" : "none",
+      target: "browser",
+      external: ["react", "react-dom", "react-dom/client", ...(options.external || [])],
+      define: { "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV || "development"), ...options.define },
+    });
+    await fs.unlink(entryPath).catch(() => {});
+    if (!result.success) throw new Error(result.logs.map((l) => l.message).join("\n"));
+    return { name: entry.name, js: `/.mandu/client/${outputName}`, route: entry.routeId, priority: entry.priority };
+  } catch (error) {
+    await fs.unlink(entryPath).catch(() => {});
+    throw error;
+  }
+}
+
 /**
  * 빈 매니페스트 생성
  */
@@ -1292,7 +1348,8 @@ function createBundleManifest(
   runtimePath: string,
   vendorResult: VendorBuildResult,
   routerPath: string,
-  env: "development" | "production"
+  env: "development" | "production",
+  islandBundles?: Array<{ name: string; js: string; route: string; priority: IslandFileEntry["priority"] }>
 ): BundleManifest {
   const bundles: BundleManifest["bundles"] = {};
 
@@ -1307,11 +1364,25 @@ function createBundleManifest(
     };
   }
 
+  // Per-island bundles (code splitting)
+  let islands: BundleManifest["islands"];
+  if (islandBundles && islandBundles.length > 0) {
+    islands = {};
+    for (const ib of islandBundles) {
+      islands[ib.name] = {
+        js: ib.js,
+        route: ib.route,
+        priority: ib.priority,
+      };
+    }
+  }
+
   return {
     version: 1,
     buildTime: new Date().toISOString(),
     env,
     bundles,
+    ...(islands ? { islands } : {}),
     shared: {
       runtime: runtimePath,
       vendor: vendorResult.react, // primary vendor for backwards compatibility
@@ -1544,6 +1615,26 @@ export async function buildClientBundles(
     }
   }
 
+  // 5.5. Per-island code splitting: scan and build individual island bundles
+  const islandFiles = await scanIslandFiles(hydratedRoutes, rootDir);
+  const islandBundles: Array<{ name: string; js: string; route: string; priority: IslandFileEntry["priority"] }> = [];
+
+  if (islandFiles.length > 0) {
+    const islandResults = await Promise.all(
+      islandFiles.map(async (entry) => {
+        try {
+          return await buildPerIslandBundle(entry, outDir, options);
+        } catch (error) {
+          errors.push(`[island:${entry.name}] ${String(error)}`);
+          return null;
+        }
+      })
+    );
+    for (const result of islandResults) {
+      if (result) islandBundles.push(result);
+    }
+  }
+
   // 6. 번들 매니페스트 생성
   const bundleManifest = createBundleManifest(
     outputs,
@@ -1551,7 +1642,8 @@ export async function buildClientBundles(
     runtimeResult.outputPath,
     vendorResult,
     routerResult.outputPath,
-    env
+    env,
+    islandBundles
   );
 
   await fs.writeFile(

package/src/bundler/types.ts

@@ -53,6 +53,18 @@ export interface BundleManifest {
       priority: "immediate" | "visible" | "idle" | "interaction";
     }
   >;
+  /** Per-island bundles (code splitting: each island file gets its own JS bundle) */
+  islands?: Record<
+    string,
+    {
+      /** JavaScript bundle path */
+      js: string;
+      /** Route that owns this island */
+      route: string;
+      /** Hydration priority */
+      priority: "immediate" | "visible" | "idle" | "interaction";
+    }
+  >;
   /** 공유 청크 */
   shared: {
     /** Hydration 런타임 */
@@ -87,6 +99,14 @@ export interface BundleStats {
   bundleCount: number;
 }
 
+/** Per-island code splitting entry (used by scanIslandFiles) */
+export interface IslandFileEntry {
+  name: string;
+  filePath: string;
+  routeId: string;
+  priority: "immediate" | "visible" | "idle" | "interaction";
+}
+
 /**
  * 번들러 옵션
  */

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

@@ -8,24 +8,34 @@ import type { ManduState } from '../../types';
 import { MANDU_CHARACTERS } from '../../types';
 import { colors, typography, animation, testIds } from '../../design-tokens';
 
-// ============================================================================
-// Styles
-// ============================================================================
-
 const styles = {
   container: {
     display: 'flex',
     alignItems: 'center',
     gap: '12px',
     padding: '12px 16px',
-    borderRadius: '12px',
-    backgroundColor: colors.background.medium,
+    borderRadius: '16px',
+    background: `linear-gradient(180deg, ${colors.background.medium}, ${colors.background.dark})`,
+    border: `1px solid ${colors.background.light}`,
+    boxShadow: '0 14px 32px rgba(7, 7, 12, 0.28)',
     transition: `all ${animation.duration.normal} ${animation.easing.easeOut}`,
   },
-  emoji: {
-    fontSize: '32px',
+  mark: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minWidth: '44px',
+    height: '44px',
+    padding: '0 12px',
+    borderRadius: '9999px',
+    fontSize: '11px',
     lineHeight: 1,
+    letterSpacing: '0.12em',
+    fontWeight: 700,
     userSelect: 'none' as const,
+    fontFamily: typography.fontFamily.mono,
+    textTransform: 'uppercase' as const,
+    border: `1px solid ${colors.background.light}`,
   },
   content: {
     display: 'flex',
@@ -35,7 +45,7 @@ const styles = {
   message: {
     fontSize: '14px',
     color: colors.text.primary,
-    fontWeight: 500,
+    fontWeight: 600,
   },
   status: {
     fontSize: '12px',
@@ -51,10 +61,6 @@ const stateColors: Record<ManduState, string> = {
   hmr: colors.brand.accent,
 };
 
-// ============================================================================
-// Animation Keyframes (inline)
-// ============================================================================
-
 const bounceAnimation = `
   @keyframes mk-bounce {
     0%, 100% { transform: translateY(0); }
@@ -80,15 +86,11 @@ const shakeAnimation = `
 const sparkleAnimation = `
   @keyframes mk-sparkle {
     0% { transform: scale(1); }
-    50% { transform: scale(1.1); }
+    50% { transform: scale(1.08); }
     100% { transform: scale(1); }
   }
 `;
 
-// ============================================================================
-// Props
-// ============================================================================
-
 export interface ManduCharacterProps {
   state: ManduState;
   errorCount?: number;
@@ -97,10 +99,6 @@ export interface ManduCharacterProps {
   onClick?: () => void;
 }
 
-// ============================================================================
-// Component
-// ============================================================================
-
 export function ManduCharacter({
   state,
   errorCount = 0,
@@ -126,25 +124,34 @@ export function ManduCharacter({
     }
   };
 
-  const containerStyle = {
+  const containerStyle: React.CSSProperties = {
     ...styles.container,
     borderLeft: `4px solid ${stateColor}`,
     cursor: onClick ? 'pointer' : 'default',
     ...(compact && {
       padding: '8px 12px',
       gap: '8px',
+      borderRadius: '14px',
     }),
   };
 
-  const emojiStyle = {
-    ...styles.emoji,
+  const markStyle: React.CSSProperties = {
+    ...styles.mark,
     animation: getAnimation(),
-    ...(compact && { fontSize: '24px' }),
+    color: stateColor,
+    backgroundColor: `${stateColor}18`,
+    borderColor: `${stateColor}45`,
+    boxShadow: `inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 0 0 1px ${stateColor}10`,
+    ...(compact && {
+      minWidth: '36px',
+      height: '36px',
+      padding: '0 10px',
+      fontSize: '10px',
+    }),
   };
 
   return (
     <>
-      {/* Inject keyframes */}
       <style>
         {bounceAnimation}
         {pulseAnimation}
@@ -166,8 +173,8 @@ export function ManduCharacter({
           }
         }}
       >
-        <span style={emojiStyle} aria-hidden="true">
-          {character.emoji}
+        <span style={markStyle} aria-hidden="true">
+          {character.mark}
         </span>
 
         {!compact && (
@@ -175,7 +182,7 @@ export function ManduCharacter({
             <span style={styles.message}>{character.message}</span>
             {errorCount > 0 && (
               <span style={styles.status}>
-                {errorCount}개의 {state === 'error' ? '에러' : '경고'}가 있어요
+                {errorCount}개의 {state === 'error' ? '에러' : '경고'}가 있습니다
               </span>
             )}
           </div>
@@ -185,10 +192,6 @@ export function ManduCharacter({
   );
 }
 
-// ============================================================================
-// Badge Component (for mini display)
-// ============================================================================
-
 export interface ManduBadgeProps {
   state: ManduState;
   count?: number;
@@ -210,28 +213,28 @@ export function ManduBadge({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    width: '52px',
-    height: '52px',
-    padding: 0,
-    borderRadius: '9999px',
-    backgroundColor: isPressed
-      ? colors.background.light
+    width: '72px',
+    height: '56px',
+    padding: '0 14px',
+    borderRadius: '18px',
+    background: isPressed
+      ? `linear-gradient(180deg, ${colors.background.light}, ${colors.background.medium})`
       : isHovered
-        ? colors.background.medium
-        : colors.background.dark,
-    border: `2px solid ${isPressed ? stateColor : isHovered ? colors.brand.accent : stateColor + '70'}`,
+        ? `linear-gradient(180deg, ${colors.background.medium}, ${colors.background.dark})`
+        : `linear-gradient(180deg, ${colors.background.dark}, ${colors.background.medium})`,
+    border: `1px solid ${isPressed ? stateColor : isHovered ? colors.brand.accent : `${stateColor}80`}`,
     cursor: 'pointer',
     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)`
+      ? '0 8px 18px rgba(8, 6, 18, 0.36), inset 0 2px 4px rgba(0, 0, 0, 0.12)'
       : 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`,
+        ? `0 18px 36px rgba(8, 6, 18, 0.42), 0 0 0 4px ${stateColor}18`
+        : `0 10px 22px rgba(8, 6, 18, 0.3), 0 0 0 1px ${stateColor}14`,
     userSelect: 'none',
     transform: isPressed
       ? 'scale(0.92) translateY(1px)'
       : isHovered
-        ? 'scale(1.1) translateY(-2px)'
+        ? 'scale(1.04) translateY(-2px)'
         : 'scale(1) translateY(0px)',
     outline: 'none',
     lineHeight: 1,
@@ -247,17 +250,29 @@ export function ManduBadge({
   };
 
   const textStyle: React.CSSProperties = {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    gap: '3px',
     fontFamily: typography.fontFamily.sans,
     color: colors.brand.accent,
-    fontSize: '14px',
+    fontSize: '13px',
     fontWeight: typography.fontWeight.bold,
     lineHeight: 1,
-    letterSpacing: '0.5px',
+    letterSpacing: '0.08em',
     transition: `transform 200ms ${animation.easing.spring}`,
-    transform: isHovered ? 'rotate(-8deg)' : 'rotate(0deg)',
+    transform: isHovered ? 'translateY(-1px)' : 'translateY(0px)',
     userSelect: 'none',
   };
 
+  const subtextStyle: React.CSSProperties = {
+    fontSize: '9px',
+    fontWeight: typography.fontWeight.medium,
+    letterSpacing: '0.16em',
+    color: colors.text.secondary,
+    textTransform: 'uppercase',
+  };
+
   const countBubbleStyle: React.CSSProperties = {
     position: 'absolute',
     top: '-4px',
@@ -286,14 +301,23 @@ export function ManduBadge({
       style={badgeStyle}
       onClick={onClick}
       onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => { setIsHovered(false); setIsPressed(false); }}
+      onMouseLeave={() => {
+        setIsHovered(false);
+        setIsPressed(false);
+      }}
       onMouseDown={() => setIsPressed(true)}
       onMouseUp={() => setIsPressed(false)}
       onFocus={() => setIsHovered(true)}
-      onBlur={() => { setIsHovered(false); setIsPressed(false); }}
+      onBlur={() => {
+        setIsHovered(false);
+        setIsPressed(false);
+      }}
       aria-label={`Mandu Kitchen: ${character.message}${count > 0 ? `, ${count} issues` : ''}`}
     >
-      <span aria-hidden="true" style={textStyle}>MK</span>
+      <span aria-hidden="true" style={textStyle}>
+        <span>MK</span>
+        <span style={subtextStyle}>Dev</span>
+      </span>
       {count > 0 && (
         <span style={countBubbleStyle}>
           {count > 99 ? '99+' : count}

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

@@ -176,8 +176,8 @@ export function ErrorsPanel({
         <div style={styles.emptyState}>
           <ManduCharacter state="normal" compact />
           <p style={styles.emptyMessage}>
-            에러가 없어요!<br />
-            만두가 잘 익고 있어요 🥟
+            활성 오류가 없습니다.<br />
+            새 이슈가 생기면 여기에 표시됩니다.
           </p>
         </div>
       </div>

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

@@ -204,12 +204,11 @@ export function GuardPanel({ violations, onClear }: GuardPanelProps): React.Reac
   if (violations.length === 0) {
     return (
       <div style={styles.container}>
-        <div style={styles.emptyState}>
-          🛡️
-          <p>
-            아키텍처 위반이 없어요!<br />
-            코드가 규칙을 잘 따르고 있어요.
-          </p>
+        <div style={styles.emptyState}>
+          <p>
+            현재 아키텍처 위반이 없습니다.<br />
+            새 스캔 결과가 생기면 여기에 표시됩니다.
+          </p>
           <button
             style={{
               ...styles.clearButton,
@@ -219,16 +218,16 @@ export function GuardPanel({ violations, onClear }: GuardPanelProps): React.Reac
             }}
             onClick={handleScan}
             disabled={scanning}
-          >
-            {scanning ? '스캔 중...' : '🔍 전체 스캔'}
-          </button>
-          {scanResult && (
-            <p style={{ marginTop: spacing.sm, fontSize: typography.fontSize.xs }}>
-              스캔 결과: {scanResult.total === 0
-                ? '위반 없음 ✅'
-                : `${scanResult.total}개 위반 (에러 ${scanResult.errors}, 경고 ${scanResult.warnings})`
-              }
-            </p>
+          >
+            {scanning ? '스캔 중...' : '전체 스캔'}
+          </button>
+          {scanResult && (
+            <p style={{ marginTop: spacing.sm, fontSize: typography.fontSize.xs }}>
+              스캔 결과: {scanResult.total === 0
+                ? '위반 없음'
+                : `${scanResult.total}개 위반 (에러 ${scanResult.errors}, 경고 ${scanResult.warnings})`
+              }
+            </p>
           )}
         </div>
       </div>
@@ -253,9 +252,9 @@ export function GuardPanel({ violations, onClear }: GuardPanelProps): React.Reac
             style={{ ...styles.clearButton, opacity: scanning ? 0.5 : 1 }}
             onClick={handleScan}
             disabled={scanning}
-          >
-            {scanning ? '스캔 중...' : '🔍 스캔'}
-          </button>
+          >
+            {scanning ? '스캔 중...' : '스캔'}
+          </button>
           <button style={styles.clearButton} onClick={onClear}>
             모두 지우기
           </button>
@@ -323,9 +322,9 @@ export function GuardPanel({ violations, onClear }: GuardPanelProps): React.Reac
                       color: isApproved ? colors.semantic.success : colors.text.secondary,
                     }}
                     onClick={() => handleDecision(violation.ruleId, violation.source.file, 'approve')}
-                  >
-                    ✅
-                  </button>
+                  >
+                    허용
+                  </button>
                   <button
                     style={{
                       ...styles.clearButton,
@@ -335,9 +334,9 @@ export function GuardPanel({ violations, onClear }: GuardPanelProps): React.Reac
                       color: decision === 'reject' ? colors.semantic.error : colors.text.secondary,
                     }}
                     onClick={() => handleDecision(violation.ruleId, violation.source.file, 'reject')}
-                  >
-                    ❌
-                  </button>
+                  >
+                    차단
+                  </button>
                 </div>
               </div>
 
@@ -359,12 +358,12 @@ export function GuardPanel({ violations, onClear }: GuardPanelProps): React.Reac
                 )}
               </div>
 
-              {violation.suggestion && (
-                <div style={styles.suggestion}>
-                  <div style={styles.suggestionLabel}>💡 제안</div>
-                  {violation.suggestion}
-                </div>
-              )}
+              {violation.suggestion && (
+                <div style={styles.suggestion}>
+                  <div style={styles.suggestionLabel}>제안</div>
+                  {violation.suggestion}
+                </div>
+              )}
             </div>
           );
         })}

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

@@ -68,9 +68,18 @@ const styles = {
     transition: `all ${animation.duration.fast}`,
   },
   islandIcon: {
-    fontSize: typography.fontSize.lg,
-    width: '28px',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minWidth: '48px',
+    height: '28px',
+    padding: '0 8px',
+    borderRadius: borderRadius.full,
     textAlign: 'center' as const,
+    fontSize: typography.fontSize.xs,
+    fontWeight: typography.fontWeight.bold,
+    fontFamily: typography.fontFamily.mono,
+    letterSpacing: '0.08em',
   },
   islandInfo: {
     flex: 1,
@@ -118,11 +127,11 @@ const styles = {
 };
 
 const statusConfig: Record<string, { icon: string; color: string; bg: string }> = {
-  ssr: { icon: '📄', color: colors.text.muted, bg: colors.background.light },
-  pending: { icon: '⏳', color: colors.semantic.warning, bg: `${colors.semantic.warning}20` },
-  hydrating: { icon: '💧', color: colors.semantic.info, bg: `${colors.semantic.info}20` },
-  hydrated: { icon: '✅', color: colors.semantic.success, bg: `${colors.semantic.success}20` },
-  error: { icon: '❌', color: colors.semantic.error, bg: `${colors.semantic.error}20` },
+  ssr: { icon: 'SSR', color: colors.text.muted, bg: colors.background.light },
+  pending: { icon: 'WAIT', color: colors.semantic.warning, bg: `${colors.semantic.warning}20` },
+  hydrating: { icon: 'HYDR', color: colors.semantic.info, bg: `${colors.semantic.info}20` },
+  hydrated: { icon: 'READY', color: colors.semantic.success, bg: `${colors.semantic.success}20` },
+  error: { icon: 'ERR', color: colors.semantic.error, bg: `${colors.semantic.error}20` },
 };
 
 const strategyLabels: Record<string, string> = {
@@ -178,10 +187,9 @@ export function IslandsPanel({ islands }: IslandsPanelProps): React.ReactElement
     return (
       <div style={styles.container}>
         <div style={styles.emptyState}>
-          🏝️
           <p>
-            아직 등록된 Island가 없어요.<br />
-            Island 컴포넌트를 사용하면 여기에 표시됩니다.
+            아직 등록된 Island가 없습니다.<br />
+            Island 컴포넌트를 사용하면 여기에 상태가 표시됩니다.
           </p>
         </div>
       </div>
@@ -198,18 +206,18 @@ export function IslandsPanel({ islands }: IslandsPanelProps): React.ReactElement
             <span style={styles.statValue}>{stats.total}</span>
           </div>
           <div style={styles.stat}>
-            <span>✅</span>
+            <span>Ready</span>
             <span style={styles.statValue}>{stats.hydrated}</span>
           </div>
           {stats.pending > 0 && (
             <div style={styles.stat}>
-              <span>⏳</span>
+              <span>Pending</span>
               <span style={styles.statValue}>{stats.pending}</span>
             </div>
           )}
           {stats.errors > 0 && (
             <div style={styles.stat}>
-              <span>❌</span>
+              <span>Error</span>
               <span style={{ ...styles.statValue, color: colors.semantic.error }}>
                 {stats.errors}
               </span>
@@ -234,7 +242,15 @@ export function IslandsPanel({ islands }: IslandsPanelProps): React.ReactElement
 
           return (
             <div key={island.id} style={styles.islandItem}>
-              <span style={styles.islandIcon}>{status.icon}</span>
+              <span
+                style={{
+                  ...styles.islandIcon,
+                  backgroundColor: status.bg,
+                  color: status.color,
+                }}
+              >
+                {status.icon}
+              </span>
 
               <div style={styles.islandInfo}>
                 <div style={styles.islandName}>{island.name}</div>

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

@@ -213,10 +213,9 @@ export function NetworkPanel({ requests }: NetworkPanelProps): React.ReactElemen
     return (
       <div style={styles.container}>
         <div style={styles.emptyState}>
-          📡
           <p>
-            아직 네트워크 요청이 없어요.<br />
-            API 호출이 발생하면 여기에 표시됩니다.
+            아직 네트워크 요청이 없습니다.<br />
+            요청이 발생하면 여기에 기록됩니다.
           </p>
         </div>
       </div>