@donotdev/ui 0.0.12 → 0.0.13

package/dist/components/common/FeatureCard.js

@@ -56,7 +56,7 @@ const FeatureCard = ({ icon, title, subtitle, content, href, variant, elevated,
         margin: 0,
     };
     // Build title with icon if provided
-    const titleContent = icon ? (_jsxs(Stack, { direction: "row", align: "center", gap: "medium", style: { width: '100%' }, children: [_jsx(IconBox, { icon: icon }), _jsx(Text, { as: "div", level: "h3", style: titleStyle, children: title })] })) : (_jsx(Text, { as: "div", level: "h3", style: titleStyle, children: title }));
+    const titleContent = icon ? (_jsxs(Stack, { direction: "row", align: "center", style: { width: '100%' }, children: [_jsx(IconBox, { icon: icon }), _jsx(Text, { as: "div", level: "h3", style: titleStyle, children: title })] })) : (_jsx(Text, { as: "div", level: "h3", style: titleStyle, children: title }));
     const card = (_jsx(Card, { variant: variant, elevated: elevated, onClick: onClick, className: className, "data-clickable": href || onClick ? 'true' : undefined, style: {
             paddingInlineStart: 'var(--gap-md)',
             paddingInlineEnd: 'var(--gap-md)',

package/dist/components/common/RedirectOverlay.js

@@ -219,7 +219,7 @@ export function RedirectOverlay() {
                     textAlign: 'center',
                     maxWidth: '400px',
                     padding: 'var(--gap-lg)',
-                }, children: [_jsxs(Stack, { direction: "row", gap: "medium", align: "center", children: [IconComponent && (_jsx(IconComponent, { style: {
+                }, children: [_jsxs(Stack, { direction: "row", align: "center", children: [IconComponent && (_jsx(IconComponent, { style: {
                                     width: '1.5rem',
                                     height: '1.5rem',
                                     color: 'var(--primary)',

package/dist/components/cookie-consent/CookieConsent.js

@@ -141,14 +141,14 @@ function CookieConsent({ position = 'bottom', showBranding = true, brandingText
         declineAll();
         setShowBanner(false);
     };
-    const bannerContent = (_jsxs(Stack, { gap: "medium", children: [_jsx(Text, { as: "p", variant: "muted", level: "small", children: t('cookieBannerDescription') }), hasOptionalCategories && (_jsx(Accordion, { type: "single", collapsible: true, value: showPreferences ? 'preferences' : '', onValueChange: (value) => setShowPreferences(value === 'preferences'), items: [
+    const bannerContent = (_jsxs(Stack, { children: [_jsx(Text, { as: "p", variant: "muted", level: "small", children: t('cookieBannerDescription') }), hasOptionalCategories && (_jsx(Accordion, { type: "single", collapsible: true, value: showPreferences ? 'preferences' : '', onValueChange: (value) => setShowPreferences(value === 'preferences'), items: [
                     {
                         value: 'preferences',
                         trigger: (_jsxs(Stack, { direction: "row", align: "center", gap: "tight", children: [_jsx(Settings, { className: "dndev-size-md" }), t('customize')] })),
-                        content: (_jsx(Stack, { gap: "medium", children: categoryDefs.map((cat) => {
+                        content: (_jsx(Stack, { children: categoryDefs.map((cat) => {
                                 const Icon = cat.icon;
                                 const enabled = preferenceCategories[cat.id] ?? false;
-                                return (_jsx(Card, { content: _jsxs(Stack, { direction: "row", align: "center", justify: "between", gap: "medium", children: [_jsxs(Stack, { direction: "row", align: "start", gap: "tight", style: { flex: 1 }, children: [_jsx(Icon, { className: "dndev-size-md", style: {
+                                return (_jsx(Card, { content: _jsxs(Stack, { direction: "row", align: "center", justify: "between", children: [_jsxs(Stack, { direction: "row", align: "start", gap: "tight", style: { flex: 1 }, children: [_jsx(Icon, { className: "dndev-size-md", style: {
                                                             color: 'var(--primary)',
                                                             marginTop: '0.125rem',
                                                         } }), _jsxs(Stack, { gap: "tight", children: [_jsx(Text, { as: "span", level: "body", style: { fontWeight: 600 }, children: cat.title }), _jsx(Text, { as: "span", variant: "muted", level: "small", children: cat.description }), cat.examples && (_jsx(Text, { as: "span", variant: "muted", level: "small", style: { fontStyle: 'italic' }, children: cat.examples }))] })] }), cat.locked ? (_jsx(Text, { as: "span", variant: "muted", level: "small", children: t('alwaysOn') })) : (_jsx(Switch, { checked: enabled, onCheckedChange: (val) => setPreferenceCategories((prev) => ({

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

@@ -1,24 +1,28 @@
 import type { ReactNode } from 'react';
+/**
+ * CTA button definition
+ */
+export interface CTAButton {
+    label: string;
+    onClick: () => void;
+    disabled?: boolean;
+    variant?: 'default' | 'outline' | 'ghost' | 'link';
+}
 /**
  * GameContainer props
  */
 export interface GameContainerProps {
     /** Main content area (scrollable, centered by default) */
     content: ReactNode;
-    /** Optional fixed CTA button at bottom */
-    cta?: {
-        label: string;
-        onClick: () => void;
-        disabled?: boolean;
-        variant?: 'default' | 'outline' | 'ghost' | 'link';
-    };
+    /** Optional fixed CTA button(s) at bottom - single button or array for multiple buttons */
+    cta?: CTAButton | CTAButton[];
     /** Alignment variant for content area */
     align?: 'center' | 'start' | 'stretch';
     /** Justify variant for content area */
     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) */
+    /** Content width: 'narrow' (default, constrained) or 'full' */
     contentVariant?: 'full' | 'narrow';
     /** Additional className for content wrapper */
     contentClassName?: string;
@@ -68,6 +72,18 @@ export interface GameContainerProps {
  * />
  * ```
  *
+ * @example
+ * Multiple CTA buttons (side by side)
+ * ```tsx
+ * <GameContainer
+ *   content={<ChallengeContent />}
+ *   cta={[
+ *     { label: 'Accept', onClick: handleAccept, variant: 'default' },
+ *     { label: 'Decline', onClick: handleDecline, variant: 'outline' }
+ *   ]}
+ * />
+ * ```
+ *
  * @version 0.0.1
  * @since 0.0.1
  * @author AMBROISE PARK Consulting

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,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"}
+{"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,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;CACpD;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,0DAA0D;IAC1D,OAAO,EAAE,SAAS,CAAC;IAEnB,2FAA2F;IAC3F,GAAG,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;IAE9B,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,+DAA+D;IAC/D,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,GAAG,EACH,KAAgB,EAChB,OAAkB,EAClB,iBAAyB,EACzB,cAAyB,EACzB,gBAAgB,EAChB,YAAY,GACb,EAAE,kBAAkB,2CAoEpB"}

package/dist/components/layout/GameContainer.js

@@ -53,11 +53,29 @@ import { cn } from '@donotdev/components';
  * />
  * ```
  *
+ * @example
+ * Multiple CTA buttons (side by side)
+ * ```tsx
+ * <GameContainer
+ *   content={<ChallengeContent />}
+ *   cta={[
+ *     { label: 'Accept', onClick: handleAccept, variant: 'default' },
+ *     { label: 'Decline', onClick: handleDecline, variant: 'outline' }
+ *   ]}
+ * />
+ * ```
+ *
  * @version 0.0.1
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
-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 }) }))] }));
+export function GameContainer({ content, cta, align = 'center', justify = 'center', disableScrollArea = false, contentVariant = 'narrow', contentClassName, ctaClassName, }) {
+    const narrowWrapper = contentVariant === 'narrow' && (_jsx("div", { className: "dndev-game-container__content-narrow", children: content }));
+    const scrollContent = contentVariant === 'narrow' ? narrowWrapper : content;
+    const contentInner = disableScrollArea ? (_jsx("div", { style: {
+            overflow: 'auto',
+            overscrollBehavior: 'contain',
+            height: '100%',
+        }, children: scrollContent })) : (_jsx(ScrollArea, { className: "dndev-game-container__scroll", children: scrollContent }));
+    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: _jsx("div", { className: "dndev-game-container__scroll-wrapper", children: contentInner }) }), cta && (_jsx("div", { className: cn('dndev-game-container__cta', ctaClassName), children: Array.isArray(cta) ? (_jsx("div", { className: "dndev-game-container__cta-buttons", children: cta.map((button, index) => (_jsx(Button, { onClick: button.onClick, disabled: button.disabled ?? false, variant: button.variant ?? 'default', className: "dndev-game-container__cta-button", fullWidth: true, children: button.label }, index))) })) : (_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/GameFlow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GameFlow.d.ts","sourceRoot":"","sources":["../../../src/components/layout/GameFlow.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EAKL,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,MAAM,CACjC,MAAM,EACN,MAAM,OAAO,CAAC;IAAE,OAAO,EAAE,aAAa,CAAC,GAAG,CAAC,CAAA;CAAE,CAAC,CAC/C,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,6DAA6D;IAC7D,cAAc,EAAE,cAAc,CAAC;IAC/B,oCAAoC;IACpC,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,iDAAiD;IACjD,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,iDAAiD;IACjD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAQD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,QAAQ,CAAC,EACvB,cAAc,EACd,aAAa,EACb,UAAU,EACV,QAAe,GAChB,EAAE,aAAa,kDAqCf"}
+{"version":3,"file":"GameFlow.d.ts","sourceRoot":"","sources":["../../../src/components/layout/GameFlow.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EAIL,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,MAAM,CACjC,MAAM,EACN,MAAM,OAAO,CAAC;IAAE,OAAO,EAAE,aAAa,CAAC,GAAG,CAAC,CAAA;CAAE,CAAC,CAC/C,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,6DAA6D;IAC7D,cAAc,EAAE,cAAc,CAAC;IAC/B,oCAAoC;IACpC,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,iDAAiD;IACjD,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,iDAAiD;IACjD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAmCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,QAAQ,CAAC,EACvB,cAAc,EACd,aAAa,EACb,UAAU,EACV,QAAe,GAChB,EAAE,aAAa,kDAgCf"}

package/dist/components/layout/GameFlow.js

@@ -8,12 +8,34 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
-import { useEffect, useMemo, Suspense, lazy, } from 'react';
+import { useEffect, Suspense, lazy, } from 'react';
 /**
  * Module-level cache for preloaded screens
  * Tracks which screens have been preloaded to avoid duplicate preloading
  */
 const preloadedScreens = new Set();
+/**
+ * Module-level cache for lazy components.
+ * CRITICAL: lazy() must NOT be called inside a component (useMemo or otherwise).
+ * Doing so creates a new component TYPE on each call, which causes React to
+ * unmount/remount the entire subtree and can trigger Rules of Hooks violations.
+ * This cache ensures each screen name always resolves to the same lazy component ref.
+ */
+const lazyComponentCache = new Map();
+/**
+ * Get or create a cached lazy component for a screen name
+ */
+function getLazyComponent(screenName, registry) {
+    const cached = lazyComponentCache.get(screenName);
+    if (cached)
+        return cached;
+    const importer = registry[screenName];
+    if (!importer)
+        return null;
+    const component = lazy(importer);
+    lazyComponentCache.set(screenName, component);
+    return component;
+}
 /**
  * GameFlow - Screen router for game/session flows
  *
@@ -59,16 +81,10 @@ export function GameFlow({ screenRegistry, currentScreen, nextScreen, fallback =
             }
         }
     }, [nextScreen, screenRegistry]);
-    // Get lazy component for currentScreen
-    const ScreenComponent = useMemo(() => {
-        if (!currentScreen)
-            return null;
-        const importer = screenRegistry[currentScreen];
-        if (!importer)
-            return null;
-        // Create lazy component from registry
-        return lazy(importer);
-    }, [currentScreen, screenRegistry]);
+    // Get cached lazy component for currentScreen (stable reference per screen name)
+    const ScreenComponent = currentScreen
+        ? getLazyComponent(currentScreen, screenRegistry)
+        : null;
     // If no currentScreen or no component found, return null
     if (!currentScreen || !ScreenComponent) {
         return null;

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

@@ -205,7 +205,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/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":"AAyCA,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,2CA6RrB"}

package/dist/crud/components/EntityCardList.js

@@ -13,12 +13,12 @@ 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 { useNavigate } from '../../routing';
-import { translateFieldLabel, useCrudCardList, EntityFilters, useEntityFavorites, matchesFilter, formatValue, } from '@donotdev/crud';
+import { translateFieldLabel, useCrudCardList, EntityFilters, useEntityFavorites, matchesFilter, formatValue, useCrudFilters, } from '@donotdev/crud';
 /**
  * Entity Card List Component - Card grid view for public/user-facing browsing
  *
@@ -41,9 +41,15 @@ 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 } = useCrudFilters({
+        collection: entity.collection,
+    });
+    // Get filters for applying to data (EntityFilters manages its own state)
+    const { filters } = useCrudFilters({
+        collection: entity.collection,
+    });
     // Apply filters from EntityFilters component
     const applyFilters = useCallback((item) => {
         if (Object.keys(filters).length === 0)
@@ -110,22 +116,22 @@ filter, hideFilters = false, }) {
     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: 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', {
+                    }), 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) => {
+                            }) })] })) : (_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)
@@ -152,7 +158,7 @@ filter, hideFilters = false, }) {
                                         })
                                         : tCrud('favorites.add', {
                                             defaultValue: 'Add to favorites',
-                                        }) }), _jsxs(Stack, { direction: "column", gap: "medium", children: [imageUrl && (_jsx("div", { style: {
+                                        }) }), _jsxs(Stack, { direction: "column", children: [imageUrl && (_jsx("div", { style: {
                                                 width: '100%',
                                                 aspectRatio: '16/9',
                                                 borderRadius: 'var(--radius-md)',

package/dist/crud/components/EntityDisplayRenderer.js

@@ -135,7 +135,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 +149,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.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":"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"}

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,QAAkB,EAClB,QAAQ,EACR,OAAO,EACP,WAAmB,EACnB,UAAqB,EACrB,QAAQ,EAAE,YAAY,EACtB,YAAY,EACZ,UAAiB,GAClB,EAAE,eAAe,2CAkTjB"}

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
  *
@@ -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/Form.js

@@ -64,7 +64,7 @@ const FormItemContext = createContext({});
  */
 const FormItem = ({ className, ...props }) => {
     const id = useId();
-    return (_jsx(FormItemContext.Provider, { value: { id }, children: _jsx(Stack, { gap: "medium", className: className, ...props }) }));
+    return (_jsx(FormItemContext.Provider, { value: { id }, children: _jsx(Stack, { className: className, ...props }) }));
 };
 /**
  * Hook for accessing form field context