@oxyhq/bloom 0.1.0

package/src/prompt-input/Textarea.web.tsx

@@ -0,0 +1,154 @@
+import React, { useCallback, useEffect, useImperativeHandle, useRef } from 'react';
+import {
+  TextInput,
+  View,
+  type NativeSyntheticEvent,
+  type TextInputContentSizeChangeEventData,
+  type TextInputKeyPressEventData,
+} from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import { usePromptInput } from './context';
+import type { PromptInputTextareaProps } from './types';
+
+export function PromptInputTextarea({
+  placeholder,
+  style,
+  inputStyle,
+  textInputProps,
+  testID,
+}: PromptInputTextareaProps) {
+  const {
+    value,
+    setValue,
+    onSubmit,
+    disabled,
+    textareaRef,
+    setCurrentHeight,
+    isFullscreen,
+    maxHeight,
+    onImagePaste,
+    handleCompletionKey,
+  } = usePromptInput();
+  const theme = useTheme();
+  const inputRef = useRef<TextInput>(null);
+  const wrapperRef = useRef<View>(null);
+
+  useImperativeHandle(textareaRef, () => inputRef.current as TextInput);
+
+  // Web-only: paste event listener for images
+  useEffect(() => {
+    if (!onImagePaste) return;
+
+    const handlePaste = (e: ClipboardEvent) => {
+      const activeElement = document.activeElement;
+      const wrapper = wrapperRef.current as unknown as HTMLElement | null;
+
+      if (!wrapper || !wrapper.contains(activeElement)) return;
+
+      const items = e.clipboardData?.items;
+      if (!items) return;
+
+      const imageFiles: File[] = [];
+      for (let i = 0; i < items.length; i++) {
+        const item = items[i]!;
+        if (item.type.indexOf('image') !== -1) {
+          const file = item.getAsFile();
+          if (file) imageFiles.push(file);
+        }
+      }
+
+      if (imageFiles.length > 0) {
+        e.preventDefault();
+        onImagePaste(imageFiles);
+      }
+    };
+
+    document.addEventListener('paste', handlePaste);
+    return () => document.removeEventListener('paste', handlePaste);
+  }, [onImagePaste]);
+
+  const handleKeyPress = useCallback(
+    (e: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
+      textInputProps?.onKeyPress?.(e);
+      const key = e.nativeEvent.key;
+
+      // Autocomplete key navigation
+      if (handleCompletionKey && ['ArrowUp', 'ArrowDown', 'Enter', 'Escape'].includes(key)) {
+        if (handleCompletionKey(key)) {
+          e.preventDefault();
+          return;
+        }
+      }
+
+      // Enter-to-submit (without Shift) when not in fullscreen
+      if (key === 'Enter' && !isFullscreen) {
+        const nativeEvent = e.nativeEvent as TextInputKeyPressEventData & { shiftKey?: boolean };
+        if (!nativeEvent.shiftKey) {
+          e.preventDefault();
+          onSubmit?.();
+        }
+      }
+    },
+    [handleCompletionKey, isFullscreen, onSubmit, textInputProps],
+  );
+
+  const handleContentSizeChange = useCallback(
+    (e: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => {
+      textInputProps?.onContentSizeChange?.(e);
+    },
+    [textInputProps],
+  );
+
+  const fieldSizingStyle = !isFullscreen
+    ? { fieldSizing: 'content', minHeight: 44, maxHeight, overflow: 'auto' }
+    : undefined;
+
+  const textInput = (
+    <View
+      ref={wrapperRef}
+      style={[{ width: '100%' }, isFullscreen && { flex: 1 }]}
+      onLayout={(e) => setCurrentHeight(e.nativeEvent.layout.height)}
+    >
+      <TextInput
+        ref={inputRef}
+        accessibilityLabel="Message input"
+        value={value}
+        onChangeText={setValue}
+        onSubmitEditing={onSubmit}
+        onKeyPress={handleKeyPress}
+        onContentSizeChange={handleContentSizeChange}
+        multiline
+        editable={!disabled}
+        scrollEnabled={isFullscreen}
+        placeholder={placeholder}
+        placeholderTextColor={theme.colors.textTertiary}
+        style={[
+          {
+            width: '100%',
+            fontSize: 16,
+            color: theme.colors.text,
+            paddingHorizontal: 14,
+            backgroundColor: 'transparent',
+            borderWidth: 0,
+          },
+          // Web-only: remove focus outline
+          { outlineStyle: 'none' } as Record<string, string>,
+          isFullscreen
+            ? { flex: 1, paddingTop: 16, paddingBottom: 100 }
+            : { paddingVertical: 12 },
+          fieldSizingStyle as Record<string, unknown>,
+          inputStyle,
+        ]}
+        testID={testID}
+        {...textInputProps}
+      />
+    </View>
+  );
+
+  if (isFullscreen) {
+    return <View style={[{ flex: 1 }, style]}>{textInput}</View>;
+  }
+
+  return <View style={style}>{textInput}</View>;
+}

package/src/prompt-input/context.ts

@@ -0,0 +1,59 @@
+import React, { createContext, useContext } from 'react';
+import type { TextInput as RNTextInput } from 'react-native';
+
+export interface Attachment {
+  id: string;
+  uri: string;
+  type: 'image' | 'document';
+  name: string;
+  size: number;
+  mimeType: string;
+  isLoading?: boolean;
+}
+
+export type PromptInputContextType = {
+  isLoading: boolean;
+  value: string;
+  setValue: (value: string) => void;
+  maxHeight: number;
+  onSubmit?: () => void;
+  disabled?: boolean;
+  textareaRef: React.RefObject<RNTextInput | null>;
+  currentHeight: number;
+  setCurrentHeight: (height: number) => void;
+  isFullscreen: boolean;
+  onImagePaste?: (files: File[]) => void;
+  attachments: Attachment[];
+  addAttachment: (attachment: Attachment) => void;
+  removeAttachment: (id: string) => void;
+  updateAttachment: (id: string, updates: Partial<Attachment>) => void;
+  handleCompletionKey: ((key: string) => boolean) | null;
+  setHandleCompletionKey: (fn: ((key: string) => boolean) | null) => void;
+};
+
+export const PromptInputContext = createContext<PromptInputContextType>({
+  isLoading: false,
+  value: '',
+  setValue: () => {},
+  maxHeight: 240,
+  onSubmit: undefined,
+  disabled: false,
+  textareaRef: React.createRef<RNTextInput>(),
+  currentHeight: 44,
+  setCurrentHeight: () => {},
+  isFullscreen: false,
+  attachments: [],
+  addAttachment: () => {},
+  removeAttachment: () => {},
+  updateAttachment: () => {},
+  handleCompletionKey: null,
+  setHandleCompletionKey: () => {},
+});
+
+export function usePromptInput(): PromptInputContextType {
+  return useContext(PromptInputContext);
+}
+
+export function useIsFullscreen(): boolean {
+  return useContext(PromptInputContext).isFullscreen;
+}

package/src/prompt-input/index.ts

@@ -0,0 +1,18 @@
+export { PromptInput } from './PromptInput';
+export { PromptInputTextarea } from './Textarea';
+export { PromptInputActions } from './Actions';
+export { PromptInputAttachments } from './Attachments';
+export { PromptInputSubmitButton } from './SubmitButton';
+export {
+  usePromptInput,
+  useIsFullscreen,
+  type Attachment,
+  type PromptInputContextType,
+} from './context';
+export type {
+  PromptInputProps,
+  PromptInputTextareaProps,
+  PromptInputSubmitButtonProps,
+  PromptInputActionsProps,
+  PromptInputAttachmentsProps,
+} from './types';

package/src/prompt-input/types.ts

@@ -0,0 +1,92 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle, TextStyle, TextInputProps } from 'react-native';
+import type { Attachment } from './context';
+
+export interface PromptInputProps {
+  /** Whether the AI is currently generating a response */
+  isLoading?: boolean;
+  /** Controlled text value */
+  value?: string;
+  /** Callback when text value changes */
+  onValueChange?: (value: string) => void;
+  /** Max height for the textarea before scrolling (defaults to 240) */
+  maxHeight?: number;
+  /** Called when user submits the prompt */
+  onSubmit?: () => void;
+  /** Compound mode children (overrides simple mode) */
+  children?: ReactNode;
+  /** Container style */
+  style?: StyleProp<ViewStyle>;
+  /** Whether the input is disabled */
+  disabled?: boolean;
+  /** Web-only: callback when images are pasted */
+  onImagePaste?: (files: File[]) => void;
+  /** Simple mode: placeholder text */
+  placeholder?: string;
+  /** Custom left-side actions in the actions bar */
+  actionsLeft?: ReactNode;
+  /** Called when user presses stop during loading */
+  onStop?: () => void;
+  /** Rendered when input is empty and not loading (e.g., mic button) */
+  emptyAction?: ReactNode;
+  /** Controlled attachments */
+  attachments?: Attachment[];
+  /** Callback to add an attachment */
+  onAddAttachment?: (attachment: Attachment) => void;
+  /** Callback to remove an attachment */
+  onRemoveAttachment?: (id: string) => void;
+  /** Callback to update an attachment */
+  onUpdateAttachment?: (id: string, updates: Partial<Attachment>) => void;
+  /** Skip the inner KeyboardAvoidingView (use when outer keyboard handling exists) */
+  disableKeyboardAvoidance?: boolean;
+  /** Icon shown on the expand button (defaults to text "⤢") */
+  expandIcon?: ReactNode;
+  /** Icon shown on the collapse button in fullscreen (defaults to text "⤡") */
+  collapseIcon?: ReactNode;
+  testID?: string;
+}
+
+export interface PromptInputTextareaProps {
+  /** Placeholder text */
+  placeholder?: string;
+  /** Container style */
+  style?: StyleProp<ViewStyle>;
+  /** Text input style */
+  inputStyle?: StyleProp<TextStyle>;
+  /** Additional TextInput props */
+  textInputProps?: Omit<TextInputProps, 'value' | 'onChangeText' | 'multiline' | 'editable'>;
+  testID?: string;
+}
+
+export interface PromptInputSubmitButtonProps {
+  /** Whether the AI is currently generating */
+  isLoading?: boolean;
+  /** Called when user presses stop */
+  onStop?: () => void;
+  /** Rendered when input is empty and not loading */
+  emptyAction?: ReactNode;
+  /** Custom submit icon (defaults to "↑" text) */
+  submitIcon?: ReactNode;
+  /** Custom stop icon (defaults to "■" text) */
+  stopIcon?: ReactNode;
+  /** Container style */
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export interface PromptInputActionsProps {
+  children: ReactNode;
+  /** Container style */
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export interface PromptInputAttachmentsProps {
+  /** Custom remove button icon (defaults to "×" text) */
+  removeIcon?: ReactNode;
+  /** Custom render function for document type icons */
+  renderDocumentIcon?: (mimeType: string, name: string) => ReactNode;
+  /** Container style */
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/radio-indicator/RadioIndicator.tsx

@@ -0,0 +1,52 @@
+import React, { memo } from 'react';
+import { View } from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import type { RadioIndicatorProps } from './types';
+
+const RadioIndicatorComponent: React.FC<RadioIndicatorProps> = ({
+  selected,
+  size = 20,
+  selectedColor,
+  borderColor,
+  style,
+  testID,
+}) => {
+  const theme = useTheme();
+  const resolvedSelectedColor = selectedColor ?? theme.colors.primary;
+  const resolvedBorderColor = borderColor ?? theme.colors.border;
+  const dotSize = size * 0.5;
+
+  return (
+    <View
+      testID={testID}
+      style={[
+        {
+          width: size,
+          height: size,
+          borderRadius: size / 2,
+          borderWidth: selected ? 0 : 2,
+          borderColor: selected ? undefined : resolvedBorderColor,
+          backgroundColor: selected ? resolvedSelectedColor : 'transparent',
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+        style,
+      ]}
+    >
+      {selected && (
+        <View
+          style={{
+            width: dotSize,
+            height: dotSize,
+            borderRadius: dotSize / 2,
+            backgroundColor: '#FFFFFF',
+          }}
+        />
+      )}
+    </View>
+  );
+};
+
+export const RadioIndicator = memo(RadioIndicatorComponent);
+RadioIndicator.displayName = 'RadioIndicator';

package/src/radio-indicator/index.ts

@@ -0,0 +1,2 @@
+export { RadioIndicator } from './RadioIndicator';
+export type { RadioIndicatorProps } from './types';

package/src/radio-indicator/types.ts

@@ -0,0 +1,15 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export interface RadioIndicatorProps {
+  /** Whether the radio is selected */
+  selected: boolean;
+  /** Outer circle size in pixels (defaults to 20) */
+  size?: number;
+  /** Color when selected (defaults to theme.colors.primary) */
+  selectedColor?: string;
+  /** Border color when unselected (defaults to theme.colors.border) */
+  borderColor?: string;
+  /** Custom style */
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/theme/BloomThemeProvider.tsx

@@ -0,0 +1,160 @@
+import React, { createContext, useCallback, useEffect, useMemo } from 'react';
+import { useColorScheme as useRNColorScheme, Platform } from 'react-native';
+import { APP_COLOR_PRESETS, type AppColorName } from './color-presets';
+import { getAdaptiveColors } from './adaptive-colors';
+import { applyDarkClass } from './apply-dark-class';
+import { setColorSchemeSafe } from './set-color-scheme-safe';
+import type { Theme, ThemeColors, ThemeMode } from './types';
+
+function hslVarToCSS(value: string): string {
+  const parts = value.split('/').map((s) => s.trim());
+  if (parts.length === 2) {
+    const alpha = parseFloat(parts[1]!) / 100;
+    return `hsla(${parts[0]!.replace(/ /g, ', ')}, ${alpha})`;
+  }
+  return `hsl(${value.replace(/ /g, ', ')})`;
+}
+
+function extractHue(hslVar: string): number {
+  return parseInt(hslVar.split(' ')[0]!, 10);
+}
+
+function hsl(h: number, s: number, l: number): string {
+  return `hsl(${h}, ${s}%, ${l}%)`;
+}
+
+export interface BloomThemeContextValue {
+  theme: Theme;
+  mode: ThemeMode;
+  colorPreset: AppColorName;
+  setMode: (mode: ThemeMode) => void;
+  setColorPreset: (preset: AppColorName) => void;
+}
+
+export const BloomThemeContext = createContext<BloomThemeContextValue | null>(null);
+
+export interface BloomThemeProviderProps {
+  mode?: ThemeMode;
+  colorPreset?: AppColorName;
+  onModeChange?: (mode: ThemeMode) => void;
+  onColorPresetChange?: (preset: AppColorName) => void;
+  children: React.ReactNode;
+}
+
+export function BloomThemeProvider({
+  mode: controlledMode,
+  colorPreset: controlledPreset,
+  onModeChange,
+  onColorPresetChange,
+  children,
+}: BloomThemeProviderProps) {
+  const rnScheme = useRNColorScheme();
+
+  const mode = controlledMode ?? 'system';
+  const appColor = controlledPreset ?? 'teal';
+
+  const isAdaptive = mode === 'adaptive';
+  const effectiveMode = isAdaptive ? 'system' : mode;
+  const resolved: 'light' | 'dark' =
+    effectiveMode === 'system'
+      ? (rnScheme === 'dark' ? 'dark' : 'light')
+      : effectiveMode;
+
+  useEffect(() => {
+    applyDarkClass(resolved);
+  }, [resolved]);
+
+  const setMode = useCallback(
+    (newMode: ThemeMode) => {
+      setColorSchemeSafe(newMode);
+      onModeChange?.(newMode);
+    },
+    [onModeChange],
+  );
+
+  const setColorPreset = useCallback(
+    (preset: AppColorName) => {
+      onColorPresetChange?.(preset);
+    },
+    [onColorPresetChange],
+  );
+
+  const contextValue = useMemo<BloomThemeContextValue>(() => {
+    const isDark = resolved === 'dark';
+
+    let themeColors: ThemeColors;
+
+    if (isAdaptive && Platform.OS !== 'web') {
+      const adaptive = getAdaptiveColors();
+      if (adaptive) {
+        themeColors = adaptive;
+      }
+    }
+
+    if (!themeColors!) {
+      const preset = APP_COLOR_PRESETS[appColor];
+      const vars = resolved === 'light' ? preset.light : preset.dark;
+      const primaryHue = extractHue(vars['--primary']!);
+      const destructiveHue = extractHue(vars['--destructive']!);
+
+      const surface = hslVarToCSS(vars['--surface']!);
+      const background = hslVarToCSS(vars['--background']!);
+      const mutedForeground = hslVarToCSS(vars['--muted-foreground']!);
+
+      themeColors = {
+        background,
+        backgroundSecondary: surface,
+        backgroundTertiary: hslVarToCSS(vars['--muted']!),
+
+        text: hslVarToCSS(vars['--foreground']!),
+        textSecondary: mutedForeground,
+        textTertiary: mutedForeground,
+
+        border: hslVarToCSS(vars['--border']!),
+        borderLight: hslVarToCSS(vars['--input']!),
+
+        primary: preset.hex,
+        primaryLight: surface,
+        primaryDark: background,
+
+        secondary: preset.hex,
+
+        tint: preset.hex,
+        icon: mutedForeground,
+        iconActive: preset.hex,
+
+        success: '#10B981',
+        error: '#EF4444',
+        warning: '#F59E0B',
+        info: '#3B82F6',
+
+        primarySubtle: isDark ? hsl(primaryHue, 50, 10) : hsl(primaryHue, 70, 93),
+        primarySubtleForeground: isDark ? hsl(primaryHue, 70, 65) : hsl(primaryHue, 90, 25),
+        negative: hsl(destructiveHue, 84, 45),
+        negativeForeground: '#FFFFFF',
+        negativeSubtle: isDark ? hsl(destructiveHue, 50, 10) : hsl(destructiveHue, 90, 95),
+        negativeSubtleForeground: isDark ? hsl(destructiveHue, 70, 65) : hsl(destructiveHue, 80, 40),
+        contrast50: isDark ? hsl(primaryHue, 15, 12) : hsl(primaryHue, 10, 93),
+
+        card: surface,
+        shadow: isDark ? 'rgba(0, 0, 0, 0.3)' : 'rgba(0, 0, 0, 0.1)',
+        overlay: 'rgba(0, 0, 0, 0.5)',
+      };
+    }
+
+    const theme: Theme = {
+      mode: resolved,
+      colors: themeColors,
+      isDark,
+      isLight: !isDark,
+    };
+
+    return { theme, mode, colorPreset: appColor, setMode, setColorPreset };
+  }, [resolved, appColor, isAdaptive, mode, setMode, setColorPreset]);
+
+  return (
+    <BloomThemeContext.Provider value={contextValue}>
+      {children}
+    </BloomThemeContext.Provider>
+  );
+}

package/src/theme/adaptive-colors.ts

@@ -0,0 +1,90 @@
+import { Platform } from 'react-native';
+import type { ThemeColors } from './types';
+
+const c = (v: unknown): string => v as string;
+
+function getAndroidColors(): ThemeColors | null {
+  try {
+    const { Color } = require('expo-router');
+    const d = Color.android.dynamic;
+    return {
+      background: c(d.surface),
+      backgroundSecondary: c(d.surfaceContainerLow),
+      backgroundTertiary: c(d.surfaceContainer),
+      text: c(d.onSurface),
+      textSecondary: c(d.onSurfaceVariant),
+      textTertiary: c(d.outline),
+      border: c(d.outlineVariant),
+      borderLight: c(d.outline),
+      primary: c(d.primary),
+      primaryLight: c(d.primaryContainer),
+      primaryDark: c(d.onPrimaryContainer),
+      secondary: c(d.secondary),
+      tint: c(d.primary),
+      icon: c(d.onSurfaceVariant),
+      iconActive: c(d.primary),
+      success: '#10B981',
+      error: '#EF4444',
+      warning: '#F59E0B',
+      info: '#3B82F6',
+      primarySubtle: c(d.primaryContainer),
+      primarySubtleForeground: c(d.onPrimaryContainer),
+      negative: '#B91C1C',
+      negativeForeground: '#FFFFFF',
+      negativeSubtle: c(d.errorContainer),
+      negativeSubtleForeground: c(d.onErrorContainer),
+      contrast50: c(d.surfaceContainerLow),
+      card: c(d.surfaceContainerLow),
+      shadow: 'rgba(0, 0, 0, 0.2)',
+      overlay: 'rgba(0, 0, 0, 0.5)',
+    };
+  } catch {
+    return null;
+  }
+}
+
+function getIOSColors(): ThemeColors | null {
+  try {
+    const { Color } = require('expo-router');
+    const i = Color.ios;
+    return {
+      background: c(i.systemBackground),
+      backgroundSecondary: c(i.secondarySystemBackground),
+      backgroundTertiary: c(i.tertiarySystemBackground),
+      text: c(i.label),
+      textSecondary: c(i.secondaryLabel),
+      textTertiary: c(i.tertiaryLabel),
+      border: c(i.separator),
+      borderLight: c(i.opaqueSeparator),
+      primary: c(i.systemBlue),
+      primaryLight: c(i.systemGray6),
+      primaryDark: c(i.systemBlue),
+      secondary: c(i.systemPurple),
+      tint: c(i.systemBlue),
+      icon: c(i.secondaryLabel),
+      iconActive: c(i.systemBlue),
+      success: c(i.systemGreen),
+      error: c(i.systemRed),
+      warning: c(i.systemOrange),
+      info: c(i.systemBlue),
+      primarySubtle: c(i.systemGray6),
+      primarySubtleForeground: c(i.systemBlue),
+      negative: c(i.systemRed),
+      negativeForeground: '#FFFFFF',
+      negativeSubtle: c(i.systemGray6),
+      negativeSubtleForeground: c(i.systemRed),
+      contrast50: c(i.systemGray6),
+      card: c(i.secondarySystemBackground),
+      shadow: 'rgba(0, 0, 0, 0.15)',
+      overlay: 'rgba(0, 0, 0, 0.5)',
+    };
+  } catch {
+    return null;
+  }
+}
+
+export function getAdaptiveColors(): ThemeColors | null {
+  if (Platform.OS === 'android') return getAndroidColors();
+  if (Platform.OS === 'ios') return getIOSColors();
+  return null;
+}

package/src/theme/apply-dark-class.ts

@@ -0,0 +1,7 @@
+import { Platform } from 'react-native';
+
+export function applyDarkClass(resolved: 'light' | 'dark') {
+  if (Platform.OS === 'web' && typeof document !== 'undefined') {
+    document.documentElement.classList.toggle('dark', resolved === 'dark');
+  }
+}