From 5374e77070423a8a873af009214914b677728884 Mon Sep 17 00:00:00 2001
From: Brenden Manquen <bmanquen1993@gmail.com>
Date: Fri, 19 Dec 2025 10:55:57 -0600
Subject: [PATCH 1/5] feat(ui): add bible reader settings to the bibler reader

- refactor popover component to have consistent styling across
multiple components and reduce duplication in code.
- add bible reader settings and save the users settings to localStorage.
---
 .../src/components/bible-chapter-picker.tsx   |  23 +--
 packages/ui/src/components/bible-reader.tsx   | 164 ++++++++++++++++--
 .../src/components/bible-version-picker.tsx   |  75 ++++----
 packages/ui/src/components/ui/popover.tsx     |  30 +++-
 4 files changed, 207 insertions(+), 85 deletions(-)

diff --git a/packages/ui/src/components/bible-chapter-picker.tsx b/packages/ui/src/components/bible-chapter-picker.tsx
index c86f43f..bd3562d 100644
--- a/packages/ui/src/components/bible-chapter-picker.tsx
+++ b/packages/ui/src/components/bible-chapter-picker.tsx
@@ -10,7 +10,7 @@ import {
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { useBooks, useTheme } from '@youversion/platform-react-hooks';
 import { type BibleBook } from '@youversion/platform-core';
-import { Info, Search, XIcon } from 'lucide-react';
+import { Info, Search } from 'lucide-react';
 import { Button } from './ui/button';
 import { Popover, PopoverTrigger, PopoverContent, PopoverClose } from './ui/popover';
 import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './ui/accordion';
@@ -137,26 +137,7 @@ function Root({
         {children}
 
         {/* data-yv-sdk for styles is needed because the popover gets rendered outside of the providers scope **/}
-        <PopoverContent
-          data-yv-sdk
-          data-yv-theme={theme}
-          side="top"
-          className="yv:grid yv:grid-rows-[auto_1fr_auto] yv:bg-background yv:p-0 yv:h-full yv:max-h-[66vh] yv:w-96 yv:sm:w-sm yv:overflow-hidden yv:rounded-2xl yv:border-0 yv:shadow-lg"
-        >
-          <section className="yv:bg-muted yv:py-3 yv:w-full yv:rounded-t-2xl yv:px-4 yv:border-b yv:border-border yv:flex yv:flex-row yv:justify-between">
-            <h2 className="yv:font-bold yv:text-base">Books</h2>
-            <PopoverClose asChild>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="yv:w-6 yv:h-6 yv:text-muted-foreground"
-              >
-                <XIcon />
-                <span className="yv:sr-only">Close</span>
-              </Button>
-            </PopoverClose>
-          </section>
-
+        <PopoverContent heading="Books" theme={theme} side="top">
           <Accordion
             className="yv:relative yv:overflow-y-auto yv:bg-background yv:px-6"
             type="single"
diff --git a/packages/ui/src/components/bible-reader.tsx b/packages/ui/src/components/bible-reader.tsx
index b2f81ab..0107826 100644
--- a/packages/ui/src/components/bible-reader.tsx
+++ b/packages/ui/src/components/bible-reader.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { createContext, useContext, useMemo, type ReactNode } from 'react';
+import { createContext, useContext, useMemo, useState, useEffect, type ReactNode } from 'react';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { useBooks, useVersion, useTheme } from '@youversion/platform-react-hooks';
 import { BibleChapterPicker } from './bible-chapter-picker';
@@ -8,7 +8,8 @@ import { BibleVersionPicker } from './bible-version-picker';
 import { BibleTextView } from './verse';
 import { Button } from './ui/button';
 import { cn } from '@/lib/utils';
-import { Info } from 'lucide-react';
+import { Info, Settings } from 'lucide-react';
+import { Popover, PopoverContent, PopoverTrigger } from './ui/popover';
 
 type BibleReaderContextType = {
   book: string;
@@ -17,8 +18,10 @@ type BibleReaderContextType = {
   setBook: React.Dispatch<React.SetStateAction<string>>;
   setChapter: React.Dispatch<React.SetStateAction<string>>;
   setVersionId: React.Dispatch<React.SetStateAction<number>>;
-  fontFamily?: string;
-  fontSize?: number;
+  currentFontFamily: string;
+  setCurrentFontFamily: React.Dispatch<React.SetStateAction<string>>;
+  currentFontSize: number;
+  setCurrentFontSize: React.Dispatch<React.SetStateAction<number>>;
   lineHeight?: number;
   showVerseNumbers: boolean;
   background: 'light' | 'dark';
@@ -62,7 +65,7 @@ function Root({
   versionId: controlledVersionId,
   defaultVersionId = 111,
   onVersionChange,
-  fontFamily,
+  fontFamily = 'Inter',
   fontSize = 16,
   lineHeight,
   showVerseNumbers = true,
@@ -87,6 +90,23 @@ function Root({
     onChange: onVersionChange,
   });
 
+  const [currentFontSize, setCurrentFontSize] = useState(() => {
+    if (typeof window === 'undefined') return fontSize;
+    const size = localStorage.getItem('font-size');
+    return size ? parseInt(size) : fontSize;
+  });
+
+  const [currentFontFamily, setCurrentFontFamily] = useState(() => {
+    if (typeof window === 'undefined') return fontFamily;
+    return localStorage.getItem('font-family') || fontFamily;
+  });
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    localStorage.setItem('font-size', currentFontSize.toString());
+    localStorage.setItem('font-family', currentFontFamily);
+  }, [currentFontSize, currentFontFamily]);
+
   const providerTheme = useTheme();
   const theme = background || providerTheme;
 
@@ -97,8 +117,10 @@ function Root({
     setBook,
     setChapter,
     setVersionId,
-    fontFamily,
-    fontSize,
+    currentFontFamily,
+    setCurrentFontFamily,
+    currentFontSize,
+    setCurrentFontSize,
     lineHeight,
     showVerseNumbers,
     background: theme,
@@ -118,8 +140,15 @@ function Root({
 }
 
 function Content() {
-  const { book, chapter, versionId, fontFamily, fontSize, lineHeight, showVerseNumbers } =
-    useBibleReaderContext();
+  const {
+    book,
+    chapter,
+    versionId,
+    currentFontSize,
+    currentFontFamily,
+    lineHeight,
+    showVerseNumbers,
+  } = useBibleReaderContext();
   const { books } = useBooks(versionId);
   const { version } = useVersion(versionId);
 
@@ -148,14 +177,17 @@ function Content() {
       <BibleTextView
         reference={usfmReference}
         versionId={versionId}
-        fontFamily={fontFamily}
-        fontSize={fontSize}
+        fontFamily={currentFontFamily}
+        fontSize={currentFontSize}
         lineHeight={lineHeight}
         showVerseNumbers={showVerseNumbers}
       />
 
       {version?.copyright && (
-        <footer className="yv:flex yv:flex-col yv:items-center yv:gap-2" style={{ fontSize }}>
+        <footer
+          className="yv:flex yv:flex-col yv:items-center yv:gap-2"
+          style={{ fontSize: currentFontSize }}
+        >
           <p className="yv:text-balance yv:text-[0.75em] yv:text-center yv:text-muted-foreground">
             {version.copyright}
           </p>
@@ -176,8 +208,18 @@ function Content() {
 }
 
 function Toolbar({ border = 'top' }: { border?: 'top' | 'bottom' }) {
-  const { book, chapter, versionId, setBook, setChapter, setVersionId, background } =
-    useBibleReaderContext();
+  const {
+    book,
+    chapter,
+    versionId,
+    setBook,
+    setChapter,
+    setVersionId,
+    currentFontFamily,
+    setCurrentFontFamily,
+    setCurrentFontSize,
+    background,
+  } = useBibleReaderContext();
 
   return (
     <section
@@ -187,7 +229,7 @@ function Toolbar({ border = 'top' }: { border?: 'top' | 'bottom' }) {
         border === 'bottom' && 'yv:border-b',
       )}
     >
-      <div className="yv:grid yv:w-full yv:grid-cols-2 yv:items-center yv:max-w-lg yv:gap-1">
+      <div className="yv:grid yv:w-full yv:grid-cols-7 yv:items-center yv:max-w-lg yv:gap-1">
         <BibleChapterPicker.Root
           book={book}
           chapter={chapter}
@@ -196,7 +238,10 @@ function Toolbar({ border = 'top' }: { border?: 'top' | 'bottom' }) {
           versionId={versionId}
           background={background}
         >
-          <BibleChapterPicker.Trigger aria-label="Change Bible book and chapter">
+          <BibleChapterPicker.Trigger
+            className="yv:col-span-2 yv:col-start-2"
+            aria-label="Change Bible book and chapter"
+          >
             {({ chapter, currentBook, loading }) => (
               <Button
                 variant="secondary"
@@ -214,7 +259,7 @@ function Toolbar({ border = 'top' }: { border?: 'top' | 'bottom' }) {
           onVersionChange={setVersionId}
           background={background}
         >
-          <BibleVersionPicker.Trigger aria-label="Change Bible version">
+          <BibleVersionPicker.Trigger className="yv:col-span-2" aria-label="Change Bible version">
             {({ version, loading }) => (
               <Button
                 variant="secondary"
@@ -227,6 +272,91 @@ function Toolbar({ border = 'top' }: { border?: 'top' | 'bottom' }) {
           </BibleVersionPicker.Trigger>
           <BibleVersionPicker.Content />
         </BibleVersionPicker.Root>
+        <Popover>
+          <PopoverTrigger className="yv:col-span-1">
+            <Button
+              aria-label="Settings"
+              className="yv:px-2 yv:py-1 yv:text-foreground"
+              variant="secondary"
+            >
+              <Settings size={24} />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent heading="Reader Settings" theme={background}>
+            <div className="yv:flex yv:flex-col yv:gap-7 yv:p-10">
+              <div className="yv:grid yv:grid-cols-2">
+                <Button
+                  className="yv:text-xs yv:text-black yv:dark:text-muted-foreground yv:rounded-l-[8px] yv:rounded-r-none yv:border yv:border-white yv:dark:border-border yv:h-auto yv:py-2"
+                  onClick={() => setCurrentFontSize((prev) => (prev -= 2))}
+                  size="lg"
+                  variant="secondary"
+                  data-testid="decrease-font-size"
+                >
+                  A
+                </Button>
+                <Button
+                  className="yv:text-3xl yv:text-black yv:dark:text-muted-foreground yv:rounded-r-[8px] yv:rounded-l-none yv:border yv:border-white yv:dark:border-border yv:h-auto yv:py-2"
+                  onClick={() => setCurrentFontSize((prev) => (prev += 2))}
+                  size="lg"
+                  variant="secondary"
+                  data-testid="increase-font-size"
+                >
+                  A
+                </Button>
+              </div>
+              <div className="yv:grid yv:grid-cols-2">
+                <Button
+                  className={cn(
+                    'yv:group yv:dark:bg-muted yv:rounded-r-none yv:dark:border-border yv:rounded-l-[8px] yv:h-auto',
+                    currentFontFamily === 'Inter'
+                      ? 'yv:bg-black yv:dark:bg-inherit yv:text-white yv:hover:text-white yv:hover:bg-black/80'
+                      : '',
+                  )}
+                  onClick={() => setCurrentFontFamily('Inter')}
+                  variant="outline"
+                >
+                  <div className="yv:flex yv:flex-col yv:w-full yv:items-start">
+                    <span
+                      className={cn(
+                        'yv:text-xs yv:text-muted-foreground',
+                        currentFontFamily === 'Inter'
+                          ? 'yv:text-muted yv:dark:text-muted-foreground yv:group-hover:text-muted'
+                          : '',
+                      )}
+                    >
+                      Font
+                    </span>
+                    <span className="yv:text-xl">Inter</span>
+                  </div>
+                </Button>
+                <Button
+                  className={cn(
+                    'yv:group yv:dark:bg-muted yv:rounded-l-none yv:rounded-r-[8px] yv:h-auto',
+                    currentFontFamily === 'Source Serif'
+                      ? 'yv:bg-black yv:dark:bg-inherit yv:text-white yv:hover:text-white yv:hover:bg-black/80'
+                      : '',
+                  )}
+                  onClick={() => setCurrentFontFamily('Source Serif')}
+                  variant="outline"
+                >
+                  <div className="yv:flex yv:flex-col yv:w-full yv:items-start">
+                    <span
+                      className={cn(
+                        'yv:text-xs yv:text-muted-foreground',
+                        currentFontFamily === 'Source Serif'
+                          ? 'yv:text-muted yv:dark:text-muted-foreground yv:group-hover:text-muted'
+                          : '',
+                      )}
+                    >
+                      Font
+                    </span>
+                    <span className="yv:text-xl yv:font-serif">Source Serif</span>
+                  </div>
+                </Button>
+              </div>
+            </div>
+          </PopoverContent>
+        </Popover>
       </div>
     </section>
   );
diff --git a/packages/ui/src/components/bible-version-picker.tsx b/packages/ui/src/components/bible-version-picker.tsx
index aa4385a..6764adb 100644
--- a/packages/ui/src/components/bible-version-picker.tsx
+++ b/packages/ui/src/components/bible-version-picker.tsx
@@ -9,10 +9,10 @@ import {
 } from '@youversion/platform-react-hooks';
 import { Button } from './ui/button';
 import { Input } from './ui/input';
-import { Popover, PopoverTrigger, PopoverContent, PopoverClose } from './ui/popover';
+import { Popover, PopoverTrigger, PopoverContent } from './ui/popover';
 import { Item, ItemGroup, ItemMedia, ItemContent, ItemTitle, ItemDescription } from './ui/item';
 import type { BibleVersion } from '@youversion/platform-core';
-import { Search, Globe, X as XIcon, ArrowLeft } from 'lucide-react';
+import { Search, Globe, ArrowLeft } from 'lucide-react';
 import { Badge } from './ui/badge';
 import { cn } from '@/lib/utils';
 
@@ -192,59 +192,46 @@ function Content() {
     closeRef.current?.click();
   };
 
+  function LanguagePicker() {
+    return (
+      <div className="yv:ml-auto">
+        <Button
+          aria-label="Select language"
+          className="yv:bg-card yv:border yv:border-transparent yv:hover:bg-card yv:hover:border-border"
+          size="sm"
+          onClick={() => setIsLanguagesOpen(true)}
+          variant="secondary"
+        >
+          <Globe size={16} />
+          <span className="yv:text-sm yv:font-medium yv:line-clamp-1">
+            {languages.find((language) => language.id === selectedLanguageId)?.englishName}
+          </span>
+          <Badge
+            variant="secondary"
+            className="yv:h-5 yv:min-w-5 yv:rounded-full yv:px-1 yv:font-mono yv:tabular-nums"
+          >
+            {filteredVersions.length}
+          </Badge>
+        </Button>
+      </div>
+    );
+  }
+
   return (
     <PopoverContent
-      data-yv-sdk
-      data-yv-theme={theme}
+      heading="Bible Versions"
+      headerChild={<LanguagePicker />}
+      theme={theme}
       side={side}
-      className="yv:flex yv:flex-col yv:bg-background yv:p-0 yv:h-[66vh] yv:max-h-[66vh] yv:w-96 yv:sm:w-sm yv:overflow-hidden yv:rounded-2xl yv:border-0 yv:shadow-lg"
     >
       {/* Versions View */}
       <div
-        className={`yv:h-[66vh] yv:absolute yv:inset-0 yv:flex yv:flex-col yv:transition-all yv:duration-300 yv:rounded-2xl yv:origin-center ${
+        className={`yv:h-[66vh] 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'
         }`}
       >
-        <section className="yv:bg-muted yv:py-3 yv:w-full yv:rounded-t-2xl yv:px-4 yv:border-b yv:border-border yv:flex yv:flex-row yv:justify-between yv:items-center">
-          <div className="yv:flex yv:flex-col">
-            <h2 className="yv:font-bold yv:text-base yv:line-clamp-1">Bible Versions</h2>
-          </div>
-          <div className="yv:flex yv:items-center yv:gap-2">
-            <Button
-              aria-label="Select language"
-              className="yv:bg-card yv:border yv:border-transparent yv:hover:bg-card yv:hover:border-border"
-              size="sm"
-              onClick={() => setIsLanguagesOpen(true)}
-              variant="secondary"
-            >
-              <Globe size={16} />
-              <span className="yv:text-sm yv:font-medium yv:line-clamp-1">
-                {languages.find((language) => language.id === selectedLanguageId)?.englishName}
-              </span>
-              <Badge
-                variant="secondary"
-                className="yv:h-5 yv:min-w-5 yv:rounded-full yv:px-1 yv:font-mono yv:tabular-nums"
-              >
-                {filteredVersions.length}
-              </Badge>
-            </Button>
-
-            <PopoverClose asChild>
-              <Button
-                ref={closeRef}
-                variant="ghost"
-                size="icon"
-                className="yv:w-8 yv:h-8 yv:text-muted-foreground"
-              >
-                <XIcon size={16} />
-                <span className="yv:sr-only">Close version selector</span>
-              </Button>
-            </PopoverClose>
-          </div>
-        </section>
-
         <div className="yv:flex-1 yv:overflow-y-auto yv:py-2">
           {filteredVersions && filteredVersions.length > 0 ? (
             <ItemGroup data-testid="version-list">
diff --git a/packages/ui/src/components/ui/popover.tsx b/packages/ui/src/components/ui/popover.tsx
index 3899bda..66cdce0 100644
--- a/packages/ui/src/components/ui/popover.tsx
+++ b/packages/ui/src/components/ui/popover.tsx
@@ -1,5 +1,7 @@
 import * as React from 'react';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { Button } from './button';
+import { XIcon } from 'lucide-react';
 
 import { cn } from '@/lib/utils';
 
@@ -17,22 +19,44 @@ function PopoverTrigger({
 
 function PopoverContent({
   className,
+  children,
+  headerChild,
   align = 'center',
+  heading,
   sideOffset = 4,
+  theme = 'light',
   ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Content>): React.ReactNode {
+}: React.ComponentProps<typeof PopoverPrimitive.Content> & {
+  heading?: string;
+  headerChild?: React.ReactNode;
+  theme: 'light' | 'dark';
+}): React.ReactNode {
   return (
     <PopoverPrimitive.Portal>
       <PopoverPrimitive.Content
         data-slot="popover-content"
+        data-yv-sdk
+        data-yv-theme={theme}
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          'yv:bg-popover yv:text-popover-foreground yv:data-[state=open]:animate-in yv:data-[state=closed]:animate-out yv:data-[state=closed]:fade-out-0 yv:data-[state=open]:fade-in-0 yv:data-[state=closed]:zoom-out-95 yv:data-[state=open]:zoom-in-95 yv:data-[side=bottom]:slide-in-from-top-2 yv:data-[side=left]:slide-in-from-right-2 yv:data-[side=right]:slide-in-from-left-2 yv:data-[side=top]:slide-in-from-bottom-2 yv:z-50 yv:w-72 yv:origin-(--radix-popover-content-transform-origin) yv:rounded-md yv:border yv:p-4 yv:shadow-md yv:outline-hidden',
+          'yv:bg-popover yv:text-popover-foreground yv:data-[state=open]:animate-in yv:data-[state=closed]:animate-out yv:data-[state=closed]:fade-out-0 yv:data-[state=open]:fade-in-0 yv:data-[state=closed]:zoom-out-95 yv:data-[state=open]:zoom-in-95 yv:data-[side=bottom]:slide-in-from-top-2 yv:data-[side=left]:slide-in-from-right-2 yv:data-[side=right]:slide-in-from-left-2 yv:data-[side=top]:slide-in-from-bottom-2 yv:z-50 yv:origin-(--radix-popover-content-transform-origin) yv:outline-hidden yv:grid yv:grid-rows-[auto_1fr_auto] yv:p-0 yv:h-full yv:max-h-[66vh] yv:w-96 yv:sm:w-sm yv:overflow-hidden yv:rounded-2xl yv:border-0 yv:shadow-lg',
           className,
         )}
         {...props}
-      />
+      >
+        <section className="yv:bg-muted yv:py-3 yv:w-full yv:rounded-t-2xl yv:px-4 yv:border-b yv:border-border yv:flex yv:flex-row yv:justify-between yv:items-center yv:gap-1">
+          <h2 className="yv:font-bold yv:text-base">{heading}</h2>
+          {headerChild}
+          <PopoverClose asChild>
+            <Button variant="ghost" size="icon" className="yv:w-6 yv:h-6 yv:text-muted-foreground">
+              <XIcon />
+              <span className="yv:sr-only">Close</span>
+            </Button>
+          </PopoverClose>
+        </section>
+        {children}
+      </PopoverPrimitive.Content>
     </PopoverPrimitive.Portal>
   );
 }

From c59dcfabe022856f2e1317a79ca1a7ed4e8ae739 Mon Sep 17 00:00:00 2001
From: Brenden Manquen <bmanquen1993@gmail.com>
Date: Fri, 19 Dec 2025 10:58:41 -0600
Subject: [PATCH 2/5] test(ui): add interaction test for the bible reader
 settings

---
 .changeset/breezy-tables-jam.md               |  11 ++
 packages/core/src/__tests__/polyfills.ts      |  29 +++
 packages/core/vitest.config.ts                |   2 +-
 packages/ui/.storybook/main.ts                |   7 +-
 packages/ui/package.json                      |   1 +
 .../src/components/bible-reader.stories.tsx   |  48 +++++
 packages/ui/src/components/bible-reader.tsx   |   4 +-
 .../bible-version-picker.stories.tsx          |   4 +-
 packages/ui/src/components/ui/popover.tsx     |   2 +-
 packages/ui/src/components/verse.tsx          |   5 +-
 packages/ui/vitest.config.ts                  |   5 -
 pnpm-lock.yaml                                | 186 +++++++++++++++++-
 12 files changed, 286 insertions(+), 18 deletions(-)
 create mode 100644 .changeset/breezy-tables-jam.md
 create mode 100644 packages/core/src/__tests__/polyfills.ts

diff --git a/.changeset/breezy-tables-jam.md b/.changeset/breezy-tables-jam.md
new file mode 100644
index 0000000..25de6ea
--- /dev/null
+++ b/.changeset/breezy-tables-jam.md
@@ -0,0 +1,11 @@
+---
+'@youversion/platform-react-ui': minor
+'@youversion/platform-core': minor
+'@youversion/platform-react-hooks': minor
+---
+
+feat(ui): add bible reader settings
+
+- refactor popover component to have consistent styling across
+  multiple components and reduce duplication in code.
+- add bible reader settings and save the users settings to localStorage.
diff --git a/packages/core/src/__tests__/polyfills.ts b/packages/core/src/__tests__/polyfills.ts
new file mode 100644
index 0000000..17d91d9
--- /dev/null
+++ b/packages/core/src/__tests__/polyfills.ts
@@ -0,0 +1,29 @@
+class LocalStorageMock {
+  private store: Record<string, string> = {};
+
+  getItem(key: string): string | null {
+    return this.store[key] ?? null;
+  }
+
+  setItem(key: string, value: string): void {
+    this.store[key] = value;
+  }
+
+  removeItem(key: string): void {
+    delete this.store[key];
+  }
+
+  clear(): void {
+    this.store = {};
+  }
+
+  get length(): number {
+    return Object.keys(this.store).length;
+  }
+
+  key(index: number): string | null {
+    return Object.keys(this.store)[index] ?? null;
+  }
+}
+
+globalThis.localStorage = new LocalStorageMock() as Storage;
diff --git a/packages/core/vitest.config.ts b/packages/core/vitest.config.ts
index 9456d12..f3769d7 100644
--- a/packages/core/vitest.config.ts
+++ b/packages/core/vitest.config.ts
@@ -3,7 +3,7 @@ import { defineConfig } from 'vitest/config';
 export default defineConfig({
   test: {
     environment: 'node',
-    setupFiles: ['./src/__tests__/setup.ts'],
+    setupFiles: ['./src/__tests__/polyfills.ts', './src/__tests__/setup.ts'],
     testTimeout: 10_000,
     coverage: {
       provider: 'v8',
diff --git a/packages/ui/.storybook/main.ts b/packages/ui/.storybook/main.ts
index 932cdf6..ca53818 100644
--- a/packages/ui/.storybook/main.ts
+++ b/packages/ui/.storybook/main.ts
@@ -4,7 +4,12 @@ import { fileURLToPath } from 'url';
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: ['@storybook/addon-docs', '@storybook/addon-onboarding', '@storybook/addon-vitest'],
+  addons: [
+    '@storybook/addon-docs',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-vitest',
+    { name: '@storybook/addon-coverage', options: { istanbul: { include: ['**/stories/**'] } } },
+  ],
   framework: '@storybook/react-vite',
   staticDirs: ['../public'], // This is for Storybook mock service worker
   viteFinal: (config) => {
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 4ad1478..ab3e2ec 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -65,6 +65,7 @@
   "devDependencies": {
     "@internal/eslint-config": "workspace:*",
     "@internal/tsconfig": "workspace:*",
+    "@storybook/addon-coverage": "^3.0.0",
     "@storybook/addon-docs": "10.0.0",
     "@storybook/addon-onboarding": "10.0.0",
     "@storybook/addon-vitest": "10.0.0",
diff --git a/packages/ui/src/components/bible-reader.stories.tsx b/packages/ui/src/components/bible-reader.stories.tsx
index 1af0548..76999de 100644
--- a/packages/ui/src/components/bible-reader.stories.tsx
+++ b/packages/ui/src/components/bible-reader.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, screen, userEvent, waitFor } from 'storybook/test';
 import { BibleReader } from './bible-reader';
 
 const meta: Meta<typeof BibleReader.Root> = {
@@ -7,6 +8,9 @@ const meta: Meta<typeof BibleReader.Root> = {
   parameters: {
     layout: 'fullscreen',
   },
+  beforeEach: () => {
+    localStorage.clear();
+  },
   argTypes: {
     versionId: {
       control: 'number',
@@ -45,6 +49,7 @@ type Story = StoryObj<typeof BibleReader.Root>;
  * Default uncontrolled story: Component manages its own state with John 1 NIV as default
  */
 export const Default: Story = {
+  tags: ['integration'],
   args: {
     versionId: 111,
     fontSize: 16,
@@ -61,6 +66,49 @@ export const Default: Story = {
       </BibleReader.Root>
     </div>
   ),
+  play: async ({ canvasElement }) => {
+    await waitFor(
+      async () => {
+        const verseContainer = canvasElement.querySelector('[data-slot="yv-bible-renderer"]');
+        await expect(verseContainer).toBeInTheDocument();
+      },
+      { timeout: 5000 },
+    );
+
+    const verseContainer = canvasElement.querySelector('[data-slot="yv-bible-renderer"]');
+    await expect(verseContainer).toBeInTheDocument();
+
+    const themeContainer = canvasElement.querySelector('[data-yv-theme="light"]');
+    await expect(themeContainer).toBeInTheDocument();
+
+    const settingsButton = screen.getByRole('button', { name: /settings/i });
+    await userEvent.click(settingsButton);
+
+    await waitFor(async () => {
+      await expect(await screen.findByText('Reader Settings')).toBeInTheDocument();
+    });
+
+    const fontButtons = screen.getAllByRole('button', { name: /font/i });
+    await expect(fontButtons.length).toBe(2);
+
+    const decreaseFontButton = screen.getByTestId('decrease-font-size');
+    const increaseFontButton = screen.getByTestId('increase-font-size');
+
+    await userEvent.click(increaseFontButton);
+    await expect(localStorage.getItem('font-size')).toBe('18');
+
+    await userEvent.click(decreaseFontButton);
+    await expect(localStorage.getItem('font-size')).toBe('16');
+
+    const interButton = screen.getByRole('button', { name: /inter/i });
+    const sourceSerifButton = screen.getByRole('button', { name: /source serif/i });
+
+    await userEvent.click(sourceSerifButton);
+    await expect(localStorage.getItem('font-family')).toBe('Source Serif');
+
+    await userEvent.click(interButton);
+    await expect(localStorage.getItem('font-family')).toBe('Inter');
+  },
 };
 
 /**
diff --git a/packages/ui/src/components/bible-reader.tsx b/packages/ui/src/components/bible-reader.tsx
index 0107826..022e616 100644
--- a/packages/ui/src/components/bible-reader.tsx
+++ b/packages/ui/src/components/bible-reader.tsx
@@ -287,7 +287,7 @@ function Toolbar({ border = 'top' }: { border?: 'top' | 'bottom' }) {
               <div className="yv:grid yv:grid-cols-2">
                 <Button
                   className="yv:text-xs yv:text-black yv:dark:text-muted-foreground yv:rounded-l-[8px] yv:rounded-r-none yv:border yv:border-white yv:dark:border-border yv:h-auto yv:py-2"
-                  onClick={() => setCurrentFontSize((prev) => (prev -= 2))}
+                  onClick={() => setCurrentFontSize((prev) => prev - 2)}
                   size="lg"
                   variant="secondary"
                   data-testid="decrease-font-size"
@@ -296,7 +296,7 @@ function Toolbar({ border = 'top' }: { border?: 'top' | 'bottom' }) {
                 </Button>
                 <Button
                   className="yv:text-3xl yv:text-black yv:dark:text-muted-foreground yv:rounded-r-[8px] yv:rounded-l-none yv:border yv:border-white yv:dark:border-border yv:h-auto yv:py-2"
-                  onClick={() => setCurrentFontSize((prev) => (prev += 2))}
+                  onClick={() => setCurrentFontSize((prev) => prev + 2)}
                   size="lg"
                   variant="secondary"
                   data-testid="increase-font-size"
diff --git a/packages/ui/src/components/bible-version-picker.stories.tsx b/packages/ui/src/components/bible-version-picker.stories.tsx
index b670a61..29d5880 100644
--- a/packages/ui/src/components/bible-version-picker.stories.tsx
+++ b/packages/ui/src/components/bible-version-picker.stories.tsx
@@ -127,7 +127,9 @@ export const InteractiveLanguageSelection: Story = {
     const koreanOption = await screen.findByRole('listitem', { name: /korean/i });
     await userEvent.click(koreanOption);
 
-    await expect(languageButton).toHaveTextContent(/korean/i);
+    await expect(await screen.findByRole('button', { name: /select language/i })).toHaveTextContent(
+      /korean/i,
+    );
     await userEvent.click(languageButton);
   },
 };
diff --git a/packages/ui/src/components/ui/popover.tsx b/packages/ui/src/components/ui/popover.tsx
index 66cdce0..d9db7d1 100644
--- a/packages/ui/src/components/ui/popover.tsx
+++ b/packages/ui/src/components/ui/popover.tsx
@@ -29,7 +29,7 @@ function PopoverContent({
 }: React.ComponentProps<typeof PopoverPrimitive.Content> & {
   heading?: string;
   headerChild?: React.ReactNode;
-  theme: 'light' | 'dark';
+  theme?: 'light' | 'dark';
 }): React.ReactNode {
   return (
     <PopoverPrimitive.Portal>
diff --git a/packages/ui/src/components/verse.tsx b/packages/ui/src/components/verse.tsx
index 0c003c0..0e1936d 100644
--- a/packages/ui/src/components/verse.tsx
+++ b/packages/ui/src/components/verse.tsx
@@ -127,10 +127,7 @@ function VerseFootnoteButton({
           <Footnote />
         </button>
       </PopoverTrigger>
-      <PopoverContent
-        data-yv-sdk
-        className="yv:flex yv:flex-col yv:bg-background yv:p-0 yv:sm:w-sm yv:overflow-hidden yv:rounded-2xl yv:border-0 yv:shadow-lg"
-      >
+      <PopoverContent className="yv:flex yv:flex-col yv:bg-background yv:p-0 yv:sm:w-sm yv:overflow-hidden yv:rounded-2xl yv:border-0 yv:shadow-lg">
         <div className="yv:flex yv:justify-between yv:items-center yv:bg-secondary yv:p-2 yv:font-bold">
           Footnotes
           <PopoverClose asChild>
diff --git a/packages/ui/vitest.config.ts b/packages/ui/vitest.config.ts
index 5cdd379..5d7c48d 100644
--- a/packages/ui/vitest.config.ts
+++ b/packages/ui/vitest.config.ts
@@ -28,11 +28,6 @@ export default defineConfig({
           setupFiles: './src/test/setup.ts',
           include: ['src/**/*.test.{ts,tsx}'],
           exclude: ['**/*.stories.{ts,tsx}', 'node_modules/**'],
-          coverage: {
-            provider: 'v8',
-            reporter: ['text', 'json-summary'],
-            reportsDirectory: './coverage',
-          },
         },
       }),
       // Storybook integration tests project
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5e5114e..a56799d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -244,6 +244,9 @@ importers:
       '@internal/tsconfig':
         specifier: workspace:*
         version: link:../../tools/tsconfig
+      '@storybook/addon-coverage':
+        specifier: ^3.0.0
+        version: 3.0.0(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1))
       '@storybook/addon-docs':
         specifier: 10.0.0
         version: 10.0.0(@types/react@19.1.2)(esbuild@0.25.9)(rollup@4.50.1)(storybook@10.0.0(@testing-library/dom@10.4.1)(msw@2.11.6(@types/node@24.9.1)(typescript@5.9.3))(prettier@3.6.2)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1)))(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1))
@@ -1160,6 +1163,14 @@ packages:
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
     engines: {node: '>=12'}
 
+  '@istanbuljs/load-nyc-config@1.1.0':
+    resolution: {integrity: sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==}
+    engines: {node: '>=8'}
+
+  '@istanbuljs/schema@0.1.3':
+    resolution: {integrity: sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==}
+    engines: {node: '>=8'}
+
   '@joshwooding/vite-plugin-react-docgen-typescript@0.6.1':
     resolution: {integrity: sha512-J4BaTocTOYFkMHIra1JDWrMWpNmBl4EkplIwHEsV8aeUOtdWjwSnln9U7twjMFTAEB7mptNtSKyVi1Y2W9sDJw==}
     peerDependencies:
@@ -1191,6 +1202,9 @@ packages:
   '@jridgewell/trace-mapping@0.3.31':
     resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
 
+  '@jsdevtools/coverage-istanbul-loader@3.0.5':
+    resolution: {integrity: sha512-EUCPEkaRPvmHjWAAZkWMT7JDzpw7FKB00WTISaiXsbNOd5hCHg77XLA8sLYLFDo1zepYLo2w7GstN8YBqRXZfA==}
+
   '@manypkg/find-root@1.1.0':
     resolution: {integrity: sha512-mki5uBvhHzO8kYYix/WRy2WX8S3B5wdVSc9D6KcU5lQNglP2yt58/VfLuAK49glRXChosY8ap2oJ1qgma3GUVA==}
 
@@ -1966,6 +1980,9 @@ packages:
   '@standard-schema/spec@1.0.0':
     resolution: {integrity: sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==}
 
+  '@storybook/addon-coverage@3.0.0':
+    resolution: {integrity: sha512-ADXpeAXtSvyGs1BSZhtO5Bi2BUedcP6eGPcBm7w3cYSj6KTpww4epEp1lnUD4faojSBBIOI2bRa/a4NA+/zt2Q==}
+
   '@storybook/addon-docs@10.0.0':
     resolution: {integrity: sha512-mwEI/os48ncIQMrLFAI3rJf88Ge/2/7Pj+g6+MRYjWAz5x9zCLrOgRUJFRvuzVY4SJKsKuSPYplrbmj4L+YlRQ==}
     peerDependencies:
@@ -2374,6 +2391,9 @@ packages:
   '@types/estree@1.0.8':
     resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
+  '@types/istanbul-lib-coverage@2.0.6':
+    resolution: {integrity: sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==}
+
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
@@ -2736,6 +2756,11 @@ packages:
       ajv:
         optional: true
 
+  ajv-keywords@3.5.2:
+    resolution: {integrity: sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==}
+    peerDependencies:
+      ajv: ^6.9.1
+
   ajv@6.12.6:
     resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
 
@@ -2875,6 +2900,9 @@ packages:
   bidi-js@1.0.3:
     resolution: {integrity: sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==}
 
+  big.js@5.2.2:
+    resolution: {integrity: sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==}
+
   brace-expansion@1.1.12:
     resolution: {integrity: sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==}
 
@@ -2919,6 +2947,10 @@ packages:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
 
+  camelcase@5.3.1:
+    resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
+    engines: {node: '>=6'}
+
   caniuse-lite@1.0.30001741:
     resolution: {integrity: sha512-QGUGitqsc8ARjLdgAfxETDhRbJ0REsP6O3I96TAth/mVjh2cYzN2u+3AzPP3aVSm2FehEItaJw1xd+IGBXWeSw==}
 
@@ -3022,6 +3054,9 @@ packages:
     resolution: {integrity: sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==}
     engines: {node: ^14.18.0 || >=16.10.0}
 
+  convert-source-map@1.9.0:
+    resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
+
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
@@ -3194,6 +3229,10 @@ packages:
   emoji-regex@9.2.2:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
 
+  emojis-list@3.0.0:
+    resolution: {integrity: sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==}
+    engines: {node: '>= 4'}
+
   empathic@2.0.0:
     resolution: {integrity: sha512-i6UzDscO/XfAcNYD75CfICkmfLedpyPDdozrLMmQc5ORaQcdMoc21OnlEylMIqI7U8eniKrPMxxtj8k0vhmJhA==}
     engines: {node: '>=14'}
@@ -3574,6 +3613,10 @@ packages:
     resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
     engines: {node: '>=6'}
 
+  get-package-type@0.1.0:
+    resolution: {integrity: sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==}
+    engines: {node: '>=8.0.0'}
+
   get-proto@1.0.1:
     resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
     engines: {node: '>= 0.4'}
@@ -3881,6 +3924,14 @@ packages:
     resolution: {integrity: sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==}
     engines: {node: '>=8'}
 
+  istanbul-lib-instrument@4.0.3:
+    resolution: {integrity: sha512-BXgQl9kf4WTCPCCpmFGoJkz/+uhvm7h7PFKUYxh7qarQd3ER33vHG//qaE8eN25l07YqZPpHXU9I09l/RD5aGQ==}
+    engines: {node: '>=8'}
+
+  istanbul-lib-instrument@6.0.3:
+    resolution: {integrity: sha512-Vtgk7L/R2JHyyGW07spoFlB8/lpjiOLTjMdms6AFMraYt3BaJauod/NGrfnVG/y4Ix1JEuMRPDPEj2ua+zz1/Q==}
+    engines: {node: '>=10'}
+
   istanbul-lib-report@3.0.1:
     resolution: {integrity: sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==}
     engines: {node: '>=10'}
@@ -4108,6 +4159,10 @@ packages:
     resolution: {integrity: sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
+  loader-utils@2.0.4:
+    resolution: {integrity: sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==}
+    engines: {node: '>=8.9.0'}
+
   locate-path@5.0.0:
     resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
     engines: {node: '>=8'}
@@ -4186,6 +4241,9 @@ packages:
   mdn-data@2.12.2:
     resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==}
 
+  merge-source-map@1.1.0:
+    resolution: {integrity: sha512-Qkcp7P2ygktpMPh2mCQZaf3jhN6D3Z/qVZHSdWvQ+2Ef5HgRAPBO57A77+ENm0CPx2+1Ce/MYKi3ymqdfuqibw==}
+
   merge2@1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
@@ -4745,6 +4803,10 @@ packages:
   scheduler@0.26.0:
     resolution: {integrity: sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==}
 
+  schema-utils@2.7.1:
+    resolution: {integrity: sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==}
+    engines: {node: '>= 8.9.0'}
+
   semver@6.3.1:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
@@ -4843,6 +4905,10 @@ packages:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
 
+  source-map@0.7.6:
+    resolution: {integrity: sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==}
+    engines: {node: '>= 12'}
+
   source-map@0.8.0-beta.0:
     resolution: {integrity: sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==}
     engines: {node: '>= 8'}
@@ -5009,6 +5075,10 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  test-exclude@6.0.0:
+    resolution: {integrity: sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==}
+    engines: {node: '>=8'}
+
   text-table@0.2.0:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
 
@@ -5286,6 +5356,11 @@ packages:
       '@types/react':
         optional: true
 
+  vite-plugin-istanbul@6.0.2:
+    resolution: {integrity: sha512-0/sKwjEEIwbEyl43xX7onX3dIbMJAsigNsKyyVPalG1oRFo5jn3qkJbS2PUfp9wrr3piy1eT6qRoeeum2p4B2A==}
+    peerDependencies:
+      vite: '>=5.4.21'
+
   vite@7.1.11:
     resolution: {integrity: sha512-uzcxnSDVjAopEUjljkWh8EIrg6tlzrjFUfMcR1EVsRDGwf/ccef0qQPRyOrROwhrTDaApueq+ja+KLPlzR/zdg==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -6312,6 +6387,16 @@ snapshots:
       wrap-ansi: 8.1.0
       wrap-ansi-cjs: wrap-ansi@7.0.0
 
+  '@istanbuljs/load-nyc-config@1.1.0':
+    dependencies:
+      camelcase: 5.3.1
+      find-up: 4.1.0
+      get-package-type: 0.1.0
+      js-yaml: 3.14.1
+      resolve-from: 5.0.0
+
+  '@istanbuljs/schema@0.1.3': {}
+
   '@joshwooding/vite-plugin-react-docgen-typescript@0.6.1(typescript@5.9.3)(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1))':
     dependencies:
       glob: 10.4.5
@@ -6351,6 +6436,16 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  '@jsdevtools/coverage-istanbul-loader@3.0.5':
+    dependencies:
+      convert-source-map: 1.9.0
+      istanbul-lib-instrument: 4.0.3
+      loader-utils: 2.0.4
+      merge-source-map: 1.1.0
+      schema-utils: 2.7.1
+    transitivePeerDependencies:
+      - supports-color
+
   '@manypkg/find-root@1.1.0':
     dependencies:
       '@babel/runtime': 7.28.4
@@ -7030,6 +7125,20 @@ snapshots:
 
   '@standard-schema/spec@1.0.0': {}
 
+  '@storybook/addon-coverage@3.0.0(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1))':
+    dependencies:
+      '@istanbuljs/load-nyc-config': 1.1.0
+      '@jsdevtools/coverage-istanbul-loader': 3.0.5
+      '@types/istanbul-lib-coverage': 2.0.6
+      convert-source-map: 2.0.0
+      espree: 9.6.1
+      istanbul-lib-instrument: 6.0.3
+      test-exclude: 6.0.0
+      vite-plugin-istanbul: 6.0.2(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1))
+    transitivePeerDependencies:
+      - supports-color
+      - vite
+
   '@storybook/addon-docs@10.0.0(@types/react@19.1.2)(esbuild@0.25.9)(rollup@4.50.1)(storybook@10.0.0(@testing-library/dom@10.4.1)(msw@2.11.6(@types/node@24.9.1)(typescript@5.9.3))(prettier@3.6.2)(react-dom@19.1.2(react@19.1.2))(react@19.1.2)(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1)))(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1))':
     dependencies:
       '@mdx-js/react': 3.1.1(@types/react@19.1.2)(react@19.1.2)
@@ -7412,6 +7521,8 @@ snapshots:
 
   '@types/estree@1.0.8': {}
 
+  '@types/istanbul-lib-coverage@2.0.6': {}
+
   '@types/json-schema@7.0.15': {}
 
   '@types/json5@0.0.29': {}
@@ -7793,11 +7904,11 @@ snapshots:
 
   '@vitest/browser-playwright@4.0.4(msw@2.11.6(@types/node@24.9.1)(typescript@5.9.3))(playwright@1.56.1)(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1))(vitest@4.0.4)':
     dependencies:
-      '@vitest/browser': 4.0.4(msw@2.11.6(@types/node@24.9.1)(typescript@5.9.3))(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1))(vitest@4.0.4(@types/node@24.9.1)(@vitest/browser-playwright@4.0.4)(jiti@2.6.1)(jsdom@24.0.0)(lightningcss@1.30.2)(msw@2.11.6(@types/node@24.9.1)(typescript@5.9.3))(terser@5.44.0)(yaml@2.8.1))
+      '@vitest/browser': 4.0.4(msw@2.11.6(@types/node@24.9.1)(typescript@5.9.3))(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1))(vitest@4.0.4(@types/node@24.9.1)(@vitest/browser-playwright@4.0.4)(jiti@2.6.1)(jsdom@27.0.1(postcss@8.5.6))(lightningcss@1.30.2)(msw@2.11.6(@types/node@24.9.1)(typescript@5.9.3))(terser@5.44.0)(yaml@2.8.1))
       '@vitest/mocker': 4.0.4(msw@2.11.6(@types/node@24.9.1)(typescript@5.9.3))(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1))
       playwright: 1.56.1
       tinyrainbow: 3.0.3
-      vitest: 4.0.4(@types/node@24.9.1)(@vitest/browser-playwright@4.0.4)(jiti@2.6.1)(jsdom@24.0.0)(lightningcss@1.30.2)(msw@2.11.6(@types/node@24.9.1)(typescript@5.9.3))(terser@5.44.0)(yaml@2.8.1)
+      vitest: 4.0.4(@types/node@24.9.1)(@vitest/browser-playwright@4.0.4)(jiti@2.6.1)(jsdom@27.0.1(postcss@8.5.6))(lightningcss@1.30.2)(msw@2.11.6(@types/node@24.9.1)(typescript@5.9.3))(terser@5.44.0)(yaml@2.8.1)
     transitivePeerDependencies:
       - bufferutil
       - msw
@@ -7820,6 +7931,7 @@ snapshots:
       - msw
       - utf-8-validate
       - vite
+    optional: true
 
   '@vitest/browser@4.0.4(msw@2.11.6(@types/node@24.9.1)(typescript@5.9.3))(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1))(vitest@4.0.4(@types/node@24.9.1)(@vitest/browser-playwright@4.0.4)(jiti@2.6.1)(jsdom@27.0.1(postcss@8.5.6))(lightningcss@1.30.2)(msw@2.11.6(@types/node@24.9.1)(typescript@5.9.3))(terser@5.44.0)(yaml@2.8.1))':
     dependencies:
@@ -7837,7 +7949,6 @@ snapshots:
       - msw
       - utf-8-validate
       - vite
-    optional: true
 
   '@vitest/coverage-v8@4.0.4(@vitest/browser@4.0.4(msw@2.11.6(@types/node@24.9.1)(typescript@5.9.3))(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1))(vitest@4.0.4(@types/node@24.9.1)(@vitest/browser-playwright@4.0.4)(jiti@2.6.1)(jsdom@24.0.0)(lightningcss@1.30.2)(msw@2.11.6(@types/node@24.9.1)(typescript@5.9.3))(terser@5.44.0)(yaml@2.8.1)))(vitest@4.0.4(@types/node@24.9.1)(@vitest/browser-playwright@4.0.4)(jiti@2.6.1)(jsdom@24.0.0)(lightningcss@1.30.2)(msw@2.11.6(@types/node@24.9.1)(typescript@5.9.3))(terser@5.44.0)(yaml@2.8.1))':
     dependencies:
@@ -7964,6 +8075,10 @@ snapshots:
     optionalDependencies:
       ajv: 8.13.0
 
+  ajv-keywords@3.5.2(ajv@6.12.6):
+    dependencies:
+      ajv: 6.12.6
+
   ajv@6.12.6:
     dependencies:
       fast-deep-equal: 3.1.3
@@ -8131,6 +8246,8 @@ snapshots:
     dependencies:
       require-from-string: 2.0.2
 
+  big.js@5.2.2: {}
+
   brace-expansion@1.1.12:
     dependencies:
       balanced-match: 1.0.2
@@ -8180,6 +8297,8 @@ snapshots:
 
   callsites@3.1.0: {}
 
+  camelcase@5.3.1: {}
+
   caniuse-lite@1.0.30001741: {}
 
   chai@5.3.3:
@@ -8278,6 +8397,8 @@ snapshots:
 
   consola@3.4.2: {}
 
+  convert-source-map@1.9.0: {}
+
   convert-source-map@2.0.0: {}
 
   cookie@1.0.2: {}
@@ -8429,6 +8550,8 @@ snapshots:
 
   emoji-regex@9.2.2: {}
 
+  emojis-list@3.0.0: {}
+
   empathic@2.0.0: {}
 
   enhanced-resolve@5.18.3:
@@ -9075,6 +9198,8 @@ snapshots:
 
   get-nonce@1.0.1: {}
 
+  get-package-type@0.1.0: {}
+
   get-proto@1.0.1:
     dependencies:
       dunder-proto: 1.0.1
@@ -9387,6 +9512,25 @@ snapshots:
 
   istanbul-lib-coverage@3.2.2: {}
 
+  istanbul-lib-instrument@4.0.3:
+    dependencies:
+      '@babel/core': 7.28.5
+      '@istanbuljs/schema': 0.1.3
+      istanbul-lib-coverage: 3.2.2
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  istanbul-lib-instrument@6.0.3:
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/parser': 7.28.5
+      '@istanbuljs/schema': 0.1.3
+      istanbul-lib-coverage: 3.2.2
+      semver: 7.7.3
+    transitivePeerDependencies:
+      - supports-color
+
   istanbul-lib-report@3.0.1:
     dependencies:
       istanbul-lib-coverage: 3.2.2
@@ -9668,6 +9812,12 @@ snapshots:
 
   load-tsconfig@0.2.5: {}
 
+  loader-utils@2.0.4:
+    dependencies:
+      big.js: 5.2.2
+      emojis-list: 3.0.0
+      json5: 2.2.3
+
   locate-path@5.0.0:
     dependencies:
       p-locate: 4.1.0
@@ -9740,6 +9890,10 @@ snapshots:
 
   mdn-data@2.12.2: {}
 
+  merge-source-map@1.1.0:
+    dependencies:
+      source-map: 0.6.1
+
   merge2@1.4.1: {}
 
   micromatch@4.0.8:
@@ -10327,6 +10481,12 @@ snapshots:
 
   scheduler@0.26.0: {}
 
+  schema-utils@2.7.1:
+    dependencies:
+      '@types/json-schema': 7.0.15
+      ajv: 6.12.6
+      ajv-keywords: 3.5.2(ajv@6.12.6)
+
   semver@6.3.1: {}
 
   semver@7.5.4:
@@ -10459,6 +10619,8 @@ snapshots:
 
   source-map@0.6.1: {}
 
+  source-map@0.7.6: {}
+
   source-map@0.8.0-beta.0:
     dependencies:
       whatwg-url: 7.1.0
@@ -10649,6 +10811,12 @@ snapshots:
       source-map-support: 0.5.21
     optional: true
 
+  test-exclude@6.0.0:
+    dependencies:
+      '@istanbuljs/schema': 0.1.3
+      glob: 7.2.3
+      minimatch: 3.1.2
+
   text-table@0.2.0: {}
 
   thenify-all@1.6.0:
@@ -10958,6 +11126,18 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.1.2
 
+  vite-plugin-istanbul@6.0.2(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1)):
+    dependencies:
+      '@istanbuljs/load-nyc-config': 1.1.0
+      espree: 10.4.0
+      istanbul-lib-instrument: 6.0.3
+      picocolors: 1.1.1
+      source-map: 0.7.6
+      test-exclude: 6.0.0
+      vite: 7.1.11(@types/node@24.9.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1)
+    transitivePeerDependencies:
+      - supports-color
+
   vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1):
     dependencies:
       esbuild: 0.25.11

From 185d50ab57aa552ebbeac0ff6e4636275836fb24 Mon Sep 17 00:00:00 2001
From: Brenden Manquen <bmanquen1993@gmail.com>
Date: Sat, 20 Dec 2025 12:20:16 -0600
Subject: [PATCH 3/5] refactor(ui): namespace the localStorage and limit font
 size

- add a min and max fontSize for the BibleReader
- add youversion-platform:reader:* namespacing for reader settings
---
 .../src/components/bible-reader.stories.tsx   | 64 +++++++++++++++++--
 packages/ui/src/components/bible-reader.tsx   | 29 +++++++--
 2 files changed, 80 insertions(+), 13 deletions(-)

diff --git a/packages/ui/src/components/bible-reader.stories.tsx b/packages/ui/src/components/bible-reader.stories.tsx
index 76999de..01d75bd 100644
--- a/packages/ui/src/components/bible-reader.stories.tsx
+++ b/packages/ui/src/components/bible-reader.stories.tsx
@@ -17,7 +17,7 @@ const meta: Meta<typeof BibleReader.Root> = {
       description: 'The Bible version ID to display',
     },
     fontSize: {
-      control: { type: 'range', min: 14, max: 24, step: 1 },
+      control: { type: 'range', min: 8, max: 24, step: 1 },
       description: 'Font size in pixels',
     },
     lineHeight: {
@@ -52,7 +52,6 @@ export const Default: Story = {
   tags: ['integration'],
   args: {
     versionId: 111,
-    fontSize: 16,
     lineHeight: 1.6,
     fontFamily: "'Inter', sans-serif",
     showVerseNumbers: true,
@@ -95,19 +94,29 @@ export const Default: Story = {
     const increaseFontButton = screen.getByTestId('increase-font-size');
 
     await userEvent.click(increaseFontButton);
-    await expect(localStorage.getItem('font-size')).toBe('18');
+    await expect(localStorage.getItem('youversion-platform:reader:font-size')).toBe('18');
+    await userEvent.click(increaseFontButton);
+    await userEvent.click(increaseFontButton);
+    await expect(localStorage.getItem('youversion-platform:reader:font-size')).toBe('20');
 
     await userEvent.click(decreaseFontButton);
-    await expect(localStorage.getItem('font-size')).toBe('16');
+    await userEvent.click(decreaseFontButton);
+    await expect(localStorage.getItem('youversion-platform:reader:font-size')).toBe('16');
+    await userEvent.click(decreaseFontButton);
+    await userEvent.click(decreaseFontButton);
+    await userEvent.click(decreaseFontButton);
+    await expect(localStorage.getItem('youversion-platform:reader:font-size')).toBe('12');
 
     const interButton = screen.getByRole('button', { name: /inter/i });
     const sourceSerifButton = screen.getByRole('button', { name: /source serif/i });
 
     await userEvent.click(sourceSerifButton);
-    await expect(localStorage.getItem('font-family')).toBe('Source Serif');
+    await expect(localStorage.getItem('youversion-platform:reader:font-family')).toBe(
+      'Source Serif',
+    );
 
     await userEvent.click(interButton);
-    await expect(localStorage.getItem('font-family')).toBe('Inter');
+    await expect(localStorage.getItem('youversion-platform:reader:font-family')).toBe('Inter');
   },
 };
 
@@ -137,6 +146,7 @@ export const DarkTheme: Story = {
  * Custom styling with larger font and increased line height
  */
 export const CustomStyling: Story = {
+  tags: ['integration'],
   args: {
     versionId: 111,
     fontSize: 18,
@@ -153,6 +163,48 @@ export const CustomStyling: Story = {
       </BibleReader.Root>
     </div>
   ),
+  play: async ({ canvasElement }) => {
+    await waitFor(
+      async () => {
+        const verseContainer = canvasElement.querySelector('[data-slot="yv-bible-renderer"]');
+        await expect(verseContainer).toBeInTheDocument();
+      },
+      { timeout: 5000 },
+    );
+
+    await expect(localStorage.getItem('youversion-platform:reader:font-size')).toBe('18');
+  },
+};
+
+export const FontSizeOutOfRange: Story = {
+  tags: ['integration'],
+  args: {
+    versionId: 111,
+    fontSize: 28,
+    lineHeight: 2.0,
+    fontFamily: "'Nunito Sans', sans-serif",
+    showVerseNumbers: false,
+    background: 'light',
+  },
+  render: (args) => (
+    <div className="yv:h-screen yv:bg-background">
+      <BibleReader.Root {...args}>
+        <BibleReader.Toolbar border="bottom" />
+        <BibleReader.Content />
+      </BibleReader.Root>
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    await waitFor(
+      async () => {
+        const verseContainer = canvasElement.querySelector('[data-slot="yv-bible-renderer"]');
+        await expect(verseContainer).toBeInTheDocument();
+      },
+      { timeout: 5000 },
+    );
+
+    await expect(localStorage.getItem('youversion-platform:reader:font-size')).toBe('16');
+  },
 };
 
 export const RealAPI: Story = {
diff --git a/packages/ui/src/components/bible-reader.tsx b/packages/ui/src/components/bible-reader.tsx
index 022e616..f519088 100644
--- a/packages/ui/src/components/bible-reader.tsx
+++ b/packages/ui/src/components/bible-reader.tsx
@@ -91,21 +91,26 @@ function Root({
   });
 
   const [currentFontSize, setCurrentFontSize] = useState(() => {
+    if (fontSize > 20 || fontSize < 12) fontSize = 16;
     if (typeof window === 'undefined') return fontSize;
-    const size = localStorage.getItem('font-size');
+    const size = localStorage.getItem('youversion-platform:reader:font-size');
     return size ? parseInt(size) : fontSize;
   });
 
   const [currentFontFamily, setCurrentFontFamily] = useState(() => {
     if (typeof window === 'undefined') return fontFamily;
-    return localStorage.getItem('font-family') || fontFamily;
+    return localStorage.getItem('youversion-platform:reader:font-family') || fontFamily;
   });
 
   useEffect(() => {
     if (typeof window === 'undefined') return;
-    localStorage.setItem('font-size', currentFontSize.toString());
-    localStorage.setItem('font-family', currentFontFamily);
-  }, [currentFontSize, currentFontFamily]);
+    localStorage.setItem('youversion-platform:reader:font-size', currentFontSize.toString());
+  }, [currentFontSize]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    localStorage.setItem('youversion-platform:reader:font-family', currentFontFamily);
+  }, [currentFontFamily]);
 
   const providerTheme = useTheme();
   const theme = background || providerTheme;
@@ -287,7 +292,12 @@ function Toolbar({ border = 'top' }: { border?: 'top' | 'bottom' }) {
               <div className="yv:grid yv:grid-cols-2">
                 <Button
                   className="yv:text-xs yv:text-black yv:dark:text-muted-foreground yv:rounded-l-[8px] yv:rounded-r-none yv:border yv:border-white yv:dark:border-border yv:h-auto yv:py-2"
-                  onClick={() => setCurrentFontSize((prev) => prev - 2)}
+                  onClick={() =>
+                    setCurrentFontSize((prev) => {
+                      if (prev > 12) return prev - 2;
+                      return prev;
+                    })
+                  }
                   size="lg"
                   variant="secondary"
                   data-testid="decrease-font-size"
@@ -296,7 +306,12 @@ function Toolbar({ border = 'top' }: { border?: 'top' | 'bottom' }) {
                 </Button>
                 <Button
                   className="yv:text-3xl yv:text-black yv:dark:text-muted-foreground yv:rounded-r-[8px] yv:rounded-l-none yv:border yv:border-white yv:dark:border-border yv:h-auto yv:py-2"
-                  onClick={() => setCurrentFontSize((prev) => prev + 2)}
+                  onClick={() =>
+                    setCurrentFontSize((prev) => {
+                      if (prev < 20) return prev + 2;
+                      return prev;
+                    })
+                  }
                   size="lg"
                   variant="secondary"
                   data-testid="increase-font-size"

From 834b250f3f7ee375d4ebbd1d01c18d7d8a812712 Mon Sep 17 00:00:00 2001
From: Brenden Manquen <bmanquen1993@gmail.com>
Date: Sat, 20 Dec 2025 14:01:35 -0600
Subject: [PATCH 4/5] feat(core): add pagination to getVersions endpoint

- update tests to ensure that proper amount of responses are returned
based on the page_size query param.
- add the ability to specify a page_size to fetch a specific number of
items at a time.
---
 .changeset/clear-pigs-vanish.md               | 12 +++++++
 packages/core/src/__tests__/MockBibles.ts     |  4 +--
 packages/core/src/__tests__/bible.test.ts     | 31 ++++++++++++++++---
 packages/core/src/__tests__/handlers.ts       | 31 ++++++++++++++++---
 packages/core/src/__tests__/languages.test.ts |  6 +++-
 packages/core/src/bible.ts                    | 12 +++++++
 6 files changed, 83 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/clear-pigs-vanish.md

diff --git a/.changeset/clear-pigs-vanish.md b/.changeset/clear-pigs-vanish.md
new file mode 100644
index 0000000..b4c098a
--- /dev/null
+++ b/.changeset/clear-pigs-vanish.md
@@ -0,0 +1,12 @@
+---
+'@youversion/platform-core': minor
+'@youversion/platform-react-ui': minor
+'@youversion/platform-react-hooks': minor
+---
+
+feat(core): add pagination to the getVersions endpoint
+
+- update tests to ensure that proper amount of responses are returned
+  based on the page_size query param.
+- add the ability to specify a page_size to fetch a specific number of
+  items at a time.
diff --git a/packages/core/src/__tests__/MockBibles.ts b/packages/core/src/__tests__/MockBibles.ts
index 7890844..a5dea58 100644
--- a/packages/core/src/__tests__/MockBibles.ts
+++ b/packages/core/src/__tests__/MockBibles.ts
@@ -4,8 +4,8 @@ const baseBibleBooks = [
   {
     id: 'GEN',
     title: 'Genesis',
-    full_title: 'The First Book of Moses, Called Genesis',
-    abbreviation: 'Gen',
+    full_title: 'Genesis',
+    abbreviation: 'Gen.',
     canon: 'old_testament',
     chapters: mockGenesisChapters,
   },
diff --git a/packages/core/src/__tests__/bible.test.ts b/packages/core/src/__tests__/bible.test.ts
index 892b6a3..fd2e3a9 100644
--- a/packages/core/src/__tests__/bible.test.ts
+++ b/packages/core/src/__tests__/bible.test.ts
@@ -27,6 +27,27 @@ describe('BibleClient', () => {
   });
 
   describe('getVersions', () => {
+    it('should fetch number of Bible versions specified by page_size param', async () => {
+      const versions = await bibleClient.getVersions('en*', undefined, { page_size: 11 });
+
+      expect(versions.data.length).toEqual(11);
+    });
+
+    it('should fetch next page using page_token from first response', async () => {
+      const firstPage = await bibleClient.getVersions('en*', undefined, { page_size: 5 });
+
+      expect(firstPage.data.length).toEqual(5);
+      expect(firstPage.next_page_token).toBeDefined();
+
+      const secondPage = await bibleClient.getVersions('en*', undefined, {
+        page_size: 5,
+        page_token: firstPage.next_page_token!,
+      });
+
+      expect(secondPage.data.length).toEqual(5);
+      expect(secondPage.data[0]?.id).not.toEqual(firstPage.data[0]?.id);
+    });
+
     it('should fetch Bible versions with language ranges', async () => {
       const versions = await bibleClient.getVersions('en*');
 
@@ -117,7 +138,7 @@ describe('BibleClient', () => {
 
   describe('getBooks', () => {
     it('should fetch all books for a version', async () => {
-      const books = await bibleClient.getBooks(1);
+      const books = await bibleClient.getBooks(111);
 
       const { success } = BibleBookSchema.safeParse(books.data[0]);
       expect(success).toBe(true);
@@ -125,8 +146,8 @@ describe('BibleClient', () => {
       expect(books.data).toHaveLength(66);
       expect(books.data[0]).toHaveProperty('id', 'GEN');
       expect(books.data[0]).toHaveProperty('title', 'Genesis');
-      expect(books.data[0]).toHaveProperty('full_title', 'The First Book of Moses, Called Genesis');
-      expect(books.data[0]).toHaveProperty('abbreviation', 'Gen');
+      expect(books.data[0]).toHaveProperty('full_title', 'Genesis');
+      expect(books.data[0]).toHaveProperty('abbreviation', 'Gen.');
       expect(books.data[0]?.intro).toEqual({
         id: 'INTRO',
         passage_id: 'GEN.INTRO',
@@ -139,7 +160,7 @@ describe('BibleClient', () => {
 
   describe('getBook', () => {
     it('should fetch a specific book', async () => {
-      const book = await bibleClient.getBook(1, 'GEN');
+      const book = await bibleClient.getBook(111, 'GEN');
 
       const { success } = BibleBookSchema.safeParse(book);
       expect(success).toBe(true);
@@ -147,7 +168,7 @@ describe('BibleClient', () => {
       expect(book.chapters).toHaveLength(50);
       expect(book).toHaveProperty('id', 'GEN');
       expect(book).toHaveProperty('title', 'Genesis');
-      expect(book).toHaveProperty('abbreviation', 'Gen');
+      expect(book).toHaveProperty('abbreviation', 'Gen.');
       expect(book).toHaveProperty('intro');
       expect(book.intro).toEqual({
         id: 'INTRO',
diff --git a/packages/core/src/__tests__/handlers.ts b/packages/core/src/__tests__/handlers.ts
index a990971..0e0a07b 100644
--- a/packages/core/src/__tests__/handlers.ts
+++ b/packages/core/src/__tests__/handlers.ts
@@ -106,11 +106,32 @@ export const handlers = [
   }),
 
   // Versions endpoints
-  http.get(`https://${apiHost}/v1/bibles`, () => {
+  http.get(`https://${apiHost}/v1/bibles`, ({ request }) => {
+    const url = new URL(request.url);
+    const pageSize = url.searchParams.get('page_size');
+    const pageToken = url.searchParams.get('page_token');
+
+    const defaultPageSize = 25;
+    const size = pageSize ? parseInt(pageSize, 10) : defaultPageSize;
+    let start = 0;
+
+    if (pageToken) {
+      try {
+        const decoded = JSON.parse(atob(pageToken)) as { start?: number };
+        start = decoded.start || 0;
+      } catch {
+        start = 0;
+      }
+    }
+
+    const end = start + size;
+    const paginatedVersions = mockVersions.slice(start, end);
+    const hasMore = end < mockVersions.length;
+
     return HttpResponse.json({
-      data: mockVersions,
-      next_page_token: null,
-      total_size: 14,
+      data: paginatedVersions,
+      next_page_token: hasMore ? btoa(JSON.stringify({ start: end })) : null,
+      total_size: mockVersions.length,
     });
   }),
 
@@ -127,7 +148,7 @@ export const handlers = [
     return HttpResponse.json(mockBibleGenesis);
   }),
 
-  // Chaper endpoints
+  // Chapter endpoints
   http.get(`https://${apiHost}/v1/bibles/:bible_id/books/:book_id/chapters`, () => {
     return HttpResponse.json({ data: mockGenesisChapters });
   }),
diff --git a/packages/core/src/__tests__/languages.test.ts b/packages/core/src/__tests__/languages.test.ts
index aebed44..dbdc4dc 100644
--- a/packages/core/src/__tests__/languages.test.ts
+++ b/packages/core/src/__tests__/languages.test.ts
@@ -32,7 +32,11 @@ describe('LanguagesClient', () => {
       const { success } = LanguageSchema.safeParse(languages.data[0]);
       expect(success).toBe(true);
       expect(languages.data).toHaveLength(20);
-      expect(languages.data.every((language) => language.countries?.includes('US'))).toBe(true);
+      /** This is not true, it will always return the number provided in page_size
+       *  and it will put the ones that have the country in their countries array
+       *  at the top of the list.
+       */
+      // expect(languages.data.every((language) => language.countries?.includes('US'))).toBe(true);
       expect(languages.next_page_token).not.toBeNull();
     });
 
diff --git a/packages/core/src/bible.ts b/packages/core/src/bible.ts
index 2d6b45a..9277a53 100644
--- a/packages/core/src/bible.ts
+++ b/packages/core/src/bible.ts
@@ -57,6 +57,7 @@ export class BibleClient {
   async getVersions(
     language_ranges: string | string[],
     license_id?: string | number,
+    options?: { page_size?: number; page_token?: string },
   ): Promise<Collection<BibleVersion>> {
     const languageRangeArray = Array.isArray(language_ranges) ? language_ranges : [language_ranges];
 
@@ -68,9 +69,20 @@ export class BibleClient {
     const params: Record<string, string | number | string[]> = {
       'language_ranges[]': parsedLanguageRanges,
     };
+
     if (license_id !== undefined) {
       params.license_id = license_id;
     }
+
+    if (options?.page_size !== undefined) {
+      const pageSizeSchema = z.number().int().positive();
+      pageSizeSchema.parse(options.page_size);
+      params.page_size = options.page_size;
+    }
+
+    if (options?.page_token !== undefined) {
+      params.page_token = options.page_token;
+    }
     return this.client.get<Collection<BibleVersion>>(`/v1/bibles`, params);
   }
 

From d5a9e02bcf920c768108c66df37e78737c19b406 Mon Sep 17 00:00:00 2001
From: Brenden Manquen <bmanquen1993@gmail.com>
Date: Mon, 5 Jan 2026 12:43:31 -0600
Subject: [PATCH 5/5] refactor(ui): add constants for font sizes on bible
 reader

---
 packages/ui/src/components/bible-reader.tsx | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/ui/src/components/bible-reader.tsx b/packages/ui/src/components/bible-reader.tsx
index f519088..fa8529b 100644
--- a/packages/ui/src/components/bible-reader.tsx
+++ b/packages/ui/src/components/bible-reader.tsx
@@ -55,6 +55,10 @@ export type RootProps = {
   children?: ReactNode;
 };
 
+const MIN_FONT_SIZE = 12;
+const MAX_FONT_SIZE = 20;
+const DEFAULT_FONT_SIZE = 16;
+
 function Root({
   book: controlledBook,
   defaultBook = 'JHN',
@@ -66,7 +70,7 @@ function Root({
   defaultVersionId = 111,
   onVersionChange,
   fontFamily = 'Inter',
-  fontSize = 16,
+  fontSize = DEFAULT_FONT_SIZE,
   lineHeight,
   showVerseNumbers = true,
   background,
@@ -91,10 +95,11 @@ function Root({
   });
 
   const [currentFontSize, setCurrentFontSize] = useState(() => {
-    if (fontSize > 20 || fontSize < 12) fontSize = 16;
-    if (typeof window === 'undefined') return fontSize;
+    const validatedFontSize =
+      fontSize > MAX_FONT_SIZE || fontSize < MIN_FONT_SIZE ? DEFAULT_FONT_SIZE : fontSize;
+    if (typeof window === 'undefined') return validatedFontSize;
     const size = localStorage.getItem('youversion-platform:reader:font-size');
-    return size ? parseInt(size) : fontSize;
+    return size ? parseInt(size) : validatedFontSize;
   });
 
   const [currentFontFamily, setCurrentFontFamily] = useState(() => {
@@ -294,7 +299,7 @@ function Toolbar({ border = 'top' }: { border?: 'top' | 'bottom' }) {
                   className="yv:text-xs yv:text-black yv:dark:text-muted-foreground yv:rounded-l-[8px] yv:rounded-r-none yv:border yv:border-white yv:dark:border-border yv:h-auto yv:py-2"
                   onClick={() =>
                     setCurrentFontSize((prev) => {
-                      if (prev > 12) return prev - 2;
+                      if (prev > MIN_FONT_SIZE) return prev - 2;
                       return prev;
                     })
                   }
@@ -308,7 +313,7 @@ function Toolbar({ border = 'top' }: { border?: 'top' | 'bottom' }) {
                   className="yv:text-3xl yv:text-black yv:dark:text-muted-foreground yv:rounded-r-[8px] yv:rounded-l-none yv:border yv:border-white yv:dark:border-border yv:h-auto yv:py-2"
                   onClick={() =>
                     setCurrentFontSize((prev) => {
-                      if (prev < 20) return prev + 2;
+                      if (prev < MAX_FONT_SIZE) return prev + 2;
                       return prev;
                     })
                   }