blacktrigram 0.7.2

package/lib/components/screens/controls/components/Key3D.js

@@ -0,0 +1,169 @@
+import { KOREAN_COLORS } from "../../../../types/constants/colors.js";
+import { FONT_FAMILY } from "../../../../types/constants/typography.js";
+import "../../../../types/constants/index.js";
+import { hexToRgbaString } from "../../../../utils/colorUtils.js";
+import { getKeyCategoryColor } from "../constants/ControlsConstants.js";
+import { useEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useFrame } from "@react-three/fiber";
+import { Html } from "@react-three/drei";
+import * as THREE from "three";
+//#region src/components/screens/controls/components/Key3D.tsx
+/**
+* Key3D - Individual 3D keyboard key component with press animation
+* 
+* Renders a 3D box mesh for a keyboard key with category-based coloring,
+* press animation, and bilingual label overlay.
+* 
+* @module components/screens/controls/components
+*/
+/**
+* Key3D Component
+* 
+* Individual 3D keyboard key with press animation and label overlay.
+* Uses category-based coloring and emissive glow when pressed.
+* 
+* @example
+* ```tsx
+* <Key3D
+*   keyData={{ code: 'Space', label: 'Space', row: 4, col: 2, width: 3, category: 'combat' }}
+*   isPressed={pressedKeys.has('Space')}
+* />
+* ```
+*/
+var Key3D = ({ keyData, isPressed }) => {
+	const meshRef = useRef(null);
+	const targetScale = useRef(new THREE.Vector3(1, 1, 1));
+	const keyWidth = (keyData.width ?? 1) * .6;
+	const keyHeight = .6;
+	const keyDepth = .2;
+	const position = useMemo(() => {
+		return [
+			keyData.col * .6 + keyWidth / 2 - 3,
+			-keyData.row * .6,
+			isPressed ? -.05 : 0
+		];
+	}, [
+		keyData.col,
+		keyData.row,
+		keyWidth,
+		isPressed
+	]);
+	const categoryColor = useMemo(() => getKeyCategoryColor(keyData.category), [keyData.category]);
+	useFrame(() => {
+		if (!meshRef.current) return;
+		const targetScaleValue = isPressed ? .9 : 1;
+		targetScale.current.set(targetScaleValue, targetScaleValue, 1);
+		meshRef.current.scale.lerp(targetScale.current, .2);
+	});
+	const materials = useMemo(() => ({
+		unpressed: new THREE.MeshStandardMaterial({
+			color: categoryColor,
+			emissive: categoryColor,
+			emissiveIntensity: .3,
+			metalness: .6,
+			roughness: .4,
+			transparent: true,
+			opacity: .9
+		}),
+		pressed: new THREE.MeshStandardMaterial({
+			color: categoryColor,
+			emissive: categoryColor,
+			emissiveIntensity: 2.5,
+			metalness: .6,
+			roughness: .4,
+			transparent: true,
+			opacity: .9
+		})
+	}), [categoryColor]);
+	const keyMaterial = isPressed ? materials.pressed : materials.unpressed;
+	useEffect(() => {
+		return () => {
+			materials.unpressed.dispose();
+			materials.pressed.dispose();
+		};
+	}, [materials]);
+	const labelStyle = useMemo(() => ({
+		fontFamily: FONT_FAMILY.KOREAN,
+		fontSize: keyData.width && keyData.width > 2 ? "11px" : "13px",
+		fontWeight: "bold",
+		color: isPressed ? hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD) : hexToRgbaString(KOREAN_COLORS.TEXT_PRIMARY),
+		textAlign: "center",
+		pointerEvents: "none",
+		userSelect: "none",
+		textShadow: isPressed ? `0 0 8px ${hexToRgbaString(categoryColor, .8)}` : "none",
+		whiteSpace: "nowrap",
+		lineHeight: 1.2
+	}), [
+		isPressed,
+		categoryColor,
+		keyData.width
+	]);
+	return /* @__PURE__ */ jsxs("group", {
+		position,
+		children: [
+			/* @__PURE__ */ jsxs("mesh", {
+				ref: meshRef,
+				castShadow: true,
+				receiveShadow: true,
+				name: `key-${keyData.code}`,
+				"data-testid": `key-${keyData.code}`,
+				children: [/* @__PURE__ */ jsx("boxGeometry", { args: [
+					keyWidth,
+					keyHeight,
+					keyDepth
+				] }), /* @__PURE__ */ jsx("primitive", {
+					object: keyMaterial,
+					attach: "material"
+				})]
+			}),
+			/* @__PURE__ */ jsx(Html, {
+				position: [
+					0,
+					0,
+					keyDepth / 2 + .01
+				],
+				center: true,
+				distanceFactor: 2,
+				style: { pointerEvents: "none" },
+				children: /* @__PURE__ */ jsxs("div", {
+					style: labelStyle,
+					children: [/* @__PURE__ */ jsx("div", { children: keyData.label }), keyData.labelKorean && /* @__PURE__ */ jsx("div", {
+						style: {
+							fontSize: "10px",
+							color: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD),
+							marginTop: "2px"
+						},
+						children: keyData.labelKorean
+					})]
+				})
+			}),
+			isPressed && /* @__PURE__ */ jsxs("mesh", {
+				position: [
+					0,
+					0,
+					-keyDepth / 2 - .02
+				],
+				rotation: [
+					0,
+					0,
+					0
+				],
+				children: [/* @__PURE__ */ jsx("ringGeometry", { args: [
+					Math.max(keyWidth, keyHeight) * .6,
+					Math.max(keyWidth, keyHeight) * .7,
+					32
+				] }), /* @__PURE__ */ jsx("meshBasicMaterial", {
+					color: categoryColor,
+					transparent: true,
+					opacity: .6,
+					side: THREE.DoubleSide
+				})]
+			})
+		]
+	});
+};
+//#endregion
+export { Key3D as default };
+
+//# sourceMappingURL=Key3D.js.map

package/lib/components/screens/controls/components/Key3D.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Key3D.js","names":[],"sources":["../../../../../src/components/screens/controls/components/Key3D.tsx"],"sourcesContent":["/**\n * Key3D - Individual 3D keyboard key component with press animation\n * \n * Renders a 3D box mesh for a keyboard key with category-based coloring,\n * press animation, and bilingual label overlay.\n * \n * @module components/screens/controls/components\n */\n\nimport { Html } from \"@react-three/drei\";\nimport { useFrame } from \"@react-three/fiber\";\nimport React, { useEffect, useMemo, useRef } from \"react\";\nimport * as THREE from \"three\";\nimport { FONT_FAMILY, KOREAN_COLORS } from \"../../../../types/constants\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\nimport { getKeyCategoryColor, type KeyData } from \"../constants/ControlsConstants\";\n\n/**\n * Props for Key3D component\n */\nexport interface Key3DProps {\n  /** Key data containing position, label, and category */\n  readonly keyData: KeyData;\n  /** Whether this key is currently pressed */\n  readonly isPressed: boolean;\n}\n\n/**\n * Key3D Component\n * \n * Individual 3D keyboard key with press animation and label overlay.\n * Uses category-based coloring and emissive glow when pressed.\n * \n * @example\n * ```tsx\n * <Key3D\n *   keyData={{ code: 'Space', label: 'Space', row: 4, col: 2, width: 3, category: 'combat' }}\n *   isPressed={pressedKeys.has('Space')}\n * />\n * ```\n */\nexport const Key3D: React.FC<Key3DProps> = ({ keyData, isPressed }) => {\n  const meshRef = useRef<THREE.Mesh>(null);\n  const targetScale = useRef(new THREE.Vector3(1, 1, 1));\n\n  // Key dimensions\n  const keyWidth = (keyData.width ?? 1) * 0.6; // 0.6 units per key width\n  const keyHeight = 0.6;\n  const keyDepth = 0.2;\n\n  // Calculate position based on row and column\n  const position = useMemo<[number, number, number]>(() => {\n    const x = keyData.col * 0.6 + (keyWidth / 2) - 3.0; // Center around origin\n    const y = -keyData.row * 0.6;\n    const z = isPressed ? -0.05 : 0; // Press down slightly when pressed\n    return [x, y, z];\n  }, [keyData.col, keyData.row, keyWidth, isPressed]);\n\n  // Get category color\n  const categoryColor = useMemo(() => getKeyCategoryColor(keyData.category), [keyData.category]);\n\n  // Animate scale when pressed\n  useFrame(() => {\n    if (!meshRef.current) return;\n\n    // Target scale: smaller when pressed\n    const targetScaleValue = isPressed ? 0.9 : 1.0;\n    targetScale.current.set(targetScaleValue, targetScaleValue, 1.0);\n\n    // Smooth interpolation\n    meshRef.current.scale.lerp(targetScale.current, 0.2);\n  });\n\n  // Create materials once (unpressed and pressed states)\n  const materials = useMemo(\n    () => ({\n      unpressed: new THREE.MeshStandardMaterial({\n        color: categoryColor,\n        emissive: categoryColor,\n        emissiveIntensity: 0.3,\n        metalness: 0.6,\n        roughness: 0.4,\n        transparent: true,\n        opacity: 0.9,\n      }),\n      pressed: new THREE.MeshStandardMaterial({\n        color: categoryColor,\n        emissive: categoryColor,\n        emissiveIntensity: 2.5,\n        metalness: 0.6,\n        roughness: 0.4,\n        transparent: true,\n        opacity: 0.9,\n      }),\n    }),\n    [categoryColor]\n  );\n\n  // Select material based on pressed state\n  const keyMaterial = isPressed ? materials.pressed : materials.unpressed;\n\n  // Dispose materials on unmount\n  useEffect(() => {\n    return () => {\n      materials.unpressed.dispose();\n      materials.pressed.dispose();\n    };\n  }, [materials]);\n\n  // Label style for Html overlay\n  const labelStyle = useMemo(() => ({\n    fontFamily: FONT_FAMILY.KOREAN,\n    fontSize: keyData.width && keyData.width > 2 ? '11px' : '13px',\n    fontWeight: 'bold' as const,\n    color: isPressed ? hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD) : hexToRgbaString(KOREAN_COLORS.TEXT_PRIMARY),\n    textAlign: 'center' as const,\n    pointerEvents: 'none' as const,\n    userSelect: 'none' as const,\n    textShadow: isPressed ? `0 0 8px ${hexToRgbaString(categoryColor, 0.8)}` : 'none',\n    whiteSpace: 'nowrap' as const,\n    lineHeight: 1.2,\n  }), [isPressed, categoryColor, keyData.width]);\n\n  return (\n    <group position={position}>\n      {/* 3D key box */}\n      <mesh\n        ref={meshRef}\n        castShadow\n        receiveShadow\n        name={`key-${keyData.code}`}\n        data-testid={`key-${keyData.code}`}\n      >\n        <boxGeometry args={[keyWidth, keyHeight, keyDepth]} />\n        <primitive object={keyMaterial} attach=\"material\" />\n      </mesh>\n\n      {/* Label overlay */}\n      <Html\n        position={[0, 0, keyDepth / 2 + 0.01]}\n        center\n        distanceFactor={2}\n        style={{ pointerEvents: 'none' }}\n      >\n        <div style={labelStyle}>\n          {/* Main label */}\n          <div>{keyData.label}</div>\n          {/* Korean label (if available) */}\n          {keyData.labelKorean && (\n            <div style={{\n              fontSize: '10px',\n              color: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD),\n              marginTop: '2px',\n            }}>\n              {keyData.labelKorean}\n            </div>\n          )}\n        </div>\n      </Html>\n\n      {/* Glow ring when pressed */}\n      {isPressed && (\n        <mesh position={[0, 0, -keyDepth / 2 - 0.02]} rotation={[0, 0, 0]}>\n          <ringGeometry args={[Math.max(keyWidth, keyHeight) * 0.6, Math.max(keyWidth, keyHeight) * 0.7, 32]} />\n          <meshBasicMaterial\n            color={categoryColor}\n            transparent\n            opacity={0.6}\n            side={THREE.DoubleSide}\n          />\n        </mesh>\n      )}\n    </group>\n  );\n};\n\nexport default Key3D;\n"],"mappings":"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"}

package/lib/components/screens/controls/components/VisualKeyboard3D.d.ts

@@ -0,0 +1,37 @@
+/**
+ * VisualKeyboard3D - 3D keyboard visualization with all keys
+ *
+ * Renders a complete 3D keyboard with keys filtered by selected category.
+ * Uses grid layout with proper spacing and lighting for visual clarity.
+ *
+ * @module components/screens/controls/components
+ */
+import React from "react";
+/**
+ * Props for VisualKeyboard3D component
+ */
+export interface VisualKeyboard3DProps {
+    /** Set of currently pressed key codes */
+    readonly pressedKeys: Set<string>;
+    /** Selected control category to filter keys */
+    readonly selectedTab: 'combat' | 'movement' | 'system';
+}
+/**
+ * VisualKeyboard3D Component
+ *
+ * 3D keyboard visualization showing all keys filtered by selected category.
+ * Keys are positioned in a grid layout with proper spacing.
+ *
+ * @example
+ * ```tsx
+ * <Canvas>
+ *   <VisualKeyboard3D
+ *     pressedKeys={new Set(['Space', 'KeyW'])}
+ *     selectedTab="combat"
+ *   />
+ * </Canvas>
+ * ```
+ */
+export declare const VisualKeyboard3D: React.FC<VisualKeyboard3DProps>;
+export default VisualKeyboard3D;
+//# sourceMappingURL=VisualKeyboard3D.d.ts.map

package/lib/components/screens/controls/components/VisualKeyboard3D.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisualKeyboard3D.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/controls/components/VisualKeyboard3D.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAIvC;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,yCAAyC;IACzC,QAAQ,CAAC,WAAW,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAClC,+CAA+C;IAC/C,QAAQ,CAAC,WAAW,EAAE,QAAQ,GAAG,UAAU,GAAG,QAAQ,CAAC;CACxD;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAyE5D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/screens/controls/components/VisualKeyboard3D.js

@@ -0,0 +1,120 @@
+import { KEYBOARD_LAYOUT, filterKeysByCategory } from "../constants/ControlsConstants.js";
+import Key3D from "./Key3D.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/screens/controls/components/VisualKeyboard3D.tsx
+/**
+* VisualKeyboard3D - 3D keyboard visualization with all keys
+* 
+* Renders a complete 3D keyboard with keys filtered by selected category.
+* Uses grid layout with proper spacing and lighting for visual clarity.
+* 
+* @module components/screens/controls/components
+*/
+/**
+* VisualKeyboard3D Component
+* 
+* 3D keyboard visualization showing all keys filtered by selected category.
+* Keys are positioned in a grid layout with proper spacing.
+* 
+* @example
+* ```tsx
+* <Canvas>
+*   <VisualKeyboard3D
+*     pressedKeys={new Set(['Space', 'KeyW'])}
+*     selectedTab="combat"
+*   />
+* </Canvas>
+* ```
+*/
+var VisualKeyboard3D = ({ pressedKeys, selectedTab }) => {
+	const filteredKeys = useMemo(() => {
+		return filterKeysByCategory(KEYBOARD_LAYOUT, selectedTab);
+	}, [selectedTab]);
+	return /* @__PURE__ */ jsxs("group", {
+		position: [
+			0,
+			-1,
+			0
+		],
+		rotation: [
+			-Math.PI / 6,
+			0,
+			0
+		],
+		"data-testid": "visual-keyboard",
+		children: [
+			/* @__PURE__ */ jsx("ambientLight", { intensity: .4 }),
+			/* @__PURE__ */ jsx("directionalLight", {
+				position: [
+					5,
+					5,
+					5
+				],
+				intensity: 1,
+				castShadow: true,
+				"shadow-mapSize-width": 2048,
+				"shadow-mapSize-height": 2048
+			}),
+			/* @__PURE__ */ jsx("directionalLight", {
+				position: [
+					-3,
+					3,
+					2
+				],
+				intensity: .5
+			}),
+			/* @__PURE__ */ jsx("pointLight", {
+				position: [
+					0,
+					2,
+					2
+				],
+				intensity: .6,
+				distance: 10,
+				decay: 2
+			}),
+			filteredKeys.map((keyData) => /* @__PURE__ */ jsx(Key3D, {
+				keyData,
+				isPressed: pressedKeys.has(keyData.code)
+			}, keyData.code)),
+			/* @__PURE__ */ jsxs("mesh", {
+				position: [
+					0,
+					0,
+					-.2
+				],
+				receiveShadow: true,
+				children: [/* @__PURE__ */ jsx("planeGeometry", { args: [12, 6] }), /* @__PURE__ */ jsx("meshStandardMaterial", {
+					color: 1710638,
+					metalness: .8,
+					roughness: .3,
+					opacity: .9,
+					transparent: true
+				})]
+			}),
+			/* @__PURE__ */ jsx("gridHelper", {
+				args: [
+					12,
+					20,
+					3355443,
+					2236962
+				],
+				position: [
+					0,
+					0,
+					-.19
+				],
+				rotation: [
+					0,
+					0,
+					0
+				]
+			})
+		]
+	});
+};
+//#endregion
+export { VisualKeyboard3D as default };
+
+//# sourceMappingURL=VisualKeyboard3D.js.map

package/lib/components/screens/controls/components/VisualKeyboard3D.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisualKeyboard3D.js","names":[],"sources":["../../../../../src/components/screens/controls/components/VisualKeyboard3D.tsx"],"sourcesContent":["/**\n * VisualKeyboard3D - 3D keyboard visualization with all keys\n * \n * Renders a complete 3D keyboard with keys filtered by selected category.\n * Uses grid layout with proper spacing and lighting for visual clarity.\n * \n * @module components/screens/controls/components\n */\n\nimport React, { useMemo } from \"react\";\nimport { filterKeysByCategory, KEYBOARD_LAYOUT, type KeyData } from \"../constants/ControlsConstants\";\nimport { Key3D } from \"./Key3D\";\n\n/**\n * Props for VisualKeyboard3D component\n */\nexport interface VisualKeyboard3DProps {\n  /** Set of currently pressed key codes */\n  readonly pressedKeys: Set<string>;\n  /** Selected control category to filter keys */\n  readonly selectedTab: 'combat' | 'movement' | 'system';\n}\n\n/**\n * VisualKeyboard3D Component\n * \n * 3D keyboard visualization showing all keys filtered by selected category.\n * Keys are positioned in a grid layout with proper spacing.\n * \n * @example\n * ```tsx\n * <Canvas>\n *   <VisualKeyboard3D\n *     pressedKeys={new Set(['Space', 'KeyW'])}\n *     selectedTab=\"combat\"\n *   />\n * </Canvas>\n * ```\n */\nexport const VisualKeyboard3D: React.FC<VisualKeyboard3DProps> = ({\n  pressedKeys,\n  selectedTab,\n}) => {\n  // Filter keys by selected category\n  const filteredKeys = useMemo<readonly KeyData[]>(() => {\n    return filterKeysByCategory(KEYBOARD_LAYOUT, selectedTab);\n  }, [selectedTab]);\n\n  return (\n    <group\n      position={[0, -1, 0]}\n      rotation={[-Math.PI / 6, 0, 0]}\n      data-testid=\"visual-keyboard\"\n    >\n      {/* Ambient light for overall illumination */}\n      <ambientLight intensity={0.4} />\n\n      {/* Directional light for depth and shadows */}\n      <directionalLight\n        position={[5, 5, 5]}\n        intensity={1.0}\n        castShadow\n        shadow-mapSize-width={2048}\n        shadow-mapSize-height={2048}\n      />\n\n      {/* Additional directional light from the side */}\n      <directionalLight\n        position={[-3, 3, 2]}\n        intensity={0.5}\n      />\n\n      {/* Point light for accent highlights */}\n      <pointLight\n        position={[0, 2, 2]}\n        intensity={0.6}\n        distance={10}\n        decay={2}\n      />\n\n      {/* Render all filtered keys */}\n      {filteredKeys.map((keyData) => (\n        <Key3D\n          key={keyData.code}\n          keyData={keyData}\n          isPressed={pressedKeys.has(keyData.code)}\n        />\n      ))}\n\n      {/* Background plane for keyboard base */}\n      <mesh\n        position={[0, 0, -0.2]}\n        receiveShadow\n      >\n        <planeGeometry args={[12, 6]} />\n        <meshStandardMaterial\n          color={0x1a1a2e}\n          metalness={0.8}\n          roughness={0.3}\n          opacity={0.9}\n          transparent\n        />\n      </mesh>\n\n      {/* Grid helper for visual reference (subtle) */}\n      <gridHelper\n        args={[12, 20, 0x333333, 0x222222]}\n        position={[0, 0, -0.19]}\n        rotation={[0, 0, 0]}\n      />\n    </group>\n  );\n};\n\nexport default VisualKeyboard3D;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,IAAa,oBAAqD,EAChE,aACA,kBACI;CAEJ,MAAM,eAAe,cAAkC;AACrD,SAAO,qBAAqB,iBAAiB,YAAY;IACxD,CAAC,YAAY,CAAC;AAEjB,QACE,qBAAC,SAAD;EACE,UAAU;GAAC;GAAG;GAAI;GAAE;EACpB,UAAU;GAAC,CAAC,KAAK,KAAK;GAAG;GAAG;GAAE;EAC9B,eAAY;YAHd;GAME,oBAAC,gBAAD,EAAc,WAAW,IAAO,CAAA;GAGhC,oBAAC,oBAAD;IACE,UAAU;KAAC;KAAG;KAAG;KAAE;IACnB,WAAW;IACX,YAAA;IACA,wBAAsB;IACtB,yBAAuB;IACvB,CAAA;GAGF,oBAAC,oBAAD;IACE,UAAU;KAAC;KAAI;KAAG;KAAE;IACpB,WAAW;IACX,CAAA;GAGF,oBAAC,cAAD;IACE,UAAU;KAAC;KAAG;KAAG;KAAE;IACnB,WAAW;IACX,UAAU;IACV,OAAO;IACP,CAAA;GAGD,aAAa,KAAK,YACjB,oBAAC,OAAD;IAEW;IACT,WAAW,YAAY,IAAI,QAAQ,KAAK;IACxC,EAHK,QAAQ,KAGb,CACF;GAGF,qBAAC,QAAD;IACE,UAAU;KAAC;KAAG;KAAG;KAAK;IACtB,eAAA;cAFF,CAIE,oBAAC,iBAAD,EAAe,MAAM,CAAC,IAAI,EAAE,EAAI,CAAA,EAChC,oBAAC,wBAAD;KACE,OAAO;KACP,WAAW;KACX,WAAW;KACX,SAAS;KACT,aAAA;KACA,CAAA,CACG;;GAGP,oBAAC,cAAD;IACE,MAAM;KAAC;KAAI;KAAI;KAAU;KAAS;IAClC,UAAU;KAAC;KAAG;KAAG;KAAM;IACvB,UAAU;KAAC;KAAG;KAAG;KAAE;IACnB,CAAA;GACI"}

package/lib/components/screens/controls/components/index.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Controls Screen Components
+ *
+ * Exports all components used in the Controls Screen for Black Trigram (흑괘)
+ *
+ * @module components/screens/controls/components
+ */
+export { ControlBindingsOverlayHtml } from "./ControlBindingsOverlayHtml";
+export type { ControlBindingsOverlayHtmlProps } from "./ControlBindingsOverlayHtml";
+export { ControlCategoryTabs } from "./ControlCategoryTabsOverlayHtml";
+export type { ControlCategoryTabsProps } from "./ControlCategoryTabsOverlayHtml";
+export { GamepadVisualization3D } from "./GamepadVisualization3D";
+export type { GamepadVisualization3DProps } from "./GamepadVisualization3D";
+export { InteractiveControlDemo } from "./InteractiveControlDemoOverlayHtml";
+export type { InteractiveControlDemoProps } from "./InteractiveControlDemoOverlayHtml";
+export { Key3D } from "./Key3D";
+export type { Key3DProps } from "./Key3D";
+export { VisualKeyboard3D } from "./VisualKeyboard3D";
+export type { VisualKeyboard3DProps } from "./VisualKeyboard3D";
+//# sourceMappingURL=index.d.ts.map

package/lib/components/screens/controls/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/controls/components/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAC1E,YAAY,EAAE,+BAA+B,EAAE,MAAM,8BAA8B,CAAC;AAEpF,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AACvE,YAAY,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AAEjF,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,YAAY,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AAE5E,OAAO,EAAE,sBAAsB,EAAE,MAAM,qCAAqC,CAAC;AAC7E,YAAY,EAAE,2BAA2B,EAAE,MAAM,qCAAqC,CAAC;AAEvF,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC"}

package/lib/components/screens/controls/constants/ControlsConstants.d.ts

@@ -0,0 +1,67 @@
+/**
+ * Control constants and layouts for Black Trigram (흑괘)
+ * Defines keyboard layouts, gamepad mappings, and control categories
+ *
+ * @module components/screens/controls/constants
+ */
+/**
+ * Keyboard key data structure
+ */
+export interface KeyData {
+    readonly code: string;
+    readonly label: string;
+    readonly labelKorean?: string;
+    readonly row: number;
+    readonly col: number;
+    readonly width?: number;
+    readonly category: KeyCategory;
+    readonly description?: string;
+    readonly descriptionKorean?: string;
+}
+/**
+ * Control categories for organizing controls
+ */
+export type KeyCategory = 'stance' | 'movement' | 'combat' | 'system' | 'technique' | 'modifier' | 'normal';
+/**
+ * Control category configuration
+ */
+export interface ControlCategory {
+    readonly id: string;
+    readonly korean: string;
+    readonly english: string;
+    readonly icon: string;
+    readonly color: number;
+}
+/**
+ * Gamepad button mapping
+ */
+export interface GamepadButton {
+    readonly index: number;
+    readonly korean: string;
+    readonly english: string;
+    readonly action: string;
+    readonly actionKorean: string;
+    readonly color: number;
+}
+/**
+ * Control categories for tab navigation
+ */
+export declare const CONTROL_CATEGORIES: readonly ControlCategory[];
+/**
+ * Keyboard layout - all important keys for the game
+ * Positioned based on physical keyboard layout
+ */
+export declare const KEYBOARD_LAYOUT: readonly KeyData[];
+/**
+ * Gamepad button mappings (Xbox-style controller)
+ */
+export declare const GAMEPAD_BUTTONS: readonly GamepadButton[];
+/**
+ * Get key category color
+ */
+export declare function getKeyCategoryColor(category: KeyCategory): number;
+/**
+ * Filter keys by category
+ */
+export declare function filterKeysByCategory(keys: readonly KeyData[], category: string): readonly KeyData[];
+//# sourceMappingURL=ControlsConstants.d.ts.map

package/lib/components/screens/controls/constants/ControlsConstants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlsConstants.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/controls/constants/ControlsConstants.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH;;GAEG;AACH,MAAM,WAAW,OAAO;IACtB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,QAAQ,EAAE,WAAW,CAAC;IAC/B,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;CACrC;AAED;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,WAAW,GAAG,UAAU,GAAG,QAAQ,CAAC;AAE5G;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,SAAS,eAAe,EAsB/C,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,SAAS,OAAO,EAkDpC,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,SAAS,aAAa,EAa1C,CAAC;AAEX;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,WAAW,GAAG,MAAM,CAiBjE;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,SAAS,OAAO,EAAE,EAAE,QAAQ,EAAE,MAAM,GAAG,SAAS,OAAO,EAAE,CAanG"}