@donotdev/ui 0.0.13 → 0.0.15

package/dist/crud/components/EntityCardList.js

@@ -15,10 +15,11 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 import { useMemo, useCallback } from 'react';
 import { Heart } from 'lucide-react';
-import { Grid, Card, Stack, Text, Spinner, Section, Button, } from '@donotdev/components';
-import { useTranslation } from '@donotdev/core';
+import { Card, Grid, Stack, Text, Spinner, Section, Button, } from '@donotdev/components';
+import { useTranslation, getListCardFieldNames } from '@donotdev/core';
 import { useNavigate } from '../../routing';
-import { translateFieldLabel, useCrudCardList, EntityFilters, useEntityFavorites, matchesFilter, formatValue, useCrudFilters, } from '@donotdev/crud';
+import { useCrudCardList, EntityFilters, useEntityFavorites, matchesFilter, useCrudFilters, } from '@donotdev/crud';
+import { CrudCard } from './CrudCardLink';
 /**
  * Entity Card List Component - Card grid view for public/user-facing browsing
  *
@@ -31,7 +32,7 @@ import { translateFieldLabel, useCrudCardList, EntityFilters, useEntityFavorites
  * - Auto-routing when handler not provided
  */
 export function EntityCardList({ entity, basePath, onClick, cols = [1, 2, 3, 4], staleTime = 1000 * 60 * 30, // 30 minutes default cache
-filter, hideFilters = false, }) {
+filter, hideFilters = false, resultLabel, tone, }) {
     const navigate = useNavigate();
     const base = basePath ?? `/${entity.collection}`;
     // useCrudCardList -> handles fetching optimized for cards automatically
@@ -43,11 +44,7 @@ filter, hideFilters = false, }) {
     });
     // Favorites toggle from CrudStore (persists across navigation)
     // Note: EntityFilters now manages its own filters internally via useCrudFilters
-    const { showFavoritesOnly, setShowFavoritesOnly } = useCrudFilters({
-        collection: entity.collection,
-    });
-    // Get filters for applying to data (EntityFilters manages its own state)
-    const { filters } = useCrudFilters({
+    const { showFavoritesOnly, setShowFavoritesOnly, filters } = useCrudFilters({
         collection: entity.collection,
     });
     // Apply filters from EntityFilters component
@@ -86,96 +83,47 @@ filter, hideFilters = false, }) {
             navigate(`${base}/${id}`);
         }
     }, [base, navigate, onClick]);
-    // Determine which fields to show in cards
-    const fieldsToShow = useMemo(() => {
-        const cardFields = entity.listCardFields ?? entity.listFields;
-        if (cardFields && cardFields.length > 0)
-            return cardFields;
-        return Object.keys(entity.fields).slice(0, 4);
-    }, [entity.listCardFields, entity.listFields, entity.fields]);
-    // Find image field
-    const imageField = useMemo(() => {
-        const imageFieldsInList = fieldsToShow.filter((fieldName) => {
-            const fieldConfig = entity.fields[fieldName];
-            return fieldConfig?.type === 'image' || fieldConfig?.type === 'images';
-        });
-        if (imageFieldsInList.length > 0)
-            return imageFieldsInList[0];
-        // Fallback: search all entity fields
-        const allImageFields = Object.keys(entity.fields).filter((fieldName) => {
-            const fieldConfig = entity.fields[fieldName];
-            return fieldConfig?.type === 'image' || fieldConfig?.type === 'images';
-        });
-        return allImageFields[0] || null;
-    }, [fieldsToShow, entity.fields]);
-    // Get other fields (non-image)
-    const otherFields = useMemo(() => {
-        return fieldsToShow.filter((fieldName) => fieldName !== imageField);
-    }, [fieldsToShow, imageField]);
+    // Flat field names for filters (works with both string[] and ListCardLayout)
+    const fieldsToFilter = useMemo(() => getListCardFieldNames(entity), [entity]);
     const entityName = t('name', { defaultValue: entity.name });
     return (_jsxs(_Fragment, { children: [!hideFilters && (_jsx(Section, { title: tCrud('filters.title', {
                     entity: entityName,
                     defaultValue: `Browse ${entityName} - Filters`,
-                }), collapsible: true, defaultOpen: true, children: _jsxs(Stack, { direction: "column", children: [_jsx(Button, { variant: showFavoritesOnly ? 'primary' : 'outline', icon: _jsx(Heart, { size: 18 }), onClick: () => setShowFavoritesOnly(!showFavoritesOnly), children: showFavoritesOnly
-                                ? tCrud('favorites.showAll', { defaultValue: 'Show All' })
-                                : tCrud('favorites.showFavorites', {
-                                    defaultValue: 'Show Favorites',
-                                }) }), _jsx(EntityFilters, { entity: entity, data: rawData, fieldsToFilter: entity.listCardFields })] }) })), _jsx(Section, { title: loading
+                }), collapsible: true, defaultOpen: true, tone: tone, children: _jsx(Card, { children: _jsxs(Stack, { direction: "column", children: [_jsx(Button, { variant: showFavoritesOnly ? 'primary' : 'outline', icon: _jsx(Heart, { size: 18 }), onClick: () => setShowFavoritesOnly(!showFavoritesOnly), children: showFavoritesOnly
+                                    ? tCrud('favorites.showAll', { defaultValue: 'Show All' })
+                                    : tCrud('favorites.showFavorites', {
+                                        defaultValue: 'Show Favorites',
+                                    }) }), _jsx(EntityFilters, { entity: entity, data: rawData, fieldsToFilter: fieldsToFilter })] }) }) })), _jsx(Section, { title: loading
                     ? tCrud('results.title.fetching', { defaultValue: 'Fetching...' })
-                    : tCrud('results.title.count', {
-                        count: data.length,
-                        defaultValue: data.length === 1
-                            ? 'Found 1 occurrence'
-                            : `Found ${data.length} occurrences`,
-                    }), collapsible: true, defaultOpen: true, children: loading ? (_jsx(Stack, { align: "center", justify: "center", style: { padding: 'var(--gap-3xl)' }, children: _jsx(Spinner, {}) })) : data.length === 0 ? (_jsxs(Stack, { align: "center", justify: "center", style: { padding: 'var(--gap-3xl)', textAlign: 'center' }, children: [_jsx(Text, { level: "h3", style: { color: 'var(--muted-foreground)' }, children: tCrud('emptyState.title', {
+                    : resultLabel
+                        ? resultLabel(data.length)
+                        : tCrud('results.title.count', {
+                            count: data.length,
+                            defaultValue: data.length === 1
+                                ? 'Found 1 occurrence'
+                                : `Found ${data.length} occurrences`,
+                        }), collapsible: true, defaultOpen: true, tone: tone, children: loading ? (_jsx(Stack, { align: "center", justify: "center", style: { padding: 'var(--gap-3xl)' }, children: _jsx(Spinner, {}) })) : data.length === 0 ? (_jsxs(Stack, { align: "center", justify: "center", style: { padding: 'var(--gap-3xl)', textAlign: 'center' }, children: [_jsx(Text, { level: "h3", style: { color: 'var(--muted-foreground)' }, children: tCrud('emptyState.title', {
                                 defaultValue: `No ${entity.name.toLowerCase()} found`,
                             }) }), _jsx(Text, { style: { color: 'var(--muted-foreground)' }, children: tCrud('emptyState.description', {
                                 defaultValue: `No ${entity.name.toLowerCase()} available at this time.`,
                             }) })] })) : (_jsx(Grid, { cols: cols, children: data.map((item) => {
-                        const imageValue = imageField ? item[imageField] : null;
-                        // Backend optimizes picture fields for listCard: returns thumbUrl string directly
-                        // (or fullUrl if thumbUrl missing, or null if no picture)
-                        const imageUrl = typeof imageValue === 'string' ? imageValue : null;
-                        // Title from first non-image field
-                        const titleField = otherFields[0];
-                        const titleValue = titleField ? item[titleField] : item.id;
                         const itemIsFavorite = isFavorite(item.id);
-                        return (_jsxs(Card, { title: String(titleValue || ''), clickable: true, onClick: () => handleView(item.id), elevated: true, children: [_jsx(Heart, { fill: itemIsFavorite ? '#ef4444' : '#ffffff', stroke: itemIsFavorite ? '#ef4444' : 'var(--muted-foreground)', onClick: (e) => {
-                                        e.stopPropagation();
-                                        toggleFavorite(item.id);
-                                    }, style: {
-                                        position: 'absolute',
-                                        top: 'var(--gap-sm)',
-                                        right: 'var(--gap-sm)',
-                                        zIndex: 10,
-                                        cursor: 'pointer',
-                                        width: 'var(--icon-md)',
-                                        height: 'var(--icon-md)',
-                                        transition: 'fill 0.2s, stroke 0.2s',
-                                    }, "aria-label": itemIsFavorite
-                                        ? tCrud('favorites.remove', {
-                                            defaultValue: 'Remove from favorites',
-                                        })
-                                        : tCrud('favorites.add', {
-                                            defaultValue: 'Add to favorites',
-                                        }) }), _jsxs(Stack, { direction: "column", children: [imageUrl && (_jsx("div", { style: {
-                                                width: '100%',
-                                                aspectRatio: '16/9',
-                                                borderRadius: 'var(--radius-md)',
-                                                overflow: 'hidden',
-                                                backgroundColor: 'var(--muted)',
-                                                position: 'relative',
-                                            }, children: _jsx("img", { src: imageUrl, alt: String(titleValue || ''), style: {
-                                                    width: '100%',
-                                                    height: '100%',
-                                                    objectFit: 'cover',
-                                                } }) })), _jsx(Stack, { direction: "column", gap: "tight", children: otherFields.slice(1, 4).map((fieldName) => {
-                                                const fieldConfig = entity.fields[fieldName];
-                                                if (!fieldConfig)
-                                                    return null;
-                                                return (_jsxs("div", { children: [_jsx(Text, { level: "small", variant: "muted", children: translateFieldLabel(fieldName, fieldConfig, t) }), _jsx(Text, { children: formatValue(item[fieldName], fieldConfig, t, {
-                                                                compact: true,
-                                                            }) })] }, fieldName));
-                                            }) })] })] }, item.id));
+                        const detailHref = onClick ? undefined : `${base}/${item.id}`;
+                        return (_jsx(CrudCard, { item: item, entity: entity, detailHref: detailHref, onClick: onClick ? () => handleView(item.id) : undefined, renderActions: _jsx(Heart, { fill: itemIsFavorite ? '#ef4444' : '#ffffff', stroke: itemIsFavorite ? '#ef4444' : 'var(--muted-foreground)', onClick: (e) => {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    toggleFavorite(item.id);
+                                }, style: {
+                                    cursor: 'pointer',
+                                    width: 'var(--icon-md)',
+                                    height: 'var(--icon-md)',
+                                    transition: 'fill 0.2s, stroke 0.2s',
+                                }, "aria-label": itemIsFavorite
+                                    ? tCrud('favorites.remove', {
+                                        defaultValue: 'Remove from favorites',
+                                    })
+                                    : tCrud('favorites.add', {
+                                        defaultValue: 'Add to favorites',
+                                    }) }) }, item.id));
                     }) })) })] }));
 }

package/dist/crud/components/EntityDisplayRenderer.d.ts

@@ -16,6 +16,6 @@ export type { EntityDisplayRendererProps };
  * <EntityDisplayRenderer entity={carEntity} id={carId} />
  * ```
  */
-export declare function EntityDisplayRenderer<T extends EntityRecord = EntityRecord>({ entity, id, t, className, backend, loadingMessage, notFoundMessage, viewerRole, }: EntityDisplayRendererProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function EntityDisplayRenderer<T extends EntityRecord = EntityRecord>({ entity, id, t, className, loadingMessage, notFoundMessage, viewerRole: viewerRoleProp, excludeFields, }: EntityDisplayRendererProps<T>): import("react/jsx-runtime").JSX.Element;
 export default EntityDisplayRenderer;
 //# sourceMappingURL=EntityDisplayRenderer.d.ts.map

package/dist/crud/components/EntityDisplayRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EntityDisplayRenderer.d.ts","sourceRoot":"","sources":["../../../src/crud/components/EntityDisplayRenderer.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,0BAA0B,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG/E,YAAY,EAAE,0BAA0B,EAAE,CAAC;AAE3C;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,YAAY,GAAG,YAAY,EAAE,EAC3E,MAAM,EACN,EAAE,EACF,CAAC,EACD,SAAc,EACd,OAAqB,EACrB,cAAc,EACd,eAAe,EACf,UAAoB,GACrB,EAAE,0BAA0B,CAAC,CAAC,CAAC,2CAgM/B;AAED,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"EntityDisplayRenderer.d.ts","sourceRoot":"","sources":["../../../src/crud/components/EntityDisplayRenderer.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,0BAA0B,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAI/E,YAAY,EAAE,0BAA0B,EAAE,CAAC;AAE3C;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,YAAY,GAAG,YAAY,EAAE,EAC3E,MAAM,EACN,EAAE,EACF,CAAC,EACD,SAAc,EACd,cAAc,EACd,eAAe,EACf,UAAU,EAAE,cAAc,EAC1B,aAAa,GACd,EAAE,0BAA0B,CAAC,CAAC,CAAC,2CAuM/B;AAED,eAAe,qBAAqB,CAAC"}

package/dist/crud/components/EntityDisplayRenderer.js

@@ -14,6 +14,7 @@ import { useEffect, useState, useMemo } from 'react';
 import { Stack, Spinner } from '@donotdev/components';
 import { useTranslation, isFieldVisible } from '@donotdev/core';
 import { useCrud, DisplayFieldRenderer } from '@donotdev/crud';
+import { useAuthSafe } from '../../utils/useAuthSafe';
 /**
  * EntityDisplayRenderer - Automatically fetches and displays entity data
  *
@@ -30,8 +31,11 @@ import { useCrud, DisplayFieldRenderer } from '@donotdev/crud';
  * <EntityDisplayRenderer entity={carEntity} id={carId} />
  * ```
  */
-export function EntityDisplayRenderer({ entity, id, t, className = '', backend = 'functions', loadingMessage, notFoundMessage, viewerRole = 'guest', }) {
-    const { get, loading, data: storeData, error: storeError, isAvailable, } = useCrud(entity, { backend });
+export function EntityDisplayRenderer({ entity, id, t, className = '', loadingMessage, notFoundMessage, viewerRole: viewerRoleProp, excludeFields, }) {
+    // Auto-detect role from auth; prop overrides
+    const authRole = useAuthSafe('userRole');
+    const viewerRole = viewerRoleProp ?? authRole;
+    const { get, loading, data: storeData, error: storeError, isAvailable, } = useCrud(entity);
     const [isFetching, setIsFetching] = useState(false);
     const [fetchError, setFetchError] = useState(null);
     const [data, setData] = useState(null);
@@ -91,6 +95,10 @@ export function EntityDisplayRenderer({ entity, id, t, className = '', backend =
         if (!displayData)
             return [];
         return Object.entries(entity.fields).filter(([fieldName, fieldConfig]) => {
+            // Skip excluded fields
+            if (excludeFields?.includes(fieldName)) {
+                return false;
+            }
             // Check visibility first
             if (!isFieldVisible(fieldConfig.visibility, viewerRole)) {
                 return false;
@@ -122,7 +130,7 @@ export function EntityDisplayRenderer({ entity, id, t, className = '', backend =
             }
             return true;
         });
-    }, [entity.fields, viewerRole, displayData]);
+    }, [entity.fields, viewerRole, displayData, excludeFields]);
     // Loading state
     if (isLoading) {
         return (_jsx("div", { style: {

package/dist/crud/components/EntityFormRenderer.d.ts

@@ -13,6 +13,6 @@ export type { EntityFormRendererProps };
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
-export declare function EntityFormRenderer<T extends EntityRecord = EntityRecord>({ entity, onSubmit, t, className, submitText, loading, defaultValues, submitVariant, secondaryButtonText, secondaryButtonVariant, onSecondarySubmit, viewerRole, operation, autoSave, formId: externalFormId, cancelText, cancelPath, successPath, onCancel, warnOnUnsavedChanges, unsavedChangesMessage, hideVisibilityInfo, }: EntityFormRendererProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function EntityFormRenderer<T extends EntityRecord = EntityRecord>({ entity, onSubmit, t, className, submitText, loading, defaultValues, submitVariant, secondaryButtonText, secondaryButtonVariant, onSecondarySubmit, viewerRole: viewerRoleProp, operation, formId: externalFormId, cancelText, cancelPath, successPath, onCancel, warnOnUnsavedChanges, unsavedChangesMessage, hideVisibilityInfo, }: EntityFormRendererProps<T>): import("react/jsx-runtime").JSX.Element;
 export default EntityFormRenderer;
 //# sourceMappingURL=EntityFormRenderer.d.ts.map

package/dist/crud/components/EntityFormRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EntityFormRenderer.d.ts","sourceRoot":"","sources":["../../../src/crud/components/EntityFormRenderer.tsx"],"names":[],"mappings":"AAsCA,OAAO,KAAK,EACV,uBAAuB,EACvB,YAAY,EAEb,MAAM,gBAAgB,CAAC;AAExB,YAAY,EAAE,uBAAuB,EAAE,CAAC;AAExC;;;;;;;;;;;;GAYG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,YAAY,GAAG,YAAY,EAAE,EACxE,MAAM,EACN,QAAQ,EACR,CAAC,EACD,SAAc,EACd,UAAU,EACV,OAAe,EACf,aAAa,EACb,aAAyB,EACzB,mBAAmB,EACnB,sBAAkC,EAClC,iBAAiB,EACjB,UAAU,EACV,SAA6C,EAC7C,QAAiC,EACjC,MAAM,EAAE,cAAc,EACtB,UAAU,EACV,UAAU,EACV,WAAW,EACX,QAAQ,EACR,oBAA2B,EAC3B,qBAAqB,EACrB,kBAA0B,GAC3B,EAAE,uBAAuB,CAAC,CAAC,CAAC,2CAic5B;AAED,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"EntityFormRenderer.d.ts","sourceRoot":"","sources":["../../../src/crud/components/EntityFormRenderer.tsx"],"names":[],"mappings":"AAsCA,OAAO,KAAK,EACV,uBAAuB,EACvB,YAAY,EAEb,MAAM,gBAAgB,CAAC;AAExB,YAAY,EAAE,uBAAuB,EAAE,CAAC;AAExC;;;;;;;;;;;;GAYG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,YAAY,GAAG,YAAY,EAAE,EACxE,MAAM,EACN,QAAQ,EACR,CAAC,EACD,SAAc,EACd,UAAU,EACV,OAAe,EACf,aAAa,EACb,aAAyB,EACzB,mBAAmB,EACnB,sBAAkC,EAClC,iBAAiB,EACjB,UAAU,EAAE,cAAc,EAC1B,SAA6C,EAC7C,MAAM,EAAE,cAAc,EACtB,UAAU,EACV,UAAU,EACV,WAAW,EACX,QAAQ,EACR,oBAA2B,EAC3B,qBAAqB,EACrB,kBAA0B,GAC3B,EAAE,uBAAuB,CAAC,CAAC,CAAC,2CAkb5B;AAED,eAAe,kBAAkB,CAAC"}

package/dist/crud/components/EntityFormRenderer.js

@@ -15,7 +15,8 @@ import { FormProvider } from 'react-hook-form';
 import { Badge, Button, DropdownMenu, Grid, Stack, Spinner, } from '@donotdev/components';
 import { hasRoleAccess, useTranslation } from '@donotdev/core';
 import { useNavigate } from '../../routing';
-import { DisplayFieldRenderer, FormFieldRenderer, UploadProvider, useEntityForm, useUnsavedChangesWarning, useConfirmNavigation, useFormStore, } from '@donotdev/crud';
+import { DisplayFieldRenderer, FormFieldRenderer, UploadProvider, useEntityForm, useUnsavedChangesWarning, useFormStore, } from '@donotdev/crud';
+import { useAuthSafe } from '../../utils/useAuthSafe';
 /**
  * EntityFormRenderer - Dumb component that renders a form from entity definition.
  *
@@ -29,8 +30,11 @@ import { DisplayFieldRenderer, FormFieldRenderer, UploadProvider, useEntityForm,
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
-export function EntityFormRenderer({ entity, onSubmit, t, className = '', submitText, loading = false, defaultValues, submitVariant = 'primary', secondaryButtonText, secondaryButtonVariant = 'outline', onSecondarySubmit, viewerRole, operation = defaultValues ? 'edit' : 'create', autoSave = operation === 'create', formId: externalFormId, cancelText, cancelPath, successPath, onCancel, warnOnUnsavedChanges = true, unsavedChangesMessage, hideVisibilityInfo = false, }) {
+export function EntityFormRenderer({ entity, onSubmit, t, className = '', submitText, loading = false, defaultValues, submitVariant = 'primary', secondaryButtonText, secondaryButtonVariant = 'outline', onSecondarySubmit, viewerRole: viewerRoleProp, operation = defaultValues ? 'edit' : 'create', formId: externalFormId, cancelText, cancelPath, successPath, onCancel, warnOnUnsavedChanges = true, unsavedChangesMessage, hideVisibilityInfo = false, }) {
     const navigate = useNavigate();
+    // Auto-detect role from auth; prop overrides (e.g. View-As preview)
+    const authRole = useAuthSafe('userRole');
+    const viewerRole = viewerRoleProp ?? authRole;
     // Generate stable form ID
     const generatedFormId = useId();
     const formId = externalFormId ?? `entity-form-${entity.name}-${generatedFormId}`;
@@ -81,7 +85,6 @@ export function EntityFormRenderer({ entity, onSubmit, t, className = '', submit
         defaultValues,
         viewerRole,
         t: translate,
-        autoSave,
     });
     const { control, handleSubmit, formState: { errors }, fields: rawFields, formStatus, uploadProgress, cleanup, isDirty, hasUserInteracted, resetForm, } = form;
     const isDirtyForBlocking = isDirty && hasUserInteracted;
@@ -102,6 +105,7 @@ export function EntityFormRenderer({ entity, onSubmit, t, className = '', submit
         });
     }, [rawFields, canPreviewRole, previewRole]);
     // Sync isDirty to FormStore (single source of truth)
+    // Use getState() to avoid subscribing to the action reference (Zustand anti-pattern)
     useEffect(() => {
         if (formId) {
             useFormStore.getState().setIsDirty(formId, isDirtyForBlocking);
@@ -116,57 +120,47 @@ export function EntityFormRenderer({ entity, onSubmit, t, className = '', submit
         tCrud('messages.unsavedChangesLeave', {
             defaultValue: 'You have unsaved changes. Are you sure you want to leave?',
         }), [unsavedChangesMessage, tCrud]);
-    const unsavedChangesDiscardMessage = useMemo(() => unsavedChangesMessage ||
-        tCrud('messages.unsavedChangesDiscard', {
-            defaultValue: 'You have unsaved changes. Discard them?',
-        }), [unsavedChangesMessage, tCrud]);
     // Warn about unsaved changes when navigating away (browser refresh/close)
-    // SPA navigation blocking is handled by router hooks via FormStore
+    // beforeunload is the only place we can't toast — browser requires native dialog
     useUnsavedChangesWarning({
         isDirty: isDirtyForBlocking,
         enabled: warnOnUnsavedChanges,
         message: unsavedChangesLeaveMessage,
     });
-    // Use framework helper for cancel confirmation (DRY, SSR-safe)
-    const confirmNavigation = useConfirmNavigation(isDirtyForBlocking, unsavedChangesDiscardMessage);
-    // Handle cancel with confirmation
-    const handleCancel = async () => {
-        if (isDirtyForBlocking) {
-            const confirmed = await confirmNavigation();
-            if (!confirmed)
-                return;
-        }
+    // Handle cancel — auto-save ensures draft is persisted, no confirm needed
+    const handleCancel = () => {
         resetForm();
-        // If onCancel callback provided, use it (takes precedence)
         if (onCancel) {
             onCancel();
         }
+        else if (cancelPath) {
+            navigate(cancelPath);
+        }
         else {
-            // Otherwise, navigate back or to cancelPath if provided
-            if (cancelPath) {
-                navigate(cancelPath);
-            }
-            else {
-                navigate('back');
-            }
+            navigate('back');
         }
     };
-    // Wrap onSubmit to navigate optimistically (fire and forget)
+    // Wrap onSubmit to await the result before navigating
     // handleSubmit from react-hook-form expects: (data: EntityData) => void | Promise<void>
     // Our onSubmit prop is (data: T) => void | Promise<void>, where T extends EntityRecord
     // EntityData should be compatible with T, so we can safely pass it
-    const handleFormSubmit = (data) => {
-        // Call onSubmit (don't await - optimistic update pattern)
-        // Type assertion is safe: EntityData is the validated form data, T is EntityRecord
-        onSubmit(data);
-        // Navigate immediately (optimistic navigation - feels fast)
-        // If onSubmit is async, navigation happens while it's processing in background
-        if (successPath) {
-            navigate(successPath);
+    const handleFormSubmit = async (data) => {
+        try {
+            // Await onSubmit so navigation only happens after successful submission
+            // Type assertion is safe: EntityData is the validated form data, T is EntityRecord
+            await onSubmit(data);
+            // Navigate only after successful submission
+            if (successPath) {
+                navigate(successPath);
+            }
+            else {
+                // Default: navigate back (user came from list, go back there)
+                navigate('back');
+            }
         }
-        else {
-            // Default: navigate back (optimistic - user came from list, go back there)
-            navigate('back');
+        catch {
+            // onSubmit rejected — stay on form so user can correct errors
+            // Error display is handled by the caller's onSubmit implementation
         }
     };
     // Determine if cancel button should show
@@ -274,13 +268,13 @@ export function EntityFormRenderer({ entity, onSubmit, t, className = '', submit
                                 if (buttonCount === 1) {
                                     return (_jsx(Stack, { direction: "column", gap: "tight", style: buttonContainerStyle, children: buttons[0] }));
                                 }
-                                // Multiple buttons: use Grid with proportional columns (Submit gets 2fr)
-                                const templateColumns = buttonCount === 2
+                                // Multiple buttons: responsive stacked on mobile, proportional on tablet+
+                                const colTemplate = buttonCount === 2
                                     ? '1fr 2fr' // Cancel/Preview + Submit
                                     : buttonCount === 3
                                         ? '1fr 1fr 2fr' // Cancel + Preview + Submit
                                         : '1fr 1fr 1fr 2fr'; // Cancel + Preview + Secondary + Submit
-                                return (_jsx(Grid, { cols: [1, buttonCount, buttonCount, buttonCount], templateColumns: templateColumns, gap: "tight", style: buttonContainerStyle, children: buttons }));
+                                return (_jsx(Grid, { cols: ['1fr', colTemplate, colTemplate, colTemplate], gap: "tight", style: buttonContainerStyle, children: buttons }));
                             })()] })] }) }) }));
 }
 export default EntityFormRenderer;

package/dist/crud/components/EntityList.d.ts

@@ -10,5 +10,5 @@ export type { EntityListProps };
  * - Edit and Delete actions (admin only)
  * - Auto-routing when handlers not provided
  */
-export declare function EntityList({ entity, userRole, basePath, onClick, hideFilters, pagination, pageSize: pageSizeProp, queryOptions, exportable, }: EntityListProps): import("react/jsx-runtime").JSX.Element;
+export declare function EntityList({ entity, basePath, onClick, hideFilters, pagination, pageSize: pageSizeProp, queryOptions, exportable, }: EntityListProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=EntityList.d.ts.map

package/dist/crud/components/EntityList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EntityList.d.ts","sourceRoot":"","sources":["../../../src/crud/components/EntityList.tsx"],"names":[],"mappings":"AA0CA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEtD,YAAY,EAAE,eAAe,EAAE,CAAC;AAEhC;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,QAAkB,EAClB,QAAQ,EACR,OAAO,EACP,WAAmB,EACnB,UAAqB,EACrB,QAAQ,EAAE,YAAY,EACtB,YAAY,EACZ,UAAiB,GAClB,EAAE,eAAe,2CAkTjB"}
+{"version":3,"file":"EntityList.d.ts","sourceRoot":"","sources":["../../../src/crud/components/EntityList.tsx"],"names":[],"mappings":"AA0CA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEtD,YAAY,EAAE,eAAe,EAAE,CAAC;AAEhC;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,QAAQ,EACR,OAAO,EACP,WAAmB,EACnB,UAAqB,EACrB,QAAQ,EAAE,YAAY,EACtB,YAAY,EACZ,UAAiB,GAClB,EAAE,eAAe,2CAiTjB"}

package/dist/crud/components/EntityList.js

@@ -29,7 +29,7 @@ import { translateFieldLabel, useCrud, useCrudList, EntityFilters, matchesFilter
  * - Edit and Delete actions (admin only)
  * - Auto-routing when handlers not provided
  */
-export function EntityList({ entity, userRole = 'guest', basePath, onClick, hideFilters = false, pagination = 'client', pageSize: pageSizeProp, queryOptions, exportable = true, }) {
+export function EntityList({ entity, basePath, onClick, hideFilters = false, pagination = 'client', pageSize: pageSizeProp, queryOptions, exportable = true, }) {
     const navigate = useNavigate();
     const base = basePath ?? `/${entity.collection}`;
     // Server-side pagination state (only used when pagination='server')

package/dist/crud/components/EntityRecommendations.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @fileoverview Reusable recommendations section for related entities
+ * @description Fetches and displays related entity cards in a grid.
+ * Caller defines "related by what" via queryOptions.
+ *
+ * @version 0.0.1
+ * @since 0.0.15
+ * @author AMBROISE PARK Consulting
+ */
+import type { EntityRecommendationsProps } from '@donotdev/core';
+/**
+ * Displays a grid of related entity cards.
+ * Uses useCrudCardList (listCard schema) so cards render identically to EntityCardList.
+ *
+ * @example
+ * <EntityRecommendations
+ *   entity={apartmentEntity}
+ *   title={t('apartment.recommendations')}
+ *   queryOptions={{
+ *     where: [
+ *       { field: 'district_code', operator: 'eq', value: current.district_code },
+ *       { field: 'id', operator: 'neq', value: current.id },
+ *     ],
+ *     limit: 3,
+ *   }}
+ * />
+ */
+export declare function EntityRecommendations({ entity, queryOptions, title, basePath, cols, className, }: EntityRecommendationsProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=EntityRecommendations.d.ts.map

package/dist/crud/components/EntityRecommendations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EntityRecommendations.d.ts","sourceRoot":"","sources":["../../../src/crud/components/EntityRecommendations.tsx"],"names":[],"mappings":"AAGA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,gBAAgB,CAAC;AAMjE;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,MAAM,EACN,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,IAAQ,EACR,SAAS,GACV,EAAE,0BAA0B,kDAuB5B"}

package/dist/crud/components/EntityRecommendations.js

@@ -0,0 +1,32 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Section } from '@donotdev/components';
+import { useCrudCardList } from '@donotdev/crud';
+import { CrudCard } from './CrudCardLink';
+/**
+ * Displays a grid of related entity cards.
+ * Uses useCrudCardList (listCard schema) so cards render identically to EntityCardList.
+ *
+ * @example
+ * <EntityRecommendations
+ *   entity={apartmentEntity}
+ *   title={t('apartment.recommendations')}
+ *   queryOptions={{
+ *     where: [
+ *       { field: 'district_code', operator: 'eq', value: current.district_code },
+ *       { field: 'id', operator: 'neq', value: current.id },
+ *     ],
+ *     limit: 3,
+ *   }}
+ * />
+ */
+export function EntityRecommendations({ entity, queryOptions, title, basePath, cols = 3, className, }) {
+    const { items, loading } = useCrudCardList(entity, {
+        queryOptions,
+    });
+    if (!loading && items.length === 0) {
+        return null;
+    }
+    const resolvedBasePath = basePath ?? `/${entity.collection}`;
+    return (_jsx(Section, { title: title, gridCols: cols, className: className, children: items.map((item) => (_jsx(CrudCard, { item: item, entity: entity, detailHref: `${resolvedBasePath}/${item.id}` }, item.id))) }));
+}

package/dist/crud/components/index.d.ts

@@ -10,6 +10,7 @@ export { EntityDisplayRenderer } from './EntityDisplayRenderer';
 export { EntityList } from './EntityList';
 export { EntityCardList } from './EntityCardList';
 export { EntityFormRenderer } from './EntityFormRenderer';
+export { EntityRecommendations } from './EntityRecommendations';
 export * from './Form';
-export type { EntityListProps, EntityCardListProps, EntityFormRendererProps, EntityDisplayRendererProps, } from '@donotdev/core';
+export type { EntityListProps, EntityCardListProps, EntityRecommendationsProps, EntityFormRendererProps, EntityDisplayRendererProps, } from '@donotdev/core';
 //# sourceMappingURL=index.d.ts.map

package/dist/crud/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/crud/components/index.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,QAAQ,CAAC;AAEvB,YAAY,EACV,eAAe,EACf,mBAAmB,EACnB,uBAAuB,EACvB,0BAA0B,GAC3B,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/crud/components/index.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,cAAc,QAAQ,CAAC;AAEvB,YAAY,EACV,eAAe,EACf,mBAAmB,EACnB,0BAA0B,EAC1B,uBAAuB,EACvB,0BAA0B,GAC3B,MAAM,gBAAgB,CAAC"}

package/dist/crud/components/index.js

@@ -11,4 +11,5 @@ export { EntityDisplayRenderer } from './EntityDisplayRenderer';
 export { EntityList } from './EntityList';
 export { EntityCardList } from './EntityCardList';
 export { EntityFormRenderer } from './EntityFormRenderer';
+export { EntityRecommendations } from './EntityRecommendations';
 export * from './Form';