@ihabdevteam/core 0.67.0 → 0.69.0

package/dist/ihabdevteam-core.d.ts

@@ -1283,11 +1283,30 @@ export declare function copyText(text: string): Promise<boolean>;
  * (락파일 검사는 서버가 뜰 때 한 번이다 — CONSUMING.md 2-0-1).
  *
  * 그래서 "올렸다고 믿으며 옛 코드를 검증하는" 일이 생긴다. 이 상수는 소비자가
- * 실제로 싣는 그 알맹이 안에 들어 있으므로 **같은 길을 지나온다.** 브라우저
- * 콘솔에서 한 줄로 확인할 수 있다:
+ * 실제로 싣는 그 알맹이 안에 들어 있으므로 **같은 길을 지나온다.**
  *
  * ```js
- * import('@ihabdevteam/core/components').then(m => console.log(m.CORE_VERSION))
+ * // 앱 코드 안에서
+ * import { CORE_VERSION } from '@ihabdevteam/core/components'
+ * ```
+ *
+ * **브라우저 콘솔에서는 저 이름이 안 풀린다.** 맨 이름(bare specifier)은 번들러가
+ * 푸는 것이라 콘솔에는 그 지도가 없다 — `Failed to resolve module specifier` 가 난다
+ * (2026-09-09 실측. 이 글이 그렇게 적혀 있어 두 사람이 헛걸음했다). Vite dev
+ * 서버에서는 `/@id/` 를 앞에 붙이면 콘솔에서도 풀린다:
+ *
+ * ```js
+ * import('/@id/@ihabdevteam/core/components').then(m => console.log(m.CORE_VERSION))
+ * ```
+ *
+ * CSS 만 궁금하다면 **화면에 실제로 걸린 규칙**을 CSSOM 에서 바로 읽는 편이 더
+ * 확실하다 — 번들러와 무관하고, 판 번호가 아니라 그리는 데 쓰이는 값을 본다:
+ *
+ * ```js
+ * for (const ss of document.styleSheets) {
+ *   try { for (const r of ss.cssRules) if (/\.button:disabled/.test(r.selectorText ?? '')) console.log(r.style.cssText) }
+ *   catch { }   // 다른 오리진의 시트는 못 읽는다
+ * }
  * ```
  *
  * 네 갈래(index·components·hooks·utils) 모두에서 내보낸다 — 갈래마다 따로
@@ -1295,7 +1314,7 @@ export declare function copyText(text: string): Promise<boolean>;
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export declare const CORE_VERSION = "0.67.0";
+export declare const CORE_VERSION = "0.69.0";
 
 /** @public */
 declare const coreDefault: Record<string, unknown>;

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

@@ -75,6 +75,28 @@
 }
 
 /* 필드 라벨 행 — 정렬 클릭 가능한 컬럼 헤더. 높이는 size 스케일을 따름 */
+/* 되돌리기 단추를 얹을 겉. **`.table-fields` 안에 넣으면 안 된다** — 그 자식은
+   곧 열이라 칸이 하나 늘어 몸통 줄과 어긋난다. 겉에서 자리를 안 차지하게 얹는다. */
+.table-fields-strip { position: relative; }
+
+/* 단추가 설 자리를 비운다. **머리와 몸통에 똑같이** 줘야 한다 — 한쪽만 주면
+   그쪽 격자만 좁아져 열이 어긋난다.
+
+   마지막 **열**에 안쪽 여백을 주는 길로 먼저 갔다가 되돌렸다: `1fr` 트랙의
+   자동 최소 크기가 min-content 라, 여백이 그 최소를 키워 **그 열이 다른 열의
+   자리를 빼앗았다**(실측: 머리 52/32/32/**56**, 몸통 52/40/40/40 로 어긋났다.
+   `min-width: 0` 을 얹어도 안 풀렸다). 담은 상자에 주면 둘 다 같은 만큼
+   좁아져 정렬이 지켜진다. */
+.table-wrap--resizable .table-fields,
+.table-wrap--resizable .table-row { padding-right: 40px; }
+
+.table-fields__reset {
+  position: absolute;
+  right: 2px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
 .table-fields {
   display: grid;
   grid-template-columns: var(--table-grid-cols, repeat(auto-fit, minmax(80px, 1fr)));

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

@@ -67,6 +67,8 @@ export default function Table({ fields = [], headerGroups, items = [], renderRow
     const MIN_COL_W = 48;
     const storeKey = resizeStorageKey ? `table-cols:${resizeStorageKey}` : null;
     const fieldsRef = useRef(null);
+    const isFixedPxRef = useRef(() => false);
+    const defaultColsRef = useRef([]);
     // fit 모드에서는 이웃(next)에서 같은 만큼 덜어 오므로 그 컬럼의 시작 폭도 들고 있어야 한다
     const dragRef = useRef(null);
     const [colWidths, setColWidths] = useState(() => {
@@ -144,6 +146,63 @@ export default function Table({ fields = [], headerGroups, items = [], renderRow
         document.body.style.cursor = 'col-resize';
         document.body.style.userSelect = 'none';
     }, [onResizeMove, onResizeEnd, resizeMode, fields]);
+    /**
+     * **칸 너비를 내용에 맞춰 다시 잡는다.**
+     *
+     * 손으로 끌어 놓은 폭을 그냥 지우면(=기본 격자로 되돌리면) 만든 사람이 적어 둔
+     * 틀로 갈 뿐, 지금 화면에 든 글자에는 안 맞는다. 그래서 **재서** 맞춘다 —
+     * 잠깐 `max-content` 로 두고 머리 한 줄과 몸통 모든 줄의 칸을 재어, 열마다
+     * 가장 넓은 값을 쓴다. 잰 뒤 원래 값으로 되돌리므로 화면에는 안 보인다.
+     *
+     * 고정 px 로 못 박은 열(아이콘·숫자 칸)은 그대로 둔다 — 내용에 맞추면 정해 둔
+     * 크기를 잃는다.
+     */
+    const 자동맞춤 = useCallback(() => {
+        const el = fieldsRef.current;
+        const wrap = el?.closest('.table-wrap');
+        if (!el || !wrap)
+            return;
+        const 이전 = wrap.style.getPropertyValue('--table-grid-cols');
+        wrap.style.setProperty('--table-grid-cols', fields.map((_, i) => (isFixedPxRef.current(i) ? defaultColsRef.current[i] : 'max-content')).join(' '));
+        /* 재는 동안만 max-content 다. `.table-fields` 와 각 줄은 서로 다른 격자라
+           이때는 열이 어긋나 보이지만, 같은 함수 안에서 되돌리므로 화면에는 안 나온다. */
+        const 줄들 = Array.from(wrap.querySelectorAll('.table-row'))
+            .filter(r => !r.classList.contains('table-row--loading') && !r.classList.contains('table-row--empty'));
+        const 잰것 = fields.map((_, i) => {
+            let w = el.children[i]?.getBoundingClientRect().width ?? 0;
+            for (const 줄 of 줄들) {
+                const c = 줄.children[i];
+                if (c)
+                    w = Math.max(w, c.getBoundingClientRect().width);
+            }
+            return Math.max(MIN_COL_W, Math.ceil(w));
+        });
+        const 그릇 = el.clientWidth;
+        if (이전)
+            wrap.style.setProperty('--table-grid-cols', 이전);
+        else
+            wrap.style.removeProperty('--table-grid-cols');
+        /* `fit` 은 이 값을 fr 가중치로 내보내므로 합이 늘 그릇 폭이 된다 — 넘칠 일이 없다.
+           `grow` 는 px 라 내용이 그릇보다 넓으면 가로로 구른다. 그때는 고정 열을 뺀
+           나머지를 같은 비율로 줄여 그릇에 담는다(최소 폭은 지킨다). */
+        let 최종 = 잰것;
+        if (resizeMode !== 'fit' && 그릇 > 0) {
+            const 고정 = 잰것.reduce((a, w, i) => a + (isFixedPxRef.current(i) ? w : 0), 0);
+            const 유동 = 잰것.reduce((a, w, i) => a + (isFixedPxRef.current(i) ? 0 : w), 0);
+            const 남은 = 그릇 - 고정;
+            if (유동 > 남은 && 남은 > 0) {
+                const 비 = 남은 / 유동;
+                최종 = 잰것.map((w, i) => (isFixedPxRef.current(i) ? w : Math.max(MIN_COL_W, Math.floor(w * 비))));
+            }
+        }
+        setColWidths(최종);
+        if (storeKey) {
+            try {
+                window.localStorage.setItem(storeKey, JSON.stringify(최종));
+            }
+            catch { /* 저장 실패 무시 */ }
+        }
+    }, [fields, resizeMode, storeKey]);
     // 컬럼 리사이즈 드래그 도중(pointerup 발생 전) Table이 언마운트되면(예: 필터링/페이지 전환으로
     // 목록이 통째로 바뀜) startResize에서 window에 등록한 pointermove/pointerup 리스너가 정리되지
     // 않고 남아 언마운트된 컴포넌트의 setColWidths를 계속 호출하고, body 커서/userSelect도 고정된
@@ -171,6 +230,9 @@ export default function Table({ fields = [], headerGroups, items = [], renderRow
     // fr로 바꾸면 창이 넓어질 때 아이콘 칸까지 함께 늘어나 정해 둔 크기를 잃는다.
     // px 열이 커진 만큼 남는 공간이 줄고 fr 가중치 합도 같이 줄어 총폭은 그대로다.
     const isFixedPx = (i) => /^\d+(\.\d+)?px$/.test(defaultCols[i] ?? '');
+    /* `자동맞춤` 은 이 둘보다 위에서 정의되므로(콜백이라 부를 때 읽힌다) ref 로 건넨다 */
+    isFixedPxRef.current = isFixedPx;
+    defaultColsRef.current = defaultCols;
     const widthUnit = (i) => (resizeMode === 'fit' && !isFixedPx(i)) ? 'fr' : 'px';
     const canApplyWidths = colWidths && colWidths.length === fields.length
         && (resizeMode === 'fit' || items.length > 0);
@@ -181,15 +243,15 @@ export default function Table({ fields = [], headerGroups, items = [], renderRow
         ? { '--table-grid-cols': effectiveGrid }
         : undefined;
     const hasHeader = title !== undefined;
-    return (_jsx("div", { className: `table-wrap table-wrap--${size}${dragOver ? ' table-wrap--dragover' : ''}${collapsed ? ' table-wrap--collapsed' : ''}`, style: gridStyle, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, children: _jsxs("div", { className: "table body-2", children: [hasHeader && (_jsxs("div", { className: "table-header", onClick: onToggleCollapse, role: onToggleCollapse ? 'button' : undefined, tabIndex: onToggleCollapse ? 0 : undefined, "aria-expanded": onToggleCollapse ? !collapsed : undefined, onKeyDown: onToggleCollapse ? (e) => { if (e.key === 'Enter' || e.key === ' ') {
+    return (_jsx("div", { className: `table-wrap table-wrap--${size}${resizable ? ' table-wrap--resizable' : ''}${dragOver ? ' table-wrap--dragover' : ''}${collapsed ? ' table-wrap--collapsed' : ''}`, style: gridStyle, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, children: _jsxs("div", { className: "table body-2", children: [hasHeader && (_jsxs("div", { className: "table-header", onClick: onToggleCollapse, role: onToggleCollapse ? 'button' : undefined, tabIndex: onToggleCollapse ? 0 : undefined, "aria-expanded": onToggleCollapse ? !collapsed : undefined, onKeyDown: onToggleCollapse ? (e) => { if (e.key === 'Enter' || e.key === ' ') {
                         e.preventDefault();
                         onToggleCollapse();
-                    } } : undefined, children: [onToggleCollapse && (_jsx(Button, { size: 40, type: "dot", variant: "transparent-gray", useBorder: false, icon: collapsed ? 'chevron-right' : 'chevron-down', ariaLabel: collapsed ? t('common.expand', '펼치기') : t('common.collapse', '접기'), className: "table-header__chevron" })), icon && (_jsx(Icon, { icon: icon, label: typeof title === 'string' ? title : undefined, className: "table-header__icon" })), _jsx("span", { className: "table-header__title h5b", children: title }), count !== undefined && _jsx("span", { className: "table-header__count body-3b", children: count }), headerActions && (_jsx("span", { className: "table-header__actions", onClick: e => e.stopPropagation(), children: headerActions }))] })), !collapsed && (_jsxs(_Fragment, { children: [headerGroups && headerGroups.length > 0 && (_jsx("div", { className: "table-fields table-fields--groups", children: headerGroups.map((g, i) => (_jsx("div", { className: cx('table-field body-3', g.className), style: { gridColumn: `span ${g.span}` }, children: g.label }, i))) })), _jsx("div", { className: "table-fields", ref: fieldsRef, children: fields.map((f, i) => (_jsx(TableField, { onClick: f.onClick, className: f.className, sortDir: f.sortDir, 
-                                /* fit 모드는 오른쪽 이웃에서 폭을 덜어 오므로, 덜어 올 컬럼이 없는 자리에는
-                                   손잡이를 두지 않는다 — 두면 그 컬럼만 grow처럼 넓어져 표가 밀린다. */
-                                onResizeStart: resizable && i < fields.length - 1 && f.resizable !== false
-                                    && (resizeMode !== 'fit' || fields.some((g, j) => j > i && g.resizable !== false))
-                                    ? (e) => startResize(i, e) : undefined, children: f.label }, i))) }), _jsx("div", { className: "table-body", children: loading ? (_jsx(TableRow, { variant: "loading" })) : items.length === 0 && empty ? (_jsx(TableRow, { variant: "empty", children: empty })) : items.map((item, idx) => {
+                    } } : undefined, children: [onToggleCollapse && (_jsx(Button, { size: 40, type: "dot", variant: "transparent-gray", useBorder: false, icon: collapsed ? 'chevron-right' : 'chevron-down', ariaLabel: collapsed ? t('common.expand', '펼치기') : t('common.collapse', '접기'), className: "table-header__chevron" })), icon && (_jsx(Icon, { icon: icon, label: typeof title === 'string' ? title : undefined, className: "table-header__icon" })), _jsx("span", { className: "table-header__title h5b", children: title }), count !== undefined && _jsx("span", { className: "table-header__count body-3b", children: count }), headerActions && (_jsx("span", { className: "table-header__actions", onClick: e => e.stopPropagation(), children: headerActions }))] })), !collapsed && (_jsxs(_Fragment, { children: [headerGroups && headerGroups.length > 0 && (_jsx("div", { className: "table-fields table-fields--groups", children: headerGroups.map((g, i) => (_jsx("div", { className: cx('table-field body-3', g.className), style: { gridColumn: `span ${g.span}` }, children: g.label }, i))) })), _jsxs("div", { className: cx('table-fields-strip', resizable && 'table-fields-strip--resizable'), children: [_jsx("div", { className: "table-fields", ref: fieldsRef, children: fields.map((f, i) => (_jsx(TableField, { onClick: f.onClick, className: f.className, sortDir: f.sortDir, 
+                                        /* fit 모드는 오른쪽 이웃에서 폭을 덜어 오므로, 덜어 올 컬럼이 없는 자리에는
+                                           손잡이를 두지 않는다 — 두면 그 컬럼만 grow처럼 넓어져 표가 밀린다. */
+                                        onResizeStart: resizable && i < fields.length - 1 && f.resizable !== false
+                                            && (resizeMode !== 'fit' || fields.some((g, j) => j > i && g.resizable !== false))
+                                            ? (e) => startResize(i, e) : undefined, children: f.label }, i))) }), resizable && (_jsx(Button, { size: 40, type: "dot", variant: "transparent-gray", useBorder: false, icon: "rotate-ccw", ariaLabel: t('table.resetColumns', '칸 너비 초기화'), showTooltipInfo: t('table.resetColumns', '칸 너비 초기화'), className: "table-fields__reset", onClick: 자동맞춤 }))] }), _jsx("div", { className: "table-body", children: loading ? (_jsx(TableRow, { variant: "loading" })) : items.length === 0 && empty ? (_jsx(TableRow, { variant: "empty", children: empty })) : items.map((item, idx) => {
                                 const isDragging = draggingId != null && item.id === draggingId;
                                 const isExpanded = expandedId != null && (expandedId instanceof Set ? expandedId.has(item.id) : item.id === expandedId);
                                 return (_jsx(TableRow, { className: `${onRowClick ? ' table-row--clickable' : ''}${onRowDragStart ? ' table-row--draggable' : ''}${isDragging ? ' table-row--dragging' : ''}`.trim(), draggable: !!onRowDragStart, 

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

@@ -4005,6 +4005,9 @@
         "avgDuration": "{{sec}}s avg",
         "truncated": "Only the most recent {{n}} items were loaded — the counts below cover just those."
     },
+    "table": {
+        "resetColumns": "Reset column widths"
+    },
     "wordScore": {
         "panelTitle": "Word table scores",
         "viewWords": "Words",

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

@@ -4003,6 +4003,9 @@
         "avgDuration": "평균 {{sec}}초",
         "truncated": "최근 {{n}}개까지만 받아 왔습니다 — 아래 수는 그만큼만 센 것입니다."
     },
+    "table": {
+        "resetColumns": "칸 너비 초기화"
+    },
     "wordScore": {
         "panelTitle": "단어표 채점",
         "viewWords": "낱말",

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

@@ -7,11 +7,30 @@
  * (락파일 검사는 서버가 뜰 때 한 번이다 — CONSUMING.md 2-0-1).
  *
  * 그래서 "올렸다고 믿으며 옛 코드를 검증하는" 일이 생긴다. 이 상수는 소비자가
- * 실제로 싣는 그 알맹이 안에 들어 있으므로 **같은 길을 지나온다.** 브라우저
- * 콘솔에서 한 줄로 확인할 수 있다:
+ * 실제로 싣는 그 알맹이 안에 들어 있으므로 **같은 길을 지나온다.**
  *
  * ```js
- * import('@ihabdevteam/core/components').then(m => console.log(m.CORE_VERSION))
+ * // 앱 코드 안에서
+ * import { CORE_VERSION } from '@ihabdevteam/core/components'
+ * ```
+ *
+ * **브라우저 콘솔에서는 저 이름이 안 풀린다.** 맨 이름(bare specifier)은 번들러가
+ * 푸는 것이라 콘솔에는 그 지도가 없다 — `Failed to resolve module specifier` 가 난다
+ * (2026-09-09 실측. 이 글이 그렇게 적혀 있어 두 사람이 헛걸음했다). Vite dev
+ * 서버에서는 `/@id/` 를 앞에 붙이면 콘솔에서도 풀린다:
+ *
+ * ```js
+ * import('/@id/@ihabdevteam/core/components').then(m => console.log(m.CORE_VERSION))
+ * ```
+ *
+ * CSS 만 궁금하다면 **화면에 실제로 걸린 규칙**을 CSSOM 에서 바로 읽는 편이 더
+ * 확실하다 — 번들러와 무관하고, 판 번호가 아니라 그리는 데 쓰이는 값을 본다:
+ *
+ * ```js
+ * for (const ss of document.styleSheets) {
+ *   try { for (const r of ss.cssRules) if (/\.button:disabled/.test(r.selectorText ?? '')) console.log(r.style.cssText) }
+ *   catch { }   // 다른 오리진의 시트는 못 읽는다
+ * }
  * ```
  *
  * 네 갈래(index·components·hooks·utils) 모두에서 내보낸다 — 갈래마다 따로
@@ -19,4 +38,4 @@
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export declare const CORE_VERSION = "0.67.0";
+export declare const CORE_VERSION = "0.69.0";

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

@@ -7,11 +7,30 @@
  * (락파일 검사는 서버가 뜰 때 한 번이다 — CONSUMING.md 2-0-1).
  *
  * 그래서 "올렸다고 믿으며 옛 코드를 검증하는" 일이 생긴다. 이 상수는 소비자가
- * 실제로 싣는 그 알맹이 안에 들어 있으므로 **같은 길을 지나온다.** 브라우저
- * 콘솔에서 한 줄로 확인할 수 있다:
+ * 실제로 싣는 그 알맹이 안에 들어 있으므로 **같은 길을 지나온다.**
  *
  * ```js
- * import('@ihabdevteam/core/components').then(m => console.log(m.CORE_VERSION))
+ * // 앱 코드 안에서
+ * import { CORE_VERSION } from '@ihabdevteam/core/components'
+ * ```
+ *
+ * **브라우저 콘솔에서는 저 이름이 안 풀린다.** 맨 이름(bare specifier)은 번들러가
+ * 푸는 것이라 콘솔에는 그 지도가 없다 — `Failed to resolve module specifier` 가 난다
+ * (2026-09-09 실측. 이 글이 그렇게 적혀 있어 두 사람이 헛걸음했다). Vite dev
+ * 서버에서는 `/@id/` 를 앞에 붙이면 콘솔에서도 풀린다:
+ *
+ * ```js
+ * import('/@id/@ihabdevteam/core/components').then(m => console.log(m.CORE_VERSION))
+ * ```
+ *
+ * CSS 만 궁금하다면 **화면에 실제로 걸린 규칙**을 CSSOM 에서 바로 읽는 편이 더
+ * 확실하다 — 번들러와 무관하고, 판 번호가 아니라 그리는 데 쓰이는 값을 본다:
+ *
+ * ```js
+ * for (const ss of document.styleSheets) {
+ *   try { for (const r of ss.cssRules) if (/\.button:disabled/.test(r.selectorText ?? '')) console.log(r.style.cssText) }
+ *   catch { }   // 다른 오리진의 시트는 못 읽는다
+ * }
  * ```
  *
  * 네 갈래(index·components·hooks·utils) 모두에서 내보낸다 — 갈래마다 따로
@@ -19,4 +38,4 @@
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export const CORE_VERSION = '0.67.0';
+export const CORE_VERSION = '0.69.0';