blacktrigram 0.7.2

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

@@ -0,0 +1,292 @@
+import { useAudio } from "../../../audio/AudioProvider.js";
+import { KOREAN_COLORS } from "../../../types/constants/colors.js";
+import "../../../types/constants/index.js";
+import { hexToRgbaString, toHex } from "../../../utils/colorUtils.js";
+import React, { useCallback, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/shared/ui/VolumeControl.tsx
+/**
+* Volume Control Component
+*
+* Provides controls for:
+* - Master volume
+* - Music volume
+* - SFX volume
+* - Mute/unmute toggle
+*
+* Inspired by template game (https://github.com/Hack23/game)
+*/
+var VolumeControl = ({ position = "top-right", style, showLabels = true, compact = false }) => {
+	const audio = useAudio();
+	const [masterVolume, setMasterVolume] = useState(audio.masterVolume ?? 1);
+	const [musicVolume, setMusicVolume] = useState(audio.musicVolume ?? .7);
+	const [sfxVolume, setSfxVolume] = useState(audio.sfxVolume ?? .8);
+	const [isMuted, setIsMuted] = useState(audio.muted ?? false);
+	React.useEffect(() => {
+		setMasterVolume(audio.masterVolume ?? 1);
+		setMusicVolume(audio.musicVolume ?? .7);
+		setSfxVolume(audio.sfxVolume ?? .8);
+		setIsMuted(audio.muted ?? false);
+	}, [
+		audio.masterVolume,
+		audio.musicVolume,
+		audio.sfxVolume,
+		audio.muted
+	]);
+	const getPositionStyle = useMemo(() => {
+		if (position === "custom") return {};
+		const baseStyle = {
+			position: "absolute",
+			zIndex: 1e3,
+			padding: compact ? "8px 12px" : "12px 16px"
+		};
+		switch (position) {
+			case "top-right": return {
+				...baseStyle,
+				top: "20px",
+				right: "20px"
+			};
+			case "bottom-right": return {
+				...baseStyle,
+				bottom: "20px",
+				right: "20px"
+			};
+			case "top-left": return {
+				...baseStyle,
+				top: "20px",
+				left: "20px"
+			};
+			case "bottom-left": return {
+				...baseStyle,
+				bottom: "20px",
+				left: "20px"
+			};
+			default: return baseStyle;
+		}
+	}, [position, compact]);
+	const containerStyle = useMemo(() => ({
+		...getPositionStyle,
+		display: "flex",
+		flexDirection: compact ? "row" : "column",
+		alignItems: "center",
+		gap: compact ? "12px" : "8px",
+		background: "rgba(33, 38, 45, 0.95)",
+		borderRadius: "12px",
+		border: `1px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, .2)}`,
+		pointerEvents: "auto",
+		...style
+	}), [
+		getPositionStyle,
+		compact,
+		style
+	]);
+	const handleMasterVolumeChange = useCallback((event) => {
+		const value = parseFloat(event.target.value);
+		setMasterVolume(value);
+		if (audio.isAudioReady) audio.setVolume("master", value);
+	}, [audio]);
+	const handleMusicVolumeChange = useCallback((event) => {
+		const value = parseFloat(event.target.value);
+		setMusicVolume(value);
+		if (audio.isAudioReady) audio.setVolume("music", value);
+	}, [audio]);
+	const handleSfxVolumeChange = useCallback((event) => {
+		const value = parseFloat(event.target.value);
+		setSfxVolume(value);
+		if (audio.isAudioReady) audio.setVolume("sfx", value);
+	}, [audio]);
+	const handleMuteToggle = useCallback(() => {
+		setIsMuted((prevMuted) => {
+			const newMuted = !prevMuted;
+			if (audio.isAudioReady) if (newMuted) audio.mute();
+			else audio.unmute();
+			return newMuted;
+		});
+	}, [audio]);
+	const sliderStyle = useMemo(() => ({
+		width: compact ? "60px" : "100px",
+		cursor: "pointer",
+		accentColor: `#${toHex(KOREAN_COLORS.PRIMARY_CYAN)}`
+	}), [compact]);
+	const labelStyle = useMemo(() => ({
+		color: "#ffffff",
+		fontSize: compact ? "11px" : "12px",
+		fontWeight: "bold",
+		minWidth: compact ? "40px" : "50px",
+		textAlign: "left"
+	}), [compact]);
+	const valueStyle = useMemo(() => ({
+		color: `#${toHex(KOREAN_COLORS.ACCENT_GOLD)}`,
+		fontSize: compact ? "10px" : "11px",
+		minWidth: "35px",
+		textAlign: "right"
+	}), [compact]);
+	const controlRowStyle = useMemo(() => ({
+		display: "flex",
+		alignItems: "center",
+		gap: "8px",
+		width: "100%"
+	}), []);
+	if (compact) return /* @__PURE__ */ jsxs("div", {
+		style: containerStyle,
+		"data-testid": "volume-control",
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				onClick: handleMuteToggle,
+				"data-testid": "mute-toggle-button",
+				"aria-label": isMuted ? "Unmute audio" : "Mute audio",
+				style: {
+					background: isMuted ? "#666666" : `#${toHex(KOREAN_COLORS.PRIMARY_CYAN)}`,
+					color: "white",
+					border: "none",
+					padding: "6px 12px",
+					borderRadius: "6px",
+					cursor: "pointer",
+					fontWeight: "bold",
+					fontSize: "14px"
+				},
+				title: isMuted ? "음소거 해제 | Unmute" : "음소거 | Mute",
+				children: isMuted ? "🔇" : "🔊"
+			}),
+			/* @__PURE__ */ jsx("input", {
+				type: "range",
+				min: "0",
+				max: "1",
+				step: "0.01",
+				value: masterVolume,
+				onChange: handleMasterVolumeChange,
+				"data-testid": "master-volume-slider",
+				"aria-label": "마스터 볼륨 | Master Volume",
+				style: sliderStyle,
+				title: "마스터 볼륨 | Master Volume"
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				style: valueStyle,
+				children: [Math.round(masterVolume * 100), "%"]
+			})
+		]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		style: containerStyle,
+		"data-testid": "volume-control",
+		children: [
+			showLabels && /* @__PURE__ */ jsx("div", {
+				style: {
+					color: `#${toHex(KOREAN_COLORS.PRIMARY_CYAN)}`,
+					fontSize: "14px",
+					fontWeight: "bold",
+					marginBottom: "4px",
+					textAlign: "center"
+				},
+				children: "🎵 음량 | Volume"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: controlRowStyle,
+				children: [
+					/* @__PURE__ */ jsx("label", {
+						htmlFor: "master-volume",
+						style: labelStyle,
+						children: "전체 | Master"
+					}),
+					/* @__PURE__ */ jsx("input", {
+						id: "master-volume",
+						type: "range",
+						min: "0",
+						max: "1",
+						step: "0.01",
+						value: masterVolume,
+						onChange: handleMasterVolumeChange,
+						"data-testid": "master-volume-slider",
+						style: sliderStyle
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						style: valueStyle,
+						children: [Math.round(masterVolume * 100), "%"]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: controlRowStyle,
+				children: [
+					/* @__PURE__ */ jsx("label", {
+						htmlFor: "music-volume",
+						style: labelStyle,
+						children: "음악 | Music"
+					}),
+					/* @__PURE__ */ jsx("input", {
+						id: "music-volume",
+						type: "range",
+						min: "0",
+						max: "1",
+						step: "0.01",
+						value: musicVolume,
+						onChange: handleMusicVolumeChange,
+						"data-testid": "music-volume-slider",
+						style: sliderStyle
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						style: valueStyle,
+						children: [Math.round(musicVolume * 100), "%"]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: controlRowStyle,
+				children: [
+					/* @__PURE__ */ jsx("label", {
+						htmlFor: "sfx-volume",
+						style: labelStyle,
+						children: "효과음 | SFX"
+					}),
+					/* @__PURE__ */ jsx("input", {
+						id: "sfx-volume",
+						type: "range",
+						min: "0",
+						max: "1",
+						step: "0.01",
+						value: sfxVolume,
+						onChange: handleSfxVolumeChange,
+						"data-testid": "sfx-volume-slider",
+						style: sliderStyle
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						style: valueStyle,
+						children: [Math.round(sfxVolume * 100), "%"]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("button", {
+				onClick: handleMuteToggle,
+				"data-testid": "mute-toggle-button",
+				"aria-label": isMuted ? "Unmute audio" : "Mute audio",
+				style: {
+					background: isMuted ? "#666666" : `#${toHex(KOREAN_COLORS.PRIMARY_CYAN)}`,
+					color: "white",
+					border: "none",
+					padding: "8px 16px",
+					borderRadius: "8px",
+					cursor: "pointer",
+					fontWeight: "bold",
+					fontSize: "14px",
+					marginTop: "4px",
+					width: "100%"
+				},
+				title: isMuted ? "음소거 해제 | Unmute" : "음소거 | Mute",
+				children: isMuted ? "🔇 음소거 해제 | Unmute" : "🔊 음소거 | Mute"
+			}),
+			/* @__PURE__ */ jsx("div", {
+				style: {
+					color: audio.isAudioReady ? `#${toHex(KOREAN_COLORS.ACCENT_GOLD)}` : "#999",
+					fontSize: "10px",
+					marginTop: "4px",
+					textAlign: "center"
+				},
+				children: audio.isAudioReady ? "✓ 오디오 준비됨 | Audio Ready" : "⏳ 초기화 중... | Initializing..."
+			})
+		]
+	});
+};
+//#endregion
+export { VolumeControl };
+
+//# sourceMappingURL=VolumeControl.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VolumeControl.js","names":[],"sources":["../../../../src/components/shared/ui/VolumeControl.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } from \"react\";\nimport { useAudio } from \"../../../audio/AudioProvider\";\nimport { KOREAN_COLORS } from \"@/types/constants\";\nimport { hexToRgbaString, toHex } from \"../../../utils/colorUtils\";\n\nexport interface VolumeControlProps {\n  readonly position?:\n    | \"top-right\"\n    | \"bottom-right\"\n    | \"top-left\"\n    | \"bottom-left\"\n    | \"custom\";\n  readonly style?: React.CSSProperties;\n  readonly showLabels?: boolean;\n  readonly compact?: boolean;\n}\n\n/**\n * Volume Control Component\n *\n * Provides controls for:\n * - Master volume\n * - Music volume\n * - SFX volume\n * - Mute/unmute toggle\n *\n * Inspired by template game (https://github.com/Hack23/game)\n */\nexport const VolumeControl: React.FC<VolumeControlProps> = ({\n  position = \"top-right\",\n  style,\n  showLabels = true,\n  compact = false,\n}) => {\n  const audio = useAudio();\n\n  // Local state to track values for UI (prevents issues if audio not ready)\n  const [masterVolume, setMasterVolume] = useState(audio.masterVolume ?? 1.0);\n  const [musicVolume, setMusicVolume] = useState(audio.musicVolume ?? 0.7);\n  const [sfxVolume, setSfxVolume] = useState(audio.sfxVolume ?? 0.8);\n  const [isMuted, setIsMuted] = useState(audio.muted ?? false);\n\n  // Sync local state with audio manager state changes\n  React.useEffect(() => {\n    setMasterVolume(audio.masterVolume ?? 1.0);\n    setMusicVolume(audio.musicVolume ?? 0.7);\n    setSfxVolume(audio.sfxVolume ?? 0.8);\n    setIsMuted(audio.muted ?? false);\n  }, [audio.masterVolume, audio.musicVolume, audio.sfxVolume, audio.muted]);\n\n  // Get position styles (memoized)\n  const getPositionStyle = useMemo((): React.CSSProperties => {\n    if (position === \"custom\") return {};\n\n    const baseStyle: React.CSSProperties = {\n      position: \"absolute\",\n      zIndex: 1000,\n      padding: compact ? \"8px 12px\" : \"12px 16px\",\n    };\n\n    switch (position) {\n      case \"top-right\":\n        return { ...baseStyle, top: \"20px\", right: \"20px\" };\n      case \"bottom-right\":\n        return { ...baseStyle, bottom: \"20px\", right: \"20px\" };\n      case \"top-left\":\n        return { ...baseStyle, top: \"20px\", left: \"20px\" };\n      case \"bottom-left\":\n        return { ...baseStyle, bottom: \"20px\", left: \"20px\" };\n      default:\n        return baseStyle;\n    }\n  }, [position, compact]);\n\n  const containerStyle = useMemo(\n    (): React.CSSProperties => ({\n      ...getPositionStyle,\n      display: \"flex\",\n      flexDirection: compact ? \"row\" : \"column\",\n      alignItems: \"center\",\n      gap: compact ? \"12px\" : \"8px\",\n      background: \"rgba(33, 38, 45, 0.95)\",\n      borderRadius: \"12px\",\n      border: `1px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.2)}`,\n      pointerEvents: \"auto\", // Enable interaction even when parent has pointerEvents: none\n      ...style,\n    }),\n    [getPositionStyle, compact, style],\n  );\n\n  const handleMasterVolumeChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const value = parseFloat(event.target.value);\n      setMasterVolume(value);\n      if (audio.isAudioReady) {\n        audio.setVolume(\"master\", value);\n      }\n    },\n    [audio],\n  );\n\n  const handleMusicVolumeChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const value = parseFloat(event.target.value);\n      setMusicVolume(value);\n      if (audio.isAudioReady) {\n        audio.setVolume(\"music\", value);\n      }\n    },\n    [audio],\n  );\n\n  const handleSfxVolumeChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const value = parseFloat(event.target.value);\n      setSfxVolume(value);\n      if (audio.isAudioReady) {\n        audio.setVolume(\"sfx\", value);\n      }\n    },\n    [audio],\n  );\n\n  const handleMuteToggle = useCallback(() => {\n    setIsMuted((prevMuted) => {\n      const newMuted = !prevMuted;\n      if (audio.isAudioReady) {\n        if (newMuted) {\n          audio.mute();\n        } else {\n          audio.unmute();\n        }\n      }\n      return newMuted;\n    });\n  }, [audio]);\n\n  const sliderStyle = useMemo(\n    (): React.CSSProperties => ({\n      width: compact ? \"60px\" : \"100px\",\n      cursor: \"pointer\",\n      accentColor: `#${toHex(KOREAN_COLORS.PRIMARY_CYAN)}`,\n    }),\n    [compact],\n  );\n\n  const labelStyle = useMemo(\n    (): React.CSSProperties => ({\n      color: \"#ffffff\",\n      fontSize: compact ? \"11px\" : \"12px\",\n      fontWeight: \"bold\",\n      minWidth: compact ? \"40px\" : \"50px\",\n      textAlign: \"left\",\n    }),\n    [compact],\n  );\n\n  const valueStyle = useMemo(\n    (): React.CSSProperties => ({\n      color: `#${toHex(KOREAN_COLORS.ACCENT_GOLD)}`,\n      fontSize: compact ? \"10px\" : \"11px\",\n      minWidth: \"35px\",\n      textAlign: \"right\",\n    }),\n    [compact],\n  );\n\n  const controlRowStyle = useMemo(\n    (): React.CSSProperties => ({\n      display: \"flex\",\n      alignItems: \"center\",\n      gap: \"8px\",\n      width: \"100%\",\n    }),\n    [],\n  );\n\n  if (compact) {\n    return (\n      <div style={containerStyle} data-testid=\"volume-control\">\n        <button\n          onClick={handleMuteToggle}\n          data-testid=\"mute-toggle-button\"\n          aria-label={isMuted ? \"Unmute audio\" : \"Mute audio\"}\n          style={{\n            background: isMuted\n              ? \"#666666\"\n              : `#${toHex(KOREAN_COLORS.PRIMARY_CYAN)}`,\n            color: \"white\",\n            border: \"none\",\n            padding: \"6px 12px\",\n            borderRadius: \"6px\",\n            cursor: \"pointer\",\n            fontWeight: \"bold\",\n            fontSize: \"14px\",\n          }}\n          title={isMuted ? \"음소거 해제 | Unmute\" : \"음소거 | Mute\"}\n        >\n          {isMuted ? \"🔇\" : \"🔊\"}\n        </button>\n        <input\n          type=\"range\"\n          min=\"0\"\n          max=\"1\"\n          step=\"0.01\"\n          value={masterVolume}\n          onChange={handleMasterVolumeChange}\n          data-testid=\"master-volume-slider\"\n          aria-label=\"마스터 볼륨 | Master Volume\"\n          style={sliderStyle}\n          title=\"마스터 볼륨 | Master Volume\"\n        />\n        <span style={valueStyle}>{Math.round(masterVolume * 100)}%</span>\n      </div>\n    );\n  }\n\n  return (\n    <div style={containerStyle} data-testid=\"volume-control\">\n      {showLabels && (\n        <div\n          style={{\n            color: `#${toHex(KOREAN_COLORS.PRIMARY_CYAN)}`,\n            fontSize: \"14px\",\n            fontWeight: \"bold\",\n            marginBottom: \"4px\",\n            textAlign: \"center\",\n          }}\n        >\n          🎵 음량 | Volume\n        </div>\n      )}\n\n      {/* Master Volume */}\n      <div style={controlRowStyle}>\n        <label htmlFor=\"master-volume\" style={labelStyle}>\n          전체 | Master\n        </label>\n        <input\n          id=\"master-volume\"\n          type=\"range\"\n          min=\"0\"\n          max=\"1\"\n          step=\"0.01\"\n          value={masterVolume}\n          onChange={handleMasterVolumeChange}\n          data-testid=\"master-volume-slider\"\n          style={sliderStyle}\n        />\n        <span style={valueStyle}>{Math.round(masterVolume * 100)}%</span>\n      </div>\n\n      {/* Music Volume */}\n      <div style={controlRowStyle}>\n        <label htmlFor=\"music-volume\" style={labelStyle}>\n          음악 | Music\n        </label>\n        <input\n          id=\"music-volume\"\n          type=\"range\"\n          min=\"0\"\n          max=\"1\"\n          step=\"0.01\"\n          value={musicVolume}\n          onChange={handleMusicVolumeChange}\n          data-testid=\"music-volume-slider\"\n          style={sliderStyle}\n        />\n        <span style={valueStyle}>{Math.round(musicVolume * 100)}%</span>\n      </div>\n\n      {/* SFX Volume */}\n      <div style={controlRowStyle}>\n        <label htmlFor=\"sfx-volume\" style={labelStyle}>\n          효과음 | SFX\n        </label>\n        <input\n          id=\"sfx-volume\"\n          type=\"range\"\n          min=\"0\"\n          max=\"1\"\n          step=\"0.01\"\n          value={sfxVolume}\n          onChange={handleSfxVolumeChange}\n          data-testid=\"sfx-volume-slider\"\n          style={sliderStyle}\n        />\n        <span style={valueStyle}>{Math.round(sfxVolume * 100)}%</span>\n      </div>\n\n      {/* Mute Toggle */}\n      <button\n        onClick={handleMuteToggle}\n        data-testid=\"mute-toggle-button\"\n        aria-label={isMuted ? \"Unmute audio\" : \"Mute audio\"}\n        style={{\n          background: isMuted\n            ? \"#666666\"\n            : `#${toHex(KOREAN_COLORS.PRIMARY_CYAN)}`,\n          color: \"white\",\n          border: \"none\",\n          padding: \"8px 16px\",\n          borderRadius: \"8px\",\n          cursor: \"pointer\",\n          fontWeight: \"bold\",\n          fontSize: \"14px\",\n          marginTop: \"4px\",\n          width: \"100%\",\n        }}\n        title={isMuted ? \"음소거 해제 | Unmute\" : \"음소거 | Mute\"}\n      >\n        {isMuted ? \"🔇 음소거 해제 | Unmute\" : \"🔊 음소거 | Mute\"}\n      </button>\n\n      {/* Audio Status Indicator */}\n      <div\n        style={{\n          color: audio.isAudioReady\n            ? `#${toHex(KOREAN_COLORS.ACCENT_GOLD)}`\n            : \"#999\",\n          fontSize: \"10px\",\n          marginTop: \"4px\",\n          textAlign: \"center\",\n        }}\n      >\n        {audio.isAudioReady\n          ? \"✓ 오디오 준비됨 | Audio Ready\"\n          : \"⏳ 초기화 중... | Initializing...\"}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AA4BA,IAAa,iBAA+C,EAC1D,WAAW,aACX,OACA,aAAa,MACb,UAAU,YACN;CACJ,MAAM,QAAQ,UAAU;CAGxB,MAAM,CAAC,cAAc,mBAAmB,SAAS,MAAM,gBAAgB,EAAI;CAC3E,MAAM,CAAC,aAAa,kBAAkB,SAAS,MAAM,eAAe,GAAI;CACxE,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM,aAAa,GAAI;CAClE,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM,SAAS,MAAM;AAG5D,OAAM,gBAAgB;AACpB,kBAAgB,MAAM,gBAAgB,EAAI;AAC1C,iBAAe,MAAM,eAAe,GAAI;AACxC,eAAa,MAAM,aAAa,GAAI;AACpC,aAAW,MAAM,SAAS,MAAM;IAC/B;EAAC,MAAM;EAAc,MAAM;EAAa,MAAM;EAAW,MAAM;EAAM,CAAC;CAGzE,MAAM,mBAAmB,cAAmC;AAC1D,MAAI,aAAa,SAAU,QAAO,EAAE;EAEpC,MAAM,YAAiC;GACrC,UAAU;GACV,QAAQ;GACR,SAAS,UAAU,aAAa;GACjC;AAED,UAAQ,UAAR;GACE,KAAK,YACH,QAAO;IAAE,GAAG;IAAW,KAAK;IAAQ,OAAO;IAAQ;GACrD,KAAK,eACH,QAAO;IAAE,GAAG;IAAW,QAAQ;IAAQ,OAAO;IAAQ;GACxD,KAAK,WACH,QAAO;IAAE,GAAG;IAAW,KAAK;IAAQ,MAAM;IAAQ;GACpD,KAAK,cACH,QAAO;IAAE,GAAG;IAAW,QAAQ;IAAQ,MAAM;IAAQ;GACvD,QACE,QAAO;;IAEV,CAAC,UAAU,QAAQ,CAAC;CAEvB,MAAM,iBAAiB,eACO;EAC1B,GAAG;EACH,SAAS;EACT,eAAe,UAAU,QAAQ;EACjC,YAAY;EACZ,KAAK,UAAU,SAAS;EACxB,YAAY;EACZ,cAAc;EACd,QAAQ,aAAa,gBAAgB,cAAc,cAAc,GAAI;EACrE,eAAe;EACf,GAAG;EACJ,GACD;EAAC;EAAkB;EAAS;EAAM,CACnC;CAED,MAAM,2BAA2B,aAC9B,UAA+C;EAC9C,MAAM,QAAQ,WAAW,MAAM,OAAO,MAAM;AAC5C,kBAAgB,MAAM;AACtB,MAAI,MAAM,aACR,OAAM,UAAU,UAAU,MAAM;IAGpC,CAAC,MAAM,CACR;CAED,MAAM,0BAA0B,aAC7B,UAA+C;EAC9C,MAAM,QAAQ,WAAW,MAAM,OAAO,MAAM;AAC5C,iBAAe,MAAM;AACrB,MAAI,MAAM,aACR,OAAM,UAAU,SAAS,MAAM;IAGnC,CAAC,MAAM,CACR;CAED,MAAM,wBAAwB,aAC3B,UAA+C;EAC9C,MAAM,QAAQ,WAAW,MAAM,OAAO,MAAM;AAC5C,eAAa,MAAM;AACnB,MAAI,MAAM,aACR,OAAM,UAAU,OAAO,MAAM;IAGjC,CAAC,MAAM,CACR;CAED,MAAM,mBAAmB,kBAAkB;AACzC,cAAY,cAAc;GACxB,MAAM,WAAW,CAAC;AAClB,OAAI,MAAM,aACR,KAAI,SACF,OAAM,MAAM;OAEZ,OAAM,QAAQ;AAGlB,UAAO;IACP;IACD,CAAC,MAAM,CAAC;CAEX,MAAM,cAAc,eACU;EAC1B,OAAO,UAAU,SAAS;EAC1B,QAAQ;EACR,aAAa,IAAI,MAAM,cAAc,aAAa;EACnD,GACD,CAAC,QAAQ,CACV;CAED,MAAM,aAAa,eACW;EAC1B,OAAO;EACP,UAAU,UAAU,SAAS;EAC7B,YAAY;EACZ,UAAU,UAAU,SAAS;EAC7B,WAAW;EACZ,GACD,CAAC,QAAQ,CACV;CAED,MAAM,aAAa,eACW;EAC1B,OAAO,IAAI,MAAM,cAAc,YAAY;EAC3C,UAAU,UAAU,SAAS;EAC7B,UAAU;EACV,WAAW;EACZ,GACD,CAAC,QAAQ,CACV;CAED,MAAM,kBAAkB,eACM;EAC1B,SAAS;EACT,YAAY;EACZ,KAAK;EACL,OAAO;EACR,GACD,EAAE,CACH;AAED,KAAI,QACF,QACE,qBAAC,OAAD;EAAK,OAAO;EAAgB,eAAY;YAAxC;GACE,oBAAC,UAAD;IACE,SAAS;IACT,eAAY;IACZ,cAAY,UAAU,iBAAiB;IACvC,OAAO;KACL,YAAY,UACR,YACA,IAAI,MAAM,cAAc,aAAa;KACzC,OAAO;KACP,QAAQ;KACR,SAAS;KACT,cAAc;KACd,QAAQ;KACR,YAAY;KACZ,UAAU;KACX;IACD,OAAO,UAAU,oBAAoB;cAEpC,UAAU,OAAO;IACX,CAAA;GACT,oBAAC,SAAD;IACE,MAAK;IACL,KAAI;IACJ,KAAI;IACJ,MAAK;IACL,OAAO;IACP,UAAU;IACV,eAAY;IACZ,cAAW;IACX,OAAO;IACP,OAAM;IACN,CAAA;GACF,qBAAC,QAAD;IAAM,OAAO;cAAb,CAA0B,KAAK,MAAM,eAAe,IAAI,EAAC,IAAQ;;GAC7D;;AAIV,QACE,qBAAC,OAAD;EAAK,OAAO;EAAgB,eAAY;YAAxC;GACG,cACC,oBAAC,OAAD;IACE,OAAO;KACL,OAAO,IAAI,MAAM,cAAc,aAAa;KAC5C,UAAU;KACV,YAAY;KACZ,cAAc;KACd,WAAW;KACZ;cACF;IAEK,CAAA;GAIR,qBAAC,OAAD;IAAK,OAAO;cAAZ;KACE,oBAAC,SAAD;MAAO,SAAQ;MAAgB,OAAO;gBAAY;MAE1C,CAAA;KACR,oBAAC,SAAD;MACE,IAAG;MACH,MAAK;MACL,KAAI;MACJ,KAAI;MACJ,MAAK;MACL,OAAO;MACP,UAAU;MACV,eAAY;MACZ,OAAO;MACP,CAAA;KACF,qBAAC,QAAD;MAAM,OAAO;gBAAb,CAA0B,KAAK,MAAM,eAAe,IAAI,EAAC,IAAQ;;KAC7D;;GAGN,qBAAC,OAAD;IAAK,OAAO;cAAZ;KACE,oBAAC,SAAD;MAAO,SAAQ;MAAe,OAAO;gBAAY;MAEzC,CAAA;KACR,oBAAC,SAAD;MACE,IAAG;MACH,MAAK;MACL,KAAI;MACJ,KAAI;MACJ,MAAK;MACL,OAAO;MACP,UAAU;MACV,eAAY;MACZ,OAAO;MACP,CAAA;KACF,qBAAC,QAAD;MAAM,OAAO;gBAAb,CAA0B,KAAK,MAAM,cAAc,IAAI,EAAC,IAAQ;;KAC5D;;GAGN,qBAAC,OAAD;IAAK,OAAO;cAAZ;KACE,oBAAC,SAAD;MAAO,SAAQ;MAAa,OAAO;gBAAY;MAEvC,CAAA;KACR,oBAAC,SAAD;MACE,IAAG;MACH,MAAK;MACL,KAAI;MACJ,KAAI;MACJ,MAAK;MACL,OAAO;MACP,UAAU;MACV,eAAY;MACZ,OAAO;MACP,CAAA;KACF,qBAAC,QAAD;MAAM,OAAO;gBAAb,CAA0B,KAAK,MAAM,YAAY,IAAI,EAAC,IAAQ;;KAC1D;;GAGN,oBAAC,UAAD;IACE,SAAS;IACT,eAAY;IACZ,cAAY,UAAU,iBAAiB;IACvC,OAAO;KACL,YAAY,UACR,YACA,IAAI,MAAM,cAAc,aAAa;KACzC,OAAO;KACP,QAAQ;KACR,SAAS;KACT,cAAc;KACd,QAAQ;KACR,YAAY;KACZ,UAAU;KACV,WAAW;KACX,OAAO;KACR;IACD,OAAO,UAAU,oBAAoB;cAEpC,UAAU,uBAAuB;IAC3B,CAAA;GAGT,oBAAC,OAAD;IACE,OAAO;KACL,OAAO,MAAM,eACT,IAAI,MAAM,cAAc,YAAY,KACpC;KACJ,UAAU;KACV,WAAW;KACX,WAAW;KACZ;cAEA,MAAM,eACH,4BACA;IACA,CAAA;GACF"}

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

@@ -0,0 +1,29 @@
+/**
+ * ConfirmDialog Component - Modal confirmation dialog
+ *
+ * Features:
+ * - Korean/English bilingual text
+ * - Cyberpunk Korean theming
+ * - Backdrop blur effect
+ * - Responsive sizing
+ * - Keyboard shortcuts (Enter = confirm, Esc = cancel)
+ *
+ * Now uses BaseButtonOverlayHtml for consistent styling
+ */
+import React from "react";
+export interface ConfirmDialogProps {
+    readonly isOpen: boolean;
+    readonly title: string;
+    readonly titleKorean: string;
+    readonly message: string;
+    readonly messageKorean: string;
+    readonly onConfirm: () => void;
+    readonly onCancel: () => void;
+    readonly isMobile: boolean;
+}
+/**
+ * ConfirmDialog - Modal confirmation dialog with Korean theming
+ */
+export declare const ConfirmDialog: React.FC<ConfirmDialogProps>;
+export default ConfirmDialog;
+//# sourceMappingURL=ConfirmDialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmDialog.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/ui/shared/ConfirmDialog.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAoB,MAAM,OAAO,CAAC;AAMzC,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,SAAS,EAAE,MAAM,IAAI,CAAC;IAC/B,QAAQ,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAC;IAC9B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;CAC5B;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA4ItD,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -0,0 +1,149 @@
+import { useAudio } from "../../../../audio/AudioProvider.js";
+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 { BaseButtonOverlayHtml } from "../../base/BaseButtonOverlayHtml.js";
+import "../../base/index.js";
+import { useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/shared/ui/shared/ConfirmDialog.tsx
+/**
+* ConfirmDialog Component - Modal confirmation dialog
+* 
+* Features:
+* - Korean/English bilingual text
+* - Cyberpunk Korean theming
+* - Backdrop blur effect
+* - Responsive sizing
+* - Keyboard shortcuts (Enter = confirm, Esc = cancel)
+* 
+* Now uses BaseButtonOverlayHtml for consistent styling
+*/
+/**
+* ConfirmDialog - Modal confirmation dialog with Korean theming
+*/
+var ConfirmDialog = ({ isOpen, title, titleKorean, message, messageKorean, onConfirm, onCancel, isMobile }) => {
+	const audio = useAudio();
+	useEffect(() => {
+		if (!isOpen) return;
+		const handleKeyDown = (e) => {
+			if (e.key === "Enter") {
+				e.preventDefault();
+				onConfirm();
+			} else if (e.key === "Escape") {
+				e.preventDefault();
+				onCancel();
+			}
+		};
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [
+		isOpen,
+		onConfirm,
+		onCancel
+	]);
+	if (!isOpen) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"data-testid": "confirm-dialog",
+		style: {
+			position: "fixed",
+			top: 0,
+			left: 0,
+			width: "100%",
+			height: "100%",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			backgroundColor: hexToRgbaString(KOREAN_COLORS.BLACK_SOLID, .8),
+			backdropFilter: "blur(8px)",
+			zIndex: 1001,
+			pointerEvents: "auto"
+		},
+		onClick: (e) => {
+			if (e.target === e.currentTarget) onCancel();
+		},
+		children: /* @__PURE__ */ jsxs("div", {
+			style: {
+				padding: isMobile ? "24px" : "32px",
+				backgroundColor: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 1),
+				border: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, .8)}`,
+				borderRadius: "12px",
+				maxWidth: isMobile ? "320px" : "400px",
+				boxShadow: `0 0 30px ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, .3)}`
+			},
+			children: [
+				/* @__PURE__ */ jsxs("h2", {
+					"data-testid": "dialog-title",
+					style: {
+						fontSize: isMobile ? "20px" : "24px",
+						color: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 1),
+						fontFamily: FONT_FAMILY.KOREAN,
+						fontWeight: "bold",
+						margin: "0 0 16px 0",
+						textAlign: "center",
+						textShadow: `0 0 10px ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, .4)}`
+					},
+					children: [
+						titleKorean,
+						/* @__PURE__ */ jsx("br", {}),
+						title
+					]
+				}),
+				/* @__PURE__ */ jsxs("p", {
+					"data-testid": "dialog-message",
+					style: {
+						fontSize: isMobile ? "14px" : "16px",
+						color: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 1),
+						fontFamily: FONT_FAMILY.KOREAN,
+						margin: "0 0 24px 0",
+						lineHeight: "1.5",
+						textAlign: "center"
+					},
+					children: [
+						messageKorean,
+						/* @__PURE__ */ jsx("br", {}),
+						message
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						gap: "12px"
+					},
+					children: [/* @__PURE__ */ jsx(BaseButtonOverlayHtml, {
+						korean: "취소",
+						english: "Cancel",
+						onClick: () => {
+							audio.playSFX("menu_back");
+							onCancel();
+						},
+						onMouseEnter: () => audio.playSFX("menu_hover"),
+						variant: "secondary",
+						size: isMobile ? "sm" : "md",
+						isMobile,
+						testId: "cancel-button",
+						style: { flex: 1 }
+					}), /* @__PURE__ */ jsx(BaseButtonOverlayHtml, {
+						korean: "확인",
+						english: "Confirm",
+						onClick: () => {
+							audio.playSFX("menu_select");
+							onConfirm();
+						},
+						onMouseEnter: () => audio.playSFX("menu_hover"),
+						variant: "primary",
+						size: isMobile ? "sm" : "md",
+						isMobile,
+						testId: "confirm-button",
+						style: { flex: 1 }
+					})]
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { ConfirmDialog as default };
+
+//# sourceMappingURL=ConfirmDialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmDialog.js","names":[],"sources":["../../../../../src/components/shared/ui/shared/ConfirmDialog.tsx"],"sourcesContent":["/**\n * ConfirmDialog Component - Modal confirmation dialog\n * \n * Features:\n * - Korean/English bilingual text\n * - Cyberpunk Korean theming\n * - Backdrop blur effect\n * - Responsive sizing\n * - Keyboard shortcuts (Enter = confirm, Esc = cancel)\n * \n * Now uses BaseButtonOverlayHtml for consistent styling\n */\n\nimport React, { useEffect } from \"react\";\nimport { useAudio } from \"../../../../audio/AudioProvider\";\nimport { KOREAN_COLORS, FONT_FAMILY } from \"../../../../types/constants\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\nimport { BaseButtonOverlayHtml } from \"../../base\";\n\nexport interface ConfirmDialogProps {\n  readonly isOpen: boolean;\n  readonly title: string;\n  readonly titleKorean: string;\n  readonly message: string;\n  readonly messageKorean: string;\n  readonly onConfirm: () => void;\n  readonly onCancel: () => void;\n  readonly isMobile: boolean;\n}\n\n/**\n * ConfirmDialog - Modal confirmation dialog with Korean theming\n */\nexport const ConfirmDialog: React.FC<ConfirmDialogProps> = ({\n  isOpen,\n  title,\n  titleKorean,\n  message,\n  messageKorean,\n  onConfirm,\n  onCancel,\n  isMobile,\n}) => {\n  const audio = useAudio();\n\n  // Handle keyboard shortcuts\n  useEffect(() => {\n    if (!isOpen) return;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === \"Enter\") {\n        e.preventDefault();\n        onConfirm();\n      } else if (e.key === \"Escape\") {\n        e.preventDefault();\n        onCancel();\n      }\n    };\n\n    window.addEventListener(\"keydown\", handleKeyDown);\n    return () => window.removeEventListener(\"keydown\", handleKeyDown);\n  }, [isOpen, onConfirm, onCancel]);\n\n  if (!isOpen) return null;\n\n  return (\n    <div\n      data-testid=\"confirm-dialog\"\n      style={{\n        position: \"fixed\",\n        top: 0,\n        left: 0,\n        width: \"100%\",\n        height: \"100%\",\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        backgroundColor: hexToRgbaString(KOREAN_COLORS.BLACK_SOLID, 0.8),\n        backdropFilter: \"blur(8px)\",\n        zIndex: 1001,\n        pointerEvents: \"auto\",\n      }}\n      onClick={(e) => {\n        // Close on backdrop click\n        if (e.target === e.currentTarget) {\n          onCancel();\n        }\n      }}\n    >\n      <div\n        style={{\n          padding: isMobile ? \"24px\" : \"32px\",\n          backgroundColor: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 1),\n          border: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.8)}`,\n          borderRadius: \"12px\",\n          maxWidth: isMobile ? \"320px\" : \"400px\",\n          boxShadow: `0 0 30px ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.3)}`,\n        }}\n      >\n        {/* Title */}\n        <h2\n          data-testid=\"dialog-title\"\n          style={{\n            fontSize: isMobile ? \"20px\" : \"24px\",\n            color: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 1),\n            fontFamily: FONT_FAMILY.KOREAN,\n            fontWeight: \"bold\",\n            margin: \"0 0 16px 0\",\n            textAlign: \"center\",\n            textShadow: `0 0 10px ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 0.4)}`,\n          }}\n        >\n          {titleKorean}\n          <br />\n          {title}\n        </h2>\n\n        {/* Message */}\n        <p\n          data-testid=\"dialog-message\"\n          style={{\n            fontSize: isMobile ? \"14px\" : \"16px\",\n            color: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 1),\n            fontFamily: FONT_FAMILY.KOREAN,\n            margin: \"0 0 24px 0\",\n            lineHeight: \"1.5\",\n            textAlign: \"center\",\n          }}\n        >\n          {messageKorean}\n          <br />\n          {message}\n        </p>\n\n        {/* Buttons - Now using BaseButtonOverlayHtml */}\n        <div\n          style={{\n            display: \"flex\",\n            gap: \"12px\",\n          }}\n        >\n          <BaseButtonOverlayHtml\n            korean=\"취소\"\n            english=\"Cancel\"\n            onClick={() => {\n              audio.playSFX(\"menu_back\");\n              onCancel();\n            }}\n            onMouseEnter={() => audio.playSFX(\"menu_hover\")}\n            variant=\"secondary\"\n            size={isMobile ? \"sm\" : \"md\"}\n            isMobile={isMobile}\n            testId=\"cancel-button\"\n            style={{ flex: 1 }}\n          />\n          <BaseButtonOverlayHtml\n            korean=\"확인\"\n            english=\"Confirm\"\n            onClick={() => {\n              audio.playSFX(\"menu_select\");\n              onConfirm();\n            }}\n            onMouseEnter={() => audio.playSFX(\"menu_hover\")}\n            variant=\"primary\"\n            size={isMobile ? \"sm\" : \"md\"}\n            isMobile={isMobile}\n            testId=\"confirm-button\"\n            style={{ flex: 1 }}\n          />\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default ConfirmDialog;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,IAAa,iBAA+C,EAC1D,QACA,OACA,aACA,SACA,eACA,WACA,UACA,eACI;CACJ,MAAM,QAAQ,UAAU;AAGxB,iBAAgB;AACd,MAAI,CAAC,OAAQ;EAEb,MAAM,iBAAiB,MAAqB;AAC1C,OAAI,EAAE,QAAQ,SAAS;AACrB,MAAE,gBAAgB;AAClB,eAAW;cACF,EAAE,QAAQ,UAAU;AAC7B,MAAE,gBAAgB;AAClB,cAAU;;;AAId,SAAO,iBAAiB,WAAW,cAAc;AACjD,eAAa,OAAO,oBAAoB,WAAW,cAAc;IAChE;EAAC;EAAQ;EAAW;EAAS,CAAC;AAEjC,KAAI,CAAC,OAAQ,QAAO;AAEpB,QACE,oBAAC,OAAD;EACE,eAAY;EACZ,OAAO;GACL,UAAU;GACV,KAAK;GACL,MAAM;GACN,OAAO;GACP,QAAQ;GACR,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,iBAAiB,gBAAgB,cAAc,aAAa,GAAI;GAChE,gBAAgB;GAChB,QAAQ;GACR,eAAe;GAChB;EACD,UAAU,MAAM;AAEd,OAAI,EAAE,WAAW,EAAE,cACjB,WAAU;;YAId,qBAAC,OAAD;GACE,OAAO;IACL,SAAS,WAAW,SAAS;IAC7B,iBAAiB,gBAAgB,cAAc,oBAAoB,EAAE;IACrE,QAAQ,aAAa,gBAAgB,cAAc,cAAc,GAAI;IACrE,cAAc;IACd,UAAU,WAAW,UAAU;IAC/B,WAAW,YAAY,gBAAgB,cAAc,cAAc,GAAI;IACxE;aARH;IAWE,qBAAC,MAAD;KACE,eAAY;KACZ,OAAO;MACL,UAAU,WAAW,SAAS;MAC9B,OAAO,gBAAgB,cAAc,aAAa,EAAE;MACpD,YAAY,YAAY;MACxB,YAAY;MACZ,QAAQ;MACR,WAAW;MACX,YAAY,YAAY,gBAAgB,cAAc,aAAa,GAAI;MACxE;eAVH;MAYG;MACD,oBAAC,MAAD,EAAM,CAAA;MACL;MACE;;IAGL,qBAAC,KAAD;KACE,eAAY;KACZ,OAAO;MACL,UAAU,WAAW,SAAS;MAC9B,OAAO,gBAAgB,cAAc,cAAc,EAAE;MACrD,YAAY,YAAY;MACxB,QAAQ;MACR,YAAY;MACZ,WAAW;MACZ;eATH;MAWG;MACD,oBAAC,MAAD,EAAM,CAAA;MACL;MACC;;IAGJ,qBAAC,OAAD;KACE,OAAO;MACL,SAAS;MACT,KAAK;MACN;eAJH,CAME,oBAAC,uBAAD;MACE,QAAO;MACP,SAAQ;MACR,eAAe;AACb,aAAM,QAAQ,YAAY;AAC1B,iBAAU;;MAEZ,oBAAoB,MAAM,QAAQ,aAAa;MAC/C,SAAQ;MACR,MAAM,WAAW,OAAO;MACd;MACV,QAAO;MACP,OAAO,EAAE,MAAM,GAAG;MAClB,CAAA,EACF,oBAAC,uBAAD;MACE,QAAO;MACP,SAAQ;MACR,eAAe;AACb,aAAM,QAAQ,cAAc;AAC5B,kBAAW;;MAEb,oBAAoB,MAAM,QAAQ,aAAa;MAC/C,SAAQ;MACR,MAAM,WAAW,OAAO;MACd;MACV,QAAO;MACP,OAAO,EAAE,MAAM,GAAG;MAClB,CAAA,CACE;;IACF;;EACF,CAAA"}

package/lib/components/test/Hello3D.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Hello3D - Test component for Three.js infrastructure
+ *
+ * This component verifies that Three.js, @react-three/fiber, and @react-three/drei
+ * are properly installed and configured. It renders a simple 3D scene with:
+ * - A pink rotating cube (Korean accent color)
+ * - Orbit controls for interaction
+ * - Ambient and directional lighting
+ *
+ * @module components/test
+ */
+import React from "react";
+/**
+ * Props for the Hello3D component
+ */
+export interface Hello3DProps {
+    readonly width?: number;
+    readonly height?: number;
+    readonly color?: number;
+}
+/**
+ * Hello3D - Minimal test component for Three.js infrastructure
+ *
+ * Renders a simple 3D scene to verify:
+ * - @react-three/fiber Canvas integration
+ * - @react-three/drei OrbitControls functionality
+ * - Three.js core rendering
+ * - Korean theming with KOREAN_COLORS
+ *
+ * @example
+ * ```tsx
+ * <Hello3D width={800} height={600} color={KOREAN_COLORS.ACCENT_GOLD} />
+ * ```
+ */
+export declare const Hello3D: React.FC<Hello3DProps>;
+//# sourceMappingURL=Hello3D.d.ts.map

package/lib/components/test/Hello3D.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Hello3D.d.ts","sourceRoot":"","sources":["../../../src/components/test/Hello3D.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAIH,OAAO,KAAiB,MAAM,OAAO,CAAC;AAkCtC;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAgC1C,CAAC"}

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

@@ -0,0 +1,63 @@
+/**
+ * BalanceIndicatorOverlayHtml Component - 3D Html overlay for balance state
+ *
+ * Displays balance state with vulnerability indicators using Html from @react-three/drei.
+ * Shows:
+ * - Current balance percentage
+ * - Vulnerability state (red border + shake effect)
+ * - Bilingual Korean/English tooltips
+ * - Stance transition vulnerability
+ * - Rapid change penalty indicator
+ *
+ * @module components/ui/combat/BalanceIndicatorOverlayHtml
+ * @category Combat UI
+ * @korean 균형표시오버레이
+ */
+import React from "react";
+import type { BalancePlayerState } from "../../../systems/combat/BalanceSystem";
+export interface BalanceIndicatorOverlayHtmlProps {
+    /**
+     * Player state with balance and transition data
+     * @korean 플레이어상태
+     */
+    readonly player: BalancePlayerState;
+    /**
+     * Current game time in milliseconds
+     * @korean 현재시간
+     */
+    readonly currentTime: number;
+    /**
+     * Position in 3D space [x, y, z]
+     * @korean 3D위치
+     */
+    readonly position?: [number, number, number];
+    /**
+     * Mobile responsive mode
+     * @korean 모바일여부
+     */
+    readonly isMobile?: boolean;
+}
+/**
+ * BalanceIndicatorOverlayHtml - 3D Html overlay for balance visualization
+ *
+ * Renders above player character in 3D space using Html from @react-three/drei.
+ * Shows balance percentage, vulnerability state, and active modifiers.
+ *
+ * Features:
+ * - Red border + shake animation when vulnerable
+ * - Bilingual Korean/English labels
+ * - Transition vulnerability indicator
+ * - Rapid change penalty warning
+ *
+ * @example
+ * ```tsx
+ * <BalanceIndicatorOverlayHtml
+ *   player={playerState}
+ *   currentTime={Date.now()}
+ *   position={[0, 2.5, 0]}
+ *   isMobile={false}
+ * />
+ * ```
+ */
+export declare const BalanceIndicatorOverlayHtml: React.FC<BalanceIndicatorOverlayHtmlProps>;
+//# sourceMappingURL=BalanceIndicatorOverlayHtml.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BalanceIndicatorOverlayHtml.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/combat/BalanceIndicatorOverlayHtml.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAEzE,MAAM,WAAW,gCAAgC;IAC/C;;;OAGG;IACH,QAAQ,CAAC,MAAM,EAAE,kBAAkB,CAAC;IAEpC;;;OAGG;IACH,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAE7B;;;OAGG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAE7C;;;OAGG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC7B;AA4BD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,2BAA2B,EAAE,KAAK,CAAC,EAAE,CAChD,gCAAgC,CAwHjC,CAAC"}