@donotdev/ui 0.0.12 → 0.0.14

package/dist/components/layout/components/header/CacheSettings.js

@@ -97,7 +97,9 @@ function CacheSettings() {
                             tx.executeSql('SELECT name FROM sqlite_master WHERE type="table"', [], (tx, results) => {
                                 for (let i = 0; i < results.rows.length; i++) {
                                     const tableName = results.rows.item(i).name;
-                                    tx.executeSql(`DROP TABLE IF EXISTS ${tableName}`);
+                                    if (/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(tableName)) {
+                                        tx.executeSql(`DROP TABLE IF EXISTS ${tableName}`);
+                                    }
                                 }
                             });
                         });
@@ -205,7 +207,7 @@ function CacheSettings() {
             setIsClearing(false);
         }
     };
-    return (_jsxs(Stack, { gap: "medium", children: [_jsx(Stack, { gap: "medium", children: Object.entries(cacheOptions).map(([key, checked]) => (_jsxs(Stack, { direction: "row", align: "center", gap: "tight", children: [_jsx(Checkbox, { id: key, checked: checked, onCheckedChange: (checked) => setCacheOptions((prev) => ({ ...prev, [key]: !!checked })) }), _jsx("label", { htmlFor: key, style: {
+    return (_jsxs(Stack, { children: [_jsx(Stack, { children: Object.entries(cacheOptions).map(([key, checked]) => (_jsxs(Stack, { direction: "row", align: "center", gap: "tight", children: [_jsx(Checkbox, { id: key, checked: checked, onCheckedChange: (checked) => setCacheOptions((prev) => ({ ...prev, [key]: !!checked })) }), _jsx("label", { htmlFor: key, style: {
                                 fontSize: 'var(--font-size-sm)',
                                 fontWeight: 500,
                                 lineHeight: 1,

package/dist/components/layout/components/header/HeaderNavigation.d.ts

@@ -13,6 +13,12 @@ export interface HeaderNavigationProps {
      * @default 'auto'
      */
     display?: (typeof DISPLAY)[keyof typeof DISPLAY];
+    /**
+     * Single-item mode: render one route as a standalone Button.
+     * Resolves label, icon, and active state from the navigation store.
+     * Renders null if the path is not found or inaccessible.
+     */
+    path?: string;
 }
 /**
  * HeaderNavigation - DISPLAY-aware adaptive navigation component

package/dist/components/layout/components/header/HeaderNavigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderNavigation.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/components/header/HeaderNavigation.tsx"],"names":[],"mappings":"AAoBA,OAAO,EACL,OAAO,EAIR,MAAM,sBAAsB,CAAC;AAQ9B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,MAAM,WAAW,qBAAqB;IACpC,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,OAAO,OAAO,CAAC,CAAC;CAClD;AAED;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,gBAAgB,EAAE,aAAa,CAAC,qBAAqB,CAkD1D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"HeaderNavigation.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/components/header/HeaderNavigation.tsx"],"names":[],"mappings":"AAsBA,OAAO,EACL,OAAO,EAIR,MAAM,sBAAsB,CAAC;AAU9B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,MAAM,WAAW,qBAAqB;IACpC,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,OAAO,OAAO,CAAC,CAAC;IACjD;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,gBAAgB,EAAE,aAAa,CAAC,qBAAqB,CAwE1D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/layout/components/header/HeaderNavigation.js

@@ -16,12 +16,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * @author AMBROISE PARK Consulting
  */
 import { MoreHorizontal } from 'lucide-react';
+import { Link as LinkIcon } from 'lucide-react';
 import { DISPLAY, DropdownMenu, Button, } from '@donotdev/components';
 import { cn } from '@donotdev/components';
 import { useBreakpoint, useTranslation } from '@donotdev/core';
+import { Link } from '../../../../routing/Link';
+import { Icon } from '../../../common/icon';
 import { DnDevNavigationMenu } from '../../../../routing/DnDevNavigationMenu';
 import { NavigationItemComponent } from '../../../../routing/NavigationItem';
-import { useNavigationItems } from '../../../../routing/useNavigation';
+import { useNavigationItems, useNavigationRoute } from '../../../../routing/useNavigation';
 /**
  * HeaderNavigation - DISPLAY-aware adaptive navigation component
  *
@@ -34,11 +37,18 @@ import { useNavigationItems } from '../../../../routing/useNavigation';
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
-const HeaderNavigation = ({ className = '', showIcons = true, display = DISPLAY.AUTO, }) => {
+const HeaderNavigation = ({ className = '', showIcons = true, display = DISPLAY.AUTO, path, }) => {
     const { t } = useTranslation('dndev');
     const isMobile = useBreakpoint('isMobile');
     const isTablet = useBreakpoint('isTablet');
     const navigationItems = useNavigationItems();
+    const singleRoute = useNavigationRoute(path ?? '');
+    // Single-item mode — render one route as a Button link.
+    if (path) {
+        if (!singleRoute)
+            return null;
+        return (_jsx(Button, { variant: "ghost", display: display, icon: showIcons ? _jsx(Icon, { icon: singleRoute.icon, fallback: LinkIcon }) : undefined, className: className, render: ({ children, ...props }) => (_jsx(Link, { path: singleRoute.path, ...props, children: children })), children: singleRoute.label }));
+    }
     const effectiveDisplay = display === DISPLAY.AUTO
         ? isMobile || isTablet
             ? DISPLAY.COMPACT

package/dist/components/license/LicenseWatermark.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LicenseWatermark.d.ts","sourceRoot":"","sources":["../../../src/components/license/LicenseWatermark.tsx"],"names":[],"mappings":"AAsBA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,gBAAgB,mDAsG/B"}
+{"version":3,"file":"LicenseWatermark.d.ts","sourceRoot":"","sources":["../../../src/components/license/LicenseWatermark.tsx"],"names":[],"mappings":"AAsBA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,gBAAgB,mDAwG/B"}

package/dist/components/license/LicenseWatermark.js

@@ -41,6 +41,8 @@ import { watermarkSvg } from './watermarkData';
  */
 export function LicenseWatermark() {
     const license = checkLicense();
+    /** Production console.warn is intentional — alerts unlicensed deployments.
+     *  This is a license enforcement mechanism, not a debug log. */
     useEffect(() => {
         if (!license.isValid) {
             // Console warnings
@@ -61,7 +63,7 @@ export function LicenseWatermark() {
     }
     return (_jsxs("a", { href: "https://donotdev.com/pricing", target: "_blank", rel: "noopener noreferrer", style: {
             position: 'fixed',
-            right: '20px',
+            insetInlineEnd: '20px',
             top: '50%',
             transform: 'translateY(-50%)',
             zIndex: 9999,

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

@@ -0,0 +1,17 @@
+/**
+ * @fileoverview UI CrudCard wrapper
+ * @description Thin wrapper around @donotdev/crud CrudCard that adds Link routing.
+ * CrudCard (crud) is platform-agnostic; this wrapper adds web navigation via Link.
+ *
+ * @version 0.2.0
+ * @since 0.0.1
+ * @author AMBROISE PARK Consulting
+ */
+import type { CrudCardProps } from '@donotdev/core';
+/**
+ * CrudCard with Link wrapping for web navigation.
+ * When detailHref is provided, wraps the card in a Link for a11y/SEO.
+ */
+export declare function CrudCard({ detailHref, onClick, ...rest }: CrudCardProps): import("react/jsx-runtime").JSX.Element;
+export default CrudCard;
+//# sourceMappingURL=CrudCardLink.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CrudCardLink.d.ts","sourceRoot":"","sources":["../../../src/crud/components/CrudCardLink.tsx"],"names":[],"mappings":"AAGA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAIpD;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,EACvB,UAAU,EACV,OAAO,EACP,GAAG,IAAI,EACR,EAAE,aAAa,2CAqBf;AAED,eAAe,QAAQ,CAAC"}

package/dist/crud/components/CrudCardLink.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CrudCard as BaseCrudCard } from '@donotdev/crud';
+import { Link } from '../../routing';
+/**
+ * CrudCard with Link wrapping for web navigation.
+ * When detailHref is provided, wraps the card in a Link for a11y/SEO.
+ */
+export function CrudCard({ detailHref, onClick, ...rest }) {
+    // When detailHref is set, Link handles navigation — don't pass onClick to inner card
+    const card = (_jsx(BaseCrudCard, { ...rest, onClick: detailHref ? undefined : onClick }));
+    if (detailHref) {
+        return (_jsx(Link, { path: detailHref, "aria-label": rest.item?.id ? `View ${rest.item.id}` : undefined, children: card }));
+    }
+    return card;
+}
+export default CrudCard;

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

@@ -1 +1 @@
-{"version":3,"file":"EntityCardList.d.ts","sourceRoot":"","sources":["../../../src/crud/components/EntityCardList.tsx"],"names":[],"mappings":"AAwCA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAE1D,YAAY,EAAE,mBAAmB,EAAE,CAAC;AAEpC;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,QAAQ,EACR,OAAO,EACP,IAAmB,EACnB,SAA0B,EAAE,2BAA2B;AACvD,MAAM,EACN,WAAmB,GACpB,EAAE,mBAAmB,2CA0RrB"}
+{"version":3,"file":"EntityCardList.d.ts","sourceRoot":"","sources":["../../../src/crud/components/EntityCardList.tsx"],"names":[],"mappings":"AAsCA,OAAO,KAAK,EAAE,mBAAmB,EAAgB,MAAM,gBAAgB,CAAC;AAIxE,YAAY,EAAE,mBAAmB,EAAE,CAAC;AAEpC;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,QAAQ,EACR,OAAO,EACP,IAAmB,EACnB,SAA0B,EAAE,2BAA2B;AACvD,MAAM,EACN,WAAmB,GACpB,EAAE,mBAAmB,2CAqMrB"}

package/dist/crud/components/EntityCardList.js

@@ -13,12 +13,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
-import { useMemo, useCallback, useState } from 'react';
+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 { 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, } 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
  *
@@ -41,9 +42,11 @@ filter, hideFilters = false, }) {
     const { isFavorite, toggleFavorite, favoritesFilter } = useEntityFavorites({
         collection: entity.collection,
     });
-    const [showFavoritesOnly, setShowFavoritesOnly] = useState(false);
-    // Filter state
-    const [filters, setFilters] = useState({});
+    // Favorites toggle from CrudStore (persists across navigation)
+    // Note: EntityFilters now manages its own filters internally via useCrudFilters
+    const { showFavoritesOnly, setShowFavoritesOnly, filters } = useCrudFilters({
+        collection: entity.collection,
+    });
     // Apply filters from EntityFilters component
     const applyFilters = useCallback((item) => {
         if (Object.keys(filters).length === 0)
@@ -80,96 +83,44 @@ 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", gap: "medium", children: [_jsx(Button, { variant: showFavoritesOnly ? 'primary' : 'outline', icon: _jsx(Heart, { size: 18 }), onClick: () => setShowFavoritesOnly(!showFavoritesOnly), children: showFavoritesOnly
+                }), 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, filters: filters, onFiltersChange: setFilters, fieldsToFilter: entity.listCardFields })] }) })), _jsx(Section, { title: loading
+                                }) }), _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", gap: "medium", style: { padding: 'var(--gap-3xl)' }, children: _jsx(Spinner, {}) })) : data.length === 0 ? (_jsxs(Stack, { align: "center", justify: "center", gap: "medium", style: { padding: 'var(--gap-3xl)', textAlign: 'center' }, children: [_jsx(Text, { level: "h3", style: { color: 'var(--muted-foreground)' }, children: tCrud('emptyState.title', {
+                    }), 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', {
                                 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, gap: "medium", 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;
+                            }) })] })) : (_jsx(Grid, { cols: cols, children: data.map((item) => {
                         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", gap: "medium", 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.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, }: 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,GAC3B,EAAE,0BAA0B,CAAC,CAAC,CAAC,2CAkM/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, }) {
+    // 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);
@@ -135,7 +139,7 @@ export function EntityDisplayRenderer({ entity, id, t, className = '', backend =
     }
     // Error or not found state
     if (displayError || !displayData) {
-        return (_jsx(Stack, { align: "center", justify: "center", gap: "medium", style: {
+        return (_jsx(Stack, { align: "center", justify: "center", style: {
                 padding: 'var(--gap-3xl)',
                 textAlign: 'center',
             }, className: className, children: _jsxs(Stack, { direction: "column", gap: "tight", children: [_jsx("h3", { style: { color: 'var(--muted-foreground)' }, children: notFoundMessage ||
@@ -149,7 +153,7 @@ export function EntityDisplayRenderer({ entity, id, t, className = '', backend =
                             : String(displayError) }))] }) }));
     }
     // Render all visible fields with values
-    return (_jsx(Stack, { direction: "column", gap: "medium", className: className, children: visibleFields.map(([fieldName, fieldConfig]) => {
+    return (_jsx(Stack, { direction: "column", className: className, children: visibleFields.map(([fieldName, fieldConfig]) => {
             return (_jsx(DisplayFieldRenderer, { name: fieldName, config: fieldConfig, value: displayData[fieldName], t: translate }, fieldName));
         }) }));
 }

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, autoSave, 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,2CA+b5B;AAED,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"EntityFormRenderer.d.ts","sourceRoot":"","sources":["../../../src/crud/components/EntityFormRenderer.tsx"],"names":[],"mappings":"AAuCA,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,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,2CA4c5B;AAED,eAAe,kBAAkB,CAAC"}

package/dist/crud/components/EntityFormRenderer.js

@@ -16,6 +16,7 @@ import { Badge, Button, DropdownMenu, Grid, Stack, Spinner, } from '@donotdev/co
 import { hasRoleAccess, useTranslation } from '@donotdev/core';
 import { useNavigate } from '../../routing';
 import { DisplayFieldRenderer, FormFieldRenderer, UploadProvider, useEntityForm, useUnsavedChangesWarning, useConfirmNavigation, 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', autoSave = operation === '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}`;
@@ -101,12 +105,14 @@ export function EntityFormRenderer({ entity, onSubmit, t, className = '', submit
             return fieldRoleIndex <= previewRoleIndex;
         });
     }, [rawFields, canPreviewRole, previewRole]);
+    // Subscribe to setIsDirty action via React-compatible selector
+    const setFormIsDirty = useFormStore((state) => state.setIsDirty);
     // Sync isDirty to FormStore (single source of truth)
     useEffect(() => {
         if (formId) {
-            useFormStore.getState().setIsDirty(formId, isDirtyForBlocking);
+            setFormIsDirty(formId, isDirtyForBlocking);
         }
-    }, [formId, isDirtyForBlocking]);
+    }, [formId, isDirtyForBlocking, setFormIsDirty]);
     // Cleanup on unmount
     useEffect(() => {
         return cleanup;
@@ -151,22 +157,27 @@ export function EntityFormRenderer({ entity, onSubmit, t, className = '', submit
             }
         }
     };
-    // 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 +285,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":"AAyCA,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,2CA0TjB"}
+{"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

@@ -18,7 +18,7 @@ import { useMemo, useCallback, useState } from 'react';
 import { DataTable, Button, Stack, ActionButton, Section, Input, } from '@donotdev/components';
 import { useTranslation } from '@donotdev/core';
 import { useNavigate } from '../../routing';
-import { translateFieldLabel, useCrud, useCrudList, EntityFilters, matchesFilter, formatValue, } from '@donotdev/crud';
+import { translateFieldLabel, useCrud, useCrudList, EntityFilters, matchesFilter, formatValue, useCrudFilters, } from '@donotdev/crud';
 /**
  * Entity List Component - Table view for admin/internal operations
  *
@@ -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')
@@ -54,8 +54,10 @@ export function EntityList({ entity, userRole = 'guest', basePath, onClick, hide
     const data = listData?.items || [];
     // Entity + crud namespaces so formatValue can resolve crud:price.* etc.
     const { t } = useTranslation([entity.namespace, 'crud']);
-    // Filter state - supports string, number range {min, max}, date range {min, max}
-    const [filters, setFilters] = useState({});
+    // Get filters for applying to data (EntityFilters manages its own state)
+    const { filters } = useCrudFilters({
+        collection: entity.collection,
+    });
     const [searchQuery, setSearchQuery] = useState('');
     // Refresh handler - triggers manual refetch in useList
     const handleRefresh = useCallback(async () => {
@@ -82,10 +84,6 @@ export function EntityList({ entity, userRole = 'guest', basePath, onClick, hide
     const handleDelete = useCallback(async (itemId) => {
         await deleteItem(itemId);
     }, [deleteItem]);
-    // Update filters (for EntityFilters component)
-    const handleFiltersChange = useCallback((newFilters) => {
-        setFilters(newFilters);
-    }, []);
     // Apply search and filters to data
     // @todo Server-side filtering: Currently only handles client-side filtering.
     // When pagination='server', filters should be sent to the server via useCrudList options.
@@ -170,9 +168,9 @@ export function EntityList({ entity, userRole = 'guest', basePath, onClick, hide
     return (_jsxs(_Fragment, { children: [_jsx(Section, { title: tCrud('filters.title', {
                     entity: entityName,
                     defaultValue: `Browse ${entityName} - Filters`,
-                }), collapsible: true, defaultOpen: true, children: _jsxs(Stack, { gap: "medium", children: [_jsxs(Stack, { direction: "row", gap: "tight", align: "center", className: "dndev-w-full", style: { display: 'grid', gridTemplateColumns: '1fr auto auto' }, children: [_jsx(Input, { placeholder: tCrud('search.placeholder', {
+                }), collapsible: true, defaultOpen: true, children: _jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", gap: "tight", align: "center", className: "dndev-w-full", style: { display: 'grid', gridTemplateColumns: '1fr auto auto' }, children: [_jsx(Input, { placeholder: tCrud('search.placeholder', {
                                         defaultValue: 'Search...',
-                                    }), value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), icon: Search, className: "dndev-w-full" }), _jsx(Button, { icon: RefreshCw, variant: "outline", onClick: handleRefresh, disabled: loading, display: "compact", "aria-label": tCrud('refresh', { defaultValue: 'Refresh' }) }), _jsx(Button, { icon: Plus, onClick: handleCreate, display: "compact", children: tCrud('addNew', { defaultValue: 'Add New' }) })] }), !hideFilters && (_jsx(EntityFilters, { entity: entity, data: data, filters: filters, onFiltersChange: handleFiltersChange, fieldsToFilter: entity.listFields }))] }) }), _jsx(Section, { title: loading
+                                    }), value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), icon: Search, className: "dndev-w-full" }), _jsx(Button, { icon: RefreshCw, variant: "outline", onClick: handleRefresh, disabled: loading, display: "compact", "aria-label": tCrud('refresh', { defaultValue: 'Refresh' }) }), _jsx(Button, { icon: Plus, onClick: handleCreate, display: "compact", children: tCrud('addNew', { defaultValue: 'Add New' }) })] }), !hideFilters && (_jsx(EntityFilters, { entity: entity, data: data, fieldsToFilter: entity.listFields }))] }) }), _jsx(Section, { title: loading
                     ? tCrud('results.title.fetching', {
                         defaultValue: 'Fetching...',
                     })

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

@@ -0,0 +1,28 @@
+/**
+ * @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.
+ *
+ * @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;;;;;;;;;;;;;;;GAeG;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,31 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Section } from '@donotdev/components';
+import { useCrudList } from '@donotdev/crud';
+import { CrudCard } from './CrudCardLink';
+/**
+ * Displays a grid of related entity cards.
+ *
+ * @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 } = useCrudList(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))) }));
+}