@donotdev/ui 0.0.6 → 0.0.8

package/assets/fonts/fonts.css

@@ -4,7 +4,7 @@
   font-family: Roboto;
   font-style: normal;
   font-weight: 400;
-  font-display: optional;
+  font-display: swap;
   src: url('/fonts/Roboto-400-latin.woff2') format('woff2');
   unicode-range: U+0000-00FF; /* Basic Latin - loads first for performance */
 }
@@ -13,7 +13,7 @@
   font-family: Roboto;
   font-style: normal;
   font-weight: 700;
-  font-display: optional;
+  font-display: swap;
   src: url('/fonts/Roboto-700-latin.woff2') format('woff2');
   unicode-range: U+0000-00FF; /* Basic Latin - loads first for performance */
 }
@@ -153,7 +153,7 @@
   font-family: Inter;
   font-style: normal;
   font-weight: 400 700;
-  font-display: optional;
+  font-display: swap; /* Changed from optional to swap - we preload this font */
   src: url('/fonts/Inter-latin.woff2') format('woff2');
   unicode-range:
     U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
@@ -184,7 +184,7 @@
   font-family: 'Playfair Display';
   font-style: normal;
   font-weight: 400 700;
-  font-display: optional;
+  font-display: swap;
   src: url('/fonts/PlayfairDisplay-latin.woff2') format('woff2');
   unicode-range:
     U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,

package/dist/components/auth/AuthHeader.d.ts

@@ -1,3 +1,4 @@
+import { type CSSProperties } from 'react';
 import { DISPLAY } from '@donotdev/components';
 import type { ComponentType } from 'react';
 /**
@@ -46,6 +47,10 @@ export interface AuthHeaderProps {
      * @default 'auto'
      */
     display?: (typeof DISPLAY)[keyof typeof DISPLAY];
+    /** Optional className for styling the button */
+    className?: string;
+    /** Optional inline styles for the button */
+    style?: CSSProperties;
 }
 /**
  * Auth header component

package/dist/components/auth/AuthHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AuthHeader.d.ts","sourceRoot":"","sources":["../../../src/components/auth/AuthHeader.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAIL,OAAO,EACR,MAAM,sBAAsB,CAAC;AAU9B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAyB3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,WAAW,eAAe;IAC9B;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,OAAO,OAAO,CAAC,CAAC;CAClD;AAED;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,EAAE,aAAa,CAAC,eAAe,CA0FrD,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"AuthHeader.d.ts","sourceRoot":"","sources":["../../../src/components/auth/AuthHeader.tsx"],"names":[],"mappings":"AAcA,OAAc,EAA4B,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAE5E,OAAO,EAKL,OAAO,EACR,MAAM,sBAAsB,CAAC;AAU9B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAyB3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,WAAW,eAAe;IAC9B;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,OAAO,OAAO,CAAC,CAAC;IACjD,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,EAAE,aAAa,CAAC,eAAe,CA4IrD,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/auth/AuthHeader.js

@@ -10,8 +10,8 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { User } from 'lucide-react';
-import React, { Suspense, lazy } from 'react';
-import { Button, BUTTON_VARIANT, DropdownMenu, DISPLAY, } from '@donotdev/components';
+import React, { Suspense, lazy, useState } from 'react';
+import { Button, BUTTON_VARIANT, DropdownMenu, Dialog, DISPLAY, } from '@donotdev/components';
 import { useTranslation } from '@donotdev/core';
 import { useAuthConfig } from '@donotdev/core';
 import { getEnabledAuthPartners } from '@donotdev/core';
@@ -47,34 +47,48 @@ const MultipleAuthProviders = lazy(async () => {
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
-export const AuthHeader = ({ display = DISPLAY.AUTO, }) => {
+export const AuthHeader = ({ display = DISPLAY.AUTO, className, style, }) => {
     const { t } = useTranslation('dndev');
     const { shouldHide, isLoading, isReady, isAuthenticated } = useAuthVisibility();
     const authConfig = useAuthConfig();
     const enabled = getEnabledAuthPartners();
+    const [dialogOpen, setDialogOpen] = useState(false);
     const loginPath = authConfig.loginPath;
     const signInLabel = t('auth.signIn', { defaultValue: 'Sign In' });
     const loadingLabel = t('auth.loading', { defaultValue: 'Loading...' });
+    const hasPasswordProvider = enabled.includes('password') || enabled.includes('emailLink');
     if (shouldHide || !isReady) {
         return null;
     }
+    // Local component for Sign In button (DRY)
+    const SignInButton = ({ children, ...props }) => (_jsx(Button, { variant: BUTTON_VARIANT.OUTLINE, icon: User, display: display, tooltip: signInLabel, className: className, style: style, ...props, children: children ?? signInLabel }));
     // NOT AUTHENTICATED
     // Button's display prop + CSS container queries handle responsive label visibility
     if (!isAuthenticated) {
         if (loginPath !== undefined) {
-            return (_jsx(Link, { path: loginPath, prefetch: true, children: _jsx(Button, { variant: BUTTON_VARIANT.GHOST, icon: User, display: display, tooltip: signInLabel, children: signInLabel }) }));
+            return (_jsx(Link, { path: loginPath, prefetch: true, children: _jsx(SignInButton, {}) }));
         }
+        const targetProvider = enabled[0];
+        // Use Dialog if password/emailLink provider is present (better UX for forms)
+        if (hasPasswordProvider) {
+            return (_jsx(Dialog, { trigger: _jsx(SignInButton, {}), title: signInLabel, open: dialogOpen, onOpenChange: setDialogOpen, "data-content-size": "form", children: _jsx(Suspense, { fallback: _jsx("div", { style: {
+                            padding: 'var(--gap-md)',
+                            fontSize: 'var(--font-size-sm)',
+                            color: 'var(--muted-foreground)',
+                        }, children: loadingLabel }), children: _jsx(MultipleAuthProviders, { spacing: "medium", onSuccess: () => setDialogOpen(false) }) }) }));
+        }
+        // Use DropdownMenu if multiple OAuth providers (no password/emailLink)
         if (enabled.length > 1) {
-            return (_jsx(DropdownMenu, { trigger: _jsx(Button, { variant: BUTTON_VARIANT.GHOST, icon: User, display: display, tooltip: signInLabel, children: signInLabel }), children: _jsx(Suspense, { fallback: _jsx("div", { style: {
+            return (_jsx(DropdownMenu, { trigger: _jsx(SignInButton, {}), children: _jsx(Suspense, { fallback: _jsx("div", { style: {
                             padding: 'var(--gap-md)',
                             fontSize: 'var(--font-size-sm)',
                             color: 'var(--muted-foreground)',
                         }, children: loadingLabel }), children: _jsx(MultipleAuthProviders, { spacing: "tight" }) }) }));
         }
-        const targetProvider = enabled[0];
-        return (_jsx(Suspense, { fallback: _jsx(Button, { variant: BUTTON_VARIANT.GHOST, icon: User, display: display, disabled: isLoading, tooltip: isLoading ? loadingLabel : signInLabel, children: isLoading ? loadingLabel : signInLabel }), children: _jsx(AuthPartnerButton, { partnerId: targetProvider, display: display }) }));
+        // Normal case: single non-password provider → use AuthPartnerButton directly
+        return (_jsx(Suspense, { fallback: _jsx(SignInButton, { disabled: isLoading, tooltip: isLoading ? loadingLabel : signInLabel, children: isLoading ? loadingLabel : signInLabel }), children: _jsx(AuthPartnerButton, { partnerId: targetProvider, display: display, className: className, style: style }) }));
     }
     // AUTHENTICATED - Delegate to AuthMenu
-    return _jsx(AuthMenu, { display: display, loginPath: loginPath });
+    return (_jsx(AuthMenu, { display: display, loginPath: loginPath, className: className, style: style }));
 };
 export default AuthHeader;

package/dist/components/auth/AuthMenu.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type CSSProperties } from 'react';
 import { DISPLAY } from '@donotdev/components';
 import type { ComponentType } from 'react';
 /**
@@ -53,7 +53,11 @@ export interface AuthMenuProps {
      * Order: Profile (if configured) → authMenuItems → customItems → Delete Account → Sign Out
      */
     customItems?: AuthMenuCustomItem[];
+    /** Optional className for styling the button */
+    className?: string;
+    /** Optional inline styles for the button */
+    style?: CSSProperties;
 }
-export declare const AuthMenu: ({ loginPath, display, "no-tooltip": noTooltip, customItems, }: AuthMenuProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const AuthMenu: ({ loginPath, display, "no-tooltip": noTooltip, customItems, className, style, }: AuthMenuProps) => import("react/jsx-runtime").JSX.Element | null;
 export default AuthMenu;
 //# sourceMappingURL=AuthMenu.d.ts.map

package/dist/components/auth/AuthMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AuthMenu.d.ts","sourceRoot":"","sources":["../../../src/components/auth/AuthMenu.tsx"],"names":[],"mappings":"AA4EA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAEvD,OAAO,EAML,OAAO,EACR,MAAM,sBAAsB,CAAC;AAc9B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAqE3C;;;;;;;;;GASG;AACH,MAAM,WAAW,kBAAkB;IACjC,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACtD,6DAA6D;IAC7D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED;;;;;;GAMG;AACH,MAAM,WAAW,aAAa;IAC5B,qFAAqF;IACrF,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,OAAO,OAAO,CAAC,CAAC;IAEjD,sBAAsB;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IACH,WAAW,CAAC,EAAE,kBAAkB,EAAE,CAAC;CACpC;AAsBD,eAAO,MAAM,QAAQ,GAAI,+DAKtB,aAAa,mDAwOf,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"AuthMenu.d.ts","sourceRoot":"","sources":["../../../src/components/auth/AuthMenu.tsx"],"names":[],"mappings":"AA4EA,OAAO,KAAK,EAAE,EAA2B,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3E,OAAO,EAML,OAAO,EACR,MAAM,sBAAsB,CAAC;AAc9B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAqE3C;;;;;;;;;GASG;AACH,MAAM,WAAW,kBAAkB;IACjC,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACtD,6DAA6D;IAC7D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED;;;;;;GAMG;AACH,MAAM,WAAW,aAAa;IAC5B,qFAAqF;IACrF,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,OAAO,OAAO,CAAC,CAAC;IAEjD,sBAAsB;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IACH,WAAW,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAEnC,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAsBD,eAAO,MAAM,QAAQ,GAAI,iFAOtB,aAAa,mDA0Of,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/auth/AuthMenu.js

@@ -154,7 +154,7 @@ const getIcon = (iconName) => {
     const cleanIconName = iconName.replace(/['"]/g, '');
     return LucideIcons[cleanIconName] || Settings;
 };
-export const AuthMenu = ({ loginPath, display = DISPLAY.AUTO, 'no-tooltip': noTooltip = false, customItems = [], }) => {
+export const AuthMenu = ({ loginPath, display = DISPLAY.AUTO, 'no-tooltip': noTooltip = false, customItems = [], className, style, }) => {
     const { t } = useTranslation('dndev');
     const { shouldHide, isReady, isAuthenticated } = useAuthVisibility();
     const authConfig = useAuthConfig();
@@ -312,6 +312,6 @@ export const AuthMenu = ({ loginPath, display = DISPLAY.AUTO, 'no-tooltip': noTo
                         ? getUserTooltip()
                         : !noTooltip
                             ? t('auth.userMenu', { defaultValue: 'User menu' })
-                            : undefined, children: getUserDisplayName() }), items: menuItems, contentAlign: "end" })] }));
+                            : undefined, className: className, style: style, children: getUserDisplayName() }), items: menuItems, contentAlign: "end" })] }));
 };
 export default AuthMenu;

package/dist/components/common/RedirectOverlay.d.ts

@@ -0,0 +1,37 @@
+/**
+ * RedirectOverlay - Industry-standard redirect overlay with phase progression
+ *
+ * Features:
+ * - Phase-based progress: connecting → preparing → redirecting → timeout
+ * - Cancel button appears after 10s (configurable)
+ * - i18n support with operation-specific messaging
+ * - Browser event handling (popstate, visibilitychange)
+ * - Accessible (ARIA labels, role="status")
+ * - RTL-safe styling
+ *
+ * @example
+ * ```tsx
+ * // Include once in app root (layout.tsx or App.tsx)
+ * import { RedirectOverlay } from '@donotdev/ui';
+ *
+ * function RootLayout({ children }) {
+ *   return (
+ *     <>
+ *       {children}
+ *       <RedirectOverlay />
+ *     </>
+ *   );
+ * }
+ *
+ * // Hooks trigger it automatically
+ * const checkout = useStripeBilling('checkout', authState);
+ * await checkout({ priceId: 'price_123' }); // Shows overlay automatically
+ * ```
+ *
+ * @version 0.0.1
+ * @since 0.0.1
+ * @author AMBROISE PARK Consulting
+ */
+export declare function RedirectOverlay(): import("react/jsx-runtime").JSX.Element | null;
+export default RedirectOverlay;
+//# sourceMappingURL=RedirectOverlay.d.ts.map

package/dist/components/common/RedirectOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RedirectOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/common/RedirectOverlay.tsx"],"names":[],"mappings":"AAoEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,eAAe,mDA+P9B;AAED,eAAe,eAAe,CAAC"}

package/dist/components/common/RedirectOverlay.js

@@ -0,0 +1,243 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// packages/ui/src/components/common/RedirectOverlay.tsx
+/**
+ * @fileoverview RedirectOverlay component
+ * @description Industry-standard fullscreen overlay for redirect operations (payments, OAuth, etc.).
+ * Features phase-based progress, 10s cancel timeout, i18n support, and browser event handling.
+ *
+ * @version 0.0.1
+ * @since 0.0.1
+ * @author AMBROISE PARK Consulting
+ */
+import { useEffect, useRef, useCallback } from 'react';
+import { Lock, Shield } from 'lucide-react';
+import { Portal, Spinner, Stack, Text, Button } from '@donotdev/components';
+import { useTranslation, useOverlay, } from '@donotdev/core';
+/** Phase progression timings (ms from start) */
+const PHASE_TIMINGS = {
+    connecting: 0,
+    preparing: 2000,
+    redirecting: 5000,
+};
+/** Default timeout before showing cancel button (10 seconds) */
+const DEFAULT_CANCEL_TIMEOUT = 10000;
+/**
+ * Get icon component based on operation type
+ */
+function getOperationIcon(operation, configIcon) {
+    if (configIcon === 'none')
+        return null;
+    if (configIcon === 'shield')
+        return Shield;
+    if (configIcon === 'lock')
+        return Lock;
+    // Infer from operation
+    if (!operation)
+        return Lock;
+    if (operation.startsWith('stripe-') ||
+        operation.includes('payment') ||
+        operation.includes('checkout')) {
+        return Lock;
+    }
+    if (operation.startsWith('oauth-') || operation.startsWith('auth-')) {
+        return Shield;
+    }
+    return Lock;
+}
+/**
+ * Get i18n key for operation
+ */
+function getOperationKey(operation) {
+    if (!operation)
+        return 'default';
+    // Check if operation has a specific translation, otherwise use default
+    return operation;
+}
+/**
+ * RedirectOverlay - Industry-standard redirect overlay with phase progression
+ *
+ * Features:
+ * - Phase-based progress: connecting → preparing → redirecting → timeout
+ * - Cancel button appears after 10s (configurable)
+ * - i18n support with operation-specific messaging
+ * - Browser event handling (popstate, visibilitychange)
+ * - Accessible (ARIA labels, role="status")
+ * - RTL-safe styling
+ *
+ * @example
+ * ```tsx
+ * // Include once in app root (layout.tsx or App.tsx)
+ * import { RedirectOverlay } from '@donotdev/ui';
+ *
+ * function RootLayout({ children }) {
+ *   return (
+ *     <>
+ *       {children}
+ *       <RedirectOverlay />
+ *     </>
+ *   );
+ * }
+ *
+ * // Hooks trigger it automatically
+ * const checkout = useStripeBilling('checkout', authState);
+ * await checkout({ priceId: 'price_123' }); // Shows overlay automatically
+ * ```
+ *
+ * @version 0.0.1
+ * @since 0.0.1
+ * @author AMBROISE PARK Consulting
+ */
+export function RedirectOverlay() {
+    const { t } = useTranslation('dndev');
+    // Subscribe to overlay store
+    const isOpen = useOverlay('isRedirectOverlayOpen');
+    const operation = useOverlay('redirectOperation');
+    const phase = useOverlay('redirectPhase');
+    const showCancelButton = useOverlay('showCancelButton');
+    const config = useOverlay('redirectConfig');
+    const startTime = useOverlay('redirectStartTime');
+    // Actions
+    const setRedirectPhase = useOverlay('setRedirectPhase');
+    const setShowCancelButton = useOverlay('setShowCancelButton');
+    const hideRedirectOverlay = useOverlay('hideRedirectOverlay');
+    // Refs for cleanup
+    const phaseTimersRef = useRef([]);
+    const cancelTimerRef = useRef(null);
+    // Cancel handler
+    const handleCancel = useCallback(() => {
+        hideRedirectOverlay();
+    }, [hideRedirectOverlay]);
+    // Setup phase progression and cancel timer when overlay opens
+    useEffect(() => {
+        if (!isOpen || !startTime)
+            return;
+        const cancelTimeout = config?.cancelTimeout ?? DEFAULT_CANCEL_TIMEOUT;
+        const elapsed = Date.now() - startTime;
+        // Clear any existing timers
+        phaseTimersRef.current.forEach(clearTimeout);
+        phaseTimersRef.current = [];
+        if (cancelTimerRef.current) {
+            clearTimeout(cancelTimerRef.current);
+            cancelTimerRef.current = null;
+        }
+        // Schedule phase transitions
+        const schedulePhase = (targetPhase, delay) => {
+            const adjustedDelay = Math.max(0, delay - elapsed);
+            if (adjustedDelay > 0) {
+                const timer = setTimeout(() => {
+                    setRedirectPhase(targetPhase);
+                }, adjustedDelay);
+                phaseTimersRef.current.push(timer);
+            }
+            else {
+                // Already past this phase
+                setRedirectPhase(targetPhase);
+            }
+        };
+        schedulePhase('preparing', PHASE_TIMINGS.preparing);
+        schedulePhase('redirecting', PHASE_TIMINGS.redirecting);
+        // Schedule cancel button
+        const cancelDelay = Math.max(0, cancelTimeout - elapsed);
+        cancelTimerRef.current = setTimeout(() => {
+            setShowCancelButton(true);
+            setRedirectPhase('timeout');
+        }, cancelDelay);
+        // Cleanup
+        return () => {
+            phaseTimersRef.current.forEach(clearTimeout);
+            phaseTimersRef.current = [];
+            if (cancelTimerRef.current) {
+                clearTimeout(cancelTimerRef.current);
+                cancelTimerRef.current = null;
+            }
+        };
+    }, [
+        isOpen,
+        startTime,
+        config?.cancelTimeout,
+        setRedirectPhase,
+        setShowCancelButton,
+    ]);
+    // Handle browser back button (popstate)
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handlePopState = () => {
+            // User pressed back - hide overlay
+            hideRedirectOverlay();
+        };
+        window.addEventListener('popstate', handlePopState);
+        return () => window.removeEventListener('popstate', handlePopState);
+    }, [isOpen, hideRedirectOverlay]);
+    // Handle tab visibility change
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleVisibilityChange = () => {
+            // If user switches away and comes back, the redirect probably failed
+            // We could add logic here to show a "retry" state, but for now we keep overlay visible
+            // This prevents the overlay from disappearing when user tabs away briefly
+        };
+        document.addEventListener('visibilitychange', handleVisibilityChange);
+        return () => document.removeEventListener('visibilitychange', handleVisibilityChange);
+    }, [isOpen]);
+    // Don't render if not open
+    if (!isOpen)
+        return null;
+    // Get operation-specific translations
+    const operationKey = getOperationKey(operation);
+    // Try operation-specific translation, fallback to default
+    const title = config?.title ??
+        t(`redirectOverlay.${operationKey}.title`, {
+            defaultValue: t('redirectOverlay.default.title'),
+        });
+    const message = config?.message ??
+        t(`redirectOverlay.${operationKey}.message`, {
+            defaultValue: t('redirectOverlay.default.message'),
+        });
+    const subtitle = config?.subtitle ??
+        t(`redirectOverlay.${operationKey}.subtitle`, {
+            defaultValue: t('redirectOverlay.default.subtitle'),
+        });
+    const ariaLabel = t(`redirectOverlay.${operationKey}.ariaLabel`, {
+        defaultValue: t('redirectOverlay.default.ariaLabel'),
+    });
+    // Get phase message
+    const phaseMessage = t(`redirectOverlay.phases.${phase}`);
+    // Get icon
+    const IconComponent = getOperationIcon(operation, config?.icon);
+    return (_jsx(Portal, { children: _jsx("div", { className: "dndev-spinner-overlay", role: "status", "aria-busy": "true", "aria-label": ariaLabel, style: {
+                // Ensure highest z-index for redirect overlay
+                zIndex: 'var(--z-overlay, 9999)',
+            }, children: _jsxs("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    gap: 'var(--gap-md)',
+                    textAlign: 'center',
+                    maxWidth: '400px',
+                    padding: 'var(--gap-lg)',
+                }, children: [_jsxs(Stack, { direction: "row", gap: "medium", align: "center", children: [IconComponent && (_jsx(IconComponent, { style: {
+                                    width: '1.5rem',
+                                    height: '1.5rem',
+                                    color: 'var(--primary)',
+                                }, "aria-hidden": "true" })), _jsx(Spinner, { variant: "primary" })] }), _jsx(Text, { as: "h3", style: {
+                            color: 'var(--foreground)',
+                            margin: 0,
+                        }, children: title }), _jsx(Text, { variant: "muted", style: {
+                            color: 'var(--foreground)',
+                            minHeight: '1.5em',
+                        }, children: phaseMessage }), _jsx(Text, { variant: "muted", level: "small", style: {
+                            opacity: 0.8,
+                        }, children: message }), _jsx(Text, { variant: "muted", level: "small", style: {
+                            opacity: 0.6,
+                        }, children: subtitle }), _jsx(Text, { variant: "muted", level: "small", style: {
+                            opacity: 0.5,
+                            marginTop: 'var(--gap-sm)',
+                        }, children: t('redirectOverlay.doNotRefresh') }), showCancelButton && (_jsx(Button, { variant: "ghost", onClick: handleCancel, style: {
+                            marginTop: 'var(--gap-md)',
+                        }, children: t('redirectOverlay.cancel') }))] }) }) }));
+}
+export default RedirectOverlay;

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

@@ -13,6 +13,7 @@ export { default as Loader } from './Loader';
 export { default as LoadingMessage, LoadingMessageSimple, LoadingMessageProcessing, LoadingMessageAlmostDone, LoadingMessageComplete, LoadingMessageSaving, LoadingMessageUploading, LoadingMessageSearching, LoadingMessageConnecting, } from './LoadingMessage';
 export { default as LoadingOverlay, LoadingContainerOverlay, } from './LoadingOverlay';
 export { default as LoadingScreen } from './LoadingScreen';
+export { RedirectOverlay } from './RedirectOverlay';
 export { default as ProgressBar } from './ProgressBar';
 export { default as Skeleton } from './Skeleton';
 export { default as FeatureCard } from './FeatureCard';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/common/index.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EACL,OAAO,IAAI,cAAc,EACzB,oBAAoB,EACpB,wBAAwB,EACxB,wBAAwB,EACxB,sBAAsB,EACtB,oBAAoB,EACpB,uBAAuB,EACvB,uBAAuB,EACvB,wBAAwB,GACzB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,OAAO,IAAI,cAAc,EACzB,uBAAuB,GACxB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/common/index.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EACL,OAAO,IAAI,cAAc,EACzB,oBAAoB,EACpB,wBAAwB,EACxB,wBAAwB,EACxB,sBAAsB,EACtB,oBAAoB,EACpB,uBAAuB,EACvB,uBAAuB,EACvB,wBAAwB,GACzB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,OAAO,IAAI,cAAc,EACzB,uBAAuB,GACxB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/common/index.js

@@ -14,6 +14,7 @@ export { default as Loader } from './Loader';
 export { default as LoadingMessage, LoadingMessageSimple, LoadingMessageProcessing, LoadingMessageAlmostDone, LoadingMessageComplete, LoadingMessageSaving, LoadingMessageUploading, LoadingMessageSearching, LoadingMessageConnecting, } from './LoadingMessage';
 export { default as LoadingOverlay, LoadingContainerOverlay, } from './LoadingOverlay';
 export { default as LoadingScreen } from './LoadingScreen';
+export { RedirectOverlay } from './RedirectOverlay';
 export { default as ProgressBar } from './ProgressBar';
 export { default as Skeleton } from './Skeleton';
 export { default as FeatureCard } from './FeatureCard';

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

@@ -1 +1 @@
-{"version":3,"file":"SettingsMenu.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/components/header/SettingsMenu.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,aAAa,EAAwB,MAAM,sBAAsB,CAAC;AAYhF,MAAM,WAAW,iBAAiB;IAChC,qBAAqB;IACrB,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAED;;;;;;GAMG;AACH,iBAAS,YAAY,CAAC,EACpB,OAAgC,GACjC,GAAE,iBAAsB,2CA4FxB;AAED,eAAe,YAAY,CAAC"}
+{"version":3,"file":"SettingsMenu.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/components/header/SettingsMenu.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,aAAa,EAAwB,MAAM,sBAAsB,CAAC;AAYhF,MAAM,WAAW,iBAAiB;IAChC,qBAAqB;IACrB,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAED;;;;;;GAMG;AACH,iBAAS,YAAY,CAAC,EACpB,OAAgC,GACjC,GAAE,iBAAsB,2CA+FxB;AAED,eAAe,YAAY,CAAC"}

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

@@ -54,7 +54,7 @@ function SettingsMenu({ variant = BUTTON_VARIANT.OUTLINE, } = {}) {
             checked: isActive,
             className: isActive ? 'bg-accent' : undefined,
             iconEnd: isActive && !isLoading ? Check : undefined,
-            children: (_jsxs(Stack, { direction: "row", align: "center", gap: "tight", children: [_jsx(Flag, { code: language.id, title: `${language.name} flag` }), _jsx("span", { children: language.name }), isLoading && isActive && (_jsx("div", { style: { marginInlineStart: 'auto' }, children: _jsx("div", { style: {
+            children: (_jsxs(Stack, { direction: "row", align: "center", gap: "tight", children: [_jsx(Flag, { code: language.flagCode || language.id, title: `${language.name} flag` }), _jsx("span", { children: language.name }), isLoading && isActive && (_jsx("div", { style: { marginInlineStart: 'auto' }, children: _jsx("div", { style: {
                                 width: '0.5rem',
                                 height: '0.5rem',
                                 borderRadius: '50%',

package/dist/crud/components/DisplayFieldRenderer.js

@@ -94,7 +94,7 @@ export function DisplayFieldRenderer({ name, config, t, value, className, }) {
         }
     };
     // Don't render hidden fields
-    if (config.hidden) {
+    if (config.visibility === 'hidden') {
         return _jsx(_Fragment, {});
     }
     const displayComponent = renderDisplayComponent();