blacktrigram 0.7.2

package/lib/components/screens/combat/components/hud/PlayerStateOverlayHtml.js

@@ -0,0 +1,79 @@
+import { PainVignette } from "../effects/PainVignette.js";
+import { BalanceIndicator } from "../indicators/BalanceIndicator.js";
+import { ConsciousnessBlur } from "../effects/ConsciousnessBlur.js";
+import { BloodLossOverlayHtml } from "../effects/BloodLossOverlayHtml.js";
+import { StaminaWarning } from "../indicators/StaminaWarning.js";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/screens/combat/components/hud/PlayerStateOverlayHtml.tsx
+/**
+* PlayerStateOverlayHtml Component - Unified player state visual indicators
+* 
+* Combines all player state visual effects into a single overlay:
+* - Pain vignette
+* - Balance indicator
+* - Consciousness blur
+* - Blood loss warning
+* - Stamina warning
+* 
+* @module components/combat/PlayerStateOverlayHtml
+* @category Combat UI
+* @korean 플레이어상태오버레이
+*/
+/**
+* PlayerStateOverlayHtml - Unified visual effects for player state
+* 
+* Combines all player state visual indicators into a single component
+* with optimal performance and consistent rendering. All effects use
+* smooth 0.5s transitions and are optimized for 60fps.
+*
+* Optimized with React.memo for performance:
+* - Prevents re-renders when props haven't changed
+* - Custom comparison function for precise control
+* - Reduces DOM updates for 60fps target
+* 
+* @example
+* ```tsx
+* <PlayerStateOverlayHtml
+*   pain={65}
+*   balanceState="SHAKEN"
+*   position="left"
+*   consciousness={80}
+*   bloodLoss={45}
+*   stamina={15}
+*   isMobile={false}
+* />
+* ```
+*/
+var PlayerStateOverlayHtml = React.memo(({ pain, balanceState, position, consciousness, bloodLoss = 0, stamina, isMobile }) => {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(PainVignette, {
+			pain,
+			isMobile
+		}),
+		/* @__PURE__ */ jsx(BalanceIndicator, {
+			balanceState,
+			position,
+			isMobile
+		}),
+		/* @__PURE__ */ jsx(ConsciousnessBlur, {
+			consciousness,
+			isMobile
+		}),
+		/* @__PURE__ */ jsx(BloodLossOverlayHtml, {
+			bloodLoss,
+			isMobile
+		}),
+		/* @__PURE__ */ jsx(StaminaWarning, {
+			stamina,
+			isMobile
+		})
+	] });
+}, (prevProps, nextProps) => {
+	return prevProps.pain === nextProps.pain && prevProps.balanceState === nextProps.balanceState && prevProps.position === nextProps.position && prevProps.consciousness === nextProps.consciousness && prevProps.bloodLoss === nextProps.bloodLoss && prevProps.stamina === nextProps.stamina && prevProps.isMobile === nextProps.isMobile;
+});
+PlayerStateOverlayHtml.displayName = "PlayerStateOverlayHtml";
+//#endregion
+export { PlayerStateOverlayHtml };
+
+//# sourceMappingURL=PlayerStateOverlayHtml.js.map

package/lib/components/screens/combat/components/hud/PlayerStateOverlayHtml.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlayerStateOverlayHtml.js","names":[],"sources":["../../../../../../src/components/screens/combat/components/hud/PlayerStateOverlayHtml.tsx"],"sourcesContent":["/**\n * PlayerStateOverlayHtml Component - Unified player state visual indicators\n * \n * Combines all player state visual effects into a single overlay:\n * - Pain vignette\n * - Balance indicator\n * - Consciousness blur\n * - Blood loss warning\n * - Stamina warning\n * \n * @module components/combat/PlayerStateOverlayHtml\n * @category Combat UI\n * @korean 플레이어상태오버레이\n */\n\nimport React from \"react\";\nimport { PainVignette } from \"../effects/PainVignette\";\nimport { BalanceIndicator } from \"../indicators/BalanceIndicator\";\nimport { ConsciousnessBlur } from \"../effects/ConsciousnessBlur\";\nimport { BloodLossOverlayHtml } from \"../effects/BloodLossOverlayHtml\";\nimport { StaminaWarning } from \"../indicators/StaminaWarning\";\nimport type { BalanceState } from \"../../../../../types/player-visual\";\n\nexport interface PlayerStateOverlayProps {\n  /**\n   * Current pain level (0-100)\n   * @korean 통증\n   */\n  readonly pain: number;\n\n  /**\n   * Current balance state\n   * @korean 균형상태\n   */\n  readonly balanceState: BalanceState;\n\n  /**\n   * Player position ('left' or 'right')\n   * @korean 플레이어위치\n   */\n  readonly position: \"left\" | \"right\";\n\n  /**\n   * Current consciousness level (0-100)\n   * @korean 의식\n   */\n  readonly consciousness: number;\n\n  /**\n   * Current blood loss (0-100, optional)\n   * @korean 출혈\n   */\n  readonly bloodLoss?: number;\n\n  /**\n   * Current stamina (0-100)\n   * @korean 체력\n   */\n  readonly stamina: number;\n\n  /**\n   * Mobile responsive mode\n   * @korean 모바일여부\n   */\n  readonly isMobile: boolean;\n}\n\n/**\n * PlayerStateOverlayHtml - Unified visual effects for player state\n * \n * Combines all player state visual indicators into a single component\n * with optimal performance and consistent rendering. All effects use\n * smooth 0.5s transitions and are optimized for 60fps.\n *\n * Optimized with React.memo for performance:\n * - Prevents re-renders when props haven't changed\n * - Custom comparison function for precise control\n * - Reduces DOM updates for 60fps target\n * \n * @example\n * ```tsx\n * <PlayerStateOverlayHtml\n *   pain={65}\n *   balanceState=\"SHAKEN\"\n *   position=\"left\"\n *   consciousness={80}\n *   bloodLoss={45}\n *   stamina={15}\n *   isMobile={false}\n * />\n * ```\n */\nexport const PlayerStateOverlayHtml = React.memo<PlayerStateOverlayProps>(\n  ({\n    pain,\n    balanceState,\n    position,\n    consciousness,\n    bloodLoss = 0,\n    stamina,\n    isMobile,\n  }) => {\n    return (\n      <>\n        {/* Pain vignette - shows when pain >= 5 (see PainVignette.tsx) */}\n        <PainVignette pain={pain} isMobile={isMobile} />\n\n        {/* Balance indicator - always visible, color-coded by state (see BalanceIndicator.tsx) */}\n        <BalanceIndicator\n          balanceState={balanceState}\n          position={position}\n          isMobile={isMobile}\n        />\n\n        {/* Consciousness blur - shows when consciousness <= 90 (see ConsciousnessBlur.tsx) */}\n        <ConsciousnessBlur consciousness={consciousness} isMobile={isMobile} />\n\n        {/* Blood loss warning - pulses when bloodLoss >= 50 (see BloodLossOverlayHtml.tsx) */}\n        <BloodLossOverlayHtml bloodLoss={bloodLoss} isMobile={isMobile} />\n\n        {/* Stamina warning - flashes when stamina < 20 (see StaminaWarning.tsx) */}\n        <StaminaWarning stamina={stamina} isMobile={isMobile} />\n      </>\n    );\n  },\n  (prevProps, nextProps) => {\n    // Custom comparison for optimal re-render prevention\n    // Only re-render if any state value actually changed\n    return (\n      prevProps.pain === nextProps.pain &&\n      prevProps.balanceState === nextProps.balanceState &&\n      prevProps.position === nextProps.position &&\n      prevProps.consciousness === nextProps.consciousness &&\n      prevProps.bloodLoss === nextProps.bloodLoss &&\n      prevProps.stamina === nextProps.stamina &&\n      prevProps.isMobile === nextProps.isMobile\n    );\n  },\n);\n\nPlayerStateOverlayHtml.displayName = \"PlayerStateOverlayHtml\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4FA,IAAa,yBAAyB,MAAM,MACzC,EACC,MACA,cACA,UACA,eACA,YAAY,GACZ,SACA,eACI;AACJ,QACE,qBAAA,UAAA,EAAA,UAAA;EAEE,oBAAC,cAAD;GAAoB;GAAgB;GAAY,CAAA;EAGhD,oBAAC,kBAAD;GACgB;GACJ;GACA;GACV,CAAA;EAGF,oBAAC,mBAAD;GAAkC;GAAyB;GAAY,CAAA;EAGvE,oBAAC,sBAAD;GAAiC;GAAqB;GAAY,CAAA;EAGlE,oBAAC,gBAAD;GAAyB;GAAmB;GAAY,CAAA;EACvD,EAAA,CAAA;IAGN,WAAW,cAAc;AAGxB,QACE,UAAU,SAAS,UAAU,QAC7B,UAAU,iBAAiB,UAAU,gBACrC,UAAU,aAAa,UAAU,YACjC,UAAU,kBAAkB,UAAU,iBACtC,UAAU,cAAc,UAAU,aAClC,UAAU,YAAY,UAAU,WAChC,UAAU,aAAa,UAAU;EAGtC;AAED,uBAAuB,cAAc"}

package/lib/components/screens/combat/components/hud/index.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Combat HUD Components Index
+ *
+ * Exports all HUD components for the combat screen.
+ * Following gaming UI best practices:
+ * - TopHUD: 70px/55px - Round info, timer, menu
+ * - BottomHUD: 120px/100px - Technique bar, controls
+ * - LeftHUD: 14%/18% - Player 1 stats
+ * - RightHUD: 14%/18% - Player 2/AI stats
+ * - Arena: ~72% center
+ *
+ * @korean 전투화면 HUD 컴포넌트 인덱스
+ */
+export { CombatTopHUD } from "./CombatTopHUD";
+export type { CombatTopHUDProps } from "./CombatTopHUD";
+export { CombatBottomHUD } from "./CombatBottomHUD";
+export type { CombatBottomHUDProps } from "./CombatBottomHUD";
+export { CombatLeftHUD } from "./CombatLeftHUD";
+export type { CombatLeftHUDProps } from "./CombatLeftHUD";
+export { CombatRightHUD } from "./CombatRightHUD";
+export type { CombatRightHUDProps } from "./CombatRightHUD";
+//# sourceMappingURL=index.d.ts.map

package/lib/components/screens/combat/components/hud/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/screens/combat/components/hud/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAExD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE9D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE1D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC"}

package/lib/components/screens/combat/components/hud/index.js

@@ -0,0 +1,4 @@
+import "./CombatTopHUD.js";
+import "./CombatBottomHUD.js";
+import "./CombatLeftHUD.js";
+import "./CombatRightHUD.js";

package/lib/components/screens/combat/components/index.d.ts

@@ -0,0 +1,47 @@
+export { default as BloodDecals3D } from "./effects/BloodDecals3D";
+export { default as BloodParticles3D } from "./effects/BloodParticles3D";
+export { default as TraumaOverlay3D } from "./effects/TraumaOverlay3D";
+export { BloodLossOverlayHtml } from "./effects/BloodLossOverlayHtml";
+export { ConsciousnessBlur } from "./effects/ConsciousnessBlur";
+export { PainVignette } from "./effects/PainVignette";
+export { TechniqueNameDisplay } from "./indicators/TechniqueNameDisplay";
+export { BalanceIndicator } from "./indicators/BalanceIndicator";
+export { StaminaWarning } from "./indicators/StaminaWarning";
+export { InputBufferDisplay } from "./indicators/InputBufferDisplay";
+export { CombatControlsPanel } from "./controls/CombatControlsPanel";
+export { default as ControlsGuide } from "./controls/ControlsGuide";
+export { PauseMenu } from "./controls/PauseMenu";
+export { default as QuickSettings } from "./controls/QuickSettings";
+export { KeyboardHints } from "./controls/KeyboardHints";
+export { MatchCountdown } from "./feedback/MatchCountdown";
+export { RoundAnnouncement } from "./feedback/RoundAnnouncementOverlayHtml";
+export { RoundDisplayStatus } from "./feedback/RoundDisplayStatus";
+export { RoundStartAnnouncement } from "./feedback/RoundStartAnnouncementOverlayHtml";
+export { DifficultyIndicator } from "./hud/DifficultyIndicator";
+export { FPSMonitor } from "./hud/FPSMonitor";
+export { MobileControlsWrapper } from "./hud/MobileControlsWrapper";
+export { PlayerStateOverlayHtml } from "./hud/PlayerStateOverlayHtml";
+export type { BloodDecals3DProps, BloodDecal } from "./effects/BloodDecals3D";
+export type { BloodParticles3DProps, BloodSplatterEffect } from "./effects/BloodParticles3D";
+export type { TraumaOverlay3DProps, Injury, InjuryType, } from "./effects/TraumaOverlay3D";
+export type { BloodLossOverlayProps } from "./effects/BloodLossOverlayHtml";
+export type { ConsciousnessBlurProps } from "./effects/ConsciousnessBlur";
+export type { PainVignetteProps } from "./effects/PainVignette";
+export type { TechniqueNameDisplayProps } from "./indicators/TechniqueNameDisplay";
+export type { BalanceIndicatorProps } from "./indicators/BalanceIndicator";
+export type { StaminaWarningProps } from "./indicators/StaminaWarning";
+export type { InputBufferDisplayProps } from "./indicators/InputBufferDisplay";
+export type { CombatControlsPanelProps } from "./controls/CombatControlsPanel";
+export type { ControlsGuideProps } from "./controls/ControlsGuide";
+export type { PauseMenuProps } from "./controls/PauseMenu";
+export type { QuickSettingsProps } from "./controls/QuickSettings";
+export type { KeyboardHintsProps } from "./controls/KeyboardHints";
+export type { MatchCountdownProps } from "./feedback/MatchCountdown";
+export type { RoundAnnouncementProps, RoundStats } from "./feedback/RoundAnnouncementOverlayHtml";
+export type { RoundDisplayStatusProps, RoundDisplayStatus as RoundDisplayStatusType } from "./feedback/RoundDisplayStatus";
+export type { RoundStartAnnouncementProps } from "./feedback/RoundStartAnnouncementOverlayHtml";
+export type { DifficultyIndicatorProps } from "./hud/DifficultyIndicator";
+export type { FPSMonitorProps } from "./hud/FPSMonitor";
+export type { MobileControlsWrapperProps } from "./hud/MobileControlsWrapper";
+export type { PlayerStateOverlayProps } from "./hud/PlayerStateOverlayHtml";
+//# sourceMappingURL=index.d.ts.map

package/lib/components/screens/combat/components/index.d.ts.map

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

package/lib/components/screens/combat/components/index.js

@@ -0,0 +1,23 @@
+import "./controls/KeyboardHints.js";
+import "./feedback/MatchCountdown.js";
+import "./feedback/RoundAnnouncementOverlayHtml.js";
+import "./feedback/RoundDisplayStatus.js";
+import "./feedback/RoundStartAnnouncementOverlayHtml.js";
+import "./indicators/InputBufferDisplay.js";
+import "./controls/ControlsGuide.js";
+import "./controls/QuickSettings.js";
+import "./controls/PauseMenu.js";
+import "./effects/TraumaOverlay3D.js";
+import "./hud/DifficultyIndicator.js";
+import "./hud/FPSMonitor.js";
+import "./effects/PainVignette.js";
+import "./indicators/BalanceIndicator.js";
+import "./effects/ConsciousnessBlur.js";
+import "./effects/BloodLossOverlayHtml.js";
+import "./indicators/StaminaWarning.js";
+import "./hud/PlayerStateOverlayHtml.js";
+import "./effects/BloodDecals3D.js";
+import "./effects/BloodParticles3D.js";
+import "./indicators/TechniqueNameDisplay.js";
+import "./controls/CombatControlsPanel.js";
+import "./hud/MobileControlsWrapper.js";

package/lib/components/screens/combat/components/indicators/BalanceIndicator.d.ts

@@ -0,0 +1,52 @@
+/**
+ * BalanceIndicator Component - Visual indicator for player balance state
+ *
+ * Displays a color-coded border around the player representing their
+ * combat balance state: READY (green), SHAKEN (yellow), VULNERABLE (orange), HELPLESS (red).
+ *
+ * NOTE: This component is rendered OUTSIDE the Canvas as part of the HTML overlay.
+ * It does NOT use Html from drei - it's a standard React component.
+ *
+ * Refactored to use useKoreanTheme for consistent styling.
+ *
+ * @module components/combat/BalanceIndicator
+ * @category Combat UI
+ * @korean 균형표시기
+ */
+import React from "react";
+import type { BalanceState } from "../../../../../types/player-visual";
+export interface BalanceIndicatorProps {
+    /**
+     * Current balance state
+     * @korean 균형상태
+     */
+    readonly balanceState: BalanceState;
+    /**
+     * Player position ('left' or 'right' side of screen)
+     * @korean 플레이어위치
+     */
+    readonly position: "left" | "right";
+    /**
+     * Mobile responsive mode (thinner borders)
+     * @korean 모바일여부
+     */
+    readonly isMobile: boolean;
+}
+/**
+ * BalanceIndicator - Color-coded border indicator for player balance state
+ *
+ * Renders a border around the player HUD area with color matching the
+ * current balance state. Uses smooth transitions for state changes.
+ * Uses useKoreanTheme for consistent color scheme.
+ *
+ * @example
+ * ```tsx
+ * <BalanceIndicator
+ *   balanceState="SHAKEN"
+ *   position="left"
+ *   isMobile={false}
+ * />
+ * ```
+ */
+export declare const BalanceIndicator: React.FC<BalanceIndicatorProps>;
+//# sourceMappingURL=BalanceIndicator.d.ts.map

package/lib/components/screens/combat/components/indicators/BalanceIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BalanceIndicator.d.ts","sourceRoot":"","sources":["../../../../../../src/components/screens/combat/components/indicators/BalanceIndicator.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAEvE,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAC;IAEpC;;;OAGG;IACH,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC;IAEpC;;;OAGG;IACH,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;CAC5B;AAqCD;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA4C5D,CAAC"}

package/lib/components/screens/combat/components/indicators/BalanceIndicator.js

@@ -0,0 +1,113 @@
+import { useKoreanTheme } from "../../../../shared/base/useKoreanTheme.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/screens/combat/components/indicators/BalanceIndicator.tsx
+/**
+* BalanceIndicator Component - Visual indicator for player balance state
+*
+* Displays a color-coded border around the player representing their
+* combat balance state: READY (green), SHAKEN (yellow), VULNERABLE (orange), HELPLESS (red).
+*
+* NOTE: This component is rendered OUTSIDE the Canvas as part of the HTML overlay.
+* It does NOT use Html from drei - it's a standard React component.
+*
+* Refactored to use useKoreanTheme for consistent styling.
+*
+* @module components/combat/BalanceIndicator
+* @category Combat UI
+* @korean 균형표시기
+*/
+/**
+* Get color for balance state using theme colors
+*/
+function getBalanceColor(theme, state) {
+	switch (state) {
+		case "READY": return theme.colors.POSITIVE_GREEN;
+		case "SHAKEN": return theme.colors.WARNING_YELLOW;
+		case "VULNERABLE": return theme.colors.WARNING_ORANGE;
+		case "HELPLESS": return theme.colors.ACCENT_RED;
+	}
+}
+/**
+* Get Korean label for balance state
+*/
+function getBalanceLabel(state) {
+	switch (state) {
+		case "READY": return {
+			korean: "준비완료",
+			english: "READY"
+		};
+		case "SHAKEN": return {
+			korean: "동요상태",
+			english: "SHAKEN"
+		};
+		case "VULNERABLE": return {
+			korean: "취약상태",
+			english: "VULNERABLE"
+		};
+		case "HELPLESS": return {
+			korean: "무력상태",
+			english: "HELPLESS"
+		};
+	}
+}
+/**
+* BalanceIndicator - Color-coded border indicator for player balance state
+*
+* Renders a border around the player HUD area with color matching the
+* current balance state. Uses smooth transitions for state changes.
+* Uses useKoreanTheme for consistent color scheme.
+*
+* @example
+* ```tsx
+* <BalanceIndicator
+*   balanceState="SHAKEN"
+*   position="left"
+*   isMobile={false}
+* />
+* ```
+*/
+var BalanceIndicator = ({ balanceState, position, isMobile }) => {
+	const theme = useKoreanTheme({
+		variant: "primary",
+		size: "md",
+		isMobile
+	});
+	const indicatorStyle = useMemo(() => {
+		const colorHex = `#${getBalanceColor(theme, balanceState).toString(16).padStart(6, "0")}`;
+		const borderWidth = isMobile ? "3px" : "4px";
+		const isLeft = position === "left";
+		return {
+			position: "absolute",
+			top: isMobile ? "8px" : "12px",
+			left: isLeft ? isMobile ? "8px" : "12px" : "auto",
+			right: isLeft ? "auto" : isMobile ? "8px" : "12px",
+			width: isMobile ? "180px" : "220px",
+			height: isMobile ? "80px" : "100px",
+			border: `${borderWidth} solid ${colorHex}`,
+			borderRadius: "8px",
+			boxShadow: `0 0 12px ${colorHex}`,
+			pointerEvents: "none",
+			transition: "border-color 0.5s ease-out, box-shadow 0.5s ease-out",
+			zIndex: 90
+		};
+	}, [
+		balanceState,
+		position,
+		isMobile,
+		theme
+	]);
+	const label = useMemo(() => getBalanceLabel(balanceState), [balanceState]);
+	return /* @__PURE__ */ jsx("div", {
+		"data-testid": `balance-indicator-${position}`,
+		style: indicatorStyle,
+		"aria-label": `${label.korean} | ${label.english}`,
+		role: "status",
+		"aria-live": "polite"
+	});
+};
+BalanceIndicator.displayName = "BalanceIndicator";
+//#endregion
+export { BalanceIndicator };
+
+//# sourceMappingURL=BalanceIndicator.js.map

package/lib/components/screens/combat/components/indicators/BalanceIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BalanceIndicator.js","names":[],"sources":["../../../../../../src/components/screens/combat/components/indicators/BalanceIndicator.tsx"],"sourcesContent":["/**\n * BalanceIndicator Component - Visual indicator for player balance state\n *\n * Displays a color-coded border around the player representing their\n * combat balance state: READY (green), SHAKEN (yellow), VULNERABLE (orange), HELPLESS (red).\n *\n * NOTE: This component is rendered OUTSIDE the Canvas as part of the HTML overlay.\n * It does NOT use Html from drei - it's a standard React component.\n *\n * Refactored to use useKoreanTheme for consistent styling.\n *\n * @module components/combat/BalanceIndicator\n * @category Combat UI\n * @korean 균형표시기\n */\n\nimport React, { useMemo } from \"react\";\nimport { useKoreanTheme } from \"../../../../shared/base/useKoreanTheme\";\nimport type { BalanceState } from \"../../../../../types/player-visual\";\n\nexport interface BalanceIndicatorProps {\n  /**\n   * Current balance state\n   * @korean 균형상태\n   */\n  readonly balanceState: BalanceState;\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 (thinner borders)\n   * @korean 모바일여부\n   */\n  readonly isMobile: boolean;\n}\n\n/**\n * Get color for balance state using theme colors\n */\nfunction getBalanceColor(theme: ReturnType<typeof useKoreanTheme>, state: BalanceState): number {\n  switch (state) {\n    case \"READY\":\n      return theme.colors.POSITIVE_GREEN; // 🟢 Green\n    case \"SHAKEN\":\n      return theme.colors.WARNING_YELLOW; // 🟡 Yellow\n    case \"VULNERABLE\":\n      return theme.colors.WARNING_ORANGE; // 🟠 Orange\n    case \"HELPLESS\":\n      return theme.colors.ACCENT_RED; // 🔴 Red\n  }\n}\n\n/**\n * Get Korean label for balance state\n */\nfunction getBalanceLabel(state: BalanceState): {\n  korean: string;\n  english: string;\n} {\n  switch (state) {\n    case \"READY\":\n      return { korean: \"준비완료\", english: \"READY\" };\n    case \"SHAKEN\":\n      return { korean: \"동요상태\", english: \"SHAKEN\" };\n    case \"VULNERABLE\":\n      return { korean: \"취약상태\", english: \"VULNERABLE\" };\n    case \"HELPLESS\":\n      return { korean: \"무력상태\", english: \"HELPLESS\" };\n  }\n}\n\n/**\n * BalanceIndicator - Color-coded border indicator for player balance state\n *\n * Renders a border around the player HUD area with color matching the\n * current balance state. Uses smooth transitions for state changes.\n * Uses useKoreanTheme for consistent color scheme.\n *\n * @example\n * ```tsx\n * <BalanceIndicator\n *   balanceState=\"SHAKEN\"\n *   position=\"left\"\n *   isMobile={false}\n * />\n * ```\n */\nexport const BalanceIndicator: React.FC<BalanceIndicatorProps> = ({\n  balanceState,\n  position,\n  isMobile,\n}) => {\n  const theme = useKoreanTheme({ variant: \"primary\", size: \"md\", isMobile });\n  \n  const indicatorStyle = useMemo(() => {\n    const color = getBalanceColor(theme, balanceState);\n    const colorHex = `#${color.toString(16).padStart(6, \"0\")}`;\n\n    // Mobile uses thinner border\n    const borderWidth = isMobile ? \"3px\" : \"4px\";\n\n    // Position based on player side\n    const isLeft = position === \"left\";\n\n    return {\n      position: \"absolute\" as const,\n      top: isMobile ? \"8px\" : \"12px\",\n      left: isLeft ? (isMobile ? \"8px\" : \"12px\") : \"auto\",\n      right: isLeft ? \"auto\" : isMobile ? \"8px\" : \"12px\",\n      width: isMobile ? \"180px\" : \"220px\",\n      height: isMobile ? \"80px\" : \"100px\",\n      border: `${borderWidth} solid ${colorHex}`,\n      borderRadius: \"8px\",\n      boxShadow: `0 0 12px ${colorHex}`,\n      pointerEvents: \"none\" as const,\n      transition: \"border-color 0.5s ease-out, box-shadow 0.5s ease-out\",\n      zIndex: 90, // Below HUD text but above game content\n    };\n  }, [balanceState, position, isMobile, theme]);\n\n  const label = useMemo(() => getBalanceLabel(balanceState), [balanceState]);\n\n  return (\n    <div\n      data-testid={`balance-indicator-${position}`}\n      style={indicatorStyle}\n      aria-label={`${label.korean} | ${label.english}`}\n      role=\"status\"\n      aria-live=\"polite\"\n    />\n  );\n};\n\nBalanceIndicator.displayName = \"BalanceIndicator\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA2CA,SAAS,gBAAgB,OAA0C,OAA6B;AAC9F,SAAQ,OAAR;EACE,KAAK,QACH,QAAO,MAAM,OAAO;EACtB,KAAK,SACH,QAAO,MAAM,OAAO;EACtB,KAAK,aACH,QAAO,MAAM,OAAO;EACtB,KAAK,WACH,QAAO,MAAM,OAAO;;;;;;AAO1B,SAAS,gBAAgB,OAGvB;AACA,SAAQ,OAAR;EACE,KAAK,QACH,QAAO;GAAE,QAAQ;GAAQ,SAAS;GAAS;EAC7C,KAAK,SACH,QAAO;GAAE,QAAQ;GAAQ,SAAS;GAAU;EAC9C,KAAK,aACH,QAAO;GAAE,QAAQ;GAAQ,SAAS;GAAc;EAClD,KAAK,WACH,QAAO;GAAE,QAAQ;GAAQ,SAAS;GAAY;;;;;;;;;;;;;;;;;;;AAoBpD,IAAa,oBAAqD,EAChE,cACA,UACA,eACI;CACJ,MAAM,QAAQ,eAAe;EAAE,SAAS;EAAW,MAAM;EAAM;EAAU,CAAC;CAE1E,MAAM,iBAAiB,cAAc;EAEnC,MAAM,WAAW,IADH,gBAAgB,OAAO,aAAa,CACvB,SAAS,GAAG,CAAC,SAAS,GAAG,IAAI;EAGxD,MAAM,cAAc,WAAW,QAAQ;EAGvC,MAAM,SAAS,aAAa;AAE5B,SAAO;GACL,UAAU;GACV,KAAK,WAAW,QAAQ;GACxB,MAAM,SAAU,WAAW,QAAQ,SAAU;GAC7C,OAAO,SAAS,SAAS,WAAW,QAAQ;GAC5C,OAAO,WAAW,UAAU;GAC5B,QAAQ,WAAW,SAAS;GAC5B,QAAQ,GAAG,YAAY,SAAS;GAChC,cAAc;GACd,WAAW,YAAY;GACvB,eAAe;GACf,YAAY;GACZ,QAAQ;GACT;IACA;EAAC;EAAc;EAAU;EAAU;EAAM,CAAC;CAE7C,MAAM,QAAQ,cAAc,gBAAgB,aAAa,EAAE,CAAC,aAAa,CAAC;AAE1E,QACE,oBAAC,OAAD;EACE,eAAa,qBAAqB;EAClC,OAAO;EACP,cAAY,GAAG,MAAM,OAAO,KAAK,MAAM;EACvC,MAAK;EACL,aAAU;EACV,CAAA;;AAIN,iBAAiB,cAAc"}

package/lib/components/screens/combat/components/indicators/InputBufferDisplay.d.ts

@@ -0,0 +1,49 @@
+/**
+ * InputBufferDisplay - Input queue visualization
+ * Shows queued combat actions for player feedback
+ *
+ * Refactored to use useKoreanTheme for consistent theming.
+ *
+ * @module components/combat/components/InputBufferDisplay
+ * @category Combat UI
+ * @korean 입력버퍼표시
+ */
+import React from "react";
+import { QueuedInput } from "../../../../../hooks/useKeyboardControls";
+/**
+ * Props for InputBufferDisplay component
+ */
+export interface InputBufferDisplayProps {
+    /** Queued inputs to display */
+    readonly queuedInputs: readonly QueuedInput[];
+    /** Mobile layout flag */
+    readonly isMobile?: boolean;
+}
+/**
+ * InputBufferDisplay Component
+ *
+ * Displays a list of recently queued combat inputs in the top-right corner.
+ * Useful for showing input confirmation and debugging input lag issues.
+ * Uses useKoreanTheme for consistent styling.
+ *
+ * Features:
+ * - Displays up to 3 recent inputs
+ * - Fades older inputs with reduced opacity
+ * - Shows action name and key pressed
+ * - Responsive mobile layout
+ * - Korean cyberpunk styling via theme
+ * - Automatically clears after 2 seconds
+ *
+ * @example
+ * ```tsx
+ * <InputBufferDisplay
+ *   queuedInputs={queuedInputs}
+ *   isMobile={isMobile}
+ * />
+ * ```
+ *
+ * @public
+ * @korean 입력버퍼표시
+ */
+export declare const InputBufferDisplay: React.FC<InputBufferDisplayProps>;
+//# sourceMappingURL=InputBufferDisplay.d.ts.map

package/lib/components/screens/combat/components/indicators/InputBufferDisplay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputBufferDisplay.d.ts","sourceRoot":"","sources":["../../../../../../src/components/screens/combat/components/indicators/InputBufferDisplay.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEvE;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC,+BAA+B;IAC/B,QAAQ,CAAC,YAAY,EAAE,SAAS,WAAW,EAAE,CAAC;IAC9C,yBAAyB;IACzB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA+HhE,CAAC"}

package/lib/components/screens/combat/components/indicators/InputBufferDisplay.js

@@ -0,0 +1,150 @@
+import { hexToRgbaString } from "../../../../../utils/colorUtils.js";
+import { useKoreanTheme } from "../../../../shared/base/useKoreanTheme.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Html } from "@react-three/drei";
+//#region src/components/screens/combat/components/indicators/InputBufferDisplay.tsx
+/**
+* InputBufferDisplay - Input queue visualization
+* Shows queued combat actions for player feedback
+* 
+* Refactored to use useKoreanTheme for consistent theming.
+* 
+* @module components/combat/components/InputBufferDisplay
+* @category Combat UI
+* @korean 입력버퍼표시
+*/
+/**
+* InputBufferDisplay Component
+* 
+* Displays a list of recently queued combat inputs in the top-right corner.
+* Useful for showing input confirmation and debugging input lag issues.
+* Uses useKoreanTheme for consistent styling.
+* 
+* Features:
+* - Displays up to 3 recent inputs
+* - Fades older inputs with reduced opacity
+* - Shows action name and key pressed
+* - Responsive mobile layout
+* - Korean cyberpunk styling via theme
+* - Automatically clears after 2 seconds
+* 
+* @example
+* ```tsx
+* <InputBufferDisplay
+*   queuedInputs={queuedInputs}
+*   isMobile={isMobile}
+* />
+* ```
+* 
+* @public
+* @korean 입력버퍼표시
+*/
+var InputBufferDisplay = ({ queuedInputs, isMobile = false }) => {
+	const theme = useKoreanTheme({
+		variant: "primary",
+		size: "sm",
+		isMobile
+	});
+	const animationStyles = useMemo(() => /* @__PURE__ */ jsx("style", { children: `
+        @keyframes slideIn {
+          0% {
+            opacity: 0;
+            transform: translateX(10px);
+          }
+          100% {
+            opacity: 1;
+            transform: translateX(0);
+          }
+        }
+      ` }), []);
+	if (queuedInputs.length === 0) return null;
+	const fontSize = isMobile ? 10 : 12;
+	const labelFontSize = isMobile ? 8 : 10;
+	const top = isMobile ? "10px" : "20px";
+	const right = isMobile ? "10px" : "20px";
+	return /* @__PURE__ */ jsx(Html, {
+		fullscreen: true,
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-testid": "input-buffer-display",
+			role: "log",
+			"aria-live": "polite",
+			"aria-label": "Input queue",
+			style: {
+				position: "absolute",
+				top,
+				right,
+				background: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, .8),
+				border: `1px solid ${hexToRgbaString(theme.colors.ACCENT_BLUE, .6)}`,
+				borderRadius: "4px",
+				padding: isMobile ? "4px" : "8px",
+				minWidth: isMobile ? "100px" : "150px",
+				pointerEvents: "none",
+				zIndex: 998,
+				boxShadow: `0 0 10px ${hexToRgbaString(theme.colors.ACCENT_BLUE, .2)}`
+			},
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					style: {
+						fontSize: `${labelFontSize}px`,
+						color: hexToRgbaString(theme.colors.ACCENT_BLUE, .9),
+						fontFamily: theme.fontFamily.KOREAN,
+						marginBottom: "4px",
+						fontWeight: "bold",
+						textTransform: "uppercase"
+					},
+					children: "Input Queue"
+				}),
+				/* @__PURE__ */ jsx("div", {
+					style: {
+						display: "flex",
+						flexDirection: "column",
+						gap: "2px"
+					},
+					children: queuedInputs.map((input, index) => {
+						const opacity = 1 - index * .3;
+						return /* @__PURE__ */ jsxs("div", {
+							"data-testid": `queued-input-${index}`,
+							style: {
+								fontSize: `${fontSize}px`,
+								color: hexToRgbaString(theme.colors.TEXT_PRIMARY, opacity),
+								fontFamily: theme.fontFamily.KOREAN,
+								display: "flex",
+								justifyContent: "space-between",
+								alignItems: "center",
+								gap: "8px",
+								animation: index === 0 ? "slideIn 0.2s ease-out" : "none"
+							},
+							children: [/* @__PURE__ */ jsx("span", {
+								style: {
+									flex: 1,
+									overflow: "hidden",
+									textOverflow: "ellipsis",
+									whiteSpace: "nowrap"
+								},
+								children: input.action
+							}), /* @__PURE__ */ jsx("span", {
+								style: {
+									padding: "2px 4px",
+									background: hexToRgbaString(theme.colors.ACCENT_BLUE, .2 * opacity),
+									border: `1px solid ${hexToRgbaString(theme.colors.ACCENT_BLUE, .5 * opacity)}`,
+									borderRadius: "2px",
+									fontSize: `${fontSize - 2}px`,
+									fontWeight: "bold",
+									minWidth: isMobile ? "20px" : "24px",
+									textAlign: "center"
+								},
+								children: input.key.toUpperCase()
+							})]
+						}, `${input.timestamp}-${input.key}`);
+					})
+				}),
+				animationStyles
+			]
+		})
+	});
+};
+//#endregion
+export { InputBufferDisplay };
+
+//# sourceMappingURL=InputBufferDisplay.js.map

package/lib/components/screens/combat/components/indicators/InputBufferDisplay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputBufferDisplay.js","names":[],"sources":["../../../../../../src/components/screens/combat/components/indicators/InputBufferDisplay.tsx"],"sourcesContent":["/**\n * InputBufferDisplay - Input queue visualization\n * Shows queued combat actions for player feedback\n * \n * Refactored to use useKoreanTheme for consistent theming.\n * \n * @module components/combat/components/InputBufferDisplay\n * @category Combat UI\n * @korean 입력버퍼표시\n */\n\nimport { Html } from \"@react-three/drei\";\nimport React, { useMemo } from \"react\";\nimport { useKoreanTheme } from \"../../../../shared/base/useKoreanTheme\";\nimport { hexToRgbaString } from \"../../../../../utils/colorUtils\";\nimport { QueuedInput } from \"../../../../../hooks/useKeyboardControls\";\n\n/**\n * Props for InputBufferDisplay component\n */\nexport interface InputBufferDisplayProps {\n  /** Queued inputs to display */\n  readonly queuedInputs: readonly QueuedInput[];\n  /** Mobile layout flag */\n  readonly isMobile?: boolean;\n}\n\n/**\n * InputBufferDisplay Component\n * \n * Displays a list of recently queued combat inputs in the top-right corner.\n * Useful for showing input confirmation and debugging input lag issues.\n * Uses useKoreanTheme for consistent styling.\n * \n * Features:\n * - Displays up to 3 recent inputs\n * - Fades older inputs with reduced opacity\n * - Shows action name and key pressed\n * - Responsive mobile layout\n * - Korean cyberpunk styling via theme\n * - Automatically clears after 2 seconds\n * \n * @example\n * ```tsx\n * <InputBufferDisplay\n *   queuedInputs={queuedInputs}\n *   isMobile={isMobile}\n * />\n * ```\n * \n * @public\n * @korean 입력버퍼표시\n */\nexport const InputBufferDisplay: React.FC<InputBufferDisplayProps> = ({\n  queuedInputs,\n  isMobile = false,\n}) => {\n  const theme = useKoreanTheme({ variant: \"primary\", size: \"sm\", isMobile });\n  \n  // Memoize animation styles to prevent redefinition on every render\n  const animationStyles = useMemo(() => (\n    <style>\n      {`\n        @keyframes slideIn {\n          0% {\n            opacity: 0;\n            transform: translateX(10px);\n          }\n          100% {\n            opacity: 1;\n            transform: translateX(0);\n          }\n        }\n      `}\n    </style>\n  ), []);\n\n  if (queuedInputs.length === 0) return null;\n\n  const fontSize = isMobile ? 10 : 12;\n  const labelFontSize = isMobile ? 8 : 10;\n  const top = isMobile ? \"10px\" : \"20px\";\n  const right = isMobile ? \"10px\" : \"20px\";\n\n  return (\n    <Html fullscreen>\n      <div\n        data-testid=\"input-buffer-display\"\n        role=\"log\"\n        aria-live=\"polite\"\n        aria-label=\"Input queue\"\n        style={{\n          position: \"absolute\",\n          top,\n          right,\n          background: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.8),\n          border: `1px solid ${hexToRgbaString(theme.colors.ACCENT_BLUE, 0.6)}`,\n          borderRadius: \"4px\",\n          padding: isMobile ? \"4px\" : \"8px\",\n          minWidth: isMobile ? \"100px\" : \"150px\",\n          pointerEvents: \"none\",\n          zIndex: 998,\n          boxShadow: `0 0 10px ${hexToRgbaString(theme.colors.ACCENT_BLUE, 0.2)}`,\n        }}\n      >\n        {/* Title */}\n        <div\n          style={{\n            fontSize: `${labelFontSize}px`,\n            color: hexToRgbaString(theme.colors.ACCENT_BLUE, 0.9),\n            fontFamily: theme.fontFamily.KOREAN,\n            marginBottom: \"4px\",\n            fontWeight: \"bold\",\n            textTransform: \"uppercase\",\n          }}\n        >\n          Input Queue\n        </div>\n\n        {/* Input list */}\n        <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"2px\" }}>\n          {queuedInputs.map((input, index) => {\n            // Calculate opacity based on age (newer = more opaque)\n            const opacity = 1 - index * 0.3;\n\n            return (\n              <div\n                key={`${input.timestamp}-${input.key}`}\n                data-testid={`queued-input-${index}`}\n                style={{\n                  fontSize: `${fontSize}px`,\n                  color: hexToRgbaString(theme.colors.TEXT_PRIMARY, opacity),\n                  fontFamily: theme.fontFamily.KOREAN,\n                  display: \"flex\",\n                  justifyContent: \"space-between\",\n                  alignItems: \"center\",\n                  gap: \"8px\",\n                  animation: index === 0 ? \"slideIn 0.2s ease-out\" : \"none\",\n                }}\n              >\n                {/* Action name */}\n                <span\n                  style={{\n                    flex: 1,\n                    overflow: \"hidden\",\n                    textOverflow: \"ellipsis\",\n                    whiteSpace: \"nowrap\",\n                  }}\n                >\n                  {input.action}\n                </span>\n\n                {/* Key badge */}\n                <span\n                  style={{\n                    padding: \"2px 4px\",\n                    background: hexToRgbaString(\n                      theme.colors.ACCENT_BLUE,\n                      0.2 * opacity\n                    ),\n                    border: `1px solid ${hexToRgbaString(theme.colors.ACCENT_BLUE, 0.5 * opacity)}`,\n                    borderRadius: \"2px\",\n                    fontSize: `${fontSize - 2}px`,\n                    fontWeight: \"bold\",\n                    minWidth: isMobile ? \"20px\" : \"24px\",\n                    textAlign: \"center\",\n                  }}\n                >\n                  {input.key.toUpperCase()}\n                </span>\n              </div>\n            );\n          })}\n        </div>\n\n        {/* CSS Animation - Memoized to prevent redefinition */}\n        {animationStyles}\n      </div>\n    </Html>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDA,IAAa,sBAAyD,EACpE,cACA,WAAW,YACP;CACJ,MAAM,QAAQ,eAAe;EAAE,SAAS;EAAW,MAAM;EAAM;EAAU,CAAC;CAG1E,MAAM,kBAAkB,cACtB,oBAAC,SAAD,EAAA,UACG;;;;;;;;;;;SAYK,CAAA,EACP,EAAE,CAAC;AAEN,KAAI,aAAa,WAAW,EAAG,QAAO;CAEtC,MAAM,WAAW,WAAW,KAAK;CACjC,MAAM,gBAAgB,WAAW,IAAI;CACrC,MAAM,MAAM,WAAW,SAAS;CAChC,MAAM,QAAQ,WAAW,SAAS;AAElC,QACE,oBAAC,MAAD;EAAM,YAAA;YACJ,qBAAC,OAAD;GACE,eAAY;GACZ,MAAK;GACL,aAAU;GACV,cAAW;GACX,OAAO;IACL,UAAU;IACV;IACA;IACA,YAAY,gBAAgB,MAAM,OAAO,oBAAoB,GAAI;IACjE,QAAQ,aAAa,gBAAgB,MAAM,OAAO,aAAa,GAAI;IACnE,cAAc;IACd,SAAS,WAAW,QAAQ;IAC5B,UAAU,WAAW,UAAU;IAC/B,eAAe;IACf,QAAQ;IACR,WAAW,YAAY,gBAAgB,MAAM,OAAO,aAAa,GAAI;IACtE;aAjBH;IAoBE,oBAAC,OAAD;KACE,OAAO;MACL,UAAU,GAAG,cAAc;MAC3B,OAAO,gBAAgB,MAAM,OAAO,aAAa,GAAI;MACrD,YAAY,MAAM,WAAW;MAC7B,cAAc;MACd,YAAY;MACZ,eAAe;MAChB;eACF;KAEK,CAAA;IAGN,oBAAC,OAAD;KAAK,OAAO;MAAE,SAAS;MAAQ,eAAe;MAAU,KAAK;MAAO;eACjE,aAAa,KAAK,OAAO,UAAU;MAElC,MAAM,UAAU,IAAI,QAAQ;AAE5B,aACE,qBAAC,OAAD;OAEE,eAAa,gBAAgB;OAC7B,OAAO;QACL,UAAU,GAAG,SAAS;QACtB,OAAO,gBAAgB,MAAM,OAAO,cAAc,QAAQ;QAC1D,YAAY,MAAM,WAAW;QAC7B,SAAS;QACT,gBAAgB;QAChB,YAAY;QACZ,KAAK;QACL,WAAW,UAAU,IAAI,0BAA0B;QACpD;iBAZH,CAeE,oBAAC,QAAD;QACE,OAAO;SACL,MAAM;SACN,UAAU;SACV,cAAc;SACd,YAAY;SACb;kBAEA,MAAM;QACF,CAAA,EAGP,oBAAC,QAAD;QACE,OAAO;SACL,SAAS;SACT,YAAY,gBACV,MAAM,OAAO,aACb,KAAM,QACP;SACD,QAAQ,aAAa,gBAAgB,MAAM,OAAO,aAAa,KAAM,QAAQ;SAC7E,cAAc;SACd,UAAU,GAAG,WAAW,EAAE;SAC1B,YAAY;SACZ,UAAU,WAAW,SAAS;SAC9B,WAAW;SACZ;kBAEA,MAAM,IAAI,aAAa;QACnB,CAAA,CACH;SA3CC,GAAG,MAAM,UAAU,GAAG,MAAM,MA2C7B;OAER;KACE,CAAA;IAGL;IACG;;EACD,CAAA"}

package/lib/components/screens/combat/components/indicators/StaminaWarning.d.ts

@@ -0,0 +1,44 @@
+/**
+ * StaminaWarning Component - Visual warning for low stamina
+ *
+ * Displays a yellow flashing indicator when stamina drops below critical threshold (20%).
+ * Uses CSS animation for attention-grabbing flash effect.
+ *
+ * NOTE: This component is rendered OUTSIDE the Canvas as part of the HTML overlay.
+ * It does NOT use Html from drei - it's a standard React component.
+ *
+ * Refactored to use useKoreanTheme for consistent styling.
+ *
+ * @module components/combat/StaminaWarning
+ * @category Combat UI
+ * @korean 체력경고
+ */
+import React from "react";
+export interface StaminaWarningProps {
+    /**
+     * Current stamina amount (0-100)
+     * @korean 체력량
+     */
+    readonly stamina: number;
+    /**
+     * Mobile responsive mode (reduced flash intensity)
+     * @korean 모바일여부
+     */
+    readonly isMobile: boolean;
+}
+/**
+ * StaminaWarning - Yellow flash warning for critical stamina depletion
+ *
+ * Renders a fullscreen flashing yellow border when stamina drops below 20%.
+ * Only visible when stamina is below 20. If stamina is 20 or higher, the component does not render.
+ * Uses CSS keyframe animation for fast attention-grabbing flash at 60fps.
+ * Uses useKoreanTheme for consistent color scheme.
+ *
+ * @example
+ * ```tsx
+ * <StaminaWarning stamina={15} isMobile={false} /> // Renders warning
+ * <StaminaWarning stamina={25} isMobile={false} /> // Does not render
+ * ```
+ */
+export declare const StaminaWarning: React.FC<StaminaWarningProps>;
+//# sourceMappingURL=StaminaWarning.d.ts.map