blacktrigram 0.7.2

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

@@ -0,0 +1 @@
+{"version":3,"file":"TouchOptimizer.js","names":[],"sources":["../../../../src/components/shared/mobile/TouchOptimizer.ts"],"sourcesContent":["/**\n * TouchOptimizer\n * \n * High-performance touch event handling with <16ms latency\n * Uses requestAnimationFrame for immediate visual updates and\n * requestIdleCallback for deferred state updates to maintain 60fps\n * \n * Key Features:\n * - RAF-based visual updates (<16ms latency)\n * - Touch event coalescing (60-70% overhead reduction)\n * - Passive event listeners where appropriate\n * - Transform-only CSS animations (GPU-accelerated)\n * \n * @module components/mobile/TouchOptimizer\n * @category Mobile Controls\n * @korean 터치 최적화\n */\n\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\n/**\n * Touch position data\n */\nexport interface TouchPosition {\n  readonly x: number;\n  readonly y: number;\n  readonly timestamp: number;\n}\n\n/**\n * Touch optimization options\n */\nexport interface TouchOptimizerOptions {\n  /** Enable touch event coalescing (default: true) */\n  readonly enableCoalescing?: boolean;\n  /** Use passive listeners where possible (default: true) */\n  readonly usePassiveListeners?: boolean;\n  /** Enable RAF for visual updates (default: true) */\n  readonly useRAF?: boolean;\n  /** Coalescing sample rate (default: 3 - use last 3 events) */\n  readonly coalescingSampleRate?: number;\n}\n\n/**\n * Touch optimizer return type\n */\nexport interface TouchOptimizerReturn {\n  /** Current RAF ID (for debugging) */\n  readonly rafId: number | null;\n  /** Whether touch is active */\n  readonly isTouching: boolean;\n}\n\n/**\n * Custom hook for optimized touch handling with <16ms latency\n * \n * Uses requestAnimationFrame for immediate visual feedback and\n * defers state updates to avoid blocking the main thread\n * \n * @param onTouchStart - Callback for touch start (immediate)\n * @param onTouchMove - Callback for touch move (coalesced)\n * @param onTouchEnd - Callback for touch end (immediate)\n * @param options - Optimization options\n * \n * @example\n * ```tsx\n * const { isTouching } = useTouchOptimizer(\n *   (x, y) => {\n *     // Immediate visual update (same frame)\n *     buttonRef.current.style.transform = 'scale(0.95)';\n *     \n *     // Defer state update\n *     requestIdleCallback(() => {\n *       setPressed(true);\n *       onAction();\n *     });\n *   },\n *   (x, y) => {\n *     // Handle coalesced touch move\n *     updatePosition(x, y);\n *   },\n *   () => {\n *     // Immediate visual reset\n *     buttonRef.current.style.transform = 'scale(1)';\n *     \n *     requestIdleCallback(() => {\n *       setPressed(false);\n *     });\n *   }\n * );\n * ```\n * \n * @public\n * @korean 터치최적화사용\n */\nexport function useTouchOptimizer(\n  onTouchStart: (x: number, y: number, timestamp: number) => void,\n  onTouchMove: (x: number, y: number, timestamp: number) => void,\n  onTouchEnd: (x: number, y: number, timestamp: number) => void,\n  options: TouchOptimizerOptions = {}\n): TouchOptimizerReturn {\n  const {\n    enableCoalescing = true,\n    usePassiveListeners = true,\n    useRAF = true,\n    coalescingSampleRate = 3,\n  } = options;\n\n  const rafIdRef = useRef<number | null>(null);\n  const touchStateRef = useRef<TouchPosition | null>(null);\n  const isTouchingRef = useRef<boolean>(false);\n  const pendingMoveRef = useRef<TouchPosition | null>(null);\n  \n  // State for returning values (not using refs in return)\n  const [rafId, setRafId] = useState<number | null>(null);\n  const [isTouching, setIsTouching] = useState<boolean>(false);\n\n  /**\n   * Cancel pending RAF\n   */\n  const cancelPendingRAF = useCallback(() => {\n    if (rafIdRef.current !== null) {\n      cancelAnimationFrame(rafIdRef.current);\n      rafIdRef.current = null;\n      setRafId(null);\n    }\n  }, []);\n\n  /**\n   * Process touch start with RAF\n   */\n  const processTouchStart = useCallback(\n    (x: number, y: number) => {\n      const timestamp = performance.now();\n      touchStateRef.current = { x, y, timestamp };\n      isTouchingRef.current = true;\n      setIsTouching(true);\n\n      if (useRAF) {\n        // Schedule immediate visual update (next frame, <16ms)\n        cancelPendingRAF();\n        rafIdRef.current = requestAnimationFrame(() => {\n          onTouchStart(x, y, timestamp);\n          rafIdRef.current = null;\n          setRafId(null);\n        });\n        setRafId(rafIdRef.current);\n      } else {\n        // Direct call (no RAF)\n        onTouchStart(x, y, timestamp);\n      }\n    },\n    [onTouchStart, useRAF, cancelPendingRAF]\n  );\n\n  /**\n   * Process coalesced touch move with RAF\n   */\n  const processTouchMove = useCallback(\n    (x: number, y: number) => {\n      const timestamp = performance.now();\n      pendingMoveRef.current = { x, y, timestamp };\n\n      if (useRAF && rafIdRef.current === null) {\n        // Schedule update for next frame\n        rafIdRef.current = requestAnimationFrame(() => {\n          if (pendingMoveRef.current) {\n            const { x, y, timestamp } = pendingMoveRef.current;\n            onTouchMove(x, y, timestamp);\n            pendingMoveRef.current = null;\n          }\n          rafIdRef.current = null;\n          setRafId(null);\n        });\n        setRafId(rafIdRef.current);\n      } else if (!useRAF) {\n        // Direct call (no RAF)\n        onTouchMove(x, y, timestamp);\n      }\n    },\n    [onTouchMove, useRAF]\n  );\n\n  /**\n   * Process touch end with RAF\n   */\n  const processTouchEnd = useCallback(\n    (x: number, y: number) => {\n      const timestamp = performance.now();\n      isTouchingRef.current = false;\n      setIsTouching(false);\n      touchStateRef.current = null;\n      pendingMoveRef.current = null;\n\n      if (useRAF) {\n        // Schedule immediate visual update (next frame, <16ms)\n        cancelPendingRAF();\n        rafIdRef.current = requestAnimationFrame(() => {\n          onTouchEnd(x, y, timestamp);\n          rafIdRef.current = null;\n          setRafId(null);\n        });\n        setRafId(rafIdRef.current);\n      } else {\n        // Direct call (no RAF)\n        onTouchEnd(x, y, timestamp);\n      }\n    },\n    [onTouchEnd, useRAF, cancelPendingRAF]\n  );\n\n  /**\n   * Handle touch start event\n   */\n  const handleTouchStart = useCallback(\n    (e: TouchEvent) => {\n      // Prevent default to eliminate 300ms delay\n      if (!usePassiveListeners) {\n        e.preventDefault();\n      }\n\n      const touch = e.touches[0];\n      if (touch) {\n        processTouchStart(touch.clientX, touch.clientY);\n      }\n    },\n    [processTouchStart, usePassiveListeners]\n  );\n\n  /**\n   * Handle touch move event with coalescing\n   */\n  const handleTouchMove = useCallback(\n    (e: TouchEvent) => {\n      if (!isTouchingRef.current) return;\n\n      // Get coalesced events for smooth tracking\n      let events: readonly Touch[] = [e.touches[0]];\n      \n      if (enableCoalescing) {\n        // Feature detection: getCoalescedEvents() is experimental (Chrome 58+, Edge 79+)\n        // Not supported in Safari or Firefox as of 2024\n        // Fallback to single event if not supported\n        const eventWithCoalescing = e as TouchEvent & { getCoalescedEvents?: () => TouchEvent[] };\n        if (typeof eventWithCoalescing.getCoalescedEvents === 'function') {\n          try {\n            const coalesced = eventWithCoalescing.getCoalescedEvents();\n            if (coalesced && coalesced.length > 0) {\n              // Use only the last N events to reduce overhead\n              const recentEvents = coalesced.slice(-coalescingSampleRate);\n              events = recentEvents.map((evt: TouchEvent) => evt.touches[0]).filter((touch): touch is Touch => touch !== undefined);\n            }\n          } catch {\n            // Fallback to single event if getCoalescedEvents fails (expected in Safari/Firefox)\n          }\n        }\n      }\n\n      // Process only the last event (most recent position)\n      const lastTouch = events[events.length - 1];\n      if (lastTouch) {\n        processTouchMove(lastTouch.clientX, lastTouch.clientY);\n      }\n    },\n    [enableCoalescing, coalescingSampleRate, processTouchMove]\n  );\n\n  /**\n   * Handle touch end event\n   */\n  const handleTouchEnd = useCallback(\n    (e: TouchEvent) => {\n      if (!isTouchingRef.current) return;\n\n      // Prevent default to eliminate delays\n      if (!usePassiveListeners) {\n        e.preventDefault();\n      }\n\n      const touch = e.changedTouches[0];\n      if (touch) {\n        processTouchEnd(touch.clientX, touch.clientY);\n      }\n    },\n    [processTouchEnd, usePassiveListeners]\n  );\n\n  /**\n   * Handle touch cancel event\n   */\n  const handleTouchCancel = useCallback(() => {\n    isTouchingRef.current = false;\n    setIsTouching(false);\n    touchStateRef.current = null;\n    pendingMoveRef.current = null;\n    cancelPendingRAF();\n  }, [cancelPendingRAF]);\n\n  /**\n   * Setup touch event listeners\n   * \n   * Note: Event listeners are attached to the document for each component instance.\n   * This allows independent touch handling per component but may result in multiple\n   * document-level listeners if many components use this hook simultaneously.\n   * For applications with many touch-optimized components, consider implementing\n   * an event delegation pattern or singleton event manager for better efficiency.\n   */\n  useEffect(() => {\n    const options: AddEventListenerOptions = {\n      passive: usePassiveListeners,\n    };\n\n    document.addEventListener('touchstart', handleTouchStart, options);\n    document.addEventListener('touchmove', handleTouchMove, options);\n    document.addEventListener('touchend', handleTouchEnd, options);\n    document.addEventListener('touchcancel', handleTouchCancel, options);\n\n    return () => {\n      document.removeEventListener('touchstart', handleTouchStart);\n      document.removeEventListener('touchmove', handleTouchMove);\n      document.removeEventListener('touchend', handleTouchEnd);\n      document.removeEventListener('touchcancel', handleTouchCancel);\n      cancelPendingRAF();\n    };\n  }, [\n    handleTouchStart,\n    handleTouchMove,\n    handleTouchEnd,\n    handleTouchCancel,\n    usePassiveListeners,\n    cancelPendingRAF,\n  ]);\n\n  return {\n    rafId,\n    isTouching,\n  };\n}\n\n/**\n * Helper function to create optimized visual updates\n * Updates DOM directly for immediate feedback, defers state\n * \n * @param element - DOM element to update\n * @param visualUpdate - Function to update visual state (runs in RAF)\n * @param stateUpdate - Function to update React state (runs in idle)\n * \n * @example\n * ```tsx\n * applyOptimizedUpdate(\n *   buttonRef.current,\n *   (el) => {\n *     // Immediate visual feedback (<16ms)\n *     el.style.transform = 'scale(0.95)';\n *     el.style.filter = 'brightness(1.2)';\n *   },\n *   () => {\n *     // Deferred state update (non-blocking)\n *     setPressed(true);\n *     onAction();\n *   }\n * );\n * ```\n * \n * @public\n * @korean 최적화된업데이트적용\n */\nexport function applyOptimizedUpdate(\n  element: HTMLElement | null,\n  visualUpdate: (element: HTMLElement) => void,\n  stateUpdate: () => void\n): void {\n  // Immediate visual update (same frame)\n  if (element) {\n    requestAnimationFrame(() => {\n      visualUpdate(element);\n    });\n  }\n\n  // Deferred state update (when idle)\n  if (typeof (window as Window & typeof globalThis).requestIdleCallback === 'function') {\n    (window as Window & typeof globalThis).requestIdleCallback(() => {\n      stateUpdate();\n    });\n  } else {\n    // Fallback for browsers without requestIdleCallback\n    setTimeout(stateUpdate, 0);\n  }\n}\n\n/**\n * Create transform-only style for GPU-accelerated animations\n * Avoids layout thrashing by only using transform\n * \n * @param pressed - Whether element is pressed\n * @param scale - Scale value when pressed (default: 0.95)\n * \n * @returns CSS transform string\n * \n * @example\n * ```tsx\n * const style = {\n *   transform: createTransformStyle(isPressed, 0.95),\n *   transition: 'transform 0.1s ease-out',\n *   willChange: 'transform', // Hint to GPU\n * };\n * ```\n * \n * @public\n * @korean 변환스타일생성\n */\nexport function createTransformStyle(\n  pressed: boolean,\n  scale: number = 0.95\n): string {\n  if (pressed) {\n    return `scale(${scale})`;\n  }\n  return 'scale(1)';\n}\n\n/**\n * Create filter style for visual effects\n * \n * @param pressed - Whether element is pressed\n * @param brightness - Brightness multiplier when pressed (default: 1.2)\n * \n * @returns CSS filter string\n * \n * @public\n * @korean 필터스타일생성\n */\nexport function createFilterStyle(\n  pressed: boolean,\n  brightness: number = 1.2\n): string {\n  if (pressed) {\n    return `brightness(${brightness})`;\n  }\n  return 'brightness(1)';\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+WA,SAAgB,qBACd,SACA,cACA,aACM;AAEN,KAAI,QACF,6BAA4B;AAC1B,eAAa,QAAQ;GACrB;AAIJ,KAAI,OAAQ,OAAsC,wBAAwB,WACvE,QAAsC,0BAA0B;AAC/D,eAAa;GACb;KAGF,YAAW,aAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;AAyB9B,SAAgB,qBACd,SACA,QAAgB,KACR;AACR,KAAI,QACF,QAAO,SAAS,MAAM;AAExB,QAAO;;;;;;;;;;;;;AAcT,SAAgB,kBACd,SACA,aAAqB,KACb;AACR,KAAI,QACF,QAAO,cAAc,WAAW;AAElC,QAAO"}

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

@@ -0,0 +1,49 @@
+/**
+ * VirtualDPad Component
+ *
+ * 8-directional virtual D-Pad for mobile touch controls
+ * Provides tactile movement control with visual feedback and haptic response
+ *
+ * WCAG 2.1 Level AA Compliance:
+ * - ARIA labels for all 8 directions
+ * - Keyboard navigation (Arrow keys)
+ * - Visible focus indicators (2px cyan border)
+ * - role="group" with descriptive label
+ * - 48x48px minimum touch targets
+ *
+ * @module components/mobile/VirtualDPad
+ * @category Mobile Controls
+ * @korean 가상 방향 패드
+ */
+import React from "react";
+/**
+ * 8 directions for movement control
+ */
+export type Direction = "up" | "up-right" | "right" | "down-right" | "down" | "down-left" | "left" | "up-left";
+/**
+ * Event type for D-Pad interactions
+ */
+export type DPadEventType = "start" | "end";
+/**
+ * Props for VirtualDPad component
+ */
+export interface VirtualDPadProps {
+    /** Callback when direction changes */
+    readonly onMove: (direction: Direction | null, eventType: DPadEventType) => void;
+    /** Whether D-Pad is disabled */
+    readonly disabled?: boolean;
+    /** Size of the D-Pad in pixels (default: 140) */
+    readonly size?: number;
+    /** Position from bottom in pixels (default: 34 for safe area) */
+    readonly bottom?: number;
+    /** Position from left in pixels (default: 20) */
+    readonly left?: number;
+    /** Opacity of the D-Pad (default: 0.8) */
+    readonly opacity?: number;
+}
+/**
+ * Memoized VirtualDPad with custom comparison
+ * Only re-renders when props change
+ */
+export declare const VirtualDPad: React.NamedExoticComponent<VirtualDPadProps>;
+//# sourceMappingURL=VirtualDPad.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualDPad.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/mobile/VirtualDPad.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAGH,OAAO,KAAyC,MAAM,OAAO,CAAC;AAQ9D;;GAEG;AACH,MAAM,MAAM,SAAS,GACjB,IAAI,GACJ,UAAU,GACV,OAAO,GACP,YAAY,GACZ,MAAM,GACN,WAAW,GACX,MAAM,GACN,SAAS,CAAC;AAEd;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,KAAK,CAAC;AAE5C;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,sCAAsC;IACtC,QAAQ,CAAC,MAAM,EAAE,CACf,SAAS,EAAE,SAAS,GAAG,IAAI,EAC3B,SAAS,EAAE,aAAa,KACrB,IAAI,CAAC;IACV,gCAAgC;IAChC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,iDAAiD;IACjD,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,iEAAiE;IACjE,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,iDAAiD;IACjD,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,0CAA0C;IAC1C,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;CAC3B;AA2VD;;;GAGG;AACH,eAAO,MAAM,WAAW,8CAYvB,CAAC"}

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

@@ -0,0 +1,289 @@
+import { KOREAN_COLORS } from "../../../types/constants/colors.js";
+import "../../../types/constants/index.js";
+import { getColorRGB } from "../../../utils/colorHelpers.js";
+import { triggerHaptic } from "../../../utils/haptics.js";
+import { createBilingualLabel } from "../../../types/AccessibilityTypes.js";
+import { getFocusStyle, handleKeyboardNav } from "../../../utils/accessibility.js";
+import useThrottle from "../../../hooks/useThrottle.js";
+import React, { useCallback, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Html } from "@react-three/drei";
+//#region src/components/shared/mobile/VirtualDPad.tsx
+/**
+* VirtualDPad Component
+*
+* 8-directional virtual D-Pad for mobile touch controls
+* Provides tactile movement control with visual feedback and haptic response
+*
+* WCAG 2.1 Level AA Compliance:
+* - ARIA labels for all 8 directions
+* - Keyboard navigation (Arrow keys)
+* - Visible focus indicators (2px cyan border)
+* - role="group" with descriptive label
+* - 48x48px minimum touch targets
+*
+* @module components/mobile/VirtualDPad
+* @category Mobile Controls
+* @korean 가상 방향 패드
+*/
+/**
+* 8-directional configuration
+* Arranged clockwise starting from up (0°)
+*/
+var DIRECTIONS = [
+	{
+		direction: "up",
+		angle: 0,
+		korean: "↑",
+		englishLabel: "Up"
+	},
+	{
+		direction: "up-right",
+		angle: 45,
+		korean: "↗",
+		englishLabel: "Up Right"
+	},
+	{
+		direction: "right",
+		angle: 90,
+		korean: "→",
+		englishLabel: "Right"
+	},
+	{
+		direction: "down-right",
+		angle: 135,
+		korean: "↘",
+		englishLabel: "Down Right"
+	},
+	{
+		direction: "down",
+		angle: 180,
+		korean: "↓",
+		englishLabel: "Down"
+	},
+	{
+		direction: "down-left",
+		angle: 225,
+		korean: "↙",
+		englishLabel: "Down Left"
+	},
+	{
+		direction: "left",
+		angle: 270,
+		korean: "←",
+		englishLabel: "Left"
+	},
+	{
+		direction: "up-left",
+		angle: 315,
+		korean: "↖",
+		englishLabel: "Up Left"
+	}
+];
+/**
+* D-Pad button positioned around the center
+* Memoized to prevent unnecessary re-renders
+*/
+var DPadButton = React.memo(({ config, active, focused, onStart, onEnd, onKeyDown, onFocus, onBlur, radius, buttonSize }) => {
+	const radian = (config.angle - 90) * (Math.PI / 180);
+	const x = Math.cos(radian) * radius;
+	const y = Math.sin(radian) * radius;
+	const goldColor = getColorRGB(KOREAN_COLORS.ACCENT_GOLD);
+	const primaryColor = getColorRGB(KOREAN_COLORS.PRIMARY_CYAN);
+	const ariaLabel = createBilingualLabel(`이동 ${config.korean}`, `Move ${config.englishLabel}`).label;
+	return /* @__PURE__ */ jsx("button", {
+		onTouchStart: onStart,
+		onTouchEnd: onEnd,
+		onMouseDown: onStart,
+		onMouseUp: onEnd,
+		onMouseLeave: onEnd,
+		onKeyDown,
+		onFocus,
+		onBlur,
+		style: {
+			position: "absolute",
+			left: `calc(50% + ${x}px - ${buttonSize / 2}px)`,
+			top: `calc(50% + ${y}px - ${buttonSize / 2}px)`,
+			width: `${buttonSize}px`,
+			height: `${buttonSize}px`,
+			borderRadius: "50%",
+			background: active ? `rgba(${goldColor.r}, ${goldColor.g}, ${goldColor.b}, 0.9)` : "rgba(0, 0, 0, 0.5)",
+			border: focused ? `3px solid rgb(${primaryColor.r}, ${primaryColor.g}, ${primaryColor.b})` : `2px solid rgba(${primaryColor.r}, ${primaryColor.g}, ${primaryColor.b}, ${active ? 1 : .6})`,
+			fontSize: "20px",
+			color: "#fff",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			cursor: "pointer",
+			userSelect: "none",
+			touchAction: "none",
+			transition: "transform 0.2s ease, opacity 0.2s ease",
+			transform: active ? "scale(1.1)" : "scale(1)",
+			boxShadow: focused ? `0 0 0 4px rgba(${primaryColor.r}, ${primaryColor.g}, ${primaryColor.b}, 0.5), 0 0 15px rgba(${goldColor.r}, ${goldColor.g}, ${goldColor.b}, 0.8)` : active ? `0 0 15px rgba(${goldColor.r}, ${goldColor.g}, ${goldColor.b}, 0.8)` : "none",
+			...getFocusStyle(focused)
+		},
+		"aria-label": ariaLabel,
+		"aria-pressed": active,
+		role: "button",
+		tabIndex: 0,
+		"data-testid": `dpad-button-${config.direction}`,
+		children: config.korean
+	});
+}, (prevProps, nextProps) => {
+	return prevProps.active === nextProps.active && prevProps.focused === nextProps.focused;
+});
+DPadButton.displayName = "DPadButton";
+/**
+* VirtualDPad Component
+*
+* 8-directional virtual D-Pad for touch-based movement control
+* Features:
+* - 8 directional buttons arranged in a circle
+* - Visual feedback on active direction
+* - Haptic feedback on touch
+* - Korean theming with cyberpunk aesthetics
+* - 48x48px minimum touch targets (improved from iOS 44px guideline)
+* - 140x140px default size for better mobile usability
+*
+* Usage in Combat/Training:
+* - Provides tactical positioning and footwork
+* - Alternative to keyboard WASD controls
+* - Essential for mobile gameplay
+*
+* @example
+* ```tsx
+* <VirtualDPad
+*   onMove={(direction, eventType) => {
+*     if (eventType === 'start' && direction) {
+*       handleMovement(direction);
+*     } else if (eventType === 'end') {
+*       stopMovement();
+*     }
+*   }}
+*   disabled={isPaused}
+*   size={140}
+*   bottom={34}
+* />
+* ```
+*
+* @public
+* @korean 가상방향패드
+*/
+var VirtualDPadComponent = ({ onMove, disabled = false, size = 140, bottom = 34, left = 20, opacity = .8 }) => {
+	const [activeDirection, setActiveDirection] = useState(null);
+	const [focusedDirection, setFocusedDirection] = useState(null);
+	const throttledOnMove = useThrottle(onMove, 16);
+	/**
+	* Handle touch or mouse start on a direction button
+	* Throttled for performance
+	*/
+	const handleStart = useCallback((e, direction) => {
+		if (disabled) return;
+		e.preventDefault();
+		e.stopPropagation();
+		setActiveDirection(direction);
+		throttledOnMove(direction, "start");
+		triggerHaptic("light");
+	}, [disabled, throttledOnMove]);
+	/**
+	* Handle touch or mouse end
+	* Throttled for performance
+	*/
+	const handleEnd = useCallback((e) => {
+		if (disabled) return;
+		e.preventDefault();
+		e.stopPropagation();
+		setActiveDirection(null);
+		throttledOnMove(null, "end");
+	}, [disabled, throttledOnMove]);
+	/**
+	* Handle keyboard navigation for D-Pad
+	*/
+	const handleKeyDown = useCallback((direction) => (e) => {
+		if (disabled) return;
+		handleKeyboardNav(e.nativeEvent, { onActivate: () => {
+			setActiveDirection(direction);
+			throttledOnMove(direction, "start");
+			triggerHaptic("light");
+			setTimeout(() => {
+				setActiveDirection(null);
+				throttledOnMove(null, "end");
+			}, 150);
+		} });
+	}, [disabled, throttledOnMove]);
+	const dimensions = useMemo(() => ({
+		buttonSize: Math.max(48, size * .3),
+		radius: (size - Math.max(48, size * .3)) / 2
+	}), [size]);
+	const colors = useMemo(() => ({
+		primary: getColorRGB(KOREAN_COLORS.PRIMARY_CYAN),
+		gold: getColorRGB(KOREAN_COLORS.ACCENT_GOLD)
+	}), []);
+	return /* @__PURE__ */ jsx(Html, {
+		fullscreen: true,
+		children: /* @__PURE__ */ jsx("div", {
+			style: {
+				position: "absolute",
+				bottom: `${bottom}px`,
+				left: `${left}px`,
+				width: `${size}px`,
+				height: `${size}px`,
+				opacity: disabled ? .3 : opacity,
+				pointerEvents: disabled ? "none" : "auto"
+			},
+			"data-testid": "virtual-dpad",
+			children: /* @__PURE__ */ jsxs("div", {
+				style: {
+					position: "relative",
+					width: "100%",
+					height: "100%",
+					background: "rgba(0, 0, 0, 0.5)",
+					borderRadius: "50%",
+					border: `2px solid rgba(${colors.primary.r}, ${colors.primary.g}, ${colors.primary.b}, 0.8)`,
+					boxShadow: `0 0 20px rgba(${colors.primary.r}, ${colors.primary.g}, ${colors.primary.b}, 0.3)`
+				},
+				role: "group",
+				"aria-label": createBilingualLabel("방향 패드", "Directional Pad").label,
+				children: [DIRECTIONS.map((config) => /* @__PURE__ */ jsx(DPadButton, {
+					config,
+					active: activeDirection === config.direction,
+					focused: focusedDirection === config.direction,
+					onStart: (e) => handleStart(e, config.direction),
+					onEnd: handleEnd,
+					onKeyDown: handleKeyDown(config.direction),
+					onFocus: () => setFocusedDirection(config.direction),
+					onBlur: () => setFocusedDirection(null),
+					radius: dimensions.radius,
+					buttonSize: dimensions.buttonSize
+				}, config.direction)), /* @__PURE__ */ jsx("div", {
+					style: {
+						position: "absolute",
+						top: "50%",
+						left: "50%",
+						transform: "translate(-50%, -50%)",
+						width: "20px",
+						height: "20px",
+						borderRadius: "50%",
+						background: activeDirection ? `rgba(${colors.gold.r}, ${colors.gold.g}, ${colors.gold.b}, 0.9)` : `rgba(${colors.primary.r}, ${colors.primary.g}, ${colors.primary.b}, 0.7)`,
+						border: "2px solid #fff",
+						transition: "transform 0.15s ease, opacity 0.15s ease",
+						boxShadow: activeDirection ? `0 0 15px rgba(${colors.gold.r}, ${colors.gold.g}, ${colors.gold.b}, 0.8)` : "none"
+					},
+					"data-testid": "dpad-center"
+				})]
+			})
+		})
+	});
+};
+/**
+* Memoized VirtualDPad with custom comparison
+* Only re-renders when props change
+*/
+var VirtualDPad = React.memo(VirtualDPadComponent, (prevProps, nextProps) => {
+	return prevProps.disabled === nextProps.disabled && prevProps.size === nextProps.size && prevProps.bottom === nextProps.bottom && prevProps.left === nextProps.left && prevProps.opacity === nextProps.opacity && prevProps.onMove === nextProps.onMove;
+});
+VirtualDPad.displayName = "VirtualDPad";
+//#endregion
+export { VirtualDPad };
+
+//# sourceMappingURL=VirtualDPad.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualDPad.js","names":[],"sources":["../../../../src/components/shared/mobile/VirtualDPad.tsx"],"sourcesContent":["/**\n * VirtualDPad Component\n *\n * 8-directional virtual D-Pad for mobile touch controls\n * Provides tactile movement control with visual feedback and haptic response\n *\n * WCAG 2.1 Level AA Compliance:\n * - ARIA labels for all 8 directions\n * - Keyboard navigation (Arrow keys)\n * - Visible focus indicators (2px cyan border)\n * - role=\"group\" with descriptive label\n * - 48x48px minimum touch targets\n *\n * @module components/mobile/VirtualDPad\n * @category Mobile Controls\n * @korean 가상 방향 패드\n */\n\nimport { Html } from \"@react-three/drei\";\nimport React, { useCallback, useState, useMemo } from \"react\";\nimport { KOREAN_COLORS } from \"@/types/constants\";\nimport { triggerHaptic } from \"../../../utils/haptics\";\nimport { getColorRGB } from \"../../../utils/colorHelpers\";\nimport { handleKeyboardNav, getFocusStyle } from \"../../../utils/accessibility\";\nimport { createBilingualLabel } from \"../../../types/AccessibilityTypes\";\nimport { useThrottle } from \"../../../hooks/useThrottle\";\n\n/**\n * 8 directions for movement control\n */\nexport type Direction =\n  | \"up\"\n  | \"up-right\"\n  | \"right\"\n  | \"down-right\"\n  | \"down\"\n  | \"down-left\"\n  | \"left\"\n  | \"up-left\";\n\n/**\n * Event type for D-Pad interactions\n */\nexport type DPadEventType = \"start\" | \"end\";\n\n/**\n * Props for VirtualDPad component\n */\nexport interface VirtualDPadProps {\n  /** Callback when direction changes */\n  readonly onMove: (\n    direction: Direction | null,\n    eventType: DPadEventType,\n  ) => void;\n  /** Whether D-Pad is disabled */\n  readonly disabled?: boolean;\n  /** Size of the D-Pad in pixels (default: 140) */\n  readonly size?: number;\n  /** Position from bottom in pixels (default: 34 for safe area) */\n  readonly bottom?: number;\n  /** Position from left in pixels (default: 20) */\n  readonly left?: number;\n  /** Opacity of the D-Pad (default: 0.8) */\n  readonly opacity?: number;\n}\n\n/**\n * Direction configuration for D-Pad buttons\n */\ninterface DirectionConfig {\n  readonly direction: Direction;\n  readonly angle: number; // Angle in degrees for positioning\n  readonly korean: string; // Korean label\n  readonly englishLabel: string; // English label for ARIA\n}\n\n/**\n * 8-directional configuration\n * Arranged clockwise starting from up (0°)\n */\nconst DIRECTIONS: readonly DirectionConfig[] = [\n  { direction: \"up\", angle: 0, korean: \"↑\", englishLabel: \"Up\" },\n  { direction: \"up-right\", angle: 45, korean: \"↗\", englishLabel: \"Up Right\" },\n  { direction: \"right\", angle: 90, korean: \"→\", englishLabel: \"Right\" },\n  {\n    direction: \"down-right\",\n    angle: 135,\n    korean: \"↘\",\n    englishLabel: \"Down Right\",\n  },\n  { direction: \"down\", angle: 180, korean: \"↓\", englishLabel: \"Down\" },\n  {\n    direction: \"down-left\",\n    angle: 225,\n    korean: \"↙\",\n    englishLabel: \"Down Left\",\n  },\n  { direction: \"left\", angle: 270, korean: \"←\", englishLabel: \"Left\" },\n  { direction: \"up-left\", angle: 315, korean: \"↖\", englishLabel: \"Up Left\" },\n] as const;\n\n/**\n * Individual D-Pad button component\n */\ninterface DPadButtonProps {\n  readonly config: DirectionConfig;\n  readonly active: boolean;\n  readonly focused: boolean;\n  readonly onStart: (e: React.TouchEvent | React.MouseEvent) => void;\n  readonly onEnd: (e: React.TouchEvent | React.MouseEvent) => void;\n  readonly onKeyDown: (e: React.KeyboardEvent) => void;\n  readonly onFocus: () => void;\n  readonly onBlur: () => void;\n  readonly radius: number; // Radius for button positioning\n  readonly buttonSize: number;\n}\n\n/**\n * D-Pad button positioned around the center\n * Memoized to prevent unnecessary re-renders\n */\nconst DPadButton = React.memo<DPadButtonProps>(\n  ({\n    config,\n    active,\n    focused,\n    onStart,\n    onEnd,\n    onKeyDown,\n    onFocus,\n    onBlur,\n    radius,\n    buttonSize,\n  }) => {\n    // Calculate position using polar coordinates\n    const radian = (config.angle - 90) * (Math.PI / 180); // -90 to start from top\n    const x = Math.cos(radian) * radius;\n    const y = Math.sin(radian) * radius;\n\n    // Extract RGB colors using shared utility\n    const goldColor = getColorRGB(KOREAN_COLORS.ACCENT_GOLD);\n    const primaryColor = getColorRGB(KOREAN_COLORS.PRIMARY_CYAN);\n\n    const ariaLabel = createBilingualLabel(\n      `이동 ${config.korean}`,\n      `Move ${config.englishLabel}`,\n    ).label;\n\n    return (\n      <button\n        onTouchStart={onStart}\n        onTouchEnd={onEnd}\n        onMouseDown={onStart}\n        onMouseUp={onEnd}\n        onMouseLeave={onEnd}\n        onKeyDown={onKeyDown}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        style={{\n          position: \"absolute\",\n          left: `calc(50% + ${x}px - ${buttonSize / 2}px)`,\n          top: `calc(50% + ${y}px - ${buttonSize / 2}px)`,\n          width: `${buttonSize}px`,\n          height: `${buttonSize}px`,\n          borderRadius: \"50%\",\n          background: active\n            ? `rgba(${goldColor.r}, ${goldColor.g}, ${goldColor.b}, 0.9)`\n            : \"rgba(0, 0, 0, 0.5)\",\n          border: focused\n            ? `3px solid rgb(${primaryColor.r}, ${primaryColor.g}, ${primaryColor.b})`\n            : `2px solid rgba(${primaryColor.r}, ${primaryColor.g}, ${primaryColor.b}, ${active ? 1 : 0.6})`,\n          fontSize: \"20px\",\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.2s ease, opacity 0.2s ease\",\n          transform: active ? \"scale(1.1)\" : \"scale(1)\",\n          boxShadow: focused\n            ? `0 0 0 4px rgba(${primaryColor.r}, ${primaryColor.g}, ${primaryColor.b}, 0.5), 0 0 15px rgba(${goldColor.r}, ${goldColor.g}, ${goldColor.b}, 0.8)`\n            : active\n              ? `0 0 15px rgba(${goldColor.r}, ${goldColor.g}, ${goldColor.b}, 0.8)`\n              : \"none\",\n          ...getFocusStyle(focused),\n        }}\n        aria-label={ariaLabel}\n        aria-pressed={active}\n        role=\"button\"\n        tabIndex={0}\n        data-testid={`dpad-button-${config.direction}`}\n      >\n        {config.korean}\n      </button>\n    );\n  },\n  (prevProps, nextProps) => {\n    // Only re-render if active or focused state changes\n    // config.direction comparison removed as config is a stable reference\n    return (\n      prevProps.active === nextProps.active &&\n      prevProps.focused === nextProps.focused\n    );\n  },\n);\n\nDPadButton.displayName = \"DPadButton\";\n\n/**\n * VirtualDPad Component\n *\n * 8-directional virtual D-Pad for touch-based movement control\n * Features:\n * - 8 directional buttons arranged in a circle\n * - Visual feedback on active direction\n * - Haptic feedback on touch\n * - Korean theming with cyberpunk aesthetics\n * - 48x48px minimum touch targets (improved from iOS 44px guideline)\n * - 140x140px default size for better mobile usability\n *\n * Usage in Combat/Training:\n * - Provides tactical positioning and footwork\n * - Alternative to keyboard WASD controls\n * - Essential for mobile gameplay\n *\n * @example\n * ```tsx\n * <VirtualDPad\n *   onMove={(direction, eventType) => {\n *     if (eventType === 'start' && direction) {\n *       handleMovement(direction);\n *     } else if (eventType === 'end') {\n *       stopMovement();\n *     }\n *   }}\n *   disabled={isPaused}\n *   size={140}\n *   bottom={34}\n * />\n * ```\n *\n * @public\n * @korean 가상방향패드\n */\nconst VirtualDPadComponent: React.FC<VirtualDPadProps> = ({\n  onMove,\n  disabled = false,\n  size = 140,\n  bottom = 34,\n  left = 20,\n  opacity = 0.8,\n}) => {\n  const [activeDirection, setActiveDirection] = useState<Direction | null>(\n    null,\n  );\n  const [focusedDirection, setFocusedDirection] = useState<Direction | null>(\n    null,\n  );\n\n  // Throttle onMove callbacks to ~60fps for performance\n  const throttledOnMove = useThrottle(onMove, 16);\n\n  /**\n   * Handle touch or mouse start on a direction button\n   * Throttled for performance\n   */\n  const handleStart = useCallback(\n    (e: React.TouchEvent | React.MouseEvent, direction: Direction) => {\n      if (disabled) return;\n      e.preventDefault();\n      e.stopPropagation();\n\n      setActiveDirection(direction);\n      throttledOnMove(direction, \"start\");\n      triggerHaptic(\"light\");\n    },\n    [disabled, throttledOnMove],\n  );\n\n  /**\n   * Handle touch or mouse end\n   * Throttled for performance\n   */\n  const handleEnd = useCallback(\n    (e: React.TouchEvent | React.MouseEvent) => {\n      if (disabled) return;\n      e.preventDefault();\n      e.stopPropagation();\n\n      setActiveDirection(null);\n      throttledOnMove(null, \"end\");\n    },\n    [disabled, throttledOnMove],\n  );\n\n  /**\n   * Handle keyboard navigation for D-Pad\n   */\n  const handleKeyDown = useCallback(\n    (direction: Direction) => (e: React.KeyboardEvent) => {\n      if (disabled) return;\n      handleKeyboardNav(e.nativeEvent, {\n        onActivate: () => {\n          setActiveDirection(direction);\n          throttledOnMove(direction, \"start\");\n          triggerHaptic(\"light\");\n          // Release after brief delay\n          setTimeout(() => {\n            setActiveDirection(null);\n            throttledOnMove(null, \"end\");\n          }, 150);\n        },\n      });\n    },\n    [disabled, throttledOnMove],\n  );\n\n  // Memoize calculated dimensions to avoid recalculation\n  const dimensions = useMemo(\n    () => ({\n      buttonSize: Math.max(48, size * 0.3),\n      radius: (size - Math.max(48, size * 0.3)) / 2,\n    }),\n    [size],\n  );\n\n  // Memoize color values\n  const colors = useMemo(\n    () => ({\n      primary: getColorRGB(KOREAN_COLORS.PRIMARY_CYAN),\n      gold: getColorRGB(KOREAN_COLORS.ACCENT_GOLD),\n    }),\n    [],\n  );\n\n  return (\n    <Html fullscreen>\n      <div\n        style={{\n          position: \"absolute\",\n          bottom: `${bottom}px`,\n          left: `${left}px`,\n          width: `${size}px`,\n          height: `${size}px`,\n          opacity: disabled ? 0.3 : opacity,\n          pointerEvents: disabled ? \"none\" : \"auto\",\n        }}\n        data-testid=\"virtual-dpad\"\n      >\n        {/* D-Pad Container */}\n        <div\n          style={{\n            position: \"relative\",\n            width: \"100%\",\n            height: \"100%\",\n            background: \"rgba(0, 0, 0, 0.5)\",\n            borderRadius: \"50%\",\n            border: `2px solid rgba(${colors.primary.r}, ${colors.primary.g}, ${colors.primary.b}, 0.8)`,\n            boxShadow: `0 0 20px rgba(${colors.primary.r}, ${colors.primary.g}, ${colors.primary.b}, 0.3)`,\n          }}\n          role=\"group\"\n          aria-label={\n            createBilingualLabel(\"방향 패드\", \"Directional Pad\").label\n          }\n        >\n          {/* Directional Buttons */}\n          {DIRECTIONS.map((config) => (\n            <DPadButton\n              key={config.direction}\n              config={config}\n              active={activeDirection === config.direction}\n              focused={focusedDirection === config.direction}\n              onStart={(e) => handleStart(e, config.direction)}\n              onEnd={handleEnd}\n              onKeyDown={handleKeyDown(config.direction)}\n              onFocus={() => setFocusedDirection(config.direction)}\n              onBlur={() => setFocusedDirection(null)}\n              radius={dimensions.radius}\n              buttonSize={dimensions.buttonSize}\n            />\n          ))}\n\n          {/* Center Indicator */}\n          <div\n            style={{\n              position: \"absolute\",\n              top: \"50%\",\n              left: \"50%\",\n              transform: \"translate(-50%, -50%)\",\n              width: \"20px\",\n              height: \"20px\",\n              borderRadius: \"50%\",\n              background: activeDirection\n                ? `rgba(${colors.gold.r}, ${colors.gold.g}, ${colors.gold.b}, 0.9)`\n                : `rgba(${colors.primary.r}, ${colors.primary.g}, ${colors.primary.b}, 0.7)`,\n              border: \"2px solid #fff\",\n              transition: \"transform 0.15s ease, opacity 0.15s ease\",\n              boxShadow: activeDirection\n                ? `0 0 15px rgba(${colors.gold.r}, ${colors.gold.g}, ${colors.gold.b}, 0.8)`\n                : \"none\",\n            }}\n            data-testid=\"dpad-center\"\n          />\n        </div>\n      </div>\n    </Html>\n  );\n};\n\n/**\n * Memoized VirtualDPad with custom comparison\n * Only re-renders when props change\n */\nexport const VirtualDPad = React.memo(\n  VirtualDPadComponent,\n  (prevProps, nextProps) => {\n    return (\n      prevProps.disabled === nextProps.disabled &&\n      prevProps.size === nextProps.size &&\n      prevProps.bottom === nextProps.bottom &&\n      prevProps.left === nextProps.left &&\n      prevProps.opacity === nextProps.opacity &&\n      prevProps.onMove === nextProps.onMove\n    );\n  },\n);\n\nVirtualDPad.displayName = \"VirtualDPad\";\n"],"mappings":"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"}

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

@@ -0,0 +1,31 @@
+/**
+ * Mobile Touch Controls
+ *
+ * Comprehensive mobile touch control UI system for Black Trigram
+ * Provides virtual controls, gesture recognition, and haptic feedback
+ *
+ * @module components/mobile
+ * @category Mobile Controls
+ * @korean 모바일 컨트롤
+ */
+export { VirtualDPad } from "./VirtualDPad";
+export type { DPadEventType, Direction, VirtualDPadProps } from "./VirtualDPad";
+export { ActionButtons } from "./ActionButtons";
+export type { ActionButtonsProps, ButtonEventType } from "./ActionButtons";
+export { MobileControlsOverlay } from "./MobileControlsPure";
+export type { MobileControlsOverlayProps } from "./MobileControlsPure";
+export { StanceWheelPure } from "./StanceWheelPure";
+export type { StanceWheelPureProps } from "./StanceWheelPure";
+export { GestureRecognizerPure } from "./GestureRecognizerPure";
+export type { GestureRecognizerPureProps } from "./GestureRecognizerPure";
+export { StanceWheelPure as StanceWheel } from "./StanceWheelPure";
+export type { StanceWheelPureProps as StanceWheelProps } from "./StanceWheelPure";
+export { GestureRecognizerPure as GestureRecognizer } from "./GestureRecognizerPure";
+export type { GestureRecognizerPureProps as GestureRecognizerProps } from "./GestureRecognizerPure";
+export { applyOptimizedUpdate, createFilterStyle, createTransformStyle, useTouchOptimizer, } from "./TouchOptimizer";
+export type { TouchOptimizerOptions, TouchOptimizerReturn, TouchPosition, } from "./TouchOptimizer";
+export { HapticController, OptimizedCombatHaptics, stopOptimizedHaptic, triggerCustomOptimizedHaptic, triggerOptimizedHaptic, } from "./HapticController";
+export type { DevicePerformanceTier, HapticIntensity as OptimizedHapticIntensity, } from "./HapticController";
+export { PerformanceMonitor, canHandle60Fps, getPerformanceMonitor, getPerformanceTier, getQualityRecommendations, } from "./PerformanceMonitor";
+export type { PerformanceMetrics, PerformanceMonitorOptions, PerformanceTier, } from "./PerformanceMonitor";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/mobile/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,aAAa,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEhF,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAI3E,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,YAAY,EAAE,0BAA0B,EAAE,MAAM,sBAAsB,CAAC;AAEvE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE9D,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,YAAY,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAI1E,OAAO,EAAE,eAAe,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACnE,YAAY,EAAE,oBAAoB,IAAI,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAElF,OAAO,EAAE,qBAAqB,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACrF,YAAY,EAAE,0BAA0B,IAAI,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAGpG,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,oBAAoB,EACpB,iBAAiB,GAClB,MAAM,kBAAkB,CAAC;AAC1B,YAAY,EACV,qBAAqB,EACrB,oBAAoB,EACpB,aAAa,GACd,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EACL,gBAAgB,EAChB,sBAAsB,EACtB,mBAAmB,EACnB,4BAA4B,EAC5B,sBAAsB,GACvB,MAAM,oBAAoB,CAAC;AAC5B,YAAY,EACV,qBAAqB,EACrB,eAAe,IAAI,wBAAwB,GAC5C,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EACL,kBAAkB,EAClB,cAAc,EACd,qBAAqB,EACrB,kBAAkB,EAClB,yBAAyB,GAC1B,MAAM,sBAAsB,CAAC;AAC9B,YAAY,EACV,kBAAkB,EAClB,yBAAyB,EACzB,eAAe,GAChB,MAAM,sBAAsB,CAAC"}

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

@@ -0,0 +1,7 @@
+import "./VirtualDPad.js";
+import "./HapticController.js";
+import "./TouchOptimizer.js";
+import "./ActionButtons.js";
+import "./MobileControlsPure.js";
+import "./StanceWheelPure.js";
+import "./GestureRecognizerPure.js";

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

@@ -0,0 +1,78 @@
+/**
+ * Body Surface component for realistic humanoid skin/flesh rendering
+ *
+ * **Purpose**: Provides continuous body surface layer between bones and clothing
+ * to create organic, human-like appearance instead of robotic segmented look.
+ *
+ * **Features**:
+ * - Continuous skin layer covering neck, torso, shoulders, arms, and legs
+ * - Archetype-specific skin tones for visual variety
+ * - Proper body thickness scaling based on muscle and fat mass
+ * - Double-sided rendering (THREE.DoubleSide) for complete 360° coverage and gap prevention
+ * - Smooth tapering for realistic proportions
+ * - Enhanced material with subsurface scattering and clearcoat
+ * - High-quality geometry with increased segment counts
+ * - Shoulder joints for smooth transitions
+ *
+ * **Rendering Order**: Bones → Muscles (optional) → Body Surface → Clothing
+ *
+ * @module components/three/BodySurface
+ * @category 3D Components
+ * @korean 신체표면컴포넌트
+ */
+import React from "react";
+import type { PlayerArchetype } from "../../../../types/common";
+/**
+ * Props for BodySurface component
+ *
+ * @korean 신체표면속성
+ */
+export interface BodySurfaceProps {
+    /**
+     * Name of the bone this body surface attaches to
+     * @korean 뼈이름
+     */
+    readonly boneName: string;
+    /**
+     * Player archetype for skin tone
+     * @korean 플레이어원형
+     */
+    readonly archetype: PlayerArchetype;
+    /**
+     * Physical attributes for body sizing
+     * @korean 신체속성
+     */
+    readonly physicalAttributes?: {
+        readonly muscleMass: number;
+        readonly fatMass: number;
+        readonly shoulderWidth: number;
+        readonly torsoLength: number;
+        readonly armLength: number;
+        readonly legLength: number;
+    };
+    /**
+     * Distance from camera for LOD optimization
+     * @korean 카메라거리
+     */
+    readonly cameraDistance?: number;
+}
+/**
+ * BodySurface Component
+ *
+ * Renders realistic body surface (skin/flesh) attached to a specific bone.
+ * Creates organic, human-like appearance by providing continuous body coverage.
+ *
+ * @example
+ * ```tsx
+ * <BodySurface
+ *   boneName="spine_middle"
+ *   archetype={PlayerArchetype.MUSA}
+ *   physicalAttributes={musaPhysicalAttrs}
+ * />
+ * ```
+ *
+ * @korean 신체표면컴포넌트
+ */
+export declare const BodySurface: React.FC<BodySurfaceProps>;
+export default BodySurface;
+//# sourceMappingURL=BodySurface.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BodySurface.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/three/anatomy/BodySurface.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,KAA6B,MAAM,OAAO,CAAC;AAUlD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAGhE;;;;GAIG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAE1B;;;OAGG;IACH,QAAQ,CAAC,SAAS,EAAE,eAAe,CAAC;IAEpC;;;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,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;IAEF;;;OAGG;IACH,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC;CAClC;AAydD;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA6HlD,CAAC;AAEF,eAAe,WAAW,CAAC"}