Fix title/node overlap in LayoutTimelineDiagram; update snapshot

Co-authored-by: jongalloway <68539+jongalloway@users.noreply.github.com>

Author: Copilot

src/DiagramForge/Layout/DefaultLayoutEngine.cs

@@ -325,8 +325,14 @@ private static void LayoutTimelineDiagram(
         if (eventNodes.Count > 0)
             colWidth = Math.Max(colWidth, eventNodes.Max(n => n.Width));
 
+        // When a title is present, shift the first row down to clear it. The title
+        // is rendered by SvgRenderer at y=(DiagramPadding - 4); it needs
+        // (TitleFontSize + 8) of vertical room, matching the identical offset that
+        // SvgRenderer.ComputeHeight already reserves at the canvas bottom.
+        double titleOffset = !string.IsNullOrWhiteSpace(diagram.Title) ? theme.TitleFontSize + 8 : 0;
+
         // Place period nodes in a single horizontal row.
-        double periodY = pad;
+        double periodY = pad + titleOffset;
         for (int i = 0; i < periodNodes.Count; i++)
         {
             var pn = periodNodes[i];

tests/DiagramForge.E2ETests/Fixtures/mermaid-timeline.expected.svg

@@ -272,6 +272,45 @@ public void Layout_AllPeriodNodes_HaveEqualWidth()
         Assert.All(periods, p => Assert.Equal(firstWidth, p.Width));
     }
 
+    [Fact]
+    public void Layout_WithTitle_PeriodRowStartsBelowTitle()
+    {
+        // With a title the period row must be pushed down enough to clear the title
+        // text. Without the offset the title (at y≈DiagramPadding-4) visually
+        // overlaps the first node row (at y=DiagramPadding).
+        const string withTitle = """
+            timeline
+                title Product Roadmap
+                Q1 : Research
+            """;
+
+        const string withoutTitle = """
+            timeline
+                Q1 : Research
+            """;
+
+        var diagramWithTitle = _parser.Parse(withTitle);
+        var diagramWithoutTitle = _parser.Parse(withoutTitle);
+
+        _layout.Layout(diagramWithTitle, _theme);
+        _layout.Layout(diagramWithoutTitle, _theme);
+
+        double periodYWithTitle = diagramWithTitle.Nodes.Values
+            .Single(n => n.Metadata.TryGetValue("timeline:kind", out var k) && k is "period").Y;
+
+        double periodYWithoutTitle = diagramWithoutTitle.Nodes.Values
+            .Single(n => n.Metadata.TryGetValue("timeline:kind", out var k) && k is "period").Y;
+
+        // The titled diagram's period row must start strictly below the un-titled one.
+        Assert.True(periodYWithTitle > periodYWithoutTitle,
+            $"Period row with title ({periodYWithTitle}) should be below period row without title ({periodYWithoutTitle})");
+
+        // And the gap must be at least the title font size + a small margin.
+        double gap = periodYWithTitle - periodYWithoutTitle;
+        Assert.True(gap >= _theme.TitleFontSize,
+            $"Gap ({gap}) should be >= TitleFontSize ({_theme.TitleFontSize}) to avoid title/node overlap");
+    }
+
     // ── DiagramType ───────────────────────────────────────────────────────────
 
     [Fact]