blacktrigram 0.7.2

package/lib/components/shared/ui/MobileHUDLayout.d.ts

@@ -0,0 +1,70 @@
+/**
+ * MobileHUDLayout Component
+ *
+ * Mobile-optimized HUD layout for combat screens
+ * Designed for touch-friendly interfaces with strategic element positioning
+ *
+ * Features:
+ * - Touch targets ≥44x44px (iOS guideline)
+ * - Font sizes ≥14px body, ≥16px important text
+ * - Safe area inset support
+ * - Portrait and landscape mode optimization
+ * - Simplified layout for small screens
+ *
+ * @module components/ui/MobileHUDLayout
+ * @category Mobile UI
+ * @korean 모바일HUD레이아웃
+ */
+import React from "react";
+import { PlayerState } from "../../../systems";
+/**
+ * Props for MobileHUDLayout component
+ */
+export interface MobileHUDLayoutProps {
+    /** Player 1 state */
+    readonly player1: PlayerState;
+    /** Player 2 state */
+    readonly player2: PlayerState;
+    /** Time remaining in seconds */
+    readonly timeRemaining: number;
+    /** Current round number */
+    readonly currentRound: number;
+    /** Maximum rounds */
+    readonly maxRounds: number;
+    /** Whether game is paused */
+    readonly isPaused?: boolean;
+    /** Test ID for testing */
+    readonly testId?: string;
+}
+/**
+ * MobileHUDLayout Component
+ *
+ * Optimized HUD layout for mobile combat gameplay
+ * Automatically adjusts for:
+ * - iPhone SE (375x667)
+ * - iPhone 11/12/13 (414x896)
+ * - Portrait and landscape orientations
+ *
+ * Design Principles:
+ * - Essential information only (health, timer, rounds)
+ * - Touch-friendly element sizing (≥44px)
+ * - High contrast for outdoor visibility
+ * - Minimal screen real estate usage
+ * - Safe area aware positioning
+ *
+ * @example
+ * ```tsx
+ * <MobileHUDLayout
+ *   player1={player1State}
+ *   player2={player2State}
+ *   timeRemaining={90}
+ *   currentRound={1}
+ *   maxRounds={3}
+ * />
+ * ```
+ *
+ * @public
+ * @korean 모바일HUD레이아웃
+ */
+export declare const MobileHUDLayout: React.FC<MobileHUDLayoutProps>;
+//# sourceMappingURL=MobileHUDLayout.d.ts.map

package/lib/components/shared/ui/MobileHUDLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileHUDLayout.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/ui/MobileHUDLayout.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAGH,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAU/C;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,qBAAqB;IACrB,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC;IAC9B,qBAAqB;IACrB,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC;IAC9B,gCAAgC;IAChC,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,2BAA2B;IAC3B,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,qBAAqB;IACrB,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,6BAA6B;IAC7B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,0BAA0B;IAC1B,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;CAC1B;AAkMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAkG1D,CAAC"}

package/lib/components/shared/ui/ResponsiveContainer.d.ts

@@ -0,0 +1,69 @@
+/**
+ * ResponsiveContainer Component
+ *
+ * Wrapper component that applies responsive layout properties and safe area insets
+ * with smooth transitions for window resizing operations.
+ *
+ * Enhanced Features:
+ * - Five screen size categories (mobile, tablet, desktop, large, xlarge)
+ * - Proportional scaling for fonts and spacing
+ * - Smooth CSS transitions for resize operations (300ms ease-in-out)
+ * - Safe area insets for mobile devices
+ * - Consistent mobile-optimized layout
+ *
+ * @module components/ui/ResponsiveContainer
+ * @category Mobile UI
+ * @korean 반응형컨테이너
+ */
+import React, { CSSProperties } from 'react';
+/**
+ * Props for ResponsiveContainer component
+ */
+export interface ResponsiveContainerProps {
+    /** Child components to render */
+    readonly children: React.ReactNode;
+    /** Whether to apply safe area insets */
+    readonly applySafeArea?: boolean;
+    /** Padding density */
+    readonly padding?: 'none' | 'compact' | 'normal' | 'spacious';
+    /** Custom className */
+    readonly className?: string;
+    /** Custom style overrides */
+    readonly style?: CSSProperties;
+    /** Whether to enable smooth transitions for resize operations */
+    readonly enableTransitions?: boolean;
+    /** Test ID for testing */
+    readonly testId?: string;
+}
+/**
+ * ResponsiveContainer Component
+ *
+ * Automatically applies responsive layout properties including:
+ * - Safe area insets for mobile devices (notch, home indicator)
+ * - Responsive padding based on device size
+ * - Touch-friendly spacing
+ * - Smooth transitions for resize operations (300ms ease-in-out)
+ * - Proportional scaling across all screen sizes
+ *
+ * Usage:
+ * - Wrap HUD components for automatic mobile optimization
+ * - Apply safe area insets to avoid overlap with device UI
+ * - Consistent spacing across all screen sizes
+ * - Enable transitions for smooth window resizing
+ *
+ * @example
+ * ```tsx
+ * <ResponsiveContainer
+ *   applySafeArea
+ *   padding="normal"
+ *   enableTransitions
+ * >
+ *   <CombatHUD />
+ * </ResponsiveContainer>
+ * ```
+ *
+ * @public
+ * @korean 반응형컨테이너
+ */
+export declare const ResponsiveContainer: React.FC<ResponsiveContainerProps>;
+//# sourceMappingURL=ResponsiveContainer.d.ts.map

package/lib/components/shared/ui/ResponsiveContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/ui/ResponsiveContainer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAI7C;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC,iCAAiC;IACjC,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,wCAAwC;IACxC,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC;IACjC,sBAAsB;IACtB,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAC;IAC9D,uBAAuB;IACvB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,6BAA6B;IAC7B,QAAQ,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC;IAC/B,iEAAiE;IACjE,QAAQ,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IACrC,0BAA0B;IAC1B,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA+DlE,CAAC"}

package/lib/components/shared/ui/SplashScreen.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export interface SplashScreenProps {
+    readonly onStart: () => void;
+    readonly width: number;
+    readonly height: number;
+}
+/**
+ * Splash screen that requires user interaction before starting the game.
+ * This is necessary to initialize AudioContext which requires a user gesture.
+ */
+export declare const SplashScreen: React.FC<SplashScreenProps>;
+export default SplashScreen;
+//# sourceMappingURL=SplashScreen.d.ts.map

package/lib/components/shared/ui/SplashScreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplashScreen.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/ui/SplashScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAoB9D,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;IAC7B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA+NpD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/shared/ui/SplashScreen.js

@@ -0,0 +1,204 @@
+import { KOREAN_COLORS } from "../../../types/constants/colors.js";
+import { FONT_FAMILY } from "../../../types/constants/typography.js";
+import "../../../types/constants/index.js";
+import { toHex } from "../../../utils/colorUtils.js";
+import { shouldUseMobileControls } from "../../../utils/deviceDetection.js";
+import { useCallback, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/shared/ui/SplashScreen.tsx
+var LOADING_DELAY_MS = 100;
+var HEX_COLORS = {
+	PRIMARY_CYAN: toHex(KOREAN_COLORS.PRIMARY_CYAN),
+	ACCENT_GOLD: toHex(KOREAN_COLORS.ACCENT_GOLD)
+};
+/**
+* Splash screen that requires user interaction before starting the game.
+* This is necessary to initialize AudioContext which requires a user gesture.
+*/
+var SplashScreen = ({ onStart, width, height }) => {
+	const [isLoading, setIsLoading] = useState(false);
+	const isMobile = useMemo(() => shouldUseMobileControls(), []);
+	const layoutCalculation = useMemo(() => ({
+		titleFontSize: isMobile ? 36 : 64,
+		subtitleFontSize: isMobile ? 16 : 24,
+		bodyFontSize: isMobile ? 12 : 14,
+		instructionsFontSize: isMobile ? 11 : 12,
+		buttonPadding: isMobile ? "16px 48px" : "20px 60px",
+		buttonFontSize: isMobile ? 16 : 20
+	}), [isMobile]);
+	const handleStart = useCallback(() => {
+		setIsLoading(true);
+		setTimeout(() => {
+			onStart();
+		}, LOADING_DELAY_MS);
+	}, [onStart]);
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			width,
+			height,
+			display: "flex",
+			flexDirection: "column",
+			justifyContent: "center",
+			alignItems: "center",
+			background: "linear-gradient(180deg, #0a0f12 0%, #1a1a2e 100%)",
+			color: "#fff",
+			fontFamily: FONT_FAMILY.CYBER,
+			position: "relative",
+			overflow: "hidden"
+		},
+		"data-testid": "splash-screen",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				role: "presentation",
+				"aria-hidden": "true",
+				style: {
+					position: "absolute",
+					inset: 0,
+					background: `
+            repeating-linear-gradient(
+              0deg,
+              transparent,
+              transparent 50px,
+              #${HEX_COLORS.PRIMARY_CYAN}08 50px,
+              #${HEX_COLORS.PRIMARY_CYAN}08 51px
+            ),
+            repeating-linear-gradient(
+              90deg,
+              transparent,
+              transparent 50px,
+              #${HEX_COLORS.PRIMARY_CYAN}08 50px,
+              #${HEX_COLORS.PRIMARY_CYAN}08 51px
+            )
+          `,
+					opacity: .3
+				}
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				style: {
+					position: "absolute",
+					left: "-10000px",
+					width: "1px",
+					height: "1px",
+					overflow: "hidden"
+				},
+				children: isLoading ? "Initializing audio and loading game" : "Ready to start"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					marginBottom: "60px",
+					textAlign: "center",
+					zIndex: 1
+				},
+				children: [
+					/* @__PURE__ */ jsx("h1", {
+						style: {
+							fontSize: `${layoutCalculation.titleFontSize}px`,
+							fontWeight: 900,
+							color: `#${HEX_COLORS.PRIMARY_CYAN}`,
+							textShadow: `0 0 20px #${HEX_COLORS.PRIMARY_CYAN}80`,
+							marginBottom: "20px",
+							letterSpacing: "4px"
+						},
+						children: "흑괘"
+					}),
+					/* @__PURE__ */ jsx("h2", {
+						style: {
+							fontSize: `${layoutCalculation.subtitleFontSize}px`,
+							fontWeight: 400,
+							color: `#${HEX_COLORS.ACCENT_GOLD}`,
+							letterSpacing: "2px",
+							marginTop: 0
+						},
+						children: "BLACK TRIGRAM"
+					}),
+					/* @__PURE__ */ jsx("p", {
+						style: {
+							fontSize: `${layoutCalculation.bodyFontSize}px`,
+							color: "#aaa",
+							marginTop: "20px",
+							letterSpacing: "1px"
+						},
+						children: "Korean Martial Arts Dojang"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("button", {
+				onClick: handleStart,
+				disabled: isLoading,
+				"aria-label": isLoading ? "Starting game and initializing audio" : "Start game and initialize audio",
+				"aria-busy": isLoading,
+				"aria-describedby": "splash-instructions",
+				style: {
+					padding: layoutCalculation.buttonPadding,
+					fontSize: `${layoutCalculation.buttonFontSize}px`,
+					fontFamily: FONT_FAMILY.CYBER,
+					fontWeight: 700,
+					color: isLoading ? "#666" : "#000",
+					background: isLoading ? "#333" : `linear-gradient(135deg, #${HEX_COLORS.PRIMARY_CYAN} 0%, #${HEX_COLORS.ACCENT_GOLD} 100%)`,
+					border: "none",
+					borderRadius: "8px",
+					cursor: isLoading ? "not-allowed" : "pointer",
+					textTransform: "uppercase",
+					letterSpacing: "2px",
+					transition: "all 0.3s ease",
+					boxShadow: isLoading ? "none" : `0 4px 20px #${HEX_COLORS.PRIMARY_CYAN}40`,
+					position: "relative",
+					zIndex: 1,
+					opacity: isLoading ? .6 : 1
+				},
+				onMouseEnter: (e) => {
+					if (!isLoading) {
+						e.currentTarget.style.transform = "scale(1.05)";
+						e.currentTarget.style.boxShadow = `0 6px 30px #${HEX_COLORS.PRIMARY_CYAN}60`;
+					}
+				},
+				onMouseLeave: (e) => {
+					if (!isLoading) {
+						e.currentTarget.style.transform = "scale(1)";
+						e.currentTarget.style.boxShadow = `0 4px 20px #${HEX_COLORS.PRIMARY_CYAN}40`;
+					}
+				},
+				"data-testid": "splash-start-button",
+				children: isLoading ? "시작 중... Starting..." : "시작 | Start"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				id: "splash-instructions",
+				style: {
+					marginTop: "40px",
+					textAlign: "center",
+					color: "#888",
+					fontSize: `${layoutCalculation.instructionsFontSize}px`,
+					maxWidth: "600px",
+					padding: "0 20px",
+					zIndex: 1
+				},
+				children: [/* @__PURE__ */ jsx("p", {
+					style: { margin: "8px 0" },
+					children: "Audio initialization requires user interaction"
+				}), /* @__PURE__ */ jsx("p", {
+					style: { margin: "8px 0" },
+					children: "Click the button above to enable sound and start the game"
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				role: "contentinfo",
+				"aria-label": `Application version 0.7.2`,
+				style: {
+					position: "absolute",
+					bottom: "20px",
+					right: "20px",
+					color: "#555",
+					fontSize: "10px",
+					zIndex: 1
+				},
+				children: ["v", "0.7.2"]
+			})
+		]
+	});
+};
+//#endregion
+export { SplashScreen as default };
+
+//# sourceMappingURL=SplashScreen.js.map

package/lib/components/shared/ui/SplashScreen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplashScreen.js","names":[],"sources":["../../../../src/components/shared/ui/SplashScreen.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } from \"react\";\nimport { FONT_FAMILY, KOREAN_COLORS } from \"@/types/constants\";\nimport { toHex } from \"../../../utils/colorUtils\";\nimport { shouldUseMobileControls } from \"../../../utils/deviceDetection\";\n\n// Declare global APP_VERSION constant (injected by build process)\ndeclare const APP_VERSION: string | undefined;\n\n// Constants\n// Small delay to show loading state for visual feedback.\n// 100ms is sufficient for users to perceive the state change\n// without feeling sluggish. This value can be tuned for UX.\nconst LOADING_DELAY_MS = 100;\n\n// Pre-compute hex colors from Korean color constants\nconst HEX_COLORS = {\n  PRIMARY_CYAN: toHex(KOREAN_COLORS.PRIMARY_CYAN),\n  ACCENT_GOLD: toHex(KOREAN_COLORS.ACCENT_GOLD),\n} as const;\n\nexport interface SplashScreenProps {\n  readonly onStart: () => void;\n  readonly width: number;\n  readonly height: number;\n}\n\n/**\n * Splash screen that requires user interaction before starting the game.\n * This is necessary to initialize AudioContext which requires a user gesture.\n */\nexport const SplashScreen: React.FC<SplashScreenProps> = ({\n  onStart,\n  width,\n  height,\n}) => {\n  const [isLoading, setIsLoading] = useState(false);\n\n  // Use proper device detection (user-agent priority for high-res phones)\n  // This ensures mobile layout is used even on 4K Android devices\n  // User-agent doesn't change during session, so no dependencies needed\n  const isMobile = useMemo(() => shouldUseMobileControls(), []);\n\n  // Memoize responsive layout values\n  const layoutCalculation = useMemo(\n    () => ({\n      titleFontSize: isMobile ? 36 : 64,\n      subtitleFontSize: isMobile ? 16 : 24,\n      bodyFontSize: isMobile ? 12 : 14,\n      instructionsFontSize: isMobile ? 11 : 12,\n      buttonPadding: isMobile ? \"16px 48px\" : \"20px 60px\",\n      buttonFontSize: isMobile ? 16 : 20,\n    }),\n    [isMobile],\n  );\n\n  const handleStart = useCallback(() => {\n    setIsLoading(true);\n    // Small delay to show loading state\n    setTimeout(() => {\n      onStart();\n    }, LOADING_DELAY_MS);\n  }, [onStart]);\n\n  return (\n    <div\n      style={{\n        width,\n        height,\n        display: \"flex\",\n        flexDirection: \"column\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n        background: \"linear-gradient(180deg, #0a0f12 0%, #1a1a2e 100%)\",\n        color: \"#fff\",\n        fontFamily: FONT_FAMILY.CYBER,\n        position: \"relative\",\n        overflow: \"hidden\",\n      }}\n      data-testid=\"splash-screen\"\n    >\n      {/* Animated background grid - decorative only */}\n      <div\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        style={{\n          position: \"absolute\",\n          inset: 0,\n          background: `\n            repeating-linear-gradient(\n              0deg,\n              transparent,\n              transparent 50px,\n              #${HEX_COLORS.PRIMARY_CYAN}08 50px,\n              #${HEX_COLORS.PRIMARY_CYAN}08 51px\n            ),\n            repeating-linear-gradient(\n              90deg,\n              transparent,\n              transparent 50px,\n              #${HEX_COLORS.PRIMARY_CYAN}08 50px,\n              #${HEX_COLORS.PRIMARY_CYAN}08 51px\n            )\n          `,\n          opacity: 0.3,\n        }}\n      />\n\n      {/* Screen reader live region for loading state */}\n      <div\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n        style={{\n          position: \"absolute\",\n          left: \"-10000px\",\n          width: \"1px\",\n          height: \"1px\",\n          overflow: \"hidden\",\n        }}\n      >\n        {isLoading ? \"Initializing audio and loading game\" : \"Ready to start\"}\n      </div>\n\n      {/* Logo/Title */}\n      <div\n        style={{\n          marginBottom: \"60px\",\n          textAlign: \"center\",\n          zIndex: 1,\n        }}\n      >\n        <h1\n          style={{\n            fontSize: `${layoutCalculation.titleFontSize}px`,\n            fontWeight: 900,\n            color: `#${HEX_COLORS.PRIMARY_CYAN}`,\n            textShadow: `0 0 20px #${HEX_COLORS.PRIMARY_CYAN}80`,\n            marginBottom: \"20px\",\n            letterSpacing: \"4px\",\n          }}\n        >\n          흑괘\n        </h1>\n        <h2\n          style={{\n            fontSize: `${layoutCalculation.subtitleFontSize}px`,\n            fontWeight: 400,\n            color: `#${HEX_COLORS.ACCENT_GOLD}`,\n            letterSpacing: \"2px\",\n            marginTop: 0,\n          }}\n        >\n          BLACK TRIGRAM\n        </h2>\n        <p\n          style={{\n            fontSize: `${layoutCalculation.bodyFontSize}px`,\n            color: \"#aaa\",\n            marginTop: \"20px\",\n            letterSpacing: \"1px\",\n          }}\n        >\n          Korean Martial Arts Dojang\n        </p>\n      </div>\n\n      {/* Start Button */}\n      <button\n        onClick={handleStart}\n        disabled={isLoading}\n        aria-label={\n          isLoading\n            ? \"Starting game and initializing audio\"\n            : \"Start game and initialize audio\"\n        }\n        aria-busy={isLoading}\n        aria-describedby=\"splash-instructions\"\n        style={{\n          padding: layoutCalculation.buttonPadding,\n          fontSize: `${layoutCalculation.buttonFontSize}px`,\n          fontFamily: FONT_FAMILY.CYBER,\n          fontWeight: 700,\n          color: isLoading ? \"#666\" : \"#000\",\n          background: isLoading\n            ? \"#333\"\n            : `linear-gradient(135deg, #${HEX_COLORS.PRIMARY_CYAN} 0%, #${HEX_COLORS.ACCENT_GOLD} 100%)`,\n          border: \"none\",\n          borderRadius: \"8px\",\n          cursor: isLoading ? \"not-allowed\" : \"pointer\",\n          textTransform: \"uppercase\",\n          letterSpacing: \"2px\",\n          transition: \"all 0.3s ease\",\n          boxShadow: isLoading\n            ? \"none\"\n            : `0 4px 20px #${HEX_COLORS.PRIMARY_CYAN}40`,\n          position: \"relative\",\n          zIndex: 1,\n          opacity: isLoading ? 0.6 : 1,\n        }}\n        onMouseEnter={(e) => {\n          if (!isLoading) {\n            e.currentTarget.style.transform = \"scale(1.05)\";\n            e.currentTarget.style.boxShadow = `0 6px 30px #${HEX_COLORS.PRIMARY_CYAN}60`;\n          }\n        }}\n        onMouseLeave={(e) => {\n          if (!isLoading) {\n            e.currentTarget.style.transform = \"scale(1)\";\n            e.currentTarget.style.boxShadow = `0 4px 20px #${HEX_COLORS.PRIMARY_CYAN}40`;\n          }\n        }}\n        data-testid=\"splash-start-button\"\n      >\n        {isLoading ? \"시작 중... Starting...\" : \"시작 | Start\"}\n      </button>\n\n      {/* Instructions */}\n      <div\n        id=\"splash-instructions\"\n        style={{\n          marginTop: \"40px\",\n          textAlign: \"center\",\n          color: \"#888\",\n          fontSize: `${layoutCalculation.instructionsFontSize}px`,\n          maxWidth: \"600px\",\n          padding: \"0 20px\",\n          zIndex: 1,\n        }}\n      >\n        <p style={{ margin: \"8px 0\" }}>\n          Audio initialization requires user interaction\n        </p>\n        <p style={{ margin: \"8px 0\" }}>\n          Click the button above to enable sound and start the game\n        </p>\n      </div>\n\n      {/* Version info */}\n      <div\n        role=\"contentinfo\"\n        aria-label={`Application version ${typeof APP_VERSION !== \"undefined\" ? APP_VERSION : \"0.5.3\"}`}\n        style={{\n          position: \"absolute\",\n          bottom: \"20px\",\n          right: \"20px\",\n          color: \"#555\",\n          fontSize: \"10px\",\n          zIndex: 1,\n        }}\n      >\n        v{typeof APP_VERSION !== \"undefined\" ? APP_VERSION : \"0.5.3\"}\n      </div>\n    </div>\n  );\n};\n\nexport default SplashScreen;\n"],"mappings":";;;;;;;;AAYA,IAAM,mBAAmB;AAGzB,IAAM,aAAa;CACjB,cAAc,MAAM,cAAc,aAAa;CAC/C,aAAa,MAAM,cAAc,YAAY;CAC9C;;;;;AAYD,IAAa,gBAA6C,EACxD,SACA,OACA,aACI;CACJ,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;CAKjD,MAAM,WAAW,cAAc,yBAAyB,EAAE,EAAE,CAAC;CAG7D,MAAM,oBAAoB,eACjB;EACL,eAAe,WAAW,KAAK;EAC/B,kBAAkB,WAAW,KAAK;EAClC,cAAc,WAAW,KAAK;EAC9B,sBAAsB,WAAW,KAAK;EACtC,eAAe,WAAW,cAAc;EACxC,gBAAgB,WAAW,KAAK;EACjC,GACD,CAAC,SAAS,CACX;CAED,MAAM,cAAc,kBAAkB;AACpC,eAAa,KAAK;AAElB,mBAAiB;AACf,YAAS;KACR,iBAAiB;IACnB,CAAC,QAAQ,CAAC;AAEb,QACE,qBAAC,OAAD;EACE,OAAO;GACL;GACA;GACA,SAAS;GACT,eAAe;GACf,gBAAgB;GAChB,YAAY;GACZ,YAAY;GACZ,OAAO;GACP,YAAY,YAAY;GACxB,UAAU;GACV,UAAU;GACX;EACD,eAAY;YAdd;GAiBE,oBAAC,OAAD;IACE,MAAK;IACL,eAAY;IACZ,OAAO;KACL,UAAU;KACV,OAAO;KACP,YAAY;;;;;iBAKL,WAAW,aAAa;iBACxB,WAAW,aAAa;;;;;;iBAMxB,WAAW,aAAa;iBACxB,WAAW,aAAa;;;KAG/B,SAAS;KACV;IACD,CAAA;GAGF,oBAAC,OAAD;IACE,aAAU;IACV,eAAY;IACZ,OAAO;KACL,UAAU;KACV,MAAM;KACN,OAAO;KACP,QAAQ;KACR,UAAU;KACX;cAEA,YAAY,wCAAwC;IACjD,CAAA;GAGN,qBAAC,OAAD;IACE,OAAO;KACL,cAAc;KACd,WAAW;KACX,QAAQ;KACT;cALH;KAOE,oBAAC,MAAD;MACE,OAAO;OACL,UAAU,GAAG,kBAAkB,cAAc;OAC7C,YAAY;OACZ,OAAO,IAAI,WAAW;OACtB,YAAY,aAAa,WAAW,aAAa;OACjD,cAAc;OACd,eAAe;OAChB;gBACF;MAEI,CAAA;KACL,oBAAC,MAAD;MACE,OAAO;OACL,UAAU,GAAG,kBAAkB,iBAAiB;OAChD,YAAY;OACZ,OAAO,IAAI,WAAW;OACtB,eAAe;OACf,WAAW;OACZ;gBACF;MAEI,CAAA;KACL,oBAAC,KAAD;MACE,OAAO;OACL,UAAU,GAAG,kBAAkB,aAAa;OAC5C,OAAO;OACP,WAAW;OACX,eAAe;OAChB;gBACF;MAEG,CAAA;KACA;;GAGN,oBAAC,UAAD;IACE,SAAS;IACT,UAAU;IACV,cACE,YACI,yCACA;IAEN,aAAW;IACX,oBAAiB;IACjB,OAAO;KACL,SAAS,kBAAkB;KAC3B,UAAU,GAAG,kBAAkB,eAAe;KAC9C,YAAY,YAAY;KACxB,YAAY;KACZ,OAAO,YAAY,SAAS;KAC5B,YAAY,YACR,SACA,4BAA4B,WAAW,aAAa,QAAQ,WAAW,YAAY;KACvF,QAAQ;KACR,cAAc;KACd,QAAQ,YAAY,gBAAgB;KACpC,eAAe;KACf,eAAe;KACf,YAAY;KACZ,WAAW,YACP,SACA,eAAe,WAAW,aAAa;KAC3C,UAAU;KACV,QAAQ;KACR,SAAS,YAAY,KAAM;KAC5B;IACD,eAAe,MAAM;AACnB,SAAI,CAAC,WAAW;AACd,QAAE,cAAc,MAAM,YAAY;AAClC,QAAE,cAAc,MAAM,YAAY,eAAe,WAAW,aAAa;;;IAG7E,eAAe,MAAM;AACnB,SAAI,CAAC,WAAW;AACd,QAAE,cAAc,MAAM,YAAY;AAClC,QAAE,cAAc,MAAM,YAAY,eAAe,WAAW,aAAa;;;IAG7E,eAAY;cAEX,YAAY,wBAAwB;IAC9B,CAAA;GAGT,qBAAC,OAAD;IACE,IAAG;IACH,OAAO;KACL,WAAW;KACX,WAAW;KACX,OAAO;KACP,UAAU,GAAG,kBAAkB,qBAAqB;KACpD,UAAU;KACV,SAAS;KACT,QAAQ;KACT;cAVH,CAYE,oBAAC,KAAD;KAAG,OAAO,EAAE,QAAQ,SAAS;eAAE;KAE3B,CAAA,EACJ,oBAAC,KAAD;KAAG,OAAO,EAAE,QAAQ,SAAS;eAAE;KAE3B,CAAA,CACA;;GAGN,qBAAC,OAAD;IACE,MAAK;IACL,cAAY;IACZ,OAAO;KACL,UAAU;KACV,QAAQ;KACR,OAAO;KACP,OAAO;KACP,UAAU;KACV,QAAQ;KACT;cAVH,CAWC,KAAA,QAEK;;GACF"}

package/lib/components/shared/ui/StyledHUDPanel.d.ts

@@ -0,0 +1,56 @@
+/**
+ * StyledHUDPanel - Reusable HUD Panel Component
+ *
+ * A consistent, styled panel for HUD elements following the Black Trigram design system.
+ * Provides cyberpunk Korean aesthetic with glassmorphism effects.
+ *
+ * Features:
+ * - Configurable variants (default, accent)
+ * - Responsive padding based on SPACING scale
+ * - Hover effects with smooth transitions
+ * - Support for custom styles
+ * - WCAG AA compliant colors
+ *
+ * @korean 스타일이 적용된 HUD 패널
+ * @module Components/UI
+ */
+import React from 'react';
+import { type SpacingLevel } from '../../../types/constants/designSystem';
+/**
+ * StyledHUDPanel Props
+ */
+export interface StyledHUDPanelProps {
+    /** Panel content */
+    readonly children?: React.ReactNode;
+    /** Visual variant of the panel */
+    readonly variant?: 'default' | 'accent';
+    /** Padding size from SPACING scale */
+    readonly padding?: SpacingLevel;
+    /** Custom className for additional styling */
+    readonly className?: string;
+    /** Custom inline styles */
+    readonly style?: React.CSSProperties;
+    /** Enable hover effect */
+    readonly hover?: boolean;
+    /** Data test ID for testing */
+    readonly dataTestId?: string;
+    /** Click handler */
+    readonly onClick?: () => void;
+    /** Pointer events behavior */
+    readonly pointerEvents?: 'auto' | 'none' | 'all';
+}
+/**
+ * StyledHUDPanel Component
+ *
+ * Provides a consistent, reusable panel for HUD elements with cyberpunk styling.
+ *
+ * @example
+ * ```tsx
+ * <StyledHUDPanel variant="accent" padding="md" hover>
+ *   <div>Panel content</div>
+ * </StyledHUDPanel>
+ * ```
+ */
+export declare const StyledHUDPanel: React.FC<StyledHUDPanelProps>;
+export default StyledHUDPanel;
+//# sourceMappingURL=StyledHUDPanel.d.ts.map

package/lib/components/shared/ui/StyledHUDPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledHUDPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/ui/StyledHUDPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAKL,KAAK,YAAY,EAClB,MAAM,uCAAuC,CAAC;AAE/C;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,oBAAoB;IACpB,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,kCAAkC;IAClC,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACxC,sCAAsC;IACtC,QAAQ,CAAC,OAAO,CAAC,EAAE,YAAY,CAAC;IAChC,8CAA8C;IAC9C,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,2BAA2B;IAC3B,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,0BAA0B;IAC1B,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACzB,+BAA+B;IAC/B,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,oBAAoB;IACpB,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,8BAA8B;IAC9B,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC;CAClD;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAoDxD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/shared/ui/VitalPointOverlayControlsPure.d.ts

@@ -0,0 +1,79 @@
+/**
+ * VitalPointOverlayControlsPure - Pure DOM controls for vital point visualization
+ *
+ * Pure DOM version (no Three.js Html wrapper) for use in HUD overlays.
+ * Identical functionality to VitalPointOverlayControlsHtml but renders as pure React DOM.
+ *
+ * Provides comprehensive controls for the 70-point vital point overlay system:
+ * - Toggle overlay visibility
+ * - Filter by severity level
+ * - Filter by body region
+ * - Search vital points
+ * - Adjust marker scale
+ * - Toggle labels
+ * - Toggle animations
+ *
+ * @module components/shared/ui/VitalPointOverlayControlsPure
+ */
+import React from "react";
+import { VitalPointSeverity } from "../../../types/common";
+import type { BodyRegionFilter } from "../three/effects/VitalPointMarkers3D";
+export type { BodyRegionFilter } from "../three/effects/VitalPointMarkers3D";
+/**
+ * Props for VitalPointOverlayControlsPure component
+ */
+export interface VitalPointOverlayControlsPureProps {
+    /** Whether overlay is currently visible */
+    readonly visible: boolean;
+    /** Callback when visibility changes */
+    readonly onVisibleChange: (visible: boolean) => void;
+    /** Current severity filters */
+    readonly severityFilters: VitalPointSeverity[];
+    /** Callback when severity filters change */
+    readonly onSeverityFiltersChange: (filters: VitalPointSeverity[]) => void;
+    /** Current region filter */
+    readonly regionFilter: BodyRegionFilter;
+    /** Callback when region filter changes */
+    readonly onRegionFilterChange: (filter: BodyRegionFilter) => void;
+    /** Current search query */
+    readonly searchQuery?: string;
+    /** Callback when search query changes */
+    readonly onSearchQueryChange?: (query: string) => void;
+    /** Whether labels are shown */
+    readonly showLabels: boolean;
+    /** Callback when label visibility changes */
+    readonly onShowLabelsChange: (show: boolean) => void;
+    /** Whether animations are enabled */
+    readonly animated: boolean;
+    /** Callback when animation state changes */
+    readonly onAnimatedChange: (animated: boolean) => void;
+    /** Marker scale multiplier */
+    readonly scale: number;
+    /** Callback when scale changes */
+    readonly onScaleChange: (scale: number) => void;
+    /** Whether on mobile device */
+    readonly isMobile?: boolean;
+    /**
+     * Screen position for the control panel.
+     *
+     * All values must be valid CSS position values, such as `"20px"`, `"10%"`, `"1rem"`, or `"auto"`.
+     * These are applied directly to the `style` of the container.
+     */
+    readonly screenPosition?: {
+        /** CSS `top` position (e.g., "20px", "10%", "1rem", "auto") */
+        top?: string;
+        /** CSS `left` position (e.g., "20px", "10%", "1rem", "auto") */
+        left?: string;
+        /** CSS `right` position (e.g., "20px", "10%", "1rem", "auto") */
+        right?: string;
+        /** CSS `bottom` position (e.g., "20px", "10%", "1rem", "auto") */
+        bottom?: string;
+    };
+}
+/**
+ * VitalPointOverlayControlsPure Component
+ * Pure DOM version - renders directly without Three.js Html wrapper
+ */
+export declare const VitalPointOverlayControlsPure: React.FC<VitalPointOverlayControlsPureProps>;
+export default VitalPointOverlayControlsPure;
+//# sourceMappingURL=VitalPointOverlayControlsPure.d.ts.map

package/lib/components/shared/ui/VitalPointOverlayControlsPure.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VitalPointOverlayControlsPure.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/ui/VitalPointOverlayControlsPure.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAyC,MAAM,OAAO,CAAC;AAK9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAG3D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAE7E,YAAY,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAE7E;;GAEG;AACH,MAAM,WAAW,kCAAkC;IACjD,2CAA2C;IAC3C,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,uCAAuC;IACvC,QAAQ,CAAC,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrD,+BAA+B;IAC/B,QAAQ,CAAC,eAAe,EAAE,kBAAkB,EAAE,CAAC;IAC/C,4CAA4C;IAC5C,QAAQ,CAAC,uBAAuB,EAAE,CAAC,OAAO,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;IAC1E,4BAA4B;IAC5B,QAAQ,CAAC,YAAY,EAAE,gBAAgB,CAAC;IACxC,0CAA0C;IAC1C,QAAQ,CAAC,oBAAoB,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClE,2BAA2B;IAC3B,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,yCAAyC;IACzC,QAAQ,CAAC,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvD,+BAA+B;IAC/B,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAC7B,6CAA6C;IAC7C,QAAQ,CAAC,kBAAkB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACrD,qCAAqC;IACrC,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,4CAA4C;IAC5C,QAAQ,CAAC,gBAAgB,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACvD,8BAA8B;IAC9B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,kCAAkC;IAClC,QAAQ,CAAC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,+BAA+B;IAC/B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;;OAKG;IACH,QAAQ,CAAC,cAAc,CAAC,EAAE;QACxB,+DAA+D;QAC/D,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,gEAAgE;QAChE,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,iEAAiE;QACjE,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,kEAAkE;QAClE,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;CACH;AA6BD;;;GAGG;AACH,eAAO,MAAM,6BAA6B,EAAE,KAAK,CAAC,EAAE,CAClD,kCAAkC,CA6oBnC,CAAC;AAEF,eAAe,6BAA6B,CAAC"}