blacktrigram 0.7.2

package/lib/components/shared/ui/CombatTimer.js

@@ -0,0 +1,145 @@
+import { KOREAN_COLORS } from "../../../types/constants/colors.js";
+import { FONT_FAMILY } from "../../../types/constants/typography.js";
+import "../../../types/constants/index.js";
+import { hexColorToCSS } from "../../../utils/colorUtils.js";
+/* empty css                        */
+import { useEffect, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/shared/ui/CombatTimer.tsx
+/**
+* CombatTimer Component - Displays combat round timer
+*
+* Korean: 전투 타이머 (Combat Timer)
+*
+* Shows remaining time in MM:SS format with:
+* - Color changes based on time remaining
+* - Pulsing animation when time is critical
+* - Korean cyberpunk aesthetic
+* - Responsive sizing
+*
+* @module components/shared/ui/CombatTimer
+* @category Shared UI
+*/
+var PULSE_ANIMATION_ID = "combat-timer-pulse-animation";
+var injectPulseAnimation = () => {
+	if (document.getElementById(PULSE_ANIMATION_ID)) return;
+	const style = document.createElement("style");
+	style.id = PULSE_ANIMATION_ID;
+	style.textContent = `
+    @keyframes pulse {
+      0% {
+        transform: translateX(-50%) scale(1);
+        opacity: 1;
+      }
+      50% {
+        transform: translateX(-50%) scale(1.05);
+        opacity: 0.9;
+      }
+      100% {
+        transform: translateX(-50%) scale(1);
+        opacity: 1;
+      }
+    }
+  `;
+	document.head.appendChild(style);
+};
+/**
+* Get timer color based on warning level
+*/
+function getTimerColor(warningLevel, isTimeUp) {
+	if (isTimeUp) return KOREAN_COLORS.NEGATIVE_RED;
+	switch (warningLevel) {
+		case "urgent": return KOREAN_COLORS.NEGATIVE_RED;
+		case "warning": return KOREAN_COLORS.SECONDARY_YELLOW;
+		default: return KOREAN_COLORS.PRIMARY_CYAN;
+	}
+}
+/**
+* CombatTimer Component
+*
+* Displays round timer with Korean cyberpunk aesthetic and responsive design.
+*
+* Features:
+* - MM:SS format display
+* - Color changes: cyan (>10s), yellow (≤10s), red (≤5s)
+* - Pulsing animation when time ≤5s
+* - "Time's Up!" message when timer reaches 0
+* - Responsive sizing for mobile/tablet/desktop
+* - Korean-English bilingual support
+*
+* Korean: 전투 타이머 컴포넌트
+*
+* @example
+* ```tsx
+* <CombatTimer
+*   formattedTime="03:45"
+*   warningLevel="none"
+*   isTimeUp={false}
+*   isMobile={false}
+* />
+* ```
+*/
+var CombatTimer = ({ formattedTime, warningLevel, isTimeUp, isMobile, style = {} }) => {
+	useEffect(() => {
+		injectPulseAnimation();
+	}, []);
+	const timerColor = getTimerColor(warningLevel, isTimeUp);
+	const timerColorCSS = useMemo(() => hexColorToCSS(timerColor), [timerColor]);
+	const bgColor = useMemo(() => hexColorToCSS(KOREAN_COLORS.UI_BACKGROUND_DARK), []);
+	const borderColor = useMemo(() => {
+		if (isTimeUp) return hexColorToCSS(KOREAN_COLORS.NEGATIVE_RED);
+		if (warningLevel === "urgent") return hexColorToCSS(KOREAN_COLORS.NEGATIVE_RED);
+		if (warningLevel === "warning") return hexColorToCSS(KOREAN_COLORS.SECONDARY_YELLOW);
+		return hexColorToCSS(KOREAN_COLORS.PRIMARY_CYAN);
+	}, [warningLevel, isTimeUp]);
+	const shouldFlash = warningLevel === "urgent" || isTimeUp;
+	const fontSize = isMobile ? "32px" : "48px";
+	const labelFontSize = isMobile ? "12px" : "14px";
+	const displayText = isTimeUp ? "시간 종료 | Time's Up!" : formattedTime;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": "combat-timer",
+		role: "timer",
+		"aria-live": "polite",
+		"aria-atomic": "true",
+		"aria-label": `Time remaining: ${formattedTime}`,
+		className: "hud-animated",
+		style: {
+			position: "absolute",
+			top: isMobile ? "8px" : "12px",
+			left: "50%",
+			transform: "translateX(-50%)",
+			fontSize,
+			fontFamily: "monospace",
+			fontWeight: "bold",
+			color: timerColorCSS,
+			textShadow: `0 0 ${isMobile ? "8px" : "12px"} ${timerColorCSS}, 0 0 ${isMobile ? "16px" : "24px"} ${timerColorCSS}`,
+			padding: isMobile ? "8px 16px" : "12px 24px",
+			backgroundColor: `${bgColor}dd`,
+			border: `2px solid ${borderColor}`,
+			borderRadius: isMobile ? "6px" : "8px",
+			animation: shouldFlash ? "timerFlash 1s ease-in-out infinite" : "none",
+			zIndex: 100,
+			pointerEvents: "none",
+			userSelect: "none",
+			minWidth: isMobile ? "120px" : "160px",
+			textAlign: "center",
+			boxShadow: `0 0 ${isMobile ? "12px" : "20px"} ${borderColor}40`,
+			transition: "all 0.3s ease-in-out",
+			...style
+		},
+		children: [!isTimeUp && /* @__PURE__ */ jsx("div", {
+			style: {
+				fontSize: labelFontSize,
+				fontFamily: FONT_FAMILY.KOREAN,
+				color: timerColorCSS,
+				marginBottom: "2px",
+				opacity: .8
+			},
+			children: "시간 | TIME"
+		}), /* @__PURE__ */ jsx("div", { children: displayText })]
+	});
+};
+//#endregion
+export { CombatTimer as default };
+
+//# sourceMappingURL=CombatTimer.js.map

package/lib/components/shared/ui/CombatTimer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CombatTimer.js","names":[],"sources":["../../../../src/components/shared/ui/CombatTimer.tsx"],"sourcesContent":["/**\n * CombatTimer Component - Displays combat round timer\n *\n * Korean: 전투 타이머 (Combat Timer)\n *\n * Shows remaining time in MM:SS format with:\n * - Color changes based on time remaining\n * - Pulsing animation when time is critical\n * - Korean cyberpunk aesthetic\n * - Responsive sizing\n *\n * @module components/shared/ui/CombatTimer\n * @category Shared UI\n */\n\nimport React, { useMemo, useEffect } from \"react\";\nimport { KOREAN_COLORS, FONT_FAMILY } from \"@/types/constants\";\nimport { hexColorToCSS } from \"../../../utils/colorUtils\";\nimport { TimerWarningLevel } from \"../../../hooks/useCombatTimer\";\nimport \"../three/ui/HUDAnimations.css\";\n\n// Define CSS animation once at module level to avoid re-insertion\nconst PULSE_ANIMATION_ID = \"combat-timer-pulse-animation\";\n\nconst injectPulseAnimation = () => {\n  // Check if style already exists in DOM instead of using module-level flag\n  if (document.getElementById(PULSE_ANIMATION_ID)) return;\n\n  const style = document.createElement(\"style\");\n  style.id = PULSE_ANIMATION_ID;\n  style.textContent = `\n    @keyframes pulse {\n      0% {\n        transform: translateX(-50%) scale(1);\n        opacity: 1;\n      }\n      50% {\n        transform: translateX(-50%) scale(1.05);\n        opacity: 0.9;\n      }\n      100% {\n        transform: translateX(-50%) scale(1);\n        opacity: 1;\n      }\n    }\n  `;\n  document.head.appendChild(style);\n};\n\n/**\n * Props for the CombatTimer component\n */\nexport interface CombatTimerProps {\n  /** Formatted time string (MM:SS) */\n  readonly formattedTime: string;\n  /** Current warning level */\n  readonly warningLevel: TimerWarningLevel;\n  /** Whether time is up */\n  readonly isTimeUp: boolean;\n  /** Whether layout should adapt for mobile screens */\n  readonly isMobile: boolean;\n  /** Optional custom position styling */\n  readonly style?: React.CSSProperties;\n}\n\n/**\n * Get timer color based on warning level\n */\nfunction getTimerColor(\n  warningLevel: TimerWarningLevel,\n  isTimeUp: boolean,\n): number {\n  if (isTimeUp) {\n    return KOREAN_COLORS.NEGATIVE_RED; // Red for time up\n  }\n  switch (warningLevel) {\n    case \"urgent\":\n      return KOREAN_COLORS.NEGATIVE_RED; // Red (≤5s)\n    case \"warning\":\n      return KOREAN_COLORS.SECONDARY_YELLOW; // Yellow (≤10s)\n    case \"none\":\n    default:\n      return KOREAN_COLORS.PRIMARY_CYAN; // Cyan (>10s)\n  }\n}\n\n/**\n * CombatTimer Component\n *\n * Displays round timer with Korean cyberpunk aesthetic and responsive design.\n *\n * Features:\n * - MM:SS format display\n * - Color changes: cyan (>10s), yellow (≤10s), red (≤5s)\n * - Pulsing animation when time ≤5s\n * - \"Time's Up!\" message when timer reaches 0\n * - Responsive sizing for mobile/tablet/desktop\n * - Korean-English bilingual support\n *\n * Korean: 전투 타이머 컴포넌트\n *\n * @example\n * ```tsx\n * <CombatTimer\n *   formattedTime=\"03:45\"\n *   warningLevel=\"none\"\n *   isTimeUp={false}\n *   isMobile={false}\n * />\n * ```\n */\nexport const CombatTimer: React.FC<CombatTimerProps> = ({\n  formattedTime,\n  warningLevel,\n  isTimeUp,\n  isMobile,\n  style = {},\n}) => {\n  // Inject CSS animation once on mount\n  useEffect(() => {\n    injectPulseAnimation();\n  }, []);\n\n  // Get timer color\n  const timerColor = getTimerColor(warningLevel, isTimeUp);\n  const timerColorCSS = useMemo(() => hexColorToCSS(timerColor), [timerColor]);\n\n  // Background color with opacity\n  const bgColor = useMemo(\n    () => hexColorToCSS(KOREAN_COLORS.UI_BACKGROUND_DARK),\n    [],\n  );\n\n  // Border color based on warning level\n  const borderColor = useMemo(() => {\n    if (isTimeUp) return hexColorToCSS(KOREAN_COLORS.NEGATIVE_RED);\n    if (warningLevel === \"urgent\")\n      return hexColorToCSS(KOREAN_COLORS.NEGATIVE_RED);\n    if (warningLevel === \"warning\")\n      return hexColorToCSS(KOREAN_COLORS.SECONDARY_YELLOW);\n    return hexColorToCSS(KOREAN_COLORS.PRIMARY_CYAN);\n  }, [warningLevel, isTimeUp]);\n\n  // Should flash when urgent or time is up\n  const shouldFlash = warningLevel === \"urgent\" || isTimeUp;\n\n  // Font sizes based on screen size\n  const fontSize = isMobile ? \"32px\" : \"48px\";\n  const labelFontSize = isMobile ? \"12px\" : \"14px\";\n\n  // Display text\n  const displayText = isTimeUp ? \"시간 종료 | Time's Up!\" : formattedTime;\n\n  return (\n    <div\n      data-testid=\"combat-timer\"\n      role=\"timer\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\"\n      aria-label={`Time remaining: ${formattedTime}`}\n      className=\"hud-animated\"\n      style={{\n        position: \"absolute\",\n        top: isMobile ? \"8px\" : \"12px\",\n        left: \"50%\",\n        transform: \"translateX(-50%)\",\n        fontSize,\n        fontFamily: \"monospace\",\n        fontWeight: \"bold\",\n        color: timerColorCSS,\n        textShadow: `0 0 ${isMobile ? \"8px\" : \"12px\"} ${timerColorCSS}, 0 0 ${\n          isMobile ? \"16px\" : \"24px\"\n        } ${timerColorCSS}`,\n        padding: isMobile ? \"8px 16px\" : \"12px 24px\",\n        backgroundColor: `${bgColor}dd`,\n        border: `2px solid ${borderColor}`,\n        borderRadius: isMobile ? \"6px\" : \"8px\",\n        animation: shouldFlash ? \"timerFlash 1s ease-in-out infinite\" : \"none\",\n        zIndex: 100,\n        pointerEvents: \"none\",\n        userSelect: \"none\",\n        minWidth: isMobile ? \"120px\" : \"160px\",\n        textAlign: \"center\",\n        boxShadow: `0 0 ${isMobile ? \"12px\" : \"20px\"} ${borderColor}40`,\n        transition: \"all 0.3s ease-in-out\",\n        ...style,\n      }}\n    >\n      {/* Label */}\n      {!isTimeUp && (\n        <div\n          style={{\n            fontSize: labelFontSize,\n            fontFamily: FONT_FAMILY.KOREAN,\n            color: timerColorCSS,\n            marginBottom: \"2px\",\n            opacity: 0.8,\n          }}\n        >\n          시간 | TIME\n        </div>\n      )}\n\n      {/* Timer display */}\n      <div>{displayText}</div>\n    </div>\n  );\n};\n\nexport default CombatTimer;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAsBA,IAAM,qBAAqB;AAE3B,IAAM,6BAA6B;AAEjC,KAAI,SAAS,eAAe,mBAAmB,CAAE;CAEjD,MAAM,QAAQ,SAAS,cAAc,QAAQ;AAC7C,OAAM,KAAK;AACX,OAAM,cAAc;;;;;;;;;;;;;;;;AAgBpB,UAAS,KAAK,YAAY,MAAM;;;;;AAsBlC,SAAS,cACP,cACA,UACQ;AACR,KAAI,SACF,QAAO,cAAc;AAEvB,SAAQ,cAAR;EACE,KAAK,SACH,QAAO,cAAc;EACvB,KAAK,UACH,QAAO,cAAc;EAEvB,QACE,QAAO,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6B3B,IAAa,eAA2C,EACtD,eACA,cACA,UACA,UACA,QAAQ,EAAE,OACN;AAEJ,iBAAgB;AACd,wBAAsB;IACrB,EAAE,CAAC;CAGN,MAAM,aAAa,cAAc,cAAc,SAAS;CACxD,MAAM,gBAAgB,cAAc,cAAc,WAAW,EAAE,CAAC,WAAW,CAAC;CAG5E,MAAM,UAAU,cACR,cAAc,cAAc,mBAAmB,EACrD,EAAE,CACH;CAGD,MAAM,cAAc,cAAc;AAChC,MAAI,SAAU,QAAO,cAAc,cAAc,aAAa;AAC9D,MAAI,iBAAiB,SACnB,QAAO,cAAc,cAAc,aAAa;AAClD,MAAI,iBAAiB,UACnB,QAAO,cAAc,cAAc,iBAAiB;AACtD,SAAO,cAAc,cAAc,aAAa;IAC/C,CAAC,cAAc,SAAS,CAAC;CAG5B,MAAM,cAAc,iBAAiB,YAAY;CAGjD,MAAM,WAAW,WAAW,SAAS;CACrC,MAAM,gBAAgB,WAAW,SAAS;CAG1C,MAAM,cAAc,WAAW,uBAAuB;AAEtD,QACE,qBAAC,OAAD;EACE,eAAY;EACZ,MAAK;EACL,aAAU;EACV,eAAY;EACZ,cAAY,mBAAmB;EAC/B,WAAU;EACV,OAAO;GACL,UAAU;GACV,KAAK,WAAW,QAAQ;GACxB,MAAM;GACN,WAAW;GACX;GACA,YAAY;GACZ,YAAY;GACZ,OAAO;GACP,YAAY,OAAO,WAAW,QAAQ,OAAO,GAAG,cAAc,QAC5D,WAAW,SAAS,OACrB,GAAG;GACJ,SAAS,WAAW,aAAa;GACjC,iBAAiB,GAAG,QAAQ;GAC5B,QAAQ,aAAa;GACrB,cAAc,WAAW,QAAQ;GACjC,WAAW,cAAc,uCAAuC;GAChE,QAAQ;GACR,eAAe;GACf,YAAY;GACZ,UAAU,WAAW,UAAU;GAC/B,WAAW;GACX,WAAW,OAAO,WAAW,SAAS,OAAO,GAAG,YAAY;GAC5D,YAAY;GACZ,GAAG;GACJ;YAhCH,CAmCG,CAAC,YACA,oBAAC,OAAD;GACE,OAAO;IACL,UAAU;IACV,YAAY,YAAY;IACxB,OAAO;IACP,cAAc;IACd,SAAS;IACV;aACF;GAEK,CAAA,EAIR,oBAAC,OAAD,EAAA,UAAM,aAAkB,CAAA,CACpB"}

package/lib/components/shared/ui/ErrorBoundary.d.ts

@@ -0,0 +1,44 @@
+import React, { Component, ReactNode } from "react";
+/**
+ * Props for the ErrorBoundary component
+ */
+interface Props {
+    /** Child components to be wrapped by the error boundary */
+    readonly children: ReactNode;
+    /** Optional custom fallback UI to display instead of default error UI */
+    readonly fallback?: ReactNode;
+}
+/**
+ * State for the ErrorBoundary component
+ */
+interface State {
+    /** Whether an error has been caught */
+    readonly hasError: boolean;
+    /** The caught error object, null if no error */
+    readonly error: Error | null;
+}
+/**
+ * ErrorBoundary component to catch and display errors gracefully.
+ * Prevents black screen errors and provides user-friendly error UI with Korean/English bilingual support.
+ *
+ * @example
+ * ```tsx
+ * <ErrorBoundary>
+ *   <App />
+ * </ErrorBoundary>
+ * ```
+ */
+export declare class ErrorBoundary extends Component<Props, State> {
+    private didRecover;
+    constructor(props: Props);
+    static getDerivedStateFromError(error: Error): State;
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+    /**
+     * Reset error state and attempt recovery without full page reload.
+     * Full reload is used as a last resort if recovery fails.
+     */
+    private handleReset;
+    render(): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+}
+export {};
+//# sourceMappingURL=ErrorBoundary.d.ts.map

package/lib/components/shared/ui/ErrorBoundary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBoundary.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/ui/ErrorBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpD;;GAEG;AACH,UAAU,KAAK;IACb,2DAA2D;IAC3D,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC7B,yEAAyE;IACzE,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;CAC/B;AAED;;GAEG;AACH,UAAU,KAAK;IACb,uCAAuC;IACvC,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,gDAAgD;IAChD,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CAC9B;AAED;;;;;;;;;;GAUG;AACH,qBAAa,aAAc,SAAQ,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;IACxD,OAAO,CAAC,UAAU,CAAS;gBAEf,KAAK,EAAE,KAAK;IAKxB,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK;IAIpD,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS;IAI1D;;;OAGG;IACH,OAAO,CAAC,WAAW,CAajB;IAEF,MAAM;CAyDP"}

package/lib/components/shared/ui/ErrorModal.d.ts

@@ -0,0 +1,21 @@
+/**
+ * ErrorModal - Korean-themed error dialog component
+ * Provides user-friendly error recovery with retry functionality
+ * Follows Korean cyberpunk aesthetic and accessibility best practices
+ *
+ * Now uses BaseButtonOverlayHtml for consistent Korean theming
+ */
+import React from "react";
+interface ErrorModalProps {
+    readonly message: string;
+    readonly onRetry: () => void;
+    readonly onContinue: () => void;
+}
+/**
+ * Error modal component with Korean cyberpunk styling
+ * Provides retry and continue options for graceful error recovery
+ * Includes keyboard navigation
+ */
+export declare const ErrorModal: React.FC<ErrorModalProps>;
+export default ErrorModal;
+//# sourceMappingURL=ErrorModal.d.ts.map

package/lib/components/shared/ui/ErrorModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorModal.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/ui/ErrorModal.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAyC,MAAM,OAAO,CAAC;AAK9D,UAAU,eAAe;IACvB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;IAC7B,QAAQ,CAAC,UAAU,EAAE,MAAM,IAAI,CAAC;CACjC;AAUD;;;;GAIG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAgIhD,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/shared/ui/ErrorModal.js

@@ -0,0 +1,133 @@
+import { KOREAN_COLORS } from "../../../types/constants/colors.js";
+import { FONT_FAMILY } from "../../../types/constants/typography.js";
+import "../../../types/constants/index.js";
+import { toHex } from "../../../utils/colorUtils.js";
+import { BaseButtonOverlayHtml } from "../base/BaseButtonOverlayHtml.js";
+import "../base/index.js";
+import { useCallback, useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/shared/ui/ErrorModal.tsx
+/**
+* ErrorModal - Korean-themed error dialog component
+* Provides user-friendly error recovery with retry functionality
+* Follows Korean cyberpunk aesthetic and accessibility best practices
+*
+* Now uses BaseButtonOverlayHtml for consistent Korean theming
+*/
+var HEX_COLORS = {
+	PRIMARY_CYAN: toHex(KOREAN_COLORS.PRIMARY_CYAN),
+	ACCENT_GOLD: toHex(KOREAN_COLORS.ACCENT_GOLD),
+	UI_BACKGROUND_DARK: toHex(KOREAN_COLORS.UI_BACKGROUND_DARK),
+	TEXT_ERROR: toHex(KOREAN_COLORS.TEXT_ERROR)
+};
+/**
+* Error modal component with Korean cyberpunk styling
+* Provides retry and continue options for graceful error recovery
+* Includes keyboard navigation
+*/
+var ErrorModal = ({ message, onRetry, onContinue }) => {
+	const containerRef = useRef(null);
+	const handleRetry = useCallback(() => {
+		onRetry();
+	}, [onRetry]);
+	const handleContinue = useCallback(() => {
+		onContinue();
+	}, [onContinue]);
+	useEffect(() => {
+		const handleKeyDown = (e) => {
+			if (e.key === "Escape") handleContinue();
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [handleContinue]);
+	return /* @__PURE__ */ jsx("div", {
+		role: "alertdialog",
+		"aria-labelledby": "error-modal-title",
+		"aria-describedby": "error-modal-description",
+		style: {
+			position: "fixed",
+			top: 0,
+			left: 0,
+			width: "100%",
+			height: "100%",
+			backgroundColor: "rgba(0, 0, 0, 0.8)",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			zIndex: 9999,
+			fontFamily: FONT_FAMILY.CYBER
+		},
+		"data-testid": "error-modal",
+		children: /* @__PURE__ */ jsxs("div", {
+			style: {
+				backgroundColor: `#${HEX_COLORS.UI_BACKGROUND_DARK}`,
+				border: `2px solid #${HEX_COLORS.TEXT_ERROR}`,
+				borderRadius: "8px",
+				padding: "32px",
+				maxWidth: "500px",
+				boxShadow: `0 8px 32px #${HEX_COLORS.TEXT_ERROR}40`
+			},
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					style: {
+						textAlign: "center",
+						fontSize: "48px",
+						marginBottom: "16px"
+					},
+					"aria-hidden": "true",
+					children: "⚠️"
+				}),
+				/* @__PURE__ */ jsx("h2", {
+					id: "error-modal-title",
+					style: {
+						color: `#${HEX_COLORS.TEXT_ERROR}`,
+						fontSize: "24px",
+						fontWeight: "bold",
+						textAlign: "center",
+						marginBottom: "16px"
+					},
+					children: "오류 발생 | Error Occurred"
+				}),
+				/* @__PURE__ */ jsx("p", {
+					id: "error-modal-description",
+					style: {
+						color: `#${HEX_COLORS.PRIMARY_CYAN}`,
+						fontSize: "16px",
+						textAlign: "center",
+						marginBottom: "32px",
+						lineHeight: "1.5"
+					},
+					children: message
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					ref: containerRef,
+					style: {
+						display: "flex",
+						gap: "16px",
+						justifyContent: "center"
+					},
+					children: [/* @__PURE__ */ jsx(BaseButtonOverlayHtml, {
+						korean: "재시도",
+						english: "Retry",
+						onClick: handleRetry,
+						variant: "primary",
+						size: "md",
+						testId: "error-modal-retry",
+						autoFocus: true
+					}), /* @__PURE__ */ jsx(BaseButtonOverlayHtml, {
+						korean: "무음으로 계속",
+						english: "Continue Without Sound",
+						onClick: handleContinue,
+						variant: "secondary",
+						size: "md",
+						testId: "error-modal-continue"
+					})]
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { ErrorModal as default };
+
+//# sourceMappingURL=ErrorModal.js.map

package/lib/components/shared/ui/ErrorModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorModal.js","names":[],"sources":["../../../../src/components/shared/ui/ErrorModal.tsx"],"sourcesContent":["/**\n * ErrorModal - Korean-themed error dialog component\n * Provides user-friendly error recovery with retry functionality\n * Follows Korean cyberpunk aesthetic and accessibility best practices\n *\n * Now uses BaseButtonOverlayHtml for consistent Korean theming\n */\n\nimport React, { useCallback, useEffect, useRef } from \"react\";\nimport { KOREAN_COLORS, FONT_FAMILY } from \"@/types/constants\";\nimport { toHex } from \"../../../utils/colorUtils\";\nimport { BaseButtonOverlayHtml } from \"../base\";\n\ninterface ErrorModalProps {\n  readonly message: string;\n  readonly onRetry: () => void;\n  readonly onContinue: () => void;\n}\n\n// Pre-compute hex colors from Korean color constants\nconst HEX_COLORS = {\n  PRIMARY_CYAN: toHex(KOREAN_COLORS.PRIMARY_CYAN),\n  ACCENT_GOLD: toHex(KOREAN_COLORS.ACCENT_GOLD),\n  UI_BACKGROUND_DARK: toHex(KOREAN_COLORS.UI_BACKGROUND_DARK),\n  TEXT_ERROR: toHex(KOREAN_COLORS.TEXT_ERROR),\n} as const;\n\n/**\n * Error modal component with Korean cyberpunk styling\n * Provides retry and continue options for graceful error recovery\n * Includes keyboard navigation\n */\nexport const ErrorModal: React.FC<ErrorModalProps> = ({\n  message,\n  onRetry,\n  onContinue,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const handleRetry = useCallback(() => {\n    onRetry();\n  }, [onRetry]);\n\n  const handleContinue = useCallback(() => {\n    onContinue();\n  }, [onContinue]);\n\n  // Handle keyboard events (Escape key to close)\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") {\n        handleContinue();\n      }\n    };\n\n    document.addEventListener(\"keydown\", handleKeyDown);\n    return () => document.removeEventListener(\"keydown\", handleKeyDown);\n  }, [handleContinue]);\n\n  return (\n    <div\n      role=\"alertdialog\"\n      aria-labelledby=\"error-modal-title\"\n      aria-describedby=\"error-modal-description\"\n      style={{\n        position: \"fixed\",\n        top: 0,\n        left: 0,\n        width: \"100%\",\n        height: \"100%\",\n        backgroundColor: \"rgba(0, 0, 0, 0.8)\",\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        zIndex: 9999,\n        fontFamily: FONT_FAMILY.CYBER,\n      }}\n      data-testid=\"error-modal\"\n    >\n      <div\n        style={{\n          backgroundColor: `#${HEX_COLORS.UI_BACKGROUND_DARK}`,\n          border: `2px solid #${HEX_COLORS.TEXT_ERROR}`,\n          borderRadius: \"8px\",\n          padding: \"32px\",\n          maxWidth: \"500px\",\n          boxShadow: `0 8px 32px #${HEX_COLORS.TEXT_ERROR}40`,\n        }}\n      >\n        {/* Error Icon */}\n        <div\n          style={{\n            textAlign: \"center\",\n            fontSize: \"48px\",\n            marginBottom: \"16px\",\n          }}\n          aria-hidden=\"true\"\n        >\n          ⚠️\n        </div>\n\n        {/* Title */}\n        <h2\n          id=\"error-modal-title\"\n          style={{\n            color: `#${HEX_COLORS.TEXT_ERROR}`,\n            fontSize: \"24px\",\n            fontWeight: \"bold\",\n            textAlign: \"center\",\n            marginBottom: \"16px\",\n          }}\n        >\n          오류 발생 | Error Occurred\n        </h2>\n\n        {/* Message */}\n        <p\n          id=\"error-modal-description\"\n          style={{\n            color: `#${HEX_COLORS.PRIMARY_CYAN}`,\n            fontSize: \"16px\",\n            textAlign: \"center\",\n            marginBottom: \"32px\",\n            lineHeight: \"1.5\",\n          }}\n        >\n          {message}\n        </p>\n\n        {/* Action Buttons - Now using BaseButtonOverlayHtml */}\n        <div\n          ref={containerRef}\n          style={{\n            display: \"flex\",\n            gap: \"16px\",\n            justifyContent: \"center\",\n          }}\n        >\n          <BaseButtonOverlayHtml\n            korean=\"재시도\"\n            english=\"Retry\"\n            onClick={handleRetry}\n            variant=\"primary\"\n            size=\"md\"\n            testId=\"error-modal-retry\"\n            autoFocus={true}\n          />\n\n          <BaseButtonOverlayHtml\n            korean=\"무음으로 계속\"\n            english=\"Continue Without Sound\"\n            onClick={handleContinue}\n            variant=\"secondary\"\n            size=\"md\"\n            testId=\"error-modal-continue\"\n          />\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default ErrorModal;\n"],"mappings":";;;;;;;;;;;;;;;;AAoBA,IAAM,aAAa;CACjB,cAAc,MAAM,cAAc,aAAa;CAC/C,aAAa,MAAM,cAAc,YAAY;CAC7C,oBAAoB,MAAM,cAAc,mBAAmB;CAC3D,YAAY,MAAM,cAAc,WAAW;CAC5C;;;;;;AAOD,IAAa,cAAyC,EACpD,SACA,SACA,iBACI;CACJ,MAAM,eAAe,OAAuB,KAAK;CAEjD,MAAM,cAAc,kBAAkB;AACpC,WAAS;IACR,CAAC,QAAQ,CAAC;CAEb,MAAM,iBAAiB,kBAAkB;AACvC,cAAY;IACX,CAAC,WAAW,CAAC;AAGhB,iBAAgB;EACd,MAAM,iBAAiB,MAAqB;AAC1C,OAAI,EAAE,QAAQ,SACZ,iBAAgB;;AAIpB,WAAS,iBAAiB,WAAW,cAAc;AACnD,eAAa,SAAS,oBAAoB,WAAW,cAAc;IAClE,CAAC,eAAe,CAAC;AAEpB,QACE,oBAAC,OAAD;EACE,MAAK;EACL,mBAAgB;EAChB,oBAAiB;EACjB,OAAO;GACL,UAAU;GACV,KAAK;GACL,MAAM;GACN,OAAO;GACP,QAAQ;GACR,iBAAiB;GACjB,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,QAAQ;GACR,YAAY,YAAY;GACzB;EACD,eAAY;YAEZ,qBAAC,OAAD;GACE,OAAO;IACL,iBAAiB,IAAI,WAAW;IAChC,QAAQ,cAAc,WAAW;IACjC,cAAc;IACd,SAAS;IACT,UAAU;IACV,WAAW,eAAe,WAAW,WAAW;IACjD;aARH;IAWE,oBAAC,OAAD;KACE,OAAO;MACL,WAAW;MACX,UAAU;MACV,cAAc;MACf;KACD,eAAY;eACb;KAEK,CAAA;IAGN,oBAAC,MAAD;KACE,IAAG;KACH,OAAO;MACL,OAAO,IAAI,WAAW;MACtB,UAAU;MACV,YAAY;MACZ,WAAW;MACX,cAAc;MACf;eACF;KAEI,CAAA;IAGL,oBAAC,KAAD;KACE,IAAG;KACH,OAAO;MACL,OAAO,IAAI,WAAW;MACtB,UAAU;MACV,WAAW;MACX,cAAc;MACd,YAAY;MACb;eAEA;KACC,CAAA;IAGJ,qBAAC,OAAD;KACE,KAAK;KACL,OAAO;MACL,SAAS;MACT,KAAK;MACL,gBAAgB;MACjB;eANH,CAQE,oBAAC,uBAAD;MACE,QAAO;MACP,SAAQ;MACR,SAAS;MACT,SAAQ;MACR,MAAK;MACL,QAAO;MACP,WAAW;MACX,CAAA,EAEF,oBAAC,uBAAD;MACE,QAAO;MACP,SAAQ;MACR,SAAS;MACT,SAAQ;MACR,MAAK;MACL,QAAO;MACP,CAAA,CACE;;IACF;;EACF,CAAA"}

package/lib/components/shared/ui/HUDSection.d.ts

@@ -0,0 +1,65 @@
+/**
+ * HUDSection - Reusable HUD section with Korean theming
+ *
+ * Provides consistent section styling for grouped HUD elements.
+ * Includes optional bilingual title support and Korean cyberpunk theming.
+ *
+ * Features:
+ * - Korean-English bilingual titles
+ * - Primary/Secondary variant styling
+ * - Responsive sizing
+ * - Consistent borders and backgrounds
+ *
+ * @module components/shared/ui
+ * @korean HUD섹션 - 한국 테마를 가진 재사용 가능한 HUD 섹션
+ */
+import React from 'react';
+/**
+ * Props for HUDSection component
+ */
+export interface HUDSectionProps {
+    /** English title (optional) */
+    readonly title?: string;
+    /** Korean title (optional) */
+    readonly titleKorean?: string;
+    /** Child elements */
+    readonly children: React.ReactNode;
+    /** Visual variant (primary or secondary) */
+    readonly variant?: 'primary' | 'secondary';
+    /** Internal padding in pixels */
+    readonly padding?: number;
+    /** Gap between items in pixels */
+    readonly gap?: number;
+    /** Additional CSS styles */
+    readonly style?: React.CSSProperties;
+    /** Test ID for testing */
+    readonly dataTestId?: string;
+    /** Whether mobile layout is active */
+    readonly isMobile?: boolean;
+    /** Whether to enable pointer events */
+    readonly pointerEvents?: boolean;
+}
+/**
+ * HUDSection Component
+ *
+ * Reusable section container for HUD elements with Korean theming.
+ * Displays optional bilingual title and wraps content with styled borders
+ * and backgrounds.
+ *
+ * @example
+ * ```tsx
+ * <HUDSection
+ *   title="Statistics"
+ *   titleKorean="통계"
+ *   variant="primary"
+ *   padding={12}
+ *   dataTestId="stats-section"
+ * >
+ *   <StatDisplay label="Hits" value={42} />
+ *   <StatDisplay label="Combos" value={12} />
+ * </HUDSection>
+ * ```
+ */
+export declare const HUDSection: React.FC<HUDSectionProps>;
+export default HUDSection;
+//# sourceMappingURL=HUDSection.d.ts.map

package/lib/components/shared/ui/HUDSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HUDSection.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/ui/HUDSection.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,+BAA+B;IAC/B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,8BAA8B;IAC9B,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,qBAAqB;IACrB,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,4CAA4C;IAC5C,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAC3C,iCAAiC;IACjC,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAC1B,kCAAkC;IAClC,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IACtB,4BAA4B;IAC5B,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,0BAA0B;IAC1B,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,sCAAsC;IACtC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,uCAAuC;IACvC,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC;CAClC;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA2EhD,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/shared/ui/LoadingState.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+/**
+ * Props for the LoadingState component.
+ *
+ * @property progress Loading progress as a percentage (0-100), or undefined for indeterminate.
+ * @property message Custom loading message to display.
+ *   @default '로드 중 | Loading...'
+ * @property stage Current loading stage, determines the stage-specific message.
+ *   Possible values:
+ *     - 'assets': Loading game assets
+ *     - 'audio': Initializing audio system
+ *     - 'initialization': Preparing game
+ *     - 'complete': Loading complete
+ *   @default 'initialization'
+ */
+export interface LoadingStateProps {
+    /**
+     * Loading progress as a percentage (0-100), or undefined for indeterminate
+     */
+    readonly progress?: number;
+    /**
+     * Custom loading message to display
+     * @default '로드 중 | Loading...'
+     */
+    readonly message?: string;
+    /**
+     * Current loading stage, determines the stage-specific message
+     * - assets: Loading game assets
+     * - audio: Initializing audio system
+     * - initialization: Preparing game
+     * - complete: Loading complete
+     * @default 'initialization'
+     */
+    readonly stage?: 'assets' | 'audio' | 'initialization' | 'complete';
+}
+/**
+ * LoadingState component with progress indication.
+ * Provides user feedback during asset loading and initialization with Korean/English bilingual support.
+ *
+ * @example
+ * ```tsx
+ * <LoadingState
+ *   progress={50}
+ *   message="로드 중 | Loading..."
+ *   stage="audio"
+ * />
+ * ```
+ */
+export declare const LoadingState: React.FC<LoadingStateProps>;
+//# sourceMappingURL=LoadingState.d.ts.map

package/lib/components/shared/ui/LoadingState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingState.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/ui/LoadingState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAE3B;;;OAGG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;;;;OAOG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,gBAAgB,GAAG,UAAU,CAAC;CACrE;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA6EpD,CAAC"}

package/lib/components/shared/ui/LoadingState.js

@@ -0,0 +1,92 @@
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/shared/ui/LoadingState.tsx
+/**
+* LoadingState component with progress indication.
+* Provides user feedback during asset loading and initialization with Korean/English bilingual support.
+* 
+* @example
+* ```tsx
+* <LoadingState
+*   progress={50}
+*   message="로드 중 | Loading..."
+*   stage="audio"
+* />
+* ```
+*/
+var LoadingState = ({ progress, message = "로드 중 | Loading...", stage = "initialization" }) => {
+	const stageText = {
+		assets: "자산 로드 중 | Loading Assets",
+		audio: "오디오 초기화 | Initializing Audio",
+		initialization: "게임 준비 중 | Preparing Game",
+		complete: "완료 | Complete"
+	};
+	const progressValue = progress !== void 0 && !Number.isNaN(progress) ? Math.min(100, Math.max(0, progress)) : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "loading-state",
+		role: "status",
+		"aria-live": "polite",
+		"aria-busy": "true",
+		"aria-label": progressValue !== void 0 ? `Loading progress: ${progressValue}%` : "Loading...",
+		"data-testid": "loading-state",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "loading-state__logo",
+				children: /* @__PURE__ */ jsxs("svg", {
+					width: "150",
+					height: "150",
+					viewBox: "0 0 150 150",
+					fill: "none",
+					xmlns: "http://www.w3.org/2000/svg",
+					"aria-label": "Black Trigram Logo",
+					children: [/* @__PURE__ */ jsx("rect", {
+						x: "50",
+						y: "30",
+						width: "20",
+						height: "90",
+						fill: "#00ffff"
+					}), /* @__PURE__ */ jsx("rect", {
+						x: "80",
+						y: "30",
+						width: "20",
+						height: "90",
+						fill: "#ffd700"
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsx("h1", {
+				className: "loading-state__title",
+				children: "흑괘 | BLACK TRIGRAM"
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "loading-state__progress",
+				role: "progressbar",
+				"aria-valuenow": progressValue,
+				"aria-valuemin": 0,
+				"aria-valuemax": 100,
+				"aria-label": progressValue !== void 0 ? `Loading progress: ${progressValue}%` : "Loading...",
+				"data-testid": "loading-progress-bar",
+				children: /* @__PURE__ */ jsx("div", {
+					className: `loading-state__progress-bar${progressValue === void 0 ? " loading-state__progress-bar--indeterminate" : ""}`,
+					style: progressValue !== void 0 ? { width: `${progressValue}%` } : void 0
+				})
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "loading-state__stage",
+				children: stageText[stage]
+			}),
+			message && /* @__PURE__ */ jsx("p", {
+				className: "loading-state__message",
+				children: message
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "loading-state__spinner",
+				"aria-label": "Loading spinner"
+			})
+		]
+	});
+};
+//#endregion
+export { LoadingState };
+
+//# sourceMappingURL=LoadingState.js.map

package/lib/components/shared/ui/LoadingState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingState.js","names":[],"sources":["../../../../src/components/shared/ui/LoadingState.tsx"],"sourcesContent":["import React from 'react';\n\n/**\n * Props for the LoadingState component.\n *\n * @property progress Loading progress as a percentage (0-100), or undefined for indeterminate.\n * @property message Custom loading message to display.\n *   @default '로드 중 | Loading...'\n * @property stage Current loading stage, determines the stage-specific message.\n *   Possible values:\n *     - 'assets': Loading game assets\n *     - 'audio': Initializing audio system\n *     - 'initialization': Preparing game\n *     - 'complete': Loading complete\n *   @default 'initialization'\n */\nexport interface LoadingStateProps {\n  /**\n   * Loading progress as a percentage (0-100), or undefined for indeterminate\n   */\n  readonly progress?: number;\n\n  /**\n   * Custom loading message to display\n   * @default '로드 중 | Loading...'\n   */\n  readonly message?: string;\n\n  /**\n   * Current loading stage, determines the stage-specific message\n   * - assets: Loading game assets\n   * - audio: Initializing audio system\n   * - initialization: Preparing game\n   * - complete: Loading complete\n   * @default 'initialization'\n   */\n  readonly stage?: 'assets' | 'audio' | 'initialization' | 'complete';\n}\n\n/**\n * LoadingState component with progress indication.\n * Provides user feedback during asset loading and initialization with Korean/English bilingual support.\n * \n * @example\n * ```tsx\n * <LoadingState\n *   progress={50}\n *   message=\"로드 중 | Loading...\"\n *   stage=\"audio\"\n * />\n * ```\n */\nexport const LoadingState: React.FC<LoadingStateProps> = ({\n  progress,\n  message = '로드 중 | Loading...',\n  stage = 'initialization',\n}) => {\n  const stageText = {\n    assets: '자산 로드 중 | Loading Assets',\n    audio: '오디오 초기화 | Initializing Audio',\n    initialization: '게임 준비 중 | Preparing Game',\n    complete: '완료 | Complete',\n  };\n\n  // Calculate progress value, undefined means indeterminate\n  // Handle NaN by treating it as indeterminate\n  const progressValue = progress !== undefined && !Number.isNaN(progress)\n    ? Math.min(100, Math.max(0, progress))\n    : undefined;\n\n  return (\n    <div\n      className=\"loading-state\"\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-busy=\"true\"\n      aria-label={progressValue !== undefined ? `Loading progress: ${progressValue}%` : 'Loading...'}\n      data-testid=\"loading-state\"\n    >\n      <div className=\"loading-state__logo\">\n        <svg\n          width=\"150\"\n          height=\"150\"\n          viewBox=\"0 0 150 150\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-label=\"Black Trigram Logo\"\n        >\n          {/* Black Trigram Symbol */}\n          <rect x=\"50\" y=\"30\" width=\"20\" height=\"90\" fill=\"#00ffff\" />\n          <rect x=\"80\" y=\"30\" width=\"20\" height=\"90\" fill=\"#ffd700\" />\n        </svg>\n      </div>\n\n      <h1 className=\"loading-state__title\">\n        흑괘 | BLACK TRIGRAM\n      </h1>\n\n      <div\n        className=\"loading-state__progress\"\n        role=\"progressbar\"\n        aria-valuenow={progressValue}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-label={progressValue !== undefined ? `Loading progress: ${progressValue}%` : 'Loading...'}\n        data-testid=\"loading-progress-bar\"\n      >\n        <div\n          className={`loading-state__progress-bar${progressValue === undefined ? ' loading-state__progress-bar--indeterminate' : ''}`}\n          style={progressValue !== undefined ? { width: `${progressValue}%` } : undefined}\n        />\n      </div>\n\n      <p className=\"loading-state__stage\">\n        {stageText[stage]}\n      </p>\n\n      {message && (\n        <p className=\"loading-state__message\">\n          {message}\n        </p>\n      )}\n\n      <div\n        className=\"loading-state__spinner\"\n        aria-label=\"Loading spinner\"\n      />\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAoDA,IAAa,gBAA6C,EACxD,UACA,UAAU,qBACV,QAAQ,uBACJ;CACJ,MAAM,YAAY;EAChB,QAAQ;EACR,OAAO;EACP,gBAAgB;EAChB,UAAU;EACX;CAID,MAAM,gBAAgB,aAAa,KAAA,KAAa,CAAC,OAAO,MAAM,SAAS,GACnE,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,SAAS,CAAC,GACpC,KAAA;AAEJ,QACE,qBAAC,OAAD;EACE,WAAU;EACV,MAAK;EACL,aAAU;EACV,aAAU;EACV,cAAY,kBAAkB,KAAA,IAAY,qBAAqB,cAAc,KAAK;EAClF,eAAY;YANd;GAQE,oBAAC,OAAD;IAAK,WAAU;cACb,qBAAC,OAAD;KACE,OAAM;KACN,QAAO;KACP,SAAQ;KACR,MAAK;KACL,OAAM;KACN,cAAW;eANb,CASE,oBAAC,QAAD;MAAM,GAAE;MAAK,GAAE;MAAK,OAAM;MAAK,QAAO;MAAK,MAAK;MAAY,CAAA,EAC5D,oBAAC,QAAD;MAAM,GAAE;MAAK,GAAE;MAAK,OAAM;MAAK,QAAO;MAAK,MAAK;MAAY,CAAA,CACxD;;IACF,CAAA;GAEN,oBAAC,MAAD;IAAI,WAAU;cAAuB;IAEhC,CAAA;GAEL,oBAAC,OAAD;IACE,WAAU;IACV,MAAK;IACL,iBAAe;IACf,iBAAe;IACf,iBAAe;IACf,cAAY,kBAAkB,KAAA,IAAY,qBAAqB,cAAc,KAAK;IAClF,eAAY;cAEZ,oBAAC,OAAD;KACE,WAAW,8BAA8B,kBAAkB,KAAA,IAAY,gDAAgD;KACvH,OAAO,kBAAkB,KAAA,IAAY,EAAE,OAAO,GAAG,cAAc,IAAI,GAAG,KAAA;KACtE,CAAA;IACE,CAAA;GAEN,oBAAC,KAAD;IAAG,WAAU;cACV,UAAU;IACT,CAAA;GAEH,WACC,oBAAC,KAAD;IAAG,WAAU;cACV;IACC,CAAA;GAGN,oBAAC,OAAD;IACE,WAAU;IACV,cAAW;IACX,CAAA;GACE"}