@oxy.so/bloom 5.4.0 → 6.0.0

package/src/dialog/Dialog.web.tsx

@@ -1,7 +1,8 @@
+import { MOTION_RECIPES } from '../motion/recipes';
 import { surfaceStyle } from '../shapes/surface-style';
 import { SURFACE_SHAPES } from '../design-tokens/shapes';
 import { SurfacePaint } from '../surface/SurfacePaint';
-import { resolveSurfaceFill } from '../surface/shared';
+import { resolveSurfaceMaterial } from '../surface/resolve-surface-material';
 /**
  * `Dialog` — WEB: a pure-DOM modal overlay rendered into Bloom's `Portal`.
  *
@@ -25,15 +26,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import {
-  Pressable,
-  ScrollView,
-  StyleSheet,
-  useWindowDimensions,
-  View,
-  type StyleProp,
-  type ViewStyle,
-} from 'react-native';
+import { ScrollView, StyleSheet, useWindowDimensions, View, type StyleProp, type ViewStyle } from 'react-native';
 import Animated, {
   Easing,
   useSharedValue,
@@ -46,13 +39,13 @@ import { ModalKeyboard } from '../overlay/ModalKeyboard';
 import { StyledView } from '../styles/styled-primitives';
 import { Portal } from '../portal/index.web';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
-import { SurfaceLevelProvider, surfaceFillVars } from '../styles/surface-levels';
+import { SurfaceLevelProvider } from '../styles/surface-levels';
 import { Z_INDEX } from '../styles/z-index';
 import { WEB_POSITION_FIXED, type WebCssStyle } from '../styles/web-view-style';
 import { bloomShadowStyle } from '../design-tokens/shadows';
 import { useTheme } from '../theme/use-theme';
 import { useIsRtl } from '../hooks/use-is-rtl';
-import { Context, useDialogContext, useDialogControl } from './context';
+import { Context, useDialogContext } from './context';
 import { DialogBody } from './DialogContent';
 import { DialogBottomSheet } from './DialogBottomSheet';
 import {
@@ -319,8 +312,8 @@ function CenterOrSideDialog({
       return;
     }
     backdropFade.value = isClosing
-      ? withTiming(0, { duration: FADE_OUT_DURATION, easing: Easing.in(Easing.ease) })
-      : withTiming(1, { duration: BACKDROP_FADE_IN_DURATION, easing: Easing.out(Easing.ease) });
+      ? withTiming(0, { ...MOTION_RECIPES.dismiss, duration: FADE_OUT_DURATION, easing: Easing.in(Easing.ease) })
+      : withTiming(1, { ...MOTION_RECIPES.present, duration: BACKDROP_FADE_IN_DURATION, easing: Easing.out(Easing.ease) });
   }, [backdropFade, isOpen, isClosing]);
 
   useImperativeHandle(
@@ -477,7 +470,8 @@ function DialogPanel({
   const headerController = useDialogHeaderController();
   const { height: viewportHeight } = useWindowDimensions();
   const heightRatio = maxHeightRatio ?? DEFAULT_MAX_HEIGHT_RATIO;
-  const surfaceFill = resolveSurfaceFill(String(StyleSheet.flatten(style)?.backgroundColor ?? theme.colors.background), false, theme.colors.background);
+  const material = resolveSurfaceMaterial({ fill: String(StyleSheet.flatten(style)?.backgroundColor ?? theme.colors.background), parentFill: theme.colors.background, level: 0 });
+  const { paintFill, publishedFill: surfaceFill } = material;
 
   // Size morphing across an in-place content swap. The centered card is the one
   // placement whose width can vary too, so `maxWidth` is handed over as well.
@@ -538,7 +532,7 @@ function DialogPanel({
           // `--bloom-surface` on the element that carries the fill, so web CSS
           // inside the dialog reads the dialog's colour and not the colour of
           // whatever surface it was opened over.
-          ...surfaceFillVars(surfaceFill),
+          ...material.vars,
           borderWidth: 1,
           borderColor: theme.isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)',
           // Design-system overlay elevation (`shadow-m`) as a `boxShadow` — RN-Web
@@ -560,8 +554,8 @@ function DialogPanel({
         { backgroundColor: 'transparent' },
       ]}
     >
-      <SurfacePaint fill={surfaceFill} shape={{ curve: SURFACE_SHAPES.panel.curve }} radius={StyleSheet.flatten(style)?.borderRadius ?? 20} />
-      <SurfaceLevelProvider level={0} fill={surfaceFill}>
+      <SurfacePaint fill={paintFill} shape={{ curve: SURFACE_SHAPES.panel.curve }} radius={StyleSheet.flatten(style)?.borderRadius ?? 20} />
+      <SurfaceLevelProvider level={material.level} fill={surfaceFill}>
       {header ? (
         // Nav-header mode: the Dialog OWNS a sticky gradient nav bar + a large
         // collapsing title over its own scroll content (see `DialogHeader`). The
@@ -750,7 +744,8 @@ function SheetSurface({
     if (dismissOnBackdrop) onDismiss();
   }, [dismissOnBackdrop, onDismiss]);
 
-  const surfaceFill = resolveSurfaceFill(String(StyleSheet.flatten([panelStyle, style])?.backgroundColor ?? theme.colors.background), false, theme.colors.background);
+  const material = resolveSurfaceMaterial({ fill: String(StyleSheet.flatten([panelStyle, style])?.backgroundColor ?? theme.colors.background), parentFill: theme.colors.background, level: 0 });
+  const { paintFill, publishedFill: surfaceFill } = material;
 
   // The drawer uses the PAGE token as its tint and nominal surface for its
   // content — see `DialogPanel`'s own wrap for why a portal does not do that on
@@ -790,7 +785,7 @@ function SheetSurface({
         className={panelClassName}
         style={[
           sheetStyles.panel,
-          surfaceFillVars(surfaceFill),
+          material.vars,
           {
             backgroundColor: 'transparent',
             // Above this surface's OWN backdrop, and nothing more: `OverlayRoot`
@@ -810,8 +805,8 @@ function SheetSurface({
           { backgroundColor: 'transparent' },
         ]}
       >
-        <SurfacePaint fill={surfaceFill} shape={{ curve: SURFACE_SHAPES.panel.curve }} radius={StyleSheet.flatten([panelStyle, style])?.borderRadius ?? SURFACE_SHAPES.panel.radius} />
-        <SurfaceLevelProvider level={0} fill={surfaceFill}>
+        <SurfacePaint fill={paintFill} shape={{ curve: SURFACE_SHAPES.panel.curve }} radius={StyleSheet.flatten([panelStyle, style])?.borderRadius ?? SURFACE_SHAPES.panel.radius} />
+        <SurfaceLevelProvider level={material.level} fill={surfaceFill}>
         {header ? (
           // Nav-header mode on a side drawer: a static titled bar (the drawer
           // body does not own a Dialog scroll offset to drive a collapse) over

package/src/directions/DirectionsSummary.tsx

@@ -214,11 +214,11 @@ function DirectionsSummaryComponent({
 
       {onStart && chosen ? (
         <Button
-          variant="primary"
-          size="medium"
+
+          size="md"
           leadingIcon={ModeIcon}
           onPress={onStart}
-          testID={id('start')}
+          testID={id('start')} tone="accent" appearance="solid"
         >
           {labels?.start ?? messages.start}
         </Button>

package/src/empty-state/EmptyState.tsx

@@ -84,8 +84,9 @@ function EmptyStateComponent({
 
   const renderAction = (a: EmptyStateAction, kind: 'primary' | 'secondary') => (
     <Button
-      variant={kind}
-      size={variant === 'compact' ? 'small' : 'medium'}
+      appearance={kind === 'primary' ? 'solid' : 'outline'}
+      tone={kind === 'primary' ? 'accent' : 'neutral'}
+      size={variant === 'compact' ? 'sm' : 'md'}
       onPress={a.onPress}
       disabled={a.disabled}
       loading={a.loading}

package/src/eviction/EvictionReportCard.tsx

@@ -229,17 +229,17 @@ function EvictionReportCardComponent({
             />
           ) : null}
           {onShare ? (
-            <Button variant="secondary" size="small" leadingIcon={RiShareLine} onPress={onShare} testID={id('share')}>
+            <Button  size="sm" leadingIcon={RiShareLine} onPress={onShare} testID={id('share')} tone="neutral" appearance="outline">
               {shareLabel}
             </Button>
           ) : null}
           {onContactSupport ? (
             <Button
-              variant="secondary"
-              size="small"
+
+              size="sm"
               leadingIcon={RiChat3Line}
               onPress={onContactSupport}
-              testID={id('contact')}
+              testID={id('contact')} tone="neutral" appearance="outline"
             >
               {contactSupportLabel}
             </Button>

package/src/fab/index.ts

@@ -1,2 +1,2 @@
 export { Fab } from './Fab';
-export type { FabProps, FabVariant, FabSize, FabPlacement, FabMinimizeBehavior } from './types';
+export type { FabProps, FabSize } from './types';

package/src/fab/index.web.ts

@@ -4,4 +4,4 @@
 // changing that barrel or the set of web-forked subpaths.
 
 export { Fab } from './Fab.web';
-export type { FabProps, FabVariant, FabSize, FabPlacement, FabMinimizeBehavior } from './types';
+export type { FabProps, FabSize } from './types';

package/src/fab/types.ts

@@ -1,28 +1,16 @@
-import type { ReactNode } from 'react';
 import type { StyleProp, TextStyle } from 'react-native';
-import type { ButtonProps } from '../button/types';
+import type { ButtonProps, ButtonIconComponent } from '../button/types';
 import type { BloomSize } from '../appearance';
 
-export type FabVariant = 'primary' | 'secondary' | 'tertiary' | 'surface';
-export type FabSize = 'small' | 'medium' | 'large';
-export type FabPlacement = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'static';
-export type FabMinimizeBehavior = 'none' | 'hide' | 'collapse';
+export type FabSize = BloomSize;
 
-/** A prominent action. Screen/BottomBar own placement unless explicitly supplied. */
-export interface FabProps extends Omit<ButtonProps, 'children' | 'leadingIcon' | 'trailingIcon' | 'leading' | 'trailing' | 'size' | 'variant'> {
+/** A prominent action. Screen/BottomBar own placement and scroll behavior. */
+export interface FabProps extends Omit<ButtonProps, 'children' | 'icon' | 'leadingIcon' | 'trailingIcon' | 'leading' | 'trailing'> {
+  icon?: ButtonIconComponent;
   label?: string;
-  /** Glyph dimensions in points; defaults to the selected size’s icon scale. */
+  /** Glyph dimensions in points; defaults to the selected size's icon scale. */
   iconSize?: number;
-  /** Animate the extended label away while retaining the action and accessible name. */
+  /** Parent-controlled label collapse; preserves the action and accessible name. */
   collapsed?: boolean;
-  children?: ReactNode;
-  size?: BloomSize | FabSize | number;
-  /** Existing color preset. Explicit tone takes precedence. */
-  variant?: FabVariant;
-  placement?: FabPlacement;
-  offset?: number;
-  minimizeBehavior?: FabMinimizeBehavior;
   labelStyle?: StyleProp<TextStyle>;
-  zIndex?: number;
-  accessibilityHint?: string;
 }

package/src/fab/use-fab-props.ts

@@ -1,54 +1,23 @@
-import { cloneElement, createElement, isValidElement, useMemo } from 'react';
-import { Platform, type ViewStyle } from 'react-native';
+import { createElement } from 'react';
 import { useBloomAppearance } from '../appearance/context';
-import type { BloomSize, BloomTone } from '../appearance/types';
 import { resolveButtonPalette } from '../button/shared';
 import { useTheme } from '../theme/use-theme';
 import { FAB_METRICS } from './constants';
 import { FabLabel } from './FabLabel';
 import type { ButtonProps } from '../button/types';
-import { useBottomEdgeInset } from '../layout/bottom-edge';
-import type { WebCssStyle } from '../styles/web-view-style';
-import { useFabMinimized } from './use-fab-minimized';
 import type { FabProps } from './types';
 
-const LEGACY_SIZE = { small: 'xs', medium: 'md', large: 'lg' } as const;
-const LEGACY_TONE = { primary: 'accent', secondary: 'support', tertiary: 'action', surface: 'neutral' } as const;
-
-export function useFabProps({ label, children, icon, iconSize, size, collapsed = false, variant, tone, appearance = 'solid', placement = 'static', offset = 16, minimizeBehavior = 'none', labelStyle, textStyle, zIndex, accessibilityHint: _hint, style, ...props }: FabProps): ButtonProps {
+export function useFabProps({ label, icon, iconSize, size, collapsed = false, tone, appearance = 'solid', labelStyle, textStyle, style, ...props }: FabProps): ButtonProps {
   const theme = useTheme();
-  const normalizedSize: BloomSize | undefined = typeof size === 'number' ? 'md' : size && size in LEGACY_SIZE ? LEGACY_SIZE[size as keyof typeof LEGACY_SIZE] : size as BloomSize | undefined;
-  const resolved = useBloomAppearance({ size: normalizedSize, tone: tone ?? (variant ? LEGACY_TONE[variant] as BloomTone : undefined) }, { size: 'md', tone: 'action' });
-  const minimized = useFabMinimized(minimizeBehavior !== 'none');
-  const bottomInset = useBottomEdgeInset();
-  const hidden = minimized && minimizeBehavior === 'hide';
-  const labelCollapsed = collapsed || (minimized && minimizeBehavior === 'collapse');
+  const resolved = useBloomAppearance({ size, tone }, { size: 'md', tone: 'action' });
   const palette = resolveButtonPalette(appearance, theme, resolved.tone);
   const foreground = props.disabled ? palette.disabled.foreground : palette.rest.foreground;
-  const diameter = typeof size === 'number' && Number.isFinite(size) ? Math.max(1, size) : FAB_METRICS[resolved.size].diameter;
+  const diameter = FAB_METRICS[resolved.size].diameter;
   const glyphSize = typeof iconSize === 'number' && Number.isFinite(iconSize) && iconSize > 0 ? iconSize : FAB_METRICS[resolved.size].iconSize;
-  const sourceIcon = icon ?? children;
-  // Let Button paint legacy elements through the same state-aware icon path.
-  const resolvedIcon = useMemo(() => {
-    if (!isValidElement<{ width?: number; height?: number; fill?: string; color?: string }>(sourceIcon)) return sourceIcon;
-    const element = sourceIcon;
-    return function FabElementIcon(paint: { width?: number; height?: number; fill?: string }) {
-      return cloneElement(element, {
-        width: paint.width,
-        height: paint.height,
-        ...(element.props.fill == null && element.props.color == null ? { fill: paint.fill } : {}),
-      });
-    };
-  }, [sourceIcon]);
-  const position: ViewStyle & WebCssStyle = {};
-  if (placement !== 'static') {
-    const bottom = placement.startsWith('bottom');
-    const right = placement.endsWith('right');
-    if (Platform.OS === 'web') {
-      Object.assign(position, { position: 'sticky', alignSelf: right ? 'flex-end' : 'flex-start', ...(bottom ? { bottom: offset + bottomInset, marginTop: 'auto', marginBottom: offset + bottomInset } : { top: offset, marginTop: offset }), marginLeft: right ? undefined : offset, marginRight: right ? offset : undefined });
-    } else {
-      Object.assign(position, { position: 'absolute', [bottom ? 'bottom' : 'top']: offset + (bottom ? bottomInset : 0), [right ? 'right' : 'left']: offset });
-    }
-  }
-  return { ...props, ...resolved, appearance, icon: resolvedIcon, iconSize: glyphSize, trailing: label ? createElement(FabLabel, { label, collapsed: labelCollapsed, color: foreground, variant: props.textVariant ?? FAB_METRICS[resolved.size].labelVariant, style: [labelStyle, textStyle], testID: props.testID ? `${props.testID}-label` : undefined }) : undefined, accessibilityLabel: props.accessibilityLabel ?? label, textStyle: [labelStyle, textStyle], style: [{ height: diameter, minHeight: diameter, ...(label ? { width: 'auto', minWidth: diameter, paddingLeft: Math.max(0, (diameter - glyphSize) / 2), paddingRight: Math.max(0, (diameter - glyphSize) / 2), gap: 0 } : { width: diameter }), ...position, ...(zIndex == null ? {} : { zIndex }), ...(hidden ? { display: 'none' } : {}) }, style] };
+  return { ...props, ...resolved, appearance, icon, iconSize: glyphSize,
+    trailing: label ? createElement(FabLabel, { label, collapsed, color: foreground, variant: props.textVariant ?? FAB_METRICS[resolved.size].labelVariant, style: [labelStyle, textStyle], testID: props.testID ? `${props.testID}-label` : undefined }) : undefined,
+    accessibilityLabel: props.accessibilityLabel ?? label,
+    textStyle: [labelStyle, textStyle],
+    style: [{ height: diameter, minHeight: diameter, ...(label ? { width: 'auto', minWidth: diameter, paddingLeft: Math.max(0, (diameter - glyphSize) / 2), paddingRight: Math.max(0, (diameter - glyphSize) / 2), gap: 0 } : { width: diameter }) }, style],
+  };
 }

package/src/field/membership.ts

@@ -15,7 +15,7 @@
  * `||` belongs — and the failure is silent in both directions: a control that
  * re-enables itself inside a disabled field looks fine and a field-labelled
  * control that announces nothing looks fine too. So it is a function, for the
- * same reason `useInheritedControl` is one.
+ * same reason `useBloomAppearance` is one.
  *
  * `TextFieldInput` is the one family that resolves the same rule inline, because
  * it also reconciles the text-field shell's own context and its standalone

package/src/floating/FloatingPanel.tsx

@@ -1,3 +1,5 @@
+import { MOTION_RECIPES } from '../motion/recipes';
+import { resolveSurfaceMaterial } from '../surface/resolve-surface-material';
 import { surfaceStyle } from '../shapes/surface-style';
 import { SURFACE_SHAPES } from '../design-tokens/shapes';
 /**
@@ -78,7 +80,7 @@ import {
 import { useSurfaceMaterial } from '../surface/use-surface-material.web';
 import { Portal } from '../portal/index.web';
 import { StyledView } from '../styles/styled-primitives';
-import { SurfaceLevelProvider, surfaceFillVars } from '../styles/surface-levels';
+import { SurfaceLevelProvider, surfaceFillVars, useSurfaceFill } from '../styles/surface-levels';
 import { WEB_POSITION_FIXED } from '../styles/web-view-style';
 import {
   DEFAULT_ALIGN_OFFSET,
@@ -209,13 +211,14 @@ export function FloatingPanel({
   panelRef,
 }: FloatingPanelProps) {
   const common = useCommonMessages();
-  const materialStyle = useSurfaceMaterial('.bloom-floating-surface', 'bloom-floating-surface-css');
+  const parentFill = useSurfaceFill();
   const chrome = SURFACE[surface];
   const isMenuSurface = surface !== 'popover';
   const palette = useMenuPalette();
-  const ownFill = StyleSheet.flatten(style)?.backgroundColor ?? (isMenuSurface ? palette.surface : undefined);
+  const ownFill = StyleSheet.flatten(style)?.backgroundColor ?? palette.surface;
   const parsedFill = typeof ownFill === 'string' ? parseRgba(ownFill) : null;
-  const publishedFill = typeof ownFill === 'string' && parsedFill?.a === 1 ? ownFill : undefined;
+  const publishedFill = typeof ownFill === 'string' ? resolveSurfaceMaterial({ fill: ownFill, parentFill: parentFill }).publishedFill : undefined;
+  const materialStyle = useSurfaceMaterial('.bloom-floating-surface', 'bloom-floating-surface-css', typeof ownFill === 'string' ? ownFill : 'transparent');
   const transparentFill = ownFill === 'transparent' || parsedFill?.a === 0;
   // The mounted panel as STATE, not a bare ref: placement has to measure it,
   // and `Portal` renders null on its first pass (it resolves its host in its own
@@ -413,13 +416,13 @@ export function FloatingPanel({
       if (!placement) return;
       progress.value = reducedMotion
         ? 1
-        : withTiming(1, { duration: chrome.duration, easing: chrome.easing });
+        : withTiming(1, { ...MOTION_RECIPES.present, duration: chrome.duration, easing: chrome.easing });
       return;
     }
     if (phase === 'closing') {
       progress.value = reducedMotion
         ? 0
-        : withTiming(0, { duration: chrome.duration, easing: chrome.easing });
+        : withTiming(0, { ...MOTION_RECIPES.dismiss, duration: chrome.duration, easing: chrome.easing });
       return;
     }
     progress.value = 0;
@@ -517,7 +520,6 @@ export function FloatingPanel({
           className={cx('bloom-floating-surface', chrome.className, className)}
           style={[
             styles.panel,
-            materialStyle,
             PANEL_CURVE,
             surfaceFillVars(publishedFill),
             // `bg-background-primary-default border-border-button-default
@@ -560,6 +562,7 @@ export function FloatingPanel({
             },
             motionStyle,
             style,
+            materialStyle,
           ]}>
           {/*
             The panel IS a surface, so it publishes the rung its children sit on.

package/src/glass/GlassIsland.tsx

@@ -1,28 +1,25 @@
+import { resolveSurfaceGeometry } from '../surface/resolve-surface-geometry';
 import { surfaceStyle } from '../shapes/surface-style';
 import { SURFACE_SHAPES } from '../design-tokens/shapes';
 import React, { memo } from 'react';
 import { StyleSheet, View } from 'react-native';
 
 import { useDirectionProps, useIsRtl } from '../hooks/use-is-rtl';
-import { ControlSurface } from '../control-surface';
+import { BloomScope } from "../appearance";
 import { bloomShadowStyle } from '../design-tokens/shadows';
-import { SurfaceLevelProvider, surfaceFillVars, hairlineOn } from '../styles/surface-levels';
+import { SurfaceLevelProvider } from '../styles/surface-levels';
 import { useSurfaceLayer } from '../surface/use-surface-layer';
-import { resolveSurfaceFill } from '../surface/shared';
+import { resolveSurfaceMaterial } from '../surface/resolve-surface-material';
 import { borderRadius } from '../styles/tokens';
-import { withAlpha } from '../theme/color-utils';
-import { BORDER_WIDTH } from '../design-tokens/scales';
-import { useTheme } from '../theme/use-theme';
 import { SurfacePaint } from '../surface/SurfacePaint';
 import type { GlassIslandProps } from './types';
 
-/** Floating control container using shared material; glass is an explicit opt-in.
+/** Floating control container using the shared glass material.
  * Paint clips itself so the host can preserve its external shadow.
  */
 const GlassIslandComponent: React.FC<GlassIslandProps> = ({
   children,
-  material = 'solid',
-  radius = borderRadius.full,
+  radius,
   cornerCurve = SURFACE_SHAPES.glass.curve,
   role,
   accessibilityLabel,
@@ -30,19 +27,17 @@ const GlassIslandComponent: React.FC<GlassIslandProps> = ({
   style,
   testID,
 }) => {
-  const theme = useTheme();
   const directionProps = useDirectionProps();
   const direction = useIsRtl() ? 'rtl' : 'ltr';
   const layer = useSurfaceLayer();
   const customStyle = StyleSheet.flatten(style);
-  const glass = material === 'glass';
-  const tint = String(customStyle?.backgroundColor ?? (glass ? withAlpha(layer.fill, 0.25) : layer.fill));
-  const fill = resolveSurfaceFill(tint, glass, layer.parentFill);
-  const publishedFill = resolveSurfaceFill(fill, false, layer.parentFill);
-  const shape = { radius, curve: radius === borderRadius.full ? 'round' as const : cornerCurve };
+  const material = resolveSurfaceMaterial({ fill: String(customStyle?.backgroundColor ?? layer.fill), parentFill: layer.parentFill, parentLevel: layer.parentLevel });
+  const { paintFill: fill, publishedFill: publishedFill } = material;
+  const geometry = resolveSurfaceGeometry(radius, style, borderRadius.full, cornerCurve);
+  const shape = geometry.shape;
 
   return (
-    <ControlSurface material={material}>
+    <BloomScope>
       <View
         {...directionProps}
         role={role}
@@ -51,28 +46,24 @@ const GlassIslandComponent: React.FC<GlassIslandProps> = ({
         style={[
           styles.island,
           {
-            ...surfaceStyle(shape, direction),
-            borderWidth: BORDER_WIDTH.hairline,
-            borderColor: hairlineOn(theme, publishedFill),
+            ...geometry.style, ...surfaceStyle(shape, direction),
           },
           bloomShadowStyle('glass'),
           style,
-          { backgroundColor: 'transparent', ...surfaceFillVars(publishedFill), ...surfaceStyle(shape, direction), borderWidth: BORDER_WIDTH.hairline },
+          { backgroundColor: 'transparent', ...material.vars, ...geometry.style, ...surfaceStyle(shape, direction) },
         ]}
       >
         <SurfacePaint
           fill={fill}
-          backdrop={layer.parentFill}
-          glass={glass}
-          radius={radius}
+          radius={geometry.radius}
           shape={shape}
           direction={direction}
           sheen={sheen}
           testID={testID ? `${testID}-material` : undefined}
         />
-        <SurfaceLevelProvider level={layer.level} fill={publishedFill}>{children}</SurfaceLevelProvider>
+        <SurfaceLevelProvider level={material.level} fill={publishedFill}>{children}</SurfaceLevelProvider>
       </View>
-    </ControlSurface>
+    </BloomScope>
   );
 };
 

package/src/glass/types.ts

@@ -16,11 +16,9 @@ export interface GlassBlurWindowProps {
 }
 
 /** Geometry is controlled by radius and cornerCurve; material owns clipping. */
-type GlassStyle = Omit<ViewStyle, Extract<keyof ViewStyle, `border${string}Radius` | `border${string}Width` | 'borderCurve' | 'overflow'>>;
+type GlassStyle = Omit<ViewStyle, Extract<keyof ViewStyle, `border${string}Radius` | `border${string}Width` | 'borderCurve' | 'overflow'>> & Pick<ViewStyle, 'borderRadius'>;
 
 export interface GlassIslandProps {
-  /** Shared solid material by default; glass explicitly enables translucent optics. */
-  material?: 'solid' | 'glass';
   children?: ReactNode;
   /**
    * Corner radius. A full pill by default — an island is a capsule, and a

package/src/home-search/HomeSearchBar.tsx

@@ -289,14 +289,14 @@ export function HomeSearchBar<K extends string = string>({
                 )}
                 {isLast ? (
                   <Button
-                    variant="primary"
-                    size="large"
+
+                    size="lg"
                     icon={RiSearchLine}
                     iconOnly={!open || compact}
                     onPress={onSearch}
                     accessibilityLabel={searchLabel}
                     testID={testID ? `${testID}-search` : undefined}
-                    style={{ marginRight: STAY_SEARCH_BUTTON_INSET - 1, flexShrink: 0 }}
+                    style={{ marginRight: STAY_SEARCH_BUTTON_INSET - 1, flexShrink: 0 }} tone="accent" appearance="solid"
                   >
                     {open && !compact ? searchLabel : undefined}
                   </Button>

package/src/home-search/SavedSearchCard.tsx

@@ -193,24 +193,24 @@ function SavedSearchCardComponent({
         </Text>
         {onEdit ? (
           <Button
-            variant="secondary"
-            size="small"
+
+            size="sm"
             onPress={onEdit}
             accessibilityLabel={messages.actionOn(editLabel, title)}
-            testID={testID ? `${testID}-edit` : undefined}
+            testID={testID ? `${testID}-edit` : undefined} tone="neutral" appearance="outline"
           >
             {editLabel}
           </Button>
         ) : null}
         {onDelete ? (
           <Button
-            variant="secondary"
-            size="small"
+
+            size="sm"
             iconOnly
             icon={RiDeleteBinLine}
             onPress={onDelete}
             accessibilityLabel={messages.actionOn(deleteLabel, title)}
-            testID={testID ? `${testID}-delete` : undefined}
+            testID={testID ? `${testID}-delete` : undefined} tone="neutral" appearance="outline"
           />
         ) : null}
       </View>

package/src/home-search/SearchModeTabs.tsx

@@ -161,7 +161,7 @@ export function SearchModeTabs<K extends string = HomeSearchMode>({
       <SegmentedControl
         label={accessibilityLabel}
         type="tabs"
-        size="large"
+        size="lg"
         value={value}
         onChange={onValueChange}
         style={[{ alignSelf: 'stretch' }, style]}

package/src/hooks/use-controllable-state.ts

@@ -3,6 +3,8 @@ import { useCallback, useRef, useState } from 'react';
 export interface UseControllableStateOptions<T> {
   /** Controlled value. When defined, the hook does not own internal state. */
   value?: T;
+  /** Override detection when an explicitly undefined value is a controlled empty state. */
+  controlled?: boolean;
   /** Initial value used when uncontrolled. */
   defaultValue: T;
   /** Notified whenever the value changes, controlled or not. */
@@ -20,11 +22,12 @@ export interface UseControllableStateOptions<T> {
  */
 export function useControllableState<T>({
   value,
+  controlled,
   defaultValue,
   onChange,
 }: UseControllableStateOptions<T>): [T, (next: T) => void] {
   const [internal, setInternal] = useState<T>(defaultValue);
-  const isControlled = value !== undefined;
+  const isControlled = controlled ?? (value !== undefined);
   const current = isControlled ? (value as T) : internal;
 
   const onChangeRef = useRef(onChange);

package/src/index.ts

@@ -159,7 +159,6 @@ export * from './button';
 export { Surface } from './surface';
 export type { SurfaceProps } from './surface';
 export * from './button-group';
-export * from './control-surface';
 export {
   EDGE_GAP,
   windowEdgeGap,
@@ -178,7 +177,7 @@ export {
 } from './layout';
 export type { StickySectionProps } from './layout';
 export { Fab } from './fab';
-export type { FabProps, FabVariant, FabSize, FabPlacement, FabMinimizeBehavior } from './fab';
+export type { FabProps, FabSize } from './fab';
 export { FrostedIconButton } from './frosted-icon-button';
 export type { FrostedIconButtonProps, FrostedIconButtonSize } from './frosted-icon-button';
 export * from './divider';
@@ -290,8 +289,8 @@ export { SubtleHover } from './subtle-hover';
 export type { SubtleHoverProps } from './subtle-hover';
 
 // Motion presets (Reanimated enter/exit + directional screen transition)
-export { ScaleAndFadeIn, ScaleAndFadeOut, ShrinkAndPop, ScreenTransition } from './motion';
-export type { ScreenTransitionProps, ScreenTransitionDirection } from './motion';
+export { ScaleAndFadeIn, ScaleAndFadeOut, ShrinkAndPop, ScreenTransition, MOTION_RECIPES, animateMotion } from './motion';
+export type { ScreenTransitionProps, ScreenTransitionDirection, MotionIntent } from './motion';
 export { AnimatedCheck } from './animated-check';
 export type { AnimatedCheckProps, AnimatedCheckRef } from './animated-check';
 

package/src/index.web.ts

@@ -164,7 +164,6 @@ export * from './button/index.web';
 export { Surface } from './surface/index.web';
 export type { SurfaceProps } from './surface/index.web';
 export * from './button-group/index.web';
-export * from './control-surface';
 export {
   EDGE_GAP,
   windowEdgeGap,
@@ -183,7 +182,7 @@ export {
 } from './layout';
 export type { StickySectionProps } from './layout';
 export { Fab } from './fab/index.web';
-export type { FabProps, FabVariant, FabSize, FabPlacement, FabMinimizeBehavior } from './fab/index.web';
+export type { FabProps, FabSize } from './fab/index.web';
 export { FrostedIconButton } from './frosted-icon-button/index.web';
 export type { FrostedIconButtonProps, FrostedIconButtonSize } from './frosted-icon-button/index.web';
 export * from './divider';
@@ -295,8 +294,8 @@ export { SubtleHover } from './subtle-hover';
 export type { SubtleHoverProps } from './subtle-hover';
 
 // Motion presets (Reanimated enter/exit + directional screen transition)
-export { ScaleAndFadeIn, ScaleAndFadeOut, ShrinkAndPop, ScreenTransition } from './motion/index.web';
-export type { ScreenTransitionProps, ScreenTransitionDirection } from './motion/index.web';
+export { ScaleAndFadeIn, ScaleAndFadeOut, ShrinkAndPop, ScreenTransition, MOTION_RECIPES, animateMotion } from './motion/index.web';
+export type { ScreenTransitionProps, ScreenTransitionDirection, MotionIntent } from './motion/index.web';
 export { AnimatedCheck } from './animated-check';
 export type { AnimatedCheckProps, AnimatedCheckRef } from './animated-check';
 

package/src/input-group/InputGroup.tsx

@@ -1,4 +1,3 @@
-import { normalizeBloomSize } from '../appearance/legacy';
 import { useBloomAppearance, type BloomSize } from '../appearance';
 import React, {
   Children,
@@ -166,7 +165,7 @@ const InputGroupComponent = function InputGroup({
   // neither the field nor the text-field group. The group publishes no name — it
   // does not know which of its children is the control the label points at, so
   // that stays the field's `nativeID` and the input's to apply.
-  const { size } = useBloomAppearance({size: normalizeBloomSize(sizeProp)}, {size: 'md', tone: 'neutral'});
+  const { size } = useBloomAppearance({size: sizeProp}, {size: 'md', tone: 'neutral'});
   const member = useFieldMembership({ disabled: disabledProp, invalid: invalidNew ?? isInvalid });
   const disabled = member.disabled;
   const invalid = member.invalid;

package/src/input-group/types.ts

@@ -35,7 +35,7 @@ export interface InputGroupProps {
    * `sm` is the `small` input (32 tall), `md` the `medium` (36, the
    * default), `lg` extends the ramp (44).
    */
-  size?: BloomSize | 'small' | 'medium' | 'large' | 'default';
+  size?: BloomSize;
   style?: StyleProp<ViewStyle>;
   testID?: string;
 }