blacktrigram 0.7.2

package/lib/utils/visualEffects.js

@@ -0,0 +1,423 @@
+import { KOREAN_COLORS } from "../types/constants/colors.js";
+import "../types/constants/index.js";
+import { hexToRgbaString } from "./colorUtils.js";
+//#region src/utils/visualEffects.ts
+/**
+* Visual Effects Utilities for Korean Cyberpunk Aesthetic
+*
+* Provides advanced visual effects for HTML overlay components including:
+* - Neon glow effects (box-shadow, text-shadow)
+* - Depth effects (layered shadows, gradients, backdrop-blur)
+* - Smooth transitions and animations
+* - Korean font rendering optimization
+* - Hover and focus state generators
+*
+* All effects follow Korean martial arts cyberpunk theme with 60fps performance target.
+*
+* @module utils/visualEffects
+* @category UI Utilities
+* @korean 시각효과유틸리티
+*/
+/**
+* Get neon glow effect CSS string
+*
+* Creates cyberpunk-style neon glow using box-shadow with Korean colors.
+* Supports multiple intensity levels for different UI elements.
+*
+* @param color - Hex color value from KOREAN_COLORS
+* @param intensity - Glow intensity level
+* @param includeInset - Whether to include inset glow (default: true)
+* @returns CSS box-shadow string with neon glow effect
+*
+* @example
+* ```typescript
+* const glow = getNeonGlowEffect(KOREAN_COLORS.PRIMARY_CYAN, 'medium', true);
+* // Returns: "0 0 20px rgba(0,230,230,0.6), inset 0 0 10px rgba(0,230,230,0.3)"
+* // Note: Color conversion is handled by hexToRgbaString utility
+* ```
+*
+* @korean 네온글로우효과얻기
+*/
+function getNeonGlowEffect(color, intensity = "medium", includeInset = true) {
+	const config = {
+		subtle: {
+			outer: 10,
+			outerOpacity: .4,
+			inner: 5,
+			innerOpacity: .2
+		},
+		medium: {
+			outer: 20,
+			outerOpacity: .6,
+			inner: 10,
+			innerOpacity: .3
+		},
+		strong: {
+			outer: 30,
+			outerOpacity: .8,
+			inner: 15,
+			innerOpacity: .4
+		},
+		intense: {
+			outer: 40,
+			outerOpacity: 1,
+			inner: 20,
+			innerOpacity: .5
+		}
+	}[intensity];
+	return `${`0 0 ${config.outer}px ${hexToRgbaString(color, config.outerOpacity)}`}${includeInset ? `, inset 0 0 ${config.inner}px ${hexToRgbaString(color, config.innerOpacity)}` : ""}`;
+}
+/**
+* Get neon text shadow effect
+*
+* Creates glowing text effect for Korean and English text using text-shadow.
+* Multiple shadow layers create authentic neon glow appearance.
+*
+* @param color - Hex color value from KOREAN_COLORS
+* @param intensity - Glow intensity level
+* @returns CSS text-shadow string with neon glow
+*
+* @example
+* ```typescript
+* const textGlow = getNeonTextShadow(KOREAN_COLORS.ACCENT_GOLD, 'strong');
+* // Returns: "0 0 10px rgba(255,196,0,0.8), 0 0 20px rgba(255,196,0,0.6), 0 0 30px rgba(255,196,0,0.4)"
+* ```
+*
+* @korean 네온텍스트그림자얻기
+*/
+function getNeonTextShadow(color, intensity = "medium") {
+	return {
+		subtle: [{
+			blur: 5,
+			opacity: .6
+		}, {
+			blur: 10,
+			opacity: .4
+		}],
+		medium: [
+			{
+				blur: 10,
+				opacity: .8
+			},
+			{
+				blur: 20,
+				opacity: .6
+			},
+			{
+				blur: 30,
+				opacity: .4
+			}
+		],
+		strong: [
+			{
+				blur: 15,
+				opacity: 1
+			},
+			{
+				blur: 30,
+				opacity: .8
+			},
+			{
+				blur: 45,
+				opacity: .6
+			}
+		],
+		intense: [
+			{
+				blur: 20,
+				opacity: 1
+			},
+			{
+				blur: 40,
+				opacity: .9
+			},
+			{
+				blur: 60,
+				opacity: .7
+			},
+			{
+				blur: 80,
+				opacity: .5
+			}
+		]
+	}[intensity].map(({ blur, opacity }) => `0 0 ${blur}px ${hexToRgbaString(color, opacity)}`).join(", ");
+}
+/**
+* Get layered depth effect
+*
+* Creates depth using multiple shadow layers with increasing offset and blur.
+* Provides 3D-like appearance for Korean-themed UI panels.
+*
+* @param config - Depth effect configuration
+* @returns CSS box-shadow string with layered depth
+*
+* @example
+* ```typescript
+* const depth = getLayeredDepthEffect({
+*   layers: 3,
+*   baseOffset: 2,
+*   baseBlur: 4,
+*   color: KOREAN_COLORS.BLACK_SOLID,
+*   opacity: 0.5,
+* });
+* ```
+*
+* @korean 레이어깊이효과얻기
+*/
+function getLayeredDepthEffect(config) {
+	const { layers, baseOffset, baseBlur, color, opacity } = config;
+	const shadows = [];
+	for (let i = 1; i <= layers; i++) {
+		const offset = baseOffset * i;
+		const blur = baseBlur * i;
+		const layerOpacity = opacity * (1 - (i - 1) / layers * .3);
+		shadows.push(`0 ${offset}px ${blur}px ${hexToRgbaString(color, layerOpacity)}`);
+	}
+	return shadows.join(", ");
+}
+/**
+* Get cyberpunk gradient background
+*
+* Creates Korean-themed gradient with cyberpunk colors.
+* Supports both linear and radial gradients.
+*
+* @param primaryColor - Primary hex color
+* @param secondaryColor - Secondary hex color
+* @param angle - Gradient angle in degrees (default: 135)
+* @param type - Gradient type ('linear' | 'radial')
+* @returns CSS gradient string
+*
+* @example
+* ```typescript
+* const gradient = getCyberpunkGradient(
+*   KOREAN_COLORS.PRIMARY_CYAN,
+*   KOREAN_COLORS.UI_BACKGROUND_DARK,
+*   135,
+*   'linear'
+* );
+* ```
+*
+* @korean 사이버펑크그라디언트얻기
+*/
+function getCyberpunkGradient(primaryColor, secondaryColor, angle = 135, type = "linear") {
+	const color1 = hexToRgbaString(primaryColor, .2);
+	const color2 = hexToRgbaString(secondaryColor, .9);
+	if (type === "radial") return `radial-gradient(circle at top left, ${color1} 0%, ${color2} 100%)`;
+	return `linear-gradient(${angle}deg, ${color1} 0%, ${color2} 100%)`;
+}
+/**
+* Get smooth transition CSS
+*
+* Returns standardized transition string for consistent animations.
+* All transitions target 60fps performance.
+*
+* @param properties - CSS properties to transition (default: 'all')
+* @param timing - Timing preset
+* @returns CSS transition string
+*
+* @example
+* ```typescript
+* const transition = getSmoothTransition('all', 'normal');
+* // Returns: "all 0.2s ease-in-out"
+* ```
+*
+* @korean 부드러운전환얻기
+*/
+function getSmoothTransition(properties = "all", timing = "normal") {
+	const config = {
+		fast: {
+			duration: "0.15s",
+			easing: "ease-out"
+		},
+		normal: {
+			duration: "0.2s",
+			easing: "ease-in-out"
+		},
+		slow: {
+			duration: "0.3s",
+			easing: "ease-in-out"
+		},
+		smooth: {
+			duration: "0.25s",
+			easing: "cubic-bezier(0.4, 0, 0.2, 1)"
+		}
+	}[timing];
+	return `${properties} ${config.duration} ${config.easing}`;
+}
+/**
+* Get Korean font optimization styles
+*
+* Applies optimal font rendering for Korean characters (Hangul).
+* Includes anti-aliasing, subpixel rendering, and letter spacing.
+*
+* @param fontSize - Font size in pixels
+* @param fontWeight - Font weight (default: 'normal')
+* @returns React.CSSProperties with Korean font optimization
+*
+* @example
+* ```typescript
+* const fontStyle = getKoreanFontOptimization(16, 'bold');
+* // Returns: { fontSize: '16px', WebkitFontSmoothing: 'antialiased', ... }
+* ```
+*
+* @korean 한글폰트최적화얻기
+*/
+function getKoreanFontOptimization(fontSize, fontWeight = "normal") {
+	return {
+		fontSize: `${fontSize}px`,
+		fontWeight,
+		WebkitFontSmoothing: "antialiased",
+		MozOsxFontSmoothing: "grayscale",
+		textRendering: "optimizeLegibility",
+		letterSpacing: "0.02em",
+		lineHeight: 1.5
+	};
+}
+/**
+* Get hover state styles with glow effect
+*
+* Generates hover state styles with Korean cyberpunk animations.
+* Includes glow intensification, scale, and lift effects.
+*
+* @param baseColor - Base hex color
+* @param animation - Animation type
+* @param intensity - Glow intensity for hover state
+* @returns React.CSSProperties for hover state
+*
+* @example
+* ```typescript
+* const hoverStyle = getHoverStateStyles(
+*   KOREAN_COLORS.PRIMARY_CYAN,
+*   'combined',
+*   'strong'
+* );
+* ```
+*
+* @korean 호버상태스타일얻기
+*/
+function getHoverStateStyles(baseColor, animation = "combined", intensity = "strong") {
+	const baseStyles = {
+		transition: getSmoothTransition("all", "normal"),
+		cursor: "pointer"
+	};
+	const glowStyles = { boxShadow: getNeonGlowEffect(baseColor, intensity, true) };
+	const scaleStyles = { transform: "scale(1.05)" };
+	const liftStyles = {
+		transform: "translateY(-2px)",
+		boxShadow: getLayeredDepthEffect({
+			layers: 3,
+			baseOffset: 4,
+			baseBlur: 8,
+			color: KOREAN_COLORS.BLACK_SOLID,
+			opacity: .6
+		})
+	};
+	const pulseStyles = { animation: "pulse 1.5s ease-in-out infinite" };
+	switch (animation) {
+		case "glow": return {
+			...baseStyles,
+			...glowStyles
+		};
+		case "scale": return {
+			...baseStyles,
+			...scaleStyles
+		};
+		case "lift": return {
+			...baseStyles,
+			...liftStyles
+		};
+		case "pulse": return {
+			...baseStyles,
+			...pulseStyles
+		};
+		case "combined": return {
+			...baseStyles,
+			...glowStyles,
+			transform: "scale(1.02) translateY(-1px)"
+		};
+		default: return baseStyles;
+	}
+}
+/**
+* Get focus state styles with accessibility
+*
+* Creates WCAG-compliant focus indicators with Korean cyberpunk styling.
+* Ensures 2px border with high contrast (4.5:1 minimum).
+*
+* Note: While outline is set to "none", the custom 2px border provides
+* equivalent accessibility. For users relying on high-contrast mode or
+* custom browser settings, consider using outline-offset as an additional
+* fallback or ensure the custom border has sufficient contrast (4.5:1+).
+*
+* @param color - Hex color for focus indicator
+* @param includeGlow - Whether to include glow effect (default: true)
+* @returns React.CSSProperties for focus state
+*
+* @example
+* ```typescript
+* const focusStyle = getFocusStateStyles(KOREAN_COLORS.ACCENT_GOLD, true);
+* ```
+*
+* @korean 포커스상태스타일얻기
+*/
+function getFocusStateStyles(color, includeGlow = true) {
+	const baseStyles = {
+		outline: "none",
+		border: `2px solid ${hexToRgbaString(color, 1)}`
+	};
+	if (includeGlow) return {
+		...baseStyles,
+		boxShadow: getNeonGlowEffect(color, "medium", false)
+	};
+	return baseStyles;
+}
+/**
+* Get backdrop blur effect
+*
+* Creates frosted glass effect for Korean-themed overlays.
+* GPU-accelerated for 60fps performance.
+*
+* @param blurAmount - Blur amount in pixels (default: 10)
+* @param saturation - Color saturation multiplier (default: 1.5)
+* @returns React.CSSProperties with backdrop blur
+*
+* @example
+* ```typescript
+* const backdropStyle = getBackdropBlurEffect(12, 1.8);
+* ```
+*
+* @korean 배경블러효과얻기
+*/
+function getBackdropBlurEffect(blurAmount = 10, saturation = 1.5) {
+	return {
+		backdropFilter: `blur(${blurAmount}px) saturate(${saturation})`,
+		WebkitBackdropFilter: `blur(${blurAmount}px) saturate(${saturation})`,
+		backgroundColor: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, .8)
+	};
+}
+/**
+* Combine multiple shadow effects
+*
+* Merges multiple box-shadow strings into a single CSS value.
+* Useful for combining glow, depth, and custom shadows.
+*
+* @param shadows - Array of box-shadow strings
+* @returns Combined box-shadow CSS string
+*
+* @example
+* ```typescript
+* const combined = combineShadowEffects([
+*   getNeonGlowEffect(KOREAN_COLORS.PRIMARY_CYAN, 'medium'),
+*   getLayeredDepthEffect({ layers: 2, baseOffset: 2, baseBlur: 4, color: 0x000000, opacity: 0.5 })
+* ]);
+* ```
+*
+* @korean 그림자효과결합
+*/
+function combineShadowEffects(shadows) {
+	return shadows.filter(Boolean).join(", ");
+}
+//#endregion
+export { combineShadowEffects, getBackdropBlurEffect, getCyberpunkGradient, getFocusStateStyles, getHoverStateStyles, getKoreanFontOptimization, getLayeredDepthEffect, getNeonGlowEffect, getNeonTextShadow, getSmoothTransition };
+
+//# sourceMappingURL=visualEffects.js.map

package/lib/utils/visualEffects.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"visualEffects.js","names":[],"sources":["../../src/utils/visualEffects.ts"],"sourcesContent":["/**\n * Visual Effects Utilities for Korean Cyberpunk Aesthetic\n *\n * Provides advanced visual effects for HTML overlay components including:\n * - Neon glow effects (box-shadow, text-shadow)\n * - Depth effects (layered shadows, gradients, backdrop-blur)\n * - Smooth transitions and animations\n * - Korean font rendering optimization\n * - Hover and focus state generators\n *\n * All effects follow Korean martial arts cyberpunk theme with 60fps performance target.\n *\n * @module utils/visualEffects\n * @category UI Utilities\n * @korean 시각효과유틸리티\n */\n\nimport { KOREAN_COLORS } from \"@/types/constants\";\nimport { hexToRgbaString } from \"./colorUtils\";\n\n/**\n * Neon glow intensity levels\n * @korean 네온글로우강도\n */\nexport type GlowIntensity = \"subtle\" | \"medium\" | \"strong\" | \"intense\";\n\n/**\n * Hover state animation types\n * @korean 호버상태애니메이션\n */\nexport type HoverAnimationType =\n  | \"glow\"\n  | \"scale\"\n  | \"lift\"\n  | \"pulse\"\n  | \"combined\";\n\n/**\n * Transition timing presets\n * @korean 전환타이밍프리셋\n */\nexport type TransitionTiming = \"fast\" | \"normal\" | \"slow\" | \"smooth\";\n\n/**\n * Depth effect layer configuration\n * @korean 깊이효과레이어설정\n */\nexport interface DepthEffectConfig {\n  readonly layers: number;\n  readonly baseOffset: number;\n  readonly baseBlur: number;\n  readonly color: number;\n  readonly opacity: number;\n}\n\n/**\n * Get neon glow effect CSS string\n *\n * Creates cyberpunk-style neon glow using box-shadow with Korean colors.\n * Supports multiple intensity levels for different UI elements.\n *\n * @param color - Hex color value from KOREAN_COLORS\n * @param intensity - Glow intensity level\n * @param includeInset - Whether to include inset glow (default: true)\n * @returns CSS box-shadow string with neon glow effect\n *\n * @example\n * ```typescript\n * const glow = getNeonGlowEffect(KOREAN_COLORS.PRIMARY_CYAN, 'medium', true);\n * // Returns: \"0 0 20px rgba(0,230,230,0.6), inset 0 0 10px rgba(0,230,230,0.3)\"\n * // Note: Color conversion is handled by hexToRgbaString utility\n * ```\n *\n * @korean 네온글로우효과얻기\n */\nexport function getNeonGlowEffect(\n  color: number,\n  intensity: GlowIntensity = \"medium\",\n  includeInset: boolean = true,\n): string {\n  const glowConfig = {\n    subtle: { outer: 10, outerOpacity: 0.4, inner: 5, innerOpacity: 0.2 },\n    medium: { outer: 20, outerOpacity: 0.6, inner: 10, innerOpacity: 0.3 },\n    strong: { outer: 30, outerOpacity: 0.8, inner: 15, innerOpacity: 0.4 },\n    intense: { outer: 40, outerOpacity: 1.0, inner: 20, innerOpacity: 0.5 },\n  };\n\n  const config = glowConfig[intensity];\n  const outerGlow = `0 0 ${config.outer}px ${hexToRgbaString(color, config.outerOpacity)}`;\n  const insetGlow = includeInset\n    ? `, inset 0 0 ${config.inner}px ${hexToRgbaString(color, config.innerOpacity)}`\n    : \"\";\n\n  return `${outerGlow}${insetGlow}`;\n}\n\n/**\n * Get neon text shadow effect\n *\n * Creates glowing text effect for Korean and English text using text-shadow.\n * Multiple shadow layers create authentic neon glow appearance.\n *\n * @param color - Hex color value from KOREAN_COLORS\n * @param intensity - Glow intensity level\n * @returns CSS text-shadow string with neon glow\n *\n * @example\n * ```typescript\n * const textGlow = getNeonTextShadow(KOREAN_COLORS.ACCENT_GOLD, 'strong');\n * // Returns: \"0 0 10px rgba(255,196,0,0.8), 0 0 20px rgba(255,196,0,0.6), 0 0 30px rgba(255,196,0,0.4)\"\n * ```\n *\n * @korean 네온텍스트그림자얻기\n */\nexport function getNeonTextShadow(\n  color: number,\n  intensity: GlowIntensity = \"medium\",\n): string {\n  const shadowConfig = {\n    subtle: [\n      { blur: 5, opacity: 0.6 },\n      { blur: 10, opacity: 0.4 },\n    ],\n    medium: [\n      { blur: 10, opacity: 0.8 },\n      { blur: 20, opacity: 0.6 },\n      { blur: 30, opacity: 0.4 },\n    ],\n    strong: [\n      { blur: 15, opacity: 1.0 },\n      { blur: 30, opacity: 0.8 },\n      { blur: 45, opacity: 0.6 },\n    ],\n    intense: [\n      { blur: 20, opacity: 1.0 },\n      { blur: 40, opacity: 0.9 },\n      { blur: 60, opacity: 0.7 },\n      { blur: 80, opacity: 0.5 },\n    ],\n  };\n\n  const shadows = shadowConfig[intensity];\n  return shadows\n    .map(\n      ({ blur, opacity }) => `0 0 ${blur}px ${hexToRgbaString(color, opacity)}`,\n    )\n    .join(\", \");\n}\n\n/**\n * Get layered depth effect\n *\n * Creates depth using multiple shadow layers with increasing offset and blur.\n * Provides 3D-like appearance for Korean-themed UI panels.\n *\n * @param config - Depth effect configuration\n * @returns CSS box-shadow string with layered depth\n *\n * @example\n * ```typescript\n * const depth = getLayeredDepthEffect({\n *   layers: 3,\n *   baseOffset: 2,\n *   baseBlur: 4,\n *   color: KOREAN_COLORS.BLACK_SOLID,\n *   opacity: 0.5,\n * });\n * ```\n *\n * @korean 레이어깊이효과얻기\n */\nexport function getLayeredDepthEffect(config: DepthEffectConfig): string {\n  const { layers, baseOffset, baseBlur, color, opacity } = config;\n  const shadows: string[] = [];\n\n  for (let i = 1; i <= layers; i++) {\n    const offset = baseOffset * i;\n    const blur = baseBlur * i;\n    const layerOpacity = opacity * (1 - ((i - 1) / layers) * 0.3); // Fade each layer\n    shadows.push(\n      `0 ${offset}px ${blur}px ${hexToRgbaString(color, layerOpacity)}`,\n    );\n  }\n\n  return shadows.join(\", \");\n}\n\n/**\n * Get cyberpunk gradient background\n *\n * Creates Korean-themed gradient with cyberpunk colors.\n * Supports both linear and radial gradients.\n *\n * @param primaryColor - Primary hex color\n * @param secondaryColor - Secondary hex color\n * @param angle - Gradient angle in degrees (default: 135)\n * @param type - Gradient type ('linear' | 'radial')\n * @returns CSS gradient string\n *\n * @example\n * ```typescript\n * const gradient = getCyberpunkGradient(\n *   KOREAN_COLORS.PRIMARY_CYAN,\n *   KOREAN_COLORS.UI_BACKGROUND_DARK,\n *   135,\n *   'linear'\n * );\n * ```\n *\n * @korean 사이버펑크그라디언트얻기\n */\nexport function getCyberpunkGradient(\n  primaryColor: number,\n  secondaryColor: number,\n  angle: number = 135,\n  type: \"linear\" | \"radial\" = \"linear\",\n): string {\n  const color1 = hexToRgbaString(primaryColor, 0.2);\n  const color2 = hexToRgbaString(secondaryColor, 0.9);\n\n  if (type === \"radial\") {\n    return `radial-gradient(circle at top left, ${color1} 0%, ${color2} 100%)`;\n  }\n\n  return `linear-gradient(${angle}deg, ${color1} 0%, ${color2} 100%)`;\n}\n\n/**\n * Get smooth transition CSS\n *\n * Returns standardized transition string for consistent animations.\n * All transitions target 60fps performance.\n *\n * @param properties - CSS properties to transition (default: 'all')\n * @param timing - Timing preset\n * @returns CSS transition string\n *\n * @example\n * ```typescript\n * const transition = getSmoothTransition('all', 'normal');\n * // Returns: \"all 0.2s ease-in-out\"\n * ```\n *\n * @korean 부드러운전환얻기\n */\nexport function getSmoothTransition(\n  properties: string = \"all\",\n  timing: TransitionTiming = \"normal\",\n): string {\n  const timingConfig = {\n    fast: { duration: \"0.15s\", easing: \"ease-out\" },\n    normal: { duration: \"0.2s\", easing: \"ease-in-out\" },\n    slow: { duration: \"0.3s\", easing: \"ease-in-out\" },\n    smooth: { duration: \"0.25s\", easing: \"cubic-bezier(0.4, 0, 0.2, 1)\" },\n  };\n\n  const config = timingConfig[timing];\n  return `${properties} ${config.duration} ${config.easing}`;\n}\n\n/**\n * Get Korean font optimization styles\n *\n * Applies optimal font rendering for Korean characters (Hangul).\n * Includes anti-aliasing, subpixel rendering, and letter spacing.\n *\n * @param fontSize - Font size in pixels\n * @param fontWeight - Font weight (default: 'normal')\n * @returns React.CSSProperties with Korean font optimization\n *\n * @example\n * ```typescript\n * const fontStyle = getKoreanFontOptimization(16, 'bold');\n * // Returns: { fontSize: '16px', WebkitFontSmoothing: 'antialiased', ... }\n * ```\n *\n * @korean 한글폰트최적화얻기\n */\nexport function getKoreanFontOptimization(\n  fontSize: number,\n  fontWeight: \"normal\" | \"bold\" = \"normal\",\n): React.CSSProperties & {\n  WebkitFontSmoothing?: string;\n  MozOsxFontSmoothing?: string;\n} {\n  return {\n    fontSize: `${fontSize}px`,\n    fontWeight,\n    WebkitFontSmoothing: \"antialiased\",\n    MozOsxFontSmoothing: \"grayscale\",\n    textRendering: \"optimizeLegibility\",\n    letterSpacing: \"0.02em\",\n    // Korean characters need slightly more line height\n    lineHeight: 1.5,\n  };\n}\n\n/**\n * Map numeric glow intensity to GlowIntensity type\n *\n * Helper to standardize glow intensity mapping across components.\n * Converts numeric intensity values to discrete levels.\n *\n * @param glowIntensity - Numeric glow intensity (0-2+ scale)\n * @returns GlowIntensity level (\"subtle\", \"medium\", \"strong\", \"intense\")\n *\n * Mapping thresholds:\n * - intense: >= 1.5\n * - strong: >= 1.0\n * - medium: >= 0.6\n * - subtle: < 0.6\n *\n * @example\n * ```typescript\n * const level = mapGlowIntensityLevel(0.8);\n * // Returns: \"medium\"\n * mapGlowIntensityLevel(2.0);\n * // Returns: \"intense\"\n * ```\n *\n * @korean 광도레벨매핑\n */\nexport function mapGlowIntensityLevel(glowIntensity: number): GlowIntensity {\n  if (glowIntensity >= 1.5) return \"intense\";\n  if (glowIntensity >= 1.0) return \"strong\";\n  if (glowIntensity >= 0.6) return \"medium\";\n  return \"subtle\";\n}\n\n/**\n * Get hover state styles with glow effect\n *\n * Generates hover state styles with Korean cyberpunk animations.\n * Includes glow intensification, scale, and lift effects.\n *\n * @param baseColor - Base hex color\n * @param animation - Animation type\n * @param intensity - Glow intensity for hover state\n * @returns React.CSSProperties for hover state\n *\n * @example\n * ```typescript\n * const hoverStyle = getHoverStateStyles(\n *   KOREAN_COLORS.PRIMARY_CYAN,\n *   'combined',\n *   'strong'\n * );\n * ```\n *\n * @korean 호버상태스타일얻기\n */\nexport function getHoverStateStyles(\n  baseColor: number,\n  animation: HoverAnimationType = \"combined\",\n  intensity: GlowIntensity = \"strong\",\n): React.CSSProperties {\n  const baseStyles: React.CSSProperties = {\n    transition: getSmoothTransition(\"all\", \"normal\"),\n    cursor: \"pointer\",\n  };\n\n  const glowStyles: React.CSSProperties = {\n    boxShadow: getNeonGlowEffect(baseColor, intensity, true),\n  };\n\n  const scaleStyles: React.CSSProperties = {\n    transform: \"scale(1.05)\",\n  };\n\n  const liftStyles: React.CSSProperties = {\n    transform: \"translateY(-2px)\",\n    boxShadow: getLayeredDepthEffect({\n      layers: 3,\n      baseOffset: 4,\n      baseBlur: 8,\n      color: KOREAN_COLORS.BLACK_SOLID,\n      opacity: 0.6,\n    }),\n  };\n\n  const pulseStyles: React.CSSProperties = {\n    animation: \"pulse 1.5s ease-in-out infinite\",\n  };\n\n  switch (animation) {\n    case \"glow\":\n      return { ...baseStyles, ...glowStyles };\n    case \"scale\":\n      return { ...baseStyles, ...scaleStyles };\n    case \"lift\":\n      return { ...baseStyles, ...liftStyles };\n    case \"pulse\":\n      return { ...baseStyles, ...pulseStyles };\n    case \"combined\":\n      return {\n        ...baseStyles,\n        ...glowStyles,\n        transform: \"scale(1.02) translateY(-1px)\",\n      };\n    default:\n      return baseStyles;\n  }\n}\n\n/**\n * Get focus state styles with accessibility\n *\n * Creates WCAG-compliant focus indicators with Korean cyberpunk styling.\n * Ensures 2px border with high contrast (4.5:1 minimum).\n *\n * Note: While outline is set to \"none\", the custom 2px border provides\n * equivalent accessibility. For users relying on high-contrast mode or\n * custom browser settings, consider using outline-offset as an additional\n * fallback or ensure the custom border has sufficient contrast (4.5:1+).\n *\n * @param color - Hex color for focus indicator\n * @param includeGlow - Whether to include glow effect (default: true)\n * @returns React.CSSProperties for focus state\n *\n * @example\n * ```typescript\n * const focusStyle = getFocusStateStyles(KOREAN_COLORS.ACCENT_GOLD, true);\n * ```\n *\n * @korean 포커스상태스타일얻기\n */\nexport function getFocusStateStyles(\n  color: number,\n  includeGlow: boolean = true,\n): React.CSSProperties {\n  const baseStyles: React.CSSProperties = {\n    outline: \"none\",\n    border: `2px solid ${hexToRgbaString(color, 1.0)}`,\n  };\n\n  if (includeGlow) {\n    return {\n      ...baseStyles,\n      boxShadow: getNeonGlowEffect(color, \"medium\", false),\n    };\n  }\n\n  return baseStyles;\n}\n\n/**\n * Get backdrop blur effect\n *\n * Creates frosted glass effect for Korean-themed overlays.\n * GPU-accelerated for 60fps performance.\n *\n * @param blurAmount - Blur amount in pixels (default: 10)\n * @param saturation - Color saturation multiplier (default: 1.5)\n * @returns React.CSSProperties with backdrop blur\n *\n * @example\n * ```typescript\n * const backdropStyle = getBackdropBlurEffect(12, 1.8);\n * ```\n *\n * @korean 배경블러효과얻기\n */\nexport function getBackdropBlurEffect(\n  blurAmount: number = 10,\n  saturation: number = 1.5,\n): React.CSSProperties & {\n  WebkitBackdropFilter?: string;\n} {\n  return {\n    backdropFilter: `blur(${blurAmount}px) saturate(${saturation})`,\n    WebkitBackdropFilter: `blur(${blurAmount}px) saturate(${saturation})`,\n    // Fallback for browsers without backdrop-filter support\n    backgroundColor: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.8),\n  };\n}\n\n/**\n * Get trigram symbol glow effect\n *\n * Creates glowing effect for Eight Trigram symbols (☰☱☲☳☴☵☶☷).\n * Uses stance-specific colors from KOREAN_COLORS.\n *\n * @param trigramColor - Trigram-specific hex color\n * @param isActive - Whether trigram is currently active\n * @returns React.CSSProperties with trigram glow\n *\n * @example\n * ```typescript\n * const trigramGlow = getTrigramSymbolGlow(\n *   KOREAN_COLORS.TRIGRAM_GEON_PRIMARY,\n *   true\n * );\n * ```\n *\n * @korean 팔괘상징글로우얻기\n */\nexport function getTrigramSymbolGlow(\n  trigramColor: number,\n  isActive: boolean,\n): React.CSSProperties {\n  const intensity = isActive ? \"intense\" : \"subtle\";\n  const scale = isActive ? 1.1 : 1.0;\n\n  return {\n    color: hexToRgbaString(trigramColor, 1.0),\n    textShadow: getNeonTextShadow(trigramColor, intensity),\n    transform: `scale(${scale})`,\n    transition: getSmoothTransition(\"all\", \"normal\"),\n    filter: isActive ? \"brightness(1.2)\" : \"brightness(1.0)\",\n  };\n}\n\n/**\n * Get GPU-accelerated animation hint\n *\n * Applies will-change CSS property to hint GPU acceleration.\n * Use sparingly - only for actively animating elements.\n *\n * @param properties - Properties that will animate\n * @returns React.CSSProperties with GPU hints\n *\n * @example\n * ```typescript\n * const gpuHint = getGPUAccelerationHint('transform, opacity');\n * ```\n *\n * @korean GPU가속힌트얻기\n */\nexport function getGPUAccelerationHint(\n  properties: string = \"transform\",\n): React.CSSProperties {\n  return {\n    willChange: properties,\n    transform: \"translateZ(0)\", // Force GPU layer\n  };\n}\n\n/**\n * Combine multiple shadow effects\n *\n * Merges multiple box-shadow strings into a single CSS value.\n * Useful for combining glow, depth, and custom shadows.\n *\n * @param shadows - Array of box-shadow strings\n * @returns Combined box-shadow CSS string\n *\n * @example\n * ```typescript\n * const combined = combineShadowEffects([\n *   getNeonGlowEffect(KOREAN_COLORS.PRIMARY_CYAN, 'medium'),\n *   getLayeredDepthEffect({ layers: 2, baseOffset: 2, baseBlur: 4, color: 0x000000, opacity: 0.5 })\n * ]);\n * ```\n *\n * @korean 그림자효과결합\n */\nexport function combineShadowEffects(shadows: string[]): string {\n  return shadows.filter(Boolean).join(\", \");\n}\n\n/**\n * Get pulsing animation keyframes\n *\n * Returns CSS keyframe animation for pulsing glow effect.\n * Should be injected into global styles or style tag once.\n * Use unique animation names to avoid conflicts.\n *\n * @param animationName - Unique name for the animation (default: 'pulse')\n * @returns CSS keyframes string\n *\n * @example\n * ```typescript\n * const keyframes = getPulsingKeyframes('pulse-glow');\n * // Inject into global styles once:\n * const style = document.createElement('style');\n * style.innerHTML = keyframes;\n * document.head.appendChild(style);\n * ```\n *\n * @warning SSR and Duplicate Keyframes\n * When using this in Server-Side Rendering (SSR) environments or with multiple\n * component instances, ensure keyframe definitions are registered globally only once.\n * Consider using a global registry or checking for existing keyframe definitions\n * before injection to prevent duplicates and hydration mismatches. Example:\n * ```typescript\n * if (!document.querySelector(`style[data-keyframe=\"${animationName}\"]`)) {\n *   const style = document.createElement('style');\n *   style.setAttribute('data-keyframe', animationName);\n *   style.innerHTML = getPulsingKeyframes(animationName);\n *   document.head.appendChild(style);\n * }\n * ```\n *\n * @korean 펄스애니메이션키프레임얻기\n */\nexport function getPulsingKeyframes(animationName: string = \"pulse\"): string {\n  return `\n    @keyframes ${animationName} {\n      0%, 100% {\n        opacity: 1;\n        transform: scale(1);\n      }\n      50% {\n        opacity: 0.8;\n        transform: scale(1.05);\n      }\n    }\n  `;\n}\n"],"mappings":"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"}