diff --git a/src/lib/components/ZettelEditor.svelte b/src/lib/components/ZettelEditor.svelte
index 717f47b..684865c 100644
--- a/src/lib/components/ZettelEditor.svelte
+++ b/src/lib/components/ZettelEditor.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
   import { Button } from "flowbite-svelte";
-  import { EyeOutline, QuestionCircleOutline, ChartPieOutline } from "flowbite-svelte-icons";
+  import {
+    EyeOutline,
+    QuestionCircleOutline,
+    ChartPieOutline,
+  } from "flowbite-svelte-icons";
   import { EditorView, basicSetup } from "codemirror";
   import { EditorState, StateField, StateEffect } from "@codemirror/state";
   import { markdown } from "@codemirror/lang-markdown";
@@ -8,14 +12,17 @@
   import { RangeSet } from "@codemirror/state";
   import { onMount } from "svelte";
   import {
-  extractSmartMetadata,
-  type AsciiDocMetadata,
-  metadataToTags,
-  parseSimpleAttributes,
-} from "$lib/utils/asciidoc_metadata";
-import { parseAsciiDocWithTree, exportEventsFromTree } from "$lib/utils/asciidoc_publication_parser";
-import { getNdkContext } from "$lib/ndk";
-import Asciidoctor from "asciidoctor";
+    extractSmartMetadata,
+    type AsciiDocMetadata,
+    metadataToTags,
+    parseSimpleAttributes,
+  } from "$lib/utils/asciidoc_metadata";
+  import {
+    parseAsciiDocWithTree,
+    exportEventsFromTree,
+  } from "$lib/utils/asciidoc_publication_parser";
+  import { getNdkContext } from "$lib/ndk";
+  import Asciidoctor from "asciidoctor";
 
   // Initialize Asciidoctor processor
   const asciidoctor = Asciidoctor();
@@ -51,17 +58,19 @@ import Asciidoctor from "asciidoctor";
   // State for PublicationTree result
   let publicationResult = $state<any>(null);
   let generatedEvents = $state<any>(null);
-  let contentType = $state<'article' | 'scattered-notes' | 'none'>('none');
-  
+  let contentType = $state<"article" | "scattered-notes" | "none">("none");
 
   // Note: updateEditorContent() is only called manually when needed
   // The automatic effect was causing feedback loops with user typing
 
   // Effect to update syntax highlighting when parsing results change
   $effect(() => {
-    if (editorView && (parsedSections || publicationResult?.metadata?.eventStructure)) {
+    if (
+      editorView &&
+      (parsedSections || publicationResult?.metadata?.eventStructure)
+    ) {
       editorView.dispatch({
-        effects: updateHighlighting.of(parsedSections || [])
+        effects: updateHighlighting.of(parsedSections || []),
       });
     }
   });
@@ -75,17 +84,17 @@ import Asciidoctor from "asciidoctor";
     if (!content.trim() || !ndk) {
       publicationResult = null;
       generatedEvents = null;
-      contentType = 'none';
+      contentType = "none";
       return;
     }
-    
-    // Use new hierarchical tree processor for NKBIP-01 compliance  
+
+    // Use new hierarchical tree processor for NKBIP-01 compliance
     parseAsciiDocWithTree(content, ndk, parseLevel)
-      .then(result => {
+      .then((result) => {
         console.log("Tree factory result:", result);
         publicationResult = result;
         contentType = result.metadata.contentType;
-        
+
         // Export events for publishing workflow
         const events = exportEventsFromTree(result);
         generatedEvents = events;
@@ -93,11 +102,11 @@ import Asciidoctor from "asciidoctor";
         console.log("Event structure:", result.metadata.eventStructure);
         return events;
       })
-      .catch(error => {
+      .catch((error) => {
         console.error("Tree factory error:", error);
         publicationResult = null;
         generatedEvents = null;
-        contentType = 'none';
+        contentType = "none";
       });
   });
 
@@ -117,17 +126,17 @@ import Asciidoctor from "asciidoctor";
   function generateParseLevelOptions(minLevel: number, maxLevel: number) {
     const options = [];
     for (let level = minLevel; level <= maxLevel; level++) {
-      const equals = '='.repeat(level);
-      const nextEquals = '='.repeat(level + 1);
-      
+      const equals = "=".repeat(level);
+      const nextEquals = "=".repeat(level + 1);
+
       let label;
       if (level === 2) {
         label = `Level ${level} (${equals} → content events with nested AsciiDoc)`;
       } else {
-        const prevEquals = '='.repeat(level - 1);
+        const prevEquals = "=".repeat(level - 1);
         label = `Level ${level} (${prevEquals} → index events, ${equals} → content events)`;
       }
-      
+
       options.push({ level, label });
     }
     return options;
@@ -135,35 +144,41 @@ import Asciidoctor from "asciidoctor";
 
   // Parse sections for preview display using hierarchical eventStructure
   let parsedSections = $derived.by(() => {
-    if (!publicationResult || !publicationResult.metadata?.eventStructure) return [];
-    
+    if (!publicationResult || !publicationResult.metadata?.eventStructure)
+      return [];
+
     console.log("Preview: publicationResult structure:", {
       hasContentEvents: !!publicationResult.contentEvents,
       contentEventsLength: publicationResult.contentEvents?.length,
       hasEventStructure: !!publicationResult.metadata.eventStructure,
       eventStructureLength: publicationResult.metadata.eventStructure?.length,
-      keys: Object.keys(publicationResult)
+      keys: Object.keys(publicationResult),
     });
-    
+
     // Helper to get d-tag from event (works with both NDK events and serialized events)
     const getEventDTag = (event: any) => {
       if (event?.tagValue) {
         // NDK event
-        return event.tagValue('d');
+        return event.tagValue("d");
       } else if (event?.tags) {
         // Serialized event
-        return event.tags.find((t: string[]) => t[0] === 'd')?.[1];
+        return event.tags.find((t: string[]) => t[0] === "d")?.[1];
       }
       return null;
     };
 
-    // Helper to find event by dTag
-    const findEventByDTag = (events: any[], dTag: string) => {
-      return events.find(event => {
-        return getEventDTag(event) === dTag;
+    // Helper to find event by dTag and kind
+    const findEventByDTag = (events: any[], dTag: string, eventKind?: number) => {
+      return events.find((event) => {
+        const matchesDTag = getEventDTag(event) === dTag;
+        if (eventKind !== undefined) {
+          const eventKindValue = event?.kind || (event?.tagValue ? event.tagValue("k") : null);
+          return matchesDTag && eventKindValue === eventKind;
+        }
+        return matchesDTag;
       });
     };
-    
+
     // Flatten eventStructure recursively to show all nodes
     function flattenNodes(nodes: any[], result: any[] = []): any[] {
       for (const node of nodes) {
@@ -174,42 +189,71 @@ import Asciidoctor from "asciidoctor";
       }
       return result;
     }
-    
+
     let flatNodes: any[] = [];
     if (publicationResult.metadata.eventStructure.length > 0) {
       flatNodes = flattenNodes(publicationResult.metadata.eventStructure);
     }
-    
+
     // Map nodes to display sections
     return flatNodes.map((node: any) => {
       // For the root index, use indexEvent. For others, find in contentEvents
       let event;
-      if (publicationResult.indexEvent && node.dTag === getEventDTag(publicationResult.indexEvent)) {
+      if (
+        publicationResult.indexEvent &&
+        node.dTag === getEventDTag(publicationResult.indexEvent)
+      ) {
         event = publicationResult.indexEvent;
       } else {
         // contentEvents can contain both 30040 and 30041 events at parse level 3+
-        event = findEventByDTag(publicationResult.contentEvents, node.dTag);
+        // Use eventKind to find the correct event type
+        event = findEventByDTag(publicationResult.contentEvents, node.dTag, node.eventKind);
       }
-      
-      const tags = event?.tags.filter((t: string[]) => t[0] === 't') || [];
-      
+
+      const tags = event?.tags.filter((t: string[]) => t[0] === "t") || [];
+
       // Extract the title from the title tag
-      const titleTag = event?.tags.find((t: string[]) => t[0] === 'title');
+      const titleTag = event?.tags.find((t: string[]) => t[0] === "title");
       const eventTitle = titleTag ? titleTag[1] : node.title;
-      
+
+      // Debug logging for Chapter 1 event finding
+      if (node.title === "Chapter 1") {
+        console.log("[DEBUG] Chapter 1 preview processing:");
+        console.log("  node.title:", node.title);
+        console.log("  node.dTag:", node.dTag);
+        console.log("  node.eventType:", node.eventType);
+        console.log("  node.eventKind:", node.eventKind);
+        console.log("  found event:", !!event);
+        console.log("  event?.content:", JSON.stringify(event?.content));
+        if (event) {
+          console.log("  event d-tag:", getEventDTag(event));
+          console.log("  event tags:", event.tags);
+        }
+        console.log("  contentEvents available:", publicationResult.contentEvents?.map(e => ({
+          dTag: getEventDTag(e),
+          content: e.content?.substring(0, 50) + "..."
+        })));
+      }
+
       // For content events, remove the first heading from content since we'll use the title tag
-      let processedContent = event?.content || '';
-      if (event && node.eventType === 'content') {
+      let processedContent = event?.content || "";
+      if (event && node.eventType === "content") {
         // Remove the first heading line (which should match the title)
-        const lines = processedContent.split('\n');
-        const firstHeadingIndex = lines.findIndex((line: string) => line.match(/^=+\s+/));
+        const lines = processedContent.split("\n");
+        const firstHeadingIndex = lines.findIndex((line: string) =>
+          line.match(/^=+\s+/),
+        );
         if (firstHeadingIndex !== -1) {
           // Remove the heading line and join back
           lines.splice(firstHeadingIndex, 1);
-          processedContent = lines.join('\n').trim();
+          processedContent = lines.join("\n").trim();
         }
       }
-      
+
+      if (node.title === "Chapter 1") {
+        console.log("  final processedContent:", JSON.stringify(processedContent));
+      }
+
       return {
         title: eventTitle,
         content: processedContent,
@@ -217,7 +261,7 @@ import Asciidoctor from "asciidoctor";
         level: node.level,
         isIndex: node.eventKind === 30040,
         eventKind: node.eventKind,
-        eventType: node.eventType
+        eventType: node.eventType,
       };
     });
   });
@@ -225,19 +269,19 @@ import Asciidoctor from "asciidoctor";
   // Publishing handlers
   function handlePublish() {
     if (!generatedEvents) return;
-    
+
     try {
       // Deep clone the events to ensure they're fully serializable
       // This prevents postMessage cloning errors
       const serializableEvents = JSON.parse(JSON.stringify(generatedEvents));
-      
-      if (contentType === 'article' && serializableEvents.indexEvent) {
+
+      if (contentType === "article" && serializableEvents.indexEvent) {
         // Full article: publish both index event (30040) and content events (30041)
         onPublishArticle(serializableEvents);
-      } else if (contentType === 'scattered-notes') {
+      } else if (contentType === "scattered-notes") {
         // Only notes: publish just the content events (30041)
         const notesOnly = {
-          contentEvents: serializableEvents.contentEvents
+          contentEvents: serializableEvents.contentEvents,
         };
         onPublishScatteredNotes(notesOnly);
       }
@@ -248,19 +292,29 @@ import Asciidoctor from "asciidoctor";
       if (generatedEvents) {
         console.error("Keys in generatedEvents:", Object.keys(generatedEvents));
         if (generatedEvents.indexEvent) {
-          console.error("indexEvent type:", typeof generatedEvents.indexEvent, generatedEvents.indexEvent?.constructor?.name);
+          console.error(
+            "indexEvent type:",
+            typeof generatedEvents.indexEvent,
+            generatedEvents.indexEvent?.constructor?.name,
+          );
         }
         if (generatedEvents.contentEvents?.[0]) {
-          console.error("First contentEvent type:", typeof generatedEvents.contentEvents[0], generatedEvents.contentEvents[0]?.constructor?.name);
+          console.error(
+            "First contentEvent type:",
+            typeof generatedEvents.contentEvents[0],
+            generatedEvents.contentEvents[0]?.constructor?.name,
+          );
         }
       }
-      alert("Error: Events contain non-serializable data. Check console for details.");
+      alert(
+        "Error: Events contain non-serializable data. Check console for details.",
+      );
     }
   }
 
   // Tutorial sidebar state
   let showTutorial = $state(false);
-  
+
   // Structure preview sidebar state
   let showStructurePreview = $state(false);
 
@@ -274,7 +328,7 @@ import Asciidoctor from "asciidoctor";
   function toggleTutorial() {
     showTutorial = !showTutorial;
   }
-  
+
   // Toggle structure preview sidebar
   function toggleStructurePreview() {
     showStructurePreview = !showStructurePreview;
@@ -295,33 +349,39 @@ import Asciidoctor from "asciidoctor";
     update(decorations, tr) {
       // Update decorations when content changes or highlighting is updated
       decorations = decorations.map(tr.changes);
-      
+
       for (let effect of tr.effects) {
         if (effect.is(updateHighlighting)) {
           decorations = createHeaderDecorations(tr.state, effect.value);
         }
       }
-      
+
       return decorations;
     },
-    provide: (f) => EditorView.decorations.from(f)
+    provide: (f) => EditorView.decorations.from(f),
   });
 
   // Function to create header decorations based on parsed sections
-  function createHeaderDecorations(state: EditorState, sections: any[]): DecorationSet {
-    const ranges: Array<{from: number, to: number, decoration: any}> = [];
+  function createHeaderDecorations(
+    state: EditorState,
+    sections: any[],
+  ): DecorationSet {
+    const ranges: Array<{ from: number; to: number; decoration: any }> = [];
     const doc = state.doc;
     const content = doc.toString();
-    const lines = content.split('\n');
-    
+    const lines = content.split("\n");
+
     // Analyze document structure for ambiguity detection
     const documentStructure = analyzeDocumentStructure(lines);
-    
+
     // Create a map of header text to section info for fast lookup from actual event structure
     const sectionMap = new Map();
     if (publicationResult?.metadata?.eventStructure) {
       // Flatten the event structure to get all nodes with their actual event types
-      const flattenEventStructure = (nodes: any[], result: any[] = []): any[] => {
+      const flattenEventStructure = (
+        nodes: any[],
+        result: any[] = [],
+      ): any[] => {
         for (const node of nodes) {
           result.push(node);
           if (node.children && node.children.length > 0) {
@@ -331,79 +391,96 @@ import Asciidoctor from "asciidoctor";
         return result;
       };
 
-      const allEventNodes = flattenEventStructure(publicationResult.metadata.eventStructure);
-      
+      const allEventNodes = flattenEventStructure(
+        publicationResult.metadata.eventStructure,
+      );
+
       // Debug: log the event structure
-      console.log('Event structure nodes for highlighting:', allEventNodes.map(n => ({
-        title: n.title,
-        level: n.level,
-        eventType: n.eventType,
-        eventKind: n.eventKind
-      })));
-      
-      allEventNodes.forEach(node => {
+      console.log(
+        "Event structure nodes for highlighting:",
+        allEventNodes.map((n) => ({
+          title: n.title,
+          level: n.level,
+          eventType: n.eventType,
+          eventKind: n.eventKind,
+        })),
+      );
+
+      allEventNodes.forEach((node) => {
         if (node.title) {
           sectionMap.set(node.title.toLowerCase().trim(), {
             level: node.level,
             isEventTitle: true,
             eventType: node.eventType,
-            eventKind: node.eventKind
+            eventKind: node.eventKind,
           });
         }
       });
     }
-    
+
     let pos = 0;
     for (let i = 0; i < lines.length; i++) {
       const line = lines[i];
       const headerMatch = line.match(/^(=+)\s+(.+)$/);
-      
+
       if (headerMatch) {
         const level = headerMatch[1].length;
         const headerText = headerMatch[2].trim().toLowerCase();
         const lineStart = pos;
         const lineEnd = pos + line.length;
-        
+
         // Check if this header is an event title
         const sectionInfo = sectionMap.get(headerText);
         let className: string;
-        
-        // Determine highlighting based on structural analysis first
-        if (level === 1) {
+
+        // Check for ambiguous syntax first (highest priority)
+        if (
+          isAmbiguousHeader(
+            level,
+            headerText,
+            documentStructure,
+            parseLevel,
+            lines,
+            i,
+            publicationResult,
+          )
+        ) {
+          className = "cm-header-potential-event"; // Amber for ambiguous
+        }
+        // Determine highlighting based on structural analysis
+        else if (level === 1) {
           // Document title is always an index event (blue)
-          className = 'cm-header-index-event';
+          className = "cm-header-index-event";
         } else if (level === parseLevel) {
           // Headers at parse level are content events (green)
-          className = 'cm-header-content-event';
+          className = "cm-header-content-event";
         } else if (level < parseLevel) {
           // Headers above parse level that could have children are index events (blue)
           // Check if this header has children by looking ahead in the document
           const hasChildren = headerHasChildren(lines, i, level);
           if (hasChildren) {
-            className = 'cm-header-index-event'; // Blue for sections with children
+            className = "cm-header-index-event"; // Blue for sections with children
           } else {
-            className = 'cm-header-content-event'; // Green for sections without children
+            className = "cm-header-content-event"; // Green for sections without children
           }
-        } else if (isAmbiguousHeader(level, headerText, documentStructure, parseLevel)) {
-          className = 'cm-header-potential-event'; // Amber for ambiguous
         } else if (level > parseLevel) {
-          className = 'cm-header-subcontent'; // Gray for subheaders below parse level
+          className = "cm-header-subcontent"; // Gray for subheaders below parse level
         } else {
-          className = 'cm-header-potential-event'; // Amber for unclear cases
+          className = "cm-header-potential-event"; // Amber for unclear cases
         }
-        
+
         ranges.push({
           from: lineStart,
           to: lineEnd,
-          decoration: Decoration.mark({ class: className })
+          decoration: Decoration.mark({ class: className }),
         });
       }
-      
+
       pos += line.length + 1; // +1 for newline
     }
-    
+
     console.log(`Created ${ranges.length} header decorations`);
-    return RangeSet.of(ranges.map(r => r.decoration.range(r.from, r.to)));
+    return RangeSet.of(ranges.map((r) => r.decoration.range(r.from, r.to)));
   }
 
   // Analyze document structure to detect ambiguous patterns
@@ -412,7 +489,7 @@ import Asciidoctor from "asciidoctor";
     let level1Headers = 0;
     let level2Headers = 0;
     let level3PlusHeaders = 0;
-    
+
     for (const line of lines) {
       const headerMatch = line.match(/^(=+)\s+(.+)$/);
       if (headerMatch) {
@@ -427,26 +504,35 @@ import Asciidoctor from "asciidoctor";
         }
       }
     }
-    
+
     return {
       hasDocumentTitle,
       level1Headers,
       level2Headers,
       level3PlusHeaders,
-      contentType: hasDocumentTitle && level2Headers > 0 ? 'article' : level2Headers > 0 ? 'scattered-notes' : 'none'
+      contentType:
+        hasDocumentTitle && level2Headers > 0
+          ? "article"
+          : level2Headers > 0
+            ? "scattered-notes"
+            : "none",
     };
   }
 
   // Check if a header has children by looking ahead in the document
-  function headerHasChildren(lines: string[], headerIndex: number, headerLevel: number): boolean {
+  function headerHasChildren(
+    lines: string[],
+    headerIndex: number,
+    headerLevel: number,
+  ): boolean {
     // Look ahead to see if there are any headers at a deeper level
     for (let i = headerIndex + 1; i < lines.length; i++) {
       const line = lines[i];
       const headerMatch = line.match(/^(=+)\s+(.+)$/);
-      
+
       if (headerMatch) {
         const nextLevel = headerMatch[1].length;
-        
+
         if (nextLevel > headerLevel) {
           // Found a deeper header - this header has children
           return true;
@@ -456,43 +542,110 @@ import Asciidoctor from "asciidoctor";
         }
       }
     }
-    
+
     // Reached end of document with no headers found - no children
     return false;
   }
 
   // Check if a header represents ambiguous syntax
   function isAmbiguousHeader(
-    level: number, 
-    headerText: string, 
-    structure: any, 
-    parseLevel: number
+    level: number,
+    headerText: string,
+    structure: any,
+    parseLevel: number,
+    lines: string[] = [],
+    headerIndex: number = -1,
+    pubResult: any = null,
   ): boolean {
-    // Case 1: Document has title (=) but user might expect level 2 headers to be top-level notes
-    if (level === 2 && structure.hasDocumentTitle && structure.level2Headers > 0) {
+    // Case 1: Header immediately follows another header or attributes without blank line separation
+    // This is invalid AsciiDoc syntax and won't parse correctly
+    if (headerIndex > 0 && lines.length > headerIndex) {
+      const prevLine = lines[headerIndex - 1];
+
+      // Check if previous line is also a header
+      if (prevLine.match(/^=+\s+/)) {
+        // No blank line between headers - this is invalid AsciiDoc
+        return true;
+      }
+
+      // Check if previous line is an attribute (like :tags: test, notes)
+      if (prevLine.match(/^:[^:]+:/)) {
+        // Header immediately follows attribute line - missing required blank line
+        return true;
+      }
+
+      // Check if this header should be parsed but isn't due to improper separation
+      // This specifically catches cases where AsciiDoc parser failed to separate sections
+      if (level === parseLevel && pubResult) {
+        // Check if this header exists in the parsed structure - if not, it might be improperly separated
+        const headerTitle = headerText.toLowerCase().trim();
+
+        // Look through the event structure to see if this header was parsed as a separate event
+        const sectionMap = new Map();
+        if (publicationResult.metadata?.eventStructure) {
+          const flattenEventStructure = (
+            nodes: any[],
+            result: any[] = [],
+          ): any[] => {
+            for (const node of nodes) {
+              result.push(node);
+              if (node.children && node.children.length > 0) {
+                flattenEventStructure(node.children, result);
+              }
+            }
+            return result;
+          };
+
+          const allEventNodes = flattenEventStructure(
+            publicationResult.metadata.eventStructure,
+          );
+          allEventNodes.forEach((node) => {
+            if (node.title) {
+              sectionMap.set(node.title.toLowerCase().trim(), true);
+            }
+          });
+        }
+
+        // If this header isn't in the parsed structure, it might be improperly separated
+        if (!sectionMap.has(headerTitle)) {
+          return true; // Header exists in source but not in parsed structure
+        }
+      }
+    }
+
+    // Case 2: Document has title (=) but user might expect level 2 headers to be top-level notes
+    if (
+      level === 2 &&
+      structure.hasDocumentTitle &&
+      structure.level2Headers > 0
+    ) {
       // This is actually correct for articles, not ambiguous
       return false;
     }
-    
-    // Case 2: Multiple level 1 headers (ambiguous document structure)
+
+    // Case 3: Multiple level 1 headers (ambiguous document structure)
     if (level === 1 && structure.level1Headers > 1) {
       return true; // Multiple document titles are ambiguous
     }
-    
-    // Case 3: Headers at parse level that aren't being extracted due to structural issues
+
+    // Case 4: Headers at parse level that aren't being extracted due to structural issues
     if (level === parseLevel) {
       // If this header level should be extracted but isn't in the event structure,
       // it might be ambiguous (this requires checking against publicationResult)
-      if (structure.contentType === 'none' && level === 2) {
+      if (structure.contentType === "none" && level === 2) {
         return true; // Level 2 headers with no clear structure
       }
     }
-    
-    // Case 4: Orphaned high-level headers (e.g., === without ==)
-    if (level === 3 && structure.level2Headers === 0 && structure.hasDocumentTitle) {
+
+    // Case 5: Orphaned high-level headers (e.g., === without ==)
+    if (
+      level === 3 &&
+      structure.level2Headers === 0 &&
+      structure.hasDocumentTitle
+    ) {
       return true; // Level 3 without level 2 parent in article structure
     }
-    
+
     return false;
   }
 
@@ -503,43 +656,43 @@ import Asciidoctor from "asciidoctor";
     // Create custom theme with header highlighting classes
     const headerHighlighting = EditorView.theme({
       // Event titles (extracted as separate events)
-      '.cm-header-index-event': { 
-        color: '#3B82F6', // blue-500 for index events (30040)
-        fontWeight: '700',
-        fontSize: '1.1em',
-        backgroundColor: 'rgba(59, 130, 246, 0.1)',
-        borderLeft: '3px solid #3B82F6',
-        paddingLeft: '8px'
+      ".cm-header-index-event": {
+        color: "#3B82F6", // blue-500 for index events (30040)
+        fontWeight: "700",
+        fontSize: "1.1em",
+        backgroundColor: "rgba(59, 130, 246, 0.1)",
+        borderLeft: "3px solid #3B82F6",
+        paddingLeft: "8px",
       },
-      '.cm-header-content-event': { 
-        color: '#10B981', // emerald-500 for content events (30041)
-        fontWeight: '700', 
-        fontSize: '1.1em',
-        backgroundColor: 'rgba(16, 185, 129, 0.1)',
-        borderLeft: '3px solid #10B981',
-        paddingLeft: '8px'
+      ".cm-header-content-event": {
+        color: "#10B981", // emerald-500 for content events (30041)
+        fontWeight: "700",
+        fontSize: "1.1em",
+        backgroundColor: "rgba(16, 185, 129, 0.1)",
+        borderLeft: "3px solid #10B981",
+        paddingLeft: "8px",
       },
-      '.cm-header-event-title': {
-        color: '#8B5CF6', // violet-500 for other event types
-        fontWeight: '700',
-        fontSize: '1.1em',
-        backgroundColor: 'rgba(139, 92, 246, 0.1)',
-        borderLeft: '3px solid #8B5CF6',
-        paddingLeft: '8px'
+      ".cm-header-event-title": {
+        color: "#8B5CF6", // violet-500 for other event types
+        fontWeight: "700",
+        fontSize: "1.1em",
+        backgroundColor: "rgba(139, 92, 246, 0.1)",
+        borderLeft: "3px solid #8B5CF6",
+        paddingLeft: "8px",
       },
       // Potential events (at parse level but not extracted yet)
-      '.cm-header-potential-event': {
-        color: '#F59E0B', // amber-500 for headers at parse level
-        fontWeight: '600',
-        textDecoration: 'underline',
-        textDecorationStyle: 'dotted'
+      ".cm-header-potential-event": {
+        color: "#F59E0B", // amber-500 for headers at parse level
+        fontWeight: "600",
+        textDecoration: "underline",
+        textDecorationStyle: "dotted",
       },
       // Subcontent headers (below parse level, part of content)
-      '.cm-header-subcontent': {
-        color: '#6B7280', // gray-500 for regular subheaders
-        fontWeight: '500',
-        fontStyle: 'italic'
-      }
+      ".cm-header-subcontent": {
+        color: "#6B7280", // gray-500 for regular subheaders
+        fontWeight: "500",
+        fontStyle: "italic",
+      },
     });
 
     const state = EditorState.create({
@@ -555,49 +708,50 @@ import Asciidoctor from "asciidoctor";
           }
         }),
         EditorView.theme({
-          '&': {
-            fontSize: '14px',
-            fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace',
-            height: '100%'
+          "&": {
+            fontSize: "14px",
+            fontFamily:
+              'ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace',
+            height: "100%",
           },
-          '.cm-content': {
-            padding: '16px',
-            minHeight: '100%'
+          ".cm-content": {
+            padding: "16px",
+            minHeight: "100%",
           },
-          '.cm-editor': {
-            borderRadius: '0.5rem',
-            height: '100%'
+          ".cm-editor": {
+            borderRadius: "0.5rem",
+            height: "100%",
           },
-          '.cm-scroller': {
-            overflow: 'auto',
-            height: '100%',
-            fontFamily: 'inherit'
+          ".cm-scroller": {
+            overflow: "auto",
+            height: "100%",
+            fontFamily: "inherit",
           },
-          '.cm-focused': {
-            outline: 'none'
-          }
-        })
-      ]
+          ".cm-focused": {
+            outline: "none",
+          },
+        }),
+      ],
     });
 
     editorView = new EditorView({
       state,
-      parent: editorContainer
+      parent: editorContainer,
     });
   }
 
   // Update editor content when content prop changes
   function updateEditorContent() {
     if (!editorView) return;
-    
+
     const currentContent = editorView.state.doc.toString();
     if (currentContent !== content) {
       editorView.dispatch({
         changes: {
           from: 0,
           to: currentContent.length,
-          insert: content
-        }
+          insert: content,
+        },
       });
     }
   }
@@ -605,28 +759,35 @@ import Asciidoctor from "asciidoctor";
   // Mount CodeMirror when component mounts
   onMount(() => {
     createEditor();
-    
+
     return () => {
       if (editorView) {
         editorView.destroy();
       }
     };
   });
-
 </script>
 
 <div class="flex flex-col space-y-4">
   <!-- Smart Publishing Interface -->
-  <div class="bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4 mb-4">
+  <div
+    class="bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4 mb-4"
+  >
     <div class="flex items-start justify-between">
       <div class="flex-1">
         <h3 class="text-sm font-medium text-gray-800 dark:text-gray-200 mb-2">
           Unified AsciiDoc Publisher
         </h3>
-        <div class="flex flex-col lg:flex-row lg:items-center lg:space-x-4 mb-3 space-y-2 lg:space-y-0">
+        <div
+          class="flex flex-col lg:flex-row lg:items-center lg:space-x-4 mb-3 space-y-2 lg:space-y-0"
+        >
           <div class="flex items-center space-x-2">
-            <label for="parse-level" class="text-xs text-gray-600 dark:text-gray-400 font-medium">Parse Level:</label>
-            <select 
+            <label
+              for="parse-level"
+              class="text-xs text-gray-600 dark:text-gray-400 font-medium"
+              >Parse Level:</label
+            >
+            <select
               id="parse-level"
               bind:value={parseLevel}
               class="text-xs px-2 py-1 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
@@ -636,28 +797,37 @@ import Asciidoctor from "asciidoctor";
               {/each}
             </select>
           </div>
-          
+
           <div class="text-xs text-gray-600 dark:text-gray-400">
             <span class="font-medium">Content Type:</span>
-            <span class="ml-1 px-2 py-0.5 rounded-full text-xs font-medium {
-              contentType === 'article' ? 'bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-200' :
-              contentType === 'scattered-notes' ? 'bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-200' :
-              'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200'
-            }">
-              {contentType === 'article' ? 'Article' : contentType === 'scattered-notes' ? 'Notes' : 'None'}
+            <span
+              class="ml-1 px-2 py-0.5 rounded-full text-xs font-medium {contentType ===
+              'article'
+                ? 'bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-200'
+                : contentType === 'scattered-notes'
+                  ? 'bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-200'
+                  : 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200'}"
+            >
+              {contentType === "article"
+                ? "Article"
+                : contentType === "scattered-notes"
+                  ? "Notes"
+                  : "None"}
             </span>
           </div>
-          
+
           {#if generatedEvents}
             <div class="text-xs text-gray-600 dark:text-gray-400">
               <span class="font-medium">Events:</span>
-              <span class="ml-1">{generatedEvents.contentEvents.length + (generatedEvents.indexEvent ? 1 : 0)}</span>
+              <span class="ml-1"
+                >{generatedEvents.contentEvents.length +
+                  (generatedEvents.indexEvent ? 1 : 0)}</span
+              >
             </div>
           {/if}
         </div>
-        
       </div>
-      
+
       <!-- Button on the right side of publisher -->
       {#if publicationResult?.metadata?.eventStructure && generatedEvents}
         <Button
@@ -673,7 +843,9 @@ import Asciidoctor from "asciidoctor";
     </div>
   </div>
 
-  <div class="flex flex-col lg:flex-row items-center justify-between space-y-2 lg:space-y-0">
+  <div
+    class="flex flex-col lg:flex-row items-center justify-between space-y-2 lg:space-y-0"
+  >
     <div class="flex items-center space-x-2">
       <Button
         color="light"
@@ -697,19 +869,13 @@ import Asciidoctor from "asciidoctor";
         class="flex items-center space-x-1"
       >
         <QuestionCircleOutline class="w-4 h-4" />
-        <span>{showTutorial ? 'Hide' : 'Show'} Help</span>
+        <span>{showTutorial ? "Hide" : "Show"} Help</span>
       </Button>
     </div>
 
     <!-- Publishing Button -->
-    {#if generatedEvents && contentType !== 'none'}
-      <Button
-        color="primary"
-        size="sm"
-        onclick={handlePublish}
-      >
-        Publish
-      </Button>
+    {#if generatedEvents && contentType !== "none"}
+      <Button color="primary" size="sm" onclick={handlePublish}>Publish</Button>
     {:else}
       <div class="text-xs text-gray-500 dark:text-gray-400">
         Add content to enable publishing
@@ -717,23 +883,40 @@ import Asciidoctor from "asciidoctor";
     {/if}
   </div>
 
-  <div class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:space-x-6 h-[60vh] min-h-[400px] max-h-[800px]">
+  <div
+    class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:space-x-6 h-[60vh] min-h-[400px] max-h-[800px]"
+  >
     <!-- Editor Panel -->
-    <div class="{(showPreview && (showTutorial || showStructurePreview)) || (showTutorial && showStructurePreview) ? 'lg:w-1/3' : showPreview || showTutorial || showStructurePreview ? 'lg:w-1/2' : 'w-full'} flex flex-col">
-      <div class="flex-1 relative border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900" style="overflow: hidden;">
+    <div
+      class="{(showPreview && (showTutorial || showStructurePreview)) ||
+      (showTutorial && showStructurePreview)
+        ? 'lg:w-1/3'
+        : showPreview || showTutorial || showStructurePreview
+          ? 'lg:w-1/2'
+          : 'w-full'} flex flex-col"
+    >
+      <div
+        class="flex-1 relative border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-900"
+        style="overflow: hidden;"
+      >
         <!-- CodeMirror Editor Container -->
-        <div
-          bind:this={editorContainer}
-          class="w-full h-full"
-        ></div>
+        <div bind:this={editorContainer} class="w-full h-full"></div>
       </div>
     </div>
 
     <!-- Preview Panel -->
     {#if showPreview}
-      <div class="{showTutorial || showStructurePreview ? 'lg:w-1/3' : 'lg:w-1/2'} flex flex-col">
-        <div class="border border-gray-200 dark:border-gray-700 rounded-lg h-full flex flex-col overflow-hidden">
-          <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
+      <div
+        class="{showTutorial || showStructurePreview
+          ? 'lg:w-1/3'
+          : 'lg:w-1/2'} flex flex-col"
+      >
+        <div
+          class="border border-gray-200 dark:border-gray-700 rounded-lg h-full flex flex-col overflow-hidden"
+        >
+          <div
+            class="px-4 py-3 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800"
+          >
             <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100">
               AsciiDoc Preview
             </h3>
@@ -741,23 +924,34 @@ import Asciidoctor from "asciidoctor";
 
           <div class="flex-1 overflow-y-auto p-6 bg-white dark:bg-gray-900">
             {#if !content.trim()}
-              <div class="text-gray-500 dark:text-gray-400 text-sm text-center py-8">
+              <div
+                class="text-gray-500 dark:text-gray-400 text-sm text-center py-8"
+              >
                 Start typing to see the preview...
               </div>
             {:else}
               <!-- Show document title and tags for articles -->
-              {#if contentType === 'article' && publicationResult?.metadata.title}
-                <div class="mb-8 pb-6 border-b border-gray-200 dark:border-gray-700">
-                  <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">
+              {#if contentType === "article" && publicationResult?.metadata.title}
+                <div
+                  class="mb-8 pb-6 border-b border-gray-200 dark:border-gray-700"
+                >
+                  <h1
+                    class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4"
+                  >
                     {publicationResult.metadata.title}
                   </h1>
                   <!-- Document-level tags -->
                   {#if publicationResult.metadata.attributes.tags}
-                    {@const tagsList = publicationResult.metadata.attributes.tags.split(',').map((t: string) => t.trim())}
+                    {@const tagsList =
+                      publicationResult.metadata.attributes.tags
+                        .split(",")
+                        .map((t: string) => t.trim())}
                     {#if tagsList.length > 0}
                       <div class="flex flex-wrap gap-2">
                         {#each tagsList as tag}
-                          <span class="bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 px-3 py-1 rounded-full text-sm font-medium">
+                          <span
+                            class="bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 px-3 py-1 rounded-full text-sm font-medium"
+                          >
                             #{tag}
                           </span>
                         {/each}
@@ -766,30 +960,42 @@ import Asciidoctor from "asciidoctor";
                   {/if}
                 </div>
               {/if}
-              
+
               <div class="prose prose-sm dark:prose-invert max-w-none">
                 <!-- Render full document with title if it's an article -->
-                {#if contentType === 'article' && publicationResult?.metadata.title}
+                {#if contentType === "article" && publicationResult?.metadata.title}
                   {@const documentHeader = content.split(/\n==\s+/)[0]}
-                  <div class="mb-6 border-b border-gray-200 dark:border-gray-700 pb-4">
+                  <div
+                    class="mb-6 border-b border-gray-200 dark:border-gray-700 pb-4"
+                  >
                     <div class="asciidoc-content">
                       {@html asciidoctor.convert(documentHeader, {
                         standalone: false,
                         attributes: {
                           showtitle: true,
                           sectids: false,
-                        }
+                        },
                       })}
                     </div>
                     <!-- Document-level tags -->
                     {#if publicationResult.metadata.attributes.tags}
-                      {@const tagsList = publicationResult.metadata.attributes.tags.split(',').map((t: string) => t.trim())}
+                      {@const tagsList =
+                        publicationResult.metadata.attributes.tags
+                          .split(",")
+                          .map((t: string) => t.trim())}
                       {#if tagsList.length > 0}
-                        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-3 mt-3">
+                        <div
+                          class="bg-gray-100 dark:bg-gray-800 rounded-lg p-3 mt-3"
+                        >
                           <div class="flex flex-wrap gap-2 items-center">
-                            <span class="text-xs font-medium text-gray-600 dark:text-gray-400">Document tags:</span>
+                            <span
+                              class="text-xs font-medium text-gray-600 dark:text-gray-400"
+                              >Document tags:</span
+                            >
                             {#each tagsList as tag}
-                              <div class="bg-blue-600 text-blue-100 px-2 py-1 rounded-full text-xs font-medium flex items-baseline">
+                              <div
+                                class="bg-blue-600 text-blue-100 px-2 py-1 rounded-full text-xs font-medium flex items-baseline"
+                              >
                                 <span class="mr-1">#</span>
                                 <span>{tag}</span>
                               </div>
@@ -800,70 +1006,91 @@ import Asciidoctor from "asciidoctor";
                     {/if}
                   </div>
                 {/if}
-                
+
                 {#each parsedSections as section, index}
-                  <div class="mb-6 pb-6 border-b border-gray-200 dark:border-gray-700 last:border-0">
+                  <div
+                    class="mb-6 pb-6 border-b border-gray-200 dark:border-gray-700 last:border-0"
+                  >
                     {#if section.isIndex}
                       <!-- Index event: show as simple title -->
-                      <div class="text-sm font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider mb-2">
+                      <div
+                        class="text-sm font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider mb-2"
+                      >
                         Index Event (30040)
                       </div>
-                      <h2 class="text-lg font-bold text-gray-900 dark:text-gray-100">
+                      <h2
+                        class="text-lg font-bold text-gray-900 dark:text-gray-100"
+                      >
                         {section.title}
                       </h2>
                     {:else}
                       <!-- Content event: show title, tags, then content -->
                       <div class="space-y-3">
                         <!-- Event type indicator -->
-                        <div class="text-xs font-semibold text-green-600 dark:text-green-400 uppercase tracking-wider">
+                        <div
+                          class="text-xs font-semibold text-green-600 dark:text-green-400 uppercase tracking-wider"
+                        >
                           Content Event (30041)
                         </div>
-                        
+
                         <!-- Title at correct heading level -->
-                        <div class="prose prose-sm dark:prose-invert max-w-none">
-                          {@html asciidoctor.convert(`${'='.repeat(section.level)} ${section.title}`, {
-                            standalone: false,
-                            attributes: {
-                              showtitle: false,
-                              sectids: false,
-                            }
-                          })}
+                        <div
+                          class="prose prose-sm dark:prose-invert max-w-none"
+                        >
+                          {@html asciidoctor.convert(
+                            `${"=".repeat(section.level)} ${section.title}`,
+                            {
+                              standalone: false,
+                              attributes: {
+                                showtitle: false,
+                                sectids: false,
+                              },
+                            },
+                          )}
                         </div>
-                        
+
                         <!-- Tags -->
                         {#if section.tags && section.tags.length > 0}
                           <div class="flex flex-wrap gap-2">
                             {#each section.tags as tag}
-                              <span class="bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 px-2 py-1 rounded-full text-xs font-medium">
+                              <span
+                                class="bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 px-2 py-1 rounded-full text-xs font-medium"
+                              >
                                 #{tag[1]}
                               </span>
                             {/each}
                           </div>
                         {/if}
-                        
+
                         <!-- Content rendered as AsciiDoc -->
                         {#if section.content}
-                          <div class="prose prose-sm dark:prose-invert max-w-none mt-4">
+                          <div
+                            class="prose prose-sm dark:prose-invert max-w-none mt-4"
+                          >
                             {@html asciidoctor.convert(section.content, {
                               standalone: false,
                               attributes: {
                                 showtitle: false,
                                 sectids: false,
-                              }
+                              },
                             })}
                           </div>
                         {/if}
                       </div>
                     {/if}
-                    
+
                     <!-- Event boundary indicator -->
                     {#if index < parsedSections.length - 1}
                       <div class="mt-6 relative">
                         <div class="absolute inset-0 flex items-center">
-                          <div class="w-full border-t-2 border-dashed border-gray-300 dark:border-gray-600"></div>
+                          <div
+                            class="w-full border-t-2 border-dashed border-gray-300 dark:border-gray-600"
+                          ></div>
                         </div>
                         <div class="relative flex justify-center">
-                          <span class="bg-white dark:bg-gray-900 px-3 text-xs text-gray-500 dark:text-gray-400">
+                          <span
+                            class="bg-white dark:bg-gray-900 px-3 text-xs text-gray-500 dark:text-gray-400"
+                          >
                             Event Boundary
                           </span>
                         </div>
@@ -878,12 +1105,24 @@ import Asciidoctor from "asciidoctor";
               >
                 <strong>Event Count:</strong>
                 {#if generatedEvents}
-                  {@const indexEvents = generatedEvents.contentEvents.filter((e: any) => e.kind === 30040)}
-                  {@const contentOnlyEvents = generatedEvents.contentEvents.filter((e: any) => e.kind === 30041)}
-                  {@const totalIndexEvents = indexEvents.length + (generatedEvents.indexEvent ? 1 : 0)}
-                  {@const totalEvents = totalIndexEvents + contentOnlyEvents.length}
+                  {@const indexEvents = generatedEvents.contentEvents.filter(
+                    (e: any) => e.kind === 30040,
+                  )}
+                  {@const contentOnlyEvents =
+                    generatedEvents.contentEvents.filter(
+                      (e: any) => e.kind === 30041,
+                    )}
+                  {@const totalIndexEvents =
+                    indexEvents.length + (generatedEvents.indexEvent ? 1 : 0)}
+                  {@const totalEvents =
+                    totalIndexEvents + contentOnlyEvents.length}
                   {totalEvents} event{totalEvents !== 1 ? "s" : ""}
-                  ({totalIndexEvents} index{totalIndexEvents !== 1 ? " events" : ""} + {contentOnlyEvents.length} content{contentOnlyEvents.length !== 1 ? " events" : ""})
+                  ({totalIndexEvents} index{totalIndexEvents !== 1
+                    ? " events"
+                    : ""} + {contentOnlyEvents.length} content{contentOnlyEvents.length !==
+                  1
+                    ? " events"
+                    : ""})
                 {:else}
                   0 events
                 {/if}
@@ -896,48 +1135,88 @@ import Asciidoctor from "asciidoctor";
 
     <!-- Tutorial Sidebar -->
     {#if showTutorial}
-      <div class="{showPreview || showStructurePreview ? 'lg:w-1/3' : 'lg:w-1/2'} flex flex-col">
-        <div class="border border-gray-200 dark:border-gray-700 rounded-lg h-full flex flex-col overflow-hidden">
-          <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
+      <div
+        class="{showPreview || showStructurePreview
+          ? 'lg:w-1/3'
+          : 'lg:w-1/2'} flex flex-col"
+      >
+        <div
+          class="border border-gray-200 dark:border-gray-700 rounded-lg h-full flex flex-col overflow-hidden"
+        >
+          <div
+            class="px-4 py-3 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800"
+          >
             <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100">
               AsciiDoc Guide
             </h3>
           </div>
-          
-          <div class="flex-1 overflow-y-auto p-4 text-sm text-gray-700 dark:text-gray-300 space-y-4">
+
+          <div
+            class="flex-1 overflow-y-auto p-4 text-sm text-gray-700 dark:text-gray-300 space-y-4"
+          >
             <!-- Syntax Highlighting Legend -->
             <div>
-              <h4 class="font-medium text-gray-900 dark:text-gray-100 mb-2">Header Highlighting</h4>
+              <h4 class="font-medium text-gray-900 dark:text-gray-100 mb-2">
+                Header Highlighting
+              </h4>
               <div class="space-y-2 text-xs">
                 <div class="flex items-center space-x-2">
-                  <div class="w-4 h-4 rounded" style="background: linear-gradient(to right, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1)); border-left: 2px solid #3B82F6;"></div>
-                  <span><strong class="text-blue-600">Blue:</strong> Index Events (30040)</span>
+                  <div
+                    class="w-4 h-4 rounded"
+                    style="background: linear-gradient(to right, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1)); border-left: 2px solid #3B82F6;"
+                  ></div>
+                  <span
+                    ><strong class="text-blue-600">Blue:</strong> Index Events (30040)</span
+                  >
                 </div>
                 <div class="flex items-center space-x-2">
-                  <div class="w-4 h-4 rounded" style="background: linear-gradient(to right, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.1)); border-left: 2px solid #10B981;"></div>
-                  <span><strong class="text-green-600">Green:</strong> Content Events (30041)</span>
+                  <div
+                    class="w-4 h-4 rounded"
+                    style="background: linear-gradient(to right, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.1)); border-left: 2px solid #10B981;"
+                  ></div>
+                  <span
+                    ><strong class="text-green-600">Green:</strong> Content Events
+                    (30041)</span
+                  >
                 </div>
                 <div class="flex items-center space-x-2">
-                  <div class="w-4 h-4 rounded bg-amber-200 dark:bg-amber-800" style="text-decoration: underline;"></div>
-                  <span><strong class="text-amber-600">Amber:</strong> Potential Events (at parse level)</span>
+                  <div
+                    class="w-4 h-4 rounded bg-amber-200 dark:bg-amber-800"
+                    style="text-decoration: underline;"
+                  ></div>
+                  <span
+                    ><strong class="text-amber-600">Amber:</strong> Potential Events
+                    (at parse level)</span
+                  >
                 </div>
                 <div class="flex items-center space-x-2">
-                  <div class="w-4 h-4 rounded bg-gray-200 dark:bg-gray-600" style="font-style: italic;"></div>
-                  <span><strong class="text-gray-600">Gray:</strong> Subheaders (within content)</span>
+                  <div
+                    class="w-4 h-4 rounded bg-gray-200 dark:bg-gray-600"
+                    style="font-style: italic;"
+                  ></div>
+                  <span
+                    ><strong class="text-gray-600">Gray:</strong> Subheaders (within
+                    content)</span
+                  >
                 </div>
               </div>
             </div>
-            
+
             <div>
-              <h4 class="font-medium text-gray-900 dark:text-gray-100 mb-2">Publishing Levels</h4>
+              <h4 class="font-medium text-gray-900 dark:text-gray-100 mb-2">
+                Publishing Levels
+              </h4>
               <ul class="space-y-1 text-xs">
                 {#each generateParseLevelOptions(MIN_PARSE_LEVEL, MAX_PARSE_LEVEL) as option}
                   <li>
-                    <strong>Level {option.level}:</strong> 
+                    <strong>Level {option.level}:</strong>
                     {#if option.level === 2}
-                      Only {'='.repeat(option.level)} sections become events (containing {'='.repeat(option.level + 1)} and deeper)
+                      Only {"=".repeat(option.level)} sections become events (containing
+                      {"=".repeat(option.level + 1)} and deeper)
                     {:else}
-                      {'='.repeat(option.level - 1)} sections become indices, {'='.repeat(option.level)} sections become events
+                      {"=".repeat(option.level - 1)} sections become indices, {"=".repeat(
+                        option.level,
+                      )} sections become events
                     {/if}
                   </li>
                 {/each}
@@ -945,8 +1224,11 @@ import Asciidoctor from "asciidoctor";
             </div>
 
             <div>
-              <h4 class="font-medium text-gray-900 dark:text-gray-100 mb-2">Example Structure</h4>
-              <pre class="bg-gray-100 dark:bg-gray-800 p-3 rounded text-xs font-mono overflow-x-auto">{`= Understanding Knowledge
+              <h4 class="font-medium text-gray-900 dark:text-gray-100 mb-2">
+                Example Structure
+              </h4>
+              <pre
+                class="bg-gray-100 dark:bg-gray-800 p-3 rounded text-xs font-mono overflow-x-auto">{`= Understanding Knowledge
 :image: https://i.nostr.build/example.jpg
 :published: 2025-04-21
 :tags: knowledge, philosophy, education
@@ -974,33 +1256,56 @@ Understanding the nature of knowledge...
             </div>
 
             <div>
-              <h4 class="font-medium text-gray-900 dark:text-gray-100 mb-2">Attributes</h4>
-              <p class="text-xs">Use <code>:key: value</code> format to add metadata that becomes event tags.</p>
+              <h4 class="font-medium text-gray-900 dark:text-gray-100 mb-2">
+                Attributes
+              </h4>
+              <p class="text-xs">
+                Use <code>:key: value</code> format to add metadata that becomes
+                event tags.
+              </p>
             </div>
 
             <div>
-              <h4 class="font-medium text-gray-900 dark:text-gray-100 mb-2">Content Types</h4>
+              <h4 class="font-medium text-gray-900 dark:text-gray-100 mb-2">
+                Content Types
+              </h4>
               <ul class="space-y-1 text-xs">
-                <li><strong>Article:</strong> Starts with = title, creates index + content events</li>
-                <li><strong>Notes:</strong> Just == sections, creates individual content events</li>
+                <li>
+                  <strong>Article:</strong> Starts with = title, creates index +
+                  content events
+                </li>
+                <li>
+                  <strong>Notes:</strong> Just == sections, creates individual content
+                  events
+                </li>
               </ul>
             </div>
           </div>
         </div>
       </div>
     {/if}
-    
+
     <!-- Structure Preview Sidebar -->
     {#if showStructurePreview}
-      <div class="{showPreview || showTutorial ? 'lg:w-1/3' : 'lg:w-1/2'} flex flex-col">
-        <div class="border border-gray-200 dark:border-gray-700 rounded-lg h-full flex flex-col overflow-hidden">
-          <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
+      <div
+        class="{showPreview || showTutorial
+          ? 'lg:w-1/3'
+          : 'lg:w-1/2'} flex flex-col"
+      >
+        <div
+          class="border border-gray-200 dark:border-gray-700 rounded-lg h-full flex flex-col overflow-hidden"
+        >
+          <div
+            class="px-4 py-3 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800"
+          >
             <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100">
               Event Structure
             </h3>
           </div>
-          
-          <div class="flex-1 overflow-y-auto p-4 text-sm text-gray-700 dark:text-gray-300">
+
+          <div
+            class="flex-1 overflow-y-auto p-4 text-sm text-gray-700 dark:text-gray-300"
+          >
             {#if publicationResult?.metadata?.eventStructure && publicationResult.metadata.eventStructure.length > 0}
               <!-- Event counts summary -->
               <div class="mb-4 grid grid-cols-2 gap-2">
@@ -1008,21 +1313,37 @@ Understanding the nature of knowledge...
                   <div class="flex items-center gap-2">
                     <span class="text-lg">📁</span>
                     <div>
-                      <div class="text-xs font-medium text-blue-800 dark:text-blue-200">Index Events</div>
+                      <div
+                        class="text-xs font-medium text-blue-800 dark:text-blue-200"
+                      >
+                        Index Events
+                      </div>
                       <div class="text-xs text-blue-600 dark:text-blue-400">
-                        {publicationResult.metadata.eventStructure.filter((n: any) => n.eventKind === 30040).length +
-                         publicationResult.metadata.eventStructure.reduce((acc: number, n: any) => 
-                           acc + (n.children?.filter?.((c: any) => c.eventKind === 30040)?.length || 0), 0)} × 30040
+                        {publicationResult.metadata.eventStructure.filter(
+                          (n: any) => n.eventKind === 30040,
+                        ).length +
+                          publicationResult.metadata.eventStructure.reduce(
+                            (acc: number, n: any) =>
+                              acc +
+                              (n.children?.filter?.(
+                                (c: any) => c.eventKind === 30040,
+                              )?.length || 0),
+                            0,
+                          )} × 30040
                       </div>
                     </div>
                   </div>
                 </div>
-                
+
                 <div class="bg-green-50 dark:bg-green-900/20 p-2 rounded">
                   <div class="flex items-center gap-2">
                     <span class="text-lg">📄</span>
                     <div>
-                      <div class="text-xs font-medium text-green-800 dark:text-green-200">Content Events</div>
+                      <div
+                        class="text-xs font-medium text-green-800 dark:text-green-200"
+                      >
+                        Content Events
+                      </div>
                       <div class="text-xs text-green-600 dark:text-green-400">
                         {generatedEvents.contentEvents.length} × 30041
                       </div>
@@ -1030,14 +1351,14 @@ Understanding the nature of knowledge...
                   </div>
                 </div>
               </div>
-              
+
               <!-- Hierarchical structure -->
               <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-3">
                 <div class="font-mono text-xs space-y-1">
                   {#snippet renderEventNode(node, depth = 0)}
                     <div class="py-0.5" style="margin-left: {depth * 1}rem;">
-                      {node.eventKind === 30040 ? '📁' : '📄'} 
-                      [{node.eventKind}] {node.title || 'Untitled'}
+                      {node.eventKind === 30040 ? "📁" : "📄"}
+                      [{node.eventKind}] {node.title || "Untitled"}
                     </div>
                     {#if node.children && node.children.length > 0}
                       {#each node.children as child}
@@ -1045,13 +1366,13 @@ Understanding the nature of knowledge...
                       {/each}
                     {/if}
                   {/snippet}
-                  
+
                   {#each publicationResult.metadata.eventStructure as node}
                     {@render renderEventNode(node, 0)}
                   {/each}
                 </div>
               </div>
-              
+
               <!-- Parse level info -->
               <div class="mt-4 p-3 bg-gray-50 dark:bg-gray-900 rounded text-xs">
                 <div class="font-medium text-gray-700 dark:text-gray-300 mb-1">
@@ -1059,19 +1380,22 @@ Understanding the nature of knowledge...
                 </div>
                 <div class="text-gray-600 dark:text-gray-400">
                   {#if parseLevel === 2}
-                    Each == section becomes a 30041 event with all nested content.
+                    Each == section becomes a 30041 event with all nested
+                    content.
                   {:else if parseLevel === 3}
-                    Level 2 sections with children → 30040 indices<br>
+                    Level 2 sections with children → 30040 indices<br />
                     Level 3 sections → 30041 content events
                   {:else}
-                    Sections with children → 30040 indices<br>
+                    Sections with children → 30040 indices<br />
                     Level {parseLevel} sections → 30041 content events
                   {/if}
                 </div>
               </div>
-              
+
               <!-- Legend -->
-              <div class="mt-4 text-xs text-gray-500 dark:text-gray-400 border-t pt-3">
+              <div
+                class="mt-4 text-xs text-gray-500 dark:text-gray-400 border-t pt-3"
+              >
                 <div class="space-y-1">
                   <div class="flex items-center gap-2">
                     <span>📁</span>
@@ -1088,14 +1412,22 @@ Understanding the nature of knowledge...
                 <div>Add content to see event structure</div>
                 <!-- Debug info -->
                 <div class="text-xs mt-2">
-                  Debug: {JSON.stringify({
-                    hasResult: !!publicationResult,
-                    hasMetadata: !!publicationResult?.metadata,
-                    hasStructure: !!publicationResult?.metadata?.eventStructure,
-                    structureLength: publicationResult?.metadata?.eventStructure?.length || 0,
-                    hasEvents: !!generatedEvents,
-                    contentLength: generatedEvents?.contentEvents?.length || 0
-                  }, null, 2)}
+                  Debug: {JSON.stringify(
+                    {
+                      hasResult: !!publicationResult,
+                      hasMetadata: !!publicationResult?.metadata,
+                      hasStructure:
+                        !!publicationResult?.metadata?.eventStructure,
+                      structureLength:
+                        publicationResult?.metadata?.eventStructure?.length ||
+                        0,
+                      hasEvents: !!generatedEvents,
+                      contentLength:
+                        generatedEvents?.contentEvents?.length || 0,
+                    },
+                    null,
+                    2,
+                  )}
                 </div>
               </div>
             {/if}
diff --git a/src/lib/utils/publication_tree_processor.ts b/src/lib/utils/publication_tree_processor.ts
index e1e69cd..8f16b66 100644
--- a/src/lib/utils/publication_tree_processor.ts
+++ b/src/lib/utils/publication_tree_processor.ts
@@ -330,8 +330,34 @@ function parseSegmentContent(
     }
   }
 
-  // Extract content (everything after attributes)
-  const content = sectionLines.slice(contentStartIdx).join("\n").trim();
+  // Extract content (everything after attributes, but stop at child sections)
+  const contentLines = sectionLines.slice(contentStartIdx);
+  
+  // Find where child sections start (deeper level headers)
+  let contentEndIdx = contentLines.length;
+  const currentSectionLevel = sectionLines[0].match(/^(=+)/)?.[1].length || 2;
+  
+  for (let i = 0; i < contentLines.length; i++) {
+    const line = contentLines[i];
+    const headerMatch = line.match(/^(=+)\s+/);
+    if (headerMatch && headerMatch[1].length > currentSectionLevel) {
+      // Found a child section header - stop content extraction here
+      contentEndIdx = i;
+      break;
+    }
+  }
+  
+  const content = contentLines.slice(0, contentEndIdx).join("\n").trim();
+
+  // Debug logging for content extraction
+  if (sectionLines[0].includes("Chapter 1")) {
+    console.log("[DEBUG] Chapter 1 content extraction in parseSegmentContent:");
+    console.log("  sectionLines:", sectionLines);
+    console.log("  contentStartIdx:", contentStartIdx);
+    console.log("  contentLines:", contentLines);
+    console.log("  contentEndIdx:", contentEndIdx);
+    console.log("  extracted content:", JSON.stringify(content));
+  }
 
   return { attributes, content };
 }
@@ -622,6 +648,15 @@ function createContentEvent(segment: ContentSegment, ndk: NDK): NDKEvent {
   event.tags = tags;
   event.content = segment.content;
 
+  // Debug logging for Chapter 1 content events
+  if (segment.title === "Chapter 1") {
+    console.log("[DEBUG] Creating content event for Chapter 1:");
+    console.log("  segment.title:", segment.title);
+    console.log("  segment.content:", JSON.stringify(segment.content));
+    console.log("  segment.level:", segment.level);
+    console.log("  event.content:", JSON.stringify(event.content));
+  }
+
   return event;
 }