@ihabdevteam/core 0.133.0 → 0.135.0

package/dist/ihabdevteam-core.d.ts

@@ -1308,7 +1308,7 @@ export declare interface ContrastFilterPanelProps {
 }
 
 /** 모드 전환 시 composition의 초성/모음/종성을 대상 모드 값으로 변환. 종성 '없음'(NO_CODA)은 유지. */
-export declare function convertComposition(c: WordComposition, to: 'char' | 'pron', preferredCharJung?: string | null): WordComposition;
+export declare function convertComposition(c: WordComposition, to: 'char' | 'pron', preferredCharJung?: string | null, preferredCharJong?: string | null): WordComposition;
 
 /**
  * 텍스트를 클립보드에 복사. 성공 여부를 boolean으로 반환.
@@ -1369,7 +1369,7 @@ export declare function copyText(text: string): Promise<boolean>;
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export declare const CORE_VERSION = "0.133.0";
+export declare const CORE_VERSION = "0.135.0";
 
 /** @public */
 declare const coreDefault: Record<string, unknown>;
@@ -3794,6 +3794,12 @@ export declare interface PaymentPlanTier {
      * 구매 횟수가 제한되지 않는다(같은 프로모션이되 1회 제한 대상은 아닌 tier용).
      */
     openPromo?: boolean;
+    /**
+     * **계정당 1회만 살 수 있는 tier**(오픈 특가 30일 등). 이미 산 것(`ownedCodes`)이면 숨기고 기본 tier 를 카드로 올린다.
+     * 안 주면 예전처럼 라벨에 '오픈 특가' 가 있는지로 판정한다 — 그런데 라벨은 번역되므로 영어 화면에서는 판정이 실패해
+     * 이미 산 특가 카드가 남고 정가 30일권을 살 길이 없어진다. 번역되는 라벨 대신 이 값을 넘긴다.
+     */
+    onceOnly?: boolean;
     [k: string]: unknown;
 }
 

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

@@ -40,7 +40,9 @@ function BarChartCanvas({ data, colorA, colorB, labelA, labelB, barWidth = 10, h
     }, [padded]);
     const [tooltip, setTooltip] = useState(null);
     const handleBarLeave = useCallback(() => setTooltip(null), []);
-    return (_jsxs("div", { className: "manager-bar-chart-wrap", children: [_jsx("div", { className: "manager-bar-chart-inner", children: _jsx("div", { className: "manager-bar-chart-scroll", children: _jsxs("div", { className: "manager-bar-chart-area", children: [_jsxs("div", { className: "manager-bar-chart-plot", style: { height: h }, children: [ticks.slice(0, -1).map((t, i) => (_jsx("div", { className: "manager-bar-chart-gridline", style: { top: i * (h / (ticks.length - 1)) }, children: _jsx("span", { className: "manager-bar-chart-gridline__label caption-1", children: t }) }, i))), data.map((d, i) => {
+    return (_jsxs("div", { className: "manager-bar-chart-wrap", children: [_jsx("div", { className: "manager-bar-chart-inner", children: _jsx("div", { className: "manager-bar-chart-scroll", children: _jsxs("div", { className: "manager-bar-chart-area", children: [_jsxs("div", { className: "manager-bar-chart-plot", style: { height: h }, children: [ticks.slice(0, -1).map((t, i) => (
+                                    /* 눈금선은 **적힌 값의 높이**에 둔다 — 가운데 값을 반올림(최대 3 → '2')하면서 자리는 절반(1.5)에 두어 선과 숫자가 어긋났다 */
+                                    _jsx("div", { className: "manager-bar-chart-gridline", style: { top: (1 - t / padded) * h }, children: _jsx("span", { className: "manager-bar-chart-gridline__label caption-1", children: t }) }, i))), data.map((d, i) => {
                                         const isFuture = d.a === -1;
                                         /* 판 높이를 넘지 않는다 — maxOverride(진행률 100)보다 큰 값이 와도 막대가 눈금 위로 삐져나가지 않게 */
                                         const 높이 = (v) => Math.min(h, Math.max(0, (수(v) / padded) * h));

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

@@ -1,9 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
 import './Breadcrumb.css';
 import Icon from './Icon';
 /** @public */
 export default function Breadcrumb({ items, className = '' }) {
-    return (_jsx("nav", { className: `breadcrumb ${className}`.trim(), "aria-label": "breadcrumb", children: _jsx("ol", { className: "breadcrumb__list", children: items.map((item, index) => {
+    const { t } = useTranslation();
+    return (
+    /* 영어로 박혀 있어 한국어 화면에서도 낭독기가 "breadcrumb" 이라고 읽었다 — 사전을 탄다 */
+    _jsx("nav", { className: `breadcrumb ${className}`.trim(), "aria-label": t('breadcrumb.ariaLabel', '이동 경로'), children: _jsx("ol", { className: "breadcrumb__list", children: items.map((item, index) => {
                 const isLast = index === items.length - 1;
                 return (_jsxs("li", { className: "breadcrumb__item", children: [isLast ? (_jsx("span", { className: "breadcrumb__current body-3", "aria-current": "page", children: item.label })) : (_jsx("button", { type: "button", className: "breadcrumb__link body-3", onClick: item.onClick, children: item.label })), !isLast && (_jsx(Icon, { icon: "chevron-right", size: 14, className: "breadcrumb__separator" }))] }, index));
             }) }) }));

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

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useId, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { createPortal } from 'react-dom';
 import { cx } from '../utils/cx';
+import { lockBodyScroll } from '../hooks/bodyScrollLock';
 import { pushEsc } from '../hooks/escStack';
 import { useFocusTrap } from '../hooks/useFocusTrap';
 import './Dialog.css';
@@ -39,12 +40,18 @@ export default function Dialog({ open, onClose, ariaLabel, title, children, size
         if (!open)
             return;
         const 돌아갈곳 = document.activeElement;
-        const { overflow } = document.body.style;
-        document.body.style.overflow = 'hidden';
-        surfaceRef.current?.focus();
+        /* 스크롤 잠금은 **공유 카운터**(Popup·TrainingPagePopup 과 같은 것)로 — 전에는 body.style.overflow 를 제 손으로
+           기억했다 되돌려, Dialog 위에 Popup 을 열고 Dialog 를 먼저 닫으면 Popup 이 떠 있는데 스크롤이 풀리고, 이어 Popup 을
+           닫으면 overflow:hidden 으로 영영 굳었다. */
+        const 풀기 = lockBodyScroll();
+        const 판 = surfaceRef.current;
+        판?.focus();
         return () => {
-            document.body.style.overflow = overflow;
-            돌아갈곳?.focus?.();
+            풀기();
+            // 포커스가 이 창 안이거나 갈 곳을 잃었을 때만 되돌린다 — 이미 다른 창으로 옮겨 갔으면 빼앗지 않는다(Popup 과 같다)
+            const 지금 = document.activeElement;
+            if (!지금 || 지금 === document.body || (판 && 판.contains(지금)))
+                돌아갈곳?.focus?.();
         };
     }, [open]);
     /* ESC 는 **공유 스택**에 맡긴다 — 예전에는 window 에서 직접 들었다.
@@ -53,11 +60,21 @@ export default function Dialog({ open, onClose, ariaLabel, title, children, size
        **아래 팝업이 닫히고 이 확인창만 남는** 꼴이다 — 닫으려던 것은 그대로 있고
        뒤에 있던 화면이 사라진다.
        스택에 올리면 맨 위 하나만 닫힌다(그것이 이 창이다). */
+    /* 스택에는 **열릴 때 한 번** 올린다 — handleClose 가 바뀔 때마다(인라인 onClose) 다시 올리면 맨 위로 끼어들어, 위에
+       팝업이 떠 있어도 Esc 가 이 창을 닫았다. closeOnEscape={false} 라도 올려서 Esc 를 **삼킨다** — 안 올리면 이 창
+       아래에 가려진 팝업이 닫혔다(모달은 제 아래를 지킨다). */
+    const closeRef = useRef(handleClose);
+    const escRef = useRef(closeOnEscape);
+    useEffect(() => { closeRef.current = handleClose; escRef.current = closeOnEscape; });
     useEffect(() => {
-        if (!open || !closeOnEscape)
+        if (!open)
             return;
-        return pushEsc(handleClose);
-    }, [open, closeOnEscape, handleClose]);
+        return pushEsc(() => { if (escRef.current)
+            closeRef.current(); });
+    }, [open]);
+    /* 바탕 누르기 — 누른 곳과 뗀 곳이 **둘 다 바탕일 때만** 닫는다(Popup 0.128.0 과 같다). 판 안에서 글자를 긁어
+       고르다 바깥에서 놓으면 click 이 공통 조상(바탕)에 떨어져 창이 닫혔다. */
+    const 바탕에서누름 = useRef(false);
     /* Tab 을 이 판 안에 가둔다 — `aria-modal="true"` 는 **낭독기에게만** 통한다.
        눈으로 보며 Tab 을 누르는 사람은 그 표시를 못 보므로, 가둠이 없으면 마지막
        단추 다음에서 **뒤 화면**으로 빠져나간다. 실제로 그랬다: 놀이터
@@ -67,5 +84,11 @@ export default function Dialog({ open, onClose, ariaLabel, title, children, size
     useFocusTrap(surfaceRef, open);
     if (!open || typeof document === 'undefined')
         return null;
-    return createPortal(_jsx("div", { className: cx('dialog', className), onClick: closeOnBackdrop ? handleClose : undefined, children: _jsxs("div", { ref: surfaceRef, role: "dialog", "aria-modal": "true", "aria-label": title ? undefined : ariaLabel, "aria-labelledby": title ? titleId : undefined, tabIndex: -1, className: cx('dialog__surface', `dialog__surface--${size}`, contentClassName), onClick: (e) => e.stopPropagation(), children: [title ? (_jsx("div", { className: "dialog__header", children: _jsx("h2", { id: titleId, className: "dialog__title h4b", children: title }) })) : null, showClose ? (_jsx("button", { type: "button", className: "dialog__close", "aria-label": t('common.close', '닫기'), onClick: handleClose, children: _jsx(CloseIcon, {}) })) : null, _jsx("div", { className: "dialog__body", children: children })] }) }), document.body);
+    return createPortal(_jsx("div", { className: cx('dialog', className), onPointerDown: closeOnBackdrop ? (e) => { 바탕에서누름.current = e.target === e.currentTarget; } : undefined, onMouseDown: (e) => { if (e.target === e.currentTarget)
+            e.preventDefault(); }, onClick: closeOnBackdrop ? (e) => {
+            const 눌렀나 = 바탕에서누름.current;
+            바탕에서누름.current = false;
+            if (눌렀나 && e.target === e.currentTarget)
+                handleClose();
+        } : undefined, children: _jsxs("div", { ref: surfaceRef, role: "dialog", "aria-modal": "true", "aria-label": title ? undefined : ariaLabel, "aria-labelledby": title ? titleId : undefined, tabIndex: -1, className: cx('dialog__surface', `dialog__surface--${size}`, contentClassName), onClick: (e) => e.stopPropagation(), children: [title ? (_jsx("div", { className: "dialog__header", children: _jsx("h2", { id: titleId, className: "dialog__title h4b", children: title }) })) : null, showClose ? (_jsx("button", { type: "button", className: "dialog__close", "aria-label": t('common.close', '닫기'), onClick: handleClose, children: _jsx(CloseIcon, {}) })) : null, _jsx("div", { className: "dialog__body", children: children })] }) }), document.body);
 }

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

@@ -21,6 +21,8 @@
   display: none;
   background: transparent;
   border: none;
+  /* 읽지 않은 알림 배지(top-right)의 기준 — SideNav 알림 단추(.side-nav__notification-wrap)와 같다 */
+  position: relative;
 }
 
 .header__bottom {

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

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { useMediaQuery } from '../hooks';
 import BottomNav from './BottomNav';
 import Button from './Button';
+import Badge from './Badge';
 import MenuTooltip from './Tooltip/MenuTooltip';
 import { useAnchoredMenu } from '../hooks/useAnchoredMenu';
 import { createPortal } from 'react-dom';
@@ -112,7 +113,9 @@ export default function Header({ activeKey, onChange, items, malgwiItems: _malgw
                 onClick: () => { it.onClick?.(); closeUtilMenu(); },
             })),
         }], [bottomMoreItems, activeKey, closeUtilMenu]);
-    return (_jsxs("aside", { className: `header${appMode === 'manager' ? ' header--manager' : ''}`, children: [_jsxs("div", { className: "header__bi", children: [_jsx(BrandIdentity, { appMode: appMode }), _jsxs("div", { className: "header__menu-button", ref: utilTriggerRef, children: [_jsx(Button, { htmlType: "button", size: 48, type: "dot", shape: "pill", variant: "default", icon: 'menu', ariaLabel: t('header.menuOpen', '메뉴 열기'), onClick: toggleUtilMenu, "aria-expanded": utilOpen, "aria-controls": utilOpen ? utilMenuId : undefined }), utilOpen && createPortal(_jsx("div", { id: utilMenuId, role: "group", "aria-label": t('header.utilMenu', '유틸리티 메뉴'), className: "tooltip-content", style: utilMenuStyle, ref: utilMenuRef, children: _jsx(MenuTooltip, { columns: utilColumns, onClose: closeUtilMenu }) }), document.body)] })] }), _jsx(SideNav, { items: items, activeKey: activeKey ?? undefined, onChange: onChange, unreadCount: unreadCount, onDebug: onDebug, onNotification: onNotification, onAccount: onAccount, onSetting: onSetting, onHelp: onHelp, appMode: appMode, onAppModeChange: onAppModeChange }), isMobile && _jsx(BottomNav, { items: bottomItems, activeKey: activeKey ?? undefined, onChange: handleBottomChange, appMode: appMode, onAppModeChange: onAppModeChange })] }));
+    return (_jsxs("aside", { className: `header${appMode === 'manager' ? ' header--manager' : ''}`, children: [_jsxs("div", { className: "header__bi", children: [_jsx(BrandIdentity, { appMode: appMode }), _jsxs("div", { className: "header__menu-button", ref: utilTriggerRef, children: [_jsx(Button, { htmlType: "button", size: 48, type: "dot", shape: "pill", variant: "default", icon: 'menu', ariaLabel: onNotification && unreadCount && unreadCount > 0
+                                    ? t('nav.badgeLabel', { label: t('header.menuOpen', '메뉴 열기'), count: unreadCount, defaultValue: '{{label}}, {{count}}개' })
+                                    : t('header.menuOpen', '메뉴 열기'), onClick: toggleUtilMenu, "aria-expanded": utilOpen, "aria-controls": utilOpen ? utilMenuId : undefined }), !!onNotification && !!unreadCount && unreadCount > 0 && (_jsx(Badge, { type: "dot", number: Math.min(unreadCount, 99), size: 24, "aria-hidden": true })), utilOpen && createPortal(_jsx("div", { id: utilMenuId, role: "group", "aria-label": t('header.utilMenu', '유틸리티 메뉴'), className: "tooltip-content", style: utilMenuStyle, ref: utilMenuRef, children: _jsx(MenuTooltip, { columns: utilColumns, onClose: closeUtilMenu }) }), document.body)] })] }), _jsx(SideNav, { items: items, activeKey: activeKey ?? undefined, onChange: onChange, unreadCount: unreadCount, onDebug: onDebug, onNotification: onNotification, onAccount: onAccount, onSetting: onSetting, onHelp: onHelp, appMode: appMode, onAppModeChange: onAppModeChange }), isMobile && _jsx(BottomNav, { items: bottomItems, activeKey: activeKey ?? undefined, onChange: handleBottomChange, appMode: appMode, onAppModeChange: onAppModeChange })] }));
 }
 /**
  * `Header`의 alias입니다. 프로젝트 내 `Header`라는 이름이 이미 사용 중일 때 충돌 없이 임포트할 수 있습니다.

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

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId, useState } from 'react';
+import { useEffect, useId, useState } from 'react';
+import { pushEsc } from '../hooks/escStack';
 import './LandingHeader.css';
 /**
  * 랜딩/마케팅 페이지용 상단 고정 헤더.
@@ -22,6 +23,22 @@ export default function LandingHeader({ logo, logoAlt = '', logoHref, links = []
     // 서랍 id 를 고정 문자열로 두면 한 화면에 헤더가 둘일 때(미리보기·놀이터 견본) id 가 겹쳐
     // 햄버거의 aria-controls 가 엉뚱한 서랍을 가리킨다 — 헤더마다 따로 짓는다.
     const drawerId = useId();
+    /* 서랍이 열려 있으면 Esc 로 닫는다(공유 ESC 스택 — 맨 위 하나만). 넓은 화면(961px~, 서랍이 CSS 로 숨는 폭)으로 가면
+       닫는다 — 안 닫으면 open 이 남아 좁은 폭으로 돌아오는 순간 서랍이 다시 펼쳐졌다. */
+    useEffect(() => {
+        if (!open)
+            return;
+        const 풀기 = pushEsc(() => setOpen(false));
+        const mq = typeof window !== 'undefined' && window.matchMedia ? window.matchMedia('(min-width: 961px)') : null;
+        const 넓어짐 = (e) => { if (e.matches)
+            setOpen(false); };
+        if (mq) {
+            if (mq.matches)
+                setOpen(false);
+            mq.addEventListener?.('change', 넓어짐);
+        }
+        return () => { 풀기(); mq?.removeEventListener?.('change', 넓어짐); };
+    }, [open]);
     const innerClass = containerClassName
         ? `${containerClassName} landing-header__inner`
         : 'landing-header__inner';

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

@@ -14,7 +14,10 @@ export default function Pagination({ page, totalPages, onChange, prevLabel, next
     const { t } = useTranslation();
     const resolvedPrev = prevLabel ?? t('common.prevPage', '이전 페이지');
     const resolvedNext = nextLabel ?? t('common.nextPage', '다음 페이지');
-    const handlePrev = () => onChange(Math.max(1, page - 1));
-    const handleNext = () => onChange(Math.min(totalPages, page + 1));
+    /* 범위 밖 쪽(page > totalPages — 결과가 줄어든 직후)에서도 '이전' 이 범위 안으로 돌아오게 먼저 조인다.
+       전에는 page-1 이 여전히 totalPages 보다 커 눌러도 범위 밖에 머물렀다. */
+    const 마지막 = Math.max(1, totalPages);
+    const handlePrev = () => onChange(Math.max(1, Math.min(마지막, page - 1)));
+    const handleNext = () => onChange(Math.min(마지막, page + 1));
     return (_jsxs("div", { className: cx('pagination', className), children: [_jsx(Button, { htmlType: "button", size: 32, type: "dot", shape: "rounded", icon: "chevron-left", ariaLabel: resolvedPrev, disabled: page <= 1, onClick: handlePrev }), _jsxs("span", { className: "pagination__info body-3", children: [page, " / ", totalPages] }), _jsx(Button, { htmlType: "button", size: 32, type: "dot", shape: "rounded", icon: "chevron-right", ariaLabel: resolvedNext, disabled: page >= totalPages, onClick: handleNext })] }));
 }

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import './Panel.css';
 type PanelSize = 'small' | 'medium' | 'large';
 interface PanelProps {

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

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../utils/cx';
 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, useBorder = true, useBg = true, useRowBorder = true, labelWidth, form = false, loading, empty, children }) {
@@ -15,7 +16,9 @@ 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 != null || 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 != null && (_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" })) : empty != null && (children == null || (Array.isArray(children) && children.length === 0)) ? (_jsx(PanelRow, { variant: "empty", children: empty })) : scrollable ? (_jsx("div", { className: "panel__body--scroll", children: children })) : children] }));
+    return (_jsxs("div", { className: cls, style: Object.keys(style).length ? style : undefined, children: [(title != null || 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 != null && (_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" })
+            /* 비었는지는 React 가 그리는 것으로 센다 — `{조건 && 행들}` 이 false 면 children 이 false 라 빈 상태 문구가 안 떴다 */
+            ) : empty != null && Children.toArray(children).length === 0 ? (_jsx(PanelRow, { variant: "empty", children: empty })) : scrollable ? (_jsx("div", { className: "panel__body--scroll", children: children })) : children] }));
 }
 // ── PanelGrid ──────────────────────────────────────────────────────────────
 /** @public */

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

@@ -24,6 +24,12 @@ function derivePlan(p) {
     const nm = name.match(/(\d+\s*(?:년|개월|주|일))\s*(?:이용권)?\s*$/);
     if (nm)
         return nm[1].replace(/\s+/g, '');
+    /* 영어 이름('Open Special 30-Day Plan'·'1-Year Plan')에서도 일·년 기간을 뽑는다 — 한국어 꼴만 봐서 영어 화면(말귀 랜딩
+       요금 카드는 code 를 안 넘긴다)에서는 이름 전체가 큰 글씨로 찍히고 뒤에 등급 이름이 또 붙었다. 돌려주는 토큰은 위와 같은
+       '30일'·'1년' 꼴이다 — PassCard 가 숫자와 단위로 쪼개 단위를 passCard.unitDay·unitYear 로 번역한다. */
+    const en = name.match(/(\d+)\s*-?\s*(day|year)s?\b/i);
+    if (en)
+        return en[2].toLowerCase() === 'year' ? `${en[1]}년` : `${en[1]}일`;
     return name || '이용권';
 }
 /**

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

@@ -20,6 +20,12 @@ export interface PaymentPlanTier {
      * 구매 횟수가 제한되지 않는다(같은 프로모션이되 1회 제한 대상은 아닌 tier용).
      */
     openPromo?: boolean;
+    /**
+     * **계정당 1회만 살 수 있는 tier**(오픈 특가 30일 등). 이미 산 것(`ownedCodes`)이면 숨기고 기본 tier 를 카드로 올린다.
+     * 안 주면 예전처럼 라벨에 '오픈 특가' 가 있는지로 판정한다 — 그런데 라벨은 번역되므로 영어 화면에서는 판정이 실패해
+     * 이미 산 특가 카드가 남고 정가 30일권을 살 길이 없어진다. 번역되는 라벨 대신 이 값을 넘긴다.
+     */
+    onceOnly?: boolean;
     [k: string]: unknown;
 }
 /** @public */

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

@@ -43,7 +43,8 @@ export default function PaymentPlan(props) {
     const { plan, onSelect, period = "monthly", ownedCodes } = props || {};
     const owned = (code) => !!code && !!ownedCodes?.includes(code);
     // 이 플랜의 오픈특가 tier를 이미 보유(구매)했는지 — 그러면 기본 tier를 카드로 승격
-    const openSoldOut = (plan.tiers || []).some(tr => /오픈\s*특가/.test(tr.label ?? '') && owned(tr.code));
+    const isOnceOnlyTier = (tr) => tr.onceOnly ?? /오픈\s*특가/.test(tr.label ?? '');
+    const openSoldOut = (plan.tiers || []).some(tr => isOnceOnlyTier(tr) && owned(tr.code));
     // 할인 tier 가 정가를 취소선으로 이미 보여 주면, 같은 값을 가진 정가 행은 같은 상품을 두 번
     // 늘어놓는 셈이 된다(30일 이용권 ₩10,000 행 + 30일 ₩10,000→₩5,000 카드). 그 행은 숨긴다.
     const coveredByDiscount = (tier) => {
@@ -61,7 +62,8 @@ export default function PaymentPlan(props) {
     const tierPriceOf = (tier) => (tier.prices ? tier.prices[period] : tier.price);
     const isFree = (plan.tiers || []).length > 0 && (plan.tiers || []).every(tier => {
         const price = tierPriceOf(tier);
-        return price === "무료" || price === freePrice || price === "0원";
+        // 숫자가 모두 0 인 가격도 무료다 — '₩0'·'$0.00' 처럼 로케일마다 표기가 달라 '무료'·'0원' 글자만 보면 영어 화면에서 놓쳤다
+        return price === "무료" || price === freePrice || price === "0원" || (typeof price === 'string' && /\d/.test(price) && !/[1-9]/.test(price));
     });
     // 맞춤 견적(문의) 플랜 — 가격이 '문의'(ko) 또는 로케일 견적 문구
     const isInquiry = (plan.tiers || []).length > 0 && (plan.tiers || []).every(tier => {
@@ -85,7 +87,7 @@ export default function PaymentPlan(props) {
                                읽는** 것이라 한국어 그대로여야 한다. */
                             const rawLabel = tier.label || 기본이용권;
                             // 라벨의 '오픈 특가'는 계정당 1회 제한의 표시다 — 숨김·소진 판정에만 쓴다.
-                            const isOnceOnly = /오픈\s*특가/.test(rawLabel);
+                            const isOnceOnly = isOnceOnlyTier(tier);
                             // 배지 문구는 별도 — 같은 프로모션이되 1회 제한은 없는 tier(1년권)도 함께 얹는다.
                             const showOpenPromo = isOnceOnly || tier.openPromo === true;
                             const planText = rawLabel.replace(/^오픈\s*특가\s*/, '') || 기본이용권;

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

@@ -18,6 +18,32 @@ export default function ConfirmPopup(props) {
     // 흐름(결제/환불)에서 더블클릭 시 RPC가 2회 발화될 수 있어, 여기서 in-flight를 직접 막는다.
     const busyRef = useRef(false);
     const [busy, setBusy] = useState(false);
+    /* 확인·추가 행동을 **한 번만** 돌린다. 전에는 잠금을 onConfirm 이 끝나자마자 finally 에서 풀어, 닫힘 애니메이션(260ms)
+       동안 한 번 더 누르면 onConfirm 이 또 불렸다(말귀 단어표 삭제·이용권 삭제가 두 번 나가 성공 뒤 실패 토스트).
+       닫기로 끝나면 잠금을 풀지 않는다 — 창이 사라지는 중이다. 닫지 않고 끝나면(closeOnConfirm=false·실패) 풀고, 처리 중에
+       단추가 꺼지며 body 로 떨어진 포커스를 누른 단추로 되돌린다. */
+    const 한번만 = async (일) => {
+        if (busyRef.current)
+            return;
+        busyRef.current = true;
+        const 누른곳 = typeof document !== 'undefined' ? document.activeElement : null;
+        setBusy(true);
+        let 닫는중 = false;
+        try {
+            닫는중 = await 일();
+        }
+        finally {
+            if (!닫는중) {
+                busyRef.current = false;
+                setBusy(false);
+                requestAnimationFrame(() => {
+                    const 지금 = document.activeElement;
+                    if ((!지금 || 지금 === document.body) && 누른곳?.isConnected)
+                        누른곳.focus();
+                });
+            }
+        }
+    };
     return (_jsxs(Popup, { title: title, onClose: onClose, 
         // onConfirm(서버 요청 등)이 진행 중일 때 X/ESC로 닫으면, 팝업은 즉시 사라지는데
         // 이미 시작된 요청은 계속 진행돼 완료 후 부모 state/토스트가 뒤늦게 갱신된다 —
@@ -31,19 +57,13 @@ export default function ConfirmPopup(props) {
                     // 없는 일(삭제·연결 해제)이라, 두 번 눌려 두 번 나가면 첫 번째만 뜻이 있고
                     // 두 번째는 엉뚱한 실패로 돌아온다.
                     onClick: async ({ closeWithAnimation }) => {
-                        if (busyRef.current)
-                            return;
-                        busyRef.current = true;
-                        setBusy(true);
-                        try {
+                        await 한번만(async () => {
                             await extraAction.onClick(closeWithAnimation);
-                            if (extraAction.closeOnClick ?? true)
+                            const 닫음 = extraAction.closeOnClick ?? true;
+                            if (닫음)
                                 closeWithAnimation();
-                        }
-                        finally {
-                            busyRef.current = false;
-                            setBusy(false);
-                        }
+                            return 닫음;
+                        });
                     },
                 }] : []),
             ...(hideCancel ? [] : [{
@@ -57,19 +77,12 @@ export default function ConfirmPopup(props) {
                 variant: confirmVariant,
                 disabled: confirmDisabled || busy,
                 onClick: async ({ closeWithAnimation }) => {
-                    if (busyRef.current)
-                        return;
-                    busyRef.current = true;
-                    setBusy(true);
-                    try {
+                    await 한번만(async () => {
                         await onConfirm(closeWithAnimation);
                         if (closeOnConfirm)
                             closeWithAnimation();
-                    }
-                    finally {
-                        busyRef.current = false;
-                        setBusy(false);
-                    }
+                        return closeOnConfirm;
+                    });
                 },
             },
         ], children: [topContent != null && _jsx("div", { className: "confirm-popup__top", children: topContent }), details && details.length > 0 && (_jsx(Panel, { children: details.map((d, i) => (_jsx(PanelRow, { label: d.label, children: _jsx("span", { className: "panel-row__text body-2", children: d.value }) }, i))) })), _jsx("p", { className: "body-2 confirm-popup__message", children: message }), children] }));

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

@@ -28,10 +28,13 @@ export default function CouponInputPopup({ onApply, onCancel }) {
         catch (e) {
             setError(getErrorMessage(e));
             setLoading(false);
+            /* 처리 중 입력칸이 꺼지며 포커스가 body 로 떨어졌다 — 오류를 본 사람이 곧바로 고쳐 칠 수 있게 칸으로 되돌린다 */
+            requestAnimationFrame(() => inputRef.current?.focus());
         }
     }, [code, onApply]);
     const handleKey = useCallback((e, closeWithAnimation) => {
-        if (e.key === 'Enter')
+        // 한글 조합을 끝내는 Enter 는 적용이 아니다(TextField 와 같다)
+        if (e.key === 'Enter' && !e.nativeEvent.isComposing)
             void handleApply(closeWithAnimation);
     }, [handleApply]);
     const handleChange = (e) => {

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

@@ -52,7 +52,12 @@ export default function ListPopup(props) {
         });
     }, [items, search, sortKey, sortAsc, searchEnabled, effectiveSearchFn]);
     const totalPages = Math.max(1, Math.ceil(filtered.length / Number(pageSize)));
-    const paged = filtered.slice((page - 1) * Number(pageSize), page * Number(pageSize));
+    /* 목록이 줄어 보던 쪽이 범위를 넘으면 끝 쪽으로 — 전에는 3쪽을 보다 항목이 5개로 줄면 '항목이 없습니다' 와 '총 5개' 가 함께
+       떴다. 렌더 중에 상태도 맞춘다. */
+    if (page > totalPages)
+        setPage(totalPages);
+    const 이쪽 = Math.min(page, totalPages);
+    const paged = filtered.slice((이쪽 - 1) * Number(pageSize), 이쪽 * Number(pageSize));
     const handleSort = useCallback((key) => {
         if (sortKey === key)
             setSortAsc(a => !a);
@@ -91,7 +96,7 @@ export default function ListPopup(props) {
         sortDir: col.sortable !== false && sortKey === col.key ? (sortAsc ? 'asc' : 'desc') : null,
     })), [columns, sortKey, sortAsc, handleSort]);
     const pageSizeOpts = useMemo(() => pageSizeOptions.map(n => ({ value: String(n), label: t('common.pageSizeLabel', { n }) })), [pageSizeOptions, t]);
-    return (_jsxs(Popup, { className: `popup-list ${className}`, title: title, onClose: onClose, children: [topContent, 'label' in countParts && _jsx("p", { className: "toolbar__count body-1", children: countParts.label }), _jsx(Toolbar, { count: 'label' in countParts ? undefined : { value: filtered.length, prefix: countParts.prefix, suffix: countParts.suffix }, search: searchEnabled ? { value: search, onChange: setSearch, placeholder: resolvedSearchPlaceholder } : undefined, pageSize: { options: pageSizeOpts, value: pageSize, onChange: setPageSize }, pagination: { page, total: totalPages, onChange: setPage } }), _jsx(Table, { size: "medium", gridTemplateColumns: gridTemplateColumns, resizable: true, fields: tableFields, items: paged, onRowClick: onSelect, renderRow: (it) => {
+    return (_jsxs(Popup, { className: `popup-list ${className}`, title: title, onClose: onClose, children: [topContent, 'label' in countParts && _jsx("p", { className: "toolbar__count body-1", children: countParts.label }), _jsx(Toolbar, { count: 'label' in countParts ? undefined : { value: filtered.length, prefix: countParts.prefix, suffix: countParts.suffix }, search: searchEnabled ? { value: search, onChange: setSearch, placeholder: resolvedSearchPlaceholder } : undefined, pageSize: { options: pageSizeOpts, value: pageSize, onChange: setPageSize }, pagination: { page: 이쪽, total: totalPages, onChange: setPage } }), _jsx(Table, { size: "medium", gridTemplateColumns: gridTemplateColumns, resizable: true, fields: tableFields, items: paged, onRowClick: onSelect, renderRow: (it) => {
                     const isSelected = selectedIds != null
                         ? (it.id != null && selectedIds.has(it.id))
                         : (selectedId != null && it.id === selectedId);

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

@@ -41,10 +41,20 @@ export default function SaveTablePopup({ title, saveLabel, defaultName = '', def
     }, [previewW, previewH, preview]);
     const isDuplicateName = !!existingNames &&
         existingNames.some(n => n.trim().toLowerCase() === name.trim().toLowerCase());
-    const handleSave = useCallback((animateThen) => animateThen(() => onSave(name.trim(), description.trim() || undefined)), [name, description, onSave]);
+    /* 저장은 **한 번만** — 저장 단추의 닫힘 애니메이션(260ms) 동안 이름칸에서 Enter 를 치면 onSave 가 또 불렸다(Safari 는 단추를
+       눌러도 포커스가 칸에 남아 쉽게 난다). */
+    const 저장함 = useRef(false);
+    const handleSave = useCallback((animateThen) => {
+        if (저장함.current)
+            return;
+        저장함.current = true;
+        animateThen(() => onSave(name.trim(), description.trim() || undefined));
+    }, [name, description, onSave]);
     const handleEnter = useCallback(() => {
-        if (name.trim() && !isDuplicateName)
-            onSave(name.trim(), description.trim() || undefined);
+        if (저장함.current || !name.trim() || isDuplicateName)
+            return;
+        저장함.current = true;
+        onSave(name.trim(), description.trim() || undefined);
     }, [name, description, isDuplicateName, onSave]);
     return (_jsx(Popup, { className: "popup--save-table", title: title ?? t('wordTable.save.title', '단어표 저장하기'), onClose: onCancel, footer: ({ animateThen, closeWithAnimation }) => (_jsxs(_Fragment, { children: [_jsx(Button, { htmlType: "button", size: 48, type: "bar", label: t('common.cancel', '취소'), onClick: closeWithAnimation }), _jsx(Button, { htmlType: "button", size: 48, type: "bar", variant: "main", label: saveLabel ?? t('common.save', '저장'), disabled: !name.trim() || isDuplicateName, onClick: () => handleSave(animateThen) })] })), children: _jsxs("div", { className: "save-table-popup__body", children: [preview && (_jsx("div", { ref: containerRef, className: "save-table-popup__preview-wrap", style: { height: previewState.fixedH }, children: _jsx("div", { className: "save-table-popup__preview", style: {
                             width: previewW, height: previewH,

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

@@ -95,7 +95,11 @@ export default function TrainingResultPopup(props) {
     // 래퍼(.trp-result__scroll)를 하나 더 두어 이중 스크롤이 됐고, 안쪽이 overscroll:contain으로
     // 휠을 삼키면서 "커서가 바깥 스크롤바 위에 있을 때만 스크롤되는" 문제가 있었다.
     // 하단 버튼은 Popup의 footer 슬롯으로 넘겨 스크롤과 무관하게 고정된다.
-    return (_jsx(Popup, { onClose: onClose, inline: inline, 
+    return (_jsx(Popup, { onClose: onClose, 
+        /* 바탕 누르기로는 닫지 않는다 — 이 창의 닫기(onClose)는 '완료'(기록 확정 + 훈련 닫기)라, 결과를 보다 어두운 바탕을
+           잘못 누르면 기록이 확정되고 '다시하기' 를 쓸 수 없었다(0.128.0 에서 Popup 바탕 닫기가 기본이 되며 생김).
+           완료·다시하기 단추(와 Esc)로만 닫는다. */
+        closeOnBackdrop: false, inline: inline, 
         /* 이 팝업은 Popup 의 title 슬롯을 안 쓰고 본문 안에 제 제목(h1)을 그린다 —
            그래서 다이얼로그 자체에 접근명이 없었다(운영 경고 9건, 08-17 ~ 08-30,
            /today · /training · /my-word-training · /my-homework). 화면에 보이는 그

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

@@ -65,7 +65,7 @@ export default function PromoBanner({ title, description, actionLabel, onAction,
      */
     const cls = cx('promo-banner', `promo-banner--${size}`, className);
     const Bg = PROMO_BANNER_BG_COMPONENTS[resolvedBg];
-    return (_jsxs("div", { ref: rootRef, className: cls, role: "note", children: [_jsx(Bg, {}), _jsxs("div", { className: "promo-banner__text", children: [_jsx("span", { className: `promo-banner__title ${size === 'small' ? 'body-2' : 'h2'}`, children: title }), description && _jsx("span", { className: "promo-banner__description body-3", children: description })] }), actionLabel && onAction && (_jsx(Button, { size: 40, variant: actionVariant ?? resolvedActionVariant, shape: "pill", useBorder: true, onClick: onAction, ariaLabel: actionLabel, ...(isMobile
+    return (_jsxs("div", { ref: rootRef, className: cls, role: "note", children: [_jsx(Bg, {}), _jsxs("div", { className: "promo-banner__text", children: [_jsx("span", { className: `promo-banner__title ${size === 'small' ? 'body-2' : 'h2'}`, children: title }), description && _jsx("span", { className: "promo-banner__description body-3", children: description })] }), actionLabel && onAction && (_jsx(Button, { htmlType: "button", size: 40, variant: actionVariant ?? resolvedActionVariant, shape: "pill", useBorder: true, onClick: onAction, ariaLabel: actionLabel, ...(isMobile
                     ? { type: 'dot', icon: 'arrow-right' }
                     : { rightIcon: 'arrow-right', label: actionLabel, minWidth: 140 }) }))] }));
 }

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

@@ -44,7 +44,10 @@ export default function ReportDocument({ blocks, sectionTitles, logo, footer, pa
     const measureRef = useRef(null);
     const chromeRef = useRef(null);
     const rulerRef = useRef(null);
-    const [pages, setPages] = useState(null);
+    /* 쪽 나눔은 **어느 블록 구성(shape)으로 잰 것인지**와 함께 둔다. 블록 수가 줄면 다시 재는 layout effect 가 렌더 뒤에야 돌아,
+       그 사이 렌더가 옛 쪽의 번호로 새 blocks 를 읽다 `blocks[i]` 가 없어 **화면 전체가 깨졌다**(선택 섹션을 끄거나 자료를 다시
+       받아 행이 줄 때). 지금 구성의 것이 아니면 없는 것으로 본다. */
+    const [measured, setMeasured] = useState(null);
     /* **넘칠 때만 탭 자리를 만든다.** A4 한 장은 794px 이라 좁은 자리에서는 가로로
        넘치는데, 이 상자 안에는 포커스 갈 곳이 하나도 없다 — 그러면 키보드만 쓰는
        사람은 오른쪽 절반을 **영영 못 본다**(WCAG 2.1.1). 실측: 겉 560px 에 안 794px.
@@ -64,7 +67,7 @@ export default function ReportDocument({ blocks, sectionTitles, logo, footer, pa
         const ro = new ResizeObserver(재자);
         ro.observe(el);
         return () => ro.disconnect();
-    }, [pages]);
+    }, [measured]);
     // 블록 구성이 바뀌었는지를 값 하나로 본다. blocks 배열 자체는 렌더마다 새로
     // 만들어지는 일이 흔해 의존성에 그대로 넣으면 측정 → setPages → 렌더 → 측정
     // 이 끝나지 않는다.
@@ -73,13 +76,31 @@ export default function ReportDocument({ blocks, sectionTitles, logo, footer, pa
        통째로 건너뛴다 — 고친 사람의 변경을 볼 수도 찾을 수도 없다.
        돌리는 값은 예전과 한 바이트도 다르지 않다. */
     const shape = blocks.map((b) => `${b.id}\u0000${b.section ?? ''}\u0000${b.group ?? ''}`).join('\u0001');
+    const pages = measured && measured.shape === shape ? measured.pages : null;
+    /* 자(ruler)의 높이 — 0 에서 크기가 생기면(숨겨져 있다 보이게 됨) 다시 잰다 */
+    const [자크기, set자크기] = useState(0);
+    useEffect(() => {
+        const ruler = rulerRef.current;
+        if (!ruler || typeof ResizeObserver === 'undefined')
+            return;
+        const ro = new ResizeObserver(() => set자크기(ruler.offsetHeight));
+        ro.observe(ruler);
+        return () => ro.disconnect();
+    }, []);
     useLayoutEffect(() => {
         const el = measureRef.current;
         const ruler = rulerRef.current;
         if (!el || !ruler)
             return;
-        const chromeH = chromeRef.current?.offsetHeight ?? 0;
-        const budget = ruler.offsetHeight - chromeH;
+        /* display:none 안에서 처음 그리면 자·블록이 모두 0 이라 한 갈래가 한 장에 몰리는데, 보이게 된 뒤에도 구성이 같아 다시
+           재지 않았다 — 자의 높이(자크기)를 의존성에 두어 크기가 생기면 다시 잰다. */
+        /* 머리·바닥 높이는 **갈래마다** 잰다 — 제목이 있는 갈래와 없는 갈래는 머리 높이가 달라, 첫 갈래 것 하나로 재면 제목 있는
+           뒤 갈래의 장이 넘쳤다. */
+        const chromeOf = new Map();
+        chromeRef.current?.querySelectorAll('[data-chrome-section]').forEach((node) => {
+            chromeOf.set(node.dataset.chromeSection ?? '', node.offsetHeight);
+        });
+        const budgetFor = (section) => ruler.offsetHeight - (chromeOf.get(section ?? '') ?? 0);
         const heights = Array.from(el.children).map((c) => c.offsetHeight);
         // 이웃한 같은 group 을 한 덩어리로 묶는다.
         const groups = [];
@@ -103,6 +124,7 @@ export default function ReportDocument({ blocks, sectionTitles, logo, footer, pa
         };
         groups.forEach((grp) => {
             const groupH = grp.reduce((sum, i) => sum + heights[i], 0);
+            const budget = budgetFor(blocks[grp[0]].section);
             // 갈래가 바뀌면 새 장에서 시작한다.
             if (cur.length && blocks[cur[0]].section !== blocks[grp[0]].section)
                 flush();
@@ -124,10 +146,10 @@ export default function ReportDocument({ blocks, sectionTitles, logo, footer, pa
             }
         });
         flush();
-        setPages(packed);
+        setMeasured({ shape, pages: packed });
         // blocks 는 위 shape 로 대신 본다.
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [shape]);
+    }, [shape, 자크기]);
     /* 번들러마다 SVG import 결과가 다르다 — Vite 는 문자열, Next 는 `{ src }` 객체다.
        문자열만 보면 Next 앱에서 fallback 경로(`/logo/...`)로 떨어져 404 가 난다
        (kscan 결과지의 바닥 로고가 실제로 깨졌다). 둘 다 받는다. */
@@ -140,9 +162,9 @@ export default function ReportDocument({ blocks, sectionTitles, logo, footer, pa
         header: (_jsxs("div", { className: "report-doc__header", children: [_jsx("h2", { className: "report-doc__title h3b", children: (section != null && sectionTitles?.[section]) || null }), logo] })),
         footer: (_jsxs("div", { className: "report-doc__footer caption-1", children: [_jsx("span", { className: "report-doc__footer-left", children: footerLeft }), _jsx("span", { className: "report-doc__page-no", children: pageLabel(page, total) })] })),
     });
-    // 머리·바닥이 쓰는 높이를 재기 위한 견본. 쪽 번호 자릿수만큼만 다르므로
-    // 첫 장의 것으로 대신한다.
-    const sampleChrome = chrome(1, 1, blocks[0]?.section);
+    // 머리·바닥이 쓰는 높이를 재기 위한 견본 — 갈래마다 하나(제목 유무로 머리 높이가 다르다). 쪽 번호 자릿수만큼만
+    // 다르므로 첫 장 번호로 잰다.
+    const chromeSections = Array.from(new Set(blocks.map((b) => b.section ?? '')));
     const vars = {
         ...(pageWidth ? { '--report-page-w': pageWidth } : null),
         ...(pageHeight ? { '--report-page-h': pageHeight } : null),
@@ -152,7 +174,10 @@ export default function ReportDocument({ blocks, sectionTitles, logo, footer, pa
     return (_jsxs("div", { ref: rootRef, className: cx('report-doc', className), style: vars, 
         /* 굴릴 것이 있을 때만 포커스를 받는다. 이름 없이 포커스만 주면 낭독기가
            문서 전체를 읽어 버리므로 역할과 이름을 함께 준다. */
-        tabIndex: 넘침 ? 0 : undefined, role: 넘침 ? 'group' : undefined, "aria-label": 넘침 ? t('report.previewRegion', '보고서 미리보기') : undefined, children: [_jsxs("div", { className: "report-doc__measure", "aria-hidden": true, children: [_jsx("div", { ref: rulerRef, className: "report-doc__ruler" }), _jsxs("div", { ref: chromeRef, children: [sampleChrome.header, sampleChrome.footer] }), _jsx("div", { ref: measureRef, className: "report-doc__measure-blocks", children: blocks.map((b) => (_jsx("div", { children: b.content }, b.id))) })] }), pages && (_jsx("div", { className: "report-doc__pages", children: pages.map((idxs, p) => {
+        tabIndex: 넘침 ? 0 : undefined, role: 넘침 ? 'group' : undefined, "aria-label": 넘침 ? t('report.previewRegion', '보고서 미리보기') : undefined, children: [_jsxs("div", { className: "report-doc__measure", "aria-hidden": true, children: [_jsx("div", { ref: rulerRef, className: "report-doc__ruler" }), _jsx("div", { ref: chromeRef, children: chromeSections.map((sec) => {
+                            const c = chrome(1, 1, sec || undefined);
+                            return _jsxs("div", { "data-chrome-section": sec, children: [c.header, c.footer] }, sec);
+                        }) }), _jsx("div", { ref: measureRef, className: "report-doc__measure-blocks", children: blocks.map((b) => (_jsx("div", { children: b.content }, b.id))) })] }), pages && (_jsx("div", { className: "report-doc__pages", children: pages.map((idxs, p) => {
                     const { header, footer: pageFooter } = chrome(p + 1, pages.length, blocks[idxs[0]].section);
                     return (_jsxs("section", { className: "report-doc__page", children: [header, idxs.map((i) => (_jsx("div", { children: blocks[i].content }, blocks[i].id))), pageFooter] }, p));
                 }) }))] }));