@box/blueprint-web 18.2.1 → 18.3.0

package/dist/lib-esm/primitives/notification/hooks/use-staggered-notification-admission.js

@@ -0,0 +1,126 @@
+import { useRef, useState, useEffect, useMemo } from 'react';
+import { prefersReducedMotion, REDUCED_MOTION_QUERY, NOTIFICATION_STACK_STAGGER_MS } from '../notification-stack-utils.js';
+
+const idsOf = notifications => notifications ? Array.from(notifications.keys()) : [];
+const clearTimer = timerRef => {
+  if (timerRef.current != null) {
+    clearTimeout(timerRef.current);
+    timerRef.current = null;
+  }
+};
+const admitAllWaiting = ({
+  queueRef,
+  admittedIdsRef,
+  syncAdmitted
+}) => {
+  if (queueRef.current.length === 0) {
+    return;
+  }
+  const waiting = queueRef.current;
+  queueRef.current = [];
+  syncAdmitted([...admittedIdsRef.current, ...waiting], waiting[waiting.length - 1] ?? null);
+};
+const pumpQueue = state => {
+  const {
+    notificationsRef,
+    admittedIdsRef,
+    queueRef,
+    timerRef,
+    isAnimationEnabledRef,
+    syncAdmitted
+  } = state;
+  timerRef.current = null;
+  if (!isAnimationEnabledRef.current || prefersReducedMotion()) {
+    admitAllWaiting(state);
+    return;
+  }
+  const liveIds = new Set(idsOf(notificationsRef.current));
+  while (queueRef.current.length > 0 && !liveIds.has(queueRef.current[0])) {
+    queueRef.current.shift();
+  }
+  const nextId = queueRef.current.shift();
+  if (nextId == null) {
+    return;
+  }
+  syncAdmitted([...admittedIdsRef.current, nextId], nextId);
+  if (queueRef.current.length > 0) {
+    timerRef.current = setTimeout(() => pumpQueue(state), NOTIFICATION_STACK_STAGGER_MS);
+  }
+};
+/**
+ * Admits burst arrivals one at a time (`NOTIFICATION_STACK_STAGGER_MS` apart), in the
+ * iteration order of `notifications` — pass it oldest-first so the newest lands on top last.
+ * First-mount ids, `isAnimationEnabled === false`, and `prefers-reduced-motion` skip the stagger.
+ */
+const useStaggeredNotificationAdmission = (notifications, isAnimationEnabled) => {
+  const notificationsRef = useRef(notifications);
+  const isAnimationEnabledRef = useRef(isAnimationEnabled);
+  notificationsRef.current = notifications;
+  isAnimationEnabledRef.current = isAnimationEnabled;
+  const [admittedIds, setAdmittedIds] = useState(() => idsOf(notifications));
+  const [enteringId, setEnteringId] = useState(null);
+  const admittedIdsRef = useRef(admittedIds);
+  const queueRef = useRef([]);
+  const timerRef = useRef(null);
+  const hasHydratedRef = useRef(false);
+  const syncAdmitted = (next, nextEnteringId) => {
+    admittedIdsRef.current = next;
+    setAdmittedIds(next);
+    setEnteringId(nextEnteringId);
+  };
+  const stateRef = useRef({
+    notificationsRef,
+    admittedIdsRef,
+    queueRef,
+    timerRef,
+    isAnimationEnabledRef,
+    syncAdmitted
+  });
+  stateRef.current.syncAdmitted = syncAdmitted;
+  const currentIdsKey = idsOf(notifications).join('|');
+  useEffect(() => {
+    const liveIds = new Set(idsOf(notificationsRef.current));
+    admittedIdsRef.current = admittedIdsRef.current.filter(id => liveIds.has(id));
+    queueRef.current = queueRef.current.filter(id => liveIds.has(id));
+    if (!hasHydratedRef.current) {
+      hasHydratedRef.current = true;
+      stateRef.current.syncAdmitted([...liveIds], null);
+      return;
+    }
+    const claimed = new Set([...admittedIdsRef.current, ...queueRef.current]);
+    queueRef.current = [...queueRef.current, ...idsOf(notificationsRef.current).filter(id => !claimed.has(id))];
+    if (queueRef.current.length === 0) {
+      return;
+    }
+    if (!isAnimationEnabledRef.current || prefersReducedMotion()) {
+      clearTimer(timerRef);
+      admitAllWaiting(stateRef.current);
+      return;
+    }
+    if (timerRef.current == null) {
+      pumpQueue(stateRef.current);
+    }
+  }, [currentIdsKey]);
+  useEffect(() => {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+      return undefined;
+    }
+    const mediaQuery = window.matchMedia(REDUCED_MOTION_QUERY);
+    const handleChange = event => {
+      if (event.matches) {
+        clearTimer(timerRef);
+        admitAllWaiting(stateRef.current);
+      }
+    };
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, [isAnimationEnabled]);
+  useEffect(() => () => clearTimer(timerRef), []);
+  const admittedSet = useMemo(() => new Set(admittedIds), [admittedIds]);
+  return {
+    visibleNotifications: notifications ? new Map([...notifications].filter(([id]) => admittedSet.has(id))) : notifications,
+    enteringId
+  };
+};
+
+export { useStaggeredNotificationAdmission };

package/dist/lib-esm/primitives/notification/load-animated-notification-viewport.d.ts

@@ -0,0 +1,11 @@
+import { type AnimatedNotificationViewport } from './notification.viewport-animated';
+type AnimatedViewportComponent = typeof AnimatedNotificationViewport;
+/**
+ * Isolated dynamic import so the sync Notification viewport graph cannot see
+ * motion modules. Consumer bundlers emit this as an async chunk — after first
+ * paint, not on the critical path.
+ */
+export declare const loadAnimatedNotificationViewport: () => Promise<AnimatedViewportComponent>;
+/** Already-resolved component, so viewports mounted after the first load render it without waiting. */
+export declare const getLoadedAnimatedNotificationViewport: () => AnimatedViewportComponent | null;
+export {};

package/dist/lib-esm/primitives/notification/load-animated-notification-viewport.js

@@ -0,0 +1,24 @@
+let loaded = null;
+let pending = null;
+/**
+ * Isolated dynamic import so the sync Notification viewport graph cannot see
+ * motion modules. Consumer bundlers emit this as an async chunk — after first
+ * paint, not on the critical path.
+ */
+const loadAnimatedNotificationViewport = () => {
+  if (!pending) {
+    pending = import(/* webpackChunkName: "bp-notification-stack-motion" */
+    './notification.viewport-animated.js').then(module => {
+      loaded = module.AnimatedNotificationViewport;
+      return loaded;
+    }, error => {
+      pending = null;
+      throw error;
+    });
+  }
+  return pending;
+};
+/** Already-resolved component, so viewports mounted after the first load render it without waiting. */
+const getLoadedAnimatedNotificationViewport = () => loaded;
+
+export { getLoadedAnimatedNotificationViewport, loadAnimatedNotificationViewport };

package/dist/lib-esm/primitives/notification/notification-provider.d.ts

@@ -2,6 +2,11 @@ import * as Toast from '@radix-ui/react-toast';
 import * as React from 'react';
 import { type PrivateNotificationElementProps } from './private-notification-element';
 export type NotificationProviderProps = Toast.ToastProviderProps;
+/**
+ * Stacked motion cannot coexist with Radix swipe. Preserve the caller/Radix
+ * default when Notification animation is off.
+ */
+export declare const resolveNotificationSwipeThreshold: (isAnimationEnabled: boolean, swipeThreshold?: number) => number | undefined;
 interface NotificationContextType {
     /**
      * Creates notification based on passed arguments.
@@ -23,6 +28,9 @@ interface NotificationContextType {
     removeAllNotifications: () => void;
     /**
      * updates notification with given `id`.
+     *
+     * When Notification animation is enabled, `{ open: false }` removes the notification
+     * (a later `{ open: true }` has no effect). Otherwise the entry is kept closed and can be reopened.
      * @param id string
      * @param newProps - new properties of notification
      */

package/dist/lib-esm/primitives/notification/notification-provider.js

@@ -1,12 +1,22 @@
 import { jsx } from 'react/jsx-runtime';
 import * as Toast from '@radix-ui/react-toast';
 import * as React from 'react';
-import { useState, useContext } from 'react';
+import { useContext, useState } from 'react';
+import '../../blueprint-configuration-context/blueprint-configuration-context.js';
+import '../../blueprint-configuration-context/consts.js';
+import { useBlueprintConfiguration } from '../../blueprint-configuration-context/useBlueprintConfiguration.js';
 import { deepMerge } from '../../utils/deepMerge.js';
 import { getUniqueId } from '../../utils/useUniqueId.js';
 import { truncateNotificationCopy } from './truncate-notification-copy.js';
 
 const DEFAULT_NOTIFICATION_DELAY = 5000;
+/** Unreachable swipe distance — Radix 1.1.5 has no swipe={false}. */
+const DISABLED_SWIPE_THRESHOLD = Number.POSITIVE_INFINITY;
+/**
+ * Stacked motion cannot coexist with Radix swipe. Preserve the caller/Radix
+ * default when Notification animation is off.
+ */
+const resolveNotificationSwipeThreshold = (isAnimationEnabled, swipeThreshold) => isAnimationEnabled ? DISABLED_SWIPE_THRESHOLD : swipeThreshold;
 const NotificationContext = /*#__PURE__*/React.createContext(null);
 const useNotification = () => {
   const value = useContext(NotificationContext);
@@ -24,8 +34,13 @@ const useNotification = () => {
 const NotificationProvider = props => {
   const {
     children,
+    swipeThreshold,
     ...rest
   } = props;
+  const {
+    componentsWithAnimationEnabled
+  } = useBlueprintConfiguration();
+  const isAnimationEnabled = componentsWithAnimationEnabled.includes('Notification');
   const [notifications, setNotifications] = useState(new Map());
   const addNotification = React.useCallback(args => {
     const {
@@ -78,6 +93,13 @@ const NotificationProvider = props => {
       if (oldNotificationProps === undefined) {
         return oldValue;
       }
+      // With stack motion, `open: false` is a dismiss: delete so the closed entry
+      // cannot occupy stack depth. The flat path keeps the entry so it can reopen.
+      if (isAnimationEnabled && newProps.open === false) {
+        const newNotifications = new Map(oldValue);
+        newNotifications.delete(id);
+        return newNotifications;
+      }
       const nextProps = newProps.styledText === undefined ? newProps : {
         ...newProps,
         styledText: truncateNotificationCopy(newProps.styledText)
@@ -86,7 +108,7 @@ const NotificationProvider = props => {
       newNotifications.set(id, deepMerge(oldNotificationProps, nextProps));
       return newNotifications;
     });
-  }, []);
+  }, [isAnimationEnabled]);
   const store = React.useMemo(() => ({
     addNotification,
     notifications,
@@ -97,6 +119,10 @@ const NotificationProvider = props => {
   return jsx(Toast.Provider, {
     ...rest,
     duration: DEFAULT_NOTIFICATION_DELAY,
+    // Stacked motion cannot coexist with Radix swipe. Leave the default
+    // threshold when Notification animation is off so existing consumers
+    // keep swipe-to-dismiss. Radix 1.1.5 has no swipe={false}.
+    swipeThreshold: resolveNotificationSwipeThreshold(isAnimationEnabled, swipeThreshold),
     children: jsx(NotificationContext.Provider, {
       value: store,
       children: children
@@ -105,4 +131,4 @@ const NotificationProvider = props => {
 };
 NotificationProvider.displayName = 'Notification.Provider';
 
-export { NotificationProvider, useNotification };
+export { NotificationProvider, resolveNotificationSwipeThreshold, useNotification };

package/dist/lib-esm/primitives/notification/notification-stack-utils.d.ts

@@ -0,0 +1,21 @@
+/** Collapsed layers shown behind the newest toast before deeper ones are hidden. */
+export declare const NOTIFICATION_STACK_VISIBLE_DEPTH = 3;
+/** Delay between admitting each queued toast during a burst. */
+export declare const NOTIFICATION_STACK_STAGGER_MS = 400;
+/** Token vars for collapsed depth-offset and expanded-layer gap. Read at runtime so layout math cannot drift from CSS. */
+export declare const NOTIFICATION_STACK_DEPTH_OFFSET_VAR = "--bp-space-040";
+export declare const NOTIFICATION_STACK_GAP_VAR = "--bp-space-020";
+export declare const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+export declare const prefersReducedMotion: () => boolean;
+/**
+ * Radix does not mount Toast.Root when `open === false`. Closed store entries
+ * must not occupy stack depth or contribute to height measurements.
+ */
+export declare const isOpenNotification: (notification: {
+    open?: boolean;
+}) => boolean;
+/**
+ * Resolves a `:root` custom property to px. `parseFloat` alone treats rem as px
+ * (`0.5rem` → `0.5px`) and collapses the expanded-stack gap.
+ */
+export declare const readRootPixelVar: (cssVar: string) => number;

package/dist/lib-esm/primitives/notification/notification-stack-utils.js

@@ -0,0 +1,38 @@
+/** Collapsed layers shown behind the newest toast before deeper ones are hidden. */
+const NOTIFICATION_STACK_VISIBLE_DEPTH = 3;
+/** Delay between admitting each queued toast during a burst. */
+const NOTIFICATION_STACK_STAGGER_MS = 400;
+/** Token vars for collapsed depth-offset and expanded-layer gap. Read at runtime so layout math cannot drift from CSS. */
+const NOTIFICATION_STACK_DEPTH_OFFSET_VAR = '--bp-space-040';
+const NOTIFICATION_STACK_GAP_VAR = '--bp-space-020';
+const REDUCED_MOTION_QUERY = '(prefers-reduced-motion: reduce)';
+const prefersReducedMotion = () => typeof window !== 'undefined' && typeof window.matchMedia === 'function' && window.matchMedia(REDUCED_MOTION_QUERY).matches;
+/**
+ * Radix does not mount Toast.Root when `open === false`. Closed store entries
+ * must not occupy stack depth or contribute to height measurements.
+ */
+const isOpenNotification = notification => notification.open !== false;
+/**
+ * Resolves a `:root` custom property to px. `parseFloat` alone treats rem as px
+ * (`0.5rem` → `0.5px`) and collapses the expanded-stack gap.
+ */
+const readRootPixelVar = cssVar => {
+  if (typeof document === 'undefined') {
+    return 0;
+  }
+  const raw = getComputedStyle(document.documentElement).getPropertyValue(cssVar).trim();
+  if (!raw) {
+    return 0;
+  }
+  const value = Number.parseFloat(raw);
+  if (Number.isNaN(value)) {
+    return 0;
+  }
+  if (raw.endsWith('rem')) {
+    const rootFontSize = Number.parseFloat(getComputedStyle(document.documentElement).fontSize);
+    return value * (Number.isNaN(rootFontSize) ? 16 : rootFontSize);
+  }
+  return value;
+};
+
+export { NOTIFICATION_STACK_DEPTH_OFFSET_VAR, NOTIFICATION_STACK_GAP_VAR, NOTIFICATION_STACK_STAGGER_MS, NOTIFICATION_STACK_VISIBLE_DEPTH, REDUCED_MOTION_QUERY, isOpenNotification, prefersReducedMotion, readRootPixelVar };

package/dist/lib-esm/primitives/notification/notification-stack.module.js

@@ -0,0 +1,4 @@
+import '../../index.css';
+var stackStyles = {"stack":"bp_notification_stack_module_stack--41829","isExpanded":"bp_notification_stack_module_isExpanded--41829","stackLayer":"bp_notification_stack_module_stackLayer--41829"};
+
+export { stackStyles as default };

package/dist/lib-esm/primitives/notification/notification.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"viewport":"bp_notification_module_viewport--595c9","root":"bp_notification_module_root--595c9","container":"bp_notification_module_container--595c9","messageRow":"bp_notification_module_messageRow--595c9","withButtons":"bp_notification_module_withButtons--595c9","info":"bp_notification_module_info--595c9","success":"bp_notification_module_success--595c9","warning":"bp_notification_module_warning--595c9","error":"bp_notification_module_error--595c9","typeIconContainer":"bp_notification_module_typeIconContainer--595c9","typeIcon":"bp_notification_module_typeIcon--595c9","text":"bp_notification_module_text--595c9","contentButtonSection":"bp_notification_module_contentButtonSection--595c9","contentButtons":"bp_notification_module_contentButtons--595c9","closeButtonSection":"bp_notification_module_closeButtonSection--595c9","closeButton":"bp_notification_module_closeButton--595c9"};
+var styles = {"viewport":"bp_notification_module_viewport--cc8a5","root":"bp_notification_module_root--cc8a5","container":"bp_notification_module_container--cc8a5","messageRow":"bp_notification_module_messageRow--cc8a5","withButtons":"bp_notification_module_withButtons--cc8a5","info":"bp_notification_module_info--cc8a5","success":"bp_notification_module_success--cc8a5","warning":"bp_notification_module_warning--cc8a5","error":"bp_notification_module_error--cc8a5","typeIconContainer":"bp_notification_module_typeIconContainer--cc8a5","typeIcon":"bp_notification_module_typeIcon--cc8a5","text":"bp_notification_module_text--cc8a5","contentButtonSection":"bp_notification_module_contentButtonSection--cc8a5","contentButtons":"bp_notification_module_contentButtons--cc8a5","closeButtonSection":"bp_notification_module_closeButtonSection--cc8a5","closeButton":"bp_notification_module_closeButton--cc8a5"};
 
 export { styles as default };

package/dist/lib-esm/primitives/notification/notification.viewport-animated.d.ts

@@ -0,0 +1,7 @@
+import { type ToastViewportProps } from '@radix-ui/react-toast';
+export type AnimatedNotificationViewportProps = ToastViewportProps;
+/**
+ * Stacked-deck viewport. Imported dynamically after first paint so this module
+ * (hooks + stack CSS + animated toast) is not on the critical path.
+ */
+export declare const AnimatedNotificationViewport: import("react").ForwardRefExoticComponent<ToastViewportProps & import("react").RefAttributes<HTMLOListElement>>;

package/dist/lib-esm/primitives/notification/notification.viewport-animated.js

@@ -0,0 +1,147 @@
+import { jsx } from 'react/jsx-runtime';
+import { Viewport } from '@radix-ui/react-toast';
+import clsx from 'clsx';
+import { forwardRef, useState, useCallback, useEffect } from 'react';
+import { composeEventHandlers } from '../../utils/composeEventHandlers.js';
+import { useHoverFocusExpand } from './hooks/use-hover-focus-expand.js';
+import { useStackLayerMetrics } from './hooks/use-stack-layer-metrics.js';
+import { useStaggeredNotificationAdmission } from './hooks/use-staggered-notification-admission.js';
+import { useNotification } from './notification-provider.js';
+import { isOpenNotification, readRootPixelVar, NOTIFICATION_STACK_VISIBLE_DEPTH, NOTIFICATION_STACK_GAP_VAR, NOTIFICATION_STACK_DEPTH_OFFSET_VAR } from './notification-stack-utils.js';
+import stackStyles from './notification-stack.module.js';
+import styles from './notification.module.js';
+import { AnimatedPrivateNotificationElement } from './private-notification-element-animated.js';
+
+const VIEWPORT_DEFAULT_HOTKEY = ['F8'];
+/** Stack expand/collapse must stay consistent even if a consumer handler calls `preventDefault()`. */
+const COMPOSE_OPTIONS = {
+  checkForDefaultPrevented: false
+};
+/**
+ * Stacked-deck viewport. Imported dynamically after first paint so this module
+ * (hooks + stack CSS + animated toast) is not on the critical path.
+ */
+const AnimatedNotificationViewport = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    className,
+    hotkey = VIEWPORT_DEFAULT_HOTKEY,
+    style,
+    onBlur,
+    onFocus,
+    onMouseEnter,
+    onMouseLeave,
+    onPointerLeave,
+    ...rest
+  } = props;
+  const {
+    notifications
+  } = useNotification();
+  // Admission and render order stay oldest-first (arrival order): toasts portal into the
+  // viewport one by one, and Radix routes Escape to the last-mounted toast and Tab in reverse
+  // DOM order, so the newest must mount last. Depth (0 = front) is derived newest-first below;
+  // the visual stacking is CSS-only. Closed (`open === false`) entries stay out of admission
+  // and metrics — Radix does not render their toast root. Exiting toasts stay mounted for
+  // motion but drop out of stack metrics immediately (popLayout).
+  const arrivalEntries = Array.from(notifications.entries()).filter(([, notification]) => isOpenNotification(notification));
+  const {
+    visibleNotifications,
+    enteringId
+  } = useStaggeredNotificationAdmission(new Map(arrivalEntries), true);
+  const visibleEntries = Array.from(visibleNotifications?.entries() ?? arrivalEntries);
+  const [exitingIds, setExitingIds] = useState(() => new Set());
+  const handleExitStart = useCallback(id => {
+    setExitingIds(previous => {
+      if (previous.has(id)) {
+        return previous;
+      }
+      const next = new Set(previous);
+      next.add(id);
+      return next;
+    });
+  }, []);
+  useEffect(() => {
+    const liveIds = new Set(notifications.keys());
+    setExitingIds(previous => {
+      if (previous.size === 0) {
+        return previous;
+      }
+      let changed = false;
+      const next = new Set();
+      previous.forEach(id => {
+        if (liveIds.has(id)) {
+          next.add(id);
+        } else {
+          changed = true;
+        }
+      });
+      return changed ? next : previous;
+    });
+  }, [notifications]);
+  const layoutEntries = visibleEntries.filter(([id, notification]) => !exitingIds.has(id) && isOpenNotification(notification));
+  const layoutCount = layoutEntries.length;
+  const depthById = new Map(layoutEntries.map(([id], index) => [id, layoutCount - 1 - index]));
+  const {
+    metrics,
+    getLayerRef
+  } = useStackLayerMetrics(layoutCount, readRootPixelVar(NOTIFICATION_STACK_DEPTH_OFFSET_VAR), readRootPixelVar(NOTIFICATION_STACK_GAP_VAR));
+  const {
+    isExpanded,
+    stackRef,
+    handleMouseEnter,
+    handleMouseLeave,
+    handlePointerLeave,
+    handleFocus,
+    handleBlur
+  } = useHoverFocusExpand(layoutCount > 1, true);
+  const stackHeight = isExpanded ? metrics.expandedHeight : metrics.collapsedHeight;
+  const stackStyle = {
+    ...style,
+    '--notification-stack-height': `${stackHeight}px`,
+    '--notification-stack-visible-depth': NOTIFICATION_STACK_VISIBLE_DEPTH
+  };
+  // Radix portals each Toast.Root <li> straight into this viewport, so the viewport
+  // itself is the stack and each toast carries its own layer styles — no wrapper div.
+  return jsx(Viewport, {
+    ...rest,
+    ref: node => {
+      stackRef.current = node;
+      if (typeof forwardedRef === 'function') {
+        forwardedRef(node);
+      } else if (forwardedRef) {
+        forwardedRef.current = node;
+      }
+    },
+    className: clsx(styles.viewport, stackStyles.stack, {
+      [stackStyles.isExpanded]: isExpanded
+    }, className),
+    "data-bp-animated": "true",
+    hotkey: hotkey,
+    onBlur: composeEventHandlers(onBlur, handleBlur, COMPOSE_OPTIONS),
+    onFocus: composeEventHandlers(onFocus, handleFocus, COMPOSE_OPTIONS),
+    onMouseEnter: composeEventHandlers(onMouseEnter, handleMouseEnter, COMPOSE_OPTIONS),
+    onMouseLeave: composeEventHandlers(onMouseLeave, handleMouseLeave, COMPOSE_OPTIONS),
+    onPointerLeave: composeEventHandlers(onPointerLeave, handlePointerLeave, COMPOSE_OPTIONS),
+    style: stackStyle,
+    children: visibleEntries.map(([id, {
+      key,
+      ...notificationProps
+    }]) => {
+      const depth = depthById.get(id);
+      const inLayout = depth !== undefined;
+      return jsx(AnimatedPrivateNotificationElement, {
+        ...notificationProps,
+        depth: inLayout ? depth : 0,
+        expandOffset: inLayout ? metrics.offsets[depth] ?? 0 : 0,
+        isAnimationEnabled: true,
+        isBeyondVisibleDepth: inLayout && depth >= NOTIFICATION_STACK_VISIBLE_DEPTH,
+        isEntering: id === enteringId,
+        layerRef: inLayout ? getLayerRef(depth) : undefined,
+        onExitStart: handleExitStart,
+        stackId: id
+      }, id);
+    })
+  });
+});
+AnimatedNotificationViewport.displayName = 'Notification.Viewport.Animated';
+
+export { AnimatedNotificationViewport };

package/dist/lib-esm/primitives/notification/notification.viewport.d.ts

@@ -4,5 +4,10 @@ export type NotificationViewportProps = ToastViewportProps;
  * Renders container with Notifications.
  *
  * Based on Radix-UI [Viewport](https://www.radix-ui.com/docs/primitives/components/toast#viewport).
+ *
+ * Stacked-deck motion is loaded after first paint when Notification animation
+ * is on, so the extra hooks/CSS are not on the critical path. Toasts are held
+ * (nothing renders) until it resolves: swapping from the flat viewport would
+ * remount visible toasts, restarting their timers and re-announcing them.
  */
 export declare const NotificationViewport: import("react").ForwardRefExoticComponent<ToastViewportProps & import("react").RefAttributes<HTMLOListElement>>;

package/dist/lib-esm/primitives/notification/notification.viewport.js

@@ -1,7 +1,12 @@
 import { jsx } from 'react/jsx-runtime';
 import { Viewport } from '@radix-ui/react-toast';
 import clsx from 'clsx';
-import { forwardRef, useEffect } from 'react';
+import { forwardRef, useState, useEffect } from 'react';
+import '../../blueprint-configuration-context/blueprint-configuration-context.js';
+import '../../blueprint-configuration-context/consts.js';
+import { useBlueprintConfiguration } from '../../blueprint-configuration-context/useBlueprintConfiguration.js';
+import { isProduction } from '../../utils/isProduction.js';
+import { getLoadedAnimatedNotificationViewport, loadAnimatedNotificationViewport } from './load-animated-notification-viewport.js';
 import { useNotification } from './notification-provider.js';
 import styles from './notification.module.js';
 import { PrivateNotificationElement } from './private-notification-element.js';
@@ -11,6 +16,11 @@ const VIEWPORT_DEFAULT_HOTKEY = ['F8'];
  * Renders container with Notifications.
  *
  * Based on Radix-UI [Viewport](https://www.radix-ui.com/docs/primitives/components/toast#viewport).
+ *
+ * Stacked-deck motion is loaded after first paint when Notification animation
+ * is on, so the extra hooks/CSS are not on the critical path. Toasts are held
+ * (nothing renders) until it resolves: swapping from the flat viewport would
+ * remount visible toasts, restarting their timers and re-announcing them.
  */
 const NotificationViewport = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
@@ -21,6 +31,12 @@ const NotificationViewport = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     notifications
   } = useNotification();
+  const {
+    componentsWithAnimationEnabled
+  } = useBlueprintConfiguration();
+  const isAnimationEnabled = componentsWithAnimationEnabled.includes('Notification');
+  const [AnimatedViewport, setAnimatedViewport] = useState(() => isAnimationEnabled ? getLoadedAnimatedNotificationViewport() : null);
+  const [hasLoadFailed, setHasLoadFailed] = useState(false);
   useEffect(() => {
     const handleKeyDown = event => {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -37,6 +53,39 @@ const NotificationViewport = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     });
     return () => document.removeEventListener('keydown', handleKeyDown);
   }, [hotkey]);
+  useEffect(() => {
+    if (!isAnimationEnabled) {
+      setAnimatedViewport(null);
+      return undefined;
+    }
+    let cancelled = false;
+    setHasLoadFailed(false);
+    loadAnimatedNotificationViewport().then(component => {
+      if (!cancelled) {
+        setAnimatedViewport(() => component);
+      }
+    }).catch(() => {
+      if (!cancelled) {
+        setHasLoadFailed(true);
+      }
+      if (!isProduction()) {
+        // eslint-disable-next-line no-console
+        console.warn('Failed to load animated notification viewport');
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [isAnimationEnabled]);
+  if (isAnimationEnabled && AnimatedViewport) {
+    return jsx(AnimatedViewport, {
+      ...props,
+      ref: forwardedRef
+    });
+  }
+  if (isAnimationEnabled && !hasLoadFailed) {
+    return null;
+  }
   return jsx(Viewport, {
     ...rest,
     ref: forwardedRef,
@@ -50,5 +99,6 @@ const NotificationViewport = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     }, key))
   });
 });
+NotificationViewport.displayName = 'Notification.Viewport';
 
 export { NotificationViewport };

package/dist/lib-esm/primitives/notification/private-notification-element-animated.d.ts

@@ -0,0 +1,32 @@
+import { type PrivateNotificationElementProps } from './private-notification-element';
+/**
+ * Internal-only props supplied by the animated viewport, never by app code calling
+ * `addNotification` — not part of the public `Notification` API surface.
+ */
+export interface PrivateNotificationElementInternalProps extends PrivateNotificationElementProps {
+    /** Whether the stacked-deck animation feature (`data-bp-animated`) is on for this render. */
+    isAnimationEnabled?: boolean;
+    /** True only for the single toast currently being staggered in; drives the enter animation. */
+    isEntering?: boolean;
+    /**
+     * Position in the deck, newest first. Radix portals this toast's `<li>` directly into the
+     * viewport, so the toast has to carry its own layer styling rather than being wrapped in a
+     * positioned container by `NotificationViewport`.
+     */
+    depth?: number;
+    /** Translate distance for this layer when the deck is expanded, in px. */
+    expandOffset?: number;
+    /** True for layers stacked deeper than the visible peek depth; they're hidden while collapsed. */
+    isBeyondVisibleDepth?: boolean;
+    /** Lets the viewport measure this layer's rendered height for the deck's height math. */
+    layerRef?: (node: HTMLLIElement | null) => void;
+    /** Provider map key; paired with `onExitStart` so the viewport can pop this layer out of layout. */
+    stackId?: string;
+    /** Fires on the first exit frame so siblings can reflow in parallel with the exit motion. */
+    onExitStart?: (id: string) => void;
+}
+/**
+ * Stacked-deck toast. Loaded only from the animated viewport chunk so the flat
+ * Notification path stays off the first-paint graph.
+ */
+export declare function AnimatedPrivateNotificationElement(props: PrivateNotificationElementInternalProps): import("react/jsx-runtime").JSX.Element;