@oxy.so/bloom 7.1.4 → 7.2.0

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 };
+}