@oxy.so/bloom 3.5.0 → 4.0.0

package/src/theme/glass-colors.ts

@@ -91,8 +91,8 @@ import { withAlpha } from './color-utils';
  * in light mode that means lighter — which is the direction a white label can
  * least afford. Measured over 64 presets x 2 modes x 5 Bloom surfaces:
  *
- *   `Button` primary     73 of 640 rows fall below WCAG AA, in the band
- *                        4.17..4.50, ALL of them in LIGHT mode, across 27
+ *   `Button` primary     67 of 640 rows fall below WCAG AA, in the band
+ *                        4.21..4.50, ALL of them in LIGHT mode, across 27
  *                        presets (acid-canopy, arctic-signal, blue, bronze-neon,
  *                        clay-current, copper-field, electric-tide, faircoin,
  *                        green, lagoon, lavender, malachite-rush,
@@ -101,11 +101,12 @@ import { withAlpha } from './color-utils';
  *                        sky, solar-flux, viridian-orbit, yellow).
  *   `Button` destructive 0 of 640. Worst 5.32.
  *
- * As a SOLID fill all 1280 Button rows pass. The 1.0.1 catalog retains its exact
- * 38/340 failure set (including the original 18 presets' 30/180); the 30 new
- * three-seed combinations add 35/300 and do not worsen the 4.17 floor.
+ * As a SOLID fill all 1280 Button rows pass. Approved chroma 28 surfaces move
+ * the earlier 73/640 baseline to 67/640. Historical cohorts now measure 36/340
+ * (including the original 18 presets' 28/180) plus 31/300 additions.
  *
- * The alpha at which the failures reach zero is **0.89** (worst 4.52), and the
+ * In the historical low-chroma sweep, failures reached zero at **0.89**
+ * (worst 4.52), and the
  * curve between is steep: 0.86 -> 49 rows, 0.87 -> 26, 0.88 -> 8, 0.89 -> 0.
  * So AA compliance costs four hundredths of alpha. 0.85 is kept because it is
  * the reference's own value and matching the reference is the requirement;
@@ -178,7 +179,7 @@ export function glassSheenCss(stop: GlassSheenStop): string {
  */
 export const GLASS_RIM_HIGHLIGHT = 'inset 0 1px 0 0 rgba(255, 255, 255, 0.2)';
 
-/** The reference's `blur(10px)` — the radius of the material, on both platforms. */
+/** The reference's pure CSS `blur(10px)`, retained on web. */
 export const GLASS_BLUR_RADIUS_PX = 10;
 
 /**
@@ -203,28 +204,19 @@ export const GLASS_BLUR_FILTER = `blur(${GLASS_BLUR_RADIUS_PX}px)`;
 export const GLASS_SHEEN_GRADIENT = `linear-gradient(180deg, ${glassSheenCss(GLASS_SHEEN.top)}, ${glassSheenCss(GLASS_SHEEN.middle)} ${GLASS_SHEEN.middleStop * 100}%, ${glassSheenCss(GLASS_SHEEN.bottom)})`;
 
 /**
- * Intensity handed to `expo-blur`'s `BlurView` on NATIVE, derived from
- * {@link GLASS_BLUR_RADIUS_PX} through the `intensity * 0.2` px radius its web
- * build computes.
- *
- * KNOWN PLATFORM DIFFERENCE, stated rather than papered over: `expo-blur` cannot
- * be asked for a blur radius WITHOUT also painting a tint of its own — one
- * `intensity` drives both, at `intensity/100 * 0.78` — whereas CSS
- * `backdrop-filter` is a pure blur. So the native pane carries one extra neutral
- * layer the web pane does not.
- *
- * At 0.85 that extra layer is almost nothing, and the measurement says so: it
- * sits UNDER a fill that already covers 85%, so it can only tint the 15% that
- * gets through. Across the whole matrix the worst per-channel difference
- * between the web pane and the native pane is **2.35** of 255, and the two
- * legibility floors are 4.17 (web) and 4.19 (native).
- *
- * That is a real change from the 0.25 material, where the same layer moved the
- * two stacks visibly apart — the more opaque the fill, the less the platform
- * difference can matter. It is measured on every release rather than assumed,
- * because it is the kind of gap that widens the moment the alpha moves.
+ * Native expo-blur intensity is capped at 30 to preserve saturated backdrops.
+ * Its unavoidable neutral tint is intensity/100 * 0.78; CSS blur has no tint.
+ * With the approved chroma 28 surfaces, intensity 50 caused a 6.478/255 maximum
+ * painted-channel divergence. Intensity 30 reduces that to 3.887/255 without
+ * changing fill alpha 0.85, sheen, hairline, or the web's 10px blur.
+ *
+ * This deliberately trades native blur strength for closer material colour.
+ * The web intensity-to-radius approximation would be 6px, not 10px; actual
+ * native blur remains platform-dependent. The gate keeps the original <4
+ * colour-gap ceiling and >1 nonzero-tint discriminator; it does not claim
+ * equivalent spatial blur or replace real-device verification.
  */
-export const GLASS_BLUR_INTENSITY = GLASS_BLUR_RADIUS_PX / 0.2;
+export const GLASS_BLUR_INTENSITY = 30;
 
 export interface GlassColors {
   /** The translucent pane — the caller's brand fill at {@link GLASS_FILL_ALPHA}. */
@@ -259,9 +251,10 @@ export interface GlassColors {
  * backdrop takes its luminance from the page, so it needed the page's reading
  * colour. At 0.85 the pane is the fill, so it takes the fill's own label: on
  * the complete 3840-row matrix (64 presets x 2 modes x 6 tones x 5 surfaces),
- * `colors.text` fails AA on 3232 rows (worst 1.21) against the on-fill token's
- * 577 (worst 4.17). The 1.0.1 baseline remains 1714/2040 versus 305/2040;
- * the 30 additions contribute 1518/1800 versus 272/1800. The gate re-measures
+ * `colors.text` now fails AA on 2577 rows against the on-fill token's 480.
+ * The 1.0.1 cohort measures 1377/2040 versus 258/2040; the 30 additions
+ * contribute 1200/1800 versus 222/1800. Before chroma 28, those totals were
+ * 3232 versus 577 (historical worst 1.21 versus 4.17). The gate re-measures
  * and pins both on every alpha or surface change.
  */
 export function resolveGlassColors(fill: string): GlassColors {

package/src/theme/index.ts

@@ -37,7 +37,7 @@ export type {
 } from './ambient-store';
 export { useNavigationTheme } from './use-navigation-theme';
 export type { NavigationTheme, NavigationThemeFont } from './use-navigation-theme';
-export type { Theme, ThemeColors, ThemeMode, ThemeGradient, ThemeGradients } from './types';
+export type { Theme, ThemeColors, ThemeMode, ThemeGradient, ThemeGradients, ThemeChartColor } from './types';
 export type {
   AppColorName,
   AppColorPreset,

package/src/theme/index.web.ts

@@ -42,7 +42,7 @@ export type {
 } from './ambient-store';
 export { useNavigationTheme } from './use-navigation-theme';
 export type { NavigationTheme, NavigationThemeFont } from './use-navigation-theme';
-export type { Theme, ThemeColors, ThemeMode, ThemeGradient, ThemeGradients } from './types';
+export type { Theme, ThemeColors, ThemeMode, ThemeGradient, ThemeGradients, ThemeChartColor } from './types';
 export type {
   AppColorName,
   AppColorPreset,

package/src/theme/token-registry.ts

@@ -43,6 +43,19 @@ export const CANONICAL_TOKENS = [
   'chart-3',
   'chart-4',
   'chart-5',
+  'chart-6',
+  'chart-7',
+  'chart-8',
+  'chart-9',
+  'chart-1-active',
+  'chart-2-active',
+  'chart-3-active',
+  'chart-4-active',
+  'chart-5-active',
+  'chart-6-active',
+  'chart-7-active',
+  'chart-8-active',
+  'chart-9-active',
   'content-area',
   'sidebar-foreground',
   'sidebar-primary',

package/src/theme/types.ts

@@ -22,9 +22,13 @@ export interface ThemeColors {
   /** The M3 secondary accent — a real contrast colour (no longer a mirror of primary). */
   secondary: string;
   secondaryForeground: string;
+  secondarySubtle: string;
+  secondarySubtleForeground: string;
   /** The M3 tertiary accent, completing the primary/secondary/tertiary trio. */
   tertiary: string;
   tertiaryForeground: string;
+  tertiarySubtle: string;
+  tertiarySubtleForeground: string;
 
   tint: string;
   icon: string;
@@ -84,9 +88,16 @@ export interface ThemeGradient {
 /** Map of named gradients exposed on the theme (`theme.gradients`). */
 export type ThemeGradients = Record<string, ThemeGradient>;
 
+export interface ThemeChartColor {
+  color: string;
+  activeColor: string;
+}
+
 export interface Theme {
   mode: 'light' | 'dark';
   colors: ThemeColors;
+  /** Canonical chart-1…9 pairs. Built themes always provide these; custom themes may omit them. */
+  chartColors?: readonly ThemeChartColor[];
   /** Brand-neutral named linear-gradient palettes. Theme-agnostic (same in light/dark). */
   gradients: ThemeGradients;
   isDark: boolean;

package/src/theme-toggle/ThemeToggle.tsx

@@ -17,18 +17,24 @@ import Animated, {
 } from 'react-native-reanimated';
 import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
 
-import { ACCENT_TABLE, BUTTON_SHADOW, SEGMENTED_THUMB_EASE_BEZIER, SEGMENTED_THUMB_MS, colorRamp, mixColor, resolveButtonRamps } from '../button/shared';
+import {
+  ACCENT_TABLE,
+  BUTTON_SHADOW,
+  SEGMENTED_THUMB_EASE_BEZIER,
+  SEGMENTED_THUMB_MS,
+  colorRamp,
+  mixColor,
+} from '../button/shared';
 import { useInteractionState } from '../hooks/use-interaction-state';
 import { RiMoonLine } from '../icons/remix/RiMoonLine';
 import { RiSunLine } from '../icons/remix/RiSunLine';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import { borderRadius } from '../styles/tokens';
 import type { WebCssStyle } from '../styles/web-view-style';
-import { withAlpha } from '../theme/color-utils';
 import type { Theme } from '../theme/types';
 import { useBloomTheme } from '../theme/use-theme';
 import { Text } from '../typography';
-import type { ThemeToggleAppearance, ThemeToggleProps } from './types';
+import type { ThemeToggleVariant, ThemeToggleProps } from './types';
 import { revealTheme, THEME_TRANSITION_DURATION, type RevealOrigin } from './view-transition';
 
 /**
@@ -44,17 +50,9 @@ import { revealTheme, THEME_TRANSITION_DURATION, type RevealOrigin } from './vie
  *                      icon 16; a 32px thumb with shadow-xs slides 36px (200ms)
  *   glass-segmented    no track; black / white literals (landing nav skin)
  *
- * Tokens:
- *
- *                                      light            dark
- *   background-secondary (segmented)   neutral-100      neutral-900
- *   background-primary   (its thumb)   card             neutral-800
- *   theme-toggle-sidebar-background    neutral-200      neutral-800
- *   theme-toggle-sidebar-selected      card             neutral-700
- *   background-secondary-hover         neutral-200      neutral-800
- *   foreground-icon-primary            text             text
- *   foreground-icon-secondary          neutral-500      neutral-500
- *   background-tertiary (switch off)   neutral-200      neutral-800
+ * Neutral tracks, thumbs and labels use canonical surface/text roles; the
+ * active switch keeps its accent gradient and the explicit glass landing skin
+ * keeps its backdrop-dependent material colours.
  *
  * On web the change is revealed as a growing circle from the pointer
  * (`view-transition.ts`); natively, and under reduced motion, it is immediate.
@@ -71,8 +69,8 @@ interface TogglePalette {
   text: string;
   hover: string;
   ring: string;
-  track: Record<Exclude<ThemeToggleAppearance, 'sidebar'>, string>;
-  thumb: Record<Exclude<ThemeToggleAppearance, 'sidebar'>, string>;
+  track: Record<Exclude<ThemeToggleVariant, 'sidebar'>, string>;
+  thumb: Record<Exclude<ThemeToggleVariant, 'sidebar'>, string>;
   thumbShadow: string;
   switchOff: string;
   switchOn: readonly [string, string];
@@ -91,35 +89,33 @@ function mix(a: string, b: string, weightOfA: number): string {
 }
 
 export function resolveThemeTogglePalette(theme: Theme): TogglePalette {
-  const { accent, neutral: n } = resolveButtonRamps(theme);
+  const c = theme.colors;
   const text = theme.colors.text;
   const dark = theme.isDark;
   const ramp = colorRamp(theme.colors.primary, ACCENT_TABLE);
   return {
-    icon: n[500],
+    icon: c.textSecondary,
     iconActive: text,
-    text: n[500],
-    hover: dark ? n[800] : n[200],
-    ring: accent[500],
+    text: c.textSecondary,
+    hover: c.backgroundTertiary,
+    ring: c.primary,
     track: {
-      segmented: dark ? n[900] : n[100],
-      'sidebar-segmented': dark ? n[800] : n[200],
+      segmented: c.backgroundSecondary,
+      'sidebar-segmented': c.backgroundTertiary,
       'glass-segmented': 'transparent',
     },
     thumb: {
-      segmented: dark ? n[800] : theme.colors.card,
-      'sidebar-segmented': dark ? n[700] : theme.colors.card,
+      segmented: c.card,
+      'sidebar-segmented': c.card,
       'glass-segmented': dark ? '#2e2e33' : '#ffffff',
     },
     thumbShadow: dark ? BUTTON_SHADOW.dark : BUTTON_SHADOW.light,
-    switchOff: dark ? n[800] : n[200],
+    switchOff: c.backgroundTertiary,
     switchOn: [ramp[500], ramp[600]],
     switchOnShadow: `inset 0 1px 0 0 rgba(255, 255, 255, 0.25), inset 0 0 0 0.5px ${ramp[500]}`,
-    // `control-indicator-background` → `-subtle`: white → neutral-100 in both modes.
-    switchThumb: ['#ffffff', n[100]],
-    chipOff: dark
-      ? { border: withAlpha(n[700], 0.5), from: n[800], to: n[800] }
-      : { border: withAlpha(n[200], 0.5), from: '#ffffff', to: n[100] },
+    // Adjacent surfaces retain the raised indicator's gentle gradient.
+    switchThumb: [c.card, c.backgroundSecondary],
+    chipOff: { border: c.borderLight, from: c.card, to: c.backgroundSecondary },
     chipOn: {
       border: ramp[600],
       from: mix(ramp[500], ramp[600], 0.63),
@@ -351,7 +347,7 @@ function SegmentButton({
 
 const ThemeToggleComponent: React.FC<ThemeToggleProps> = ({
   collapsed = false,
-  appearance = 'sidebar',
+  variant = 'sidebar',
   transitionDuration = THEME_TRANSITION_DURATION,
   style,
   testID,
@@ -376,10 +372,10 @@ const ThemeToggleComponent: React.FC<ThemeToggleProps> = ({
     [setMode, transitionDuration],
   );
 
-  if (appearance !== 'sidebar') {
+  if (variant !== 'sidebar') {
     return (
       <SegmentedToggle
-        appearance={appearance}
+        variant={variant}
         dark={dark}
         palette={palette}
         reducedMotion={reducedMotion}
@@ -415,7 +411,7 @@ const ThemeToggleComponent: React.FC<ThemeToggleProps> = ({
 };
 
 function SegmentedToggle({
-  appearance,
+  variant,
   dark,
   palette,
   reducedMotion,
@@ -423,7 +419,7 @@ function SegmentedToggle({
   style,
   testID,
 }: {
-  appearance: Exclude<ThemeToggleAppearance, 'sidebar'>;
+  variant: Exclude<ThemeToggleVariant, 'sidebar'>;
   dark: boolean;
   palette: TogglePalette;
   reducedMotion: boolean;
@@ -431,7 +427,7 @@ function SegmentedToggle({
   style?: StyleProp<ViewStyle>;
   testID?: string;
 }) {
-  const glass = appearance === 'glass-segmented';
+  const glass = variant === 'glass-segmented';
   const progress = useSharedValue(dark ? 1 : 0);
   useEffect(() => {
     progress.value = reducedMotion ? (dark ? 1 : 0) : withTiming(dark ? 1 : 0, { duration: THUMB_MS, easing: EASE });
@@ -453,7 +449,7 @@ function SegmentedToggle({
           gap: 4,
           padding: 4,
           borderRadius: borderRadius.full,
-          backgroundColor: palette.track[appearance],
+          backgroundColor: palette.track[variant],
           zIndex: glass ? 10 : undefined,
         },
         style,
@@ -471,7 +467,7 @@ function SegmentedToggle({
             width: 32,
             height: 32,
             borderRadius: borderRadius.full,
-            backgroundColor: palette.thumb[appearance],
+            backgroundColor: palette.thumb[variant],
             boxShadow: palette.thumbShadow,
           },
           thumbStyle,

package/src/theme-toggle/index.ts

@@ -1,3 +1,3 @@
 export { ThemeToggle } from './ThemeToggle';
 
-export type { ThemeToggleAppearance, ThemeToggleProps } from './types';
+export type { ThemeToggleVariant, ThemeToggleProps } from './types';

package/src/theme-toggle/types.ts

@@ -7,16 +7,16 @@ import type { StyleProp, ViewStyle } from 'react-native';
  * - `glass-segmented`    literal black / white segments with no track, for a
  *                        host that supplies its own glass surface
  */
-export type ThemeToggleAppearance = 'sidebar' | 'segmented' | 'sidebar-segmented' | 'glass-segmented';
+export type ThemeToggleVariant = 'sidebar' | 'segmented' | 'sidebar-segmented' | 'glass-segmented';
 
 export interface ThemeToggleProps {
   /**
    * Compact 36px icon button for a collapsed sidebar rail. Only applies to the
-   * `sidebar` appearance.
+   * `sidebar` variant.
    */
   collapsed?: boolean;
   /** Visual treatment. Defaults to `sidebar`. */
-  appearance?: ThemeToggleAppearance;
+  variant?: ThemeToggleVariant;
   /** Circular reveal duration on web, in ms. Defaults to 820. */
   transitionDuration?: number;
   /**

package/src/toast/ToastContent.tsx

@@ -11,8 +11,9 @@
  * 1px border/button/default, card surface, `shadow-dropdown`, padding 16, a 40px
  * tinted status disc with a 20px Remix glyph, body-medium title, body-regular
  * description, small `Button`s for the actions and an xs CloseButton at
- * top 12 / right 12. Two toast-only departures:
+ * top 12 / right 12. Toast-only adaptations:
  *
+ * - Title-only messages use 12px vertical padding and a 28px disc.
  * - The right padding is a 44px close-button lane ONLY when a close
  *   button renders. `closeButton` defaults to false for toasts, and a one-line
  *   `toast('Saved')` with a permanently empty 28px lane reads as misaligned.
@@ -116,6 +117,7 @@ export function ToastContent({
   // Only the built-in button is absolutely placed; a caller `close` node stays in the row.
   const showsClose = Boolean(dismissible && !close && closeButton);
   const titleOnly = !description && !action && !cancel;
+  const visualSize = titleOnly ? 28 : G.visual;
   const hasVisual = Boolean(variant || icon || isLoading);
 
   const surfaceStyle: WebCssStyle | undefined = unstyled
@@ -124,6 +126,8 @@ export function ToastContent({
         backgroundColor: colors.surface,
         borderColor: colors.border,
         boxShadow: colors.shadow,
+        paddingTop: titleOnly ? 12 : G.padding,
+        paddingBottom: titleOnly ? 12 : G.padding,
         paddingRight: showsClose ? G.paddingRight : G.padding,
       };
 
@@ -145,7 +149,7 @@ export function ToastContent({
       <View
         style={[
           unstyled ? undefined : styles.row,
-          // A title on its own centres against the 40px disc instead of hugging
+          // A title on its own centres against its compact disc instead of hugging
           // its top and leaving an empty band where a description would sit.
           !unstyled && titleOnly ? styles.rowCentered : undefined,
           backgroundComponent ? styles.aboveBackground : undefined,
@@ -157,6 +161,7 @@ export function ToastContent({
           icon={icon}
           icons={icons}
           isLoading={isLoading}
+          size={visualSize}
           colors={colors}
           unstyled={unstyled}
         />
@@ -232,7 +237,7 @@ export function ToastContent({
           onDismiss={onDismiss}
           // Title-only: the ✕ centres on the row like the title does.
           buttonStyle={[
-            titleOnly ? { top: hasVisual ? (G.visual - CLOSE_XS) / 2 : 0 } : undefined,
+            titleOnly ? { top: hasVisual ? (visualSize - CLOSE_XS) / 2 : 0 } : undefined,
             styleOverrides?.closeButton,
           ]}
         />
@@ -244,7 +249,7 @@ export function ToastContent({
 ToastContent.displayName = 'ToastContent';
 
 /**
- * The leading visual: a 40px status disc holding the variant glyph (or
+ * The leading visual: a content-sized status disc holding the variant glyph (or
  * the spinner). A per-toast `icon` or an outlet `icons` override replaces the
  * GLYPH and keeps the disc. A variant-less toast with no `icon` has no leading
  * visual at all — it must never fall back to `info`.
@@ -254,6 +259,7 @@ function ToastLeadingVisual({
   icon,
   icons,
   isLoading,
+  size,
   colors,
   unstyled,
 }: {
@@ -261,6 +267,7 @@ function ToastLeadingVisual({
   icon: ToastProps['icon'];
   icons: ToastIcons;
   isLoading: boolean;
+  size: number;
   colors: ToastColors;
   unstyled: boolean;
 }) {
@@ -280,7 +287,7 @@ function ToastLeadingVisual({
   if (unstyled) {
     return <>{glyph}</>;
   }
-  return <View style={[styles.disc, { backgroundColor: colors.iconBackground }]}>{glyph}</View>;
+  return <View style={[styles.disc, { width: size, height: size, borderRadius: size / 2, backgroundColor: colors.iconBackground }]}>{glyph}</View>;
 }
 
 function ToastActionButton({
@@ -295,13 +302,7 @@ function ToastActionButton({
   textStyle?: StyleProp<TextStyle>;
 }) {
   return (
-    <Button
-      size="small"
-      variant={variant}
-      onPress={action.onClick}
-      style={buttonStyle}
-      textStyle={textStyle}
-    >
+    <Button size="sm" appearance={variant === 'primary' ? 'solid' : 'subtle'} tone={variant === 'primary' ? 'accent' : 'neutral'} onPress={action.onClick} style={buttonStyle} textStyle={textStyle}>
       {action.label}
     </Button>
   );

package/src/toast/ToastRow.tsx

@@ -59,7 +59,9 @@ import {
   toastDefaults,
 } from './constants';
 import { useDynamicToastContext, useToastContext } from './context';
-import { calculateStackScaleX } from './row-geometry';
+import { calculateStackScaleX, calculateToastVisibleHeight } from './row-geometry';
+import { NOTIFICATION_GEOMETRY } from '../notification/shared';
+import { space } from '../styles/tokens';
 import { isStackHovered } from './use-stack-hover';
 import { useAnimatedTarget } from './use-animated-target';
 import { ToastContent } from './ToastContent';
@@ -242,6 +244,28 @@ export const ToastRow = React.forwardRef<ToastRef, ToastRowProps>(
       { duration: STACKING_ANIMATION_DURATION, easing: easeOutQuartFn },
     );
 
+    // Keep the measured child intrinsic. Only its viewport changes height, so a
+    // tall description/custom row cannot protrude behind a shorter front card.
+    const visibleHeight = useAnimatedTarget(calculateToastVisibleHeight({
+      index, numberOfToasts, enableStacking, position,
+      allToastHeights: toastHeights, orderedToastIds, isExpanded,
+    }), { duration: STACKING_ANIMATION_DURATION, easing: easeOutQuartFn });
+    const naturalHeight = toastHeights[id];
+    const surfaceStyle = StyleSheet.flatten([mergedStyles.toast, style]);
+    const inset = jsx || unstyled ? 0 : space.lg;
+    const leftMargin = surfaceStyle?.marginLeft ?? surfaceStyle?.marginHorizontal ?? inset;
+    const insetLeft = typeof leftMargin === 'number' ? leftMargin : 0;
+    const rightMargin = surfaceStyle?.marginRight ?? surfaceStyle?.marginHorizontal ?? inset;
+    const insetRight = typeof rightMargin === 'number' ? rightMargin : 0;
+    const viewportStyle = useAnimatedStyle(() => {
+      const constrained = naturalHeight !== undefined && visibleHeight.value < naturalHeight - 0.5;
+      return {
+        // maxHeight (not a text transform) clips without squashing typography.
+        maxHeight: naturalHeight === undefined ? undefined : visibleHeight.value,
+        overflow: constrained ? 'hidden' : 'visible',
+      };
+    }, [visibleHeight, naturalHeight]);
+
     const stackTransformStyle = useAnimatedStyle(
       () => ({
         transform: [
@@ -413,16 +437,20 @@ export const ToastRow = React.forwardRef<ToastRef, ToastRowProps>(
     const stackZIndex =
       position === 'top-center' ? -(index + 1) : -(numberOfToasts - index);
 
+    // Exit owns a separate anchor. Its keyframe resets transform, so placing
+    // stackTransformStyle on that node loses the departing row's offset/scale.
+    // Keeping the stack transform inside also preserves it in the web exit clone.
     return (
       <Animated.View
+        exiting={exiting}
         pointerEvents="box-none"
         style={[
           styles.anchor,
           anchorFor(position),
           { zIndex: stackZIndex },
-          stackTransformStyle,
         ]}
       >
+        <Animated.View style={stackTransformStyle}>
         <ToastSwipeHandler
           onRemove={onRemove}
           onBegin={onSwipeBegin}
@@ -437,10 +465,17 @@ export const ToastRow = React.forwardRef<ToastRef, ToastRowProps>(
         >
           <Animated.View style={rowStyle}>
             <Animated.View
+              style={[{
+                marginLeft: insetLeft,
+                marginRight: insetRight,
+                borderRadius: surfaceStyle?.borderRadius ?? NOTIFICATION_GEOMETRY.radius,
+              }, viewportStyle]}
+            >
+            <Animated.View
+              style={{ flexShrink: 0, marginLeft: -Number(insetLeft), marginRight: -Number(insetRight) }}
               ref={measuredRef}
               onLayout={handleLayout}
               entering={entering}
-              exiting={exiting}
             >
               {jsx ?? (
                 <ToastContent
@@ -479,8 +514,10 @@ export const ToastRow = React.forwardRef<ToastRef, ToastRowProps>(
                 />
               )}
             </Animated.View>
+            </Animated.View>
           </Animated.View>
         </ToastSwipeHandler>
+        </Animated.View>
       </Animated.View>
     );
   },

package/src/toast/animations.ts

@@ -87,7 +87,7 @@ import type {
  * babel plugin too.
  */
 const EASE_OUT_QUART = Easing.bezier(0.165, 0.84, 0.44, 1);
-const EASE_IN_OUT_CUBIC = Easing.bezier(0.645, 0.045, 0.355, 1);
+
 
 export type ToastEnterDriver = 'imperative' | 'layoutAnimation';
 
@@ -111,8 +111,9 @@ const ENTER_TRANSLATE_Y: Record<ToastPosition, number> = {
   center: 50,
 };
 
-/** A lone row leaves the screen entirely; a stacked one only slides by `stackGap`. */
-const EXIT_TRANSLATE_Y_SINGLE = 150;
+/** Exit stays near its resting slot instead of throwing the card offscreen. */
+const EXIT_TRANSLATE_Y_SINGLE = 12;
+const EXIT_DURATION = 180;
 
 /**
  * Bounded so an animated `gap` cannot grow the cache without limit. The natural
@@ -190,21 +191,24 @@ export function getToastExitAnimation({
       if (isHiddenByLimit) {
         return new Keyframe({
           from: { opacity: 1 },
-          to: { opacity: 0, easing: EASE_IN_OUT_CUBIC },
-        }).duration(ENTERING_ANIMATION_DURATION);
+          50: { opacity: 0.35 },
+          to: { opacity: 0 },
+        }).duration(EXIT_DURATION);
       }
 
-      const distance = isSingle ? EXIT_TRANSLATE_Y_SINGLE : stackGap;
+      const distance = isSingle ? EXIT_TRANSLATE_Y_SINGLE : Math.min(EXIT_TRANSLATE_Y_SINGLE, Math.max(0, stackGap));
       const translateY = position === 'top-center' ? -distance : distance;
 
       return (
         new Keyframe({
           from: { opacity: 1, transform: [{ translateY: 0 }] },
-          to: { opacity: 0, transform: [{ translateY }], easing: EASE_IN_OUT_CUBIC },
+          // Explicit stops keep the deceleration on web too: custom bezier
+          // factories have no recognised CSS easing name without the plugin.
+          50: { opacity: 0.35, transform: [{ translateY: translateY * 0.75 }] },
+          to: { opacity: 0, transform: [{ translateY }] },
         })
-          // Matches the store's overlay teardown delay, which is also
-          // ENTERING_ANIMATION_DURATION — a longer exit would be cut off.
-          .duration(ENTERING_ANIMATION_DURATION)
+          // Finishes within the store's 300ms overlay teardown grace period.
+          .duration(EXIT_DURATION)
       );
     },
   );

package/src/toast/row-geometry.ts

@@ -83,6 +83,25 @@ const heightOf = (
   return allToastHeights[id] || ESTIMATED_TOAST_HEIGHT;
 };
 
+/** Visual row height while stacked; measurements always remain intrinsic. */
+export const calculateToastVisibleHeight = ({
+  index, numberOfToasts, enableStacking, position, allToastHeights,
+  orderedToastIds, isExpanded,
+}: {
+  index: number;
+  numberOfToasts: number;
+  enableStacking: boolean;
+  position: ToastPosition;
+  allToastHeights: Record<string | number, number>;
+  orderedToastIds: Array<string | number>;
+  isExpanded: boolean;
+}): number => {
+  const natural = heightOf(allToastHeights, orderedToastIds[index]);
+  if (!enableStacking || isExpanded) return natural;
+  const front = position === 'top-center' ? 0 : numberOfToasts - 1;
+  return Math.min(natural, heightOf(allToastHeights, orderedToastIds[front]));
+};
+
 export const calculateToastPosition = ({
   index,
   numberOfToasts,
@@ -114,7 +133,9 @@ export const calculateToastPosition = ({
       : 0;
 
   if (effectiveEnableStacking) {
-    const currentHeight = heightOf(allToastHeights, orderedToastIds[index]);
+    const currentHeight = calculateToastVisibleHeight({
+      index, numberOfToasts, enableStacking, position, allToastHeights, orderedToastIds, isExpanded,
+    });
 
     if (position === 'top-center') {
       const frontHeight = heightOf(allToastHeights, orderedToastIds[0]);

package/src/toast/use-toast-colors.ts

@@ -16,7 +16,7 @@
  * widens the glyph colour to the border and title as well. Exactly like sonner.
  *
  * NOTHING HERE MAY REACH FOR A BRAND TOKEN. `success` / `error` / `warning` /
- * `info` are STATUS colours; `primarySubtle` / `negativeSubtle` are BRAND pairs.
+ * `info` are STATUS colours; `primarySubtle` is the BRAND pair; `negativeSubtle` aliases error.
  * Mixing the families is what made `toast.success('Saved')` render as a
  * brand-purple card, and what made a success icon flip from green to purple when
  * `richColors` was switched on. `richColors` means "show the status colour more