Header Hierarchy Demo - GSD Reader

# Header Hierarchy Enhancement Demo

Resize window to see mobile vs desktop behavior. Each approach shows H4 → H5 → H6 nesting.

❌ CURRENT (Baseline)
The problem: H5 looks like body text, H6 is nearly invisible. No visual hierarchy cue.
[LOG-047] - Implementation Details

#### The Architecture Decision

We chose to implement a custom parser because unified-markdown was too heavy.

##### Why Not Use Unified?

The bundle size was 150KB and we only needed basic markdown features.

###### Performance Considerations

Our custom parser handles 10k lines in under 50ms.

This paragraph follows H6 - can you tell where the header ended?

A: Rainbow Left Borders
Desktop: Indented left borders like Indent Rainbow
Mobile: Flat borders + chevron prefix (› for H5, » for H6)
[LOG-047] - Implementation Details

#### The Architecture Decision

We chose to implement a custom parser because unified-markdown was too heavy.

##### Why Not Use Unified?

The bundle size was 150KB and we only needed basic markdown features.

###### Performance Considerations

Our custom parser handles 10k lines in under 50ms.

This paragraph follows H6 - can you tell where the header ended?

B: Colored Top Bars + Level Badge
Desktop & Mobile: Same behavior. Top border + small "H4/H5/H6" badge on right.
No indentation = zero horizontal space cost.
[LOG-047] - Implementation Details

#### The Architecture Decision

We chose to implement a custom parser because unified-markdown was too heavy.

##### Why Not Use Unified?

The bundle size was 150KB and we only needed basic markdown features.

###### Performance Considerations

Our custom parser handles 10k lines in under 50ms.

This paragraph follows H6 - can you tell where the header ended?

C: Pill Prefix Badges
Desktop & Mobile: Inline colored pill showing level (§4, §5, §6).
Inspired by GitHub issue labels. Minimal space, clear hierarchy.
[LOG-047] - Implementation Details

#### The Architecture Decision

We chose to implement a custom parser because unified-markdown was too heavy.

##### Why Not Use Unified?

The bundle size was 150KB and we only needed basic markdown features.

###### Performance Considerations

Our custom parser handles 10k lines in under 50ms.

This paragraph follows H6 - can you tell where the header ended?

D: True Indent Rainbow (VS Code Style)
Desktop: Stacked vertical colored lines showing full hierarchy depth.
Mobile: Gradient top border (purple|teal|gold segments).
[LOG-047] - Implementation Details

#### The Architecture Decision

We chose to implement a custom parser because unified-markdown was too heavy.

##### Why Not Use Unified?

The bundle size was 150KB and we only needed basic markdown features.

###### Performance Considerations

Our custom parser handles 10k lines in under 50ms.

This paragraph follows H6 - can you tell where the header ended?

✅ E: Hybrid Simple (Recommended)
Best balance: Colored underline (clear boundary) + subtle background fade + left border for H5/H6.
Mobile: Same styling, just tighter spacing. No horizontal space lost.
Why: Underline = clear "header ends here". Color = hierarchy. Left border = depth cue without heavy indent.
[LOG-047] - Implementation Details

#### The Architecture Decision

We chose to implement a custom parser because unified-markdown was too heavy.

##### Why Not Use Unified?

The bundle size was 150KB and we only needed basic markdown features.

###### Performance Considerations

Our custom parser handles 10k lines in under 50ms.

This paragraph follows H6 - can you tell where the header ended?

Desktop