blacktrigram 0.7.2

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

@@ -0,0 +1,47 @@
+/**
+ * MenuList - Three.js-compatible menu list component
+ *
+ * Navigation menu with Korean theming and keyboard support
+ *
+ * @module components/three
+ */
+import React from "react";
+/**
+ * Menu item interface
+ */
+export interface MenuItem {
+    readonly id: string;
+    readonly korean: string;
+    readonly english: string;
+    readonly disabled?: boolean;
+}
+/**
+ * Props for MenuList component
+ */
+export interface MenuListProps {
+    readonly items: readonly MenuItem[];
+    readonly onSelect: (id: string) => void;
+    readonly selectedId?: string;
+    readonly position?: [number, number, number];
+    readonly width?: number;
+    readonly testId?: string;
+}
+/**
+ * MenuList Component
+ *
+ * A navigational menu component with Korean cyberpunk styling.
+ * Supports keyboard navigation and hover states.
+ *
+ * @example
+ * ```tsx
+ * <MenuList
+ *   items={[
+ *     { id: "combat", korean: "대전", english: "Combat" },
+ *     { id: "training", korean: "훈련", english: "Training" }
+ *   ]}
+ *   onSelect={(id) => console.log(id)}
+ * />
+ * ```
+ */
+export declare const MenuList: React.FC<MenuListProps>;
+//# sourceMappingURL=MenuList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuList.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/three/ui/MenuList.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAyC,MAAM,OAAO,CAAC;AAI9D;;GAEG;AACH,MAAM,WAAW,QAAQ;IACvB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,KAAK,EAAE,SAAS,QAAQ,EAAE,CAAC;IACpC,QAAQ,CAAC,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC7C,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAsH5C,CAAC"}

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

@@ -0,0 +1,123 @@
+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 { useCallback, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Html } from "@react-three/drei";
+//#region src/components/shared/three/ui/MenuList.tsx
+/**
+* MenuList - Three.js-compatible menu list component
+* 
+* Navigation menu with Korean theming and keyboard support
+* 
+* @module components/three
+*/
+/**
+* MenuList Component
+* 
+* A navigational menu component with Korean cyberpunk styling.
+* Supports keyboard navigation and hover states.
+* 
+* @example
+* ```tsx
+* <MenuList
+*   items={[
+*     { id: "combat", korean: "대전", english: "Combat" },
+*     { id: "training", korean: "훈련", english: "Training" }
+*   ]}
+*   onSelect={(id) => console.log(id)}
+* />
+* ```
+*/
+var MenuList = ({ items, onSelect, selectedId, position = [
+	0,
+	0,
+	0
+], width = 300, testId }) => {
+	const [hoveredId, setHoveredId] = useState(null);
+	const handleItemClick = useCallback((id, disabled) => {
+		if (!disabled) onSelect(id);
+	}, [onSelect]);
+	const handleMouseEnter = useCallback((id) => {
+		setHoveredId(id);
+	}, []);
+	const handleMouseLeave = useCallback(() => {
+		setHoveredId(null);
+	}, []);
+	const containerStyle = useMemo(() => ({
+		width: `${width}px`,
+		display: "flex",
+		flexDirection: "column",
+		gap: "8px",
+		padding: "12px",
+		background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, .9),
+		border: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, .6)}`,
+		borderRadius: "8px",
+		boxShadow: `0 0 15px ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, .3)}`
+	}), [width]);
+	const getItemStyle = useCallback((id, disabled) => {
+		const isSelected = selectedId === id;
+		const isHovered = hoveredId === id;
+		let background = hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, .5);
+		let borderColor = hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, .3);
+		if (isSelected) {
+			background = hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, .2);
+			borderColor = hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, .8);
+		} else if (isHovered && !disabled) {
+			background = hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, .15);
+			borderColor = hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, .6);
+		}
+		return {
+			padding: "12px 16px",
+			background,
+			border: `2px solid ${borderColor}`,
+			borderRadius: "4px",
+			cursor: disabled ? "not-allowed" : "pointer",
+			transition: "all 0.2s ease",
+			opacity: disabled ? .4 : 1,
+			userSelect: "none",
+			WebkitUserSelect: "none",
+			transform: isHovered && !disabled ? "translateX(4px)" : "translateX(0)"
+		};
+	}, [selectedId, hoveredId]);
+	const getTextStyle = useCallback((isKorean, isSelected) => ({
+		display: "block",
+		fontFamily: FONT_FAMILY.KOREAN,
+		fontSize: isKorean ? "16px" : "14px",
+		fontWeight: isKorean ? "bold" : "normal",
+		fontStyle: isKorean ? "normal" : "italic",
+		color: hexToRgbaString(isSelected ? KOREAN_COLORS.ACCENT_GOLD : KOREAN_COLORS.TEXT_PRIMARY),
+		textShadow: `0 2px 4px ${hexToRgbaString(KOREAN_COLORS.BLACK_SOLID, .5)}`
+	}), []);
+	return /* @__PURE__ */ jsx(Html, {
+		position,
+		center: true,
+		children: /* @__PURE__ */ jsx("div", {
+			style: containerStyle,
+			"data-testid": testId ?? "menu-list",
+			children: items.map((item) => {
+				const isSelected = selectedId === item.id;
+				return /* @__PURE__ */ jsxs("div", {
+					onClick: () => handleItemClick(item.id, item.disabled),
+					onMouseEnter: () => handleMouseEnter(item.id),
+					onMouseLeave: handleMouseLeave,
+					style: getItemStyle(item.id, item.disabled),
+					"data-testid": `menu-item-${item.id}`,
+					children: [/* @__PURE__ */ jsx("span", {
+						style: getTextStyle(true, isSelected),
+						children: item.korean
+					}), /* @__PURE__ */ jsx("span", {
+						style: getTextStyle(false, isSelected),
+						children: item.english
+					})]
+				}, item.id);
+			})
+		})
+	});
+};
+MenuList.displayName = "MenuList";
+//#endregion
+export { MenuList };
+
+//# sourceMappingURL=MenuList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuList.js","names":[],"sources":["../../../../../src/components/shared/three/ui/MenuList.tsx"],"sourcesContent":["/**\n * MenuList - Three.js-compatible menu list component\n * \n * Navigation menu with Korean theming and keyboard support\n * \n * @module components/three\n */\n\nimport { Html } from \"@react-three/drei\";\nimport React, { useCallback, useMemo, useState } from \"react\";\nimport { KOREAN_COLORS, FONT_FAMILY } from \"../../../../types/constants\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\n\n/**\n * Menu item interface\n */\nexport interface MenuItem {\n  readonly id: string;\n  readonly korean: string;\n  readonly english: string;\n  readonly disabled?: boolean;\n}\n\n/**\n * Props for MenuList component\n */\nexport interface MenuListProps {\n  readonly items: readonly MenuItem[];\n  readonly onSelect: (id: string) => void;\n  readonly selectedId?: string;\n  readonly position?: [number, number, number];\n  readonly width?: number;\n  readonly testId?: string;\n}\n\n/**\n * MenuList Component\n * \n * A navigational menu component with Korean cyberpunk styling.\n * Supports keyboard navigation and hover states.\n * \n * @example\n * ```tsx\n * <MenuList\n *   items={[\n *     { id: \"combat\", korean: \"대전\", english: \"Combat\" },\n *     { id: \"training\", korean: \"훈련\", english: \"Training\" }\n *   ]}\n *   onSelect={(id) => console.log(id)}\n * />\n * ```\n */\nexport const MenuList: React.FC<MenuListProps> = ({\n  items,\n  onSelect,\n  selectedId,\n  position = [0, 0, 0],\n  width = 300,\n  testId,\n}) => {\n  const [hoveredId, setHoveredId] = useState<string | null>(null);\n\n  const handleItemClick = useCallback(\n    (id: string, disabled?: boolean) => {\n      if (!disabled) {\n        onSelect(id);\n      }\n    },\n    [onSelect]\n  );\n\n  const handleMouseEnter = useCallback((id: string) => {\n    setHoveredId(id);\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    setHoveredId(null);\n  }, []);\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: \"8px\",\n      padding: \"12px\",\n      background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.9),\n      border: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.6)}`,\n      borderRadius: \"8px\",\n      boxShadow: `0 0 15px ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.3)}`,\n    }),\n    [width]\n  );\n\n  // Function to get item styles based on state\n  const getItemStyle = useCallback(\n    (id: string, disabled?: boolean): React.CSSProperties => {\n      const isSelected = selectedId === id;\n      const isHovered = hoveredId === id;\n\n      let background = hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, 0.5);\n      let borderColor = hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 0.3);\n\n      if (isSelected) {\n        background = hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.2);\n        borderColor = hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.8);\n      } else if (isHovered && !disabled) {\n        background = hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 0.15);\n        borderColor = hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 0.6);\n      }\n\n      return {\n        padding: \"12px 16px\",\n        background,\n        border: `2px solid ${borderColor}`,\n        borderRadius: \"4px\",\n        cursor: disabled ? \"not-allowed\" : \"pointer\",\n        transition: \"all 0.2s ease\",\n        opacity: disabled ? 0.4 : 1,\n        userSelect: \"none\",\n        WebkitUserSelect: \"none\",\n        transform: isHovered && !disabled ? \"translateX(4px)\" : \"translateX(0)\",\n      };\n    },\n    [selectedId, hoveredId]\n  );\n\n  // Memoize text styles for performance\n  const getTextStyle = useCallback(\n    (isKorean: boolean, isSelected: boolean): React.CSSProperties => ({\n      display: \"block\",\n      fontFamily: FONT_FAMILY.KOREAN,\n      fontSize: isKorean ? \"16px\" : \"14px\",\n      fontWeight: isKorean ? \"bold\" : \"normal\",\n      fontStyle: isKorean ? \"normal\" : \"italic\",\n      color: hexToRgbaString(\n        isSelected ? KOREAN_COLORS.ACCENT_GOLD : KOREAN_COLORS.TEXT_PRIMARY\n      ),\n      textShadow: `0 2px 4px ${hexToRgbaString(KOREAN_COLORS.BLACK_SOLID, 0.5)}`,\n    }),\n    []\n  );\n\n  return (\n    <Html position={position} center>\n      <div style={containerStyle} data-testid={testId ?? \"menu-list\"}>\n        {items.map((item) => {\n          const isSelected = selectedId === item.id;\n          return (\n            <div\n              key={item.id}\n              onClick={() => handleItemClick(item.id, item.disabled)}\n              onMouseEnter={() => handleMouseEnter(item.id)}\n              onMouseLeave={handleMouseLeave}\n              style={getItemStyle(item.id, item.disabled)}\n              data-testid={`menu-item-${item.id}`}\n            >\n              <span style={getTextStyle(true, isSelected)}>\n                {item.korean}\n              </span>\n              <span style={getTextStyle(false, isSelected)}>\n                {item.english}\n              </span>\n            </div>\n          );\n        })}\n      </div>\n    </Html>\n  );\n};\n\nMenuList.displayName = \"MenuList\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDA,IAAa,YAAqC,EAChD,OACA,UACA,YACA,WAAW;CAAC;CAAG;CAAG;CAAE,EACpB,QAAQ,KACR,aACI;CACJ,MAAM,CAAC,WAAW,gBAAgB,SAAwB,KAAK;CAE/D,MAAM,kBAAkB,aACrB,IAAY,aAAuB;AAClC,MAAI,CAAC,SACH,UAAS,GAAG;IAGhB,CAAC,SAAS,CACX;CAED,MAAM,mBAAmB,aAAa,OAAe;AACnD,eAAa,GAAG;IACf,EAAE,CAAC;CAEN,MAAM,mBAAmB,kBAAkB;AACzC,eAAa,KAAK;IACjB,EAAE,CAAC;CAGN,MAAM,iBAAiB,eACd;EACL,OAAO,GAAG,MAAM;EAChB,SAAS;EACT,eAAe;EACf,KAAK;EACL,SAAS;EACT,YAAY,gBAAgB,cAAc,oBAAoB,GAAI;EAClE,QAAQ,aAAa,gBAAgB,cAAc,cAAc,GAAI;EACrE,cAAc;EACd,WAAW,YAAY,gBAAgB,cAAc,cAAc,GAAI;EACxE,GACD,CAAC,MAAM,CACR;CAGD,MAAM,eAAe,aAClB,IAAY,aAA4C;EACvD,MAAM,aAAa,eAAe;EAClC,MAAM,YAAY,cAAc;EAEhC,IAAI,aAAa,gBAAgB,cAAc,sBAAsB,GAAI;EACzE,IAAI,cAAc,gBAAgB,cAAc,aAAa,GAAI;AAEjE,MAAI,YAAY;AACd,gBAAa,gBAAgB,cAAc,cAAc,GAAI;AAC7D,iBAAc,gBAAgB,cAAc,cAAc,GAAI;aACrD,aAAa,CAAC,UAAU;AACjC,gBAAa,gBAAgB,cAAc,aAAa,IAAK;AAC7D,iBAAc,gBAAgB,cAAc,aAAa,GAAI;;AAG/D,SAAO;GACL,SAAS;GACT;GACA,QAAQ,aAAa;GACrB,cAAc;GACd,QAAQ,WAAW,gBAAgB;GACnC,YAAY;GACZ,SAAS,WAAW,KAAM;GAC1B,YAAY;GACZ,kBAAkB;GAClB,WAAW,aAAa,CAAC,WAAW,oBAAoB;GACzD;IAEH,CAAC,YAAY,UAAU,CACxB;CAGD,MAAM,eAAe,aAClB,UAAmB,gBAA8C;EAChE,SAAS;EACT,YAAY,YAAY;EACxB,UAAU,WAAW,SAAS;EAC9B,YAAY,WAAW,SAAS;EAChC,WAAW,WAAW,WAAW;EACjC,OAAO,gBACL,aAAa,cAAc,cAAc,cAAc,aACxD;EACD,YAAY,aAAa,gBAAgB,cAAc,aAAa,GAAI;EACzE,GACD,EAAE,CACH;AAED,QACE,oBAAC,MAAD;EAAgB;EAAU,QAAA;YACxB,oBAAC,OAAD;GAAK,OAAO;GAAgB,eAAa,UAAU;aAChD,MAAM,KAAK,SAAS;IACnB,MAAM,aAAa,eAAe,KAAK;AACvC,WACE,qBAAC,OAAD;KAEE,eAAe,gBAAgB,KAAK,IAAI,KAAK,SAAS;KACtD,oBAAoB,iBAAiB,KAAK,GAAG;KAC7C,cAAc;KACd,OAAO,aAAa,KAAK,IAAI,KAAK,SAAS;KAC3C,eAAa,aAAa,KAAK;eANjC,CAQE,oBAAC,QAAD;MAAM,OAAO,aAAa,MAAM,WAAW;gBACxC,KAAK;MACD,CAAA,EACP,oBAAC,QAAD;MAAM,OAAO,aAAa,OAAO,WAAW;gBACzC,KAAK;MACD,CAAA,CACH;OAbC,KAAK,GAaN;KAER;GACE,CAAA;EACD,CAAA;;AAIX,SAAS,cAAc"}

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

@@ -0,0 +1,34 @@
+/**
+ * PlayerHUD Component - Combined combat readiness, health and stamina display
+ *
+ * Displays a complete player HUD with:
+ * - Archetype icon/image
+ * - Player name (Korean/English)
+ * - Combat Readiness bar (10-segment, multi-factor)
+ * - Health bar (segmented, color-coded)
+ * - Stamina bar (segmented, cyan-themed)
+ * - Current stance indicator
+ * - Responsive positioning (top-left for player 1, top-right for player 2)
+ *
+ * Performance optimized with React.memo for 60fps rendering.
+ */
+import React from "react";
+import { PlayerState } from "../../../../systems/player";
+import type { StanceLaterality } from "../../../../systems/trigram/types";
+export interface PlayerHUDProps {
+    /** Player state with health, stamina, and other data */
+    readonly player: PlayerState;
+    /** Player position: 'left' for player 1, 'right' for player 2 */
+    readonly position: "left" | "right";
+    /** Whether to use mobile-optimized sizing */
+    readonly isMobile: boolean;
+    /** Stance laterality: left or right foot forward */
+    readonly laterality?: StanceLaterality;
+}
+/**
+ * Memoized PlayerHUD with custom comparison
+ * Only re-renders when relevant props change
+ */
+export declare const PlayerHUD: React.NamedExoticComponent<PlayerHUDProps>;
+export default PlayerHUD;
+//# sourceMappingURL=PlayerHUD.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlayerHUD.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/three/ui/PlayerHUD.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAa1E,MAAM,WAAW,cAAc;IAC7B,wDAAwD;IACxD,QAAQ,CAAC,MAAM,EAAE,WAAW,CAAC;IAC7B,iEAAiE;IACjE,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC;IACpC,6CAA6C;IAC7C,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,oDAAoD;IACpD,QAAQ,CAAC,UAAU,CAAC,EAAE,gBAAgB,CAAC;CACxC;AAwOD;;;GAGG;AACH,eAAO,MAAM,SAAS,4CA6DrB,CAAC;AAEF,eAAe,SAAS,CAAC"}

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

@@ -0,0 +1,231 @@
+import { KOREAN_COLORS } from "../../../../types/constants/colors.js";
+import { FONT_FAMILY } from "../../../../types/constants/typography.js";
+import { ARCHETYPE_ASSETS, FALLBACK_ARCHETYPE_IMAGE } from "../../../../types/constants/index.js";
+import { hexToRgbaString } from "../../../../utils/colorUtils.js";
+import { BreathingIndicator } from "./BreathingIndicator2.js";
+import CombatReadinessBar from "./CombatReadinessBar.js";
+import HealthBar from "./HealthBar.js";
+import StaminaBar from "./StaminaBar.js";
+import React, { useCallback, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/shared/three/ui/PlayerHUD.tsx
+/**
+* PlayerHUD Component - Combined combat readiness, health and stamina display
+*
+* Displays a complete player HUD with:
+* - Archetype icon/image
+* - Player name (Korean/English)
+* - Combat Readiness bar (10-segment, multi-factor)
+* - Health bar (segmented, color-coded)
+* - Stamina bar (segmented, cyan-themed)
+* - Current stance indicator
+* - Responsive positioning (top-left for player 1, top-right for player 2)
+*
+* Performance optimized with React.memo for 60fps rendering.
+*/
+/**
+* Laterality Indicator Component - Shows L/R badge with Korean text
+* @korean 측면성표시기
+*/
+var LateralityIndicator = React.memo(({ laterality, isMobile }) => {
+	const isLeft = laterality === "left";
+	const badgeStyle = useMemo(() => ({
+		display: "flex",
+		alignItems: "center",
+		gap: isMobile ? "3px" : "4px",
+		fontSize: isMobile ? "10px" : "11px",
+		fontFamily: FONT_FAMILY.KOREAN,
+		color: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 1)
+	}), [isMobile]);
+	const labelStyle = useMemo(() => ({
+		padding: isMobile ? "1px 4px" : "2px 6px",
+		background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, .8),
+		border: `1px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, .6)}`,
+		borderRadius: "3px",
+		fontWeight: "bold",
+		minWidth: isMobile ? "16px" : "18px",
+		textAlign: "center"
+	}), [isMobile]);
+	const textStyle = useMemo(() => ({
+		opacity: .8,
+		whiteSpace: "nowrap"
+	}), []);
+	return /* @__PURE__ */ jsxs("div", {
+		style: badgeStyle,
+		"data-testid": "laterality-indicator",
+		children: [/* @__PURE__ */ jsx("span", {
+			style: labelStyle,
+			"data-testid": "laterality-badge",
+			children: isLeft ? "L" : "R"
+		}), /* @__PURE__ */ jsx("span", {
+			style: textStyle,
+			"data-testid": "laterality-text",
+			children: isLeft ? "왼발서기" : "오른발서기"
+		})]
+	});
+});
+LateralityIndicator.displayName = "LateralityIndicator";
+/**
+* PlayerHUD - Complete player status display with health and stamina bars
+* Performance optimized with React.memo
+*/
+var PlayerHUDComponent = ({ player, position, isMobile, laterality }) => {
+	const playerId = player.id;
+	const isLeft = position === "left";
+	const layout = useMemo(() => ({
+		fontSize: isMobile ? 11 : 13,
+		gap: isMobile ? "6px" : "8px",
+		iconSize: isMobile ? 40 : 50,
+		top: isMobile ? "8px" : "10px",
+		horizontal: isMobile ? "8px" : "12px"
+	}), [isMobile]);
+	const archetypeImagePath = useMemo(() => {
+		return ARCHETYPE_ASSETS[player.archetype.toLowerCase()]?.image ?? "/assets/visual/logo/black-trigram-256.png";
+	}, [player.archetype]);
+	const containerStyle = useMemo(() => ({
+		position: "relative",
+		display: "flex",
+		flexDirection: "column",
+		gap: layout.gap,
+		pointerEvents: "none",
+		width: "100%"
+	}), [layout]);
+	const iconContainerStyle = useMemo(() => {
+		return {
+			display: "flex",
+			alignItems: "center",
+			gap: "8px",
+			flexDirection: isLeft ? "row" : "row-reverse"
+		};
+	}, [isLeft]);
+	const iconStyle = useMemo(() => ({
+		width: `${layout.iconSize}px`,
+		height: `${layout.iconSize}px`,
+		borderRadius: "8px",
+		overflow: "hidden",
+		border: `2px solid ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 1)}`,
+		boxShadow: `0 0 10px ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, .5)}`,
+		flexShrink: 0
+	}), [layout.iconSize]);
+	const nameStyle = useMemo(() => {
+		const textAlign = isLeft ? "left" : "right";
+		return {
+			fontSize: `${layout.fontSize}px`,
+			fontWeight: "bold",
+			fontFamily: FONT_FAMILY.KOREAN,
+			color: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 1),
+			textAlign,
+			textShadow: "0 0 4px rgba(0,0,0,0.8), 0 0 8px rgba(0,0,0,0.6)",
+			padding: "2px 6px",
+			background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, .7),
+			borderRadius: "4px",
+			whiteSpace: "nowrap"
+		};
+	}, [layout.fontSize, isLeft]);
+	const stanceStyle = useMemo(() => {
+		const textAlign = isLeft ? "left" : "right";
+		return {
+			fontSize: isMobile ? "10px" : "12px",
+			fontFamily: FONT_FAMILY.KOREAN,
+			color: hexToRgbaString(KOREAN_COLORS.ACCENT_CYAN, 1),
+			textAlign,
+			textShadow: "0 0 4px rgba(0,0,0,0.8)",
+			padding: "4px 8px",
+			backgroundColor: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, .8),
+			borderRadius: "4px",
+			marginTop: "2px"
+		};
+	}, [isMobile, isLeft]);
+	const handleImageError = useCallback((e) => {
+		const target = e.target;
+		if (!target.src.endsWith("/assets/visual/logo/black-trigram-256.png")) target.src = FALLBACK_ARCHETYPE_IMAGE;
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": `player-hud-${playerId}`,
+		style: containerStyle,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				"data-testid": `player-name-${playerId}`,
+				style: iconContainerStyle,
+				children: [/* @__PURE__ */ jsx("div", {
+					"data-testid": `archetype-icon-${playerId}`,
+					style: iconStyle,
+					children: /* @__PURE__ */ jsx("img", {
+						src: archetypeImagePath,
+						alt: `${player.name.english} archetype`,
+						style: {
+							width: "100%",
+							height: "100%",
+							objectFit: "cover"
+						},
+						onError: handleImageError
+					})
+				}), /* @__PURE__ */ jsxs("div", {
+					style: nameStyle,
+					children: [
+						player.name.korean,
+						" | ",
+						player.name.english
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx(CombatReadinessBar, {
+				player,
+				playerId,
+				isMobile
+			}),
+			/* @__PURE__ */ jsx(HealthBar, {
+				current: player.health,
+				max: player.maxHealth,
+				playerId,
+				isMobile
+			}),
+			/* @__PURE__ */ jsx(StaminaBar, {
+				current: player.stamina,
+				max: player.maxStamina,
+				playerId,
+				isMobile
+			}),
+			/* @__PURE__ */ jsx(BreathingIndicator, {
+				player,
+				isMobile
+			}),
+			laterality && /* @__PURE__ */ jsx(LateralityIndicator, {
+				laterality,
+				isMobile
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				"data-testid": `stance-indicator-${playerId}`,
+				style: stanceStyle,
+				children: ["자세 | Stance: ", player.currentStance]
+			})
+		]
+	});
+};
+/**
+* Memoized PlayerHUD with custom comparison
+* Only re-renders when relevant props change
+*/
+var PlayerHUD = React.memo(PlayerHUDComponent, (prevProps, nextProps) => {
+	const healthSame = prevProps.player.health === nextProps.player.health;
+	const maxHealthSame = prevProps.player.maxHealth === nextProps.player.maxHealth;
+	const staminaSame = prevProps.player.stamina === nextProps.player.stamina;
+	const maxStaminaSame = prevProps.player.maxStamina === nextProps.player.maxStamina;
+	const archetypeSame = prevProps.player.archetype === nextProps.player.archetype;
+	const stanceSame = prevProps.player.currentStance === nextProps.player.currentStance;
+	const idSame = prevProps.player.id === nextProps.player.id;
+	const nameSame = prevProps.player.name.korean === nextProps.player.name.korean && prevProps.player.name.english === nextProps.player.name.english;
+	const statusEffectsSame = prevProps.player.statusEffects.length === nextProps.player.statusEffects.length && prevProps.player.statusEffects.every((effect, index) => effect === nextProps.player.statusEffects[index]);
+	const bodyPartHealthSame = prevProps.player.bodyPartHealth === nextProps.player.bodyPartHealth;
+	const painSame = prevProps.player.pain === nextProps.player.pain;
+	const consciousnessSame = prevProps.player.consciousness === nextProps.player.consciousness;
+	const balanceSame = prevProps.player.balance === nextProps.player.balance;
+	const positionSame = prevProps.position === nextProps.position;
+	const mobileSame = prevProps.isMobile === nextProps.isMobile;
+	const lateralitySame = prevProps.laterality === nextProps.laterality;
+	return healthSame && maxHealthSame && staminaSame && maxStaminaSame && archetypeSame && stanceSame && idSame && nameSame && statusEffectsSame && bodyPartHealthSame && painSame && consciousnessSame && balanceSame && positionSame && mobileSame && lateralitySame;
+});
+//#endregion
+export { PlayerHUD as default };
+
+//# sourceMappingURL=PlayerHUD.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlayerHUD.js","names":[],"sources":["../../../../../src/components/shared/three/ui/PlayerHUD.tsx"],"sourcesContent":["/**\n * PlayerHUD Component - Combined combat readiness, health and stamina display\n *\n * Displays a complete player HUD with:\n * - Archetype icon/image\n * - Player name (Korean/English)\n * - Combat Readiness bar (10-segment, multi-factor)\n * - Health bar (segmented, color-coded)\n * - Stamina bar (segmented, cyan-themed)\n * - Current stance indicator\n * - Responsive positioning (top-left for player 1, top-right for player 2)\n *\n * Performance optimized with React.memo for 60fps rendering.\n */\n\nimport React, { useCallback, useMemo } from \"react\";\nimport { PlayerState } from \"../../../../systems/player\";\nimport type { StanceLaterality } from \"../../../../systems/trigram/types\";\nimport {\n  ARCHETYPE_ASSETS,\n  FALLBACK_ARCHETYPE_IMAGE,\n  FONT_FAMILY,\n  KOREAN_COLORS,\n} from \"../../../../types/constants\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\nimport { BreathingIndicator } from \"./BreathingIndicator\";\nimport { CombatReadinessBar } from \"./CombatReadinessBar\";\nimport { HealthBar } from \"./HealthBar\";\nimport { StaminaBar } from \"./StaminaBar\";\n\nexport interface PlayerHUDProps {\n  /** Player state with health, stamina, and other data */\n  readonly player: PlayerState;\n  /** Player position: 'left' for player 1, 'right' for player 2 */\n  readonly position: \"left\" | \"right\";\n  /** Whether to use mobile-optimized sizing */\n  readonly isMobile: boolean;\n  /** Stance laterality: left or right foot forward */\n  readonly laterality?: StanceLaterality;\n}\n\n/**\n * Laterality Indicator Component - Shows L/R badge with Korean text\n * @korean 측면성표시기\n */\nconst LateralityIndicator: React.FC<{\n  readonly laterality: StanceLaterality;\n  readonly isMobile: boolean;\n}> = React.memo(({ laterality, isMobile }) => {\n  const isLeft = laterality === \"left\";\n\n  const badgeStyle = useMemo(\n    () => ({\n      display: \"flex\",\n      alignItems: \"center\",\n      gap: isMobile ? \"3px\" : \"4px\",\n      fontSize: isMobile ? \"10px\" : \"11px\",\n      fontFamily: FONT_FAMILY.KOREAN,\n      color: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 1),\n    }),\n    [isMobile],\n  );\n\n  const labelStyle = useMemo(\n    () => ({\n      padding: isMobile ? \"1px 4px\" : \"2px 6px\",\n      background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.8),\n      border: `1px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.6)}`,\n      borderRadius: \"3px\",\n      fontWeight: \"bold\",\n      minWidth: isMobile ? \"16px\" : \"18px\",\n      textAlign: \"center\" as const,\n    }),\n    [isMobile],\n  );\n\n  const textStyle = useMemo(\n    () => ({\n      opacity: 0.8,\n      whiteSpace: \"nowrap\" as const,\n    }),\n    [],\n  );\n\n  return (\n    <div style={badgeStyle} data-testid=\"laterality-indicator\">\n      <span style={labelStyle} data-testid=\"laterality-badge\">\n        {isLeft ? \"L\" : \"R\"}\n      </span>\n      <span style={textStyle} data-testid=\"laterality-text\">\n        {isLeft ? \"왼발서기\" : \"오른발서기\"}\n      </span>\n    </div>\n  );\n});\nLateralityIndicator.displayName = \"LateralityIndicator\";\n\n/**\n * PlayerHUD - Complete player status display with health and stamina bars\n * Performance optimized with React.memo\n */\nconst PlayerHUDComponent: React.FC<PlayerHUDProps> = ({\n  player,\n  position,\n  isMobile,\n  laterality,\n}) => {\n  const playerId = player.id;\n  const isLeft = position === \"left\";\n\n  // Memoize responsive sizing to avoid recalculation\n  const layout = useMemo(\n    () => ({\n      fontSize: isMobile ? 11 : 13,\n      gap: isMobile ? \"6px\" : \"8px\",\n      iconSize: isMobile ? 40 : 50,\n      top: isMobile ? \"8px\" : \"10px\",\n      horizontal: isMobile ? \"8px\" : \"12px\",\n    }),\n    [isMobile],\n  );\n\n  // Get archetype image path (memoized)\n  const archetypeImagePath = useMemo(() => {\n    const archetypeKey = player.archetype.toLowerCase();\n    const assets =\n      ARCHETYPE_ASSETS[archetypeKey as keyof typeof ARCHETYPE_ASSETS];\n    return assets?.image ?? FALLBACK_ARCHETYPE_IMAGE;\n  }, [player.archetype]);\n\n  // Memoize style objects to prevent recreating on every render\n  // Uses relative positioning for embedding in container HUDs\n  const containerStyle = useMemo(\n    () => ({\n      position: \"relative\" as const,\n      display: \"flex\",\n      flexDirection: \"column\" as const,\n      gap: layout.gap,\n      pointerEvents: \"none\" as const,\n      width: \"100%\",\n    }),\n    [layout],\n  );\n\n  const iconContainerStyle = useMemo(() => {\n    const direction = isLeft ? \"row\" : \"row-reverse\";\n    return {\n      display: \"flex\",\n      alignItems: \"center\",\n      gap: \"8px\",\n      flexDirection: direction as \"row\" | \"row-reverse\",\n    };\n  }, [isLeft]);\n\n  const iconStyle = useMemo(\n    () => ({\n      width: `${layout.iconSize}px`,\n      height: `${layout.iconSize}px`,\n      borderRadius: \"8px\",\n      overflow: \"hidden\",\n      border: `2px solid ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 1)}`,\n      boxShadow: `0 0 10px ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 0.5)}`,\n      flexShrink: 0,\n    }),\n    [layout.iconSize],\n  );\n\n  const nameStyle = useMemo(() => {\n    const textAlign = isLeft ? \"left\" : \"right\";\n    return {\n      fontSize: `${layout.fontSize}px`,\n      fontWeight: \"bold\" as const,\n      fontFamily: FONT_FAMILY.KOREAN,\n      color: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 1),\n      textAlign: textAlign as \"left\" | \"right\",\n      textShadow: \"0 0 4px rgba(0,0,0,0.8), 0 0 8px rgba(0,0,0,0.6)\",\n      padding: \"2px 6px\",\n      background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.7),\n      borderRadius: \"4px\",\n      whiteSpace: \"nowrap\" as const,\n    };\n  }, [layout.fontSize, isLeft]);\n\n  const stanceStyle = useMemo(() => {\n    const textAlign = isLeft ? \"left\" : \"right\";\n    return {\n      fontSize: isMobile ? \"10px\" : \"12px\",\n      fontFamily: FONT_FAMILY.KOREAN,\n      color: hexToRgbaString(KOREAN_COLORS.ACCENT_CYAN, 1),\n      textAlign: textAlign as \"left\" | \"right\",\n      textShadow: \"0 0 4px rgba(0,0,0,0.8)\",\n      padding: \"4px 8px\",\n      backgroundColor: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.8),\n      borderRadius: \"4px\",\n      marginTop: \"2px\",\n    };\n  }, [isMobile, isLeft]);\n\n  // Memoize error handler to prevent recreating on every render\n  const handleImageError = useCallback(\n    (e: React.SyntheticEvent<HTMLImageElement>) => {\n      const target = e.target as HTMLImageElement;\n      if (!target.src.endsWith(FALLBACK_ARCHETYPE_IMAGE)) {\n        target.src = FALLBACK_ARCHETYPE_IMAGE;\n      }\n    },\n    [],\n  );\n\n  return (\n    <div data-testid={`player-hud-${playerId}`} style={containerStyle}>\n      {/* Player Name with Archetype Icon */}\n      <div data-testid={`player-name-${playerId}`} style={iconContainerStyle}>\n        {/* Archetype Icon */}\n        <div data-testid={`archetype-icon-${playerId}`} style={iconStyle}>\n          <img\n            src={archetypeImagePath}\n            alt={`${player.name.english} archetype`}\n            style={{\n              width: \"100%\",\n              height: \"100%\",\n              objectFit: \"cover\",\n            }}\n            onError={handleImageError}\n          />\n        </div>\n        {/* Player Name */}\n        <div style={nameStyle}>\n          {player.name.korean} | {player.name.english}\n        </div>\n      </div>\n\n      {/* Combat Readiness Bar - shows overall combat capability */}\n      <CombatReadinessBar\n        player={player}\n        playerId={playerId}\n        isMobile={isMobile}\n      />\n\n      {/* Health Bar - shows aggregate body health */}\n      <HealthBar\n        current={player.health}\n        max={player.maxHealth}\n        playerId={playerId}\n        isMobile={isMobile}\n      />\n\n      {/* Stamina Bar */}\n      <StaminaBar\n        current={player.stamina}\n        max={player.maxStamina}\n        playerId={playerId}\n        isMobile={isMobile}\n      />\n\n      {/* Breathing Disruption Indicator */}\n      <BreathingIndicator player={player} isMobile={isMobile} />\n\n      {/* Laterality Indicator */}\n      {laterality && (\n        <LateralityIndicator laterality={laterality} isMobile={isMobile} />\n      )}\n\n      {/* Current Stance Indicator */}\n      <div data-testid={`stance-indicator-${playerId}`} style={stanceStyle}>\n        자세 | Stance: {player.currentStance}\n      </div>\n    </div>\n  );\n};\n\n/**\n * Memoized PlayerHUD with custom comparison\n * Only re-renders when relevant props change\n */\nexport const PlayerHUD = React.memo(\n  PlayerHUDComponent,\n  (prevProps, nextProps) => {\n    // Compare player state\n    const healthSame = prevProps.player.health === nextProps.player.health;\n    const maxHealthSame =\n      prevProps.player.maxHealth === nextProps.player.maxHealth;\n    const staminaSame = prevProps.player.stamina === nextProps.player.stamina;\n    const maxStaminaSame =\n      prevProps.player.maxStamina === nextProps.player.maxStamina;\n    const archetypeSame =\n      prevProps.player.archetype === nextProps.player.archetype;\n    const stanceSame =\n      prevProps.player.currentStance === nextProps.player.currentStance;\n    const idSame = prevProps.player.id === nextProps.player.id;\n    const nameSame =\n      prevProps.player.name.korean === nextProps.player.name.korean &&\n      prevProps.player.name.english === nextProps.player.name.english;\n\n    // Compare statusEffects for BreathingIndicator updates\n    const statusEffectsSame =\n      prevProps.player.statusEffects.length ===\n        nextProps.player.statusEffects.length &&\n      prevProps.player.statusEffects.every(\n        (effect, index) => effect === nextProps.player.statusEffects[index],\n      );\n\n    // Compare combat readiness factors for CombatReadinessBar updates\n    // These properties are used by calculateCombatReadiness()\n    const bodyPartHealthSame =\n      prevProps.player.bodyPartHealth === nextProps.player.bodyPartHealth;\n    const painSame = prevProps.player.pain === nextProps.player.pain;\n    const consciousnessSame =\n      prevProps.player.consciousness === nextProps.player.consciousness;\n    const balanceSame = prevProps.player.balance === nextProps.player.balance;\n\n    // Compare other props\n    const positionSame = prevProps.position === nextProps.position;\n    const mobileSame = prevProps.isMobile === nextProps.isMobile;\n    const lateralitySame = prevProps.laterality === nextProps.laterality;\n\n    // Return true if all relevant props are the same (skip re-render)\n    return (\n      healthSame &&\n      maxHealthSame &&\n      staminaSame &&\n      maxStaminaSame &&\n      archetypeSame &&\n      stanceSame &&\n      idSame &&\n      nameSame &&\n      statusEffectsSame &&\n      bodyPartHealthSame &&\n      painSame &&\n      consciousnessSame &&\n      balanceSame &&\n      positionSame &&\n      mobileSame &&\n      lateralitySame\n    );\n  },\n);\n\nexport default PlayerHUD;\n"],"mappings":"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"}

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

@@ -0,0 +1,48 @@
+/**
+ * ProgressBar - Three.js-compatible progress bar component
+ *
+ * Displays health, ki, stamina with Korean theming
+ *
+ * @module components/three
+ */
+import React from "react";
+/**
+ * Progress bar type
+ */
+export type ProgressBarType = "health" | "ki" | "stamina";
+/**
+ * Props for ProgressBar component
+ */
+export interface ProgressBarProps {
+    readonly type: ProgressBarType;
+    readonly current: number;
+    readonly max: number;
+    readonly label?: {
+        korean: string;
+        english: string;
+    };
+    readonly position?: [number, number, number];
+    readonly width?: number;
+    readonly height?: number;
+    readonly showText?: boolean;
+    readonly animated?: boolean;
+    readonly testId?: string;
+}
+/**
+ * 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" }}
+ * />
+ * ```
+ */
+export declare const ProgressBar: React.FC<ProgressBarProps>;
+//# sourceMappingURL=ProgressBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/three/ui/ProgressBar.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAIvC;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,IAAI,GAAG,SAAS,CAAC;AAE1D;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,IAAI,EAAE,eAAe,CAAC;IAC/B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,CAAC,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IACrD,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC7C,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA8LlD,CAAC"}