@ihabdevteam/core 0.8.0

package/dist/packages/core/src/components/Training/TrainingPagePopupBottom.css

@@ -0,0 +1,45 @@
+.training-page-bottom {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.pp-bottom {
+  flex: 0 0 auto; /* flex 패널 안에서 높이 고정 */
+  width: 100%;
+  z-index: 5;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--spacing-s);
+  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
+  background: var(--color-deepWhite);
+  border-top: 1px solid var(--color-whiteLine);
+  box-sizing: border-box;
+}
+
+.pp-bottom__left { display:flex; align-items:center; gap: var(--spacing-m) }
+.pp-bottom__right { display:flex; gap:8px; align-items:center }
+
+/* 오디오 레벨 미터 (훈련 설정 버튼 옆) — 가로 막대 + dB, 문장/소음 2줄.
+   옆의 훈련 설정 버튼(bar 타입, useBorder)과 동일한 테두리·radius로 감싸 한 세트처럼 보이게 한다. */
+.pp-bottom__meters {
+  display:flex;
+  flex-direction:column;
+  gap: 2px;
+  justify-content:center;
+  border: 1px solid var(--color-whiteLine);
+  border-radius: 14px;
+  padding: 8px 12px;
+}
+.pp-bottom__meter { display:flex; flex-direction:row; align-items:center; gap: var(--spacing-xs) }
+.pp-bottom__meter-label { color: var(--color-gray); min-width: 28px }
+
+.pp-bottom__settings--desktop { display: none }
+.pp-bottom__settings--mobile { display: flex }
+
+@media (min-width: 768px) {
+  .pp-bottom__settings--desktop { display: block }
+  .pp-bottom__settings--mobile { display: none }
+}
+
+.pp-bottom__tooltip-trigger { display: inline-block; }

package/dist/packages/core/src/components/Training/TrainingPagePopupBottom.d.ts

@@ -0,0 +1,14 @@
+import "./TrainingPagePopupBottom.css";
+/** @public */
+export type TrainingPagePopupBottomProps = {
+    useNoiseSettingBtn?: boolean;
+    onSettings?: () => void;
+    onNext?: () => void;
+    onResult?: () => void;
+    stepIndex?: number;
+    stepCount?: number;
+    pageIndex?: number;
+    pageCount?: number;
+};
+/** @public */
+export default function TrainingPagePopupBottom({ useNoiseSettingBtn, onSettings, onNext, onResult, stepIndex, stepCount, pageIndex, pageCount, }: TrainingPagePopupBottomProps): import("react").JSX.Element;

package/dist/packages/core/src/components/Training/TrainingPagePopupBottom.js

@@ -0,0 +1,60 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from 'react-i18next';
+import Button from '../Button';
+import AudioMeter from '../AudioMeter';
+import NoiseSettingsTooltip from './NoiseSettingsTooltip';
+import { useNoisePlayer } from './NoisePlayerContext';
+import "./TrainingPagePopupBottom.css";
+/** @public */
+export default function TrainingPagePopupBottom({ useNoiseSettingBtn = false, onSettings, onNext, onResult, stepIndex = 0, stepCount = 0, pageIndex = 0, pageCount = 1, }) {
+    const { t } = useTranslation();
+    const [open, setOpen] = useState(false);
+    const [anchorRect, setAnchorRect] = useState(null);
+    const [showMeters, setShowMeters] = useState(false);
+    const desktopRef = useRef(null);
+    const mobileRef = useRef(null);
+    const noisePlayer = useNoisePlayer();
+    const useNextBtn = pageIndex < pageCount - 1;
+    const useResultBtn = pageIndex === pageCount - 1;
+    const isBtnActive = stepIndex === Math.max(0, stepCount);
+    // 노이즈 설정 버튼이 비활성화되면 열려 있던 팝업을 닫는 의도된 동기화다
+    /* eslint-disable react-hooks/set-state-in-effect */
+    useEffect(() => {
+        if (!useNoiseSettingBtn) {
+            setOpen(false);
+            setAnchorRect(null);
+        }
+    }, [useNoiseSettingBtn]);
+    /* eslint-enable react-hooks/set-state-in-effect */
+    const handleCloseTooltip = useCallback(() => { setOpen(false); setAnchorRect(null); }, []);
+    // 토글 판정은 updater가 아니라 현재 open 값으로 한다 — updater 안에서 onSettings 같은
+    // 부수효과를 호출하면 StrictMode에서 updater가 2회 실행돼 콜백이 중복 발화된다.
+    const handleDesktopClick = useCallback(() => {
+        if (open) {
+            setOpen(false);
+            setAnchorRect(null);
+            return;
+        }
+        const rect = desktopRef?.current?.getBoundingClientRect();
+        if (rect)
+            setAnchorRect(rect);
+        onSettings?.();
+        setOpen(true);
+    }, [open, onSettings]);
+    const handleMobileClick = useCallback(() => {
+        if (open) {
+            setOpen(false);
+            setAnchorRect(null);
+            return;
+        }
+        const rect = mobileRef?.current?.getBoundingClientRect();
+        if (rect)
+            setAnchorRect(rect);
+        onSettings?.();
+        setOpen(true);
+    }, [open, onSettings]);
+    const handleToggleMeters = useCallback(() => setShowMeters(prev => !prev), []);
+    return (_jsxs("div", { className: "pp-bottom", children: [_jsxs("div", { className: "pp-bottom__left", children: [useNoiseSettingBtn ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "pp-bottom__settings--desktop", children: _jsx("div", { ref: desktopRef, className: "pp-bottom__tooltip-trigger", "data-tooltip-ignore": true, children: _jsx(Button, { size: 56, type: "bar", icon: 'settings', onClick: handleDesktopClick, selected: open, ariaLabel: t('training.trainingSettingsTitle', '훈련 설정'), label: t('training.trainingSettingsTitle', '훈련 설정'), minWidth: 140 }) }) }), _jsx("div", { className: "pp-bottom__settings--mobile", children: _jsx("div", { ref: mobileRef, className: "pp-bottom__tooltip-trigger", "data-tooltip-ignore": true, children: _jsx(Button, { size: 56, type: "dot", icon: 'settings', onClick: handleMobileClick, selected: open, ariaLabel: t('training.settings', '설정'), minWidth: 52 }) }) })] })) : null, useNoiseSettingBtn && (_jsx(Button, { size: 40, type: "dot", shape: "pill", icon: "audio-lines", onClick: handleToggleMeters, selected: showMeters, ariaLabel: t('training.meter.toggle', '오디오 미터 표시') })), useNoiseSettingBtn && showMeters && (_jsxs("div", { className: "pp-bottom__meters", children: [_jsxs("div", { className: "pp-bottom__meter", children: [_jsx("span", { className: "pp-bottom__meter-label caption-1", children: t('training.meter.sentence', '재생') }), _jsx(AudioMeter, { analyser: noisePlayer?.mainAnalyser ?? null, orientation: "horizontal", length: 112, label: "db", labelPos: "left", ariaLabel: t('training.meter.sentence', '재생') })] }), _jsxs("div", { className: "pp-bottom__meter", children: [_jsx("span", { className: "pp-bottom__meter-label caption-1", children: t('training.meter.noise', '소음') }), _jsx(AudioMeter, { analyser: noisePlayer?.noiseAnalyser ?? null, orientation: "horizontal", length: 112, label: "db", labelPos: "left", ariaLabel: t('training.meter.noise', '소음') })] })] }))] }), _jsxs("div", { className: "pp-bottom__right", children: [useResultBtn && (_jsx(Button, { size: 56, type: "bar", icon: "check", onClick: typeof onResult === "function" ? onResult : onNext, ariaLabel: t('training.viewResult', '결과보기'), label: t('training.viewResult', '결과보기'), variant: "main", disabled: !isBtnActive })), useNextBtn && (_jsx(Button, { size: 56, type: "bar", rightIcon: "chevron-right", align: "right", onClick: onNext, ariaLabel: t('training.nextQuestion', '다음 문제'), label: t('training.nextQuestion', '다음 문제'), variant: "main", disabled: !isBtnActive }))] }), useNoiseSettingBtn && open && (_jsx(NoiseSettingsTooltip, { anchorRect: anchorRect, onClose: handleCloseTooltip }))] }));
+}

package/dist/packages/core/src/components/Training/TrainingPagePopupContext.d.ts

@@ -0,0 +1,13 @@
+import type { TrainingPayload } from '../../types/training';
+/** @public */
+export type TrainingPagePopupContextValue = {
+    currentPageIndex: number;
+    currentStepIndex: number;
+    totalStepsInPage?: number;
+    handleStepDone: (payload?: TrainingPayload, stepIdx?: number) => void;
+    handleStepChange: (payload?: TrainingPayload, stepIdx?: number) => void;
+};
+/** @public */
+export declare const TrainingPagePopupContext: import("react").Context<TrainingPagePopupContextValue | null>;
+/** @public */
+export declare function useTrainingPagePopupContext(): TrainingPagePopupContextValue;

package/dist/packages/core/src/components/Training/TrainingPagePopupContext.js

@@ -0,0 +1,12 @@
+'use client';
+import { createContext, useContext } from 'react';
+/** @public */
+export const TrainingPagePopupContext = createContext(null);
+/** @public */
+export function useTrainingPagePopupContext() {
+    const ctx = useContext(TrainingPagePopupContext);
+    if (!ctx) {
+        throw new Error('useTrainingPagePopupContext must be used inside TrainingPagePopup');
+    }
+    return ctx;
+}

package/dist/packages/core/src/components/Training/TrainingPagePopupTitle.css

@@ -0,0 +1,77 @@
+.training-page-top {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.pp-title.training-popup-title {
+	position: relative;
+	z-index: 6;
+	width: 100%;
+	box-sizing: border-box;
+	padding: 12px 16px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--spacing-s);
+	background: var(--color-deepWhite);
+	border-bottom: 1px solid var(--color-whiteLine);
+}
+
+.pp-title__left {
+	display: flex;
+	gap: var(--spacing-s);
+	align-items: center;
+	min-width: 0;
+}
+
+.pp-title__text {
+	display: flex;
+	flex-direction: column;
+	min-width: 0;
+}
+
+.pp-title__depth {
+	color: var(--color-gray);
+}
+
+/* margin: 0 은 !important 불필요 — 결합되는 h2 타이포그래피 클래스(styles.css)가
+   이미 margin: 0을 지정하므로 값이 애초에 충돌하지 않음. */
+.pp-title__title {
+	font-weight: 700;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	margin: 0;
+}
+
+/* 훈련 이름이 비어 있을 때의 안내 문구 — 실제 이름이 아니라는 걸 색으로 구분한다. */
+.pp-title__title--empty {
+	color: var(--color-whiteLine);
+}
+
+.pp-title__description {
+	color: var(--color-gray);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	margin-top: 1px;
+}
+
+@media (max-width: 767px) {
+	.pp-title.training-popup-title {
+		padding: 10px 12px;
+		gap: var(--spacing-xs);
+	}
+	/* depth 텍스트 한 줄로 잘림 */
+	.pp-title__depth {
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	/* progress indicator 가 잘리지 않도록 */
+	.pp-title__left {
+		flex: 1;
+		min-width: 0;
+		overflow: hidden;
+	}
+}

package/dist/packages/core/src/components/Training/TrainingPagePopupTitle.d.ts

@@ -0,0 +1,21 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import "./TrainingPagePopupTitle.css";
+/** @public */
+export type TrainingPagePopupTitleProps = {
+    title?: ReactNode;
+    subtitle?: ReactNode;
+    /** 타이틀 아래에 표시할 설명 텍스트 */
+    desc?: string;
+    depth?: string | string[];
+    icon?: ReactNode | string;
+    wrapperStyle?: CSSProperties;
+    iconTooltip?: string;
+    pageIndex?: number;
+    pageCount?: number;
+    progressMax?: number;
+    progressIndex?: number;
+    onBack?: () => void;
+    onClose?: () => void;
+};
+/** @public */
+export default function TrainingPagePopupTitle({ title, subtitle, desc, depth, icon, wrapperStyle, iconTooltip, pageIndex: _pageIndex, pageCount: _pageCount, progressMax, progressIndex, onBack, onClose, }: TrainingPagePopupTitleProps): import("react").JSX.Element;

package/dist/packages/core/src/components/Training/TrainingPagePopupTitle.js

@@ -0,0 +1,41 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import ProgressIndicator from '../ProgressIndicator';
+import Button from '../Button';
+import CategoryIcon from "./CategoryIcon";
+import useMediaQuery from '../../hooks/useMediaQuery';
+import "./TrainingPagePopupTitle.css";
+/** @public */
+export default function TrainingPagePopupTitle({ title, subtitle, desc, depth, icon, wrapperStyle, iconTooltip, pageIndex: _pageIndex, pageCount: _pageCount, progressMax, progressIndex, onBack, onClose, }) {
+    const { t } = useTranslation();
+    const isMobile = useMediaQuery('(max-width: 767px)');
+    const pageIndex = Number.isInteger(progressIndex) ? progressIndex : (_pageIndex || 0);
+    const pageCount = Number.isInteger(progressMax) ? progressMax : (_pageCount || 0);
+    const resolvedBack = onBack || onClose;
+    // 모바일: 배열의 마지막 항목(훈련 종류)만 표시
+    const depthText = Array.isArray(depth)
+        ? isMobile ? depth[depth.length - 1] : depth.join(' / ')
+        : depth;
+    // 이름이 비면 예전엔 depth(훈련 타입)로 폴백했는데, 그러면 depth 라벨과 같은 문구가 두 줄로
+    // 반복돼 이름이 없다는 사실이 오히려 가려졌다 — 비었음을 흐린 글씨로 그대로 알린다.
+    const titleText = typeof title === 'string' ? title.trim() : title;
+    const subtitleText = typeof subtitle === 'string' ? subtitle.trim() : subtitle;
+    const hasName = !!(titleText || subtitleText);
+    const resolvedTitle = hasName ? (titleText || subtitleText) : t('common.emptyTrainingName', '훈련 이름이 비어 있습니다.');
+    const rawDepth = depthText || subtitle;
+    // 모바일: " · " 또는 " / " 구분자가 있으면 마지막 세그먼트만 사용
+    const resolvedDepth = (isMobile && typeof rawDepth === 'string' && (rawDepth.includes(' · ') || rawDepth.includes(' / ')))
+        ? rawDepth.split(/\s[·/]\s/).pop()
+        : rawDepth;
+    const iconWrapperStyle = useMemo(() => {
+        const base = wrapperStyle && typeof wrapperStyle === 'object' ? { ...wrapperStyle } : {};
+        if (!('width' in base) && !('height' in base)) {
+            base.width = '40px';
+            base.height = '40px';
+        }
+        return base;
+    }, [wrapperStyle]);
+    return (_jsxs("header", { className: "pp-title training-popup-title", children: [_jsxs("div", { className: "pp-title__left", children: [resolvedBack ? (_jsx(Button, { size: 48, type: "dot", icon: "chevron-left", ariaLabel: t('common.back', '뒤로'), onClick: resolvedBack, useBorder: false, iconSize: 'large', iconColor: "--color-black", variant: "transparent-gray" })) : null, _jsx("div", { children: icon ? (_jsx(CategoryIcon, { icon: icon, label: title, tooltip: iconTooltip, wrapperStyle: iconWrapperStyle })) : null }), _jsxs("div", { className: "pp-title__text", children: [resolvedDepth ? _jsx("span", { className: "pp-title__depth caption-1", children: resolvedDepth }) : null, _jsx("span", { className: `pp-title__title h2${hasName ? '' : ' pp-title__title--empty'}`, children: resolvedTitle }), desc ? _jsx("span", { className: "pp-title__description caption-1", children: desc }) : null] })] }), _jsx(ProgressIndicator, { max: Math.max(0, pageCount ?? 0), index: Math.max(0, pageIndex ?? 0) })] }));
+}

package/dist/packages/core/src/components/Training/TrainingStep.css

@@ -0,0 +1,236 @@
+@import './TrainingPagePopupBottom.css';
+
+.training-steps {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  box-sizing: border-box;
+  overflow: visible;
+}
+
+
+.training-step {
+  display: flex;
+  flex-direction: row;
+  gap: var(--spacing-m);
+  align-items: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  flex-wrap: nowrap; /* prevent internal wrapping */
+  overflow: visible
+}
+
+/* shared content & body layout */
+.training-step__body,
+.training-step__content {
+  flex: 1 1 auto;
+  display: flex;
+  width: 100%; /* Ensure steps take full available width of their container */
+  box-sizing: border-box;
+  flex-direction: column;
+  gap: var(--spacing-s);
+  overflow: visible
+}
+
+.training-step__content { gap: var(--spacing-m); min-width: 0; }
+
+.training-step__controls {
+  width: 100%; /* Make each step fill parent width and allow children to shrink */
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+  
+/* Ensure step titles are left-aligned and use base typography */
+.training-step__title {
+  text-align: left;
+  margin: 0;
+  color: var(--text, #0b2b35);
+}
+
+/* audio panel tweaks inside the step to make it visually centered */
+/* Allow content area to shrink in narrow containers */
+.training-step__body .audio-player {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.training-step__body .audio-player__panel {
+  width: 100%;
+  padding: 18px 20px;
+  border-radius: var(--radius-card);
+}
+
+/* Controls column (right side) reserved for future actions; keep compact */
+.training-step__controls.compact {
+  width: 72px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Confirm step specifics */
+.training-step__confirm-sentence {
+  background: var(--color-white);
+  border-radius: var(--radius-card);
+  padding: var(--spacing-m);
+  border: 1px solid rgba(0,0,0,0.04);
+  box-shadow: var(--shadow-card);
+  color: var(--text, #0b2b35);
+  max-width: 100%;
+  height:200px;
+}
+
+/* center the confirm sentence text both horizontally and vertically */
+.training-step__confirm-sentence {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  word-break: keep-all;
+  overflow-wrap: anywhere;
+}
+
+.training-step__controls.expanded {
+  width: 100%;
+  align-items: stretch;
+  max-height: 420px;
+  overflow-y: auto;
+  padding-bottom: 6px;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.training-step__controls.expanded::-webkit-scrollbar { display: none; }
+
+.training-step__controls .training-step__title {
+  color: var(--muted, #70858a);
+}
+
+.training-step__answer-button {
+  padding: 10px 14px;
+  border-radius: var(--radius-s);
+  border: 1px solid rgba(0,0,0,0.06);
+  background: var(--color-white);
+  cursor: pointer;
+  flex: 0 0 auto;
+}
+
+.training-step__buttons {
+  display: flex;
+  flex-direction: row;
+  gap: var(--spacing-content);
+  width: 100%;
+  overflow-x: auto;
+  align-items: stretch;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.training-step__buttons::-webkit-scrollbar { display: none; }
+
+/* make each child button expand to fill available space and remove external margins */
+.training-step__buttons > * {
+  flex: 1 1 0;
+  margin: 0;
+  min-width: 0;
+  align-self: stretch;
+}
+
+/* wrap layout: only used when option count is greater than 3 */
+.training-step__buttons.training-step__buttons--wrap-3 {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  overflow-x: visible;
+}
+
+.training-step__buttons.training-step__buttons--wrap-3 > * {
+  width: 100%;
+}
+
+/* Ensure button elements inside .training-step__buttons grow with their content */
+.training-step__buttons .button {
+  align-self: stretch;
+  display: flex;
+  align-items: center;
+}
+
+/* remove stacked margin rule */
+.training-step__answer-button + .training-step__answer-button { margin-top: 0 }
+
+/* multi-select confirm button wrapper */
+.training-step__multi-confirm {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+  margin-top: var(--margin-content, 12px);
+}
+
+/* 스크롤바 완전 숨김 (스크롤 기능은 유지) */
+.training-step__controls::-webkit-scrollbar { display: none; }
+.training-step__controls {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+@media (max-width: 640px) {
+  .training-step__body .audio-player__panel { padding: 14px; border-radius: var(--radius-card); }
+  .training-step__controls.compact { width: 48px }
+  /* keep row layout on small screens; allow horizontal scroll instead of wrapping */
+  .training-step { flex-direction: row; gap: 10px }
+}
+
+@media (max-width: 720px) {
+  .training-step__controls.expanded { gap: 8px }
+  .training-step__answer-button { padding: 9px 12px }
+  .training-step__confirm-sentence { padding: var(--spacing-s); }
+}
+
+.training-step__cards {
+  display: flex;
+  gap: var(--spacing-s);
+  width: 100%;
+  box-sizing: border-box;
+}
+
+@media (max-width: 767px) {
+  .training-step__cards {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--spacing-s);
+  }
+}
+
+.training-step__block {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-s);
+  width: 100%;
+}
+
+.training-step__block--row {
+  display: flex;
+  flex-direction: row;
+  gap: var(--spacing-s);
+  align-items: center;
+}
+
+.training-step__listen-sticky {
+  width: 100%;
+}
+
+
+/* Polyfill fallback: when JS marks a step with .training-step--has-nested */
+.training-step.training-step--has-nested .training-step__content {
+  margin-bottom: 100px;
+}
+.training-steps > .training-step:last-child .training-step__content {
+  margin-bottom: 0;
+}
+/* Component-driven last marker: steps that are NOT last get extra bottom margin */
+.training-step:not(.training-step--last) .training-step__content {
+  margin-bottom:var( --margin-page);
+}
+.training-step.training-step--last .training-step__content {
+  margin-bottom: 0;
+}

package/dist/packages/core/src/components/Training/TrainingStep.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from "react";
+/** @public */
+export type TrainingStepProps = {
+    index?: number;
+    stepIndex?: number;
+    isLast?: boolean;
+    title?: string;
+    titleProps?: Record<string, unknown>;
+    children?: ReactNode;
+    className?: string;
+    onDone?: (payload?: unknown) => void;
+    useTitleFaded?: boolean;
+};
+/** @public */
+export default function TrainingStep({ index, stepIndex, isLast, title, titleProps, children, className, onDone, useTitleFaded }: TrainingStepProps): import("react").JSX.Element;

package/dist/packages/core/src/components/Training/TrainingStep.js

@@ -0,0 +1,89 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState, Children, isValidElement, cloneElement } from "react";
+import Tooltip from '../Tooltip/Tooltip';
+import TextBoxTooltip from '../Tooltip/TextBoxTooltip';
+import TrainingStepBullet from './TrainingStepBullet';
+import TrainingStepTitle from './TrainingStepTitle';
+function computeState(index, sIndex) {
+    if (typeof sIndex !== "number")
+        return "disabled";
+    if (typeof index !== 'number')
+        return 'disabled';
+    if (index < sIndex)
+        return "done";
+    if (index === sIndex)
+        return "active";
+    return "disabled";
+}
+/** @public */
+export default function TrainingStep({ index, stepIndex, isLast = false, title = "", titleProps = {}, children, className = "", onDone = undefined, useTitleFaded = undefined }) {
+    const [currentState, setCurrentState] = useState(() => computeState(index, stepIndex));
+    useEffect(() => {
+        const s = computeState(index, stepIndex);
+        if (s !== currentState) {
+            const id = setTimeout(() => setCurrentState(s), 0);
+            return () => clearTimeout(id);
+        }
+        return undefined;
+    }, [index, stepIndex, currentState]);
+    const done = useCallback((...args) => {
+        if (computeState(index, stepIndex) === 'done' || currentState === 'done')
+            return;
+        if (typeof onDone === 'function')
+            onDone(...args);
+    }, [index, stepIndex, currentState, onDone]);
+    // --- Tooltip handling shared for children ---
+    const [tooltipOpen, setTooltipOpen] = useState(false);
+    const [tooltipOpts, setTooltipOpts] = useState({ text: '', label: '문장 듣기', anchorRect: null, backdrop: false, alignX: null, alignY: null });
+    const getAnchorRectFrom = useCallback((el) => {
+        if (!el)
+            return null;
+        try {
+            const obj = el;
+            if (typeof el === 'object' && (obj.currentTarget || obj.target) && (obj.nativeEvent || obj.type)) {
+                const target = (obj.currentTarget ?? obj.target);
+                if (target && typeof target.getBoundingClientRect === 'function')
+                    return target.getBoundingClientRect();
+            }
+            if (el instanceof DOMRect)
+                return el;
+            const maybeEl = el;
+            if (maybeEl && typeof maybeEl.getBoundingClientRect === 'function')
+                return maybeEl.getBoundingClientRect();
+            const maybeCur = el?.current;
+            if (maybeCur && typeof maybeCur.getBoundingClientRect === 'function')
+                return maybeCur.getBoundingClientRect();
+            return null;
+        }
+        catch (e) {
+            return null;
+        }
+    }, []);
+    const showTooltip = useCallback((targetOrRect, { text = '', label = '문장 듣기', backdrop = false, alignX = 'center', alignY = 'top' } = {}) => {
+        const rect = getAnchorRectFrom(targetOrRect);
+        setTooltipOpts({ text, label, anchorRect: rect, backdrop, alignX, alignY });
+        setTooltipOpen(true);
+    }, [getAnchorRectFrom]);
+    const hideTooltip = useCallback(() => {
+        setTooltipOpen(false);
+        setTooltipOpts((s) => ({ ...s, anchorRect: null }));
+    }, []);
+    const mappedChildren = Children.map(children, (child) => {
+        if (isValidElement(child)) {
+            const el = child;
+            const isDomElement = typeof el.type === 'string';
+            if (isDomElement)
+                return el;
+            const childProps = (el.props ?? {});
+            const childOnDone = typeof childProps.onDone === 'function' ? childProps.onDone : done;
+            const childAlreadyHasDisabled = typeof childProps.disabled === 'boolean';
+            let childDisabled = currentState === 'disabled';
+            if (childAlreadyHasDisabled)
+                childDisabled = Boolean(childProps.disabled);
+            return cloneElement(el, { onDone: childOnDone, disabled: childDisabled, showTooltip, hideTooltip });
+        }
+        return child;
+    });
+    return (_jsxs("div", { className: `training-step training-step--${currentState} ${isLast ? "training-step--last" : ""} ${className}`, "aria-current": currentState === 'active', children: [_jsx(TrainingStepBullet, { state: currentState }), _jsxs("div", { className: "training-step__content", children: [_jsx(TrainingStepTitle, { state: currentState, title: title, ...titleProps, useFaded: useTitleFaded }), mappedChildren] }), tooltipOpen ? (_jsx(Tooltip, { anchorRect: tooltipOpts.anchorRect, backdrop: tooltipOpts.backdrop, onClose: hideTooltip, children: _jsx(TextBoxTooltip, { text: tooltipOpts.text, onClose: hideTooltip }) })) : null] }));
+}