From 9e35d582050edc076ba8c7f91337de84e38b02eb Mon Sep 17 00:00:00 2001
From: buttercat1791 <mjjurkoic@gmail.com>
Date: Wed, 9 Apr 2025 09:08:15 -0500
Subject: [PATCH 01/22] Update heading snippet for commonality with Preview
 component

---
 src/lib/snippets/PublicationSnippets.svelte | 31 ++++-----------------
 1 file changed, 6 insertions(+), 25 deletions(-)

diff --git a/src/lib/snippets/PublicationSnippets.svelte b/src/lib/snippets/PublicationSnippets.svelte
index 26645fa..8f9e0cc 100644
--- a/src/lib/snippets/PublicationSnippets.svelte
+++ b/src/lib/snippets/PublicationSnippets.svelte
@@ -5,31 +5,12 @@
 </script>
 
 {#snippet sectionHeading(title: string, depth: number)}
-  {#if depth === 0}
-    <h1 class='h-leather'>
-      {title}
-    </h1>
-  {:else if depth === 1}
-    <h2 class='h-leather'>
-      {title}
-    </h2>
-  {:else if depth === 2}
-    <h3 class='h-leather'>
-      {title}
-    </h3>
-  {:else if depth === 3}
-    <h4 class='h-leather'>
-      {title}
-    </h4>
-  {:else if depth === 4}
-    <h5 class='h-leather'>
-      {title}
-    </h5>
-  {:else}
-    <h6 class='h-leather'>
-      {title}
-    </h6>
-  {/if}
+  {@const headingLevel = Math.min(depth + 1, 6)}
+
+  <!-- TODO: Handle floating titles. -->
+  <svelte:element this={`h${headingLevel}`} class='h-leather'>
+    {title}
+  </svelte:element>
 {/snippet}
 
 {#snippet contentParagraph(content: string, publicationType: string, isSectionStart: boolean)}

From 5486c7368576acfb57d6c45b1b27ee8c4c8aff6a Mon Sep 17 00:00:00 2001
From: buttercat1791 <mjjurkoic@gmail.com>
Date: Wed, 9 Apr 2025 09:16:41 -0500
Subject: [PATCH 02/22] Instanatiate PublicationTree and make it available to
 components

---
 src/app.d.ts                        | 5 +++++
 src/routes/publication/+page.svelte | 7 ++++++-
 src/routes/publication/+page.ts     | 1 +
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/app.d.ts b/src/app.d.ts
index 731967b..418205d 100644
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -1,4 +1,8 @@
 // See https://kit.svelte.dev/docs/types#app
+
+import NDK, { NDKEvent } from "@nostr-dev-kit/ndk";
+import Pharos from "./lib/parser.ts";
+
 // for information about these interfaces
 declare global {
   namespace App {
@@ -9,6 +13,7 @@ declare global {
       parser?: Pharos;
       waitable?: Promise<any>;
       publicationType?: string;
+      publicationRootEvent?: NDKEvent;
     }
     // interface Platform {}
   }
diff --git a/src/routes/publication/+page.svelte b/src/routes/publication/+page.svelte
index dbd673f..b566965 100644
--- a/src/routes/publication/+page.svelte
+++ b/src/routes/publication/+page.svelte
@@ -2,10 +2,15 @@
   import Article from "$lib/components/Publication.svelte";
   import { TextPlaceholder } from "flowbite-svelte";
   import type { PageData } from "./$types";
-  import { onDestroy } from "svelte";
+  import { onDestroy, setContext } from "svelte";
+  import { PublicationTree } from "$lib/data_structures/publication_tree";
 
   let { data }: { data: PageData } = $props();
 
+  const publicationTree = new PublicationTree(data.publicationRootEvent, data.ndk);
+
+  setContext('publicationTree', publicationTree);
+
   onDestroy(() => data.parser.reset());
 </script>
 
diff --git a/src/routes/publication/+page.ts b/src/routes/publication/+page.ts
index 286063a..72116ec 100644
--- a/src/routes/publication/+page.ts
+++ b/src/routes/publication/+page.ts
@@ -102,5 +102,6 @@ export const load: PageLoad = async ({ url, parent }: { url: URL; parent: () =>
   return {
     waitable: fetchPromise,
     publicationType,
+    publicationRootEvent: indexEvent,
   };
 };

From 5229e807c714c979bbfa307a4b5ffa89917d3fa4 Mon Sep 17 00:00:00 2001
From: buttercat1791 <mjjurkoic@gmail.com>
Date: Mon, 14 Apr 2025 08:57:50 -0500
Subject: [PATCH 03/22] Require SvelteKit >= 2.16.0

---
 deno.lock    | 2 +-
 package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/deno.lock b/deno.lock
index f113237..9438da1 100644
--- a/deno.lock
+++ b/deno.lock
@@ -2887,7 +2887,7 @@
         "npm:@sveltejs/adapter-auto@3",
         "npm:@sveltejs/adapter-node@^5.2.12",
         "npm:@sveltejs/adapter-static@3",
-        "npm:@sveltejs/kit@2",
+        "npm:@sveltejs/kit@^2.16.0",
         "npm:@sveltejs/vite-plugin-svelte@4",
         "npm:@tailwindcss/forms@0.5",
         "npm:@tailwindcss/typography@0.5",
diff --git a/package.json b/package.json
index 2323efa..ca9cd67 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
     "@sveltejs/adapter-auto": "3.x",
     "@sveltejs/adapter-node": "^5.2.12",
     "@sveltejs/adapter-static": "3.x",
-    "@sveltejs/kit": "2.x",
+    "@sveltejs/kit": "^2.16.0",
     "@sveltejs/vite-plugin-svelte": "4.x",
     "@types/he": "1.2.x",
     "@types/node": "22.x",

From c63360d1f0b8b43decf23197c6d26dbd9c70b5f6 Mon Sep 17 00:00:00 2001
From: buttercat1791 <mjjurkoic@gmail.com>
Date: Mon, 14 Apr 2025 09:05:56 -0500
Subject: [PATCH 04/22] Update publication page load data handling

---
 src/app.d.ts                        |  3 ++-
 src/routes/publication/+page.svelte | 17 ++++-------------
 src/routes/publication/+page.ts     |  3 ++-
 3 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/src/app.d.ts b/src/app.d.ts
index 418205d..10e50ba 100644
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -13,7 +13,8 @@ declare global {
       parser?: Pharos;
       waitable?: Promise<any>;
       publicationType?: string;
-      publicationRootEvent?: NDKEvent;
+      indexEvent?: NDKEvent;
+      url?: URL;
     }
     // interface Platform {}
   }
diff --git a/src/routes/publication/+page.svelte b/src/routes/publication/+page.svelte
index e6f532d..032b2f3 100644
--- a/src/routes/publication/+page.svelte
+++ b/src/routes/publication/+page.svelte
@@ -1,28 +1,19 @@
 <script lang="ts">
   import Article from "$lib/components/Publication.svelte";
   import { TextPlaceholder } from "flowbite-svelte";
-  import type { PageData } from "./$types";
+  import type { PageProps } from "./$types";
   import { onDestroy, setContext } from "svelte";
   import { PublicationTree } from "$lib/data_structures/publication_tree";
-  import { page } from "$app/stores";
 
-  // Extend the PageData type with the properties we need
-  interface ExtendedPageData extends PageData {
-    waitable: Promise<any>;
-    publicationType: string;
-    indexEvent: NDKEvent;
-    parser: any;
-  }
+  let { data }: PageProps = $props();
 
-  const publicationTree = new PublicationTree(data.publicationRootEvent, data.ndk);
+  const publicationTree = new PublicationTree(data.indexEvent, data.ndk);
 
   setContext('publicationTree', publicationTree);
 
-  let { data } = $props<{ data: ExtendedPageData }>();
-
   // Get publication metadata for OpenGraph tags
   let title = $derived(data.indexEvent?.getMatchingTags('title')[0]?.[1] || data.parser?.getIndexTitle(data.parser?.getRootIndexId()) || 'Alexandria Publication');
-  let currentUrl = $page.url.href;
+  let currentUrl = data.url?.href ?? '';
   
   // Get image and summary from the event tags if available
   // If image unavailable, use the Alexandria default pic.
diff --git a/src/routes/publication/+page.ts b/src/routes/publication/+page.ts
index 56b7fd1..e3d6bf5 100644
--- a/src/routes/publication/+page.ts
+++ b/src/routes/publication/+page.ts
@@ -2,7 +2,7 @@ import { error } from '@sveltejs/kit';
 import type { Load } from '@sveltejs/kit';
 import type { NDKEvent } from '@nostr-dev-kit/ndk';
 import { nip19 } from 'nostr-tools';
-import { getActiveRelays } from '$lib/ndk.ts';
+import { getActiveRelays } from '$lib/ndk';
 
 /**
  * Decodes an naddr identifier and returns a filter object
@@ -103,5 +103,6 @@ export const load: Load = async ({ url, parent }: { url: URL; parent: () => Prom
     waitable: fetchPromise,
     publicationType,
     indexEvent,
+    url,
   };
 };

From b27a7d2c281e471c8911ee93013f0707c21cb5b3 Mon Sep 17 00:00:00 2001
From: buttercat1791 <mjjurkoic@gmail.com>
Date: Mon, 14 Apr 2025 09:14:23 -0500
Subject: [PATCH 05/22] Article -> Publication in component tag

---
 src/routes/publication/+page.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/publication/+page.svelte b/src/routes/publication/+page.svelte
index 032b2f3..b936814 100644
--- a/src/routes/publication/+page.svelte
+++ b/src/routes/publication/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Article from "$lib/components/Publication.svelte";
+  import Publication from "$lib/components/Publication.svelte";
   import { TextPlaceholder } from "flowbite-svelte";
   import type { PageProps } from "./$types";
   import { onDestroy, setContext } from "svelte";
@@ -47,7 +47,7 @@
   {#await data.waitable}
     <TextPlaceholder divClass='skeleton-leather w-full' size="xxl" />
   {:then}
-  <Article 
+    <Publication 
       rootId={data.parser.getRootIndexId()} 
       publicationType={data.publicationType} 
       indexEvent={data.indexEvent} 

From b199ab1e507ccd95145cc6be18ed6391d32ee5ee Mon Sep 17 00:00:00 2001
From: buttercat1791 <mjjurkoic@gmail.com>
Date: Mon, 14 Apr 2025 09:29:52 -0500
Subject: [PATCH 06/22] Begin to move off of `<Preview>` and onto
 `<PublicationSection>`

---
 src/lib/components/Publication.svelte        |  4 ++-
 src/lib/components/PublicationSection.svelte | 28 ++++++++++++++++++++
 2 files changed, 31 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/components/PublicationSection.svelte

diff --git a/src/lib/components/Publication.svelte b/src/lib/components/Publication.svelte
index e61cbb3..4ff9c7c 100644
--- a/src/lib/components/Publication.svelte
+++ b/src/lib/components/Publication.svelte
@@ -16,6 +16,7 @@
   import { page } from "$app/state";
   import { ndkInstance } from "$lib/ndk";
   import type { NDKEvent } from "@nostr-dev-kit/ndk";
+  import PublicationSection from "./PublicationSection.svelte";
 
   let { rootId, publicationType, indexEvent } = $props<{ 
     rootId: string, 
@@ -131,7 +132,8 @@
   </Sidebar>
 {/if} -->
 <div class="flex flex-col space-y-4 max-w-2xl">
-  <Preview {rootId} {publicationType} />
+  <!-- TODO: Pass in the correct address for each section. -->
+  <PublicationSection rootAddress={rootId} address={''} />
 </div>
 
 <style>
diff --git a/src/lib/components/PublicationSection.svelte b/src/lib/components/PublicationSection.svelte
new file mode 100644
index 0000000..39f0c12
--- /dev/null
+++ b/src/lib/components/PublicationSection.svelte
@@ -0,0 +1,28 @@
+<script lang='ts'>
+  import type { PublicationTree } from "$lib/data_structures/publication_tree";
+  import { contentParagraph } from "$lib/snippets/PublicationSnippets.svelte";
+  import { TextPlaceholder } from "flowbite-svelte";
+  import { getContext } from "svelte";
+
+  let { address, rootAddress }: { address: string, rootAddress: string } = $props();
+
+  const publicationTree = getContext<PublicationTree>('publicationTree');
+
+  let sectionEvent = $derived.by(async () => await publicationTree.getEvent(address));
+  let rootEvent = $derived.by(async () => await publicationTree.getEvent(rootAddress));
+  let publicationType = $derived.by(async () =>
+    (await rootEvent)?.getMatchingTags('type')[0]?.[1]);
+  let hierarchy = $derived.by(async () => await publicationTree.getHierarchy(address));
+  let depth = $derived.by(async () => (await hierarchy).length);
+</script>
+
+<!-- TODO: Correctly handle events that are the start of a content section. -->
+<section>
+  {#await Promise.all([sectionEvent, publicationType])}
+    <TextPlaceholder size='xxl' />
+  {:then [sectionEvent, publicationType]}
+    <!-- TODO: Gracefully handle nulls. -->
+    {@render contentParagraph(sectionEvent?.content ?? '', publicationType ?? 'article', false)}
+  {/await}
+</section>
+

From 46f61da01dbcae8dc51630246dc0332798c02035 Mon Sep 17 00:00:00 2001
From: buttercat1791 <mjjurkoic@gmail.com>
Date: Mon, 14 Apr 2025 23:11:57 -0500
Subject: [PATCH 07/22] Begin to implement import on visibility for publication
 content

---
 src/lib/components/Publication.svelte        | 82 ++++++++++++++++----
 src/lib/components/PublicationSection.svelte | 22 +++++-
 src/routes/publication/+page.svelte          |  6 +-
 3 files changed, 92 insertions(+), 18 deletions(-)

diff --git a/src/lib/components/Publication.svelte b/src/lib/components/Publication.svelte
index 4ff9c7c..167cf67 100644
--- a/src/lib/components/Publication.svelte
+++ b/src/lib/components/Publication.svelte
@@ -9,25 +9,64 @@
     TextPlaceholder,
     Tooltip,
   } from "flowbite-svelte";
-  import { onMount } from "svelte";
+  import { getContext, onMount } from "svelte";
   import { BookOutline } from "flowbite-svelte-icons";
-  import Preview from "./Preview.svelte";
-  import { pharosInstance } from "$lib/parser";
   import { page } from "$app/state";
-  import { ndkInstance } from "$lib/ndk";
   import type { NDKEvent } from "@nostr-dev-kit/ndk";
   import PublicationSection from "./PublicationSection.svelte";
+  import type { PublicationTree } from "$lib/data_structures/publication_tree";
 
-  let { rootId, publicationType, indexEvent } = $props<{ 
-    rootId: string, 
+  let { rootAddress, publicationType, indexEvent } = $props<{ 
+    rootAddress: string, 
     publicationType: string,
     indexEvent: NDKEvent
   }>();
 
-  if (rootId !== $pharosInstance.getRootIndexId()) {
-    console.error("Root ID does not match parser root index ID");
+  const publicationTree = getContext('publicationTree') as PublicationTree;
+
+  // #region Loading
+
+  // TODO: Test load handling.
+
+  let leaves = $state<NDKEvent[]>([]);
+  let isLoading = $state<boolean>(false);
+  let lastElementRef = $state<HTMLElement | null>(null);
+
+  let observer: IntersectionObserver;
+
+  async function loadMore(count: number) {
+    isLoading = true;
+
+    for (let i = 0; i < count; i++) {
+      const nextItem = await publicationTree.next();
+      if (nextItem.done) {
+        break;
+      }
+      leaves.push(nextItem.value);
+    }
+
+    isLoading = false;
+  }
+
+  function setLastElementRef(el: HTMLElement, i: number) {
+    if (i === leaves.length - 1) {
+      lastElementRef = el;
+    }
   }
 
+  $effect(() => {
+    if (!lastElementRef) {
+      return;
+    }
+
+    observer.observe(lastElementRef!);
+    return () => observer.unobserve(lastElementRef!);
+  });
+
+  // #endregion
+
+  // #region ToC
+
   const tocBreakpoint = 1140;
 
   let activeHash = $state(page.url.hash);
@@ -82,21 +121,33 @@
     }
   }
 
+  // #endregion
+
   onMount(() => {
     // Always check whether the TOC sidebar should be visible.
     setTocVisibilityOnResize();
-
     window.addEventListener("hashchange", scrollToElementWithOffset);
     // Also handle the case where the user lands on the page with a hash in the URL
     scrollToElementWithOffset();
-
     window.addEventListener("resize", setTocVisibilityOnResize);
     window.addEventListener("click", hideTocOnClick);
 
+    // Set up the intersection observer.
+    observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting && !isLoading) {
+          loadMore(8);
+        }
+      });
+    }, { threshold: 0.5 });
+    loadMore(16);
+
     return () => {
       window.removeEventListener("hashchange", scrollToElementWithOffset);
       window.removeEventListener("resize", setTocVisibilityOnResize);
       window.removeEventListener("click", hideTocOnClick);
+
+      observer.disconnect();
     };
   });
 </script>
@@ -115,7 +166,7 @@
   </Button>
   <Tooltip>Show Table of Contents</Tooltip>
 {/if}
-<!-- TODO: Get TOC from parser. -->
+<!-- TODO: Use loader to build ToC. -->
 <!-- {#if showToc}
   <Sidebar class='sidebar-leather fixed top-20 left-0 px-4 w-60' {activeHash}>
     <SidebarWrapper>
@@ -132,8 +183,13 @@
   </Sidebar>
 {/if} -->
 <div class="flex flex-col space-y-4 max-w-2xl">
-  <!-- TODO: Pass in the correct address for each section. -->
-  <PublicationSection rootAddress={rootId} address={''} />
+  {#each leaves as leaf, i}
+    <PublicationSection
+      rootAddress={rootAddress}
+      address={leaf.tagAddress()}
+      ref={(el) => setLastElementRef(el, i)}
+    />
+  {/each}
 </div>
 
 <style>
diff --git a/src/lib/components/PublicationSection.svelte b/src/lib/components/PublicationSection.svelte
index 39f0c12..8dfa42f 100644
--- a/src/lib/components/PublicationSection.svelte
+++ b/src/lib/components/PublicationSection.svelte
@@ -4,7 +4,15 @@
   import { TextPlaceholder } from "flowbite-svelte";
   import { getContext } from "svelte";
 
-  let { address, rootAddress }: { address: string, rootAddress: string } = $props();
+  let {
+    address,
+    rootAddress,
+    ref,
+  }: {
+    address: string,
+    rootAddress: string,
+    ref: (ref: HTMLElement) => void,
+  } = $props();
 
   const publicationTree = getContext<PublicationTree>('publicationTree');
 
@@ -14,10 +22,20 @@
     (await rootEvent)?.getMatchingTags('type')[0]?.[1]);
   let hierarchy = $derived.by(async () => await publicationTree.getHierarchy(address));
   let depth = $derived.by(async () => (await hierarchy).length);
+
+  let sectionRef: HTMLElement;
+
+  $effect(() => {
+    if (!sectionRef) {
+      return;
+    }
+
+    ref(sectionRef);
+  })
 </script>
 
 <!-- TODO: Correctly handle events that are the start of a content section. -->
-<section>
+<section bind:this={sectionRef}>
   {#await Promise.all([sectionEvent, publicationType])}
     <TextPlaceholder size='xxl' />
   {:then [sectionEvent, publicationType]}
diff --git a/src/routes/publication/+page.svelte b/src/routes/publication/+page.svelte
index b936814..59fa70c 100644
--- a/src/routes/publication/+page.svelte
+++ b/src/routes/publication/+page.svelte
@@ -18,7 +18,7 @@
   // Get image and summary from the event tags if available
   // If image unavailable, use the Alexandria default pic.
   let image = $derived(data.indexEvent?.getMatchingTags('image')[0]?.[1] || '/screenshots/old_books.jpg');
-  let summary = $derived(data.indexEvent?.getMatchingTags('summary')[0]?.[1] || 'Alexandria is a digital library, utilizing Nostr events for curated publications and wiki pages.');
+  let summary = $derived(data.indexEvent?.getMatchingTags('summary')[0]?.[1] || 'Alexandria is a digital library, utilizing Nostr events for curated publications and wiki pages.');  
 
   onDestroy(() => data.parser.reset());
 </script>
@@ -48,9 +48,9 @@
     <TextPlaceholder divClass='skeleton-leather w-full' size="xxl" />
   {:then}
     <Publication 
-      rootId={data.parser.getRootIndexId()} 
+      rootAddress={data.indexEvent.tagAddress()} 
       publicationType={data.publicationType} 
-      indexEvent={data.indexEvent} 
+      indexEvent={data.indexEvent}
     />
   {/await}
 </main>

From b383dd0b0cae128de5eea889d8d9bc5989388d38 Mon Sep 17 00:00:00 2001
From: buttercat1791 <mjjurkoic@gmail.com>
Date: Tue, 15 Apr 2025 09:31:43 -0500
Subject: [PATCH 08/22] Remove PageData typings for NDK and Pharos

Those should be shared among client-side components with `setContext` and `getContext`.
---
 src/app.d.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/app.d.ts b/src/app.d.ts
index 10e50ba..1b260cf 100644
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -9,8 +9,6 @@ declare global {
     // interface Error {}
     // interface Locals {}
     interface PageData {
-      ndk?: NDK;
-      parser?: Pharos;
       waitable?: Promise<any>;
       publicationType?: string;
       indexEvent?: NDKEvent;

From 03612ad6de7a63869353d645db5c71e1ee5da2e2 Mon Sep 17 00:00:00 2001
From: buttercat1791 <mjjurkoic@gmail.com>
Date: Tue, 15 Apr 2025 09:32:43 -0500
Subject: [PATCH 09/22] Render publication content and headers

Incomplete.  Some headers are still missing, and we don't yet gracefully handle events that can't be found.
---
 src/lib/components/Publication.svelte        | 10 ++-
 src/lib/components/PublicationSection.svelte | 84 +++++++++++++++++---
 src/routes/publication/+page.svelte          |  2 +
 3 files changed, 79 insertions(+), 17 deletions(-)

diff --git a/src/lib/components/Publication.svelte b/src/lib/components/Publication.svelte
index 167cf67..8bcf5a4 100644
--- a/src/lib/components/Publication.svelte
+++ b/src/lib/components/Publication.svelte
@@ -39,8 +39,9 @@
 
     for (let i = 0; i < count; i++) {
       const nextItem = await publicationTree.next();
-      if (nextItem.done) {
-        break;
+      if (leaves.includes(nextItem.value) || nextItem.done) {
+        isLoading = false;
+        return;
       }
       leaves.push(nextItem.value);
     }
@@ -136,11 +137,11 @@
     observer = new IntersectionObserver((entries) => {
       entries.forEach((entry) => {
         if (entry.isIntersecting && !isLoading) {
-          loadMore(8);
+          loadMore(4);
         }
       });
     }, { threshold: 0.5 });
-    loadMore(16);
+    loadMore(8);
 
     return () => {
       window.removeEventListener("hashchange", scrollToElementWithOffset);
@@ -186,6 +187,7 @@
   {#each leaves as leaf, i}
     <PublicationSection
       rootAddress={rootAddress}
+      leaves={leaves}
       address={leaf.tagAddress()}
       ref={(el) => setLastElementRef(el, i)}
     />
diff --git a/src/lib/components/PublicationSection.svelte b/src/lib/components/PublicationSection.svelte
index 8dfa42f..0ea64f1 100644
--- a/src/lib/components/PublicationSection.svelte
+++ b/src/lib/components/PublicationSection.svelte
@@ -1,27 +1,82 @@
 <script lang='ts'>
   import type { PublicationTree } from "$lib/data_structures/publication_tree";
-  import { contentParagraph } from "$lib/snippets/PublicationSnippets.svelte";
+  import { contentParagraph, sectionHeading } from "$lib/snippets/PublicationSnippets.svelte";
+  import { NDKEvent } from "@nostr-dev-kit/ndk";
   import { TextPlaceholder } from "flowbite-svelte";
   import { getContext } from "svelte";
-
+  import type { Asciidoctor, Document } from "asciidoctor";
   let {
     address,
     rootAddress,
+    leaves,
     ref,
   }: {
     address: string,
     rootAddress: string,
+    leaves: NDKEvent[],
     ref: (ref: HTMLElement) => void,
   } = $props();
 
-  const publicationTree = getContext<PublicationTree>('publicationTree');
+  const publicationTree: PublicationTree = getContext('publicationTree');
+  const asciidoctor: Asciidoctor = getContext('asciidoctor');
 
-  let sectionEvent = $derived.by(async () => await publicationTree.getEvent(address));
-  let rootEvent = $derived.by(async () => await publicationTree.getEvent(rootAddress));
-  let publicationType = $derived.by(async () =>
+  let leafEvent: Promise<NDKEvent | null> = $derived.by(async () =>
+    await publicationTree.getEvent(address));
+  let rootEvent: Promise<NDKEvent | null> = $derived.by(async () =>
+    await publicationTree.getEvent(rootAddress));
+  let publicationType: Promise<string | undefined> = $derived.by(async () =>
     (await rootEvent)?.getMatchingTags('type')[0]?.[1]);
-  let hierarchy = $derived.by(async () => await publicationTree.getHierarchy(address));
-  let depth = $derived.by(async () => (await hierarchy).length);
+  let leafHierarchy: Promise<NDKEvent[]> = $derived.by(async () =>
+    await publicationTree.getHierarchy(address));
+  let leafContent: Promise<string | Document> = $derived.by(async () =>
+    asciidoctor.convert((await leafEvent)?.content ?? ''));
+
+  let previousLeafEvent: NDKEvent | null = $derived.by(() => {
+    const index = leaves.findIndex(leaf => leaf.tagAddress() === address);
+    if (index === 0) {
+      return null;
+    }
+    return leaves[index - 1];
+  });
+  let previousLeafHierarchy: Promise<NDKEvent[] | null> = $derived.by(async () => {
+    const previousLeaf = await previousLeafEvent;
+    if (!previousLeaf) {
+      return null;
+    }
+    return await publicationTree.getHierarchy(previousLeafEvent?.tagAddress() ?? '')
+  });
+
+  let divergingBranches = $derived.by(async () => {
+    const currentHierarchy = await leafHierarchy;
+    const previousHierarchy = await previousLeafHierarchy;
+    
+    const branches: [NDKEvent, number][] = [];
+
+    if (!previousHierarchy) {
+      for (let i = 0; i < currentHierarchy.length - 1; i++) {
+        branches.push([currentHierarchy[i], i]);
+      }
+      return branches;
+    }
+
+    const minLength = Math.min(currentHierarchy.length, previousHierarchy.length);
+    
+    // Find the first diverging node.
+    let divergingIndex = 0;
+    while (
+      divergingIndex < minLength && 
+      currentHierarchy[divergingIndex].tagAddress() === previousHierarchy[divergingIndex].tagAddress()
+    ) {
+      divergingIndex++;
+    }
+    
+    // Add all branches from the first diverging node to the current leaf.
+    for (let i = divergingIndex; i < currentHierarchy.length - 1; i++) {
+      branches.push([currentHierarchy[i], i]);
+    }
+    
+    return branches;
+  });
 
   let sectionRef: HTMLElement;
 
@@ -31,16 +86,19 @@
     }
 
     ref(sectionRef);
-  })
+  });
 </script>
 
 <!-- TODO: Correctly handle events that are the start of a content section. -->
 <section bind:this={sectionRef}>
-  {#await Promise.all([sectionEvent, publicationType])}
+  {#await Promise.all([leafContent, publicationType, divergingBranches])}
     <TextPlaceholder size='xxl' />
-  {:then [sectionEvent, publicationType]}
-    <!-- TODO: Gracefully handle nulls. -->
-    {@render contentParagraph(sectionEvent?.content ?? '', publicationType ?? 'article', false)}
+  {:then [leafContent, publicationType, divergingBranches]}
+    <!-- TODO: Ensure we render all headings, not just the first one. -->
+    {#each divergingBranches as [branch, depth]}
+      {@render sectionHeading(branch.getMatchingTags('title')[0]?.[1] ?? '', depth)}
+    {/each}
+    {@render contentParagraph(leafContent.toString(), publicationType ?? 'article', false)}
   {/await}
 </section>
 
diff --git a/src/routes/publication/+page.svelte b/src/routes/publication/+page.svelte
index 59fa70c..9e9bf1d 100644
--- a/src/routes/publication/+page.svelte
+++ b/src/routes/publication/+page.svelte
@@ -4,12 +4,14 @@
   import type { PageProps } from "./$types";
   import { onDestroy, setContext } from "svelte";
   import { PublicationTree } from "$lib/data_structures/publication_tree";
+  import Processor from "asciidoctor";
 
   let { data }: PageProps = $props();
 
   const publicationTree = new PublicationTree(data.indexEvent, data.ndk);
 
   setContext('publicationTree', publicationTree);
+  setContext('asciidoctor', Processor());
 
   // Get publication metadata for OpenGraph tags
   let title = $derived(data.indexEvent?.getMatchingTags('title')[0]?.[1] || data.parser?.getIndexTitle(data.parser?.getRootIndexId()) || 'Alexandria Publication');

From 1a178929424ceeb292a86bc6a9a089c5d283db4e Mon Sep 17 00:00:00 2001
From: Silberengel <silberengel7@protonmail.com>
Date: Fri, 18 Apr 2025 17:49:55 +0200
Subject: [PATCH 10/22] Fixes #217

Adds zoom and centering buttons. Implements D3 properly and updates everything to Svelte 5 and CSS styles.
---
 package-lock.json                             | 292 +++++++++
 package.json                                  |   1 +
 src/app.css                                   |  16 +-
 src/lib/navigator/EventNetwork/Legend.svelte  |  49 +-
 .../navigator/EventNetwork/NodeTooltip.svelte | 112 ++--
 src/lib/navigator/EventNetwork/index.svelte   | 605 ++++++++++++------
 src/lib/navigator/EventNetwork/types.ts       |  94 ++-
 .../EventNetwork/utils/forceSimulation.ts     | 215 +++++--
 .../EventNetwork/utils/networkBuilder.ts      | 182 +++++-
 src/routes/visualize/+page.svelte             |  95 ++-
 src/styles/visualize.css                      |  81 ++-
 src/types/d3.d.ts                             |  19 +
 12 files changed, 1407 insertions(+), 354 deletions(-)
 create mode 100644 src/types/d3.d.ts

diff --git a/package-lock.json b/package-lock.json
index d447e7a..59e5f20 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,6 +25,7 @@
         "@sveltejs/adapter-static": "3.x",
         "@sveltejs/kit": "2.x",
         "@sveltejs/vite-plugin-svelte": "4.x",
+        "@types/d3": "^7.4.3",
         "@types/he": "1.2.x",
         "@types/node": "22.x",
         "autoprefixer": "10.x",
@@ -1531,6 +1532,290 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/d3": {
+      "version": "7.4.3",
+      "resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.3.tgz",
+      "integrity": "sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-array": "*",
+        "@types/d3-axis": "*",
+        "@types/d3-brush": "*",
+        "@types/d3-chord": "*",
+        "@types/d3-color": "*",
+        "@types/d3-contour": "*",
+        "@types/d3-delaunay": "*",
+        "@types/d3-dispatch": "*",
+        "@types/d3-drag": "*",
+        "@types/d3-dsv": "*",
+        "@types/d3-ease": "*",
+        "@types/d3-fetch": "*",
+        "@types/d3-force": "*",
+        "@types/d3-format": "*",
+        "@types/d3-geo": "*",
+        "@types/d3-hierarchy": "*",
+        "@types/d3-interpolate": "*",
+        "@types/d3-path": "*",
+        "@types/d3-polygon": "*",
+        "@types/d3-quadtree": "*",
+        "@types/d3-random": "*",
+        "@types/d3-scale": "*",
+        "@types/d3-scale-chromatic": "*",
+        "@types/d3-selection": "*",
+        "@types/d3-shape": "*",
+        "@types/d3-time": "*",
+        "@types/d3-time-format": "*",
+        "@types/d3-timer": "*",
+        "@types/d3-transition": "*",
+        "@types/d3-zoom": "*"
+      }
+    },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
+      "integrity": "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-axis": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-3.0.6.tgz",
+      "integrity": "sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-brush": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-3.0.6.tgz",
+      "integrity": "sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-chord": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-chord/-/d3-chord-3.0.6.tgz",
+      "integrity": "sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-contour": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-contour/-/d3-contour-3.0.6.tgz",
+      "integrity": "sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-array": "*",
+        "@types/geojson": "*"
+      }
+    },
+    "node_modules/@types/d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-dispatch": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-3.0.6.tgz",
+      "integrity": "sha512-4fvZhzMeeuBJYZXRXrRIQnvUYfyXwYmLsdiN7XXmVNQKKw1cM8a5WdID0g1hVFZDqT9ZqZEY5pD44p24VS7iZQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-drag": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.7.tgz",
+      "integrity": "sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-dsv": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-3.0.7.tgz",
+      "integrity": "sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-fetch": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-fetch/-/d3-fetch-3.0.7.tgz",
+      "integrity": "sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-dsv": "*"
+      }
+    },
+    "node_modules/@types/d3-force": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-3.0.10.tgz",
+      "integrity": "sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-format": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.4.tgz",
+      "integrity": "sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-geo": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.1.0.tgz",
+      "integrity": "sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
+    "node_modules/@types/d3-hierarchy": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.1.7.tgz",
+      "integrity": "sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-polygon": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-polygon/-/d3-polygon-3.0.2.tgz",
+      "integrity": "sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-quadtree": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-quadtree/-/d3-quadtree-3.0.6.tgz",
+      "integrity": "sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-random": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-3.0.3.tgz",
+      "integrity": "sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-selection": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.11.tgz",
+      "integrity": "sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.7.tgz",
+      "integrity": "sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-time-format": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-4.0.3.tgz",
+      "integrity": "sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-transition": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.9.tgz",
+      "integrity": "sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-zoom": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.8.tgz",
+      "integrity": "sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-interpolate": "*",
+        "@types/d3-selection": "*"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
@@ -1538,6 +1823,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.16",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
+      "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/he": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/@types/he/-/he-1.2.3.tgz",
diff --git a/package.json b/package.json
index 2323efa..eab2229 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "@sveltejs/adapter-static": "3.x",
     "@sveltejs/kit": "2.x",
     "@sveltejs/vite-plugin-svelte": "4.x",
+    "@types/d3": "^7.4.3",
     "@types/he": "1.2.x",
     "@types/node": "22.x",
     "autoprefixer": "10.x",
diff --git a/src/app.css b/src/app.css
index 011ebd9..235f36b 100644
--- a/src/app.css
+++ b/src/app.css
@@ -190,6 +190,8 @@
   .ul-leather li a {
     @apply text-gray-800 hover:text-primary-400 dark:text-gray-300 dark:hover:text-primary-500;
   }
+  
+  /* Network visualization */
   .network-link-leather {
     @apply stroke-gray-400 fill-gray-400;
   }
@@ -202,11 +204,23 @@
 }
 
 @layer components {
+  /* Legend */
   .leather-legend {
     @apply flex-shrink-0 p-4 bg-primary-0 dark:bg-primary-1000 rounded-lg shadow
            border border-gray-200 dark:border-gray-800;
   }
+  
+  /* Tooltip */
   .tooltip-leather {
-    @apply bg-primary-0 dark:bg-primary-1000 text-gray-800 dark:text-gray-300;
+    @apply fixed p-4 rounded shadow-lg bg-primary-0 dark:bg-primary-1000 
+           text-gray-800 dark:text-gray-300 border border-gray-200 dark:border-gray-700 
+           transition-colors duration-200;
+    max-width: 400px;
+    z-index: 1000;
+  }
+  
+  /* Heading for leather components */
+  h3.h-leather {
+    @apply text-gray-800 dark:text-gray-200 text-lg font-bold mb-2;
   }
 }
diff --git a/src/lib/navigator/EventNetwork/Legend.svelte b/src/lib/navigator/EventNetwork/Legend.svelte
index fe88aac..76be770 100644
--- a/src/lib/navigator/EventNetwork/Legend.svelte
+++ b/src/lib/navigator/EventNetwork/Legend.svelte
@@ -1,30 +1,61 @@
+<!--
+  Legend Component
+  
+  Displays a legend explaining the different node and link types in the
+  event network visualization.
+-->
 <script lang="ts">
+  // Optional class name to apply to the legend container
   export let className: string = "";
 </script>
 
 <div class="leather-legend {className}">
-  <h3 class="text-lg font-bold mb-2 h-leather">Legend</h3>
+  <h3 class="h-leather">Legend</h3>
   <ul class="legend-list">
+    <!-- Index event node -->
     <li class="legend-item">
       <div class="legend-icon">
-        <span class="legend-circle" style="background-color: hsl(200, 70%, 75%)">
+        <span 
+          class="legend-circle" 
+          style="background-color: hsl(200, 70%, 75%)"
+        >
+          <span class="legend-letter">I</span>
         </span>
-        <span class="legend-letter">I</span>
       </div>
-      <span>Index events (kind 30040) - Each with a unique pastel color</span>
+      <span class="legend-text">Index events (kind 30040) - Each with a unique pastel color</span>
     </li>
+    
+    <!-- Content event node -->
     <li class="legend-item">
       <div class="legend-icon">
-        <span class="legend-circle content"></span>
-        <span class="legend-letter">C</span>
+        <span class="legend-circle content">
+          <span class="legend-letter">C</span>
+        </span>
       </div>
-      <span>Content events (kinds 30041, 30818) - Publication sections</span>
+      <span class="legend-text">Content events (kinds 30041, 30818) - Publication sections</span>
     </li>
+    
+    <!-- Link arrow -->
     <li class="legend-item">
       <svg class="w-6 h-6 mr-2" viewBox="0 0 24 24">
-        <path d="M4 12h16M16 6l6 6-6 6" class="network-link-leather" />
+        <path 
+          d="M4 12h16M16 6l6 6-6 6" 
+          class="network-link-leather" 
+          stroke-width="2"
+          fill="none"
+        />
       </svg>
-      <span>Arrows indicate reading/sequence order</span>
+      <span class="legend-text">Arrows indicate reading/sequence order</span>
     </li>
   </ul>
 </div>
+
+<style>
+  .legend-circle.content {
+    background-color: var(--content-color, #d6c1a8);
+  }
+  
+  :global(.dark) .legend-circle.content {
+    background-color: var(--content-color-dark, #FFFFFF);
+  }
+</style>
diff --git a/src/lib/navigator/EventNetwork/NodeTooltip.svelte b/src/lib/navigator/EventNetwork/NodeTooltip.svelte
index cb6f779..4aedc8e 100644
--- a/src/lib/navigator/EventNetwork/NodeTooltip.svelte
+++ b/src/lib/navigator/EventNetwork/NodeTooltip.svelte
@@ -1,20 +1,33 @@
+<!--
+  NodeTooltip Component
+  
+  Displays detailed information about a node when hovering or clicking on it
+  in the event network visualization.
+-->
 <script lang="ts">
   import type { NetworkNode } from "./types";
-  import { onMount, createEventDispatcher } from "svelte";
+  import { onMount } from "svelte";
   
-  let { node, selected = false, x, y } = $props<{
-    node: NetworkNode;
-    selected?: boolean;
-    x: number;
-    y: number;
+  // Component props
+  let { node, selected = false, x, y, onclose } = $props<{
+    node: NetworkNode;       // The node to display information for
+    selected?: boolean;      // Whether the node is selected (clicked)
+    x: number;               // X position for the tooltip
+    y: number;               // Y position for the tooltip
+    onclose: () => void;     // Function to call when closing the tooltip
   }>();
   
-  const dispatch = createEventDispatcher();
-  
+  // DOM reference and positioning
   let tooltipElement: HTMLDivElement;
-  let tooltipX = $state(x + 10);
+  let tooltipX = $state(x + 10); // Add offset to avoid cursor overlap
   let tooltipY = $state(y - 10);
   
+  // Maximum content length to display
+  const MAX_CONTENT_LENGTH = 200;
+  
+  /**
+   * Gets the author name from the event tags
+   */
   function getAuthorTag(node: NetworkNode): string {
     if (node.event) {
       const authorTags = node.event.getMatchingTags("author");
@@ -25,6 +38,9 @@
     return "Unknown";
   }
   
+  /**
+   * Gets the summary from the event tags
+   */
   function getSummaryTag(node: NetworkNode): string | null {
     if (node.event) {
       const summaryTags = node.event.getMatchingTags("summary");
@@ -35,6 +51,9 @@
     return null;
   }
   
+  /**
+   * Gets the d-tag from the event
+   */
   function getDTag(node: NetworkNode): string {
     if (node.event) {
       const dTags = node.event.getMatchingTags("d");
@@ -45,40 +64,47 @@
     return "View Publication";
   }
   
-  function truncateContent(content: string, maxLength: number = 200): string {
+  /**
+   * Truncates content to a maximum length
+   */
+  function truncateContent(content: string, maxLength: number = MAX_CONTENT_LENGTH): string {
+    if (!content) return "";
     if (content.length <= maxLength) return content;
     return content.substring(0, maxLength) + "...";
   }
   
+  /**
+   * Closes the tooltip
+   */
   function closeTooltip() {
-    dispatch('close');
+    onclose();
   }
   
-  // Ensure tooltip is fully visible on screen
+  /**
+   * Ensures tooltip is fully visible on screen
+   */
   onMount(() => {
     if (tooltipElement) {
       const rect = tooltipElement.getBoundingClientRect();
       const windowWidth = window.innerWidth;
       const windowHeight = window.innerHeight;
+      const padding = 10; // Padding from window edges
       
-      // Check if tooltip goes off the right edge
+      // Adjust position if tooltip goes off screen
       if (rect.right > windowWidth) {
-        tooltipX = windowWidth - rect.width - 10;
+        tooltipX = windowWidth - rect.width - padding;
       }
       
-      // Check if tooltip goes off the bottom edge
       if (rect.bottom > windowHeight) {
-        tooltipY = windowHeight - rect.height - 10;
+        tooltipY = windowHeight - rect.height - padding;
       }
       
-      // Check if tooltip goes off the left edge
       if (rect.left < 0) {
-        tooltipX = 10;
+        tooltipX = padding;
       }
       
-      // Check if tooltip goes off the top edge
       if (rect.top < 0) {
-        tooltipY = 10;
+        tooltipY = padding;
       }
     }
   });
@@ -86,12 +112,12 @@
 
 <div
   bind:this={tooltipElement}
-  class="tooltip-leather fixed p-4 rounded shadow-lg bg-primary-0 dark:bg-primary-800
-         border border-gray-200 dark:border-gray-800 transition-colors duration-200"
-  style="left: {tooltipX}px; top: {tooltipY}px; z-index: 1000; max-width: 400px;"
+  class="tooltip-leather"
+  style="left: {tooltipX}px; top: {tooltipY}px;"
 >
+  <!-- Close button -->
   <button 
-    class="absolute top-2 left-2 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 rounded-full p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+    class="tooltip-close-btn"
     onclick={closeTooltip}
     aria-label="Close"
   >
@@ -99,34 +125,46 @@
       <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
     </svg>
   </button>
-  <div class="space-y-2 pl-6">
-    <div class="font-bold text-base">
-      <a href="/publication?id={node.id}" class="text-gray-800 hover:text-primary-400 dark:text-gray-300 dark:hover:text-primary-500">
-        {node.title}
+  
+  <!-- Tooltip content -->
+  <div class="tooltip-content">
+    <!-- Title with link -->
+    <div class="tooltip-title">
+      <a 
+        href="/publication?id={node.id}" 
+        class="tooltip-title-link"
+      >
+        {node.title || "Untitled"}
       </a>
     </div>
-    <div class="text-gray-600 dark:text-gray-400 text-sm">
-      {node.type} ({node.kind})
+    
+    <!-- Node type and kind -->
+    <div class="tooltip-metadata">
+      {node.type} (kind: {node.kind})
     </div>
-    <div class="text-gray-600 dark:text-gray-400 text-sm">
+    
+    <!-- Author -->
+    <div class="tooltip-metadata">
       Author: {getAuthorTag(node)}
     </div>
 
+    <!-- Summary (for index nodes) -->
     {#if node.isContainer && getSummaryTag(node)}
-      <div class="mt-2 text-xs bg-gray-100 dark:bg-gray-800 p-2 rounded overflow-auto max-h-40">
-        <span class="font-semibold">Summary:</span> {truncateContent(getSummaryTag(node) || "", 200)}
+      <div class="tooltip-summary">
+        <span class="font-semibold">Summary:</span> {truncateContent(getSummaryTag(node) || "")}
       </div>
     {/if}
 
+    <!-- Content preview -->
     {#if node.content}
-      <div
-        class="mt-2 text-xs bg-gray-100 dark:bg-gray-800 p-2 rounded overflow-auto max-h-40"
-      >
+      <div class="tooltip-content-preview">
         {truncateContent(node.content)}
       </div>
     {/if}
+    
+    <!-- Help text for selected nodes -->
     {#if selected}
-      <div class="mt-2 text-xs text-gray-500 dark:text-gray-400">
+      <div class="tooltip-help-text">
         Click node again to dismiss
       </div>
     {/if}
diff --git a/src/lib/navigator/EventNetwork/index.svelte b/src/lib/navigator/EventNetwork/index.svelte
index 6a7fa61..d43719a 100644
--- a/src/lib/navigator/EventNetwork/index.svelte
+++ b/src/lib/navigator/EventNetwork/index.svelte
@@ -1,40 +1,82 @@
-<!-- EventNetwork.svelte -->
+<!-- 
+  EventNetwork Component
+  
+  A force-directed graph visualization of Nostr events, showing the relationships
+  between index events and their content. This component handles the D3 force
+  simulation, SVG rendering, and user interactions.
+-->
 <script lang="ts">
   import { onMount } from "svelte";
   import * as d3 from "d3";
   import type { NDKEvent } from "@nostr-dev-kit/ndk";
   import { levelsToRender } from "$lib/state";
   import { generateGraph, getEventColor } from "./utils/networkBuilder";
-  import { createSimulation, setupDragHandlers, applyGlobalLogGravity, applyConnectedGravity } from "./utils/forceSimulation";
+  import { 
+    createSimulation, 
+    setupDragHandlers, 
+    applyGlobalLogGravity, 
+    applyConnectedGravity, 
+    type Simulation 
+  } from "./utils/forceSimulation";
   import Legend from "./Legend.svelte";
   import NodeTooltip from "./NodeTooltip.svelte";
   import type { NetworkNode, NetworkLink } from "./types";
-
+  
+  // Type alias for D3 selections
+  type Selection = any;
+
+  // Configuration
+  const DEBUG = false; // Set to true to enable debug logging
+  const NODE_RADIUS = 20;
+  const LINK_DISTANCE = 10;
+  const ARROW_DISTANCE = 10;
+  const CONTENT_COLOR_LIGHT = "#d6c1a8";
+  const CONTENT_COLOR_DARK = "#FFFFFF";
+  
+  /**
+   * Debug logging function that only logs when DEBUG is true
+   */
+  function debug(...args: any[]) {
+    if (DEBUG) {
+      console.log("[EventNetwork]", ...args);
+    }
+  }
+  
+  // Component props
   let { events = [] } = $props<{ events?: NDKEvent[] }>();
 
+  // Error state
+  let errorMessage = $state<string | null>(null);
+  let hasError = $derived(!!errorMessage);
+
+  // DOM references
   let svg: SVGSVGElement;
-  let isDarkMode = $state(false);
   let container: HTMLDivElement;
-
-  // Use a string ID for comparisons instead of the node object
+  
+  // Theme state
+  let isDarkMode = $state(false);
+  
+  // Tooltip state
   let selectedNodeId = $state<string | null>(null);
   let tooltipVisible = $state(false);
   let tooltipX = $state(0);
   let tooltipY = $state(0);
   let tooltipNode = $state<NetworkNode | null>(null);
 
-  const nodeRadius = 20;
-  const linkDistance = 10;
-  const arrowDistance = 10;
-
+  // Dimensions
   let width = $state(1000);
   let height = $state(600);
   let windowHeight = $state<number | undefined>(undefined);
+  let graphHeight = $derived(windowHeight ? Math.max(windowHeight * 0.2, 400) : 400);
   
-  let simulation: d3.Simulation<NetworkNode, NetworkLink> | null = null;
-  let svgGroup: d3.Selection<SVGGElement, unknown, null, undefined>;
+  // D3 objects
+  let simulation: Simulation<NetworkNode, NetworkLink> | null = null;
+  let svgGroup: Selection;
+  let zoomBehavior: any;
+  let svgElement: Selection;
 
-  let graphHeight = $derived(windowHeight ? Math.max(windowHeight * 0.2, 400) : 400);
+  // Track current render level
+  let currentLevels = $derived(levelsToRender);
 
   // Update dimensions when container changes
   $effect(() => {
@@ -44,32 +86,40 @@
     }
   });
 
-  // Track levelsToRender changes
-  let currentLevels = $derived(levelsToRender);
-
+  /**
+   * Initializes the SVG graph structure
+   * Sets up the SVG element, zoom behavior, and arrow marker
+   */
   function initializeGraph() {
-    if (!svg) return;
+    debug("Initializing graph");
+    if (!svg) {
+      debug("SVG element not found");
+      return;
+    }
 
+    debug("SVG dimensions", { width, height });
     const svgElement = d3.select(svg)
       .attr("viewBox", `0 0 ${width} ${height}`);
 
     // Clear existing content
     svgElement.selectAll("*").remove();
+    debug("Cleared SVG content");
 
     // Create main group for zoom
     svgGroup = svgElement.append("g");
+    debug("Created SVG group");
 
     // Set up zoom behavior
-    const zoom = d3
-      .zoom<SVGSVGElement, unknown>()
-      .scaleExtent([0.1, 9])
-      .on("zoom", (event) => {
+    zoomBehavior = d3
+      .zoom()
+      .scaleExtent([0.1, 9]) // Min/max zoom levels
+      .on("zoom", (event: any) => {
         svgGroup.attr("transform", event.transform);
       });
 
-    svgElement.call(zoom);
+    svgElement.call(zoomBehavior);
 
-    // Set up arrow marker
+    // Set up arrow marker for links
     const defs = svgElement.append("defs");
     defs
       .append("marker")
@@ -88,166 +138,248 @@
       .attr("stroke-width", 1);
   }
 
+  /**
+   * Updates the graph with new data
+   * Generates the graph from events, creates the simulation, and renders nodes and links
+   */
   function updateGraph() {
-    if (!svg || !events?.length || !svgGroup) return;
-
-    const { nodes, links } = generateGraph(events, Number(currentLevels));
-    if (!nodes.length) return;
-
-    // Stop any existing simulation
-    if (simulation) simulation.stop();
-
-    // Create new simulation
-    simulation = createSimulation(nodes, links, Number(nodeRadius), Number(linkDistance));
-    const dragHandler = setupDragHandlers(simulation);
-
-    // Update links
-    const link = svgGroup
-      .selectAll<SVGPathElement, NetworkLink>("path.link")
-      .data(links, d => `${d.source.id}-${d.target.id}`)
-      .join(
-        enter => enter
-          .append("path")
-          .attr("class", "link network-link-leather")
-          .attr("stroke-width", 2)
-          .attr("marker-end", "url(#arrowhead)"),
-        update => update,
-        exit => exit.remove()
-      );
-
-    // Update nodes
-    const node = svgGroup
-      .selectAll<SVGGElement, NetworkNode>("g.node")
-      .data(nodes, d => d.id)
-      .join(
-        enter => {
-          const nodeEnter = enter
-            .append("g")
-            .attr("class", "node network-node-leather")
-            .call(dragHandler);
-
-          nodeEnter
-            .append("circle")
-            .attr("class", "drag-circle")
-            .attr("r", nodeRadius * 2.5)
-            .attr("fill", "transparent")
-            .attr("stroke", "transparent")
-            .style("cursor", "move");
-
-          nodeEnter
-            .append("circle")
-            .attr("class", "visual-circle")
-            .attr("r", nodeRadius)
-            .attr("stroke-width", 2);
-
-          nodeEnter
-            .append("text")
-            .attr("dy", "0.35em")
-            .attr("text-anchor", "middle")
-            .attr("fill", "black")
-            .attr("font-size", "12px");
-
-          return nodeEnter;
-        },
-        update => update,
-        exit => exit.remove()
-      );
-
-    // Update node appearances
-    node.select("circle.visual-circle")
-      .attr("class", d => !d.isContainer
-        ? "visual-circle network-node-leather network-node-content"
-        : "visual-circle network-node-leather"
-      )
-      .attr("fill", d => !d.isContainer
-        ? isDarkMode ? "#FFFFFF" : "network-link-leather"
-        : getEventColor(d.id)
-      );
-
-    node.select("text")
-      .text(d => d.isContainer ? "I" : "C");
-
-    // Update node interactions
-    node
-      .on("mouseover", (event, d) => {
-        if (!selectedNodeId) {
-          tooltipVisible = true;
-          tooltipNode = d;
-          tooltipX = event.pageX;
-          tooltipY = event.pageY;
-        }
-      })
-      .on("mousemove", (event, d) => {
-        if (!selectedNodeId) {
-          tooltipX = event.pageX;
-          tooltipY = event.pageY;
-        }
-      })
-      .on("mouseout", () => {
-        if (!selectedNodeId) {
-          tooltipVisible = false;
-          tooltipNode = null;
-        }
-      })
-      .on("click", (event, d) => {
-        event.stopPropagation();
-        if (selectedNodeId === d.id) {
-          selectedNodeId = null;
-          tooltipVisible = false;
-          tooltipNode = d;
-          tooltipX = event.pageX;
-          tooltipY = event.pageY;
-        } else {
-          selectedNodeId = d.id;
-          tooltipVisible = true;
-          tooltipNode = d;
-          tooltipX = event.pageX;
-          tooltipY = event.pageY;
-        }
+    debug("Updating graph");
+    errorMessage = null;
+    
+    // Create variables to hold our selections
+    let link: any;
+    let node: any;
+    let dragHandler: any;
+    let nodes: NetworkNode[] = [];
+    let links: NetworkLink[] = [];
+    
+    try {
+      // Validate required elements
+      if (!svg) {
+        throw new Error("SVG element not found");
+      }
+      
+      if (!events?.length) {
+        throw new Error("No events to render");
+      }
+      
+      if (!svgGroup) {
+        throw new Error("SVG group not found");
+      }
+  
+      // Generate graph data from events
+      debug("Generating graph with events", { 
+        eventCount: events.length, 
+        currentLevels 
       });
-
-    // Handle simulation ticks
-    simulation.on("tick", () => {
-      nodes.forEach(node => {
-        applyGlobalLogGravity(node, width / 2, height / 2, simulation!.alpha());
-        applyConnectedGravity(node, links, simulation!.alpha());
+      
+      const graphData = generateGraph(events, Number(currentLevels));
+      nodes = graphData.nodes;
+      links = graphData.links;
+      
+      debug("Generated graph data", { 
+        nodeCount: nodes.length, 
+        linkCount: links.length 
       });
-
-      // Update positions
-      link.attr("d", d => {
-        const dx = d.target.x! - d.source.x!;
-        const dy = d.target.y! - d.source.y!;
-        const angle = Math.atan2(dy, dx);
-
-        const sourceGap = nodeRadius;
-        const targetGap = nodeRadius + arrowDistance;
-
-        const startX = d.source.x! + sourceGap * Math.cos(angle);
-        const startY = d.source.y! + sourceGap * Math.sin(angle);
-        const endX = d.target.x! - targetGap * Math.cos(angle);
-        const endY = d.target.y! - targetGap * Math.sin(angle);
-
-        return `M${startX},${startY}L${endX},${endY}`;
+      
+      if (!nodes.length) {
+        throw new Error("No nodes to render");
+      }
+  
+      // Stop any existing simulation
+      if (simulation) {
+        debug("Stopping existing simulation");
+        simulation.stop();
+      }
+  
+      // Create new simulation
+      debug("Creating new simulation");
+      simulation = createSimulation(nodes, links, NODE_RADIUS, LINK_DISTANCE);
+      
+      // Center the nodes when the simulation is done
+      simulation.on("end", () => {
+        centerGraph();
       });
-
-      node.attr("transform", d => `translate(${d.x},${d.y})`);
-    });
+      
+      // Create drag handler
+      dragHandler = setupDragHandlers(simulation);
+      
+      // Update links
+      debug("Updating links");
+      link = svgGroup
+        .selectAll("path.link")
+        .data(links, (d: NetworkLink) => `${d.source.id}-${d.target.id}`)
+        .join(
+          (enter: any) => enter
+            .append("path")
+            .attr("class", "link network-link-leather")
+            .attr("stroke-width", 2)
+            .attr("marker-end", "url(#arrowhead)"),
+          (update: any) => update,
+          (exit: any) => exit.remove()
+        );
+      
+      // Update nodes
+      debug("Updating nodes");
+      node = svgGroup
+        .selectAll("g.node")
+        .data(nodes, (d: NetworkNode) => d.id)
+        .join(
+          (enter: any) => {
+            const nodeEnter = enter
+              .append("g")
+              .attr("class", "node network-node-leather")
+              .call(dragHandler);
+
+            // Larger transparent circle for better drag handling
+            nodeEnter
+              .append("circle")
+              .attr("class", "drag-circle")
+              .attr("r", NODE_RADIUS * 2.5)
+              .attr("fill", "transparent")
+              .attr("stroke", "transparent")
+              .style("cursor", "move");
+
+            // Visible circle
+            nodeEnter
+              .append("circle")
+              .attr("class", "visual-circle")
+              .attr("r", NODE_RADIUS)
+              .attr("stroke-width", 2);
+
+            // Node label
+            nodeEnter
+              .append("text")
+              .attr("dy", "0.35em")
+              .attr("text-anchor", "middle")
+              .attr("fill", "black")
+              .attr("font-size", "12px");
+
+            return nodeEnter;
+          },
+          (update: any) => update,
+          (exit: any) => exit.remove()
+        );
+      
+      // Update node appearances
+      debug("Updating node appearances");
+      node.select("circle.visual-circle")
+        .attr("class", (d: NetworkNode) => !d.isContainer
+          ? "visual-circle network-node-leather network-node-content"
+          : "visual-circle network-node-leather"
+        )
+        .attr("fill", (d: NetworkNode) => !d.isContainer
+          ? isDarkMode ? CONTENT_COLOR_DARK : CONTENT_COLOR_LIGHT
+          : getEventColor(d.id)
+        );
+
+      node.select("text")
+        .text((d: NetworkNode) => d.isContainer ? "I" : "C");
+      
+      // Set up node interactions
+      debug("Setting up node interactions");
+      node
+        .on("mouseover", (event: any, d: NetworkNode) => {
+          if (!selectedNodeId) {
+            tooltipVisible = true;
+            tooltipNode = d;
+            tooltipX = event.pageX;
+            tooltipY = event.pageY;
+          }
+        })
+        .on("mousemove", (event: any) => {
+          if (!selectedNodeId) {
+            tooltipX = event.pageX;
+            tooltipY = event.pageY;
+          }
+        })
+        .on("mouseout", () => {
+          if (!selectedNodeId) {
+            tooltipVisible = false;
+            tooltipNode = null;
+          }
+        })
+        .on("click", (event: any, d: NetworkNode) => {
+          event.stopPropagation();
+          if (selectedNodeId === d.id) {
+            // Clicking the selected node again deselects it
+            selectedNodeId = null;
+            tooltipVisible = false;
+          } else {
+            // Select the node and show its tooltip
+            selectedNodeId = d.id;
+            tooltipVisible = true;
+            tooltipNode = d;
+            tooltipX = event.pageX;
+            tooltipY = event.pageY;
+          }
+        });
+      
+      // Set up simulation tick handler
+      debug("Setting up simulation tick handler");
+      if (simulation) {
+        simulation.on("tick", () => {
+          // Apply custom forces to each node
+          nodes.forEach(node => {
+            // Pull nodes toward the center
+            applyGlobalLogGravity(node, width / 2, height / 2, simulation!.alpha());
+            // Pull connected nodes toward each other
+            applyConnectedGravity(node, links, simulation!.alpha());
+          });
+
+          // Update link positions
+          link.attr("d", (d: NetworkLink) => {
+            // Calculate angle between source and target
+            const dx = d.target.x! - d.source.x!;
+            const dy = d.target.y! - d.source.y!;
+            const angle = Math.atan2(dy, dx);
+
+            // Calculate start and end points with offsets for node radius
+            const sourceGap = NODE_RADIUS;
+            const targetGap = NODE_RADIUS + ARROW_DISTANCE;
+
+            const startX = d.source.x! + sourceGap * Math.cos(angle);
+            const startY = d.source.y! + sourceGap * Math.sin(angle);
+            const endX = d.target.x! - targetGap * Math.cos(angle);
+            const endY = d.target.y! - targetGap * Math.sin(angle);
+
+            return `M${startX},${startY}L${endX},${endY}`;
+          });
+
+          // Update node positions
+          node.attr("transform", (d: NetworkNode) => `translate(${d.x},${d.y})`);
+        });
+      }
+    } catch (error) {
+      console.error("Error in updateGraph:", error);
+      errorMessage = `Error updating graph: ${error instanceof Error ? error.message : String(error)}`;
+    }
   }
 
+  /**
+   * Component lifecycle setup
+   */
   onMount(() => {
-    isDarkMode = document.body.classList.contains("dark");
-    
-    // Initialize the graph structure
-    initializeGraph();
+    debug("Component mounted");
+    try {
+      // Detect initial theme
+      isDarkMode = document.body.classList.contains("dark");
+      
+      // Initialize the graph structure
+      initializeGraph();
+    } catch (error) {
+      console.error("Error in onMount:", error);
+      errorMessage = `Error initializing graph: ${error instanceof Error ? error.message : String(error)}`;
+    }
     
-    // Handle window resizing
+    // Set up window resize handler
     const handleResize = () => {
       windowHeight = window.innerHeight;
     };
     windowHeight = window.innerHeight;
     window.addEventListener("resize", handleResize);
 
-    // Watch for theme changes
+    // Set up theme change observer
     const themeObserver = new MutationObserver((mutations) => {
       mutations.forEach((mutation) => {
         if (mutation.attributeName === "class") {
@@ -256,10 +388,10 @@
             isDarkMode = newIsDarkMode;
             // Update node colors when theme changes
             if (svgGroup) {
-              svgGroup.selectAll<SVGGElement, NetworkNode>("g.node")
+              svgGroup.selectAll("g.node")
                 .select("circle.visual-circle")
-                .attr("fill", d => !d.isContainer
-                  ? newIsDarkMode ? "#FFFFFF" : "network-link-leather"
+                .attr("fill", (d: NetworkNode) => !d.isContainer
+                  ? newIsDarkMode ? CONTENT_COLOR_DARK : CONTENT_COLOR_LIGHT
                   : getEventColor(d.id)
                 );
             }
@@ -268,6 +400,7 @@
       });
     });
 
+    // Set up container resize observer
     const resizeObserver = new ResizeObserver((entries) => {
       for (const entry of entries) {
         width = entry.contentRect.width;
@@ -275,19 +408,21 @@
       }
       if (svg) {
         d3.select(svg).attr("viewBox", `0 0 ${width} ${height}`);
-        // Trigger simulation to adjust to new dimensions
+        // Restart simulation with new dimensions
         if (simulation) {
           simulation.alpha(0.3).restart();
         }
       }
     });
 
+    // Start observers
     themeObserver.observe(document.documentElement, {
       attributes: true,
       attributeFilter: ["class"],
     });
     resizeObserver.observe(container);
     
+    // Clean up on component destruction
     return () => {
       themeObserver.disconnect();
       resizeObserver.disconnect();
@@ -296,29 +431,131 @@
     };
   });
 
-  // Watch for changes that should trigger a graph update
+  /**
+   * Watch for changes that should trigger a graph update
+   */
   $effect(() => {
-    if (svg && events?.length) {
-      // Include currentLevels in the effect dependencies
-      const _ = currentLevels;
-      updateGraph();
+    debug("Effect triggered", { 
+      hasSvg: !!svg, 
+      eventCount: events?.length, 
+      currentLevels 
+    });
+    
+    try {
+      if (svg && events?.length) {
+        // Include currentLevels in the effect dependencies
+        const _ = currentLevels;
+        updateGraph();
+      }
+    } catch (error) {
+      console.error("Error in effect:", error);
+      errorMessage = `Error updating graph: ${error instanceof Error ? error.message : String(error)}`;
     }
   });
   
+  /**
+   * Handles tooltip close event
+   */
   function handleTooltipClose() {
     tooltipVisible = false;
     selectedNodeId = null;
   }
+  
+  /**
+   * Centers the graph in the viewport
+   */
+  function centerGraph() {
+    if (svg && svgGroup && zoomBehavior) {
+      const svgWidth = svg.clientWidth || width;
+      const svgHeight = svg.clientHeight || height;
+      
+      // Reset zoom and center
+      d3.select(svg).transition().duration(750).call(
+        zoomBehavior.transform,
+        d3.zoomIdentity.translate(svgWidth / 2, svgHeight / 2).scale(0.8)
+      );
+    }
+  }
+  
+  /**
+   * Zooms in the graph
+   */
+  function zoomIn() {
+    if (svg && zoomBehavior) {
+      d3.select(svg).transition().duration(300).call(
+        zoomBehavior.scaleBy, 1.3
+      );
+    }
+  }
+  
+  /**
+   * Zooms out the graph
+   */
+  function zoomOut() {
+    if (svg && zoomBehavior) {
+      d3.select(svg).transition().duration(300).call(
+        zoomBehavior.scaleBy, 0.7
+      );
+    }
+  }
 </script>
 
-<div
-  class="flex flex-col w-full h-[calc(100vh-120px)] min-h-[400px] max-h-[900px] p-4 gap-4"
->
-  <div class="h-[calc(100%-130px)] min-h-[300px]" bind:this={container}>
+<div class="network-container">
+  {#if hasError}
+    <div class="network-error">
+      <h3 class="network-error-title">Error</h3>
+      <p>{errorMessage}</p>
+      <button 
+        class="network-error-retry"
+        onclick={() => { errorMessage = null; updateGraph(); }}
+      >
+        Retry
+      </button>
+    </div>
+  {/if}
+
+  <div class="network-svg-container" bind:this={container}>
     <svg
       bind:this={svg}
-      class="w-full h-full border border-gray-300 dark:border-gray-700 rounded"
+      class="network-svg"
     />
+    
+    <!-- Zoom controls -->
+    <div class="network-controls">
+      <button 
+        class="network-control-button btn-leather rounded-lg p-2" 
+        onclick={zoomIn}
+        aria-label="Zoom in"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <circle cx="11" cy="11" r="8"></circle>
+          <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+          <line x1="11" y1="8" x2="11" y2="14"></line>
+          <line x1="8" y1="11" x2="14" y2="11"></line>
+        </svg>
+      </button>
+      <button 
+        class="network-control-button btn-leather rounded-lg p-2" 
+        onclick={zoomOut}
+        aria-label="Zoom out"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <circle cx="11" cy="11" r="8"></circle>
+          <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+          <line x1="8" y1="11" x2="14" y2="11"></line>
+        </svg>
+      </button>
+      <button 
+        class="network-control-button btn-leather rounded-lg p-2" 
+        onclick={centerGraph}
+        aria-label="Center graph"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <circle cx="12" cy="12" r="10"></circle>
+          <circle cx="12" cy="12" r="3"></circle>
+        </svg>
+      </button>
+    </div>
   </div>
 
   {#if tooltipVisible && tooltipNode}
@@ -327,7 +564,7 @@
       selected={tooltipNode.id === selectedNodeId}
       x={tooltipX}
       y={tooltipY}
-      on:close={handleTooltipClose}
+      onclose={handleTooltipClose}
     />
   {/if}
 
diff --git a/src/lib/navigator/EventNetwork/types.ts b/src/lib/navigator/EventNetwork/types.ts
index 276b871..db2d46b 100644
--- a/src/lib/navigator/EventNetwork/types.ts
+++ b/src/lib/navigator/EventNetwork/types.ts
@@ -1,35 +1,79 @@
+/**
+ * Type definitions for the Event Network visualization
+ * 
+ * This module defines the core data structures used in the D3 force-directed
+ * graph visualization of Nostr events.
+ */
+
 import type { NDKEvent } from "@nostr-dev-kit/ndk";
 
-export interface NetworkNode extends d3.SimulationNodeDatum {
-    id: string;
-    event?: NDKEvent;
-    level: number;
-    kind: number;
-    title: string;
-    content: string;
-    author: string;
-    type: "Index" | "Content";
-    naddr?: string;
-    nevent?: string;
-    x?: number;
-    y?: number;
-    isContainer?: boolean;
+/**
+ * Base interface for nodes in a D3 force simulation
+ * Represents the physical properties of a node in the simulation
+ */
+export interface SimulationNodeDatum {
+    index?: number;      // Node index in the simulation
+    x?: number;          // X position
+    y?: number;          // Y position
+    vx?: number;         // X velocity
+    vy?: number;         // Y velocity
+    fx?: number | null;  // Fixed X position (when node is pinned)
+    fy?: number | null;  // Fixed Y position (when node is pinned)
+}
+
+/**
+ * Base interface for links in a D3 force simulation
+ * Represents connections between nodes
+ */
+export interface SimulationLinkDatum<NodeType> {
+    source: NodeType | string | number;  // Source node or identifier
+    target: NodeType | string | number;  // Target node or identifier
+    index?: number;                      // Link index in the simulation
 }
 
-export interface NetworkLink extends d3.SimulationLinkDatum<NetworkNode> {
-    source: NetworkNode;
-    target: NetworkNode;
-    isSequential: boolean;
+/**
+ * Represents a node in the event network visualization
+ * Extends the base simulation node with Nostr event-specific properties
+ */
+export interface NetworkNode extends SimulationNodeDatum {
+    id: string;                    // Unique identifier (event ID)
+    event?: NDKEvent;              // Reference to the original NDK event
+    level: number;                 // Hierarchy level in the network
+    kind: number;                  // Nostr event kind (30040 for index, 30041/30818 for content)
+    title: string;                 // Event title
+    content: string;               // Event content
+    author: string;                // Author's public key
+    type: "Index" | "Content";     // Node type classification
+    naddr?: string;                // NIP-19 naddr identifier
+    nevent?: string;               // NIP-19 nevent identifier
+    isContainer?: boolean;         // Whether this node is a container (index)
 }
 
+/**
+ * Represents a link between nodes in the event network
+ * Extends the base simulation link with event-specific properties
+ */
+export interface NetworkLink extends SimulationLinkDatum<NetworkNode> {
+    source: NetworkNode;           // Source node (overridden to be more specific)
+    target: NetworkNode;           // Target node (overridden to be more specific)
+    isSequential: boolean;         // Whether this link represents a sequential relationship
+}
+
+/**
+ * Represents the complete graph data for visualization
+ */
 export interface GraphData {
-    nodes: NetworkNode[];
-    links: NetworkLink[];
+    nodes: NetworkNode[];          // All nodes in the graph
+    links: NetworkLink[];          // All links in the graph
 }
 
+/**
+ * Represents the internal state of the graph during construction
+ * Used to track relationships and build the final graph
+ */
 export interface GraphState {
-    nodeMap: Map<string, NetworkNode>;
-    links: NetworkLink[];
-    eventMap: Map<string, NDKEvent>;
-    referencedIds: Set<string>;
-}
\ No newline at end of file
+    nodeMap: Map<string, NetworkNode>;  // Maps event IDs to nodes
+    links: NetworkLink[];               // All links in the graph
+    eventMap: Map<string, NDKEvent>;    // Maps event IDs to original events
+    referencedIds: Set<string>;         // Set of event IDs referenced by other events
+}
diff --git a/src/lib/navigator/EventNetwork/utils/forceSimulation.ts b/src/lib/navigator/EventNetwork/utils/forceSimulation.ts
index 2ba8e90..34731b3 100644
--- a/src/lib/navigator/EventNetwork/utils/forceSimulation.ts
+++ b/src/lib/navigator/EventNetwork/utils/forceSimulation.ts
@@ -1,27 +1,100 @@
 /**
- * D3 force simulation utilities for the event network
+ * D3 Force Simulation Utilities
+ * 
+ * This module provides utilities for creating and managing D3 force-directed
+ * graph simulations for the event network visualization.
  */
 
 import type { NetworkNode, NetworkLink } from "../types";
-import type { Simulation } from "d3";
 import * as d3 from "d3";
 
+// Configuration
+const DEBUG = false; // Set to true to enable debug logging
+const GRAVITY_STRENGTH = 0.05; // Strength of global gravity
+const CONNECTED_GRAVITY_STRENGTH = 0.3; // Strength of gravity between connected nodes
+
+/**
+ * Debug logging function that only logs when DEBUG is true
+ */
+function debug(...args: any[]) {
+  if (DEBUG) {
+    console.log("[ForceSimulation]", ...args);
+  }
+}
+
+/**
+ * Type definition for D3 force simulation
+ * Provides type safety for simulation operations
+ */
+export interface Simulation<NodeType, LinkType> {
+    nodes(): NodeType[];
+    nodes(nodes: NodeType[]): this;
+    alpha(): number;
+    alpha(alpha: number): this;
+    alphaTarget(): number;
+    alphaTarget(target: number): this;
+    restart(): this;
+    stop(): this;
+    tick(): this;
+    on(type: string, listener: (this: this) => void): this;
+    force(name: string): any;
+    force(name: string, force: any): this;
+}
+
 /**
- * Updates a node's velocity
+ * Type definition for D3 drag events
+ * Provides type safety for drag operations
+ */
+export interface D3DragEvent<GElement extends Element, Datum, Subject> {
+    active: number;
+    sourceEvent: any;
+    subject: Subject;
+    x: number;
+    y: number;
+    dx: number;
+    dy: number;
+    identifier: string | number;
+}
+
+/**
+ * Updates a node's velocity by applying a force
+ * 
+ * @param node - The node to update
+ * @param deltaVx - Change in x velocity
+ * @param deltaVy - Change in y velocity
  */
 export function updateNodeVelocity(
     node: NetworkNode,
     deltaVx: number,
     deltaVy: number
 ) {
+    debug("Updating node velocity", { 
+        nodeId: node.id, 
+        currentVx: node.vx, 
+        currentVy: node.vy, 
+        deltaVx, 
+        deltaVy 
+    });
+    
     if (typeof node.vx === "number" && typeof node.vy === "number") {
         node.vx = node.vx - deltaVx;
         node.vy = node.vy - deltaVy;
+        debug("New velocity", { nodeId: node.id, vx: node.vx, vy: node.vy });
+    } else {
+        debug("Node velocity not defined", { nodeId: node.id });
     }
 }
 
 /**
- * Applies a logarithmic gravity force to a node
+ * Applies a logarithmic gravity force pulling the node toward the center
+ * 
+ * The logarithmic scale ensures that nodes far from the center experience
+ * stronger gravity, preventing them from drifting too far away.
+ * 
+ * @param node - The node to apply gravity to
+ * @param centerX - X coordinate of the center
+ * @param centerY - Y coordinate of the center
+ * @param alpha - Current simulation alpha (cooling factor)
  */
 export function applyGlobalLogGravity(
     node: NetworkNode,
@@ -35,102 +108,128 @@ export function applyGlobalLogGravity(
 
     if (distance === 0) return;
 
-    const force = Math.log(distance + 1) * 0.05 * alpha;
+    const force = Math.log(distance + 1) * GRAVITY_STRENGTH * alpha;
     updateNodeVelocity(node, (dx / distance) * force, (dy / distance) * force);
 }
 
 /**
  * Applies gravity between connected nodes
+ * 
+ * This creates a cohesive force that pulls connected nodes toward their
+ * collective center of gravity, creating more meaningful clusters.
+ * 
+ * @param node - The node to apply connected gravity to
+ * @param links - All links in the network
+ * @param alpha - Current simulation alpha (cooling factor)
  */
 export function applyConnectedGravity(
     node: NetworkNode,
     links: NetworkLink[],
     alpha: number,
 ) {
+    // Find all nodes connected to this node
     const connectedNodes = links
-        .filter(
-            (link) => link.source.id === node.id || link.target.id === node.id,
-        )
-        .map((link) => (link.source.id === node.id ? link.target : link.source));
+        .filter(link => link.source.id === node.id || link.target.id === node.id)
+        .map(link => link.source.id === node.id ? link.target : link.source);
 
     if (connectedNodes.length === 0) return;
 
-    const cogX = d3.mean(connectedNodes, (n) => n.x);
-    const cogY = d3.mean(connectedNodes, (n) => n.y);
+    // Calculate center of gravity of connected nodes
+    const cogX = d3.mean(connectedNodes, (n: NetworkNode) => n.x);
+    const cogY = d3.mean(connectedNodes, (n: NetworkNode) => n.y);
 
     if (cogX === undefined || cogY === undefined) return;
 
+    // Calculate force direction and magnitude
     const dx = (node.x ?? 0) - cogX;
     const dy = (node.y ?? 0) - cogY;
     const distance = Math.sqrt(dx * dx + dy * dy);
 
     if (distance === 0) return;
 
-    const force = distance * 0.3 * alpha;
+    // Apply force proportional to distance
+    const force = distance * CONNECTED_GRAVITY_STRENGTH * alpha;
     updateNodeVelocity(node, (dx / distance) * force, (dy / distance) * force);
 }
 
 /**
  * Sets up drag behavior for nodes
+ * 
+ * This enables interactive dragging of nodes in the visualization.
+ * 
+ * @param simulation - The D3 force simulation
+ * @param warmupClickEnergy - Alpha target when dragging starts (0-1)
+ * @returns D3 drag behavior configured for the simulation
  */
 export function setupDragHandlers(
     simulation: Simulation<NetworkNode, NetworkLink>,
     warmupClickEnergy: number = 0.9
 ) {
     return d3
-        .drag<SVGGElement, NetworkNode>()
-        .on(
-            "start",
-            (
-                event: d3.D3DragEvent<SVGGElement, NetworkNode, NetworkNode>,
-                d: NetworkNode,
-            ) => {
-                if (!event.active)
-                    simulation.alphaTarget(warmupClickEnergy).restart();
-                d.fx = d.x;
-                d.fy = d.y;
-            },
-        )
-        .on(
-            "drag",
-            (
-                event: d3.D3DragEvent<SVGGElement, NetworkNode, NetworkNode>,
-                d: NetworkNode,
-            ) => {
-                d.fx = event.x;
-                d.fy = event.y;
-            },
-        )
-        .on(
-            "end",
-            (
-                event: d3.D3DragEvent<SVGGElement, NetworkNode, NetworkNode>,
-                d: NetworkNode,
-            ) => {
-                if (!event.active) simulation.alphaTarget(0);
-                d.fx = null;
-                d.fy = null;
-            },
-        );
+        .drag()
+        .on("start", (event: D3DragEvent<SVGGElement, NetworkNode, NetworkNode>, d: NetworkNode) => {
+            // Warm up simulation if it's cooled down
+            if (!event.active) {
+                simulation.alphaTarget(warmupClickEnergy).restart();
+            }
+            // Fix node position at current location
+            d.fx = d.x;
+            d.fy = d.y;
+        })
+        .on("drag", (event: D3DragEvent<SVGGElement, NetworkNode, NetworkNode>, d: NetworkNode) => {
+            // Update fixed position to mouse position
+            d.fx = event.x;
+            d.fy = event.y;
+        })
+        .on("end", (event: D3DragEvent<SVGGElement, NetworkNode, NetworkNode>, d: NetworkNode) => {
+            // Cool down simulation when drag ends
+            if (!event.active) {
+                simulation.alphaTarget(0);
+            }
+            // Release fixed position
+            d.fx = null;
+            d.fy = null;
+        });
 }
 
 /**
  * Creates a D3 force simulation for the network
+ * 
+ * @param nodes - Array of network nodes
+ * @param links - Array of network links
+ * @param nodeRadius - Radius of node circles
+ * @param linkDistance - Desired distance between linked nodes
+ * @returns Configured D3 force simulation
  */
 export function createSimulation(
     nodes: NetworkNode[],
     links: NetworkLink[],
     nodeRadius: number,
     linkDistance: number
-) {
-    return d3
-        .forceSimulation<NetworkNode>(nodes)
-        .force(
-            "link",
-            d3
-                .forceLink<NetworkNode, NetworkLink>(links)
-                .id((d) => d.id)
-                .distance(linkDistance * 0.1),
-        )
-        .force("collide", d3.forceCollide<NetworkNode>().radius(nodeRadius * 4));
-}
\ No newline at end of file
+): Simulation<NetworkNode, NetworkLink> {
+    debug("Creating simulation", { 
+        nodeCount: nodes.length, 
+        linkCount: links.length,
+        nodeRadius,
+        linkDistance
+    });
+    
+    try {
+        // Create the simulation with nodes
+        const simulation = d3
+            .forceSimulation(nodes)
+            .force(
+                "link",
+                d3.forceLink(links)
+                    .id((d: NetworkNode) => d.id)
+                    .distance(linkDistance * 0.1)
+            )
+            .force("collide", d3.forceCollide().radius(nodeRadius * 4));
+        
+        debug("Simulation created successfully");
+        return simulation;
+    } catch (error) {
+        console.error("Error creating simulation:", error);
+        throw error;
+    }
+}
diff --git a/src/lib/navigator/EventNetwork/utils/networkBuilder.ts b/src/lib/navigator/EventNetwork/utils/networkBuilder.ts
index d9daa58..4f27c1f 100644
--- a/src/lib/navigator/EventNetwork/utils/networkBuilder.ts
+++ b/src/lib/navigator/EventNetwork/utils/networkBuilder.ts
@@ -1,17 +1,49 @@
+/**
+ * Network Builder Utilities
+ * 
+ * This module provides utilities for building a network graph from Nostr events.
+ * It handles the creation of nodes and links, and the processing of event relationships.
+ */
+
 import type { NDKEvent } from "@nostr-dev-kit/ndk";
 import type { NetworkNode, NetworkLink, GraphData, GraphState } from "../types";
 import { nip19 } from "nostr-tools";
 import { standardRelays } from "$lib/consts";
 
+// Configuration
+const DEBUG = false; // Set to true to enable debug logging
+const INDEX_EVENT_KIND = 30040;
+const CONTENT_EVENT_KIND = 30041;
+
+/**
+ * Debug logging function that only logs when DEBUG is true
+ */
+function debug(...args: any[]) {
+  if (DEBUG) {
+    console.log("[NetworkBuilder]", ...args);
+  }
+}
+
 /**
  * Creates a NetworkNode from an NDKEvent
+ * 
+ * Extracts relevant information from the event and creates a node representation
+ * for the visualization.
+ * 
+ * @param event - The Nostr event to convert to a node
+ * @param level - The hierarchy level of the node (default: 0)
+ * @returns A NetworkNode object representing the event
  */
 export function createNetworkNode(
     event: NDKEvent,
     level: number = 0
 ): NetworkNode {
-    const isContainer = event.kind === 30040;
+    debug("Creating network node", { eventId: event.id, kind: event.kind, level });
+    
+    const isContainer = event.kind === INDEX_EVENT_KIND;
+    const nodeType = isContainer ? "Index" : "Content";
 
+    // Create the base node with essential properties
     const node: NetworkNode = {
         id: event.id,
         event,
@@ -20,13 +52,16 @@ export function createNetworkNode(
         title: event.getMatchingTags("title")?.[0]?.[1] || "Untitled",
         content: event.content || "",
         author: event.pubkey || "",
-        kind: event.kind,
-        type: event?.kind === 30040 ? "Index" : "Content",
+        kind: event.kind || CONTENT_EVENT_KIND, // Default to content event kind if undefined
+        type: nodeType,
     };
 
+    // Add NIP-19 identifiers if possible
     if (event.kind && event.pubkey) {
         try {
             const dTag = event.getMatchingTags("d")?.[0]?.[1] || "";
+            
+            // Create naddr (NIP-19 address) for the event
             node.naddr = nip19.naddrEncode({
                 pubkey: event.pubkey,
                 identifier: dTag,
@@ -34,6 +69,7 @@ export function createNetworkNode(
                 relays: standardRelays,
             });
 
+            // Create nevent (NIP-19 event reference) for the event
             node.nevent = nip19.neventEncode({
                 id: event.id,
                 relays: standardRelays,
@@ -47,50 +83,93 @@ export function createNetworkNode(
     return node;
 }
 
+/**
+ * Creates a map of event IDs to events for quick lookup
+ * 
+ * @param events - Array of Nostr events
+ * @returns Map of event IDs to events
+ */
 export function createEventMap(events: NDKEvent[]): Map<string, NDKEvent> {
+    debug("Creating event map", { eventCount: events.length });
+    
     const eventMap = new Map<string, NDKEvent>();
     events.forEach((event) => {
         if (event.id) {
             eventMap.set(event.id, event);
         }
     });
+    
+    debug("Event map created", { mapSize: eventMap.size });
     return eventMap;
 }
 
+/**
+ * Extracts an event ID from an 'a' tag
+ * 
+ * @param tag - The tag array from a Nostr event
+ * @returns The event ID or null if not found
+ */
 export function extractEventIdFromATag(tag: string[]): string | null {
     return tag[3] || null;
 }
 
 /**
- * Generates a color for an event based on its ID
+ * Generates a deterministic color for an event based on its ID
+ * 
+ * This creates visually distinct colors for different index events
+ * while ensuring the same event always gets the same color.
+ * 
+ * @param eventId - The event ID to generate a color for
+ * @returns An HSL color string
  */
 export function getEventColor(eventId: string): string {
+    // Use first 4 characters of event ID as a hex number
     const num = parseInt(eventId.slice(0, 4), 16);
+    // Convert to a hue value (0-359)
     const hue = num % 360;
+    // Use fixed saturation and lightness for pastel colors
     const saturation = 70;
     const lightness = 75;
     return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
 }
 
+/**
+ * Initializes the graph state from a set of events
+ * 
+ * Creates nodes for all events and identifies referenced events.
+ * 
+ * @param events - Array of Nostr events
+ * @returns Initial graph state
+ */
 export function initializeGraphState(events: NDKEvent[]): GraphState {
+    debug("Initializing graph state", { eventCount: events.length });
+    
     const nodeMap = new Map<string, NetworkNode>();
     const eventMap = createEventMap(events);
 
-    // Create initial nodes
+    // Create initial nodes for all events
     events.forEach((event) => {
         if (!event.id) return;
         const node = createNetworkNode(event);
         nodeMap.set(event.id, node);
     });
+    debug("Node map created", { nodeCount: nodeMap.size });
 
-    // Build referenced IDs set
+    // Build set of referenced event IDs to identify root events
     const referencedIds = new Set<string>();
     events.forEach((event) => {
-        event.getMatchingTags("a").forEach((tag) => {
+        const aTags = event.getMatchingTags("a");
+        debug("Processing a-tags for event", { 
+            eventId: event.id, 
+            aTagCount: aTags.length 
+        });
+        
+        aTags.forEach((tag) => {
             const id = extractEventIdFromATag(tag);
             if (id) referencedIds.add(id);
         });
     });
+    debug("Referenced IDs set created", { referencedCount: referencedIds.size });
 
     return {
         nodeMap,
@@ -100,6 +179,18 @@ export function initializeGraphState(events: NDKEvent[]): GraphState {
     };
 }
 
+/**
+ * Processes a sequence of nodes referenced by an index event
+ * 
+ * Creates links between the index and its content, and between sequential content nodes.
+ * Also processes nested indices recursively up to the maximum level.
+ * 
+ * @param sequence - Array of nodes in the sequence
+ * @param indexEvent - The index event referencing the sequence
+ * @param level - Current hierarchy level
+ * @param state - Current graph state
+ * @param maxLevel - Maximum hierarchy level to process
+ */
 export function processSequence(
     sequence: NetworkNode[],
     indexEvent: NDKEvent,
@@ -107,14 +198,15 @@ export function processSequence(
     state: GraphState,
     maxLevel: number,
 ): void {
+    // Stop if we've reached max level or have no nodes
     if (level >= maxLevel || sequence.length === 0) return;
 
-    // Set levels for sequence nodes
+    // Set levels for all nodes in the sequence
     sequence.forEach((node) => {
         node.level = level + 1;
     });
 
-    // Create initial link from index to first content
+    // Create link from index to first content node
     const indexNode = state.nodeMap.get(indexEvent.id);
     if (indexNode && sequence[0]) {
         state.links.push({
@@ -124,7 +216,7 @@ export function processSequence(
         });
     }
 
-    // Create sequential links
+    // Create sequential links between content nodes
     for (let i = 0; i < sequence.length - 1; i++) {
         const currentNode = sequence[i];
         const nextNode = sequence[i + 1];
@@ -135,16 +227,27 @@ export function processSequence(
             isSequential: true,
         });
 
-        processNestedIndex(currentNode, level + 1, state, maxLevel);
+        // Process nested indices recursively
+        if (currentNode.isContainer) {
+            processNestedIndex(currentNode, level + 1, state, maxLevel);
+        }
     }
 
-    // Process final node if it's an index
+    // Process the last node if it's an index
     const lastNode = sequence[sequence.length - 1];
     if (lastNode?.isContainer) {
         processNestedIndex(lastNode, level + 1, state, maxLevel);
     }
 }
 
+/**
+ * Processes a nested index node
+ * 
+ * @param node - The index node to process
+ * @param level - Current hierarchy level
+ * @param state - Current graph state
+ * @param maxLevel - Maximum hierarchy level to process
+ */
 export function processNestedIndex(
     node: NetworkNode,
     level: number,
@@ -159,6 +262,14 @@ export function processNestedIndex(
     }
 }
 
+/**
+ * Processes an index event and its referenced content
+ * 
+ * @param indexEvent - The index event to process
+ * @param level - Current hierarchy level
+ * @param state - Current graph state
+ * @param maxLevel - Maximum hierarchy level to process
+ */
 export function processIndexEvent(
     indexEvent: NDKEvent,
     level: number,
@@ -167,6 +278,7 @@ export function processIndexEvent(
 ): void {
     if (level >= maxLevel) return;
 
+    // Extract the sequence of nodes referenced by this index
     const sequence = indexEvent
         .getMatchingTags("a")
         .map((tag) => extractEventIdFromATag(tag))
@@ -177,19 +289,53 @@ export function processIndexEvent(
     processSequence(sequence, indexEvent, level, state, maxLevel);
 }
 
+/**
+ * Generates a complete graph from a set of events
+ * 
+ * This is the main entry point for building the network visualization.
+ * 
+ * @param events - Array of Nostr events
+ * @param maxLevel - Maximum hierarchy level to process
+ * @returns Complete graph data for visualization
+ */
 export function generateGraph(
     events: NDKEvent[],
     maxLevel: number
 ): GraphData {
+    debug("Generating graph", { eventCount: events.length, maxLevel });
+    
+    // Initialize the graph state
     const state = initializeGraphState(events);
 
-    // Process root indices
-    events
-        .filter((e) => e.kind === 30040 && e.id && !state.referencedIds.has(e.id))
-        .forEach((rootIndex) => processIndexEvent(rootIndex, 0, state, maxLevel));
+    // Find root index events (those not referenced by other events)
+    const rootIndices = events.filter(
+        (e) => e.kind === INDEX_EVENT_KIND && e.id && !state.referencedIds.has(e.id)
+    );
+    
+    debug("Found root indices", { 
+        rootCount: rootIndices.length,
+        rootIds: rootIndices.map(e => e.id)
+    });
+    
+    // Process each root index
+    rootIndices.forEach((rootIndex) => {
+        debug("Processing root index", { 
+            rootId: rootIndex.id,
+            aTags: rootIndex.getMatchingTags("a").length
+        });
+        processIndexEvent(rootIndex, 0, state, maxLevel);
+    });
 
-    return {
+    // Create the final graph data
+    const result = {
         nodes: Array.from(state.nodeMap.values()),
         links: state.links,
     };
-}
\ No newline at end of file
+    
+    debug("Graph generation complete", { 
+        nodeCount: result.nodes.length, 
+        linkCount: result.links.length 
+    });
+    
+    return result;
+}
diff --git a/src/routes/visualize/+page.svelte b/src/routes/visualize/+page.svelte
index f1f7d33..39eaa06 100644
--- a/src/routes/visualize/+page.svelte
+++ b/src/routes/visualize/+page.svelte
@@ -1,3 +1,9 @@
+<!--
+  Visualization Page
+  
+  This page displays a network visualization of Nostr publications,
+  showing the relationships between index events and their content.
+-->
 <script lang="ts">
   import { onMount } from "svelte";
   import EventNetwork from "$lib/navigator/EventNetwork/index.svelte";
@@ -6,50 +12,83 @@
   import { filterValidIndexEvents } from "$lib/utils";
   import EventLimitControl from "$lib/components/EventLimitControl.svelte";
   import EventRenderLevelLimit from "$lib/components/EventRenderLevelLimit.svelte";
-
   import { networkFetchLimit } from "$lib/state";
   import { fly } from "svelte/transition";
   import { quintOut } from "svelte/easing";
   import { CogSolid } from "flowbite-svelte-icons";
-  import { Button, Tooltip } from "flowbite-svelte";
+  import { Button } from "flowbite-svelte";
+  
+  // Configuration
+  const DEBUG = false; // Set to true to enable debug logging
+  const INDEX_EVENT_KIND = 30040;
+  const CONTENT_EVENT_KINDS = [30041, 30818];
+  
+  /**
+   * Debug logging function that only logs when DEBUG is true
+   */
+  function debug(...args: any[]) {
+    if (DEBUG) {
+      console.log("[VisualizePage]", ...args);
+    }
+  }
 
+  // State
   let events: NDKEvent[] = [];
   let loading = true;
   let error: string | null = null;
-  // panel visibility
   let showSettings = false;
 
+  /**
+   * Fetches events from the Nostr network
+   * 
+   * This function fetches index events and their referenced content events,
+   * filters them according to NIP-62, and combines them for visualization.
+   */
   async function fetchEvents() {
+    debug("Fetching events with limit:", $networkFetchLimit);
     try {
       loading = true;
       error = null;
 
-      // Fetch both index and content events
+      // Step 1: Fetch index events
+      debug(`Fetching index events (kind ${INDEX_EVENT_KIND})`);
       const indexEvents = await $ndkInstance.fetchEvents(
-        { kinds: [30040], limit: $networkFetchLimit },
+        { 
+          kinds: [INDEX_EVENT_KIND], 
+          limit: $networkFetchLimit 
+        },
         {
           groupable: true,
           skipVerification: false,
           skipValidation: false,
         },
       );
+      debug("Fetched index events:", indexEvents.size);
 
-      // Filter valid index events according to NIP-62
+      // Step 2: Filter valid index events according to NIP-62
       const validIndexEvents = filterValidIndexEvents(indexEvents);
+      debug("Valid index events after filtering:", validIndexEvents.size);
 
-      // Get all the content event IDs referenced by the index events
+      // Step 3: Extract content event IDs from index events
       const contentEventIds = new Set<string>();
       validIndexEvents.forEach((event) => {
-        event.getMatchingTags("a").forEach((tag) => {
-          let eventId = tag[3];
-          contentEventIds.add(eventId);
+        const aTags = event.getMatchingTags("a");
+        debug(`Event ${event.id} has ${aTags.length} a-tags`);
+        
+        aTags.forEach((tag) => {
+          const eventId = tag[3];
+          if (eventId) {
+            contentEventIds.add(eventId);
+          }
         });
       });
+      debug("Content event IDs to fetch:", contentEventIds.size);
 
-      // Fetch the referenced content events
+      // Step 4: Fetch the referenced content events
+      debug(`Fetching content events (kinds ${CONTENT_EVENT_KINDS.join(', ')})`);
       const contentEvents = await $ndkInstance.fetchEvents(
         {
-          kinds: [30041, 30818],
+          kinds: CONTENT_EVENT_KINDS,
           ids: Array.from(contentEventIds),
         },
         {
@@ -58,9 +97,11 @@
           skipValidation: false,
         },
       );
+      debug("Fetched content events:", contentEvents.size);
 
-      // Combine both sets of events
+      // Step 5: Combine both sets of events
       events = [...Array.from(validIndexEvents), ...Array.from(contentEvents)];
+      debug("Total events for visualization:", events.length);
     } catch (e) {
       console.error("Error fetching events:", e);
       error = e instanceof Error ? e.message : String(e);
@@ -69,23 +110,29 @@
     }
   }
 
+  /**
+   * Handles updates to visualization settings
+   */
   function handleLimitUpdate() {
     fetchEvents();
   }
 
+  // Fetch events when component mounts
   onMount(() => {
+    debug("Component mounted");
     fetchEvents();
   });
 </script>
 
 <div class="leather w-full p-4 relative">
-  <div class="flex items-center gap-4 mb-4">
+  <!-- Header with title and settings button -->
+  <div class="flex items-center mb-4">
     <h1 class="h-leather text-2xl font-bold">Publication Network</h1>
     
-    <!-- Settings Button - Using Flowbite Components -->
+    <!-- Settings Button -->
     {#if !loading && !error}
       <Button
-        class="btn-leather z-10 rounded-lg min-w-[120px]"
+        class="btn-leather z-10 rounded-lg min-w-[120px] ml-3"
         on:click={() => (showSettings = !showSettings)}
       >
         <CogSolid class="mr-2 h-5 w-5" />
@@ -94,10 +141,10 @@
     {/if}
   </div>
 
+  <!-- Settings Panel (shown when settings button is clicked) -->
   {#if !loading && !error && showSettings}
-    <!-- Settings Panel -->
     <div
-      class="absolute left-[220px] top-14 h-auto w-80 bg-white dark:bg-gray-800 p-4 shadow-lg z-10
+      class="absolute left-0 top-14 h-auto w-80 bg-white dark:bg-gray-800 p-4 shadow-lg z-10
              overflow-y-auto max-h-[calc(100vh-96px)] rounded-lg border
              border-gray-200 dark:border-gray-700"
       transition:fly={{ duration: 300, y: -10, opacity: 1, easing: quintOut }}
@@ -118,6 +165,7 @@
     </div>
   {/if}
   
+  <!-- Loading spinner -->
   {#if loading}
     <div class="flex justify-center items-center h-64">
       <div role="status">
@@ -140,12 +188,14 @@
         <span class="sr-only">Loading...</span>
       </div>
     </div>
+  <!-- Error message -->
   {:else if error}
     <div
       class="p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-red-900 dark:text-red-400"
       role="alert"
     >
-      <p>Error loading network: {error}</p>
+      <p class="font-bold mb-2">Error loading network:</p>
+      <p class="mb-3">{error}</p>
       <button
         type="button"
         class="text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 mt-2 dark:bg-red-600 dark:hover:bg-red-700 focus:outline-none dark:focus:ring-red-800"
@@ -154,8 +204,11 @@
         Retry
       </button>
     </div>
+  <!-- Network visualization -->
   {:else}
-    <EventNetwork {events} />
-    <div class="mt-8 prose dark:prose-invert max-w-none"></div>
+    <div class="relative">
+      <!-- Event network visualization -->
+      <EventNetwork {events} />
+    </div>
   {/if}
 </div>
diff --git a/src/styles/visualize.css b/src/styles/visualize.css
index 59360c9..456a4c1 100644
--- a/src/styles/visualize.css
+++ b/src/styles/visualize.css
@@ -1,4 +1,5 @@
 @layer components {
+    /* Legend styles - specific to visualization */
     .legend-list {
         @apply list-disc pl-5 space-y-2 text-gray-800 dark:text-gray-300;
     }
@@ -21,6 +22,84 @@
     }
 
     .legend-letter {
-        @apply absolute inset-0 flex items-center justify-center text-black text-xs;
+        @apply absolute inset-0 flex items-center justify-center text-black text-xs font-bold;
+    }
+    
+    .legend-text {
+        @apply text-sm;
+    }
+    
+    /* Network visualization styles - specific to visualization */
+    .network-container {
+        @apply flex flex-col w-full h-[calc(100vh-120px)] min-h-[400px] max-h-[900px] p-4 gap-4;
+    }
+    
+    .network-svg-container {
+        @apply h-[calc(100%-130px)] min-h-[300px];
+    }
+    
+    .network-svg {
+        @apply w-full h-full border border-gray-300 dark:border-gray-700 rounded;
+    }
+    
+    .network-error {
+        @apply w-full p-4 bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200 rounded-lg mb-4;
+    }
+    
+    .network-error-title {
+        @apply font-bold text-lg;
+    }
+    
+    .network-error-retry {
+        @apply mt-2 px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700;
+    }
+    
+    .network-debug {
+        @apply mt-4 text-sm text-gray-500;
+    }
+    
+    /* Zoom controls */
+    .network-controls {
+        @apply absolute bottom-4 right-4 flex flex-col gap-2 z-10;
+    }
+    
+    .network-control-button {
+        @apply bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 
+               shadow-md hover:shadow-lg transition-shadow duration-200
+               border border-gray-300 dark:border-gray-700;
+    }
+    
+    /* Tooltip styles - specific to visualization tooltips */
+    .tooltip-close-btn {
+        @apply absolute top-2 right-2 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 
+               rounded-full p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200;
+    }
+
+    .tooltip-content {
+        @apply space-y-2 pr-6;
+    }
+
+    .tooltip-title {
+        @apply font-bold text-base;
+    }
+
+    .tooltip-title-link {
+        @apply text-gray-800 hover:text-blue-600 dark:text-gray-200 dark:hover:text-blue-400;
+    }
+
+    .tooltip-metadata {
+        @apply text-gray-600 dark:text-gray-400 text-sm;
+    }
+
+    .tooltip-summary {
+        @apply mt-2 text-xs bg-gray-100 dark:bg-gray-900 p-2 rounded overflow-auto max-h-40;
+    }
+
+    .tooltip-content-preview {
+        @apply mt-2 text-xs bg-gray-100 dark:bg-gray-900 p-2 rounded overflow-auto max-h-40;
+    }
+
+    .tooltip-help-text {
+        @apply mt-2 text-xs text-gray-500 dark:text-gray-400 italic;
     }
 }
diff --git a/src/types/d3.d.ts b/src/types/d3.d.ts
new file mode 100644
index 0000000..3d230f5
--- /dev/null
+++ b/src/types/d3.d.ts
@@ -0,0 +1,19 @@
+/**
+ * Type declarations for D3.js and related modules
+ * 
+ * These declarations allow TypeScript to recognize D3 imports without requiring
+ * detailed type definitions. For a project requiring more type safety, consider
+ * using the @types/d3 package and its related sub-packages.
+ */
+
+// Core D3 library
+declare module 'd3';
+
+// Force simulation module for graph layouts
+declare module 'd3-force';
+
+// DOM selection and manipulation module
+declare module 'd3-selection';
+
+// Drag behavior module
+declare module 'd3-drag';

From 94842e2326e15cf61912f6ea0a8ea4f0bf26ad0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nu=C5=A1a=20Puk=C5=A1i=C4=8D?= <nusa.puksic@gmail.com>
Date: Sat, 19 Apr 2025 14:05:18 +0200
Subject: [PATCH 11/22] Moved buttons and consolidated stylesheet

---
 src/lib/navigator/EventNetwork/Legend.svelte |  9 ---------
 src/styles/visualize.css                     | 10 +++++++++-
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/lib/navigator/EventNetwork/Legend.svelte b/src/lib/navigator/EventNetwork/Legend.svelte
index 76be770..d8e79b4 100644
--- a/src/lib/navigator/EventNetwork/Legend.svelte
+++ b/src/lib/navigator/EventNetwork/Legend.svelte
@@ -50,12 +50,3 @@
   </ul>
 </div>
 
-<style>
-  .legend-circle.content {
-    background-color: var(--content-color, #d6c1a8);
-  }
-  
-  :global(.dark) .legend-circle.content {
-    background-color: var(--content-color-dark, #FFFFFF);
-  }
-</style>
diff --git a/src/styles/visualize.css b/src/styles/visualize.css
index 456a4c1..ef7f33b 100644
--- a/src/styles/visualize.css
+++ b/src/styles/visualize.css
@@ -21,6 +21,14 @@
         background-color: #d6c1a8;
     }
 
+    .legend-circle.content {
+        background-color: var(--content-color, #d6c1a8);
+    }
+    
+    :global(.dark) .legend-circle.content {
+        background-color: var(--content-color-dark, #FFFFFF);
+    }
+
     .legend-letter {
         @apply absolute inset-0 flex items-center justify-center text-black text-xs font-bold;
     }
@@ -35,7 +43,7 @@
     }
     
     .network-svg-container {
-        @apply h-[calc(100%-130px)] min-h-[300px];
+        @apply relative;
     }
     
     .network-svg {

From 1df1da95ce8386904febadf42e0805085e4254b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nu=C5=A1a=20Puk=C5=A1i=C4=8D?= <nusa.puksic@gmail.com>
Date: Sun, 20 Apr 2025 21:29:18 +0200
Subject: [PATCH 12/22] Changed the styles of the visualization page, moved the
 settings

---
 src/app.css                                   |  10 +-
 src/lib/components/EventLimitControl.svelte   |   6 +-
 .../components/EventRenderLevelLimit.svelte   |   6 +-
 src/lib/navigator/EventNetwork/Legend.svelte  | 119 +++++++++++-------
 .../navigator/EventNetwork/Settings.svelte    |  52 ++++++++
 src/lib/navigator/EventNetwork/index.svelte   |  38 ++++--
 src/routes/visualize/+page.svelte             |  55 +-------
 src/styles/visualize.css                      |  13 +-
 8 files changed, 173 insertions(+), 126 deletions(-)
 create mode 100644 src/lib/navigator/EventNetwork/Settings.svelte

diff --git a/src/app.css b/src/app.css
index 235f36b..314408a 100644
--- a/src/app.css
+++ b/src/app.css
@@ -206,8 +206,9 @@
 @layer components {
   /* Legend */
   .leather-legend {
-    @apply flex-shrink-0 p-4 bg-primary-0 dark:bg-primary-1000 rounded-lg shadow
-           border border-gray-200 dark:border-gray-800;
+    @apply relative m-4 sm:m-0 sm:absolute sm:top-1 sm:left-1 flex-shrink-0 p-2 rounded;
+    @apply shadow-none text-primary-1000 border border-s-4 bg-highlight border-primary-200  has-[:hover]:border-primary-700;
+    @apply dark:bg-primary-1000 dark:border-primary-800 dark:has-[:hover]:bg-primary-950 dark:has-[:hover]:border-primary-500;
   }
   
   /* Tooltip */
@@ -219,8 +220,7 @@
     z-index: 1000;
   }
   
-  /* Heading for leather components */
-  h3.h-leather {
-    @apply text-gray-800 dark:text-gray-200 text-lg font-bold mb-2;
+  .leather-legend button {
+    @apply dark:text-white;
   }
 }
diff --git a/src/lib/components/EventLimitControl.svelte b/src/lib/components/EventLimitControl.svelte
index aafd91f..d8c28be 100644
--- a/src/lib/components/EventLimitControl.svelte
+++ b/src/lib/components/EventLimitControl.svelte
@@ -30,7 +30,7 @@
 </script>
 
 <div class="flex items-center gap-2 mb-4">
-  <label for="event-limit" class="text-sm font-medium"
+  <label for="event-limit" class="leather bg-transparent text-sm font-medium"
     >Number of root events:
   </label>
   <input
@@ -38,14 +38,14 @@
     id="event-limit"
     min="1"
     max="50"
-    class="w-20 bg-primary-0 dark:bg-primary-1000 border border-gray-300 dark:border-gray-700 rounded-md px-2 py-1"
+    class="w-20 bg-primary-0 dark:bg-primary-1000 border border-gray-300 dark:border-gray-700 rounded-md px-2 py-1 dark:text-white"
     bind:value={inputValue}
     on:input={handleInput}
     on:keydown={handleKeyDown}
   />
   <button
     on:click={handleUpdate}
-    class="px-3 py-1 bg-primary-0 dark:bg-primary-1000 border border-gray-300 dark:border-gray-700 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800"
+    class="btn-leather px-3 py-1 bg-primary-0 dark:bg-primary-1000 border border-gray-300 dark:border-gray-700 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800"
   >
     Update
   </button>
diff --git a/src/lib/components/EventRenderLevelLimit.svelte b/src/lib/components/EventRenderLevelLimit.svelte
index bbfdc87..3a7d8a8 100644
--- a/src/lib/components/EventRenderLevelLimit.svelte
+++ b/src/lib/components/EventRenderLevelLimit.svelte
@@ -29,16 +29,16 @@
 </script>
 
 <div class="flex items-center gap-2 mb-4">
-  <label for="levels-to-render" class="text-sm font-medium"
+  <label for="levels-to-render" class="leather bg-transparent text-sm font-medium"
     >Levels to render:
   </label>
-  <label for="event-limit" class="text-sm font-medium">Limit: </label>
+  <label for="event-limit" class="leather bg-transparent text-sm font-medium">Limit: </label>
   <input
     type="number"
     id="levels-to-render"
     min="1"
     max="50"
-    class="w-20 bg-primary-0 dark:bg-primary-1000 border border-gray-300 dark:border-gray-700 rounded-md px-2 py-1"
+    class="w-20 bg-primary-0 dark:bg-primary-1000 border border-gray-300 dark:border-gray-700 rounded-md px-2 py-1 dark:text-white"
     bind:value={inputValue}
     oninput={handleInput}
     onkeydown={handleKeyDown}
diff --git a/src/lib/navigator/EventNetwork/Legend.svelte b/src/lib/navigator/EventNetwork/Legend.svelte
index d8e79b4..024037f 100644
--- a/src/lib/navigator/EventNetwork/Legend.svelte
+++ b/src/lib/navigator/EventNetwork/Legend.svelte
@@ -1,52 +1,75 @@
-<!--
-  Legend Component
-  
-  Displays a legend explaining the different node and link types in the
-  event network visualization.
--->
+<!-- Legend Component (Svelte 5, Runes Mode) -->
+
 <script lang="ts">
-  // Optional class name to apply to the legend container
-  export let className: string = "";
+  import {Button} from 'flowbite-svelte';
+  import { CaretDownOutline, CaretUpOutline } from "flowbite-svelte-icons";
+  let { 
+    collapsedOnInteraction = false, 
+    className = ""
+  } = $props<{collapsedOnInteraction: boolean, className: string}>();
+
+  let expanded = $state(true);
+
+  $effect(() => {
+    if (collapsedOnInteraction) {
+      expanded = false;
+    }
+  });
+
+  function toggle() {
+    expanded = !expanded;
+  }
 </script>
 
-<div class="leather-legend {className}">
-  <h3 class="h-leather">Legend</h3>
-  <ul class="legend-list">
-    <!-- Index event node -->
-    <li class="legend-item">
-      <div class="legend-icon">
-        <span 
-          class="legend-circle" 
-          style="background-color: hsl(200, 70%, 75%)"
-        >
-          <span class="legend-letter">I</span>
-        </span>
-      </div>
-      <span class="legend-text">Index events (kind 30040) - Each with a unique pastel color</span>
-    </li>
-    
-    <!-- Content event node -->
-    <li class="legend-item">
-      <div class="legend-icon">
-        <span class="legend-circle content">
-          <span class="legend-letter">C</span>
-        </span>
-      </div>
-      <span class="legend-text">Content events (kinds 30041, 30818) - Publication sections</span>
-    </li>
-    
-    <!-- Link arrow -->
-    <li class="legend-item">
-      <svg class="w-6 h-6 mr-2" viewBox="0 0 24 24">
-        <path 
-          d="M4 12h16M16 6l6 6-6 6" 
-          class="network-link-leather" 
-          stroke-width="2"
-          fill="none"
-        />
-      </svg>
-      <span class="legend-text">Arrows indicate reading/sequence order</span>
-    </li>
-  </ul>
-</div>
+<div class={`leather-legend ${className}`}>
+  <div class="flex items-center justify-between space-x-3">
+    <h3 class="h-leather">Legend</h3>
+    <Button color='none' outline size='xs' onclick={toggle} class="rounded-full" >
+      {#if expanded}
+        <CaretUpOutline />
+      {:else}
+        <CaretDownOutline />
+      {/if}
+    </Button>
+  </div>
 
+  {#if expanded}
+    <ul class="legend-list">
+      <!-- Index event node -->
+      <li class="legend-item">
+        <div class="legend-icon">
+          <span 
+            class="legend-circle" 
+            style="background-color: hsl(200, 70%, 75%)"
+          >
+            <span class="legend-letter">I</span>
+          </span>
+        </div>
+        <span class="legend-text">Index events (kind 30040) - Each with a unique pastel color</span>
+      </li>
+      
+      <!-- Content event node -->
+      <li class="legend-item">
+        <div class="legend-icon">
+          <span class="legend-circle content">
+            <span class="legend-letter">C</span>
+          </span>
+        </div>
+        <span class="legend-text">Content events (kinds 30041, 30818) - Publication sections</span>
+      </li>
+      
+      <!-- Link arrow -->
+      <li class="legend-item">
+        <svg class="w-6 h-6 mr-2" viewBox="0 0 24 24">
+          <path 
+            d="M4 12h16M16 6l6 6-6 6" 
+            class="network-link-leather" 
+            stroke-width="2"
+            fill="none"
+          />
+        </svg>
+        <span class="legend-text">Arrows indicate reading/sequence order</span>
+      </li>
+    </ul>
+  {/if}
+</div>
diff --git a/src/lib/navigator/EventNetwork/Settings.svelte b/src/lib/navigator/EventNetwork/Settings.svelte
new file mode 100644
index 0000000..390931c
--- /dev/null
+++ b/src/lib/navigator/EventNetwork/Settings.svelte
@@ -0,0 +1,52 @@
+<!--
+  Settings Component
+-->
+<script lang="ts">
+    import {Button} from 'flowbite-svelte';
+    import { CaretDownOutline, CaretUpOutline } from "flowbite-svelte-icons";
+    import { fly } from "svelte/transition";
+    import { quintOut } from "svelte/easing";
+    import EventLimitControl from "$lib/components/EventLimitControl.svelte";
+    import EventRenderLevelLimit from "$lib/components/EventRenderLevelLimit.svelte";
+    import { networkFetchLimit } from "$lib/state";
+
+    let { 
+      count = 0,
+      onupdate
+    } = $props<{count: number, onupdate: () => void}>();
+
+    let expanded = $state(false);
+
+    function toggle() {
+      expanded = !expanded;
+    }
+    /**
+     * Handles updates to visualization settings
+     */
+    function handleLimitUpdate() {
+      onupdate();
+    }
+</script>
+
+<div class="leather-legend sm:!right-1 sm:!left-auto"  >
+  <div class="flex items-center justify-between space-x-3">
+    <h3 class="h-leather">Settings</h3>
+    <Button color='none' outline size='xs' onclick={toggle} class="rounded-full" >
+      {#if expanded}
+        <CaretUpOutline />
+      {:else}
+        <CaretDownOutline />
+      {/if}
+    </Button>
+  </div>
+
+  {#if expanded}
+    <div class="space-y-4">
+      <span class="leather bg-transparent legend-text">
+        Showing {count} events from {$networkFetchLimit} headers
+      </span>
+      <EventLimitControl on:update={handleLimitUpdate} />
+      <EventRenderLevelLimit on:update={handleLimitUpdate} />
+    </div>
+  {/if}
+</div>
diff --git a/src/lib/navigator/EventNetwork/index.svelte b/src/lib/navigator/EventNetwork/index.svelte
index d43719a..7742475 100644
--- a/src/lib/navigator/EventNetwork/index.svelte
+++ b/src/lib/navigator/EventNetwork/index.svelte
@@ -21,6 +21,8 @@
   import Legend from "./Legend.svelte";
   import NodeTooltip from "./NodeTooltip.svelte";
   import type { NetworkNode, NetworkLink } from "./types";
+  import Settings from "./Settings.svelte";
+  import {Button} from 'flowbite-svelte';
   
   // Type alias for D3 selections
   type Selection = any;
@@ -43,7 +45,7 @@
   }
   
   // Component props
-  let { events = [] } = $props<{ events?: NDKEvent[] }>();
+  let { events = [], onupdate } = $props<{ events?: NDKEvent[], onupdate: () => void }>();
 
   // Error state
   let errorMessage = $state<string | null>(null);
@@ -498,6 +500,17 @@
       );
     }
   }
+
+  /**
+   * Legend interactions
+  */
+  let graphInteracted = $state(false);
+
+  function handleGraphClick() {
+    if (!graphInteracted) {
+      graphInteracted = true;
+    }
+  }
 </script>
 
 <div class="network-container">
@@ -514,15 +527,23 @@
     </div>
   {/if}
 
-  <div class="network-svg-container" bind:this={container}>
+  <div class="network-svg-container" bind:this={container} role="figure">
+    <Legend collapsedOnInteraction={graphInteracted} className='' />
+
+  <!-- Settings Panel (shown when settings button is clicked) -->
+    <Settings count={events.length} onupdate={onupdate} />
+
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
     <svg
       bind:this={svg}
       class="network-svg"
+      onclick={handleGraphClick}
     />
     
     <!-- Zoom controls -->
     <div class="network-controls">
-      <button 
+      <Button outline size="lg"
         class="network-control-button btn-leather rounded-lg p-2" 
         onclick={zoomIn}
         aria-label="Zoom in"
@@ -533,8 +554,8 @@
           <line x1="11" y1="8" x2="11" y2="14"></line>
           <line x1="8" y1="11" x2="14" y2="11"></line>
         </svg>
-      </button>
-      <button 
+      </Button>
+      <Button outline size="lg"
         class="network-control-button btn-leather rounded-lg p-2" 
         onclick={zoomOut}
         aria-label="Zoom out"
@@ -544,8 +565,8 @@
           <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
           <line x1="8" y1="11" x2="14" y2="11"></line>
         </svg>
-      </button>
-      <button 
+      </Button>
+      <Button outline size="lg"
         class="network-control-button btn-leather rounded-lg p-2" 
         onclick={centerGraph}
         aria-label="Center graph"
@@ -554,7 +575,7 @@
           <circle cx="12" cy="12" r="10"></circle>
           <circle cx="12" cy="12" r="3"></circle>
         </svg>
-      </button>
+      </Button>
     </div>
   </div>
 
@@ -568,5 +589,4 @@
     />
   {/if}
 
-  <Legend />
 </div>
diff --git a/src/routes/visualize/+page.svelte b/src/routes/visualize/+page.svelte
index 39eaa06..142eeb5 100644
--- a/src/routes/visualize/+page.svelte
+++ b/src/routes/visualize/+page.svelte
@@ -10,13 +10,10 @@
   import { ndkInstance } from "$lib/ndk";
   import type { NDKEvent } from "@nostr-dev-kit/ndk";
   import { filterValidIndexEvents } from "$lib/utils";
-  import EventLimitControl from "$lib/components/EventLimitControl.svelte";
-  import EventRenderLevelLimit from "$lib/components/EventRenderLevelLimit.svelte";
   import { networkFetchLimit } from "$lib/state";
-  import { fly } from "svelte/transition";
-  import { quintOut } from "svelte/easing";
   import { CogSolid } from "flowbite-svelte-icons";
   import { Button } from "flowbite-svelte";
+    import Settings from "$lib/navigator/EventNetwork/Settings.svelte";
   
   // Configuration
   const DEBUG = false; // Set to true to enable debug logging
@@ -110,12 +107,6 @@
     }
   }
 
-  /**
-   * Handles updates to visualization settings
-   */
-  function handleLimitUpdate() {
-    fetchEvents();
-  }
 
   // Fetch events when component mounts
   onMount(() => {
@@ -127,44 +118,8 @@
 <div class="leather w-full p-4 relative">
   <!-- Header with title and settings button -->
   <div class="flex items-center mb-4">
-    <h1 class="h-leather text-2xl font-bold">Publication Network</h1>
-    
-    <!-- Settings Button -->
-    {#if !loading && !error}
-      <Button
-        class="btn-leather z-10 rounded-lg min-w-[120px] ml-3"
-        on:click={() => (showSettings = !showSettings)}
-      >
-        <CogSolid class="mr-2 h-5 w-5" />
-        Settings
-      </Button>
-    {/if}
+    <h1 class="h-leather">Publication Network</h1>
   </div>
-
-  <!-- Settings Panel (shown when settings button is clicked) -->
-  {#if !loading && !error && showSettings}
-    <div
-      class="absolute left-0 top-14 h-auto w-80 bg-white dark:bg-gray-800 p-4 shadow-lg z-10
-             overflow-y-auto max-h-[calc(100vh-96px)] rounded-lg border
-             border-gray-200 dark:border-gray-700"
-      transition:fly={{ duration: 300, y: -10, opacity: 1, easing: quintOut }}
-    >
-      <div class="card space-y-4">
-        <h2 class="text-xl font-bold mb-4 h-leather">
-          Visualization Settings
-        </h2>
-
-        <div class="space-y-4">
-          <span class="text-sm text-gray-600 dark:text-gray-400">
-            Showing {events.length} events from {$networkFetchLimit} headers
-          </span>
-          <EventLimitControl on:update={handleLimitUpdate} />
-          <EventRenderLevelLimit on:update={handleLimitUpdate} />
-        </div>
-      </div>
-    </div>
-  {/if}
-  
   <!-- Loading spinner -->
   {#if loading}
     <div class="flex justify-center items-center h-64">
@@ -206,9 +161,7 @@
     </div>
   <!-- Network visualization -->
   {:else}
-    <div class="relative">
-      <!-- Event network visualization -->
-      <EventNetwork {events} />
-    </div>
+    <!-- Event network visualization -->
+    <EventNetwork {events} onupdate={fetchEvents} />
   {/if}
 </div>
diff --git a/src/styles/visualize.css b/src/styles/visualize.css
index ef7f33b..1ff732d 100644
--- a/src/styles/visualize.css
+++ b/src/styles/visualize.css
@@ -1,7 +1,7 @@
 @layer components {
     /* Legend styles - specific to visualization */
     .legend-list {
-        @apply list-disc pl-5 space-y-2 text-gray-800 dark:text-gray-300;
+        @apply list-disc mt-2 space-y-2 text-gray-800 dark:text-gray-300;
     }
 
     .legend-item {
@@ -39,15 +39,16 @@
     
     /* Network visualization styles - specific to visualization */
     .network-container {
-        @apply flex flex-col w-full h-[calc(100vh-120px)] min-h-[400px] max-h-[900px] p-4 gap-4;
+        @apply flex flex-col w-full h-[calc(100vh-138px)] min-h-[400px] max-h-[900px];
     }
     
     .network-svg-container {
-        @apply relative;
+        @apply relative sm:h-[100%];
     }
     
     .network-svg {
-        @apply w-full h-full border border-gray-300 dark:border-gray-700 rounded;
+        @apply w-full sm:h-[100%] border;
+        @apply border border-primary-200 has-[:hover]:border-primary-700 dark:bg-primary-1000 dark:border-primary-800 dark:has-[:hover]:bg-primary-950 dark:has-[:hover]:border-primary-500 rounded;
     }
     
     .network-error {
@@ -72,9 +73,7 @@
     }
     
     .network-control-button {
-        @apply bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 
-               shadow-md hover:shadow-lg transition-shadow duration-200
-               border border-gray-300 dark:border-gray-700;
+        @apply bg-white;
     }
     
     /* Tooltip styles - specific to visualization tooltips */

From 787eb0402876041b56dd0033195dc6e4a68ad201 Mon Sep 17 00:00:00 2001
From: buttercat1791 <mjjurkoic@gmail.com>
Date: Wed, 30 Apr 2025 00:07:33 -0500
Subject: [PATCH 13/22] Add Cursor rules

These are used as instructions for all LLMs working on this repo within the Cursor IDE.
---
 .cursor/rules/alexandria.mdc | 62 ++++++++++++++++++++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 .cursor/rules/alexandria.mdc

diff --git a/.cursor/rules/alexandria.mdc b/.cursor/rules/alexandria.mdc
new file mode 100644
index 0000000..4fe24b0
--- /dev/null
+++ b/.cursor/rules/alexandria.mdc
@@ -0,0 +1,62 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+# Project Alexandria
+
+You are senior full-stack software engineer with 20 years of experience writing web apps.  You have been working with the Svelte web development framework for 8 years, since it was first released, and you currently are a leading expert on Svelte 5 and SvelteKit 2.  Additionally, you are a pioneer developer on the Nostr protocol, and have developing production-quality Nostr apps for 4 years.
+
+## Project Overview
+
+Alexandria is a Nostr project written in Svelte 5 and SvelteKit 2.  It is a web app for reading, commenting on, and publishing books, blogs, and other long-form content stored on Nostr relays.  It revolves around breaking long AsciiDoc documents into Nostr events, with each event containing a paragraph or so of text from the document.  These individual content events are organized by index events into publications.  An index contains an ordered list of references to other index events or content events, forming a tree.
+
+### Reader Features
+
+In reader mode, Alexandria loads a document tree from a root publication index event.  The AsciiDoc text content of the various content events, along with headers specified by tags in the index events, is composed and rendered as a single document from the user's point of view.
+
+### Tech Stack
+
+Svelte components in Alexandria use TypeScript exclusively over plain JavaScript.  Styles are defined via Tailwind 4 utility classes, and some custom utility classes are defined in [app.css](mdc:src/app.css).  The app runs on Deno, but maintains compatibility with Node.js.
+
+## General Guidelines
+
+When responding to prompts, adhere to the following rules:
+
+- Avoid making apologetic or conciliatory statements.
+- Avoid verbose responses; be direct and to the point.
+- Provide links to relevant documentation so that I can do further reading on the tools or techniques discussed and used in your responses.
+- When I tell you a response is incorrect, avoid simply agreeing with me; think about the points raised and provide well-reasoned explanations for your subsequent responses.
+- Avoid proposing code edits unless I specifically tell you to do so.
+- When giving examples from my codebase, include the file name and line numbers so I can find the relevant code easily.
+
+## Code Style
+
+Observe the following style guidelines when writing code:
+
+### General Guidance
+
+- Use PascalCase names for Svelte 5 components and their files.
+- Use snake_case names for plain TypeScript files.
+- Use comments sparingly; code should be self-documenting.
+
+### JavaScript/TypeScript
+
+- Use an indentation size of 2 spaces.
+- Use camelCase names for variables, classes, and functions.
+- Give variables, classes, and functions descriptive names that reflect their content and purpose.
+- Use Svelte 5 features, such as runes.  Avoid using legacy Svelte 4 features.
+- Write JSDoc comments for all functions.
+- Use blocks enclosed by curly brackets when writing control flow expressions such as `for` and `while` loops, and `if` and `switch` statements.
+- Begin `case` expressions in a `switch` statement at the same indentation level as the `switch` itself.  Indent code within a `case` block.
+- Limit line length to 100 characters; break statements across lines if necessary.
+- Default to single quotes.
+
+### HTML
+
+- Use an indentation size of 2 spaces.
+- Break long tags across multiple lines.
+- Use Tailwind 4 utility classes for styling.
+- Default to single quotes.
+
+

From 9e35e0b229581ffe925d50fbb22a3237f18079ca Mon Sep 17 00:00:00 2001
From: buttercat1791 <mjjurkoic@gmail.com>
Date: Wed, 30 Apr 2025 00:07:43 -0500
Subject: [PATCH 14/22] Update D3

---
 deno.lock | 1 +
 1 file changed, 1 insertion(+)

diff --git a/deno.lock b/deno.lock
index 9438da1..c97022c 100644
--- a/deno.lock
+++ b/deno.lock
@@ -2891,6 +2891,7 @@
         "npm:@sveltejs/vite-plugin-svelte@4",
         "npm:@tailwindcss/forms@0.5",
         "npm:@tailwindcss/typography@0.5",
+        "npm:@types/d3@^7.4.3",
         "npm:@types/he@1.2",
         "npm:@types/node@22",
         "npm:asciidoctor@3.0",

From 1ecc6bccbd7be6efb5ee138ad064fb69cfcb184e Mon Sep 17 00:00:00 2001
From: buttercat1791 <mjjurkoic@gmail.com>
Date: Wed, 30 Apr 2025 00:11:48 -0500
Subject: [PATCH 15/22] Get rendering to work properly with new loader

Load-on-scroll can stand to be improved, but it works at a basic level.  Event content is rendered correctly, with headings, and many content block types have proper styling.
---
 src/app.css                                  | 107 ++++++++++++++++++-
 src/lib/components/PublicationSection.svelte |  40 ++++---
 src/lib/snippets/PublicationSnippets.svelte  |  12 +--
 3 files changed, 128 insertions(+), 31 deletions(-)

diff --git a/src/app.css b/src/app.css
index 314408a..4c538de 100644
--- a/src/app.css
+++ b/src/app.css
@@ -186,11 +186,6 @@
     @apply bg-gray-200 dark:bg-gray-700;
   }
   
-  /* Unordered list */
-  .ul-leather li a {
-    @apply text-gray-800 hover:text-primary-400 dark:text-gray-300 dark:hover:text-primary-500;
-  }
-  
   /* Network visualization */
   .network-link-leather {
     @apply stroke-gray-400 fill-gray-400;
@@ -203,6 +198,43 @@
   }
 }
 
+/* Utilities can be applied via the @apply directive. */
+@layer utilities {
+  .h-leather {
+    @apply text-gray-800 dark:text-gray-300 pt-4;
+  }
+
+  .h1-leather {
+    @apply text-4xl font-bold;
+  }
+
+  .h2-leather {
+    @apply text-3xl font-bold;
+  }
+
+  .h3-leather {
+    @apply text-2xl font-bold;
+  }
+
+  .h4-leather {
+    @apply text-xl font-bold;
+  }
+
+  .h5-leather {
+    @apply text-lg font-semibold;
+  }
+
+  .h6-leather {
+    @apply text-base font-semibold;
+  }
+
+  /* Lists */
+  .ol-leather li a,
+  .ul-leather li a {
+    @apply text-gray-800 hover:text-primary-400 dark:text-gray-300 dark:hover:text-primary-500;
+  }
+}
+
 @layer components {
   /* Legend */
   .leather-legend {
@@ -223,4 +255,69 @@
   .leather-legend button {
     @apply dark:text-white;
   }
+
+  /* Rendered publication content */
+  .publication-leather {
+    @apply flex flex-col space-y-4;
+
+    h1, h2, h3, h4, h5, h6 {
+      @apply h-leather;
+    }
+
+    h1 {
+      @apply h1-leather;
+    }
+
+    h2 {
+      @apply h2-leather;
+    }
+
+    h3 {
+      @apply h3-leather;
+    }
+
+    h4 {
+      @apply h4-leather;
+    }
+
+    h5 {
+      @apply h5-leather;
+    }
+
+    h6 {
+      @apply h6-leather;
+    }
+
+    div {
+      @apply flex flex-col space-y-4;
+    }
+
+    .olist {
+      @apply flex flex-col space-y-4;
+
+      ol {
+        @apply ol-leather list-decimal px-6 flex flex-col space-y-2;
+
+        li {
+          .paragraph {
+            @apply py-2;
+          }
+        }
+      }
+    }
+
+    .ulist {
+      @apply flex flex-col space-y-4;
+
+      ul {
+        @apply ul-leather list-disc px-6 flex flex-col space-y-2;
+
+        li {
+          .paragraph {
+            @apply py-2;
+          }
+        }
+      }
+    }
+  }
 }
diff --git a/src/lib/components/PublicationSection.svelte b/src/lib/components/PublicationSection.svelte
index 0ea64f1..4cafb7c 100644
--- a/src/lib/components/PublicationSection.svelte
+++ b/src/lib/components/PublicationSection.svelte
@@ -5,6 +5,7 @@
   import { TextPlaceholder } from "flowbite-svelte";
   import { getContext } from "svelte";
   import type { Asciidoctor, Document } from "asciidoctor";
+
   let {
     address,
     rootAddress,
@@ -20,7 +21,7 @@
   const publicationTree: PublicationTree = getContext('publicationTree');
   const asciidoctor: Asciidoctor = getContext('asciidoctor');
 
-  let leafEvent: Promise<NDKEvent | null> = $derived.by(async () =>
+  let leafEvent: Promise<NDKEvent | null> = $derived.by(async () => 
     await publicationTree.getEvent(address));
   let rootEvent: Promise<NDKEvent | null> = $derived.by(async () =>
     await publicationTree.getEvent(rootAddress));
@@ -28,6 +29,8 @@
     (await rootEvent)?.getMatchingTags('type')[0]?.[1]);
   let leafHierarchy: Promise<NDKEvent[]> = $derived.by(async () =>
     await publicationTree.getHierarchy(address));
+  let leafTitle: Promise<string | undefined> = $derived.by(async () =>
+    (await leafEvent)?.getMatchingTags('title')[0]?.[1]);
   let leafContent: Promise<string | Document> = $derived.by(async () =>
     asciidoctor.convert((await leafEvent)?.content ?? ''));
 
@@ -39,40 +42,40 @@
     return leaves[index - 1];
   });
   let previousLeafHierarchy: Promise<NDKEvent[] | null> = $derived.by(async () => {
-    const previousLeaf = await previousLeafEvent;
-    if (!previousLeaf) {
+    console.debug('Finding previous leaf hierarchy for ', address);
+    if (!previousLeafEvent) {
       return null;
     }
-    return await publicationTree.getHierarchy(previousLeafEvent?.tagAddress() ?? '')
+    return await publicationTree.getHierarchy(previousLeafEvent.tagAddress());
   });
 
   let divergingBranches = $derived.by(async () => {
-    const currentHierarchy = await leafHierarchy;
-    const previousHierarchy = await previousLeafHierarchy;
+    console.debug('Finding diverging branches for ', address);
+    let [leafHierarchyValue, previousLeafHierarchyValue] = await Promise.all([leafHierarchy, previousLeafHierarchy]);
     
     const branches: [NDKEvent, number][] = [];
 
-    if (!previousHierarchy) {
-      for (let i = 0; i < currentHierarchy.length - 1; i++) {
-        branches.push([currentHierarchy[i], i]);
+    if (!previousLeafHierarchyValue) {
+      for (let i = 0; i < leafHierarchyValue.length - 1; i++) {
+        branches.push([leafHierarchyValue[i], i]);
       }
       return branches;
     }
 
-    const minLength = Math.min(currentHierarchy.length, previousHierarchy.length);
+    const minLength = Math.min(leafHierarchyValue.length, previousLeafHierarchyValue.length);
     
     // Find the first diverging node.
     let divergingIndex = 0;
     while (
       divergingIndex < minLength && 
-      currentHierarchy[divergingIndex].tagAddress() === previousHierarchy[divergingIndex].tagAddress()
+      leafHierarchyValue[divergingIndex].tagAddress() === previousLeafHierarchyValue[divergingIndex].tagAddress()
     ) {
       divergingIndex++;
     }
     
     // Add all branches from the first diverging node to the current leaf.
-    for (let i = divergingIndex; i < currentHierarchy.length - 1; i++) {
-      branches.push([currentHierarchy[i], i]);
+    for (let i = divergingIndex; i < leafHierarchyValue.length - 1; i++) {
+      branches.push([leafHierarchyValue[i], i]);
     }
     
     return branches;
@@ -90,15 +93,18 @@
 </script>
 
 <!-- TODO: Correctly handle events that are the start of a content section. -->
-<section bind:this={sectionRef}>
-  {#await Promise.all([leafContent, publicationType, divergingBranches])}
+<section bind:this={sectionRef} class='publication-leather'>
+  {#await Promise.all([leafTitle, leafContent, leafHierarchy, publicationType, divergingBranches])}
     <TextPlaceholder size='xxl' />
-  {:then [leafContent, publicationType, divergingBranches]}
+  {:then [leafTitle, leafContent, leafHierarchy, publicationType, divergingBranches]}
     <!-- TODO: Ensure we render all headings, not just the first one. -->
     {#each divergingBranches as [branch, depth]}
       {@render sectionHeading(branch.getMatchingTags('title')[0]?.[1] ?? '', depth)}
     {/each}
+    {#if leafTitle}
+      {@const leafDepth = leafHierarchy.length - 1}
+      {@render sectionHeading(leafTitle, leafDepth)}
+    {/if}
     {@render contentParagraph(leafContent.toString(), publicationType ?? 'article', false)}
   {/await}
 </section>
-
diff --git a/src/lib/snippets/PublicationSnippets.svelte b/src/lib/snippets/PublicationSnippets.svelte
index 8f9e0cc..802edfd 100644
--- a/src/lib/snippets/PublicationSnippets.svelte
+++ b/src/lib/snippets/PublicationSnippets.svelte
@@ -14,13 +14,7 @@
 {/snippet}
 
 {#snippet contentParagraph(content: string, publicationType: string, isSectionStart: boolean)}
-  {#if publicationType === 'novel'}
-    <P class='whitespace-normal' firstupper={isSectionStart}>
-      {@html content}
-    </P>
-  {:else}
-    <P class='whitespace-normal' firstupper={false}>
-      {@html content}
-    </P>
-  {/if}
+  <section class='whitespace-normal publication-leather'>
+    {@html content}
+  </section>
 {/snippet}

From 3f479169a7c191bf4c04ff6b9b12fe2ba16b3ac6 Mon Sep 17 00:00:00 2001
From: buttercat1791 <mjjurkoic@gmail.com>
Date: Wed, 30 Apr 2025 00:12:20 -0500
Subject: [PATCH 16/22] Remove leftover console debug statements

---
 src/lib/components/PublicationSection.svelte | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/lib/components/PublicationSection.svelte b/src/lib/components/PublicationSection.svelte
index 4cafb7c..5eb4f24 100644
--- a/src/lib/components/PublicationSection.svelte
+++ b/src/lib/components/PublicationSection.svelte
@@ -42,7 +42,6 @@
     return leaves[index - 1];
   });
   let previousLeafHierarchy: Promise<NDKEvent[] | null> = $derived.by(async () => {
-    console.debug('Finding previous leaf hierarchy for ', address);
     if (!previousLeafEvent) {
       return null;
     }
@@ -50,7 +49,6 @@
   });
 
   let divergingBranches = $derived.by(async () => {
-    console.debug('Finding diverging branches for ', address);
     let [leafHierarchyValue, previousLeafHierarchyValue] = await Promise.all([leafHierarchy, previousLeafHierarchy]);
     
     const branches: [NDKEvent, number][] = [];

From 823d5223952a709028522fcab4b99b960cc7951e Mon Sep 17 00:00:00 2001
From: buttercat1791 <mjjurkoic@gmail.com>
Date: Wed, 30 Apr 2025 00:17:55 -0500
Subject: [PATCH 17/22] Comment out ToC placeholder

---
 src/lib/components/Publication.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/Publication.svelte b/src/lib/components/Publication.svelte
index 8bcf5a4..7d53987 100644
--- a/src/lib/components/Publication.svelte
+++ b/src/lib/components/Publication.svelte
@@ -155,7 +155,7 @@
 
 
 {#if showTocButton && !showToc}
-  <Button
+  <!-- <Button
     class="btn-leather fixed top-20 left-4 h-6 w-6"
     outline={true}
     on:click={(ev) => {
@@ -165,7 +165,7 @@
   >
     <BookOutline />
   </Button>
-  <Tooltip>Show Table of Contents</Tooltip>
+  <Tooltip>Show Table of Contents</Tooltip> -->
 {/if}
 <!-- TODO: Use loader to build ToC. -->
 <!-- {#if showToc}

From da0a7dc3cd2e48a028f70cd991b8e7118c276f0b Mon Sep 17 00:00:00 2001
From: buttercat1791 <mjjurkoic@gmail.com>
Date: Wed, 30 Apr 2025 23:10:09 -0500
Subject: [PATCH 18/22] Polish up some styles

---
 src/app.css | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/src/app.css b/src/app.css
index 4c538de..cf8680e 100644
--- a/src/app.css
+++ b/src/app.css
@@ -233,6 +233,10 @@
   .ul-leather li a {
     @apply text-gray-800 hover:text-primary-400 dark:text-gray-300 dark:hover:text-primary-500;
   }
+
+  .link {
+    @apply underline cursor-pointer hover:text-primary-400 dark:hover:text-primary-500;
+  }
 }
 
 @layer components {
@@ -319,5 +323,35 @@
         }
       }
     }
+
+    a {
+      @apply link;
+    }
+
+    .imageblock {
+      @apply flex flex-col items-center;
+
+      .title {
+        @apply text-sm text-center;
+      }
+    }
+
+    .stemblock {
+      @apply bg-gray-100 dark:bg-gray-900 p-4 rounded-lg;
+    }
+
+    table {
+      @apply w-full overflow-x-auto;
+
+      caption {
+        @apply text-sm;
+      }
+
+      thead, tbody {
+        th, td {
+          @apply border border-gray-200 dark:border-gray-700;
+        }
+      }
+    }
   }
 }

From 689bd61ae5b76868cb0485222195a2ebcc0ac252 Mon Sep 17 00:00:00 2001
From: buttercat1791 <mjjurkoic@gmail.com>
Date: Thu, 1 May 2025 08:22:14 -0500
Subject: [PATCH 19/22] Add a "construction" banner to the base layout

---
 src/routes/+layout.svelte | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 4cac70e..b7593c3 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -3,6 +3,8 @@
   import Navigation from "$lib/components/Navigation.svelte";
   import { onMount } from "svelte";
   import { page } from "$app/stores";
+  import { Alert } from "flowbite-svelte";
+  import { HammerSolid } from "flowbite-svelte-icons";
 
   // Compute viewport height.
   $: displayHeight = window.innerHeight;
@@ -42,5 +44,11 @@
 
 <div class={'leather min-h-full w-full flex flex-col items-center'}>
   <Navigation class='sticky top-0' />
+  <Alert rounded={false} class='border-t-4 border-primary-500 text-gray-900 dark:text-gray-100 dark:border-primary-500 flex justify-left'>
+    <HammerSolid class='mr-2 h-5 w-5 text-primary-500 dark:text-primary-500' />
+    <span class='font-medium'>
+      Pardon our dust!  The publication view is currently using an experimental loader, and may be unstable.
+    </span>
+  </Alert>
   <slot />
 </div>

From 14c6d3115635be947948bf962a7c6d8c4bc3e072 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nu=C5=A1a=20Puk=C5=A1i=C4=8D?= <nusa.puksic@gmail.com>
Date: Thu, 1 May 2025 18:21:53 +0200
Subject: [PATCH 20/22] Restyle admonitions

---
 src/styles/publications.css | 52 ++++++++++++++++++++-----------------
 1 file changed, 28 insertions(+), 24 deletions(-)

diff --git a/src/styles/publications.css b/src/styles/publications.css
index fe30740..201a432 100644
--- a/src/styles/publications.css
+++ b/src/styles/publications.css
@@ -120,77 +120,81 @@
     }
 
     /* admonition */
-    .note-leather .admonitionblock .title {
+    .publication-leather .admonitionblock .title {
         @apply font-semibold;
     }
 
-    .note-leather .admonitionblock table {
+    .publication-leather .admonitionblock table {
         @apply w-full border-collapse;
     }
 
-    .note-leather .admonitionblock tr {
-        @apply flex flex-col;
+    .publication-leather .admonitionblock tr {
+        @apply flex flex-col border-none;
     }
 
-    .note-leather .admonitionblock p:has(code) {
+    .publication-leather .admonitionblock td {
+        @apply border-none;
+    }
+
+    .publication-leather .admonitionblock p:has(code) {
         @apply my-3;
     }
 
-    .note-leather .admonitionblock {
+    .publication-leather .admonitionblock {
         @apply rounded overflow-hidden border;
     }
 
-    .note-leather .admonitionblock .icon,
-    .note-leather .admonitionblock .content {
+    .publication-leather .admonitionblock .icon,
+    .publication-leather .admonitionblock .content {
         @apply p-4;
     }
 
-    .note-leather .admonitionblock .content {
+    .publication-leather .admonitionblock .content {
         @apply pt-0;
     }
 
-    .note-leather .admonitionblock.tip {
+    .publication-leather .admonitionblock.tip {
         @apply rounded overflow-hidden border border-success-100 dark:border-success-800;
     }
 
-    .note-leather .admonitionblock.tip .icon,
-    .note-leather .admonitionblock.tip .content {
+    .publication-leather .admonitionblock.tip .icon,
+    .publication-leather .admonitionblock.tip .content {
         @apply bg-success-100 dark:bg-success-800;
     }
 
-    .note-leather .admonitionblock.note {
+    .publication-leather .admonitionblock.note {
         @apply rounded overflow-hidden border border-info-100 dark:border-info-700;
     }
 
-    .note-leather .admonitionblock.note .icon,
-    .note-leather .admonitionblock.note .content {
+    .publication-leather .admonitionblock.note .icon,
+    .publication-leather .admonitionblock.note .content {
         @apply bg-info-100 dark:bg-info-800;
     }
 
-    .note-leather .admonitionblock.important {
+    .publication-leather .admonitionblock.important {
         @apply rounded overflow-hidden border border-primary-200 dark:border-primary-700;
     }
 
-    .note-leather .admonitionblock.important .icon,
-    .note-leather .admonitionblock.important .content {
+    .publication-leather .admonitionblock.important .icon,
+    .publication-leather .admonitionblock.important .content {
         @apply bg-primary-200 dark:bg-primary-700;
     }
 
-    .note-leather .admonitionblock.caution {
+    .publication-leather .admonitionblock.caution {
         @apply rounded overflow-hidden border border-warning-200 dark:border-warning-700;
     }
 
-    .note-leather .admonitionblock.caution .icon,
-    .note-leather .admonitionblock.caution .content {
+    .publication-leather .admonitionblock.caution .icon,
+    .publication-leather .admonitionblock.caution .content {
         @apply bg-warning-200 dark:bg-warning-700;
     }
 
-    .note-leather .admonitionblock.warning {
+    .publication-leather .admonitionblock.warning {
         @apply rounded overflow-hidden border border-danger-200 dark:border-danger-800;
     }
 
-    .note-leather .admonitionblock.warning .icon,
-    .note-leather .admonitionblock.warning .content {
+    .publication-leather .admonitionblock.warning .icon,
+    .publication-leather .admonitionblock.warning .content {
         @apply bg-danger-200 dark:bg-danger-800;
     }
 

From 3560ddb221e220064953576e7f518096ccf82916 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nu=C5=A1a=20Puk=C5=A1i=C4=8D?= <nusa.puksic@gmail.com>
Date: Thu, 1 May 2025 18:26:02 +0200
Subject: [PATCH 21/22] Restyle other stuff...

---
 src/styles/publications.css | 38 ++++++++++++++++++-------------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/styles/publications.css b/src/styles/publications.css
index 201a432..17adefc 100644
--- a/src/styles/publications.css
+++ b/src/styles/publications.css
@@ -53,7 +53,7 @@
         @apply p-3 text-wrap break-words;
     }
 
-    .note-leather .listingblock pre {
+    .publication-leather .listingblock pre {
         @apply overflow-x-auto;
     }
 
@@ -62,24 +62,24 @@
         @apply space-y-1 list-disc list-inside;
     }
 
-    .note-leather .olist ol {
+    .publication-leather .olist ol {
         @apply space-y-1 list-inside;
     }
 
-    .note-leather ol.arabic {
+    .publication-leather ol.arabic {
         @apply list-decimal;
     }
 
-    .note-leather ol.loweralpha {
+    .publication-leather ol.loweralpha {
         @apply list-lower-alpha;
     }
 
-    .note-leather ol.upperalpha {
+    .publication-leather ol.upperalpha {
         @apply list-upper-alpha;
     }
 
-    .note-leather li ol,
-    .note-leather li ul {
+    .publication-leather li ol,
+    .publication-leather li ul {
         @apply ps-5 my-2;
     }
 
@@ -93,25 +93,25 @@
         @apply my-2 font-thin text-lg;
     }
 
-    .note-leather li p {
+    .publication-leather li p {
         @apply inline;
     }
 
     /* blockquote; prose and poetry quotes */
-    .note-leather .quoteblock,
-    .note-leather .verseblock {
+    .publication-leather .quoteblock,
+    .publication-leather .verseblock {
         @apply p-4 my-4 border-s-4 rounded border-primary-300 bg-primary-50 dark:border-primary-500 dark:bg-primary-700;
     }
 
-    .note-leather .verseblock pre.content {
+    .publication-leather .verseblock pre.content {
         @apply text-base font-sans;
     }
 
-    .note-leather .attribution {
+    .publication-leather .attribution {
         @apply mt-3 italic clear-both;
     }
 
-    .note-leather cite {
+    .publication-leather cite {
         @apply text-sm;
     }
 
@@ -199,19 +199,19 @@
     }
 
     /* listingblock, literalblock */
-    .note-leather .listingblock,
-    .note-leather .literalblock {
+    .publication-leather .listingblock,
+    .publication-leather .literalblock {
         @apply p-4 rounded  bg-highlight dark:bg-primary-700;
     }
 
-    .note-leather .sidebarblock .title,
-    .note-leather .listingblock .title,
-    .note-leather .literalblock .title {
+    .publication-leather .sidebarblock .title,
+    .publication-leather .listingblock .title,
+    .publication-leather .literalblock .title {
         @apply font-semibold mb-1;
     }
 
     /* sidebar */
-    .note-leather .sidebarblock {
+    .publication-leather .sidebarblock {
         @apply p-4 rounded bg-info-100 dark:bg-info-800;
     }
 

From fabd54fde762a662ea013110c99709dfb0223ea7 Mon Sep 17 00:00:00 2001
From: Silberengel <silberengel7@protonmail.com>
Date: Thu, 1 May 2025 20:16:43 +0200
Subject: [PATCH 22/22] fix broken or missing links

---
 src/routes/about/+page.svelte | 308 ++++++++++++++++++++++------------
 1 file changed, 202 insertions(+), 106 deletions(-)

diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index ace2103..eb0abfc 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -1,118 +1,214 @@
-<script lang='ts'>
+<script lang="ts">
   import { Heading, Img, P, A } from "flowbite-svelte";
-  
+
   // Get the git tag version from environment variables
-  const appVersion = import.meta.env.APP_VERSION || 'development';
-  const isVersionKnown = appVersion !== 'development';
+  const appVersion = import.meta.env.APP_VERSION || "development";
+  const isVersionKnown = appVersion !== "development";
 </script>
 
-<div class='w-full flex justify-center'>
-  <main class='main-leather flex flex-col space-y-6 max-w-2xl w-full my-6 px-4'>
+<div class="w-full flex justify-center">
+  <main class="main-leather flex flex-col space-y-6 max-w-2xl w-full my-6 px-4">
     <div class="flex justify-between items-center">
-      <Heading tag='h1' class='h-leather mb-2'>About the Library of Alexandria</Heading>
+      <Heading tag="h1" class="h-leather mb-2"
+        >About the Library of Alexandria</Heading
+      >
       {#if isVersionKnown}
-        <span class="text-sm bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-nowrap">Version: {appVersion}</span>
+        <span
+          class="text-sm bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-nowrap"
+          >Version: {appVersion}</span
+        >
       {/if}
     </div>
     <Img src="/screenshots/old_books.jpg" alt="Alexandria icon" />
 
     <P class="mb-3">
-        Alexandria is a reader and writer for <A href="/publication?d=gitcitadel-project-documentation-curated-publications-specification-7-by-stella-v-1">curated publications</A> (in Asciidoc), wiki pages (Asciidoc), and will eventually also support long-form articles (Markdown). It is produced by the <A href="/publication?d=gitcitadel-project-documentation-gitcitadel-project-1-by-stella-v-1">GitCitadel project team</A>.
-      </P>
-
-      <P class="mb-3">
-        Please submit support issues on the <A href="https://gitcitadel.com/r/naddr1qvzqqqrhnypzquqjyy5zww7uq7hehemjt7juf0q0c9rgv6lv8r2yxcxuf0rvcx9eqy88wumn8ghj7mn0wvhxcmmv9uq3wamnwvaz7tmjv4kxz7fwdehhxarj9e3xzmny9uqsuamnwvaz7tmwdaejumr0dshsqzjpd3jhsctwv3exjcgtpg0n0/issues" target="_blank">Alexandria repo page</A> and follow us on <A href="https://github.com/ShadowySupercode/gitcitadel" target="_blank">GitHub</A> and <A href="https://geyser.fund/project/gitcitadel" target="_blank">Geyserfund</A>.
-      </P>
-
-      <P>
-        We are easiest to contact over our Nostr address <A href="https://njump.me/nprofile1qqsggm4l0xs23qfjwnkfwf6fqcs66s3lz637gaxhl4nwd2vtle8rnfqprfmhxue69uhhg6r9vehhyetnwshxummnw3erztnrdaks5zhueg" title="npub1s3ht77dq4zqnya8vjun5jp3p44pr794ru36d0ltxu65chljw8xjqd975wz" target="_blank">npub1s3h…75wz</A>.
-      </P>
-    
-    <Heading tag='h2' class='h-leather mt-4 mb-2'>Overview</Heading>
-    
-      <P class="mb-4">
-        Alexandria opens up to the <A href="./">landing page</A>, where the user can: login (top-right), select whether to only view the publications hosted on the <A href="https://thecitadel.nostr1.com/" target="_blank">thecitadel document relay</A> or add in their own relays, and scroll/search the publications.
-      </P>
-
-      <div class="flex flex-col items-center space-y-4 my-4">
-        <Img src="/screenshots/LandingPage.png" alt="Landing page" class='image-border rounded-lg' width="400" />
-        <Img src="/screenshots/YourRelays.png" alt="Relay selection" class='image-border rounded-lg' width="400" />
-      </div>
-
-      <P class="mb-3">
-        There is also the ability to view the publications as a diagram, if you click on "Visualize", and to publish an e-book or other document (coming soon).
-      </P>
-
-      <P class="mb-3">
-        If you click on a card, which represents a 30040 index event, the associated reading view opens to the publication. The app then pulls all of the content events (30041s and 30818s for wiki pages), in the order in which they are indexed, and displays them as a single document.
-      </P>
-      
-      <P class="mb-3">
-        Each content section (30041 or 30818) is also a level in the table of contents, which can be accessed from the floating icon top-left in the reading view. This allows for navigation within the publication. (This functionality has been temporarily disabled.)
-      </P>
-
-      <div class="flex flex-col items-center space-y-4 my-4">
-        <Img src="/screenshots/ToC_icon.png" alt="ToC icon" class='image-border rounded-lg' width="400" />
-        <Img src="/screenshots/TableOfContents.png" alt="Table of contents example" class='image-border rounded-lg' width="400" />
-      </div>
-    
-    <Heading tag='h2' class='h-leather mt-4 mb-2'>Typical use cases</Heading>
-
-      <Heading tag='h3' class='h-leather mb-3'>For e-books</Heading>
-      
-      <P class="mb-3">
-        The most common use for Alexandria is for e-books: both those users have written themselves and those uploaded to Nostr from other sources. The first minor version of the app, Gutenberg, is focused on displaying and producing these publications.
-      </P>
-
-      <P class="mb-3">
-        An example of a book is <A href="/publication?d=jane-eyre-an-autobiography-by-charlotte-bront%C3%AB-v-3rd-edition">Jane Eyre</A>
-      </P>
-
-      <div class="flex justify-center my-4">
-        <Img src="/screenshots/JaneEyre.png" alt="Jane Eyre, by Charlotte Brontë" class='image-border rounded-lg' width="400" />
-      </div>
-    
-      <Heading tag='h3' class='h-leather mb-3'>For scientific papers</Heading>
-
-      <P class="mb-3">
-        Alexandria will also display research papers with Asciimath and LaTeX embedding, and the normal advanced formatting options available for Asciidoc. In addition, we will be implementing special citation events, which will serve as an alternative or addition to the normal footnotes.
-      </P>
-
-      <P class="mb-3">
-        Correctly displaying such papers, integrating citations, and allowing them to be reviewed (with kind 1111 comments), and annotated (with highlights) by users, is the focus of the second minor version, Euler.
-      </P>
-
-      <P class="mb-3">
-        Euler will also pioneer the HTTP-based (rather than websocket-based) e-paper compatible version of the web app.
-      </P>
-
-      <P class="mb-3">
-        An example of a research paper is <A href="/publication?d=less-partnering-less-children-or-both-by-j.i.s.-hellstrand-v-1">Less Partnering, Less Children, or Both?</A>
-      </P>
-
-      <div class="flex justify-center my-4">
-        <Img src="/screenshots/ResearchPaper.png" alt="Research paper" class='image-border rounded-lg' width="400" />
-      </div>
-    
-      <Heading tag='h3' class='h-leather mb-3'>For documentation</Heading>
-
-      <P class="mb-3">
-        Our own team uses Alexandria to document the app, to display our <A href="/publication?d=the-gitcitadel-blog-by-stella-v-1">blog entries</A>, as well as to store copies of our most interesting <A href="/publication?d=gitcitadel-project-documentation-by-stella-v-1">technical specifications</A>.
-      </P>
-
-      <div class="flex justify-center my-4">
-        <Img src="/screenshots/Documentation.png" alt="Documentation" class='image-border rounded-lg' width="400" />
-      </div>
-      
-      <Heading tag='h3' class='h-leather mb-3'>For wiki pages</Heading>
-
-      <P class="mb-3">
-        Alexandria now supports wiki pages (kind 30818), allowing for collaborative knowledge bases and documentation. Wiki pages use the same Asciidoc format as other publications but are specifically designed for interconnected, evolving content.
-      </P>
-
-      <P class="mb-3">
-        Wiki pages can be linked to from other publications and can contain links to other wiki pages, creating a web of knowledge that can be navigated and explored.
-      </P>
-    
-    </main>
+      Alexandria is a reader and writer for <A
+        href="/publication?d=gitcitadel-project-documentation-curated-publications-specification-7-by-stella-v-1"
+        >curated publications</A
+      > (in Asciidoc), wiki pages (Asciidoc), and will eventually also support long-form
+      articles (Markdown). It is produced by the <A
+        href="/publication?d=gitcitadel-project-documentation-gitcitadel-project-1-by-stella-v-1"
+        >GitCitadel project team</A
+      >.
+    </P>
+
+    <P class="mb-3">
+      Please submit support issues on the <A
+        href="https://gitcitadel.com/r/naddr1qvzqqqrhnypzquqjyy5zww7uq7hehemjt7juf0q0c9rgv6lv8r2yxcxuf0rvcx9eqy88wumn8ghj7mn0wvhxcmmv9uq3wamnwvaz7tmjv4kxz7fwdehhxarj9e3xzmny9uqsuamnwvaz7tmwdaejumr0dshsqzjpd3jhsctwv3exjcgtpg0n0/issues"
+        target="_blank">Alexandria repo page</A
+      > and follow us on <A
+        href="https://github.com/ShadowySupercode/gitcitadel"
+        target="_blank">GitHub</A
+      > and <A href="https://geyser.fund/project/gitcitadel" target="_blank"
+        >Geyserfund</A
+      >.
+    </P>
+
+    <P>
+      We are easiest to contact over our Nostr address <A
+        href="https://njump.me/nprofile1qqsggm4l0xs23qfjwnkfwf6fqcs66s3lz637gaxhl4nwd2vtle8rnfqprfmhxue69uhhg6r9vehhyetnwshxummnw3erztnrdaks5zhueg"
+        title="npub1s3ht77dq4zqnya8vjun5jp3p44pr794ru36d0ltxu65chljw8xjqd975wz"
+        target="_blank">npub1s3h…75wz</A
+      >.
+    </P>
+
+    <Heading tag="h2" class="h-leather mt-4 mb-2">Overview</Heading>
+
+    <P class="mb-4">
+      Alexandria opens up to the <A href="./">landing page</A>, where the user
+      can: login (top-right), select whether to only view the publications
+      hosted on the <A href="https://thecitadel.nostr1.com/" target="_blank"
+        >thecitadel document relay</A
+      > or add in their own relays, and scroll/search the publications.
+    </P>
+
+    <div class="flex flex-col items-center space-y-4 my-4">
+      <Img
+        src="/screenshots/LandingPage.png"
+        alt="Landing page"
+        class="image-border rounded-lg"
+        width="400"
+      />
+      <Img
+        src="/screenshots/YourRelays.png"
+        alt="Relay selection"
+        class="image-border rounded-lg"
+        width="400"
+      />
+    </div>
+
+    <P class="mb-3">
+      There is also the ability to view the publications as a diagram, if you
+      click on "Visualize", and to publish an e-book or other document (coming
+      soon).
+    </P>
+
+    <P class="mb-3">
+      If you click on a card, which represents a 30040 index event, the
+      associated reading view opens to the publication. The app then pulls all
+      of the content events (30041s and 30818s for wiki pages), in the order in
+      which they are indexed, and displays them as a single document.
+    </P>
+
+    <P class="mb-3">
+      Each content section (30041 or 30818) is also a level in the table of
+      contents, which can be accessed from the floating icon top-left in the
+      reading view. This allows for navigation within the publication. (This
+      functionality has been temporarily disabled.)
+    </P>
+
+    <div class="flex flex-col items-center space-y-4 my-4">
+      <Img
+        src="/screenshots/ToC_icon.png"
+        alt="ToC icon"
+        class="image-border rounded-lg"
+        width="400"
+      />
+      <Img
+        src="/screenshots/TableOfContents.png"
+        alt="Table of contents example"
+        class="image-border rounded-lg"
+        width="400"
+      />
+    </div>
+
+    <Heading tag="h2" class="h-leather mt-4 mb-2">Typical use cases</Heading>
+
+    <Heading tag="h3" class="h-leather mb-3">For e-books</Heading>
+
+    <P class="mb-3">
+      The most common use for Alexandria is for e-books: both those users have
+      written themselves and those uploaded to Nostr from other sources. The
+      first minor version of the app, Gutenberg, is focused on displaying and
+      producing these publications.
+    </P>
+
+    <P class="mb-3">
+      An example of a book is <A
+        href="/publication?d=jane-eyre-an-autobiography-by-charlotte-bront%C3%AB-v-3rd-edition"
+        >Jane Eyre</A
+      >
+    </P>
+
+    <div class="flex justify-center my-4">
+      <Img
+        src="/screenshots/JaneEyre.png"
+        alt="Jane Eyre, by Charlotte Brontë"
+        class="image-border rounded-lg"
+        width="400"
+      />
+    </div>
+
+    <Heading tag="h3" class="h-leather mb-3">For scientific papers</Heading>
+
+    <P class="mb-3">
+      Alexandria will also display research papers with Asciimath and LaTeX
+      embedding, and the normal advanced formatting options available for
+      Asciidoc. In addition, we will be implementing special citation events,
+      which will serve as an alternative or addition to the normal footnotes.
+    </P>
+
+    <P class="mb-3">
+      Correctly displaying such papers, integrating citations, and allowing them
+      to be reviewed (with kind 1111 comments), and annotated (with highlights)
+      by users, is the focus of the second minor version, Euler.
+    </P>
+
+    <P class="mb-3">
+      Euler will also pioneer the HTTP-based (rather than websocket-based)
+      e-paper compatible version of the web app.
+    </P>
+
+    <P class="mb-3">
+      An example of a research paper is <A
+        href="/publication?d=less-partnering-less-children-or-both-by-julia-hellstrand-v-1"
+        >Less Partnering, Less Children, or Both?</A
+      >
+    </P>
+
+    <div class="flex justify-center my-4">
+      <Img
+        src="/screenshots/ResearchPaper.png"
+        alt="Research paper"
+        class="image-border rounded-lg"
+        width="400"
+      />
+    </div>
+
+    <Heading tag="h3" class="h-leather mb-3">For documentation</Heading>
+
+    <P class="mb-3">
+      Our own team uses Alexandria to document the app, to display our <A
+        href="/publication?d=the-gitcitadel-blog-by-stella-v-1">blog entries</A
+      >, as well as to store copies of our most interesting <A
+        href="/publication?d=gitcitadel-project-documentation-by-stella-v-1"
+        >technical specifications</A
+      >.
+    </P>
+
+    <div class="flex justify-center my-4">
+      <Img
+        src="/screenshots/Documentation.png"
+        alt="Documentation"
+        class="image-border rounded-lg"
+        width="400"
+      />
+    </div>
+
+    <Heading tag="h3" class="h-leather mb-3">For wiki pages</Heading>
+
+    <P class="mb-3">
+      Alexandria now supports wiki pages (kind 30818), allowing for
+      collaborative knowledge bases and documentation. Wiki pages, such as this
+      one about the <A href="/publication?d=sybil">Sybil utility</A> use the same
+      Asciidoc format as other publications but are specifically designed for interconnected,
+      evolving content.
+    </P>
+
+    <P class="mb-3">
+      Wiki pages can be linked to from other publications and can contain links
+      to other wiki pages, creating a web of knowledge that can be navigated and
+      explored.
+    </P>
+  </main>
 </div>