kokotable 0.95.0

package/dist/mui/src/index.js

@@ -0,0 +1,79 @@
+// ── 필터 구역 ──
+export { FilterArea, resolveFilterGridSize } from "./filter/FilterArea";
+export { FilterInput } from "./filter/FilterInput";
+export { OperatorMenu, operatorLabel, OPERATOR_LABELS } from "./filter/inputs/OperatorMenu";
+export { TextFilterInput } from "./filter/inputs/TextFilterInput";
+export { NumberFilterInput } from "./filter/inputs/NumberFilterInput";
+export { DateFilterInput, periodRange } from "./filter/inputs/DateFilterInput";
+export { SelectFilterInput, MultiSelectFilterInput, BooleanFilterInput, } from "./filter/inputs/SelectFilterInput";
+export { RelationFilterInput } from "./filter/inputs/RelationFilterInput";
+export { LinearFilterInput } from "./filter/inputs/LinearFilterInput";
+export { ScheduleFilterInput } from "./filter/inputs/ScheduleFilterInput";
+// ── 필터 kind ──
+export { withEditor, builtinFilterEditors, defaultEditorForVariant, registerBuiltinEditors, resolveFilterEditor, resolveFilterChip, } from "./filter/kinds";
+// ── 콘텐츠 구역 ──
+export { TableContent } from "./content/TableContent";
+export { HeaderCell } from "./content/HeaderCell";
+export { ColumnMenu, moveColumn, canMoveColumn } from "./content/ColumnMenu";
+export { ColumnVisibilityMenu } from "./content/ColumnVisibilityMenu";
+export { SelectionActionBar } from "./content/SelectionActionBar";
+export { TableErrorFallback, errorStatus, isBadRequestError } from "./content/TableErrorFallback";
+export { EditCell } from "./content/EditCell";
+export { renderCellValue } from "./content/cellValue";
+export { getCellError, cellErrorSx } from "./content/cellError";
+export { pinnedSx } from "./content/pinning";
+export { resolveDensity } from "./content/density";
+// ── 표시 전용 컬럼 (행 선택·확장·액션·번호) ──
+export { selectionColumn, expandColumn, rowActionsColumn, rowNumberColumn, withDisplayColumns, canExpandRow, isDisplayColumnId, DISPLAY_COLUMN_PREFIX, LEGACY_DISPLAY_COLUMN_PREFIX, LEGACY_DISPLAY_COLUMN_IDS, ROW_SELECT_COLUMN_ID, ROW_EXPAND_COLUMN_ID, ROW_ACTIONS_COLUMN_ID, ROW_NUMBER_COLUMN_ID, } from "./columns/displayColumns";
+// ── 툴바 ──
+export { GlobalFilterField } from "./toolbar/GlobalFilterField";
+export { SortControl } from "./content/SortControl";
+export { CardContent } from "./content/CardContent";
+// ── 그룹핑 ──
+export { GroupingBar } from "./grouping/GroupingBar";
+export { StepExpandButton } from "./grouping/StepExpandButton";
+export { GROUP_DRAG_COLUMN_TYPE, GROUP_DRAG_INDEX_TYPE, GROUP_BATCH_SIZE_OPTIONS, GROUP_REJECTED_MESSAGE, } from "./grouping/GroupingBar";
+export { AggregationChips, aggregatableColumns, toggleAggregation } from "./grouping/AggregationChips";
+export { AggregateChip, getAggIcon, formatAggValue, AGG_CHIP_COLORS } from "./grouping/AggregateChip";
+export { GROUP_DEPTH_INDENT, GROUP_ROW_BG_SHADES, groupRowBgColor, resolveGroupValue, renderAggregateCellContent, isCategoricalColumn, } from "./grouping/groupRow";
+// ── 페이지네이션 구역 ──
+export { PaginationArea } from "./pagination/PaginationArea";
+// ── 피벗 ──
+export { PivotTable } from "./pivot/PivotTable";
+// ── 레이아웃 ──
+export { TopFilterLayout, SideFilterLayout, SearchBar } from "./TableLayout";
+export { ResizeHandle, useResizeWidth, clampWidth } from "./layout/ResizeHandle";
+// ── 가상 컬럼 ──
+export { useVirtualColumns, virtualColumnSlots } from "./virtualColumns/useVirtualColumns";
+export { virtualColumnDefs, virtualColumnFields } from "./virtualColumns/virtualColumnDefs";
+export { validateExpression, evaluateExpression, evaluateTemplate, evaluateVirtualColumn, applyVirtualColumns, tokenizeExpression, normalizeExpression, referencedFields, describeExpression, TEMPLATE_FIELD_PATTERN, } from "./virtualColumns/expression";
+export { VirtualColumnSection } from "./virtualColumns/VirtualColumnSection";
+export { VirtualColumnDialog } from "./virtualColumns/VirtualColumnDialog";
+export { VirtualColumnCard, VIRTUAL_NUMBER_OPERATORS } from "./virtualColumns/VirtualColumnCard";
+// ── groupedColumnMode ──
+export { arrangeGroupedColumns } from "./content/TableContent";
+// ── 애드온 ──
+export { summarizeSearch, formatConditionValue, countActiveConditions, isActiveCondition, EMPTY_VALUE_TEXT, VALUELESS_TEXT, } from "./addons/searchSummary";
+export { FilterStatusContent, FilterStatusModal, FilterStatusButton, useFilterStatusSummary, } from "./addons/FilterStatusModal";
+export { ShareDropdown } from "./addons/ShareDropdown";
+export { createSearchStore, useSearchStore, useSearchStoreBridge } from "./addons/searchStore";
+export { FilterModal, FilterModalButton } from "./addons/FilterModal";
+// ── 커스터마이즈 ──
+export { KokoTableProvider, useKokoTableConfig, resolveTableProps, mergeKokoTableConfig, DEFAULT_KOKO_TABLE_CONFIG, DEFAULT_TABLE_DEFAULTS, toRegistry, applyPatch, } from "./provider/KokoTableProvider";
+export { DEFAULT_LABELS, DEFAULT_UI_LABELS, mergeLabels } from "./provider/labels";
+export { MenuItemList, ContextMenu, defaultColumnMenuItems, defaultRowMenuItems, defaultGroupRowMenuItems, visibleMenuItems, createHeaderContext, createColumnMenuCtx, createRowMenuCtx, } from "./content/menuItems";
+// ── 레지스트리 (확장점 공통) ──
+export { createRegistry, isRegistry } from "./registry";
+// ── 헤더·메뉴 ──
+export { defineHeader, resolveHeaderDef, applyHeaderRules, headerMetaOf, defaultHeader, compactHeader, headerRegistry, defaultHeaderSlots, renderDefaultHeader, materializeHeader, SortArrow, headerRuleMetaOf, resolveCellAlign, } from "./headers";
+export { columnMenuRegistry, defaultColumnMenuDefs, columnHeaderText, COLUMN_MENU_GROUP, rowMenuRegistry, defaultRowMenuDefs, rowCopyText, ROW_MENU_GROUP, resolveMenuDefs, menuSpecsFrom, copyToClipboard, } from "./menus";
+// ── 검색 debounce·프리셋 ──
+export { PresetBar } from "./addons/PresetBar";
+// ── 테이블 정의 ──
+export { TableScreen, TableScreenBase, displayColumnOptionsOf } from "./TableScreen";
+// ── 셀·집계·export 레지스트리 (설계 문서 4절 — 정의·기본 세트·Provider 읽기 훅) ──
+export { cellRenderers, defineCellRenderer, resolveCellRenderer, toCellRendererDefs, useCellRenderers, layerRegistry, registriesOf, isEmptyCellValue, BUILTIN_CELL_RENDERERS, } from "./content/cellRenderers";
+export { useAggregations, aggChipColor } from "./grouping/AggregateChip";
+export { useExportFormatters } from "./exporters";
+// ── 집계 상세 설정 ──
+export { AggregationSettingsButton } from "./grouping/AggregationSettingsButton";

package/dist/mui/src/layout/ResizeHandle.d.ts

@@ -0,0 +1,30 @@
+import { type MouseEvent as ReactMouseEvent } from "react";
+export interface UseResizeWidthOptions {
+    width: number;
+    min?: number;
+    max?: number;
+    /** true 면 마우스가 왼쪽으로 갈 때 넓어진다 (패널이 오른쪽에 있을 때) */
+    reversed?: boolean;
+    /** 드래그 중 매 이동마다 · 끝날 때 호출 */
+    onChange?: (width: number) => void;
+    onDragEnd?: (width: number) => void;
+}
+export interface ResizeHandleBinding {
+    isDragging: boolean;
+    onMouseDown: (event: ReactMouseEvent<HTMLElement>) => void;
+}
+export declare function clampWidth(width: number, min: number, max: number): number;
+/**
+ * 마우스 드래그로 폭을 바꾸는 훅 — 기존 ERP `useResize`(px 모드) 대응.
+ * 폭 상태는 호출부가 가진다(`width` + `onChange`) — 제어/비제어를 호출부가 고른다.
+ */
+export declare function useResizeWidth({ width, min, max, reversed, onChange, onDragEnd, }: UseResizeWidthOptions): ResizeHandleBinding;
+export interface ResizeHandleProps extends ResizeHandleBinding {
+    /** 기준 요소의 어느 변에 붙일지 — 부모에 `position: relative` 가 필요하다 */
+    position: "left" | "right";
+    label?: string;
+    /** 드래그 감지 폭 (px) */
+    hitSize?: number;
+}
+/** 세로 드래그 핸들 — hover/드래그 중에만 선이 보인다 */
+export declare function ResizeHandle({ isDragging, onMouseDown, position, label, hitSize }: ResizeHandleProps): import("react").JSX.Element;

package/dist/mui/src/layout/ResizeHandle.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Box } from "@mui/material";
+export function clampWidth(width, min, max) {
+    return Math.min(max, Math.max(min, Math.round(width)));
+}
+/**
+ * 마우스 드래그로 폭을 바꾸는 훅 — 기존 ERP `useResize`(px 모드) 대응.
+ * 폭 상태는 호출부가 가진다(`width` + `onChange`) — 제어/비제어를 호출부가 고른다.
+ */
+export function useResizeWidth({ width, min = 200, max = 800, reversed = false, onChange, onDragEnd, }) {
+    const [isDragging, setDragging] = useState(false);
+    const start = useRef({ x: 0, width });
+    const latest = useRef(width);
+    latest.current = width;
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    const onDragEndRef = useRef(onDragEnd);
+    onDragEndRef.current = onDragEnd;
+    const onMouseDown = useCallback((event) => {
+        event.preventDefault();
+        start.current = { x: event.clientX, width: latest.current };
+        setDragging(true);
+    }, []);
+    useEffect(() => {
+        if (!isDragging)
+            return;
+        const move = (event) => {
+            const delta = event.clientX - start.current.x;
+            const next = clampWidth(start.current.width + (reversed ? -delta : delta), min, max);
+            if (next !== latest.current) {
+                latest.current = next;
+                onChangeRef.current?.(next);
+            }
+        };
+        const up = () => {
+            setDragging(false);
+            onDragEndRef.current?.(latest.current);
+        };
+        document.addEventListener("mousemove", move);
+        document.addEventListener("mouseup", up);
+        const { userSelect, cursor } = document.body.style;
+        document.body.style.userSelect = "none";
+        document.body.style.cursor = "col-resize";
+        return () => {
+            document.removeEventListener("mousemove", move);
+            document.removeEventListener("mouseup", up);
+            document.body.style.userSelect = userSelect;
+            document.body.style.cursor = cursor;
+        };
+    }, [isDragging, min, max, reversed]);
+    return { isDragging, onMouseDown };
+}
+/** 세로 드래그 핸들 — hover/드래그 중에만 선이 보인다 */
+export function ResizeHandle({ isDragging, onMouseDown, position, label = "패널 폭 조절", hitSize = 12 }) {
+    return (_jsx(Box, { role: "separator", "aria-orientation": "vertical", "aria-label": label, onMouseDown: onMouseDown, sx: {
+            position: "absolute", top: 0, bottom: 0, width: hitSize, zIndex: 2, cursor: "col-resize",
+            [position]: -hitSize / 2,
+            display: "flex", alignItems: "stretch", justifyContent: "center",
+            touchAction: "none",
+            "&:hover > span, &:active > span": { opacity: 1 },
+        }, children: _jsx(Box, { component: "span", sx: {
+                width: 3, borderRadius: 1, bgcolor: "primary.main",
+                opacity: isDragging ? 1 : 0, transition: "opacity 0.15s",
+            } }) }));
+}

package/dist/mui/src/menus/columnMenu.d.ts

@@ -0,0 +1,45 @@
+import type { RowData } from "@tanstack/react-table";
+import { type MenuItemDef, type MenuPatch, type Registry } from "../registry";
+import { type AggregationSpec } from "../../../core/src/index";
+import type { HeaderCapabilities, HeaderContext } from "../headers/types";
+/**
+ * 컬럼 메뉴 항목이 받는 컨텍스트 (설계 3절).
+ * `HeaderContext` + 그룹핑 상태 + 필터 열기(소비자가 `onOpenFilter` 를 줄 때만) + 클립보드.
+ * `can` 은 헤더 `rules` 와 TanStack 옵션을 합친 결과 — 기본 항목의 `when` 이 본다.
+ */
+export interface ColumnMenuCtx<T extends RowData = any> extends HeaderContext<T> {
+    /** 판별자 — 행 메뉴 항목을 컬럼 레지스트리에 넣으면 컴파일 오류가 나게 */
+    readonly kind: "column";
+    can: HeaderCapabilities;
+    grouping: string[];
+    /** 있을 때만 `group.add` / `group.remove` 가 보인다 */
+    setGrouping?: (grouping: string[]) => void;
+    /** 있을 때만 `filter.open` 이 보인다 — `TableContent`/Provider `onOpenFilter` */
+    openFilter?: () => void;
+    /** 현재 집계 명세 — `setAggregation` 과 함께 있을 때만 "집계" 항목이 보인다(그룹핑 중, 집계 가능 컬럼) */
+    aggregation?: AggregationSpec;
+    setAggregation?: (next: AggregationSpec) => void;
+    copy: (text: string) => void;
+}
+export type ColumnMenuItemDef<T extends RowData = any> = MenuItemDef<ColumnMenuCtx<T>>;
+export type ColumnMenuPatch<T extends RowData = any> = MenuPatch<ColumnMenuCtx<T>>;
+export declare const COLUMN_MENU_GROUP: {
+    readonly sort: "sort";
+    readonly pin: "pin";
+    readonly move: "move";
+    readonly visibility: "visibility";
+    readonly group: "group";
+    readonly filter: "filter";
+    readonly size: "size";
+    readonly copy: "copy";
+};
+/** 헤더 문자열 — 헤더가 문자열이면 그것, 아니면 id */
+export declare function columnHeaderText<T extends RowData>(ctx: Pick<ColumnMenuCtx<T>, "column">): string;
+/**
+ * 기본 컬럼 메뉴 — 정렬 / 고정 / 이동 / 숨기기 / 그룹 기준 / 필터 열기 / 너비 초기화 / 헤더 복사.
+ * 각 항목의 `when` 이 규칙(`ctx.can`)·상태를 본다. 라벨은 `ctx.labels.ui` 에서 온다.
+ * Provider `menus.column` 으로 add · remove · replace · order 한다.
+ */
+export declare const defaultColumnMenuDefs: Array<ColumnMenuItemDef<any>>;
+/** 내장 컬럼 메뉴 레지스트리 — Provider 가 `with(patch)` 로 파생한다. 전역을 바꾸려면 `register` */
+export declare const columnMenuRegistry: Registry<ColumnMenuItemDef<any>>;

package/dist/mui/src/menus/columnMenu.js

@@ -0,0 +1,144 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import PushPinIcon from "@mui/icons-material/PushPin";
+import PushPinOutlinedIcon from "@mui/icons-material/PushPinOutlined";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
+import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
+import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
+import ClearIcon from "@mui/icons-material/Clear";
+import AccountTreeIcon from "@mui/icons-material/AccountTree";
+import FilterAltIcon from "@mui/icons-material/FilterAlt";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import SettingsBackupRestoreIcon from "@mui/icons-material/SettingsBackupRestore";
+import { createRegistry } from "../registry";
+import { canMoveColumn, moveColumn } from "../content/columnOrder";
+import FunctionsIcon from "@mui/icons-material/Functions";
+import { aggregations } from "../../../core/src/index";
+import { aggregatableColumns, toggleAggregation } from "../grouping/AggregationChips";
+export const COLUMN_MENU_GROUP = {
+    sort: "sort", pin: "pin", move: "move", visibility: "visibility", group: "group", filter: "filter", size: "size", copy: "copy",
+};
+/** 헤더 문자열 — 헤더가 문자열이면 그것, 아니면 id */
+export function columnHeaderText(ctx) {
+    const header = ctx.column.columnDef.header;
+    return typeof header === "string" ? header : ctx.column.id;
+}
+/**
+ * 기본 컬럼 메뉴 — 정렬 / 고정 / 이동 / 숨기기 / 그룹 기준 / 필터 열기 / 너비 초기화 / 헤더 복사.
+ * 각 항목의 `when` 이 규칙(`ctx.can`)·상태를 본다. 라벨은 `ctx.labels.ui` 에서 온다.
+ * Provider `menus.column` 으로 add · remove · replace · order 한다.
+ */
+export const defaultColumnMenuDefs = [
+    {
+        id: "sort.asc", group: COLUMN_MENU_GROUP.sort, order: 10,
+        label: (ctx) => ctx.labels.ui.sortAsc, icon: _jsx(ArrowUpwardIcon, { fontSize: "small" }),
+        when: (ctx) => !!ctx.sort && ctx.can.canSort,
+        disabled: (ctx) => !!ctx.sortState && !ctx.sortState.desc,
+        run: (ctx) => ctx.sort?.toggleSort(ctx.column.id, { desc: false }),
+    },
+    {
+        id: "sort.desc", group: COLUMN_MENU_GROUP.sort, order: 11,
+        label: (ctx) => ctx.labels.ui.sortDesc, icon: _jsx(ArrowDownwardIcon, { fontSize: "small" }),
+        when: (ctx) => !!ctx.sort && ctx.can.canSort,
+        disabled: (ctx) => !!ctx.sortState && ctx.sortState.desc,
+        run: (ctx) => ctx.sort?.toggleSort(ctx.column.id, { desc: true }),
+    },
+    {
+        id: "sort.clear", group: COLUMN_MENU_GROUP.sort, order: 12,
+        label: (ctx) => ctx.labels.ui.clearSort, icon: _jsx(ClearIcon, { fontSize: "small" }),
+        when: (ctx) => !!ctx.sort && ctx.can.canSort,
+        disabled: (ctx) => !ctx.sortState,
+        run: (ctx) => ctx.sort?.clearSort(ctx.column.id),
+    },
+    {
+        id: "pin.left", group: COLUMN_MENU_GROUP.pin, order: 20,
+        label: (ctx) => ctx.labels.ui.pinLeft, icon: _jsx(PushPinOutlinedIcon, { fontSize: "small" }),
+        when: (ctx) => ctx.can.canPin,
+        disabled: (ctx) => ctx.column.getIsPinned() === "left",
+        run: (ctx) => ctx.column.pin("left"),
+    },
+    {
+        id: "pin.right", group: COLUMN_MENU_GROUP.pin, order: 21,
+        label: (ctx) => ctx.labels.ui.pinRight,
+        icon: _jsx(PushPinOutlinedIcon, { fontSize: "small", sx: { transform: "scaleX(-1)" } }),
+        when: (ctx) => ctx.can.canPin,
+        disabled: (ctx) => ctx.column.getIsPinned() === "right",
+        run: (ctx) => ctx.column.pin("right"),
+    },
+    {
+        id: "pin.clear", group: COLUMN_MENU_GROUP.pin, order: 22,
+        label: (ctx) => ctx.labels.ui.unpin, icon: _jsx(PushPinIcon, { fontSize: "small" }),
+        when: (ctx) => ctx.can.canPin,
+        disabled: (ctx) => !ctx.column.getIsPinned(),
+        run: (ctx) => ctx.column.pin(false),
+    },
+    {
+        id: "move.left", group: COLUMN_MENU_GROUP.move, order: 30,
+        label: (ctx) => ctx.labels.ui.moveLeft, icon: _jsx(ArrowBackIcon, { fontSize: "small" }),
+        disabled: (ctx) => !canMoveColumn(ctx.table, ctx.column.id, "left"),
+        run: (ctx) => moveColumn(ctx.table, ctx.column.id, "left"),
+    },
+    {
+        id: "move.right", group: COLUMN_MENU_GROUP.move, order: 31,
+        label: (ctx) => ctx.labels.ui.moveRight, icon: _jsx(ArrowForwardIcon, { fontSize: "small" }),
+        disabled: (ctx) => !canMoveColumn(ctx.table, ctx.column.id, "right"),
+        run: (ctx) => moveColumn(ctx.table, ctx.column.id, "right"),
+    },
+    {
+        id: "hide", group: COLUMN_MENU_GROUP.visibility, order: 40,
+        label: (ctx) => ctx.labels.ui.hide, icon: _jsx(VisibilityOffIcon, { fontSize: "small" }),
+        when: (ctx) => ctx.can.canHide,
+        run: (ctx) => ctx.column.toggleVisibility(false),
+    },
+    {
+        id: "group.add", group: COLUMN_MENU_GROUP.group, order: 50,
+        label: (ctx) => ctx.labels.ui.groupBy, icon: _jsx(AccountTreeIcon, { fontSize: "small" }),
+        when: (ctx) => !!ctx.setGrouping && ctx.can.canGroup && !ctx.grouping.includes(ctx.column.id),
+        run: (ctx) => ctx.setGrouping?.([...ctx.grouping, ctx.column.id]),
+    },
+    {
+        // 집계 함수 토글 — 그룹핑 중이고 이 컬럼이 집계 후보일 때만. 함수마다 항목 하나(체크 표시).
+        id: "aggregate", group: COLUMN_MENU_GROUP.group, order: 55,
+        label: (ctx) => ctx.labels.ui.aggregation, icon: _jsx(FunctionsIcon, { fontSize: "small" }),
+        when: (ctx) => !!ctx.setAggregation && ctx.grouping.length > 0 && !ctx.grouping.includes(ctx.column.id)
+            && aggregatableColumns(ctx.table.options.columns, { columnIds: [ctx.column.id] }).length > 0,
+        run: () => { },
+        items: (ctx) => {
+            const [candidate] = aggregatableColumns(ctx.table.options.columns, { columnIds: [ctx.column.id] });
+            const current = ctx.aggregation?.[ctx.column.id] ?? [];
+            return (candidate?.keys ?? []).map((fn) => ({
+                id: `aggregate.${fn}`,
+                // 부모 항목은 items 로 대체되므로 라벨에 "집계 · " 를 붙여 맥락을 남긴다
+                label: `${ctx.labels.ui.aggregation} · ${aggregations.get(fn)?.label ?? fn}${current.includes(fn) ? " ✓" : ""}`,
+                run: () => ctx.setAggregation?.(toggleAggregation(ctx.aggregation ?? {}, ctx.column.id, fn)),
+            }));
+        },
+    },
+    {
+        id: "group.remove", group: COLUMN_MENU_GROUP.group, order: 51,
+        label: (ctx) => ctx.labels.ui.ungroup, icon: _jsx(AccountTreeIcon, { fontSize: "small" }),
+        when: (ctx) => !!ctx.setGrouping && ctx.grouping.includes(ctx.column.id),
+        run: (ctx) => ctx.setGrouping?.(ctx.grouping.filter((id) => id !== ctx.column.id)),
+    },
+    {
+        id: "filter.open", group: COLUMN_MENU_GROUP.filter, order: 60,
+        label: (ctx) => ctx.labels.ui.openFilter, icon: _jsx(FilterAltIcon, { fontSize: "small" }),
+        when: (ctx) => !!ctx.openFilter && ctx.can.canFilter,
+        run: (ctx) => ctx.openFilter?.(),
+    },
+    {
+        id: "resize.reset", group: COLUMN_MENU_GROUP.size, order: 70,
+        label: (ctx) => ctx.labels.ui.resetColumnSize, icon: _jsx(SettingsBackupRestoreIcon, { fontSize: "small" }),
+        when: (ctx) => ctx.can.canResize,
+        disabled: (ctx) => ctx.column.getSize() === (ctx.column.columnDef.size ?? ctx.table._getDefaultColumnDef().size),
+        run: (ctx) => ctx.column.resetSize(),
+    },
+    {
+        id: "copy.header", group: COLUMN_MENU_GROUP.copy, order: 80,
+        label: (ctx) => ctx.labels.ui.copyHeader, icon: _jsx(ContentCopyIcon, { fontSize: "small" }),
+        run: (ctx) => ctx.copy(columnHeaderText(ctx)),
+    },
+];
+/** 내장 컬럼 메뉴 레지스트리 — Provider 가 `with(patch)` 로 파생한다. 전역을 바꾸려면 `register` */
+export const columnMenuRegistry = createRegistry(defaultColumnMenuDefs);

package/dist/mui/src/menus/copy.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 클립보드 복사 — 메뉴 항목의 `ctx.copy(text)`.
+ * `navigator.clipboard` 가 없으면(비보안 컨텍스트·구형 브라우저) 조용히 실패한다.
+ */
+export declare function copyToClipboard(text: string): void;

package/dist/mui/src/menus/copy.js

@@ -0,0 +1,25 @@
+/**
+ * 클립보드 복사 — 메뉴 항목의 `ctx.copy(text)`.
+ * `navigator.clipboard` 가 없으면(비보안 컨텍스트·구형 브라우저) 조용히 실패한다.
+ */
+export function copyToClipboard(text) {
+    const clipboard = typeof navigator !== "undefined" ? navigator.clipboard : undefined;
+    if (clipboard?.writeText) {
+        void clipboard.writeText(text).catch(() => { });
+        return;
+    }
+    if (typeof document === "undefined" || typeof document.execCommand !== "function")
+        return;
+    const area = document.createElement("textarea");
+    area.value = text;
+    area.setAttribute("readonly", "");
+    area.style.position = "fixed";
+    area.style.opacity = "0";
+    document.body.appendChild(area);
+    area.select();
+    try {
+        document.execCommand("copy");
+    }
+    catch { /* 무시 */ }
+    document.body.removeChild(area);
+}

package/dist/mui/src/menus/index.d.ts

@@ -0,0 +1,6 @@
+export { columnMenuRegistry, defaultColumnMenuDefs, columnHeaderText, COLUMN_MENU_GROUP } from "./columnMenu";
+export type { ColumnMenuCtx, ColumnMenuItemDef, ColumnMenuPatch } from "./columnMenu";
+export { rowMenuRegistry, defaultRowMenuDefs, rowCopyText, ROW_MENU_GROUP } from "./rowMenu";
+export type { RowMenuCtx, RowMenuItemDef, RowMenuPatch, GroupRowCtx } from "./rowMenu";
+export { resolveMenuDefs, menuSpecsFrom } from "./resolve";
+export { copyToClipboard } from "./copy";

package/dist/mui/src/menus/index.js

@@ -0,0 +1,4 @@
+export { columnMenuRegistry, defaultColumnMenuDefs, columnHeaderText, COLUMN_MENU_GROUP } from "./columnMenu";
+export { rowMenuRegistry, defaultRowMenuDefs, rowCopyText, ROW_MENU_GROUP } from "./rowMenu";
+export { resolveMenuDefs, menuSpecsFrom } from "./resolve";
+export { copyToClipboard } from "./copy";

package/dist/mui/src/menus/resolve.d.ts

@@ -0,0 +1,15 @@
+import type { MenuItemDef } from "../registry";
+import type { MenuItemSpec } from "../content/menuItems";
+/**
+ * 레지스트리 항목 → 실제로 보일 항목.
+ * 1. `when` 이 거짓인 항목 제거
+ * 2. 숫자 `order` 로 정렬 — `order` 가 없는 항목은 레지스트리 위치를 지킨다
+ *    (바로 앞의 `order` 있는 항목 뒤에 붙는다. 그래서 `with({ order: [...] })` 로 정한 자리도 살아 있다)
+ * 3. `items` 가 있으면 그 자리에 펼침 (펼쳐진 항목에도 `when` 적용)
+ */
+export declare function resolveMenuDefs<Ctx>(defs: ReadonlyArray<MenuItemDef<Ctx>>, ctx: Ctx): Array<MenuItemDef<Ctx>>;
+/**
+ * 보일 항목 → `MenuItemList` 가 그리는 `MenuItemSpec` 배열.
+ * `group` 이 바뀌는 자리와 `divider: true` 항목 앞에 구분선을 넣는다 (앞·뒤·연속 구분선은 그릴 때 합쳐진다).
+ */
+export declare function menuSpecsFrom<Ctx>(defs: ReadonlyArray<MenuItemDef<Ctx>>, ctx: Ctx): Array<MenuItemSpec<Ctx>>;

package/dist/mui/src/menus/resolve.js

@@ -0,0 +1,60 @@
+function resolveFn(value, ctx) {
+    return typeof value === "function" ? value(ctx) : value;
+}
+/**
+ * 레지스트리 항목 → 실제로 보일 항목.
+ * 1. `when` 이 거짓인 항목 제거
+ * 2. 숫자 `order` 로 정렬 — `order` 가 없는 항목은 레지스트리 위치를 지킨다
+ *    (바로 앞의 `order` 있는 항목 뒤에 붙는다. 그래서 `with({ order: [...] })` 로 정한 자리도 살아 있다)
+ * 3. `items` 가 있으면 그 자리에 펼침 (펼쳐진 항목에도 `when` 적용)
+ */
+export function resolveMenuDefs(defs, ctx) {
+    let anchor = Number.NEGATIVE_INFINITY;
+    const keyed = defs.map((def, index) => {
+        if (def.order !== undefined)
+            anchor = def.order;
+        return { def, key: def.order ?? anchor, index };
+    });
+    const visible = keyed
+        .filter(({ def }) => !def.when || def.when(ctx))
+        .sort((a, b) => a.key - b.key || a.index - b.index)
+        .map(({ def }) => def);
+    const out = [];
+    for (const def of visible) {
+        if (def.items) {
+            for (const child of def.items(ctx)) {
+                if (child.when && !child.when(ctx))
+                    continue;
+                out.push({ group: def.group, ...child });
+            }
+        }
+        else {
+            out.push(def);
+        }
+    }
+    return out;
+}
+/**
+ * 보일 항목 → `MenuItemList` 가 그리는 `MenuItemSpec` 배열.
+ * `group` 이 바뀌는 자리와 `divider: true` 항목 앞에 구분선을 넣는다 (앞·뒤·연속 구분선은 그릴 때 합쳐진다).
+ */
+export function menuSpecsFrom(defs, ctx) {
+    const specs = [];
+    let lastGroup;
+    let first = true;
+    for (const def of resolveMenuDefs(defs, ctx)) {
+        const groupChanged = !first && def.group !== lastGroup;
+        if (def.divider || groupChanged)
+            specs.push({ key: `divider-${def.id}`, divider: true });
+        specs.push({
+            key: def.id,
+            label: resolveFn(def.label, ctx),
+            icon: resolveFn(def.icon, ctx),
+            disabled: def.disabled ? def.disabled(ctx) : false,
+            onClick: (c) => def.run(c),
+        });
+        lastGroup = def.group;
+        first = false;
+    }
+    return specs;
+}

package/dist/mui/src/menus/rowMenu.d.ts

@@ -0,0 +1,46 @@
+import type { Row, RowData, Table } from "@tanstack/react-table";
+import type { GroupTreeNode } from "../../../core/src/index";
+import { type MenuItemDef, type MenuPatch, type Registry } from "../registry";
+import type { KokoTableLabels } from "../provider/labels";
+/** 그룹 행 우클릭 시 `ctx.group` — ERP `GroupRowContextMenu` 가 받던 것 */
+export interface GroupRowCtx<T extends RowData = any> {
+    node: GroupTreeNode<T>;
+    depth: number;
+    expanded: boolean;
+    toggle: () => void;
+    /** 이 그룹 아래 남은 그룹 기준 컬럼 id (다음 단계부터) */
+    subLevels: string[];
+    /** `TableContent onExpandGroupToDepth` 가 있을 때만 */
+    expandToDepth?: (depth: number) => void;
+}
+/**
+ * 행 메뉴 항목이 받는 컨텍스트 (설계 3절).
+ * 설계와 다른 점: `row` 는 선택 — 그룹 행에는 TanStack `Row` 가 없다(`group` 만 있다). `labels` 를 더했다.
+ */
+export interface RowMenuCtx<T extends RowData = any> {
+    /** 판별자 — 컬럼 메뉴 항목을 행 레지스트리에 넣으면 컴파일 오류가 나게 */
+    readonly kind: "row";
+    /** 말단 행. 그룹 행이면 없다 */
+    row?: Row<T>;
+    table: Table<T>;
+    /** 그룹 행일 때 */
+    group?: GroupRowCtx<T>;
+    copy: (text: string) => void;
+    labels: KokoTableLabels;
+}
+export type RowMenuItemDef<T extends RowData = any> = MenuItemDef<RowMenuCtx<T>>;
+export type RowMenuPatch<T extends RowData = any> = MenuPatch<RowMenuCtx<T>>;
+export declare const ROW_MENU_GROUP: {
+    readonly copy: "copy";
+    readonly expand: "expand";
+    readonly depth: "depth";
+};
+/** 행 복사 텍스트 — 보이는 셀 값을 탭으로 잇는다 (스프레드시트에 붙여 넣기 좋게) */
+export declare function rowCopyText<T extends RowData>(row: Row<T>): string;
+/**
+ * 기본 행 메뉴 — 말단 행: 행 복사 / 그룹 행: 이 그룹 펼치기·접기, N단계까지 펼치기(단계마다), 하위 펼치기.
+ * Provider `menus.row` 로 add · remove · replace · order 한다.
+ */
+export declare const defaultRowMenuDefs: Array<RowMenuItemDef<any>>;
+/** 내장 행 메뉴 레지스트리 — Provider 가 `with(patch)` 로 파생한다 */
+export declare const rowMenuRegistry: Registry<RowMenuItemDef<any>>;

package/dist/mui/src/menus/rowMenu.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import AccountTreeIcon from "@mui/icons-material/AccountTree";
+import UnfoldLessIcon from "@mui/icons-material/UnfoldLess";
+import UnfoldMoreIcon from "@mui/icons-material/UnfoldMore";
+import { createRegistry } from "../registry";
+export const ROW_MENU_GROUP = { copy: "copy", expand: "expand", depth: "depth" };
+/** 그룹 컬럼의 표시 이름 — 헤더가 문자열이면 그것, 아니면 id */
+function columnNameOf(table, columnId) {
+    const header = table.getColumn(columnId)?.columnDef.header;
+    return typeof header === "string" ? header : columnId;
+}
+/** 행 복사 텍스트 — 보이는 셀 값을 탭으로 잇는다 (스프레드시트에 붙여 넣기 좋게) */
+export function rowCopyText(row) {
+    return row.getVisibleCells()
+        .filter((cell) => !cell.column.id.startsWith("koko-row-"))
+        .map((cell) => {
+        const value = cell.getValue();
+        return value === null || value === undefined ? "" : typeof value === "object" ? JSON.stringify(value) : String(value);
+    })
+        .join("\t");
+}
+/**
+ * 기본 행 메뉴 — 말단 행: 행 복사 / 그룹 행: 이 그룹 펼치기·접기, N단계까지 펼치기(단계마다), 하위 펼치기.
+ * Provider `menus.row` 로 add · remove · replace · order 한다.
+ */
+export const defaultRowMenuDefs = [
+    {
+        id: "copy.row", group: ROW_MENU_GROUP.copy, order: 10,
+        label: (ctx) => ctx.labels.ui.copyRow, icon: _jsx(ContentCopyIcon, { fontSize: "small" }),
+        when: (ctx) => !!ctx.row,
+        run: (ctx) => { if (ctx.row)
+            ctx.copy(rowCopyText(ctx.row)); },
+    },
+    {
+        id: "expand", group: ROW_MENU_GROUP.expand, order: 20,
+        label: (ctx) => ctx.labels.ui.expandGroup, icon: _jsx(UnfoldMoreIcon, { fontSize: "small" }),
+        when: (ctx) => !!ctx.group && !ctx.group.expanded,
+        run: (ctx) => ctx.group?.toggle(),
+    },
+    {
+        id: "collapse", group: ROW_MENU_GROUP.expand, order: 21,
+        label: (ctx) => ctx.labels.ui.collapseGroup, icon: _jsx(UnfoldLessIcon, { fontSize: "small" }),
+        when: (ctx) => !!ctx.group && ctx.group.expanded,
+        run: (ctx) => ctx.group?.toggle(),
+    },
+    {
+        id: "expandToDepth", group: ROW_MENU_GROUP.depth, order: 30,
+        label: (ctx) => ctx.labels.ui.expandChildren,
+        when: (ctx) => !!ctx.group?.expandToDepth && ctx.group.subLevels.length > 0,
+        run: () => { },
+        // 단계마다 하나 + "하위 펼치기"
+        items: (ctx) => {
+            const group = ctx.group;
+            const expandToDepth = group.expandToDepth;
+            const perLevel = group.subLevels.map((columnId, index) => {
+                const target = group.depth + 1 + index;
+                return {
+                    id: `expandToDepth.${target}`,
+                    label: ctx.labels.ui.expandToDepth(index + 1, columnNameOf(ctx.table, columnId)),
+                    icon: _jsx(AccountTreeIcon, { fontSize: "small" }),
+                    run: () => expandToDepth(target),
+                };
+            });
+            return [
+                ...perLevel,
+                {
+                    id: "expandToDepth.all", label: ctx.labels.ui.expandChildren, icon: _jsx(UnfoldMoreIcon, { fontSize: "small" }),
+                    run: () => expandToDepth(group.depth + group.subLevels.length + 1),
+                },
+            ];
+        },
+    },
+];
+/** 내장 행 메뉴 레지스트리 — Provider 가 `with(patch)` 로 파생한다 */
+export const rowMenuRegistry = createRegistry(defaultRowMenuDefs);

package/dist/mui/src/pagination/PaginationArea.d.ts

@@ -0,0 +1,16 @@
+import type { RowData } from "@tanstack/react-table";
+import type { AnyPaginationSource } from "../../../core/src/index";
+export interface PaginationAreaProps<T extends RowData> {
+    source: AnyPaginationSource<T>;
+    /** 미지정 시 `KokoTableProvider defaults.pageSizeOptions` (기본 15/30/50/100) */
+    pageSizeOptions?: number[];
+    /** 총 건수 표시 */
+    showTotal?: boolean;
+}
+/**
+ * 페이지네이션 구역.
+ *
+ * `PaginationSource` 만 요구하므로 테이블 인스턴스가 없어도 붙는다 —
+ * 카드 화면에서는 `paginationSource(search, data)` 를 넘긴다.
+ */
+export declare function PaginationArea<T extends RowData>({ source, pageSizeOptions: pageSizeOptionsProp, showTotal, }: PaginationAreaProps<T>): import("react").JSX.Element;