@wallarm-org/design-system 0.54.0-rc-feature-shell.1 → 0.54.0-rc-feature-shell.2

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

@@ -1,7 +1,10 @@
-import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+import { type FC, type HTMLAttributes, type ReactNode, type Ref } from 'react';
 import { type TestableProps } from '../../utils/testId';
 export interface AppShellProps extends HTMLAttributes<HTMLDivElement>, TestableProps {
     ref?: Ref<HTMLDivElement>;
     children?: ReactNode;
+    reveal?: boolean;
+    onRevealed?: () => void;
+    appeared?: boolean;
 }
 export declare const AppShell: FC<AppShellProps>;

package/dist/components/AppShell/AppShell.js

@@ -1,16 +1,81 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { composeRefs } from "@radix-ui/react-compose-refs";
 import { cn } from "../../utils/cn.js";
 import { TestIdProvider } from "../../utils/testId.js";
-const AppShell = ({ ref, className, children, 'data-testid': testId, ...props })=>/*#__PURE__*/ jsx(TestIdProvider, {
+import { AppShellContext } from "./AppShellContext.js";
+const AppShell = ({ ref, className, children, reveal, 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 shellContext = useMemo(()=>({
+            appeared
+        }), [
+        appeared
+    ]);
+    return /*#__PURE__*/ jsx(TestIdProvider, {
         value: testId,
-        children: /*#__PURE__*/ jsx("div", {
-            ...props,
-            ref: ref,
-            "data-slot": "app-shell",
-            "data-testid": testId,
-            className: cn('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),
-            children: children
+        children: /*#__PURE__*/ jsx(AppShellContext.Provider, {
+            value: shellContext,
+            children: /*#__PURE__*/ jsxs("div", {
+                ...props,
+                ref: composeRefs(internalRef, ref),
+                "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),
+                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
+                    })
+                ]
+            })
         })
     });
+};
 AppShell.displayName = 'AppShell';
 export { AppShell };

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

@@ -0,0 +1,6 @@
+interface AppShellContextValue {
+    appeared: boolean;
+}
+export declare const AppShellContext: import("react").Context<AppShellContextValue>;
+export declare const useAppShellAppeared: () => boolean;
+export {};

package/dist/components/AppShell/AppShellContext.js

@@ -0,0 +1,6 @@
+import { createContext, useContext } from "react";
+const AppShellContext = createContext({
+    appeared: true
+});
+const useAppShellAppeared = ()=>useContext(AppShellContext).appeared;
+export { AppShellContext, useAppShellAppeared };

package/dist/components/AppShell/AppShellHeader.js

@@ -1,14 +1,16 @@
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
+import { useAppShellAppeared } from "./AppShellContext.js";
 const AppShellHeader = ({ ref, className, children, ...props })=>{
     const testId = useTestId('header');
+    const appeared = useAppShellAppeared();
     return /*#__PURE__*/ jsx("header", {
         ...props,
         ref: ref,
         "data-slot": "app-shell-header",
         "data-testid": testId,
-        className: cn('[grid-area:header]', className),
+        className: cn('[grid-area:header] transition-opacity duration-200 ease-in-out', !appeared && 'opacity-0', className),
         children: children
     });
 };

package/dist/components/AppShell/AppShellRail.js

@@ -1,14 +1,16 @@
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
+import { useAppShellAppeared } from "./AppShellContext.js";
 const AppShellRail = ({ ref, className, children, ...props })=>{
     const testId = useTestId('rail');
+    const appeared = useAppShellAppeared();
     return /*#__PURE__*/ jsx("div", {
         ...props,
         ref: ref,
         "data-slot": "app-shell-rail",
         "data-testid": testId,
-        className: cn('[grid-area:rail]', className),
+        className: cn('[grid-area:rail] transition-opacity duration-200 ease-in-out', !appeared && 'opacity-0', className),
         children: children
     });
 };

package/dist/components/NavRail/NavRail.d.ts

@@ -4,6 +4,5 @@ export interface NavRailProps extends HTMLAttributes<HTMLElement>, TestableProps
     ref?: Ref<HTMLElement>;
     children?: ReactNode;
     collapsed?: boolean;
-    appeared?: boolean;
 }
 export declare const NavRail: FC<NavRailProps>;

package/dist/components/NavRail/NavRail.js

@@ -6,7 +6,7 @@ import { cn } from "../../utils/cn.js";
 import { TestIdProvider } from "../../utils/testId.js";
 import { navRailVariants } from "./classes.js";
 import { NavRailContextProvider } from "./NavRailContext.js";
-const NavRail = ({ ref, collapsed = false, appeared, className, children, 'data-testid': testId, ...props })=>{
+const NavRail = ({ ref, collapsed = false, className, children, 'data-testid': testId, ...props })=>{
     const internalRef = useRef(null);
     const focusPanel = useCallback(()=>{
         const panel = document.querySelector('[data-slot="nav-panel"]');
@@ -47,7 +47,7 @@ const NavRail = ({ ref, collapsed = false, appeared, className, children, 'data-
                 "data-testid": testId,
                 className: cn(navRailVariants({
                     collapsed
-                }), false === appeared && 'opacity-0', className),
+                }), className),
                 children: children
             })
         })

package/dist/components/NavRail/classes.js

@@ -1,5 +1,5 @@
 import { cva } from "class-variance-authority";
-const navRailVariants = cva('flex h-full shrink-0 flex-col overflow-hidden px-8 pt-6 pb-12 transition-[width] duration-200 ease-in-out transition-[width,opacity] duration-200 ease-in-out', {
+const navRailVariants = cva('flex h-full shrink-0 flex-col overflow-hidden px-8 pt-6 pb-12 transition-[width] duration-200 ease-in-out', {
     variants: {
         collapsed: {
             true: 'w-[48px]',

package/dist/components/SplashScreen/SplashScreen.d.ts

@@ -1,6 +1,3 @@
-import type { FC, HTMLAttributes, Ref } from 'react';
-export interface SplashScreenProps extends HTMLAttributes<HTMLDivElement> {
-    ref?: Ref<HTMLDivElement>;
-    visible?: boolean;
-}
+import type { FC } from 'react';
+import type { SplashScreenProps } from './types';
 export declare const SplashScreen: FC<SplashScreenProps>;

package/dist/components/SplashScreen/SplashScreen.js

@@ -1,57 +1,49 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
 import { cn } from "../../utils/cn.js";
 import { Logo } from "../Logo/index.js";
 import { Progress } from "../Progress/index.js";
-import { splashContentVariants, splashLogoVariants, splashProgressVariants } from "./classes.js";
-const SplashScreen = ({ ref, visible = true, className, ...props })=>{
-    const [phase, setPhase] = useState(visible ? 'enter-start' : 'exited');
-    useEffect(()=>{
-        if (visible) {
-            setPhase('enter-start');
-            let inner;
-            const outer = requestAnimationFrame(()=>{
-                inner = requestAnimationFrame(()=>{
-                    setPhase('entered');
-                });
-            });
-            return ()=>{
-                cancelAnimationFrame(outer);
-                cancelAnimationFrame(inner);
-            };
-        }
-        setPhase((prev)=>'exited' === prev || 'enter-start' === prev ? 'exited' : 'exiting');
-    }, [
-        visible
-    ]);
+import { splashContainerVariants, splashContentVariants, splashLogoVariants, splashProgressVariants } from "./classes.js";
+import { SPLASH_PHASES, getContainerStyle } from "./lib.js";
+import { useSplashPhase } from "./useSplashPhase.js";
+const SplashScreen = ({ ref, visible = true, shrinkTarget, className, children, ...props })=>{
+    const { phase, childrenRevealed, handleContainerTransitionEnd, handleContentTransitionEnd } = useSplashPhase(visible, shrinkTarget);
     if ('exited' === phase) return null;
-    const animPhase = phase;
-    return /*#__PURE__*/ jsx("div", {
+    const containerPhase = phase;
+    const contentPhase = phase;
+    return /*#__PURE__*/ jsxs("div", {
         ...props,
         "data-slot": "splash-screen",
         ref: ref,
-        className: "h-full w-full flex items-center justify-center",
-        children: /*#__PURE__*/ jsxs("div", {
-            className: cn(splashContentVariants({
-                phase: animPhase
-            }), className),
-            onTransitionEnd: ()=>{
-                if ('exiting' === phase) setPhase('exited');
-            },
-            children: [
-                /*#__PURE__*/ jsx(Logo, {
-                    className: splashLogoVariants({
-                        phase: animPhase
-                    })
+        className: cn(splashContainerVariants({
+            phase: containerPhase
+        }), className),
+        style: getContainerStyle(phase, shrinkTarget),
+        onTransitionEnd: handleContainerTransitionEnd,
+        children: [
+            SPLASH_PHASES[contentPhase] && /*#__PURE__*/ jsxs("div", {
+                className: splashContentVariants({
+                    phase: contentPhase
                 }),
-                /*#__PURE__*/ jsx(Progress, {
-                    value: null,
-                    className: splashProgressVariants({
-                        phase: animPhase
+                onTransitionEnd: handleContentTransitionEnd,
+                children: [
+                    /*#__PURE__*/ jsx(Logo, {
+                        className: splashLogoVariants({
+                            phase: contentPhase
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Progress, {
+                        value: null,
+                        className: splashProgressVariants({
+                            phase: contentPhase
+                        })
                     })
-                })
-            ]
-        })
+                ]
+            }),
+            'settled' === phase && children && /*#__PURE__*/ jsx("div", {
+                className: cn('h-full w-full transition-opacity duration-300', childrenRevealed ? 'opacity-100' : 'opacity-0'),
+                children: children
+            })
+        ]
     });
 };
 SplashScreen.displayName = 'SplashScreen';

package/dist/components/SplashScreen/classes.d.ts

@@ -1,9 +1,12 @@
+export declare const splashContainerVariants: (props?: ({
+    phase?: "enter-start" | "entered" | "content-fading" | "shrinking" | "settled" | "exiting" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const splashContentVariants: (props?: ({
-    phase?: "enter-start" | "entered" | "exiting" | null | undefined;
+    phase?: "enter-start" | "entered" | "content-fading" | "exiting" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const splashLogoVariants: (props?: ({
-    phase?: "enter-start" | "entered" | "exiting" | null | undefined;
+    phase?: "enter-start" | "entered" | "content-fading" | "exiting" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const splashProgressVariants: (props?: ({
-    phase?: "enter-start" | "entered" | "exiting" | null | undefined;
+    phase?: "enter-start" | "entered" | "content-fading" | "exiting" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/SplashScreen/classes.js

@@ -1,9 +1,22 @@
 import { cva } from "class-variance-authority";
+const splashContainerVariants = cva('flex items-center justify-center', {
+    variants: {
+        phase: {
+            'enter-start': 'h-full w-full',
+            entered: 'h-full w-full',
+            'content-fading': 'h-full w-full',
+            shrinking: 'h-full w-full',
+            settled: 'overflow-hidden',
+            exiting: 'h-full w-full'
+        }
+    }
+});
 const splashContentVariants = cva('flex h-max w-max flex-col items-center justify-center gap-12', {
     variants: {
         phase: {
             'enter-start': 'opacity-0',
             entered: 'opacity-100 transition-opacity duration-500 ease-out',
+            'content-fading': 'opacity-0 transition-opacity duration-300 ease-out',
             exiting: 'opacity-0 transition-opacity duration-300 ease-out'
         }
     }
@@ -13,6 +26,7 @@ const splashLogoVariants = cva('', {
         phase: {
             'enter-start': 'translate-y-8',
             entered: 'translate-y-0 transition-transform duration-500 ease-out',
+            'content-fading': 'translate-y-0',
             exiting: 'translate-y-0 transition-transform duration-500 ease-out'
         }
     }
@@ -22,8 +36,9 @@ const splashProgressVariants = cva('', {
         phase: {
             'enter-start': 'translate-y-16',
             entered: 'translate-y-0 transition-transform duration-500 ease-out',
+            'content-fading': 'translate-y-0',
             exiting: 'translate-y-0 transition-transform duration-500 ease-out'
         }
     }
 });
-export { splashContentVariants, splashLogoVariants, splashProgressVariants };
+export { splashContainerVariants, splashContentVariants, splashLogoVariants, splashProgressVariants };

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

@@ -1 +1,2 @@
-export { SplashScreen, type SplashScreenProps } from './SplashScreen';
+export { SplashScreen } from './SplashScreen';
+export type { SplashScreenProps, SplashScreenShrinkTarget } from './types';

package/dist/components/SplashScreen/lib.d.ts

@@ -0,0 +1,4 @@
+import type { CSSProperties } from 'react';
+import type { ContentPhase, PhaseType, SplashScreenShrinkTarget } from './types';
+export declare const SPLASH_PHASES: Record<ContentPhase, boolean>;
+export declare function getContainerStyle(phase: PhaseType, shrinkTarget?: SplashScreenShrinkTarget): CSSProperties | undefined;

package/dist/components/SplashScreen/lib.js

@@ -0,0 +1,31 @@
+const SPLASH_PHASES = {
+    'enter-start': true,
+    entered: true,
+    'content-fading': true,
+    exiting: true
+};
+function getContainerStyle(phase, shrinkTarget) {
+    if (!shrinkTarget) return;
+    const { width, height, borderRadius = 0 } = shrinkTarget;
+    switch(phase){
+        case 'content-fading':
+            return {
+                clipPath: 'inset(0 0 round 0px)',
+                transition: 'clip-path 500ms ease-in-out'
+            };
+        case 'shrinking':
+            return {
+                clipPath: `inset(calc(50% - ${height / 2}px) calc(50% - ${width / 2}px) round ${borderRadius}px)`,
+                transition: 'clip-path 500ms ease-in-out'
+            };
+        case 'settled':
+            return {
+                width,
+                height,
+                borderRadius
+            };
+        default:
+            return;
+    }
+}
+export { SPLASH_PHASES, getContainerStyle };

package/dist/components/SplashScreen/types.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes, ReactNode, Ref } from 'react';
+export type ContentPhase = 'enter-start' | 'entered' | 'content-fading' | 'exiting';
+export type PhaseType = ContentPhase | 'shrinking' | 'settled' | 'exited';
+export interface SplashScreenShrinkTarget {
+    width: number;
+    height: number;
+    borderRadius?: number;
+}
+export interface SplashScreenProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    visible?: boolean;
+    shrinkTarget?: SplashScreenShrinkTarget;
+    children?: ReactNode;
+}

package/dist/components/SplashScreen/useSplashPhase.d.ts

@@ -0,0 +1,8 @@
+import type { TransitionEvent } from 'react';
+import type { PhaseType, SplashScreenShrinkTarget } from './types';
+export declare const useSplashPhase: (visible: boolean, shrinkTarget?: SplashScreenShrinkTarget) => {
+    phase: PhaseType;
+    childrenRevealed: boolean;
+    handleContainerTransitionEnd: (e: TransitionEvent<HTMLDivElement>) => void;
+    handleContentTransitionEnd: (e: TransitionEvent<HTMLDivElement>) => void;
+};

package/dist/components/SplashScreen/useSplashPhase.js

@@ -0,0 +1,55 @@
+import { useEffect, useState } from "react";
+const doubleRaf = (callback)=>{
+    let id2;
+    const id1 = requestAnimationFrame(()=>{
+        id2 = requestAnimationFrame(callback);
+    });
+    return ()=>{
+        cancelAnimationFrame(id1);
+        cancelAnimationFrame(id2);
+    };
+};
+const useSplashPhase = (visible, shrinkTarget)=>{
+    const [phase, setPhase] = useState(()=>{
+        if (visible) return 'enter-start';
+        if (shrinkTarget) return 'settled';
+        return 'exited';
+    });
+    const [childrenRevealed, setChildrenRevealed] = useState(!visible && !!shrinkTarget);
+    useEffect(()=>{
+        if (visible) {
+            setPhase('enter-start');
+            setChildrenRevealed(false);
+            return doubleRaf(()=>setPhase('entered'));
+        }
+        setPhase((prev)=>{
+            if ('exited' === prev || 'enter-start' === prev) return shrinkTarget ? 'settled' : 'exited';
+            return shrinkTarget ? 'content-fading' : 'exiting';
+        });
+    }, [
+        visible,
+        shrinkTarget
+    ]);
+    useEffect(()=>{
+        if ('settled' !== phase) return;
+        return doubleRaf(()=>setChildrenRevealed(true));
+    }, [
+        phase
+    ]);
+    const handleContainerTransitionEnd = (e)=>{
+        if (e.target !== e.currentTarget) return;
+        if ('shrinking' === phase && 'clip-path' === e.propertyName) setPhase('settled');
+    };
+    const handleContentTransitionEnd = (e)=>{
+        e.stopPropagation();
+        if ('exiting' === phase) setPhase('exited');
+        else if ('content-fading' === phase) setPhase('shrinking');
+    };
+    return {
+        phase,
+        childrenRevealed,
+        handleContainerTransitionEnd,
+        handleContentTransitionEnd
+    };
+};
+export { useSplashPhase };

package/dist/components/TopHeader/TopHeader.d.ts

@@ -3,6 +3,5 @@ import { type TestableProps } from '../../utils/testId';
 export interface TopHeaderProps extends HTMLAttributes<HTMLDivElement>, TestableProps {
     ref?: Ref<HTMLDivElement>;
     children?: ReactNode;
-    appeared?: boolean;
 }
 export declare const TopHeader: FC<TopHeaderProps>;

package/dist/components/TopHeader/TopHeader.js

@@ -1,14 +1,14 @@
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 import { TestIdProvider } from "../../utils/testId.js";
-const TopHeader = ({ ref, appeared, className, children, 'data-testid': testId, ...props })=>/*#__PURE__*/ jsx(TestIdProvider, {
+const TopHeader = ({ ref, className, children, 'data-testid': testId, ...props })=>/*#__PURE__*/ jsx(TestIdProvider, {
         value: testId,
         children: /*#__PURE__*/ jsx("div", {
             ...props,
             ref: ref,
             "data-slot": "top-header",
             "data-testid": testId,
-            className: cn('flex items-center justify-between pl-7 pr-12 py-6', 'transition-opacity duration-200 ease-in-out', false === appeared && 'opacity-0', className),
+            className: cn('flex items-center justify-between pl-7 pr-12 py-6', className),
             children: children
         })
     });

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
   "version": "0.53.1",
-  "generatedAt": "2026-06-03T21:17:22.457Z",
+  "generatedAt": "2026-06-04T00:14:48.977Z",
   "components": [
     {
       "name": "Accordion",
@@ -3711,7 +3711,7 @@
         },
         {
           "name": "WithCard",
-          "code": "() => (\n  <div className='relative h-full w-full'>\n    <AnimatedBackground />\n\n    <Card className='absolute top-1/2 left-1/2 -translate-1/2 w-[300px] h-max'>\n      <CardHeader>\n        <CardTitle>Sign In</CardTitle>\n      </CardHeader>\n      <CardContent>\n        <p className='text-sm text-text-secondary'>\n          Decorative background renders behind interactive content.\n        </p>\n      </CardContent>\n    </Card>\n  </div>\n)"
+          "code": "() => (\n  <div className='relative h-screen w-screen'>\n    <AnimatedBackground />\n\n    <Card className='absolute top-1/2 left-1/2 -translate-1/2 w-[300px] h-max'>\n      <CardHeader>\n        <CardTitle>Sign In</CardTitle>\n      </CardHeader>\n      <CardContent>\n        <p className='text-sm text-text-secondary'>\n          Decorative background renders behind interactive content.\n        </p>\n      </CardContent>\n    </Card>\n  </div>\n)"
         }
       ]
     },
@@ -3719,6 +3719,16 @@
       "name": "AppShell",
       "importPath": "@wallarm-org/design-system/AppShell",
       "props": [
+        {
+          "name": "reveal",
+          "type": "boolean | undefined",
+          "required": false
+        },
+        {
+          "name": "appeared",
+          "type": "boolean | undefined",
+          "required": false
+        },
         {
           "name": "defaultChecked",
           "type": "boolean | undefined",
@@ -4821,7 +4831,7 @@
       "examples": [
         {
           "name": "Basic",
-          "code": "() => {\n  const pathname = useLocationPathname();\n  const activeProduct = deriveProduct(pathname);\n\n  const [appeared, setAppeared] = useState(true);\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 appeared={appeared}>\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} appeared={appeared}>\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={() => setAppeared(v => !v)}>\n            {appeared ? 'Hide menu' : 'Show menu'}\n          </Button>\n\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}"
+          "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}"
         }
       ]
     },
@@ -28211,11 +28221,6 @@
           "required": false,
           "defaultValue": "false"
         },
-        {
-          "name": "appeared",
-          "type": "boolean | undefined",
-          "required": false
-        },
         {
           "name": "defaultChecked",
           "type": "boolean | undefined",
@@ -49258,6 +49263,11 @@
           "required": false,
           "defaultValue": "true"
         },
+        {
+          "name": "shrinkTarget",
+          "type": "SplashScreenShrinkTarget | undefined",
+          "required": false
+        },
         {
           "name": "defaultChecked",
           "type": "boolean | undefined",
@@ -49535,6 +49545,9 @@
           "options": [
             "enter-start",
             "entered",
+            "content-fading",
+            "shrinking",
+            "settled",
             "exiting"
           ]
         }
@@ -49548,6 +49561,10 @@
         {
           "name": "Toggle",
           "code": "() => {\n  const [visible, setVisible] = useState(true);\n\n  return (\n    <VStack align='center'>\n      <div className='flex h-400 w-400 items-center justify-center'>\n        <SplashScreen visible={visible} />\n      </div>\n\n      <Button type='button' onClick={() => setVisible(v => !v)}>\n        {visible ? 'Hide' : 'Show'}\n      </Button>\n    </VStack>\n  );\n}"
+        },
+        {
+          "name": "ShrinkToCard",
+          "code": "() => {\n  const [visible, setVisible] = useState(true);\n\n  useEffect(() => {\n    if (!visible) return;\n\n    const timer = window.setTimeout(() => {\n      setVisible(false);\n    }, 2000);\n\n    return () => window.clearTimeout(timer);\n  }, [visible]);\n\n  return (\n    <div className='relative h-screen w-screen'>\n      <AnimatedBackground />\n\n      <div className='absolute inset-0 flex items-center justify-center'>\n        <SplashScreen\n          visible={visible}\n          shrinkTarget={{ width: 480, height: 600, borderRadius: 12 }}\n          className='bg-bg-page-bg shadow-lg'\n        >\n          <div className='flex h-full flex-col items-center justify-center gap-4 p-8'>\n            <h2 className='text-lg font-semibold text-text-primary'>Welcome</h2>\n            <p className='text-center text-sm text-text-secondary'>\n              Content revealed after splash animation.\n            </p>\n            <Button type='button' onClick={() => setVisible(true)}>\n              Replay\n            </Button>\n          </div>\n        </SplashScreen>\n      </div>\n    </div>\n  );\n}"
         }
       ]
     },
@@ -54727,11 +54744,6 @@
       "name": "TopHeader",
       "importPath": "@wallarm-org/design-system/TopHeader",
       "props": [
-        {
-          "name": "appeared",
-          "type": "boolean | undefined",
-          "required": false
-        },
         {
           "name": "defaultChecked",
           "type": "boolean | undefined",

package/package.json

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