@donotdev/ui 0.0.11 → 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,23 +1,29 @@
 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: 'narrow' (default, constrained) or 'full' */
+    contentVariant?: 'full' | 'narrow';
     /** Additional className for content wrapper */
     contentClassName?: string;
     /** Additional className for CTA button */
@@ -66,9 +72,21 @@ 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
  */
-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,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,10 +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, 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 = '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/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/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+a5B;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/EntityFormRenderer.js

@@ -13,7 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useMemo, useState } from 'react';
 import { FormProvider } from 'react-hook-form';
 import { Badge, Button, DropdownMenu, Grid, Stack, Spinner, } from '@donotdev/components';
-import { useTranslation } from '@donotdev/core';
+import { hasRoleAccess, useTranslation } from '@donotdev/core';
 import { useNavigate } from '../../routing';
 import { DisplayFieldRenderer, FormFieldRenderer, UploadProvider, useEntityForm, useUnsavedChangesWarning, useConfirmNavigation, useFormStore, } from '@donotdev/crud';
 /**
@@ -34,12 +34,19 @@ export function EntityFormRenderer({ entity, onSubmit, t, className = '', submit
     // Generate stable form ID
     const generatedFormId = useId();
     const formId = externalFormId ?? `entity-form-${entity.name}-${generatedFormId}`;
-    // Use entity name as i18n namespace
-    const { t: translationFn } = useTranslation(entity.namespace);
+    // Entity + crud namespaces so translateLabel can resolve crud:status.* etc.
+    const { t: translationFn } = useTranslation([entity.namespace, 'crud']);
     const { t: tCrud } = useTranslation('crud');
     const translate = t || translationFn;
-    // Preview role state for View As toggle (only used when visibility info is shown)
-    const [previewRole, setPreviewRole] = useState('super');
+    // Visibility badges (developer-facing) are for admins/super only
+    const isAdminOrSuper = viewerRole === 'admin' || viewerRole === 'super';
+    const showVisibilityBadges = !hideVisibilityInfo && isAdminOrSuper;
+    // Preview dropdown (View As) is available for user/admin/super
+    const canPreviewRole = viewerRole === 'user' || viewerRole === 'admin' || viewerRole === 'super';
+    // Preview role state for View As toggle
+    const [previewRole, setPreviewRole] = useState(viewerRole === 'admin' || viewerRole === 'super' || viewerRole === 'user'
+        ? viewerRole
+        : 'guest');
     // Visibility → Badge variant mapping (inline, no separate file needed)
     const visibilityBadgeVariant = {
         guest: 'muted',
@@ -47,6 +54,7 @@ export function EntityFormRenderer({ entity, onSubmit, t, className = '', submit
         admin: 'warning',
         super: 'destructive',
         technical: 'accent',
+        owner: 'secondary',
     };
     // Role hierarchy for filtering (higher index = more access)
     const roleHierarchy = ['guest', 'user', 'admin', 'super'];
@@ -58,12 +66,14 @@ export function EntityFormRenderer({ entity, onSubmit, t, className = '', submit
         super: 'Super',
         technical: 'System',
     };
-    // Preview dropdown menu items
-    const previewMenuItems = useMemo(() => roleHierarchy.map((role) => ({
+    // Preview dropdown menu items (roles current viewer can assume)
+    const previewMenuItems = useMemo(() => roleHierarchy
+        .filter((role) => hasRoleAccess(viewerRole, role))
+        .map((role) => ({
         label: roleLabels[role],
         checked: previewRole === role,
         onClick: () => setPreviewRole(role),
-    })), [previewRole]);
+    })), [previewRole, viewerRole]);
     // useEntityForm handles all orchestration
     const form = useEntityForm(entity, {
         formId,
@@ -73,10 +83,11 @@ export function EntityFormRenderer({ entity, onSubmit, t, className = '', submit
         t: translate,
         autoSave,
     });
-    const { control, handleSubmit, formState: { errors }, fields: rawFields, formStatus, uploadProgress, cleanup, isDirty, resetForm, } = form;
+    const { control, handleSubmit, formState: { errors }, fields: rawFields, formStatus, uploadProgress, cleanup, isDirty, hasUserInteracted, resetForm, } = form;
+    const isDirtyForBlocking = isDirty && hasUserInteracted;
     // Filter fields based on previewRole when visibility info is shown
     const renderableFields = useMemo(() => {
-        if (hideVisibilityInfo)
+        if (!canPreviewRole)
             return rawFields;
         const previewRoleIndex = roleHierarchy.indexOf(previewRole);
         return rawFields.filter(({ config }) => {
@@ -89,13 +100,13 @@ export function EntityFormRenderer({ entity, onSubmit, t, className = '', submit
             const fieldRoleIndex = roleHierarchy.indexOf(fieldVisibility);
             return fieldRoleIndex <= previewRoleIndex;
         });
-    }, [rawFields, hideVisibilityInfo, previewRole]);
+    }, [rawFields, canPreviewRole, previewRole]);
     // Sync isDirty to FormStore (single source of truth)
     useEffect(() => {
         if (formId) {
-            useFormStore.getState().setIsDirty(formId, isDirty);
+            useFormStore.getState().setIsDirty(formId, isDirtyForBlocking);
         }
-    }, [formId, isDirty]);
+    }, [formId, isDirtyForBlocking]);
     // Cleanup on unmount
     useEffect(() => {
         return cleanup;
@@ -112,15 +123,15 @@ export function EntityFormRenderer({ entity, onSubmit, t, className = '', submit
     // Warn about unsaved changes when navigating away (browser refresh/close)
     // SPA navigation blocking is handled by router hooks via FormStore
     useUnsavedChangesWarning({
-        isDirty,
+        isDirty: isDirtyForBlocking,
         enabled: warnOnUnsavedChanges,
         message: unsavedChangesLeaveMessage,
     });
     // Use framework helper for cancel confirmation (DRY, SSR-safe)
-    const confirmNavigation = useConfirmNavigation(isDirty, unsavedChangesDiscardMessage);
+    const confirmNavigation = useConfirmNavigation(isDirtyForBlocking, unsavedChangesDiscardMessage);
     // Handle cancel with confirmation
     const handleCancel = async () => {
-        if (isDirty) {
+        if (isDirtyForBlocking) {
             const confirmed = await confirmNavigation();
             if (!confirmed)
                 return;
@@ -212,8 +223,8 @@ export function EntityFormRenderer({ entity, onSubmit, t, className = '', submit
                     gridColumn: '1 / -1',
                     display: 'contents',
                 }, children: [isLoading && _jsx(Spinner, { overlay: true }), _jsxs("form", { onSubmit: handleSubmit(handleFormSubmit), noValidate: true, className: className, style: { width: '100%', gridColumn: '1 / -1', display: 'contents' }, children: [renderableFields.map(({ name, config, editable }) => {
-                                // Show visibility badge for non-guest fields when visibility info is enabled
-                                const showBadge = !hideVisibilityInfo && config.visibility !== 'guest';
+                                // Show visibility badge for non-guest fields when visibility badges are enabled (admins/super only)
+                                const showBadge = showVisibilityBadges && config.visibility !== 'guest';
                                 const badgeVariant = config.visibility !== 'hidden'
                                     ? visibilityBadgeVariant[config.visibility]
                                     : undefined;
@@ -239,8 +250,8 @@ export function EntityFormRenderer({ entity, onSubmit, t, className = '', submit
                                 if (showCancelButton && cancelButtonText) {
                                     buttons.push(_jsx(Button, { type: "button", onClick: handleCancel, disabled: buttonState.loading, variant: "outline", className: "dndev-w-full", children: cancelButtonText }, "cancel"));
                                 }
-                                // Preview dropdown
-                                if (!hideVisibilityInfo) {
+                                // Preview dropdown (user/admin/super only)
+                                if (canPreviewRole) {
                                     const previewVariant = visibilityBadgeVariant[previewRole] || 'muted';
                                     buttons.push(_jsx(DropdownMenu, { trigger: _jsxs(Button, { type: "button", variant: previewVariant, disabled: buttonState.loading, className: "dndev-w-full", children: [tCrud('visibility.preview', {
                                                     defaultValue: 'Preview',

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, }: EntityListProps): import("react/jsx-runtime").JSX.Element;
+export declare function EntityList({ entity, userRole, 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,GACb,EAAE,eAAe,2CAsTjB"}
+{"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
  *
@@ -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, }) {
+export function EntityList({ entity, userRole = 'guest', 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...',
                     })
@@ -197,5 +195,7 @@ export function EntityList({ entity, userRole = 'guest', basePath, onClick, hide
                         total: listData?.total,
                         onPageChange: setCurrentPage,
                         onPageSizeChange: setServerPageSize,
-                    }) }) })] }));
+                    }), 
+                    // Export functionality
+                    exportable: exportable, exportFilename: `${entity.collection}-export`, exportLabel: tCrud('export', { defaultValue: 'Export' }) }) })] }));
 }

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