diff --git a/.changeset/extract-version-picker-content.md b/.changeset/extract-version-picker-content.md
new file mode 100644
index 00000000..7e240e3f
--- /dev/null
+++ b/.changeset/extract-version-picker-content.md
@@ -0,0 +1,5 @@
+---
+"@youversion/platform-react-ui": minor
+---
+
+Add advanced Bible version picker composition surfaces for Expo DOM integrations.
diff --git a/packages/ui/src/components/bible-version-picker.stories.tsx b/packages/ui/src/components/bible-version-picker.stories.tsx
index a26d1091..f1f1d50a 100644
--- a/packages/ui/src/components/bible-version-picker.stories.tsx
+++ b/packages/ui/src/components/bible-version-picker.stories.tsx
@@ -151,7 +151,9 @@ export const InteractiveLanguageSelection: Story = {
 
     // Click language button
     const languageButton = await screen.findByRole('button', { name: /select language/i });
-    await expect(languageButton).toHaveTextContent('English');
+    await waitFor(async () => {
+      await expect(languageButton).toHaveTextContent('English');
+    });
     await userEvent.click(languageButton);
 
     // Verify language list is visible
@@ -168,7 +170,6 @@ export const InteractiveLanguageSelection: Story = {
         await screen.findByRole('button', { name: /select language/i }),
       ).toHaveTextContent(/korean/i);
     });
-    await userEvent.click(languageButton);
   },
 };
 
diff --git a/packages/ui/src/components/bible-version-picker.test.tsx b/packages/ui/src/components/bible-version-picker.test.tsx
index 51294de6..85d6aab2 100644
--- a/packages/ui/src/components/bible-version-picker.test.tsx
+++ b/packages/ui/src/components/bible-version-picker.test.tsx
@@ -14,7 +14,12 @@ class ResizeObserverMock {
 }
 globalThis.ResizeObserver = ResizeObserverMock as unknown as typeof ResizeObserver;
 
-import { BibleVersionPicker, RECENT_VERSIONS_KEY } from './bible-version-picker';
+import {
+  BibleLanguagePickerContent,
+  BibleVersionPicker,
+  BibleVersionPickerLanguageTrigger,
+  RECENT_VERSIONS_KEY,
+} from './bible-version-picker';
 import {
   useVersions,
   useVersion,
@@ -23,7 +28,7 @@ import {
   useFilteredVersions,
   useTheme,
 } from '@youversion/platform-react-hooks';
-import type { BibleVersion } from '@youversion/platform-core';
+import type { BibleVersion, Language } from '@youversion/platform-core';
 
 vi.mock('@youversion/platform-react-hooks');
 
@@ -50,6 +55,21 @@ const mockVersions: BibleVersion[] = [
   },
 ];
 
+const mockLanguages: Language[] = [
+  {
+    id: 'en',
+    language: 'English',
+    display_names: { en: 'English' },
+    speaking_population: 1500000000,
+  },
+  {
+    id: 'es',
+    language: 'Spanish',
+    display_names: { en: 'Spanish', es: 'Español' },
+    speaking_population: 500000000,
+  },
+];
+
 function setupDefaultMocks({
   versionsLoading = false,
   filteredVersions = mockVersions,
@@ -71,12 +91,15 @@ function setupDefaultMocks({
     refetch: vi.fn(),
   });
 
-  vi.mocked(useLanguages).mockReturnValue({
-    languages: { data: [], next_page_token: null },
+  vi.mocked(useLanguages).mockImplementation((params: Parameters<typeof useLanguages>[0]) => ({
+    languages: {
+      data: params && 'country' in params ? [mockLanguages[0]!] : mockLanguages,
+      next_page_token: null,
+    },
     loading: false,
     error: null,
     refetch: vi.fn(),
-  });
+  }));
 
   vi.mocked(useLanguage).mockReturnValue({
     language: { id: 'en', display_names: { en: 'English' }, language: 'English' },
@@ -219,4 +242,182 @@ describe('BibleVersionPicker', () => {
       });
     });
   });
+
+  describe('onVersionPickerPress override', () => {
+    it('calls onVersionPickerPress with { versionId, languageId } when Trigger is clicked', async () => {
+      const user = userEvent.setup();
+      const onVersionPickerPress = vi.fn();
+
+      setupDefaultMocks();
+      render(
+        <BibleVersionPicker.Root versionId={111} onVersionPickerPress={onVersionPickerPress}>
+          <BibleVersionPicker.Trigger />
+        </BibleVersionPicker.Root>,
+      );
+
+      await user.click(screen.getByRole('button'));
+
+      expect(onVersionPickerPress).toHaveBeenCalledTimes(1);
+      expect(onVersionPickerPress).toHaveBeenCalledWith({
+        versionId: 111,
+        languageId: 'en',
+      });
+    });
+
+    it('does NOT render popover content when onVersionPickerPress is provided', () => {
+      setupDefaultMocks();
+      render(
+        <BibleVersionPicker.Root versionId={111} onVersionPickerPress={vi.fn()}>
+          <BibleVersionPicker.Trigger />
+        </BibleVersionPicker.Root>,
+      );
+
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+      expect(screen.queryByPlaceholderText('Search')).not.toBeInTheDocument();
+    });
+
+    it('uses controlled languageId in onVersionPickerPress payload', async () => {
+      const user = userEvent.setup();
+      const onVersionPickerPress = vi.fn();
+
+      setupDefaultMocks();
+      render(
+        <BibleVersionPicker.Root
+          versionId={111}
+          languageId="es"
+          onVersionPickerPress={onVersionPickerPress}
+        >
+          <BibleVersionPicker.Trigger />
+        </BibleVersionPicker.Root>,
+      );
+
+      await user.click(screen.getByRole('button'));
+
+      expect(onVersionPickerPress).toHaveBeenCalledWith({
+        versionId: 111,
+        languageId: 'es',
+      });
+    });
+
+    it('does not call onVersionPickerPress when trigger click is prevented', async () => {
+      const user = userEvent.setup();
+      const onVersionPickerPress = vi.fn();
+
+      setupDefaultMocks();
+      render(
+        <BibleVersionPicker.Root versionId={111} onVersionPickerPress={onVersionPickerPress}>
+          <BibleVersionPicker.Trigger onClick={(event) => event.preventDefault()} />
+        </BibleVersionPicker.Root>,
+      );
+
+      await user.click(screen.getByRole('button'));
+
+      expect(onVersionPickerPress).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('standalone content', () => {
+    it('renders version content and calls onRequestClose after version selection', async () => {
+      const user = userEvent.setup();
+      const onVersionChange = vi.fn();
+      const onRequestClose = vi.fn();
+
+      setupDefaultMocks();
+      render(
+        <BibleVersionPicker.Root
+          versionId={111}
+          onVersionChange={onVersionChange}
+          onVersionPickerPress={vi.fn()}
+        >
+          <BibleVersionPicker.Content onRequestClose={onRequestClose} />
+        </BibleVersionPicker.Root>,
+      );
+
+      await user.click(screen.getByRole('listitem', { name: /new living translation/i }));
+
+      expect(onVersionChange).toHaveBeenCalledWith(206);
+      expect(onRequestClose).toHaveBeenCalledTimes(1);
+    });
+
+    it('renders language content and calls onRequestClose after language selection', async () => {
+      const user = userEvent.setup();
+      const onLanguageChange = vi.fn();
+      const onRequestClose = vi.fn();
+
+      setupDefaultMocks();
+      render(
+        <BibleVersionPicker.Root
+          versionId={111}
+          defaultLanguageId="es"
+          onLanguageChange={onLanguageChange}
+          onVersionPickerPress={vi.fn()}
+        >
+          <BibleLanguagePickerContent onRequestClose={onRequestClose} />
+        </BibleVersionPicker.Root>,
+      );
+
+      expect(screen.queryByText('Select Language')).not.toBeInTheDocument();
+      expect(screen.getByText('Suggested')).toBeInTheDocument();
+      await user.click(screen.getByRole('listitem', { name: /english/i }));
+
+      expect(onLanguageChange).toHaveBeenCalledWith('en');
+      expect(onRequestClose).toHaveBeenCalledTimes(1);
+    });
+
+    it('language trigger calls custom click handler without preventing default behavior', async () => {
+      const user = userEvent.setup();
+      const onClick = vi.fn();
+
+      setupDefaultMocks();
+      render(
+        <BibleVersionPicker.Root versionId={111} onVersionPickerPress={vi.fn()}>
+          <BibleVersionPickerLanguageTrigger onClick={onClick} />
+        </BibleVersionPicker.Root>,
+      );
+
+      await user.click(screen.getByRole('button', { name: /select language/i }));
+
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('language trigger does not open default language view when click is prevented', async () => {
+      const user = userEvent.setup();
+
+      setupDefaultMocks();
+      render(
+        <BibleVersionPicker.Root versionId={111}>
+          <BibleVersionPicker.Trigger />
+          <BibleVersionPickerLanguageTrigger onClick={(event) => event.preventDefault()} />
+          <BibleVersionPicker.Content />
+        </BibleVersionPicker.Root>,
+      );
+
+      await user.click(screen.getByRole('button', { name: 'NIV' }));
+      await user.click(screen.getAllByRole('button', { name: /select language/i })[0]!);
+
+      expect(screen.queryByText('All Languages')).not.toBeInTheDocument();
+    });
+
+    it('open=false clears version search for pre-warmed standalone content', async () => {
+      const user = userEvent.setup();
+
+      setupDefaultMocks();
+      const { rerender } = render(
+        <BibleVersionPicker.Root versionId={111} onVersionPickerPress={vi.fn()}>
+          <BibleVersionPicker.Content open />
+        </BibleVersionPicker.Root>,
+      );
+
+      await user.type(screen.getByPlaceholderText('Search'), 'nlt');
+      expect(screen.getByPlaceholderText('Search')).toHaveValue('nlt');
+
+      rerender(
+        <BibleVersionPicker.Root versionId={111} onVersionPickerPress={vi.fn()}>
+          <BibleVersionPicker.Content open={false} />
+        </BibleVersionPicker.Root>,
+      );
+
+      expect(screen.getByPlaceholderText('Search')).toHaveValue('');
+    });
+  });
 });
diff --git a/packages/ui/src/components/bible-version-picker.tsx b/packages/ui/src/components/bible-version-picker.tsx
index fce4c227..2f2008ec 100644
--- a/packages/ui/src/components/bible-version-picker.tsx
+++ b/packages/ui/src/components/bible-version-picker.tsx
@@ -9,7 +9,10 @@ import {
   useVersions,
 } from '@youversion/platform-react-hooks';
 import {
+  cloneElement,
   createContext,
+  isValidElement,
+  type MouseEvent,
   type ReactNode,
   useCallback,
   useContext,
@@ -152,6 +155,7 @@ type BibleVersionPickerContextType = {
   isPopoverOpen: boolean;
   setIsPopoverOpen: (open: boolean) => void;
   versionsLoading: boolean;
+  onVersionPickerPress?: (data: BibleVersionPickerPressData) => void;
 };
 
 const BibleVersionPickerContext = createContext<BibleVersionPickerContextType | null>(null);
@@ -167,16 +171,44 @@ function useBibleVersionPickerContext() {
 export type RootProps = {
   versionId: number;
   onVersionChange?: (versionId: number) => void;
+  languageId?: string;
+  defaultLanguageId?: string;
+  onLanguageChange?: (languageId: string) => void;
   background?: 'light' | 'dark';
   side?: 'top' | 'right' | 'bottom' | 'left';
+  onVersionPickerPress?: (data: BibleVersionPickerPressData) => void;
   children?: ReactNode;
 };
 
+export type BibleVersionPickerPressData = {
+  versionId: number;
+  languageId: string;
+};
+
+export type BibleVersionPickerContentProps = {
+  open?: boolean;
+  onRequestClose?: () => void;
+};
+
+export type BibleLanguagePickerContentProps = {
+  open?: boolean;
+  onRequestClose?: () => void;
+};
+
+export type BibleVersionPickerLanguageTriggerProps = Omit<
+  React.ComponentProps<typeof Button>,
+  'children'
+>;
+
 function Root({
   versionId: controlledVersionId,
   onVersionChange,
+  languageId: controlledLanguageId,
+  defaultLanguageId,
+  onLanguageChange,
   background,
   side = 'top',
+  onVersionPickerPress,
   children,
 }: RootProps) {
   const [versionId, setVersionIdState] = useControllableState({
@@ -188,9 +220,15 @@ function Root({
   const providerTheme = useTheme();
   const theme = background || providerTheme;
 
-  const [selectedLanguageId, setSelectedLanguageId] = useState(
-    (typeof navigator !== 'undefined' && navigator.languages[0]?.split('-')[0]) || 'en',
-  );
+  const fallbackLanguageId =
+    defaultLanguageId ||
+    (typeof navigator !== 'undefined' && navigator.languages[0]?.split('-')[0]) ||
+    'en';
+  const [selectedLanguageId, setSelectedLanguageId] = useControllableState({
+    prop: controlledLanguageId,
+    defaultProp: fallbackLanguageId,
+    onChange: onLanguageChange,
+  });
   const [searchQuery, setSearchQuery] = useState('');
   const [isLanguagesOpen, setIsLanguagesOpen] = useState(false);
   const [recentVersions, setRecentVersions] = useState<RecentVersion[]>(getRecentVersions);
@@ -314,8 +352,17 @@ function Root({
     isPopoverOpen,
     setIsPopoverOpen,
     versionsLoading,
+    onVersionPickerPress,
   };
 
+  if (onVersionPickerPress) {
+    return (
+      <BibleVersionPickerContext.Provider value={contextValue}>
+        {children}
+      </BibleVersionPickerContext.Provider>
+    );
+  }
+
   return (
     <BibleVersionPickerContext.Provider value={contextValue}>
       <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
@@ -335,7 +382,8 @@ export type BibleVersionPickerTriggerProps = Omit<
 };
 
 function Trigger({ asChild = true, children, ...props }: BibleVersionPickerTriggerProps) {
-  const { versionId, background } = useBibleVersionPickerContext();
+  const { versionId, selectedLanguageId, background, onVersionPickerPress } =
+    useBibleVersionPickerContext();
   const { version, loading } = useVersion(versionId);
 
   const content =
@@ -347,6 +395,30 @@ function Trigger({ asChild = true, children, ...props }: BibleVersionPickerTrigg
           </Button>
         );
 
+  const handlePress = (event: MouseEvent<HTMLButtonElement>) => {
+    props.onClick?.(event);
+    if (!event.defaultPrevented) {
+      onVersionPickerPress?.({ versionId, languageId: selectedLanguageId });
+    }
+  };
+
+  if (onVersionPickerPress) {
+    if (asChild && isValidElement<Record<string, unknown>>(content)) {
+      return cloneElement(content, {
+        'data-yv-sdk': true,
+        'data-yv-theme': background,
+        ...props,
+        onClick: handlePress,
+      });
+    }
+
+    return (
+      <button type="button" data-yv-sdk data-yv-theme={background} {...props} onClick={handlePress}>
+        {content}
+      </button>
+    );
+  }
+
   return (
     <PopoverTrigger data-yv-sdk data-yv-theme={background} asChild={asChild} {...props}>
       {content}
@@ -354,29 +426,98 @@ function Trigger({ asChild = true, children, ...props }: BibleVersionPickerTrigg
   );
 }
 
-function Content() {
+/**
+ * @internal Advanced composition surface for SDK integrations.
+ *
+ * `onClick` is a DOM-local event handler. Expo DOM wrappers should expose a
+ * top-level async native action prop and call it from an internal `onClick`
+ * adapter that calls `event.preventDefault()` instead of passing native
+ * callbacks through as React event handlers.
+ */
+export function BibleVersionPickerLanguageTrigger({
+  'aria-label': ariaLabel = 'Select language',
+  className,
+  onClick,
+  size = 'sm',
+  variant = 'secondary',
+  ...props
+}: BibleVersionPickerLanguageTriggerProps): React.ReactElement {
+  const {
+    filteredVersions,
+    setIsLanguagesOpen,
+    selectedLanguageId,
+    recentVersions,
+    searchQuery,
+    versionsLoading,
+  } = useBibleVersionPickerContext();
+  const filteredRecentVersions = useMemo(() => {
+    if (!searchQuery.trim()) return recentVersions;
+    const query = searchQuery.trim().toLowerCase();
+    return recentVersions.filter(
+      (v) =>
+        v.title?.toLowerCase().includes(query) ||
+        v.localized_abbreviation?.toLowerCase().includes(query) ||
+        v.abbreviation?.toLowerCase().includes(query),
+    );
+  }, [recentVersions, searchQuery]);
+  // Fetch the selected language details (may not be in the paginated languages list)
+  const { language: selectedLanguage } = useLanguage(selectedLanguageId);
+
+  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+    onClick?.(event);
+    if (!event.defaultPrevented) {
+      setIsLanguagesOpen(true);
+    }
+  };
+
+  return (
+    <Button
+      aria-label={ariaLabel}
+      className={cn(
+        'yv:ml-auto yv:bg-card yv:border yv:border-transparent yv:hover:bg-card yv:hover:border-border yv:max-w-40',
+        className,
+      )}
+      size={size}
+      onClick={handleClick}
+      variant={variant}
+      {...props}
+    >
+      <GlobeIcon className="yv:size-4" />
+      <span className="yv:text-sm yv:font-medium yv:truncate">
+        {selectedLanguage?.display_names?.en || selectedLanguage?.language}
+      </span>
+      <Badge
+        variant="secondary"
+        className="yv:h-5 yv:min-w-5 yv:rounded-full yv:px-1 yv:font-mono yv:tabular-nums"
+      >
+        {versionsLoading ? (
+          <LoaderIcon className="yv:size-3 yv:animate-spin" />
+        ) : (
+          filteredVersions.length + filteredRecentVersions.length
+        )}
+      </Badge>
+    </Button>
+  );
+}
+
+function Content({ open, onRequestClose }: BibleVersionPickerContentProps = {}) {
   const {
     searchQuery,
     setSearchQuery,
     filteredVersions,
     versionId,
     setVersionId,
+    recentVersions,
+    addRecentVersion,
+    versionsLoading,
     background,
     side,
-    setIsLanguagesOpen,
     isLanguagesOpen,
-    totalLanguages,
-    selectedLanguageId,
-    setSelectedLanguageId,
-    recentVersions,
-    addRecentVersion,
-    suggestedLanguages,
-    languages,
+    setIsLanguagesOpen,
     setIsPopoverOpen,
-    versionsLoading,
+    onVersionPickerPress,
   } = useBibleVersionPickerContext();
-  const providerTheme = useTheme();
-  const theme = background || providerTheme;
+  const wasOpenRef = useRef(open ?? false);
 
   const filteredRecentVersions = useMemo(() => {
     if (!searchQuery.trim()) return recentVersions;
@@ -388,13 +529,6 @@ function Content() {
         v.abbreviation?.toLowerCase().includes(query),
     );
   }, [recentVersions, searchQuery]);
-  // Fetch the selected language details (may not be in the paginated languages list)
-  const { language: selectedLanguage } = useLanguage(selectedLanguageId);
-
-  const handleSelectLanguage = (languageId: string) => {
-    setSelectedLanguageId(languageId);
-    setIsLanguagesOpen(false);
-  };
 
   const handleSelectVersion = (version: BibleVersion | RecentVersion) => {
     setVersionId(version.id);
@@ -404,102 +538,66 @@ function Content() {
       localized_abbreviation: version.localized_abbreviation,
       abbreviation: version.abbreviation,
     });
-    setIsLanguagesOpen(false);
-    setIsPopoverOpen(false);
+    setSearchQuery('');
+    onRequestClose?.();
   };
 
-  function LanguagePicker() {
+  useEffect(() => {
+    if (wasOpenRef.current && open === false) {
+      setSearchQuery('');
+      setIsLanguagesOpen(false);
+    }
+    wasOpenRef.current = open ?? false;
+  }, [open, setIsLanguagesOpen, setSearchQuery]);
+
+  if (!onVersionPickerPress && open === undefined && !onRequestClose) {
     return (
-      <Button
-        aria-label="Select language"
-        className="yv:ml-auto yv:bg-card yv:border yv:border-transparent yv:hover:bg-card yv:hover:border-border yv:max-w-40"
-        size="sm"
-        onClick={() => setIsLanguagesOpen(true)}
-        variant="secondary"
+      <PopoverContent
+        sideOffset={16}
+        className="yv:h-[66svh]"
+        heading="Bible Versions"
+        headerChild={<BibleVersionPickerLanguageTrigger />}
+        theme={background}
+        side={side}
       >
-        <GlobeIcon className="yv:size-4" />
-        <span className="yv:text-sm yv:font-medium yv:truncate">
-          {selectedLanguage?.display_names?.en || selectedLanguage?.language}
-        </span>
-        <Badge
-          variant="secondary"
-          className="yv:h-5 yv:min-w-5 yv:rounded-full yv:px-1 yv:font-mono yv:tabular-nums"
+        <div
+          className={`yv:h-full yv:min-h-0 ${
+            isLanguagesOpen
+              ? 'yv:opacity-0 yv:pointer-events-none yv:blur-sm yv:scale-95'
+              : 'yv:opacity-100 yv:pointer-events-auto yv:blur-none yv:scale-100'
+          }`}
         >
-          {versionsLoading ? (
-            <LoaderIcon className="yv:size-3 yv:animate-spin" />
-          ) : (
-            filteredVersions.length + filteredRecentVersions.length
-          )}
-        </Badge>
-      </Button>
+          <Content onRequestClose={() => setIsPopoverOpen(false)} />
+        </div>
+        <div
+          className={`yv:h-full yv:absolute yv:inset-0 ${
+            isLanguagesOpen
+              ? 'yv:opacity-100 yv:pointer-events-auto yv:blur-none yv:scale-100'
+              : 'yv:opacity-0 yv:pointer-events-none yv:blur-sm yv:scale-95'
+          }`}
+        >
+          <LanguagePanel onRequestClose={() => setIsLanguagesOpen(false)} />
+        </div>
+      </PopoverContent>
     );
   }
 
   return (
-    <PopoverContent
-      sideOffset={16}
-      className="yv:h-[66svh]"
-      heading="Bible Versions"
-      headerChild={<LanguagePicker />}
-      theme={theme}
-      side={side}
+    <div
+      className="yv:overflow-y-auto yv:h-full yv:flex yv:flex-col yv:transition-all yv:duration-300 yv:rounded-2xl yv:origin-center"
+      data-yv-sdk
+      data-yv-theme={background}
     >
       {/* Versions View */}
-      <div
-        className={`yv:overflow-y-auto yv:h-full yv:flex yv:flex-col yv:transition-all yv:duration-300 yv:rounded-2xl yv:origin-center ${
-          isLanguagesOpen
-            ? 'yv:opacity-0 yv:pointer-events-none yv:blur-sm yv:scale-95'
-            : 'yv:opacity-100 yv:pointer-events-auto yv:blur-none yv:scale-100'
-        }`}
-      >
-        <div className="yv:flex-1 yv:overflow-y-auto yv:py-2">
-          {/* Recent Versions */}
-          {filteredRecentVersions.length > 0 && (
-            <>
-              <h2 className="yv:px-4 yv:py-2 yv:text-lg yv:font-bold">Recently Used Versions</h2>
-              <ItemGroup data-testid="recent-version-list">
-                {filteredRecentVersions.map((version) => (
-                  <Item
-                    key={`recent-${version.id}`}
-                    className={cn(
-                      'yv:hover:bg-muted yv:rounded-[8px]',
-                      versionId === version.id ? 'yv:bg-muted' : '',
-                    )}
-                    size="sm"
-                    variant="default"
-                    role="listitem"
-                    asChild
-                    aria-label={version.title}
-                  >
-                    <button
-                      type="button"
-                      className="yv:w-full"
-                      onClick={() => handleSelectVersion(version)}
-                    >
-                      <ItemMedia
-                        variant="icon"
-                        className="yv:rounded-[8px] yv:size-12 yv:border-border yv:flex yv:flex-col yv:justify-center yv:items-center"
-                      >
-                        <VersionAbbreviationIcon text={version.localized_abbreviation} />
-                      </ItemMedia>
-                      <ItemContent>
-                        <ItemTitle className="yv:line-clamp-2 yv:text-left">
-                          {version.title}
-                        </ItemTitle>
-                      </ItemContent>
-                    </button>
-                  </Item>
-                ))}
-              </ItemGroup>
-            </>
-          )}
-          {/* All Versions */}
-          {filteredVersions.length > 0 ? (
-            <ItemGroup data-testid="version-list">
-              <h3 className="yv:px-4 yv:py-2 yv:font-bold">All Versions</h3>
-              {filteredVersions.map((version: BibleVersion) => (
+      <div className="yv:flex-1 yv:overflow-y-auto yv:py-2">
+        {/* Recent Versions */}
+        {filteredRecentVersions.length > 0 && (
+          <>
+            <h2 className="yv:px-4 yv:py-2 yv:text-lg yv:font-bold">Recently Used Versions</h2>
+            <ItemGroup data-testid="recent-version-list">
+              {filteredRecentVersions.map((version) => (
                 <Item
-                  key={version.id}
+                  key={`recent-${version.id}`}
                   className={cn(
                     'yv:hover:bg-muted yv:rounded-[8px]',
                     versionId === version.id ? 'yv:bg-muted' : '',
@@ -530,18 +628,56 @@ function Content() {
                 </Item>
               ))}
             </ItemGroup>
-          ) : versionsLoading ? (
-            <div className="yv:w-full yv:flex yv:items-center yv:justify-center yv:py-8 yv:text-center yv:text-muted-foreground yv:text-sm">
-              <LoaderIcon className="yv:size-6 yv:animate-spin yv:text-muted-foreground" />
-            </div>
-          ) : !filteredRecentVersions.length ? (
-            <div className="yv:w-full yv:flex yv:items-center yv:justify-center yv:py-8 yv:text-center yv:text-muted-foreground yv:text-sm">
-              No versions found
-            </div>
-          ) : null}
-        </div>
+          </>
+        )}
+        {/* All Versions */}
+        {filteredVersions.length > 0 ? (
+          <ItemGroup data-testid="version-list">
+            <h3 className="yv:px-4 yv:py-2 yv:font-bold">All Versions</h3>
+            {filteredVersions.map((version: BibleVersion) => (
+              <Item
+                key={version.id}
+                className={cn(
+                  'yv:hover:bg-muted yv:rounded-[8px]',
+                  versionId === version.id ? 'yv:bg-muted' : '',
+                )}
+                size="sm"
+                variant="default"
+                role="listitem"
+                asChild
+                aria-label={version.title}
+              >
+                <button
+                  type="button"
+                  className="yv:w-full"
+                  onClick={() => handleSelectVersion(version)}
+                >
+                  <ItemMedia
+                    variant="icon"
+                    className="yv:rounded-[8px] yv:size-12 yv:border-border yv:flex yv:flex-col yv:justify-center yv:items-center"
+                  >
+                    <VersionAbbreviationIcon text={version.localized_abbreviation} />
+                  </ItemMedia>
+                  <ItemContent>
+                    <ItemTitle className="yv:line-clamp-2 yv:text-left">{version.title}</ItemTitle>
+                  </ItemContent>
+                </button>
+              </Item>
+            ))}
+          </ItemGroup>
+        ) : versionsLoading ? (
+          <div className="yv:w-full yv:flex yv:items-center yv:justify-center yv:py-8 yv:text-center yv:text-muted-foreground yv:text-sm">
+            <LoaderIcon className="yv:size-6 yv:animate-spin yv:text-muted-foreground" />
+          </div>
+        ) : !filteredRecentVersions.length ? (
+          <div className="yv:w-full yv:flex yv:items-center yv:justify-center yv:py-8 yv:text-center yv:text-muted-foreground yv:text-sm">
+            No versions found
+          </div>
+        ) : null}
+      </div>
 
-        <section className="yv:bg-muted yv:border-s yv:border-muted yv:p-4">
+      <section className="yv:bg-muted yv:border-s yv:border-muted yv:p-4">
+        <div className="yv:grid yv:grid-cols-[1fr_auto] yv:gap-2">
           <InputGroup className="yv:bg-background yv:shadow-none yv:border-border">
             <InputGroupInput
               tabIndex={1}
@@ -554,123 +690,155 @@ function Content() {
               <SearchIcon className="yv:size-5 yv:text-muted-foreground" />
             </InputGroupAddon>
           </InputGroup>
-        </section>
-      </div>
-
-      {/* Languages View */}
-      <div
-        className={`yv:h-full yv:absolute yv:inset-0 yv:flex yv:flex-col yv:transition-all yv:duration-300 yv:rounded-2xl yv:origin-center ${
-          isLanguagesOpen
-            ? 'yv:opacity-100 yv:pointer-events-auto yv:blur-none yv:scale-100'
-            : 'yv:opacity-0 yv:pointer-events-none yv:blur-sm yv:scale-95'
-        }`}
-      >
-        <section className="yv:bg-muted yv:px-2 yv:py-3 yv:w-full yv:rounded-t-2xl yv:border-b yv:border-border yv:grid yv:grid-cols-[auto_1fr] yv:gap-2 yv:items-center">
-          <Button
-            onClick={() => setIsLanguagesOpen(false)}
-            variant="ghost"
-            size="icon"
-            className="yv:w-8 yv:h-8 yv:text-muted-foreground"
-          >
-            <ArrowLeftIcon className="yv:size-4" />
-            <span className="yv:sr-only">Close Language selector</span>
-          </Button>
-          <h2 className="yv:font-bold yv:text-base">Select Language</h2>
-        </section>
+        </div>
+      </section>
+    </div>
+  );
+}
 
-        <Tabs
-          className="yv:mt-4 yv:gap-4 yv:flex-1 yv:min-h-0 yv:flex yv:flex-col"
-          defaultValue="suggested"
+function LanguagePanel({ onRequestClose }: BibleLanguagePickerContentProps = {}) {
+  return (
+    <div className="yv:h-full yv:flex yv:flex-col yv:transition-all yv:duration-300 yv:rounded-2xl yv:origin-center">
+      <section className="yv:bg-muted yv:px-2 yv:py-3 yv:w-full yv:rounded-t-2xl yv:border-b yv:border-border yv:grid yv:grid-cols-[auto_1fr] yv:gap-2 yv:items-center">
+        <Button
+          onClick={onRequestClose}
+          variant="ghost"
+          size="icon"
+          className="yv:w-8 yv:h-8 yv:text-muted-foreground"
         >
-          <TabsList className="yv:mx-4 yv:w-[calc(100%-4*var(--spacing))]">
-            <TabsTrigger className="yv:p-0" value="suggested">
-              Suggested
-            </TabsTrigger>
-            <TabsTrigger className="yv:p-0" value="all">
-              All ({totalLanguages})
-            </TabsTrigger>
-          </TabsList>
-
-          <TabsContent value="suggested" className="yv:overflow-y-auto yv:flex-1 yv:min-h-0">
-            {suggestedLanguages.length > 0 ? (
-              <>
-                <h3 className="yv:bg-popover yv:px-4 yv:pb-2 yv:text-lg yv:font-bold">Regional</h3>
-                <ItemGroup className="yv:gap-1">
-                  {suggestedLanguages.map((suggestedLanguage) => (
-                    <Item
-                      key={suggestedLanguage.id}
-                      className={cn(
-                        'yv:hover:bg-muted yv:rounded-[8px] yv:px-4',
-                        selectedLanguageId === suggestedLanguage.id ? 'yv:bg-muted' : '',
-                      )}
-                      size="sm"
-                      role="listitem"
-                      aria-label={suggestedLanguage.display_names?.en}
-                      asChild
+          <ArrowLeftIcon className="yv:size-4" />
+          <span className="yv:sr-only">Close Language selector</span>
+        </Button>
+        <h2 className="yv:font-bold yv:text-base">Select Language</h2>
+      </section>
+      <BibleLanguagePickerContent onRequestClose={onRequestClose} />
+    </div>
+  );
+}
+
+/**
+ * @internal Advanced composition surface for SDK integrations.
+ *
+ * Expo DOM wrappers should compose this content inside the `'use dom'` file and
+ * expose only serializable props plus top-level async native actions to native.
+ */
+export function BibleLanguagePickerContent({
+  open,
+  onRequestClose,
+}: BibleLanguagePickerContentProps = {}): React.ReactElement {
+  const {
+    totalLanguages,
+    selectedLanguageId,
+    setSelectedLanguageId,
+    suggestedLanguages,
+    languages,
+    background,
+  } = useBibleVersionPickerContext();
+
+  const handleSelectLanguage = (languageId: string) => {
+    setSelectedLanguageId(languageId);
+    onRequestClose?.();
+  };
+
+  return (
+    <div
+      className="yv:h-full yv:flex yv:flex-col"
+      data-yv-sdk
+      data-yv-theme={background}
+      data-open={open}
+    >
+      <Tabs
+        className="yv:mt-4 yv:gap-4 yv:flex-1 yv:min-h-0 yv:flex yv:flex-col"
+        defaultValue="suggested"
+      >
+        <TabsList className="yv:mx-4 yv:w-[calc(100%-4*var(--spacing)*2)]">
+          <TabsTrigger className="yv:p-0" value="suggested">
+            Suggested
+          </TabsTrigger>
+          <TabsTrigger className="yv:p-0" value="all">
+            All ({totalLanguages})
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="suggested" className="yv:overflow-y-auto yv:flex-1 yv:min-h-0">
+          {suggestedLanguages.length > 0 ? (
+            <>
+              <h3 className="yv:bg-popover yv:px-4 yv:pb-2 yv:text-lg yv:font-bold">Regional</h3>
+              <ItemGroup className="yv:gap-1">
+                {suggestedLanguages.map((suggestedLanguage) => (
+                  <Item
+                    key={suggestedLanguage.id}
+                    className={cn(
+                      'yv:hover:bg-muted yv:rounded-[8px] yv:px-4',
+                      selectedLanguageId === suggestedLanguage.id ? 'yv:bg-muted' : '',
+                    )}
+                    size="sm"
+                    role="listitem"
+                    aria-label={suggestedLanguage.display_names?.en}
+                    asChild
+                  >
+                    <Button
+                      className="yv:w-full yv:h-auto"
+                      onClick={() => handleSelectLanguage(suggestedLanguage.id)}
+                      type="button"
+                      variant="ghost"
                     >
-                      <Button
-                        className="yv:w-full yv:h-auto"
-                        onClick={() => handleSelectLanguage(suggestedLanguage.id)}
-                        type="button"
-                        variant="ghost"
-                      >
-                        <ItemContent className="yv:flex yv:flex-row yv:justify-between yv:items-center">
-                          <ItemTitle className="yv:text-start yv:line-clamp-2 yv:min-w-0 yv:flex-1 yv:truncate">
-                            {suggestedLanguage.display_names?.en}
-                          </ItemTitle>
-                          <ItemDescription className="yv:shrink-0">
-                            {suggestedLanguage.display_names?.[suggestedLanguage.id]}
-                          </ItemDescription>
-                        </ItemContent>
-                      </Button>
-                    </Item>
-                  ))}
-                </ItemGroup>
-              </>
-            ) : (
-              <p className="yv:px-4 yv:py-8 yv:text-center yv:text-muted-foreground">
-                No regional languages available
-              </p>
-            )}
-          </TabsContent>
-
-          <TabsContent value="all" className="yv:overflow-y-auto yv:flex-1 yv:min-h-0">
-            <h3 className="yv:bg-popover yv:px-4 yv:pb-2 yv:text-lg yv:font-bold">All Languages</h3>
-            <ItemGroup className="yv:gap-1">
-              {languages.map((language) => (
-                <Item
-                  key={language.id}
-                  className={cn(
-                    'yv:hover:bg-muted yv:rounded-[8px] yv:px-4',
-                    selectedLanguageId === language.id ? 'yv:bg-muted' : '',
-                  )}
-                  size="sm"
-                  role="listitem"
-                  aria-label={language.display_names?.en}
-                  asChild
+                      <ItemContent className="yv:flex yv:flex-row yv:justify-between yv:items-center">
+                        <ItemTitle className="yv:text-start yv:line-clamp-2 yv:min-w-0 yv:flex-1 yv:truncate">
+                          {suggestedLanguage.display_names?.en}
+                        </ItemTitle>
+                        <ItemDescription className="yv:shrink-0">
+                          {suggestedLanguage.display_names?.[suggestedLanguage.id]}
+                        </ItemDescription>
+                      </ItemContent>
+                    </Button>
+                  </Item>
+                ))}
+              </ItemGroup>
+            </>
+          ) : (
+            <p className="yv:px-4 yv:py-8 yv:text-center yv:text-muted-foreground">
+              No regional languages available
+            </p>
+          )}
+        </TabsContent>
+
+        <TabsContent value="all" className="yv:overflow-y-auto yv:flex-1 yv:min-h-0">
+          <h3 className="yv:bg-popover yv:px-4 yv:pb-2 yv:text-lg yv:font-bold">All Languages</h3>
+          <ItemGroup className="yv:gap-1">
+            {languages.map((language) => (
+              <Item
+                key={language.id}
+                className={cn(
+                  'yv:hover:bg-muted yv:rounded-[8px] yv:px-4',
+                  selectedLanguageId === language.id ? 'yv:bg-muted' : '',
+                )}
+                size="sm"
+                role="listitem"
+                aria-label={language.display_names?.en}
+                asChild
+              >
+                <Button
+                  className="yv:w-full yv:h-auto"
+                  onClick={() => handleSelectLanguage(language.id)}
+                  type="button"
+                  variant="ghost"
                 >
-                  <Button
-                    className="yv:w-full yv:h-auto"
-                    onClick={() => handleSelectLanguage(language.id)}
-                    type="button"
-                    variant="ghost"
-                  >
-                    <ItemContent className="yv:flex yv:flex-row yv:justify-between yv:items-center">
-                      <ItemTitle className="yv:text-start yv:line-clamp-2 yv:truncate yv:min-w-0 yv:max-w-2/3 yv:flex-1">
-                        {language.display_names?.en}
-                      </ItemTitle>
-                      <ItemDescription className="yv:text-end yv:shrink-0 yv:max-w-1/3">
-                        {language.display_names?.[language.id]}
-                      </ItemDescription>
-                    </ItemContent>
-                  </Button>
-                </Item>
-              ))}
-            </ItemGroup>
-          </TabsContent>
-        </Tabs>
-      </div>
-    </PopoverContent>
+                  <ItemContent className="yv:flex yv:flex-row yv:justify-between yv:items-center">
+                    <ItemTitle className="yv:text-start yv:line-clamp-2 yv:truncate yv:min-w-0 yv:max-w-2/3 yv:flex-1">
+                      {language.display_names?.en}
+                    </ItemTitle>
+                    <ItemDescription className="yv:text-end yv:shrink-0 yv:max-w-1/3">
+                      {language.display_names?.[language.id]}
+                    </ItemDescription>
+                  </ItemContent>
+                </Button>
+              </Item>
+            ))}
+          </ItemGroup>
+        </TabsContent>
+      </Tabs>
+    </div>
   );
 }
 
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index cdcd1491..e5f96097 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -9,8 +9,14 @@ export {
 export { BibleReader, type BibleReaderRootProps } from './bible-reader';
 export {
   BibleVersionPicker,
+  BibleLanguagePickerContent,
+  BibleVersionPickerLanguageTrigger,
   type BibleVersionPickerRootProps,
   type BibleVersionPickerTriggerProps,
+  type BibleVersionPickerPressData,
+  type BibleVersionPickerContentProps,
+  type BibleLanguagePickerContentProps,
+  type BibleVersionPickerLanguageTriggerProps,
 } from './bible-version-picker';
 export { YouVersionAuthButton, type YouVersionAuthButtonProps } from './YouVersionAuthButton';
 export { VerseOfTheDay, type VerseOfTheDayProps } from './verse-of-the-day';