Run Charts documentation examples

package.json

@@ -70,13 +70,11 @@
     "@tanstack/ai-anthropic": "^0.10.1",
     "@tanstack/ai-client": "^0.11.3",
     "@tanstack/ai-openai": "^0.9.5",
-    "@tanstack/charts": "0.7.2",
-    "@tanstack/charts-scales": "0.7.2",
+    "@tanstack/charts": "0.9.0",
     "@tanstack/create": "^0.69.0",
     "@tanstack/highlight": "^0.0.9",
     "@tanstack/markdown": "^0.0.11",
     "@tanstack/pacer": "^0.21.1",
-    "@tanstack/react-charts": "0.7.2",
     "@tanstack/react-hotkeys": "^0.10.0",
     "@tanstack/react-pacer": "^0.22.1",
     "@tanstack/react-query": "^5.100.11",
@@ -115,6 +113,7 @@
     "maath": "^0.10.8",
     "match-sorter": "^8.2.0",
     "mermaid": "^11.14.0",
+    "octane": "0.1.13",
     "parse5": "^7.3.0",
     "parse5-parser-stream": "^7.1.2",
     "postgres": "^3.4.8",
@@ -172,7 +171,7 @@
     "tailwindcss": "^4.2.2",
     "tsx": "^4.21.0",
     "typescript": "^6.0.2",
-    "vite": "^8.0.13",
+    "vite": "^8.0.16",
     "wrangler": "^4.102.0"
   },
   "engines": {

scripts/charts-landing/activation-chart.ts

@@ -1,4 +1,4 @@
-import { scaleLinear } from '@tanstack/charts-scales/linear'
+import { scaleLinear } from '@tanstack/charts/scales/linear'
 import { scaleUtc } from 'd3-scale'
 import { curveMonotoneX } from 'd3-shape'
 import {

scripts/charts-landing/kinetic-area-chart.ts

@@ -1,4 +1,4 @@
-import { scaleLinear } from '@tanstack/charts-scales/linear'
+import { scaleLinear } from '@tanstack/charts/scales/linear'
 import { curveMonotoneX } from 'd3-shape'
 import { areaY, d3Curve, defineChart, dot, lineY } from '@tanstack/charts'
 

scripts/charts-landing/kinetic-bar-chart.ts

@@ -1,5 +1,5 @@
-import { scaleBand } from '@tanstack/charts-scales/band'
-import { scaleLinear } from '@tanstack/charts-scales/linear'
+import { scaleBand } from '@tanstack/charts/scales/band'
+import { scaleLinear } from '@tanstack/charts/scales/linear'
 import { barY, defineChart, ruleY } from '@tanstack/charts'
 
 import { kineticDarkTheme, productNames, productSignals } from './kinetic-data'

scripts/charts-landing/kinetic-donut-chart.ts

@@ -1,4 +1,4 @@
-import { scaleLinear } from '@tanstack/charts-scales/linear'
+import { scaleLinear } from '@tanstack/charts/scales/linear'
 import { defineChart } from '@tanstack/charts'
 import { polar, radialArc, radialText } from '@tanstack/charts/polar'
 

scripts/charts-landing/kinetic-dumbbell-chart.ts

@@ -1,5 +1,5 @@
-import { scaleBand } from '@tanstack/charts-scales/band'
-import { scaleLinear } from '@tanstack/charts-scales/linear'
+import { scaleBand } from '@tanstack/charts/scales/band'
+import { scaleLinear } from '@tanstack/charts/scales/linear'
 import { defineChart, dot, link } from '@tanstack/charts'
 
 import { kineticDarkTheme, productNames, productSignals } from './kinetic-data'

scripts/charts-landing/kinetic-heatmap-chart.ts

@@ -1,4 +1,4 @@
-import { scaleBand } from '@tanstack/charts-scales/band'
+import { scaleBand } from '@tanstack/charts/scales/band'
 import { cell, defineChart } from '@tanstack/charts'
 
 import {

scripts/charts-landing/kinetic-layered-chart.ts

@@ -1,4 +1,4 @@
-import { scaleLinear } from '@tanstack/charts-scales/linear'
+import { scaleLinear } from '@tanstack/charts/scales/linear'
 import { curveMonotoneX } from 'd3-shape'
 import {
   areaY,

scripts/charts-landing/kinetic-line-chart.ts

@@ -1,4 +1,4 @@
-import { scaleLinear } from '@tanstack/charts-scales/linear'
+import { scaleLinear } from '@tanstack/charts/scales/linear'
 import { curveMonotoneX } from 'd3-shape'
 import { d3Curve, defineChart, dot, lineY } from '@tanstack/charts'
 

scripts/charts-landing/kinetic-lollipop-chart.ts

@@ -1,5 +1,5 @@
-import { scaleBand } from '@tanstack/charts-scales/band'
-import { scaleLinear } from '@tanstack/charts-scales/linear'
+import { scaleBand } from '@tanstack/charts/scales/band'
+import { scaleLinear } from '@tanstack/charts/scales/linear'
 import { defineChart, dot, link } from '@tanstack/charts'
 
 import { kineticDarkTheme, productNames, productSignals } from './kinetic-data'

scripts/charts-landing/kinetic-radar-chart.ts

@@ -1,5 +1,5 @@
-import { scaleLinear } from '@tanstack/charts-scales/linear'
-import { scalePoint } from '@tanstack/charts-scales/point'
+import { scaleLinear } from '@tanstack/charts/scales/linear'
+import { scalePoint } from '@tanstack/charts/scales/point'
 import { curveLinearClosed } from 'd3-shape'
 import { defineChart } from '@tanstack/charts'
 import {

scripts/charts-landing/kinetic-scatter-chart.ts

@@ -1,4 +1,4 @@
-import { scaleLinear } from '@tanstack/charts-scales/linear'
+import { scaleLinear } from '@tanstack/charts/scales/linear'
 import { defineChart, dot } from '@tanstack/charts'
 
 import { kineticDarkTheme, productSignals } from './kinetic-data'

scripts/generate-charts-landing-svg.ts

@@ -1,7 +1,7 @@
 import { readFileSync, writeFileSync } from 'node:fs'
 import { resolve } from 'node:path'
 
-import { scaleLinear } from '@tanstack/charts-scales/linear'
+import { scaleLinear } from '@tanstack/charts/scales/linear'
 import { curveMonotoneX, curveStepAfter } from 'd3-shape'
 
 import {

src/components/LibraryLayout.tsx

@@ -37,6 +37,10 @@ import { VersionSelect } from './VersionSelect'
 import { Card } from './Card'
 import { PartnersRail, RightRail } from './RightRail'
 import { trackEvent, useTrackedImpression } from '~/utils/analytics'
+import {
+  getMenuGroupInitialOpenState,
+  isChartsCatalogTarget,
+} from './library-layout-navigation'
 
 // Number of days a doc page is flagged as "New"/"Updated" in the sidebar.
 const RECENCY_WINDOW_DAYS = 7
@@ -913,24 +917,12 @@ export function LibraryLayout({
   const isDesktopViewport = useMediaQuery('(min-width: 768px)')
 
   const groupInitialOpenState = React.useMemo(() => {
-    return visibleMenuConfig.reduce<Record<string, boolean>>(
-      (acc, group, index) => {
-        const isChildActive = group.children.some(
-          (child) => child.to === _splat,
-        )
-        const key = `${index}:${String(group.label)}`
-
-        acc[key] = isChildActive
-          ? true
-          : typeof group.defaultCollapsed !== 'undefined'
-            ? !group.defaultCollapsed
-            : false
-
-        return acc
-      },
-      {},
+    return getMenuGroupInitialOpenState(
+      visibleMenuConfig,
+      _splat,
+      lastMatch.pathname,
     )
-  }, [visibleMenuConfig, _splat])
+  }, [lastMatch.pathname, visibleMenuConfig, _splat])
 
   const [openGroups, setOpenGroups] = React.useState(groupInitialOpenState)
 
@@ -990,7 +982,7 @@ export function LibraryLayout({
                 ? ({ libraryId, version } as never)
                 : undefined
             const isHomeLink = child.to === '..'
-            const isChartsExamplesLink = child.to === '/charts/catalog'
+            const isChartsExamplesLink = isChartsCatalogTarget(child.to)
             const frameworkDocsTarget = getFrameworkDocsLinkTarget(child.to)
 
             const recency = getDocRecency(child.addedAt, child.updatedAt)
@@ -1205,15 +1197,15 @@ export function LibraryLayout({
                   <li key={tab.id}>
                     <Link
                       from={
-                        target.to === '/charts/catalog'
+                        isChartsCatalogTarget(target.to)
                           ? undefined
                           : '/$libraryId/$version/docs'
                       }
                       to={target.to}
                       params={linkParams}
                       onClick={closeMobileMenu}
                       preload={
-                        target.to === '/charts/catalog' ? false : 'intent'
+                        isChartsCatalogTarget(target.to) ? false : 'intent'
                       }
                       aria-current={isActive ? 'page' : undefined}
                       className={twMerge(
@@ -1394,13 +1386,13 @@ export function LibraryLayout({
                 <Link
                   key={tab.id}
                   from={
-                    target.to === '/charts/catalog'
+                    isChartsCatalogTarget(target.to)
                       ? undefined
                       : '/$libraryId/$version/docs'
                   }
                   to={target.to}
                   params={linkParams}
-                  preload={target.to === '/charts/catalog' ? false : 'intent'}
+                  preload={isChartsCatalogTarget(target.to) ? false : 'intent'}
                   activeOptions={{
                     exact: true,
                     includeHash: false,

src/components/charts/TimeSeriesChart.tsx

@@ -10,7 +10,7 @@ import {
   type ChartPoint,
 } from '@tanstack/charts'
 import { tooltip } from '@tanstack/charts/tooltip'
-import { Chart } from '@tanstack/react-charts'
+import { Chart } from '@tanstack/charts/react'
 import { type BinType, binTimeSeriesData } from '~/utils/chart'
 
 export type ChartVariant = 'area' | 'bar' | 'cumulative'

src/components/examples/ExampleWorkbench.client.tsx

@@ -164,6 +164,7 @@ export function ExampleWorkbench({
     setWorkspace((current) => {
       const next = createExampleWorkspace({
         entry: current.entry,
+        environment: current.environment,
         files: { ...current.files, [activePath]: source },
         imports: current.imports,
       })
@@ -408,6 +409,7 @@ export function ExampleWorkbench({
 function cloneWorkspace(workspace: ExampleWorkspace) {
   return createExampleWorkspace({
     entry: workspace.entry,
+    environment: workspace.environment,
     files: { ...workspace.files },
     imports: workspace.imports,
   })

src/components/intent/SkillDependencyGraph.tsx

@@ -12,7 +12,7 @@ import {
 } from 'd3'
 import { arrow, defineChart, dot, text } from '@tanstack/charts'
 import { tooltip } from '@tanstack/charts/tooltip'
-import { Chart } from '@tanstack/react-charts'
+import { Chart } from '@tanstack/charts/react'
 import { useNavigate } from '@tanstack/react-router'
 import { SKILL_TYPE_STYLES } from '~/routes/intent/registry/$packageName'
 

src/components/intent/SkillSparkline.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import * as d3 from 'd3'
 import { defineChart, rect, type ChartPoint } from '@tanstack/charts'
 import { tooltip } from '@tanstack/charts/tooltip'
-import { Chart } from '@tanstack/react-charts'
+import { Chart } from '@tanstack/charts/react'
 import type { SkillHistoryEntry } from '~/utils/intent.functions'
 
 const changeColors = {

src/components/landing/ChartsLanding.tsx

@@ -11,7 +11,7 @@ import {
 } from './ChartsLandingGraphics'
 import { CatalogChartsHero, ChartsCatalogGallery } from './ChartsCatalogGallery'
 
-const chartPrompt = `Using TanStack Charts and the accounts array in this project, plot monthlyRevenue on x and retention on y. Size each point by seats with an explicit square-root radius scale, color it by segment, and preserve the original Account rows for typed tooltip and focus callbacks. Use the compact linear scale from @tanstack/charts-scales/linear so TanStack Charts can infer the domains, add the tooltip behavior from @tanstack/charts/tooltip, and render it through the React adapter with a useful ariaLabel.`
+const chartPrompt = `Using TanStack Charts and the accounts array in this project, plot monthlyRevenue on x and retention on y. Size each point by seats with an explicit square-root radius scale, color it by segment, and preserve the original Account rows for typed tooltip and focus callbacks. Use the compact linear scale from @tanstack/charts/scales/linear so TanStack Charts can infer the domains, add the tooltip behavior from @tanstack/charts/tooltip, and render it through the React adapter with a useful ariaLabel.`
 
 export default function ChartsLanding({
   catalog,
@@ -132,10 +132,10 @@ function TypedDotExample() {
   )
 }
 
-const accountChartSource = `import { scaleLinear } from '@tanstack/charts-scales/linear'
+const accountChartSource = `import { scaleLinear } from '@tanstack/charts/scales/linear'
 import { defineChart, dot } from '@tanstack/charts'
 import { tooltip } from '@tanstack/charts/tooltip'
-import { Chart } from '@tanstack/react-charts'
+import { Chart } from '@tanstack/charts/react'
 import { scaleSqrt } from 'd3-scale'
 
 const accountHealth = defineChart({

src/components/library-layout-navigation.ts

@@ -0,0 +1,47 @@
+import type { MenuItem } from '~/utils/config'
+
+export function isChartsCatalogTarget(to: string) {
+  return to === '/charts/catalog' || to.startsWith('/charts/catalog/')
+}
+
+function normalizeMenuPath(path: string) {
+  return path.replace(/\/+$/, '')
+}
+
+export function isMenuTargetActive(
+  to: string,
+  relativePathname: string | undefined,
+  pathname: string,
+) {
+  if (to === relativePathname) {
+    return true
+  }
+
+  return (
+    isChartsCatalogTarget(to) &&
+    normalizeMenuPath(to) === normalizeMenuPath(pathname)
+  )
+}
+
+export function getMenuGroupInitialOpenState(
+  groups: MenuItem[],
+  relativePathname: string | undefined,
+  pathname: string,
+) {
+  const state: Record<string, boolean> = {}
+
+  groups.forEach((group, index) => {
+    const isChildActive = group.children.some((child) =>
+      isMenuTargetActive(child.to, relativePathname, pathname),
+    )
+    const key = `${index}:${String(group.label)}`
+
+    state[key] = isChildActive
+      ? true
+      : typeof group.defaultCollapsed !== 'undefined'
+        ? !group.defaultCollapsed
+        : false
+  })
+
+  return state
+}