@ihabdevteam/core 0.239.0 → 0.241.0

package/dist/ihabdevteam-core.d.ts

@@ -310,7 +310,7 @@ export declare type BadgeType = 'bar' | 'dot';
  *  - 주(week):  'YYYY년 M월 N째주' 드롭다운 + 그 주의 요일(월~일) 막대
  * 원시 렌더링은 내부 BarChartCanvas가 담당한다.
  */
-export declare function BarChart({ size, barWidth, titleKey, data, colorA, colorB, labelAKey, labelBKey, showTotal, totalUnitKey, totalLabelKey, control: controlProp, hideControls, rate, rateAgg, tightMax, avgMode, totalFormat, series, seriesMode, loading, onDetail, headExtra, headSegment, icon, disc, onClick, cardAriaLabel, cardTooltip, detailSize, barGap, baseline, className, inGrid, }: BarChartProps): JSX.Element;
+export declare function BarChart({ focusableBars, size, barWidth, titleKey, data, colorA, colorB, labelAKey, labelBKey, showTotal, totalUnitKey, totalLabelKey, control: controlProp, hideControls, rate, rateAgg, tightMax, avgMode, totalFormat, series, seriesMode, loading, onDetail, headExtra, headSegment, icon, disc, onClick, cardAriaLabel, cardTooltip, detailSize, barGap, baseline, className, inGrid, }: BarChartProps): JSX.Element;
 
 /** @public */
 export declare interface BarChartControl {
@@ -347,6 +347,15 @@ export declare function BarChartControls({ control }: {
 }): JSX.Element;
 
 export declare interface BarChartProps {
+    /** 막대 칸을 **자판으로 짚을 수 있게** 한다(말귀 요청 (52), 2026-10-02).
+     *
+     *  켜면 칸마다 `tabIndex=0` 과 이름(`aria-label`)이 붙고, 초점을 받으면 얹었을 때와
+     *  **같은 풍선**이 뜬다. 전에는 값이 얹어야 뜨는 풍선에만 있어 자판·낭독기로는 막대
+     *  하나하나의 수를 읽을 길이 **아예 없었다.**
+     *
+     *  **기본은 거짓이다** — 막대가 서른이면 정지점이 서른 는다. 그 차림표가 화면의
+     *  본문인 자리(대시보드의 주 그래프 등)에서 켠다. 곁들이로 선 작은 그래프에는 안 켠다. */
+    focusableBars?: boolean;
     /**
      * 크기 — 'small'|'medium'|'large' (기본: 'medium'). 캔버스 크기뿐 아니라 정보량도 함께 조절한다.
      *  - small:  대시보드 작은 그리드용 블럭. 컨트롤(headRight)만 생략하고 total/legend는 medium과 동일하게 유지
@@ -1088,10 +1097,20 @@ export declare interface ChartPoint {
  * 공유하도록 두 컴포넌트가 내부적으로 사용한다.
  * @public
  */
-export declare function ChartSection({ title, titleClassName, icon, disc, headRight, headFloat, headSegment, headMenuItems, collapseBelow, onClick, ariaLabel, tooltip, totalNum, totalUnit, totalLabel, subRow, subRowAlign, className, inGrid, children }: ChartSectionProps): JSX.Element;
+export declare function ChartSection({ title, titleClassName, titleLevel, icon, disc, headRight, headFloat, headSegment, headMenuItems, collapseBelow, onClick, ariaLabel, tooltip, totalNum, totalUnit, totalLabel, subRow, subRowAlign, className, inGrid, children }: ChartSectionProps): JSX.Element;
 
 /** @public */
 export declare interface ChartSectionProps {
+    /** 제목을 **머리글 몇 급**으로 그릴지(말귀 요청 (51), 2026-10-02).
+     *
+     *  전에는 제목이 `<div class="h3">` 였다 — `h3` 는 **글자 꼴**이지 머리글이 아니다.
+     *  그래서 창 하나에 칸이 셋 서는데 **머리글이 0 개**였고, 낭독기로 건너뛸 자리가
+     *  없었다(말귀 실측: 단어훈련 분석 창에서 h1~h6 · `role=heading` 둘 다 0).
+     *
+     *  기본 3 은 글자 꼴 기본(`titleClassName = 'h3'`)과 같은 급이다. 페이지 본문에 바로
+     *  서는 칸이면 2 로 올린다 — 급을 건너뛰면 머리글로 훑는 사람에게 층이 빈 것처럼 읽힌다.
+     *  `0` 을 주면 전과 같이 `div` 로 그린다(머리글 급을 부르는 쪽이 못 정하는 자리용). */
+    titleLevel?: 0 | 2 | 3 | 4 | 5 | 6;
     /** 섹션 제목 */
     title: ReactNode;
     /** 제목 왼쪽 아이콘 — `Section` 의 것과 같은 자리·같은 색 */
@@ -1626,7 +1645,7 @@ export declare function copyText(text: string): Promise<boolean>;
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export declare const CORE_VERSION = "0.239.0";
+export declare const CORE_VERSION = "0.241.0";
 
 /** @public */
 declare const coreDefault: Record<string, unknown>;

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

@@ -13,4 +13,4 @@ import type { BarChartProps } from './barChartTypes';
  *  - 주(week):  'YYYY년 M월 N째주' 드롭다운 + 그 주의 요일(월~일) 막대
  * 원시 렌더링은 내부 BarChartCanvas가 담당한다.
  */
-export default function BarChart({ size, barWidth, titleKey, data, colorA, colorB, labelAKey, labelBKey, showTotal, totalUnitKey, totalLabelKey, control: controlProp, hideControls, rate, rateAgg, tightMax, avgMode, totalFormat, series, seriesMode, loading, onDetail, headExtra, headSegment, icon, disc, onClick, cardAriaLabel, cardTooltip, detailSize, barGap, baseline, className, inGrid, }: BarChartProps): import("react").JSX.Element;
+export default function BarChart({ focusableBars, size, barWidth, titleKey, data, colorA, colorB, labelAKey, labelBKey, showTotal, totalUnitKey, totalLabelKey, control: controlProp, hideControls, rate, rateAgg, tightMax, avgMode, totalFormat, series, seriesMode, loading, onDetail, headExtra, headSegment, icon, disc, onClick, cardAriaLabel, cardTooltip, detailSize, barGap, baseline, className, inGrid, }: BarChartProps): import("react").JSX.Element;

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

@@ -22,7 +22,7 @@ function 미래칸(d, 옛표시 = true) {
     /* `baseline` 을 쓰는 차트는 −1 이 진짜 값이라 옛 표시를 보지 않는다 — 부르는 쪽이 옛표시=false 로 끈다 */
     return d.future === true || (옛표시 && d.a === -1);
 }
-function BarChartCanvas({ data, colorA, colorB, labelA, labelB, barWidth = 10, barGap = 1, height = 140, maxOverride, tightMax, seriesColors, seriesLabels, rateLabels, grouped = false, baseline }) {
+function BarChartCanvas({ data, colorA, colorB, labelA, labelB, barWidth = 10, barGap = 1, height = 140, maxOverride, tightMax, seriesColors, seriesLabels, rateLabels, grouped = false, baseline, focusableBars = false }) {
     // colorB 미지정 시 단일 계열(A) 모드
     const single = !colorB;
     const stacked = !!(seriesColors && seriesColors.length > 0);
@@ -73,6 +73,54 @@ function BarChartCanvas({ data, colorA, colorB, labelA, labelB, barWidth = 10, b
     const 눈금자리 = (t) => (기준 != null ? (1 - (t - (기준 - padded)) / (2 * padded)) : (1 - t / padded));
     const [tooltip, setTooltip] = useState(null);
     const handleBarLeave = useCallback(() => setTooltip(null), []);
+    /* **한 칸이 말하는 것을 한 곳에서 짓는다**(말귀 요청 (52), 2026-10-02).
+       전에는 이 셈이 `onMouseEnter` 손잡이 안에만 있어, **얹는 사람만** 수를 읽을 수 있었다.
+       같은 글을 풍선·초점·`aria-label` 셋이 쓰도록 밖으로 뺀다 — 보는 말과 들리는 말이
+       갈리지 않는다. */
+    const 풍선내용 = useCallback((d, parts) => {
+        const title = [d.label, d.sublabel].filter(Boolean).join(' ');
+        let items;
+        if (stacked && grouped && d.rawPartsB) {
+            /* 계열별 비율 — 잰 것이 없는 계열은 0% 가 아니라 '-' 다(0% 는 "다 틀렸다" 로 읽힌다) */
+            items = (seriesLabels ?? []).map((lb, k) => {
+                const 분모 = d.rawPartsB[k] ?? 0;
+                return { text: 분모 > 0 ? `${lb}: ${parts[k] ?? 0}% (${d.rawParts?.[k] ?? 0}/${분모})` : `${lb}: -`, color: (seriesColors ?? [])[k] };
+            });
+        }
+        else if (stacked && grouped) {
+            /* 자리가 고정이라 0 도 적는다 — 빈 자리가 무엇인지 알 수 있게 */
+            items = (seriesLabels ?? []).map((lb, k) => ({ text: `${lb}: ${부호붙이기(parts[k] ?? 0)}`, color: (seriesColors ?? [])[k] }));
+        }
+        else if (stacked) {
+            const 전부 = (seriesLabels ?? []).map((lb, k) => ({ text: `${lb}: ${parts[k] ?? 0}`, color: (seriesColors ?? [])[k] }));
+            const 있는 = 전부.filter((_, k) => (parts[k] ?? 0) > 0);
+            items = 있는.length ? 있는 : 전부;
+        }
+        else if (rateLabels && !single) {
+            items = [{ text: `${labelA} ${수(d.a)}%`, color: colorA }, { text: `${labelB} ${수(d.b)}%`, color: colorB }];
+        }
+        else if (rateLabels && d.rawB !== undefined) {
+            items = [{ text: `${rateLabels.total} ${d.rawB}` }, { text: `${rateLabels.done} ${d.rawA ?? 0}`, color: colorA }];
+        }
+        else if (single) {
+            items = [{ text: `${labelA}: ${수(d.a)}`, color: colorA }];
+        }
+        else {
+            items = [{ text: `${labelA}: ${수(d.a)}`, color: colorA }, { text: `${labelB}: ${수(d.b)}`, color: colorB }];
+        }
+        return { title, items };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [stacked, grouped, seriesLabels, seriesColors, rateLabels, single, labelA, labelB, colorA, colorB, 기준]);
+    const 풍선열기 = useCallback((el, d, parts) => {
+        const r = el.getBoundingClientRect();
+        const { title, items } = 풍선내용(d, parts);
+        setTooltip({ rect: { left: r.left, top: r.top, right: r.right, bottom: r.bottom, width: r.width, height: r.height }, title, items });
+    }, [풍선내용]);
+    /* 낭독기가 읽을 한 칸의 이름 — 풍선과 같은 글을 한 줄로 잇는다 */
+    const 막대이름 = useCallback((d, parts) => {
+        const { title, items } = 풍선내용(d, parts);
+        return [title, ...items.map(i => i.text)].filter(Boolean).join(', ');
+    }, [풍선내용]);
     /* 기준선 모드에서는 오름·내림이 뜻이라 양수에도 + 를 붙인다(부호가 없으면 툴팁만 보고 방향을 알 수 없다) */
     const 부호붙이기 = (v) => (기준 != null && v > 기준 ? `+${v}` : `${v}`);
     /* 떠 있는 동안 **스크롤하거나 막대 밖을 누르면** 닫는다 — 터치에서는 톡이 호환 mouseenter 로 띄우고 mouseleave 는 다른 곳을
@@ -108,42 +156,23 @@ function BarChartCanvas({ data, colorA, colorB, labelA, labelB, barWidth = 10, b
                                         const ha = isFuture ? 0 : 높이(d.a);
                                         const hb = isFuture ? 0 : 높이(d.b);
                                         const parts = (d.parts ?? []).map(수);
-                                        return (_jsx("div", { className: `manager-bar-chart-col${grouped && stacked ? ' manager-bar-chart-col--group' : ''}`, style: { cursor: isFuture ? 'default' : 'pointer' }, onMouseEnter: isFuture ? undefined : (e) => {
-                                                const r = e.currentTarget.getBoundingClientRect();
-                                                /* 한 줄에 `A: 3 / B: 5 / …` 로 늘어놓던 것을 줄마다 하나로 — 유형이 넷·다섯이면
-                                                   가로로 길어져 읽기 어려웠다(사용자가 짚음). 제목은 날짜, 항목은 색 점·이름·값. */
-                                                const title = [d.label, d.sublabel].filter(Boolean).join(' ');
-                                                let items;
-                                                if (stacked && grouped && d.rawPartsB) {
-                                                    /* 계열별 비율 — 잰 것이 없는 계열은 0% 가 아니라 '-' 다(0% 는 "다 틀렸다" 로 읽힌다) */
-                                                    items = (seriesLabels ?? []).map((lb, k) => {
-                                                        const 분모 = d.rawPartsB[k] ?? 0;
-                                                        return { text: 분모 > 0 ? `${lb}: ${parts[k] ?? 0}% (${d.rawParts?.[k] ?? 0}/${분모})` : `${lb}: -`, color: (seriesColors ?? [])[k] };
-                                                    });
-                                                }
-                                                else if (stacked && grouped) {
-                                                    /* 자리가 고정이라 0 도 적는다 — 빈 자리가 무엇인지 알 수 있게 */
-                                                    items = (seriesLabels ?? []).map((lb, k) => ({ text: `${lb}: ${부호붙이기(parts[k] ?? 0)}`, color: (seriesColors ?? [])[k] }));
-                                                }
-                                                else if (stacked) {
-                                                    const 전부 = (seriesLabels ?? []).map((lb, k) => ({ text: `${lb}: ${parts[k] ?? 0}`, color: (seriesColors ?? [])[k] }));
-                                                    const 있는 = 전부.filter((_, k) => (parts[k] ?? 0) > 0);
-                                                    items = 있는.length ? 있는 : 전부;
-                                                }
-                                                else if (rateLabels && !single) {
-                                                    items = [{ text: `${labelA} ${수(d.a)}%`, color: colorA }, { text: `${labelB} ${수(d.b)}%`, color: colorB }];
-                                                }
-                                                else if (rateLabels && d.rawB !== undefined) {
-                                                    items = [{ text: `${rateLabels.total} ${d.rawB}` }, { text: `${rateLabels.done} ${d.rawA ?? 0}`, color: colorA }];
-                                                }
-                                                else if (single) {
-                                                    items = [{ text: `${labelA}: ${수(d.a)}`, color: colorA }];
-                                                }
-                                                else {
-                                                    items = [{ text: `${labelA}: ${수(d.a)}`, color: colorA }, { text: `${labelB}: ${수(d.b)}`, color: colorB }];
-                                                }
-                                                setTooltip({ rect: { left: r.left, top: r.top, right: r.right, bottom: r.bottom, width: r.width, height: r.height }, title, items });
-                                            }, onMouseLeave: handleBarLeave, children: !isFuture && (stacked && grouped ? (
+                                        return (_jsx("div", { className: `manager-bar-chart-col${grouped && stacked ? ' manager-bar-chart-col--group' : ''}`, 
+                                            /* **손가락은 그대로 둔다 — 걷으면 아이폰에서 풍선이 아예 안 뜬다.**
+                                               말귀가 "`onClick` 이 없는데 손가락이 뜬다"(요청 (52))고 짚은 것이 맞다.
+                                               그런데 **iOS 는 '누를 수 없는' 요소에 톡하면 호환 마우스 이벤트를 아예
+                                               안 보낸다** — `cursor: pointer` 가 그 판정에 든다(`test/
+                                               touchInteractions0915.test.tsx` 머리글에 그 차례가 적혀 있다).
+                                               걷으면 데스크톱의 거짓 손가락 하나를 없애는 대신 **손가락으로 쓰는
+                                               기기에서 수를 읽을 길이 통째로 사라진다.** 얹으면 값이 뜨니 아주 거짓도
+                                               아니다. 자판 쪽은 아래 `focusableBars` 가 따로 연다. */
+                                            style: { cursor: isFuture ? 'default' : 'pointer' }, tabIndex: focusableBars && !isFuture ? 0 : undefined, role: focusableBars && !isFuture ? 'img' : undefined, "aria-label": focusableBars && !isFuture ? 막대이름(d, parts) : undefined, onMouseEnter: isFuture ? undefined : (e) => 풍선열기(e.currentTarget, d, parts), onFocus: isFuture || !focusableBars ? undefined : (e) => 풍선열기(e.currentTarget, d, parts), onBlur: focusableBars ? handleBarLeave : undefined, 
+                                            /* **수를 자판으로도 읽는다**(말귀 요청 (52), 2026-10-02). 전에는 값이
+                                               얹어야 뜨는 풍선에만 있어, 자판·낭독기로는 막대 하나하나의 수를 읽을
+                                               길이 **아예 없었다**. 이름은 풍선과 같은 글로 짓는다 — 보는 말과
+                                               들리는 말이 갈리지 않는다.
+                                               **기본은 꺼 둔다**: 막대가 서른이면 정지점이 서른 는다. 그 차림표가
+                                               화면의 본문인 자리에서만 켠다. */
+                                            onMouseLeave: handleBarLeave, children: !isFuture && (stacked && grouped ? (
                                             /* 나란히 — 계열 k 는 늘 k 번째 자리. 0 이어도 자리를 두어 칸마다 같은 색이 같은 곳에 선다 */
                                             (seriesColors ?? []).map((c, k) => {
                                                 const v = parts[k] ?? 0;
@@ -261,7 +290,7 @@ const BAR_SIZE_PRESET = {
  *  - 주(week):  'YYYY년 M월 N째주' 드롭다운 + 그 주의 요일(월~일) 막대
  * 원시 렌더링은 내부 BarChartCanvas가 담당한다.
  */
-export default function BarChart({ size = 'medium', barWidth, titleKey, data, colorA, colorB, labelAKey, labelBKey, showTotal = false, totalUnitKey, totalLabelKey, control: controlProp, hideControls = false, rate = false, rateAgg = 'dayMean', tightMax = false, avgMode = false, totalFormat, series, seriesMode = 'stack', loading = false, onDetail, headExtra, headSegment, icon, disc, onClick, cardAriaLabel, cardTooltip, detailSize = 32, barGap, baseline, className, inGrid = false, }) {
+export default function BarChart({ focusableBars, size = 'medium', barWidth, titleKey, data, colorA, colorB, labelAKey, labelBKey, showTotal = false, totalUnitKey, totalLabelKey, control: controlProp, hideControls = false, rate = false, rateAgg = 'dayMean', tightMax = false, avgMode = false, totalFormat, series, seriesMode = 'stack', loading = false, onDetail, headExtra, headSegment, icon, disc, onClick, cardAriaLabel, cardTooltip, detailSize = 32, barGap, baseline, className, inGrid = false, }) {
     const { t, i18n } = useTranslation();
     const sizePreset = BAR_SIZE_PRESET[size];
     // 외부 control 미지정 시 내부 컨트롤 사용 (단독 차트 하위 호환)
@@ -412,5 +441,5 @@ export default function BarChart({ size = 'medium', barWidth, titleKey, data, co
            → 막대 156px 로 카드마다 30px, 섹션 372 → 342px.
            그래서 **그려질 것과 같은 뼈대**(칸 자리 + 축 한 줄)를 세우고 그 안에 스피너를 둔다.
            키는 막대 자리(`sizePreset.height`)에서 오므로 크기 보기(size)가 달라도 따라온다. */
-        _jsx("div", { className: "manager-bar-chart-wrap manager-bar-chart-loading", "aria-busy": "true", children: _jsx("div", { className: "manager-bar-chart-inner", children: _jsxs("div", { className: "manager-bar-chart-area manager-bar-chart-area--loading", children: [_jsx("div", { className: "manager-bar-chart-plot manager-bar-chart-plot--loading", style: { height: sizePreset.height }, children: _jsx(Loader, { size: 32 }) }), _jsx("div", { className: "manager-bar-chart-x-axis", "aria-hidden": "true", children: _jsxs("span", { className: "manager-bar-chart-x-axis__label", children: [_jsx("span", { className: "caption-1 manager-bar-chart-x-axis__main", children: "\u00A0" }), bars.some(b => !!b.sublabel) && _jsx("span", { className: "caption-1", children: "\u00A0" })] }) })] }) }) })) : (_jsx(BarChartCanvas, { data: bars, colorA: colorA, colorB: labelBKey ? colorB : undefined, labelA: t(labelAKey), labelB: labelBKey ? t(labelBKey) : undefined, barWidth: barWidth ?? sizePreset.barWidth, barGap: barGap, baseline: baseline, height: sizePreset.height, maxOverride: rate ? 100 : undefined, tightMax: tightMax, seriesColors: series?.map(s => s.color), seriesLabels: series?.map(s => s.label), rateLabels: rate ? { total: t('trainingStatus.today.tooltipTotal', '전체'), done: t('trainingStatus.today.tooltipDone', '완료') } : undefined, grouped: 나란히 })) }));
+        _jsx("div", { className: "manager-bar-chart-wrap manager-bar-chart-loading", "aria-busy": "true", children: _jsx("div", { className: "manager-bar-chart-inner", children: _jsxs("div", { className: "manager-bar-chart-area manager-bar-chart-area--loading", children: [_jsx("div", { className: "manager-bar-chart-plot manager-bar-chart-plot--loading", style: { height: sizePreset.height }, children: _jsx(Loader, { size: 32 }) }), _jsx("div", { className: "manager-bar-chart-x-axis", "aria-hidden": "true", children: _jsxs("span", { className: "manager-bar-chart-x-axis__label", children: [_jsx("span", { className: "caption-1 manager-bar-chart-x-axis__main", children: "\u00A0" }), bars.some(b => !!b.sublabel) && _jsx("span", { className: "caption-1", children: "\u00A0" })] }) })] }) }) })) : (_jsx(BarChartCanvas, { focusableBars: focusableBars, data: bars, colorA: colorA, colorB: labelBKey ? colorB : undefined, labelA: t(labelAKey), labelB: labelBKey ? t(labelBKey) : undefined, barWidth: barWidth ?? sizePreset.barWidth, barGap: barGap, baseline: baseline, height: sizePreset.height, maxOverride: rate ? 100 : undefined, tightMax: tightMax, seriesColors: series?.map(s => s.color), seriesLabels: series?.map(s => s.label), rateLabels: rate ? { total: t('trainingStatus.today.tooltipTotal', '전체'), done: t('trainingStatus.today.tooltipDone', '완료') } : undefined, grouped: 나란히 })) }));
 }

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

@@ -37,6 +37,16 @@ export interface ChartHeadSegment {
 }
 /** @public */
 export interface ChartSectionProps {
+    /** 제목을 **머리글 몇 급**으로 그릴지(말귀 요청 (51), 2026-10-02).
+     *
+     *  전에는 제목이 `<div class="h3">` 였다 — `h3` 는 **글자 꼴**이지 머리글이 아니다.
+     *  그래서 창 하나에 칸이 셋 서는데 **머리글이 0 개**였고, 낭독기로 건너뛸 자리가
+     *  없었다(말귀 실측: 단어훈련 분석 창에서 h1~h6 · `role=heading` 둘 다 0).
+     *
+     *  기본 3 은 글자 꼴 기본(`titleClassName = 'h3'`)과 같은 급이다. 페이지 본문에 바로
+     *  서는 칸이면 2 로 올린다 — 급을 건너뛰면 머리글로 훑는 사람에게 층이 빈 것처럼 읽힌다.
+     *  `0` 을 주면 전과 같이 `div` 로 그린다(머리글 급을 부르는 쪽이 못 정하는 자리용). */
+    titleLevel?: 0 | 2 | 3 | 4 | 5 | 6;
     /** 섹션 제목 */
     title: ReactNode;
     /** 제목 왼쪽 아이콘 — `Section` 의 것과 같은 자리·같은 색 */
@@ -116,4 +126,4 @@ export interface ChartSectionProps {
  * 공유하도록 두 컴포넌트가 내부적으로 사용한다.
  * @public
  */
-export default function ChartSection({ title, titleClassName, icon, disc, headRight, headFloat, headSegment, headMenuItems, collapseBelow, onClick, ariaLabel, tooltip, totalNum, totalUnit, totalLabel, subRow, subRowAlign, className, inGrid, children }: ChartSectionProps): import("react").JSX.Element;
+export default function ChartSection({ title, titleClassName, titleLevel, icon, disc, headRight, headFloat, headSegment, headMenuItems, collapseBelow, onClick, ariaLabel, tooltip, totalNum, totalUnit, totalLabel, subRow, subRowAlign, className, inGrid, children }: ChartSectionProps): import("react").JSX.Element;

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

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import './ChartSection.css';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useId, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import Icon from './Icon';
 import SectionHeadFloat from './SectionHeadFloat';
@@ -29,7 +29,7 @@ export function ChartTotal({ label, children }) {
  * 공유하도록 두 컴포넌트가 내부적으로 사용한다.
  * @public
  */
-export default function ChartSection({ title, titleClassName = 'h3', icon, disc, headRight, headFloat, headSegment, headMenuItems, collapseBelow = 420, onClick, ariaLabel, tooltip, totalNum, totalUnit, totalLabel, subRow, subRowAlign = 'start', className, inGrid = false, children }) {
+export default function ChartSection({ title, titleClassName = 'h3', titleLevel = 3, icon, disc, headRight, headFloat, headSegment, headMenuItems, collapseBelow = 420, onClick, ariaLabel, tooltip, totalNum, totalUnit, totalLabel, subRow, subRowAlign = 'start', className, inGrid = false, children }) {
     const { t } = useTranslation();
     const secRef = useRef(null);
     /* 설명 툴팁 — StatChart 와 같은 결(카드 사각형 기준, 포인터가 나가거나 초점이 빠지면 닫힘).
@@ -107,12 +107,14 @@ export default function ChartSection({ title, titleClassName = 'h3', icon, disc,
     const 수줄 = (totalNum != null || totalLabel) ? (_jsxs(ChartTotal, { label: totalLabel, children: [totalNum != null && _jsx("span", { className: "barchart-total__num h0", children: totalNum }), totalUnit && _jsx("span", { className: "barchart-total__unit h5", children: totalUnit })] })) : null;
     /* 머리 오른쪽에는 **고르개와 `headRight` 만** 남는다 — 고르개가 먼저, 상세보기 단추가 오른쪽 끝(사용자 지시 2026-09-17) */
     const 머리오른쪽 = (오른쪽 || headSegment) ? (_jsxs("div", { className: "manager-section__head-right", children: [headSegment && (접힘 ? (_jsx(Button, { htmlType: "button", size: 32, type: "dot", icon: "ellipsis", ariaLabel: headSegment.ariaLabel ?? t('common.more', '더보기'), showTooltipInfo: headSegment.ariaLabel ?? t('common.more', '더보기'), "aria-haspopup": "menu", "aria-expanded": !!메뉴자리, onClick: 메뉴열기 })) : (_jsx(SegmentedControl, { size: 32, ariaLabel: headSegment.ariaLabel, options: headSegment.options.map(o => ({ key: o.key, label: o.label, disabled: o.disabled })), value: headSegment.value, onChange: headSegment.onChange }))), 오른쪽] })) : null;
-    return (_jsxs("section", { ref: secRef, className: ['manager-section', inGrid && 'manager-section--grid', onClick && 'manager-section--clickable', className].filter(Boolean).join(' '), onClick: onClick ? 카드누름 : undefined, onKeyDown: onClick ? 카드키 : undefined, onPointerEnter: tooltip ? 설명보이기 : undefined, onPointerLeave: tooltip ? 설명닫기 : undefined, onFocus: tooltip ? 설명보이기 : undefined, onBlur: tooltip ? 설명닫기 : undefined, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, "aria-label": onClick ? (ariaLabel ?? (typeof title === 'string' ? title : undefined)) : undefined, children: [tooltip && 설명자리 && (_jsx(TooltipInfo, { anchorRect: {
+    const 제목id = useId();
+    const 제목태그 = titleLevel ? `h${titleLevel}` : 'div';
+    return (_jsxs("section", { ref: secRef, className: ['manager-section', inGrid && 'manager-section--grid', onClick && 'manager-section--clickable', className].filter(Boolean).join(' '), onClick: onClick ? 카드누름 : undefined, onKeyDown: onClick ? 카드키 : undefined, onPointerEnter: tooltip ? 설명보이기 : undefined, onPointerLeave: tooltip ? 설명닫기 : undefined, onFocus: tooltip ? 설명보이기 : undefined, onBlur: tooltip ? 설명닫기 : undefined, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, "aria-label": onClick ? (ariaLabel ?? (typeof title === 'string' ? title : undefined)) : undefined, "aria-labelledby": !onClick && title != null ? 제목id : undefined, children: [tooltip && 설명자리 && (_jsx(TooltipInfo, { anchorRect: {
                     left: 설명자리.left,
                     top: 설명자리.top + 21,
                     right: 설명자리.right,
                     bottom: 설명자리.bottom,
                     width: 설명자리.width,
                     height: 설명자리.height,
-                }, text: tooltip })), headFloat && _jsx(SectionHeadFloat, { children: headFloat }), _jsxs("div", { className: "manager-section__head", children: [_jsxs("div", { className: "manager-section__title-row", children: [icon && _jsx(Icon, { icon: icon, label: typeof title === 'string' ? title : undefined, className: "manager-section__icon" }), _jsx("div", { className: ['manager-section__title', titleClassName].filter(Boolean).join(' '), children: title })] }), 머리오른쪽, disc && _jsx("div", { className: "manager-section__disc body-3", children: disc })] }), (수줄 || subRow) && (_jsxs("div", { className: ['barchart-sub-row', subRowAlign !== 'start' && `barchart-sub-row--${subRowAlign}`].filter(Boolean).join(' '), children: [수줄, subRow] })), children, 메뉴자리 && (_jsx(Tooltip, { anchorRect: 메뉴자리, onClose: 메뉴닫기, ariaLabel: headSegment?.ariaLabel ?? t('tooltip.menu', '메뉴'), children: _jsx(MenuTooltip, { columns: [{ items: 메뉴항목 }], onClose: 메뉴닫기, size: "small" }) }))] }));
+                }, text: tooltip })), headFloat && _jsx(SectionHeadFloat, { children: headFloat }), _jsxs("div", { className: "manager-section__head", children: [_jsxs("div", { className: "manager-section__title-row", children: [icon && _jsx(Icon, { icon: icon, label: typeof title === 'string' ? title : undefined, className: "manager-section__icon" }), _jsx(제목태그, { id: 제목id, className: ['manager-section__title', titleClassName].filter(Boolean).join(' '), children: title })] }), 머리오른쪽, disc && _jsx("div", { className: "manager-section__disc body-3", children: disc })] }), (수줄 || subRow) && (_jsxs("div", { className: ['barchart-sub-row', subRowAlign !== 'start' && `barchart-sub-row--${subRowAlign}`].filter(Boolean).join(' '), children: [수줄, subRow] })), children, 메뉴자리 && (_jsx(Tooltip, { anchorRect: 메뉴자리, onClose: 메뉴닫기, ariaLabel: headSegment?.ariaLabel ?? t('tooltip.menu', '메뉴'), children: _jsx(MenuTooltip, { columns: [{ items: 메뉴항목 }], onClose: 메뉴닫기, size: "small" }) }))] }));
 }

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

@@ -5,7 +5,11 @@
   padding: 0 16px;
   text-align: left;
   color: var(--color-gray);
-  cursor: pointer;
+  /* **손가락은 누를 수 있는 머리에만**(말귀가 짚음, 2026-10-02). 전에는 `.table-field`
+     전부에 걸려 **정렬 못 하는 칸까지** 손가락을 띄웠다(말귀 보고서 목록 머리 여섯).
+     누르는 것은 그 안의 진짜 `<button>` 이고, 그 단추가 서는 머리에만 띄운다.
+     여기는 `BarChart` 의 막대 칸과 다르다 — 거기는 손가락을 걷으면 iOS 가 호환 마우스
+     이벤트를 안 보내 풍선이 통째로 죽는다. 이 머리는 얹어서 얻을 것이 없어 그 셈이 없다. */
   white-space: nowrap;
   user-select: none;
   /* 머리행과 본문은 별개의 grid라 컬럼 폭이 저마다 계산된다. .table-cell 에는 min-width:0
@@ -29,6 +33,7 @@
    높이도 물려받게 `align-self: stretch` — kscan 이 `.table-field { height: 38px }`
    로 줄여 둔 인쇄용 표에서 단추가 제 높이로 부풀지 않게 한다. */
 .table-field__button {
+  cursor: pointer;
   flex: 1 1 auto;
   min-width: 0;
   align-self: stretch;

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

@@ -718,16 +718,38 @@
  * 셋을 늘 보이게 두지 않는 이유는 따로 있다 — 표 아래가 동그라미로 가득 차
  * 정작 매긴 표시가 안 보인다. */
 .word-table-cell__score-slot {
-    display: none;
+    /* **지우지 않고 감춘다**(말귀 요청 (53), 2026-10-02).
+       `display: none` 이던 때는 **초점을 못 받아 자판으로 매길 길이 아예 없었다**
+       (말귀 실측: 채점 창의 단추 36 개 중 자판으로 닿는 것 0 개. `.focus()` 를 걸어도
+       `activeElement` 가 안 바뀐다). 그러면 `:focus-within` 을 더해도 안 풀린다 —
+       초점을 못 받으니 켜질 일이 없다. 닭과 달걀이다.
+       **채점은 이 앱이 치료사에게 내미는 일 그 자체**이고, 그 가운데 걸음이 자판으로
+       막혀 있었다. 아래 `@media (hover: none)` 을 둔 까닭("얹기에 기대면 안 되는 자리")이
+       자판에도 그대로 선다.
+       잘라서 감추면 **초점은 받고 눈에는 안 보인다** — 초점이 가면 아래 `:focus-within`
+       이 되돌려 보이게 한다(안 보이는 자리에 초점이 서면 어디 있는지 모른다). */
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
 }
 
 /* 고른 것은 늘 보인다 — 표를 훑어 "어디를 어떻게 봤는지"가 한눈에 들어와야 한다.
    마우스를 올리거나 포커스를 받으면 셋이 함께 나타나 고를 수 있다. */
 .word-table-cell__score-slot--on,
 .word-table-block__card:hover .word-table-cell__score-slot,
+.word-table-block__card:focus-within .word-table-cell__score-slot,
 .word-table-block__edit-cell:hover .word-table-cell__score-slot,
 .word-table-block__edit-cell:focus-within .word-table-cell__score-slot,
 .word-table-cell__score:focus-within .word-table-cell__score-slot {
+    /* 잘라 둔 것을 되돌린다 — 위 다섯 줄을 모두 거둬야 제자리에 선다 */
+    position: static;
+    width: auto;
+    height: auto;
+    overflow: visible;
+    clip-path: none;
     display: inline-flex;
 }
 
@@ -738,6 +760,11 @@
    라고 적혀 있지만 매기는 것은 슬롯 단추뿐이라, 보이지 않으면 길이 없다. */
 @media (hover: none) {
     .word-table-cell__score-slot {
+        position: static;
+        width: auto;
+        height: auto;
+        overflow: visible;
+        clip-path: none;
         display: inline-flex;
     }
 }
@@ -788,6 +815,8 @@
    손가락 기기에서는 아예 늘 서 있다. 지난 채점을 그대로 펴 보이는 창에서는 누를 일이
    없는데, 그 셋이 서면 **아직 안 매긴 표처럼** 보인다.
    `--on`(고른 것)은 건드리지 않는다 — 그것이 이 표의 알맹이다. */
+/* 읽기만 하는 표에서는 **지운다** — 자판으로 매길 일이 없으니 감출 까닭도 없고,
+   잘라서 두면 아무 일도 안 하는 정지점이 칸마다 둘씩 는다(㊹ 에서 걷은 그 자리다). */
 .word-table--score-readonly .word-table-cell__score-slot:not(.word-table-cell__score-slot--on) {
     display: none;
 }

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

@@ -160,7 +160,7 @@ function WordCell({ label, subLabel, colloquialLabel, homonum, showWord = true,
         obs.observe(el);
         return () => obs.disconnect();
     }, [refW, refH]);
-    return (_jsxs("div", { ref: outerRef, className: cx('word-table-cell', hasImage ? 'word-table-cell--with-image' : ''), "data-ref-w": refW, "data-ref-h": refH, children: [_jsxs("div", { className: "word-table-cell__inner", style: { transform: `scale(${scale})` }, children: [hasImage && (_jsxs("div", { className: "word-table-cell__image-wrap", children: [imgLoading && _jsx("div", { className: "word-table-cell__spinner" }), _jsx("img", { ref: imgRef, className: "word-table-cell__image", src: imageUrl, alt: label, draggable: false, style: { opacity: imgLoading ? 0 : 1 }, onLoad: handleImgLoad, onError: handleImgError })] })), showWord && _jsx("span", { className: "word-table-cell__word h0", children: label }), showPronunciation && pron && _jsxs("span", { className: "word-table-cell__sub h3", children: ["[", pron, "]"] }), showColloquial && colloquialLabel && _jsxs("span", { className: "word-table-cell__colloquial h5", children: ["[", colloquialLabel, "]"] })] }), _jsxs("div", { className: "word-table-cell__play-button", "data-audio-src": audioUrl, children: [_jsx("span", { "data-play-state": "play", style: { display: playing ? 'none' : undefined }, children: _jsx(Button, { htmlType: "button", size: buttonSize, type: "dot", icon: "play", variant: "transparent-lightGray", useBorder: false, showTooltipInfo: t('common.play', '재생'), onClick: handlePlay }) }), _jsx("span", { "data-play-state": "pause", style: { display: playing ? undefined : 'none' }, children: _jsx(Button, { htmlType: "button", size: buttonSize, type: "dot", icon: "pause", useBorder: false, selected: true, showTooltipInfo: t('common.pause', '멈춤'), onClick: handlePlay }) })] }), wordInfo && (_jsxs("div", { ref: infoRef, className: "word-table-cell__info-button", onPointerEnter: (e) => { if (!isTouchPointer(e))
+    return (_jsxs("div", { ref: outerRef, className: cx('word-table-cell', hasImage ? 'word-table-cell--with-image' : ''), "data-ref-w": refW, "data-ref-h": refH, children: [_jsxs("div", { className: "word-table-cell__inner", style: { transform: `scale(${scale})` }, children: [hasImage && (_jsxs("div", { className: "word-table-cell__image-wrap", children: [imgLoading && _jsx("div", { className: "word-table-cell__spinner" }), _jsx("img", { ref: imgRef, className: "word-table-cell__image", src: imageUrl, alt: label, draggable: false, style: { opacity: imgLoading ? 0 : 1 }, onLoad: handleImgLoad, onError: handleImgError })] })), showWord && _jsx("span", { className: "word-table-cell__word h0", children: label }), showPronunciation && pron && _jsxs("span", { className: "word-table-cell__sub h3", children: ["[", pron, "]"] }), showColloquial && colloquialLabel && _jsxs("span", { className: "word-table-cell__colloquial h5", children: ["[", colloquialLabel, "]"] })] }), _jsxs("div", { className: "word-table-cell__play-button", "data-audio-src": audioUrl, children: [_jsx("span", { "data-play-state": "play", style: { display: playing ? 'none' : undefined }, children: _jsx(Button, { htmlType: "button", size: buttonSize, type: "dot", icon: "play", variant: "transparent-lightGray", useBorder: false, showTooltipInfo: t('common.play', '재생'), ariaLabel: label ? t('common.playFor', { name: label, defaultValue: `${label} 재생` }) : t('common.play', '재생'), onClick: handlePlay }) }), _jsx("span", { "data-play-state": "pause", style: { display: playing ? undefined : 'none' }, children: _jsx(Button, { htmlType: "button", size: buttonSize, type: "dot", icon: "pause", useBorder: false, selected: true, showTooltipInfo: t('common.pause', '멈춤'), ariaLabel: label ? t('common.pauseFor', { name: label, defaultValue: `${label} 멈춤` }) : t('common.pause', '멈춤'), onClick: handlePlay }) })] }), wordInfo && (_jsxs("div", { ref: infoRef, className: "word-table-cell__info-button", onPointerEnter: (e) => { if (!isTouchPointer(e))
                     handleInfoEnter(); }, onPointerLeave: (e) => { if (!isTouchPointer(e))
                     handleInfoLeave(); }, 
                 // 이 div 자체는 포커스 대상이 아니지만 안의 Button이 포커스를 받으면

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

@@ -32,6 +32,15 @@ export interface BarChartControl {
 /** 시맨틱 사이즈 — 차트 캔버스 높이·막대 너비 프리셋 */
 export type BarChartSize = 'small' | 'medium' | 'large';
 export interface BarChartProps {
+    /** 막대 칸을 **자판으로 짚을 수 있게** 한다(말귀 요청 (52), 2026-10-02).
+     *
+     *  켜면 칸마다 `tabIndex=0` 과 이름(`aria-label`)이 붙고, 초점을 받으면 얹었을 때와
+     *  **같은 풍선**이 뜬다. 전에는 값이 얹어야 뜨는 풍선에만 있어 자판·낭독기로는 막대
+     *  하나하나의 수를 읽을 길이 **아예 없었다.**
+     *
+     *  **기본은 거짓이다** — 막대가 서른이면 정지점이 서른 는다. 그 차림표가 화면의
+     *  본문인 자리(대시보드의 주 그래프 등)에서 켠다. 곁들이로 선 작은 그래프에는 안 켠다. */
+    focusableBars?: boolean;
     /**
      * 크기 — 'small'|'medium'|'large' (기본: 'medium'). 캔버스 크기뿐 아니라 정보량도 함께 조절한다.
      *  - small:  대시보드 작은 그리드용 블럭. 컨트롤(headRight)만 생략하고 total/legend는 medium과 동일하게 유지

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

@@ -43,6 +43,8 @@
         "prevPage": "Previous page",
         "nextPage": "Next page",
         "play": "Play",
+        "playFor": "Play {{name}}",
+        "pauseFor": "Pause {{name}}",
         "pause": "Pause",
         "playPause": "Play / Pause",
         "replay": "Replay",

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

@@ -42,6 +42,8 @@
         "prevPage": "이전 페이지",
         "nextPage": "다음 페이지",
         "play": "재생",
+        "playFor": "{{name}} 재생",
+        "pauseFor": "{{name}} 멈춤",
         "pause": "멈춤",
         "playPause": "재생 / 멈춤",
         "replay": "다시듣기",

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

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

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

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