@oxyhq/bloom 0.2.3 → 0.3.1

package/src/__tests__/FontLoader.native.test.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { render } from '@testing-library/react-native';
+
+type UseFontsResult = readonly [boolean, Error | null];
+
+let mockUseFontsResult: UseFontsResult = [true, null];
+
+jest.mock('expo-font', () => ({
+  useFonts: () => mockUseFontsResult,
+}));
+
+import { FontLoader } from '../fonts/FontLoader.native';
+
+function setUseFontsResult(result: UseFontsResult): void {
+  mockUseFontsResult = result;
+}
+
+describe('FontLoader (native)', () => {
+  afterEach(() => {
+    setUseFontsResult([true, null]);
+  });
+
+  it('renders children when fonts are loaded and enabled', () => {
+    setUseFontsResult([true, null]);
+    const { getByText, queryByText } = render(
+      <FontLoader enabled fallback={<Text>fallback</Text>}>
+        <Text>content</Text>
+      </FontLoader>,
+    );
+    expect(getByText('content')).toBeTruthy();
+    expect(queryByText('fallback')).toBeNull();
+  });
+
+  it('renders fallback while fonts are loading and enabled', () => {
+    setUseFontsResult([false, null]);
+    const { getByText, queryByText } = render(
+      <FontLoader enabled fallback={<Text>fallback</Text>}>
+        <Text>content</Text>
+      </FontLoader>,
+    );
+    expect(getByText('fallback')).toBeTruthy();
+    expect(queryByText('content')).toBeNull();
+  });
+
+  it('renders null fallback by default while loading', () => {
+    setUseFontsResult([false, null]);
+    const { queryByText } = render(
+      <FontLoader enabled>
+        <Text>content</Text>
+      </FontLoader>,
+    );
+    expect(queryByText('content')).toBeNull();
+  });
+
+  it('renders children when disabled, regardless of load state', () => {
+    setUseFontsResult([false, null]);
+    const { getByText } = render(
+      <FontLoader enabled={false} fallback={<Text>fallback</Text>}>
+        <Text>content</Text>
+      </FontLoader>,
+    );
+    expect(getByText('content')).toBeTruthy();
+  });
+
+  it('renders children when disabled even with a loaded result', () => {
+    setUseFontsResult([true, null]);
+    const { getByText } = render(
+      <FontLoader enabled={false}>
+        <Text>content</Text>
+      </FontLoader>,
+    );
+    expect(getByText('content')).toBeTruthy();
+  });
+});

package/src/__tests__/Pre.test.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+
+import { BloomThemeProvider } from '../theme/BloomThemeProvider';
+import { Pre } from '../code';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<BloomThemeProvider mode="light">{ui}</BloomThemeProvider>);
+}
+
+describe('Pre', () => {
+  it('renders children', () => {
+    const { getByText } = renderWithTheme(<Pre>{`function foo() {}`}</Pre>);
+    expect(getByText('function foo() {}')).toBeTruthy();
+  });
+
+  it('applies the Geist Mono font family on native', () => {
+    const { getByText } = renderWithTheme(<Pre>bar</Pre>);
+    const node = getByText('bar');
+    const flat = Array.isArray(node.props.style)
+      ? Object.assign({}, ...node.props.style.filter(Boolean))
+      : node.props.style;
+    expect(flat.fontFamily).toBe('Geist Mono');
+  });
+});

package/src/__tests__/apply-font-faces.test.ts

@@ -0,0 +1,59 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { Platform } from 'react-native';
+import { applyFontFaces } from '../fonts/apply-font-faces';
+
+describe('applyFontFaces', () => {
+  const originalOS = Platform.OS;
+
+  beforeEach(() => {
+    document.head.innerHTML = '';
+    document.body.innerHTML = '';
+    Platform.OS = 'web';
+  });
+
+  afterAll(() => {
+    Platform.OS = originalOS;
+  });
+
+  it('injects a <style id="bloom-fonts"> element on first call', () => {
+    expect(document.getElementById('bloom-fonts')).toBeNull();
+    applyFontFaces();
+    const style = document.getElementById('bloom-fonts');
+    expect(style).not.toBeNull();
+    expect(style?.tagName).toBe('STYLE');
+  });
+
+  it('is idempotent — calling twice does not duplicate the <style>', () => {
+    applyFontFaces();
+    applyFontFaces();
+    applyFontFaces();
+    const styles = document.querySelectorAll('style#bloom-fonts');
+    expect(styles.length).toBe(1);
+  });
+
+  it('emits four @font-face rules', () => {
+    applyFontFaces();
+    const cssText = document.getElementById('bloom-fonts')?.textContent ?? '';
+    const matches = cssText.match(/@font-face\s*{/g) ?? [];
+    expect(matches.length).toBe(4);
+  });
+
+  it('declares the three Bloom font CSS variables on :root', () => {
+    applyFontFaces();
+    const cssText = document.getElementById('bloom-fonts')?.textContent ?? '';
+    expect(cssText).toMatch(/--bloom-font-display:/);
+    expect(cssText).toMatch(/--bloom-font-sans:/);
+    expect(cssText).toMatch(/--bloom-font-mono:/);
+  });
+
+  it('references all four font families by name', () => {
+    applyFontFaces();
+    const cssText = document.getElementById('bloom-fonts')?.textContent ?? '';
+    expect(cssText).toMatch(/font-family: 'BlomusModernus'/);
+    expect(cssText).toMatch(/font-family: 'Inter'/);
+    expect(cssText).toMatch(/font-family: 'Geist Mono'/);
+  });
+});

package/src/assets.d.ts

@@ -24,3 +24,23 @@ declare module '*.webp' {
   const value: number;
   export default value;
 }
+
+declare module '*.woff2' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.woff' {
+  const value: string;
+  export default value;
+}
+
+declare module '*.ttf' {
+  const value: number;
+  export default value;
+}
+
+declare module '*.otf' {
+  const value: number;
+  export default value;
+}

package/src/code/Code.tsx

@@ -0,0 +1,52 @@
+import React, { memo } from 'react';
+import {
+  Text as RNText,
+  type TextProps as RNTextProps,
+  Platform,
+  type StyleProp,
+  type TextStyle,
+} from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+
+export interface CodeProps extends RNTextProps {
+  style?: StyleProp<TextStyle>;
+}
+
+/**
+ * Inline monospace text — render as `<code>` on web (CSS var family) and
+ * `<Text fontFamily="Geist Mono">` on native.
+ */
+const CodeComponent = function Code({ children, style, ...rest }: CodeProps) {
+  const { colors } = useTheme();
+
+  if (Platform.OS === 'web') {
+    return React.createElement(
+      'code',
+      {
+        ...rest,
+        style: {
+          fontFamily: 'var(--bloom-font-mono)',
+          fontSize: '0.92em',
+          color: colors.text,
+          ...(style as object | undefined),
+        },
+      },
+      children,
+    );
+  }
+
+  return (
+    <RNText
+      {...rest}
+      style={[
+        { fontFamily: 'Geist Mono', fontSize: 13, color: colors.text },
+        style,
+      ]}>
+      {children}
+    </RNText>
+  );
+};
+
+export const Code = memo(CodeComponent);
+Code.displayName = 'Code';

package/src/code/Pre.tsx

@@ -0,0 +1,76 @@
+import React, { memo } from 'react';
+import {
+  Text as RNText,
+  View,
+  type TextProps as RNTextProps,
+  Platform,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+
+export interface PreProps extends Omit<RNTextProps, 'style'> {
+  containerStyle?: StyleProp<ViewStyle>;
+  style?: StyleProp<TextStyle>;
+}
+
+/**
+ * Block-level monospace text — render as `<pre>` on web (CSS var family)
+ * and `<View><Text fontFamily="Geist Mono"></View>` on native.
+ */
+const PreComponent = function Pre({
+  children,
+  containerStyle,
+  style,
+  ...rest
+}: PreProps) {
+  const { colors } = useTheme();
+
+  if (Platform.OS === 'web') {
+    return React.createElement(
+      'pre',
+      {
+        ...rest,
+        style: {
+          fontFamily: 'var(--bloom-font-mono)',
+          fontSize: '0.92em',
+          color: colors.text,
+          backgroundColor: colors.backgroundSecondary,
+          padding: '12px 16px',
+          borderRadius: 8,
+          overflow: 'auto',
+          margin: 0,
+          ...(containerStyle as object | undefined),
+          ...(style as object | undefined),
+        },
+      },
+      children,
+    );
+  }
+
+  return (
+    <View
+      style={[
+        {
+          backgroundColor: colors.backgroundSecondary,
+          padding: 12,
+          borderRadius: 8,
+        },
+        containerStyle,
+      ]}>
+      <RNText
+        {...rest}
+        style={[
+          { fontFamily: 'Geist Mono', fontSize: 13, color: colors.text },
+          style,
+        ]}>
+        {children}
+      </RNText>
+    </View>
+  );
+};
+
+export const Pre = memo(PreComponent);
+Pre.displayName = 'Pre';

package/src/code/index.ts

@@ -0,0 +1,4 @@
+export { Code } from './Code';
+export type { CodeProps } from './Code';
+export { Pre } from './Pre';
+export type { PreProps } from './Pre';

package/src/error-boundary/ErrorBoundary.tsx

@@ -1,7 +1,6 @@
 import React, { Component, type ErrorInfo, type ReactNode } from 'react';
 import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
 
-import { useTheme } from '../theme/use-theme';
 import type { ErrorBoundaryProps } from './types';
 
 interface ErrorBoundaryState {
@@ -9,6 +8,18 @@ interface ErrorBoundaryState {
   error: Error | null;
 }
 
+/**
+ * Default fallback UI used when an ErrorBoundary catches a render error.
+ *
+ * This component is the LAST line of defense — by the time it renders, the
+ * rest of the React tree has already crashed. It therefore MUST NOT depend
+ * on any other context provider (theme, navigation, router, etc.) because
+ * those providers may be unmounted, broken, or never have been part of
+ * the tree above the boundary.
+ *
+ * Use only literal styles and built-in React Native primitives. No hooks
+ * that read context, no upstream theming, no animation libraries.
+ */
 function DefaultFallback({
   title,
   message,
@@ -20,14 +31,12 @@ function DefaultFallback({
   retryLabel: string;
   onRetry: () => void;
 }) {
-  const theme = useTheme();
-
   return (
-    <View style={[styles.container, { backgroundColor: theme.colors.background }]}>
-      <Text style={[styles.title, { color: theme.colors.text }]}>{title}</Text>
-      <Text style={[styles.message, { color: theme.colors.textSecondary }]}>{message}</Text>
+    <View style={styles.container}>
+      <Text style={styles.title}>{title}</Text>
+      <Text style={styles.message}>{message}</Text>
       <TouchableOpacity
-        style={[styles.retryButton, { backgroundColor: theme.colors.primary }]}
+        style={styles.retryButton}
         onPress={onRetry}
         activeOpacity={0.7}
       >
@@ -77,18 +86,22 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
   }
 }
 
+// Literal colors only — must never depend on a theme provider. The neutral
+// palette is chosen to be readable on both light and dark device defaults.
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
     padding: 20,
+    backgroundColor: '#FFFFFF',
   },
   title: {
     fontSize: 24,
     fontWeight: 'bold',
     marginBottom: 12,
     textAlign: 'center',
+    color: '#111111',
   },
   message: {
     fontSize: 16,
@@ -96,6 +109,7 @@ const styles = StyleSheet.create({
     marginBottom: 24,
     lineHeight: 22,
     paddingHorizontal: 16,
+    color: '#555555',
   },
   retryButton: {
     paddingHorizontal: 24,
@@ -103,6 +117,7 @@ const styles = StyleSheet.create({
     borderRadius: 12,
     minWidth: 120,
     alignItems: 'center',
+    backgroundColor: '#0066FF',
   },
   retryText: {
     color: '#FFFFFF',

package/src/fonts/FontLoader.native.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useFonts } from 'expo-font';
+import { FONT_ASSETS } from './font-assets';
+
+export interface FontLoaderProps {
+  /**
+   * Whether to gate rendering on fonts being loaded. When false the
+   * component is a pass-through that still calls `useFonts` (the hook must
+   * run unconditionally per the Rules of Hooks).
+   */
+  enabled: boolean;
+  /** Rendered while native fonts load. Defaults to `null`. */
+  fallback?: React.ReactNode;
+  children: React.ReactNode;
+}
+
+/**
+ * Native font loader. Calls `expo-font`'s `useFonts` with the Bloom font
+ * asset map and gates `children` on the load result. The hook is invoked
+ * unconditionally — `enabled` only affects what's rendered, not whether
+ * fonts get loaded. This keeps Hook order stable across renders and means
+ * `<BloomThemeProvider fonts={false}>` still gets fonts pre-loaded if the
+ * provider tree ever flips `fonts` back on.
+ */
+export function FontLoader({ enabled, fallback, children }: FontLoaderProps) {
+  const [loaded] = useFonts(FONT_ASSETS);
+  if (!enabled) return <>{children}</>;
+  if (!loaded) return <>{fallback ?? null}</>;
+  return <>{children}</>;
+}

package/src/fonts/FontLoader.tsx

@@ -0,0 +1,37 @@
+import React, { useRef } from 'react';
+import { applyFontFaces } from './apply-font-faces';
+
+export interface FontLoaderProps {
+  /**
+   * Whether to load and inject the Bloom font system. When false, this
+   * component is a pass-through. Default true (set by `BloomThemeProvider`).
+   */
+  enabled: boolean;
+  /**
+   * Rendered while native fonts load. Ignored on web — the web variant
+   * applies CSS `@font-face` rules synchronously and uses `font-display: swap`
+   * to handle the FOUT period.
+   */
+  fallback?: React.ReactNode;
+  children: React.ReactNode;
+}
+
+/**
+ * Web font loader. Applies the Bloom `@font-face` rules and CSS variables
+ * to `:root` on first render, before the first paint, using the same
+ * `useRef`-during-render pattern as `BloomThemeProvider`'s color application.
+ *
+ * No `useEffect`: the side effect runs synchronously inside the render phase,
+ * gated by a ref so it only executes once. Subsequent renders short-circuit.
+ *
+ * Native consumers resolve `FontLoader.native.tsx` via the React Native /
+ * Metro bundler's platform extension resolution — they never load this file.
+ */
+export function FontLoader({ enabled, children }: FontLoaderProps) {
+  const applied = useRef(false);
+  if (enabled && !applied.current) {
+    applied.current = true;
+    applyFontFaces();
+  }
+  return <>{children}</>;
+}

package/src/fonts/apply-font-faces.ts

@@ -0,0 +1,42 @@
+/// <reference path="../assets.d.ts" />
+import { Platform } from 'react-native';
+import blomusReg from '../../assets/fonts/BlomusModernus-Regular.woff2';
+import blomusBold from '../../assets/fonts/BlomusModernus-Bold.woff2';
+import interVar from '../../assets/fonts/InterVariable.woff2';
+import geistMono from '../../assets/fonts/GeistMono-Variable.woff2';
+import { fontFamilies } from './tokens';
+
+const STYLE_ID = 'bloom-fonts';
+
+/**
+ * Inject @font-face rules and font CSS variables onto :root.
+ *
+ * No-op on native and when `document` is unavailable (SSR). Idempotent —
+ * safe to call multiple times; subsequent calls early-return after the
+ * `<style id="bloom-fonts">` tag has been mounted.
+ *
+ * Follows the same shape as `applyDarkClass` / `applyColorPresetVars`: a
+ * single file with an internal `Platform.OS` check rather than a `.web.ts` /
+ * `.native.ts` split. Bundlers strip the unreachable web import code path
+ * on native because the function body short-circuits before referencing the
+ * woff2 URLs.
+ */
+export function applyFontFaces(): void {
+  if (Platform.OS !== 'web' || typeof document === 'undefined') return;
+  if (document.getElementById(STYLE_ID)) return;
+
+  const style = document.createElement('style');
+  style.id = STYLE_ID;
+  style.textContent = `
+    @font-face { font-family: 'BlomusModernus'; src: url(${blomusReg}) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
+    @font-face { font-family: 'BlomusModernus'; src: url(${blomusBold}) format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
+    @font-face { font-family: 'Inter'; src: url(${interVar}) format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; }
+    @font-face { font-family: 'Geist Mono'; src: url(${geistMono}) format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; }
+    :root {
+      --bloom-font-display: ${fontFamilies.display};
+      --bloom-font-sans: ${fontFamilies.sans};
+      --bloom-font-mono: ${fontFamilies.mono};
+    }
+  `;
+  document.head.appendChild(style);
+}

package/src/fonts/font-assets.ts

@@ -0,0 +1,16 @@
+// Native font asset map for `useFonts(FONT_ASSETS)`.
+//
+// We ship variable .ttf files for Inter and Geist Mono (extracted from the
+// official rsms/inter and vercel/geist-font releases) so the same family name
+// covers all weights at runtime. `@fontsource(-variable)?/*` packages only
+// publish .woff2 for their variable axes — modern react-native font loading
+// requires .ttf, so we use the upstream variable TTFs instead. On web,
+// `apply-font-faces.ts` references the .woff2 variants directly and this file
+// is never imported.
+
+export const FONT_ASSETS = {
+  BlomusModernus: require('../../assets/fonts/BlomusModernus-Regular.ttf'),
+  'BlomusModernus-Bold': require('../../assets/fonts/BlomusModernus-Bold.ttf'),
+  Inter: require('../../assets/fonts/InterVariable.ttf'),
+  'Geist Mono': require('../../assets/fonts/GeistMono-Variable.ttf'),
+} as const;

package/src/fonts/index.ts

@@ -0,0 +1,6 @@
+export { fontFamilies, fontCssVars } from './tokens';
+export type { FontFamilyName } from './tokens';
+export { applyFontFaces } from './apply-font-faces';
+export { FONT_ASSETS } from './font-assets';
+export { FontLoader } from './FontLoader';
+export type { FontLoaderProps } from './FontLoader';

package/src/fonts/tokens.ts

@@ -0,0 +1,23 @@
+/**
+ * Font family tokens for the Bloom design system.
+ *
+ * `fontFamilies` resolves to CSS-style stacks (with system fallbacks) and is
+ * used to populate the `:root` custom properties on web and as the literal
+ * `fontFamily` string source on native.
+ *
+ * `fontCssVars` is the inverse map: name -> CSS custom property name.
+ */
+
+export const fontFamilies = {
+  display: 'BlomusModernus, Georgia, "Times New Roman", serif',
+  sans: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  mono: '"Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace',
+} as const;
+
+export const fontCssVars = {
+  display: '--bloom-font-display',
+  sans: '--bloom-font-sans',
+  mono: '--bloom-font-mono',
+} as const;
+
+export type FontFamilyName = keyof typeof fontFamilies;

package/src/index.ts

@@ -68,3 +68,9 @@ export * as Menu from './menu';
 export * as Tooltip from './tooltip';
 export * as Select from './select';
 export * as ContextMenu from './context-menu';
+
+// Code (mono)
+export * as Code from './code';
+
+// Fonts
+export * as Fonts from './fonts';

package/src/index.web.ts

@@ -73,3 +73,9 @@ export * as Menu from './menu/index.web';
 export * as Tooltip from './tooltip/index.web';
 export * as Select from './select/index.web';
 export * as ContextMenu from './context-menu/index.web';
+
+// Code (mono)
+export * as Code from './code';
+
+// Fonts
+export * as Fonts from './fonts';

package/src/theme/BloomThemeProvider.tsx

@@ -4,6 +4,7 @@ import { APP_COLOR_PRESETS, type AppColorName } from './color-presets';
 import { getAdaptiveColors } from './adaptive-colors';
 import { applyDarkClass, applyColorPresetVars } from './apply-dark-class';
 import { setColorSchemeSafe } from './set-color-scheme-safe';
+import { FontLoader } from '../fonts/FontLoader';
 import type { Theme, ThemeColors, ThemeMode } from './types';
 
 function hslVarToCSS(value: string): string {
@@ -112,6 +113,18 @@ export interface BloomThemeProviderProps {
   colorPreset?: AppColorName;
   onModeChange?: (mode: ThemeMode) => void;
   onColorPresetChange?: (preset: AppColorName) => void;
+  /**
+   * Load and inject the Bloom font system (BlomusModernus + Inter Variable
+   * + Geist Mono Variable). Default true. Set to false to opt out — e.g.
+   * apps that already ship their own font loader.
+   */
+  fonts?: boolean;
+  /**
+   * Rendered while native fonts load. Ignored on web. Useful for matching
+   * an app-level splash screen so consumers don't see a system-font flash
+   * before the bundled fonts resolve.
+   */
+  onFontsLoading?: React.ReactNode;
   children: React.ReactNode;
 }
 
@@ -120,6 +133,8 @@ export function BloomThemeProvider({
   colorPreset: controlledPreset,
   onModeChange,
   onColorPresetChange,
+  fonts = true,
+  onFontsLoading,
   children,
 }: BloomThemeProviderProps) {
   const rnScheme = useRNColorScheme();
@@ -175,7 +190,9 @@ export function BloomThemeProvider({
 
   return (
     <BloomThemeContext.Provider value={contextValue}>
-      {children}
+      <FontLoader enabled={fonts} fallback={onFontsLoading}>
+        {children}
+      </FontLoader>
     </BloomThemeContext.Provider>
   );
 }