@oxyhq/bloom 0.49.0 → 0.50.0

package/src/dialog/DialogHeader.tsx

@@ -23,9 +23,20 @@ import Animated, {
 
 import {
   ChevronLeft_Stroke2_Corner0_Rounded,
+  DotGrid3x1_Stroke2_Corner0_Rounded,
   TimesLarge_Stroke2_Corner0_Rounded,
 } from '../icons';
 import { FrostedIconButton } from '../frosted-icon-button';
+import { Button } from '../button';
+import { Search } from '../search';
+import {
+  SegmentedControl,
+  SegmentedControlItem,
+  SegmentedControlItemText,
+} from '../segmented-control';
+import { Popover, PopoverContent, PopoverTrigger } from '../popover';
+import { Item } from '../item';
+import { useDialogControl } from './context';
 import { useTheme } from '../theme/use-theme';
 import { H1, Text } from '../typography';
 import type { DialogHeaderConfig } from './types';
@@ -68,6 +79,17 @@ const HEADER_H_PADDING = 20;
 /** Circular icon-button diameter for the default back / close affordances. */
 const NAV_BUTTON_SIZE = 36;
 
+/**
+ * Trailing icon `actions` shown inline before they collapse into a "more"
+ * overflow menu (Material overflow pattern). Kept small so the nav row never
+ * crowds the title.
+ */
+export const DIALOG_HEADER_MAX_INLINE_ACTIONS = 3;
+
+/** Light content color for `tone: 'onImage'` (legible over any media). */
+const ON_IMAGE_TEXT = '#FFFFFF';
+const ON_IMAGE_SUBTEXT = 'rgba(255,255,255,0.82)';
+
 // --- Runtime override store (child screen → nav bar / large title) ----------
 //
 // The nav bar overlay and the in-content large title live in DIFFERENT subtrees
@@ -95,7 +117,15 @@ function configsEqual(a: DialogHeaderConfig | null, b: DialogHeaderConfig | null
     a.left === b.left &&
     a.right === b.right &&
     a.onBack === b.onBack &&
-    a.showClose === b.showClose
+    a.showClose === b.showClose &&
+    // Rich fields — object fields compared by identity (callers memoize them);
+    // `tone` is a plain value.
+    a.primaryAction === b.primaryAction &&
+    a.actions === b.actions &&
+    a.search === b.search &&
+    a.segments === b.segments &&
+    a.tone === b.tone &&
+    a.progress === b.progress
   );
 }
 
@@ -189,6 +219,12 @@ export function useDialogHeader(config: DialogHeaderConfig | null | undefined):
     config?.right,
     config?.onBack,
     config?.showClose,
+    config?.primaryAction,
+    config?.actions,
+    config?.search,
+    config?.segments,
+    config?.tone,
+    config?.progress,
   ]);
 }
 
@@ -201,6 +237,125 @@ function useMergedHeaderConfig(
   return useMemo(() => (override ? { ...base, ...override } : base), [base, override]);
 }
 
+// --- Rich header sub-parts --------------------------------------------------
+
+/**
+ * The "more" overflow: a Bloom `Popover` that DROPS from the ⋯ trigger — anchored
+ * under the button on web (measured trigger + `bottom-end` placement) and a bottom
+ * sheet on native, matching how top libraries present a toolbar overflow (Radix
+ * DropdownMenu / Material Menu on desktop, an action sheet on mobile). Items are
+ * Bloom `Item` rows; pressing one closes the popover before firing.
+ */
+function HeaderOverflowMenu({
+  items,
+  onImage,
+}: {
+  items: NonNullable<DialogHeaderConfig['actions']>;
+  onImage: boolean;
+}): React.ReactElement {
+  // Own the control so an item press can close the popover before acting.
+  const control = useDialogControl();
+  return (
+    <Popover control={control}>
+      <PopoverTrigger label="More">
+        {({ props }) => (
+          <FrostedIconButton
+            size="sm"
+            onPress={props.onPress}
+            accessibilityLabel={props.accessibilityLabel}
+            icon={
+              <DotGrid3x1_Stroke2_Corner0_Rounded
+                size="md"
+                fill={onImage ? ON_IMAGE_TEXT : undefined}
+              />
+            }
+          />
+        )}
+      </PopoverTrigger>
+      <PopoverContent label="More actions" placement="bottom-end">
+        {items.map((action) => (
+          <Item
+            key={action.accessibilityLabel}
+            title={action.accessibilityLabel}
+            leading={action.icon}
+            density="compact"
+            disabled={action.disabled}
+            onPress={() => control.close(() => action.onPress())}
+          />
+        ))}
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+/**
+ * Trailing icon `actions`: the first {@link DIALOG_HEADER_MAX_INLINE_ACTIONS}
+ * render inline as frosted circles; any surplus collapses into a "more" overflow
+ * that drops from the ⋯ ({@link HeaderOverflowMenu}) — never hand-rolled.
+ */
+function HeaderTrailingActions({
+  actions,
+  onImage,
+}: {
+  actions: NonNullable<DialogHeaderConfig['actions']>;
+  onImage: boolean;
+}): React.ReactElement | null {
+  if (actions.length === 0) return null;
+  const overflows = actions.length > DIALOG_HEADER_MAX_INLINE_ACTIONS;
+  // Keep room for the "more" trigger when collapsing.
+  const inline = overflows ? actions.slice(0, DIALOG_HEADER_MAX_INLINE_ACTIONS - 1) : actions;
+  const overflow = overflows ? actions.slice(DIALOG_HEADER_MAX_INLINE_ACTIONS - 1) : [];
+  return (
+    <>
+      {inline.map((action) => (
+        <FrostedIconButton
+          key={action.accessibilityLabel}
+          size="sm"
+          icon={action.icon}
+          onPress={action.onPress}
+          disabled={action.disabled}
+          accessibilityLabel={action.accessibilityLabel}
+        />
+      ))}
+      {overflow.length > 0 ? <HeaderOverflowMenu items={overflow} onImage={onImage} /> : null}
+    </>
+  );
+}
+
+/**
+ * A thin wizard step/progress indicator for the large-title zone. `step` is
+ * 1-based; the bar fills `step / total`, clamped to [0, 1].
+ */
+function HeaderProgressBar({
+  step,
+  total,
+  onImage,
+}: {
+  step: number;
+  total: number;
+  onImage: boolean;
+}): React.ReactElement {
+  const theme = useTheme();
+  const fraction = total > 0 ? Math.min(1, Math.max(0, step / total)) : 0;
+  return (
+    <View
+      accessibilityRole="progressbar"
+      accessibilityValue={{ min: 0, max: total, now: step }}
+      style={[
+        styles.progressTrack,
+        { backgroundColor: onImage ? 'rgba(255,255,255,0.25)' : theme.colors.border },
+      ]}
+    >
+      <View
+        style={[
+          styles.progressFill,
+          { width: `${Math.round(fraction * 100)}%`, backgroundColor: theme.colors.primary },
+        ]}
+      />
+    </View>
+  );
+}
+
 // --- Nav bar overlay --------------------------------------------------------
 
 /**
@@ -260,24 +415,62 @@ export const DialogNavHeader = memo(function DialogNavHeader({
     // reads MUST be in the deps array or it freezes on the first frame.
   }, [scrollY, largeTitleHeight, hasLargeTitle]);
 
+  // Over media (`tone: 'onImage'`) the scrim strengthens and the default title +
+  // icon buttons flip to light content so they stay legible.
+  const onImage = config.tone === 'onImage';
+  const iconFill = onImage ? ON_IMAGE_TEXT : undefined;
+  const titleColor = onImage ? ON_IMAGE_TEXT : theme.colors.text;
+  const subtitleColor = onImage ? ON_IMAGE_SUBTEXT : theme.colors.textSecondary;
+
+  const closeButton = (
+    <FrostedIconButton
+      onPress={onDismiss}
+      accessibilityLabel="Close"
+      icon={<TimesLarge_Stroke2_Corner0_Rounded size="md" fill={iconFill} />}
+    />
+  );
+
+  // Trailing edge: a custom `right` wins; else the rich trailing (icon actions +
+  // the single primary CTA); else the default close affordance.
+  const hasRichTrailing = !config.right && !!(config.actions?.length || config.primaryAction);
+
+  const right = config.right ?? (
+    hasRichTrailing ? (
+      <View style={styles.trailing}>
+        {config.actions?.length ? (
+          <HeaderTrailingActions actions={config.actions} onImage={onImage} />
+        ) : null}
+        {config.primaryAction ? (
+          <Button
+            variant="primary"
+            size="small"
+            onPress={config.primaryAction.onPress}
+            disabled={config.primaryAction.disabled || config.primaryAction.loading}
+            loading={config.primaryAction.loading}
+            accessibilityLabel={config.primaryAction.label}
+          >
+            {config.primaryAction.label}
+          </Button>
+        ) : null}
+      </View>
+    ) : config.showClose !== false ? (
+      closeButton
+    ) : null
+  );
+
+  // Leading edge: a custom `left` wins; else the back button; else — when the
+  // trailing edge is taken by the rich CTA and there is no back — the close
+  // affordance moves here so there is always exactly one dismiss control.
   const left =
     config.left ??
     (config.onBack ? (
       <FrostedIconButton
         onPress={config.onBack}
         accessibilityLabel="Go back"
-        icon={<ChevronLeft_Stroke2_Corner0_Rounded size="md" />}
-      />
-    ) : null);
-
-  const right =
-    config.right ??
-    (config.showClose !== false ? (
-      <FrostedIconButton
-        onPress={onDismiss}
-        accessibilityLabel="Close"
-        icon={<TimesLarge_Stroke2_Corner0_Rounded size="md" />}
+        icon={<ChevronLeft_Stroke2_Corner0_Rounded size="md" fill={iconFill} />}
       />
+    ) : hasRichTrailing && config.showClose !== false ? (
+      closeButton
     ) : null);
 
   return (
@@ -286,10 +479,15 @@ export const DialogNavHeader = memo(function DialogNavHeader({
       style={[styles.overlay, style]}
     >
       {/* Opaque (surface bg) at the top → transparent at the bottom, so scrolled
-          content fades out under the bar. Pure NativeWind — no SVG dependency. */}
+          content fades out under the bar. `onImage` swaps to a dark scrim so the
+          chrome reads over media. Pure NativeWind — no SVG dependency. */}
       <View
         pointerEvents="none"
-        className="bg-gradient-to-b from-bg to-transparent"
+        className={
+          onImage
+            ? 'bg-gradient-to-b from-black/60 to-transparent'
+            : 'bg-gradient-to-b from-bg to-transparent'
+        }
         style={[StyleSheet.absoluteFill, { height: DIALOG_HEADER_OVERLAY_HEIGHT }]}
       />
       <View pointerEvents="box-none" style={styles.navRow}>
@@ -301,7 +499,7 @@ export const DialogNavHeader = memo(function DialogNavHeader({
         >
           {config.titleContent ?? null}
           {!config.titleContent && config.title ? (
-            <Text numberOfLines={1} style={[styles.smallTitle, { color: theme.colors.text }]}>
+            <Text numberOfLines={1} style={[styles.smallTitle, { color: titleColor }]}>
               {config.title}
             </Text>
           ) : null}
@@ -310,10 +508,7 @@ export const DialogNavHeader = memo(function DialogNavHeader({
               screen keeps a clean single-line collapsed title, and a branded
               `titleContent` bar carries no supporting copy at all. */}
           {!hasLargeTitle && !config.titleContent && config.subtitle ? (
-            <Text
-              numberOfLines={1}
-              style={[styles.smallSubtitle, { color: theme.colors.textSecondary }]}
-            >
+            <Text numberOfLines={1} style={[styles.smallSubtitle, { color: subtitleColor }]}>
               {config.subtitle}
             </Text>
           ) : null}
@@ -346,25 +541,83 @@ export const DialogLargeTitle = memo(function DialogLargeTitle({
   // A branded `titleContent` lives in the bar and never collapses, so the
   // surface starts flush under the bar with no large title above it.
   const hasLargeTitle = !config.titleContent && (config.largeTitle ?? true) && !!config.title;
+  // The large-title zone also hosts search / segments / progress. These require a
+  // scrolling surface (they live here, not in the fixed bar) and collapse with the
+  // title on scroll (iOS `.searchable` style).
+  const hasExtras = !!(config.search || config.segments || config.progress);
+  const onImage = config.tone === 'onImage';
 
   const onLayout = (e: LayoutChangeEvent) => {
     largeTitleHeight.value = e.nativeEvent.layout.height;
   };
 
-  if (!hasLargeTitle) {
-    // No large title: just inset the content below the nav bar.
-    return <View style={{ height: DIALOG_NAV_BAR_HEIGHT }} />;
+  if (!hasLargeTitle && !hasExtras) {
+    // Pure content (no header chrome to render in-flow). Under `tone: 'onImage'`
+    // the content is media (a banner / photo canvas), so it slides UP under the
+    // translucent nav bar — the bar FLOATS over the media, immersive at rest (the
+    // standard iOS large-title-over-photo / Material collapsing-toolbar pattern).
+    // Default tone keeps the nav-bar-height inset so content clears the bar.
+    return onImage ? null : <View style={{ height: DIALOG_NAV_BAR_HEIGHT }} />;
   }
 
   return (
     <>
+      {/* Clear the whole gradient overlay so the block starts below the bar. */}
       <View style={{ height: DIALOG_HEADER_CONTENT_TOP }} />
       <View onLayout={onLayout} testID="dialog-large-title" style={styles.largeTitleBlock}>
-        <H1 style={[styles.largeTitle, { color: theme.colors.text }]}>{config.title}</H1>
-        {config.subtitle ? (
-          <Text style={[styles.largeSubtitle, { color: theme.colors.textSecondary }]}>
-            {config.subtitle}
-          </Text>
+        {hasLargeTitle ? (
+          <>
+            <H1 style={[styles.largeTitle, { color: onImage ? ON_IMAGE_TEXT : theme.colors.text }]}>
+              {config.title}
+            </H1>
+            {config.subtitle ? (
+              <Text
+                style={[
+                  styles.largeSubtitle,
+                  { color: onImage ? ON_IMAGE_SUBTEXT : theme.colors.textSecondary },
+                ]}
+              >
+                {config.subtitle}
+              </Text>
+            ) : null}
+          </>
+        ) : null}
+        {config.search ? (
+          <View style={hasLargeTitle ? styles.extraRow : undefined}>
+            <Search
+              value={config.search.value}
+              onChangeText={config.search.onChangeText}
+              label={config.search.placeholder ?? 'Search'}
+              onSubmitEditing={config.search.onSubmit}
+              onClearText={() => config.search?.onChangeText('')}
+            />
+          </View>
+        ) : null}
+        {config.segments ? (
+          <View style={hasLargeTitle || config.search ? styles.extraRow : undefined}>
+            <SegmentedControl
+              label={config.title ?? 'View'}
+              type="tabs"
+              size="small"
+              value={config.segments.value}
+              onChange={config.segments.onChange}
+            >
+              {config.segments.items.map((item) => (
+                <SegmentedControlItem key={item.key} value={item.key}>
+                  <SegmentedControlItemText>{item.label}</SegmentedControlItemText>
+                </SegmentedControlItem>
+              ))}
+            </SegmentedControl>
+          </View>
+        ) : null}
+        {config.progress ? (
+          <View style={hasLargeTitle || config.search || config.segments ? styles.extraRow : undefined}>
+            <HeaderProgressBar
+              step={config.progress.step}
+              total={config.progress.total}
+              onImage={onImage}
+            />
+          </View>
         ) : null}
       </View>
     </>
@@ -394,6 +647,12 @@ const styles = StyleSheet.create({
   sideRight: {
     justifyContent: 'flex-end',
   },
+  /** Trailing row: icon actions + the primary CTA, right-aligned. */
+  trailing: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
   centerTitle: {
     flex: 1,
     alignItems: 'center',
@@ -426,4 +685,19 @@ const styles = StyleSheet.create({
     lineHeight: 22,
     marginTop: 4,
   },
+  /** Spacing between the large title and each large-title-zone extra. */
+  extraRow: {
+    marginTop: 12,
+  },
+  /** Thin wizard progress bar in the large-title zone. */
+  progressTrack: {
+    height: 4,
+    width: '100%',
+    borderRadius: 2,
+    overflow: 'hidden',
+  },
+  progressFill: {
+    height: '100%',
+    borderRadius: 2,
+  },
 });

package/src/dialog/types.ts

@@ -53,6 +53,87 @@ export interface DialogHeaderConfig {
    * affordance entirely (e.g. a blocking surface).
    */
   showClose?: boolean;
+
+  // -------------------------------------------------------------------------
+  //  Rich navigation-header fields (all OPTIONAL + backward-compatible).
+  //
+  //  Modeled on iOS `UINavigationBar` / SwiftUI `.toolbar` + Material 3
+  //  `TopAppBar`. Nav-row trailing = [actions…] + [primaryAction]; the
+  //  collapsing large-title zone stacks title → search → segments → progress.
+  //  A screen that sets none of these renders byte-for-byte as before. Object
+  //  fields are compared by identity — memoize them so the header does not
+  //  thrash (same contract as `left`/`right`).
+  // -------------------------------------------------------------------------
+
+  /**
+   * The ONE trailing call-to-action (Upload / Use photo / Save / Done) — a
+   * proper Bloom `Button` rendered at the trailing edge of the nav row, AFTER
+   * any `actions`. Standardizes what screens used to cram into `right`; supports
+   * `disabled` and a `loading` spinner (async submit). When set (and no explicit
+   * `right`), the default close affordance moves to the leading edge if the
+   * screen has no `onBack`, so there is always exactly one dismiss control.
+   */
+  primaryAction?: {
+    label: string;
+    onPress: () => void;
+    disabled?: boolean;
+    loading?: boolean;
+  };
+
+  /**
+   * Trailing icon buttons (share / more / sort), rendered as frosted circles
+   * BEFORE `primaryAction`. Past {@link DIALOG_HEADER_MAX_INLINE_ACTIONS} the
+   * surplus collapses into a "more" overflow menu (Material pattern) built on
+   * Bloom's `Menu` — never hand-rolled. Each item's `accessibilityLabel` is also
+   * its overflow-menu row text.
+   */
+  actions?: Array<{
+    icon: ReactNode;
+    accessibilityLabel: string;
+    onPress: () => void;
+    disabled?: boolean;
+  }>;
+
+  /**
+   * A search field in the collapsing large-title zone (iOS `.searchable` style:
+   * sits under the title and scrolls away with it). Requires a scrolling surface
+   * (`scrollable !== false`) — it lives in the same in-content block as the large
+   * title. Built on Bloom's `Search`.
+   */
+  search?: {
+    value: string;
+    onChangeText: (text: string) => void;
+    placeholder?: string;
+    onSubmit?: () => void;
+  };
+
+  /**
+   * A segmented control row UNDER the title (Material secondary row) for view
+   * switching. Requires a scrolling surface (lives in the large-title zone).
+   * Built on Bloom's `SegmentedControl` (`type="tabs"`).
+   */
+  segments?: {
+    items: Array<{ key: string; label: string }>;
+    value: string;
+    onChange: (key: string) => void;
+  };
+
+  /**
+   * Over a banner / dark media canvas, `'onImage'` strengthens the gradient
+   * scrim and forces light-content title + default icon buttons so the chrome
+   * stays legible over the media. `'default'` (the default) is unchanged.
+   */
+  tone?: 'default' | 'onImage';
+
+  /**
+   * A thin step/progress indicator for wizards, rendered in the large-title zone
+   * below any title/search/segments. `step` is 1-based; the bar fills
+   * `step / total`.
+   */
+  progress?: {
+    step: number;
+    total: number;
+  };
 }
 
 /**