kokotable 0.95.0

package/dist/mui/src/TableLayout.js

@@ -0,0 +1,162 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Box, Button, Chip, Collapse, Divider, IconButton, Paper, Stack, Tooltip, Typography, useMediaQuery, useTheme, } from "@mui/material";
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import ExpandLessIcon from "@mui/icons-material/ExpandLess";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import FilterListIcon from "@mui/icons-material/FilterList";
+import RestartAltIcon from "@mui/icons-material/RestartAlt";
+import SearchIcon from "@mui/icons-material/Search";
+import { ResizeHandle, clampWidth, useResizeWidth } from "./layout/ResizeHandle";
+import { useKokoTableConfig } from "./provider/KokoTableProvider";
+/** 검색·초기화 버튼 — 필터 구역 아래에 붙는다 */
+export function SearchBar({ onSearch, onReset, isDirty, disabled }) {
+    const { labels } = useKokoTableConfig();
+    return (_jsxs(Stack, { direction: "row", spacing: 1, justifyContent: "flex-end", children: [_jsx(Button, { size: "small", startIcon: _jsx(RestartAltIcon, {}), onClick: onReset, disabled: disabled, children: labels.ui.reset }), _jsx(Button, { size: "small", variant: isDirty ? "contained" : "outlined", startIcon: _jsx(SearchIcon, {}), onClick: onSearch, disabled: disabled, children: labels.ui.search })] }));
+}
+/** 제목 + 좌·우 두 슬롯. 셋 다 없으면 그리지 않는다 */
+function ToolbarRow({ title, left, right }) {
+    if (!title && !left && !right)
+        return null;
+    return (_jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", spacing: 2, sx: { flexWrap: "wrap", rowGap: 1 }, children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 2, sx: { minWidth: 0, flex: "1 1 auto" }, children: [title && _jsx(Typography, { variant: "h6", sx: { whiteSpace: "nowrap" }, children: title }), left && _jsx(Stack, { direction: "row", alignItems: "center", spacing: 1, sx: { flex: "1 1 auto", minWidth: 0 }, children: left })] }), right && _jsx(Stack, { direction: "row", alignItems: "center", spacing: 1, sx: { flexShrink: 0 }, children: right })] }));
+}
+function readStored(storageKey) {
+    if (!storageKey || typeof window === "undefined")
+        return {};
+    try {
+        const raw = window.localStorage.getItem(storageKey);
+        if (!raw)
+            return {};
+        const parsed = JSON.parse(raw);
+        return typeof parsed === "object" && parsed !== null ? parsed : {};
+    }
+    catch {
+        return {};
+    }
+}
+function writeStored(storageKey, patch) {
+    if (!storageKey || typeof window === "undefined")
+        return;
+    try {
+        window.localStorage.setItem(storageKey, JSON.stringify({ ...readStored(storageKey), ...patch }));
+    }
+    catch {
+        // 저장 실패는 조용히 — 기억 못 하는 것뿐이다
+    }
+}
+/** xs(모바일) 화면인가 — SSR 첫 렌더는 false */
+function useIsXs() {
+    const theme = useTheme();
+    return useMediaQuery(theme.breakpoints.down("sm"), { noSsr: true });
+}
+/**
+ * 접힘 상태 — 제어/비제어 겸용.
+ * 비제어이고 `defaultCollapsed` 가 없으면 xs 로 **바뀔 때** 접히고, xs 를 벗어나면 펼쳐진다.
+ */
+function useCollapsed(props, isXs) {
+    const { collapsible = false, collapsed: controlled, defaultCollapsed, onCollapsedChange, storageKey } = props;
+    const [internal, setInternal] = useState(() => {
+        if (!collapsible)
+            return false;
+        const stored = readStored(storageKey).collapsed;
+        if (stored !== undefined)
+            return stored;
+        return defaultCollapsed ?? isXs;
+    });
+    const isControlled = controlled !== undefined;
+    const value = collapsible ? (isControlled ? controlled : internal) : false;
+    const onChangeRef = useRef(onCollapsedChange);
+    onChangeRef.current = onCollapsedChange;
+    const set = useCallback((next) => {
+        if (!isControlled)
+            setInternal(next);
+        writeStored(storageKey, { collapsed: next });
+        onChangeRef.current?.(next);
+    }, [isControlled, storageKey]);
+    // xs 진입·이탈에 반응한다 — 첫 렌더는 초기값이 이미 반영했으므로 건너뛴다
+    const previousXs = useRef(isXs);
+    useEffect(() => {
+        if (previousXs.current === isXs)
+            return;
+        previousXs.current = isXs;
+        if (!collapsible || isControlled || defaultCollapsed !== undefined)
+            return;
+        setInternal(isXs);
+        onChangeRef.current?.(isXs);
+    }, [isXs, collapsible, isControlled, defaultCollapsed]);
+    return [value, set];
+}
+function CountChip({ count, small }) {
+    if (!count)
+        return null;
+    return (_jsx(Chip, { label: count, size: "small", color: "primary", sx: small ? { height: 18, minWidth: 18, fontSize: "0.7rem", "& .MuiChip-label": { px: 0.5 } } : { height: 20 } }));
+}
+/**
+ * 상단 필터 레이아웃 — 필터 / 콘텐츠 / 페이지네이션 세 구역을 세로로 쌓는다.
+ *
+ * 레이아웃은 세 구역을 **배치만** 한다. 각 구역이 무엇에 의존하는지는
+ * 구역 컴포넌트가 각자 정하므로, 여기서 테이블 인스턴스를 요구하지 않는다.
+ * `collapsible` 이면 필터 Paper 에 접기 헤더가 생기고, 접힌 상태에는 요약 문구만 남는다.
+ */
+export function TopFilterLayout(props) {
+    const { filter, content, pagination, toolbar, toolbarLeft, toolbarRight, title, collapsible = false, activeCount, filterTitle = "검색 조건", collapsedSummary, } = props;
+    const isXs = useIsXs();
+    const [collapsed, setCollapsed] = useCollapsed(props, isXs);
+    const summary = collapsedSummary ?? (activeCount ? `${activeCount}개 조건 적용 중` : "조건 없음");
+    return (_jsxs(Stack, { spacing: 2, children: [_jsx(ToolbarRow, { title: title, left: toolbarLeft, right: toolbarRight ?? toolbar }), filter && (_jsxs(Paper, { variant: "outlined", sx: { p: collapsible ? 0 : 2 }, children: [collapsible && (_jsxs(Box, { onClick: () => setCollapsed(!collapsed), sx: {
+                            display: "flex", alignItems: "center", justifyContent: "space-between", gap: 1,
+                            px: 2, py: 1, cursor: "pointer", userSelect: "none",
+                            borderBottom: collapsed ? "none" : "1px solid", borderColor: "divider",
+                            "&:hover": { bgcolor: "action.hover" },
+                        }, children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, sx: { minWidth: 0 }, children: [_jsx(FilterListIcon, { fontSize: "small", color: "action" }), _jsx(Typography, { variant: "subtitle2", sx: { whiteSpace: "nowrap" }, children: filterTitle }), _jsx(CountChip, { count: activeCount }), collapsed && (_jsx(Typography, { variant: "body2", color: "text.secondary", noWrap: true, "data-testid": "koko-collapsed-summary", children: summary }))] }), _jsx(IconButton, { size: "small", "aria-label": collapsed ? "필터 펼치기" : "필터 접기", "aria-expanded": !collapsed, onClick: (event) => { event.stopPropagation(); setCollapsed(!collapsed); }, children: collapsed ? _jsx(ExpandMoreIcon, { fontSize: "small" }) : _jsx(ExpandLessIcon, { fontSize: "small" }) })] })), collapsible ? (_jsx(Collapse, { in: !collapsed, timeout: 200, unmountOnExit: true, children: _jsx(Box, { sx: { p: 2 }, children: filter }) })) : filter] })), _jsx(Box, { children: content }), pagination] }));
+}
+const COLLAPSED_WIDTH = 44;
+/**
+ * 사이드 필터 레이아웃 — 필터를 옆 패널로 뺀다 (기본 오른쪽).
+ *
+ * - `collapsible`: 패널을 세로 탭으로 접는다. xs 에서는 가로 막대가 된다
+ * - `resizable`: 안쪽 변의 드래그 핸들로 폭을 바꾼다 (`minWidth`~`maxWidth`)
+ * - `storageKey`: 접힘·폭을 localStorage 에 기억한다
+ */
+export function SideFilterLayout(props) {
+    const { filter, content, pagination, toolbar, toolbarLeft, toolbarRight, title, filterWidth = 280, filterPosition = "right", collapsible = false, resizable = false, minWidth = 200, maxWidth = 640, onFilterWidthChange, activeCount, filterTitle = "검색 조건", storageKey, collapsedWidth = COLLAPSED_WIDTH, } = props;
+    const isXs = useIsXs();
+    const [collapsed, setCollapsed] = useCollapsed(props, isXs);
+    // 폭: 저장값 → prop 순. prop 이 바뀌면(제어) 따라간다
+    const [width, setWidth] = useState(() => {
+        const stored = resizable ? readStored(storageKey).width : undefined;
+        return clampWidth(stored ?? filterWidth, minWidth, maxWidth);
+    });
+    const previousProp = useRef(filterWidth);
+    useEffect(() => {
+        if (previousProp.current === filterWidth)
+            return;
+        previousProp.current = filterWidth;
+        setWidth(clampWidth(filterWidth, minWidth, maxWidth));
+    }, [filterWidth, minWidth, maxWidth]);
+    const onWidthChangeRef = useRef(onFilterWidthChange);
+    onWidthChangeRef.current = onFilterWidthChange;
+    const handle = useResizeWidth({
+        width, min: minWidth, max: maxWidth,
+        reversed: filterPosition === "right",
+        onChange: (next) => { setWidth(next); onWidthChangeRef.current?.(next); },
+        onDragEnd: (next) => writeStored(storageKey, { width: next }),
+    });
+    const left = filterPosition === "left";
+    const expandIcon = left ? _jsx(ChevronRightIcon, { fontSize: "small" }) : _jsx(ChevronLeftIcon, { fontSize: "small" });
+    const collapseIcon = left ? _jsx(ChevronLeftIcon, { fontSize: "small" }) : _jsx(ChevronRightIcon, { fontSize: "small" });
+    const panel = filter && (collapsed ? (isXs ? (_jsxs(Button, { fullWidth: true, variant: "outlined", color: "inherit", size: "small", startIcon: _jsx(FilterListIcon, {}), onClick: () => setCollapsed(false), "aria-label": "\uD544\uD130 \uD3BC\uCE58\uAE30", "aria-expanded": false, sx: { justifyContent: "flex-start", gap: 1 }, children: [filterTitle, _jsx(CountChip, { count: activeCount, small: true })] })) : (_jsxs(Paper, { variant: "outlined", role: "button", tabIndex: 0, "aria-label": "\uD544\uD130 \uD3BC\uCE58\uAE30", "aria-expanded": false, onClick: () => setCollapsed(false), onKeyDown: (event) => { if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            setCollapsed(false);
+        } }, sx: {
+            width: collapsedWidth, flexShrink: 0, alignSelf: "stretch", minHeight: 160,
+            display: "flex", flexDirection: "column", alignItems: "center", gap: 1, py: 1,
+            cursor: "pointer", "&:hover": { bgcolor: "action.hover" },
+        }, children: [_jsx(Tooltip, { title: "\uD544\uD130 \uD3BC\uCE58\uAE30", placement: left ? "right" : "left", children: _jsx("span", { children: expandIcon }) }), _jsx(FilterListIcon, { fontSize: "small", color: "action" }), _jsx(CountChip, { count: activeCount, small: true }), _jsx(Typography, { variant: "caption", color: "text.secondary", sx: { writingMode: "vertical-rl", textOrientation: "mixed", letterSpacing: 1, whiteSpace: "nowrap" }, children: filterTitle })] }))) : (_jsxs(Paper, { variant: "outlined", sx: {
+            p: 2, position: "relative", flexShrink: 0,
+            width: { xs: "100%", md: width },
+            transition: handle.isDragging ? "none" : "width 0.2s ease",
+        }, children: [resizable && (_jsx(Box, { sx: { display: { xs: "none", md: "block" } }, children: _jsx(ResizeHandle, { ...handle, position: left ? "right" : "left", label: "\uD544\uD130 \uD328\uB110 \uD3ED \uC870\uC808" }) })), _jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { mb: 1 }, children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [_jsx(Typography, { variant: "subtitle2", children: filterTitle }), _jsx(CountChip, { count: activeCount })] }), collapsible && (_jsx(IconButton, { size: "small", onClick: () => setCollapsed(true), "aria-label": "\uD544\uD130 \uC811\uAE30", "aria-expanded": true, children: isXs ? _jsx(ExpandLessIcon, { fontSize: "small" }) : collapseIcon }))] }), _jsx(Divider, { sx: { mb: 2 } }), filter] })));
+    return (_jsxs(Stack, { spacing: 2, children: [_jsx(ToolbarRow, { title: title, left: toolbarLeft, right: toolbarRight ?? toolbar }), _jsxs(Stack, { direction: { xs: "column", md: "row" }, spacing: 2, alignItems: "flex-start", children: [left && panel, _jsxs(Box, { sx: { flex: 1, minWidth: 0, width: "100%" }, children: [content, pagination] }), !left && panel] })] }));
+}

package/dist/mui/src/TableScreen.d.ts

@@ -0,0 +1,70 @@
+import { type ReactNode } from "react";
+import type { Row, RowData, Table as TanTable } from "@tanstack/react-table";
+import type { TableBundle, TableDefinition } from "../../core/src/index";
+import { type SideFilterLayoutProps, type TopFilterLayoutProps } from "./TableLayout";
+import { type FilterAreaProps } from "./filter/FilterArea";
+import { type TableContentProps } from "./content/TableContent";
+import { type PaginationAreaProps } from "./pagination/PaginationArea";
+import { type WithDisplayColumnsOptions } from "./columns/displayColumns";
+/** 슬롯 값 — 노드를 직접 주거나, 번들을 받아 그리는 함수. `null` 이면 그 구역을 비운다 */
+export type SlotValue<T extends RowData> = ReactNode | ((bundle: TableBundle<T>) => ReactNode);
+export interface TableScreenSlots<T extends RowData> {
+    /** 필터 구역 전체(FilterArea + SearchBar) 대체 */
+    filter?: SlotValue<T>;
+    /** 테이블 본문 대체 — 카드 그리드 등 */
+    content?: SlotValue<T>;
+    pagination?: SlotValue<T>;
+    /** 그룹핑 바 대체 (`definition.grouping.enabled` 일 때만 그려진다) */
+    groupingBar?: SlotValue<T>;
+    /** 선택 액션바의 액션 — `null` 이면 바 자체를 뺀다 */
+    selectionActions?: ((selectedRows: T[], bundle: TableBundle<T>) => ReactNode) | null;
+    /** 0건일 때 본문 (`TableContent renderEmpty`) */
+    emptyState?: () => ReactNode;
+    /** 펼친 행 아래 패널 — 주면 확장 열이 켜진다 */
+    detailPanel?: (row: Row<T>, table: TanTable<T>) => ReactNode;
+    /** 행 액션 열 렌더 — `features.rowActions.render` 보다 우선한다 */
+    rowActions?: (row: Row<T>, table: TanTable<T>) => ReactNode;
+}
+type LayoutPassthrough = Partial<Omit<TopFilterLayoutProps & SideFilterLayoutProps, "filter" | "content" | "pagination" | "title" | "toolbar" | "toolbarLeft" | "toolbarRight">>;
+export interface TableScreenProps<T extends RowData> {
+    /** `useTableFromDefinition` / `useServerTable` 결과 */
+    bundle: TableBundle<T>;
+    /** 필터 위치 (기본 top) */
+    layout?: "top" | "side";
+    title?: ReactNode;
+    /** 제목 옆 좌측 슬롯 (기존 `renderTopToolbarCustomActions`) */
+    toolbarLeft?: ReactNode;
+    /** 우측 슬롯 (기존 `renderToolbarInternalActions`) */
+    toolbarRight?: ReactNode;
+    slots?: TableScreenSlots<T>;
+    /** `TableContent` 에 그대로 얹는다 — 정의에서 파생한 값 위에 덮인다 */
+    contentProps?: Partial<Omit<TableContentProps<T>, "table">>;
+    filterProps?: Partial<Pick<FilterAreaProps<T>, "direction" | "gridCols" | "collapseDetail">>;
+    /** 레이아웃 옵션(접기·폭·storageKey …) */
+    layoutProps?: LayoutPassthrough;
+    paginationProps?: Partial<Omit<PaginationAreaProps<T>, "source">>;
+}
+/** 내부 — 가상화 진입점(`VirtualTableScreen`)이 본문 렌더만 바꿔 끼운다 */
+export interface TableScreenBaseProps<T extends RowData> extends TableScreenProps<T> {
+    renderContent: (props: TableContentProps<T>) => ReactNode;
+}
+/**
+ * 정의의 `features` → `withDisplayColumns` 옵션.
+ * 직접 조립하는 화면이 `bundle.setTableColumns(withDisplayColumns(columns, displayColumnOptionsOf(def)))` 로 쓴다.
+ */
+export declare function displayColumnOptionsOf<T extends RowData>(definition: TableDefinition<T>, overrides?: {
+    rowActions?: (row: Row<T>, table: TanTable<T>) => ReactNode;
+    detailPanel?: boolean;
+}): WithDisplayColumnsOptions<T>;
+/**
+ * 정의 한 장으로 화면을 그린다 — 필터 / 콘텐츠 / 페이지네이션 세 구역 + 툴바 + 그룹핑 바 + 선택 액션바.
+ *
+ * - `features` 대로 표시 전용 열(`withDisplayColumns`)을 3층에 등록하고(`bundle.setTableColumns`),
+ *   서버 모드면 요청에 실린 가상 컬럼의 값 열(`virtualColumnDefs`)도 함께 끼운다
+ * - `slots` 로 구역을 통째로 바꾼다. `null` 은 비움
+ * - 가상화(`features.virtualize`)는 **여기서 그리지 않는다** — `kokotable/mui/virtual` 의
+ *   `VirtualTableScreen` 을 쓴다. 메인 진입점에 virtualizer 를 두면 쓰지 않는 소비자 번들에도 들어간다
+ */
+export declare function TableScreen<T extends RowData>(props: TableScreenProps<T>): import("react").JSX.Element;
+export declare function TableScreenBase<T extends RowData>({ bundle, layout, title, toolbarLeft, toolbarRight, slots, contentProps: contentOverrides, filterProps, layoutProps, paginationProps, renderContent, }: TableScreenBaseProps<T>): import("react").JSX.Element;
+export {};

package/dist/mui/src/TableScreen.js

@@ -0,0 +1,174 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useMemo, useRef } from "react";
+import { Stack } from "@mui/material";
+import { contentSource, deriveAggregation, paginationSource, sortSource } from "../../core/src/index";
+import { SearchBar, SideFilterLayout, TopFilterLayout, } from "./TableLayout";
+import { FilterArea, resolveFilterGridSize } from "./filter/FilterArea";
+import { TableContent } from "./content/TableContent";
+import { SelectionActionBar } from "./content/SelectionActionBar";
+import { ColumnVisibilityMenu } from "./content/ColumnVisibilityMenu";
+import { PaginationArea } from "./pagination/PaginationArea";
+import { GroupingBar } from "./grouping/GroupingBar";
+import { StepExpandButton } from "./grouping/StepExpandButton";
+import { aggregatableColumns } from "./grouping/AggregationChips";
+import { AggregationSettingsButton } from "./grouping/AggregationSettingsButton";
+import { GlobalFilterField } from "./toolbar/GlobalFilterField";
+import { FilterStatusButton } from "./addons/FilterStatusModal";
+import { countActiveConditions } from "./addons/searchSummary";
+import { withDisplayColumns } from "./columns/displayColumns";
+import { useVirtualColumns } from "./virtualColumns/useVirtualColumns";
+import { virtualColumnDefs, virtualColumnFields } from "./virtualColumns/virtualColumnDefs";
+import { VirtualColumnSection } from "./virtualColumns/VirtualColumnSection";
+function resolveSlot(slot, bundle) {
+    return typeof slot === "function" ? slot(bundle) : slot;
+}
+/** 기능 토글의 **원시 값만** 추린 키 — 정의 객체가 인라인이어도 컬럼 등록이 렌더마다 반복되지 않게 */
+function featureKey(features) {
+    const f = features ?? {};
+    const rowNumbers = typeof f.rowNumbers === "object"
+        ? { id: f.rowNumbers.id, size: f.rowNumbers.size, header: typeof f.rowNumbers.header === "string" ? f.rowNumbers.header : !!f.rowNumbers.header }
+        : !!f.rowNumbers;
+    const selection = typeof f.selection === "object"
+        ? { selectAll: f.selection.selectAll, multi: f.selection.multi }
+        : !!f.selection;
+    const expand = typeof f.expand === "object" ? { expandAll: f.expand.expandAll } : !!f.expand;
+    const rowActions = f.rowActions
+        ? { id: f.rowActions.id, size: f.rowActions.size, position: f.rowActions.position, header: typeof f.rowActions.header === "string" ? f.rowActions.header : !!f.rowActions.header }
+        : false;
+    return JSON.stringify({ rowNumbers, selection, expand, rowActions, legacyIds: !!f.legacyIds });
+}
+/**
+ * 정의의 `features` → `withDisplayColumns` 옵션.
+ * 직접 조립하는 화면이 `bundle.setTableColumns(withDisplayColumns(columns, displayColumnOptionsOf(def)))` 로 쓴다.
+ */
+export function displayColumnOptionsOf(definition, overrides = {}) {
+    const f = definition.features ?? {};
+    const options = { legacyIds: f.legacyIds };
+    if (f.rowNumbers)
+        options.rowNumber = typeof f.rowNumbers === "object" ? f.rowNumbers : true;
+    if (f.selection) {
+        const s = typeof f.selection === "object" ? f.selection : {};
+        options.selection = s.selectAll === undefined ? true : { selectAll: s.selectAll };
+    }
+    if (f.expand || overrides.detailPanel) {
+        const e = typeof f.expand === "object" ? f.expand : {};
+        options.expand = e.expandAll === undefined ? true : { expandAll: e.expandAll };
+    }
+    const render = overrides.rowActions ?? f.rowActions?.render;
+    if (render) {
+        const { render: _ignored, ...rest } = f.rowActions ?? { render };
+        options.rowActions = { ...rest, render };
+    }
+    return options;
+}
+/**
+ * 정의 한 장으로 화면을 그린다 — 필터 / 콘텐츠 / 페이지네이션 세 구역 + 툴바 + 그룹핑 바 + 선택 액션바.
+ *
+ * - `features` 대로 표시 전용 열(`withDisplayColumns`)을 3층에 등록하고(`bundle.setTableColumns`),
+ *   서버 모드면 요청에 실린 가상 컬럼의 값 열(`virtualColumnDefs`)도 함께 끼운다
+ * - `slots` 로 구역을 통째로 바꾼다. `null` 은 비움
+ * - 가상화(`features.virtualize`)는 **여기서 그리지 않는다** — `kokotable/mui/virtual` 의
+ *   `VirtualTableScreen` 을 쓴다. 메인 진입점에 virtualizer 를 두면 쓰지 않는 소비자 번들에도 들어간다
+ */
+export function TableScreen(props) {
+    const virtualize = !!props.bundle.definition.features?.virtualize;
+    useEffect(() => {
+        if (virtualize && typeof console !== "undefined") {
+            console.warn(`[koko-table] TableScreen("${props.bundle.definition.key}"): features.virtualize 는 무시됩니다 — ` +
+                'import { VirtualTableScreen } from "kokotable/mui/virtual" 을 쓰세요.');
+        }
+    }, [virtualize, props.bundle.definition.key]);
+    return _jsx(TableScreenBase, { ...props, renderContent: (contentProps) => _jsx(TableContent, { ...contentProps }) });
+}
+export function TableScreenBase({ bundle, layout = "top", title, toolbarLeft, toolbarRight, slots = {}, contentProps: contentOverrides, filterProps, layoutProps, paginationProps, renderContent, }) {
+    const { definition, search, data, table, grouping, mode } = bundle;
+    const features = definition.features ?? {};
+    const selection = typeof features.selection === "object" ? features.selection : (features.selection ? {} : undefined);
+    // ── 가상 컬럼 (필터 섹션 + 값 열) ──
+    const vcFeature = typeof features.virtualColumns === "object" ? features.virtualColumns : {};
+    const vcEnabled = !!features.virtualColumns;
+    const vcFields = useMemo(() => virtualColumnFields(definition.columns), [definition.columns]);
+    const vc = useVirtualColumns(search, {
+        applyImmediately: vcFeature.applyImmediately ?? true,
+        maxSlots: vcFeature.maxSlots,
+        fields: vcFields,
+    });
+    const virtualSpec = bundle.request.virtualColumns;
+    const virtualDefs = useMemo(
+    // 클라이언트 모드에는 값이 없다(2층 엔진은 식을 평가하지 않는다) — 서버 응답 값만 열로 그린다
+    () => (mode === "server" ? virtualColumnDefs(virtualSpec, { names: vc.names }) : []), [mode, virtualSpec, vc.names]);
+    // ── 표시 전용 열 등록 ──
+    // 렌더 함수는 ref 로 넘긴다 — 인라인 함수가 렌더마다 새로 만들어져도 컬럼 등록이 반복되지 않는다
+    const rowActionsRef = useRef(slots.rowActions ?? features.rowActions?.render);
+    rowActionsRef.current = slots.rowActions ?? features.rowActions?.render;
+    const hasRowActions = !!rowActionsRef.current;
+    const hasDetailPanel = !!slots.detailPanel;
+    const fKey = featureKey(features);
+    const tableColumns = useMemo(() => {
+        const options = displayColumnOptionsOf(definition, {
+            rowActions: hasRowActions ? (row, tan) => rowActionsRef.current?.(row, tan) : undefined,
+            detailPanel: hasDetailPanel,
+        });
+        return withDisplayColumns([...definition.columns, ...virtualDefs], options);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [definition.columns, virtualDefs, fKey, hasRowActions, hasDetailPanel]);
+    const { setTableColumns } = bundle;
+    useLayoutEffect(() => {
+        setTableColumns(tableColumns);
+    }, [setTableColumns, tableColumns]);
+    // ── 툴바 ──
+    const left = (features.globalFilter || toolbarLeft) ? (_jsxs(_Fragment, { children: [features.globalFilter && _jsx(GlobalFilterField, { search: search }), toolbarLeft] })) : undefined;
+    const right = (features.filterStatus || features.columnVisibilityMenu || toolbarRight) ? (_jsxs(_Fragment, { children: [toolbarRight, features.filterStatus && _jsx(FilterStatusButton, { search: search, onApply: search.apply }), features.columnVisibilityMenu && _jsx(ColumnVisibilityMenu, { table: table })] })) : undefined;
+    // ── 필터 구역 ──
+    const direction = filterProps?.direction ?? (layout === "side" ? "column" : "grid");
+    const gridSize = direction === "grid" ? resolveFilterGridSize(filterProps?.gridCols) : undefined;
+    const hasFilterFields = search.getFilterFields().length > 0;
+    let filterNode;
+    if (slots.filter !== undefined) {
+        filterNode = resolveSlot(slots.filter, bundle);
+    }
+    else if (hasFilterFields || vcEnabled) {
+        filterNode = (_jsxs(Stack, { spacing: 2, children: [_jsx(FilterArea, { source: search, direction: direction, gridCols: filterProps?.gridCols, collapseDetail: filterProps?.collapseDetail ?? true, children: vcEnabled && (_jsx(VirtualColumnSection, { virtualColumns: vc, gridSize: gridSize, enableFilter: vcFeature.enableFilter ?? true })) }), _jsx(SearchBar, { onSearch: search.apply, onReset: search.reset, isDirty: search.isDirty })] }));
+    }
+    // ── 선택 액션바 ──
+    const selectionBar = selection && slots.selectionActions !== null ? (_jsx(SelectionActionBar, { source: table, renderActions: slots.selectionActions ? (rows) => slots.selectionActions(rows, bundle) : undefined })) : null;
+    // ── 그룹핑 바 ──
+    let groupingBar = null;
+    if (grouping && slots.groupingBar !== undefined) {
+        groupingBar = resolveSlot(slots.groupingBar, bundle);
+    }
+    else if (grouping) {
+        const aggregatable = aggregatableColumns(definition.columns, { serverOnly: mode === "server" }).length > 0;
+        groupingBar = (_jsx(GroupingBar, { grouping: grouping.grouping, onChange: grouping.setGrouping, columns: definition.columns, batchSize: grouping.batchSize, onBatchSizeChange: grouping.setBatchSize, extra: _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", sx: { flexWrap: "wrap", gap: 0.5 }, children: [aggregatable && grouping.enabled && (_jsx(AggregationSettingsButton, { value: search.params.aggregation ?? deriveAggregation(definition.columns) ?? {}, onChange: (next) => search.patchParams({ aggregation: next }), columns: definition.columns, serverOnly: mode === "server" })), _jsx(StepExpandButton, { expand: grouping.expand })] }) }));
+    }
+    // ── 본문 ──
+    const groupingActive = !!grouping && grouping.enabled;
+    const contentProps = {
+        table,
+        content: contentSource(data),
+        sort: sortSource(search),
+        groupItems: groupingActive ? grouping.items : undefined,
+        onToggleGroup: grouping ? (node) => grouping.expand.toggle(node.path) : undefined,
+        isGroupExpanded: grouping ? (node) => grouping.expand.isExpanded(node.path) : undefined,
+        onLoadMore: grouping?.loadMore,
+        renderDetailPanel: slots.detailPanel,
+        selectOnRowClick: selection?.selectOnRowClick,
+        onResetFilters: search.reset,
+        renderEmpty: slots.emptyState,
+        groupedColumnMode: features.groupedColumnMode,
+        aggregation: groupingActive ? (search.params.aggregation ?? deriveAggregation(definition.columns) ?? {}) : undefined,
+        onAggregationChange: groupingActive ? (next) => search.patchParams({ aggregation: next }) : undefined,
+        density: features.density,
+        enableColumnMenu: features.columnMenu,
+        ...contentOverrides,
+    };
+    const contentNode = slots.content !== undefined ? resolveSlot(slots.content, bundle) : renderContent(contentProps);
+    const contentRegion = (_jsxs(Stack, { spacing: 1, children: [selectionBar, groupingBar, contentNode] }));
+    // ── 페이지네이션 ──
+    const paginationNode = slots.pagination !== undefined
+        ? resolveSlot(slots.pagination, bundle)
+        : _jsx(PaginationArea, { source: paginationSource(search, data), ...paginationProps });
+    const activeCount = countActiveConditions(search.params, search.operators);
+    const Layout = layout === "side" ? SideFilterLayout : TopFilterLayout;
+    return (_jsx(Layout, { title: title, toolbarLeft: left, toolbarRight: right, filter: filterNode, content: contentRegion, pagination: paginationNode, activeCount: activeCount, ...layoutProps }));
+}

package/dist/mui/src/addons/FilterModal.d.ts

@@ -0,0 +1,45 @@
+import { type ReactNode } from "react";
+import type { RowData } from "@tanstack/react-table";
+import type { AnyFilterSource, TableSearch } from "../../../core/src/index";
+import { type GridColCount, type GridColsConfig } from "../filter/FilterArea";
+/** 모달이 요구하는 최소 검색 상태 — 검색·취소·초기화가 각각 부르는 메서드 */
+export type FilterModalSearch<T extends RowData> = Pick<TableSearch<T>, "params" | "operators" | "isDirty" | "apply" | "reset" | "setDraft" | "getFilterFields">;
+export interface FilterModalProps<T extends RowData> {
+    search: FilterModalSearch<T>;
+    /** 필터 필드 출처. 없으면 `search` (표시 전용 컬럼이 섞인 테이블을 쓰려면 `table`) */
+    source?: AnyFilterSource<T>;
+    open: boolean;
+    onClose: () => void;
+    title?: ReactNode;
+    /** 기본 column (모달은 세로 일렬). grid 면 `gridCols` 가 적용된다 */
+    direction?: "column" | "grid";
+    gridCols?: Partial<GridColsConfig> | GridColCount;
+    collapseDetail?: boolean;
+    maxWidth?: "xs" | "sm" | "md" | "lg";
+    /** FilterArea 끝에 덧붙일 항목 (가상 컬럼 섹션 등) */
+    children?: ReactNode;
+    labels?: Partial<{
+        search: string;
+        cancel: string;
+        reset: string;
+    }>;
+    /** 초기화 뒤 모달을 닫는다 (기본 false — 비워진 필드를 확인하고 닫는다) */
+    closeOnReset?: boolean;
+}
+/**
+ * 필터 모달 — 기존 ERP `ModalFilter` + `HeadlessFilterModal` 대응.
+ *
+ * - 검색: `apply()` 뒤 닫힘
+ * - 취소(배경 클릭·ESC 포함): `setDraft(params)` 로 편집분을 버린다
+ * - 초기화: `reset()` — 즉시 적용된다
+ */
+export declare function FilterModal<T extends RowData>({ search, source, open, onClose, title, direction, gridCols, collapseDetail, maxWidth, children, labels, closeOnReset, }: FilterModalProps<T>): import("react").JSX.Element;
+export interface FilterModalButtonProps<T extends RowData> extends Omit<FilterModalProps<T>, "open" | "onClose"> {
+    /** 버튼 라벨. 없으면 아이콘 버튼 */
+    label?: ReactNode;
+    tooltip?: string;
+    size?: "small" | "medium";
+    variant?: "text" | "outlined" | "contained";
+}
+/** 적용 조건 수 배지가 달린 트리거 버튼 — 모달 열림 상태를 스스로 가진다 */
+export declare function FilterModalButton<T extends RowData>({ label, tooltip, size, variant, ...modalProps }: FilterModalButtonProps<T>): import("react").JSX.Element;

package/dist/mui/src/addons/FilterModal.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { Badge, Box, Button, Chip, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Tooltip, } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import FilterListIcon from "@mui/icons-material/FilterList";
+import { FilterArea } from "../filter/FilterArea";
+import { countActiveConditions } from "./searchSummary";
+/**
+ * 필터 모달 — 기존 ERP `ModalFilter` + `HeadlessFilterModal` 대응.
+ *
+ * - 검색: `apply()` 뒤 닫힘
+ * - 취소(배경 클릭·ESC 포함): `setDraft(params)` 로 편집분을 버린다
+ * - 초기화: `reset()` — 즉시 적용된다
+ */
+export function FilterModal({ search, source, open, onClose, title = "검색 조건", direction = "column", gridCols, collapseDetail = true, maxWidth = "xs", children, labels, closeOnReset = false, }) {
+    const text = { search: "검색", cancel: "취소", reset: "초기화", ...labels };
+    const count = countActiveConditions(search.params, search.operators);
+    const cancel = () => {
+        search.setDraft(search.params);
+        onClose();
+    };
+    const apply = () => {
+        search.apply();
+        onClose();
+    };
+    const reset = () => {
+        search.reset();
+        if (closeOnReset)
+            onClose();
+    };
+    return (_jsxs(Dialog, { open: open, onClose: cancel, maxWidth: maxWidth, fullWidth: true, "aria-labelledby": "koko-filter-modal-title", children: [_jsxs(DialogTitle, { id: "koko-filter-modal-title", sx: { display: "flex", alignItems: "center", gap: 1, pr: 6 }, children: [_jsx(FilterListIcon, { fontSize: "small" }), _jsx("span", { children: title }), count > 0 && _jsx(Chip, { size: "small", color: "primary", label: `${count}개 적용 중`, sx: { height: 22 } }), _jsx(IconButton, { size: "small", onClick: cancel, "aria-label": "\uB2EB\uAE30", sx: { position: "absolute", right: 12, top: 12 }, children: _jsx(CloseIcon, { fontSize: "small" }) })] }), _jsx(DialogContent, { dividers: true, children: _jsx(FilterArea, { source: (source ?? search), direction: direction, gridCols: gridCols, collapseDetail: collapseDetail, children: children }) }), _jsxs(DialogActions, { sx: { justifyContent: "space-between" }, children: [_jsx(Button, { size: "small", color: "inherit", onClick: reset, children: text.reset }), _jsxs(Box, { sx: { display: "flex", gap: 1 }, children: [_jsx(Button, { size: "small", onClick: cancel, children: text.cancel }), _jsx(Button, { size: "small", variant: "contained", onClick: apply, children: text.search })] })] })] }));
+}
+/** 적용 조건 수 배지가 달린 트리거 버튼 — 모달 열림 상태를 스스로 가진다 */
+export function FilterModalButton({ label, tooltip = "필터 설정", size = "small", variant = "outlined", ...modalProps }) {
+    const [open, setOpen] = useState(false);
+    const count = countActiveConditions(modalProps.search.params, modalProps.search.operators);
+    const trigger = label !== undefined ? (_jsx(Button, { size: size, variant: variant, startIcon: _jsx(FilterListIcon, {}), onClick: () => setOpen(true), "aria-label": tooltip, children: _jsx(Badge, { badgeContent: count, color: "primary", sx: { "& .MuiBadge-badge": { right: -14, top: 8 } }, children: label }) })) : (_jsx(IconButton, { size: size, color: "primary", onClick: () => setOpen(true), "aria-label": tooltip, children: _jsx(Badge, { badgeContent: count, color: "primary", children: _jsx(FilterListIcon, { fontSize: "small" }) }) }));
+    return (_jsxs(_Fragment, { children: [_jsx(Tooltip, { title: tooltip, children: trigger }), _jsx(FilterModal, { ...modalProps, open: open, onClose: () => setOpen(false) })] }));
+}

package/dist/mui/src/addons/FilterStatusModal.d.ts

@@ -0,0 +1,40 @@
+import { type ReactNode } from "react";
+import type { RowData } from "@tanstack/react-table";
+import { type TableColumnDefs, type TableSearch } from "../../../core/src/index";
+import { type SearchSummary } from "./searchSummary";
+/** 모달·버튼·내용이 공통으로 요구하는 최소 검색 상태 */
+export type FilterStatusSearch<T extends RowData> = Pick<TableSearch<T>, "columns" | "params" | "draft" | "operators" | "draftOperators" | "isDirty">;
+export interface FilterStatusContentProps<T extends RowData> {
+    search: FilterStatusSearch<T>;
+    /** 헤더·선택지를 읽을 컬럼. 없으면 `search.columns` */
+    columns?: TableColumnDefs<T>;
+    /** draft 와 비교해 미적용 항목을 표시한다 (기본 true) */
+    compareDraft?: boolean;
+    /** 정렬·그룹핑·페이지(즉시 적용 항목) 를 보인다 (기본 true) */
+    showImmediate?: boolean;
+}
+/**
+ * 적용 조건 표 — `search.params` 를 컬럼 헤더 · 연산자 라벨 · 값으로 풀어 보인다.
+ * draft 와 다른 항목은 "미적용" 칩과 함께 `적용값 → 편집값` 으로 그린다.
+ */
+export declare function FilterStatusContent<T extends RowData>({ search, columns, compareDraft, showImmediate, }: FilterStatusContentProps<T>): import("react").JSX.Element;
+/** `summarizeSearch` 의 메모 버전 — 버튼 배지와 내용이 같은 요약을 본다 */
+export declare function useFilterStatusSummary<T extends RowData>(search: FilterStatusSearch<T>, columns?: TableColumnDefs<T>, compareDraft?: boolean): SearchSummary;
+export interface FilterStatusModalProps<T extends RowData> extends FilterStatusContentProps<T> {
+    open: boolean;
+    onClose: () => void;
+    title?: ReactNode;
+    /** 미적용 변경이 있을 때 "편집 중인 조건 적용" 버튼을 보인다 — `search.apply` 가 필요하다 */
+    onApply?: () => void;
+    maxWidth?: "xs" | "sm" | "md";
+}
+/** 적용 조건 확인 모달 — 기존 ERP `FilterStatusModal` 대응 */
+export declare function FilterStatusModal<T extends RowData>({ open, onClose, title, onApply, maxWidth, ...contentProps }: FilterStatusModalProps<T>): import("react").JSX.Element;
+export interface FilterStatusButtonProps<T extends RowData> extends Omit<FilterStatusModalProps<T>, "open" | "onClose"> {
+    tooltip?: string;
+    size?: "small" | "medium";
+    /** 미적용 변경이 있으면 배지를 warning 색으로 (기본 true) */
+    highlightDirty?: boolean;
+}
+/** 적용 조건 수 배지가 달린 트리거 버튼 — 모달 열림 상태를 스스로 가진다 */
+export declare function FilterStatusButton<T extends RowData>({ tooltip, size, highlightDirty, ...modalProps }: FilterStatusButtonProps<T>): import("react").JSX.Element;

package/dist/mui/src/addons/FilterStatusModal.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Badge, Box, Button, Chip, Dialog, DialogActions, DialogContent, DialogTitle, Divider, IconButton, Stack, Table, TableBody, TableCell, TableHead, TableRow, Tooltip, Typography, } from "@mui/material";
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
+import CloseIcon from "@mui/icons-material/Close";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import { DEFAULT_DESCRIBE_LABELS } from "../../../core/src/index";
+import { summarizeSearch, } from "./searchSummary";
+import { useKokoTableConfig } from "../provider/KokoTableProvider";
+const STATUS_LABEL = {
+    changed: "미적용(변경)",
+    added: "미적용(추가)",
+    removed: "미적용(삭제)",
+};
+function PendingChip({ status }) {
+    if (status === "applied")
+        return null;
+    return _jsx(Chip, { size: "small", color: "warning", variant: "outlined", label: STATUS_LABEL[status], sx: { height: 20 } });
+}
+function ValueCell({ row }) {
+    if (row.status === "applied") {
+        return _jsx(Typography, { variant: "body2", sx: { wordBreak: "break-all" }, children: row.value });
+    }
+    return (_jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", sx: { flexWrap: "wrap", rowGap: 0.5 }, children: [_jsx(Typography, { variant: "body2", color: "text.secondary", sx: { wordBreak: "break-all" }, children: row.value }), _jsx(ArrowForwardIcon, { sx: { fontSize: 14, color: "warning.main" } }), _jsx(Typography, { variant: "body2", sx: { fontWeight: 600, wordBreak: "break-all" }, children: row.draftValue })] }));
+}
+function OperatorCell({ row }) {
+    const changed = row.status !== "applied" && row.draftOperator && row.draftOperator !== row.operator;
+    return (_jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", children: [_jsx(Chip, { size: "small", label: row.operatorLabel, sx: { height: 20 } }), changed && (_jsxs(_Fragment, { children: [_jsx(ArrowForwardIcon, { sx: { fontSize: 14, color: "warning.main" } }), _jsx(Chip, { size: "small", color: "warning", label: row.draftOperatorLabel, sx: { height: 20 } })] }))] }));
+}
+function SectionTitle({ children, extra }) {
+    return (_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", sx: { mb: 0.5 }, children: [_jsx(Typography, { variant: "subtitle2", sx: { color: "primary.main" }, children: children }), extra] }));
+}
+/**
+ * 적용 조건 표 — `search.params` 를 컬럼 헤더 · 연산자 라벨 · 값으로 풀어 보인다.
+ * draft 와 다른 항목은 "미적용" 칩과 함께 `적용값 → 편집값` 으로 그린다.
+ */
+export function FilterStatusContent({ search, columns, compareDraft = true, showImmediate = true, }) {
+    const summary = useFilterStatusSummary(search, columns, compareDraft);
+    const { conditions, globalFilter, sorting, grouping, pagination } = summary;
+    return (_jsxs(Stack, { spacing: 2, children: [_jsxs(Box, { children: [_jsx(SectionTitle, { children: "\uC804\uC5ED\uAC80\uC0C9" }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { variant: "body2", color: globalFilter.value ? "text.primary" : "text.disabled", children: globalFilter.value || "(없음)" }), globalFilter.pending && (_jsxs(_Fragment, { children: [_jsx(ArrowForwardIcon, { sx: { fontSize: 14, color: "warning.main" } }), _jsx(Typography, { variant: "body2", sx: { fontWeight: 600 }, children: globalFilter.draftValue || "(없음)" }), _jsx(PendingChip, { status: "changed" })] }))] })] }), _jsx(Divider, {}), _jsxs(Box, { children: [_jsx(SectionTitle, { extra: summary.appliedCount > 0 && _jsx(Chip, { size: "small", color: "primary", label: `${summary.appliedCount}개 적용`, sx: { height: 20 } }), children: "\uCEEC\uB7FC \uC870\uAC74" }), conditions.length === 0 ? (_jsx(Typography, { variant: "body2", color: "text.disabled", children: "\uC801\uC6A9\uB41C \uCEEC\uB7FC \uC870\uAC74 \uC5C6\uC74C" })) : (_jsx(Box, { sx: { overflowX: "auto" }, children: _jsxs(Table, { size: "small", "aria-label": "\uC801\uC6A9 \uC870\uAC74", children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { sx: { whiteSpace: "nowrap" }, children: "\uCEEC\uB7FC" }), _jsx(TableCell, { sx: { whiteSpace: "nowrap" }, children: "\uC5F0\uC0B0\uC790" }), _jsx(TableCell, { children: "\uAC12" }), compareDraft && _jsx(TableCell, { sx: { whiteSpace: "nowrap" }, children: "\uC0C1\uD0DC" })] }) }), _jsx(TableBody, { children: conditions.map((row) => (_jsxs(TableRow, { "data-status": row.status, sx: row.status !== "applied" ? { bgcolor: "warning.50" } : undefined, children: [_jsx(TableCell, { sx: { whiteSpace: "nowrap", fontWeight: 500 }, children: row.header }), _jsx(TableCell, { children: _jsx(OperatorCell, { row: row }) }), _jsx(TableCell, { children: _jsx(ValueCell, { row: row }) }), compareDraft && _jsx(TableCell, { children: _jsx(PendingChip, { status: row.status }) })] }, row.id))) })] }) }))] }), showImmediate && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsxs(Box, { children: [_jsx(SectionTitle, { children: "\uC989\uC2DC \uC801\uC6A9 \uD56D\uBAA9" }), _jsx(Typography, { variant: "caption", color: "text.secondary", component: "div", sx: { mb: 1 }, children: "\uC815\uB82C\u00B7\uADF8\uB8F9\uD551\u00B7\uD398\uC774\uC9C0\uB294 \uAC80\uC0C9 \uBC84\uD2BC \uC5C6\uC774 \uC989\uC2DC \uBC18\uC601\uB429\uB2C8\uB2E4." }), _jsxs(Stack, { direction: "row", spacing: 1, sx: { flexWrap: "wrap", rowGap: 1 }, children: [_jsx(Chip, { size: "small", variant: "outlined", label: `정렬: ${sorting.length > 0 ? sorting.map((s) => s.label).join(", ") : "(없음)"}` }), _jsx(Chip, { size: "small", variant: "outlined", label: `그룹핑: ${grouping.length > 0 ? grouping.join(" > ") : "(없음)"}` }), _jsx(Chip, { size: "small", variant: "outlined", label: `페이지: ${pagination.pageIndex + 1} / ${pagination.pageSize}개씩` })] })] })] }))] }));
+}
+/** `summarizeSearch` 의 메모 버전 — 버튼 배지와 내용이 같은 요약을 본다 */
+export function useFilterStatusSummary(search, columns, compareDraft = true) {
+    const resolved = columns ?? search.columns;
+    // Provider 의 연산자 라벨을 kind describe 에도 흘린다 (다국어 통로 하나)
+    const { labels: providerLabels } = useKokoTableConfig();
+    const labels = useMemo(() => ({ ...DEFAULT_DESCRIBE_LABELS, operators: providerLabels.operators }), [providerLabels.operators]);
+    return useMemo(() => summarizeSearch({
+        columns: resolved,
+        params: search.params,
+        draft: compareDraft ? search.draft : undefined,
+        operators: search.operators,
+        draftOperators: search.draftOperators,
+        labels,
+    }), [resolved, search.params, search.draft, search.operators, search.draftOperators, compareDraft, labels]);
+}
+/** 적용 조건 확인 모달 — 기존 ERP `FilterStatusModal` 대응 */
+export function FilterStatusModal({ open, onClose, title = "적용 조건", onApply, maxWidth = "sm", ...contentProps }) {
+    const { search } = contentProps;
+    return (_jsxs(Dialog, { open: open, onClose: onClose, maxWidth: maxWidth, fullWidth: true, "aria-labelledby": "koko-filter-status-title", children: [_jsxs(DialogTitle, { id: "koko-filter-status-title", sx: { display: "flex", alignItems: "center", gap: 1, pr: 6 }, children: [_jsx(VisibilityIcon, { fontSize: "small" }), _jsx("span", { children: title }), search.isDirty && _jsx(Chip, { size: "small", color: "warning", label: "\uBBF8\uC801\uC6A9 \uBCC0\uACBD \uC788\uC74C", sx: { height: 22 } }), _jsx(IconButton, { size: "small", onClick: onClose, "aria-label": "\uB2EB\uAE30", sx: { position: "absolute", right: 12, top: 12 }, children: _jsx(CloseIcon, { fontSize: "small" }) })] }), _jsx(DialogContent, { dividers: true, children: _jsx(FilterStatusContent, { ...contentProps }) }), _jsxs(DialogActions, { children: [onApply && search.isDirty && (_jsx(Button, { onClick: () => { onApply(); onClose(); }, children: "\uD3B8\uC9D1 \uC911\uC778 \uC870\uAC74 \uC801\uC6A9" })), _jsx(Button, { onClick: onClose, children: "\uB2EB\uAE30" })] })] }));
+}
+/** 적용 조건 수 배지가 달린 트리거 버튼 — 모달 열림 상태를 스스로 가진다 */
+export function FilterStatusButton({ tooltip = "적용 조건 보기", size = "small", highlightDirty = true, ...modalProps }) {
+    const [open, setOpen] = useState(false);
+    const summary = useFilterStatusSummary(modalProps.search, modalProps.columns, modalProps.compareDraft ?? true);
+    const dirty = highlightDirty && modalProps.search.isDirty;
+    return (_jsxs(_Fragment, { children: [_jsx(Tooltip, { title: dirty ? `${tooltip} (미적용 변경 있음)` : tooltip, children: _jsx(IconButton, { size: size, onClick: () => setOpen(true), "aria-label": tooltip, children: _jsx(Badge, { badgeContent: summary.appliedCount, color: dirty ? "warning" : "primary", max: 99, children: _jsx(VisibilityIcon, { fontSize: "small" }) }) }) }), _jsx(FilterStatusModal, { ...modalProps, open: open, onClose: () => setOpen(false) })] }));
+}