@oxyhq/bloom 0.4.0 → 0.5.0

package/src/dialog/Dialog.web.tsx

@@ -1,14 +1,34 @@
-import React, { createContext, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { Pressable, Text, View, type ViewStyle } from 'react-native';
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  Pressable,
+  Text,
+  TouchableOpacity,
+  View,
+  type GestureResponderEvent,
+  type ViewStyle,
+} from 'react-native';
 import { RemoveScrollBar } from 'react-remove-scroll-bar';
 
-import { useTheme } from '../theme/use-theme';
 import { Portal } from '../portal/index.web';
-import { Context, useDialogContext } from './context';
-import type { DialogControlProps, DialogInnerProps, DialogOuterProps } from './types';
-
-export { useDialogContext, useDialogControl } from './context';
-export type { DialogControlProps, DialogOuterProps, DialogInnerProps } from './types';
+import type { ThemeColors } from '../theme/types';
+import { useTheme } from '../theme/use-theme';
+import { Context, useDialogContext, useDialogControl } from './context';
+import type {
+  DialogAction,
+  DialogActionColor,
+  DialogControlProps,
+  DialogProps,
+} from './types';
 
 const FADE_OUT_DURATION = 150;
 
@@ -16,13 +36,30 @@ const stopPropagation = (e: { stopPropagation: () => void }) => e.stopPropagatio
 
 const ClosingContext = createContext(false);
 
-export function Outer({
-  children,
+/**
+ * Web variant of `<Dialog>`.
+ *
+ * A centered modal card rendered into the bloom Portal at the end of
+ * `document.body`. Same prop API as native — `title`, `description`,
+ * `actions`, or arbitrary `children` — so call sites are platform
+ * agnostic.
+ *
+ * Accessibility: the panel has `role="dialog"` and the `title`/`description`
+ * props (when provided) become the `aria-labelledby` / `aria-describedby`
+ * targets. Pressing the backdrop dismisses. Pressing `Escape` dismisses.
+ * Focus is locked inside the dialog while it's open.
+ */
+export function Dialog({
   control,
   onClose,
   testID,
-  webOptions,
-}: React.PropsWithChildren<DialogOuterProps>) {
+  title,
+  description,
+  actions,
+  style,
+  label,
+  children,
+}: DialogProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [isClosing, setIsClosing] = useState(false);
   const closeCallbacksRef = useRef<(() => void)[]>([]);
@@ -45,20 +82,38 @@ export function Outer({
     const timer = setTimeout(() => {
       setIsOpen(false);
       setIsClosing(false);
-      for (const cb of closeCallbacksRef.current) {
+      const queued = closeCallbacksRef.current;
+      closeCallbacksRef.current = [];
+      for (const cb of queued) {
         try {
           cb();
         } catch (e) {
-          console.error('Dialog close callback error:', e);
+          if (typeof console !== 'undefined' && console.error) {
+            console.error('Dialog close callback error:', e);
+          }
         }
       }
-      closeCallbacksRef.current = [];
       onClose?.();
     }, FADE_OUT_DURATION);
 
     return () => clearTimeout(timer);
   }, [isClosing, onClose]);
 
+  // Escape-to-close while open. The listener is intentionally scoped to the
+  // open lifetime so stacked dialogs don't fight for the keydown — the
+  // top-most one wins via document-level event order.
+  useEffect(() => {
+    if (!isOpen || typeof document === 'undefined') return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.stopPropagation();
+        close();
+      }
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [close, isOpen]);
+
   useImperativeHandle(
     control.ref,
     () => ({ open, close }),
@@ -87,24 +142,22 @@ export function Outer({
               bottom: 0,
               zIndex: 50,
               alignItems: 'center',
-              justifyContent: webOptions?.alignCenter ? 'center' : undefined,
+              justifyContent: 'center',
               paddingHorizontal: 20,
-              paddingVertical: '10vh' as unknown as number,
-              ...({ overflowY: 'auto' } as Record<string, string>),
             }}
           >
             <DialogBackdrop isClosing={isClosing} />
-            <View
+            <DialogPanel
               testID={testID}
-              style={{
-                width: '100%',
-                zIndex: 60,
-                alignItems: 'center',
-                minHeight: webOptions?.alignCenter ? undefined : '60%',
-              }}
+              label={label}
+              title={title}
+              description={description}
+              actions={actions}
+              style={style}
+              isClosing={isClosing}
             >
               {children}
-            </View>
+            </DialogPanel>
           </Pressable>
         </ClosingContext.Provider>
       </Context.Provider>
@@ -112,29 +165,45 @@ export function Outer({
   );
 }
 
-export function Inner({
-  children,
-  style,
+function DialogPanel({
+  testID,
   label,
-  header,
-  contentContainerStyle,
-}: DialogInnerProps) {
+  title,
+  description,
+  actions,
+  style,
+  isClosing,
+  children,
+}: {
+  testID?: string;
+  label?: string;
+  title?: string;
+  description?: string;
+  actions?: DialogAction[];
+  style?: DialogProps['style'];
+  isClosing: boolean;
+  children?: React.ReactNode;
+}) {
   const theme = useTheme();
-  const isClosing = useContext(ClosingContext);
+  const titleId = useId();
+  const descriptionId = useId();
 
   return (
     <View
       role="dialog"
       aria-label={label}
+      aria-labelledby={title ? titleId : undefined}
+      aria-describedby={description ? descriptionId : undefined}
+      testID={testID}
       onStartShouldSetResponder={() => true}
       onResponderRelease={stopPropagation}
       {...({ onClick: stopPropagation } as Record<string, unknown>)}
       style={[
         {
           position: 'relative',
-          borderRadius: 10,
+          borderRadius: 20,
           width: '100%',
-          maxWidth: 600,
+          maxWidth: 480,
           backgroundColor: theme.colors.background,
           borderWidth: 1,
           borderColor: theme.isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)',
@@ -142,63 +211,130 @@ export function Inner({
           shadowOpacity: theme.isDark ? 0.4 : 0.1,
           shadowRadius: 30,
           shadowOffset: { width: 0, height: 4 },
-          overflow: 'hidden',
+          padding: 20,
+          zIndex: 60,
         },
         isClosing
-          ? { animation: `bloomDialogZoomFadeOut ease-in ${FADE_OUT_DURATION}ms forwards` } as ViewStyle
-          : { animation: 'bloomDialogZoomFadeIn cubic-bezier(0.16, 1, 0.3, 1) 0.3s' } as ViewStyle,
+          ? ({ animation: `bloomDialogZoomFadeOut ease-in ${FADE_OUT_DURATION}ms forwards` } as ViewStyle)
+          : ({ animation: 'bloomDialogZoomFadeIn cubic-bezier(0.16, 1, 0.3, 1) 0.3s' } as ViewStyle),
         style,
       ]}
     >
-      {header}
-      <View style={[{ padding: 20 }, contentContainerStyle]}>
-        {children}
-      </View>
+      {title ? (
+        <Text
+          nativeID={titleId}
+          style={{
+            fontSize: 22,
+            fontWeight: '600',
+            color: theme.colors.text,
+            paddingBottom: description ? 4 : 16,
+            lineHeight: 30,
+          }}
+        >
+          {title}
+        </Text>
+      ) : null}
+      {description ? (
+        <Text
+          nativeID={descriptionId}
+          style={{
+            fontSize: 16,
+            color: theme.colors.textSecondary,
+            paddingBottom: 16,
+            lineHeight: 22,
+          }}
+        >
+          {description}
+        </Text>
+      ) : null}
+      {children}
+      {actions && actions.length > 0 ? <ActionRow actions={actions} /> : null}
     </View>
   );
 }
 
-export function ScrollableInner(props: DialogInnerProps) {
-  return <Inner {...props} />;
-}
-
-export function Handle() {
-  return null;
+function ActionRow({ actions }: { actions: DialogAction[] }) {
+  return (
+    <View style={{ width: '100%', gap: 8, justifyContent: 'flex-end' }}>
+      {actions.map((action, idx) => (
+        <ActionButton
+          key={`${action.label}-${idx}`}
+          action={action}
+        />
+      ))}
+    </View>
+  );
 }
 
-export function Close() {
+function ActionButton({ action }: { action: DialogAction }) {
   const { close } = useDialogContext();
   const theme = useTheme();
+  const color: DialogActionColor = action.color ?? 'default';
+  const shouldCloseOnPress = action.shouldCloseOnPress ?? true;
+
+  const { background, foreground } = getActionPalette(color, theme.colors);
+
+  const handlePress = useCallback(
+    (e: GestureResponderEvent) => {
+      const onPress = action.onPress;
+      if (color === 'cancel') {
+        close(onPress ? () => onPress(e) : undefined);
+        return;
+      }
+      if (shouldCloseOnPress) {
+        close(onPress ? () => onPress(e) : undefined);
+      } else {
+        onPress?.(e);
+      }
+    },
+    [action.onPress, close, color, shouldCloseOnPress],
+  );
 
   return (
-    <View
+    <TouchableOpacity
       style={{
-        position: 'absolute',
-        top: 10,
-        right: 10,
-        zIndex: 10,
+        borderRadius: 9999,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: background,
+        opacity: action.disabled ? 0.5 : 1,
+        paddingVertical: 12,
+        paddingHorizontal: 24,
       }}
+      onPress={handlePress}
+      disabled={action.disabled}
+      activeOpacity={0.7}
+      testID={action.testID}
     >
-      <Pressable
-        onPress={() => close()}
-        accessibilityLabel="Close dialog"
-        style={{
-          width: 34,
-          height: 34,
-          borderRadius: 17,
-          backgroundColor: theme.isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.05)',
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        <Text style={{ fontSize: 18, color: theme.colors.text, lineHeight: 20 }}>
-          {'\u00D7'}
-        </Text>
-      </Pressable>
-    </View>
+      <Text style={{ fontSize: 16, fontWeight: '500', color: foreground }}>
+        {action.label}
+      </Text>
+    </TouchableOpacity>
   );
 }
 
+function getActionPalette(
+  color: DialogActionColor,
+  colors: ThemeColors,
+): { background: string; foreground: string } {
+  switch (color) {
+    case 'destructive':
+      return {
+        background: colors.negative,
+        foreground: colors.negativeForeground,
+      };
+    case 'cancel':
+      return { background: colors.contrast50, foreground: colors.text };
+    case 'default':
+      return { background: colors.primary, foreground: '#FFFFFF' };
+    /* c8 ignore next 3 -- TS exhaustiveness guard */
+    default: {
+      const _exhaustive: never = color;
+      return { background: colors.primary, foreground: '#FFFFFF' };
+    }
+  }
+}
+
 function DialogBackdrop({ isClosing }: { isClosing: boolean }) {
   const style: ViewStyle[] = [
     {
@@ -210,15 +346,44 @@ function DialogBackdrop({ isClosing }: { isClosing: boolean }) {
       backgroundColor: 'rgba(0,0,0,0.8)',
     },
     isClosing
-      ? { animation: `bloomDialogFadeOut ease-in ${FADE_OUT_DURATION}ms forwards` } as ViewStyle
-      : { animation: 'bloomDialogFadeIn ease-out 0.15s' } as ViewStyle,
+      ? ({ animation: `bloomDialogFadeOut ease-in ${FADE_OUT_DURATION}ms forwards` } as ViewStyle)
+      : ({ animation: 'bloomDialogFadeIn ease-out 0.15s' } as ViewStyle),
   ];
 
   return <View style={style} />;
 }
 
-export function Backdrop() {
-  return null;
+/**
+ * Inline imperative dialog used by `alert()`. Mounts and immediately
+ * presents; resolves the host's `onResolve` once the dialog has finished
+ * its exit animation.
+ */
+export function AutoMountedDialog({
+  title,
+  description,
+  actions,
+  onResolve,
+}: {
+  title?: string;
+  description?: string;
+  actions: DialogAction[];
+  onResolve: () => void;
+}) {
+  const control = useDialogControl();
+
+  useEffect(() => {
+    control.open();
+  }, [control]);
+
+  return (
+    <Dialog
+      control={control}
+      title={title}
+      description={description}
+      actions={actions}
+      onClose={onResolve}
+    />
+  );
 }
 
 /**

package/src/dialog/SheetShell.tsx

@@ -0,0 +1,154 @@
+/**
+ * Internal bottom-sheet shell shared by `Menu`, `Select` and `ContextMenu`.
+ *
+ * Not exported from the public `@oxyhq/bloom` surface — these three
+ * components historically used the low-level `Dialog.Outer / Inner /
+ * Handle` primitives, which are gone in 0.5.0. This shell captures the
+ * shared shape (BottomSheet + drag handle + close-on-tap context) in a
+ * single place so the three internal call sites stay symmetrical.
+ *
+ * Consumers needing the same behaviour for app code should use the public
+ * `BottomSheet` primitive directly.
+ */
+import React, { useCallback, useImperativeHandle, useMemo, useRef } from 'react';
+import { Pressable, StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
+
+import { BottomSheet, type BottomSheetRef } from '../bottom-sheet';
+import { useTheme } from '../theme/use-theme';
+import { Context } from './context';
+import type { DialogControlProps } from './types';
+
+export interface SheetShellProps {
+  control: DialogControlProps;
+  label?: string;
+  header?: React.ReactNode;
+  onClose?: () => void;
+  /** Style overrides applied to the inner padded content container. */
+  contentStyle?: StyleProp<ViewStyle>;
+  children?: React.ReactNode;
+}
+
+/**
+ * Bottom-sheet shell with an embedded drag handle. Exposes the bloom
+ * dialog `close()` context to descendants — `Menu.Item`, `Select.Item`
+ * etc. rely on it to dismiss the sheet after selection.
+ */
+export function SheetShell({
+  control,
+  label,
+  header,
+  onClose,
+  contentStyle,
+  children,
+}: SheetShellProps) {
+  const theme = useTheme();
+  const ref = useRef<BottomSheetRef>(null);
+  const closeCallbacks = useRef<(() => void)[]>([]);
+
+  const callQueuedCallbacks = useCallback(() => {
+    const queued = closeCallbacks.current;
+    closeCallbacks.current = [];
+    for (const cb of queued) {
+      try {
+        cb();
+      } catch (e) {
+        if (typeof console !== 'undefined' && console.error) {
+          console.error('SheetShell close callback error:', e);
+        }
+      }
+    }
+  }, []);
+
+  const open = useCallback(() => {
+    ref.current?.present();
+  }, []);
+
+  const close = useCallback<DialogControlProps['close']>((cb) => {
+    if (typeof cb === 'function') {
+      closeCallbacks.current.push(cb);
+    }
+    ref.current?.dismiss();
+  }, []);
+
+  const handleDismiss = useCallback(() => {
+    callQueuedCallbacks();
+    onClose?.();
+  }, [callQueuedCallbacks, onClose]);
+
+  useImperativeHandle(control.ref, () => ({ open, close }), [open, close]);
+
+  const context = useMemo(
+    () => ({ close, isWithinDialog: true }),
+    [close],
+  );
+
+  const sheetStyle = useMemo(
+    () => ({
+      maxWidth: 500,
+      backgroundColor: theme.colors.background,
+      borderRadius: 20,
+    }),
+    [theme.colors.background],
+  );
+
+  return (
+    <BottomSheet
+      ref={ref}
+      onDismiss={handleDismiss}
+      enablePanDownToClose
+      detached
+      backdropOpacity={0.7}
+      style={sheetStyle}
+    >
+      <Context.Provider value={context}>
+        <SheetHandle onPress={() => close()} />
+        {header}
+        <View
+          accessibilityLabel={label}
+          style={[styles.body, { backgroundColor: theme.colors.background }, contentStyle]}
+        >
+          {children}
+        </View>
+      </Context.Provider>
+    </BottomSheet>
+  );
+}
+
+function SheetHandle({ onPress }: { onPress: () => void }) {
+  const theme = useTheme();
+  return (
+    <View style={styles.handleContainer}>
+      <Pressable
+        onPress={onPress}
+        accessibilityLabel="Dismiss"
+        accessibilityHint="Tap to close"
+        hitSlop={{ top: 10, bottom: 10, left: 40, right: 40 }}
+      >
+        <View style={[styles.handleBar, { backgroundColor: theme.colors.text }]} />
+      </Pressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  handleContainer: {
+    position: 'absolute',
+    width: '100%',
+    alignItems: 'center',
+    zIndex: 10,
+    height: 20,
+  },
+  handleBar: {
+    top: 8,
+    width: 35,
+    height: 5,
+    borderRadius: 3,
+    alignSelf: 'center',
+    opacity: 0.5,
+  },
+  body: {
+    paddingTop: 20,
+    paddingHorizontal: 20,
+    paddingBottom: 20,
+  },
+});

package/src/dialog/alert-store.ts

@@ -0,0 +1,126 @@
+import type { DialogAction } from './types';
+
+let idCounter = 0;
+function genId(): string {
+  idCounter += 1;
+  return `bloom-alert-${idCounter}`;
+}
+
+/**
+ * Imperative-alert store.
+ *
+ * The store sits in module scope so `alert()` works from anywhere — event
+ * handlers, async callbacks, top-level helpers — without threading a
+ * provider context through every call site.
+ *
+ * The visible UI is owned by a single subscriber (the `<BloomDialogProvider>`
+ * mounted inside the app's React tree). When there is no subscriber yet —
+ * because `alert()` was called before the provider mounted, or because the
+ * app forgot to mount the provider — entries accumulate in the queue and
+ * drain as soon as a subscriber attaches.
+ *
+ * Multiple subscribers are not supported by design. Two providers would
+ * race for the same alert; we instead enforce a single listener and let
+ * the most recent subscription win (the older one falls back to no-op).
+ */
+
+export type AlertButtonStyle = 'default' | 'cancel' | 'destructive';
+
+export interface AlertButton {
+  /** Button label. Required. */
+  text: string;
+  /** Tap handler. Invoked after the dialog has finished its close animation. */
+  onPress?: () => void;
+  /** Visual treatment. Defaults to `'default'`. */
+  style?: AlertButtonStyle;
+}
+
+export interface AlertEntry {
+  id: string;
+  title: string;
+  message?: string;
+  buttons: AlertButton[];
+}
+
+type Listener = (queue: AlertEntry[]) => void;
+
+let queue: AlertEntry[] = [];
+let listener: Listener | null = null;
+
+function emit(): void {
+  if (listener) listener(queue);
+}
+
+/**
+ * Enqueue an alert. Returns the generated id so callers can dismiss it
+ * imperatively (rare — usually the dialog dismisses itself via a button
+ * tap). The runtime guarantees this enqueues even before any provider
+ * mounts; the provider drains pending entries on subscribe.
+ */
+export function enqueueAlert(entry: Omit<AlertEntry, 'id'>): string {
+  const id = genId();
+  queue = [...queue, { ...entry, id }];
+  emit();
+  return id;
+}
+
+/**
+ * Remove an alert from the queue. Called by the provider once the bloom
+ * Dialog has finished closing for that entry.
+ */
+export function dismissAlert(id: string): void {
+  const next = queue.filter((e) => e.id !== id);
+  if (next.length === queue.length) return;
+  queue = next;
+  emit();
+}
+
+/**
+ * Subscribe to queue changes. Replaces any previously-registered listener
+ * (single-subscriber model — see header). Returns an unsubscribe function.
+ *
+ * On subscribe, the current queue is delivered synchronously so the
+ * subscriber can render pending entries that arrived before mount.
+ */
+export function subscribeAlerts(fn: Listener): () => void {
+  listener = fn;
+  // Deliver the current queue immediately so a freshly-mounted provider
+  // catches up with whatever accumulated before it subscribed.
+  fn(queue);
+  return () => {
+    if (listener === fn) listener = null;
+  };
+}
+
+/** Inspect the current queue. Used internally and by tests. */
+export function getAlertQueue(): readonly AlertEntry[] {
+  return queue;
+}
+
+/**
+ * Translate an alert button to the action shape the unified `Dialog`
+ * accepts. Pure — no React, no theme — so it can be reused on web and
+ * native without forking.
+ */
+export function buttonToAction(button: AlertButton): DialogAction {
+  return {
+    label: button.text,
+    onPress: button.onPress ? () => button.onPress?.() : undefined,
+    color:
+      button.style === 'destructive'
+        ? 'destructive'
+        : button.style === 'cancel'
+          ? 'cancel'
+          : 'default',
+  };
+}
+
+/**
+ * Compute the effective button set for an alert. Mirrors React Native's
+ * `Alert.alert` semantics — an empty/omitted buttons array implies a
+ * single `OK` confirmation button.
+ */
+export function resolveButtons(buttons: AlertButton[] | undefined): AlertButton[] {
+  if (buttons && buttons.length > 0) return buttons;
+  return [{ text: 'OK', style: 'default' }];
+}