kokotable 0.95.0

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

@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+import type { RegistryPatch } from "../../core/src/index";
+/**
+ * 확장점 공통 레지스트리 (설계 문서 4절) — 구현은 core 에 있다(집계·export 포맷터는 core 가 소비하므로).
+ * mui 는 같은 것을 re-export 한다: `createRegistry` · `Registry` · `RegistryPatch` · `applyPatch` · `isRegistry` · `toRegistry`.
+ */
+export { createRegistry, applyPatch, isRegistry, toRegistry, type Registry, type RegistryPatch, } from "../../core/src/index";
+export interface MenuItemDef<Ctx> {
+    id: string;
+    label: string | ((ctx: Ctx) => string);
+    icon?: ReactNode | ((ctx: Ctx) => ReactNode);
+    /** 노출 조건 — 거짓이면 항목이 빠진다 */
+    when?: (ctx: Ctx) => boolean;
+    run: (ctx: Ctx) => void;
+    disabled?: (ctx: Ctx) => boolean;
+    /** 같은 group 끼리 묶이고 group 사이에 구분선 */
+    group?: string;
+    /** 숫자 작을수록 앞. 미지정이면 레지스트리 위치(바로 앞 `order` 항목 뒤)를 지킨다 */
+    order?: number;
+    /** 이 항목 앞에 구분선 */
+    divider?: boolean;
+    /**
+     * 하나의 정의가 여러 항목으로 펼쳐질 때 (예: "N단계까지 펼치기" 를 단계마다).
+     * 있으면 이 정의 자리에 돌려준 항목들이 들어가고 자신의 `run` 은 쓰이지 않는다.
+     */
+    items?: (ctx: Ctx) => Array<MenuItemDef<Ctx>>;
+}
+export type MenuPatch<Ctx> = RegistryPatch<MenuItemDef<Ctx>>;
+export type { CellRendererDef, CellContext, CellRendererId } from "./content/cellRenderers";
+export type { AggregationDef, ExportFormatterDef } from "../../core/src/index";

package/dist/mui/src/registry.js

@@ -0,0 +1,5 @@
+/**
+ * 확장점 공통 레지스트리 (설계 문서 4절) — 구현은 core 에 있다(집계·export 포맷터는 core 가 소비하므로).
+ * mui 는 같은 것을 re-export 한다: `createRegistry` · `Registry` · `RegistryPatch` · `applyPatch` · `isRegistry` · `toRegistry`.
+ */
+export { createRegistry, applyPatch, isRegistry, toRegistry, } from "../../core/src/index";

package/dist/mui/src/toolbar/GlobalFilterField.d.ts

@@ -0,0 +1,36 @@
+import { type ReactNode } from "react";
+import { type SxProps, type Theme } from "@mui/material";
+import type { RowData } from "@tanstack/react-table";
+import type { TableSearch } from "../../../core/src/index";
+export interface GlobalFilterFieldProps<T extends RowData> {
+    /**
+     * `useTableSearch` 결과. `draft.globalFilter` 를 보고 `setGlobalFilter` / `apply` 를 부른다.
+     * `pendingApply` 가 있으면(코어 debounce 대기 중) 입력 끝에 스피너를 그린다.
+     */
+    search: Pick<TableSearch<T>, "draft" | "setGlobalFilter" | "apply"> & Partial<Pick<TableSearch<T>, "pendingApply">>;
+    /** Enter 로 즉시 검색. 끄면 blur 시 draft 만 갱신되고 검색 버튼이 적용한다 */
+    applyOnEnter?: boolean;
+    /**
+     * 타이핑만으로 조회한다 — 마지막 입력 뒤 `debounceMs` 가 지나면 `setGlobalFilter` + `apply`.
+     * Enter 는 대기를 건너뛰고 즉시 적용한다. 대기 중에는 입력 끝에 작은 스피너가 돈다.
+     */
+    applyOnChange?: boolean;
+    /** `applyOnChange` 의 지연(ms). 기본 300 */
+    debounceMs?: number;
+    /**
+     * 입력 오른쪽 슬롯 — ERP 의 AI 검색 버튼(`AiQueryLauncher`) 이 여기 꽂힌다.
+     * 전역검색어와 무관한 별도 진입점이므로 값 상태에 손대지 않는다.
+     */
+    actions?: ReactNode;
+    label?: string;
+    placeholder?: string;
+    fullWidth?: boolean;
+    sx?: SxProps<Theme>;
+}
+/**
+ * 전역검색 입력 — 기존 `GlobalFilterField.tsx` 대응.
+ * 로컬 상태로 타이핑하고 blur/Enter 에만 draft 에 반영한다(글자마다 검색 상태를 흔들지 않는다).
+ * `applyOnChange` 면 여기서 debounce 해 `setGlobalFilter` + `apply` 를 한 번에 낸다 —
+ * 코어 옵션(`globalFilterApplyOnChange`) 없이도 필드 하나로 동작한다.
+ */
+export declare function GlobalFilterField<T extends RowData>({ search, applyOnEnter, applyOnChange, debounceMs, actions, label, placeholder, fullWidth, sx, }: GlobalFilterFieldProps<T>): import("react").JSX.Element;

package/dist/mui/src/toolbar/GlobalFilterField.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { CircularProgress, InputAdornment, TextField } from "@mui/material";
+import SearchIcon from "@mui/icons-material/Search";
+/**
+ * 전역검색 입력 — 기존 `GlobalFilterField.tsx` 대응.
+ * 로컬 상태로 타이핑하고 blur/Enter 에만 draft 에 반영한다(글자마다 검색 상태를 흔들지 않는다).
+ * `applyOnChange` 면 여기서 debounce 해 `setGlobalFilter` + `apply` 를 한 번에 낸다 —
+ * 코어 옵션(`globalFilterApplyOnChange`) 없이도 필드 하나로 동작한다.
+ */
+export function GlobalFilterField({ search, applyOnEnter = true, applyOnChange = false, debounceMs = 300, actions, label = "전역검색", placeholder = "검색어를 입력하세요", fullWidth = false, sx, }) {
+    const draftValue = search.draft.globalFilter ?? "";
+    const [local, setLocal] = useState(draftValue);
+    const inputRef = useRef(null);
+    // 필드 자체 debounce — 코어의 pendingApply 와 합쳐 스피너를 그린다
+    const timerRef = useRef(null);
+    const [localPending, setLocalPending] = useState(false);
+    const searchRef = useRef(search);
+    searchRef.current = search;
+    const cancelTimer = () => {
+        if (timerRef.current !== null) {
+            clearTimeout(timerRef.current);
+            timerRef.current = null;
+        }
+        setLocalPending(false);
+    };
+    useEffect(() => () => { if (timerRef.current !== null)
+        clearTimeout(timerRef.current); }, []);
+    // 초기화 버튼 등으로 밖에서 바뀌면 따라간다
+    useEffect(() => { setLocal(draftValue); }, [draftValue]);
+    const applyValue = (value) => {
+        // setGlobalFilter 가 draftRef 를 즉시 갱신하므로 같은 핸들러에서 apply 해도 최신 값을 본다
+        searchRef.current.setGlobalFilter(value);
+        searchRef.current.apply();
+    };
+    const onChange = (value) => {
+        setLocal(value);
+        if (!applyOnChange)
+            return;
+        if (timerRef.current !== null)
+            clearTimeout(timerRef.current);
+        if (!(debounceMs > 0)) {
+            applyValue(value);
+            return;
+        }
+        setLocalPending(true);
+        timerRef.current = setTimeout(() => {
+            timerRef.current = null;
+            setLocalPending(false);
+            applyValue(value);
+        }, debounceMs);
+    };
+    const flush = () => {
+        // 대기 중이면 타이머가 처리한다 — blur 로 draft 만 바꾸면 조회 없이 isDirty 만 오른다
+        if (localPending)
+            return;
+        if (local !== draftValue)
+            search.setGlobalFilter(local);
+    };
+    const onKeyDown = (event) => {
+        event.stopPropagation();
+        if (event.key !== "Enter")
+            return;
+        event.preventDefault();
+        cancelTimer();
+        search.setGlobalFilter(local);
+        if (applyOnEnter || applyOnChange)
+            search.apply();
+        inputRef.current?.focus();
+    };
+    const pending = localPending || search.pendingApply === true;
+    return (_jsx(TextField, { inputRef: inputRef, size: "small", label: label, placeholder: placeholder, value: local, fullWidth: fullWidth, onChange: (event) => onChange(event.target.value), onBlur: flush, onKeyDown: onKeyDown, slotProps: {
+            input: {
+                startAdornment: (_jsx(InputAdornment, { position: "start", children: _jsx(SearchIcon, { fontSize: "small", sx: { color: "text.disabled" } }) })),
+                endAdornment: pending || actions ? (_jsxs(InputAdornment, { position: "end", children: [pending && (_jsx(CircularProgress, { size: 14, thickness: 5, "aria-label": "\uC870\uD68C \uB300\uAE30 \uC911", sx: { mr: actions ? 0.5 : 0 } })), actions] })) : undefined,
+            },
+        }, sx: { minWidth: fullWidth ? "100%" : 220, ...sx } }));
+}

package/dist/mui/src/virtual/VirtualTableContent.d.ts

@@ -0,0 +1,41 @@
+import type { RowData } from "@tanstack/react-table";
+import { type TableContentProps } from "../content/TableContent";
+export interface VirtualizeOptions {
+    /** 행 높이 추정치(px). 실제 높이는 렌더 후 측정해 보정한다. 기본 small 밀도 기준 37 */
+    estimateRowHeight?: number;
+    /** 화면 밖에 미리 그릴 행 수. 기본 8 */
+    overscan?: number;
+}
+export interface VirtualizeColumnsOptions {
+    /** 화면 밖에 미리 그릴 열 수. 기본 3 */
+    overscan?: number;
+}
+export interface VirtualTableContentProps<T extends RowData> extends TableContentProps<T> {
+    /** `true` 또는 옵션. false 면 일반 `TableContent` 와 같다 */
+    virtualize?: boolean | VirtualizeOptions;
+    /**
+     * 열 가상화 — 고정되지 않은 가운데 컬럼 중 **가로 스크롤 범위에 보이는 것만** 그린다.
+     * 고정(left/right) 컬럼은 항상 그린다. 폭은 `column.getSize()` 를 그대로 쓰므로(측정하지 않음)
+     * 컬럼에 `size` 를 지정해 두는 편이 정확하다. 컬럼 그룹 헤더(2단 이상)에서는 자동으로 꺼진다.
+     */
+    virtualizeColumns?: boolean | VirtualizeColumnsOptions;
+    /**
+     * 가상화는 스크롤 컨테이너가 있어야 성립한다 — `maxHeight` 가 없으면 컨테이너가 내용만큼
+     * 늘어나 모든 행이 "화면 안" 이 되고, 결국 전부 그린다. 반드시 지정한다.
+     */
+    maxHeight: number | string;
+}
+/**
+ * 행(·열) 가상화 테이블 — `@tanstack/react-virtual` 로 보이는 행만 그린다.
+ *
+ * 별도 진입점 `kokotable/mui/virtual` 에서만 export 한다. 메인 진입점에 두면 가상화를
+ * 쓰지 않는 소비자 번들에도 virtual-core 가 들어가고, `@tanstack/react-virtual` 을 설치하지
+ * 않은 소비자는 번들러 해석 단계에서 실패한다(optional peer).
+ *
+ * 그룹핑(`groupItems`) 도 평탄화 항목 단위로 가상화된다. detail panel 이 펼쳐진 행은
+ * 본문 행만 측정되므로 스크롤 위치 추정이 조금 어긋날 수 있다(그려지는 데는 문제 없다).
+ *
+ * 열 가상화(`virtualizeColumns`)는 같은 스크롤 컨테이너의 `scrollLeft` 를 읽는 가로 virtualizer 다.
+ * 그려지지 않은 폭은 좌·우 패딩 셀이 대신 차지해 스크롤 폭과 고정 컬럼 오프셋이 유지된다.
+ */
+export declare function VirtualTableContent<T extends RowData>({ virtualize, virtualizeColumns, ...props }: VirtualTableContentProps<T>): import("react").JSX.Element;

package/dist/mui/src/virtual/VirtualTableContent.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { TableContentBase } from "../content/TableContent";
+/**
+ * 행(·열) 가상화 테이블 — `@tanstack/react-virtual` 로 보이는 행만 그린다.
+ *
+ * 별도 진입점 `kokotable/mui/virtual` 에서만 export 한다. 메인 진입점에 두면 가상화를
+ * 쓰지 않는 소비자 번들에도 virtual-core 가 들어가고, `@tanstack/react-virtual` 을 설치하지
+ * 않은 소비자는 번들러 해석 단계에서 실패한다(optional peer).
+ *
+ * 그룹핑(`groupItems`) 도 평탄화 항목 단위로 가상화된다. detail panel 이 펼쳐진 행은
+ * 본문 행만 측정되므로 스크롤 위치 추정이 조금 어긋날 수 있다(그려지는 데는 문제 없다).
+ *
+ * 열 가상화(`virtualizeColumns`)는 같은 스크롤 컨테이너의 `scrollLeft` 를 읽는 가로 virtualizer 다.
+ * 그려지지 않은 폭은 좌·우 패딩 셀이 대신 차지해 스크롤 폭과 고정 컬럼 오프셋이 유지된다.
+ */
+export function VirtualTableContent({ virtualize = true, virtualizeColumns = false, ...props }) {
+    const options = typeof virtualize === "object" ? virtualize : {};
+    const enabled = virtualize !== false;
+    const columnOptions = typeof virtualizeColumns === "object" ? virtualizeColumns : {};
+    const columnsEnabled = virtualizeColumns !== false;
+    const containerRef = useRef(null);
+    const grouped = !!props.groupItems && props.groupItems.length > 0;
+    const count = grouped ? props.groupItems.length : props.table.getRowModel().rows.length;
+    const virtualizer = useVirtualizer({
+        count: enabled ? count : 0,
+        getScrollElement: () => containerRef.current,
+        estimateSize: () => options.estimateRowHeight ?? 37,
+        overscan: options.overscan ?? 8,
+        // data-index 를 읽어 어느 행을 측정했는지 안다 (TableContentBase 가 행마다 붙인다)
+        indexAttribute: "data-index",
+    });
+    // ── 열 가상화 ──
+    const centerColumns = props.table.getCenterVisibleLeafColumns();
+    const columnSizing = props.table.getState().columnSizing;
+    // 폭은 측정하지 않고 컬럼 정의(리사이즈 상태 포함)를 그대로 믿는다
+    const sizeKey = useMemo(() => centerColumns.map((column) => `${column.id}:${column.getSize()}`).join("|"), [centerColumns, columnSizing]);
+    const columnVirtualizer = useVirtualizer({
+        horizontal: true,
+        count: columnsEnabled ? centerColumns.length : 0,
+        getScrollElement: () => containerRef.current,
+        estimateSize: (index) => centerColumns[index]?.getSize() ?? 150,
+        overscan: columnOptions.overscan ?? 3,
+    });
+    // 리사이즈·표시 토글로 폭 배열이 바뀌면 캐시된 측정치를 버린다
+    useEffect(() => { columnVirtualizer.measure(); }, [sizeKey, columnVirtualizer]);
+    if (!enabled && !columnsEnabled)
+        return _jsx(TableContentBase, { ...props });
+    return (_jsx(TableContentBase, { ...props, containerRef: containerRef, virtual: enabled ? {
+            items: virtualizer.getVirtualItems(),
+            totalSize: virtualizer.getTotalSize(),
+            measureElement: virtualizer.measureElement,
+        } : undefined, virtualColumns: columnsEnabled ? {
+            items: columnVirtualizer.getVirtualItems(),
+            totalSize: columnVirtualizer.getTotalSize(),
+        } : undefined }));
+}

package/dist/mui/src/virtual/VirtualTableScreen.d.ts

@@ -0,0 +1,13 @@
+import type { RowData } from "@tanstack/react-table";
+import { type TableScreenProps } from "../TableScreen";
+export type VirtualTableScreenProps<T extends RowData> = TableScreenProps<T>;
+/**
+ * 가상화 화면 — `TableScreen` 과 같은 props 에 본문만 `VirtualTableContent` 로 바꾼 것.
+ *
+ * `definition.features.virtualize` 를 읽는다: `true` 면 행 가상화, 객체면 `rows`/`columns`/
+ * `estimateRowHeight`/`maxHeight`. 스크롤 컨테이너 높이는 `contentProps.maxHeight` →
+ * `features.virtualize.maxHeight` → 520 순이다 (없으면 가상화가 성립하지 않는다).
+ *
+ * 별도 진입점 `kokotable/mui/virtual` 에서만 export 한다 — `@tanstack/react-virtual` 은 optional peer 다.
+ */
+export declare function VirtualTableScreen<T extends RowData>(props: VirtualTableScreenProps<T>): import("react").JSX.Element;

package/dist/mui/src/virtual/VirtualTableScreen.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TableScreenBase } from "../TableScreen";
+import { VirtualTableContent } from "./VirtualTableContent";
+const DEFAULT_MAX_HEIGHT = 520;
+/**
+ * 가상화 화면 — `TableScreen` 과 같은 props 에 본문만 `VirtualTableContent` 로 바꾼 것.
+ *
+ * `definition.features.virtualize` 를 읽는다: `true` 면 행 가상화, 객체면 `rows`/`columns`/
+ * `estimateRowHeight`/`maxHeight`. 스크롤 컨테이너 높이는 `contentProps.maxHeight` →
+ * `features.virtualize.maxHeight` → 520 순이다 (없으면 가상화가 성립하지 않는다).
+ *
+ * 별도 진입점 `kokotable/mui/virtual` 에서만 export 한다 — `@tanstack/react-virtual` 은 optional peer 다.
+ */
+export function VirtualTableScreen(props) {
+    const feature = props.bundle.definition.features?.virtualize;
+    const options = typeof feature === "object" ? feature : {};
+    const rows = feature === false ? false : (options.rows ?? true);
+    const virtualize = rows === true
+        ? (options.estimateRowHeight !== undefined ? { estimateRowHeight: options.estimateRowHeight } : true)
+        : rows;
+    const virtualizeColumns = options.columns ?? false;
+    return (_jsx(TableScreenBase, { ...props, renderContent: (contentProps) => (_jsx(VirtualTableContent, { ...contentProps, virtualize: virtualize, virtualizeColumns: virtualizeColumns, maxHeight: contentProps.maxHeight ?? options.maxHeight ?? DEFAULT_MAX_HEIGHT })) }));
+}

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

@@ -0,0 +1,4 @@
+export { VirtualTableContent } from "./virtual/VirtualTableContent";
+export type { VirtualTableContentProps, VirtualizeOptions, VirtualizeColumnsOptions } from "./virtual/VirtualTableContent";
+export { VirtualTableScreen } from "./virtual/VirtualTableScreen";
+export type { VirtualTableScreenProps } from "./virtual/VirtualTableScreen";

package/dist/mui/src/virtual.js

@@ -0,0 +1,4 @@
+// 별도 진입점 `kokotable/mui/virtual` — `@tanstack/react-virtual` 이 필요한 것만 여기서 export 한다.
+// 메인 진입점(`./index`) 은 이 파일을 import 하지 않는다.
+export { VirtualTableContent } from "./virtual/VirtualTableContent";
+export { VirtualTableScreen } from "./virtual/VirtualTableScreen";

package/dist/mui/src/virtualColumns/VirtualColumnCard.d.ts

@@ -0,0 +1,26 @@
+import type { FilterOperator } from "../../../core/src/index";
+import { type VirtualColumnField } from "./expression";
+import type { VirtualColumn } from "./useVirtualColumns";
+/** 숫자 가상 열 필터 연산자 (기존 ERP 카드와 같은 목록) */
+export declare const VIRTUAL_NUMBER_OPERATORS: ReadonlyArray<{
+    value: FilterOperator;
+    label: string;
+}>;
+export interface VirtualColumnCardProps {
+    column: VirtualColumn;
+    onEdit: () => void;
+    onRemove: () => void;
+    /** 수식 표시에 쓸 필드 (키 → 헤더 치환) */
+    fields?: ReadonlyArray<VirtualColumnField>;
+    /**
+     * 필터 입력. 주면 카드 아래에 (숫자면 연산자 + 값, 아니면 텍스트) 입력이 붙는다.
+     * `search.setFilter(slotKey, value)` / `search.setOperator(slotKey, op)` 로 잇는다.
+     */
+    filter?: {
+        value: unknown;
+        operator: FilterOperator;
+        onChange: (value: unknown, operator: FilterOperator) => void;
+    };
+}
+/** 가상 열 카드 — 이름 · 수식 요약 · 타입 · 편집/삭제 (+ 선택적 필터) */
+export declare function VirtualColumnCard({ column, onEdit, onRemove, fields, filter }: VirtualColumnCardProps): import("react").JSX.Element;

package/dist/mui/src/virtualColumns/VirtualColumnCard.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Chip, IconButton, MenuItem, Select, TextField, Tooltip, Typography } from "@mui/material";
+import EditIcon from "@mui/icons-material/Edit";
+import CloseIcon from "@mui/icons-material/Close";
+import { describeExpression } from "./expression";
+/** 숫자 가상 열 필터 연산자 (기존 ERP 카드와 같은 목록) */
+export const VIRTUAL_NUMBER_OPERATORS = [
+    { value: "greaterThanOrEqualTo", label: ">=" },
+    { value: "lessThanOrEqualTo", label: "<=" },
+    { value: "equals", label: "=" },
+    { value: "greaterThan", label: ">" },
+    { value: "lessThan", label: "<" },
+];
+const TYPE_LABELS = { number: "숫자", string: "문자열", boolean: "참/거짓" };
+/** 가상 열 카드 — 이름 · 수식 요약 · 타입 · 편집/삭제 (+ 선택적 필터) */
+export function VirtualColumnCard({ column, onEdit, onRemove, fields = [], filter }) {
+    const isNumber = column.type === "number";
+    const display = fields.length > 0 ? describeExpression(column.expr, fields) : column.expr;
+    return (_jsxs(Box, { "data-testid": `virtual-column-card-${column.slotKey}`, sx: {
+            display: "flex", flexDirection: "column",
+            border: "1px solid", borderColor: "divider", borderRadius: 1,
+            borderLeft: "4px solid", borderLeftColor: "info.main",
+            p: 1, minWidth: 0,
+        }, children: [_jsxs(Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 0.5, gap: 0.5 }, children: [_jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.75, minWidth: 0 }, children: [_jsx(Typography, { variant: "body2", sx: { fontWeight: 600, color: "info.dark", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: column.name }), _jsx(Chip, { label: TYPE_LABELS[column.type], size: "small", variant: "outlined", sx: { height: 18, fontSize: 11 } })] }), _jsxs(Box, { sx: { display: "flex", flexShrink: 0 }, children: [_jsx(Tooltip, { title: "\uD3B8\uC9D1", children: _jsx(IconButton, { size: "small", "aria-label": `${column.name} 편집`, onClick: onEdit, sx: { p: 0.25 }, children: _jsx(EditIcon, { sx: { fontSize: 16 } }) }) }), _jsx(Tooltip, { title: "\uC0AD\uC81C", children: _jsx(IconButton, { size: "small", "aria-label": `${column.name} 삭제`, onClick: onRemove, sx: { p: 0.25 }, children: _jsx(CloseIcon, { sx: { fontSize: 16 } }) }) })] })] }), _jsx(Tooltip, { title: `${column.slotKey}: ${column.expr}`, placement: "top", children: _jsxs(Typography, { variant: "caption", sx: { color: "text.secondary", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", fontFamily: "monospace" }, children: ["= ", display] }) }), filter && (_jsx(Box, { sx: { display: "flex", gap: 0.5, alignItems: "center", mt: 1 }, children: isNumber ? (_jsxs(_Fragment, { children: [_jsx(Select, { size: "small", value: filter.operator, onChange: (event) => filter.onChange(filter.value, event.target.value), inputProps: { "aria-label": `${column.name} 연산자` }, sx: { minWidth: 64, fontSize: "0.8rem" }, children: VIRTUAL_NUMBER_OPERATORS.map((op) => (_jsx(MenuItem, { value: op.value, sx: { fontSize: "0.8rem" }, children: op.label }, op.value))) }), _jsx(TextField, { size: "small", type: "number", placeholder: "\uAC12", value: filter.value ?? "", inputProps: { "aria-label": `${column.name} 필터` }, onChange: (event) => {
+                                const raw = event.target.value;
+                                const parsed = Number.parseFloat(raw);
+                                filter.onChange(raw === "" || Number.isNaN(parsed) ? undefined : parsed, filter.operator);
+                            }, sx: { flex: 1, "& input": { fontSize: "0.8rem" } } })] })) : (_jsx(TextField, { size: "small", placeholder: "\uD544\uD130 \uAC12 \uC785\uB825", fullWidth: true, value: filter.value ?? "", inputProps: { "aria-label": `${column.name} 필터` }, onChange: (event) => filter.onChange(event.target.value || undefined, filter.operator), sx: { "& input": { fontSize: "0.8rem" } } })) }))] }));
+}

package/dist/mui/src/virtualColumns/VirtualColumnDialog.d.ts

@@ -0,0 +1,27 @@
+import { type ExpressionValidation, type VirtualColumnField } from "./expression";
+import type { VirtualColumn, VirtualColumnInput } from "./useVirtualColumns";
+export interface VirtualColumnDialogProps {
+    open: boolean;
+    onClose: () => void;
+    /**
+     * 저장. 실패(`ok: false`)를 돌려주면 다이얼로그가 닫히지 않고 메시지를 보여 준다 —
+     * `useVirtualColumns().add/update` 를 그대로 넘기면 된다.
+     */
+    onSubmit: (column: VirtualColumnInput) => ExpressionValidation | {
+        ok: true;
+        slotKey: string;
+    } | void;
+    /** 편집 모드일 때 기존 값 */
+    initialValues?: VirtualColumn;
+    /** 수식에 쓸 수 있는 필드 (`virtualColumnFields(columns)`) */
+    fields: ReadonlyArray<VirtualColumnField>;
+    /** 저장 전 검증. 없으면 `validateExpression` 만 건다 */
+    validate?: (column: VirtualColumnInput) => ExpressionValidation;
+}
+/**
+ * 가상 열 추가·편집 다이얼로그 — 이름 · 칩 기반 수식 빌더 · 연산자 · 필드 · 타입.
+ *
+ * 기존 ERP `CustomColumnDialog` 의 UX 를 그대로 옮겼다(칩 삽입, Backspace 로 마지막 세그먼트
+ * 제거, Enter 저장, 한글 헤더 미리보기). 검증 실패는 인라인 Alert 로 보여 주고 닫지 않는다.
+ */
+export declare function VirtualColumnDialog({ open, onClose, onSubmit, initialValues, fields, validate, }: VirtualColumnDialogProps): import("react").JSX.Element;

package/dist/mui/src/virtualColumns/VirtualColumnDialog.js

@@ -0,0 +1,154 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { Alert, Box, Button, Chip, Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, FormLabel, IconButton, Radio, RadioGroup, TextField, Tooltip, Typography, } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import { TEMPLATE_FIELD_PATTERN, validateExpression, } from "./expression";
+const OPERATORS = [
+    { label: "+", value: " + ", tooltip: "더하기" },
+    { label: "-", value: " - ", tooltip: "빼기" },
+    { label: "*", value: " * ", tooltip: "곱하기" },
+    { label: "/", value: " / ", tooltip: "나누기" },
+    { label: "(", value: "(", tooltip: "여는 괄호" },
+    { label: ")", value: ")", tooltip: "닫는 괄호" },
+];
+const TYPE_OPTIONS = [
+    { value: "number", label: "숫자" },
+    { value: "string", label: "문자열" },
+    { value: "boolean", label: "참/거짓" },
+];
+/**
+ * 수식 문자열 → 세그먼트. `{key}` 는 필드 칩, 필드 목록에 있는 맨 식별자도 칩으로 올린다.
+ * 나머지는 텍스트다.
+ */
+function parseSegments(expr, fields) {
+    if (!expr)
+        return [];
+    const byKey = new Map(fields.map((f) => [f.key, f.header]));
+    const segments = [];
+    const pushText = (value) => {
+        if (!value)
+            return;
+        const last = segments[segments.length - 1];
+        if (last && last.type === "text")
+            last.value += value;
+        else
+            segments.push({ type: "text", value });
+    };
+    const bare = [...byKey.keys()].sort((a, b) => b.length - a.length)
+        .map((k) => k.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"));
+    const pattern = new RegExp(`${TEMPLATE_FIELD_PATTERN.source}${bare.length > 0 ? `|(?<![\\w.])(${bare.join("|")})(?![\\w.])` : ""}`, "g");
+    let cursor = 0;
+    for (const match of expr.matchAll(pattern)) {
+        pushText(expr.slice(cursor, match.index));
+        const key = match[1] ?? match[2];
+        segments.push({ type: "field", key, header: byKey.get(key) ?? key });
+        cursor = match.index + match[0].length;
+    }
+    pushText(expr.slice(cursor));
+    return segments;
+}
+/** 세그먼트 → 수식. 필드는 항상 `{key}` 로 통일한다 (서버가 정규화한다) */
+function segmentsToExpr(segments, pending) {
+    const all = pending ? [...segments, { type: "text", value: pending }] : segments;
+    return all.map((s) => (s.type === "field" ? `{${s.key}}` : s.value)).join("");
+}
+/**
+ * 가상 열 추가·편집 다이얼로그 — 이름 · 칩 기반 수식 빌더 · 연산자 · 필드 · 타입.
+ *
+ * 기존 ERP `CustomColumnDialog` 의 UX 를 그대로 옮겼다(칩 삽입, Backspace 로 마지막 세그먼트
+ * 제거, Enter 저장, 한글 헤더 미리보기). 검증 실패는 인라인 Alert 로 보여 주고 닫지 않는다.
+ */
+export function VirtualColumnDialog({ open, onClose, onSubmit, initialValues, fields, validate, }) {
+    const [name, setName] = useState("");
+    const [segments, setSegments] = useState([]);
+    const [textInput, setTextInput] = useState("");
+    const [type, setType] = useState("number");
+    const [error, setError] = useState(null);
+    const inputRef = useRef(null);
+    useEffect(() => {
+        if (!open)
+            return;
+        setError(null);
+        setTextInput("");
+        if (initialValues) {
+            setName(initialValues.name);
+            setType(initialValues.type);
+            setSegments(parseSegments(initialValues.expr, fields));
+        }
+        else {
+            setName("");
+            setType("number");
+            setSegments([]);
+        }
+    }, [open, initialValues, fields]);
+    const commitText = useCallback(() => {
+        if (!textInput)
+            return;
+        setSegments((prev) => [...prev, { type: "text", value: textInput }]);
+        setTextInput("");
+    }, [textInput]);
+    const addField = (field) => {
+        commitText();
+        setSegments((prev) => [...prev, { type: "field", key: field.key, header: field.header }]);
+        setError(null);
+        inputRef.current?.focus();
+    };
+    const addOperator = (value) => {
+        commitText();
+        setSegments((prev) => [...prev, { type: "text", value }]);
+        setError(null);
+        inputRef.current?.focus();
+    };
+    const removeSegment = (index) => {
+        setSegments((prev) => prev.filter((_, i) => i !== index));
+        inputRef.current?.focus();
+    };
+    const expr = segmentsToExpr(segments, textInput).trim();
+    const hasExpr = expr.length > 0;
+    const canSubmit = name.trim().length > 0 && hasExpr;
+    const preview = useMemo(() => {
+        const all = textInput ? [...segments, { type: "text", value: textInput }] : segments;
+        return all.map((s) => (s.type === "field" ? s.header : s.value)).join("");
+    }, [segments, textInput]);
+    const handleSubmit = () => {
+        if (!canSubmit)
+            return;
+        const column = { name: name.trim(), expr, type };
+        const check = validate ? validate(column) : validateExpression(expr, { type, fields });
+        if (!check.ok) {
+            setError(check.message);
+            return;
+        }
+        const result = onSubmit(column);
+        if (result && result.ok === false) {
+            setError(result.message);
+            return;
+        }
+        onClose();
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === "Backspace" && textInput === "" && segments.length > 0) {
+            event.preventDefault();
+            const last = segments[segments.length - 1];
+            setSegments((prev) => prev.slice(0, -1));
+            if (last.type === "text")
+                setTextInput(last.value);
+        }
+        if (event.key === "Enter") {
+            event.preventDefault();
+            handleSubmit();
+        }
+    };
+    const isEdit = !!initialValues;
+    return (_jsxs(Dialog, { open: open, onClose: onClose, maxWidth: "sm", fullWidth: true, "aria-labelledby": "virtual-column-dialog-title", children: [_jsxs(DialogTitle, { id: "virtual-column-dialog-title", sx: { display: "flex", alignItems: "center", justifyContent: "space-between", pb: 1 }, children: [_jsx(Typography, { variant: "h6", component: "span", children: isEdit ? "가상 열 편집" : "가상 열 추가" }), _jsx(IconButton, { size: "small", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: _jsx(CloseIcon, {}) })] }), _jsx(DialogContent, { dividers: true, children: _jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 2.5 }, children: [_jsx(TextField, { label: "\uC774\uB984", placeholder: "\uC608: \uD560\uC778\uC561", value: name, onChange: (event) => { setName(event.target.value); setError(null); }, size: "small", fullWidth: true, autoFocus: true, inputProps: { "aria-label": "가상 열 이름" } }), _jsxs(Box, { children: [_jsx(Typography, { variant: "body2", sx: { fontWeight: 500, color: "text.secondary", mb: 0.5 }, children: "\uC218\uC2DD" }), _jsxs(Box, { onClick: () => inputRef.current?.focus(), sx: {
+                                        display: "flex", flexWrap: "wrap", alignItems: "center", gap: 0.5,
+                                        border: "1px solid", borderColor: error ? "error.main" : "grey.400", borderRadius: 1,
+                                        px: 1, py: 0.75, minHeight: 42, cursor: "text",
+                                        "&:focus-within": { borderColor: error ? "error.main" : "primary.main" },
+                                    }, children: [segments.map((segment, index) => segment.type === "field" ? (_jsx(Chip, { label: segment.header, size: "small", color: "primary", variant: "outlined", onDelete: () => removeSegment(index), sx: { fontWeight: 500 } }, index)) : (_jsx(Typography, { variant: "body2", component: "span", sx: { fontFamily: "monospace", fontWeight: 600, color: "text.secondary", whiteSpace: "pre" }, children: segment.value }, index))), _jsx("input", { ref: inputRef, "aria-label": "\uC218\uC2DD \uC785\uB825", value: textInput, onChange: (event) => { setTextInput(event.target.value); setError(null); }, onKeyDown: handleKeyDown, placeholder: segments.length === 0 ? "아래 필드와 연산자를 클릭하거나 직접 입력하세요" : "", style: {
+                                                border: "none", outline: "none", flex: 1, minWidth: 80,
+                                                fontFamily: "monospace", fontSize: "0.875rem", padding: 0, background: "transparent",
+                                            } })] }), _jsx(Typography, { variant: "caption", sx: { color: "text.secondary", display: "block", mt: 0.5 }, children: type === "string"
+                                        ? "문자열 템플릿 — {필드} 참조가 하나 이상 필요합니다. 예: {customer} / {channel}"
+                                        : "사칙연산 · 괄호 · 숫자 · DATE_TRUNC('month', 날짜) · EXTRACT('year', 날짜)" }), preview && (_jsxs(Box, { sx: { mt: 1, px: 1.5, py: 0.75, bgcolor: "action.hover", borderRadius: 1, border: "1px solid", borderColor: "divider" }, children: [_jsx(Typography, { variant: "caption", sx: { color: "text.secondary" }, children: "\uBBF8\uB9AC\uBCF4\uAE30" }), _jsxs(Typography, { variant: "body2", sx: { fontWeight: 500 }, "data-testid": "virtual-column-preview", children: ["= ", preview] })] }))] }), _jsxs(Box, { children: [_jsx(Typography, { variant: "body2", sx: { fontWeight: 500, color: "text.secondary", mb: 0.5 }, children: "\uC5F0\uC0B0\uC790" }), _jsx(Box, { sx: { display: "flex", gap: 0.5 }, children: OPERATORS.map((op) => (_jsx(Tooltip, { title: op.tooltip, placement: "top", children: _jsx(Button, { variant: "outlined", size: "small", "aria-label": `연산자 ${op.label}`, onClick: () => addOperator(op.value), sx: { minWidth: 36, px: 1, fontFamily: "monospace", fontWeight: 700, fontSize: "1rem" }, children: op.label }) }, op.label))) })] }), fields.length > 0 && (_jsxs(Box, { children: [_jsx(Typography, { variant: "body2", sx: { fontWeight: 500, color: "text.secondary", mb: 1 }, children: "\uD544\uB4DC (\uD074\uB9AD\uD558\uC5EC \uC218\uC2DD\uC5D0 \uC0BD\uC785)" }), _jsx(Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.5 }, children: fields.map((field) => (_jsx(Chip, { label: field.header, size: "small", variant: "outlined", onClick: () => addField(field), "data-testid": `virtual-field-${field.key}`, sx: { cursor: "pointer", "&:hover": { borderColor: "primary.main" } } }, field.key))) })] })), _jsxs(FormControl, { children: [_jsx(FormLabel, { sx: { fontSize: "0.875rem", fontWeight: 500 }, children: "\uACB0\uACFC \uD0C0\uC785" }), _jsx(RadioGroup, { row: true, value: type, onChange: (event) => { setType(event.target.value); setError(null); }, children: TYPE_OPTIONS.map((option) => (_jsx(FormControlLabel, { value: option.value, control: _jsx(Radio, { size: "small" }), label: option.label }, option.value))) })] }), error && _jsx(Alert, { severity: "error", role: "alert", children: error })] }) }), _jsxs(DialogActions, { sx: { px: 3, py: 2 }, children: [_jsx(Button, { onClick: onClose, color: "inherit", children: "\uCDE8\uC18C" }), _jsx(Button, { variant: "contained", onClick: handleSubmit, disabled: !canSubmit, children: isEdit ? "수정" : "추가" })] })] }));
+}

package/dist/mui/src/virtualColumns/VirtualColumnSection.d.ts

@@ -0,0 +1,31 @@
+import { type ReactNode } from "react";
+import type { RowData } from "@tanstack/react-table";
+import type { VirtualColumnField } from "./expression";
+import type { UseVirtualColumnsReturn } from "./useVirtualColumns";
+export interface VirtualColumnSectionProps<T extends RowData = RowData> {
+    /** `useVirtualColumns(search)` 결과 */
+    virtualColumns: UseVirtualColumnsReturn<T>;
+    /** 수식에 쓸 필드. 생략하면 훅의 `fields` 를 쓴다 */
+    fields?: ReadonlyArray<VirtualColumnField>;
+    /**
+     * `FilterArea direction="grid"` 의 children 으로 넣을 때 카드 하나의 Grid size —
+     * `resolveFilterGridSize(gridCols)` 값을 그대로. 없으면 카드를 가로로 흘려 놓는다(툴바용).
+     */
+    gridSize?: Record<string, number>;
+    /**
+     * 카드에 필터 입력을 붙인다. 값은 `search.setFilter(slotKey, …)` / `setOperator` 로 들어가
+     * 다른 필터와 같이 draft 에 쌓인다 (검색 버튼으로 적용).
+     */
+    enableFilter?: boolean;
+    /** 추가 버튼 문구 */
+    addLabel?: ReactNode;
+    /** 카드 폭 (inline 배치일 때). 기본 220 */
+    cardWidth?: number;
+}
+/**
+ * 가상 열 섹션 — 카드 목록 + 추가 버튼 + 추가/편집 다이얼로그.
+ *
+ * 기존 ERP `VirtualColumnSection` 대응. `FilterArea` 의 children 이나 툴바 어디든 놓을 수 있고
+ * 다이얼로그 상태를 스스로 관리한다. 상태는 훅(`useVirtualColumns`)이 검색 상태 위에서 들고 있다.
+ */
+export declare function VirtualColumnSection<T extends RowData>({ virtualColumns, fields: fieldsProp, gridSize, enableFilter, addLabel, cardWidth, }: VirtualColumnSectionProps<T>): import("react").JSX.Element;