@oxy.so/bloom 7.1.5 → 7.2.0

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/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';

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';

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. */

package/src/page-footer/PageFooter.tsx

@@ -0,0 +1,96 @@
+import React, { memo, useContext, useEffect, useId, useState } from 'react';
+import { Platform, StyleSheet, View, useWindowDimensions, type LayoutChangeEvent } from 'react-native';
+import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
+import { BloomScope } from '../appearance';
+import { useBottomEdgeInset } from '../layout/bottom-edge';
+import { EdgeScrim, SCRIM_TAIL_RATIO } from '../page-header/EdgeScrim';
+import { BREAKPOINTS } from '../styles/breakpoints';
+import { useSurfaceFill } from '../styles/surface-levels';
+import { Z_INDEX } from '../styles/z-index';
+import { useTheme } from '../theme/use-theme';
+import { PageFooterContext } from './context';
+import type { PageFooterProps } from './types';
+
+const BAR_HEIGHT = 56;
+
+/** Page-local controls floating over a bounded scroller, above app navigation. */
+function PageFooterComponent({
+  children, actions, bottomInset, safeArea, scrim = 'always', scrimColor, style, testID,
+}: PageFooterProps) {
+  const theme = useTheme();
+  const fill = useSurfaceFill() ?? theme.colors.background;
+  const occupied = useBottomEdgeInset();
+  const rawBottom = bottomInset ?? occupied;
+  const bottom = Number.isFinite(rawBottom) ? Math.max(0, rawBottom) : 0;
+  const insets = useContext(SafeAreaInsetsContext);
+  const padBottom = (safeArea ?? Platform.OS !== 'web') && bottom === 0 ? insets?.bottom ?? 0 : 0;
+  const windowWidth = useWindowDimensions().width;
+  const [width, setWidth] = useState<number | null>(null);
+  // Measure the row, not the outer box: a safe-area change can then update the
+  // published clearance immediately rather than waiting for another onLayout.
+  const [rowHeight, setRowHeight] = useState(BAR_HEIGHT);
+  const height = rowHeight + padBottom;
+  const sideInset = (width ?? windowWidth) >= BREAKPOINTS.sm ? 24 : 16;
+  const store = useContext(PageFooterContext);
+  const id = useId();
+  useEffect(() => {
+    store?.claim(id, height + bottom);
+    return () => store?.release(id);
+  }, [store, id, height, bottom]);
+
+  const onLayout = (event: LayoutChangeEvent) => {
+    const layout = event.nativeEvent.layout;
+    if (Number.isFinite(layout.width)) setWidth(Math.max(0, layout.width));
+    if (Number.isFinite(layout.height)) setRowHeight(Math.max(0, layout.height));
+  };
+
+  return (
+    <View
+      testID={testID}
+      pointerEvents="box-none"
+      style={[styles.container, { bottom, paddingBottom: padBottom }, style]}
+    >
+      {scrim !== 'none' ? (
+        <View
+          pointerEvents="none"
+          style={[styles.scrim, { height: height * (1 + SCRIM_TAIL_RATIO) }]}
+          testID={testID ? `${testID}-scrim` : undefined}
+        >
+          <EdgeScrim edge="bottom" color={scrimColor ?? fill} testID={testID ? `${testID}-scrim-gradient` : undefined} />
+        </View>
+      ) : null}
+      <View
+        onLayout={onLayout}
+        pointerEvents="box-none"
+        style={[styles.row, { paddingLeft: sideInset, paddingRight: sideInset }]}
+        testID={testID ? `${testID}-row` : undefined}
+      >
+        <BloomScope>
+          {children != null ? <View pointerEvents="box-none" style={styles.content}>{children}</View> : null}
+          {actions != null ? (
+            <View pointerEvents="box-none" style={styles.actions} testID={testID ? `${testID}-actions` : undefined}>
+              {actions}
+            </View>
+          ) : null}
+        </BloomScope>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute', left: 0, right: 0, zIndex: Z_INDEX.floating,
+    ...(Platform.OS !== 'web' ? { elevation: Z_INDEX.floating } : {}),
+  },
+  scrim: { position: 'absolute', bottom: 0, left: 0, right: 0 },
+  row: {
+    minHeight: BAR_HEIGHT, flexDirection: 'row', alignItems: 'center',
+    gap: 8, paddingTop: 8, paddingBottom: 8,
+  },
+  content: { flex: 1, minWidth: 0 },
+  actions: { flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', gap: 8, flexShrink: 1 },
+});
+
+export const PageFooter = memo(PageFooterComponent);
+PageFooter.displayName = 'PageFooter';

package/src/page-footer/PageFooterProvider.tsx

@@ -0,0 +1,9 @@
+import React, { useState, type PropsWithChildren } from 'react';
+import { createEdgeStore } from '../layout/edge-store';
+import { PageFooterContext } from './context';
+
+/** Scope a page's footer measurement to its sibling scroller. Adds no layout. */
+export function PageFooterProvider({ children }: PropsWithChildren) {
+  const [store] = useState(createEdgeStore);
+  return <PageFooterContext.Provider value={store}>{children}</PageFooterContext.Provider>;
+}

package/src/page-footer/context.ts

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+import type { EdgeStore } from '../layout/edge-store';
+
+// Local scroll clearance, deliberately separate from the global bottom edge
+// that positions this footer. Publishing there would make it avoid itself.
+export const PageFooterContext = createContext<EdgeStore | null>(null);

package/src/page-footer/index.ts

@@ -0,0 +1,4 @@
+export { PageFooter } from './PageFooter';
+export { PageFooterProvider } from './PageFooterProvider';
+export { usePageFooterInset } from './use-page-footer-inset';
+export type { PageFooterProps } from './types';

package/src/page-footer/types.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export interface PageFooterProps {
+  /** Optional content before the actions, for example a selection summary. */
+  children?: ReactNode;
+  /** Controls grouped by the caller; inherits the surrounding Bloom size. */
+  actions?: ReactNode;
+  /**
+   * Distance from the containing frame's bottom. Defaults to the occupied
+   * bottom edge (for example AppShell's measured bottom bar). Pass 0 when the
+   * frame already ends above navigation, or the footer is in a desktop pane.
+   */
+  bottomInset?: number;
+  /**
+   * Include the bottom safe area when no bottom edge is occupied. Defaults to
+   * true on native, false on web. Disable when the containing shell owns it.
+   */
+  safeArea?: boolean;
+  /** The PageHeader gradient, mirrored upward. Default always. */
+  scrim?: 'always' | 'none';
+  /** Opaque gradient color; defaults to the containing surface's fill. */
+  scrimColor?: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/page-footer/use-page-footer-inset.ts

@@ -0,0 +1,17 @@
+import { useContext, useSyncExternalStore } from 'react';
+import { NO_INSET, NO_SUBSCRIPTION } from '../layout/edge-store';
+import { PageFooterContext } from './context';
+
+/**
+ * Clearance for the last scroll item: measured footer height plus bottomInset.
+ * Use as contentContainerStyle.paddingBottom. Returns 0 without a provider or
+ * once the footer unmounts; does not include the decorative gradient tail.
+ */
+export function usePageFooterInset(): number {
+  const store = useContext(PageFooterContext);
+  return useSyncExternalStore(
+    store?.subscribe ?? NO_SUBSCRIPTION,
+    store?.getInset ?? NO_INSET,
+    store?.getInset ?? NO_INSET,
+  );
+}

package/src/sidebar/Sidebar.tsx

@@ -3,7 +3,7 @@ import { resolveSurfaceMaterial } from '../surface/resolve-surface-material';
 import { SurfacePaint } from '../surface/SurfacePaint';
 import { parseRgba } from '../theme/color-utils';
 import { surfaceStyle } from '../shapes/surface-style';
-import { SURFACE_SHAPES } from '../design-tokens/shapes';
+import { usePanelShape } from '../styles/panel-chrome';
 import { useBloomAppearance } from '../appearance';
 import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
@@ -62,7 +62,7 @@ import { SIDEBAR_MESSAGES } from './messages';
  *   panel      `size` wide expanded (p12), its collapsed width at px7 py12 —
  *              with the 1px border that leaves exactly the size's item column
  *              (`metrics.ts`; `md` is the historical 260 / 52 / 36)
- *   surface    `card` radius 24, 1px border-button-white, shadow-sidebar,
+ *   surface    `card` shared panel radius, 1px border-button-white, shadow-sidebar,
  *              background-secondary; `plain` drops the chrome onto
  *              background-full; `docked` keeps the fill, squares the corners
  *              and leaves one hairline on the inner edge, full height
@@ -219,6 +219,7 @@ const SidebarPanel: React.FC<SidebarProps> = ({
   const palette = useSidebarPalette();
   const parentFill = useSurfaceFill();
   const parentLevel = useSurfaceLevelValue();
+  const panelShape = usePanelShape();
   const customSurface = StyleSheet.flatten(style);
   const surfaceFill = customSurface?.backgroundColor ?? (surface === 'plain' ? undefined : (palette.panel));
   const hasFill = typeof surfaceFill === 'string' && surfaceFill !== 'transparent' && parseRgba(surfaceFill)?.a !== 0;
@@ -444,7 +445,7 @@ const SidebarPanel: React.FC<SidebarProps> = ({
             borderEndColor: palette.dockedEdge,
           }
         : {
-            ...surfaceStyle(SURFACE_SHAPES.sidebar),
+            ...surfaceStyle(panelShape),
             borderWidth: 1,
             borderColor: palette.panelBorder,
             backgroundColor: 'transparent',
@@ -709,7 +710,7 @@ const SidebarPanel: React.FC<SidebarProps> = ({
           surfaceFillVars(publishedFill),
         ]}
       >
-        {paintsSurface ? <SurfacePaint fill={surfaceFill} shape={{ curve: SURFACE_SHAPES.sidebar.curve }} radius={customSurface?.borderRadius ?? (surface === 'card' ? 24 : 0)} /> : null}
+        {paintsSurface ? <SurfacePaint fill={surfaceFill} shape={{ curve: panelShape.curve }} radius={customSurface?.borderRadius ?? (surface === 'card' ? panelShape.radius : 0)} /> : null}
         <View testID={`${testID ?? 'sidebar'}-main-region`} style={{ width: '100%', minHeight: 0, flexShrink: 1, ...(contentAlignment === 'center' ? { flex: 1, justifyContent: 'center' as const } : {}) }}>
         <View style={{ width: '100%', minHeight: 0, flexShrink: 1 }}>
           {/* Fixed chrome shares the panel's morph, never the destination scroll.

package/src/sidebar/types.ts

@@ -151,7 +151,7 @@ export type SidebarVariant = 'panel' | 'rail';
  * page, independent of what it contains. It is the axis two apps differ on
  * most: the same rows read as a different product behind a different edge.
  *
- * - `card` (default) the floating panel: radius 24, a hairline and the panel
+ * - `card` (default) the floating panel: shared panel radius (28 by default), a hairline and the panel
  *   shadow, on the panel fill. A sidebar that sits IN the page.
  * - `plain` no edge at all — no radius, no border, no shadow: the rows sit
  *   straight on the page. The social/reader look, and what a revealed mobile

package/src/styles/panel-chrome.ts

@@ -1,6 +1,6 @@
 /**
  * The FLOATING PANEL chrome — the edge Bloom's big surfaces wear: a hairline
- * plus the soft three-part shadow that lifts a panel off the page background.
+ * plus the shared corner shape and soft three-part shadow that lifts a panel off the page background.
  *
  * It lives here because two surfaces wear the same thing and had it written
  * twice: the `Sidebar`'s panel and the framed `ContentPanel`. A panel that only
@@ -12,6 +12,8 @@
  *   border   the canonical subtle border role in both modes
  */
 import { useContext } from 'react';
+import { BloomAppearanceContext } from '../appearance/context';
+import { SURFACE_SHAPES } from '../design-tokens/shapes';
 
 import { BloomThemeContext } from '../theme/BloomThemeProvider';
 import type { Theme } from '../theme/types';
@@ -51,3 +53,9 @@ export function useOptionalPanelChrome(): PanelChrome | null {
   const ctx = useContext(BloomThemeContext);
   return ctx ? resolvePanelChrome(ctx.theme) : null;
 }
+
+/** Shared panel geometry, independently configurable from control size. */
+export function usePanelShape() {
+  const { panelRadius } = useContext(BloomAppearanceContext);
+  return { ...SURFACE_SHAPES.sidebar, radius: panelRadius ?? SURFACE_SHAPES.sidebar.radius };
+}