blacktrigram 0.7.2

package/lib/components/shared/three/scene/DebugCollision.d.ts

@@ -0,0 +1,64 @@
+/**
+ * Debug visualization component for collision detection bounding boxes.
+ *
+ * **Korean**: 충돌 감지 디버그 시각화
+ *
+ * Provides visual debugging tools for the collision detection system, including:
+ * - Bounding boxes for all 5 anatomical regions
+ * - Attack reach spheres
+ * - Raycaster visualization
+ *
+ * @module components/three/DebugCollision
+ * @category Debug Components
+ * @korean 충돌디버그
+ */
+import React from "react";
+import type { Position3D } from "../../../../types/physics";
+/**
+ * Props for DebugCollision component.
+ *
+ * @public
+ * @korean 디버그충돌속성
+ */
+export interface DebugCollisionProps {
+    /** Whether to show bounding boxes */
+    readonly showBoundingBoxes?: boolean;
+    /** Whether to show attack reach sphere */
+    readonly showAttackReach?: boolean;
+    /** Attack reach radius in meters */
+    readonly attackReach?: number;
+    /** Position of the attacker (for reach sphere) */
+    readonly attackerPosition?: Position3D;
+    /** Position of the defender (for bounding boxes) */
+    readonly defenderPosition?: Position3D;
+    /** Opacity of debug visuals (0-1) */
+    readonly opacity?: number;
+}
+/**
+ * Debug visualization component for collision detection.
+ *
+ * **Korean**: 충돌 감지 디버그 컴포넌트
+ *
+ * Renders transparent wireframe visualizations of bounding boxes and attack reach.
+ * Useful for debugging collision detection logic and tuning parameters.
+ *
+ * @example
+ * ```tsx
+ * <Canvas>
+ *   <DebugCollision
+ *     showBoundingBoxes={true}
+ *     showAttackReach={true}
+ *     attackReach={0.77}
+ *     attackerPosition={{ x: 0, y: 0, z: 5 }}
+ *     defenderPosition={{ x: 0, y: 0, z: 6 }}
+ *     opacity={0.3}
+ *   />
+ * </Canvas>
+ * ```
+ *
+ * @public
+ * @korean 디버그충돌컴포넌트
+ */
+export declare const DebugCollision: React.FC<DebugCollisionProps>;
+export default DebugCollision;
+//# sourceMappingURL=DebugCollision.d.ts.map

package/lib/components/shared/three/scene/DebugCollision.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DebugCollision.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/three/scene/DebugCollision.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAA6B,MAAM,OAAO,CAAC;AAGlD,OAAO,KAAK,EAEV,UAAU,EACX,MAAM,2BAA2B,CAAC;AAEnC;;;;;GAKG;AACH,MAAM,WAAW,mBAAmB;IAClC,qCAAqC;IACrC,QAAQ,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAErC,0CAA0C;IAC1C,QAAQ,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC;IAEnC,oCAAoC;IACpC,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAE9B,kDAAkD;IAClD,QAAQ,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAEvC,oDAAoD;IACpD,QAAQ,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAEvC,qCAAqC;IACrC,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;CAC3B;AAgBD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA4IxD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/shared/three/scene/KoreanSignage3D.d.ts

@@ -0,0 +1,29 @@
+/**
+ * KoreanSignage3D - Three.js 3D Korean text signage with emissive glow
+ *
+ * Renders Korean text signs with neon emissive effects positioned around the arena
+ * Creates an immersive cyberpunk Korean martial arts atmosphere
+ *
+ * Note: Uses drei's Text component with default Inter font which supports Korean
+ * The `font` prop requires a font FILE URL (.ttf/.woff), not a CSS font-family string
+ */
+import React from "react";
+/**
+ * Props for the KoreanSignage3D component.
+ */
+export interface KoreanSignage3DProps {
+    /** Scale factor for signage size (1.0 = desktop, <1.0 = mobile). Defaults to 1.0 */
+    readonly scale?: number;
+}
+/**
+ * KoreanSignage3D Component
+ * Creates Korean text signs with neon emissive glow around the combat arena
+ *
+ * Signs:
+ * - "전투" (Combat) - Left wall, gold accent
+ * - "흑괘" (Black Trigram) - Right wall, cyan accent
+ * - "급소격" (Vital Point Strike) - Back wall, red accent
+ */
+export declare const KoreanSignage3D: React.FC<KoreanSignage3DProps>;
+export default KoreanSignage3D;
+//# sourceMappingURL=KoreanSignage3D.d.ts.map

package/lib/components/shared/three/scene/KoreanSignage3D.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KoreanSignage3D.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/three/scene/KoreanSignage3D.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,KAAuC,MAAM,OAAO,CAAC;AAI5D;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,oFAAoF;IACpF,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAkG1D,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/shared/three/scene/KoreanSignage3D.js

@@ -0,0 +1,122 @@
+import { KOREAN_COLORS } from "../../../../types/constants/colors.js";
+import "../../../../types/constants/index.js";
+import { Suspense, useEffect, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Text } from "@react-three/drei";
+import * as THREE from "three";
+//#region src/components/shared/three/scene/KoreanSignage3D.tsx
+/**
+* KoreanSignage3D - Three.js 3D Korean text signage with emissive glow
+*
+* Renders Korean text signs with neon emissive effects positioned around the arena
+* Creates an immersive cyberpunk Korean martial arts atmosphere
+*
+* Note: Uses drei's Text component with default Inter font which supports Korean
+* The `font` prop requires a font FILE URL (.ttf/.woff), not a CSS font-family string
+*/
+/**
+* KoreanSignage3D Component
+* Creates Korean text signs with neon emissive glow around the combat arena
+*
+* Signs:
+* - "전투" (Combat) - Left wall, gold accent
+* - "흑괘" (Black Trigram) - Right wall, cyan accent
+* - "급소격" (Vital Point Strike) - Back wall, red accent
+*/
+var KoreanSignage3D = ({ scale = 1 }) => {
+	const goldNeonMaterial = useMemo(() => new THREE.MeshBasicMaterial({
+		color: KOREAN_COLORS.ACCENT_GOLD,
+		toneMapped: false
+	}), []);
+	const cyanNeonMaterial = useMemo(() => new THREE.MeshBasicMaterial({
+		color: KOREAN_COLORS.PRIMARY_CYAN,
+		toneMapped: false
+	}), []);
+	const redNeonMaterial = useMemo(() => new THREE.MeshBasicMaterial({
+		color: KOREAN_COLORS.KOREAN_RED,
+		toneMapped: false
+	}), []);
+	const leftWallX = -12 * scale;
+	const rightWallX = 12 * scale;
+	const backWallZ = -14 * scale;
+	const signHeight = 5 * scale;
+	const fontSize = 1.5 * scale;
+	const outlineWidth = .05 * scale;
+	useEffect(() => {
+		return () => {
+			goldNeonMaterial.dispose();
+			cyanNeonMaterial.dispose();
+			redNeonMaterial.dispose();
+		};
+	}, [
+		goldNeonMaterial,
+		cyanNeonMaterial,
+		redNeonMaterial
+	]);
+	return /* @__PURE__ */ jsx(Suspense, {
+		fallback: null,
+		children: /* @__PURE__ */ jsxs("group", { children: [
+			/* @__PURE__ */ jsx(Text, {
+				position: [
+					leftWallX,
+					signHeight,
+					0
+				],
+				rotation: [
+					0,
+					Math.PI / 2,
+					0
+				],
+				fontSize,
+				outlineColor: KOREAN_COLORS.PRIMARY_CYAN,
+				outlineWidth,
+				material: goldNeonMaterial,
+				anchorX: "center",
+				anchorY: "middle",
+				children: "전투"
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				position: [
+					rightWallX,
+					signHeight,
+					0
+				],
+				rotation: [
+					0,
+					-Math.PI / 2,
+					0
+				],
+				fontSize,
+				outlineColor: KOREAN_COLORS.ACCENT_GOLD,
+				outlineWidth,
+				material: cyanNeonMaterial,
+				anchorX: "center",
+				anchorY: "middle",
+				children: "흑괘"
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				position: [
+					0,
+					signHeight,
+					backWallZ
+				],
+				rotation: [
+					0,
+					0,
+					0
+				],
+				fontSize: fontSize * .8,
+				outlineColor: KOREAN_COLORS.ACCENT_GOLD,
+				outlineWidth,
+				material: redNeonMaterial,
+				anchorX: "center",
+				anchorY: "middle",
+				children: "급소격"
+			})
+		] })
+	});
+};
+//#endregion
+export { KoreanSignage3D as default };
+
+//# sourceMappingURL=KoreanSignage3D.js.map

package/lib/components/shared/three/scene/KoreanSignage3D.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KoreanSignage3D.js","names":[],"sources":["../../../../../src/components/shared/three/scene/KoreanSignage3D.tsx"],"sourcesContent":["/**\n * KoreanSignage3D - Three.js 3D Korean text signage with emissive glow\n *\n * Renders Korean text signs with neon emissive effects positioned around the arena\n * Creates an immersive cyberpunk Korean martial arts atmosphere\n *\n * Note: Uses drei's Text component with default Inter font which supports Korean\n * The `font` prop requires a font FILE URL (.ttf/.woff), not a CSS font-family string\n */\n\nimport { Text } from \"@react-three/drei\";\nimport React, { Suspense, useEffect, useMemo } from \"react\";\nimport * as THREE from \"three\";\nimport { KOREAN_COLORS } from \"../../../../types/constants\";\n\n/**\n * Props for the KoreanSignage3D component.\n */\nexport interface KoreanSignage3DProps {\n  /** Scale factor for signage size (1.0 = desktop, <1.0 = mobile). Defaults to 1.0 */\n  readonly scale?: number;\n}\n\n/**\n * KoreanSignage3D Component\n * Creates Korean text signs with neon emissive glow around the combat arena\n *\n * Signs:\n * - \"전투\" (Combat) - Left wall, gold accent\n * - \"흑괘\" (Black Trigram) - Right wall, cyan accent\n * - \"급소격\" (Vital Point Strike) - Back wall, red accent\n */\nexport const KoreanSignage3D: React.FC<KoreanSignage3DProps> = ({\n  scale = 1.0,\n}) => {\n  // Emissive material for glowing neon text\n  // Using MeshBasicMaterial with toneMapped: false for bloom compatibility\n  const goldNeonMaterial = useMemo(\n    () =>\n      new THREE.MeshBasicMaterial({\n        color: KOREAN_COLORS.ACCENT_GOLD,\n        toneMapped: false, // Prevent tone mapping for bloom effect\n      }),\n    [],\n  );\n\n  const cyanNeonMaterial = useMemo(\n    () =>\n      new THREE.MeshBasicMaterial({\n        color: KOREAN_COLORS.PRIMARY_CYAN,\n        toneMapped: false,\n      }),\n    [],\n  );\n\n  const redNeonMaterial = useMemo(\n    () =>\n      new THREE.MeshBasicMaterial({\n        color: KOREAN_COLORS.KOREAN_RED,\n        toneMapped: false,\n      }),\n    [],\n  );\n\n  // Scale-aware positioning and sizing\n  const leftWallX = -12 * scale;\n  const rightWallX = 12 * scale;\n  const backWallZ = -14 * scale;\n  const signHeight = 5 * scale;\n  const fontSize = 1.5 * scale;\n  const outlineWidth = 0.05 * scale;\n\n  // Cleanup materials on unmount\n  useEffect(() => {\n    return () => {\n      goldNeonMaterial.dispose();\n      cyanNeonMaterial.dispose();\n      redNeonMaterial.dispose();\n    };\n  }, [goldNeonMaterial, cyanNeonMaterial, redNeonMaterial]);\n\n  return (\n    <Suspense fallback={null}>\n      <group>\n        {/* \"전투\" (Combat) sign - left wall */}\n        {/* Note: material prop takes precedence over color prop in Text component */}\n        {/* Note: Omitting font prop uses default Inter font which supports Korean */}\n        <Text\n          position={[leftWallX, signHeight, 0]}\n          rotation={[0, Math.PI / 2, 0]}\n          fontSize={fontSize}\n          outlineColor={KOREAN_COLORS.PRIMARY_CYAN}\n          outlineWidth={outlineWidth}\n          material={goldNeonMaterial}\n          anchorX=\"center\"\n          anchorY=\"middle\"\n        >\n          전투\n        </Text>\n\n        {/* \"흑괘\" (Black Trigram) sign - right wall */}\n        <Text\n          position={[rightWallX, signHeight, 0]}\n          rotation={[0, -Math.PI / 2, 0]}\n          fontSize={fontSize}\n          outlineColor={KOREAN_COLORS.ACCENT_GOLD}\n          outlineWidth={outlineWidth}\n          material={cyanNeonMaterial}\n          anchorX=\"center\"\n          anchorY=\"middle\"\n        >\n          흑괘\n        </Text>\n\n        {/* \"급소격\" (Vital Point Strike) sign - back wall */}\n        <Text\n          position={[0, signHeight, backWallZ]}\n          rotation={[0, 0, 0]}\n          fontSize={fontSize * 0.8} // Slightly smaller for back wall\n          outlineColor={KOREAN_COLORS.ACCENT_GOLD}\n          outlineWidth={outlineWidth}\n          material={redNeonMaterial}\n          anchorX=\"center\"\n          anchorY=\"middle\"\n        >\n          급소격\n        </Text>\n      </group>\n    </Suspense>\n  );\n};\n\nexport default KoreanSignage3D;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,IAAa,mBAAmD,EAC9D,QAAQ,QACJ;CAGJ,MAAM,mBAAmB,cAErB,IAAI,MAAM,kBAAkB;EAC1B,OAAO,cAAc;EACrB,YAAY;EACb,CAAC,EACJ,EAAE,CACH;CAED,MAAM,mBAAmB,cAErB,IAAI,MAAM,kBAAkB;EAC1B,OAAO,cAAc;EACrB,YAAY;EACb,CAAC,EACJ,EAAE,CACH;CAED,MAAM,kBAAkB,cAEpB,IAAI,MAAM,kBAAkB;EAC1B,OAAO,cAAc;EACrB,YAAY;EACb,CAAC,EACJ,EAAE,CACH;CAGD,MAAM,YAAY,MAAM;CACxB,MAAM,aAAa,KAAK;CACxB,MAAM,YAAY,MAAM;CACxB,MAAM,aAAa,IAAI;CACvB,MAAM,WAAW,MAAM;CACvB,MAAM,eAAe,MAAO;AAG5B,iBAAgB;AACd,eAAa;AACX,oBAAiB,SAAS;AAC1B,oBAAiB,SAAS;AAC1B,mBAAgB,SAAS;;IAE1B;EAAC;EAAkB;EAAkB;EAAgB,CAAC;AAEzD,QACE,oBAAC,UAAD;EAAU,UAAU;YAClB,qBAAC,SAAD,EAAA,UAAA;GAIE,oBAAC,MAAD;IACE,UAAU;KAAC;KAAW;KAAY;KAAE;IACpC,UAAU;KAAC;KAAG,KAAK,KAAK;KAAG;KAAE;IACnB;IACV,cAAc,cAAc;IACd;IACd,UAAU;IACV,SAAQ;IACR,SAAQ;cACT;IAEM,CAAA;GAGP,oBAAC,MAAD;IACE,UAAU;KAAC;KAAY;KAAY;KAAE;IACrC,UAAU;KAAC;KAAG,CAAC,KAAK,KAAK;KAAG;KAAE;IACpB;IACV,cAAc,cAAc;IACd;IACd,UAAU;IACV,SAAQ;IACR,SAAQ;cACT;IAEM,CAAA;GAGP,oBAAC,MAAD;IACE,UAAU;KAAC;KAAG;KAAY;KAAU;IACpC,UAAU;KAAC;KAAG;KAAG;KAAE;IACnB,UAAU,WAAW;IACrB,cAAc,cAAc;IACd;IACd,UAAU;IACV,SAAQ;IACR,SAAQ;cACT;IAEM,CAAA;GACD,EAAA,CAAA;EACC,CAAA"}

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

@@ -0,0 +1,38 @@
+/**
+ * ArchetypeCard - Three.js-compatible character archetype card
+ *
+ * Displays player archetype information with Korean theming
+ *
+ * @module components/three
+ */
+import React from "react";
+import { PlayerArchetype } from "../../../../types/common";
+/**
+ * Props for ArchetypeCard component
+ */
+export interface ArchetypeCardProps {
+    readonly archetype: PlayerArchetype;
+    readonly onSelect?: (archetype: PlayerArchetype) => void;
+    readonly isSelected?: boolean;
+    readonly position?: [number, number, number];
+    readonly width?: number;
+    readonly showStats?: boolean;
+    readonly testId?: string;
+}
+/**
+ * ArchetypeCard Component
+ *
+ * A card component for displaying player archetypes with Korean martial arts styling.
+ * Includes archetype name, description, and optional stats.
+ *
+ * @example
+ * ```tsx
+ * <ArchetypeCard
+ *   archetype={PlayerArchetype.MUSA}
+ *   onSelect={(archetype) => console.log(archetype)}
+ *   showStats
+ * />
+ * ```
+ */
+export declare const ArchetypeCard: React.FC<ArchetypeCardProps>;
+//# sourceMappingURL=ArchetypeCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ArchetypeCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/three/ui/ArchetypeCard.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAyC,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAK3D;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,SAAS,EAAE,eAAe,CAAC;IACpC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;IACzD,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC7C,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAkMtD,CAAC"}

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

@@ -0,0 +1,213 @@
+import { KOREAN_COLORS } from "../../../../types/constants/colors.js";
+import { FONT_FAMILY } from "../../../../types/constants/typography.js";
+import "../../../../types/constants/index.js";
+import { PLAYER_ARCHETYPES_DATA } from "../../../../systems/types.js";
+import { hexToRgbaString } from "../../../../utils/colorUtils.js";
+import { useCallback, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Html } from "@react-three/drei";
+//#region src/components/shared/three/ui/ArchetypeCard.tsx
+/**
+* ArchetypeCard - Three.js-compatible character archetype card
+* 
+* Displays player archetype information with Korean theming
+* 
+* @module components/three
+*/
+/**
+* ArchetypeCard Component
+* 
+* A card component for displaying player archetypes with Korean martial arts styling.
+* Includes archetype name, description, and optional stats.
+* 
+* @example
+* ```tsx
+* <ArchetypeCard
+*   archetype={PlayerArchetype.MUSA}
+*   onSelect={(archetype) => console.log(archetype)}
+*   showStats
+* />
+* ```
+*/
+var ArchetypeCard = ({ archetype, onSelect, isSelected = false, position = [
+	0,
+	0,
+	0
+], width = 320, showStats = true, testId }) => {
+	const [isHovered, setIsHovered] = useState(false);
+	const archetypeData = useMemo(() => PLAYER_ARCHETYPES_DATA[archetype], [archetype]);
+	const handleClick = useCallback(() => {
+		if (onSelect) onSelect(archetype);
+	}, [onSelect, archetype]);
+	const handleMouseEnter = useCallback(() => {
+		setIsHovered(true);
+	}, []);
+	const handleMouseLeave = useCallback(() => {
+		setIsHovered(false);
+	}, []);
+	const cardStyle = useMemo(() => {
+		let background = hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, .95);
+		let borderColor = hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, .4);
+		let boxShadow = `0 2px 8px ${hexToRgbaString(KOREAN_COLORS.BLACK_SOLID, .3)}`;
+		if (isSelected) {
+			background = hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, .15);
+			borderColor = hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, .9);
+			boxShadow = `
+        0 4px 12px ${hexToRgbaString(KOREAN_COLORS.BLACK_SOLID, .5)},
+        0 0 20px ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, .4)}
+      `;
+		} else if (isHovered) {
+			background = hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, .1);
+			borderColor = hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, .7);
+			boxShadow = `
+        0 4px 12px ${hexToRgbaString(KOREAN_COLORS.BLACK_SOLID, .4)},
+        0 0 15px ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, .3)}
+      `;
+		}
+		return {
+			width: `${width}px`,
+			background,
+			border: `2px solid ${borderColor}`,
+			borderRadius: "8px",
+			padding: "16px",
+			cursor: onSelect ? "pointer" : "default",
+			transition: "all 0.3s ease",
+			boxShadow,
+			transform: isHovered && onSelect ? "translateY(-4px)" : "translateY(0)",
+			userSelect: "none",
+			WebkitUserSelect: "none"
+		};
+	}, [
+		width,
+		isSelected,
+		isHovered,
+		onSelect
+	]);
+	const headerStyle = useMemo(() => ({
+		marginBottom: "12px",
+		paddingBottom: "8px",
+		borderBottom: `1px solid ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, .3)}`
+	}), []);
+	const titleStyle = useMemo(() => ({
+		fontFamily: FONT_FAMILY.KOREAN,
+		fontSize: "20px",
+		fontWeight: "bold",
+		color: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD),
+		textShadow: `0 2px 4px ${hexToRgbaString(KOREAN_COLORS.BLACK_SOLID, .5)}`,
+		marginBottom: "4px"
+	}), []);
+	const subtitleStyle = useMemo(() => ({
+		fontFamily: FONT_FAMILY.KOREAN,
+		fontSize: "14px",
+		fontStyle: "italic",
+		color: hexToRgbaString(KOREAN_COLORS.TEXT_SECONDARY),
+		opacity: .8
+	}), []);
+	const descriptionStyle = useMemo(() => ({
+		fontFamily: FONT_FAMILY.KOREAN,
+		fontSize: "14px",
+		lineHeight: "1.6",
+		color: hexToRgbaString(KOREAN_COLORS.TEXT_PRIMARY),
+		marginBottom: showStats ? "12px" : "0"
+	}), [showStats]);
+	const statsContainerStyle = useMemo(() => ({
+		display: "grid",
+		gridTemplateColumns: "repeat(2, 1fr)",
+		gap: "8px",
+		marginTop: "12px"
+	}), []);
+	const statItemStyle = useMemo(() => ({
+		display: "flex",
+		flexDirection: "column",
+		gap: "4px"
+	}), []);
+	const statLabelStyle = useMemo(() => ({
+		fontFamily: FONT_FAMILY.KOREAN,
+		fontSize: "12px",
+		color: hexToRgbaString(KOREAN_COLORS.TEXT_SECONDARY),
+		fontWeight: "bold"
+	}), []);
+	const statValueStyle = useMemo(() => ({
+		fontFamily: FONT_FAMILY.KOREAN,
+		fontSize: "16px",
+		color: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN),
+		fontWeight: "bold"
+	}), []);
+	return /* @__PURE__ */ jsx(Html, {
+		position,
+		center: true,
+		children: /* @__PURE__ */ jsxs("div", {
+			onClick: handleClick,
+			onMouseEnter: handleMouseEnter,
+			onMouseLeave: handleMouseLeave,
+			style: cardStyle,
+			"data-testid": testId ?? `archetype-card-${archetype}`,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					style: headerStyle,
+					children: [/* @__PURE__ */ jsx("div", {
+						style: titleStyle,
+						children: archetypeData.name.korean
+					}), /* @__PURE__ */ jsx("div", {
+						style: subtitleStyle,
+						children: archetypeData.name.english
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					style: descriptionStyle,
+					children: archetypeData.description.korean
+				}),
+				showStats && /* @__PURE__ */ jsxs("div", {
+					style: statsContainerStyle,
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							style: statItemStyle,
+							children: [/* @__PURE__ */ jsx("div", {
+								style: statLabelStyle,
+								children: "공격 | Attack"
+							}), /* @__PURE__ */ jsx("div", {
+								style: statValueStyle,
+								children: archetypeData.stats.attackPower
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							style: statItemStyle,
+							children: [/* @__PURE__ */ jsx("div", {
+								style: statLabelStyle,
+								children: "방어 | Defense"
+							}), /* @__PURE__ */ jsx("div", {
+								style: statValueStyle,
+								children: archetypeData.stats.defense
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							style: statItemStyle,
+							children: [/* @__PURE__ */ jsx("div", {
+								style: statLabelStyle,
+								children: "속도 | Speed"
+							}), /* @__PURE__ */ jsx("div", {
+								style: statValueStyle,
+								children: archetypeData.stats.speed
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							style: statItemStyle,
+							children: [/* @__PURE__ */ jsx("div", {
+								style: statLabelStyle,
+								children: "기력 | Ki"
+							}), /* @__PURE__ */ jsx("div", {
+								style: statValueStyle,
+								children: archetypeData.baseKi
+							})]
+						})
+					]
+				})
+			]
+		})
+	});
+};
+ArchetypeCard.displayName = "ArchetypeCard";
+//#endregion
+export { ArchetypeCard };
+
+//# sourceMappingURL=ArchetypeCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ArchetypeCard.js","names":[],"sources":["../../../../../src/components/shared/three/ui/ArchetypeCard.tsx"],"sourcesContent":["/**\n * ArchetypeCard - Three.js-compatible character archetype card\n * \n * Displays player archetype information with Korean theming\n * \n * @module components/three\n */\n\nimport { Html } from \"@react-three/drei\";\nimport React, { useCallback, useMemo, useState } from \"react\";\nimport { PlayerArchetype } from \"../../../../types/common\";\nimport { KOREAN_COLORS, FONT_FAMILY } from \"../../../../types/constants\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\nimport { PLAYER_ARCHETYPES_DATA } from \"../../../../systems/types\";\n\n/**\n * Props for ArchetypeCard component\n */\nexport interface ArchetypeCardProps {\n  readonly archetype: PlayerArchetype;\n  readonly onSelect?: (archetype: PlayerArchetype) => void;\n  readonly isSelected?: boolean;\n  readonly position?: [number, number, number];\n  readonly width?: number;\n  readonly showStats?: boolean;\n  readonly testId?: string;\n}\n\n/**\n * ArchetypeCard Component\n * \n * A card component for displaying player archetypes with Korean martial arts styling.\n * Includes archetype name, description, and optional stats.\n * \n * @example\n * ```tsx\n * <ArchetypeCard\n *   archetype={PlayerArchetype.MUSA}\n *   onSelect={(archetype) => console.log(archetype)}\n *   showStats\n * />\n * ```\n */\nexport const ArchetypeCard: React.FC<ArchetypeCardProps> = ({\n  archetype,\n  onSelect,\n  isSelected = false,\n  position = [0, 0, 0],\n  width = 320,\n  showStats = true,\n  testId,\n}) => {\n  const [isHovered, setIsHovered] = useState(false);\n\n  const archetypeData = useMemo(\n    () => PLAYER_ARCHETYPES_DATA[archetype],\n    [archetype]\n  );\n\n  const handleClick = useCallback(() => {\n    if (onSelect) {\n      onSelect(archetype);\n    }\n  }, [onSelect, archetype]);\n\n  const handleMouseEnter = useCallback(() => {\n    setIsHovered(true);\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    setIsHovered(false);\n  }, []);\n\n  // Memoize card styles for performance\n  const cardStyle = useMemo<React.CSSProperties>(() => {\n    let background = hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.95);\n    let borderColor = hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 0.4);\n    let boxShadow = `0 2px 8px ${hexToRgbaString(KOREAN_COLORS.BLACK_SOLID, 0.3)}`;\n\n    if (isSelected) {\n      background = hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.15);\n      borderColor = hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.9);\n      boxShadow = `\n        0 4px 12px ${hexToRgbaString(KOREAN_COLORS.BLACK_SOLID, 0.5)},\n        0 0 20px ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.4)}\n      `;\n    } else if (isHovered) {\n      background = hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 0.1);\n      borderColor = hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 0.7);\n      boxShadow = `\n        0 4px 12px ${hexToRgbaString(KOREAN_COLORS.BLACK_SOLID, 0.4)},\n        0 0 15px ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 0.3)}\n      `;\n    }\n\n    return {\n      width: `${width}px`,\n      background,\n      border: `2px solid ${borderColor}`,\n      borderRadius: \"8px\",\n      padding: \"16px\",\n      cursor: onSelect ? \"pointer\" : \"default\",\n      transition: \"all 0.3s ease\",\n      boxShadow,\n      transform: isHovered && onSelect ? \"translateY(-4px)\" : \"translateY(0)\",\n      userSelect: \"none\",\n      WebkitUserSelect: \"none\",\n    };\n  }, [width, isSelected, isHovered, onSelect]);\n\n  // Memoize header styles for performance\n  const headerStyle = useMemo<React.CSSProperties>(\n    () => ({\n      marginBottom: \"12px\",\n      paddingBottom: \"8px\",\n      borderBottom: `1px solid ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 0.3)}`,\n    }),\n    []\n  );\n\n  const titleStyle = useMemo<React.CSSProperties>(\n    () => ({\n      fontFamily: FONT_FAMILY.KOREAN,\n      fontSize: \"20px\",\n      fontWeight: \"bold\",\n      color: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD),\n      textShadow: `0 2px 4px ${hexToRgbaString(KOREAN_COLORS.BLACK_SOLID, 0.5)}`,\n      marginBottom: \"4px\",\n    }),\n    []\n  );\n\n  const subtitleStyle = useMemo<React.CSSProperties>(\n    () => ({\n      fontFamily: FONT_FAMILY.KOREAN,\n      fontSize: \"14px\",\n      fontStyle: \"italic\",\n      color: hexToRgbaString(KOREAN_COLORS.TEXT_SECONDARY),\n      opacity: 0.8,\n    }),\n    []\n  );\n\n  const descriptionStyle = useMemo<React.CSSProperties>(\n    () => ({\n      fontFamily: FONT_FAMILY.KOREAN,\n      fontSize: \"14px\",\n      lineHeight: \"1.6\",\n      color: hexToRgbaString(KOREAN_COLORS.TEXT_PRIMARY),\n      marginBottom: showStats ? \"12px\" : \"0\",\n    }),\n    [showStats]\n  );\n\n  const statsContainerStyle = useMemo<React.CSSProperties>(\n    () => ({\n      display: \"grid\",\n      gridTemplateColumns: \"repeat(2, 1fr)\",\n      gap: \"8px\",\n      marginTop: \"12px\",\n    }),\n    []\n  );\n\n  const statItemStyle = useMemo<React.CSSProperties>(\n    () => ({\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"4px\",\n    }),\n    []\n  );\n\n  const statLabelStyle = useMemo<React.CSSProperties>(\n    () => ({\n      fontFamily: FONT_FAMILY.KOREAN,\n      fontSize: \"12px\",\n      color: hexToRgbaString(KOREAN_COLORS.TEXT_SECONDARY),\n      fontWeight: \"bold\",\n    }),\n    []\n  );\n\n  const statValueStyle = useMemo<React.CSSProperties>(\n    () => ({\n      fontFamily: FONT_FAMILY.KOREAN,\n      fontSize: \"16px\",\n      color: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN),\n      fontWeight: \"bold\",\n    }),\n    []\n  );\n\n  return (\n    <Html position={position} center>\n      <div\n        onClick={handleClick}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        style={cardStyle}\n        data-testid={testId ?? `archetype-card-${archetype}`}\n      >\n        {/* Header */}\n        <div style={headerStyle}>\n          <div style={titleStyle}>{archetypeData.name.korean}</div>\n          <div style={subtitleStyle}>{archetypeData.name.english}</div>\n        </div>\n\n        {/* Description */}\n        <div style={descriptionStyle}>\n          {archetypeData.description.korean}\n        </div>\n\n        {/* Stats */}\n        {showStats && (\n          <div style={statsContainerStyle}>\n            <div style={statItemStyle}>\n              <div style={statLabelStyle}>공격 | Attack</div>\n              <div style={statValueStyle}>{archetypeData.stats.attackPower}</div>\n            </div>\n            <div style={statItemStyle}>\n              <div style={statLabelStyle}>방어 | Defense</div>\n              <div style={statValueStyle}>{archetypeData.stats.defense}</div>\n            </div>\n            <div style={statItemStyle}>\n              <div style={statLabelStyle}>속도 | Speed</div>\n              <div style={statValueStyle}>{archetypeData.stats.speed}</div>\n            </div>\n            <div style={statItemStyle}>\n              <div style={statLabelStyle}>기력 | Ki</div>\n              <div style={statValueStyle}>{archetypeData.baseKi}</div>\n            </div>\n          </div>\n        )}\n      </div>\n    </Html>\n  );\n};\n\nArchetypeCard.displayName = \"ArchetypeCard\";\n"],"mappings":"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"}

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

@@ -0,0 +1,45 @@
+/**
+ * BodyPartHealthDisplay Component - Individual body part health visualization
+ *
+ * Displays health bars for all 8 body parts:
+ * - Head (두부)
+ * - Neck (경부)
+ * - Torso Upper (상부 몸통)
+ * - Torso Lower (하부 몸통)
+ * - Left Arm (좌팔)
+ * - Right Arm (우팔)
+ * - Left Leg (좌다리)
+ * - Right Leg (우다리)
+ *
+ * @module components/shared/three/ui/BodyPartHealthDisplay
+ * @category Shared UI
+ * @korean 신체부위체력표시
+ */
+import React from "react";
+import { BodyPartHealth } from "../../../../systems/bodypart/types";
+export interface BodyPartHealthDisplayProps {
+    /** Body part health data */
+    readonly bodyPartHealth: BodyPartHealth;
+    /** Player identifier for test IDs */
+    readonly playerId: string;
+    /** Position: 'left' for player 1, 'right' for player 2 */
+    readonly position: "left" | "right";
+    /** Whether to use mobile-optimized sizing */
+    readonly isMobile: boolean;
+}
+/**
+ * BodyPartHealthDisplay - Shows health bars for all 8 body parts
+ *
+ * @example
+ * ```tsx
+ * <BodyPartHealthDisplay
+ *   bodyPartHealth={player.bodyPartHealth}
+ *   playerId="player-1"
+ *   position="left"
+ *   isMobile={false}
+ * />
+ * ```
+ */
+export declare const BodyPartHealthDisplay: React.FC<BodyPartHealthDisplayProps>;
+export default BodyPartHealthDisplay;
+//# sourceMappingURL=BodyPartHealthDisplay.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BodyPartHealthDisplay.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/three/ui/BodyPartHealthDisplay.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAY,cAAc,EAAE,MAAM,oCAAoC,CAAC;AAI9E,MAAM,WAAW,0BAA0B;IACzC,4BAA4B;IAC5B,QAAQ,CAAC,cAAc,EAAE,cAAc,CAAC;IACxC,qCAAqC;IACrC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,0DAA0D;IAC1D,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC;IACpC,6CAA6C;IAC7C,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;CAC5B;AA2BD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAmKtE,CAAC;AAEF,eAAe,qBAAqB,CAAC"}