@oxyhq/bloom 0.45.0 → 0.48.0

package/src/dialog/types.ts

@@ -1,9 +1,51 @@
+import type { ReactNode } from 'react';
 import type { GestureResponderEvent, StyleProp, ViewStyle } from 'react-native';
 
 import type { ResponsiveDialogPlacement } from './placement';
 
 export type { DialogPlacement, ResponsiveDialogPlacement } from './placement';
 
+/**
+ * Config for the Dialog's OWN navigation header — a DISTINCT surface mode from
+ * the declarative `title`/`description`/`actions` centered-heading path. When
+ * present it turns the Dialog into a scrolling page with a sticky, gradient top
+ * bar (left + right slots) and a large collapsing title that lives in the
+ * Dialog's own scroll content; as the large title scrolls under the bar a small
+ * title cross-fades into the bar center. Screens render NO header of their own.
+ *
+ * A surface seeds this from its registry config; a mounted screen may override
+ * or augment any field at runtime via `useDialogHeader` (a dynamic title, a Save
+ * action on the right, etc.).
+ */
+export interface DialogHeaderConfig {
+  /** Collapsing title — rendered large in-content and small in the nav bar. */
+  title?: string;
+  /** Supporting copy under the large title (and, optionally, in the bar). */
+  subtitle?: string;
+  /**
+   * Whether to render the large collapsing title in the scroll content.
+   * Defaults to `true`. When `false`, only the small nav-bar title shows (always
+   * visible, no collapse) and the content starts flush under the bar.
+   */
+  largeTitle?: boolean;
+  /** Custom left slot node. Overrides the default back button. */
+  left?: ReactNode;
+  /** Custom right slot node. Overrides the default close button. */
+  right?: ReactNode;
+  /**
+   * When set, the default left slot renders a back button that calls this. A
+   * custom `left` node still wins. Set by the surface host when the surface can
+   * navigate back.
+   */
+  onBack?: () => void;
+  /**
+   * Whether the default right slot renders a close button (dismiss). Defaults to
+   * `true`. A custom `right` node still wins. `false` suppresses the close
+   * affordance entirely (e.g. a blocking surface).
+   */
+  showClose?: boolean;
+}
+
 /**
  * Side-sheet inset (px) from the root overlay's edges. Lets a host place a
  * `left`/`right` placement "inside its own shell" — e.g. offset from the top
@@ -134,6 +176,40 @@ export type DialogProps = React.PropsWithChildren<{
   inset?: DialogInset;
   /** Whether to render the drag handle in bottom-sheet mode. Defaults to `true`. */
   showHandle?: boolean;
+  /**
+   * Turns on the Dialog's OWN navigation header (see {@link DialogHeaderConfig}).
+   * When present the Dialog renders a sticky gradient nav bar + a large
+   * collapsing title over its own scroll content, and its content is inset below
+   * the bar — a DISTINCT mode from the declarative
+   * `title`/`description`/`actions` centered heading (a confirm/alert dialog
+   * passes NO `header` and is unchanged). Screens render no header of their own;
+   * the title/slots come from this config, refined at runtime by a mounted
+   * screen's `useDialogHeader` contribution.
+   */
+  header?: DialogHeaderConfig;
+  /**
+   * Open-INTENT seed for a freshly-mounted placement branch, distinct from the
+   * controlled `open` prop. It ONLY seeds a branch's initial visible state on
+   * mount — it never switches the dialog into controlled close semantics, so
+   * the imperative `control.close()` still owns the exit animation and fires
+   * `onClose` post-exit (no synchronous-`onClose` entry leak). Set by the
+   * surface stack so a responsive `Dialog` that swaps its inner component across
+   * a breakpoint (centered card ↔ bottom sheet on resize) re-mounts the new
+   * branch ALREADY OPEN instead of blank. Ignored when the controlled `open`
+   * prop is provided (that path seeds itself).
+   */
+  startOpen?: boolean;
+  /**
+   * Whether the dialog wraps its content in an internal scroll container.
+   * Defaults to `true`. Set `false` when the content owns its own scrolling
+   * primitive (a `FlatList` / `SectionList` / any VirtualizedList, or its own
+   * `ScrollView`): the surface then renders children WITHOUT a ScrollView wrap —
+   * a bounded, overflow-clipped card on the centered/side placements and a
+   * non-scrollable `BottomSheet` body on the bottom placement — so the child
+   * gets a bounded height and owns its scroll, and no "VirtualizedList inside a
+   * plain ScrollView" warning is emitted.
+   */
+  scrollable?: boolean;
   /**
    * Inner padding (px) of the dialog content container, applied uniformly across
    * every placement (centered panel, side-sheet body, bottom-sheet body).
@@ -163,6 +239,16 @@ export type DialogProps = React.PropsWithChildren<{
   containerClassName?: string;
   /** Accessibility label, applied to the dialog role on web. */
   label?: string;
+  /**
+   * Stacking layer index within a coordinated surface stack. Multiplies
+   * `Z_INDEX_LAYER_STEP` onto this dialog's overlay z-indices (backdrop +
+   * panel) so a dialog presented on top of another paints above it. Defaults to
+   * `0` — the single-dialog case, byte-for-byte unchanged. Set by the shared
+   * surface stack (`src/surfaces`); direct consumers rarely need it. No-op for
+   * the `bottom` placement, which already stacks in mount order (native RN
+   * `<Modal>` / the web portal), so `layer` is harmless there.
+   */
+  layer?: number;
 }>;
 
 /**

package/src/index.ts

@@ -59,6 +59,7 @@ export {
   alert,
   useDialogContext,
   useDialogControl,
+  useDialogHeader,
 } from './dialog';
 export type {
   AlertButton,
@@ -67,11 +68,27 @@ export type {
   DialogActionColor,
   DialogContextProps,
   DialogControlProps,
+  DialogHeaderConfig,
   DialogInset,
   DialogPlacement,
   DialogProps,
   ResponsiveDialogPlacement,
 } from './dialog';
+// Surface stack — the shared, coordinated overlay system. The imperative API is
+// the `surfaces` object (its members would otherwise clash with alert-dialog's
+// `confirm`); the individual functions are also named exports of
+// `@oxyhq/bloom/surfaces`.
+export { surfaces, SurfaceProvider, SurfaceHost, useSurface } from './surfaces';
+export type {
+  SurfacePresentation,
+  PresentOptions,
+  SurfaceControls,
+  SurfaceRenderFn,
+  SurfaceStatus,
+  SurfaceEntry,
+  SurfaceConfirmOptions,
+  SurfacePromptOptions,
+} from './surfaces';
 export * from './button';
 export { Fab } from './fab';
 export type { FabProps, FabVariant, FabSize, FabPlacement } from './fab';
@@ -129,7 +146,7 @@ export type { AnimatedCheckProps, AnimatedCheckRef } from './animated-check';
 // Form components
 export * from './text-field';
 export * from './segmented-control';
-export { SearchInput } from './search-input';
+export { Search } from './search';
 export { Label } from './label';
 export type { LabelProps } from './label';
 export { Field } from './field';

package/src/index.web.ts

@@ -64,6 +64,7 @@ export {
   alert,
   useDialogContext,
   useDialogControl,
+  useDialogHeader,
 } from './dialog/index.web';
 export type {
   AlertButton,
@@ -72,11 +73,27 @@ export type {
   DialogActionColor,
   DialogContextProps,
   DialogControlProps,
+  DialogHeaderConfig,
   DialogInset,
   DialogPlacement,
   DialogProps,
   ResponsiveDialogPlacement,
 } from './dialog/index.web';
+// Surface stack — the shared, coordinated overlay system. The imperative API is
+// the `surfaces` object (its members would otherwise clash with alert-dialog's
+// `confirm`); the individual functions are also named exports of
+// `@oxyhq/bloom/surfaces`.
+export { surfaces, SurfaceProvider, SurfaceHost, useSurface } from './surfaces/index.web';
+export type {
+  SurfacePresentation,
+  PresentOptions,
+  SurfaceControls,
+  SurfaceRenderFn,
+  SurfaceStatus,
+  SurfaceEntry,
+  SurfaceConfirmOptions,
+  SurfacePromptOptions,
+} from './surfaces/index.web';
 export * from './button/index.web';
 export { Fab } from './fab/index.web';
 export type { FabProps, FabVariant, FabSize, FabPlacement } from './fab/index.web';
@@ -134,7 +151,7 @@ export type { AnimatedCheckProps, AnimatedCheckRef } from './animated-check';
 // Form components
 export * from './text-field';
 export * from './segmented-control';
-export { SearchInput } from './search-input';
+export { Search } from './search';
 export { Label } from './label';
 export type { LabelProps } from './label';
 export { Field } from './field';

package/src/input-group/types.ts

@@ -21,7 +21,7 @@ export interface InputGroupAddonProps {
 export interface InputGroupProps {
   /**
    * Group children. Place `InputGroup.Addon` elements before/after the input
-   * (a Bloom `TextFieldInput`, a `SearchInput`, or any control). The middle
+   * (a Bloom `TextFieldInput`, a `Search`, or any control). The middle
    * child stretches to fill.
    */
   children: React.ReactNode;

package/src/react-native-className.d.ts

@@ -0,0 +1,38 @@
+/**
+ * `className` support for React Native core components in Bloom.
+ *
+ * Bloom styles some primitives with NativeWind/`react-native-css` utility
+ * classes (`className="..."`). react-native-css applies them at runtime — on web
+ * as real CSS classes emitted by the consumer's Tailwind pipeline (`@source`-
+ * scanning Bloom's lib), on native as compiled styles. This ambient augmentation
+ * makes `className` type-valid on the RN primitives we set it on.
+ *
+ * Heritage-free (a plain interface-merge `declare module`, no `extends` / import
+ * of RN's own module graph) so it never drags a second `@types/react` copy into
+ * the RN 0.85 / React 19 tree — the same hazard the `mergeRefs` note calls out.
+ */
+// `export {}` makes this file a MODULE, so the `declare module` below MERGES
+// with react-native's real types (an augmentation) instead of replacing the
+// module and hiding its exports.
+export {};
+
+declare module 'react-native' {
+  interface ViewProps {
+    className?: string;
+  }
+  interface TextProps {
+    className?: string;
+  }
+  interface ImageProps {
+    className?: string;
+  }
+  interface PressableProps {
+    className?: string;
+  }
+  interface ScrollViewProps {
+    className?: string;
+  }
+  interface TextInputProps {
+    className?: string;
+  }
+}

package/src/{search-input → search}/index.tsx

@@ -8,7 +8,10 @@ import { TextField, TextFieldIcon, TextFieldInput, type TextFieldInputProps } fr
 import { MagnifyingGlass_Stroke2_Corner0_Rounded as MagnifyingGlassIcon } from '../icons/MagnifyingGlass';
 import { TimesLarge_Stroke2_Corner0_Rounded as X } from '../icons/Times';
 
-type SearchInputProps = Omit<TextFieldInputProps, 'label'> & {
+/** Fully-rounded (pill) corner radius — clamps to half the field height. */
+const PILL_RADIUS = 999;
+
+type SearchProps = Omit<TextFieldInputProps, 'label'> & {
   label?: TextFieldInputProps['label'];
   /**
    * Called when the user presses the clear (X) button.
@@ -16,14 +19,14 @@ type SearchInputProps = Omit<TextFieldInputProps, 'label'> & {
   onClearText?: () => void;
 };
 
-export const SearchInput = forwardRef<TextInput, SearchInputProps>(
-  function SearchInput({ value, label = 'Search', onClearText, ...rest }, ref) {
+export const Search = forwardRef<TextInput, SearchProps>(
+  function Search({ value, label = 'Search', onClearText, ...rest }, ref) {
     const theme = useTheme();
     const showClear = value != null && value.length > 0;
 
     return (
       <View style={[a.w_full, a.relative]}>
-        <TextField>
+        <TextField radius={PILL_RADIUS}>
           <TextFieldIcon icon={MagnifyingGlassIcon} />
           <TextFieldInput
             inputRef={ref}
@@ -70,4 +73,4 @@ export const SearchInput = forwardRef<TextInput, SearchInputProps>(
     );
   },
 );
-SearchInput.displayName = 'SearchInput';
+Search.displayName = 'Search';

package/src/settings-list/SettingsList.tsx

@@ -243,7 +243,11 @@ const styles = StyleSheet.create({
     marginBottom: 16,
   },
   groupCard: {
-    marginHorizontal: 16,
+    // No horizontal self-inset: a `SettingsListGroup` fills its parent's content
+    // width, so the single horizontal inset comes from the ONE content padding
+    // the screen/Dialog already applies (the same `px-screen-margin` that pads
+    // the title/search). Keeping a self-margin here double-inset grouped rows on
+    // every screen that also applies that padding.
     borderRadius: 16,
     overflow: 'hidden',
   },

package/src/surfaces/SurfaceHost.tsx

@@ -0,0 +1,222 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useSyncExternalStore,
+} from 'react';
+import { BackHandler, Platform } from 'react-native';
+
+import { useDialogControl } from '../dialog/context';
+import type { DialogProps } from '../dialog/types';
+import {
+  finalizeClose,
+  getSnapshot,
+  present,
+  requestDismiss,
+  resetSurfaces,
+  subscribe,
+} from './surfaceStore';
+import { SurfaceContext } from './useSurface';
+import type { SurfaceControls, SurfaceEntry, SurfacePresentation } from './types';
+
+type DialogComponent = React.ComponentType<DialogProps>;
+
+/** Default placement — the ecosystem's responsive "sheet" (bottom → centered). */
+const DEFAULT_PLACEMENT: SurfacePresentation['placement'] = {
+  base: 'bottom',
+  md: 'center',
+};
+
+/** Map a surface's presentation config onto the shared `Dialog` props. */
+function placementFor(p: SurfacePresentation): Partial<DialogProps> {
+  return {
+    placement: p.placement ?? DEFAULT_PLACEMENT,
+    width: p.width,
+    maxWidth: p.maxWidth,
+    maxHeightRatio: p.maxHeightRatio,
+    inset: p.inset,
+    showHandle: p.showHandle,
+    dismissOnBackdrop: p.dismissOnBackdrop,
+    contentPadding: p.contentPadding,
+    header: p.header,
+    scrollable: p.scrollable,
+    style: p.style,
+    panelStyle: p.panelStyle,
+    panelClassName: p.panelClassName,
+    containerStyle: p.containerStyle,
+    containerClassName: p.containerClassName,
+    label: p.label,
+    testID: p.testID,
+  };
+}
+
+/**
+ * Build the `<SurfaceHost>` + `<SurfaceProvider>` bound to a platform `Dialog`.
+ *
+ * `Dialog` is platform-forked (native `BottomSheet`-backed vs. pure-DOM web
+ * overlay), so — like `createAlertDialog` — the platform entry files
+ * (`index.ts` / `index.web.ts`) inject the correct one. The stack logic below is
+ * single-source, no duplication.
+ */
+export function createSurfaceHost(Dialog: DialogComponent) {
+  /**
+   * One stacked surface. Bridges a store entry onto an IMPERATIVE `Dialog`
+   * (`useDialogControl()` + `open()`/`close()`) — never the controlled
+   * `open`/`onClose` boolean path, which fires `onClose` synchronously as the
+   * dismiss REQUEST and has no post-exit callback, so it could never tell the
+   * store WHEN to splice the entry after the exit animation.
+   */
+  function SurfaceLayer({
+    entry,
+    index,
+  }: {
+    entry: SurfaceEntry;
+    index: number;
+  }) {
+    const control = useDialogControl();
+    const { id, status } = entry;
+
+    const controls = useMemo<SurfaceControls>(
+      () => ({
+        dismiss: (result?: unknown) => requestDismiss(id, result),
+        present: (render, opts) => present(render, opts),
+      }),
+      [id],
+    );
+
+    // Open imperatively on mount (mirrors `AlertDialog`'s canonical
+    // fresh-mount open-from-effect; `control` is stable for the layer's life).
+    useEffect(() => {
+      control.open();
+    }, [control]);
+
+    // When the store flips this entry to 'closing' (a programmatic dismiss,
+    // dismissAll, dismissToRoot, Escape, or Android-back), run the exit
+    // animation. A user backdrop/Escape handled by the Dialog itself instead
+    // drives its own internal close; either way `onClose` fires post-exit.
+    useEffect(() => {
+      if (status === 'closing') control.close();
+    }, [status, control]);
+
+    // Fires AFTER the exit animation settles (imperative mode), for ANY
+    // dismissal path — user backdrop/Escape/back OR a programmatic dismiss.
+    // `requestDismiss` resolves-once (a programmatic dismiss already resolved
+    // with its result; this is a no-op then), then `finalizeClose` splices the
+    // entry out. Guarded by unique ids + `'closing'` status in the store.
+    const handleClose = useCallback(() => {
+      requestDismiss(id);
+      finalizeClose(id);
+    }, [id]);
+
+    const placement = useMemo(
+      () => placementFor(entry.presentation),
+      [entry.presentation],
+    );
+
+    return (
+      // `startOpen` is the surface's open-INTENT (true while not closing). It
+      // ONLY seeds a freshly-mounted Dialog branch's visible state — the
+      // imperative `control` still owns open/close — so when a responsive Dialog
+      // swaps its inner component on resize (centered card ↔ bottom sheet) the
+      // new branch mounts STILL OPEN instead of dismissing the surface. A real
+      // dismiss (backdrop/Escape/back/programmatic) still resolves + splices
+      // exactly once via `control.close()` → `handleClose`, post-exit.
+      <Dialog
+        control={control}
+        onClose={handleClose}
+        layer={index}
+        startOpen={status !== 'closing'}
+        {...placement}
+      >
+        <SurfaceContext.Provider value={controls}>
+          {entry.render(controls)}
+        </SurfaceContext.Provider>
+      </Dialog>
+    );
+  }
+
+  function SurfaceHost() {
+    const stack = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+
+    useAndroidBackDismissesTop();
+    useEscapeDismissesTop();
+
+    return (
+      <>
+        {stack.map((entry, index) => (
+          <SurfaceLayer key={entry.id} entry={entry} index={index} />
+        ))}
+      </>
+    );
+  }
+  SurfaceHost.displayName = 'SurfaceHost';
+
+  /**
+   * Mount ONCE near your app root — renders `children` plus the stack host.
+   * Requires the Bloom Portal provider to be mounted too (same as any `<Dialog>`
+   * usage): on web the Portal auto-creates `#bloom-portal-root`; on native mount
+   * `<Provider>`/`<Outlet>` from `@oxyhq/bloom/portal`. Can equally be folded
+   * next to that Portal provider — `<SurfaceHost>` used directly does the same
+   * job without wrapping `children`.
+   */
+  function SurfaceProvider({ children }: { children: React.ReactNode }) {
+    // Resolve any pending awaiters if the provider unmounts so no `present()`
+    // promise is stranded.
+    useEffect(() => () => resetSurfaces(), []);
+    return (
+      <>
+        {children}
+        <SurfaceHost />
+      </>
+    );
+  }
+  SurfaceProvider.displayName = 'SurfaceProvider';
+
+  return { SurfaceHost, SurfaceProvider };
+}
+
+/**
+ * ONE Android hardware-back handler for the whole stack → dismiss the TOP
+ * surface. Reads the live top from the store so a single registration always
+ * targets the current top. Returns `false` when the stack is empty so app-level
+ * back navigation is untouched.
+ */
+function useAndroidBackDismissesTop(): void {
+  useEffect(() => {
+    if (Platform.OS !== 'android') return;
+    const sub = BackHandler.addEventListener('hardwareBackPress', () => {
+      const stack = getSnapshot();
+      const top = stack[stack.length - 1];
+      if (!top) return false;
+      if (top.presentation.dismissOnBackdrop === false) return true;
+      requestDismiss(top.id);
+      return true;
+    });
+    return () => sub.remove();
+  }, []);
+}
+
+/**
+ * Web-only: route Escape to the TOP surface only. A window-CAPTURE listener runs
+ * before each `Dialog`'s own document-level keydown, so `stopImmediatePropagation`
+ * prevents the lower stacked dialogs from ALSO handling Escape (they each add a
+ * document listener) — Escape dismisses strictly the top, LIFO. No-op on native.
+ */
+function useEscapeDismissesTop(): void {
+  useEffect(() => {
+    if (Platform.OS !== 'web') return;
+    if (typeof window === 'undefined' || typeof document === 'undefined') return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key !== 'Escape') return;
+      const stack = getSnapshot();
+      const top = stack[stack.length - 1];
+      if (!top) return;
+      if (top.presentation.dismissOnBackdrop === false) return;
+      e.stopImmediatePropagation();
+      e.preventDefault();
+      requestDismiss(top.id);
+    };
+    window.addEventListener('keydown', handler, true);
+    return () => window.removeEventListener('keydown', handler, true);
+  }, []);
+}

package/src/surfaces/api.ts

@@ -0,0 +1,55 @@
+import {
+  dismissAll,
+  dismissToRoot,
+  dismissTop,
+  present,
+  requestDismiss,
+} from './surfaceStore';
+import { confirm, prompt } from './prompts';
+import type { PresentOptions, SurfaceRenderFn } from './types';
+
+/**
+ * Dismiss the TOP surface, resolving its `present()` promise with `result`.
+ * The public counterpart of the store's `dismissTop`.
+ */
+function dismiss(result?: unknown): void {
+  dismissTop(result);
+}
+
+/**
+ * Dismiss a SPECIFIC surface by id, resolving its `present()` promise with
+ * `result`. Rarely needed — most call sites use `dismiss()` (top) or the
+ * per-surface `SurfaceControls.dismiss`.
+ */
+function dismissById(id: string, result?: unknown): void {
+  requestDismiss(id, result);
+}
+
+/**
+ * The shared imperative surface-stack API — a module singleton (mirrors
+ * `alert()`'s shape) so any consumer, in the SDK or an app, presents into the
+ * SAME coordinated Bloom stack from anywhere without threading a provider.
+ *
+ * Exposed at the package root as `surfaces` (avoids a bare `present`/`confirm`
+ * name clash with the existing `alert-dialog` `confirm`); the individual
+ * functions are also named exports of `@oxyhq/bloom/surfaces` for direct import.
+ */
+export const surfaces = {
+  /** Present a new surface on top. Resolves with the dismissal result. */
+  present: <Result = unknown>(render: SurfaceRenderFn, opts?: PresentOptions) =>
+    present<Result>(render, opts),
+  /** Dismiss the top surface. */
+  dismiss,
+  /** Dismiss a specific surface by id. */
+  dismissById,
+  /** Dismiss everything above the root surface. */
+  dismissToRoot,
+  /** Dismiss the entire stack (resolves pending awaiters with `undefined`). */
+  dismissAll,
+  /** Present a confirm surface; resolves `true`/`false`. */
+  confirm,
+  /** Present a prompt surface; resolves the string or `null`. */
+  prompt,
+} as const;
+
+export { confirm, dismiss, dismissAll, dismissById, dismissToRoot, present, prompt };

package/src/surfaces/index.ts

@@ -0,0 +1,38 @@
+import { Dialog } from '../dialog';
+import { createSurfaceHost } from './SurfaceHost';
+
+/**
+ * The shared, content-agnostic SURFACE STACK.
+ *
+ * `<SurfaceProvider>`/`<SurfaceHost>` render the coordinated stack; the
+ * imperative `surfaces` API (+ its named functions) present into it from
+ * anywhere; `useSurface()` gives a presented surface its own controls.
+ *
+ * `SurfaceHost`/`SurfaceProvider` are bound to the NATIVE `Dialog` here; the web
+ * fork (`./index.web`) binds the web `Dialog`. The store, imperative API, hook,
+ * and types are platform-agnostic and shared by both.
+ */
+const { SurfaceHost, SurfaceProvider } = createSurfaceHost(Dialog);
+
+export { SurfaceHost, SurfaceProvider };
+export {
+  surfaces,
+  present,
+  dismiss,
+  dismissById,
+  dismissToRoot,
+  dismissAll,
+  confirm,
+  prompt,
+} from './api';
+export { useSurface } from './useSurface';
+export type {
+  SurfacePresentation,
+  PresentOptions,
+  SurfaceControls,
+  SurfaceRenderFn,
+  SurfaceStatus,
+  SurfaceEntry,
+  SurfaceConfirmOptions,
+  SurfacePromptOptions,
+} from './types';

package/src/surfaces/index.web.ts

@@ -0,0 +1,33 @@
+import { Dialog } from '../dialog/index.web';
+import { createSurfaceHost } from './SurfaceHost';
+
+/**
+ * Web variant of the surface stack barrel. Identical surface area to the native
+ * `./index.ts` — it just binds the web-fork `Dialog` (`Dialog.web.tsx`, a
+ * pure-DOM overlay) instead of the native `BottomSheet`-backed one. The store,
+ * imperative API, hook, and types are shared, platform-agnostic modules.
+ */
+const { SurfaceHost, SurfaceProvider } = createSurfaceHost(Dialog);
+
+export { SurfaceHost, SurfaceProvider };
+export {
+  surfaces,
+  present,
+  dismiss,
+  dismissById,
+  dismissToRoot,
+  dismissAll,
+  confirm,
+  prompt,
+} from './api';
+export { useSurface } from './useSurface';
+export type {
+  SurfacePresentation,
+  PresentOptions,
+  SurfaceControls,
+  SurfaceRenderFn,
+  SurfaceStatus,
+  SurfaceEntry,
+  SurfaceConfirmOptions,
+  SurfacePromptOptions,
+} from './types';