@wallarm-org/design-system 0.53.0 → 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/hooks/useOverflowItems.d.ts

@@ -1,10 +1,8 @@
 import { type ReactElement, type RefObject } from 'react';
 export interface UseOverflowItemsOptions<T> {
     /**
-     * Invariant: a given `items` array identity must always render to the same
-     * widths. Measurements are cached by array identity regardless of the
-     * renderers/reserveSpace, so changing those to alter widths needs a fresh
-     * array.
+     * Invariant: measurements are cached by array identity, so changing the
+     * renderers/reserveSpace to alter widths needs a fresh array.
      */
     items: T[];
     renderItem: (item: T) => ReactElement;

package/dist/hooks/useOverflowItems.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useLayoutEffect, useRef, useState } from "react";
 import { calculateVisibleCount } from "./useOverflowItems.helpers.js";
+import { observeOverflowResize } from "./useOverflowItems.observer.js";
 import { scheduleOverflowMeasurement } from "./useOverflowItems.scheduler.js";
 const crossMountCache = new WeakMap();
 function useOverflowItems({ items, renderItem, renderMeasurementItem, overflowRenderer, reserveSpace = 60 }) {
@@ -18,87 +19,104 @@ function useOverflowItems({ items, renderItem, renderMeasurementItem, overflowRe
     const cacheRef = useRef({
         widths: [],
         gap: 0,
-        indicatorWidth: reserveSpace
+        indicatorWidth: reserveSpace,
+        lastCount: 0
     });
     const recompute = useCallback((availableWidth)=>{
         const container = containerRef.current;
         if (!container) return;
+        const width = availableWidth ?? container.offsetWidth;
+        if (0 === width) return;
         const { widths, gap, indicatorWidth } = cacheRef.current;
         if (0 === widths.length) return;
         const next = calculateVisibleCount({
             itemWidths: widths,
             gap,
-            availableWidth: availableWidth ?? container.offsetWidth,
+            availableWidth: width,
             indicatorWidth
         });
         const entry = crossMountCache.get(itemsRef.current);
         if (entry) entry.lastCount = next;
         setVisibleCount((prev)=>prev === next ? prev : next);
     }, []);
+    const pendingMeasureRef = useRef(false);
+    const measure = useCallback(()=>{
+        const container = containerRef.current;
+        if (container && 0 === container.offsetWidth) return ()=>{
+            pendingMeasureRef.current = true;
+        };
+        const gap = container ? Number.parseFloat(getComputedStyle(container).gap || '0') || 0 : 0;
+        const widths = measurementRefs.current.slice(0, items.length).map((ref)=>ref?.offsetWidth ?? 0);
+        const indicatorWidth = indicatorRef.current?.offsetWidth || reserveSpace;
+        const availableWidth = container?.offsetWidth ?? 0;
+        return ()=>{
+            pendingMeasureRef.current = false;
+            const entry = {
+                widths,
+                gap,
+                indicatorWidth,
+                lastCount: items.length
+            };
+            cacheRef.current = entry;
+            crossMountCache.set(items, entry);
+            recompute(availableWidth);
+            measurementLayerRef.current?.style.setProperty('display', 'none');
+        };
+    }, [
+        items,
+        reserveSpace,
+        recompute
+    ]);
+    const measureRef = useRef(measure);
+    measureRef.current = measure;
+    const recomputeRead = useCallback(()=>{
+        const availableWidth = containerRef.current?.offsetWidth ?? 0;
+        return ()=>recompute(availableWidth);
+    }, [
+        recompute
+    ]);
     useLayoutEffect(()=>{
         if (0 === items.length) {
             cacheRef.current = {
                 widths: [],
                 gap: 0,
-                indicatorWidth: reserveSpace
+                indicatorWidth: reserveSpace,
+                lastCount: 0
             };
             setVisibleCount(0);
+            pendingMeasureRef.current = false;
             return;
         }
         const cached = crossMountCache.get(items);
         if (cached) {
             cacheRef.current = cached;
-            return scheduleOverflowMeasurement(()=>{
-                const availableWidth = containerRef.current?.offsetWidth ?? 0;
-                return ()=>recompute(availableWidth);
-            });
+            pendingMeasureRef.current = false;
+            return scheduleOverflowMeasurement(recomputeRead);
         }
         measurementLayerRef.current?.style.removeProperty('display');
-        return scheduleOverflowMeasurement(()=>{
-            const container = containerRef.current;
-            const gap = container ? Number.parseFloat(getComputedStyle(container).gap || '0') || 0 : 0;
-            const widths = measurementRefs.current.slice(0, items.length).map((ref)=>ref?.offsetWidth ?? 0);
-            const indicatorWidth = indicatorRef.current?.offsetWidth || reserveSpace;
-            const availableWidth = container?.offsetWidth ?? 0;
-            return ()=>{
-                const entry = {
-                    widths,
-                    gap,
-                    indicatorWidth,
-                    lastCount: items.length
-                };
-                cacheRef.current = entry;
-                crossMountCache.set(items, entry);
-                recompute(availableWidth);
-                measurementLayerRef.current?.style.setProperty('display', 'none');
-            };
-        });
+        return scheduleOverflowMeasurement(measure);
     }, [
         items,
         renderItem,
         renderMeasurementItem,
         overflowRenderer,
         reserveSpace,
-        recompute
+        recomputeRead,
+        measure
     ]);
     useLayoutEffect(()=>{
         const container = containerRef.current;
         if (!container) return;
-        let frame = 0;
-        const observer = new ResizeObserver(()=>{
-            if (frame) return;
-            frame = requestAnimationFrame(()=>{
-                frame = 0;
-                recompute();
-            });
+        let cancelScheduled;
+        const unobserve = observeOverflowResize(container, ()=>{
+            cancelScheduled = pendingMeasureRef.current ? scheduleOverflowMeasurement(measureRef.current) : scheduleOverflowMeasurement(recomputeRead);
         });
-        observer.observe(container);
         return ()=>{
-            if (frame) cancelAnimationFrame(frame);
-            observer.disconnect();
+            cancelScheduled?.();
+            unobserve();
         };
     }, [
-        recompute
+        recomputeRead
     ]);
     const visibleItems = items.slice(0, visibleCount);
     const hiddenItems = items.slice(visibleCount);

package/dist/hooks/useOverflowItems.observer.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Single shared ResizeObserver for all overflow lists. The browser drains
+ * microtasks between separate observer callbacks, so per-instance observers
+ * cannot share one read/write batch — one observer delivers every entry in a
+ * single callback, letting all instances enqueue into the same flush. It also
+ * fires pre-paint: a measurement scheduled here lands before the frame paints.
+ */
+/** Called when the observed element resizes (including display:none toggles). */
+export interface OverflowResizeHandler {
+    (): void;
+}
+export declare const observeOverflowResize: (element: Element, handler: OverflowResizeHandler) => (() => void);

package/dist/hooks/useOverflowItems.observer.js

@@ -0,0 +1,14 @@
+const handlers = new Map();
+let observer = null;
+const observeOverflowResize = (element, handler)=>{
+    observer ??= new ResizeObserver((entries)=>{
+        for (const entry of entries)handlers.get(entry.target)?.();
+    });
+    handlers.set(element, handler);
+    observer.observe(element);
+    return ()=>{
+        handlers.delete(element);
+        observer?.unobserve(element);
+    };
+};
+export { observeOverflowResize };

package/dist/hooks/useOverflowItems.scheduler.d.ts

@@ -5,12 +5,17 @@
  * the next reads `offsetWidth`. One pre-paint microtask runs all reads against
  * clean layout, then all writes — React batches them, no interleaving.
  */
-type WritePhase = () => void;
-type ReadPhase = () => WritePhase;
+/** Write phase of a batched measurement: state + style writes, no DOM reads. */
+export interface WritePhase {
+    (): void;
+}
+/** Read phase: DOM reads only; returns the write to run after all reads. */
+export interface ReadPhase {
+    (): WritePhase;
+}
 /**
  * Queue a measurement for the next pre-paint flush. Returns a cancel
  * function — call it on effect cleanup so unmounted or re-rendered
  * instances never measure stale refs.
  */
 export declare const scheduleOverflowMeasurement: (read: ReadPhase) => (() => void);
-export {};

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.52.0",
-  "generatedAt": "2026-06-03T13:59:51.393Z",
+  "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.0",
+  "version": "0.54.0-rc-feature-shell.1",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",