blacktrigram 0.7.2

package/lib/components/shared/base/useKoreanTheme.js

@@ -0,0 +1,169 @@
+import { KOREAN_COLORS } from "../../../types/constants/colors.js";
+import { FONT_FAMILY } from "../../../types/constants/typography.js";
+import "../../../types/constants/index.js";
+import { hexToRgbaString } from "../../../utils/colorUtils.js";
+import { useMemo } from "react";
+//#region src/components/shared/base/useKoreanTheme.ts
+/**
+* useKoreanTheme - Custom hook for Korean cyberpunk theming
+* 
+* Provides centralized Korean theme styling and responsive utilities
+* Eliminates code duplication across UI components
+* 
+* Enhanced with:
+* - Korean typography optimization (line height, letter spacing, word break)
+* - Accessibility features (focus indicators, touch targets, high contrast)
+* - WCAG 2.1 AA compliant color contrast ratios
+* 
+* @module components/base
+*/
+/**
+* Custom hook for Korean cyberpunk theming
+* 
+* Provides consistent styling patterns for all Korean-themed components
+* Enhanced with Korean typography optimization and accessibility features
+* 
+* @example
+* ```tsx
+* const { buttonVariant, sizeDimensions, koreanTypography } = useKoreanTheme({
+*   variant: "primary",
+*   size: "md"
+* });
+* ```
+*/
+function useKoreanTheme(config = {}) {
+	const { variant = "primary", size = "md", disabled = false, isMobile = false, highContrast = false } = config;
+	return {
+		buttonVariant: useMemo(() => {
+			switch (variant) {
+				case "primary": return {
+					background: KOREAN_COLORS.UI_BACKGROUND_DARK,
+					border: KOREAN_COLORS.PRIMARY_CYAN,
+					text: KOREAN_COLORS.ACCENT_GOLD,
+					hoverBg: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, .1),
+					activeBg: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, .2)
+				};
+				case "secondary": return {
+					background: KOREAN_COLORS.UI_BACKGROUND_MEDIUM,
+					border: KOREAN_COLORS.ACCENT_GOLD,
+					text: KOREAN_COLORS.TEXT_PRIMARY,
+					hoverBg: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, .1),
+					activeBg: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, .2)
+				};
+				case "danger": return {
+					background: KOREAN_COLORS.UI_BACKGROUND_DARK,
+					border: KOREAN_COLORS.ACCENT_RED,
+					text: KOREAN_COLORS.ACCENT_RED,
+					hoverBg: hexToRgbaString(KOREAN_COLORS.ACCENT_RED, .1),
+					activeBg: hexToRgbaString(KOREAN_COLORS.ACCENT_RED, .2)
+				};
+				default: return {
+					background: KOREAN_COLORS.UI_BACKGROUND_DARK,
+					border: KOREAN_COLORS.PRIMARY_CYAN,
+					text: KOREAN_COLORS.ACCENT_GOLD,
+					hoverBg: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, .1),
+					activeBg: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, .2)
+				};
+			}
+		}, [variant]),
+		panelVariant: useMemo(() => {
+			switch (variant) {
+				case "bordered": return {
+					background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, .95),
+					border: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, .8)}`,
+					boxShadow: `0 0 15px ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, .3)}`
+				};
+				case "elevated": return {
+					background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, .9),
+					border: `1px solid ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, .5)}`,
+					boxShadow: `
+            0 4px 12px ${hexToRgbaString(KOREAN_COLORS.BLACK_SOLID, .5)},
+            0 0 20px ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, .2)}
+          `
+				};
+				default: return {
+					background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, .85),
+					border: `1px solid ${hexToRgbaString(KOREAN_COLORS.UI_BORDER, .5)}`,
+					boxShadow: "none"
+				};
+			}
+		}, [variant]),
+		buttonSize: useMemo(() => {
+			const scale = isMobile ? 1 : 1;
+			switch (size) {
+				case "sm":
+				case "small": return {
+					padding: `${Math.round(8 * scale)}px ${Math.round(16 * scale)}px`,
+					fontSize: isMobile ? "14px" : `${Math.round(14 * scale)}px`,
+					borderWidth: "1px"
+				};
+				case "lg":
+				case "large": return {
+					padding: `${Math.round(16 * scale)}px ${Math.round(32 * scale)}px`,
+					fontSize: isMobile ? "18px" : `${Math.round(20 * scale)}px`,
+					borderWidth: "3px"
+				};
+				default: return {
+					padding: `${Math.round(12 * scale)}px ${Math.round(24 * scale)}px`,
+					fontSize: isMobile ? "16px" : `${Math.round(16 * scale)}px`,
+					borderWidth: "2px"
+				};
+			}
+		}, [size, isMobile]),
+		textSize: useMemo(() => {
+			const scale = isMobile ? .9 : 1;
+			switch (size) {
+				case "small": return {
+					korean: `${Math.round(14 * scale)}px`,
+					english: `${Math.round(12 * scale)}px`
+				};
+				case "large": return {
+					korean: `${Math.round(24 * scale)}px`,
+					english: `${Math.round(18 * scale)}px`
+				};
+				case "xlarge": return {
+					korean: `${Math.round(32 * scale)}px`,
+					english: `${Math.round(24 * scale)}px`
+				};
+				default: return {
+					korean: `${Math.round(18 * scale)}px`,
+					english: `${Math.round(14 * scale)}px`
+				};
+			}
+		}, [size, isMobile]),
+		calculateResponsiveSize: useMemo(() => {
+			return (baseSize) => {
+				return isMobile ? Math.round(baseSize * .8) : baseSize;
+			};
+		}, [isMobile]),
+		applyKoreanTheme: useMemo(() => {
+			return (baseStyle) => {
+				return {
+					...baseStyle,
+					fontFamily: FONT_FAMILY.KOREAN,
+					color: hexToRgbaString(KOREAN_COLORS.TEXT_PRIMARY),
+					opacity: disabled ? .5 : 1
+				};
+			};
+		}, [disabled]),
+		koreanTypography: useMemo(() => ({
+			fontFamily: FONT_FAMILY.KOREAN,
+			lineHeight: 1.6,
+			letterSpacing: "-0.01em",
+			wordBreak: "keep-all",
+			wordWrap: "break-word"
+		}), []),
+		accessibility: useMemo(() => ({
+			focusOutline: highContrast ? `4px solid ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD)}` : `3px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN)}`,
+			focusOutlineOffset: "2px",
+			minTouchTarget: "44px",
+			highContrastFocusOutline: `4px solid ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD)}`
+		}), [highContrast]),
+		colors: KOREAN_COLORS,
+		fontFamily: FONT_FAMILY
+	};
+}
+//#endregion
+export { useKoreanTheme };
+
+//# sourceMappingURL=useKoreanTheme.js.map

package/lib/components/shared/base/useKoreanTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKoreanTheme.js","names":[],"sources":["../../../../src/components/shared/base/useKoreanTheme.ts"],"sourcesContent":["/**\n * useKoreanTheme - Custom hook for Korean cyberpunk theming\n * \n * Provides centralized Korean theme styling and responsive utilities\n * Eliminates code duplication across UI components\n * \n * Enhanced with:\n * - Korean typography optimization (line height, letter spacing, word break)\n * - Accessibility features (focus indicators, touch targets, high contrast)\n * - WCAG 2.1 AA compliant color contrast ratios\n * \n * @module components/base\n */\n\nimport { useMemo } from \"react\";\nimport { KOREAN_COLORS, FONT_FAMILY } from \"../../../types/constants\";\nimport { hexToRgbaString } from \"../../../utils/colorUtils\";\n\n/**\n * Button variant configuration\n */\nexport interface ButtonVariantConfig {\n  readonly background: number;\n  readonly border: number;\n  readonly text: number;\n  readonly hoverBg: string;\n  readonly activeBg: string;\n}\n\n/**\n * Panel variant configuration\n */\nexport interface PanelVariantConfig {\n  readonly background: string;\n  readonly border: string;\n  readonly boxShadow: string;\n}\n\n/**\n * Size dimension configuration\n */\nexport interface SizeDimensions {\n  readonly padding: string;\n  readonly fontSize: string;\n  readonly borderWidth: string;\n}\n\n/**\n * Text size configuration\n */\nexport interface TextSizeConfig {\n  readonly korean: string;\n  readonly english: string;\n}\n\n/**\n * Korean typography configuration\n */\nexport interface KoreanTypographyConfig {\n  readonly fontFamily: string;\n  readonly lineHeight: number;\n  readonly letterSpacing: string;\n  readonly wordBreak: \"normal\" | \"break-all\" | \"keep-all\" | \"break-word\";\n  readonly wordWrap: \"normal\" | \"break-word\";\n}\n\n/**\n * Accessibility configuration\n */\nexport interface AccessibilityConfig {\n  readonly focusOutline: string;\n  readonly focusOutlineOffset: string;\n  readonly minTouchTarget: string;\n  readonly highContrastFocusOutline: string;\n}\n\n/**\n * Korean theme hook configuration\n */\nexport interface UseKoreanThemeConfig {\n  readonly variant?: \"primary\" | \"secondary\" | \"danger\" | \"default\" | \"bordered\" | \"elevated\";\n  readonly size?: \"sm\" | \"md\" | \"lg\" | \"small\" | \"medium\" | \"large\" | \"xlarge\";\n  readonly disabled?: boolean;\n  readonly isMobile?: boolean;\n  readonly highContrast?: boolean;\n}\n\n/**\n * Custom hook for Korean cyberpunk theming\n * \n * Provides consistent styling patterns for all Korean-themed components\n * Enhanced with Korean typography optimization and accessibility features\n * \n * @example\n * ```tsx\n * const { buttonVariant, sizeDimensions, koreanTypography } = useKoreanTheme({\n *   variant: \"primary\",\n *   size: \"md\"\n * });\n * ```\n */\nexport function useKoreanTheme(config: UseKoreanThemeConfig = {}) {\n  const {\n    variant = \"primary\",\n    size = \"md\",\n    disabled = false,\n    isMobile = false,\n    highContrast = false,\n  } = config;\n\n  /**\n   * Get button variant colors\n   */\n  const buttonVariant = useMemo<ButtonVariantConfig>(() => {\n    switch (variant) {\n      case \"primary\":\n        return {\n          background: KOREAN_COLORS.UI_BACKGROUND_DARK,\n          border: KOREAN_COLORS.PRIMARY_CYAN,\n          text: KOREAN_COLORS.ACCENT_GOLD,\n          hoverBg: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.1),\n          activeBg: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.2),\n        };\n      case \"secondary\":\n        return {\n          background: KOREAN_COLORS.UI_BACKGROUND_MEDIUM,\n          border: KOREAN_COLORS.ACCENT_GOLD,\n          text: KOREAN_COLORS.TEXT_PRIMARY,\n          hoverBg: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 0.1),\n          activeBg: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 0.2),\n        };\n      case \"danger\":\n        return {\n          background: KOREAN_COLORS.UI_BACKGROUND_DARK,\n          border: KOREAN_COLORS.ACCENT_RED,\n          text: KOREAN_COLORS.ACCENT_RED,\n          hoverBg: hexToRgbaString(KOREAN_COLORS.ACCENT_RED, 0.1),\n          activeBg: hexToRgbaString(KOREAN_COLORS.ACCENT_RED, 0.2),\n        };\n      default:\n        return {\n          background: KOREAN_COLORS.UI_BACKGROUND_DARK,\n          border: KOREAN_COLORS.PRIMARY_CYAN,\n          text: KOREAN_COLORS.ACCENT_GOLD,\n          hoverBg: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.1),\n          activeBg: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.2),\n        };\n    }\n  }, [variant]);\n\n  /**\n   * Get panel variant styling\n   */\n  const panelVariant = useMemo<PanelVariantConfig>(() => {\n    switch (variant) {\n      case \"bordered\":\n        return {\n          background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.95),\n          border: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.8)}`,\n          boxShadow: `0 0 15px ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.3)}`,\n        };\n      case \"elevated\":\n        return {\n          background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, 0.9),\n          border: `1px solid ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 0.5)}`,\n          boxShadow: `\n            0 4px 12px ${hexToRgbaString(KOREAN_COLORS.BLACK_SOLID, 0.5)},\n            0 0 20px ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 0.2)}\n          `,\n        };\n      case \"default\":\n      default:\n        return {\n          background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.85),\n          border: `1px solid ${hexToRgbaString(KOREAN_COLORS.UI_BORDER, 0.5)}`,\n          boxShadow: \"none\",\n        };\n    }\n  }, [variant]);\n\n  /**\n   * Get size dimensions for buttons with touch-optimized mobile values\n   * Mobile: 48px+ minimum touch targets with 16px+ Korean font\n   */\n  const buttonSize = useMemo<SizeDimensions>(() => {\n    // Touch-optimized sizing for mobile (no scale down)\n    const scale = isMobile ? 1.0 : 1.0; // Keep full size on mobile for 48px+ targets\n    \n    switch (size) {\n      case \"sm\":\n      case \"small\":\n        return {\n          padding: `${Math.round(8 * scale)}px ${Math.round(16 * scale)}px`,\n          fontSize: isMobile ? \"14px\" : `${Math.round(14 * scale)}px`, // Maintain readable size\n          borderWidth: \"1px\",\n        };\n      case \"lg\":\n      case \"large\":\n        return {\n          padding: `${Math.round(16 * scale)}px ${Math.round(32 * scale)}px`,\n          fontSize: isMobile ? \"18px\" : `${Math.round(20 * scale)}px`, // 18px minimum for Korean\n          borderWidth: \"3px\",\n        };\n      case \"md\":\n      case \"medium\":\n      default:\n        return {\n          padding: `${Math.round(12 * scale)}px ${Math.round(24 * scale)}px`,\n          fontSize: isMobile ? \"16px\" : `${Math.round(16 * scale)}px`, // 16px minimum for Korean\n          borderWidth: \"2px\",\n        };\n    }\n  }, [size, isMobile]);\n\n  /**\n   * Get text size configuration\n   */\n  const textSize = useMemo<TextSizeConfig>(() => {\n    const scale = isMobile ? 0.9 : 1.0;\n    \n    switch (size) {\n      case \"small\":\n        return {\n          korean: `${Math.round(14 * scale)}px`,\n          english: `${Math.round(12 * scale)}px`,\n        };\n      case \"large\":\n        return {\n          korean: `${Math.round(24 * scale)}px`,\n          english: `${Math.round(18 * scale)}px`,\n        };\n      case \"xlarge\":\n        return {\n          korean: `${Math.round(32 * scale)}px`,\n          english: `${Math.round(24 * scale)}px`,\n        };\n      case \"medium\":\n      default:\n        return {\n          korean: `${Math.round(18 * scale)}px`,\n          english: `${Math.round(14 * scale)}px`,\n        };\n    }\n  }, [size, isMobile]);\n\n  /**\n   * Calculate responsive size\n   */\n  const calculateResponsiveSize = useMemo(() => {\n    return (baseSize: number) => {\n      return isMobile ? Math.round(baseSize * 0.8) : baseSize;\n    };\n  }, [isMobile]);\n\n  /**\n   * Apply Korean theme to base styles\n   */\n  const applyKoreanTheme = useMemo(() => {\n    return (baseStyle: React.CSSProperties): React.CSSProperties => {\n      return {\n        ...baseStyle,\n        fontFamily: FONT_FAMILY.KOREAN,\n        color: hexToRgbaString(KOREAN_COLORS.TEXT_PRIMARY),\n        opacity: disabled ? 0.5 : 1,\n      };\n    };\n  }, [disabled]);\n\n  /**\n   * Korean typography configuration\n   * Optimized for Korean character readability\n   * \n   * - Line height: 1.6 for Korean characters (vs 1.5 for Latin)\n   * - Letter spacing: -0.01em for tighter Korean spacing\n   * - Word break: keep-all to prevent breaking Korean words\n   * - Word wrap: break-word for long words\n   */\n  const koreanTypography = useMemo<KoreanTypographyConfig>(() => ({\n    fontFamily: FONT_FAMILY.KOREAN,\n    lineHeight: 1.6, // Optimal for Korean character readability\n    letterSpacing: \"-0.01em\", // Tighter spacing for Korean\n    wordBreak: \"keep-all\", // Prevent breaking Korean words mid-syllable\n    wordWrap: \"break-word\", // Wrap long words appropriately\n  }), []);\n\n  /**\n   * Accessibility configuration\n   * WCAG 2.1 AA compliant focus indicators and touch targets\n   */\n  const accessibility = useMemo<AccessibilityConfig>(() => ({\n    focusOutline: highContrast\n      ? `4px solid ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD)}` // High contrast mode\n      : `3px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN)}`, // Normal mode\n    focusOutlineOffset: \"2px\",\n    minTouchTarget: \"44px\", // WCAG 2.1 AA minimum touch target size\n    highContrastFocusOutline: `4px solid ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD)}`,\n  }), [highContrast]);\n\n  return {\n    buttonVariant,\n    panelVariant,\n    buttonSize,\n    textSize,\n    calculateResponsiveSize,\n    applyKoreanTheme,\n    koreanTypography,\n    accessibility,\n    colors: KOREAN_COLORS,\n    fontFamily: FONT_FAMILY,\n  };\n}\n"],"mappings":"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"}

package/lib/components/shared/debug/PerformanceDebugOverlayHtml.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Performance Debug Overlay
+ *
+ * Shows real-time animation performance metrics in development mode.
+ * Displays frame times, cache hit rate, and object pool status.
+ *
+ * Only visible in development mode.
+ *
+ * @module components/shared/debug/PerformanceDebugOverlayHtml
+ * @category Debug
+ * @korean 성능디버그오버레이
+ */
+import React from "react";
+/**
+ * Performance Debug Overlay Component
+ *
+ * Shows real-time animation performance metrics:
+ * - Average/max frame times
+ * - Cache hit rate
+ * - Object pool utilization
+ *
+ * Only renders in development mode.
+ *
+ * Optimized with React.memo for 60fps performance:
+ * - Memoized to prevent parent re-renders from affecting it
+ * - Internal state updates only via interval
+ *
+ * @returns Performance overlay or null in production
+ * @korean 성능디버그오버레이컴포넌트
+ */
+export declare const PerformanceDebugOverlayHtml: React.MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element | null>;
+//# sourceMappingURL=PerformanceDebugOverlayHtml.d.ts.map

package/lib/components/shared/debug/PerformanceDebugOverlayHtml.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PerformanceDebugOverlayHtml.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/debug/PerformanceDebugOverlayHtml.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAA8B,MAAM,OAAO,CAAC;AA4BnD;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,2BAA2B,iFAsOtC,CAAC"}

package/lib/components/shared/debug/PerformanceDebugOverlayHtml.js

@@ -0,0 +1,69 @@
+import "../../../types/constants/index.js";
+import { ThreeObjectPools } from "../../../utils/threeObjectPool.js";
+import { performanceMonitor } from "../../../systems/animation/core/AnimationOptimizations.js";
+import "../../../systems/animation/index.js";
+import React, { useEffect, useState } from "react";
+import "react/jsx-runtime";
+//#region src/components/shared/debug/PerformanceDebugOverlayHtml.tsx
+/**
+* Performance Debug Overlay
+*
+* Shows real-time animation performance metrics in development mode.
+* Displays frame times, cache hit rate, and object pool status.
+*
+* Only visible in development mode.
+*
+* @module components/shared/debug/PerformanceDebugOverlayHtml
+* @category Debug
+* @korean 성능디버그오버레이
+*/
+/**
+* Performance Debug Overlay Component
+*
+* Shows real-time animation performance metrics:
+* - Average/max frame times
+* - Cache hit rate
+* - Object pool utilization
+*
+* Only renders in development mode.
+*
+* Optimized with React.memo for 60fps performance:
+* - Memoized to prevent parent re-renders from affecting it
+* - Internal state updates only via interval
+*
+* @returns Performance overlay or null in production
+* @korean 성능디버그오버레이컴포넌트
+*/
+var PerformanceDebugOverlayHtml = React.memo(() => {
+	const [metrics, setMetrics] = useState({
+		avgFrameTime: 0,
+		maxFrameTime: 0,
+		cacheHitRate: 0,
+		cacheEntries: 0
+	});
+	const [pools, setPools] = useState({
+		euler: 0,
+		vector3: 0,
+		matrix4: 0,
+		quaternion: 0
+	});
+	useEffect(() => {
+		const interval = setInterval(() => {
+			const newMetrics = performanceMonitor.getMetrics();
+			setMetrics({
+				avgFrameTime: newMetrics.avgFrameTime,
+				maxFrameTime: newMetrics.maxFrameTime,
+				cacheHitRate: newMetrics.cacheHitRate,
+				cacheEntries: newMetrics.cacheEntries
+			});
+			setPools(ThreeObjectPools.getStatus());
+		}, 1e3);
+		return () => clearInterval(interval);
+	}, []);
+	return null;
+});
+PerformanceDebugOverlayHtml.displayName = "PerformanceDebugOverlayHtml";
+//#endregion
+export { PerformanceDebugOverlayHtml };
+
+//# sourceMappingURL=PerformanceDebugOverlayHtml.js.map

package/lib/components/shared/debug/PerformanceDebugOverlayHtml.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PerformanceDebugOverlayHtml.js","names":[],"sources":["../../../../src/components/shared/debug/PerformanceDebugOverlayHtml.tsx"],"sourcesContent":["/**\n * Performance Debug Overlay\n *\n * Shows real-time animation performance metrics in development mode.\n * Displays frame times, cache hit rate, and object pool status.\n *\n * Only visible in development mode.\n *\n * @module components/shared/debug/PerformanceDebugOverlayHtml\n * @category Debug\n * @korean 성능디버그오버레이\n */\n\nimport React, { useEffect, useState } from \"react\";\nimport { performanceMonitor } from \"../../../systems/animation\";\nimport { ThreeObjectPools } from \"../../../utils/threeObjectPool\";\nimport { KOREAN_COLORS } from \"@/types/constants\";\nimport { hexToRgbaString, hexColorToCSS } from \"../../../utils/colorUtils\";\n\n/**\n * Performance metrics interface\n * @korean 성능지표\n */\ninterface PerformanceMetrics {\n  avgFrameTime: number;\n  maxFrameTime: number;\n  cacheHitRate: number;\n  cacheEntries: number;\n}\n\n/**\n * Pool status interface\n * @korean 풀상태\n */\ninterface PoolStatus {\n  euler: number;\n  vector3: number;\n  matrix4: number;\n  quaternion: number;\n}\n\n/**\n * Performance Debug Overlay Component\n *\n * Shows real-time animation performance metrics:\n * - Average/max frame times\n * - Cache hit rate\n * - Object pool utilization\n *\n * Only renders in development mode.\n *\n * Optimized with React.memo for 60fps performance:\n * - Memoized to prevent parent re-renders from affecting it\n * - Internal state updates only via interval\n *\n * @returns Performance overlay or null in production\n * @korean 성능디버그오버레이컴포넌트\n */\nexport const PerformanceDebugOverlayHtml = React.memo(() => {\n  const [metrics, setMetrics] = useState<PerformanceMetrics>({\n    avgFrameTime: 0,\n    maxFrameTime: 0,\n    cacheHitRate: 0,\n    cacheEntries: 0,\n  });\n  const [pools, setPools] = useState<PoolStatus>({\n    euler: 0,\n    vector3: 0,\n    matrix4: 0,\n    quaternion: 0,\n  });\n\n  useEffect(() => {\n    // Update metrics every second\n    const interval = setInterval(() => {\n      const newMetrics = performanceMonitor.getMetrics();\n      setMetrics({\n        avgFrameTime: newMetrics.avgFrameTime,\n        maxFrameTime: newMetrics.maxFrameTime,\n        cacheHitRate: newMetrics.cacheHitRate,\n        cacheEntries: newMetrics.cacheEntries,\n      });\n      setPools(ThreeObjectPools.getStatus());\n    }, 1000);\n\n    return () => clearInterval(interval);\n  }, []);\n\n  // Only show in development\n  if (import.meta.env.PROD) {\n    return null;\n  }\n\n  // Color coding for frame times using KOREAN_COLORS\n  const frameTimeColor =\n    metrics.avgFrameTime < 5\n      ? hexColorToCSS(KOREAN_COLORS.POSITIVE_GREEN) // Green: Target met\n      : metrics.avgFrameTime < 8\n        ? hexColorToCSS(KOREAN_COLORS.WARNING_YELLOW) // Yellow: Warning\n        : hexColorToCSS(KOREAN_COLORS.ACCENT_RED); // Red: Critical\n\n  const cacheColor =\n    metrics.cacheHitRate > 0.9\n      ? hexColorToCSS(KOREAN_COLORS.POSITIVE_GREEN) // Green: Excellent\n      : metrics.cacheHitRate > 0.7\n        ? hexColorToCSS(KOREAN_COLORS.WARNING_YELLOW) // Yellow: Good\n        : hexColorToCSS(KOREAN_COLORS.ACCENT_RED); // Red: Poor\n\n  const poolColor = (available: number, threshold: number) =>\n    available > threshold\n      ? hexColorToCSS(KOREAN_COLORS.POSITIVE_GREEN)\n      : hexColorToCSS(KOREAN_COLORS.WARNING_YELLOW);\n\n  return (\n    <div\n      style={{\n        position: \"fixed\",\n        top: 10,\n        right: 10,\n        background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.85),\n        color: hexColorToCSS(KOREAN_COLORS.PRIMARY_CYAN),\n        padding: \"12px\",\n        fontFamily: \"monospace\",\n        fontSize: \"11px\",\n        lineHeight: \"1.4\",\n        zIndex: 9999,\n        border: `1px solid ${hexColorToCSS(KOREAN_COLORS.PRIMARY_CYAN)}`,\n        borderRadius: \"4px\",\n        minWidth: \"200px\",\n        userSelect: \"none\",\n        pointerEvents: \"none\",\n      }}\n      data-testid=\"performance-debug-overlay\"\n    >\n      <div\n        style={{\n          fontWeight: \"bold\",\n          marginBottom: \"8px\",\n          color: hexColorToCSS(KOREAN_COLORS.TEXT_PRIMARY),\n        }}\n      >\n        🎯 Animation Performance\n      </div>\n      <div\n        style={{\n          borderBottom: `1px solid ${hexColorToCSS(KOREAN_COLORS.PRIMARY_CYAN)}`,\n          marginBottom: \"6px\",\n        }}\n      />\n\n      {/* Frame Times */}\n      <div style={{ marginBottom: \"4px\" }}>\n        <span style={{ color: hexColorToCSS(KOREAN_COLORS.TEXT_SECONDARY) }}>\n          Avg Frame:{\" \"}\n        </span>\n        <span style={{ color: frameTimeColor, fontWeight: \"bold\" }}>\n          {metrics.avgFrameTime.toFixed(2)}ms\n        </span>\n        <span\n          style={{\n            color: hexColorToCSS(KOREAN_COLORS.UI_BACKGROUND_LIGHT),\n            fontSize: \"9px\",\n            marginLeft: \"4px\",\n          }}\n        >\n          (target: &lt;5ms)\n        </span>\n      </div>\n      <div style={{ marginBottom: \"6px\" }}>\n        <span style={{ color: hexColorToCSS(KOREAN_COLORS.TEXT_SECONDARY) }}>\n          Max Frame:{\" \"}\n        </span>\n        <span style={{ color: frameTimeColor }}>\n          {metrics.maxFrameTime.toFixed(2)}ms\n        </span>\n      </div>\n\n      {/* Cache Performance */}\n      <div style={{ marginBottom: \"4px\" }}>\n        <span style={{ color: hexColorToCSS(KOREAN_COLORS.TEXT_SECONDARY) }}>\n          Cache Hit:{\" \"}\n        </span>\n        <span style={{ color: cacheColor, fontWeight: \"bold\" }}>\n          {(metrics.cacheHitRate * 100).toFixed(1)}%\n        </span>\n        <span\n          style={{\n            color: hexColorToCSS(KOREAN_COLORS.UI_BACKGROUND_LIGHT),\n            fontSize: \"9px\",\n            marginLeft: \"4px\",\n          }}\n        >\n          (target: &gt;90%)\n        </span>\n      </div>\n      <div style={{ marginBottom: \"8px\" }}>\n        <span style={{ color: hexColorToCSS(KOREAN_COLORS.TEXT_SECONDARY) }}>\n          Cached:{\" \"}\n        </span>\n        <span>{metrics.cacheEntries} keyframes</span>\n      </div>\n\n      <div\n        style={{\n          borderBottom: `1px solid ${hexColorToCSS(KOREAN_COLORS.PRIMARY_CYAN)}`,\n          marginBottom: \"6px\",\n        }}\n      />\n\n      {/* Object Pools */}\n      <div\n        style={{\n          fontSize: \"10px\",\n          color: hexColorToCSS(KOREAN_COLORS.TEXT_SECONDARY),\n          marginBottom: \"4px\",\n        }}\n      >\n        Object Pools (available)\n      </div>\n      <div style={{ marginBottom: \"2px\" }}>\n        <span style={{ color: hexColorToCSS(KOREAN_COLORS.TEXT_SECONDARY) }}>\n          Euler:{\" \"}\n        </span>\n        <span style={{ color: poolColor(pools.euler, 100) }}>\n          {pools.euler}\n        </span>\n      </div>\n      <div style={{ marginBottom: \"2px\" }}>\n        <span style={{ color: hexColorToCSS(KOREAN_COLORS.TEXT_SECONDARY) }}>\n          Vector3:{\" \"}\n        </span>\n        <span style={{ color: poolColor(pools.vector3, 100) }}>\n          {pools.vector3}\n        </span>\n      </div>\n      <div style={{ marginBottom: \"2px\" }}>\n        <span style={{ color: hexColorToCSS(KOREAN_COLORS.TEXT_SECONDARY) }}>\n          Matrix4:{\" \"}\n        </span>\n        <span style={{ color: poolColor(pools.matrix4, 50) }}>\n          {pools.matrix4}\n        </span>\n      </div>\n      <div style={{ marginBottom: \"2px\" }}>\n        <span style={{ color: hexColorToCSS(KOREAN_COLORS.TEXT_SECONDARY) }}>\n          Quaternion:{\" \"}\n        </span>\n        <span style={{ color: poolColor(pools.quaternion, 50) }}>\n          {pools.quaternion}\n        </span>\n      </div>\n\n      {/* Performance Status */}\n      <div\n        style={{\n          borderTop: `1px solid ${hexColorToCSS(KOREAN_COLORS.PRIMARY_CYAN)}`,\n          marginTop: \"8px\",\n          paddingTop: \"6px\",\n        }}\n      >\n        <div style={{ fontSize: \"10px\" }}>\n          <span style={{ color: hexColorToCSS(KOREAN_COLORS.TEXT_SECONDARY) }}>\n            Status:{\" \"}\n          </span>\n          {metrics.avgFrameTime < 5 && metrics.cacheHitRate > 0.9 ? (\n            <span\n              style={{\n                color: hexColorToCSS(KOREAN_COLORS.POSITIVE_GREEN),\n                fontWeight: \"bold\",\n              }}\n            >\n              ✓ OPTIMAL\n            </span>\n          ) : metrics.avgFrameTime < 8 && metrics.cacheHitRate > 0.7 ? (\n            <span\n              style={{ color: hexColorToCSS(KOREAN_COLORS.WARNING_YELLOW) }}\n            >\n              ⚠ GOOD\n            </span>\n          ) : (\n            <span style={{ color: hexColorToCSS(KOREAN_COLORS.ACCENT_RED) }}>\n              ✗ NEEDS OPTIMIZATION\n            </span>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n});\n\nPerformanceDebugOverlayHtml.displayName = \"PerformanceDebugOverlayHtml\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0DA,IAAa,8BAA8B,MAAM,WAAW;CAC1D,MAAM,CAAC,SAAS,cAAc,SAA6B;EACzD,cAAc;EACd,cAAc;EACd,cAAc;EACd,cAAc;EACf,CAAC;CACF,MAAM,CAAC,OAAO,YAAY,SAAqB;EAC7C,OAAO;EACP,SAAS;EACT,SAAS;EACT,YAAY;EACb,CAAC;AAEF,iBAAgB;EAEd,MAAM,WAAW,kBAAkB;GACjC,MAAM,aAAa,mBAAmB,YAAY;AAClD,cAAW;IACT,cAAc,WAAW;IACzB,cAAc,WAAW;IACzB,cAAc,WAAW;IACzB,cAAc,WAAW;IAC1B,CAAC;AACF,YAAS,iBAAiB,WAAW,CAAC;KACrC,IAAK;AAER,eAAa,cAAc,SAAS;IACnC,EAAE,CAAC;AAIJ,QAAO;EAsMT;AAEF,4BAA4B,cAAc"}

package/lib/components/shared/effects/ScreenFlash.d.ts

@@ -0,0 +1,98 @@
+/**
+ * Screen flash effect for explosive impacts
+ *
+ * Provides fullscreen flash effects for Jin (Thunder) trigram techniques
+ * with Korean cyberpunk color scheme.
+ *
+ * **Korean Martial Arts Context:**
+ * - 진괘 (Jin): Thunder trigram explosive release
+ * - 화면 섬광 (Screen Flash): Visual impact emphasis
+ * - 폭발 효과 (Explosive Effect): Thunder burst visualization
+ *
+ * @module components/shared/effects/ScreenFlash
+ * @korean 화면섬광
+ */
+import React from "react";
+/**
+ * Screen flash configuration
+ */
+export interface ScreenFlashConfig {
+    /** Flash intensity (0-1) */
+    readonly intensity: number;
+    /** Duration in milliseconds */
+    readonly duration: number;
+    /** Flash color (hex number) */
+    readonly color?: number;
+    /** Fade curve: 'linear' | 'ease-out' | 'ease-in-out' */
+    readonly fadeCurve?: "linear" | "ease-out" | "ease-in-out";
+}
+/**
+ * Props for ScreenFlash component
+ */
+export interface ScreenFlashProps {
+    /** Whether flash is active */
+    readonly active: boolean;
+    /** Flash configuration */
+    readonly config: ScreenFlashConfig;
+    /** Callback when flash completes */
+    readonly onComplete?: () => void;
+}
+/**
+ * ScreenFlash component - Fullscreen flash overlay
+ *
+ * Renders a fullscreen overlay with fade-out animation for explosive impacts.
+ * Uses Korean cyberpunk color palette for authentic Jin technique feel.
+ */
+export declare const ScreenFlash: React.FC<ScreenFlashProps>;
+/**
+ * Predefined flash profiles for Jin techniques
+ */
+export declare const JIN_FLASH_PROFILES: {
+    /** Light flash for quick strikes */
+    readonly light: {
+        readonly intensity: 0.4;
+        readonly duration: 150;
+        readonly color: 59110;
+        readonly fadeCurve: "ease-out";
+    };
+    /** Medium flash for standard impacts */
+    readonly medium: {
+        readonly intensity: 0.5;
+        readonly duration: 200;
+        readonly color: 16761856;
+        readonly fadeCurve: "ease-out";
+    };
+    /** Heavy flash for powerful techniques */
+    readonly heavy: {
+        readonly intensity: 0.6;
+        readonly duration: 250;
+        readonly color: 16729156;
+        readonly fadeCurve: "ease-out";
+    };
+    /** Explosive flash for maximum impact */
+    readonly explosive: {
+        readonly intensity: 0.8;
+        readonly duration: 300;
+        readonly color: 16761856;
+        readonly fadeCurve: "ease-in-out";
+    };
+};
+/**
+ * React hook for screen flash effects
+ */
+export declare const useScreenFlash: () => {
+    /** Trigger flash with custom configuration */
+    flash: (config: ScreenFlashConfig) => void;
+    /** Trigger flash using predefined profile */
+    flashProfile: (profile: keyof typeof JIN_FLASH_PROFILES) => void;
+    /** Flash component to render */
+    FlashComponent: import("react/jsx-runtime").JSX.Element | null;
+    /** Whether flash is currently active */
+    isActive: boolean;
+};
+/**
+ * Calculate flash intensity from Jin technique properties
+ */
+export declare const calculateJinFlashIntensity: (techniqueIntensity: number, explosivePower: number) => number;
+export default ScreenFlash;
+//# sourceMappingURL=ScreenFlash.d.ts.map

package/lib/components/shared/effects/ScreenFlash.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScreenFlash.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/effects/ScreenFlash.tsx"],"names":[],"mappings":"AACA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,4BAA4B;IAC5B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,+BAA+B;IAC/B,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,+BAA+B;IAC/B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,wDAAwD;IACxD,QAAQ,CAAC,SAAS,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,aAAa,CAAC;CAC5D;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,8BAA8B;IAC9B,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IACzB,0BAA0B;IAC1B,QAAQ,CAAC,MAAM,EAAE,iBAAiB,CAAC;IACnC,oCAAoC;IACpC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CAClC;AAED;;;;;GAKG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAsFlD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB;IAC7B,oCAAoC;;;;;;;IAOpC,wCAAwC;;;;;;;IAOxC,0CAA0C;;;;;;;IAO1C,yCAAyC;;;;;;;CAOjC,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,cAAc;IAoBvB,8CAA8C;oBAdvB,iBAAiB;IAgBxC,6CAA6C;4BAXd,MAAM,OAAO,kBAAkB;IAa9D,gCAAgC;;IAQhC,wCAAwC;;CAG3C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,0BAA0B,GACrC,oBAAoB,MAAM,EAC1B,gBAAgB,MAAM,KACrB,MAEF,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -0,0 +1,44 @@
+/**
+ * ActionButtons Component
+ *
+ * Touch-optimized action buttons for combat (Attack and Block)
+ * Provides tactile combat controls with visual feedback and haptic response
+ *
+ * WCAG 2.1 Level AA Compliance:
+ * - ARIA labels for screen readers
+ * - Keyboard navigation (Enter, Space)
+ * - Visible focus indicators (2px cyan border)
+ * - 80x80px and 70x70px touch targets (exceeds 44x44px minimum)
+ *
+ * @module components/mobile/ActionButtons
+ * @category Mobile Controls
+ * @korean 액션 버튼
+ */
+import React from "react";
+/**
+ * Event type for button interactions
+ */
+export type ButtonEventType = "start" | "end";
+/**
+ * Props for ActionButtons component
+ */
+export interface ActionButtonsProps {
+    /** Callback when attack button is pressed */
+    readonly onAttack: () => void;
+    /** Callback when block button is pressed/released */
+    readonly onBlock: (eventType: ButtonEventType) => void;
+    /** Whether buttons are disabled */
+    readonly disabled?: boolean;
+    /** Position from bottom in pixels (default: 34 for safe area) */
+    readonly bottom?: number;
+    /** Position from right in pixels (default: 20) */
+    readonly right?: number;
+    /** Opacity of buttons (default: 0.8) */
+    readonly opacity?: number;
+}
+/**
+ * Memoized ActionButtons with custom comparison
+ * Only re-renders when props change
+ */
+export declare const ActionButtons: React.NamedExoticComponent<ActionButtonsProps>;
+//# sourceMappingURL=ActionButtons.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ActionButtons.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/mobile/ActionButtons.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAGH,OAAO,KAMN,MAAM,OAAO,CAAC;AAaf;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,KAAK,CAAC;AAE9C;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,6CAA6C;IAC7C,QAAQ,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAC;IAC9B,qDAAqD;IACrD,QAAQ,CAAC,OAAO,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;IACvD,mCAAmC;IACnC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,iEAAiE;IACjE,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,kDAAkD;IAClD,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,wCAAwC;IACxC,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;CAC3B;AA4XD;;;GAGG;AACH,eAAO,MAAM,aAAa,gDAYzB,CAAC"}