@ihabdevteam/core 0.245.0 → 0.247.0

package/dist/ihabdevteam-core.d.ts

@@ -1645,7 +1645,7 @@ export declare function copyText(text: string): Promise<boolean>;
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export declare const CORE_VERSION = "0.245.0";
+export declare const CORE_VERSION = "0.247.0";
 
 /** @public */
 declare const coreDefault: Record<string, unknown>;
@@ -2369,7 +2369,7 @@ export declare const FILTER_ALL_VALUE = "\uC804\uCCB4";
 export declare function filterContrastCandidates(answer: string, candidates: Iterable<string>, opts: ContrastFilterOpts): string[];
 
 /** @public */
-export declare function FilterPanel({ title, headerAction, headerSummary, collapsible, defaultCollapsed, collapsed: controlledCollapsed, onCollapsedChange, footer, sections, selected, onSelect, align, sectionAlign, className, }: FilterPanelProps): JSX.Element;
+export declare function FilterPanel({ title, titleLevel, headerAction, headerSummary, collapsible, defaultCollapsed, collapsed: controlledCollapsed, onCollapsedChange, footer, sections, selected, onSelect, align, sectionAlign, className, }: FilterPanelProps): JSX.Element;
 
 /** @public */
 export declare interface FilterPanelItem {
@@ -2390,6 +2390,16 @@ export declare interface FilterPanelItem {
 /** @public */
 export declare interface FilterPanelProps {
     title?: ReactNode;
+    /** 제목을 **머리글 몇 급**으로 그릴지(말귀 요청 (57), 2026-10-02).
+     *
+     *  전에는 `<span class="h4">` 였다 — `h4` 는 글자 꼴이지 머리글이 아니다. 그래서 판이
+     *  셋 서는 화면(단어표 만들기)에 **머리글이 `h1` 하나뿐**이고 그 아래 조작 백예순다섯이
+     *  평평하게 깔렸다. "단어표 설정으로 건너뛰기" 도 "지금 어느 판 안인지" 도 알 길이
+     *  없었다 — 자모 격자만 백 개가 넘는 자리라 더 그렇다.
+     *
+     *  기본 2 — 쪽 제목(`h1`) 바로 아래 서는 자리가 대부분이다. 창 안이면 3 으로 내린다
+     *  (창 제목이 `h2` 다). `0` 이면 전과 같이 `span` 으로 그린다. */
+    titleLevel?: 0 | 2 | 3 | 4 | 5 | 6;
     headerAction?: ReactNode;
     /** 머리 오른쪽에 **접혀도 남는** 자리 — 접힌 판이 제 속을 한 줄로 말하게 한다("등급 전체 · 품사 전체" 같은 요약).
      *
@@ -4179,7 +4189,7 @@ export declare interface PairStats {
     total: number;
 }
 
-export declare function Panel({ title, icon, disc, actions, size, minHeight, maxWidth, className, scrollable, scrollbarGutter, compactRows, useBorder, useBg, useRowBorder, labelWidth, form, loading, empty, children }: PanelProps): JSX.Element;
+export declare function Panel({ title, titleLevel, icon, disc, actions, size, minHeight, maxWidth, className, scrollable, scrollbarGutter, compactRows, useBorder, useBg, useRowBorder, labelWidth, form, loading, empty, children }: PanelProps): JSX.Element;
 
 /** @public */
 export declare type PanelElement = HTMLDivElement & {
@@ -4194,6 +4204,14 @@ export declare function PanelGrid({ cols, children }: {
 }): JSX.Element;
 
 declare interface PanelProps {
+    /** 제목을 **머리글 몇 급**으로 그릴지(말귀 요청 (59), 2026-10-02).
+     *
+     *  기본 2 는 전과 같다 — **창 제목이 머리글이 아니던 때**의 값이다. 0.242.0 에서 창
+     *  제목이 `<h2>` 가 되면서, 제목 있는 `Panel` 을 품은 창마다 둘이 **같은 급**으로 서게
+     *  됐다(말귀 실측: 훈련 묶음 추가 창에 창 제목 말고 `h2` 가 둘). 머리글로 훑으면 판이
+     *  창의 아래가 아니라 **옆**으로 읽힌다 — 창 안에서는 3 으로 내린다.
+     *  `0` 이면 머리글을 안 세운다(글자 없는 제목은 0.235.0 부터 애초에 안 선다). */
+    titleLevel?: 0 | 2 | 3 | 4 | 5 | 6;
     title?: ReactNode;
     /**
      * 제목 앞에 서는 lucide 아이콘 이름. Section 의 `icon` 과 같은 자리다.

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

@@ -6,6 +6,16 @@ import type { FilterPanelSection } from '../types/filterPanel';
 /** @public */
 export interface FilterPanelProps {
     title?: ReactNode;
+    /** 제목을 **머리글 몇 급**으로 그릴지(말귀 요청 (57), 2026-10-02).
+     *
+     *  전에는 `<span class="h4">` 였다 — `h4` 는 글자 꼴이지 머리글이 아니다. 그래서 판이
+     *  셋 서는 화면(단어표 만들기)에 **머리글이 `h1` 하나뿐**이고 그 아래 조작 백예순다섯이
+     *  평평하게 깔렸다. "단어표 설정으로 건너뛰기" 도 "지금 어느 판 안인지" 도 알 길이
+     *  없었다 — 자모 격자만 백 개가 넘는 자리라 더 그렇다.
+     *
+     *  기본 2 — 쪽 제목(`h1`) 바로 아래 서는 자리가 대부분이다. 창 안이면 3 으로 내린다
+     *  (창 제목이 `h2` 다). `0` 이면 전과 같이 `span` 으로 그린다. */
+    titleLevel?: 0 | 2 | 3 | 4 | 5 | 6;
     headerAction?: ReactNode;
     /** 머리 오른쪽에 **접혀도 남는** 자리 — 접힌 판이 제 속을 한 줄로 말하게 한다("등급 전체 · 품사 전체" 같은 요약).
      *
@@ -49,4 +59,4 @@ export interface FilterPanelProps {
     className?: string;
 }
 /** @public */
-export default function FilterPanel({ title, headerAction, headerSummary, collapsible, defaultCollapsed, collapsed: controlledCollapsed, onCollapsedChange, footer, sections, selected, onSelect, align, sectionAlign, className, }: FilterPanelProps): import("react").JSX.Element;
+export default function FilterPanel({ title, titleLevel, headerAction, headerSummary, collapsible, defaultCollapsed, collapsed: controlledCollapsed, onCollapsedChange, footer, sections, selected, onSelect, align, sectionAlign, className, }: FilterPanelProps): import("react").JSX.Element;

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

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { cx } from '../utils/cx';
-import { Fragment, useMemo, useState } from 'react';
+import { useId, Fragment, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import './FilterPanel.css';
 import Button from './Button';
@@ -14,7 +14,7 @@ import FilterSectionInfo from './FilterSectionInfo';
 import { devWarnOnce } from '../utils/devWarn';
 import { buildFilterSummary } from '../utils/filterPanelSummary';
 /** @public */
-export default function FilterPanel({ title, headerAction, headerSummary, collapsible = false, defaultCollapsed = false, collapsed: controlledCollapsed, onCollapsedChange, footer, sections, selected = {}, onSelect, align, sectionAlign, className, }) {
+export default function FilterPanel({ title, titleLevel = 2, headerAction, headerSummary, collapsible = false, defaultCollapsed = false, collapsed: controlledCollapsed, onCollapsedChange, footer, sections, selected = {}, onSelect, align, sectionAlign, className, }) {
     // align 우선. 없으면 구 prop(sectionAlign) 매핑, 그것도 없으면 inline 기본.
     const isRow = (align ?? (sectionAlign === 'vertical' ? 'newline' : sectionAlign === 'horizontal' ? 'inline' : 'inline')) === 'inline';
     const { t } = useTranslation();
@@ -47,7 +47,14 @@ export default function FilterPanel({ title, headerAction, headerSummary, collap
     const 기본요약 = useMemo(() => (headerSummary !== undefined || !collapsed ? '' : buildFilterSummary(sections, selected, t('common.all', '전체'))), [headerSummary, collapsed, sections, selected, t]);
     const summaryNode = headerSummary ?? (기본요약 ? _jsx("span", { className: "filter-panel__header-summary body-3", children: 기본요약 }) : null);
     const showHeader = title || headerAction || headerSummary || collapsible;
-    return (_jsxs("div", { className: cx('filter-panel', collapsible ? 'filter-panel--collapsible' : '', collapsed ? 'filter-panel--collapsed' : '', className), children: [showHeader && (_jsxs("div", { className: "filter-panel__header", onClick: collapsible ? 머리누름 : undefined, children: [_jsx("div", { className: "filter-panel__title-row", children: title && _jsx("span", { className: "filter-panel__title h4", children: title }) }), _jsxs("div", { className: "filter-panel__header-actions", children: [collapsed ? summaryNode : headerAction, collapsible && (_jsx(Button, { htmlType: "button", size: 40, type: "dot", variant: "transparent-gray", useBorder: false, icon: collapsed ? 'chevron-down' : 'chevron-up', 
+    const 제목id = useId();
+    const 제목태그 = titleLevel ? `h${titleLevel}` : 'span';
+    return (
+    /* **제목이 이 판의 이름이 된다**(말귀 요청 (57), 2026-10-02). 이름 없는 판은 지역으로
+       안 잡혀, 셋이 나란히 서도 "지금 어느 판 안인지" 를 알 길이 없었다 — (51)·(54) 에서
+       `ChartSection`·`TrainingCardGroup` 에 한 것과 같은 자다.
+       **글자 제목일 때만 건다** — 마디를 가리키므로 글이 아닌 제목이면 이름이 안 선다. */
+    _jsxs("div", { className: cx('filter-panel', collapsible ? 'filter-panel--collapsible' : '', collapsed ? 'filter-panel--collapsed' : '', className), role: typeof title === 'string' && title ? 'group' : undefined, "aria-labelledby": typeof title === 'string' && title ? 제목id : undefined, children: [showHeader && (_jsxs("div", { className: "filter-panel__header", onClick: collapsible ? 머리누름 : undefined, children: [_jsx("div", { className: "filter-panel__title-row", children: title && _jsx(제목태그, { id: 제목id, className: "filter-panel__title h4", children: title }) }), _jsxs("div", { className: "filter-panel__header-actions", children: [collapsed ? summaryNode : headerAction, collapsible && (_jsx(Button, { htmlType: "button", size: 40, type: "dot", variant: "transparent-gray", useBorder: false, icon: collapsed ? 'chevron-down' : 'chevron-up', 
                                 /* Button은 aria-label을 자기 ariaLabel prop으로 덮어쓴다({...rest} 뒤에
                                    aria-label={ariaLabelString}을 다시 쓴다) — kebab으로 넘기면 undefined가
                                    되어 이름이 통째로 사라진다. 저장소의 다른 호출부는 모두 ariaLabel을 쓴다.

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

@@ -2,6 +2,14 @@ import { type ReactNode } from 'react';
 import './Panel.css';
 type PanelSize = 'small' | 'medium' | 'large';
 interface PanelProps {
+    /** 제목을 **머리글 몇 급**으로 그릴지(말귀 요청 (59), 2026-10-02).
+     *
+     *  기본 2 는 전과 같다 — **창 제목이 머리글이 아니던 때**의 값이다. 0.242.0 에서 창
+     *  제목이 `<h2>` 가 되면서, 제목 있는 `Panel` 을 품은 창마다 둘이 **같은 급**으로 서게
+     *  됐다(말귀 실측: 훈련 묶음 추가 창에 창 제목 말고 `h2` 가 둘). 머리글로 훑으면 판이
+     *  창의 아래가 아니라 **옆**으로 읽힌다 — 창 안에서는 3 으로 내린다.
+     *  `0` 이면 머리글을 안 세운다(글자 없는 제목은 0.235.0 부터 애초에 안 선다). */
+    titleLevel?: 0 | 2 | 3 | 4 | 5 | 6;
     title?: ReactNode;
     /**
      * 제목 앞에 서는 lucide 아이콘 이름. Section 의 `icon` 과 같은 자리다.
@@ -54,7 +62,7 @@ interface PanelProps {
     empty?: ReactNode;
     children?: ReactNode;
 }
-export default function Panel({ title, icon, disc, actions, size, minHeight, maxWidth, className, scrollable, scrollbarGutter, compactRows, useBorder, useBg, useRowBorder, labelWidth, form, loading, empty, children }: PanelProps): import("react").JSX.Element;
+export default function Panel({ title, titleLevel, icon, disc, actions, size, minHeight, maxWidth, className, scrollable, scrollbarGutter, compactRows, useBorder, useBg, useRowBorder, labelWidth, form, loading, empty, children }: PanelProps): import("react").JSX.Element;
 /** @public */
 export declare function PanelGrid({ cols, children }: {
     cols?: number;

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

@@ -5,7 +5,7 @@ import { PanelRow } from './PanelRow';
 import { Children } from 'react';
 import Icon from './Icon';
 import './Panel.css';
-export default function Panel({ title, icon, disc, actions, size = 'medium', minHeight, maxWidth, className, scrollable, scrollbarGutter = 'auto', compactRows = false, useBorder = true, useBg = true, useRowBorder = true, labelWidth, form = false, loading, empty, children }) {
+export default function Panel({ title, titleLevel = 2, icon, disc, actions, size = 'medium', minHeight, maxWidth, className, scrollable, scrollbarGutter = 'auto', compactRows = false, useBorder = true, useBg = true, useRowBorder = true, labelWidth, form = false, loading, empty, children }) {
     const cls = cx('panel', `panel--${size}`, form ? 'panel--form' : '', 
     /* minHeight 패널은 마지막 행 아래 빈 공간이 생길 수 있으므로 행 하단 구분선 사용 */
     minHeight !== undefined ? 'panel--fill' : '', !useBorder ? 'panel--no-border' : '', !useBg ? 'panel--no-bg' : '', !useRowBorder ? 'panel--no-row-border' : '', compactRows ? 'panel--compact-rows' : '', className);
@@ -16,7 +16,8 @@ export default function Panel({ title, icon, disc, actions, size = 'medium', min
         style.maxWidth = typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth;
     if (labelWidth !== undefined)
         style['--panel-label-width'] = typeof labelWidth === 'number' ? `${labelWidth}px` : labelWidth;
-    return (_jsxs("div", { className: cls, style: Object.keys(style).length ? style : undefined, children: [(!!title || disc != null) && (_jsxs("div", { className: cx('panel__header', disc != null ? 'panel__header--with-disc' : ''), children: [icon && (_jsx(Icon, { icon: icon, label: typeof title === 'string' ? title : undefined, className: "panel__icon" })), _jsxs("div", { className: "panel__title-group", children: [!!title && (_jsx("h2", { className: `panel__title ${disc != null ? 'body-3b' : 'h5b'}`, children: title })), disc != null && _jsx("p", { className: "panel__disc caption-1", children: disc })] }), actions && _jsx("div", { className: "panel__actions", children: actions })] })), loading ? (_jsx(PanelRow, { variant: "loading" })
+    const 제목태그 = titleLevel ? `h${titleLevel}` : 'div';
+    return (_jsxs("div", { className: cls, style: Object.keys(style).length ? style : undefined, children: [(!!title || disc != null) && (_jsxs("div", { className: cx('panel__header', disc != null ? 'panel__header--with-disc' : ''), children: [icon && (_jsx(Icon, { icon: icon, label: typeof title === 'string' ? title : undefined, className: "panel__icon" })), _jsxs("div", { className: "panel__title-group", children: [!!title && (_jsx(제목태그, { className: `panel__title ${disc != null ? 'body-3b' : 'h5b'}`, children: title })), disc != null && _jsx("p", { className: "panel__disc caption-1", children: disc })] }), actions && _jsx("div", { className: "panel__actions", children: actions })] })), loading ? (_jsx(PanelRow, { variant: "loading" })
             /* 비었는지는 React 가 그리는 것으로 센다 — `{조건 && 행들}` 이 false 면 children 이 false 라 빈 상태 문구가 안 떴다 */
             ) : empty != null && Children.toArray(children).length === 0 ? (_jsx(PanelRow, { variant: "empty", children: empty })) : scrollable ? (_jsx("div", { className: cx('panel__body--scroll', scrollbarGutter === 'stable' && 'panel__body--gutter-stable'), children: children })) : children] }));
 }

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

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
 import { cx } from '../../utils/cx';
 import { useCallback, useRef, useState, useEffect, useLayoutEffect, useMemo } from "react";
 import InfoTooltip from "../Tooltip/InfoTooltip";
@@ -7,6 +8,7 @@ import Icon from '../Icon';
 import "./CategoryIcon.css";
 /** @public */
 export default function CategoryIcon({ icon, label, tooltip, wrapperStyle, color, bgColor, useHover = true, iconSize = 'medium' }) {
+    const { t } = useTranslation();
     const isSmallIcon = iconSize === 'small';
     const cls = cx('category-icon', isSmallIcon ? 'category-icon--small' : '');
     const svgSize = isSmallIcon ? 16 : 20;
@@ -75,5 +77,5 @@ export default function CategoryIcon({ icon, label, tooltip, wrapperStyle, color
             setHover(v => !v);
         }
     }, []);
-    return (_jsxs("span", { ref: ref, className: "category-icon__wrap", onPointerEnter: handleHoverOn, onPointerLeave: handleHoverOff, onFocus: handleHoverOn, onBlur: handleHoverOff, onKeyDown: handleKeyDown, role: "button", tabIndex: 0, "aria-label": typeof tipText === 'string' ? tipText : undefined, "aria-haspopup": !!tipText, "aria-expanded": hover, "data-tooltip-ignore": true, children: [_jsx(Icon, { icon: icon, label: label, className: cls, imgClassName: "category-icon__image", maskClassName: "category-icon__mask", svgClassName: "category-icon__svg", wrapperStyle: resolvedWrapperStyle, size: svgSize }), hover && tipText && (_jsx(InfoTooltip, { anchorRect: anchorRect, text: typeof tipText === 'string' ? tipText : undefined, offset: 8, onClose: handleTooltipClose, className: "category-icon__tooltip", ariaLabel: typeof tipText === 'string' ? tipText : undefined }))] }));
+    return (_jsxs("span", { ref: ref, className: "category-icon__wrap", onPointerEnter: handleHoverOn, onPointerLeave: handleHoverOff, onFocus: handleHoverOn, onBlur: handleHoverOff, onKeyDown: handleKeyDown, role: "button", tabIndex: 0, "aria-label": typeof tipText === 'string' ? t('common.descriptionFor', { name: tipText, defaultValue: `${tipText} 설명` }) : undefined, "aria-haspopup": !!tipText, "aria-expanded": hover, "data-tooltip-ignore": true, children: [_jsx(Icon, { icon: icon, label: label, className: cls, imgClassName: "category-icon__image", maskClassName: "category-icon__mask", svgClassName: "category-icon__svg", wrapperStyle: resolvedWrapperStyle, size: svgSize }), hover && tipText && (_jsx(InfoTooltip, { anchorRect: anchorRect, text: typeof tipText === 'string' ? tipText : undefined, offset: 8, onClose: handleTooltipClose, className: "category-icon__tooltip", ariaLabel: typeof tipText === 'string' ? tipText : undefined }))] }));
 }

package/dist/packages/core/src/i18n/locales/en.json

@@ -30,6 +30,7 @@
         "likeCount": "{{count}} likes",
         "selectedOfMax": "{{count}} of {{max}}",
         "downloadCount": "{{count}} downloads",
+        "descriptionFor": "About {{name}}",
         "search": "Search",
         "empty": "No data.",
         "yes": "Yes",

package/dist/packages/core/src/i18n/locales/ko.json

@@ -28,6 +28,7 @@
         "download": "다운로드",
         "likeCount": "좋아요 {{count}}",
         "downloadCount": "가져간 수 {{count}}",
+        "descriptionFor": "{{name}} 설명",
         "search": "검색",
         "empty": "데이터가 없습니다.",
         "yes": "예",

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

@@ -46,4 +46,4 @@
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export declare const CORE_VERSION = "0.245.0";
+export declare const CORE_VERSION = "0.247.0";

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

@@ -46,4 +46,4 @@
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export const CORE_VERSION = '0.245.0';
+export const CORE_VERSION = '0.247.0';