@ihabdevteam/core 0.128.0 → 0.131.0

package/dist/packages/core/src/components/ProgressIndicator.d.ts

@@ -32,11 +32,8 @@ export interface ProgressIndicatorProps {
      */
     announce?: boolean;
     /**
-     * 이름표를 직접 준다. 안 주면 i18n 의 `progress.steps` 로 짓는다.
-     *
-     * i18n 을 쓰지 않는 앱에서는 그 값이 한글 기본값으로 떨어진다 —
-     * 화면은 영문인데 이름표만 한글이 되는 자리가 실제로 있었다
-     * (sound-localization-system 의 병원용 빌드).
+     * 이름표를 직접 준다. 안 주면 i18n 의 `progress.steps`('진행 단계 N / M')로 짓는다 —
+     * i18n 사전을 싣지 않는 앱은 이름표가 한글 기본값으로 떨어지므로 번역한 글을 여기 넘긴다.
      */
     ariaLabel?: string;
 }

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

@@ -17,17 +17,34 @@ export default function PromoBanner({ title, description, actionLabel, onAction,
     const isMobile = useMediaQuery('(max-width: 767px)');
     // PromoBannerBg*가 useLayoutEffect(child)에서 --promo-banner-bg-title/description을
     // 주입한 뒤, 이 useLayoutEffect(parent)에서 override → 항상 마지막에 적용됨.
-    // ⚠️ prop이 undefined일 때는 절대 removeProperty 하지 않는다 — 배경이 주입한 값을
+    // ⚠️ prop이 undefined일 때는 removeProperty 하지 않는다 — 배경이 주입한 값을
     // 지워버리기 때문. undefined = "override 안 함"(PassCard의 textColor와 동일 패턴).
+    // 다만 **줬던 값을 거둘 때는** 배경이 정한 값(레지스트리의 theme)으로 되돌린다 — 예전에는
+    // undefined 로 바꿔도 마지막으로 준 색이 CSS 변수에 그대로 남았다.
+    // 배경을 갈면 새 배경이 제 값을 다시 주입하므로 resolvedBg 가 바뀔 때도 다시 덮는다.
+    const overriddenRef = useRef({ title: false, description: false });
     useLayoutEffect(() => {
         const el = rootRef.current;
         if (!el)
             return;
-        if (titleColor !== undefined)
-            el.style.setProperty('--promo-banner-bg-title', titleColor);
-        if (descriptionColor !== undefined)
-            el.style.setProperty('--promo-banner-bg-description', descriptionColor);
-    }, [titleColor, descriptionColor]);
+        const theme = getPromoBannerBgTheme(el);
+        const apply = (key, name, value) => {
+            if (value !== undefined) {
+                el.style.setProperty(name, value);
+                overriddenRef.current[key] = true;
+            }
+            else if (overriddenRef.current[key]) {
+                const fallback = theme?.[key];
+                if (fallback)
+                    el.style.setProperty(name, fallback);
+                else
+                    el.style.removeProperty(name);
+                overriddenRef.current[key] = false;
+            }
+        };
+        apply('title', '--promo-banner-bg-title', titleColor);
+        apply('description', '--promo-banner-bg-description', descriptionColor);
+    }, [titleColor, descriptionColor, resolvedBg]);
     // 배경(Bg)이 자신의 useLayoutEffect에서 레지스트리에 theme을 주입한 뒤 읽는다(PassCard의
     // logoColor와 동일 패턴) — 배경마다 다른 기본 버튼 variant를 PromoBannerBg* 파일이 직접 갖는다.
     useLayoutEffect(() => {

package/dist/packages/core/src/components/RadioGroup.d.ts

@@ -16,6 +16,8 @@ export interface RadioGroupProps {
     disabled?: boolean;
     direction?: RadioGroupDirection;
     className?: string;
+    /** 묶음의 이름 — 낭독기가 "무엇을 고르는 라디오 묶음" 인지 읽는다. 보이는 제목이 따로 있어도 이어지지 않으면 준다. */
+    ariaLabel?: string;
 }
 /** @public */
-export default function RadioGroup({ options, value, onChange, name, disabled, direction, className, }: RadioGroupProps): import("react").JSX.Element;
+export default function RadioGroup({ options, value, onChange, name, disabled, direction, className, ariaLabel, }: RadioGroupProps): import("react").JSX.Element;

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

@@ -4,10 +4,10 @@ import { useId } from 'react';
 import Radio from './Radio';
 import './RadioGroup.css';
 /** @public */
-export default function RadioGroup({ options, value, onChange, name, disabled = false, direction = 'vertical', className = '', }) {
+export default function RadioGroup({ options, value, onChange, name, disabled = false, direction = 'vertical', className = '', ariaLabel, }) {
     const autoId = useId();
     const groupName = name ?? `radio-group-${autoId}`;
-    return (_jsx("div", { className: `radio-group radio-group--${direction} ${className}`.trim(), role: "radiogroup", children: options.map(option => (_jsx(Radio, { name: groupName, value: option.value, checked: value === option.value, disabled: disabled || option.disabled, label: option.label, onChange: checked => {
+    return (_jsx("div", { className: `radio-group radio-group--${direction} ${className}`.trim(), role: "radiogroup", "aria-label": ariaLabel, children: options.map(option => (_jsx(Radio, { name: groupName, value: option.value, checked: value === option.value, disabled: disabled || option.disabled, label: option.label, onChange: checked => {
                 if (checked)
                     onChange?.(option.value);
             } }, option.value))) }));

package/dist/packages/core/src/components/Report/ReportDocument.d.ts

@@ -54,7 +54,10 @@ export interface ReportDocumentProps {
  * 바닥(로고·저작권 + 쪽 번호)이 반복된다.
  *
  * 재는 방식이라 글꼴이 늦게 오거나 이미지가 나중에 뜨면 쪽이 밀릴 수 있다.
- * 그 경우 `blocks` 를 그대로 두고 다시 그리면 다시 잰다.
+ * 다시 재는 때는 블록들의 `id`·`section`·`group` 구성이 바뀔 때와 처음 그릴 때뿐이다 —
+ * 같은 구성으로 다시 그리거나 `content` 만 바뀌어서는 다시 재지 않는다(렌더마다 재면
+ * 재기 → 쪽 나눔 → 렌더가 끝없이 돈다). 글꼴·이미지가 다 온 뒤 다시 재야 하면
+ * `key` 를 바꿔 새로 붙인다.
  *
  * 화면에 그린 쪽 수는 다른 도구로 만든 PDF 와 다를 수 있다. 같은 내용을 그리는
  * 높이가 서로 달라서인데, 쪽 수까지 맞춰야 하면 양쪽 본문 높이를 견줘야 한다.

package/dist/packages/core/src/components/Report/ReportDocument.js

@@ -15,7 +15,10 @@ const DEFAULT_PAGE_LABEL = (page, total) => `${page} / ${total}`;
  * 바닥(로고·저작권 + 쪽 번호)이 반복된다.
  *
  * 재는 방식이라 글꼴이 늦게 오거나 이미지가 나중에 뜨면 쪽이 밀릴 수 있다.
- * 그 경우 `blocks` 를 그대로 두고 다시 그리면 다시 잰다.
+ * 다시 재는 때는 블록들의 `id`·`section`·`group` 구성이 바뀔 때와 처음 그릴 때뿐이다 —
+ * 같은 구성으로 다시 그리거나 `content` 만 바뀌어서는 다시 재지 않는다(렌더마다 재면
+ * 재기 → 쪽 나눔 → 렌더가 끝없이 돈다). 글꼴·이미지가 다 온 뒤 다시 재야 하면
+ * `key` 를 바꿔 새로 붙인다.
  *
  * 화면에 그린 쪽 수는 다른 도구로 만든 PDF 와 다를 수 있다. 같은 내용을 그리는
  * 높이가 서로 달라서인데, 쪽 수까지 맞춰야 하면 양쪽 본문 높이를 견줘야 한다.

package/dist/packages/core/src/components/Section.d.ts

@@ -5,6 +5,12 @@ export type SectionType = 'page' | 'pagePopup' | 'popup';
 export interface SectionProps {
     type?: SectionType;
     title?: ReactNode;
+    /**
+     * 제목을 이 단계의 제목 태그(`h1`~`h6`)로 그린다 — **주는 것을 권한다.** 페이지 제목 아래 구획이면 2, 그 아래면 3 처럼 문서의 제목 순서에 맞춰 주면 낭독기의 제목 목록으로 이 구획에 바로 갈 수 있다.
+     *
+     * 주지 않으면 `div` 로 그려 제목 목록에 안 나온다. 글자 모양은 어느 쪽이든 `type` 이 정한다.
+     */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
     icon?: string;
     action?: ReactNode;
     disc?: ReactNode;
@@ -13,4 +19,4 @@ export interface SectionProps {
     style?: CSSProperties;
 }
 /** @public */
-export default function Section({ type, title, icon, action, disc, children, className, style }: SectionProps): import("react").JSX.Element;
+export default function Section({ type, title, headingLevel, icon, action, disc, children, className, style }: SectionProps): import("react").JSX.Element;

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

@@ -8,8 +8,12 @@ const TITLE_CLASS = {
     popup: 'h5',
 };
 /** @public */
-export default function Section({ type = 'page', title, icon, action, disc, children, className, style }) {
+export default function Section({ type = 'page', title, headingLevel, icon, action, disc, children, className, style }) {
     const titleClass = TITLE_CLASS[type];
     const hasHeader = title || disc;
-    return (_jsxs("div", { className: cx('section', `section--${type}`, className), style: style, children: [hasHeader && (_jsxs("div", { className: "section__header", children: [_jsxs("div", { className: "section__title-row", children: [icon && (_jsx(Icon, { icon: icon, label: typeof title === 'string' ? title : undefined, className: "section__icon" })), _jsxs("div", { className: "section__title-group", children: [title && _jsx("div", { className: `section__title ${titleClass}`, children: title }), disc && _jsx("div", { className: "section__disc body-3", children: disc })] })] }), action && _jsx("div", { className: "section__action", children: action })] })), children] }));
+    /* 제목이 맨 div 라 낭독기의 제목 목록에 안 잡혔다. 단계는 페이지 구조에 달려 있어
+       부르는 쪽이 정한다 — 안 주면 예전 그대로 div. 모양은 클래스(h3/h4/h5)가 정하고
+       제목 태그의 기본 여백은 .section__title 의 margin:0 이 지운다. */
+    const TitleTag = headingLevel ? `h${headingLevel}` : 'div';
+    return (_jsxs("div", { className: cx('section', `section--${type}`, className), style: style, children: [hasHeader && (_jsxs("div", { className: "section__header", children: [_jsxs("div", { className: "section__title-row", children: [icon && (_jsx(Icon, { icon: icon, label: typeof title === 'string' ? title : undefined, className: "section__icon" })), _jsxs("div", { className: "section__title-group", children: [title && _jsx(TitleTag, { className: `section__title ${titleClass}`, children: title }), disc && _jsx("div", { className: "section__disc body-3", children: disc })] })] }), action && _jsx("div", { className: "section__action", children: action })] })), children] }));
 }

package/dist/packages/core/src/components/Table.d.ts

@@ -83,7 +83,7 @@ export type TableProps<T extends {
     headerActions?: ReactNode;
     /** 행이 없을 때 body 영역에 표시할 콘텐츠 */
     empty?: ReactNode;
-    /** true면 rows/empty 대신 스피너 표시 (fields 헤더도 숨김) */
+    /** true면 rows/empty 대신 스피너 표시. 제목 머리와 fields 머리는 그대로 둔다. */
     loading?: boolean;
     /** 드래그 오버 강조 */
     dragOver?: boolean;

package/dist/packages/core/src/components/TextField.css

@@ -55,7 +55,8 @@
   opacity: 0.5;
   cursor: not-allowed;
 }
-/* 읽기 전용은 클릭·포커스·텍스트 선택 불가, 보더 제거 */
+/* 읽기 전용은 마우스 클릭·텍스트 선택 불가, 보더 제거.
+   키보드 포커스(Tab)는 닿는다 — 값을 낭독기로 들을 수 있어야 한다(TextField.tsx 참고). */
 .text-field--readonly .text-field__input {
   pointer-events: none;
   user-select: none;

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

@@ -95,7 +95,9 @@ export default function TextField(props) {
         disabled,
         readOnly,
         autoFocus,
-        tabIndex: readOnly ? -1 : undefined,
+        /* readOnly 칸도 Tab 으로 닿는다 — 예전에는 tabIndex -1 이라 키보드·낭독기 사용자가
+           폼을 Tab 으로 지나며 값(이메일·업체아이디 같은 고칠 수 없는 값)을 들을 길이 없었다.
+           고칠 수 없는 것은 readOnly 가 이미 막는다. 마우스 반응 없음은 CSS 가 그대로 맡는다. */
         maxLength,
         list,
         inputMode,
@@ -129,7 +131,13 @@ export default function TextField(props) {
                 combobox.handleBlur();
         }),
         onKeyDown: ((e) => {
-            if (onEnter && e.key === 'Enter' && !e.nativeEvent.isComposing) {
+            /* 후보를 가리킨 채 누른 Enter 는 **후보를 고르는** 키다(아래 combobox.handleKeyDown
+               과 같은 조건). 예전에는 그 Enter 가 onEnter 까지 불러, 후보를 고르는 순간 검색·제출이
+               한 번 더 나갔다. 고르는 Enter 는 폼 제출도 막는다. */
+            const 후보고르는엔터 = !!suggestions && e.key === 'Enter' && !e.nativeEvent.isComposing && combobox.activeIdx >= 0;
+            if (후보고르는엔터)
+                e.preventDefault();
+            else if (onEnter && e.key === 'Enter' && !e.nativeEvent.isComposing) {
                 e.preventDefault();
                 onEnter();
             }

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

@@ -3,5 +3,8 @@ import './Toggle.css';
 /** @public */
 export default function Toggle({ checked, onChange, disabled = false, label, ariaLabel, labelPosition = 'right', className = '', id }) {
     const labelNode = label && _jsx("span", { className: "toggle__label body-3", children: label });
-    return (_jsxs("label", { className: `toggle${disabled ? ' toggle--disabled' : ''} ${className}`.trim(), children: [labelPosition === 'left' && labelNode, _jsx("input", { id: id, type: "checkbox", checked: checked, disabled: disabled, onChange: e => onChange?.(e.target.checked), "aria-label": !label && ariaLabel ? ariaLabel : undefined }), _jsx("span", { className: "toggle__slider" }), labelPosition === 'right' && labelNode] }));
+    return (_jsxs("label", { className: `toggle${disabled ? ' toggle--disabled' : ''} ${className}`.trim(), children: [labelPosition === 'left' && labelNode, _jsx("input", { id: id, type: "checkbox", 
+                /* 켜고 끄는 스위치다 — 체크박스로 읽히면 "선택됨/선택 안 됨" 이라 무엇이 켜졌는지가 흐려진다.
+                   role="switch" 면 낭독기가 "켬/끔" 으로 읽는다(input 은 그대로라 폼·label 연결은 같다). */
+                role: "switch", checked: checked, disabled: disabled, onChange: e => onChange?.(e.target.checked), "aria-label": !label && ariaLabel ? ariaLabel : undefined }), _jsx("span", { className: "toggle__slider" }), labelPosition === 'right' && labelNode] }));
 }

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

@@ -3,12 +3,7 @@ import './DebugTooltip.css';
 /**
  * 결과 팝업을 실제 훈련 없이 열어보는 개발용 단추 넷.
  *
- * 예전에는 파일 안의 `const DEBUG = false` 로만 켤 수 있었다. 모노레포 시절에는
- * packages/core 를 그 자리에서 고칠 수 있었으니 말이 됐는데, **패키지로 분리되면서
- * 켤 방법이 사라졌다** — 소비자가 node_modules 를 고치지 않는 한 언제나 null 이다.
- * 실제로 speechear-v2 가 이것을 렌더하고 있고, 아무것도 그려지지 않는다.
- *
- * 그래서 스위치를 밖으로 낸다. 기본값은 그대로 꺼짐이라 지금 쓰는 곳은 안 바뀐다.
+ * `enabled` 를 주어야 단추가 선다. 기본은 꺼짐이다.
  *
  * @example
  * <DebugResultLauncher enabled={import.meta.env.DEV} renderResultPopup={…} />

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

@@ -1,16 +1,12 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 import './DebugTooltip.css';
 /**
  * 결과 팝업을 실제 훈련 없이 열어보는 개발용 단추 넷.
  *
- * 예전에는 파일 안의 `const DEBUG = false` 로만 켤 수 있었다. 모노레포 시절에는
- * packages/core 를 그 자리에서 고칠 수 있었으니 말이 됐는데, **패키지로 분리되면서
- * 켤 방법이 사라졌다** — 소비자가 node_modules 를 고치지 않는 한 언제나 null 이다.
- * 실제로 speechear-v2 가 이것을 렌더하고 있고, 아무것도 그려지지 않는다.
- *
- * 그래서 스위치를 밖으로 낸다. 기본값은 그대로 꺼짐이라 지금 쓰는 곳은 안 바뀐다.
+ * `enabled` 를 주어야 단추가 선다. 기본은 꺼짐이다.
  *
  * @example
  * <DebugResultLauncher enabled={import.meta.env.DEV} renderResultPopup={…} />
@@ -18,6 +14,7 @@ import './DebugTooltip.css';
  * @public
  */
 export default function DebugResultLauncher({ enabled = false, renderResultPopup } = {}) {
+    const { t } = useTranslation();
     const [openType, setOpenType] = useState(null);
     const [payload, setPayload] = useState(null);
     const openPopup = (type) => {
@@ -82,7 +79,7 @@ export default function DebugResultLauncher({ enabled = false, renderResultPopup
     // 훅 규칙 준수를 위해 모든 훅 호출 뒤에서 분기한다 — 위 훅들은 언제나 같은 수만큼 돈다.
     if (!enabled)
         return null;
-    return (_jsxs("div", { className: "debug-result-launcher", children: [_jsxs("div", { className: "debug-buttons", children: [_jsx("button", { className: "debug-button", onClick: handleNoisePopup, children: "Noise \uACB0\uACFC\uBCF4\uAE30" }), _jsx("button", { className: "debug-button", onClick: handleShortPopup, children: "ShortStory \uACB0\uACFC\uBCF4\uAE30" }), _jsx("button", { className: "debug-button", onClick: handleLongPopup, children: "LongStory \uACB0\uACFC\uBCF4\uAE30" }), _jsx("button", { className: "debug-button", onClick: handleOrderPopup, children: "Order \uACB0\uACFC\uBCF4\uAE30" })] }), openType && payload ? renderResultPopup?.({
+    return (_jsxs("div", { className: "debug-result-launcher", children: [_jsxs("div", { className: "debug-buttons", children: [_jsx("button", { type: "button", className: "debug-button", onClick: handleNoisePopup, children: t('debug.showResult', { type: 'Noise', defaultValue: '{{type}} 결과보기' }) }), _jsx("button", { type: "button", className: "debug-button", onClick: handleShortPopup, children: t('debug.showResult', { type: 'ShortStory', defaultValue: '{{type}} 결과보기' }) }), _jsx("button", { type: "button", className: "debug-button", onClick: handleLongPopup, children: t('debug.showResult', { type: 'LongStory', defaultValue: '{{type}} 결과보기' }) }), _jsx("button", { type: "button", className: "debug-button", onClick: handleOrderPopup, children: t('debug.showResult', { type: 'Order', defaultValue: '{{type}} 결과보기' }) })] }), openType && payload ? renderResultPopup?.({
                 score: payload.score,
                 contextsLength: payload.contextsLength,
                 results: payload.results,

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

@@ -181,6 +181,11 @@ export default function Tooltip(props) {
     // 불렸다. ref 로 "이미 닫는 중"을 즉시 표시해 한 번만 지나가게 한다(Popup 과 같은 방식).
     const closingRef = useRef(false);
     const startClose = useCallback((immediate = false) => {
+        /* 닫기를 넘길 곳(onClose)이 없으면 아무것도 하지 않는다. 예전에는 그래도 is-closing 을
+           붙여, 부모가 치우지 않는 툴팁이 **흐려진 채 사라진 것처럼** 그 자리에 남았다
+           (Esc 한 번에 추천 툴팁·상태 툴팁이 반투명으로 굳었다). */
+        if (!onClose)
+            return;
         if (closing || closingRef.current)
             return;
         closingRef.current = true;
@@ -201,6 +206,11 @@ export default function Tooltip(props) {
         }, 200);
     }, [closing, onClose, setClosing]);
     useEffect(() => {
+        /* 제자리(글 흐름 안)에 그린 툴팁은 떠 있는 층이 아니라 본문의 한 조각이다 — document 의
+           바깥 누름·Esc·Tab 을 듣지 않는다. 들으면 화면 아무 데나 누르거나 Esc 를 칠 때마다
+           늘어놓은 툴팁이 한꺼번에 닫히고, 마지막 칸에서 Tab 이 본문으로 못 나가고 되감긴다. */
+        if (isInline)
+            return;
         const handlePointerDown = (e) => {
             const el = ref.current;
             if (!el)
@@ -274,7 +284,7 @@ export default function Tooltip(props) {
             document.removeEventListener('click', handleClickCapture, true);
             document.removeEventListener('keydown', handleKeyDown);
         };
-    }, [onClose, closeOnOutsideClick, startClose]);
+    }, [onClose, closeOnOutsideClick, startClose, isInline]);
     // Allow external callers to force-close all tooltips by dispatching
     // a `speechear-close-tooltips` CustomEvent on `document`.
     useEffect(() => {

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

@@ -120,9 +120,9 @@ export default function WaveForm(props) {
         return () => { cancelled = true; };
     }, [noiseSrc, barsTotal, totalDuration, noiseSpeed]);
     /* eslint-enable react-hooks/set-state-in-effect */
-    // **그림의 눈금은 "문장 = 기준"** — 소리 셈(문제 소리 = M×min(1,1/R))과 달리 문장을 줄이지 않고
-    // 소음을 R 배로 키워 비율을 보인다. 막대 크기 a: 문장 = peak/문장최고치 × 전체 소리(M),
-    // 소음 = 같은 분모 × M × 소음 비율(R). a → 픽셀은 구간별 눈금(waveScale — 1 까지 45px, 2 에 74px).
+    // **그림의 눈금은 소리 셈과 같다**(NoisePlayerContext) — 문제 소리 = M, 소음 = M × R. 문장은 비율과 상관없이
+    // 줄이지 않는다. 막대 크기 a: 문장 = peak/문장최고치 × 전체 소리(M), 소음 = 같은 분모 × M × 소음 비율(R) ÷ gain
+    // (봉우리를 gain 배 키운 파일에서 뽑으므로 되돌린다 — 아래 noiseAmp). a → 픽셀은 구간별 눈금(waveScale — 1 까지 45px, 2 에 74px).
     const mainAmp = Math.max(0, Math.min(1, mainVolume));
     const sentenceMaxPeak = useMemo(() => (wavePeaks && wavePeaks.length) ? (Math.max(...wavePeaks) || 1) : 1, [wavePeaks]);
     const barsCountForMix = barsTotal || 40;

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

@@ -14,19 +14,24 @@ export interface TrainingBlockProps {
     type?: TrainingTypeDescriptor;
     trainingDatas?: TrainingItem[] | unknown[];
     depth?: string | string[];
+    /**
+     * @deprecated 쓰이지 않는다 — 한 번에 보이는 카드 수는 20개로 고정이고 나머지는 '더보기'로 20개씩 늘린다.
+     * 소비처가 항목 수(`trainingDatas.length`)를 넘기고 있어, 이 값을 페이지 크기로 살리면 20개 끊기가 사라진다.
+     */
     count?: number;
     /** 버튼 클릭 시 열릴 팝업 렌더링 함수. TrainingBlockButton의 renderPopup과 동일. */
     renderPopup?: (props: TrainingBlockButtonPopupProps) => ReactNode;
     /** 오늘 완료된 훈련 항목 ID Set. completedIds에 포함된 항목은 완료 상태로 표시됩니다. */
     completedIds?: Set<string>;
-    /** 선택 상태 ID Set. 완료 뱃지 없이 테두리 강조만 표시. */
+    /** 선택 상태 ID Set. 포함된 항목(완료가 아닌 것)에 체크 배지를 표시 — 완료와 같은 배지다. */
     selectedIds?: Set<string>;
     /** 훈련 항목 완료 시 호출되는 콜백. itemId는 완료된 TrainingItem의 id입니다. */
     onItemComplete?: (itemId: string) => void;
     /**
      * 버튼 레이아웃 크기.
-     * - `square` (기본값): 200×200px 정사각형 카드
-     * - `list`: 전체 너비 × 80px 가로형 리스트 항목
+     * - `square` (기본값): 200×200px 정사각형 카드(좁은 화면에선 190px·반 폭으로 줄어든다)
+     * - `small`: 120×120px 축소 카드
+     * - `list`: 너비 200px · 최소 높이 68px 가로형 항목
      */
     size?: 'square' | 'list' | 'small';
     /** true 이면 버튼 호버 시 DescriptionTooltip 으로 문제 텍스트를 표시. 기본값 false. */

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

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useState } from "react";
 import { useTranslation } from 'react-i18next';
 import Button from '../Button';
 import "./TrainingStep.css";
@@ -15,16 +15,15 @@ export default function TrainingStepConfirmWithText({ index, stepIndex, isLast =
     const sentence = context && typeof context === 'object' ? (context.sentence || '') : (typeof context === 'string' ? context : '');
     const choices = context && typeof context === 'object' ? context.choices : undefined;
     const [selectedAnswer, setSelectedAnswer] = useState(demoSelected ?? null);
-    useEffect(() => {
-        // 데모 강제 선택 시에는 sentence 변경 리셋을 건너뜀
-        if (demoSelected != null)
-            return undefined;
-        if (selectedAnswer !== null) {
-            const id = setTimeout(() => setSelectedAnswer(null), 0);
-            return () => clearTimeout(id);
-        }
-        return undefined;
-    }, [sentence, demoSelected, selectedAnswer]);
+    // 문장이 **바뀔 때만** 선택을 푼다(렌더 중 상태 조정). 예전 effect 는 selectedAnswer 를 의존성에 두고
+    // "null 이 아니면 null 로" 를 해서, 답을 누르면 한 박자 뒤 강조가 곧바로 사라졌다.
+    // 데모 강제 선택 시에는 문장 변경 리셋을 건너뛴다.
+    const [prevSentence, setPrevSentence] = useState(sentence);
+    if (prevSentence !== sentence) {
+        setPrevSentence(sentence);
+        if (demoSelected == null)
+            setSelectedAnswer(null);
+    }
     const handleEndedLocal = useCallback((payload) => {
         const p = (typeof payload === 'object' && payload !== null)
             ? Object.assign({}, payload, { __ts: Date.now() })

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

@@ -37,15 +37,15 @@ export interface TrainingBlockButtonProps {
     completed?: boolean;
     /**
      * 버튼 레이아웃 크기.
-     * - `square` (기본값): 200×200px 정사각형 카드
+     * - `square` (기본값): 200×200px 정사각형 카드(좁은 화면에선 190px·반 폭으로 줄어든다)
      * - `small`: 120×120px 축소 카드 (행 펼치기 영역 등 좁은 공간용)
-     * - `list`: 전체 너비 × 60px 가로형 리스트 항목
-     * - `compact`: 툴팁 등 좁은 공간용 소형 리스트 항목 (44px, 아이콘 24px)
+     * - `list`: 너비 200px · 최소 높이 68px 가로형 항목
+     * - `compact`: 툴팁 등 좁은 공간용 소형 리스트 항목 (전체 너비 × 높이 40px, 작은 아이콘)
      */
     size?: 'square' | 'small' | 'list' | 'compact';
     renderPopup?: (props: TrainingBlockButtonPopupProps) => ReactNode;
     completedIds?: Set<string>;
-    /** 선택 상태 ID Set. 완료 뱃지 없이 테두리 강조만 표시. */
+    /** 선택 상태 ID Set. 포함된 항목(완료가 아닌 것)에 체크 배지를 표시 — 완료와 같은 배지이고, `hideCheckBadge` 면 숨는다. */
     selectedIds?: Set<string>;
     /** 호버 시 표시할 문제/문장 텍스트. 제공 시 DescriptionTooltip 으로 렌더. */
     tooltipText?: string | string[];

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

@@ -10,10 +10,14 @@ import type { ReactNode } from 'react';
  * 리액트가 다른 것을 같은 것으로 보고 상태를 잘못 물려준다. 그래서 **주어진 이름이
  * 있으면 반드시 그것을 쓴다**는 게 이 함수들의 약속이다.
  */
-/** @public */
+/**
+ * @public 시나리오의 한 쪽. `steps` 는 시나리오(`scenario.pages`)에서는 **ScenarioStep 객체**다 — 팝업이
+ * 그것을 `ScenarioStep` 으로 읽는다(key·type·props). 자식 요소(`<Page>`)로 쪽을 짠 경우에만 팝업이 안에서
+ * 단계 요소(ReactNode)를 담는다.
+ */
 export type ScenarioPage = {
     id?: string;
-    steps?: ReactNode[];
+    steps?: ScenarioStep[] | ReactNode[];
     pageTop?: ReactNode | null;
     pageBottom?: ReactNode | null;
 } & Record<string, unknown>;

package/dist/packages/core/src/components/Word/WordSearchResultBlock.js

@@ -36,7 +36,9 @@ export default function WordSearchResultBlock({ titleIcon, resultCount, resultUn
     const rawQuery = (searchQuery ?? '').trim();
     const q = /^[^,[\]\s]+$/.test(rawQuery) ? rawQuery : '';
     const hasQuery = q.length > 0;
-    const [sortKey, setSortKey] = useState('ganada');
+    // 첫 렌더에 이미 검색어가 있어도 '시작 우선'으로 시작한다 — 아래 조정은 검색어 유무가 **바뀔 때**만 돌아서,
+    // 초깃값을 'ganada' 로 고정하면 검색어를 들고 마운트한 화면은 가나다순에 머물렀다.
+    const [sortKey, setSortKey] = useState(() => (hasQuery ? 'match' : 'ganada'));
     const [pageSizeStr, setPageSizeStr] = useState('50');
     const [page, setPage] = useState(1);
     // 검색어 유무가 바뀌면 그에 맞는 기본 정렬로 되돌린다(렌더 중 상태 조정).

package/dist/packages/core/src/components/Word/WordTableBlock.js

@@ -18,6 +18,7 @@ import { useToastState } from '../../hooks/useToastState';
 import { getImageResolver, checkImageExists } from '../../utils/imageConfig';
 import { formatYmd, getTodayKst } from '../../utils/date';
 import { getSavedTables } from '../../utils/savedWordTables';
+import { devWarnOnce } from '../../utils/devWarn';
 import { useWordTablePrint } from './useWordTablePrint';
 import { CELL_COUNTS } from './wordTableBlockTypes';
 // ── 컴포넌트 ───────────────────────────────────────────────
@@ -73,6 +74,11 @@ export default function WordTableBlock({ title, titleIcon, disc, items, onSaveCo
     // 토스트
     const { toastMessage, toastType, showWarning, clearToast } = useToastState('warning');
     const handleCloseWordSearch = useCallback(() => setActiveCell(null), [setActiveCell]);
+    /* onAddItem 의 "추가하기" 는 빈 칸에 선다 — 표시 모드에서 빈 칸은 showCellCount 로 칸 수를 늘릴 때만 생긴다.
+       둘을 함께 주지 않으면 아무것도 안 떠서 조용히 헛돈다. */
+    if (onAddItem && !isEditable && !showCellCount) {
+        devWarnOnce('word-table-block-add-without-cell-count', '[WordTableBlock] 표시 모드에서 onAddItem 은 showCellCount 와 함께 줘야 "추가하기" 칸이 생긴다.');
+    }
     // display 모드에서 칸 수 조절용 상태 (showCellCount일 때만 사용)
     const [displayCellCount, setDisplayCellCount] = useState(() => Math.max(items?.length ?? 1, 1));
     /* eslint-disable react-hooks/set-state-in-effect */

package/dist/packages/core/src/components/Word/WordTableButton.d.ts

@@ -13,11 +13,11 @@ export interface WordTableButtonProps {
     createdAt?: string;
     /** 스토어 발행 배지 표시 */
     published?: boolean;
-    /** 발행 배지 라벨(i18n 주입) */
+    /** 발행 배지 라벨. 없으면 사전 `myWordTable.publishedBadge`(기본 '발행됨'). */
     publishedLabel?: string;
     /** 활성 공유 링크 존재 배지 표시(썸네일 우상단) */
     shared?: boolean;
-    /** 공유 배지 라벨(i18n 주입) */
+    /** 공유 배지 라벨. 없으면 사전 `myWordTable.sharedBadge`(기본 '공유 중'). */
     sharedLabel?: string;
     /** 최근 생성·미열람 표 표시 — 우상단 원형 배지(circle badge) */
     isNew?: boolean;

package/dist/packages/core/src/components/Word/WordTableButton.js

@@ -24,5 +24,5 @@ export default function WordTableButton({ items, name, description, createdAt, p
     return (_jsxs("div", { className: cx('word-table-button', selected ? 'word-table-button--selected' : '', !hasStoreFooter ? 'word-table-button--no-footer' : '', className), role: "button", tabIndex: 0, "aria-label": name, onClick: renaming ? undefined : onClick, onKeyDown: handleKey, children: [isNew && _jsx("span", { className: "word-table-button__new-dot", "aria-label": t('myWordTable.newBadge', '새로 만든 표') }), _jsx(WordTableThumbnail, { items: items, className: "word-table-button__thumb" }), _jsxs("div", { className: "word-table-button__info", children: [_jsxs("div", { className: "word-table-button__info-text", children: [titleNode ?? _jsx("div", { className: "word-table-button__title h4", children: name }), description && _jsx("div", { className: "word-table-button__desc body-3", children: description })] }), onMore && !renaming && (_jsx(Button, { className: "word-table-button__more", size: 32, type: "dot", variant: "transparent-gray", useBorder: false, icon: "ellipsis", 
                         /* 하드코딩 '더보기'였다(영어 화면에서도 한국어로 남았다). 목록에 표가
                            여러 개면 이름이 같은 버튼이 여러 개이기도 해서 이름을 함께 넣는다. */
-                        ariaLabel: t('common.moreFor', { name }), onClick: (e) => { e.stopPropagation(); onMore(e); } }))] }), (createdAt || published || shared) && (_jsxs("div", { className: "word-table-button__meta-row", children: [_jsx("span", { className: "word-table-button__meta caption-1", children: createdAt ? formatRelativeTime(createdAt, t) : '' }), _jsxs("span", { className: "word-table-button__badges", children: [published && (_jsx(Badge, { className: "word-table-button__badge", size: "small", variant: "main", fill: "soft", iconLeft: "book-marked", label: publishedLabel ?? '발행됨' })), shared && (_jsx(Badge, { className: "word-table-button__badge", size: "small", fill: "soft", iconLeft: "link", label: sharedLabel ?? '공유 중' }))] })] })), hasStoreFooter && (_jsxs("div", { className: "word-table-button__footer", children: [_jsxs("span", { className: "word-table-button__store-by", children: [publisherName && (_jsx("button", { className: "training-card__publisher body-4", type: "button", onClick: (e) => { e.stopPropagation(); onPublisherClick?.(); }, children: publisherName })), publishedAt && _jsx("span", { className: "training-card__date body-4", children: formatRelativeTime(publishedAt, t) })] }), _jsxs("span", { className: "word-table-button__store-stats", children: [likeCount != null && _jsx(Badge, { size: "small", fill: "soft", variant: "like", iconLeft: "heart", label: String(likeCount) }), downloadCount != null && _jsx(Badge, { size: "small", fill: "soft", variant: "main", iconLeft: "download", label: String(downloadCount) })] })] }))] }));
+                        ariaLabel: t('common.moreFor', { name }), onClick: (e) => { e.stopPropagation(); onMore(e); } }))] }), (createdAt || published || shared) && (_jsxs("div", { className: "word-table-button__meta-row", children: [_jsx("span", { className: "word-table-button__meta caption-1", children: createdAt ? formatRelativeTime(createdAt, t) : '' }), _jsxs("span", { className: "word-table-button__badges", children: [published && (_jsx(Badge, { className: "word-table-button__badge", size: "small", variant: "main", fill: "soft", iconLeft: "book-marked", label: publishedLabel ?? t('myWordTable.publishedBadge', '발행됨') })), shared && (_jsx(Badge, { className: "word-table-button__badge", size: "small", fill: "soft", iconLeft: "link", label: sharedLabel ?? t('myWordTable.sharedBadge', '공유 중') }))] })] })), hasStoreFooter && (_jsxs("div", { className: "word-table-button__footer", children: [_jsxs("span", { className: "word-table-button__store-by", children: [publisherName && (_jsx("button", { className: "training-card__publisher body-4", type: "button", onClick: (e) => { e.stopPropagation(); onPublisherClick?.(); }, children: publisherName })), publishedAt && _jsx("span", { className: "training-card__date body-4", children: formatRelativeTime(publishedAt, t) })] }), _jsxs("span", { className: "word-table-button__store-stats", children: [likeCount != null && _jsx(Badge, { size: "small", fill: "soft", variant: "like", iconLeft: "heart", label: String(likeCount) }), downloadCount != null && _jsx(Badge, { size: "small", fill: "soft", variant: "main", iconLeft: "download", label: String(downloadCount) })] })] }))] }));
 }

package/dist/packages/core/src/components/Word/wordTableBlockTypes.d.ts

@@ -53,7 +53,7 @@ export interface WordTableBlockProps {
     onReorder?: (fromIndex: number, toIndex: number) => void;
     /** display 모드에서도 칸 수 조절 허용 */
     showCellCount?: boolean;
-    /** display 모드에서 빈 슬롯에 추가하기 버튼 표시 */
+    /** display 모드에서 칸 수 안의 빈 칸에 추가하기 버튼 표시 → `renderWordSearch` 로 고른 첫 낱말을 새 항목으로 넘긴다. 칸 수는 `showCellCount` 로만 늘릴 수 있어 **함께 줘야** 빈 칸이 생긴다(없으면 칸 수 = 항목 수라 단추가 뜰 자리가 없다). */
     onAddItem?: (item: WordSearchResultItem) => void;
     className?: string;
     /** 저장 팝업 렌더러 */

package/dist/packages/core/src/components/Word/wordTableScoring.d.ts

@@ -38,13 +38,10 @@ export declare function markAfterClick(current: ScoreMark | null, clicked: Score
 /** 표시마다 쓰는 아이콘 이름(lucide). 저장소가 쓰는 아이콘 체계를 그대로 따른다. */
 export declare const MARK_ICON: Record<ScoreMark, string>;
 /**
- * 표시마다 쓰는 단추 변형.
+ * 고른 표시의 단추 변형(○ main · △ warn · ✕ danger).
  *
  * **모양(아이콘)이 이미 셋을 가르고 색은 거들 뿐이다** — 색만으로 구분하게 두면
  * 색을 잘 못 가리는 사람에게는 세 표시가 같아진다.
- */
-/**
- * 고른 표시의 단추 변형.
  *
  * △ 는 `sub`(청록)였는데 **파랑 옆에서 '좋음' 계열로 읽혔다** — ○ 와 △ 가 나란히
  * 있으면 둘 다 통과한 것처럼 보인다. 애매함은 주의색이 맞다.

package/dist/packages/core/src/components/Word/wordTableScoring.js

@@ -44,13 +44,10 @@ export const MARK_ICON = {
     x: 'x',
 };
 /**
- * 표시마다 쓰는 단추 변형.
+ * 고른 표시의 단추 변형(○ main · △ warn · ✕ danger).
  *
  * **모양(아이콘)이 이미 셋을 가르고 색은 거들 뿐이다** — 색만으로 구분하게 두면
  * 색을 잘 못 가리는 사람에게는 세 표시가 같아진다.
- */
-/**
- * 고른 표시의 단추 변형.
  *
  * △ 는 `sub`(청록)였는데 **파랑 옆에서 '좋음' 계열로 읽혔다** — ○ 와 △ 가 나란히
  * 있으면 둘 다 통과한 것처럼 보인다. 애매함은 주의색이 맞다.

package/dist/packages/core/src/components/WordTable.d.ts

@@ -30,7 +30,7 @@ export interface WordTableProps {
     onRemoveItem?: (id: string) => void;
     /** 표시 항목 드래그 재정렬 */
     onReorder?: (fromIndex: number, toIndex: number) => void;
-    /** 표시 모드 빈칸에 '추가' 버튼 노출 */
+    /** 표시 모드에서 `count` 안의 빈칸(항목 수 뒤 ~ count)에 '추가' 버튼 노출. count 가 항목 수와 같으면 그런 칸이 없다. `onActivateCell` 필요. */
     showFillerAdd?: boolean;
     /** 그리드 콘텐츠 DOM ref — 인쇄/캡처용 */
     contentRef?: Ref<HTMLDivElement>;

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

@@ -171,7 +171,9 @@ export default function WordTable({ title, titleIcon, disc, className, orientati
     const contentClass = cx('word-table-block__content', CUT_CLASS[cutLine], showOutline && 'word-table-block__content--outline', showDivLine && hasPairs && 'word-table-block__content--div-line');
     // 빈칸(추가버튼)은 스케일 역보정으로 실제 크기 유지
     const counterScale = { transform: `scale(${1 / scale})`, transformOrigin: 'center center' };
-    const grid = (_jsx("div", { ref: scalerRef, className: "word-table__scaler", style: { height: height * scale }, children: _jsx("div", { className: cx('word-table', className), style: { width, height, transform: `scale(${scale})`, transformOrigin: 'top left', marginLeft: offset }, children: _jsxs("div", { ref: contentRef, className: contentClass, style: { gridTemplateColumns: `repeat(${cols}, 1fr)`, gridTemplateRows: `repeat(${rows}, 1fr)` }, children: [isEdit ? (_jsx(_Fragment, { children: (editCells ?? []).map((cell, i) => (_jsx("div", { className: cx('word-table-block__edit-cell', cell ? 'word-table-block__edit-cell--filled' : 'word-table-block__edit-cell--empty', activeCell === i ? 'word-table-block__edit-cell--active' : ''), style: dotDashStyle(i, cols, rows, cutLine), children: cell ? (_jsxs(_Fragment, { children: [cell.map((e, wi) => (_jsxs(Fragment, { children: [wi > 0 && _jsx("div", { className: "word-table-block__pair-divider" }), _jsx(WordCell, { label: e.word, subLabel: e.pronunciation, homonum: e.homonum, showWord: show.word, showImage: show.image, showPronunciation: show.pron, showColloquial: show.colloq, buttonSize: buttonSize })] }, wi))), scoring && renderScore(i, cell.map(e => e.word).join(' / ')), onRemoveCell && (_jsx("div", { className: "word-table-block__card-close", children: _jsx(Button, { size: buttonSize, type: "dot", icon: "x", variant: "transparent-lightGray", useBorder: false, showTooltipInfo: cell.length > 1 ? t('wordPrint.removePair', '대립쌍 빼기') : t('wordPrint.removeWord', '단어 빼기'), ariaLabel: cell.length > 1 ? t('wordPrint.removePair', '대립쌍 빼기') : t('wordPrint.removeWord', '단어 빼기'), onClick: () => onRemoveCell(i) }) }))] })) : (onActivateCell && (_jsx("div", { style: counterScale, children: _jsx(Button, { size: "48", type: "bar", icon: "plus", label: t('wordTable.addWord', '추가하기'), onClick: () => onActivateCell(i) }) }))) }, i))) })) : (_jsxs(_Fragment, { children: [(items ?? []).map((item, index) => (_jsxs("div", { className: `word-table-block__card${onReorder ? ' word-table-block__card--draggable' : ''}${dragOver === index ? ' word-table-block__card--drag-over' : ''}`, style: dotDashStyle(index, cols, rows, cutLine), draggable: !!onReorder, onDragStart: onReorder ? () => { dragIndex.current = index; } : undefined, onDragOver: onReorder ? (e) => { e.preventDefault(); setDragOver(index); } : undefined, onDragLeave: onReorder ? () => setDragOver(null) : undefined, onDrop: onReorder ? (e) => { e.preventDefault(); if (dragIndex.current !== null && dragIndex.current !== index) {
+    const grid = (_jsx("div", { ref: scalerRef, className: "word-table__scaler", style: { height: height * scale }, children: _jsx("div", { className: cx('word-table', className), style: { width, height, transform: `scale(${scale})`, transformOrigin: 'top left', marginLeft: offset }, children: _jsxs("div", { ref: contentRef, className: contentClass, style: { gridTemplateColumns: `repeat(${cols}, 1fr)`, gridTemplateRows: `repeat(${rows}, 1fr)` }, children: [isEdit ? (_jsx(_Fragment, { children: (editCells ?? []).map((cell, i) => (_jsx("div", { className: cx('word-table-block__edit-cell', cell ? 'word-table-block__edit-cell--filled' : 'word-table-block__edit-cell--empty', activeCell === i ? 'word-table-block__edit-cell--active' : ''), style: dotDashStyle(i, cols, rows, cutLine), children: cell ? (_jsxs(_Fragment, { children: [cell.map((e, wi) => (_jsxs(Fragment, { children: [wi > 0 && _jsx("div", { className: "word-table-block__pair-divider" }), _jsx(WordCell, { label: e.word, subLabel: e.pronunciation, 
+                                                // 편집 칸도 구어체 발음을 넘긴다 — 빠져 있어 '구어체 발음'을 켜도 편집 모드에서만 비었다.
+                                                colloquialLabel: e.colloquialPronunciation, homonum: e.homonum, showWord: show.word, showImage: show.image, showPronunciation: show.pron, showColloquial: show.colloq, buttonSize: buttonSize })] }, wi))), scoring && renderScore(i, cell.map(e => e.word).join(' / ')), onRemoveCell && (_jsx("div", { className: "word-table-block__card-close", children: _jsx(Button, { size: buttonSize, type: "dot", icon: "x", variant: "transparent-lightGray", useBorder: false, showTooltipInfo: cell.length > 1 ? t('wordPrint.removePair', '대립쌍 빼기') : t('wordPrint.removeWord', '단어 빼기'), ariaLabel: cell.length > 1 ? t('wordPrint.removePair', '대립쌍 빼기') : t('wordPrint.removeWord', '단어 빼기'), onClick: () => onRemoveCell(i) }) }))] })) : (onActivateCell && (_jsx("div", { style: counterScale, children: _jsx(Button, { size: "48", type: "bar", icon: "plus", label: t('wordTable.addWord', '추가하기'), onClick: () => onActivateCell(i) }) }))) }, i))) })) : (_jsxs(_Fragment, { children: [(items ?? []).map((item, index) => (_jsxs("div", { className: `word-table-block__card${onReorder ? ' word-table-block__card--draggable' : ''}${dragOver === index ? ' word-table-block__card--drag-over' : ''}`, style: dotDashStyle(index, cols, rows, cutLine), draggable: !!onReorder, onDragStart: onReorder ? () => { dragIndex.current = index; } : undefined, onDragOver: onReorder ? (e) => { e.preventDefault(); setDragOver(index); } : undefined, onDragLeave: onReorder ? () => setDragOver(null) : undefined, onDrop: onReorder ? (e) => { e.preventDefault(); if (dragIndex.current !== null && dragIndex.current !== index) {
                                     onReorder(dragIndex.current, index);
                                 } ; dragIndex.current = null; setDragOver(null); } : undefined, onDragEnd: onReorder ? () => { dragIndex.current = null; setDragOver(null); } : undefined, children: [item.words.map((w, i) => (_jsxs(Fragment, { children: [i > 0 && _jsx("div", { className: "word-table-block__pair-divider" }), _jsx(WordCell, { label: w.label, subLabel: w.subLabel, colloquialLabel: w.colloquialLabel, homonum: w.homonum, showWord: show.word, showImage: show.image, showPronunciation: show.pron, showColloquial: show.colloq, buttonSize: buttonSize, wordInfo: (w.grade || w.syllables != null || w.pos || w.wordType) ? { grade: w.grade, syllables: w.syllables, pos: w.pos, wordType: w.wordType } : undefined })] }, i))), scoring && renderScore(index, item.words.map(w => w.label).join(' / ')), onRemoveItem && (_jsx("div", { className: "word-table-block__card-close", children: _jsx(Button, { size: buttonSize, type: "dot", icon: "x", variant: "transparent-lightGray", useBorder: false, showTooltipInfo: item.words.length > 1 ? t('wordPrint.removePair', '대립쌍 빼기') : t('wordPrint.removeWord', '단어 빼기'), ariaLabel: item.words.length > 1 ? t('wordPrint.removePair', '대립쌍 빼기') : t('wordPrint.removeWord', '단어 빼기'), onClick: () => onRemoveItem(item.id) }) }))] }, item.id))), Array.from({ length: Math.max(0, cols * rows - (items?.length ?? 0)) }).map((_, i) => {
                                 const isWithinCount = (items?.length ?? 0) + i < cellCount;

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

@@ -202,6 +202,9 @@ export { default as TrainingPagePopup } from './components/Training/TrainingPage
 export { default as TrainingPagePopupBottom } from './components/Training/TrainingPagePopupBottom';
 export { default as NoiseSettingsTooltip } from './components/Training/NoiseSettingsTooltip';
 export type { NoiseSettingsTooltipProps } from './components/Training/NoiseSettingsTooltip';
+export { NoisePlayerContext, useNoisePlayer, DEFAULT_NOISE_SETTINGS, noiseRatioOf, effectiveSpeechVolume, effectiveNoiseVolume, noiseElementVolume, mergeNoiseSettings, NOISE_RATIO_MAX, NOISE_RATIO_STEP, LEVEL_MAX, levelToPct, pctToLevel, } from './components/Training/NoisePlayerContext';
+export type { NoisePlayerContextValue } from './components/Training/NoisePlayerContext';
+export { waveBarPx, waveBarVal, WAVE_H1_PX, WAVE_HMAX_PX, WAVE_A_MAX } from './components/Training/waveScale';
 export { default as TrainingPagePopupTitle } from './components/Training/TrainingPagePopupTitle';
 export { default as FilterPanel, FILTER_ALL_VALUE } from './components/FilterPanel';
 export type { FilterPanelProps, FilterPanelSection, FilterPanelItem } from './components/FilterPanel';

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

@@ -147,6 +147,11 @@ export { default as TrainingStepAudioPlayer } from './components/Training/Traini
 export { default as TrainingPagePopup } from './components/Training/TrainingPagePopup';
 export { default as TrainingPagePopupBottom } from './components/Training/TrainingPagePopupBottom';
 export { default as NoiseSettingsTooltip } from './components/Training/NoiseSettingsTooltip';
+/* 훈련 소리 모델 — 앱이 결과 기록·설정 페이지에서 코어와 **같은 셈**을 써야 해서 딥 경로
+   (`components/Training/NoisePlayerContext`)로 가져가던 것들이다. 배럴에도 연다(딥 경로도 그대로 된다). */
+export { NoisePlayerContext, useNoisePlayer, DEFAULT_NOISE_SETTINGS, noiseRatioOf, effectiveSpeechVolume, effectiveNoiseVolume, noiseElementVolume, mergeNoiseSettings, NOISE_RATIO_MAX, NOISE_RATIO_STEP, LEVEL_MAX, levelToPct, pctToLevel, } from './components/Training/NoisePlayerContext';
+/* 파형 세로 눈금(구간별 — 1배 45px, 2배 74px). 앱이 같은 눈금으로 그림을 그릴 때 쓴다. */
+export { waveBarPx, waveBarVal, WAVE_H1_PX, WAVE_HMAX_PX, WAVE_A_MAX } from './components/Training/waveScale';
 export { default as TrainingPagePopupTitle } from './components/Training/TrainingPagePopupTitle';
 export { default as FilterPanel, FILTER_ALL_VALUE } from './components/FilterPanel';
 export { default as WordTable, WORD_TABLE_PAPER } from './components/WordTable';