@oxy.so/bloom 7.1.5 → 7.3.0

package/src/content-panel/ContentPanel.tsx

@@ -1,3 +1,4 @@
+import { PanelErrorBoundary } from '../error-boundary/PanelErrorBoundary';
 import { resolveSurfaceMaterial } from '../surface/resolve-surface-material';
 /**
  * Native variant of `ContentPanel` — the framed app-content surface.
@@ -11,13 +12,12 @@ import { resolveSurfaceMaterial } from '../surface/resolve-surface-material';
  * On NATIVE none of the WEB overlay machinery applies: there is no document
  * scroll, no sticky positioning, and no bleed to mask, so the panel is simply a
  * surface wrapping its content. The `framed` prop still drives whether that
- * surface is rounded + bordered, tri-state and resolved with pure NativeWind
- * (the breakpoint's `min-*:` variant evaluates against the window width on
- * native too — the material follows the same window breakpoint):
+ * surface is rounded + bordered, tri-state with responsive NativeWind borders
+ * (the material and scoped radius follow the same window breakpoint):
  *
  *  - `undefined` (DEFAULT) → responsive: full-bleed below the `framedFrom`
  *    breakpoint (default `768` / Tailwind `md`), rounded + bordered at/above it
- *    (e.g. `md:rounded-radius-28 md:border md:border-border`).
+ *    (e.g. `md:border md:border-border`).
  *  - `false` → never framed (plain full-bleed at every size).
  *  - `true` → always rounded + bordered.
  *
@@ -35,7 +35,8 @@ import React, { memo } from 'react';
 import { SurfacePaint } from '../surface/SurfacePaint';
 import { StyleSheet, useWindowDimensions } from 'react-native';
 
-import { useOptionalPanelChrome } from '../styles/panel-chrome';
+import { useOptionalPanelChrome, usePanelShape } from '../styles/panel-chrome';
+import { surfaceStyle as resolveShapeStyle } from '../shapes/surface-style';
 import { StyledView } from '../styles/styled-primitives';
 import { SurfaceLevelProvider, surfaceFillVars, useOptionalSurfaceFill } from '../styles/surface-levels';
 import {
@@ -63,21 +64,22 @@ export const PANEL_BOTTOM_INSET = 8;
  * value is the only runtime decision.
  */
 const RESPONSIVE_SURFACE: Record<ContentPanelFramedBreakpoint, string> = {
-  500: 'min-[500px]:rounded-radius-28 min-[500px]:border min-[500px]:border-border',
-  640: 'sm:rounded-radius-28 sm:border sm:border-border',
-  768: 'md:rounded-radius-28 md:border md:border-border',
-  1024: 'lg:rounded-radius-28 lg:border lg:border-border',
+  500: 'min-[500px]:border min-[500px]:border-border',
+  640: 'sm:border sm:border-border',
+  768: 'md:border md:border-border',
+  1024: 'lg:border lg:border-border',
 };
 
 const RESPONSIVE_CONTENT: Record<ContentPanelFramedBreakpoint, string> = {
-  500: 'min-[500px]:overflow-hidden min-[500px]:rounded-radius-28',
-  640: 'sm:overflow-hidden sm:rounded-radius-28',
-  768: 'md:overflow-hidden md:rounded-radius-28',
-  1024: 'lg:overflow-hidden lg:rounded-radius-28',
+  500: 'min-[500px]:overflow-hidden',
+  640: 'sm:overflow-hidden',
+  768: 'md:overflow-hidden',
+  1024: 'lg:overflow-hidden',
 };
 
 const ContentPanelComponent: React.FC<ContentPanelProps> = ({
   children,
+  errorBoundary = false,
   framed,
   framedFrom = 768,
   fill = false,
@@ -91,33 +93,38 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
 }) => {
   // Dev-only invariant — a ContentPanel must never be nested inside another.
   useContentPanelNestingGuard();
+  const panelShape = usePanelShape();
   const panelChrome = useOptionalPanelChrome();
   // What the panel tells its subtree it is painted in (`./shared.ts`).
   const rawFill = usePanelSurfaceFill(surfaceClassName, surfaceStyle, surfaceColor);
   const defaultFill = rawFill;
   const { width } = useWindowDimensions();
   const parentFill = useOptionalSurfaceFill();
-  const paintsSurface = Boolean(defaultFill) && parentFill !== undefined && (framed ?? width >= framedFrom);
+  const paintsSurface = Boolean(defaultFill) && parentFill !== undefined && (framed ?? width >= framedFrom) && chrome !== 'none';
   const publishedFill = rawFill && paintsSurface ? resolveSurfaceMaterial({ fill: rawFill, parentFill: parentFill! }).publishedFill : rawFill;
-  const radius = StyleSheet.flatten(surfaceStyle)?.borderRadius ?? 28;
+  const radius = StyleSheet.flatten(surfaceStyle)?.borderRadius ?? panelShape.radius;
+  const isFramed = framed ?? width >= framedFrom;
+  const geometry = { ...resolveShapeStyle({ curve: panelShape.curve }), borderRadius: isFramed ? radius : 0 };
 
   // Tri-state: `undefined` → responsive (breakpoint-gated), `true` → always
   // framed, `false` → never framed (plain full-bleed). Whole literal class
   // strings are selected per mode so the Tailwind content-scan over `src/**`
-  // picks up every `min-*`/`sm:`/`md:`/`lg:` / `rounded-radius-28` token verbatim
+  // picks up every `min-*`/`sm:`/`md:`/`lg:` token verbatim
   // (the breakpoint bundle lives whole in `RESPONSIVE_SURFACE`; `framed ===
   // true`/`false` ignore `framedFrom` for fixed always/never framing).
   const surfaceBase =
-    framed === undefined
-      ? `flex-1 ${RESPONSIVE_SURFACE[framedFrom]}`
-      : framed
-        ? 'flex-1 rounded-radius-28 border border-border'
-        : 'flex-1';
+    chrome === 'none'
+      ? 'flex-1'
+      : framed === undefined
+        ? `flex-1 ${RESPONSIVE_SURFACE[framedFrom]}`
+        : framed
+          ? 'flex-1 border border-border'
+          : 'flex-1';
   const surfaceClass = [surfaceBase, fill ? 'min-h-0' : '', surfaceClassName ?? (paintsSurface ? 'bg-transparent' : 'bg-card')].filter(Boolean).join(' ');
   // Native has no overlays: the surface itself carries the edge. `none` drops
   // both, `border` keeps the class-drawn hairline, `elevated` adds the lift.
   const chromeStyle =
-    framed === false || chrome === 'none' || chrome === 'border'
+    !isFramed || chrome === 'none' || chrome === 'border'
       ? null
       : shadow || panelChrome
         ? { boxShadow: shadow ?? panelChrome?.shadow }
@@ -127,28 +134,30 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
   // bottom and a list inside it scrolls within it. What the prop adds here is
   // `min-h-0`, so a tall child cannot push the panel past the box it was given
   // — the same automatic-minimum-size trap as on web.
-  const contentClass = ['flex-1', framed === true ? 'overflow-hidden rounded-radius-28' : framed === undefined ? RESPONSIVE_CONTENT[framedFrom] : '', fill ? 'min-h-0' : '', contentClassName].filter(Boolean).join(' ');
+  const contentClass = ['flex-1', framed === true ? 'overflow-hidden' : framed === undefined ? RESPONSIVE_CONTENT[framedFrom] : '', fill ? 'min-h-0' : '', contentClassName].filter(Boolean).join(' ');
 
   return (
     <ContentPanelNestingContext.Provider value={true}>
       <StyledView
+        testID="content-panel-surface"
         className={surfaceClass}
         style={[
           // The surface variable rides the element that carries the fill, so
           // the two can never disagree. A no-op on native; the provider below
           // is what answers there. (`styles/surface-levels.ts`.)
           surfaceFillVars(publishedFill),
+          geometry,
           chromeStyle,
           surfaceStyle,
           paintsSurface ? { backgroundColor: 'transparent' } : null,
         ]}
       >
-        {paintsSurface ? <SurfacePaint fill={defaultFill!} radius={radius} /> : null}
-        <StyledView className={contentClass} style={[{ borderRadius: (framed ?? width >= framedFrom) ? radius : 0 }, contentStyle]}>
+        {paintsSurface ? <SurfacePaint fill={defaultFill!} radius={radius} shape={{ curve: panelShape.curve }} /> : null}
+        <StyledView testID="content-panel-content" className={contentClass} style={[geometry, contentStyle]}>
           {/* The panel is a surface: everything inside is sitting on rung 1,
               painted in the colour this panel actually paints. */}
           <SurfaceLevelProvider level={1} fill={publishedFill}>
-            {children}
+            {errorBoundary === false ? children : <PanelErrorBoundary {...(errorBoundary === true ? {} : errorBoundary)}>{children}</PanelErrorBoundary>}
           </SurfaceLevelProvider>
         </StyledView>
       </StyledView>

package/src/content-panel/ContentPanel.web.tsx

@@ -1,3 +1,4 @@
+import { PanelErrorBoundary } from '../error-boundary/PanelErrorBoundary';
 import { resolveSurfaceMaterial } from '../surface/resolve-surface-material';
 /**
  * Web variant of `ContentPanel` — the framed app-content surface.
@@ -83,18 +84,19 @@ import { resolveSurfaceMaterial } from '../surface/resolve-surface-material';
  *
  * Styling is NativeWind-className-first; the literal class strings below MUST
  * stay literal so a consumer's Tailwind content-scan over `lib/**` picks them up
- * (no dynamic concatenation of the arbitrary `web:[…]` / `rounded-radius-28` /
+ * (no dynamic concatenation of the arbitrary `web:[…]` / `rounded-[var(--bloom-panel-radius)]` /
  * `md:` parts — whole class strings are selected per mode instead).
  */
 import React, { memo, useInsertionEffect } from 'react';
 import { useSurfaceMaterial } from '../surface/use-surface-material.web';
-import { useWindowDimensions, type ViewStyle } from 'react-native';
+import { StyleSheet, useWindowDimensions, type ViewStyle } from 'react-native';
 
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import type { WebCssStyle } from '../styles/web-view-style';
+import { surfaceStyle as resolveShapeStyle } from '../shapes/surface-style';
 import { StyledView } from '../styles/styled-primitives';
 
-import { useOptionalPanelChrome } from '../styles/panel-chrome';
+import { useOptionalPanelChrome, usePanelShape } from '../styles/panel-chrome';
 import { SurfaceLevelProvider, surfaceFillVars, useOptionalSurfaceFill } from '../styles/surface-levels';
 import { useTheme } from '../theme/use-theme';
 import {
@@ -130,23 +132,23 @@ const RESPONSIVE_WEB: Record<
   { surface: string; content: string; overlayHidden: string }
 > = {
   500: {
-    surface: 'min-[500px]:rounded-radius-28',
-    content: 'min-[500px]:rounded-radius-28 web:min-[500px]:overflow-x-clip',
+    surface: 'min-[500px]:rounded-[var(--bloom-panel-radius)]',
+    content: 'min-[500px]:rounded-[var(--bloom-panel-radius)] web:min-[500px]:overflow-x-clip',
     overlayHidden: 'max-[500px]:hidden',
   },
   640: {
-    surface: 'sm:rounded-radius-28',
-    content: 'sm:rounded-radius-28 web:sm:overflow-x-clip',
+    surface: 'sm:rounded-[var(--bloom-panel-radius)]',
+    content: 'sm:rounded-[var(--bloom-panel-radius)] web:sm:overflow-x-clip',
     overlayHidden: 'max-sm:hidden',
   },
   768: {
-    surface: 'md:rounded-radius-28',
-    content: 'md:rounded-radius-28 web:md:overflow-x-clip',
+    surface: 'md:rounded-[var(--bloom-panel-radius)]',
+    content: 'md:rounded-[var(--bloom-panel-radius)] web:md:overflow-x-clip',
     overlayHidden: 'max-md:hidden',
   },
   1024: {
-    surface: 'lg:rounded-radius-28',
-    content: 'lg:rounded-radius-28 web:lg:overflow-x-clip',
+    surface: 'lg:rounded-[var(--bloom-panel-radius)]',
+    content: 'lg:rounded-[var(--bloom-panel-radius)] web:lg:overflow-x-clip',
     overlayHidden: 'max-lg:hidden',
   },
 };
@@ -170,6 +172,7 @@ const PANEL_INSET_CSS = `
 
 const ContentPanelComponent: React.FC<ContentPanelProps> = ({
   children,
+  errorBoundary = false,
   framed,
   framedFrom = 768,
   fill = false,
@@ -197,13 +200,18 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
   // The floating-panel edge the `Sidebar` wears. Optional: the panel drew its
   // own surface long before it had a shadow, so it must not start throwing
   // outside a provider.
+  const panelShape = usePanelShape();
+  const radius = StyleSheet.flatten(surfaceStyle)?.borderRadius ?? panelShape.radius;
+  const curveStyle = resolveShapeStyle({ curve: panelShape.curve });
+  const panelStyle = { ...curveStyle, borderRadius: radius };
+  const panelVars: WebCssStyle = { '--bloom-panel-radius': typeof radius === 'string' ? radius : `${typeof radius === 'number' ? radius : panelShape.radius}px` };
   const panelChrome = useOptionalPanelChrome();
   // What the panel tells its subtree it is painted in (`./shared.ts`).
   const rawFill = usePanelSurfaceFill(surfaceClassName, surfaceStyle, surfaceColor);
   const defaultFill = rawFill;
   const { width } = useWindowDimensions();
   const parentFill = useOptionalSurfaceFill();
-  const paintsSurface = Boolean(defaultFill) && parentFill !== undefined && (framed ?? width >= framedFrom);
+  const paintsSurface = Boolean(defaultFill) && parentFill !== undefined && (framed ?? width >= framedFrom) && chrome !== 'none';
   const publishedFill = rawFill && paintsSurface ? resolveSurfaceMaterial({ fill: rawFill, parentFill: parentFill! }).publishedFill : rawFill;
   const materialStyle = useSurfaceMaterial('[data-bloom-panel-material]', 'bloom-content-panel-material', defaultFill ?? 'transparent');
 
@@ -223,12 +231,12 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
   const surfaceBase = responsive
     ? `flex-1 ${bp.surface}`
     : framed
-      ? 'flex-1 rounded-radius-28'
+      ? 'flex-1 rounded-[var(--bloom-panel-radius)]'
       : 'flex-1';
   const contentBase = responsive
     ? `flex-1 ${bp.content}`
     : framed
-      ? 'flex-1 rounded-radius-28 web:overflow-x-clip'
+      ? 'flex-1 rounded-[var(--bloom-panel-radius)] web:overflow-x-clip'
       : 'flex-1';
   // `fill`: the panel takes the height its parent gives it and the CONTENT
   // scrolls inside. `min-h-0` on both boxes is the whole trick — a flex child's
@@ -300,6 +308,9 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
           // disagree about what the panel painted.
           surfaceFillVars(publishedFill),
           insetVars,
+          panelVars,
+          curveStyle,
+          framed === true ? { borderRadius: radius } : framed === false ? { borderRadius: 0 } : null,
           surfaceStyle,
           paintsSurface ? materialStyle : null,
         ]}
@@ -315,12 +326,12 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
             pointerEvents="none"
             className={
               boundToPanel
-                ? `web:[grid-area:1/1] z-30 h-full w-full rounded-radius-28 ${responsive ? bp.overlayHidden : ''} web:[clip-path:inset(0)]`
+                ? `web:[grid-area:1/1] z-30 h-full w-full rounded-[var(--bloom-panel-radius)] ${responsive ? bp.overlayHidden : ''} web:[clip-path:inset(0)]`
                 : responsive
-                  ? `web:sticky web:top-2 z-30 h-[calc(100dvh-16px)] w-full rounded-radius-28 ${bp.overlayHidden} web:[margin-bottom:calc(-100dvh+16px)]`
-                  : 'web:sticky web:top-2 z-30 h-[calc(100dvh-16px)] w-full rounded-radius-28 web:[margin-bottom:calc(-100dvh+16px)]'
+                  ? `web:sticky web:top-2 z-30 h-[calc(100dvh-16px)] w-full rounded-[var(--bloom-panel-radius)] ${bp.overlayHidden} web:[margin-bottom:calc(-100dvh+16px)]`
+                  : 'web:sticky web:top-2 z-30 h-[calc(100dvh-16px)] w-full rounded-[var(--bloom-panel-radius)] web:[margin-bottom:calc(-100dvh+16px)]'
             }
-            style={{ ...insetStyle, boxShadow: `0 0 0 ${maskSpread}px ${maskColor ?? colors.background}` }}
+            style={{ ...panelStyle, ...insetStyle, boxShadow: `0 0 0 ${maskSpread}px ${maskColor ?? colors.background}` }}
           />
         )}
         {/* (2) Border-frame overlay — one continuous rounded border, above all.
@@ -333,15 +344,15 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
             // The shadow rides the SAME element as the hairline, so the lift and
             // the edge can never disagree about where the panel ends. It paints
             // outward, into the gutter the page background shows.
-            style={[insetStyle, chrome === 'elevated' && (shadow || panelChrome)
+            style={[panelStyle, insetStyle, chrome === 'elevated' && (shadow || panelChrome)
                 ? { boxShadow: shadow ?? panelChrome?.shadow }
                 : null]}
             className={
               boundToPanel
-                ? `web:[grid-area:1/1] z-[120] h-full w-full rounded-radius-28 border border-border ${responsive ? bp.overlayHidden : ''}`
+                ? `web:[grid-area:1/1] z-[120] h-full w-full rounded-[var(--bloom-panel-radius)] border border-border ${responsive ? bp.overlayHidden : ''}`
                 : responsive
-                  ? `web:sticky web:top-2 z-[120] h-[calc(100dvh-16px)] w-full rounded-radius-28 border border-border ${bp.overlayHidden} web:[margin-bottom:calc(-100dvh+16px)]`
-                  : 'web:sticky web:top-2 z-[120] h-[calc(100dvh-16px)] w-full rounded-radius-28 border border-border web:[margin-bottom:calc(-100dvh+16px)]'
+                  ? `web:sticky web:top-2 z-[120] h-[calc(100dvh-16px)] w-full rounded-[var(--bloom-panel-radius)] border border-border ${bp.overlayHidden} web:[margin-bottom:calc(-100dvh+16px)]`
+                  : 'web:sticky web:top-2 z-[120] h-[calc(100dvh-16px)] w-full rounded-[var(--bloom-panel-radius)] border border-border web:[margin-bottom:calc(-100dvh+16px)]'
             }
           />
         )}
@@ -349,11 +360,11 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
             in place instead of remounting `{children}` (which would reset feed
             scroll/virtualizer + refetch on a breakpoint cross). Clipped to the
             rounded panel shape on web when framed. */}
-        <StyledView key="content" testID="content-panel-content" className={contentClass} style={contentStyle}>
+        <StyledView key="content" testID="content-panel-content" className={contentClass} style={[curveStyle, framed === true ? { borderRadius: radius } : framed === false ? { borderRadius: 0 } : null, contentStyle]}>
           {/* The panel is a surface: everything inside is sitting on rung 1,
               painted in the colour this panel actually paints. */}
           <SurfaceLevelProvider level={1} fill={publishedFill}>
-            {children}
+            {errorBoundary === false ? children : <PanelErrorBoundary {...(errorBoundary === true ? {} : errorBoundary)}>{children}</PanelErrorBoundary>}
           </SurfaceLevelProvider>
         </StyledView>
       </StyledView>

package/src/content-panel/types.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { PanelErrorBoundaryOptions } from '../error-boundary/types';
 import { type StyleProp, type ViewStyle } from 'react-native';
 
 /**
@@ -17,8 +18,10 @@ export type ContentPanelChrome = 'elevated' | 'border' | 'none';
 
 export interface ContentPanelProps {
   children: React.ReactNode;
+  /** Opt in to local themed error recovery. Split panes already provide their own boundaries. */
+  errorBoundary?: boolean | PanelErrorBoundaryOptions;
   /**
-   * Framing mode. Tri-state, resolved purely with NativeWind — no consumer
+   * Framing mode. Tri-state, managed by Bloom — no consumer
    * breakpoint hook needed:
    * - `undefined` (DEFAULT) → responsive: full-bleed below the `framedFrom`
    *   breakpoint, rounded + bordered at/above it.
@@ -41,7 +44,7 @@ export interface ContentPanelProps {
    *   surface lifted off the page rather than a box drawn on it.
    * - `'border'` — the hairline alone, which is what this panel drew before.
    * - `'none'` — no edge at all: a flat surface that still clips and rounds,
-   *   for an app whose page background already separates the two.
+   *   without material rim or sheen, for an app whose page background separates the two.
    *
    * Ignored while the panel is full-bleed (below `framedFrom`, or
    * `framed={false}`) — there is no edge to draw.

package/src/design-tokens/shapes.ts

@@ -4,7 +4,7 @@ import { RADIUS } from './scales';
 /** Component policies. Geometry and renderers never import these tokens. */
 export const SURFACE_SHAPES = {
   card: { radius: RADIUS['radius-12'], curve: 'smooth' },
-  sidebar: { radius: RADIUS['radius-24'], curve: 'smooth' },
+  sidebar: { radius: RADIUS['radius-28'], curve: 'round' },
   panel: { radius: RADIUS['radius-20'], curve: 'smooth' },
   menu: { radius: RADIUS['radius-16'], curve: 'smooth' },
   sheet: { radius: { topStart: RADIUS['radius-24'], topEnd: RADIUS['radius-24'] }, curve: 'smooth' },

package/src/design-tokens/tokens.json

@@ -28596,12 +28596,12 @@
     "sidebar": {
       "$extensions": {
         "so.oxy.bloom": {
-          "curve": "smooth"
+          "curve": "round"
         }
       },
       "radius": {
         "$type": "dimension",
-        "$value": "24px"
+        "$value": "28px"
       }
     },
     "panel": {

package/src/error-boundary/ErrorBoundary.tsx

@@ -83,6 +83,12 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
     this.props.onError?.(error, errorInfo);
   }
 
+  componentDidUpdate(previous: ErrorBoundaryProps): void {
+    if (this.state.hasError && !Object.is(previous.resetKey, this.props.resetKey)) {
+      this.setState({ hasError: false, error: null, errorInfo: null, retryCount: 0 });
+    }
+  }
+
   private handleRetry = (): void => {
     this.setState((prev) => ({
       hasError: false,

package/src/error-boundary/PanelErrorBoundary.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { ScrollView } from 'react-native';
+import { EmptyState } from '../empty-state';
+import { useBottomEdgeInset } from '../layout/bottom-edge';
+import { useMessages } from '../locale/messages';
+import { space } from '../styles/tokens';
+import { ErrorBoundary } from './ErrorBoundary';
+import { ERROR_BOUNDARY_MESSAGES } from './messages';
+import type { PanelErrorBoundaryProps } from './types';
+
+/** Local recovery inside a healthy Bloom shell. Catastrophic/provider errors belong to ErrorBoundary. */
+export function PanelErrorBoundary({ children, fallback, emptyState, bottomInset, ...props }: PanelErrorBoundaryProps) {
+  const { messages } = useMessages(ERROR_BOUNDARY_MESSAGES);
+  const inheritedBottom = useBottomEdgeInset();
+  return (
+    <ErrorBoundary {...props} fallback={fallback !== undefined ? fallback : (({ retry }) => (
+      <ScrollView
+        style={{ flex: 1, minHeight: 0 }}
+        contentContainerStyle={{ flexGrow: 1, paddingHorizontal: space.md, paddingBottom: bottomInset ?? inheritedBottom }}
+      >
+        <EmptyState
+          variant="compact"
+          {...emptyState}
+          title={emptyState?.title ?? messages.title}
+          description={emptyState?.description ?? messages.message}
+          style={[{ flexGrow: 1 }, emptyState?.style]}
+          action={{
+            ...emptyState?.action,
+            label: emptyState?.action?.label ?? messages.retry,
+            onPress: () => { emptyState?.action?.onPress?.(); retry(); },
+          }}
+        />
+      </ScrollView>
+    ))}>
+      {children}
+    </ErrorBoundary>
+  );
+}

package/src/error-boundary/index.ts

@@ -1,6 +1,9 @@
 export { ErrorBoundary } from './ErrorBoundary';
+export { PanelErrorBoundary } from './PanelErrorBoundary';
 export type {
   ErrorBoundaryProps,
   ErrorBoundaryFallback,
   ErrorBoundaryFallbackContext,
+  PanelErrorBoundaryOptions,
+  PanelErrorBoundaryProps,
 } from './types';

package/src/error-boundary/types.ts

@@ -1,4 +1,5 @@
 import type { ReactNode, ErrorInfo } from 'react';
+import type { EmptyStateProps } from '../empty-state/types';
 
 /**
  * Context passed to a render-prop `fallback` when an ErrorBoundary catches an
@@ -38,6 +39,8 @@ export type ErrorBoundaryFallback =
 
 export interface ErrorBoundaryProps {
   children: ReactNode;
+  /** Changing this identity resets a failed boundary without remounting healthy children. */
+  resetKey?: string | number;
   /**
    * Custom fallback UI to render on error. Accepts either:
    *  - a ReactNode (static — same UI on every error), or
@@ -57,3 +60,18 @@ export interface ErrorBoundaryProps {
   onError?: (error: Error, errorInfo: ErrorInfo) => void;
   testID?: string;
 }
+
+/** Recovery UI for a panel inside a healthy Bloom provider. */
+export interface PanelErrorBoundaryOptions {
+  resetKey?: ErrorBoundaryProps['resetKey'];
+  onError?: ErrorBoundaryProps['onError'];
+  fallback?: ErrorBoundaryFallback;
+  /** Defaults to localized error wording and a retry action. A supplied action runs before retry. */
+  emptyState?: EmptyStateProps;
+  /** Override inherited bottom chrome clearance when the parent has already reserved it. */
+  bottomInset?: number;
+}
+
+export interface PanelErrorBoundaryProps extends PanelErrorBoundaryOptions {
+  children: ReactNode;
+}

package/src/index.ts

@@ -204,6 +204,7 @@ export * from './patient-info-card';
 export * from './sidebar';
 export * from './app-shell';
 export * from './page-header';
+export * from './page-footer';
 export * from './notification-center';
 export * from './theme-toggle';
 export * from './settings-modal';
@@ -219,11 +220,13 @@ export * from './task-list';
 export * from './agent-chat';
 export * from './ai-chat';
 export * from './radio-indicator';
-export { ErrorBoundary } from './error-boundary';
+export { ErrorBoundary, PanelErrorBoundary } from './error-boundary';
 export type {
   ErrorBoundaryProps,
   ErrorBoundaryFallback,
   ErrorBoundaryFallbackContext,
+  PanelErrorBoundaryOptions,
+  PanelErrorBoundaryProps,
 } from './error-boundary';
 export * as Shapes from './shapes';
 export * from './avatar';

package/src/index.web.ts

@@ -209,6 +209,7 @@ export * from './patient-info-card';
 export * from './sidebar';
 export * from './app-shell/index.web';
 export * from './page-header';
+export * from './page-footer';
 export * from './notification-center';
 export * from './theme-toggle';
 export * from './settings-modal';
@@ -224,11 +225,13 @@ export * from './task-list';
 export * from './agent-chat/index.web';
 export * from './ai-chat/index.web';
 export * from './radio-indicator';
-export { ErrorBoundary } from './error-boundary';
+export { ErrorBoundary, PanelErrorBoundary } from './error-boundary';
 export type {
   ErrorBoundaryProps,
   ErrorBoundaryFallback,
   ErrorBoundaryFallbackContext,
+  PanelErrorBoundaryOptions,
+  PanelErrorBoundaryProps,
 } from './error-boundary';
 export * as Shapes from './shapes';
 export * from './avatar';

package/src/mail-thread/MailMessage.tsx

@@ -131,22 +131,20 @@ export function MailMessage({
       : { key: 'forward', label: text.forward, icon: RiShareForwardLine, onPress: onForward },
   ].filter((entry): entry is NonNullable<typeof entry> => entry !== null);
 
-  // An OPEN message is a surface, and Bloom's surface is a `Card` — the card
-  // fill, the hairline, the radius scale — not a grey wash painted by hand. A
-  // COLLAPSED one paints nothing, so a thread reads as one list with a card
-  // opened inside it rather than as a column of blocks.
+  // Opening changes the content, not its surface or host. Keeping the Card
+  // mounted also preserves keyboard focus on the disclosure while it expands.
   // Three labelled actions need about 320 of the message's own width; under
   // that the group keeps the glyphs and drops the words, which is what
   // `ButtonGroupItem` is built for — the accessible name is the label either
   // way, so nothing is lost by the labels going.
   const compactReplies = !replyLabelsFit(width);
-  const Shell = open ? Card : View;
-  const shellProps = open
-    ? { variant: 'outlined' as const, radius: 'radius-16' as const, testID }
-    : { testID };
   return (
-    <Shell
-      {...shellProps}
+    <Card
+      appearance="solid"
+      border="none"
+      elevation="s"
+      radius="radius-16"
+      testID={testID}
       style={[open ? { paddingBottom: geo.paddingVertical } : null, style]}
     >
       <View
@@ -316,6 +314,6 @@ export function MailMessage({
           ) : null}
         </View>
       ) : null}
-    </Shell>
+    </Card>
   );
 }

package/src/mail-thread/MailThread.tsx

@@ -8,6 +8,7 @@ import { MailLabelChips, MailStar } from '../mail-list/parts';
 import { mailStrings, resolveMailPaint, visibleLabels } from '../mail-list/shared';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import { useSurfaceFill } from '../styles/surface-levels';
+import { space } from '../styles/tokens';
 
 
 import { useTheme } from '../theme/use-theme';
@@ -55,6 +56,7 @@ export function MailThread({
   expandedIds,
   onExpandedIdsChange,
   collapseAfter = 4,
+  messageGap = space.md,
   quickReply,
   header,
   strings,
@@ -144,7 +146,7 @@ export function MailThread({
         </View>
       ) : null}
       <Divider />
-      <View style={{ paddingTop: 4, paddingBottom: 4 }}>
+      <View testID={testID ? `${testID}-messages` : undefined} style={{ paddingTop: space.xs, paddingBottom: space.xs, gap: messageGap }}>
         {entries.map((entry) =>
           entry.kind === 'message' ? (
             <MailMessage

package/src/mail-thread/shared.ts

@@ -1,4 +1,5 @@
 import { Platform } from 'react-native';
+import { RADIUS } from '../design-tokens/scales';
 
 import { MAIL_THREAD_MESSAGES } from './messages';
 import type { MailThreadMessage, MailAddress, MailThreadStrings } from './types';
@@ -44,7 +45,7 @@ export const MAIL_THREAD_GEOMETRY = {
   /** The star and the overflow trigger. A touch target, so 44. */
   action: 44,
   /** Radius of a message's own surface. */
-  radius: 12,
+  radius: RADIUS['radius-16'],
 } as const;
 
 /**

package/src/mail-thread/types.ts

@@ -128,6 +128,8 @@ export interface MailThreadProps {
    * Default 4; `0` never collapses.
    */
   collapseAfter?: number;
+  /** Space between message cards and the earlier-messages control. Default space.md (12). */
+  messageGap?: number;
   /** A slot under the stack — the quick-reply box, or a row of reply buttons. */
   quickReply?: ReactNode;
   /** A slot above the subject — a back button, the mailbox chrome. */