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

package/dist/components/AnimatedBackground/AnimatedBackground.d.ts

@@ -26,8 +26,6 @@ export interface AnimatedBackgroundProps extends Omit<CanvasHTMLAttributes<HTMLC
     accentColorVar?: string;
     /** CSS custom-property name for the base fill. */
     baseColorVar?: string;
-    /** CSS custom-property name for the clean leading-edge scan line. */
-    sweepColorVar?: string;
     /** Force a single static frame (also auto-true under reduced motion). */
     paused?: boolean;
 }

package/dist/components/AnimatedBackground/lib.js

@@ -23,10 +23,9 @@ const resolveOptions = (props)=>{
         bloomAlpha: props.bloomAlpha ?? 0.2,
         maxDotSize: props.maxDotSize ?? d.maxDotSize,
         tilt: props.tilt ?? 16,
-        dotColorVar: props.dotColorVar ?? '--login-bg-dot',
-        accentColorVar: props.accentColorVar ?? '--login-bg-accent',
-        baseColorVar: props.baseColorVar ?? '--login-bg-base',
-        sweepColorVar: props.sweepColorVar ?? '--login-bg-sweep'
+        dotColorVar: props.dotColorVar ?? '--animated-bg-dot',
+        accentColorVar: props.accentColorVar ?? '--animated-bg-accent-dot',
+        baseColorVar: props.baseColorVar ?? '--color-component-app-shell-bg'
     };
 };
 export { resolveOptions };

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

@@ -21,5 +21,4 @@ export interface EngineOptions {
     dotColorVar: string;
     accentColorVar: string;
     baseColorVar: string;
-    sweepColorVar: string;
 }

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

@@ -4,5 +4,6 @@ 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, className, children, 'data-testid': testId, ...props })=>{
+const NavRail = ({ ref, collapsed = false, appeared, 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, className, children, 'data-testid': t
                 "data-testid": testId,
                 className: cn(navRailVariants({
                     collapsed
-                }), className),
+                }), false === appeared && 'opacity-0', 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', {
+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', {
     variants: {
         collapsed: {
             true: 'w-[48px]',

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

@@ -3,5 +3,6 @@ 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, className, children, 'data-testid': testId, ...props })=>/*#__PURE__*/ jsx(TestIdProvider, {
+const TopHeader = ({ ref, appeared, 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', className),
+            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),
             children: children
         })
     });

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.53.0",
-  "generatedAt": "2026-06-03T14:42:12.339Z",
+  "version": "0.53.1",
+  "generatedAt": "2026-06-03T21:17:22.457Z",
   "components": [
     {
       "name": "Accordion",
@@ -3406,12 +3406,6 @@
           "required": false,
           "description": "CSS custom-property name for the base fill."
         },
-        {
-          "name": "sweepColorVar",
-          "type": "string | undefined",
-          "required": false,
-          "description": "CSS custom-property name for the clean leading-edge scan line."
-        },
         {
           "name": "paused",
           "type": "boolean | undefined",
@@ -4827,7 +4821,7 @@
       "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 { 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            ) : (\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='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}"
+          "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}"
         }
       ]
     },
@@ -28217,6 +28211,11 @@
           "required": false,
           "defaultValue": "false"
         },
+        {
+          "name": "appeared",
+          "type": "boolean | undefined",
+          "required": false
+        },
         {
           "name": "defaultChecked",
           "type": "boolean | undefined",
@@ -54728,6 +54727,11 @@
       "name": "TopHeader",
       "importPath": "@wallarm-org/design-system/TopHeader",
       "props": [
+        {
+          "name": "appeared",
+          "type": "boolean | undefined",
+          "required": false
+        },
         {
           "name": "defaultChecked",
           "type": "boolean | undefined",

package/dist/theme/components/login-background.css

@@ -1,13 +1,9 @@
 :root {
-    --login-bg-dot: var(--color-slate-600);
-    --login-bg-accent: var(--color-red-500);
-    --login-bg-base: var(--color-slate-50);
-    --login-bg-sweep: var(--color-slate-950);
+    --animated-bg-dot: var(--color-slate-500);
+    --animated-bg-accent-dot: var(--color-red-400);
 }
 
 [data-theme="dark"] {
-    --login-bg-dot: var(--color-slate-400);
-    --login-bg-accent: var(--color-red-200);
-    --login-bg-base: var(--color-slate-950);
-    --login-bg-sweep: var(--color-slate-50);
+    --animated-bg-dot: var(--color-slate-500);
+    --animated-bg-accent-dot: var(--color-red-400);
 }

package/package.json

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