diff --git a/src/lib/components/publications/TableOfContents.svelte b/src/lib/components/publications/TableOfContents.svelte
new file mode 100644
index 0000000..50b383a
--- /dev/null
+++ b/src/lib/components/publications/TableOfContents.svelte
@@ -0,0 +1,20 @@
+<script lang='ts'>
+  import { page } from '$app/state';
+  import type { PublicationTree } from '$lib/data_structures/publication_tree';
+  import type { TocEntry } from '$lib/components/publications/table_of_contents.svelte';
+  import { getContext } from 'svelte';
+
+  let { rootAddress } = $props<{ rootAddress: string }>();
+
+  let publicationTree = getContext('publicationTree') as PublicationTree;
+
+  let tocAddresses = $state<Map<string, TocEntry>>(new Map());
+  let tocRoot = $state<TocEntry | null>(null);
+
+  // Determine the event kind.
+  // If index, use the publication tree to build the table of contents.
+  // If single event, build the table of contents from the rendered HTML.
+  // Each rendered `<h>` should receive an entry in the ToC.
+</script>
+
+<!-- TODO: Add contents. -->
diff --git a/src/lib/components/TableOfContents.svelte b/src/lib/components/publications/table_of_contents.svelte.ts
similarity index 52%
rename from src/lib/components/TableOfContents.svelte
rename to src/lib/components/publications/table_of_contents.svelte.ts
index 78aa83a..548d4f5 100644
--- a/src/lib/components/TableOfContents.svelte
+++ b/src/lib/components/publications/table_of_contents.svelte.ts
@@ -1,35 +1,38 @@
-<script lang='ts'>
-  import { page } from '$app/state';
-  import type { PublicationTree } from '$lib/data_structures/publication_tree';
-  import type { TocEntry } from '$lib/data_structures/table_of_contents';
-  import { getContext } from 'svelte';
+import { PublicationTree } from "../../data_structures/publication_tree.ts";
 
-  let { rootAddress } = $props<{ rootAddress: string }>();
+export interface TocEntry {
+  title: string;
+  href: string;
+  expanded: boolean;
+  children: Array<TocEntry> | null;
+}
 
-  let publicationTree = getContext('publicationTree') as PublicationTree;
+export class TableOfContents {
+  tocRoot = $state<TocEntry | null>(null);
+  tocAddresses = $state<Map<string, TocEntry>>(new Map());
 
-  let tocAddresses = $state<Map<string, TocEntry>>(new Map());
-  let tocRoot = $state<TocEntry | null>(null);
+  publicationTree: PublicationTree;
+  pagePathname: string;
 
-  // Determine the event kind.
-  // If index, use the publication tree to build the table of contents.
-  // If single event, build the table of contents from the rendered HTML.
-  // Each rendered `<h>` should receive an entry in the ToC.
+  constructor(publicationTree: PublicationTree, pagePathname: string) {
+    this.publicationTree = publicationTree;
+    this.pagePathname = pagePathname;
+  }
 
-  function normalizeHashPath(title: string): string {
+  #normalizeHashPath(title: string): string {
     // TODO: Confirm this uses good normalization logic to produce unique hrefs within the page.
     return title.toLowerCase().replace(/ /g, '-');
   }
 
-  async function insertIntoTocFromPublicationTree(address: string): Promise<void> {
-    const targetEvent = await publicationTree.getEvent(address);
+  async insertIntoTocFromPublicationTree(address: string): Promise<void> {
+    const targetEvent = await this.publicationTree.getEvent(address);
     if (!targetEvent) {
       console.warn(`[ToC] Event ${address} not found.`);
       // TODO: Determine how to handle this case in the UI.
       return;
     }
 
-    const hierarchyEvents = await publicationTree.getHierarchy(address);
+    const hierarchyEvents = await this.publicationTree.getHierarchy(address);
     if (hierarchyEvents.length === 0) {
       // This means we are at root.
       return;
@@ -38,22 +41,22 @@
     // Michael J 05 May 2025 - In this loop, we assume that the parent of the current event has
     // already been populated into the ToC.  As long as the root is set when the component is
     // initialized, this code will work fine.
-    let currentParentTocNode: TocEntry | null = tocRoot;
+    let currentParentTocNode: TocEntry | null = this.tocRoot;
     for (let i = 0; i < hierarchyEvents.length; i++) {
       const currentEvent = hierarchyEvents[i];
       const currentAddress = currentEvent.tagAddress();
 
-      if (tocAddresses.has(currentAddress)) {
+      if (this.tocAddresses.has(currentAddress)) {
         continue;
       }
 
-      const currentEventChildAddresses = await publicationTree.getChildAddresses(currentAddress);
-      for (let address of currentEventChildAddresses) {
+      const currentEventChildAddresses = await this.publicationTree.getChildAddresses(currentAddress);
+      for (const address of currentEventChildAddresses) {
         if (address === null) {
           continue;
         }
 
-        const childEvent = await publicationTree.getEvent(address);
+        const childEvent = await this.publicationTree.getEvent(address);
         if (!childEvent) {
           console.warn(`[ToC] Event ${address} not found.`);
           continue;
@@ -63,21 +66,20 @@
 
         const childTocEntry: TocEntry = {
           title: childEvent.getMatchingTags('title')[0][1],
-          href: `${page.url.pathname}#${normalizeHashPath(childEvent.getMatchingTags('title')[0][1])}`,
+          href: `${this.pagePathname}#${this.#normalizeHashPath(childEvent.getMatchingTags('title')[0][1])}`,
           expanded: false,
           children: null,
         };
         currentParentTocNode!.children.push(childTocEntry);
-        tocAddresses.set(address, childTocEntry);
+        this.tocAddresses.set(address, childTocEntry);
       }
 
-      currentParentTocNode = tocAddresses.get(currentAddress)!;
+      currentParentTocNode = this.tocAddresses.get(currentAddress)!;
     }
   }
 
-  function buildTocFromDocument(parentElement: HTMLElement): void {
+  buildTocFromDocument(parentElement: HTMLElement): void {
     const entries: TocEntry[] = [];
-    const currentPathname = page.url.pathname;
 
     parentElement
       .querySelectorAll<HTMLHeadingElement>(
@@ -89,7 +91,7 @@
 
         // Only create an entry if the header has an ID and a title.
         if (id && title) {
-          const href = `${currentPathname}#${id}`;
+          const href = `${this.pagePathname}#${id}`;
 
           const tocEntry: TocEntry = {
             title,
@@ -103,6 +105,4 @@
 
     // TODO: Update ToC state within the component.
   }
-</script>
-
-<!-- TODO: Add contents. -->
+}
diff --git a/src/lib/data_structures/table_of_contents.ts b/src/lib/data_structures/table_of_contents.ts
deleted file mode 100644
index 8bf447f..0000000
--- a/src/lib/data_structures/table_of_contents.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export interface TocEntry {
-  title: string;
-  href: string;
-  expanded: boolean;
-  children: Array<TocEntry> | null;
-}