@ihabdevteam/core 0.38.0 → 0.39.0

package/dist/ihabdevteam-core.d.ts

@@ -389,6 +389,17 @@ export declare interface BarData {
     parts?: number[];
 }
 
+/**
+ * 패널 **한 줄** — `Panel` 이 담는 그릇이라면 이쪽은 그 안에 서는 줄이다.
+ *
+ * `Panel.tsx` 에서 갈라 나왔다. 한 파일에 컴포넌트 넷(Panel · PanelGrid · PanelRow ·
+ * PanelRowDevice)과 타입 열다섯이 함께 있었는데, 그릇을 고치러 들어온 사람이 줄의
+ * 12갈래 판별 합집합을 지나야 했다. 이 저장소가 이미 쓰는 방식이다
+ * (`trainingStepAudioPlayerTypes.ts` · `audioPlaybackRules.ts`).
+ *
+ * `Panel.tsx` 가 이것들을 다시 내보내므로 `@ihabdevteam/core/components/Panel` 에서
+ * 가져가던 곳은 그대로 돌아간다.
+ */
 declare type Base = {
     label?: string;
     sub?: string;
@@ -527,6 +538,7 @@ export declare function buildDropFinalConsonantProblem(word: string, _comp: Comp
 export declare function buildGradeSection(t: TFunction, keys: WordAttributeFilterKeys, opts?: {
     allLabel?: string;
     labelAction?: ReactNode;
+    labelInfo?: FilterPanelSection['labelInfo'];
 }): FilterPanelSection;
 
 /**
@@ -597,6 +609,7 @@ export declare function buildRemoveConsonantProblem(word: string, _comp: Composi
 export declare function buildSelectSection(t: TFunction, opts?: {
     includeStructure?: boolean;
     labelAction?: ReactNode;
+    labelInfo?: FilterPanelSection['labelInfo'];
 }): FilterPanelSection;
 
 /** 위치 p를 와일드카드('*')로 마스킹한 "나머지 음절이 같은" 2·3음절 실단어 그룹(O(1) 조회). */
@@ -1282,14 +1295,19 @@ export declare function copyText(text: string): Promise<boolean>;
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export declare const CORE_VERSION = "0.38.0";
+export declare const CORE_VERSION = "0.39.0";
 
 /** @public */
 declare const coreDefault: Record<string, unknown>;
 export default coreDefault;
 
-/** @public */
-declare type CoreNoiseSettings = {
+/**
+ * 훈련 화면의 소음/재생 설정. `NoisePlayerContext` 가 들고 다니고
+ * `utils/noiseSettingsStore` 가 앱이 주입한 콜백으로 영속화한다.
+ * 두 계층이 함께 아는 모양이라 여기(아래 계층)에 둔다.
+ * @public
+ */
+export declare type CoreNoiseSettings = {
     enabled: boolean;
     type: CoreNoiseType;
     /** 0–9. 0이면 소음 비활성화. (소음 음원을 +7dB 증폭한 뒤 상한을 4→9로 확장 — 실제 volume = level/9) */
@@ -1302,8 +1320,8 @@ declare type CoreNoiseSettings = {
     mainSpeed: number;
 };
 
-/** @public */
-declare type CoreNoiseType = 'defaultNoise' | 'street' | 'restaurant' | 'buzz';
+/** 소음 음원 갈래. @public */
+export declare type CoreNoiseType = 'defaultNoise' | 'street' | 'restaurant' | 'buzz';
 
 /** @public */
 export declare function CoreScope({ as: Component, className, children, storage, ...rest }: CoreScopeProps): JSX.Element;
@@ -1933,6 +1951,21 @@ export declare interface FilterPanelSection {
     /** 가로 배치에서 이 섹션을 한 줄 전체(자체 줄)로 배치 — 인라인 흐름에서 분리 */
     block?: boolean;
     labelAction?: ReactNode;
+    /**
+     * 라벨 옆 "?" 설명 버튼을 **서술로** 지정한다 — `labelAction` 에 요소를 직접 넣는 대신
+     * 내용만 준다. FilterPanel 이 `FilterSectionInfo` 로 그린다.
+     *
+     * 왜 두 갈래인가: 훅은 화면을 그리면 안 된다. 섹션을 만들어 주는 훅
+     * (`useWordTrainingFilter`)이 예전에는 `createElement(FilterSectionInfo, …)` 로
+     * 요소를 만들었는데, 그러려면 **훅이 컴포넌트를 올려다봐야** 했다. 이 슬롯을 쓰면
+     * 훅은 내용만 넘기고 그리는 일은 컴포넌트가 한다.
+     * `labelAction` 은 그대로 둔다 — 호출부가 제 요소를 넣고 싶을 때가 있다.
+     * 둘 다 있으면 `labelAction` 이 이긴다.
+     */
+    labelInfo?: {
+        title?: string;
+        items: string[];
+    };
     items?: (FilterPanelItem | string)[];
     groups?: (FilterPanelItem | string)[][];
     /** 'note': 선택 불가능한 안내 텍스트 섹션 — content를 그대로 렌더링한다(예: 입력 구문 사용법). */
@@ -8685,6 +8718,13 @@ export declare interface WordTrainingFilterCaps {
 /** @public 훈련 유형이 속한 상위 그룹(카테고리). 앱의 STATIC_TYPE_GROUPS와 동일 분류. */
 declare type WordTrainingGroup = 'discrimination' | 'synthesis' | 'deletion' | 'substitution' | 'attention';
 
+/**
+ * 훈련 갈래 한 줄 — 열쇠와 화면에 보일 이름표.
+ * `hooks/useWordTrainingDataGeneration` 이 만들어 내보내고
+ * `utils/wordTrainingGroups` 가 묶을 때 읽는다. 두 계층이 함께 아는 모양이라
+ * 열쇠 타입이 있는 여기(아래 계층)에 둔다.
+ * @public
+ */
 export declare interface WordTrainingType {
     key: WordTrainingTypeKey;
     label: string;

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

@@ -9,7 +9,7 @@ import MenuTooltip from './Tooltip/MenuTooltip';
 // Tooltip.tsx만 이 CSS를 import하는데 BottomNav는 그 컴포넌트를 거치지 않아,
 // 프로덕션에서 청크가 갈리면 스타일 없이 렌더될 수 있다.
 import './Tooltip/Tooltip.css';
-import { useAnchoredMenu } from './useAnchoredMenu';
+import { useAnchoredMenu } from '../hooks/useAnchoredMenu';
 import { useTranslation } from 'react-i18next';
 const BTN_SIZE = 52;
 const BTN_GAP = 10;

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

@@ -13,7 +13,7 @@ import Calendar from 'lucide-react/dist/esm/icons/calendar.mjs';
 import ChevronLeft from 'lucide-react/dist/esm/icons/chevron-left.mjs';
 import ChevronRight from 'lucide-react/dist/esm/icons/chevron-right.mjs';
 import Dropdown from './Dropdown';
-import { useAnchoredMenu } from './useAnchoredMenu';
+import { useAnchoredMenu } from '../hooks/useAnchoredMenu';
 import { useCalendarMonth } from './useCalendarMonth';
 import { FOCUSABLE_SELECTOR } from '../hooks/useFocusTrap';
 import './DatePicker.css';

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

@@ -4,7 +4,7 @@ import { cx } from '../utils/cx';
 import { useCallback, useEffect, useId, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
-import { useAnchoredMenu } from './useAnchoredMenu';
+import { useAnchoredMenu } from '../hooks/useAnchoredMenu';
 import './Dropdown.css';
 /** @public */
 export default function Dropdown({ options, value, onChange, placeholder, disabled = false, block = false, size = 48, error = false, className = '', ariaLabel }) {

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

@@ -10,6 +10,7 @@ import TextField from './TextField';
 import Dropdown from './Dropdown';
 export { FILTER_ALL_VALUE } from '../types/filterPanel';
 import { FILTER_ALL_VALUE } from '../types/filterPanel';
+import FilterSectionInfo from './FilterSectionInfo';
 /** @public */
 export default function FilterPanel({ title, headerAction, collapsible = false, defaultCollapsed = false, collapsed: controlledCollapsed, onCollapsedChange, footer, sections, selected = {}, onSelect, align, sectionAlign, className, }) {
     // align 우선. 없으면 구 prop(sectionAlign) 매핑, 그것도 없으면 inline 기본.
@@ -49,7 +50,7 @@ export default function FilterPanel({ title, headerAction, collapsible = false,
                                 const isSelected = Array.isArray(sel) ? sel.includes(value) : sel === value;
                                 return (_jsx(Button, { size: "keyboard", label: itemLabels ?? displayLabel ?? value, type: section.itemType ?? (itemLabels ? 'bar' : value.length === 1 ? 'dot' : undefined), selected: isSelected, disabled: disabled, shape: shape, showTooltipInfo: !!tooltip, tooltipInfoText: tooltip, tooltipDescription: descriptionTooltip, onClick: () => onSelect?.(value, section.label) }, value));
                             };
-                            return (_jsxs(Fragment, { children: [section.groupLabel && (_jsxs("div", { className: "filter-panel__group-label-row", children: [_jsx("div", { className: "filter-panel__group-label body-2", children: section.groupLabel }), section.groupAction] })), _jsxs("div", { className: cx('filter-panel__section', section.layout === 'row' ? 'filter-panel__section--row' : '', section.block ? 'filter-panel__section--block' : ''), children: [_jsxs("div", { className: "filter-panel__section-label-row", children: [_jsx("span", { className: "filter-panel__section-label body-3", children: section.displayLabel ?? section.label }), section.labelAction] }), section.type === 'note' ? (_jsx("div", { className: "filter-panel__note body-3", children: section.content })) : section.type === 'input' ? (_jsx(TextField, { className: "filter-panel__textfield", placeholder: section.placeholder, ariaLabel: section.displayLabel ?? section.label, value: selected[section.label] ?? '', onChange: (value) => onSelect?.(value, section.label), error: section.error })) : (!section.multiple && section.display === 'segmented') ? (_jsx(SegmentedControl
+                            return (_jsxs(Fragment, { children: [section.groupLabel && (_jsxs("div", { className: "filter-panel__group-label-row", children: [_jsx("div", { className: "filter-panel__group-label body-2", children: section.groupLabel }), section.groupAction] })), _jsxs("div", { className: cx('filter-panel__section', section.layout === 'row' ? 'filter-panel__section--row' : '', section.block ? 'filter-panel__section--block' : ''), children: [_jsxs("div", { className: "filter-panel__section-label-row", children: [_jsx("span", { className: "filter-panel__section-label body-3", children: section.displayLabel ?? section.label }), section.labelAction ?? (section.labelInfo ? _jsx(FilterSectionInfo, { ...section.labelInfo }) : null)] }), section.type === 'note' ? (_jsx("div", { className: "filter-panel__note body-3", children: section.content })) : section.type === 'input' ? (_jsx(TextField, { className: "filter-panel__textfield", placeholder: section.placeholder, ariaLabel: section.displayLabel ?? section.label, value: selected[section.label] ?? '', onChange: (value) => onSelect?.(value, section.label), error: section.error })) : (!section.multiple && section.display === 'segmented') ? (_jsx(SegmentedControl
                                             /* 바로 위 TextField 처럼 섹션 이름을 그대로 쓴다. 안 주면 라디오그룹이
                                                기본값 '선택 탭'으로 읽혀, 필터가 여럿인 화면에서 어느 그룹인지
                                                구분이 안 된다(단어표 검색 설정은 세그먼트가 열 개 가까이 된다). */

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

@@ -6,7 +6,7 @@ import { useMediaQuery } from '../hooks';
 import BottomNav from './BottomNav';
 import Button from './Button';
 import MenuTooltip from './Tooltip/MenuTooltip';
-import { useAnchoredMenu } from './useAnchoredMenu';
+import { useAnchoredMenu } from '../hooks/useAnchoredMenu';
 import { createPortal } from 'react-dom';
 // 메뉴 표면(.tooltip-content) 정의 — Tooltip.tsx를 거치지 않고 클래스만 쓰므로 명시적으로.
 import './Tooltip/Tooltip.css';

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

@@ -1,5 +1,4 @@
-import type { ReactNode, KeyboardEvent } from 'react';
-import type { DeviceEntry, DeviceSide } from './HearingDeviceInfo';
+import type { ReactNode } from 'react';
 import './Panel.css';
 type PanelSize = 'small' | 'medium' | 'large';
 interface PanelProps {
@@ -51,134 +50,5 @@ export declare function PanelGrid({ cols, children }: {
     cols?: number;
     children: ReactNode;
 }): import("react").JSX.Element;
-type Base = {
-    label?: string;
-    sub?: string;
-    onClick?: () => void;
-    required?: boolean;
-    error?: string;
-    align?: 'horizontal' | 'vertical';
-    useFullWidth?: boolean;
-    icon?: ReactNode;
-};
-export type PanelRowToggle = Base & {
-    variant: 'toggle';
-    checked: boolean;
-    onChange: (v: boolean) => void;
-};
-export type PanelRowSegmented = Base & {
-    variant: 'segmented';
-    options: {
-        key: string;
-        label: string;
-    }[];
-    value: string;
-    onChange: (v: string) => void;
-    size?: 32 | 40 | 48;
-};
-export type DropdownItem = {
-    options: {
-        value: string;
-        label: string;
-    }[];
-    value: string;
-    onChange: (v: string) => void;
-    placeholder?: string;
-    /**
-     * 이 드롭다운 하나의 이름. 미지정 시 "행 라벨 + placeholder" 로 조합한다
-     * (생년월일 + 년 → "생년월일 년").
-     */
-    ariaLabel?: string;
-};
-export type PanelRowDropdown = Base & {
-    variant: 'dropdown';
-    options?: {
-        value: string;
-        label: string;
-    }[];
-    value?: string;
-    onChange?: (v: string) => void;
-    dropdowns?: DropdownItem[];
-};
-export type ButtonItem = {
-    label: ReactNode;
-    btnVariant?: string;
-    btnSize?: number;
-    disabled?: boolean;
-    onClick: () => void;
-};
-export type PanelRowButton = Base & {
-    variant: 'button';
-    buttonLabel?: ReactNode;
-    btnVariant?: string;
-    btnSize?: number;
-    disabled?: boolean;
-    onClick?: () => void;
-    buttons?: ButtonItem[];
-};
-export type PanelRowText = Base & {
-    variant: 'text';
-    value: string;
-    valueColor?: string;
-};
-export type PanelRowInput = Base & {
-    variant: 'input';
-    value: string;
-    onChange?: (v: string) => void;
-    onKeyDown?: (e: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-    /** Enter로 확정(제출 등). TextField가 IME 조합 중 Enter는 걸러 주므로 한글 입력에서도 안전하다. */
-    onEnter?: () => void;
-    placeholder?: string;
-    inputMode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
-    readOnly?: boolean;
-    disabled?: boolean;
-    type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
-    autoComplete?: string;
-    helperText?: string;
-    /** 최대 글자 수 — 설정 시 입력 제한 + 박스 안쪽 글자수 카운터 표시 */
-    maxLength?: number;
-    /** 글자수 카운터 표시 여부 (maxLength 설정 시, 기본 true) */
-    showCount?: boolean;
-    /** 여러 줄 입력(textarea) 모드 */
-    multiline?: boolean;
-    /** multiline 모드 기본 행 수 */
-    rows?: number;
-};
-export type PanelRowCustom = Base & {
-    variant: 'custom';
-    children: ReactNode;
-};
-/** 라벨/우측 분리 없이 설명 문단을 통으로 표시하는 행 */
-export type PanelRowDescription = {
-    variant: 'description';
-    children: ReactNode;
-};
-/** 빈 상태 표현 — Panel의 `empty` prop이 내부적으로 이 variant로 렌더한다. 단독으로도 사용 가능. */
-export type PanelRowEmpty = {
-    variant: 'empty';
-    children: ReactNode;
-};
-/** 로딩 스피너 1개만 중앙에 표시 — Panel의 `loading` prop이 내부적으로 이 variant로 렌더한다. */
-export type PanelRowLoading = {
-    variant: 'loading';
-};
-export type PanelRowChildren = {
-    label?: ReactNode;
-    sub?: string;
-    onClick?: () => void;
-    children?: ReactNode;
-    align?: 'horizontal' | 'vertical';
-    icon?: ReactNode;
-};
-export type PanelRowProps = PanelRowToggle | PanelRowSegmented | PanelRowDropdown | PanelRowButton | PanelRowText | PanelRowInput | PanelRowCustom | PanelRowDescription | PanelRowEmpty | PanelRowLoading | PanelRowChildren;
-export declare function PanelRow(props: PanelRowProps): import("react").JSX.Element;
-export type { DeviceSide };
-export interface PanelRowDeviceProps {
-    devices: {
-        좌: DeviceEntry | null;
-        우: DeviceEntry | null;
-    };
-    /** 있으면 각 쪽 이름 옆에 '착용 해제'가 선다 — 그 쪽의 '지금 착용중' 만 내린다(이력은 남는다) */
-    onRelease?: (side: DeviceSide) => void;
-}
-export declare function PanelRowDevice({ devices, onRelease }: PanelRowDeviceProps): import("react").JSX.Element;
+export { PanelRow, PanelRowDevice } from './PanelRow';
+export type { PanelRowToggle, PanelRowSegmented, PanelRowDropdown, PanelRowButton, PanelRowText, PanelRowInput, PanelRowCustom, PanelRowDescription, PanelRowEmpty, PanelRowLoading, PanelRowChildren, PanelRowProps, PanelRowDeviceProps, DropdownItem, ButtonItem, DeviceSide, } from './PanelRow';

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

@@ -1,19 +1,9 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../utils/cx';
-import { useId } from 'react';
-import { useTranslation } from 'react-i18next';
-import Toggle from './Toggle';
-import SegmentedControl from './SegmentedControl';
-import Dropdown from './Dropdown';
-import Button from './Button';
-import Badge from './Badge';
+import { PanelRow } from './PanelRow';
 import Icon from './Icon';
-import { deviceKindVariant } from '../utils/deviceKind';
-import TextField from './TextField';
-import Loader from './Loader';
 import './Panel.css';
-const noop = () => { };
 export default function Panel({ title, icon, disc, actions, size = 'medium', minHeight, maxWidth, className, scrollable, useBorder = true, useBg = true, useRowBorder = true, labelWidth, form = false, loading, empty, children }) {
     const cls = cx('panel', `panel--${size}`, form ? 'panel--form' : '', 
     /* minHeight 패널은 마지막 행 아래 빈 공간이 생길 수 있으므로 행 하단 구분선 사용 */
@@ -32,132 +22,4 @@ export default function Panel({ title, icon, disc, actions, size = 'medium', min
 export function PanelGrid({ cols = 2, children }) {
     return (_jsx("div", { className: "panel-grid", style: { '--panel-grid-cols': cols }, children: children }));
 }
-export function PanelRow(props) {
-    // toggle 행의 라벨-스위치 연결용 id — 모든 variant에서 훅 호출 순서를 유지하기 위해
-    // 조건부 return들보다 앞에서 무조건 호출한다 (사용하지 않는 variant에서는 그냥 버려짐)
-    const uid = useId();
-    // children 기반 하위 호환 모드
-    if (!('variant' in props)) {
-        const { label, sub, onClick, children, align = 'horizontal', icon } = props;
-        const handleKeyDown = (e) => {
-            if (!onClick)
-                return;
-            // 우측 children 안의 버튼/토글 등이 자체적으로 Enter/Space를 처리하므로,
-            // 행 자기 자신에서 발생한 키 입력만 행 클릭으로 취급한다
-            if (e.target !== e.currentTarget)
-                return;
-            if (e.key === 'Enter' || e.key === ' ') {
-                e.preventDefault();
-                onClick();
-            }
-        };
-        return (_jsxs("div", { className: cx('panel-row', align === 'vertical' ? 'panel-row--vertical' : '', onClick ? 'panel-row--clickable' : ''), onClick: onClick, onKeyDown: onClick ? handleKeyDown : undefined, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, children: [icon != null && _jsx("div", { className: "panel-row__icon", children: icon }), label != null && (_jsxs("div", { className: "panel-row__left", children: [_jsx("div", { className: "panel-row__label body-3", children: label }), sub && _jsx("div", { className: "panel-row__sub caption-1", children: sub })] })), _jsx("div", { className: "panel-row__right", children: children })] }));
-    }
-    // 설명 전용 행 — 라벨/우측 구조 없이 문단만 렌더
-    if (props.variant === 'description') {
-        const p = props;
-        return (_jsx("div", { className: "panel-row panel-row--block", children: _jsx("p", { className: "panel-row__description body-3", children: p.children }) }));
-    }
-    // 빈 상태 — 라벨 없이 중앙 정렬된 한 줄
-    if (props.variant === 'empty') {
-        const p = props;
-        return _jsx("div", { className: "panel-row panel-row--empty body-3", children: p.children });
-    }
-    // 로딩 — 중앙 스피너 1개
-    if (props.variant === 'loading') {
-        return _jsx("div", { className: "panel-row panel-row--loading", children: _jsx(Loader, { size: 28 }) });
-    }
-    // custom 행에 label이 없으면 좌/우 분할 없이 children을 그대로 꽉 채워 렌더
-    // (CodeBox처럼 라벨과 짝지을 수 없는 큰 블록 콘텐츠를 행 구조 안에 넣을 때 사용)
-    if (props.variant === 'custom' && !props.label) {
-        const p = props;
-        return (_jsx("div", { className: "panel-row panel-row--block", children: p.children }));
-    }
-    const { variant, label, sub, onClick, required, error, align = 'horizontal', useFullWidth = false, icon } = props;
-    let right = null;
-    // toggle 행만 왼쪽 라벨(panel-row__label)을 <label htmlFor>로 렌더해 스위치와 프로그래밍적으로
-    // 연결한다 — 그 전엔 시각적으로만 옆에 붙어있어 라벨 텍스트를 클릭해도 토글이 안 되고
-    // 스크린리더도 이 스위치가 뭘 위한 건지 안내하지 못했다.
-    const toggleId = variant === 'toggle' ? `panel-toggle-${uid}` : undefined;
-    if (variant === 'toggle') {
-        const p = props;
-        right = _jsx(Toggle, { checked: p.checked, onChange: p.onChange, id: toggleId });
-    }
-    else if (variant === 'segmented') {
-        const p = props;
-        // dropdown 행과 동일하게, PanelRow 왼쪽 라벨은 <label htmlFor>가 아닌 일반 div라서
-        // SegmentedControl에 ariaLabel로 넘겨야 스크린리더가 이름 없는 라디오그룹으로 안내하지 않는다.
-        right = _jsx(SegmentedControl, { options: p.options, value: p.value, onChange: p.onChange, size: p.size ?? 40, ariaLabel: label });
-    }
-    else if (variant === 'dropdown') {
-        const p = props;
-        const dropdowns = p.dropdowns?.length ? (_jsx("div", { className: `panel-row__dropdown-group${useFullWidth ? ' panel-row__dropdown-group--full' : ''}`, children: p.dropdowns.map((d, i) => (_jsx("div", { className: useFullWidth ? 'panel-row__dropdown-item--full' : undefined, children: _jsx(Dropdown, { options: d.options, value: d.value, onChange: d.onChange, placeholder: d.placeholder, block: useFullWidth, error: !!error, 
-                    // 한 행에 여러 개가 놓이므로 행 라벨만 넘기면 셋 다 "생년월일" 이라는 같은 이름이 된다.
-                    // aria-label 이 있으면 스크린리더는 트리거의 화면 텍스트(년/월/일)를 읽지 않으므로
-                    // 사용자는 어느 것이 무엇인지 구별할 수 없다 — placeholder 를 붙여 구별되게 한다.
-                    ariaLabel: d.ariaLabel ?? ([label, d.placeholder].filter(Boolean).join(' ') || undefined) }) }, i))) })) : (
-        // PanelRow 왼쪽 라벨(panel-row__label)은 <label htmlFor>가 아니라 그냥 div라서 트리거 버튼과
-        // 프로그래밍적으로 연결되지 않는다 — ariaLabel로 직접 이름을 넘긴다 (TextField의 ariaLabel과 동일 패턴)
-        _jsx(Dropdown, { options: p.options ?? [], value: p.value ?? '', onChange: p.onChange ?? noop, block: useFullWidth, error: !!error, ariaLabel: label }));
-        right = error ? (_jsxs("div", { className: `panel-row__dropdown-error-wrap${useFullWidth ? ' panel-row__dropdown-error-wrap--full' : ''}`, children: [dropdowns, _jsx("span", { className: "caption-1 panel-row__error", role: "alert", children: error })] })) : dropdowns;
-    }
-    else if (variant === 'button') {
-        const p = props;
-        if (p.buttons?.length) {
-            right = (_jsx("div", { className: "panel-row__button-group", children: p.buttons.map((btn, i) => (_jsx(Button, { size: btn.btnSize ?? 40, variant: btn.btnVariant ?? 'default', disabled: btn.disabled, onClick: btn.onClick, children: btn.label }, i))) }));
-        }
-        else {
-            right = (_jsx(Button, { size: p.btnSize ?? 40, variant: p.btnVariant ?? 'default', disabled: p.disabled, onClick: p.onClick, children: p.buttonLabel }));
-        }
-    }
-    else if (variant === 'text') {
-        const p = props;
-        right = _jsx("span", { className: `panel-row__text body-2${useFullWidth ? ' panel-row__text--full' : ''}`, style: p.valueColor ? { color: p.valueColor } : undefined, children: p.value });
-    }
-    else if (variant === 'input') {
-        const p = props;
-        right = (_jsxs("div", { className: `panel-row__input-wrap${useFullWidth ? ' panel-row__input-wrap--full' : ''}`, children: [_jsx(TextField, { value: p.value, onChange: p.onChange ?? noop, onKeyDown: p.onKeyDown, onEnter: p.onEnter, placeholder: p.placeholder, inputMode: p.inputMode, readOnly: p.readOnly, disabled: p.disabled, type: p.type, autoComplete: p.autoComplete, maxLength: p.maxLength, showCount: p.showCount, multiline: p.multiline, rows: p.rows, fullWidth: useFullWidth, error: error, ariaLabel: label, required: required }), p.helperText && _jsx("div", { className: "panel-row__helper caption-1", children: p.helperText })] }));
-    }
-    else if (variant === 'custom') {
-        const p = props;
-        right = p.children;
-    }
-    const isLabelFixed = variant === 'input' || variant === 'dropdown' || ((variant === 'text' || variant === 'custom') && useFullWidth);
-    // 위 children 모드와 동일한 키보드 처리 — 이쪽 경로에만 빠져 있어서,
-    // variant 모드에 onClick을 주면 조용히 마우스 전용이 된다(현재 사용처는 없지만 예방).
-    const handleKeyDown = (e) => {
-        if (!onClick)
-            return;
-        if (e.target !== e.currentTarget)
-            return;
-        if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            onClick();
-        }
-    };
-    return (_jsxs("div", { className: cx('panel-row', align === 'vertical' ? 'panel-row--vertical' : '', isLabelFixed ? 'panel-row--label-fixed' : '', variant === 'text' ? 'panel-row--text' : '', onClick ? 'panel-row--clickable' : ''), onClick: onClick, onKeyDown: onClick ? handleKeyDown : undefined, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, children: [icon != null && _jsx("div", { className: "panel-row__icon", children: icon }), _jsxs("div", { className: "panel-row__left", children: [toggleId ? (_jsxs("label", { htmlFor: toggleId, className: "panel-row__label body-3", children: [label, required && _jsx("span", { className: "required-mark", children: "*" })] })) : (_jsxs("div", { className: "panel-row__label body-3", children: [label, required && _jsx("span", { className: "required-mark", children: "*" })] })), sub && _jsx("div", { className: "panel-row__sub caption-1", children: sub })] }), _jsx("div", { className: "panel-row__right", children: right })] }));
-}
-/**
- * 제목 아래 한 줄로 세울 곁정보 — 브랜드·착용형태.
- *
- * 제목으로 이미 쓴 값과 빈 값, 그리고 서로 같은 값을 걷어 낸다. 걷어 내지 않으면
- * 브랜드도 형태도 '기타' 인 기기가 **'기타 · 기타'** 로 떴다(같은 말이 두 번).
- */
-function 메타(d) {
-    const 제목 = d.productName || d.brand;
-    const 조각 = [d.brand, d.fitType].filter((v) => !!v && v !== 제목);
-    return [...new Set(조각)].join(' · ');
-}
-export function PanelRowDevice({ devices, onRelease }) {
-    const { t } = useTranslation();
-    const SIDES = ['좌', '우'];
-    return (_jsx("div", { className: "panel-row panel-row--device", children: SIDES.map(side => {
-            const d = devices[side];
-            const sideLabel = side === '좌' ? t('device.direction.left', '좌') : t('device.direction.right', '우');
-            return (_jsxs("div", { className: "panel-row__device-column", children: [_jsxs("div", { className: "panel-row__device-head", children: [_jsx("span", { className: "panel-row__device-side body-2b", children: sideLabel }), d && onRelease && (
-                            /* 표의 줄 끝 단추와 같은 모양·같은 말 — 하는 일도 같다.
-                               이력에서 지우는 것이 아니라 '지금 끼고 있음' 만 내린다
-                               (잠시 안 씀·수리 보냄 같은 경우가 실제로 있다). */
-                            _jsx(Button, { size: 32, type: "dot", icon: "x", ariaLabel: t('customers.device.unwear', '착용 해제'), showTooltipInfo: t('customers.device.unwear', '착용 해제'), onClick: () => onRelease(side) }))] }), d ? (_jsxs("div", { className: "panel-row__device-info", children: [_jsxs("span", { className: "panel-row__device-kind", children: [d.device && _jsx(Badge, { size: "small", variant: deviceKindVariant(d.device), fill: "soft", label: d.device }), 메타(d) && _jsx("span", { className: "panel-row__device-detail body-3", children: 메타(d) })] }), _jsx("span", { className: "panel-row__device-name body-2b", children: d.productName || d.brand }), _jsx("span", { className: "panel-row__device-date caption-1", children: t('customers.device.wornSince', { date: `${d.wornYear}.${d.wornMonth}.${d.wornDay}` }) })] })) : (_jsx("span", { className: "panel-row__device-empty body-3", children: t('customers.device.notRegistered', '미등록') }))] }, side));
-        }) }));
-}
+export { PanelRow, PanelRowDevice } from './PanelRow'; // 갈라 나간 뒤에도 이 경로로 나간다

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

@@ -0,0 +1,145 @@
+import type { ReactNode, KeyboardEvent } from 'react';
+import type { DeviceEntry, DeviceSide } from './HearingDeviceInfo';
+import './Panel.css';
+/**
+ * 패널 **한 줄** — `Panel` 이 담는 그릇이라면 이쪽은 그 안에 서는 줄이다.
+ *
+ * `Panel.tsx` 에서 갈라 나왔다. 한 파일에 컴포넌트 넷(Panel · PanelGrid · PanelRow ·
+ * PanelRowDevice)과 타입 열다섯이 함께 있었는데, 그릇을 고치러 들어온 사람이 줄의
+ * 12갈래 판별 합집합을 지나야 했다. 이 저장소가 이미 쓰는 방식이다
+ * (`trainingStepAudioPlayerTypes.ts` · `audioPlaybackRules.ts`).
+ *
+ * `Panel.tsx` 가 이것들을 다시 내보내므로 `@ihabdevteam/core/components/Panel` 에서
+ * 가져가던 곳은 그대로 돌아간다.
+ */
+type Base = {
+    label?: string;
+    sub?: string;
+    onClick?: () => void;
+    required?: boolean;
+    error?: string;
+    align?: 'horizontal' | 'vertical';
+    useFullWidth?: boolean;
+    icon?: ReactNode;
+};
+export type PanelRowToggle = Base & {
+    variant: 'toggle';
+    checked: boolean;
+    onChange: (v: boolean) => void;
+};
+export type PanelRowSegmented = Base & {
+    variant: 'segmented';
+    options: {
+        key: string;
+        label: string;
+    }[];
+    value: string;
+    onChange: (v: string) => void;
+    size?: 32 | 40 | 48;
+};
+export type DropdownItem = {
+    options: {
+        value: string;
+        label: string;
+    }[];
+    value: string;
+    onChange: (v: string) => void;
+    placeholder?: string;
+    /**
+     * 이 드롭다운 하나의 이름. 미지정 시 "행 라벨 + placeholder" 로 조합한다
+     * (생년월일 + 년 → "생년월일 년").
+     */
+    ariaLabel?: string;
+};
+export type PanelRowDropdown = Base & {
+    variant: 'dropdown';
+    options?: {
+        value: string;
+        label: string;
+    }[];
+    value?: string;
+    onChange?: (v: string) => void;
+    dropdowns?: DropdownItem[];
+};
+export type ButtonItem = {
+    label: ReactNode;
+    btnVariant?: string;
+    btnSize?: number;
+    disabled?: boolean;
+    onClick: () => void;
+};
+export type PanelRowButton = Base & {
+    variant: 'button';
+    buttonLabel?: ReactNode;
+    btnVariant?: string;
+    btnSize?: number;
+    disabled?: boolean;
+    onClick?: () => void;
+    buttons?: ButtonItem[];
+};
+export type PanelRowText = Base & {
+    variant: 'text';
+    value: string;
+    valueColor?: string;
+};
+export type PanelRowInput = Base & {
+    variant: 'input';
+    value: string;
+    onChange?: (v: string) => void;
+    onKeyDown?: (e: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    /** Enter로 확정(제출 등). TextField가 IME 조합 중 Enter는 걸러 주므로 한글 입력에서도 안전하다. */
+    onEnter?: () => void;
+    placeholder?: string;
+    inputMode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+    readOnly?: boolean;
+    disabled?: boolean;
+    type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
+    autoComplete?: string;
+    helperText?: string;
+    /** 최대 글자 수 — 설정 시 입력 제한 + 박스 안쪽 글자수 카운터 표시 */
+    maxLength?: number;
+    /** 글자수 카운터 표시 여부 (maxLength 설정 시, 기본 true) */
+    showCount?: boolean;
+    /** 여러 줄 입력(textarea) 모드 */
+    multiline?: boolean;
+    /** multiline 모드 기본 행 수 */
+    rows?: number;
+};
+export type PanelRowCustom = Base & {
+    variant: 'custom';
+    children: ReactNode;
+};
+/** 라벨/우측 분리 없이 설명 문단을 통으로 표시하는 행 */
+export type PanelRowDescription = {
+    variant: 'description';
+    children: ReactNode;
+};
+/** 빈 상태 표현 — Panel의 `empty` prop이 내부적으로 이 variant로 렌더한다. 단독으로도 사용 가능. */
+export type PanelRowEmpty = {
+    variant: 'empty';
+    children: ReactNode;
+};
+/** 로딩 스피너 1개만 중앙에 표시 — Panel의 `loading` prop이 내부적으로 이 variant로 렌더한다. */
+export type PanelRowLoading = {
+    variant: 'loading';
+};
+export type PanelRowChildren = {
+    label?: ReactNode;
+    sub?: string;
+    onClick?: () => void;
+    children?: ReactNode;
+    align?: 'horizontal' | 'vertical';
+    icon?: ReactNode;
+};
+export type PanelRowProps = PanelRowToggle | PanelRowSegmented | PanelRowDropdown | PanelRowButton | PanelRowText | PanelRowInput | PanelRowCustom | PanelRowDescription | PanelRowEmpty | PanelRowLoading | PanelRowChildren;
+export declare function PanelRow(props: PanelRowProps): import("react").JSX.Element;
+export type { DeviceSide };
+export interface PanelRowDeviceProps {
+    devices: {
+        좌: DeviceEntry | null;
+        우: DeviceEntry | null;
+    };
+    /** 있으면 각 쪽 이름 옆에 '착용 해제'가 선다 — 그 쪽의 '지금 착용중' 만 내린다(이력은 남는다) */
+    onRelease?: (side: DeviceSide) => void;
+}
+export declare function PanelRowDevice({ devices, onRelease }: PanelRowDeviceProps): import("react").JSX.Element;