@rchemist/listgrid 0.2.6

package/dist/listgrid/components/list/utils/mappedByFieldFilter.d.ts

@@ -0,0 +1,21 @@
+import { ListableFormField } from '../../fields/abstract';
+export interface MappedByFieldFilterOptions {
+    mappedBy: string;
+    includePatterns?: string[];
+    excludePatterns?: string[];
+}
+/**
+ * Filters out mappedBy related fields from a field array.
+ *
+ * For example, if mappedBy is "studentId":
+ * - "studentId" is filtered out
+ * - "student" is filtered out (base field without Id suffix)
+ * - "student.name", "student.id" etc. are filtered out (nested patterns)
+ *
+ * Unless they are explicitly included in includePatterns.
+ *
+ * @param fields The list of fields to filter
+ * @param options Filter options including mappedBy and optional include/exclude patterns
+ * @returns Filtered field array
+ */
+export declare function filterMappedByFields(fields: ListableFormField<any>[], options: MappedByFieldFilterOptions): ListableFormField<any>[];

package/dist/listgrid/components/list/utils/mappedByFieldFilter.js

@@ -0,0 +1,54 @@
+/**
+ * Filters out mappedBy related fields from a field array.
+ *
+ * For example, if mappedBy is "studentId":
+ * - "studentId" is filtered out
+ * - "student" is filtered out (base field without Id suffix)
+ * - "student.name", "student.id" etc. are filtered out (nested patterns)
+ *
+ * Unless they are explicitly included in includePatterns.
+ *
+ * @param fields The list of fields to filter
+ * @param options Filter options including mappedBy and optional include/exclude patterns
+ * @returns Filtered field array
+ */
+export function filterMappedByFields(fields, options) {
+    const { mappedBy, includePatterns = [], excludePatterns = [] } = options;
+    // Generate patterns to exclude
+    const patternsToExclude = new Set();
+    // 1. Exact mappedBy field (e.g., "studentId")
+    patternsToExclude.add(mappedBy);
+    // 2. Base field without Id/.id suffix
+    // Handle "studentId" format (camelCase Id suffix)
+    // Handle "enrollment.student.id" format (dot notation .id suffix)
+    let baseField = mappedBy;
+    if (mappedBy.endsWith('Id')) {
+        baseField = mappedBy.slice(0, -2);
+    }
+    else if (mappedBy.endsWith('.id')) {
+        baseField = mappedBy.slice(0, -3);
+    }
+    patternsToExclude.add(baseField);
+    // 3. Nested pattern (e.g., "student.*" from "studentId" or "enrollment.student.*" from "enrollment.student.id")
+    const nestedPattern = `${baseField}.`;
+    // 4. Add additional excludePatterns
+    excludePatterns.forEach((pattern) => patternsToExclude.add(pattern));
+    // Filter fields
+    return fields.filter((field) => {
+        const fieldName = field.name;
+        // Check if field is explicitly included
+        if (includePatterns.includes(fieldName)) {
+            return true;
+        }
+        // Check if field should be excluded
+        // Exact match
+        if (patternsToExclude.has(fieldName)) {
+            return false;
+        }
+        // Nested pattern match (field starts with baseField.)
+        if (fieldName.startsWith(nestedPattern)) {
+            return false;
+        }
+        return true;
+    });
+}

package/dist/listgrid/components/list/utils/performanceLogger.d.ts

@@ -0,0 +1,48 @@
+/**
+ * ListGrid Performance Logger
+ *
+ * Enable/disable via environment variable:
+ * NEXT_PUBLIC_DEBUG_LISTGRID_PERFORMANCE=true (or false)
+ *
+ * To remove all performance logging:
+ * 1. Delete this file
+ * 2. Remove imports and usage from ViewListGrid.tsx and useListGridLogic.ts
+ */
+export declare const perfLog: {
+    mounted: (duration: number, context: {
+        entityUrl?: string;
+        isSubCollection?: boolean;
+    }) => void;
+    unmounted: (context: {
+        entityUrl?: string;
+    }) => void;
+    rowsRendered: (context: {
+        entityUrl?: string;
+        rowCount: number;
+        totalCount?: number;
+        timeSinceMount: string;
+    }) => void;
+    loadingStarted: (context: {
+        entityUrl?: string;
+    }) => void;
+    loadingCompleted: (duration: number, context: {
+        entityUrl?: string;
+        rowCount: number;
+        totalCount?: number;
+    }) => void;
+    apiStarted: (context: {
+        entityUrl?: string;
+        page?: number;
+        pageSize?: number;
+    }) => void;
+    apiCompleted: (duration: number, context: {
+        entityUrl?: string;
+        rowCount: number;
+        totalCount?: number;
+        page?: number;
+    }) => void;
+    apiError: (duration: number, context: {
+        entityUrl?: string;
+        errors: string[];
+    }) => void;
+};

package/dist/listgrid/components/list/utils/performanceLogger.js

@@ -0,0 +1,67 @@
+/**
+ * ListGrid Performance Logger
+ *
+ * Enable/disable via environment variable:
+ * NEXT_PUBLIC_DEBUG_LISTGRID_PERFORMANCE=true (or false)
+ *
+ * To remove all performance logging:
+ * 1. Delete this file
+ * 2. Remove imports and usage from ViewListGrid.tsx and useListGridLogic.ts
+ */
+import { getRuntimeConfig } from '../../../config/RuntimeConfig';
+const isEnabled = () => {
+    if (typeof window === 'undefined')
+        return false;
+    const cfg = getRuntimeConfig();
+    if (cfg.debugListGridPerformance === false)
+        return false;
+    if (cfg.debugListGridPerformance === true)
+        return true;
+    return cfg.isDevelopment;
+};
+const PREFIX = '[ListGrid Performance]';
+export const perfLog = {
+    // ==================== Component Lifecycle ====================
+    mounted: (duration, context) => {
+        if (!isEnabled())
+            return;
+        console.log(`${PREFIX} [Component] Mounted in ${duration.toFixed(2)}ms`, context);
+    },
+    unmounted: (context) => {
+        if (!isEnabled())
+            return;
+        console.log(`${PREFIX} [Component] Unmounted`, context);
+    },
+    rowsRendered: (context) => {
+        if (!isEnabled())
+            return;
+        console.log(`${PREFIX} [Component] Rows rendered`, context);
+    },
+    // ==================== Data Loading (React State) ====================
+    loadingStarted: (context) => {
+        if (!isEnabled())
+            return;
+        console.log(`${PREFIX} [State] Loading started`, context);
+    },
+    loadingCompleted: (duration, context) => {
+        if (!isEnabled())
+            return;
+        console.log(`${PREFIX} [State] Loading completed in ${duration.toFixed(2)}ms`, context);
+    },
+    // ==================== API Call (Network) ====================
+    apiStarted: (context) => {
+        if (!isEnabled())
+            return;
+        console.log(`${PREFIX} [API] Request started`, context);
+    },
+    apiCompleted: (duration, context) => {
+        if (!isEnabled())
+            return;
+        console.log(`${PREFIX} [API] Response received in ${duration.toFixed(2)}ms`, context);
+    },
+    apiError: (duration, context) => {
+        if (!isEnabled())
+            return;
+        console.log(`${PREFIX} [API] Error after ${duration.toFixed(2)}ms`, context);
+    },
+};

package/dist/listgrid/components/revision/RevisionField.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { FormField, FormFieldProps } from '../fields/abstract';
+import { FieldRenderParameters, FilterRenderParameters } from '../../config/EntityField';
+interface RevisionFieldProps extends FormFieldProps {
+}
+export declare class RevisionField extends FormField<RevisionField> {
+    constructor(name: string, order: number);
+    protected createInstance(name: string, order: number): RevisionField;
+    protected renderInstance(params: FieldRenderParameters): Promise<React.ReactNode | null>;
+    protected renderListFilterInstance(params: FilterRenderParameters): Promise<React.ReactNode | null>;
+    static create(props: RevisionFieldProps): RevisionField;
+}
+export {};

package/dist/listgrid/components/revision/RevisionField.js

@@ -0,0 +1,194 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { FormField } from '../fields/abstract';
+import { SearchForm } from '../../form/SearchForm';
+import { PageResult } from '../../form/Type';
+import { useModalManagerStore } from '../../store';
+import { useSession } from '../../auth';
+import { ViewEntityForm } from '../form/ViewEntityForm';
+import { IconHistory } from '@tabler/icons-react';
+import { fDateTime } from '../../misc';
+import { Pagination } from '../../ui';
+import { getTranslation } from '../../utils/i18n';
+const revisionApiUrl = '/revision';
+// Audit/timestamp fields excluded from diff (always change on every update)
+const AUDIT_FIELD_NAMES = new Set([
+    'updatedAt',
+    'dateUpdated',
+    'modifiedAt',
+    'dateModified',
+    'lastModified',
+    'lastModifiedDate',
+    'auditable',
+]);
+/**
+ * Compare two revision data objects and return the set of field names that differ.
+ */
+function getChangedFields(currentData, previousData) {
+    const changed = new Set();
+    const allKeys = new Set([...Object.keys(currentData), ...Object.keys(previousData)]);
+    for (const key of allKeys) {
+        if (JSON.stringify(currentData[key]) !== JSON.stringify(previousData[key])) {
+            changed.add(key);
+        }
+    }
+    return changed;
+}
+/**
+ * Wrapper component that injects CSS-based highlighting for changed fields.
+ * Uses data-field-name attribute selectors so highlighting applies automatically as fields render.
+ */
+const RevisionDiffWrapper = ({ changedFields, fieldLabelMap, hasPreviousRevision, children }) => {
+    const containerId = 'revision-diff-container';
+    const selectors = changedFields.size > 0
+        ? Array.from(changedFields)
+            .map((name) => `#${containerId} [data-field-name="${name}"]`)
+            .join(',\n')
+        : '';
+    // Resolve display labels for changed fields (use label if available, skip otherwise)
+    const changedFieldLabels = Array.from(changedFields)
+        .map((name) => fieldLabelMap.get(name))
+        .filter((label) => !!label);
+    return (_jsxs("div", { id: containerId, className: "rcm-revision-diff-container", children: [changedFields.size > 0 && (_jsxs(_Fragment, { children: [_jsx("style", { children: `
+            ${selectors} {
+              background-color: rgba(251, 191, 36, 0.12);
+              border-left: 3px solid rgb(245, 158, 11);
+              padding-left: 8px;
+              border-radius: 4px;
+            }
+          ` }), _jsxs("div", { className: "rcm-revision-diff-banner rcm-revision-diff-banner-changed", children: [_jsxs("div", { className: "rcm-revision-diff-banner-row", children: [_jsx("span", { className: "rcm-icon-frame", "data-shape": "circle", "data-size": "xs", "data-color": "warning" }), _jsxs("span", { children: ["\uC774\uC804 \uBC84\uC804 \uB300\uBE44 ", _jsxs("strong", { children: [changedFields.size, "\uAC1C"] }), " \uD544\uB4DC\uAC00 \uBCC0\uACBD\uB418\uC5C8\uC2B5\uB2C8\uB2E4"] })] }), changedFieldLabels.length > 0 && (_jsx("div", { className: "rcm-revision-diff-labels", children: changedFieldLabels.map((label, i) => (_jsx("span", { className: "rcm-tag", "data-color": "warning", children: label }, i))) }))] })] })), hasPreviousRevision && changedFields.size === 0 && (_jsx("div", { className: "rcm-revision-diff-banner rcm-revision-diff-banner-same", children: "\uC774\uC804 \uBC84\uC804\uACFC \uB3D9\uC77C\uD569\uB2C8\uB2E4" })), children] }));
+};
+export class RevisionField extends FormField {
+    constructor(name, order) {
+        super(name, order, 'revision');
+    }
+    createInstance(name, order) {
+        return new RevisionField(name, order);
+    }
+    async renderInstance(params) {
+        const { entityForm, subCollectionEntity } = params;
+        // subCollectionEntity인 경우 렌더링하지 않음
+        if (subCollectionEntity) {
+            return null;
+        }
+        // CREATE 모드에서는 렌더링하지 않음 (MODIFY_ONLY)
+        if (entityForm.getRenderType() === 'create') {
+            return null;
+        }
+        return _jsx(RevisionFieldRenderer, { entityForm: entityForm });
+    }
+    renderListFilterInstance(params) {
+        // 리스트 필터에서는 지원하지 않음
+        return Promise.resolve(null);
+    }
+    static create(props) {
+        return new RevisionField(props.name, props.order).copyFields(props, true);
+    }
+}
+const RevisionFieldRenderer = ({ entityForm }) => {
+    const [revisions, setRevisions] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [totalPage, setTotalPage] = useState(0);
+    const [currentPage, setCurrentPage] = useState(0);
+    const { openModal } = useModalManagerStore();
+    const session = useSession();
+    useEffect(() => {
+        loadRevisions(0);
+    }, [entityForm.id]);
+    const loadRevisions = async (page = 0) => {
+        if (!entityForm.id)
+            return;
+        setLoading(true);
+        try {
+            const entityId = entityForm.id;
+            // revisionEntityName 필터 제거 - entityId만으로 조회 (revisionEntityName 불일치 문제 해결)
+            const searchForm = new SearchForm()
+                .handleAndFilter('revisionEntityId', entityId)
+                .withSort('createdAt', 'DESC')
+                .withPage(page)
+                .withPageSize(10);
+            const searchResult = await PageResult.fetchListData(revisionApiUrl, searchForm);
+            if (searchResult && searchResult.list) {
+                setRevisions(searchResult.list);
+                setTotalPage(searchResult.totalPage);
+                setCurrentPage(page);
+            }
+        }
+        catch (error) {
+            console.error('[RevisionField] Failed to load revisions:', error);
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const handlePageChange = (page) => {
+        loadRevisions(page - 1); // Pagination 컴포넌트는 1부터 시작, SearchForm은 0부터 시작
+    };
+    const handleRevisionClick = async (revision, index) => {
+        const modalId = `revision-modal-${entityForm.id}`;
+        // 리비전 데이터 파싱
+        const revisionData = JSON.parse(revision.json);
+        // 이전 리비전과 비교하여 변경된 필드 찾기
+        // DELETE 리비전은 json이 없으므로 건너뛰고 다음 유효한 리비전을 찾는다
+        let previousRevision;
+        for (let i = index + 1; i < revisions.length; i++) {
+            if (revisions[i].type !== 'DELETE' && revisions[i].json) {
+                previousRevision = revisions[i];
+                break;
+            }
+        }
+        let changedFields = new Set();
+        if (previousRevision) {
+            const previousData = JSON.parse(previousRevision.json);
+            changedFields = getChangedFields(revisionData, previousData);
+            // 수정일 등 항상 변경되는 감사(audit) 필드 제외
+            changedFields = new Set([...changedFields].filter((name) => !AUDIT_FIELD_NAMES.has(name)));
+        }
+        // EntityForm 복제 및 초기화
+        let revisionEntityForm = entityForm.clone(false);
+        // 서버 fetch 대신 설정한 데이터로 고정하기 위해 url 을 비워둔다.
+        revisionEntityForm.url = '';
+        revisionEntityForm.fields.delete('entityForm-revision'); // 리비전 필드는 보여주지 않는다.
+        revisionEntityForm.collections.clear(); // 컬렉션은 Revision 의 관리 대상이 아니다.
+        revisionEntityForm.buttons = []; // 기존 엔티티폼의 사용자정의 버튼도 모두 제거한다.
+        // 리비전 데이터로 값 설정
+        revisionEntityForm = await revisionEntityForm.setFetchedValues(revisionData);
+        // 변경 필드의 사용자 표시용 라벨 맵 구성
+        const { t } = getTranslation();
+        const fieldLabelMap = new Map();
+        for (const [key, field] of revisionEntityForm.fields) {
+            if (field instanceof FormField) {
+                const label = field.getLabel();
+                if (typeof label === 'string') {
+                    fieldLabelMap.set(key, t(label));
+                }
+            }
+        }
+        openModal({
+            modalId,
+            title: `변경 이력 (${revision.name} / ${fDateTime(revision.createdAt, 'yyyy-MM-dd HH:mm:ss')})`,
+            size: 'full',
+            fullHeight: true,
+            content: (_jsx(RevisionDiffWrapper, { changedFields: changedFields, fieldLabelMap: fieldLabelMap, hasPreviousRevision: !!previousRevision, children: _jsx(ViewEntityForm, { readonly: true, entityForm: revisionEntityForm, ...(session !== undefined ? { session } : {}), hideTitle: true, hideAllButtons: true }) })),
+        });
+    };
+    if (loading) {
+        return (_jsxs("div", { className: "rcm-revision-state", children: [_jsx(IconHistory, { className: "rcm-icon rcm-revision-state-icon-spin", "data-size": "lg", "data-tone": "disabled" }), _jsx("span", { className: "rcm-text", "data-size": "sm", "data-tone": "muted", children: "\uBCC0\uACBD \uB0B4\uC5ED\uC744 \uBD88\uB7EC\uC624\uB294 \uC911..." })] }));
+    }
+    if (revisions.length === 0) {
+        return (_jsxs("div", { className: "rcm-revision-state rcm-revision-state-empty", children: [_jsx(IconHistory, { className: "rcm-icon", "data-size": "lg", "data-tone": "disabled" }), _jsx("span", { className: "rcm-text", "data-size": "sm", "data-tone": "muted", children: "\uBCC0\uACBD \uB0B4\uC5ED\uC774 \uC5C6\uC2B5\uB2C8\uB2E4." })] }));
+    }
+    return (_jsx("div", { className: "rcm-revision-wrap", children: _jsxs("div", { className: "rcm-revision-panel", children: [_jsx("div", { className: "rcm-revision-list", children: revisions.map((revision, index) => {
+                        const isLatest = currentPage === 0 && index === 0;
+                        const isDelete = revision.type === 'DELETE';
+                        const isCreate = revision.type === 'CREATE';
+                        const isClickable = !isDelete && !isCreate;
+                        const itemClass = isLatest
+                            ? 'rcm-revision-item rcm-revision-item-latest'
+                            : isDelete || isCreate
+                                ? 'rcm-revision-item rcm-revision-item-muted'
+                                : 'rcm-revision-item rcm-revision-item-default';
+                        return (_jsx("div", { className: itemClass, onClick: isClickable ? () => handleRevisionClick(revision, index) : undefined, children: _jsxs("div", { className: "rcm-revision-item-row", children: [_jsx("span", { className: "rcm-text", "data-weight": "medium", children: revision.name }), _jsx("span", { className: "rcm-text", "data-size": "xs", "data-tone": "muted", children: fDateTime(revision.createdAt, 'yyyy-MM-dd HH:mm:ss') }), isLatest && (_jsx("span", { className: "rcm-badge", "data-color": "info", children: "\uD604\uC7AC \uBC84\uC804" })), isCreate && (_jsx("span", { className: "rcm-badge", "data-color": "success", children: "\uC2E0\uADDC" })), isDelete && (_jsx("span", { className: "rcm-badge", "data-color": "error", children: entityForm.neverDelete ? '사용안함' : '삭제' }))] }) }, revision.id));
+                    }) }), totalPage > 1 && (_jsx("div", { className: "rcm-revision-pagination", children: _jsx(Pagination, { total: totalPage, value: currentPage + 1, onChange: handlePageChange }) }))] }) }));
+};

package/dist/listgrid/config/AdvancedSearchOpenCache.d.ts

@@ -0,0 +1,3 @@
+export declare function isOpenedAdvancedSearch(key: string, postFix?: string): boolean;
+export declare function setOpenedAdvancedSearch(key: string, postFix?: string, opened?: boolean): void;
+export declare function setClosedAdvancedSearch(key: string, postFix?: string): void;

package/dist/listgrid/config/AdvancedSearchOpenCache.js

@@ -0,0 +1,48 @@
+import { parse, stringify } from '../utils/jsonUtils';
+class CacheContext {
+    constructor() {
+        this.data = new Map();
+    }
+    static create(value) {
+        const cache = new CacheContext();
+        if (value) {
+            const data = parse(value);
+            cache.data = new Map(Object.entries(data.data));
+        }
+        return cache;
+    }
+    isOpened(key, postFix) {
+        const cacheKey = key + (postFix ? '_' + postFix : '');
+        return this.data.get(cacheKey) ?? false;
+    }
+    setOpened(key, postFix, opened = true) {
+        const cacheKey = key + (postFix ? '_' + postFix : '');
+        this.data.set(cacheKey, opened);
+    }
+    setClosed(key, postFix) {
+        this.setOpened(key, postFix, false);
+    }
+    toJson() {
+        return stringify(this);
+    }
+}
+export function isOpenedAdvancedSearch(key, postFix) {
+    if (typeof window === 'undefined')
+        return false;
+    const cache = CacheContext.create(localStorage.getItem('advancedSearchFormOpened'));
+    return cache.isOpened(key, postFix);
+}
+export function setOpenedAdvancedSearch(key, postFix, opened = true) {
+    if (typeof window === 'undefined')
+        return;
+    const cache = CacheContext.create(localStorage.getItem('advancedSearchFormOpened'));
+    cache.setOpened(key, postFix, opened);
+    localStorage.setItem('advancedSearchFormOpened', cache.toJson());
+}
+export function setClosedAdvancedSearch(key, postFix) {
+    if (typeof window === 'undefined')
+        return;
+    const cache = CacheContext.create(localStorage.getItem('advancedSearchFormOpened'));
+    cache.setClosed(key, postFix);
+    localStorage.setItem('advancedSearchFormOpened', cache.toJson());
+}

package/dist/listgrid/config/CardSubCollectionField.d.ts

@@ -0,0 +1,133 @@
+import { EntityForm } from './EntityForm';
+import { HelpTextType, HiddenType, LabelType, ReadOnlyType, TooltipType } from './Config';
+import { ReactNode } from 'react';
+import { FieldInfoParameters } from './EntityField';
+import { Session } from '../auth/types';
+import { FilterItem, SearchForm } from '../form/SearchForm';
+import { SubCollectionField } from './SubCollectionField';
+/**
+ * Columns configuration type
+ * - number: Field columns only, card grid is auto-calculated
+ * - {card, field}: Explicit card grid and field columns
+ */
+export type ColumnsConfig = number | {
+    card: number;
+    field: number;
+};
+/**
+ * Card configuration for CardSubCollectionField
+ */
+export interface CardConfig {
+    /**
+     * Column configuration for card grid and field layout
+     * - number: Field columns only (card grid auto-calculated based on layout)
+     * - {card, field}: Explicit card grid columns and field columns
+     * - Mobile is always 1 column for both cards and fields
+     * @default 2
+     */
+    columns?: ColumnsConfig;
+    /**
+     * Page size for client-side pagination
+     * - If set, enables client-side pagination with the specified page size
+     * - If not set or 0, all items are displayed without pagination
+     * @default undefined (no pagination)
+     */
+    pageSize?: number;
+    /** Fields to display on each card (whitelist) */
+    displayFields?: string[];
+    /** Fields to exclude from card display (blacklist) - useful when titleField is a function */
+    excludeFields?: string[];
+    /** Field name or function for card title */
+    titleField?: string | ((item: any) => string);
+    /** CSS class name for card container */
+    containerClassName?: string;
+    /** CSS class name for selected card container */
+    selectedContainerClassName?: string;
+    /** CSS class name for card title */
+    titleClassName?: string;
+    /** Custom render function for entire card */
+    renderCard?: (item: any, isSelected: boolean, onSelect: () => void) => ReactNode;
+}
+/**
+ * CardSubCollectionRelation configuration
+ * Defines the relationship between parent and child entities
+ */
+export interface CardSubCollectionRelation {
+    /** ManyToOne field name in the child entity */
+    mappedBy: string;
+    /** Filter field name (defaults to mappedBy) */
+    filterBy?: string;
+    /** Property to get the value from parent entity (default: 'id') */
+    valueProperty?: string;
+    /** Additional attributes for the subcollection */
+    attributes?: Record<string, any>;
+}
+/**
+ * Filter configuration for CardSubCollectionField
+ * Same format as ViewListGridOptionProps.filters
+ */
+export type CardSubCollectionFilters = (entityForm: EntityForm) => Promise<{
+    condition: 'AND' | 'OR';
+    items: FilterItem[];
+}[]>;
+/**
+ * Fetch options for CardSubCollectionField
+ * Controls how data is fetched (SearchForm-based vs simple URL)
+ */
+export interface CardSubCollectionFetchOptions {
+    /** Whether to use SearchForm-based fetching (POST request) */
+    useSearchForm?: boolean;
+    /** Page size for fetching all data (default: 10000) */
+    pageSize?: number;
+    /** Whether to use viewDetail mode */
+    viewDetail?: boolean;
+    /** Additional filters to apply */
+    filters?: CardSubCollectionFilters;
+}
+/**
+ * CardSubCollectionField configuration
+ * Extends SubCollectionField to display items in a card grid format
+ */
+export declare class CardSubCollectionField extends SubCollectionField {
+    tooltip?: TooltipType | undefined;
+    fetchUrl: string;
+    fetchUrlFunction?: ((parentEntityForm: EntityForm) => string) | undefined;
+    cardConfig?: CardConfig | undefined;
+    fetchOptions?: CardSubCollectionFetchOptions | undefined;
+    constructor(props: {
+        entityForm: EntityForm;
+        relation: CardSubCollectionRelation;
+        order: number;
+        name: string;
+        label?: LabelType | undefined;
+        helpText?: HelpTextType | undefined;
+        hidden?: HiddenType | undefined;
+        readonly?: ReadOnlyType | undefined;
+        fetchUrl?: string | ((parentEntityForm: EntityForm) => string) | undefined;
+        cardConfig?: CardConfig | undefined;
+        fetchOptions?: CardSubCollectionFetchOptions | undefined;
+    });
+    /**
+     * Override withTooltip to support tooltips (parent class doesn't support it)
+     */
+    withTooltip(tooltip?: TooltipType): this;
+    getTooltip(props: FieldInfoParameters): Promise<ReactNode>;
+    /**
+     * Override clone to include card-specific properties
+     */
+    clone(): CardSubCollectionField;
+    withFetchOptions(fetchOptions: CardSubCollectionFetchOptions): this;
+    withCardConfig(cardConfig: CardConfig): this;
+    /**
+     * Build the SearchForm for fetching data
+     * Note: getMappedByFilter() and getMappedByValue() are inherited from SubCollectionField
+     */
+    buildSearchForm(parentEntityForm: EntityForm): Promise<SearchForm>;
+    /**
+     * Override render to display card grid instead of list grid
+     */
+    render({ entityForm, session, }: {
+        entityForm: EntityForm;
+        session?: Session;
+    }): Promise<ReactNode | null>;
+}