npm - blacktrigram - Versions diffs - 0.7.2 - Mend

blacktrigram 0.7.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1853) hide show

package/lib/components/screens/combat/components/controls/KeyboardHints.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"KeyboardHints.js","names":[],"sources":["../../../../../../src/components/screens/combat/components/controls/KeyboardHints.tsx"],"sourcesContent":["/**\n * KeyboardHints - On-screen control overlay\n * Displays keyboard bindings for trigram stances and combat actions\n * \n * Refactored to use useKoreanTheme for consistent theming\n * \n * @module components/combat/components/KeyboardHints\n * @category Combat UI\n * @korean 키보드힌트\n */\n\nimport { Html } from \"@react-three/drei\";\nimport React, { useMemo } from \"react\";\nimport { useKoreanTheme } from \"../../../../shared/base/useKoreanTheme\";\nimport { hexToRgbaString } from \"../../../../../utils/colorUtils\";\nimport { ControlBinding } from \"../../../../../utils/controlMapping\";\n\n/**\n * Props for KeyboardHints component\n */\nexport interface KeyboardHintsProps {\n /** Whether hints are visible */\n readonly visible: boolean;\n /** Current stance index (0-7) for highlighting */\n readonly currentStance: number;\n /** Mobile layout flag */\n readonly isMobile?: boolean;\n /** Custom key bindings */\n readonly customBindings?: ControlBinding;\n}\n\n/**\n * KeyboardHints Component\n * \n * Displays an overlay of keyboard controls for stance switching and combat actions.\n * Highlights the currently active stance and adapts layout for mobile devices.\n * \n * Features:\n * - 8 trigram stance keys displayed in a grid\n * - Current stance highlighted in gold\n * - Combat action keys (attack, block, movement)\n * - Responsive mobile layout\n * - Korean cyberpunk styling\n * - Toggle with F1 key\n * \n * @example\n * ```tsx\n * <KeyboardHints\n * visible={showHints}\n * currentStance={player.stance}\n * isMobile={isMobile}\n * customBindings={controlMapper.getBindings()}\n * />\n * ```\n * \n * @public\n * @korean 키보드힌트\n */\nexport const KeyboardHints: React.FC<KeyboardHintsProps> = ({\n visible,\n currentStance,\n isMobile = false,\n customBindings,\n}) => {\n const theme = useKoreanTheme({ variant: \"bordered\", size: \"md\", isMobile });\n \n // Get stance keys (default or custom)\n const stanceKeys = useMemo(() => {\n if (customBindings?.stances) {\n return customBindings.stances;\n }\n return [\"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\"];\n }, [customBindings]);\n\n // Layout calculations\n const layout = useMemo(() => {\n const keySize = isMobile ? 32 : 48;\n const gap = isMobile ? 4 : 8;\n const fontSize = isMobile ? 12 : 16;\n const labelFontSize = isMobile ? 10 : 12;\n const padding = isMobile ? 8 : 12;\n\n return { keySize, gap, fontSize, labelFontSize, padding };\n }, [isMobile]);\n\n if (!visible) return null;\n\n return (\n <Html fullscreen>\n <div\n data-testid=\"keyboard-hints\"\n role=\"dialog\"\n aria-label=\"Keyboard control hints\"\n aria-describedby=\"hints-description\"\n style={{\n position: \"absolute\",\n bottom: isMobile ? \"20px\" : \"40px\",\n left: \"50%\",\n transform: \"translateX(-50%)\",\n pointerEvents: \"none\",\n zIndex: 999,\n }}\n >\n {/* Hidden description for screen readers */}\n <div\n id=\"hints-description\"\n style={{\n position: \"absolute\",\n left: \"-9999px\",\n width: \"1px\",\n height: \"1px\",\n overflow: \"hidden\",\n }}\n >\n Keyboard controls for combat. Press F1 to toggle this overlay.\n </div>\n\n {/* Main hints container */}\n <div\n style={{\n background: hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 0.9),\n border: `2px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.8)}`,\n borderRadius: \"8px\",\n padding: `${layout.padding}px`,\n boxShadow: `0 0 20px ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.3)}`,\n }}\n >\n {/* Section title */}\n <div\n style={{\n color: hexToRgbaString(theme.colors.PRIMARY_CYAN, 1),\n fontFamily: theme.fontFamily.KOREAN,\n fontSize: `${layout.labelFontSize}px`,\n textAlign: \"center\",\n marginBottom: \"8px\",\n fontWeight: \"bold\",\n }}\n >\n Trigram Stances (1-8)\n </div>\n\n {/* Stance keys grid */}\n <div\n style={{\n display: \"flex\",\n gap: `${layout.gap}px`,\n marginBottom: \"12px\",\n }}\n >\n {stanceKeys.map((key, index) => {\n const isActive = index === currentStance;\n const keyColor = isActive\n ? theme.colors.ACCENT_GOLD\n : theme.colors.UI_STEEL_GRAY;\n const bgColor = isActive\n ? hexToRgbaString(theme.colors.ACCENT_GOLD, 0.2)\n : \"transparent\";\n\n return (\n <div\n key={index}\n data-testid={`stance-key-${index}`}\n style={{\n width: `${layout.keySize}px`,\n height: `${layout.keySize}px`,\n border: `2px solid ${hexToRgbaString(keyColor, isActive ? 1 : 0.6)}`,\n borderRadius: \"4px\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n fontSize: `${layout.fontSize}px`,\n color: hexToRgbaString(keyColor, 1),\n background: bgColor,\n fontFamily: theme.fontFamily.KOREAN,\n fontWeight: isActive ? \"bold\" : \"normal\",\n boxShadow: isActive\n ? `0 0 10px ${hexToRgbaString(theme.colors.ACCENT_GOLD, 0.5)}`\n : \"none\",\n transition: \"all 0.2s ease\",\n }}\n >\n {key.toUpperCase()}\n </div>\n );\n })}\n </div>\n\n {/* Combat actions */}\n <div\n style={{\n borderTop: `1px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.3)}`,\n paddingTop: \"8px\",\n marginBottom: \"8px\",\n display: \"grid\",\n gridTemplateColumns: isMobile ? \"1fr\" : \"1fr 1fr\",\n gap: \"4px\",\n fontSize: `${layout.labelFontSize}px`,\n color: hexToRgbaString(theme.colors.TEXT_SECONDARY, 0.9),\n fontFamily: theme.fontFamily.KOREAN,\n }}\n >\n <div>\n <span\n style={{\n color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),\n fontWeight: \"bold\",\n }}\n >\n Space\n </span>{\" \"}\n - Attack\n </div>\n <div>\n <span\n style={{\n color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),\n fontWeight: \"bold\",\n }}\n >\n B\n </span>{\" \"}\n - Block\n </div>\n <div>\n <span\n style={{\n color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),\n fontWeight: \"bold\",\n }}\n >\n V\n </span>{\" \"}\n - Toggle vital points overlay\n </div>\n <div>\n <span\n style={{\n color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),\n fontWeight: \"bold\",\n }}\n >\n WASD/Arrows\n </span>{\" \"}\n - Move\n </div>\n </div>\n\n {/* Technique keys section */}\n <div\n style={{\n borderTop: `1px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.3)}`,\n paddingTop: \"8px\",\n marginBottom: \"8px\",\n }}\n >\n <div\n style={{\n color: hexToRgbaString(theme.colors.PRIMARY_CYAN, 1),\n fontFamily: theme.fontFamily.KOREAN,\n fontSize: `${layout.labelFontSize}px`,\n textAlign: \"center\",\n marginBottom: \"6px\",\n fontWeight: \"bold\",\n }}\n >\n Techniques (기술)\n </div>\n <div\n style={{\n fontSize: `${layout.labelFontSize}px`,\n color: hexToRgbaString(theme.colors.TEXT_SECONDARY, 0.9),\n fontFamily: theme.fontFamily.KOREAN,\n textAlign: \"center\",\n }}\n >\n <span\n style={{\n color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),\n fontWeight: \"bold\",\n }}\n >\n Q-E-R-T-Y-F-G-Z-X-C\n </span>\n {\" \"}\n - Execute techniques\n </div>\n </div>\n\n {/* Advanced footwork section */}\n <div\n style={{\n borderTop: `1px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.3)}`,\n paddingTop: \"8px\",\n }}\n >\n <div\n style={{\n color: hexToRgbaString(theme.colors.PRIMARY_CYAN, 1),\n fontFamily: theme.fontFamily.KOREAN,\n fontSize: `${layout.labelFontSize}px`,\n textAlign: \"center\",\n marginBottom: \"6px\",\n fontWeight: \"bold\",\n }}\n >\n Advanced Footwork (보법)\n </div>\n <div\n style={{\n fontSize: `${layout.labelFontSize - 1}px`,\n color: hexToRgbaString(theme.colors.TEXT_SECONDARY, 0.9),\n fontFamily: theme.fontFamily.KOREAN,\n textAlign: \"center\",\n lineHeight: 1.4,\n }}\n >\n <div style={{ marginBottom: \"4px\" }}>\n <span\n style={{\n color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),\n fontWeight: \"bold\",\n }}\n >\n Shift+WASD\n </span>\n {\" \"}\n - Tactical steps (30cm)\n </div>\n <div style={{ marginBottom: \"4px\" }}>\n <span\n style={{\n color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),\n fontWeight: \"bold\",\n }}\n >\n Ctrl+WASD\n </span>\n {\" \"}\n - Footwork patterns\n </div>\n <div style={{ marginBottom: \"4px\" }}>\n <span\n style={{\n color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),\n fontWeight: \"bold\",\n }}\n >\n Shift+Ctrl+A/D\n </span>\n {\" \"}\n - Pivot rotation\n </div>\n <div style={{ marginBottom: \"4px\" }}>\n <span\n style={{\n color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),\n fontWeight: \"bold\",\n }}\n >\n Shift+Ctrl+W/S\n </span>\n {\" \"}\n - Shuffle step\n </div>\n <div>\n <span\n style={{\n color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),\n fontWeight: \"bold\",\n }}\n >\n H\n </span>\n {\" \"}\n - Switch front foot\n </div>\n </div>\n </div>\n\n {/* Toggle hint */}\n <div\n style={{\n marginTop: \"8px\",\n textAlign: \"center\",\n fontSize: `${layout.labelFontSize - 2}px`,\n color: hexToRgbaString(theme.colors.TEXT_SECONDARY, 0.7),\n fontStyle: \"italic\",\n }}\n >\n Press F1 to toggle • ESC/M for pause\n </div>\n </div>\n </div>\n </Html>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0DA,IAAa,iBAA+C,EAC1D,SACA,eACA,WAAW,OACX,qBACI;CACJ,MAAM,QAAQ,eAAe;EAAE,SAAS;EAAY,MAAM;EAAM;EAAU,CAAC;CAG3E,MAAM,aAAa,cAAc;AAC/B,MAAI,gBAAgB,QAClB,QAAO,eAAe;AAExB,SAAO;GAAC;GAAK;GAAK;GAAK;GAAK;GAAK;GAAK;GAAK;GAAI;IAC9C,CAAC,eAAe,CAAC;CAGpB,MAAM,SAAS,cAAc;AAO3B,SAAO;GAAE,SANO,WAAW,KAAK;GAMd,KALN,WAAW,IAAI;GAKJ,UAJN,WAAW,KAAK;GAIA,eAHX,WAAW,KAAK;GAGU,SAFhC,WAAW,IAAI;GAE0B;IACxD,CAAC,SAAS,CAAC;AAEd,KAAI,CAAC,QAAS,QAAO;AAErB,QACE,oBAAC,MAAD;EAAM,YAAA;YACJ,qBAAC,OAAD;GACE,eAAY;GACZ,MAAK;GACL,cAAW;GACX,oBAAiB;GACjB,OAAO;IACL,UAAU;IACV,QAAQ,WAAW,SAAS;IAC5B,MAAM;IACN,WAAW;IACX,eAAe;IACf,QAAQ;IACT;aAZH,CAeE,oBAAC,OAAD;IACE,IAAG;IACH,OAAO;KACL,UAAU;KACV,MAAM;KACN,OAAO;KACP,QAAQ;KACR,UAAU;KACX;cACF;IAEK,CAAA,EAGN,qBAAC,OAAD;IACE,OAAO;KACL,YAAY,gBAAgB,MAAM,OAAO,oBAAoB,GAAI;KACjE,QAAQ,aAAa,gBAAgB,MAAM,OAAO,cAAc,GAAI;KACpE,cAAc;KACd,SAAS,GAAG,OAAO,QAAQ;KAC3B,WAAW,YAAY,gBAAgB,MAAM,OAAO,cAAc,GAAI;KACvE;cAPH;KAUE,oBAAC,OAAD;MACE,OAAO;OACL,OAAO,gBAAgB,MAAM,OAAO,cAAc,EAAE;OACpD,YAAY,MAAM,WAAW;OAC7B,UAAU,GAAG,OAAO,cAAc;OAClC,WAAW;OACX,cAAc;OACd,YAAY;OACb;gBACF;MAEK,CAAA;KAGN,oBAAC,OAAD;MACE,OAAO;OACL,SAAS;OACT,KAAK,GAAG,OAAO,IAAI;OACnB,cAAc;OACf;gBAEA,WAAW,KAAK,KAAK,UAAU;OAC9B,MAAM,WAAW,UAAU;OAC3B,MAAM,WAAW,WACb,MAAM,OAAO,cACb,MAAM,OAAO;OACjB,MAAM,UAAU,WACZ,gBAAgB,MAAM,OAAO,aAAa,GAAI,GAC9C;AAEJ,cACE,oBAAC,OAAD;QAEE,eAAa,cAAc;QAC3B,OAAO;SACL,OAAO,GAAG,OAAO,QAAQ;SACzB,QAAQ,GAAG,OAAO,QAAQ;SAC1B,QAAQ,aAAa,gBAAgB,UAAU,WAAW,IAAI,GAAI;SAClE,cAAc;SACd,SAAS;SACT,YAAY;SACZ,gBAAgB;SAChB,UAAU,GAAG,OAAO,SAAS;SAC7B,OAAO,gBAAgB,UAAU,EAAE;SACnC,YAAY;SACZ,YAAY,MAAM,WAAW;SAC7B,YAAY,WAAW,SAAS;SAChC,WAAW,WACP,YAAY,gBAAgB,MAAM,OAAO,aAAa,GAAI,KAC1D;SACJ,YAAY;SACb;kBAEA,IAAI,aAAa;QACd,EAtBC,MAsBD;QAER;MACE,CAAA;KAGN,qBAAC,OAAD;MACE,OAAO;OACL,WAAW,aAAa,gBAAgB,MAAM,OAAO,cAAc,GAAI;OACvE,YAAY;OACZ,cAAc;OACd,SAAS;OACT,qBAAqB,WAAW,QAAQ;OACxC,KAAK;OACL,UAAU,GAAG,OAAO,cAAc;OAClC,OAAO,gBAAgB,MAAM,OAAO,gBAAgB,GAAI;OACxD,YAAY,MAAM,WAAW;OAC9B;gBAXH;OAaE,qBAAC,OAAD,EAAA,UAAA;QACE,oBAAC,QAAD;SACE,OAAO;UACL,OAAO,gBAAgB,MAAM,OAAO,aAAa,EAAE;UACnD,YAAY;UACb;mBACF;SAEM,CAAA;QAAC;QAAI;QAER,EAAA,CAAA;OACN,qBAAC,OAAD,EAAA,UAAA;QACE,oBAAC,QAAD;SACE,OAAO;UACL,OAAO,gBAAgB,MAAM,OAAO,aAAa,EAAE;UACnD,YAAY;UACb;mBACF;SAEM,CAAA;QAAC;QAAI;QAER,EAAA,CAAA;OACN,qBAAC,OAAD,EAAA,UAAA;QACE,oBAAC,QAAD;SACE,OAAO;UACL,OAAO,gBAAgB,MAAM,OAAO,aAAa,EAAE;UACnD,YAAY;UACb;mBACF;SAEM,CAAA;QAAC;QAAI;QAER,EAAA,CAAA;OACN,qBAAC,OAAD,EAAA,UAAA;QACE,oBAAC,QAAD;SACE,OAAO;UACL,OAAO,gBAAgB,MAAM,OAAO,aAAa,EAAE;UACnD,YAAY;UACb;mBACF;SAEM,CAAA;QAAC;QAAI;QAER,EAAA,CAAA;OACF;;KAGN,qBAAC,OAAD;MACE,OAAO;OACL,WAAW,aAAa,gBAAgB,MAAM,OAAO,cAAc,GAAI;OACvE,YAAY;OACZ,cAAc;OACf;gBALH,CAOE,oBAAC,OAAD;OACE,OAAO;QACL,OAAO,gBAAgB,MAAM,OAAO,cAAc,EAAE;QACpD,YAAY,MAAM,WAAW;QAC7B,UAAU,GAAG,OAAO,cAAc;QAClC,WAAW;QACX,cAAc;QACd,YAAY;QACb;iBACF;OAEK,CAAA,EACN,qBAAC,OAAD;OACE,OAAO;QACL,UAAU,GAAG,OAAO,cAAc;QAClC,OAAO,gBAAgB,MAAM,OAAO,gBAAgB,GAAI;QACxD,YAAY,MAAM,WAAW;QAC7B,WAAW;QACZ;iBANH;QAQE,oBAAC,QAAD;SACE,OAAO;UACL,OAAO,gBAAgB,MAAM,OAAO,aAAa,EAAE;UACnD,YAAY;UACb;mBACF;SAEM,CAAA;QACN;QAAI;QAED;SACF;;KAGN,qBAAC,OAAD;MACE,OAAO;OACL,WAAW,aAAa,gBAAgB,MAAM,OAAO,cAAc,GAAI;OACvE,YAAY;OACb;gBAJH,CAME,oBAAC,OAAD;OACE,OAAO;QACL,OAAO,gBAAgB,MAAM,OAAO,cAAc,EAAE;QACpD,YAAY,MAAM,WAAW;QAC7B,UAAU,GAAG,OAAO,cAAc;QAClC,WAAW;QACX,cAAc;QACd,YAAY;QACb;iBACF;OAEK,CAAA,EACN,qBAAC,OAAD;OACE,OAAO;QACL,UAAU,GAAG,OAAO,gBAAgB,EAAE;QACtC,OAAO,gBAAgB,MAAM,OAAO,gBAAgB,GAAI;QACxD,YAAY,MAAM,WAAW;QAC7B,WAAW;QACX,YAAY;QACb;iBAPH;QASE,qBAAC,OAAD;SAAK,OAAO,EAAE,cAAc,OAAO;mBAAnC;UACE,oBAAC,QAAD;WACE,OAAO;YACL,OAAO,gBAAgB,MAAM,OAAO,aAAa,EAAE;YACnD,YAAY;YACb;qBACF;WAEM,CAAA;UACN;UAAI;UAED;;QACN,qBAAC,OAAD;SAAK,OAAO,EAAE,cAAc,OAAO;mBAAnC;UACE,oBAAC,QAAD;WACE,OAAO;YACL,OAAO,gBAAgB,MAAM,OAAO,aAAa,EAAE;YACnD,YAAY;YACb;qBACF;WAEM,CAAA;UACN;UAAI;UAED;;QACN,qBAAC,OAAD;SAAK,OAAO,EAAE,cAAc,OAAO;mBAAnC;UACE,oBAAC,QAAD;WACE,OAAO;YACL,OAAO,gBAAgB,MAAM,OAAO,aAAa,EAAE;YACnD,YAAY;YACb;qBACF;WAEM,CAAA;UACN;UAAI;UAED;;QACN,qBAAC,OAAD;SAAK,OAAO,EAAE,cAAc,OAAO;mBAAnC;UACE,oBAAC,QAAD;WACE,OAAO;YACL,OAAO,gBAAgB,MAAM,OAAO,aAAa,EAAE;YACnD,YAAY;YACb;qBACF;WAEM,CAAA;UACN;UAAI;UAED;;QACN,qBAAC,OAAD,EAAA,UAAA;SACE,oBAAC,QAAD;UACE,OAAO;WACL,OAAO,gBAAgB,MAAM,OAAO,aAAa,EAAE;WACnD,YAAY;WACb;oBACF;UAEM,CAAA;SACN;SAAI;SAED,EAAA,CAAA;QACF;SACF;;KAGN,oBAAC,OAAD;MACE,OAAO;OACL,WAAW;OACX,WAAW;OACX,UAAU,GAAG,OAAO,gBAAgB,EAAE;OACtC,OAAO,gBAAgB,MAAM,OAAO,gBAAgB,GAAI;OACxD,WAAW;OACZ;gBACF;MAEK,CAAA;KACF;MACF;;EACD,CAAA"}

package/lib/components/screens/combat/components/controls/PauseMenu.d.ts ADDED Viewed

@@ -0,0 +1,32 @@
+/**
+ * PauseMenu Component - Main pause menu overlay
+ *
+ * Features:
+ * - Resume combat
+ * - Restart match
+ * - View controls
+ * - Adjust settings
+ * - Return to menu (with confirmation)
+ * - Korean/English bilingual text
+ * - Cyberpunk Korean theming
+ * - Backdrop blur effect
+ * - WCAG 2.1 Level AA compliant
+ * - Keyboard navigation (Arrow keys, Enter, Escape)
+ * - Focus indicators with high contrast
+ * - ARIA labels for screen readers
+ *
+ * Refactored to use useKoreanTheme for consistent theming
+ */
+import React from "react";
+export interface PauseMenuProps {
+    readonly onResume: () => void;
+    readonly onRestart: () => void;
+    readonly onReturnToMenu: () => void;
+    readonly isMobile: boolean;
+}
+/**
+ * PauseMenu - Main pause menu with options and submenus
+ */
+export declare const PauseMenu: React.FC<PauseMenuProps>;
+export default PauseMenu;
+//# sourceMappingURL=PauseMenu.d.ts.map

package/lib/components/screens/combat/components/controls/PauseMenu.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"PauseMenu.d.ts","sourceRoot":"","sources":["../../../../../../src/components/screens/combat/components/controls/PauseMenu.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAmD,MAAM,OAAO,CAAC;AAWxE,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAC;IAC9B,QAAQ,CAAC,SAAS,EAAE,MAAM,IAAI,CAAC;IAC/B,QAAQ,CAAC,cAAc,EAAE,MAAM,IAAI,CAAC;IACpC,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;CAC5B;AAWD;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAyQ9C,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/components/screens/combat/components/controls/PauseMenu.js ADDED Viewed

@@ -0,0 +1,254 @@
+import { useAudio } from "../../../../../audio/AudioProvider.js";
+import { hexToRgbaString } from "../../../../../utils/colorUtils.js";
+import { useKoreanTheme } from "../../../../shared/base/useKoreanTheme.js";
+import { createBilingualLabel } from "../../../../../types/AccessibilityTypes.js";
+import { handleKeyboardNav } from "../../../../../utils/accessibility.js";
+import ConfirmDialog from "../../../../shared/ui/shared/ConfirmDialog.js";
+import ControlsGuide from "./ControlsGuide.js";
+import QuickSettings from "./QuickSettings.js";
+import PauseMenuButton from "./PauseMenuButton.js";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/screens/combat/components/controls/PauseMenu.tsx
+/**
+* PauseMenu Component - Main pause menu overlay
+*
+* Features:
+* - Resume combat
+* - Restart match
+* - View controls
+* - Adjust settings
+* - Return to menu (with confirmation)
+* - Korean/English bilingual text
+* - Cyberpunk Korean theming
+* - Backdrop blur effect
+* - WCAG 2.1 Level AA compliant
+* - Keyboard navigation (Arrow keys, Enter, Escape)
+* - Focus indicators with high contrast
+* - ARIA labels for screen readers
+*
+* Refactored to use useKoreanTheme for consistent theming
+*/
+/**
+* PauseMenu - Main pause menu with options and submenus
+*/
+var PauseMenu = ({ onResume, onRestart, onReturnToMenu, isMobile }) => {
+	const audio = useAudio();
+	const theme = useKoreanTheme({
+		variant: "primary",
+		size: "lg",
+		isMobile
+	});
+	const [activeSubmenu, setActiveSubmenu] = useState(null);
+	const [showConfirm, setShowConfirm] = useState(null);
+	const [focusedIndex, setFocusedIndex] = useState(0);
+	const buttonRefs = useRef([]);
+	const menuItems = React.useMemo(() => [
+		{
+			key: "resume",
+			labelKorean: "계속",
+			labelEnglish: "Resume",
+			testId: "pause-resume-button",
+			onClick: () => {
+				audio.playSFX("menu_select");
+				onResume();
+			},
+			icon: "▶️"
+		},
+		{
+			key: "restart",
+			labelKorean: "재시작",
+			labelEnglish: "Restart Match",
+			testId: "pause-restart-button",
+			onClick: () => {
+				audio.playSFX("menu_select");
+				setShowConfirm("restart");
+			},
+			icon: "🔄"
+		},
+		{
+			key: "controls",
+			labelKorean: "조작법",
+			labelEnglish: "Controls",
+			testId: "pause-controls-button",
+			onClick: () => {
+				audio.playSFX("menu_select");
+				setActiveSubmenu("controls");
+			},
+			icon: "🎮"
+		},
+		{
+			key: "settings",
+			labelKorean: "설정",
+			labelEnglish: "Settings",
+			testId: "pause-settings-button",
+			onClick: () => {
+				audio.playSFX("menu_select");
+				setActiveSubmenu("settings");
+			},
+			icon: "⚙️"
+		},
+		{
+			key: "menu",
+			labelKorean: "메인 메뉴",
+			labelEnglish: "Return to Menu",
+			testId: "pause-menu-button",
+			onClick: () => {
+				audio.playSFX("menu_select");
+				setShowConfirm("menu");
+			},
+			icon: "🏠"
+		}
+	], [audio, onResume]);
+	useEffect(() => {
+		if (buttonRefs.current[0]) buttonRefs.current[0].focus();
+	}, [menuItems]);
+	const handleKeyDown = useCallback((e, index) => {
+		handleKeyboardNav(e.nativeEvent, {
+			onActivate: () => {
+				menuItems[index].onClick();
+			},
+			onCancel: () => {
+				onResume();
+			},
+			onNavigate: (direction) => {
+				if (direction === "up") {
+					const newIndex = (index - 1 + menuItems.length) % menuItems.length;
+					setFocusedIndex(newIndex);
+					buttonRefs.current[newIndex]?.focus();
+				} else if (direction === "down") {
+					const newIndex = (index + 1) % menuItems.length;
+					setFocusedIndex(newIndex);
+					buttonRefs.current[newIndex]?.focus();
+				}
+			}
+		});
+	}, [menuItems, onResume]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsxs("div", {
+			"data-testid": "pause-menu",
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-labelledby": "pause-title",
+			"aria-describedby": "pause-hint",
+			style: {
+				position: "fixed",
+				top: 0,
+				left: 0,
+				width: "100%",
+				height: "100%",
+				display: "flex",
+				flexDirection: "column",
+				alignItems: "center",
+				justifyContent: "center",
+				backgroundColor: hexToRgbaString(theme.colors.BLACK_SOLID, .85),
+				backdropFilter: "blur(8px)",
+				zIndex: 1e3,
+				pointerEvents: "auto"
+			},
+			children: [
+				/* @__PURE__ */ jsx("h1", {
+					id: "pause-title",
+					"data-testid": "pause-title",
+					style: {
+						fontSize: isMobile ? "48px" : "72px",
+						color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),
+						fontFamily: theme.fontFamily.KOREAN,
+						fontWeight: "bold",
+						margin: `0 0 ${isMobile ? "40px" : "60px"} 0`,
+						textShadow: `0 0 30px ${hexToRgbaString(theme.colors.ACCENT_GOLD, .6)}`,
+						textAlign: "center"
+					},
+					children: "일시정지 | Paused"
+				}),
+				/* @__PURE__ */ jsx("div", {
+					role: "menu",
+					"aria-label": createBilingualLabel("일시정지 메뉴", "Pause Menu").label,
+					style: {
+						display: "flex",
+						flexDirection: "column",
+						gap: isMobile ? "12px" : "16px",
+						minWidth: isMobile ? "280px" : "360px"
+					},
+					children: menuItems.map((item, index) => /* @__PURE__ */ jsx(PauseMenuButton, {
+						ref: (el) => {
+							buttonRefs.current[index] = el;
+						},
+						labelKorean: item.labelKorean,
+						labelEnglish: item.labelEnglish,
+						icon: item.icon,
+						onClick: item.onClick,
+						onMouseEnter: () => audio.playSFX("menu_hover"),
+						onKeyDown: (e) => handleKeyDown(e, index),
+						onFocus: () => setFocusedIndex(index),
+						isFocused: focusedIndex === index,
+						isMobile,
+						testId: item.testId
+					}, item.key))
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					id: "pause-hint",
+					"data-testid": "pause-hint",
+					style: {
+						marginTop: isMobile ? "40px" : "60px",
+						fontSize: isMobile ? "12px" : "14px",
+						color: hexToRgbaString(theme.colors.TEXT_SECONDARY, .8),
+						fontFamily: theme.fontFamily.KOREAN,
+						textAlign: "center"
+					},
+					children: [
+						"ESC 키를 눌러 계속 | Press ESC to resume",
+						/* @__PURE__ */ jsx("br", {}),
+						"↑↓ 키로 이동 | Use ↑↓ to navigate"
+					]
+				})
+			]
+		}),
+		activeSubmenu === "controls" && /* @__PURE__ */ jsx(ControlsGuide, {
+			onClose: () => {
+				setActiveSubmenu(null);
+			},
+			isMobile
+		}),
+		activeSubmenu === "settings" && /* @__PURE__ */ jsx(QuickSettings, {
+			onClose: () => {
+				setActiveSubmenu(null);
+			},
+			isMobile
+		}),
+		showConfirm === "restart" && /* @__PURE__ */ jsx(ConfirmDialog, {
+			isOpen: true,
+			title: "Restart Match?",
+			titleKorean: "경기를 재시작하시겠습니까?",
+			message: "All progress in the current match will be lost.",
+			messageKorean: "현재 경기의 모든 진행 상황이 초기화됩니다.",
+			onConfirm: () => {
+				setShowConfirm(null);
+				onRestart();
+			},
+			onCancel: () => {
+				setShowConfirm(null);
+			},
+			isMobile
+		}),
+		showConfirm === "menu" && /* @__PURE__ */ jsx(ConfirmDialog, {
+			isOpen: true,
+			title: "Return to Menu?",
+			titleKorean: "메인 메뉴로 돌아가시겠습니까?",
+			message: "All progress in the current match will be lost.",
+			messageKorean: "현재 경기의 모든 진행 상황이 손실됩니다.",
+			onConfirm: () => {
+				setShowConfirm(null);
+				onReturnToMenu();
+			},
+			onCancel: () => {
+				setShowConfirm(null);
+			},
+			isMobile
+		})
+	] });
+};
+//#endregion
+export { PauseMenu as default };
+//# sourceMappingURL=PauseMenu.js.map

package/lib/components/screens/combat/components/controls/PauseMenu.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"PauseMenu.js","names":[],"sources":["../../../../../../src/components/screens/combat/components/controls/PauseMenu.tsx"],"sourcesContent":["/**\n * PauseMenu Component - Main pause menu overlay\n *\n * Features:\n * - Resume combat\n * - Restart match\n * - View controls\n * - Adjust settings\n * - Return to menu (with confirmation)\n * - Korean/English bilingual text\n * - Cyberpunk Korean theming\n * - Backdrop blur effect\n * - WCAG 2.1 Level AA compliant\n * - Keyboard navigation (Arrow keys, Enter, Escape)\n * - Focus indicators with high contrast\n * - ARIA labels for screen readers\n * \n * Refactored to use useKoreanTheme for consistent theming\n */\n\nimport React, { useCallback, useState, useEffect, useRef } from \"react\";\nimport { useAudio } from \"../../../../../audio/AudioProvider\";\nimport { useKoreanTheme } from \"../../../../shared/base/useKoreanTheme\";\nimport { hexToRgbaString } from \"../../../../../utils/colorUtils\";\nimport ConfirmDialog from \"../../../../shared/ui/shared/ConfirmDialog\";\nimport ControlsGuide from \"./ControlsGuide\";\nimport QuickSettings from \"./QuickSettings\";\nimport { handleKeyboardNav } from \"../../../../../utils/accessibility\";\nimport { createBilingualLabel } from \"../../../../../types/AccessibilityTypes\";\nimport { PauseMenuButton } from \"./PauseMenuButton\";\n\nexport interface PauseMenuProps {\n readonly onResume: () => void;\n readonly onRestart: () => void;\n readonly onReturnToMenu: () => void;\n readonly isMobile: boolean;\n}\n\ninterface MenuItem {\n readonly key: string;\n readonly labelKorean: string;\n readonly labelEnglish: string;\n readonly testId: string;\n readonly onClick: () => void;\n readonly icon?: string;\n}\n\n/**\n * PauseMenu - Main pause menu with options and submenus\n */\nexport const PauseMenu: React.FC<PauseMenuProps> = ({\n onResume,\n onRestart,\n onReturnToMenu,\n isMobile,\n}) => {\n const audio = useAudio();\n const theme = useKoreanTheme({ variant: \"primary\", size: \"lg\", isMobile });\n const [activeSubmenu, setActiveSubmenu] = useState<\n \"controls\" | \"settings\" | null\n >(null);\n const [showConfirm, setShowConfirm] = useState<\n \"restart\" | \"menu\" | null\n >(null);\n const [focusedIndex, setFocusedIndex] = useState<number>(0);\n const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n // Memoize menuItems to prevent recreation on every render\n const menuItems: MenuItem[] = React.useMemo(\n () => [\n {\n key: \"resume\",\n labelKorean: \"계속\",\n labelEnglish: \"Resume\",\n testId: \"pause-resume-button\",\n onClick: () => {\n audio.playSFX(\"menu_select\");\n onResume();\n },\n icon: \"▶️\",\n },\n {\n key: \"restart\",\n labelKorean: \"재시작\",\n labelEnglish: \"Restart Match\",\n testId: \"pause-restart-button\",\n onClick: () => {\n audio.playSFX(\"menu_select\");\n setShowConfirm(\"restart\");\n },\n icon: \"🔄\",\n },\n {\n key: \"controls\",\n labelKorean: \"조작법\",\n labelEnglish: \"Controls\",\n testId: \"pause-controls-button\",\n onClick: () => {\n audio.playSFX(\"menu_select\");\n setActiveSubmenu(\"controls\");\n },\n icon: \"🎮\",\n },\n {\n key: \"settings\",\n labelKorean: \"설정\",\n labelEnglish: \"Settings\",\n testId: \"pause-settings-button\",\n onClick: () => {\n audio.playSFX(\"menu_select\");\n setActiveSubmenu(\"settings\");\n },\n icon: \"⚙️\",\n },\n {\n key: \"menu\",\n labelKorean: \"메인 메뉴\",\n labelEnglish: \"Return to Menu\",\n testId: \"pause-menu-button\",\n onClick: () => {\n audio.playSFX(\"menu_select\");\n setShowConfirm(\"menu\");\n },\n icon: \"🏠\",\n },\n ],\n [audio, onResume]\n );\n\n // Focus first button on mount\n useEffect(() => {\n if (buttonRefs.current[0]) {\n buttonRefs.current[0].focus();\n }\n }, [menuItems]);\n\n // Keyboard navigation handler\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent, index: number) => {\n handleKeyboardNav(e.nativeEvent, {\n onActivate: () => {\n menuItems[index].onClick();\n },\n onCancel: () => {\n onResume();\n },\n onNavigate: (direction) => {\n if (direction === 'up') {\n const newIndex = (index - 1 + menuItems.length) % menuItems.length;\n setFocusedIndex(newIndex);\n buttonRefs.current[newIndex]?.focus();\n } else if (direction === 'down') {\n const newIndex = (index + 1) % menuItems.length;\n setFocusedIndex(newIndex);\n buttonRefs.current[newIndex]?.focus();\n }\n },\n });\n },\n [menuItems, onResume]\n );\n\n // ESC key handling is now managed by the parent (CombatScreen3D) to avoid conflicts\n\n return (\n <>\n {/* Main Pause Menu */}\n <div\n data-testid=\"pause-menu\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=\"pause-title\"\n aria-describedby=\"pause-hint\"\n style={{\n position: \"fixed\",\n top: 0,\n left: 0,\n width: \"100%\",\n height: \"100%\",\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"center\",\n backgroundColor: hexToRgbaString(theme.colors.BLACK_SOLID, 0.85),\n backdropFilter: \"blur(8px)\",\n zIndex: 1000,\n pointerEvents: \"auto\",\n }}\n >\n {/* Pause Title */}\n <h1\n id=\"pause-title\"\n data-testid=\"pause-title\"\n style={{\n fontSize: isMobile ? \"48px\" : \"72px\",\n color: hexToRgbaString(theme.colors.ACCENT_GOLD, 1),\n fontFamily: theme.fontFamily.KOREAN,\n fontWeight: \"bold\",\n margin: `0 0 ${isMobile ? \"40px\" : \"60px\"} 0`,\n textShadow: `0 0 30px ${hexToRgbaString(\n theme.colors.ACCENT_GOLD,\n 0.6\n )}`,\n textAlign: \"center\",\n }}\n >\n 일시정지 | Paused\n </h1>\n\n {/* Menu Buttons */}\n <div\n role=\"menu\"\n aria-label={createBilingualLabel('일시정지 메뉴', 'Pause Menu').label}\n style={{\n display: \"flex\",\n flexDirection: \"column\",\n gap: isMobile ? \"12px\" : \"16px\",\n minWidth: isMobile ? \"280px\" : \"360px\",\n }}\n >\n {menuItems.map((item, index) => (\n <PauseMenuButton\n key={item.key}\n ref={(el) => { buttonRefs.current[index] = el; }}\n labelKorean={item.labelKorean}\n labelEnglish={item.labelEnglish}\n icon={item.icon}\n onClick={item.onClick}\n onMouseEnter={() => audio.playSFX(\"menu_hover\")}\n onKeyDown={(e) => handleKeyDown(e, index)}\n onFocus={() => setFocusedIndex(index)}\n isFocused={focusedIndex === index}\n isMobile={isMobile}\n testId={item.testId}\n />\n ))}\n </div>\n\n {/* ESC hint */}\n <div\n id=\"pause-hint\"\n data-testid=\"pause-hint\"\n style={{\n marginTop: isMobile ? \"40px\" : \"60px\",\n fontSize: isMobile ? \"12px\" : \"14px\",\n color: hexToRgbaString(theme.colors.TEXT_SECONDARY, 0.8),\n fontFamily: theme.fontFamily.KOREAN,\n textAlign: \"center\",\n }}\n >\n ESC 키를 눌러 계속 | Press ESC to resume\n <br />\n ↑↓ 키로 이동 | Use ↑↓ to navigate\n </div>\n </div>\n\n {/* Controls Guide Submenu */}\n {activeSubmenu === \"controls\" && (\n <ControlsGuide\n onClose={() => {\n setActiveSubmenu(null);\n }}\n isMobile={isMobile}\n />\n )}\n\n {/* Settings Submenu */}\n {activeSubmenu === \"settings\" && (\n <QuickSettings\n onClose={() => {\n setActiveSubmenu(null);\n }}\n isMobile={isMobile}\n />\n )}\n\n {/* Restart Confirmation Dialog */}\n {showConfirm === \"restart\" && (\n <ConfirmDialog\n isOpen={true}\n title=\"Restart Match?\"\n titleKorean=\"경기를 재시작하시겠습니까?\"\n message=\"All progress in the current match will be lost.\"\n messageKorean=\"현재 경기의 모든 진행 상황이 초기화됩니다.\"\n onConfirm={() => {\n setShowConfirm(null);\n onRestart();\n }}\n onCancel={() => {\n setShowConfirm(null);\n }}\n isMobile={isMobile}\n />\n )}\n\n {/* Return to Menu Confirmation Dialog */}\n {showConfirm === \"menu\" && (\n <ConfirmDialog\n isOpen={true}\n title=\"Return to Menu?\"\n titleKorean=\"메인 메뉴로 돌아가시겠습니까?\"\n message=\"All progress in the current match will be lost.\"\n messageKorean=\"현재 경기의 모든 진행 상황이 손실됩니다.\"\n onConfirm={() => {\n setShowConfirm(null);\n onReturnToMenu();\n }}\n onCancel={() => {\n setShowConfirm(null);\n }}\n isMobile={isMobile}\n />\n )}\n </>\n );\n};\n\nexport default PauseMenu;\n"],"mappings":"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"}

package/lib/components/screens/combat/components/controls/PauseMenuButton.d.ts ADDED Viewed

@@ -0,0 +1,63 @@
+/**
+ * PauseMenuButton - Reusable button for pause menu items
+ *
+ * Provides consistent styling for pause menu action buttons with Korean theming.
+ * Extracted from PauseMenu to reduce code duplication.
+ *
+ * Refactored to use useKoreanTheme for consistent theming.
+ *
+ * @module components/screens/combat/controls
+ * @category Combat UI
+ * @korean 일시정지메뉴버튼
+ */
+import React from "react";
+export interface PauseMenuButtonProps {
+    /** Korean label text */
+    readonly labelKorean: string;
+    /** English label text */
+    readonly labelEnglish: string;
+    /** Optional icon/emoji */
+    readonly icon?: string;
+    /** Click handler */
+    readonly onClick: () => void;
+    /** Mouse enter handler */
+    readonly onMouseEnter?: () => void;
+    /** Key down handler */
+    readonly onKeyDown?: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
+    /** Focus handler */
+    readonly onFocus?: () => void;
+    /** Whether button is focused */
+    readonly isFocused: boolean;
+    /** Whether on mobile device */
+    readonly isMobile: boolean;
+    /** Test ID */
+    readonly testId: string;
+}
+/**
+ * PauseMenuButton Component
+ *
+ * Styled button for pause menu with:
+ * - Korean/English bilingual text with icon support
+ * - Cyan themed styling matching combat screen via useKoreanTheme
+ * - Hover and focus effects with accessibility support
+ * - Responsive sizing for mobile/desktop
+ *
+ * Reduces code duplication by ~70 lines from PauseMenu (inline button styling)
+ *
+ * @example
+ * ```tsx
+ * <PauseMenuButton
+ *   ref={buttonRef}
+ *   labelKorean="계속"
+ *   labelEnglish="Resume"
+ *   icon="▶️"
+ *   onClick={handleResume}
+ *   isFocused={focusedIndex === 0}
+ *   isMobile={false}
+ *   testId="pause-resume-button"
+ * />
+ * ```
+ */
+export declare const PauseMenuButton: React.ForwardRefExoticComponent<PauseMenuButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default PauseMenuButton;
+//# sourceMappingURL=PauseMenuButton.d.ts.map

package/lib/components/screens/combat/components/controls/PauseMenuButton.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"PauseMenuButton.d.ts","sourceRoot":"","sources":["../../../../../../src/components/screens/combat/components/controls/PauseMenuButton.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAqB,MAAM,OAAO,CAAC;AAK1C,MAAM,WAAW,oBAAoB;IACnC,wBAAwB;IACxB,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,yBAAyB;IACzB,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,0BAA0B;IAC1B,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,oBAAoB;IACpB,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;IAC7B,0BAA0B;IAC1B,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,uBAAuB;IACvB,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACzE,oBAAoB;IACpB,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,gCAAgC;IAChC,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IAC5B,+BAA+B;IAC/B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,cAAc;IACd,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,eAAe,gGA4F3B,CAAC;AAIF,eAAe,eAAe,CAAC"}

package/lib/components/screens/combat/components/controls/PauseMenuButton.js ADDED Viewed

@@ -0,0 +1,108 @@
+import { hexToRgbaString } from "../../../../../utils/colorUtils.js";
+import { useKoreanTheme } from "../../../../shared/base/useKoreanTheme.js";
+import { getFocusStyle } from "../../../../../utils/accessibility.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/screens/combat/components/controls/PauseMenuButton.tsx
+/**
+* PauseMenuButton - Reusable button for pause menu items
+*
+* Provides consistent styling for pause menu action buttons with Korean theming.
+* Extracted from PauseMenu to reduce code duplication.
+*
+* Refactored to use useKoreanTheme for consistent theming.
+*
+* @module components/screens/combat/controls
+* @category Combat UI
+* @korean 일시정지메뉴버튼
+*/
+/**
+* PauseMenuButton Component
+*
+* Styled button for pause menu with:
+* - Korean/English bilingual text with icon support
+* - Cyan themed styling matching combat screen via useKoreanTheme
+* - Hover and focus effects with accessibility support
+* - Responsive sizing for mobile/desktop
+*
+* Reduces code duplication by ~70 lines from PauseMenu (inline button styling)
+*
+* @example
+* ```tsx
+* <PauseMenuButton
+*   ref={buttonRef}
+*   labelKorean="계속"
+*   labelEnglish="Resume"
+*   icon="▶️"
+*   onClick={handleResume}
+*   isFocused={focusedIndex === 0}
+*   isMobile={false}
+*   testId="pause-resume-button"
+* />
+* ```
+*/
+var PauseMenuButton = forwardRef(({ labelKorean, labelEnglish, icon, onClick, onMouseEnter, onKeyDown, onFocus, isFocused, isMobile, testId }, ref) => {
+	const theme = useKoreanTheme({
+		variant: "primary",
+		size: "lg",
+		isMobile
+	});
+	return /* @__PURE__ */ jsxs("button", {
+		ref,
+		onClick,
+		onMouseEnter,
+		onKeyDown,
+		onFocus,
+		"data-testid": testId,
+		"aria-label": `${labelKorean} | ${labelEnglish}`,
+		role: "menuitem",
+		tabIndex: 0,
+		style: {
+			padding: isMobile ? "12px 24px" : "16px 32px",
+			fontSize: isMobile ? "16px" : "20px",
+			backgroundColor: hexToRgbaString(theme.colors.UI_BACKGROUND_MEDIUM, .9),
+			color: hexToRgbaString(theme.colors.PRIMARY_CYAN, 1),
+			border: `2px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, .6)}`,
+			borderRadius: "8px",
+			fontFamily: theme.fontFamily.KOREAN,
+			fontWeight: "bold",
+			cursor: "pointer",
+			transition: "all 0.2s ease",
+			textAlign: "center",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			gap: "12px",
+			boxShadow: "none",
+			...getFocusStyle(isFocused, {
+				outlineWidth: 3,
+				boxShadow: `0 0 0 4px ${hexToRgbaString(theme.colors.PRIMARY_CYAN, .3)}, 0 0 20px ${hexToRgbaString(theme.colors.PRIMARY_CYAN, .5)}`
+			})
+		},
+		onMouseOver: (e) => {
+			e.currentTarget.style.backgroundColor = hexToRgbaString(theme.colors.PRIMARY_CYAN, 1);
+			e.currentTarget.style.color = hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 1);
+			e.currentTarget.style.transform = "scale(1.05)";
+			e.currentTarget.style.boxShadow = `0 0 20px ${hexToRgbaString(theme.colors.PRIMARY_CYAN, .5)}`;
+		},
+		onMouseOut: (e) => {
+			e.currentTarget.style.backgroundColor = hexToRgbaString(theme.colors.UI_BACKGROUND_MEDIUM, .9);
+			e.currentTarget.style.color = hexToRgbaString(theme.colors.PRIMARY_CYAN, 1);
+			e.currentTarget.style.transform = "scale(1)";
+			e.currentTarget.style.boxShadow = "none";
+		},
+		children: [icon && /* @__PURE__ */ jsx("span", {
+			style: { fontSize: "24px" },
+			children: icon
+		}), /* @__PURE__ */ jsxs("span", { children: [
+			labelKorean,
+			" | ",
+			labelEnglish
+		] })]
+	});
+});
+PauseMenuButton.displayName = "PauseMenuButton";
+//#endregion
+export { PauseMenuButton as default };
+//# sourceMappingURL=PauseMenuButton.js.map

package/lib/components/screens/combat/components/controls/PauseMenuButton.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"PauseMenuButton.js","names":[],"sources":["../../../../../../src/components/screens/combat/components/controls/PauseMenuButton.tsx"],"sourcesContent":["/**\n * PauseMenuButton - Reusable button for pause menu items\n * \n * Provides consistent styling for pause menu action buttons with Korean theming.\n * Extracted from PauseMenu to reduce code duplication.\n * \n * Refactored to use useKoreanTheme for consistent theming.\n * \n * @module components/screens/combat/controls\n * @category Combat UI\n * @korean 일시정지메뉴버튼\n */\n\nimport React, { forwardRef } from \"react\";\nimport { useKoreanTheme } from \"../../../../shared/base/useKoreanTheme\";\nimport { hexToRgbaString } from \"../../../../../utils/colorUtils\";\nimport { getFocusStyle } from \"../../../../../utils/accessibility\";\n\nexport interface PauseMenuButtonProps {\n /** Korean label text */\n readonly labelKorean: string;\n /** English label text */\n readonly labelEnglish: string;\n /** Optional icon/emoji */\n readonly icon?: string;\n /** Click handler */\n readonly onClick: () => void;\n /** Mouse enter handler */\n readonly onMouseEnter?: () => void;\n /** Key down handler */\n readonly onKeyDown?: (e: React.KeyboardEvent<HTMLButtonElement>) => void;\n /** Focus handler */\n readonly onFocus?: () => void;\n /** Whether button is focused */\n readonly isFocused: boolean;\n /** Whether on mobile device */\n readonly isMobile: boolean;\n /** Test ID */\n readonly testId: string;\n}\n\n/**\n * PauseMenuButton Component\n * \n * Styled button for pause menu with:\n * - Korean/English bilingual text with icon support\n * - Cyan themed styling matching combat screen via useKoreanTheme\n * - Hover and focus effects with accessibility support\n * - Responsive sizing for mobile/desktop\n * \n * Reduces code duplication by ~70 lines from PauseMenu (inline button styling)\n * \n * @example\n * ```tsx\n * <PauseMenuButton\n * ref={buttonRef}\n * labelKorean=\"계속\"\n * labelEnglish=\"Resume\"\n * icon=\"▶️\"\n * onClick={handleResume}\n * isFocused={focusedIndex === 0}\n * isMobile={false}\n * testId=\"pause-resume-button\"\n * />\n * ```\n */\nexport const PauseMenuButton = forwardRef<\n HTMLButtonElement,\n PauseMenuButtonProps\n>(\n (\n {\n labelKorean,\n labelEnglish,\n icon,\n onClick,\n onMouseEnter,\n onKeyDown,\n onFocus,\n isFocused,\n isMobile,\n testId,\n },\n ref,\n ) => {\n const theme = useKoreanTheme({ variant: \"primary\", size: \"lg\", isMobile });\n \n return (\n <button\n ref={ref}\n onClick={onClick}\n onMouseEnter={onMouseEnter}\n onKeyDown={onKeyDown}\n onFocus={onFocus}\n data-testid={testId}\n aria-label={`${labelKorean} | ${labelEnglish}`}\n role=\"menuitem\"\n tabIndex={0}\n style={{\n padding: isMobile ? \"12px 24px\" : \"16px 32px\",\n fontSize: isMobile ? \"16px\" : \"20px\",\n backgroundColor: hexToRgbaString(\n theme.colors.UI_BACKGROUND_MEDIUM,\n 0.9,\n ),\n color: hexToRgbaString(theme.colors.PRIMARY_CYAN, 1),\n border: `2px solid ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.6)}`,\n borderRadius: \"8px\",\n fontFamily: theme.fontFamily.KOREAN,\n fontWeight: \"bold\",\n cursor: \"pointer\",\n transition: \"all 0.2s ease\",\n textAlign: \"center\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n gap: \"12px\",\n boxShadow: \"none\",\n ...getFocusStyle(isFocused, {\n outlineWidth: 3,\n boxShadow: `0 0 0 4px ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.3)}, 0 0 20px ${hexToRgbaString(theme.colors.PRIMARY_CYAN, 0.5)}`,\n }),\n }}\n onMouseOver={(e) => {\n e.currentTarget.style.backgroundColor = hexToRgbaString(\n theme.colors.PRIMARY_CYAN,\n 1,\n );\n e.currentTarget.style.color = hexToRgbaString(\n theme.colors.UI_BACKGROUND_DARK,\n 1,\n );\n e.currentTarget.style.transform = \"scale(1.05)\";\n e.currentTarget.style.boxShadow = `0 0 20px ${hexToRgbaString(\n theme.colors.PRIMARY_CYAN,\n 0.5,\n )}`;\n }}\n onMouseOut={(e) => {\n e.currentTarget.style.backgroundColor = hexToRgbaString(\n theme.colors.UI_BACKGROUND_MEDIUM,\n 0.9,\n );\n e.currentTarget.style.color = hexToRgbaString(\n theme.colors.PRIMARY_CYAN,\n 1,\n );\n e.currentTarget.style.transform = \"scale(1)\";\n e.currentTarget.style.boxShadow = \"none\";\n }}\n >\n {icon && <span style={{ fontSize: \"24px\" }}>{icon}</span>}\n <span>\n {labelKorean} | {labelEnglish}\n </span>\n </button>\n );\n },\n);\n\nPauseMenuButton.displayName = \"PauseMenuButton\";\n\nexport default PauseMenuButton;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA,IAAa,kBAAkB,YAK3B,EACE,aACA,cACA,MACA,SACA,cACA,WACA,SACA,WACA,UACA,UAEF,QACG;CACH,MAAM,QAAQ,eAAe;EAAE,SAAS;EAAW,MAAM;EAAM;EAAU,CAAC;AAE1E,QACE,qBAAC,UAAD;EACO;EACI;EACK;EACH;EACF;EACT,eAAa;EACb,cAAY,GAAG,YAAY,KAAK;EAChC,MAAK;EACL,UAAU;EACV,OAAO;GACL,SAAS,WAAW,cAAc;GAClC,UAAU,WAAW,SAAS;GAC9B,iBAAiB,gBACf,MAAM,OAAO,sBACb,GACD;GACD,OAAO,gBAAgB,MAAM,OAAO,cAAc,EAAE;GACpD,QAAQ,aAAa,gBAAgB,MAAM,OAAO,cAAc,GAAI;GACpE,cAAc;GACd,YAAY,MAAM,WAAW;GAC7B,YAAY;GACZ,QAAQ;GACR,YAAY;GACZ,WAAW;GACX,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,KAAK;GACL,WAAW;GACX,GAAG,cAAc,WAAW;IAC1B,cAAc;IACd,WAAW,aAAa,gBAAgB,MAAM,OAAO,cAAc,GAAI,CAAC,aAAa,gBAAgB,MAAM,OAAO,cAAc,GAAI;IACrI,CAAC;GACH;EACD,cAAc,MAAM;AAClB,KAAE,cAAc,MAAM,kBAAkB,gBACtC,MAAM,OAAO,cACb,EACD;AACD,KAAE,cAAc,MAAM,QAAQ,gBAC5B,MAAM,OAAO,oBACb,EACD;AACD,KAAE,cAAc,MAAM,YAAY;AAClC,KAAE,cAAc,MAAM,YAAY,YAAY,gBAC5C,MAAM,OAAO,cACb,GACD;;EAEH,aAAa,MAAM;AACjB,KAAE,cAAc,MAAM,kBAAkB,gBACtC,MAAM,OAAO,sBACb,GACD;AACD,KAAE,cAAc,MAAM,QAAQ,gBAC5B,MAAM,OAAO,cACb,EACD;AACD,KAAE,cAAc,MAAM,YAAY;AAClC,KAAE,cAAc,MAAM,YAAY;;YA5DtC,CA+DG,QAAQ,oBAAC,QAAD;GAAM,OAAO,EAAE,UAAU,QAAQ;aAAG;GAAY,CAAA,EACzD,qBAAC,QAAD,EAAA,UAAA;GACG;GAAY;GAAI;GACZ,EAAA,CAAA,CACA;;EAGd;AAED,gBAAgB,cAAc"}

package/lib/components/screens/combat/components/controls/QuickSettings.d.ts ADDED Viewed

@@ -0,0 +1,42 @@
+/**
+ * QuickSettings Component - In-game settings panel
+ *
+ * Features:
+ * - Volume controls (SFX, Music)
+ * - Audio toggle
+ * - Korean/English bilingual labels
+ * - Cyberpunk Korean theming
+ * - Uses useKoreanTheme for consistent styling
+ * - Enhanced accessibility with ARIA labels
+ *
+ * @module components/combat/controls
+ * @category Combat UI
+ * @korean 빠른설정
+ */
+import React from "react";
+export interface QuickSettingsProps {
+    readonly onClose: () => void;
+    readonly isMobile: boolean;
+}
+/**
+ * QuickSettings - In-game settings overlay for audio controls
+ *
+ * Refactored to use useKoreanTheme for consistent theming:
+ * - useKoreanTheme hook for centralized color and font management
+ * - Improved accessibility with ARIA labels and dialog semantics
+ * - Enhanced form controls with proper ARIA attributes
+ *
+ * Note: Uses standard HTML button elements rather than BaseButton
+ * since this is a 2D HTML overlay component, not a Three.js component.
+ *
+ * @example
+ * ```tsx
+ * <QuickSettings
+ *   onClose={() => setShowSettings(false)}
+ *   isMobile={false}
+ * />
+ * ```
+ */
+export declare const QuickSettings: React.FC<QuickSettingsProps>;
+export default QuickSettings;
+//# sourceMappingURL=QuickSettings.d.ts.map

package/lib/components/screens/combat/components/controls/QuickSettings.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"QuickSettings.d.ts","sourceRoot":"","sources":["../../../../../../src/components/screens/combat/components/controls/QuickSettings.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;IAC7B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAkQtD,CAAC;AAEF,eAAe,aAAa,CAAC"}