@cdx-ui/components 0.0.1-beta.159 → 0.0.1-beta.160

package/src/providers/forge-design/provider.tsx

@@ -1,7 +1,13 @@
 import React from 'react';
 import { SafeAreaListener } from 'react-native-safe-area-context';
 import { Uniwind } from 'uniwind';
-import { PortalHost } from '@cdx-ui/primitives';
+import {
+  OverlayInsetsProvider,
+  OverlayStackProvider,
+  PortalHost,
+  PortalProvider,
+  type EdgeInsets,
+} from '@cdx-ui/primitives';
 import { GlobalAnimationSettingsProvider } from '../animation-settings';
 import { TextComponentProvider } from '../text-component/provider';
 import { ToastProvider } from '../toast/provider';
@@ -28,6 +34,12 @@ import type { ForgeDesignProviderProps } from './types';
  */
 const ForgeDesignProvider: React.FC<ForgeDesignProviderProps> = ({ children, config = {} }) => {
   const { textProps, toast, animation } = config;
+  const [overlayInsets, setOverlayInsets] = React.useState<EdgeInsets>({
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+  });
 
   // Determine if toast should be enabled and get props
   const isToastEnabled = toast !== false && toast !== 'disabled';
@@ -37,23 +49,30 @@ const ForgeDesignProvider: React.FC<ForgeDesignProviderProps> = ({ children, con
     <SafeAreaListener
       onChange={({ insets }) => {
         Uniwind.updateInsets(insets);
+        setOverlayInsets(insets);
       }}
     >
-      <GlobalAnimationSettingsProvider animation={animation}>
-        <TextComponentProvider value={{ textProps }}>
-          {isToastEnabled ? (
-            <ToastProvider {...toastProps}>
-              {children}
-              <PortalHost />
-            </ToastProvider>
-          ) : (
-            <>
-              {children}
-              <PortalHost />
-            </>
-          )}
-        </TextComponentProvider>
-      </GlobalAnimationSettingsProvider>
+      <PortalProvider>
+        <OverlayStackProvider>
+          <OverlayInsetsProvider value={overlayInsets}>
+            <GlobalAnimationSettingsProvider animation={animation}>
+              <TextComponentProvider value={{ textProps }}>
+                {isToastEnabled ? (
+                  <ToastProvider {...toastProps}>
+                    {children}
+                    <PortalHost />
+                  </ToastProvider>
+                ) : (
+                  <>
+                    {children}
+                    <PortalHost />
+                  </>
+                )}
+              </TextComponentProvider>
+            </GlobalAnimationSettingsProvider>
+          </OverlayInsetsProvider>
+        </OverlayStackProvider>
+      </PortalProvider>
     </SafeAreaListener>
   );
 };

package/src/providers/toast/insets-container.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from 'react';
 import { useCallback, useContext, useEffect, useMemo, useRef } from 'react';
 import { Platform, View } from 'react-native';
 import { SafeAreaInsetsContext, type EdgeInsets } from 'react-native-safe-area-context';
-import { FullWindowOverlay } from '@cdx-ui/primitives';
+import { FullWindowOverlay, NOTIFICATION_OVERLAY_Z_INDEX } from '@cdx-ui/primitives';
 import type { ToastInsets } from './types';
 
 const ZERO_INSETS: EdgeInsets = { top: 0, bottom: 0, left: 0, right: 0 };
@@ -199,7 +199,7 @@ export function InsetsContainer({
   const content = (
     <View
       ref={containerRef}
-      className="absolute inset-0 pointer-events-box-none"
+      className="absolute web:fixed inset-0 pointer-events-box-none"
       role="region"
       aria-label={announceLabel}
       {...(Platform.OS === 'web' && {
@@ -207,6 +207,7 @@ export function InsetsContainer({
         'aria-atomic': false,
       })}
       style={{
+        ...(Platform.OS === 'web' ? { zIndex: NOTIFICATION_OVERLAY_Z_INDEX } : {}),
         paddingTop: finalInsets.top,
         paddingBottom: finalInsets.bottom,
         paddingLeft: finalInsets.left,

package/src/providers/toast/lifecycle.context.tsx

@@ -18,8 +18,8 @@ export interface ToastLifecycleContextValue {
   remove: (id: string) => void;
   /** IDs of toasts that have been marked closed but are still mounted. */
   pendingRemovalIds: ReadonlySet<string>;
-  /** ID of the front-most (last non-pending) toast, or null if none. */
-  frontmostId: string | null;
+  /** IDs of the front-most non-pending toast in each placement stack. */
+  frontmostIds: ReadonlySet<string>;
 }
 
 export const ToastLifecycleContext = createContext<ToastLifecycleContextValue | null>(null);

package/src/providers/toast/provider.tsx

@@ -9,7 +9,9 @@ import {
 } from 'react';
 import { Platform, View } from 'react-native';
 import { useSharedValue } from 'react-native-reanimated';
+import { createPortalFn, useOverlayStackRegistration } from '@cdx-ui/primitives';
 import { DefaultToast } from '../../components/Toast';
+import type { ToastPlacement } from '../../components/Toast/types';
 import { InsetsContainer } from './insets-container';
 import { ToastLifecycleContext, type ToastLifecycleContextValue } from './lifecycle.context';
 import { toastReducer } from './reducer';
@@ -26,6 +28,54 @@ import type {
 } from './types';
 
 const DEFAULT_DURATION = 4000;
+const TOAST_PLACEMENTS: readonly ToastPlacement[] = [
+  'top-start',
+  'top',
+  'top-end',
+  'bottom-start',
+  'bottom',
+  'bottom-end',
+];
+
+function useToastPlacementStacks() {
+  const topStartTotal = useSharedValue(0);
+  const topStartHeights = useSharedValue<Record<string, number>>({});
+  const topTotal = useSharedValue(0);
+  const topHeights = useSharedValue<Record<string, number>>({});
+  const topEndTotal = useSharedValue(0);
+  const topEndHeights = useSharedValue<Record<string, number>>({});
+  const bottomStartTotal = useSharedValue(0);
+  const bottomStartHeights = useSharedValue<Record<string, number>>({});
+  const bottomTotal = useSharedValue(0);
+  const bottomHeights = useSharedValue<Record<string, number>>({});
+  const bottomEndTotal = useSharedValue(0);
+  const bottomEndHeights = useSharedValue<Record<string, number>>({});
+
+  return useMemo(
+    () => ({
+      'top-start': { total: topStartTotal, heights: topStartHeights },
+      top: { total: topTotal, heights: topHeights },
+      'top-end': { total: topEndTotal, heights: topEndHeights },
+      'bottom-start': { total: bottomStartTotal, heights: bottomStartHeights },
+      bottom: { total: bottomTotal, heights: bottomHeights },
+      'bottom-end': { total: bottomEndTotal, heights: bottomEndHeights },
+    }),
+    [
+      bottomEndHeights,
+      bottomEndTotal,
+      bottomHeights,
+      bottomStartHeights,
+      bottomStartTotal,
+      bottomTotal,
+      topEndHeights,
+      topEndTotal,
+      topHeights,
+      topStartHeights,
+      topStartTotal,
+      topTotal,
+    ],
+  );
+}
 
 /**
  * Context for toast manager
@@ -137,19 +187,30 @@ export function ToastProvider({
 
   const isToastVisible = toasts.length > 0;
 
-  const heights = useSharedValue<Record<string, number>>({});
-
-  const total = useSharedValue<number>(0);
+  const placementStacks = useToastPlacementStacks();
 
   /**
-   * Derive total from toasts.length so the animated opacity/scale/translateY
-   * interpolations always use the real count.  Manual increment/decrement
-   * was prone to drift when hide + show ran in the same tick or when
-   * auto-dismiss raced with a manual hide (stale-closure mismatch).
+   * Each placement owns independent animation metrics. A toast at bottom-end
+   * must not compress or fade because unrelated toasts are open at top-start.
    */
   useEffect(() => {
-    total.set(toasts.length);
-  }, [toasts.length, total]);
+    const totals: Record<ToastPlacement, number> = {
+      'top-start': 0,
+      top: 0,
+      'top-end': 0,
+      'bottom-start': 0,
+      bottom: 0,
+      'bottom-end': 0,
+    };
+
+    for (const toast of toasts) {
+      totals[toast.placement] += 1;
+    }
+
+    for (const placement of TOAST_PLACEMENTS) {
+      placementStacks[placement].total.set(totals[placement]);
+    }
+  }, [placementStacks, toasts]);
 
   const idCounter = useRef(0);
 
@@ -199,17 +260,21 @@ export function ToastProvider({
 
       dispatch({ type: 'REMOVE', payload: { ids: idsArray } });
 
-      heights.modify(<T extends Record<string, number>>(value: T): T => {
-        'worklet';
-        const result = { ...value };
-        for (const id of idsArray) {
-          // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
-          delete result[id];
-        }
-        return result;
-      });
+      for (const placement of TOAST_PLACEMENTS) {
+        placementStacks[placement].heights.modify(
+          <T extends Record<string, number>>(value: T): T => {
+            'worklet';
+            const result = { ...value };
+            for (const id of idsArray) {
+              // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+              delete result[id];
+            }
+            return result;
+          },
+        );
+      }
     },
-    [heights],
+    [placementStacks],
   );
 
   /**
@@ -358,18 +423,18 @@ export function ToastProvider({
 
   const lifecycleContextValue = useMemo<ToastLifecycleContextValue>(() => {
     const pending = new Set<string>();
-    let frontmostId: string | null = null;
+    const frontmostByPlacement = new Map<ToastPlacement, string>();
     for (const toast of toasts) {
       if (toast.pendingRemoval) {
         pending.add(toast.id);
       } else {
-        frontmostId = toast.id;
+        frontmostByPlacement.set(toast.placement, toast.id);
       }
     }
     return {
       remove: (id: string) => remove([id]),
       pendingRemovalIds: pending,
-      frontmostId,
+      frontmostIds: new Set(frontmostByPlacement.values()),
     };
   }, [remove, toasts]);
 
@@ -391,6 +456,7 @@ export function ToastProvider({
         normalizedOptions = {
           id: undefined,
           component: createStringToastComponent(options, globalConfig),
+          placement: globalConfig?.placement,
           duration: DEFAULT_DURATION,
         };
         duration = DEFAULT_DURATION;
@@ -404,6 +470,7 @@ export function ToastProvider({
         normalizedOptions = {
           id: config.id,
           component: createConfigToastComponent(config, globalConfig),
+          placement: config.placement,
           duration,
           onShow: config.onShow,
           onHide: config.onHide,
@@ -418,6 +485,7 @@ export function ToastProvider({
 
       const id =
         normalizedOptions.id ?? `toast-${String(Date.now())}-${String(idCounter.current++)}`;
+      const placement = normalizedOptions.placement ?? globalConfig?.placement ?? 'bottom';
 
       // If an explicit ID was provided, check if a toast with that ID already exists
       // If it exists, skip adding a new toast and return the existing ID
@@ -432,6 +500,7 @@ export function ToastProvider({
         type: 'SHOW',
         payload: {
           id,
+          placement,
           component: normalizedOptions.component,
           duration,
           onShow: normalizedOptions.onShow,
@@ -497,40 +566,70 @@ export function ToastProvider({
     [show, hide, pauseAll, resumeAll, isToastVisible],
   );
 
+  useOverlayStackRegistration({
+    active: toasts.length > 0,
+    capabilities: [],
+    id: 'forge-ui-toast-viewport',
+    groupId: 'forge-ui-notifications',
+    layer: 'notification',
+  });
+
+  const placementIndexes: Record<ToastPlacement, number> = {
+    'top-start': 0,
+    top: 0,
+    'top-end': 0,
+    'bottom-start': 0,
+    bottom: 0,
+    'bottom-end': 0,
+  };
+
+  const toastViewport =
+    toasts.length > 0 ? (
+      <InsetsContainer
+        insets={insets}
+        announceLabel={announceLabel}
+        contentWrapper={contentWrapper}
+        disableFullWindowOverlay={disableFullWindowOverlay}
+        unstable_accessibilityContainerViewIsModal={unstable_accessibilityContainerViewIsModal}
+        pauseAll={pauseAll}
+        resumeAll={resumeAll}
+        hide={hide}
+      >
+        <View className="flex-1">
+          {toasts.map((toastItem) => {
+            const placement = toastItem.placement;
+            const index = placementIndexes[placement];
+            const stack = placementStacks[placement];
+            placementIndexes[placement] += 1;
+
+            return (
+              <ToastItemRenderer
+                key={toastItem.id}
+                toastItem={toastItem}
+                show={show}
+                hide={hide}
+                index={index}
+                total={stack.total}
+                heights={stack.heights}
+                maxVisibleToasts={maxVisibleToasts}
+              />
+            );
+          })}
+        </View>
+      </InsetsContainer>
+    ) : null;
+
+  const renderedToastViewport =
+    Platform.OS === 'web' && toastViewport && createPortalFn && typeof document !== 'undefined'
+      ? createPortalFn(toastViewport, document.body)
+      : toastViewport;
+
   return (
     <ToastConfigContext.Provider value={globalConfig}>
       <ToasterContext.Provider value={contextValue}>
         <ToastLifecycleContext.Provider value={lifecycleContextValue}>
           {children}
-          {toasts.length > 0 && (
-            <InsetsContainer
-              insets={insets}
-              announceLabel={announceLabel}
-              contentWrapper={contentWrapper}
-              disableFullWindowOverlay={disableFullWindowOverlay}
-              unstable_accessibilityContainerViewIsModal={
-                unstable_accessibilityContainerViewIsModal
-              }
-              pauseAll={pauseAll}
-              resumeAll={resumeAll}
-              hide={hide}
-            >
-              <View className="flex-1">
-                {toasts.map((toastItem, index) => (
-                  <ToastItemRenderer
-                    key={toastItem.id}
-                    toastItem={toastItem}
-                    show={show}
-                    hide={hide}
-                    index={index}
-                    total={total}
-                    heights={heights}
-                    maxVisibleToasts={maxVisibleToasts}
-                  />
-                ))}
-              </View>
-            </InsetsContainer>
-          )}
+          {renderedToastViewport}
         </ToastLifecycleContext.Provider>
       </ToasterContext.Provider>
     </ToastConfigContext.Provider>

package/src/providers/toast/toast-item-renderer.tsx

@@ -13,6 +13,7 @@ export const ToastItemRenderer = memo(
 
     const content = toastItem.component({
       id: toastItem.id,
+      placement: toastItem.placement,
       index,
       total,
       heights,
@@ -33,8 +34,11 @@ export const ToastItemRenderer = memo(
     return (
       prevProps.toastItem.id === nextProps.toastItem.id &&
       prevProps.toastItem.component === nextProps.toastItem.component &&
+      prevProps.toastItem.placement === nextProps.toastItem.placement &&
       prevProps.toastItem.pendingRemoval === nextProps.toastItem.pendingRemoval &&
-      prevProps.index === nextProps.index
+      prevProps.index === nextProps.index &&
+      prevProps.total === nextProps.total &&
+      prevProps.heights === nextProps.heights
     );
   },
 );

package/src/providers/toast/types.ts

@@ -1,5 +1,5 @@
 import type { SharedValue } from 'react-native-reanimated';
-import type { ToastProps } from '../../components/Toast/types';
+import type { ToastPlacement, ToastProps } from '../../components/Toast/types';
 
 /**
  * Global toast configuration
@@ -120,15 +120,19 @@ export interface ToastComponentProps {
    */
   id: string;
   /**
-   * The index of the toast in the array (0-based)
+   * Placement used to isolate this toast's stack metrics.
+   */
+  placement: ToastPlacement;
+  /**
+   * The index of the toast within its placement stack (0-based).
    */
   index: number;
   /**
-   * The total number of toasts currently displayed
+   * The total number of toasts currently displayed at this placement.
    */
   total: SharedValue<number>;
   /**
-   * Heights of all toast items, keyed by toast ID
+   * Heights of toast items at this placement, keyed by toast ID.
    */
   heights: SharedValue<Record<string, number>>;
   /**
@@ -225,6 +229,11 @@ export interface ToastShowOptionsWithComponent {
    * A function that receives toast props and returns a React element
    */
   component: (props: ToastComponentProps) => React.ReactElement;
+  /**
+   * Placement used for stack isolation and passed to the custom component.
+   * @default ToastProvider default placement, then 'bottom'
+   */
+  placement?: ToastPlacement;
   /**
    * Duration in milliseconds before the toast automatically disappears
    * Set to `'persistent'` to prevent auto-hide (toast will remain until manually dismissed)
@@ -243,7 +252,7 @@ export interface ToastShowOptionsWithComponent {
 
 /**
  * Conditional type for toast show options
- * - If component is provided: only id, component, onShow, onHide are allowed
+ * - If component is provided: lifecycle options plus placement are allowed
  * - If component is NOT provided: all config props are available
  */
 export type ToastShowOptions =
@@ -258,6 +267,11 @@ export interface ToastItem {
    * Unique identifier for the toast
    */
   id: string;
+  /**
+   * Resolved placement used to isolate stack animation metrics.
+   * @internal
+   */
+  placement: ToastPlacement;
   /**
    * A function that receives toast props and returns a React element
    */
@@ -388,15 +402,15 @@ export interface ToastItemRendererProps {
    */
   toastItem: ToastItem;
   /**
-   * The index of the toast in the array (0-based)
+   * The index of the toast within its placement stack (0-based).
    */
   index: number;
   /**
-   * The total number of toasts currently displayed
+   * The total number of toasts currently displayed at this placement.
    */
   total: SharedValue<number>;
   /**
-   * Heights of all toast items, keyed by toast ID
+   * Heights of toast items at this placement, keyed by toast ID.
    */
   heights: SharedValue<Record<string, number>>;
   /**