@oxy.so/services 1.0.0

package/src/ui/components/RequireOxyAuth.tsx

@@ -0,0 +1,266 @@
+/**
+ * RequireOxyAuth — the optional signed-out gate primitive (React Native).
+ *
+ * ONE shared way for any Oxy app to opt into a signed-out gate. It is entirely
+ * OPTIONAL: a public app renders its children untouched (`prompt="off"`); an
+ * auth-required app blocks them behind a signed-out state (`prompt="hard"`); an
+ * app that mostly works signed-out but wants a nudge shows a dismissible banner
+ * (`prompt="soft"`). Every mode reuses the ONE account dialog the provider
+ * already mounts — opening the sign-in surface is always
+ * `useOxy().openAccountDialog('signin')`; there is NO second dialog.
+ *
+ * Readiness gating (CRITICAL): the gate keys on the SDK's own readiness state
+ * (`useOxy().canUsePrivateApi` / `isPrivateApiPending`), NEVER on app-local
+ * hooks. While auth is still resolving (`isPrivateApiPending`) it renders a
+ * neutral loading state so the signed-out wall never flashes before the
+ * device-first cold boot concludes (the documented cold-boot race).
+ *
+ * Styling follows the sibling `OxyAccountDialogScreen`/`OxySignInButton` pattern —
+ * `useTheme()` + `StyleSheet` (NOT NativeWind), so the gate renders correctly in
+ * EVERY consumer, including apps that do not run NativeWind (e.g. the accounts
+ * app).
+ */
+
+import type React from 'react';
+import { useState, type ReactNode } from 'react';
+import { ActivityIndicator, Pressable, StyleSheet, View } from 'react-native';
+import { useTheme } from '@oxy.so/bloom/theme';
+import { Text } from '@oxy.so/bloom/typography';
+import { useOxy } from '../context/OxyContext';
+import { OxySignInButton } from './OxySignInButton';
+import { LogoIcon } from './logo/LogoIcon';
+
+/**
+ * How `RequireOxyAuth` treats a signed-out (or still-resolving) session.
+ *  - `off`  — always render children (public app; a no-op provided for symmetry).
+ *  - `soft` — render children, plus a dismissible sign-in banner when signed out.
+ *  - `hard` — block children behind a centered signed-out state until signed in.
+ */
+export type RequireOxyAuthPrompt = 'off' | 'soft' | 'hard';
+
+export interface RequireOxyAuthProps {
+  children: ReactNode;
+  /** Gate behavior. @default 'hard' */
+  prompt?: RequireOxyAuthPrompt;
+  /** Replaces the neutral loading UI shown while auth is still resolving. */
+  loadingFallback?: ReactNode;
+  /** Replaces the entire default signed-out wall (`prompt="hard"`). */
+  signedOutFallback?: ReactNode;
+  /** Title for the default `prompt="hard"` wall. */
+  title?: string;
+  /** Subtitle for the default `prompt="hard"` wall. */
+  subtitle?: string;
+  /** Message for the `prompt="soft"` banner. */
+  bannerMessage?: string;
+  /** CTA label for the `prompt="soft"` banner. */
+  bannerActionLabel?: string;
+}
+
+const DEFAULT_TITLE = 'Sign in to continue';
+const DEFAULT_SUBTITLE = 'Sign in with your Oxy account to continue.';
+const DEFAULT_BANNER_MESSAGE = "You're browsing signed out.";
+const DEFAULT_BANNER_ACTION = 'Sign in';
+
+/**
+ * Optional signed-out gate. Wrap any subtree (or the whole app via the
+ * provider's `requireAuth` prop) to opt into a shared, readiness-safe wall.
+ */
+export const RequireOxyAuth: React.FC<RequireOxyAuthProps> = ({
+  children,
+  prompt = 'hard',
+  loadingFallback,
+  signedOutFallback,
+  title,
+  subtitle,
+  bannerMessage,
+  bannerActionLabel,
+}) => {
+  const { canUsePrivateApi, isPrivateApiPending, openAccountDialog } = useOxy();
+
+  // Public app: render straight through. Cheap enough to short-circuit before
+  // touching any gate UI.
+  if (prompt === 'off') {
+    return <>{children}</>;
+  }
+
+  // Signed in (and token ready): render the protected subtree in every mode.
+  if (canUsePrivateApi) {
+    return <>{children}</>;
+  }
+
+  if (prompt === 'soft') {
+    return (
+      <SoftGate
+        pending={isPrivateApiPending}
+        message={bannerMessage ?? DEFAULT_BANNER_MESSAGE}
+        actionLabel={bannerActionLabel ?? DEFAULT_BANNER_ACTION}
+        onSignIn={() => openAccountDialog('signin')}
+      >
+        {children}
+      </SoftGate>
+    );
+  }
+
+  // prompt === 'hard'
+  if (isPrivateApiPending) {
+    return loadingFallback ? <>{loadingFallback}</> : <NeutralLoading />;
+  }
+  if (signedOutFallback) {
+    return <>{signedOutFallback}</>;
+  }
+  return <HardWall title={title ?? DEFAULT_TITLE} subtitle={subtitle ?? DEFAULT_SUBTITLE} />;
+};
+
+// ---------------------------------------------------------------------------
+// Soft gate — children + a dismissible sign-in banner while signed out.
+// ---------------------------------------------------------------------------
+
+interface SoftGateProps {
+  children: ReactNode;
+  pending: boolean;
+  message: string;
+  actionLabel: string;
+  onSignIn: () => void;
+}
+
+const SoftGate: React.FC<SoftGateProps> = ({ children, pending, message, actionLabel, onSignIn }) => {
+  const theme = useTheme();
+  const [dismissed, setDismissed] = useState(false);
+
+  // Never surface the nudge while auth is still resolving — only once the boot
+  // has concluded signed out and the user has not dismissed it.
+  const showBanner = !pending && !dismissed;
+
+  return (
+    <View style={styles.softRoot}>
+      {showBanner ? (
+        <View style={[styles.banner, { backgroundColor: theme.colors.card, borderColor: theme.colors.border }]}>
+          <LogoIcon height={20} color={theme.colors.primary} />
+          <Text style={[styles.bannerText, { color: theme.colors.text }]} numberOfLines={2}>
+            {message}
+          </Text>
+          <Pressable
+            onPress={onSignIn}
+            style={[styles.bannerCta, { backgroundColor: theme.colors.primary }]}
+            accessibilityRole="button"
+            accessibilityLabel={actionLabel}
+          >
+            <Text style={styles.bannerCtaText}>{actionLabel}</Text>
+          </Pressable>
+          <Pressable
+            onPress={() => setDismissed(true)}
+            style={styles.bannerDismiss}
+            accessibilityRole="button"
+            accessibilityLabel="Dismiss"
+            hitSlop={8}
+          >
+            <Text style={[styles.bannerDismissText, { color: theme.colors.textSecondary }]}>✕</Text>
+          </Pressable>
+        </View>
+      ) : null}
+      <View style={styles.softBody}>{children}</View>
+    </View>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// Hard wall — centered signed-out state with the "Sign in with Oxy" CTA.
+// ---------------------------------------------------------------------------
+
+const HardWall: React.FC<{ title: string; subtitle: string }> = ({ title, subtitle }) => {
+  const theme = useTheme();
+  return (
+    <View style={[styles.wallRoot, { backgroundColor: theme.colors.background }]}>
+      <View style={[styles.logoBadge, { backgroundColor: theme.colors.primarySubtle }]}>
+        <LogoIcon height={44} color={theme.colors.primary} />
+      </View>
+      <Text style={[styles.wallTitle, { color: theme.colors.text }]}>{title}</Text>
+      <Text style={[styles.wallSubtitle, { color: theme.colors.textSecondary }]}>{subtitle}</Text>
+      <OxySignInButton variant="contained" style={styles.wallCta} />
+    </View>
+  );
+};
+
+const NeutralLoading: React.FC = () => {
+  const theme = useTheme();
+  return (
+    <View style={[styles.wallRoot, { backgroundColor: theme.colors.background }]}>
+      <ActivityIndicator color={theme.colors.primary} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  softRoot: {
+    flex: 1,
+  },
+  softBody: {
+    flex: 1,
+  },
+  banner: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+  bannerText: {
+    flex: 1,
+    fontSize: 13.5,
+  },
+  bannerCta: {
+    paddingVertical: 6,
+    paddingHorizontal: 14,
+    borderRadius: 999,
+  },
+  bannerCtaText: {
+    color: '#FFFFFF',
+    fontSize: 13,
+    fontWeight: '700',
+  },
+  bannerDismiss: {
+    width: 28,
+    height: 28,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  bannerDismissText: {
+    fontSize: 15,
+    fontWeight: '600',
+  },
+  wallRoot: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 24,
+    gap: 16,
+  },
+  logoBadge: {
+    width: 88,
+    height: 88,
+    borderRadius: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 4,
+  },
+  wallTitle: {
+    fontSize: 24,
+    fontWeight: '800',
+    letterSpacing: -0.4,
+    textAlign: 'center',
+  },
+  wallSubtitle: {
+    fontSize: 15,
+    lineHeight: 21,
+    textAlign: 'center',
+    maxWidth: 340,
+  },
+  wallCta: {
+    marginTop: 8,
+    width: '100%',
+    maxWidth: 320,
+  },
+});
+
+export default RequireOxyAuth;

package/src/ui/components/SettingsIcon.tsx

@@ -0,0 +1,44 @@
+import type React from 'react';
+import { memo } from 'react';
+import { View, StyleSheet } from 'react-native';
+import MaterialCommunityIcons from '../icons/MaterialCommunityIcons';
+import { darkenColor } from '../utils/colorUtils';
+
+interface SettingsIconProps {
+    /** MaterialCommunityIcons icon name */
+    name: React.ComponentProps<typeof MaterialCommunityIcons>['name'];
+    /** Background color for the circle */
+    color: string;
+    /** Icon size (default 14, fits bloom's 20x20 container) */
+    iconSize?: number;
+    /** Container size (default 20, matches bloom SettingsListItem icon slot) */
+    size?: number;
+}
+
+/**
+ * Compact colored-circle icon for use with bloom's SettingsListItem.
+ * Renders a MaterialCommunityIcons glyph inside a tinted circle,
+ * sized to fit bloom's 20x20 icon container.
+ */
+const SettingsIconComponent: React.FC<SettingsIconProps> = ({
+    name,
+    color,
+    iconSize = 14,
+    size = 20,
+}) => (
+    <View style={[styles.circle, { width: size, height: size, borderRadius: size / 2, backgroundColor: color }]}>
+        <MaterialCommunityIcons name={name} size={iconSize} color={darkenColor(color)} />
+    </View>
+);
+
+SettingsIconComponent.displayName = 'SettingsIcon';
+
+export const SettingsIcon = memo(SettingsIconComponent);
+export default SettingsIcon;
+
+const styles = StyleSheet.create({
+    circle: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+});

package/src/ui/components/SurfaceHeaderAction.tsx

@@ -0,0 +1,60 @@
+import type React from 'react';
+import { ActivityIndicator, StyleSheet } from 'react-native';
+import { useTheme } from '@oxy.so/bloom/theme';
+import { PressableScale } from '@oxy.so/bloom/pressable-scale';
+import { Text } from '@oxy.so/bloom/typography';
+
+export interface SurfaceHeaderActionProps {
+  /** Button label (e.g. a translated "Save"). */
+  label: string;
+  onPress: () => void;
+  /** Show a spinner instead of the label (also disables the button). */
+  loading?: boolean;
+  disabled?: boolean;
+}
+
+/**
+ * A filled pill action for a surface's nav-header right slot — the canonical
+ * "Save" affordance. Pass a memoized instance to `useSurfaceHeader({ right })`
+ * so the header does not thrash between renders.
+ */
+export const SurfaceHeaderAction: React.FC<SurfaceHeaderActionProps> = ({
+  label,
+  onPress,
+  loading,
+  disabled,
+}) => {
+  const { colors } = useTheme();
+  const isDisabled = disabled || loading;
+  return (
+    <PressableScale
+      onPress={onPress}
+      disabled={isDisabled}
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      style={[styles.button, { backgroundColor: colors.primary, opacity: isDisabled ? 0.5 : 1 }]}
+    >
+      {loading ? (
+        <ActivityIndicator size="small" color={colors.primaryForeground} />
+      ) : (
+        <Text style={[styles.label, { color: colors.primaryForeground }]}>{label}</Text>
+      )}
+    </PressableScale>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    height: 36,
+    minWidth: 64,
+    paddingHorizontal: 14,
+    borderRadius: 18,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: '600',
+    letterSpacing: -0.2,
+  },
+});

package/src/ui/components/SurfaceScreen.tsx

@@ -0,0 +1,284 @@
+import React, { Suspense, useCallback, useEffect, useMemo, useState, type ErrorInfo } from 'react';
+import { ActivityIndicator, StyleSheet, Text, View, useWindowDimensions } from 'react-native';
+import { useStore } from 'zustand';
+import { useTheme } from '@oxy.so/bloom/theme';
+import {
+  useDialogFrame,
+  useDialogHeader,
+  type DialogHeaderConfig,
+} from '@oxy.so/bloom/dialog';
+import type { SurfaceControls } from '@oxy.so/bloom/surfaces';
+import type { RouteName } from '../navigation/routes';
+import { getScreenComponent } from '../navigation/routes';
+import { pushSurfaceBackHandler } from '../navigation/surfaceBackBridge';
+import type { SurfaceNavStack } from '../navigation/surfaceNavStack';
+import { getSurfaceConfig } from '../navigation/surfaceRegistry';
+import {
+  closeAllRouteSurfaces,
+  navigateWithinOrPresent,
+  presentRoute,
+  replaceWithinOrPresent,
+} from '../navigation/surfaces';
+import {
+  SurfaceHeaderContext,
+  type SurfaceHeaderContent,
+} from '../hooks/useSurfaceHeader';
+import type { BaseScreenProps } from '../types/navigation';
+
+/** Error boundary catching screen render failures, so one bad screen cannot blank the surface. */
+interface ScreenErrorBoundaryState {
+  error: Error | null;
+}
+
+class ScreenErrorBoundary extends React.Component<
+  { screenName: string; children: React.ReactNode },
+  ScreenErrorBoundaryState
+> {
+  state: ScreenErrorBoundaryState = { error: null };
+
+  static getDerivedStateFromError(error: Error): ScreenErrorBoundaryState {
+    return { error };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo): void {
+    if (__DEV__) {
+      console.error(
+        `[SurfaceScreen] Screen "${this.props.screenName}" crashed:`,
+        error,
+        info.componentStack,
+      );
+    }
+  }
+
+  componentDidUpdate(prevProps: { screenName: string }): void {
+    if (prevProps.screenName !== this.props.screenName && this.state.error) {
+      this.setState({ error: null });
+    }
+  }
+
+  render(): React.ReactNode {
+    if (this.state.error) {
+      return (
+        <View style={errorStyles.container}>
+          <Text style={errorStyles.title}>Something went wrong</Text>
+          {__DEV__ && <Text style={errorStyles.message}>{this.state.error.message}</Text>}
+        </View>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+/** The body fill shared by the two states that replace a screen: crashed, and not loaded yet. */
+const errorStyles = StyleSheet.create({
+  container: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 24 },
+  title: { fontSize: 16, fontWeight: '600', marginBottom: 8 },
+  message: { fontSize: 13, textAlign: 'center' },
+});
+
+/**
+ * Shown while a route's screen module is still loading. Screens are registered
+ * as `lazy(() => import(...))` (see `../navigation/routes`), so the very first
+ * presentation of a surface can land here for a frame; the surface chrome is
+ * already on screen by then, so this fills only the body.
+ *
+ * Deliberately RN's `ActivityIndicator` rather than `@oxy.so/bloom/loading`,
+ * matching `authChooser/requestSurfaces`: Bloom still declares
+ * `sideEffects: false`, so its `Loading` can still tree-shake to `undefined` in
+ * a rolldown-vite production bundle. Removing that risk from the first frame of
+ * every route is not worth a themed spinner.
+ */
+function ScreenPending() {
+  const theme = useTheme();
+  return (
+    <View style={errorStyles.container}>
+      <ActivityIndicator size="large" color={theme.colors.primary} />
+    </View>
+  );
+}
+
+export interface SurfaceScreenProps {
+  /** This surface's route history (the NAV-WITHIN axis). */
+  navStack: SurfaceNavStack;
+  /** Bloom's per-surface controls (dismiss / present a child) — the DEPTH axis. */
+  surface: SurfaceControls;
+  /** Whether backdrop / Escape / back may dismiss at the root frame. Defaults to true. */
+  dismissOnBackdrop?: boolean;
+}
+
+/**
+ * Binds one SDK surface to its content: resolves the lazy screen for the current
+ * nav-stack frame and renders it inside the error boundary with the per-surface
+ * navigation props. Mounted by `surfaces.present` as the Bloom surface's content.
+ *
+ * Dismissal is driven through the nav stack's `closing` flag (watched in an
+ * effect) rather than a captured-controls call, so a dismiss requested before
+ * this surface mounted still resolves the Bloom surface exactly once.
+ */
+function SurfaceScreen({
+  navStack,
+  surface,
+  dismissOnBackdrop = true,
+}: SurfaceScreenProps) {
+  const theme = useTheme();
+  const state = useStore(navStack.store);
+  const top = state.frames[state.frames.length - 1];
+
+  useEffect(() => {
+    if (state.closing) surface.dismiss(state.closeResult);
+  }, [state.closing, state.closeResult, surface]);
+
+  const ScreenComponent = useMemo(() => getScreenComponent(top.route) ?? null, [top.route]);
+
+  const navigate = useCallback(
+    (route: RouteName, props?: Record<string, unknown>) =>
+      navigateWithinOrPresent(navStack, route, props),
+    [navStack],
+  );
+
+  const replace = useCallback(
+    (route: RouteName, props?: Record<string, unknown>) =>
+      replaceWithinOrPresent(navStack, route, props),
+    [navStack],
+  );
+
+  // Screens' `dismiss(result)` resolves an active sub-flow (morphed-in avatar
+  // picker) back to its caller and pops to its entry frame; with no flow it
+  // dismisses the whole surface (a screen presented as its own surface) — the
+  // historical behaviour. `navStack.resolveFlowOrDismiss` owns that fork.
+  const dismiss = useCallback(
+    (result?: unknown) => navStack.resolveFlowOrDismiss(result),
+    [navStack],
+  );
+
+  const canGoBack = useCallback(() => navStack.canGoBack(), [navStack]);
+
+  const setStep = useCallback((step: number) => navStack.setStep(step), [navStack]);
+
+  // Screen-facing back: pop a frame, else step a wizard back, else dismiss the
+  // surface — the exact behaviour the single `BottomSheetRouter` had per session.
+  const goBack = useCallback((): void => {
+    if (navStack.goBack()) return;
+    const current = navStack.getTop();
+    if (current.step > 0) {
+      navStack.setStep(current.step - 1);
+      return;
+    }
+    navStack.requestDismiss();
+  }, [navStack]);
+
+  const handleSystemBack = useCallback((): boolean => {
+    if (navStack.goBack()) return true;
+    const current = navStack.getTop();
+    if (current.step > 0) {
+      navStack.setStep(current.step - 1);
+      return true;
+    }
+    if (dismissOnBackdrop) navStack.requestDismiss();
+    return true;
+  }, [navStack, dismissOnBackdrop]);
+
+  useEffect(() => pushSurfaceBackHandler(handleSystemBack), [handleSystemBack]);
+
+  const present = useCallback(
+    (route: RouteName, props?: Record<string, unknown>) => presentRoute(route, props).result,
+    [],
+  );
+
+  // --- Dialog nav-header wiring ------------------------------------------
+  // Screens render NO header of their own: the Dialog owns a sticky gradient nav
+  // bar + a large collapsing title. Here the surface HOST supplies the back/close
+  // wiring and bridges the mounted screen's runtime contribution (its translated
+  // title/subtitle + any action slot, via `useSurfaceHeader`) into the Dialog's
+  // header. One writer to Bloom's header store — this merge — so back/close and
+  // the screen's content never race.
+  const [headerContent, setHeaderContent] = useState<SurfaceHeaderContent | null>(null);
+  const headerContext = useMemo(() => ({ setContent: setHeaderContent }), []);
+
+  const config = useMemo(() => getSurfaceConfig(top.route, top.props), [top.route, top.props]);
+  const headerMode = config.header;
+
+  // --- Size morphing on nav-within ---------------------------------------
+  // The Dialog cannot see a drill-in from its own props (only this host
+  // re-renders when the nav stack moves), so it is told which frame is on
+  // screen. When that identity changes the surface MORPHS — the panel animates
+  // between the two frames' sizes instead of hard-cutting. A wizard step counts
+  // as a frame: it swaps the visible content inside one screen the same way.
+  // A `stacks` route opens its OWN surface (never a frame here); everything else
+  // morphs.
+  //
+  // A route may declare an EXPLICIT large morph target (`frameSize`) — the media
+  // selector's own-scroller grid, which the panel can't measure, grows the
+  // container to a near-full-height, wider card and shrinks back on exit. Resolve
+  // its viewport-relative height to px here (the Dialog clamps to the viewport).
+  const { height: viewportHeight } = useWindowDimensions();
+  const frameSize = useMemo(() => {
+    const spec = config.frameSize;
+    if (!spec) return undefined;
+    const height =
+      spec.heightRatio !== undefined ? Math.round(viewportHeight * spec.heightRatio) : undefined;
+    return { height, maxWidth: spec.maxWidth };
+  }, [config.frameSize, viewportHeight]);
+  useDialogFrame(
+    useMemo(
+      () => ({ key: `${top.route}#${top.step}`, morph: config.morph, size: frameSize }),
+      [top.route, top.step, config.morph, frameSize],
+    ),
+  );
+  // Show a back affordance whenever the surface can navigate back — either an
+  // earlier frame in this surface's stack, or an earlier wizard step.
+  const canGoBackNow = state.frames.length > 1 || top.step > 0;
+
+  const dialogHeader = useMemo<DialogHeaderConfig | null>(() => {
+    if (!headerMode) return null;
+    return {
+      largeTitle: true,
+      ...headerContent,
+      // A screen may own its back (e.g. the account dialog's per-view back via
+      // `useSurfaceHeader({ onBack })`); otherwise the surface's nav-stack back
+      // drives it (a drilled-in frame / wizard step).
+      onBack: headerContent?.onBack ?? (canGoBackNow ? goBack : undefined),
+    };
+  }, [headerMode, headerContent, canGoBackNow, goBack]);
+
+  useDialogHeader(dialogHeader);
+
+  const screenProps = useMemo<BaseScreenProps>(() => {
+    const { initialStep: _omitInitialStep, ...rest } = top.props;
+    return {
+      // NAV-WITHIN
+      navigate,
+      goBack,
+      replace,
+      canGoBack,
+      initialStep: top.step,
+      step: top.step,
+      onStepChange: setStep,
+      setStep,
+      currentScreen: top.route,
+      // DEPTH — `onClose`/`onAuthenticated` unwind the whole session (matching the
+      // old `closeBottomSheet`); `dismiss`/`present` are the per-surface controls.
+      onClose: closeAllRouteSurfaces,
+      onAuthenticated: closeAllRouteSurfaces,
+      dismiss,
+      present,
+      // Theme + the route's own props.
+      theme: theme.mode,
+      ...rest,
+    };
+  }, [navigate, goBack, replace, canGoBack, setStep, present, dismiss, theme.mode, top.route, top.step, top.props]);
+
+  if (!ScreenComponent) return null;
+
+  return (
+    <SurfaceHeaderContext.Provider value={headerContext}>
+      <ScreenErrorBoundary screenName={top.route}>
+        <Suspense fallback={<ScreenPending />}>
+          <ScreenComponent {...screenProps} />
+        </Suspense>
+      </ScreenErrorBoundary>
+    </SurfaceHeaderContext.Provider>
+  );
+}
+
+export default SurfaceScreen;