From 47967ad290f2e107a4ea83f8acd81a96a652106b Mon Sep 17 00:00:00 2001
From: Matt Rothenberg <mrothenberg@cloudflare.com>
Date: Thu, 28 May 2026 10:38:36 -0400
Subject: [PATCH] fix(docs): fix timeseries page TOC and loading state
 hydration

- Promote headings from h3 to h2 so the TableOfContents component
  picks them up (it groups h3s under h2s and drops orphaned h3s)
- Use client:only="react" for LoadingChartDemo to avoid hydration
  mismatch caused by useIsDarkMode returning different values on
  server vs client
---
 .../src/pages/charts/timeseries.mdx              | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/kumo-docs-astro/src/pages/charts/timeseries.mdx b/packages/kumo-docs-astro/src/pages/charts/timeseries.mdx
index 515538ab0d..d4c4820ff3 100644
--- a/packages/kumo-docs-astro/src/pages/charts/timeseries.mdx
+++ b/packages/kumo-docs-astro/src/pages/charts/timeseries.mdx
@@ -24,7 +24,7 @@ import {
 
 <ComponentSection>
 
-### Basic Line Chart
+## Basic Line Chart
 
 <p>A simple line chart displaying multiple data series over time.</p>
 
@@ -35,7 +35,7 @@ import {
 
 <ComponentSection>
 
-### Custom X-Axis Label Format
+## Custom X-Axis Label Format
 
 <p>
   Use the <code>xAxisTickLabelFormat</code> prop to control how x-axis tick
@@ -50,7 +50,7 @@ import {
 
 <ComponentSection>
 
-### Gradient Fill
+## Gradient Fill
 
 <p>
   Set <code>gradient</code> to <code>true</code> to render a vertical gradient
@@ -66,7 +66,7 @@ import {
 
 <ComponentSection>
 
-### Incomplete Data
+## Incomplete Data
 
 <p>
   Use the <code>incomplete</code> prop to indicate regions where data may be
@@ -80,7 +80,7 @@ import {
 
 <ComponentSection>
 
-### Time Range Selection
+## Time Range Selection
 
 <p>
   Enable time range selection by providing the <code>onTimeRangeChange</code>
@@ -94,7 +94,7 @@ import {
 
 <ComponentSection>
 
-### Bar Chart
+## Bar Chart
 
 <p>
   Set <code>type="bar"</code> to render series as stacked bars instead of lines.
@@ -108,7 +108,7 @@ import {
 
 <ComponentSection>
 
-### Loading State
+## Loading State
 
 <p>
   Set <code>loading</code> to <code>true</code> to display an animated sine-wave
@@ -117,6 +117,6 @@ import {
 </p>
 
   <ComponentExample demo="LoadingChartDemo">
-    <LoadingChartDemo client:visible />
+    <LoadingChartDemo client:only="react" />
   </ComponentExample>
 </ComponentSection>