@oxyhq/bloom 0.89.0 → 1.0.1

package/src/prompt-input/PromptInputBase.tsx

@@ -0,0 +1,288 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  View,
+  Pressable,
+  Text,
+  KeyboardAvoidingView,
+  Platform,
+  StyleSheet,
+  type TextInput as RNTextInput,
+} from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import { borderRadius } from '../styles/tokens';
+import { OverlayRoot } from '../overlay';
+import { Portal } from '../portal';
+import { Z_INDEX } from '../styles/z-index';
+import { PromptInputContext, type PromptInputAttachment } from './context';
+import { PromptInputActions } from './Actions';
+import { PromptInputAttachments } from './Attachments';
+import { PromptInputSubmitButton } from './SubmitButton';
+import type { PromptInputProps, PromptInputTextareaProps } from './types';
+
+export interface PromptInputBaseProps extends PromptInputProps {
+  /**
+   * The textarea to render in simple mode (no `children`). Supplied by the
+   * platform binding — `PromptInput.tsx` passes the React Native input,
+   * `PromptInput.web.tsx` the web fork, which adds paste-to-attach and the
+   * `onImagePaste` listener. Taking it as a prop is what keeps ONE
+   * implementation of the surrounding chrome: forking this file would
+   * duplicate 250 lines to change one element.
+   */
+  Textarea: React.ComponentType<PromptInputTextareaProps>;
+}
+
+export function PromptInputBase({
+  Textarea,
+  isLoading = false,
+  maxHeight = 240,
+  value,
+  onValueChange,
+  onSubmit,
+  children,
+  style,
+  disabled = false,
+  onImagePaste,
+  placeholder,
+  actionsLeft,
+  onStop,
+  emptyAction,
+  attachments: controlledAttachments,
+  onAddAttachment,
+  onRemoveAttachment,
+  onUpdateAttachment,
+  disableKeyboardAvoidance = false,
+  expandIcon,
+  collapseIcon,
+  testID,
+}: PromptInputBaseProps) {
+  const [internalValue, setInternalValue] = useState(value ?? '');
+  const [currentHeight, setCurrentHeight] = useState(44);
+  const [showFullscreen, setShowFullscreen] = useState(false);
+  const [handleCompletionKey, setHandleCompletionKey] = useState<((key: string) => boolean) | null>(null);
+  const textareaRef = useRef<RNTextInput>(null);
+  const theme = useTheme();
+
+  // Internal attachment state (used when no controlled props)
+  const [internalAttachments, setInternalAttachments] = useState<PromptInputAttachment[]>([]);
+  const attachments = controlledAttachments ?? internalAttachments;
+
+  const addAttachment = useCallback(
+    (a: PromptInputAttachment) => {
+      if (onAddAttachment) {
+        onAddAttachment(a);
+      } else {
+        setInternalAttachments((prev) => [...prev, a]);
+      }
+    },
+    [onAddAttachment],
+  );
+
+  const removeAttachment = useCallback(
+    (id: string) => {
+      if (onRemoveAttachment) {
+        onRemoveAttachment(id);
+      } else {
+        setInternalAttachments((prev) => prev.filter((a) => a.id !== id));
+      }
+    },
+    [onRemoveAttachment],
+  );
+
+  const updateAttachment = useCallback(
+    (id: string, updates: Partial<PromptInputAttachment>) => {
+      if (onUpdateAttachment) {
+        onUpdateAttachment(id, updates);
+      } else {
+        setInternalAttachments((prev) =>
+          prev.map((a) => (a.id === id ? { ...a, ...updates } : a)),
+        );
+      }
+    },
+    [onUpdateAttachment],
+  );
+
+  const handleChange = useCallback(
+    (newValue: string) => {
+      setInternalValue(newValue);
+      onValueChange?.(newValue);
+    },
+    [onValueChange],
+  );
+
+  const handleSubmit = useCallback(() => {
+    onSubmit?.();
+    if (showFullscreen) setShowFullscreen(false);
+  }, [onSubmit, showFullscreen]);
+
+  useEffect(() => {
+    if (!showFullscreen) setCurrentHeight(44);
+  }, [showFullscreen]);
+
+  const showExpandIcon = currentHeight > 100;
+  const isSimpleMode = !children;
+
+  const currentValue = value ?? internalValue;
+  const currentSetValue = onValueChange ?? handleChange;
+
+  const contextValue = useMemo(
+    () => ({
+      isLoading,
+      value: currentValue,
+      setValue: currentSetValue,
+      maxHeight,
+      onSubmit: handleSubmit,
+      disabled,
+      textareaRef,
+      currentHeight,
+      setCurrentHeight,
+      isFullscreen: showFullscreen,
+      onImagePaste,
+      attachments,
+      addAttachment,
+      removeAttachment,
+      updateAttachment,
+      handleCompletionKey,
+      setHandleCompletionKey,
+    }),
+    [
+      isLoading, currentValue, currentSetValue, maxHeight, handleSubmit,
+      disabled, currentHeight, showFullscreen, onImagePaste,
+      attachments, addAttachment, removeAttachment, updateAttachment,
+      handleCompletionKey,
+    ],
+  );
+
+  const content = isSimpleMode ? (
+    <>
+      <PromptInputAttachments />
+      <Textarea placeholder={placeholder} />
+      <PromptInputActions
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          gap: 8,
+          marginTop: 6,
+          marginBottom: 12,
+          paddingHorizontal: 12,
+        }}
+      >
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+          {actionsLeft}
+        </View>
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+          <PromptInputSubmitButton
+            isLoading={isLoading}
+            onStop={onStop}
+            emptyAction={emptyAction}
+          />
+        </View>
+      </PromptInputActions>
+    </>
+  ) : (
+    children
+  );
+
+  const inputBox = (
+    <Pressable
+      onPress={() => {
+        if (!disabled) textareaRef.current?.focus();
+      }}
+      disabled={disabled}
+    >
+      <View
+        style={[
+          {
+            borderRadius: 24,
+            borderWidth: 1,
+            borderColor: theme.colors.border,
+            backgroundColor: theme.colors.background,
+            overflow: 'hidden',
+            position: 'relative',
+          },
+          disabled && { opacity: 0.6 },
+          style,
+        ]}
+        testID={testID}
+      >
+        {showExpandIcon && !disabled && (
+          <Pressable
+            onPress={() => setShowFullscreen(true)}
+            style={{
+              position: 'absolute',
+              top: 8,
+              right: 8,
+              zIndex: Z_INDEX.floating,
+              backgroundColor: theme.colors.background,
+              borderRadius: borderRadius.full,
+              padding: 6,
+              borderWidth: 1,
+              borderColor: theme.colors.border,
+            }}
+          >
+            {expandIcon ?? (
+              <Text style={{ fontSize: 14, color: theme.colors.textSecondary }}>⤢</Text>
+            )}
+          </Pressable>
+        )}
+        {content}
+      </View>
+    </Pressable>
+  );
+
+  const Wrapper = disableKeyboardAvoidance ? View : KeyboardAvoidingView;
+  const wrapperProps = disableKeyboardAvoidance
+    ? {}
+    : { behavior: Platform.OS === 'ios' ? 'padding' as const : undefined };
+
+  return (
+    <PromptInputContext.Provider value={contextValue}>
+      <Wrapper {...wrapperProps}>
+        {inputBox}
+      </Wrapper>
+
+      {showFullscreen && (
+        <Portal>
+          {/* `OverlayRoot` takes the fullscreen editor's place in the
+              open-order overlay stack (`src/overlay/stack.ts`). It mounts with
+              `showFullscreen`, so the rank tracks opening. */}
+          <OverlayRoot>
+            <View
+              style={[
+                StyleSheet.absoluteFill,
+                {
+                  backgroundColor: theme.colors.background,
+                  // Opt back in from the Portal root's `pointer-events: none`
+                  // (web only — harmless on native).
+                  pointerEvents: 'auto',
+                },
+              ]}
+            >
+              <Pressable
+                onPress={() => setShowFullscreen(false)}
+                style={{
+                  position: 'absolute',
+                  top: 16,
+                  right: 16,
+                  // Above the editor's own body; where the editor sits relative
+                  // to OTHER surfaces is the overlay stack's call.
+                  zIndex: Z_INDEX.raised,
+                  padding: 8,
+                  backgroundColor: theme.colors.background,
+                  borderRadius: borderRadius.full,
+                }}
+              >
+                {collapseIcon ?? (
+                  <Text style={{ fontSize: 18, color: theme.colors.text }}>⤡</Text>
+                )}
+              </Pressable>
+              <View style={{ flex: 1 }}>{content}</View>
+            </View>
+          </OverlayRoot>
+        </Portal>
+      )}
+    </PromptInputContext.Provider>
+  );
+}
+PromptInputBase.displayName = 'PromptInputBase';

package/src/prompt-input/SubmitButton.tsx

@@ -1,10 +1,20 @@
 import React from 'react';
-import { Text, TouchableOpacity } from 'react-native';
+import { Pressable, View } from 'react-native';
 
 import { useTheme } from '../theme/use-theme';
+import { useInteractionState } from '../hooks/use-interaction-state';
+import { borderRadius } from '../styles/tokens';
+import { ArrowTop_Stroke2_Corner0_Rounded as ArrowTopIcon } from '../icons/Arrow';
 import { usePromptInput } from './context';
 import type { PromptInputSubmitButtonProps } from './types';
 
+const BUTTON_SIZE = 32;
+const ICON_SIZE = 18;
+/** The stop square, as a fraction of the button. Drawn, not typed. */
+const STOP_SQUARE = 0.34;
+/** Press feedback, matching the `TouchableOpacity` dip this button used to pass. */
+const PRESSED_OPACITY = 0.7;
+
 export function PromptInputSubmitButton({
   isLoading,
   onStop,
@@ -16,30 +26,45 @@ export function PromptInputSubmitButton({
 }: PromptInputSubmitButtonProps) {
   const { onSubmit, value, attachments } = usePromptInput();
   const theme = useTheme();
+  // The press dip goes through the shared interaction hook rather than
+  // `TouchableOpacity`'s `activeOpacity`: one mechanism, and it composes with
+  // the disabled dim below instead of replacing it.
+  const { state: pressed, onIn: onPressIn, onOut: onPressOut } = useInteractionState();
   const hasContent = value.trim().length > 0 || attachments.length > 0;
 
   if (isLoading && onStop) {
     return (
-      <TouchableOpacity
+      <Pressable
         onPress={onStop}
-        activeOpacity={0.7}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
+        accessibilityRole="button"
+        accessibilityLabel="Stop"
         style={[
           {
-            width: 32,
-            height: 32,
-            borderRadius: 16,
+            width: BUTTON_SIZE,
+            height: BUTTON_SIZE,
+            borderRadius: borderRadius.full,
             backgroundColor: theme.colors.primary,
             alignItems: 'center',
             justifyContent: 'center',
           },
+          pressed && { opacity: PRESSED_OPACITY },
           style,
         ]}
         testID={testID}
       >
         {stopIcon ?? (
-          <Text style={{ fontSize: 12, color: theme.colors.primaryForeground, fontWeight: '700' }}>■</Text>
+          <View
+            style={{
+              width: BUTTON_SIZE * STOP_SQUARE,
+              height: BUTTON_SIZE * STOP_SQUARE,
+              borderRadius: 2,
+              backgroundColor: theme.colors.primaryForeground,
+            }}
+          />
         )}
-      </TouchableOpacity>
+      </Pressable>
     );
   }
 
@@ -48,28 +73,36 @@ export function PromptInputSubmitButton({
   }
 
   return (
-    <TouchableOpacity
+    <Pressable
       onPress={onSubmit}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
       disabled={!hasContent}
-      activeOpacity={0.7}
+      accessibilityRole="button"
+      accessibilityLabel="Send"
       style={[
         {
-          width: 32,
-          height: 32,
-          borderRadius: 16,
+          width: BUTTON_SIZE,
+          height: BUTTON_SIZE,
+          borderRadius: borderRadius.full,
           backgroundColor: theme.colors.primary,
           alignItems: 'center',
           justifyContent: 'center',
           opacity: hasContent ? 1 : 0.4,
         },
+        hasContent && pressed && { opacity: PRESSED_OPACITY },
         style,
       ]}
       testID={testID}
     >
       {submitIcon ?? (
-        <Text style={{ fontSize: 16, color: theme.colors.primaryForeground, fontWeight: '700' }}>↑</Text>
+        <ArrowTopIcon
+          width={ICON_SIZE}
+          height={ICON_SIZE}
+          fill={theme.colors.primaryForeground}
+        />
       )}
-    </TouchableOpacity>
+    </Pressable>
   );
 }
 PromptInputSubmitButton.displayName = 'PromptInputSubmitButton';

package/src/prompt-input/context.ts

@@ -1,7 +1,7 @@
 import React, { createContext, useContext } from 'react';
 import type { TextInput as RNTextInput } from 'react-native';
 
-export interface Attachment {
+export interface PromptInputAttachment {
   id: string;
   uri: string;
   type: 'image' | 'document';
@@ -23,10 +23,10 @@ export type PromptInputContextType = {
   setCurrentHeight: (height: number) => void;
   isFullscreen: boolean;
   onImagePaste?: (files: File[]) => void;
-  attachments: Attachment[];
-  addAttachment: (attachment: Attachment) => void;
+  attachments: PromptInputAttachment[];
+  addAttachment: (attachment: PromptInputAttachment) => void;
   removeAttachment: (id: string) => void;
-  updateAttachment: (id: string, updates: Partial<Attachment>) => void;
+  updateAttachment: (id: string, updates: Partial<PromptInputAttachment>) => void;
   handleCompletionKey: ((key: string) => boolean) | null;
   setHandleCompletionKey: (fn: ((key: string) => boolean) | null) => void;
 };
@@ -54,6 +54,3 @@ export function usePromptInput(): PromptInputContextType {
   return useContext(PromptInputContext);
 }
 
-export function useIsFullscreen(): boolean {
-  return useContext(PromptInputContext).isFullscreen;
-}

package/src/prompt-input/index.ts

@@ -5,8 +5,7 @@ export { PromptInputAttachments } from './Attachments';
 export { PromptInputSubmitButton } from './SubmitButton';
 export {
   usePromptInput,
-  useIsFullscreen,
-  type Attachment,
+  type PromptInputAttachment,
   type PromptInputContextType,
 } from './context';
 export type {

package/src/prompt-input/index.web.ts

@@ -0,0 +1,26 @@
+// Web variant of the `./prompt-input` barrel.
+//
+// `Textarea.web.tsx` attaches a real DOM `paste` listener so `onImagePaste`
+// fires and pasted images become attachments; the React Native input has no
+// equivalent. Metro-web picked the fork up by platform extension, but every
+// OTHER web bundler (Vite, webpack, SSR) resolves the package `import`
+// condition, which pointed at the native build — so the feature was silently
+// absent there. The `browser` condition in `package.json`'s
+// `exports['./prompt-input']` is what closes that.
+export { PromptInput } from './PromptInput.web';
+export { PromptInputTextarea } from './Textarea.web';
+export { PromptInputActions } from './Actions';
+export { PromptInputAttachments } from './Attachments';
+export { PromptInputSubmitButton } from './SubmitButton';
+export {
+  usePromptInput,
+  type PromptInputAttachment,
+  type PromptInputContextType,
+} from './context';
+export type {
+  PromptInputProps,
+  PromptInputTextareaProps,
+  PromptInputSubmitButtonProps,
+  PromptInputActionsProps,
+  PromptInputAttachmentsProps,
+} from './types';

package/src/prompt-input/types.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle, TextStyle, TextInputProps } from 'react-native';
-import type { Attachment } from './context';
+import type { PromptInputAttachment } from './context';
 
 export interface PromptInputProps {
   /** Whether the AI is currently generating a response */
@@ -30,13 +30,13 @@ export interface PromptInputProps {
   /** Rendered when input is empty and not loading (e.g., mic button) */
   emptyAction?: ReactNode;
   /** Controlled attachments */
-  attachments?: Attachment[];
+  attachments?: PromptInputAttachment[];
   /** Callback to add an attachment */
-  onAddAttachment?: (attachment: Attachment) => void;
+  onAddAttachment?: (attachment: PromptInputAttachment) => void;
   /** Callback to remove an attachment */
   onRemoveAttachment?: (id: string) => void;
   /** Callback to update an attachment */
-  onUpdateAttachment?: (id: string, updates: Partial<Attachment>) => void;
+  onUpdateAttachment?: (id: string, updates: Partial<PromptInputAttachment>) => void;
   /** Skip the inner KeyboardAvoidingView (use when outer keyboard handling exists) */
   disableKeyboardAvoidance?: boolean;
   /** Icon shown on the expand button (defaults to text "⤢") */

package/src/provider/BloomProvider.tsx

@@ -0,0 +1,79 @@
+/**
+ * `BloomProvider` — the ONE Bloom root an app mounts.
+ *
+ * Bloom's app-wide state used to be a handful of separate providers that every
+ * consumer wired by hand (theme, haptics, image resolution, scroll restoration,
+ * tab-bar minimize progress). Mounting them separately means each one can end
+ * up at a different depth, and a provider mounted too low fails in ways that
+ * are hard to trace:
+ *
+ *   - `useScrollRestoration()` THROWS on web outside `ScrollRestorationProvider`,
+ *     so any scrollable rendered beside the provider (a right rail, an overlay)
+ *     crashes the screen.
+ *   - `useMinimizeState()` silently hands each caller a private fallback, so a
+ *     tab bar below the provider just never minimizes — no error anywhere.
+ *
+ * Mounting this single provider at the app root makes both classes of mistake
+ * impossible: everything Bloom renders is under all of them, at the same depth.
+ * Nesting extra contexts costs nothing at runtime — the win is that scope is no
+ * longer a per-app decision.
+ *
+ * EXPO/EXPO-ROUTER APPS ONLY, and now for one narrow reason: it binds the
+ * scroll store to the expo-router ADAPTER, which is the only module in the
+ * scroll primitive that imports `expo-router`. The scroll core itself is
+ * router-agnostic, so a Vite/SPA consumer can mount
+ * `<ScrollRestorationProvider adapter={...}>` from `@oxyhq/bloom/scroll` with
+ * an adapter for its own router — alongside `BloomThemeProvider` and whatever
+ * else it needs — rather than going without.
+ *
+ * NOT included, on purpose — these are OUTLETS, not state, and their placement
+ * in the tree is a real app decision (z-order, safe areas, and mounting a
+ * second one duplicates every surface it renders):
+ * `<ToastOutlet>`, `<PortalProvider>`/`<PortalOutlet>`, `<SurfaceHost>`.
+ */
+import type { ReactNode } from 'react';
+
+import { GlassBlurTargetProvider } from '../glass/blur-target';
+import { ImageResolverProvider, type ImageResolver } from '../image-resolver';
+import { BloomHapticsProvider } from '../hooks/use-haptics';
+import { TabBarMinimizeProvider } from '../tab-bar/context';
+import { BloomThemeProvider, type BloomThemeProviderProps } from '../theme';
+import { ScrollRestorationProvider } from '../scroll/context';
+import { expoRouterScrollAdapter } from '../scroll/expo-router';
+import type { BloomProviderProps } from './types';
+
+export function BloomProvider({
+  children,
+  imageResolver,
+  haptics = true,
+  ...themeProps
+}: BloomProviderProps) {
+  return (
+    // `value` is passed unconditionally (null when unset) so toggling a resolver
+    // never changes the tree shape and remounts everything below it.
+    <ImageResolverProvider value={imageResolver ?? null}>
+      <BloomThemeProvider {...themeProps}>
+        <ScrollRestorationProvider adapter={expoRouterScrollAdapter}>
+          <BloomHapticsProvider enabled={haptics}>
+            {/*
+              A PROVIDER, not an outlet, and the distinction is the one this
+              component's exclusion list encodes. Outlets stay out because a
+              second mount duplicates every surface they render; this renders NO
+              surface — a transparent container on Android and nothing at all
+              elsewhere — so a second mount duplicates nothing, and the nearest
+              one simply becomes the target for its subtree. Nor is its position
+              an app decision the way an outlet's is: it has no z-order and no
+              insets, and it must WRAP the content, which is exactly what this
+              provider already does with `children`.
+            */}
+            <GlassBlurTargetProvider>
+              <TabBarMinimizeProvider>{children}</TabBarMinimizeProvider>
+            </GlassBlurTargetProvider>
+          </BloomHapticsProvider>
+        </ScrollRestorationProvider>
+      </BloomThemeProvider>
+    </ImageResolverProvider>
+  );
+}
+
+BloomProvider.displayName = 'BloomProvider';

package/src/provider/index.ts

@@ -0,0 +1,4 @@
+export {
+  BloomProvider,
+} from './BloomProvider';
+export type { BloomProviderProps } from './types';

package/src/provider/types.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+import { type ImageResolver } from '../image-resolver';
+import { type BloomThemeProviderProps } from '../theme';
+
+export interface BloomProviderProps extends Omit<BloomThemeProviderProps, 'children'> {
+  children: ReactNode;
+  /**
+   * Resolves bare media identifiers (Oxy file ids) to loadable URLs for every
+   * Bloom surface that takes a `source` — `<Avatar>`, image galleries, cards.
+   * Typically `(id, variant) => oxyServices.getFileDownloadUrl(id, variant)`.
+   */
+  imageResolver?: ImageResolver;
+  /** `false` disables haptic feedback app-wide (honored by every `useHaptics()` call). */
+  haptics?: boolean;
+}