blacktrigram 0.7.2

package/lib/components/shared/three/effects/StanceTransitionEffect.js

@@ -0,0 +1,174 @@
+import { colorUtils } from "../../../../types/constants/colors.js";
+import { FONT_FAMILY } from "../../../../types/constants/typography.js";
+import "../../../../types/constants/index.js";
+import { getStanceColor, getStanceNames } from "../../../../utils/stanceHelpers.js";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useFrame } from "@react-three/fiber";
+import { Html } from "@react-three/drei";
+import * as THREE from "three";
+//#region src/components/shared/three/effects/StanceTransitionEffect.tsx
+/**
+* StanceTransitionEffect - Smooth visual transition between trigram stances
+*
+* Manages the visual transition when a player changes stance, providing:
+* - 0.5s smooth color fade between old and new stance colors
+* - Expanding energy ring effect
+* - Bilingual stance name display (Korean + English) for 1s
+* - Audio synchronization for stance change SFX
+*
+* @module components/three/StanceTransitionEffect
+* @category 3D Components
+* @korean 자세전환효과
+*/
+/**
+* StanceTransitionEffect Component
+*
+* Provides smooth visual feedback during stance changes:
+* 1. Expanding energy ring effect from player center
+* 2. Color interpolation from old to new stance
+* 3. Bilingual stance name overlay (1 second display)
+*
+* Performance optimized:
+* - Single animation frame callback
+* - Auto-cleanup after transition completes
+* - Reuses Three.js materials and geometries
+*
+* @example
+* ```tsx
+* <StanceTransitionEffect
+*   fromStance={TrigramStance.GEON}
+*   toStance={TrigramStance.TAE}
+*   onTransitionComplete={() => console.log('Transition done')}
+*   duration={0.5}
+* />
+* ```
+*/
+var StanceTransitionEffect = ({ fromStance, toStance, onTransitionComplete, duration = .5, showNameOverlay = true }) => {
+	const ringRef = useRef(null);
+	const startTimeRef = useRef(0);
+	const isInitializedRef = useRef(false);
+	const [isTransitioning, setIsTransitioning] = useState(true);
+	const [showName, setShowName] = useState(showNameOverlay);
+	const fromColor = useMemo(() => fromStance ? getStanceColor(fromStance) : getStanceColor(toStance), [fromStance, toStance]);
+	const toColor = useMemo(() => getStanceColor(toStance), [toStance]);
+	const stanceNames = useMemo(() => getStanceNames(toStance), [toStance]);
+	useEffect(() => {
+		isInitializedRef.current = false;
+		startTimeRef.current = 0;
+		setIsTransitioning(true);
+		setShowName(showNameOverlay);
+		if (showNameOverlay) {
+			const nameTimer = setTimeout(() => {
+				setShowName(false);
+			}, 1e3);
+			return () => clearTimeout(nameTimer);
+		}
+	}, [toStance, showNameOverlay]);
+	useFrame((state) => {
+		if (!isTransitioning || !ringRef.current) return;
+		if (!isInitializedRef.current) {
+			startTimeRef.current = state.clock.elapsedTime;
+			isInitializedRef.current = true;
+		}
+		const elapsed = state.clock.elapsedTime - startTimeRef.current;
+		const progress = Math.min(elapsed / duration, 1);
+		const currentColor = colorUtils.blend(fromColor, toColor, progress);
+		ringRef.current.material.color.setHex(currentColor);
+		const scale = .5 + progress * 2.5;
+		ringRef.current.scale.setScalar(scale);
+		const opacity = 1 - progress * .7;
+		ringRef.current.material.opacity = opacity;
+		if (progress >= 1) {
+			setIsTransitioning(false);
+			onTransitionComplete?.();
+		}
+	});
+	const toColorHex = `#${toColor.toString(16).padStart(6, "0")}`;
+	return /* @__PURE__ */ jsxs("group", {
+		name: "stance-transition-effect",
+		children: [/* @__PURE__ */ jsxs("mesh", {
+			ref: ringRef,
+			position: [
+				0,
+				.05,
+				0
+			],
+			rotation: [
+				-Math.PI / 2,
+				0,
+				0
+			],
+			name: "transition-ring",
+			children: [/* @__PURE__ */ jsx("ringGeometry", { args: [
+				.8,
+				1,
+				32
+			] }), /* @__PURE__ */ jsx("meshBasicMaterial", {
+				color: fromColor,
+				transparent: true,
+				opacity: 1,
+				side: THREE.DoubleSide,
+				depthWrite: false,
+				blending: THREE.AdditiveBlending
+			})]
+		}), showName && /* @__PURE__ */ jsxs(Html, {
+			position: [
+				0,
+				2,
+				0
+			],
+			center: true,
+			distanceFactor: 10,
+			style: {
+				pointerEvents: "none",
+				userSelect: "none"
+			},
+			"data-testid": "stance-name-overlay",
+			children: [/* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					flexDirection: "column",
+					alignItems: "center",
+					gap: "4px",
+					padding: "8px 16px",
+					backgroundColor: "rgba(0, 0, 0, 0.7)",
+					borderRadius: "8px",
+					border: `2px solid ${toColorHex}`,
+					boxShadow: `0 0 20px ${toColorHex}`,
+					animation: "fadeInOut 1s ease-in-out"
+				},
+				children: [/* @__PURE__ */ jsx("div", {
+					style: {
+						fontSize: "24px",
+						fontFamily: FONT_FAMILY.KOREAN,
+						color: toColorHex,
+						fontWeight: "bold",
+						textShadow: `0 0 10px ${toColorHex}`
+					},
+					children: stanceNames.korean
+				}), /* @__PURE__ */ jsx("div", {
+					style: {
+						fontSize: "14px",
+						fontFamily: FONT_FAMILY.KOREAN,
+						color: toColorHex,
+						fontWeight: "normal",
+						opacity: .8
+					},
+					children: stanceNames.english
+				})]
+			}), /* @__PURE__ */ jsx("style", { children: `
+              @keyframes fadeInOut {
+                0% { opacity: 0; transform: translateY(10px); }
+                20% { opacity: 1; transform: translateY(0); }
+                80% { opacity: 1; transform: translateY(0); }
+                100% { opacity: 0; transform: translateY(-10px); }
+              }
+            ` })]
+		})]
+	});
+};
+//#endregion
+export { StanceTransitionEffect as default };
+
+//# sourceMappingURL=StanceTransitionEffect.js.map

package/lib/components/shared/three/effects/StanceTransitionEffect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StanceTransitionEffect.js","names":[],"sources":["../../../../../src/components/shared/three/effects/StanceTransitionEffect.tsx"],"sourcesContent":["/**\n * StanceTransitionEffect - Smooth visual transition between trigram stances\n *\n * Manages the visual transition when a player changes stance, providing:\n * - 0.5s smooth color fade between old and new stance colors\n * - Expanding energy ring effect\n * - Bilingual stance name display (Korean + English) for 1s\n * - Audio synchronization for stance change SFX\n *\n * @module components/three/StanceTransitionEffect\n * @category 3D Components\n * @korean 자세전환효과\n */\n\nimport { Html } from \"@react-three/drei\";\nimport { useFrame } from \"@react-three/fiber\";\nimport React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport * as THREE from \"three\";\nimport { TrigramStance } from \"../../../../types/common\";\nimport { FONT_FAMILY } from \"../../../../types/constants\";\nimport { colorUtils } from \"../../../../types/constants/colors\";\nimport {\n  getStanceColor,\n  getStanceNames,\n} from \"../../../../utils/stanceHelpers\";\n\n/**\n * Props for StanceTransitionEffect component\n */\nexport interface StanceTransitionEffectProps {\n  /** Previous stance (for color interpolation) */\n  readonly fromStance: TrigramStance | null;\n  /** New stance being transitioned to */\n  readonly toStance: TrigramStance;\n  /** Callback when transition completes */\n  readonly onTransitionComplete?: () => void;\n  /** Transition duration in seconds (default: 0.5) */\n  readonly duration?: number;\n  /** Show stance name overlay (default: true) */\n  readonly showNameOverlay?: boolean;\n}\n\n/**\n * StanceTransitionEffect Component\n *\n * Provides smooth visual feedback during stance changes:\n * 1. Expanding energy ring effect from player center\n * 2. Color interpolation from old to new stance\n * 3. Bilingual stance name overlay (1 second display)\n *\n * Performance optimized:\n * - Single animation frame callback\n * - Auto-cleanup after transition completes\n * - Reuses Three.js materials and geometries\n *\n * @example\n * ```tsx\n * <StanceTransitionEffect\n *   fromStance={TrigramStance.GEON}\n *   toStance={TrigramStance.TAE}\n *   onTransitionComplete={() => console.log('Transition done')}\n *   duration={0.5}\n * />\n * ```\n */\nexport const StanceTransitionEffect: React.FC<StanceTransitionEffectProps> = ({\n  fromStance,\n  toStance,\n  onTransitionComplete,\n  duration = 0.5,\n  showNameOverlay = true,\n}) => {\n  const ringRef = useRef<THREE.Mesh>(null);\n  const startTimeRef = useRef<number>(0);\n  const isInitializedRef = useRef(false);\n  const [isTransitioning, setIsTransitioning] = useState(true);\n  const [showName, setShowName] = useState(showNameOverlay);\n\n  // Get colors and names\n  const fromColor = useMemo(\n    () => (fromStance ? getStanceColor(fromStance) : getStanceColor(toStance)),\n    [fromStance, toStance]\n  );\n  const toColor = useMemo(() => getStanceColor(toStance), [toStance]);\n  const stanceNames = useMemo(() => getStanceNames(toStance), [toStance]);\n\n  // Handle transitions - external timer effect justifies useEffect\n\n  useEffect(() => {\n    // Reset for new transition\n    isInitializedRef.current = false;\n    startTimeRef.current = 0;\n    // These setState calls are intentional - triggered by prop change, not creating infinite loops\n    setIsTransitioning(true);\n    setShowName(showNameOverlay);\n\n    // External system: timer for name overlay\n    if (showNameOverlay) {\n      const nameTimer = setTimeout(() => {\n        setShowName(false);\n      }, 1000);\n\n      return () => clearTimeout(nameTimer);\n    }\n  }, [toStance, showNameOverlay]);\n\n  // Animation loop\n  useFrame((state) => {\n    if (!isTransitioning || !ringRef.current) return;\n\n    // Initialize start time on first frame for consistency with clock\n    if (!isInitializedRef.current) {\n      startTimeRef.current = state.clock.elapsedTime;\n      isInitializedRef.current = true;\n    }\n\n    const elapsed = state.clock.elapsedTime - startTimeRef.current;\n    const progress = Math.min(elapsed / duration, 1.0);\n\n    // Interpolate color\n    const currentColor = colorUtils.blend(fromColor, toColor, progress);\n    (ringRef.current.material as THREE.MeshBasicMaterial).color.setHex(\n      currentColor\n    );\n\n    // Expand ring outward\n    const scale = 0.5 + progress * 2.5; // From 0.5 to 3.0\n    ringRef.current.scale.setScalar(scale);\n\n    // Fade out as it expands\n    const opacity = 1.0 - progress * 0.7; // From 1.0 to 0.3\n    (ringRef.current.material as THREE.MeshBasicMaterial).opacity = opacity;\n\n    // Complete transition\n    if (progress >= 1.0) {\n      setIsTransitioning(false);\n      onTransitionComplete?.();\n    }\n  });\n\n  // Convert color to hex string for CSS\n  const toColorHex = `#${toColor.toString(16).padStart(6, \"0\")}`;\n\n  return (\n    <group name=\"stance-transition-effect\">\n      {/* Expanding energy ring */}\n      <mesh\n        ref={ringRef}\n        position={[0, 0.05, 0]}\n        rotation={[-Math.PI / 2, 0, 0]}\n        name=\"transition-ring\"\n      >\n        <ringGeometry args={[0.8, 1.0, 32]} />\n        <meshBasicMaterial\n          color={fromColor}\n          transparent\n          opacity={1.0}\n          side={THREE.DoubleSide}\n          depthWrite={false}\n          blending={THREE.AdditiveBlending}\n        />\n      </mesh>\n\n      {/* Stance name overlay (Korean + English) */}\n      {showName && (\n        <Html\n          position={[0, 2.0, 0]}\n          center\n          distanceFactor={10}\n          style={{\n            pointerEvents: \"none\",\n            userSelect: \"none\",\n          }}\n          data-testid=\"stance-name-overlay\"\n        >\n          <div\n            style={{\n              display: \"flex\",\n              flexDirection: \"column\",\n              alignItems: \"center\",\n              gap: \"4px\",\n              padding: \"8px 16px\",\n              backgroundColor: \"rgba(0, 0, 0, 0.7)\",\n              borderRadius: \"8px\",\n              border: `2px solid ${toColorHex}`,\n              boxShadow: `0 0 20px ${toColorHex}`,\n              animation: \"fadeInOut 1s ease-in-out\",\n            }}\n          >\n            {/* Korean name */}\n            <div\n              style={{\n                fontSize: \"24px\",\n                fontFamily: FONT_FAMILY.KOREAN,\n                color: toColorHex,\n                fontWeight: \"bold\",\n                textShadow: `0 0 10px ${toColorHex}`,\n              }}\n            >\n              {stanceNames.korean}\n            </div>\n\n            {/* English name */}\n            <div\n              style={{\n                fontSize: \"14px\",\n                fontFamily: FONT_FAMILY.KOREAN,\n                color: toColorHex,\n                fontWeight: \"normal\",\n                opacity: 0.8,\n              }}\n            >\n              {stanceNames.english}\n            </div>\n          </div>\n\n          {/* CSS animation */}\n          <style>\n            {`\n              @keyframes fadeInOut {\n                0% { opacity: 0; transform: translateY(10px); }\n                20% { opacity: 1; transform: translateY(0); }\n                80% { opacity: 1; transform: translateY(0); }\n                100% { opacity: 0; transform: translateY(-10px); }\n              }\n            `}\n          </style>\n        </Html>\n      )}\n    </group>\n  );\n};\n\nexport default StanceTransitionEffect;\n"],"mappings":"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"}

package/lib/components/shared/three/effects/ThunderEffect3D.d.ts

@@ -0,0 +1,39 @@
+/**
+ * ThunderEffect3D - Lightning and thunder visual effects for Jin trigram
+ *
+ * Provides explosive lightning arcs, electric sparks, and thunder flashes
+ * for Jin (Thunder) stance techniques with Korean cyberpunk aesthetic.
+ *
+ * **Korean Martial Arts Context:**
+ * - 진괘 (Jin): Thunder trigram explosive power visualization
+ * - 번개 (Byeonggae): Lightning effect for charge phase
+ * - 천둥 (Cheondung): Thunder burst for release phase
+ *
+ * @module components/shared/three/effects/ThunderEffect3D
+ * @korean 천둥효과3D
+ */
+import React from "react";
+/**
+ * Props for ThunderEffect3D component
+ */
+export interface ThunderEffect3DProps {
+    /** Position in 3D space [x, y, z] */
+    readonly position: [number, number, number];
+    /** Intensity of the effect (0-1) */
+    readonly intensity?: number;
+    /** Effect type: charge (buildup) or release (burst) */
+    readonly effectType: "charge" | "release";
+    /** Duration in milliseconds */
+    readonly duration?: number;
+    /** Callback when effect completes */
+    readonly onComplete?: () => void;
+    /** Whether effect is active */
+    readonly active?: boolean;
+}
+/**
+ * Main Thunder Effect Component
+ * Displays charge or release effects for Jin trigram techniques
+ */
+export declare const ThunderEffect3D: React.FC<ThunderEffect3DProps>;
+export default ThunderEffect3D;
+//# sourceMappingURL=ThunderEffect3D.d.ts.map

package/lib/components/shared/three/effects/ThunderEffect3D.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThunderEffect3D.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/three/effects/ThunderEffect3D.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAGH,OAAO,KAA+C,MAAM,OAAO,CAAC;AAIpE;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,qCAAqC;IACrC,QAAQ,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5C,oCAAoC;IACpC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,uDAAuD;IACvD,QAAQ,CAAC,UAAU,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC1C,+BAA+B;IAC/B,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,qCAAqC;IACrC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,+BAA+B;IAC/B,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC;CAC3B;AA4UD;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAgD1D,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/shared/three/effects/VitalPointMarkers3D.d.ts

@@ -0,0 +1,48 @@
+/**
+ * VitalPointMarkers3D - 3D vital point visualization
+ *
+ * Renders anatomical vital points (급소) in 3D space around character models
+ * Provides Korean martial arts targeting system visualization
+ * Note: Currently displays points from KOREAN_VITAL_POINTS data (expandable to 70 points)
+ */
+import React from "react";
+import { VitalPointSeverity } from "../../../../types/common";
+/**
+ * Body region filter options
+ */
+export type BodyRegionFilter = "all" | "head" | "torso" | "arms" | "legs";
+/**
+ * Props for the VitalPointMarkers3D component.
+ * Controls visibility and interaction with anatomical targeting points.
+ */
+export interface VitalPointMarkers3DProps {
+    /** 3D world position of the character [x, y, z]. Defaults to [0, 0, 0] */
+    readonly position?: [number, number, number];
+    /** Whether markers are visible. Defaults to true */
+    readonly visible?: boolean;
+    /** Selected vital point ID for highlighting */
+    readonly selectedPoint?: string | null;
+    /** Callback when a vital point is clicked */
+    readonly onPointClick?: (vitalPointId: string) => void;
+    /** Callback when a vital point is hovered */
+    readonly onPointHover?: (vitalPointId: string | null) => void;
+    /** Filter points by severity level */
+    readonly severityFilter?: VitalPointSeverity[];
+    /** Filter points by body region */
+    readonly regionFilter?: BodyRegionFilter;
+    /** Search query to filter points by name */
+    readonly searchQuery?: string;
+    /** Whether to show point labels with Korean names */
+    readonly showLabels?: boolean;
+    /** Scale multiplier for marker size. Defaults to 1.0 */
+    readonly scale?: number;
+    /** Whether to enable pulsing animation. Defaults to true */
+    readonly animated?: boolean;
+}
+/**
+ * VitalPointMarkers3D Component
+ * Renders all vital points as 3D markers around a character
+ */
+export declare const VitalPointMarkers3D: React.FC<VitalPointMarkers3DProps>;
+export default VitalPointMarkers3D;
+//# sourceMappingURL=VitalPointMarkers3D.d.ts.map

package/lib/components/shared/three/effects/VitalPointMarkers3D.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VitalPointMarkers3D.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/three/effects/VitalPointMarkers3D.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,KAAoC,MAAM,OAAO,CAAC;AAIzD,OAAO,EAAY,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAGxE;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AAE1E;;;GAGG;AACH,MAAM,WAAW,wBAAwB;IACvC,0EAA0E;IAC1E,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC7C,oDAAoD;IACpD,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B,+CAA+C;IAC/C,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvC,6CAA6C;IAC7C,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACvD,6CAA6C;IAC7C,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9D,sCAAsC;IACtC,QAAQ,CAAC,cAAc,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC/C,mCAAmC;IACnC,QAAQ,CAAC,YAAY,CAAC,EAAE,gBAAgB,CAAC;IACzC,4CAA4C;IAC5C,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,qDAAqD;IACrD,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAC9B,wDAAwD;IACxD,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,4DAA4D;IAC5D,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC7B;AA0OD;;;GAGG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAgGlE,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/lib/components/shared/three/effects/VitalPointMarkers3D.js

@@ -0,0 +1,249 @@
+import { VitalPointSeverity } from "../../../../types/common.js";
+import { KOREAN_COLORS } from "../../../../types/constants/colors.js";
+import { FONT_FAMILY } from "../../../../types/constants/typography.js";
+import "../../../../types/constants/index.js";
+import KOREAN_VITAL_POINTS from "../../../../systems/vitalpoint/KoreanVitalPoints.js";
+import { useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useFrame } from "@react-three/fiber";
+import { Html } from "@react-three/drei";
+import * as THREE from "three";
+//#region src/components/shared/three/effects/VitalPointMarkers3D.tsx
+/**
+* VitalPointMarkers3D - 3D vital point visualization
+*
+* Renders anatomical vital points (급소) in 3D space around character models
+* Provides Korean martial arts targeting system visualization
+* Note: Currently displays points from KOREAN_VITAL_POINTS data (expandable to 70 points)
+*/
+/**
+* Get color based on vital point severity
+*/
+var getSeverityColor = (severity) => {
+	switch (severity) {
+		case VitalPointSeverity.LETHAL: return KOREAN_COLORS.ACCENT_RED;
+		case VitalPointSeverity.CRITICAL: return KOREAN_COLORS.SECONDARY_MAGENTA;
+		case VitalPointSeverity.MAJOR: return KOREAN_COLORS.ACCENT_GOLD;
+		case VitalPointSeverity.MODERATE: return KOREAN_COLORS.SECONDARY_YELLOW;
+		case VitalPointSeverity.MINOR: return KOREAN_COLORS.ACCENT_CYAN;
+		default: return KOREAN_COLORS.PRIMARY_CYAN;
+	}
+};
+var CHARACTER_CENTER_X = 100;
+var CHARACTER_SPRITE_HEIGHT = 200;
+var CHARACTER_3D_HEIGHT = 2.8;
+var CHARACTER_3D_WIDTH = .8;
+var SPRITE_WIDTH = 100;
+var LABEL_STYLES = {
+	padding: "4px 8px",
+	borderRadius: "4px",
+	fontSize: "10px",
+	subtextSize: "8px",
+	subtextOpacity: .8,
+	borderWidth: "1px"
+};
+/**
+* Convert color number to RGBA hex string
+* @param color - Color as number (e.g., 0xFF0000)
+* @param alpha - Alpha channel as hex string (e.g., "dd" for semi-transparent)
+* @returns RGBA hex string (e.g., "#ff0000dd")
+*/
+var colorToRgbaHex = (color, alpha = "ff") => {
+	return `#${color.toString(16).padStart(6, "0")}${alpha}`;
+};
+/**
+* Convert 2D sprite coordinates to 3D body position
+* Maps vital point pixel coordinates to 3D character model space
+*
+* Input: 2D pixel coordinates where:
+*   - X: ~50-150 (100 = center), positive = right side of character
+*   - Y: 0 = top of head, 200 = feet (y increases downward)
+*
+* Output: 3D world coordinates relative to character position where:
+*   - X: horizontal offset from character center
+*   - Y: height from ground (0 = feet, 2.8 = top)
+*   - Z: depth offset (positive = in front of character)
+*/
+var convert2DTo3D = (pos2D, basePosition) => {
+	const x3D = (pos2D.x - CHARACTER_CENTER_X) / SPRITE_WIDTH * CHARACTER_3D_WIDTH;
+	const y3D = (1 - pos2D.y / CHARACTER_SPRITE_HEIGHT) * CHARACTER_3D_HEIGHT;
+	return [
+		basePosition[0] + x3D,
+		basePosition[1] + y3D,
+		basePosition[2] + .15
+	];
+};
+var VitalPointMarker = ({ vitalPoint, position3D, selected, hovered, showLabel, scale, animated, onHover, onClick }) => {
+	const sphereRef = useRef(null);
+	const ringRef = useRef(null);
+	useFrame((state) => {
+		if (!sphereRef.current || !animated) return;
+		const pulse = Math.sin(state.clock.elapsedTime * 2) * .1 + 1;
+		sphereRef.current.scale.setScalar(pulse * scale);
+		if (ringRef.current && (selected || hovered)) ringRef.current.rotation.z += .05;
+	});
+	const color = useMemo(() => {
+		if (selected) return KOREAN_COLORS.ACCENT_GOLD;
+		if (hovered) return KOREAN_COLORS.PRIMARY_CYAN;
+		return getSeverityColor(vitalPoint.severity);
+	}, [
+		selected,
+		hovered,
+		vitalPoint.severity
+	]);
+	const markerSize = useMemo(() => {
+		const DEFAULT_MARKER_SIZE = .08;
+		switch (vitalPoint.severity) {
+			case VitalPointSeverity.LETHAL:
+			case VitalPointSeverity.CRITICAL: return DEFAULT_MARKER_SIZE * 1.6 * scale;
+			case VitalPointSeverity.MAJOR: return DEFAULT_MARKER_SIZE * 1.3 * scale;
+			case VitalPointSeverity.MODERATE: return DEFAULT_MARKER_SIZE * 1 * scale;
+			case VitalPointSeverity.MINOR: return DEFAULT_MARKER_SIZE * .8 * scale;
+			default: return DEFAULT_MARKER_SIZE * scale;
+		}
+	}, [vitalPoint.severity, scale]);
+	return /* @__PURE__ */ jsxs("group", {
+		position: position3D,
+		children: [
+			/* @__PURE__ */ jsxs("mesh", {
+				ref: sphereRef,
+				onPointerOver: () => onHover(true),
+				onPointerOut: () => onHover(false),
+				onClick: (e) => {
+					e.stopPropagation();
+					onClick();
+				},
+				children: [/* @__PURE__ */ jsx("sphereGeometry", { args: [
+					markerSize,
+					16,
+					16
+				] }), /* @__PURE__ */ jsx("meshStandardMaterial", {
+					color,
+					emissive: color,
+					emissiveIntensity: hovered || selected ? .8 : .4,
+					transparent: true,
+					opacity: hovered || selected ? 1 : .85
+				})]
+			}),
+			(selected || hovered) && /* @__PURE__ */ jsxs("mesh", {
+				ref: ringRef,
+				rotation: [
+					Math.PI / 2,
+					0,
+					0
+				],
+				position: [
+					0,
+					0,
+					0
+				],
+				children: [/* @__PURE__ */ jsx("ringGeometry", { args: [
+					markerSize * 1.5,
+					markerSize * 1.8,
+					32
+				] }), /* @__PURE__ */ jsx("meshBasicMaterial", {
+					color,
+					transparent: true,
+					opacity: .5,
+					side: THREE.DoubleSide
+				})]
+			}),
+			showLabel && (hovered || selected) && /* @__PURE__ */ jsx(Html, {
+				position: [
+					0,
+					markerSize * 2,
+					0
+				],
+				center: true,
+				distanceFactor: 5,
+				style: {
+					pointerEvents: "none",
+					userSelect: "none"
+				},
+				children: /* @__PURE__ */ jsxs("div", {
+					style: {
+						background: colorToRgbaHex(color, "dd"),
+						color: "#ffffff",
+						padding: LABEL_STYLES.padding,
+						borderRadius: LABEL_STYLES.borderRadius,
+						fontSize: LABEL_STYLES.fontSize,
+						fontFamily: FONT_FAMILY.KOREAN,
+						whiteSpace: "nowrap",
+						textAlign: "center",
+						border: `${LABEL_STYLES.borderWidth} solid ${colorToRgbaHex(color)}`
+					},
+					children: [/* @__PURE__ */ jsx("div", { children: vitalPoint.names.korean }), /* @__PURE__ */ jsx("div", {
+						style: {
+							fontSize: LABEL_STYLES.subtextSize,
+							opacity: LABEL_STYLES.subtextOpacity
+						},
+						children: vitalPoint.names.english
+					})]
+				})
+			})
+		]
+	});
+};
+/**
+* VitalPointMarkers3D Component
+* Renders all vital points as 3D markers around a character
+*/
+var VitalPointMarkers3D = ({ position = [
+	0,
+	0,
+	0
+], visible = true, selectedPoint = null, onPointClick, onPointHover, severityFilter, regionFilter = "all", searchQuery = "", showLabels = true, scale = 1, animated = true }) => {
+	const [hoveredPoint, setHoveredPoint] = useState(null);
+	const visiblePoints = useMemo(() => {
+		let points = [...KOREAN_VITAL_POINTS];
+		if (severityFilter && severityFilter.length > 0) points = points.filter((vp) => severityFilter.includes(vp.severity));
+		if (regionFilter !== "all") if (regionFilter === "arms") points = points.filter((vp) => vp.id.startsWith("arm_left_") || vp.id.startsWith("arm_right_"));
+		else if (regionFilter === "legs") points = points.filter((vp) => vp.id.startsWith("leg_left_") || vp.id.startsWith("leg_right_"));
+		else {
+			const prefix = `${regionFilter}_`;
+			points = points.filter((vp) => vp.id.startsWith(prefix));
+		}
+		if (searchQuery) {
+			const query = searchQuery.toLowerCase();
+			points = points.filter((vp) => vp.names.korean.toLowerCase().includes(query) || vp.names.english.toLowerCase().includes(query) || vp.names.romanized.toLowerCase().includes(query) || vp.id.toLowerCase().includes(query));
+		}
+		return points;
+	}, [
+		severityFilter,
+		regionFilter,
+		searchQuery
+	]);
+	const handlePointHover = (vitalPointId, hovered) => {
+		const newHovered = hovered ? vitalPointId : null;
+		setHoveredPoint(newHovered);
+		onPointHover?.(newHovered);
+	};
+	const handlePointClick = (vitalPointId) => {
+		onPointClick?.(vitalPointId);
+	};
+	if (!visible) return null;
+	return /* @__PURE__ */ jsx("group", {
+		position,
+		children: visiblePoints.map((vitalPoint) => {
+			return /* @__PURE__ */ jsx(VitalPointMarker, {
+				vitalPoint,
+				position3D: convert2DTo3D(vitalPoint.position, [
+					0,
+					0,
+					0
+				]),
+				selected: selectedPoint === vitalPoint.id,
+				hovered: hoveredPoint === vitalPoint.id,
+				showLabel: showLabels,
+				scale,
+				animated,
+				onHover: (hovered) => handlePointHover(vitalPoint.id, hovered),
+				onClick: () => handlePointClick(vitalPoint.id)
+			}, vitalPoint.id);
+		})
+	});
+};
+//#endregion
+export { VitalPointMarkers3D as default };
+
+//# sourceMappingURL=VitalPointMarkers3D.js.map

package/lib/components/shared/three/effects/VitalPointMarkers3D.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VitalPointMarkers3D.js","names":[],"sources":["../../../../../src/components/shared/three/effects/VitalPointMarkers3D.tsx"],"sourcesContent":["/**\n * VitalPointMarkers3D - 3D vital point visualization\n *\n * Renders anatomical vital points (급소) in 3D space around character models\n * Provides Korean martial arts targeting system visualization\n * Note: Currently displays points from KOREAN_VITAL_POINTS data (expandable to 70 points)\n */\n\nimport { Html } from \"@react-three/drei\";\nimport { useFrame } from \"@react-three/fiber\";\nimport React, { useMemo, useRef, useState } from \"react\";\nimport * as THREE from \"three\";\nimport { KOREAN_VITAL_POINTS } from \"../../../../systems/vitalpoint/KoreanVitalPoints\";\nimport { VitalPoint } from \"../../../../systems/vitalpoint/types\";\nimport { Position, VitalPointSeverity } from \"../../../../types/common\";\nimport { FONT_FAMILY, KOREAN_COLORS } from \"../../../../types/constants\";\n\n/**\n * Body region filter options\n */\nexport type BodyRegionFilter = \"all\" | \"head\" | \"torso\" | \"arms\" | \"legs\";\n\n/**\n * Props for the VitalPointMarkers3D component.\n * Controls visibility and interaction with anatomical targeting points.\n */\nexport interface VitalPointMarkers3DProps {\n  /** 3D world position of the character [x, y, z]. Defaults to [0, 0, 0] */\n  readonly position?: [number, number, number];\n  /** Whether markers are visible. Defaults to true */\n  readonly visible?: boolean;\n  /** Selected vital point ID for highlighting */\n  readonly selectedPoint?: string | null;\n  /** Callback when a vital point is clicked */\n  readonly onPointClick?: (vitalPointId: string) => void;\n  /** Callback when a vital point is hovered */\n  readonly onPointHover?: (vitalPointId: string | null) => void;\n  /** Filter points by severity level */\n  readonly severityFilter?: VitalPointSeverity[];\n  /** Filter points by body region */\n  readonly regionFilter?: BodyRegionFilter;\n  /** Search query to filter points by name */\n  readonly searchQuery?: string;\n  /** Whether to show point labels with Korean names */\n  readonly showLabels?: boolean;\n  /** Scale multiplier for marker size. Defaults to 1.0 */\n  readonly scale?: number;\n  /** Whether to enable pulsing animation. Defaults to true */\n  readonly animated?: boolean;\n}\n\n/**\n * Get color based on vital point severity\n */\nconst getSeverityColor = (severity: VitalPointSeverity): number => {\n  switch (severity) {\n    case VitalPointSeverity.LETHAL:\n      return KOREAN_COLORS.ACCENT_RED;\n    case VitalPointSeverity.CRITICAL:\n      return KOREAN_COLORS.SECONDARY_MAGENTA;\n    case VitalPointSeverity.MAJOR:\n      return KOREAN_COLORS.ACCENT_GOLD;\n    case VitalPointSeverity.MODERATE:\n      return KOREAN_COLORS.SECONDARY_YELLOW;\n    case VitalPointSeverity.MINOR:\n      return KOREAN_COLORS.ACCENT_CYAN;\n    default:\n      return KOREAN_COLORS.PRIMARY_CYAN;\n  }\n};\n\n// Coordinate conversion constants\n// The vital point data uses pixel coordinates where:\n// - X: ~50-150 range, centered around 100 (character center)\n// - Y: 0 at top of head, ~200 at feet\n// The 3D character is:\n// - X: centered at 0, width ~0.8 units\n// - Y: 0 at feet, ~2.8 at top of head\nconst CHARACTER_CENTER_X = 100; // Pixel center of character sprite\nconst CHARACTER_SPRITE_HEIGHT = 200; // Pixel height of character sprite\nconst CHARACTER_3D_HEIGHT = 2.8; // 3D model height in world units\nconst CHARACTER_3D_WIDTH = 0.8; // Approximate 3D model width\nconst SPRITE_WIDTH = 100; // Half-width of sprite (total ~200 pixels)\n\n// Label styling constants\nconst LABEL_STYLES = {\n  padding: \"4px 8px\",\n  borderRadius: \"4px\",\n  fontSize: \"10px\",\n  subtextSize: \"8px\",\n  subtextOpacity: 0.8,\n  borderWidth: \"1px\",\n} as const;\n\n/**\n * Convert color number to RGBA hex string\n * @param color - Color as number (e.g., 0xFF0000)\n * @param alpha - Alpha channel as hex string (e.g., \"dd\" for semi-transparent)\n * @returns RGBA hex string (e.g., \"#ff0000dd\")\n */\nconst colorToRgbaHex = (color: number, alpha: string = \"ff\"): string => {\n  return `#${color.toString(16).padStart(6, \"0\")}${alpha}`;\n};\n\n/**\n * Convert 2D sprite coordinates to 3D body position\n * Maps vital point pixel coordinates to 3D character model space\n *\n * Input: 2D pixel coordinates where:\n *   - X: ~50-150 (100 = center), positive = right side of character\n *   - Y: 0 = top of head, 200 = feet (y increases downward)\n *\n * Output: 3D world coordinates relative to character position where:\n *   - X: horizontal offset from character center\n *   - Y: height from ground (0 = feet, 2.8 = top)\n *   - Z: depth offset (positive = in front of character)\n */\nconst convert2DTo3D = (\n  pos2D: Position,\n  basePosition: [number, number, number]\n): [number, number, number] => {\n  // Convert X from pixel (100=center) to 3D offset\n  // Map from [50, 150] to [-0.4, 0.4] approximately\n  const normalizedX = (pos2D.x - CHARACTER_CENTER_X) / SPRITE_WIDTH;\n  const x3D = normalizedX * CHARACTER_3D_WIDTH;\n\n  // Convert Y from pixel (0=top, 200=bottom) to 3D height (0=feet, 2.8=head)\n  // Invert Y axis and scale to 3D height\n  const normalizedY = 1 - pos2D.y / CHARACTER_SPRITE_HEIGHT;\n  const y3D = normalizedY * CHARACTER_3D_HEIGHT;\n\n  // Z offset - slight forward position for visibility\n  const z3D = 0.15;\n\n  return [basePosition[0] + x3D, basePosition[1] + y3D, basePosition[2] + z3D];\n};\n\n/**\n * Individual Vital Point Marker Component\n */\ninterface VitalPointMarkerProps {\n  readonly vitalPoint: VitalPoint;\n  readonly position3D: [number, number, number];\n  readonly selected: boolean;\n  readonly hovered: boolean;\n  readonly showLabel: boolean;\n  readonly scale: number;\n  readonly animated: boolean;\n  readonly onHover: (hovered: boolean) => void;\n  readonly onClick: () => void;\n}\n\nconst VitalPointMarker: React.FC<VitalPointMarkerProps> = ({\n  vitalPoint,\n  position3D,\n  selected,\n  hovered,\n  showLabel,\n  scale,\n  animated,\n  onHover,\n  onClick,\n}) => {\n  const sphereRef = useRef<THREE.Mesh>(null);\n  const ringRef = useRef<THREE.Mesh>(null);\n\n  // Animate marker\n  useFrame((state) => {\n    if (!sphereRef.current || !animated) return;\n\n    // Pulsing animation\n    const pulse = Math.sin(state.clock.elapsedTime * 2) * 0.1 + 1;\n    sphereRef.current.scale.setScalar(pulse * scale);\n\n    // Rotate ring for selected/hovered\n    if (ringRef.current && (selected || hovered)) {\n      ringRef.current.rotation.z += 0.05;\n    }\n  });\n\n  const color = useMemo(() => {\n    if (selected) return KOREAN_COLORS.ACCENT_GOLD;\n    if (hovered) return KOREAN_COLORS.PRIMARY_CYAN;\n    return getSeverityColor(vitalPoint.severity);\n  }, [selected, hovered, vitalPoint.severity]);\n\n  const markerSize = useMemo(() => {\n    // Base marker size and severity multipliers\n    // Increased base size for better visibility in combat\n    const DEFAULT_MARKER_SIZE = 0.08;\n\n    switch (vitalPoint.severity) {\n      case VitalPointSeverity.LETHAL:\n      case VitalPointSeverity.CRITICAL:\n        return DEFAULT_MARKER_SIZE * 1.6 * scale; // 0.128\n      case VitalPointSeverity.MAJOR:\n        return DEFAULT_MARKER_SIZE * 1.3 * scale; // 0.104\n      case VitalPointSeverity.MODERATE:\n        return DEFAULT_MARKER_SIZE * 1.0 * scale; // 0.08\n      case VitalPointSeverity.MINOR:\n        return DEFAULT_MARKER_SIZE * 0.8 * scale; // 0.064\n      default:\n        return DEFAULT_MARKER_SIZE * scale;\n    }\n  }, [vitalPoint.severity, scale]);\n\n  return (\n    <group position={position3D}>\n      {/* Main sphere marker */}\n      <mesh\n        ref={sphereRef}\n        onPointerOver={() => onHover(true)}\n        onPointerOut={() => onHover(false)}\n        onClick={(e) => {\n          e.stopPropagation();\n          onClick();\n        }}\n      >\n        <sphereGeometry args={[markerSize, 16, 16]} />\n        <meshStandardMaterial\n          color={color}\n          emissive={color}\n          emissiveIntensity={hovered || selected ? 0.8 : 0.4}\n          transparent\n          opacity={hovered || selected ? 1.0 : 0.85}\n        />\n      </mesh>\n\n      {/* Outer ring for selected/hovered */}\n      {(selected || hovered) && (\n        <mesh ref={ringRef} rotation={[Math.PI / 2, 0, 0]} position={[0, 0, 0]}>\n          <ringGeometry args={[markerSize * 1.5, markerSize * 1.8, 32]} />\n          <meshBasicMaterial\n            color={color}\n            transparent\n            opacity={0.5}\n            side={THREE.DoubleSide}\n          />\n        </mesh>\n      )}\n\n      {/* Label overlay */}\n      {showLabel && (hovered || selected) && (\n        <Html\n          position={[0, markerSize * 2, 0]}\n          center\n          distanceFactor={5}\n          style={{\n            pointerEvents: \"none\",\n            userSelect: \"none\",\n          }}\n        >\n          <div\n            style={{\n              background: colorToRgbaHex(color, \"dd\"),\n              color: \"#ffffff\",\n              padding: LABEL_STYLES.padding,\n              borderRadius: LABEL_STYLES.borderRadius,\n              fontSize: LABEL_STYLES.fontSize,\n              fontFamily: FONT_FAMILY.KOREAN,\n              whiteSpace: \"nowrap\",\n              textAlign: \"center\",\n              border: `${LABEL_STYLES.borderWidth} solid ${colorToRgbaHex(\n                color\n              )}`,\n            }}\n          >\n            <div>{vitalPoint.names.korean}</div>\n            <div\n              style={{\n                fontSize: LABEL_STYLES.subtextSize,\n                opacity: LABEL_STYLES.subtextOpacity,\n              }}\n            >\n              {vitalPoint.names.english}\n            </div>\n          </div>\n        </Html>\n      )}\n    </group>\n  );\n};\n\n/**\n * VitalPointMarkers3D Component\n * Renders all vital points as 3D markers around a character\n */\nexport const VitalPointMarkers3D: React.FC<VitalPointMarkers3DProps> = ({\n  position = [0, 0, 0],\n  visible = true,\n  selectedPoint = null,\n  onPointClick,\n  onPointHover,\n  severityFilter,\n  regionFilter = \"all\",\n  searchQuery = \"\",\n  showLabels = true,\n  scale = 1.0,\n  animated = true,\n}) => {\n  const [hoveredPoint, setHoveredPoint] = useState<string | null>(null);\n\n  // Filter vital points based on severity, region, and search\n  const visiblePoints = useMemo(() => {\n    let points = [...KOREAN_VITAL_POINTS];\n\n    // Filter by severity\n    if (severityFilter && severityFilter.length > 0) {\n      points = points.filter((vp) => severityFilter.includes(vp.severity));\n    }\n\n    // Filter by region\n    if (regionFilter !== \"all\") {\n      if (regionFilter === \"arms\") {\n        // Match both left and right arm vital points\n        points = points.filter(\n          (vp) =>\n            vp.id.startsWith(\"arm_left_\") || vp.id.startsWith(\"arm_right_\")\n        );\n      } else if (regionFilter === \"legs\") {\n        // Match both left and right leg vital points\n        points = points.filter(\n          (vp) =>\n            vp.id.startsWith(\"leg_left_\") || vp.id.startsWith(\"leg_right_\")\n        );\n      } else {\n        // Simple prefix match for head_ or torso_\n        const prefix = `${regionFilter}_`;\n        points = points.filter((vp) => vp.id.startsWith(prefix));\n      }\n    }\n\n    // Filter by search query\n    if (searchQuery) {\n      const query = searchQuery.toLowerCase();\n      points = points.filter(\n        (vp) =>\n          vp.names.korean.toLowerCase().includes(query) ||\n          vp.names.english.toLowerCase().includes(query) ||\n          vp.names.romanized.toLowerCase().includes(query) ||\n          vp.id.toLowerCase().includes(query)\n      );\n    }\n\n    return points;\n  }, [severityFilter, regionFilter, searchQuery]);\n\n  // Handle point hover\n  const handlePointHover = (vitalPointId: string, hovered: boolean) => {\n    const newHovered = hovered ? vitalPointId : null;\n    setHoveredPoint(newHovered);\n    onPointHover?.(newHovered);\n  };\n\n  // Handle point click\n  const handlePointClick = (vitalPointId: string) => {\n    onPointClick?.(vitalPointId);\n  };\n\n  if (!visible) return null;\n\n  return (\n    <group position={position}>\n      {visiblePoints.map((vitalPoint) => {\n        const position3D = convert2DTo3D(vitalPoint.position, [0, 0, 0]);\n\n        return (\n          <VitalPointMarker\n            key={vitalPoint.id}\n            vitalPoint={vitalPoint}\n            position3D={position3D}\n            selected={selectedPoint === vitalPoint.id}\n            hovered={hoveredPoint === vitalPoint.id}\n            showLabel={showLabels}\n            scale={scale}\n            animated={animated}\n            onHover={(hovered) => handlePointHover(vitalPoint.id, hovered)}\n            onClick={() => handlePointClick(vitalPoint.id)}\n          />\n        );\n      })}\n    </group>\n  );\n};\n\nexport default VitalPointMarkers3D;\n"],"mappings":"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"}

package/lib/components/shared/three/index.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Barrel exports for shared/three module
+ *
+ * Only re-exports symbols that are actually consumed through this barrel.
+ * Components used via direct imports (e.g., from "./effects/DamageNumbers")
+ * are NOT re-exported here to avoid dead code.
+ *
+ * @module components/shared/three
+ * @korean 공유3D컴포넌트
+ */
+export { KoreanButton } from "./ui/KoreanButton";
+export type { KoreanButtonProps } from "./ui/KoreanButton";
+export { KoreanPanel } from "./ui/KoreanPanel";
+export type { KoreanPanelProps } from "./ui/KoreanPanel";
+export { KoreanText } from "./ui/KoreanText";
+export type { KoreanTextProps } from "./ui/KoreanText";
+export { MenuList } from "./ui/MenuList";
+export type { MenuItem, MenuListProps } from "./ui/MenuList";
+export { ArchetypeCard } from "./ui/ArchetypeCard";
+export type { ArchetypeCardProps } from "./ui/ArchetypeCard";
+export { ProgressBar } from "./ui/ProgressBar";
+export type { ProgressBarProps, ProgressBarType } from "./ui/ProgressBar";
+export type { BodyRegionFilter } from "./ui/VitalPointOverlayControlsHtml";
+export { default as VitalPointMarkers3D } from "./effects/VitalPointMarkers3D";
+export type { VitalPointMarkers3DProps } from "./effects/VitalPointMarkers3D";
+export { Player3DWithTransitions } from "./models/Player3DWithTransitions";
+export type { Player3DWithTransitionsProps } from "./models/Player3DWithTransitions";
+export { BackgroundScene3D } from "./scene/BackgroundScene3D";
+export type { BackgroundScene3DProps } from "./scene/BackgroundScene3D";
+//# sourceMappingURL=index.d.ts.map

package/lib/components/shared/three/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/three/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,YAAY,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,YAAY,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,YAAY,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAEvD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE7D,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,YAAY,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAE7D,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAG1E,YAAY,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AAG3E,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AAC/E,YAAY,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAG9E,OAAO,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAC3E,YAAY,EAAE,4BAA4B,EAAE,MAAM,kCAAkC,CAAC;AAGrF,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,YAAY,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC"}

package/lib/components/shared/three/index.js

@@ -0,0 +1,9 @@
+import "./effects/VitalPointMarkers3D.js";
+import "./models/Player3DWithTransitions.js";
+import "./ui/KoreanButton.js";
+import "./ui/KoreanPanel.js";
+import "./ui/KoreanText.js";
+import "./ui/MenuList.js";
+import "./ui/ArchetypeCard.js";
+import "./ui/ProgressBar.js";
+import "./scene/BackgroundScene3D.js";