@wallarm-org/design-system 1.23.3-rc-fix-remote-shell-breadcrumb-transition.2 → 1.24.0

package/dist/components/RemoteShell/NavPanelContent.d.ts

@@ -1,11 +1,6 @@
 import type { FC } from 'react';
-import type { NavStackEntry } from './model';
-interface NavigationSnapshot {
-    navStack: NavStackEntry[];
-}
 interface NavPanelContentProps {
     level: number;
-    navigationSnapshot?: NavigationSnapshot;
 }
 export declare const NavPanelContent: FC<NavPanelContentProps>;
 export {};

package/dist/components/RemoteShell/NavPanelContent.js

@@ -4,12 +4,10 @@ import { Text } from "../Text/index.js";
 import { HeaderActions } from "./HeaderActions.js";
 import { findDrillNode, useRemoteShellContext } from "./model/index.js";
 import { NavItemsList } from "./NavItemsList.js";
-const NavPanelContent = ({ level: rawLevel, navigationSnapshot })=>{
-    const { config, navStack: currentNavStack, navigate, drillInto, goBack } = useRemoteShellContext();
-    const navStack = navigationSnapshot?.navStack ?? currentNavStack;
+const NavPanelContent = ({ level: rawLevel })=>{
+    const { config, navStack, effectiveActiveItemId, navigate, drillInto, goBack } = useRemoteShellContext();
     const level = Math.min(rawLevel, navStack.length - 1);
     const entry = navStack[level];
-    const activeItemId = entry.activeItemId;
     const hasHeaderActions = !!config.headerActions?.length;
     if (0 === level) return /*#__PURE__*/ jsxs(Fragment, {
         children: [
@@ -30,7 +28,7 @@ const NavPanelContent = ({ level: rawLevel, navigationSnapshot })=>{
             }),
             /*#__PURE__*/ jsx(NavItemsList, {
                 items: config.items,
-                activeItemId: activeItemId,
+                activeItemId: effectiveActiveItemId,
                 onNavigate: navigate,
                 onDrillClick: drillInto
             })
@@ -56,7 +54,7 @@ const NavPanelContent = ({ level: rawLevel, navigationSnapshot })=>{
             }),
             /*#__PURE__*/ jsx(NavItemsList, {
                 items: entry.items,
-                activeItemId: activeItemId,
+                activeItemId: effectiveActiveItemId,
                 onNavigate: navigate,
                 onDrillClick: drillInto
             })

package/dist/components/RemoteShell/RemoteShellPanel.js

@@ -7,8 +7,8 @@ import { DRILL_ANIMATION_DURATION, DRILL_ANIMATION_EASING, useDrillTransition }
 import { NavPanelContent } from "./NavPanelContent.js";
 const RemoteShellPanel = ({ ref, className, resizable, isLoading, loaderCount = 6, ...props })=>{
     const testId = useTestId('panel');
-    const { config, drillLevel, navStack } = useRemoteShellContext();
-    const { transition, clearTransition } = useDrillTransition(drillLevel, navStack);
+    const { config, drillLevel } = useRemoteShellContext();
+    const { transition, clearTransition } = useDrillTransition(drillLevel);
     if (isLoading) return /*#__PURE__*/ jsx("div", {
         ...props,
         ref: ref,
@@ -53,10 +53,7 @@ const RemoteShellPanel = ({ ref, className, resizable, isLoading, loaderCount =
                                     animation: `${isForward ? 'ds-nav-blur-out' : 'ds-nav-blur-in'} ${timing}`
                                 },
                                 children: /*#__PURE__*/ jsx(NavPanelContent, {
-                                    level: isForward ? transition.fromLevel : drillLevel,
-                                    navigationSnapshot: isForward ? {
-                                        navStack: transition.fromNavStack
-                                    } : void 0
+                                    level: isForward ? transition.fromLevel : drillLevel
                                 })
                             }),
                             /*#__PURE__*/ jsx("div", {
@@ -65,10 +62,7 @@ const RemoteShellPanel = ({ ref, className, resizable, isLoading, loaderCount =
                                     animation: `${isForward ? 'ds-nav-blur-in' : 'ds-nav-blur-out'} ${timing}`
                                 },
                                 children: /*#__PURE__*/ jsx(NavPanelContent, {
-                                    level: isForward ? drillLevel : transition.fromLevel,
-                                    navigationSnapshot: isForward ? void 0 : {
-                                        navStack: transition.fromNavStack
-                                    }
+                                    level: isForward ? drillLevel : transition.fromLevel
                                 })
                             })
                         ]

package/dist/components/RemoteShell/model/useDrillTransition.d.ts

@@ -1,12 +1,10 @@
-import type { NavStackEntry } from './types';
 export declare const DRILL_ANIMATION_DURATION = "220ms";
 export declare const DRILL_ANIMATION_EASING = "cubic-bezier(0.4, 0, 0.2, 1)";
 export interface DrillTransition {
     fromLevel: number;
     direction: 'forward' | 'backward';
-    fromNavStack: NavStackEntry[];
 }
-export declare const useDrillTransition: (drillLevel: number, navStack: NavStackEntry[]) => {
+export declare const useDrillTransition: (drillLevel: number) => {
     transition: DrillTransition | null;
     clearTransition: () => void;
 };

package/dist/components/RemoteShell/model/useDrillTransition.js

@@ -1,26 +1,20 @@
 import { useLayoutEffect, useRef, useState } from "react";
 const DRILL_ANIMATION_DURATION = '220ms';
 const DRILL_ANIMATION_EASING = 'cubic-bezier(0.4, 0, 0.2, 1)';
-const useDrillTransition = (drillLevel, navStack)=>{
-    const previousRef = useRef({
-        drillLevel,
-        navStack
-    });
+const useDrillTransition = (drillLevel)=>{
+    const prevLevelRef = useRef(drillLevel);
     const [transition, setTransition] = useState(null);
     useLayoutEffect(()=>{
-        const previous = previousRef.current;
-        if (previous.drillLevel !== drillLevel) setTransition({
-            fromLevel: previous.drillLevel,
-            direction: drillLevel > previous.drillLevel ? 'forward' : 'backward',
-            fromNavStack: previous.navStack
-        });
-        previousRef.current = {
-            drillLevel,
-            navStack
-        };
+        const prev = prevLevelRef.current;
+        if (prev !== drillLevel) {
+            setTransition({
+                fromLevel: prev,
+                direction: drillLevel > prev ? 'forward' : 'backward'
+            });
+            prevLevelRef.current = drillLevel;
+        }
     }, [
-        drillLevel,
-        navStack
+        drillLevel
     ]);
     const clearTransition = ()=>setTransition(null);
     return {

package/dist/components/SplashScreen/SplashScreen.js

@@ -1,17 +1,25 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
 import { cn } from "../../utils/cn.js";
 import { Logo } from "../Logo/index.js";
 import { Progress } from "../Progress/index.js";
 import { splashContainerVariants, splashContentVariants, splashLogoVariants, splashProgressVariants } from "./classes.js";
 import { SPLASH_PHASES, getContainerStyle } from "./lib.js";
+import { useContentHeight } from "./useContentHeight.js";
 import { useSplashPhase } from "./useSplashPhase.js";
-const SplashScreen = ({ ref, visible = true, shrinkTarget, className, children, ...props })=>{
-    const { phase, childrenRevealed, handleContainerTransitionEnd, handleContentTransitionEnd } = useSplashPhase(visible, shrinkTarget);
+const SplashScreen = ({ ref, visible = true, shrinkTarget, className, children, onPhaseChange, ...props })=>{
+    const { phase, childrenRevealed, handleContainerTransitionEnd, handleContentTransitionEnd } = useSplashPhase(visible, shrinkTarget, onPhaseChange);
+    const contentRef = useRef(null);
+    const isLocked = 'settled' !== phase;
+    const shouldMeasure = Boolean(children && shrinkTarget && void 0 === shrinkTarget.height);
+    const measuredHeight = useContentHeight(contentRef, shouldMeasure, isLocked);
     if ('exited' === phase) return null;
     const containerPhase = phase;
     const contentPhase = phase;
     const showContent = SPLASH_PHASES[contentPhase] || 'shrinking' === phase;
     const effectiveContentPhase = 'shrinking' === phase ? 'content-fading' : contentPhase;
+    const shouldShowChildren = children && shrinkTarget;
+    const isChildrenVisible = 'shrinking' === phase || 'settled' === phase;
     return /*#__PURE__*/ jsxs("div", {
         ...props,
         "data-slot": "splash-screen",
@@ -19,7 +27,7 @@ const SplashScreen = ({ ref, visible = true, shrinkTarget, className, children,
         className: cn(splashContainerVariants({
             phase: containerPhase
         }), className),
-        style: getContainerStyle(phase, shrinkTarget),
+        style: getContainerStyle(phase, shrinkTarget, measuredHeight),
         onTransitionEnd: handleContainerTransitionEnd,
         children: [
             showContent && /*#__PURE__*/ jsxs("div", {
@@ -41,8 +49,12 @@ const SplashScreen = ({ ref, visible = true, shrinkTarget, className, children,
                     })
                 ]
             }),
-            'settled' === phase && children && /*#__PURE__*/ jsx("div", {
-                className: cn('h-full w-full transition-opacity duration-300', childrenRevealed ? 'opacity-100' : 'opacity-0'),
+            shouldShowChildren && /*#__PURE__*/ jsx("div", {
+                ref: contentRef,
+                className: cn('absolute h-auto w-full transition-opacity duration-300', !isChildrenVisible && 'invisible pointer-events-none opacity-0', 'shrinking' === phase && 'visible pointer-events-none', 'shrinking' === phase && (childrenRevealed ? 'opacity-100' : 'opacity-0'), 'settled' === phase && 'visible pointer-events-auto opacity-100', 'settled' === phase && 'transition-[height,opacity] duration-200'),
+                style: shrinkTarget ? {
+                    width: shrinkTarget.width
+                } : void 0,
                 children: children
             })
         ]

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

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

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

@@ -1,4 +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;
+export declare function getContainerStyle(phase: PhaseType, shrinkTarget?: SplashScreenShrinkTarget, measuredHeight?: number): CSSProperties | undefined;

package/dist/components/SplashScreen/lib.js

@@ -4,9 +4,10 @@ const SPLASH_PHASES = {
     'content-fading': true,
     exiting: true
 };
-function getContainerStyle(phase, shrinkTarget) {
+function getContainerStyle(phase, shrinkTarget, measuredHeight) {
     if (!shrinkTarget) return;
-    const { width, height, borderRadius = 0 } = shrinkTarget;
+    const { width, height: targetHeight, borderRadius = 0 } = shrinkTarget;
+    const height = measuredHeight ?? targetHeight;
     switch(phase){
         case 'enter-start':
         case 'entered':
@@ -19,6 +20,10 @@ function getContainerStyle(phase, shrinkTarget) {
                 transition: 'clip-path 500ms ease-in-out'
             };
         case 'shrinking':
+            if (void 0 === height) return {
+                clipPath: `inset(0 0 round ${borderRadius}px)`,
+                transition: 'clip-path 500ms ease-in-out'
+            };
             return {
                 clipPath: `inset(calc(50% - ${height / 2}px) calc(50% - ${width / 2}px) round ${borderRadius}px)`,
                 transition: 'clip-path 500ms ease-in-out'

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

@@ -3,7 +3,7 @@ export type ContentPhase = 'enter-start' | 'entered' | 'content-fading' | 'exiti
 export type PhaseType = ContentPhase | 'shrinking' | 'settled' | 'exited';
 export interface SplashScreenShrinkTarget {
     width: number;
-    height: number;
+    height?: number;
     borderRadius?: number;
 }
 export interface SplashScreenProps extends HTMLAttributes<HTMLDivElement> {
@@ -11,4 +11,5 @@ export interface SplashScreenProps extends HTMLAttributes<HTMLDivElement> {
     visible?: boolean;
     shrinkTarget?: SplashScreenShrinkTarget;
     children?: ReactNode;
+    onPhaseChange?: (phase: PhaseType) => void;
 }

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

@@ -0,0 +1,13 @@
+import { type RefObject } from 'react';
+/**
+ * Measures the height of an element with ResizeObserver, with optional locking
+ * during animations to prevent mid-animation jumps.
+ *
+ * When locked=true, stores the first measured height and ignores subsequent
+ * updates until locked becomes false. This prevents viewport/content resizes
+ * from disrupting the shrink animation.
+ *
+ * The measured height is capped by viewport height minus a margin to ensure
+ * content fits on small screens.
+ */
+export declare const useContentHeight: (elementRef: RefObject<HTMLElement | null>, enabled: boolean, locked: boolean) => number | undefined;

package/dist/components/SplashScreen/useContentHeight.js

@@ -0,0 +1,33 @@
+import { useEffect, useRef, useState } from "react";
+const useContentHeight = (elementRef, enabled, locked)=>{
+    const [height, setHeight] = useState(void 0);
+    const lockedHeightRef = useRef(void 0);
+    useEffect(()=>{
+        if (!enabled || !elementRef.current) return;
+        const updateHeight = ()=>{
+            if (locked && void 0 !== lockedHeightRef.current) return;
+            if (elementRef.current) {
+                const measured = elementRef.current.offsetHeight;
+                const maxHeight = window.innerHeight - 40;
+                const newHeight = Math.min(measured, maxHeight);
+                setHeight(newHeight);
+                if (locked) lockedHeightRef.current = newHeight;
+            }
+        };
+        const observer = new ResizeObserver(updateHeight);
+        observer.observe(elementRef.current);
+        updateHeight();
+        return ()=>observer.disconnect();
+    }, [
+        elementRef,
+        enabled,
+        locked
+    ]);
+    useEffect(()=>{
+        if (!locked) lockedHeightRef.current = void 0;
+    }, [
+        locked
+    ]);
+    return height;
+};
+export { useContentHeight };

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

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

package/dist/components/SplashScreen/useSplashPhase.js

@@ -9,7 +9,7 @@ const doubleRaf = (callback)=>{
         cancelAnimationFrame(id2);
     };
 };
-const useSplashPhase = (visible, shrinkTarget)=>{
+const useSplashPhase = (visible, shrinkTarget, onPhaseChange)=>{
     const shrinkTargetRef = useRef(shrinkTarget);
     shrinkTargetRef.current = shrinkTarget;
     const [phase, setPhase] = useState(()=>visible ? 'enter-start' : shrinkTarget ? 'settled' : 'exited');
@@ -35,7 +35,7 @@ const useSplashPhase = (visible, shrinkTarget)=>{
     ]);
     useEffect(()=>{
         if ('content-fading' === phase && !contentShownRef.current) return doubleRaf(()=>setPhase('shrinking'));
-        if ('settled' === phase) return doubleRaf(()=>setChildrenRevealed(true));
+        if ('shrinking' === phase) return doubleRaf(()=>setChildrenRevealed(true));
     }, [
         phase
     ]);
@@ -48,6 +48,12 @@ const useSplashPhase = (visible, shrinkTarget)=>{
         if ('exiting' === phase) setPhase('exited');
         else if ('content-fading' === phase) setPhase('shrinking');
     };
+    useEffect(()=>{
+        onPhaseChange?.(phase);
+    }, [
+        phase,
+        onPhaseChange
+    ]);
     return {
         phase,
         childrenRevealed,

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
   "version": "1.23.2",
-  "generatedAt": "2026-09-25T14:06:24.733Z",
+  "generatedAt": "2026-09-27T21:57:31.353Z",
   "components": [
     {
       "name": "Accordion",
@@ -33057,6 +33057,11 @@
           "name": "FutureDate",
           "code": "() => (\n  <FormatDateTime value={new Date(Date.now() + 5 * 60 * 1000)} format='relative' />\n)",
           "description": "A timestamp five minutes ahead reads `Just now` rather than counting forwards — the\ncomponent absorbs clock skew between a browser and a server instead of showing it."
+        },
+        {
+          "name": "DateOrderAndHourCycle",
+          "code": "() => (\n  <VStack gap={24} align='start'>\n    <VStack gap={12} align='start'>\n      <span className='sb-annotation'>Day-first, 24-hour (default)</span>\n      <DateFormatProvider order='day-first' hourCycle={24}>\n        <VStack gap={8} align='start'>\n          <FormatDateTime value='2026-02-11T14:32:07' format='date' />\n          <FormatDateTime value='2026-02-11T14:32:07' format='datetime' />\n          <FormatDateTime value={subDays(now, 200)} format='relative' />\n        </VStack>\n      </DateFormatProvider>\n    </VStack>\n\n    <VStack gap={12} align='start'>\n      <span className='sb-annotation'>Month-first, 12-hour</span>\n      <DateFormatProvider order='month-first' hourCycle={12}>\n        <VStack gap={8} align='start'>\n          <FormatDateTime value='2026-02-11T14:32:07' format='date' />\n          <FormatDateTime value='2026-02-11T14:32:07' format='datetime' />\n          <FormatDateTime value={subDays(now, 200)} format='relative' />\n        </VStack>\n      </DateFormatProvider>\n    </VStack>\n\n    <VStack gap={12} align='start'>\n      <span className='sb-annotation'>Day-first, 12-hour</span>\n      <DateFormatProvider order='day-first' hourCycle={12}>\n        <VStack gap={8} align='start'>\n          <FormatDateTime value='2026-02-11T14:32:07' format='date' />\n          <FormatDateTime value='2026-02-11T14:32:07' format='datetime' />\n          <FormatDateTime value={subDays(now, 200)} format='relative' />\n        </VStack>\n      </DateFormatProvider>\n    </VStack>\n\n    <VStack gap={12} align='start'>\n      <span className='sb-annotation'>Month-first, 24-hour</span>\n      <DateFormatProvider order='month-first' hourCycle={24}>\n        <VStack gap={8} align='start'>\n          <FormatDateTime value='2026-02-11T14:32:07' format='date' />\n          <FormatDateTime value='2026-02-11T14:32:07' format='datetime' />\n          <FormatDateTime value={subDays(now, 200)} format='relative' />\n        </VStack>\n      </DateFormatProvider>\n    </VStack>\n  </VStack>\n)",
+          "description": "The component respects the app's date order from `DateFormatProvider`. Day-first (the\ndefault) prints \"11 Feb, 2026\"; month-first prints \"Feb 11, 2026\". Both hour cycles\nare shown: 24-hour and 12-hour with AM/PM."
         }
       ]
     },
@@ -80231,6 +80236,11 @@
           "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}",
           "description": "With a `shrinkTarget` it morphs into that box and reveals its children inside — the entrance becomes the first view, typically a sign-in card."
+        },
+        {
+          "name": "MeasuredHeight",
+          "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  const handleSignIn = () => {\n    setVisible(true);\n  };\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, borderRadius: 12 }}\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    </div>\n  );\n}",
+          "description": "The splash can measure its own content height when `shrinkTarget.height` is omitted — the animation shrinks to fit whatever you put inside, no hardcoded constant needed."
         }
       ]
     },

package/package.json

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