blacktrigram 0.7.2

package/lib/components/ui/combat/BalanceIndicatorOverlayHtml.js

@@ -0,0 +1,179 @@
+import { KOREAN_COLORS } from "../../../types/constants/colors.js";
+import { FONT_FAMILY } from "../../../types/constants/typography.js";
+import "../../../types/constants/index.js";
+import { useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Html } from "@react-three/drei";
+//#region src/components/ui/combat/BalanceIndicatorOverlayHtml.tsx
+/**
+* BalanceIndicatorOverlayHtml Component - 3D Html overlay for balance state
+*
+* Displays balance state with vulnerability indicators using Html from @react-three/drei.
+* Shows:
+* - Current balance percentage
+* - Vulnerability state (red border + shake effect)
+* - Bilingual Korean/English tooltips
+* - Stance transition vulnerability
+* - Rapid change penalty indicator
+*
+* @module components/ui/combat/BalanceIndicatorOverlayHtml
+* @category Combat UI
+* @korean 균형표시오버레이
+*/
+/**
+* Get balance color based on percentage
+*/
+function getBalanceColor(balance) {
+	if (balance >= 80) return `#${KOREAN_COLORS.POSITIVE_GREEN.toString(16).padStart(6, "0")}`;
+	if (balance >= 50) return `#${KOREAN_COLORS.WARNING_YELLOW.toString(16).padStart(6, "0")}`;
+	if (balance >= 20) return `#${KOREAN_COLORS.WARNING_ORANGE.toString(16).padStart(6, "0")}`;
+	return `#${KOREAN_COLORS.ACCENT_RED.toString(16).padStart(6, "0")}`;
+}
+/**
+* Get balance state label (bilingual)
+*/
+function getBalanceLabel(balance) {
+	if (balance >= 80) return {
+		korean: "안정",
+		english: "Stable"
+	};
+	if (balance >= 50) return {
+		korean: "불안정",
+		english: "Unsteady"
+	};
+	if (balance >= 20) return {
+		korean: "균형상실",
+		english: "Off-Balance"
+	};
+	return {
+		korean: "낙하중",
+		english: "Falling"
+	};
+}
+/**
+* BalanceIndicatorOverlayHtml - 3D Html overlay for balance visualization
+*
+* Renders above player character in 3D space using Html from @react-three/drei.
+* Shows balance percentage, vulnerability state, and active modifiers.
+*
+* Features:
+* - Red border + shake animation when vulnerable
+* - Bilingual Korean/English labels
+* - Transition vulnerability indicator
+* - Rapid change penalty warning
+*
+* @example
+* ```tsx
+* <BalanceIndicatorOverlayHtml
+*   player={playerState}
+*   currentTime={Date.now()}
+*   position={[0, 2.5, 0]}
+*   isMobile={false}
+* />
+* ```
+*/
+var BalanceIndicatorOverlayHtml = ({ player, currentTime, position = [
+	0,
+	2,
+	0
+], isMobile = false }) => {
+	const isVulnerable = useMemo(() => {
+		const isTransitioning = player.transitionState?.isTransitioning ?? false;
+		const isLowBalance = player.balance < 50;
+		const hasPenalty = player.rapidChangePenaltyEnd !== void 0 && currentTime < player.rapidChangePenaltyEnd;
+		return isTransitioning ?? isLowBalance ?? hasPenalty;
+	}, [
+		player.balance,
+		player.transitionState,
+		player.rapidChangePenaltyEnd,
+		currentTime
+	]);
+	const balanceColor = useMemo(() => getBalanceColor(player.balance), [player.balance]);
+	const balanceLabel = useMemo(() => getBalanceLabel(player.balance), [player.balance]);
+	const vulnerableColorHex = `#${KOREAN_COLORS.ACCENT_RED.toString(16).padStart(6, "0")}`;
+	const containerStyle = useMemo(() => {
+		const baseStyle = {
+			border: isVulnerable ? `2px solid ${vulnerableColorHex}` : `2px solid ${balanceColor}`,
+			padding: isMobile ? "6px 10px" : "8px 12px",
+			backgroundColor: "rgba(10, 10, 10, 0.85)",
+			borderRadius: "8px",
+			boxShadow: isVulnerable ? `0 0 16px ${vulnerableColorHex}` : `0 0 12px ${balanceColor}`,
+			transition: "all 0.3s ease-out",
+			fontFamily: FONT_FAMILY.KOREAN,
+			fontSize: isMobile ? "12px" : "14px",
+			minWidth: isMobile ? "140px" : "180px",
+			textAlign: "center",
+			userSelect: "none",
+			pointerEvents: "none"
+		};
+		if (isVulnerable) baseStyle.animation = "shake 0.3s infinite";
+		return baseStyle;
+	}, [
+		isVulnerable,
+		balanceColor,
+		vulnerableColorHex,
+		isMobile
+	]);
+	const balancePercentage = Math.round(player.balance);
+	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Html, {
+		position,
+		center: true,
+		children: [/* @__PURE__ */ jsx("style", { children: `
+            @keyframes shake {
+              0%, 100% { transform: translateX(0); }
+              25% { transform: translateX(-2px); }
+              75% { transform: translateX(2px); }
+            }
+          ` }), /* @__PURE__ */ jsxs("div", {
+			style: containerStyle,
+			"data-testid": "balance-indicator-overlay",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					style: {
+						color: balanceColor,
+						fontWeight: "bold",
+						marginBottom: "4px"
+					},
+					children: [
+						"균형 | Balance: ",
+						balancePercentage,
+						"%"
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					style: {
+						color: `#${KOREAN_COLORS.TEXT_SECONDARY.toString(16).padStart(6, "0")}`,
+						fontSize: isMobile ? "10px" : "12px"
+					},
+					children: [
+						balanceLabel.korean,
+						" | ",
+						balanceLabel.english
+					]
+				}),
+				player.transitionState?.isTransitioning && /* @__PURE__ */ jsx("div", {
+					style: {
+						color: vulnerableColorHex,
+						fontSize: isMobile ? "10px" : "11px",
+						marginTop: "4px",
+						fontWeight: "bold"
+					},
+					children: "취약 | Vulnerable!"
+				}),
+				player.rapidChangePenaltyEnd && currentTime < player.rapidChangePenaltyEnd && /* @__PURE__ */ jsx("div", {
+					style: {
+						color: `#${KOREAN_COLORS.WARNING_ORANGE.toString(16).padStart(6, "0")}`,
+						fontSize: isMobile ? "9px" : "10px",
+						marginTop: "2px"
+					},
+					children: "급속변경 벌칙 | Rapid Change Penalty"
+				})
+			]
+		})]
+	}) });
+};
+BalanceIndicatorOverlayHtml.displayName = "BalanceIndicatorOverlayHtml";
+//#endregion
+export { BalanceIndicatorOverlayHtml };
+
+//# sourceMappingURL=BalanceIndicatorOverlayHtml.js.map

package/lib/components/ui/combat/BalanceIndicatorOverlayHtml.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BalanceIndicatorOverlayHtml.js","names":[],"sources":["../../../../src/components/ui/combat/BalanceIndicatorOverlayHtml.tsx"],"sourcesContent":["/**\n * BalanceIndicatorOverlayHtml Component - 3D Html overlay for balance state\n *\n * Displays balance state with vulnerability indicators using Html from @react-three/drei.\n * Shows:\n * - Current balance percentage\n * - Vulnerability state (red border + shake effect)\n * - Bilingual Korean/English tooltips\n * - Stance transition vulnerability\n * - Rapid change penalty indicator\n *\n * @module components/ui/combat/BalanceIndicatorOverlayHtml\n * @category Combat UI\n * @korean 균형표시오버레이\n */\n\nimport React, { useMemo } from \"react\";\nimport { Html } from \"@react-three/drei\";\nimport { KOREAN_COLORS, FONT_FAMILY } from \"@/types/constants\";\nimport type { BalancePlayerState } from \"@/systems/combat/BalanceSystem\";\n\nexport interface BalanceIndicatorOverlayHtmlProps {\n  /**\n   * Player state with balance and transition data\n   * @korean 플레이어상태\n   */\n  readonly player: BalancePlayerState;\n\n  /**\n   * Current game time in milliseconds\n   * @korean 현재시간\n   */\n  readonly currentTime: number;\n\n  /**\n   * Position in 3D space [x, y, z]\n   * @korean 3D위치\n   */\n  readonly position?: [number, number, number];\n\n  /**\n   * Mobile responsive mode\n   * @korean 모바일여부\n   */\n  readonly isMobile?: boolean;\n}\n\n/**\n * Get balance color based on percentage\n */\nfunction getBalanceColor(balance: number): string {\n  if (balance >= 80) return `#${KOREAN_COLORS.POSITIVE_GREEN.toString(16).padStart(6, \"0\")}`;\n  if (balance >= 50) return `#${KOREAN_COLORS.WARNING_YELLOW.toString(16).padStart(6, \"0\")}`;\n  if (balance >= 20) return `#${KOREAN_COLORS.WARNING_ORANGE.toString(16).padStart(6, \"0\")}`;\n  return `#${KOREAN_COLORS.ACCENT_RED.toString(16).padStart(6, \"0\")}`;\n}\n\n/**\n * Get balance state label (bilingual)\n */\nfunction getBalanceLabel(balance: number): {\n  korean: string;\n  english: string;\n} {\n  if (balance >= 80)\n    return { korean: \"안정\", english: \"Stable\" };\n  if (balance >= 50)\n    return { korean: \"불안정\", english: \"Unsteady\" };\n  if (balance >= 20)\n    return { korean: \"균형상실\", english: \"Off-Balance\" };\n  return { korean: \"낙하중\", english: \"Falling\" };\n}\n\n/**\n * BalanceIndicatorOverlayHtml - 3D Html overlay for balance visualization\n *\n * Renders above player character in 3D space using Html from @react-three/drei.\n * Shows balance percentage, vulnerability state, and active modifiers.\n *\n * Features:\n * - Red border + shake animation when vulnerable\n * - Bilingual Korean/English labels\n * - Transition vulnerability indicator\n * - Rapid change penalty warning\n *\n * @example\n * ```tsx\n * <BalanceIndicatorOverlayHtml\n *   player={playerState}\n *   currentTime={Date.now()}\n *   position={[0, 2.5, 0]}\n *   isMobile={false}\n * />\n * ```\n */\nexport const BalanceIndicatorOverlayHtml: React.FC<\n  BalanceIndicatorOverlayHtmlProps\n> = ({ player, currentTime, position = [0, 2, 0], isMobile = false }) => {\n  // Calculate vulnerability state\n  const isVulnerable = useMemo(() => {\n    const isTransitioning = player.transitionState?.isTransitioning ?? false;\n    const isLowBalance = player.balance < 50; // Off-balance or worse\n    const hasPenalty =\n      player.rapidChangePenaltyEnd !== undefined &&\n      currentTime < player.rapidChangePenaltyEnd;\n    return isTransitioning ?? isLowBalance ?? hasPenalty;\n  }, [player.balance, player.transitionState, player.rapidChangePenaltyEnd, currentTime]);\n\n  const balanceColor = useMemo(\n    () => getBalanceColor(player.balance),\n    [player.balance]\n  );\n\n  const balanceLabel = useMemo(\n    () => getBalanceLabel(player.balance),\n    [player.balance]\n  );\n\n  const vulnerableColorHex = `#${KOREAN_COLORS.ACCENT_RED.toString(16).padStart(6, \"0\")}`;\n\n  // Container style with vulnerability effects\n  const containerStyle = useMemo(() => {\n    const baseStyle: React.CSSProperties = {\n      border: isVulnerable\n        ? `2px solid ${vulnerableColorHex}`\n        : `2px solid ${balanceColor}`,\n      padding: isMobile ? \"6px 10px\" : \"8px 12px\",\n      backgroundColor: \"rgba(10, 10, 10, 0.85)\",\n      borderRadius: \"8px\",\n      boxShadow: isVulnerable\n        ? `0 0 16px ${vulnerableColorHex}`\n        : `0 0 12px ${balanceColor}`,\n      transition: \"all 0.3s ease-out\",\n      fontFamily: FONT_FAMILY.KOREAN,\n      fontSize: isMobile ? \"12px\" : \"14px\",\n      minWidth: isMobile ? \"140px\" : \"180px\",\n      textAlign: \"center\" as const,\n      userSelect: \"none\" as const,\n      pointerEvents: \"none\" as const,\n    };\n\n    // Add shake animation when vulnerable\n    if (isVulnerable) {\n      baseStyle.animation = \"shake 0.3s infinite\";\n    }\n\n    return baseStyle;\n  }, [isVulnerable, balanceColor, vulnerableColorHex, isMobile]);\n\n  const balancePercentage = Math.round(player.balance);\n\n  return (\n    <>\n      {/* Inject keyframes for shake animation */}\n      <Html position={position} center>\n        <style>\n          {`\n            @keyframes shake {\n              0%, 100% { transform: translateX(0); }\n              25% { transform: translateX(-2px); }\n              75% { transform: translateX(2px); }\n            }\n          `}\n        </style>\n        <div style={containerStyle} data-testid=\"balance-indicator-overlay\">\n          {/* Balance percentage and label */}\n          <div\n            style={{\n              color: balanceColor,\n              fontWeight: \"bold\",\n              marginBottom: \"4px\",\n            }}\n          >\n            균형 | Balance: {balancePercentage}%\n          </div>\n\n          {/* Balance state label */}\n          <div\n            style={{\n              color: `#${KOREAN_COLORS.TEXT_SECONDARY.toString(16).padStart(6, \"0\")}`,\n              fontSize: isMobile ? \"10px\" : \"12px\",\n            }}\n          >\n            {balanceLabel.korean} | {balanceLabel.english}\n          </div>\n\n          {/* Vulnerability indicators */}\n          {player.transitionState?.isTransitioning && (\n            <div\n              style={{\n                color: vulnerableColorHex,\n                fontSize: isMobile ? \"10px\" : \"11px\",\n                marginTop: \"4px\",\n                fontWeight: \"bold\",\n              }}\n            >\n              취약 | Vulnerable!\n            </div>\n          )}\n\n          {/* Rapid change penalty indicator */}\n          {player.rapidChangePenaltyEnd && currentTime < player.rapidChangePenaltyEnd && (\n            <div\n              style={{\n                color: `#${KOREAN_COLORS.WARNING_ORANGE.toString(16).padStart(6, \"0\")}`,\n                fontSize: isMobile ? \"9px\" : \"10px\",\n                marginTop: \"2px\",\n              }}\n            >\n              급속변경 벌칙 | Rapid Change Penalty\n            </div>\n          )}\n        </div>\n      </Html>\n    </>\n  );\n};\n\nBalanceIndicatorOverlayHtml.displayName = \"BalanceIndicatorOverlayHtml\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAkDA,SAAS,gBAAgB,SAAyB;AAChD,KAAI,WAAW,GAAI,QAAO,IAAI,cAAc,eAAe,SAAS,GAAG,CAAC,SAAS,GAAG,IAAI;AACxF,KAAI,WAAW,GAAI,QAAO,IAAI,cAAc,eAAe,SAAS,GAAG,CAAC,SAAS,GAAG,IAAI;AACxF,KAAI,WAAW,GAAI,QAAO,IAAI,cAAc,eAAe,SAAS,GAAG,CAAC,SAAS,GAAG,IAAI;AACxF,QAAO,IAAI,cAAc,WAAW,SAAS,GAAG,CAAC,SAAS,GAAG,IAAI;;;;;AAMnE,SAAS,gBAAgB,SAGvB;AACA,KAAI,WAAW,GACb,QAAO;EAAE,QAAQ;EAAM,SAAS;EAAU;AAC5C,KAAI,WAAW,GACb,QAAO;EAAE,QAAQ;EAAO,SAAS;EAAY;AAC/C,KAAI,WAAW,GACb,QAAO;EAAE,QAAQ;EAAQ,SAAS;EAAe;AACnD,QAAO;EAAE,QAAQ;EAAO,SAAS;EAAW;;;;;;;;;;;;;;;;;;;;;;;;AAyB9C,IAAa,+BAER,EAAE,QAAQ,aAAa,WAAW;CAAC;CAAG;CAAG;CAAE,EAAE,WAAW,YAAY;CAEvE,MAAM,eAAe,cAAc;EACjC,MAAM,kBAAkB,OAAO,iBAAiB,mBAAmB;EACnE,MAAM,eAAe,OAAO,UAAU;EACtC,MAAM,aACJ,OAAO,0BAA0B,KAAA,KACjC,cAAc,OAAO;AACvB,SAAO,mBAAmB,gBAAgB;IACzC;EAAC,OAAO;EAAS,OAAO;EAAiB,OAAO;EAAuB;EAAY,CAAC;CAEvF,MAAM,eAAe,cACb,gBAAgB,OAAO,QAAQ,EACrC,CAAC,OAAO,QAAQ,CACjB;CAED,MAAM,eAAe,cACb,gBAAgB,OAAO,QAAQ,EACrC,CAAC,OAAO,QAAQ,CACjB;CAED,MAAM,qBAAqB,IAAI,cAAc,WAAW,SAAS,GAAG,CAAC,SAAS,GAAG,IAAI;CAGrF,MAAM,iBAAiB,cAAc;EACnC,MAAM,YAAiC;GACrC,QAAQ,eACJ,aAAa,uBACb,aAAa;GACjB,SAAS,WAAW,aAAa;GACjC,iBAAiB;GACjB,cAAc;GACd,WAAW,eACP,YAAY,uBACZ,YAAY;GAChB,YAAY;GACZ,YAAY,YAAY;GACxB,UAAU,WAAW,SAAS;GAC9B,UAAU,WAAW,UAAU;GAC/B,WAAW;GACX,YAAY;GACZ,eAAe;GAChB;AAGD,MAAI,aACF,WAAU,YAAY;AAGxB,SAAO;IACN;EAAC;EAAc;EAAc;EAAoB;EAAS,CAAC;CAE9D,MAAM,oBAAoB,KAAK,MAAM,OAAO,QAAQ;AAEpD,QACE,oBAAA,UAAA,EAAA,UAEE,qBAAC,MAAD;EAAgB;EAAU,QAAA;YAA1B,CACE,oBAAC,SAAD,EAAA,UACG;;;;;;aAOK,CAAA,EACR,qBAAC,OAAD;GAAK,OAAO;GAAgB,eAAY;aAAxC;IAEE,qBAAC,OAAD;KACE,OAAO;MACL,OAAO;MACP,YAAY;MACZ,cAAc;MACf;eALH;MAMC;MACgB;MAAkB;MAC7B;;IAGN,qBAAC,OAAD;KACE,OAAO;MACL,OAAO,IAAI,cAAc,eAAe,SAAS,GAAG,CAAC,SAAS,GAAG,IAAI;MACrE,UAAU,WAAW,SAAS;MAC/B;eAJH;MAMG,aAAa;MAAO;MAAI,aAAa;MAClC;;IAGL,OAAO,iBAAiB,mBACvB,oBAAC,OAAD;KACE,OAAO;MACL,OAAO;MACP,UAAU,WAAW,SAAS;MAC9B,WAAW;MACX,YAAY;MACb;eACF;KAEK,CAAA;IAIP,OAAO,yBAAyB,cAAc,OAAO,yBACpD,oBAAC,OAAD;KACE,OAAO;MACL,OAAO,IAAI,cAAc,eAAe,SAAS,GAAG,CAAC,SAAS,GAAG,IAAI;MACrE,UAAU,WAAW,QAAQ;MAC7B,WAAW;MACZ;eACF;KAEK,CAAA;IAEJ;KACD;KACN,CAAA;;AAIP,4BAA4B,cAAc"}

package/lib/components/ui/combat/ComboCounter.d.ts

@@ -0,0 +1,85 @@
+/**
+ * ComboCounter - Combo count and timing window display
+ *
+ * Shows current combo count and visual timing indicator for combo continuation.
+ * Korean/English bilingual with Korean cyberpunk theming. Displays optimal
+ * timing window for chaining techniques.
+ *
+ * Features:
+ * - Bilingual labels: "연속 공격 | Combo"
+ * - Combo count display with multiplier
+ * - Visual timing window indicator
+ * - Color-coded timing feedback (perfect/good/miss)
+ * - Korean cyberpunk aesthetic
+ * - WCAG AA contrast compliance
+ * - Mobile-optimized sizing
+ *
+ * @module components/ui/combat/ComboCounter
+ * @category Combat UI
+ * @korean 콤보카운터 - 연속 공격 카운터 및 타이밍 표시기
+ */
+import React from "react";
+/**
+ * Props for ComboCounter component
+ */
+export interface ComboCounterProps {
+    /** Current combo count */
+    readonly comboCount: number;
+    /** Timing window for next technique (milliseconds) */
+    readonly comboWindow?: number;
+    /** Time elapsed since last technique (milliseconds) */
+    readonly timeSinceLastHit?: number;
+    /** Whether combo is currently active */
+    readonly isActive: boolean;
+    /** Whether to show on mobile devices */
+    readonly showOnMobile?: boolean;
+    /** Additional CSS classes */
+    readonly className?: string;
+}
+/**
+ * ComboCounter Component
+ *
+ * Displays combo count and timing window for Son (Wind) stance combo chains.
+ * Provides visual feedback for optimal technique timing within combo flow.
+ *
+ * @example
+ * ```tsx
+ * const [comboState, setComboState] = useState({
+ *   count: 0,
+ *   lastHitTime: 0,
+ *   window: 200,
+ * });
+ *
+ * // On technique hit
+ * const handleTechniqueHit = (technique: TrigramStanceTechnique) => {
+ *   const now = Date.now();
+ *   const elapsed = now - comboState.lastHitTime;
+ *
+ *   if (elapsed <= comboState.window) {
+ *     // Combo continues
+ *     setComboState({
+ *       count: comboState.count + 1,
+ *       lastHitTime: now,
+ *       window: technique.comboWindow || 200,
+ *     });
+ *   } else {
+ *     // Combo resets
+ *     setComboState({
+ *       count: 1,
+ *       lastHitTime: now,
+ *       window: technique.comboWindow || 200,
+ *     });
+ *   }
+ * };
+ *
+ * <ComboCounter
+ *   comboCount={comboState.count}
+ *   comboWindow={comboState.window}
+ *   timeSinceLastHit={Date.now() - comboState.lastHitTime}
+ *   isActive={comboState.count > 0}
+ *   showOnMobile={true}
+ * />
+ * ```
+ */
+export declare const ComboCounter: React.FC<ComboCounterProps>;
+//# sourceMappingURL=ComboCounter.d.ts.map

package/lib/components/ui/combat/ComboCounter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboCounter.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/combat/ComboCounter.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAuC,MAAM,OAAO,CAAC;AAI5D;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,0BAA0B;IAC1B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,sDAAsD;IACtD,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,uDAAuD;IACvD,QAAQ,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACnC,wCAAwC;IACxC,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,wCAAwC;IACxC,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC;IAChC,6BAA6B;IAC7B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAoCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA0MpD,CAAC"}

package/lib/components/ui/combat/PressureMeter.d.ts

@@ -0,0 +1,60 @@
+/**
+ * PressureMeter - Son (Wind) stance pressure accumulation meter
+ *
+ * Displays pressure stacks (0-10) accumulated through Son technique combos.
+ * Korean/English bilingual with cyberpunk theming. Responsive design for
+ * mobile and desktop displays.
+ *
+ * Features:
+ * - Bilingual Korean/English labels: "압박 | Pressure"
+ * - Visual stack counter (0-10)
+ * - Color-coded intensity (low/medium/high)
+ * - Korean cyberpunk aesthetic
+ * - WCAG AA contrast compliance
+ * - Mobile-optimized sizing
+ *
+ * @module components/ui/combat/PressureMeter
+ * @category Combat UI
+ * @korean 압박계량기 - 손 자세 압박 누적 표시기
+ */
+import React from "react";
+/**
+ * Props for PressureMeter component
+ */
+export interface PressureMeterProps {
+    /** Current pressure stacks (0-10) */
+    readonly pressure: number;
+    /** Maximum pressure stacks */
+    readonly maxPressure?: number;
+    /** Whether to show on mobile devices */
+    readonly showOnMobile?: boolean;
+    /** Additional CSS classes */
+    readonly className?: string;
+}
+/**
+ * PressureMeter Component
+ *
+ * Displays Son (Wind) stance pressure accumulation with bilingual labels
+ * and color-coded visual feedback. Integrates with combo system to show
+ * continuous pressure mechanics.
+ *
+ * @example
+ * ```tsx
+ * const [pressure, setPressure] = useState(0);
+ *
+ * // On Son technique hit
+ * const handleTechniqueHit = (technique: TrigramStanceTechnique) => {
+ *   if (technique.stance === TrigramStance.SON && technique.pressureStacks) {
+ *     setPressure(prev => Math.min(prev + technique.pressureStacks, 10));
+ *   }
+ * };
+ *
+ * <PressureMeter
+ *   pressure={pressure}
+ *   maxPressure={10}
+ *   showOnMobile={true}
+ * />
+ * ```
+ */
+export declare const PressureMeter: React.FC<PressureMeterProps>;
+//# sourceMappingURL=PressureMeter.d.ts.map

package/lib/components/ui/combat/PressureMeter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PressureMeter.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/combat/PressureMeter.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAIvC;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,qCAAqC;IACrC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,8BAA8B;IAC9B,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,wCAAwC;IACxC,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC;IAChC,6BAA6B;IAC7B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAqBD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAmKtD,CAAC"}

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

@@ -0,0 +1,8 @@
+/**
+ * Combat UI components exports
+ * @module components/ui/combat
+ */
+export { BalanceIndicatorOverlayHtml } from "./BalanceIndicatorOverlayHtml";
+export { PressureMeter, type PressureMeterProps } from "./PressureMeter";
+export { ComboCounter, type ComboCounterProps } from "./ComboCounter";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/combat/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACzE,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}

package/lib/constants/bodyDimensions.d.ts

@@ -0,0 +1,241 @@
+/**
+ * Centralized body dimensions for consistent rendering across muscles and clothing.
+ *
+ * **Korean**: 신체 치수 (Body Dimensions)
+ *
+ * This module provides a single source of truth for body part radii and lengths.
+ * Both the muscle system (BoneAttachedMuscles) and clothing system (BoneClothing)
+ * import these values to ensure clothing properly wraps around muscles.
+ *
+ * ## Design Philosophy
+ *
+ * - All values are tuned for muscular Korean martial arts fighter proportions
+ * - Radii represent the thickness of each body part
+ * - Lengths represent the extent along the bone axis
+ * - Clothing should add a thin layer OUTSIDE these dimensions
+ *
+ * @module constants/bodyDimensions
+ * @category Rendering
+ * @korean 신체치수
+ */
+/**
+ * Shoulder (deltoid) muscle radius.
+ * Athletic martial artist proportions.
+ * @korean 어깨반지름
+ */
+export declare const SHOULDER_RADIUS = 0.08;
+/**
+ * Shoulder muscle length along bone axis.
+ * @korean 어깨길이
+ */
+export declare const SHOULDER_LENGTH = 0.15;
+/**
+ * Bicep muscle radius.
+ * Muscular martial artist proportions.
+ * @korean 이두근반지름
+ */
+export declare const BICEP_RADIUS = 0.06;
+/**
+ * Bicep muscle length.
+ * @korean 이두근길이
+ */
+export declare const BICEP_LENGTH = 0.25;
+/**
+ * Tricep muscle radius.
+ * Slightly smaller than bicep.
+ * @korean 삼두근반지름
+ */
+export declare const TRICEP_RADIUS = 0.055;
+/**
+ * Tricep muscle length.
+ * @korean 삼두근길이
+ */
+export declare const TRICEP_LENGTH = 0.22;
+/**
+ * Combined upper arm radius for clothing calculations.
+ * Uses the larger of bicep/tricep for proper fit.
+ * @korean 상완반지름
+ */
+export declare const UPPER_ARM_RADIUS: number;
+/**
+ * Forearm muscle radius.
+ * Athletic martial artist proportions.
+ * @korean 전완반지름
+ */
+export declare const FOREARM_RADIUS = 0.045;
+/**
+ * Forearm muscle length.
+ * @korean 전완길이
+ */
+export declare const FOREARM_LENGTH = 0.2;
+/**
+ * Pectorals (chest) muscle radius/depth.
+ * Athletic chest depth.
+ * @korean 가슴반지름
+ */
+export declare const PECTORALS_RADIUS = 0.12;
+/**
+ * Pectorals width (length in capsule terms).
+ * @korean 가슴너비
+ */
+export declare const PECTORALS_LENGTH = 0.28;
+/**
+ * Core (midsection) muscle radius.
+ * Athletic core depth.
+ * @korean 코어반지름
+ */
+export declare const CORE_RADIUS = 0.1;
+/**
+ * Core muscle length.
+ * @korean 코어길이
+ */
+export declare const CORE_LENGTH = 0.25;
+/**
+ * Abdominals muscle radius.
+ * Athletic abs depth.
+ * @korean 복근반지름
+ */
+export declare const ABS_RADIUS = 0.08;
+/**
+ * Abdominals muscle length.
+ * @korean 복근길이
+ */
+export declare const ABS_LENGTH = 0.22;
+/**
+ * Obliques muscle radius.
+ * @korean 복사근반지름
+ */
+export declare const OBLIQUES_RADIUS = 0.06;
+/**
+ * Obliques muscle length.
+ * @korean 복사근길이
+ */
+export declare const OBLIQUES_LENGTH = 0.2;
+/**
+ * Hip flexor muscle radius.
+ * @korean 고관절굴근반지름
+ */
+export declare const HIP_FLEXOR_RADIUS = 0.04;
+/**
+ * Hip flexor muscle length.
+ * @korean 고관절굴근길이
+ */
+export declare const HIP_FLEXOR_LENGTH = 0.12;
+/**
+ * Glute muscle radius.
+ * Athletic glute proportions.
+ * @korean 둔근반지름
+ */
+export declare const GLUTE_RADIUS = 0.06;
+/**
+ * Glute muscle length.
+ * @korean 둔근길이
+ */
+export declare const GLUTE_LENGTH = 0.14;
+/**
+ * Quadriceps muscle radius.
+ * Athletic thigh proportions.
+ * @korean 대퇴사두근반지름
+ */
+export declare const QUAD_RADIUS = 0.055;
+/**
+ * Quadriceps muscle length.
+ * @korean 대퇴사두근길이
+ */
+export declare const QUAD_LENGTH = 0.25;
+/**
+ * Hamstring muscle radius.
+ * @korean 햄스트링반지름
+ */
+export declare const HAMSTRING_RADIUS = 0.05;
+/**
+ * Hamstring muscle length.
+ * @korean 햄스트링길이
+ */
+export declare const HAMSTRING_LENGTH = 0.23;
+/**
+ * Combined thigh radius for clothing calculations.
+ * Uses the larger of quad/hamstring for proper fit.
+ * @korean 허벅지반지름
+ */
+export declare const THIGH_RADIUS: number;
+/**
+ * Calf muscle radius.
+ * Athletic calf proportions.
+ * @korean 종아리반지름
+ */
+export declare const CALF_RADIUS = 0.04;
+/**
+ * Calf muscle length.
+ * @korean 종아리길이
+ */
+export declare const CALF_LENGTH = 0.2;
+/**
+ * Latissimus dorsi muscle radius.
+ * @korean 광배근반지름
+ */
+export declare const LAT_RADIUS = 0.05;
+/**
+ * Latissimus dorsi muscle length.
+ * @korean 광배근길이
+ */
+export declare const LAT_LENGTH = 0.2;
+/**
+ * Trapezius muscle radius.
+ * @korean 승모근반지름
+ */
+export declare const TRAPEZIUS_RADIUS = 0.045;
+/**
+ * Trapezius muscle length.
+ * @korean 승모근길이
+ */
+export declare const TRAPEZIUS_LENGTH = 0.14;
+/**
+ * Erector spinae muscle radius.
+ * @korean 척추기립근반지름
+ */
+export declare const ERECTOR_SPINAE_RADIUS = 0.035;
+/**
+ * Erector spinae muscle length.
+ * @korean 척추기립근길이
+ */
+export declare const ERECTOR_SPINAE_LENGTH = 0.18;
+/**
+ * Standard fabric thickness for tight-fitting clothing.
+ * @korean 밀착의류두께
+ */
+export declare const CLOTHING_THICKNESS_TIGHT = 0.01;
+/**
+ * Standard fabric thickness for fitted clothing.
+ * @korean 맞춤의류두께
+ */
+export declare const CLOTHING_THICKNESS_FITTED = 0.015;
+/**
+ * Standard fabric thickness for loose clothing.
+ * @korean 헐렁한의류두께
+ */
+export declare const CLOTHING_THICKNESS_LOOSE = 0.025;
+/**
+ * Standard fabric thickness for oversized clothing.
+ * @korean 오버사이즈의류두께
+ */
+export declare const CLOTHING_THICKNESS_OVERSIZED = 0.04;
+/**
+ * Get clothing thickness based on fit type.
+ * @param fit - Clothing fit type
+ * @returns Fabric thickness in meters
+ * @korean 의류두께가져오기
+ */
+export declare const getClothingThickness: (fit: "tight" | "fitted" | "loose" | "oversized") => number;
+/**
+ * Calculate clothing radius for a body part.
+ * Adds fabric thickness to body radius with body thickness scaling.
+ *
+ * @param bodyRadius - Base body part radius
+ * @param bodyThickness - Body thickness multiplier (from muscle/fat mass)
+ * @param clothingThickness - Fabric thickness
+ * @returns Total clothing radius
+ * @korean 의류반지름계산
+ */
+export declare const calculateClothingRadius: (bodyRadius: number, bodyThickness: number, clothingThickness: number) => number;
+//# sourceMappingURL=bodyDimensions.d.ts.map

package/lib/constants/bodyDimensions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bodyDimensions.d.ts","sourceRoot":"","sources":["../../src/constants/bodyDimensions.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAMH;;;;GAIG;AACH,eAAO,MAAM,eAAe,OAAO,CAAC;AAEpC;;;GAGG;AACH,eAAO,MAAM,eAAe,OAAO,CAAC;AAMpC;;;;GAIG;AACH,eAAO,MAAM,YAAY,OAAO,CAAC;AAEjC;;;GAGG;AACH,eAAO,MAAM,YAAY,OAAO,CAAC;AAEjC;;;;GAIG;AACH,eAAO,MAAM,aAAa,QAAQ,CAAC;AAEnC;;;GAGG;AACH,eAAO,MAAM,aAAa,OAAO,CAAC;AAElC;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,QAAwC,CAAC;AAMtE;;;;GAIG;AACH,eAAO,MAAM,cAAc,QAAQ,CAAC;AAEpC;;;GAGG;AACH,eAAO,MAAM,cAAc,MAAM,CAAC;AAMlC;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,OAAO,CAAC;AAErC;;;GAGG;AACH,eAAO,MAAM,gBAAgB,OAAO,CAAC;AAErC;;;;GAIG;AACH,eAAO,MAAM,WAAW,MAAM,CAAC;AAE/B;;;GAGG;AACH,eAAO,MAAM,WAAW,OAAO,CAAC;AAEhC;;;;GAIG;AACH,eAAO,MAAM,UAAU,OAAO,CAAC;AAE/B;;;GAGG;AACH,eAAO,MAAM,UAAU,OAAO,CAAC;AAE/B;;;GAGG;AACH,eAAO,MAAM,eAAe,OAAO,CAAC;AAEpC;;;GAGG;AACH,eAAO,MAAM,eAAe,MAAM,CAAC;AAMnC;;;GAGG;AACH,eAAO,MAAM,iBAAiB,OAAO,CAAC;AAEtC;;;GAGG;AACH,eAAO,MAAM,iBAAiB,OAAO,CAAC;AAEtC;;;;GAIG;AACH,eAAO,MAAM,YAAY,OAAO,CAAC;AAEjC;;;GAGG;AACH,eAAO,MAAM,YAAY,OAAO,CAAC;AAMjC;;;;GAIG;AACH,eAAO,MAAM,WAAW,QAAQ,CAAC;AAEjC;;;GAGG;AACH,eAAO,MAAM,WAAW,OAAO,CAAC;AAEhC;;;GAGG;AACH,eAAO,MAAM,gBAAgB,OAAO,CAAC;AAErC;;;GAGG;AACH,eAAO,MAAM,gBAAgB,OAAO,CAAC;AAErC;;;;GAIG;AACH,eAAO,MAAM,YAAY,QAA0C,CAAC;AAMpE;;;;GAIG;AACH,eAAO,MAAM,WAAW,OAAO,CAAC;AAEhC;;;GAGG;AACH,eAAO,MAAM,WAAW,MAAM,CAAC;AAM/B;;;GAGG;AACH,eAAO,MAAM,UAAU,OAAO,CAAC;AAE/B;;;GAGG;AACH,eAAO,MAAM,UAAU,MAAM,CAAC;AAE9B;;;GAGG;AACH,eAAO,MAAM,gBAAgB,QAAQ,CAAC;AAEtC;;;GAGG;AACH,eAAO,MAAM,gBAAgB,OAAO,CAAC;AAErC;;;GAGG;AACH,eAAO,MAAM,qBAAqB,QAAQ,CAAC;AAE3C;;;GAGG;AACH,eAAO,MAAM,qBAAqB,OAAO,CAAC;AAM1C;;;GAGG;AACH,eAAO,MAAM,wBAAwB,OAAO,CAAC;AAE7C;;;GAGG;AACH,eAAO,MAAM,yBAAyB,QAAQ,CAAC;AAE/C;;;GAGG;AACH,eAAO,MAAM,wBAAwB,QAAQ,CAAC;AAE9C;;;GAGG;AACH,eAAO,MAAM,4BAA4B,OAAO,CAAC;AAEjD;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,GAC/B,KAAK,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,WAAW,KAC9C,MAaF,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,uBAAuB,GAClC,YAAY,MAAM,EAClB,eAAe,MAAM,EACrB,mBAAmB,MAAM,KACxB,MAEF,CAAC"}