blacktrigram 0.7.2

package/lib/components/shared/three/ui/ComboCounter.js

@@ -0,0 +1,222 @@
+import { KOREAN_COLORS } from "../../../../types/constants/colors.js";
+import { FONT_FAMILY } from "../../../../types/constants/typography.js";
+import "../../../../types/constants/index.js";
+import { hexColorToCSS, hexToRgbaString } from "../../../../utils/colorUtils.js";
+/* empty css              */
+import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Html } from "@react-three/drei";
+//#region src/components/shared/three/ui/ComboCounter.tsx
+/**
+* ComboCounter - Combo counter display component
+*
+* Displays the current combo count with Korean-English bilingual text.
+* Animates on combo increment and shows milestone indicators.
+*
+* Uses Html overlay from @react-three/drei for rendering within 3D scenes.
+*
+* @module components/shared/three/ui/ComboCounter
+* @category Shared UI
+* @korean 콤보카운터
+*/
+/**
+* Get combo tier color based on combo count
+*/
+function getComboColor(combo) {
+	if (combo >= 10) return hexColorToCSS(KOREAN_COLORS.SECONDARY_MAGENTA);
+	if (combo >= 7) return hexColorToCSS(KOREAN_COLORS.ACCENT_RED);
+	if (combo >= 5) return hexColorToCSS(KOREAN_COLORS.ACCENT_GOLD);
+	if (combo >= 3) return hexColorToCSS(KOREAN_COLORS.PRIMARY_CYAN);
+	return hexColorToCSS(KOREAN_COLORS.TEXT_PRIMARY);
+}
+/**
+* Get glow color based on combo tier
+*/
+function getGlowColor(combo) {
+	if (combo >= 10) return hexToRgbaString(KOREAN_COLORS.SECONDARY_MAGENTA, .8);
+	if (combo >= 7) return hexToRgbaString(KOREAN_COLORS.ACCENT_RED, .8);
+	if (combo >= 5) return hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, .8);
+	if (combo >= 3) return hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, .6);
+	return hexToRgbaString(KOREAN_COLORS.TEXT_PRIMARY, .4);
+}
+/**
+* Get combo milestone text
+*/
+function getComboMilestone(combo) {
+	if (combo === 5) return {
+		korean: "훌륭합니다!",
+		english: "Great!"
+	};
+	if (combo === 10) return {
+		korean: "놀라운 연속 공격!",
+		english: "Amazing!"
+	};
+	if (combo === 15) return {
+		korean: "전설적인 공격!",
+		english: "Legendary!"
+	};
+	if (combo === 20) return {
+		korean: "신의 일격!",
+		english: "GODLIKE!"
+	};
+	return null;
+}
+/**
+* ComboCounter Component
+*
+* Displays the current combo count with animations and milestone indicators.
+* Only visible when combo >= minDisplayCombo (default: 2).
+*
+* @example
+* ```tsx
+* <ComboCounter
+*   combo={5}
+*   isMobile={isMobile}
+* />
+* ```
+*/
+var ComboCounter = ({ combo, isMobile = false, minDisplayCombo = 2 }) => {
+	const [scale, setScale] = useState(1);
+	const [showMilestone, setShowMilestone] = useState(false);
+	const [prevCombo, setPrevCombo] = useState(combo);
+	const milestoneTimeoutRef = useRef(null);
+	const scaleTimeoutRef = useRef(null);
+	const position3D = useMemo(() => {
+		return [
+			0,
+			4.5,
+			0
+		];
+	}, []);
+	useEffect(() => {
+		if (combo > prevCombo) {
+			setTimeout(() => setScale(1.3), 0);
+			if (scaleTimeoutRef.current) clearTimeout(scaleTimeoutRef.current);
+			scaleTimeoutRef.current = setTimeout(() => {
+				setScale(1);
+			}, 150);
+			if (getComboMilestone(combo)) {
+				setTimeout(() => setShowMilestone(true), 0);
+				if (milestoneTimeoutRef.current) clearTimeout(milestoneTimeoutRef.current);
+				milestoneTimeoutRef.current = setTimeout(() => {
+					setShowMilestone(false);
+				}, 1500);
+			}
+		}
+		setTimeout(() => setPrevCombo(combo), 0);
+	}, [combo, prevCombo]);
+	useEffect(() => {
+		return () => {
+			if (milestoneTimeoutRef.current) clearTimeout(milestoneTimeoutRef.current);
+			if (scaleTimeoutRef.current) clearTimeout(scaleTimeoutRef.current);
+		};
+	}, []);
+	if (combo < minDisplayCombo) return null;
+	const milestone = getComboMilestone(combo);
+	const comboColor = getComboColor(combo);
+	const glowColor = getGlowColor(combo);
+	const getMilestoneBackground = (comboVal) => {
+		if (comboVal >= 10) return hexToRgbaString(KOREAN_COLORS.SECONDARY_MAGENTA, .3);
+		if (comboVal >= 7) return hexToRgbaString(KOREAN_COLORS.ACCENT_RED, .3);
+		if (comboVal >= 5) return hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, .3);
+		if (comboVal >= 3) return hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, .3);
+		return hexToRgbaString(KOREAN_COLORS.TEXT_PRIMARY, .3);
+	};
+	const mainFontSize = isMobile ? 32 : 48;
+	const subFontSize = isMobile ? 16 : 20;
+	const milestoneFontSize = isMobile ? 20 : 28;
+	return /* @__PURE__ */ jsxs(Html, {
+		position: position3D,
+		center: true,
+		distanceFactor: 10,
+		style: { pointerEvents: "none" },
+		children: [/* @__PURE__ */ jsxs("div", {
+			"data-testid": "combo-counter",
+			className: "hud-animated",
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				alignItems: "center",
+				transform: `scale(${scale})`,
+				transition: "transform 0.15s ease-out",
+				animation: combo >= 5 ? "comboFlash 0.8s ease-in-out infinite" : "none"
+			},
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					style: {
+						fontSize: `${mainFontSize}px`,
+						fontWeight: "bold",
+						fontFamily: FONT_FAMILY.KOREAN,
+						color: comboColor,
+						textShadow: `
+              0 0 15px ${glowColor},
+              0 0 30px ${glowColor},
+              3px 3px 6px rgba(0, 0, 0, 0.9)
+            `,
+						lineHeight: 1
+					},
+					children: combo
+				}),
+				/* @__PURE__ */ jsx("div", {
+					style: {
+						fontSize: `${subFontSize}px`,
+						fontWeight: "bold",
+						fontFamily: FONT_FAMILY.KOREAN,
+						color: comboColor,
+						textShadow: `0 0 10px ${glowColor}, 2px 2px 4px rgba(0, 0, 0, 0.8)`,
+						marginTop: "4px"
+					},
+					children: "연속 타격!"
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					style: {
+						fontSize: `${subFontSize - 4}px`,
+						fontWeight: "bold",
+						fontFamily: FONT_FAMILY.KOREAN,
+						color: hexColorToCSS(KOREAN_COLORS.TEXT_SECONDARY),
+						textShadow: "2px 2px 4px rgba(0, 0, 0, 0.8)"
+					},
+					children: [combo, " HIT COMBO!"]
+				}),
+				showMilestone && milestone && /* @__PURE__ */ jsxs("div", {
+					className: "hud-animated",
+					style: {
+						marginTop: "8px",
+						padding: "4px 16px",
+						background: getMilestoneBackground(combo),
+						borderRadius: "4px",
+						border: `2px solid ${comboColor}`,
+						animation: "comboFlash 1s ease-in-out infinite"
+					},
+					children: [/* @__PURE__ */ jsx("div", {
+						style: {
+							fontSize: `${milestoneFontSize}px`,
+							fontWeight: "bold",
+							fontFamily: FONT_FAMILY.KOREAN,
+							color: comboColor,
+							textShadow: `0 0 10px ${glowColor}`
+						},
+						children: milestone.korean
+					}), /* @__PURE__ */ jsx("div", {
+						style: {
+							fontSize: `${milestoneFontSize - 6}px`,
+							fontWeight: "bold",
+							fontFamily: FONT_FAMILY.KOREAN,
+							color: hexColorToCSS(KOREAN_COLORS.TEXT_SECONDARY)
+						},
+						children: milestone.english
+					})]
+				})
+			]
+		}), /* @__PURE__ */ jsx("style", { children: `
+        @keyframes pulse {
+          0%, 100% { transform: scale(1); }
+          50% { transform: scale(1.05); }
+        }
+      ` })]
+	});
+};
+//#endregion
+export { ComboCounter as default };
+
+//# sourceMappingURL=ComboCounter.js.map

package/lib/components/shared/three/ui/ComboCounter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboCounter.js","names":[],"sources":["../../../../../src/components/shared/three/ui/ComboCounter.tsx"],"sourcesContent":["/**\n * ComboCounter - Combo counter display component\n *\n * Displays the current combo count with Korean-English bilingual text.\n * Animates on combo increment and shows milestone indicators.\n *\n * Uses Html overlay from @react-three/drei for rendering within 3D scenes.\n *\n * @module components/shared/three/ui/ComboCounter\n * @category Shared UI\n * @korean 콤보카운터\n */\n\nimport { Html } from \"@react-three/drei\";\nimport React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport { FONT_FAMILY, KOREAN_COLORS } from \"../../../../types/constants\";\nimport { hexColorToCSS, hexToRgbaString } from \"../../../../utils/colorUtils\";\nimport \"./HUDAnimations.css\";\n\n/**\n * Props for the ComboCounter component\n */\nexport interface ComboCounterProps {\n  /** Current combo count */\n  readonly combo: number;\n  /** Whether to use mobile-optimized sizing */\n  readonly isMobile?: boolean;\n  /** Minimum combo to display (default: 2) */\n  readonly minDisplayCombo?: number;\n}\n\n/**\n * Get combo tier color based on combo count\n */\nfunction getComboColor(combo: number): string {\n  if (combo >= 10) {\n    // Rainbow effect for high combos - use magenta\n    return hexColorToCSS(KOREAN_COLORS.SECONDARY_MAGENTA);\n  }\n  if (combo >= 7) {\n    // Critical tier - red\n    return hexColorToCSS(KOREAN_COLORS.ACCENT_RED);\n  }\n  if (combo >= 5) {\n    // High tier - gold\n    return hexColorToCSS(KOREAN_COLORS.ACCENT_GOLD);\n  }\n  if (combo >= 3) {\n    // Medium tier - cyan\n    return hexColorToCSS(KOREAN_COLORS.PRIMARY_CYAN);\n  }\n  // Low tier - white\n  return hexColorToCSS(KOREAN_COLORS.TEXT_PRIMARY);\n}\n\n/**\n * Get glow color based on combo tier\n */\nfunction getGlowColor(combo: number): string {\n  if (combo >= 10) {\n    return hexToRgbaString(KOREAN_COLORS.SECONDARY_MAGENTA, 0.8);\n  }\n  if (combo >= 7) {\n    return hexToRgbaString(KOREAN_COLORS.ACCENT_RED, 0.8);\n  }\n  if (combo >= 5) {\n    return hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 0.8);\n  }\n  if (combo >= 3) {\n    return hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.6);\n  }\n  return hexToRgbaString(KOREAN_COLORS.TEXT_PRIMARY, 0.4);\n}\n\n/**\n * Get combo milestone text\n */\nfunction getComboMilestone(\n  combo: number\n): { korean: string; english: string } | null {\n  if (combo === 5) {\n    return { korean: \"훌륭합니다!\", english: \"Great!\" };\n  }\n  if (combo === 10) {\n    return { korean: \"놀라운 연속 공격!\", english: \"Amazing!\" };\n  }\n  if (combo === 15) {\n    return { korean: \"전설적인 공격!\", english: \"Legendary!\" };\n  }\n  if (combo === 20) {\n    return { korean: \"신의 일격!\", english: \"GODLIKE!\" };\n  }\n  return null;\n}\n\n/**\n * ComboCounter Component\n *\n * Displays the current combo count with animations and milestone indicators.\n * Only visible when combo >= minDisplayCombo (default: 2).\n *\n * @example\n * ```tsx\n * <ComboCounter\n *   combo={5}\n *   isMobile={isMobile}\n * />\n * ```\n */\nexport const ComboCounter: React.FC<ComboCounterProps> = ({\n  combo,\n  isMobile = false,\n  minDisplayCombo = 2,\n}) => {\n  // Animation state - all values that affect render must be in state\n  const [scale, setScale] = useState(1);\n  const [showMilestone, setShowMilestone] = useState(false);\n  const [prevCombo, setPrevCombo] = useState(combo);\n  const milestoneTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(\n    null\n  );\n  const scaleTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  // Calculate 3D position - center top of screen\n  const position3D: [number, number, number] = useMemo(() => {\n    // Position at top center of scene\n    return [0, 4.5, 0];\n  }, []);\n\n  // Handle combo changes via useEffect - this is the proper React pattern\n  useEffect(() => {\n    if (combo > prevCombo) {\n      // Scale up on combo increment - defer to avoid cascading renders\n      setTimeout(() => setScale(1.3), 0);\n\n      // Clear previous scale timeout\n      if (scaleTimeoutRef.current) {\n        clearTimeout(scaleTimeoutRef.current);\n      }\n      scaleTimeoutRef.current = setTimeout(() => {\n        setScale(1);\n      }, 150);\n\n      // Check for milestone\n      const milestone = getComboMilestone(combo);\n      if (milestone) {\n        setTimeout(() => setShowMilestone(true), 0);\n        if (milestoneTimeoutRef.current) {\n          clearTimeout(milestoneTimeoutRef.current);\n        }\n        milestoneTimeoutRef.current = setTimeout(() => {\n          setShowMilestone(false);\n        }, 1500);\n      }\n    }\n    // Defer prevCombo update to avoid cascading renders\n    setTimeout(() => setPrevCombo(combo), 0);\n  }, [combo, prevCombo]);\n\n  // Cleanup\n  useEffect(() => {\n    return () => {\n      if (milestoneTimeoutRef.current) {\n        clearTimeout(milestoneTimeoutRef.current);\n      }\n      if (scaleTimeoutRef.current) {\n        clearTimeout(scaleTimeoutRef.current);\n      }\n    };\n  }, []);\n\n  // Don't render if combo is below minimum\n  if (combo < minDisplayCombo) {\n    return null;\n  }\n\n  const milestone = getComboMilestone(combo);\n  const comboColor = getComboColor(combo);\n  const glowColor = getGlowColor(combo);\n  // Get background color with alpha for milestone box\n  const getMilestoneBackground = (comboVal: number): string => {\n    if (comboVal >= 10) {\n      return hexToRgbaString(KOREAN_COLORS.SECONDARY_MAGENTA, 0.3);\n    }\n    if (comboVal >= 7) {\n      return hexToRgbaString(KOREAN_COLORS.ACCENT_RED, 0.3);\n    }\n    if (comboVal >= 5) {\n      return hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 0.3);\n    }\n    if (comboVal >= 3) {\n      return hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.3);\n    }\n    return hexToRgbaString(KOREAN_COLORS.TEXT_PRIMARY, 0.3);\n  };\n\n  // Font sizes\n  const mainFontSize = isMobile ? 32 : 48;\n  const subFontSize = isMobile ? 16 : 20;\n  const milestoneFontSize = isMobile ? 20 : 28;\n\n  return (\n    <Html\n      position={position3D}\n      center\n      distanceFactor={10}\n      style={{ pointerEvents: \"none\" }}\n    >\n      <div\n        data-testid=\"combo-counter\"\n        className=\"hud-animated\"\n        style={{\n          display: \"flex\",\n          flexDirection: \"column\",\n          alignItems: \"center\",\n          transform: `scale(${scale})`,\n          transition: \"transform 0.15s ease-out\",\n          animation: combo >= 5 ? \"comboFlash 0.8s ease-in-out infinite\" : \"none\",\n        }}\n      >\n        {/* Main combo number */}\n        <div\n          style={{\n            fontSize: `${mainFontSize}px`,\n            fontWeight: \"bold\",\n            fontFamily: FONT_FAMILY.KOREAN,\n            color: comboColor,\n            textShadow: `\n              0 0 15px ${glowColor},\n              0 0 30px ${glowColor},\n              3px 3px 6px rgba(0, 0, 0, 0.9)\n            `,\n            lineHeight: 1,\n          }}\n        >\n          {combo}\n        </div>\n\n        {/* Korean text */}\n        <div\n          style={{\n            fontSize: `${subFontSize}px`,\n            fontWeight: \"bold\",\n            fontFamily: FONT_FAMILY.KOREAN,\n            color: comboColor,\n            textShadow: `0 0 10px ${glowColor}, 2px 2px 4px rgba(0, 0, 0, 0.8)`,\n            marginTop: \"4px\",\n          }}\n        >\n          연속 타격!\n        </div>\n\n        {/* English text */}\n        <div\n          style={{\n            fontSize: `${subFontSize - 4}px`,\n            fontWeight: \"bold\",\n            fontFamily: FONT_FAMILY.KOREAN,\n            color: hexColorToCSS(KOREAN_COLORS.TEXT_SECONDARY),\n            textShadow: \"2px 2px 4px rgba(0, 0, 0, 0.8)\",\n          }}\n        >\n          {combo} HIT COMBO!\n        </div>\n\n        {/* Milestone indicator */}\n        {showMilestone && milestone && (\n          <div\n            className=\"hud-animated\"\n            style={{\n              marginTop: \"8px\",\n              padding: \"4px 16px\",\n              background: getMilestoneBackground(combo),\n              borderRadius: \"4px\",\n              border: `2px solid ${comboColor}`,\n              animation: \"comboFlash 1s ease-in-out infinite\",\n            }}\n          >\n            <div\n              style={{\n                fontSize: `${milestoneFontSize}px`,\n                fontWeight: \"bold\",\n                fontFamily: FONT_FAMILY.KOREAN,\n                color: comboColor,\n                textShadow: `0 0 10px ${glowColor}`,\n              }}\n            >\n              {milestone.korean}\n            </div>\n            <div\n              style={{\n                fontSize: `${milestoneFontSize - 6}px`,\n                fontWeight: \"bold\",\n                fontFamily: FONT_FAMILY.KOREAN,\n                color: hexColorToCSS(KOREAN_COLORS.TEXT_SECONDARY),\n              }}\n            >\n              {milestone.english}\n            </div>\n          </div>\n        )}\n      </div>\n\n      {/* CSS Animation - kept for backwards compatibility */}\n      <style>{`\n        @keyframes pulse {\n          0%, 100% { transform: scale(1); }\n          50% { transform: scale(1.05); }\n        }\n      `}</style>\n    </Html>\n  );\n};\n\nexport default ComboCounter;\n"],"mappings":"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"}

package/lib/components/shared/three/ui/HealthBar.d.ts

@@ -0,0 +1,37 @@
+/**
+ * HealthBar Component - Segmented health display with Korean theming
+ *
+ * Displays player health with:
+ * - 10 segmented bars
+ * - Color transitions: Green (>50%), Yellow (25-50%), Red (<25%)
+ * - Pulse animation when health <20%
+ * - Korean/English bilingual labels
+ * - Numeric value display (e.g., "85/100")
+ * - Responsive sizing for mobile/tablet/desktop
+ * - Smooth transitions and glow effects
+ *
+ * Performance: Uses React.memo with shallow comparison for 60fps optimization.
+ * Note: React.memo uses shallow comparison by default, which works correctly
+ * for this component since all props are primitives (number, string, boolean).
+ * If object or function props are added in the future, consider adding a
+ * custom comparison function or using useCallback/useMemo for prop stability.
+ */
+import React from "react";
+import "./HUDAnimations.css";
+export interface HealthBarProps {
+    /** Current health value */
+    readonly current: number;
+    /** Maximum health capacity */
+    readonly max: number;
+    /** Player identifier for test ID */
+    readonly playerId: string;
+    /** Whether to use mobile-optimized sizing */
+    readonly isMobile: boolean;
+}
+/**
+ * HealthBar - Segmented health display with Korean theming
+ * Performance optimized with React.memo
+ */
+export declare const HealthBar: React.FC<HealthBarProps>;
+export default HealthBar;
+//# sourceMappingURL=HealthBar.d.ts.map

package/lib/components/shared/three/ui/HealthBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HealthBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/three/ui/HealthBar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,OAAO,qBAAqB,CAAC;AAE7B,MAAM,WAAW,cAAc;IAC7B,2BAA2B;IAC3B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,8BAA8B;IAC9B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,oCAAoC;IACpC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,6CAA6C;IAC7C,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;CAC5B;AAWD;;;GAGG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA+F7C,CAAC;AAIH,eAAe,SAAS,CAAC"}

package/lib/components/shared/three/ui/HealthBar.js

@@ -0,0 +1,112 @@
+import { KOREAN_COLORS } from "../../../../types/constants/colors.js";
+import { FONT_FAMILY } from "../../../../types/constants/typography.js";
+import "../../../../types/constants/index.js";
+import { hexToRgbaString } from "../../../../utils/colorUtils.js";
+/* empty css              */
+import React, { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/shared/three/ui/HealthBar.tsx
+/**
+* HealthBar Component - Segmented health display with Korean theming
+* 
+* Displays player health with:
+* - 10 segmented bars
+* - Color transitions: Green (>50%), Yellow (25-50%), Red (<25%)
+* - Pulse animation when health <20%
+* - Korean/English bilingual labels
+* - Numeric value display (e.g., "85/100")
+* - Responsive sizing for mobile/tablet/desktop
+* - Smooth transitions and glow effects
+* 
+* Performance: Uses React.memo with shallow comparison for 60fps optimization.
+* Note: React.memo uses shallow comparison by default, which works correctly
+* for this component since all props are primitives (number, string, boolean).
+* If object or function props are added in the future, consider adding a
+* custom comparison function or using useCallback/useMemo for prop stability.
+*/
+/**
+* Get health bar color based on health percentage
+*/
+var getHealthColor = (percentage) => {
+	if (percentage > 50) return KOREAN_COLORS.HEALTH_FULL;
+	if (percentage > 25) return KOREAN_COLORS.HEALTH_MEDIUM;
+	return KOREAN_COLORS.HEALTH_CRITICAL;
+};
+/**
+* HealthBar - Segmented health display with Korean theming
+* Performance optimized with React.memo
+*/
+var HealthBar = React.memo(({ current, max, playerId, isMobile }) => {
+	const healthPercent = useMemo(() => Math.max(0, Math.min(100, current / max * 100)), [current, max]);
+	const segments = 10;
+	const filledSegments = Math.ceil(healthPercent / 100 * segments);
+	const healthColor = getHealthColor(healthPercent);
+	const shouldPulse = healthPercent < 20;
+	const layout = useMemo(() => ({
+		barWidth: isMobile ? 180 : 250,
+		barHeight: isMobile ? 16 : 20,
+		fontSize: isMobile ? 11 : 13,
+		padding: isMobile ? "8px 12px" : "12px 16px"
+	}), [isMobile]);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": `health-bar-${playerId}`,
+		role: "progressbar",
+		"aria-label": "체력 | Health",
+		"aria-valuenow": Math.ceil(current),
+		"aria-valuemin": 0,
+		"aria-valuemax": max,
+		"aria-valuetext": `${Math.ceil(current)} out of ${max}`,
+		className: "hud-animated",
+		style: {
+			width: `${layout.barWidth}px`,
+			padding: layout.padding,
+			backgroundColor: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 1),
+			borderRadius: "8px",
+			border: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 1)}`,
+			boxShadow: `0 0 10px ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, .2)}`,
+			transition: "box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out"
+		},
+		children: [/* @__PURE__ */ jsxs("div", {
+			style: {
+				fontSize: `${layout.fontSize}px`,
+				color: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 1),
+				fontFamily: FONT_FAMILY.KOREAN,
+				marginBottom: "4px",
+				display: "flex",
+				justifyContent: "space-between",
+				fontWeight: "bold",
+				transition: "color 0.2s ease-in-out"
+			},
+			children: [/* @__PURE__ */ jsx("span", { children: "체력 | Health" }), /* @__PURE__ */ jsxs("span", {
+				"data-testid": `health-value-${playerId}`,
+				children: [
+					Math.ceil(current),
+					"/",
+					max
+				]
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			style: {
+				display: "flex",
+				gap: "3px",
+				height: `${layout.barHeight}px`,
+				animation: shouldPulse ? "healthPulse 0.8s ease-in-out infinite" : "none"
+			},
+			children: Array.from({ length: segments }).map((_, index) => /* @__PURE__ */ jsx("div", {
+				"data-testid": `health-segment-${playerId}-${index}`,
+				style: {
+					flex: 1,
+					backgroundColor: index < filledSegments ? hexToRgbaString(healthColor, 1) : hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, 1),
+					borderRadius: "2px",
+					transition: "background-color 0.2s ease-in-out",
+					boxShadow: index < filledSegments ? `0 0 8px ${hexToRgbaString(healthColor, .4)}` : "none"
+				}
+			}, index))
+		})]
+	});
+});
+HealthBar.displayName = "HealthBar";
+//#endregion
+export { HealthBar as default };
+
+//# sourceMappingURL=HealthBar.js.map

package/lib/components/shared/three/ui/HealthBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HealthBar.js","names":[],"sources":["../../../../../src/components/shared/three/ui/HealthBar.tsx"],"sourcesContent":["/**\n * HealthBar Component - Segmented health display with Korean theming\n * \n * Displays player health with:\n * - 10 segmented bars\n * - Color transitions: Green (>50%), Yellow (25-50%), Red (<25%)\n * - Pulse animation when health <20%\n * - Korean/English bilingual labels\n * - Numeric value display (e.g., \"85/100\")\n * - Responsive sizing for mobile/tablet/desktop\n * - Smooth transitions and glow effects\n * \n * Performance: Uses React.memo with shallow comparison for 60fps optimization.\n * Note: React.memo uses shallow comparison by default, which works correctly\n * for this component since all props are primitives (number, string, boolean).\n * If object or function props are added in the future, consider adding a\n * custom comparison function or using useCallback/useMemo for prop stability.\n */\n\nimport React, { useMemo } from \"react\";\nimport { KOREAN_COLORS, FONT_FAMILY } from \"../../../../types/constants\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\nimport \"./HUDAnimations.css\";\n\nexport interface HealthBarProps {\n  /** Current health value */\n  readonly current: number;\n  /** Maximum health capacity */\n  readonly max: number;\n  /** Player identifier for test ID */\n  readonly playerId: string;\n  /** Whether to use mobile-optimized sizing */\n  readonly isMobile: boolean;\n}\n\n/**\n * Get health bar color based on health percentage\n */\nconst getHealthColor = (percentage: number): number => {\n  if (percentage > 50) return KOREAN_COLORS.HEALTH_FULL; // Green\n  if (percentage > 25) return KOREAN_COLORS.HEALTH_MEDIUM; // Yellow\n  return KOREAN_COLORS.HEALTH_CRITICAL; // Red\n};\n\n/**\n * HealthBar - Segmented health display with Korean theming\n * Performance optimized with React.memo\n */\nexport const HealthBar: React.FC<HealthBarProps> = React.memo(({\n  current,\n  max,\n  playerId,\n  isMobile,\n}) => {\n  // Calculate health percentage and determine styling\n  const healthPercent = useMemo(\n    () => Math.max(0, Math.min(100, (current / max) * 100)),\n    [current, max]\n  );\n\n  const segments = 10;\n  const filledSegments = Math.ceil((healthPercent / 100) * segments);\n  const healthColor = getHealthColor(healthPercent);\n  const shouldPulse = healthPercent < 20;\n\n  // Responsive sizing with memoization\n  const layout = useMemo(() => ({\n    barWidth: isMobile ? 180 : 250,\n    barHeight: isMobile ? 16 : 20,\n    fontSize: isMobile ? 11 : 13,\n    padding: isMobile ? \"8px 12px\" : \"12px 16px\",\n  }), [isMobile]);\n\n  return (\n    <div\n      data-testid={`health-bar-${playerId}`}\n      role=\"progressbar\"\n      aria-label=\"체력 | Health\"\n      aria-valuenow={Math.ceil(current)}\n      aria-valuemin={0}\n      aria-valuemax={max}\n      aria-valuetext={`${Math.ceil(current)} out of ${max}`}\n      className=\"hud-animated\"\n      style={{\n        width: `${layout.barWidth}px`,\n        padding: layout.padding,\n        backgroundColor: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 1),\n        borderRadius: \"8px\",\n        border: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 1)}`,\n        boxShadow: `0 0 10px ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.2)}`,\n        transition: \"box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out\",\n      }}\n    >\n      {/* Label and numeric display */}\n      <div\n        style={{\n          fontSize: `${layout.fontSize}px`,\n          color: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 1),\n          fontFamily: FONT_FAMILY.KOREAN,\n          marginBottom: \"4px\",\n          display: \"flex\",\n          justifyContent: \"space-between\",\n          fontWeight: \"bold\",\n          transition: \"color 0.2s ease-in-out\",\n        }}\n      >\n        <span>체력 | Health</span>\n        <span data-testid={`health-value-${playerId}`}>\n          {Math.ceil(current)}/{max}\n        </span>\n      </div>\n\n      {/* Segmented health bar */}\n      <div\n        style={{\n          display: \"flex\",\n          gap: \"3px\",\n          height: `${layout.barHeight}px`,\n          animation: shouldPulse ? \"healthPulse 0.8s ease-in-out infinite\" : \"none\",\n        }}\n      >\n        {Array.from({ length: segments }).map((_, index) => (\n          <div\n            key={index}\n            data-testid={`health-segment-${playerId}-${index}`}\n            style={{\n              flex: 1,\n              backgroundColor:\n                index < filledSegments\n                  ? hexToRgbaString(healthColor, 1)\n                  : hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, 1),\n              borderRadius: \"2px\",\n              transition: \"background-color 0.2s ease-in-out\",\n              boxShadow:\n                index < filledSegments\n                  ? `0 0 8px ${hexToRgbaString(healthColor, 0.4)}`\n                  : \"none\",\n            }}\n          />\n        ))}\n      </div>\n    </div>\n  );\n});\n\nHealthBar.displayName = \"HealthBar\";\n\nexport default HealthBar;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA,IAAM,kBAAkB,eAA+B;AACrD,KAAI,aAAa,GAAI,QAAO,cAAc;AAC1C,KAAI,aAAa,GAAI,QAAO,cAAc;AAC1C,QAAO,cAAc;;;;;;AAOvB,IAAa,YAAsC,MAAM,MAAM,EAC7D,SACA,KACA,UACA,eACI;CAEJ,MAAM,gBAAgB,cACd,KAAK,IAAI,GAAG,KAAK,IAAI,KAAM,UAAU,MAAO,IAAI,CAAC,EACvD,CAAC,SAAS,IAAI,CACf;CAED,MAAM,WAAW;CACjB,MAAM,iBAAiB,KAAK,KAAM,gBAAgB,MAAO,SAAS;CAClE,MAAM,cAAc,eAAe,cAAc;CACjD,MAAM,cAAc,gBAAgB;CAGpC,MAAM,SAAS,eAAe;EAC5B,UAAU,WAAW,MAAM;EAC3B,WAAW,WAAW,KAAK;EAC3B,UAAU,WAAW,KAAK;EAC1B,SAAS,WAAW,aAAa;EAClC,GAAG,CAAC,SAAS,CAAC;AAEf,QACE,qBAAC,OAAD;EACE,eAAa,cAAc;EAC3B,MAAK;EACL,cAAW;EACX,iBAAe,KAAK,KAAK,QAAQ;EACjC,iBAAe;EACf,iBAAe;EACf,kBAAgB,GAAG,KAAK,KAAK,QAAQ,CAAC,UAAU;EAChD,WAAU;EACV,OAAO;GACL,OAAO,GAAG,OAAO,SAAS;GAC1B,SAAS,OAAO;GAChB,iBAAiB,gBAAgB,cAAc,oBAAoB,EAAE;GACrE,cAAc;GACd,QAAQ,aAAa,gBAAgB,cAAc,cAAc,EAAE;GACnE,WAAW,YAAY,gBAAgB,cAAc,cAAc,GAAI;GACvE,YAAY;GACb;YAjBH,CAoBE,qBAAC,OAAD;GACE,OAAO;IACL,UAAU,GAAG,OAAO,SAAS;IAC7B,OAAO,gBAAgB,cAAc,cAAc,EAAE;IACrD,YAAY,YAAY;IACxB,cAAc;IACd,SAAS;IACT,gBAAgB;IAChB,YAAY;IACZ,YAAY;IACb;aAVH,CAYE,oBAAC,QAAD,EAAA,UAAM,eAAkB,CAAA,EACxB,qBAAC,QAAD;IAAM,eAAa,gBAAgB;cAAnC;KACG,KAAK,KAAK,QAAQ;KAAC;KAAE;KACjB;MACH;MAGN,oBAAC,OAAD;GACE,OAAO;IACL,SAAS;IACT,KAAK;IACL,QAAQ,GAAG,OAAO,UAAU;IAC5B,WAAW,cAAc,0CAA0C;IACpE;aAEA,MAAM,KAAK,EAAE,QAAQ,UAAU,CAAC,CAAC,KAAK,GAAG,UACxC,oBAAC,OAAD;IAEE,eAAa,kBAAkB,SAAS,GAAG;IAC3C,OAAO;KACL,MAAM;KACN,iBACE,QAAQ,iBACJ,gBAAgB,aAAa,EAAE,GAC/B,gBAAgB,cAAc,sBAAsB,EAAE;KAC5D,cAAc;KACd,YAAY;KACZ,WACE,QAAQ,iBACJ,WAAW,gBAAgB,aAAa,GAAI,KAC5C;KACP;IACD,EAfK,MAeL,CACF;GACE,CAAA,CACF;;EAER;AAEF,UAAU,cAAc"}

package/lib/components/shared/three/ui/KoreanButton.d.ts

@@ -0,0 +1,37 @@
+/**
+ * KoreanButton - Three.js-compatible button component with Korean theming
+ *
+ * Provides bilingual button with cyberpunk Korean aesthetic
+ * Supports both HTML overlay and 3D mesh rendering
+ *
+ * Now refactored to use BaseButton for consistent styling
+ *
+ * @module components/three
+ */
+import React from "react";
+import { type BaseButtonProps } from "../../base";
+/**
+ * Props for KoreanButton component
+ * Extends BaseButtonProps for consistency
+ */
+export interface KoreanButtonProps extends Omit<BaseButtonProps, "isMobile"> {
+}
+/**
+ * KoreanButton Component
+ *
+ * A bilingual button component with Korean cyberpunk theming.
+ * Now uses BaseButton internally for consistent styling and reduced duplication.
+ *
+ * @example
+ * ```tsx
+ * <KoreanButton
+ *   korean="공격"
+ *   english="Attack"
+ *   onClick={() => console.log("Attack clicked")}
+ *   variant="primary"
+ *   size="md"
+ * />
+ * ```
+ */
+export declare const KoreanButton: React.FC<KoreanButtonProps>;
+//# sourceMappingURL=KoreanButton.d.ts.map

package/lib/components/shared/three/ui/KoreanButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KoreanButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/three/ui/KoreanButton.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAE9D;;;GAGG;AACH,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC;CAE3E;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAIpD,CAAC"}

package/lib/components/shared/three/ui/KoreanButton.js

@@ -0,0 +1,33 @@
+import { BaseButton } from "../../base/BaseButton.js";
+import "../../base/index.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/shared/three/ui/KoreanButton.tsx
+/**
+* KoreanButton Component
+* 
+* A bilingual button component with Korean cyberpunk theming.
+* Now uses BaseButton internally for consistent styling and reduced duplication.
+* 
+* @example
+* ```tsx
+* <KoreanButton
+*   korean="공격"
+*   english="Attack"
+*   onClick={() => console.log("Attack clicked")}
+*   variant="primary"
+*   size="md"
+* />
+* ```
+*/
+var KoreanButton = ({ testId, ...rest }) => {
+	return /* @__PURE__ */ jsx(BaseButton, {
+		testId: testId ?? "korean-button",
+		...rest
+	});
+};
+KoreanButton.displayName = "KoreanButton";
+//#endregion
+export { KoreanButton };
+
+//# sourceMappingURL=KoreanButton.js.map

package/lib/components/shared/three/ui/KoreanButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KoreanButton.js","names":[],"sources":["../../../../../src/components/shared/three/ui/KoreanButton.tsx"],"sourcesContent":["/**\n * KoreanButton - Three.js-compatible button component with Korean theming\n * \n * Provides bilingual button with cyberpunk Korean aesthetic\n * Supports both HTML overlay and 3D mesh rendering\n * \n * Now refactored to use BaseButton for consistent styling\n * \n * @module components/three\n */\n\nimport React from \"react\";\nimport { BaseButton, type BaseButtonProps } from \"../../base\";\n\n/**\n * Props for KoreanButton component\n * Extends BaseButtonProps for consistency\n */\nexport interface KoreanButtonProps extends Omit<BaseButtonProps, \"isMobile\"> {\n  // All props inherited from BaseButton\n}\n\n/**\n * KoreanButton Component\n * \n * A bilingual button component with Korean cyberpunk theming.\n * Now uses BaseButton internally for consistent styling and reduced duplication.\n * \n * @example\n * ```tsx\n * <KoreanButton\n *   korean=\"공격\"\n *   english=\"Attack\"\n *   onClick={() => console.log(\"Attack clicked\")}\n *   variant=\"primary\"\n *   size=\"md\"\n * />\n * ```\n */\nexport const KoreanButton: React.FC<KoreanButtonProps> = ({ testId, ...rest }) => {\n  // Simply delegate to BaseButton - all logic is now centralized\n  // Default testId to \"korean-button\" for backward compatibility\n  return <BaseButton testId={testId ?? \"korean-button\"} {...rest} />;\n};\n\nKoreanButton.displayName = \"KoreanButton\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAuCA,IAAa,gBAA6C,EAAE,QAAQ,GAAG,WAAW;AAGhF,QAAO,oBAAC,YAAD;EAAY,QAAQ,UAAU;EAAiB,GAAI;EAAQ,CAAA;;AAGpE,aAAa,cAAc"}

package/lib/components/shared/three/ui/KoreanPanel.d.ts

@@ -0,0 +1,32 @@
+/**
+ * KoreanPanel - Three.js-compatible panel container component
+ *
+ * Provides a styled container with Korean cyberpunk theming
+ *
+ * Now refactored to use BasePanel for consistent styling
+ *
+ * @module components/three
+ */
+import React from "react";
+import { type BasePanelProps } from "../../base";
+/**
+ * Props for KoreanPanel component
+ * Extends BasePanelProps for consistency
+ */
+export interface KoreanPanelProps extends Omit<BasePanelProps, "isMobile"> {
+}
+/**
+ * KoreanPanel Component
+ *
+ * A container component with Korean cyberpunk styling.
+ * Now uses BasePanel internally for consistent styling and reduced duplication.
+ *
+ * @example
+ * ```tsx
+ * <KoreanPanel variant="bordered" padding={20}>
+ *   <h1>Panel Content</h1>
+ * </KoreanPanel>
+ * ```
+ */
+export declare const KoreanPanel: React.FC<KoreanPanelProps>;
+//# sourceMappingURL=KoreanPanel.d.ts.map

package/lib/components/shared/three/ui/KoreanPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KoreanPanel.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/three/ui/KoreanPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,YAAY,CAAC;AAE5D;;;GAGG;AACH,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC;CAEzE;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAIlD,CAAC"}

package/lib/components/shared/three/ui/KoreanPanel.js

@@ -0,0 +1,29 @@
+import { BasePanel } from "../../base/BasePanel.js";
+import "../../base/index.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/shared/three/ui/KoreanPanel.tsx
+/**
+* KoreanPanel Component
+* 
+* A container component with Korean cyberpunk styling.
+* Now uses BasePanel internally for consistent styling and reduced duplication.
+* 
+* @example
+* ```tsx
+* <KoreanPanel variant="bordered" padding={20}>
+*   <h1>Panel Content</h1>
+* </KoreanPanel>
+* ```
+*/
+var KoreanPanel = ({ testId, ...rest }) => {
+	return /* @__PURE__ */ jsx(BasePanel, {
+		testId: testId ?? "korean-panel",
+		...rest
+	});
+};
+KoreanPanel.displayName = "KoreanPanel";
+//#endregion
+export { KoreanPanel };
+
+//# sourceMappingURL=KoreanPanel.js.map

package/lib/components/shared/three/ui/KoreanPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KoreanPanel.js","names":[],"sources":["../../../../../src/components/shared/three/ui/KoreanPanel.tsx"],"sourcesContent":["/**\n * KoreanPanel - Three.js-compatible panel container component\n * \n * Provides a styled container with Korean cyberpunk theming\n * \n * Now refactored to use BasePanel for consistent styling\n * \n * @module components/three\n */\n\nimport React from \"react\";\nimport { BasePanel, type BasePanelProps } from \"../../base\";\n\n/**\n * Props for KoreanPanel component\n * Extends BasePanelProps for consistency\n */\nexport interface KoreanPanelProps extends Omit<BasePanelProps, \"isMobile\"> {\n  // All props inherited from BasePanel\n}\n\n/**\n * KoreanPanel Component\n * \n * A container component with Korean cyberpunk styling.\n * Now uses BasePanel internally for consistent styling and reduced duplication.\n * \n * @example\n * ```tsx\n * <KoreanPanel variant=\"bordered\" padding={20}>\n *   <h1>Panel Content</h1>\n * </KoreanPanel>\n * ```\n */\nexport const KoreanPanel: React.FC<KoreanPanelProps> = ({ testId, ...rest }) => {\n  // Simply delegate to BasePanel - all logic is now centralized\n  // Default testId to \"korean-panel\" for backward compatibility\n  return <BasePanel testId={testId ?? \"korean-panel\"} {...rest} />;\n};\n\nKoreanPanel.displayName = \"KoreanPanel\";\n"],"mappings":";;;;;;;;;;;;;;;;;;AAkCA,IAAa,eAA2C,EAAE,QAAQ,GAAG,WAAW;AAG9E,QAAO,oBAAC,WAAD;EAAW,QAAQ,UAAU;EAAgB,GAAI;EAAQ,CAAA;;AAGlE,YAAY,cAAc"}

package/lib/components/shared/three/ui/KoreanText.d.ts

@@ -0,0 +1,35 @@
+/**
+ * KoreanText - Three.js-compatible text component with bilingual support
+ *
+ * Displays Korean and English text with cyberpunk styling
+ *
+ * Now refactored to use BaseText for consistent styling
+ *
+ * @module components/three
+ */
+import React from "react";
+import { type BaseTextProps } from "../../base";
+/**
+ * Props for KoreanText component
+ * Extends BaseTextProps for consistency
+ */
+export interface KoreanTextProps extends Omit<BaseTextProps, "isMobile"> {
+}
+/**
+ * KoreanText Component
+ *
+ * A bilingual text component with Korean cyberpunk styling.
+ * Now uses BaseText internally for consistent styling and reduced duplication.
+ *
+ * @example
+ * ```tsx
+ * <KoreanText
+ *   korean="공격"
+ *   english="Attack"
+ *   size="large"
+ *   layout="vertical"
+ * />
+ * ```
+ */
+export declare const KoreanText: React.FC<KoreanTextProps>;
+//# sourceMappingURL=KoreanText.d.ts.map

package/lib/components/shared/three/ui/KoreanText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KoreanText.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/three/ui/KoreanText.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAE1D;;;GAGG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC;CAEvE;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAIhD,CAAC"}

package/lib/components/shared/three/ui/KoreanText.js

@@ -0,0 +1,32 @@
+import { BaseText } from "../../base/BaseText.js";
+import "../../base/index.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/shared/three/ui/KoreanText.tsx
+/**
+* KoreanText Component
+* 
+* A bilingual text component with Korean cyberpunk styling.
+* Now uses BaseText internally for consistent styling and reduced duplication.
+* 
+* @example
+* ```tsx
+* <KoreanText
+*   korean="공격"
+*   english="Attack"
+*   size="large"
+*   layout="vertical"
+* />
+* ```
+*/
+var KoreanText = ({ testId, ...rest }) => {
+	return /* @__PURE__ */ jsx(BaseText, {
+		testId: testId ?? "korean-text",
+		...rest
+	});
+};
+KoreanText.displayName = "KoreanText";
+//#endregion
+export { KoreanText };
+
+//# sourceMappingURL=KoreanText.js.map

package/lib/components/shared/three/ui/KoreanText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KoreanText.js","names":[],"sources":["../../../../../src/components/shared/three/ui/KoreanText.tsx"],"sourcesContent":["/**\n * KoreanText - Three.js-compatible text component with bilingual support\n * \n * Displays Korean and English text with cyberpunk styling\n * \n * Now refactored to use BaseText for consistent styling\n * \n * @module components/three\n */\n\nimport React from \"react\";\nimport { BaseText, type BaseTextProps } from \"../../base\";\n\n/**\n * Props for KoreanText component\n * Extends BaseTextProps for consistency\n */\nexport interface KoreanTextProps extends Omit<BaseTextProps, \"isMobile\"> {\n  // All props inherited from BaseText\n}\n\n/**\n * KoreanText Component\n * \n * A bilingual text component with Korean cyberpunk styling.\n * Now uses BaseText internally for consistent styling and reduced duplication.\n * \n * @example\n * ```tsx\n * <KoreanText\n *   korean=\"공격\"\n *   english=\"Attack\"\n *   size=\"large\"\n *   layout=\"vertical\"\n * />\n * ```\n */\nexport const KoreanText: React.FC<KoreanTextProps> = ({ testId, ...rest }) => {\n  // Simply delegate to BaseText - all logic is now centralized\n  // Default testId to \"korean-text\" for backward compatibility\n  return <BaseText testId={testId ?? \"korean-text\"} {...rest} />;\n};\n\nKoreanText.displayName = \"KoreanText\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAqCA,IAAa,cAAyC,EAAE,QAAQ,GAAG,WAAW;AAG5E,QAAO,oBAAC,UAAD;EAAU,QAAQ,UAAU;EAAe,GAAI;EAAQ,CAAA;;AAGhE,WAAW,cAAc"}