blacktrigram 0.7.2

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

@@ -0,0 +1,294 @@
+import { KOREAN_COLORS } from "../../../types/constants/colors.js";
+import "../../../types/constants/index.js";
+import { hexToRgbaString } from "../../../utils/colorUtils.js";
+import { triggerHaptic } from "../../../utils/haptics.js";
+import React, { useCallback, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/shared/mobile/MobileControlsPure.tsx
+/**
+* MobileControlsPure - Pure DOM mobile controls (no Three.js/drei dependency)
+*
+* These controls render OUTSIDE the Three.js Canvas for reliable touch event handling.
+* The key difference from VirtualDPad/ActionButtons is that these don't use drei's Html
+* component, which can intercept touch events on mobile devices.
+*
+* Visual style matches the existing Korean cyberpunk aesthetic.
+*
+* @module components/mobile/MobileControlsPure
+* @category Mobile Controls
+* @korean 순수 DOM 모바일 컨트롤
+*/
+var DIRECTIONS = [
+	{
+		direction: "up",
+		angle: 0,
+		symbol: "▲",
+		keys: ["w"]
+	},
+	{
+		direction: "up-right",
+		angle: 45,
+		symbol: "◥",
+		keys: ["w", "d"]
+	},
+	{
+		direction: "right",
+		angle: 90,
+		symbol: "▶",
+		keys: ["d"]
+	},
+	{
+		direction: "down-right",
+		angle: 135,
+		symbol: "◢",
+		keys: ["s", "d"]
+	},
+	{
+		direction: "down",
+		angle: 180,
+		symbol: "▼",
+		keys: ["s"]
+	},
+	{
+		direction: "down-left",
+		angle: 225,
+		symbol: "◣",
+		keys: ["s", "a"]
+	},
+	{
+		direction: "left",
+		angle: 270,
+		symbol: "◀",
+		keys: ["a"]
+	},
+	{
+		direction: "up-left",
+		angle: 315,
+		symbol: "◤",
+		keys: ["w", "a"]
+	}
+];
+/**
+* MobileControlsOverlay - Floating mobile controls rendered outside Canvas
+*
+* Positions D-Pad on left, Action buttons on right, floating above BottomHUD.
+* Uses pure DOM events for reliable mobile touch handling.
+*/
+var MobileControlsOverlay = React.memo(({ onMove, onAttack, onBlock, disabled = false, bottom = 160, opacity = .85 }) => {
+	const [activeDirection, setActiveDirection] = useState(null);
+	const [attackPressed, setAttackPressed] = useState(false);
+	const [blockPressed, setBlockPressed] = useState(false);
+	const dpadSize = 140;
+	const buttonSize = dpadSize * .3;
+	const radius = dpadSize * .32;
+	const handleDPadStart = useCallback((e, direction) => {
+		if (disabled) return;
+		e.preventDefault();
+		e.stopPropagation();
+		setActiveDirection(direction);
+		triggerHaptic("light");
+		onMove(direction, "start");
+	}, [disabled, onMove]);
+	const handleDPadEnd = useCallback((e) => {
+		if (disabled) return;
+		e.preventDefault();
+		e.stopPropagation();
+		setActiveDirection(null);
+		onMove(null, "end");
+	}, [disabled, onMove]);
+	const handleAttackStart = useCallback((e) => {
+		if (disabled) return;
+		e.preventDefault();
+		e.stopPropagation();
+		setAttackPressed(true);
+		triggerHaptic("medium");
+		onAttack();
+	}, [disabled, onAttack]);
+	const handleAttackEnd = useCallback((e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		setAttackPressed(false);
+	}, []);
+	const handleBlockStart = useCallback((e) => {
+		if (disabled) return;
+		e.preventDefault();
+		e.stopPropagation();
+		setBlockPressed(true);
+		triggerHaptic("light");
+		onBlock("start");
+	}, [disabled, onBlock]);
+	const handleBlockEnd = useCallback((e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		setBlockPressed(false);
+		onBlock("end");
+	}, [onBlock]);
+	const glowStyle = useMemo(() => ({ boxShadow: `0 0 20px ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, .4)}, inset 0 0 10px ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, .2)}` }), []);
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			position: "absolute",
+			bottom: `${bottom}px`,
+			left: 0,
+			right: 0,
+			height: `${dpadSize + 40}px`,
+			display: "flex",
+			justifyContent: "space-between",
+			alignItems: "flex-end",
+			padding: "0 20px",
+			pointerEvents: "none",
+			zIndex: 1e3,
+			opacity: disabled ? .4 : opacity
+		},
+		"data-testid": "mobile-controls-overlay",
+		children: [/* @__PURE__ */ jsxs("div", {
+			style: {
+				position: "relative",
+				width: `${dpadSize}px`,
+				height: `${dpadSize}px`,
+				pointerEvents: "auto",
+				touchAction: "none"
+			},
+			"data-testid": "mobile-dpad",
+			children: [
+				/* @__PURE__ */ jsx("div", { style: {
+					position: "absolute",
+					top: "50%",
+					left: "50%",
+					transform: "translate(-50%, -50%)",
+					width: `${dpadSize * .9}px`,
+					height: `${dpadSize * .9}px`,
+					borderRadius: "50%",
+					background: `radial-gradient(circle, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, .8)} 0%, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, .95)} 100%)`,
+					border: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, .5)}`,
+					...glowStyle
+				} }),
+				DIRECTIONS.map((config) => {
+					const radian = (config.angle - 90) * (Math.PI / 180);
+					const x = Math.cos(radian) * radius;
+					const y = Math.sin(radian) * radius;
+					const isActive = activeDirection === config.direction;
+					return /* @__PURE__ */ jsx("button", {
+						onTouchStart: (e) => handleDPadStart(e, config.direction),
+						onTouchEnd: handleDPadEnd,
+						onTouchCancel: handleDPadEnd,
+						onMouseDown: (e) => handleDPadStart(e, config.direction),
+						onMouseUp: handleDPadEnd,
+						onMouseLeave: handleDPadEnd,
+						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: isActive ? `radial-gradient(circle, ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 1)} 0%, ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, .7)} 100%)` : `radial-gradient(circle, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, .9)} 0%, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, .9)} 100%)`,
+							border: `2px solid ${hexToRgbaString(isActive ? KOREAN_COLORS.ACCENT_GOLD : KOREAN_COLORS.PRIMARY_CYAN, isActive ? 1 : .7)}`,
+							fontSize: "14px",
+							color: isActive ? "#000" : "#fff",
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "center",
+							cursor: "pointer",
+							touchAction: "none",
+							transform: isActive ? "scale(1.15)" : "scale(1)",
+							transition: "transform 0.1s ease, background 0.1s ease",
+							boxShadow: isActive ? `0 0 15px ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, .8)}` : "none",
+							outline: "none",
+							WebkitTapHighlightColor: "transparent"
+						},
+						"aria-label": `Move ${config.direction}`,
+						"data-testid": `mobile-dpad-${config.direction}`,
+						children: config.symbol
+					}, config.direction);
+				}),
+				/* @__PURE__ */ jsx("div", { style: {
+					position: "absolute",
+					top: "50%",
+					left: "50%",
+					transform: "translate(-50%, -50%)",
+					width: "20px",
+					height: "20px",
+					borderRadius: "50%",
+					background: activeDirection ? hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, .9) : hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, .6),
+					border: "2px solid rgba(255,255,255,0.8)",
+					transition: "background 0.15s ease"
+				} })
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: "12px",
+				pointerEvents: "auto",
+				touchAction: "none"
+			},
+			"data-testid": "mobile-action-buttons",
+			children: [/* @__PURE__ */ jsx("button", {
+				onTouchStart: handleAttackStart,
+				onTouchEnd: handleAttackEnd,
+				onTouchCancel: handleAttackEnd,
+				onMouseDown: handleAttackStart,
+				onMouseUp: handleAttackEnd,
+				onMouseLeave: handleAttackEnd,
+				style: {
+					width: "80px",
+					height: "80px",
+					borderRadius: "50%",
+					background: attackPressed ? `radial-gradient(circle, ${hexToRgbaString(KOREAN_COLORS.PRIMARY_RED, 1)} 0%, ${hexToRgbaString(KOREAN_COLORS.PRIMARY_RED, .7)} 100%)` : `radial-gradient(circle, rgba(255, 80, 80, 0.9) 0%, rgba(180, 40, 40, 0.9) 100%)`,
+					border: `3px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_RED, 1)}`,
+					fontSize: "28px",
+					color: "#fff",
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					cursor: "pointer",
+					touchAction: "none",
+					transform: attackPressed ? "scale(0.92)" : "scale(1)",
+					transition: "transform 0.1s ease",
+					boxShadow: attackPressed ? `0 0 25px ${hexToRgbaString(KOREAN_COLORS.PRIMARY_RED, .9)}` : `0 0 15px ${hexToRgbaString(KOREAN_COLORS.PRIMARY_RED, .5)}`,
+					outline: "none",
+					WebkitTapHighlightColor: "transparent",
+					fontWeight: "bold"
+				},
+				"aria-label": "공격 | Attack",
+				"data-testid": "mobile-attack-button",
+				children: "⚡"
+			}), /* @__PURE__ */ jsx("button", {
+				onTouchStart: handleBlockStart,
+				onTouchEnd: handleBlockEnd,
+				onTouchCancel: handleBlockEnd,
+				onMouseDown: handleBlockStart,
+				onMouseUp: handleBlockEnd,
+				onMouseLeave: handleBlockEnd,
+				style: {
+					width: "65px",
+					height: "65px",
+					borderRadius: "50%",
+					marginLeft: "auto",
+					background: blockPressed ? `radial-gradient(circle, ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 1)} 0%, ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, .7)} 100%)` : `radial-gradient(circle, rgba(0, 200, 200, 0.8) 0%, rgba(0, 120, 120, 0.8) 100%)`,
+					border: `3px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 1)}`,
+					fontSize: "22px",
+					color: "#fff",
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					cursor: "pointer",
+					touchAction: "none",
+					transform: blockPressed ? "scale(0.92)" : "scale(1)",
+					transition: "transform 0.1s ease",
+					boxShadow: blockPressed ? `0 0 20px ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, .9)}` : `0 0 10px ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, .4)}`,
+					outline: "none",
+					WebkitTapHighlightColor: "transparent"
+				},
+				"aria-label": "방어 | Block",
+				"data-testid": "mobile-block-button",
+				children: "🛡️"
+			})]
+		})]
+	});
+});
+MobileControlsOverlay.displayName = "MobileControlsOverlay";
+//#endregion
+export { MobileControlsOverlay as default };
+
+//# sourceMappingURL=MobileControlsPure.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MobileControlsPure.js","names":[],"sources":["../../../../src/components/shared/mobile/MobileControlsPure.tsx"],"sourcesContent":["/**\n * MobileControlsPure - Pure DOM mobile controls (no Three.js/drei dependency)\n *\n * These controls render OUTSIDE the Three.js Canvas for reliable touch event handling.\n * The key difference from VirtualDPad/ActionButtons is that these don't use drei's Html\n * component, which can intercept touch events on mobile devices.\n *\n * Visual style matches the existing Korean cyberpunk aesthetic.\n *\n * @module components/mobile/MobileControlsPure\n * @category Mobile Controls\n * @korean 순수 DOM 모바일 컨트롤\n */\n\nimport React, { useCallback, useMemo, useState } from \"react\";\nimport { KOREAN_COLORS } from \"@/types/constants\";\nimport { hexToRgbaString } from \"../../../utils/colorUtils\";\nimport { triggerHaptic } from \"../../../utils/haptics\";\n\n// Re-export types from VirtualDPad for compatibility\nexport type Direction =\n  | \"up\"\n  | \"up-right\"\n  | \"right\"\n  | \"down-right\"\n  | \"down\"\n  | \"down-left\"\n  | \"left\"\n  | \"up-left\";\n\nexport type DPadEventType = \"start\" | \"end\";\nexport type ButtonEventType = \"start\" | \"end\";\n\n/**\n * Props for the combined mobile controls overlay\n */\nexport interface MobileControlsOverlayProps {\n  /** Callback when D-Pad direction changes */\n  readonly onMove: (\n    direction: Direction | null,\n    eventType: DPadEventType,\n  ) => void;\n  /** Callback when attack is pressed */\n  readonly onAttack: () => void;\n  /** Callback when block is pressed/released */\n  readonly onBlock: (eventType: ButtonEventType) => void;\n  /** Whether controls are disabled */\n  readonly disabled?: boolean;\n  /** Bottom offset in pixels (default: 160 to clear BottomHUD) */\n  readonly bottom?: number;\n  /** Opacity (default: 0.85) */\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;\n  readonly symbol: string;\n  readonly keys: string[]; // Keys to dispatch\n}\n\nconst DIRECTIONS: readonly DirectionConfig[] = [\n  { direction: \"up\", angle: 0, symbol: \"▲\", keys: [\"w\"] },\n  { direction: \"up-right\", angle: 45, symbol: \"◥\", keys: [\"w\", \"d\"] },\n  { direction: \"right\", angle: 90, symbol: \"▶\", keys: [\"d\"] },\n  { direction: \"down-right\", angle: 135, symbol: \"◢\", keys: [\"s\", \"d\"] },\n  { direction: \"down\", angle: 180, symbol: \"▼\", keys: [\"s\"] },\n  { direction: \"down-left\", angle: 225, symbol: \"◣\", keys: [\"s\", \"a\"] },\n  { direction: \"left\", angle: 270, symbol: \"◀\", keys: [\"a\"] },\n  { direction: \"up-left\", angle: 315, symbol: \"◤\", keys: [\"w\", \"a\"] },\n] as const;\n\n/**\n * MobileControlsOverlay - Floating mobile controls rendered outside Canvas\n *\n * Positions D-Pad on left, Action buttons on right, floating above BottomHUD.\n * Uses pure DOM events for reliable mobile touch handling.\n */\nexport const MobileControlsOverlay: React.FC<MobileControlsOverlayProps> =\n  React.memo(\n    ({\n      onMove,\n      onAttack,\n      onBlock,\n      disabled = false,\n      bottom = 160,\n      opacity = 0.85,\n    }) => {\n      const [activeDirection, setActiveDirection] = useState<Direction | null>(\n        null,\n      );\n      const [attackPressed, setAttackPressed] = useState(false);\n      const [blockPressed, setBlockPressed] = useState(false);\n\n      // D-Pad sizing\n      const dpadSize = 140;\n      const buttonSize = dpadSize * 0.3;\n      const radius = dpadSize * 0.32;\n\n      // Handle D-Pad press\n      const handleDPadStart = useCallback(\n        (e: React.TouchEvent | React.MouseEvent, direction: Direction) => {\n          if (disabled) return;\n          e.preventDefault();\n          e.stopPropagation();\n          setActiveDirection(direction);\n          triggerHaptic(\"light\");\n          onMove(direction, \"start\");\n        },\n        [disabled, onMove],\n      );\n\n      // Handle D-Pad release\n      const handleDPadEnd = useCallback(\n        (e: React.TouchEvent | React.MouseEvent) => {\n          if (disabled) return;\n          e.preventDefault();\n          e.stopPropagation();\n          setActiveDirection(null);\n          onMove(null, \"end\");\n        },\n        [disabled, onMove],\n      );\n\n      // Handle Attack press\n      const handleAttackStart = useCallback(\n        (e: React.TouchEvent | React.MouseEvent) => {\n          if (disabled) return;\n          e.preventDefault();\n          e.stopPropagation();\n          setAttackPressed(true);\n          triggerHaptic(\"medium\");\n          onAttack();\n        },\n        [disabled, onAttack],\n      );\n\n      const handleAttackEnd = useCallback(\n        (e: React.TouchEvent | React.MouseEvent) => {\n          e.preventDefault();\n          e.stopPropagation();\n          setAttackPressed(false);\n        },\n        [],\n      );\n\n      // Handle Block press/release\n      const handleBlockStart = useCallback(\n        (e: React.TouchEvent | React.MouseEvent) => {\n          if (disabled) return;\n          e.preventDefault();\n          e.stopPropagation();\n          setBlockPressed(true);\n          triggerHaptic(\"light\");\n          onBlock(\"start\");\n        },\n        [disabled, onBlock],\n      );\n\n      const handleBlockEnd = useCallback(\n        (e: React.TouchEvent | React.MouseEvent) => {\n          e.preventDefault();\n          e.stopPropagation();\n          setBlockPressed(false);\n          onBlock(\"end\");\n        },\n        [onBlock],\n      );\n\n      // Common button styles\n      const glowStyle = useMemo(\n        () => ({\n          boxShadow: `0 0 20px ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.4)}, inset 0 0 10px ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.2)}`,\n        }),\n        [],\n      );\n\n      return (\n        <div\n          style={{\n            position: \"absolute\", // Changed from fixed to position relative to container\n            bottom: `${bottom}px`,\n            left: 0,\n            right: 0,\n            height: `${dpadSize + 40}px`,\n            display: \"flex\",\n            justifyContent: \"space-between\",\n            alignItems: \"flex-end\",\n            padding: \"0 20px\",\n            pointerEvents: \"none\",\n            zIndex: 1000,\n            opacity: disabled ? 0.4 : opacity,\n          }}\n          data-testid=\"mobile-controls-overlay\"\n        >\n          {/* D-Pad (Left Side) */}\n          <div\n            style={{\n              position: \"relative\",\n              width: `${dpadSize}px`,\n              height: `${dpadSize}px`,\n              pointerEvents: \"auto\",\n              touchAction: \"none\",\n            }}\n            data-testid=\"mobile-dpad\"\n          >\n            {/* D-Pad Background Circle */}\n            <div\n              style={{\n                position: \"absolute\",\n                top: \"50%\",\n                left: \"50%\",\n                transform: \"translate(-50%, -50%)\",\n                width: `${dpadSize * 0.9}px`,\n                height: `${dpadSize * 0.9}px`,\n                borderRadius: \"50%\",\n                background: `radial-gradient(circle, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.8)} 0%, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.95)} 100%)`,\n                border: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.5)}`,\n                ...glowStyle,\n              }}\n            />\n\n            {/* Direction Buttons */}\n            {DIRECTIONS.map((config) => {\n              const radian = (config.angle - 90) * (Math.PI / 180);\n              const x = Math.cos(radian) * radius;\n              const y = Math.sin(radian) * radius;\n              const isActive = activeDirection === config.direction;\n\n              return (\n                <button\n                  key={config.direction}\n                  onTouchStart={(e) => handleDPadStart(e, config.direction)}\n                  onTouchEnd={handleDPadEnd}\n                  onTouchCancel={handleDPadEnd}\n                  onMouseDown={(e) => handleDPadStart(e, config.direction)}\n                  onMouseUp={handleDPadEnd}\n                  onMouseLeave={handleDPadEnd}\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: isActive\n                      ? `radial-gradient(circle, ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 1)} 0%, ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 0.7)} 100%)`\n                      : `radial-gradient(circle, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, 0.9)} 0%, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.9)} 100%)`,\n                    border: `2px solid ${hexToRgbaString(isActive ? KOREAN_COLORS.ACCENT_GOLD : KOREAN_COLORS.PRIMARY_CYAN, isActive ? 1 : 0.7)}`,\n                    fontSize: \"14px\",\n                    color: isActive ? \"#000\" : \"#fff\",\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    justifyContent: \"center\",\n                    cursor: \"pointer\",\n                    touchAction: \"none\",\n                    transform: isActive ? \"scale(1.15)\" : \"scale(1)\",\n                    transition: \"transform 0.1s ease, background 0.1s ease\",\n                    boxShadow: isActive\n                      ? `0 0 15px ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 0.8)}`\n                      : \"none\",\n                    outline: \"none\",\n                    WebkitTapHighlightColor: \"transparent\",\n                  }}\n                  aria-label={`Move ${config.direction}`}\n                  data-testid={`mobile-dpad-${config.direction}`}\n                >\n                  {config.symbol}\n                </button>\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                  ? hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 0.9)\n                  : hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.6),\n                border: \"2px solid rgba(255,255,255,0.8)\",\n                transition: \"background 0.15s ease\",\n              }}\n            />\n          </div>\n\n          {/* Action Buttons (Right Side) */}\n          <div\n            style={{\n              display: \"flex\",\n              flexDirection: \"column\",\n              gap: \"12px\",\n              pointerEvents: \"auto\",\n              touchAction: \"none\",\n            }}\n            data-testid=\"mobile-action-buttons\"\n          >\n            {/* Attack Button - Large Red */}\n            <button\n              onTouchStart={handleAttackStart}\n              onTouchEnd={handleAttackEnd}\n              onTouchCancel={handleAttackEnd}\n              onMouseDown={handleAttackStart}\n              onMouseUp={handleAttackEnd}\n              onMouseLeave={handleAttackEnd}\n              style={{\n                width: \"80px\",\n                height: \"80px\",\n                borderRadius: \"50%\",\n                background: attackPressed\n                  ? `radial-gradient(circle, ${hexToRgbaString(KOREAN_COLORS.PRIMARY_RED, 1)} 0%, ${hexToRgbaString(KOREAN_COLORS.PRIMARY_RED, 0.7)} 100%)`\n                  : `radial-gradient(circle, rgba(255, 80, 80, 0.9) 0%, rgba(180, 40, 40, 0.9) 100%)`,\n                border: `3px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_RED, 1)}`,\n                fontSize: \"28px\",\n                color: \"#fff\",\n                display: \"flex\",\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                cursor: \"pointer\",\n                touchAction: \"none\",\n                transform: attackPressed ? \"scale(0.92)\" : \"scale(1)\",\n                transition: \"transform 0.1s ease\",\n                boxShadow: attackPressed\n                  ? `0 0 25px ${hexToRgbaString(KOREAN_COLORS.PRIMARY_RED, 0.9)}`\n                  : `0 0 15px ${hexToRgbaString(KOREAN_COLORS.PRIMARY_RED, 0.5)}`,\n                outline: \"none\",\n                WebkitTapHighlightColor: \"transparent\",\n                fontWeight: \"bold\",\n              }}\n              aria-label=\"공격 | Attack\"\n              data-testid=\"mobile-attack-button\"\n            >\n              ⚡\n            </button>\n\n            {/* Block Button - Smaller Cyan */}\n            <button\n              onTouchStart={handleBlockStart}\n              onTouchEnd={handleBlockEnd}\n              onTouchCancel={handleBlockEnd}\n              onMouseDown={handleBlockStart}\n              onMouseUp={handleBlockEnd}\n              onMouseLeave={handleBlockEnd}\n              style={{\n                width: \"65px\",\n                height: \"65px\",\n                borderRadius: \"50%\",\n                marginLeft: \"auto\",\n                background: blockPressed\n                  ? `radial-gradient(circle, ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 1)} 0%, ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.7)} 100%)`\n                  : `radial-gradient(circle, rgba(0, 200, 200, 0.8) 0%, rgba(0, 120, 120, 0.8) 100%)`,\n                border: `3px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 1)}`,\n                fontSize: \"22px\",\n                color: \"#fff\",\n                display: \"flex\",\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                cursor: \"pointer\",\n                touchAction: \"none\",\n                transform: blockPressed ? \"scale(0.92)\" : \"scale(1)\",\n                transition: \"transform 0.1s ease\",\n                boxShadow: blockPressed\n                  ? `0 0 20px ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.9)}`\n                  : `0 0 10px ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.4)}`,\n                outline: \"none\",\n                WebkitTapHighlightColor: \"transparent\",\n              }}\n              aria-label=\"방어 | Block\"\n              data-testid=\"mobile-block-button\"\n            >\n              🛡️\n            </button>\n          </div>\n        </div>\n      );\n    },\n  );\n\nMobileControlsOverlay.displayName = \"MobileControlsOverlay\";\n\nexport default MobileControlsOverlay;\n"],"mappings":"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"}

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

@@ -0,0 +1,249 @@
+/**
+ * PerformanceMonitor
+ *
+ * Device capability detection and performance monitoring
+ * Provides adaptive behavior based on device performance
+ *
+ * Key Features:
+ * - Device performance tier detection (high, medium, low)
+ * - Real-time FPS monitoring
+ * - Frame drop detection
+ * - Adaptive quality recommendations
+ * - Memory usage tracking
+ *
+ * @module components/mobile/PerformanceMonitor
+ * @category Mobile Controls
+ * @korean 성능 모니터
+ */
+/**
+ * Device performance tier
+ */
+export type PerformanceTier = 'high' | 'medium' | 'low';
+/**
+ * Performance metrics
+ */
+export interface PerformanceMetrics {
+    /** Current FPS (frames per second) */
+    readonly fps: number;
+    /** Average frame time in milliseconds */
+    readonly avgFrameTime: number;
+    /** Frame drop count in last second */
+    readonly frameDrops: number;
+    /** Memory usage in MB (if available) */
+    readonly memoryUsage: number | null;
+    /** Device performance tier */
+    readonly tier: PerformanceTier;
+    /** Is 60fps target being met */
+    readonly isSixtyFps: boolean;
+}
+/**
+ * Performance monitoring options
+ */
+export interface PerformanceMonitorOptions {
+    /** Sample window size in frames (default: 60) */
+    readonly sampleWindow?: number;
+    /** Target FPS (default: 60) */
+    readonly targetFps?: number;
+    /** Frame time threshold for drops in ms (default: 20) */
+    readonly frameDropThreshold?: number;
+    /** Enable memory monitoring (default: true) */
+    readonly enableMemoryMonitoring?: boolean;
+}
+/**
+ * PerformanceMonitor class
+ * Monitors device performance and provides adaptive recommendations
+ *
+ * @public
+ * @korean 성능모니터
+ */
+export declare class PerformanceMonitor {
+    private static instance;
+    private tier;
+    private fps;
+    private avgFrameTime;
+    private frameDrops;
+    private memoryUsage;
+    private sampleWindow;
+    private frameDropThreshold;
+    private enableMemoryMonitoring;
+    private frameTimes;
+    private lastFrameTime;
+    private rafId;
+    private isMonitoring;
+    /**
+     * Private constructor for singleton pattern
+     */
+    private constructor();
+    /**
+     * Get singleton instance
+     *
+     * @param options - Performance monitor options
+     * @returns PerformanceMonitor instance
+     * @korean 인스턴스가져오기
+     *
+     * Note: Options are only applied on first initialization. Subsequent calls with
+     * options will ignore them and emit a warning. Configure the PerformanceMonitor
+     * on the first getInstance call only.
+     */
+    static getInstance(options?: PerformanceMonitorOptions): PerformanceMonitor;
+    /**
+     * Detect device performance tier
+     * Uses multiple heuristics to determine device capability
+     *
+     * Edge Cases:
+     * - Low-end desktops (2 cores, 2GB RAM) may score as 'medium' due to desktop bonus
+     * - High-end mobiles (6+ cores, 6GB+ RAM) correctly score as 'high'
+     * - Very low-spec devices (≤2 cores AND ≤2GB) are always 'low' regardless of platform
+     *
+     * This intentionally favors:
+     * - Devices with more CPU cores and memory
+     * - iOS devices (typically good performance)
+     * - Better network connections (4G/5G)
+     *
+     * @returns Performance tier (high, medium, low)
+     * @korean 성능등급감지
+     */
+    private detectPerformanceTier;
+    /**
+     * Start monitoring performance
+     * Begins tracking FPS and frame times
+     *
+     * @korean 모니터링시작
+     * @public
+     */
+    startMonitoring(): void;
+    /**
+     * Stop monitoring performance
+     *
+     * @korean 모니터링중지
+     * @public
+     */
+    stopMonitoring(): void;
+    /**
+     * Monitor frame timing
+     * Called on every animation frame
+     *
+     * @korean 프레임모니터링
+     */
+    private monitorFrame;
+    /**
+     * Calculate performance metrics from frame times
+     *
+     * @korean 메트릭계산
+     */
+    private calculateMetrics;
+    /**
+     * Update memory usage metrics
+     *
+     * @korean 메모리사용량업데이트
+     */
+    private updateMemoryUsage;
+    /**
+     * Get current performance metrics
+     *
+     * @returns Current performance metrics
+     * @korean 메트릭가져오기
+     * @public
+     */
+    getMetrics(): PerformanceMetrics;
+    /**
+     * Get device performance tier
+     *
+     * @returns Performance tier
+     * @korean 성능등급가져오기
+     * @public
+     */
+    getPerformanceTier(): PerformanceTier;
+    /**
+     * Check if device can handle 60fps
+     *
+     * @returns True if 60fps is achievable
+     * @korean 60fps가능여부
+     * @public
+     */
+    canHandle60Fps(): boolean;
+    /**
+     * Get recommended quality settings based on performance
+     *
+     * @returns Quality recommendations
+     * @korean 품질권장사항가져오기
+     * @public
+     */
+    getQualityRecommendations(): {
+        enableHaptics: boolean;
+        enableParticles: boolean;
+        enableShadows: boolean;
+        targetFps: number;
+        coalescingRate: number;
+    };
+    /**
+     * Check if frame drops are occurring
+     *
+     * @returns True if frame drops detected
+     * @korean 프레임드롭감지
+     * @public
+     */
+    hasFrameDrops(): boolean;
+    /**
+     * Get current FPS
+     *
+     * @returns Current FPS
+     * @korean FPS가져오기
+     * @public
+     */
+    getCurrentFps(): number;
+    /**
+     * Get average frame time
+     *
+     * @returns Average frame time in milliseconds
+     * @korean 평균프레임타임가져오기
+     * @public
+     */
+    getAvgFrameTime(): number;
+    /**
+     * Reset performance metrics
+     *
+     * @korean 메트릭리셋
+     * @public
+     */
+    reset(): void;
+}
+/**
+ * Convenience function to get performance monitor instance
+ *
+ * @returns PerformanceMonitor instance
+ * @korean 성능모니터가져오기
+ * @public
+ */
+export declare function getPerformanceMonitor(): PerformanceMonitor;
+/**
+ * Convenience function to get current performance tier
+ *
+ * @returns Performance tier
+ * @korean 성능등급가져오기
+ * @public
+ */
+export declare function getPerformanceTier(): PerformanceTier;
+/**
+ * Convenience function to check if device can handle 60fps
+ *
+ * @returns True if 60fps is achievable
+ * @korean 60fps가능여부
+ * @public
+ */
+export declare function canHandle60Fps(): boolean;
+/**
+ * Convenience function to get quality recommendations
+ *
+ * @returns Quality recommendations
+ * @korean 품질권장사항가져오기
+ * @public
+ */
+export declare function getQualityRecommendations(): {
+    enableHaptics: boolean;
+    enableParticles: boolean;
+    enableShadows: boolean;
+    targetFps: number;
+    coalescingRate: number;
+};
+//# sourceMappingURL=PerformanceMonitor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PerformanceMonitor.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/mobile/PerformanceMonitor.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,78 @@
+/**
+ * StanceWheelPure Component - Pure DOM version (no Three.js/drei dependency)
+ *
+ * Circular 8-segment stance selector for mobile touch controls
+ * Provides visual and tactile stance switching interface
+ *
+ * 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.
+ *
+ * WCAG 2.1 Level AA Compliance:
+ * - ARIA labels for all 8 stance buttons
+ * - Keyboard navigation (Tab, Enter, Arrow keys)
+ * - Visible focus indicators (2px cyan border)
+ * - aria-expanded state for wheel toggle
+ * - role="radiogroup" for stance selection
+ * - 50x50px touch targets (exceeds 44x44px minimum)
+ *
+ * @module components/mobile/StanceWheelPure
+ * @category Mobile Controls
+ * @korean 자세 휠 (순수 DOM)
+ */
+import React from "react";
+/**
+ * Props for StanceWheelPure component
+ */
+export interface StanceWheelPureProps {
+    /** Current stance index (0-7) */
+    readonly currentStance: number;
+    /** Callback when stance changes */
+    readonly onStanceChange: (stanceIndex: number) => void;
+    /** Whether wheel is expanded */
+    readonly expanded: boolean;
+    /** Callback to toggle expansion */
+    readonly onToggle: () => void;
+    /** Whether wheel is disabled */
+    readonly disabled?: boolean;
+    /** Position from bottom in pixels (default: 34 when collapsed, 100 when expanded for safe area) */
+    readonly bottom?: number;
+    /** Opacity of wheel (default: 0.8) */
+    readonly opacity?: number;
+}
+/**
+ * StanceWheelPure Component
+ *
+ * Pure DOM circular stance selector with 8 segments for trigram stances
+ * Features:
+ * - Expandable/collapsible interface
+ * - Visual stance indicator when collapsed (60x60px)
+ * - 8 touch-optimized stance buttons when expanded (50x50px each)
+ * - 200px wheel diameter with safe positioning
+ * - Korean trigram symbols and names
+ * - Color-coded by stance element
+ * - Haptic feedback on selection
+ * - 50x50px minimum touch targets
+ *
+ * Usage in Combat:
+ * - Tap collapsed indicator to expand wheel
+ * - Select from 8 trigram stances
+ * - Current stance highlighted with gold accent
+ * - Tap current stance to collapse wheel
+ *
+ * @example
+ * ```tsx
+ * <StanceWheelPure
+ *   currentStance={player.stance}
+ *   onStanceChange={(index) => handleStanceChange(index)}
+ *   expanded={wheelExpanded}
+ *   onToggle={() => setWheelExpanded(!wheelExpanded)}
+ *   disabled={isPaused}
+ * />
+ * ```
+ *
+ * @public
+ * @korean 자세휠순수
+ */
+export declare const StanceWheelPure: React.FC<StanceWheelPureProps>;
+//# sourceMappingURL=StanceWheelPure.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StanceWheelPure.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/mobile/StanceWheelPure.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,KAAgC,MAAM,OAAO,CAAC;AAarD;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,iCAAiC;IACjC,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,mCAAmC;IACnC,QAAQ,CAAC,cAAc,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACvD,gCAAgC;IAChC,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,mCAAmC;IACnC,QAAQ,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAC;IAC9B,gCAAgC;IAChC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,mGAAmG;IACnG,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,sCAAsC;IACtC,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;CAC3B;AA+CD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA2V1D,CAAC"}