@donotdev/ui 0.0.10 → 0.0.12

package/dist/components/layout/GameContainer.d.ts

@@ -18,6 +18,8 @@ export interface GameContainerProps {
     justify?: 'center' | 'start' | 'end' | 'between';
     /** Disable ScrollArea (use plain overflow) - for interactive content */
     disableScrollArea?: boolean;
+    /** Content width: 'full' (default) or 'narrow' (constrained by --narrow-content-max) */
+    contentVariant?: 'full' | 'narrow';
     /** Additional className for content wrapper */
     contentClassName?: string;
     /** Additional className for CTA button */
@@ -70,5 +72,5 @@ export interface GameContainerProps {
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
-export declare function GameContainer({ content, cta, align, justify, disableScrollArea, contentClassName, ctaClassName, }: GameContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function GameContainer({ content, cta, align, justify, disableScrollArea, contentVariant, contentClassName, ctaClassName, }: GameContainerProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=GameContainer.d.ts.map

package/dist/components/layout/GameContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GameContainer.d.ts","sourceRoot":"","sources":["../../../src/components/layout/GameContainer.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,0DAA0D;IAC1D,OAAO,EAAE,SAAS,CAAC;IAEnB,0CAA0C;IAC1C,GAAG,CAAC,EAAE;QACJ,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,IAAI,CAAC;QACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;KACpD,CAAC;IAEF,yCAAyC;IACzC,KAAK,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;IAEvC,uCAAuC;IACvC,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,SAAS,CAAC;IAEjD,wEAAwE;IACxE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,GAAG,EACH,KAAgB,EAChB,OAAkB,EAClB,iBAAyB,EACzB,gBAAgB,EAChB,YAAY,GACb,EAAE,kBAAkB,2CAmCpB"}
+{"version":3,"file":"GameContainer.d.ts","sourceRoot":"","sources":["../../../src/components/layout/GameContainer.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,0DAA0D;IAC1D,OAAO,EAAE,SAAS,CAAC;IAEnB,0CAA0C;IAC1C,GAAG,CAAC,EAAE;QACJ,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,IAAI,CAAC;QACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;KACpD,CAAC;IAEF,yCAAyC;IACzC,KAAK,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;IAEvC,uCAAuC;IACvC,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,SAAS,CAAC;IAEjD,wEAAwE;IACxE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B,wFAAwF;IACxF,cAAc,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAEnC,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,GAAG,EACH,KAAgB,EAChB,OAAkB,EAClB,iBAAyB,EACzB,cAAuB,EACvB,gBAAgB,EAChB,YAAY,GACb,EAAE,kBAAkB,2CA0CpB"}

package/dist/components/layout/GameContainer.js

@@ -57,6 +57,7 @@ import { cn } from '@donotdev/components';
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
-export function GameContainer({ content, cta, align = 'center', justify = 'center', disableScrollArea = false, contentClassName, ctaClassName, }) {
-    return (_jsxs("div", { className: "dndev-game-container", children: [_jsx("div", { className: cn('dndev-game-container__content', contentClassName), "data-align": align, "data-justify": justify, children: disableScrollArea ? (_jsx("div", { style: { overflow: 'auto', overscrollBehavior: 'contain' }, children: content })) : (_jsx(ScrollArea, { className: "dndev-game-container__scroll", children: content })) }), cta && (_jsx("div", { className: cn('dndev-game-container__cta', ctaClassName), children: _jsx(Button, { onClick: cta.onClick, disabled: cta.disabled ?? false, variant: cta.variant ?? 'default', className: "dndev-game-container__cta-button", children: cta.label }) }))] }));
+export function GameContainer({ content, cta, align = 'center', justify = 'center', disableScrollArea = false, contentVariant = 'full', contentClassName, ctaClassName, }) {
+    const contentInner = disableScrollArea ? (_jsx("div", { style: { overflow: 'auto', overscrollBehavior: 'contain' }, children: content })) : (_jsx(ScrollArea, { className: "dndev-game-container__scroll", children: content }));
+    return (_jsxs("div", { className: "dndev-game-container", children: [_jsx("div", { className: cn('dndev-game-container__content', contentClassName), "data-align": align, "data-justify": justify, "data-content-variant": contentVariant, children: contentVariant === 'narrow' ? (_jsx("div", { className: "dndev-game-container__content-narrow", children: contentInner })) : (contentInner) }), cta && (_jsx("div", { className: cn('dndev-game-container__cta', ctaClassName), children: _jsx(Button, { onClick: cta.onClick, disabled: cta.disabled ?? false, variant: cta.variant ?? 'default', className: "dndev-game-container__cta-button", children: cta.label }) }))] }));
 }

package/dist/components/layout/PageContainer.d.ts

@@ -3,7 +3,7 @@ import type { ComponentType, ReactNode } from 'react';
 /**
  * Page container variants - semantic layout patterns
  */
-export type PageContainerVariant = 'full' | 'standard' | 'docs' | 'fixed';
+export type PageContainerVariant = 'full' | 'standard' | 'docs' | 'narrow' | 'fixed';
 /**
  * PageContainer component props
  */

package/dist/components/layout/PageContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageContainer.d.ts","sourceRoot":"","sources":["../../../src/components/layout/PageContainer.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAK9C,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAC5B,MAAM,GACN,UAAU,GACV,MAAM,GACN,OAAO,CAAC;AAEZ;;GAEG;AACH,UAAU,kBAAkB;IAC1B,4BAA4B;IAC5B,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAE/B,uDAAuD;IACvD,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,oBAAoB;IACpB,QAAQ,EAAE,SAAS,CAAC;IAEpB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,aAAa,EAAE,aAAa,CAAC,kBAAkB,CA4B3D,CAAC"}
+{"version":3,"file":"PageContainer.d.ts","sourceRoot":"","sources":["../../../src/components/layout/PageContainer.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAK9C,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAC5B,MAAM,GACN,UAAU,GACV,MAAM,GACN,QAAQ,GACR,OAAO,CAAC;AAEZ;;GAEG;AACH,UAAU,kBAAkB;IAC1B,4BAA4B;IAC5B,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAE/B,uDAAuD;IACvD,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,oBAAoB;IACpB,QAAQ,EAAE,SAAS,CAAC;IAEpB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,aAAa,EAAE,aAAa,CAAC,kBAAkB,CA4B3D,CAAC"}

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

@@ -0,0 +1,16 @@
+import type { EntityCardListProps } from '@donotdev/core';
+export type { EntityCardListProps };
+/**
+ * Entity Card List Component - Card grid view for public/user-facing browsing
+ *
+ * Features:
+ * - Responsive card grid layout
+ * - Image + key fields display
+ * - Click card to navigate to detail
+ * - Simple formatted text display (labels + values)
+ * - Empty state handling
+ * - Auto-routing when handler not provided
+ */
+export declare function EntityCardList({ entity, basePath, onClick, cols, staleTime, // 30 minutes default cache
+filter, hideFilters, }: EntityCardListProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=EntityCardList.d.ts.map

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

@@ -0,0 +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"}

package/dist/crud/components/EntityCardList.js

@@ -0,0 +1,175 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// packages/ui/src/crud/components/EntityCardList.tsx
+/**
+ * @fileoverview Entity Card List Component
+ * @description Card grid view for public/user-facing entity browsing.
+ * Features: Responsive grid of cards with images, key fields, and navigation to detail pages.
+ *
+ * **Routing:** Convention basePath = `/${collection}`. View = basePath/:id.
+ * Override basePath for nested routes; use onClick(id) to open sheet instead of navigating.
+ *
+ * @version 0.2.0
+ * @since 0.0.1
+ * @author AMBROISE PARK Consulting
+ */
+import { useMemo, useCallback, useState } from 'react';
+import { Heart } from 'lucide-react';
+import { Grid, Card, Stack, Text, Spinner, Section, Button, } from '@donotdev/components';
+import { useTranslation } from '@donotdev/core';
+import { useNavigate } from '../../routing';
+import { translateFieldLabel, useCrudCardList, EntityFilters, useEntityFavorites, matchesFilter, formatValue, } from '@donotdev/crud';
+/**
+ * Entity Card List Component - Card grid view for public/user-facing browsing
+ *
+ * Features:
+ * - Responsive card grid layout
+ * - Image + key fields display
+ * - Click card to navigate to detail
+ * - Simple formatted text display (labels + values)
+ * - Empty state handling
+ * - 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, }) {
+    const navigate = useNavigate();
+    const base = basePath ?? `/${entity.collection}`;
+    // useCrudCardList -> handles fetching optimized for cards automatically
+    const { data: listData, loading } = useCrudCardList(entity, { staleTime });
+    const rawData = listData?.items || [];
+    // Favorites - always enabled, no props needed
+    const { isFavorite, toggleFavorite, favoritesFilter } = useEntityFavorites({
+        collection: entity.collection,
+    });
+    const [showFavoritesOnly, setShowFavoritesOnly] = useState(false);
+    // Filter state
+    const [filters, setFilters] = useState({});
+    // Apply filters from EntityFilters component
+    const applyFilters = useCallback((item) => {
+        if (Object.keys(filters).length === 0)
+            return true;
+        return Object.entries(filters).every(([fieldName, filterValue]) => {
+            const itemValue = item[fieldName];
+            const fieldConfig = entity.fields[fieldName];
+            const fieldType = fieldConfig?.type || 'text';
+            return matchesFilter(itemValue, filterValue, fieldType);
+        });
+    }, [filters, entity.fields]);
+    // Apply client-side filtering (including favorites)
+    const data = useMemo(() => {
+        let result = rawData;
+        result = result.filter(applyFilters);
+        // Apply favorites filter if enabled
+        if (showFavoritesOnly) {
+            result = result.filter(favoritesFilter);
+        }
+        if (filter) {
+            result = result.filter(filter);
+        }
+        return result;
+    }, [rawData, applyFilters, showFavoritesOnly, favoritesFilter, filter]);
+    // Entity + crud namespaces so formatValue can resolve crud:price.* etc.
+    const { t } = useTranslation([entity.namespace, 'crud']);
+    const { t: tCrud } = useTranslation('crud');
+    // Card click: onClick(id) if provided, else navigate to basePath/:id
+    const handleView = useCallback((id) => {
+        if (onClick) {
+            onClick(id);
+        }
+        else {
+            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]);
+    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
+                                ? 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
+                    ? 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', {
+                                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;
+                        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));
+                    }) })) })] }));
+}

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

@@ -1,29 +1,21 @@
-import type { EntityField } from '@donotdev/core';
-interface EntityDisplayRendererProps<T extends Record<string, any> = any> {
-    /** Entity definition with field configs */
-    entity: Record<string, EntityField>;
-    /** Entity data to display */
-    data: T;
-    /** Translation function */
-    t?: (key: string, options?: Record<string, any>) => string;
-    /** Additional CSS classes */
-    className?: string;
-    /** Whether data is loading */
-    loading?: boolean;
-}
+import type { EntityDisplayRendererProps, EntityRecord } from '@donotdev/core';
+export type { EntityDisplayRendererProps };
 /**
- * EntityDisplayRenderer - High-level component that renders read-only display from an entity definition
+ * EntityDisplayRenderer - Automatically fetches and displays entity data
  *
  * Features:
- * - Loops through entity fields and renders each with DisplayFieldRenderer
- * - Automatic loading states
+ * - Automatic data fetching using useCrud
+ * - Loading state handling
+ * - Error handling
+ * - Automatic field rendering (respects visibility rules)
  * - Full i18n support
- * - Consistent styling
+ * - No form/submit buttons - pure read-only display
  *
- * @version 0.0.1
- * @since 0.0.1
- * @author AMBROISE PARK Consulting
+ * @example
+ * ```tsx
+ * <EntityDisplayRenderer entity={carEntity} id={carId} />
+ * ```
  */
-export declare function EntityDisplayRenderer<T extends Record<string, any> = any>({ entity, data, t, className, loading, }: EntityDisplayRendererProps<T>): import("react/jsx-runtime").JSX.Element;
+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 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":"AAcA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAIlD,UAAU,0BAA0B,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG;IACtE,2CAA2C;IAC3C,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACpC,6BAA6B;IAC7B,IAAI,EAAE,CAAC,CAAC;IACR,2BAA2B;IAC3B,CAAC,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,MAAM,CAAC;IAC3D,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,EACzE,MAAM,EACN,IAAI,EACJ,CAAC,EACD,SAAc,EACd,OAAe,GAChB,EAAE,0BAA0B,CAAC,CAAC,CAAC,2CAyC/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;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"}

package/dist/crud/components/EntityDisplayRenderer.js

@@ -3,39 +3,154 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // packages/ui/src/crud/components/EntityDisplayRenderer.tsx
 /**
  * @fileoverview EntityDisplayRenderer component
- * @description High-level component that renders read-only display from an entity definition
+ * @description High-level component that automatically fetches and displays entity data in read-only mode.
+ * Perfect for detail/view pages - just pass the entity and it handles everything.
  *
- * @version 0.0.1
+ * @version 0.0.2
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
-import { Stack } from '@donotdev/components';
-import { useTranslation } from '@donotdev/core';
-import { DisplayFieldRenderer } from './DisplayFieldRenderer';
+import { useEffect, useState, useMemo } from 'react';
+import { Stack, Spinner } from '@donotdev/components';
+import { useTranslation, isFieldVisible } from '@donotdev/core';
+import { useCrud, DisplayFieldRenderer } from '@donotdev/crud';
 /**
- * EntityDisplayRenderer - High-level component that renders read-only display from an entity definition
+ * EntityDisplayRenderer - Automatically fetches and displays entity data
  *
  * Features:
- * - Loops through entity fields and renders each with DisplayFieldRenderer
- * - Automatic loading states
+ * - Automatic data fetching using useCrud
+ * - Loading state handling
+ * - Error handling
+ * - Automatic field rendering (respects visibility rules)
  * - Full i18n support
- * - Consistent styling
+ * - No form/submit buttons - pure read-only display
  *
- * @version 0.0.1
- * @since 0.0.1
- * @author AMBROISE PARK Consulting
+ * @example
+ * ```tsx
+ * <EntityDisplayRenderer entity={carEntity} id={carId} />
+ * ```
  */
-export function EntityDisplayRenderer({ entity, data, t, className = '', loading = false, }) {
-    const { t: translationFn } = useTranslation('dndev');
-    const translate = t || translationFn;
-    const entityFields = Object.entries(entity);
-    if (loading) {
-        return (_jsx(Stack, { gap: "medium", className: className, children: entityFields.map(([fieldName]) => (_jsxs("div", { className: "dndev-animate-pulse", children: [_jsx("div", { style: {
-                            marginBottom: 'var(--gap-sm)',
-                            height: '1rem',
-                            width: '25%',
-                        } }), _jsx("div", { style: { height: '2rem', backgroundColor: 'var(--muted)' } })] }, fieldName))) }));
+export function EntityDisplayRenderer({ entity, id, t, className = '', backend = 'functions', loadingMessage, notFoundMessage, viewerRole = 'guest', }) {
+    const { get, loading, data: storeData, error: storeError, isAvailable, } = useCrud(entity, { backend });
+    const [isFetching, setIsFetching] = useState(false);
+    const [fetchError, setFetchError] = useState(null);
+    const [data, setData] = useState(null);
+    // Entity + crud namespaces so formatValue can resolve crud:price.* etc.
+    const { t: tDual } = useTranslation([entity.namespace, 'crud']);
+    const { t: tCrud } = useTranslation('crud');
+    const translate = t || tDual;
+    // Fetch data when id is available and service is ready
+    useEffect(() => {
+        // Early return if no ID
+        if (!id) {
+            setData(null);
+            setFetchError(null);
+            setIsFetching(false);
+            return;
+        }
+        // Early return if service not ready
+        if (!isAvailable || !get) {
+            return;
+        }
+        let cancelled = false;
+        setIsFetching(true);
+        setFetchError(null);
+        // Call get function - it should trigger the fetch
+        get(id)
+            .then((fetchedData) => {
+            if (cancelled)
+                return;
+            setIsFetching(false);
+            if (fetchedData) {
+                setData(fetchedData);
+                setFetchError(null);
+            }
+            else {
+                setData(null);
+                setFetchError(new Error('Entity not found'));
+            }
+        })
+            .catch((err) => {
+            if (cancelled)
+                return;
+            setIsFetching(false);
+            setFetchError(err instanceof Error ? err : new Error(String(err)));
+            setData(null);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [id, get, isAvailable]);
+    // Use store data if available, otherwise use local state
+    const displayData = storeData || data;
+    const displayError = storeError || fetchError;
+    const isLoading = loading || isFetching || !id;
+    // Filter fields: respect visibility AND skip empty values
+    // MUST be called before any early returns (Rules of Hooks)
+    const visibleFields = useMemo(() => {
+        if (!displayData)
+            return [];
+        return Object.entries(entity.fields).filter(([fieldName, fieldConfig]) => {
+            // Check visibility first
+            if (!isFieldVisible(fieldConfig.visibility, viewerRole)) {
+                return false;
+            }
+            // Skip hidden fields
+            if (fieldConfig.visibility === 'hidden') {
+                return false;
+            }
+            // Get field value
+            const value = displayData[fieldName];
+            // Hide if value is empty/null/undefined
+            if (value === null || value === undefined) {
+                return false;
+            }
+            // Hide empty strings
+            if (typeof value === 'string' && value.trim() === '') {
+                return false;
+            }
+            // Hide empty arrays
+            if (Array.isArray(value) && value.length === 0) {
+                return false;
+            }
+            // Hide empty objects (but allow objects with properties)
+            if (typeof value === 'object' &&
+                !Array.isArray(value) &&
+                value !== null &&
+                Object.keys(value).length === 0) {
+                return false;
+            }
+            return true;
+        });
+    }, [entity.fields, viewerRole, displayData]);
+    // Loading state
+    if (isLoading) {
+        return (_jsx("div", { style: {
+                position: 'relative',
+                width: '100%',
+                gridColumn: '1 / -1',
+                display: 'contents',
+            }, className: className, children: _jsx(Spinner, { overlay: true, "aria-label": loadingMessage ||
+                    tCrud('form.loading', { defaultValue: 'Loading...' }) }) }));
+    }
+    // Error or not found state
+    if (displayError || !displayData) {
+        return (_jsx(Stack, { align: "center", justify: "center", gap: "medium", 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 ||
+                            tCrud('errors.notFound', {
+                                defaultValue: `${entity.name} not found`,
+                            }) }), displayError && (_jsx("p", { style: {
+                            color: 'var(--destructive)',
+                            fontSize: 'var(--font-size-sm)',
+                        }, children: displayError instanceof Error
+                            ? displayError.message
+                            : String(displayError) }))] }) }));
     }
-    return (_jsx(Stack, { gap: "medium", className: className, children: entityFields.map(([fieldName, fieldConfig]) => (_jsx(DisplayFieldRenderer, { name: fieldName, config: fieldConfig, value: data[fieldName], t: translate }, fieldName))) }));
+    // Render all visible fields with values
+    return (_jsx(Stack, { direction: "column", gap: "medium", className: className, children: visibleFields.map(([fieldName, fieldConfig]) => {
+            return (_jsx(DisplayFieldRenderer, { name: fieldName, config: fieldConfig, value: displayData[fieldName], t: translate }, fieldName));
+        }) }));
 }
 export default EntityDisplayRenderer;

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

@@ -0,0 +1,18 @@
+import type { EntityFormRendererProps, EntityRecord } from '@donotdev/core';
+export type { EntityFormRendererProps };
+/**
+ * EntityFormRenderer - Dumb component that renders a form from entity definition.
+ *
+ * All orchestration (uploads, validation, status tracking) is handled by useEntityForm.
+ * This component just:
+ * - Generates formId
+ * - Renders fields
+ * - Renders submit button with status from useEntityForm
+ *
+ * @version 0.0.7
+ * @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 default EntityFormRenderer;
+//# sourceMappingURL=EntityFormRenderer.d.ts.map

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

@@ -0,0 +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"}