@wallarm-org/design-system 0.54.0 → 0.55.0

package/dist/components/AppShell/AppShell.d.ts

@@ -1,9 +1,15 @@
 import { type FC, type HTMLAttributes, type ReactNode, type Ref } from 'react';
 import { type TestableProps } from '../../utils/testId';
+export interface AppShellExpandFrom {
+    width: number;
+    height: number;
+    borderRadius?: number;
+}
 export interface AppShellProps extends HTMLAttributes<HTMLDivElement>, TestableProps {
     ref?: Ref<HTMLDivElement>;
     children?: ReactNode;
     reveal?: boolean;
+    expandFrom?: AppShellExpandFrom;
     onRevealed?: () => void;
     appeared?: boolean;
 }

package/dist/components/AppShell/AppShell.js

@@ -1,51 +1,20 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useMemo, useRef } from "react";
 import { composeRefs } from "@radix-ui/react-compose-refs";
 import { cn } from "../../utils/cn.js";
 import { TestIdProvider } from "../../utils/testId.js";
 import { AppShellContext } from "./AppShellContext.js";
-const AppShell = ({ ref, className, children, reveal, onRevealed, appeared: appearedProp, 'data-testid': testId, ...props })=>{
+import { ExpandOverlay } from "./ExpandOverlay.js";
+import { RevealOverlay } from "./RevealOverlay.js";
+import { useShellAnimation } from "./useShellAnimation.js";
+const AppShell = ({ ref, className, children, reveal, expandFrom, onRevealed, appeared: appearedProp, 'data-testid': testId, ...props })=>{
     const internalRef = useRef(null);
-    const onRevealedRef = useRef(onRevealed);
-    onRevealedRef.current = onRevealed;
-    const [phase, setPhase] = useState(reveal ? 'initial' : 'done');
-    const [targetRect, setTargetRect] = useState(null);
-    useEffect(()=>{
-        if ('initial' !== phase) return;
-        const shell = internalRef.current;
-        if (!shell) return;
-        let cancelled = false;
-        requestAnimationFrame(()=>{
-            requestAnimationFrame(()=>{
-                if (cancelled) return;
-                const remote = shell.querySelector('[data-slot="app-shell-remote"]');
-                if (!remote) {
-                    setPhase('done');
-                    onRevealedRef.current?.();
-                    return;
-                }
-                const shellRect = shell.getBoundingClientRect();
-                const remoteRect = remote.getBoundingClientRect();
-                setTargetRect({
-                    top: remoteRect.top - shellRect.top,
-                    left: remoteRect.left - shellRect.left
-                });
-                setPhase('revealing');
-            });
-        });
-        return ()=>{
-            cancelled = true;
-        };
-    }, [
-        phase
-    ]);
-    const handleTransitionEnd = useCallback((e)=>{
-        if ('top' === e.propertyName) {
-            setPhase('done');
-            onRevealedRef.current?.();
-        }
-    }, []);
-    const appeared = appearedProp ?? 'done' === phase;
+    const { phase, targetRect, expandStyle, appeared, handleRevealOverlayTransitionEnd, handleExpandTransitionEnd } = useShellAnimation(internalRef, {
+        reveal,
+        expandFrom,
+        onRevealed,
+        appearedProp
+    });
     const shellContext = useMemo(()=>({
             appeared
         }), [
@@ -61,16 +30,19 @@ const AppShell = ({ ref, className, children, reveal, onRevealed, appeared: appe
                 "data-slot": "app-shell",
                 "data-testid": testId,
                 className: cn('relative grid h-screen overscroll-none [grid-template-areas:"header_header""rail_remote"] [grid-template-columns:auto_1fr] [grid-template-rows:auto_1fr] bg-component-app-shell-bg', className),
+                style: expandStyle,
+                onTransitionEnd: expandFrom ? handleExpandTransitionEnd : void 0,
                 children: [
                     children,
-                    'done' !== phase && /*#__PURE__*/ jsx("div", {
-                        className: cn('bg-bg-page-bg pointer-events-none z-50 absolute right-0 bottom-0', 'revealing' === phase && 'rounded-tl-12'),
-                        style: {
-                            top: 'revealing' === phase && targetRect ? targetRect.top : 0,
-                            left: 'revealing' === phase && targetRect ? targetRect.left : 0,
-                            transition: 'revealing' === phase ? 'top 500ms ease-in-out, left 500ms ease-in-out, border-radius 500ms ease-in-out' : void 0
-                        },
-                        onTransitionEnd: handleTransitionEnd
+                    expandFrom && /*#__PURE__*/ jsx(ExpandOverlay, {
+                        phase: phase,
+                        expandFrom: expandFrom,
+                        targetRect: targetRect
+                    }),
+                    !expandFrom && /*#__PURE__*/ jsx(RevealOverlay, {
+                        phase: phase,
+                        targetRect: targetRect,
+                        onTransitionEnd: handleRevealOverlayTransitionEnd
                     })
                 ]
             })

package/dist/components/AppShell/AppShellHeader.js

@@ -10,7 +10,7 @@ const AppShellHeader = ({ ref, className, children, ...props })=>{
         ref: ref,
         "data-slot": "app-shell-header",
         "data-testid": testId,
-        className: cn('[grid-area:header] transition-opacity duration-200 ease-in-out', !appeared && 'opacity-0', className),
+        className: cn('[grid-area:header] transition-opacity duration-500 ease-in-out', !appeared && 'opacity-0', className),
         children: children
     });
 };

package/dist/components/AppShell/AppShellRail.js

@@ -10,7 +10,7 @@ const AppShellRail = ({ ref, className, children, ...props })=>{
         ref: ref,
         "data-slot": "app-shell-rail",
         "data-testid": testId,
-        className: cn('[grid-area:rail] transition-opacity duration-200 ease-in-out', !appeared && 'opacity-0', className),
+        className: cn('[grid-area:rail] transition-opacity duration-500 ease-in-out', !appeared && 'opacity-0', className),
         children: children
     });
 };

package/dist/components/AppShell/ExpandOverlay.d.ts

@@ -0,0 +1,13 @@
+import type { FC } from 'react';
+import type { AppShellExpandFrom } from './AppShell';
+import type { RevealPhase } from './useShellAnimation';
+interface ExpandOverlayProps {
+    phase: RevealPhase;
+    expandFrom: AppShellExpandFrom;
+    targetRect: {
+        top: number;
+        left: number;
+    } | null;
+}
+export declare const ExpandOverlay: FC<ExpandOverlayProps>;
+export {};

package/dist/components/AppShell/ExpandOverlay.js

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import { EXPAND_BORDER_MS, HERO_EASE } from "./constants.js";
+const EXPANDING_TRANSITION = [
+    'top',
+    'left',
+    'right',
+    'bottom',
+    'border-radius',
+    'border-right-width',
+    'border-bottom-width'
+].map((prop)=>`${prop} ${EXPAND_BORDER_MS}ms ${HERO_EASE}`).join(', ');
+const ExpandOverlay = ({ phase, expandFrom, targetRect })=>{
+    if ('initial' !== phase && 'expanding' !== phase) return null;
+    const { width, height, borderRadius = 0 } = expandFrom;
+    const isInitial = 'initial' === phase;
+    const halfW = `calc(50% - ${width / 2}px)`;
+    const halfH = `calc(50% - ${height / 2}px)`;
+    return /*#__PURE__*/ jsx("div", {
+        className: "pointer-events-none absolute z-50 border-solid border-border-primary-light",
+        style: {
+            top: isInitial ? halfH : `${targetRect?.top ?? 0}px`,
+            left: isInitial ? halfW : `${targetRect?.left ?? 0}px`,
+            right: isInitial ? halfW : 0,
+            bottom: isInitial ? halfH : 0,
+            borderTopWidth: 1,
+            borderLeftWidth: 1,
+            borderRightWidth: isInitial ? 1 : 0,
+            borderBottomWidth: isInitial ? 1 : 0,
+            borderRadius: isInitial ? borderRadius : '12px 0px 0px 0px',
+            opacity: 1,
+            transition: isInitial ? void 0 : EXPANDING_TRANSITION
+        }
+    });
+};
+ExpandOverlay.displayName = 'ExpandOverlay';
+export { ExpandOverlay };

package/dist/components/AppShell/RevealOverlay.d.ts

@@ -0,0 +1,12 @@
+import type { FC } from 'react';
+import type { RevealPhase } from './useShellAnimation';
+interface RevealOverlayProps {
+    phase: RevealPhase;
+    targetRect: {
+        top: number;
+        left: number;
+    } | null;
+    onTransitionEnd: (e: React.TransitionEvent) => void;
+}
+export declare const RevealOverlay: FC<RevealOverlayProps>;
+export {};

package/dist/components/AppShell/RevealOverlay.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { EMPHASIZED_DECEL, MORPH_MS } from "./constants.js";
+const REVEALING_TRANSITION = [
+    'top',
+    'left',
+    'border-radius'
+].map((prop)=>`${prop} ${MORPH_MS}ms ${EMPHASIZED_DECEL}`).join(', ');
+const RevealOverlay = ({ phase, targetRect, onTransitionEnd })=>{
+    if ('done' === phase) return null;
+    const isRevealing = 'revealing' === phase;
+    return /*#__PURE__*/ jsx("div", {
+        className: cn('bg-bg-page-bg pointer-events-none z-50 absolute right-0 bottom-0', isRevealing && 'rounded-tl-12'),
+        style: {
+            top: isRevealing && targetRect ? targetRect.top : 0,
+            left: isRevealing && targetRect ? targetRect.left : 0,
+            transition: isRevealing ? REVEALING_TRANSITION : void 0
+        },
+        onTransitionEnd: onTransitionEnd
+    });
+};
+RevealOverlay.displayName = 'RevealOverlay';
+export { RevealOverlay };

package/dist/components/AppShell/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const EMPHASIZED_DECEL = "cubic-bezier(0.05, 0.7, 0.1, 1)";
+export declare const HERO_EASE = "cubic-bezier(0.4, 0, 0.2, 1)";
+export declare const MORPH_MS = 400;
+export declare const EXPAND_MS = 560;
+export declare const EXPAND_BORDER_MS = 400;
+export declare const SKELETON_DELAY = 250;

package/dist/components/AppShell/constants.js

@@ -0,0 +1,7 @@
+const EMPHASIZED_DECEL = 'cubic-bezier(0.05, 0.7, 0.1, 1)';
+const HERO_EASE = 'cubic-bezier(0.4, 0, 0.2, 1)';
+const MORPH_MS = 400;
+const EXPAND_MS = 560;
+const EXPAND_BORDER_MS = 400;
+const SKELETON_DELAY = 250;
+export { EMPHASIZED_DECEL, EXPAND_BORDER_MS, EXPAND_MS, HERO_EASE, MORPH_MS, SKELETON_DELAY };

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

@@ -1,4 +1,4 @@
-export { AppShell, type AppShellProps } from './AppShell';
+export { AppShell, type AppShellExpandFrom, type AppShellProps } from './AppShell';
 export { AppShellHeader, type AppShellHeaderProps } from './AppShellHeader';
 export { AppShellRail, type AppShellRailProps } from './AppShellRail';
 export { AppShellRemote, type AppShellRemoteProps } from './AppShellRemote';

package/dist/components/AppShell/story-content/_storyHeaderActions.d.ts

@@ -0,0 +1 @@
+export declare const HeaderActions: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/AppShell/story-content/_storyHeaderActions.js

@@ -0,0 +1,75 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Bell, ChevronUpDown } from "../../../icons/index.js";
+import { Button } from "../../Button/index.js";
+import { Code } from "../../Code/index.js";
+import { Kbd } from "../../Kbd/index.js";
+import { Text } from "../../Text/index.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../Tooltip/index.js";
+import { TopHeaderSeparator } from "../../TopHeader/index.js";
+import { QuickHelpDropdown } from "./_storyQuickHelpDropdown.js";
+const HeaderActions = ()=>/*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs(Button, {
+                variant: "ghost",
+                size: "small",
+                color: "neutral",
+                className: "p-4 gap-6 rounded-6",
+                children: [
+                    /*#__PURE__*/ jsx(Code, {
+                        size: "s",
+                        color: "secondary",
+                        children: "Search Wallarm"
+                    }),
+                    /*#__PURE__*/ jsx(Kbd, {
+                        size: "xsmall",
+                        children: "⌘ K"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(TopHeaderSeparator, {}),
+            /*#__PURE__*/ jsxs(Button, {
+                variant: "ghost",
+                size: "small",
+                color: "neutral",
+                className: "py-4 rounded-6",
+                children: [
+                    /*#__PURE__*/ jsx(Text, {
+                        size: "xs",
+                        weight: "medium",
+                        children: "Tenant Name"
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        className: "text-text-tertiary mx-[-2px]",
+                        children: "•"
+                    }),
+                    /*#__PURE__*/ jsx(Code, {
+                        size: "s",
+                        color: "secondary",
+                        children: "12345"
+                    }),
+                    /*#__PURE__*/ jsx(ChevronUpDown, {
+                        className: "!icon-sm"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs(Tooltip, {
+                children: [
+                    /*#__PURE__*/ jsx(TooltipTrigger, {
+                        asChild: true,
+                        children: /*#__PURE__*/ jsx(Button, {
+                            variant: "ghost",
+                            size: "small",
+                            color: "neutral",
+                            "aria-label": "Wallarm Updates",
+                            children: /*#__PURE__*/ jsx(Bell, {})
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(TooltipContent, {
+                        children: "Wallarm updates"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(QuickHelpDropdown, {})
+        ]
+    });
+export { HeaderActions };

package/dist/components/AppShell/story-content/_storyNavRailFooter.d.ts

@@ -0,0 +1,13 @@
+import type { FC } from 'react';
+import type { Theme } from '../../ThemeProvider';
+import { type SidebarMode } from './_storyAccountDropdown';
+import { type Product } from './_storyLib';
+interface NavRailFooterContentProps {
+    activeProduct: Product;
+    sidebarMode: SidebarMode;
+    onSidebarModeChange: (mode: SidebarMode) => void;
+    theme: Theme;
+    onThemeChange: (theme: Theme) => void;
+}
+export declare const NavRailFooterContent: FC<NavRailFooterContentProps>;
+export {};

package/dist/components/AppShell/story-content/_storyNavRailFooter.js

@@ -0,0 +1,26 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Settings } from "../../../icons/index.js";
+import { NavRailFooter, NavRailItem } from "../../NavRail/index.js";
+import { AccountDropdown } from "./_storyAccountDropdown.js";
+import { navigateToProduct } from "./_storyLib.js";
+const NavRailFooterContent = ({ activeProduct, sidebarMode, onSidebarModeChange, theme, onThemeChange })=>/*#__PURE__*/ jsxs(NavRailFooter, {
+        children: [
+            /*#__PURE__*/ jsx(NavRailItem, {
+                icon: Settings,
+                label: "Settings",
+                shortcut: [
+                    'G',
+                    'S'
+                ],
+                active: 'settings' === activeProduct,
+                onClick: ()=>navigateToProduct('settings')
+            }),
+            /*#__PURE__*/ jsx(AccountDropdown, {
+                sidebarMode: sidebarMode,
+                onSidebarModeChange: onSidebarModeChange,
+                theme: theme,
+                onThemeChange: onThemeChange
+            })
+        ]
+    });
+export { NavRailFooterContent };

package/dist/components/AppShell/story-content/_storyProductNavItems.d.ts

@@ -0,0 +1,7 @@
+import type { FC } from 'react';
+import { type Product } from './_storyLib';
+interface ProductNavItemsProps {
+    activeProduct: Product;
+}
+export declare const ProductNavItems: FC<ProductNavItemsProps>;
+export {};

package/dist/components/AppShell/story-content/_storyProductNavItems.js

@@ -0,0 +1,49 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CircleDashed } from "../../../icons/index.js";
+import { NavRailItem } from "../../NavRail/index.js";
+import { navigateToProduct } from "./_storyLib.js";
+const ProductNavItems = ({ activeProduct })=>/*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(NavRailItem, {
+                icon: CircleDashed,
+                label: "Edge",
+                shortcut: [
+                    'G',
+                    'E'
+                ],
+                active: 'edge' === activeProduct,
+                onClick: ()=>navigateToProduct('edge')
+            }),
+            /*#__PURE__*/ jsx(NavRailItem, {
+                icon: CircleDashed,
+                label: "AI Hypervisor",
+                shortcut: [
+                    'G',
+                    'A'
+                ],
+                active: 'ai-hypervisor' === activeProduct,
+                onClick: ()=>navigateToProduct('ai-hypervisor')
+            }),
+            /*#__PURE__*/ jsx(NavRailItem, {
+                icon: CircleDashed,
+                label: "Infra Discovery",
+                shortcut: [
+                    'G',
+                    'I'
+                ],
+                active: 'infra-discovery' === activeProduct,
+                onClick: ()=>navigateToProduct('infra-discovery')
+            }),
+            /*#__PURE__*/ jsx(NavRailItem, {
+                icon: CircleDashed,
+                label: "Security Testing",
+                shortcut: [
+                    'G',
+                    'T'
+                ],
+                active: 'security-testing' === activeProduct,
+                onClick: ()=>navigateToProduct('security-testing')
+            })
+        ]
+    });
+export { ProductNavItems };

package/dist/components/AppShell/story-content/index.d.ts

@@ -1,8 +1,11 @@
 export { AccountDropdown, type SidebarMode } from './_storyAccountDropdown';
 export { RemoteForProduct } from './_storyConfigRenderer';
+export { HeaderActions } from './_storyHeaderActions';
 export { HomeContent } from './_storyHomeContent';
 export { deriveProduct, navigateToProduct } from './_storyLib';
 export { aiHypervisorNavConfig, edgeNavConfig, infraDiscoveryNavConfig, securityTestingNavConfig, settingsNavConfig, } from './_storyNavConfigs';
+export { NavRailFooterContent } from './_storyNavRailFooter';
+export { ProductNavItems } from './_storyProductNavItems';
 export { QuickHelpDropdown } from './_storyQuickHelpDropdown';
 export { RecentDropdown } from './_storyRecentDropdown';
 export { WallarmLogo } from './_storyWallarmLogo';

package/dist/components/AppShell/story-content/index.js

@@ -1,9 +1,12 @@
 import { AccountDropdown } from "./_storyAccountDropdown.js";
 import { RemoteForProduct } from "./_storyConfigRenderer.js";
+import { HeaderActions } from "./_storyHeaderActions.js";
 import { HomeContent } from "./_storyHomeContent.js";
 import { deriveProduct, navigateToProduct } from "./_storyLib.js";
 import { aiHypervisorNavConfig, edgeNavConfig, infraDiscoveryNavConfig, securityTestingNavConfig, settingsNavConfig } from "./_storyNavConfigs.js";
+import { NavRailFooterContent } from "./_storyNavRailFooter.js";
+import { ProductNavItems } from "./_storyProductNavItems.js";
 import { QuickHelpDropdown } from "./_storyQuickHelpDropdown.js";
 import { RecentDropdown } from "./_storyRecentDropdown.js";
 import { WallarmLogo } from "./_storyWallarmLogo.js";
-export { AccountDropdown, HomeContent, QuickHelpDropdown, RecentDropdown, RemoteForProduct, WallarmLogo, aiHypervisorNavConfig, deriveProduct, edgeNavConfig, infraDiscoveryNavConfig, navigateToProduct, securityTestingNavConfig, settingsNavConfig };
+export { AccountDropdown, HeaderActions, HomeContent, NavRailFooterContent, ProductNavItems, QuickHelpDropdown, RecentDropdown, RemoteForProduct, WallarmLogo, aiHypervisorNavConfig, deriveProduct, edgeNavConfig, infraDiscoveryNavConfig, navigateToProduct, securityTestingNavConfig, settingsNavConfig };

package/dist/components/AppShell/useShellAnimation.d.ts

@@ -0,0 +1,21 @@
+import { type RefObject } from 'react';
+import type { AppShellExpandFrom } from './AppShell';
+export type RevealPhase = 'initial' | 'expanding' | 'revealing' | 'done';
+interface UseShellAnimationOptions {
+    reveal?: boolean;
+    expandFrom?: AppShellExpandFrom;
+    onRevealed?: () => void;
+    appearedProp?: boolean;
+}
+export declare function useShellAnimation(shellRef: RefObject<HTMLDivElement | null>, options: UseShellAnimationOptions): {
+    phase: RevealPhase;
+    targetRect: {
+        top: number;
+        left: number;
+    } | null;
+    expandStyle: import("react").CSSProperties | undefined;
+    appeared: boolean;
+    handleRevealOverlayTransitionEnd: (e: React.TransitionEvent) => void;
+    handleExpandTransitionEnd: (e: React.TransitionEvent) => void;
+};
+export {};

package/dist/components/AppShell/useShellAnimation.js

@@ -0,0 +1,116 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { EXPAND_BORDER_MS, EXPAND_MS, HERO_EASE, SKELETON_DELAY } from "./constants.js";
+function queryRemoteRect(shell) {
+    const remote = shell.querySelector('[data-slot="app-shell-remote"]');
+    if (!remote) return null;
+    const shellRect = shell.getBoundingClientRect();
+    const remoteRect = remote.getBoundingClientRect();
+    return {
+        top: remoteRect.top - shellRect.top,
+        left: remoteRect.left - shellRect.left
+    };
+}
+function computeExpandStyle(expandFrom, phase, targetRect) {
+    const { width, height, borderRadius = 0 } = expandFrom;
+    switch(phase){
+        case 'initial':
+            return {
+                clipPath: `inset(calc(50% - ${height / 2}px) calc(50% - ${width / 2}px) round ${borderRadius}px)`
+            };
+        case 'expanding':
+            if (targetRect) return {
+                clipPath: `inset(${targetRect.top}px 0px 0px ${targetRect.left}px round 12px 0px 0px 0px)`,
+                transition: `clip-path ${EXPAND_BORDER_MS}ms ${HERO_EASE}`
+            };
+            return {
+                clipPath: 'inset(0 0 round 0px)',
+                transition: `clip-path ${EXPAND_BORDER_MS}ms ${HERO_EASE}`
+            };
+        default:
+            return;
+    }
+}
+function useShellAnimation(shellRef, options) {
+    const { reveal, expandFrom, onRevealed, appearedProp } = options;
+    const onRevealedRef = useRef(onRevealed);
+    onRevealedRef.current = onRevealed;
+    const hasAnimation = Boolean(expandFrom || reveal);
+    const [phase, setPhase] = useState(hasAnimation ? 'initial' : 'done');
+    const [targetRect, setTargetRect] = useState(null);
+    useEffect(()=>{
+        if ('initial' !== phase) return;
+        let cancelled = false;
+        const scheduleDoubleRaf = (callback)=>{
+            requestAnimationFrame(()=>{
+                requestAnimationFrame(()=>{
+                    if (!cancelled) callback();
+                });
+            });
+        };
+        scheduleDoubleRaf(expandFrom ? ()=>{
+            const shell = shellRef.current;
+            if (shell) {
+                const rect = queryRemoteRect(shell);
+                if (rect) setTargetRect(rect);
+            }
+            setPhase('expanding');
+        } : ()=>{
+            const shell = shellRef.current;
+            if (!shell) return;
+            const rect = queryRemoteRect(shell);
+            if (!rect) {
+                setPhase('done');
+                onRevealedRef.current?.();
+                return;
+            }
+            setTargetRect(rect);
+            setPhase('revealing');
+        });
+        return ()=>{
+            cancelled = true;
+        };
+    }, [
+        phase,
+        expandFrom,
+        shellRef
+    ]);
+    const handleRevealOverlayTransitionEnd = useCallback((e)=>{
+        if ('top' === e.propertyName) {
+            setPhase('done');
+            onRevealedRef.current?.();
+        }
+    }, []);
+    const handleExpandTransitionEnd = useCallback((e)=>{
+        if ('clip-path' === e.propertyName) {
+            setPhase('done');
+            onRevealedRef.current?.();
+        }
+    }, []);
+    const expandStyle = useMemo(()=>expandFrom ? computeExpandStyle(expandFrom, phase, targetRect) : void 0, [
+        expandFrom,
+        phase,
+        targetRect
+    ]);
+    const isDone = 'done' === phase;
+    const [appearedDelayed, setAppearedDelayed] = useState(!hasAnimation);
+    useEffect(()=>{
+        if (!isDone || !hasAnimation) return;
+        const delay = expandFrom ? EXPAND_MS - EXPAND_BORDER_MS : SKELETON_DELAY;
+        const id = setTimeout(()=>setAppearedDelayed(true), delay);
+        return ()=>clearTimeout(id);
+    }, [
+        isDone,
+        hasAnimation,
+        expandFrom
+    ]);
+    const appeared = appearedProp ?? (hasAnimation ? appearedDelayed : true);
+    return {
+        phase,
+        targetRect,
+        expandStyle,
+        appeared,
+        handleRevealOverlayTransitionEnd,
+        handleExpandTransitionEnd
+    };
+}
+export { useShellAnimation };

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.53.1",
-  "generatedAt": "2026-06-04T00:25:40.326Z",
+  "version": "0.54.0",
+  "generatedAt": "2026-06-04T22:49:52.517Z",
   "components": [
     {
       "name": "Accordion",
@@ -3724,6 +3724,11 @@
           "type": "boolean | undefined",
           "required": false
         },
+        {
+          "name": "expandFrom",
+          "type": "AppShellExpandFrom | undefined",
+          "required": false
+        },
         {
           "name": "appeared",
           "type": "boolean | undefined",
@@ -4831,7 +4836,15 @@
       "examples": [
         {
           "name": "Basic",
-          "code": "() => {\n  const pathname = useLocationPathname();\n  const activeProduct = deriveProduct(pathname);\n\n  const [loading, setLoading] = useState(true);\n  const [sidebarMode, setSidebarMode] = useState<SidebarMode>('adaptive');\n  const [revealKey, setRevealKey] = useState(0);\n  const { theme, setTheme } = useTheme();\n  const collapsed = sidebarMode === 'adaptive' && activeProduct !== 'home';\n\n  return (\n    <AppShell key={revealKey} reveal>\n      <AppShellHeader>\n        <TopHeader>\n          <TopHeaderLogo href='/'>\n            <WallarmLogo />\n          </TopHeaderLogo>\n\n          <TopHeaderActions>\n            {loading ? (\n              <>\n                <Skeleton width='150px' height='20px' rounded={6} />\n                <TopHeaderSeparator />\n                <Skeleton width='150px' height='20px' rounded={6} />\n              </>\n            ) : (\n              <>\n                <Button\n                  variant='ghost'\n                  size='small'\n                  color='neutral'\n                  className='p-4 gap-6 rounded-6'\n                >\n                  <Code size='s' color='secondary'>\n                    Search Wallarm\n                  </Code>\n                  <Kbd size='xsmall'>⌘ K</Kbd>\n                </Button>\n\n                <TopHeaderSeparator />\n\n                <Button variant='ghost' size='small' color='neutral' className='py-4 rounded-6'>\n                  <Text size='xs' weight='medium'>\n                    Tenant Name\n                  </Text>\n                  <span className='text-text-tertiary mx-[-2px]'>•</span>\n                  <Code size='s' color='secondary'>\n                    12345\n                  </Code>\n                  <ChevronUpDown className='!icon-sm' />\n                </Button>\n              </>\n            )}\n\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant='ghost' size='small' color='neutral' aria-label='Wallarm Updates'>\n                  <Bell />\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>Wallarm updates</TooltipContent>\n            </Tooltip>\n\n            <QuickHelpDropdown />\n          </TopHeaderActions>\n        </TopHeader>\n      </AppShellHeader>\n\n      <AppShellRail>\n        <NavRail collapsed={collapsed}>\n          <NavRailBody>\n            <NavRailItem\n              icon={Home}\n              label='Home'\n              shortcut={['G', 'H']}\n              active={activeProduct === 'home'}\n              onClick={() => navigateToProduct('home')}\n            />\n            <RecentDropdown />\n\n            <NavRailSeparator />\n\n            {loading ? (\n              <NavRailSkeleton />\n            ) : (\n              <>\n                <NavRailItem\n                  icon={CircleDashed}\n                  label='Edge'\n                  shortcut={['G', 'E']}\n                  active={activeProduct === 'edge'}\n                  onClick={() => navigateToProduct('edge')}\n                />\n                <NavRailItem\n                  icon={CircleDashed}\n                  label='AI Hypervisor'\n                  shortcut={['G', 'A']}\n                  active={activeProduct === 'ai-hypervisor'}\n                  onClick={() => navigateToProduct('ai-hypervisor')}\n                />\n                <NavRailItem\n                  icon={CircleDashed}\n                  label='Infra Discovery'\n                  shortcut={['G', 'I']}\n                  active={activeProduct === 'infra-discovery'}\n                  onClick={() => navigateToProduct('infra-discovery')}\n                />\n                <NavRailItem\n                  icon={CircleDashed}\n                  label='Security Testing'\n                  shortcut={['G', 'T']}\n                  active={activeProduct === 'security-testing'}\n                  onClick={() => navigateToProduct('security-testing')}\n                />\n              </>\n            )}\n          </NavRailBody>\n\n          <NavRailFooter>\n            <NavRailItem\n              icon={Settings}\n              label='Settings'\n              shortcut={['G', 'S']}\n              active={activeProduct === 'settings'}\n              onClick={() => navigateToProduct('settings')}\n            />\n            <AccountDropdown\n              sidebarMode={sidebarMode}\n              onSidebarModeChange={setSidebarMode}\n              theme={theme}\n              onThemeChange={setTheme}\n            />\n          </NavRailFooter>\n        </NavRail>\n      </AppShellRail>\n\n      <AppShellRemote>\n        <div className='flex gap-8 absolute top-4 right-4 z-10'>\n          <Button variant='ghost' size='small' color='neutral' onClick={() => setLoading(v => !v)}>\n            {loading ? 'Finish loading' : 'Start loading'}\n          </Button>\n\n          <Button\n            variant='ghost'\n            size='small'\n            color='neutral'\n            onClick={() => setRevealKey(k => k + 1)}\n          >\n            Replay animation\n          </Button>\n        </div>\n\n        <RemoteForProduct product={activeProduct} />\n      </AppShellRemote>\n    </AppShell>\n  );\n}"
+          "code": "() => {\n  const pathname = useLocationPathname();\n  const activeProduct = deriveProduct(pathname);\n\n  const [loading, setLoading] = useState(true);\n  const [sidebarMode, setSidebarMode] = useState<SidebarMode>('adaptive');\n  const { theme, setTheme } = useTheme();\n  const collapsed = sidebarMode === 'adaptive' && activeProduct !== 'home';\n\n  return (\n    <AppShell>\n      <AppShellHeader>\n        <TopHeader>\n          <TopHeaderLogo href='/'>\n            <WallarmLogo />\n          </TopHeaderLogo>\n\n          <TopHeaderActions>\n            {loading ? (\n              <>\n                <Skeleton width='150px' height='20px' rounded={6} />\n                <TopHeaderSeparator />\n                <Skeleton width='150px' height='20px' rounded={6} />\n\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <Button\n                      variant='ghost'\n                      size='small'\n                      color='neutral'\n                      aria-label='Wallarm Updates'\n                    >\n                      <Bell />\n                    </Button>\n                  </TooltipTrigger>\n                  <TooltipContent>Wallarm updates</TooltipContent>\n                </Tooltip>\n\n                <QuickHelpDropdown />\n              </>\n            ) : (\n              <HeaderActions />\n            )}\n          </TopHeaderActions>\n        </TopHeader>\n      </AppShellHeader>\n\n      <AppShellRail>\n        <NavRail collapsed={collapsed}>\n          <NavRailBody>\n            <NavRailItem\n              icon={Home}\n              label='Home'\n              shortcut={['G', 'H']}\n              active={activeProduct === 'home'}\n              onClick={() => navigateToProduct('home')}\n            />\n            <RecentDropdown />\n\n            <NavRailSeparator />\n\n            {loading ? <NavRailSkeleton /> : <ProductNavItems activeProduct={activeProduct} />}\n          </NavRailBody>\n\n          <NavRailFooterContent\n            activeProduct={activeProduct}\n            sidebarMode={sidebarMode}\n            onSidebarModeChange={setSidebarMode}\n            theme={theme}\n            onThemeChange={setTheme}\n          />\n        </NavRail>\n      </AppShellRail>\n\n      <AppShellRemote>\n        <div className='flex gap-8 absolute top-4 right-4 z-10'>\n          <Button variant='ghost' size='small' color='neutral' onClick={() => setLoading(v => !v)}>\n            {loading ? 'Finish loading' : 'Start loading'}\n          </Button>\n        </div>\n\n        <RemoteForProduct product={activeProduct} />\n      </AppShellRemote>\n    </AppShell>\n  );\n}"
+        },
+        {
+          "name": "RevealFlow",
+          "code": "() => {\n  const pathname = useLocationPathname();\n  const activeProduct = deriveProduct(pathname);\n\n  const [splashDone, setSplashDone] = useState(false);\n  const [sidebarMode, setSidebarMode] = useState<SidebarMode>('adaptive');\n  const [revealKey, setRevealKey] = useState(0);\n  const { theme, setTheme } = useTheme();\n  const collapsed = sidebarMode === 'adaptive' && activeProduct !== 'home';\n\n  useEffect(() => {\n    if (splashDone) return;\n    const timer = setTimeout(() => setSplashDone(true), 2000);\n    return () => clearTimeout(timer);\n  }, [splashDone]);\n\n  const handleReplay = () => {\n    setSplashDone(false);\n    setRevealKey(k => k + 1);\n  };\n\n  if (!splashDone) {\n    return (\n      <div key={revealKey} className='h-screen w-screen bg-bg-page-bg'>\n        <SplashScreen />\n      </div>\n    );\n  }\n\n  return (\n    <AppShell key={revealKey} reveal>\n      <AppShellHeader>\n        <TopHeader>\n          <TopHeaderLogo href='/'>\n            <WallarmLogo />\n          </TopHeaderLogo>\n\n          <TopHeaderActions>\n            <HeaderActions />\n          </TopHeaderActions>\n        </TopHeader>\n      </AppShellHeader>\n\n      <AppShellRail>\n        <NavRail collapsed={collapsed}>\n          <NavRailBody>\n            <NavRailItem\n              icon={Home}\n              label='Home'\n              shortcut={['G', 'H']}\n              active={activeProduct === 'home'}\n              onClick={() => navigateToProduct('home')}\n            />\n            <RecentDropdown />\n\n            <NavRailSeparator />\n\n            <ProductNavItems activeProduct={activeProduct} />\n          </NavRailBody>\n\n          <NavRailFooterContent\n            activeProduct={activeProduct}\n            sidebarMode={sidebarMode}\n            onSidebarModeChange={setSidebarMode}\n            theme={theme}\n            onThemeChange={setTheme}\n          />\n        </NavRail>\n      </AppShellRail>\n\n      <AppShellRemote>\n        <div className='flex gap-8 absolute top-4 right-4 z-10'>\n          <Button variant='ghost' size='small' color='neutral' onClick={handleReplay}>\n            Replay animation\n          </Button>\n        </div>\n\n        <RemoteForProduct product={activeProduct} />\n      </AppShellRemote>\n    </AppShell>\n  );\n}"
+        },
+        {
+          "name": "LoginFlow",
+          "code": "() => {\n  const pathname = useLocationPathname();\n  const activeProduct = deriveProduct(pathname);\n\n  const [splashVisible, setSplashVisible] = useState(true);\n  const [showShell, setShowShell] = useState(false);\n  const [revealed, setRevealed] = useState(false);\n  const [flowKey, setFlowKey] = useState(0);\n  const [sidebarMode, setSidebarMode] = useState<SidebarMode>('adaptive');\n  const { theme, setTheme } = useTheme();\n  const collapsed = sidebarMode === 'adaptive' && activeProduct !== 'home';\n\n  useEffect(() => {\n    if (!splashVisible) return;\n    const timer = setTimeout(() => setSplashVisible(false), 2000);\n    return () => clearTimeout(timer);\n  }, [splashVisible]);\n\n  const handleSignIn = () => {\n    setShowShell(true);\n  };\n\n  const handleReplay = () => {\n    setShowShell(false);\n    setRevealed(false);\n    setSplashVisible(true);\n    setFlowKey(k => k + 1);\n  };\n\n  return (\n    <div\n      key={flowKey}\n      className='relative h-screen w-screen overflow-hidden bg-component-app-shell-bg'\n    >\n      {!revealed && (\n        <AnimatedBackground\n          className='absolute inset-0'\n          style={{\n            opacity: showShell ? 0 : 1,\n            transition: showShell ? 'opacity 400ms cubic-bezier(0.4, 0, 0.2, 1)' : undefined,\n          }}\n        />\n      )}\n\n      {!showShell && (\n        <div className='absolute inset-0 flex items-center justify-center z-10'>\n          <SplashScreen\n            visible={splashVisible}\n            shrinkTarget={CARD_DIMENSIONS}\n            className='bg-bg-page-bg shadow-lg'\n          >\n            <div className='flex h-full w-full flex-col items-center justify-center gap-16 p-24'>\n              <Text size='xl'>Sign In</Text>\n              <div className='flex w-full flex-col gap-12'>\n                <Input placeholder='Email' />\n                <Input placeholder='Password' type='password' />\n              </div>\n              <Button variant='primary' color='brand' className='w-full' onClick={handleSignIn}>\n                Sign In\n              </Button>\n            </div>\n          </SplashScreen>\n        </div>\n      )}\n\n      {showShell && (\n        <div className='absolute inset-0'>\n          <AppShell expandFrom={CARD_DIMENSIONS} onRevealed={() => setRevealed(true)}>\n            <AppShellHeader>\n              <TopHeader>\n                <TopHeaderLogo href='/'>\n                  <WallarmLogo />\n                </TopHeaderLogo>\n\n                <TopHeaderActions>\n                  <HeaderActions />\n                </TopHeaderActions>\n              </TopHeader>\n            </AppShellHeader>\n\n            <AppShellRail>\n              <NavRail collapsed={collapsed}>\n                <NavRailBody>\n                  <NavRailItem\n                    icon={Home}\n                    label='Home'\n                    active={activeProduct === 'home'}\n                    onClick={() => navigateToProduct('home')}\n                  />\n\n                  <NavRailSeparator />\n\n                  <ProductNavItems activeProduct={activeProduct} />\n                </NavRailBody>\n                <NavRailFooterContent\n                  activeProduct={activeProduct}\n                  sidebarMode={sidebarMode}\n                  onSidebarModeChange={setSidebarMode}\n                  theme={theme}\n                  onThemeChange={setTheme}\n                />\n              </NavRail>\n            </AppShellRail>\n\n            <AppShellRemote>\n              <div className='flex gap-8 absolute top-4 right-4 z-10'>\n                <Button variant='ghost' size='small' color='neutral' onClick={handleReplay}>\n                  Replay animation\n                </Button>\n              </div>\n              <RemoteForProduct product={activeProduct} />\n            </AppShellRemote>\n          </AppShell>\n        </div>\n      )}\n    </div>\n  );\n}"
         }
       ]
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "0.54.0",
+  "version": "0.55.0",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",