@wallarm-org/design-system 1.24.0 → 1.26.0

package/dist/components/NavRail/NavRailSkeleton.js

@@ -2,20 +2,40 @@ import { jsx } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
 import { Skeleton } from "../Skeleton/index.js";
+import { navRailSkeletonVariants } from "./classes.js";
+import { useNavRailContext } from "./NavRailContext.js";
+const SKELETON_BARS = {
+    expanded: {
+        width: '100%',
+        height: '28px'
+    },
+    collapsed: {
+        width: '28px',
+        height: '28px'
+    },
+    compact: {
+        width: '54px',
+        height: '38px'
+    }
+};
 const NavRailSkeleton = ({ ref, className, count = 4, ...props })=>{
+    const { mode } = useNavRailContext();
     const testId = useTestId('skeleton');
+    const bar = SKELETON_BARS[mode];
     return /*#__PURE__*/ jsx("div", {
         ...props,
         ref: ref,
         "data-slot": "nav-rail-skeleton",
         "data-testid": testId,
-        className: cn('flex flex-col gap-6', className),
+        className: cn(navRailSkeletonVariants({
+            mode
+        }), className),
         children: Array.from({
             length: count
         }, (_, i)=>/*#__PURE__*/ jsx(Skeleton, {
-                width: "100%",
-                height: "28px",
-                rounded: 6
+                width: bar.width,
+                height: bar.height,
+                rounded: 10
             }, i))
     });
 };

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

@@ -1,6 +1,18 @@
 export declare const navRailVariants: (props?: ({
-    collapsed?: boolean | null | undefined;
+    mode?: "collapsed" | "compact" | "expanded" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const navRailBodyVariants: (props?: ({
+    mode?: "collapsed" | "compact" | "expanded" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const navRailFooterVariants: (props?: ({
+    mode?: "collapsed" | "compact" | "expanded" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const navRailSkeletonVariants: (props?: ({
+    mode?: "collapsed" | "compact" | "expanded" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const navRailItemVariants: (props?: ({
+    mode?: "collapsed" | "compact" | "expanded" | null | undefined;
     active?: boolean | null | undefined;
+    avatar?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const navRailItemCompactLabelClassName = "line-clamp-2 w-56 shrink-0 text-center text-2xs font-medium text-ellipsis break-normal";

package/dist/components/NavRail/classes.js

@@ -1,24 +1,70 @@
 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', {
     variants: {
-        collapsed: {
-            true: 'w-[48px]',
-            false: 'w-[184px]'
+        mode: {
+            expanded: 'w-[184px]',
+            collapsed: 'w-[48px]',
+            compact: 'w-[78px]'
         }
     },
     defaultVariants: {
-        collapsed: false
+        mode: 'expanded'
     }
 });
-const navRailItemVariants = cva('overlay flex h-32 w-full cursor-pointer items-center rounded-6 p-8 text-sm text-text-primary transition-colors outline-none data-[state=open]:overlay-states-primary-active data-[state=open]:opacity-100', {
+const railGap = {
+    expanded: 'gap-2',
+    collapsed: 'gap-2',
+    compact: 'gap-4'
+};
+const navRailBodyVariants = cva('flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-none [scrollbar-width:thin]', {
     variants: {
+        mode: railGap
+    },
+    defaultVariants: {
+        mode: 'expanded'
+    }
+});
+const navRailFooterVariants = cva('mt-auto flex flex-col', {
+    variants: {
+        mode: railGap
+    },
+    defaultVariants: {
+        mode: 'expanded'
+    }
+});
+const navRailSkeletonVariants = cva('flex flex-col items-center py-2', {
+    variants: {
+        mode: {
+            expanded: 'gap-6',
+            collapsed: 'gap-6',
+            compact: 'gap-8'
+        }
+    },
+    defaultVariants: {
+        mode: 'expanded'
+    }
+});
+const navRailItemVariants = cva('overlay flex w-full cursor-pointer items-center rounded-10 text-sm text-text-primary transition-colors outline-none data-[state=open]:overlay-states-primary-active', {
+    variants: {
+        mode: {
+            expanded: 'h-32 p-8',
+            collapsed: 'h-32 p-8',
+            compact: 'min-h-42 flex-col justify-center gap-2 px-8 py-6'
+        },
         active: {
-            true: 'overlay-states-primary-active',
-            false: 'opacity-85 hover:opacity-100 hover:overlay-states-primary-hover focus-visible:opacity-100 focus-visible:overlay-states-primary-hover active:overlay-states-primary-pressed'
+            true: 'overlay-states-primary-active branded:overlay-states-brand-active branded:data-[state=open]:overlay-states-brand-active branded:text-text-brand',
+            false: 'hover:overlay-states-primary-hover focus-visible:overlay-states-primary-hover active:overlay-states-primary-pressed'
+        },
+        avatar: {
+            true: 'branded:hover:overlay-states-brand-hover branded:focus-visible:overlay-states-brand-hover branded:active:overlay-states-brand-pressed branded:data-[state=open]:overlay-states-brand-active',
+            false: ''
         }
     },
     defaultVariants: {
-        active: false
+        mode: 'expanded',
+        active: false,
+        avatar: false
     }
 });
-export { navRailItemVariants, navRailVariants };
+const navRailItemCompactLabelClassName = 'line-clamp-2 w-56 shrink-0 text-center text-2xs font-medium text-ellipsis break-normal';
+export { navRailBodyVariants, navRailFooterVariants, navRailItemCompactLabelClassName, navRailItemVariants, navRailSkeletonVariants, navRailVariants };

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

@@ -1,6 +1,6 @@
 export { NavRail, type NavRailProps } from './NavRail';
 export { NavRailBody, type NavRailBodyProps } from './NavRailBody';
-export { useNavRailContext } from './NavRailContext';
+export { type NavRailMode, useNavRailContext } from './NavRailContext';
 export { NavRailFooter, type NavRailFooterProps } from './NavRailFooter';
 export { NavRailItem, type NavRailItemProps } from './NavRailItem';
 export { NavRailSeparator, type NavRailSeparatorProps } from './NavRailSeparator';

package/dist/components/SearchModal/SearchModal.js

@@ -29,6 +29,7 @@ const SearchModal = ({ children, open, onOpenChange, onQueryChange, 'data-testid
         children: /*#__PURE__*/ jsx("div", {
             "data-slot": "search-modal",
             "data-testid": testId,
+            className: "contents",
             children: /*#__PURE__*/ jsx(Dialog.Root, {
                 open: open,
                 onOpenChange: handleOpenChange,

package/dist/components/Skeleton/Skeleton.d.ts

@@ -3,7 +3,7 @@ import { type VariantProps } from 'class-variance-authority';
 import type { TestableProps } from '../../utils/testId';
 declare const skeletonVariants: (props?: ({
     transparent?: boolean | null | undefined;
-    rounded?: "full" | "none" | 2 | 4 | 6 | 8 | 12 | 16 | 24 | 32 | null | undefined;
+    rounded?: "full" | "none" | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 24 | 32 | null | undefined;
     withDimensions?: boolean | null | undefined;
     withChildren?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/Skeleton/Skeleton.js

@@ -14,6 +14,7 @@ const skeletonVariants = cva(cn('overflow-hidden', 'animate-skeleton'), {
             4: 'rounded-4',
             6: 'rounded-6',
             8: 'rounded-8',
+            10: 'rounded-10',
             12: 'rounded-12',
             16: 'rounded-16',
             24: 'rounded-24',

package/dist/components/ThemeProvider/ThemeProvider.d.ts

@@ -1,9 +1,12 @@
 import { type FC, type ReactNode } from 'react';
-import type { Theme } from './types';
+import type { FrameStyle, Theme } from './types';
 interface ThemeProviderProps {
     children: ReactNode;
     defaultTheme?: Theme;
     storageKey?: string;
+    /** Frame style used until the user picks one. */
+    defaultFrameStyle?: FrameStyle;
+    frameStyleStorageKey?: string;
 }
 export declare const ThemeProvider: FC<ThemeProviderProps>;
 export {};

package/dist/components/ThemeProvider/ThemeProvider.js

@@ -1,23 +1,39 @@
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
 import { ThemeProviderContext } from "./ThemeProviderContext.js";
-const ThemeProvider = ({ children, defaultTheme = 'light', storageKey = 'wasd-theme', ...props })=>{
+const ThemeProvider = ({ children, defaultTheme = 'light', storageKey = 'wasd-theme', defaultFrameStyle = 'neutral', frameStyleStorageKey = 'wasd-frame-style', ...props })=>{
     const [theme, setTheme] = useState(()=>localStorage.getItem(storageKey) || defaultTheme);
+    const [frameStyle, setFrameStyle] = useState(()=>{
+        const stored = localStorage.getItem(frameStyleStorageKey);
+        return 'neutral' === stored || 'branded' === stored ? stored : defaultFrameStyle;
+    });
     useEffect(()=>{
         const root = window.document.documentElement;
         root.setAttribute('data-theme', theme);
     }, [
         theme
     ]);
+    useEffect(()=>{
+        window.document.documentElement.setAttribute('data-frame-style', frameStyle);
+    }, [
+        frameStyle
+    ]);
     const value = useMemo(()=>({
             theme,
             setTheme: (theme)=>{
                 localStorage.setItem(storageKey, theme);
                 setTheme(theme);
+            },
+            frameStyle,
+            setFrameStyle: (frameStyle)=>{
+                localStorage.setItem(frameStyleStorageKey, frameStyle);
+                setFrameStyle(frameStyle);
             }
         }), [
         theme,
-        storageKey
+        storageKey,
+        frameStyle,
+        frameStyleStorageKey
     ]);
     return /*#__PURE__*/ jsx(ThemeProviderContext.Provider, {
         ...props,

package/dist/components/ThemeProvider/ThemeProviderContext.d.ts

@@ -1,6 +1,8 @@
-import type { Theme } from './types';
+import type { FrameStyle, Theme } from './types';
 export interface ThemeProviderState {
     theme: Theme;
     setTheme: (theme: Theme) => void;
+    frameStyle: FrameStyle;
+    setFrameStyle: (frameStyle: FrameStyle) => void;
 }
 export declare const ThemeProviderContext: import("react").Context<ThemeProviderState>;

package/dist/components/ThemeProvider/ThemeProviderContext.js

@@ -1,6 +1,8 @@
 import { createContext } from "react";
 const ThemeProviderContext = createContext({
     theme: 'light',
-    setTheme: ()=>null
+    setTheme: ()=>null,
+    frameStyle: 'neutral',
+    setFrameStyle: ()=>null
 });
 export { ThemeProviderContext };

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

@@ -1,3 +1,3 @@
 export { ThemeProvider } from './ThemeProvider';
-export type { Theme } from './types';
+export type { FrameStyle, Theme } from './types';
 export { useTheme } from './useTheme';

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

@@ -1 +1,3 @@
 export type Theme = 'dark' | 'light';
+/** The Frame's look inside a theme: the neutral gray surround, or the warm branded one. */
+export type FrameStyle = 'neutral' | 'branded';

package/dist/index.d.ts

@@ -52,7 +52,7 @@ export { Link, type LinkProps } from './components/Link';
 export { List, ListIcon, type ListIconProps, ListItem, type ListItemProps, type ListProps, } from './components/List';
 export { Loader, type LoaderProps } from './components/Loader';
 export { Logo, type LogoProps, type LogoSize, type LogoStyle, type LogoType, } from './components/Logo';
-export { NavRail, NavRailBody, type NavRailBodyProps, NavRailFooter, type NavRailFooterProps, NavRailItem, type NavRailItemProps, type NavRailProps, NavRailSeparator, type NavRailSeparatorProps, NavRailSkeleton, type NavRailSkeletonProps, } from './components/NavRail';
+export { NavRail, NavRailBody, type NavRailBodyProps, NavRailFooter, type NavRailFooterProps, NavRailItem, type NavRailItemProps, type NavRailMode, type NavRailProps, NavRailSeparator, type NavRailSeparatorProps, NavRailSkeleton, type NavRailSkeletonProps, } from './components/NavRail';
 export { NumberInput, type NumberInputProps } from './components/NumberInput';
 export { NumericBadge, type NumericBadgeProps, } from './components/NumericBadge';
 export { OverflowTooltip, OverflowTooltipContent, type OverflowTooltipContentProps, type OverflowTooltipProps, } from './components/OverflowTooltip';
@@ -87,7 +87,7 @@ export { Tabs, TabsButton, TabsContent, TabsLineActions, TabsList, TabsSeparator
 export { Tag, TagClose, type TagProps } from './components/Tag';
 export { Text, type TextProps } from './components/Text';
 export { Textarea, type TextareaProps } from './components/Textarea';
-export { type Theme, ThemeProvider, useTheme, } from './components/ThemeProvider';
+export { type FrameStyle, type Theme, ThemeProvider, useTheme, } from './components/ThemeProvider';
 export { TimeInput, type TimeInputProps } from './components/TimeInput';
 export { Timeline, TimelineConnector, type TimelineConnectorProps, TimelineContent, type TimelineContentProps, TimelineDescription, type TimelineDescriptionProps, TimelineIndicator, type TimelineIndicatorProps, TimelineItem, type TimelineItemProps, type TimelineProps, TimelineSeparator, type TimelineSeparatorProps, TimelineTitle, type TimelineTitleProps, } from './components/Timeline';
 export { Toast, ToastActions, Toaster, toaster } from './components/Toast';

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "1.23.2",
-  "generatedAt": "2026-09-27T21:57:31.353Z",
+  "version": "1.25.0",
+  "generatedAt": "2026-09-28T09:09:05.490Z",
   "components": [
     {
       "name": "Accordion",
@@ -5341,17 +5341,22 @@
       "examples": [
         {
           "name": "Basic",
-          "code": "({ ambient }) => {\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 ambient={ambient}>\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}",
-          "description": "The three regions composed once — `AppShellHeader`, `AppShellRail`, `AppShellRemote` — with the content surface being the only part that scrolls."
+          "code": "({ ambient }) => <Shell ambient={ambient} />",
+          "description": "The three regions composed once — `AppShellHeader`, `AppShellRail`, `AppShellRemote` — with the content surface being the only part that scrolls. Pick a product in the rail to drill into it, and the account item at the bottom for appearance and sidebar mode."
+        },
+        {
+          "name": "Loading",
+          "code": "({ ambient, loading }) => (\n  <Shell ambient={ambient} loading={loading} simulateProductLoading />\n)",
+          "description": "How the shell looks while the platform loads. The header actions and the product rail hold skeletons that sit exactly where the real items land, so nothing jumps when they arrive. Turn `loading` off in Controls to watch the swap. Opening a product also shows its own panel and content loading."
         },
         {
           "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}",
+          "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 railMode = railModeFor(sidebarMode, 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 mode={railMode}>\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}",
           "description": "`reveal` animates the chrome in on the first application load only. Leave it unset for an ordinary screen; this exists for prototyping the boot moment itself."
         },
         {
           "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}",
+          "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 railMode = railModeFor(sidebarMode, 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 mode={railMode}>\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}",
           "description": "The whole entrance: the splash hands off, the content surface expands from the sign-in card into the full shell. `onRevealed` fires when it has settled."
         }
       ]
@@ -44743,10 +44748,17 @@
       "name": "NavRail",
       "importPath": "@wallarm-org/design-system/NavRail",
       "props": [
+        {
+          "name": "mode",
+          "type": "NavRailMode | undefined",
+          "required": false,
+          "description": "How the rail lays out its items: `expanded` (icon beside label), `collapsed` (icon only) or\n`compact` (icon over a short label). Wins over `collapsed` when both are set."
+        },
         {
           "name": "collapsed",
           "type": "boolean | undefined",
           "required": false,
+          "description": "Shorthand for `mode='collapsed'`, kept so existing hosts keep working. Prefer `mode`.",
           "defaultValue": "false"
         },
         {
@@ -45022,7 +45034,16 @@
       ],
       "variants": [
         {
-          "name": "collapsed",
+          "name": "mode",
+          "options": [
+            "expanded",
+            "collapsed",
+            "compact"
+          ],
+          "defaultValue": "expanded"
+        },
+        {
+          "name": "active",
           "options": [
             "true",
             "false"
@@ -45030,7 +45051,7 @@
           "defaultValue": "false"
         },
         {
-          "name": "active",
+          "name": "avatar",
           "options": [
             "true",
             "false"
@@ -45619,6 +45640,19 @@
               "required": false,
               "defaultValue": "false"
             },
+            {
+              "name": "avatar",
+              "type": "boolean | undefined",
+              "required": false,
+              "description": "Seats the icon on a soft plate, for the signed-in user's item at the foot of the rail.",
+              "defaultValue": "false"
+            },
+            {
+              "name": "avatarSrc",
+              "type": "string | undefined",
+              "required": false,
+              "description": "User photo for the plate (implies `avatar`). The icon stays underneath and returns if the photo fails to load."
+            },
             {
               "name": "download",
               "type": "any",
@@ -78930,7 +78964,7 @@
         },
         {
           "name": "rounded",
-          "type": "{ none: string; full: string; 2: string; 4: string; 6: string; 8: string; 12: string; 16: string; 24: string; 32: string; }",
+          "type": "{ none: string; full: string; 2: string; 4: string; 6: string; 8: string; 10: string; 12: string; 16: string; 24: string; 32: string; }",
           "required": false,
           "defaultValue": "6"
         },
@@ -78979,6 +79013,7 @@
             "4",
             "6",
             "8",
+            "10",
             "12",
             "16",
             "24",
@@ -101447,6 +101482,10 @@
           "name": "--radius-8",
           "value": "8px"
         },
+        {
+          "name": "--radius-10",
+          "value": "10px"
+        },
         {
           "name": "--radius-12",
           "value": "12px"
@@ -102173,6 +102212,10 @@
           "name": "--color-component-app-shell-bg",
           "value": "var(--color-slate-100)"
         },
+        {
+          "name": "--color-component-app-shell-bg-branded",
+          "value": "var(--color-w-orange-50)"
+        },
         {
           "name": "--color-component-app-shell-ambient-dot",
           "value": "--alpha(var(--color-slate-500) / 28%)"
@@ -103251,6 +103294,10 @@
           "name": "--color-component-app-shell-bg",
           "value": "var(--color-slate-975)"
         },
+        {
+          "name": "--color-component-app-shell-bg-branded",
+          "value": "#160e1a"
+        },
         {
           "name": "--color-component-app-shell-ambient-dot",
           "value": "--alpha(var(--color-slate-50) / 15%)"

package/dist/theme/components/app-shell.css

@@ -40,6 +40,17 @@
     --app-shell-ambient-grain-blend: screen;
 }
 
+/* Branded Frame (WDS-182): multiplying or screening gray noise over the warm base dulls it
+   toward gray. Soft-light adds the same texture and keeps the orange. */
+:root[data-frame-style='branded'] {
+    --app-shell-ambient-grain-opacity: 0.6;
+    --app-shell-ambient-grain-blend: soft-light;
+}
+
+:root[data-theme='dark'][data-frame-style='branded'] {
+    --app-shell-ambient-grain-opacity: 0.35;
+}
+
 @utility app-shell-ambient {
     position: absolute;
     inset: 0;

package/dist/theme/index.css

@@ -31,6 +31,10 @@
 @import './components/app-shell.css';
 @import './components/chart.css';
 
+/* Frame style (WDS-182): styles that apply only while the user has picked the Branded Frame.
+   ThemeProvider writes `data-frame-style` on <html>, so this reaches every micro-frontend. */
+@custom-variant branded (&:where([data-frame-style='branded'] *));
+
 [data-scope='scroll-area'][data-part='viewport'] {
     scrollbar-width: none;
     &::-webkit-scrollbar {

package/dist/theme/radius.css

@@ -3,6 +3,7 @@
     --radius-4: 4px;
     --radius-6: 6px;
     --radius-8: 8px;
+    --radius-10: 10px;
     --radius-12: 12px;
     --radius-16: 16px;
     --radius-24: 24px;

package/dist/theme/semantic.css

@@ -215,6 +215,11 @@
     --color-component-toast-ic-success: var(--color-green-400);
     --color-component-toast-ic-info: var(--color-blue-400);
     --color-component-app-shell-bg: var(--color-slate-100);
+    /* Branded Frame (WDS-182): the Frame fill when the user picks the Branded Frame style.
+     * Swapped in for the token above under `[data-frame-style='branded']` (end of file), so
+     * AppShell follows with no component change; the Ambient tones below get their own
+     * Branded recipe at the end of the file. */
+    --color-component-app-shell-bg-branded: var(--color-w-orange-50);
 
     /* AppShell Frame ambient — the soft spots and dot raster painted into the
      * Frame (header + rail). Every tone derives from the Frame token above, so
@@ -661,6 +666,7 @@
     --color-component-toast-ic-success: var(--color-green-600);
     --color-component-toast-ic-info: var(--color-blue-600);
     --color-component-app-shell-bg: var(--color-slate-975);
+    --color-component-app-shell-bg-branded: #160e1a;
 
     /* AppShell Frame ambient (dark) — on a near-black base only lifts read, so
      * every spot mixes toward white. */
@@ -876,3 +882,76 @@
     --color-data-viz-1: #ffffff;
     --temp-token: #ffffff;
 }
+
+/* ========================================
+ * FRAME STYLE: BRANDED (WDS-182)
+ * ThemeProvider writes `data-frame-style` on <html>. Branded is not a value swap like
+ * dark: components switch to the existing brand tokens through the `branded:` variant
+ * (index.css). Only the Frame base and the Ambient tones change here. These rules are
+ * unlayered, so they beat the light theme values in `@layer theme`; the doubled
+ * specificity of `:root[...]` beats `[data-theme='dark']`.
+ *
+ * The neutral Ambient recipe mixes the base toward white/black in oklch. The achromatic
+ * end has no hue, so on a pale orange base the tones lose theirs and read gray. Branded
+ * tints the spots toward the brand oranges in oklab instead, which keeps the hue, and
+ * lifts only part-way to white so they stay warm. The grain's blend lives in app-shell.css.
+ * ======================================== */
+:root[data-frame-style='branded'] {
+    --color-component-app-shell-bg: var(--color-component-app-shell-bg-branded);
+    --color-component-app-shell-ambient-lift: color-mix(
+        in oklab,
+        var(--color-component-app-shell-bg),
+        white 40%
+    );
+    --color-component-app-shell-ambient-lift-soft: color-mix(
+        in srgb,
+        color-mix(in oklab, var(--color-component-app-shell-bg), white 25%) 70%,
+        transparent
+    );
+    --color-component-app-shell-ambient-shade: color-mix(
+        in srgb,
+        color-mix(in oklab, var(--color-component-app-shell-bg), var(--color-w-orange-300) 30%) 70%,
+        transparent
+    );
+    --color-component-app-shell-ambient-shade-soft: color-mix(
+        in srgb,
+        color-mix(in oklab, var(--color-component-app-shell-bg), var(--color-w-orange-200) 30%) 65%,
+        transparent
+    );
+    --color-component-app-shell-ambient-header: color-mix(
+        in srgb,
+        color-mix(in oklab, var(--color-component-app-shell-bg), var(--color-w-orange-300) 25%) 22%,
+        transparent
+    );
+    --color-component-app-shell-ambient-dot: --alpha(var(--color-w-orange-500) / 28%);
+}
+
+/* Dark: only a faint warm glow toward the deepest brand oranges, as quiet as the neutral lifts. */
+:root[data-theme='dark'][data-frame-style='branded'] {
+    --color-component-app-shell-ambient-lift: color-mix(
+        in srgb,
+        color-mix(in oklab, var(--color-component-app-shell-bg), var(--color-w-orange-900) 10%) 95%,
+        transparent
+    );
+    --color-component-app-shell-ambient-lift-soft: color-mix(
+        in srgb,
+        color-mix(in oklab, var(--color-component-app-shell-bg), var(--color-w-orange-900) 14%) 70%,
+        transparent
+    );
+    --color-component-app-shell-ambient-shade: color-mix(
+        in srgb,
+        color-mix(in oklab, var(--color-component-app-shell-bg), var(--color-w-orange-900) 12%) 60%,
+        transparent
+    );
+    --color-component-app-shell-ambient-shade-soft: color-mix(
+        in srgb,
+        color-mix(in oklab, var(--color-component-app-shell-bg), var(--color-w-orange-950) 18%) 95%,
+        transparent
+    );
+    --color-component-app-shell-ambient-header: color-mix(
+        in srgb,
+        color-mix(in oklab, var(--color-component-app-shell-bg), var(--color-w-orange-900) 10%) 30%,
+        transparent
+    );
+    --color-component-app-shell-ambient-dot: --alpha(var(--color-w-orange-300) / 15%);
+}

package/package.json

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