blacktrigram 0.7.2

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

@@ -0,0 +1,386 @@
+import { KOREAN_COLORS } from "../../../types/constants/colors.js";
+import "../../../types/constants/index.js";
+import { TRIGRAM_STANCES_ORDER } from "../../../systems/trigram/types.js";
+import { getColorRGB } from "../../../utils/colorHelpers.js";
+import { triggerHaptic } from "../../../utils/haptics.js";
+import { createBilingualLabel } from "../../../types/AccessibilityTypes.js";
+import { announceToScreenReader, getFocusStyle, handleKeyboardNav } from "../../../utils/accessibility.js";
+import { useCallback, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/shared/mobile/StanceWheelPure.tsx
+/**
+* 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)
+*/
+/**
+* Trigram symbols for each stance
+*/
+var TRIGRAM_SYMBOLS = [
+	"☰",
+	"☱",
+	"☲",
+	"☳",
+	"☴",
+	"☵",
+	"☶",
+	"☷"
+];
+/**
+* Korean names for each stance
+*/
+var STANCE_KOREAN_NAMES = [
+	"건",
+	"태",
+	"리",
+	"진",
+	"손",
+	"감",
+	"간",
+	"곤"
+];
+/**
+* Get color for a specific stance
+*/
+var getStanceColor = (stance) => {
+	return {
+		geon: 16766720,
+		tae: 65535,
+		li: 16729156,
+		jin: 16755200,
+		son: 8978312,
+		gam: 35071,
+		gan: 8930559,
+		gon: 11167300
+	}[stance] ?? KOREAN_COLORS.PRIMARY_CYAN;
+};
+/**
+* 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 자세휠순수
+*/
+var StanceWheelPure = ({ currentStance, onStanceChange, expanded, onToggle, disabled = false, bottom, opacity = .8 }) => {
+	const [hoveredStance, setHoveredStance] = useState(null);
+	const [focusedStance, setFocusedStance] = useState(null);
+	/**
+	* Handle stance selection (touch or mouse)
+	*/
+	const handleStanceSelect = useCallback((e, stanceIndex) => {
+		if (disabled) return;
+		e.preventDefault();
+		e.stopPropagation();
+		if (stanceIndex === currentStance) {
+			onToggle();
+			triggerHaptic("light");
+			return;
+		}
+		onStanceChange(stanceIndex);
+		triggerHaptic("medium");
+		const stanceName = STANCE_KOREAN_NAMES[stanceIndex];
+		const stanceSymbol = TRIGRAM_SYMBOLS[stanceIndex];
+		announceToScreenReader({
+			message: createBilingualLabel(`자세 변경: ${stanceName} ${stanceSymbol}`, `Stance changed to ${TRIGRAM_STANCES_ORDER[stanceIndex]}`).label,
+			politeness: "polite"
+		});
+	}, [
+		disabled,
+		currentStance,
+		onStanceChange,
+		onToggle
+	]);
+	/**
+	* Handle wheel toggle (touch or mouse)
+	*/
+	const handleToggle = useCallback((e) => {
+		if (disabled) return;
+		e.preventDefault();
+		e.stopPropagation();
+		onToggle();
+		triggerHaptic("light");
+		const nextExpanded = !expanded;
+		announceToScreenReader({
+			message: createBilingualLabel(nextExpanded ? "자세 휠 열림" : "자세 휠 닫힘", nextExpanded ? "Stance wheel opened" : "Stance wheel closed").label,
+			politeness: "polite"
+		});
+	}, [
+		disabled,
+		onToggle,
+		expanded
+	]);
+	/**
+	* Handle keyboard navigation for stance buttons
+	*/
+	const handleStanceKeyDown = useCallback((stanceIndex) => (e) => {
+		if (disabled) return;
+		handleKeyboardNav(e.nativeEvent, {
+			onActivate: () => {
+				if (stanceIndex === currentStance) onToggle();
+				else onStanceChange(stanceIndex);
+				triggerHaptic("medium");
+			},
+			onCancel: () => {
+				onToggle();
+			},
+			onNavigate: (direction) => {
+				let newIndex = stanceIndex;
+				if (direction === "left" || direction === "up") newIndex = (stanceIndex - 1 + 8) % 8;
+				else if (direction === "right" || direction === "down") newIndex = (stanceIndex + 1) % 8;
+				setFocusedStance(newIndex);
+				requestAnimationFrame(() => {
+					document.querySelector(`[data-testid="stance-button-pure-${newIndex}"]`)?.focus();
+				});
+			}
+		});
+	}, [
+		disabled,
+		currentStance,
+		onStanceChange,
+		onToggle
+	]);
+	/**
+	* Handle keyboard navigation for toggle button
+	*/
+	const handleToggleKeyDown = useCallback((e) => {
+		if (disabled) return;
+		handleKeyboardNav(e.nativeEvent, { onActivate: () => {
+			onToggle();
+			triggerHaptic("light");
+		} });
+	}, [disabled, onToggle]);
+	const dynamicBottom = bottom ?? (expanded ? 100 : 34);
+	const currentStanceColor = getColorRGB(getStanceColor(TRIGRAM_STANCES_ORDER[currentStance]));
+	const goldColor = getColorRGB(KOREAN_COLORS.ACCENT_GOLD);
+	const primaryColor = getColorRGB(KOREAN_COLORS.PRIMARY_CYAN);
+	if (expanded) {
+		const wheelSize = 200;
+		const segmentAngle = 360 / 8;
+		return /* @__PURE__ */ jsx("div", {
+			style: {
+				position: "absolute",
+				bottom: `${dynamicBottom}px`,
+				left: "50%",
+				transform: "translateX(-50%)",
+				opacity: disabled ? .3 : opacity,
+				pointerEvents: disabled ? "none" : "auto",
+				transition: "all 0.3s ease",
+				zIndex: 1e3
+			},
+			"data-testid": "stance-wheel-pure-expanded",
+			role: "radiogroup",
+			"aria-label": createBilingualLabel("팔괘 자세 선택", "Eight Trigram Stance Selection").label,
+			"aria-activedescendant": `stance-button-pure-${currentStance}`,
+			children: /* @__PURE__ */ jsxs("div", {
+				style: {
+					width: `${wheelSize}px`,
+					height: `${wheelSize}px`,
+					position: "relative"
+				},
+				children: [TRIGRAM_STANCES_ORDER.map((stance, index) => {
+					const radian = (index * segmentAngle - 90) * (Math.PI / 180);
+					const x = Math.cos(radian) * 80 + 100;
+					const y = Math.sin(radian) * 80 + 100;
+					const isActive = index === currentStance;
+					const isHovered = index === hoveredStance;
+					const stanceColor = getColorRGB(getStanceColor(stance));
+					return /* @__PURE__ */ jsxs("button", {
+						onTouchStart: (e) => handleStanceSelect(e, index),
+						onTouchEnd: (e) => {
+							e.preventDefault();
+							e.stopPropagation();
+							setHoveredStance(null);
+						},
+						onMouseDown: (e) => handleStanceSelect(e, index),
+						onMouseEnter: () => setHoveredStance(index),
+						onMouseLeave: () => setHoveredStance(null),
+						onKeyDown: handleStanceKeyDown(index),
+						onFocus: () => setFocusedStance(index),
+						onBlur: () => setFocusedStance(null),
+						style: {
+							position: "absolute",
+							left: `${x - 25}px`,
+							top: `${y - 25}px`,
+							width: "50px",
+							height: "50px",
+							borderRadius: "50%",
+							background: isActive ? `rgba(${goldColor.r}, ${goldColor.g}, ${goldColor.b}, 0.95)` : `rgba(${stanceColor.r}, ${stanceColor.g}, ${stanceColor.b}, 0.8)`,
+							border: `3px solid ${isActive ? "#fff" : `rgba(${stanceColor.r}, ${stanceColor.g}, ${stanceColor.b}, 1)`}`,
+							fontSize: "24px",
+							color: isActive ? "#000" : "#fff",
+							fontWeight: "bold",
+							display: "flex",
+							flexDirection: "column",
+							alignItems: "center",
+							justifyContent: "center",
+							cursor: "pointer",
+							userSelect: "none",
+							touchAction: "none",
+							transition: "all 0.2s ease",
+							transform: isActive || isHovered ? "scale(1.15)" : "scale(1)",
+							boxShadow: isActive ? `0 0 25px rgba(${goldColor.r}, ${goldColor.g}, ${goldColor.b}, 0.9)` : isHovered ? `0 0 15px rgba(${stanceColor.r}, ${stanceColor.g}, ${stanceColor.b}, 0.8)` : `0 4px 10px rgba(0, 0, 0, 0.5)`,
+							...getFocusStyle(focusedStance === index, {
+								boxShadow: `0 0 0 4px rgba(${primaryColor.r}, ${primaryColor.g}, ${primaryColor.b}, 0.5), 0 0 25px rgba(${goldColor.r}, ${goldColor.g}, ${goldColor.b}, 0.9)`,
+								outlineColor: KOREAN_COLORS.PRIMARY_CYAN,
+								outlineWidth: 3
+							})
+						},
+						"aria-label": createBilingualLabel(`${STANCE_KOREAN_NAMES[index]} ${TRIGRAM_SYMBOLS[index]}`, `${stance} stance`).label,
+						"aria-checked": isActive,
+						role: "radio",
+						tabIndex: 0,
+						disabled,
+						id: `stance-button-pure-${index}`,
+						"data-testid": `stance-button-pure-${index}`,
+						children: [/* @__PURE__ */ jsx("div", {
+							style: {
+								fontSize: "20px",
+								lineHeight: 1
+							},
+							children: TRIGRAM_SYMBOLS[index]
+						}), /* @__PURE__ */ jsx("div", {
+							style: {
+								fontSize: "8px",
+								marginTop: "2px"
+							},
+							children: STANCE_KOREAN_NAMES[index]
+						})]
+					}, stance);
+				}), /* @__PURE__ */ jsxs("div", {
+					style: {
+						position: "absolute",
+						top: "50%",
+						left: "50%",
+						transform: "translate(-50%, -50%)",
+						fontSize: "12px",
+						color: `rgba(${primaryColor.r}, ${primaryColor.g}, ${primaryColor.b}, 0.9)`,
+						textShadow: "0 1px 3px rgba(0, 0, 0, 0.8)",
+						fontWeight: "bold",
+						textAlign: "center",
+						pointerEvents: "none"
+					},
+					children: [
+						"자세 선택",
+						/* @__PURE__ */ jsx("br", {}),
+						/* @__PURE__ */ jsx("span", {
+							style: { fontSize: "10px" },
+							children: "Stance"
+						})
+					]
+				})]
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			position: "absolute",
+			bottom: `${dynamicBottom}px`,
+			left: "50%",
+			transform: "translateX(-50%)",
+			opacity: disabled ? .3 : opacity,
+			pointerEvents: disabled ? "none" : "auto",
+			transition: "all 0.3s ease",
+			zIndex: 1e3
+		},
+		"data-testid": "stance-wheel-pure-collapsed",
+		children: /* @__PURE__ */ jsxs("button", {
+			onTouchStart: handleToggle,
+			onMouseDown: handleToggle,
+			onKeyDown: handleToggleKeyDown,
+			onFocus: () => setFocusedStance(currentStance),
+			onBlur: () => setFocusedStance(null),
+			style: {
+				width: "60px",
+				height: "60px",
+				borderRadius: "50%",
+				background: `rgba(${currentStanceColor.r}, ${currentStanceColor.g}, ${currentStanceColor.b}, 0.9)`,
+				border: `3px solid rgba(${goldColor.r}, ${goldColor.g}, ${goldColor.b}, 0.9)`,
+				fontSize: "28px",
+				color: "#fff",
+				fontWeight: "bold",
+				display: "flex",
+				flexDirection: "column",
+				alignItems: "center",
+				justifyContent: "center",
+				cursor: "pointer",
+				userSelect: "none",
+				touchAction: "none",
+				transition: "all 0.2s ease",
+				boxShadow: `0 4px 15px rgba(0, 0, 0, 0.6), 0 0 20px rgba(${currentStanceColor.r}, ${currentStanceColor.g}, ${currentStanceColor.b}, 0.6)`,
+				...getFocusStyle(focusedStance === currentStance, {
+					boxShadow: `0 0 0 4px rgba(${primaryColor.r}, ${primaryColor.g}, ${primaryColor.b}, 0.5), 0 4px 15px rgba(0, 0, 0, 0.6), 0 0 20px rgba(${currentStanceColor.r}, ${currentStanceColor.g}, ${currentStanceColor.b}, 0.6)`,
+					outlineColor: KOREAN_COLORS.PRIMARY_CYAN,
+					outlineWidth: 3
+				})
+			},
+			disabled,
+			"aria-label": createBilingualLabel(`현재 자세: ${STANCE_KOREAN_NAMES[currentStance]} ${TRIGRAM_SYMBOLS[currentStance]}. 자세 휠 열기`, `Current stance: ${TRIGRAM_STANCES_ORDER[currentStance]}. Open stance wheel`).label,
+			"aria-expanded": expanded,
+			"aria-haspopup": "menu",
+			role: "button",
+			tabIndex: disabled ? -1 : 0,
+			"data-testid": "stance-wheel-pure-toggle",
+			children: [/* @__PURE__ */ jsx("div", {
+				style: {
+					fontSize: "24px",
+					lineHeight: 1
+				},
+				children: TRIGRAM_SYMBOLS[currentStance]
+			}), /* @__PURE__ */ jsx("div", {
+				style: {
+					fontSize: "10px",
+					marginTop: "2px"
+				},
+				children: STANCE_KOREAN_NAMES[currentStance]
+			})]
+		})
+	});
+};
+//#endregion
+export { StanceWheelPure };
+
+//# sourceMappingURL=StanceWheelPure.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StanceWheelPure.js","names":[],"sources":["../../../../src/components/shared/mobile/StanceWheelPure.tsx"],"sourcesContent":["/**\n * StanceWheelPure Component - Pure DOM version (no Three.js/drei dependency)\n *\n * Circular 8-segment stance selector for mobile touch controls\n * Provides visual and tactile stance switching interface\n *\n * This is a pure DOM version that renders OUTSIDE the Three.js Canvas.\n * It does NOT use Html from @react-three/drei, making it compatible with\n * rendering outside Canvas contexts.\n *\n * WCAG 2.1 Level AA Compliance:\n * - ARIA labels for all 8 stance buttons\n * - Keyboard navigation (Tab, Enter, Arrow keys)\n * - Visible focus indicators (2px cyan border)\n * - aria-expanded state for wheel toggle\n * - role=\"radiogroup\" for stance selection\n * - 50x50px touch targets (exceeds 44x44px minimum)\n *\n * @module components/mobile/StanceWheelPure\n * @category Mobile Controls\n * @korean 자세 휠 (순수 DOM)\n */\n\nimport React, { useCallback, useState } from \"react\";\nimport { KOREAN_COLORS } from \"@/types/constants\";\nimport { TRIGRAM_STANCES_ORDER } from \"../../../systems/trigram/types\";\nimport { TrigramStance } from \"../../../types/common\";\nimport { triggerHaptic } from \"../../../utils/haptics\";\nimport { getColorRGB } from \"../../../utils/colorHelpers\";\nimport {\n  handleKeyboardNav,\n  getFocusStyle,\n  announceToScreenReader,\n} from \"../../../utils/accessibility\";\nimport { createBilingualLabel } from \"../../../types/AccessibilityTypes\";\n\n/**\n * Props for StanceWheelPure component\n */\nexport interface StanceWheelPureProps {\n  /** Current stance index (0-7) */\n  readonly currentStance: number;\n  /** Callback when stance changes */\n  readonly onStanceChange: (stanceIndex: number) => void;\n  /** Whether wheel is expanded */\n  readonly expanded: boolean;\n  /** Callback to toggle expansion */\n  readonly onToggle: () => void;\n  /** Whether wheel is disabled */\n  readonly disabled?: boolean;\n  /** Position from bottom in pixels (default: 34 when collapsed, 100 when expanded for safe area) */\n  readonly bottom?: number;\n  /** Opacity of wheel (default: 0.8) */\n  readonly opacity?: number;\n}\n\n/**\n * Trigram symbols for each stance\n */\nconst TRIGRAM_SYMBOLS = [\n  \"☰\",\n  \"☱\",\n  \"☲\",\n  \"☳\",\n  \"☴\",\n  \"☵\",\n  \"☶\",\n  \"☷\",\n] as const;\n\n/**\n * Korean names for each stance\n */\nconst STANCE_KOREAN_NAMES = [\n  \"건\", // Geon - Heaven\n  \"태\", // Tae - Lake\n  \"리\", // Li - Fire\n  \"진\", // Jin - Thunder\n  \"손\", // Son - Wind\n  \"감\", // Gam - Water\n  \"간\", // Gan - Mountain\n  \"곤\", // Gon - Earth\n] as const;\n\n/**\n * Get color for a specific stance\n */\nconst getStanceColor = (stance: TrigramStance): number => {\n  const stanceColors: Record<TrigramStance, number> = {\n    geon: 0xffd700, // Gold - Heaven\n    tae: 0x00ffff, // Cyan - Lake\n    li: 0xff4444, // Red - Fire\n    jin: 0xffaa00, // Orange - Thunder\n    son: 0x88ff88, // Light Green - Wind\n    gam: 0x0088ff, // Blue - Water\n    gan: 0x8844ff, // Purple - Mountain\n    gon: 0xaa6644, // Brown - Earth\n  };\n  return stanceColors[stance] ?? KOREAN_COLORS.PRIMARY_CYAN;\n};\n\n/**\n * StanceWheelPure Component\n *\n * Pure DOM circular stance selector with 8 segments for trigram stances\n * Features:\n * - Expandable/collapsible interface\n * - Visual stance indicator when collapsed (60x60px)\n * - 8 touch-optimized stance buttons when expanded (50x50px each)\n * - 200px wheel diameter with safe positioning\n * - Korean trigram symbols and names\n * - Color-coded by stance element\n * - Haptic feedback on selection\n * - 50x50px minimum touch targets\n *\n * Usage in Combat:\n * - Tap collapsed indicator to expand wheel\n * - Select from 8 trigram stances\n * - Current stance highlighted with gold accent\n * - Tap current stance to collapse wheel\n *\n * @example\n * ```tsx\n * <StanceWheelPure\n *   currentStance={player.stance}\n *   onStanceChange={(index) => handleStanceChange(index)}\n *   expanded={wheelExpanded}\n *   onToggle={() => setWheelExpanded(!wheelExpanded)}\n *   disabled={isPaused}\n * />\n * ```\n *\n * @public\n * @korean 자세휠순수\n */\nexport const StanceWheelPure: React.FC<StanceWheelPureProps> = ({\n  currentStance,\n  onStanceChange,\n  expanded,\n  onToggle,\n  disabled = false,\n  bottom,\n  opacity = 0.8,\n}) => {\n  const [hoveredStance, setHoveredStance] = useState<number | null>(null);\n  const [focusedStance, setFocusedStance] = useState<number | null>(null);\n\n  /**\n   * Handle stance selection (touch or mouse)\n   */\n  const handleStanceSelect = useCallback(\n    (e: React.TouchEvent | React.MouseEvent, stanceIndex: number) => {\n      if (disabled) return;\n      e.preventDefault();\n      e.stopPropagation();\n\n      // Don't allow selecting the same stance\n      if (stanceIndex === currentStance) {\n        // Collapse wheel if tapping current stance\n        onToggle();\n        triggerHaptic(\"light\");\n        return;\n      }\n\n      onStanceChange(stanceIndex);\n      triggerHaptic(\"medium\");\n\n      // Announce stance change to screen readers\n      const stanceName = STANCE_KOREAN_NAMES[stanceIndex];\n      const stanceSymbol = TRIGRAM_SYMBOLS[stanceIndex];\n      announceToScreenReader({\n        message: createBilingualLabel(\n          `자세 변경: ${stanceName} ${stanceSymbol}`,\n          `Stance changed to ${TRIGRAM_STANCES_ORDER[stanceIndex]}`,\n        ).label,\n        politeness: \"polite\",\n      });\n\n      // Auto-collapse after selection (optional)\n      // onToggle();\n    },\n    [disabled, currentStance, onStanceChange, onToggle],\n  );\n\n  /**\n   * Handle wheel toggle (touch or mouse)\n   */\n  const handleToggle = useCallback(\n    (e: React.TouchEvent | React.MouseEvent) => {\n      if (disabled) return;\n      e.preventDefault();\n      e.stopPropagation();\n\n      onToggle();\n      triggerHaptic(\"light\");\n\n      // Announce state change to screen readers using the toggled value\n      const nextExpanded = !expanded;\n      announceToScreenReader({\n        message: createBilingualLabel(\n          nextExpanded ? \"자세 휠 열림\" : \"자세 휠 닫힘\",\n          nextExpanded ? \"Stance wheel opened\" : \"Stance wheel closed\",\n        ).label,\n        politeness: \"polite\",\n      });\n    },\n    [disabled, onToggle, expanded],\n  );\n\n  /**\n   * Handle keyboard navigation for stance buttons\n   */\n  const handleStanceKeyDown = useCallback(\n    (stanceIndex: number) => (e: React.KeyboardEvent) => {\n      if (disabled) return;\n      handleKeyboardNav(e.nativeEvent, {\n        onActivate: () => {\n          if (stanceIndex === currentStance) {\n            onToggle();\n          } else {\n            onStanceChange(stanceIndex);\n          }\n          triggerHaptic(\"medium\");\n        },\n        onCancel: () => {\n          onToggle();\n        },\n        onNavigate: (direction) => {\n          // Navigate between stances with arrow keys\n          let newIndex = stanceIndex;\n          if (direction === \"left\" || direction === \"up\") {\n            newIndex = (stanceIndex - 1 + 8) % 8;\n          } else if (direction === \"right\" || direction === \"down\") {\n            newIndex = (stanceIndex + 1) % 8;\n          }\n          setFocusedStance(newIndex);\n          // Focus the new stance button on the next animation frame\n          requestAnimationFrame(() => {\n            const button = document.querySelector(\n              `[data-testid=\"stance-button-pure-${newIndex}\"]`,\n            ) as HTMLElement | null;\n            button?.focus();\n          });\n        },\n      });\n    },\n    [disabled, currentStance, onStanceChange, onToggle],\n  );\n\n  /**\n   * Handle keyboard navigation for toggle button\n   */\n  const handleToggleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (disabled) return;\n      handleKeyboardNav(e.nativeEvent, {\n        onActivate: () => {\n          onToggle();\n          triggerHaptic(\"light\");\n        },\n      });\n    },\n    [disabled, onToggle],\n  );\n\n  // Dynamic bottom position with safe area consideration\n  const dynamicBottom = bottom ?? (expanded ? 100 : 34);\n\n  // Get RGB values for colors using shared utility\n  const currentStanceColor = getColorRGB(\n    getStanceColor(TRIGRAM_STANCES_ORDER[currentStance]),\n  );\n  const goldColor = getColorRGB(KOREAN_COLORS.ACCENT_GOLD);\n  const primaryColor = getColorRGB(KOREAN_COLORS.PRIMARY_CYAN);\n\n  if (expanded) {\n    // Expanded: Show full 8-segment wheel\n    const wheelSize = 200;\n    const segmentAngle = 360 / 8;\n\n    return (\n      <div\n        style={{\n          position: \"absolute\", // Changed from fixed to position relative to container\n          bottom: `${dynamicBottom}px`,\n          left: \"50%\",\n          transform: \"translateX(-50%)\",\n          opacity: disabled ? 0.3 : opacity,\n          pointerEvents: disabled ? \"none\" : \"auto\",\n          transition: \"all 0.3s ease\",\n          zIndex: 1000,\n        }}\n        data-testid=\"stance-wheel-pure-expanded\"\n        role=\"radiogroup\"\n        aria-label={\n          createBilingualLabel(\n            \"팔괘 자세 선택\",\n            \"Eight Trigram Stance Selection\",\n          ).label\n        }\n        aria-activedescendant={`stance-button-pure-${currentStance}`}\n      >\n        <div\n          style={{\n            width: `${wheelSize}px`,\n            height: `${wheelSize}px`,\n            position: \"relative\",\n          }}\n        >\n          {/* Stance buttons arranged in circle */}\n          {TRIGRAM_STANCES_ORDER.map((stance, index) => {\n            const angle = index * segmentAngle;\n            const radian = (angle - 90) * (Math.PI / 180); // -90 to start from top\n            const x = Math.cos(radian) * 80 + 100;\n            const y = Math.sin(radian) * 80 + 100;\n            const isActive = index === currentStance;\n            const isHovered = index === hoveredStance;\n            const stanceColor = getColorRGB(getStanceColor(stance));\n\n            return (\n              <button\n                key={stance}\n                onTouchStart={(e) => handleStanceSelect(e, index)}\n                onTouchEnd={(e) => {\n                  e.preventDefault();\n                  e.stopPropagation();\n                  setHoveredStance(null);\n                }}\n                onMouseDown={(e) => handleStanceSelect(e, index)}\n                onMouseEnter={() => setHoveredStance(index)}\n                onMouseLeave={() => setHoveredStance(null)}\n                onKeyDown={handleStanceKeyDown(index)}\n                onFocus={() => setFocusedStance(index)}\n                onBlur={() => setFocusedStance(null)}\n                style={{\n                  position: \"absolute\",\n                  left: `${x - 25}px`,\n                  top: `${y - 25}px`,\n                  width: \"50px\",\n                  height: \"50px\",\n                  borderRadius: \"50%\",\n                  background: isActive\n                    ? `rgba(${goldColor.r}, ${goldColor.g}, ${goldColor.b}, 0.95)`\n                    : `rgba(${stanceColor.r}, ${stanceColor.g}, ${stanceColor.b}, 0.8)`,\n                  border: `3px solid ${isActive ? \"#fff\" : `rgba(${stanceColor.r}, ${stanceColor.g}, ${stanceColor.b}, 1)`}`,\n                  fontSize: \"24px\",\n                  color: isActive ? \"#000\" : \"#fff\",\n                  fontWeight: \"bold\",\n                  display: \"flex\",\n                  flexDirection: \"column\",\n                  alignItems: \"center\",\n                  justifyContent: \"center\",\n                  cursor: \"pointer\",\n                  userSelect: \"none\",\n                  touchAction: \"none\",\n                  transition: \"all 0.2s ease\",\n                  transform: isActive || isHovered ? \"scale(1.15)\" : \"scale(1)\",\n                  boxShadow: isActive\n                    ? `0 0 25px rgba(${goldColor.r}, ${goldColor.g}, ${goldColor.b}, 0.9)`\n                    : isHovered\n                      ? `0 0 15px rgba(${stanceColor.r}, ${stanceColor.g}, ${stanceColor.b}, 0.8)`\n                      : `0 4px 10px rgba(0, 0, 0, 0.5)`,\n                  ...getFocusStyle(focusedStance === index, {\n                    boxShadow: `0 0 0 4px rgba(${primaryColor.r}, ${primaryColor.g}, ${primaryColor.b}, 0.5), 0 0 25px rgba(${goldColor.r}, ${goldColor.g}, ${goldColor.b}, 0.9)`,\n                    outlineColor: KOREAN_COLORS.PRIMARY_CYAN,\n                    outlineWidth: 3,\n                  }),\n                }}\n                aria-label={\n                  createBilingualLabel(\n                    `${STANCE_KOREAN_NAMES[index]} ${TRIGRAM_SYMBOLS[index]}`,\n                    `${stance} stance`,\n                  ).label\n                }\n                aria-checked={isActive}\n                role=\"radio\"\n                tabIndex={0}\n                disabled={disabled}\n                id={`stance-button-pure-${index}`}\n                data-testid={`stance-button-pure-${index}`}\n              >\n                <div style={{ fontSize: \"20px\", lineHeight: 1 }}>\n                  {TRIGRAM_SYMBOLS[index]}\n                </div>\n                <div style={{ fontSize: \"8px\", marginTop: \"2px\" }}>\n                  {STANCE_KOREAN_NAMES[index]}\n                </div>\n              </button>\n            );\n          })}\n\n          {/* Center label */}\n          <div\n            style={{\n              position: \"absolute\",\n              top: \"50%\",\n              left: \"50%\",\n              transform: \"translate(-50%, -50%)\",\n              fontSize: \"12px\",\n              color: `rgba(${primaryColor.r}, ${primaryColor.g}, ${primaryColor.b}, 0.9)`,\n              textShadow: \"0 1px 3px rgba(0, 0, 0, 0.8)\",\n              fontWeight: \"bold\",\n              textAlign: \"center\",\n              pointerEvents: \"none\",\n            }}\n          >\n            자세 선택\n            <br />\n            <span style={{ fontSize: \"10px\" }}>Stance</span>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  // Collapsed: Show current stance indicator\n  return (\n    <div\n      style={{\n        position: \"absolute\", // Changed from fixed to position relative to container\n        bottom: `${dynamicBottom}px`,\n        left: \"50%\",\n        transform: \"translateX(-50%)\",\n        opacity: disabled ? 0.3 : opacity,\n        pointerEvents: disabled ? \"none\" : \"auto\",\n        transition: \"all 0.3s ease\",\n        zIndex: 1000,\n      }}\n      data-testid=\"stance-wheel-pure-collapsed\"\n    >\n      <button\n        onTouchStart={handleToggle}\n        onMouseDown={handleToggle}\n        onKeyDown={handleToggleKeyDown}\n        onFocus={() => setFocusedStance(currentStance)}\n        onBlur={() => setFocusedStance(null)}\n        style={{\n          width: \"60px\",\n          height: \"60px\",\n          borderRadius: \"50%\",\n          background: `rgba(${currentStanceColor.r}, ${currentStanceColor.g}, ${currentStanceColor.b}, 0.9)`,\n          border: `3px solid rgba(${goldColor.r}, ${goldColor.g}, ${goldColor.b}, 0.9)`,\n          fontSize: \"28px\",\n          color: \"#fff\",\n          fontWeight: \"bold\",\n          display: \"flex\",\n          flexDirection: \"column\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          cursor: \"pointer\",\n          userSelect: \"none\",\n          touchAction: \"none\",\n          transition: \"all 0.2s ease\",\n          boxShadow: `0 4px 15px rgba(0, 0, 0, 0.6), 0 0 20px rgba(${currentStanceColor.r}, ${currentStanceColor.g}, ${currentStanceColor.b}, 0.6)`,\n          ...getFocusStyle(focusedStance === currentStance, {\n            boxShadow: `0 0 0 4px rgba(${primaryColor.r}, ${primaryColor.g}, ${primaryColor.b}, 0.5), 0 4px 15px rgba(0, 0, 0, 0.6), 0 0 20px rgba(${currentStanceColor.r}, ${currentStanceColor.g}, ${currentStanceColor.b}, 0.6)`,\n            outlineColor: KOREAN_COLORS.PRIMARY_CYAN,\n            outlineWidth: 3,\n          }),\n        }}\n        disabled={disabled}\n        aria-label={\n          createBilingualLabel(\n            `현재 자세: ${STANCE_KOREAN_NAMES[currentStance]} ${TRIGRAM_SYMBOLS[currentStance]}. 자세 휠 열기`,\n            `Current stance: ${TRIGRAM_STANCES_ORDER[currentStance]}. Open stance wheel`,\n          ).label\n        }\n        aria-expanded={expanded}\n        aria-haspopup=\"menu\"\n        role=\"button\"\n        tabIndex={disabled ? -1 : 0}\n        data-testid=\"stance-wheel-pure-toggle\"\n      >\n        <div style={{ fontSize: \"24px\", lineHeight: 1 }}>\n          {TRIGRAM_SYMBOLS[currentStance]}\n        </div>\n        <div style={{ fontSize: \"10px\", marginTop: \"2px\" }}>\n          {STANCE_KOREAN_NAMES[currentStance]}\n        </div>\n      </button>\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,154 @@
+/**
+ * TouchOptimizer
+ *
+ * High-performance touch event handling with <16ms latency
+ * Uses requestAnimationFrame for immediate visual updates and
+ * requestIdleCallback for deferred state updates to maintain 60fps
+ *
+ * Key Features:
+ * - RAF-based visual updates (<16ms latency)
+ * - Touch event coalescing (60-70% overhead reduction)
+ * - Passive event listeners where appropriate
+ * - Transform-only CSS animations (GPU-accelerated)
+ *
+ * @module components/mobile/TouchOptimizer
+ * @category Mobile Controls
+ * @korean 터치 최적화
+ */
+/**
+ * Touch position data
+ */
+export interface TouchPosition {
+    readonly x: number;
+    readonly y: number;
+    readonly timestamp: number;
+}
+/**
+ * Touch optimization options
+ */
+export interface TouchOptimizerOptions {
+    /** Enable touch event coalescing (default: true) */
+    readonly enableCoalescing?: boolean;
+    /** Use passive listeners where possible (default: true) */
+    readonly usePassiveListeners?: boolean;
+    /** Enable RAF for visual updates (default: true) */
+    readonly useRAF?: boolean;
+    /** Coalescing sample rate (default: 3 - use last 3 events) */
+    readonly coalescingSampleRate?: number;
+}
+/**
+ * Touch optimizer return type
+ */
+export interface TouchOptimizerReturn {
+    /** Current RAF ID (for debugging) */
+    readonly rafId: number | null;
+    /** Whether touch is active */
+    readonly isTouching: boolean;
+}
+/**
+ * Custom hook for optimized touch handling with <16ms latency
+ *
+ * Uses requestAnimationFrame for immediate visual feedback and
+ * defers state updates to avoid blocking the main thread
+ *
+ * @param onTouchStart - Callback for touch start (immediate)
+ * @param onTouchMove - Callback for touch move (coalesced)
+ * @param onTouchEnd - Callback for touch end (immediate)
+ * @param options - Optimization options
+ *
+ * @example
+ * ```tsx
+ * const { isTouching } = useTouchOptimizer(
+ *   (x, y) => {
+ *     // Immediate visual update (same frame)
+ *     buttonRef.current.style.transform = 'scale(0.95)';
+ *
+ *     // Defer state update
+ *     requestIdleCallback(() => {
+ *       setPressed(true);
+ *       onAction();
+ *     });
+ *   },
+ *   (x, y) => {
+ *     // Handle coalesced touch move
+ *     updatePosition(x, y);
+ *   },
+ *   () => {
+ *     // Immediate visual reset
+ *     buttonRef.current.style.transform = 'scale(1)';
+ *
+ *     requestIdleCallback(() => {
+ *       setPressed(false);
+ *     });
+ *   }
+ * );
+ * ```
+ *
+ * @public
+ * @korean 터치최적화사용
+ */
+export declare function useTouchOptimizer(onTouchStart: (x: number, y: number, timestamp: number) => void, onTouchMove: (x: number, y: number, timestamp: number) => void, onTouchEnd: (x: number, y: number, timestamp: number) => void, options?: TouchOptimizerOptions): TouchOptimizerReturn;
+/**
+ * Helper function to create optimized visual updates
+ * Updates DOM directly for immediate feedback, defers state
+ *
+ * @param element - DOM element to update
+ * @param visualUpdate - Function to update visual state (runs in RAF)
+ * @param stateUpdate - Function to update React state (runs in idle)
+ *
+ * @example
+ * ```tsx
+ * applyOptimizedUpdate(
+ *   buttonRef.current,
+ *   (el) => {
+ *     // Immediate visual feedback (<16ms)
+ *     el.style.transform = 'scale(0.95)';
+ *     el.style.filter = 'brightness(1.2)';
+ *   },
+ *   () => {
+ *     // Deferred state update (non-blocking)
+ *     setPressed(true);
+ *     onAction();
+ *   }
+ * );
+ * ```
+ *
+ * @public
+ * @korean 최적화된업데이트적용
+ */
+export declare function applyOptimizedUpdate(element: HTMLElement | null, visualUpdate: (element: HTMLElement) => void, stateUpdate: () => void): void;
+/**
+ * Create transform-only style for GPU-accelerated animations
+ * Avoids layout thrashing by only using transform
+ *
+ * @param pressed - Whether element is pressed
+ * @param scale - Scale value when pressed (default: 0.95)
+ *
+ * @returns CSS transform string
+ *
+ * @example
+ * ```tsx
+ * const style = {
+ *   transform: createTransformStyle(isPressed, 0.95),
+ *   transition: 'transform 0.1s ease-out',
+ *   willChange: 'transform', // Hint to GPU
+ * };
+ * ```
+ *
+ * @public
+ * @korean 변환스타일생성
+ */
+export declare function createTransformStyle(pressed: boolean, scale?: number): string;
+/**
+ * Create filter style for visual effects
+ *
+ * @param pressed - Whether element is pressed
+ * @param brightness - Brightness multiplier when pressed (default: 1.2)
+ *
+ * @returns CSS filter string
+ *
+ * @public
+ * @korean 필터스타일생성
+ */
+export declare function createFilterStyle(pressed: boolean, brightness?: number): string;
+//# sourceMappingURL=TouchOptimizer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TouchOptimizer.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/mobile/TouchOptimizer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAIH;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,oDAAoD;IACpD,QAAQ,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IACpC,2DAA2D;IAC3D,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IACvC,oDAAoD;IACpD,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC;IAC1B,8DAA8D;IAC9D,QAAQ,CAAC,oBAAoB,CAAC,EAAE,MAAM,CAAC;CACxC;AAED;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,qCAAqC;IACrC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,8BAA8B;IAC9B,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;CAC9B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,wBAAgB,iBAAiB,CAC/B,YAAY,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,EAC/D,WAAW,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,EAC9D,UAAU,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,EAC7D,OAAO,GAAE,qBAA0B,GAClC,oBAAoB,CA6OtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,WAAW,GAAG,IAAI,EAC3B,YAAY,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,EAC5C,WAAW,EAAE,MAAM,IAAI,GACtB,IAAI,CAiBN;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,OAAO,EAChB,KAAK,GAAE,MAAa,GACnB,MAAM,CAKR;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,OAAO,EAChB,UAAU,GAAE,MAAY,GACvB,MAAM,CAKR"}

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

@@ -0,0 +1,83 @@
+import "react";
+//#region src/components/shared/mobile/TouchOptimizer.ts
+/**
+* Helper function to create optimized visual updates
+* Updates DOM directly for immediate feedback, defers state
+* 
+* @param element - DOM element to update
+* @param visualUpdate - Function to update visual state (runs in RAF)
+* @param stateUpdate - Function to update React state (runs in idle)
+* 
+* @example
+* ```tsx
+* applyOptimizedUpdate(
+*   buttonRef.current,
+*   (el) => {
+*     // Immediate visual feedback (<16ms)
+*     el.style.transform = 'scale(0.95)';
+*     el.style.filter = 'brightness(1.2)';
+*   },
+*   () => {
+*     // Deferred state update (non-blocking)
+*     setPressed(true);
+*     onAction();
+*   }
+* );
+* ```
+* 
+* @public
+* @korean 최적화된업데이트적용
+*/
+function applyOptimizedUpdate(element, visualUpdate, stateUpdate) {
+	if (element) requestAnimationFrame(() => {
+		visualUpdate(element);
+	});
+	if (typeof window.requestIdleCallback === "function") window.requestIdleCallback(() => {
+		stateUpdate();
+	});
+	else setTimeout(stateUpdate, 0);
+}
+/**
+* Create transform-only style for GPU-accelerated animations
+* Avoids layout thrashing by only using transform
+* 
+* @param pressed - Whether element is pressed
+* @param scale - Scale value when pressed (default: 0.95)
+* 
+* @returns CSS transform string
+* 
+* @example
+* ```tsx
+* const style = {
+*   transform: createTransformStyle(isPressed, 0.95),
+*   transition: 'transform 0.1s ease-out',
+*   willChange: 'transform', // Hint to GPU
+* };
+* ```
+* 
+* @public
+* @korean 변환스타일생성
+*/
+function createTransformStyle(pressed, scale = .95) {
+	if (pressed) return `scale(${scale})`;
+	return "scale(1)";
+}
+/**
+* Create filter style for visual effects
+* 
+* @param pressed - Whether element is pressed
+* @param brightness - Brightness multiplier when pressed (default: 1.2)
+* 
+* @returns CSS filter string
+* 
+* @public
+* @korean 필터스타일생성
+*/
+function createFilterStyle(pressed, brightness = 1.2) {
+	if (pressed) return `brightness(${brightness})`;
+	return "brightness(1)";
+}
+//#endregion
+export { applyOptimizedUpdate, createFilterStyle, createTransformStyle };
+
+//# sourceMappingURL=TouchOptimizer.js.map