kokotable 0.95.0

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

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Button, IconButton, MenuItem, Stack, TextField, Typography } from "@mui/material";
+import AddIcon from "@mui/icons-material/Add";
+import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
+import { OperatorMenu } from "./OperatorMenu";
+const CONDITION_OPERATORS = [
+    { value: "equals", label: "같음" },
+    { value: "notEquals", label: "다름" },
+    { value: "contains", label: "포함" },
+    { value: "notContains", label: "미포함" },
+    { value: "greaterThan", label: "초과" },
+    { value: "greaterThanOrEqual", label: "이상" },
+    { value: "lessThan", label: "미만" },
+    { value: "lessThanOrEqual", label: "이하" },
+    { value: "isNotNull", label: "값 있음" },
+];
+const emptyValue = { groups: [] };
+/**
+ * 관계(1:N) 필터 — 자식 행 조건을 그룹으로 쌓는다.
+ *
+ * **그룹 안은 AND, 그룹 사이는 연산자에 따라 OR(`hasAny`) 또는 AND(`hasAll`)** 다.
+ * 그룹 안의 조건들은 *같은 자식 행* 에서 모두 만족해야 한다 — 서로 다른 자식이
+ * 나눠 만족하는 것은 통과가 아니다.
+ */
+export function RelationFilterInput({ field }) {
+    const innerColumns = field.meta?.relationColumns ?? [];
+    const value = field.value ?? emptyValue;
+    const structural = field.operator === "hasChild" || field.operator === "hasNotChild";
+    const commit = (next) => {
+        const hasCondition = next.groups.some((group) => group.conditions.length > 0);
+        field.onChange(hasCondition ? next : undefined);
+    };
+    const update = (groupIndex, conditionIndex, patch) => {
+        const groups = value.groups.map((group, gi) => gi !== groupIndex
+            ? group
+            : {
+                conditions: group.conditions.map((condition, ci) => ci !== conditionIndex ? condition : { ...condition, ...patch }),
+            });
+        commit({ groups });
+    };
+    const header = (_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: structural
+                    ? field.operator === "hasChild" ? "자식이 있는 행만" : "자식이 없는 행만"
+                    : field.operator === "hasAll" ? "모든 조건 묶음을 만족" : "조건 묶음 중 하나라도 만족" })] }));
+    if (structural)
+        return header;
+    return (_jsxs(Stack, { spacing: 1, children: [header, value.groups.map((group, groupIndex) => (_jsx(Box, { sx: { border: "1px solid", borderColor: "divider", borderRadius: 1, p: 1 }, children: _jsxs(Stack, { spacing: 0.5, children: [group.conditions.map((condition, conditionIndex) => (_jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "flex-end", children: [_jsx(TextField, { select: true, size: "small", variant: "standard", sx: { minWidth: 90 }, value: condition.column, onChange: (event) => update(groupIndex, conditionIndex, { column: event.target.value }), children: innerColumns.map((column) => (_jsx(MenuItem, { value: column.key, children: column.label }, column.key))) }), _jsx(TextField, { select: true, size: "small", variant: "standard", sx: { minWidth: 80 }, value: condition.operator, onChange: (event) => update(groupIndex, conditionIndex, {
+                                        operator: event.target.value,
+                                    }), children: CONDITION_OPERATORS.map((option) => (_jsx(MenuItem, { value: option.value, children: option.label }, option.value))) }), _jsx(TextField, { size: "small", variant: "standard", placeholder: "\uAC12", sx: { flex: 1 }, value: String(condition.value ?? ""), onChange: (event) => update(groupIndex, conditionIndex, { value: event.target.value }) }), _jsx(IconButton, { size: "small", "aria-label": "\uC870\uAC74 \uC0AD\uC81C", onClick: () => commit({
+                                        groups: value.groups.map((g, gi) => gi !== groupIndex
+                                            ? g
+                                            : { conditions: g.conditions.filter((_, ci) => ci !== conditionIndex) }),
+                                    }), children: _jsx(DeleteOutlineIcon, { fontSize: "small" }) })] }, conditionIndex))), _jsx(Button, { size: "small", startIcon: _jsx(AddIcon, {}), sx: { alignSelf: "flex-start" }, onClick: () => commit({
+                                groups: value.groups.map((g, gi) => gi !== groupIndex
+                                    ? g
+                                    : {
+                                        conditions: [
+                                            ...g.conditions,
+                                            { column: innerColumns[0]?.key ?? "", operator: "equals", value: "" },
+                                        ],
+                                    }),
+                            }), children: "\uC870\uAC74 \uCD94\uAC00 (\uADF8\uB8F9 \uC548\uC740 AND)" })] }) }, groupIndex))), _jsx(Button, { size: "small", startIcon: _jsx(AddIcon, {}), sx: { alignSelf: "flex-start" }, onClick: () => commit({
+                    groups: [
+                        ...value.groups,
+                        { conditions: [{ column: innerColumns[0]?.key ?? "", operator: "equals", value: "" }] },
+                    ],
+                }), children: "\uC870\uAC74 \uBB36\uC74C \uCD94\uAC00" })] }));
+}

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

@@ -0,0 +1,8 @@
+import type { FilterField } from "../../../../core/src/index";
+/**
+ * 일정 필터 — 예정(planned)과 실제(actual) 기간을 **동시에** 본다.
+ * 둘 중 하나라도 조건에 걸리면 통과다 (서버도 두 쌍을 OR 로 묶는다).
+ */
+export declare function ScheduleFilterInput({ field }: {
+    field: FilterField;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Stack, TextField, Typography } from "@mui/material";
+import { OperatorMenu } from "./OperatorMenu";
+/**
+ * 일정 필터 — 예정(planned)과 실제(actual) 기간을 **동시에** 본다.
+ * 둘 중 하나라도 조건에 걸리면 통과다 (서버도 두 쌍을 OR 로 묶는다).
+ */
+export function ScheduleFilterInput({ field }) {
+    const value = field.value ?? {};
+    const fields = field.meta?.scheduleFields;
+    const isOverlaps = field.operator === "scheduleOverlaps";
+    const commit = (next) => {
+        const filled = isOverlaps ? next.start && next.end : next.date;
+        field.onChange(filled ? { ...next, ...(fields ? { fields } : {}) } : undefined);
+    };
+    return (_jsxs(Stack, { spacing: 0.5, children: [_jsxs(Stack, { direction: "row", alignItems: "flex-end", spacing: 1, children: [_jsx(OperatorMenu, { operator: field.operator, options: field.operatorOptions, onChange: field.onOperatorChange }), isOverlaps ? (_jsxs(_Fragment, { children: [_jsx(TextField, { type: "date", size: "small", variant: "standard", sx: { flex: 1 }, value: value.start ?? "", onChange: (event) => commit({ ...value, start: event.target.value }), slotProps: { inputLabel: { shrink: true } } }), _jsx(Box, { sx: { pb: 0.5, color: "text.disabled" }, children: "~" }), _jsx(TextField, { type: "date", size: "small", variant: "standard", sx: { flex: 1 }, value: value.end ?? "", onChange: (event) => commit({ ...value, end: event.target.value }), slotProps: { inputLabel: { shrink: true } } })] })) : (_jsx(TextField, { type: "date", size: "small", variant: "standard", fullWidth: true, value: value.date ?? "", onChange: (event) => commit({ ...value, date: event.target.value }), slotProps: { inputLabel: { shrink: true } } }))] }), _jsx(Typography, { variant: "caption", color: "text.disabled", children: "\uC608\uC815\u00B7\uC2E4\uC81C \uAE30\uAC04 \uC911 \uD558\uB098\uB77C\uB3C4 \uAC78\uB9AC\uBA74 \uD45C\uC2DC\uB429\uB2C8\uB2E4" })] }));
+}

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

@@ -0,0 +1,16 @@
+import type { FilterField } from "../../../../core/src/index";
+/** 단일 선택 — "전체"를 고르면 필터를 지운다 */
+export declare function SelectFilterInput({ field }: {
+    field: FilterField;
+}): import("react").JSX.Element;
+/**
+ * 다중 선택. 값은 **문자열 배열**로 나간다 — 서버 `ListFilter` 가 그 형태를 읽는다.
+ * 선택지를 다 지우면 `undefined` 로 되돌려 "조건 없음"이 되게 한다.
+ */
+export declare function MultiSelectFilterInput({ field }: {
+    field: FilterField;
+}): import("react").JSX.Element;
+/** 불리언 — 선택지가 true/false 로 고정이라 단일 선택과 같다 */
+export declare function BooleanFilterInput({ field }: {
+    field: FilterField;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Autocomplete, Checkbox, Chip, MenuItem, Stack, TextField } from "@mui/material";
+import { ALL_FILTER_VALUE, EMPTY_FILTER_VALUE } from "../../../../core/src/index";
+import { OperatorMenu } from "./OperatorMenu";
+function options(field) {
+    return field.meta?.selectOptions ?? [];
+}
+/** "비어 있음"을 고를 수 있게 센티널을 덧붙인다 (백엔드 `EMPTY_FILTER_VALUE`) */
+function withEmptyOption(list) {
+    return list.some((option) => option.value === EMPTY_FILTER_VALUE)
+        ? list
+        : [...list, { label: "(비어 있음)", value: EMPTY_FILTER_VALUE }];
+}
+/** 단일 선택 — "전체"를 고르면 필터를 지운다 */
+export function SelectFilterInput({ field }) {
+    const list = withEmptyOption(options(field));
+    const value = field.value === undefined || field.value === null ? "" : String(field.value);
+    // 값이 없을 때 빈 칸이 아니라 "전체"(선택지에 있으면) 또는 "선택" 을 자리표시자로 보여준다
+    const allOption = list.find((option) => option.value === ALL_FILTER_VALUE);
+    const placeholder = allOption?.label ?? "선택";
+    const labelOf = (v) => list.find((option) => option.value === String(v))?.label ?? String(v ?? "");
+    return (_jsxs(Stack, { direction: "row", alignItems: "flex-end", spacing: 1, children: [_jsx(OperatorMenu, { operator: field.operator, options: field.operatorOptions, onChange: field.onOperatorChange }), _jsx(TextField, { select: true, size: "small", variant: "standard", fullWidth: true, value: value, slotProps: {
+                    select: {
+                        displayEmpty: true,
+                        renderValue: (selected) => selected === "" || selected === ALL_FILTER_VALUE
+                            ? _jsx("span", { style: { color: "var(--mui-palette-text-disabled, rgba(0,0,0,0.38))" }, children: placeholder })
+                            : labelOf(selected),
+                    },
+                }, onChange: (event) => {
+                    const next = event.target.value;
+                    field.onChange(next === "" || next === ALL_FILTER_VALUE ? undefined : next);
+                    field.apply?.();
+                }, children: list.map((option) => (_jsx(MenuItem, { value: option.value, children: option.label }, option.value))) })] }));
+}
+/**
+ * 다중 선택. 값은 **문자열 배열**로 나간다 — 서버 `ListFilter` 가 그 형태를 읽는다.
+ * 선택지를 다 지우면 `undefined` 로 되돌려 "조건 없음"이 되게 한다.
+ */
+export function MultiSelectFilterInput({ field }) {
+    const list = withEmptyOption(options(field).filter((option) => option.value !== ALL_FILTER_VALUE));
+    const selected = Array.isArray(field.value) ? field.value.map(String) : [];
+    const selectedOptions = list.filter((option) => selected.includes(option.value));
+    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, disableCloseOnSelect: true, size: "small", fullWidth: true, options: list, value: selectedOptions, isOptionEqualToValue: (option, target) => option.value === target.value, getOptionLabel: (option) => option.label, onChange: (_event, next) => {
+                    field.onChange(next.length === 0 ? undefined : next.map((option) => option.value));
+                    field.apply?.();
+                }, renderOption: (props, option, { selected: isSelected }) => {
+                    const { key, ...rest } = props;
+                    return (_jsxs("li", { ...rest, children: [_jsx(Checkbox, { size: "small", checked: isSelected, sx: { mr: 1, p: 0.5 } }), option.label, option.ancestorChain && (_jsx("span", { style: { marginLeft: 6, fontSize: 11, opacity: 0.6 }, children: option.ancestorChain }))] }, key));
+                }, renderTags: (tags, getTagProps) => tags.map((option, index) => {
+                    const { key, ...rest } = getTagProps({ index });
+                    return _jsx(Chip, { ...rest, size: "small", label: option.label }, key);
+                }), renderInput: (params) => _jsx(TextField, { ...params, variant: "standard", placeholder: selected.length ? "" : "선택" }) })] }));
+}
+/** 불리언 — 선택지가 true/false 로 고정이라 단일 선택과 같다 */
+export function BooleanFilterInput({ field }) {
+    return _jsx(SelectFilterInput, { field: field });
+}

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

@@ -0,0 +1,13 @@
+import type { FilterField } from "../../../../core/src/index";
+/**
+ * 텍스트 필터 — 논리식(`배추 ∨ ¬김치`)을 지원한다.
+ *
+ * 값은 **항상 문자열 하나**로 전송된다. 서버 `TextLogicValue.parse` 가 같은
+ * 문법으로 읽으므로 글리프를 그대로 실어 보내면 된다.
+ *
+ * 체인 혼합(`∨` 와 `∧` 동시 사용)은 서버가 400 을 내는 문법 위반이라
+ * 입력 단계에서 막고 경고를 띄운다.
+ */
+export declare function TextFilterInput({ field }: {
+    field: FilterField;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { Box, Chip, Stack, TextField, Tooltip } from "@mui/material";
+import { OP_SYMBOLS, isValuelessOperator, parseTextLogic } from "../../../../core/src/index";
+import { OperatorMenu } from "./OperatorMenu";
+const OP_LABELS = { or: "또는", and: "그리고", not: "제외" };
+/** 타이핑 단축 — `||` `&&` `~~` 를 글리프로 승격 */
+const TYPING_TO_OP = { "||": "or", "&&": "and", "~~": "not" };
+/**
+ * 텍스트 필터 — 논리식(`배추 ∨ ¬김치`)을 지원한다.
+ *
+ * 값은 **항상 문자열 하나**로 전송된다. 서버 `TextLogicValue.parse` 가 같은
+ * 문법으로 읽으므로 글리프를 그대로 실어 보내면 된다.
+ *
+ * 체인 혼합(`∨` 와 `∧` 동시 사용)은 서버가 400 을 내는 문법 위반이라
+ * 입력 단계에서 막고 경고를 띄운다.
+ */
+export function TextFilterInput({ field }) {
+    const value = typeof field.value === "string" ? field.value : field.value == null ? "" : String(field.value);
+    const [draft, setDraft] = useState(value);
+    useEffect(() => setDraft(value), [value]);
+    const valueless = isValuelessOperator(field.operator);
+    const parsed = useMemo(() => parseTextLogic(draft), [draft]);
+    const mixedChain = draft.includes(OP_SYMBOLS.or) && draft.includes(OP_SYMBOLS.and);
+    const invalid = draft.length > 0 && parsed === null && (draft.includes(OP_SYMBOLS.or) || draft.includes(OP_SYMBOLS.and) || draft.includes(OP_SYMBOLS.not));
+    const commit = (next) => {
+        setDraft(next);
+        field.onChange(next === "" ? undefined : next);
+    };
+    const insertOp = (op) => {
+        const glyph = OP_SYMBOLS[op];
+        const next = op === "not" ? `${draft}${draft && !draft.endsWith(" ") ? " " : ""}${glyph}` : `${draft} ${glyph} `;
+        commit(next);
+    };
+    if (valueless) {
+        // 값을 안 쓰는 연산자는 입력창을 그리지 않는다 — 빈 칸을 두면 사용자가 값을 넣을 수 있다고 오해한다
+        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: "\uAC12 \uC5C6\uC774 \uC801\uC6A9\uB429\uB2C8\uB2E4" })] }));
+    }
+    return (_jsxs(Stack, { spacing: 0.5, children: [_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: draft, placeholder: "\uAC80\uC0C9\uC5B4", error: invalid, helperText: mixedChain ? "또는(∨) 과 그리고(∧) 는 섞을 수 없습니다"
+                            : invalid ? "논리식 문법이 올바르지 않습니다"
+                                : undefined, onChange: (event) => {
+                            let next = event.target.value;
+                            for (const [sequence, op] of Object.entries(TYPING_TO_OP)) {
+                                if (next.endsWith(sequence)) {
+                                    next = `${next.slice(0, -sequence.length)}${op === "not" ? "" : " "}${OP_SYMBOLS[op]}${op === "not" ? "" : " "}`;
+                                }
+                            }
+                            setDraft(next);
+                        }, onBlur: () => commit(draft), onKeyDown: (event) => {
+                            if (event.key === "Enter") {
+                                commit(draft);
+                                field.apply?.();
+                            }
+                        } })] }), _jsx(Stack, { direction: "row", spacing: 0.5, children: Object.keys(OP_LABELS).map((op) => (_jsx(Tooltip, { title: `${OP_LABELS[op]} (${Object.keys(TYPING_TO_OP).find((k) => TYPING_TO_OP[k] === op)})`, children: _jsx(Chip, { label: `${OP_SYMBOLS[op]} ${OP_LABELS[op]}`, size: "small", variant: "outlined", onClick: () => insertOp(op), sx: { fontSize: 11, height: 20 } }) }, op))) })] }));
+}

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

@@ -0,0 +1,58 @@
+/**
+ * 필터 kind 의 **표시 부분** — core 의 kind(판정·직렬화·문구·codec)에 editor·chip 을 붙인다.
+ *
+ * - `withEditor(kind, { editor, chip })` — 같은 id 의 새 kind 객체 (원본은 바꾸지 않는다)
+ * - `builtinFilterEditors` — 내장 kind id → 지금의 `TextFilterInput` 등 (정적 맵)
+ * - `registerBuiltinEditors()` — 내장 kind 를 editor 가 붙은 채로 레지스트리에 다시 등록
+ * - `resolveFilterEditor(field, config)` — `FilterInput` 이 쓰는 우선순위 해석
+ */
+import type { ReactNode } from "react";
+import type { AnyFilterKind, FilterField, FilterKind, FilterRender, FilterVariant } from "../../../core/src/index";
+import { type FilterKindStore } from "../../../core/src/index";
+export interface FilterKindDisplay<TValue = unknown, TOp extends string = string> {
+    editor?: FilterRender<TValue>;
+    chip?(value: TValue, operator: TOp): ReactNode;
+}
+/**
+ * Provider `filterKinds` 항목이 요구하는 느슨한 표시 모양. `withEditor` 의 결과가 kind 이면서 이 모양도 만족하도록
+ * 교차 타입으로 얹는다 — Provider 쪽 `chip: (value: unknown, operator: string)` 은 속성 함수 타입이라
+ * kind 의 좁은 `chip(value: TValue, operator: TOp)` 가 그대로는 들어가지 않는다(strictFunctionTypes).
+ */
+export interface LooseFilterKindDisplay {
+    editor?: FilterRender<any>;
+    chip?(value: unknown, operator: string): ReactNode;
+}
+/** kind 에 editor/chip 을 붙인 **새** kind — Provider `filterKinds` 나 컬럼 `filter.kind` 에 넣는다 */
+export declare function withEditor<Id extends string, TValue, TOp extends string, TRow>(kind: FilterKind<Id, TValue, TOp, TRow>, display: FilterKindDisplay<TValue, TOp>): FilterKind<Id, TValue, TOp, TRow> & LooseFilterKindDisplay;
+/** 내장 kind id → 기본 입력. `kind.editor` 가 없을 때 `FilterInput` 이 여기서 찾는다 */
+export declare const builtinFilterEditors: Readonly<Record<string, FilterRender>>;
+/** variant 별 기본 입력 — kind 가 없는(variant 경로) 컬럼과 editor 없는 kind 의 마지막 폴백 */
+export declare function defaultEditorForVariant(variant: FilterVariant): FilterRender | undefined;
+/**
+ * 내장 kind 를 editor 가 붙은 채로 레지스트리에 다시 등록한다.
+ * `FilterInput` 은 이것 없이도 `builtinFilterEditors` 를 보므로 필수는 아니다 —
+ * `filterKinds.get("text").editor` 처럼 레지스트리에서 표시 부분까지 읽고 싶을 때 부른다.
+ */
+export declare function registerBuiltinEditors(store?: FilterKindStore): void;
+/** Provider 가 넘기는 `filterKinds` 항목 — kind 전체이거나 표시 부분만 */
+export type ProvidedFilterKinds = Readonly<Record<string, (FilterKindDisplay & {
+    id?: string;
+}) | AnyFilterKind>>;
+export interface ResolveFilterEditorConfig {
+    /** Provider `filterKinds` — `{ [id]: withEditor(kind, …) | { editor, chip } }` */
+    filterKinds?: ProvidedFilterKinds;
+    /** Provider `filterInputs[variant]` (기존 통로) */
+    filterInputs?: Partial<Record<FilterVariant, FilterRender<any>>>;
+}
+/**
+ * 입력 렌더러 해석 — 우선순위는 **컬럼 > Provider > kind > 내장**:
+ * 1. `column.filter.render` (`field.render`)
+ * 2. `Provider.filterKinds[kind.id].editor`
+ * 3. `Provider.filterInputs[variant]`
+ * 4. `kind.editor` (`withEditor` 로 붙인 것)
+ * 5. 내장 kind 의 기본 입력 (`builtinFilterEditors[kind.id]`)
+ * 6. variant 별 기본 입력 (`custom` 이면 없음)
+ */
+export declare function resolveFilterEditor(field: FilterField, config?: ResolveFilterEditorConfig): FilterRender | undefined;
+/** 칩 렌더러 해석 — 우선순위는 editor 와 같다 (Provider > kind) */
+export declare function resolveFilterChip(field: FilterField, config?: ResolveFilterEditorConfig): FilterKindDisplay["chip"] | undefined;

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

@@ -0,0 +1,103 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { filterKinds, BUILTIN_FILTER_KINDS } from "../../../core/src/index";
+import { TextFilterInput } from "./inputs/TextFilterInput";
+import { NumberFilterInput } from "./inputs/NumberFilterInput";
+import { DateFilterInput } from "./inputs/DateFilterInput";
+import { BooleanFilterInput, MultiSelectFilterInput, SelectFilterInput } from "./inputs/SelectFilterInput";
+import { RelationFilterInput } from "./inputs/RelationFilterInput";
+import { LinearFilterInput } from "./inputs/LinearFilterInput";
+import { ScheduleFilterInput } from "./inputs/ScheduleFilterInput";
+/** kind 에 editor/chip 을 붙인 **새** kind — Provider `filterKinds` 나 컬럼 `filter.kind` 에 넣는다 */
+export function withEditor(kind, display) {
+    return {
+        ...kind,
+        ...(display.editor ? { editor: display.editor } : {}),
+        ...(display.chip ? { chip: display.chip } : {}),
+    };
+}
+/** select / multiSelect 는 같은 enum kind — `field.variant` 로 가른다 */
+const enumEditor = (field) => field.variant === "multiSelect" ? _jsx(MultiSelectFilterInput, { field: field }) : _jsx(SelectFilterInput, { field: field });
+/** 내장 kind id → 기본 입력. `kind.editor` 가 없을 때 `FilterInput` 이 여기서 찾는다 */
+export const builtinFilterEditors = {
+    text: (field) => _jsx(TextFilterInput, { field: field }),
+    number: (field) => _jsx(NumberFilterInput, { field: field }),
+    date: (field) => _jsx(DateFilterInput, { field: field }),
+    period: (field) => _jsx(DateFilterInput, { field: field }),
+    boolean: (field) => _jsx(BooleanFilterInput, { field: field }),
+    enum: enumEditor,
+    commonCode: enumEditor,
+    cascade: enumEditor,
+    relation: (field) => _jsx(RelationFilterInput, { field: field }),
+    linear: (field) => _jsx(LinearFilterInput, { field: field }),
+    schedule: (field) => _jsx(ScheduleFilterInput, { field: field }),
+};
+/** variant 별 기본 입력 — kind 가 없는(variant 경로) 컬럼과 editor 없는 kind 의 마지막 폴백 */
+export function defaultEditorForVariant(variant) {
+    switch (variant) {
+        case "number": return builtinFilterEditors.number;
+        case "date":
+        case "datetime": return builtinFilterEditors.date;
+        case "boolean": return builtinFilterEditors.boolean;
+        case "select":
+        case "multiSelect": return enumEditor;
+        case "relation": return builtinFilterEditors.relation;
+        case "linear": return builtinFilterEditors.linear;
+        case "schedule": return builtinFilterEditors.schedule;
+        case "custom":
+            // custom 인데 render 가 없으면 그릴 방법이 없다. 텍스트로 떨어뜨리면
+            // 값 모양이 안 맞아 조용히 0건이 되므로 아무것도 그리지 않는다.
+            return undefined;
+        case "text":
+        default:
+            return builtinFilterEditors.text;
+    }
+}
+/**
+ * 내장 kind 를 editor 가 붙은 채로 레지스트리에 다시 등록한다.
+ * `FilterInput` 은 이것 없이도 `builtinFilterEditors` 를 보므로 필수는 아니다 —
+ * `filterKinds.get("text").editor` 처럼 레지스트리에서 표시 부분까지 읽고 싶을 때 부른다.
+ */
+export function registerBuiltinEditors(store = filterKinds) {
+    for (const kind of BUILTIN_FILTER_KINDS) {
+        const editor = builtinFilterEditors[kind.id];
+        if (editor)
+            store.register(withEditor(kind, { editor }));
+    }
+}
+/**
+ * 입력 렌더러 해석 — 우선순위는 **컬럼 > Provider > kind > 내장**:
+ * 1. `column.filter.render` (`field.render`)
+ * 2. `Provider.filterKinds[kind.id].editor`
+ * 3. `Provider.filterInputs[variant]`
+ * 4. `kind.editor` (`withEditor` 로 붙인 것)
+ * 5. 내장 kind 의 기본 입력 (`builtinFilterEditors[kind.id]`)
+ * 6. variant 별 기본 입력 (`custom` 이면 없음)
+ */
+export function resolveFilterEditor(field, config = {}) {
+    if (field.render)
+        return field.render;
+    const kind = field.kind;
+    if (kind) {
+        const provided = config.filterKinds?.[kind.id]?.editor;
+        if (provided)
+            return provided;
+    }
+    const byVariant = config.filterInputs?.[field.variant];
+    if (byVariant)
+        return byVariant;
+    if (kind) {
+        if (kind.editor)
+            return kind.editor;
+        const builtin = builtinFilterEditors[kind.id];
+        if (builtin)
+            return builtin;
+    }
+    return defaultEditorForVariant(field.variant);
+}
+/** 칩 렌더러 해석 — 우선순위는 editor 와 같다 (Provider > kind) */
+export function resolveFilterChip(field, config = {}) {
+    const kind = field.kind;
+    if (!kind)
+        return undefined;
+    return (config.filterKinds?.[kind.id]?.chip ?? kind.chip);
+}

package/dist/mui/src/grouping/AggregateChip.d.ts

@@ -0,0 +1,55 @@
+import { type ComponentType, type ReactNode } from "react";
+import { type SvgIconProps, type SxProps, type Theme } from "@mui/material";
+import type { AggFnKey, AggregationDef, AggregationId, Registry } from "../../../core/src/index";
+/**
+ * 현재 Provider 의 집계 레지스트리 — core 전역 `aggregations`(내장 세트) 위에 `registries.aggregations`(Provider `aggregations`) 를 얹은 것.
+ * `useGrouping({ aggregations })`·`AggregationChips`·그룹 행 칩이 같은 것을 보게 이 결과를 넘긴다.
+ */
+export declare function useAggregations(): Registry<AggregationDef>;
+/** MUI `Chip` 의 색 키 */
+export type AggChipColor = "default" | "primary" | "secondary" | "error" | "info" | "success" | "warning";
+/**
+ * 집계 함수별 칩 색 — 집계 성격으로 구분한다.
+ * 합계는 주 집계(primary), 평균·중간값은 대표값(info), 최소/최대는 하한/상한(success/warning),
+ * 표준편차·점유율은 산포/비율(secondary), 개수·고유·최빈값은 default.
+ */
+export declare const AGG_CHIP_COLORS: Record<AggFnKey, AggChipColor>;
+type AggIconComponent = ComponentType<SvgIconProps>;
+/** 집계 함수의 아이콘 컴포넌트 (`@mui/icons-material`). 모르는 키(사용자 집계)는 합계 아이콘 */
+export declare function getAggIcon(fn: AggregationId): AggIconComponent;
+/** 칩 색 — 사용자 집계는 default */
+export declare function aggChipColor(fn: AggregationId): AggChipColor;
+/**
+ * 칩에 찍을 값 문자열.
+ * 정의에 `format` 이 있으면 그것(내장 `ratio` 는 퍼센트). 없으면 정수는 천 단위 구분, 소수는 최대 2자리, 그 외는 문자열 그대로.
+ */
+export declare function formatAggValue(value: unknown, fn?: AggregationId, registry?: Registry<AggregationDef>): string;
+export interface AggregateChipProps {
+    /** 현재 집계 함수 (내장 키 또는 사용자 집계 id) */
+    aggFn: AggregationId;
+    /** 표시할 집계 값. 숫자는 `formatAggValue` 로 찍고, ReactNode 는 그대로 넣는다 */
+    value: ReactNode;
+    /**
+     * 함수 변경 콜백. 없으면 읽기 전용 — 칩을 눌러도 아무 일도 없다.
+     * 있으면 칩을 눌렀을 때 `options` 메뉴(아이콘 + 라벨)가 뜬다.
+     * (메서드 시그니처 — `(fn: AggFnKey) => void` 처럼 좁은 콜백도 받는다)
+     */
+    onChangeAggFn?(fn: AggregationId): void;
+    /** 메뉴에 올릴 함수. 미지정 시 레지스트리 전체 */
+    options?: AggregationId[];
+    /** 집계 레지스트리 — 미지정 시 Provider(`useAggregations()`) */
+    registry?: Registry<AggregationDef>;
+    /** 접근성 라벨 접두 — "금액 합계: 1,234" 처럼 컬럼 이름을 앞에 붙인다 */
+    columnLabel?: string;
+    size?: "small" | "medium";
+    sx?: SxProps<Theme>;
+}
+/**
+ * 집계 칩 — `"합계: 1,234"` 를 outlined 칩으로 그린다. 함수별 색(`AGG_CHIP_COLORS`),
+ * `tabular-nums`. `onChangeAggFn` 이 있으면 칩을 눌러 다른 함수로 바꿀 수 있다.
+ *
+ * 그룹 행 안에 놓이므로 클릭·키보드 이벤트가 행(펼치기 토글)으로 번지지 않게 막는다 —
+ * 메뉴는 포털이지만 React 이벤트는 트리를 따라 올라오기 때문에 메뉴에서도 막는다.
+ */
+export declare function AggregateChip({ aggFn, value, onChangeAggFn, options, columnLabel, size, sx, registry: givenRegistry, }: AggregateChipProps): import("react").JSX.Element;
+export {};

package/dist/mui/src/grouping/AggregateChip.js

@@ -0,0 +1,128 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Box, Chip, ListItemIcon, ListItemText, Menu, MenuItem, Tooltip, } from "@mui/material";
+import FunctionsIcon from "@mui/icons-material/Functions";
+import ShowChartIcon from "@mui/icons-material/ShowChart";
+import AlignVerticalCenterIcon from "@mui/icons-material/AlignVerticalCenter";
+import VerticalAlignBottomIcon from "@mui/icons-material/VerticalAlignBottom";
+import VerticalAlignTopIcon from "@mui/icons-material/VerticalAlignTop";
+import ScatterPlotIcon from "@mui/icons-material/ScatterPlot";
+import FingerprintIcon from "@mui/icons-material/Fingerprint";
+import TagIcon from "@mui/icons-material/Tag";
+import PercentIcon from "@mui/icons-material/Percent";
+import BarChartIcon from "@mui/icons-material/BarChart";
+import { aggregations as defaultAggregations, aggregationLabel } from "../../../core/src/index";
+import { useKokoTableConfig } from "../provider/KokoTableProvider";
+import { layerRegistry, registriesOf } from "../content/cellRenderers";
+/**
+ * 현재 Provider 의 집계 레지스트리 — core 전역 `aggregations`(내장 세트) 위에 `registries.aggregations`(Provider `aggregations`) 를 얹은 것.
+ * `useGrouping({ aggregations })`·`AggregationChips`·그룹 행 칩이 같은 것을 보게 이 결과를 넘긴다.
+ */
+export function useAggregations() {
+    return layerRegistry(defaultAggregations, registriesOf(useKokoTableConfig()).aggregations);
+}
+/**
+ * 집계 함수별 칩 색 — 집계 성격으로 구분한다.
+ * 합계는 주 집계(primary), 평균·중간값은 대표값(info), 최소/최대는 하한/상한(success/warning),
+ * 표준편차·점유율은 산포/비율(secondary), 개수·고유·최빈값은 default.
+ */
+export const AGG_CHIP_COLORS = {
+    sum: "primary",
+    avg: "info",
+    median: "info",
+    min: "success",
+    max: "warning",
+    stddev: "secondary",
+    count_distinct: "default",
+    count_true: "default",
+    ratio: "secondary",
+    mode: "default",
+};
+const AGG_ICONS = {
+    sum: FunctionsIcon,
+    avg: ShowChartIcon,
+    median: AlignVerticalCenterIcon,
+    min: VerticalAlignBottomIcon,
+    max: VerticalAlignTopIcon,
+    stddev: ScatterPlotIcon,
+    count_distinct: FingerprintIcon,
+    count_true: TagIcon,
+    ratio: PercentIcon,
+    mode: BarChartIcon,
+};
+/** 집계 함수의 아이콘 컴포넌트 (`@mui/icons-material`). 모르는 키(사용자 집계)는 합계 아이콘 */
+export function getAggIcon(fn) {
+    return AGG_ICONS[fn] ?? FunctionsIcon;
+}
+/** 칩 색 — 사용자 집계는 default */
+export function aggChipColor(fn) {
+    return AGG_CHIP_COLORS[fn] ?? "default";
+}
+/**
+ * 칩에 찍을 값 문자열.
+ * 정의에 `format` 이 있으면 그것(내장 `ratio` 는 퍼센트). 없으면 정수는 천 단위 구분, 소수는 최대 2자리, 그 외는 문자열 그대로.
+ */
+export function formatAggValue(value, fn, registry = defaultAggregations) {
+    if (value === null || value === undefined)
+        return "";
+    const format = fn ? registry.get(fn)?.format : undefined;
+    if (format)
+        return format(value);
+    if (typeof value === "number") {
+        if (!Number.isFinite(value))
+            return String(value);
+        if (fn === "ratio")
+            return `${(value * 100).toLocaleString("ko-KR", { maximumFractionDigits: 1 })}%`;
+        return Number.isInteger(value)
+            ? value.toLocaleString("ko-KR")
+            : value.toLocaleString("ko-KR", { maximumFractionDigits: 2 });
+    }
+    if (typeof value === "string")
+        return value;
+    return String(value);
+}
+/**
+ * 집계 칩 — `"합계: 1,234"` 를 outlined 칩으로 그린다. 함수별 색(`AGG_CHIP_COLORS`),
+ * `tabular-nums`. `onChangeAggFn` 이 있으면 칩을 눌러 다른 함수로 바꿀 수 있다.
+ *
+ * 그룹 행 안에 놓이므로 클릭·키보드 이벤트가 행(펼치기 토글)으로 번지지 않게 막는다 —
+ * 메뉴는 포털이지만 React 이벤트는 트리를 따라 올라오기 때문에 메뉴에서도 막는다.
+ */
+export function AggregateChip({ aggFn, value, onChangeAggFn, options, columnLabel, size = "small", sx, registry: givenRegistry, }) {
+    const { labels } = useKokoTableConfig();
+    const provided = useAggregations();
+    const registry = givenRegistry ?? provided;
+    const aggLabels = labels.aggregations;
+    const [anchorEl, setAnchorEl] = useState(null);
+    const interactive = !!onChangeAggFn;
+    // 라벨: Provider `labels.aggregations`(다국어) → 레지스트리 정의 `label` → id
+    const labelOf = (fn) => aggLabels[fn] ?? aggregationLabel(fn, registry);
+    const fnLabel = labelOf(aggFn);
+    const displayValue = typeof value === "string" || typeof value === "number" || value === null || value === undefined
+        ? formatAggValue(value, aggFn, registry)
+        : value;
+    const label = displayValue === "" ? fnLabel : (_jsxs(_Fragment, { children: [fnLabel, ": ", typeof displayValue === "string" ? displayValue : _jsx(Box, { component: "span", children: displayValue })] }));
+    const ariaLabel = `${columnLabel ? `${columnLabel} ` : ""}${fnLabel}${typeof displayValue === "string" && displayValue !== "" ? `: ${displayValue}` : ""}`;
+    const stop = (event) => event.stopPropagation();
+    const open = (event) => {
+        if (!onChangeAggFn)
+            return;
+        event.stopPropagation();
+        setAnchorEl(event.currentTarget);
+    };
+    const close = () => setAnchorEl(null);
+    const select = (fn) => {
+        onChangeAggFn?.(fn);
+        close();
+    };
+    const menuOptions = options ?? registry.list().map((def) => def.id);
+    const chip = (_jsx(Chip, { size: size, variant: "outlined", color: aggChipColor(aggFn), label: label, "aria-label": ariaLabel, "aria-haspopup": interactive ? "menu" : undefined, "aria-expanded": interactive ? !!anchorEl : undefined, "data-agg-fn": aggFn, onClick: interactive ? open : undefined, onKeyDown: interactive ? stop : undefined, sx: [
+            { fontVariantNumeric: "tabular-nums", maxWidth: "100%" },
+            interactive && { cursor: "pointer" },
+            ...(Array.isArray(sx) ? sx : sx ? [sx] : []),
+        ] }));
+    return (_jsxs(Box, { component: "span", sx: { display: "inline-flex", alignItems: "center", maxWidth: "100%" }, children: [interactive ? _jsx(Tooltip, { title: `${fnLabel} 변경`, enterDelay: 600, children: chip }) : chip, interactive && (_jsx(Menu, { anchorEl: anchorEl, open: !!anchorEl, onClose: close, onClick: stop, onKeyDown: stop, slotProps: { paper: { sx: { minWidth: 140 } } }, children: menuOptions.map((fn) => {
+                    const Icon = getAggIcon(fn);
+                    return (_jsxs(MenuItem, { dense: true, selected: fn === aggFn, onClick: () => select(fn), children: [_jsx(ListItemIcon, { children: _jsx(Icon, { fontSize: "small" }) }), _jsx(ListItemText, { children: labelOf(fn) })] }, fn));
+                }) }))] }));
+}