@ihabdevteam/core 0.8.0

package/dist/packages/core/src/components/Tooltip/Tooltip.js

@@ -0,0 +1,296 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState, useLayoutEffect } from 'react';
+import { createPortal } from 'react-dom';
+import './Tooltip.css';
+/** @public */
+export default function Tooltip(props) {
+    const { anchorRect, anchorEl, offset = 20, edgeMargin = 20, onClose, closeOnOutsideClick = true, className = '', role = 'dialog', ariaLabel = '', children, backdrop = false, isMobilePopup = false, useBorder = true, header, } = props || {};
+    const ref = useRef(null);
+    const [posStyle, setPosStyle] = useState({ position: 'fixed', left: 0, top: -9999 });
+    const [closing, setClosing] = useState(false);
+    const [placement, setPlacement] = useState('bottom');
+    const [measured, setMeasured] = useState(false);
+    const [isMobile, setIsMobile] = useState(false);
+    // anchorEl 제공 시 항상 live rect 사용, 아니면 anchorRect prop 사용
+    // If neither anchorRect nor anchorEl is provided, render inline.
+    const isInline = !anchorRect && !anchorEl;
+    // direct=true 이면 React state 대신 DOM 직접 업데이트 (scroll 딜레이 제거)
+    const computePosition = useCallback((direct = false) => {
+        if (isMobile && isMobilePopup)
+            return;
+        const rect = anchorEl ? anchorEl.getBoundingClientRect() : anchorRect;
+        if (!rect || !ref.current)
+            return;
+        const el = ref.current;
+        const { offsetWidth: w, offsetHeight: h } = el;
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        const spaceRight = vw - rect.right;
+        const spaceLeft = rect.left;
+        const spaceTop = rect.top;
+        const spaceBottom = vh - rect.bottom;
+        let left = 0;
+        let top = 0;
+        let chosen = 'top';
+        if (spaceTop >= h + offset) {
+            chosen = 'top';
+            top = rect.top - offset - h;
+            left = rect.left + rect.width / 2 - w / 2;
+        }
+        else if (spaceBottom >= h + offset) {
+            chosen = 'bottom';
+            top = rect.bottom + offset;
+            left = rect.left + rect.width / 2 - w / 2;
+        }
+        else if (spaceRight >= w + offset) {
+            chosen = 'right';
+            left = rect.right + offset;
+            top = rect.top + rect.height / 2 - h / 2;
+        }
+        else if (spaceLeft >= w + offset) {
+            chosen = 'left';
+            left = rect.left - offset - w;
+            top = rect.top + rect.height / 2 - h / 2;
+        }
+        else {
+            const maxSpace = Math.max(spaceTop, spaceBottom, spaceRight, spaceLeft);
+            if (maxSpace === spaceTop) {
+                chosen = 'top';
+                top = rect.top - offset - h;
+                left = rect.left + rect.width / 2 - w / 2;
+            }
+            else if (maxSpace === spaceBottom) {
+                chosen = 'bottom';
+                top = rect.bottom + offset;
+                left = rect.left + rect.width / 2 - w / 2;
+            }
+            else if (maxSpace === spaceRight) {
+                chosen = 'right';
+                left = rect.right + offset;
+                top = rect.top + rect.height / 2 - h / 2;
+            }
+            else {
+                chosen = 'left';
+                left = rect.left - offset - w;
+                top = rect.top + rect.height / 2 - h / 2;
+            }
+        }
+        const m = Number(edgeMargin) || 8;
+        left = Math.min(Math.max(left, m), vw - w - m);
+        top = Math.min(Math.max(top, m), vh - h - m);
+        const leftRounded = Math.round(left);
+        const topRounded = Math.round(top);
+        if (direct && ref.current) {
+            ref.current.style.left = `${leftRounded}px`;
+            ref.current.style.top = `${topRounded}px`;
+            ref.current.dataset.placement = chosen;
+        }
+        else {
+            setPlacement(chosen || placement);
+            setPosStyle({ position: 'fixed', left: leftRounded, top: topRounded });
+            setMeasured(true);
+        }
+    }, [isMobile, isMobilePopup, anchorEl, anchorRect, offset, edgeMargin, placement]);
+    // anchor/모드 변경 시 위치를 재계산하는 의도된 동기화다
+    /* eslint-disable react-hooks/set-state-in-effect */
+    useLayoutEffect(() => {
+        if (isInline)
+            return;
+        if (isMobile && isMobilePopup) {
+            setPosStyle({ position: 'fixed', left: '50%', top: '50%', transform: 'translate(-50%, -50%)', width: 'calc(100% - 40px)', maxWidth: 'calc(100% - 40px)' });
+            setMeasured(true);
+            return;
+        }
+        computePosition();
+        const raf = requestAnimationFrame(() => computePosition());
+        return () => cancelAnimationFrame(raf);
+    }, [anchorRect, anchorEl, offset, children, edgeMargin, isInline, isMobile, isMobilePopup, computePosition]);
+    /* eslint-enable react-hooks/set-state-in-effect */
+    useEffect(() => {
+        if (isInline)
+            return;
+        if (isMobile && isMobilePopup)
+            return;
+        if (!ref.current)
+            return;
+        // ResizeObserver 가 없는 환경(구형 브라우저·SSR·테스트 러너)에서는 생성자 호출이
+        // 그대로 던져 툴팁이 뜨는 순간 화면이 통째로 깨진다. 저장소의 다른 관측자들과
+        // 같이(Popup, CrosswordGame) 없으면 크기 추적만 포기한다 — 위치 계산은 위 effect 가 한다.
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        const ro = new ResizeObserver(() => {
+            if (!anchorRect)
+                return;
+            computePosition();
+        });
+        ro.observe(ref.current);
+        return () => ro.disconnect();
+    }, [anchorRect, children, edgeMargin, isInline, isMobile, isMobilePopup, computePosition]);
+    useEffect(() => {
+        if (isInline)
+            return;
+        if (isMobile && isMobilePopup)
+            return;
+        const onWindowChange = () => computePosition(true);
+        window.addEventListener('resize', onWindowChange);
+        document.addEventListener('scroll', onWindowChange, { passive: true, capture: true });
+        return () => {
+            window.removeEventListener('resize', onWindowChange);
+            document.removeEventListener('scroll', onWindowChange, { capture: true });
+        };
+    }, [anchorRect, offset, children, edgeMargin, isInline, isMobile, isMobilePopup, computePosition]);
+    // detect mobile (small screens) and update behavior
+    useEffect(() => {
+        // window 는 있는데 matchMedia 가 없는 환경이 있다(테스트 러너·일부 임베디드 웹뷰).
+        // 저장소의 다른 호출부(useMediaQuery, SideNav)와 같이 존재 여부까지 확인한다.
+        if (typeof window === 'undefined' || !window.matchMedia)
+            return;
+        const mq = window.matchMedia('(max-width: 768px)');
+        const handle = () => setIsMobile(!!mq.matches);
+        handle();
+        try {
+            if (mq.addEventListener)
+                mq.addEventListener('change', handle);
+            else
+                mq.addListener(handle);
+        }
+        catch (e) {
+            try {
+                mq.addListener(handle);
+            }
+            catch (ee) { }
+        }
+        return () => {
+            try {
+                if (mq.removeEventListener)
+                    mq.removeEventListener('change', handle);
+                else
+                    mq.removeListener(handle);
+            }
+            catch (e) { }
+        };
+    }, []);
+    // closing 은 state 라 같은 틱에 두 번 불리면 둘 다 false 를 본다 — 배경 클릭은
+    // 배경 자신의 onClick 과 document 바깥클릭 감지가 함께 걸려 실제로 onClose 가 두 번
+    // 불렸다. ref 로 "이미 닫는 중"을 즉시 표시해 한 번만 지나가게 한다(Popup 과 같은 방식).
+    const closingRef = useRef(false);
+    const startClose = useCallback((immediate = false) => {
+        if (closing || closingRef.current)
+            return;
+        closingRef.current = true;
+        if (immediate) {
+            // Synchronously close without waiting for the closing animation.
+            setClosing(true);
+            try {
+                if (onClose)
+                    onClose();
+            }
+            catch (err) { }
+            return;
+        }
+        setClosing(true);
+        setTimeout(() => {
+            if (onClose)
+                onClose();
+        }, 200);
+    }, [closing, onClose, setClosing]);
+    useEffect(() => {
+        const handlePointerDown = (e) => {
+            const el = ref.current;
+            if (!el)
+                return;
+            const target = e.target;
+            if (target && !el.contains(target)) {
+                try {
+                    if (target.closest && target.closest('[data-tooltip-ignore]'))
+                        return;
+                }
+                catch (err) { }
+                if (closeOnOutsideClick)
+                    startClose(true);
+            }
+        };
+        const handleClickCapture = (e) => {
+            const el = ref.current;
+            if (!el)
+                return;
+            const target = e.target;
+            if (target && !el.contains(target)) {
+                try {
+                    if (target.closest && target.closest('[data-tooltip-ignore]'))
+                        return;
+                }
+                catch (err) { }
+                if (closeOnOutsideClick)
+                    startClose(true);
+            }
+        };
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape') {
+                e.stopPropagation();
+                startClose();
+                return;
+            }
+            if (e.key === 'Tab') {
+                const el = ref.current;
+                if (!el)
+                    return;
+                const focusable = el.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+                if (!focusable || focusable.length === 0)
+                    return;
+                const first = focusable[0];
+                const last = focusable[focusable.length - 1];
+                const active = document.activeElement;
+                if (e.shiftKey) {
+                    if (active === first) {
+                        e.preventDefault();
+                        last.focus();
+                    }
+                }
+                else {
+                    if (active === last) {
+                        e.preventDefault();
+                        first.focus();
+                    }
+                }
+            }
+        };
+        document.addEventListener('pointerdown', handlePointerDown, true);
+        document.addEventListener('click', handleClickCapture, true);
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('pointerdown', handlePointerDown, true);
+            document.removeEventListener('click', handleClickCapture, true);
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [onClose, closeOnOutsideClick, startClose]);
+    // Allow external callers to force-close all tooltips by dispatching
+    // a `speechear-close-tooltips` CustomEvent on `document`.
+    useEffect(() => {
+        const handler = () => {
+            startClose(true);
+        };
+        if (typeof document !== 'undefined') {
+            document.addEventListener('speechear-close-tooltips', handler);
+        }
+        return () => {
+            if (typeof document !== 'undefined') {
+                document.removeEventListener('speechear-close-tooltips', handler);
+            }
+        };
+    }, [startClose]);
+    const el = (_jsxs("div", { ref: ref, className: `tooltip-content ${useBorder ? 'tooltip-content--bordered' : ''} ${closing ? 'is-closing' : ''} ${className} ${isMobile && isMobilePopup ? 'is-mobile' : ''}`, role: role, "aria-label": ariaLabel || undefined, style: isInline ? {} : { ...posStyle, visibility: measured ? 'visible' : 'hidden' }, tabIndex: -1, "data-placement": placement, "data-left": !isInline ? posStyle.left : '', "data-top": !isInline ? posStyle.top : '', "data-anchor-left": anchorRect ? Math.round(anchorRect.left) : '', "data-anchor-top": anchorRect ? Math.round(anchorRect.top) : '', "data-anchor-width": anchorRect ? Math.round(anchorRect.width) : '', "data-anchor-height": anchorRect ? Math.round(anchorRect.height) : '', children: [header != null && _jsx("div", { className: "tooltip-content__header h5", children: header }), children] }));
+    if (isInline)
+        return el;
+    if (typeof document === 'undefined')
+        return el;
+    // When backdrop is requested, render a full-screen overlay behind the tooltip
+    // For mobile, only show as popup/backdrop when `isMobilePopup` is true
+    if (backdrop || (isMobile && isMobilePopup)) {
+        const portal = (_jsxs("div", { className: "tooltip-portal", children: [_jsx("div", { className: "tooltip-backdrop", onClick: () => { if (closeOnOutsideClick)
+                        startClose(true); } }), el] }));
+        return createPortal(portal, document.body);
+    }
+    return createPortal(el, document.body);
+}

package/dist/packages/core/src/components/Tooltip/TrainingTooltip.css

@@ -0,0 +1,67 @@
+/* ── TrainingTooltip — 훈련 계획 내용 미리보기 툴팁 ──────────────────────── */
+
+/* wrapper(.tooltip-content)의 배경 없앰(background/box-shadow)은 Tooltip.css의 공용
+   variant 규칙으로 정규화됨. 이 파일엔 TrainingTooltip 전용 pointer-events만 남긴다. */
+.tooltip-content.tooltip-training {
+  pointer-events: none;   /* 마우스 통과 — 행 hover 유지 */
+}
+
+.tooltip-training__box {
+  padding: 10px 14px;
+  background: var(--color-white);
+  border-radius: var(--radius-m);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+}
+
+/* 훈련 타입 그룹 목록 — 가로 배치 */
+.tooltip-training__groups {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  gap: 0;
+}
+
+/* 섹션 */
+.tooltip-training__section {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 100px;
+  flex-shrink: 0;
+}
+
+/* 섹션 헤더 */
+.tooltip-training__section-header {
+  display: flex;
+  align-items: center;
+}
+
+.tooltip-training__type-label {
+  color: var(--color-darkGray);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* 섹션 사이 짧은 구분선 */
+.tooltip-training__divider {
+  width: 1px;
+  height: 20px;
+  background: var(--color-whiteLine);
+  align-self: center;
+  flex-shrink: 0;
+  margin: 0 10px;
+}
+
+/* 항목 목록 — pointer-events: none 으로 버튼 상호작용 차단 */
+.tooltip-training__items {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  pointer-events: none;
+}
+
+/* compact 버튼: pointer-events 차단 */
+.tooltip-training__items .training-block-button--compact {
+  cursor: default;
+}

package/dist/packages/core/src/components/Tooltip/TrainingTooltip.d.ts

@@ -0,0 +1,16 @@
+import './TrainingTooltip.css';
+import type { TrainingPlan } from '../../types/training';
+import type { AnchorRectLike } from '../../types/geometry';
+/** 타입 칩 호버 → TrainingTooltip 표시까지의 지연(ms). 말귀자료실 카드와
+ *  훈련설정 페이지가 동일한 호버 프리뷰 동작을 각자 구현하고 있어 공유한다.
+ *  @public */
+export declare const TRAINING_TOOLTIP_HOVER_DELAY_MS = 200;
+/** @public */
+export interface TooltipTrainingProps {
+    plan: TrainingPlan;
+    anchorRect?: DOMRect | AnchorRectLike | null;
+    offset?: number;
+    onClose?: () => void;
+}
+/** @public */
+export default function TrainingTooltip({ plan, anchorRect, offset, onClose }: TooltipTrainingProps): import("react").JSX.Element | null;

package/dist/packages/core/src/components/Tooltip/TrainingTooltip.js

@@ -0,0 +1,40 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import Tooltip from './Tooltip';
+import './TrainingTooltip.css';
+import { TRAINING_TYPES } from '../../utils/CategoryData';
+import { getTrainingPools } from '../../utils/getTrainingData';
+import TrainingBlockButton from '../Training/TrainingBlockButton';
+/** 타입 칩 호버 → TrainingTooltip 표시까지의 지연(ms). 말귀자료실 카드와
+ *  훈련설정 페이지가 동일한 호버 프리뷰 동작을 각자 구현하고 있어 공유한다.
+ *  @public */
+export const TRAINING_TOOLTIP_HOVER_DELAY_MS = 200;
+function findTrainingData(sel) {
+    if (!sel.itemId)
+        return null;
+    const pool = getTrainingPools()[sel.trainingType] ?? [];
+    return pool.find((td) => td?.id != null && String(td.id) === String(sel.itemId)) ?? null;
+}
+/** @public */
+export default function TrainingTooltip({ plan, anchorRect, offset = 12, onClose }) {
+    const groups = useMemo(() => TRAINING_TYPES.map(t => ({
+        type: t,
+        items: (plan.items ?? []).filter(i => i.trainingType === t.key),
+    })).filter(g => g.items.length > 0), [plan.items]);
+    if (groups.length === 0)
+        return null;
+    const box = (_jsx("div", { className: "tooltip-training__box", children: _jsx("div", { className: "tooltip-training__groups", children: groups.flatMap(({ type, items }, idx) => [
+                idx > 0 ? _jsx("div", { className: "tooltip-training__divider" }, `div-${type.key}`) : null,
+                _jsxs("div", { className: "tooltip-training__section", children: [_jsx("div", { className: "tooltip-training__section-header", children: _jsx("span", { className: "tooltip-training__type-label body-3b", children: type.label }) }), _jsx("div", { className: "tooltip-training__items", children: items.map((item, i) => {
+                                const td = findTrainingData(item);
+                                if (!td)
+                                    return null;
+                                return (_jsx(TrainingBlockButton, { index: i, type: type, trainingData: td, size: "compact", hideCheckBadge: true }, item.itemId ?? i));
+                            }) })] }, type.key),
+            ]) }) }));
+    // anchorRect 없으면 박스를 직접 렌더 (position: absolute 없음 — 인라인 미리보기용)
+    if (!anchorRect)
+        return box;
+    return (_jsx(Tooltip, { anchorRect: anchorRect, offset: offset, onClose: onClose, closeOnOutsideClick: false, className: "tooltip-training", children: box }));
+}

package/dist/packages/core/src/components/Tooltip/WordImageTooltip.css

@@ -0,0 +1,61 @@
+.tooltip-word-image {
+  position: fixed;
+  padding: var(--spacing-s);
+  background: var(--color-white);
+  border-radius: var(--radius-m);
+  box-shadow: var(--shadow-dropdown);
+  z-index: var(--z-tooltip);
+}
+
+.tooltip-word-image__cells {
+  display: flex;
+  gap: var(--spacing-s);
+}
+
+.tooltip-word-image__cell {
+  position: relative;
+  width: 120px;
+  height: 120px;
+  flex-shrink: 0;
+  background: var(--color-white, #f5f5f5);
+  border-radius: var(--radius-card);
+  overflow: hidden;
+}
+
+.tooltip-word-image__cell img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  transition: opacity 0.2s;
+}
+
+.tooltip-word-image__spinner {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tooltip-word-image__spinner::after {
+  content: '';
+  width: 24px;
+  height: 24px;
+  border: 3px solid var(--color-white, #e0e0e0);
+  border-top-color: var(--color-main, #4f6ef7);
+  border-radius: 50%;
+  animation: tooltip-spin 0.7s linear infinite;
+}
+
+@keyframes tooltip-spin {
+  to { transform: rotate(360deg); }
+}
+
+.tooltip-word-image__cell--text {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  color: var(--color-black);
+}

package/dist/packages/core/src/components/Tooltip/WordImageTooltip.d.ts

@@ -0,0 +1,12 @@
+import './WordImageTooltip.css';
+/** @public */
+export interface WordImageTooltipProps {
+    words: {
+        label: string;
+        subLabel?: string;
+        homonum?: number;
+    }[];
+    anchorRect: DOMRect | null;
+}
+/** @public */
+export default function WordImageTooltip({ words, anchorRect }: WordImageTooltipProps): import("react").ReactPortal | null;

package/dist/packages/core/src/components/Tooltip/WordImageTooltip.js

@@ -0,0 +1,39 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { getImageResolver } from '../../utils/imageConfig';
+import { useWordImage } from '../../hooks/useWordImage';
+import './WordImageTooltip.css';
+function WordImageCell({ label, homonum }) {
+    const imageUrl = getImageResolver()?.(label, homonum) ?? '';
+    const { imgRef, loading, hasImage, onLoad, onError } = useWordImage(imageUrl);
+    if (!hasImage) {
+        return (_jsx("div", { className: "tooltip-word-image__cell tooltip-word-image__cell--text h3", children: _jsx("span", { children: label }) }));
+    }
+    return (_jsxs("div", { className: "tooltip-word-image__cell", children: [loading && _jsx("div", { className: "tooltip-word-image__spinner" }), _jsx("img", { ref: imgRef, src: imageUrl, alt: label, draggable: false, style: { opacity: loading ? 0 : 1 }, onLoad: onLoad, onError: onError })] }));
+}
+/** @public */
+export default function WordImageTooltip({ words, anchorRect }) {
+    const ref = useRef(null);
+    const [pos, setPos] = useState(null);
+    useLayoutEffect(() => {
+        if (!anchorRect || !ref.current)
+            return;
+        const { offsetWidth: w, offsetHeight: h } = ref.current;
+        const vw = window.innerWidth;
+        let left = anchorRect.left + anchorRect.width / 2 - w / 2;
+        let top = anchorRect.top - h - 8;
+        if (top < 8)
+            top = anchorRect.bottom + 8;
+        left = Math.max(8, Math.min(left, vw - w - 8));
+        setPos({ left, top });
+    }, [anchorRect]);
+    if (!anchorRect || words.length === 0)
+        return null;
+    return createPortal(_jsx("div", { ref: ref, className: "tooltip-word-image", style: {
+            visibility: pos ? 'visible' : 'hidden',
+            left: pos?.left ?? 0,
+            top: pos?.top ?? -9999,
+        }, children: _jsx("div", { className: "tooltip-word-image__cells", children: words.map((w) => (_jsx(WordImageCell, { label: w.label, homonum: w.homonum }, `${w.label}_${w.homonum ?? 1}`))) }) }), document.body);
+}

package/dist/packages/core/src/components/Tooltip/tooltipConstants.d.ts

@@ -0,0 +1,44 @@
+import type { TFunction } from 'i18next';
+/** @public */
+export declare const PLAYBACK_SPEED_OPTIONS: {
+    label: string;
+    value: string;
+}[];
+/** @public */
+export declare function getNoiseLevelOptions(t: TFunction): {
+    label: string;
+    value: number;
+}[];
+/** @public */
+export declare function getNoiseTypeOptions(t: TFunction): {
+    label: string;
+    value: string;
+    icon: string;
+}[];
+/** @public */
+export declare const NOISE_LEVEL_OPTIONS: {
+    label: string;
+    value: number;
+}[];
+/** @public */
+export declare const NOISE_TYPE_OPTIONS: {
+    label: string;
+    value: string;
+    icon: string;
+}[];
+declare const _default: {
+    PLAYBACK_SPEED_OPTIONS: {
+        label: string;
+        value: string;
+    }[];
+    NOISE_LEVEL_OPTIONS: {
+        label: string;
+        value: number;
+    }[];
+    NOISE_TYPE_OPTIONS: {
+        label: string;
+        value: string;
+        icon: string;
+    }[];
+};
+export default _default;

package/dist/packages/core/src/components/Tooltip/tooltipConstants.js

@@ -0,0 +1,38 @@
+/** @public */
+export const PLAYBACK_SPEED_OPTIONS = [
+    { label: "0.5x", value: "0.5x" },
+    { label: "0.75x", value: "0.75x" },
+    { label: "1.0x", value: "1.0x" },
+    { label: "1.25x", value: "1.25x" },
+    { label: "1.5x", value: "1.5x" },
+];
+/** @public */
+export function getNoiseLevelOptions(t) {
+    return [
+        { label: t('training.noise.level.none', '없음'), value: 0 },
+        { label: t('training.noise.level.weak', '약함'), value: 1 },
+        { label: t('training.noise.level.medium', '보통'), value: 2 },
+        { label: t('training.noise.level.strong', '강함'), value: 3 },
+        { label: t('training.noise.level.veryStrong', '매우 강함'), value: 4 },
+    ];
+}
+/** @public */
+export function getNoiseTypeOptions(t) {
+    return [
+        { label: t('training.noise.type.default', '기본'), value: "defaultNoise", icon: "party-popper" },
+        { label: t('training.noise.type.street', '길거리'), value: "street", icon: "car" },
+        { label: t('training.noise.type.buzz', '와글와글'), value: "buzz", icon: "message-square-more" },
+        { label: t('training.noise.type.restaurant', '식당'), value: "restaurant", icon: "coffee" },
+    ];
+}
+// Backwards-compat static exports (uses i18n singleton — labels won't react to runtime language changes)
+import i18n from '../../i18n';
+/** @public */
+export const NOISE_LEVEL_OPTIONS = getNoiseLevelOptions(i18n.t.bind(i18n));
+/** @public */
+export const NOISE_TYPE_OPTIONS = getNoiseTypeOptions(i18n.t.bind(i18n));
+export default {
+    PLAYBACK_SPEED_OPTIONS,
+    NOISE_LEVEL_OPTIONS,
+    NOISE_TYPE_OPTIONS,
+};