kokotable 0.95.0

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

@@ -0,0 +1,56 @@
+import { type ReactNode } from "react";
+import { type SxProps, type Theme } from "@mui/material";
+import type { Presets, PresetScope, TablePreset } from "../../../core/src/index";
+export interface PresetBarMessages {
+    empty: string;
+    save: string;
+    saveTitle: string;
+    name: string;
+    scope: string;
+    scopeUser: string;
+    scopeShared: string;
+    makeDefault: string;
+    clearDefault: string;
+    apply: string;
+    overwrite: string;
+    rename: string;
+    renameTitle: string;
+    remove: string;
+    removeTitle: string;
+    removeConfirm: (name: string) => string;
+    cancel: string;
+    confirm: string;
+    defaultBadge: string;
+    sharedBadge: string;
+    manage: (name: string) => string;
+    loadFailed: string;
+}
+export interface PresetBarProps {
+    /** `usePresets(...)` 결과 */
+    presets: Presets;
+    /** 저장 버튼. 끄면 읽기 전용 바가 된다 */
+    allowSave?: boolean;
+    /** 칩의 관리 메뉴(덮어쓰기·이름 변경·기본 지정·삭제) */
+    allowManage?: boolean;
+    /**
+     * 저장 다이얼로그에 보일 범위. 하나만 주면 선택 UI 가 사라진다.
+     * 기본 `["user", "shared"]` — 서버 저장소가 공유를 모르면 `["user"]` 로 줄인다.
+     */
+    scopes?: PresetScope[];
+    /** 공유 프리셋을 수정·삭제할 수 있는가 — 기본 모두 허용. ERP 는 `owner` 비교를 여기에 건다 */
+    canModify?: (preset: TablePreset) => boolean;
+    size?: "small" | "medium";
+    /** 저장 버튼을 아이콘 대신 텍스트 버튼으로 */
+    saveVariant?: "icon" | "button";
+    messages?: Partial<PresetBarMessages>;
+    /** 칩 뒤에 붙는 추가 요소 */
+    actions?: ReactNode;
+    sx?: SxProps<Theme>;
+}
+/**
+ * 프리셋 바 — 기존 ERP `PresetChips` + `SavePresetDialog` + `ManagePresetsDialog` 를 하나로.
+ *
+ * 칩을 누르면 적용, 칩의 점 세 개 메뉴에서 덮어쓰기·이름 변경·기본 지정·삭제.
+ * 저장소·표 상태는 전부 `usePresets` 가 들고 있어 이 컴포넌트는 UI 만 안다.
+ */
+export declare function PresetBar({ presets, allowSave, allowManage, scopes, canModify, size, saveVariant, messages: givenMessages, actions, sx, }: PresetBarProps): import("react").JSX.Element;

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

@@ -0,0 +1,145 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { Box, Button, Checkbox, Chip, CircularProgress, Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, FormLabel, IconButton, ListItemIcon, ListItemText, Menu, MenuItem, Radio, RadioGroup, Stack, TextField, Tooltip, Typography, } from "@mui/material";
+import AddIcon from "@mui/icons-material/Add";
+import CheckIcon from "@mui/icons-material/Check";
+import DeleteIcon from "@mui/icons-material/Delete";
+import EditIcon from "@mui/icons-material/Edit";
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+import PeopleIcon from "@mui/icons-material/People";
+import SaveIcon from "@mui/icons-material/Save";
+import StarIcon from "@mui/icons-material/Star";
+import StarBorderIcon from "@mui/icons-material/StarBorder";
+const DEFAULT_MESSAGES = {
+    empty: "저장된 프리셋 없음",
+    save: "프리셋 저장",
+    saveTitle: "현재 상태 저장",
+    name: "이름",
+    scope: "범위",
+    scopeUser: "나만",
+    scopeShared: "공유",
+    makeDefault: "기본 프리셋으로 지정",
+    clearDefault: "기본 지정 해제",
+    apply: "적용",
+    overwrite: "현재 상태를 덮어쓰기",
+    rename: "이름 변경",
+    renameTitle: "프리셋 이름 변경",
+    remove: "삭제",
+    removeTitle: "프리셋 삭제",
+    removeConfirm: (name) => `"${name}" 프리셋을 삭제할까요?`,
+    cancel: "취소",
+    confirm: "확인",
+    defaultBadge: "기본",
+    sharedBadge: "공유",
+    manage: (name) => `${name} 관리`,
+    loadFailed: "프리셋을 불러오지 못했습니다",
+};
+/**
+ * 프리셋 바 — 기존 ERP `PresetChips` + `SavePresetDialog` + `ManagePresetsDialog` 를 하나로.
+ *
+ * 칩을 누르면 적용, 칩의 점 세 개 메뉴에서 덮어쓰기·이름 변경·기본 지정·삭제.
+ * 저장소·표 상태는 전부 `usePresets` 가 들고 있어 이 컴포넌트는 UI 만 안다.
+ */
+export function PresetBar({ presets, allowSave = true, allowManage = true, scopes = ["user", "shared"], canModify, size = "small", saveVariant = "icon", messages: givenMessages, actions, sx, }) {
+    const messages = { ...DEFAULT_MESSAGES, ...givenMessages };
+    const [saveOpen, setSaveOpen] = useState(false);
+    const [menu, setMenu] = useState(null);
+    const [renameTarget, setRenameTarget] = useState(null);
+    const [removeTarget, setRemoveTarget] = useState(null);
+    const closeMenu = () => setMenu(null);
+    const modifiable = (preset) => (canModify ? canModify(preset) : true);
+    const runMenu = (work) => {
+        closeMenu();
+        void Promise.resolve(work()).catch(() => {
+            // 오류는 presets.error / onError 로 간다 — 여기서 다시 던지면 unhandled rejection 이 된다
+        });
+    };
+    const chipIcon = (preset) => {
+        if (preset.isDefault)
+            return _jsx(StarIcon, { fontSize: "small", "aria-label": messages.defaultBadge });
+        if (preset.scope === "shared")
+            return _jsx(PeopleIcon, { fontSize: "small", "aria-label": messages.sharedBadge });
+        return undefined;
+    };
+    return (_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, sx: { minWidth: 0, flexWrap: "wrap", rowGap: 0.5, ...sx }, children: [presets.loading && _jsx(CircularProgress, { size: 16, thickness: 5, "aria-label": "\uD504\uB9AC\uC14B \uBD88\uB7EC\uC624\uB294 \uC911" }), presets.error != null && !presets.loading && (_jsx(Typography, { variant: "caption", color: "error", children: messages.loadFailed })), !presets.loading && presets.error == null && presets.presets.length === 0 && (_jsx(Typography, { variant: "body2", color: "text.disabled", children: messages.empty })), presets.presets.map((preset) => {
+                const active = preset.id === presets.activeId;
+                return (_jsx(Chip, { label: preset.name, size: size, icon: chipIcon(preset), color: active ? "primary" : "default", variant: active ? "filled" : "outlined", clickable: true, disabled: presets.busy, onClick: () => presets.apply(preset.id), onDelete: allowManage ? (event) => setMenu({ anchor: event.currentTarget, preset }) : undefined, deleteIcon: allowManage ? _jsx(MoreVertIcon, { "aria-label": messages.manage(preset.name) }) : undefined, sx: { fontWeight: active ? 700 : 500, maxWidth: 240 } }, preset.id));
+            }), allowSave && (saveVariant === "button" ? (_jsx(Button, { size: size, startIcon: _jsx(SaveIcon, {}), disabled: presets.busy || presets.loading, onClick: () => setSaveOpen(true), children: messages.save })) : (_jsx(Tooltip, { title: messages.save, children: _jsx("span", { children: _jsx(IconButton, { size: "small", "aria-label": messages.save, disabled: presets.busy || presets.loading, onClick: () => setSaveOpen(true), children: _jsx(AddIcon, { fontSize: "small" }) }) }) }))), actions, _jsx(Menu, { anchorEl: menu?.anchor ?? null, open: menu !== null, onClose: closeMenu, children: menu && [
+                    _jsxs(MenuItem, { onClick: () => runMenu(() => presets.apply(menu.preset.id)), children: [_jsx(ListItemIcon, { children: _jsx(CheckIcon, { fontSize: "small" }) }), _jsx(ListItemText, { children: messages.apply })] }, "apply"),
+                    _jsxs(MenuItem, { disabled: !modifiable(menu.preset), onClick: () => runMenu(() => presets.overwrite(menu.preset.id)), children: [_jsx(ListItemIcon, { children: _jsx(SaveIcon, { fontSize: "small" }) }), _jsx(ListItemText, { children: messages.overwrite })] }, "overwrite"),
+                    _jsxs(MenuItem, { disabled: !modifiable(menu.preset), onClick: () => { const target = menu.preset; closeMenu(); setRenameTarget(target); }, children: [_jsx(ListItemIcon, { children: _jsx(EditIcon, { fontSize: "small" }) }), _jsx(ListItemText, { children: messages.rename })] }, "rename"),
+                    _jsxs(MenuItem, { onClick: () => runMenu(() => presets.setDefault(menu.preset.isDefault ? null : menu.preset.id)), children: [_jsx(ListItemIcon, { children: menu.preset.isDefault ? _jsx(StarIcon, { fontSize: "small" }) : _jsx(StarBorderIcon, { fontSize: "small" }) }), _jsx(ListItemText, { children: menu.preset.isDefault ? messages.clearDefault : messages.makeDefault })] }, "default"),
+                    _jsxs(MenuItem, { disabled: !modifiable(menu.preset), onClick: () => { const target = menu.preset; closeMenu(); setRemoveTarget(target); }, children: [_jsx(ListItemIcon, { children: _jsx(DeleteIcon, { fontSize: "small", color: "error" }) }), _jsx(ListItemText, { sx: { color: "error.main" }, children: messages.remove })] }, "remove"),
+                ] }), _jsx(SavePresetDialog, { open: saveOpen, scopes: scopes, messages: messages, onClose: () => setSaveOpen(false), onSave: (name, options) => presets.save(name, options) }), _jsx(NameDialog, { open: renameTarget !== null, title: messages.renameTitle, label: messages.name, initial: renameTarget?.name ?? "", messages: messages, onClose: () => setRenameTarget(null), onSubmit: (name) => (renameTarget ? presets.update(renameTarget.id, { name }) : Promise.resolve()) }), _jsxs(Dialog, { open: removeTarget !== null, onClose: () => setRemoveTarget(null), maxWidth: "xs", fullWidth: true, children: [_jsx(DialogTitle, { children: messages.removeTitle }), _jsx(DialogContent, { children: _jsx(Typography, { variant: "body2", children: removeTarget ? messages.removeConfirm(removeTarget.name) : "" }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: () => setRemoveTarget(null), children: messages.cancel }), _jsx(Button, { color: "error", variant: "contained", onClick: () => {
+                                    const target = removeTarget;
+                                    setRemoveTarget(null);
+                                    if (target)
+                                        void presets.remove(target.id).catch(() => { });
+                                }, children: messages.remove })] })] })] }));
+}
+function SavePresetDialog({ open, scopes, messages, onClose, onSave }) {
+    const [name, setName] = useState("");
+    const [scope, setScope] = useState(scopes[0] ?? "user");
+    const [isDefault, setIsDefault] = useState(false);
+    const [saving, setSaving] = useState(false);
+    const reset = () => {
+        setName("");
+        setScope(scopes[0] ?? "user");
+        setIsDefault(false);
+    };
+    const close = () => {
+        if (saving)
+            return;
+        reset();
+        onClose();
+    };
+    const submit = async () => {
+        const trimmed = name.trim();
+        if (!trimmed)
+            return;
+        setSaving(true);
+        try {
+            await onSave(trimmed, { scope, isDefault });
+            reset();
+            onClose();
+        }
+        catch {
+            // 오류 표시는 presets.error 가 맡는다 — 다이얼로그는 열어 둔다
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    return (_jsxs(Dialog, { open: open, onClose: close, maxWidth: "xs", fullWidth: true, children: [_jsx(DialogTitle, { children: messages.saveTitle }), _jsx(DialogContent, { children: _jsxs(Stack, { spacing: 2, sx: { pt: 1 }, children: [_jsx(TextField, { autoFocus: true, fullWidth: true, size: "small", label: messages.name, value: name, required: true, slotProps: { htmlInput: { maxLength: 50, "aria-label": messages.name } }, onChange: (e) => setName(e.target.value), onKeyDown: (e) => { if (e.key === "Enter") {
+                                e.preventDefault();
+                                void submit();
+                            } } }), scopes.length > 1 && (_jsxs(FormControl, { children: [_jsx(FormLabel, { children: messages.scope }), _jsx(RadioGroup, { row: true, value: scope, onChange: (e) => setScope(e.target.value), children: scopes.map((s) => (_jsx(FormControlLabel, { value: s, control: _jsx(Radio, { size: "small" }), label: s === "shared" ? messages.scopeShared : messages.scopeUser }, s))) })] })), _jsx(FormControlLabel, { control: _jsx(Checkbox, { size: "small", checked: isDefault, onChange: (e) => setIsDefault(e.target.checked) }), label: messages.makeDefault })] }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: close, disabled: saving, children: messages.cancel }), _jsx(Button, { variant: "contained", onClick: () => void submit(), disabled: saving || !name.trim(), children: messages.confirm })] })] }));
+}
+function NameDialog({ open, title, label, initial, messages, onClose, onSubmit }) {
+    // 열릴 때마다 초기값을 다시 넣는다 — key 로 상태를 갈아끼운다
+    return (_jsx(Dialog, { open: open, onClose: onClose, maxWidth: "xs", fullWidth: true, children: open && (_jsx(NameForm, { title: title, label: label, initial: initial, messages: messages, onClose: onClose, onSubmit: onSubmit }, initial)) }));
+}
+function NameForm({ title, label, initial, messages, onClose, onSubmit }) {
+    const [name, setName] = useState(initial);
+    const [saving, setSaving] = useState(false);
+    const submit = async () => {
+        const trimmed = name.trim();
+        if (!trimmed)
+            return;
+        setSaving(true);
+        try {
+            await onSubmit(trimmed);
+            onClose();
+        }
+        catch {
+            // presets.error
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(DialogTitle, { children: title }), _jsx(DialogContent, { children: _jsx(Box, { sx: { pt: 1 }, children: _jsx(TextField, { autoFocus: true, fullWidth: true, size: "small", label: label, value: name, slotProps: { htmlInput: { maxLength: 50, "aria-label": label } }, onChange: (e) => setName(e.target.value), onKeyDown: (e) => { if (e.key === "Enter") {
+                            e.preventDefault();
+                            void submit();
+                        } } }) }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: onClose, disabled: saving, children: messages.cancel }), _jsx(Button, { variant: "contained", onClick: () => void submit(), disabled: saving || !name.trim(), children: messages.confirm })] })] }));
+}

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

@@ -0,0 +1,35 @@
+import { type ReactNode } from "react";
+import type { UrlSync } from "../../../core/src/index";
+export interface ShareAction {
+    key: string;
+    label: ReactNode;
+    icon?: ReactNode;
+    /** 현재 공유 URL 을 받는다 — 알림 공유 API 등 소비 앱 몫 */
+    onClick: (shareUrl: string) => void | Promise<void>;
+    disabled?: boolean;
+}
+export interface ShareDropdownMessages {
+    copied: string;
+    copyFailedTitle: string;
+    copyFailedHint: string;
+}
+export interface ShareDropdownProps {
+    /** `useUrlSync(search)` 결과 — `shareUrl` 과 `copyShareUrl` 만 쓴다 */
+    urlSync: Pick<UrlSync, "shareUrl" | "copyShareUrl">;
+    /** "알림으로 공유" 같은 앱 액션. URL 복사 아래에 순서대로 놓인다 */
+    extraActions?: ShareAction[];
+    size?: "small" | "medium" | "large";
+    tooltip?: string;
+    copyLabel?: ReactNode;
+    messages?: Partial<ShareDropdownMessages>;
+    /** 복사 성공/실패 뒤 호출 — 호출부가 자체 토스트를 쓰면 `showSnackbar=false` 와 함께 */
+    onCopy?: (ok: boolean, shareUrl: string) => void;
+    showSnackbar?: boolean;
+    /** 아이콘 대신 텍스트 버튼으로 그린다 */
+    variant?: "icon" | "button";
+}
+/**
+ * 공유 드롭다운 — 기존 ERP `ShareDropdown` 대응.
+ * URL 복사는 `copyShareUrl()` 로, 실패하면 URL 을 보여 주는 다이얼로그로 폴백한다.
+ */
+export declare function ShareDropdown({ urlSync, extraActions, size, tooltip, copyLabel, messages: givenMessages, onCopy, showSnackbar, variant, }: ShareDropdownProps): import("react").JSX.Element;

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

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, ListItemIcon, ListItemText, Menu, MenuItem, Snackbar, TextField, Tooltip, Typography, } from "@mui/material";
+import LinkIcon from "@mui/icons-material/Link";
+import ShareIcon from "@mui/icons-material/Share";
+const DEFAULT_MESSAGES = {
+    copied: "URL 을 복사했습니다",
+    copyFailedTitle: "URL 복사 실패",
+    copyFailedHint: "클립보드 권한이 없습니다. 아래 URL 을 직접 복사하세요.",
+};
+/**
+ * 공유 드롭다운 — 기존 ERP `ShareDropdown` 대응.
+ * URL 복사는 `copyShareUrl()` 로, 실패하면 URL 을 보여 주는 다이얼로그로 폴백한다.
+ */
+export function ShareDropdown({ urlSync, extraActions = [], size = "small", tooltip = "공유", copyLabel = "URL 복사", messages: givenMessages, onCopy, showSnackbar = true, variant = "icon", }) {
+    const messages = { ...DEFAULT_MESSAGES, ...givenMessages };
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [toast, setToast] = useState(null);
+    const [fallbackUrl, setFallbackUrl] = useState(null);
+    const close = () => setAnchorEl(null);
+    const copy = async () => {
+        close();
+        const url = urlSync.shareUrl || (typeof window !== "undefined" ? window.location.href : "");
+        const ok = await urlSync.copyShareUrl();
+        onCopy?.(ok, url);
+        if (ok) {
+            if (showSnackbar)
+                setToast(messages.copied);
+        }
+        else {
+            setFallbackUrl(url);
+        }
+    };
+    const run = async (action) => {
+        close();
+        const url = urlSync.shareUrl || (typeof window !== "undefined" ? window.location.href : "");
+        await action.onClick(url);
+    };
+    const trigger = variant === "button" ? (_jsx(Button, { size: size === "large" ? "medium" : size, variant: "outlined", color: "info", startIcon: _jsx(ShareIcon, {}), onClick: (event) => setAnchorEl(event.currentTarget), "aria-label": tooltip, "aria-haspopup": "menu", "aria-expanded": !!anchorEl, children: tooltip })) : (_jsx(IconButton, { size: size, onClick: (event) => setAnchorEl(event.currentTarget), "aria-label": tooltip, "aria-haspopup": "menu", "aria-expanded": !!anchorEl, sx: { border: 1, borderColor: "info.main", color: "info.main" }, children: _jsx(ShareIcon, { fontSize: "small" }) }));
+    return (_jsxs(_Fragment, { children: [_jsx(Tooltip, { title: tooltip, children: trigger }), _jsxs(Menu, { anchorEl: anchorEl, open: !!anchorEl, onClose: close, anchorOrigin: { vertical: "bottom", horizontal: "right" }, transformOrigin: { vertical: "top", horizontal: "right" }, children: [_jsxs(MenuItem, { onClick: () => { void copy(); }, children: [_jsx(ListItemIcon, { children: _jsx(LinkIcon, { fontSize: "small" }) }), _jsx(ListItemText, { children: copyLabel })] }), extraActions.map((action) => (_jsxs(MenuItem, { disabled: action.disabled, onClick: () => { void run(action); }, children: [action.icon && _jsx(ListItemIcon, { children: action.icon }), _jsx(ListItemText, { children: action.label })] }, action.key)))] }), _jsx(Snackbar, { open: !!toast, autoHideDuration: 2500, onClose: () => setToast(null), message: toast }), _jsxs(Dialog, { open: fallbackUrl !== null, onClose: () => setFallbackUrl(null), maxWidth: "sm", fullWidth: true, children: [_jsx(DialogTitle, { children: messages.copyFailedTitle }), _jsxs(DialogContent, { children: [_jsx(Typography, { variant: "body2", sx: { mb: 1.5 }, children: messages.copyFailedHint }), _jsx(TextField, { value: fallbackUrl ?? "", fullWidth: true, size: "small", multiline: true, maxRows: 4, slotProps: { input: { readOnly: true }, htmlInput: { "aria-label": "공유 URL" } }, onFocus: (event) => event.target.select() })] }), _jsx(DialogActions, { children: _jsx(Button, { onClick: () => setFallbackUrl(null), children: "\uB2EB\uAE30" }) })] })] }));
+}

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

@@ -0,0 +1,44 @@
+import type { RowData } from "@tanstack/react-table";
+import { type SearchState, type TableSearch } from "../../../core/src/index";
+export interface SearchStoreSnapshot {
+    params: SearchState;
+    draft: SearchState;
+    isDirty: boolean;
+    /** 브리지가 붙어 있는가 — false 면 아직 표 화면이 마운트되지 않았다 */
+    bound: boolean;
+}
+/** 브리지가 스토어에 연결하는 search 메서드 — `SearchState` 만 오간다 */
+export interface SearchStoreActions {
+    patchParams: (partial: Partial<SearchState>) => void;
+    patchDraft: (partial: Partial<SearchState>) => void;
+    setParams: (params: SearchState) => void;
+    setDraft: (draft: SearchState) => void;
+    apply: () => void;
+    reset: () => void;
+}
+export interface SearchStore extends SearchStoreActions {
+    subscribe: (listener: () => void) => () => void;
+    getSnapshot: () => SearchStoreSnapshot;
+    /** `getSnapshot` 의 별칭 */
+    getState: () => SearchStoreSnapshot;
+    /** @internal 브리지 전용 */
+    _bind: (actions: SearchStoreActions | null) => void;
+    /** @internal 브리지 전용 */
+    _publish: (next: Pick<SearchStoreSnapshot, "params" | "draft" | "isDirty">) => void;
+}
+export interface CreateSearchStoreOptions {
+    /** 브리지가 붙기 전 조작을 받았을 때 (기본 무시). 경고 로그 등에 쓴다 */
+    onUnboundAction?: (action: keyof SearchStoreActions) => void;
+}
+/** 스토어 생성 — 모듈 스코프나 `useMemo` 안에서 만든다 */
+export declare function createSearchStore(options?: CreateSearchStoreOptions): SearchStore;
+/**
+ * 표 화면 안에서 `search` 를 스토어에 연결한다.
+ * 언마운트하면 연결을 끊는다 — 스냅샷은 마지막 값으로 남아 있고 `bound` 만 false 가 된다.
+ */
+export declare function useSearchStoreBridge<T extends RowData>(store: SearchStore, search: TableSearch<T>): void;
+/**
+ * 스토어 구독 — `selector` 결과가 `equalityFn`(기본 `Object.is`) 으로 같으면 리렌더하지 않는다.
+ * 배열·객체를 새로 만드는 selector 는 `equalityFn` 을 주거나 원시값으로 좁힌다.
+ */
+export declare function useSearchStore<S = SearchStoreSnapshot>(store: SearchStore, selector?: (snapshot: SearchStoreSnapshot) => S, equalityFn?: (a: S, b: S) => boolean): S;

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

@@ -0,0 +1,112 @@
+/**
+ * 검색 상태 스토어 — 기존 ERP `createTableFilterStore`(zustand) 의 무의존 대체.
+ *
+ * 표 화면의 브리지(`useSearchStoreBridge`) 가 `search.params/draft/isDirty` 를 밀어넣고,
+ * 표 트리 밖의 컴포넌트가 `useSearchStore(store, selector)` 로 구독한다.
+ * 원격 조작(`patchParams` 등) 은 브리지가 연결한 search 메서드로 되돌아간다.
+ * 타입은 `SearchState` 만 쓰므로 행 타입 `T` 가 없다 — 스토어를 모듈 스코프에 두어도 된다.
+ */
+import { useEffect, useRef, useSyncExternalStore } from "react";
+import { DEFAULT_PAGINATION } from "../../../core/src/index";
+function emptyState() {
+    return {
+        columnFilters: [],
+        columnFilterFns: {},
+        globalFilter: "",
+        pagination: { ...DEFAULT_PAGINATION },
+        sorting: [],
+    };
+}
+/** 스토어 생성 — 모듈 스코프나 `useMemo` 안에서 만든다 */
+export function createSearchStore(options = {}) {
+    const initial = emptyState();
+    let snapshot = { params: initial, draft: initial, isDirty: false, bound: false };
+    let actions = null;
+    const listeners = new Set();
+    const emit = () => { for (const listener of listeners)
+        listener(); };
+    const call = (name, ...args) => {
+        if (!actions) {
+            options.onUnboundAction?.(name);
+            return;
+        }
+        actions[name](...args);
+    };
+    return {
+        subscribe: (listener) => {
+            listeners.add(listener);
+            return () => { listeners.delete(listener); };
+        },
+        getSnapshot: () => snapshot,
+        getState: () => snapshot,
+        patchParams: (partial) => call("patchParams", partial),
+        patchDraft: (partial) => call("patchDraft", partial),
+        setParams: (params) => call("setParams", params),
+        setDraft: (draft) => call("setDraft", draft),
+        apply: () => call("apply"),
+        reset: () => call("reset"),
+        _bind: (next) => {
+            actions = next;
+            const bound = next !== null;
+            if (snapshot.bound !== bound) {
+                snapshot = { ...snapshot, bound };
+                emit();
+            }
+        },
+        _publish: (next) => {
+            if (snapshot.params === next.params && snapshot.draft === next.draft && snapshot.isDirty === next.isDirty)
+                return;
+            snapshot = { ...snapshot, params: next.params, draft: next.draft, isDirty: next.isDirty };
+            emit();
+        },
+    };
+}
+/**
+ * 표 화면 안에서 `search` 를 스토어에 연결한다.
+ * 언마운트하면 연결을 끊는다 — 스냅샷은 마지막 값으로 남아 있고 `bound` 만 false 가 된다.
+ */
+export function useSearchStoreBridge(store, search) {
+    const searchRef = useRef(search);
+    searchRef.current = search;
+    useEffect(() => {
+        // ref 를 거쳐 부르므로 search 객체가 매 렌더 바뀌어도 다시 바인딩하지 않는다
+        store._bind({
+            patchParams: (partial) => searchRef.current.patchParams(partial),
+            patchDraft: (partial) => searchRef.current.patchDraft(partial),
+            setParams: (params) => searchRef.current.setParams(params),
+            setDraft: (draft) => searchRef.current.setDraft(draft),
+            apply: () => searchRef.current.apply(),
+            reset: () => searchRef.current.reset(),
+        });
+        return () => store._bind(null);
+    }, [store]);
+    useEffect(() => {
+        store._publish({ params: search.params, draft: search.draft, isDirty: search.isDirty });
+    }, [store, search.params, search.draft, search.isDirty]);
+}
+const identity = (snapshot) => snapshot;
+/**
+ * 스토어 구독 — `selector` 결과가 `equalityFn`(기본 `Object.is`) 으로 같으면 리렌더하지 않는다.
+ * 배열·객체를 새로 만드는 selector 는 `equalityFn` 을 주거나 원시값으로 좁힌다.
+ */
+export function useSearchStore(store, selector = (identity), equalityFn = Object.is) {
+    const cache = useRef(null);
+    const selectorRef = useRef(selector);
+    selectorRef.current = selector;
+    const equalityRef = useRef(equalityFn);
+    equalityRef.current = equalityFn;
+    const getSelected = () => {
+        const snapshot = store.getSnapshot();
+        const previous = cache.current;
+        if (previous && previous.snapshot === snapshot)
+            return previous.selected;
+        const selected = selectorRef.current(snapshot);
+        if (previous && equalityRef.current(previous.selected, selected)) {
+            cache.current = { snapshot, selected: previous.selected };
+            return previous.selected;
+        }
+        cache.current = { snapshot, selected };
+        return selected;
+    };
+    return useSyncExternalStore(store.subscribe, getSelected, getSelected);
+}

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

@@ -0,0 +1,106 @@
+/**
+ * 검색 상태 요약 — `FilterStatusContent` 가 그리는 표의 **순수 데이터**.
+ *
+ * 기존 ERP `FilterStatusContent.formatFilterValue` 의 값 표현 규칙을 따른다
+ * (빈 값 "(없음)", 날짜는 `YYYY-MM-DD`, 배열은 쉼표, 관계 필터는 컬럼별 값 묶음 또는
+ * "N개 그룹"). 값 문구 자체는 core 로 옮겼다 — 컬럼에 필터 kind 가 있으면
+ * `kind.operators[op].describe`, 없으면 `describeFilterValue` 의 일반 규칙(값 모양 추정).
+ * JSX 가 없으므로 모달 밖(툴팁·로그) 에서도 쓴다.
+ */
+import type { RowData } from "@tanstack/react-table";
+import { type AnyFilterKind, type ColumnDescription, type FilterDescribeLabels, type FilterOperator, type SearchState, type TableColumnDefs } from "../../../core/src/index";
+export declare const EMPTY_VALUE_TEXT: string;
+/** 값을 쓰지 않는 연산자의 값 칸 */
+export declare const VALUELESS_TEXT: string;
+export type ConditionStatus = 
+/** params 와 draft 가 같다 */
+"applied"
+/** 적용됐지만 draft 에서 값·연산자가 바뀌었다 */
+ | "changed"
+/** draft 에만 있다 (아직 적용 안 됨) */
+ | "added"
+/** params 에는 있는데 draft 에서 지워졌다 */
+ | "removed";
+export interface ConditionSummary {
+    id: string;
+    header: string;
+    /** 적용된 연산자 (draft 에만 있는 항목은 draft 연산자) */
+    operator: FilterOperator;
+    operatorLabel: string;
+    /** 적용된 값의 표시 문자열 */
+    value: string;
+    status: ConditionStatus;
+    /** status 가 applied 가 아닐 때 draft 쪽 연산자·값 */
+    draftOperator?: FilterOperator;
+    draftOperatorLabel?: string;
+    draftValue?: string;
+}
+export interface SortSummary {
+    id: string;
+    header: string;
+    desc: boolean;
+    /** "거래처 오름차순" */
+    label: string;
+}
+export interface SearchSummary {
+    conditions: ConditionSummary[];
+    globalFilter: {
+        value: string;
+        draftValue: string;
+        pending: boolean;
+    };
+    sorting: SortSummary[];
+    /** 그룹핑 컬럼 헤더 */
+    grouping: string[];
+    pagination: {
+        pageIndex: number;
+        pageSize: number;
+    };
+    /** 적용 중인(값이 있는) 조건 수 — 전역검색 포함 */
+    appliedCount: number;
+    /** draft 와 다른 항목 수 (전역검색 포함) */
+    pendingCount: number;
+}
+export interface FormatConditionValueOptions {
+    operator?: FilterOperator;
+    column?: Pick<ColumnDescription, "variant" | "selectOptions" | "relationColumns">;
+    /** 컬럼의 필터 kind — 있으면 `operators[op].describe` 가 문구를 정한다 */
+    kind?: AnyFilterKind;
+    /** 배열 값이 이보다 길면 앞부분만 보이고 "외 N개" (기본 5) */
+    maxListItems?: number;
+    /** 문구 묶음 (기본 한국어 `DEFAULT_DESCRIBE_LABELS`) */
+    labels?: FilterDescribeLabels;
+}
+/**
+ * 필터 값 하나를 사람이 읽는 문자열로.
+ *
+ * kind 가 있으면 kind 의 `describe`(값 없는 연산자·빈 값은 공통 처리), 없으면 값 모양으로
+ * 추정하는 core `describeFilterValue` 의 일반 규칙:
+ * - 값 없는 연산자(`empty`/`hasChild` …) → `-`
+ * - 선택지가 있으면 값 대신 라벨
+ * - 두 원소 범위(숫자·날짜) → `a ~ b`, 그 외 배열은 쉼표
+ * - 관계(`groups`)/선형(`terms`)/일정(`date`|`start`) 은 요약 문구
+ */
+export declare function formatConditionValue(value: unknown, options?: FormatConditionValueOptions): string;
+/** 조건이 실제로 걸려 있는가 — 값이 있거나 값 없는 연산자다 */
+export declare function isActiveCondition(value: unknown, operator?: FilterOperator): boolean;
+/**
+ * 적용 중인 조건 수 — 값이 있는 컬럼 필터 + 전역검색.
+ * 트리거 버튼 배지와 접힌 패널 요약이 같은 수를 보여야 하므로 한 곳에 둔다.
+ */
+export declare function countActiveConditions(state: Pick<SearchState, "columnFilters" | "globalFilter" | "columnFilterFns">, operators?: Readonly<Record<string, FilterOperator>>): number;
+export interface SummarizeSearchOptions<T extends RowData> {
+    columns: TableColumnDefs<T>;
+    params: SearchState;
+    /** 주면 params 와 비교해 미적용 항목을 표시한다 */
+    draft?: SearchState;
+    /** 컬럼 기본값이 덧대진 연산자 맵 (`search.operators`). 없으면 `params.columnFilterFns` */
+    operators?: Readonly<Record<string, FilterOperator>>;
+    draftOperators?: Readonly<Record<string, FilterOperator>>;
+    /** 값이 비어 있는 항목도 표에 남긴다 (기본 false) */
+    includeInactive?: boolean;
+    /** 값 문구 묶음 — Provider 라벨을 넘길 때 (기본 한국어) */
+    labels?: FilterDescribeLabels;
+}
+/** `search.params`(+`draft`) 를 표 데이터로 요약한다 */
+export declare function summarizeSearch<T extends RowData>(options: SummarizeSearchOptions<T>): SearchSummary;

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

@@ -0,0 +1,109 @@
+import { DEFAULT_DESCRIBE_LABELS, describeColumns, describeFilter, filterKindMap, isUnsetFilterValue, isValuelessOperator, } from "../../../core/src/index";
+import { operatorLabel } from "../filter/inputs/OperatorMenu";
+export const EMPTY_VALUE_TEXT = DEFAULT_DESCRIBE_LABELS.empty;
+/** 값을 쓰지 않는 연산자의 값 칸 */
+export const VALUELESS_TEXT = DEFAULT_DESCRIBE_LABELS.valueless;
+/**
+ * 필터 값 하나를 사람이 읽는 문자열로.
+ *
+ * kind 가 있으면 kind 의 `describe`(값 없는 연산자·빈 값은 공통 처리), 없으면 값 모양으로
+ * 추정하는 core `describeFilterValue` 의 일반 규칙:
+ * - 값 없는 연산자(`empty`/`hasChild` …) → `-`
+ * - 선택지가 있으면 값 대신 라벨
+ * - 두 원소 범위(숫자·날짜) → `a ~ b`, 그 외 배열은 쉼표
+ * - 관계(`groups`)/선형(`terms`)/일정(`date`|`start`) 은 요약 문구
+ */
+export function formatConditionValue(value, options = {}) {
+    const { operator, column, kind, maxListItems = 5, labels } = options;
+    return describeFilter(kind, operator, value, {
+        operator,
+        variant: column?.variant,
+        options: column?.selectOptions,
+        relationColumns: column?.relationColumns,
+        maxListItems,
+        labels,
+    });
+}
+/** 조건이 실제로 걸려 있는가 — 값이 있거나 값 없는 연산자다 */
+export function isActiveCondition(value, operator) {
+    if (operator && isValuelessOperator(operator))
+        return true;
+    return !isUnsetFilterValue(value);
+}
+/**
+ * 적용 중인 조건 수 — 값이 있는 컬럼 필터 + 전역검색.
+ * 트리거 버튼 배지와 접힌 패널 요약이 같은 수를 보여야 하므로 한 곳에 둔다.
+ */
+export function countActiveConditions(state, operators) {
+    const ops = operators ?? state.columnFilterFns;
+    const filters = state.columnFilters.filter((f) => f && isActiveCondition(f.value, ops[f.id])).length;
+    return filters + (state.globalFilter ? 1 : 0);
+}
+const sameJson = (a, b) => JSON.stringify(a ?? null) === JSON.stringify(b ?? null);
+/** `search.params`(+`draft`) 를 표 데이터로 요약한다 */
+export function summarizeSearch(options) {
+    const { columns, params, draft, includeInactive = false, labels } = options;
+    const operators = options.operators ?? params.columnFilterFns;
+    const draftOperators = options.draftOperators ?? draft?.columnFilterFns ?? operators;
+    const described = new Map(describeColumns(columns).map((c) => [c.id, c]));
+    const kinds = filterKindMap(columns);
+    const headerOf = (id) => described.get(id)?.header ?? id;
+    const operatorOf = (id, map) => map[id] ?? described.get(id)?.defaultOperator ?? "fuzzy";
+    const appliedById = new Map(params.columnFilters.filter(Boolean).map((f) => [f.id, f]));
+    const draftById = new Map((draft?.columnFilters ?? []).filter(Boolean).map((f) => [f.id, f]));
+    const ids = Array.from(new Set([...appliedById.keys(), ...draftById.keys()]));
+    const conditions = [];
+    for (const id of ids) {
+        const column = described.get(id);
+        const applied = appliedById.get(id);
+        const inDraft = draftById.get(id);
+        const appliedOperator = operatorOf(id, operators);
+        const draftOperator = operatorOf(id, draftOperators);
+        const appliedActive = applied ? isActiveCondition(applied.value, appliedOperator) : false;
+        const draftActive = draft ? (inDraft ? isActiveCondition(inDraft.value, draftOperator) : false) : appliedActive;
+        if (!appliedActive && !draftActive && !includeInactive)
+            continue;
+        let status = "applied";
+        if (draft) {
+            if (appliedActive && !draftActive)
+                status = "removed";
+            else if (!appliedActive && draftActive)
+                status = "added";
+            else if (!sameJson(applied?.value, inDraft?.value) || appliedOperator !== draftOperator)
+                status = "changed";
+        }
+        const format = (value, operator) => formatConditionValue(value, { operator, column, kind: kinds.get(id), labels });
+        const summary = {
+            id,
+            header: headerOf(id),
+            operator: status === "added" ? draftOperator : appliedOperator,
+            operatorLabel: operatorLabel(status === "added" ? draftOperator : appliedOperator, labels?.operators),
+            value: status === "added" ? EMPTY_VALUE_TEXT : format(applied?.value, appliedOperator),
+            status,
+        };
+        if (status !== "applied") {
+            summary.draftOperator = draftOperator;
+            summary.draftOperatorLabel = operatorLabel(draftOperator, labels?.operators);
+            summary.draftValue = status === "removed" ? EMPTY_VALUE_TEXT : format(inDraft?.value, draftOperator);
+        }
+        conditions.push(summary);
+    }
+    const globalValue = params.globalFilter ?? "";
+    const globalDraft = draft ? draft.globalFilter ?? "" : globalValue;
+    const globalPending = globalDraft !== globalValue;
+    const sorting = params.sorting.map((s) => ({
+        id: s.id,
+        header: headerOf(s.id),
+        desc: !!s.desc,
+        label: `${headerOf(s.id)} ${s.desc ? "내림차순" : "오름차순"}`,
+    }));
+    return {
+        conditions,
+        globalFilter: { value: globalValue, draftValue: globalDraft, pending: globalPending },
+        sorting,
+        grouping: (params.grouping ?? []).map(headerOf),
+        pagination: { pageIndex: params.pagination.pageIndex, pageSize: params.pagination.pageSize },
+        appliedCount: countActiveConditions(params, operators),
+        pendingCount: conditions.filter((c) => c.status !== "applied").length + (globalPending ? 1 : 0),
+    };
+}