blacktrigram 0.7.2

package/lib/components/shared/mobile/ActionButtons.js

@@ -0,0 +1,324 @@
+import { KOREAN_COLORS } from "../../../types/constants/colors.js";
+import "../../../types/constants/index.js";
+import { getColorRGB } from "../../../utils/colorHelpers.js";
+import { createBilingualLabel } from "../../../types/AccessibilityTypes.js";
+import { getFocusStyle, handleKeyboardNav } from "../../../utils/accessibility.js";
+import useThrottle from "../../../hooks/useThrottle.js";
+import { triggerOptimizedHaptic } from "./HapticController.js";
+import { applyOptimizedUpdate, createFilterStyle, createTransformStyle } from "./TouchOptimizer.js";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Html } from "@react-three/drei";
+//#region src/components/shared/mobile/ActionButtons.tsx
+/**
+* ActionButtons Component
+*
+* Touch-optimized action buttons for combat (Attack and Block)
+* Provides tactile combat controls with visual feedback and haptic response
+*
+* WCAG 2.1 Level AA Compliance:
+* - ARIA labels for screen readers
+* - Keyboard navigation (Enter, Space)
+* - Visible focus indicators (2px cyan border)
+* - 80x80px and 70x70px touch targets (exceeds 44x44px minimum)
+*
+* @module components/mobile/ActionButtons
+* @category Mobile Controls
+* @korean 액션 버튼
+*/
+/**
+* ActionButtons Component
+*
+* Provides two primary combat action buttons:
+* - Attack Button (⚡): Primary combat action, 80x80px
+* - Block Button (🛡️): Defensive action, 70x70px
+*
+* Features:
+* - Touch-optimized with minimum 44x44px targets
+* - Attack button: 80x80px for primary action
+* - Block button: 70x70px for secondary action
+* - Visual feedback on press
+* - Haptic feedback for tactile response
+* - Korean cyberpunk theming
+* - Hold-to-block support
+*
+* Usage in Combat:
+* - Attack: Executes current stance technique
+* - Block: Activates defensive guard (hold for sustained block)
+*
+* @example
+* ```tsx
+* <ActionButtons
+*   onAttack={() => executeTechnique()}
+*   onBlock={(eventType) => {
+*     if (eventType === 'start') {
+*       activateBlock();
+*     } else {
+*       deactivateBlock();
+*     }
+*   }}
+*   disabled={isPaused}
+* />
+* ```
+*
+* @public
+* @korean 액션버튼
+*/
+var ActionButtonsComponent = ({ onAttack, onBlock, disabled = false, bottom = 34, right = 20, opacity = .8 }) => {
+	const [attackPressed, setAttackPressed] = useState(false);
+	const [blockPressed, setBlockPressed] = useState(false);
+	const [attackFocused, setAttackFocused] = useState(false);
+	const [blockFocused, setBlockFocused] = useState(false);
+	const attackButtonRef = useRef(null);
+	const blockButtonRef = useRef(null);
+	const throttledOnAttack = useThrottle(onAttack, 16);
+	const throttledOnBlock = useThrottle(onBlock, 16);
+	/**
+	* Handle attack button press with optimized latency (<16ms)
+	* Uses direct DOM manipulation for immediate visual feedback
+	*/
+	const handleAttackStart = useCallback((e) => {
+		if (disabled) return;
+		e.preventDefault();
+		e.stopPropagation();
+		applyOptimizedUpdate(attackButtonRef.current, (element) => {
+			element.style.transform = createTransformStyle(true, .95);
+			element.style.filter = createFilterStyle(true, 1.2);
+		}, () => {
+			setAttackPressed(true);
+			throttledOnAttack();
+			triggerOptimizedHaptic("medium");
+		});
+	}, [disabled, throttledOnAttack]);
+	/**
+	* Handle attack button release with optimized latency
+	*/
+	const handleAttackEnd = useCallback((e) => {
+		if (disabled) return;
+		e.preventDefault();
+		e.stopPropagation();
+		applyOptimizedUpdate(attackButtonRef.current, (element) => {
+			element.style.transform = createTransformStyle(false);
+			element.style.filter = createFilterStyle(false);
+		}, () => {
+			setAttackPressed(false);
+		});
+	}, [disabled]);
+	/**
+	* Handle block button press with optimized latency (<16ms)
+	*/
+	const handleBlockStart = useCallback((e) => {
+		if (disabled) return;
+		e.preventDefault();
+		e.stopPropagation();
+		applyOptimizedUpdate(blockButtonRef.current, (element) => {
+			element.style.transform = createTransformStyle(true, .95);
+			element.style.filter = createFilterStyle(true, 1.2);
+		}, () => {
+			setBlockPressed(true);
+			throttledOnBlock("start");
+			triggerOptimizedHaptic("light");
+		});
+	}, [disabled, throttledOnBlock]);
+	/**
+	* Handle block button release with optimized latency
+	*/
+	const handleBlockEnd = useCallback((e) => {
+		if (disabled) return;
+		e.preventDefault();
+		e.stopPropagation();
+		applyOptimizedUpdate(blockButtonRef.current, (element) => {
+			element.style.transform = createTransformStyle(false);
+			element.style.filter = createFilterStyle(false);
+		}, () => {
+			setBlockPressed(false);
+			throttledOnBlock("end");
+		});
+	}, [disabled, throttledOnBlock]);
+	/**
+	* Cleanup on unmount - reset any pending visual states.
+	* Note: Captures button refs at effect creation time to avoid stale closures.
+	* If the buttons unmount before cleanup runs, the captured variables will still
+	* reference the original DOM elements (now potentially detached), so style changes
+	* are harmless but may not be visible. The null checks primarily guard against
+	* refs that were never set in the first place.
+	*/
+	useEffect(() => {
+		const attackButton = attackButtonRef.current;
+		const blockButton = blockButtonRef.current;
+		return () => {
+			if (attackButton) {
+				attackButton.style.transform = createTransformStyle(false);
+				attackButton.style.filter = createFilterStyle(false);
+			}
+			if (blockButton) {
+				blockButton.style.transform = createTransformStyle(false);
+				blockButton.style.filter = createFilterStyle(false);
+			}
+		};
+	}, []);
+	/**
+	* Handle keyboard navigation for attack button
+	*/
+	const handleAttackKeyDown = useCallback((e) => {
+		if (disabled) return;
+		handleKeyboardNav(e.nativeEvent, { onActivate: () => {
+			setAttackPressed(true);
+			onAttack();
+			triggerOptimizedHaptic("medium");
+			setTimeout(() => setAttackPressed(false), 150);
+		} });
+	}, [disabled, onAttack]);
+	/**
+	* Handle keyboard navigation for block button
+	*/
+	const handleBlockKeyDown = useCallback((e) => {
+		if (disabled) return;
+		handleKeyboardNav(e.nativeEvent, { onActivate: () => {
+			setBlockPressed(true);
+			onBlock("start");
+			triggerOptimizedHaptic("light");
+			setTimeout(() => {
+				setBlockPressed(false);
+				onBlock("end");
+			}, 150);
+		} });
+	}, [disabled, onBlock]);
+	const colors = useMemo(() => ({
+		gold: getColorRGB(KOREAN_COLORS.ACCENT_GOLD),
+		blue: getColorRGB(KOREAN_COLORS.ACCENT_BLUE),
+		primary: getColorRGB(KOREAN_COLORS.PRIMARY_CYAN)
+	}), []);
+	return /* @__PURE__ */ jsx(Html, {
+		fullscreen: true,
+		children: /* @__PURE__ */ jsxs("div", {
+			style: {
+				position: "absolute",
+				bottom: `${bottom}px`,
+				right: `${right}px`,
+				display: "flex",
+				flexDirection: "column",
+				gap: "10px",
+				opacity: disabled ? .3 : opacity,
+				pointerEvents: disabled ? "none" : "auto"
+			},
+			"data-testid": "action-buttons",
+			children: [
+				/* @__PURE__ */ jsx("button", {
+					ref: attackButtonRef,
+					onTouchStart: handleAttackStart,
+					onTouchEnd: handleAttackEnd,
+					onMouseDown: handleAttackStart,
+					onMouseUp: handleAttackEnd,
+					onMouseLeave: handleAttackEnd,
+					onKeyDown: handleAttackKeyDown,
+					onFocus: () => setAttackFocused(true),
+					onBlur: () => setAttackFocused(false),
+					style: {
+						width: "80px",
+						height: "80px",
+						borderRadius: "50%",
+						background: attackPressed ? `rgba(${colors.gold.r}, ${colors.gold.g}, ${colors.gold.b}, 1)` : `rgba(${colors.gold.r}, ${colors.gold.g}, ${colors.gold.b}, 0.9)`,
+						border: "3px solid #fff",
+						fontSize: "28px",
+						color: "#000",
+						fontWeight: "bold",
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "center",
+						cursor: "pointer",
+						userSelect: "none",
+						touchAction: "none",
+						transition: "transform 0.1s ease-out, filter 0.1s ease-out",
+						transform: createTransformStyle(attackPressed, .95),
+						filter: createFilterStyle(attackPressed, 1.2),
+						willChange: "transform, filter",
+						boxShadow: attackPressed ? `0 0 25px rgba(${colors.gold.r}, ${colors.gold.g}, ${colors.gold.b}, 1), inset 0 4px 8px rgba(0, 0, 0, 0.3)` : `0 4px 12px rgba(0, 0, 0, 0.5), 0 0 15px rgba(${colors.gold.r}, ${colors.gold.g}, ${colors.gold.b}, 0.6)`,
+						...getFocusStyle(attackFocused, {
+							outlineWidth: 3,
+							boxShadow: `0 0 0 4px rgba(${colors.primary.r}, ${colors.primary.g}, ${colors.primary.b}, 0.5), 0 0 25px rgba(${colors.gold.r}, ${colors.gold.g}, ${colors.gold.b}, 1)`
+						})
+					},
+					disabled,
+					"aria-label": createBilingualLabel("공격", "Attack").label,
+					"aria-pressed": attackPressed,
+					role: "button",
+					tabIndex: disabled ? -1 : 0,
+					"data-testid": "attack-button",
+					children: "⚡"
+				}),
+				/* @__PURE__ */ jsx("button", {
+					ref: blockButtonRef,
+					onTouchStart: handleBlockStart,
+					onTouchEnd: handleBlockEnd,
+					onMouseDown: handleBlockStart,
+					onMouseUp: handleBlockEnd,
+					onMouseLeave: handleBlockEnd,
+					onKeyDown: handleBlockKeyDown,
+					onFocus: () => setBlockFocused(true),
+					onBlur: () => setBlockFocused(false),
+					style: {
+						width: "70px",
+						height: "70px",
+						borderRadius: "50%",
+						background: blockPressed ? `rgba(${colors.blue.r}, ${colors.blue.g}, ${colors.blue.b}, 1)` : `rgba(${colors.blue.r}, ${colors.blue.g}, ${colors.blue.b}, 0.9)`,
+						border: "2px solid #fff",
+						fontSize: "24px",
+						color: "#fff",
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "center",
+						cursor: "pointer",
+						userSelect: "none",
+						touchAction: "none",
+						transition: "transform 0.1s ease-out, filter 0.1s ease-out",
+						transform: createTransformStyle(blockPressed, .95),
+						filter: createFilterStyle(blockPressed, 1.2),
+						willChange: "transform, filter",
+						boxShadow: blockPressed ? `0 0 20px rgba(${colors.blue.r}, ${colors.blue.g}, ${colors.blue.b}, 1), inset 0 4px 8px rgba(0, 0, 0, 0.3)` : `0 4px 10px rgba(0, 0, 0, 0.5), 0 0 12px rgba(${colors.blue.r}, ${colors.blue.g}, ${colors.blue.b}, 0.6)`,
+						...getFocusStyle(blockFocused, {
+							outlineWidth: 3,
+							boxShadow: `0 0 0 4px rgba(${colors.primary.r}, ${colors.primary.g}, ${colors.primary.b}, 0.5), 0 0 20px rgba(${colors.blue.r}, ${colors.blue.g}, ${colors.blue.b}, 1)`
+						})
+					},
+					disabled,
+					"aria-label": createBilingualLabel("방어", "Block").label,
+					"aria-pressed": blockPressed,
+					role: "button",
+					tabIndex: disabled ? -1 : 0,
+					"data-testid": "block-button",
+					children: "🛡️"
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						flexDirection: "column",
+						gap: "2px",
+						alignItems: "center",
+						fontSize: "10px",
+						color: `rgba(${colors.primary.r}, ${colors.primary.g}, ${colors.primary.b}, 0.9)`,
+						textShadow: "0 1px 3px rgba(0, 0, 0, 0.8)",
+						fontWeight: "bold",
+						marginTop: "4px"
+					},
+					children: [/* @__PURE__ */ jsx("span", { children: "공격 | Attack" }), /* @__PURE__ */ jsx("span", {
+						style: { fontSize: "9px" },
+						children: "방어 | Block"
+					})]
+				})
+			]
+		})
+	});
+};
+/**
+* Memoized ActionButtons with custom comparison
+* Only re-renders when props change
+*/
+var ActionButtons = React.memo(ActionButtonsComponent, (prevProps, nextProps) => {
+	return prevProps.disabled === nextProps.disabled && prevProps.bottom === nextProps.bottom && prevProps.right === nextProps.right && prevProps.opacity === nextProps.opacity && prevProps.onAttack === nextProps.onAttack && prevProps.onBlock === nextProps.onBlock;
+});
+ActionButtons.displayName = "ActionButtons";
+//#endregion
+export { ActionButtons };
+
+//# sourceMappingURL=ActionButtons.js.map

package/lib/components/shared/mobile/ActionButtons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionButtons.js","names":[],"sources":["../../../../src/components/shared/mobile/ActionButtons.tsx"],"sourcesContent":["/**\n * ActionButtons Component\n *\n * Touch-optimized action buttons for combat (Attack and Block)\n * Provides tactile combat controls with visual feedback and haptic response\n *\n * WCAG 2.1 Level AA Compliance:\n * - ARIA labels for screen readers\n * - Keyboard navigation (Enter, Space)\n * - Visible focus indicators (2px cyan border)\n * - 80x80px and 70x70px touch targets (exceeds 44x44px minimum)\n *\n * @module components/mobile/ActionButtons\n * @category Mobile Controls\n * @korean 액션 버튼\n */\n\nimport { Html } from \"@react-three/drei\";\nimport React, {\n  useCallback,\n  useState,\n  useMemo,\n  useRef,\n  useEffect,\n} from \"react\";\nimport { KOREAN_COLORS } from \"@/types/constants\";\nimport { triggerOptimizedHaptic } from \"./HapticController\";\nimport {\n  applyOptimizedUpdate,\n  createTransformStyle,\n  createFilterStyle,\n} from \"./TouchOptimizer\";\nimport { getColorRGB } from \"../../../utils/colorHelpers\";\nimport { handleKeyboardNav, getFocusStyle } from \"../../../utils/accessibility\";\nimport { createBilingualLabel } from \"../../../types/AccessibilityTypes\";\nimport { useThrottle } from \"../../../hooks/useThrottle\";\n\n/**\n * Event type for button interactions\n */\nexport type ButtonEventType = \"start\" | \"end\";\n\n/**\n * Props for ActionButtons component\n */\nexport interface ActionButtonsProps {\n  /** Callback when attack button is pressed */\n  readonly onAttack: () => void;\n  /** Callback when block button is pressed/released */\n  readonly onBlock: (eventType: ButtonEventType) => void;\n  /** Whether buttons are disabled */\n  readonly disabled?: boolean;\n  /** Position from bottom in pixels (default: 34 for safe area) */\n  readonly bottom?: number;\n  /** Position from right in pixels (default: 20) */\n  readonly right?: number;\n  /** Opacity of buttons (default: 0.8) */\n  readonly opacity?: number;\n}\n\n/**\n * ActionButtons Component\n *\n * Provides two primary combat action buttons:\n * - Attack Button (⚡): Primary combat action, 80x80px\n * - Block Button (🛡️): Defensive action, 70x70px\n *\n * Features:\n * - Touch-optimized with minimum 44x44px targets\n * - Attack button: 80x80px for primary action\n * - Block button: 70x70px for secondary action\n * - Visual feedback on press\n * - Haptic feedback for tactile response\n * - Korean cyberpunk theming\n * - Hold-to-block support\n *\n * Usage in Combat:\n * - Attack: Executes current stance technique\n * - Block: Activates defensive guard (hold for sustained block)\n *\n * @example\n * ```tsx\n * <ActionButtons\n *   onAttack={() => executeTechnique()}\n *   onBlock={(eventType) => {\n *     if (eventType === 'start') {\n *       activateBlock();\n *     } else {\n *       deactivateBlock();\n *     }\n *   }}\n *   disabled={isPaused}\n * />\n * ```\n *\n * @public\n * @korean 액션버튼\n */\nconst ActionButtonsComponent: React.FC<ActionButtonsProps> = ({\n  onAttack,\n  onBlock,\n  disabled = false,\n  bottom = 34,\n  right = 20,\n  opacity = 0.8,\n}) => {\n  const [attackPressed, setAttackPressed] = useState(false);\n  const [blockPressed, setBlockPressed] = useState(false);\n  const [attackFocused, setAttackFocused] = useState(false);\n  const [blockFocused, setBlockFocused] = useState(false);\n\n  // Button refs for direct DOM manipulation (immediate visual feedback)\n  const attackButtonRef = useRef<HTMLButtonElement>(null);\n  const blockButtonRef = useRef<HTMLButtonElement>(null);\n\n  // Throttle callbacks to ~60fps for performance\n  const throttledOnAttack = useThrottle(onAttack, 16);\n  const throttledOnBlock = useThrottle(onBlock, 16);\n\n  /**\n   * Handle attack button press with optimized latency (<16ms)\n   * Uses direct DOM manipulation for immediate visual feedback\n   */\n  const handleAttackStart = useCallback(\n    (e: React.TouchEvent | React.MouseEvent) => {\n      if (disabled) return;\n      e.preventDefault();\n      e.stopPropagation();\n\n      // Immediate visual update using optimized approach (<16ms)\n      applyOptimizedUpdate(\n        attackButtonRef.current,\n        (element) => {\n          // GPU-accelerated transform\n          element.style.transform = createTransformStyle(true, 0.95);\n          element.style.filter = createFilterStyle(true, 1.2);\n        },\n        () => {\n          // Deferred state update\n          setAttackPressed(true);\n          throttledOnAttack();\n          triggerOptimizedHaptic(\"medium\");\n        },\n      );\n    },\n    [disabled, throttledOnAttack],\n  );\n\n  /**\n   * Handle attack button release with optimized latency\n   */\n  const handleAttackEnd = useCallback(\n    (e: React.TouchEvent | React.MouseEvent) => {\n      if (disabled) return;\n      e.preventDefault();\n      e.stopPropagation();\n\n      // Immediate visual reset\n      applyOptimizedUpdate(\n        attackButtonRef.current,\n        (element) => {\n          element.style.transform = createTransformStyle(false);\n          element.style.filter = createFilterStyle(false);\n        },\n        () => {\n          setAttackPressed(false);\n        },\n      );\n    },\n    [disabled],\n  );\n\n  /**\n   * Handle block button press with optimized latency (<16ms)\n   */\n  const handleBlockStart = useCallback(\n    (e: React.TouchEvent | React.MouseEvent) => {\n      if (disabled) return;\n      e.preventDefault();\n      e.stopPropagation();\n\n      // Immediate visual update\n      applyOptimizedUpdate(\n        blockButtonRef.current,\n        (element) => {\n          element.style.transform = createTransformStyle(true, 0.95);\n          element.style.filter = createFilterStyle(true, 1.2);\n        },\n        () => {\n          setBlockPressed(true);\n          throttledOnBlock(\"start\");\n          triggerOptimizedHaptic(\"light\");\n        },\n      );\n    },\n    [disabled, throttledOnBlock],\n  );\n\n  /**\n   * Handle block button release with optimized latency\n   */\n  const handleBlockEnd = useCallback(\n    (e: React.TouchEvent | React.MouseEvent) => {\n      if (disabled) return;\n      e.preventDefault();\n      e.stopPropagation();\n\n      // Immediate visual reset\n      applyOptimizedUpdate(\n        blockButtonRef.current,\n        (element) => {\n          element.style.transform = createTransformStyle(false);\n          element.style.filter = createFilterStyle(false);\n        },\n        () => {\n          setBlockPressed(false);\n          throttledOnBlock(\"end\");\n        },\n      );\n    },\n    [disabled, throttledOnBlock],\n  );\n\n  /**\n   * Cleanup on unmount - reset any pending visual states.\n   * Note: Captures button refs at effect creation time to avoid stale closures.\n   * If the buttons unmount before cleanup runs, the captured variables will still\n   * reference the original DOM elements (now potentially detached), so style changes\n   * are harmless but may not be visible. The null checks primarily guard against\n   * refs that were never set in the first place.\n   */\n  useEffect(() => {\n    // Store refs in variables at effect creation time\n    const attackButton = attackButtonRef.current;\n    const blockButton = blockButtonRef.current;\n\n    return () => {\n      if (attackButton) {\n        attackButton.style.transform = createTransformStyle(false);\n        attackButton.style.filter = createFilterStyle(false);\n      }\n      if (blockButton) {\n        blockButton.style.transform = createTransformStyle(false);\n        blockButton.style.filter = createFilterStyle(false);\n      }\n    };\n  }, []);\n\n  /**\n   * Handle keyboard navigation for attack button\n   */\n  const handleAttackKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (disabled) return;\n      handleKeyboardNav(e.nativeEvent, {\n        onActivate: () => {\n          setAttackPressed(true);\n          onAttack();\n          triggerOptimizedHaptic(\"medium\");\n          // Release after brief delay\n          setTimeout(() => setAttackPressed(false), 150);\n        },\n      });\n    },\n    [disabled, onAttack],\n  );\n\n  /**\n   * Handle keyboard navigation for block button\n   */\n  const handleBlockKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (disabled) return;\n      handleKeyboardNav(e.nativeEvent, {\n        onActivate: () => {\n          setBlockPressed(true);\n          onBlock(\"start\");\n          triggerOptimizedHaptic(\"light\");\n          // Release after brief delay\n          setTimeout(() => {\n            setBlockPressed(false);\n            onBlock(\"end\");\n          }, 150);\n        },\n      });\n    },\n    [disabled, onBlock],\n  );\n\n  // Extract RGB colors using shared utility\n  const colors = useMemo(\n    () => ({\n      gold: getColorRGB(KOREAN_COLORS.ACCENT_GOLD),\n      blue: getColorRGB(KOREAN_COLORS.ACCENT_BLUE),\n      primary: getColorRGB(KOREAN_COLORS.PRIMARY_CYAN),\n    }),\n    [],\n  );\n\n  return (\n    <Html fullscreen>\n      <div\n        style={{\n          position: \"absolute\",\n          bottom: `${bottom}px`,\n          right: `${right}px`,\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: \"10px\",\n          opacity: disabled ? 0.3 : opacity,\n          pointerEvents: disabled ? \"none\" : \"auto\",\n        }}\n        data-testid=\"action-buttons\"\n      >\n        {/* Primary Attack Button */}\n        <button\n          ref={attackButtonRef}\n          onTouchStart={handleAttackStart}\n          onTouchEnd={handleAttackEnd}\n          onMouseDown={handleAttackStart}\n          onMouseUp={handleAttackEnd}\n          onMouseLeave={handleAttackEnd}\n          onKeyDown={handleAttackKeyDown}\n          onFocus={() => setAttackFocused(true)}\n          onBlur={() => setAttackFocused(false)}\n          style={{\n            width: \"80px\",\n            height: \"80px\",\n            borderRadius: \"50%\",\n            background: attackPressed\n              ? `rgba(${colors.gold.r}, ${colors.gold.g}, ${colors.gold.b}, 1)`\n              : `rgba(${colors.gold.r}, ${colors.gold.g}, ${colors.gold.b}, 0.9)`,\n            border: \"3px solid #fff\",\n            fontSize: \"28px\",\n            color: \"#000\",\n            fontWeight: \"bold\",\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            cursor: \"pointer\",\n            userSelect: \"none\",\n            touchAction: \"none\",\n            transition: \"transform 0.1s ease-out, filter 0.1s ease-out\",\n            // Note: transform and filter are managed via TouchOptimizer/applyOptimizedUpdate\n            // for immediate visual feedback. React state-driven inline styles serve as baseline\n            // values that are overridden during active touch interactions via direct DOM manipulation.\n            transform: createTransformStyle(attackPressed, 0.95),\n            filter: createFilterStyle(attackPressed, 1.2),\n            willChange: \"transform, filter\", // GPU hint\n            boxShadow: attackPressed\n              ? `0 0 25px rgba(${colors.gold.r}, ${colors.gold.g}, ${colors.gold.b}, 1), inset 0 4px 8px rgba(0, 0, 0, 0.3)`\n              : `0 4px 12px rgba(0, 0, 0, 0.5), 0 0 15px rgba(${colors.gold.r}, ${colors.gold.g}, ${colors.gold.b}, 0.6)`,\n            ...getFocusStyle(attackFocused, {\n              outlineWidth: 3,\n              boxShadow: `0 0 0 4px rgba(${colors.primary.r}, ${colors.primary.g}, ${colors.primary.b}, 0.5), 0 0 25px rgba(${colors.gold.r}, ${colors.gold.g}, ${colors.gold.b}, 1)`,\n            }),\n          }}\n          disabled={disabled}\n          aria-label={createBilingualLabel(\"공격\", \"Attack\").label}\n          aria-pressed={attackPressed}\n          role=\"button\"\n          tabIndex={disabled ? -1 : 0}\n          data-testid=\"attack-button\"\n        >\n          ⚡\n        </button>\n\n        {/* Block Button */}\n        <button\n          ref={blockButtonRef}\n          onTouchStart={handleBlockStart}\n          onTouchEnd={handleBlockEnd}\n          onMouseDown={handleBlockStart}\n          onMouseUp={handleBlockEnd}\n          onMouseLeave={handleBlockEnd}\n          onKeyDown={handleBlockKeyDown}\n          onFocus={() => setBlockFocused(true)}\n          onBlur={() => setBlockFocused(false)}\n          style={{\n            width: \"70px\",\n            height: \"70px\",\n            borderRadius: \"50%\",\n            background: blockPressed\n              ? `rgba(${colors.blue.r}, ${colors.blue.g}, ${colors.blue.b}, 1)`\n              : `rgba(${colors.blue.r}, ${colors.blue.g}, ${colors.blue.b}, 0.9)`,\n            border: \"2px solid #fff\",\n            fontSize: \"24px\",\n            color: \"#fff\",\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            cursor: \"pointer\",\n            userSelect: \"none\",\n            touchAction: \"none\",\n            transition: \"transform 0.1s ease-out, filter 0.1s ease-out\",\n            transform: createTransformStyle(blockPressed, 0.95),\n            filter: createFilterStyle(blockPressed, 1.2),\n            willChange: \"transform, filter\", // GPU hint\n            boxShadow: blockPressed\n              ? `0 0 20px rgba(${colors.blue.r}, ${colors.blue.g}, ${colors.blue.b}, 1), inset 0 4px 8px rgba(0, 0, 0, 0.3)`\n              : `0 4px 10px rgba(0, 0, 0, 0.5), 0 0 12px rgba(${colors.blue.r}, ${colors.blue.g}, ${colors.blue.b}, 0.6)`,\n            ...getFocusStyle(blockFocused, {\n              outlineWidth: 3,\n              boxShadow: `0 0 0 4px rgba(${colors.primary.r}, ${colors.primary.g}, ${colors.primary.b}, 0.5), 0 0 20px rgba(${colors.blue.r}, ${colors.blue.g}, ${colors.blue.b}, 1)`,\n            }),\n          }}\n          disabled={disabled}\n          aria-label={createBilingualLabel(\"방어\", \"Block\").label}\n          aria-pressed={blockPressed}\n          role=\"button\"\n          tabIndex={disabled ? -1 : 0}\n          data-testid=\"block-button\"\n        >\n          🛡️\n        </button>\n\n        {/* Button Labels (Korean + English) */}\n        <div\n          style={{\n            display: \"flex\",\n            flexDirection: \"column\",\n            gap: \"2px\",\n            alignItems: \"center\",\n            fontSize: \"10px\",\n            color: `rgba(${colors.primary.r}, ${colors.primary.g}, ${colors.primary.b}, 0.9)`,\n            textShadow: \"0 1px 3px rgba(0, 0, 0, 0.8)\",\n            fontWeight: \"bold\",\n            marginTop: \"4px\",\n          }}\n        >\n          <span>공격 | Attack</span>\n          <span style={{ fontSize: \"9px\" }}>방어 | Block</span>\n        </div>\n      </div>\n    </Html>\n  );\n};\n\n/**\n * Memoized ActionButtons with custom comparison\n * Only re-renders when props change\n */\nexport const ActionButtons = React.memo(\n  ActionButtonsComponent,\n  (prevProps, nextProps) => {\n    return (\n      prevProps.disabled === nextProps.disabled &&\n      prevProps.bottom === nextProps.bottom &&\n      prevProps.right === nextProps.right &&\n      prevProps.opacity === nextProps.opacity &&\n      prevProps.onAttack === nextProps.onAttack &&\n      prevProps.onBlock === nextProps.onBlock\n    );\n  },\n);\n\nActionButtons.displayName = \"ActionButtons\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkGA,IAAM,0BAAwD,EAC5D,UACA,SACA,WAAW,OACX,SAAS,IACT,QAAQ,IACR,UAAU,SACN;CACJ,MAAM,CAAC,eAAe,oBAAoB,SAAS,MAAM;CACzD,MAAM,CAAC,cAAc,mBAAmB,SAAS,MAAM;CACvD,MAAM,CAAC,eAAe,oBAAoB,SAAS,MAAM;CACzD,MAAM,CAAC,cAAc,mBAAmB,SAAS,MAAM;CAGvD,MAAM,kBAAkB,OAA0B,KAAK;CACvD,MAAM,iBAAiB,OAA0B,KAAK;CAGtD,MAAM,oBAAoB,YAAY,UAAU,GAAG;CACnD,MAAM,mBAAmB,YAAY,SAAS,GAAG;;;;;CAMjD,MAAM,oBAAoB,aACvB,MAA2C;AAC1C,MAAI,SAAU;AACd,IAAE,gBAAgB;AAClB,IAAE,iBAAiB;AAGnB,uBACE,gBAAgB,UACf,YAAY;AAEX,WAAQ,MAAM,YAAY,qBAAqB,MAAM,IAAK;AAC1D,WAAQ,MAAM,SAAS,kBAAkB,MAAM,IAAI;WAE/C;AAEJ,oBAAiB,KAAK;AACtB,sBAAmB;AACnB,0BAAuB,SAAS;IAEnC;IAEH,CAAC,UAAU,kBAAkB,CAC9B;;;;CAKD,MAAM,kBAAkB,aACrB,MAA2C;AAC1C,MAAI,SAAU;AACd,IAAE,gBAAgB;AAClB,IAAE,iBAAiB;AAGnB,uBACE,gBAAgB,UACf,YAAY;AACX,WAAQ,MAAM,YAAY,qBAAqB,MAAM;AACrD,WAAQ,MAAM,SAAS,kBAAkB,MAAM;WAE3C;AACJ,oBAAiB,MAAM;IAE1B;IAEH,CAAC,SAAS,CACX;;;;CAKD,MAAM,mBAAmB,aACtB,MAA2C;AAC1C,MAAI,SAAU;AACd,IAAE,gBAAgB;AAClB,IAAE,iBAAiB;AAGnB,uBACE,eAAe,UACd,YAAY;AACX,WAAQ,MAAM,YAAY,qBAAqB,MAAM,IAAK;AAC1D,WAAQ,MAAM,SAAS,kBAAkB,MAAM,IAAI;WAE/C;AACJ,mBAAgB,KAAK;AACrB,oBAAiB,QAAQ;AACzB,0BAAuB,QAAQ;IAElC;IAEH,CAAC,UAAU,iBAAiB,CAC7B;;;;CAKD,MAAM,iBAAiB,aACpB,MAA2C;AAC1C,MAAI,SAAU;AACd,IAAE,gBAAgB;AAClB,IAAE,iBAAiB;AAGnB,uBACE,eAAe,UACd,YAAY;AACX,WAAQ,MAAM,YAAY,qBAAqB,MAAM;AACrD,WAAQ,MAAM,SAAS,kBAAkB,MAAM;WAE3C;AACJ,mBAAgB,MAAM;AACtB,oBAAiB,MAAM;IAE1B;IAEH,CAAC,UAAU,iBAAiB,CAC7B;;;;;;;;;AAUD,iBAAgB;EAEd,MAAM,eAAe,gBAAgB;EACrC,MAAM,cAAc,eAAe;AAEnC,eAAa;AACX,OAAI,cAAc;AAChB,iBAAa,MAAM,YAAY,qBAAqB,MAAM;AAC1D,iBAAa,MAAM,SAAS,kBAAkB,MAAM;;AAEtD,OAAI,aAAa;AACf,gBAAY,MAAM,YAAY,qBAAqB,MAAM;AACzD,gBAAY,MAAM,SAAS,kBAAkB,MAAM;;;IAGtD,EAAE,CAAC;;;;CAKN,MAAM,sBAAsB,aACzB,MAA2B;AAC1B,MAAI,SAAU;AACd,oBAAkB,EAAE,aAAa,EAC/B,kBAAkB;AAChB,oBAAiB,KAAK;AACtB,aAAU;AACV,0BAAuB,SAAS;AAEhC,oBAAiB,iBAAiB,MAAM,EAAE,IAAI;KAEjD,CAAC;IAEJ,CAAC,UAAU,SAAS,CACrB;;;;CAKD,MAAM,qBAAqB,aACxB,MAA2B;AAC1B,MAAI,SAAU;AACd,oBAAkB,EAAE,aAAa,EAC/B,kBAAkB;AAChB,mBAAgB,KAAK;AACrB,WAAQ,QAAQ;AAChB,0BAAuB,QAAQ;AAE/B,oBAAiB;AACf,oBAAgB,MAAM;AACtB,YAAQ,MAAM;MACb,IAAI;KAEV,CAAC;IAEJ,CAAC,UAAU,QAAQ,CACpB;CAGD,MAAM,SAAS,eACN;EACL,MAAM,YAAY,cAAc,YAAY;EAC5C,MAAM,YAAY,cAAc,YAAY;EAC5C,SAAS,YAAY,cAAc,aAAa;EACjD,GACD,EAAE,CACH;AAED,QACE,oBAAC,MAAD;EAAM,YAAA;YACJ,qBAAC,OAAD;GACE,OAAO;IACL,UAAU;IACV,QAAQ,GAAG,OAAO;IAClB,OAAO,GAAG,MAAM;IAChB,SAAS;IACT,eAAe;IACf,KAAK;IACL,SAAS,WAAW,KAAM;IAC1B,eAAe,WAAW,SAAS;IACpC;GACD,eAAY;aAXd;IAcE,oBAAC,UAAD;KACE,KAAK;KACL,cAAc;KACd,YAAY;KACZ,aAAa;KACb,WAAW;KACX,cAAc;KACd,WAAW;KACX,eAAe,iBAAiB,KAAK;KACrC,cAAc,iBAAiB,MAAM;KACrC,OAAO;MACL,OAAO;MACP,QAAQ;MACR,cAAc;MACd,YAAY,gBACR,QAAQ,OAAO,KAAK,EAAE,IAAI,OAAO,KAAK,EAAE,IAAI,OAAO,KAAK,EAAE,QAC1D,QAAQ,OAAO,KAAK,EAAE,IAAI,OAAO,KAAK,EAAE,IAAI,OAAO,KAAK,EAAE;MAC9D,QAAQ;MACR,UAAU;MACV,OAAO;MACP,YAAY;MACZ,SAAS;MACT,YAAY;MACZ,gBAAgB;MAChB,QAAQ;MACR,YAAY;MACZ,aAAa;MACb,YAAY;MAIZ,WAAW,qBAAqB,eAAe,IAAK;MACpD,QAAQ,kBAAkB,eAAe,IAAI;MAC7C,YAAY;MACZ,WAAW,gBACP,iBAAiB,OAAO,KAAK,EAAE,IAAI,OAAO,KAAK,EAAE,IAAI,OAAO,KAAK,EAAE,4CACnE,gDAAgD,OAAO,KAAK,EAAE,IAAI,OAAO,KAAK,EAAE,IAAI,OAAO,KAAK,EAAE;MACtG,GAAG,cAAc,eAAe;OAC9B,cAAc;OACd,WAAW,kBAAkB,OAAO,QAAQ,EAAE,IAAI,OAAO,QAAQ,EAAE,IAAI,OAAO,QAAQ,EAAE,wBAAwB,OAAO,KAAK,EAAE,IAAI,OAAO,KAAK,EAAE,IAAI,OAAO,KAAK,EAAE;OACnK,CAAC;MACH;KACS;KACV,cAAY,qBAAqB,MAAM,SAAS,CAAC;KACjD,gBAAc;KACd,MAAK;KACL,UAAU,WAAW,KAAK;KAC1B,eAAY;eACb;KAEQ,CAAA;IAGT,oBAAC,UAAD;KACE,KAAK;KACL,cAAc;KACd,YAAY;KACZ,aAAa;KACb,WAAW;KACX,cAAc;KACd,WAAW;KACX,eAAe,gBAAgB,KAAK;KACpC,cAAc,gBAAgB,MAAM;KACpC,OAAO;MACL,OAAO;MACP,QAAQ;MACR,cAAc;MACd,YAAY,eACR,QAAQ,OAAO,KAAK,EAAE,IAAI,OAAO,KAAK,EAAE,IAAI,OAAO,KAAK,EAAE,QAC1D,QAAQ,OAAO,KAAK,EAAE,IAAI,OAAO,KAAK,EAAE,IAAI,OAAO,KAAK,EAAE;MAC9D,QAAQ;MACR,UAAU;MACV,OAAO;MACP,SAAS;MACT,YAAY;MACZ,gBAAgB;MAChB,QAAQ;MACR,YAAY;MACZ,aAAa;MACb,YAAY;MACZ,WAAW,qBAAqB,cAAc,IAAK;MACnD,QAAQ,kBAAkB,cAAc,IAAI;MAC5C,YAAY;MACZ,WAAW,eACP,iBAAiB,OAAO,KAAK,EAAE,IAAI,OAAO,KAAK,EAAE,IAAI,OAAO,KAAK,EAAE,4CACnE,gDAAgD,OAAO,KAAK,EAAE,IAAI,OAAO,KAAK,EAAE,IAAI,OAAO,KAAK,EAAE;MACtG,GAAG,cAAc,cAAc;OAC7B,cAAc;OACd,WAAW,kBAAkB,OAAO,QAAQ,EAAE,IAAI,OAAO,QAAQ,EAAE,IAAI,OAAO,QAAQ,EAAE,wBAAwB,OAAO,KAAK,EAAE,IAAI,OAAO,KAAK,EAAE,IAAI,OAAO,KAAK,EAAE;OACnK,CAAC;MACH;KACS;KACV,cAAY,qBAAqB,MAAM,QAAQ,CAAC;KAChD,gBAAc;KACd,MAAK;KACL,UAAU,WAAW,KAAK;KAC1B,eAAY;eACb;KAEQ,CAAA;IAGT,qBAAC,OAAD;KACE,OAAO;MACL,SAAS;MACT,eAAe;MACf,KAAK;MACL,YAAY;MACZ,UAAU;MACV,OAAO,QAAQ,OAAO,QAAQ,EAAE,IAAI,OAAO,QAAQ,EAAE,IAAI,OAAO,QAAQ,EAAE;MAC1E,YAAY;MACZ,YAAY;MACZ,WAAW;MACZ;eAXH,CAaE,oBAAC,QAAD,EAAA,UAAM,eAAkB,CAAA,EACxB,oBAAC,QAAD;MAAM,OAAO,EAAE,UAAU,OAAO;gBAAE;MAAiB,CAAA,CAC/C;;IACF;;EACD,CAAA;;;;;;AAQX,IAAa,gBAAgB,MAAM,KACjC,yBACC,WAAW,cAAc;AACxB,QACE,UAAU,aAAa,UAAU,YACjC,UAAU,WAAW,UAAU,UAC/B,UAAU,UAAU,UAAU,SAC9B,UAAU,YAAY,UAAU,WAChC,UAAU,aAAa,UAAU,YACjC,UAAU,YAAY,UAAU;EAGrC;AAED,cAAc,cAAc"}

package/lib/components/shared/mobile/GestureRecognizerPure.d.ts

@@ -0,0 +1,64 @@
+/**
+ * GestureRecognizerPure Component - Pure DOM version (no Three.js/drei dependency)
+ *
+ * Visual overlay for gesture detection feedback
+ * Displays swipe trails and multi-touch indicators
+ *
+ * This is a pure DOM version that renders OUTSIDE the Three.js Canvas.
+ * It does NOT use Html from @react-three/drei, making it compatible with
+ * rendering outside Canvas contexts.
+ *
+ * @module components/mobile/GestureRecognizerPure
+ * @category Mobile Controls
+ * @korean 제스처 인식기 (순수 DOM)
+ */
+import React from "react";
+import { GestureEvent } from "../../../hooks/useTouchControls";
+/**
+ * Props for GestureRecognizerPure component
+ */
+export interface GestureRecognizerPureProps {
+    /** Callback when gesture is detected */
+    readonly onGesture: (gesture: GestureEvent) => void;
+    /** Whether gesture recognition is enabled */
+    readonly enabled?: boolean;
+    /** Whether to show visual feedback */
+    readonly showFeedback?: boolean;
+    /** Minimum swipe distance in pixels (default: 50) */
+    readonly minSwipeDistance?: number;
+}
+/**
+ * GestureRecognizerPure Component
+ *
+ * Pure DOM gesture detection and visual feedback for mobile controls
+ * Features:
+ * - Swipe detection (4 directions)
+ * - Two-finger tap detection
+ * - Visual trail feedback
+ * - Gesture type indicators
+ * - Auto-fading feedback
+ *
+ * Gesture Mappings:
+ * - Swipe Right: Advance toward opponent
+ * - Swipe Left: Retreat from opponent
+ * - Swipe Up: High attack mode
+ * - Swipe Down: Low attack mode
+ * - Two-Finger Tap: Vital point targeting mode
+ *
+ * @example
+ * ```tsx
+ * <GestureRecognizerPure
+ *   onGesture={(gesture) => {
+ *     console.log('Detected:', gesture.type);
+ *     handleGesture(gesture);
+ *   }}
+ *   enabled={!isPaused}
+ *   showFeedback={true}
+ * />
+ * ```
+ *
+ * @public
+ * @korean 제스처인식기순수
+ */
+export declare const GestureRecognizerPure: React.FC<GestureRecognizerPureProps>;
+//# sourceMappingURL=GestureRecognizerPure.d.ts.map

package/lib/components/shared/mobile/GestureRecognizerPure.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GestureRecognizerPure.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/mobile/GestureRecognizerPure.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAA2C,MAAM,OAAO,CAAC;AAEhE,OAAO,EACL,YAAY,EAEb,MAAM,iCAAiC,CAAC;AAGzC;;GAEG;AACH,MAAM,WAAW,0BAA0B;IACzC,wCAAwC;IACxC,QAAQ,CAAC,SAAS,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IACpD,6CAA6C;IAC7C,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B,sCAAsC;IACtC,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC;IAChC,qDAAqD;IACrD,QAAQ,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;CACpC;AAcD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAgMtE,CAAC"}

package/lib/components/shared/mobile/GestureRecognizerPure.js

@@ -0,0 +1,231 @@
+import { KOREAN_COLORS } from "../../../types/constants/colors.js";
+import "../../../types/constants/index.js";
+import { getColorRGB } from "../../../utils/colorHelpers.js";
+import { useTouchControls } from "../../../hooks/useTouchControls.js";
+import { useCallback, useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/shared/mobile/GestureRecognizerPure.tsx
+/**
+* GestureRecognizerPure Component - Pure DOM version (no Three.js/drei dependency)
+*
+* Visual overlay for gesture detection feedback
+* Displays swipe trails and multi-touch indicators
+*
+* This is a pure DOM version that renders OUTSIDE the Three.js Canvas.
+* It does NOT use Html from @react-three/drei, making it compatible with
+* rendering outside Canvas contexts.
+*
+* @module components/mobile/GestureRecognizerPure
+* @category Mobile Controls
+* @korean 제스처 인식기 (순수 DOM)
+*/
+/**
+* GestureRecognizerPure Component
+*
+* Pure DOM gesture detection and visual feedback for mobile controls
+* Features:
+* - Swipe detection (4 directions)
+* - Two-finger tap detection
+* - Visual trail feedback
+* - Gesture type indicators
+* - Auto-fading feedback
+*
+* Gesture Mappings:
+* - Swipe Right: Advance toward opponent
+* - Swipe Left: Retreat from opponent
+* - Swipe Up: High attack mode
+* - Swipe Down: Low attack mode
+* - Two-Finger Tap: Vital point targeting mode
+*
+* @example
+* ```tsx
+* <GestureRecognizerPure
+*   onGesture={(gesture) => {
+*     console.log('Detected:', gesture.type);
+*     handleGesture(gesture);
+*   }}
+*   enabled={!isPaused}
+*   showFeedback={true}
+* />
+* ```
+*
+* @public
+* @korean 제스처인식기순수
+*/
+var GestureRecognizerPure = ({ onGesture, enabled = true, showFeedback = true, minSwipeDistance = 50 }) => {
+	const [feedbacks, setFeedbacks] = useState([]);
+	const [nextId, setNextId] = useState(0);
+	/**
+	* Use touch controls hook for gesture detection
+	*/
+	useTouchControls({
+		onGesture: useCallback((gesture) => {
+			onGesture(gesture);
+			if (showFeedback && gesture.endX !== void 0 && gesture.endY !== void 0) {
+				const feedback = {
+					id: nextId,
+					type: gesture.type,
+					timestamp: Date.now(),
+					x: gesture.endX,
+					y: gesture.endY
+				};
+				setFeedbacks((prev) => [...prev, feedback]);
+				setNextId((prev) => prev + 1);
+			}
+		}, [
+			onGesture,
+			showFeedback,
+			nextId
+		]),
+		enabled,
+		minSwipeDistance
+	});
+	/**
+	* Clean up old feedback indicators and update ages
+	*/
+	useEffect(() => {
+		if (!showFeedback) return;
+		const interval = setInterval(() => {
+			const now = Date.now();
+			setFeedbacks((prev) => prev.filter((fb) => now - fb.timestamp < 1e3).map((fb) => ({
+				...fb,
+				age: now - fb.timestamp
+			})));
+		}, 100);
+		return () => clearInterval(interval);
+	}, [showFeedback]);
+	if (!showFeedback) return null;
+	const primaryColor = getColorRGB(KOREAN_COLORS.PRIMARY_CYAN);
+	const goldColor = getColorRGB(KOREAN_COLORS.ACCENT_GOLD);
+	/**
+	* Get display info for gesture type
+	*/
+	const getGestureDisplay = (type) => {
+		return {
+			"swipe-right": {
+				korean: "전진",
+				english: "Advance",
+				icon: "→"
+			},
+			"swipe-left": {
+				korean: "후퇴",
+				english: "Retreat",
+				icon: "←"
+			},
+			"swipe-up": {
+				korean: "상단",
+				english: "High",
+				icon: "↑"
+			},
+			"swipe-down": {
+				korean: "하단",
+				english: "Low",
+				icon: "↓"
+			},
+			"two-finger-tap": {
+				korean: "급소",
+				english: "Vital Point",
+				icon: "🎯"
+			},
+			tap: {
+				korean: "터치",
+				english: "Tap",
+				icon: "👆"
+			}
+		}[type] ?? {
+			korean: "제스처",
+			english: "Gesture",
+			icon: "✋"
+		};
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			position: "absolute",
+			top: 0,
+			left: 0,
+			width: "100%",
+			height: "100%",
+			pointerEvents: "none",
+			zIndex: 1e3
+		},
+		"data-testid": "gesture-recognizer-pure",
+		children: [feedbacks.map((feedback) => {
+			const age = feedback.age ?? 0;
+			const opacity = Math.max(0, 1 - age / 1e3);
+			const scale = 1 + age / 500;
+			const display = getGestureDisplay(feedback.type);
+			return /* @__PURE__ */ jsxs("div", {
+				style: {
+					position: "absolute",
+					left: `${feedback.x}px`,
+					top: `${feedback.y}px`,
+					transform: `translate(-50%, -50%) scale(${scale})`,
+					opacity,
+					transition: "all 0.1s ease-out",
+					display: "flex",
+					flexDirection: "column",
+					alignItems: "center",
+					gap: "4px"
+				},
+				"data-testid": `gesture-feedback-pure-${feedback.id}`,
+				children: [/* @__PURE__ */ jsx("div", {
+					style: {
+						fontSize: "32px",
+						color: `rgba(${goldColor.r}, ${goldColor.g}, ${goldColor.b}, ${opacity})`,
+						textShadow: `0 0 10px rgba(${goldColor.r}, ${goldColor.g}, ${goldColor.b}, ${opacity * .8})`
+					},
+					children: display.icon
+				}), /* @__PURE__ */ jsxs("div", {
+					style: {
+						background: `rgba(0, 0, 0, ${opacity * .8})`,
+						border: `2px solid rgba(${primaryColor.r}, ${primaryColor.g}, ${primaryColor.b}, ${opacity})`,
+						borderRadius: "8px",
+						padding: "4px 8px",
+						fontSize: "12px",
+						fontWeight: "bold",
+						color: `rgba(${primaryColor.r}, ${primaryColor.g}, ${primaryColor.b}, ${opacity})`,
+						textAlign: "center",
+						whiteSpace: "nowrap",
+						textShadow: "0 1px 3px rgba(0, 0, 0, 0.8)"
+					},
+					children: [
+						display.korean,
+						" | ",
+						display.english
+					]
+				})]
+			}, feedback.id);
+		}), enabled && /* @__PURE__ */ jsxs("div", {
+			style: {
+				position: "absolute",
+				top: "10px",
+				right: "10px",
+				background: "rgba(0, 0, 0, 0.7)",
+				border: `2px solid rgba(${primaryColor.r}, ${primaryColor.g}, ${primaryColor.b}, 0.6)`,
+				borderRadius: "8px",
+				padding: "8px 12px",
+				fontSize: "10px",
+				color: `rgba(${primaryColor.r}, ${primaryColor.g}, ${primaryColor.b}, 0.9)`,
+				maxWidth: "150px",
+				opacity: .7
+			},
+			"data-testid": "gesture-instructions-pure",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					style: {
+						fontWeight: "bold",
+						marginBottom: "4px"
+					},
+					children: "제스처 | Gestures"
+				}),
+				/* @__PURE__ */ jsx("div", { children: "← → 이동 | Move" }),
+				/* @__PURE__ */ jsx("div", { children: "↑ ↓ 공격 | Attack" }),
+				/* @__PURE__ */ jsx("div", { children: "🤞 급소 | Vital" })
+			]
+		})]
+	});
+};
+//#endregion
+export { GestureRecognizerPure };
+
+//# sourceMappingURL=GestureRecognizerPure.js.map