blacktrigram 0.7.2

package/lib/components/screens/combat/components/feedback/RoundDisplayStatus.d.ts

@@ -0,0 +1,25 @@
+/**
+ * RoundDisplayStatus - Brief round status messages
+ *
+ * Displays quick status messages like "라운드 시작!", "전투!", "라운드 종료", "K.O.!"
+ * Rendered as a fullscreen overlay outside the Canvas.
+ *
+ * @korean 라운드 상태 표시 - 간단한 라운드 상태 메시지
+ */
+import React from "react";
+export type RoundDisplayStatus = "start" | "fight" | "end" | "ko" | null;
+export interface RoundDisplayStatusProps {
+    /** Current round status to display */
+    readonly status: RoundDisplayStatus;
+    /** Whether mobile layout is active */
+    readonly isMobile?: boolean;
+}
+/**
+ * RoundDisplayStatus Component
+ *
+ * Large centered text overlay showing brief round status messages.
+ * Auto-fades based on combatState.roundDisplayStatus timing.
+ */
+export declare const RoundDisplayStatus: React.FC<RoundDisplayStatusProps>;
+export default RoundDisplayStatus;
+//# sourceMappingURL=RoundDisplayStatus.d.ts.map

package/lib/components/screens/combat/components/feedback/RoundDisplayStatus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RoundDisplayStatus.d.ts","sourceRoot":"","sources":["../../../../../../src/components/screens/combat/components/feedback/RoundDisplayStatus.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,OAAO,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzE,MAAM,WAAW,uBAAuB;IACtC,sCAAsC;IACtC,QAAQ,CAAC,MAAM,EAAE,kBAAkB,CAAC;IACpC,sCAAsC;IACtC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAyDhE,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/lib/components/screens/combat/components/feedback/RoundDisplayStatus.js

@@ -0,0 +1,61 @@
+import { Z_INDEX } from "../../../../../types/LayoutTypes.js";
+import { hexToRgbaString } from "../../../../../utils/colorUtils.js";
+import { useKoreanTheme } from "../../../../shared/base/useKoreanTheme.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/screens/combat/components/feedback/RoundDisplayStatus.tsx
+/**
+* RoundDisplayStatus Component
+* 
+* Large centered text overlay showing brief round status messages.
+* Auto-fades based on combatState.roundDisplayStatus timing.
+*/
+var RoundDisplayStatus = ({ status, isMobile = false }) => {
+	const theme = useKoreanTheme({
+		variant: "primary",
+		size: "md",
+		isMobile
+	});
+	if (!status) return null;
+	const statusMessages = {
+		start: "라운드 시작!",
+		fight: "전투!",
+		end: "라운드 종료",
+		ko: "K.O.!"
+	};
+	const fontSize = isMobile ? "48px" : "72px";
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			position: "absolute",
+			top: 0,
+			left: 0,
+			width: "100%",
+			height: "100%",
+			display: "flex",
+			justifyContent: "center",
+			alignItems: "center",
+			pointerEvents: "none",
+			zIndex: Z_INDEX.MODAL
+		},
+		"data-testid": "round-display-status",
+		children: /* @__PURE__ */ jsx("div", {
+			style: {
+				fontSize,
+				fontWeight: "bold",
+				fontFamily: theme.koreanTypography.fontFamily,
+				lineHeight: theme.koreanTypography.lineHeight,
+				letterSpacing: theme.koreanTypography.letterSpacing,
+				wordBreak: theme.koreanTypography.wordBreak,
+				textAlign: "center",
+				color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),
+				textShadow: "0 0 20px rgba(255, 215, 0, 0.8)"
+			},
+			"data-testid": `round-display-status-${status}`,
+			children: statusMessages[status]
+		})
+	});
+};
+//#endregion
+export { RoundDisplayStatus as default };
+
+//# sourceMappingURL=RoundDisplayStatus.js.map

package/lib/components/screens/combat/components/feedback/RoundDisplayStatus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RoundDisplayStatus.js","names":[],"sources":["../../../../../../src/components/screens/combat/components/feedback/RoundDisplayStatus.tsx"],"sourcesContent":["/**\n * RoundDisplayStatus - Brief round status messages\n * \n * Displays quick status messages like \"라운드 시작!\", \"전투!\", \"라운드 종료\", \"K.O.!\"\n * Rendered as a fullscreen overlay outside the Canvas.\n * \n * @korean 라운드 상태 표시 - 간단한 라운드 상태 메시지\n */\n\nimport React from \"react\";\nimport { Z_INDEX } from \"../../../../../types/LayoutTypes\";\nimport { hexToRgbaString } from \"../../../../../utils/colorUtils\";\nimport { useKoreanTheme } from \"../../../../shared/base/useKoreanTheme\";\n\nexport type RoundDisplayStatus = \"start\" | \"fight\" | \"end\" | \"ko\" | null;\n\nexport interface RoundDisplayStatusProps {\n  /** Current round status to display */\n  readonly status: RoundDisplayStatus;\n  /** Whether mobile layout is active */\n  readonly isMobile?: boolean;\n}\n\n/**\n * RoundDisplayStatus Component\n * \n * Large centered text overlay showing brief round status messages.\n * Auto-fades based on combatState.roundDisplayStatus timing.\n */\nexport const RoundDisplayStatus: React.FC<RoundDisplayStatusProps> = ({\n  status,\n  isMobile = false,\n}) => {\n  const theme = useKoreanTheme({\n    variant: \"primary\",\n    size: \"md\",\n    isMobile,\n  });\n\n  if (!status) {\n    return null;\n  }\n\n  const statusMessages: Record<Exclude<RoundDisplayStatus, null>, string> = {\n    start: \"라운드 시작!\",\n    fight: \"전투!\",\n    end: \"라운드 종료\",\n    ko: \"K.O.!\",\n  };\n\n  const fontSize = isMobile ? \"48px\" : \"72px\";\n\n  return (\n    <div\n      style={{\n        position: \"absolute\",\n        top: 0,\n        left: 0,\n        width: \"100%\",\n        height: \"100%\",\n        display: \"flex\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n        pointerEvents: \"none\",\n        zIndex: Z_INDEX.MODAL,\n      }}\n      data-testid=\"round-display-status\"\n    >\n      <div\n        style={{\n          fontSize,\n          fontWeight: \"bold\",\n          fontFamily: theme.koreanTypography.fontFamily,\n          lineHeight: theme.koreanTypography.lineHeight,\n          letterSpacing: theme.koreanTypography.letterSpacing,\n          wordBreak: theme.koreanTypography.wordBreak,\n          textAlign: \"center\",\n          color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),\n          textShadow: \"0 0 20px rgba(255, 215, 0, 0.8)\",\n        }}\n        data-testid={`round-display-status-${status}`}\n      >\n        {statusMessages[status]}\n      </div>\n    </div>\n  );\n};\n\nexport default RoundDisplayStatus;\n"],"mappings":";;;;;;;;;;;;AA6BA,IAAa,sBAAyD,EACpE,QACA,WAAW,YACP;CACJ,MAAM,QAAQ,eAAe;EAC3B,SAAS;EACT,MAAM;EACN;EACD,CAAC;AAEF,KAAI,CAAC,OACH,QAAO;CAGT,MAAM,iBAAoE;EACxE,OAAO;EACP,OAAO;EACP,KAAK;EACL,IAAI;EACL;CAED,MAAM,WAAW,WAAW,SAAS;AAErC,QACE,oBAAC,OAAD;EACE,OAAO;GACL,UAAU;GACV,KAAK;GACL,MAAM;GACN,OAAO;GACP,QAAQ;GACR,SAAS;GACT,gBAAgB;GAChB,YAAY;GACZ,eAAe;GACf,QAAQ,QAAQ;GACjB;EACD,eAAY;YAEZ,oBAAC,OAAD;GACE,OAAO;IACL;IACA,YAAY;IACZ,YAAY,MAAM,iBAAiB;IACnC,YAAY,MAAM,iBAAiB;IACnC,eAAe,MAAM,iBAAiB;IACtC,WAAW,MAAM,iBAAiB;IAClC,WAAW;IACX,OAAO,gBAAgB,MAAM,OAAO,aAAa,EAAE;IACnD,YAAY;IACb;GACD,eAAa,wBAAwB;aAEpC,eAAe;GACZ,CAAA;EACF,CAAA"}

package/lib/components/screens/combat/components/feedback/RoundStartAnnouncementOverlayHtml.d.ts

@@ -0,0 +1,43 @@
+/**
+ * RoundStartAnnouncement Component - Displays "Round X Begin!" announcement
+ *
+ * Korean: 라운드 시작 발표 (Round Start Announcement)
+ *
+ * Shows "Round X Begin!" for subsequent rounds (not the first round).
+ * Implements Korean cyberpunk aesthetic with bilingual text support.
+ *
+ * Refactored to use useKoreanTheme hook for consistent styling.
+ *
+ * @module components/combat/RoundStartAnnouncement
+ * @category Combat UI
+ */
+import React from "react";
+/**
+ * Props for the RoundStartAnnouncement component
+ */
+export interface RoundStartAnnouncementProps {
+    /** Round number (1-based) */
+    readonly roundNumber: number;
+    /** Duration to display announcement in seconds */
+    readonly duration?: number;
+    /** Callback when announcement completes */
+    readonly onComplete: () => void;
+    /** Whether layout should adapt for mobile screens */
+    readonly isMobile: boolean;
+}
+/**
+ * RoundStartAnnouncement Component
+ *
+ * Displays "Round X Begin!" announcement with:
+ * - Bilingual round number and "Begin!" text
+ * - Flash/pulse animation for impact
+ * - Auto-dismiss after configured duration
+ * - Audio cue for round start
+ * - Responsive sizing for mobile/tablet/desktop
+ * - Uses useKoreanTheme for consistent styling
+ *
+ * Korean: 라운드 시작 발표 컴포넌트
+ */
+export declare const RoundStartAnnouncement: React.FC<RoundStartAnnouncementProps>;
+export default RoundStartAnnouncement;
+//# sourceMappingURL=RoundStartAnnouncementOverlayHtml.d.ts.map

package/lib/components/screens/combat/components/feedback/RoundStartAnnouncementOverlayHtml.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RoundStartAnnouncementOverlayHtml.d.ts","sourceRoot":"","sources":["../../../../../../src/components/screens/combat/components/feedback/RoundStartAnnouncementOverlayHtml.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAMN,MAAM,OAAO,CAAC;AAKf;;GAEG;AACH,MAAM,WAAW,2BAA2B;IAC1C,6BAA6B;IAC7B,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,kDAAkD;IAClD,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,2CAA2C;IAC3C,QAAQ,CAAC,UAAU,EAAE,MAAM,IAAI,CAAC;IAChC,qDAAqD;IACrD,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;CAC5B;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAsIxE,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/lib/components/screens/combat/components/feedback/RoundStartAnnouncementOverlayHtml.js

@@ -0,0 +1,139 @@
+import { useAudio } from "../../../../../audio/AudioProvider.js";
+import { hexColorToCSS } from "../../../../../utils/colorUtils.js";
+import { useKoreanTheme } from "../../../../shared/base/useKoreanTheme.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/screens/combat/components/feedback/RoundStartAnnouncementOverlayHtml.tsx
+/**
+* RoundStartAnnouncement Component - Displays "Round X Begin!" announcement
+*
+* Korean: 라운드 시작 발표 (Round Start Announcement)
+*
+* Shows "Round X Begin!" for subsequent rounds (not the first round).
+* Implements Korean cyberpunk aesthetic with bilingual text support.
+*
+* Refactored to use useKoreanTheme hook for consistent styling.
+*
+* @module components/combat/RoundStartAnnouncement
+* @category Combat UI
+*/
+/**
+* RoundStartAnnouncement Component
+*
+* Displays "Round X Begin!" announcement with:
+* - Bilingual round number and "Begin!" text
+* - Flash/pulse animation for impact
+* - Auto-dismiss after configured duration
+* - Audio cue for round start
+* - Responsive sizing for mobile/tablet/desktop
+* - Uses useKoreanTheme for consistent styling
+*
+* Korean: 라운드 시작 발표 컴포넌트
+*/
+var RoundStartAnnouncement = ({ roundNumber, duration = 2, onComplete, isMobile }) => {
+	const audio = useAudio();
+	const theme = useKoreanTheme({
+		variant: "primary",
+		size: "xlarge",
+		isMobile
+	});
+	const [isVisible, setIsVisible] = useState(false);
+	const onCompleteRef = useRef(onComplete);
+	useEffect(() => {
+		onCompleteRef.current = onComplete;
+	}, [onComplete]);
+	const handleComplete = useCallback(() => {
+		onCompleteRef.current();
+	}, []);
+	useEffect(() => {
+		const timer = setTimeout(() => setIsVisible(true), 50);
+		return () => clearTimeout(timer);
+	}, []);
+	useEffect(() => {
+		if (audio.isAudioReady) audio.playSFX("attack_medium");
+	}, [audio]);
+	useEffect(() => {
+		let isMounted = true;
+		let innerTimer = null;
+		const outerTimer = setTimeout(() => {
+			setIsVisible(false);
+			innerTimer = setTimeout(() => {
+				if (isMounted) handleComplete();
+			}, 300);
+		}, duration * 1e3);
+		return () => {
+			isMounted = false;
+			clearTimeout(outerTimer);
+			if (innerTimer) clearTimeout(innerTimer);
+		};
+	}, [duration, handleComplete]);
+	const goldColor = useMemo(() => hexColorToCSS(theme.colors.ACCENT_GOLD), [theme.colors.ACCENT_GOLD]);
+	const darkBg = useMemo(() => hexColorToCSS(theme.colors.UI_BACKGROUND_DARK), [theme.colors.UI_BACKGROUND_DARK]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		"data-testid": "round-start-announcement",
+		role: "alert",
+		"aria-live": "assertive",
+		"aria-label": `Round ${roundNumber} starting`,
+		style: {
+			position: "fixed",
+			top: 0,
+			left: 0,
+			width: "100%",
+			height: "100%",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			backgroundColor: `${darkBg}88`,
+			zIndex: 900,
+			opacity: isVisible ? 1 : 0,
+			transition: "opacity 0.3s ease-in-out",
+			pointerEvents: "none"
+		},
+		children: /* @__PURE__ */ jsxs("div", {
+			style: {
+				fontSize: isMobile ? "56px" : "96px",
+				fontWeight: "bold",
+				color: goldColor,
+				fontFamily: theme.fontFamily.KOREAN,
+				textShadow: `0 0 40px ${goldColor}`,
+				animation: "roundStartFlash 0.5s ease-out",
+				textAlign: "center",
+				userSelect: "none"
+			},
+			"data-testid": "round-start-text",
+			children: [
+				"라운드 ",
+				roundNumber,
+				" 시작!",
+				/* @__PURE__ */ jsx("br", {}),
+				/* @__PURE__ */ jsxs("span", {
+					style: { fontSize: isMobile ? "40px" : "64px" },
+					children: [
+						"Round ",
+						roundNumber,
+						" Begin!"
+					]
+				})
+			]
+		})
+	}), /* @__PURE__ */ jsx("style", { children: `
+          @keyframes roundStartFlash {
+            0% {
+              opacity: 0;
+              transform: scale(1.5);
+            }
+            30% {
+              opacity: 1;
+              transform: scale(1.2);
+            }
+            100% {
+              opacity: 1;
+              transform: scale(1);
+            }
+          }
+        ` })] });
+};
+//#endregion
+export { RoundStartAnnouncement as default };
+
+//# sourceMappingURL=RoundStartAnnouncementOverlayHtml.js.map

package/lib/components/screens/combat/components/feedback/RoundStartAnnouncementOverlayHtml.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RoundStartAnnouncementOverlayHtml.js","names":[],"sources":["../../../../../../src/components/screens/combat/components/feedback/RoundStartAnnouncementOverlayHtml.tsx"],"sourcesContent":["/**\n * RoundStartAnnouncement Component - Displays \"Round X Begin!\" announcement\n *\n * Korean: 라운드 시작 발표 (Round Start Announcement)\n *\n * Shows \"Round X Begin!\" for subsequent rounds (not the first round).\n * Implements Korean cyberpunk aesthetic with bilingual text support.\n *\n * Refactored to use useKoreanTheme hook for consistent styling.\n *\n * @module components/combat/RoundStartAnnouncement\n * @category Combat UI\n */\n\nimport React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useAudio } from \"../../../../../audio/AudioProvider\";\nimport { useKoreanTheme } from \"../../../../shared/base/useKoreanTheme\";\nimport { hexColorToCSS } from \"../../../../../utils/colorUtils\";\n\n/**\n * Props for the RoundStartAnnouncement component\n */\nexport interface RoundStartAnnouncementProps {\n  /** Round number (1-based) */\n  readonly roundNumber: number;\n  /** Duration to display announcement in seconds */\n  readonly duration?: number;\n  /** Callback when announcement completes */\n  readonly onComplete: () => void;\n  /** Whether layout should adapt for mobile screens */\n  readonly isMobile: boolean;\n}\n\n/**\n * RoundStartAnnouncement Component\n *\n * Displays \"Round X Begin!\" announcement with:\n * - Bilingual round number and \"Begin!\" text\n * - Flash/pulse animation for impact\n * - Auto-dismiss after configured duration\n * - Audio cue for round start\n * - Responsive sizing for mobile/tablet/desktop\n * - Uses useKoreanTheme for consistent styling\n *\n * Korean: 라운드 시작 발표 컴포넌트\n */\nexport const RoundStartAnnouncement: React.FC<RoundStartAnnouncementProps> = ({\n  roundNumber,\n  duration = 2,\n  onComplete,\n  isMobile,\n}) => {\n  const audio = useAudio();\n  const theme = useKoreanTheme({ variant: \"primary\", size: \"xlarge\", isMobile });\n  const [isVisible, setIsVisible] = useState(false);\n\n  // Use ref to stabilize onComplete callback - prevents timer reset on re-renders\n  // This is critical because parent component may recreate onComplete due to state changes\n  const onCompleteRef = useRef(onComplete);\n  useEffect(() => {\n    onCompleteRef.current = onComplete;\n  }, [onComplete]);\n\n  // Stable callback that reads from ref\n  const handleComplete = useCallback(() => {\n    onCompleteRef.current();\n  }, []);\n\n  // Fade in animation on mount\n  useEffect(() => {\n    const timer = setTimeout(() => setIsVisible(true), 50);\n    return () => clearTimeout(timer);\n  }, []);\n\n  // Play audio cue on mount\n  useEffect(() => {\n    if (audio.isAudioReady) {\n      audio.playSFX(\"attack_medium\"); // Using placeholder - will be round_start\n    }\n  }, [audio]);\n\n  // Auto-dismiss after duration - uses stable handleComplete to prevent timer resets\n  useEffect(() => {\n    let isMounted = true;\n    let innerTimer: ReturnType<typeof setTimeout> | null = null;\n\n    const outerTimer = setTimeout(() => {\n      setIsVisible(false);\n      innerTimer = setTimeout(() => {\n        if (isMounted) {\n          handleComplete();\n        }\n      }, 300); // Wait for fade out\n    }, duration * 1000);\n\n    return () => {\n      isMounted = false;\n      clearTimeout(outerTimer);\n      if (innerTimer) {\n        clearTimeout(innerTimer);\n      }\n    };\n  }, [duration, handleComplete]);\n\n  // Convert hex colors to CSS - memoized for performance using theme\n  const goldColor = useMemo(() => hexColorToCSS(theme.colors.ACCENT_GOLD), [theme.colors.ACCENT_GOLD]);\n  const darkBg = useMemo(\n    () => hexColorToCSS(theme.colors.UI_BACKGROUND_DARK),\n    [theme.colors.UI_BACKGROUND_DARK]\n  );\n\n  return (\n    <>\n      <div\n        data-testid=\"round-start-announcement\"\n        role=\"alert\"\n        aria-live=\"assertive\"\n        aria-label={`Round ${roundNumber} starting`}\n        style={{\n          position: \"fixed\",\n          top: 0,\n          left: 0,\n          width: \"100%\",\n          height: \"100%\",\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          backgroundColor: `${darkBg}88`,\n          zIndex: 900,\n          opacity: isVisible ? 1 : 0,\n          transition: \"opacity 0.3s ease-in-out\",\n          pointerEvents: \"none\",\n        }}\n      >\n        <div\n          style={{\n            fontSize: isMobile ? \"56px\" : \"96px\",\n            fontWeight: \"bold\",\n            color: goldColor,\n            fontFamily: theme.fontFamily.KOREAN,\n            textShadow: `0 0 40px ${goldColor}`,\n            animation: \"roundStartFlash 0.5s ease-out\",\n            textAlign: \"center\",\n            userSelect: \"none\",\n          }}\n          data-testid=\"round-start-text\"\n        >\n          라운드 {roundNumber} 시작!\n          <br />\n          <span\n            style={{\n              fontSize: isMobile ? \"40px\" : \"64px\",\n            }}\n          >\n            Round {roundNumber} Begin!\n          </span>\n        </div>\n      </div>\n\n      {/* CSS Animation */}\n      <style>\n        {`\n          @keyframes roundStartFlash {\n            0% {\n              opacity: 0;\n              transform: scale(1.5);\n            }\n            30% {\n              opacity: 1;\n              transform: scale(1.2);\n            }\n            100% {\n              opacity: 1;\n              transform: scale(1);\n            }\n          }\n        `}\n      </style>\n    </>\n  );\n};\n\nexport default RoundStartAnnouncement;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDA,IAAa,0BAAiE,EAC5E,aACA,WAAW,GACX,YACA,eACI;CACJ,MAAM,QAAQ,UAAU;CACxB,MAAM,QAAQ,eAAe;EAAE,SAAS;EAAW,MAAM;EAAU;EAAU,CAAC;CAC9E,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;CAIjD,MAAM,gBAAgB,OAAO,WAAW;AACxC,iBAAgB;AACd,gBAAc,UAAU;IACvB,CAAC,WAAW,CAAC;CAGhB,MAAM,iBAAiB,kBAAkB;AACvC,gBAAc,SAAS;IACtB,EAAE,CAAC;AAGN,iBAAgB;EACd,MAAM,QAAQ,iBAAiB,aAAa,KAAK,EAAE,GAAG;AACtD,eAAa,aAAa,MAAM;IAC/B,EAAE,CAAC;AAGN,iBAAgB;AACd,MAAI,MAAM,aACR,OAAM,QAAQ,gBAAgB;IAE/B,CAAC,MAAM,CAAC;AAGX,iBAAgB;EACd,IAAI,YAAY;EAChB,IAAI,aAAmD;EAEvD,MAAM,aAAa,iBAAiB;AAClC,gBAAa,MAAM;AACnB,gBAAa,iBAAiB;AAC5B,QAAI,UACF,iBAAgB;MAEjB,IAAI;KACN,WAAW,IAAK;AAEnB,eAAa;AACX,eAAY;AACZ,gBAAa,WAAW;AACxB,OAAI,WACF,cAAa,WAAW;;IAG3B,CAAC,UAAU,eAAe,CAAC;CAG9B,MAAM,YAAY,cAAc,cAAc,MAAM,OAAO,YAAY,EAAE,CAAC,MAAM,OAAO,YAAY,CAAC;CACpG,MAAM,SAAS,cACP,cAAc,MAAM,OAAO,mBAAmB,EACpD,CAAC,MAAM,OAAO,mBAAmB,CAClC;AAED,QACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD;EACE,eAAY;EACZ,MAAK;EACL,aAAU;EACV,cAAY,SAAS,YAAY;EACjC,OAAO;GACL,UAAU;GACV,KAAK;GACL,MAAM;GACN,OAAO;GACP,QAAQ;GACR,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,iBAAiB,GAAG,OAAO;GAC3B,QAAQ;GACR,SAAS,YAAY,IAAI;GACzB,YAAY;GACZ,eAAe;GAChB;YAED,qBAAC,OAAD;GACE,OAAO;IACL,UAAU,WAAW,SAAS;IAC9B,YAAY;IACZ,OAAO;IACP,YAAY,MAAM,WAAW;IAC7B,YAAY,YAAY;IACxB,WAAW;IACX,WAAW;IACX,YAAY;IACb;GACD,eAAY;aAXd;IAYC;IACM;IAAY;IACjB,oBAAC,MAAD,EAAM,CAAA;IACN,qBAAC,QAAD;KACE,OAAO,EACL,UAAU,WAAW,SAAS,QAC/B;eAHH;MAIC;MACQ;MAAY;MACd;;IACH;;EACF,CAAA,EAGN,oBAAC,SAAD,EAAA,UACG;;;;;;;;;;;;;;;WAgBK,CAAA,CACP,EAAA,CAAA"}

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

@@ -0,0 +1,50 @@
+/**
+ * CombatBottomHUD - Bottom bar for combat screen
+ *
+ * Contains:
+ * - Technique Bar (centered)
+ * - Volume Control (bottom-right, compact)
+ * - Combat Messages (above technique bar)
+ *
+ * Gaming Layout Best Practice:
+ * - Width: 100% of screen
+ * - Height: Resolution-based ~10% of screen height (40-120px range)
+ *
+ * @korean 전투화면 하단 바 - 기술 바, 음량, 전투 메시지
+ */
+import React from "react";
+import { PlayerState } from "../../../../../systems";
+import { Technique } from "../../../../../types";
+export interface CombatBottomHUDProps {
+    /** Screen width for layout calculations */
+    readonly width: number;
+    /** Screen height for layout calculations */
+    readonly height: number;
+    /** Whether mobile controls should be shown (NOT for sizing) */
+    readonly isMobile?: boolean;
+    /** Position scale multiplier for large displays */
+    readonly positionScale: number;
+    /** Whether technique bar should be visible */
+    readonly visible: boolean;
+    /** Available techniques for the technique bar */
+    readonly techniques: readonly Technique[];
+    /** Player state for technique availability checks */
+    readonly player: PlayerState;
+    /** Currently selected technique index */
+    readonly selectedIndex: number;
+    /** Active technique cooldowns */
+    readonly cooldowns: Map<string, number>;
+    /** Handler for technique selection */
+    readonly onTechniqueSelect: (index: number) => void;
+    /** Combat messages to display */
+    readonly combatMessages?: readonly string[];
+}
+/**
+ * CombatBottomHUD Component
+ *
+ * Compact bottom bar with centered technique bar, volume control,
+ * and combat messages. Uses resolution-based sizing for all elements.
+ */
+export declare const CombatBottomHUD: React.FC<CombatBottomHUDProps>;
+export default CombatBottomHUD;
+//# sourceMappingURL=CombatBottomHUD.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CombatBottomHUD.d.ts","sourceRoot":"","sources":["../../../../../../src/components/screens/combat/components/hud/CombatBottomHUD.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAmBjD,MAAM,WAAW,oBAAoB;IACnC,2CAA2C;IAC3C,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,4CAA4C;IAC5C,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,+DAA+D;IAC/D,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,mDAAmD;IACnD,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,8CAA8C;IAC9C,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,iDAAiD;IACjD,QAAQ,CAAC,UAAU,EAAE,SAAS,SAAS,EAAE,CAAC;IAC1C,qDAAqD;IACrD,QAAQ,CAAC,MAAM,EAAE,WAAW,CAAC;IAC7B,yCAAyC;IACzC,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,iCAAiC;IACjC,QAAQ,CAAC,SAAS,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxC,sCAAsC;IACtC,QAAQ,CAAC,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,iCAAiC;IACjC,QAAQ,CAAC,cAAc,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CAC7C;AAED;;;;;GAKG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAkL1D,CAAC;AAEF,eAAe,eAAe,CAAC"}

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

@@ -0,0 +1,155 @@
+import { BORDERS, BORDER_RADIUS, COMBAT_UI_DIMENSIONS, COMBAT_UI_DIMENSIONS_NUMERIC, FONT_SIZE_MULTIPLIERS, GRADIENTS, HIERARCHY, HUD_STYLE, OPACITY, SPACING, SPACING_ADJUSTMENTS, TEXT_EFFECTS, TYPOGRAPHY, TYPOGRAPHY_NUMERIC } from "../../../../../types/constants/designSystem.js";
+import { Z_INDEX } from "../../../../../types/LayoutTypes.js";
+import { BREAKPOINTS, getHUDHeight, getResponsiveFontSize, getResponsivePadding, shouldShowMobileControls } from "../../../../../utils/responsiveLayout.js";
+import TechniqueBar from "../../../../shared/three/ui/TechniqueBar.js";
+import { VolumeControl } from "../../../../shared/ui/VolumeControl.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/screens/combat/components/hud/CombatBottomHUD.tsx
+/**
+* CombatBottomHUD - Bottom bar for combat screen
+*
+* Contains:
+* - Technique Bar (centered)
+* - Volume Control (bottom-right, compact)
+* - Combat Messages (above technique bar)
+*
+* Gaming Layout Best Practice:
+* - Width: 100% of screen
+* - Height: Resolution-based ~10% of screen height (40-120px range)
+*
+* @korean 전투화면 하단 바 - 기술 바, 음량, 전투 메시지
+*/
+/**
+* CombatBottomHUD Component
+*
+* Compact bottom bar with centered technique bar, volume control,
+* and combat messages. Uses resolution-based sizing for all elements.
+*/
+var CombatBottomHUD = ({ width, height, isMobile = false, positionScale, visible, techniques, player, selectedIndex, cooldowns, onTechniqueSelect, combatMessages = [] }) => {
+	const showMobileControls = shouldShowMobileControls(width, isMobile);
+	const layout = React.useMemo(() => {
+		const hudHeight = getHUDHeight(height, .1) * positionScale;
+		const padding = getResponsivePadding(width) * positionScale;
+		const baseFontSize = getResponsiveFontSize(width);
+		return {
+			hudHeight,
+			padding,
+			titleFontSize: Math.max(TYPOGRAPHY_NUMERIC.nano, baseFontSize * FONT_SIZE_MULTIPLIERS.titleSmall),
+			messageFontSize: Math.max(TYPOGRAPHY_NUMERIC.caption, baseFontSize * FONT_SIZE_MULTIPLIERS.messageSmall),
+			minMessageWidth: width < BREAKPOINTS.mobile ? COMBAT_UI_DIMENSIONS_NUMERIC.combatLogMinMobile : COMBAT_UI_DIMENSIONS_NUMERIC.combatLogMinDesktop,
+			maxMessageWidth: width < BREAKPOINTS.mobile ? width * COMBAT_UI_DIMENSIONS.combatLogMaxWidthPercentMobile : COMBAT_UI_DIMENSIONS_NUMERIC.combatLogMaxDesktop,
+			maxTechniqueBarWidth: width < BREAKPOINTS.mobile ? COMBAT_UI_DIMENSIONS.techniqueBarWidthMobile : COMBAT_UI_DIMENSIONS.techniqueBarWidthDesktop,
+			messagePadding: width < BREAKPOINTS.mobile ? `${SPACING_ADJUSTMENTS.compact} ${SPACING.sm}` : `${SPACING.xs} ${SPACING.md}`
+		};
+	}, [
+		width,
+		height,
+		positionScale
+	]);
+	const recentMessages = combatMessages.slice(-3);
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			position: "absolute",
+			bottom: 0,
+			left: 0,
+			width: "100%",
+			height: `${layout.hudHeight}px`,
+			display: "flex",
+			flexDirection: "column",
+			justifyContent: "flex-end",
+			alignItems: "center",
+			pointerEvents: "none",
+			padding: `${layout.padding}px`,
+			boxSizing: "border-box",
+			borderTop: BORDERS.default,
+			background: GRADIENTS.verticalReverse(.9),
+			backdropFilter: HUD_STYLE.backdropFilter
+		},
+		"data-testid": "combat-bottom-hud",
+		children: [
+			recentMessages.length > 0 && /* @__PURE__ */ jsxs("div", {
+				style: {
+					position: "absolute",
+					top: `${layout.padding}px`,
+					left: "50%",
+					transform: "translateX(-50%)",
+					display: "flex",
+					flexDirection: "column",
+					alignItems: "center",
+					gap: SPACING_ADJUSTMENTS.micro,
+					zIndex: Z_INDEX.HUD,
+					padding: layout.messagePadding,
+					background: HUD_STYLE.background,
+					border: BORDERS.muted,
+					borderRadius: BORDER_RADIUS.md,
+					boxShadow: HUD_STYLE.shadow,
+					minWidth: `${layout.minMessageWidth}px`,
+					maxWidth: typeof layout.maxMessageWidth === "number" ? `${layout.maxMessageWidth}px` : layout.maxMessageWidth
+				},
+				"data-testid": "combat-bottom-hud-messages",
+				children: [/* @__PURE__ */ jsx("div", {
+					style: {
+						fontSize: `${layout.titleFontSize}px`,
+						fontFamily: TYPOGRAPHY.caption.fontFamily,
+						color: HIERARCHY.accent70.color,
+						textTransform: "uppercase",
+						letterSpacing: "1px",
+						marginBottom: SPACING_ADJUSTMENTS.tiny
+					},
+					children: "전투 기록 | Combat Log"
+				}), recentMessages.map((message, index) => /* @__PURE__ */ jsx("div", {
+					style: {
+						fontSize: `${layout.messageFontSize}px`,
+						fontFamily: TYPOGRAPHY.bodySmall.fontFamily,
+						color: HIERARCHY.primary.color,
+						textShadow: TEXT_EFFECTS.darkShadow,
+						opacity: OPACITY.base + index * OPACITY.increment,
+						textAlign: "center"
+					},
+					children: message
+				}, index))]
+			}),
+			visible && /* @__PURE__ */ jsx("div", {
+				style: {
+					pointerEvents: "all",
+					display: "flex",
+					justifyContent: "center",
+					alignItems: "center",
+					width: "100%",
+					maxWidth: layout.maxTechniqueBarWidth
+				},
+				"data-testid": "combat-bottom-hud-technique-section",
+				children: /* @__PURE__ */ jsx(TechniqueBar, {
+					techniques,
+					player,
+					selectedIndex,
+					cooldowns,
+					onTechniqueSelect,
+					onTechniqueHover: (_tech) => {},
+					isMobile: showMobileControls,
+					screenWidth: width,
+					screenHeight: height,
+					embedded: true
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				style: {
+					position: "absolute",
+					right: `${layout.padding * 1.5}px`,
+					bottom: `${layout.padding}px`,
+					pointerEvents: "all"
+				},
+				"data-testid": "combat-bottom-hud-volume-section",
+				children: /* @__PURE__ */ jsx(VolumeControl, {
+					position: "bottom-right",
+					compact: true
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { CombatBottomHUD as default };
+
+//# sourceMappingURL=CombatBottomHUD.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CombatBottomHUD.js","names":[],"sources":["../../../../../../src/components/screens/combat/components/hud/CombatBottomHUD.tsx"],"sourcesContent":["/**\n * CombatBottomHUD - Bottom bar for combat screen\n *\n * Contains:\n * - Technique Bar (centered)\n * - Volume Control (bottom-right, compact)\n * - Combat Messages (above technique bar)\n *\n * Gaming Layout Best Practice:\n * - Width: 100% of screen\n * - Height: Resolution-based ~10% of screen height (40-120px range)\n *\n * @korean 전투화면 하단 바 - 기술 바, 음량, 전투 메시지\n */\n\nimport React from \"react\";\nimport { PlayerState } from \"../../../../../systems\";\nimport { Technique } from \"../../../../../types\";\nimport { Z_INDEX } from \"../../../../../types/LayoutTypes\";\nimport { SPACING, SPACING_ADJUSTMENTS, BORDER_RADIUS, TYPOGRAPHY, TYPOGRAPHY_NUMERIC, HIERARCHY, BORDERS, GRADIENTS, HUD_STYLE ,\n  OPACITY,\n  COMBAT_UI_DIMENSIONS,\n  COMBAT_UI_DIMENSIONS_NUMERIC,\n  TEXT_EFFECTS,\n  FONT_SIZE_MULTIPLIERS,\n} from \"../../../../../types/constants/designSystem\";\nimport {\n  BREAKPOINTS,\n  getHUDHeight,\n  getResponsiveFontSize,\n  getResponsivePadding,\n  shouldShowMobileControls,\n} from \"../../../../../utils/responsiveLayout\";\nimport { TechniqueBar } from \"../../../../shared/three/ui/TechniqueBar\";\nimport { VolumeControl } from \"../../../../shared/ui/VolumeControl\";\n\nexport interface CombatBottomHUDProps {\n  /** Screen width for layout calculations */\n  readonly width: number;\n  /** Screen height for layout calculations */\n  readonly height: number;\n  /** Whether mobile controls should be shown (NOT for sizing) */\n  readonly isMobile?: boolean;\n  /** Position scale multiplier for large displays */\n  readonly positionScale: number;\n  /** Whether technique bar should be visible */\n  readonly visible: boolean;\n  /** Available techniques for the technique bar */\n  readonly techniques: readonly Technique[];\n  /** Player state for technique availability checks */\n  readonly player: PlayerState;\n  /** Currently selected technique index */\n  readonly selectedIndex: number;\n  /** Active technique cooldowns */\n  readonly cooldowns: Map<string, number>;\n  /** Handler for technique selection */\n  readonly onTechniqueSelect: (index: number) => void;\n  /** Combat messages to display */\n  readonly combatMessages?: readonly string[];\n}\n\n/**\n * CombatBottomHUD Component\n *\n * Compact bottom bar with centered technique bar, volume control,\n * and combat messages. Uses resolution-based sizing for all elements.\n */\nexport const CombatBottomHUD: React.FC<CombatBottomHUDProps> = ({\n  width,\n  height,\n  isMobile = false,\n  positionScale,\n  visible,\n  techniques,\n  player,\n  selectedIndex,\n  cooldowns,\n  onTechniqueSelect,\n  combatMessages = [],\n}) => {\n  // isMobile only used for mobile controls visibility\n  const showMobileControls = shouldShowMobileControls(width, isMobile);\n\n  const layout = React.useMemo(() => {\n    // Resolution-based HUD height (10% of screen height, 40-120px range)\n    const hudHeight = getHUDHeight(height, 0.1) * positionScale;\n    \n    // Resolution-based padding\n    const padding = getResponsivePadding(width) * positionScale;\n    \n    // Resolution-based font sizes (using design system as minimum)\n    const baseFontSize = getResponsiveFontSize(width);\n    const titleFontSize = Math.max(TYPOGRAPHY_NUMERIC.nano, baseFontSize * FONT_SIZE_MULTIPLIERS.titleSmall);\n    const messageFontSize = Math.max(TYPOGRAPHY_NUMERIC.caption, baseFontSize * FONT_SIZE_MULTIPLIERS.messageSmall);\n    \n    // Resolution-based widths (using design system constants as reference)\n    const minMessageWidth = width < BREAKPOINTS.mobile \n      ? COMBAT_UI_DIMENSIONS_NUMERIC.combatLogMinMobile\n      : COMBAT_UI_DIMENSIONS_NUMERIC.combatLogMinDesktop;\n    const maxMessageWidth = width < BREAKPOINTS.mobile \n      ? width * COMBAT_UI_DIMENSIONS.combatLogMaxWidthPercentMobile\n      : COMBAT_UI_DIMENSIONS_NUMERIC.combatLogMaxDesktop;\n    const maxTechniqueBarWidth = width < BREAKPOINTS.mobile \n      ? COMBAT_UI_DIMENSIONS.techniqueBarWidthMobile \n      : COMBAT_UI_DIMENSIONS.techniqueBarWidthDesktop;\n    \n    // Resolution-based message padding (using design system spacing)\n    const messagePadding = width < BREAKPOINTS.mobile \n      ? `${SPACING_ADJUSTMENTS.compact} ${SPACING.sm}` \n      : `${SPACING.xs} ${SPACING.md}`;\n\n\n    return {\n      hudHeight,\n      padding,\n      titleFontSize,\n      messageFontSize,\n      minMessageWidth,\n      maxMessageWidth,\n      maxTechniqueBarWidth,\n      messagePadding,\n    };\n  }, [width, height, positionScale]);\n\n  // Only show last 3 combat messages\n  const recentMessages = combatMessages.slice(-3);\n\n  return (\n    <div\n      style={{\n        position: \"absolute\",\n        bottom: 0,\n        left: 0,\n        width: \"100%\",\n        height: `${layout.hudHeight}px`,\n        display: \"flex\",\n        flexDirection: \"column\",\n        justifyContent: \"flex-end\",\n        alignItems: \"center\",\n        pointerEvents: \"none\",\n        padding: `${layout.padding}px`,\n        boxSizing: \"border-box\",\n        borderTop: BORDERS.default,\n        background: GRADIENTS.verticalReverse(0.9),\n        backdropFilter: HUD_STYLE.backdropFilter,\n      }}\n      data-testid=\"combat-bottom-hud\"\n    >\n      {/* Combat Messages - styled box above technique bar */}\n      {recentMessages.length > 0 && (\n        <div\n          style={{\n            position: \"absolute\",\n            top: `${layout.padding}px`,\n            left: \"50%\",\n            transform: \"translateX(-50%)\",\n            display: \"flex\",\n            flexDirection: \"column\",\n            alignItems: \"center\",\n            gap: SPACING_ADJUSTMENTS.micro,\n            zIndex: Z_INDEX.HUD,\n            padding: layout.messagePadding,\n            background: HUD_STYLE.background,\n            border: BORDERS.muted,\n            borderRadius: BORDER_RADIUS.md,\n            boxShadow: HUD_STYLE.shadow,\n            minWidth: `${layout.minMessageWidth}px`,\n            maxWidth: typeof layout.maxMessageWidth === 'number' \n              ? `${layout.maxMessageWidth}px` \n              : layout.maxMessageWidth,\n          }}\n          data-testid=\"combat-bottom-hud-messages\"\n        >\n          <div\n            style={{\n              fontSize: `${layout.titleFontSize}px`,\n              fontFamily: TYPOGRAPHY.caption.fontFamily,\n              color: HIERARCHY.accent70.color,\n              textTransform: \"uppercase\",\n              letterSpacing: \"1px\",\n              marginBottom: SPACING_ADJUSTMENTS.tiny,\n            }}\n          >\n            전투 기록 | Combat Log\n          </div>\n          {recentMessages.map((message, index) => (\n            <div\n              key={index}\n              style={{\n                fontSize: `${layout.messageFontSize}px`,\n                fontFamily: TYPOGRAPHY.bodySmall.fontFamily,\n                color: HIERARCHY.primary.color,\n                textShadow: TEXT_EFFECTS.darkShadow,\n                opacity: OPACITY.base + index * OPACITY.increment,\n                textAlign: \"center\",\n              }}\n            >\n              {message}\n            </div>\n          ))}\n        </div>\n      )}\n\n      {/* Technique Bar - centered, embedded mode for proper containment */}\n      {visible && (\n        <div\n          style={{\n            pointerEvents: \"all\",\n            display: \"flex\",\n            justifyContent: \"center\",\n            alignItems: \"center\",\n            width: \"100%\",\n            maxWidth: layout.maxTechniqueBarWidth,\n          }}\n          data-testid=\"combat-bottom-hud-technique-section\"\n        >\n          <TechniqueBar\n            techniques={techniques as Technique[]}\n            player={player}\n            selectedIndex={selectedIndex}\n            cooldowns={cooldowns}\n            onTechniqueSelect={onTechniqueSelect}\n            onTechniqueHover={(_tech) => {}}\n            isMobile={showMobileControls}\n            screenWidth={width}\n            screenHeight={height}\n            embedded={true}\n          />\n        </div>\n      )}\n\n      {/* Volume Control - bottom right corner */}\n      <div\n        style={{\n          position: \"absolute\",\n          right: `${layout.padding * 1.5}px`,\n          bottom: `${layout.padding}px`,\n          pointerEvents: \"all\",\n        }}\n        data-testid=\"combat-bottom-hud-volume-section\"\n      >\n        <VolumeControl position=\"bottom-right\" compact={true} />\n      </div>\n    </div>\n  );\n};\n\nexport default CombatBottomHUD;\n"],"mappings":"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"}

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

@@ -0,0 +1,54 @@
+/**
+ * CombatLeftHUD - Left side HUD for combat screen (Player 1)
+ *
+ * REUSES existing components:
+ * - PlayerHUD: Archetype image, name, health/stamina bars
+ * - SpeedIndicatorHUD: Movement speed percentage
+ * - BodyPartHealthDisplay: Individual body part health bars
+ * - GuardIndicator: Current stance guard status
+ *
+ * Gaming Layout Best Practice:
+ * - Width: Resolution-based 14-18% of screen
+ * - Height: 100% minus top/bottom HUD heights
+ * - Leaves approximately 64–72% center for arena depending on resolution (≈72% on desktop)
+ *
+ * Now uses shared HUD utilities with resolution-based sizing.
+ *
+ * @korean 전투화면 왼쪽 HUD - 플레이어 1 상태
+ */
+import React from "react";
+import { PlayerState } from "../../../../../systems";
+import type { StanceLaterality } from "../../../../../systems/trigram/types";
+export interface CombatLeftHUDProps {
+    /** Screen width for layout calculations */
+    readonly width: number;
+    /** Screen height for layout calculations */
+    readonly height: number;
+    /** Whether mobile layout is active */
+    readonly isMobile: boolean;
+    /** Position scale multiplier for large displays */
+    readonly positionScale: number;
+    /** Player 1 state */
+    readonly player: PlayerState;
+    /** Player laterality (left/right foot forward) */
+    readonly laterality: StanceLaterality;
+    /** Whether player is in guard stance */
+    readonly isInGuard: boolean;
+    /** Player speed modifiers */
+    readonly speedModifiers: {
+        finalSpeed: number;
+        baseSpeed: number;
+    };
+}
+/**
+ * CombatLeftHUD Component
+ *
+ * Left side of the combat screen containing Player 1's stats.
+ * Occupies approximately 14–18% of screen width based on resolution breakpoints/interpolation,
+ * positioned between the top and bottom HUDs.
+ * REUSES existing PlayerHUD, SpeedIndicatorHUD, BodyPartHealthDisplay components.
+ * Uses shared HUD utilities for consistent, resolution-based layout and styling.
+ */
+export declare const CombatLeftHUD: React.FC<CombatLeftHUDProps>;
+export default CombatLeftHUD;
+//# sourceMappingURL=CombatLeftHUD.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CombatLeftHUD.d.ts","sourceRoot":"","sources":["../../../../../../src/components/screens/combat/components/hud/CombatLeftHUD.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAQ7E,MAAM,WAAW,kBAAkB;IACjC,2CAA2C;IAC3C,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,4CAA4C;IAC5C,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,sCAAsC;IACtC,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,mDAAmD;IACnD,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,qBAAqB;IACrB,QAAQ,CAAC,MAAM,EAAE,WAAW,CAAC;IAC7B,kDAAkD;IAClD,QAAQ,CAAC,UAAU,EAAE,gBAAgB,CAAC;IACtC,wCAAwC;IACxC,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IAC5B,6BAA6B;IAC7B,QAAQ,CAAC,cAAc,EAAE;QACvB,UAAU,EAAE,MAAM,CAAC;QACnB,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;CACH;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAiHtD,CAAC;AAEF,eAAe,aAAa,CAAC"}