diff --git a/config/index.d.ts b/config/index.d.ts
index 5f87de873..240aa0662 100644
--- a/config/index.d.ts
+++ b/config/index.d.ts
@@ -22,7 +22,7 @@ export type BookTabConfig = {
     bookTabID: string;
     type: string;
     file: string;
-    features: any;
+    features: FeatureConfig;
     chapters?: number;
     chaptersN?: string;
     style?: StyleConfig;
@@ -78,7 +78,7 @@ export type BookConfig = {
 
 export type BookCollectionConfig = {
     id: string;
-    features: any;
+    features: FeatureConfig;
     books: BookConfig[];
     style?: StyleConfig;
     fonts: string[];
@@ -251,7 +251,7 @@ export type AppConfig = {
 
 export type ScriptureConfig = AppConfig & {
     programType: 'SAB';
-    traits?: any;
+    traits?: FeatureConfig;
     bookCollections?: BookCollectionConfig[];
     videos?: {
         id: string;
@@ -304,20 +304,22 @@ export type ScriptureConfig = AppConfig & {
         features: {
             [key: string]: string;
         };
-        plans: {
-            id: string;
-            days: number;
-            title: {
-                [lang: string]: string;
-            };
-            filename: string;
-            jsonFilename: string;
-            image?: {
-                width: number;
-                height: number;
-                file: string;
-            };
-        }[];
+        plans: PlanItem[];
+    };
+};
+
+export type PlanItem = {
+    id: string;
+    days: number;
+    title: {
+        [lang: string]: string;
+    };
+    filename: string;
+    jsonFilename: string;
+    image?: {
+        width: number;
+        height: number;
+        file: string;
     };
 };
 
@@ -396,7 +398,7 @@ export type LinkMeta = {
 export type ContentItem = {
     id: number;
     heading?: boolean;
-    features?: any;
+    features?: FeatureConfig;
     title: LangContainer;
     subtitle?: LangContainer;
     audioFilename?: LangContainer;
@@ -425,7 +427,7 @@ export type ContentsData = {
     title?: {
         [lang: string]: string;
     };
-    features?: any;
+    features?: FeatureConfig;
     items?: ContentItem[];
     nestedItems?: boolean;
     screens?: ContentScreen[];
diff --git a/convert/convertBooks.ts b/convert/convertBooks.ts
index be23fa957..5757ee15e 100644
--- a/convert/convertBooks.ts
+++ b/convert/convertBooks.ts
@@ -466,7 +466,7 @@ export async function convertBooks(
         //loop through books in collection
         const ignoredBooks = [];
         // If the collection has a glossary, load it
-        if (scriptureConfig.traits['has-glossary']) {
+        if (scriptureConfig.traits?.['has-glossary']) {
             bcGlossary = loadGlossary(collection, dataDir);
         }
         //add empty array of quizzes for book collection
@@ -777,7 +777,7 @@ function convertScriptureBook(
                 '\n' +
                 remainingLines;
         }
-        if (context.scriptureConfig.traits['has-glossary']) {
+        if (context.scriptureConfig.traits?.['has-glossary']) {
             content = verifyGlossaryEntries(content, bcGlossary);
         }
         if (context.scriptureConfig.mainFeatures['hide-empty-verses'] === true) {
diff --git a/convert/convertConfig.ts b/convert/convertConfig.ts
index 295bd527b..318413394 100644
--- a/convert/convertConfig.ts
+++ b/convert/convertConfig.ts
@@ -337,7 +337,10 @@ function convertConfig(dataDir: string, verbose: number) {
         if (videos.length > 0) {
             data.videos = videos;
         }
-        data.traits['has-video'] = data.videos && data.videos.length > 0;
+        const hasVideo = !!data.videos && data.videos.length > 0;
+        data.traits = data.traits
+            ? { ...data.traits, 'has-video': hasVideo }
+            : { 'has-video': hasVideo };
         data.illustrations = parseIllustrations(document, verbose);
 
         const { layouts, defaultLayout } = parseLayouts(document, data.bookCollections, verbose);
diff --git a/src/app.d.ts b/src/app.d.ts
index 4fd9e41a5..14a93d478 100644
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -1,6 +1,7 @@
 /// <reference types="@sveltejs/kit" />
 /// <reference types="svelte-gestures" />
 /// <reference types="$config" />
+/// <reference types="svelte" />
 
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
@@ -40,14 +41,16 @@ declare namespace App {
         penColor: string;
     }
 
+    type MenuActionHandler = (args: { text: string; url: string }) => void;
+
+    type TabMenuActionHandler = (args: { text: string; url: string; tab: string }) => void;
+
     interface TabMenuOptions {
         [key: string]: {
             tab?: {
-                component: any;
-                props?: any;
+                icon?: Snippet<[string]>;
             };
-            component: any;
-            props: any;
+            snippet?: Snippet<[string, TabMenuActionHandler]>;
             visible: boolean;
         };
     }
@@ -75,8 +78,8 @@ declare namespace App {
 
     interface CollectionGroup {
         singlePane?: CollectionEntry;
-        sideBySide?: FixedLengthArray<[CollectionEntry, CollectionEntry]>;
-        verseByVerse?: FixedLengthArray<[CollectionEntry, CollectionEntry, CollectionEntry]>;
+        sideBySide?: [CollectionEntry, CollectionEntry];
+        verseByVerse?: [CollectionEntry, CollectionEntry, CollectionEntry];
     }
 
     interface UserPreferenceSetting {
diff --git a/src/lib/components/AudioBar.svelte b/src/lib/components/AudioBar.svelte
index 84848ff0a..bcecc7c09 100644
--- a/src/lib/components/AudioBar.svelte
+++ b/src/lib/components/AudioBar.svelte
@@ -25,13 +25,14 @@ TODO:
         refs,
         s,
         t,
-        userSettings
+        userSettings,
+        type PlayModeSettings
     } from '$lib/data/stores';
     import { AudioIcon } from '$lib/icons';
     import PlayButton from './PlayButton.svelte';
     import RepeatButton from './RepeatButton.svelte';
 
-    function mayResetPlayMode(hasTiming) {
+    function mayResetPlayMode(hasTiming: boolean) {
         // If the current mode is repeatSelection and the reference is changed to something without timing
         // (even chapter without audio), then reset the playMode.  This matches how the Android app behaves.
         if (!hasTiming && $playMode.mode === 'repeatSelection') {
@@ -39,18 +40,19 @@ TODO:
         }
     }
 
-    function seekAudio(event) {
+    function seekAudio(event: MouseEvent) {
         if (!$audioPlayer.loaded) {
             return;
         }
         const progressBar = document.getElementById('progress-bar');
-        const percent = (event.clientX - progressBar.offsetLeft) / progressBar.offsetWidth;
+        const percent =
+            (event.clientX - (progressBar?.offsetLeft ?? 0)) / (progressBar?.offsetWidth ?? 1);
         // Set the current time of the audio element to the corresponding time based on the percent
         seek($audioPlayer.duration * percent);
     }
 
     let lastPlayMode = '';
-    function playModeChanged(value) {
+    function playModeChanged(value: PlayModeSettings) {
         let key = '';
 
         switch (value.mode) {
@@ -77,8 +79,8 @@ TODO:
 
     let hintText = $state('');
     let showHint = $state(false);
-    let hintTimeoutId = null;
-    function startShowHint(text) {
+    let hintTimeoutId: NodeJS.Timeout | null = null;
+    function startShowHint(text: string) {
         showHint = true;
         hintText = text;
         if (hintTimeoutId) {
@@ -92,14 +94,14 @@ TODO:
 
     const showSpeed = config.mainFeatures['settings-audio-speed'];
     const showRepeatMode = config.mainFeatures['audio-repeat-mode-button'];
-    const hintStyle = convertStyle($s['ui.bar.audio.hint.text']);
+    const hintStyle = convertStyle($s?.['ui.bar.audio.hint.text']);
     const playButtonState = $derived($audioPlayer.playing ? 'pause' : 'play');
-    const iconColor = $derived($s['ui.bar.audio.icon']['color']);
-    const iconPlayColor = $derived($s['ui.bar.audio.play.icon']['color']);
-    const backgroundColor = $derived($s['ui.bar.audio']['background-color']);
+    const iconColor = $derived($s?.['ui.bar.audio.icon']['color']);
+    const iconPlayColor = $derived($s?.['ui.bar.audio.play.icon']['color']);
+    const backgroundColor = $derived($s?.['ui.bar.audio']['background-color']);
     const audioBarClass = $derived($refs.hasAudio?.timingFile ? 'audio-bar' : 'audio-bar-progress');
     $effect(() => mayResetPlayMode($refs.hasAudio?.timing));
-    $effect(() => updatePlaybackSpeed($userSettings['audio-speed']));
+    $effect(() => updatePlaybackSpeed($userSettings['audio-speed'] as string));
 </script>
 
 <div class="relative {audioBarClass}" style:background-color={backgroundColor}>
diff --git a/src/lib/components/AudioPlaybackSpeed.svelte b/src/lib/components/AudioPlaybackSpeed.svelte
index d6657a8dd..bcb4c116a 100644
--- a/src/lib/components/AudioPlaybackSpeed.svelte
+++ b/src/lib/components/AudioPlaybackSpeed.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
     import { monoIconColor, t, userSettings } from '$lib/data/stores';
     import Modal from './Modal.svelte';
 
@@ -19,17 +19,17 @@
         { value: '1.6', label: '1.6x' }
     ];
 
-    function setPlaySpeed(event) {
-        $userSettings['audio-speed'] = event.target.value;
+    function setPlaySpeed(value: string) {
+        $userSettings['audio-speed'] = value;
     }
 
-    let modalThis;
+    let modalThis: HTMLDialogElement;
     export function showModal() {
         modalThis.showModal();
     }
 </script>
 
-<Modal bind:this={modalThis} id={modalId}>
+<Modal bind:dialog={modalThis} id={modalId}>
     <div style="color: {$monoIconColor}">
         <h1>
             <b>{$t['Settings_Audio_Speed']}</b>
@@ -41,7 +41,7 @@
                         type="radio"
                         name="speed"
                         {value}
-                        on:click={setPlaySpeed}
+                        on:click={(e) => setPlaySpeed(e.currentTarget.value)}
                         checked={$userSettings['audio-speed'] === value}
                     />
                     {label}
diff --git a/src/lib/components/BookSelector.svelte b/src/lib/components/BookSelector.svelte
index f63fca56f..5197df54a 100644
--- a/src/lib/components/BookSelector.svelte
+++ b/src/lib/components/BookSelector.svelte
@@ -2,8 +2,9 @@
 @component
 The navbar component.
 -->
-<script>
-    import config from '$assets/config';
+<script lang="ts">
+    import config, { scriptureConfig } from '$assets/config';
+    import type { BookConfig } from '$config';
     import { convertStyle, nextRef, refs, s, t, userSettingsOrDefault } from '$lib/data/stores';
     import { DropdownIcon } from '$lib/icons';
     import { getRoute, navigateToText, navigateToUrl } from '$lib/navigate';
@@ -14,19 +15,25 @@ The navbar component.
     import TabsMenu from './TabsMenu.svelte';
 
     let { displayLabel = undefined } = $props();
+
+    /**list of books, quizzes, and quiz groups in current docSet*/
+    const books = $derived($refs.catalog.documents);
+    /**list of chapters in current book*/
+    const chapters = $derived(books.find((d) => d.bookCode === book)?.versesByChapters ?? {});
+
     const book = $derived($nextRef.book === '' ? $refs.book : $nextRef.book);
     const chapter = $derived($nextRef.chapter === '' ? $refs.chapter : $nextRef.chapter);
     const verseCount = $derived(getVerseCount(chapter, chapters));
     const numeralSystem = $derived(numerals.systemForBook(config, $refs.collection, book));
     const chaptersLabels = $derived(
-        config.bookCollections
-            .find((x) => $refs.collection === x.id)
-            .books.find((x) => book === x.id).chaptersLabels ?? {}
+        scriptureConfig.bookCollections
+            ?.find((x) => $refs.collection === x.id)
+            ?.books.find((x) => book === x.id)?.chaptersLabels ?? {}
     );
 
-    const showChapterSelector = config.mainFeatures['show-chapter-selector-after-book'];
+    const showChapterSelector = config.mainFeatures['show-chapter-selector-after-book'] as boolean;
     const listView = $derived($userSettingsOrDefault['book-selection'] === 'list');
-    const showVerseSelector = $derived($userSettingsOrDefault['verse-selection']);
+    const showVerseSelector = $derived($userSettingsOrDefault['verse-selection'] as boolean);
     const showSelectors = $derived(config.mainFeatures['book-select'] !== 'none');
 
     // Translated book, chapter, and verse tab labels
@@ -34,26 +41,28 @@ The navbar component.
     const c = $derived($t.Selector_Chapter);
     const v = $derived($t.Selector_Verse);
 
-    let bookSelector = $state();
+    let bookSelector: TabsMenu | undefined = $state();
     const labelDisplayed = $derived(
         displayLabel ??
-            config.bookCollections
-                .find((x) => x.id === $refs.collection)
-                .books.find((x) => x.id === book)?.name
+            scriptureConfig.bookCollections
+                ?.find((x) => x.id === $refs.collection)
+                ?.books.find((x) => x.id === book)?.name
     );
 
-    function isHtmlBook(bookId) {
-        const book = config.bookCollections
-            .find((x) => x.id === $refs.collection)
-            .books.find((x) => x.id === bookId);
+    function isHtmlBook(bookId: string) {
+        const book = scriptureConfig.bookCollections
+            ?.find((x) => x.id === $refs.collection)
+            ?.books.find((x) => x.id === bookId);
 
-        return book && book.format === 'html';
+        return book?.format === 'html';
     }
-    function chapterCount(book) {
-        let count = Object.keys(books.find((x) => x.bookCode === book).versesByChapters).length;
+    function chapterCount(book: string) {
+        let count = Object.keys(
+            books.find((x) => x.bookCode === book)?.versesByChapters ?? {}
+        ).length;
         return count;
     }
-    function firstChapter(book) {
+    function firstChapter(book: string) {
         let first = '1';
         const currBook = books.find((x) => x.bookCode === book);
         if (currBook?.versesByChapters) {
@@ -62,7 +71,7 @@ The navbar component.
         }
         return first;
     }
-    function getVerseCount(chapter, chapters) {
+    function getVerseCount(chapter: string, chapters?: Record<string, Record<string, unknown>>) {
         if (!chapter || chapter === 'i' || !chapters || Object.keys(chapters).length === 0) {
             return 0;
         }
@@ -73,7 +82,15 @@ The navbar component.
      * Pushes reference changes to nextRef. Pushes final change to default reference.
      */
 
-    async function navigateReference({ text, url, tab }) {
+    async function navigateReference({
+        text,
+        url,
+        tab
+    }: {
+        text: string;
+        url: string;
+        tab: string;
+    }) {
         // Handle special book navigation first
         if (tab === b && url) {
             navigateToUrl({
@@ -90,7 +107,7 @@ The navbar component.
         } else {
             switch (tab) {
                 case b: {
-                    bookSelector.setActive(c);
+                    bookSelector?.setActive(c);
                     $nextRef.book = text;
                     const count = chapterCount($nextRef.book);
                     if (count === 0) {
@@ -109,7 +126,7 @@ The navbar component.
                     if (!showVerseSelector || $nextRef.chapter === 'i' || verseCount === 0) {
                         await completeNavigation();
                     } else {
-                        bookSelector.setActive(v);
+                        bookSelector?.setActive(v);
                     }
                     break;
                 case v:
@@ -130,9 +147,9 @@ The navbar component.
         }
     }
 
-    let dropdown = $state();
+    let dropdown: Dropdown | undefined = $state();
     function close() {
-        dropdown.close();
+        dropdown?.close();
         //resetNavigation();
         //document.activeElement.blur();
     }
@@ -153,12 +170,7 @@ The navbar component.
         nextRef.reset();
     }
 
-    /**list of books, quizzes, and quiz groups in current docSet*/
-    const books = $derived($refs.catalog.documents);
-    /**list of chapters in current book*/
-    const chapters = $derived(books.find((d) => d.bookCode === book)?.versesByChapters ?? []);
-
-    function getBookUrl(book) {
+    function getBookUrl(book: BookConfig) {
         let url;
         if (book.type === 'quiz') {
             url = getRoute(`/quiz/${$refs.collection}/${book.id}`);
@@ -166,7 +178,7 @@ The navbar component.
         return url;
     }
 
-    function getChapterLabel(chapter) {
+    function getChapterLabel(chapter: string) {
         if (chapter === 'i') {
             return $t['Chapter_Introduction_Symbol'];
         }
@@ -178,13 +190,24 @@ The navbar component.
         return numerals.formatNumber(numeralSystem, chapter);
     }
 
-    let bookGridGroup = ({ colId, bookLabel = 'abbreviation' }) => {
-        let groups = [];
-        var lastGroup = null;
+    type BookLabel = {
+        [K in keyof BookConfig]: BookConfig[K] extends string ? K : never;
+    }[keyof BookConfig];
 
-        config.bookCollections
-            .find((x) => x.id === colId)
-            .books.forEach((book) => {
+    let bookGridGroup = ({
+        colId,
+        bookLabel = 'abbreviation'
+    }: {
+        colId: string;
+        bookLabel?: BookLabel;
+    }) => {
+        let groups: { header?: string; cells: { label: string; id: string; url?: string }[] }[] =
+            [];
+        let lastGroup: string | null = null;
+
+        scriptureConfig.bookCollections
+            ?.find((x) => x.id === colId)
+            ?.books.forEach((book) => {
                 const url = getBookUrl(book);
                 if ($refs.allBookIds.find((x) => x === book.id) || url) {
                     let label = book[bookLabel] || book.name;
@@ -207,8 +230,8 @@ The navbar component.
                     } else {
                         if (groups.length > 0) {
                             // Add Book to last group
-                            let cells = groups.at(-1).cells;
-                            groups.at(-1).cells = [...cells, cell];
+                            let cells = groups.at(-1)?.cells ?? [];
+                            groups[groups.length - 1].cells = [...cells, cell];
                         } else {
                             // Create a group with no header (likely if 'book-group-titles' === fase)
                             groups.push({
@@ -222,7 +245,7 @@ The navbar component.
         return groups;
     };
 
-    let chapterGridGroup = (chapters) => {
+    let chapterGridGroup = (chapters: Record<string, unknown>) => {
         let hasIntroduction = books.find((x) => x.bookCode === book)?.hasIntroduction;
         return [
             {
@@ -236,7 +259,7 @@ The navbar component.
             }
         ];
     };
-    let verseGridGroup = (chapter) => {
+    let verseGridGroup = (chapter: string) => {
         let value;
         let selectedChapter = chapters[chapter];
         if (chapter === 'i') {
@@ -251,7 +274,7 @@ The navbar component.
                 }
             ];
         } else if (verseCount === 0) {
-            value = [];
+            value = [] as { cells: { label: string; id: string }[] }[];
         } else {
             value = [
                 {
@@ -266,37 +289,52 @@ The navbar component.
     };
     const options = $derived({
         [b]: {
-            component: listView ? SelectList : SelectGrid,
-            props: {
-                options: bookGridGroup({
-                    colId: $refs.collection,
-                    bookLabel: listView ? 'name' : 'abbreviation'
-                })
-            },
+            snippet: listView ? selectList : selectGrid,
             visible: true
         },
         [c]: {
-            component: SelectGrid,
-            props: {
-                options: chapterGridGroup(chapters)
-            },
+            snippet: selectGrid,
             visible: showChapterSelector
         },
         [v]: {
-            component: SelectGrid,
-            props: {
-                options: verseGridGroup(chapter)
-            },
+            snippet: selectGrid,
             visible: showChapterSelector && showVerseSelector
         }
-    });
+    } satisfies App.TabMenuOptions);
 </script>
 
+{#snippet selectList(bcv: string, menuaction: App.MenuActionHandler)}
+    <SelectList
+        options={bookGridGroup({
+            colId: $refs.collection,
+            bookLabel: 'name'
+        })}
+        {menuaction}
+    />
+{/snippet}
+
+{#snippet selectGrid(bcv: string, menuaction: App.MenuActionHandler)}
+    <SelectGrid
+        options={bcv === b
+            ? bookGridGroup({
+                  colId: $refs.collection,
+                  bookLabel: 'abbreviation'
+              })
+            : bcv === c
+              ? chapterGridGroup(chapters)
+              : verseGridGroup(chapter)}
+        {menuaction}
+    />
+{/snippet}
+
 {#if showSelectors}
     <!-- Book Selector -->
     <Dropdown bind:this={dropdown} navEnd={resetNavigation}>
         {#snippet label()}
-            <div class="normal-case whitespace-nowrap" style={convertStyle($s['ui.selector.book'])}>
+            <div
+                class="normal-case whitespace-nowrap"
+                style={convertStyle($s?.['ui.selector.book'])}
+            >
                 {labelDisplayed}
             </div>
             <DropdownIcon color="white" />
@@ -309,7 +347,7 @@ The navbar component.
     </Dropdown>
 {:else}
     <!-- Book Label -->
-    <div class="normal-case whitespace-nowrap" style={convertStyle($s['ui.selector.book'])}>
+    <div class="normal-case whitespace-nowrap" style={convertStyle($s?.['ui.selector.book'])}>
         {labelDisplayed}
     </div>
 {/if}
diff --git a/src/lib/components/BookTabs.svelte b/src/lib/components/BookTabs.svelte
index 57a274657..79bbe0859 100644
--- a/src/lib/components/BookTabs.svelte
+++ b/src/lib/components/BookTabs.svelte
@@ -2,43 +2,31 @@
 @component
 A component that displays the book tabs and allows the user to switch between them.
 -->
-<script>
-    import { base } from '$app/paths';
-    import config from '$assets/config';
-    import {
-        convertStyle,
-        language,
-        languageDefault,
-        monoIconColor,
-        refs,
-        s,
-        theme
-    } from '$lib/data/stores';
+<script lang="ts">
+    import { scriptureConfig } from '$assets/config';
+    import { convertStyle, language, monoIconColor, refs, s, theme } from '$lib/data/stores';
 
     const tabIcons = import.meta.glob('./*', {
         import: 'default',
         eager: true,
         query: '?url',
         base: '/src/gen-assets/icons/tabs'
-    });
+    }) as Record<string, string>;
 
     const bookTabs = $derived(
-        config?.bookCollections
-            .find((x) => x.id === $refs.collection)
+        scriptureConfig.bookCollections
+            ?.find((x) => x.id === $refs.collection)
             ?.books.find((x) => x.id === $refs.book)?.bookTabs
     );
 
-    function changeTab(newTab) {
+    function changeTab(newTab: number) {
         refs.setBookTab(newTab);
     }
-    function getImageName(tabType) {
-        return config?.tabTypes[tabType]?.images[0].file;
+    function getImageName(tabType?: string) {
+        return (tabType && scriptureConfig.tabTypes?.[tabType]?.images?.[0]?.file) || '';
     }
-    function getTabTypeName(tabType) {
-        return (
-            config?.tabTypes[tabType]?.name[$language] ||
-            config?.tabTypes[tabType]?.name[languageDefault]
-        );
+    function getTabTypeName(tabType?: string) {
+        return scriptureConfig.tabTypes?.[tabType ?? '']?.name?.[$language];
     }
 </script>
 
@@ -46,23 +34,23 @@ A component that displays the book tabs and allows the user to switch between th
     <button
         class="dy-tab {$refs.bookTab === 0 || $refs.bookTab === undefined ? 'dy-tab-active' : ''}"
         onclick={() => changeTab(0)}
-        style={convertStyle($s['ui.book.tabs'])}
+        style={convertStyle($s?.['ui.book.tabs'])}
     >
         <picture class:invert={$theme === 'Dark'}>
             <img
-                src={tabIcons[`./${getImageName(bookTabs.mainType)}`]}
+                src={tabIcons[`./${getImageName(bookTabs?.mainType)}`]}
                 color={$monoIconColor}
                 height="24"
                 width="24"
-                alt={getTabTypeName(bookTabs.mainType)}
+                alt={getTabTypeName(bookTabs?.mainType)}
             />
         </picture>
     </button>
-    {#each bookTabs.tabs as bookTab, i}
+    {#each bookTabs?.tabs as bookTab, i}
         <button
             class="dy-tab {$refs.bookTab === i + 1 ? 'dy-tab-active' : ''} "
             onclick={() => changeTab(i + 1)}
-            style={convertStyle($s['ui.book.tabs'])}
+            style={convertStyle($s?.['ui.book.tabs'])}
         >
             <picture class:invert={$theme === 'Dark'}>
                 <img
diff --git a/src/lib/components/BookmarkButton.svelte b/src/lib/components/BookmarkButton.svelte
index 01b97f5fd..23dea2f80 100644
--- a/src/lib/components/BookmarkButton.svelte
+++ b/src/lib/components/BookmarkButton.svelte
@@ -3,14 +3,14 @@
 
     let { fillColor, emptyColor, onclick, filled } = $props();
 
-    const icons_filled = {
+    const icons_filled = $derived({
         color: fillColor,
         Icon: BookmarkIcon
-    };
-    const icons_empty = {
+    });
+    const icons_empty = $derived({
         color: emptyColor,
         Icon: BookmarkOutlineIcon
-    };
+    });
 
     const { color, Icon } = $derived(filled ? icons_filled : icons_empty);
 </script>
diff --git a/src/lib/components/BottomNavigationBar.svelte b/src/lib/components/BottomNavigationBar.svelte
index 4cec9904e..e3393d63b 100644
--- a/src/lib/components/BottomNavigationBar.svelte
+++ b/src/lib/components/BottomNavigationBar.svelte
@@ -1,9 +1,8 @@
 <!--
 @component
 -->
-<script>
-    import { base } from '$app/paths';
-    import config from '$assets/config';
+<script lang="ts">
+    import config, { scriptureConfig } from '$assets/config';
     import contents from '$assets/contents';
     import { language, languageDefault, refs, s, theme } from '$lib/data/stores';
     import { gotoRoute } from '$lib/navigate';
@@ -13,21 +12,21 @@
         eager: true,
         query: '?url',
         base: '/src/gen-assets/icons/menu-items'
-    });
+    }) as Record<string, string>;
 
     let { barType = undefined } = $props();
 
     const bottomNavBarItems = config?.bottomNavBarItems;
 
-    const barBackgroundColor = $derived($s['ui.bottom-navigation.']['background-color']);
-    const barTextColor = $derived($s['ui.bottom-navigation.item.text']['color']);
-    const barTextSelectedColor = $derived($s['ui.bottom-navigation.item.text.selected']['color']);
+    const barBackgroundColor = $derived($s?.['ui.bottom-navigation.']['background-color']);
+    const barTextColor = $derived($s?.['ui.bottom-navigation.item.text']['color']);
+    const barTextSelectedColor = $derived($s?.['ui.bottom-navigation.item.text.selected']['color']);
 
-    const showContents = contents.screens?.length > 0;
-    const showSearch = config.mainFeatures['search'];
-    const showPlans = config.plans?.plans.length > 0;
+    const showContents = (contents.screens?.length ?? 0) > 0;
+    const showSearch = config.mainFeatures['search'] as boolean;
+    const showPlans = (scriptureConfig.plans?.plans.length ?? 0) > 0;
 
-    function showButton(buttonType) {
+    function showButton(buttonType: string) {
         let value = true;
         switch (buttonType) {
             case 'contents':
@@ -44,7 +43,7 @@
         }
         return value;
     }
-    function selectedLink(buttonType, link) {
+    function selectedLink(buttonType: string, link?: string) {
         let value = buttonType === barType;
         if (buttonType === 'book') {
             // Don't highlight link for specific book
@@ -73,7 +72,7 @@
         }
         return value;
     }
-    function handleClick(buttonType, link) {
+    function handleClick(buttonType: string, link?: string) {
         switch (buttonType) {
             case 'contents': {
                 let gotoLink = link && link !== '' ? link : '1';
@@ -86,7 +85,7 @@
             case 'book':
                 if (link && link !== '') {
                     const [bc, book] = link.split('|');
-                    const refBc = config.bookCollections.find((x) => x.id === bc);
+                    const refBc = scriptureConfig.bookCollections?.find((x) => x.id === bc);
                     let refDocSet = '';
                     if (refBc) {
                         refDocSet = refBc.languageCode + '_' + refBc.id;
@@ -131,14 +130,14 @@
                     {#if showButton(item.type)}
                         <button
                             class="dy-btn dy-btn-ghost flex-col gap-1 my-2"
-                            onclick={() => handleClick(item.type, item.link['default'])}
+                            onclick={() => handleClick(item.type, item.link?.['default'])}
                         >
                             <picture class:invert={$theme === 'Dark'}>
                                 <!-- Image Icon -->
                                 <img
-                                    src={menuIcons[`./${item.images[0].file}`]}
+                                    src={menuIcons[`./${item.images?.[0]?.file}`]}
                                     alt=""
-                                    class={selectedLink(item.type, item.link['default'])
+                                    class={selectedLink(item.type, item.link?.['default'])
                                         ? 'opacity-100'
                                         : 'opacity-50'}
                                 />
@@ -146,7 +145,7 @@
                             <!-- Text -->
                             <span
                                 class="text-center"
-                                style="color: {selectedLink(item.type, item.link['default'])
+                                style="color: {selectedLink(item.type, item.link?.['default'])
                                     ? barTextSelectedColor
                                     : barTextColor}"
                             >
diff --git a/src/lib/components/ChapterSelector.svelte b/src/lib/components/ChapterSelector.svelte
index c2de4a978..d9b229619 100644
--- a/src/lib/components/ChapterSelector.svelte
+++ b/src/lib/components/ChapterSelector.svelte
@@ -2,8 +2,8 @@
 @component
 The navbar component.
 -->
-<script>
-    import config from '$assets/config';
+<script lang="ts">
+    import config, { scriptureConfig } from '$assets/config';
     import { convertStyle, nextRef, refs, s, t, userSettingsOrDefault } from '$lib/data/stores';
     import { DropdownIcon } from '$lib/icons';
     import { navigateToText } from '$lib/navigate';
@@ -13,18 +13,18 @@ The navbar component.
     import TabsMenu from './TabsMenu.svelte';
 
     /**reference to chapter selector so code can use TabsMenu.setActive*/
-    let chapterSelector = $state();
+    let chapterSelector: TabsMenu | undefined = $state();
 
     // Needs testing, does updating the book correctly effect what chapters or verses are availible in the next tab?
     const book = $derived($nextRef.book === '' ? $refs.book : $nextRef.book);
     const chapter = $derived($nextRef.chapter === '' ? $refs.chapter : $nextRef.chapter);
-    const showVerseSelector = $derived($userSettingsOrDefault['verse-selection']);
+    const showVerseSelector = $derived($userSettingsOrDefault['verse-selection']) as boolean;
     const verseCount = $derived(getVerseCount(book, chapter));
     const numeralSystem = $derived(numerals.systemForBook(config, $refs.collection, book));
     const chaptersLabels = $derived(
-        config.bookCollections
-            .find((x) => $refs.collection === x.id)
-            .books.find((x) => book === x.id).chaptersLabels ?? {}
+        scriptureConfig.bookCollections
+            ?.find((x) => $refs.collection === x.id)
+            ?.books.find((x) => book === x.id)?.chaptersLabels ?? {}
     );
 
     const c = $derived($t.Selector_Chapter);
@@ -33,14 +33,14 @@ The navbar component.
     /**
      * Pushes reference changes to refs['next']. Pushes final change to default reference.
      */
-    async function navigateReference({ text, url, tab }) {
+    async function navigateReference({ text, tab }: { text: string; tab: string }) {
         switch (tab) {
             case c:
                 $nextRef.chapter = text;
                 if (!showVerseSelector || $nextRef.chapter === 'i' || verseCount === 0) {
                     await completeNavigation();
                 } else {
-                    chapterSelector.setActive(v);
+                    chapterSelector?.setActive(v);
                 }
                 break;
             case v:
@@ -70,17 +70,17 @@ The navbar component.
         close();
     }
 
-    let dropdown = $state();
+    let dropdown: Dropdown | undefined = $state();
     function close() {
-        dropdown.close();
+        dropdown?.close();
     }
 
     function resetNavigation() {
-        chapterSelector.setActive(c);
+        chapterSelector?.setActive(c);
         nextRef.reset();
     }
 
-    function getChapterCount(bookId) {
+    function getChapterCount(bookId: string) {
         const book = $refs.catalog.documents.find((x) => x.bookCode === bookId);
         if (book) {
             return Object.keys(book.versesByChapters).length;
@@ -88,7 +88,7 @@ The navbar component.
         return 0;
     }
 
-    function getChapterLabel(chapter) {
+    function getChapterLabel(chapter: string) {
         if (chapter === 'i') {
             return $t['Chapter_Introduction_Symbol'];
         }
@@ -100,7 +100,7 @@ The navbar component.
         return numerals.formatNumber(numeralSystem, chapter);
     }
 
-    function getVerseCount(book, chapter) {
+    function getVerseCount(book: string, chapter: string) {
         if (!chapter || chapter === 'i') {
             return 0;
         }
@@ -114,7 +114,7 @@ The navbar component.
     }
 
     // Needs to be reactive when the chapter changes if there is a nextRef.book
-    let chapterIndicator = (book, chapter) => {
+    let chapterIndicator = (book: string, chapter: string) => {
         let value = '';
         if (chapter === 'i') {
             value = $t['Chapter_Introduction_Symbol'];
@@ -126,8 +126,8 @@ The navbar component.
         return value;
     };
 
-    let verseGridGroup = (chapter) => {
-        let value = [];
+    let verseGridGroup = (chapter: string) => {
+        let value;
         let selectedChapter = chapters[chapter];
         if (chapter === 'i') {
             value = [
@@ -141,7 +141,7 @@ The navbar component.
                 }
             ];
         } else if (verseCount === 0) {
-            value = [];
+            value = [] as { cells: { label: string; id: string }[] }[];
         } else {
             value = [
                 {
@@ -164,11 +164,36 @@ The navbar component.
     const canSelect = config.mainFeatures['show-chapter-selector'];
 </script>
 
+{#snippet selectGrid(cv: string, menuaction: App.MenuActionHandler)}
+    <SelectGrid
+        cols={5}
+        options={cv === c
+            ? [
+                  {
+                      rows: books.find((x) => x.bookCode === book)?.hasIntroduction
+                          ? [
+                                {
+                                    label: $t['Chapter_Introduction_Title'],
+                                    id: 'i'
+                                }
+                            ]
+                          : undefined,
+                      cells: Object.keys(chapters).map((x) => ({
+                          label: getChapterLabel(x),
+                          id: x
+                      }))
+                  }
+              ]
+            : verseGridGroup(chapter)}
+        {menuaction}
+    />
+{/snippet}
+
 <!-- Chapter Selector -->
 {#if showSelector && ($nextRef.book === '' || $nextRef.chapter !== '')}
-    <Dropdown bind:this={dropdown} navEnd={resetNavigation} cols="5">
+    <Dropdown bind:this={dropdown} navEnd={resetNavigation} cols={5}>
         {#snippet label()}
-            <div class="normal-case" style={convertStyle($s['ui.selector.chapter'])}>
+            <div class="normal-case" style={convertStyle($s?.['ui.selector.chapter'])}>
                 {chapterIndicator(book, chapter)}
             </div>
             {#if canSelect}
@@ -182,35 +207,11 @@ The navbar component.
                         bind:this={chapterSelector}
                         options={{
                             [c]: {
-                                component: SelectGrid,
-                                props: {
-                                    cols: 5,
-                                    options: [
-                                        {
-                                            rows: books.find((x) => x.bookCode === book)
-                                                ?.hasIntroduction
-                                                ? [
-                                                      {
-                                                          label: $t['Chapter_Introduction_Title'],
-                                                          id: 'i'
-                                                      }
-                                                  ]
-                                                : null,
-                                            cells: Object.keys(chapters).map((x) => ({
-                                                label: getChapterLabel(x),
-                                                id: x
-                                            }))
-                                        }
-                                    ]
-                                },
+                                snippet: selectGrid,
                                 visible: true
                             },
                             [v]: {
-                                component: SelectGrid,
-                                props: {
-                                    cols: 5,
-                                    options: verseGridGroup(chapter)
-                                },
+                                snippet: selectGrid,
                                 visible: showVerseSelector
                             }
                         }}
diff --git a/src/lib/components/CollectionList.svelte b/src/lib/components/CollectionList.svelte
index 1b6590618..f4cd1a3e0 100644
--- a/src/lib/components/CollectionList.svelte
+++ b/src/lib/components/CollectionList.svelte
@@ -3,7 +3,7 @@
 Custom list of collections for the LayoutOptions menu
 -->
 <script lang="ts">
-    import { convertStyle, s, themeColors } from '$lib/data/stores';
+    import { themeColors } from '$lib/data/stores';
 
     const illustrations = import.meta.glob('./*', {
         import: 'default',
@@ -19,8 +19,8 @@ Custom list of collections for the LayoutOptions menu
         menuaction
     }: {
         docSets: App.CollectionEntry[];
-        selectedLayouts: App.CollectionEntry;
-        menuaction;
+        selectedLayouts?: App.CollectionEntry;
+        menuaction: ({ collection }: { collection: App.CollectionEntry }) => void;
     } = $props();
 
     function handleClick(opt: App.CollectionEntry) {
diff --git a/src/lib/components/CollectionSelector.svelte b/src/lib/components/CollectionSelector.svelte
index 6a213c4ca..7d17cd626 100644
--- a/src/lib/components/CollectionSelector.svelte
+++ b/src/lib/components/CollectionSelector.svelte
@@ -2,19 +2,9 @@
 @component
 Book Collection Selector component.
 -->
-<script>
-    import config from '$assets/config';
-    import {
-        convertStyle,
-        layout,
-        LAYOUT_SINGLE,
-        LAYOUT_TWO,
-        LAYOUT_VERSE_BY_VERSE,
-        refs,
-        s,
-        selectedLayouts,
-        t
-    } from '$lib/data/stores';
+<script lang="ts">
+    import { scriptureConfig } from '$assets/config';
+    import { convertStyle, layout, Layout, refs, s, selectedLayouts, t } from '$lib/data/stores';
     import { SideBySideIcon, SinglePaneIcon, VerseByVerseIcon } from '$lib/icons';
     import LayoutOptions from './LayoutOptions.svelte';
     import Modal from './Modal.svelte';
@@ -23,17 +13,18 @@ Book Collection Selector component.
     let { vertOffset = '1rem' } = $props();
 
     const modalId = 'collectionSelector';
-    let modal;
-    let tabMenu;
-    let tabMenuActive = $state(LAYOUT_SINGLE);
+    let modal: Modal;
+    let tabMenuActive = $state(Layout.Single);
 
     // values of selectedLayouts before user makes changes
     const restoreDocSets = JSON.stringify($selectedLayouts);
 
     // ToDo: If showSinglePane false, provide first availible visible option instead
-    const showSinglePane = config.layouts.find((x) => x.mode === LAYOUT_SINGLE).enabled;
-    const showSideBySide = config.layouts.find((x) => x.mode === LAYOUT_TWO).enabled;
-    const showVerseByVerse = config.layouts.find((x) => x.mode === LAYOUT_VERSE_BY_VERSE).enabled;
+    const showSinglePane = !!scriptureConfig.layouts?.find((x) => x.mode === Layout.Single)
+        ?.enabled;
+    const showSideBySide = !!scriptureConfig.layouts?.find((x) => x.mode === Layout.Two)?.enabled;
+    const showVerseByVerse = !!scriptureConfig.layouts?.find((x) => x.mode === Layout.VerseByVerse)
+        ?.enabled;
     export function showModal() {
         modal.showModal();
     }
@@ -42,8 +33,11 @@ Book Collection Selector component.
         const collections = selectedLayouts.collections(tabMenuActive);
         return {
             mode: tabMenuActive,
-            primaryDocSet: collections[0].id,
-            auxDocSets: collections.slice(1).map((x) => x.id)
+            primaryDocSet: collections?.[0]?.id ?? '',
+            auxDocSets: collections
+                ?.slice(1)
+                .map((x) => x?.id)
+                .filter((x) => !!x) as string[] | undefined
         };
     }
 
@@ -65,27 +59,37 @@ Book Collection Selector component.
     }
 </script>
 
+{#snippet layoutOptions(layoutOption: Layout, menuaction: App.MenuActionHandler)}
+    <LayoutOptions {layoutOption} {menuaction} />
+{/snippet}
+
+{#snippet icon(mode: Layout)}
+    {#if mode === Layout.Single}
+        <SinglePaneIcon />
+    {:else if mode === Layout.Two}
+        <SideBySideIcon />
+    {:else}
+        <VerseByVerseIcon />
+    {/if}
+{/snippet}
+
 <Modal bind:this={modal} id={modalId}>
     <TabsMenu
-        bind:this={tabMenu}
         bind:active={tabMenuActive}
         options={{
-            [LAYOUT_SINGLE]: {
-                tab: { component: SinglePaneIcon },
-                component: LayoutOptions,
-                props: { layoutOption: LAYOUT_SINGLE },
+            [Layout.Single]: {
+                tab: { icon },
+                snippet: layoutOptions,
                 visible: showSinglePane
             },
-            [LAYOUT_TWO]: {
-                tab: { component: SideBySideIcon },
-                component: LayoutOptions,
-                props: { layoutOption: LAYOUT_TWO },
+            [Layout.Two]: {
+                tab: { icon },
+                snippet: layoutOptions,
                 visible: showSideBySide
             },
-            [LAYOUT_VERSE_BY_VERSE]: {
-                tab: { component: VerseByVerseIcon },
-                component: LayoutOptions,
-                props: { layoutOption: LAYOUT_VERSE_BY_VERSE },
+            [Layout.VerseByVerse]: {
+                tab: { icon },
+                snippet: layoutOptions,
                 visible: showVerseByVerse
             }
         }}
@@ -94,13 +98,13 @@ Book Collection Selector component.
     <div class="flex w-full justify-between dy-modal-action">
         <!-- svelte-ignore a11y_click_events_have_key_events -->
         <button
-            style={convertStyle($s['ui.dialog.button'])}
+            style={convertStyle($s?.['ui.dialog.button'])}
             class="dy-btn dy-btn-sm dy-btn-ghost no-animation"
             onclick={() => handleCancel()}>{$t['Button_Cancel']}</button
         >
         <!-- svelte-ignore a11y_click_events_have_key_events -->
         <button
-            style={convertStyle($s['ui.dialog.button'])}
+            style={convertStyle($s?.['ui.dialog.button'])}
             class="dy-btn dy-btn-sm dy-btn-ghost no-animation"
             onclick={() => handleOk()}>{$t['Button_OK']}</button
         >
diff --git a/src/lib/components/ContentCarousel.svelte b/src/lib/components/ContentCarousel.svelte
index c23fb6ba3..700f086b7 100644
--- a/src/lib/components/ContentCarousel.svelte
+++ b/src/lib/components/ContentCarousel.svelte
@@ -1,42 +1,42 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { convertStyle, language, s } from '$lib/data/stores';
+    import type { ContentItem, FeatureConfig } from '$config';
+    import { contentsFontSize, language } from '$lib/data/stores';
     import { onMount } from 'svelte';
 
+    interface Props {
+        item: ContentItem;
+        imageFolder: string;
+        onClick?: (target: HTMLElement, item: ContentItem) => void;
+        loadReferenceText?: (item: ContentItem) => Promise<string | undefined>;
+        features?: FeatureConfig;
+    }
+
     let {
         item,
         imageFolder,
-        onClick,
-        checkImageSize,
-        loadReferenceText,
-        contentsFontSize,
+        onClick = onClickFallback,
+        loadReferenceText = loadReferenceTextFallback,
         features
-    } = $props();
+    }: Props = $props();
 
-    const onClickCallback = onClick ?? onClickFallback;
-    const checkImageSizeCallback = checkImageSize ?? checkImageSizeFallback;
-    const loadReferenceTextCallback = loadReferenceText ?? loadReferenceTextFallback;
-    const carouselId = `contents-carousel-${item.id}`;
-    let curIdx: number = 0;
+    const carouselId = $derived(`contents-carousel-${item.id}`);
 
-    function onClickFallback(event: Event, item: any) {
+    function onClickFallback(target: HTMLElement, item: ContentItem) {
         console.warn('USING THE onClickFallback');
     }
 
-    function checkImageSizeFallback(item: any) {
-        console.warn('USING checkImageSizeFallback');
-    }
-
-    function loadReferenceTextFallback(item: any) {
+    async function loadReferenceTextFallback(item: ContentItem) {
         console.warn('USING loadReferenceFallback');
+        return undefined;
     }
 
-    function carouselOnClickHandler(e: Event, item: any) {
-        onClickCallback(e, item);
+    function carouselOnClickHandler(target: HTMLElement, item: ContentItem) {
+        onClick(target, item);
     }
 
-    function hasIdUnderMouseItem(item: Element | HTMLElement | undefined) {
-        if (item === undefined) {
+    function hasIdUnderMouseItem(item: Element | HTMLElement | undefined | null) {
+        if (item === undefined || item === null) {
             return false;
         }
         if (!item.hasAttribute('id')) {
@@ -49,8 +49,8 @@
     }
 
     onMount(() => {
-        const carousel: HTMLElement = document.getElementById(carouselId);
-        const carouselScroll: HTMLElement = carousel.querySelector('.contents-carousel-row');
+        const carousel: HTMLElement = document.getElementById(carouselId)!;
+        const carouselScroll: HTMLElement = carousel.querySelector('.contents-carousel-row')!;
 
         let isDown = false;
         let startX = 0;
@@ -72,19 +72,27 @@
             if (!isScrolling) {
                 // register onclick event
                 let itemUnderMouse = document.elementFromPoint(e.clientX, e.clientY);
-                if (!hasIdUnderMouseItem(itemUnderMouse)) {
-                    if (hasIdUnderMouseItem(itemUnderMouse.parentElement)) {
-                        itemUnderMouse = itemUnderMouse.parentElement;
-                    } else if (hasIdUnderMouseItem(itemUnderMouse.parentElement.parentElement)) {
-                        itemUnderMouse = itemUnderMouse.parentElement.parentElement;
+                if (itemUnderMouse) {
+                    if (!hasIdUnderMouseItem(itemUnderMouse)) {
+                        if (hasIdUnderMouseItem(itemUnderMouse.parentElement)) {
+                            itemUnderMouse = itemUnderMouse.parentElement;
+                        } else if (
+                            hasIdUnderMouseItem(itemUnderMouse.parentElement?.parentElement)
+                        ) {
+                            itemUnderMouse = itemUnderMouse.parentElement!.parentElement;
+                        }
                     }
-                }
 
-                if (itemUnderMouse.hasAttribute('id')) {
-                    const curItem = item.children.find((x) => x.id === Number(itemUnderMouse.id));
-                    carouselOnClickHandler(e, curItem);
-                } else {
-                    console.error('itemUnderMouse does not have an id');
+                    if (itemUnderMouse?.hasAttribute('id')) {
+                        const curItem = item.children?.find(
+                            (x) => x.id === Number(itemUnderMouse!.id)
+                        );
+                        if (curItem) {
+                            carouselOnClickHandler(e.currentTarget as HTMLElement, curItem);
+                        }
+                    } else {
+                        console.error('itemUnderMouse does not have an id');
+                    }
                 }
             }
 
@@ -110,12 +118,12 @@
 <div id={carouselId} class="contents-carousel no-select">
     <div class="contents-carousel-heading">
         <!-- Carousel title and subtitle -->
-        {#if features['show-titles'] === true}
+        {#if features?.['show-titles'] === true}
             <div class="contents-carousel-heading-title">
                 {item.title?.[$language] ?? item.title?.default ?? ''}
             </div>
         {/if}
-        {#if features['show-titles'] === true}
+        {#if features?.['show-titles'] === true}
             <div class="contents-carousel-heading-subtitle">
                 {item.subtitle?.[$language] ?? item.subtitle?.default ?? ''}
             </div>
@@ -132,7 +140,7 @@
 
                 <div
                     class="contents-carousel-item-block contents-carousel-item-block-base"
-                    id={child.id}
+                    id={String(child.id)}
                     style="scroll-snap-type: center;"
                 >
                     {#if child.imageFilename}
@@ -148,7 +156,7 @@
                         style:font-size="{$contentsFontSize}px"
                     >
                         <!-- carousel item title -->
-                        {#if features['show-titles'] === true}
+                        {#if features?.['show-titles'] === true}
                             <div
                                 class="contents-carousel-item-title-block contents-carousel-item-title"
                             >
@@ -157,7 +165,7 @@
                         {/if}
 
                         <!-- carousel item subtitles -->
-                        {#if features['show-subtitles'] === true}
+                        {#if features?.['show-subtitles'] === true}
                             <div
                                 class="contents-caoursel-item-subtitle-block contents-carousel-item-subtitle"
                             >
@@ -166,9 +174,9 @@
                         {/if}
 
                         <!-- Check for reference -->
-                        {#if child.features['show-references'] === true}
+                        {#if child.features?.['show-references'] === true}
                             {#if child.linkType === 'reference'}
-                                {#await loadReferenceTextCallback(child)}
+                                {#await loadReferenceText(child)}
                                     <div class="contents-ref"></div>
                                 {:then referenceText}
                                     <div class="contents-ref" style="text-align:center;">
diff --git a/src/lib/components/ContentGrid.svelte b/src/lib/components/ContentGrid.svelte
index e3bd9093e..c1339445b 100644
--- a/src/lib/components/ContentGrid.svelte
+++ b/src/lib/components/ContentGrid.svelte
@@ -1,30 +1,31 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { convertStyle, language, s } from '$lib/data/stores';
+    import type { ContentItem, FeatureConfig } from '$config';
+    import { contentsFontSize, convertStyle, language, s } from '$lib/data/stores';
+
+    interface Props {
+        item: ContentItem;
+        imageFolder: string;
+        onClick?: (target: HTMLElement, item: ContentItem) => void;
+        loadReferenceText?: (item: ContentItem) => Promise<string | undefined>;
+        features?: FeatureConfig;
+    }
 
     let {
         item,
         imageFolder,
-        onClick,
-        checkImageSize,
-        loadReferenceText,
-        contentsFontSize,
+        onClick = onClickFallback,
+        loadReferenceText = loadReferenceTextFallback,
         features
-    } = $props();
+    }: Props = $props();
 
-    const onClickCallback = onClick ?? onClickFallback;
-    const checkImageSizeCallback = checkImageSize ?? checkImageSizeFallback;
-    const loadReferenceTextCallback = loadReferenceText ?? loadReferenceTextFallback;
-    function onClickFallback(e: Event, item: any) {
+    function onClickFallback(target: HTMLElement, item: ContentItem) {
         console.warn('Using onClickFallback');
     }
 
-    function checkImageSizeFallback(item: any) {
-        console.warn('Using checkImageSizeFallback');
-    }
-
-    function loadReferenceTextFallback(item: any) {
+    async function loadReferenceTextFallback(item: ContentItem) {
         console.warn('Using loadReferenceTextFallback');
+        return undefined;
     }
 </script>
 
@@ -32,12 +33,12 @@
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div id="grid-{item.id}" class="contents-grid">
     <div class="contents-grid-heading">
-        {#if features['show-titles'] === true}
+        {#if features?.['show-titles'] === true}
             <div class="contents-grid-heading-title">
                 {item.title?.[$language] ?? item.title?.default ?? ''}
             </div>
         {/if}
-        {#if features['show-subtitles'] === true}
+        {#if features?.['show-subtitles'] === true}
             <div class="contents-grid-heading-subtitle">
                 {item.subtitle?.[$language] ?? item.subtitle?.default ?? ''}
             </div>
@@ -49,8 +50,8 @@
             <!-- Grid items go here -->
             <div
                 class="contents-grid-item-block contents-grid-item-block-base contents-link-ref"
-                id={child.id}
-                onclick={(event) => onClickCallback(event, child)}
+                id={String(child.id)}
+                onclick={(event) => onClick(event.currentTarget, child)}
             >
                 {#if child.imageFilename}
                     <img
@@ -61,23 +62,23 @@
 
                 <div class="contents-grid-item-text-block" style:font-size="{$contentsFontSize}px">
                     <!-- Check for title -->
-                    {#if features['show-titles'] === true}
+                    {#if features?.['show-titles'] === true}
                         <div class="contents-grid-item-title-block contents-grid-item-title">
                             {child.title?.[$language] ?? child.title?.default ?? ''}
                         </div>
                     {/if}
 
                     <!-- Check for subtitles -->
-                    {#if features['show-subtitles'] === true}
+                    {#if features?.['show-subtitles'] === true}
                         <div class="contents-grid-item-subtitle-block contents-grid-item-subtitle">
                             {child.subtitle?.[$language] ?? child.subtitle?.default ?? ''}
                         </div>
                     {/if}
 
                     <!-- Check for references -->
-                    {#if features['show-references'] === true}
+                    {#if features?.['show-references'] === true}
                         {#if child.linkType === 'reference'}
-                            {#await loadReferenceTextCallback(child)}
+                            {#await loadReferenceText(child)}
                                 <div class="contents-ref"></div>
                             {:then referenceText}
                                 <div class="contents-ref" style="text-align:center;">
diff --git a/src/lib/components/ContentHeading.svelte b/src/lib/components/ContentHeading.svelte
index 24a92ab31..0b1ee40c4 100644
--- a/src/lib/components/ContentHeading.svelte
+++ b/src/lib/components/ContentHeading.svelte
@@ -1,38 +1,28 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { convertStyle, language, s } from '$lib/data/stores';
+    import type { ContentItem, FeatureConfig, FeatureValue } from '$config';
+    import { contentsFontSize, convertStyle, language, s } from '$lib/data/stores';
 
-    let {
-        item,
-        imageFolder,
-        onClick,
-        checkImageSize,
-        loadReferenceText,
-        contentsFontSize,
-        features
-    } = $props();
-
-    const onClickCallback = onClick ?? onClickFallback;
-    const checkImageSizeCallback = checkImageSize ?? checkImageSizeFallback;
-    const loadReferenceTextCallback = loadReferenceText ?? loadReferenceTextFallback;
-
-    function onClickFallback(event: Event, item: any) {
-        console.warn('USING the onClickFallback');
+    interface Props {
+        item: ContentItem;
+        imageFolder: string;
+        checkImageSize?: (item: ContentItem) => string;
+        features?: FeatureConfig;
     }
 
-    function checkImageSizeFallback(item: any) {
+    let { item, imageFolder, checkImageSize = checkImageSizeFallback, features }: Props = $props();
+
+    function checkImageSizeFallback(item: ContentItem) {
         console.warn('USING checkImageSizeFallback');
+        return '';
     }
 
-    function loadReferenceTextFallback(item: any) {
-        console.warn('USING loadReferenceTextFallback');
-    }
-    function renderLastTextBox(layout: string | undefined): boolean {
+    function renderLastTextBox(layout?: FeatureValue): boolean {
         if (layout === undefined) {
             return false;
         }
-        const exclude: Array<string> = ['image-left-text-right', 'image-right-text-left'];
-        console.log(`renderLastTextBox: ${exclude.find((x) => x === layout)?.length === 0}`);
+        const exclude: FeatureValue[] = ['image-left-text-right', 'image-right-text-left'];
+        console.log(`renderLastTextBox: ${!!exclude.find((x) => x === layout)}`);
         return !exclude.includes(layout);
     }
 </script>
@@ -40,34 +30,34 @@
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div id="heading-{item.id}" style="padding-top:10px;padding-bottom:10px;">
-    {#snippet img(item)}
+    {#snippet img(item: ContentItem)}
         <div
             class="contents-image-block"
-            style="{convertStyle($s['div.contents-image-block'])}{checkImageSizeCallback(item)}"
+            style="{convertStyle($s?.['div.contents-image-block'])}{checkImageSize(item)}"
         >
             <img
                 class="contents-image"
-                style={convertStyle($s['div.contents-image'])}
+                style={convertStyle($s?.['div.contents-image'])}
                 src="{base}/{imageFolder}/{item.imageFilename}"
                 alt={item.imageFilename}
             />
         </div>
     {/snippet}
 
-    {#snippet text(item)}
+    {#snippet text(item: ContentItem)}
         <div
             class="contents-heading-block contents-heading-block-base"
             style:font-size="{$contentsFontSize}px"
         >
             <!-- Check for title -->
-            {#if features['show-titles'] === true}
+            {#if features?.['show-titles'] === true}
                 <div class="contents-heading-title">
                     {item.title?.[$language] ?? item.title?.default ?? ''}
                 </div>
             {/if}
 
             <!-- Check for subtitles -->
-            {#if features['show-subtitles'] === true}
+            {#if features?.['show-subtitles'] === true}
                 <div class="contents-heading-subtitle">
                     {item.subtitle?.[$language] ?? item.subtitle?.default ?? ''}
                 </div>
@@ -78,27 +68,27 @@
     <!-- Heading items go here -->
 
     {#if item.imageFilename}
-        {#if item.features['layout'] === 'image-left-text-right'}
+        {#if item.features?.['layout'] === 'image-left-text-right'}
             <div class="contents-layout-horizontal">
                 {@render img(item)}
                 {@render text(item)}
             </div>
-        {:else if item.features['layout'] === 'image-right-text-left'}
+        {:else if item.features?.['layout'] === 'image-right-text-left'}
             <div class="contents-layout-horizontal contents-layout-reverse">
                 {@render img(item)}
                 {@render text(item)}
             </div>
-        {:else if item.features['layout'] === 'image-top-text-bottom'}
+        {:else if item.features?.['layout'] === 'image-top-text-bottom'}
             <div class="contents-layout-vertical">
                 {@render img(item)}
                 {@render text(item)}
             </div>
-        {:else if renderLastTextBox(item.features['layout']) || renderLastTextBox(features['layout'])}
+        {:else if renderLastTextBox(item.features?.['layout']) || renderLastTextBox(features?.['layout'])}
             {@render img(item)}
         {/if}
     {/if}
 
-    {#if item.features['layout'] === 'text-only'}
+    {#if item.features?.['layout'] === 'text-only'}
         {@render text(item)}
     {/if}
 </div>
diff --git a/src/lib/components/ContentSingle.svelte b/src/lib/components/ContentSingle.svelte
index 931d66a52..5ac3200ce 100644
--- a/src/lib/components/ContentSingle.svelte
+++ b/src/lib/components/ContentSingle.svelte
@@ -1,39 +1,39 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { convertStyle, language, s } from '$lib/data/stores';
+    import type { ContentItem, FeatureConfig, FeatureValue } from '$config';
+    import { contentsFontSize, convertStyle, language, s } from '$lib/data/stores';
+
+    interface Props {
+        item: ContentItem;
+        imageFolder: string;
+        onClick?: (target: HTMLElement, item: ContentItem) => void;
+        checkImageSize?: (item: ContentItem) => string;
+        features?: FeatureConfig;
+    }
 
     let {
         item,
         imageFolder,
-        onClick,
-        checkImageSize,
-        loadReferenceText,
-        contentsFontSize,
+        onClick = onClickFallback,
+        checkImageSize = checkImageSizeFallback,
         features
-    } = $props();
-
-    const onClickCallback = onClick ?? onClickFallback;
-    const checkImageSizeCallback = checkImageSize ?? checkImageSizeFallback;
-    const loadReferenceTextCallback = loadReferenceText ?? loadReferenceTextFallback;
+    }: Props = $props();
 
-    function onClickFallback(event: Event, item: any) {
+    function onClickFallback(target: HTMLElement, item: ContentItem) {
         console.warn('USING the onClickFallback');
     }
 
-    function checkImageSizeFallback(item: any) {
+    function checkImageSizeFallback(item: ContentItem) {
         console.warn('USING checkImageSizeFallback');
+        return '';
     }
 
-    function loadReferenceTextFallback(item: any) {
-        console.warn('USING loadReferenceTextFallback');
-    }
-
-    function renderLastTextBox(layout: string | undefined): boolean {
+    function renderLastTextBox(layout?: FeatureValue): boolean {
         if (layout === undefined) {
             return false;
         }
-        const exclude: Array<string> = ['image-left-text-right', 'image-right-text-left'];
-        console.log(`renderLastTextBox: ${exclude.find((x) => x === layout)?.length === 0}`);
+        const exclude: FeatureValue[] = ['image-left-text-right', 'image-right-text-left'];
+        console.log(`renderLastTextBox: ${!!exclude.find((x) => x === layout)}`);
         return !exclude.includes(layout);
     }
 </script>
@@ -41,36 +41,36 @@
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
-    id={item.id}
-    onclick={(event) => onClickCallback(event, item)}
+    id={String(item.id)}
+    onclick={(event) => onClick(event.currentTarget, item)}
     class="contents-item-block contents-item-block-base"
     style="padding-top:10px;padding-bottom:10px;"
 >
-    {#snippet img(item)}
+    {#snippet img(item: ContentItem)}
         <div
             class="contents-image-block"
-            style="{convertStyle($s['div.contents-image-block'])}{checkImageSizeCallback(item)}"
+            style="{convertStyle($s?.['div.contents-image-block'])}{checkImageSize(item)}"
         >
             <img
                 class="contents-image"
-                style={convertStyle($s['div.contents-image'])}
+                style={convertStyle($s?.['div.contents-image'])}
                 src="{base}/{imageFolder}/{item.imageFilename}"
                 alt={item.imageFilename}
             />
         </div>
     {/snippet}
 
-    {#snippet text(item)}
+    {#snippet text(item: ContentItem)}
         <div style:font-size="{$contentsFontSize}px">
             <!-- Check for title -->
-            {#if features['show-titles'] === true}
+            {#if features?.['show-titles'] === true}
                 <div class="contents-heading-title">
                     {item.title?.[$language] ?? item.title?.default ?? ''}
                 </div>
             {/if}
 
             <!-- Check for subtitles -->
-            {#if features['show-subtitles'] === true}
+            {#if features?.['show-subtitles'] === true}
                 <div class="contents-heading-subtitle">
                     {item.subtitle?.[$language] ?? item.subtitle?.default ?? ''}
                 </div>
@@ -81,27 +81,27 @@
     <!-- Heading items go here -->
 
     {#if item.imageFilename}
-        {#if item.features['layout'] === 'image-left-text-right'}
+        {#if item.features?.['layout'] === 'image-left-text-right'}
             <div class="contents-layout-horizontal">
                 {@render img(item)}
                 {@render text(item)}
             </div>
-        {:else if item.features['layout'] === 'image-right-text-left'}
+        {:else if item.features?.['layout'] === 'image-right-text-left'}
             <div class="contents-layout-horizontal contents-layout-reverse">
                 {@render img(item)}
                 {@render text(item)}
             </div>
-        {:else if item.features['layout'] === 'image-top-text-bottom'}
+        {:else if item.features?.['layout'] === 'image-top-text-bottom'}
             <div class="contents-layout-vertical">
                 {@render img(item)}
                 {@render text(item)}
             </div>
-        {:else if renderLastTextBox(features['layout'])}
+        {:else if renderLastTextBox(features?.['layout'])}
             {@render img(item)}
         {/if}
     {/if}
 
-    {#if item.features['layout'] === 'text-only'}
+    {#if item.features?.['layout'] === 'text-only'}
         {@render text(item)}
     {/if}
 </div>
diff --git a/src/lib/components/Dropdown.svelte b/src/lib/components/Dropdown.svelte
index c0b76d50a..7d42b43e3 100644
--- a/src/lib/components/Dropdown.svelte
+++ b/src/lib/components/Dropdown.svelte
@@ -8,22 +8,22 @@ A simple dropdown menu from DaisyUI.
 
     let { cols = 6, navEnd = function () {}, label, content } = $props();
 
-    let details: HTMLDetailsElement = $state();
-    let container: HTMLDivElement = $state();
+    let details: HTMLDetailsElement | undefined = $state();
+    let container: HTMLDivElement | undefined = $state();
     export function close() {
-        details.removeAttribute('open');
+        details?.removeAttribute('open');
     }
 
     function clickOutside(event: MouseEvent) {
         const path = event.composedPath();
-        const isInside = path.includes(container);
+        const isInside = container && path.includes(container);
         if (!isInside) {
             close();
         }
     }
 
     function onToggle() {
-        if (details.open) {
+        if (details?.open) {
             document.addEventListener('click', clickOutside);
         } else {
             document.removeEventListener('click', clickOutside);
@@ -49,7 +49,7 @@ A simple dropdown menu from DaisyUI.
         class="dy-dropdown-content dy-menu shadow-lg mt-2.5 bg-base-100 z-10 max-sm:absolute max-sm:start-1.5"
         class:min-w-[22rem]={cols == 6}
         class:min-w-[18rem]={cols == 5}
-        style={convertStyle($s['ui.background'])}
+        style={convertStyle($s?.['ui.background'])}
         onblur={() => navEnd()}
     >
         {@render content?.()}
diff --git a/src/lib/components/FontList.svelte b/src/lib/components/FontList.svelte
index 704a3b282..e030638bb 100644
--- a/src/lib/components/FontList.svelte
+++ b/src/lib/components/FontList.svelte
@@ -4,15 +4,15 @@ Font list component.
 -->
 <svelte:options accessors />
 
-<script>
+<script lang="ts">
     import config from '$assets/config';
     import { fontChoices, monoIconColor, themeColors } from '$lib/data/stores';
     import { createEventDispatcher } from 'svelte';
 
     const dispatch = createEventDispatcher();
-    export let selectedFont;
+    export let selectedFont: string;
 
-    function handleClick(font) {
+    function handleClick(font: string) {
         selectedFont = font;
         dispatch('menuaction', {
             font: font
@@ -35,7 +35,7 @@ Font list component.
                 style:font-family={font}
                 role="button"
             >
-                {config.fonts.find((x) => x.family === font)?.name}
+                {config.fonts?.find((x) => x.family === font)?.name}
             </a>
         </li>
     {/each}
diff --git a/src/lib/components/FontSelector.svelte b/src/lib/components/FontSelector.svelte
index b76e44135..c0002dafc 100644
--- a/src/lib/components/FontSelector.svelte
+++ b/src/lib/components/FontSelector.svelte
@@ -2,17 +2,19 @@
 @component
 Font Selector component.
 -->
-<script>
+<script lang="ts">
     import { convertStyle, currentFont, currentFonts, refs, s, t } from '$lib/data/stores';
     import FontList from './FontList.svelte';
     import Modal from './Modal.svelte';
 
     const modalId = 'fontSelector';
-    let modal;
-    let fontList;
+    let modal: Modal;
+    let fontList: FontList;
 
     export function showModal() {
-        fontList.selectedFont = $currentFont;
+        if ($currentFont) {
+            fontList.selectedFont = $currentFont;
+        }
         modal.showModal();
     }
 
@@ -25,16 +27,14 @@ Font Selector component.
 </script>
 
 <Modal bind:this={modal} id={modalId}>
-    <FontList bind:this={fontList} selectedFont={$currentFont} />
+    <FontList bind:this={fontList} selectedFont={$currentFont ?? ''} />
     <div class="flex w-full justify-between dy-modal-action">
-        <!-- svelte-ignore a11y-click-events-have-key-events -->
         <button
-            style={convertStyle($s['ui.dialog.button'])}
+            style={convertStyle($s?.['ui.dialog.button'])}
             class="dy-btn dy-btn-sm dy-btn-ghost no-animation">{$t['Button_Cancel']}</button
         >
-        <!-- svelte-ignore a11y-click-events-have-key-events -->
         <button
-            style={convertStyle($s['ui.dialog.button'])}
+            style={convertStyle($s?.['ui.dialog.button'])}
             class="dy-btn dy-btn-sm dy-btn-ghost no-animation"
             on:click={() => handleOk()}>{$t['Button_OK']}</button
         >
diff --git a/src/lib/components/HorizontalPanes.svelte b/src/lib/components/HorizontalPanes.svelte
deleted file mode 100644
index ba2e64a42..000000000
--- a/src/lib/components/HorizontalPanes.svelte
+++ /dev/null
@@ -1,125 +0,0 @@
-<!--
-@component
-based on `HSplitPane` from [svelte-split-pane](https://github.com/Readiz/svelte-split-pane).  
-heavily modified because it did not support more than 2 panes and touch was not working.
--->
-<script>
-    /** @type {{panes?: any}} */
-    let { panes = [] } = $props();
-    /** @type {HTMLDivElement[]} */ let separators = $state([]);
-    /** @type {HTMLDivElement[]} */ let paneElems = $state([]);
-    /** @type {HTMLDivElement} */ let container = $state();
-
-    /**% between neighboring panes*/ let sliders = $derived(Array(panes.length - 1).fill(50));
-    /**% width of pane*/ let widths = $derived(Array(panes.length).fill(100 / panes.length));
-    /**% left edge of separator*/ let edges = $derived(
-        Array(separators.length)
-            .fill(100 / panes.length)
-            .map((n, i) => n * (i + 1))
-    );
-    /**
-     * inital values of current separator
-     * @type {any | null}
-     */ let curr = null;
-    const onPointerdown = (/** @type PointerEvent */ e, /** @type number*/ i) => {
-        if (e.cancelable) {
-            e.preventDefault();
-        }
-        curr = {
-            e,
-            i: i,
-            offsetLeft: separators[i].offsetLeft,
-            firstWidth: paneElems[i].offsetWidth,
-            secondWidth: paneElems[i + 1].offsetWidth
-        };
-    };
-    const onPointermove = (/** @type PointerEvent */ e) => {
-        if (e.cancelable) {
-            e.preventDefault();
-        }
-        if (curr === null) {
-            return;
-        }
-        /**i is tedious to replace with curr.i*/ const i = curr.i;
-        //calculate distance in px to move edge and slider
-        var deltaX = Math.min(
-            Math.max(e.clientX - curr.e.clientX, -curr.firstWidth),
-            curr.secondWidth
-        );
-        //convert deltaX to %
-        edges[i] = (100 * (curr.offsetLeft + deltaX)) / container.offsetWidth;
-        sliders[i] =
-            (100 * (curr.firstWidth + deltaX)) /
-            (paneElems[i].offsetWidth + paneElems[i + 1].offsetWidth);
-
-        //calculate new width percentages for panes on either side of separator
-        const sum = widths[i] + widths[i + 1];
-        widths[i] = (sum * sliders[i]) / 100;
-        widths[i + 1] = (sum * (100 - sliders[i])) / 100;
-
-        //adjust neighboring sliders if they exist
-        if (i > 0) {
-            sliders[i - 1] = (100 * widths[i - 1]) / (widths[i - 1] + widths[i]);
-        }
-        if (i < sliders.length) {
-            sliders[i + 1] = (100 * widths[i + 1]) / (widths[i + 1] + widths[i + 2]);
-        }
-    };
-    const onPointerup = (/** @type PointerEvent */ e) => {
-        if (e && e.cancelable) {
-            e.preventDefault();
-        }
-        curr = null;
-    };
-</script>
-
-<div
-    class="wrapper"
-    bind:this={container}
-    onpointermove={onPointermove}
-    onpointerup={onPointerup}
-    onpointerleave={onPointerup}
-    onpointercancel={onPointerup}
->
-    {#each panes as p, i}
-        <div class="pane" style="width: {widths[i]}%" bind:this={paneElems[i]}>
-            <p.component {...p.props} />
-        </div>
-        {#if i !== panes.length - 1}
-            <div
-                class="separator"
-                bind:this={separators[i]}
-                style="left: {edges[i]}%"
-                onpointerdown={(e) => onPointerdown(e, i)}
-            ></div>
-        {/if}
-    {/each}
-</div>
-
-<style>
-    div.wrapper {
-        display: flex;
-        height: 100%;
-        width: 100%;
-        margin: 0 auto;
-        overflow: auto;
-        display: inline-flex;
-    }
-    div.separator {
-        cursor: col-resize;
-        height: 100%;
-        width: 8px;
-        margin-left: -2px;
-        z-index: 1;
-        background-color: #aaa;
-        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='30'><path d='M2 0 v30 M5 0 v30 M8 0 v30' fill='none' stroke='black'/></svg>");
-        background-repeat: no-repeat;
-        background-position: center;
-        touch-action: none;
-    }
-    div.pane {
-        margin: 0 2px;
-        height: 100%;
-        overflow: auto;
-    }
-</style>
diff --git a/src/lib/components/HtmlBookView.svelte b/src/lib/components/HtmlBookView.svelte
index 4b6675e10..2afd5d377 100644
--- a/src/lib/components/HtmlBookView.svelte
+++ b/src/lib/components/HtmlBookView.svelte
@@ -2,11 +2,8 @@
 @component
 Display an HTML Book.
 -->
-<script lang="ts">
-    import { base } from '$app/paths';
-    import { scriptureConfig } from '$assets/config';
-
-    interface Props {
+<script module lang="ts">
+    export interface Props {
         references: {
             collection: string;
             book: string;
@@ -15,10 +12,15 @@ Display an HTML Book.
         bodyFontSize: number;
         fetch: any;
     }
+</script>
+
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { scriptureConfig } from '$assets/config';
 
     let { references, bodyLineHeight, bodyFontSize, fetch }: Props = $props();
 
-    let htmlBody: string = $state();
+    let htmlBody: string = $state('');
     let fontSize = $derived(bodyFontSize + 'px');
     let lineHeight = $derived(bodyLineHeight + '%');
 
diff --git a/src/lib/components/LayoutOptions.svelte b/src/lib/components/LayoutOptions.svelte
index 94ef569df..faa41cf69 100644
--- a/src/lib/components/LayoutOptions.svelte
+++ b/src/lib/components/LayoutOptions.svelte
@@ -3,17 +3,8 @@
 Displays the three different layout option menus.  
 -->
 <script lang="ts">
-    import config, { scriptureConfig } from '$assets/config';
-    import {
-        convertStyle,
-        LAYOUT_SINGLE,
-        LAYOUT_TWO,
-        LAYOUT_VERSE_BY_VERSE,
-        s,
-        selectedLayouts,
-        t,
-        themeColors
-    } from '$lib/data/stores';
+    import { scriptureConfig } from '$assets/config';
+    import { convertStyle, Layout, s, selectedLayouts, t, themeColors } from '$lib/data/stores';
     import { DropdownIcon } from '$lib/icons';
     import CollectionList from './CollectionList.svelte';
     import Dropdown from './Dropdown.svelte';
@@ -31,8 +22,8 @@ Displays the three different layout option menus.
         scriptureConfig.bookCollections?.map((ds) => ({
             id: ds.languageCode + '_' + ds.id,
             name: ds.collectionName,
-            singlePane:
-                ds?.features['bc-allow-single-pane'] ?? ds?.features['bc-layout-allow-single-pane'],
+            singlePane: (ds?.features['bc-allow-single-pane'] ??
+                ds?.features['bc-layout-allow-single-pane']) as boolean,
             description: ds?.collectionDescription,
             image: ds?.collectionImage
         })) ?? [];
@@ -40,34 +31,38 @@ Displays the three different layout option menus.
     function handleClick(opt: any, index: number) {
         const docSet = opt.collection;
         switch (layoutOption) {
-            case LAYOUT_SINGLE:
+            case Layout.Single:
                 $selectedLayouts.singlePane = docSet;
                 break;
-            case LAYOUT_TWO:
-                $selectedLayouts.sideBySide[index] = docSet;
-                for (let i = 0; i < $selectedLayouts.sideBySide.length; i++) {
-                    if (i === index) {
-                        // if found self
-                        continue;
-                    } else if ($selectedLayouts.sideBySide[i].id === docSet.id) {
-                        // if this is a repeat value of self
-                        $selectedLayouts.sideBySide[i] = allDocSets.filter(
-                            (x) => $selectedLayouts.sideBySide.includes(x) === false
-                        )[0];
+            case Layout.Two:
+                if ($selectedLayouts.sideBySide) {
+                    $selectedLayouts.sideBySide[index] = docSet;
+                    for (let i = 0; i < $selectedLayouts.sideBySide.length; i++) {
+                        if (i === index) {
+                            // if found self
+                            continue;
+                        } else if ($selectedLayouts.sideBySide[i].id === docSet.id) {
+                            // if this is a repeat value of self
+                            $selectedLayouts.sideBySide[i] = allDocSets.filter(
+                                (x) => $selectedLayouts.sideBySide?.includes(x) === false
+                            )[0];
+                        }
                     }
                 }
                 break;
-            case LAYOUT_VERSE_BY_VERSE:
-                $selectedLayouts.verseByVerse[index] = docSet;
-                for (let i = 0; i < $selectedLayouts.verseByVerse.length; i++) {
-                    if (i === index) {
-                        // if found self
-                        continue;
-                    } else if ($selectedLayouts.verseByVerse[i].id === docSet.id) {
-                        // if this is a repeat value of self
-                        $selectedLayouts.verseByVerse[i] = allDocSets.filter(
-                            (x) => $selectedLayouts.verseByVerse.includes(x) === false
-                        )[0];
+            case Layout.VerseByVerse:
+                if ($selectedLayouts.verseByVerse) {
+                    $selectedLayouts.verseByVerse[index] = docSet;
+                    for (let i = 0; i < $selectedLayouts.verseByVerse.length; i++) {
+                        if (i === index) {
+                            // if found self
+                            continue;
+                        } else if ($selectedLayouts.verseByVerse[i].id === docSet.id) {
+                            // if this is a repeat value of self
+                            $selectedLayouts.verseByVerse[i] = allDocSets.filter(
+                                (x) => $selectedLayouts.verseByVerse?.includes(x) === false
+                            )[0];
+                        }
                     }
                 }
                 break;
@@ -76,13 +71,13 @@ Displays the three different layout option menus.
             collection: opt
         });
         (document.activeElement as HTMLElement).blur();
-        // TODO: when implementing LAYOUT_TWO, do something for Dropdown.close instead of blur??
+        // TODO: when implementing Layout.TWO, do something for Dropdown.close instead of blur??
     }
 </script>
 
 <div>
     <!-- Single Pane -->
-    {#if layoutOption === LAYOUT_SINGLE}
+    {#if layoutOption === Layout.Single}
         <p class="py-2" style:color={$themeColors['LayoutTitleColor']}>
             {$t['Layout_Single_Pane']}
         </p>
@@ -92,7 +87,7 @@ Displays the three different layout option menus.
             menuaction={(event) => handleClick(event, 0)}
         />
         <!-- Two Pane -->
-    {:else if layoutOption === LAYOUT_TWO}
+    {:else if layoutOption === Layout.Two}
         <p class="py-2" style:color={$themeColors['LayoutTitleColor']}>
             {$t['Layout_Two_Pane']}
         </p>
@@ -101,24 +96,24 @@ Displays the three different layout option menus.
                 <div>
                     <Dropdown>
                         {#snippet label()}
-                            <div class="px-3" style={convertStyle($s['ui.layouts.number'])}>
+                            <div class="px-3" style={convertStyle($s?.['ui.layouts.number'])}>
                                 {i + 1}.
                             </div>
                             <div class="dy-relative font-normal normal-case text-left">
-                                <div style={convertStyle($s['ui.layouts.title'])}>
+                                <div style={convertStyle($s?.['ui.layouts.title'])}>
                                     {collection.name}
                                 </div>
                                 {#if collection.description}
                                     <div
                                         class="text-sm"
-                                        style={convertStyle($s['ui.layouts.selector'])}
+                                        style={convertStyle($s?.['ui.layouts.selector'])}
                                     >
                                         {collection.description}
                                     </div>
                                 {/if}
                             </div>
                             <div class="px-3">
-                                <DropdownIcon color={$s['ui.layouts.selector'].color} />
+                                <DropdownIcon color={$s?.['ui.layouts.selector'].color} />
                             </div>
                         {/snippet}
                         {#snippet content()}
@@ -135,7 +130,7 @@ Displays the three different layout option menus.
             {/each}
         </div>
         <!-- Verse By Verse -->
-    {:else if layoutOption === LAYOUT_VERSE_BY_VERSE}
+    {:else if layoutOption === Layout.VerseByVerse}
         <p class="py-2" style:color={$themeColors['LayoutTitleColor']}>
             {$t['Layout_Interlinear']}
         </p>
@@ -143,24 +138,24 @@ Displays the three different layout option menus.
             <div>
                 <Dropdown>
                     {#snippet label()}
-                        <div class="px-3" style={convertStyle($s['ui.layouts.number'])}>
+                        <div class="px-3" style={convertStyle($s?.['ui.layouts.number'])}>
                             {i + 1}.
                         </div>
                         <div class="dy-relative font-normal normal-case text-left">
-                            <div style={convertStyle($s['ui.layouts.title'])}>
+                            <div style={convertStyle($s?.['ui.layouts.title'])}>
                                 {collection.name}
                             </div>
                             {#if collection.description}
                                 <div
                                     class="text-sm"
-                                    style={convertStyle($s['ui.layouts.selector'])}
+                                    style={convertStyle($s?.['ui.layouts.selector'])}
                                 >
                                     {collection.description}
                                 </div>
                             {/if}
                         </div>
                         <div class="px-3">
-                            <DropdownIcon color={$s['ui.layouts.selector'].color} />
+                            <DropdownIcon color={$s?.['ui.layouts.selector'].color} />
                         </div>
                     {/snippet}
                     {#snippet content()}
diff --git a/src/lib/components/Modal.svelte b/src/lib/components/Modal.svelte
index 281210cf6..3c70c768a 100644
--- a/src/lib/components/Modal.svelte
+++ b/src/lib/components/Modal.svelte
@@ -8,19 +8,26 @@ See https://daisyui.com/components/modal/#modal-that-closes-when-clicked-outside
 @prop { String }   addCSS  - CSS to inject into the model contents div/form.
 @prop { Function } onclose - Function to run when Modal closes.
 -->
-<script>
+<script lang="ts">
     import { convertStyle, direction, s } from '$lib/data/stores';
+    import type { Snippet } from 'svelte';
 
-    let { id, children, addCSS = '', onclose = null } = $props();
+    interface Props {
+        id: string;
+        children?: Snippet;
+        addCSS?: string;
+        onclose?: () => void;
+        dialog?: HTMLDialogElement;
+    }
 
-    let dialog;
+    let { id, children, addCSS = '', onclose, dialog = $bindable() }: Props = $props();
 
     /**
      * This exported function allows buttons/labels
      * in other divs to trigger the modal popup
      */
     export function showModal() {
-        dialog.showModal();
+        dialog?.showModal();
     }
 </script>
 
@@ -33,7 +40,7 @@ See https://daisyui.com/components/modal/#modal-that-closes-when-clicked-outside
 >
     <form
         method="dialog"
-        style={convertStyle($s['ui.dialog']) + addCSS}
+        style={convertStyle($s?.['ui.dialog']) + addCSS}
         class="dy-modal-box overflow-y-visible relative"
     >
         {@render children?.()}
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index 5214837ed..310201a29 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -8,33 +8,34 @@ The navbar component.
         convertStyle,
         direction,
         layout,
-        LAYOUT_TWO,
+        Layout,
         NAVBAR_HEIGHT,
         s,
         showDesktopSidebar
     } from '$lib/data/stores';
     import { ArrowBackIcon, ArrowForwardIcon, HamburgerIcon } from '$lib/icons';
     import { gotoRoute } from '$lib/navigate';
+    import type { Snippet } from 'svelte';
 
     interface Props {
         showBackButton?: boolean;
-        start?: () => any;
-        center?: () => any;
-        end?: () => any;
-        backNavigation?: (routeId: string) => void;
+        start?: Snippet;
+        center?: Snippet;
+        end?: Snippet;
+        backNavigation?: (e: Event, routeId: string) => void;
     }
 
     let { showBackButton = true, start, center, end, backNavigation }: Props = $props();
 
-    function handleBackNavigation() {
-        if (backNavigation) {
-            backNavigation(page.route.id);
+    function handleBackNavigation(e: Event) {
+        if (backNavigation && page.route.id) {
+            backNavigation(e, page.route.id);
         } else {
             gotoRoute(`/`);
         }
     }
 
-    let actionBarColor = $derived($s['ui.bar.action']['background-color']);
+    let actionBarColor = $derived($s?.['ui.bar.action']['background-color']);
 </script>
 
 <!--
@@ -46,7 +47,7 @@ The navbar component.
             <label
                 for="sidebar"
                 class="dy-btn dy-btn-ghost dy-btn-circle p-1 dy-drawer-button"
-                class:lg:hidden={$showDesktopSidebar && $layout.mode !== LAYOUT_TWO}
+                class:lg:hidden={$showDesktopSidebar && $layout.mode !== Layout.Two}
             >
                 <HamburgerIcon color="white" />
             </label>
@@ -62,7 +63,7 @@ The navbar component.
         {/if}
         {@render start?.()}
     </div>
-    <div class="dy-navbar-center grow" style={convertStyle($s['ui.screen-title'])}>
+    <div class="dy-navbar-center grow" style={convertStyle($s?.['ui.screen-title'])}>
         {@render center?.()}
     </div>
     <div class="justify-end fill-base-content">
diff --git a/src/lib/components/PlanStopDialog.svelte b/src/lib/components/PlanStopDialog.svelte
index 8172eb6bf..54a3e9d00 100644
--- a/src/lib/components/PlanStopDialog.svelte
+++ b/src/lib/components/PlanStopDialog.svelte
@@ -3,7 +3,7 @@
 Plan Stop Modal Dialog component.
 -->
 
-<script>
+<script lang="ts">
     import { deleteAllProgressItemsForPlan } from '$lib/data/planProgressItems';
     import { addPlanState } from '$lib/data/planStates';
     import { t } from '$lib/data/stores';
@@ -13,10 +13,10 @@ Plan Stop Modal Dialog component.
     let { planId = $bindable(undefined), vertOffset = '1rem' } = $props();
 
     const modalId = 'planStopDialog';
-    let modal = $state(undefined);
+    let modal: Modal | undefined = $state(undefined);
 
     export function showModal() {
-        modal.showModal();
+        modal?.showModal();
     }
     async function stopPlan() {
         await addPlanState({
diff --git a/src/lib/components/ScriptureViewSofria.svelte b/src/lib/components/ScriptureViewSofria.svelte
index 32e74afc9..54d33966b 100644
--- a/src/lib/components/ScriptureViewSofria.svelte
+++ b/src/lib/components/ScriptureViewSofria.svelte
@@ -9,10 +9,34 @@ LOGGING:
 - add logs entry to local storage with this value (and change 1 to 0 to disable topic)
     { "scripture" : {"root": 1, "docResult": 1, "document":1, "paragraph": 1, "phrase" :1 , "chapter": 1, "verses": 1, "text": 1, "sequence": 1, "wrapper":1, "milestone":1, "blockGraft": 1, "inlineGraft": 1, "mark": 1, "meta": 1, "row": 1} }
 -->
+<script module lang="ts">
+    export interface Props {
+        audioPhraseEndChars: string;
+        bodyFontSize: any;
+        bodyLineHeight: any;
+        bookmarks: any;
+        notes: any;
+        highlights: any;
+        maxSelections: any;
+        redLetters: boolean;
+        references: any;
+        glossary: any;
+        selectedVerses: any;
+        themeColors: any;
+        verseLayout: any;
+        viewShowBibleImages: string;
+        viewShowBibleVideos: string;
+        viewShowIllustrations: boolean;
+        viewShowVerses: boolean;
+        viewShowGlossaryWords: boolean;
+        font: string;
+        proskomma: SABProskomma;
+    }
+</script>
+
 <script lang="ts">
     /* eslint-disable svelte/no-dom-manipulating */
 
-    import { base } from '$app/paths';
     import { scriptureConfig } from '$assets/config';
     import { hasAudioPlayed, seekToVerse } from '$lib/data/audio';
     import {
@@ -89,28 +113,7 @@ LOGGING:
         viewShowGlossaryWords,
         font,
         proskomma
-    }: {
-        audioPhraseEndChars: string;
-        bodyFontSize: any;
-        bodyLineHeight: any;
-        bookmarks: any;
-        notes: any;
-        highlights: any;
-        maxSelections: any;
-        redLetters: boolean;
-        references: any;
-        glossary: any;
-        selectedVerses: any;
-        themeColors: any;
-        verseLayout: any;
-        viewShowBibleImages: string;
-        viewShowBibleVideos: string;
-        viewShowIllustrations: boolean;
-        viewShowVerses: boolean;
-        viewShowGlossaryWords: boolean;
-        font: string;
-        proskomma: SABProskomma;
-    } = $props();
+    }: Props = $props();
 
     const scriptureLogs = $derived.by(() =>
         $userSettings['scripture-logs']
@@ -254,6 +257,7 @@ LOGGING:
         }
     });
 
+    // svelte-ignore state_referenced_locally
     const stateSelectedVerses = fromStore(selectedVerses);
     $effect(() => {
         // eslint-disable-next-line @typescript-eslint/no-unused-expressions
diff --git a/src/lib/components/SearchResultList.svelte b/src/lib/components/SearchResultList.svelte
index 65ddb6f49..2c6245cf8 100644
--- a/src/lib/components/SearchResultList.svelte
+++ b/src/lib/components/SearchResultList.svelte
@@ -24,6 +24,7 @@
     // Changes to signal when to clear results
     const showSpinner = $derived(!queryDone && results.length === 0);
     let resultsShown = $state<SearchResult[]>([]);
+    // svelte-ignore state_referenced_locally
     let displayQueryId = $state(queryId);
 
     const resultCountText = $derived(formatResultCount(results.length));
diff --git a/src/lib/components/SelectGrid.svelte b/src/lib/components/SelectGrid.svelte
index 3368bf9b4..b638048e6 100644
--- a/src/lib/components/SelectGrid.svelte
+++ b/src/lib/components/SelectGrid.svelte
@@ -11,14 +11,14 @@ A component to display menu options in a grid.
         options = [],
         cols = 6,
         menuaction
-    }: { options: App.GridGroup[]; cols; menuaction } = $props();
+    }: { options: App.GridGroup[]; cols?: number; menuaction: App.MenuActionHandler } = $props();
 
-    let hovered = $state(null);
+    let hovered: string | null = $state(null);
     const hoverColor = $derived($themeColors['ButtonSelectedColor']);
 
     // Function to handle span touch
-    function handleHover(event) {
-        hovered = event.target.id;
+    function handleHover(event: Event) {
+        hovered = (event.target as HTMLElement)?.id || null;
     }
 
     // Function to handle span touch end
@@ -26,17 +26,18 @@ A component to display menu options in a grid.
         hovered = null;
     }
 
-    function handleTouchMove(event) {
+    function handleTouchMove(event: TouchEvent) {
         const touch = event.touches[0];
         const element = document.elementFromPoint(touch.clientX, touch.clientY);
-        const rect = element.getBoundingClientRect();
+        const rect = element?.getBoundingClientRect();
         if (
+            rect &&
             touch.clientX >= rect.left &&
             touch.clientX <= rect.right &&
             touch.clientY >= rect.top &&
             touch.clientY <= rect.bottom
         ) {
-            hovered = element.id;
+            hovered = element?.id || null;
         } else {
             hovered = null;
         }
@@ -45,7 +46,7 @@ A component to display menu options in a grid.
     const cellStyle = $derived(
         convertStyle(
             Object.fromEntries(
-                Object.entries($s['ui.button.book-grid']).filter(
+                Object.entries($s?.['ui.button.book-grid'] ?? {}).filter(
                     ([key]) => key != 'background-color'
                 )
             )
@@ -54,13 +55,13 @@ A component to display menu options in a grid.
     const rowStyle = $derived(
         convertStyle(
             Object.fromEntries(
-                Object.entries($s['ui.button.chapter-intro']).filter(
+                Object.entries($s?.['ui.button.chapter-intro'] ?? '').filter(
                     ([key]) => key != 'background-color'
                 )
             )
         )
     );
-    const headerStyle = $derived(convertStyle($s['ui.text.book-group-title']));
+    const headerStyle = $derived(convertStyle($s?.['ui.text.book-group-title']));
 
     const bookCollectionColor = $derived((id: string, category: string) => {
         const section = scriptureConfig.bookCollections
@@ -69,7 +70,7 @@ A component to display menu options in a grid.
         let color =
             section && Object.keys($themeBookColors).includes(section)
                 ? $themeBookColors[section]
-                : $s[category]['background-color'];
+                : $s?.[category]['background-color'];
         return color;
     });
 
diff --git a/src/lib/components/Settings.svelte b/src/lib/components/Settings.svelte
index e17308f01..2db033f7e 100644
--- a/src/lib/components/Settings.svelte
+++ b/src/lib/components/Settings.svelte
@@ -1,26 +1,19 @@
 <script lang="ts">
-    import { direction, t, userSettings } from '$lib/data/stores';
-    import * as s from '$lib/data/stores/setting';
+    import { SettingsCategory, t, userSettings } from '$lib/data/stores';
 
     interface Props {
-        settings: Array<App.UserPreferenceSetting>;
+        settings: App.UserPreferenceSetting[];
     }
 
     let { settings }: Props = $props();
 
-    let categories = [];
-    [
-        s.SETTINGS_CATEGORY_TEXT_DISPLAY,
-        s.SETTINGS_CATEGORY_AUDIO,
-        s.SETTINGS_CATEGORY_NOTIFICATIONS,
-        s.SETTINGS_CATEGORY_NAVIGATION,
-        s.SETTINGS_CATEGORY_INTERFACE
-    ].forEach((element) => {
-        const fs = settings.filter((s) => s.category === element);
-        if (fs.length > 0) {
-            categories[element] = fs;
-        }
-    });
+    const categories: Record<SettingsCategory, App.UserPreferenceSetting[]> = $derived(
+        Object.fromEntries(
+            Object.values(SettingsCategory)
+                .map((cat) => [cat, settings.filter((s) => s.category === cat)])
+                .filter(([_, v]) => v.length)
+        )
+    );
 </script>
 
 <!-- loops through the different settings types -->
@@ -28,7 +21,7 @@
     <div class="settings-category">
         {$t[category]}
     </div>
-    {#each categories[category] as setting, i}
+    {#each categories[category as SettingsCategory] as setting, i}
         {#if setting.type === 'checkbox'}
             <div
                 class="dy-form-control settings-item w-full max-w-lg"
@@ -41,7 +34,7 @@
                     <input
                         type="checkbox"
                         class="dy-checkbox"
-                        bind:checked={$userSettings[setting.key]}
+                        bind:checked={$userSettings[setting.key] as boolean}
                     />
                 </label>
                 {#if setting.summary}
@@ -64,7 +57,7 @@
                     bind:value={$userSettings[setting.key]}
                 >
                     {#each setting.entries ?? [] as entry, i}
-                        <option value={setting.values[i]}>{$t[entry] || entry}</option>
+                        <option value={setting.values![i]}>{$t[entry] || entry}</option>
                     {/each}
                 </select>
                 {#if setting.summary}
diff --git a/src/lib/components/Sidebar.svelte b/src/lib/components/Sidebar.svelte
index c557efd05..aa67a899e 100644
--- a/src/lib/components/Sidebar.svelte
+++ b/src/lib/components/Sidebar.svelte
@@ -2,12 +2,13 @@
 @component
 The sidebar/drawer.
 -->
-<script>
+<script lang="ts">
     import { resolve } from '$app/paths';
-    import config from '$assets/config';
+    import config, { scriptureConfig } from '$assets/config';
     import contents from '$assets/contents';
     import nav_drawer_image from '$assets/images/nav_drawer.png';
     import nav_drawer_2x from '$assets/images/nav_drawer@2x.png';
+    import type { MenuItemConfig } from '$config';
     import {
         direction,
         fontChoices,
@@ -48,7 +49,7 @@ The sidebar/drawer.
         eager: true,
         query: '?url',
         base: '/src/gen-assets/icons/menu-items'
-    });
+    }) as Record<string, string>;
 
     let { children } = $props();
 
@@ -58,36 +59,38 @@ The sidebar/drawer.
     function closeDrawer() {
         menuToggle = false;
     }
-    function closeOnEscape(event) {
-        if (event.key === 'Escape') {
+    function closeOnEscape(key: string) {
+        if (key === 'Escape') {
             closeDrawer();
         }
     }
 
     const menuItems = config?.menuItems;
     const showLayouts =
-        config.mainFeatures['layout-config-change-nav-drawer-menu'] &&
-        config.bookCollections.length > 1;
-    const showContents = contents.screens?.length > 0;
-    const showSearch = config.mainFeatures['search'];
-    const showHistory = config.mainFeatures['history'];
-    const showSettings = userPreferenceSettings.length;
-    const showBookmarks = config.mainFeatures['annotation-bookmarks'];
-    const showNotes = config.mainFeatures['annotation-notes'];
-    const showHighlights = config.mainFeatures['annotation-highlights'];
-    const showPlans = config.plans?.plans.length > 0;
-    const showShare =
+        !!config.mainFeatures['layout-config-change-nav-drawer-menu'] &&
+        (scriptureConfig.bookCollections?.length ?? 0) > 1;
+    const showContents = !!contents.screens?.length;
+    const showSearch = !!config.mainFeatures['search'];
+    const showHistory = !!config.mainFeatures['history'];
+    const showSettings = !!userPreferenceSettings.length;
+    const showBookmarks = !!config.mainFeatures['annotation-bookmarks'];
+    const showNotes = !!config.mainFeatures['annotation-notes'];
+    const showHighlights = !!config.mainFeatures['annotation-highlights'];
+    const showPlans = scriptureConfig.plans?.plans.length;
+    const showShare = !!(
         config.mainFeatures['share-app-link'] ||
         config.mainFeatures['share-download-app-link'] ||
         config.mainFeatures['share-apk-file'] ||
-        config.mainFeatures['share-apple-app-link'];
-    const showAccount =
-        config.firebase.features['firebase-database'] && config.mainFeatures['user-accounts'];
+        config.mainFeatures['share-apple-app-link']
+    );
+    const showAccount = !!(
+        config.firebase?.features['firebase-database'] && config.mainFeatures['user-accounts']
+    );
 
-    function imageSrcSet(images) {
-        const baseSize = Number(images[0].width);
+    function imageSrcSet(images: MenuItemConfig['images']) {
+        const baseSize = Number(images?.[0]?.width);
         return images
-            .map((image) => {
+            ?.map((image) => {
                 const size = Number(image.width);
                 const multiplier = size / baseSize;
                 const multiplierString =
@@ -109,15 +112,15 @@ The sidebar/drawer.
         }
     }
 
-    const textColor = $derived($s['ui.drawer.item.text']['color']);
+    const textColor = $derived($s?.['ui.drawer.item.text']['color']);
     const iconColor = $derived(
-        $s['ui.drawer.item.icon']?.['color'] || $themeColors['DrawItemIconColor']
+        $s?.['ui.drawer.item.icon']?.['color'] || $themeColors['DrawItemIconColor']
     );
-    const contentBackgroundColor = $derived($s['ui.background']['background-color']);
-    const drawerBackgroundColor = $derived($s['ui.drawer']['background-color']);
+    const contentBackgroundColor = $derived($s?.['ui.background']['background-color']);
+    const drawerBackgroundColor = $derived($s?.['ui.drawer']['background-color']);
 </script>
 
-<svelte:window onkeydown={closeOnEscape} />
+<svelte:window onkeydown={(e) => closeOnEscape(e.key)} />
 
 <div class="dy-drawer" class:dy-drawer-mobile={$showDesktopSidebar} dir={$direction}>
     <input id={drawerId} type="checkbox" class="dy-drawer-toggle" bind:checked={menuToggle} />
@@ -252,18 +255,18 @@ The sidebar/drawer.
                     <li>
                         <!-- eslint-disable svelte/no-navigation-without-base, svelte/no-navigation-without-resolve -->
                         <a
-                            href={item.link['default']}
+                            href={item.link?.['default']}
                             style:color={textColor}
                             target="_blank"
                             rel="noreferrer"
                         >
                             <!-- eslint-enable svelte/no-navigation-without-base -->
                             <picture class:invert={$theme === 'Dark'}>
-                                {#if item.images.length > 1}
+                                {#if (item.images?.length ?? 0) > 1}
                                     <source srcset={imageSrcSet(item.images)} />
                                 {/if}
                                 <img
-                                    src={menuIcons[`./${item.images[0].file}`] ?? ''}
+                                    src={menuIcons[`./${item.images?.[0]?.file}`] ?? ''}
                                     height="24"
                                     width="24"
                                     alt={item.title[$language] || item.title[languageDefault]}
diff --git a/src/lib/components/Slider.svelte b/src/lib/components/Slider.svelte
index e23ca984b..ef7d1612a 100644
--- a/src/lib/components/Slider.svelte
+++ b/src/lib/components/Slider.svelte
@@ -3,12 +3,12 @@
 A simple slider component.
 -->
 
-<script>
+<script lang="ts">
     import { direction } from '$lib/data/stores';
 
     export let barColor;
     export let progressColor;
-    export let value;
+    export let value: number;
     export let min;
     export let max;
     $: linePercent = ((value - min) * 100) / (max - min) + '% 100%';
diff --git a/src/lib/components/StackView.svelte b/src/lib/components/StackView.svelte
index 013c0b9be..cdd247ef1 100644
--- a/src/lib/components/StackView.svelte
+++ b/src/lib/components/StackView.svelte
@@ -3,26 +3,27 @@
   Daisy UI Stack View component
 -->
 
-<script>
+<script lang="ts">
     import config, { scriptureConfig } from '$assets/config';
-    import { footnotes, getVerseText, refs, themeColors } from '$lib/data/stores';
+    import { footnotes, refs, themeColors } from '$lib/data/stores';
+    import type { Reference } from '$lib/data/stores/reference';
     import { handleHeaderLinkPressed } from '$lib/scripts/scripture-reference-utils';
-    import { isNotBlank, splitString } from '$lib/scripts/stringUtils';
+    import { splitString } from '$lib/scripts/stringUtils';
 
     export let bodyFontSize;
     export let bodyLineHeight;
     export let font;
-    let stack;
+    let stack: HTMLDivElement;
     let listening = false;
     $: PrimaryColor = $themeColors['PrimaryColor'];
 
-    function clickOutside(event) {
-        if (!stack.contains(event.target)) {
+    function clickOutside(event: Event) {
+        if (event.target && !stack.contains(event.target as HTMLElement)) {
             footnotes.pop();
         }
     }
 
-    function navigate(reference) {
+    function navigate(reference: Reference) {
         refs.set({
             docSet: reference.docSet,
             book: reference.book,
@@ -36,15 +37,15 @@
         return `<svg fill='${PrimaryColor}' xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z"/></svg>`;
     };
     // handles clicks on in text markdown reference links
-    function referenceLinkClickHandler(event) {
-        const linkRef = event.target.getAttribute('ref');
+    function referenceLinkClickHandler(target: HTMLElement) {
+        const linkRef = target.getAttribute('ref') ?? '';
         const splitRef = splitString(linkRef, '.');
         const splitSet = splitRef[0];
         const refBook = splitRef[1];
         const splitChapter = splitRef[2];
         const splitVerse = splitRef[3];
 
-        let refDocSet = refs.docSet;
+        let refDocSet = $refs.docSet;
         const refBc = scriptureConfig.bookCollections?.find((x) => x.id === splitSet);
         if (refBc) {
             refDocSet = refBc.languageCode + '_' + refBc.id;
@@ -56,31 +57,32 @@
         footnotes.reset();
         return;
     }
-    async function insideClick(event) {
-        if (event.target.hasAttribute('data-start-ref')) {
-            let start = JSON.parse(event.target.getAttribute('data-start-ref'));
+    async function insideClick(target: HTMLElement) {
+        if (target.hasAttribute('data-start-ref')) {
+            let start = JSON.parse(target.getAttribute('data-start-ref') || '{}');
             let end =
-                event.target.getAttribute('data-end-ref') === 'undefined'
+                target.getAttribute('data-end-ref') === 'undefined'
                     ? undefined
-                    : JSON.parse(event.target.getAttribute('data-end-ref'));
+                    : JSON.parse(target.getAttribute('data-end-ref') || '{}');
             if (config.mainFeatures['scripture-refs-display-from-popup'] === 'viewer') {
                 navigate(start);
             } else {
                 const footnoteHTML = await handleHeaderLinkPressed(start, end, themeColors);
                 footnotes.push(footnoteHTML);
             }
-        } else if (event.target.classList.contains('ref-link')) {
-            referenceLinkClickHandler(event);
+        } else if (target.classList.contains('ref-link')) {
+            referenceLinkClickHandler(target);
             // will not work since it does not have a reference to the start object...
-        } else if (document.getElementById('icon')?.contains(event.target)) {
+        } else if (document.getElementById('icon')?.contains(target)) {
             let start = JSON.parse(
-                document.getElementById('icon').firstChild.getAttribute('reference')
+                document.getElementById('icon')?.firstElementChild?.getAttribute('reference') ||
+                    '{}'
             );
             navigate(start);
         }
     }
 
-    function toggleListener(footnotes) {
+    function toggleListener(footnotes: string[]) {
         if (listening && footnotes.length === 0) {
             document.removeEventListener('click', clickOutside);
             listening = false;
@@ -107,7 +109,7 @@
         <div
             id="container"
             class="footnote rounded h-40 shadow-lg overflow-y-auto"
-            on:click|stopPropagation={insideClick}
+            on:click|stopPropagation={(e) => insideClick(e.currentTarget)}
         >
             <div
                 id="container"
diff --git a/src/lib/components/TabsMenu.svelte b/src/lib/components/TabsMenu.svelte
index 8fd5c6068..ce6538778 100644
--- a/src/lib/components/TabsMenu.svelte
+++ b/src/lib/components/TabsMenu.svelte
@@ -8,15 +8,21 @@ A component to display tabbed menus.
     import { preventDefault } from '$lib/scripts/event-wrappers';
 
     let {
-        options = { '': { component: '', props: {}, visible: true } },
+        options = { '': { visible: true } },
         active = $bindable(Object.keys(options).filter((x) => options[x].visible)[0]),
         scroll = true,
         height = '50vh',
         menuaction
-    }: { options: App.TabMenuOptions; active; scroll; height; menuaction } = $props();
+    }: {
+        options: App.TabMenuOptions;
+        active?: string;
+        scroll?: boolean;
+        height?: string;
+        menuaction?: App.TabMenuActionHandler;
+    } = $props();
 
-    const hasTabs = Object.keys(options).filter((x) => options[x].visible).length > 1;
-    function handleMenuaction({ text, url }) {
+    const hasTabs = $derived(Object.keys(options).filter((x) => options[x].visible).length > 1);
+    function handleMenuaction({ text, url }: { text: string; url: string }) {
         menuaction?.({
             text: text,
             url: url,
@@ -31,11 +37,11 @@ A component to display tabbed menus.
         }
         active = tab;
     };
-    const ActiveComponent = $derived(options[active].component);
+    const ActiveComponent = $derived(options[active]?.snippet);
 </script>
 
 {#if hasTabs}
-    <div class="dy-tabs dy-tabs-bordered mb-1" style={convertStyle($s['ui.selector.tabs'])}>
+    <div class="dy-tabs dy-tabs-bordered mb-1" style={convertStyle($s?.['ui.selector.tabs'])}>
         {#each Object.keys(options) as opt}
             {#if options[opt].visible}
                 <!-- svelte-ignore a11y_missing_attribute -->
@@ -50,9 +56,8 @@ A component to display tabbed menus.
                     style:background="none"
                     role="button"
                 >
-                    {#if options[opt].tab}
-                        {@const TabComponent = options[opt].tab?.component}
-                        <TabComponent {...options[opt].tab?.props} />
+                    {#if options[opt].tab?.icon}
+                        {@render options[opt].tab.icon(opt)}
                     {:else}
                         {opt}
                     {/if}
@@ -62,10 +67,10 @@ A component to display tabbed menus.
     </div>
 {/if}
 <div
-    style={convertStyle($s['ui.background'])}
+    style={convertStyle($s?.['ui.background'])}
     class:p-2={!hasTabs}
     style:overflow-y={scroll ? 'auto' : ''}
     style:max-height={height}
 >
-    <ActiveComponent menuaction={handleMenuaction} {...options[active].props} />
+    {@render ActiveComponent?.(active, handleMenuaction)}
 </div>
diff --git a/src/lib/components/TextAppearanceSelector.svelte b/src/lib/components/TextAppearanceSelector.svelte
index e4c7587b4..7376dd329 100644
--- a/src/lib/components/TextAppearanceSelector.svelte
+++ b/src/lib/components/TextAppearanceSelector.svelte
@@ -3,28 +3,21 @@
 The navbar component. We have sliders that update reactively to both font size and line height.
 3 buttons to change the style from normal, sepia and dark.
 -->
-<svelte:options accessors={true} />
 
-<script module>
-    export function showFonts(
-        /** @type {unknown[]} */ choices,
-        /** @type {boolean} */ contentsMode = false
-    ) {
+<script module lang="ts">
+    export function showFonts(choices: unknown[], contentsMode = false) {
         return !contentsMode && choices.length > 1;
     }
     export function showFontSize() {
         return config.mainFeatures['text-font-size-slider'];
     }
-    export function showLineHeight(/** @type {boolean} */ contentsMode = false) {
+    export function showLineHeight(contentsMode = false) {
         return !contentsMode && config.mainFeatures['text-line-height-slider'];
     }
     export function showThemes() {
         return themes.length > 1;
     }
-    export function showTextAppearance(
-        /** @type {unknown[]} */ choices,
-        /** @type {boolean} */ contentsMode = false
-    ) {
+    export function showTextAppearance(choices: unknown[] = [], contentsMode = false) {
         return (
             showFontSize() ||
             showLineHeight(contentsMode) ||
@@ -34,7 +27,7 @@ The navbar component. We have sliders that update reactively to both font size a
     }
 </script>
 
-<script>
+<script lang="ts">
     import config from '$assets/config';
     import {
         bodyFontSize,
@@ -56,43 +49,55 @@ The navbar component. We have sliders that update reactively to both font size a
     import Slider from './Slider.svelte';
 
     let modalId = 'textAppearanceSelector';
-    let modalThis;
+    let modalThis: HTMLDialogElement | undefined = $state();
     export function showModal() {
-        modalThis.showModal();
+        modalThis?.showModal();
     }
 
-    export let options = {};
-    $: contentsMode = options?.contentsMode ?? false;
-    export let vertOffset = '1rem'; //Prop that will have the navbar's height (in rem) passed in
+    export function setOptions(val: Props['options']) {
+        options = val;
+    }
+
+    interface Props {
+        options?: { contentsMode?: boolean } & Record<string, unknown>;
+        vertOffset?: string; //Prop that will have the navbar's height (in rem) passed in
+    }
+
+    let { options, vertOffset = '1rem' }: Props = $props();
+
+    const contentsMode = $derived(options?.contentsMode ?? false);
     //The positioningCSS positions the modal 1rem below the navbar and 1rem from the right edge of the screen (on mobile it will be centered)
-    $: positioningCSS =
+    const positioningCSS = $derived(
         'position:absolute; top:' +
-        (Number(vertOffset.replace('rem', '')) + 1) +
-        'rem; inset-inline-end:1rem;';
-    $: barColor = $themeColors['SliderBarColor'];
-    $: progressColor = $themeColors['SliderProgressColor'];
+            (Number(vertOffset.replace('rem', '')) + 1) +
+            'rem; inset-inline-end:1rem;'
+    );
+    const barColor = $derived($themeColors['SliderBarColor']);
+    const progressColor = $derived($themeColors['SliderProgressColor']);
     const _showFontSize = showFontSize();
-    $: _showFonts = showFonts($fontChoices, contentsMode);
+    const _showFonts = $derived(showFonts($fontChoices ?? [], contentsMode));
     const _showThemes = showThemes();
-    $: _showLineHeight = showLineHeight(contentsMode);
+    const _showLineHeight = $derived(showLineHeight(contentsMode));
 
-    $: _showTextAppearance = showTextAppearance($fontChoices, contentsMode);
+    const _showTextAppearance = $derived(showTextAppearance($fontChoices ?? [], contentsMode));
 
     // TEMP: Use TextAppearance button to rotate through languages to test i18n
-    const arrayRotate = (arr) => {
-        arr.push(arr.shift());
+    function arrayRotate<T>(arr: T[]) {
+        if (arr.length) {
+            arr.push(arr.shift()!);
+        }
         return arr;
-    };
+    }
 
-    const rotate = (items, current) => {
+    function rotate<T>(items: T[], current: T) {
         let mod = [...items];
-        while (mod[0] != current) {
+        while (mod[0] !== current) {
             mod = arrayRotate(mod);
         }
         return mod[1];
-    };
+    }
 
-    const handleClick = (event) => {
+    const handleClick = (event: KeyboardEvent) => {
         console.log(event);
         if (event.shiftKey) {
             rotateLanguages();
@@ -103,18 +108,19 @@ The navbar component. We have sliders that update reactively to both font size a
         $language = rotate(languages, $language);
     };
 
-    const buttonBackground = (theme) => {
-        const backgroundColor = config.styles.find((x) => x.name === 'ui.background').properties[
+    const buttonBackground = (theme: string) => {
+        const backgroundColor = config.styles?.find((x) => x.name === 'ui.background')?.properties[
             'background-color'
         ];
-        if (backgroundColor.startsWith('#')) {
+        if (backgroundColor?.startsWith('#')) {
             return backgroundColor;
         }
-        return config.themes.find((x) => x.name === theme).colorSets.find((c) => c.type === 'main')
-            .colors[backgroundColor];
+        return config.themes
+            ?.find((x) => x.name === theme)
+            ?.colorSets.find((c) => c.type === 'main')?.colors[backgroundColor ?? ''];
     };
 
-    const buttonBorder = (theme, currentTheme) => {
+    const buttonBorder = (theme: string, currentTheme: string) => {
         return (
             (theme === currentTheme ? '3px' : '1px') +
             ' solid ' +
@@ -122,7 +128,7 @@ The navbar component. We have sliders that update reactively to both font size a
         );
     };
 
-    const formatLineHeight = (lineHeight) => {
+    const formatLineHeight = (lineHeight: number) => {
         const displayValue = (lineHeight / 100).toLocaleString(undefined, {
             minimumFractionDigits: 2
         });
@@ -133,7 +139,7 @@ The navbar component. We have sliders that update reactively to both font size a
 <!-- TextAppearanceSelector -->
 {#if _showTextAppearance}
     <!-- svelte-ignore a11y_consider_explicit_label -->
-    <Modal bind:this={modalThis} id={modalId} addCSS={positioningCSS}>
+    <Modal bind:dialog={modalThis} id={modalId} addCSS={positioningCSS}>
         <div class="grid gap-4">
             <!-- Sliders for when text appearence text size is implemented place holder no functionality-->
             {#if _showFontSize}
@@ -185,9 +191,10 @@ The navbar component. We have sliders that update reactively to both font size a
                         style:font-family={$currentFont}
                         style:font-size="large"
                         style:color={$monoIconColor}
-                        on:click={() => modal.open(ModalType.Font)}
-                        >{config.fonts.find((x) => x.family === $currentFont)?.name}</button
+                        onclick={() => modal.open(ModalType.Font)}
                     >
+                        {config.fonts?.find((x) => x.family === $currentFont)?.name}
+                    </button>
                 </div>
             {/if}
             <!-- Theme Selction buttons-->
@@ -202,7 +209,7 @@ The navbar component. We have sliders that update reactively to both font size a
                             class="dy-btn-sm"
                             style:background-color={buttonBackground('Normal')}
                             style:border={buttonBorder('Normal', $theme)}
-                            on:click={() => ($theme = 'Normal')}
+                            onclick={() => ($theme = 'Normal')}
                         ></button>
                     {/if}
                     {#if themes.includes('Sepia')}
@@ -210,7 +217,7 @@ The navbar component. We have sliders that update reactively to both font size a
                             class="dy-btn-sm"
                             style:background-color={buttonBackground('Sepia')}
                             style:border={buttonBorder('Sepia', $theme)}
-                            on:click={() => ($theme = 'Sepia')}
+                            onclick={() => ($theme = 'Sepia')}
                         ></button>
                     {/if}
                     {#if themes.includes('Dark')}
@@ -218,7 +225,7 @@ The navbar component. We have sliders that update reactively to both font size a
                             class="dy-btn-sm"
                             style:background-color={buttonBackground('Dark')}
                             style:border={buttonBorder('Dark', $theme)}
-                            on:click={() => ($theme = 'Dark')}
+                            onclick={() => ($theme = 'Dark')}
                         ></button>
                     {/if}
                 </div>
diff --git a/src/lib/components/VerticalPanes.svelte b/src/lib/components/VerticalPanes.svelte
deleted file mode 100644
index 262712425..000000000
--- a/src/lib/components/VerticalPanes.svelte
+++ /dev/null
@@ -1,99 +0,0 @@
-<!--
-@component
-based on `VSplitPane` from [svelte-split-pane](https://github.com/Readiz/svelte-split-pane).  
-moderately modified because touch was not working.
--->
-<script>
-    /** @type {HTMLDivElement}*/ let separator;
-    /** @type {HTMLDivElement}*/ let top;
-    /** @type {HTMLDivElement}*/ let down;
-    /** @type {HTMLDivElement} */ let container;
-
-    let topHeight = 50;
-    let downHeight = 50;
-    let topEdge = 50;
-
-    /**
-     * inital values of moving separator
-     * @type {any | null}
-     */ let move = null;
-    const onPointerdown = (/** @type {PointerEvent} */ e) => {
-        if (e.cancelable) {
-            e.preventDefault();
-        }
-        move = {
-            e,
-            offsetTop: separator.offsetHeight,
-            firstHeight: top.offsetHeight,
-            secondHeight: down.offsetHeight
-        };
-    };
-    const onPointermove = (/** @type {PointerEvent} */ e) => {
-        if (e.cancelable) {
-            e.preventDefault();
-        }
-        if (move === null) {
-            return;
-        }
-        //calculate distance in px to move separator
-        var deltaY = Math.min(
-            Math.max(e.clientY - move.e.clientY, -move.firstHeight),
-            move.secondHeight
-        );
-        //adjust widths and edge
-        topEdge = (100 * (move.offsetTop + deltaY)) / container.offsetHeight;
-        topHeight = (100 * (move.firstHeight + deltaY)) / container.offsetHeight;
-        downHeight = 100 - topHeight;
-    };
-    const onPointerup = (/** @type {PointerEvent} */ e) => {
-        if (e && e.cancelable) {
-            e.preventDefault();
-        }
-        move = null;
-    };
-</script>
-
-<div
-    class="wrapper"
-    on:pointermove={onPointermove}
-    on:pointerup={onPointerup}
-    on:pointerleave={onPointerup}
-    on:pointercancel={onPointerup}
-    bind:this={container}
->
-    <div bind:this={top} class="pane" style="height: {topHeight}%">
-        <slot name="top" />
-    </div>
-    <div
-        bind:this={separator}
-        class="separator"
-        on:pointerdown={onPointerdown}
-        style="top: {topEdge}%"
-    ></div>
-    <div bind:this={down} class="pane" style="height: {downHeight}%">
-        <slot name="down" />
-    </div>
-</div>
-
-<style>
-    div.wrapper {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        overflow: auto;
-        flex-direction: column;
-    }
-    div.separator {
-        cursor: row-resize;
-        width: 100%;
-        height: 8px;
-        margin-top: -2px;
-        z-index: 1;
-        background-color: #aaa;
-        touch-action: none;
-    }
-    div.pane {
-        width: 100%;
-        overflow: auto;
-    }
-</style>
diff --git a/src/lib/data/stores/collection.ts b/src/lib/data/stores/collection.ts
index 14bd64ce5..17cb7c85d 100644
--- a/src/lib/data/stores/collection.ts
+++ b/src/lib/data/stores/collection.ts
@@ -1,6 +1,6 @@
 import { scriptureConfig } from '$assets/config';
 import { get, writable } from 'svelte/store';
-import { LAYOUT_SINGLE, LAYOUT_TWO, LAYOUT_VERSE_BY_VERSE } from './view.js';
+import { Layout } from './view';
 
 function findCollection(id: string): App.CollectionEntry | undefined {
     const ds = scriptureConfig.bookCollections?.find((x) => x.id === id);
@@ -8,9 +8,8 @@ function findCollection(id: string): App.CollectionEntry | undefined {
         ds && {
             id: ds.languageCode + '_' + ds.id,
             name: ds.collectionName,
-            singlePane:
-                ds.features['bc-allow-single-pane'] ??
-                (ds.features['bc-layout-allow-single-pane'] as boolean),
+            singlePane: (ds.features['bc-allow-single-pane'] ??
+                ds.features['bc-layout-allow-single-pane']) as boolean,
             description: ds.collectionDescription,
             image: ds.collectionImage
         }
@@ -63,20 +62,15 @@ function createSelectedLayouts() {
     return {
         subscribe: external.subscribe,
         set: external.set,
-        collections: (mode) => {
-            let value;
+        collections: (mode: Layout) => {
             switch (mode) {
-                case LAYOUT_SINGLE:
-                    value = [get(external).singlePane];
-                    break;
-                case LAYOUT_TWO:
-                    value = get(external).sideBySide;
-                    break;
-                case LAYOUT_VERSE_BY_VERSE:
-                    value = get(external).verseByVerse;
-                    break;
+                case Layout.Single:
+                    return [get(external).singlePane];
+                case Layout.Two:
+                    return get(external).sideBySide;
+                case Layout.VerseByVerse:
+                    return get(external).verseByVerse;
             }
-            return value;
         },
         reset: () => {
             external.set(initCollections);
diff --git a/src/lib/data/stores/interface.ts b/src/lib/data/stores/interface.ts
index 3febf526d..45199c951 100644
--- a/src/lib/data/stores/interface.ts
+++ b/src/lib/data/stores/interface.ts
@@ -4,17 +4,20 @@ import { refs } from './scripture';
 import { userSettings } from './setting';
 
 export const direction = derived([refs, userSettings], ([$refs, $userSettings]) => {
-    let direction = config.mainFeatures['settings-app-layout-direction']
-        ? $userSettings['app-layout-direction']
-        : config.mainFeatures['app-layout-direction'];
+    let direction = (
+        config.mainFeatures['settings-app-layout-direction']
+            ? $userSettings['app-layout-direction']
+            : config.mainFeatures['app-layout-direction']
+    ) as string;
     if (direction === 'interface-language') {
-        const code = $userSettings['interface-language'];
+        const code = $userSettings['interface-language'] as string;
         if (code) {
-            direction = config.interfaceLanguages?.writingSystems[code].textDirection;
+            direction = config.interfaceLanguages?.writingSystems[code].textDirection ?? direction;
         }
     } else if (direction === 'text') {
-        direction = scriptureConfig.bookCollections?.find((x) => x.id === $refs.collection)?.style
-            ?.textDirection;
+        direction =
+            scriptureConfig.bookCollections?.find((x) => x.id === $refs.collection)?.style
+                ?.textDirection ?? direction;
     }
-    return direction.toLowerCase();
+    return direction.toLowerCase() as 'ltr' | 'rtl';
 });
diff --git a/src/lib/data/stores/localization.ts b/src/lib/data/stores/localization.ts
index 737a63ec7..d91b94bb7 100644
--- a/src/lib/data/stores/localization.ts
+++ b/src/lib/data/stores/localization.ts
@@ -6,12 +6,12 @@ import { userSettings } from './setting';
 /** localization */
 
 // If a word can't be translated in the current language, use languageDefault.
-export const languageDefault = config.translationMappings?.defaultLang;
+export const languageDefault = config.translationMappings?.defaultLang ?? '';
 
 export const languages = getLanguages();
 export const language = derived(
     userSettings,
-    ($userSettings) => $userSettings['interface-language'] ?? languageDefault
+    ($userSettings) => ($userSettings['interface-language'] as string) || languageDefault
 );
 
 export const t = derived(
diff --git a/src/lib/data/stores/reference.ts b/src/lib/data/stores/reference.ts
index 3dcfc0c53..c821c3143 100644
--- a/src/lib/data/stores/reference.ts
+++ b/src/lib/data/stores/reference.ts
@@ -3,12 +3,15 @@ import { NavigationContext } from '$lib/data/navigation';
 import { derived, writable } from 'svelte/store';
 import type { CatalogData } from '../catalogData';
 
-interface ReferenceStore {
+export interface Reference {
     docSet: string;
-    collection: string;
     book: string;
     chapter: string;
-    verse: string;
+    verse?: string;
+}
+
+interface ReferenceStore extends Reference {
+    collection: string;
     chapterVerses: string;
     numVerses: number;
     hasAudio: any;
@@ -49,7 +52,7 @@ export const referenceStore = () => {
         localStorage.package = config.package;
     };
 
-    const set = async ({ docSet, book, chapter, verse }) => {
+    const set = async ({ docSet, book, chapter, verse }: Reference) => {
         await nav.goto(docSet, book, chapter, verse);
         update();
     };
diff --git a/src/lib/data/stores/setting.ts b/src/lib/data/stores/setting.ts
index 2e80a01be..f8a2422a6 100644
--- a/src/lib/data/stores/setting.ts
+++ b/src/lib/data/stores/setting.ts
@@ -4,11 +4,14 @@ import { getDefaultLanguage } from '$lib/data/language';
 import { mergeDefaultStorage, setDefaultStorage } from '$lib/data/stores/storage';
 import { derived, readable, writable } from 'svelte/store';
 
-export const SETTINGS_CATEGORY_INTERFACE = 'Settings_Category_Interface';
-export const SETTINGS_CATEGORY_NAVIGATION = 'Settings_Category_Navigation';
-export const SETTINGS_CATEGORY_NOTIFICATIONS = 'Settings_Category_Notifications';
-export const SETTINGS_CATEGORY_AUDIO = 'Settings_Category_Audio';
-export const SETTINGS_CATEGORY_TEXT_DISPLAY = 'Settings_Category_Text_Display';
+export const SettingsCategory = {
+    Interface: 'Settings_Category_Interface',
+    Navigation: 'Settings_Category_Navigation',
+    Notifications: 'Settings_Category_Notifications',
+    Audio: 'Settings_Category_Audio',
+    TextDisplay: 'Settings_Category_Text_Display'
+} as const;
+export type SettingsCategory = (typeof SettingsCategory)[keyof typeof SettingsCategory];
 
 setDefaultStorage('development', 'false');
 export const development = readable(localStorage.development === 'true');
@@ -63,7 +66,7 @@ export const devPreferenceSettings = ((): Array<App.UserPreferenceSetting> => {
     if (isSAB(config)) {
         settings.push({
             type: 'checkbox',
-            category: SETTINGS_CATEGORY_INTERFACE,
+            category: SettingsCategory.Interface,
             title: 'Scripture Logs',
             key: 'scripture-logs'
         });
@@ -81,7 +84,7 @@ export const userPreferenceSettings = ((): Array<App.UserPreferenceSetting> => {
             // Verse Numbers
             settings.push({
                 type: 'checkbox',
-                category: SETTINGS_CATEGORY_TEXT_DISPLAY,
+                category: SettingsCategory.TextDisplay,
                 title: 'Settings_Verse_Numbers',
                 key: 'verse-numbers'
             });
@@ -91,7 +94,7 @@ export const userPreferenceSettings = ((): Array<App.UserPreferenceSetting> => {
             // Verse Layout
             settings.push({
                 type: 'list',
-                category: SETTINGS_CATEGORY_TEXT_DISPLAY,
+                category: SettingsCategory.TextDisplay,
                 title: 'Settings_Verse_Layout',
                 key: 'verse-layout',
                 entries: ['Settings_Verse_Layout_Paragraphs', 'Settings_Verse_Layout_One_Per_Line'],
@@ -103,7 +106,7 @@ export const userPreferenceSettings = ((): Array<App.UserPreferenceSetting> => {
             // Show Border
             settings.push({
                 type: 'checkbox',
-                category: SETTINGS_CATEGORY_TEXT_DISPLAY,
+                category: SettingsCategory.TextDisplay,
                 title: 'Settings_Show_Border',
                 summary: 'Settings_Show_Border_Summary',
                 key: 'show-border'
@@ -114,7 +117,7 @@ export const userPreferenceSettings = ((): Array<App.UserPreferenceSetting> => {
             // Red letters
             settings.push({
                 type: 'checkbox',
-                category: SETTINGS_CATEGORY_TEXT_DISPLAY,
+                category: SettingsCategory.TextDisplay,
                 title: 'Settings_Red_Letters',
                 summary: 'Settings_Red_Letters_Summary',
                 key: 'red-letters'
@@ -124,7 +127,7 @@ export const userPreferenceSettings = ((): Array<App.UserPreferenceSetting> => {
         if (config.mainFeatures['settings-glossary-links'] && config.traits['has-glossary']) {
             settings.push({
                 type: 'checkbox',
-                category: SETTINGS_CATEGORY_TEXT_DISPLAY,
+                category: SettingsCategory.TextDisplay,
                 title: 'Settings_Glossary_Words',
                 key: 'glossary-words'
             });
@@ -138,7 +141,7 @@ export const userPreferenceSettings = ((): Array<App.UserPreferenceSetting> => {
             // Images in Bible Text
             settings.push({
                 type: 'list',
-                category: SETTINGS_CATEGORY_TEXT_DISPLAY,
+                category: SettingsCategory.TextDisplay,
                 title: 'Settings_Display_Images_In_Bible_Text',
                 key: 'display-images-in-bible-text',
                 entries: ['Settings_Display_Images_Normal', 'Settings_Display_Images_Hidden'],
@@ -153,7 +156,7 @@ export const userPreferenceSettings = ((): Array<App.UserPreferenceSetting> => {
             // Videos in Bible Text
             settings.push({
                 type: 'list',
-                category: SETTINGS_CATEGORY_TEXT_DISPLAY,
+                category: SettingsCategory.TextDisplay,
                 title: 'Settings_Display_Videos_In_Bible_Text',
                 key: 'display-videos-in-bible-text',
                 entries: ['Settings_Display_Videos_Normal', 'Settings_Display_Videos_Hidden'],
@@ -169,7 +172,7 @@ export const userPreferenceSettings = ((): Array<App.UserPreferenceSetting> => {
             // Synchronised phrase highlighting
             settings.push({
                 type: 'checkbox',
-                category: SETTINGS_CATEGORY_AUDIO,
+                category: SettingsCategory.Audio,
                 title: 'Settings_Audio_Highlight_Phrase',
                 summary: 'Settings_Audio_Highlight_Phrase_Summary',
                 key: 'audio-highlight-phrase'
@@ -180,7 +183,7 @@ export const userPreferenceSettings = ((): Array<App.UserPreferenceSetting> => {
             // Playback speed
             settings.push({
                 type: 'list',
-                category: SETTINGS_CATEGORY_AUDIO,
+                category: SettingsCategory.Audio,
                 title: 'Settings_Audio_Speed',
                 key: 'audio-speed',
                 entries: [
@@ -205,7 +208,7 @@ export const userPreferenceSettings = ((): Array<App.UserPreferenceSetting> => {
     if (config.mainFeatures['settings-audio-access-method'] && hasAudioSourceWithAccessModeChoice) {
         settings.push({
             type: 'list',
-            category: SETTINGS_CATEGORY_AUDIO,
+            category: SettingsCategory.Audio,
             title: 'Settings_Audio_Access_Method',
             key: 'audio-access-method',
             entries: [
@@ -223,7 +226,7 @@ export const userPreferenceSettings = ((): Array<App.UserPreferenceSetting> => {
     if (config.mainFeatures['settings-audio-download-mode'] && hasAudioSourceWitbDownload) {
         settings.push({
             type: 'list',
-            category: SETTINGS_CATEGORY_AUDIO,
+            category: SettingsCategory.Audio,
             title: 'Settings_Audio_Download_Mode',
             key: 'audio-auto-download',
             entries: [
@@ -240,7 +243,7 @@ export const userPreferenceSettings = ((): Array<App.UserPreferenceSetting> => {
         if (config.mainFeatures['settings-verse-of-the-day'] && hasVerses) {
             settings.push({
                 type: 'checkbox',
-                category: SETTINGS_CATEGORY_NOTIFICATIONS,
+                category: SettingsCategory.Notifications,
                 title: 'Settings_Verse_Of_The_Day',
                 key: 'verse-of-the-day'
             });
@@ -250,7 +253,7 @@ export const userPreferenceSettings = ((): Array<App.UserPreferenceSetting> => {
             // "Time for verse of the day
             settings.push({
                 type: 'time',
-                category: SETTINGS_CATEGORY_NOTIFICATIONS,
+                category: SettingsCategory.Notifications,
                 title: 'Settings_Verse_Of_The_Day_Time',
                 key: 'verse-of-the-day-time'
             });
@@ -273,7 +276,7 @@ export const userPreferenceSettings = ((): Array<App.UserPreferenceSetting> => {
 
                 settings.push({
                     type: 'list',
-                    category: SETTINGS_CATEGORY_NOTIFICATIONS,
+                    category: SettingsCategory.Notifications,
                     title: 'Settings_Verse_Of_The_Day_Book_Collection',
                     key: 'verse-of-the-day-book-collection',
                     defaultValue,
@@ -287,7 +290,7 @@ export const userPreferenceSettings = ((): Array<App.UserPreferenceSetting> => {
             // "Daily reminder"
             settings.push({
                 type: 'checkbox',
-                category: SETTINGS_CATEGORY_NOTIFICATIONS,
+                category: SettingsCategory.Notifications,
                 title: 'Settings_Daily_Reminder',
                 key: 'daily-reminder'
             });
@@ -297,7 +300,7 @@ export const userPreferenceSettings = ((): Array<App.UserPreferenceSetting> => {
             // "Time for daily reminder"
             settings.push({
                 type: 'time',
-                category: SETTINGS_CATEGORY_NOTIFICATIONS,
+                category: SettingsCategory.Notifications,
                 title: 'Settings_Daily_Reminder_Time',
                 key: 'daily-reminder-time'
             });
@@ -308,7 +311,7 @@ export const userPreferenceSettings = ((): Array<App.UserPreferenceSetting> => {
             // Book Selection
             settings.push({
                 type: 'list',
-                category: SETTINGS_CATEGORY_NAVIGATION,
+                category: SettingsCategory.Navigation,
                 title: 'Settings_Book_Selection',
                 key: 'book-selection',
                 entries: ['Settings_Book_Selection_List', 'Settings_Book_Selection_Grid'],
@@ -320,7 +323,7 @@ export const userPreferenceSettings = ((): Array<App.UserPreferenceSetting> => {
             // Verse Selector
             settings.push({
                 type: 'checkbox',
-                category: SETTINGS_CATEGORY_NAVIGATION,
+                category: SettingsCategory.Navigation,
                 title: 'Settings_Verse_Selection',
                 key: 'verse-selection'
             });
@@ -333,7 +336,7 @@ export const userPreferenceSettings = ((): Array<App.UserPreferenceSetting> => {
         // Keep Screen on
         settings.push({
             type: 'checkbox',
-            category: SETTINGS_CATEGORY_INTERFACE,
+            category: SettingsCategory.Interface,
             title: 'Settings_Keep_Screen_On',
             key: 'keep-screen-on'
         });
@@ -344,7 +347,7 @@ export const userPreferenceSettings = ((): Array<App.UserPreferenceSetting> => {
         // Share app usage data
         settings.push({
             type: 'checkbox',
-            category: SETTINGS_CATEGORY_INTERFACE,
+            category: SettingsCategory.Interface,
             title: 'Settings_Share_Usage_Data',
             key: 'share-usage-data'
         });
@@ -362,7 +365,7 @@ export const userPreferenceSettings = ((): Array<App.UserPreferenceSetting> => {
 
         settings.push({
             type: 'list',
-            category: SETTINGS_CATEGORY_INTERFACE,
+            category: SettingsCategory.Interface,
             title: 'Settings_Interface_Language',
             key: 'interface-language',
             defaultValue: getDefaultLanguage(),
@@ -375,7 +378,7 @@ export const userPreferenceSettings = ((): Array<App.UserPreferenceSetting> => {
         // App Layout Direction
         settings.push({
             type: 'list',
-            category: SETTINGS_CATEGORY_INTERFACE,
+            category: SettingsCategory.Interface,
             title: 'Settings_Layout_Direction',
             key: 'app-layout-direction',
             entries: [
@@ -401,7 +404,7 @@ function defaultUserSettings() {
     );
 }
 mergeDefaultStorage('userSettings', defaultUserSettings());
-export const userSettings = writable(JSON.parse(localStorage.userSettings));
+export const userSettings = writable(JSON.parse(localStorage.userSettings) as FeatureConfig);
 userSettings.subscribe((value) => (localStorage.userSettings = JSON.stringify(value)));
 
 export const userSettingsOrDefault = derived(userSettings, ($userSettings) => {
diff --git a/src/lib/data/stores/theme.ts b/src/lib/data/stores/theme.ts
index a26c101ee..83164292e 100644
--- a/src/lib/data/stores/theme.ts
+++ b/src/lib/data/stores/theme.ts
@@ -37,10 +37,12 @@ const resolveColor = (colorValue: string, colors: Record<string, string>) => {
 };
 
 // Convert style to string format for inline styling
-export const convertStyle = (style: Record<string, string>) => {
+export const convertStyle = (style?: Record<string, string>) => {
     let result = '';
-    for (const x in style) {
-        result += `${x}:${style[x]};`;
+    if (style) {
+        for (const x in style) {
+            result += `${x}:${style[x]};`;
+        }
     }
     return result;
 };
diff --git a/src/lib/data/stores/view.ts b/src/lib/data/stores/view.ts
index d6a34c898..749fcf817 100644
--- a/src/lib/data/stores/view.ts
+++ b/src/lib/data/stores/view.ts
@@ -15,12 +15,15 @@ export const isFirstLaunch = derived(
 );
 
 /**the current view/layout mode*/
-export const LAYOUT_SINGLE = 'single';
-export const LAYOUT_TWO = 'two';
-export const LAYOUT_VERSE_BY_VERSE = 'verse-by-verse';
+export const Layout = {
+    Single: 'single',
+    Two: 'two',
+    VerseByVerse: 'verse-by-verse'
+} as const;
+export type Layout = (typeof Layout)[keyof typeof Layout];
 
-const singleLayout = { mode: LAYOUT_SINGLE, auxDocSets: [] };
-export const layout = writable(singleLayout);
+const singleLayout = { mode: Layout.Single, auxDocSets: [] };
+export const layout = writable<{ mode: Layout; auxDocSets?: string[] }>(singleLayout);
 
 export const ModalType = {
     Collection: 'collection',
@@ -89,16 +92,16 @@ export const windowSize = createWindowSizeStore();
 export const mainScroll = writable({ top: 0, height: 0 });
 /**Font size of body elements */
 setDefaultStorage('bodyFontSize', '17');
-export const bodyFontSize = writable(localStorage.bodyFontSize);
+export const bodyFontSize = writable(Number(localStorage.bodyFontSize));
 bodyFontSize.subscribe((fontSize) => (localStorage.bodyFontSize = fontSize));
 /**line height of body elements */
 setDefaultStorage('bodyLineHeight', '175');
-export const bodyLineHeight = writable(localStorage.bodyLineHeight);
+export const bodyLineHeight = writable(Number(localStorage.bodyLineHeight));
 bodyLineHeight.subscribe((lineHeight) => (localStorage.bodyLineHeight = lineHeight));
 
 /**Font size of contents elements */
 setDefaultStorage('contentsFontSize', '17');
-export const contentsFontSize = writable(localStorage.contentsFontSize);
+export const contentsFontSize = writable(Number(localStorage.contentsFontSize));
 contentsFontSize.subscribe((fontSize) => (localStorage.contentsFontSize = fontSize));
 
 export const showDesktopSidebar = derived(
@@ -136,4 +139,4 @@ function createStackStore<T>() {
     };
 }
 
-export const contentsStack = createStackStore<string>();
+export const contentsStack = createStackStore<number>();
diff --git a/src/lib/navigate/index.ts b/src/lib/navigate/index.ts
index 85f8b0dfd..afba3f217 100644
--- a/src/lib/navigate/index.ts
+++ b/src/lib/navigate/index.ts
@@ -28,22 +28,22 @@ export function navigateToUrl(item: { collection: string; book: string; url: str
 export async function navigateToText(item: {
     docSet?: string;
     collection?: string;
-    book: string;
-    chapter: string;
+    book?: string;
+    chapter?: string;
     verse?: string;
 }) {
-    playStop();
-    await refs.set({
-        docSet: item.docSet,
-        book: item.book,
-        chapter: item.chapter,
-        verse: item.verse
-    });
-    addHistory(
-        { collection: item.collection, book: item.book, chapter: item.chapter, verse: item.verse },
-        logHistoryItemAdded
-    );
-    gotoRoute(`/text`);
+    const { docSet, collection, book, chapter, verse } = item;
+    if (docSet && collection && book && chapter) {
+        playStop();
+        await refs.set({
+            docSet,
+            book,
+            chapter,
+            verse
+        });
+        addHistory({ collection, book, chapter, verse }, logHistoryItemAdded);
+        gotoRoute(`/text`);
+    }
 }
 
 export async function navigateToTextReference(reference: string) {
diff --git a/src/lib/scripts/configUtils.ts b/src/lib/scripts/configUtils.ts
index bda239ccd..8ccb989e2 100644
--- a/src/lib/scripts/configUtils.ts
+++ b/src/lib/scripts/configUtils.ts
@@ -44,7 +44,7 @@ export function getFeatureValueString(feature: string, bc: string, book: string)
     if (bookCollectionFeatures != null) {
         const bookCollectionFeature = bookCollectionFeatures[feature];
         if (bookCollectionFeature != null && bookCollectionFeature != 'inherit') {
-            value = bookCollectionFeatures[feature];
+            value = bookCollectionFeatures[feature] as string;
         }
     }
     const bookFeatures = scriptureConfig.bookCollections
diff --git a/src/lib/scripts/numeralSystem.ts b/src/lib/scripts/numeralSystem.ts
index 35e026622..3e9a6bf50 100644
--- a/src/lib/scripts/numeralSystem.ts
+++ b/src/lib/scripts/numeralSystem.ts
@@ -71,7 +71,7 @@ export function formatNumberRange(system: NumeralSystem, value: string, directio
         : `${formattedFirst}${separator}${formattedSecond}`;
 }
 
-export function formatNumber(system: NumeralSystem, value: string): any {
+export function formatNumber(system: NumeralSystem, value: string): string {
     let fmt = '';
     for (let i = 0; i < value.length; i++) {
         const digit = Number(value.charAt(i));
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 3bb890f1e..7a28f27e9 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -66,26 +66,28 @@
             $modal.forEach(({ modalType, data }) => {
                 switch (modalType) {
                     case ModalType.Collection:
-                        collectionSelector.showModal();
+                        collectionSelector?.showModal();
                         break;
                     case ModalType.Note:
-                        noteDialog?.showModal(
-                            data as Parameters<(typeof noteDialog)['showModal']>[0]
-                        );
+                        noteDialog?.showModal(data as Parameters<NoteDialog['showModal']>[0]);
                         break;
                     case ModalType.TextAppearance:
-                        textAppearanceSelector.options = data;
-                        textAppearanceSelector.showModal();
+                        if (textAppearanceSelector) {
+                            textAppearanceSelector.setOptions(
+                                data as Parameters<TextAppearanceSelector['setOptions']>[0]
+                            );
+                            textAppearanceSelector.showModal();
+                        }
                         break;
                     case ModalType.Font:
-                        fontSelector.showModal();
+                        fontSelector?.showModal();
                         break;
                     case ModalType.StopPlan:
                         planStopId = data as string;
                         planStopDialog?.showModal();
                         break;
                     case ModalType.PlaybackSpeed:
-                        audioPlaybackSpeed.showModal();
+                        audioPlaybackSpeed?.showModal();
                         break;
                 }
             });
@@ -103,13 +105,13 @@
         }
     });
 
-    let textAppearanceSelector: TextAppearanceSelector = $state();
-    let collectionSelector: CollectionSelector = $state();
-    let fontSelector: FontSelector = $state();
+    let textAppearanceSelector: TextAppearanceSelector | undefined = $state();
+    let collectionSelector: CollectionSelector | undefined = $state();
+    let fontSelector: FontSelector | undefined = $state();
     let noteDialog: NoteDialog | undefined = $state();
     let planStopDialog: PlanStopDialog | undefined = $state(undefined);
     let planStopId: string = $state('');
-    let audioPlaybackSpeed: AudioPlaybackSpeed = $state();
+    let audioPlaybackSpeed: AudioPlaybackSpeed | undefined = $state();
 </script>
 
 <svelte:head>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 56f4eea70..d77f05d03 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
     import { page } from '$app/stores';
     import config from '$assets/config';
     import contents from '$assets/contents';
diff --git a/src/routes/contents/[id]/+page.svelte b/src/routes/contents/[id]/+page.svelte
index e1fd8eaa7..8f4f8a6b6 100644
--- a/src/routes/contents/[id]/+page.svelte
+++ b/src/routes/contents/[id]/+page.svelte
@@ -1,7 +1,7 @@
-<script>
+<script lang="ts">
     import { base } from '$app/paths';
-    import { page } from '$app/stores';
-    import config from '$assets/config';
+    import config, { scriptureConfig } from '$assets/config';
+    import type { ContentItem } from '$config';
     import BottomNavigationBar from '$lib/components/BottomNavigationBar.svelte';
     import ContentCarousel from '$lib/components/ContentCarousel.svelte';
     import ContentGrid from '$lib/components/ContentGrid.svelte';
@@ -18,49 +18,57 @@
         ModalType,
         refs,
         s,
-        t,
         themeColors
     } from '$lib/data/stores';
     import { AudioIcon, TextAppearanceIcon } from '$lib/icons';
     import { gotoRoute, navigateToText } from '$lib/navigate';
     import { getDisplayString } from '$lib/scripts/scripture-reference-utils';
-    import { compareVersions, pathJoin } from '$lib/scripts/stringUtils';
+    import { compareVersions } from '$lib/scripts/stringUtils';
     import { SvelteMap } from 'svelte/reactivity';
+    import type { PageData } from './$types';
 
     const imageFolder =
         compareVersions(config.programVersion, '12.0') < 0 ? 'illustrations' : 'contents';
     const audioFolder = compareVersions(config.programVersion, '12.0') < 0 ? 'assets' : 'contents';
 
-    function playAudio(event, item) {
+    interface Props {
+        data: PageData;
+    }
+
+    let { data }: Props = $props();
+
+    function playAudio(event: Event, item: ContentItem) {
         event.stopPropagation();
         //assign/use the proper filename
-        const filename = item.audioFilename[$language] ?? item.audioFilename.default;
+        const filename = item.audioFilename?.[$language] ?? item.audioFilename?.default;
 
-        let audio = new Audio();
-        audio.src = `${base}/${audioFolder}/${filename}`;
-        audio.play();
+        if (filename) {
+            let audio = new Audio();
+            audio.src = `${base}/${audioFolder}/${filename}`;
+            audio.play();
+        }
     }
 
-    function onClick(event, item) {
-        event.target.style.background = highlightColor;
+    function onClick(target: HTMLElement, item: ContentItem) {
+        target.style.background = highlightColor;
         setTimeout(() => {
             //navigate
             clicked(item);
         }, 100);
     }
 
-    function checkImageSize(item) {
-        if (item.features['image-width']) {
+    function checkImageSize(item: ContentItem) {
+        if (item.features?.['image-width']) {
             return 'width: ' + item.features['image-width'];
         }
 
-        if (item.features['layout'] === 'image-top-text-bottom') {
+        if (item.features?.['layout'] === 'image-top-text-bottom') {
             return 'width: 100%';
         }
 
         return ''; // Empty result
     }
-    async function clicked(item) {
+    async function clicked(item: ContentItem) {
         if (item.linkType === undefined || item.linkType === 'undefined') {
             if (item.itemType !== 'heading') {
                 console.warn('linkType is undefined');
@@ -71,15 +79,17 @@
         switch (item.linkType) {
             //reference linkType
             case 'reference': {
-                contentsStack.pushItem($page.data.menu.id);
+                contentsStack.pushItem(data.menu!.id);
                 const contentsRef = await getReference(item);
                 console.log('contentsRef', contentsRef);
-                await navigateToText(contentsRef);
+                if (contentsRef.book) {
+                    await navigateToText(contentsRef);
+                }
                 break;
             }
             case 'screen':
                 //goes to another contents page
-                contentsStack.pushItem($page.data.menu.id);
+                contentsStack.pushItem(data.menu!.id);
                 await gotoRoute(`/contents/${item.linkTarget}`);
                 break;
             case 'other':
@@ -108,14 +118,14 @@
         }
     }
 
-    async function getReference(item) {
+    async function getReference(item: ContentItem) {
         let docSet = $refs.docSet;
         let collection = docSet.split('_')[1];
         let book;
         let chapter;
         let verse;
-        const reference = item.linkTarget.split('.');
-        if (item.layoutMode && item.layoutCollection?.length > 0) {
+        const reference = item.linkTarget?.split('.');
+        if (item.layoutMode && item.layoutCollection?.length) {
             /* 
             Note: have not handled layout modes
             layoutMode options:
@@ -125,11 +135,11 @@
             */
             collection = item.layoutCollection[0];
             docSet =
-                config.bookCollections.find((x) => x.id === collection).languageCode +
+                scriptureConfig.bookCollections?.find((x) => x.id === collection)?.languageCode +
                 '_' +
                 collection;
         }
-        switch (reference.length) {
+        switch (reference?.length) {
             case 1:
                 book = reference[0];
                 chapter = await firstChapter(book, docSet);
@@ -154,14 +164,14 @@
             verse
         };
     }
-    let referenceTexts = new SvelteMap();
-    async function loadReferenceText(item) {
-        if (!referenceTexts.has(item)) {
-            referenceTexts.set(item, await getReferenceText(item));
+    const referenceTexts = new SvelteMap<number, string>();
+    async function loadReferenceText(item: ContentItem) {
+        if (!referenceTexts.has(item.id)) {
+            referenceTexts.set(item.id, await getReferenceText(item));
         }
-        return referenceTexts.get(item);
+        return referenceTexts.get(item.id);
     }
-    async function getReferenceText(item) {
+    async function getReferenceText(item: ContentItem) {
         const reference = await getReference(item);
         let currentBookCollectionId = $refs.collection;
         let collection = reference.collection ?? currentBookCollectionId;
@@ -173,24 +183,27 @@
         // reference or -1 if there is no verse number. The -1 indicates that it is a single
         // verse, not a range, and the '-' is a verse range separator which is not used in this
         // case.
-        const referenceText = getDisplayString(collection, reference.book, reference.chapter, [
-            [verse, -1, '-']
-        ]);
+        const referenceText = getDisplayString(
+            collection,
+            reference.book ?? '',
+            Number(reference.chapter ?? ''),
+            [[verse, -1, '-']]
+        );
         return referenceText;
     }
     //set the title for the current contents page
-    function setTitle(page) {
+    function setTitle(data: PageData) {
         //checks title type and returns the appropriate title or lack of title
         let title = '';
-        switch (page.data.features['title-type']) {
+        switch (data.features?.['title-type']) {
             case 'app-name':
-                title = config.name;
+                title = config.name ?? '';
                 break;
             case 'screen':
-                title = page.data.menu.title[$language] ?? page.data.menu.title.default ?? '';
+                title = data.menu?.title?.[$language] ?? data.menu?.title?.default ?? '';
                 break;
             case 'custom':
-                title = page.data.title[$language] ?? page.data.title.default ?? '';
+                title = data.title?.[$language] ?? data.title?.default ?? '';
                 break;
             case 'none':
             default:
@@ -205,7 +218,7 @@
             gotoRoute(`/contents/${menuId}`);
         }
     }
-    async function firstChapter(book, docset) {
+    async function firstChapter(book: string, docset: string) {
         let first = '1';
         if (docset === currentDocSet) {
             const currBook = books.find((x) => x.bookCode === book);
@@ -227,7 +240,7 @@
     const bottomNavBarEnabled = config?.bottomNavBarItems && config?.bottomNavBarItems.length > 0;
     const barType = 'contents';
     let highlightColor = $derived($themeColors['ContentsItemTouchColor']);
-    let title = $derived(setTitle($page));
+    let title = $derived(setTitle(data));
     let books = $derived($refs.catalog.documents);
     let currentDocSet = $derived($refs.docSet);
     let showBackButton = $derived($contentsStack.length > 0);
@@ -236,9 +249,8 @@
 <div class="grid grid-rows-[auto,1fr]" style="height:100vh;height:100dvh;">
     <div class="navbar">
         <Navbar {backNavigation} {showBackButton}>
-            <!-- <div slot="left-buttons" /> -->
             {#snippet center()}
-                <label for="sidebar" slot="center">
+                <label for="sidebar">
                     <div class="btn btn-ghost normal-case text-xl">{title}</div>
                 </label>
             {/snippet}
@@ -246,7 +258,7 @@
             {#snippet end()}
                 <div class="flex items-center">
                     <div class="flex">
-                        {#if $page.data.features['show-text-size-button'] === true}
+                        {#if data.features?.['show-text-size-button']}
                             <!-- svelte-ignore a11y_click_events_have_key_events -->
                             <!-- svelte-ignore a11y_label_has_associated_control -->
                             <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
@@ -265,37 +277,31 @@
     </div>
 
     <div class="overflow-y-auto mx-auto max-w-screen-md w-full">
-        <div id="container" class="contents" style={convertStyle($s['body.contents'])}>
-            {#if $page.data.nestedItems === true}
-                {#each $page.data.items as item}
+        <div id="container" class="contents" style={convertStyle($s?.['body.contents'])}>
+            {#if data.nestedItems === true}
+                {#each data.items as item}
                     {#if item.itemType === 'grid'}
                         <ContentGrid
                             {item}
                             {imageFolder}
                             {onClick}
-                            {checkImageSize}
                             {loadReferenceText}
-                            {contentsFontSize}
-                            features={$page.data.features}
+                            features={data.features}
                         />
                     {:else if item.itemType === 'carousel'}
                         <ContentCarousel
                             {item}
                             {imageFolder}
                             {onClick}
-                            {checkImageSize}
                             {loadReferenceText}
-                            {contentsFontSize}
-                            features={$page.data.features}
+                            features={data.features}
                         />
                     {:else if item.itemType === 'heading'}
                         <ContentHeading
                             {item}
                             {imageFolder}
-                            {onClick}
                             {checkImageSize}
-                            {contentsFontSize}
-                            features={$page.data.features}
+                            features={data.features}
                         />
                     {:else if item.itemType === 'single'}
                         <ContentSingle
@@ -303,25 +309,24 @@
                             {imageFolder}
                             {onClick}
                             {checkImageSize}
-                            {contentsFontSize}
-                            features={$page.data.features}
+                            features={data.features}
                         />
                     {/if}
                 {/each}
             {:else}
-                {#each $page.data.items as item}
+                {#each data.items as item}
                     <!-- iterate through the items, adding html -->
 
                     <!-- svelte-ignore a11y_click_events_have_key_events -->
                     <!-- svelte-ignore a11y_no_static_element_interactions -->
                     <div
                         class="contents-item-block-base contents-item-block contents-link-ref"
-                        id={item.id}
-                        onclick={(event) => onClick(event, item)}
+                        id={String(item.id)}
+                        onclick={(event) => onClick(event.currentTarget, item)}
                     >
                         <div class="contents-layout-horizontal">
                             <!--check for the various elements in the item-->
-                            {#if item.audioFilename[$language] || item.audioFilename.default}
+                            {#if item.audioFilename?.[$language] || item.audioFilename?.default}
                                 <!-- svelte-ignore a11y_click_events_have_key_events -->
                                 <!-- svelte-ignore a11y_no_static_element_interactions -->
                                 <div
@@ -336,7 +341,7 @@
                                 <div
                                     class="contents-image-block"
                                     style="{convertStyle(
-                                        $s['div.contents-image-block']
+                                        $s?.['div.contents-image-block']
                                     )}{checkImageSize(item)}"
                                 >
                                     <img
@@ -352,21 +357,21 @@
                                 style:font-size="{$contentsFontSize}px"
                             >
                                 <!-- check for title -->
-                                {#if $page.data.features['show-titles'] === true}
+                                {#if data.features?.['show-titles']}
                                     <div class="contents-title">
-                                        {item.title[$language] ?? item.title.default ?? ''}
+                                        {item.title[$language] ?? item.title.default}
                                     </div>
                                 {/if}
 
                                 <!--Check for subtitle-->
-                                {#if $page.data.features['show-subtitles'] === true}
+                                {#if data.features?.['show-subtitles']}
                                     <div class="contents-subtitle">
-                                        {item.subtitle[$language] ?? item.subtitle.default ?? ''}
+                                        {item.subtitle?.[$language] ?? item.subtitle?.default}
                                     </div>
                                 {/if}
 
                                 <!--check for reference -->
-                                {#if $page.data.features['show-references'] === true}
+                                {#if data.features?.['show-references']}
                                     {#if item.linkType === 'reference'}
                                         {#await loadReferenceText(item)}
                                             <div class="contents-ref"></div>
diff --git a/src/routes/history/+page.svelte b/src/routes/history/+page.svelte
index 070f7fd32..4ecbe166a 100644
--- a/src/routes/history/+page.svelte
+++ b/src/routes/history/+page.svelte
@@ -6,7 +6,7 @@
     import DeleteSweepIcon from '$lib/icons/DeleteSweepIcon.svelte';
 
     let { data } = $props();
-    let history = $state([...data.history].reverse());
+    let history = $derived([...data.history].reverse());
 
     async function onClearHistory() {
         await clearHistory();
diff --git a/src/routes/lexicon/+layout.svelte b/src/routes/lexicon/+layout.svelte
index 60fa906da..a7a652f58 100644
--- a/src/routes/lexicon/+layout.svelte
+++ b/src/routes/lexicon/+layout.svelte
@@ -18,7 +18,7 @@
 
     let { children, data: _data }: Props = $props();
 
-    const inSearchRoute = $derived(page.route.id.endsWith('/search'));
+    const inSearchRoute = $derived(page.route.id?.endsWith('/search'));
 </script>
 
 <div
diff --git a/src/routes/lexicon/+page.svelte b/src/routes/lexicon/+page.svelte
index 0bb8237c4..f978b0806 100644
--- a/src/routes/lexicon/+page.svelte
+++ b/src/routes/lexicon/+page.svelte
@@ -25,16 +25,16 @@
 
     const { data }: Props = $props();
 
-    const { vernacularAlphabet } = data;
+    const { vernacularAlphabet } = $derived(data);
 
-    const alphabets = {
+    const alphabets = $derived({
         reversal: Object.fromEntries(
-            reversals.entries().map(([code, alpha]) => [code, Array.from(alpha.keys())])
+            reversals.entries().map(([code, alpha]) => [code, Array.from(alpha?.keys() ?? [])])
         ),
         vernacular: vernacularAlphabet
-    };
+    });
 
-    let selectedLetter = alphabets.vernacular[0];
+    let selectedLetter = $derived(alphabets.vernacular?.[0]);
     let scrollContainer: HTMLDivElement | undefined = $state(undefined);
 
     //$: selectedLanguage = currentReversal.selectedLanguage;
@@ -45,7 +45,9 @@
         currentReversal.languageId = vernacularLanguageId.value;
     });
 
-    const validReversal = $derived(reversals.has(currentReversal.languageId));
+    const validReversal = $derived(
+        !!currentReversal.languageId && reversals.has(currentReversal.languageId)
+    );
 
     async function scrollToLetter(letter: string) {
         await tick();
@@ -68,7 +70,7 @@
 
     function switchLanguage(language: string) {
         currentReversal.languageId = language;
-        selectedLetter = currentAlphabet[0];
+        selectedLetter = currentAlphabet?.[0];
         const scrollableDiv = document.querySelector('.flex-1.overflow-y-auto.bg-base-100');
         if (scrollableDiv) {
             scrollableDiv.scrollTop = 0;
@@ -90,16 +92,16 @@
             const threshold = 100;
 
             if (div.scrollHeight - div.scrollTop - div.clientHeight < threshold) {
-                const currentIndex = currentAlphabet.indexOf(selectedLetter);
-                if (!currentReversal.letters.has(currentAlphabet[currentIndex + 1])) {
-                    if (currentIndex < currentAlphabet.length - 1) {
+                const currentIndex = currentAlphabet?.indexOf(selectedLetter ?? '') ?? -1;
+                if (!currentReversal.letters.has(currentAlphabet?.[currentIndex + 1] ?? '')) {
+                    if (currentIndex < (currentAlphabet?.length ?? 0) - 1) {
                         isFetching = true;
 
                         isFetching = false;
                     }
                 }
             } else if (
-                (validReversal && currentReversal.letters.has(selectedLetter)) ||
+                (validReversal && currentReversal.letters.has(selectedLetter ?? '')) ||
                 currentReversal.languageId === vernacularLanguageId.value
             ) {
                 const allLetters = div.querySelectorAll('[id^="letter-"]');
@@ -120,7 +122,9 @@
     }
 
     let currentAlphabet = $derived(
-        validReversal ? alphabets.reversal[currentReversal.languageId] : alphabets.vernacular
+        validReversal && currentReversal.languageId
+            ? alphabets.reversal[currentReversal.languageId]
+            : alphabets.vernacular
     );
 
     onMount(() => {
@@ -136,7 +140,7 @@
     <WordNavigationStrip />
 {:else}
     {@const tabs = [vernacularLanguageId.value, ...reversals.keys()]}
-    {@const indexOfPrevious = tabs.indexOf(previousLanguage)}
+    {@const indexOfPrevious = previousLanguage ? tabs.indexOf(previousLanguage) : 0}
     <div class="flex w-full" style="background-color: var(--TabBackgroundColor);">
         {#each tabs as lang, i}
             <button
@@ -168,7 +172,10 @@
                 style="border-color: var(--SettingsSeparatorColor);"
                 disabled={currentReversal.languageId !== vernacularLanguageId.value &&
                     !Array.from(
-                        reversals.get(currentReversal.languageId)?.get(letter)?.values() || []
+                        reversals
+                            .get(currentReversal.languageId ?? '')
+                            ?.get(letter)
+                            ?.values() || []
                     ).find((w) => w.length)}
                 onclick={() => handleLetterChange(letter)}
             >
diff --git a/src/routes/notes/edit/[noteid]/+page.svelte b/src/routes/notes/edit/[noteid]/+page.svelte
index 13baf68de..62f5c58c9 100644
--- a/src/routes/notes/edit/[noteid]/+page.svelte
+++ b/src/routes/notes/edit/[noteid]/+page.svelte
@@ -1,30 +1,36 @@
-<script>
+<script lang="ts">
     import Navbar from '$lib/components/Navbar.svelte';
     import { addNote, editNote, removeNote } from '$lib/data/notes';
     import { selectedVerses, t } from '$lib/data/stores';
     import { CheckIcon, DeleteIcon } from '$lib/icons';
     import { onMount } from 'svelte';
+    import type { PageData } from './$types';
 
-    let { data } = $props();
+    interface Props {
+        data: PageData;
+    }
+
+    let { data }: Props = $props();
 
-    let textarea = $state();
-    let note = data.note;
-    let isNew = note ? false : true;
+    let textarea: HTMLTextAreaElement | undefined = $state();
+    const note = $derived(data.note);
+    const isNew = $derived(note ? false : true);
+    // svelte-ignore state_referenced_locally
     let text = $state(note?.text ?? '');
-    let reference = note?.reference ?? $selectedVerses[0]?.reference;
-    const title = isNew ? 'Annotation_Note_Add' : 'Annotation_Note_Edit';
+    const reference = $derived(note?.reference ?? $selectedVerses[0]?.reference);
+    const title = $derived(isNew ? 'Annotation_Note_Add' : 'Annotation_Note_Edit');
 
     function goBack() {
         history.back();
     }
 
-    function onBackNavigate(event) {
+    function onBackNavigate(event: Event) {
         event.preventDefault();
         goBack();
     }
 
     async function deleteNote() {
-        if (!isNew) {
+        if (!isNew && note) {
             await removeNote(note.date);
         }
         goBack();
@@ -62,11 +68,11 @@
         }
     });
 
-    let action = isNew ? createNote : modifyNote;
+    const action = $derived(isNew ? createNote : modifyNote);
 </script>
 
 <div class="fullscreen-editor">
-    <Navbar on:backNavigation={onBackNavigate}>
+    <Navbar backNavigation={onBackNavigate}>
         {#snippet center()}
             <div class="flex dy-join">
                 <div class="grid h-10 place-items-center dy-join-item">
diff --git a/src/routes/plans/+page.svelte b/src/routes/plans/+page.svelte
index 7f7a156bd..895415064 100644
--- a/src/routes/plans/+page.svelte
+++ b/src/routes/plans/+page.svelte
@@ -1,5 +1,6 @@
-<script>
-    import config from '$assets/config';
+<script lang="ts">
+    import config, { scriptureConfig } from '$assets/config';
+    import type { PlanItem } from '$config';
     import BottomNavigationBar from '$lib/components/BottomNavigationBar.svelte';
     import Navbar from '$lib/components/Navbar.svelte';
     import { getLastPlanState } from '$lib/data/planStates';
@@ -7,7 +8,7 @@
     import { gotoRoute } from '$lib/navigate';
     import { compareVersions } from '$lib/scripts/stringUtils';
 
-    const imageFolder =
+    const imageFolder: Record<string, string> =
         compareVersions(config.programVersion, '12.0') < 0
             ? import.meta.glob('./*', {
                   eager: true,
@@ -23,11 +24,11 @@
               });
 
     let selectedTab = $state('available');
-    let availablePlans = $state([]);
-    let completedPlans = $state([]);
-    let usedPlans = $state([]);
-    let allPlans = config.plans.plans || [];
-    let plansInUse = $state([]);
+    let availablePlans: PlanItem[] = $state([]);
+    let completedPlans: PlanItem[] = $state([]);
+    let usedPlans: PlanItem[] = $state([]);
+    let allPlans = scriptureConfig.plans?.plans || [];
+    let plansInUse: PlanItem[] = $state([]);
 
     $effect(() => {
         const promises = allPlans.map((plan) =>
@@ -74,7 +75,7 @@
         <div
             role="tablist"
             class="dy-tabs dy-tabs-bordered"
-            style={convertStyle($s['ui.plans.tabs'])}
+            style={convertStyle($s?.['ui.plans.tabs'])}
         >
             {#if plansInUse.length > 0}
                 <input
@@ -84,7 +85,7 @@
                     class="dy-tab dy-tab-bordered {selectedTab === 'in-use' ? 'dy-tab-active' : ''}"
                     onclick={() => (selectedTab = 'in-use')}
                     aria-label={$t['Plans_Tab_My_Plans']}
-                    style={convertStyle($s['ui.plans.tabs.text'])}
+                    style={convertStyle($s?.['ui.plans.tabs.text'])}
                 />
             {/if}
             <input
@@ -94,7 +95,7 @@
                 class="dy-tab {selectedTab === 'available' ? 'dy-tab-active' : ''}"
                 onclick={() => (selectedTab = 'available')}
                 aria-label={$t['Plans_Tab_Choose_Plan']}
-                style={convertStyle($s['ui.plans.tabs.text'])}
+                style={convertStyle($s?.['ui.plans.tabs.text'])}
             />
             {#if completedPlans.length > 0}
                 <input
@@ -106,7 +107,7 @@
                         : ''}"
                     onclick={() => (selectedTab = 'completed')}
                     aria-label={$t['Plans_Tab_Completed_Plans']}
-                    style={convertStyle($s['ui.plans.tabs.text'])}
+                    style={convertStyle($s?.['ui.plans.tabs.text'])}
                 />
             {/if}
         </div>
@@ -139,7 +140,7 @@
                                     {plan.title[$language] ?? plan.title.default ?? ''}
                                 </div>
                                 <div class="plan-chooser-days">
-                                    {$t['Plans_Number_Days'].replace('%d', plan.days)}
+                                    {$t['Plans_Number_Days'].replace('%d', String(plan.days))}
                                 </div>
                             </div>
                         </div>
@@ -171,7 +172,7 @@
                                     {plan.title[$language] ?? plan.title.default ?? ''}
                                 </div>
                                 <div class="plan-chooser-days">
-                                    {$t['Plans_Number_Days'].replace('%d', plan.days)}
+                                    {$t['Plans_Number_Days'].replace('%d', String(plan.days))}
                                 </div>
                             </div>
                         </div>
@@ -203,7 +204,7 @@
                                     {plan.title[$language] ?? plan.title.default ?? ''}
                                 </div>
                                 <div class="plan-chooser-days">
-                                    {$t['Plans_Number_Days'].replace('%d', plan.days)}
+                                    {$t['Plans_Number_Days'].replace('%d', String(plan.days))}
                                 </div>
                             </div>
                         </div>
diff --git a/src/routes/plans/[id]/+page.svelte b/src/routes/plans/[id]/+page.svelte
index 9faa2e4c0..caab9033f 100644
--- a/src/routes/plans/[id]/+page.svelte
+++ b/src/routes/plans/[id]/+page.svelte
@@ -1,8 +1,8 @@
-<script>
-    import { page } from '$app/stores';
+<script lang="ts">
     import config from '$assets/config';
     import Navbar from '$lib/components/Navbar.svelte';
     import { getFirstIncompleteDay, getNextPlanReference } from '$lib/data/planProgressItems';
+    import type { PlanDataItem } from '$lib/data/plansData';
     import { getLastPlanStateRecord } from '$lib/data/planStates';
     import { convertStyle, language, modal, ModalType, plan, refs, s, t } from '$lib/data/stores';
     import {
@@ -16,8 +16,15 @@
     import { getDisplayString } from '$lib/scripts/scripture-reference-utils';
     import { getReferenceFromString } from '$lib/scripts/scripture-reference-utils-common';
     import { compareVersions } from '$lib/scripts/stringUtils';
+    import type { PageData } from './$types';
 
-    const imageFolder =
+    interface Props {
+        data: PageData;
+    }
+
+    let { data }: Props = $props();
+
+    const imageFolder: Record<string, string> =
         compareVersions(config.programVersion, '12.0') < 0
             ? import.meta.glob('./*', {
                   eager: true,
@@ -32,20 +39,20 @@
                   base: '/src/gen-assets/plans'
               });
 
-    const barIconColor = $s['ui.bar.text-select.icon']['color'];
+    const barIconColor = $s?.['ui.bar.text-select.icon']['color'];
     //need some way to know the status of the plan
     //for now assume it's from choose plans
 
-    let selectedTab = 'info';
-    let inUse = false;
+    let selectedTab = $state('info');
+    let inUse = $state(false);
     //could be info or calendar for a plan thats not in use, if the plan is in use, there is a settings tab
     checkPlanState();
-    let selectedDay = $page.data.planData.items[0];
-    let planId = $page.data.planData.id;
-    let currentPlanStatus = '';
+    let selectedDay = $derived(data.planData.items?.[0]);
+    const planId = $derived(data.planData.id);
+    let currentPlanStatus = $state('');
     let currentStatusDateString = '';
     async function checkPlanState() {
-        const planStateRecord = await getLastPlanStateRecord($page.data.planData.id);
+        const planStateRecord = await getLastPlanStateRecord(data.planData.id);
         if (planStateRecord) {
             const planState = planStateRecord.state;
             currentPlanStatus = planState;
@@ -58,24 +65,24 @@
             if (planState && planState === 'started') {
                 selectedTab = 'calendar';
                 inUse = true;
-                const firstIncompletePlanDay = await getFirstIncompleteDay($page.data.planData, -1);
+                const firstIncompletePlanDay = await getFirstIncompleteDay(data.planData, -1);
                 if (firstIncompletePlanDay !== -1) {
                     // -1 means the plan is complete, which really shouldn't show up here
-                    const dayIndex = $page.data.planData.items.findIndex(
+                    const dayIndex = data.planData.items?.findIndex(
                         (item) => item.day === firstIncompletePlanDay
                     );
                     // Should always be found but
-                    if (dayIndex != -1) {
-                        selectedDay = $page.data.planData.items[dayIndex];
+                    if ((dayIndex ?? -1) !== -1) {
+                        selectedDay = data.planData.items?.[dayIndex!];
                     }
                 }
             }
         }
     }
-    function referenceCompleted(day, refIndex) {
+    function referenceCompleted(day: number, refIndex: number) {
         let completed = false;
         // While there should only be 0 or one match, this will get any present
-        const matchingEntries = $page.data.planCompletionData.filter(
+        const matchingEntries = data.planCompletionData.filter(
             (item) => item.day === day && item.itemIndex === refIndex
         );
         if (matchingEntries.length > 0) {
@@ -84,10 +91,11 @@
         return completed;
     }
 
-    function getReferenceString(ref) {
+    function getReferenceString(ref: string) {
         // Reminder - get book collection id
         let currentBookCollectionId = $refs.collection;
-        const [collection, book, fromChapter, toChapter, verseRanges] = getReferenceFromString(ref);
+        const [_collection, book, _fromChapter, toChapter, verseRanges] =
+            getReferenceFromString(ref);
         const displayString = getDisplayString(
             currentBookCollectionId,
             book,
@@ -97,7 +105,7 @@
         return displayString;
     }
 
-    function checkReference(book, chapter) {
+    function checkReference(book: string, chapter: number) {
         let value = false;
         const books = $refs.catalog.documents;
         const bookInCatalog = books.find((d) => d.bookCode === book);
@@ -108,7 +116,7 @@
         }
         return value;
     }
-    function goToDailyReference(item, ref, index) {
+    function goToDailyReference(item: PlanDataItem, ref: string, index: number) {
         // Only go to reference if in an active plan
         if (inUse) {
             let currentBookCollectionId = $refs.collection;
@@ -117,10 +125,10 @@
             const [fromVerse, toVerse, separator] = verseRanges[0];
             if (checkReference(book, toChapter)) {
                 let destinationVerse = fromVerse === -1 ? 1 : fromVerse;
-                getNextPlanReference($page.data.planData.id, item, index).then(
+                getNextPlanReference(data.planData.id, item, index).then(
                     ([nextReference, nextIndex]) => {
                         $plan = {
-                            planId: $page.data.planData.id,
+                            planId: data.planData.id,
                             planDay: item.day,
                             planEntry: index,
                             planBookId: book,
@@ -163,21 +171,26 @@
     let isDragging = false;
     let startX = 0;
     let scrollLeft = 0;
+    let scroller: HTMLDivElement | undefined = $state();
 
-    function handleMouseDown(event) {
+    function handleMouseDown(event: MouseEvent) {
         isDragging = true;
-        startX = event.pageX - scroller.offsetLeft;
-        scrollLeft = scroller.scrollLeft;
+        if (scroller) {
+            startX = event.pageX - scroller.offsetLeft;
+            scrollLeft = scroller.scrollLeft;
+        }
     }
 
-    function handleMouseMove(event) {
+    function handleMouseMove(event: MouseEvent) {
         if (!isDragging) {
             return;
         }
         event.preventDefault();
-        const x = event.pageX - scroller.offsetLeft;
-        const walk = (x - startX) * 2; // Adjust scroll speed
-        scroller.scrollLeft = scrollLeft - walk;
+        if (scroller) {
+            const x = event.pageX - scroller.offsetLeft;
+            const walk = (x - startX) * 2; // Adjust scroll speed
+            scroller.scrollLeft = scrollLeft - walk;
+        }
     }
 
     function handleMouseUp() {
@@ -192,9 +205,7 @@
                 <label for="sidebar">
                     <div class="btn btn-ghost normal-case text-xl">
                         <!--back navigation isn't quite right-->
-                        {$page.data.planConfig.title[$language] ??
-                            $page.data.planConfig.title.default ??
-                            ''}
+                        {data.planConfig?.title[$language] ?? data.planConfig?.title.default ?? ''}
                     </div>
                 </label>
             {/snippet}
@@ -202,60 +213,56 @@
     </div>
 
     <div class="overflow-y-auto mx-auto md:max-w-screen-md w-full">
-        {#if $page.data.planConfig.image}
+        {#if data.planConfig?.image}
             <div>
                 <img
                     class="plan-image"
-                    src={imageFolder[`./${$page.data.planConfig.image.file}`]}
-                    alt={$page.data.planConfig.image.file}
-                    width={$page.data.planConfig.image.width}
-                    height={$page.data.planConfig.image.height}
+                    src={imageFolder[`./${data.planConfig.image.file}`]}
+                    alt={data.planConfig.image.file}
+                    width={data.planConfig.image.width}
+                    height={data.planConfig.image.height}
                 />
             </div>
         {/if}
-        <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
         <div
             role="tablist"
             class="dy-tabs dy-tabs-bordered"
-            style={convertStyle($s['ui.plans.tabs'])}
+            style={convertStyle($s?.['ui.plans.tabs'])}
         >
-            <!-- svelte-ignore a11y-no-static-element-interactions -->
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
 
             <div
-                name="my_tabs_1"
                 class="dy-tab dy-tab-bordered {selectedTab === 'info' ? 'dy-tab-active' : ''}"
-                on:click={() => (selectedTab = 'info')}
+                onclick={() => (selectedTab = 'info')}
                 aria-label="info icon"
-                style={convertStyle($s['ui.plans.tabs.text'])}
+                style={convertStyle($s?.['ui.plans.tabs.text'])}
             >
-                <InfoIcon color={barIconColor} style={convertStyle($s['ui.plans.tabs.icon'])}
-                ></InfoIcon>
+                <InfoIcon color={barIconColor} style={convertStyle($s?.['ui.plans.tabs.icon'])} />
             </div>
 
-            <!-- svelte-ignore a11y-no-static-element-interactions -->
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
             <div
-                name="my_tabs_1"
                 class="dy-tab {selectedTab === 'calendar' ? 'dy-tab-active' : ''}"
-                on:click={() => (selectedTab = 'calendar')}
+                onclick={() => (selectedTab = 'calendar')}
                 aria-label="calendar logo"
             >
                 <CalendarMonthIcon
                     color={barIconColor}
-                    style={convertStyle($s['ui.plans.tabs.icon'])}
-                ></CalendarMonthIcon>
+                    style={convertStyle($s?.['ui.plans.tabs.icon'])}
+                />
             </div>
-            <!-- svelte-ignore a11y-no-static-element-interactions -->
-            {#if inUse === true}
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
+            {#if inUse}
                 <div
-                    name="my_tabs_1"
                     class="dy-tab {selectedTab === 'settings' ? 'dy-tab-active' : ''}"
-                    on:click={() => (selectedTab = 'settings')}
+                    onclick={() => (selectedTab = 'settings')}
                     aria-label="settings icon"
                 >
                     <SettingsIcon
                         color={barIconColor}
-                        style={convertStyle($s['ui.plans.tabs.icon'])}
-                    ></SettingsIcon>
+                        style={convertStyle($s?.['ui.plans.tabs.icon'])}
+                    />
                 </div>
             {/if}
         </div>
@@ -264,16 +271,14 @@
             {#if selectedTab === 'info'}
                 <div id="plan-page" class="plan-details">
                     <div class="plan-title">
-                        {$page.data.planData.title[$language] ??
-                            $page.data.planData.title.default ??
-                            ''}
+                        {data.planData.title?.[$language] ?? data.planData.title?.default ?? ''}
                     </div>
                     <div class="plan-days">
-                        {$t['Plans_Number_Days'].replace('%d', $page.data.planConfig.days)}
+                        {$t['Plans_Number_Days'].replace('%d', String(data.planConfig?.days ?? ''))}
                     </div>
                     <div class="plan-description">
-                        {$page.data.planData.description[$language] ??
-                            $page.data.planData.description.default ??
+                        {data.planData.description?.[$language] ??
+                            data.planData.description?.default ??
                             ''}
                     </div>
                     {#if currentPlanStatus === 'started' || currentPlanStatus === 'completed'}
@@ -284,20 +289,19 @@
                     {#if inUse === true}
                         <div class="plan-button-block">
                             <div class="plan-button" id="PLAN-continue">
-                                <button on:click={() => (selectedTab = 'calendar')}>
+                                <button onclick={() => (selectedTab = 'calendar')}>
                                     {$t['Plans_Button_Continue_Reading']}
                                 </button>
                             </div>
                         </div>
                     {:else}
                         <div class="plan-button-block">
-                            <!-- svelte-ignore a11y-click-events-have-key-events -->
-                            <!-- svelte-ignore a11y-no-static-element-interactions -->
+                            <!-- svelte-ignore a11y_click_events_have_key_events -->
+                            <!-- svelte-ignore a11y_no_static_element_interactions -->
                             <div
                                 class="plan-button"
                                 id="PLAN-start"
-                                on:click={() =>
-                                    gotoRoute(`/plans/${$page.data.planData.id}/settings`)}
+                                onclick={() => gotoRoute(`/plans/${data.planData.id}/settings`)}
                             >
                                 {$t['Plans_Button_Start_Plan']}
                             </div>
@@ -306,30 +310,31 @@
                 </div>
             {/if}
             {#if selectedTab === 'calendar'}
-                <!-- svelte-ignore a11y-no-static-element-interactions -->
+                <!-- svelte-ignore a11y_no_static_element_interactions -->
                 <div
                     class="plan-days-scroller"
                     id="scroller"
-                    on:mousedown={handleMouseDown}
-                    on:mousemove={handleMouseMove}
-                    on:mouseup={handleMouseUp}
-                    on:mouseleave={handleMouseUp}
+                    bind:this={scroller}
+                    onmousedown={handleMouseDown}
+                    onmousemove={handleMouseMove}
+                    onmouseup={handleMouseUp}
+                    onmouseleave={handleMouseUp}
                 >
                     <ul class="dy-menu-horizontal bg-base-200 rounded-box">
-                        {#each $page.data.planData.items as item}
+                        {#each data.planData.items as item}
                             <!-- plan-day-box selected plan-day-box-selected plan-day-box-uncompleted or
                          plan-day-box plan-day-box-unselected plan-day-box-uncompleted -->
-                            <!-- svelte-ignore a11y-click-events-have-key-events -->
-                            <!-- svelte-ignore a11y-no-static-element-interactions -->
+                            <!-- svelte-ignore a11y_click_events_have_key_events -->
+                            <!-- svelte-ignore a11y_no_static_element_interactions -->
                             <!-- the class plan-day-box in particular does not seem to work-->
                             <li>
                                 <div
-                                    class="plan-day-box plan-day-box-uncompleted {selectedDay.day ===
+                                    class="plan-day-box plan-day-box-uncompleted {selectedDay?.day ===
                                     item.day
                                         ? 'selected plan-day-box-selected'
                                         : 'plan-day-box-unselected'}"
                                     id="D-1"
-                                    on:click={() => (selectedDay = item)}
+                                    onclick={() => (selectedDay = item)}
                                 >
                                     <div class="plan-day-box-content">
                                         <div class="plan-day-box-weekday">{$t['Plans_Day']}</div>
@@ -344,14 +349,15 @@
                 <div class="plan-items" id="container">
                     <table class="plan-items-table">
                         <tbody>
-                            {#each selectedDay.refs as ref, index}
+                            {#each selectedDay?.refs as ref, index}
                                 <tr
                                     class="plan-item"
                                     id={'R-' + index}
-                                    on:click={() => goToDailyReference(selectedDay, ref, index)}
+                                    onclick={() =>
+                                        selectedDay && goToDailyReference(selectedDay, ref, index)}
                                 >
                                     <td class="plan-item-checkbox plan-checkbox-image">
-                                        {#if referenceCompleted(selectedDay.day, index) === true}
+                                        {#if referenceCompleted(selectedDay!.day, index) === true}
                                             <CheckboxIcon color={barIconColor} />
                                         {:else}
                                             <CheckboxOutlineIcon color={barIconColor} />
@@ -373,12 +379,12 @@
                     <div class="plan-config-info">
                         {$t['Plans_Config_Stop_Plan_info']}
                     </div>
-                    <!-- svelte-ignore a11y-click-events-have-key-events -->
-                    <!-- svelte-ignore a11y-no-static-element-interactions -->
+                    <!-- svelte-ignore a11y_click_events_have_key_events -->
+                    <!-- svelte-ignore a11y_no_static_element_interactions -->
                     <div
                         class="plan-button plan-config-button"
                         id="PLAN-stop"
-                        on:click={() => modal.open(ModalType.StopPlan, planId)}
+                        onclick={() => modal.open(ModalType.StopPlan, planId)}
                     >
                         {$t['Plans_Button_Stop_Plan']}
                     </div>
diff --git a/src/routes/text/+page.svelte b/src/routes/text/+page.svelte
index 9d0968967..afbcc6981 100644
--- a/src/routes/text/+page.svelte
+++ b/src/routes/text/+page.svelte
@@ -1,15 +1,19 @@
-<script>
+<script lang="ts">
     import { page } from '$app/state';
-    import config from '$assets/config';
+    import config, { scriptureConfig } from '$assets/config';
     import contents from '$assets/contents';
     import AudioBar from '$lib/components/AudioBar.svelte';
     import BookSelector from '$lib/components/BookSelector.svelte';
     import BookTabs from '$lib/components/BookTabs.svelte';
     import BottomNavigationBar from '$lib/components/BottomNavigationBar.svelte';
     import ChapterSelector from '$lib/components/ChapterSelector.svelte';
-    import HtmlBookView from '$lib/components/HtmlBookView.svelte';
+    import HtmlBookView, {
+        type Props as HtmlBookViewProps
+    } from '$lib/components/HtmlBookView.svelte';
     import Navbar from '$lib/components/Navbar.svelte';
-    import ScriptureViewSofria from '$lib/components/ScriptureViewSofria.svelte';
+    import ScriptureViewSofria, {
+        type Props as ScriptureViewSofriaProps
+    } from '$lib/components/ScriptureViewSofria.svelte';
     import StackView from '$lib/components/StackView.svelte';
     import { showTextAppearance } from '$lib/components/TextAppearanceSelector.svelte';
     import TextSelectionToolbar from '$lib/components/TextSelectionToolbar.svelte';
@@ -55,7 +59,12 @@
     import { gotoRoute, navigateToTextChapterInDirection } from '$lib/navigate';
     import { getFeatureValueBoolean, getFeatureValueString } from '$lib/scripts/configUtils';
     import { onDestroy, onMount } from 'svelte';
-    import { pinch, swipe } from 'svelte-gestures';
+    import {
+        pinch,
+        swipe,
+        type PinchPointerEventDetail,
+        type SwipePointerEventDetail
+    } from 'svelte-gestures';
 
     const borders = import.meta.glob('./*', {
         import: 'default',
@@ -92,7 +101,7 @@
         savedScrollPosition = 0;
     });
     const swipeBetweenBooks = config.mainFeatures['book-swipe-between-books'];
-    async function doSwipe(event) {
+    async function doSwipe(event: CustomEvent<SwipePointerEventDetail>) {
         const swipeDirection = event.detail.direction;
         console.log('SWIPE', swipeDirection);
         if (
@@ -105,9 +114,9 @@
     }
 
     const bookTabs = $derived(
-        config?.bookCollections
-            .find((x) => x.id === $refs.collection)
-            .books.find((x) => x.id === $refs.book)?.bookTabs
+        scriptureConfig?.bookCollections
+            ?.find((x) => x.id === $refs.collection)
+            ?.books.find((x) => x.id === $refs.book)?.bookTabs
     ); //This should hopefully be reactive and find the book tabs if the current book has them.
 
     const bottomNavBarEnabled = config?.bottomNavBarItems && config?.bottomNavBarItems.length > 0;
@@ -125,14 +134,14 @@
     const hasPrev = $derived($refs.prev.chapter !== null);
     const hasNext = $derived($refs.next.chapter !== null);
     const viewShowVerses = $derived(
-        $userSettings['verse-numbers'] ??
+        ($userSettings['verse-numbers'] as boolean) ??
             getFeatureValueBoolean('show-verse-numbers', $refs.collection, $refs.book)
     );
 
-    const minFontSize = config.mainFeatures['text-size-min'];
-    const maxFontSize = config.mainFeatures['text-size-max'];
+    const minFontSize = config.mainFeatures['text-size-min'] as number;
+    const maxFontSize = config.mainFeatures['text-size-max'] as number;
     let lastPinch = 1.0;
-    function doPinch() {
+    function doPinch(event: CustomEvent<PinchPointerEventDetail>) {
         const currPinch = event.detail.scale;
         bodyFontSize.update((fontSize) => {
             if (Math.abs(currPinch - lastPinch) > 0.1) {
@@ -150,29 +159,32 @@
         getFeatureValueString('audio-phrase-end-chars', $refs.collection, $refs.book)
     );
 
-    const showSearch = config.mainFeatures['search'];
-    const enoughCollections = config.bookCollections.length > 1;
-    const showCollectionNavbar = config.mainFeatures['layout-config-change-toolbar-button'];
-    const showCollectionsOnFirstLaunch = config.mainFeatures['layout-config-first-launch'];
-    const showCollectionViewer = config.mainFeatures['layout-config-change-viewer-button'];
-    const showAudio = config.mainFeatures['audio-allow-turn-on-off'];
+    const showSearch = !!config.mainFeatures['search'];
+    const enoughCollections = (scriptureConfig.bookCollections?.length ?? 0) > 1;
+    const showCollectionNavbar = !!config.mainFeatures['layout-config-change-toolbar-button'];
+    const showCollectionsOnFirstLaunch = !!config.mainFeatures['layout-config-first-launch'];
+    const showCollectionViewer = !!config.mainFeatures['layout-config-change-viewer-button'];
+    const showAudio = !!config.mainFeatures['audio-allow-turn-on-off'];
 
     const showBorderSetting = $derived(
         getFeatureValueBoolean('show-border', $refs.collection, $refs.book)
     );
     const showBorder = $derived(
-        config.traits['has-borders'] && ($userSettings['show-border'] ?? showBorderSetting)
+        !!(
+            scriptureConfig.traits?.['has-borders'] &&
+            ($userSettings['show-border'] ?? showBorderSetting)
+        )
     );
     const format = $derived(getFormat($refs.collection, $refs.book));
     const viewSettings = $derived(
         format === 'html'
-            ? {
+            ? ({
                   references: $refs,
                   bodyFontSize: $bodyFontSize,
                   bodyLineHeight: $bodyLineHeight,
                   fetch: page.data.fetch
-              }
-            : {
+              } satisfies HtmlBookViewProps)
+            : ({
                   audioPhraseEndChars: audioPhraseEndChars,
                   bodyFontSize: $bodyFontSize,
                   bodyLineHeight: $bodyLineHeight,
@@ -180,25 +192,30 @@
                   notes: $notes,
                   highlights: $highlights,
                   maxSelections: config.mainFeatures['annotation-max-select'],
-                  redLetters: $userSettingsOrDefault['red-letters'],
+                  redLetters: $userSettingsOrDefault['red-letters'] as boolean,
                   references: $refs,
                   glossary: $glossary,
                   selectedVerses: selectedVerses,
                   themeColors: $themeColors,
                   verseLayout: $userSettingsOrDefault['verse-layout'],
-                  viewShowBibleImages: $userSettingsOrDefault['display-images-in-bible-text'],
-                  viewShowBibleVideos: $userSettingsOrDefault['display-videos-in-bible-text'],
-                  viewShowIllustrations: config.mainFeatures['show-illustrations'],
+                  viewShowBibleImages: $userSettingsOrDefault[
+                      'display-images-in-bible-text'
+                  ] as string,
+                  viewShowBibleVideos: $userSettingsOrDefault[
+                      'display-videos-in-bible-text'
+                  ] as string,
+                  viewShowIllustrations: config.mainFeatures['show-illustrations'] as boolean,
                   viewShowVerses,
-                  viewShowGlossaryWords: $userSettingsOrDefault['glossary-words'],
-                  font: $currentFont,
+                  viewShowGlossaryWords: $userSettingsOrDefault['glossary-words'] as boolean,
+                  font: $currentFont!,
                   proskomma: page.data?.proskomma
-              }
+              } satisfies ScriptureViewSofriaProps)
     );
 
-    function getFormat(bcId, bookId) {
-        return config.bookCollections.find((x) => x.id === bcId)?.books.find((x) => x.id === bookId)
-            ?.format;
+    function getFormat(bcId: string, bookId: string) {
+        return scriptureConfig.bookCollections
+            ?.find((x) => x.id === bcId)
+            ?.books.find((x) => x.id === bookId)?.format;
     }
 
     const stackSettings = $derived({
@@ -208,15 +225,15 @@
     });
 
     const extraIconsExist = $derived(showSearch || showCollectionNavbar); //Note: was trying document.getElementById('extraButtons').childElementCount; but that caused it to hang forever.
-    let scrollingDiv = $state();
+    let scrollingDiv: HTMLDivElement | undefined = $state();
 
     let showOverlowMenu = $state(false); //Controls the visibility of the extraButtons div on mobile
-    function handleMenuClick(event) {
+    function handleMenuClick() {
         showOverlowMenu = false;
     }
 
     /**scrolls element with id into view*/
-    const scrollTo = (id) => {
+    const scrollTo = (id: string) => {
         let verseId = id === 'start-none' ? '1-a' : id;
         if (!verseId) {
             return;
@@ -224,14 +241,14 @@
         let el = findVerseElement(verseId);
         makeElementVisible(el);
     };
-    function delayedScroll(id) {
+    function delayedScroll(id: string) {
         let updateTimer;
         clearTimeout(updateTimer);
         updateTimer = setTimeout(() => {
             scrollTo(id);
         }, 100);
     }
-    function delayedSeek(id) {
+    function delayedSeek(id: string) {
         let updateTimer;
         clearTimeout(updateTimer);
         updateTimer = setTimeout(() => {
@@ -240,8 +257,8 @@
     }
     /**Scroll to start of chapter when reference changes*/
     const newRefScroll = (() => {
-        let updateTimer;
-        return () => {
+        let updateTimer: NodeJS.Timeout;
+        return (_: unknown) => {
             clearTimeout(updateTimer);
             updateTimer = setTimeout(() => {
                 let verse = $refs.verse;
@@ -258,29 +275,31 @@
         };
     })();
 
-    function makeElementVisible(el) {
+    function makeElementVisible(el?: Element | null) {
         if (el) {
             if (el.classList.contains('scroll-item')) {
                 const rect = el.getBoundingClientRect();
                 const win = document
                     .getElementsByClassName('container')[0]
                     ?.getBoundingClientRect();
-                const scrollTop = scrollingDiv.scrollTop;
-                const scrollHeight = scrollingDiv.clientHeight;
-                const isVisible =
-                    rect.top - win.top - 30 >= scrollTop &&
-                    rect.bottom - win.top + 30 <= scrollHeight + scrollTop;
-                if (!isVisible) {
-                    let newTop = rect.top - win.top - 30;
-                    scrollingDiv.scrollTo({ top: newTop, behavior: 'smooth' });
-                    if (newTop > 0) {
-                        savedScrollPosition = newTop;
+                if (scrollingDiv) {
+                    const scrollTop = scrollingDiv.scrollTop;
+                    const scrollHeight = scrollingDiv.clientHeight;
+                    const isVisible =
+                        rect.top - win.top - 30 >= scrollTop &&
+                        rect.bottom - win.top + 30 <= scrollHeight + scrollTop;
+                    if (!isVisible) {
+                        let newTop = rect.top - win.top - 30;
+                        scrollingDiv.scrollTo({ top: newTop, behavior: 'smooth' });
+                        if (newTop > 0) {
+                            savedScrollPosition = newTop;
+                        }
                     }
                 }
             }
         }
     }
-    function findVerseElement(verseId) {
+    function findVerseElement(verseId: string) {
         const [verseNumStr, phrase] = verseId.split('-');
         const verseNum = Number(verseNumStr);
 
@@ -313,14 +332,16 @@
     const highlightColor = $derived($themeColors['TextHighlightColor']);
     let currentVerse = '';
     /**updates highlight*/
-    const updateHighlight = (elementIds, color) => {
+    const updateHighlight = (elementIds: string[], color: string) => {
         let container = document.getElementsByClassName('container')[0];
         // Remove highlighting for currently highlighted verses
         const elements = container?.getElementsByClassName('highlighting');
         for (let i = 0; i < elements?.length; i++) {
             const element = elements[i];
             const node = element.getAttributeNode('style');
-            element.removeAttributeNode(node);
+            if (node) {
+                element.removeAttributeNode(node);
+            }
             element.classList.remove('highlighting');
         }
 
@@ -485,11 +506,12 @@
         <div
             class="absolute dy-badge dy-badge-outline dy-badge-md rounded-sm p-1 end-3 m-1 cursor-pointer"
             style:top={navBarHeight}
-            style:background-color={convertStyle($s['ui.pane1'])}
-            style={convertStyle($s['ui.pane1.name'])}
+            style:background-color={convertStyle($s?.['ui.pane1'])}
+            style={convertStyle($s?.['ui.pane1.name'])}
             onclick={() => modal.open(ModalType.Collection)}
         >
-            {config.bookCollections.find((x) => x.id === $refs.collection)?.collectionAbbreviation}
+            {scriptureConfig.bookCollections?.find((x) => x.id === $refs.collection)
+                ?.collectionAbbreviation}
         </div>
     {/if}
     <div
@@ -527,9 +549,11 @@
                             onswipe={doSwipe}
                         >
                             {#if format === 'html'}
-                                <HtmlBookView {...viewSettings} />
+                                <HtmlBookView {...viewSettings as HtmlBookViewProps} />
                             {:else}
-                                <ScriptureViewSofria {...viewSettings} />
+                                <ScriptureViewSofria
+                                    {...viewSettings as ScriptureViewSofriaProps}
+                                />
                             {/if}
                         </div>
                     </main>
@@ -569,7 +593,7 @@
             </div>
         </div>
     {/if}
-    {#if scrollingUp && bottomNavBarEnabled && !$selectedVerses.length > 0}
+    {#if scrollingUp && bottomNavBarEnabled && !$selectedVerses.length}
         <BottomNavigationBar {barType} />
     {/if}
 </div>