kokotable 0.95.0

package/dist/mui/src/content/pinning.d.ts

@@ -0,0 +1,17 @@
+import type { SxProps, Theme } from "@mui/material";
+import type { Column, RowData, Table } from "@tanstack/react-table";
+/**
+ * 고정 컬럼의 sticky 스타일. 왼쪽은 `getStart("left")`, 오른쪽은 `getAfter("right")` 오프셋.
+ * 고정 그룹의 마지막 열에 경계 그림자를 넣어 어디까지 고정인지 보이게 한다.
+ * `zIndex` 는 헤더(sticky header 가 이미 2)와 겹치지 않게 호출자가 정한다.
+ */
+export declare function pinnedSx<T extends RowData>(column: Column<T, unknown>, zIndex: number): SxProps<Theme> | undefined;
+/**
+ * 셀 너비를 고정해야 하는가 — 고정하면 그 값, 아니면 `undefined`(내용에 맞게 자동).
+ *
+ * TanStack 은 미지정 컬럼에도 기본 size 150 을 채워 `column.getSize()` 가 항상 숫자다.
+ * 그 값을 그대로 셀에 박으면 참조번호 같은 짧은 컬럼이 150px 을 차지한다. 그래서
+ * **컬럼 정의에 size 를 적었거나, 사용자가 드래그해 columnSizing 상태가 생겼거나,
+ * 고정(pinned) 컬럼**일 때만 너비를 고정하고 나머지는 브라우저 표 레이아웃에 맡긴다.
+ */
+export declare function explicitWidth<T extends RowData>(column: Column<T, unknown>, table: Table<T>): number | undefined;

package/dist/mui/src/content/pinning.js

@@ -0,0 +1,65 @@
+/**
+ * 고정 컬럼의 sticky 스타일. 왼쪽은 `getStart("left")`, 오른쪽은 `getAfter("right")` 오프셋.
+ * 고정 그룹의 마지막 열에 경계 그림자를 넣어 어디까지 고정인지 보이게 한다.
+ * `zIndex` 는 헤더(sticky header 가 이미 2)와 겹치지 않게 호출자가 정한다.
+ */
+export function pinnedSx(column, zIndex) {
+    const pinned = column.getIsPinned();
+    if (!pinned)
+        return undefined;
+    const isLeft = pinned === "left";
+    const boundary = isLeft ? column.getIsLastColumn("left") : column.getIsFirstColumn("right");
+    return {
+        position: "sticky",
+        zIndex,
+        backgroundColor: "background.paper",
+        ...(isLeft ? { left: column.getStart("left") } : { right: column.getAfter("right") }),
+        ...(boundary
+            ? {
+                boxShadow: isLeft
+                    ? "inset -1px 0 0 var(--mui-palette-divider, rgba(0,0,0,0.12))"
+                    : "inset 1px 0 0 var(--mui-palette-divider, rgba(0,0,0,0.12))",
+            }
+            : {}),
+    };
+}
+/** 컬럼 정의 배열 → `{ id: 선언된 size }` (배열 참조 단위로 캐시) */
+const declaredSizeCache = new WeakMap();
+function declaredSizes(columns) {
+    const cached = declaredSizeCache.get(columns);
+    if (cached)
+        return cached;
+    const map = new Map();
+    const visit = (defs) => {
+        for (const def of defs) {
+            const d = def;
+            const id = d.id ?? (d.accessorKey != null ? String(d.accessorKey) : undefined);
+            if (id && typeof d.size === "number")
+                map.set(id, d.size);
+            if (Array.isArray(d.columns))
+                visit(d.columns);
+        }
+    };
+    visit(columns);
+    declaredSizeCache.set(columns, map);
+    return map;
+}
+/**
+ * 셀 너비를 고정해야 하는가 — 고정하면 그 값, 아니면 `undefined`(내용에 맞게 자동).
+ *
+ * TanStack 은 미지정 컬럼에도 기본 size 150 을 채워 `column.getSize()` 가 항상 숫자다.
+ * 그 값을 그대로 셀에 박으면 참조번호 같은 짧은 컬럼이 150px 을 차지한다. 그래서
+ * **컬럼 정의에 size 를 적었거나, 사용자가 드래그해 columnSizing 상태가 생겼거나,
+ * 고정(pinned) 컬럼**일 때만 너비를 고정하고 나머지는 브라우저 표 레이아웃에 맡긴다.
+ */
+export function explicitWidth(column, table) {
+    const size = column.getSize();
+    if (column.getIsPinned())
+        return size;
+    const sizing = table.getState().columnSizing;
+    if (sizing && sizing[column.id] !== undefined)
+        return size;
+    if (declaredSizes(table.options.columns).has(column.id))
+        return size;
+    return undefined;
+}

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

@@ -0,0 +1 @@
+export { useExportFormatters } from "./useExportFormatters";

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

@@ -0,0 +1 @@
+export { useExportFormatters } from "./useExportFormatters";

package/dist/mui/src/exporters/useExportFormatters.d.ts

@@ -0,0 +1,13 @@
+import { type ExportFormatterDef, type Registry } from "../../../core/src/index";
+/**
+ * 현재 Provider 의 export 포맷터 레지스트리 — core 전역 `exportFormatters`(내장 세트) 위에
+ * `registries.exportFormatters`(Provider `exportFormatters`) 를 얹은 것. core 는 Provider 를 모르므로 소비처가 이것을 넘긴다:
+ *
+ * ```ts
+ * const formatters = useExportFormatters();
+ * const exp = useTableExport(table, adapter, { formatters });
+ * exp.toCsv();                      // Provider 포맷터로 찍힌다
+ * toCsv(data, { formatters });      // 훅 없이도 같다
+ * ```
+ */
+export declare function useExportFormatters(): Registry<ExportFormatterDef>;

package/dist/mui/src/exporters/useExportFormatters.js

@@ -0,0 +1,17 @@
+import { exportFormatters as defaultExportFormatters } from "../../../core/src/index";
+import { useKokoTableConfig } from "../provider/KokoTableProvider";
+import { layerRegistry, registriesOf } from "../content/cellRenderers";
+/**
+ * 현재 Provider 의 export 포맷터 레지스트리 — core 전역 `exportFormatters`(내장 세트) 위에
+ * `registries.exportFormatters`(Provider `exportFormatters`) 를 얹은 것. core 는 Provider 를 모르므로 소비처가 이것을 넘긴다:
+ *
+ * ```ts
+ * const formatters = useExportFormatters();
+ * const exp = useTableExport(table, adapter, { formatters });
+ * exp.toCsv();                      // Provider 포맷터로 찍힌다
+ * toCsv(data, { formatters });      // 훅 없이도 같다
+ * ```
+ */
+export function useExportFormatters() {
+    return layerRegistry(defaultExportFormatters, registriesOf(useKokoTableConfig()).exportFormatters);
+}

package/dist/mui/src/filter/FilterArea.d.ts

@@ -0,0 +1,40 @@
+import type { ReactNode } from "react";
+import type { RowData } from "@tanstack/react-table";
+import type { AnyFilterSource } from "../../../core/src/index";
+export type GridColCount = 1 | 2 | 3 | 4 | 6 | 12;
+export interface GridColsConfig {
+    xs: GridColCount;
+    sm: GridColCount;
+    md: GridColCount;
+    lg: GridColCount;
+    xl: GridColCount;
+}
+/** 반응형 열 수 → MUI Grid size (12분할). 가상 컬럼 섹션 등과 공유한다 */
+export declare function resolveFilterGridSize(gridCols?: Partial<GridColsConfig> | GridColCount): {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};
+export interface FilterAreaProps<T extends RowData> {
+    /**
+     * 테이블 인스턴스든 검색 상태든 상관없다.
+     * 기존 호출부는 `source={table}` 그대로, 카드 화면은 `source={search}`.
+     */
+    source: AnyFilterSource<T>;
+    /** column = 세로 일렬(사이드 패널·모달), grid = 반응형 다열(상단 필터) */
+    direction?: "column" | "grid";
+    gridCols?: Partial<GridColsConfig> | GridColCount;
+    /** @deprecated "상세 조건" 접이식 그룹은 제거됐다. 받아도 아무 효과가 없다 */
+    collapseDetail?: boolean;
+    /** 목록 끝에 덧붙일 항목 (가상 컬럼 섹션 등) */
+    children?: ReactNode;
+}
+/**
+ * 필터 구역.
+ *
+ * `getFilterFields()` 만 요구하므로 테이블 인스턴스가 없어도 그려진다 —
+ * 카드 화면·차트 화면에서 같은 컴포넌트를 그대로 쓴다.
+ */
+export declare function FilterArea<T extends RowData>({ source, direction, gridCols, collapseDetail, children, }: FilterAreaProps<T>): import("react").JSX.Element;

package/dist/mui/src/filter/FilterArea.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Grid, Stack, Typography } from "@mui/material";
+import { toFilterSource } from "../../../core/src/index";
+import { FilterInput } from "./FilterInput";
+import { useKokoTableConfig } from "../provider/KokoTableProvider";
+/** 반응형 열 수 → MUI Grid size (12분할). 가상 컬럼 섹션 등과 공유한다 */
+export function resolveFilterGridSize(gridCols) {
+    let merged = { xs: 1, sm: 2, md: 3, lg: 4, xl: 6 };
+    if (typeof gridCols === "number") {
+        merged = { xs: gridCols, sm: gridCols, md: gridCols, lg: gridCols, xl: gridCols };
+    }
+    else if (gridCols) {
+        merged = { ...merged, ...gridCols };
+    }
+    const size = (cols) => Math.floor(12 / cols);
+    return { xs: size(merged.xs), sm: size(merged.sm), md: size(merged.md), lg: size(merged.lg), xl: size(merged.xl) };
+}
+/**
+ * 필터 구역.
+ *
+ * `getFilterFields()` 만 요구하므로 테이블 인스턴스가 없어도 그려진다 —
+ * 카드 화면·차트 화면에서 같은 컴포넌트를 그대로 쓴다.
+ */
+export function FilterArea({ source, direction = "column", gridCols, collapseDetail = false, children, }) {
+    const { labels } = useKokoTableConfig();
+    const fields = toFilterSource(source).getFilterFields();
+    // "상세 조건" 접이식 그룹은 없앴다 — 표시를 접은 컬럼의 필터도 다른 필터와 같은 자리에 그린다.
+    // `collapseDetail`(구 옵트인) 과 `FilterField.detail` 은 받아만 두고 배치에는 쓰지 않는다.
+    void collapseDetail;
+    const primary = fields;
+    const renderField = (field) => (_jsxs(Box, { children: [_jsx(Typography, { variant: "body2", sx: { fontWeight: 500, color: "text.secondary", mb: 0.5 }, children: field.header }), _jsx(FilterInput, { field: field })] }, field.id));
+    if (direction === "grid") {
+        const size = resolveFilterGridSize(gridCols);
+        return (_jsxs(Grid, { container: true, spacing: 2, children: [primary.map((field) => (_jsx(Grid, { size: size, children: renderField(field) }, field.id))), children] }));
+    }
+    return (_jsxs(Stack, { spacing: 2, children: [primary.map(renderField), children] }));
+}

package/dist/mui/src/filter/FilterInput.d.ts

@@ -0,0 +1,14 @@
+import type { FilterField } from "../../../core/src/index";
+/**
+ * 필드 하나를 그린다.
+ *
+ * 컬럼이 `filter.render` 를 선언했으면 **그것이 최우선**이다 — 사용처가 정의한
+ * 커스텀 필터가 기본 입력에 밀리면 선언한 의미가 없다.
+ * 그 다음은 Provider(`filterKinds[kind.id].editor` → `filterInputs[variant]`),
+ * 그 다음 `kind.editor`, 마지막이 내장 기본 입력이다 (`resolveFilterEditor`).
+ *
+ * `filterKinds` 는 Provider 가 아직 모르는 설정일 수 있어 옵셔널로 읽는다.
+ */
+export declare function FilterInput({ field }: {
+    field: FilterField;
+}): import("react").JSX.Element | null;

package/dist/mui/src/filter/FilterInput.js

@@ -0,0 +1,18 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useKokoTableConfig } from "../provider/KokoTableProvider";
+import { resolveFilterEditor } from "./kinds";
+/**
+ * 필드 하나를 그린다.
+ *
+ * 컬럼이 `filter.render` 를 선언했으면 **그것이 최우선**이다 — 사용처가 정의한
+ * 커스텀 필터가 기본 입력에 밀리면 선언한 의미가 없다.
+ * 그 다음은 Provider(`filterKinds[kind.id].editor` → `filterInputs[variant]`),
+ * 그 다음 `kind.editor`, 마지막이 내장 기본 입력이다 (`resolveFilterEditor`).
+ *
+ * `filterKinds` 는 Provider 가 아직 모르는 설정일 수 있어 옵셔널로 읽는다.
+ */
+export function FilterInput({ field }) {
+    const config = useKokoTableConfig();
+    const editor = resolveFilterEditor(field, { filterKinds: config.filterKinds, filterInputs: config.filterInputs });
+    return editor ? _jsx(_Fragment, { children: editor(field) }) : null;
+}

package/dist/mui/src/filter/inputs/DateFilterInput.d.ts

@@ -0,0 +1,14 @@
+import type { FilterField } from "../../../../core/src/index";
+type PeriodMode = "month" | "quarter" | "year";
+/** 연/월(또는 분기) 선택 → `[start, end]` 날짜 문자열 (서버가 종료일을 그 날 전체로 해석하므로 날짜만) */
+export declare function periodRange(mode: PeriodMode, year: number, unit: number): [string, string];
+/**
+ * 날짜 필터 — 범위 두 칸 또는 상대 기간 토큰.
+ *
+ * 값은 `"2025-01-31"` 처럼 **날짜만** 보낸다. 서버가 이를 그 날 전체(반열림)로
+ * 해석하므로, 시각을 붙여 보내면 마지막 날이 통째로 빠진다.
+ */
+export declare function DateFilterInput({ field }: {
+    field: FilterField;
+}): import("react").JSX.Element;
+export {};

package/dist/mui/src/filter/inputs/DateFilterInput.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Box, MenuItem, Stack, TextField } from "@mui/material";
+import { PERIOD_TOKENS } from "../../../../core/src/index";
+import { OperatorMenu } from "./OperatorMenu";
+const RANGE_OPERATORS = new Set(["between", "betweenInclusive", "dateBetween"]);
+/** 상대 기간 토큰 라벨 — 백엔드 `PERIODS` 키와 1:1 */
+const PERIOD_LABELS = {
+    today: "오늘", yesterday: "어제",
+    thisWeek: "이번 주", lastWeek: "지난 주",
+    thisMonth: "이번 달", lastMonth: "지난 달",
+    thisQuarter: "이번 분기", lastQuarter: "지난 분기",
+    thisYear: "올해", lastYear: "작년",
+    last7days: "최근 7일", last30days: "최근 30일",
+    last90days: "최근 90일", last12months: "최근 12개월",
+};
+const asText = (value) => value === null || value === undefined ? "" : String(value);
+const PERIOD_MODES = new Set(["month", "quarter", "year"]);
+const pad2 = (n) => String(n).padStart(2, "0");
+const lastDay = (year, month) => new Date(year, month, 0).getDate();
+/** 연/월(또는 분기) 선택 → `[start, end]` 날짜 문자열 (서버가 종료일을 그 날 전체로 해석하므로 날짜만) */
+export function periodRange(mode, year, unit) {
+    if (mode === "year")
+        return [`${year}-01-01`, `${year}-12-31`];
+    const startMonth = mode === "quarter" ? (unit - 1) * 3 + 1 : unit;
+    const endMonth = mode === "quarter" ? startMonth + 2 : unit;
+    return [`${year}-${pad2(startMonth)}-01`, `${year}-${pad2(endMonth)}-${pad2(lastDay(year, endMonth))}`];
+}
+/** 현재 값(`[start, end]`)에서 연/단위를 되읽는다. 해석 불가면 null */
+function parseSelection(mode, value) {
+    const start = Array.isArray(value) ? asText(value[0]) : "";
+    const match = /^(\d{4})-(\d{2})/.exec(start);
+    if (!match)
+        return null;
+    const year = Number(match[1]);
+    const month = Number(match[2]);
+    if (mode === "year")
+        return { year, unit: 1 };
+    if (mode === "quarter")
+        return { year, unit: Math.floor((month - 1) / 3) + 1 };
+    return { year, unit: month };
+}
+/**
+ * 월/분기/년 선택 — `meta.dateFilterMode` 가 `month | quarter | year` 일 때.
+ * MUI Select 두 개(연도 + 월/분기)로 고르면 그 기간의 `[start, end]` 를 값으로 넣는다.
+ */
+function PeriodModeInput({ field, mode }) {
+    const now = new Date();
+    const selected = parseSelection(mode, field.value);
+    const year = selected?.year ?? "";
+    const unit = selected?.unit ?? "";
+    const years = [];
+    const base = now.getFullYear();
+    for (let y = base + 1; y >= base - 6; y -= 1)
+        years.push(y);
+    if (selected && !years.includes(selected.year))
+        years.push(selected.year);
+    const unitCount = mode === "quarter" ? 4 : 12;
+    const unitLabel = (u) => (mode === "quarter" ? `${u}분기` : `${u}월`);
+    const commit = (nextYear, nextUnit) => {
+        if (nextYear === "")
+            return field.onChange(undefined);
+        const resolvedUnit = mode === "year" ? 1 : nextUnit === "" ? 1 : nextUnit;
+        field.onChange(periodRange(mode, nextYear, resolvedUnit));
+    };
+    return (_jsxs(Stack, { direction: "row", alignItems: "flex-end", spacing: 1, children: [_jsx(OperatorMenu, { operator: field.operator, options: field.operatorOptions, onChange: field.onOperatorChange }), _jsxs(TextField, { select: true, size: "small", variant: "standard", sx: { minWidth: 88 }, value: year, onChange: (event) => commit(event.target.value === "" ? "" : Number(event.target.value), unit), slotProps: { select: { displayEmpty: true, inputProps: { "aria-label": "연도" } } }, children: [_jsx(MenuItem, { value: "", children: _jsx("em", { children: "\uC5F0\uB3C4" }) }), years.map((y) => _jsxs(MenuItem, { value: y, children: [y, "\uB144"] }, y))] }), mode !== "year" && (_jsxs(TextField, { select: true, size: "small", variant: "standard", sx: { minWidth: 80 }, value: unit, disabled: year === "", onChange: (event) => commit(year, event.target.value === "" ? "" : Number(event.target.value)), slotProps: { select: { displayEmpty: true, inputProps: { "aria-label": mode === "quarter" ? "분기" : "월" } } }, children: [_jsx(MenuItem, { value: "", children: _jsx("em", { children: mode === "quarter" ? "분기" : "월" }) }), Array.from({ length: unitCount }, (_, i) => i + 1).map((u) => (_jsx(MenuItem, { value: u, children: unitLabel(u) }, u)))] }))] }));
+}
+/**
+ * 날짜 필터 — 범위 두 칸 또는 상대 기간 토큰.
+ *
+ * 값은 `"2025-01-31"` 처럼 **날짜만** 보낸다. 서버가 이를 그 날 전체(반열림)로
+ * 해석하므로, 시각을 붙여 보내면 마지막 날이 통째로 빠진다.
+ */
+export function DateFilterInput({ field }) {
+    const isPeriod = field.operator === "inPeriod";
+    const isRange = RANGE_OPERATORS.has(field.operator);
+    const mode = field.meta?.dateFilterMode;
+    // 월/분기/년 모드는 범위 연산자에서만 의미가 있다 — equals 등으로 바꾸면 날짜 한 칸으로 떨어진다
+    const periodMode = isRange && mode && PERIOD_MODES.has(mode) ? mode : null;
+    const current = Array.isArray(field.value) ? field.value : [undefined, undefined];
+    const [from, setFrom] = useState(asText(current[0]));
+    const [to, setTo] = useState(asText(current[1]));
+    const [single, setSingle] = useState(Array.isArray(field.value) ? "" : asText(field.value));
+    useEffect(() => {
+        if (Array.isArray(field.value)) {
+            setFrom(asText(field.value[0]));
+            setTo(asText(field.value[1]));
+        }
+        else {
+            setSingle(asText(field.value));
+        }
+    }, [field.value]);
+    const operatorMenu = (_jsx(OperatorMenu, { operator: field.operator, options: field.operatorOptions, onChange: field.onOperatorChange }));
+    if (periodMode)
+        return _jsx(PeriodModeInput, { field: field, mode: periodMode });
+    if (isPeriod) {
+        return (_jsxs(Stack, { direction: "row", alignItems: "flex-end", spacing: 1, children: [operatorMenu, _jsxs(TextField, { select: true, size: "small", variant: "standard", fullWidth: true, value: PERIOD_TOKENS.includes(String(field.value)) ? String(field.value) : "", onChange: (event) => {
+                        field.onChange(event.target.value || undefined);
+                        field.apply?.();
+                    }, children: [_jsx(MenuItem, { value: "", children: _jsx("em", { children: "\uC804\uCCB4 \uAE30\uAC04" }) }), PERIOD_TOKENS.map((token) => (_jsx(MenuItem, { value: token, children: PERIOD_LABELS[token] ?? token }, token)))] })] }));
+    }
+    if (!isRange) {
+        return (_jsxs(Stack, { direction: "row", alignItems: "flex-end", spacing: 1, children: [operatorMenu, _jsx(TextField, { type: "date", size: "small", variant: "standard", fullWidth: true, value: single, onChange: (event) => {
+                        setSingle(event.target.value);
+                        field.onChange(event.target.value || undefined);
+                    }, slotProps: { inputLabel: { shrink: true } } })] }));
+    }
+    const commit = (nextFrom, nextTo) => {
+        field.onChange(!nextFrom && !nextTo ? undefined : [nextFrom || null, nextTo || null]);
+    };
+    return (_jsxs(Stack, { direction: "row", alignItems: "flex-end", spacing: 1, children: [operatorMenu, _jsx(TextField, { type: "date", size: "small", variant: "standard", value: from, sx: { flex: 1 }, onChange: (event) => { setFrom(event.target.value); commit(event.target.value, to); }, slotProps: { inputLabel: { shrink: true } } }), _jsx(Box, { sx: { pb: 0.5, color: "text.disabled" }, children: "~" }), _jsx(TextField, { type: "date", size: "small", variant: "standard", value: to, sx: { flex: 1 }, onChange: (event) => { setTo(event.target.value); commit(from, event.target.value); }, slotProps: { inputLabel: { shrink: true } } })] }));
+}

package/dist/mui/src/filter/inputs/LinearFilterInput.d.ts

@@ -0,0 +1,10 @@
+import type { FilterField } from "../../../../core/src/index";
+/**
+ * 선형결합 필터 — "무엇을 몇 개 이상" 조건.
+ *
+ * `linearExists` 는 수량을 무시하므로 수량 칸을 비활성화한다. 켜 두면
+ * 입력한 수량이 조용히 무시돼 사용자가 결과를 오해한다.
+ */
+export declare function LinearFilterInput({ field }: {
+    field: FilterField;
+}): import("react").JSX.Element;

package/dist/mui/src/filter/inputs/LinearFilterInput.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Button, IconButton, MenuItem, Stack, Switch, TextField, Typography } from "@mui/material";
+import AddIcon from "@mui/icons-material/Add";
+import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
+import { OperatorMenu } from "./OperatorMenu";
+const QUANTITY_OPS = [
+    { value: "gte", label: "≥" },
+    { value: "gt", label: ">" },
+    { value: "eq", label: "=" },
+    { value: "lte", label: "≤" },
+    { value: "lt", label: "<" },
+];
+/**
+ * 선형결합 필터 — "무엇을 몇 개 이상" 조건.
+ *
+ * `linearExists` 는 수량을 무시하므로 수량 칸을 비활성화한다. 켜 두면
+ * 입력한 수량이 조용히 무시돼 사용자가 결과를 오해한다.
+ */
+export function LinearFilterInput({ field }) {
+    const config = field.meta?.linearConfig ?? {};
+    const value = field.value ?? {
+        relation: config.relation ?? field.id,
+        mode: "contains",
+        terms: [],
+        match_all: true,
+        target_fk: config.target_fk,
+        quantity_field: config.quantity_field,
+    };
+    const ignoresQuantity = field.operator === "linearExists";
+    const commit = (next) => field.onChange(next.terms.length === 0 ? undefined : next);
+    const patchTerm = (index, patch) => commit({ ...value, terms: value.terms.map((term, i) => (i === index ? { ...term, ...patch } : term)) });
+    return (_jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [_jsx(OperatorMenu, { operator: field.operator, options: field.operatorOptions, onChange: field.onOperatorChange }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: value.match_all ? "모든 항목 충족" : "하나라도 충족" }), _jsx(Switch, { size: "small", checked: value.match_all, onChange: (event) => commit({ ...value, match_all: event.target.checked }), inputProps: { "aria-label": "모든 항목 충족" } })] }), value.terms.map((term, index) => (_jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "flex-end", children: [_jsx(TextField, { size: "small", variant: "standard", placeholder: "\uB300\uC0C1 idx", sx: { width: 90 }, value: String(term.target_idx ?? ""), onChange: (event) => patchTerm(index, { target_idx: Number(event.target.value) || 0 }) }), _jsx(TextField, { select: true, size: "small", variant: "standard", sx: { width: 60 }, disabled: ignoresQuantity, value: term.quantity_op ?? "gte", onChange: (event) => patchTerm(index, { quantity_op: event.target.value }), children: QUANTITY_OPS.map((option) => (_jsx(MenuItem, { value: option.value, children: option.label }, option.value))) }), _jsx(TextField, { size: "small", variant: "standard", placeholder: "\uC218\uB7C9", sx: { width: 70 }, disabled: ignoresQuantity, value: term.quantity ?? "", onChange: (event) => patchTerm(index, {
+                            quantity: event.target.value === "" ? undefined : Number(event.target.value),
+                        }) }), _jsx(IconButton, { size: "small", "aria-label": "\uD56D\uBAA9 \uC0AD\uC81C", onClick: () => commit({ ...value, terms: value.terms.filter((_, i) => i !== index) }), children: _jsx(DeleteOutlineIcon, { fontSize: "small" }) })] }, index))), ignoresQuantity && value.terms.length > 0 && (_jsx(Box, { sx: { fontSize: 11, color: "text.disabled" }, children: "\"\uC874\uC7AC\" \uB294 \uC218\uB7C9\uC744 \uBCF4\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4" })), _jsx(Button, { size: "small", startIcon: _jsx(AddIcon, {}), sx: { alignSelf: "flex-start" }, onClick: () => commit({ ...value, terms: [...value.terms, { target_idx: 0, quantity_op: "gte" }] }), children: "\uD56D\uBAA9 \uCD94\uAC00" })] }));
+}

package/dist/mui/src/filter/inputs/NumberFilterInput.d.ts

@@ -0,0 +1,12 @@
+import type { FilterField } from "../../../../core/src/index";
+/** "1, 2,3\n4" → [1, 2, 3, 4] (숫자가 아닌 토큰은 버린다) */
+export declare function parseNumberList(text: string): number[];
+/**
+ * 숫자 필터 — 범위 연산자면 두 칸, 아니면 한 칸.
+ *
+ * 두 경계를 **한 컴포넌트가 직접** 그린다. 경계마다 컴포넌트를 부르는 방식은
+ * 같은 입력이 두 번 렌더돼 UI 가 중복된다.
+ */
+export declare function NumberFilterInput({ field }: {
+    field: FilterField;
+}): import("react").JSX.Element;

package/dist/mui/src/filter/inputs/NumberFilterInput.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Autocomplete, Box, Chip, Stack, TextField } from "@mui/material";
+import { isValuelessOperator } from "../../../../core/src/index";
+import { OperatorMenu } from "./OperatorMenu";
+const RANGE_OPERATORS = new Set(["between", "betweenInclusive", "outsideRange"]);
+/** 값이 목록인 연산자 — 번호 여러 개를 **쉼표**로 구분해 넣는다 (스프레드시트 붙여넣기의 줄바꿈도 허용) */
+const LIST_OPERATORS = new Set(["inArray", "notInArray", "in", "notIn"]);
+const SEPARATOR = /[,\n\r]+/;
+/** "1, 2,3\n4" → [1, 2, 3, 4] (숫자가 아닌 토큰은 버린다) */
+export function parseNumberList(text) {
+    const out = [];
+    for (const token of text.split(SEPARATOR)) {
+        const n = toNumber(token);
+        if (n !== null && !out.includes(n))
+            out.push(n);
+    }
+    return out;
+}
+/** 여러 숫자 — `inArray`/`notInArray` 용. 붙여 넣은 목록은 분리자로 쪼개 칩으로 만든다 */
+function NumberListInput({ field }) {
+    const selected = Array.isArray(field.value) ? field.value.map(Number).filter((n) => !Number.isNaN(n)) : [];
+    const [text, setText] = useState("");
+    const commit = (next) => field.onChange(next.length === 0 ? undefined : next);
+    const addFromText = (raw) => {
+        const parsed = parseNumberList(raw);
+        if (parsed.length === 0)
+            return;
+        commit([...selected, ...parsed.filter((n) => !selected.includes(n))]);
+        setText("");
+    };
+    return (_jsxs(Stack, { direction: "row", alignItems: "flex-end", spacing: 1, children: [_jsx(OperatorMenu, { operator: field.operator, options: field.operatorOptions, onChange: field.onOperatorChange }), _jsx(Autocomplete, { multiple: true, freeSolo: true, size: "small", fullWidth: true, options: [], value: selected, inputValue: text, onInputChange: (_e, next, reason) => {
+                    // 쉼표(또는 붙여넣은 줄바꿈)가 들어오면 그 자리에서 칩으로 바꾼다
+                    if (reason === "input" && SEPARATOR.test(next) && next.trim() !== "")
+                        addFromText(next);
+                    else
+                        setText(next);
+                }, onChange: (_e, next) => {
+                    const numbers = next.flatMap((v) => (typeof v === "number" ? [v] : parseNumberList(String(v))));
+                    commit([...new Set(numbers)]);
+                }, onBlur: () => addFromText(text), getOptionLabel: (option) => String(option), renderTags: (tags, getTagProps) => tags.map((option, index) => {
+                    const { key, ...rest } = getTagProps({ index });
+                    return _jsx(Chip, { ...rest, size: "small", label: String(option) }, key);
+                }), renderInput: (params) => (_jsx(TextField, { ...params, variant: "standard", inputMode: "numeric", placeholder: selected.length ? "" : "번호 (쉼표로 구분)", onKeyDown: (event) => {
+                        if (event.key === "Enter") {
+                            event.preventDefault();
+                            addFromText(text);
+                            field.apply?.();
+                        }
+                    } })) })] }));
+}
+const toDisplay = (value) => value === null || value === undefined ? "" : String(value);
+const toNumber = (text) => {
+    const trimmed = text.replace(/,/g, "").trim();
+    if (trimmed === "")
+        return null;
+    const parsed = Number(trimmed);
+    return Number.isNaN(parsed) ? null : parsed;
+};
+/**
+ * 숫자 필터 — 범위 연산자면 두 칸, 아니면 한 칸.
+ *
+ * 두 경계를 **한 컴포넌트가 직접** 그린다. 경계마다 컴포넌트를 부르는 방식은
+ * 같은 입력이 두 번 렌더돼 UI 가 중복된다.
+ */
+export function NumberFilterInput({ field }) {
+    if (LIST_OPERATORS.has(field.operator))
+        return _jsx(NumberListInput, { field: field });
+    return _jsx(NumberScalarInput, { field: field });
+}
+function NumberScalarInput({ field }) {
+    const isRange = RANGE_OPERATORS.has(field.operator);
+    const current = Array.isArray(field.value) ? field.value : [undefined, undefined];
+    const [lo, setLo] = useState(toDisplay(current[0]));
+    const [hi, setHi] = useState(toDisplay(current[1]));
+    const [single, setSingle] = useState(toDisplay(Array.isArray(field.value) ? undefined : field.value));
+    useEffect(() => {
+        if (Array.isArray(field.value)) {
+            setLo(toDisplay(field.value[0]));
+            setHi(toDisplay(field.value[1]));
+        }
+        else {
+            setSingle(toDisplay(field.value));
+        }
+    }, [field.value]);
+    if (isValuelessOperator(field.operator)) {
+        return (_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [_jsx(OperatorMenu, { operator: field.operator, options: field.operatorOptions, onChange: field.onOperatorChange }), _jsx(Box, { sx: { fontSize: 13, color: "text.secondary" }, children: "\uBE44\uC5B4 \uC788\uB294 \uAC12\uB9CC" })] }));
+    }
+    const commitRange = (nextLo, nextHi) => {
+        const low = toNumber(nextLo);
+        const high = toNumber(nextHi);
+        // 양쪽이 다 비면 필터를 지운다 — [null, null] 을 남기면 "조건 있음"으로 보인다
+        field.onChange(low === null && high === null ? undefined : [low, high]);
+    };
+    if (!isRange) {
+        // 연산자 버튼은 다른 입력들과 같이 필드 왼쪽에 둔다 (startAdornment 로 안쪽에 넣으면 혼자만 달라 보인다)
+        return (_jsxs(Stack, { direction: "row", alignItems: "flex-end", spacing: 1, children: [_jsx(OperatorMenu, { operator: field.operator, options: field.operatorOptions, onChange: field.onOperatorChange }), _jsx(TextField, { size: "small", fullWidth: true, variant: "standard", value: single, placeholder: "\uC22B\uC790", inputMode: "numeric", onChange: (event) => setSingle(event.target.value), onBlur: () => field.onChange(toNumber(single) ?? undefined), onKeyDown: (event) => {
+                        if (event.key === "Enter") {
+                            field.onChange(toNumber(single) ?? undefined);
+                            field.apply?.();
+                        }
+                    } })] }));
+    }
+    return (_jsxs(Stack, { direction: "row", alignItems: "flex-end", spacing: 1, children: [_jsx(OperatorMenu, { operator: field.operator, options: field.operatorOptions, onChange: field.onOperatorChange }), _jsx(TextField, { size: "small", variant: "standard", placeholder: "\uCD5C\uC18C", value: lo, inputMode: "numeric", onChange: (event) => setLo(event.target.value), onBlur: () => commitRange(lo, hi), onKeyDown: (event) => { if (event.key === "Enter") {
+                    commitRange(lo, hi);
+                    field.apply?.();
+                } }, sx: { flex: 1 } }), _jsx(Box, { sx: { pb: 0.5, color: "text.disabled" }, children: "~" }), _jsx(TextField, { size: "small", variant: "standard", placeholder: "\uCD5C\uB300", value: hi, inputMode: "numeric", onChange: (event) => setHi(event.target.value), onBlur: () => commitRange(lo, hi), onKeyDown: (event) => { if (event.key === "Enter") {
+                    commitRange(lo, hi);
+                    field.apply?.();
+                } }, sx: { flex: 1 } })] }));
+}

package/dist/mui/src/filter/inputs/OperatorMenu.d.ts

@@ -0,0 +1,14 @@
+import type { FilterOperator } from "../../../../core/src/index";
+export { OPERATOR_LABELS, operatorLabel } from "../../provider/labels";
+export interface OperatorMenuProps {
+    operator: FilterOperator;
+    options: readonly FilterOperator[];
+    onChange: (operator: FilterOperator) => void;
+}
+/**
+ * 연산자 전환 버튼.
+ * 선택지가 1개 이하면 전환할 게 없으므로 **아이콘만** 보여준다(툴팁에 현재 연산자) —
+ * 필터마다 같은 자리에 같은 아이콘이 있어야 참조번호(equals 전용)도 필터로 읽힌다.
+ * 누를 수 있게 두면 빈 메뉴가 열려서 오히려 혼란스럽다.
+ */
+export declare function OperatorMenu({ operator, options, onChange }: OperatorMenuProps): import("react").JSX.Element;

package/dist/mui/src/filter/inputs/OperatorMenu.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { IconButton, ListItemText, Menu, MenuItem, Tooltip } from "@mui/material";
+import FilterListIcon from "@mui/icons-material/FilterList";
+import { useKokoTableConfig } from "../../provider/KokoTableProvider";
+export { OPERATOR_LABELS, operatorLabel } from "../../provider/labels";
+/**
+ * 연산자 전환 버튼.
+ * 선택지가 1개 이하면 전환할 게 없으므로 **아이콘만** 보여준다(툴팁에 현재 연산자) —
+ * 필터마다 같은 자리에 같은 아이콘이 있어야 참조번호(equals 전용)도 필터로 읽힌다.
+ * 누를 수 있게 두면 빈 메뉴가 열려서 오히려 혼란스럽다.
+ */
+export function OperatorMenu({ operator, options, onChange }) {
+    const { labels } = useKokoTableConfig();
+    const [anchorEl, setAnchorEl] = useState(null);
+    const labelOf = (op) => labels.operators[op] ?? op;
+    const label = labelOf(operator);
+    if (options.length < 2) {
+        return (_jsx(Tooltip, { title: labels.ui.filterMode(label), children: _jsx(FilterListIcon, { fontSize: "small", sx: { color: "text.disabled", mb: 0.25 } }) }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(Tooltip, { title: labels.ui.filterMode(label), children: _jsx(IconButton, { size: "small", "aria-label": labels.ui.changeFilterMode, onClick: (event) => setAnchorEl(event.currentTarget), sx: { color: "text.secondary" }, children: _jsx(FilterListIcon, { fontSize: "small" }) }) }), _jsx(Menu, { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), children: options.map((option) => (_jsx(MenuItem, { selected: option === operator, onClick: () => {
+                        onChange(option);
+                        setAnchorEl(null);
+                    }, children: _jsx(ListItemText, { primary: labelOf(option) }) }, option))) })] }));
+}

package/dist/mui/src/filter/inputs/RelationFilterInput.d.ts

@@ -0,0 +1,11 @@
+import type { FilterField } from "../../../../core/src/index";
+/**
+ * 관계(1:N) 필터 — 자식 행 조건을 그룹으로 쌓는다.
+ *
+ * **그룹 안은 AND, 그룹 사이는 연산자에 따라 OR(`hasAny`) 또는 AND(`hasAll`)** 다.
+ * 그룹 안의 조건들은 *같은 자식 행* 에서 모두 만족해야 한다 — 서로 다른 자식이
+ * 나눠 만족하는 것은 통과가 아니다.
+ */
+export declare function RelationFilterInput({ field }: {
+    field: FilterField;
+}): import("react").JSX.Element;