blacktrigram 0.7.2

package/lib/components/screens/training/components/TrainingAICharacter3D.d.ts

@@ -0,0 +1,36 @@
+/**
+ * TrainingAICharacter3D - 3D character model for AI opponent in training
+ *
+ * Displays the AI opponent with stance-based materials and animations
+ *
+ * Performance optimizations:
+ * - Memoized geometries to prevent recreation on every render
+ * - Memoized materials for consistent shading
+ * - Minimal per-frame operations for 60fps target
+ * - Physics-based attack movement for realistic forward momentum
+ */
+import React from "react";
+import { TrigramStance } from "../../../../types/common";
+import { AnimationType } from "../../../../systems/animation";
+/**
+ * Props for TrainingAICharacter3D
+ */
+export interface TrainingAICharacter3DProps {
+    /** Position in 3D space */
+    readonly position: [number, number, number];
+    /** Current trigram stance */
+    readonly stance: TrigramStance;
+    /** Whether AI is currently attacking */
+    readonly isAttacking?: boolean;
+    /** Animation type for current attack (used for forward movement) */
+    readonly attackAnimationType?: AnimationType;
+    /** Health percentage (0-1) */
+    readonly healthPercent?: number;
+}
+/**
+ * TrainingAICharacter3D Component
+ * Renders the AI opponent with stance-based visual effects and attack movement
+ */
+export declare const TrainingAICharacter3D: React.FC<TrainingAICharacter3DProps>;
+export default TrainingAICharacter3D;
+//# sourceMappingURL=TrainingAICharacter3D.d.ts.map

package/lib/components/screens/training/components/TrainingAICharacter3D.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrainingAICharacter3D.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/training/components/TrainingAICharacter3D.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAGH,OAAO,KAAqC,MAAM,OAAO,CAAC;AAE1D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAGzD,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAE9D;;GAEG;AACH,MAAM,WAAW,0BAA0B;IACzC,2BAA2B;IAC3B,QAAQ,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5C,6BAA6B;IAC7B,QAAQ,CAAC,MAAM,EAAE,aAAa,CAAC;IAC/B,wCAAwC;IACxC,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAC/B,oEAAoE;IACpE,QAAQ,CAAC,mBAAmB,CAAC,EAAE,aAAa,CAAC;IAC7C,8BAA8B;IAC9B,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC;CACjC;AAoBD;;;GAGG;AACH,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CA2OtE,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/lib/components/screens/training/components/TrainingAICharacter3D.js

@@ -0,0 +1,6 @@
+import "../../../../types/constants/index.js";
+import "../../../../systems/physics/index.js";
+import "react";
+import "react/jsx-runtime";
+import "@react-three/fiber";
+import "three";

package/lib/components/screens/training/components/TrainingArena3D.d.ts

@@ -0,0 +1,22 @@
+/**
+ * TrainingArena3D - 3D training dojang floor
+ *
+ * Provides the ground plane for the training area with Korean-themed aesthetics
+ */
+import React from "react";
+/**
+ * Props for TrainingArena3D component
+ */
+export interface TrainingArena3DProps {
+    /** Size of the arena. Defaults to 20 */
+    readonly size?: number;
+    /** Whether to show grid lines. Defaults to true */
+    readonly showGrid?: boolean;
+}
+/**
+ * TrainingArena3D Component
+ * Renders the training dojang floor with Korean aesthetic
+ */
+export declare const TrainingArena3D: React.FC<TrainingArena3DProps>;
+export default TrainingArena3D;
+//# sourceMappingURL=TrainingArena3D.d.ts.map

package/lib/components/screens/training/components/TrainingArena3D.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrainingArena3D.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/training/components/TrainingArena3D.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAqC,MAAM,OAAO,CAAC;AAI1D;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,wCAAwC;IACxC,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,mDAAmD;IACnD,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAwE1D,CAAC;AA0DF,eAAe,eAAe,CAAC"}

package/lib/components/screens/training/components/TrainingArena3D.js

@@ -0,0 +1,5 @@
+import "../../../../types/constants/index.js";
+import "react";
+import "react/jsx-runtime";
+import "@react-three/fiber";
+import "three";

package/lib/components/screens/training/components/TrainingButtonsOverlayHtml.d.ts

@@ -0,0 +1,73 @@
+/**
+ * TrainingButtons - Reusable button components for TrainingScreen
+ *
+ * Provides return-to-menu button and archetype selection buttons.
+ * Extracted from TrainingScreen3D to reduce code duplication.
+ *
+ * @module components/screens/training
+ * @category Training UI
+ * @korean 훈련버튼
+ */
+import React from "react";
+import { PlayerArchetype } from "../../../../types/common";
+export interface ReturnToMenuButtonProps {
+    /** Callback when button is clicked */
+    readonly onClick: () => void;
+    /** Callback when mouse enters button */
+    readonly onMouseEnter?: () => void;
+    /** Whether on mobile device */
+    readonly isMobile: boolean;
+}
+/**
+ * ReturnToMenuButton Component
+ *
+ * Bilingual button to return to main menu from training screen.
+ * Uses BaseButtonOverlayHtml for consistent Korean theming.
+ *
+ * Refactored to use BaseButtonOverlayHtml for better consistency.
+ *
+ * @example
+ * ```tsx
+ * <ReturnToMenuButton
+ *   onClick={() => navigate('/menu')}
+ *   onMouseEnter={() => playSound()}
+ *   isMobile={false}
+ * />
+ * ```
+ */
+export declare const ReturnToMenuButton: React.FC<ReturnToMenuButtonProps>;
+export interface ArchetypeSelectionButtonsProps {
+    /** Currently selected archetype */
+    readonly selectedArchetype: PlayerArchetype;
+    /** Callback when archetype is selected */
+    readonly onArchetypeSelect: (archetype: PlayerArchetype) => void;
+    /** Callback to play sound effects */
+    readonly onPlaySFX?: (sound: string) => void;
+    /** Whether on mobile device */
+    readonly isMobile: boolean;
+}
+/**
+ * ArchetypeSelectionButtons Component
+ *
+ * Grid of buttons to select player archetype during training.
+ * Highlights selected archetype with gold background.
+ *
+ * Reduces code duplication by 35 lines from TrainingScreen3D (inline button logic)
+ *
+ * @example
+ * ```tsx
+ * <ArchetypeSelectionButtons
+ *   selectedArchetype={PlayerArchetype.MUSA}
+ *   onArchetypeSelect={(arch) => setArchetype(arch)}
+ *   onPlaySFX={(sound) => audio.play(sound)}
+ *   isMobile={false}
+ * />
+ * ```
+ */
+export declare const ArchetypeSelectionButtons: React.FC<ArchetypeSelectionButtonsProps>;
+declare const _default: {
+    ReturnToMenuButton: React.FC<ReturnToMenuButtonProps>;
+    ArchetypeSelectionButtons: React.FC<ArchetypeSelectionButtonsProps>;
+};
+export default _default;
+//# sourceMappingURL=TrainingButtonsOverlayHtml.d.ts.map

package/lib/components/screens/training/components/TrainingButtonsOverlayHtml.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrainingButtonsOverlayHtml.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/training/components/TrainingButtonsOverlayHtml.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAK3D,MAAM,WAAW,uBAAuB;IACtC,sCAAsC;IACtC,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;IAC7B,wCAAwC;IACxC,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,+BAA+B;IAC/B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAiBhE,CAAC;AAEF,MAAM,WAAW,8BAA8B;IAC7C,mCAAmC;IACnC,QAAQ,CAAC,iBAAiB,EAAE,eAAe,CAAC;IAC5C,0CAA0C;IAC1C,QAAQ,CAAC,iBAAiB,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;IACjE,qCAAqC;IACrC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,+BAA+B;IAC/B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,EAAE,CAC9C,8BAA8B,CA0D/B,CAAC;;;;;AAEF,wBAAiE"}

package/lib/components/screens/training/components/TrainingButtonsOverlayHtml.js

@@ -0,0 +1,107 @@
+import { PlayerArchetype } from "../../../../types/common.js";
+import { hexToRgbaString } from "../../../../utils/colorUtils.js";
+import { useKoreanTheme } from "../../../shared/base/useKoreanTheme.js";
+import { BaseButtonOverlayHtml } from "../../../shared/base/BaseButtonOverlayHtml.js";
+import { useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/screens/training/components/TrainingButtonsOverlayHtml.tsx
+/**
+* TrainingButtons - Reusable button components for TrainingScreen
+* 
+* Provides return-to-menu button and archetype selection buttons.
+* Extracted from TrainingScreen3D to reduce code duplication.
+* 
+* @module components/screens/training
+* @category Training UI
+* @korean 훈련버튼
+*/
+/**
+* ReturnToMenuButton Component
+* 
+* Bilingual button to return to main menu from training screen.
+* Uses BaseButtonOverlayHtml for consistent Korean theming.
+* 
+* Refactored to use BaseButtonOverlayHtml for better consistency.
+* 
+* @example
+* ```tsx
+* <ReturnToMenuButton
+*   onClick={() => navigate('/menu')}
+*   onMouseEnter={() => playSound()}
+*   isMobile={false}
+* />
+* ```
+*/
+var ReturnToMenuButton = ({ onClick, onMouseEnter, isMobile }) => {
+	return /* @__PURE__ */ jsx(BaseButtonOverlayHtml, {
+		korean: isMobile ? "메뉴" : "메뉴로",
+		english: isMobile ? "Menu" : "Return to Menu",
+		onClick,
+		onMouseEnter,
+		variant: "primary",
+		size: "md",
+		isMobile,
+		testId: "return-to-menu-button"
+	});
+};
+/**
+* ArchetypeSelectionButtons Component
+* 
+* Grid of buttons to select player archetype during training.
+* Highlights selected archetype with gold background.
+* 
+* Reduces code duplication by 35 lines from TrainingScreen3D (inline button logic)
+* 
+* @example
+* ```tsx
+* <ArchetypeSelectionButtons
+*   selectedArchetype={PlayerArchetype.MUSA}
+*   onArchetypeSelect={(arch) => setArchetype(arch)}
+*   onPlaySFX={(sound) => audio.play(sound)}
+*   isMobile={false}
+* />
+* ```
+*/
+var ArchetypeSelectionButtons = ({ selectedArchetype, onArchetypeSelect, onPlaySFX, isMobile }) => {
+	const theme = useKoreanTheme({
+		variant: "primary",
+		size: "sm",
+		isMobile
+	});
+	const handleArchetypeClick = useCallback((archetype) => {
+		onArchetypeSelect(archetype);
+		onPlaySFX?.("menu_select");
+	}, [onArchetypeSelect, onPlaySFX]);
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			display: "flex",
+			flexWrap: "wrap",
+			gap: "4px",
+			justifyContent: "center"
+		},
+		"data-testid": "archetype-selection-buttons",
+		children: Object.values(PlayerArchetype).map((arch) => /* @__PURE__ */ jsx("button", {
+			onClick: () => handleArchetypeClick(arch),
+			style: {
+				padding: isMobile ? "4px 8px" : "6px 10px",
+				fontSize: isMobile ? "9px" : "11px",
+				fontFamily: theme.koreanTypography.fontFamily,
+				fontWeight: selectedArchetype === arch ? "bold" : "normal",
+				background: selectedArchetype === arch ? hexToRgbaString(theme.colors.ACCENT_GOLD, .8) : hexToRgbaString(theme.colors.UI_BACKGROUND_MEDIUM, .8),
+				color: selectedArchetype === arch ? hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 1) : hexToRgbaString(theme.colors.TEXT_PRIMARY, 1),
+				border: `1px solid ${hexToRgbaString(selectedArchetype === arch ? theme.colors.ACCENT_GOLD : theme.colors.UI_BORDER, .6)}`,
+				borderRadius: "4px",
+				cursor: "pointer",
+				transition: "all 0.2s ease"
+			},
+			"data-testid": `archetype-button-${arch}`,
+			"aria-label": `Select ${arch} archetype`,
+			"aria-pressed": selectedArchetype === arch,
+			children: arch.toUpperCase()
+		}, arch))
+	});
+};
+//#endregion
+export { ArchetypeSelectionButtons, ReturnToMenuButton };
+
+//# sourceMappingURL=TrainingButtonsOverlayHtml.js.map

package/lib/components/screens/training/components/TrainingButtonsOverlayHtml.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrainingButtonsOverlayHtml.js","names":[],"sources":["../../../../../src/components/screens/training/components/TrainingButtonsOverlayHtml.tsx"],"sourcesContent":["/**\n * TrainingButtons - Reusable button components for TrainingScreen\n * \n * Provides return-to-menu button and archetype selection buttons.\n * Extracted from TrainingScreen3D to reduce code duplication.\n * \n * @module components/screens/training\n * @category Training UI\n * @korean 훈련버튼\n */\n\nimport React, { useCallback } from \"react\";\nimport { PlayerArchetype } from \"../../../../types/common\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\nimport { useKoreanTheme } from \"../../../shared/base/useKoreanTheme\";\nimport { BaseButtonOverlayHtml } from \"../../../shared/base/BaseButtonOverlayHtml\";\n\nexport interface ReturnToMenuButtonProps {\n  /** Callback when button is clicked */\n  readonly onClick: () => void;\n  /** Callback when mouse enters button */\n  readonly onMouseEnter?: () => void;\n  /** Whether on mobile device */\n  readonly isMobile: boolean;\n}\n\n/**\n * ReturnToMenuButton Component\n * \n * Bilingual button to return to main menu from training screen.\n * Uses BaseButtonOverlayHtml for consistent Korean theming.\n * \n * Refactored to use BaseButtonOverlayHtml for better consistency.\n * \n * @example\n * ```tsx\n * <ReturnToMenuButton\n *   onClick={() => navigate('/menu')}\n *   onMouseEnter={() => playSound()}\n *   isMobile={false}\n * />\n * ```\n */\nexport const ReturnToMenuButton: React.FC<ReturnToMenuButtonProps> = ({\n  onClick,\n  onMouseEnter,\n  isMobile,\n}) => {\n  return (\n    <BaseButtonOverlayHtml\n      korean={isMobile ? \"메뉴\" : \"메뉴로\"}\n      english={isMobile ? \"Menu\" : \"Return to Menu\"}\n      onClick={onClick}\n      onMouseEnter={onMouseEnter}\n      variant=\"primary\"\n      size=\"md\"\n      isMobile={isMobile}\n      testId=\"return-to-menu-button\"\n    />\n  );\n};\n\nexport interface ArchetypeSelectionButtonsProps {\n  /** Currently selected archetype */\n  readonly selectedArchetype: PlayerArchetype;\n  /** Callback when archetype is selected */\n  readonly onArchetypeSelect: (archetype: PlayerArchetype) => void;\n  /** Callback to play sound effects */\n  readonly onPlaySFX?: (sound: string) => void;\n  /** Whether on mobile device */\n  readonly isMobile: boolean;\n}\n\n/**\n * ArchetypeSelectionButtons Component\n * \n * Grid of buttons to select player archetype during training.\n * Highlights selected archetype with gold background.\n * \n * Reduces code duplication by 35 lines from TrainingScreen3D (inline button logic)\n * \n * @example\n * ```tsx\n * <ArchetypeSelectionButtons\n *   selectedArchetype={PlayerArchetype.MUSA}\n *   onArchetypeSelect={(arch) => setArchetype(arch)}\n *   onPlaySFX={(sound) => audio.play(sound)}\n *   isMobile={false}\n * />\n * ```\n */\nexport const ArchetypeSelectionButtons: React.FC<\n  ArchetypeSelectionButtonsProps\n> = ({ selectedArchetype, onArchetypeSelect, onPlaySFX, isMobile }) => {\n  const theme = useKoreanTheme({ variant: \"primary\", size: \"sm\", isMobile });\n\n  const handleArchetypeClick = useCallback(\n    (archetype: PlayerArchetype) => {\n      onArchetypeSelect(archetype);\n      onPlaySFX?.(\"menu_select\");\n    },\n    [onArchetypeSelect, onPlaySFX],\n  );\n\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        flexWrap: \"wrap\",\n        gap: \"4px\",\n        justifyContent: \"center\",\n      }}\n      data-testid=\"archetype-selection-buttons\"\n    >\n      {Object.values(PlayerArchetype).map((arch) => (\n        <button\n          key={arch}\n          onClick={() => handleArchetypeClick(arch)}\n          style={{\n            padding: isMobile ? \"4px 8px\" : \"6px 10px\",\n            fontSize: isMobile ? \"9px\" : \"11px\",\n            fontFamily: theme.koreanTypography.fontFamily,\n            fontWeight: selectedArchetype === arch ? \"bold\" : \"normal\",\n            background:\n              selectedArchetype === arch\n                ? hexToRgbaString(theme.colors.ACCENT_GOLD, 0.8)\n                : hexToRgbaString(theme.colors.UI_BACKGROUND_MEDIUM, 0.8),\n            color:\n              selectedArchetype === arch\n                ? hexToRgbaString(theme.colors.UI_BACKGROUND_DARK, 1)\n                : hexToRgbaString(theme.colors.TEXT_PRIMARY, 1),\n            border: `1px solid ${hexToRgbaString(\n              selectedArchetype === arch\n                ? theme.colors.ACCENT_GOLD\n                : theme.colors.UI_BORDER,\n              0.6,\n            )}`,\n            borderRadius: \"4px\",\n            cursor: \"pointer\",\n            transition: \"all 0.2s ease\",\n          }}\n          data-testid={`archetype-button-${arch}`}\n          aria-label={`Select ${arch} archetype`}\n          aria-pressed={selectedArchetype === arch}\n        >\n          {arch.toUpperCase()}\n        </button>\n      ))}\n    </div>\n  );\n};\n\nexport default { ReturnToMenuButton, ArchetypeSelectionButtons };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,IAAa,sBAAyD,EACpE,SACA,cACA,eACI;AACJ,QACE,oBAAC,uBAAD;EACE,QAAQ,WAAW,OAAO;EAC1B,SAAS,WAAW,SAAS;EACpB;EACK;EACd,SAAQ;EACR,MAAK;EACK;EACV,QAAO;EACP,CAAA;;;;;;;;;;;;;;;;;;;;AAiCN,IAAa,6BAER,EAAE,mBAAmB,mBAAmB,WAAW,eAAe;CACrE,MAAM,QAAQ,eAAe;EAAE,SAAS;EAAW,MAAM;EAAM;EAAU,CAAC;CAE1E,MAAM,uBAAuB,aAC1B,cAA+B;AAC9B,oBAAkB,UAAU;AAC5B,cAAY,cAAc;IAE5B,CAAC,mBAAmB,UAAU,CAC/B;AAED,QACE,oBAAC,OAAD;EACE,OAAO;GACL,SAAS;GACT,UAAU;GACV,KAAK;GACL,gBAAgB;GACjB;EACD,eAAY;YAEX,OAAO,OAAO,gBAAgB,CAAC,KAAK,SACnC,oBAAC,UAAD;GAEE,eAAe,qBAAqB,KAAK;GACzC,OAAO;IACL,SAAS,WAAW,YAAY;IAChC,UAAU,WAAW,QAAQ;IAC7B,YAAY,MAAM,iBAAiB;IACnC,YAAY,sBAAsB,OAAO,SAAS;IAClD,YACE,sBAAsB,OAClB,gBAAgB,MAAM,OAAO,aAAa,GAAI,GAC9C,gBAAgB,MAAM,OAAO,sBAAsB,GAAI;IAC7D,OACE,sBAAsB,OAClB,gBAAgB,MAAM,OAAO,oBAAoB,EAAE,GACnD,gBAAgB,MAAM,OAAO,cAAc,EAAE;IACnD,QAAQ,aAAa,gBACnB,sBAAsB,OAClB,MAAM,OAAO,cACb,MAAM,OAAO,WACjB,GACD;IACD,cAAc;IACd,QAAQ;IACR,YAAY;IACb;GACD,eAAa,oBAAoB;GACjC,cAAY,UAAU,KAAK;GAC3B,gBAAc,sBAAsB;aAEnC,KAAK,aAAa;GACZ,EA9BF,KA8BE,CACT;EACE,CAAA"}

package/lib/components/screens/training/components/TrainingControlsOverlayHtml.d.ts

@@ -0,0 +1,50 @@
+/**
+ * TrainingControlsOverlayHtml - Html overlay for training controls
+ *
+ * Displays start/stop button and training status with consistent Korean theming.
+ * Uses KOREAN_COLORS constants and bilingual formatting.
+ *
+ * @module components/screens/training
+ * @category Training UI
+ * @korean 훈련제어오버레이
+ */
+import React from "react";
+import "../training.css";
+/**
+ * Props for TrainingControlsOverlayHtml component
+ */
+export interface TrainingControlsOverlayHtmlProps {
+    /** Whether training is currently active */
+    readonly isTraining: boolean;
+    /** Callback to start training */
+    readonly onStartTraining: () => void;
+    /** Callback to stop training */
+    readonly onStopTraining: () => void;
+    /** Whether on mobile device */
+    readonly isMobile: boolean;
+}
+/**
+ * TrainingControlsOverlayHtml Component
+ *
+ * Html overlay showing training status and start/stop controls with Korean theming.
+ * All colors use KOREAN_COLORS constants for consistency.
+ *
+ * Optimized with React.memo for 60fps performance:
+ * - Prevents re-renders when isTraining state hasn't changed
+ * - Callbacks expected to be stable (parent should use useCallback)
+ *
+ * @example
+ * ```tsx
+ * <TrainingControlsOverlayHtml
+ *   isTraining={true}
+ *   onStartTraining={() => console.log('start')}
+ *   onStopTraining={() => console.log('stop')}
+ *   isMobile={false}
+ * />
+ * ```
+ *
+ * @korean 훈련제어오버레이컴포넌트
+ */
+export declare const TrainingControlsOverlayHtml: React.NamedExoticComponent<TrainingControlsOverlayHtmlProps>;
+export default TrainingControlsOverlayHtml;
+//# sourceMappingURL=TrainingControlsOverlayHtml.d.ts.map

package/lib/components/screens/training/components/TrainingControlsOverlayHtml.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrainingControlsOverlayHtml.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/training/components/TrainingControlsOverlayHtml.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAiB1B,OAAO,iBAAiB,CAAC;AAEzB;;GAEG;AACH,MAAM,WAAW,gCAAgC;IAC/C,2CAA2C;IAC3C,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAC7B,iCAAiC;IACjC,QAAQ,CAAC,eAAe,EAAE,MAAM,IAAI,CAAC;IACrC,gCAAgC;IAChC,QAAQ,CAAC,cAAc,EAAE,MAAM,IAAI,CAAC;IACpC,+BAA+B;IAC/B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,2BAA2B,8DAmIvC,CAAC;AAIF,eAAe,2BAA2B,CAAC"}

package/lib/components/screens/training/components/TrainingControlsOverlayHtml.js

@@ -0,0 +1,129 @@
+import { KOREAN_COLORS } from "../../../../types/constants/colors.js";
+import { FONT_FAMILY } from "../../../../types/constants/typography.js";
+import { SPACING } from "../../../../types/constants/ui.js";
+import "../../../../types/constants/index.js";
+import { hexToRgbaString } from "../../../../utils/colorUtils.js";
+import { getNeonTextShadow, getSmoothTransition } from "../../../../utils/visualEffects.js";
+import { formatBilingualText, getEnhancedKoreanOverlayStyles, getKoreanButtonWithGlow, getResponsiveSpacing } from "../../../../utils/koreanThemeHelpers.js";
+/* empty css          */
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/screens/training/components/TrainingControlsOverlayHtml.tsx
+/**
+* TrainingControlsOverlayHtml - Html overlay for training controls
+* 
+* Displays start/stop button and training status with consistent Korean theming.
+* Uses KOREAN_COLORS constants and bilingual formatting.
+* 
+* @module components/screens/training
+* @category Training UI
+* @korean 훈련제어오버레이
+*/
+/**
+* TrainingControlsOverlayHtml Component
+* 
+* Html overlay showing training status and start/stop controls with Korean theming.
+* All colors use KOREAN_COLORS constants for consistency.
+*
+* Optimized with React.memo for 60fps performance:
+* - Prevents re-renders when isTraining state hasn't changed
+* - Callbacks expected to be stable (parent should use useCallback)
+* 
+* @example
+* ```tsx
+* <TrainingControlsOverlayHtml
+*   isTraining={true}
+*   onStartTraining={() => console.log('start')}
+*   onStopTraining={() => console.log('stop')}
+*   isMobile={false}
+* />
+* ```
+* 
+* @korean 훈련제어오버레이컴포넌트
+*/
+var TrainingControlsOverlayHtml = React.memo(({ isTraining, onStartTraining, onStopTraining, isMobile }) => {
+	const panelWidth = isMobile ? 200 : 220;
+	const panelHeight = isMobile ? 90 : 100;
+	const padding = getResponsiveSpacing("sm", isMobile);
+	const stateColor = isTraining ? KOREAN_COLORS.ACCENT_GREEN : KOREAN_COLORS.ACCENT_RED;
+	const borderColor = hexToRgbaString(stateColor, .9);
+	const panelStyle = {
+		...getEnhancedKoreanOverlayStyles({
+			opacity: .88,
+			glowIntensity: isTraining ? "medium" : "subtle",
+			includeGradient: false,
+			includeBackdropBlur: true,
+			depthLayers: 2
+		}),
+		width: `${panelWidth}px`,
+		height: `${panelHeight}px`,
+		padding: `${padding}px`,
+		border: `2px solid ${borderColor}`,
+		position: "relative"
+	};
+	const buttonStyles = React.useMemo(() => getKoreanButtonWithGlow({
+		variant: isTraining ? "danger" : "success",
+		glowIntensity: "strong",
+		hoverAnimation: "combined"
+	}), [isTraining]);
+	const titleFontSize = isMobile ? 13 : 14;
+	const infoFontSize = isMobile ? 9 : 10;
+	return /* @__PURE__ */ jsxs("div", {
+		style: panelStyle,
+		"data-testid": "training-controls-html",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				style: { marginBottom: `${SPACING.SM}px` },
+				children: /* @__PURE__ */ jsx("div", {
+					style: {
+						fontSize: `${titleFontSize}px`,
+						fontWeight: "bold",
+						color: hexToRgbaString(stateColor),
+						fontFamily: FONT_FAMILY.KOREAN,
+						textShadow: getNeonTextShadow(stateColor, isTraining ? "medium" : "subtle"),
+						transition: getSmoothTransition("all", "normal")
+					},
+					children: formatBilingualText(isTraining ? "훈련 진행중" : "훈련 대기", isTraining ? "Training Active" : "Training Stopped", "pipe")
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: `status-indicator ${isTraining ? "active" : "inactive"}`,
+				style: {
+					position: "absolute",
+					top: "12px",
+					right: "12px"
+				}
+			}),
+			/* @__PURE__ */ jsxs("button", {
+				onClick: isTraining ? onStopTraining : onStartTraining,
+				className: `training-button ${isTraining ? "training-button-stop" : "training-button-start"}`,
+				style: {
+					...buttonStyles,
+					fontSize: `${titleFontSize}px`,
+					height: "35px"
+				},
+				"data-testid": "training-toggle-button",
+				"data-training-state": isTraining ? "active" : "inactive",
+				children: [/* @__PURE__ */ jsx("span", { children: isTraining ? "⏹" : "▶" }), /* @__PURE__ */ jsx("span", { children: formatBilingualText(isTraining ? "중지" : "시작", isTraining ? "Stop" : "Start", "pipe") })]
+			}),
+			!isTraining && /* @__PURE__ */ jsxs("div", {
+				style: {
+					fontSize: `${infoFontSize}px`,
+					color: hexToRgbaString(KOREAN_COLORS.TEXT_TERTIARY),
+					textAlign: "center",
+					marginTop: `${SPACING.XS}px`,
+					fontFamily: FONT_FAMILY.KOREAN,
+					lineHeight: "1.4"
+				},
+				children: [/* @__PURE__ */ jsx("div", { children: "모드 변경시 자동 재시작" }), /* @__PURE__ */ jsx("div", { children: "Auto-restarts on mode change" })]
+			})
+		]
+	});
+}, (prevProps, nextProps) => {
+	return prevProps.isTraining === nextProps.isTraining && prevProps.isMobile === nextProps.isMobile && prevProps.onStartTraining === nextProps.onStartTraining && prevProps.onStopTraining === nextProps.onStopTraining;
+});
+TrainingControlsOverlayHtml.displayName = "TrainingControlsOverlayHtml";
+//#endregion
+export { TrainingControlsOverlayHtml as default };
+
+//# sourceMappingURL=TrainingControlsOverlayHtml.js.map

package/lib/components/screens/training/components/TrainingControlsOverlayHtml.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrainingControlsOverlayHtml.js","names":[],"sources":["../../../../../src/components/screens/training/components/TrainingControlsOverlayHtml.tsx"],"sourcesContent":["/**\n * TrainingControlsOverlayHtml - Html overlay for training controls\n * \n * Displays start/stop button and training status with consistent Korean theming.\n * Uses KOREAN_COLORS constants and bilingual formatting.\n * \n * @module components/screens/training\n * @category Training UI\n * @korean 훈련제어오버레이\n */\n\nimport React from \"react\";\nimport {\n  FONT_FAMILY,\n  KOREAN_COLORS,\n} from \"../../../../types/constants\";\nimport { SPACING } from \"../../../../types/constants/ui\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\nimport {\n  formatBilingualText,\n  getEnhancedKoreanOverlayStyles,\n  getKoreanButtonWithGlow,\n  getResponsiveSpacing,\n} from \"../../../../utils/koreanThemeHelpers\";\nimport {\n  getNeonTextShadow,\n  getSmoothTransition,\n} from \"../../../../utils/visualEffects\";\nimport \"../training.css\";\n\n/**\n * Props for TrainingControlsOverlayHtml component\n */\nexport interface TrainingControlsOverlayHtmlProps {\n  /** Whether training is currently active */\n  readonly isTraining: boolean;\n  /** Callback to start training */\n  readonly onStartTraining: () => void;\n  /** Callback to stop training */\n  readonly onStopTraining: () => void;\n  /** Whether on mobile device */\n  readonly isMobile: boolean;\n}\n\n/**\n * TrainingControlsOverlayHtml Component\n * \n * Html overlay showing training status and start/stop controls with Korean theming.\n * All colors use KOREAN_COLORS constants for consistency.\n *\n * Optimized with React.memo for 60fps performance:\n * - Prevents re-renders when isTraining state hasn't changed\n * - Callbacks expected to be stable (parent should use useCallback)\n * \n * @example\n * ```tsx\n * <TrainingControlsOverlayHtml\n *   isTraining={true}\n *   onStartTraining={() => console.log('start')}\n *   onStopTraining={() => console.log('stop')}\n *   isMobile={false}\n * />\n * ```\n * \n * @korean 훈련제어오버레이컴포넌트\n */\nexport const TrainingControlsOverlayHtml = React.memo<TrainingControlsOverlayHtmlProps>(\n  ({\n    isTraining,\n    onStartTraining,\n    onStopTraining,\n    isMobile,\n  }) => {\n  const panelWidth = isMobile ? 200 : 220;\n  const panelHeight = isMobile ? 90 : 100;\n  const padding = getResponsiveSpacing(\"sm\", isMobile);\n\n  // Use Korean colors for border based on training state\n  const stateColor = isTraining ? KOREAN_COLORS.ACCENT_GREEN : KOREAN_COLORS.ACCENT_RED;\n  const borderColor = hexToRgbaString(stateColor, 0.9);\n\n  // Enhanced panel styles with neon glow\n  const panelStyle: React.CSSProperties = {\n    ...getEnhancedKoreanOverlayStyles({\n      opacity: 0.88,\n      glowIntensity: isTraining ? \"medium\" : \"subtle\",\n      includeGradient: false,\n      includeBackdropBlur: true,\n      depthLayers: 2,\n    }),\n    width: `${panelWidth}px`,\n    height: `${panelHeight}px`,\n    padding: `${padding}px`,\n    border: `2px solid ${borderColor}`,\n    position: \"relative\",\n  };\n\n  // Enhanced button styles (memoized, interaction states handled internally by getKoreanButtonWithGlow)\n  const buttonStyles = React.useMemo(\n    () =>\n      getKoreanButtonWithGlow({\n        variant: isTraining ? \"danger\" : \"success\",\n        glowIntensity: \"strong\",\n        hoverAnimation: \"combined\",\n      }),\n    [isTraining]\n  );\n\n  const titleFontSize = isMobile ? 13 : 14;\n  const infoFontSize = isMobile ? 9 : 10;\n\n  return (\n    <div style={panelStyle} data-testid=\"training-controls-html\">\n      {/* Header with bilingual status */}\n      <div style={{ marginBottom: `${SPACING.SM}px` }}>\n        <div\n          style={{\n            fontSize: `${titleFontSize}px`,\n            fontWeight: \"bold\",\n            color: hexToRgbaString(stateColor),\n            fontFamily: FONT_FAMILY.KOREAN,\n            textShadow: getNeonTextShadow(stateColor, isTraining ? \"medium\" : \"subtle\"),\n            transition: getSmoothTransition(\"all\", \"normal\"),\n          }}\n        >\n          {formatBilingualText(\n            isTraining ? \"훈련 진행중\" : \"훈련 대기\",\n            isTraining ? \"Training Active\" : \"Training Stopped\",\n            \"pipe\"\n          )}\n        </div>\n      </div>\n\n      {/* Status Indicator with CSS animation */}\n      <div\n        className={`status-indicator ${isTraining ? \"active\" : \"inactive\"}`}\n        style={{\n          position: \"absolute\",\n          top: \"12px\",\n          right: \"12px\",\n        }}\n      />\n\n      {/* Start/Stop Button with Korean theming */}\n      <button\n        onClick={isTraining ? onStopTraining : onStartTraining}\n        className={`training-button ${isTraining ? \"training-button-stop\" : \"training-button-start\"}`}\n        style={{\n          ...buttonStyles,\n          // Note: fontSize from buttonStyles is intentionally overridden with titleFontSize\n          // to maintain consistent sizing with the training header/title typography\n          fontSize: `${titleFontSize}px`,\n          height: \"35px\",\n        }}\n        data-testid=\"training-toggle-button\"\n        data-training-state={isTraining ? \"active\" : \"inactive\"}\n      >\n        <span>{isTraining ? \"⏹\" : \"▶\"}</span>\n        <span>\n          {formatBilingualText(\n            isTraining ? \"중지\" : \"시작\",\n            isTraining ? \"Stop\" : \"Start\",\n            \"pipe\"\n          )}\n        </span>\n      </button>\n\n      {/* Info text about auto-restart with Korean colors */}\n      {!isTraining && (\n        <div\n          style={{\n            fontSize: `${infoFontSize}px`,\n            color: hexToRgbaString(KOREAN_COLORS.TEXT_TERTIARY),\n            textAlign: \"center\",\n            marginTop: `${SPACING.XS}px`,\n            fontFamily: FONT_FAMILY.KOREAN,\n            lineHeight: \"1.4\",\n          }}\n        >\n          <div>모드 변경시 자동 재시작</div>\n          <div>Auto-restarts on mode change</div>\n        </div>\n      )}\n    </div>\n  );\n  },\n  (prevProps, nextProps) => {\n    // Re-render when training state, mobile state, or callbacks change\n    // Including callback props here avoids stale-closure issues where the\n    // component would keep calling outdated handlers that reference old state.\n    return (\n      prevProps.isTraining === nextProps.isTraining &&\n      prevProps.isMobile === nextProps.isMobile &&\n      prevProps.onStartTraining === nextProps.onStartTraining &&\n      prevProps.onStopTraining === nextProps.onStopTraining\n    );\n  },\n);\n\nTrainingControlsOverlayHtml.displayName = \"TrainingControlsOverlayHtml\";\n\nexport default TrainingControlsOverlayHtml;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA,IAAa,8BAA8B,MAAM,MAC9C,EACC,YACA,iBACA,gBACA,eACI;CACN,MAAM,aAAa,WAAW,MAAM;CACpC,MAAM,cAAc,WAAW,KAAK;CACpC,MAAM,UAAU,qBAAqB,MAAM,SAAS;CAGpD,MAAM,aAAa,aAAa,cAAc,eAAe,cAAc;CAC3E,MAAM,cAAc,gBAAgB,YAAY,GAAI;CAGpD,MAAM,aAAkC;EACtC,GAAG,+BAA+B;GAChC,SAAS;GACT,eAAe,aAAa,WAAW;GACvC,iBAAiB;GACjB,qBAAqB;GACrB,aAAa;GACd,CAAC;EACF,OAAO,GAAG,WAAW;EACrB,QAAQ,GAAG,YAAY;EACvB,SAAS,GAAG,QAAQ;EACpB,QAAQ,aAAa;EACrB,UAAU;EACX;CAGD,MAAM,eAAe,MAAM,cAEvB,wBAAwB;EACtB,SAAS,aAAa,WAAW;EACjC,eAAe;EACf,gBAAgB;EACjB,CAAC,EACJ,CAAC,WAAW,CACb;CAED,MAAM,gBAAgB,WAAW,KAAK;CACtC,MAAM,eAAe,WAAW,IAAI;AAEpC,QACE,qBAAC,OAAD;EAAK,OAAO;EAAY,eAAY;YAApC;GAEE,oBAAC,OAAD;IAAK,OAAO,EAAE,cAAc,GAAG,QAAQ,GAAG,KAAK;cAC7C,oBAAC,OAAD;KACE,OAAO;MACL,UAAU,GAAG,cAAc;MAC3B,YAAY;MACZ,OAAO,gBAAgB,WAAW;MAClC,YAAY,YAAY;MACxB,YAAY,kBAAkB,YAAY,aAAa,WAAW,SAAS;MAC3E,YAAY,oBAAoB,OAAO,SAAS;MACjD;eAEA,oBACC,aAAa,WAAW,SACxB,aAAa,oBAAoB,oBACjC,OACD;KACG,CAAA;IACF,CAAA;GAGN,oBAAC,OAAD;IACE,WAAW,oBAAoB,aAAa,WAAW;IACvD,OAAO;KACL,UAAU;KACV,KAAK;KACL,OAAO;KACR;IACD,CAAA;GAGF,qBAAC,UAAD;IACE,SAAS,aAAa,iBAAiB;IACvC,WAAW,mBAAmB,aAAa,yBAAyB;IACpE,OAAO;KACL,GAAG;KAGH,UAAU,GAAG,cAAc;KAC3B,QAAQ;KACT;IACD,eAAY;IACZ,uBAAqB,aAAa,WAAW;cAX/C,CAaE,oBAAC,QAAD,EAAA,UAAO,aAAa,MAAM,KAAW,CAAA,EACrC,oBAAC,QAAD,EAAA,UACG,oBACC,aAAa,OAAO,MACpB,aAAa,SAAS,SACtB,OACD,EACI,CAAA,CACA;;GAGR,CAAC,cACA,qBAAC,OAAD;IACE,OAAO;KACL,UAAU,GAAG,aAAa;KAC1B,OAAO,gBAAgB,cAAc,cAAc;KACnD,WAAW;KACX,WAAW,GAAG,QAAQ,GAAG;KACzB,YAAY,YAAY;KACxB,YAAY;KACb;cARH,CAUE,oBAAC,OAAD,EAAA,UAAK,iBAAmB,CAAA,EACxB,oBAAC,OAAD,EAAA,UAAK,gCAAkC,CAAA,CACnC;;GAEJ;;IAGP,WAAW,cAAc;AAIxB,QACE,UAAU,eAAe,UAAU,cACnC,UAAU,aAAa,UAAU,YACjC,UAAU,oBAAoB,UAAU,mBACxC,UAAU,mBAAmB,UAAU;EAG5C;AAED,4BAA4B,cAAc"}

package/lib/components/screens/training/components/TrainingDummy3D.d.ts

@@ -0,0 +1,72 @@
+/**
+ * TrainingDummy3D - 3D training dummy with vital points
+ *
+ * Provides anatomically accurate training dummy using SkeletalPlayer3D
+ * for Korean martial arts practice. Supports anatomy overlays and difficulty modes.
+ *
+ * Refactored to extend SkeletalPlayer3D for visual consistency with player characters.
+ *
+ * @module components/screens/training/TrainingDummy3D
+ * @category 3D Components
+ * @korean 훈련인형3D컴포넌트
+ */
+import React from "react";
+import { PlayerArchetype, TrigramStance } from "../../../../types/common";
+/**
+ * Difficulty mode for training
+ * @korean 난이도모드
+ */
+export type DifficultyMode = "easy" | "normal" | "hard";
+/**
+ * Props for TrainingDummy3D component
+ * @korean 훈련인형3D속성
+ */
+export interface TrainingDummy3DProps {
+    /** 3D world position of the dummy */
+    readonly position: [number, number, number];
+    /** Currently selected vital point for targeting */
+    readonly selectedVitalPoint: string | null;
+    /** Whether training is active */
+    readonly isTraining: boolean;
+    /** Current health of dummy (0-100) */
+    readonly health?: number;
+    /** Maximum health of dummy */
+    readonly maxHealth?: number;
+    /** Callback when vital point is hit */
+    readonly onVitalPointHit?: (vitalPointId: string) => void;
+    /** Callback when dummy is defeated */
+    readonly onDefeated?: () => void;
+    /** Difficulty mode (affects marker sizes) */
+    readonly difficulty?: DifficultyMode;
+    /** Number of vital points to display (3-70) */
+    readonly vitalPointCount?: number;
+    /** Whether on mobile device */
+    readonly isMobile?: boolean;
+    /** Archetype to display (affects body type and appearance) */
+    readonly archetype?: PlayerArchetype;
+    /** Current stance for the dummy */
+    readonly stance?: TrigramStance;
+}
+/**
+ * TrainingDummy3D Component
+ *
+ * Main training dummy using SkeletalPlayer3D for consistent visual appearance.
+ * Displays vital points for martial arts practice with difficulty-based sizing.
+ *
+ * @example
+ * ```tsx
+ * <TrainingDummy3D
+ *   position={[0, 0, 5]}
+ *   selectedVitalPoint="temple"
+ *   isTraining={true}
+ *   health={75}
+ *   difficulty="normal"
+ *   onVitalPointHit={(id) => console.log(`Hit ${id}`)}
+ * />
+ * ```
+ *
+ * @korean 훈련인형3D컴포넌트
+ */
+export declare const TrainingDummy3D: React.FC<TrainingDummy3DProps>;
+export default TrainingDummy3D;
+//# sourceMappingURL=TrainingDummy3D.d.ts.map

package/lib/components/screens/training/components/TrainingDummy3D.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrainingDummy3D.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/training/components/TrainingDummy3D.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAGH,OAAO,KAMN,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAK1E;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAExD;;;GAGG;AACH,MAAM,WAAW,oBAAoB;IACnC,qCAAqC;IACrC,QAAQ,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5C,mDAAmD;IACnD,QAAQ,CAAC,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3C,iCAAiC;IACjC,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAC7B,sCAAsC;IACtC,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,8BAA8B;IAC9B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,uCAAuC;IACvC,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,sCAAsC;IACtC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,6CAA6C;IAC7C,QAAQ,CAAC,UAAU,CAAC,EAAE,cAAc,CAAC;IACrC,+CAA+C;IAC/C,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,CAAC;IAClC,+BAA+B;IAC/B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,8DAA8D;IAC9D,QAAQ,CAAC,SAAS,CAAC,EAAE,eAAe,CAAC;IACrC,mCAAmC;IACnC,QAAQ,CAAC,MAAM,CAAC,EAAE,aAAa,CAAC;CACjC;AAmJD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA0J1D,CAAC;AAEF,eAAe,eAAe,CAAC"}