blacktrigram 0.7.2

package/lib/components/shared/three/ui/ProgressBar.js

@@ -0,0 +1,173 @@
+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";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Html } from "@react-three/drei";
+//#region src/components/shared/three/ui/ProgressBar.tsx
+/**
+* ProgressBar - Three.js-compatible progress bar component
+* 
+* Displays health, ki, stamina with Korean theming
+* 
+* @module components/three
+*/
+/**
+* ProgressBar Component
+* 
+* A progress bar component for displaying health, ki, and stamina.
+* Uses Korean cyberpunk theming with gradient fills.
+* 
+* @example
+* ```tsx
+* <ProgressBar
+*   type="health"
+*   current={75}
+*   max={100}
+*   label={{ korean: "체력", english: "Health" }}
+* />
+* ```
+*/
+var ProgressBar = ({ type, current, max, label, position = [
+	0,
+	0,
+	0
+], width = 200, height = 24, showText = true, animated = true, testId }) => {
+	const percentage = useMemo(() => Math.max(0, Math.min(1, max > 0 ? current / max : 0)), [current, max]);
+	const colors = useMemo(() => {
+		switch (type) {
+			case "health": if (percentage > .6) return {
+				start: KOREAN_COLORS.HEALTH_FULL,
+				end: KOREAN_COLORS.HEALTH_MEDIUM,
+				glow: KOREAN_COLORS.POSITIVE_GREEN
+			};
+			else if (percentage > .3) return {
+				start: KOREAN_COLORS.HEALTH_MEDIUM,
+				end: KOREAN_COLORS.HEALTH_LOW,
+				glow: KOREAN_COLORS.WARNING_ORANGE
+			};
+			else return {
+				start: KOREAN_COLORS.HEALTH_LOW,
+				end: KOREAN_COLORS.HEALTH_CRITICAL,
+				glow: KOREAN_COLORS.ACCENT_RED
+			};
+			case "ki": return {
+				start: KOREAN_COLORS.KI_FULL,
+				end: KOREAN_COLORS.KI_MEDIUM,
+				glow: KOREAN_COLORS.PRIMARY_CYAN
+			};
+			case "stamina": return {
+				start: KOREAN_COLORS.STAMINA_FULL,
+				end: KOREAN_COLORS.STAMINA_MEDIUM,
+				glow: KOREAN_COLORS.SECONDARY_YELLOW
+			};
+			default: return {
+				start: KOREAN_COLORS.PRIMARY_CYAN,
+				end: KOREAN_COLORS.ACCENT_BLUE,
+				glow: KOREAN_COLORS.PRIMARY_CYAN
+			};
+		}
+	}, [type, percentage]);
+	const containerStyle = useMemo(() => ({
+		width: `${width}px`,
+		display: "flex",
+		flexDirection: "column",
+		gap: "4px"
+	}), [width]);
+	const labelStyle = useMemo(() => ({
+		fontFamily: FONT_FAMILY.KOREAN,
+		fontSize: "12px",
+		fontWeight: "bold",
+		color: hexToRgbaString(KOREAN_COLORS.TEXT_PRIMARY),
+		textShadow: `0 2px 4px ${hexToRgbaString(KOREAN_COLORS.BLACK_SOLID, .5)}`,
+		display: "flex",
+		justifyContent: "space-between",
+		alignItems: "center"
+	}), []);
+	const barContainerStyle = useMemo(() => ({
+		width: "100%",
+		height: `${height}px`,
+		background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, .8),
+		border: `2px solid ${hexToRgbaString(KOREAN_COLORS.UI_BORDER, .6)}`,
+		borderRadius: "4px",
+		overflow: "hidden",
+		position: "relative"
+	}), [height]);
+	const fillStyle = useMemo(() => {
+		return {
+			width: `${percentage * 100}%`,
+			height: "100%",
+			background: `linear-gradient(to right, ${hexToRgbaString(colors.start)}, ${hexToRgbaString(colors.end)})`,
+			transition: animated ? "width 0.3s ease" : "none",
+			position: "relative",
+			boxShadow: animated ? `0 0 10px ${hexToRgbaString(colors.glow, .5)}` : "none"
+		};
+	}, [
+		percentage,
+		colors,
+		animated
+	]);
+	const shineStyle = useMemo(() => ({
+		position: "absolute",
+		top: "0",
+		left: "0",
+		width: "60%",
+		height: "40%",
+		background: hexToRgbaString(KOREAN_COLORS.WHITE_SOLID, .3),
+		borderRadius: "4px",
+		margin: "2px"
+	}), []);
+	const textStyle = useMemo(() => ({
+		position: "absolute",
+		top: "50%",
+		left: "50%",
+		transform: "translate(-50%, -50%)",
+		fontFamily: FONT_FAMILY.KOREAN,
+		fontSize: "11px",
+		fontWeight: "bold",
+		color: hexToRgbaString(KOREAN_COLORS.TEXT_PRIMARY),
+		textShadow: `
+        0 1px 2px ${hexToRgbaString(KOREAN_COLORS.BLACK_SOLID, .8)},
+        0 0 4px ${hexToRgbaString(KOREAN_COLORS.BLACK_SOLID, .6)}
+      `,
+		whiteSpace: "nowrap"
+	}), []);
+	return /* @__PURE__ */ jsx(Html, {
+		position,
+		center: true,
+		children: /* @__PURE__ */ jsxs("div", {
+			style: containerStyle,
+			"data-testid": testId ?? `progress-bar-${type}`,
+			"data-current": current,
+			"data-max": max,
+			"data-percentage": Math.round(percentage * 100),
+			children: [label && showText && /* @__PURE__ */ jsxs("div", {
+				style: labelStyle,
+				children: [/* @__PURE__ */ jsxs("span", { children: [
+					label.korean,
+					" | ",
+					label.english
+				] }), /* @__PURE__ */ jsxs("span", { children: [
+					Math.ceil(current),
+					" / ",
+					max
+				] })]
+			}), /* @__PURE__ */ jsxs("div", {
+				style: barContainerStyle,
+				children: [/* @__PURE__ */ jsx("div", {
+					style: fillStyle,
+					children: /* @__PURE__ */ jsx("div", { style: shineStyle })
+				}), showText && /* @__PURE__ */ jsxs("div", {
+					style: textStyle,
+					children: [Math.round(percentage * 100), "%"]
+				})]
+			})]
+		})
+	});
+};
+ProgressBar.displayName = "ProgressBar";
+//#endregion
+export { ProgressBar };
+
+//# sourceMappingURL=ProgressBar.js.map

package/lib/components/shared/three/ui/ProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.js","names":[],"sources":["../../../../../src/components/shared/three/ui/ProgressBar.tsx"],"sourcesContent":["/**\n * ProgressBar - Three.js-compatible progress bar component\n * \n * Displays health, ki, stamina with Korean theming\n * \n * @module components/three\n */\n\nimport { Html } from \"@react-three/drei\";\nimport React, { useMemo } from \"react\";\nimport { KOREAN_COLORS, FONT_FAMILY } from \"../../../../types/constants\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\n\n/**\n * Progress bar type\n */\nexport type ProgressBarType = \"health\" | \"ki\" | \"stamina\";\n\n/**\n * Props for ProgressBar component\n */\nexport interface ProgressBarProps {\n  readonly type: ProgressBarType;\n  readonly current: number;\n  readonly max: number;\n  readonly label?: { korean: string; english: string };\n  readonly position?: [number, number, number];\n  readonly width?: number;\n  readonly height?: number;\n  readonly showText?: boolean;\n  readonly animated?: boolean;\n  readonly testId?: string;\n}\n\n/**\n * ProgressBar Component\n * \n * A progress bar component for displaying health, ki, and stamina.\n * Uses Korean cyberpunk theming with gradient fills.\n * \n * @example\n * ```tsx\n * <ProgressBar\n *   type=\"health\"\n *   current={75}\n *   max={100}\n *   label={{ korean: \"체력\", english: \"Health\" }}\n * />\n * ```\n */\nexport const ProgressBar: React.FC<ProgressBarProps> = ({\n  type,\n  current,\n  max,\n  label,\n  position = [0, 0, 0],\n  width = 200,\n  height = 24,\n  showText = true,\n  animated = true,\n  testId,\n}) => {\n  // Calculate percentage safely\n  const percentage = useMemo(\n    () => Math.max(0, Math.min(1, max > 0 ? current / max : 0)),\n    [current, max]\n  );\n\n  // Get colors based on type and percentage\n  const colors = useMemo(() => {\n    switch (type) {\n      case \"health\":\n        if (percentage > 0.6) {\n          return {\n            start: KOREAN_COLORS.HEALTH_FULL,\n            end: KOREAN_COLORS.HEALTH_MEDIUM,\n            glow: KOREAN_COLORS.POSITIVE_GREEN,\n          };\n        } else if (percentage > 0.3) {\n          return {\n            start: KOREAN_COLORS.HEALTH_MEDIUM,\n            end: KOREAN_COLORS.HEALTH_LOW,\n            glow: KOREAN_COLORS.WARNING_ORANGE,\n          };\n        } else {\n          return {\n            start: KOREAN_COLORS.HEALTH_LOW,\n            end: KOREAN_COLORS.HEALTH_CRITICAL,\n            glow: KOREAN_COLORS.ACCENT_RED,\n          };\n        }\n      case \"ki\":\n        return {\n          start: KOREAN_COLORS.KI_FULL,\n          end: KOREAN_COLORS.KI_MEDIUM,\n          glow: KOREAN_COLORS.PRIMARY_CYAN,\n        };\n      case \"stamina\":\n        return {\n          start: KOREAN_COLORS.STAMINA_FULL,\n          end: KOREAN_COLORS.STAMINA_MEDIUM,\n          glow: KOREAN_COLORS.SECONDARY_YELLOW,\n        };\n      default:\n        return {\n          start: KOREAN_COLORS.PRIMARY_CYAN,\n          end: KOREAN_COLORS.ACCENT_BLUE,\n          glow: KOREAN_COLORS.PRIMARY_CYAN,\n        };\n    }\n  }, [type, percentage]);\n\n  // Memoize container styles for performance\n  const containerStyle = useMemo<React.CSSProperties>(\n    () => ({\n      width: `${width}px`,\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"4px\",\n    }),\n    [width]\n  );\n\n  // Memoize label styles for performance\n  const labelStyle = useMemo<React.CSSProperties>(\n    () => ({\n      fontFamily: FONT_FAMILY.KOREAN,\n      fontSize: \"12px\",\n      fontWeight: \"bold\",\n      color: hexToRgbaString(KOREAN_COLORS.TEXT_PRIMARY),\n      textShadow: `0 2px 4px ${hexToRgbaString(KOREAN_COLORS.BLACK_SOLID, 0.5)}`,\n      display: \"flex\",\n      justifyContent: \"space-between\",\n      alignItems: \"center\",\n    }),\n    []\n  );\n\n  // Memoize bar container styles for performance\n  const barContainerStyle = useMemo<React.CSSProperties>(\n    () => ({\n      width: \"100%\",\n      height: `${height}px`,\n      background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.8),\n      border: `2px solid ${hexToRgbaString(KOREAN_COLORS.UI_BORDER, 0.6)}`,\n      borderRadius: \"4px\",\n      overflow: \"hidden\",\n      position: \"relative\",\n    }),\n    [height]\n  );\n\n  // Memoize fill styles for performance\n  const fillStyle = useMemo<React.CSSProperties>(() => {\n    return {\n      width: `${percentage * 100}%`,\n      height: \"100%\",\n      background: `linear-gradient(to right, ${hexToRgbaString(colors.start)}, ${hexToRgbaString(colors.end)})`,\n      transition: animated ? \"width 0.3s ease\" : \"none\",\n      position: \"relative\",\n      boxShadow: animated\n        ? `0 0 10px ${hexToRgbaString(colors.glow, 0.5)}`\n        : \"none\",\n    };\n  }, [percentage, colors, animated]);\n\n  // Memoize shine effect styles for performance\n  const shineStyle = useMemo<React.CSSProperties>(\n    () => ({\n      position: \"absolute\",\n      top: \"0\",\n      left: \"0\",\n      width: \"60%\",\n      height: \"40%\",\n      background: hexToRgbaString(KOREAN_COLORS.WHITE_SOLID, 0.3),\n      borderRadius: \"4px\",\n      margin: \"2px\",\n    }),\n    []\n  );\n\n  // Memoize text styles for performance\n  const textStyle = useMemo<React.CSSProperties>(\n    () => ({\n      position: \"absolute\",\n      top: \"50%\",\n      left: \"50%\",\n      transform: \"translate(-50%, -50%)\",\n      fontFamily: FONT_FAMILY.KOREAN,\n      fontSize: \"11px\",\n      fontWeight: \"bold\",\n      color: hexToRgbaString(KOREAN_COLORS.TEXT_PRIMARY),\n      textShadow: `\n        0 1px 2px ${hexToRgbaString(KOREAN_COLORS.BLACK_SOLID, 0.8)},\n        0 0 4px ${hexToRgbaString(KOREAN_COLORS.BLACK_SOLID, 0.6)}\n      `,\n      whiteSpace: \"nowrap\",\n    }),\n    []\n  );\n\n  return (\n    <Html position={position} center>\n      <div \n        style={containerStyle} \n        data-testid={testId ?? `progress-bar-${type}`}\n        data-current={current}\n        data-max={max}\n        data-percentage={Math.round(percentage * 100)}\n      >\n        {/* Label */}\n        {label && showText && (\n          <div style={labelStyle}>\n            <span>\n              {label.korean} | {label.english}\n            </span>\n            <span>\n              {Math.ceil(current)} / {max}\n            </span>\n          </div>\n        )}\n\n        {/* Bar Container */}\n        <div style={barContainerStyle}>\n          {/* Fill */}\n          <div style={fillStyle}>\n            {/* Shine effect */}\n            <div style={shineStyle} />\n          </div>\n\n          {/* Percentage Text Overlay */}\n          {showText && (\n            <div style={textStyle}>\n              {Math.round(percentage * 100)}%\n            </div>\n          )}\n        </div>\n      </div>\n    </Html>\n  );\n};\n\nProgressBar.displayName = \"ProgressBar\";\n"],"mappings":"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"}

package/lib/components/shared/three/ui/SpeedIndicatorHUD.d.ts

@@ -0,0 +1,62 @@
+/**
+ * SpeedIndicatorHUD Component - Visual indicator for player movement speed
+ *
+ * Displays a speed percentage indicator showing the current movement speed
+ * relative to base speed, taking into account stance modifiers, injuries,
+ * stamina, and combat state.
+ *
+ * @module components/shared/three/ui/SpeedIndicatorHUD
+ * @category Shared UI
+ * @korean 속도표시기
+ */
+import React from "react";
+import "./HUDAnimations.css";
+export interface SpeedIndicatorHUDProps {
+    /**
+     * Final movement speed in m/s
+     * @korean 최종속도
+     */
+    readonly finalSpeed: number;
+    /**
+     * Base movement speed before modifiers in m/s
+     * @korean 기본속도
+     */
+    readonly baseSpeed: number;
+    /**
+     * Player position ('left' or 'right' side of screen)
+     * @korean 플레이어위치
+     */
+    readonly position: "left" | "right";
+    /**
+     * Mobile responsive mode (smaller text)
+     * @korean 모바일여부
+     */
+    readonly isMobile: boolean;
+    /**
+     * Whether to show the indicator (optional, default: true)
+     * @korean 표시여부
+     */
+    readonly visible?: boolean;
+}
+/**
+ * SpeedIndicatorHUD - Movement speed percentage indicator
+ *
+ * Displays current movement speed as a percentage of base speed
+ * with color coding and bilingual labels. Updates dynamically as
+ * speed modifiers change from stance, injury, stamina, and combat state.
+ *
+ * @example
+ * ```tsx
+ * <SpeedIndicatorHUD
+ *   finalSpeed={1.8}
+ *   baseSpeed={2.0}
+ *   position="left"
+ *   isMobile={false}
+ * />
+ * ```
+ *
+ * @public
+ * @korean 속도표시기
+ */
+export declare const SpeedIndicatorHUD: React.FC<SpeedIndicatorHUDProps>;
+//# sourceMappingURL=SpeedIndicatorHUD.d.ts.map

package/lib/components/shared/three/ui/SpeedIndicatorHUD.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpeedIndicatorHUD.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/three/ui/SpeedIndicatorHUD.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,qBAAqB,CAAC;AAE7B,MAAM,WAAW,sBAAsB;IACrC;;;OAGG;IACH,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAE5B;;;OAGG;IACH,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAE3B;;;OAGG;IACH,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC;IAEpC;;;OAGG;IACH,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAE3B;;;OAGG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;CAC5B;AAqDD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAkH9D,CAAC"}

package/lib/components/shared/three/ui/SpeedIndicatorHUD.js

@@ -0,0 +1,185 @@
+import { KOREAN_COLORS } from "../../../../types/constants/colors.js";
+import { FONT_FAMILY } from "../../../../types/constants/typography.js";
+import "../../../../types/constants/index.js";
+/* empty css              */
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/shared/three/ui/SpeedIndicatorHUD.tsx
+/**
+* SpeedIndicatorHUD Component - Visual indicator for player movement speed
+*
+* Displays a speed percentage indicator showing the current movement speed
+* relative to base speed, taking into account stance modifiers, injuries,
+* stamina, and combat state.
+*
+* @module components/shared/three/ui/SpeedIndicatorHUD
+* @category Shared UI
+* @korean 속도표시기
+*/
+/**
+* Get color for speed percentage
+*
+* **Korean**: 속도 색상 (Speed Color)
+*
+* Color coding:
+* - Green: 100%+ (boosted speed)
+* - Cyan: 80-99% (good speed)
+* - Yellow: 50-79% (reduced speed)
+* - Orange: 25-49% (heavily reduced)
+* - Red: <25% (critical reduction)
+*/
+function getSpeedColor(speedPercent) {
+	let colorValue;
+	if (speedPercent >= 100) colorValue = KOREAN_COLORS.POSITIVE_GREEN;
+	else if (speedPercent >= 80) colorValue = KOREAN_COLORS.PRIMARY_CYAN;
+	else if (speedPercent >= 50) colorValue = KOREAN_COLORS.WARNING_YELLOW;
+	else if (speedPercent >= 25) colorValue = KOREAN_COLORS.WARNING_ORANGE;
+	else colorValue = KOREAN_COLORS.ACCENT_RED;
+	return `#${colorValue.toString(16).padStart(6, "0")}`;
+}
+/**
+* Get Korean label for speed range
+*/
+function getSpeedLabel(speedPercent) {
+	if (speedPercent >= 100) return {
+		korean: "가속",
+		english: "BOOSTED"
+	};
+	else if (speedPercent >= 80) return {
+		korean: "양호",
+		english: "GOOD"
+	};
+	else if (speedPercent >= 50) return {
+		korean: "감소",
+		english: "REDUCED"
+	};
+	else if (speedPercent >= 25) return {
+		korean: "저하",
+		english: "SLOWED"
+	};
+	else return {
+		korean: "위급",
+		english: "CRITICAL"
+	};
+}
+/**
+* SpeedIndicatorHUD - Movement speed percentage indicator
+*
+* Displays current movement speed as a percentage of base speed
+* with color coding and bilingual labels. Updates dynamically as
+* speed modifiers change from stance, injury, stamina, and combat state.
+*
+* @example
+* ```tsx
+* <SpeedIndicatorHUD
+*   finalSpeed={1.8}
+*   baseSpeed={2.0}
+*   position="left"
+*   isMobile={false}
+* />
+* ```
+*
+* @public
+* @korean 속도표시기
+*/
+var SpeedIndicatorHUD = ({ finalSpeed, baseSpeed, position, isMobile, visible = true }) => {
+	const speedData = useMemo(() => {
+		const speedPercent = baseSpeed > 0 ? finalSpeed / baseSpeed * 100 : 100;
+		const color = getSpeedColor(speedPercent);
+		const label = getSpeedLabel(speedPercent);
+		return {
+			speedPercent: Math.round(speedPercent),
+			color,
+			label
+		};
+	}, [finalSpeed, baseSpeed]);
+	const containerStyle = useMemo(() => {
+		const shouldGlow = speedData.speedPercent >= 100;
+		return {
+			position: "relative",
+			display: visible ? "flex" : "none",
+			flexDirection: "column",
+			alignItems: "center",
+			gap: isMobile ? "4px" : "6px",
+			width: "100%",
+			padding: isMobile ? "8px 12px" : "10px 16px",
+			backgroundColor: `rgba(0, 0, 0, 0.7)`,
+			border: `2px solid ${speedData.color}`,
+			borderRadius: "6px",
+			boxShadow: shouldGlow ? `0 0 15px ${speedData.color}, 0 0 25px ${speedData.color}40` : `0 0 10px ${speedData.color}`,
+			pointerEvents: "none",
+			transition: "all 0.3s ease-out",
+			animation: shouldGlow ? "speedGlow 1.5s ease-in-out infinite" : "none"
+		};
+	}, [
+		isMobile,
+		visible,
+		speedData.color,
+		speedData.speedPercent
+	]);
+	const percentStyle = useMemo(() => ({
+		fontFamily: FONT_FAMILY.KOREAN,
+		fontSize: isMobile ? "18px" : "22px",
+		fontWeight: "bold",
+		color: speedData.color,
+		textShadow: `0 0 8px ${speedData.color}`,
+		lineHeight: 1,
+		margin: 0
+	}), [isMobile, speedData.color]);
+	const labelStyle = useMemo(() => ({
+		fontFamily: FONT_FAMILY.KOREAN,
+		fontSize: isMobile ? "10px" : "12px",
+		fontWeight: "normal",
+		color: speedData.color,
+		opacity: .9,
+		letterSpacing: "0.5px",
+		lineHeight: 1,
+		margin: 0
+	}), [isMobile, speedData.color]);
+	const koreanLabelStyle = useMemo(() => ({
+		fontFamily: FONT_FAMILY.KOREAN,
+		fontSize: isMobile ? "11px" : "13px",
+		fontWeight: "600",
+		color: speedData.color,
+		opacity: .95,
+		letterSpacing: "0.5px",
+		lineHeight: 1,
+		margin: 0
+	}), [isMobile, speedData.color]);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": `speed-indicator-${position}`,
+		className: "hud-animated",
+		style: containerStyle,
+		"aria-label": `${speedData.label.korean} | ${speedData.label.english}: ${speedData.speedPercent}%`,
+		role: "status",
+		"aria-live": "polite",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				style: percentStyle,
+				children: [speedData.speedPercent, "%"]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				style: koreanLabelStyle,
+				children: speedData.label.korean
+			}),
+			/* @__PURE__ */ jsx("div", {
+				style: labelStyle,
+				children: speedData.label.english
+			}),
+			/* @__PURE__ */ jsx("div", {
+				style: {
+					...labelStyle,
+					fontSize: isMobile ? "9px" : "10px",
+					opacity: .7,
+					marginTop: isMobile ? "2px" : "3px"
+				},
+				children: "속도변경 | Speed"
+			})
+		]
+	});
+};
+SpeedIndicatorHUD.displayName = "SpeedIndicatorHUD";
+//#endregion
+export { SpeedIndicatorHUD };
+
+//# sourceMappingURL=SpeedIndicatorHUD.js.map

package/lib/components/shared/three/ui/SpeedIndicatorHUD.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpeedIndicatorHUD.js","names":[],"sources":["../../../../../src/components/shared/three/ui/SpeedIndicatorHUD.tsx"],"sourcesContent":["/**\n * SpeedIndicatorHUD Component - Visual indicator for player movement speed\n *\n * Displays a speed percentage indicator showing the current movement speed\n * relative to base speed, taking into account stance modifiers, injuries,\n * stamina, and combat state.\n *\n * @module components/shared/three/ui/SpeedIndicatorHUD\n * @category Shared UI\n * @korean 속도표시기\n */\n\nimport React, { useMemo } from \"react\";\nimport { FONT_FAMILY, KOREAN_COLORS } from \"../../../../types/constants\";\nimport \"./HUDAnimations.css\";\n\nexport interface SpeedIndicatorHUDProps {\n  /**\n   * Final movement speed in m/s\n   * @korean 최종속도\n   */\n  readonly finalSpeed: number;\n\n  /**\n   * Base movement speed before modifiers in m/s\n   * @korean 기본속도\n   */\n  readonly baseSpeed: number;\n\n  /**\n   * Player position ('left' or 'right' side of screen)\n   * @korean 플레이어위치\n   */\n  readonly position: \"left\" | \"right\";\n\n  /**\n   * Mobile responsive mode (smaller text)\n   * @korean 모바일여부\n   */\n  readonly isMobile: boolean;\n\n  /**\n   * Whether to show the indicator (optional, default: true)\n   * @korean 표시여부\n   */\n  readonly visible?: boolean;\n}\n\n/**\n * Get color for speed percentage\n *\n * **Korean**: 속도 색상 (Speed Color)\n *\n * Color coding:\n * - Green: 100%+ (boosted speed)\n * - Cyan: 80-99% (good speed)\n * - Yellow: 50-79% (reduced speed)\n * - Orange: 25-49% (heavily reduced)\n * - Red: <25% (critical reduction)\n */\nfunction getSpeedColor(speedPercent: number): string {\n  let colorValue: number;\n\n  if (speedPercent >= 100) {\n    colorValue = KOREAN_COLORS.POSITIVE_GREEN;\n  } else if (speedPercent >= 80) {\n    colorValue = KOREAN_COLORS.PRIMARY_CYAN;\n  } else if (speedPercent >= 50) {\n    colorValue = KOREAN_COLORS.WARNING_YELLOW;\n  } else if (speedPercent >= 25) {\n    colorValue = KOREAN_COLORS.WARNING_ORANGE;\n  } else {\n    colorValue = KOREAN_COLORS.ACCENT_RED;\n  }\n\n  // Convert number to properly formatted hex string with # prefix\n  return `#${colorValue.toString(16).padStart(6, \"0\")}`;\n}\n\n/**\n * Get Korean label for speed range\n */\nfunction getSpeedLabel(speedPercent: number): {\n  korean: string;\n  english: string;\n} {\n  if (speedPercent >= 100) {\n    return { korean: \"가속\", english: \"BOOSTED\" };\n  } else if (speedPercent >= 80) {\n    return { korean: \"양호\", english: \"GOOD\" };\n  } else if (speedPercent >= 50) {\n    return { korean: \"감소\", english: \"REDUCED\" };\n  } else if (speedPercent >= 25) {\n    return { korean: \"저하\", english: \"SLOWED\" };\n  } else {\n    return { korean: \"위급\", english: \"CRITICAL\" };\n  }\n}\n\n/**\n * SpeedIndicatorHUD - Movement speed percentage indicator\n *\n * Displays current movement speed as a percentage of base speed\n * with color coding and bilingual labels. Updates dynamically as\n * speed modifiers change from stance, injury, stamina, and combat state.\n *\n * @example\n * ```tsx\n * <SpeedIndicatorHUD\n *   finalSpeed={1.8}\n *   baseSpeed={2.0}\n *   position=\"left\"\n *   isMobile={false}\n * />\n * ```\n *\n * @public\n * @korean 속도표시기\n */\nexport const SpeedIndicatorHUD: React.FC<SpeedIndicatorHUDProps> = ({\n  finalSpeed,\n  baseSpeed,\n  position,\n  isMobile,\n  visible = true,\n}) => {\n  const speedData = useMemo(() => {\n    // Calculate speed as percentage of base\n    const speedPercent = baseSpeed > 0 ? (finalSpeed / baseSpeed) * 100 : 100;\n    const color = getSpeedColor(speedPercent);\n    const label = getSpeedLabel(speedPercent);\n\n    return {\n      speedPercent: Math.round(speedPercent),\n      color,\n      label,\n    };\n  }, [finalSpeed, baseSpeed]);\n\n  const containerStyle = useMemo(() => {\n    const shouldGlow = speedData.speedPercent >= 100;\n    return {\n      position: \"relative\" as const,\n      display: visible ? \"flex\" : \"none\",\n      flexDirection: \"column\" as const,\n      alignItems: \"center\" as const,\n      gap: isMobile ? \"4px\" : \"6px\",\n      width: \"100%\",\n      padding: isMobile ? \"8px 12px\" : \"10px 16px\",\n      backgroundColor: `rgba(0, 0, 0, 0.7)`,\n      border: `2px solid ${speedData.color}`,\n      borderRadius: \"6px\",\n      boxShadow: shouldGlow \n        ? `0 0 15px ${speedData.color}, 0 0 25px ${speedData.color}40`\n        : `0 0 10px ${speedData.color}`,\n      pointerEvents: \"none\" as const,\n      transition: \"all 0.3s ease-out\",\n      animation: shouldGlow ? \"speedGlow 1.5s ease-in-out infinite\" : \"none\",\n    };\n  }, [isMobile, visible, speedData.color, speedData.speedPercent]);\n\n  const percentStyle = useMemo(\n    () => ({\n      fontFamily: FONT_FAMILY.KOREAN,\n      fontSize: isMobile ? \"18px\" : \"22px\",\n      fontWeight: \"bold\" as const,\n      color: speedData.color,\n      textShadow: `0 0 8px ${speedData.color}`,\n      lineHeight: 1,\n      margin: 0,\n    }),\n    [isMobile, speedData.color],\n  );\n\n  const labelStyle = useMemo(\n    () => ({\n      fontFamily: FONT_FAMILY.KOREAN,\n      fontSize: isMobile ? \"10px\" : \"12px\",\n      fontWeight: \"normal\" as const,\n      color: speedData.color,\n      opacity: 0.9,\n      letterSpacing: \"0.5px\",\n      lineHeight: 1,\n      margin: 0,\n    }),\n    [isMobile, speedData.color],\n  );\n\n  const koreanLabelStyle = useMemo(\n    () => ({\n      fontFamily: FONT_FAMILY.KOREAN,\n      fontSize: isMobile ? \"11px\" : \"13px\",\n      fontWeight: \"600\" as const,\n      color: speedData.color,\n      opacity: 0.95,\n      letterSpacing: \"0.5px\",\n      lineHeight: 1,\n      margin: 0,\n    }),\n    [isMobile, speedData.color],\n  );\n\n  return (\n    <div\n      data-testid={`speed-indicator-${position}`}\n      className=\"hud-animated\"\n      style={containerStyle}\n      aria-label={`${speedData.label.korean} | ${speedData.label.english}: ${speedData.speedPercent}%`}\n      role=\"status\"\n      aria-live=\"polite\"\n    >\n      {/* Speed percentage */}\n      <div style={percentStyle}>{speedData.speedPercent}%</div>\n\n      {/* Korean label */}\n      <div style={koreanLabelStyle}>{speedData.label.korean}</div>\n\n      {/* English label */}\n      <div style={labelStyle}>{speedData.label.english}</div>\n\n      {/* Speed unit label */}\n      <div\n        style={{\n          ...labelStyle,\n          fontSize: isMobile ? \"9px\" : \"10px\",\n          opacity: 0.7,\n          marginTop: isMobile ? \"2px\" : \"3px\",\n        }}\n      >\n        속도변경 | Speed\n      </div>\n    </div>\n  );\n};\n\nSpeedIndicatorHUD.displayName = \"SpeedIndicatorHUD\";\n"],"mappings":"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"}

package/lib/components/shared/three/ui/StaminaBar.d.ts

@@ -0,0 +1,37 @@
+/**
+ * StaminaBar Component - Segmented stamina display with Korean theming
+ *
+ * Displays player stamina with:
+ * - 5 segmented bars
+ * - Consistent cyan/blue theming
+ * - Pulse animation when stamina <20%
+ * - Korean/English bilingual labels
+ * - Numeric value display (e.g., "45/50")
+ * - Responsive sizing for mobile/tablet/desktop
+ * - Smooth transitions and glow effects
+ *
+ * Performance: Uses React.memo with shallow comparison for 60fps optimization.
+ * Note: React.memo uses shallow comparison by default, which works correctly
+ * for this component since all props are primitives (number, string, boolean).
+ * If object or function props are added in the future, consider adding a
+ * custom comparison function or using useCallback/useMemo for prop stability.
+ */
+import React from "react";
+import "./HUDAnimations.css";
+export interface StaminaBarProps {
+    /** Current stamina value */
+    readonly current: number;
+    /** Maximum stamina capacity */
+    readonly max: number;
+    /** Player identifier for test ID */
+    readonly playerId: string;
+    /** Whether to use mobile-optimized sizing */
+    readonly isMobile: boolean;
+}
+/**
+ * StaminaBar - Segmented stamina display with Korean theming
+ * Performance optimized with React.memo
+ */
+export declare const StaminaBar: React.FC<StaminaBarProps>;
+export default StaminaBar;
+//# sourceMappingURL=StaminaBar.d.ts.map

package/lib/components/shared/three/ui/StaminaBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StaminaBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/three/ui/StaminaBar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,OAAO,qBAAqB,CAAC;AAE7B,MAAM,WAAW,eAAe;IAC9B,4BAA4B;IAC5B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,+BAA+B;IAC/B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,oCAAoC;IACpC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,6CAA6C;IAC7C,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;CAC5B;AAED;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA8F/C,CAAC;AAIH,eAAe,UAAU,CAAC"}

package/lib/components/shared/three/ui/StaminaBar.js

@@ -0,0 +1,103 @@
+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";
+/* empty css              */
+import React, { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/shared/three/ui/StaminaBar.tsx
+/**
+* StaminaBar Component - Segmented stamina display with Korean theming
+* 
+* Displays player stamina with:
+* - 5 segmented bars
+* - Consistent cyan/blue theming
+* - Pulse animation when stamina <20%
+* - Korean/English bilingual labels
+* - Numeric value display (e.g., "45/50")
+* - Responsive sizing for mobile/tablet/desktop
+* - Smooth transitions and glow effects
+* 
+* Performance: Uses React.memo with shallow comparison for 60fps optimization.
+* Note: React.memo uses shallow comparison by default, which works correctly
+* for this component since all props are primitives (number, string, boolean).
+* If object or function props are added in the future, consider adding a
+* custom comparison function or using useCallback/useMemo for prop stability.
+*/
+/**
+* StaminaBar - Segmented stamina display with Korean theming
+* Performance optimized with React.memo
+*/
+var StaminaBar = React.memo(({ current, max, playerId, isMobile }) => {
+	const staminaPercent = useMemo(() => Math.max(0, Math.min(100, current / max * 100)), [current, max]);
+	const segments = 5;
+	const filledSegments = Math.ceil(staminaPercent / 100 * segments);
+	const shouldPulse = staminaPercent < 20;
+	const layout = useMemo(() => ({
+		barWidth: isMobile ? 180 : 250,
+		barHeight: isMobile ? 10 : 12,
+		fontSize: isMobile ? 10 : 11,
+		padding: isMobile ? "6px 8px" : "8px 12px"
+	}), [isMobile]);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": `stamina-bar-${playerId}`,
+		role: "progressbar",
+		"aria-label": "기력 | Stamina",
+		"aria-valuenow": Math.ceil(current),
+		"aria-valuemin": 0,
+		"aria-valuemax": max,
+		"aria-valuetext": `${Math.ceil(current)} out of ${max}`,
+		className: "hud-animated",
+		style: {
+			width: `${layout.barWidth}px`,
+			padding: layout.padding,
+			backgroundColor: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 1),
+			borderRadius: "8px",
+			border: `2px solid ${hexToRgbaString(KOREAN_COLORS.ACCENT_BLUE, 1)}`,
+			boxShadow: `0 0 8px ${hexToRgbaString(KOREAN_COLORS.ACCENT_BLUE, .2)}`,
+			transition: "box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out"
+		},
+		children: [/* @__PURE__ */ jsxs("div", {
+			style: {
+				fontSize: `${layout.fontSize}px`,
+				color: hexToRgbaString(KOREAN_COLORS.ACCENT_BLUE, 1),
+				fontFamily: FONT_FAMILY.KOREAN,
+				marginBottom: "3px",
+				display: "flex",
+				justifyContent: "space-between",
+				fontWeight: "bold",
+				transition: "color 0.2s ease-in-out"
+			},
+			children: [/* @__PURE__ */ jsx("span", { children: "기력 | Stamina" }), /* @__PURE__ */ jsxs("span", {
+				"data-testid": `stamina-value-${playerId}`,
+				children: [
+					Math.ceil(current),
+					"/",
+					max
+				]
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			style: {
+				display: "flex",
+				gap: "4px",
+				height: `${layout.barHeight}px`,
+				animation: shouldPulse ? "staminaPulse 0.8s ease-in-out infinite" : "none"
+			},
+			children: Array.from({ length: segments }).map((_, index) => /* @__PURE__ */ jsx("div", {
+				"data-testid": `stamina-segment-${playerId}-${index}`,
+				style: {
+					flex: 1,
+					backgroundColor: index < filledSegments ? hexToRgbaString(KOREAN_COLORS.ACCENT_BLUE, 1) : hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, 1),
+					borderRadius: "2px",
+					transition: "background-color 0.2s ease-in-out",
+					boxShadow: index < filledSegments ? `0 0 6px ${hexToRgbaString(KOREAN_COLORS.ACCENT_BLUE, .4)}` : "none"
+				}
+			}, index))
+		})]
+	});
+});
+StaminaBar.displayName = "StaminaBar";
+//#endregion
+export { StaminaBar as default };
+
+//# sourceMappingURL=StaminaBar.js.map

package/lib/components/shared/three/ui/StaminaBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StaminaBar.js","names":[],"sources":["../../../../../src/components/shared/three/ui/StaminaBar.tsx"],"sourcesContent":["/**\n * StaminaBar Component - Segmented stamina display with Korean theming\n * \n * Displays player stamina with:\n * - 5 segmented bars\n * - Consistent cyan/blue theming\n * - Pulse animation when stamina <20%\n * - Korean/English bilingual labels\n * - Numeric value display (e.g., \"45/50\")\n * - Responsive sizing for mobile/tablet/desktop\n * - Smooth transitions and glow effects\n * \n * Performance: Uses React.memo with shallow comparison for 60fps optimization.\n * Note: React.memo uses shallow comparison by default, which works correctly\n * for this component since all props are primitives (number, string, boolean).\n * If object or function props are added in the future, consider adding a\n * custom comparison function or using useCallback/useMemo for prop stability.\n */\n\nimport React, { useMemo } from \"react\";\nimport { KOREAN_COLORS, FONT_FAMILY } from \"../../../../types/constants\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\nimport \"./HUDAnimations.css\";\n\nexport interface StaminaBarProps {\n  /** Current stamina value */\n  readonly current: number;\n  /** Maximum stamina capacity */\n  readonly max: number;\n  /** Player identifier for test ID */\n  readonly playerId: string;\n  /** Whether to use mobile-optimized sizing */\n  readonly isMobile: boolean;\n}\n\n/**\n * StaminaBar - Segmented stamina display with Korean theming\n * Performance optimized with React.memo\n */\nexport const StaminaBar: React.FC<StaminaBarProps> = React.memo(({\n  current,\n  max,\n  playerId,\n  isMobile,\n}) => {\n  // Calculate stamina percentage\n  const staminaPercent = useMemo(\n    () => Math.max(0, Math.min(100, (current / max) * 100)),\n    [current, max]\n  );\n\n  const segments = 5;\n  const filledSegments = Math.ceil((staminaPercent / 100) * segments);\n  const shouldPulse = staminaPercent < 20;\n\n  // Responsive sizing with memoization\n  const layout = useMemo(() => ({\n    barWidth: isMobile ? 180 : 250,\n    barHeight: isMobile ? 10 : 12,\n    fontSize: isMobile ? 10 : 11,\n    padding: isMobile ? \"6px 8px\" : \"8px 12px\",\n  }), [isMobile]);\n\n  return (\n    <div\n      data-testid={`stamina-bar-${playerId}`}\n      role=\"progressbar\"\n      aria-label=\"기력 | Stamina\"\n      aria-valuenow={Math.ceil(current)}\n      aria-valuemin={0}\n      aria-valuemax={max}\n      aria-valuetext={`${Math.ceil(current)} out of ${max}`}\n      className=\"hud-animated\"\n      style={{\n        width: `${layout.barWidth}px`,\n        padding: layout.padding,\n        backgroundColor: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 1),\n        borderRadius: \"8px\",\n        border: `2px solid ${hexToRgbaString(KOREAN_COLORS.ACCENT_BLUE, 1)}`,\n        boxShadow: `0 0 8px ${hexToRgbaString(KOREAN_COLORS.ACCENT_BLUE, 0.2)}`,\n        transition: \"box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out\",\n      }}\n    >\n      {/* Label and numeric display */}\n      <div\n        style={{\n          fontSize: `${layout.fontSize}px`,\n          color: hexToRgbaString(KOREAN_COLORS.ACCENT_BLUE, 1),\n          fontFamily: FONT_FAMILY.KOREAN,\n          marginBottom: \"3px\",\n          display: \"flex\",\n          justifyContent: \"space-between\",\n          fontWeight: \"bold\",\n          transition: \"color 0.2s ease-in-out\",\n        }}\n      >\n        <span>기력 | Stamina</span>\n        <span data-testid={`stamina-value-${playerId}`}>\n          {Math.ceil(current)}/{max}\n        </span>\n      </div>\n\n      {/* Segmented stamina bar */}\n      <div\n        style={{\n          display: \"flex\",\n          gap: \"4px\",\n          height: `${layout.barHeight}px`,\n          animation: shouldPulse ? \"staminaPulse 0.8s ease-in-out infinite\" : \"none\",\n        }}\n      >\n        {Array.from({ length: segments }).map((_, index) => (\n          <div\n            key={index}\n            data-testid={`stamina-segment-${playerId}-${index}`}\n            style={{\n              flex: 1,\n              backgroundColor:\n                index < filledSegments\n                  ? hexToRgbaString(KOREAN_COLORS.ACCENT_BLUE, 1)\n                  : hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, 1),\n              borderRadius: \"2px\",\n              transition: \"background-color 0.2s ease-in-out\",\n              boxShadow:\n                index < filledSegments\n                  ? `0 0 6px ${hexToRgbaString(KOREAN_COLORS.ACCENT_BLUE, 0.4)}`\n                  : \"none\",\n            }}\n          />\n        ))}\n      </div>\n    </div>\n  );\n});\n\nStaminaBar.displayName = \"StaminaBar\";\n\nexport default StaminaBar;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,IAAa,aAAwC,MAAM,MAAM,EAC/D,SACA,KACA,UACA,eACI;CAEJ,MAAM,iBAAiB,cACf,KAAK,IAAI,GAAG,KAAK,IAAI,KAAM,UAAU,MAAO,IAAI,CAAC,EACvD,CAAC,SAAS,IAAI,CACf;CAED,MAAM,WAAW;CACjB,MAAM,iBAAiB,KAAK,KAAM,iBAAiB,MAAO,SAAS;CACnE,MAAM,cAAc,iBAAiB;CAGrC,MAAM,SAAS,eAAe;EAC5B,UAAU,WAAW,MAAM;EAC3B,WAAW,WAAW,KAAK;EAC3B,UAAU,WAAW,KAAK;EAC1B,SAAS,WAAW,YAAY;EACjC,GAAG,CAAC,SAAS,CAAC;AAEf,QACE,qBAAC,OAAD;EACE,eAAa,eAAe;EAC5B,MAAK;EACL,cAAW;EACX,iBAAe,KAAK,KAAK,QAAQ;EACjC,iBAAe;EACf,iBAAe;EACf,kBAAgB,GAAG,KAAK,KAAK,QAAQ,CAAC,UAAU;EAChD,WAAU;EACV,OAAO;GACL,OAAO,GAAG,OAAO,SAAS;GAC1B,SAAS,OAAO;GAChB,iBAAiB,gBAAgB,cAAc,oBAAoB,EAAE;GACrE,cAAc;GACd,QAAQ,aAAa,gBAAgB,cAAc,aAAa,EAAE;GAClE,WAAW,WAAW,gBAAgB,cAAc,aAAa,GAAI;GACrE,YAAY;GACb;YAjBH,CAoBE,qBAAC,OAAD;GACE,OAAO;IACL,UAAU,GAAG,OAAO,SAAS;IAC7B,OAAO,gBAAgB,cAAc,aAAa,EAAE;IACpD,YAAY,YAAY;IACxB,cAAc;IACd,SAAS;IACT,gBAAgB;IAChB,YAAY;IACZ,YAAY;IACb;aAVH,CAYE,oBAAC,QAAD,EAAA,UAAM,gBAAmB,CAAA,EACzB,qBAAC,QAAD;IAAM,eAAa,iBAAiB;cAApC;KACG,KAAK,KAAK,QAAQ;KAAC;KAAE;KACjB;MACH;MAGN,oBAAC,OAAD;GACE,OAAO;IACL,SAAS;IACT,KAAK;IACL,QAAQ,GAAG,OAAO,UAAU;IAC5B,WAAW,cAAc,2CAA2C;IACrE;aAEA,MAAM,KAAK,EAAE,QAAQ,UAAU,CAAC,CAAC,KAAK,GAAG,UACxC,oBAAC,OAAD;IAEE,eAAa,mBAAmB,SAAS,GAAG;IAC5C,OAAO;KACL,MAAM;KACN,iBACE,QAAQ,iBACJ,gBAAgB,cAAc,aAAa,EAAE,GAC7C,gBAAgB,cAAc,sBAAsB,EAAE;KAC5D,cAAc;KACd,YAAY;KACZ,WACE,QAAQ,iBACJ,WAAW,gBAAgB,cAAc,aAAa,GAAI,KAC1D;KACP;IACD,EAfK,MAeL,CACF;GACE,CAAA,CACF;;EAER;AAEF,WAAW,cAAc"}