blacktrigram 0.7.2

package/lib/components/shared/three/anatomy/BoneClothing.d.ts

@@ -0,0 +1,89 @@
+/**
+ * Bone-attached clothing system for realistic clothing movement with skeleton
+ *
+ * **Enhanced Features (v0.6.23+)**:
+ * - **Subsurface Scattering**: Realistic fabric translucency with light transmission
+ * - **Physical Materials**: Advanced PBR materials with clearcoat and reflectivity
+ * - **Body Thickness Scaling**: Accurate clothing sizing based on muscle/fat mass
+ * - **Archetype Styling**: Unique clothing sets for all 5 player archetypes
+ *
+ * Clothing is rendered as children of their parent bones, inheriting bone
+ * transformations automatically for proper movement during animation.
+ * This mirrors the BoneMuscles approach for consistent rendering.
+ *
+ * **Visual Quality**:
+ * - Transmission: 0.05 (minimal light passing through fabric)
+ * - Thickness: 0.2 (thin fabric simulation)
+ * - IOR: 1.4 (realistic fabric index of refraction)
+ * - Clearcoat: 0.3 (surface depth and sheen)
+ * - Double-sided rendering for cloth folding
+ *
+ * **Performance**:
+ * - Geometry disposal on unmount (prevents memory leaks)
+ * - Material cleanup system
+ * - Optimized attachment calculations with useMemo
+ *
+ * @module components/three/BoneClothing
+ * @category 3D Components
+ * @korean 뼈부착의류시스템
+ */
+import React from "react";
+import * as THREE from "three";
+import type { PlayerArchetype } from "../../../../types/common";
+/**
+ * Clothing attachment configuration for a bone
+ *
+ * Defines how clothing is positioned relative to its parent bone.
+ * Position is in local bone space, so clothing moves with the bone.
+ *
+ * @korean 의류부착설정
+ */
+export interface ClothingAttachment {
+    /** Geometry for this clothing piece */
+    readonly geometry: THREE.BufferGeometry;
+    /** Local position offset from bone origin */
+    readonly localOffset: THREE.Vector3;
+    /** Local rotation relative to bone */
+    readonly localRotation: THREE.Euler;
+    /** Color of the clothing */
+    readonly color: number;
+    /** Emissive color for glow effects */
+    readonly emissiveColor?: number;
+    /** Emissive intensity */
+    readonly emissiveIntensity?: number;
+    /** Metalness for material */
+    readonly metalness?: number;
+    /** Roughness for material */
+    readonly roughness?: number;
+    /** Clothing item ID */
+    readonly itemId: string;
+}
+/**
+ * Props for BoneClothing component
+ */
+export interface BoneClothingProps {
+    /** Name of the bone this clothing attaches to */
+    readonly boneName: string;
+    /** Player archetype for clothing style */
+    readonly archetype: PlayerArchetype;
+    /** Physical attributes for sizing */
+    readonly physicalAttributes?: {
+        readonly muscleMass: number;
+        readonly fatMass: number;
+        readonly shoulderWidth: number;
+        readonly torsoLength: number;
+        readonly armLength: number;
+        readonly legLength: number;
+    };
+}
+/**
+ * BoneClothing Component
+ *
+ * Renders clothing attached to a specific bone.
+ * Clothing inherits bone transformations automatically through the scene graph.
+ *
+ * @korean 뼈부착의류
+ */
+export declare const BoneClothing: React.FC<BoneClothingProps>;
+export default BoneClothing;
+//# sourceMappingURL=BoneClothing.d.ts.map

package/lib/components/shared/three/anatomy/BoneClothing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoneClothing.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/three/anatomy/BoneClothing.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,OAAO,KAA6B,MAAM,OAAO,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgB/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAOhE;;;;;;;GAOG;AACH,MAAM,WAAW,kBAAkB;IACjC,uCAAuC;IACvC,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,cAAc,CAAC;IACxC,6CAA6C;IAC7C,QAAQ,CAAC,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC;IACpC,sCAAsC;IACtC,QAAQ,CAAC,aAAa,EAAE,KAAK,CAAC,KAAK,CAAC;IACpC,4BAA4B;IAC5B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,sCAAsC;IACtC,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC;IAChC,yBAAyB;IACzB,QAAQ,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IACpC,6BAA6B;IAC7B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,6BAA6B;IAC7B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,uBAAuB;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,iDAAiD;IACjD,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,0CAA0C;IAC1C,QAAQ,CAAC,SAAS,EAAE,eAAe,CAAC;IACpC,qCAAqC;IACrC,QAAQ,CAAC,kBAAkB,CAAC,EAAE;QAC5B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;QAC5B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;QACzB,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;QAC/B,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;QAC7B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;QAC3B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;KAC5B,CAAC;CACH;AA+VD;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAqKpD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/shared/three/anatomy/BoneClothing.js

@@ -0,0 +1,345 @@
+import { BICEP_RADIUS, CALF_RADIUS, CLOTHING_THICKNESS_FITTED, CORE_RADIUS, FOREARM_RADIUS, PECTORALS_RADIUS, QUAD_RADIUS, calculateClothingRadius } from "../../../../constants/bodyDimensions.js";
+import { getArchetypeClothing } from "../../../../data/archetypeClothing.js";
+import generateFabricTextureSet from "../../../../utils/fabricTextures.js";
+import { useEffect, useMemo } from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+import * as THREE from "three";
+//#region src/components/shared/three/anatomy/BoneClothing.tsx
+/**
+* Bone-attached clothing system for realistic clothing movement with skeleton
+*
+* **Enhanced Features (v0.6.23+)**:
+* - **Subsurface Scattering**: Realistic fabric translucency with light transmission
+* - **Physical Materials**: Advanced PBR materials with clearcoat and reflectivity
+* - **Body Thickness Scaling**: Accurate clothing sizing based on muscle/fat mass
+* - **Archetype Styling**: Unique clothing sets for all 5 player archetypes
+*
+* Clothing is rendered as children of their parent bones, inheriting bone
+* transformations automatically for proper movement during animation.
+* This mirrors the BoneMuscles approach for consistent rendering.
+*
+* **Visual Quality**:
+* - Transmission: 0.05 (minimal light passing through fabric)
+* - Thickness: 0.2 (thin fabric simulation)
+* - IOR: 1.4 (realistic fabric index of refraction)
+* - Clearcoat: 0.3 (surface depth and sheen)
+* - Double-sided rendering for cloth folding
+*
+* **Performance**:
+* - Geometry disposal on unmount (prevents memory leaks)
+* - Material cleanup system
+* - Optimized attachment calculations with useMemo
+*
+* @module components/three/BoneClothing
+* @category 3D Components
+* @korean 뼈부착의류시스템
+*/
+/**
+* Calculate body thickness multiplier based on muscle mass and fat mass
+*
+* Uses linear scaling with reasonable limits to prevent "michelin man" effect.
+* This matches the BodySurface calculation for consistency.
+*
+* @param muscleMass - Muscle mass in kg
+* @param fatMass - Fat mass in kg
+* @returns Body thickness multiplier (0.75 - 1.20)
+*/
+var calculateBodyThickness = (muscleMass, fatMass) => {
+	const referenceMuscle = 35;
+	const referenceFat = 12;
+	const muscleRatio = muscleMass / referenceMuscle;
+	const fatRatio = fatMass / referenceFat;
+	const muscleContribution = (muscleRatio - 1) * .15;
+	const fatContribution = (fatRatio - 1) * .2;
+	return Math.max(.75, Math.min(1.2, .85 + muscleContribution + fatContribution));
+};
+/**
+* Get fabric preset based on clothing material type
+*/
+var getFabricPreset = (material) => {
+	switch (material) {
+		case "fabric": return "dobok";
+		case "tactical":
+		case "synthetic": return "tactical";
+		case "leather":
+		case "armored": return "leather";
+		case "cybernetic": return "silk";
+		default: return "dobok";
+	}
+};
+/**
+* Convert number color to hex string
+*/
+var numberToHex = (color) => {
+	return `#${color.toString(16).padStart(6, "0")}`;
+};
+/**
+* Get clothing attachments for a specific bone
+*/
+var getClothingForBone = (boneName, archetype, physicalAttributes) => {
+	const clothingSet = getArchetypeClothing(archetype);
+	const attachments = [];
+	const bodyThickness = calculateBodyThickness(physicalAttributes.muscleMass, physicalAttributes.fatMass);
+	const torsoScale = physicalAttributes.torsoLength / 59;
+	const legScale = physicalAttributes.legLength / 96;
+	for (const item of clothingSet.items) {
+		const attachmentsForItem = getAttachmentsForItem(item, boneName, bodyThickness, torsoScale, legScale, physicalAttributes);
+		attachments.push(...attachmentsForItem);
+	}
+	return attachments;
+};
+/**
+* Generate clothing attachments for a specific item on a bone
+*/
+var getAttachmentsForItem = (item, boneName, bodyThickness, torsoScale, legScale, physicalAttributes) => {
+	const fitScale = {
+		tight: 1.08,
+		fitted: 1.15,
+		loose: 1.25,
+		oversized: 1.4
+	}[item.fit] ?? 1.15;
+	const attachments = [];
+	switch (item.type) {
+		case "torso":
+			if (boneName === "spine_middle") {
+				const height = 59 / 100 * torsoScale * 1.2;
+				const clothingThickness = CLOTHING_THICKNESS_FITTED * fitScale;
+				const clothingRadius = calculateClothingRadius((physicalAttributes.shoulderWidth / 100 * .5 * bodyThickness + PECTORALS_RADIUS * bodyThickness) * .5, 1, clothingThickness);
+				attachments.push({
+					geometry: new THREE.CylinderGeometry(clothingRadius * .95, clothingRadius * 1.05, height, 16),
+					localOffset: new THREE.Vector3(0, 0, 0),
+					localRotation: new THREE.Euler(0, 0, 0),
+					color: item.colorPrimary,
+					emissiveColor: item.colorEmissive,
+					emissiveIntensity: item.emissiveIntensity,
+					metalness: item.metalness,
+					roughness: item.roughness,
+					itemId: item.id
+				});
+			}
+			if (boneName === "upper_arm_L" || boneName === "upper_arm_R") {
+				const clothingRadius = calculateClothingRadius(BICEP_RADIUS, bodyThickness, CLOTHING_THICKNESS_FITTED * fitScale);
+				const upperArmLength = physicalAttributes.armLength / 100 * .45;
+				attachments.push({
+					geometry: new THREE.CylinderGeometry(clothingRadius * 1.05, clothingRadius * .95, upperArmLength, 12),
+					localOffset: new THREE.Vector3(0, -upperArmLength * .4, 0),
+					localRotation: new THREE.Euler(0, 0, 0),
+					color: item.colorPrimary,
+					emissiveColor: item.colorEmissive,
+					emissiveIntensity: item.emissiveIntensity,
+					metalness: item.metalness,
+					roughness: item.roughness,
+					itemId: `${item.id}-sleeve-upper-${boneName}`
+				});
+			}
+			if (boneName === "forearm_L" || boneName === "forearm_R") {
+				const clothingRadius = calculateClothingRadius(FOREARM_RADIUS, bodyThickness, CLOTHING_THICKNESS_FITTED * fitScale * .8);
+				const forearmLength = physicalAttributes.armLength / 100 * .4;
+				attachments.push({
+					geometry: new THREE.CylinderGeometry(clothingRadius * .98, clothingRadius * .85, forearmLength, 12),
+					localOffset: new THREE.Vector3(0, -forearmLength * .4, 0),
+					localRotation: new THREE.Euler(0, 0, 0),
+					color: item.colorPrimary,
+					emissiveColor: item.colorEmissive,
+					emissiveIntensity: item.emissiveIntensity,
+					metalness: item.metalness,
+					roughness: item.roughness,
+					itemId: `${item.id}-sleeve-forearm-${boneName}`
+				});
+			}
+			break;
+		case "pants":
+			if (boneName === "thigh_L" || boneName === "thigh_R") {
+				const clothingRadius = calculateClothingRadius(QUAD_RADIUS, bodyThickness, CLOTHING_THICKNESS_FITTED * fitScale * 1.3);
+				const thighLength = physicalAttributes.legLength / 100 * legScale * .45;
+				attachments.push({
+					geometry: new THREE.CylinderGeometry(clothingRadius * 1.08, clothingRadius * .92, thighLength, 16),
+					localOffset: new THREE.Vector3(0, -thighLength * .4, 0),
+					localRotation: new THREE.Euler(0, 0, 0),
+					color: item.colorPrimary,
+					emissiveColor: item.colorEmissive,
+					emissiveIntensity: item.emissiveIntensity,
+					metalness: item.metalness,
+					roughness: item.roughness,
+					itemId: `${item.id}-thigh-${boneName}`
+				});
+			}
+			if (boneName === "shin_L" || boneName === "shin_R") {
+				const clothingRadius = calculateClothingRadius(CALF_RADIUS, bodyThickness, CLOTHING_THICKNESS_FITTED * fitScale);
+				const shinLength = physicalAttributes.legLength / 100 * legScale * .42;
+				attachments.push({
+					geometry: new THREE.CylinderGeometry(clothingRadius * .95, clothingRadius * .75, shinLength, 16),
+					localOffset: new THREE.Vector3(0, -shinLength * .4, 0),
+					localRotation: new THREE.Euler(0, 0, 0),
+					color: item.colorPrimary,
+					emissiveColor: item.colorEmissive,
+					emissiveIntensity: item.emissiveIntensity,
+					metalness: item.metalness,
+					roughness: item.roughness,
+					itemId: `${item.id}-shin-${boneName}`
+				});
+			}
+			break;
+		case "belt":
+			if (boneName === "pelvis") {
+				const clothingThickness = CLOTHING_THICKNESS_FITTED * fitScale;
+				const beltRadius = calculateClothingRadius(CORE_RADIUS * bodyThickness, 1, clothingThickness + .005);
+				attachments.push({
+					geometry: new THREE.CylinderGeometry(beltRadius, beltRadius, .06, 16),
+					localOffset: new THREE.Vector3(0, 0, 0),
+					localRotation: new THREE.Euler(0, 0, 0),
+					color: item.colorPrimary,
+					emissiveColor: item.colorEmissive,
+					emissiveIntensity: item.emissiveIntensity,
+					metalness: item.metalness,
+					roughness: item.roughness,
+					itemId: item.id
+				});
+			}
+			break;
+		case "vest":
+			if (boneName === "spine_middle") {
+				const height = 59 / 100 * .75 * torsoScale;
+				const clothingThickness = CLOTHING_THICKNESS_FITTED * fitScale;
+				const vestRadius = calculateClothingRadius((physicalAttributes.shoulderWidth / 100 * .5 * bodyThickness + (PECTORALS_RADIUS + .01) * bodyThickness) * .5, 1, clothingThickness + .008);
+				attachments.push({
+					geometry: new THREE.CylinderGeometry(vestRadius * .97, vestRadius * 1.03, height, 16),
+					localOffset: new THREE.Vector3(0, 0, 0),
+					localRotation: new THREE.Euler(0, 0, 0),
+					color: item.colorPrimary,
+					emissiveColor: item.colorEmissive,
+					emissiveIntensity: item.emissiveIntensity,
+					metalness: item.metalness,
+					roughness: item.roughness,
+					itemId: item.id
+				});
+			}
+			break;
+	}
+	return attachments;
+};
+/**
+* BoneClothing Component
+*
+* Renders clothing attached to a specific bone.
+* Clothing inherits bone transformations automatically through the scene graph.
+*
+* @korean 뼈부착의류
+*/
+var BoneClothing = ({ boneName, archetype, physicalAttributes }) => {
+	const attrs = useMemo(() => physicalAttributes ?? {
+		muscleMass: 35,
+		fatMass: 12,
+		shoulderWidth: 45,
+		torsoLength: 59,
+		armLength: 62,
+		legLength: 96
+	}, [physicalAttributes]);
+	const attachments = useMemo(() => getClothingForBone(boneName, archetype, attrs), [
+		boneName,
+		archetype,
+		attrs
+	]);
+	const clothingSet = useMemo(() => getArchetypeClothing(archetype), [archetype]);
+	/**
+	* Generate fabric textures for realistic dobok (도복) rendering
+	*
+	* Creates procedural weave patterns, normal maps, and roughness maps
+	* for enhanced cloth realism without external image assets.
+	*
+	* @korean 직물텍스처생성
+	*/
+	const fabricTextures = useMemo(() => {
+		const textureMap = /* @__PURE__ */ new Map();
+		for (const item of clothingSet.items) if (!textureMap.has(item.material)) {
+			const preset = getFabricPreset(item.material);
+			const colorHex = numberToHex(item.colorPrimary);
+			textureMap.set(item.material, generateFabricTextureSet(colorHex, preset));
+		}
+		return textureMap;
+	}, [clothingSet]);
+	useEffect(() => {
+		return () => {
+			fabricTextures.forEach((textureSet) => textureSet.dispose());
+		};
+	}, [fabricTextures]);
+	/**
+	* Create materials with advanced physical properties for realistic cloth rendering
+	*
+	* Enhanced with:
+	* - **Fabric textures**: Procedural weave patterns for dobok authenticity
+	* - **Normal maps**: Surface detail for thread texture visibility
+	* - **Roughness maps**: Realistic light scattering on fabric surface
+	* - Subsurface scattering: Light transmission through fabric for realism
+	* - Clearcoat: Surface depth and sheen for material quality
+	* - Double-sided rendering: Proper display when cloth folds
+	* - Physical properties: IOR, reflectivity for authentic appearance
+	*
+	* @korean 향상된물리재료생성
+	*/
+	const materials = useMemo(() => {
+		return attachments.map((attachment) => {
+			const materialType = clothingSet.items.find((item) => attachment.itemId.startsWith(item.id))?.material ?? "fabric";
+			const textureSet = fabricTextures.get(materialType);
+			let normalScale;
+			try {
+				normalScale = new THREE.Vector2(.3, .3);
+			} catch {
+				normalScale = void 0;
+			}
+			return new THREE.MeshPhysicalMaterial({
+				color: attachment.color,
+				map: textureSet?.colorMap ?? null,
+				normalMap: textureSet?.normalMap ?? null,
+				normalScale,
+				roughnessMap: textureSet?.roughnessMap ?? null,
+				emissive: attachment.emissiveColor ?? 0,
+				emissiveIntensity: attachment.emissiveIntensity ?? 0,
+				metalness: attachment.metalness ?? .1,
+				roughness: attachment.roughness ?? .8,
+				clearcoat: .2,
+				clearcoatRoughness: .6,
+				transmission: .03,
+				thickness: .15,
+				ior: 1.4,
+				reflectivity: .2,
+				side: THREE.DoubleSide,
+				flatShading: false
+			});
+		});
+	}, [
+		attachments,
+		clothingSet,
+		fabricTextures
+	]);
+	useEffect(() => {
+		return () => {
+			materials.forEach((mat) => mat.dispose());
+		};
+	}, [materials]);
+	useEffect(() => {
+		return () => {
+			attachments.forEach((attachment) => {
+				attachment.geometry.dispose();
+			});
+		};
+	}, [attachments]);
+	if (attachments.length === 0) return null;
+	return /* @__PURE__ */ jsx(Fragment, { children: attachments.map((attachment, index) => /* @__PURE__ */ jsx("mesh", {
+		geometry: attachment.geometry,
+		material: materials[index],
+		position: attachment.localOffset.toArray(),
+		rotation: [
+			attachment.localRotation.x,
+			attachment.localRotation.y,
+			attachment.localRotation.z
+		],
+		castShadow: true,
+		receiveShadow: true,
+		name: `clothing-${attachment.itemId}`
+	}, attachment.itemId)) });
+};
+//#endregion
+export { BoneClothing as default };
+
+//# sourceMappingURL=BoneClothing.js.map

package/lib/components/shared/three/anatomy/BoneClothing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoneClothing.js","names":[],"sources":["../../../../../src/components/shared/three/anatomy/BoneClothing.tsx"],"sourcesContent":["/**\n * Bone-attached clothing system for realistic clothing movement with skeleton\n *\n * **Enhanced Features (v0.6.23+)**:\n * - **Subsurface Scattering**: Realistic fabric translucency with light transmission\n * - **Physical Materials**: Advanced PBR materials with clearcoat and reflectivity\n * - **Body Thickness Scaling**: Accurate clothing sizing based on muscle/fat mass\n * - **Archetype Styling**: Unique clothing sets for all 5 player archetypes\n *\n * Clothing is rendered as children of their parent bones, inheriting bone\n * transformations automatically for proper movement during animation.\n * This mirrors the BoneMuscles approach for consistent rendering.\n *\n * **Visual Quality**:\n * - Transmission: 0.05 (minimal light passing through fabric)\n * - Thickness: 0.2 (thin fabric simulation)\n * - IOR: 1.4 (realistic fabric index of refraction)\n * - Clearcoat: 0.3 (surface depth and sheen)\n * - Double-sided rendering for cloth folding\n *\n * **Performance**:\n * - Geometry disposal on unmount (prevents memory leaks)\n * - Material cleanup system\n * - Optimized attachment calculations with useMemo\n *\n * @module components/three/BoneClothing\n * @category 3D Components\n * @korean 뼈부착의류시스템\n */\n\nimport React, { useEffect, useMemo } from \"react\";\nimport * as THREE from \"three\";\nimport {\n  BICEP_RADIUS,\n  CALF_RADIUS,\n  CLOTHING_THICKNESS_FITTED,\n  CORE_RADIUS,\n  FOREARM_RADIUS,\n  PECTORALS_RADIUS,\n  QUAD_RADIUS,\n  calculateClothingRadius,\n} from \"../../../../constants/bodyDimensions\";\nimport { getArchetypeClothing } from \"../../../../data/archetypeClothing\";\nimport type {\n  ClothingItem,\n  ClothingMaterial,\n} from \"../../../../types/clothing\";\nimport type { PlayerArchetype } from \"../../../../types/common\";\nimport {\n  FABRIC_PRESETS,\n  generateFabricTextureSet,\n  type FabricTextureSet,\n} from \"../../../../utils/fabricTextures\";\n\n/**\n * Clothing attachment configuration for a bone\n *\n * Defines how clothing is positioned relative to its parent bone.\n * Position is in local bone space, so clothing moves with the bone.\n *\n * @korean 의류부착설정\n */\nexport interface ClothingAttachment {\n  /** Geometry for this clothing piece */\n  readonly geometry: THREE.BufferGeometry;\n  /** Local position offset from bone origin */\n  readonly localOffset: THREE.Vector3;\n  /** Local rotation relative to bone */\n  readonly localRotation: THREE.Euler;\n  /** Color of the clothing */\n  readonly color: number;\n  /** Emissive color for glow effects */\n  readonly emissiveColor?: number;\n  /** Emissive intensity */\n  readonly emissiveIntensity?: number;\n  /** Metalness for material */\n  readonly metalness?: number;\n  /** Roughness for material */\n  readonly roughness?: number;\n  /** Clothing item ID */\n  readonly itemId: string;\n}\n\n/**\n * Props for BoneClothing component\n */\nexport interface BoneClothingProps {\n  /** Name of the bone this clothing attaches to */\n  readonly boneName: string;\n  /** Player archetype for clothing style */\n  readonly archetype: PlayerArchetype;\n  /** Physical attributes for sizing */\n  readonly physicalAttributes?: {\n    readonly muscleMass: number;\n    readonly fatMass: number;\n    readonly shoulderWidth: number;\n    readonly torsoLength: number;\n    readonly armLength: number;\n    readonly legLength: number;\n  };\n}\n\n/**\n * Calculate body thickness multiplier based on muscle mass and fat mass\n *\n * Uses linear scaling with reasonable limits to prevent \"michelin man\" effect.\n * This matches the BodySurface calculation for consistency.\n *\n * @param muscleMass - Muscle mass in kg\n * @param fatMass - Fat mass in kg\n * @returns Body thickness multiplier (0.75 - 1.20)\n */\nconst calculateBodyThickness = (\n  muscleMass: number,\n  fatMass: number,\n): number => {\n  const referenceMuscle = 35; // Reference: athletic build\n  const referenceFat = 12; // Reference: low body fat\n\n  // Linear scaling with limits (not square root which causes excessive inflation)\n  const muscleRatio = muscleMass / referenceMuscle;\n  const fatRatio = fatMass / referenceFat;\n\n  // Base 0.85, muscle adds up to +0.15, fat adds up to +0.20\n  const muscleContribution = (muscleRatio - 1.0) * 0.15;\n  const fatContribution = (fatRatio - 1.0) * 0.2;\n\n  // Cap at 1.20x maximum to prevent \"michelin man\" effect\n  return Math.max(\n    0.75,\n    Math.min(1.2, 0.85 + muscleContribution + fatContribution),\n  );\n};\n\n/**\n * Get fabric preset based on clothing material type\n */\nconst getFabricPreset = (\n  material: ClothingMaterial,\n): keyof typeof FABRIC_PRESETS => {\n  switch (material) {\n    case \"fabric\":\n      return \"dobok\";\n    case \"tactical\":\n    case \"synthetic\":\n      return \"tactical\";\n    case \"leather\":\n    case \"armored\":\n      return \"leather\";\n    case \"cybernetic\":\n      return \"silk\"; // Shiny synthetic look\n    default:\n      return \"dobok\";\n  }\n};\n\n/**\n * Convert number color to hex string\n */\nconst numberToHex = (color: number): string => {\n  return `#${color.toString(16).padStart(6, \"0\")}`;\n};\n\n/**\n * Get clothing attachments for a specific bone\n */\nconst getClothingForBone = (\n  boneName: string,\n  archetype: PlayerArchetype,\n  physicalAttributes: {\n    muscleMass: number;\n    fatMass: number;\n    shoulderWidth: number;\n    torsoLength: number;\n    armLength: number;\n    legLength: number;\n  },\n): ClothingAttachment[] => {\n  const clothingSet = getArchetypeClothing(archetype);\n  const attachments: ClothingAttachment[] = [];\n\n  const bodyThickness = calculateBodyThickness(\n    physicalAttributes.muscleMass,\n    physicalAttributes.fatMass,\n  );\n\n  // Scaling factors\n  const torsoScale = physicalAttributes.torsoLength / 59;\n  const legScale = physicalAttributes.legLength / 96;\n\n  for (const item of clothingSet.items) {\n    const attachmentsForItem = getAttachmentsForItem(\n      item,\n      boneName,\n      bodyThickness,\n      torsoScale,\n      legScale,\n      physicalAttributes,\n    );\n    attachments.push(...attachmentsForItem);\n  }\n\n  return attachments;\n};\n\n/**\n * Generate clothing attachments for a specific item on a bone\n */\nconst getAttachmentsForItem = (\n  item: ClothingItem,\n  boneName: string,\n  bodyThickness: number,\n  torsoScale: number,\n  legScale: number,\n  physicalAttributes: {\n    shoulderWidth: number;\n    armLength: number;\n    legLength: number;\n  },\n): ClothingAttachment[] => {\n  const fitScaleMap: Record<string, number> = {\n    tight: 1.08,\n    fitted: 1.15,\n    loose: 1.25,\n    oversized: 1.4,\n  };\n  const fitScale = fitScaleMap[item.fit] ?? 1.15;\n  const attachments: ClothingAttachment[] = [];\n\n  switch (item.type) {\n    case \"torso\":\n      // Main torso on spine_middle - wraps fully around body\n      if (boneName === \"spine_middle\") {\n        const height = (59 / 100) * torsoScale * 1.2; // Using base torsoLength\n        // Clothing wraps around the torso using CylinderGeometry (full 360°)\n        const clothingThickness = CLOTHING_THICKNESS_FITTED * fitScale;\n        // Torso radius: average of shoulder width and pectorals depth\n        const torsoRadius =\n          ((physicalAttributes.shoulderWidth / 100) * 0.5 * bodyThickness +\n            PECTORALS_RADIUS * bodyThickness) *\n          0.5;\n        const clothingRadius = calculateClothingRadius(\n          torsoRadius,\n          1.0, // bodyThickness already applied above\n          clothingThickness,\n        );\n        attachments.push({\n          geometry: new THREE.CylinderGeometry(\n            clothingRadius * 0.95, // Slightly narrower at top (chest taper)\n            clothingRadius * 1.05, // Slightly wider at bottom (waist)\n            height,\n            16, // Smooth cylinder\n          ),\n          localOffset: new THREE.Vector3(0, 0, 0), // Centered on bone\n          localRotation: new THREE.Euler(0, 0, 0),\n          color: item.colorPrimary,\n          emissiveColor: item.colorEmissive,\n          emissiveIntensity: item.emissiveIntensity,\n          metalness: item.metalness,\n          roughness: item.roughness,\n          itemId: item.id,\n        });\n      }\n\n      // Sleeves\n      if (boneName === \"upper_arm_L\" || boneName === \"upper_arm_R\") {\n        // Uses centralized BICEP_RADIUS from bodyDimensions\n        // Clothing wraps around muscle, so offset outward\n        const clothingThickness = CLOTHING_THICKNESS_FITTED * fitScale;\n        const clothingRadius = calculateClothingRadius(\n          BICEP_RADIUS,\n          bodyThickness,\n          clothingThickness,\n        );\n        const upperArmLength = (physicalAttributes.armLength / 100) * 0.45;\n        attachments.push({\n          geometry: new THREE.CylinderGeometry(\n            clothingRadius * 1.05, // Slightly larger at top\n            clothingRadius * 0.95, // Tapers slightly\n            upperArmLength,\n            12,\n          ),\n          localOffset: new THREE.Vector3(0, -upperArmLength * 0.4, 0),\n          localRotation: new THREE.Euler(0, 0, 0),\n          color: item.colorPrimary,\n          emissiveColor: item.colorEmissive,\n          emissiveIntensity: item.emissiveIntensity,\n          metalness: item.metalness,\n          roughness: item.roughness,\n          itemId: `${item.id}-sleeve-upper-${boneName}`,\n        });\n      }\n\n      if (boneName === \"forearm_L\" || boneName === \"forearm_R\") {\n        // Uses centralized FOREARM_RADIUS from bodyDimensions\n        // Clothing must be OUTSIDE, so use larger radius\n        const clothingThickness = CLOTHING_THICKNESS_FITTED * fitScale * 0.8;\n        const clothingRadius = calculateClothingRadius(\n          FOREARM_RADIUS,\n          bodyThickness,\n          clothingThickness,\n        );\n        const forearmLength = (physicalAttributes.armLength / 100) * 0.4;\n        attachments.push({\n          geometry: new THREE.CylinderGeometry(\n            clothingRadius * 0.98, // Slightly smaller at top\n            clothingRadius * 0.85, // Tapers toward wrist\n            forearmLength,\n            12,\n          ),\n          localOffset: new THREE.Vector3(0, -forearmLength * 0.4, 0),\n          localRotation: new THREE.Euler(0, 0, 0),\n          color: item.colorPrimary,\n          emissiveColor: item.colorEmissive,\n          emissiveIntensity: item.emissiveIntensity,\n          metalness: item.metalness,\n          roughness: item.roughness,\n          itemId: `${item.id}-sleeve-forearm-${boneName}`,\n        });\n      }\n      break;\n\n    case \"pants\":\n      // Thigh segments\n      if (boneName === \"thigh_L\" || boneName === \"thigh_R\") {\n        // Uses centralized QUAD_RADIUS from bodyDimensions\n        // Clothing wraps around muscle, so offset outward\n        const clothingThickness = CLOTHING_THICKNESS_FITTED * fitScale * 1.3;\n        const clothingRadius = calculateClothingRadius(\n          QUAD_RADIUS,\n          bodyThickness,\n          clothingThickness,\n        );\n        const thighLength =\n          (physicalAttributes.legLength / 100) * legScale * 0.45;\n        attachments.push({\n          geometry: new THREE.CylinderGeometry(\n            clothingRadius * 1.08, // Larger at hip\n            clothingRadius * 0.92, // Tapers toward knee\n            thighLength,\n            16,\n          ),\n          localOffset: new THREE.Vector3(0, -thighLength * 0.4, 0),\n          localRotation: new THREE.Euler(0, 0, 0),\n          color: item.colorPrimary,\n          emissiveColor: item.colorEmissive,\n          emissiveIntensity: item.emissiveIntensity,\n          metalness: item.metalness,\n          roughness: item.roughness,\n          itemId: `${item.id}-thigh-${boneName}`,\n        });\n      }\n\n      // Shin segments\n      if (boneName === \"shin_L\" || boneName === \"shin_R\") {\n        // Uses centralized CALF_RADIUS from bodyDimensions\n        // Clothing must be OUTSIDE, so use larger radius\n        const clothingThickness = CLOTHING_THICKNESS_FITTED * fitScale;\n        const clothingRadius = calculateClothingRadius(\n          CALF_RADIUS,\n          bodyThickness,\n          clothingThickness,\n        );\n        const shinLength =\n          (physicalAttributes.legLength / 100) * legScale * 0.42;\n        attachments.push({\n          geometry: new THREE.CylinderGeometry(\n            clothingRadius * 0.95, // Larger at knee\n            clothingRadius * 0.75, // Tapers toward ankle\n            shinLength,\n            16,\n          ),\n          localOffset: new THREE.Vector3(0, -shinLength * 0.4, 0),\n          localRotation: new THREE.Euler(0, 0, 0),\n          color: item.colorPrimary,\n          emissiveColor: item.colorEmissive,\n          emissiveIntensity: item.emissiveIntensity,\n          metalness: item.metalness,\n          roughness: item.roughness,\n          itemId: `${item.id}-shin-${boneName}`,\n        });\n      }\n      break;\n\n    case \"belt\":\n      if (boneName === \"pelvis\") {\n        // Belt wraps fully around waist using CylinderGeometry\n        const clothingThickness = CLOTHING_THICKNESS_FITTED * fitScale;\n        const waistRadius = CORE_RADIUS * bodyThickness;\n        const beltRadius = calculateClothingRadius(\n          waistRadius,\n          1.0, // bodyThickness already applied\n          clothingThickness + 0.005, // Extra so belt sits outside clothing\n        );\n        attachments.push({\n          geometry: new THREE.CylinderGeometry(\n            beltRadius,\n            beltRadius,\n            0.06, // Belt height\n            16, // Smooth cylinder\n          ),\n          localOffset: new THREE.Vector3(0, 0, 0), // Centered on bone\n          localRotation: new THREE.Euler(0, 0, 0),\n          color: item.colorPrimary,\n          emissiveColor: item.colorEmissive,\n          emissiveIntensity: item.emissiveIntensity,\n          metalness: item.metalness,\n          roughness: item.roughness,\n          itemId: item.id,\n        });\n      }\n      break;\n\n    case \"vest\":\n      if (boneName === \"spine_middle\") {\n        const height = (59 / 100) * 0.75 * torsoScale;\n        // Vest wraps fully around torso using CylinderGeometry\n        const clothingThickness = CLOTHING_THICKNESS_FITTED * fitScale;\n        // Vest sits slightly outside the torso clothing layer\n        const torsoRadius =\n          ((physicalAttributes.shoulderWidth / 100) * 0.5 * bodyThickness +\n            (PECTORALS_RADIUS + 0.01) * bodyThickness) *\n          0.5;\n        const vestRadius = calculateClothingRadius(\n          torsoRadius,\n          1.0, // bodyThickness already applied\n          clothingThickness + 0.008, // Extra gap for layering over shirt\n        );\n        attachments.push({\n          geometry: new THREE.CylinderGeometry(\n            vestRadius * 0.97, // Slightly narrower at top\n            vestRadius * 1.03, // Slightly wider at bottom\n            height,\n            16, // Smooth cylinder\n          ),\n          localOffset: new THREE.Vector3(0, 0, 0), // Centered on bone\n          localRotation: new THREE.Euler(0, 0, 0),\n          color: item.colorPrimary,\n          emissiveColor: item.colorEmissive,\n          emissiveIntensity: item.emissiveIntensity,\n          metalness: item.metalness,\n          roughness: item.roughness,\n          itemId: item.id,\n        });\n      }\n      break;\n  }\n\n  return attachments;\n};\n\n/**\n * BoneClothing Component\n *\n * Renders clothing attached to a specific bone.\n * Clothing inherits bone transformations automatically through the scene graph.\n *\n * @korean 뼈부착의류\n */\nexport const BoneClothing: React.FC<BoneClothingProps> = ({\n  boneName,\n  archetype,\n  physicalAttributes,\n}) => {\n  // Default physical attributes if not provided - memoized to prevent new object on every render\n  const attrs = useMemo(\n    () =>\n      physicalAttributes ?? {\n        muscleMass: 35,\n        fatMass: 12,\n        shoulderWidth: 45,\n        torsoLength: 59,\n        armLength: 62,\n        legLength: 96,\n      },\n    [physicalAttributes],\n  );\n\n  // Get clothing attachments for this bone\n  const attachments = useMemo(\n    () => getClothingForBone(boneName, archetype, attrs),\n    [boneName, archetype, attrs],\n  );\n\n  // Get clothing set for fabric texture generation\n  const clothingSet = useMemo(\n    () => getArchetypeClothing(archetype),\n    [archetype],\n  );\n\n  /**\n   * Generate fabric textures for realistic dobok (도복) rendering\n   *\n   * Creates procedural weave patterns, normal maps, and roughness maps\n   * for enhanced cloth realism without external image assets.\n   *\n   * @korean 직물텍스처생성\n   */\n  const fabricTextures = useMemo(() => {\n    // Generate textures for each unique clothing item\n    const textureMap = new Map<string, FabricTextureSet>();\n\n    for (const item of clothingSet.items) {\n      if (!textureMap.has(item.material)) {\n        const preset = getFabricPreset(item.material);\n        const colorHex = numberToHex(item.colorPrimary);\n        textureMap.set(\n          item.material,\n          generateFabricTextureSet(colorHex, preset),\n        );\n      }\n    }\n\n    return textureMap;\n  }, [clothingSet]);\n\n  // Cleanup fabric textures on unmount\n  useEffect(() => {\n    return () => {\n      fabricTextures.forEach((textureSet) => textureSet.dispose());\n    };\n  }, [fabricTextures]);\n\n  /**\n   * Create materials with advanced physical properties for realistic cloth rendering\n   *\n   * Enhanced with:\n   * - **Fabric textures**: Procedural weave patterns for dobok authenticity\n   * - **Normal maps**: Surface detail for thread texture visibility\n   * - **Roughness maps**: Realistic light scattering on fabric surface\n   * - Subsurface scattering: Light transmission through fabric for realism\n   * - Clearcoat: Surface depth and sheen for material quality\n   * - Double-sided rendering: Proper display when cloth folds\n   * - Physical properties: IOR, reflectivity for authentic appearance\n   *\n   * @korean 향상된물리재료생성\n   */\n  const materials = useMemo(() => {\n    return attachments.map((attachment) => {\n      // Find the clothing item for this attachment to get its material type\n      const clothingItem = clothingSet.items.find((item) =>\n        attachment.itemId.startsWith(item.id),\n      );\n      const materialType = clothingItem?.material ?? \"fabric\";\n      const textureSet = fabricTextures.get(materialType);\n\n      // Create normal scale safely (Vector2 may not be available in test environments)\n      let normalScale: THREE.Vector2 | undefined;\n      try {\n        normalScale = new THREE.Vector2(0.3, 0.3);\n      } catch {\n        normalScale = undefined;\n      }\n\n      const mat = new THREE.MeshPhysicalMaterial({\n        color: attachment.color,\n        // Apply fabric texture maps for realistic dobok appearance\n        map: textureSet?.colorMap ?? null,\n        normalMap: textureSet?.normalMap ?? null,\n        normalScale, // Subtle normal effect\n        roughnessMap: textureSet?.roughnessMap ?? null,\n        emissive: attachment.emissiveColor ?? 0x000000,\n        emissiveIntensity: attachment.emissiveIntensity ?? 0,\n        metalness: attachment.metalness ?? 0.1, // Lower metalness for fabric\n        roughness: attachment.roughness ?? 0.8, // Higher roughness for cloth\n        // Enhanced cloth realism with clearcoat for depth\n        clearcoat: 0.2,\n        clearcoatRoughness: 0.6,\n        // Subsurface scattering for realistic fabric translucency\n        // Subtle effect for cloth materials (not skin)\n        transmission: 0.03, // Minimal light transmission through fabric\n        thickness: 0.15, // Thin fabric thickness\n        ior: 1.4, // Index of refraction for fabric (lower than glass)\n        // Enable proper reflections\n        reflectivity: 0.2,\n        // Double-sided rendering for cloth that may fold\n        side: THREE.DoubleSide,\n        // Improved shading for folds\n        flatShading: false,\n      });\n      return mat;\n    });\n  }, [attachments, clothingSet, fabricTextures]);\n\n  // Cleanup materials on unmount\n  useEffect(() => {\n    return () => {\n      materials.forEach((mat) => mat.dispose());\n    };\n  }, [materials]);\n\n  // Cleanup geometries on unmount\n  useEffect(() => {\n    return () => {\n      attachments.forEach((attachment) => {\n        attachment.geometry.dispose();\n      });\n    };\n  }, [attachments]);\n\n  if (attachments.length === 0) {\n    return null;\n  }\n\n  return (\n    <>\n      {attachments.map((attachment, index) => (\n        <mesh\n          key={attachment.itemId}\n          geometry={attachment.geometry}\n          material={materials[index]}\n          position={attachment.localOffset.toArray()}\n          rotation={[\n            attachment.localRotation.x,\n            attachment.localRotation.y,\n            attachment.localRotation.z,\n          ]}\n          castShadow\n          receiveShadow\n          name={`clothing-${attachment.itemId}`}\n        />\n      ))}\n    </>\n  );\n};\n\nexport default BoneClothing;\n"],"mappings":"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"}

package/lib/components/shared/three/anatomy/BoneRenderer.d.ts

@@ -0,0 +1,129 @@
+/**
+ * BoneRenderer component for visualizing skeletal hierarchy
+ *
+ * Renders bone hierarchy as connected capsule meshes with proper transformations.
+ * Recursively renders parent-child bone relationships for complete skeleton visualization.
+ *
+ * @module components/three/BoneRenderer
+ * @category 3D Components
+ * @korean 뼈렌더러컴포넌트
+ */
+import React from "react";
+import * as THREE from "three";
+import type { PlayerArchetype } from "../../../../types/common";
+import type { FacialDamageState, FacialExpression } from "../../../../types/facial";
+import type { HandAnimationState } from "../../../../types/hand-animation";
+import type { SkeletalRig } from "../../../../types/skeletal";
+/**
+ * Props for BoneRenderer component
+ *
+ * @public
+ * @category Component Props
+ * @korean 뼈렌더러속성
+ */
+export interface BoneRendererProps {
+    /**
+     * Skeletal rig to render
+     * @korean 골격
+     */
+    readonly rig: SkeletalRig;
+    /**
+     * Bone color
+     * @korean 뼈색상
+     */
+    readonly color?: number;
+    /**
+     * Whether to show bones (for debugging)
+     * @korean 뼈표시여부
+     */
+    readonly showBones?: boolean;
+    /**
+     * Render mode: 'solid' for solid meshes, 'debug' for wireframe
+     * @korean 렌더모드
+     */
+    readonly renderMode?: "solid" | "debug";
+    /**
+     * Left hand animation state
+     * @korean 왼손애니메이션상태
+     */
+    readonly leftHandState?: HandAnimationState;
+    /**
+     * Right hand animation state
+     * @korean 오른손애니메이션상태
+     */
+    readonly rightHandState?: HandAnimationState;
+    /**
+     * Distance from camera for LOD
+     * @korean 카메라거리
+     */
+    readonly cameraDistance?: number;
+    /**
+     * Current facial expression
+     * @korean 얼굴표정
+     */
+    readonly facialExpression?: FacialExpression;
+    /**
+     * Facial damage state
+     * @korean 얼굴손상
+     */
+    readonly facialDamage?: FacialDamageState;
+    /**
+     * Opponent position for eye tracking
+     * @korean 상대위치
+     */
+    readonly opponentPosition?: THREE.Vector3;
+    /**
+     * Enable facial expressions rendering
+     * @korean 얼굴표정렌더링
+     */
+    readonly enableFacialExpressions?: boolean;
+    /**
+     * Enable eye tracking
+     * @korean 눈추적활성화
+     */
+    readonly enableEyeTracking?: boolean;
+    /**
+     * Physical attributes for bone thickness scaling
+     * @korean 신체속성
+     */
+    readonly physicalAttributes?: {
+        readonly muscleMass: number;
+        readonly fatMass: number;
+        readonly shoulderWidth?: number;
+        readonly torsoLength?: number;
+        readonly armLength?: number;
+        readonly legLength?: number;
+    };
+    /**
+     * Player archetype for clothing style
+     * @korean 플레이어원형
+     */
+    readonly archetype?: PlayerArchetype;
+    /**
+     * Muscle tension states for bone-attached muscles
+     * Map of muscle group name to tension level (0-1)
+     * @korean 근육상태들
+     */
+    readonly muscleStates?: Map<string, number>;
+    /**
+     * Whether player is exhausted (triggers muscle shaking)
+     * @korean 피로여부
+     */
+    readonly isExhausted?: boolean;
+}
+/**
+ * BoneRenderer component
+ *
+ * Renders complete skeletal rig with recursive bone hierarchy.
+ *
+ * @example
+ * ```tsx
+ * const rig = createHumanoidRig();
+ * <BoneRenderer rig={rig} color={0xFF6B6B} renderMode="solid" />
+ * ```
+ *
+ * @korean 뼈렌더러컴포넌트
+ */
+export declare const BoneRenderer: React.FC<BoneRendererProps>;
+export default BoneRenderer;
+//# sourceMappingURL=BoneRenderer.d.ts.map

package/lib/components/shared/three/anatomy/BoneRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoneRenderer.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/three/anatomy/BoneRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,OAAO,KAA0B,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAEhE,OAAO,KAAK,EACV,iBAAiB,EACjB,gBAAgB,EACjB,MAAM,0BAA0B,CAAC;AAElC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAC3E,OAAO,KAAK,EAAQ,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAQpE;;;;;;GAMG;AACH,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,QAAQ,CAAC,GAAG,EAAE,WAAW,CAAC;IAE1B;;;OAGG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAE7B;;;OAGG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAExC;;;OAGG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,kBAAkB,CAAC;IAE5C;;;OAGG;IACH,QAAQ,CAAC,cAAc,CAAC,EAAE,kBAAkB,CAAC;IAE7C;;;OAGG;IACH,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC;IAEjC;;;OAGG;IACH,QAAQ,CAAC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IAE7C;;;OAGG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,iBAAiB,CAAC;IAE1C;;;OAGG;IACH,QAAQ,CAAC,gBAAgB,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC;IAE1C;;;OAGG;IACH,QAAQ,CAAC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAE3C;;;OAGG;IACH,QAAQ,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAErC;;;OAGG;IACH,QAAQ,CAAC,kBAAkB,CAAC,EAAE;QAC5B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;QAC5B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;QACzB,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC;QAChC,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;QAC9B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;QAC5B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;KAC7B,CAAC;IAEF;;;OAGG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,eAAe,CAAC;IAErC;;;;OAIG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAE5C;;;OAGG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;CAChC;AAsVD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAqDpD,CAAC;AAEF,eAAe,YAAY,CAAC"}