diff --git a/docs/content-collections.ts b/docs/content-collections.ts
index 76ffc9413..9fa494b3f 100644
--- a/docs/content-collections.ts
+++ b/docs/content-collections.ts
@@ -86,52 +86,6 @@ const components = defineCollection({
 	}
 });
 
-const examples = defineCollection({
-	name: 'examples',
-	directory: 'src/content/examples',
-	include: '**/*.md',
-	schema: z.object({
-		name: z.string().optional(),
-		description: z.string().optional(),
-		category: z.string().optional(),
-		layers: z.array(z.string()).default([]),
-		related: z.array(z.string()).default([]),
-		resize: z.boolean().default(true),
-		tableOfContents: z.boolean().default(true),
-		order: z.number().optional(),
-		content: z.string()
-	}),
-	transform: async (doc) => {
-		const { filePath, fileName, directory, path } = doc._meta;
-
-		// Read the source file from the layerchart package
-		// const sourcePath = join(
-		// 	process.cwd(),
-		// 	`../packages/layerchart/src/lib/components/${doc.section === 'charts' ? 'charts/' : ''}${path}.svelte`
-		// );
-
-		// let source = '';
-		// let sourceUrl = '';
-		// try {
-		// 	source = readFileSync(sourcePath, 'utf-8');
-		// 	sourceUrl = `https://github.com/techniq/layerchart/blob/next/packages/layerchart/src/lib/components/${path}.svelte`;
-		// } catch (error) {
-		// 	// console.warn(
-		// 	// 	`Could not read source file for ${filePath}: ${error instanceof Error ? error.message : String(error)}`
-		// 	// );
-		// }
-
-		return {
-			...doc,
-			name: doc.name ?? toPascalCase(fileName.replace('.md', '')),
-			slug: path
-			// source,
-			// sourceUrl
-			// html: await compileMarkdown(context, doc)
-		};
-	}
-});
-
 const utils = defineCollection({
 	name: 'utils',
 	directory: 'src/content/utils',
@@ -230,5 +184,5 @@ const releases = defineCollection({
 });
 
 export default defineConfig({
-	collections: [components, examples, utils, guides, releases]
+	collections: [components, utils, guides, releases]
 });
diff --git a/docs/package.json b/docs/package.json
index 255c09228..eb2a6a627 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -128,6 +128,7 @@
 		"@uiw/codemirror-theme-github": "^4.25.4",
 		"@webcontainer/api": "^1.6.1",
 		"ansi_up": "^6.0.6",
-		"codemirror": "^6.0.2"
+		"codemirror": "^6.0.2",
+		"flexsearch": "^0.8.212"
 	}
 }
diff --git a/docs/scripts/generate-example-catalog.ts b/docs/scripts/generate-example-catalog.ts
index 65d0b2445..9a35de1a4 100644
--- a/docs/scripts/generate-example-catalog.ts
+++ b/docs/scripts/generate-example-catalog.ts
@@ -121,7 +121,8 @@ function getComponentExamples(componentName: string, allComponents: string[]): E
 
 			examples.push({
 				name: exampleName,
-				path: `/example/${componentName}/${exampleName}`,
+				title: exampleName.replaceAll('-', ' '),
+				path: `/docs/components/${componentName}/${exampleName}`,
 				components: componentsInExample
 			});
 		}
@@ -161,7 +162,7 @@ function findComponentUsage(componentName: string): UsageInfo[] {
 							usage.push({
 								example: exampleName,
 								component: entry.name,
-								path: `/example/${entry.name}/${exampleName}`,
+								path: `/docs/components/${entry.name}/${exampleName}`,
 								lineNumber: index + 1,
 								line: line.trim()
 							});
diff --git a/docs/src/examples/catalog/AnnotationLine.json b/docs/src/examples/catalog/AnnotationLine.json
index 49fe887f7..9c0052da2 100644
--- a/docs/src/examples/catalog/AnnotationLine.json
+++ b/docs/src/examples/catalog/AnnotationLine.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "bar-chart",
-      "path": "/example/AnnotationLine/bar-chart",
+      "title": "bar chart",
+      "path": "/docs/components/AnnotationLine/bar-chart",
       "components": [
         {
           "component": "BarChart",
@@ -19,7 +20,8 @@
     },
     {
       "name": "horizontal",
-      "path": "/example/AnnotationLine/horizontal",
+      "title": "horizontal",
+      "path": "/docs/components/AnnotationLine/horizontal",
       "components": [
         {
           "component": "LineChart",
@@ -35,7 +37,8 @@
     },
     {
       "name": "horizontal-placement",
-      "path": "/example/AnnotationLine/horizontal-placement",
+      "title": "horizontal placement",
+      "path": "/docs/components/AnnotationLine/horizontal-placement",
       "components": [
         {
           "component": "LineChart",
@@ -51,7 +54,8 @@
     },
     {
       "name": "horizontal-with-range",
-      "path": "/example/AnnotationLine/horizontal-with-range",
+      "title": "horizontal with range",
+      "path": "/docs/components/AnnotationLine/horizontal-with-range",
       "components": [
         {
           "component": "LineChart",
@@ -72,7 +76,8 @@
     },
     {
       "name": "vertical",
-      "path": "/example/AnnotationLine/vertical",
+      "title": "vertical",
+      "path": "/docs/components/AnnotationLine/vertical",
       "components": [
         {
           "component": "LineChart",
@@ -88,7 +93,8 @@
     },
     {
       "name": "vertical-placement",
-      "path": "/example/AnnotationLine/vertical-placement",
+      "title": "vertical placement",
+      "path": "/docs/components/AnnotationLine/vertical-placement",
       "components": [
         {
           "component": "LineChart",
@@ -104,7 +110,8 @@
     },
     {
       "name": "vertical-with-rotation",
-      "path": "/example/AnnotationLine/vertical-with-rotation",
+      "title": "vertical with rotation",
+      "path": "/docs/components/AnnotationLine/vertical-with-rotation",
       "components": [
         {
           "component": "LineChart",
@@ -123,73 +130,73 @@
     {
       "example": "bar-chart",
       "component": "AnnotationLine",
-      "path": "/example/AnnotationLine/bar-chart",
+      "path": "/docs/components/AnnotationLine/bar-chart",
       "lineNumber": 18,
       "line": "<AnnotationLine"
     },
     {
       "example": "horizontal",
       "component": "AnnotationLine",
-      "path": "/example/AnnotationLine/horizontal",
+      "path": "/docs/components/AnnotationLine/horizontal",
       "lineNumber": 16,
       "line": "<AnnotationLine"
     },
     {
       "example": "horizontal-placement",
       "component": "AnnotationLine",
-      "path": "/example/AnnotationLine/horizontal-placement",
+      "path": "/docs/components/AnnotationLine/horizontal-placement",
       "lineNumber": 19,
       "line": "<AnnotationLine"
     },
     {
       "example": "horizontal-with-range",
       "component": "AnnotationLine",
-      "path": "/example/AnnotationLine/horizontal-with-range",
+      "path": "/docs/components/AnnotationLine/horizontal-with-range",
       "lineNumber": 23,
       "line": "<AnnotationLine"
     },
     {
       "example": "vertical",
       "component": "AnnotationLine",
-      "path": "/example/AnnotationLine/vertical",
+      "path": "/docs/components/AnnotationLine/vertical",
       "lineNumber": 12,
       "line": "<AnnotationLine"
     },
     {
       "example": "vertical-placement",
       "component": "AnnotationLine",
-      "path": "/example/AnnotationLine/vertical-placement",
+      "path": "/docs/components/AnnotationLine/vertical-placement",
       "lineNumber": 19,
       "line": "<AnnotationLine"
     },
     {
       "example": "vertical-with-rotation",
       "component": "AnnotationLine",
-      "path": "/example/AnnotationLine/vertical-with-rotation",
+      "path": "/docs/components/AnnotationLine/vertical-with-rotation",
       "lineNumber": 12,
       "line": "<AnnotationLine"
     },
     {
       "example": "vertical-with-rotation",
       "component": "AnnotationLine",
-      "path": "/example/AnnotationLine/vertical-with-rotation",
+      "path": "/docs/components/AnnotationLine/vertical-with-rotation",
       "lineNumber": 29,
       "line": "<AnnotationLine"
     },
     {
       "example": "line-to-point",
       "component": "AnnotationPoint",
-      "path": "/example/AnnotationPoint/line-to-point",
+      "path": "/docs/components/AnnotationPoint/line-to-point",
       "lineNumber": 60,
       "line": "<AnnotationLine"
     },
     {
       "example": "on-series-with-line-and-tooltip",
       "component": "AnnotationPoint",
-      "path": "/example/AnnotationPoint/on-series-with-line-and-tooltip",
+      "path": "/docs/components/AnnotationPoint/on-series-with-line-and-tooltip",
       "lineNumber": 29,
       "line": "<AnnotationLine"
     }
   ],
-  "updatedAt": "2026-01-06T13:02:20.587Z"
+  "updatedAt": "2026-02-07T20:21:31.167Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/AnnotationPoint.json b/docs/src/examples/catalog/AnnotationPoint.json
index 64053ee53..0d214e430 100644
--- a/docs/src/examples/catalog/AnnotationPoint.json
+++ b/docs/src/examples/catalog/AnnotationPoint.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "band-scale-on-axis",
-      "path": "/example/AnnotationPoint/band-scale-on-axis",
+      "title": "band scale on axis",
+      "path": "/docs/components/AnnotationPoint/band-scale-on-axis",
       "components": [
         {
           "component": "BarChart",
@@ -24,7 +25,8 @@
     },
     {
       "name": "band-scale-on-value",
-      "path": "/example/AnnotationPoint/band-scale-on-value",
+      "title": "band scale on value",
+      "path": "/docs/components/AnnotationPoint/band-scale-on-value",
       "components": [
         {
           "component": "BarChart",
@@ -45,7 +47,8 @@
     },
     {
       "name": "label-placement",
-      "path": "/example/AnnotationPoint/label-placement",
+      "title": "label placement",
+      "path": "/docs/components/AnnotationPoint/label-placement",
       "components": [
         {
           "component": "LineChart",
@@ -61,7 +64,8 @@
     },
     {
       "name": "line-to-point",
-      "path": "/example/AnnotationPoint/line-to-point",
+      "title": "line to point",
+      "path": "/docs/components/AnnotationPoint/line-to-point",
       "components": [
         {
           "component": "LineChart",
@@ -92,7 +96,8 @@
     },
     {
       "name": "on-axis-with-tooltip",
-      "path": "/example/AnnotationPoint/on-axis-with-tooltip",
+      "title": "on axis with tooltip",
+      "path": "/docs/components/AnnotationPoint/on-axis-with-tooltip",
       "components": [
         {
           "component": "LineChart",
@@ -118,7 +123,8 @@
     },
     {
       "name": "on-series-with-line-and-tooltip",
-      "path": "/example/AnnotationPoint/on-series-with-line-and-tooltip",
+      "title": "on series with line and tooltip",
+      "path": "/docs/components/AnnotationPoint/on-series-with-line-and-tooltip",
       "components": [
         {
           "component": "LineChart",
@@ -149,7 +155,8 @@
     },
     {
       "name": "on-series-with-tooltip",
-      "path": "/example/AnnotationPoint/on-series-with-tooltip",
+      "title": "on series with tooltip",
+      "path": "/docs/components/AnnotationPoint/on-series-with-tooltip",
       "components": [
         {
           "component": "LineChart",
@@ -175,7 +182,8 @@
     },
     {
       "name": "series-annotation",
-      "path": "/example/AnnotationPoint/series-annotation",
+      "title": "series annotation",
+      "path": "/docs/components/AnnotationPoint/series-annotation",
       "components": [
         {
           "component": "LineChart",
@@ -194,59 +202,59 @@
     {
       "example": "band-scale-on-axis",
       "component": "AnnotationPoint",
-      "path": "/example/AnnotationPoint/band-scale-on-axis",
+      "path": "/docs/components/AnnotationPoint/band-scale-on-axis",
       "lineNumber": 19,
       "line": "<AnnotationPoint"
     },
     {
       "example": "band-scale-on-value",
       "component": "AnnotationPoint",
-      "path": "/example/AnnotationPoint/band-scale-on-value",
+      "path": "/docs/components/AnnotationPoint/band-scale-on-value",
       "lineNumber": 19,
       "line": "<AnnotationPoint"
     },
     {
       "example": "label-placement",
       "component": "AnnotationPoint",
-      "path": "/example/AnnotationPoint/label-placement",
+      "path": "/docs/components/AnnotationPoint/label-placement",
       "lineNumber": 33,
       "line": "<AnnotationPoint"
     },
     {
       "example": "line-to-point",
       "component": "AnnotationPoint",
-      "path": "/example/AnnotationPoint/line-to-point",
+      "path": "/docs/components/AnnotationPoint/line-to-point",
       "lineNumber": 66,
       "line": "<AnnotationPoint"
     },
     {
       "example": "on-axis-with-tooltip",
       "component": "AnnotationPoint",
-      "path": "/example/AnnotationPoint/on-axis-with-tooltip",
+      "path": "/docs/components/AnnotationPoint/on-axis-with-tooltip",
       "lineNumber": 30,
       "line": "<AnnotationPoint"
     },
     {
       "example": "on-series-with-line-and-tooltip",
       "component": "AnnotationPoint",
-      "path": "/example/AnnotationPoint/on-series-with-line-and-tooltip",
+      "path": "/docs/components/AnnotationPoint/on-series-with-line-and-tooltip",
       "lineNumber": 38,
       "line": "<AnnotationPoint"
     },
     {
       "example": "on-series-with-tooltip",
       "component": "AnnotationPoint",
-      "path": "/example/AnnotationPoint/on-series-with-tooltip",
+      "path": "/docs/components/AnnotationPoint/on-series-with-tooltip",
       "lineNumber": 29,
       "line": "<AnnotationPoint"
     },
     {
       "example": "series-annotation",
       "component": "AnnotationPoint",
-      "path": "/example/AnnotationPoint/series-annotation",
+      "path": "/docs/components/AnnotationPoint/series-annotation",
       "lineNumber": 19,
       "line": "<AnnotationPoint"
     }
   ],
-  "updatedAt": "2026-01-06T13:02:20.606Z"
+  "updatedAt": "2026-02-07T20:21:31.186Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/AnnotationRange.json b/docs/src/examples/catalog/AnnotationRange.json
index b37b031a6..218f250ee 100644
--- a/docs/src/examples/catalog/AnnotationRange.json
+++ b/docs/src/examples/catalog/AnnotationRange.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "bar-chart-(multiple)",
-      "path": "/example/AnnotationRange/bar-chart-(multiple)",
+      "title": "bar chart (multiple)",
+      "path": "/docs/components/AnnotationRange/bar-chart-(multiple)",
       "components": [
         {
           "component": "BarChart",
@@ -19,7 +20,8 @@
     },
     {
       "name": "bar-chart-(single)",
-      "path": "/example/AnnotationRange/bar-chart-(single)",
+      "title": "bar chart (single)",
+      "path": "/docs/components/AnnotationRange/bar-chart-(single)",
       "components": [
         {
           "component": "BarChart",
@@ -35,7 +37,8 @@
     },
     {
       "name": "bar-chart-(value)",
-      "path": "/example/AnnotationRange/bar-chart-(value)",
+      "title": "bar chart (value)",
+      "path": "/docs/components/AnnotationRange/bar-chart-(value)",
       "components": [
         {
           "component": "BarChart",
@@ -51,7 +54,8 @@
     },
     {
       "name": "hide-tooltip",
-      "path": "/example/AnnotationRange/hide-tooltip",
+      "title": "hide tooltip",
+      "path": "/docs/components/AnnotationRange/hide-tooltip",
       "components": [
         {
           "component": "LineChart",
@@ -67,7 +71,8 @@
     },
     {
       "name": "horizontal-with-fill-multiple",
-      "path": "/example/AnnotationRange/horizontal-with-fill-multiple",
+      "title": "horizontal with fill multiple",
+      "path": "/docs/components/AnnotationRange/horizontal-with-fill-multiple",
       "components": [
         {
           "component": "LineChart",
@@ -83,7 +88,8 @@
     },
     {
       "name": "horizontal-with-pattern-lower-bound",
-      "path": "/example/AnnotationRange/horizontal-with-pattern-lower-bound",
+      "title": "horizontal with pattern lower bound",
+      "path": "/docs/components/AnnotationRange/horizontal-with-pattern-lower-bound",
       "components": [
         {
           "component": "LineChart",
@@ -99,7 +105,8 @@
     },
     {
       "name": "horizontal-with-pattern-range",
-      "path": "/example/AnnotationRange/horizontal-with-pattern-range",
+      "title": "horizontal with pattern range",
+      "path": "/docs/components/AnnotationRange/horizontal-with-pattern-range",
       "components": [
         {
           "component": "LineChart",
@@ -115,7 +122,8 @@
     },
     {
       "name": "horizontal-with-pattern-upper-bound",
-      "path": "/example/AnnotationRange/horizontal-with-pattern-upper-bound",
+      "title": "horizontal with pattern upper bound",
+      "path": "/docs/components/AnnotationRange/horizontal-with-pattern-upper-bound",
       "components": [
         {
           "component": "LineChart",
@@ -131,7 +139,8 @@
     },
     {
       "name": "label-placement",
-      "path": "/example/AnnotationRange/label-placement",
+      "title": "label placement",
+      "path": "/docs/components/AnnotationRange/label-placement",
       "components": [
         {
           "component": "LineChart",
@@ -147,7 +156,8 @@
     },
     {
       "name": "vertical-with-gradient-range",
-      "path": "/example/AnnotationRange/vertical-with-gradient-range",
+      "title": "vertical with gradient range",
+      "path": "/docs/components/AnnotationRange/vertical-with-gradient-range",
       "components": [
         {
           "component": "LineChart",
@@ -163,7 +173,8 @@
     },
     {
       "name": "vertical-with-pattern-lower-bound",
-      "path": "/example/AnnotationRange/vertical-with-pattern-lower-bound",
+      "title": "vertical with pattern lower bound",
+      "path": "/docs/components/AnnotationRange/vertical-with-pattern-lower-bound",
       "components": [
         {
           "component": "LineChart",
@@ -179,7 +190,8 @@
     },
     {
       "name": "vertical-with-pattern-range",
-      "path": "/example/AnnotationRange/vertical-with-pattern-range",
+      "title": "vertical with pattern range",
+      "path": "/docs/components/AnnotationRange/vertical-with-pattern-range",
       "components": [
         {
           "component": "LineChart",
@@ -195,7 +207,8 @@
     },
     {
       "name": "vertical-with-pattern-upper-bound",
-      "path": "/example/AnnotationRange/vertical-with-pattern-upper-bound",
+      "title": "vertical with pattern upper bound",
+      "path": "/docs/components/AnnotationRange/vertical-with-pattern-upper-bound",
       "components": [
         {
           "component": "LineChart",
@@ -214,115 +227,115 @@
     {
       "example": "horizontal-with-range",
       "component": "AnnotationLine",
-      "path": "/example/AnnotationLine/horizontal-with-range",
+      "path": "/docs/components/AnnotationLine/horizontal-with-range",
       "lineNumber": 12,
       "line": "<AnnotationRange"
     },
     {
       "example": "bar-chart-(multiple)",
       "component": "AnnotationRange",
-      "path": "/example/AnnotationRange/bar-chart-(multiple)",
+      "path": "/docs/components/AnnotationRange/bar-chart-(multiple)",
       "lineNumber": 20,
       "line": "<AnnotationRange"
     },
     {
       "example": "bar-chart-(single)",
       "component": "AnnotationRange",
-      "path": "/example/AnnotationRange/bar-chart-(single)",
+      "path": "/docs/components/AnnotationRange/bar-chart-(single)",
       "lineNumber": 20,
       "line": "<AnnotationRange"
     },
     {
       "example": "bar-chart-(value)",
       "component": "AnnotationRange",
-      "path": "/example/AnnotationRange/bar-chart-(value)",
+      "path": "/docs/components/AnnotationRange/bar-chart-(value)",
       "lineNumber": 20,
       "line": "<AnnotationRange"
     },
     {
       "example": "hide-tooltip",
       "component": "AnnotationRange",
-      "path": "/example/AnnotationRange/hide-tooltip",
+      "path": "/docs/components/AnnotationRange/hide-tooltip",
       "lineNumber": 18,
       "line": "<AnnotationRange"
     },
     {
       "example": "horizontal-with-fill-multiple",
       "component": "AnnotationRange",
-      "path": "/example/AnnotationRange/horizontal-with-fill-multiple",
+      "path": "/docs/components/AnnotationRange/horizontal-with-fill-multiple",
       "lineNumber": 18,
       "line": "<AnnotationRange y={[0, 400]} class=\"fill-success/10\" />"
     },
     {
       "example": "horizontal-with-fill-multiple",
       "component": "AnnotationRange",
-      "path": "/example/AnnotationRange/horizontal-with-fill-multiple",
+      "path": "/docs/components/AnnotationRange/horizontal-with-fill-multiple",
       "lineNumber": 19,
       "line": "<AnnotationRange y={[400, 600]} class=\"fill-warning/10\" />"
     },
     {
       "example": "horizontal-with-fill-multiple",
       "component": "AnnotationRange",
-      "path": "/example/AnnotationRange/horizontal-with-fill-multiple",
+      "path": "/docs/components/AnnotationRange/horizontal-with-fill-multiple",
       "lineNumber": 20,
       "line": "<AnnotationRange y={[600, null]} class=\"fill-danger/10\" />"
     },
     {
       "example": "horizontal-with-pattern-lower-bound",
       "component": "AnnotationRange",
-      "path": "/example/AnnotationRange/horizontal-with-pattern-lower-bound",
+      "path": "/docs/components/AnnotationRange/horizontal-with-pattern-lower-bound",
       "lineNumber": 18,
       "line": "<AnnotationRange"
     },
     {
       "example": "horizontal-with-pattern-range",
       "component": "AnnotationRange",
-      "path": "/example/AnnotationRange/horizontal-with-pattern-range",
+      "path": "/docs/components/AnnotationRange/horizontal-with-pattern-range",
       "lineNumber": 18,
       "line": "<AnnotationRange"
     },
     {
       "example": "horizontal-with-pattern-upper-bound",
       "component": "AnnotationRange",
-      "path": "/example/AnnotationRange/horizontal-with-pattern-upper-bound",
+      "path": "/docs/components/AnnotationRange/horizontal-with-pattern-upper-bound",
       "lineNumber": 18,
       "line": "<AnnotationRange"
     },
     {
       "example": "label-placement",
       "component": "AnnotationRange",
-      "path": "/example/AnnotationRange/label-placement",
+      "path": "/docs/components/AnnotationRange/label-placement",
       "lineNumber": 37,
       "line": "<AnnotationRange"
     },
     {
       "example": "vertical-with-gradient-range",
       "component": "AnnotationRange",
-      "path": "/example/AnnotationRange/vertical-with-gradient-range",
+      "path": "/docs/components/AnnotationRange/vertical-with-gradient-range",
       "lineNumber": 18,
       "line": "<AnnotationRange"
     },
     {
       "example": "vertical-with-pattern-lower-bound",
       "component": "AnnotationRange",
-      "path": "/example/AnnotationRange/vertical-with-pattern-lower-bound",
+      "path": "/docs/components/AnnotationRange/vertical-with-pattern-lower-bound",
       "lineNumber": 18,
       "line": "<AnnotationRange"
     },
     {
       "example": "vertical-with-pattern-range",
       "component": "AnnotationRange",
-      "path": "/example/AnnotationRange/vertical-with-pattern-range",
+      "path": "/docs/components/AnnotationRange/vertical-with-pattern-range",
       "lineNumber": 18,
       "line": "<AnnotationRange"
     },
     {
       "example": "vertical-with-pattern-upper-bound",
       "component": "AnnotationRange",
-      "path": "/example/AnnotationRange/vertical-with-pattern-upper-bound",
+      "path": "/docs/components/AnnotationRange/vertical-with-pattern-upper-bound",
       "lineNumber": 18,
       "line": "<AnnotationRange"
     }
   ],
-  "updatedAt": "2026-01-06T13:02:20.626Z"
+  "updatedAt": "2026-02-07T20:21:31.203Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Arc.json b/docs/src/examples/catalog/Arc.json
index c311d2578..57609eeee 100644
--- a/docs/src/examples/catalog/Arc.json
+++ b/docs/src/examples/catalog/Arc.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "color-wheel",
-      "path": "/example/Arc/color-wheel",
+      "title": "color wheel",
+      "path": "/docs/components/Arc/color-wheel",
       "components": [
         {
           "component": "Chart",
@@ -29,7 +30,8 @@
     },
     {
       "name": "concentric",
-      "path": "/example/Arc/concentric",
+      "title": "concentric",
+      "path": "/docs/components/Arc/concentric",
       "components": [
         {
           "component": "Chart",
@@ -50,7 +52,8 @@
     },
     {
       "name": "draggable-arc",
-      "path": "/example/Arc/draggable-arc",
+      "title": "draggable arc",
+      "path": "/docs/components/Arc/draggable-arc",
       "components": [
         {
           "component": "Chart",
@@ -76,7 +79,8 @@
     },
     {
       "name": "label-direction",
-      "path": "/example/Arc/label-direction",
+      "title": "label direction",
+      "path": "/docs/components/Arc/label-direction",
       "components": [
         {
           "component": "Chart",
@@ -107,7 +111,8 @@
     },
     {
       "name": "partial-arc",
-      "path": "/example/Arc/partial-arc",
+      "title": "partial arc",
+      "path": "/docs/components/Arc/partial-arc",
       "components": [
         {
           "component": "Chart",
@@ -143,7 +148,8 @@
     },
     {
       "name": "playground",
-      "path": "/example/Arc/playground",
+      "title": "playground",
+      "path": "/docs/components/Arc/playground",
       "components": [
         {
           "component": "Chart",
@@ -174,7 +180,8 @@
     },
     {
       "name": "segmented-arc",
-      "path": "/example/Arc/segmented-arc",
+      "title": "segmented arc",
+      "path": "/docs/components/Arc/segmented-arc",
       "components": [
         {
           "component": "Chart",
@@ -200,7 +207,8 @@
     },
     {
       "name": "segmented-arc-clip-mask",
-      "path": "/example/Arc/segmented-arc-clip-mask",
+      "title": "segmented arc clip mask",
+      "path": "/docs/components/Arc/segmented-arc-clip-mask",
       "components": [
         {
           "component": "Chart",
@@ -231,7 +239,8 @@
     },
     {
       "name": "tween-value-on-mount",
-      "path": "/example/Arc/tween-value-on-mount",
+      "title": "tween value on mount",
+      "path": "/docs/components/Arc/tween-value-on-mount",
       "components": [
         {
           "component": "Chart",
@@ -255,192 +264,192 @@
     {
       "example": "color-wheel",
       "component": "Arc",
-      "path": "/example/Arc/color-wheel",
+      "path": "/docs/components/Arc/color-wheel",
       "lineNumber": 40,
       "line": "<Arc"
     },
     {
       "example": "concentric",
       "component": "Arc",
-      "path": "/example/Arc/concentric",
+      "path": "/docs/components/Arc/concentric",
       "lineNumber": 17,
       "line": "<Arc"
     },
     {
       "example": "concentric",
       "component": "Arc",
-      "path": "/example/Arc/concentric",
+      "path": "/docs/components/Arc/concentric",
       "lineNumber": 25,
       "line": "<Arc"
     },
     {
       "example": "concentric",
       "component": "Arc",
-      "path": "/example/Arc/concentric",
+      "path": "/docs/components/Arc/concentric",
       "lineNumber": 34,
       "line": "<Arc"
     },
     {
       "example": "draggable-arc",
       "component": "Arc",
-      "path": "/example/Arc/draggable-arc",
+      "path": "/docs/components/Arc/draggable-arc",
       "lineNumber": 18,
       "line": "<Arc"
     },
     {
       "example": "label-direction",
       "component": "Arc",
-      "path": "/example/Arc/label-direction",
+      "path": "/docs/components/Arc/label-direction",
       "lineNumber": 57,
       "line": "<Arc"
     },
     {
       "example": "partial-arc",
       "component": "Arc",
-      "path": "/example/Arc/partial-arc",
+      "path": "/docs/components/Arc/partial-arc",
       "lineNumber": 17,
       "line": "<Arc"
     },
     {
       "example": "playground",
       "component": "Arc",
-      "path": "/example/Arc/playground",
+      "path": "/docs/components/Arc/playground",
       "lineNumber": 30,
       "line": "<Arc"
     },
     {
       "example": "segmented-arc",
       "component": "Arc",
-      "path": "/example/Arc/segmented-arc",
+      "path": "/docs/components/Arc/segmented-arc",
       "lineNumber": 20,
       "line": "<Arc"
     },
     {
       "example": "segmented-arc-clip-mask",
       "component": "Arc",
-      "path": "/example/Arc/segmented-arc-clip-mask",
+      "path": "/docs/components/Arc/segmented-arc-clip-mask",
       "lineNumber": 21,
       "line": "<Arc"
     },
     {
       "example": "segmented-arc-clip-mask",
       "component": "Arc",
-      "path": "/example/Arc/segmented-arc-clip-mask",
+      "path": "/docs/components/Arc/segmented-arc-clip-mask",
       "lineNumber": 30,
       "line": "<Arc"
     },
     {
       "example": "tween-value-on-mount",
       "component": "Arc",
-      "path": "/example/Arc/tween-value-on-mount",
+      "path": "/docs/components/Arc/tween-value-on-mount",
       "lineNumber": 23,
       "line": "<Arc"
     },
     {
       "example": "tween-value-on-mount",
       "component": "Arc",
-      "path": "/example/Arc/tween-value-on-mount",
+      "path": "/docs/components/Arc/tween-value-on-mount",
       "lineNumber": 32,
       "line": "<Arc"
     },
     {
       "example": "tween-value-on-mount",
       "component": "Arc",
-      "path": "/example/Arc/tween-value-on-mount",
+      "path": "/docs/components/Arc/tween-value-on-mount",
       "lineNumber": 42,
       "line": "<Arc"
     },
     {
       "example": "gradient-with-text",
       "component": "ArcChart",
-      "path": "/example/ArcChart/gradient-with-text",
+      "path": "/docs/components/ArcChart/gradient-with-text",
       "lineNumber": 10,
       "line": "<Arc"
     },
     {
       "example": "series-labels",
       "component": "ArcChart",
-      "path": "/example/ArcChart/series-labels",
+      "path": "/docs/components/ArcChart/series-labels",
       "lineNumber": 29,
       "line": "<Arc {...props}>"
     },
     {
       "example": "all-3-layers",
       "component": "Layer",
-      "path": "/example/Layer/all-3-layers",
+      "path": "/docs/components/Layer/all-3-layers",
       "lineNumber": 11,
       "line": "<Arc"
     },
     {
       "example": "sunburst",
       "component": "Partition",
-      "path": "/example/Partition/sunburst",
+      "path": "/docs/components/Partition/sunburst",
       "lineNumber": 80,
       "line": "<Arc"
     },
     {
       "example": "default-slot-render-each-arc",
       "component": "Pie",
-      "path": "/example/Pie/default-slot-render-each-arc",
+      "path": "/docs/components/Pie/default-slot-render-each-arc",
       "lineNumber": 40,
       "line": "<Arc"
     },
     {
       "example": "labels",
       "component": "Pie",
-      "path": "/example/Pie/labels",
+      "path": "/docs/components/Pie/labels",
       "lineNumber": 24,
       "line": "<Arc"
     },
     {
       "example": "labels-centroid",
       "component": "Pie",
-      "path": "/example/Pie/labels-centroid",
+      "path": "/docs/components/Pie/labels-centroid",
       "lineNumber": 24,
       "line": "<Arc"
     },
     {
       "example": "labels-centroid-multiple",
       "component": "Pie",
-      "path": "/example/Pie/labels-centroid-multiple",
+      "path": "/docs/components/Pie/labels-centroid-multiple",
       "lineNumber": 27,
       "line": "<Arc"
     },
     {
       "example": "labels-outer",
       "component": "Pie",
-      "path": "/example/Pie/labels-outer",
+      "path": "/docs/components/Pie/labels-outer",
       "lineNumber": 24,
       "line": "<Arc"
     },
     {
       "example": "labels-outer-radial",
       "component": "Pie",
-      "path": "/example/Pie/labels-outer-radial",
+      "path": "/docs/components/Pie/labels-outer-radial",
       "lineNumber": 24,
       "line": "<Arc"
     },
     {
       "example": "labels-outer-with-padding",
       "component": "Pie",
-      "path": "/example/Pie/labels-outer-with-padding",
+      "path": "/docs/components/Pie/labels-outer-with-padding",
       "lineNumber": 24,
       "line": "<Arc"
     },
     {
       "example": "tooltip-with-arcs-slot",
       "component": "Pie",
-      "path": "/example/Pie/tooltip-with-arcs-slot",
+      "path": "/docs/components/Pie/tooltip-with-arcs-slot",
       "lineNumber": 48,
       "line": "<Arc"
     },
     {
       "example": "offset-slice",
       "component": "PieChart",
-      "path": "/example/PieChart/offset-slice",
+      "path": "/docs/components/PieChart/offset-slice",
       "lineNumber": 12,
       "line": "<Arc {...props} offset={index === 1 ? 16 : undefined} />"
     }
   ],
-  "updatedAt": "2026-01-13T17:22:23.191Z"
+  "updatedAt": "2026-02-07T20:21:31.223Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/ArcChart.json b/docs/src/examples/catalog/ArcChart.json
index af67f13e4..4ff6c999f 100644
--- a/docs/src/examples/catalog/ArcChart.json
+++ b/docs/src/examples/catalog/ArcChart.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "basic",
-      "path": "/example/ArcChart/basic",
+      "title": "basic",
+      "path": "/docs/components/ArcChart/basic",
       "components": [
         {
           "component": "ArcChart",
@@ -14,7 +15,8 @@
     },
     {
       "name": "color",
-      "path": "/example/ArcChart/color",
+      "title": "color",
+      "path": "/docs/components/ArcChart/color",
       "components": [
         {
           "component": "ArcChart",
@@ -25,7 +27,8 @@
     },
     {
       "name": "gradient-with-text",
-      "path": "/example/ArcChart/gradient-with-text",
+      "title": "gradient with text",
+      "path": "/docs/components/ArcChart/gradient-with-text",
       "components": [
         {
           "component": "ArcChart",
@@ -56,7 +59,8 @@
     },
     {
       "name": "radius-fixed",
-      "path": "/example/ArcChart/radius-fixed",
+      "title": "radius fixed",
+      "path": "/docs/components/ArcChart/radius-fixed",
       "components": [
         {
           "component": "ArcChart",
@@ -67,7 +71,8 @@
     },
     {
       "name": "radius-offset",
-      "path": "/example/ArcChart/radius-offset",
+      "title": "radius offset",
+      "path": "/docs/components/ArcChart/radius-offset",
       "components": [
         {
           "component": "ArcChart",
@@ -78,7 +83,8 @@
     },
     {
       "name": "radius-percent",
-      "path": "/example/ArcChart/radius-percent",
+      "title": "radius percent",
+      "path": "/docs/components/ArcChart/radius-percent",
       "components": [
         {
           "component": "ArcChart",
@@ -89,7 +95,8 @@
     },
     {
       "name": "series",
-      "path": "/example/ArcChart/series",
+      "title": "series",
+      "path": "/docs/components/ArcChart/series",
       "components": [
         {
           "component": "ArcChart",
@@ -100,7 +107,8 @@
     },
     {
       "name": "series-arc",
-      "path": "/example/ArcChart/series-arc",
+      "title": "series arc",
+      "path": "/docs/components/ArcChart/series-arc",
       "components": [
         {
           "component": "ArcChart",
@@ -111,7 +119,8 @@
     },
     {
       "name": "series-individual",
-      "path": "/example/ArcChart/series-individual",
+      "title": "series individual",
+      "path": "/docs/components/ArcChart/series-individual",
       "components": [
         {
           "component": "ArcChart",
@@ -122,7 +131,8 @@
     },
     {
       "name": "series-labels",
-      "path": "/example/ArcChart/series-labels",
+      "title": "series labels",
+      "path": "/docs/components/ArcChart/series-labels",
       "components": [
         {
           "component": "ArcChart",
@@ -143,7 +153,8 @@
     },
     {
       "name": "series-motion-spring",
-      "path": "/example/ArcChart/series-motion-spring",
+      "title": "series motion spring",
+      "path": "/docs/components/ArcChart/series-motion-spring",
       "components": [
         {
           "component": "ArcChart",
@@ -154,7 +165,8 @@
     },
     {
       "name": "series-motion-tween",
-      "path": "/example/ArcChart/series-motion-tween",
+      "title": "series motion tween",
+      "path": "/docs/components/ArcChart/series-motion-tween",
       "components": [
         {
           "component": "ArcChart",
@@ -165,7 +177,8 @@
     },
     {
       "name": "series-start-180",
-      "path": "/example/ArcChart/series-start-180",
+      "title": "series start 180",
+      "path": "/docs/components/ArcChart/series-start-180",
       "components": [
         {
           "component": "ArcChart",
@@ -176,7 +189,8 @@
     },
     {
       "name": "series-start-90",
-      "path": "/example/ArcChart/series-start-90",
+      "title": "series start 90",
+      "path": "/docs/components/ArcChart/series-start-90",
       "components": [
         {
           "component": "ArcChart",
@@ -187,7 +201,8 @@
     },
     {
       "name": "series-track-color",
-      "path": "/example/ArcChart/series-track-color",
+      "title": "series track color",
+      "path": "/docs/components/ArcChart/series-track-color",
       "components": [
         {
           "component": "ArcChart",
@@ -198,7 +213,8 @@
     },
     {
       "name": "track-size",
-      "path": "/example/ArcChart/track-size",
+      "title": "track size",
+      "path": "/docs/components/ArcChart/track-size",
       "components": [
         {
           "component": "ArcChart",
@@ -212,115 +228,115 @@
     {
       "example": "basic",
       "component": "ArcChart",
-      "path": "/example/ArcChart/basic",
+      "path": "/docs/components/ArcChart/basic",
       "lineNumber": 8,
       "line": "<ArcChart"
     },
     {
       "example": "color",
       "component": "ArcChart",
-      "path": "/example/ArcChart/color",
+      "path": "/docs/components/ArcChart/color",
       "lineNumber": 8,
       "line": "<ArcChart"
     },
     {
       "example": "gradient-with-text",
       "component": "ArcChart",
-      "path": "/example/ArcChart/gradient-with-text",
+      "path": "/docs/components/ArcChart/gradient-with-text",
       "lineNumber": 5,
       "line": "<ArcChart height={140}>"
     },
     {
       "example": "radius-fixed",
       "component": "ArcChart",
-      "path": "/example/ArcChart/radius-fixed",
+      "path": "/docs/components/ArcChart/radius-fixed",
       "lineNumber": 8,
       "line": "<ArcChart"
     },
     {
       "example": "radius-offset",
       "component": "ArcChart",
-      "path": "/example/ArcChart/radius-offset",
+      "path": "/docs/components/ArcChart/radius-offset",
       "lineNumber": 8,
       "line": "<ArcChart"
     },
     {
       "example": "radius-percent",
       "component": "ArcChart",
-      "path": "/example/ArcChart/radius-percent",
+      "path": "/docs/components/ArcChart/radius-percent",
       "lineNumber": 8,
       "line": "<ArcChart"
     },
     {
       "example": "series",
       "component": "ArcChart",
-      "path": "/example/ArcChart/series",
+      "path": "/docs/components/ArcChart/series",
       "lineNumber": 10,
       "line": "<ArcChart"
     },
     {
       "example": "series-arc",
       "component": "ArcChart",
-      "path": "/example/ArcChart/series-arc",
+      "path": "/docs/components/ArcChart/series-arc",
       "lineNumber": 10,
       "line": "<ArcChart"
     },
     {
       "example": "series-individual",
       "component": "ArcChart",
-      "path": "/example/ArcChart/series-individual",
+      "path": "/docs/components/ArcChart/series-individual",
       "lineNumber": 12,
       "line": "<ArcChart"
     },
     {
       "example": "series-labels",
       "component": "ArcChart",
-      "path": "/example/ArcChart/series-labels",
+      "path": "/docs/components/ArcChart/series-labels",
       "lineNumber": 12,
       "line": "<ArcChart"
     },
     {
       "example": "series-motion-spring",
       "component": "ArcChart",
-      "path": "/example/ArcChart/series-motion-spring",
+      "path": "/docs/components/ArcChart/series-motion-spring",
       "lineNumber": 19,
       "line": "<ArcChart"
     },
     {
       "example": "series-motion-tween",
       "component": "ArcChart",
-      "path": "/example/ArcChart/series-motion-tween",
+      "path": "/docs/components/ArcChart/series-motion-tween",
       "lineNumber": 19,
       "line": "<ArcChart"
     },
     {
       "example": "series-start-180",
       "component": "ArcChart",
-      "path": "/example/ArcChart/series-start-180",
+      "path": "/docs/components/ArcChart/series-start-180",
       "lineNumber": 10,
       "line": "<ArcChart"
     },
     {
       "example": "series-start-90",
       "component": "ArcChart",
-      "path": "/example/ArcChart/series-start-90",
+      "path": "/docs/components/ArcChart/series-start-90",
       "lineNumber": 10,
       "line": "<ArcChart"
     },
     {
       "example": "series-track-color",
       "component": "ArcChart",
-      "path": "/example/ArcChart/series-track-color",
+      "path": "/docs/components/ArcChart/series-track-color",
       "lineNumber": 10,
       "line": "<ArcChart"
     },
     {
       "example": "track-size",
       "component": "ArcChart",
-      "path": "/example/ArcChart/track-size",
+      "path": "/docs/components/ArcChart/track-size",
       "lineNumber": 8,
       "line": "<ArcChart"
     }
   ],
-  "updatedAt": "2025-12-07T04:39:08.863Z"
+  "updatedAt": "2026-02-07T20:21:31.242Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Area.json b/docs/src/examples/catalog/Area.json
index 50ecbb4e2..cb12055d5 100644
--- a/docs/src/examples/catalog/Area.json
+++ b/docs/src/examples/catalog/Area.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "basic",
-      "path": "/example/Area/basic",
+      "title": "basic",
+      "path": "/docs/components/Area/basic",
       "components": [
         {
           "component": "Chart",
@@ -29,7 +30,8 @@
     },
     {
       "name": "clip-tween-on-mount",
-      "path": "/example/Area/clip-tween-on-mount",
+      "title": "clip tween on mount",
+      "path": "/docs/components/Area/clip-tween-on-mount",
       "components": [
         {
           "component": "Chart",
@@ -60,7 +62,8 @@
     },
     {
       "name": "clipped-area-on-tooltip",
-      "path": "/example/Area/clipped-area-on-tooltip",
+      "title": "clipped area on tooltip",
+      "path": "/docs/components/Area/clipped-area-on-tooltip",
       "components": [
         {
           "component": "Chart",
@@ -106,7 +109,8 @@
     },
     {
       "name": "explicit-axis-ticks-min-max",
-      "path": "/example/Area/explicit-axis-ticks-min-max",
+      "title": "explicit axis ticks min max",
+      "path": "/docs/components/Area/explicit-axis-ticks-min-max",
       "components": [
         {
           "component": "Chart",
@@ -137,7 +141,8 @@
     },
     {
       "name": "gradient",
-      "path": "/example/Area/gradient",
+      "title": "gradient",
+      "path": "/docs/components/Area/gradient",
       "components": [
         {
           "component": "Chart",
@@ -168,7 +173,8 @@
     },
     {
       "name": "gradient-separate-stroke",
-      "path": "/example/Area/gradient-separate-stroke",
+      "title": "gradient separate stroke",
+      "path": "/docs/components/Area/gradient-separate-stroke",
       "components": [
         {
           "component": "Chart",
@@ -199,7 +205,8 @@
     },
     {
       "name": "highlight-color-based-on-value-using-color-scale",
-      "path": "/example/Area/highlight-color-based-on-value-using-color-scale",
+      "title": "highlight color based on value using color scale",
+      "path": "/docs/components/Area/highlight-color-based-on-value-using-color-scale",
       "components": [
         {
           "component": "Chart",
@@ -245,7 +252,8 @@
     },
     {
       "name": "highlight-color-based-on-value-using-tooltip-slot-prop",
-      "path": "/example/Area/highlight-color-based-on-value-using-tooltip-slot-prop",
+      "title": "highlight color based on value using tooltip slot prop",
+      "path": "/docs/components/Area/highlight-color-based-on-value-using-tooltip-slot-prop",
       "components": [
         {
           "component": "Chart",
@@ -291,7 +299,8 @@
     },
     {
       "name": "multiple-series",
-      "path": "/example/Area/multiple-series",
+      "title": "multiple series",
+      "path": "/docs/components/Area/multiple-series",
       "components": [
         {
           "component": "Chart",
@@ -342,7 +351,8 @@
     },
     {
       "name": "multiple-series-highlight-on-hover",
-      "path": "/example/Area/multiple-series-highlight-on-hover",
+      "title": "multiple series highlight on hover",
+      "path": "/docs/components/Area/multiple-series-highlight-on-hover",
       "components": [
         {
           "component": "Chart",
@@ -393,7 +403,8 @@
     },
     {
       "name": "multiple-series-using-overrides",
-      "path": "/example/Area/multiple-series-using-overrides",
+      "title": "multiple series using overrides",
+      "path": "/docs/components/Area/multiple-series-using-overrides",
       "components": [
         {
           "component": "Chart",
@@ -429,7 +440,8 @@
     },
     {
       "name": "multiple-series-with-labels",
-      "path": "/example/Area/multiple-series-with-labels",
+      "title": "multiple series with labels",
+      "path": "/docs/components/Area/multiple-series-with-labels",
       "components": [
         {
           "component": "Chart",
@@ -470,7 +482,8 @@
     },
     {
       "name": "playground",
-      "path": "/example/Area/playground",
+      "title": "playground",
+      "path": "/docs/components/Area/playground",
       "components": [
         {
           "component": "Chart",
@@ -501,7 +514,8 @@
     },
     {
       "name": "stack",
-      "path": "/example/Area/stack",
+      "title": "stack",
+      "path": "/docs/components/Area/stack",
       "components": [
         {
           "component": "Chart",
@@ -537,7 +551,8 @@
     },
     {
       "name": "stack-with-gradient",
-      "path": "/example/Area/stack-with-gradient",
+      "title": "stack with gradient",
+      "path": "/docs/components/Area/stack-with-gradient",
       "components": [
         {
           "component": "Chart",
@@ -568,7 +583,8 @@
     },
     {
       "name": "threshold-with-lineargradient",
-      "path": "/example/Area/threshold-with-lineargradient",
+      "title": "threshold with lineargradient",
+      "path": "/docs/components/Area/threshold-with-lineargradient",
       "components": [
         {
           "component": "Chart",
@@ -604,7 +620,8 @@
     },
     {
       "name": "threshold-with-lineargradient-over-under",
-      "path": "/example/Area/threshold-with-lineargradient-over-under",
+      "title": "threshold with lineargradient over under",
+      "path": "/docs/components/Area/threshold-with-lineargradient-over-under",
       "components": [
         {
           "component": "Chart",
@@ -640,7 +657,8 @@
     },
     {
       "name": "threshold-with-rectclippath",
-      "path": "/example/Area/threshold-with-rectclippath",
+      "title": "threshold with rectclippath",
+      "path": "/docs/components/Area/threshold-with-rectclippath",
       "components": [
         {
           "component": "Chart",
@@ -676,7 +694,8 @@
     },
     {
       "name": "threshold-with-rectclippath-over-under",
-      "path": "/example/Area/threshold-with-rectclippath-over-under",
+      "title": "threshold with rectclippath over under",
+      "path": "/docs/components/Area/threshold-with-rectclippath-over-under",
       "components": [
         {
           "component": "Chart",
@@ -712,7 +731,8 @@
     },
     {
       "name": "with-labels",
-      "path": "/example/Area/with-labels",
+      "title": "with labels",
+      "path": "/docs/components/Area/with-labels",
       "components": [
         {
           "component": "Chart",
@@ -743,7 +763,8 @@
     },
     {
       "name": "with-tooltip-and-highlight",
-      "path": "/example/Area/with-tooltip-and-highlight",
+      "title": "with tooltip and highlight",
+      "path": "/docs/components/Area/with-tooltip-and-highlight",
       "components": [
         {
           "component": "Chart",
@@ -782,535 +803,535 @@
     {
       "example": "basic",
       "component": "Area",
-      "path": "/example/Area/basic",
+      "path": "/docs/components/Area/basic",
       "lineNumber": 15,
       "line": "<Area line={{ class: 'stroke-2 stroke-primary' }} class=\"fill-primary/30\" />"
     },
     {
       "example": "clip-tween-on-mount",
       "component": "Area",
-      "path": "/example/Area/clip-tween-on-mount",
+      "path": "/docs/components/Area/clip-tween-on-mount",
       "lineNumber": 25,
       "line": "<Area line={{ class: 'stroke-2 stroke-primary' }} class=\"fill-primary/30\" />"
     },
     {
       "example": "clipped-area-on-tooltip",
       "component": "Area",
-      "path": "/example/Area/clipped-area-on-tooltip",
+      "path": "/docs/components/Area/clipped-area-on-tooltip",
       "lineNumber": 34,
       "line": "<Area line={{ class: 'stroke-2 stroke-primary opacity-20' }} fill={gradient} />"
     },
     {
       "example": "clipped-area-on-tooltip",
       "component": "Area",
-      "path": "/example/Area/clipped-area-on-tooltip",
+      "path": "/docs/components/Area/clipped-area-on-tooltip",
       "lineNumber": 42,
       "line": "<Area line={{ class: 'stroke-2 stroke-primary' }} fill={gradient} />"
     },
     {
       "example": "explicit-axis-ticks-min-max",
       "component": "Area",
-      "path": "/example/Area/explicit-axis-ticks-min-max",
+      "path": "/docs/components/Area/explicit-axis-ticks-min-max",
       "lineNumber": 18,
       "line": "<Area line={{ class: 'stroke-2 stroke-primary' }} class=\"fill-primary/30\" />"
     },
     {
       "example": "gradient",
       "component": "Area",
-      "path": "/example/Area/gradient",
+      "path": "/docs/components/Area/gradient",
       "lineNumber": 16,
       "line": "<Area line={{ class: 'stroke-2 stroke-primary' }} fill={gradient} />"
     },
     {
       "example": "gradient-separate-stroke",
       "component": "Area",
-      "path": "/example/Area/gradient-separate-stroke",
+      "path": "/docs/components/Area/gradient-separate-stroke",
       "lineNumber": 18,
       "line": "<Area line={{ stroke: strokeGradient, class: 'stroke-2' }} fill={fillGradient} />"
     },
     {
       "example": "highlight-color-based-on-value-using-color-scale",
       "component": "Area",
-      "path": "/example/Area/highlight-color-based-on-value-using-color-scale",
+      "path": "/docs/components/Area/highlight-color-based-on-value-using-color-scale",
       "lineNumber": 33,
       "line": "<Area y0={(d) => 0} line={{ class: 'stroke-2 stroke-success' }} class=\"fill-success/20\" />"
     },
     {
       "example": "highlight-color-based-on-value-using-color-scale",
       "component": "Area",
-      "path": "/example/Area/highlight-color-based-on-value-using-color-scale",
+      "path": "/docs/components/Area/highlight-color-based-on-value-using-color-scale",
       "lineNumber": 41,
       "line": "<Area y0={(d) => 0} line={{ class: 'stroke-2 stroke-danger' }} class=\"fill-danger/20\" />"
     },
     {
       "example": "highlight-color-based-on-value-using-tooltip-slot-prop",
       "component": "Area",
-      "path": "/example/Area/highlight-color-based-on-value-using-tooltip-slot-prop",
+      "path": "/docs/components/Area/highlight-color-based-on-value-using-tooltip-slot-prop",
       "lineNumber": 22,
       "line": "<Area y0={(d) => 0} line={{ class: 'stroke-2 stroke-success' }} class=\"fill-success/20\" />"
     },
     {
       "example": "highlight-color-based-on-value-using-tooltip-slot-prop",
       "component": "Area",
-      "path": "/example/Area/highlight-color-based-on-value-using-tooltip-slot-prop",
+      "path": "/docs/components/Area/highlight-color-based-on-value-using-tooltip-slot-prop",
       "lineNumber": 30,
       "line": "<Area y0={(d) => 0} line={{ class: 'stroke-2 stroke-danger' }} class=\"fill-danger/20\" />"
     },
     {
       "example": "multiple-series",
       "component": "Area",
-      "path": "/example/Area/multiple-series",
+      "path": "/docs/components/Area/multiple-series",
       "lineNumber": 58,
       "line": "<Area {data} fill={color} fillOpacity={0.3} line={{ class: 'stroke-2', stroke: color }} />"
     },
     {
       "example": "multiple-series-highlight-on-hover",
       "component": "Area",
-      "path": "/example/Area/multiple-series-highlight-on-hover",
+      "path": "/docs/components/Area/multiple-series-highlight-on-hover",
       "lineNumber": 61,
       "line": "<Area {data} fill={color} fillOpacity={0.3} line={{ class: 'stroke-2', stroke: color }} />"
     },
     {
       "example": "multiple-series-using-overrides",
       "component": "Area",
-      "path": "/example/Area/multiple-series-using-overrides",
+      "path": "/docs/components/Area/multiple-series-using-overrides",
       "lineNumber": 37,
       "line": "<Area"
     },
     {
       "example": "multiple-series-using-overrides",
       "component": "Area",
-      "path": "/example/Area/multiple-series-using-overrides",
+      "path": "/docs/components/Area/multiple-series-using-overrides",
       "lineNumber": 45,
       "line": "<Area"
     },
     {
       "example": "multiple-series-using-overrides",
       "component": "Area",
-      "path": "/example/Area/multiple-series-using-overrides",
+      "path": "/docs/components/Area/multiple-series-using-overrides",
       "lineNumber": 53,
       "line": "<Area"
     },
     {
       "example": "multiple-series-with-labels",
       "component": "Area",
-      "path": "/example/Area/multiple-series-with-labels",
+      "path": "/docs/components/Area/multiple-series-with-labels",
       "lineNumber": 46,
       "line": "<Area {data} fill={color} fillOpacity={0.3} line={{ class: 'stroke-2', stroke: color }} />"
     },
     {
       "example": "playground",
       "component": "Area",
-      "path": "/example/Area/playground",
+      "path": "/docs/components/Area/playground",
       "lineNumber": 38,
       "line": "<Area"
     },
     {
       "example": "stack",
       "component": "Area",
-      "path": "/example/Area/stack",
+      "path": "/docs/components/Area/stack",
       "lineNumber": 63,
       "line": "<Area"
     },
     {
       "example": "stack-with-gradient",
       "component": "Area",
-      "path": "/example/Area/stack-with-gradient",
+      "path": "/docs/components/Area/stack-with-gradient",
       "lineNumber": 56,
       "line": "<Area"
     },
     {
       "example": "threshold-with-lineargradient",
       "component": "Area",
-      "path": "/example/Area/threshold-with-lineargradient",
+      "path": "/docs/components/Area/threshold-with-lineargradient",
       "lineNumber": 33,
       "line": "<Area line={{ stroke: gradient, class: 'stroke-2' }} fill={gradient} fillOpacity={0.2} />"
     },
     {
       "example": "threshold-with-lineargradient-over-under",
       "component": "Area",
-      "path": "/example/Area/threshold-with-lineargradient-over-under",
+      "path": "/docs/components/Area/threshold-with-lineargradient-over-under",
       "lineNumber": 33,
       "line": "<Area"
     },
     {
       "example": "threshold-with-rectclippath",
       "component": "Area",
-      "path": "/example/Area/threshold-with-rectclippath",
+      "path": "/docs/components/Area/threshold-with-rectclippath",
       "lineNumber": 22,
       "line": "<Area line={{ class: 'stroke-2 stroke-success' }} class=\"fill-success/20\" />"
     },
     {
       "example": "threshold-with-rectclippath",
       "component": "Area",
-      "path": "/example/Area/threshold-with-rectclippath",
+      "path": "/docs/components/Area/threshold-with-rectclippath",
       "lineNumber": 30,
       "line": "<Area line={{ class: 'stroke-2 stroke-danger' }} class=\"fill-danger/20\" />"
     },
     {
       "example": "threshold-with-rectclippath-over-under",
       "component": "Area",
-      "path": "/example/Area/threshold-with-rectclippath-over-under",
+      "path": "/docs/components/Area/threshold-with-rectclippath-over-under",
       "lineNumber": 22,
       "line": "<Area line={{ class: 'stroke-2 stroke-success' }} class=\"fill-success/20\" />"
     },
     {
       "example": "threshold-with-rectclippath-over-under",
       "component": "Area",
-      "path": "/example/Area/threshold-with-rectclippath-over-under",
+      "path": "/docs/components/Area/threshold-with-rectclippath-over-under",
       "lineNumber": 30,
       "line": "<Area y0={(d) => 0} line={{ class: 'stroke-2 stroke-danger' }} class=\"fill-danger/20\" />"
     },
     {
       "example": "with-labels",
       "component": "Area",
-      "path": "/example/Area/with-labels",
+      "path": "/docs/components/Area/with-labels",
       "lineNumber": 14,
       "line": "<Area line={{ class: 'stroke-2 stroke-primary' }} class=\"fill-primary/30\" />"
     },
     {
       "example": "with-tooltip-and-highlight",
       "component": "Area",
-      "path": "/example/Area/with-tooltip-and-highlight",
+      "path": "/docs/components/Area/with-tooltip-and-highlight",
       "lineNumber": 23,
       "line": "<Area line={{ class: 'stroke-2 stroke-primary' }} class=\"fill-primary/30\" />"
     },
     {
       "example": "custom",
       "component": "AreaChart",
-      "path": "/example/AreaChart/custom",
+      "path": "/docs/components/AreaChart/custom",
       "lineNumber": 23,
       "line": "<Area line={{ class: 'stroke-primary' }} class=\"fill-primary/30\" />"
     },
     {
       "example": "funnel",
       "component": "AreaChart",
-      "path": "/example/AreaChart/funnel",
+      "path": "/docs/components/AreaChart/funnel",
       "lineNumber": 71,
       "line": "<Area"
     },
     {
       "example": "gradient",
       "component": "AreaChart",
-      "path": "/example/AreaChart/gradient",
+      "path": "/docs/components/AreaChart/gradient",
       "lineNumber": 13,
       "line": "<Area line={{ class: 'stroke-primary' }} fill={gradient} />"
     },
     {
       "example": "series-individual-tooltip",
       "component": "AreaChart",
-      "path": "/example/AreaChart/series-individual-tooltip",
+      "path": "/docs/components/AreaChart/series-individual-tooltip",
       "lineNumber": 59,
       "line": "<Area data={s.data} line={{ stroke: s.color }} fill={s.color} fillOpacity={0.3} />"
     },
     {
       "example": "series-stack-gradient",
       "component": "AreaChart",
-      "path": "/example/AreaChart/series-stack-gradient",
+      "path": "/docs/components/AreaChart/series-stack-gradient",
       "lineNumber": 43,
       "line": "<Area {...getAreaProps(s, i)} fill={gradient} />"
     },
     {
       "example": "threshold",
       "component": "AreaChart",
-      "path": "/example/AreaChart/threshold",
+      "path": "/docs/components/AreaChart/threshold",
       "lineNumber": 36,
       "line": "<Area y0=\"value\" y1=\"baseline\" {curve} class=\"fill-success/30\" />"
     },
     {
       "example": "threshold",
       "component": "AreaChart",
-      "path": "/example/AreaChart/threshold",
+      "path": "/docs/components/AreaChart/threshold",
       "lineNumber": 40,
       "line": "<Area y0=\"value\" y1=\"baseline\" {curve} class=\"fill-danger/30\" />"
     },
     {
       "example": "threshold-gradient",
       "component": "AreaChart",
-      "path": "/example/AreaChart/threshold-gradient",
+      "path": "/docs/components/AreaChart/threshold-gradient",
       "lineNumber": 36,
       "line": "<Area"
     },
     {
       "example": "basic",
       "component": "BrushContext",
-      "path": "/example/BrushContext/basic",
+      "path": "/docs/components/BrushContext/basic",
       "lineNumber": 12,
       "line": "<Area line={{ class: 'stroke-2 stroke-primary' }} class=\"fill-primary/20\" />"
     },
     {
       "example": "constant-labels",
       "component": "BrushContext",
-      "path": "/example/BrushContext/constant-labels",
+      "path": "/docs/components/BrushContext/constant-labels",
       "lineNumber": 13,
       "line": "<Area line={{ class: 'stroke-2 stroke-primary' }} class=\"fill-primary/20\" />"
     },
     {
       "example": "handle-arrows",
       "component": "BrushContext",
-      "path": "/example/BrushContext/handle-arrows",
+      "path": "/docs/components/BrushContext/handle-arrows",
       "lineNumber": 22,
       "line": "<Area line={{ class: 'stroke-2 stroke-primary' }} class=\"fill-primary/20\" />"
     },
     {
       "example": "handle-labels",
       "component": "BrushContext",
-      "path": "/example/BrushContext/handle-labels",
+      "path": "/docs/components/BrushContext/handle-labels",
       "lineNumber": 14,
       "line": "<Area line={{ class: 'stroke-2 stroke-primary' }} class=\"fill-primary/20\" />"
     },
     {
       "example": "integrated-brush-(both-axis-area)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/integrated-brush-(both-axis-area)",
+      "path": "/docs/components/BrushContext/integrated-brush-(both-axis-area)",
       "lineNumber": 44,
       "line": "<Area line={{ class: 'stroke-2 stroke-primary' }} fill={gradient} />"
     },
     {
       "example": "integrated-brush-(x-axis)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/integrated-brush-(x-axis)",
+      "path": "/docs/components/BrushContext/integrated-brush-(x-axis)",
       "lineNumber": 41,
       "line": "<Area line={{ class: 'stroke-2 stroke-primary' }} fill={gradient} />"
     },
     {
       "example": "integrated-brush-(y-axis)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/integrated-brush-(y-axis)",
+      "path": "/docs/components/BrushContext/integrated-brush-(y-axis)",
       "lineNumber": 41,
       "line": "<Area line={{ class: 'stroke-2 stroke-primary' }} fill={gradient} />"
     },
     {
       "example": "separate-chart-(clip-data-y-axis)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/separate-chart-(clip-data-y-axis)",
+      "path": "/docs/components/BrushContext/separate-chart-(clip-data-y-axis)",
       "lineNumber": 35,
       "line": "<Area line={{ class: 'stroke-2 stroke-primary' }} class=\"fill-primary/20\" />"
     },
     {
       "example": "separate-chart-(clip-data-y-axis)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/separate-chart-(clip-data-y-axis)",
+      "path": "/docs/components/BrushContext/separate-chart-(clip-data-y-axis)",
       "lineNumber": 47,
       "line": "<Area line={{ class: 'stroke-2 stroke-primary' }} fill={gradient} />"
     },
     {
       "example": "separate-chart-(clip-data)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/separate-chart-(clip-data)",
+      "path": "/docs/components/BrushContext/separate-chart-(clip-data)",
       "lineNumber": 35,
       "line": "<Area line={{ class: 'stroke-2 stroke-primary' }} fill={gradient} />"
     },
     {
       "example": "separate-chart-(clip-data)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/separate-chart-(clip-data)",
+      "path": "/docs/components/BrushContext/separate-chart-(clip-data)",
       "lineNumber": 55,
       "line": "<Area line={{ class: 'stroke-2 stroke-primary' }} class=\"fill-primary/20\" />"
     },
     {
       "example": "separate-chart-(filter-data)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/separate-chart-(filter-data)",
+      "path": "/docs/components/BrushContext/separate-chart-(filter-data)",
       "lineNumber": 36,
       "line": "<Area"
     },
     {
       "example": "separate-chart-(filter-data)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/separate-chart-(filter-data)",
+      "path": "/docs/components/BrushContext/separate-chart-(filter-data)",
       "lineNumber": 62,
       "line": "<Area line={{ class: 'stroke-2 stroke-primary' }} class=\"fill-primary/20\" />"
     },
     {
       "example": "simple-styling",
       "component": "BrushContext",
-      "path": "/example/BrushContext/simple-styling",
+      "path": "/docs/components/BrushContext/simple-styling",
       "lineNumber": 18,
       "line": "<Area line={{ class: 'stroke-2 stroke-primary' }} class=\"fill-primary/20\" />"
     },
     {
       "example": "striped-background",
       "component": "BrushContext",
-      "path": "/example/BrushContext/striped-background",
+      "path": "/docs/components/BrushContext/striped-background",
       "lineNumber": 12,
       "line": "<Area line={{ class: 'stroke-2 stroke-primary' }} class=\"fill-primary/20\" />"
     },
     {
       "example": "sync-brushes-with-bind-xdomain",
       "component": "BrushContext",
-      "path": "/example/BrushContext/sync-brushes-with-bind-xdomain",
+      "path": "/docs/components/BrushContext/sync-brushes-with-bind-xdomain",
       "lineNumber": 74,
       "line": "<Area line={{ class: 'stroke-2 stroke-(--chart-color)' }} fill={gradient} />"
     },
     {
       "example": "sync-brushes-with-bind-xdomain",
       "component": "BrushContext",
-      "path": "/example/BrushContext/sync-brushes-with-bind-xdomain",
+      "path": "/docs/components/BrushContext/sync-brushes-with-bind-xdomain",
       "lineNumber": 95,
       "line": "<Area"
     },
     {
       "example": "tooltip-interop",
       "component": "BrushContext",
-      "path": "/example/BrushContext/tooltip-interop",
+      "path": "/docs/components/BrushContext/tooltip-interop",
       "lineNumber": 46,
       "line": "<Area line={{ class: 'stroke-2 stroke-primary' }} fill={gradient} />"
     },
     {
       "example": "compound-common-scale-with-extra-marks",
       "component": "Chart",
-      "path": "/example/Chart/compound-common-scale-with-extra-marks",
+      "path": "/docs/components/Chart/compound-common-scale-with-extra-marks",
       "lineNumber": 25,
       "line": "<Area y1=\"value\" class=\"fill-secondary/20\" line={{ class: 'stroke-secondary' }} />"
     },
     {
       "example": "radial-line-with-areas",
       "component": "Spline",
-      "path": "/example/Spline/radial-line-with-areas",
+      "path": "/docs/components/Spline/radial-line-with-areas",
       "lineNumber": 24,
       "line": "<Area"
     },
     {
       "example": "radial-line-with-areas",
       "component": "Spline",
-      "path": "/example/Spline/radial-line-with-areas",
+      "path": "/docs/components/Spline/radial-line-with-areas",
       "lineNumber": 30,
       "line": "<Area"
     },
     {
       "example": "basic",
       "component": "Threshold",
-      "path": "/example/Threshold/basic",
+      "path": "/docs/components/Threshold/basic",
       "lineNumber": 33,
       "line": "<Area y0=\"value\" y1=\"baseline\" {curve} class=\"fill-success/30\" />"
     },
     {
       "example": "basic",
       "component": "Threshold",
-      "path": "/example/Threshold/basic",
+      "path": "/docs/components/Threshold/basic",
       "lineNumber": 42,
       "line": "<Area y0=\"value\" y1=\"baseline\" {curve} class=\"fill-danger/30\" />"
     },
     {
       "example": "with-labels",
       "component": "Threshold",
-      "path": "/example/Threshold/with-labels",
+      "path": "/docs/components/Threshold/with-labels",
       "lineNumber": 34,
       "line": "<Area y0=\"value\" y1=\"baseline\" {curve} class=\"fill-success/30\" />"
     },
     {
       "example": "with-labels",
       "component": "Threshold",
-      "path": "/example/Threshold/with-labels",
+      "path": "/docs/components/Threshold/with-labels",
       "lineNumber": 38,
       "line": "<Area y0=\"value\" y1=\"baseline\" {curve} class=\"fill-danger/30\" />"
     },
     {
       "example": "with-tooltip-and-highlight",
       "component": "Threshold",
-      "path": "/example/Threshold/with-tooltip-and-highlight",
+      "path": "/docs/components/Threshold/with-tooltip-and-highlight",
       "lineNumber": 36,
       "line": "<Area y0=\"value\" y1=\"baseline\" {curve} class=\"fill-success/30\" />"
     },
     {
       "example": "with-tooltip-and-highlight",
       "component": "Threshold",
-      "path": "/example/Threshold/with-tooltip-and-highlight",
+      "path": "/docs/components/Threshold/with-tooltip-and-highlight",
       "lineNumber": 40,
       "line": "<Area y0=\"value\" y1=\"baseline\" {curve} class=\"fill-danger/30\" />"
     },
     {
       "example": "anchor-location",
       "component": "Tooltip",
-      "path": "/example/Tooltip/anchor-location",
+      "path": "/docs/components/Tooltip/anchor-location",
       "lineNumber": 39,
       "line": "<Area class=\"fill-primary/30\" line={{ class: 'stroke-primary stroke-2' }} />"
     },
     {
       "example": "area",
       "component": "Tooltip",
-      "path": "/example/Tooltip/area",
+      "path": "/docs/components/Tooltip/area",
       "lineNumber": 42,
       "line": "<Area class=\"fill-primary/30\" line={{ class: 'stroke-primary stroke-2' }} />"
     },
     {
       "example": "basic",
       "component": "Tooltip",
-      "path": "/example/Tooltip/basic",
+      "path": "/docs/components/Tooltip/basic",
       "lineNumber": 29,
       "line": "<Area class=\"fill-primary/30\" line={{ class: 'stroke-primary stroke-2' }} />"
     },
     {
       "example": "color-swatch",
       "component": "Tooltip",
-      "path": "/example/Tooltip/color-swatch",
+      "path": "/docs/components/Tooltip/color-swatch",
       "lineNumber": 29,
       "line": "<Area class=\"fill-primary/30\" line={{ class: 'stroke-primary stroke-2' }} />"
     },
     {
       "example": "color-swatch-using-theme",
       "component": "Tooltip",
-      "path": "/example/Tooltip/color-swatch-using-theme",
+      "path": "/docs/components/Tooltip/color-swatch-using-theme",
       "lineNumber": 29,
       "line": "<Area class=\"fill-primary/30\" line={{ class: 'stroke-primary stroke-2' }} />"
     },
     {
       "example": "custom-content",
       "component": "Tooltip",
-      "path": "/example/Tooltip/custom-content",
+      "path": "/docs/components/Tooltip/custom-content",
       "lineNumber": 29,
       "line": "<Area class=\"fill-primary/30\" line={{ class: 'stroke-primary stroke-2' }} />"
     },
     {
       "example": "data-snapping",
       "component": "Tooltip",
-      "path": "/example/Tooltip/data-snapping",
+      "path": "/docs/components/Tooltip/data-snapping",
       "lineNumber": 29,
       "line": "<Area class=\"fill-primary/30\" line={{ class: 'stroke-primary stroke-2' }} />"
     },
     {
       "example": "default-mouse-position-with-offset",
       "component": "Tooltip",
-      "path": "/example/Tooltip/default-mouse-position-with-offset",
+      "path": "/docs/components/Tooltip/default-mouse-position-with-offset",
       "lineNumber": 29,
       "line": "<Area class=\"fill-primary/30\" line={{ class: 'stroke-primary stroke-2' }} />"
     },
     {
       "example": "disable-motion",
       "component": "Tooltip",
-      "path": "/example/Tooltip/disable-motion",
+      "path": "/docs/components/Tooltip/disable-motion",
       "lineNumber": 29,
       "line": "<Area class=\"fill-primary/30\" line={{ class: 'stroke-primary stroke-2' }} />"
     },
     {
       "example": "externally-access-tooltip-data",
       "component": "Tooltip",
-      "path": "/example/Tooltip/externally-access-tooltip-data",
+      "path": "/docs/components/Tooltip/externally-access-tooltip-data",
       "lineNumber": 53,
       "line": "<Area class=\"fill-primary/30\" line={{ class: 'stroke-primary stroke-2' }} />"
     },
     {
       "example": "invert-variant",
       "component": "Tooltip",
-      "path": "/example/Tooltip/invert-variant",
+      "path": "/docs/components/Tooltip/invert-variant",
       "lineNumber": 29,
       "line": "<Area class=\"fill-primary/30\" line={{ class: 'stroke-primary stroke-2' }} />"
     },
     {
       "example": "multiple-tooltips-with-fixed-single-axis",
       "component": "Tooltip",
-      "path": "/example/Tooltip/multiple-tooltips-with-fixed-single-axis",
+      "path": "/docs/components/Tooltip/multiple-tooltips-with-fixed-single-axis",
       "lineNumber": 31,
       "line": "<Area class=\"fill-primary/30\" line={{ class: 'stroke-primary stroke-2' }} />"
     },
     {
       "example": "stacked-area",
       "component": "Tooltip",
-      "path": "/example/Tooltip/stacked-area",
+      "path": "/docs/components/Tooltip/stacked-area",
       "lineNumber": 63,
       "line": "<Area"
     }
   ],
-  "updatedAt": "2026-01-13T17:22:23.229Z"
+  "updatedAt": "2026-02-07T20:21:31.262Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/AreaChart.json b/docs/src/examples/catalog/AreaChart.json
index 0342fee11..c897d4e56 100644
--- a/docs/src/examples/catalog/AreaChart.json
+++ b/docs/src/examples/catalog/AreaChart.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "band-scale",
-      "path": "/example/AreaChart/band-scale",
+      "title": "band scale",
+      "path": "/docs/components/AreaChart/band-scale",
       "components": [
         {
           "component": "AreaChart",
@@ -14,7 +15,8 @@
     },
     {
       "name": "basic",
-      "path": "/example/AreaChart/basic",
+      "title": "basic",
+      "path": "/docs/components/AreaChart/basic",
       "components": [
         {
           "component": "AreaChart",
@@ -25,7 +27,8 @@
     },
     {
       "name": "brush",
-      "path": "/example/AreaChart/brush",
+      "title": "brush",
+      "path": "/docs/components/AreaChart/brush",
       "components": [
         {
           "component": "AreaChart",
@@ -36,7 +39,8 @@
     },
     {
       "name": "brush-sync",
-      "path": "/example/AreaChart/brush-sync",
+      "title": "brush sync",
+      "path": "/docs/components/AreaChart/brush-sync",
       "components": [
         {
           "component": "AreaChart",
@@ -47,7 +51,8 @@
     },
     {
       "name": "curve",
-      "path": "/example/AreaChart/curve",
+      "title": "curve",
+      "path": "/docs/components/AreaChart/curve",
       "components": [
         {
           "component": "AreaChart",
@@ -58,7 +63,8 @@
     },
     {
       "name": "custom",
-      "path": "/example/AreaChart/custom",
+      "title": "custom",
+      "path": "/docs/components/AreaChart/custom",
       "components": [
         {
           "component": "AreaChart",
@@ -94,7 +100,8 @@
     },
     {
       "name": "custom-tooltip",
-      "path": "/example/AreaChart/custom-tooltip",
+      "title": "custom tooltip",
+      "path": "/docs/components/AreaChart/custom-tooltip",
       "components": [
         {
           "component": "AreaChart",
@@ -110,7 +117,8 @@
     },
     {
       "name": "default-series-label",
-      "path": "/example/AreaChart/default-series-label",
+      "title": "default series label",
+      "path": "/docs/components/AreaChart/default-series-label",
       "components": [
         {
           "component": "AreaChart",
@@ -121,7 +129,8 @@
     },
     {
       "name": "funnel",
-      "path": "/example/AreaChart/funnel",
+      "title": "funnel",
+      "path": "/docs/components/AreaChart/funnel",
       "components": [
         {
           "component": "AreaChart",
@@ -147,7 +156,8 @@
     },
     {
       "name": "gradient",
-      "path": "/example/AreaChart/gradient",
+      "title": "gradient",
+      "path": "/docs/components/AreaChart/gradient",
       "components": [
         {
           "component": "AreaChart",
@@ -168,7 +178,8 @@
     },
     {
       "name": "labels",
-      "path": "/example/AreaChart/labels",
+      "title": "labels",
+      "path": "/docs/components/AreaChart/labels",
       "components": [
         {
           "component": "AreaChart",
@@ -179,7 +190,8 @@
     },
     {
       "name": "line-annotation",
-      "path": "/example/AreaChart/line-annotation",
+      "title": "line annotation",
+      "path": "/docs/components/AreaChart/line-annotation",
       "components": [
         {
           "component": "AreaChart",
@@ -190,7 +202,8 @@
     },
     {
       "name": "markers",
-      "path": "/example/AreaChart/markers",
+      "title": "markers",
+      "path": "/docs/components/AreaChart/markers",
       "components": [
         {
           "component": "AreaChart",
@@ -216,7 +229,8 @@
     },
     {
       "name": "null-gaps",
-      "path": "/example/AreaChart/null-gaps",
+      "title": "null gaps",
+      "path": "/docs/components/AreaChart/null-gaps",
       "components": [
         {
           "component": "AreaChart",
@@ -227,7 +241,8 @@
     },
     {
       "name": "point-annotations",
-      "path": "/example/AreaChart/point-annotations",
+      "title": "point annotations",
+      "path": "/docs/components/AreaChart/point-annotations",
       "components": [
         {
           "component": "AreaChart",
@@ -243,7 +258,8 @@
     },
     {
       "name": "point-scale",
-      "path": "/example/AreaChart/point-scale",
+      "title": "point scale",
+      "path": "/docs/components/AreaChart/point-scale",
       "components": [
         {
           "component": "AreaChart",
@@ -254,7 +270,8 @@
     },
     {
       "name": "points",
-      "path": "/example/AreaChart/points",
+      "title": "points",
+      "path": "/docs/components/AreaChart/points",
       "components": [
         {
           "component": "AreaChart",
@@ -265,7 +282,8 @@
     },
     {
       "name": "radial",
-      "path": "/example/AreaChart/radial",
+      "title": "radial",
+      "path": "/docs/components/AreaChart/radial",
       "components": [
         {
           "component": "AreaChart",
@@ -281,7 +299,8 @@
     },
     {
       "name": "range-annotation",
-      "path": "/example/AreaChart/range-annotation",
+      "title": "range annotation",
+      "path": "/docs/components/AreaChart/range-annotation",
       "components": [
         {
           "component": "AreaChart",
@@ -292,7 +311,8 @@
     },
     {
       "name": "series",
-      "path": "/example/AreaChart/series",
+      "title": "series",
+      "path": "/docs/components/AreaChart/series",
       "components": [
         {
           "component": "AreaChart",
@@ -303,7 +323,8 @@
     },
     {
       "name": "series-individual-tooltip",
-      "path": "/example/AreaChart/series-individual-tooltip",
+      "title": "series individual tooltip",
+      "path": "/docs/components/AreaChart/series-individual-tooltip",
       "components": [
         {
           "component": "AreaChart",
@@ -329,7 +350,8 @@
     },
     {
       "name": "series-point-annotations",
-      "path": "/example/AreaChart/series-point-annotations",
+      "title": "series point annotations",
+      "path": "/docs/components/AreaChart/series-point-annotations",
       "components": [
         {
           "component": "AreaChart",
@@ -340,7 +362,8 @@
     },
     {
       "name": "series-point-click",
-      "path": "/example/AreaChart/series-point-click",
+      "title": "series point click",
+      "path": "/docs/components/AreaChart/series-point-click",
       "components": [
         {
           "component": "AreaChart",
@@ -351,7 +374,8 @@
     },
     {
       "name": "series-separate-data",
-      "path": "/example/AreaChart/series-separate-data",
+      "title": "series separate data",
+      "path": "/docs/components/AreaChart/series-separate-data",
       "components": [
         {
           "component": "AreaChart",
@@ -362,7 +386,8 @@
     },
     {
       "name": "series-stack",
-      "path": "/example/AreaChart/series-stack",
+      "title": "series stack",
+      "path": "/docs/components/AreaChart/series-stack",
       "components": [
         {
           "component": "AreaChart",
@@ -373,7 +398,8 @@
     },
     {
       "name": "series-stack-diverging",
-      "path": "/example/AreaChart/series-stack-diverging",
+      "title": "series stack diverging",
+      "path": "/docs/components/AreaChart/series-stack-diverging",
       "components": [
         {
           "component": "AreaChart",
@@ -384,7 +410,8 @@
     },
     {
       "name": "series-stack-expand",
-      "path": "/example/AreaChart/series-stack-expand",
+      "title": "series stack expand",
+      "path": "/docs/components/AreaChart/series-stack-expand",
       "components": [
         {
           "component": "AreaChart",
@@ -395,7 +422,8 @@
     },
     {
       "name": "series-stack-gradient",
-      "path": "/example/AreaChart/series-stack-gradient",
+      "title": "series stack gradient",
+      "path": "/docs/components/AreaChart/series-stack-gradient",
       "components": [
         {
           "component": "AreaChart",
@@ -416,7 +444,8 @@
     },
     {
       "name": "series-stack-legend",
-      "path": "/example/AreaChart/series-stack-legend",
+      "title": "series stack legend",
+      "path": "/docs/components/AreaChart/series-stack-legend",
       "components": [
         {
           "component": "AreaChart",
@@ -427,7 +456,8 @@
     },
     {
       "name": "series-stack-legend-labels",
-      "path": "/example/AreaChart/series-stack-legend-labels",
+      "title": "series stack legend labels",
+      "path": "/docs/components/AreaChart/series-stack-legend-labels",
       "components": [
         {
           "component": "AreaChart",
@@ -438,7 +468,8 @@
     },
     {
       "name": "series-stack-legend-placement",
-      "path": "/example/AreaChart/series-stack-legend-placement",
+      "title": "series stack legend placement",
+      "path": "/docs/components/AreaChart/series-stack-legend-placement",
       "components": [
         {
           "component": "AreaChart",
@@ -449,7 +480,8 @@
     },
     {
       "name": "series-stack-separate-data",
-      "path": "/example/AreaChart/series-stack-separate-data",
+      "title": "series stack separate data",
+      "path": "/docs/components/AreaChart/series-stack-separate-data",
       "components": [
         {
           "component": "AreaChart",
@@ -460,7 +492,8 @@
     },
     {
       "name": "series-tooltip-click",
-      "path": "/example/AreaChart/series-tooltip-click",
+      "title": "series tooltip click",
+      "path": "/docs/components/AreaChart/series-tooltip-click",
       "components": [
         {
           "component": "AreaChart",
@@ -471,7 +504,8 @@
     },
     {
       "name": "single-axis-x",
-      "path": "/example/AreaChart/single-axis-x",
+      "title": "single axis x",
+      "path": "/docs/components/AreaChart/single-axis-x",
       "components": [
         {
           "component": "AreaChart",
@@ -482,7 +516,8 @@
     },
     {
       "name": "single-axis-y",
-      "path": "/example/AreaChart/single-axis-y",
+      "title": "single axis y",
+      "path": "/docs/components/AreaChart/single-axis-y",
       "components": [
         {
           "component": "AreaChart",
@@ -493,7 +528,8 @@
     },
     {
       "name": "sparkline",
-      "path": "/example/AreaChart/sparkline",
+      "title": "sparkline",
+      "path": "/docs/components/AreaChart/sparkline",
       "components": [
         {
           "component": "AreaChart",
@@ -504,7 +540,8 @@
     },
     {
       "name": "threshold",
-      "path": "/example/AreaChart/threshold",
+      "title": "threshold",
+      "path": "/docs/components/AreaChart/threshold",
       "components": [
         {
           "component": "AreaChart",
@@ -535,7 +572,8 @@
     },
     {
       "name": "threshold-gradient",
-      "path": "/example/AreaChart/threshold-gradient",
+      "title": "threshold gradient",
+      "path": "/docs/components/AreaChart/threshold-gradient",
       "components": [
         {
           "component": "AreaChart",
@@ -566,7 +604,8 @@
     },
     {
       "name": "tooltip-external",
-      "path": "/example/AreaChart/tooltip-external",
+      "title": "tooltip external",
+      "path": "/docs/components/AreaChart/tooltip-external",
       "components": [
         {
           "component": "AreaChart",
@@ -577,7 +616,8 @@
     },
     {
       "name": "tooltip-fixed-with-hide-delay",
-      "path": "/example/AreaChart/tooltip-fixed-with-hide-delay",
+      "title": "tooltip fixed with hide delay",
+      "path": "/docs/components/AreaChart/tooltip-fixed-with-hide-delay",
       "components": [
         {
           "component": "AreaChart",
@@ -593,7 +633,8 @@
     },
     {
       "name": "tooltip-locking",
-      "path": "/example/AreaChart/tooltip-locking",
+      "title": "tooltip locking",
+      "path": "/docs/components/AreaChart/tooltip-locking",
       "components": [
         {
           "component": "AreaChart",
@@ -612,318 +653,318 @@
     {
       "example": "band-scale",
       "component": "AreaChart",
-      "path": "/example/AreaChart/band-scale",
+      "path": "/docs/components/AreaChart/band-scale",
       "lineNumber": 10,
       "line": "<AreaChart"
     },
     {
       "example": "basic",
       "component": "AreaChart",
-      "path": "/example/AreaChart/basic",
+      "path": "/docs/components/AreaChart/basic",
       "lineNumber": 9,
       "line": "<AreaChart {data} x=\"date\" y=\"value\" padding={defaultChartPadding({ right: 10 })} height={300} />"
     },
     {
       "example": "brush",
       "component": "AreaChart",
-      "path": "/example/AreaChart/brush",
+      "path": "/docs/components/AreaChart/brush",
       "lineNumber": 9,
       "line": "<AreaChart"
     },
     {
       "example": "brush-sync",
       "component": "AreaChart",
-      "path": "/example/AreaChart/brush-sync",
+      "path": "/docs/components/AreaChart/brush-sync",
       "lineNumber": 23,
       "line": "<AreaChart"
     },
     {
       "example": "brush-sync",
       "component": "AreaChart",
-      "path": "/example/AreaChart/brush-sync",
+      "path": "/docs/components/AreaChart/brush-sync",
       "lineNumber": 42,
       "line": "<AreaChart"
     },
     {
       "example": "curve",
       "component": "AreaChart",
-      "path": "/example/AreaChart/curve",
+      "path": "/docs/components/AreaChart/curve",
       "lineNumber": 10,
       "line": "<AreaChart"
     },
     {
       "example": "custom",
       "component": "AreaChart",
-      "path": "/example/AreaChart/custom",
+      "path": "/docs/components/AreaChart/custom",
       "lineNumber": 18,
       "line": "<AreaChart {data} x=\"date\" y=\"value\" padding={defaultChartPadding({ right: 15 })} height={300}>"
     },
     {
       "example": "custom-tooltip",
       "component": "AreaChart",
-      "path": "/example/AreaChart/custom-tooltip",
+      "path": "/docs/components/AreaChart/custom-tooltip",
       "lineNumber": 10,
       "line": "<AreaChart {data} x=\"date\" y=\"value\" padding={defaultChartPadding({ right: 10 })} height={300}>"
     },
     {
       "example": "default-series-label",
       "component": "AreaChart",
-      "path": "/example/AreaChart/default-series-label",
+      "path": "/docs/components/AreaChart/default-series-label",
       "lineNumber": 14,
       "line": "<AreaChart {data} x=\"date\" y=\"visits\" padding={defaultChartPadding({ right: 10 })} height={300} />"
     },
     {
       "example": "funnel",
       "component": "AreaChart",
-      "path": "/example/AreaChart/funnel",
+      "path": "/docs/components/AreaChart/funnel",
       "lineNumber": 44,
       "line": "<AreaChart"
     },
     {
       "example": "gradient",
       "component": "AreaChart",
-      "path": "/example/AreaChart/gradient",
+      "path": "/docs/components/AreaChart/gradient",
       "lineNumber": 9,
       "line": "<AreaChart {data} x=\"date\" y=\"value\" padding={defaultChartPadding({ right: 10 })} height={300}>"
     },
     {
       "example": "labels",
       "component": "AreaChart",
-      "path": "/example/AreaChart/labels",
+      "path": "/docs/components/AreaChart/labels",
       "lineNumber": 9,
       "line": "<AreaChart"
     },
     {
       "example": "line-annotation",
       "component": "AreaChart",
-      "path": "/example/AreaChart/line-annotation",
+      "path": "/docs/components/AreaChart/line-annotation",
       "lineNumber": 9,
       "line": "<AreaChart"
     },
     {
       "example": "markers",
       "component": "AreaChart",
-      "path": "/example/AreaChart/markers",
+      "path": "/docs/components/AreaChart/markers",
       "lineNumber": 13,
       "line": "<AreaChart"
     },
     {
       "example": "null-gaps",
       "component": "AreaChart",
-      "path": "/example/AreaChart/null-gaps",
+      "path": "/docs/components/AreaChart/null-gaps",
       "lineNumber": 14,
       "line": "<AreaChart"
     },
     {
       "example": "point-annotations",
       "component": "AreaChart",
-      "path": "/example/AreaChart/point-annotations",
+      "path": "/docs/components/AreaChart/point-annotations",
       "lineNumber": 23,
       "line": "<AreaChart"
     },
     {
       "example": "point-scale",
       "component": "AreaChart",
-      "path": "/example/AreaChart/point-scale",
+      "path": "/docs/components/AreaChart/point-scale",
       "lineNumber": 10,
       "line": "<AreaChart"
     },
     {
       "example": "points",
       "component": "AreaChart",
-      "path": "/example/AreaChart/points",
+      "path": "/docs/components/AreaChart/points",
       "lineNumber": 9,
       "line": "<AreaChart"
     },
     {
       "example": "radial",
       "component": "AreaChart",
-      "path": "/example/AreaChart/radial",
+      "path": "/docs/components/AreaChart/radial",
       "lineNumber": 10,
       "line": "<AreaChart"
     },
     {
       "example": "range-annotation",
       "component": "AreaChart",
-      "path": "/example/AreaChart/range-annotation",
+      "path": "/docs/components/AreaChart/range-annotation",
       "lineNumber": 9,
       "line": "<AreaChart"
     },
     {
       "example": "series",
       "component": "AreaChart",
-      "path": "/example/AreaChart/series",
+      "path": "/docs/components/AreaChart/series",
       "lineNumber": 15,
       "line": "<AreaChart"
     },
     {
       "example": "series-individual-tooltip",
       "component": "AreaChart",
-      "path": "/example/AreaChart/series-individual-tooltip",
+      "path": "/docs/components/AreaChart/series-individual-tooltip",
       "lineNumber": 29,
       "line": "<AreaChart"
     },
     {
       "example": "series-point-annotations",
       "component": "AreaChart",
-      "path": "/example/AreaChart/series-point-annotations",
+      "path": "/docs/components/AreaChart/series-point-annotations",
       "lineNumber": 38,
       "line": "<AreaChart"
     },
     {
       "example": "series-point-click",
       "component": "AreaChart",
-      "path": "/example/AreaChart/series-point-click",
+      "path": "/docs/components/AreaChart/series-point-click",
       "lineNumber": 15,
       "line": "<AreaChart"
     },
     {
       "example": "series-separate-data",
       "component": "AreaChart",
-      "path": "/example/AreaChart/series-separate-data",
+      "path": "/docs/components/AreaChart/series-separate-data",
       "lineNumber": 20,
       "line": "<AreaChart"
     },
     {
       "example": "series-stack",
       "component": "AreaChart",
-      "path": "/example/AreaChart/series-stack",
+      "path": "/docs/components/AreaChart/series-stack",
       "lineNumber": 15,
       "line": "<AreaChart"
     },
     {
       "example": "series-stack-diverging",
       "component": "AreaChart",
-      "path": "/example/AreaChart/series-stack-diverging",
+      "path": "/docs/components/AreaChart/series-stack-diverging",
       "lineNumber": 15,
       "line": "<AreaChart"
     },
     {
       "example": "series-stack-expand",
       "component": "AreaChart",
-      "path": "/example/AreaChart/series-stack-expand",
+      "path": "/docs/components/AreaChart/series-stack-expand",
       "lineNumber": 15,
       "line": "<AreaChart"
     },
     {
       "example": "series-stack-gradient",
       "component": "AreaChart",
-      "path": "/example/AreaChart/series-stack-gradient",
+      "path": "/docs/components/AreaChart/series-stack-gradient",
       "lineNumber": 15,
       "line": "<AreaChart"
     },
     {
       "example": "series-stack-legend",
       "component": "AreaChart",
-      "path": "/example/AreaChart/series-stack-legend",
+      "path": "/docs/components/AreaChart/series-stack-legend",
       "lineNumber": 15,
       "line": "<AreaChart"
     },
     {
       "example": "series-stack-legend-labels",
       "component": "AreaChart",
-      "path": "/example/AreaChart/series-stack-legend-labels",
+      "path": "/docs/components/AreaChart/series-stack-legend-labels",
       "lineNumber": 15,
       "line": "<AreaChart"
     },
     {
       "example": "series-stack-legend-placement",
       "component": "AreaChart",
-      "path": "/example/AreaChart/series-stack-legend-placement",
+      "path": "/docs/components/AreaChart/series-stack-legend-placement",
       "lineNumber": 15,
       "line": "<AreaChart"
     },
     {
       "example": "series-stack-separate-data",
       "component": "AreaChart",
-      "path": "/example/AreaChart/series-stack-separate-data",
+      "path": "/docs/components/AreaChart/series-stack-separate-data",
       "lineNumber": 20,
       "line": "<AreaChart"
     },
     {
       "example": "series-tooltip-click",
       "component": "AreaChart",
-      "path": "/example/AreaChart/series-tooltip-click",
+      "path": "/docs/components/AreaChart/series-tooltip-click",
       "lineNumber": 9,
       "line": "<AreaChart"
     },
     {
       "example": "single-axis-x",
       "component": "AreaChart",
-      "path": "/example/AreaChart/single-axis-x",
+      "path": "/docs/components/AreaChart/single-axis-x",
       "lineNumber": 9,
       "line": "<AreaChart"
     },
     {
       "example": "single-axis-y",
       "component": "AreaChart",
-      "path": "/example/AreaChart/single-axis-y",
+      "path": "/docs/components/AreaChart/single-axis-y",
       "lineNumber": 9,
       "line": "<AreaChart"
     },
     {
       "example": "sparkline",
       "component": "AreaChart",
-      "path": "/example/AreaChart/sparkline",
+      "path": "/docs/components/AreaChart/sparkline",
       "lineNumber": 9,
       "line": "<AreaChart"
     },
     {
       "example": "threshold",
       "component": "AreaChart",
-      "path": "/example/AreaChart/threshold",
+      "path": "/docs/components/AreaChart/threshold",
       "lineNumber": 22,
       "line": "<AreaChart"
     },
     {
       "example": "threshold-gradient",
       "component": "AreaChart",
-      "path": "/example/AreaChart/threshold-gradient",
+      "path": "/docs/components/AreaChart/threshold-gradient",
       "lineNumber": 22,
       "line": "<AreaChart {data} x=\"date\" y=\"value\" padding={defaultChartPadding({ right: 15 })} height={300}>"
     },
     {
       "example": "tooltip-external",
       "component": "AreaChart",
-      "path": "/example/AreaChart/tooltip-external",
+      "path": "/docs/components/AreaChart/tooltip-external",
       "lineNumber": 27,
       "line": "<AreaChart"
     },
     {
       "example": "tooltip-fixed-with-hide-delay",
       "component": "AreaChart",
-      "path": "/example/AreaChart/tooltip-fixed-with-hide-delay",
+      "path": "/docs/components/AreaChart/tooltip-fixed-with-hide-delay",
       "lineNumber": 16,
       "line": "<AreaChart"
     },
     {
       "example": "tooltip-locking",
       "component": "AreaChart",
-      "path": "/example/AreaChart/tooltip-locking",
+      "path": "/docs/components/AreaChart/tooltip-locking",
       "lineNumber": 19,
       "line": "<AreaChart"
     },
     {
       "example": "basic",
       "component": "Threshold",
-      "path": "/example/Threshold/basic",
+      "path": "/docs/components/Threshold/basic",
       "lineNumber": 22,
       "line": "<AreaChart"
     },
     {
       "example": "with-labels",
       "component": "Threshold",
-      "path": "/example/Threshold/with-labels",
+      "path": "/docs/components/Threshold/with-labels",
       "lineNumber": 22,
       "line": "<AreaChart"
     },
     {
       "example": "with-tooltip-and-highlight",
       "component": "Threshold",
-      "path": "/example/Threshold/with-tooltip-and-highlight",
+      "path": "/docs/components/Threshold/with-tooltip-and-highlight",
       "lineNumber": 22,
       "line": "<AreaChart"
     }
   ],
-  "updatedAt": "2026-01-06T13:02:20.716Z"
+  "updatedAt": "2026-02-07T20:21:31.285Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Axis.json b/docs/src/examples/catalog/Axis.json
index 12c859cf1..435a5baaa 100644
--- a/docs/src/examples/catalog/Axis.json
+++ b/docs/src/examples/catalog/Axis.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "arrow-markers",
-      "path": "/example/Axis/arrow-markers",
+      "title": "arrow markers",
+      "path": "/docs/components/Axis/arrow-markers",
       "components": [
         {
           "component": "Chart",
@@ -24,7 +25,8 @@
     },
     {
       "name": "axis-label-placement-left-right",
-      "path": "/example/Axis/axis-label-placement-left-right",
+      "title": "axis label placement left right",
+      "path": "/docs/components/Axis/axis-label-placement-left-right",
       "components": [
         {
           "component": "Chart",
@@ -45,7 +47,8 @@
     },
     {
       "name": "axis-label-placement-top-bottom",
-      "path": "/example/Axis/axis-label-placement-top-bottom",
+      "title": "axis label placement top bottom",
+      "path": "/docs/components/Axis/axis-label-placement-top-bottom",
       "components": [
         {
           "component": "Chart",
@@ -64,9 +67,22 @@
         }
       ]
     },
+    {
+      "name": "barchart-xinterval-xinset",
+      "title": "barchart xinterval xinset",
+      "path": "/docs/components/Axis/barchart-xinterval-xinset",
+      "components": [
+        {
+          "component": "BarChart",
+          "lineNumber": 25,
+          "line": "<BarChart"
+        }
+      ]
+    },
     {
       "name": "explicit-ticks",
-      "path": "/example/Axis/explicit-ticks",
+      "title": "explicit ticks",
+      "path": "/docs/components/Axis/explicit-ticks",
       "components": [
         {
           "component": "Chart",
@@ -87,7 +103,8 @@
     },
     {
       "name": "extent-ticks-only",
-      "path": "/example/Axis/extent-ticks-only",
+      "title": "extent ticks only",
+      "path": "/docs/components/Axis/extent-ticks-only",
       "components": [
         {
           "component": "Chart",
@@ -113,7 +130,8 @@
     },
     {
       "name": "grid",
-      "path": "/example/Axis/grid",
+      "title": "grid",
+      "path": "/docs/components/Axis/grid",
       "components": [
         {
           "component": "Chart",
@@ -134,7 +152,8 @@
     },
     {
       "name": "grid-dashed",
-      "path": "/example/Axis/grid-dashed",
+      "title": "grid dashed",
+      "path": "/docs/components/Axis/grid-dashed",
       "components": [
         {
           "component": "Chart",
@@ -155,7 +174,8 @@
     },
     {
       "name": "hide-zero-filter",
-      "path": "/example/Axis/hide-zero-filter",
+      "title": "hide zero filter",
+      "path": "/docs/components/Axis/hide-zero-filter",
       "components": [
         {
           "component": "Chart",
@@ -176,7 +196,8 @@
     },
     {
       "name": "hide-zero-format",
-      "path": "/example/Axis/hide-zero-format",
+      "title": "hide zero format",
+      "path": "/docs/components/Axis/hide-zero-format",
       "components": [
         {
           "component": "Chart",
@@ -197,7 +218,8 @@
     },
     {
       "name": "inject-ticks",
-      "path": "/example/Axis/inject-ticks",
+      "title": "inject ticks",
+      "path": "/docs/components/Axis/inject-ticks",
       "components": [
         {
           "component": "Chart",
@@ -218,7 +240,8 @@
     },
     {
       "name": "integer-only-filter",
-      "path": "/example/Axis/integer-only-filter",
+      "title": "integer only filter",
+      "path": "/docs/components/Axis/integer-only-filter",
       "components": [
         {
           "component": "Chart",
@@ -239,7 +262,8 @@
     },
     {
       "name": "integer-only-format",
-      "path": "/example/Axis/integer-only-format",
+      "title": "integer only format",
+      "path": "/docs/components/Axis/integer-only-format",
       "components": [
         {
           "component": "Chart",
@@ -260,7 +284,8 @@
     },
     {
       "name": "labels-next-hash",
-      "path": "/example/Axis/labels-next-hash",
+      "title": "labels next hash",
+      "path": "/docs/components/Axis/labels-next-hash",
       "components": [
         {
           "component": "Chart",
@@ -279,9 +304,22 @@
         }
       ]
     },
+    {
+      "name": "linechart-tickspacing",
+      "title": "linechart tickspacing",
+      "path": "/docs/components/Axis/linechart-tickspacing",
+      "components": [
+        {
+          "component": "LineChart",
+          "lineNumber": 18,
+          "line": "<LineChart"
+        }
+      ]
+    },
     {
       "name": "log-scale",
-      "path": "/example/Axis/log-scale",
+      "title": "log scale",
+      "path": "/docs/components/Axis/log-scale",
       "components": [
         {
           "component": "Chart",
@@ -302,7 +340,8 @@
     },
     {
       "name": "multiline-tick-labels",
-      "path": "/example/Axis/multiline-tick-labels",
+      "title": "multiline tick labels",
+      "path": "/docs/components/Axis/multiline-tick-labels",
       "components": [
         {
           "component": "Chart",
@@ -323,7 +362,8 @@
     },
     {
       "name": "multiple-axis-grid-and-rules",
-      "path": "/example/Axis/multiple-axis-grid-and-rules",
+      "title": "multiple axis grid and rules",
+      "path": "/docs/components/Axis/multiple-axis-grid-and-rules",
       "components": [
         {
           "component": "Chart",
@@ -349,7 +389,8 @@
     },
     {
       "name": "multiple-axis-grid-and-rules-separate-grid",
-      "path": "/example/Axis/multiple-axis-grid-and-rules-separate-grid",
+      "title": "multiple axis grid and rules separate grid",
+      "path": "/docs/components/Axis/multiple-axis-grid-and-rules-separate-grid",
       "components": [
         {
           "component": "Chart",
@@ -375,7 +416,8 @@
     },
     {
       "name": "multiple-axis-grid-with-single-rule",
-      "path": "/example/Axis/multiple-axis-grid-with-single-rule",
+      "title": "multiple axis grid with single rule",
+      "path": "/docs/components/Axis/multiple-axis-grid-with-single-rule",
       "components": [
         {
           "component": "Chart",
@@ -396,7 +438,8 @@
     },
     {
       "name": "multiple-axis-same-placement-bottom",
-      "path": "/example/Axis/multiple-axis-same-placement-bottom",
+      "title": "multiple axis same placement bottom",
+      "path": "/docs/components/Axis/multiple-axis-same-placement-bottom",
       "components": [
         {
           "component": "Chart",
@@ -417,7 +460,8 @@
     },
     {
       "name": "multiple-axis-same-placement-right",
-      "path": "/example/Axis/multiple-axis-same-placement-right",
+      "title": "multiple axis same placement right",
+      "path": "/docs/components/Axis/multiple-axis-same-placement-right",
       "components": [
         {
           "component": "Chart",
@@ -438,7 +482,8 @@
     },
     {
       "name": "override-axis-ticks-scale",
-      "path": "/example/Axis/override-axis-ticks-scale",
+      "title": "override axis ticks scale",
+      "path": "/docs/components/Axis/override-axis-ticks-scale",
       "components": [
         {
           "component": "Chart",
@@ -459,7 +504,8 @@
     },
     {
       "name": "placement-bottom-left",
-      "path": "/example/Axis/placement-bottom-left",
+      "title": "placement bottom left",
+      "path": "/docs/components/Axis/placement-bottom-left",
       "components": [
         {
           "component": "Chart",
@@ -480,7 +526,8 @@
     },
     {
       "name": "placement-bottom-left-rule",
-      "path": "/example/Axis/placement-bottom-left-rule",
+      "title": "placement bottom left rule",
+      "path": "/docs/components/Axis/placement-bottom-left-rule",
       "components": [
         {
           "component": "Chart",
@@ -501,7 +548,8 @@
     },
     {
       "name": "placement-top-right",
-      "path": "/example/Axis/placement-top-right",
+      "title": "placement top right",
+      "path": "/docs/components/Axis/placement-top-right",
       "components": [
         {
           "component": "Chart",
@@ -522,7 +570,8 @@
     },
     {
       "name": "placement-top-right-rule",
-      "path": "/example/Axis/placement-top-right-rule",
+      "title": "placement top right rule",
+      "path": "/docs/components/Axis/placement-top-right-rule",
       "components": [
         {
           "component": "Chart",
@@ -543,7 +592,8 @@
     },
     {
       "name": "radial-grid",
-      "path": "/example/Axis/radial-grid",
+      "title": "radial grid",
+      "path": "/docs/components/Axis/radial-grid",
       "components": [
         {
           "component": "Chart",
@@ -564,7 +614,8 @@
     },
     {
       "name": "radial-rule",
-      "path": "/example/Axis/radial-rule",
+      "title": "radial rule",
+      "path": "/docs/components/Axis/radial-rule",
       "components": [
         {
           "component": "Chart",
@@ -585,7 +636,8 @@
     },
     {
       "name": "remove-tick-marks",
-      "path": "/example/Axis/remove-tick-marks",
+      "title": "remove tick marks",
+      "path": "/docs/components/Axis/remove-tick-marks",
       "components": [
         {
           "component": "Chart",
@@ -606,7 +658,8 @@
     },
     {
       "name": "rotate-labels",
-      "path": "/example/Axis/rotate-labels",
+      "title": "rotate labels",
+      "path": "/docs/components/Axis/rotate-labels",
       "components": [
         {
           "component": "Chart",
@@ -627,7 +680,8 @@
     },
     {
       "name": "tick-count",
-      "path": "/example/Axis/tick-count",
+      "title": "tick count",
+      "path": "/docs/components/Axis/tick-count",
       "components": [
         {
           "component": "Chart",
@@ -648,7 +702,8 @@
     },
     {
       "name": "tick-label-styling",
-      "path": "/example/Axis/tick-label-styling",
+      "title": "tick label styling",
+      "path": "/docs/components/Axis/tick-label-styling",
       "components": [
         {
           "component": "Chart",
@@ -669,7 +724,8 @@
     },
     {
       "name": "tick-spacing",
-      "path": "/example/Axis/tick-spacing",
+      "title": "tick spacing",
+      "path": "/docs/components/Axis/tick-spacing",
       "components": [
         {
           "component": "Chart",
@@ -690,7 +746,8 @@
     },
     {
       "name": "time-scale-auto",
-      "path": "/example/Axis/time-scale-auto",
+      "title": "time scale auto",
+      "path": "/docs/components/Axis/time-scale-auto",
       "components": [
         {
           "component": "Chart",
@@ -711,7 +768,8 @@
     },
     {
       "name": "time-scale-auto-format-filtering",
-      "path": "/example/Axis/time-scale-auto-format-filtering",
+      "title": "time scale auto format filtering",
+      "path": "/docs/components/Axis/time-scale-auto-format-filtering",
       "components": [
         {
           "component": "Chart",
@@ -732,7 +790,8 @@
     },
     {
       "name": "time-scale-auto-multiline",
-      "path": "/example/Axis/time-scale-auto-multiline",
+      "title": "time scale auto multiline",
+      "path": "/docs/components/Axis/time-scale-auto-multiline",
       "components": [
         {
           "component": "Chart",
@@ -741,19 +800,20 @@
         },
         {
           "component": "Layer",
-          "lineNumber": 119,
+          "lineNumber": 120,
           "line": "<Layer>"
         },
         {
           "component": "Axis",
-          "lineNumber": 120,
+          "lineNumber": 121,
           "line": "<Axis placement=\"top\" rule grid tickMultiline {tickSpacing} />"
         }
       ]
     },
     {
       "name": "time-scale-brush",
-      "path": "/example/Axis/time-scale-brush",
+      "title": "time scale brush",
+      "path": "/docs/components/Axis/time-scale-brush",
       "components": [
         {
           "component": "Chart",
@@ -774,7 +834,8 @@
     },
     {
       "name": "time-scale-brush-multiline",
-      "path": "/example/Axis/time-scale-brush-multiline",
+      "title": "time scale brush multiline",
+      "path": "/docs/components/Axis/time-scale-brush-multiline",
       "components": [
         {
           "component": "Chart",
@@ -795,7 +856,8 @@
     },
     {
       "name": "time-scale-explicit",
-      "path": "/example/Axis/time-scale-explicit",
+      "title": "time scale explicit",
+      "path": "/docs/components/Axis/time-scale-explicit",
       "components": [
         {
           "component": "Chart",
@@ -816,7 +878,8 @@
     },
     {
       "name": "time-scale-explicit-multiline",
-      "path": "/example/Axis/time-scale-explicit-multiline",
+      "title": "time scale explicit multiline",
+      "path": "/docs/components/Axis/time-scale-explicit-multiline",
       "components": [
         {
           "component": "Chart",
@@ -840,3195 +903,3195 @@
     {
       "example": "basic",
       "component": "Area",
-      "path": "/example/Area/basic",
+      "path": "/docs/components/Area/basic",
       "lineNumber": 13,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "basic",
       "component": "Area",
-      "path": "/example/Area/basic",
+      "path": "/docs/components/Area/basic",
       "lineNumber": 14,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "clip-tween-on-mount",
       "component": "Area",
-      "path": "/example/Area/clip-tween-on-mount",
+      "path": "/docs/components/Area/clip-tween-on-mount",
       "lineNumber": 18,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "clip-tween-on-mount",
       "component": "Area",
-      "path": "/example/Area/clip-tween-on-mount",
+      "path": "/docs/components/Area/clip-tween-on-mount",
       "lineNumber": 19,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "clipped-area-on-tooltip",
       "component": "Area",
-      "path": "/example/Area/clipped-area-on-tooltip",
+      "path": "/docs/components/Area/clipped-area-on-tooltip",
       "lineNumber": 47,
       "line": "<Axis placement=\"bottom\" />"
     },
     {
       "example": "explicit-axis-ticks-min-max",
       "component": "Area",
-      "path": "/example/Area/explicit-axis-ticks-min-max",
+      "path": "/docs/components/Area/explicit-axis-ticks-min-max",
       "lineNumber": 12,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "explicit-axis-ticks-min-max",
       "component": "Area",
-      "path": "/example/Area/explicit-axis-ticks-min-max",
+      "path": "/docs/components/Area/explicit-axis-ticks-min-max",
       "lineNumber": 13,
       "line": "<Axis placement=\"bottom\" format=\"day\" rule ticks={(scale) => scale.domain()}>"
     },
     {
       "example": "gradient",
       "component": "Area",
-      "path": "/example/Area/gradient",
+      "path": "/docs/components/Area/gradient",
       "lineNumber": 12,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "gradient",
       "component": "Area",
-      "path": "/example/Area/gradient",
+      "path": "/docs/components/Area/gradient",
       "lineNumber": 13,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "gradient-separate-stroke",
       "component": "Area",
-      "path": "/example/Area/gradient-separate-stroke",
+      "path": "/docs/components/Area/gradient-separate-stroke",
       "lineNumber": 12,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "gradient-separate-stroke",
       "component": "Area",
-      "path": "/example/Area/gradient-separate-stroke",
+      "path": "/docs/components/Area/gradient-separate-stroke",
       "lineNumber": 13,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "highlight-color-based-on-value-using-color-scale",
       "component": "Area",
-      "path": "/example/Area/highlight-color-based-on-value-using-color-scale",
+      "path": "/docs/components/Area/highlight-color-based-on-value-using-color-scale",
       "lineNumber": 29,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "highlight-color-based-on-value-using-color-scale",
       "component": "Area",
-      "path": "/example/Area/highlight-color-based-on-value-using-color-scale",
+      "path": "/docs/components/Area/highlight-color-based-on-value-using-color-scale",
       "lineNumber": 30,
       "line": "<Axis placement=\"bottom\" />"
     },
     {
       "example": "highlight-color-based-on-value-using-tooltip-slot-prop",
       "component": "Area",
-      "path": "/example/Area/highlight-color-based-on-value-using-tooltip-slot-prop",
+      "path": "/docs/components/Area/highlight-color-based-on-value-using-tooltip-slot-prop",
       "lineNumber": 18,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "highlight-color-based-on-value-using-tooltip-slot-prop",
       "component": "Area",
-      "path": "/example/Area/highlight-color-based-on-value-using-tooltip-slot-prop",
+      "path": "/docs/components/Area/highlight-color-based-on-value-using-tooltip-slot-prop",
       "lineNumber": 19,
       "line": "<Axis placement=\"bottom\" />"
     },
     {
       "example": "multiple-series",
       "component": "Area",
-      "path": "/example/Area/multiple-series",
+      "path": "/docs/components/Area/multiple-series",
       "lineNumber": 54,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "multiple-series",
       "component": "Area",
-      "path": "/example/Area/multiple-series",
+      "path": "/docs/components/Area/multiple-series",
       "lineNumber": 55,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "multiple-series-highlight-on-hover",
       "component": "Area",
-      "path": "/example/Area/multiple-series-highlight-on-hover",
+      "path": "/docs/components/Area/multiple-series-highlight-on-hover",
       "lineNumber": 55,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "multiple-series-highlight-on-hover",
       "component": "Area",
-      "path": "/example/Area/multiple-series-highlight-on-hover",
+      "path": "/docs/components/Area/multiple-series-highlight-on-hover",
       "lineNumber": 56,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "multiple-series-using-overrides",
       "component": "Area",
-      "path": "/example/Area/multiple-series-using-overrides",
+      "path": "/docs/components/Area/multiple-series-using-overrides",
       "lineNumber": 34,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "multiple-series-using-overrides",
       "component": "Area",
-      "path": "/example/Area/multiple-series-using-overrides",
+      "path": "/docs/components/Area/multiple-series-using-overrides",
       "lineNumber": 35,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "multiple-series-with-labels",
       "component": "Area",
-      "path": "/example/Area/multiple-series-with-labels",
+      "path": "/docs/components/Area/multiple-series-with-labels",
       "lineNumber": 42,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "multiple-series-with-labels",
       "component": "Area",
-      "path": "/example/Area/multiple-series-with-labels",
+      "path": "/docs/components/Area/multiple-series-with-labels",
       "lineNumber": 43,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "playground",
       "component": "Area",
-      "path": "/example/Area/playground",
+      "path": "/docs/components/Area/playground",
       "lineNumber": 35,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "playground",
       "component": "Area",
-      "path": "/example/Area/playground",
+      "path": "/docs/components/Area/playground",
       "lineNumber": 36,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "stack",
       "component": "Area",
-      "path": "/example/Area/stack",
+      "path": "/docs/components/Area/stack",
       "lineNumber": 58,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "stack",
       "component": "Area",
-      "path": "/example/Area/stack",
+      "path": "/docs/components/Area/stack",
       "lineNumber": 59,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "stack-with-gradient",
       "component": "Area",
-      "path": "/example/Area/stack-with-gradient",
+      "path": "/docs/components/Area/stack-with-gradient",
       "lineNumber": 41,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "stack-with-gradient",
       "component": "Area",
-      "path": "/example/Area/stack-with-gradient",
+      "path": "/docs/components/Area/stack-with-gradient",
       "lineNumber": 42,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "threshold-with-lineargradient",
       "component": "Area",
-      "path": "/example/Area/threshold-with-lineargradient",
+      "path": "/docs/components/Area/threshold-with-lineargradient",
       "lineNumber": 21,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "threshold-with-lineargradient",
       "component": "Area",
-      "path": "/example/Area/threshold-with-lineargradient",
+      "path": "/docs/components/Area/threshold-with-lineargradient",
       "lineNumber": 22,
       "line": "<Axis placement=\"bottom\" />"
     },
     {
       "example": "threshold-with-lineargradient-over-under",
       "component": "Area",
-      "path": "/example/Area/threshold-with-lineargradient-over-under",
+      "path": "/docs/components/Area/threshold-with-lineargradient-over-under",
       "lineNumber": 21,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "threshold-with-lineargradient-over-under",
       "component": "Area",
-      "path": "/example/Area/threshold-with-lineargradient-over-under",
+      "path": "/docs/components/Area/threshold-with-lineargradient-over-under",
       "lineNumber": 22,
       "line": "<Axis placement=\"bottom\" />"
     },
     {
       "example": "threshold-with-rectclippath",
       "component": "Area",
-      "path": "/example/Area/threshold-with-rectclippath",
+      "path": "/docs/components/Area/threshold-with-rectclippath",
       "lineNumber": 18,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "threshold-with-rectclippath",
       "component": "Area",
-      "path": "/example/Area/threshold-with-rectclippath",
+      "path": "/docs/components/Area/threshold-with-rectclippath",
       "lineNumber": 19,
       "line": "<Axis placement=\"bottom\" />"
     },
     {
       "example": "threshold-with-rectclippath-over-under",
       "component": "Area",
-      "path": "/example/Area/threshold-with-rectclippath-over-under",
+      "path": "/docs/components/Area/threshold-with-rectclippath-over-under",
       "lineNumber": 18,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "threshold-with-rectclippath-over-under",
       "component": "Area",
-      "path": "/example/Area/threshold-with-rectclippath-over-under",
+      "path": "/docs/components/Area/threshold-with-rectclippath-over-under",
       "lineNumber": 19,
       "line": "<Axis placement=\"bottom\" />"
     },
     {
       "example": "with-labels",
       "component": "Area",
-      "path": "/example/Area/with-labels",
+      "path": "/docs/components/Area/with-labels",
       "lineNumber": 12,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "with-labels",
       "component": "Area",
-      "path": "/example/Area/with-labels",
+      "path": "/docs/components/Area/with-labels",
       "lineNumber": 13,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "with-tooltip-and-highlight",
       "component": "Area",
-      "path": "/example/Area/with-tooltip-and-highlight",
+      "path": "/docs/components/Area/with-tooltip-and-highlight",
       "lineNumber": 21,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "with-tooltip-and-highlight",
       "component": "Area",
-      "path": "/example/Area/with-tooltip-and-highlight",
+      "path": "/docs/components/Area/with-tooltip-and-highlight",
       "lineNumber": 22,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "custom",
       "component": "AreaChart",
-      "path": "/example/AreaChart/custom",
+      "path": "/docs/components/AreaChart/custom",
       "lineNumber": 21,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "custom",
       "component": "AreaChart",
-      "path": "/example/AreaChart/custom",
+      "path": "/docs/components/AreaChart/custom",
       "lineNumber": 22,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "arrow-markers",
       "component": "Axis",
-      "path": "/example/Axis/arrow-markers",
+      "path": "/docs/components/Axis/arrow-markers",
       "lineNumber": 17,
       "line": "<Axis"
     },
     {
       "example": "arrow-markers",
       "component": "Axis",
-      "path": "/example/Axis/arrow-markers",
+      "path": "/docs/components/Axis/arrow-markers",
       "lineNumber": 22,
       "line": "<Axis"
     },
     {
       "example": "axis-label-placement-left-right",
       "component": "Axis",
-      "path": "/example/Axis/axis-label-placement-left-right",
+      "path": "/docs/components/Axis/axis-label-placement-left-right",
       "lineNumber": 7,
       "line": "<Axis label=\"left start\" placement=\"left\" labelPlacement=\"start\" rule />"
     },
     {
       "example": "axis-label-placement-left-right",
       "component": "Axis",
-      "path": "/example/Axis/axis-label-placement-left-right",
+      "path": "/docs/components/Axis/axis-label-placement-left-right",
       "lineNumber": 8,
       "line": "<Axis label=\"left middle\" placement=\"left\" labelPlacement=\"middle\" rule />"
     },
     {
       "example": "axis-label-placement-left-right",
       "component": "Axis",
-      "path": "/example/Axis/axis-label-placement-left-right",
+      "path": "/docs/components/Axis/axis-label-placement-left-right",
       "lineNumber": 9,
       "line": "<Axis label=\"left end\" placement=\"left\" labelPlacement=\"end\" rule />"
     },
     {
       "example": "axis-label-placement-left-right",
       "component": "Axis",
-      "path": "/example/Axis/axis-label-placement-left-right",
+      "path": "/docs/components/Axis/axis-label-placement-left-right",
       "lineNumber": 11,
       "line": "<Axis label=\"right start\" placement=\"right\" labelPlacement=\"start\" rule />"
     },
     {
       "example": "axis-label-placement-left-right",
       "component": "Axis",
-      "path": "/example/Axis/axis-label-placement-left-right",
+      "path": "/docs/components/Axis/axis-label-placement-left-right",
       "lineNumber": 12,
       "line": "<Axis label=\"right middle\" placement=\"right\" labelPlacement=\"middle\" rule />"
     },
     {
       "example": "axis-label-placement-left-right",
       "component": "Axis",
-      "path": "/example/Axis/axis-label-placement-left-right",
+      "path": "/docs/components/Axis/axis-label-placement-left-right",
       "lineNumber": 13,
       "line": "<Axis label=\"right end\" placement=\"right\" labelPlacement=\"end\" rule />"
     },
     {
       "example": "axis-label-placement-top-bottom",
       "component": "Axis",
-      "path": "/example/Axis/axis-label-placement-top-bottom",
+      "path": "/docs/components/Axis/axis-label-placement-top-bottom",
       "lineNumber": 15,
       "line": "<Axis label=\"top start\" placement=\"top\" labelPlacement=\"start\" rule />"
     },
     {
       "example": "axis-label-placement-top-bottom",
       "component": "Axis",
-      "path": "/example/Axis/axis-label-placement-top-bottom",
+      "path": "/docs/components/Axis/axis-label-placement-top-bottom",
       "lineNumber": 16,
       "line": "<Axis label=\"top middle\" placement=\"top\" labelPlacement=\"middle\" rule />"
     },
     {
       "example": "axis-label-placement-top-bottom",
       "component": "Axis",
-      "path": "/example/Axis/axis-label-placement-top-bottom",
+      "path": "/docs/components/Axis/axis-label-placement-top-bottom",
       "lineNumber": 17,
       "line": "<Axis label=\"top end\" placement=\"top\" labelPlacement=\"end\" rule />"
     },
     {
       "example": "axis-label-placement-top-bottom",
       "component": "Axis",
-      "path": "/example/Axis/axis-label-placement-top-bottom",
+      "path": "/docs/components/Axis/axis-label-placement-top-bottom",
       "lineNumber": 19,
       "line": "<Axis label=\"bottom start\" placement=\"bottom\" labelPlacement=\"start\" rule />"
     },
     {
       "example": "axis-label-placement-top-bottom",
       "component": "Axis",
-      "path": "/example/Axis/axis-label-placement-top-bottom",
+      "path": "/docs/components/Axis/axis-label-placement-top-bottom",
       "lineNumber": 20,
       "line": "<Axis label=\"bottom middle\" placement=\"bottom\" labelPlacement=\"middle\" rule />"
     },
     {
       "example": "axis-label-placement-top-bottom",
       "component": "Axis",
-      "path": "/example/Axis/axis-label-placement-top-bottom",
+      "path": "/docs/components/Axis/axis-label-placement-top-bottom",
       "lineNumber": 21,
       "line": "<Axis label=\"bottom end\" placement=\"bottom\" labelPlacement=\"end\" rule />"
     },
     {
       "example": "explicit-ticks",
       "component": "Axis",
-      "path": "/example/Axis/explicit-ticks",
+      "path": "/docs/components/Axis/explicit-ticks",
       "lineNumber": 7,
       "line": "<Axis placement=\"bottom\" rule ticks={[0, 50, 100]} />"
     },
     {
       "example": "extent-ticks-only",
       "component": "Axis",
-      "path": "/example/Axis/extent-ticks-only",
+      "path": "/docs/components/Axis/extent-ticks-only",
       "lineNumber": 16,
       "line": "<Axis"
     },
     {
       "example": "extent-ticks-only",
       "component": "Axis",
-      "path": "/example/Axis/extent-ticks-only",
+      "path": "/docs/components/Axis/extent-ticks-only",
       "lineNumber": 26,
       "line": "<Axis placement=\"left\" rule ticks={(scale) => scale.domain()} />"
     },
     {
       "example": "grid",
       "component": "Axis",
-      "path": "/example/Axis/grid",
+      "path": "/docs/components/Axis/grid",
       "lineNumber": 17,
       "line": "<Axis placement=\"bottom\" grid />"
     },
     {
       "example": "grid",
       "component": "Axis",
-      "path": "/example/Axis/grid",
+      "path": "/docs/components/Axis/grid",
       "lineNumber": 18,
       "line": "<Axis placement=\"left\" grid />"
     },
     {
       "example": "grid-dashed",
       "component": "Axis",
-      "path": "/example/Axis/grid-dashed",
+      "path": "/docs/components/Axis/grid-dashed",
       "lineNumber": 17,
       "line": "<Axis placement=\"bottom\" />"
     },
     {
       "example": "grid-dashed",
       "component": "Axis",
-      "path": "/example/Axis/grid-dashed",
+      "path": "/docs/components/Axis/grid-dashed",
       "lineNumber": 18,
       "line": "<Axis placement=\"left\" grid={{ style: 'stroke-dasharray: 6 4' }} />"
     },
     {
       "example": "hide-zero-filter",
       "component": "Axis",
-      "path": "/example/Axis/hide-zero-filter",
+      "path": "/docs/components/Axis/hide-zero-filter",
       "lineNumber": 7,
       "line": "<Axis placement=\"bottom\" rule ticks={(scale) => scale.ticks?.().filter((d) => d !== 0)} />"
     },
     {
       "example": "hide-zero-format",
       "component": "Axis",
-      "path": "/example/Axis/hide-zero-format",
+      "path": "/docs/components/Axis/hide-zero-format",
       "lineNumber": 7,
       "line": "<Axis placement=\"bottom\" rule format={(v) => v || ''} />"
     },
     {
       "example": "inject-ticks",
       "component": "Axis",
-      "path": "/example/Axis/inject-ticks",
+      "path": "/docs/components/Axis/inject-ticks",
       "lineNumber": 7,
       "line": "<Axis placement=\"bottom\" rule ticks={(scale) => [45, ...(scale.ticks?.() ?? [])]} />"
     },
     {
       "example": "integer-only-filter",
       "component": "Axis",
-      "path": "/example/Axis/integer-only-filter",
+      "path": "/docs/components/Axis/integer-only-filter",
       "lineNumber": 7,
       "line": "<Axis placement=\"bottom\" rule ticks={(scale) => scale.ticks?.().filter(Number.isInteger)} />"
     },
     {
       "example": "integer-only-format",
       "component": "Axis",
-      "path": "/example/Axis/integer-only-format",
+      "path": "/docs/components/Axis/integer-only-format",
       "lineNumber": 7,
       "line": "<Axis placement=\"bottom\" rule format=\"integer\" />"
     },
     {
       "example": "labels-next-hash",
       "component": "Axis",
-      "path": "/example/Axis/labels-next-hash",
+      "path": "/docs/components/Axis/labels-next-hash",
       "lineNumber": 12,
       "line": "<Axis"
     },
     {
       "example": "log-scale",
       "component": "Axis",
-      "path": "/example/Axis/log-scale",
+      "path": "/docs/components/Axis/log-scale",
       "lineNumber": 8,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "multiline-tick-labels",
       "component": "Axis",
-      "path": "/example/Axis/multiline-tick-labels",
+      "path": "/docs/components/Axis/multiline-tick-labels",
       "lineNumber": 15,
       "line": "<Axis"
     },
     {
       "example": "multiple-axis-grid-and-rules",
       "component": "Axis",
-      "path": "/example/Axis/multiple-axis-grid-and-rules",
+      "path": "/docs/components/Axis/multiple-axis-grid-and-rules",
       "lineNumber": 17,
       "line": "<Axis placement=\"left\" grid />"
     },
     {
       "example": "multiple-axis-grid-and-rules",
       "component": "Axis",
-      "path": "/example/Axis/multiple-axis-grid-and-rules",
+      "path": "/docs/components/Axis/multiple-axis-grid-and-rules",
       "lineNumber": 18,
       "line": "<Axis placement=\"bottom\" grid rule />"
     },
     {
       "example": "multiple-axis-grid-and-rules-separate-grid",
       "component": "Axis",
-      "path": "/example/Axis/multiple-axis-grid-and-rules-separate-grid",
+      "path": "/docs/components/Axis/multiple-axis-grid-and-rules-separate-grid",
       "lineNumber": 18,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "multiple-axis-grid-and-rules-separate-grid",
       "component": "Axis",
-      "path": "/example/Axis/multiple-axis-grid-and-rules-separate-grid",
+      "path": "/docs/components/Axis/multiple-axis-grid-and-rules-separate-grid",
       "lineNumber": 19,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "multiple-axis-grid-with-single-rule",
       "component": "Axis",
-      "path": "/example/Axis/multiple-axis-grid-with-single-rule",
+      "path": "/docs/components/Axis/multiple-axis-grid-with-single-rule",
       "lineNumber": 17,
       "line": "<Axis placement=\"left\" grid />"
     },
     {
       "example": "multiple-axis-grid-with-single-rule",
       "component": "Axis",
-      "path": "/example/Axis/multiple-axis-grid-with-single-rule",
+      "path": "/docs/components/Axis/multiple-axis-grid-with-single-rule",
       "lineNumber": 18,
       "line": "<Axis placement=\"bottom\" grid rule />"
     },
     {
       "example": "multiple-axis-same-placement-bottom",
       "component": "Axis",
-      "path": "/example/Axis/multiple-axis-same-placement-bottom",
+      "path": "/docs/components/Axis/multiple-axis-same-placement-bottom",
       "lineNumber": 15,
       "line": "<Axis"
     },
     {
       "example": "multiple-axis-same-placement-bottom",
       "component": "Axis",
-      "path": "/example/Axis/multiple-axis-same-placement-bottom",
+      "path": "/docs/components/Axis/multiple-axis-same-placement-bottom",
       "lineNumber": 21,
       "line": "<Axis"
     },
     {
       "example": "multiple-axis-same-placement-right",
       "component": "Axis",
-      "path": "/example/Axis/multiple-axis-same-placement-right",
+      "path": "/docs/components/Axis/multiple-axis-same-placement-right",
       "lineNumber": 10,
       "line": "<Axis"
     },
     {
       "example": "multiple-axis-same-placement-right",
       "component": "Axis",
-      "path": "/example/Axis/multiple-axis-same-placement-right",
+      "path": "/docs/components/Axis/multiple-axis-same-placement-right",
       "lineNumber": 17,
       "line": "<Axis"
     },
     {
       "example": "override-axis-ticks-scale",
       "component": "Axis",
-      "path": "/example/Axis/override-axis-ticks-scale",
+      "path": "/docs/components/Axis/override-axis-ticks-scale",
       "lineNumber": 12,
       "line": "<Axis"
     },
     {
       "example": "placement-bottom-left",
       "component": "Axis",
-      "path": "/example/Axis/placement-bottom-left",
+      "path": "/docs/components/Axis/placement-bottom-left",
       "lineNumber": 17,
       "line": "<Axis placement=\"bottom\" />"
     },
     {
       "example": "placement-bottom-left",
       "component": "Axis",
-      "path": "/example/Axis/placement-bottom-left",
+      "path": "/docs/components/Axis/placement-bottom-left",
       "lineNumber": 18,
       "line": "<Axis placement=\"left\" />"
     },
     {
       "example": "placement-bottom-left-rule",
       "component": "Axis",
-      "path": "/example/Axis/placement-bottom-left-rule",
+      "path": "/docs/components/Axis/placement-bottom-left-rule",
       "lineNumber": 17,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "placement-bottom-left-rule",
       "component": "Axis",
-      "path": "/example/Axis/placement-bottom-left-rule",
+      "path": "/docs/components/Axis/placement-bottom-left-rule",
       "lineNumber": 18,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "placement-top-right",
       "component": "Axis",
-      "path": "/example/Axis/placement-top-right",
+      "path": "/docs/components/Axis/placement-top-right",
       "lineNumber": 17,
       "line": "<Axis placement=\"top\" />"
     },
     {
       "example": "placement-top-right",
       "component": "Axis",
-      "path": "/example/Axis/placement-top-right",
+      "path": "/docs/components/Axis/placement-top-right",
       "lineNumber": 18,
       "line": "<Axis placement=\"right\" />"
     },
     {
       "example": "placement-top-right-rule",
       "component": "Axis",
-      "path": "/example/Axis/placement-top-right-rule",
+      "path": "/docs/components/Axis/placement-top-right-rule",
       "lineNumber": 17,
       "line": "<Axis placement=\"top\" rule />"
     },
     {
       "example": "placement-top-right-rule",
       "component": "Axis",
-      "path": "/example/Axis/placement-top-right-rule",
+      "path": "/docs/components/Axis/placement-top-right-rule",
       "lineNumber": 18,
       "line": "<Axis placement=\"right\" rule />"
     },
     {
       "example": "radial-grid",
       "component": "Axis",
-      "path": "/example/Axis/radial-grid",
+      "path": "/docs/components/Axis/radial-grid",
       "lineNumber": 18,
       "line": "<Axis placement=\"radius\" grid />"
     },
     {
       "example": "radial-grid",
       "component": "Axis",
-      "path": "/example/Axis/radial-grid",
+      "path": "/docs/components/Axis/radial-grid",
       "lineNumber": 19,
       "line": "<Axis placement=\"angle\" grid />"
     },
     {
       "example": "radial-rule",
       "component": "Axis",
-      "path": "/example/Axis/radial-rule",
+      "path": "/docs/components/Axis/radial-rule",
       "lineNumber": 18,
       "line": "<Axis placement=\"radius\" rule />"
     },
     {
       "example": "radial-rule",
       "component": "Axis",
-      "path": "/example/Axis/radial-rule",
+      "path": "/docs/components/Axis/radial-rule",
       "lineNumber": 19,
       "line": "<Axis placement=\"angle\" rule />"
     },
     {
       "example": "remove-tick-marks",
       "component": "Axis",
-      "path": "/example/Axis/remove-tick-marks",
+      "path": "/docs/components/Axis/remove-tick-marks",
       "lineNumber": 15,
       "line": "<Axis placement=\"bottom\" rule tickMarks={false} />"
     },
     {
       "example": "rotate-labels",
       "component": "Axis",
-      "path": "/example/Axis/rotate-labels",
+      "path": "/docs/components/Axis/rotate-labels",
       "lineNumber": 15,
       "line": "<Axis"
     },
     {
       "example": "tick-count",
       "component": "Axis",
-      "path": "/example/Axis/tick-count",
+      "path": "/docs/components/Axis/tick-count",
       "lineNumber": 7,
       "line": "<Axis placement=\"bottom\" rule ticks={20} />"
     },
     {
       "example": "tick-label-styling",
       "component": "Axis",
-      "path": "/example/Axis/tick-label-styling",
+      "path": "/docs/components/Axis/tick-label-styling",
       "lineNumber": 11,
       "line": "<Axis"
     },
     {
       "example": "tick-spacing",
       "component": "Axis",
-      "path": "/example/Axis/tick-spacing",
+      "path": "/docs/components/Axis/tick-spacing",
       "lineNumber": 7,
       "line": "<Axis placement=\"bottom\" rule tickSpacing={200} />"
     },
     {
       "example": "time-scale-auto",
       "component": "Axis",
-      "path": "/example/Axis/time-scale-auto",
+      "path": "/docs/components/Axis/time-scale-auto",
       "lineNumber": 120,
       "line": "<Axis placement=\"bottom\" rule grid {tickSpacing} />"
     },
     {
       "example": "time-scale-auto-format-filtering",
       "component": "Axis",
-      "path": "/example/Axis/time-scale-auto-format-filtering",
+      "path": "/docs/components/Axis/time-scale-auto-format-filtering",
       "lineNumber": 120,
       "line": "<Axis placement=\"bottom\" rule grid {tickSpacing} format={example.format} />"
     },
     {
       "example": "time-scale-auto-multiline",
       "component": "Axis",
-      "path": "/example/Axis/time-scale-auto-multiline",
-      "lineNumber": 120,
+      "path": "/docs/components/Axis/time-scale-auto-multiline",
+      "lineNumber": 121,
       "line": "<Axis placement=\"top\" rule grid tickMultiline {tickSpacing} />"
     },
     {
       "example": "time-scale-auto-multiline",
       "component": "Axis",
-      "path": "/example/Axis/time-scale-auto-multiline",
-      "lineNumber": 121,
+      "path": "/docs/components/Axis/time-scale-auto-multiline",
+      "lineNumber": 122,
       "line": "<Axis placement=\"bottom\" rule grid tickMultiline {tickSpacing} />"
     },
     {
       "example": "time-scale-brush",
       "component": "Axis",
-      "path": "/example/Axis/time-scale-brush",
+      "path": "/docs/components/Axis/time-scale-brush",
       "lineNumber": 30,
       "line": "<Axis placement=\"bottom\" rule grid {tickSpacing} />"
     },
     {
       "example": "time-scale-brush",
       "component": "Axis",
-      "path": "/example/Axis/time-scale-brush",
+      "path": "/docs/components/Axis/time-scale-brush",
       "lineNumber": 31,
       "line": "<Axis placement=\"left\" />"
     },
     {
       "example": "time-scale-brush",
       "component": "Axis",
-      "path": "/example/Axis/time-scale-brush",
+      "path": "/docs/components/Axis/time-scale-brush",
       "lineNumber": 48,
       "line": "<Axis placement=\"bottom\" rule grid ticks={{ interval: timeYear.every(1) }} />"
     },
     {
       "example": "time-scale-brush-multiline",
       "component": "Axis",
-      "path": "/example/Axis/time-scale-brush-multiline",
+      "path": "/docs/components/Axis/time-scale-brush-multiline",
       "lineNumber": 30,
       "line": "<Axis placement=\"bottom\" rule grid {tickSpacing} tickMultiline />"
     },
     {
       "example": "time-scale-brush-multiline",
       "component": "Axis",
-      "path": "/example/Axis/time-scale-brush-multiline",
+      "path": "/docs/components/Axis/time-scale-brush-multiline",
       "lineNumber": 31,
       "line": "<Axis placement=\"left\" />"
     },
     {
       "example": "time-scale-brush-multiline",
       "component": "Axis",
-      "path": "/example/Axis/time-scale-brush-multiline",
+      "path": "/docs/components/Axis/time-scale-brush-multiline",
       "lineNumber": 48,
       "line": "<Axis placement=\"bottom\" rule grid ticks={{ interval: timeYear.every(1) }} />"
     },
     {
       "example": "time-scale-explicit",
       "component": "Axis",
-      "path": "/example/Axis/time-scale-explicit",
+      "path": "/docs/components/Axis/time-scale-explicit",
       "lineNumber": 115,
       "line": "<Axis placement=\"bottom\" rule grid ticks={{ interval: example.interval }} />"
     },
     {
       "example": "time-scale-explicit-multiline",
       "component": "Axis",
-      "path": "/example/Axis/time-scale-explicit-multiline",
+      "path": "/docs/components/Axis/time-scale-explicit-multiline",
       "lineNumber": 115,
       "line": "<Axis"
     },
     {
       "example": "custom-chart",
       "component": "BarChart",
-      "path": "/example/BarChart/custom-chart",
+      "path": "/docs/components/BarChart/custom-chart",
       "lineNumber": 19,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "custom-chart",
       "component": "BarChart",
-      "path": "/example/BarChart/custom-chart",
+      "path": "/docs/components/BarChart/custom-chart",
       "lineNumber": 20,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "single-stack-with-indicator",
       "component": "BarChart",
-      "path": "/example/BarChart/single-stack-with-indicator",
+      "path": "/docs/components/BarChart/single-stack-with-indicator",
       "lineNumber": 65,
       "line": "<Axis placement=\"bottom\" tickLength={0} ticks={[15, 16, 18.5, 25, 30, 35, 40]}>"
     },
     {
       "example": "horizontal-average-annotation-rule",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-average-annotation-rule",
+      "path": "/docs/components/Bars/horizontal-average-annotation-rule",
       "lineNumber": 31,
       "line": "<Axis placement=\"bottom\" grid rule />"
     },
     {
       "example": "horizontal-average-annotation-rule",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-average-annotation-rule",
+      "path": "/docs/components/Bars/horizontal-average-annotation-rule",
       "lineNumber": 32,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "horizontal-basic",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-basic",
+      "path": "/docs/components/Bars/horizontal-basic",
       "lineNumber": 28,
       "line": "<Axis placement=\"bottom\" grid rule />"
     },
     {
       "example": "horizontal-basic",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-basic",
+      "path": "/docs/components/Bars/horizontal-basic",
       "lineNumber": 29,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "horizontal-calculated-value-domain-negative",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-calculated-value-domain-negative",
+      "path": "/docs/components/Bars/horizontal-calculated-value-domain-negative",
       "lineNumber": 21,
       "line": "<Axis placement=\"bottom\" grid rule />"
     },
     {
       "example": "horizontal-calculated-value-domain-negative",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-calculated-value-domain-negative",
+      "path": "/docs/components/Bars/horizontal-calculated-value-domain-negative",
       "lineNumber": 22,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "horizontal-calculated-value-domain-positive",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-calculated-value-domain-positive",
+      "path": "/docs/components/Bars/horizontal-calculated-value-domain-positive",
       "lineNumber": 21,
       "line": "<Axis placement=\"bottom\" grid rule />"
     },
     {
       "example": "horizontal-calculated-value-domain-positive",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-calculated-value-domain-positive",
+      "path": "/docs/components/Bars/horizontal-calculated-value-domain-positive",
       "lineNumber": 22,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "horizontal-candlestick-bars",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-candlestick-bars",
+      "path": "/docs/components/Bars/horizontal-candlestick-bars",
       "lineNumber": 26,
       "line": "<Axis placement=\"left\" grid rule tickSpacing={20} />"
     },
     {
       "example": "horizontal-candlestick-bars",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-candlestick-bars",
+      "path": "/docs/components/Bars/horizontal-candlestick-bars",
       "lineNumber": 27,
       "line": "<Axis placement=\"bottom\" rule tickMultiline />"
     },
     {
       "example": "horizontal-click-handler",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-click-handler",
+      "path": "/docs/components/Bars/horizontal-click-handler",
       "lineNumber": 34,
       "line": "<Axis placement=\"bottom\" grid rule />"
     },
     {
       "example": "horizontal-click-handler",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-click-handler",
+      "path": "/docs/components/Bars/horizontal-click-handler",
       "lineNumber": 35,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "horizontal-customize-individual-styles",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-customize-individual-styles",
+      "path": "/docs/components/Bars/horizontal-customize-individual-styles",
       "lineNumber": 28,
       "line": "<Axis placement=\"bottom\" grid rule />"
     },
     {
       "example": "horizontal-customize-individual-styles",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-customize-individual-styles",
+      "path": "/docs/components/Bars/horizontal-customize-individual-styles",
       "lineNumber": 29,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "horizontal-gradient",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-gradient",
+      "path": "/docs/components/Bars/horizontal-gradient",
       "lineNumber": 28,
       "line": "<Axis placement=\"bottom\" grid rule />"
     },
     {
       "example": "horizontal-gradient",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-gradient",
+      "path": "/docs/components/Bars/horizontal-gradient",
       "lineNumber": 29,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "horizontal-grouped",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-grouped",
+      "path": "/docs/components/Bars/horizontal-grouped",
       "lineNumber": 47,
       "line": "<Axis placement=\"bottom\" grid rule />"
     },
     {
       "example": "horizontal-grouped",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-grouped",
+      "path": "/docs/components/Bars/horizontal-grouped",
       "lineNumber": 48,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "horizontal-grouped-and-stacked",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-grouped-and-stacked",
+      "path": "/docs/components/Bars/horizontal-grouped-and-stacked",
       "lineNumber": 52,
       "line": "<Axis placement=\"bottom\" grid rule />"
     },
     {
       "example": "horizontal-grouped-and-stacked",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-grouped-and-stacked",
+      "path": "/docs/components/Bars/horizontal-grouped-and-stacked",
       "lineNumber": 53,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "horizontal-grouped-stacked-or-both-transition",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-grouped-stacked-or-both-transition",
+      "path": "/docs/components/Bars/horizontal-grouped-stacked-or-both-transition",
       "lineNumber": 81,
       "line": "<Axis placement=\"bottom\" grid rule />"
     },
     {
       "example": "horizontal-grouped-stacked-or-both-transition",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-grouped-stacked-or-both-transition",
+      "path": "/docs/components/Bars/horizontal-grouped-stacked-or-both-transition",
       "lineNumber": 82,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "horizontal-highlight-individual-bar",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-highlight-individual-bar",
+      "path": "/docs/components/Bars/horizontal-highlight-individual-bar",
       "lineNumber": 28,
       "line": "<Axis placement=\"bottom\" grid rule />"
     },
     {
       "example": "horizontal-highlight-individual-bar",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-highlight-individual-bar",
+      "path": "/docs/components/Bars/horizontal-highlight-individual-bar",
       "lineNumber": 29,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "horizontal-highlight-individual-bar-line",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-highlight-individual-bar-line",
+      "path": "/docs/components/Bars/horizontal-highlight-individual-bar-line",
       "lineNumber": 28,
       "line": "<Axis placement=\"bottom\" grid rule />"
     },
     {
       "example": "horizontal-highlight-individual-bar-line",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-highlight-individual-bar-line",
+      "path": "/docs/components/Bars/horizontal-highlight-individual-bar-line",
       "lineNumber": 29,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "horizontal-inside-labels",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-inside-labels",
+      "path": "/docs/components/Bars/horizontal-inside-labels",
       "lineNumber": 21,
       "line": "<Axis placement=\"bottom\" grid rule />"
     },
     {
       "example": "horizontal-inside-labels",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-inside-labels",
+      "path": "/docs/components/Bars/horizontal-inside-labels",
       "lineNumber": 22,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "horizontal-limit-ticks-count",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-limit-ticks-count",
+      "path": "/docs/components/Bars/horizontal-limit-ticks-count",
       "lineNumber": 28,
       "line": "<Axis placement=\"bottom\" grid rule />"
     },
     {
       "example": "horizontal-limit-ticks-count",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-limit-ticks-count",
+      "path": "/docs/components/Bars/horizontal-limit-ticks-count",
       "lineNumber": 29,
       "line": "<Axis placement=\"left\" ticks={4} rule />"
     },
     {
       "example": "horizontal-limit-ticks-second-scale",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-limit-ticks-second-scale",
+      "path": "/docs/components/Bars/horizontal-limit-ticks-second-scale",
       "lineNumber": 28,
       "line": "<Axis placement=\"bottom\" grid rule />"
     },
     {
       "example": "horizontal-limit-ticks-second-scale",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-limit-ticks-second-scale",
+      "path": "/docs/components/Bars/horizontal-limit-ticks-second-scale",
       "lineNumber": 29,
       "line": "<Axis"
     },
     {
       "example": "horizontal-multiple-diverging",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-multiple-diverging",
+      "path": "/docs/components/Bars/horizontal-multiple-diverging",
       "lineNumber": 28,
       "line": "<Axis placement=\"bottom\" grid rule />"
     },
     {
       "example": "horizontal-multiple-diverging",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-multiple-diverging",
+      "path": "/docs/components/Bars/horizontal-multiple-diverging",
       "lineNumber": 29,
       "line": "<Axis placement=\"left\" />"
     },
     {
       "example": "horizontal-multiple-overlapping",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-multiple-overlapping",
+      "path": "/docs/components/Bars/horizontal-multiple-overlapping",
       "lineNumber": 29,
       "line": "<Axis placement=\"bottom\" grid rule />"
     },
     {
       "example": "horizontal-multiple-overlapping",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-multiple-overlapping",
+      "path": "/docs/components/Bars/horizontal-multiple-overlapping",
       "lineNumber": 30,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "horizontal-outside-labels-default",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-outside-labels-default",
+      "path": "/docs/components/Bars/horizontal-outside-labels-default",
       "lineNumber": 22,
       "line": "<Axis placement=\"bottom\" grid rule />"
     },
     {
       "example": "horizontal-outside-labels-default",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-outside-labels-default",
+      "path": "/docs/components/Bars/horizontal-outside-labels-default",
       "lineNumber": 23,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "horizontal-rounded-right-only",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-rounded-right-only",
+      "path": "/docs/components/Bars/horizontal-rounded-right-only",
       "lineNumber": 28,
       "line": "<Axis placement=\"bottom\" grid rule />"
     },
     {
       "example": "horizontal-rounded-right-only",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-rounded-right-only",
+      "path": "/docs/components/Bars/horizontal-rounded-right-only",
       "lineNumber": 29,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "horizontal-stacked",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-stacked",
+      "path": "/docs/components/Bars/horizontal-stacked",
       "lineNumber": 44,
       "line": "<Axis placement=\"bottom\" grid rule />"
     },
     {
       "example": "horizontal-stacked",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-stacked",
+      "path": "/docs/components/Bars/horizontal-stacked",
       "lineNumber": 45,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "horizontal-stacked-percent",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-stacked-percent",
+      "path": "/docs/components/Bars/horizontal-stacked-percent",
       "lineNumber": 49,
       "line": "<Axis placement=\"bottom\" grid rule format=\"percentRound\" />"
     },
     {
       "example": "horizontal-stacked-percent",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-stacked-percent",
+      "path": "/docs/components/Bars/horizontal-stacked-percent",
       "lineNumber": 50,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "horizontal-stagger-tween-on-mount",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-stagger-tween-on-mount",
+      "path": "/docs/components/Bars/horizontal-stagger-tween-on-mount",
       "lineNumber": 34,
       "line": "<Axis placement=\"bottom\" grid rule />"
     },
     {
       "example": "horizontal-stagger-tween-on-mount",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-stagger-tween-on-mount",
+      "path": "/docs/components/Bars/horizontal-stagger-tween-on-mount",
       "lineNumber": 35,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "horizontal-time-scale-with-inset",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-time-scale-with-inset",
+      "path": "/docs/components/Bars/horizontal-time-scale-with-inset",
       "lineNumber": 28,
       "line": "<Axis placement=\"bottom\" grid rule />"
     },
     {
       "example": "horizontal-time-scale-with-inset",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-time-scale-with-inset",
+      "path": "/docs/components/Bars/horizontal-time-scale-with-inset",
       "lineNumber": 29,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "horizontal-time-scale-with-interval",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-time-scale-with-interval",
+      "path": "/docs/components/Bars/horizontal-time-scale-with-interval",
       "lineNumber": 28,
       "line": "<Axis placement=\"bottom\" grid rule />"
     },
     {
       "example": "horizontal-time-scale-with-interval",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-time-scale-with-interval",
+      "path": "/docs/components/Bars/horizontal-time-scale-with-interval",
       "lineNumber": 29,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "horizontal-time-scale-with-missing-data",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-time-scale-with-missing-data",
+      "path": "/docs/components/Bars/horizontal-time-scale-with-missing-data",
       "lineNumber": 28,
       "line": "<Axis placement=\"bottom\" grid rule />"
     },
     {
       "example": "horizontal-time-scale-with-missing-data",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-time-scale-with-missing-data",
+      "path": "/docs/components/Bars/horizontal-time-scale-with-missing-data",
       "lineNumber": 29,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "horizontal-tooltip-and-bar-highlight",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-tooltip-and-bar-highlight",
+      "path": "/docs/components/Bars/horizontal-tooltip-and-bar-highlight",
       "lineNumber": 30,
       "line": "<Axis placement=\"bottom\" grid rule />"
     },
     {
       "example": "horizontal-tooltip-and-bar-highlight",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-tooltip-and-bar-highlight",
+      "path": "/docs/components/Bars/horizontal-tooltip-and-bar-highlight",
       "lineNumber": 31,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "horizontal-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
+      "path": "/docs/components/Bars/horizontal-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
       "lineNumber": 79,
       "line": "<Axis placement=\"bottom\" grid rule />"
     },
     {
       "example": "horizontal-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
+      "path": "/docs/components/Bars/horizontal-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
       "lineNumber": 80,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "horizontal-tooltip-and-clipped-highlight",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-tooltip-and-clipped-highlight",
+      "path": "/docs/components/Bars/horizontal-tooltip-and-clipped-highlight",
       "lineNumber": 30,
       "line": "<Axis placement=\"bottom\" grid rule />"
     },
     {
       "example": "horizontal-tooltip-and-clipped-highlight",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-tooltip-and-clipped-highlight",
+      "path": "/docs/components/Bars/horizontal-tooltip-and-clipped-highlight",
       "lineNumber": 31,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "horizontal-tooltip-and-highlight",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-tooltip-and-highlight",
+      "path": "/docs/components/Bars/horizontal-tooltip-and-highlight",
       "lineNumber": 29,
       "line": "<Axis placement=\"bottom\" grid rule />"
     },
     {
       "example": "horizontal-tooltip-and-highlight",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-tooltip-and-highlight",
+      "path": "/docs/components/Bars/horizontal-tooltip-and-highlight",
       "lineNumber": 30,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "horizontal-tween-on-mount",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-tween-on-mount",
+      "path": "/docs/components/Bars/horizontal-tween-on-mount",
       "lineNumber": 34,
       "line": "<Axis placement=\"bottom\" grid rule />"
     },
     {
       "example": "horizontal-tween-on-mount",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-tween-on-mount",
+      "path": "/docs/components/Bars/horizontal-tween-on-mount",
       "lineNumber": 35,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "horizontal-with-grid-on-top",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-with-grid-on-top",
+      "path": "/docs/components/Bars/horizontal-with-grid-on-top",
       "lineNumber": 29,
       "line": "<Axis placement=\"bottom\" grid={{ class: 'stroke-surface-100' }} rule />"
     },
     {
       "example": "horizontal-with-grid-on-top",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-with-grid-on-top",
+      "path": "/docs/components/Bars/horizontal-with-grid-on-top",
       "lineNumber": 30,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "horizontal-with-grid-on-top-mix-blend",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-with-grid-on-top-mix-blend",
+      "path": "/docs/components/Bars/horizontal-with-grid-on-top-mix-blend",
       "lineNumber": 29,
       "line": "<Axis placement=\"bottom\" grid={{ class: 'mix-blend-multiply' }} rule />"
     },
     {
       "example": "horizontal-with-grid-on-top-mix-blend",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-with-grid-on-top-mix-blend",
+      "path": "/docs/components/Bars/horizontal-with-grid-on-top-mix-blend",
       "lineNumber": 30,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "vertical-average-annotation-rule",
       "component": "Bars",
-      "path": "/example/Bars/vertical-average-annotation-rule",
+      "path": "/docs/components/Bars/vertical-average-annotation-rule",
       "lineNumber": 29,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "vertical-average-annotation-rule",
       "component": "Bars",
-      "path": "/example/Bars/vertical-average-annotation-rule",
+      "path": "/docs/components/Bars/vertical-average-annotation-rule",
       "lineNumber": 30,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "vertical-basic",
       "component": "Bars",
-      "path": "/example/Bars/vertical-basic",
+      "path": "/docs/components/Bars/vertical-basic",
       "lineNumber": 25,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "vertical-basic",
       "component": "Bars",
-      "path": "/example/Bars/vertical-basic",
+      "path": "/docs/components/Bars/vertical-basic",
       "lineNumber": 26,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "vertical-calculated-value-domain-negative",
       "component": "Bars",
-      "path": "/example/Bars/vertical-calculated-value-domain-negative",
+      "path": "/docs/components/Bars/vertical-calculated-value-domain-negative",
       "lineNumber": 24,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "vertical-calculated-value-domain-negative",
       "component": "Bars",
-      "path": "/example/Bars/vertical-calculated-value-domain-negative",
+      "path": "/docs/components/Bars/vertical-calculated-value-domain-negative",
       "lineNumber": 25,
       "line": "<Axis placement=\"bottom\" />"
     },
     {
       "example": "vertical-calculated-value-domain-positive",
       "component": "Bars",
-      "path": "/example/Bars/vertical-calculated-value-domain-positive",
+      "path": "/docs/components/Bars/vertical-calculated-value-domain-positive",
       "lineNumber": 24,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "vertical-calculated-value-domain-positive",
       "component": "Bars",
-      "path": "/example/Bars/vertical-calculated-value-domain-positive",
+      "path": "/docs/components/Bars/vertical-calculated-value-domain-positive",
       "lineNumber": 25,
       "line": "<Axis placement=\"bottom\" />"
     },
     {
       "example": "vertical-click-handler",
       "component": "Bars",
-      "path": "/example/Bars/vertical-click-handler",
+      "path": "/docs/components/Bars/vertical-click-handler",
       "lineNumber": 31,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "vertical-click-handler",
       "component": "Bars",
-      "path": "/example/Bars/vertical-click-handler",
+      "path": "/docs/components/Bars/vertical-click-handler",
       "lineNumber": 32,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "vertical-customize-individual-styles",
       "component": "Bars",
-      "path": "/example/Bars/vertical-customize-individual-styles",
+      "path": "/docs/components/Bars/vertical-customize-individual-styles",
       "lineNumber": 25,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "vertical-customize-individual-styles",
       "component": "Bars",
-      "path": "/example/Bars/vertical-customize-individual-styles",
+      "path": "/docs/components/Bars/vertical-customize-individual-styles",
       "lineNumber": 26,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "vertical-gradient",
       "component": "Bars",
-      "path": "/example/Bars/vertical-gradient",
+      "path": "/docs/components/Bars/vertical-gradient",
       "lineNumber": 21,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "vertical-gradient",
       "component": "Bars",
-      "path": "/example/Bars/vertical-gradient",
+      "path": "/docs/components/Bars/vertical-gradient",
       "lineNumber": 22,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "vertical-grouped",
       "component": "Bars",
-      "path": "/example/Bars/vertical-grouped",
+      "path": "/docs/components/Bars/vertical-grouped",
       "lineNumber": 38,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "vertical-grouped",
       "component": "Bars",
-      "path": "/example/Bars/vertical-grouped",
+      "path": "/docs/components/Bars/vertical-grouped",
       "lineNumber": 39,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "vertical-grouped-and-stacked",
       "component": "Bars",
-      "path": "/example/Bars/vertical-grouped-and-stacked",
+      "path": "/docs/components/Bars/vertical-grouped-and-stacked",
       "lineNumber": 43,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "vertical-grouped-and-stacked",
       "component": "Bars",
-      "path": "/example/Bars/vertical-grouped-and-stacked",
+      "path": "/docs/components/Bars/vertical-grouped-and-stacked",
       "lineNumber": 44,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "vertical-grouped-stacked-or-both-transition",
       "component": "Bars",
-      "path": "/example/Bars/vertical-grouped-stacked-or-both-transition",
+      "path": "/docs/components/Bars/vertical-grouped-stacked-or-both-transition",
       "lineNumber": 77,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "vertical-grouped-stacked-or-both-transition",
       "component": "Bars",
-      "path": "/example/Bars/vertical-grouped-stacked-or-both-transition",
+      "path": "/docs/components/Bars/vertical-grouped-stacked-or-both-transition",
       "lineNumber": 78,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "vertical-highlight-individual-bar",
       "component": "Bars",
-      "path": "/example/Bars/vertical-highlight-individual-bar",
+      "path": "/docs/components/Bars/vertical-highlight-individual-bar",
       "lineNumber": 25,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "vertical-highlight-individual-bar",
       "component": "Bars",
-      "path": "/example/Bars/vertical-highlight-individual-bar",
+      "path": "/docs/components/Bars/vertical-highlight-individual-bar",
       "lineNumber": 26,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "vertical-highlight-individual-bar-line",
       "component": "Bars",
-      "path": "/example/Bars/vertical-highlight-individual-bar-line",
+      "path": "/docs/components/Bars/vertical-highlight-individual-bar-line",
       "lineNumber": 21,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "vertical-highlight-individual-bar-line",
       "component": "Bars",
-      "path": "/example/Bars/vertical-highlight-individual-bar-line",
+      "path": "/docs/components/Bars/vertical-highlight-individual-bar-line",
       "lineNumber": 22,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "vertical-inside-labels",
       "component": "Bars",
-      "path": "/example/Bars/vertical-inside-labels",
+      "path": "/docs/components/Bars/vertical-inside-labels",
       "lineNumber": 21,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "vertical-inside-labels",
       "component": "Bars",
-      "path": "/example/Bars/vertical-inside-labels",
+      "path": "/docs/components/Bars/vertical-inside-labels",
       "lineNumber": 22,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "vertical-limit-ticks-count",
       "component": "Bars",
-      "path": "/example/Bars/vertical-limit-ticks-count",
+      "path": "/docs/components/Bars/vertical-limit-ticks-count",
       "lineNumber": 25,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "vertical-limit-ticks-count",
       "component": "Bars",
-      "path": "/example/Bars/vertical-limit-ticks-count",
+      "path": "/docs/components/Bars/vertical-limit-ticks-count",
       "lineNumber": 26,
       "line": "<Axis placement=\"bottom\" ticks={4} rule />"
     },
     {
       "example": "vertical-limit-ticks-second-scale",
       "component": "Bars",
-      "path": "/example/Bars/vertical-limit-ticks-second-scale",
+      "path": "/docs/components/Bars/vertical-limit-ticks-second-scale",
       "lineNumber": 25,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "vertical-limit-ticks-second-scale",
       "component": "Bars",
-      "path": "/example/Bars/vertical-limit-ticks-second-scale",
+      "path": "/docs/components/Bars/vertical-limit-ticks-second-scale",
       "lineNumber": 26,
       "line": "<Axis"
     },
     {
       "example": "vertical-multiple-diverging",
       "component": "Bars",
-      "path": "/example/Bars/vertical-multiple-diverging",
+      "path": "/docs/components/Bars/vertical-multiple-diverging",
       "lineNumber": 27,
       "line": "<Axis placement=\"left\" grid rule format={(d) => format(Math.abs(d), 'integer')} />"
     },
     {
       "example": "vertical-multiple-diverging",
       "component": "Bars",
-      "path": "/example/Bars/vertical-multiple-diverging",
+      "path": "/docs/components/Bars/vertical-multiple-diverging",
       "lineNumber": 28,
       "line": "<Axis placement=\"bottom\" />"
     },
     {
       "example": "vertical-multiple-diverging-rounded-specific",
       "component": "Bars",
-      "path": "/example/Bars/vertical-multiple-diverging-rounded-specific",
+      "path": "/docs/components/Bars/vertical-multiple-diverging-rounded-specific",
       "lineNumber": 38,
       "line": "<Axis placement=\"left\" grid rule format={(d) => format(Math.abs(d), 'integer')} />"
     },
     {
       "example": "vertical-multiple-diverging-rounded-specific",
       "component": "Bars",
-      "path": "/example/Bars/vertical-multiple-diverging-rounded-specific",
+      "path": "/docs/components/Bars/vertical-multiple-diverging-rounded-specific",
       "lineNumber": 39,
       "line": "<Axis placement=\"bottom\" />"
     },
     {
       "example": "vertical-multiple-overlapping",
       "component": "Bars",
-      "path": "/example/Bars/vertical-multiple-overlapping",
+      "path": "/docs/components/Bars/vertical-multiple-overlapping",
       "lineNumber": 27,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "vertical-multiple-overlapping",
       "component": "Bars",
-      "path": "/example/Bars/vertical-multiple-overlapping",
+      "path": "/docs/components/Bars/vertical-multiple-overlapping",
       "lineNumber": 28,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "vertical-outside-labels-default",
       "component": "Bars",
-      "path": "/example/Bars/vertical-outside-labels-default",
+      "path": "/docs/components/Bars/vertical-outside-labels-default",
       "lineNumber": 22,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "vertical-outside-labels-default",
       "component": "Bars",
-      "path": "/example/Bars/vertical-outside-labels-default",
+      "path": "/docs/components/Bars/vertical-outside-labels-default",
       "lineNumber": 23,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "vertical-rounded-top-only",
       "component": "Bars",
-      "path": "/example/Bars/vertical-rounded-top-only",
+      "path": "/docs/components/Bars/vertical-rounded-top-only",
       "lineNumber": 26,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "vertical-rounded-top-only",
       "component": "Bars",
-      "path": "/example/Bars/vertical-rounded-top-only",
+      "path": "/docs/components/Bars/vertical-rounded-top-only",
       "lineNumber": 27,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "vertical-stacked",
       "component": "Bars",
-      "path": "/example/Bars/vertical-stacked",
+      "path": "/docs/components/Bars/vertical-stacked",
       "lineNumber": 35,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "vertical-stacked",
       "component": "Bars",
-      "path": "/example/Bars/vertical-stacked",
+      "path": "/docs/components/Bars/vertical-stacked",
       "lineNumber": 36,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "vertical-stacked-percent",
       "component": "Bars",
-      "path": "/example/Bars/vertical-stacked-percent",
+      "path": "/docs/components/Bars/vertical-stacked-percent",
       "lineNumber": 39,
       "line": "<Axis placement=\"left\" grid rule format=\"percentRound\" />"
     },
     {
       "example": "vertical-stacked-percent",
       "component": "Bars",
-      "path": "/example/Bars/vertical-stacked-percent",
+      "path": "/docs/components/Bars/vertical-stacked-percent",
       "lineNumber": 40,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "vertical-stagger-tween-on-mount",
       "component": "Bars",
-      "path": "/example/Bars/vertical-stagger-tween-on-mount",
+      "path": "/docs/components/Bars/vertical-stagger-tween-on-mount",
       "lineNumber": 31,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "vertical-stagger-tween-on-mount",
       "component": "Bars",
-      "path": "/example/Bars/vertical-stagger-tween-on-mount",
+      "path": "/docs/components/Bars/vertical-stagger-tween-on-mount",
       "lineNumber": 32,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "vertical-stagger-tween-on-mount-rounded-edge",
       "component": "Bars",
-      "path": "/example/Bars/vertical-stagger-tween-on-mount-rounded-edge",
+      "path": "/docs/components/Bars/vertical-stagger-tween-on-mount-rounded-edge",
       "lineNumber": 31,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "vertical-stagger-tween-on-mount-rounded-edge",
       "component": "Bars",
-      "path": "/example/Bars/vertical-stagger-tween-on-mount-rounded-edge",
+      "path": "/docs/components/Bars/vertical-stagger-tween-on-mount-rounded-edge",
       "lineNumber": 32,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "vertical-time-scale-with-inset",
       "component": "Bars",
-      "path": "/example/Bars/vertical-time-scale-with-inset",
+      "path": "/docs/components/Bars/vertical-time-scale-with-inset",
       "lineNumber": 23,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "vertical-time-scale-with-inset",
       "component": "Bars",
-      "path": "/example/Bars/vertical-time-scale-with-inset",
+      "path": "/docs/components/Bars/vertical-time-scale-with-inset",
       "lineNumber": 24,
       "line": "<Axis placement=\"bottom\" rule tickMultiline />"
     },
     {
       "example": "vertical-time-scale-with-interval",
       "component": "Bars",
-      "path": "/example/Bars/vertical-time-scale-with-interval",
+      "path": "/docs/components/Bars/vertical-time-scale-with-interval",
       "lineNumber": 23,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "vertical-time-scale-with-interval",
       "component": "Bars",
-      "path": "/example/Bars/vertical-time-scale-with-interval",
+      "path": "/docs/components/Bars/vertical-time-scale-with-interval",
       "lineNumber": 24,
       "line": "<Axis placement=\"bottom\" rule tickMultiline />"
     },
     {
       "example": "vertical-time-scale-with-interval-months",
       "component": "Bars",
-      "path": "/example/Bars/vertical-time-scale-with-interval-months",
+      "path": "/docs/components/Bars/vertical-time-scale-with-interval-months",
       "lineNumber": 23,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "vertical-time-scale-with-interval-months",
       "component": "Bars",
-      "path": "/example/Bars/vertical-time-scale-with-interval-months",
+      "path": "/docs/components/Bars/vertical-time-scale-with-interval-months",
       "lineNumber": 24,
       "line": "<Axis placement=\"bottom\" rule tickMultiline />"
     },
     {
       "example": "vertical-time-scale-with-missing-data",
       "component": "Bars",
-      "path": "/example/Bars/vertical-time-scale-with-missing-data",
+      "path": "/docs/components/Bars/vertical-time-scale-with-missing-data",
       "lineNumber": 23,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "vertical-time-scale-with-missing-data",
       "component": "Bars",
-      "path": "/example/Bars/vertical-time-scale-with-missing-data",
+      "path": "/docs/components/Bars/vertical-time-scale-with-missing-data",
       "lineNumber": 24,
       "line": "<Axis placement=\"bottom\" rule tickMultiline />"
     },
     {
       "example": "vertical-tooltip-and-bar-highlight",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tooltip-and-bar-highlight",
+      "path": "/docs/components/Bars/vertical-tooltip-and-bar-highlight",
       "lineNumber": 27,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "vertical-tooltip-and-bar-highlight",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tooltip-and-bar-highlight",
+      "path": "/docs/components/Bars/vertical-tooltip-and-bar-highlight",
       "lineNumber": 28,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "vertical-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
+      "path": "/docs/components/Bars/vertical-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
       "lineNumber": 79,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "vertical-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
+      "path": "/docs/components/Bars/vertical-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
       "lineNumber": 80,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "vertical-tooltip-and-clipped-highlight",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tooltip-and-clipped-highlight",
+      "path": "/docs/components/Bars/vertical-tooltip-and-clipped-highlight",
       "lineNumber": 29,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "vertical-tooltip-and-clipped-highlight",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tooltip-and-clipped-highlight",
+      "path": "/docs/components/Bars/vertical-tooltip-and-clipped-highlight",
       "lineNumber": 30,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "vertical-tooltip-and-highlight",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tooltip-and-highlight",
+      "path": "/docs/components/Bars/vertical-tooltip-and-highlight",
       "lineNumber": 27,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "vertical-tooltip-and-highlight",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tooltip-and-highlight",
+      "path": "/docs/components/Bars/vertical-tooltip-and-highlight",
       "lineNumber": 28,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "vertical-tween-on-mount",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tween-on-mount",
+      "path": "/docs/components/Bars/vertical-tween-on-mount",
       "lineNumber": 31,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "vertical-tween-on-mount",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tween-on-mount",
+      "path": "/docs/components/Bars/vertical-tween-on-mount",
       "lineNumber": 32,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "vertical-tween-on-mount-rounded-edge",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tween-on-mount-rounded-edge",
+      "path": "/docs/components/Bars/vertical-tween-on-mount-rounded-edge",
       "lineNumber": 31,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "vertical-tween-on-mount-rounded-edge",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tween-on-mount-rounded-edge",
+      "path": "/docs/components/Bars/vertical-tween-on-mount-rounded-edge",
       "lineNumber": 32,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "vertical-with-grid-on-top",
       "component": "Bars",
-      "path": "/example/Bars/vertical-with-grid-on-top",
+      "path": "/docs/components/Bars/vertical-with-grid-on-top",
       "lineNumber": 25,
       "line": "<Axis placement=\"left\" grid={{ class: 'stroke-surface-100' }} rule />"
     },
     {
       "example": "vertical-with-grid-on-top",
       "component": "Bars",
-      "path": "/example/Bars/vertical-with-grid-on-top",
+      "path": "/docs/components/Bars/vertical-with-grid-on-top",
       "lineNumber": 26,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "vertical-with-grid-on-top-mix-blend",
       "component": "Bars",
-      "path": "/example/Bars/vertical-with-grid-on-top-mix-blend",
+      "path": "/docs/components/Bars/vertical-with-grid-on-top-mix-blend",
       "lineNumber": 25,
       "line": "<Axis placement=\"left\" grid={{ class: 'mix-blend-multiply' }} rule />"
     },
     {
       "example": "vertical-with-grid-on-top-mix-blend",
       "component": "Bars",
-      "path": "/example/Bars/vertical-with-grid-on-top-mix-blend",
+      "path": "/docs/components/Bars/vertical-with-grid-on-top-mix-blend",
       "lineNumber": 26,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "integrated-brush-(both-axis-area)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/integrated-brush-(both-axis-area)",
+      "path": "/docs/components/BrushContext/integrated-brush-(both-axis-area)",
       "lineNumber": 39,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "integrated-brush-(both-axis-area)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/integrated-brush-(both-axis-area)",
+      "path": "/docs/components/BrushContext/integrated-brush-(both-axis-area)",
       "lineNumber": 40,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "integrated-brush-(x-axis)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/integrated-brush-(x-axis)",
+      "path": "/docs/components/BrushContext/integrated-brush-(x-axis)",
       "lineNumber": 36,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "integrated-brush-(x-axis)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/integrated-brush-(x-axis)",
+      "path": "/docs/components/BrushContext/integrated-brush-(x-axis)",
       "lineNumber": 37,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "integrated-brush-(y-axis)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/integrated-brush-(y-axis)",
+      "path": "/docs/components/BrushContext/integrated-brush-(y-axis)",
       "lineNumber": 36,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "integrated-brush-(y-axis)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/integrated-brush-(y-axis)",
+      "path": "/docs/components/BrushContext/integrated-brush-(y-axis)",
       "lineNumber": 37,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "minimap",
       "component": "BrushContext",
-      "path": "/example/BrushContext/minimap",
+      "path": "/docs/components/BrushContext/minimap",
       "lineNumber": 44,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "minimap",
       "component": "BrushContext",
-      "path": "/example/BrushContext/minimap",
+      "path": "/docs/components/BrushContext/minimap",
       "lineNumber": 45,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "selection",
       "component": "BrushContext",
-      "path": "/example/BrushContext/selection",
+      "path": "/docs/components/BrushContext/selection",
       "lineNumber": 40,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "selection",
       "component": "BrushContext",
-      "path": "/example/BrushContext/selection",
+      "path": "/docs/components/BrushContext/selection",
       "lineNumber": 41,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "separate-chart-(clip-data-y-axis)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/separate-chart-(clip-data-y-axis)",
+      "path": "/docs/components/BrushContext/separate-chart-(clip-data-y-axis)",
       "lineNumber": 42,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "separate-chart-(clip-data-y-axis)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/separate-chart-(clip-data-y-axis)",
+      "path": "/docs/components/BrushContext/separate-chart-(clip-data-y-axis)",
       "lineNumber": 43,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "separate-chart-(clip-data)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/separate-chart-(clip-data)",
+      "path": "/docs/components/BrushContext/separate-chart-(clip-data)",
       "lineNumber": 30,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "separate-chart-(clip-data)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/separate-chart-(clip-data)",
+      "path": "/docs/components/BrushContext/separate-chart-(clip-data)",
       "lineNumber": 31,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "separate-chart-(filter-data)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/separate-chart-(filter-data)",
+      "path": "/docs/components/BrushContext/separate-chart-(filter-data)",
       "lineNumber": 32,
       "line": "<Axis placement=\"left\" grid rule motion={{ type: 'tween', duration: 200 }} />"
     },
     {
       "example": "separate-chart-(filter-data)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/separate-chart-(filter-data)",
+      "path": "/docs/components/BrushContext/separate-chart-(filter-data)",
       "lineNumber": 33,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "sync-brushes-with-bind-xdomain",
       "component": "BrushContext",
-      "path": "/example/BrushContext/sync-brushes-with-bind-xdomain",
+      "path": "/docs/components/BrushContext/sync-brushes-with-bind-xdomain",
       "lineNumber": 65,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "sync-brushes-with-bind-xdomain",
       "component": "BrushContext",
-      "path": "/example/BrushContext/sync-brushes-with-bind-xdomain",
+      "path": "/docs/components/BrushContext/sync-brushes-with-bind-xdomain",
       "lineNumber": 66,
       "line": "<Axis placement=\"bottom\" />"
     },
     {
       "example": "tooltip-interop",
       "component": "BrushContext",
-      "path": "/example/BrushContext/tooltip-interop",
+      "path": "/docs/components/BrushContext/tooltip-interop",
       "lineNumber": 41,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "tooltip-interop",
       "component": "BrushContext",
-      "path": "/example/BrushContext/tooltip-interop",
+      "path": "/docs/components/BrushContext/tooltip-interop",
       "lineNumber": 42,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "compound-dual-axis-with-single-chart-using-remapped-scale",
       "component": "Chart",
-      "path": "/example/Chart/compound-dual-axis-with-single-chart-using-remapped-scale",
+      "path": "/docs/components/Chart/compound-dual-axis-with-single-chart-using-remapped-scale",
       "lineNumber": 25,
       "line": "<Axis"
     },
     {
       "example": "compound-dual-axis-with-single-chart-using-remapped-scale",
       "component": "Chart",
-      "path": "/example/Chart/compound-dual-axis-with-single-chart-using-remapped-scale",
+      "path": "/docs/components/Chart/compound-dual-axis-with-single-chart-using-remapped-scale",
       "lineNumber": 33,
       "line": "<Axis"
     },
     {
       "example": "compound-dual-axis-with-single-chart-using-remapped-scale",
       "component": "Chart",
-      "path": "/example/Chart/compound-dual-axis-with-single-chart-using-remapped-scale",
+      "path": "/docs/components/Chart/compound-dual-axis-with-single-chart-using-remapped-scale",
       "lineNumber": 42,
       "line": "<Axis placement=\"bottom\" format=\"none\" rule />"
     },
     {
       "example": "compound-dual-axis-with-stacked-charts",
       "component": "Chart",
-      "path": "/example/Chart/compound-dual-axis-with-stacked-charts",
+      "path": "/docs/components/Chart/compound-dual-axis-with-stacked-charts",
       "lineNumber": 21,
       "line": "<Axis"
     },
     {
       "example": "compound-dual-axis-with-stacked-charts",
       "component": "Chart",
-      "path": "/example/Chart/compound-dual-axis-with-stacked-charts",
+      "path": "/docs/components/Chart/compound-dual-axis-with-stacked-charts",
       "lineNumber": 29,
       "line": "<Axis placement=\"bottom\" format=\"none\" rule />"
     },
     {
       "example": "compound-dual-axis-with-stacked-charts",
       "component": "Chart",
-      "path": "/example/Chart/compound-dual-axis-with-stacked-charts",
+      "path": "/docs/components/Chart/compound-dual-axis-with-stacked-charts",
       "lineNumber": 44,
       "line": "<Axis"
     },
     {
       "example": "compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
       "component": "Chart",
-      "path": "/example/Chart/compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
+      "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
       "lineNumber": 66,
       "line": "<Axis placement=\"left\" />"
     },
     {
       "example": "compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
       "component": "Chart",
-      "path": "/example/Chart/compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
+      "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
       "lineNumber": 68,
       "line": "<Axis"
     },
     {
       "example": "styling-using-attributes",
       "component": "Circle",
-      "path": "/example/Circle/styling-using-attributes",
+      "path": "/docs/components/Circle/styling-using-attributes",
       "lineNumber": 12,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "styling-using-attributes",
       "component": "Circle",
-      "path": "/example/Circle/styling-using-attributes",
+      "path": "/docs/components/Circle/styling-using-attributes",
       "lineNumber": 13,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "styling-using-classes",
       "component": "Circle",
-      "path": "/example/Circle/styling-using-classes",
+      "path": "/docs/components/Circle/styling-using-classes",
       "lineNumber": 12,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "styling-using-classes",
       "component": "Circle",
-      "path": "/example/Circle/styling-using-classes",
+      "path": "/docs/components/Circle/styling-using-classes",
       "lineNumber": 13,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "styling-using-css-variables",
       "component": "Circle",
-      "path": "/example/Circle/styling-using-css-variables",
+      "path": "/docs/components/Circle/styling-using-css-variables",
       "lineNumber": 12,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "styling-using-css-variables",
       "component": "Circle",
-      "path": "/example/Circle/styling-using-css-variables",
+      "path": "/docs/components/Circle/styling-using-css-variables",
       "lineNumber": 13,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "styling-using-attributes",
       "component": "Ellipse",
-      "path": "/example/Ellipse/styling-using-attributes",
+      "path": "/docs/components/Ellipse/styling-using-attributes",
       "lineNumber": 12,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "styling-using-attributes",
       "component": "Ellipse",
-      "path": "/example/Ellipse/styling-using-attributes",
+      "path": "/docs/components/Ellipse/styling-using-attributes",
       "lineNumber": 13,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "styling-using-classes",
       "component": "Ellipse",
-      "path": "/example/Ellipse/styling-using-classes",
+      "path": "/docs/components/Ellipse/styling-using-classes",
       "lineNumber": 12,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "styling-using-classes",
       "component": "Ellipse",
-      "path": "/example/Ellipse/styling-using-classes",
+      "path": "/docs/components/Ellipse/styling-using-classes",
       "lineNumber": 13,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "styling-using-css-variables",
       "component": "Ellipse",
-      "path": "/example/Ellipse/styling-using-css-variables",
+      "path": "/docs/components/Ellipse/styling-using-css-variables",
       "lineNumber": 12,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "styling-using-css-variables",
       "component": "Ellipse",
-      "path": "/example/Ellipse/styling-using-css-variables",
+      "path": "/docs/components/Ellipse/styling-using-css-variables",
       "lineNumber": 13,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "beeswarm",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/beeswarm",
+      "path": "/docs/components/ForceSimulation/beeswarm",
       "lineNumber": 32,
       "line": "<Axis placement=\"bottom\" format=\"none\" rule grid />"
     },
     {
       "example": "basic",
       "component": "Frame",
-      "path": "/example/Frame/basic",
+      "path": "/docs/components/Frame/basic",
       "lineNumber": 13,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "basic",
       "component": "Frame",
-      "path": "/example/Frame/basic",
+      "path": "/docs/components/Frame/basic",
       "lineNumber": 14,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "border",
       "component": "Frame",
-      "path": "/example/Frame/border",
+      "path": "/docs/components/Frame/border",
       "lineNumber": 13,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "border",
       "component": "Frame",
-      "path": "/example/Frame/border",
+      "path": "/docs/components/Frame/border",
       "lineNumber": 14,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "full",
       "component": "Frame",
-      "path": "/example/Frame/full",
+      "path": "/docs/components/Frame/full",
       "lineNumber": 13,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "full",
       "component": "Frame",
-      "path": "/example/Frame/full",
+      "path": "/docs/components/Frame/full",
       "lineNumber": 14,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "gradient",
       "component": "Frame",
-      "path": "/example/Frame/gradient",
+      "path": "/docs/components/Frame/gradient",
       "lineNumber": 17,
       "line": "<Axis placement=\"bottom\" />"
     },
     {
       "example": "gradient",
       "component": "Frame",
-      "path": "/example/Frame/gradient",
+      "path": "/docs/components/Frame/gradient",
       "lineNumber": 18,
       "line": "<Axis placement=\"left\" />"
     },
     {
       "example": "band-scale-between",
       "component": "Grid",
-      "path": "/example/Grid/band-scale-between",
+      "path": "/docs/components/Grid/band-scale-between",
       "lineNumber": 12,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "band-scale-default",
       "component": "Grid",
-      "path": "/example/Grid/band-scale-default",
+      "path": "/docs/components/Grid/band-scale-default",
       "lineNumber": 12,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "explicit-ticks",
       "component": "Grid",
-      "path": "/example/Grid/explicit-ticks",
+      "path": "/docs/components/Grid/explicit-ticks",
       "lineNumber": 8,
       "line": "<Axis placement=\"left\" rule ticks={[0, 50, 100]} />"
     },
     {
       "example": "inject-tick-value",
       "component": "Grid",
-      "path": "/example/Grid/inject-tick-value",
+      "path": "/docs/components/Grid/inject-tick-value",
       "lineNumber": 8,
       "line": "<Axis placement=\"left\" rule ticks={(scale) => [45, ...(scale.ticks?.() ?? [])]} />"
     },
     {
       "example": "integer-only",
       "component": "Grid",
-      "path": "/example/Grid/integer-only",
+      "path": "/docs/components/Grid/integer-only",
       "lineNumber": 8,
       "line": "<Axis"
     },
     {
       "example": "tick-count",
       "component": "Grid",
-      "path": "/example/Grid/tick-count",
+      "path": "/docs/components/Grid/tick-count",
       "lineNumber": 8,
       "line": "<Axis placement=\"left\" rule ticks={10} />"
     },
     {
       "example": "tick-count-null",
       "component": "Grid",
-      "path": "/example/Grid/tick-count-null",
+      "path": "/docs/components/Grid/tick-count-null",
       "lineNumber": 8,
       "line": "<Axis placement=\"left\" rule ticks={null} />"
     },
     {
       "example": "tick-count-responsive",
       "component": "Grid",
-      "path": "/example/Grid/tick-count-responsive",
+      "path": "/docs/components/Grid/tick-count-responsive",
       "lineNumber": 17,
       "line": "<Axis placement=\"bottom\" rule ticks={mdScreen.current ? 10 : 5} />"
     },
     {
       "example": "basic",
       "component": "Group",
-      "path": "/example/Group/basic",
+      "path": "/docs/components/Group/basic",
       "lineNumber": 7,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "basic",
       "component": "Group",
-      "path": "/example/Group/basic",
+      "path": "/docs/components/Group/basic",
       "lineNumber": 8,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "scatter",
       "component": "Hull",
-      "path": "/example/Hull/scatter",
+      "path": "/docs/components/Hull/scatter",
       "lineNumber": 36,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "scatter",
       "component": "Hull",
-      "path": "/example/Hull/scatter",
+      "path": "/docs/components/Hull/scatter",
       "lineNumber": 37,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "styling-using-attributes",
       "component": "Line",
-      "path": "/example/Line/styling-using-attributes",
+      "path": "/docs/components/Line/styling-using-attributes",
       "lineNumber": 12,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "styling-using-attributes",
       "component": "Line",
-      "path": "/example/Line/styling-using-attributes",
+      "path": "/docs/components/Line/styling-using-attributes",
       "lineNumber": 13,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "styling-using-classes",
       "component": "Line",
-      "path": "/example/Line/styling-using-classes",
+      "path": "/docs/components/Line/styling-using-classes",
       "lineNumber": 12,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "styling-using-classes",
       "component": "Line",
-      "path": "/example/Line/styling-using-classes",
+      "path": "/docs/components/Line/styling-using-classes",
       "lineNumber": 13,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "styling-using-css-variables",
       "component": "Line",
-      "path": "/example/Line/styling-using-css-variables",
+      "path": "/docs/components/Line/styling-using-css-variables",
       "lineNumber": 12,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "styling-using-css-variables",
       "component": "Line",
-      "path": "/example/Line/styling-using-css-variables",
+      "path": "/docs/components/Line/styling-using-css-variables",
       "lineNumber": 13,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "custom",
       "component": "LineChart",
-      "path": "/example/LineChart/custom",
+      "path": "/docs/components/LineChart/custom",
       "lineNumber": 21,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "custom",
       "component": "LineChart",
-      "path": "/example/LineChart/custom",
+      "path": "/docs/components/LineChart/custom",
       "lineNumber": 22,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "repeat-indefinitely",
       "component": "MotionPath",
-      "path": "/example/MotionPath/repeat-indefinitely",
+      "path": "/docs/components/MotionPath/repeat-indefinitely",
       "lineNumber": 38,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "repeat-indefinitely",
       "component": "MotionPath",
-      "path": "/example/MotionPath/repeat-indefinitely",
+      "path": "/docs/components/MotionPath/repeat-indefinitely",
       "lineNumber": 39,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "rotate-object-with-path",
       "component": "MotionPath",
-      "path": "/example/MotionPath/rotate-object-with-path",
+      "path": "/docs/components/MotionPath/rotate-object-with-path",
       "lineNumber": 39,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "rotate-object-with-path",
       "component": "MotionPath",
-      "path": "/example/MotionPath/rotate-object-with-path",
+      "path": "/docs/components/MotionPath/rotate-object-with-path",
       "lineNumber": 40,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "sync-with-draw",
       "component": "MotionPath",
-      "path": "/example/MotionPath/sync-with-draw",
+      "path": "/docs/components/MotionPath/sync-with-draw",
       "lineNumber": 39,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "sync-with-draw",
       "component": "MotionPath",
-      "path": "/example/MotionPath/sync-with-draw",
+      "path": "/docs/components/MotionPath/sync-with-draw",
       "lineNumber": 40,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "basic",
       "component": "Point",
-      "path": "/example/Point/basic",
+      "path": "/docs/components/Point/basic",
       "lineNumber": 19,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "basic",
       "component": "Point",
-      "path": "/example/Point/basic",
+      "path": "/docs/components/Point/basic",
       "lineNumber": 20,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "basic",
       "component": "Points",
-      "path": "/example/Points/basic",
+      "path": "/docs/components/Points/basic",
       "lineNumber": 12,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "basic",
       "component": "Points",
-      "path": "/example/Points/basic",
+      "path": "/docs/components/Points/basic",
       "lineNumber": 13,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "color-via-scale",
       "component": "Points",
-      "path": "/example/Points/color-via-scale",
+      "path": "/docs/components/Points/color-via-scale",
       "lineNumber": 25,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "color-via-scale",
       "component": "Points",
-      "path": "/example/Points/color-via-scale",
+      "path": "/docs/components/Points/color-via-scale",
       "lineNumber": 26,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "with-labels",
       "component": "Points",
-      "path": "/example/Points/with-labels",
+      "path": "/docs/components/Points/with-labels",
       "lineNumber": 12,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "with-labels",
       "component": "Points",
-      "path": "/example/Points/with-labels",
+      "path": "/docs/components/Points/with-labels",
       "lineNumber": 13,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "with-tooltip-and-highlight",
       "component": "Points",
-      "path": "/example/Points/with-tooltip-and-highlight",
+      "path": "/docs/components/Points/with-tooltip-and-highlight",
       "lineNumber": 21,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "with-tooltip-and-highlight",
       "component": "Points",
-      "path": "/example/Points/with-tooltip-and-highlight",
+      "path": "/docs/components/Points/with-tooltip-and-highlight",
       "lineNumber": 22,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "styling-using-attributes",
       "component": "Rect",
-      "path": "/example/Rect/styling-using-attributes",
+      "path": "/docs/components/Rect/styling-using-attributes",
       "lineNumber": 12,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "styling-using-attributes",
       "component": "Rect",
-      "path": "/example/Rect/styling-using-attributes",
+      "path": "/docs/components/Rect/styling-using-attributes",
       "lineNumber": 13,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "styling-using-classes",
       "component": "Rect",
-      "path": "/example/Rect/styling-using-classes",
+      "path": "/docs/components/Rect/styling-using-classes",
       "lineNumber": 12,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "styling-using-classes",
       "component": "Rect",
-      "path": "/example/Rect/styling-using-classes",
+      "path": "/docs/components/Rect/styling-using-classes",
       "lineNumber": 13,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "styling-using-css-variables",
       "component": "Rect",
-      "path": "/example/Rect/styling-using-css-variables",
+      "path": "/docs/components/Rect/styling-using-css-variables",
       "lineNumber": 12,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "styling-using-css-variables",
       "component": "Rect",
-      "path": "/example/Rect/styling-using-css-variables",
+      "path": "/docs/components/Rect/styling-using-css-variables",
       "lineNumber": 13,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "annotation-x",
       "component": "Rule",
-      "path": "/example/Rule/annotation-x",
+      "path": "/docs/components/Rule/annotation-x",
       "lineNumber": 7,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "annotation-x",
       "component": "Rule",
-      "path": "/example/Rule/annotation-x",
+      "path": "/docs/components/Rule/annotation-x",
       "lineNumber": 8,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "annotation-y",
       "component": "Rule",
-      "path": "/example/Rule/annotation-y",
+      "path": "/docs/components/Rule/annotation-y",
       "lineNumber": 7,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "annotation-y",
       "component": "Rule",
-      "path": "/example/Rule/annotation-y",
+      "path": "/docs/components/Rule/annotation-y",
       "lineNumber": 8,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "baseline-top-right",
       "component": "Rule",
-      "path": "/example/Rule/baseline-top-right",
+      "path": "/docs/components/Rule/baseline-top-right",
       "lineNumber": 7,
       "line": "<Axis placement=\"top\" />"
     },
     {
       "example": "baseline-top-right",
       "component": "Rule",
-      "path": "/example/Rule/baseline-top-right",
+      "path": "/docs/components/Rule/baseline-top-right",
       "lineNumber": 8,
       "line": "<Axis placement=\"right\" />"
     },
     {
       "example": "baseline-x-negative",
       "component": "Rule",
-      "path": "/example/Rule/baseline-x-negative",
+      "path": "/docs/components/Rule/baseline-x-negative",
       "lineNumber": 7,
       "line": "<Axis placement=\"bottom\" />"
     },
     {
       "example": "baseline-x-negative",
       "component": "Rule",
-      "path": "/example/Rule/baseline-x-negative",
+      "path": "/docs/components/Rule/baseline-x-negative",
       "lineNumber": 8,
       "line": "<Axis placement=\"left\" />"
     },
     {
       "example": "baseline-x-y",
       "component": "Rule",
-      "path": "/example/Rule/baseline-x-y",
+      "path": "/docs/components/Rule/baseline-x-y",
       "lineNumber": 7,
       "line": "<Axis placement=\"bottom\" />"
     },
     {
       "example": "baseline-x-y",
       "component": "Rule",
-      "path": "/example/Rule/baseline-x-y",
+      "path": "/docs/components/Rule/baseline-x-y",
       "lineNumber": 8,
       "line": "<Axis placement=\"left\" />"
     },
     {
       "example": "baseline-y-negative",
       "component": "Rule",
-      "path": "/example/Rule/baseline-y-negative",
+      "path": "/docs/components/Rule/baseline-y-negative",
       "lineNumber": 7,
       "line": "<Axis placement=\"bottom\" />"
     },
     {
       "example": "baseline-y-negative",
       "component": "Rule",
-      "path": "/example/Rule/baseline-y-negative",
+      "path": "/docs/components/Rule/baseline-y-negative",
       "lineNumber": 8,
       "line": "<Axis placement=\"left\" />"
     },
     {
       "example": "candlestick",
       "component": "Rule",
-      "path": "/example/Rule/candlestick",
+      "path": "/docs/components/Rule/candlestick",
       "lineNumber": 25,
       "line": "<Axis placement=\"left\" grid rule tickSpacing={20} />"
     },
     {
       "example": "candlestick",
       "component": "Rule",
-      "path": "/example/Rule/candlestick",
+      "path": "/docs/components/Rule/candlestick",
       "lineNumber": 26,
       "line": "<Axis placement=\"bottom\" rule tickMultiline />"
     },
     {
       "example": "candlestick-open-close-line-color",
       "component": "Rule",
-      "path": "/example/Rule/candlestick-open-close-line-color",
+      "path": "/docs/components/Rule/candlestick-open-close-line-color",
       "lineNumber": 25,
       "line": "<Axis placement=\"left\" grid rule tickSpacing={20} />"
     },
     {
       "example": "candlestick-open-close-line-color",
       "component": "Rule",
-      "path": "/example/Rule/candlestick-open-close-line-color",
+      "path": "/docs/components/Rule/candlestick-open-close-line-color",
       "lineNumber": 26,
       "line": "<Axis placement=\"bottom\" rule tickMultiline />"
     },
     {
       "example": "candlestick-with-brushing",
       "component": "Rule",
-      "path": "/example/Rule/candlestick-with-brushing",
+      "path": "/docs/components/Rule/candlestick-with-brushing",
       "lineNumber": 33,
       "line": "<Axis placement=\"left\" grid rule tickSpacing={20} />"
     },
     {
       "example": "candlestick-with-brushing",
       "component": "Rule",
-      "path": "/example/Rule/candlestick-with-brushing",
+      "path": "/docs/components/Rule/candlestick-with-brushing",
       "lineNumber": 34,
       "line": "<Axis placement=\"bottom\" rule tickMultiline />"
     },
     {
       "example": "data-x-band",
       "component": "Rule",
-      "path": "/example/Rule/data-x-band",
+      "path": "/docs/components/Rule/data-x-band",
       "lineNumber": 42,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "data-x-band",
       "component": "Rule",
-      "path": "/example/Rule/data-x-band",
+      "path": "/docs/components/Rule/data-x-band",
       "lineNumber": 43,
       "line": "<Axis placement=\"left\" />"
     },
     {
       "example": "data-x-date",
       "component": "Rule",
-      "path": "/example/Rule/data-x-date",
+      "path": "/docs/components/Rule/data-x-date",
       "lineNumber": 12,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "data-x-date",
       "component": "Rule",
-      "path": "/example/Rule/data-x-date",
+      "path": "/docs/components/Rule/data-x-date",
       "lineNumber": 13,
       "line": "<Axis placement=\"left\" />"
     },
     {
       "example": "data-x-range",
       "component": "Rule",
-      "path": "/example/Rule/data-x-range",
+      "path": "/docs/components/Rule/data-x-range",
       "lineNumber": 18,
       "line": "<Axis placement=\"bottom\" />"
     },
     {
       "example": "data-x-range",
       "component": "Rule",
-      "path": "/example/Rule/data-x-range",
+      "path": "/docs/components/Rule/data-x-range",
       "lineNumber": 19,
       "line": "<Axis placement=\"left\" rule />"
     },
     {
       "example": "data-y-range",
       "component": "Rule",
-      "path": "/example/Rule/data-y-range",
+      "path": "/docs/components/Rule/data-y-range",
       "lineNumber": 12,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "data-y-range",
       "component": "Rule",
-      "path": "/example/Rule/data-y-range",
+      "path": "/docs/components/Rule/data-y-range",
       "lineNumber": 13,
       "line": "<Axis placement=\"left\" />"
     },
     {
       "example": "lollipop",
       "component": "Rule",
-      "path": "/example/Rule/lollipop",
+      "path": "/docs/components/Rule/lollipop",
       "lineNumber": 22,
       "line": "<Axis placement=\"left\" grid rule format=\"percentRound\" />"
     },
     {
       "example": "lollipop",
       "component": "Rule",
-      "path": "/example/Rule/lollipop",
+      "path": "/docs/components/Rule/lollipop",
       "lineNumber": 23,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "custom",
       "component": "ScatterChart",
-      "path": "/example/ScatterChart/custom",
+      "path": "/docs/components/ScatterChart/custom",
       "lineNumber": 13,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "custom",
       "component": "ScatterChart",
-      "path": "/example/ScatterChart/custom",
+      "path": "/docs/components/ScatterChart/custom",
       "lineNumber": 14,
       "line": "<Axis placement=\"bottom\" grid rule />"
     },
     {
       "example": "basic",
       "component": "Spline",
-      "path": "/example/Spline/basic",
+      "path": "/docs/components/Spline/basic",
       "lineNumber": 12,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "basic",
       "component": "Spline",
-      "path": "/example/Spline/basic",
+      "path": "/docs/components/Spline/basic",
       "lineNumber": 13,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "basic-start-and-end-snippets",
       "component": "Spline",
-      "path": "/example/Spline/basic-start-and-end-snippets",
+      "path": "/docs/components/Spline/basic-start-and-end-snippets",
       "lineNumber": 33,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "basic-start-and-end-snippets",
       "component": "Spline",
-      "path": "/example/Spline/basic-start-and-end-snippets",
+      "path": "/docs/components/Spline/basic-start-and-end-snippets",
       "lineNumber": 34,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "draw",
       "component": "Spline",
-      "path": "/example/Spline/draw",
+      "path": "/docs/components/Spline/draw",
       "lineNumber": 33,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "draw",
       "component": "Spline",
-      "path": "/example/Spline/draw",
+      "path": "/docs/components/Spline/draw",
       "lineNumber": 34,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "end-slot-with-draw-with-value",
       "component": "Spline",
-      "path": "/example/Spline/end-slot-with-draw-with-value",
+      "path": "/docs/components/Spline/end-slot-with-draw-with-value",
       "lineNumber": 34,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "end-slot-with-draw-with-value",
       "component": "Spline",
-      "path": "/example/Spline/end-slot-with-draw-with-value",
+      "path": "/docs/components/Spline/end-slot-with-draw-with-value",
       "lineNumber": 35,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "end-snippet-with-draw",
       "component": "Spline",
-      "path": "/example/Spline/end-snippet-with-draw",
+      "path": "/docs/components/Spline/end-snippet-with-draw",
       "lineNumber": 33,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "end-snippet-with-draw",
       "component": "Spline",
-      "path": "/example/Spline/end-snippet-with-draw",
+      "path": "/docs/components/Spline/end-snippet-with-draw",
       "lineNumber": 34,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "gradient-encoding",
       "component": "Spline",
-      "path": "/example/Spline/gradient-encoding",
+      "path": "/docs/components/Spline/gradient-encoding",
       "lineNumber": 20,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "gradient-encoding",
       "component": "Spline",
-      "path": "/example/Spline/gradient-encoding",
+      "path": "/docs/components/Spline/gradient-encoding",
       "lineNumber": 21,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "gradient-threshold",
       "component": "Spline",
-      "path": "/example/Spline/gradient-threshold",
+      "path": "/docs/components/Spline/gradient-threshold",
       "lineNumber": 15,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "gradient-threshold",
       "component": "Spline",
-      "path": "/example/Spline/gradient-threshold",
+      "path": "/docs/components/Spline/gradient-threshold",
       "lineNumber": 16,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "label-using-start-end-snippets",
       "component": "Spline",
-      "path": "/example/Spline/label-using-start-end-snippets",
+      "path": "/docs/components/Spline/label-using-start-end-snippets",
       "lineNumber": 33,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "label-using-start-end-snippets",
       "component": "Spline",
-      "path": "/example/Spline/label-using-start-end-snippets",
+      "path": "/docs/components/Spline/label-using-start-end-snippets",
       "lineNumber": 34,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "markers-arrows",
       "component": "Spline",
-      "path": "/example/Spline/markers-arrows",
+      "path": "/docs/components/Spline/markers-arrows",
       "lineNumber": 33,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "markers-arrows",
       "component": "Spline",
-      "path": "/example/Spline/markers-arrows",
+      "path": "/docs/components/Spline/markers-arrows",
       "lineNumber": 34,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "multiple-series",
       "component": "Spline",
-      "path": "/example/Spline/multiple-series",
+      "path": "/docs/components/Spline/multiple-series",
       "lineNumber": 51,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "multiple-series",
       "component": "Spline",
-      "path": "/example/Spline/multiple-series",
+      "path": "/docs/components/Spline/multiple-series",
       "lineNumber": 52,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "multiple-series-highlight-on-hover",
       "component": "Spline",
-      "path": "/example/Spline/multiple-series-highlight-on-hover",
+      "path": "/docs/components/Spline/multiple-series-highlight-on-hover",
       "lineNumber": 52,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "multiple-series-highlight-on-hover",
       "component": "Spline",
-      "path": "/example/Spline/multiple-series-highlight-on-hover",
+      "path": "/docs/components/Spline/multiple-series-highlight-on-hover",
       "lineNumber": 53,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "multiple-series-using-overrides",
       "component": "Spline",
-      "path": "/example/Spline/multiple-series-using-overrides",
+      "path": "/docs/components/Spline/multiple-series-using-overrides",
       "lineNumber": 29,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "multiple-series-using-overrides",
       "component": "Spline",
-      "path": "/example/Spline/multiple-series-using-overrides",
+      "path": "/docs/components/Spline/multiple-series-using-overrides",
       "lineNumber": 30,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "multiple-series-with-labels",
       "component": "Spline",
-      "path": "/example/Spline/multiple-series-with-labels",
+      "path": "/docs/components/Spline/multiple-series-with-labels",
       "lineNumber": 41,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "multiple-series-with-labels",
       "component": "Spline",
-      "path": "/example/Spline/multiple-series-with-labels",
+      "path": "/docs/components/Spline/multiple-series-with-labels",
       "lineNumber": 42,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "playground",
       "component": "Spline",
-      "path": "/example/Spline/playground",
+      "path": "/docs/components/Spline/playground",
       "lineNumber": 35,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "playground",
       "component": "Spline",
-      "path": "/example/Spline/playground",
+      "path": "/docs/components/Spline/playground",
       "lineNumber": 36,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "radial-line-with-areas",
       "component": "Spline",
-      "path": "/example/Spline/radial-line-with-areas",
+      "path": "/docs/components/Spline/radial-line-with-areas",
       "lineNumber": 36,
       "line": "<Axis placement=\"angle\" grid tickLength={0} format={'month'} />"
     },
     {
       "example": "radial-line-with-areas",
       "component": "Spline",
-      "path": "/example/Spline/radial-line-with-areas",
+      "path": "/docs/components/Spline/radial-line-with-areas",
       "lineNumber": 37,
       "line": "<Axis"
     },
     {
       "example": "radial-multi-year-lines",
       "component": "Spline",
-      "path": "/example/Spline/radial-multi-year-lines",
+      "path": "/docs/components/Spline/radial-multi-year-lines",
       "lineNumber": 43,
       "line": "<Axis placement=\"angle\" tickLength={0} grid format={'month'} />"
     },
     {
       "example": "radial-multi-year-lines",
       "component": "Spline",
-      "path": "/example/Spline/radial-multi-year-lines",
+      "path": "/docs/components/Spline/radial-multi-year-lines",
       "lineNumber": 44,
       "line": "<Axis"
     },
     {
       "example": "radial-radar",
       "component": "Spline",
-      "path": "/example/Spline/radial-radar",
+      "path": "/docs/components/Spline/radial-radar",
       "lineNumber": 31,
       "line": "<Axis"
     },
     {
       "example": "radial-radar",
       "component": "Spline",
-      "path": "/example/Spline/radial-radar",
+      "path": "/docs/components/Spline/radial-radar",
       "lineNumber": 37,
       "line": "<Axis placement=\"angle\" grid={{ class: 'stroke-surface-content/20' }} />"
     },
     {
       "example": "tweened",
       "component": "Spline",
-      "path": "/example/Spline/tweened",
+      "path": "/docs/components/Spline/tweened",
       "lineNumber": 33,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "tweened",
       "component": "Spline",
-      "path": "/example/Spline/tweened",
+      "path": "/docs/components/Spline/tweened",
       "lineNumber": 34,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "vertical",
       "component": "Spline",
-      "path": "/example/Spline/vertical",
+      "path": "/docs/components/Spline/vertical",
       "lineNumber": 22,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "vertical",
       "component": "Spline",
-      "path": "/example/Spline/vertical",
+      "path": "/docs/components/Spline/vertical",
       "lineNumber": 23,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "with-labels",
       "component": "Spline",
-      "path": "/example/Spline/with-labels",
+      "path": "/docs/components/Spline/with-labels",
       "lineNumber": 12,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "with-labels",
       "component": "Spline",
-      "path": "/example/Spline/with-labels",
+      "path": "/docs/components/Spline/with-labels",
       "lineNumber": 13,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "with-tooltip-and-highlight",
       "component": "Spline",
-      "path": "/example/Spline/with-tooltip-and-highlight",
+      "path": "/docs/components/Spline/with-tooltip-and-highlight",
       "lineNumber": 21,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "with-tooltip-and-highlight",
       "component": "Spline",
-      "path": "/example/Spline/with-tooltip-and-highlight",
+      "path": "/docs/components/Spline/with-tooltip-and-highlight",
       "lineNumber": 22,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "anchor-location",
       "component": "Tooltip",
-      "path": "/example/Tooltip/anchor-location",
+      "path": "/docs/components/Tooltip/anchor-location",
       "lineNumber": 37,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "anchor-location",
       "component": "Tooltip",
-      "path": "/example/Tooltip/anchor-location",
+      "path": "/docs/components/Tooltip/anchor-location",
       "lineNumber": 38,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "area",
       "component": "Tooltip",
-      "path": "/example/Tooltip/area",
+      "path": "/docs/components/Tooltip/area",
       "lineNumber": 40,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "area",
       "component": "Tooltip",
-      "path": "/example/Tooltip/area",
+      "path": "/docs/components/Tooltip/area",
       "lineNumber": 41,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "basic",
       "component": "Tooltip",
-      "path": "/example/Tooltip/basic",
+      "path": "/docs/components/Tooltip/basic",
       "lineNumber": 27,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "basic",
       "component": "Tooltip",
-      "path": "/example/Tooltip/basic",
+      "path": "/docs/components/Tooltip/basic",
       "lineNumber": 28,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "color-swatch",
       "component": "Tooltip",
-      "path": "/example/Tooltip/color-swatch",
+      "path": "/docs/components/Tooltip/color-swatch",
       "lineNumber": 27,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "color-swatch",
       "component": "Tooltip",
-      "path": "/example/Tooltip/color-swatch",
+      "path": "/docs/components/Tooltip/color-swatch",
       "lineNumber": 28,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "color-swatch-using-theme",
       "component": "Tooltip",
-      "path": "/example/Tooltip/color-swatch-using-theme",
+      "path": "/docs/components/Tooltip/color-swatch-using-theme",
       "lineNumber": 27,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "color-swatch-using-theme",
       "component": "Tooltip",
-      "path": "/example/Tooltip/color-swatch-using-theme",
+      "path": "/docs/components/Tooltip/color-swatch-using-theme",
       "lineNumber": 28,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "custom-content",
       "component": "Tooltip",
-      "path": "/example/Tooltip/custom-content",
+      "path": "/docs/components/Tooltip/custom-content",
       "lineNumber": 27,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "custom-content",
       "component": "Tooltip",
-      "path": "/example/Tooltip/custom-content",
+      "path": "/docs/components/Tooltip/custom-content",
       "lineNumber": 28,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "data-snapping",
       "component": "Tooltip",
-      "path": "/example/Tooltip/data-snapping",
+      "path": "/docs/components/Tooltip/data-snapping",
       "lineNumber": 27,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "data-snapping",
       "component": "Tooltip",
-      "path": "/example/Tooltip/data-snapping",
+      "path": "/docs/components/Tooltip/data-snapping",
       "lineNumber": 28,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "default-mouse-position-with-offset",
       "component": "Tooltip",
-      "path": "/example/Tooltip/default-mouse-position-with-offset",
+      "path": "/docs/components/Tooltip/default-mouse-position-with-offset",
       "lineNumber": 27,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "default-mouse-position-with-offset",
       "component": "Tooltip",
-      "path": "/example/Tooltip/default-mouse-position-with-offset",
+      "path": "/docs/components/Tooltip/default-mouse-position-with-offset",
       "lineNumber": 28,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "disable-motion",
       "component": "Tooltip",
-      "path": "/example/Tooltip/disable-motion",
+      "path": "/docs/components/Tooltip/disable-motion",
       "lineNumber": 27,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "disable-motion",
       "component": "Tooltip",
-      "path": "/example/Tooltip/disable-motion",
+      "path": "/docs/components/Tooltip/disable-motion",
       "lineNumber": 28,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "duration",
       "component": "Tooltip",
-      "path": "/example/Tooltip/duration",
+      "path": "/docs/components/Tooltip/duration",
       "lineNumber": 51,
       "line": "<Axis placement=\"left\" grid={{ style: 'stroke-dasharray: 2' }} rule />"
     },
     {
       "example": "duration",
       "component": "Tooltip",
-      "path": "/example/Tooltip/duration",
+      "path": "/docs/components/Tooltip/duration",
       "lineNumber": 52,
       "line": "<Axis placement=\"bottom\" />"
     },
     {
       "example": "externally-access-tooltip-data",
       "component": "Tooltip",
-      "path": "/example/Tooltip/externally-access-tooltip-data",
+      "path": "/docs/components/Tooltip/externally-access-tooltip-data",
       "lineNumber": 51,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "externally-access-tooltip-data",
       "component": "Tooltip",
-      "path": "/example/Tooltip/externally-access-tooltip-data",
+      "path": "/docs/components/Tooltip/externally-access-tooltip-data",
       "lineNumber": 52,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "invert-variant",
       "component": "Tooltip",
-      "path": "/example/Tooltip/invert-variant",
+      "path": "/docs/components/Tooltip/invert-variant",
       "lineNumber": 27,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "invert-variant",
       "component": "Tooltip",
-      "path": "/example/Tooltip/invert-variant",
+      "path": "/docs/components/Tooltip/invert-variant",
       "lineNumber": 28,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "multiple-overlapping-bars",
       "component": "Tooltip",
-      "path": "/example/Tooltip/multiple-overlapping-bars",
+      "path": "/docs/components/Tooltip/multiple-overlapping-bars",
       "lineNumber": 48,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "multiple-overlapping-bars",
       "component": "Tooltip",
-      "path": "/example/Tooltip/multiple-overlapping-bars",
+      "path": "/docs/components/Tooltip/multiple-overlapping-bars",
       "lineNumber": 49,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "multiple-overlapping-durations",
       "component": "Tooltip",
-      "path": "/example/Tooltip/multiple-overlapping-durations",
+      "path": "/docs/components/Tooltip/multiple-overlapping-durations",
       "lineNumber": 50,
       "line": "<Axis placement=\"left\" grid={{ style: 'stroke-dasharray: 2' }} rule />"
     },
     {
       "example": "multiple-overlapping-durations",
       "component": "Tooltip",
-      "path": "/example/Tooltip/multiple-overlapping-durations",
+      "path": "/docs/components/Tooltip/multiple-overlapping-durations",
       "lineNumber": 51,
       "line": "<Axis placement=\"bottom\" />"
     },
     {
       "example": "multiple-tooltips-with-fixed-single-axis",
       "component": "Tooltip",
-      "path": "/example/Tooltip/multiple-tooltips-with-fixed-single-axis",
+      "path": "/docs/components/Tooltip/multiple-tooltips-with-fixed-single-axis",
       "lineNumber": 29,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "multiple-tooltips-with-fixed-single-axis",
       "component": "Tooltip",
-      "path": "/example/Tooltip/multiple-tooltips-with-fixed-single-axis",
+      "path": "/docs/components/Tooltip/multiple-tooltips-with-fixed-single-axis",
       "lineNumber": 30,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "multiple-tooltips-with-fixed-single-axis-scaleband",
       "component": "Tooltip",
-      "path": "/example/Tooltip/multiple-tooltips-with-fixed-single-axis-scaleband",
+      "path": "/docs/components/Tooltip/multiple-tooltips-with-fixed-single-axis-scaleband",
       "lineNumber": 32,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "multiple-tooltips-with-fixed-single-axis-scaleband",
       "component": "Tooltip",
-      "path": "/example/Tooltip/multiple-tooltips-with-fixed-single-axis-scaleband",
+      "path": "/docs/components/Tooltip/multiple-tooltips-with-fixed-single-axis-scaleband",
       "lineNumber": 33,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "scatter-plot",
       "component": "Tooltip",
-      "path": "/example/Tooltip/scatter-plot",
+      "path": "/docs/components/Tooltip/scatter-plot",
       "lineNumber": 37,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "scatter-plot",
       "component": "Tooltip",
-      "path": "/example/Tooltip/scatter-plot",
+      "path": "/docs/components/Tooltip/scatter-plot",
       "lineNumber": 38,
       "line": "<Axis placement=\"bottom\" grid rule />"
     },
     {
       "example": "simple-bars",
       "component": "Tooltip",
-      "path": "/example/Tooltip/simple-bars",
+      "path": "/docs/components/Tooltip/simple-bars",
       "lineNumber": 45,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "simple-bars",
       "component": "Tooltip",
-      "path": "/example/Tooltip/simple-bars",
+      "path": "/docs/components/Tooltip/simple-bars",
       "lineNumber": 46,
       "line": "<Axis placement=\"bottom\" rule />"
     },
     {
       "example": "single-date-time",
       "component": "Tooltip",
-      "path": "/example/Tooltip/single-date-time",
+      "path": "/docs/components/Tooltip/single-date-time",
       "lineNumber": 40,
       "line": "<Axis placement=\"left\" grid={{ style: 'stroke-dasharray: 2' }} rule />"
     },
     {
       "example": "single-date-time",
       "component": "Tooltip",
-      "path": "/example/Tooltip/single-date-time",
+      "path": "/docs/components/Tooltip/single-date-time",
       "lineNumber": 41,
       "line": "<Axis placement=\"bottom\" />"
     },
     {
       "example": "stacked-area",
       "component": "Tooltip",
-      "path": "/example/Tooltip/stacked-area",
+      "path": "/docs/components/Tooltip/stacked-area",
       "lineNumber": 58,
       "line": "<Axis placement=\"left\" grid rule />"
     },
     {
       "example": "stacked-area",
       "component": "Tooltip",
-      "path": "/example/Tooltip/stacked-area",
+      "path": "/docs/components/Tooltip/stacked-area",
       "lineNumber": 59,
       "line": "<Axis placement=\"bottom\" rule />"
     }
   ],
-  "updatedAt": "2026-01-25T21:44:17.452Z"
+  "updatedAt": "2026-02-07T20:21:31.307Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Bar.json b/docs/src/examples/catalog/Bar.json
index 3ef53f575..2c33c3c6e 100644
--- a/docs/src/examples/catalog/Bar.json
+++ b/docs/src/examples/catalog/Bar.json
@@ -5,66 +5,66 @@
     {
       "example": "horizontal-customize-individual-styles",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-customize-individual-styles",
+      "path": "/docs/components/Bars/horizontal-customize-individual-styles",
       "lineNumber": 32,
       "line": "<Bar"
     },
     {
       "example": "horizontal-grouped-stacked-or-both-transition",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-grouped-stacked-or-both-transition",
+      "path": "/docs/components/Bars/horizontal-grouped-stacked-or-both-transition",
       "lineNumber": 86,
       "line": "<Bar"
     },
     {
       "example": "horizontal-stagger-tween-on-mount",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-stagger-tween-on-mount",
+      "path": "/docs/components/Bars/horizontal-stagger-tween-on-mount",
       "lineNumber": 38,
       "line": "<Bar"
     },
     {
       "example": "horizontal-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
+      "path": "/docs/components/Bars/horizontal-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
       "lineNumber": 83,
       "line": "<Bar"
     },
     {
       "example": "vertical-customize-individual-styles",
       "component": "Bars",
-      "path": "/example/Bars/vertical-customize-individual-styles",
+      "path": "/docs/components/Bars/vertical-customize-individual-styles",
       "lineNumber": 29,
       "line": "<Bar"
     },
     {
       "example": "vertical-grouped-stacked-or-both-transition",
       "component": "Bars",
-      "path": "/example/Bars/vertical-grouped-stacked-or-both-transition",
+      "path": "/docs/components/Bars/vertical-grouped-stacked-or-both-transition",
       "lineNumber": 81,
       "line": "<Bar"
     },
     {
       "example": "vertical-stagger-tween-on-mount",
       "component": "Bars",
-      "path": "/example/Bars/vertical-stagger-tween-on-mount",
+      "path": "/docs/components/Bars/vertical-stagger-tween-on-mount",
       "lineNumber": 35,
       "line": "<Bar"
     },
     {
       "example": "vertical-stagger-tween-on-mount-rounded-edge",
       "component": "Bars",
-      "path": "/example/Bars/vertical-stagger-tween-on-mount-rounded-edge",
+      "path": "/docs/components/Bars/vertical-stagger-tween-on-mount-rounded-edge",
       "lineNumber": 35,
       "line": "<Bar"
     },
     {
       "example": "vertical-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
+      "path": "/docs/components/Bars/vertical-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
       "lineNumber": 83,
       "line": "<Bar"
     }
   ],
-  "updatedAt": "2025-12-29T21:36:44.348Z"
+  "updatedAt": "2026-02-07T17:00:30.734Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/BarChart.json b/docs/src/examples/catalog/BarChart.json
index 8b744dc79..8ae3744cd 100644
--- a/docs/src/examples/catalog/BarChart.json
+++ b/docs/src/examples/catalog/BarChart.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "axis-labels-inside-bars",
-      "path": "/example/BarChart/axis-labels-inside-bars",
+      "title": "axis labels inside bars",
+      "path": "/docs/components/BarChart/axis-labels-inside-bars",
       "components": [
         {
           "component": "BarChart",
@@ -14,7 +15,8 @@
     },
     {
       "name": "axis-labels-inside-bars-using-labels",
-      "path": "/example/BarChart/axis-labels-inside-bars-using-labels",
+      "title": "axis labels inside bars using labels",
+      "path": "/docs/components/BarChart/axis-labels-inside-bars-using-labels",
       "components": [
         {
           "component": "BarChart",
@@ -30,7 +32,8 @@
     },
     {
       "name": "both-axis-grid",
-      "path": "/example/BarChart/both-axis-grid",
+      "title": "both axis grid",
+      "path": "/docs/components/BarChart/both-axis-grid",
       "components": [
         {
           "component": "BarChart",
@@ -41,7 +44,8 @@
     },
     {
       "name": "both-axis-grid-align-between",
-      "path": "/example/BarChart/both-axis-grid-align-between",
+      "title": "both axis grid align between",
+      "path": "/docs/components/BarChart/both-axis-grid-align-between",
       "components": [
         {
           "component": "BarChart",
@@ -52,7 +56,8 @@
     },
     {
       "name": "brushing",
-      "path": "/example/BarChart/brushing",
+      "title": "brushing",
+      "path": "/docs/components/BarChart/brushing",
       "components": [
         {
           "component": "BarChart",
@@ -63,7 +68,8 @@
     },
     {
       "name": "color-bars-class",
-      "path": "/example/BarChart/color-bars-class",
+      "title": "color bars class",
+      "path": "/docs/components/BarChart/color-bars-class",
       "components": [
         {
           "component": "BarChart",
@@ -74,7 +80,8 @@
     },
     {
       "name": "color-per-value",
-      "path": "/example/BarChart/color-per-value",
+      "title": "color per value",
+      "path": "/docs/components/BarChart/color-per-value",
       "components": [
         {
           "component": "BarChart",
@@ -85,7 +92,8 @@
     },
     {
       "name": "color-threshold",
-      "path": "/example/BarChart/color-threshold",
+      "title": "color threshold",
+      "path": "/docs/components/BarChart/color-threshold",
       "components": [
         {
           "component": "BarChart",
@@ -96,7 +104,8 @@
     },
     {
       "name": "color-using-scale",
-      "path": "/example/BarChart/color-using-scale",
+      "title": "color using scale",
+      "path": "/docs/components/BarChart/color-using-scale",
       "components": [
         {
           "component": "BarChart",
@@ -107,7 +116,8 @@
     },
     {
       "name": "custom-chart",
-      "path": "/example/BarChart/custom-chart",
+      "title": "custom chart",
+      "path": "/docs/components/BarChart/custom-chart",
       "components": [
         {
           "component": "BarChart",
@@ -143,7 +153,8 @@
     },
     {
       "name": "custom-tooltip",
-      "path": "/example/BarChart/custom-tooltip",
+      "title": "custom tooltip",
+      "path": "/docs/components/BarChart/custom-tooltip",
       "components": [
         {
           "component": "BarChart",
@@ -159,7 +170,8 @@
     },
     {
       "name": "duration",
-      "path": "/example/BarChart/duration",
+      "title": "duration",
+      "path": "/docs/components/BarChart/duration",
       "components": [
         {
           "component": "BarChart",
@@ -175,7 +187,8 @@
     },
     {
       "name": "duration-bars",
-      "path": "/example/BarChart/duration-bars",
+      "title": "duration bars",
+      "path": "/docs/components/BarChart/duration-bars",
       "components": [
         {
           "component": "BarChart",
@@ -191,7 +204,8 @@
     },
     {
       "name": "duration-bars-color",
-      "path": "/example/BarChart/duration-bars-color",
+      "title": "duration bars color",
+      "path": "/docs/components/BarChart/duration-bars-color",
       "components": [
         {
           "component": "BarChart",
@@ -207,7 +221,8 @@
     },
     {
       "name": "duration-bars-dense",
-      "path": "/example/BarChart/duration-bars-dense",
+      "title": "duration bars dense",
+      "path": "/docs/components/BarChart/duration-bars-dense",
       "components": [
         {
           "component": "BarChart",
@@ -223,7 +238,8 @@
     },
     {
       "name": "duration-bars-dense-lanes",
-      "path": "/example/BarChart/duration-bars-dense-lanes",
+      "title": "duration bars dense lanes",
+      "path": "/docs/components/BarChart/duration-bars-dense-lanes",
       "components": [
         {
           "component": "BarChart",
@@ -239,7 +255,8 @@
     },
     {
       "name": "duration-bars-lanes",
-      "path": "/example/BarChart/duration-bars-lanes",
+      "title": "duration bars lanes",
+      "path": "/docs/components/BarChart/duration-bars-lanes",
       "components": [
         {
           "component": "BarChart",
@@ -255,7 +272,8 @@
     },
     {
       "name": "duration-civilization-timeline",
-      "path": "/example/BarChart/duration-civilization-timeline",
+      "title": "duration civilization timeline",
+      "path": "/docs/components/BarChart/duration-civilization-timeline",
       "components": [
         {
           "component": "BarChart",
@@ -271,7 +289,8 @@
     },
     {
       "name": "duration-civilization-timeline-dense",
-      "path": "/example/BarChart/duration-civilization-timeline-dense",
+      "title": "duration civilization timeline dense",
+      "path": "/docs/components/BarChart/duration-civilization-timeline-dense",
       "components": [
         {
           "component": "BarChart",
@@ -287,7 +306,8 @@
     },
     {
       "name": "duration-points",
-      "path": "/example/BarChart/duration-points",
+      "title": "duration points",
+      "path": "/docs/components/BarChart/duration-points",
       "components": [
         {
           "component": "BarChart",
@@ -313,7 +333,8 @@
     },
     {
       "name": "duration-points-color",
-      "path": "/example/BarChart/duration-points-color",
+      "title": "duration points color",
+      "path": "/docs/components/BarChart/duration-points-color",
       "components": [
         {
           "component": "BarChart",
@@ -339,7 +360,8 @@
     },
     {
       "name": "dynamic-height",
-      "path": "/example/BarChart/dynamic-height",
+      "title": "dynamic height",
+      "path": "/docs/components/BarChart/dynamic-height",
       "components": [
         {
           "component": "BarChart",
@@ -350,7 +372,8 @@
     },
     {
       "name": "gradient",
-      "path": "/example/BarChart/gradient",
+      "title": "gradient",
+      "path": "/docs/components/BarChart/gradient",
       "components": [
         {
           "component": "BarChart",
@@ -371,7 +394,8 @@
     },
     {
       "name": "group-series",
-      "path": "/example/BarChart/group-series",
+      "title": "group series",
+      "path": "/docs/components/BarChart/group-series",
       "components": [
         {
           "component": "BarChart",
@@ -382,7 +406,8 @@
     },
     {
       "name": "group-series-bar-click",
-      "path": "/example/BarChart/group-series-bar-click",
+      "title": "group series bar click",
+      "path": "/docs/components/BarChart/group-series-bar-click",
       "components": [
         {
           "component": "BarChart",
@@ -393,7 +418,8 @@
     },
     {
       "name": "group-series-horizontal",
-      "path": "/example/BarChart/group-series-horizontal",
+      "title": "group series horizontal",
+      "path": "/docs/components/BarChart/group-series-horizontal",
       "components": [
         {
           "component": "BarChart",
@@ -404,7 +430,8 @@
     },
     {
       "name": "group-series-labels",
-      "path": "/example/BarChart/group-series-labels",
+      "title": "group series labels",
+      "path": "/docs/components/BarChart/group-series-labels",
       "components": [
         {
           "component": "BarChart",
@@ -420,7 +447,8 @@
     },
     {
       "name": "group-series-series-long-data",
-      "path": "/example/BarChart/group-series-series-long-data",
+      "title": "group series series long data",
+      "path": "/docs/components/BarChart/group-series-series-long-data",
       "components": [
         {
           "component": "BarChart",
@@ -431,7 +459,8 @@
     },
     {
       "name": "highlight-below-marks",
-      "path": "/example/BarChart/highlight-below-marks",
+      "title": "highlight below marks",
+      "path": "/docs/components/BarChart/highlight-below-marks",
       "components": [
         {
           "component": "BarChart",
@@ -447,7 +476,8 @@
     },
     {
       "name": "histogram-date-time-count",
-      "path": "/example/BarChart/histogram-date-time-count",
+      "title": "histogram date time count",
+      "path": "/docs/components/BarChart/histogram-date-time-count",
       "components": [
         {
           "component": "BarChart",
@@ -463,7 +493,8 @@
     },
     {
       "name": "histogram-date-time-interval",
-      "path": "/example/BarChart/histogram-date-time-interval",
+      "title": "histogram date time interval",
+      "path": "/docs/components/BarChart/histogram-date-time-interval",
       "components": [
         {
           "component": "BarChart",
@@ -479,7 +510,8 @@
     },
     {
       "name": "histogram-horizontal",
-      "path": "/example/BarChart/histogram-horizontal",
+      "title": "histogram horizontal",
+      "path": "/docs/components/BarChart/histogram-horizontal",
       "components": [
         {
           "component": "BarChart",
@@ -495,7 +527,8 @@
     },
     {
       "name": "histogram-random-distribution",
-      "path": "/example/BarChart/histogram-random-distribution",
+      "title": "histogram random distribution",
+      "path": "/docs/components/BarChart/histogram-random-distribution",
       "components": [
         {
           "component": "BarChart",
@@ -511,7 +544,8 @@
     },
     {
       "name": "histogram-vertical",
-      "path": "/example/BarChart/histogram-vertical",
+      "title": "histogram vertical",
+      "path": "/docs/components/BarChart/histogram-vertical",
       "components": [
         {
           "component": "BarChart",
@@ -527,7 +561,8 @@
     },
     {
       "name": "horizontal",
-      "path": "/example/BarChart/horizontal",
+      "title": "horizontal",
+      "path": "/docs/components/BarChart/horizontal",
       "components": [
         {
           "component": "BarChart",
@@ -538,7 +573,8 @@
     },
     {
       "name": "labels",
-      "path": "/example/BarChart/labels",
+      "title": "labels",
+      "path": "/docs/components/BarChart/labels",
       "components": [
         {
           "component": "BarChart",
@@ -549,7 +585,8 @@
     },
     {
       "name": "labels-inside-placement",
-      "path": "/example/BarChart/labels-inside-placement",
+      "title": "labels inside placement",
+      "path": "/docs/components/BarChart/labels-inside-placement",
       "components": [
         {
           "component": "BarChart",
@@ -560,7 +597,8 @@
     },
     {
       "name": "legend-custom-labels",
-      "path": "/example/BarChart/legend-custom-labels",
+      "title": "legend custom labels",
+      "path": "/docs/components/BarChart/legend-custom-labels",
       "components": [
         {
           "component": "BarChart",
@@ -571,7 +609,8 @@
     },
     {
       "name": "legend-group-series",
-      "path": "/example/BarChart/legend-group-series",
+      "title": "legend group series",
+      "path": "/docs/components/BarChart/legend-group-series",
       "components": [
         {
           "component": "BarChart",
@@ -582,7 +621,8 @@
     },
     {
       "name": "legend-placement",
-      "path": "/example/BarChart/legend-placement",
+      "title": "legend placement",
+      "path": "/docs/components/BarChart/legend-placement",
       "components": [
         {
           "component": "BarChart",
@@ -593,7 +633,8 @@
     },
     {
       "name": "legend-stack-series",
-      "path": "/example/BarChart/legend-stack-series",
+      "title": "legend stack series",
+      "path": "/docs/components/BarChart/legend-stack-series",
       "components": [
         {
           "component": "BarChart",
@@ -604,7 +645,8 @@
     },
     {
       "name": "line-annotation",
-      "path": "/example/BarChart/line-annotation",
+      "title": "line annotation",
+      "path": "/docs/components/BarChart/line-annotation",
       "components": [
         {
           "component": "BarChart",
@@ -615,7 +657,8 @@
     },
     {
       "name": "oscilloscope-frequency",
-      "path": "/example/BarChart/oscilloscope-frequency",
+      "title": "oscilloscope frequency",
+      "path": "/docs/components/BarChart/oscilloscope-frequency",
       "components": [
         {
           "component": "BarChart",
@@ -636,7 +679,8 @@
     },
     {
       "name": "override-axis-ticks-with-custom-scale",
-      "path": "/example/BarChart/override-axis-ticks-with-custom-scale",
+      "title": "override axis ticks with custom scale",
+      "path": "/docs/components/BarChart/override-axis-ticks-with-custom-scale",
       "components": [
         {
           "component": "BarChart",
@@ -647,7 +691,8 @@
     },
     {
       "name": "point-annotation",
-      "path": "/example/BarChart/point-annotation",
+      "title": "point annotation",
+      "path": "/docs/components/BarChart/point-annotation",
       "components": [
         {
           "component": "BarChart",
@@ -658,7 +703,8 @@
     },
     {
       "name": "radial-horizontal",
-      "path": "/example/BarChart/radial-horizontal",
+      "title": "radial horizontal",
+      "path": "/docs/components/BarChart/radial-horizontal",
       "components": [
         {
           "component": "BarChart",
@@ -669,7 +715,8 @@
     },
     {
       "name": "radial-horizontal-color-per-value",
-      "path": "/example/BarChart/radial-horizontal-color-per-value",
+      "title": "radial horizontal color per value",
+      "path": "/docs/components/BarChart/radial-horizontal-color-per-value",
       "components": [
         {
           "component": "BarChart",
@@ -680,7 +727,8 @@
     },
     {
       "name": "radial-horizontal-duration",
-      "path": "/example/BarChart/radial-horizontal-duration",
+      "title": "radial horizontal duration",
+      "path": "/docs/components/BarChart/radial-horizontal-duration",
       "components": [
         {
           "component": "BarChart",
@@ -691,7 +739,8 @@
     },
     {
       "name": "radial-horizontal-grid-between",
-      "path": "/example/BarChart/radial-horizontal-grid-between",
+      "title": "radial horizontal grid between",
+      "path": "/docs/components/BarChart/radial-horizontal-grid-between",
       "components": [
         {
           "component": "BarChart",
@@ -702,7 +751,8 @@
     },
     {
       "name": "radial-vertical",
-      "path": "/example/BarChart/radial-vertical",
+      "title": "radial vertical",
+      "path": "/docs/components/BarChart/radial-vertical",
       "components": [
         {
           "component": "BarChart",
@@ -713,7 +763,8 @@
     },
     {
       "name": "radial-vertical-arcpadding",
-      "path": "/example/BarChart/radial-vertical-arcpadding",
+      "title": "radial vertical arcpadding",
+      "path": "/docs/components/BarChart/radial-vertical-arcpadding",
       "components": [
         {
           "component": "BarChart",
@@ -724,7 +775,8 @@
     },
     {
       "name": "radial-vertical-yrange",
-      "path": "/example/BarChart/radial-vertical-yrange",
+      "title": "radial vertical yrange",
+      "path": "/docs/components/BarChart/radial-vertical-yrange",
       "components": [
         {
           "component": "BarChart",
@@ -735,7 +787,8 @@
     },
     {
       "name": "radial-weather",
-      "path": "/example/BarChart/radial-weather",
+      "title": "radial weather",
+      "path": "/docs/components/BarChart/radial-weather",
       "components": [
         {
           "component": "BarChart",
@@ -746,7 +799,8 @@
     },
     {
       "name": "range-annotation-multiple",
-      "path": "/example/BarChart/range-annotation-multiple",
+      "title": "range annotation multiple",
+      "path": "/docs/components/BarChart/range-annotation-multiple",
       "components": [
         {
           "component": "BarChart",
@@ -757,7 +811,8 @@
     },
     {
       "name": "range-annotation-single",
-      "path": "/example/BarChart/range-annotation-single",
+      "title": "range annotation single",
+      "path": "/docs/components/BarChart/range-annotation-single",
       "components": [
         {
           "component": "BarChart",
@@ -768,7 +823,8 @@
     },
     {
       "name": "range-annotation-value",
-      "path": "/example/BarChart/range-annotation-value",
+      "title": "range annotation value",
+      "path": "/docs/components/BarChart/range-annotation-value",
       "components": [
         {
           "component": "BarChart",
@@ -779,7 +835,8 @@
     },
     {
       "name": "remove-rounding",
-      "path": "/example/BarChart/remove-rounding",
+      "title": "remove rounding",
+      "path": "/docs/components/BarChart/remove-rounding",
       "components": [
         {
           "component": "BarChart",
@@ -790,7 +847,8 @@
     },
     {
       "name": "scale-override",
-      "path": "/example/BarChart/scale-override",
+      "title": "scale override",
+      "path": "/docs/components/BarChart/scale-override",
       "components": [
         {
           "component": "BarChart",
@@ -801,7 +859,8 @@
     },
     {
       "name": "series",
-      "path": "/example/BarChart/series",
+      "title": "series",
+      "path": "/docs/components/BarChart/series",
       "components": [
         {
           "component": "BarChart",
@@ -812,7 +871,8 @@
     },
     {
       "name": "series-data",
-      "path": "/example/BarChart/series-data",
+      "title": "series data",
+      "path": "/docs/components/BarChart/series-data",
       "components": [
         {
           "component": "BarChart",
@@ -823,7 +883,8 @@
     },
     {
       "name": "series-diverging",
-      "path": "/example/BarChart/series-diverging",
+      "title": "series diverging",
+      "path": "/docs/components/BarChart/series-diverging",
       "components": [
         {
           "component": "BarChart",
@@ -834,7 +895,8 @@
     },
     {
       "name": "series-horizontal",
-      "path": "/example/BarChart/series-horizontal",
+      "title": "series horizontal",
+      "path": "/docs/components/BarChart/series-horizontal",
       "components": [
         {
           "component": "BarChart",
@@ -845,7 +907,8 @@
     },
     {
       "name": "series-horizontal-diverging",
-      "path": "/example/BarChart/series-horizontal-diverging",
+      "title": "series horizontal diverging",
+      "path": "/docs/components/BarChart/series-horizontal-diverging",
       "components": [
         {
           "component": "BarChart",
@@ -861,7 +924,8 @@
     },
     {
       "name": "series-horizontal-diverging-as-percent",
-      "path": "/example/BarChart/series-horizontal-diverging-as-percent",
+      "title": "series horizontal diverging as percent",
+      "path": "/docs/components/BarChart/series-horizontal-diverging-as-percent",
       "components": [
         {
           "component": "BarChart",
@@ -877,7 +941,8 @@
     },
     {
       "name": "single-axis-x",
-      "path": "/example/BarChart/single-axis-x",
+      "title": "single axis x",
+      "path": "/docs/components/BarChart/single-axis-x",
       "components": [
         {
           "component": "BarChart",
@@ -888,7 +953,8 @@
     },
     {
       "name": "single-axis-y",
-      "path": "/example/BarChart/single-axis-y",
+      "title": "single axis y",
+      "path": "/docs/components/BarChart/single-axis-y",
       "components": [
         {
           "component": "BarChart",
@@ -899,7 +965,8 @@
     },
     {
       "name": "single-dimension",
-      "path": "/example/BarChart/single-dimension",
+      "title": "single dimension",
+      "path": "/docs/components/BarChart/single-dimension",
       "components": [
         {
           "component": "BarChart",
@@ -915,7 +982,8 @@
     },
     {
       "name": "single-stack-with-indicator",
-      "path": "/example/BarChart/single-stack-with-indicator",
+      "title": "single stack with indicator",
+      "path": "/docs/components/BarChart/single-stack-with-indicator",
       "components": [
         {
           "component": "BarChart",
@@ -946,7 +1014,8 @@
     },
     {
       "name": "sparkbar",
-      "path": "/example/BarChart/sparkbar",
+      "title": "sparkbar",
+      "path": "/docs/components/BarChart/sparkbar",
       "components": [
         {
           "component": "BarChart",
@@ -957,7 +1026,8 @@
     },
     {
       "name": "sparkbar-fixed-position-tooltip",
-      "path": "/example/BarChart/sparkbar-fixed-position-tooltip",
+      "title": "sparkbar fixed position tooltip",
+      "path": "/docs/components/BarChart/sparkbar-fixed-position-tooltip",
       "components": [
         {
           "component": "BarChart",
@@ -973,7 +1043,8 @@
     },
     {
       "name": "sparkbar-negative-data",
-      "path": "/example/BarChart/sparkbar-negative-data",
+      "title": "sparkbar negative data",
+      "path": "/docs/components/BarChart/sparkbar-negative-data",
       "components": [
         {
           "component": "BarChart",
@@ -984,7 +1055,8 @@
     },
     {
       "name": "sparkbar-within-a-paragraph",
-      "path": "/example/BarChart/sparkbar-within-a-paragraph",
+      "title": "sparkbar within a paragraph",
+      "path": "/docs/components/BarChart/sparkbar-within-a-paragraph",
       "components": [
         {
           "component": "BarChart",
@@ -995,7 +1067,8 @@
     },
     {
       "name": "sparkbar-within-a-paragraph-with-tooltip-and-highlight",
-      "path": "/example/BarChart/sparkbar-within-a-paragraph-with-tooltip-and-highlight",
+      "title": "sparkbar within a paragraph with tooltip and highlight",
+      "path": "/docs/components/BarChart/sparkbar-within-a-paragraph-with-tooltip-and-highlight",
       "components": [
         {
           "component": "BarChart",
@@ -1011,7 +1084,8 @@
     },
     {
       "name": "stack-series",
-      "path": "/example/BarChart/stack-series",
+      "title": "stack series",
+      "path": "/docs/components/BarChart/stack-series",
       "components": [
         {
           "component": "BarChart",
@@ -1022,7 +1096,8 @@
     },
     {
       "name": "stack-series-diverging",
-      "path": "/example/BarChart/stack-series-diverging",
+      "title": "stack series diverging",
+      "path": "/docs/components/BarChart/stack-series-diverging",
       "components": [
         {
           "component": "BarChart",
@@ -1033,7 +1108,8 @@
     },
     {
       "name": "stack-series-expand",
-      "path": "/example/BarChart/stack-series-expand",
+      "title": "stack series expand",
+      "path": "/docs/components/BarChart/stack-series-expand",
       "components": [
         {
           "component": "BarChart",
@@ -1044,7 +1120,8 @@
     },
     {
       "name": "stack-series-horizontal",
-      "path": "/example/BarChart/stack-series-horizontal",
+      "title": "stack series horizontal",
+      "path": "/docs/components/BarChart/stack-series-horizontal",
       "components": [
         {
           "component": "BarChart",
@@ -1055,7 +1132,8 @@
     },
     {
       "name": "stack-series-padded",
-      "path": "/example/BarChart/stack-series-padded",
+      "title": "stack series padded",
+      "path": "/docs/components/BarChart/stack-series-padded",
       "components": [
         {
           "component": "BarChart",
@@ -1066,7 +1144,8 @@
     },
     {
       "name": "time-scale-interval",
-      "path": "/example/BarChart/time-scale-interval",
+      "title": "time scale interval",
+      "path": "/docs/components/BarChart/time-scale-interval",
       "components": [
         {
           "component": "BarChart",
@@ -1077,7 +1156,8 @@
     },
     {
       "name": "time-scale-interval-horizontal",
-      "path": "/example/BarChart/time-scale-interval-horizontal",
+      "title": "time scale interval horizontal",
+      "path": "/docs/components/BarChart/time-scale-interval-horizontal",
       "components": [
         {
           "component": "BarChart",
@@ -1088,7 +1168,8 @@
     },
     {
       "name": "time-scale-interval-with-inset",
-      "path": "/example/BarChart/time-scale-interval-with-inset",
+      "title": "time scale interval with inset",
+      "path": "/docs/components/BarChart/time-scale-interval-with-inset",
       "components": [
         {
           "component": "BarChart",
@@ -1099,7 +1180,8 @@
     },
     {
       "name": "tooltip-click",
-      "path": "/example/BarChart/tooltip-click",
+      "title": "tooltip click",
+      "path": "/docs/components/BarChart/tooltip-click",
       "components": [
         {
           "component": "BarChart",
@@ -1110,7 +1192,8 @@
     },
     {
       "name": "vertical-default",
-      "path": "/example/BarChart/vertical-default",
+      "title": "vertical default",
+      "path": "/docs/components/BarChart/vertical-default",
       "components": [
         {
           "component": "BarChart",
@@ -1124,675 +1207,682 @@
     {
       "example": "bar-chart",
       "component": "AnnotationLine",
-      "path": "/example/AnnotationLine/bar-chart",
+      "path": "/docs/components/AnnotationLine/bar-chart",
       "lineNumber": 16,
       "line": "<BarChart {data} x=\"date\" y=\"value\" height={300} padding={{ top: 10, bottom: 20, left: 25 }}>"
     },
     {
       "example": "band-scale-on-axis",
       "component": "AnnotationPoint",
-      "path": "/example/AnnotationPoint/band-scale-on-axis",
+      "path": "/docs/components/AnnotationPoint/band-scale-on-axis",
       "lineNumber": 16,
       "line": "<BarChart {data} x=\"date\" y=\"value\" height={300} padding={{ top: 5, left: 25, bottom: 35 }}>"
     },
     {
       "example": "band-scale-on-value",
       "component": "AnnotationPoint",
-      "path": "/example/AnnotationPoint/band-scale-on-value",
+      "path": "/docs/components/AnnotationPoint/band-scale-on-value",
       "lineNumber": 16,
       "line": "<BarChart {data} x=\"date\" y=\"value\" height={300}>"
     },
     {
       "example": "bar-chart-(multiple)",
       "component": "AnnotationRange",
-      "path": "/example/AnnotationRange/bar-chart-(multiple)",
+      "path": "/docs/components/AnnotationRange/bar-chart-(multiple)",
       "lineNumber": 18,
       "line": "<BarChart data={dateSeriesData} x=\"date\" y=\"value\" height={300}>"
     },
     {
       "example": "bar-chart-(single)",
       "component": "AnnotationRange",
-      "path": "/example/AnnotationRange/bar-chart-(single)",
+      "path": "/docs/components/AnnotationRange/bar-chart-(single)",
       "lineNumber": 18,
       "line": "<BarChart data={dateSeriesData} x=\"date\" y=\"value\" height={300}>"
     },
     {
       "example": "bar-chart-(value)",
       "component": "AnnotationRange",
-      "path": "/example/AnnotationRange/bar-chart-(value)",
+      "path": "/docs/components/AnnotationRange/bar-chart-(value)",
       "lineNumber": 18,
       "line": "<BarChart data={dateSeriesData} x=\"date\" y=\"value\" height={300}>"
     },
+    {
+      "example": "barchart-xinterval-xinset",
+      "component": "Axis",
+      "path": "/docs/components/Axis/barchart-xinterval-xinset",
+      "lineNumber": 25,
+      "line": "<BarChart"
+    },
     {
       "example": "axis-labels-inside-bars",
       "component": "BarChart",
-      "path": "/example/BarChart/axis-labels-inside-bars",
+      "path": "/docs/components/BarChart/axis-labels-inside-bars",
       "lineNumber": 15,
       "line": "<BarChart"
     },
     {
       "example": "axis-labels-inside-bars-using-labels",
       "component": "BarChart",
-      "path": "/example/BarChart/axis-labels-inside-bars-using-labels",
+      "path": "/docs/components/BarChart/axis-labels-inside-bars-using-labels",
       "lineNumber": 15,
       "line": "<BarChart"
     },
     {
       "example": "both-axis-grid",
       "component": "BarChart",
-      "path": "/example/BarChart/both-axis-grid",
+      "path": "/docs/components/BarChart/both-axis-grid",
       "lineNumber": 15,
       "line": "<BarChart {data} x=\"date\" y=\"value\" grid={{ x: true }} height={300} />"
     },
     {
       "example": "both-axis-grid-align-between",
       "component": "BarChart",
-      "path": "/example/BarChart/both-axis-grid-align-between",
+      "path": "/docs/components/BarChart/both-axis-grid-align-between",
       "lineNumber": 15,
       "line": "<BarChart {data} x=\"date\" y=\"value\" grid={{ x: true, bandAlign: 'between' }} height={300} />"
     },
     {
       "example": "brushing",
       "component": "BarChart",
-      "path": "/example/BarChart/brushing",
+      "path": "/docs/components/BarChart/brushing",
       "lineNumber": 16,
       "line": "<BarChart {data} x=\"date\" y=\"value\" xInterval={timeDay} brush height={300} />"
     },
     {
       "example": "color-bars-class",
       "component": "BarChart",
-      "path": "/example/BarChart/color-bars-class",
+      "path": "/docs/components/BarChart/color-bars-class",
       "lineNumber": 15,
       "line": "<BarChart {data} x=\"date\" y=\"value\" props={{ bars: { class: 'fill-secondary' } }} height={300} />"
     },
     {
       "example": "color-per-value",
       "component": "BarChart",
-      "path": "/example/BarChart/color-per-value",
+      "path": "/docs/components/BarChart/color-per-value",
       "lineNumber": 9,
       "line": "<BarChart"
     },
     {
       "example": "color-threshold",
       "component": "BarChart",
-      "path": "/example/BarChart/color-threshold",
+      "path": "/docs/components/BarChart/color-threshold",
       "lineNumber": 10,
       "line": "<BarChart"
     },
     {
       "example": "color-using-scale",
       "component": "BarChart",
-      "path": "/example/BarChart/color-using-scale",
+      "path": "/docs/components/BarChart/color-using-scale",
       "lineNumber": 15,
       "line": "<BarChart {data} x=\"date\" y=\"value\" cRange={['var(--color-secondary)']} height={300} />"
     },
     {
       "example": "custom-chart",
       "component": "BarChart",
-      "path": "/example/BarChart/custom-chart",
+      "path": "/docs/components/BarChart/custom-chart",
       "lineNumber": 16,
       "line": "<BarChart {data} x=\"date\" y=\"value\" height={300}>"
     },
     {
       "example": "custom-tooltip",
       "component": "BarChart",
-      "path": "/example/BarChart/custom-tooltip",
+      "path": "/docs/components/BarChart/custom-tooltip",
       "lineNumber": 16,
       "line": "<BarChart {data} x=\"date\" y=\"value\" height={300}>"
     },
     {
       "example": "duration",
       "component": "BarChart",
-      "path": "/example/BarChart/duration",
+      "path": "/docs/components/BarChart/duration",
       "lineNumber": 56,
       "line": "<BarChart"
     },
     {
       "example": "duration-bars",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-bars",
+      "path": "/docs/components/BarChart/duration-bars",
       "lineNumber": 25,
       "line": "<BarChart"
     },
     {
       "example": "duration-bars-color",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-bars-color",
+      "path": "/docs/components/BarChart/duration-bars-color",
       "lineNumber": 25,
       "line": "<BarChart"
     },
     {
       "example": "duration-bars-dense",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-bars-dense",
+      "path": "/docs/components/BarChart/duration-bars-dense",
       "lineNumber": 11,
       "line": "<BarChart"
     },
     {
       "example": "duration-bars-dense-lanes",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-bars-dense-lanes",
+      "path": "/docs/components/BarChart/duration-bars-dense-lanes",
       "lineNumber": 13,
       "line": "<BarChart"
     },
     {
       "example": "duration-bars-lanes",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-bars-lanes",
+      "path": "/docs/components/BarChart/duration-bars-lanes",
       "lineNumber": 28,
       "line": "<BarChart"
     },
     {
       "example": "duration-civilization-timeline",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-civilization-timeline",
+      "path": "/docs/components/BarChart/duration-civilization-timeline",
       "lineNumber": 13,
       "line": "<BarChart"
     },
     {
       "example": "duration-civilization-timeline-dense",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-civilization-timeline-dense",
+      "path": "/docs/components/BarChart/duration-civilization-timeline-dense",
       "lineNumber": 13,
       "line": "<BarChart"
     },
     {
       "example": "duration-points",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-points",
+      "path": "/docs/components/BarChart/duration-points",
       "lineNumber": 25,
       "line": "<BarChart"
     },
     {
       "example": "duration-points-color",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-points-color",
+      "path": "/docs/components/BarChart/duration-points-color",
       "lineNumber": 25,
       "line": "<BarChart"
     },
     {
       "example": "dynamic-height",
       "component": "BarChart",
-      "path": "/example/BarChart/dynamic-height",
+      "path": "/docs/components/BarChart/dynamic-height",
       "lineNumber": 44,
       "line": "<BarChart"
     },
     {
       "example": "gradient",
       "component": "BarChart",
-      "path": "/example/BarChart/gradient",
+      "path": "/docs/components/BarChart/gradient",
       "lineNumber": 15,
       "line": "<BarChart {data} x=\"date\" y=\"value\" height={300}>"
     },
     {
       "example": "group-series",
       "component": "BarChart",
-      "path": "/example/BarChart/group-series",
+      "path": "/docs/components/BarChart/group-series",
       "lineNumber": 9,
       "line": "<BarChart"
     },
     {
       "example": "group-series-bar-click",
       "component": "BarChart",
-      "path": "/example/BarChart/group-series-bar-click",
+      "path": "/docs/components/BarChart/group-series-bar-click",
       "lineNumber": 9,
       "line": "<BarChart"
     },
     {
       "example": "group-series-horizontal",
       "component": "BarChart",
-      "path": "/example/BarChart/group-series-horizontal",
+      "path": "/docs/components/BarChart/group-series-horizontal",
       "lineNumber": 9,
       "line": "<BarChart"
     },
     {
       "example": "group-series-labels",
       "component": "BarChart",
-      "path": "/example/BarChart/group-series-labels",
+      "path": "/docs/components/BarChart/group-series-labels",
       "lineNumber": 9,
       "line": "<BarChart"
     },
     {
       "example": "group-series-series-long-data",
       "component": "BarChart",
-      "path": "/example/BarChart/group-series-series-long-data",
+      "path": "/docs/components/BarChart/group-series-series-long-data",
       "lineNumber": 11,
       "line": "<BarChart"
     },
     {
       "example": "highlight-below-marks",
       "component": "BarChart",
-      "path": "/example/BarChart/highlight-below-marks",
+      "path": "/docs/components/BarChart/highlight-below-marks",
       "lineNumber": 15,
       "line": "<BarChart {data} x=\"date\" y=\"value\" props={{ highlight: { area: false } }} height={300}>"
     },
     {
       "example": "histogram-date-time-count",
       "component": "BarChart",
-      "path": "/example/BarChart/histogram-date-time-count",
+      "path": "/docs/components/BarChart/histogram-date-time-count",
       "lineNumber": 35,
       "line": "<BarChart"
     },
     {
       "example": "histogram-date-time-interval",
       "component": "BarChart",
-      "path": "/example/BarChart/histogram-date-time-interval",
+      "path": "/docs/components/BarChart/histogram-date-time-interval",
       "lineNumber": 41,
       "line": "<BarChart"
     },
     {
       "example": "histogram-horizontal",
       "component": "BarChart",
-      "path": "/example/BarChart/histogram-horizontal",
+      "path": "/docs/components/BarChart/histogram-horizontal",
       "lineNumber": 22,
       "line": "<BarChart"
     },
     {
       "example": "histogram-random-distribution",
       "component": "BarChart",
-      "path": "/example/BarChart/histogram-random-distribution",
+      "path": "/docs/components/BarChart/histogram-random-distribution",
       "lineNumber": 18,
       "line": "<BarChart"
     },
     {
       "example": "histogram-vertical",
       "component": "BarChart",
-      "path": "/example/BarChart/histogram-vertical",
+      "path": "/docs/components/BarChart/histogram-vertical",
       "lineNumber": 22,
       "line": "<BarChart"
     },
     {
       "example": "horizontal",
       "component": "BarChart",
-      "path": "/example/BarChart/horizontal",
+      "path": "/docs/components/BarChart/horizontal",
       "lineNumber": 15,
       "line": "<BarChart"
     },
     {
       "example": "labels",
       "component": "BarChart",
-      "path": "/example/BarChart/labels",
+      "path": "/docs/components/BarChart/labels",
       "lineNumber": 15,
       "line": "<BarChart {data} x=\"date\" y=\"value\" labels height={300} />"
     },
     {
       "example": "labels-inside-placement",
       "component": "BarChart",
-      "path": "/example/BarChart/labels-inside-placement",
+      "path": "/docs/components/BarChart/labels-inside-placement",
       "lineNumber": 15,
       "line": "<BarChart {data} x=\"date\" y=\"value\" labels={{ placement: 'inside' }} height={300} />"
     },
     {
       "example": "legend-custom-labels",
       "component": "BarChart",
-      "path": "/example/BarChart/legend-custom-labels",
+      "path": "/docs/components/BarChart/legend-custom-labels",
       "lineNumber": 9,
       "line": "<BarChart"
     },
     {
       "example": "legend-group-series",
       "component": "BarChart",
-      "path": "/example/BarChart/legend-group-series",
+      "path": "/docs/components/BarChart/legend-group-series",
       "lineNumber": 9,
       "line": "<BarChart"
     },
     {
       "example": "legend-placement",
       "component": "BarChart",
-      "path": "/example/BarChart/legend-placement",
+      "path": "/docs/components/BarChart/legend-placement",
       "lineNumber": 9,
       "line": "<BarChart"
     },
     {
       "example": "legend-stack-series",
       "component": "BarChart",
-      "path": "/example/BarChart/legend-stack-series",
+      "path": "/docs/components/BarChart/legend-stack-series",
       "lineNumber": 9,
       "line": "<BarChart"
     },
     {
       "example": "line-annotation",
       "component": "BarChart",
-      "path": "/example/BarChart/line-annotation",
+      "path": "/docs/components/BarChart/line-annotation",
       "lineNumber": 16,
       "line": "<BarChart"
     },
     {
       "example": "oscilloscope-frequency",
       "component": "BarChart",
-      "path": "/example/BarChart/oscilloscope-frequency",
+      "path": "/docs/components/BarChart/oscilloscope-frequency",
       "lineNumber": 96,
       "line": "<BarChart"
     },
     {
       "example": "override-axis-ticks-with-custom-scale",
       "component": "BarChart",
-      "path": "/example/BarChart/override-axis-ticks-with-custom-scale",
+      "path": "/docs/components/BarChart/override-axis-ticks-with-custom-scale",
       "lineNumber": 16,
       "line": "<BarChart"
     },
     {
       "example": "point-annotation",
       "component": "BarChart",
-      "path": "/example/BarChart/point-annotation",
+      "path": "/docs/components/BarChart/point-annotation",
       "lineNumber": 16,
       "line": "<BarChart"
     },
     {
       "example": "radial-horizontal",
       "component": "BarChart",
-      "path": "/example/BarChart/radial-horizontal",
+      "path": "/docs/components/BarChart/radial-horizontal",
       "lineNumber": 15,
       "line": "<BarChart"
     },
     {
       "example": "radial-horizontal-color-per-value",
       "component": "BarChart",
-      "path": "/example/BarChart/radial-horizontal-color-per-value",
+      "path": "/docs/components/BarChart/radial-horizontal-color-per-value",
       "lineNumber": 14,
       "line": "<BarChart"
     },
     {
       "example": "radial-horizontal-duration",
       "component": "BarChart",
-      "path": "/example/BarChart/radial-horizontal-duration",
+      "path": "/docs/components/BarChart/radial-horizontal-duration",
       "lineNumber": 57,
       "line": "<BarChart"
     },
     {
       "example": "radial-horizontal-grid-between",
       "component": "BarChart",
-      "path": "/example/BarChart/radial-horizontal-grid-between",
+      "path": "/docs/components/BarChart/radial-horizontal-grid-between",
       "lineNumber": 14,
       "line": "<BarChart"
     },
     {
       "example": "radial-vertical",
       "component": "BarChart",
-      "path": "/example/BarChart/radial-vertical",
+      "path": "/docs/components/BarChart/radial-vertical",
       "lineNumber": 15,
       "line": "<BarChart"
     },
     {
       "example": "radial-vertical-arcpadding",
       "component": "BarChart",
-      "path": "/example/BarChart/radial-vertical-arcpadding",
+      "path": "/docs/components/BarChart/radial-vertical-arcpadding",
       "lineNumber": 15,
       "line": "<BarChart"
     },
     {
       "example": "radial-vertical-yrange",
       "component": "BarChart",
-      "path": "/example/BarChart/radial-vertical-yrange",
+      "path": "/docs/components/BarChart/radial-vertical-yrange",
       "lineNumber": 15,
       "line": "<BarChart"
     },
     {
       "example": "radial-weather",
       "component": "BarChart",
-      "path": "/example/BarChart/radial-weather",
+      "path": "/docs/components/BarChart/radial-weather",
       "lineNumber": 26,
       "line": "<BarChart"
     },
     {
       "example": "range-annotation-multiple",
       "component": "BarChart",
-      "path": "/example/BarChart/range-annotation-multiple",
+      "path": "/docs/components/BarChart/range-annotation-multiple",
       "lineNumber": 15,
       "line": "<BarChart"
     },
     {
       "example": "range-annotation-single",
       "component": "BarChart",
-      "path": "/example/BarChart/range-annotation-single",
+      "path": "/docs/components/BarChart/range-annotation-single",
       "lineNumber": 15,
       "line": "<BarChart"
     },
     {
       "example": "range-annotation-value",
       "component": "BarChart",
-      "path": "/example/BarChart/range-annotation-value",
+      "path": "/docs/components/BarChart/range-annotation-value",
       "lineNumber": 15,
       "line": "<BarChart"
     },
     {
       "example": "remove-rounding",
       "component": "BarChart",
-      "path": "/example/BarChart/remove-rounding",
+      "path": "/docs/components/BarChart/remove-rounding",
       "lineNumber": 15,
       "line": "<BarChart {data} x=\"date\" y=\"value\" props={{ bars: { rounded: 'none' } }} height={300} />"
     },
     {
       "example": "scale-override",
       "component": "BarChart",
-      "path": "/example/BarChart/scale-override",
+      "path": "/docs/components/BarChart/scale-override",
       "lineNumber": 16,
       "line": "<BarChart"
     },
     {
       "example": "series",
       "component": "BarChart",
-      "path": "/example/BarChart/series",
+      "path": "/docs/components/BarChart/series",
       "lineNumber": 15,
       "line": "<BarChart"
     },
     {
       "example": "series-data",
       "component": "BarChart",
-      "path": "/example/BarChart/series-data",
+      "path": "/docs/components/BarChart/series-data",
       "lineNumber": 18,
       "line": "<BarChart"
     },
     {
       "example": "series-diverging",
       "component": "BarChart",
-      "path": "/example/BarChart/series-diverging",
+      "path": "/docs/components/BarChart/series-diverging",
       "lineNumber": 15,
       "line": "<BarChart"
     },
     {
       "example": "series-horizontal",
       "component": "BarChart",
-      "path": "/example/BarChart/series-horizontal",
+      "path": "/docs/components/BarChart/series-horizontal",
       "lineNumber": 15,
       "line": "<BarChart"
     },
     {
       "example": "series-horizontal-diverging",
       "component": "BarChart",
-      "path": "/example/BarChart/series-horizontal-diverging",
+      "path": "/docs/components/BarChart/series-horizontal-diverging",
       "lineNumber": 32,
       "line": "<BarChart"
     },
     {
       "example": "series-horizontal-diverging-as-percent",
       "component": "BarChart",
-      "path": "/example/BarChart/series-horizontal-diverging-as-percent",
+      "path": "/docs/components/BarChart/series-horizontal-diverging-as-percent",
       "lineNumber": 32,
       "line": "<BarChart"
     },
     {
       "example": "single-axis-x",
       "component": "BarChart",
-      "path": "/example/BarChart/single-axis-x",
+      "path": "/docs/components/BarChart/single-axis-x",
       "lineNumber": 15,
       "line": "<BarChart {data} x=\"date\" y=\"value\" axis=\"x\" height={300} />"
     },
     {
       "example": "single-axis-y",
       "component": "BarChart",
-      "path": "/example/BarChart/single-axis-y",
+      "path": "/docs/components/BarChart/single-axis-y",
       "lineNumber": 15,
       "line": "<BarChart"
     },
     {
       "example": "single-dimension",
       "component": "BarChart",
-      "path": "/example/BarChart/single-dimension",
+      "path": "/docs/components/BarChart/single-dimension",
       "lineNumber": 17,
       "line": "<BarChart"
     },
     {
       "example": "single-stack-with-indicator",
       "component": "BarChart",
-      "path": "/example/BarChart/single-stack-with-indicator",
+      "path": "/docs/components/BarChart/single-stack-with-indicator",
       "lineNumber": 39,
       "line": "<BarChart"
     },
     {
       "example": "sparkbar",
       "component": "BarChart",
-      "path": "/example/BarChart/sparkbar",
+      "path": "/docs/components/BarChart/sparkbar",
       "lineNumber": 9,
       "line": "<BarChart"
     },
     {
       "example": "sparkbar-fixed-position-tooltip",
       "component": "BarChart",
-      "path": "/example/BarChart/sparkbar-fixed-position-tooltip",
+      "path": "/docs/components/BarChart/sparkbar-fixed-position-tooltip",
       "lineNumber": 10,
       "line": "<BarChart"
     },
     {
       "example": "sparkbar-negative-data",
       "component": "BarChart",
-      "path": "/example/BarChart/sparkbar-negative-data",
+      "path": "/docs/components/BarChart/sparkbar-negative-data",
       "lineNumber": 9,
       "line": "<BarChart"
     },
     {
       "example": "sparkbar-within-a-paragraph",
       "component": "BarChart",
-      "path": "/example/BarChart/sparkbar-within-a-paragraph",
+      "path": "/docs/components/BarChart/sparkbar-within-a-paragraph",
       "lineNumber": 12,
       "line": "<BarChart"
     },
     {
       "example": "sparkbar-within-a-paragraph-with-tooltip-and-highlight",
       "component": "BarChart",
-      "path": "/example/BarChart/sparkbar-within-a-paragraph-with-tooltip-and-highlight",
+      "path": "/docs/components/BarChart/sparkbar-within-a-paragraph-with-tooltip-and-highlight",
       "lineNumber": 13,
       "line": "<BarChart"
     },
     {
       "example": "stack-series",
       "component": "BarChart",
-      "path": "/example/BarChart/stack-series",
+      "path": "/docs/components/BarChart/stack-series",
       "lineNumber": 9,
       "line": "<BarChart"
     },
     {
       "example": "stack-series-diverging",
       "component": "BarChart",
-      "path": "/example/BarChart/stack-series-diverging",
+      "path": "/docs/components/BarChart/stack-series-diverging",
       "lineNumber": 9,
       "line": "<BarChart"
     },
     {
       "example": "stack-series-expand",
       "component": "BarChart",
-      "path": "/example/BarChart/stack-series-expand",
+      "path": "/docs/components/BarChart/stack-series-expand",
       "lineNumber": 9,
       "line": "<BarChart"
     },
     {
       "example": "stack-series-horizontal",
       "component": "BarChart",
-      "path": "/example/BarChart/stack-series-horizontal",
+      "path": "/docs/components/BarChart/stack-series-horizontal",
       "lineNumber": 9,
       "line": "<BarChart"
     },
     {
       "example": "stack-series-padded",
       "component": "BarChart",
-      "path": "/example/BarChart/stack-series-padded",
+      "path": "/docs/components/BarChart/stack-series-padded",
       "lineNumber": 9,
       "line": "<BarChart"
     },
     {
       "example": "time-scale-interval",
       "component": "BarChart",
-      "path": "/example/BarChart/time-scale-interval",
+      "path": "/docs/components/BarChart/time-scale-interval",
       "lineNumber": 16,
       "line": "<BarChart"
     },
     {
       "example": "time-scale-interval-horizontal",
       "component": "BarChart",
-      "path": "/example/BarChart/time-scale-interval-horizontal",
+      "path": "/docs/components/BarChart/time-scale-interval-horizontal",
       "lineNumber": 16,
       "line": "<BarChart"
     },
     {
       "example": "time-scale-interval-with-inset",
       "component": "BarChart",
-      "path": "/example/BarChart/time-scale-interval-with-inset",
+      "path": "/docs/components/BarChart/time-scale-interval-with-inset",
       "lineNumber": 16,
       "line": "<BarChart"
     },
     {
       "example": "tooltip-click",
       "component": "BarChart",
-      "path": "/example/BarChart/tooltip-click",
+      "path": "/docs/components/BarChart/tooltip-click",
       "lineNumber": 15,
       "line": "<BarChart"
     },
     {
       "example": "vertical-default",
       "component": "BarChart",
-      "path": "/example/BarChart/vertical-default",
+      "path": "/docs/components/BarChart/vertical-default",
       "lineNumber": 15,
       "line": "<BarChart {data} x=\"date\" y=\"value\" height={300} />"
     },
     {
       "example": "compound-common-scale-with-extra-marks",
       "component": "Chart",
-      "path": "/example/Chart/compound-common-scale-with-extra-marks",
+      "path": "/docs/components/Chart/compound-common-scale-with-extra-marks",
       "lineNumber": 15,
       "line": "<BarChart"
     },
     {
       "example": "compound-separate-scales-with-stacked-charts-and-overridden-marks",
       "component": "Chart",
-      "path": "/example/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks",
+      "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks",
       "lineNumber": 11,
       "line": "<BarChart"
     },
     {
       "example": "compound-separate-scales-with-stacked-charts-and-overridden-marks",
       "component": "Chart",
-      "path": "/example/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks",
+      "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks",
       "lineNumber": 26,
       "line": "<BarChart"
     },
     {
       "example": "compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
       "component": "Chart",
-      "path": "/example/Chart/compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
+      "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
       "lineNumber": 14,
       "line": "<BarChart"
     },
     {
       "example": "compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
       "component": "Chart",
-      "path": "/example/Chart/compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
+      "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
       "lineNumber": 31,
       "line": "<BarChart"
     },
     {
       "example": "truncate-axis-labels",
       "component": "Text",
-      "path": "/example/Text/truncate-axis-labels",
-      "lineNumber": 34,
+      "path": "/docs/components/Text/truncate-axis-labels",
+      "lineNumber": 28,
       "line": "<BarChart"
     },
     {
       "example": "word-wrap-axis-labels",
       "component": "Text",
-      "path": "/example/Text/word-wrap-axis-labels",
-      "lineNumber": 29,
+      "path": "/docs/components/Text/word-wrap-axis-labels",
+      "lineNumber": 23,
       "line": "<BarChart"
     }
   ],
-  "updatedAt": "2026-01-25T22:34:26.556Z"
+  "updatedAt": "2026-02-07T20:21:31.350Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Bars.json b/docs/src/examples/catalog/Bars.json
index ae6a8e7c3..ea452efac 100644
--- a/docs/src/examples/catalog/Bars.json
+++ b/docs/src/examples/catalog/Bars.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "horizontal-average-annotation-rule",
-      "path": "/example/Bars/horizontal-average-annotation-rule",
+      "title": "horizontal average annotation rule",
+      "path": "/docs/components/Bars/horizontal-average-annotation-rule",
       "components": [
         {
           "component": "Chart",
@@ -39,7 +40,8 @@
     },
     {
       "name": "horizontal-basic",
-      "path": "/example/Bars/horizontal-basic",
+      "title": "horizontal basic",
+      "path": "/docs/components/Bars/horizontal-basic",
       "components": [
         {
           "component": "Chart",
@@ -65,7 +67,8 @@
     },
     {
       "name": "horizontal-calculated-value-domain-negative",
-      "path": "/example/Bars/horizontal-calculated-value-domain-negative",
+      "title": "horizontal calculated value domain negative",
+      "path": "/docs/components/Bars/horizontal-calculated-value-domain-negative",
       "components": [
         {
           "component": "Chart",
@@ -91,7 +94,8 @@
     },
     {
       "name": "horizontal-calculated-value-domain-positive",
-      "path": "/example/Bars/horizontal-calculated-value-domain-positive",
+      "title": "horizontal calculated value domain positive",
+      "path": "/docs/components/Bars/horizontal-calculated-value-domain-positive",
       "components": [
         {
           "component": "Chart",
@@ -117,7 +121,8 @@
     },
     {
       "name": "horizontal-candlestick-bars",
-      "path": "/example/Bars/horizontal-candlestick-bars",
+      "title": "horizontal candlestick bars",
+      "path": "/docs/components/Bars/horizontal-candlestick-bars",
       "components": [
         {
           "component": "Chart",
@@ -153,7 +158,8 @@
     },
     {
       "name": "horizontal-click-handler",
-      "path": "/example/Bars/horizontal-click-handler",
+      "title": "horizontal click handler",
+      "path": "/docs/components/Bars/horizontal-click-handler",
       "components": [
         {
           "component": "Chart",
@@ -184,7 +190,8 @@
     },
     {
       "name": "horizontal-customize-individual-styles",
-      "path": "/example/Bars/horizontal-customize-individual-styles",
+      "title": "horizontal customize individual styles",
+      "path": "/docs/components/Bars/horizontal-customize-individual-styles",
       "components": [
         {
           "component": "Chart",
@@ -215,7 +222,8 @@
     },
     {
       "name": "horizontal-gradient",
-      "path": "/example/Bars/horizontal-gradient",
+      "title": "horizontal gradient",
+      "path": "/docs/components/Bars/horizontal-gradient",
       "components": [
         {
           "component": "Chart",
@@ -246,7 +254,8 @@
     },
     {
       "name": "horizontal-grouped",
-      "path": "/example/Bars/horizontal-grouped",
+      "title": "horizontal grouped",
+      "path": "/docs/components/Bars/horizontal-grouped",
       "components": [
         {
           "component": "Chart",
@@ -282,7 +291,8 @@
     },
     {
       "name": "horizontal-grouped-and-stacked",
-      "path": "/example/Bars/horizontal-grouped-and-stacked",
+      "title": "horizontal grouped and stacked",
+      "path": "/docs/components/Bars/horizontal-grouped-and-stacked",
       "components": [
         {
           "component": "Chart",
@@ -318,7 +328,8 @@
     },
     {
       "name": "horizontal-grouped-stacked-or-both-transition",
-      "path": "/example/Bars/horizontal-grouped-stacked-or-both-transition",
+      "title": "horizontal grouped stacked or both transition",
+      "path": "/docs/components/Bars/horizontal-grouped-stacked-or-both-transition",
       "components": [
         {
           "component": "Chart",
@@ -354,7 +365,8 @@
     },
     {
       "name": "horizontal-highlight-individual-bar",
-      "path": "/example/Bars/horizontal-highlight-individual-bar",
+      "title": "horizontal highlight individual bar",
+      "path": "/docs/components/Bars/horizontal-highlight-individual-bar",
       "components": [
         {
           "component": "Chart",
@@ -390,7 +402,8 @@
     },
     {
       "name": "horizontal-highlight-individual-bar-line",
-      "path": "/example/Bars/horizontal-highlight-individual-bar-line",
+      "title": "horizontal highlight individual bar line",
+      "path": "/docs/components/Bars/horizontal-highlight-individual-bar-line",
       "components": [
         {
           "component": "Chart",
@@ -421,7 +434,8 @@
     },
     {
       "name": "horizontal-inside-labels",
-      "path": "/example/Bars/horizontal-inside-labels",
+      "title": "horizontal inside labels",
+      "path": "/docs/components/Bars/horizontal-inside-labels",
       "components": [
         {
           "component": "Chart",
@@ -457,7 +471,8 @@
     },
     {
       "name": "horizontal-limit-ticks-count",
-      "path": "/example/Bars/horizontal-limit-ticks-count",
+      "title": "horizontal limit ticks count",
+      "path": "/docs/components/Bars/horizontal-limit-ticks-count",
       "components": [
         {
           "component": "Chart",
@@ -483,7 +498,8 @@
     },
     {
       "name": "horizontal-limit-ticks-second-scale",
-      "path": "/example/Bars/horizontal-limit-ticks-second-scale",
+      "title": "horizontal limit ticks second scale",
+      "path": "/docs/components/Bars/horizontal-limit-ticks-second-scale",
       "components": [
         {
           "component": "Chart",
@@ -509,7 +525,8 @@
     },
     {
       "name": "horizontal-multiple-diverging",
-      "path": "/example/Bars/horizontal-multiple-diverging",
+      "title": "horizontal multiple diverging",
+      "path": "/docs/components/Bars/horizontal-multiple-diverging",
       "components": [
         {
           "component": "Chart",
@@ -550,7 +567,8 @@
     },
     {
       "name": "horizontal-multiple-overlapping",
-      "path": "/example/Bars/horizontal-multiple-overlapping",
+      "title": "horizontal multiple overlapping",
+      "path": "/docs/components/Bars/horizontal-multiple-overlapping",
       "components": [
         {
           "component": "Chart",
@@ -586,7 +604,8 @@
     },
     {
       "name": "horizontal-outside-labels-default",
-      "path": "/example/Bars/horizontal-outside-labels-default",
+      "title": "horizontal outside labels default",
+      "path": "/docs/components/Bars/horizontal-outside-labels-default",
       "components": [
         {
           "component": "Chart",
@@ -622,7 +641,8 @@
     },
     {
       "name": "horizontal-rounded-right-only",
-      "path": "/example/Bars/horizontal-rounded-right-only",
+      "title": "horizontal rounded right only",
+      "path": "/docs/components/Bars/horizontal-rounded-right-only",
       "components": [
         {
           "component": "Chart",
@@ -648,7 +668,8 @@
     },
     {
       "name": "horizontal-stacked",
-      "path": "/example/Bars/horizontal-stacked",
+      "title": "horizontal stacked",
+      "path": "/docs/components/Bars/horizontal-stacked",
       "components": [
         {
           "component": "Chart",
@@ -684,7 +705,8 @@
     },
     {
       "name": "horizontal-stacked-percent",
-      "path": "/example/Bars/horizontal-stacked-percent",
+      "title": "horizontal stacked percent",
+      "path": "/docs/components/Bars/horizontal-stacked-percent",
       "components": [
         {
           "component": "Chart",
@@ -720,7 +742,8 @@
     },
     {
       "name": "horizontal-stagger-tween-on-mount",
-      "path": "/example/Bars/horizontal-stagger-tween-on-mount",
+      "title": "horizontal stagger tween on mount",
+      "path": "/docs/components/Bars/horizontal-stagger-tween-on-mount",
       "components": [
         {
           "component": "Chart",
@@ -746,7 +769,8 @@
     },
     {
       "name": "horizontal-time-scale-with-inset",
-      "path": "/example/Bars/horizontal-time-scale-with-inset",
+      "title": "horizontal time scale with inset",
+      "path": "/docs/components/Bars/horizontal-time-scale-with-inset",
       "components": [
         {
           "component": "Chart",
@@ -772,7 +796,8 @@
     },
     {
       "name": "horizontal-time-scale-with-interval",
-      "path": "/example/Bars/horizontal-time-scale-with-interval",
+      "title": "horizontal time scale with interval",
+      "path": "/docs/components/Bars/horizontal-time-scale-with-interval",
       "components": [
         {
           "component": "Chart",
@@ -798,7 +823,8 @@
     },
     {
       "name": "horizontal-time-scale-with-missing-data",
-      "path": "/example/Bars/horizontal-time-scale-with-missing-data",
+      "title": "horizontal time scale with missing data",
+      "path": "/docs/components/Bars/horizontal-time-scale-with-missing-data",
       "components": [
         {
           "component": "Chart",
@@ -824,7 +850,8 @@
     },
     {
       "name": "horizontal-tooltip-and-bar-highlight",
-      "path": "/example/Bars/horizontal-tooltip-and-bar-highlight",
+      "title": "horizontal tooltip and bar highlight",
+      "path": "/docs/components/Bars/horizontal-tooltip-and-bar-highlight",
       "components": [
         {
           "component": "Chart",
@@ -860,7 +887,8 @@
     },
     {
       "name": "horizontal-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
-      "path": "/example/Bars/horizontal-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
+      "title": "horizontal tooltip and click handlers for individual stack grouped bar",
+      "path": "/docs/components/Bars/horizontal-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
       "components": [
         {
           "component": "Chart",
@@ -891,7 +919,8 @@
     },
     {
       "name": "horizontal-tooltip-and-clipped-highlight",
-      "path": "/example/Bars/horizontal-tooltip-and-clipped-highlight",
+      "title": "horizontal tooltip and clipped highlight",
+      "path": "/docs/components/Bars/horizontal-tooltip-and-clipped-highlight",
       "components": [
         {
           "component": "Chart",
@@ -932,7 +961,8 @@
     },
     {
       "name": "horizontal-tooltip-and-highlight",
-      "path": "/example/Bars/horizontal-tooltip-and-highlight",
+      "title": "horizontal tooltip and highlight",
+      "path": "/docs/components/Bars/horizontal-tooltip-and-highlight",
       "components": [
         {
           "component": "Chart",
@@ -968,7 +998,8 @@
     },
     {
       "name": "horizontal-tween-on-mount",
-      "path": "/example/Bars/horizontal-tween-on-mount",
+      "title": "horizontal tween on mount",
+      "path": "/docs/components/Bars/horizontal-tween-on-mount",
       "components": [
         {
           "component": "Chart",
@@ -994,7 +1025,8 @@
     },
     {
       "name": "horizontal-with-grid-on-top",
-      "path": "/example/Bars/horizontal-with-grid-on-top",
+      "title": "horizontal with grid on top",
+      "path": "/docs/components/Bars/horizontal-with-grid-on-top",
       "components": [
         {
           "component": "Chart",
@@ -1020,7 +1052,8 @@
     },
     {
       "name": "horizontal-with-grid-on-top-mix-blend",
-      "path": "/example/Bars/horizontal-with-grid-on-top-mix-blend",
+      "title": "horizontal with grid on top mix blend",
+      "path": "/docs/components/Bars/horizontal-with-grid-on-top-mix-blend",
       "components": [
         {
           "component": "Chart",
@@ -1046,7 +1079,8 @@
     },
     {
       "name": "vertical-average-annotation-rule",
-      "path": "/example/Bars/vertical-average-annotation-rule",
+      "title": "vertical average annotation rule",
+      "path": "/docs/components/Bars/vertical-average-annotation-rule",
       "components": [
         {
           "component": "Chart",
@@ -1082,7 +1116,8 @@
     },
     {
       "name": "vertical-basic",
-      "path": "/example/Bars/vertical-basic",
+      "title": "vertical basic",
+      "path": "/docs/components/Bars/vertical-basic",
       "components": [
         {
           "component": "Chart",
@@ -1108,7 +1143,8 @@
     },
     {
       "name": "vertical-calculated-value-domain-negative",
-      "path": "/example/Bars/vertical-calculated-value-domain-negative",
+      "title": "vertical calculated value domain negative",
+      "path": "/docs/components/Bars/vertical-calculated-value-domain-negative",
       "components": [
         {
           "component": "Chart",
@@ -1134,7 +1170,8 @@
     },
     {
       "name": "vertical-calculated-value-domain-positive",
-      "path": "/example/Bars/vertical-calculated-value-domain-positive",
+      "title": "vertical calculated value domain positive",
+      "path": "/docs/components/Bars/vertical-calculated-value-domain-positive",
       "components": [
         {
           "component": "Chart",
@@ -1160,7 +1197,8 @@
     },
     {
       "name": "vertical-click-handler",
-      "path": "/example/Bars/vertical-click-handler",
+      "title": "vertical click handler",
+      "path": "/docs/components/Bars/vertical-click-handler",
       "components": [
         {
           "component": "Chart",
@@ -1191,7 +1229,8 @@
     },
     {
       "name": "vertical-customize-individual-styles",
-      "path": "/example/Bars/vertical-customize-individual-styles",
+      "title": "vertical customize individual styles",
+      "path": "/docs/components/Bars/vertical-customize-individual-styles",
       "components": [
         {
           "component": "Chart",
@@ -1222,7 +1261,8 @@
     },
     {
       "name": "vertical-gradient",
-      "path": "/example/Bars/vertical-gradient",
+      "title": "vertical gradient",
+      "path": "/docs/components/Bars/vertical-gradient",
       "components": [
         {
           "component": "Chart",
@@ -1253,7 +1293,8 @@
     },
     {
       "name": "vertical-grouped",
-      "path": "/example/Bars/vertical-grouped",
+      "title": "vertical grouped",
+      "path": "/docs/components/Bars/vertical-grouped",
       "components": [
         {
           "component": "Chart",
@@ -1289,7 +1330,8 @@
     },
     {
       "name": "vertical-grouped-and-stacked",
-      "path": "/example/Bars/vertical-grouped-and-stacked",
+      "title": "vertical grouped and stacked",
+      "path": "/docs/components/Bars/vertical-grouped-and-stacked",
       "components": [
         {
           "component": "Chart",
@@ -1325,7 +1367,8 @@
     },
     {
       "name": "vertical-grouped-stacked-or-both-transition",
-      "path": "/example/Bars/vertical-grouped-stacked-or-both-transition",
+      "title": "vertical grouped stacked or both transition",
+      "path": "/docs/components/Bars/vertical-grouped-stacked-or-both-transition",
       "components": [
         {
           "component": "Chart",
@@ -1361,7 +1404,8 @@
     },
     {
       "name": "vertical-highlight-individual-bar",
-      "path": "/example/Bars/vertical-highlight-individual-bar",
+      "title": "vertical highlight individual bar",
+      "path": "/docs/components/Bars/vertical-highlight-individual-bar",
       "components": [
         {
           "component": "Chart",
@@ -1397,7 +1441,8 @@
     },
     {
       "name": "vertical-highlight-individual-bar-line",
-      "path": "/example/Bars/vertical-highlight-individual-bar-line",
+      "title": "vertical highlight individual bar line",
+      "path": "/docs/components/Bars/vertical-highlight-individual-bar-line",
       "components": [
         {
           "component": "Chart",
@@ -1428,7 +1473,8 @@
     },
     {
       "name": "vertical-inside-labels",
-      "path": "/example/Bars/vertical-inside-labels",
+      "title": "vertical inside labels",
+      "path": "/docs/components/Bars/vertical-inside-labels",
       "components": [
         {
           "component": "Chart",
@@ -1464,7 +1510,8 @@
     },
     {
       "name": "vertical-limit-ticks-count",
-      "path": "/example/Bars/vertical-limit-ticks-count",
+      "title": "vertical limit ticks count",
+      "path": "/docs/components/Bars/vertical-limit-ticks-count",
       "components": [
         {
           "component": "Chart",
@@ -1490,7 +1537,8 @@
     },
     {
       "name": "vertical-limit-ticks-second-scale",
-      "path": "/example/Bars/vertical-limit-ticks-second-scale",
+      "title": "vertical limit ticks second scale",
+      "path": "/docs/components/Bars/vertical-limit-ticks-second-scale",
       "components": [
         {
           "component": "Chart",
@@ -1516,7 +1564,8 @@
     },
     {
       "name": "vertical-multiple-diverging",
-      "path": "/example/Bars/vertical-multiple-diverging",
+      "title": "vertical multiple diverging",
+      "path": "/docs/components/Bars/vertical-multiple-diverging",
       "components": [
         {
           "component": "Chart",
@@ -1557,7 +1606,8 @@
     },
     {
       "name": "vertical-multiple-diverging-rounded-specific",
-      "path": "/example/Bars/vertical-multiple-diverging-rounded-specific",
+      "title": "vertical multiple diverging rounded specific",
+      "path": "/docs/components/Bars/vertical-multiple-diverging-rounded-specific",
       "components": [
         {
           "component": "Chart",
@@ -1598,7 +1648,8 @@
     },
     {
       "name": "vertical-multiple-overlapping",
-      "path": "/example/Bars/vertical-multiple-overlapping",
+      "title": "vertical multiple overlapping",
+      "path": "/docs/components/Bars/vertical-multiple-overlapping",
       "components": [
         {
           "component": "Chart",
@@ -1634,7 +1685,8 @@
     },
     {
       "name": "vertical-outside-labels-default",
-      "path": "/example/Bars/vertical-outside-labels-default",
+      "title": "vertical outside labels default",
+      "path": "/docs/components/Bars/vertical-outside-labels-default",
       "components": [
         {
           "component": "Chart",
@@ -1670,7 +1722,8 @@
     },
     {
       "name": "vertical-rounded-top-only",
-      "path": "/example/Bars/vertical-rounded-top-only",
+      "title": "vertical rounded top only",
+      "path": "/docs/components/Bars/vertical-rounded-top-only",
       "components": [
         {
           "component": "Chart",
@@ -1696,7 +1749,8 @@
     },
     {
       "name": "vertical-stacked",
-      "path": "/example/Bars/vertical-stacked",
+      "title": "vertical stacked",
+      "path": "/docs/components/Bars/vertical-stacked",
       "components": [
         {
           "component": "Chart",
@@ -1732,7 +1786,8 @@
     },
     {
       "name": "vertical-stacked-percent",
-      "path": "/example/Bars/vertical-stacked-percent",
+      "title": "vertical stacked percent",
+      "path": "/docs/components/Bars/vertical-stacked-percent",
       "components": [
         {
           "component": "Chart",
@@ -1768,7 +1823,8 @@
     },
     {
       "name": "vertical-stagger-tween-on-mount",
-      "path": "/example/Bars/vertical-stagger-tween-on-mount",
+      "title": "vertical stagger tween on mount",
+      "path": "/docs/components/Bars/vertical-stagger-tween-on-mount",
       "components": [
         {
           "component": "Chart",
@@ -1794,7 +1850,8 @@
     },
     {
       "name": "vertical-stagger-tween-on-mount-rounded-edge",
-      "path": "/example/Bars/vertical-stagger-tween-on-mount-rounded-edge",
+      "title": "vertical stagger tween on mount rounded edge",
+      "path": "/docs/components/Bars/vertical-stagger-tween-on-mount-rounded-edge",
       "components": [
         {
           "component": "Chart",
@@ -1820,7 +1877,8 @@
     },
     {
       "name": "vertical-time-scale-with-inset",
-      "path": "/example/Bars/vertical-time-scale-with-inset",
+      "title": "vertical time scale with inset",
+      "path": "/docs/components/Bars/vertical-time-scale-with-inset",
       "components": [
         {
           "component": "Chart",
@@ -1846,7 +1904,8 @@
     },
     {
       "name": "vertical-time-scale-with-interval",
-      "path": "/example/Bars/vertical-time-scale-with-interval",
+      "title": "vertical time scale with interval",
+      "path": "/docs/components/Bars/vertical-time-scale-with-interval",
       "components": [
         {
           "component": "Chart",
@@ -1872,7 +1931,8 @@
     },
     {
       "name": "vertical-time-scale-with-interval-months",
-      "path": "/example/Bars/vertical-time-scale-with-interval-months",
+      "title": "vertical time scale with interval months",
+      "path": "/docs/components/Bars/vertical-time-scale-with-interval-months",
       "components": [
         {
           "component": "Chart",
@@ -1898,7 +1958,8 @@
     },
     {
       "name": "vertical-time-scale-with-missing-data",
-      "path": "/example/Bars/vertical-time-scale-with-missing-data",
+      "title": "vertical time scale with missing data",
+      "path": "/docs/components/Bars/vertical-time-scale-with-missing-data",
       "components": [
         {
           "component": "Chart",
@@ -1924,7 +1985,8 @@
     },
     {
       "name": "vertical-tooltip-and-bar-highlight",
-      "path": "/example/Bars/vertical-tooltip-and-bar-highlight",
+      "title": "vertical tooltip and bar highlight",
+      "path": "/docs/components/Bars/vertical-tooltip-and-bar-highlight",
       "components": [
         {
           "component": "Chart",
@@ -1960,7 +2022,8 @@
     },
     {
       "name": "vertical-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
-      "path": "/example/Bars/vertical-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
+      "title": "vertical tooltip and click handlers for individual stack grouped bar",
+      "path": "/docs/components/Bars/vertical-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
       "components": [
         {
           "component": "Chart",
@@ -1991,7 +2054,8 @@
     },
     {
       "name": "vertical-tooltip-and-clipped-highlight",
-      "path": "/example/Bars/vertical-tooltip-and-clipped-highlight",
+      "title": "vertical tooltip and clipped highlight",
+      "path": "/docs/components/Bars/vertical-tooltip-and-clipped-highlight",
       "components": [
         {
           "component": "Chart",
@@ -2032,7 +2096,8 @@
     },
     {
       "name": "vertical-tooltip-and-highlight",
-      "path": "/example/Bars/vertical-tooltip-and-highlight",
+      "title": "vertical tooltip and highlight",
+      "path": "/docs/components/Bars/vertical-tooltip-and-highlight",
       "components": [
         {
           "component": "Chart",
@@ -2068,7 +2133,8 @@
     },
     {
       "name": "vertical-tween-on-mount",
-      "path": "/example/Bars/vertical-tween-on-mount",
+      "title": "vertical tween on mount",
+      "path": "/docs/components/Bars/vertical-tween-on-mount",
       "components": [
         {
           "component": "Chart",
@@ -2094,7 +2160,8 @@
     },
     {
       "name": "vertical-tween-on-mount-rounded-edge",
-      "path": "/example/Bars/vertical-tween-on-mount-rounded-edge",
+      "title": "vertical tween on mount rounded edge",
+      "path": "/docs/components/Bars/vertical-tween-on-mount-rounded-edge",
       "components": [
         {
           "component": "Chart",
@@ -2120,7 +2187,8 @@
     },
     {
       "name": "vertical-with-grid-on-top",
-      "path": "/example/Bars/vertical-with-grid-on-top",
+      "title": "vertical with grid on top",
+      "path": "/docs/components/Bars/vertical-with-grid-on-top",
       "components": [
         {
           "component": "Chart",
@@ -2146,7 +2214,8 @@
     },
     {
       "name": "vertical-with-grid-on-top-mix-blend",
-      "path": "/example/Bars/vertical-with-grid-on-top-mix-blend",
+      "title": "vertical with grid on top mix blend",
+      "path": "/docs/components/Bars/vertical-with-grid-on-top-mix-blend",
       "components": [
         {
           "component": "Chart",
@@ -2175,549 +2244,549 @@
     {
       "example": "custom-chart",
       "component": "BarChart",
-      "path": "/example/BarChart/custom-chart",
+      "path": "/docs/components/BarChart/custom-chart",
       "lineNumber": 21,
       "line": "<Bars radius={4} strokeWidth={1} class=\"fill-primary\" />"
     },
     {
       "example": "gradient",
       "component": "BarChart",
-      "path": "/example/BarChart/gradient",
+      "path": "/docs/components/BarChart/gradient",
       "lineNumber": 20,
       "line": "<Bars {...getBarsProps(s, i)} fill={gradient} />"
     },
     {
       "example": "oscilloscope-frequency",
       "component": "BarChart",
-      "path": "/example/BarChart/oscilloscope-frequency",
+      "path": "/docs/components/BarChart/oscilloscope-frequency",
       "lineNumber": 119,
       "line": "<Bars radius={1} fill={gradient} />"
     },
     {
       "example": "horizontal-average-annotation-rule",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-average-annotation-rule",
+      "path": "/docs/components/Bars/horizontal-average-annotation-rule",
       "lineNumber": 33,
       "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
     },
     {
       "example": "horizontal-basic",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-basic",
+      "path": "/docs/components/Bars/horizontal-basic",
       "lineNumber": 30,
       "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
     },
     {
       "example": "horizontal-calculated-value-domain-negative",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-calculated-value-domain-negative",
+      "path": "/docs/components/Bars/horizontal-calculated-value-domain-negative",
       "lineNumber": 23,
       "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
     },
     {
       "example": "horizontal-calculated-value-domain-positive",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-calculated-value-domain-positive",
+      "path": "/docs/components/Bars/horizontal-calculated-value-domain-positive",
       "lineNumber": 23,
       "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
     },
     {
       "example": "horizontal-candlestick-bars",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-candlestick-bars",
+      "path": "/docs/components/Bars/horizontal-candlestick-bars",
       "lineNumber": 28,
       "line": "<Bars y={['high', 'low']} insets={{ x: 1.5 }} class=\"fill-surface-content\" />"
     },
     {
       "example": "horizontal-candlestick-bars",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-candlestick-bars",
+      "path": "/docs/components/Bars/horizontal-candlestick-bars",
       "lineNumber": 29,
       "line": "<Bars y={['open', 'close']} insets={{ x: 0.5 }} />"
     },
     {
       "example": "horizontal-click-handler",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-click-handler",
+      "path": "/docs/components/Bars/horizontal-click-handler",
       "lineNumber": 36,
       "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
     },
     {
       "example": "horizontal-customize-individual-styles",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-customize-individual-styles",
+      "path": "/docs/components/Bars/horizontal-customize-individual-styles",
       "lineNumber": 30,
       "line": "<Bars>"
     },
     {
       "example": "horizontal-gradient",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-gradient",
+      "path": "/docs/components/Bars/horizontal-gradient",
       "lineNumber": 32,
       "line": "<Bars strokeWidth={1} fill={gradient} class=\"stroke-blue-900\" />"
     },
     {
       "example": "horizontal-grouped",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-grouped",
+      "path": "/docs/components/Bars/horizontal-grouped",
       "lineNumber": 49,
       "line": "<Bars strokeWidth={1} />"
     },
     {
       "example": "horizontal-grouped-and-stacked",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-grouped-and-stacked",
+      "path": "/docs/components/Bars/horizontal-grouped-and-stacked",
       "lineNumber": 54,
       "line": "<Bars strokeWidth={1} />"
     },
     {
       "example": "horizontal-highlight-individual-bar",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-highlight-individual-bar",
+      "path": "/docs/components/Bars/horizontal-highlight-individual-bar",
       "lineNumber": 39,
       "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
     },
     {
       "example": "horizontal-highlight-individual-bar-line",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-highlight-individual-bar-line",
+      "path": "/docs/components/Bars/horizontal-highlight-individual-bar-line",
       "lineNumber": 30,
       "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
     },
     {
       "example": "horizontal-inside-labels",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-inside-labels",
+      "path": "/docs/components/Bars/horizontal-inside-labels",
       "lineNumber": 24,
       "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
     },
     {
       "example": "horizontal-limit-ticks-count",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-limit-ticks-count",
+      "path": "/docs/components/Bars/horizontal-limit-ticks-count",
       "lineNumber": 30,
       "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
     },
     {
       "example": "horizontal-limit-ticks-second-scale",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-limit-ticks-second-scale",
+      "path": "/docs/components/Bars/horizontal-limit-ticks-second-scale",
       "lineNumber": 34,
       "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
     },
     {
       "example": "horizontal-multiple-diverging",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-multiple-diverging",
+      "path": "/docs/components/Bars/horizontal-multiple-diverging",
       "lineNumber": 30,
       "line": "<Bars x=\"value\" rounded=\"right\" strokeWidth={1} class=\"fill-primary\" />"
     },
     {
       "example": "horizontal-multiple-diverging",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-multiple-diverging",
+      "path": "/docs/components/Bars/horizontal-multiple-diverging",
       "lineNumber": 31,
       "line": "<Bars x={(d) => -d.baseline} rounded=\"left\" strokeWidth={1} class=\"fill-secondary\" />"
     },
     {
       "example": "horizontal-multiple-overlapping",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-multiple-overlapping",
+      "path": "/docs/components/Bars/horizontal-multiple-overlapping",
       "lineNumber": 31,
       "line": "<Bars x=\"baseline\" strokeWidth={1} class=\"fill-surface-content/20\" />"
     },
     {
       "example": "horizontal-multiple-overlapping",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-multiple-overlapping",
+      "path": "/docs/components/Bars/horizontal-multiple-overlapping",
       "lineNumber": 32,
       "line": "<Bars x=\"value\" strokeWidth={1} insets={{ y: 8 }} class=\"fill-primary\" />"
     },
     {
       "example": "horizontal-outside-labels-default",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-outside-labels-default",
+      "path": "/docs/components/Bars/horizontal-outside-labels-default",
       "lineNumber": 25,
       "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
     },
     {
       "example": "horizontal-rounded-right-only",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-rounded-right-only",
+      "path": "/docs/components/Bars/horizontal-rounded-right-only",
       "lineNumber": 30,
       "line": "<Bars radius={4} rounded=\"right\" strokeWidth={1} class=\"fill-primary\" />"
     },
     {
       "example": "horizontal-stacked",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-stacked",
+      "path": "/docs/components/Bars/horizontal-stacked",
       "lineNumber": 46,
       "line": "<Bars strokeWidth={1} />"
     },
     {
       "example": "horizontal-stacked-percent",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-stacked-percent",
+      "path": "/docs/components/Bars/horizontal-stacked-percent",
       "lineNumber": 51,
       "line": "<Bars strokeWidth={1} />"
     },
     {
       "example": "horizontal-time-scale-with-inset",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-time-scale-with-inset",
+      "path": "/docs/components/Bars/horizontal-time-scale-with-inset",
       "lineNumber": 30,
       "line": "<Bars class=\"fill-primary\" insets={{ y: 2 }} />"
     },
     {
       "example": "horizontal-time-scale-with-interval",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-time-scale-with-interval",
+      "path": "/docs/components/Bars/horizontal-time-scale-with-interval",
       "lineNumber": 30,
       "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
     },
     {
       "example": "horizontal-time-scale-with-missing-data",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-time-scale-with-missing-data",
+      "path": "/docs/components/Bars/horizontal-time-scale-with-missing-data",
       "lineNumber": 30,
       "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
     },
     {
       "example": "horizontal-tooltip-and-bar-highlight",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-tooltip-and-bar-highlight",
+      "path": "/docs/components/Bars/horizontal-tooltip-and-bar-highlight",
       "lineNumber": 32,
       "line": "<Bars strokeWidth={1} class=\"fill-primary group-hover:fill-gray-300 transition-colors\" />"
     },
     {
       "example": "horizontal-tooltip-and-clipped-highlight",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-tooltip-and-clipped-highlight",
+      "path": "/docs/components/Bars/horizontal-tooltip-and-clipped-highlight",
       "lineNumber": 32,
       "line": "<Bars strokeWidth={1} class=\"fill-primary group-hover:fill-gray-300 transition-colors\" />"
     },
     {
       "example": "horizontal-tooltip-and-clipped-highlight",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-tooltip-and-clipped-highlight",
+      "path": "/docs/components/Bars/horizontal-tooltip-and-clipped-highlight",
       "lineNumber": 36,
       "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
     },
     {
       "example": "horizontal-tooltip-and-highlight",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-tooltip-and-highlight",
+      "path": "/docs/components/Bars/horizontal-tooltip-and-highlight",
       "lineNumber": 31,
       "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
     },
     {
       "example": "horizontal-tween-on-mount",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-tween-on-mount",
+      "path": "/docs/components/Bars/horizontal-tween-on-mount",
       "lineNumber": 37,
       "line": "<Bars"
     },
     {
       "example": "horizontal-with-grid-on-top",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-with-grid-on-top",
+      "path": "/docs/components/Bars/horizontal-with-grid-on-top",
       "lineNumber": 28,
       "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
     },
     {
       "example": "horizontal-with-grid-on-top-mix-blend",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-with-grid-on-top-mix-blend",
+      "path": "/docs/components/Bars/horizontal-with-grid-on-top-mix-blend",
       "lineNumber": 28,
       "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
     },
     {
       "example": "vertical-average-annotation-rule",
       "component": "Bars",
-      "path": "/example/Bars/vertical-average-annotation-rule",
+      "path": "/docs/components/Bars/vertical-average-annotation-rule",
       "lineNumber": 31,
       "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
     },
     {
       "example": "vertical-basic",
       "component": "Bars",
-      "path": "/example/Bars/vertical-basic",
+      "path": "/docs/components/Bars/vertical-basic",
       "lineNumber": 27,
       "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
     },
     {
       "example": "vertical-calculated-value-domain-negative",
       "component": "Bars",
-      "path": "/example/Bars/vertical-calculated-value-domain-negative",
+      "path": "/docs/components/Bars/vertical-calculated-value-domain-negative",
       "lineNumber": 26,
       "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
     },
     {
       "example": "vertical-calculated-value-domain-positive",
       "component": "Bars",
-      "path": "/example/Bars/vertical-calculated-value-domain-positive",
+      "path": "/docs/components/Bars/vertical-calculated-value-domain-positive",
       "lineNumber": 26,
       "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
     },
     {
       "example": "vertical-click-handler",
       "component": "Bars",
-      "path": "/example/Bars/vertical-click-handler",
+      "path": "/docs/components/Bars/vertical-click-handler",
       "lineNumber": 33,
       "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
     },
     {
       "example": "vertical-customize-individual-styles",
       "component": "Bars",
-      "path": "/example/Bars/vertical-customize-individual-styles",
+      "path": "/docs/components/Bars/vertical-customize-individual-styles",
       "lineNumber": 27,
       "line": "<Bars>"
     },
     {
       "example": "vertical-gradient",
       "component": "Bars",
-      "path": "/example/Bars/vertical-gradient",
+      "path": "/docs/components/Bars/vertical-gradient",
       "lineNumber": 25,
       "line": "<Bars strokeWidth={1} fill={gradient} class=\"stroke-blue-900\" />"
     },
     {
       "example": "vertical-grouped",
       "component": "Bars",
-      "path": "/example/Bars/vertical-grouped",
+      "path": "/docs/components/Bars/vertical-grouped",
       "lineNumber": 40,
       "line": "<Bars strokeWidth={1} />"
     },
     {
       "example": "vertical-grouped-and-stacked",
       "component": "Bars",
-      "path": "/example/Bars/vertical-grouped-and-stacked",
+      "path": "/docs/components/Bars/vertical-grouped-and-stacked",
       "lineNumber": 45,
       "line": "<Bars strokeWidth={1} />"
     },
     {
       "example": "vertical-highlight-individual-bar",
       "component": "Bars",
-      "path": "/example/Bars/vertical-highlight-individual-bar",
+      "path": "/docs/components/Bars/vertical-highlight-individual-bar",
       "lineNumber": 36,
       "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
     },
     {
       "example": "vertical-highlight-individual-bar-line",
       "component": "Bars",
-      "path": "/example/Bars/vertical-highlight-individual-bar-line",
+      "path": "/docs/components/Bars/vertical-highlight-individual-bar-line",
       "lineNumber": 23,
       "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
     },
     {
       "example": "vertical-inside-labels",
       "component": "Bars",
-      "path": "/example/Bars/vertical-inside-labels",
+      "path": "/docs/components/Bars/vertical-inside-labels",
       "lineNumber": 24,
       "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
     },
     {
       "example": "vertical-limit-ticks-count",
       "component": "Bars",
-      "path": "/example/Bars/vertical-limit-ticks-count",
+      "path": "/docs/components/Bars/vertical-limit-ticks-count",
       "lineNumber": 27,
       "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
     },
     {
       "example": "vertical-limit-ticks-second-scale",
       "component": "Bars",
-      "path": "/example/Bars/vertical-limit-ticks-second-scale",
+      "path": "/docs/components/Bars/vertical-limit-ticks-second-scale",
       "lineNumber": 31,
       "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
     },
     {
       "example": "vertical-multiple-diverging",
       "component": "Bars",
-      "path": "/example/Bars/vertical-multiple-diverging",
+      "path": "/docs/components/Bars/vertical-multiple-diverging",
       "lineNumber": 29,
       "line": "<Bars y=\"value\" rounded=\"top\" strokeWidth={1} class=\"fill-primary\" />"
     },
     {
       "example": "vertical-multiple-diverging",
       "component": "Bars",
-      "path": "/example/Bars/vertical-multiple-diverging",
+      "path": "/docs/components/Bars/vertical-multiple-diverging",
       "lineNumber": 30,
       "line": "<Bars y={(d) => -d.baseline} rounded=\"bottom\" strokeWidth={1} class=\"fill-secondary\" />"
     },
     {
       "example": "vertical-multiple-diverging-rounded-specific",
       "component": "Bars",
-      "path": "/example/Bars/vertical-multiple-diverging-rounded-specific",
+      "path": "/docs/components/Bars/vertical-multiple-diverging-rounded-specific",
       "lineNumber": 40,
       "line": "<Bars y=\"value\" rounded-sm=\"top\" strokeWidth={1} class=\"fill-primary\" />"
     },
     {
       "example": "vertical-multiple-diverging-rounded-specific",
       "component": "Bars",
-      "path": "/example/Bars/vertical-multiple-diverging-rounded-specific",
+      "path": "/docs/components/Bars/vertical-multiple-diverging-rounded-specific",
       "lineNumber": 41,
       "line": "<Bars y={(d) => -d.baseline} rounded=\"bottom\" strokeWidth={1} class=\"fill-secondary\" />"
     },
     {
       "example": "vertical-multiple-overlapping",
       "component": "Bars",
-      "path": "/example/Bars/vertical-multiple-overlapping",
+      "path": "/docs/components/Bars/vertical-multiple-overlapping",
       "lineNumber": 29,
       "line": "<Bars y=\"baseline\" strokeWidth={1} class=\"fill-surface-content/20\" />"
     },
     {
       "example": "vertical-multiple-overlapping",
       "component": "Bars",
-      "path": "/example/Bars/vertical-multiple-overlapping",
+      "path": "/docs/components/Bars/vertical-multiple-overlapping",
       "lineNumber": 30,
       "line": "<Bars y=\"value\" strokeWidth={1} insets={{ x: 4 }} class=\"fill-primary\" />"
     },
     {
       "example": "vertical-outside-labels-default",
       "component": "Bars",
-      "path": "/example/Bars/vertical-outside-labels-default",
+      "path": "/docs/components/Bars/vertical-outside-labels-default",
       "lineNumber": 25,
       "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
     },
     {
       "example": "vertical-rounded-top-only",
       "component": "Bars",
-      "path": "/example/Bars/vertical-rounded-top-only",
+      "path": "/docs/components/Bars/vertical-rounded-top-only",
       "lineNumber": 28,
       "line": "<Bars radius={4} rounded=\"top\" strokeWidth={1} class=\"fill-primary\" />"
     },
     {
       "example": "vertical-stacked",
       "component": "Bars",
-      "path": "/example/Bars/vertical-stacked",
+      "path": "/docs/components/Bars/vertical-stacked",
       "lineNumber": 37,
       "line": "<Bars strokeWidth={1} />"
     },
     {
       "example": "vertical-stacked-percent",
       "component": "Bars",
-      "path": "/example/Bars/vertical-stacked-percent",
+      "path": "/docs/components/Bars/vertical-stacked-percent",
       "lineNumber": 41,
       "line": "<Bars strokeWidth={1} />"
     },
     {
       "example": "vertical-time-scale-with-inset",
       "component": "Bars",
-      "path": "/example/Bars/vertical-time-scale-with-inset",
+      "path": "/docs/components/Bars/vertical-time-scale-with-inset",
       "lineNumber": 25,
       "line": "<Bars class=\"fill-primary\" insets={{ x: 2 }} />"
     },
     {
       "example": "vertical-time-scale-with-interval",
       "component": "Bars",
-      "path": "/example/Bars/vertical-time-scale-with-interval",
+      "path": "/docs/components/Bars/vertical-time-scale-with-interval",
       "lineNumber": 25,
       "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
     },
     {
       "example": "vertical-time-scale-with-interval-months",
       "component": "Bars",
-      "path": "/example/Bars/vertical-time-scale-with-interval-months",
+      "path": "/docs/components/Bars/vertical-time-scale-with-interval-months",
       "lineNumber": 25,
       "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
     },
     {
       "example": "vertical-time-scale-with-missing-data",
       "component": "Bars",
-      "path": "/example/Bars/vertical-time-scale-with-missing-data",
+      "path": "/docs/components/Bars/vertical-time-scale-with-missing-data",
       "lineNumber": 25,
       "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
     },
     {
       "example": "vertical-tooltip-and-bar-highlight",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tooltip-and-bar-highlight",
+      "path": "/docs/components/Bars/vertical-tooltip-and-bar-highlight",
       "lineNumber": 29,
       "line": "<Bars strokeWidth={1} class=\"fill-primary group-hover:fill-gray-300 transition-colors\" />"
     },
     {
       "example": "vertical-tooltip-and-clipped-highlight",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tooltip-and-clipped-highlight",
+      "path": "/docs/components/Bars/vertical-tooltip-and-clipped-highlight",
       "lineNumber": 31,
       "line": "<Bars strokeWidth={1} class=\"fill-primary group-hover:fill-gray-300 transition-colors\" />"
     },
     {
       "example": "vertical-tooltip-and-clipped-highlight",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tooltip-and-clipped-highlight",
+      "path": "/docs/components/Bars/vertical-tooltip-and-clipped-highlight",
       "lineNumber": 35,
       "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
     },
     {
       "example": "vertical-tooltip-and-highlight",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tooltip-and-highlight",
+      "path": "/docs/components/Bars/vertical-tooltip-and-highlight",
       "lineNumber": 29,
       "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
     },
     {
       "example": "vertical-tween-on-mount",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tween-on-mount",
+      "path": "/docs/components/Bars/vertical-tween-on-mount",
       "lineNumber": 34,
       "line": "<Bars"
     },
     {
       "example": "vertical-tween-on-mount-rounded-edge",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tween-on-mount-rounded-edge",
+      "path": "/docs/components/Bars/vertical-tween-on-mount-rounded-edge",
       "lineNumber": 34,
       "line": "<Bars"
     },
     {
       "example": "vertical-with-grid-on-top",
       "component": "Bars",
-      "path": "/example/Bars/vertical-with-grid-on-top",
+      "path": "/docs/components/Bars/vertical-with-grid-on-top",
       "lineNumber": 24,
       "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
     },
     {
       "example": "vertical-with-grid-on-top-mix-blend",
       "component": "Bars",
-      "path": "/example/Bars/vertical-with-grid-on-top-mix-blend",
+      "path": "/docs/components/Bars/vertical-with-grid-on-top-mix-blend",
       "lineNumber": 24,
       "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
     },
     {
       "example": "candlestick-with-brushing",
       "component": "Rule",
-      "path": "/example/Rule/candlestick-with-brushing",
+      "path": "/docs/components/Rule/candlestick-with-brushing",
       "lineNumber": 68,
       "line": "<Bars insets={{ x: 0.5 }} />"
     },
     {
       "example": "multiple-overlapping-bars",
       "component": "Tooltip",
-      "path": "/example/Tooltip/multiple-overlapping-bars",
+      "path": "/docs/components/Tooltip/multiple-overlapping-bars",
       "lineNumber": 50,
       "line": "<Bars y=\"baseline\" radius={4} strokeWidth={1} class=\"fill-surface-content/10\" />"
     },
     {
       "example": "multiple-overlapping-bars",
       "component": "Tooltip",
-      "path": "/example/Tooltip/multiple-overlapping-bars",
+      "path": "/docs/components/Tooltip/multiple-overlapping-bars",
       "lineNumber": 51,
       "line": "<Bars y=\"value\" radius={4} strokeWidth={1} insets={{ x: 4 }} class=\"fill-primary\" />"
     },
     {
       "example": "multiple-tooltips-with-fixed-single-axis-scaleband",
       "component": "Tooltip",
-      "path": "/example/Tooltip/multiple-tooltips-with-fixed-single-axis-scaleband",
+      "path": "/docs/components/Tooltip/multiple-tooltips-with-fixed-single-axis-scaleband",
       "lineNumber": 34,
       "line": "<Bars radius={4} strokeWidth={1} class=\"fill-primary\" />"
     },
     {
       "example": "simple-bars",
       "component": "Tooltip",
-      "path": "/example/Tooltip/simple-bars",
+      "path": "/docs/components/Tooltip/simple-bars",
       "lineNumber": 47,
       "line": "<Bars radius={4} strokeWidth={1} class=\"fill-primary\" />"
     }
   ],
-  "updatedAt": "2026-01-06T13:02:20.824Z"
+  "updatedAt": "2026-02-07T20:21:31.376Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Blur.json b/docs/src/examples/catalog/Blur.json
index c15b3199c..b0715b453 100644
--- a/docs/src/examples/catalog/Blur.json
+++ b/docs/src/examples/catalog/Blur.json
@@ -5,10 +5,10 @@
     {
       "example": "timezones",
       "component": "GeoPath",
-      "path": "/example/GeoPath/timezones",
+      "path": "/docs/components/GeoPath/timezones",
       "lineNumber": 130,
       "line": "<Blur>"
     }
   ],
-  "updatedAt": "2025-11-23T01:49:01.831Z"
+  "updatedAt": "2026-02-07T17:00:30.898Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Bounds.json b/docs/src/examples/catalog/Bounds.json
index c538465b1..98cf7e81a 100644
--- a/docs/src/examples/catalog/Bounds.json
+++ b/docs/src/examples/catalog/Bounds.json
@@ -5,45 +5,45 @@
     {
       "example": "filterable",
       "component": "Partition",
-      "path": "/example/Partition/filterable",
+      "path": "/docs/components/Partition/filterable",
       "lineNumber": 107,
       "line": "<Bounds domain={{ x0: selected?.y0, y0: selected?.x0, y1: selected?.x1 }}>"
     },
     {
       "example": "horizontal",
       "component": "Partition",
-      "path": "/example/Partition/horizontal",
+      "path": "/docs/components/Partition/horizontal",
       "lineNumber": 87,
       "line": "<Bounds"
     },
     {
       "example": "sunburst",
       "component": "Partition",
-      "path": "/example/Partition/sunburst",
+      "path": "/docs/components/Partition/sunburst",
       "lineNumber": 65,
       "line": "<Bounds"
     },
     {
       "example": "vertical",
       "component": "Partition",
-      "path": "/example/Partition/vertical",
+      "path": "/docs/components/Partition/vertical",
       "lineNumber": 88,
       "line": "<Bounds"
     },
     {
       "example": "nested-zoom",
       "component": "Treemap",
-      "path": "/example/Treemap/nested-zoom",
+      "path": "/docs/components/Treemap/nested-zoom",
       "lineNumber": 87,
       "line": "<Bounds domain={asAny(selected)} motion={{ type: 'tween', duration: 800, easing: cubicOut }}>"
     },
     {
       "example": "stacked-zoom",
       "component": "Treemap",
-      "path": "/example/Treemap/stacked-zoom",
+      "path": "/docs/components/Treemap/stacked-zoom",
       "lineNumber": 85,
       "line": "<Bounds domain={asAny(selected)} motion={{ type: 'tween', duration: 800, easing: cubicOut }}>"
     }
   ],
-  "updatedAt": "2025-11-23T01:49:01.845Z"
+  "updatedAt": "2026-02-07T17:00:30.943Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/BrushContext.json b/docs/src/examples/catalog/BrushContext.json
index 2f073fde4..17ceb5ddd 100644
--- a/docs/src/examples/catalog/BrushContext.json
+++ b/docs/src/examples/catalog/BrushContext.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "basic",
-      "path": "/example/BrushContext/basic",
+      "title": "basic",
+      "path": "/docs/components/BrushContext/basic",
       "components": [
         {
           "component": "Chart",
@@ -24,7 +25,8 @@
     },
     {
       "name": "constant-labels",
-      "path": "/example/BrushContext/constant-labels",
+      "title": "constant labels",
+      "path": "/docs/components/BrushContext/constant-labels",
       "components": [
         {
           "component": "Chart",
@@ -50,7 +52,8 @@
     },
     {
       "name": "handle-arrows",
-      "path": "/example/BrushContext/handle-arrows",
+      "title": "handle arrows",
+      "path": "/docs/components/BrushContext/handle-arrows",
       "components": [
         {
           "component": "Chart",
@@ -76,7 +79,8 @@
     },
     {
       "name": "handle-labels",
-      "path": "/example/BrushContext/handle-labels",
+      "title": "handle labels",
+      "path": "/docs/components/BrushContext/handle-labels",
       "components": [
         {
           "component": "Chart",
@@ -102,7 +106,8 @@
     },
     {
       "name": "integrated-brush-(both-axis-area)",
-      "path": "/example/BrushContext/integrated-brush-(both-axis-area)",
+      "title": "integrated brush (both axis area)",
+      "path": "/docs/components/BrushContext/integrated-brush-(both-axis-area)",
       "components": [
         {
           "component": "Chart",
@@ -138,7 +143,8 @@
     },
     {
       "name": "integrated-brush-(x-axis)",
-      "path": "/example/BrushContext/integrated-brush-(x-axis)",
+      "title": "integrated brush (x axis)",
+      "path": "/docs/components/BrushContext/integrated-brush-(x-axis)",
       "components": [
         {
           "component": "Chart",
@@ -174,7 +180,8 @@
     },
     {
       "name": "integrated-brush-(y-axis)",
-      "path": "/example/BrushContext/integrated-brush-(y-axis)",
+      "title": "integrated brush (y axis)",
+      "path": "/docs/components/BrushContext/integrated-brush-(y-axis)",
       "components": [
         {
           "component": "Chart",
@@ -210,7 +217,8 @@
     },
     {
       "name": "minimap",
-      "path": "/example/BrushContext/minimap",
+      "title": "minimap",
+      "path": "/docs/components/BrushContext/minimap",
       "components": [
         {
           "component": "Chart",
@@ -246,7 +254,8 @@
     },
     {
       "name": "selection",
-      "path": "/example/BrushContext/selection",
+      "title": "selection",
+      "path": "/docs/components/BrushContext/selection",
       "components": [
         {
           "component": "Chart",
@@ -277,7 +286,8 @@
     },
     {
       "name": "separate-chart-(clip-data-y-axis)",
-      "path": "/example/BrushContext/separate-chart-(clip-data-y-axis)",
+      "title": "separate chart (clip data y axis)",
+      "path": "/docs/components/BrushContext/separate-chart-(clip-data-y-axis)",
       "components": [
         {
           "component": "Chart",
@@ -313,7 +323,8 @@
     },
     {
       "name": "separate-chart-(clip-data)",
-      "path": "/example/BrushContext/separate-chart-(clip-data)",
+      "title": "separate chart (clip data)",
+      "path": "/docs/components/BrushContext/separate-chart-(clip-data)",
       "components": [
         {
           "component": "Chart",
@@ -349,7 +360,8 @@
     },
     {
       "name": "separate-chart-(filter-data)",
-      "path": "/example/BrushContext/separate-chart-(filter-data)",
+      "title": "separate chart (filter data)",
+      "path": "/docs/components/BrushContext/separate-chart-(filter-data)",
       "components": [
         {
           "component": "Chart",
@@ -380,7 +392,8 @@
     },
     {
       "name": "simple-styling",
-      "path": "/example/BrushContext/simple-styling",
+      "title": "simple styling",
+      "path": "/docs/components/BrushContext/simple-styling",
       "components": [
         {
           "component": "Chart",
@@ -401,7 +414,8 @@
     },
     {
       "name": "striped-background",
-      "path": "/example/BrushContext/striped-background",
+      "title": "striped background",
+      "path": "/docs/components/BrushContext/striped-background",
       "components": [
         {
           "component": "Chart",
@@ -422,7 +436,8 @@
     },
     {
       "name": "sync-brushes-with-bind-xdomain",
-      "path": "/example/BrushContext/sync-brushes-with-bind-xdomain",
+      "title": "sync brushes with bind xdomain",
+      "path": "/docs/components/BrushContext/sync-brushes-with-bind-xdomain",
       "components": [
         {
           "component": "Chart",
@@ -463,7 +478,8 @@
     },
     {
       "name": "tooltip-interop",
-      "path": "/example/BrushContext/tooltip-interop",
+      "title": "tooltip interop",
+      "path": "/docs/components/BrushContext/tooltip-interop",
       "components": [
         {
           "component": "Chart",
@@ -509,5 +525,5 @@
     }
   ],
   "usage": [],
-  "updatedAt": "2026-01-06T13:02:20.881Z"
+  "updatedAt": "2026-02-07T20:21:31.423Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Calendar.json b/docs/src/examples/catalog/Calendar.json
index 310bfc77b..13cc11710 100644
--- a/docs/src/examples/catalog/Calendar.json
+++ b/docs/src/examples/catalog/Calendar.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "90-days",
-      "path": "/example/Calendar/90-days",
+      "title": "90 days",
+      "path": "/docs/components/Calendar/90-days",
       "components": [
         {
           "component": "Chart",
@@ -29,7 +30,8 @@
     },
     {
       "name": "basic",
-      "path": "/example/Calendar/basic",
+      "title": "basic",
+      "path": "/docs/components/Calendar/basic",
       "components": [
         {
           "component": "Chart",
@@ -50,7 +52,8 @@
     },
     {
       "name": "fixed-cell-size",
-      "path": "/example/Calendar/fixed-cell-size",
+      "title": "fixed cell size",
+      "path": "/docs/components/Calendar/fixed-cell-size",
       "components": [
         {
           "component": "Chart",
@@ -76,7 +79,8 @@
     },
     {
       "name": "html-with-padding",
-      "path": "/example/Calendar/html-with-padding",
+      "title": "html with padding",
+      "path": "/docs/components/Calendar/html-with-padding",
       "components": [
         {
           "component": "Chart",
@@ -102,7 +106,8 @@
     },
     {
       "name": "last-month",
-      "path": "/example/Calendar/last-month",
+      "title": "last month",
+      "path": "/docs/components/Calendar/last-month",
       "components": [
         {
           "component": "Chart",
@@ -128,7 +133,8 @@
     },
     {
       "name": "multiple-years",
-      "path": "/example/Calendar/multiple-years",
+      "title": "multiple years",
+      "path": "/docs/components/Calendar/multiple-years",
       "components": [
         {
           "component": "Chart",
@@ -164,7 +170,8 @@
     },
     {
       "name": "responsive-cell-size-default",
-      "path": "/example/Calendar/responsive-cell-size-default",
+      "title": "responsive cell size default",
+      "path": "/docs/components/Calendar/responsive-cell-size-default",
       "components": [
         {
           "component": "Chart",
@@ -190,7 +197,8 @@
     },
     {
       "name": "rounded-cells",
-      "path": "/example/Calendar/rounded-cells",
+      "title": "rounded cells",
+      "path": "/docs/components/Calendar/rounded-cells",
       "components": [
         {
           "component": "Chart",
@@ -224,59 +232,59 @@
     {
       "example": "90-days",
       "component": "Calendar",
-      "path": "/example/Calendar/90-days",
+      "path": "/docs/components/Calendar/90-days",
       "lineNumber": 39,
       "line": "<Calendar start={ninetyDaysAgo} end={now} tooltipContext={context.tooltip} monthPath />"
     },
     {
       "example": "basic",
       "component": "Calendar",
-      "path": "/example/Calendar/basic",
+      "path": "/docs/components/Calendar/basic",
       "lineNumber": 40,
       "line": "<Calendar start={firstDayOfYear} end={lastDayOfYear} monthPath />"
     },
     {
       "example": "fixed-cell-size",
       "component": "Calendar",
-      "path": "/example/Calendar/fixed-cell-size",
+      "path": "/docs/components/Calendar/fixed-cell-size",
       "lineNumber": 41,
       "line": "<Calendar"
     },
     {
       "example": "html-with-padding",
       "component": "Calendar",
-      "path": "/example/Calendar/html-with-padding",
+      "path": "/docs/components/Calendar/html-with-padding",
       "lineNumber": 41,
       "line": "<Calendar start={firstDayOfYear} end={lastDayOfYear} tooltipContext={context.tooltip}>"
     },
     {
       "example": "last-month",
       "component": "Calendar",
-      "path": "/example/Calendar/last-month",
+      "path": "/docs/components/Calendar/last-month",
       "lineNumber": 41,
       "line": "<Calendar"
     },
     {
       "example": "multiple-years",
       "component": "Calendar",
-      "path": "/example/Calendar/multiple-years",
+      "path": "/docs/components/Calendar/multiple-years",
       "lineNumber": 50,
       "line": "<Calendar {start} {end} tooltipContext={context.tooltip} cellSize={16} monthPath />"
     },
     {
       "example": "responsive-cell-size-default",
       "component": "Calendar",
-      "path": "/example/Calendar/responsive-cell-size-default",
+      "path": "/docs/components/Calendar/responsive-cell-size-default",
       "lineNumber": 41,
       "line": "<Calendar"
     },
     {
       "example": "rounded-cells",
       "component": "Calendar",
-      "path": "/example/Calendar/rounded-cells",
+      "path": "/docs/components/Calendar/rounded-cells",
       "lineNumber": 41,
       "line": "<Calendar start={firstDayOfYear} end={lastDayOfYear}>"
     }
   ],
-  "updatedAt": "2025-11-13T18:10:49.430Z"
+  "updatedAt": "2026-02-07T20:21:31.441Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Canvas.json b/docs/src/examples/catalog/Canvas.json
index 6c6a79ea3..9d7ae05f4 100644
--- a/docs/src/examples/catalog/Canvas.json
+++ b/docs/src/examples/catalog/Canvas.json
@@ -5,17 +5,17 @@
     {
       "example": "animated-globe",
       "component": "GeoPath",
-      "path": "/example/GeoPath/animated-globe",
+      "path": "/docs/components/GeoPath/animated-globe",
       "lineNumber": 166,
       "line": "<!-- Provides better performance by rendering tooltip path on separate <Canvas> -->"
     },
     {
       "example": "tooltip",
       "component": "GeoPath",
-      "path": "/example/GeoPath/tooltip",
+      "path": "/docs/components/GeoPath/tooltip",
       "lineNumber": 35,
       "line": "<!-- Provides better performance by rendering tooltip path on separate <Canvas> layer -->"
     }
   ],
-  "updatedAt": "2025-12-29T21:36:44.478Z"
+  "updatedAt": "2026-02-07T17:00:31.100Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Chart.json b/docs/src/examples/catalog/Chart.json
index d793fcf61..e4f11f827 100644
--- a/docs/src/examples/catalog/Chart.json
+++ b/docs/src/examples/catalog/Chart.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "compound-common-scale-with-extra-marks",
-      "path": "/example/Chart/compound-common-scale-with-extra-marks",
+      "title": "compound common scale with extra marks",
+      "path": "/docs/components/Chart/compound-common-scale-with-extra-marks",
       "components": [
         {
           "component": "BarChart",
@@ -24,7 +25,8 @@
     },
     {
       "name": "compound-dual-axis-with-single-chart-using-remapped-scale",
-      "path": "/example/Chart/compound-dual-axis-with-single-chart-using-remapped-scale",
+      "title": "compound dual axis with single chart using remapped scale",
+      "path": "/docs/components/Chart/compound-dual-axis-with-single-chart-using-remapped-scale",
       "components": [
         {
           "component": "Chart",
@@ -60,7 +62,8 @@
     },
     {
       "name": "compound-dual-axis-with-stacked-charts",
-      "path": "/example/Chart/compound-dual-axis-with-stacked-charts",
+      "title": "compound dual axis with stacked charts",
+      "path": "/docs/components/Chart/compound-dual-axis-with-stacked-charts",
       "components": [
         {
           "component": "Chart",
@@ -96,7 +99,8 @@
     },
     {
       "name": "compound-separate-scales-with-stacked-charts-and-overridden-marks",
-      "path": "/example/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks",
+      "title": "compound separate scales with stacked charts and overridden marks",
+      "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks",
       "components": [
         {
           "component": "BarChart",
@@ -117,7 +121,8 @@
     },
     {
       "name": "compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
-      "path": "/example/Chart/compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
+      "title": "compound separate scales with stacked charts with inverted range top down",
+      "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
       "components": [
         {
           "component": "BarChart",
@@ -141,2915 +146,2915 @@
     {
       "example": "color-wheel",
       "component": "Arc",
-      "path": "/example/Arc/color-wheel",
+      "path": "/docs/components/Arc/color-wheel",
       "lineNumber": 30,
       "line": "<Chart height={300} padding={20}>"
     },
     {
       "example": "concentric",
       "component": "Arc",
-      "path": "/example/Arc/concentric",
+      "path": "/docs/components/Arc/concentric",
       "lineNumber": 15,
       "line": "<Chart height={200} padding={20}>"
     },
     {
       "example": "draggable-arc",
       "component": "Arc",
-      "path": "/example/Arc/draggable-arc",
+      "path": "/docs/components/Arc/draggable-arc",
       "lineNumber": 12,
       "line": "<Chart height={200} padding={20}>"
     },
     {
       "example": "label-direction",
       "component": "Arc",
-      "path": "/example/Arc/label-direction",
+      "path": "/docs/components/Arc/label-direction",
       "lineNumber": 53,
       "line": "<Chart height={300}>"
     },
     {
       "example": "partial-arc",
       "component": "Arc",
-      "path": "/example/Arc/partial-arc",
+      "path": "/docs/components/Arc/partial-arc",
       "lineNumber": 12,
       "line": "<Chart height={120} padding={20}>"
     },
     {
       "example": "playground",
       "component": "Arc",
-      "path": "/example/Arc/playground",
+      "path": "/docs/components/Arc/playground",
       "lineNumber": 24,
       "line": "<Chart height={350}>"
     },
     {
       "example": "segmented-arc",
       "component": "Arc",
-      "path": "/example/Arc/segmented-arc",
+      "path": "/docs/components/Arc/segmented-arc",
       "lineNumber": 15,
       "line": "<Chart height={240} padding={20}>"
     },
     {
       "example": "segmented-arc-clip-mask",
       "component": "Arc",
-      "path": "/example/Arc/segmented-arc-clip-mask",
+      "path": "/docs/components/Arc/segmented-arc-clip-mask",
       "lineNumber": 14,
       "line": "<Chart height={240} padding={20}>"
     },
     {
       "example": "tween-value-on-mount",
       "component": "Arc",
-      "path": "/example/Arc/tween-value-on-mount",
+      "path": "/docs/components/Arc/tween-value-on-mount",
       "lineNumber": 20,
       "line": "<Chart height={200} padding={20}>"
     },
     {
       "example": "basic",
       "component": "Area",
-      "path": "/example/Area/basic",
+      "path": "/docs/components/Area/basic",
       "lineNumber": 11,
       "line": "<Chart {data} x=\"date\" y=\"value\" yDomain={[0, null]} yNice padding={20} height={300}>"
     },
     {
       "example": "clip-tween-on-mount",
       "component": "Area",
-      "path": "/example/Area/clip-tween-on-mount",
+      "path": "/docs/components/Area/clip-tween-on-mount",
       "lineNumber": 16,
       "line": "<Chart {data} x=\"date\" y=\"value\" yDomain={[0, null]} yNice padding={20} height={300}>"
     },
     {
       "example": "clipped-area-on-tooltip",
       "component": "Area",
-      "path": "/example/Area/clipped-area-on-tooltip",
+      "path": "/docs/components/Area/clipped-area-on-tooltip",
       "lineNumber": 20,
       "line": "<Chart"
     },
     {
       "example": "explicit-axis-ticks-min-max",
       "component": "Area",
-      "path": "/example/Area/explicit-axis-ticks-min-max",
+      "path": "/docs/components/Area/explicit-axis-ticks-min-max",
       "lineNumber": 10,
       "line": "<Chart {data} x=\"date\" y=\"value\" yDomain={[0, null]} yNice padding={20} height={300}>"
     },
     {
       "example": "gradient",
       "component": "Area",
-      "path": "/example/Area/gradient",
+      "path": "/docs/components/Area/gradient",
       "lineNumber": 10,
       "line": "<Chart {data} x=\"date\" y=\"value\" yDomain={[0, null]} yNice padding={20} height={300}>"
     },
     {
       "example": "gradient-separate-stroke",
       "component": "Area",
-      "path": "/example/Area/gradient-separate-stroke",
+      "path": "/docs/components/Area/gradient-separate-stroke",
       "lineNumber": 10,
       "line": "<Chart {data} x=\"date\" y=\"value\" yDomain={[0, null]} yNice padding={20} height={300}>"
     },
     {
       "example": "highlight-color-based-on-value-using-color-scale",
       "component": "Area",
-      "path": "/example/Area/highlight-color-based-on-value-using-color-scale",
+      "path": "/docs/components/Area/highlight-color-based-on-value-using-color-scale",
       "lineNumber": 15,
       "line": "<Chart"
     },
     {
       "example": "highlight-color-based-on-value-using-tooltip-slot-prop",
       "component": "Area",
-      "path": "/example/Area/highlight-color-based-on-value-using-tooltip-slot-prop",
+      "path": "/docs/components/Area/highlight-color-based-on-value-using-tooltip-slot-prop",
       "lineNumber": 15,
       "line": "<Chart {data} x=\"date\" y=\"value\" yNice padding={20} tooltip={{ mode: 'quadtree-x' }} height={300}>"
     },
     {
       "example": "multiple-series",
       "component": "Area",
-      "path": "/example/Area/multiple-series",
+      "path": "/docs/components/Area/multiple-series",
       "lineNumber": 39,
       "line": "<Chart"
     },
     {
       "example": "multiple-series-highlight-on-hover",
       "component": "Area",
-      "path": "/example/Area/multiple-series-highlight-on-hover",
+      "path": "/docs/components/Area/multiple-series-highlight-on-hover",
       "lineNumber": 40,
       "line": "<Chart"
     },
     {
       "example": "multiple-series-using-overrides",
       "component": "Area",
-      "path": "/example/Area/multiple-series-using-overrides",
+      "path": "/docs/components/Area/multiple-series-using-overrides",
       "lineNumber": 23,
       "line": "<Chart"
     },
     {
       "example": "multiple-series-with-labels",
       "component": "Area",
-      "path": "/example/Area/multiple-series-with-labels",
+      "path": "/docs/components/Area/multiple-series-with-labels",
       "lineNumber": 27,
       "line": "<Chart"
     },
     {
       "example": "playground",
       "component": "Area",
-      "path": "/example/Area/playground",
+      "path": "/docs/components/Area/playground",
       "lineNumber": 33,
       "line": "<Chart {data} x=\"x\" y=\"y\" yNice padding={20} height={300}>"
     },
     {
       "example": "stack",
       "component": "Area",
-      "path": "/example/Area/stack",
+      "path": "/docs/components/Area/stack",
       "lineNumber": 43,
       "line": "<Chart"
     },
     {
       "example": "stack-with-gradient",
       "component": "Area",
-      "path": "/example/Area/stack-with-gradient",
+      "path": "/docs/components/Area/stack-with-gradient",
       "lineNumber": 31,
       "line": "<Chart"
     },
     {
       "example": "threshold-with-lineargradient",
       "component": "Area",
-      "path": "/example/Area/threshold-with-lineargradient",
+      "path": "/docs/components/Area/threshold-with-lineargradient",
       "lineNumber": 15,
       "line": "<Chart {data} x=\"date\" y=\"value\" yNice padding={20} tooltip={{ mode: 'quadtree-x' }} height={300}>"
     },
     {
       "example": "threshold-with-lineargradient-over-under",
       "component": "Area",
-      "path": "/example/Area/threshold-with-lineargradient-over-under",
+      "path": "/docs/components/Area/threshold-with-lineargradient-over-under",
       "lineNumber": 15,
       "line": "<Chart {data} x=\"date\" y=\"value\" yNice padding={20} tooltip={{ mode: 'quadtree-x' }} height={300}>"
     },
     {
       "example": "threshold-with-rectclippath",
       "component": "Area",
-      "path": "/example/Area/threshold-with-rectclippath",
+      "path": "/docs/components/Area/threshold-with-rectclippath",
       "lineNumber": 15,
       "line": "<Chart {data} x=\"date\" y=\"value\" yNice padding={20} tooltip={{ mode: 'quadtree-x' }} height={300}>"
     },
     {
       "example": "threshold-with-rectclippath-over-under",
       "component": "Area",
-      "path": "/example/Area/threshold-with-rectclippath-over-under",
+      "path": "/docs/components/Area/threshold-with-rectclippath-over-under",
       "lineNumber": 15,
       "line": "<Chart {data} x=\"date\" y=\"value\" yNice padding={20} tooltip={{ mode: 'quadtree-x' }} height={300}>"
     },
     {
       "example": "with-labels",
       "component": "Area",
-      "path": "/example/Area/with-labels",
+      "path": "/docs/components/Area/with-labels",
       "lineNumber": 10,
       "line": "<Chart {data} x=\"date\" y=\"value\" yDomain={[0, null]} yNice padding={20} height={300}>"
     },
     {
       "example": "with-tooltip-and-highlight",
       "component": "Area",
-      "path": "/example/Area/with-tooltip-and-highlight",
+      "path": "/docs/components/Area/with-tooltip-and-highlight",
       "lineNumber": 10,
       "line": "<Chart"
     },
     {
       "example": "arrow-markers",
       "component": "Axis",
-      "path": "/example/Axis/arrow-markers",
+      "path": "/docs/components/Axis/arrow-markers",
       "lineNumber": 9,
       "line": "<Chart"
     },
     {
       "example": "axis-label-placement-left-right",
       "component": "Axis",
-      "path": "/example/Axis/axis-label-placement-left-right",
+      "path": "/docs/components/Axis/axis-label-placement-left-right",
       "lineNumber": 5,
       "line": "<Chart yDomain={[0, 100]} padding={{ top: 24, bottom: 24, left: 40, right: 40 }} height={300}>"
     },
     {
       "example": "axis-label-placement-top-bottom",
       "component": "Axis",
-      "path": "/example/Axis/axis-label-placement-top-bottom",
+      "path": "/docs/components/Axis/axis-label-placement-top-bottom",
       "lineNumber": 9,
       "line": "<Chart"
     },
     {
       "example": "explicit-ticks",
       "component": "Axis",
-      "path": "/example/Axis/explicit-ticks",
+      "path": "/docs/components/Axis/explicit-ticks",
       "lineNumber": 5,
       "line": "<Chart xDomain={[0, 100]} padding={24} height={48}>"
     },
     {
       "example": "extent-ticks-only",
       "component": "Axis",
-      "path": "/example/Axis/extent-ticks-only",
+      "path": "/docs/components/Axis/extent-ticks-only",
       "lineNumber": 9,
       "line": "<Chart"
     },
     {
       "example": "grid",
       "component": "Axis",
-      "path": "/example/Axis/grid",
+      "path": "/docs/components/Axis/grid",
       "lineNumber": 9,
       "line": "<Chart"
     },
     {
       "example": "grid-dashed",
       "component": "Axis",
-      "path": "/example/Axis/grid-dashed",
+      "path": "/docs/components/Axis/grid-dashed",
       "lineNumber": 9,
       "line": "<Chart"
     },
     {
       "example": "hide-zero-filter",
       "component": "Axis",
-      "path": "/example/Axis/hide-zero-filter",
+      "path": "/docs/components/Axis/hide-zero-filter",
       "lineNumber": 5,
       "line": "<Chart xDomain={[0, 2]} padding={24} height={48}>"
     },
     {
       "example": "hide-zero-format",
       "component": "Axis",
-      "path": "/example/Axis/hide-zero-format",
+      "path": "/docs/components/Axis/hide-zero-format",
       "lineNumber": 5,
       "line": "<Chart xDomain={[0, 2]} padding={24} height={48}>"
     },
     {
       "example": "inject-ticks",
       "component": "Axis",
-      "path": "/example/Axis/inject-ticks",
+      "path": "/docs/components/Axis/inject-ticks",
       "lineNumber": 5,
       "line": "<Chart xDomain={[0, 100]} padding={24} height={48}>"
     },
     {
       "example": "integer-only-filter",
       "component": "Axis",
-      "path": "/example/Axis/integer-only-filter",
+      "path": "/docs/components/Axis/integer-only-filter",
       "lineNumber": 5,
       "line": "<Chart xDomain={[0, 2]} padding={24} height={48}>"
     },
     {
       "example": "integer-only-format",
       "component": "Axis",
-      "path": "/example/Axis/integer-only-format",
+      "path": "/docs/components/Axis/integer-only-format",
       "lineNumber": 5,
       "line": "<Chart xDomain={[0, 2]} padding={24} height={48}>"
     },
     {
       "example": "labels-next-hash",
       "component": "Axis",
-      "path": "/example/Axis/labels-next-hash",
+      "path": "/docs/components/Axis/labels-next-hash",
       "lineNumber": 10,
       "line": "<Chart xDomain={[timeDay.offset(today, -10), today]} padding={24} height={48}>"
     },
     {
       "example": "log-scale",
       "component": "Axis",
-      "path": "/example/Axis/log-scale",
+      "path": "/docs/components/Axis/log-scale",
       "lineNumber": 6,
       "line": "<Chart xScale={scaleLog()} xDomain={[1, 100]} padding={24} height={48}>"
     },
     {
       "example": "multiline-tick-labels",
       "component": "Axis",
-      "path": "/example/Axis/multiline-tick-labels",
+      "path": "/docs/components/Axis/multiline-tick-labels",
       "lineNumber": 9,
       "line": "<Chart"
     },
     {
       "example": "multiple-axis-grid-and-rules",
       "component": "Axis",
-      "path": "/example/Axis/multiple-axis-grid-and-rules",
+      "path": "/docs/components/Axis/multiple-axis-grid-and-rules",
       "lineNumber": 9,
       "line": "<Chart"
     },
     {
       "example": "multiple-axis-grid-and-rules-separate-grid",
       "component": "Axis",
-      "path": "/example/Axis/multiple-axis-grid-and-rules-separate-grid",
+      "path": "/docs/components/Axis/multiple-axis-grid-and-rules-separate-grid",
       "lineNumber": 9,
       "line": "<Chart"
     },
     {
       "example": "multiple-axis-grid-with-single-rule",
       "component": "Axis",
-      "path": "/example/Axis/multiple-axis-grid-with-single-rule",
+      "path": "/docs/components/Axis/multiple-axis-grid-with-single-rule",
       "lineNumber": 9,
       "line": "<Chart"
     },
     {
       "example": "multiple-axis-same-placement-bottom",
       "component": "Axis",
-      "path": "/example/Axis/multiple-axis-same-placement-bottom",
+      "path": "/docs/components/Axis/multiple-axis-same-placement-bottom",
       "lineNumber": 9,
       "line": "<Chart"
     },
     {
       "example": "multiple-axis-same-placement-right",
       "component": "Axis",
-      "path": "/example/Axis/multiple-axis-same-placement-right",
+      "path": "/docs/components/Axis/multiple-axis-same-placement-right",
       "lineNumber": 7,
       "line": "<Chart yDomain={[0, 100]} padding={defaultChartPadding({ right: 90 })} height={300}>"
     },
     {
       "example": "override-axis-ticks-scale",
       "component": "Axis",
-      "path": "/example/Axis/override-axis-ticks-scale",
+      "path": "/docs/components/Axis/override-axis-ticks-scale",
       "lineNumber": 10,
       "line": "<Chart {data} x=\"date\" xScale={scaleBand()} y=\"value\" padding={24} height={48}>"
     },
     {
       "example": "placement-bottom-left",
       "component": "Axis",
-      "path": "/example/Axis/placement-bottom-left",
+      "path": "/docs/components/Axis/placement-bottom-left",
       "lineNumber": 9,
       "line": "<Chart"
     },
     {
       "example": "placement-bottom-left-rule",
       "component": "Axis",
-      "path": "/example/Axis/placement-bottom-left-rule",
+      "path": "/docs/components/Axis/placement-bottom-left-rule",
       "lineNumber": 9,
       "line": "<Chart"
     },
     {
       "example": "placement-top-right",
       "component": "Axis",
-      "path": "/example/Axis/placement-top-right",
+      "path": "/docs/components/Axis/placement-top-right",
       "lineNumber": 9,
       "line": "<Chart"
     },
     {
       "example": "placement-top-right-rule",
       "component": "Axis",
-      "path": "/example/Axis/placement-top-right-rule",
+      "path": "/docs/components/Axis/placement-top-right-rule",
       "lineNumber": 9,
       "line": "<Chart"
     },
     {
       "example": "radial-grid",
       "component": "Axis",
-      "path": "/example/Axis/radial-grid",
+      "path": "/docs/components/Axis/radial-grid",
       "lineNumber": 10,
       "line": "<Chart"
     },
     {
       "example": "radial-rule",
       "component": "Axis",
-      "path": "/example/Axis/radial-rule",
+      "path": "/docs/components/Axis/radial-rule",
       "lineNumber": 10,
       "line": "<Chart"
     },
     {
       "example": "remove-tick-marks",
       "component": "Axis",
-      "path": "/example/Axis/remove-tick-marks",
+      "path": "/docs/components/Axis/remove-tick-marks",
       "lineNumber": 9,
       "line": "<Chart"
     },
     {
       "example": "rotate-labels",
       "component": "Axis",
-      "path": "/example/Axis/rotate-labels",
+      "path": "/docs/components/Axis/rotate-labels",
       "lineNumber": 9,
       "line": "<Chart"
     },
     {
       "example": "tick-count",
       "component": "Axis",
-      "path": "/example/Axis/tick-count",
+      "path": "/docs/components/Axis/tick-count",
       "lineNumber": 5,
       "line": "<Chart xDomain={[0, 2]} padding={24} height={48}>"
     },
     {
       "example": "tick-label-styling",
       "component": "Axis",
-      "path": "/example/Axis/tick-label-styling",
+      "path": "/docs/components/Axis/tick-label-styling",
       "lineNumber": 9,
       "line": "<Chart xDomain={[timeDay.offset(today, -10), today]} padding={24} height={48}>"
     },
     {
       "example": "tick-spacing",
       "component": "Axis",
-      "path": "/example/Axis/tick-spacing",
+      "path": "/docs/components/Axis/tick-spacing",
       "lineNumber": 5,
       "line": "<Chart xDomain={[0, 2]} padding={24} height={48}>"
     },
     {
       "example": "time-scale-auto",
       "component": "Axis",
-      "path": "/example/Axis/time-scale-auto",
+      "path": "/docs/components/Axis/time-scale-auto",
       "lineNumber": 115,
       "line": "<Chart"
     },
     {
       "example": "time-scale-auto-format-filtering",
       "component": "Axis",
-      "path": "/example/Axis/time-scale-auto-format-filtering",
+      "path": "/docs/components/Axis/time-scale-auto-format-filtering",
       "lineNumber": 115,
       "line": "<Chart"
     },
     {
       "example": "time-scale-auto-multiline",
       "component": "Axis",
-      "path": "/example/Axis/time-scale-auto-multiline",
+      "path": "/docs/components/Axis/time-scale-auto-multiline",
       "lineNumber": 115,
       "line": "<Chart"
     },
     {
       "example": "time-scale-brush",
       "component": "Axis",
-      "path": "/example/Axis/time-scale-brush",
+      "path": "/docs/components/Axis/time-scale-brush",
       "lineNumber": 17,
       "line": "<Chart"
     },
     {
       "example": "time-scale-brush",
       "component": "Axis",
-      "path": "/example/Axis/time-scale-brush",
+      "path": "/docs/components/Axis/time-scale-brush",
       "lineNumber": 35,
       "line": "<Chart"
     },
     {
       "example": "time-scale-brush-multiline",
       "component": "Axis",
-      "path": "/example/Axis/time-scale-brush-multiline",
+      "path": "/docs/components/Axis/time-scale-brush-multiline",
       "lineNumber": 17,
       "line": "<Chart"
     },
     {
       "example": "time-scale-brush-multiline",
       "component": "Axis",
-      "path": "/example/Axis/time-scale-brush-multiline",
+      "path": "/docs/components/Axis/time-scale-brush-multiline",
       "lineNumber": 35,
       "line": "<Chart"
     },
     {
       "example": "time-scale-explicit",
       "component": "Axis",
-      "path": "/example/Axis/time-scale-explicit",
+      "path": "/docs/components/Axis/time-scale-explicit",
       "lineNumber": 110,
       "line": "<Chart"
     },
     {
       "example": "time-scale-explicit-multiline",
       "component": "Axis",
-      "path": "/example/Axis/time-scale-explicit-multiline",
+      "path": "/docs/components/Axis/time-scale-explicit-multiline",
       "lineNumber": 110,
       "line": "<Chart"
     },
     {
       "example": "horizontal-average-annotation-rule",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-average-annotation-rule",
+      "path": "/docs/components/Bars/horizontal-average-annotation-rule",
       "lineNumber": 18,
       "line": "<Chart"
     },
     {
       "example": "horizontal-basic",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-basic",
+      "path": "/docs/components/Bars/horizontal-basic",
       "lineNumber": 17,
       "line": "<Chart"
     },
     {
       "example": "horizontal-calculated-value-domain-negative",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-calculated-value-domain-negative",
+      "path": "/docs/components/Bars/horizontal-calculated-value-domain-negative",
       "lineNumber": 11,
       "line": "<Chart"
     },
     {
       "example": "horizontal-calculated-value-domain-positive",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-calculated-value-domain-positive",
+      "path": "/docs/components/Bars/horizontal-calculated-value-domain-positive",
       "lineNumber": 11,
       "line": "<Chart"
     },
     {
       "example": "horizontal-candlestick-bars",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-candlestick-bars",
+      "path": "/docs/components/Bars/horizontal-candlestick-bars",
       "lineNumber": 11,
       "line": "<Chart"
     },
     {
       "example": "horizontal-click-handler",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-click-handler",
+      "path": "/docs/components/Bars/horizontal-click-handler",
       "lineNumber": 17,
       "line": "<Chart"
     },
     {
       "example": "horizontal-customize-individual-styles",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-customize-individual-styles",
+      "path": "/docs/components/Bars/horizontal-customize-individual-styles",
       "lineNumber": 17,
       "line": "<Chart"
     },
     {
       "example": "horizontal-gradient",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-gradient",
+      "path": "/docs/components/Bars/horizontal-gradient",
       "lineNumber": 17,
       "line": "<Chart"
     },
     {
       "example": "horizontal-grouped",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-grouped",
+      "path": "/docs/components/Bars/horizontal-grouped",
       "lineNumber": 29,
       "line": "<Chart"
     },
     {
       "example": "horizontal-grouped-and-stacked",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-grouped-and-stacked",
+      "path": "/docs/components/Bars/horizontal-grouped-and-stacked",
       "lineNumber": 33,
       "line": "<Chart"
     },
     {
       "example": "horizontal-grouped-stacked-or-both-transition",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-grouped-stacked-or-both-transition",
+      "path": "/docs/components/Bars/horizontal-grouped-stacked-or-both-transition",
       "lineNumber": 62,
       "line": "<Chart"
     },
     {
       "example": "horizontal-highlight-individual-bar",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-highlight-individual-bar",
+      "path": "/docs/components/Bars/horizontal-highlight-individual-bar",
       "lineNumber": 17,
       "line": "<Chart"
     },
     {
       "example": "horizontal-highlight-individual-bar-line",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-highlight-individual-bar-line",
+      "path": "/docs/components/Bars/horizontal-highlight-individual-bar-line",
       "lineNumber": 17,
       "line": "<Chart"
     },
     {
       "example": "horizontal-inside-labels",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-inside-labels",
+      "path": "/docs/components/Bars/horizontal-inside-labels",
       "lineNumber": 11,
       "line": "<Chart"
     },
     {
       "example": "horizontal-limit-ticks-count",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-limit-ticks-count",
+      "path": "/docs/components/Bars/horizontal-limit-ticks-count",
       "lineNumber": 17,
       "line": "<Chart"
     },
     {
       "example": "horizontal-limit-ticks-second-scale",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-limit-ticks-second-scale",
+      "path": "/docs/components/Bars/horizontal-limit-ticks-second-scale",
       "lineNumber": 17,
       "line": "<Chart"
     },
     {
       "example": "horizontal-multiple-diverging",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-multiple-diverging",
+      "path": "/docs/components/Bars/horizontal-multiple-diverging",
       "lineNumber": 17,
       "line": "<Chart"
     },
     {
       "example": "horizontal-multiple-overlapping",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-multiple-overlapping",
+      "path": "/docs/components/Bars/horizontal-multiple-overlapping",
       "lineNumber": 17,
       "line": "<Chart"
     },
     {
       "example": "horizontal-outside-labels-default",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-outside-labels-default",
+      "path": "/docs/components/Bars/horizontal-outside-labels-default",
       "lineNumber": 11,
       "line": "<Chart"
     },
     {
       "example": "horizontal-rounded-right-only",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-rounded-right-only",
+      "path": "/docs/components/Bars/horizontal-rounded-right-only",
       "lineNumber": 17,
       "line": "<Chart"
     },
     {
       "example": "horizontal-stacked",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-stacked",
+      "path": "/docs/components/Bars/horizontal-stacked",
       "lineNumber": 29,
       "line": "<Chart"
     },
     {
       "example": "horizontal-stacked-percent",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-stacked-percent",
+      "path": "/docs/components/Bars/horizontal-stacked-percent",
       "lineNumber": 34,
       "line": "<Chart"
     },
     {
       "example": "horizontal-stagger-tween-on-mount",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-stagger-tween-on-mount",
+      "path": "/docs/components/Bars/horizontal-stagger-tween-on-mount",
       "lineNumber": 23,
       "line": "<Chart"
     },
     {
       "example": "horizontal-time-scale-with-inset",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-time-scale-with-inset",
+      "path": "/docs/components/Bars/horizontal-time-scale-with-inset",
       "lineNumber": 17,
       "line": "<Chart"
     },
     {
       "example": "horizontal-time-scale-with-interval",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-time-scale-with-interval",
+      "path": "/docs/components/Bars/horizontal-time-scale-with-interval",
       "lineNumber": 17,
       "line": "<Chart"
     },
     {
       "example": "horizontal-time-scale-with-missing-data",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-time-scale-with-missing-data",
+      "path": "/docs/components/Bars/horizontal-time-scale-with-missing-data",
       "lineNumber": 17,
       "line": "<Chart"
     },
     {
       "example": "horizontal-tooltip-and-bar-highlight",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-tooltip-and-bar-highlight",
+      "path": "/docs/components/Bars/horizontal-tooltip-and-bar-highlight",
       "lineNumber": 17,
       "line": "<Chart"
     },
     {
       "example": "horizontal-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
+      "path": "/docs/components/Bars/horizontal-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
       "lineNumber": 61,
       "line": "<Chart"
     },
     {
       "example": "horizontal-tooltip-and-clipped-highlight",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-tooltip-and-clipped-highlight",
+      "path": "/docs/components/Bars/horizontal-tooltip-and-clipped-highlight",
       "lineNumber": 17,
       "line": "<Chart"
     },
     {
       "example": "horizontal-tooltip-and-highlight",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-tooltip-and-highlight",
+      "path": "/docs/components/Bars/horizontal-tooltip-and-highlight",
       "lineNumber": 17,
       "line": "<Chart"
     },
     {
       "example": "horizontal-tween-on-mount",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-tween-on-mount",
+      "path": "/docs/components/Bars/horizontal-tween-on-mount",
       "lineNumber": 23,
       "line": "<Chart"
     },
     {
       "example": "horizontal-with-grid-on-top",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-with-grid-on-top",
+      "path": "/docs/components/Bars/horizontal-with-grid-on-top",
       "lineNumber": 17,
       "line": "<Chart"
     },
     {
       "example": "horizontal-with-grid-on-top-mix-blend",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-with-grid-on-top-mix-blend",
+      "path": "/docs/components/Bars/horizontal-with-grid-on-top-mix-blend",
       "lineNumber": 17,
       "line": "<Chart"
     },
     {
       "example": "vertical-average-annotation-rule",
       "component": "Bars",
-      "path": "/example/Bars/vertical-average-annotation-rule",
+      "path": "/docs/components/Bars/vertical-average-annotation-rule",
       "lineNumber": 17,
       "line": "<Chart"
     },
     {
       "example": "vertical-basic",
       "component": "Bars",
-      "path": "/example/Bars/vertical-basic",
+      "path": "/docs/components/Bars/vertical-basic",
       "lineNumber": 14,
       "line": "<Chart"
     },
     {
       "example": "vertical-calculated-value-domain-negative",
       "component": "Bars",
-      "path": "/example/Bars/vertical-calculated-value-domain-negative",
+      "path": "/docs/components/Bars/vertical-calculated-value-domain-negative",
       "lineNumber": 14,
       "line": "<Chart"
     },
     {
       "example": "vertical-calculated-value-domain-positive",
       "component": "Bars",
-      "path": "/example/Bars/vertical-calculated-value-domain-positive",
+      "path": "/docs/components/Bars/vertical-calculated-value-domain-positive",
       "lineNumber": 14,
       "line": "<Chart"
     },
     {
       "example": "vertical-click-handler",
       "component": "Bars",
-      "path": "/example/Bars/vertical-click-handler",
+      "path": "/docs/components/Bars/vertical-click-handler",
       "lineNumber": 14,
       "line": "<Chart"
     },
     {
       "example": "vertical-customize-individual-styles",
       "component": "Bars",
-      "path": "/example/Bars/vertical-customize-individual-styles",
+      "path": "/docs/components/Bars/vertical-customize-individual-styles",
       "lineNumber": 14,
       "line": "<Chart"
     },
     {
       "example": "vertical-gradient",
       "component": "Bars",
-      "path": "/example/Bars/vertical-gradient",
+      "path": "/docs/components/Bars/vertical-gradient",
       "lineNumber": 10,
       "line": "<Chart"
     },
     {
       "example": "vertical-grouped",
       "component": "Bars",
-      "path": "/example/Bars/vertical-grouped",
+      "path": "/docs/components/Bars/vertical-grouped",
       "lineNumber": 20,
       "line": "<Chart"
     },
     {
       "example": "vertical-grouped-and-stacked",
       "component": "Bars",
-      "path": "/example/Bars/vertical-grouped-and-stacked",
+      "path": "/docs/components/Bars/vertical-grouped-and-stacked",
       "lineNumber": 24,
       "line": "<Chart"
     },
     {
       "example": "vertical-grouped-stacked-or-both-transition",
       "component": "Bars",
-      "path": "/example/Bars/vertical-grouped-stacked-or-both-transition",
+      "path": "/docs/components/Bars/vertical-grouped-stacked-or-both-transition",
       "lineNumber": 58,
       "line": "<Chart"
     },
     {
       "example": "vertical-highlight-individual-bar",
       "component": "Bars",
-      "path": "/example/Bars/vertical-highlight-individual-bar",
+      "path": "/docs/components/Bars/vertical-highlight-individual-bar",
       "lineNumber": 14,
       "line": "<Chart"
     },
     {
       "example": "vertical-highlight-individual-bar-line",
       "component": "Bars",
-      "path": "/example/Bars/vertical-highlight-individual-bar-line",
+      "path": "/docs/components/Bars/vertical-highlight-individual-bar-line",
       "lineNumber": 10,
       "line": "<Chart"
     },
     {
       "example": "vertical-inside-labels",
       "component": "Bars",
-      "path": "/example/Bars/vertical-inside-labels",
+      "path": "/docs/components/Bars/vertical-inside-labels",
       "lineNumber": 10,
       "line": "<Chart"
     },
     {
       "example": "vertical-limit-ticks-count",
       "component": "Bars",
-      "path": "/example/Bars/vertical-limit-ticks-count",
+      "path": "/docs/components/Bars/vertical-limit-ticks-count",
       "lineNumber": 14,
       "line": "<Chart"
     },
     {
       "example": "vertical-limit-ticks-second-scale",
       "component": "Bars",
-      "path": "/example/Bars/vertical-limit-ticks-second-scale",
+      "path": "/docs/components/Bars/vertical-limit-ticks-second-scale",
       "lineNumber": 14,
       "line": "<Chart"
     },
     {
       "example": "vertical-multiple-diverging",
       "component": "Bars",
-      "path": "/example/Bars/vertical-multiple-diverging",
+      "path": "/docs/components/Bars/vertical-multiple-diverging",
       "lineNumber": 16,
       "line": "<Chart"
     },
     {
       "example": "vertical-multiple-diverging-rounded-specific",
       "component": "Bars",
-      "path": "/example/Bars/vertical-multiple-diverging-rounded-specific",
+      "path": "/docs/components/Bars/vertical-multiple-diverging-rounded-specific",
       "lineNumber": 27,
       "line": "<Chart"
     },
     {
       "example": "vertical-multiple-overlapping",
       "component": "Bars",
-      "path": "/example/Bars/vertical-multiple-overlapping",
+      "path": "/docs/components/Bars/vertical-multiple-overlapping",
       "lineNumber": 16,
       "line": "<Chart"
     },
     {
       "example": "vertical-outside-labels-default",
       "component": "Bars",
-      "path": "/example/Bars/vertical-outside-labels-default",
+      "path": "/docs/components/Bars/vertical-outside-labels-default",
       "lineNumber": 10,
       "line": "<Chart"
     },
     {
       "example": "vertical-rounded-top-only",
       "component": "Bars",
-      "path": "/example/Bars/vertical-rounded-top-only",
+      "path": "/docs/components/Bars/vertical-rounded-top-only",
       "lineNumber": 15,
       "line": "<Chart"
     },
     {
       "example": "vertical-stacked",
       "component": "Bars",
-      "path": "/example/Bars/vertical-stacked",
+      "path": "/docs/components/Bars/vertical-stacked",
       "lineNumber": 20,
       "line": "<Chart"
     },
     {
       "example": "vertical-stacked-percent",
       "component": "Bars",
-      "path": "/example/Bars/vertical-stacked-percent",
+      "path": "/docs/components/Bars/vertical-stacked-percent",
       "lineNumber": 24,
       "line": "<Chart"
     },
     {
       "example": "vertical-stagger-tween-on-mount",
       "component": "Bars",
-      "path": "/example/Bars/vertical-stagger-tween-on-mount",
+      "path": "/docs/components/Bars/vertical-stagger-tween-on-mount",
       "lineNumber": 20,
       "line": "<Chart"
     },
     {
       "example": "vertical-stagger-tween-on-mount-rounded-edge",
       "component": "Bars",
-      "path": "/example/Bars/vertical-stagger-tween-on-mount-rounded-edge",
+      "path": "/docs/components/Bars/vertical-stagger-tween-on-mount-rounded-edge",
       "lineNumber": 20,
       "line": "<Chart"
     },
     {
       "example": "vertical-time-scale-with-inset",
       "component": "Bars",
-      "path": "/example/Bars/vertical-time-scale-with-inset",
+      "path": "/docs/components/Bars/vertical-time-scale-with-inset",
       "lineNumber": 11,
       "line": "<Chart"
     },
     {
       "example": "vertical-time-scale-with-interval",
       "component": "Bars",
-      "path": "/example/Bars/vertical-time-scale-with-interval",
+      "path": "/docs/components/Bars/vertical-time-scale-with-interval",
       "lineNumber": 11,
       "line": "<Chart"
     },
     {
       "example": "vertical-time-scale-with-interval-months",
       "component": "Bars",
-      "path": "/example/Bars/vertical-time-scale-with-interval-months",
+      "path": "/docs/components/Bars/vertical-time-scale-with-interval-months",
       "lineNumber": 11,
       "line": "<Chart"
     },
     {
       "example": "vertical-time-scale-with-missing-data",
       "component": "Bars",
-      "path": "/example/Bars/vertical-time-scale-with-missing-data",
+      "path": "/docs/components/Bars/vertical-time-scale-with-missing-data",
       "lineNumber": 11,
       "line": "<Chart"
     },
     {
       "example": "vertical-tooltip-and-bar-highlight",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tooltip-and-bar-highlight",
+      "path": "/docs/components/Bars/vertical-tooltip-and-bar-highlight",
       "lineNumber": 14,
       "line": "<Chart"
     },
     {
       "example": "vertical-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
+      "path": "/docs/components/Bars/vertical-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
       "lineNumber": 61,
       "line": "<Chart"
     },
     {
       "example": "vertical-tooltip-and-clipped-highlight",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tooltip-and-clipped-highlight",
+      "path": "/docs/components/Bars/vertical-tooltip-and-clipped-highlight",
       "lineNumber": 16,
       "line": "<Chart"
     },
     {
       "example": "vertical-tooltip-and-highlight",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tooltip-and-highlight",
+      "path": "/docs/components/Bars/vertical-tooltip-and-highlight",
       "lineNumber": 15,
       "line": "<Chart"
     },
     {
       "example": "vertical-tween-on-mount",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tween-on-mount",
+      "path": "/docs/components/Bars/vertical-tween-on-mount",
       "lineNumber": 20,
       "line": "<Chart"
     },
     {
       "example": "vertical-tween-on-mount-rounded-edge",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tween-on-mount-rounded-edge",
+      "path": "/docs/components/Bars/vertical-tween-on-mount-rounded-edge",
       "lineNumber": 20,
       "line": "<Chart"
     },
     {
       "example": "vertical-with-grid-on-top",
       "component": "Bars",
-      "path": "/example/Bars/vertical-with-grid-on-top",
+      "path": "/docs/components/Bars/vertical-with-grid-on-top",
       "lineNumber": 14,
       "line": "<Chart"
     },
     {
       "example": "vertical-with-grid-on-top-mix-blend",
       "component": "Bars",
-      "path": "/example/Bars/vertical-with-grid-on-top-mix-blend",
+      "path": "/docs/components/Bars/vertical-with-grid-on-top-mix-blend",
       "lineNumber": 14,
       "line": "<Chart"
     },
     {
       "example": "basic",
       "component": "BrushContext",
-      "path": "/example/BrushContext/basic",
+      "path": "/docs/components/BrushContext/basic",
       "lineNumber": 10,
       "line": "<Chart {data} x=\"date\" y=\"value\" brush height={40}>"
     },
     {
       "example": "constant-labels",
       "component": "BrushContext",
-      "path": "/example/BrushContext/constant-labels",
+      "path": "/docs/components/BrushContext/constant-labels",
       "lineNumber": 10,
       "line": "<Chart {data} x=\"date\" y=\"value\" padding={{ left: 80, right: 80 }} brush height={40}>"
     },
     {
       "example": "handle-arrows",
       "component": "BrushContext",
-      "path": "/example/BrushContext/handle-arrows",
+      "path": "/docs/components/BrushContext/handle-arrows",
       "lineNumber": 13,
       "line": "<Chart"
     },
     {
       "example": "handle-labels",
       "component": "BrushContext",
-      "path": "/example/BrushContext/handle-labels",
+      "path": "/docs/components/BrushContext/handle-labels",
       "lineNumber": 11,
       "line": "<Chart {data} x=\"date\" y=\"value\" brush height={40}>"
     },
     {
       "example": "integrated-brush-(both-axis-area)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/integrated-brush-(both-axis-area)",
+      "path": "/docs/components/BrushContext/integrated-brush-(both-axis-area)",
       "lineNumber": 21,
       "line": "<Chart"
     },
     {
       "example": "integrated-brush-(x-axis)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/integrated-brush-(x-axis)",
+      "path": "/docs/components/BrushContext/integrated-brush-(x-axis)",
       "lineNumber": 20,
       "line": "<Chart"
     },
     {
       "example": "integrated-brush-(y-axis)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/integrated-brush-(y-axis)",
+      "path": "/docs/components/BrushContext/integrated-brush-(y-axis)",
       "lineNumber": 20,
       "line": "<Chart"
     },
     {
       "example": "minimap",
       "component": "BrushContext",
-      "path": "/example/BrushContext/minimap",
+      "path": "/docs/components/BrushContext/minimap",
       "lineNumber": 25,
       "line": "<Chart"
     },
     {
       "example": "minimap",
       "component": "BrushContext",
-      "path": "/example/BrushContext/minimap",
+      "path": "/docs/components/BrushContext/minimap",
       "lineNumber": 54,
       "line": "<Chart"
     },
     {
       "example": "selection",
       "component": "BrushContext",
-      "path": "/example/BrushContext/selection",
+      "path": "/docs/components/BrushContext/selection",
       "lineNumber": 23,
       "line": "<Chart"
     },
     {
       "example": "separate-chart-(clip-data-y-axis)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/separate-chart-(clip-data-y-axis)",
+      "path": "/docs/components/BrushContext/separate-chart-(clip-data-y-axis)",
       "lineNumber": 21,
       "line": "<Chart"
     },
     {
       "example": "separate-chart-(clip-data-y-axis)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/separate-chart-(clip-data-y-axis)",
+      "path": "/docs/components/BrushContext/separate-chart-(clip-data-y-axis)",
       "lineNumber": 40,
       "line": "<Chart {data} x=\"date\" y=\"value\" {yDomain} padding={{ left: 32, bottom: 24 }} height={300}>"
     },
     {
       "example": "separate-chart-(clip-data)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/separate-chart-(clip-data)",
+      "path": "/docs/components/BrushContext/separate-chart-(clip-data)",
       "lineNumber": 20,
       "line": "<Chart"
     },
     {
       "example": "separate-chart-(clip-data)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/separate-chart-(clip-data)",
+      "path": "/docs/components/BrushContext/separate-chart-(clip-data)",
       "lineNumber": 42,
       "line": "<Chart"
     },
     {
       "example": "separate-chart-(filter-data)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/separate-chart-(filter-data)",
+      "path": "/docs/components/BrushContext/separate-chart-(filter-data)",
       "lineNumber": 19,
       "line": "<Chart"
     },
     {
       "example": "separate-chart-(filter-data)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/separate-chart-(filter-data)",
+      "path": "/docs/components/BrushContext/separate-chart-(filter-data)",
       "lineNumber": 49,
       "line": "<Chart"
     },
     {
       "example": "simple-styling",
       "component": "BrushContext",
-      "path": "/example/BrushContext/simple-styling",
+      "path": "/docs/components/BrushContext/simple-styling",
       "lineNumber": 10,
       "line": "<Chart"
     },
     {
       "example": "striped-background",
       "component": "BrushContext",
-      "path": "/example/BrushContext/striped-background",
+      "path": "/docs/components/BrushContext/striped-background",
       "lineNumber": 10,
       "line": "<Chart {data} x=\"date\" y=\"value\" brush={{ classes: { range: 'striped-background' } }} height={40}>"
     },
     {
       "example": "sync-brushes-with-bind-xdomain",
       "component": "BrushContext",
-      "path": "/example/BrushContext/sync-brushes-with-bind-xdomain",
+      "path": "/docs/components/BrushContext/sync-brushes-with-bind-xdomain",
       "lineNumber": 55,
       "line": "<Chart"
     },
     {
       "example": "sync-brushes-with-bind-xdomain",
       "component": "BrushContext",
-      "path": "/example/BrushContext/sync-brushes-with-bind-xdomain",
+      "path": "/docs/components/BrushContext/sync-brushes-with-bind-xdomain",
       "lineNumber": 81,
       "line": "<Chart"
     },
     {
       "example": "tooltip-interop",
       "component": "BrushContext",
-      "path": "/example/BrushContext/tooltip-interop",
+      "path": "/docs/components/BrushContext/tooltip-interop",
       "lineNumber": 23,
       "line": "<Chart"
     },
     {
       "example": "90-days",
       "component": "Calendar",
-      "path": "/example/Calendar/90-days",
+      "path": "/docs/components/Calendar/90-days",
       "lineNumber": 22,
       "line": "<Chart"
     },
     {
       "example": "basic",
       "component": "Calendar",
-      "path": "/example/Calendar/basic",
+      "path": "/docs/components/Calendar/basic",
       "lineNumber": 24,
       "line": "<Chart"
     },
     {
       "example": "fixed-cell-size",
       "component": "Calendar",
-      "path": "/example/Calendar/fixed-cell-size",
+      "path": "/docs/components/Calendar/fixed-cell-size",
       "lineNumber": 24,
       "line": "<Chart"
     },
     {
       "example": "html-with-padding",
       "component": "Calendar",
-      "path": "/example/Calendar/html-with-padding",
+      "path": "/docs/components/Calendar/html-with-padding",
       "lineNumber": 24,
       "line": "<Chart"
     },
     {
       "example": "last-month",
       "component": "Calendar",
-      "path": "/example/Calendar/last-month",
+      "path": "/docs/components/Calendar/last-month",
       "lineNumber": 24,
       "line": "<Chart"
     },
     {
       "example": "multiple-years",
       "component": "Calendar",
-      "path": "/example/Calendar/multiple-years",
+      "path": "/docs/components/Calendar/multiple-years",
       "lineNumber": 20,
       "line": "<Chart"
     },
     {
       "example": "responsive-cell-size-default",
       "component": "Calendar",
-      "path": "/example/Calendar/responsive-cell-size-default",
+      "path": "/docs/components/Calendar/responsive-cell-size-default",
       "lineNumber": 24,
       "line": "<Chart"
     },
     {
       "example": "rounded-cells",
       "component": "Calendar",
-      "path": "/example/Calendar/rounded-cells",
+      "path": "/docs/components/Calendar/rounded-cells",
       "lineNumber": 24,
       "line": "<Chart"
     },
     {
       "example": "compound-dual-axis-with-single-chart-using-remapped-scale",
       "component": "Chart",
-      "path": "/example/Chart/compound-dual-axis-with-single-chart-using-remapped-scale",
+      "path": "/docs/components/Chart/compound-dual-axis-with-single-chart-using-remapped-scale",
       "lineNumber": 11,
       "line": "<Chart"
     },
     {
       "example": "compound-dual-axis-with-stacked-charts",
       "component": "Chart",
-      "path": "/example/Chart/compound-dual-axis-with-stacked-charts",
+      "path": "/docs/components/Chart/compound-dual-axis-with-stacked-charts",
       "lineNumber": 11,
       "line": "<Chart"
     },
     {
       "example": "compound-dual-axis-with-stacked-charts",
       "component": "Chart",
-      "path": "/example/Chart/compound-dual-axis-with-stacked-charts",
+      "path": "/docs/components/Chart/compound-dual-axis-with-stacked-charts",
       "lineNumber": 36,
       "line": "<Chart"
     },
     {
       "example": "styling-using-attributes",
       "component": "Circle",
-      "path": "/example/Circle/styling-using-attributes",
+      "path": "/docs/components/Circle/styling-using-attributes",
       "lineNumber": 5,
       "line": "<Chart"
     },
     {
       "example": "styling-using-classes",
       "component": "Circle",
-      "path": "/example/Circle/styling-using-classes",
+      "path": "/docs/components/Circle/styling-using-classes",
       "lineNumber": 5,
       "line": "<Chart"
     },
     {
       "example": "styling-using-css-variables",
       "component": "Circle",
-      "path": "/example/Circle/styling-using-css-variables",
+      "path": "/docs/components/Circle/styling-using-css-variables",
       "lineNumber": 5,
       "line": "<Chart"
     },
     {
       "example": "playground",
       "component": "Connector",
-      "path": "/example/Connector/playground",
+      "path": "/docs/components/Connector/playground",
       "lineNumber": 21,
       "line": "<Chart padding={{ left: 16, bottom: 24 }} height={400}>"
     },
     {
       "example": "basic",
       "component": "Dagre",
-      "path": "/example/Dagre/basic",
-      "lineNumber": 36,
+      "path": "/docs/components/Dagre/basic",
+      "lineNumber": 35,
       "line": "<Chart"
     },
     {
       "example": "playground",
       "component": "Dagre",
-      "path": "/example/Dagre/playground",
-      "lineNumber": 37,
+      "path": "/docs/components/Dagre/playground",
+      "lineNumber": 36,
       "line": "<Chart"
     },
     {
       "example": "software-user-flow",
       "component": "Dagre",
-      "path": "/example/Dagre/software-user-flow",
-      "lineNumber": 36,
+      "path": "/docs/components/Dagre/software-user-flow",
+      "lineNumber": 35,
       "line": "<Chart"
     },
     {
       "example": "tcp-state-diagram",
       "component": "Dagre",
-      "path": "/example/Dagre/tcp-state-diagram",
-      "lineNumber": 35,
+      "path": "/docs/components/Dagre/tcp-state-diagram",
+      "lineNumber": 34,
       "line": "<Chart"
     },
     {
       "example": "styling-using-attributes",
       "component": "Ellipse",
-      "path": "/example/Ellipse/styling-using-attributes",
+      "path": "/docs/components/Ellipse/styling-using-attributes",
       "lineNumber": 5,
       "line": "<Chart"
     },
     {
       "example": "styling-using-classes",
       "component": "Ellipse",
-      "path": "/example/Ellipse/styling-using-classes",
+      "path": "/docs/components/Ellipse/styling-using-classes",
       "lineNumber": 5,
       "line": "<Chart"
     },
     {
       "example": "styling-using-css-variables",
       "component": "Ellipse",
-      "path": "/example/Ellipse/styling-using-css-variables",
+      "path": "/docs/components/Ellipse/styling-using-css-variables",
       "lineNumber": 5,
       "line": "<Chart"
     },
     {
       "example": "beeswarm",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/beeswarm",
+      "path": "/docs/components/ForceSimulation/beeswarm",
       "lineNumber": 22,
       "line": "<Chart"
     },
     {
       "example": "collision-detection",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/collision-detection",
+      "path": "/docs/components/ForceSimulation/collision-detection",
       "lineNumber": 36,
-      "line": "<Chart height={600}>"
+      "line": "<Chart height={600} clip>"
     },
     {
       "example": "disjoint-graph",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/disjoint-graph",
+      "path": "/docs/components/ForceSimulation/disjoint-graph",
       "lineNumber": 53,
       "line": "<Chart height={680}>"
     },
     {
       "example": "graph-drag",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/graph-drag",
+      "path": "/docs/components/ForceSimulation/graph-drag",
       "lineNumber": 68,
       "line": "<Chart height={600}>"
     },
     {
       "example": "graph-playground",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/graph-playground",
+      "path": "/docs/components/ForceSimulation/graph-playground",
       "lineNumber": 145,
       "line": "<Chart height={600}>"
     },
     {
       "example": "group",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/group",
+      "path": "/docs/components/ForceSimulation/group",
       "lineNumber": 50,
       "line": "<Chart data={nodes} x=\"category\" xScale={scaleBand()} r=\"value\" rRange={[3, 12]} height={300}>"
     },
     {
       "example": "lattice",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/lattice",
+      "path": "/docs/components/ForceSimulation/lattice",
       "lineNumber": 26,
       "line": "<Chart height={800}>"
     },
     {
       "example": "text",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/text",
+      "path": "/docs/components/ForceSimulation/text",
       "lineNumber": 68,
       "line": "<Chart"
     },
     {
       "example": "tree",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/tree",
+      "path": "/docs/components/ForceSimulation/tree",
       "lineNumber": 32,
       "line": "<Chart height={600}>"
     },
     {
       "example": "basic",
       "component": "Frame",
-      "path": "/example/Frame/basic",
+      "path": "/docs/components/Frame/basic",
       "lineNumber": 5,
       "line": "<Chart"
     },
     {
       "example": "border",
       "component": "Frame",
-      "path": "/example/Frame/border",
+      "path": "/docs/components/Frame/border",
       "lineNumber": 5,
       "line": "<Chart"
     },
     {
       "example": "full",
       "component": "Frame",
-      "path": "/example/Frame/full",
+      "path": "/docs/components/Frame/full",
       "lineNumber": 5,
       "line": "<Chart"
     },
     {
       "example": "gradient",
       "component": "Frame",
-      "path": "/example/Frame/gradient",
+      "path": "/docs/components/Frame/gradient",
       "lineNumber": 5,
       "line": "<Chart"
     },
     {
       "example": "earthquake-globe",
       "component": "GeoCircle",
-      "path": "/example/GeoCircle/earthquake-globe",
+      "path": "/docs/components/GeoCircle/earthquake-globe",
       "lineNumber": 51,
       "line": "<Chart"
     },
     {
       "example": "playground",
       "component": "GeoCircle",
-      "path": "/example/GeoCircle/playground",
+      "path": "/docs/components/GeoCircle/playground",
       "lineNumber": 55,
       "line": "<Chart"
     },
     {
       "example": "geojson-preview",
       "component": "GeoContext",
-      "path": "/example/GeoContext/geojson-preview",
+      "path": "/docs/components/GeoContext/geojson-preview",
       "lineNumber": 89,
       "line": "<Chart"
     },
     {
       "example": "projection-playground",
       "component": "GeoContext",
-      "path": "/example/GeoContext/projection-playground",
+      "path": "/docs/components/GeoContext/projection-playground",
       "lineNumber": 63,
       "line": "<Chart"
     },
     {
       "example": "shapefile-preview",
       "component": "GeoContext",
-      "path": "/example/GeoContext/shapefile-preview",
+      "path": "/docs/components/GeoContext/shapefile-preview",
       "lineNumber": 103,
       "line": "<Chart"
     },
     {
       "example": "topojson-preview",
       "component": "GeoContext",
-      "path": "/example/GeoContext/topojson-preview",
+      "path": "/docs/components/GeoContext/topojson-preview",
       "lineNumber": 97,
       "line": "<Chart"
     },
     {
       "example": "animated-globe",
       "component": "GeoPath",
-      "path": "/example/GeoPath/animated-globe",
+      "path": "/docs/components/GeoPath/animated-globe",
       "lineNumber": 125,
       "line": "<Chart"
     },
     {
       "example": "bubble-map",
       "component": "GeoPath",
-      "path": "/example/GeoPath/bubble-map",
+      "path": "/docs/components/GeoPath/bubble-map",
       "lineNumber": 72,
       "line": "<Chart"
     },
     {
       "example": "choropleth",
       "component": "GeoPath",
-      "path": "/example/GeoPath/choropleth",
+      "path": "/docs/components/GeoPath/choropleth",
       "lineNumber": 58,
       "line": "<Chart"
     },
     {
       "example": "eclipses-globe",
       "component": "GeoPath",
-      "path": "/example/GeoPath/eclipses-globe",
+      "path": "/docs/components/GeoPath/eclipses-globe",
       "lineNumber": 66,
       "line": "<Chart"
     },
     {
       "example": "sketchy-globe",
       "component": "GeoPath",
-      "path": "/example/GeoPath/sketchy-globe",
+      "path": "/docs/components/GeoPath/sketchy-globe",
       "lineNumber": 42,
       "line": "<Chart"
     },
     {
       "example": "spike-map",
       "component": "GeoPath",
-      "path": "/example/GeoPath/spike-map",
+      "path": "/docs/components/GeoPath/spike-map",
       "lineNumber": 58,
       "line": "<Chart"
     },
     {
       "example": "submarine-cables-globe",
       "component": "GeoPath",
-      "path": "/example/GeoPath/submarine-cables-globe",
+      "path": "/docs/components/GeoPath/submarine-cables-globe",
       "lineNumber": 56,
       "line": "<Chart"
     },
     {
       "example": "timezones",
       "component": "GeoPath",
-      "path": "/example/GeoPath/timezones",
+      "path": "/docs/components/GeoPath/timezones",
       "lineNumber": 93,
       "line": "<Chart"
     },
     {
       "example": "tooltip",
       "component": "GeoPath",
-      "path": "/example/GeoPath/tooltip",
+      "path": "/docs/components/GeoPath/tooltip",
       "lineNumber": 14,
       "line": "<Chart"
     },
     {
       "example": "transform-canvas",
       "component": "GeoPath",
-      "path": "/example/GeoPath/transform-canvas",
+      "path": "/docs/components/GeoPath/transform-canvas",
       "lineNumber": 49,
       "line": "<Chart"
     },
     {
       "example": "transform-projection",
       "component": "GeoPath",
-      "path": "/example/GeoPath/transform-projection",
-      "lineNumber": 50,
+      "path": "/docs/components/GeoPath/transform-projection",
+      "lineNumber": 49,
       "line": "<Chart"
     },
     {
       "example": "translucent-globe",
       "component": "GeoPath",
-      "path": "/example/GeoPath/translucent-globe",
+      "path": "/docs/components/GeoPath/translucent-globe",
       "lineNumber": 45,
       "line": "<Chart"
     },
     {
       "example": "us-country-map",
       "component": "GeoPath",
-      "path": "/example/GeoPath/us-country-map",
+      "path": "/docs/components/GeoPath/us-country-map",
       "lineNumber": 15,
       "line": "<Chart"
     },
     {
       "example": "us-state",
       "component": "GeoPath",
-      "path": "/example/GeoPath/us-state",
+      "path": "/docs/components/GeoPath/us-state",
       "lineNumber": 37,
       "line": "<Chart"
     },
     {
       "example": "us-state-with-counties",
       "component": "GeoPath",
-      "path": "/example/GeoPath/us-state-with-counties",
+      "path": "/docs/components/GeoPath/us-state-with-counties",
       "lineNumber": 41,
       "line": "<Chart"
     },
     {
       "example": "us-state-with-surrounding-states",
       "component": "GeoPath",
-      "path": "/example/GeoPath/us-state-with-surrounding-states",
+      "path": "/docs/components/GeoPath/us-state-with-surrounding-states",
       "lineNumber": 38,
       "line": "<Chart"
     },
     {
       "example": "icons",
       "component": "GeoPoint",
-      "path": "/example/GeoPoint/icons",
-      "lineNumber": 26,
+      "path": "/docs/components/GeoPoint/icons",
+      "lineNumber": 20,
       "line": "<Chart"
     },
     {
       "example": "us-airports",
       "component": "GeoPoint",
-      "path": "/example/GeoPoint/us-airports",
+      "path": "/docs/components/GeoPoint/us-airports",
       "lineNumber": 26,
       "line": "<Chart"
     },
     {
       "example": "us-state-capitals",
       "component": "GeoPoint",
-      "path": "/example/GeoPoint/us-state-capitals",
+      "path": "/docs/components/GeoPoint/us-state-capitals",
       "lineNumber": 18,
       "line": "<Chart"
     },
     {
       "example": "world-airports",
       "component": "GeoPoint",
-      "path": "/example/GeoPoint/world-airports",
+      "path": "/docs/components/GeoPoint/world-airports",
       "lineNumber": 26,
       "line": "<Chart"
     },
     {
       "example": "world-capitals",
       "component": "GeoPoint",
-      "path": "/example/GeoPoint/world-capitals",
+      "path": "/docs/components/GeoPoint/world-capitals",
       "lineNumber": 26,
       "line": "<Chart"
     },
     {
       "example": "draggable-globe",
       "component": "GeoSpline",
-      "path": "/example/GeoSpline/draggable-globe",
+      "path": "/docs/components/GeoSpline/draggable-globe",
       "lineNumber": 17,
       "line": "<Chart"
     },
     {
       "example": "world-map",
       "component": "GeoSpline",
-      "path": "/example/GeoSpline/world-map",
+      "path": "/docs/components/GeoSpline/world-map",
       "lineNumber": 29,
       "line": "<Chart"
     },
     {
       "example": "basic",
       "component": "GeoTile",
-      "path": "/example/GeoTile/basic",
-      "lineNumber": 34,
+      "path": "/docs/components/GeoTile/basic",
+      "lineNumber": 33,
       "line": "<Chart"
     },
     {
       "example": "clipped",
       "component": "GeoTile",
-      "path": "/example/GeoTile/clipped",
+      "path": "/docs/components/GeoTile/clipped",
       "lineNumber": 33,
       "line": "<Chart"
     },
     {
       "example": "zoomable",
       "component": "GeoTile",
-      "path": "/example/GeoTile/zoomable",
+      "path": "/docs/components/GeoTile/zoomable",
       "lineNumber": 44,
       "line": "<Chart"
     },
     {
       "example": "zoomable-seamless-layers",
       "component": "GeoTile",
-      "path": "/example/GeoTile/zoomable-seamless-layers",
+      "path": "/docs/components/GeoTile/zoomable-seamless-layers",
       "lineNumber": 44,
       "line": "<Chart"
     },
     {
       "example": "zoomable-with-padding",
       "component": "GeoTile",
-      "path": "/example/GeoTile/zoomable-with-padding",
-      "lineNumber": 45,
+      "path": "/docs/components/GeoTile/zoomable-with-padding",
+      "lineNumber": 44,
       "line": "<Chart"
     },
     {
       "example": "basic",
       "component": "Graticule",
-      "path": "/example/Graticule/basic",
+      "path": "/docs/components/Graticule/basic",
       "lineNumber": 51,
       "line": "<Chart"
     },
     {
       "example": "band-scale-between",
       "component": "Grid",
-      "path": "/example/Grid/band-scale-between",
+      "path": "/docs/components/Grid/band-scale-between",
       "lineNumber": 5,
       "line": "<Chart"
     },
     {
       "example": "band-scale-default",
       "component": "Grid",
-      "path": "/example/Grid/band-scale-default",
+      "path": "/docs/components/Grid/band-scale-default",
       "lineNumber": 5,
       "line": "<Chart"
     },
     {
       "example": "basic",
       "component": "Grid",
-      "path": "/example/Grid/basic",
+      "path": "/docs/components/Grid/basic",
       "lineNumber": 5,
       "line": "<Chart xDomain={[0, 100]} yDomain={[0, 100]} height={300}>"
     },
     {
       "example": "dashed-lines",
       "component": "Grid",
-      "path": "/example/Grid/dashed-lines",
+      "path": "/docs/components/Grid/dashed-lines",
       "lineNumber": 5,
       "line": "<Chart xDomain={[0, 100]} yDomain={[0, 100]} height={300}>"
     },
     {
       "example": "explicit-ticks",
       "component": "Grid",
-      "path": "/example/Grid/explicit-ticks",
+      "path": "/docs/components/Grid/explicit-ticks",
       "lineNumber": 5,
       "line": "<Chart yDomain={[0, 100]} padding={{ left: 20 }} height={200}>"
     },
     {
       "example": "inject-tick-value",
       "component": "Grid",
-      "path": "/example/Grid/inject-tick-value",
+      "path": "/docs/components/Grid/inject-tick-value",
       "lineNumber": 5,
       "line": "<Chart yDomain={[0, 100]} padding={{ top: 20, bottom: 20, left: 20, right: 20 }} height={300}>"
     },
     {
       "example": "integer-only",
       "component": "Grid",
-      "path": "/example/Grid/integer-only",
+      "path": "/docs/components/Grid/integer-only",
       "lineNumber": 5,
       "line": "<Chart yDomain={[0, 2]} padding={defaultChartPadding({ top: 10, bottom: 10 })} height={200}>"
     },
     {
       "example": "padding",
       "component": "Grid",
-      "path": "/example/Grid/padding",
+      "path": "/docs/components/Grid/padding",
       "lineNumber": 5,
       "line": "<Chart"
     },
     {
       "example": "radial",
       "component": "Grid",
-      "path": "/example/Grid/radial",
+      "path": "/docs/components/Grid/radial",
       "lineNumber": 5,
       "line": "<Chart xDomain={[0, 100]} yDomain={[0, 100]} radial height={300}>"
     },
     {
       "example": "radial-linear",
       "component": "Grid",
-      "path": "/example/Grid/radial-linear",
+      "path": "/docs/components/Grid/radial-linear",
       "lineNumber": 5,
       "line": "<Chart xDomain={[0, 100]} yDomain={[0, 100]} radial height={300}>"
     },
     {
       "example": "tick-count",
       "component": "Grid",
-      "path": "/example/Grid/tick-count",
+      "path": "/docs/components/Grid/tick-count",
       "lineNumber": 5,
       "line": "<Chart yDomain={[0, 100]} padding={{ top: 20, bottom: 20, left: 20, right: 20 }} height={300}>"
     },
     {
       "example": "tick-count-null",
       "component": "Grid",
-      "path": "/example/Grid/tick-count-null",
+      "path": "/docs/components/Grid/tick-count-null",
       "lineNumber": 5,
       "line": "<Chart yDomain={[0, 100]} padding={{ top: 20, bottom: 20, left: 20, right: 20 }} height={300}>"
     },
     {
       "example": "tick-count-responsive",
       "component": "Grid",
-      "path": "/example/Grid/tick-count-responsive",
+      "path": "/docs/components/Grid/tick-count-responsive",
       "lineNumber": 7,
       "line": "<!-- <Chart"
     },
     {
       "example": "x-only",
       "component": "Grid",
-      "path": "/example/Grid/x-only",
+      "path": "/docs/components/Grid/x-only",
       "lineNumber": 5,
       "line": "<Chart xDomain={[0, 100]} yDomain={[0, 100]} height={300}>"
     },
     {
       "example": "y-only",
       "component": "Grid",
-      "path": "/example/Grid/y-only",
+      "path": "/docs/components/Grid/y-only",
       "lineNumber": 5,
       "line": "<Chart xDomain={[0, 100]} yDomain={[0, 100]} height={300}>"
     },
     {
       "example": "basic",
       "component": "Group",
-      "path": "/example/Group/basic",
+      "path": "/docs/components/Group/basic",
       "lineNumber": 5,
       "line": "<Chart xDomain={[0, 100]} yDomain={[0, 100]} padding={{ bottom: 20, left: 20 }} height={300}>"
     },
     {
       "example": "geo",
       "component": "Hull",
-      "path": "/example/Hull/geo",
+      "path": "/docs/components/Hull/geo",
       "lineNumber": 21,
       "line": "<Chart"
     },
     {
       "example": "scatter",
       "component": "Hull",
-      "path": "/example/Hull/scatter",
+      "path": "/docs/components/Hull/scatter",
       "lineNumber": 23,
       "line": "<Chart"
     },
     {
       "example": "all-3-layers",
       "component": "Layer",
-      "path": "/example/Layer/all-3-layers",
+      "path": "/docs/components/Layer/all-3-layers",
       "lineNumber": 5,
       "line": "<Chart height={200}>"
     },
     {
       "example": "chart-integration",
       "component": "Legend",
-      "path": "/example/Legend/chart-integration",
+      "path": "/docs/components/Legend/chart-integration",
       "lineNumber": 6,
       "line": "<Chart"
     },
     {
       "example": "chart-placement",
       "component": "Legend",
-      "path": "/example/Legend/chart-placement",
+      "path": "/docs/components/Legend/chart-placement",
       "lineNumber": 6,
       "line": "<Chart"
     },
     {
       "example": "styling-using-attributes",
       "component": "Line",
-      "path": "/example/Line/styling-using-attributes",
+      "path": "/docs/components/Line/styling-using-attributes",
       "lineNumber": 5,
       "line": "<Chart"
     },
     {
       "example": "styling-using-classes",
       "component": "Line",
-      "path": "/example/Line/styling-using-classes",
+      "path": "/docs/components/Line/styling-using-classes",
       "lineNumber": 5,
       "line": "<Chart"
     },
     {
       "example": "styling-using-css-variables",
       "component": "Line",
-      "path": "/example/Line/styling-using-css-variables",
+      "path": "/docs/components/Line/styling-using-css-variables",
       "lineNumber": 5,
       "line": "<Chart"
     },
     {
       "example": "direction-with-custom-colors",
       "component": "LinearGradient",
-      "path": "/example/LinearGradient/direction-with-custom-colors",
+      "path": "/docs/components/LinearGradient/direction-with-custom-colors",
       "lineNumber": 5,
       "line": "<Chart height={300}>"
     },
     {
       "example": "explicit-offsets",
       "component": "LinearGradient",
-      "path": "/example/LinearGradient/explicit-offsets",
+      "path": "/docs/components/LinearGradient/explicit-offsets",
       "lineNumber": 5,
       "line": "<Chart height={300}>"
     },
     {
       "example": "tailwind-colors",
       "component": "LinearGradient",
-      "path": "/example/LinearGradient/tailwind-colors",
+      "path": "/docs/components/LinearGradient/tailwind-colors",
       "lineNumber": 6,
       "line": "<Chart height={320} width={1065}>"
     },
     {
       "example": "units",
       "component": "LinearGradient",
-      "path": "/example/LinearGradient/units",
+      "path": "/docs/components/LinearGradient/units",
       "lineNumber": 6,
       "line": "<Chart height={320} width={700}>"
     },
     {
       "example": "line",
       "component": "Marker",
-      "path": "/example/Marker/line",
+      "path": "/docs/components/Marker/line",
       "lineNumber": 29,
       "line": "<Chart {data} x=\"x\" y=\"y\" height={35}>"
     },
     {
       "example": "orientation",
       "component": "Marker",
-      "path": "/example/Marker/orientation",
+      "path": "/docs/components/Marker/orientation",
       "lineNumber": 34,
       "line": "<Chart {data} x=\"x\" y=\"y\" height={200}>"
     },
     {
       "example": "orientation",
       "component": "Marker",
-      "path": "/example/Marker/orientation",
+      "path": "/docs/components/Marker/orientation",
       "lineNumber": 48,
       "line": "<Chart {data} x=\"x\" y=\"y\" height={200}>"
     },
     {
       "example": "orientation",
       "component": "Marker",
-      "path": "/example/Marker/orientation",
+      "path": "/docs/components/Marker/orientation",
       "lineNumber": 62,
       "line": "<Chart {data} x=\"x\" y=\"y\" height={200}>"
     },
     {
       "example": "spline",
       "component": "Marker",
-      "path": "/example/Marker/spline",
+      "path": "/docs/components/Marker/spline",
       "lineNumber": 40,
       "line": "<Chart {data} x=\"x\" y=\"y\" height={100}>"
     },
     {
       "example": "spline-w-thicker-stroke",
       "component": "Marker",
-      "path": "/example/Marker/spline-w-thicker-stroke",
+      "path": "/docs/components/Marker/spline-w-thicker-stroke",
       "lineNumber": 41,
       "line": "<Chart {data} x=\"x\" y=\"y\" height={100}>"
     },
     {
       "example": "styling",
       "component": "Marker",
-      "path": "/example/Marker/styling",
+      "path": "/docs/components/Marker/styling",
       "lineNumber": 32,
       "line": "<Chart {data} x=\"x\" y=\"y\" height={200}>"
     },
     {
       "example": "repeat-indefinitely",
       "component": "MotionPath",
-      "path": "/example/MotionPath/repeat-indefinitely",
+      "path": "/docs/components/MotionPath/repeat-indefinitely",
       "lineNumber": 36,
       "line": "<Chart {data} x=\"x\" y=\"y\" yNice padding={{ left: 16, bottom: 24 }} height={300}>"
     },
     {
       "example": "rotate-object-with-path",
       "component": "MotionPath",
-      "path": "/example/MotionPath/rotate-object-with-path",
+      "path": "/docs/components/MotionPath/rotate-object-with-path",
       "lineNumber": 37,
       "line": "<Chart {data} x=\"x\" y=\"y\" yNice padding={{ left: 16, bottom: 24 }} height={300}>"
     },
     {
       "example": "sync-with-draw",
       "component": "MotionPath",
-      "path": "/example/MotionPath/sync-with-draw",
+      "path": "/docs/components/MotionPath/sync-with-draw",
       "lineNumber": 37,
       "line": "<Chart {data} x=\"x\" y=\"y\" yNice padding={{ left: 16, bottom: 24 }} height={300}>"
     },
     {
       "example": "basic",
       "component": "Pack",
-      "path": "/example/Pack/basic",
+      "path": "/docs/components/Pack/basic",
       "lineNumber": 96,
       "line": "<Chart"
     },
     {
       "example": "filterable",
       "component": "Partition",
-      "path": "/example/Partition/filterable",
+      "path": "/docs/components/Partition/filterable",
       "lineNumber": 105,
       "line": "<Chart height={600}>"
     },
     {
       "example": "horizontal",
       "component": "Partition",
-      "path": "/example/Partition/horizontal",
+      "path": "/docs/components/Partition/horizontal",
       "lineNumber": 84,
       "line": "<Chart height={600}>"
     },
     {
       "example": "sunburst",
       "component": "Partition",
-      "path": "/example/Partition/sunburst",
+      "path": "/docs/components/Partition/sunburst",
       "lineNumber": 62,
       "line": "<Chart height={600}>"
     },
     {
       "example": "vertical",
       "component": "Partition",
-      "path": "/example/Partition/vertical",
+      "path": "/docs/components/Partition/vertical",
       "lineNumber": 85,
       "line": "<Chart height={600}>"
     },
     {
       "example": "basic",
       "component": "Path",
-      "path": "/example/Path/basic",
+      "path": "/docs/components/Path/basic",
       "lineNumber": 5,
       "line": "<Chart height={300}>"
     },
     {
       "example": "circles",
       "component": "Pattern",
-      "path": "/example/Pattern/circles",
+      "path": "/docs/components/Pattern/circles",
       "lineNumber": 5,
       "line": "<Chart height={300}>"
     },
     {
       "example": "circles-custom-pattern-svg-only",
       "component": "Pattern",
-      "path": "/example/Pattern/circles-custom-pattern-svg-only",
+      "path": "/docs/components/Pattern/circles-custom-pattern-svg-only",
       "lineNumber": 5,
       "line": "<Chart height={300}>"
     },
     {
       "example": "lineargradient-as-pattern",
       "component": "Pattern",
-      "path": "/example/Pattern/lineargradient-as-pattern",
+      "path": "/docs/components/Pattern/lineargradient-as-pattern",
       "lineNumber": 5,
       "line": "<Chart height={300}>"
     },
     {
       "example": "lines",
       "component": "Pattern",
-      "path": "/example/Pattern/lines",
+      "path": "/docs/components/Pattern/lines",
       "lineNumber": 5,
       "line": "<Chart height={300}>"
     },
     {
       "example": "lines-custom-pattern-svg-only",
       "component": "Pattern",
-      "path": "/example/Pattern/lines-custom-pattern-svg-only",
+      "path": "/docs/components/Pattern/lines-custom-pattern-svg-only",
       "lineNumber": 5,
       "line": "<Chart height={300}>"
     },
     {
       "example": "with-fill-color",
       "component": "Pattern",
-      "path": "/example/Pattern/with-fill-color",
+      "path": "/docs/components/Pattern/with-fill-color",
       "lineNumber": 5,
       "line": "<Chart height={300}>"
     },
     {
       "example": "with-lineargradient",
       "component": "Pattern",
-      "path": "/example/Pattern/with-lineargradient",
+      "path": "/docs/components/Pattern/with-lineargradient",
       "lineNumber": 5,
       "line": "<Chart height={300}>"
     },
     {
       "example": "basic",
       "component": "Pie",
-      "path": "/example/Pie/basic",
+      "path": "/docs/components/Pie/basic",
       "lineNumber": 34,
       "line": "<Chart {data} x=\"value\" c=\"date\" cRange={keyColors} height={300}>"
     },
     {
       "example": "default-slot-render-each-arc",
       "component": "Pie",
-      "path": "/example/Pie/default-slot-render-each-arc",
+      "path": "/docs/components/Pie/default-slot-render-each-arc",
       "lineNumber": 35,
       "line": "<Chart {data} x=\"value\" c=\"date\" cRange={keyColors} height={300}>"
     },
     {
       "example": "disable-sorting",
       "component": "Pie",
-      "path": "/example/Pie/disable-sorting",
+      "path": "/docs/components/Pie/disable-sorting",
       "lineNumber": 34,
       "line": "<Chart {data} x=\"value\" c=\"date\" cRange={keyColors} height={300}>"
     },
     {
       "example": "inner-radius-negative",
       "component": "Pie",
-      "path": "/example/Pie/inner-radius-negative",
+      "path": "/docs/components/Pie/inner-radius-negative",
       "lineNumber": 17,
       "line": "<Chart {data} x=\"value\" c=\"date\" cRange={keyColors} height={300}>"
     },
     {
       "example": "inner-radius-positive",
       "component": "Pie",
-      "path": "/example/Pie/inner-radius-positive",
+      "path": "/docs/components/Pie/inner-radius-positive",
       "lineNumber": 17,
       "line": "<Chart {data} x=\"value\" c=\"date\" cRange={keyColors} height={300}>"
     },
     {
       "example": "inner-radius-zero-one",
       "component": "Pie",
-      "path": "/example/Pie/inner-radius-zero-one",
+      "path": "/docs/components/Pie/inner-radius-zero-one",
       "lineNumber": 17,
       "line": "<Chart {data} x=\"value\" c=\"date\" cRange={keyColors} height={300}>"
     },
     {
       "example": "labels",
       "component": "Pie",
-      "path": "/example/Pie/labels",
+      "path": "/docs/components/Pie/labels",
       "lineNumber": 18,
       "line": "<Chart {data} x=\"value\" c=\"date\" height={300}>"
     },
     {
       "example": "labels-centroid",
       "component": "Pie",
-      "path": "/example/Pie/labels-centroid",
+      "path": "/docs/components/Pie/labels-centroid",
       "lineNumber": 18,
       "line": "<Chart {data} x=\"value\" c=\"date\" height={300}>"
     },
     {
       "example": "labels-centroid-multiple",
       "component": "Pie",
-      "path": "/example/Pie/labels-centroid-multiple",
+      "path": "/docs/components/Pie/labels-centroid-multiple",
       "lineNumber": 21,
       "line": "<Chart {data} x=\"value\" c=\"date\" height={300}>"
     },
     {
       "example": "labels-outer",
       "component": "Pie",
-      "path": "/example/Pie/labels-outer",
+      "path": "/docs/components/Pie/labels-outer",
       "lineNumber": 18,
       "line": "<Chart {data} x=\"value\" c=\"date\" height={300}>"
     },
     {
       "example": "labels-outer-radial",
       "component": "Pie",
-      "path": "/example/Pie/labels-outer-radial",
+      "path": "/docs/components/Pie/labels-outer-radial",
       "lineNumber": 18,
       "line": "<Chart {data} x=\"value\" c=\"date\" padding={24} height={400}>"
     },
     {
       "example": "labels-outer-with-padding",
       "component": "Pie",
-      "path": "/example/Pie/labels-outer-with-padding",
+      "path": "/docs/components/Pie/labels-outer-with-padding",
       "lineNumber": 18,
       "line": "<Chart {data} x=\"value\" c=\"date\" height={320}>"
     },
     {
       "example": "multiple-data-prop",
       "component": "Pie",
-      "path": "/example/Pie/multiple-data-prop",
+      "path": "/docs/components/Pie/multiple-data-prop",
       "lineNumber": 18,
       "line": "<Chart {data} x=\"value\" c=\"date\" cRange={keyColors} height={300}>"
     },
     {
       "example": "offset",
       "component": "Pie",
-      "path": "/example/Pie/offset",
+      "path": "/docs/components/Pie/offset",
       "lineNumber": 17,
       "line": "<Chart {data} x=\"value\" c=\"date\" cRange={keyColors} height={300}>"
     },
     {
       "example": "outer-radius",
       "component": "Pie",
-      "path": "/example/Pie/outer-radius",
+      "path": "/docs/components/Pie/outer-radius",
       "lineNumber": 17,
       "line": "<Chart {data} x=\"value\" c=\"date\" cRange={keyColors} height={300}>"
     },
     {
       "example": "pad-angle",
       "component": "Pie",
-      "path": "/example/Pie/pad-angle",
+      "path": "/docs/components/Pie/pad-angle",
       "lineNumber": 17,
       "line": "<Chart {data} x=\"value\" c=\"date\" cRange={keyColors} height={300}>"
     },
     {
       "example": "pad-angle-with-inner-radius",
       "component": "Pie",
-      "path": "/example/Pie/pad-angle-with-inner-radius",
+      "path": "/docs/components/Pie/pad-angle-with-inner-radius",
       "lineNumber": 17,
       "line": "<Chart {data} x=\"value\" c=\"date\" cRange={keyColors} height={300}>"
     },
     {
       "example": "partial-range-chart-xrange",
       "component": "Pie",
-      "path": "/example/Pie/partial-range-chart-xrange",
+      "path": "/docs/components/Pie/partial-range-chart-xrange",
       "lineNumber": 17,
       "line": "<Chart {data} x=\"value\" c=\"date\" xRange={[-90, 90]} cRange={keyColors} height={300}>"
     },
     {
       "example": "partial-range-range-prop",
       "component": "Pie",
-      "path": "/example/Pie/partial-range-range-prop",
+      "path": "/docs/components/Pie/partial-range-range-prop",
       "lineNumber": 17,
       "line": "<Chart {data} x=\"value\" c=\"date\" cRange={keyColors} height={300}>"
     },
     {
       "example": "placement",
       "component": "Pie",
-      "path": "/example/Pie/placement",
+      "path": "/docs/components/Pie/placement",
       "lineNumber": 17,
       "line": "<Chart {data} x=\"value\" c=\"date\" cRange={keyColors} height={300}>"
     },
     {
       "example": "placement-center",
       "component": "Pie",
-      "path": "/example/Pie/placement-center",
+      "path": "/docs/components/Pie/placement-center",
       "lineNumber": 17,
       "line": "<Chart {data} x=\"value\" c=\"date\" cRange={keyColors} height={300}>"
     },
     {
       "example": "placement-left",
       "component": "Pie",
-      "path": "/example/Pie/placement-left",
+      "path": "/docs/components/Pie/placement-left",
       "lineNumber": 17,
       "line": "<Chart {data} x=\"value\" c=\"date\" cRange={keyColors} height={300}>"
     },
     {
       "example": "placement-right",
       "component": "Pie",
-      "path": "/example/Pie/placement-right",
+      "path": "/docs/components/Pie/placement-right",
       "lineNumber": 17,
       "line": "<Chart {data} x=\"value\" c=\"date\" cRange={keyColors} height={300}>"
     },
     {
       "example": "tooltip",
       "component": "Pie",
-      "path": "/example/Pie/tooltip",
+      "path": "/docs/components/Pie/tooltip",
       "lineNumber": 19,
       "line": "<Chart {data} x=\"value\" c=\"date\" cRange={keyColors} height={300}>"
     },
     {
       "example": "tooltip-with-arcs-slot",
       "component": "Pie",
-      "path": "/example/Pie/tooltip-with-arcs-slot",
+      "path": "/docs/components/Pie/tooltip-with-arcs-slot",
       "lineNumber": 28,
       "line": "<Chart {data} x=\"value\" c=\"date\" cRange={keyColors} height={300}>"
     },
     {
       "example": "tweened",
       "component": "Pie",
-      "path": "/example/Pie/tweened",
+      "path": "/docs/components/Pie/tweened",
       "lineNumber": 22,
       "line": "<Chart {data} x=\"value\" c=\"date\" cRange={keyColors} height={300}>"
     },
     {
       "example": "basic",
       "component": "Point",
-      "path": "/example/Point/basic",
+      "path": "/docs/components/Point/basic",
       "lineNumber": 9,
       "line": "<Chart"
     },
     {
       "example": "basic",
       "component": "Points",
-      "path": "/example/Points/basic",
+      "path": "/docs/components/Points/basic",
       "lineNumber": 10,
       "line": "<Chart {data} x=\"date\" y=\"value\" yDomain={[0, null]} yNice padding={20} height={300}>"
     },
     {
       "example": "color-via-scale",
       "component": "Points",
-      "path": "/example/Points/color-via-scale",
+      "path": "/docs/components/Points/color-via-scale",
       "lineNumber": 11,
       "line": "<Chart"
     },
     {
       "example": "with-labels",
       "component": "Points",
-      "path": "/example/Points/with-labels",
+      "path": "/docs/components/Points/with-labels",
       "lineNumber": 10,
       "line": "<Chart {data} x=\"date\" y=\"value\" yDomain={[0, null]} yNice padding={20} height={300}>"
     },
     {
       "example": "with-tooltip-and-highlight",
       "component": "Points",
-      "path": "/example/Points/with-tooltip-and-highlight",
+      "path": "/docs/components/Points/with-tooltip-and-highlight",
       "lineNumber": 10,
       "line": "<Chart"
     },
     {
       "example": "10-point-star",
       "component": "Polygon",
-      "path": "/example/Polygon/10-point-star",
+      "path": "/docs/components/Polygon/10-point-star",
       "lineNumber": 15,
       "line": "<Chart height={150}>"
     },
     {
       "example": "12-point-star",
       "component": "Polygon",
-      "path": "/example/Polygon/12-point-star",
+      "path": "/docs/components/Polygon/12-point-star",
       "lineNumber": 15,
       "line": "<Chart height={150}>"
     },
     {
       "example": "14-point-star",
       "component": "Polygon",
-      "path": "/example/Polygon/14-point-star",
+      "path": "/docs/components/Polygon/14-point-star",
       "lineNumber": 15,
       "line": "<Chart height={150}>"
     },
     {
       "example": "16-point-star",
       "component": "Polygon",
-      "path": "/example/Polygon/16-point-star",
+      "path": "/docs/components/Polygon/16-point-star",
       "lineNumber": 15,
       "line": "<Chart height={150}>"
     },
     {
       "example": "18-point-star",
       "component": "Polygon",
-      "path": "/example/Polygon/18-point-star",
+      "path": "/docs/components/Polygon/18-point-star",
       "lineNumber": 15,
       "line": "<Chart height={150}>"
     },
     {
       "example": "20-point-star",
       "component": "Polygon",
-      "path": "/example/Polygon/20-point-star",
+      "path": "/docs/components/Polygon/20-point-star",
       "lineNumber": 15,
       "line": "<Chart height={150}>"
     },
     {
       "example": "6-point-star",
       "component": "Polygon",
-      "path": "/example/Polygon/6-point-star",
+      "path": "/docs/components/Polygon/6-point-star",
       "lineNumber": 15,
       "line": "<Chart height={150}>"
     },
     {
       "example": "8-point-star",
       "component": "Polygon",
-      "path": "/example/Polygon/8-point-star",
+      "path": "/docs/components/Polygon/8-point-star",
       "lineNumber": 15,
       "line": "<Chart height={150}>"
     },
     {
       "example": "arrow",
       "component": "Polygon",
-      "path": "/example/Polygon/arrow",
+      "path": "/docs/components/Polygon/arrow",
       "lineNumber": 13,
       "line": "<Chart height={150}>"
     },
     {
       "example": "cross",
       "component": "Polygon",
-      "path": "/example/Polygon/cross",
+      "path": "/docs/components/Polygon/cross",
       "lineNumber": 13,
       "line": "<Chart height={150}>"
     },
     {
       "example": "diamond",
       "component": "Polygon",
-      "path": "/example/Polygon/diamond",
+      "path": "/docs/components/Polygon/diamond",
       "lineNumber": 11,
       "line": "<Chart height={150}>"
     },
     {
       "example": "hexagon",
       "component": "Polygon",
-      "path": "/example/Polygon/hexagon",
+      "path": "/docs/components/Polygon/hexagon",
       "lineNumber": 11,
       "line": "<Chart height={150}>"
     },
     {
       "example": "octagon",
       "component": "Polygon",
-      "path": "/example/Polygon/octagon",
+      "path": "/docs/components/Polygon/octagon",
       "lineNumber": 11,
       "line": "<Chart height={150}>"
     },
     {
       "example": "parallelogram",
       "component": "Polygon",
-      "path": "/example/Polygon/parallelogram",
+      "path": "/docs/components/Polygon/parallelogram",
       "lineNumber": 11,
       "line": "<Chart height={150}>"
     },
     {
       "example": "pentagon",
       "component": "Polygon",
-      "path": "/example/Polygon/pentagon",
+      "path": "/docs/components/Polygon/pentagon",
       "lineNumber": 11,
       "line": "<Chart height={150}>"
     },
     {
       "example": "playground",
       "component": "Polygon",
-      "path": "/example/Polygon/playground",
+      "path": "/docs/components/Polygon/playground",
       "lineNumber": 21,
       "line": "<Chart height={300}>"
     },
     {
       "example": "rectangle",
       "component": "Polygon",
-      "path": "/example/Polygon/rectangle",
+      "path": "/docs/components/Polygon/rectangle",
       "lineNumber": 11,
       "line": "<Chart height={150}>"
     },
     {
       "example": "rhombus",
       "component": "Polygon",
-      "path": "/example/Polygon/rhombus",
+      "path": "/docs/components/Polygon/rhombus",
       "lineNumber": 11,
       "line": "<Chart height={150}>"
     },
     {
       "example": "square",
       "component": "Polygon",
-      "path": "/example/Polygon/square",
+      "path": "/docs/components/Polygon/square",
       "lineNumber": 11,
       "line": "<Chart height={150}>"
     },
     {
       "example": "trapezoid",
       "component": "Polygon",
-      "path": "/example/Polygon/trapezoid",
+      "path": "/docs/components/Polygon/trapezoid",
       "lineNumber": 11,
       "line": "<Chart height={150}>"
     },
     {
       "example": "triangle",
       "component": "Polygon",
-      "path": "/example/Polygon/triangle",
+      "path": "/docs/components/Polygon/triangle",
       "lineNumber": 11,
       "line": "<Chart height={150}>"
     },
     {
       "example": "focal-location-and-radius-with-custom-colors",
       "component": "RadialGradient",
-      "path": "/example/RadialGradient/focal-location-and-radius-with-custom-colors",
+      "path": "/docs/components/RadialGradient/focal-location-and-radius-with-custom-colors",
       "lineNumber": 7,
       "line": "<Chart height={100}>"
     },
     {
       "example": "spreadmethod",
       "component": "RadialGradient",
-      "path": "/example/RadialGradient/spreadmethod",
+      "path": "/docs/components/RadialGradient/spreadmethod",
       "lineNumber": 7,
       "line": "<Chart height={100}>"
     },
     {
       "example": "tailwind-colors",
       "component": "RadialGradient",
-      "path": "/example/RadialGradient/tailwind-colors",
+      "path": "/docs/components/RadialGradient/tailwind-colors",
       "lineNumber": 7,
       "line": "<Chart height={220}>"
     },
     {
       "example": "units",
       "component": "RadialGradient",
-      "path": "/example/RadialGradient/units",
+      "path": "/docs/components/RadialGradient/units",
       "lineNumber": 7,
       "line": "<Chart height={220}>"
     },
     {
       "example": "styling-using-attributes",
       "component": "Rect",
-      "path": "/example/Rect/styling-using-attributes",
+      "path": "/docs/components/Rect/styling-using-attributes",
       "lineNumber": 5,
       "line": "<Chart"
     },
     {
       "example": "styling-using-classes",
       "component": "Rect",
-      "path": "/example/Rect/styling-using-classes",
+      "path": "/docs/components/Rect/styling-using-classes",
       "lineNumber": 5,
       "line": "<Chart"
     },
     {
       "example": "styling-using-css-variables",
       "component": "Rect",
-      "path": "/example/Rect/styling-using-css-variables",
+      "path": "/docs/components/Rect/styling-using-css-variables",
       "lineNumber": 5,
       "line": "<Chart"
     },
     {
       "example": "annotation-x",
       "component": "Rule",
-      "path": "/example/Rule/annotation-x",
+      "path": "/docs/components/Rule/annotation-x",
       "lineNumber": 5,
       "line": "<Chart xDomain={[0, 100]} yDomain={[0, 100]} padding={20} height={300}>"
     },
     {
       "example": "annotation-y",
       "component": "Rule",
-      "path": "/example/Rule/annotation-y",
+      "path": "/docs/components/Rule/annotation-y",
       "lineNumber": 5,
       "line": "<Chart xDomain={[0, 100]} yDomain={[0, 100]} padding={20} height={300}>"
     },
     {
       "example": "baseline-top-right",
       "component": "Rule",
-      "path": "/example/Rule/baseline-top-right",
+      "path": "/docs/components/Rule/baseline-top-right",
       "lineNumber": 5,
       "line": "<Chart xDomain={[0, 100]} yDomain={[0, 100]} padding={20} height={300}>"
     },
     {
       "example": "baseline-x-negative",
       "component": "Rule",
-      "path": "/example/Rule/baseline-x-negative",
+      "path": "/docs/components/Rule/baseline-x-negative",
       "lineNumber": 5,
       "line": "<Chart xDomain={[-20, 100]} yDomain={[0, 100]} padding={20} height={300}>"
     },
     {
       "example": "baseline-x-y",
       "component": "Rule",
-      "path": "/example/Rule/baseline-x-y",
+      "path": "/docs/components/Rule/baseline-x-y",
       "lineNumber": 5,
       "line": "<Chart xDomain={[0, 100]} yDomain={[0, 100]} padding={20} height={300}>"
     },
     {
       "example": "baseline-y-negative",
       "component": "Rule",
-      "path": "/example/Rule/baseline-y-negative",
+      "path": "/docs/components/Rule/baseline-y-negative",
       "lineNumber": 5,
       "line": "<Chart xDomain={[0, 100]} yDomain={[-20, 100]} padding={20} height={300}>"
     },
     {
       "example": "candlestick",
       "component": "Rule",
-      "path": "/example/Rule/candlestick",
+      "path": "/docs/components/Rule/candlestick",
       "lineNumber": 11,
       "line": "<Chart"
     },
     {
       "example": "candlestick-open-close-line-color",
       "component": "Rule",
-      "path": "/example/Rule/candlestick-open-close-line-color",
+      "path": "/docs/components/Rule/candlestick-open-close-line-color",
       "lineNumber": 11,
       "line": "<Chart"
     },
     {
       "example": "candlestick-with-brushing",
       "component": "Rule",
-      "path": "/example/Rule/candlestick-with-brushing",
+      "path": "/docs/components/Rule/candlestick-with-brushing",
       "lineNumber": 14,
       "line": "<Chart"
     },
     {
       "example": "candlestick-with-brushing",
       "component": "Rule",
-      "path": "/example/Rule/candlestick-with-brushing",
+      "path": "/docs/components/Rule/candlestick-with-brushing",
       "lineNumber": 53,
       "line": "<Chart"
     },
     {
       "example": "data-x-band",
       "component": "Rule",
-      "path": "/example/Rule/data-x-band",
+      "path": "/docs/components/Rule/data-x-band",
       "lineNumber": 40,
       "line": "<Chart {data} x=\"letter\" y=\"frequency\" yNice padding={{ left: 25, bottom: 20 }} height={300}>"
     },
     {
       "example": "data-x-date",
       "component": "Rule",
-      "path": "/example/Rule/data-x-date",
+      "path": "/docs/components/Rule/data-x-date",
       "lineNumber": 10,
       "line": "<Chart {data} x=\"date\" y=\"value\" yNice padding={20} height={300}>"
     },
     {
       "example": "data-x-range",
       "component": "Rule",
-      "path": "/example/Rule/data-x-range",
+      "path": "/docs/components/Rule/data-x-range",
       "lineNumber": 10,
       "line": "<Chart"
     },
     {
       "example": "data-y-range",
       "component": "Rule",
-      "path": "/example/Rule/data-y-range",
+      "path": "/docs/components/Rule/data-y-range",
       "lineNumber": 10,
       "line": "<Chart {data} x=\"date\" y={['low', 'high']} yNice padding={20} height={300}>"
     },
     {
       "example": "lollipop",
       "component": "Rule",
-      "path": "/example/Rule/lollipop",
+      "path": "/docs/components/Rule/lollipop",
       "lineNumber": 12,
       "line": "<Chart"
     },
     {
       "example": "complex",
       "component": "Sankey",
-      "path": "/example/Sankey/complex",
+      "path": "/docs/components/Sankey/complex",
       "lineNumber": 43,
       "line": "<Chart {data} padding={{ right: 164 }} flatData={[]} height={800}>"
     },
     {
       "example": "hierarchy",
       "component": "Sankey",
-      "path": "/example/Sankey/hierarchy",
+      "path": "/docs/components/Sankey/hierarchy",
       "lineNumber": 59,
       "line": "<Chart data={graph} padding={{ right: 100 }} flatData={[]} height={2000}>"
     },
     {
       "example": "node-select",
       "component": "Sankey",
-      "path": "/example/Sankey/node-select",
+      "path": "/docs/components/Sankey/node-select",
       "lineNumber": 12,
       "line": "<Chart data={selectedNode ? sankeyGraphFromNode(selectedNode) : data} flatData={[]} height={600}>"
     },
     {
       "example": "simple",
       "component": "Sankey",
-      "path": "/example/Sankey/simple",
+      "path": "/docs/components/Sankey/simple",
       "lineNumber": 8,
       "line": "<Chart {data} flatData={[]} height={400}>"
     },
     {
       "example": "tooltip",
       "component": "Sankey",
-      "path": "/example/Sankey/tooltip",
+      "path": "/docs/components/Sankey/tooltip",
       "lineNumber": 11,
       "line": "<Chart {data} flatData={[]} height={600}>"
     },
     {
       "example": "basic",
       "component": "Spline",
-      "path": "/example/Spline/basic",
+      "path": "/docs/components/Spline/basic",
       "lineNumber": 10,
       "line": "<Chart {data} x=\"date\" y=\"value\" yDomain={[0, null]} yNice padding={25} height={300}>"
     },
     {
       "example": "basic-start-and-end-snippets",
       "component": "Spline",
-      "path": "/example/Spline/basic-start-and-end-snippets",
+      "path": "/docs/components/Spline/basic-start-and-end-snippets",
       "lineNumber": 31,
       "line": "<Chart {data} x=\"x\" y=\"y\" yNice padding={25} height={300}>"
     },
     {
       "example": "draw",
       "component": "Spline",
-      "path": "/example/Spline/draw",
+      "path": "/docs/components/Spline/draw",
       "lineNumber": 31,
       "line": "<Chart {data} x=\"x\" y=\"y\" yNice padding={25} height={300}>"
     },
     {
       "example": "end-slot-with-draw-with-value",
       "component": "Spline",
-      "path": "/example/Spline/end-slot-with-draw-with-value",
+      "path": "/docs/components/Spline/end-slot-with-draw-with-value",
       "lineNumber": 32,
       "line": "<Chart {data} x=\"x\" y=\"y\" yNice padding={{ top: 25, left: 25, bottom: 25, right: 35 }} height={300}>"
     },
     {
       "example": "end-snippet-with-draw",
       "component": "Spline",
-      "path": "/example/Spline/end-snippet-with-draw",
+      "path": "/docs/components/Spline/end-snippet-with-draw",
       "lineNumber": 31,
       "line": "<Chart {data} x=\"x\" y=\"y\" yNice padding={25} height={300}>"
     },
     {
       "example": "gradient-encoding",
       "component": "Spline",
-      "path": "/example/Spline/gradient-encoding",
+      "path": "/docs/components/Spline/gradient-encoding",
       "lineNumber": 18,
       "line": "<Chart {data} x=\"date\" y=\"value\" yNice padding={{ top: 25, left: 16, bottom: 25 }} height={300}>"
     },
     {
       "example": "gradient-threshold",
       "component": "Spline",
-      "path": "/example/Spline/gradient-threshold",
+      "path": "/docs/components/Spline/gradient-threshold",
       "lineNumber": 10,
       "line": "<Chart {data} x=\"date\" y=\"value\" yNice padding={{ top: 25, left: 16, bottom: 25 }} height={300}>"
     },
     {
       "example": "label-using-start-end-snippets",
       "component": "Spline",
-      "path": "/example/Spline/label-using-start-end-snippets",
+      "path": "/docs/components/Spline/label-using-start-end-snippets",
       "lineNumber": 31,
       "line": "<Chart {data} x=\"x\" y=\"y\" yNice padding={25} height={300}>"
     },
     {
       "example": "markers-arrows",
       "component": "Spline",
-      "path": "/example/Spline/markers-arrows",
+      "path": "/docs/components/Spline/markers-arrows",
       "lineNumber": 31,
       "line": "<Chart {data} x=\"x\" y=\"y\" yNice padding={25} height={300}>"
     },
     {
       "example": "multiple-series",
       "component": "Spline",
-      "path": "/example/Spline/multiple-series",
+      "path": "/docs/components/Spline/multiple-series",
       "lineNumber": 36,
       "line": "<Chart"
     },
     {
       "example": "multiple-series-highlight-on-hover",
       "component": "Spline",
-      "path": "/example/Spline/multiple-series-highlight-on-hover",
+      "path": "/docs/components/Spline/multiple-series-highlight-on-hover",
       "lineNumber": 37,
       "line": "<Chart"
     },
     {
       "example": "multiple-series-using-overrides",
       "component": "Spline",
-      "path": "/example/Spline/multiple-series-using-overrides",
+      "path": "/docs/components/Spline/multiple-series-using-overrides",
       "lineNumber": 18,
       "line": "<Chart"
     },
     {
       "example": "multiple-series-with-labels",
       "component": "Spline",
-      "path": "/example/Spline/multiple-series-with-labels",
+      "path": "/docs/components/Spline/multiple-series-with-labels",
       "lineNumber": 26,
       "line": "<Chart"
     },
     {
       "example": "playground",
       "component": "Spline",
-      "path": "/example/Spline/playground",
+      "path": "/docs/components/Spline/playground",
       "lineNumber": 33,
       "line": "<Chart {data} x=\"x\" y=\"y\" yNice padding={25} height={300}>"
     },
     {
       "example": "radial-line-with-areas",
       "component": "Spline",
-      "path": "/example/Spline/radial-line-with-areas",
+      "path": "/docs/components/Spline/radial-line-with-areas",
       "lineNumber": 12,
       "line": "<Chart"
     },
     {
       "example": "radial-multi-year-lines",
       "component": "Spline",
-      "path": "/example/Spline/radial-multi-year-lines",
+      "path": "/docs/components/Spline/radial-multi-year-lines",
       "lineNumber": 14,
       "line": "<Chart"
     },
     {
       "example": "radial-radar",
       "component": "Spline",
-      "path": "/example/Spline/radial-radar",
+      "path": "/docs/components/Spline/radial-radar",
       "lineNumber": 21,
       "line": "<Chart"
     },
     {
       "example": "tweened",
       "component": "Spline",
-      "path": "/example/Spline/tweened",
+      "path": "/docs/components/Spline/tweened",
       "lineNumber": 31,
       "line": "<Chart {data} x=\"x\" y=\"y\" yNice padding={25} height={300}>"
     },
     {
       "example": "vertical",
       "component": "Spline",
-      "path": "/example/Spline/vertical",
+      "path": "/docs/components/Spline/vertical",
       "lineNumber": 11,
       "line": "<Chart"
     },
     {
       "example": "with-labels",
       "component": "Spline",
-      "path": "/example/Spline/with-labels",
+      "path": "/docs/components/Spline/with-labels",
       "lineNumber": 10,
       "line": "<Chart {data} x=\"date\" y=\"value\" yDomain={[0, null]} yNice padding={25} height={300}>"
     },
     {
       "example": "with-tooltip-and-highlight",
       "component": "Spline",
-      "path": "/example/Spline/with-tooltip-and-highlight",
+      "path": "/docs/components/Spline/with-tooltip-and-highlight",
       "lineNumber": 10,
       "line": "<Chart"
     },
     {
       "example": "playground",
       "component": "Text",
-      "path": "/example/Text/playground",
+      "path": "/docs/components/Text/playground",
       "lineNumber": 44,
       "line": "<Chart height={224}>"
     },
     {
       "example": "word-wrap-with-explicit-newline",
       "component": "Text",
-      "path": "/example/Text/word-wrap-with-explicit-newline",
+      "path": "/docs/components/Text/word-wrap-with-explicit-newline",
       "lineNumber": 8,
       "line": "<Chart height={100}>"
     },
     {
       "example": "anchor-location",
       "component": "Tooltip",
-      "path": "/example/Tooltip/anchor-location",
+      "path": "/docs/components/Tooltip/anchor-location",
       "lineNumber": 26,
       "line": "<Chart"
     },
     {
       "example": "area",
       "component": "Tooltip",
-      "path": "/example/Tooltip/area",
+      "path": "/docs/components/Tooltip/area",
       "lineNumber": 27,
       "line": "<Chart"
     },
     {
       "example": "basic",
       "component": "Tooltip",
-      "path": "/example/Tooltip/basic",
+      "path": "/docs/components/Tooltip/basic",
       "lineNumber": 16,
       "line": "<Chart"
     },
     {
       "example": "color-swatch",
       "component": "Tooltip",
-      "path": "/example/Tooltip/color-swatch",
+      "path": "/docs/components/Tooltip/color-swatch",
       "lineNumber": 16,
       "line": "<Chart"
     },
     {
       "example": "color-swatch-using-theme",
       "component": "Tooltip",
-      "path": "/example/Tooltip/color-swatch-using-theme",
+      "path": "/docs/components/Tooltip/color-swatch-using-theme",
       "lineNumber": 16,
       "line": "<Chart"
     },
     {
       "example": "custom-content",
       "component": "Tooltip",
-      "path": "/example/Tooltip/custom-content",
+      "path": "/docs/components/Tooltip/custom-content",
       "lineNumber": 16,
       "line": "<Chart"
     },
     {
       "example": "data-snapping",
       "component": "Tooltip",
-      "path": "/example/Tooltip/data-snapping",
+      "path": "/docs/components/Tooltip/data-snapping",
       "lineNumber": 16,
       "line": "<Chart"
     },
     {
       "example": "default-mouse-position-with-offset",
       "component": "Tooltip",
-      "path": "/example/Tooltip/default-mouse-position-with-offset",
+      "path": "/docs/components/Tooltip/default-mouse-position-with-offset",
       "lineNumber": 16,
       "line": "<Chart"
     },
     {
       "example": "disable-motion",
       "component": "Tooltip",
-      "path": "/example/Tooltip/disable-motion",
+      "path": "/docs/components/Tooltip/disable-motion",
       "lineNumber": 16,
       "line": "<Chart"
     },
     {
       "example": "duration",
       "component": "Tooltip",
-      "path": "/example/Tooltip/duration",
+      "path": "/docs/components/Tooltip/duration",
       "lineNumber": 39,
       "line": "<Chart"
     },
     {
       "example": "externally-access-tooltip-data",
       "component": "Tooltip",
-      "path": "/example/Tooltip/externally-access-tooltip-data",
+      "path": "/docs/components/Tooltip/externally-access-tooltip-data",
       "lineNumber": 39,
       "line": "<Chart"
     },
     {
       "example": "invert-variant",
       "component": "Tooltip",
-      "path": "/example/Tooltip/invert-variant",
+      "path": "/docs/components/Tooltip/invert-variant",
       "lineNumber": 16,
       "line": "<Chart"
     },
     {
       "example": "multiple-overlapping-bars",
       "component": "Tooltip",
-      "path": "/example/Tooltip/multiple-overlapping-bars",
+      "path": "/docs/components/Tooltip/multiple-overlapping-bars",
       "lineNumber": 33,
       "line": "<Chart"
     },
     {
       "example": "multiple-overlapping-durations",
       "component": "Tooltip",
-      "path": "/example/Tooltip/multiple-overlapping-durations",
+      "path": "/docs/components/Tooltip/multiple-overlapping-durations",
       "lineNumber": 38,
       "line": "<Chart"
     },
     {
       "example": "multiple-tooltips-with-fixed-single-axis",
       "component": "Tooltip",
-      "path": "/example/Tooltip/multiple-tooltips-with-fixed-single-axis",
+      "path": "/docs/components/Tooltip/multiple-tooltips-with-fixed-single-axis",
       "lineNumber": 17,
       "line": "<Chart"
     },
     {
       "example": "multiple-tooltips-with-fixed-single-axis-scaleband",
       "component": "Tooltip",
-      "path": "/example/Tooltip/multiple-tooltips-with-fixed-single-axis-scaleband",
+      "path": "/docs/components/Tooltip/multiple-tooltips-with-fixed-single-axis-scaleband",
       "lineNumber": 19,
       "line": "<Chart"
     },
     {
       "example": "scatter-plot",
       "component": "Tooltip",
-      "path": "/example/Tooltip/scatter-plot",
+      "path": "/docs/components/Tooltip/scatter-plot",
       "lineNumber": 24,
       "line": "<Chart"
     },
     {
       "example": "simple-bars",
       "component": "Tooltip",
-      "path": "/example/Tooltip/simple-bars",
+      "path": "/docs/components/Tooltip/simple-bars",
       "lineNumber": 31,
       "line": "<Chart"
     },
     {
       "example": "single-date-time",
       "component": "Tooltip",
-      "path": "/example/Tooltip/single-date-time",
+      "path": "/docs/components/Tooltip/single-date-time",
       "lineNumber": 27,
       "line": "<Chart"
     },
     {
       "example": "stacked-area",
       "component": "Tooltip",
-      "path": "/example/Tooltip/stacked-area",
+      "path": "/docs/components/Tooltip/stacked-area",
       "lineNumber": 41,
       "line": "<Chart"
     },
     {
       "example": "pan-zoom-html-image",
       "component": "TransformContext",
-      "path": "/example/TransformContext/pan-zoom-html-image",
+      "path": "/docs/components/TransformContext/pan-zoom-html-image",
       "lineNumber": 7,
       "line": "<Chart"
     },
     {
       "example": "pan-zoom-svg-image",
       "component": "TransformContext",
-      "path": "/example/TransformContext/pan-zoom-svg-image",
+      "path": "/docs/components/TransformContext/pan-zoom-svg-image",
       "lineNumber": 7,
       "line": "<Chart"
     },
     {
       "example": "playground",
       "component": "TransformContext",
-      "path": "/example/TransformContext/playground",
+      "path": "/docs/components/TransformContext/playground",
       "lineNumber": 35,
       "line": "<Chart"
     },
     {
       "example": "basic",
       "component": "Tree",
-      "path": "/example/Tree/basic",
+      "path": "/docs/components/Tree/basic",
       "lineNumber": 52,
       "line": "<Chart"
     },
     {
       "example": "html-nodes",
       "component": "Tree",
-      "path": "/example/Tree/html-nodes",
+      "path": "/docs/components/Tree/html-nodes",
       "lineNumber": 52,
       "line": "<Chart"
     },
     {
       "example": "basic",
       "component": "Treemap",
-      "path": "/example/Treemap/basic",
+      "path": "/docs/components/Treemap/basic",
       "lineNumber": 34,
       "line": "<Chart height={400}>"
     },
     {
       "example": "complex",
       "component": "Treemap",
-      "path": "/example/Treemap/complex",
+      "path": "/docs/components/Treemap/complex",
       "lineNumber": 71,
       "line": "<Chart height={800}>"
     },
     {
       "example": "nested-filter",
       "component": "Treemap",
-      "path": "/example/Treemap/nested-filter",
+      "path": "/docs/components/Treemap/nested-filter",
       "lineNumber": 112,
       "line": "<Chart height={800}>"
     },
     {
       "example": "nested-zoom",
       "component": "Treemap",
-      "path": "/example/Treemap/nested-zoom",
+      "path": "/docs/components/Treemap/nested-zoom",
       "lineNumber": 84,
       "line": "<Chart height={800}>"
     },
     {
       "example": "playground",
       "component": "Treemap",
-      "path": "/example/Treemap/playground",
+      "path": "/docs/components/Treemap/playground",
       "lineNumber": 117,
       "line": "<Chart>"
     },
     {
       "example": "stacked-zoom",
       "component": "Treemap",
-      "path": "/example/Treemap/stacked-zoom",
+      "path": "/docs/components/Treemap/stacked-zoom",
       "lineNumber": 83,
       "line": "<Chart height={600}>"
     },
     {
       "example": "radius",
       "component": "Voronoi",
-      "path": "/example/Voronoi/radius",
+      "path": "/docs/components/Voronoi/radius",
       "lineNumber": 22,
       "line": "<Chart {data} x=\"x\" y=\"y\" height={400}>"
     }
   ],
-  "updatedAt": "2026-01-25T21:44:17.657Z"
+  "updatedAt": "2026-02-07T20:21:31.474Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/ChartClipPath.json b/docs/src/examples/catalog/ChartClipPath.json
index 26bc712a2..629ef9cc6 100644
--- a/docs/src/examples/catalog/ChartClipPath.json
+++ b/docs/src/examples/catalog/ChartClipPath.json
@@ -5,115 +5,115 @@
     {
       "example": "clip-tween-on-mount",
       "component": "Area",
-      "path": "/example/Area/clip-tween-on-mount",
+      "path": "/docs/components/Area/clip-tween-on-mount",
       "lineNumber": 21,
       "line": "<ChartClipPath"
     },
     {
       "example": "integrated-brush-(both-axis-area)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/integrated-brush-(both-axis-area)",
+      "path": "/docs/components/BrushContext/integrated-brush-(both-axis-area)",
       "lineNumber": 41,
       "line": "<ChartClipPath>"
     },
     {
       "example": "integrated-brush-(x-axis)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/integrated-brush-(x-axis)",
+      "path": "/docs/components/BrushContext/integrated-brush-(x-axis)",
       "lineNumber": 38,
       "line": "<ChartClipPath>"
     },
     {
       "example": "integrated-brush-(y-axis)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/integrated-brush-(y-axis)",
+      "path": "/docs/components/BrushContext/integrated-brush-(y-axis)",
       "lineNumber": 38,
       "line": "<ChartClipPath>"
     },
     {
       "example": "minimap",
       "component": "BrushContext",
-      "path": "/example/BrushContext/minimap",
+      "path": "/docs/components/BrushContext/minimap",
       "lineNumber": 47,
       "line": "<ChartClipPath>"
     },
     {
       "example": "separate-chart-(clip-data-y-axis)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/separate-chart-(clip-data-y-axis)",
+      "path": "/docs/components/BrushContext/separate-chart-(clip-data-y-axis)",
       "lineNumber": 44,
       "line": "<ChartClipPath>"
     },
     {
       "example": "separate-chart-(clip-data)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/separate-chart-(clip-data)",
+      "path": "/docs/components/BrushContext/separate-chart-(clip-data)",
       "lineNumber": 32,
       "line": "<ChartClipPath>"
     },
     {
       "example": "sync-brushes-with-bind-xdomain",
       "component": "BrushContext",
-      "path": "/example/BrushContext/sync-brushes-with-bind-xdomain",
+      "path": "/docs/components/BrushContext/sync-brushes-with-bind-xdomain",
       "lineNumber": 68,
       "line": "<ChartClipPath>"
     },
     {
       "example": "tooltip-interop",
       "component": "BrushContext",
-      "path": "/example/BrushContext/tooltip-interop",
+      "path": "/docs/components/BrushContext/tooltip-interop",
       "lineNumber": 43,
       "line": "<ChartClipPath>"
     },
     {
       "example": "us-state-with-surrounding-states",
       "component": "GeoPath",
-      "path": "/example/GeoPath/us-state-with-surrounding-states",
+      "path": "/docs/components/GeoPath/us-state-with-surrounding-states",
       "lineNumber": 47,
       "line": "<ChartClipPath>"
     },
     {
       "example": "filterable",
       "component": "Partition",
-      "path": "/example/Partition/filterable",
+      "path": "/docs/components/Partition/filterable",
       "lineNumber": 109,
       "line": "<ChartClipPath>"
     },
     {
       "example": "horizontal",
       "component": "Partition",
-      "path": "/example/Partition/horizontal",
+      "path": "/docs/components/Partition/horizontal",
       "lineNumber": 96,
       "line": "<ChartClipPath>"
     },
     {
       "example": "vertical",
       "component": "Partition",
-      "path": "/example/Partition/vertical",
+      "path": "/docs/components/Partition/vertical",
       "lineNumber": 97,
       "line": "<ChartClipPath>"
     },
     {
       "example": "nested-zoom",
       "component": "Treemap",
-      "path": "/example/Treemap/nested-zoom",
+      "path": "/docs/components/Treemap/nested-zoom",
       "lineNumber": 89,
       "line": "<ChartClipPath>"
     },
     {
       "example": "stacked-zoom",
       "component": "Treemap",
-      "path": "/example/Treemap/stacked-zoom",
+      "path": "/docs/components/Treemap/stacked-zoom",
       "lineNumber": 87,
       "line": "<ChartClipPath>"
     },
     {
       "example": "radius",
       "component": "Voronoi",
-      "path": "/example/Voronoi/radius",
+      "path": "/docs/components/Voronoi/radius",
       "lineNumber": 25,
       "line": "<ChartClipPath>"
     }
   ],
-  "updatedAt": "2026-01-06T13:02:20.986Z"
+  "updatedAt": "2026-02-07T17:00:31.357Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Circle.json b/docs/src/examples/catalog/Circle.json
index 5fb9f8ae6..851087291 100644
--- a/docs/src/examples/catalog/Circle.json
+++ b/docs/src/examples/catalog/Circle.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "styling-using-attributes",
-      "path": "/example/Circle/styling-using-attributes",
+      "title": "styling using attributes",
+      "path": "/docs/components/Circle/styling-using-attributes",
       "components": [
         {
           "component": "Chart",
@@ -29,7 +30,8 @@
     },
     {
       "name": "styling-using-classes",
-      "path": "/example/Circle/styling-using-classes",
+      "title": "styling using classes",
+      "path": "/docs/components/Circle/styling-using-classes",
       "components": [
         {
           "component": "Chart",
@@ -55,7 +57,8 @@
     },
     {
       "name": "styling-using-css-variables",
-      "path": "/example/Circle/styling-using-css-variables",
+      "title": "styling using css variables",
+      "path": "/docs/components/Circle/styling-using-css-variables",
       "components": [
         {
           "component": "Chart",
@@ -84,542 +87,542 @@
     {
       "example": "multiple-series",
       "component": "Area",
-      "path": "/example/Area/multiple-series",
+      "path": "/docs/components/Area/multiple-series",
       "lineNumber": 61,
       "line": "<Circle cx={x} cy={y} r={4} fill={color} />"
     },
     {
       "example": "multiple-series-highlight-on-hover",
       "component": "Area",
-      "path": "/example/Area/multiple-series-highlight-on-hover",
+      "path": "/docs/components/Area/multiple-series-highlight-on-hover",
       "lineNumber": 64,
       "line": "<Circle cx={x} cy={y} r={4} fill={color} />"
     },
     {
       "example": "markers",
       "component": "AreaChart",
-      "path": "/example/AreaChart/markers",
+      "path": "/docs/components/AreaChart/markers",
       "lineNumber": 36,
       "line": "<Circle"
     },
     {
       "example": "minimap",
       "component": "BrushContext",
-      "path": "/example/BrushContext/minimap",
+      "path": "/docs/components/BrushContext/minimap",
       "lineNumber": 80,
       "line": "<Circle"
     },
     {
       "example": "selection",
       "component": "BrushContext",
-      "path": "/example/BrushContext/selection",
+      "path": "/docs/components/BrushContext/selection",
       "lineNumber": 52,
       "line": "<Circle"
     },
     {
       "example": "styling-using-attributes",
       "component": "Circle",
-      "path": "/example/Circle/styling-using-attributes",
+      "path": "/docs/components/Circle/styling-using-attributes",
       "lineNumber": 14,
       "line": "<Circle cx={100} cy={100} r={20} fill=\"var(--color-surface-content)\" />"
     },
     {
       "example": "styling-using-attributes",
       "component": "Circle",
-      "path": "/example/Circle/styling-using-attributes",
+      "path": "/docs/components/Circle/styling-using-attributes",
       "lineNumber": 15,
       "line": "<Circle cx={200} cy={200} r={20} fill=\"var(--color-primary)\" />"
     },
     {
       "example": "styling-using-attributes",
       "component": "Circle",
-      "path": "/example/Circle/styling-using-attributes",
+      "path": "/docs/components/Circle/styling-using-attributes",
       "lineNumber": 16,
       "line": "<Circle cx={200} cy={50} r={20} fill=\"var(--color-secondary)\" />"
     },
     {
       "example": "styling-using-attributes",
       "component": "Circle",
-      "path": "/example/Circle/styling-using-attributes",
+      "path": "/docs/components/Circle/styling-using-attributes",
       "lineNumber": 17,
       "line": "<Circle"
     },
     {
       "example": "styling-using-classes",
       "component": "Circle",
-      "path": "/example/Circle/styling-using-classes",
+      "path": "/docs/components/Circle/styling-using-classes",
       "lineNumber": 14,
       "line": "<Circle cx={100} cy={100} r={20} />"
     },
     {
       "example": "styling-using-classes",
       "component": "Circle",
-      "path": "/example/Circle/styling-using-classes",
+      "path": "/docs/components/Circle/styling-using-classes",
       "lineNumber": 15,
       "line": "<Circle cx={200} cy={200} r={20} class=\"fill-primary bg-primary\" />"
     },
     {
       "example": "styling-using-classes",
       "component": "Circle",
-      "path": "/example/Circle/styling-using-classes",
+      "path": "/docs/components/Circle/styling-using-classes",
       "lineNumber": 16,
       "line": "<Circle cx={200} cy={50} r={20} fill=\"var(--color-secondary)\" />"
     },
     {
       "example": "styling-using-classes",
       "component": "Circle",
-      "path": "/example/Circle/styling-using-classes",
+      "path": "/docs/components/Circle/styling-using-classes",
       "lineNumber": 17,
       "line": "<Circle"
     },
     {
       "example": "styling-using-css-variables",
       "component": "Circle",
-      "path": "/example/Circle/styling-using-css-variables",
+      "path": "/docs/components/Circle/styling-using-css-variables",
       "lineNumber": 14,
       "line": "<Circle cx={100} cy={100} r={20} />"
     },
     {
       "example": "styling-using-css-variables",
       "component": "Circle",
-      "path": "/example/Circle/styling-using-css-variables",
+      "path": "/docs/components/Circle/styling-using-css-variables",
       "lineNumber": 15,
       "line": "<Circle cx={200} cy={200} r={20} style=\"--fill-color:var(--color-primary)\" />"
     },
     {
       "example": "styling-using-css-variables",
       "component": "Circle",
-      "path": "/example/Circle/styling-using-css-variables",
+      "path": "/docs/components/Circle/styling-using-css-variables",
       "lineNumber": 16,
       "line": "<Circle cx={200} cy={50} r={20} style=\"--fill-color:var(--color-secondary)\" />"
     },
     {
       "example": "styling-using-css-variables",
       "component": "Circle",
-      "path": "/example/Circle/styling-using-css-variables",
+      "path": "/docs/components/Circle/styling-using-css-variables",
       "lineNumber": 17,
       "line": "<Circle"
     },
     {
       "example": "playground",
       "component": "Connector",
-      "path": "/example/Connector/playground",
+      "path": "/docs/components/Connector/playground",
       "lineNumber": 24,
       "line": "<circle"
     },
     {
       "example": "playground",
       "component": "Connector",
-      "path": "/example/Connector/playground",
+      "path": "/docs/components/Connector/playground",
       "lineNumber": 37,
       "line": "<circle"
     },
     {
       "example": "beeswarm",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/beeswarm",
+      "path": "/docs/components/ForceSimulation/beeswarm",
       "lineNumber": 44,
       "line": "<Circle"
     },
     {
       "example": "collision-detection",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/collision-detection",
+      "path": "/docs/components/ForceSimulation/collision-detection",
       "lineNumber": 59,
       "line": "<Circle"
     },
     {
       "example": "disjoint-graph",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/disjoint-graph",
+      "path": "/docs/components/ForceSimulation/disjoint-graph",
       "lineNumber": 75,
       "line": "<Circle cx={node.x} cy={node.y} r={3} fill={colorScale(node.group.toString())} />"
     },
     {
       "example": "graph-drag",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/graph-drag",
+      "path": "/docs/components/ForceSimulation/graph-drag",
       "lineNumber": 92,
       "line": "<circle"
     },
     {
       "example": "graph-playground",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/graph-playground",
+      "path": "/docs/components/ForceSimulation/graph-playground",
       "lineNumber": 179,
       "line": "<Circle"
     },
     {
       "example": "group",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/group",
+      "path": "/docs/components/ForceSimulation/group",
       "lineNumber": 72,
       "line": "<Circle"
     },
     {
       "example": "lattice",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/lattice",
+      "path": "/docs/components/ForceSimulation/lattice",
       "lineNumber": 46,
       "line": "<Circle cx={node.x} cy={node.y} r={3} class=\"fill-surface-content\" />"
     },
     {
       "example": "tree",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/tree",
+      "path": "/docs/components/ForceSimulation/tree",
       "lineNumber": 51,
       "line": "<Circle"
     },
     {
       "example": "bubble-map",
       "component": "GeoPath",
-      "path": "/example/GeoPath/bubble-map",
+      "path": "/docs/components/GeoPath/bubble-map",
       "lineNumber": 96,
       "line": "<Circle"
     },
     {
       "example": "icons",
       "component": "GeoPoint",
-      "path": "/example/GeoPoint/icons",
-      "lineNumber": 52,
+      "path": "/docs/components/GeoPoint/icons",
+      "lineNumber": 46,
       "line": "<Circle"
     },
     {
       "example": "us-state-capitals",
       "component": "GeoPoint",
-      "path": "/example/GeoPoint/us-state-capitals",
+      "path": "/docs/components/GeoPoint/us-state-capitals",
       "lineNumber": 38,
       "line": "<Circle r={2} class=\"fill-white stroke-danger\" />"
     },
     {
       "example": "us-state-capitals",
       "component": "GeoPoint",
-      "path": "/example/GeoPoint/us-state-capitals",
+      "path": "/docs/components/GeoPoint/us-state-capitals",
       "lineNumber": 49,
       "line": "<Circle cx={x} cy={y} r={2} class=\"fill-white stroke-danger\" />"
     },
     {
       "example": "world-capitals",
       "component": "GeoPoint",
-      "path": "/example/GeoPoint/world-capitals",
+      "path": "/docs/components/GeoPoint/world-capitals",
       "lineNumber": 66,
       "line": "<Circle r={4} class=\"stroke-primary/50 fill-none\" />"
     },
     {
       "example": "world-capitals",
       "component": "GeoPoint",
-      "path": "/example/GeoPoint/world-capitals",
+      "path": "/docs/components/GeoPoint/world-capitals",
       "lineNumber": 81,
       "line": "<Circle cx={x} cy={y} r={4} class=\"stroke-primary/50 fill-none\" />"
     },
     {
       "example": "basic",
       "component": "Group",
-      "path": "/example/Group/basic",
+      "path": "/docs/components/Group/basic",
       "lineNumber": 10,
       "line": "<Circle r={20} class=\"fill-surface-content\" />"
     },
     {
       "example": "basic",
       "component": "Group",
-      "path": "/example/Group/basic",
+      "path": "/docs/components/Group/basic",
       "lineNumber": 13,
       "line": "<Circle r={10} class=\"fill-surface-content\" />"
     },
     {
       "example": "geo",
       "component": "Hull",
-      "path": "/example/Hull/geo",
+      "path": "/docs/components/Hull/geo",
       "lineNumber": 47,
       "line": "<Circle r={2} class=\"fill-white stroke-danger\" />"
     },
     {
       "example": "all-3-layers",
       "component": "Layer",
-      "path": "/example/Layer/all-3-layers",
+      "path": "/docs/components/Layer/all-3-layers",
       "lineNumber": 7,
       "line": "<Circle fill=\"#F2D707\" r={100} />"
     },
     {
       "example": "all-3-layers",
       "component": "Layer",
-      "path": "/example/Layer/all-3-layers",
+      "path": "/docs/components/Layer/all-3-layers",
       "lineNumber": 10,
       "line": "<Circle fill=\"black\" r={15} cx={-30} cy={-30} />"
     },
     {
       "example": "all-3-layers",
       "component": "Layer",
-      "path": "/example/Layer/all-3-layers",
+      "path": "/docs/components/Layer/all-3-layers",
       "lineNumber": 21,
       "line": "<Circle id=\"left-eye\" fill=\"black\" r={15} cx={30} cy={-30} />"
     },
     {
       "example": "sync-with-draw",
       "component": "MotionPath",
-      "path": "/example/MotionPath/sync-with-draw",
+      "path": "/docs/components/MotionPath/sync-with-draw",
       "lineNumber": 51,
       "line": "<Circle id={objectId} r={5} class=\"fill-surface-100 stroke-surface-content\" />"
     },
     {
       "example": "basic",
       "component": "Pack",
-      "path": "/example/Pack/basic",
+      "path": "/docs/components/Pack/basic",
       "lineNumber": 119,
       "line": "<Circle"
     },
     {
       "example": "circles-custom-pattern-svg-only",
       "component": "Pattern",
-      "path": "/example/Pattern/circles-custom-pattern-svg-only",
+      "path": "/docs/components/Pattern/circles-custom-pattern-svg-only",
       "lineNumber": 9,
       "line": "<circle cx={2} cy={2} r={1} class=\"fill-surface-content\" />"
     },
     {
       "example": "circles-custom-pattern-svg-only",
       "component": "Pattern",
-      "path": "/example/Pattern/circles-custom-pattern-svg-only",
+      "path": "/docs/components/Pattern/circles-custom-pattern-svg-only",
       "lineNumber": 15,
       "line": "<circle cx={4} cy={4} r={1} class=\"fill-surface-content\" />"
     },
     {
       "example": "circles-custom-pattern-svg-only",
       "component": "Pattern",
-      "path": "/example/Pattern/circles-custom-pattern-svg-only",
+      "path": "/docs/components/Pattern/circles-custom-pattern-svg-only",
       "lineNumber": 21,
       "line": "<circle cx={4} cy={4} r={2} class=\"fill-surface-content\" />"
     },
     {
       "example": "circles-custom-pattern-svg-only",
       "component": "Pattern",
-      "path": "/example/Pattern/circles-custom-pattern-svg-only",
+      "path": "/docs/components/Pattern/circles-custom-pattern-svg-only",
       "lineNumber": 27,
       "line": "<circle cx={4} cy={4} r={2} class=\"fill-surface-content\" />"
     },
     {
       "example": "circles-custom-pattern-svg-only",
       "component": "Pattern",
-      "path": "/example/Pattern/circles-custom-pattern-svg-only",
+      "path": "/docs/components/Pattern/circles-custom-pattern-svg-only",
       "lineNumber": 28,
       "line": "<circle cx={0} cy={0} r={2} class=\"fill-surface-content\" />"
     },
     {
       "example": "circles-custom-pattern-svg-only",
       "component": "Pattern",
-      "path": "/example/Pattern/circles-custom-pattern-svg-only",
+      "path": "/docs/components/Pattern/circles-custom-pattern-svg-only",
       "lineNumber": 29,
       "line": "<circle cx={0} cy={8} r={2} class=\"fill-surface-content\" />"
     },
     {
       "example": "circles-custom-pattern-svg-only",
       "component": "Pattern",
-      "path": "/example/Pattern/circles-custom-pattern-svg-only",
+      "path": "/docs/components/Pattern/circles-custom-pattern-svg-only",
       "lineNumber": 30,
       "line": "<circle cx={8} cy={0} r={2} class=\"fill-surface-content\" />"
     },
     {
       "example": "circles-custom-pattern-svg-only",
       "component": "Pattern",
-      "path": "/example/Pattern/circles-custom-pattern-svg-only",
+      "path": "/docs/components/Pattern/circles-custom-pattern-svg-only",
       "lineNumber": 31,
       "line": "<circle cx={8} cy={8} r={2} class=\"fill-surface-content\" />"
     },
     {
       "example": "circles-custom-pattern-svg-only",
       "component": "Pattern",
-      "path": "/example/Pattern/circles-custom-pattern-svg-only",
+      "path": "/docs/components/Pattern/circles-custom-pattern-svg-only",
       "lineNumber": 37,
       "line": "<circle cx={4} cy={4} r={1} class=\"fill-surface-content\" />"
     },
     {
       "example": "circles-custom-pattern-svg-only",
       "component": "Pattern",
-      "path": "/example/Pattern/circles-custom-pattern-svg-only",
+      "path": "/docs/components/Pattern/circles-custom-pattern-svg-only",
       "lineNumber": 38,
       "line": "<circle cx={0} cy={0} r={1} class=\"fill-surface-content\" />"
     },
     {
       "example": "circles-custom-pattern-svg-only",
       "component": "Pattern",
-      "path": "/example/Pattern/circles-custom-pattern-svg-only",
+      "path": "/docs/components/Pattern/circles-custom-pattern-svg-only",
       "lineNumber": 39,
       "line": "<circle cx={0} cy={8} r={1} class=\"fill-surface-content\" />"
     },
     {
       "example": "circles-custom-pattern-svg-only",
       "component": "Pattern",
-      "path": "/example/Pattern/circles-custom-pattern-svg-only",
+      "path": "/docs/components/Pattern/circles-custom-pattern-svg-only",
       "lineNumber": 40,
       "line": "<circle cx={8} cy={0} r={1} class=\"fill-surface-content\" />"
     },
     {
       "example": "circles-custom-pattern-svg-only",
       "component": "Pattern",
-      "path": "/example/Pattern/circles-custom-pattern-svg-only",
+      "path": "/docs/components/Pattern/circles-custom-pattern-svg-only",
       "lineNumber": 41,
       "line": "<circle cx={8} cy={8} r={1} class=\"fill-surface-content\" />"
     },
     {
       "example": "circles-custom-pattern-svg-only",
       "component": "Pattern",
-      "path": "/example/Pattern/circles-custom-pattern-svg-only",
+      "path": "/docs/components/Pattern/circles-custom-pattern-svg-only",
       "lineNumber": 47,
       "line": "<circle cx={4} cy={4} r={2} class=\"fill-surface-content/30\" />"
     },
     {
       "example": "basic",
       "component": "Point",
-      "path": "/example/Point/basic",
+      "path": "/docs/components/Point/basic",
       "lineNumber": 24,
       "line": "<Circle cx={x} cy={y} r={10} />"
     },
     {
       "example": "basic",
       "component": "Point",
-      "path": "/example/Point/basic",
+      "path": "/docs/components/Point/basic",
       "lineNumber": 30,
       "line": "<Circle cx={x} cy={y} r={15} class=\"fill-primary bg-primary\" />"
     },
     {
       "example": "focal-location-and-radius-with-custom-colors",
       "component": "RadialGradient",
-      "path": "/example/RadialGradient/focal-location-and-radius-with-custom-colors",
+      "path": "/docs/components/RadialGradient/focal-location-and-radius-with-custom-colors",
       "lineNumber": 11,
       "line": "<Circle cx={radius + 0 * 120} cy={radius} r={radius} fill={gradient} />"
     },
     {
       "example": "focal-location-and-radius-with-custom-colors",
       "component": "RadialGradient",
-      "path": "/example/RadialGradient/focal-location-and-radius-with-custom-colors",
+      "path": "/docs/components/RadialGradient/focal-location-and-radius-with-custom-colors",
       "lineNumber": 17,
       "line": "<Circle cx={radius + 1 * 120} cy={radius} r={radius} fill={gradient} />"
     },
     {
       "example": "focal-location-and-radius-with-custom-colors",
       "component": "RadialGradient",
-      "path": "/example/RadialGradient/focal-location-and-radius-with-custom-colors",
+      "path": "/docs/components/RadialGradient/focal-location-and-radius-with-custom-colors",
       "lineNumber": 23,
       "line": "<Circle cx={radius + 2 * 120} cy={radius} r={radius} fill={gradient} />"
     },
     {
       "example": "spreadmethod",
       "component": "RadialGradient",
-      "path": "/example/RadialGradient/spreadmethod",
+      "path": "/docs/components/RadialGradient/spreadmethod",
       "lineNumber": 11,
       "line": "<Circle cx={radius + 0 * 120} cy={radius} r={radius} fill={gradient} />"
     },
     {
       "example": "spreadmethod",
       "component": "RadialGradient",
-      "path": "/example/RadialGradient/spreadmethod",
+      "path": "/docs/components/RadialGradient/spreadmethod",
       "lineNumber": 17,
       "line": "<Circle cx={radius + 1 * 120} cy={radius} r={radius} fill={gradient} />"
     },
     {
       "example": "spreadmethod",
       "component": "RadialGradient",
-      "path": "/example/RadialGradient/spreadmethod",
+      "path": "/docs/components/RadialGradient/spreadmethod",
       "lineNumber": 23,
       "line": "<Circle cx={radius + 2 * 120} cy={radius} r={radius} fill={gradient} />"
     },
     {
       "example": "tailwind-colors",
       "component": "RadialGradient",
-      "path": "/example/RadialGradient/tailwind-colors",
+      "path": "/docs/components/RadialGradient/tailwind-colors",
       "lineNumber": 19,
       "line": "<Circle"
     },
     {
       "example": "units",
       "component": "RadialGradient",
-      "path": "/example/RadialGradient/units",
+      "path": "/docs/components/RadialGradient/units",
       "lineNumber": 12,
       "line": "<Circle cx={radius + i * 120} cy={radius} r={radius} fill={gradient} />"
     },
     {
       "example": "units",
       "component": "RadialGradient",
-      "path": "/example/RadialGradient/units",
+      "path": "/docs/components/RadialGradient/units",
       "lineNumber": 20,
       "line": "<Circle cx={radius + i * 120} cy={120 + radius} r={radius} fill={gradient} />"
     },
     {
       "example": "basic-start-and-end-snippets",
       "component": "Spline",
-      "path": "/example/Spline/basic-start-and-end-snippets",
+      "path": "/docs/components/Spline/basic-start-and-end-snippets",
       "lineNumber": 38,
       "line": "<Circle r={5} class=\"fill-primary\" />"
     },
     {
       "example": "basic-start-and-end-snippets",
       "component": "Spline",
-      "path": "/example/Spline/basic-start-and-end-snippets",
+      "path": "/docs/components/Spline/basic-start-and-end-snippets",
       "lineNumber": 41,
       "line": "<Circle r={5} class=\"fill-primary\" />"
     },
     {
       "example": "end-slot-with-draw-with-value",
       "component": "Spline",
-      "path": "/example/Spline/end-slot-with-draw-with-value",
+      "path": "/docs/components/Spline/end-slot-with-draw-with-value",
       "lineNumber": 39,
       "line": "<Circle r={5} class=\"fill-primary\" />"
     },
     {
       "example": "end-snippet-with-draw",
       "component": "Spline",
-      "path": "/example/Spline/end-snippet-with-draw",
+      "path": "/docs/components/Spline/end-snippet-with-draw",
       "lineNumber": 38,
       "line": "<Circle r={5} class=\"fill-primary\" />"
     },
     {
       "example": "label-using-start-end-snippets",
       "component": "Spline",
-      "path": "/example/Spline/label-using-start-end-snippets",
+      "path": "/docs/components/Spline/label-using-start-end-snippets",
       "lineNumber": 38,
       "line": "<Circle r={5} class=\"fill-primary\" />"
     },
     {
       "example": "label-using-start-end-snippets",
       "component": "Spline",
-      "path": "/example/Spline/label-using-start-end-snippets",
+      "path": "/docs/components/Spline/label-using-start-end-snippets",
       "lineNumber": 43,
       "line": "<Circle r={5} class=\"fill-primary\" />"
     },
     {
       "example": "multiple-series",
       "component": "Spline",
-      "path": "/example/Spline/multiple-series",
+      "path": "/docs/components/Spline/multiple-series",
       "lineNumber": 57,
       "line": "<Circle r={4} fill={color} />"
     },
     {
       "example": "multiple-series-highlight-on-hover",
       "component": "Spline",
-      "path": "/example/Spline/multiple-series-highlight-on-hover",
+      "path": "/docs/components/Spline/multiple-series-highlight-on-hover",
       "lineNumber": 60,
       "line": "<Circle r={4} fill={color} />"
     },
     {
       "example": "playground",
       "component": "Text",
-      "path": "/example/Text/playground",
+      "path": "/docs/components/Text/playground",
       "lineNumber": 48,
       "line": "<Circle cx={config.x} cy={config.y} r={2} fill=\"red\" />"
     },
     {
       "example": "playground",
       "component": "TransformContext",
-      "path": "/example/TransformContext/playground",
-      "lineNumber": 57,
+      "path": "/docs/components/TransformContext/playground",
+      "lineNumber": 58,
       "line": "<Circle"
     },
     {
       "example": "radius",
       "component": "Voronoi",
-      "path": "/example/Voronoi/radius",
+      "path": "/docs/components/Voronoi/radius",
       "lineNumber": 37,
       "line": "<Circle cx={point.x} cy={point.y} r={4} class=\"fill-primary\" />"
     }
   ],
-  "updatedAt": "2026-01-25T20:58:11.921Z"
+  "updatedAt": "2026-02-07T20:21:31.518Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/ClipPath.json b/docs/src/examples/catalog/ClipPath.json
index 95e74b502..d89904dbb 100644
--- a/docs/src/examples/catalog/ClipPath.json
+++ b/docs/src/examples/catalog/ClipPath.json
@@ -5,31 +5,31 @@
     {
       "example": "segmented-arc-clip-mask",
       "component": "Arc",
-      "path": "/example/Arc/segmented-arc-clip-mask",
+      "path": "/docs/components/Arc/segmented-arc-clip-mask",
       "lineNumber": 17,
       "line": "<ClipPath>"
     },
     {
       "example": "timezones",
       "component": "GeoPath",
-      "path": "/example/GeoPath/timezones",
+      "path": "/docs/components/GeoPath/timezones",
       "lineNumber": 106,
       "line": "<ClipPath useId=\"clip\" disabled={!enableClip}>"
     },
     {
       "example": "timezones",
       "component": "GeoPath",
-      "path": "/example/GeoPath/timezones",
+      "path": "/docs/components/GeoPath/timezones",
       "lineNumber": 129,
       "line": "<ClipPath useId=\"globe\">"
     },
     {
       "example": "clipped",
       "component": "GeoTile",
-      "path": "/example/GeoTile/clipped",
+      "path": "/docs/components/GeoTile/clipped",
       "lineNumber": 42,
       "line": "<ClipPath useId=\"clip\">"
     }
   ],
-  "updatedAt": "2025-11-23T01:49:01.979Z"
+  "updatedAt": "2026-02-07T17:00:31.433Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/ColorRamp.json b/docs/src/examples/catalog/ColorRamp.json
index 199f83e49..278736fe9 100644
--- a/docs/src/examples/catalog/ColorRamp.json
+++ b/docs/src/examples/catalog/ColorRamp.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "basic",
-      "path": "/example/ColorRamp/basic",
+      "title": "basic",
+      "path": "/docs/components/ColorRamp/basic",
       "components": [
         {
           "component": "Svg",
@@ -19,7 +20,8 @@
     },
     {
       "name": "pixelated",
-      "path": "/example/ColorRamp/pixelated",
+      "title": "pixelated",
+      "path": "/docs/components/ColorRamp/pixelated",
       "components": [
         {
           "component": "Svg",
@@ -35,7 +37,8 @@
     },
     {
       "name": "schemes",
-      "path": "/example/ColorRamp/schemes",
+      "title": "schemes",
+      "path": "/docs/components/ColorRamp/schemes",
       "components": [
         {
           "component": "Svg",
@@ -54,31 +57,31 @@
     {
       "example": "basic",
       "component": "ColorRamp",
-      "path": "/example/ColorRamp/basic",
+      "path": "/docs/components/ColorRamp/basic",
       "lineNumber": 24,
       "line": "<ColorRamp {interpolator} {width} {height} />"
     },
     {
       "example": "pixelated",
       "component": "ColorRamp",
-      "path": "/example/ColorRamp/pixelated",
+      "path": "/docs/components/ColorRamp/pixelated",
       "lineNumber": 28,
       "line": "<ColorRamp {interpolator} {width} {height} {steps} class=\"[image-rendering:pixelated]\" />"
     },
     {
       "example": "schemes",
       "component": "ColorRamp",
-      "path": "/example/ColorRamp/schemes",
+      "path": "/docs/components/ColorRamp/schemes",
       "lineNumber": 21,
       "line": "<ColorRamp"
     },
     {
       "example": "schemes",
       "component": "ColorRamp",
-      "path": "/example/ColorRamp/schemes",
+      "path": "/docs/components/ColorRamp/schemes",
       "lineNumber": 35,
       "line": "<ColorRamp"
     }
   ],
-  "updatedAt": "2025-11-12T16:58:09.675Z"
+  "updatedAt": "2026-02-07T20:21:31.564Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Connector.json b/docs/src/examples/catalog/Connector.json
index 07222ef8c..525fb4653 100644
--- a/docs/src/examples/catalog/Connector.json
+++ b/docs/src/examples/catalog/Connector.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "playground",
-      "path": "/example/Connector/playground",
+      "title": "playground",
+      "path": "/docs/components/Connector/playground",
       "components": [
         {
           "component": "Chart",
@@ -32,10 +33,10 @@
     {
       "example": "playground",
       "component": "Connector",
-      "path": "/example/Connector/playground",
+      "path": "/docs/components/Connector/playground",
       "lineNumber": 23,
       "line": "<Connector {source} {target} {sweep} {type} {radius} {curve} class=\"stroke-primary stroke-4\" />"
     }
   ],
-  "updatedAt": "2025-11-23T01:49:02.025Z"
+  "updatedAt": "2026-02-07T20:21:31.596Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Dagre.json b/docs/src/examples/catalog/Dagre.json
index 1f593b66f..e588265c7 100644
--- a/docs/src/examples/catalog/Dagre.json
+++ b/docs/src/examples/catalog/Dagre.json
@@ -3,11 +3,12 @@
   "examples": [
     {
       "name": "basic",
-      "path": "/example/Dagre/basic",
+      "title": "basic",
+      "path": "/docs/components/Dagre/basic",
       "components": [
         {
           "component": "Chart",
-          "lineNumber": 36,
+          "lineNumber": 35,
           "line": "<Chart"
         },
         {
@@ -44,11 +45,12 @@
     },
     {
       "name": "playground",
-      "path": "/example/Dagre/playground",
+      "title": "playground",
+      "path": "/docs/components/Dagre/playground",
       "components": [
         {
           "component": "Chart",
-          "lineNumber": 37,
+          "lineNumber": 36,
           "line": "<Chart"
         },
         {
@@ -85,11 +87,12 @@
     },
     {
       "name": "software-user-flow",
-      "path": "/example/Dagre/software-user-flow",
+      "title": "software user flow",
+      "path": "/docs/components/Dagre/software-user-flow",
       "components": [
         {
           "component": "Chart",
-          "lineNumber": 36,
+          "lineNumber": 35,
           "line": "<Chart"
         },
         {
@@ -126,41 +129,42 @@
     },
     {
       "name": "tcp-state-diagram",
-      "path": "/example/Dagre/tcp-state-diagram",
+      "title": "tcp state diagram",
+      "path": "/docs/components/Dagre/tcp-state-diagram",
       "components": [
         {
           "component": "Chart",
-          "lineNumber": 35,
+          "lineNumber": 34,
           "line": "<Chart"
         },
         {
           "component": "Layer",
-          "lineNumber": 46,
-          "line": "<Layer>"
+          "lineNumber": 47,
+          "line": "<Layer center>"
         },
         {
           "component": "Dagre",
-          "lineNumber": 47,
+          "lineNumber": 48,
           "line": "<Dagre data={data as any} edges={(d) => d.links} {...settings}>"
         },
         {
           "component": "Spline",
-          "lineNumber": 51,
+          "lineNumber": 52,
           "line": "<Spline"
         },
         {
           "component": "Text",
-          "lineNumber": 61,
+          "lineNumber": 62,
           "line": "<Text"
         },
         {
           "component": "Group",
-          "lineNumber": 75,
+          "lineNumber": 76,
           "line": "<Group x={node.x - node.width / 2} y={node.y - node.height / 2} motion=\"tween\">"
         },
         {
           "component": "Rect",
-          "lineNumber": 76,
+          "lineNumber": 77,
           "line": "<Rect"
         }
       ]
@@ -170,31 +174,31 @@
     {
       "example": "basic",
       "component": "Dagre",
-      "path": "/example/Dagre/basic",
+      "path": "/docs/components/Dagre/basic",
       "lineNumber": 47,
       "line": "<Dagre data={data as any} edges={(d) => d.links} {...settings}>"
     },
     {
       "example": "playground",
       "component": "Dagre",
-      "path": "/example/Dagre/playground",
+      "path": "/docs/components/Dagre/playground",
       "lineNumber": 48,
       "line": "<Dagre {data} edges={(d) => d.links} {...settings}>"
     },
     {
       "example": "software-user-flow",
       "component": "Dagre",
-      "path": "/example/Dagre/software-user-flow",
+      "path": "/docs/components/Dagre/software-user-flow",
       "lineNumber": 49,
       "line": "<Dagre data={data as any} edges={(d) => d.links} {...settings}>"
     },
     {
       "example": "tcp-state-diagram",
       "component": "Dagre",
-      "path": "/example/Dagre/tcp-state-diagram",
-      "lineNumber": 47,
+      "path": "/docs/components/Dagre/tcp-state-diagram",
+      "lineNumber": 48,
       "line": "<Dagre data={data as any} edges={(d) => d.links} {...settings}>"
     }
   ],
-  "updatedAt": "2025-11-23T01:49:02.042Z"
+  "updatedAt": "2026-02-07T20:21:31.611Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Ellipse.json b/docs/src/examples/catalog/Ellipse.json
index bd291fa68..d252ee8e5 100644
--- a/docs/src/examples/catalog/Ellipse.json
+++ b/docs/src/examples/catalog/Ellipse.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "styling-using-attributes",
-      "path": "/example/Ellipse/styling-using-attributes",
+      "title": "styling using attributes",
+      "path": "/docs/components/Ellipse/styling-using-attributes",
       "components": [
         {
           "component": "Chart",
@@ -29,7 +30,8 @@
     },
     {
       "name": "styling-using-classes",
-      "path": "/example/Ellipse/styling-using-classes",
+      "title": "styling using classes",
+      "path": "/docs/components/Ellipse/styling-using-classes",
       "components": [
         {
           "component": "Chart",
@@ -55,7 +57,8 @@
     },
     {
       "name": "styling-using-css-variables",
-      "path": "/example/Ellipse/styling-using-css-variables",
+      "title": "styling using css variables",
+      "path": "/docs/components/Ellipse/styling-using-css-variables",
       "components": [
         {
           "component": "Chart",
@@ -84,87 +87,87 @@
     {
       "example": "styling-using-attributes",
       "component": "Ellipse",
-      "path": "/example/Ellipse/styling-using-attributes",
+      "path": "/docs/components/Ellipse/styling-using-attributes",
       "lineNumber": 14,
       "line": "<Ellipse cx={100} cy={100} rx={20} ry={10} fill=\"var(--color-surface-content)\" />"
     },
     {
       "example": "styling-using-attributes",
       "component": "Ellipse",
-      "path": "/example/Ellipse/styling-using-attributes",
+      "path": "/docs/components/Ellipse/styling-using-attributes",
       "lineNumber": 15,
       "line": "<Ellipse cx={200} cy={200} rx={20} ry={10} fill=\"var(--color-primary)\" />"
     },
     {
       "example": "styling-using-attributes",
       "component": "Ellipse",
-      "path": "/example/Ellipse/styling-using-attributes",
+      "path": "/docs/components/Ellipse/styling-using-attributes",
       "lineNumber": 16,
       "line": "<Ellipse cx={200} cy={50} rx={20} ry={10} fill=\"var(--color-secondary)\" />"
     },
     {
       "example": "styling-using-attributes",
       "component": "Ellipse",
-      "path": "/example/Ellipse/styling-using-attributes",
+      "path": "/docs/components/Ellipse/styling-using-attributes",
       "lineNumber": 17,
       "line": "<Ellipse"
     },
     {
       "example": "styling-using-classes",
       "component": "Ellipse",
-      "path": "/example/Ellipse/styling-using-classes",
+      "path": "/docs/components/Ellipse/styling-using-classes",
       "lineNumber": 14,
       "line": "<Ellipse cx={100} cy={100} rx={20} ry={10} />"
     },
     {
       "example": "styling-using-classes",
       "component": "Ellipse",
-      "path": "/example/Ellipse/styling-using-classes",
+      "path": "/docs/components/Ellipse/styling-using-classes",
       "lineNumber": 15,
       "line": "<Ellipse cx={200} cy={200} rx={20} ry={10} class=\"fill-primary bg-primary\" />"
     },
     {
       "example": "styling-using-classes",
       "component": "Ellipse",
-      "path": "/example/Ellipse/styling-using-classes",
+      "path": "/docs/components/Ellipse/styling-using-classes",
       "lineNumber": 16,
       "line": "<Ellipse cx={200} cy={50} rx={20} ry={10} fill=\"var(--color-secondary)\" />"
     },
     {
       "example": "styling-using-classes",
       "component": "Ellipse",
-      "path": "/example/Ellipse/styling-using-classes",
+      "path": "/docs/components/Ellipse/styling-using-classes",
       "lineNumber": 17,
       "line": "<Ellipse"
     },
     {
       "example": "styling-using-css-variables",
       "component": "Ellipse",
-      "path": "/example/Ellipse/styling-using-css-variables",
+      "path": "/docs/components/Ellipse/styling-using-css-variables",
       "lineNumber": 14,
       "line": "<Ellipse cx={100} cy={100} rx={20} ry={10} />"
     },
     {
       "example": "styling-using-css-variables",
       "component": "Ellipse",
-      "path": "/example/Ellipse/styling-using-css-variables",
+      "path": "/docs/components/Ellipse/styling-using-css-variables",
       "lineNumber": 15,
       "line": "<Ellipse"
     },
     {
       "example": "styling-using-css-variables",
       "component": "Ellipse",
-      "path": "/example/Ellipse/styling-using-css-variables",
+      "path": "/docs/components/Ellipse/styling-using-css-variables",
       "lineNumber": 22,
       "line": "<Ellipse"
     },
     {
       "example": "styling-using-css-variables",
       "component": "Ellipse",
-      "path": "/example/Ellipse/styling-using-css-variables",
+      "path": "/docs/components/Ellipse/styling-using-css-variables",
       "lineNumber": 29,
       "line": "<Ellipse"
     }
   ],
-  "updatedAt": "2025-11-13T18:10:49.618Z"
+  "updatedAt": "2026-02-07T20:21:31.640Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/ForceSimulation.json b/docs/src/examples/catalog/ForceSimulation.json
index 549ee0d5b..13bac2399 100644
--- a/docs/src/examples/catalog/ForceSimulation.json
+++ b/docs/src/examples/catalog/ForceSimulation.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "beeswarm",
-      "path": "/example/ForceSimulation/beeswarm",
+      "title": "beeswarm",
+      "path": "/docs/components/ForceSimulation/beeswarm",
       "components": [
         {
           "component": "Chart",
@@ -39,12 +40,13 @@
     },
     {
       "name": "collision-detection",
-      "path": "/example/ForceSimulation/collision-detection",
+      "title": "collision detection",
+      "path": "/docs/components/ForceSimulation/collision-detection",
       "components": [
         {
           "component": "Chart",
           "lineNumber": 36,
-          "line": "<Chart height={600}>"
+          "line": "<Chart height={600} clip>"
         },
         {
           "component": "ForceSimulation",
@@ -70,7 +72,8 @@
     },
     {
       "name": "disjoint-graph",
-      "path": "/example/ForceSimulation/disjoint-graph",
+      "title": "disjoint graph",
+      "path": "/docs/components/ForceSimulation/disjoint-graph",
       "components": [
         {
           "component": "Chart",
@@ -101,7 +104,8 @@
     },
     {
       "name": "graph-drag",
-      "path": "/example/ForceSimulation/graph-drag",
+      "title": "graph drag",
+      "path": "/docs/components/ForceSimulation/graph-drag",
       "components": [
         {
           "component": "Chart",
@@ -137,7 +141,8 @@
     },
     {
       "name": "graph-playground",
-      "path": "/example/ForceSimulation/graph-playground",
+      "title": "graph playground",
+      "path": "/docs/components/ForceSimulation/graph-playground",
       "components": [
         {
           "component": "Chart",
@@ -173,7 +178,8 @@
     },
     {
       "name": "group",
-      "path": "/example/ForceSimulation/group",
+      "title": "group",
+      "path": "/docs/components/ForceSimulation/group",
       "components": [
         {
           "component": "Chart",
@@ -199,7 +205,8 @@
     },
     {
       "name": "lattice",
-      "path": "/example/ForceSimulation/lattice",
+      "title": "lattice",
+      "path": "/docs/components/ForceSimulation/lattice",
       "components": [
         {
           "component": "Chart",
@@ -230,7 +237,8 @@
     },
     {
       "name": "text",
-      "path": "/example/ForceSimulation/text",
+      "title": "text",
+      "path": "/docs/components/ForceSimulation/text",
       "components": [
         {
           "component": "Chart",
@@ -239,24 +247,25 @@
         },
         {
           "component": "ForceSimulation",
-          "lineNumber": 80,
+          "lineNumber": 81,
           "line": "<ForceSimulation"
         },
         {
           "component": "Layer",
-          "lineNumber": 96,
+          "lineNumber": 97,
           "line": "<Layer"
         },
         {
           "component": "Points",
-          "lineNumber": 102,
+          "lineNumber": 103,
           "line": "<Points data={nodes.slice(1)} r={config.radius} class=\"fill-primary\" />"
         }
       ]
     },
     {
       "name": "tree",
-      "path": "/example/ForceSimulation/tree",
+      "title": "tree",
+      "path": "/docs/components/ForceSimulation/tree",
       "components": [
         {
           "component": "Chart",
@@ -295,66 +304,66 @@
     {
       "example": "beeswarm",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/beeswarm",
+      "path": "/docs/components/ForceSimulation/beeswarm",
       "lineNumber": 33,
       "line": "<ForceSimulation"
     },
     {
       "example": "collision-detection",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/collision-detection",
+      "path": "/docs/components/ForceSimulation/collision-detection",
       "lineNumber": 38,
       "line": "<ForceSimulation"
     },
     {
       "example": "disjoint-graph",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/disjoint-graph",
+      "path": "/docs/components/ForceSimulation/disjoint-graph",
       "lineNumber": 55,
       "line": "<ForceSimulation"
     },
     {
       "example": "graph-drag",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/graph-drag",
+      "path": "/docs/components/ForceSimulation/graph-drag",
       "lineNumber": 71,
       "line": "<ForceSimulation"
     },
     {
       "example": "graph-playground",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/graph-playground",
+      "path": "/docs/components/ForceSimulation/graph-playground",
       "lineNumber": 148,
       "line": "<ForceSimulation"
     },
     {
       "example": "group",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/group",
+      "path": "/docs/components/ForceSimulation/group",
       "lineNumber": 54,
       "line": "<ForceSimulation"
     },
     {
       "example": "lattice",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/lattice",
+      "path": "/docs/components/ForceSimulation/lattice",
       "lineNumber": 27,
       "line": "<ForceSimulation"
     },
     {
       "example": "text",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/text",
-      "lineNumber": 80,
+      "path": "/docs/components/ForceSimulation/text",
+      "lineNumber": 81,
       "line": "<ForceSimulation"
     },
     {
       "example": "tree",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/tree",
+      "path": "/docs/components/ForceSimulation/tree",
       "lineNumber": 34,
       "line": "<ForceSimulation"
     }
   ],
-  "updatedAt": "2025-11-23T01:49:02.089Z"
+  "updatedAt": "2026-02-07T20:21:31.656Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Frame.json b/docs/src/examples/catalog/Frame.json
index c8f4a3671..4e121a56f 100644
--- a/docs/src/examples/catalog/Frame.json
+++ b/docs/src/examples/catalog/Frame.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "basic",
-      "path": "/example/Frame/basic",
+      "title": "basic",
+      "path": "/docs/components/Frame/basic",
       "components": [
         {
           "component": "Chart",
@@ -29,7 +30,8 @@
     },
     {
       "name": "border",
-      "path": "/example/Frame/border",
+      "title": "border",
+      "path": "/docs/components/Frame/border",
       "components": [
         {
           "component": "Chart",
@@ -55,7 +57,8 @@
     },
     {
       "name": "full",
-      "path": "/example/Frame/full",
+      "title": "full",
+      "path": "/docs/components/Frame/full",
       "components": [
         {
           "component": "Chart",
@@ -81,7 +84,8 @@
     },
     {
       "name": "gradient",
-      "path": "/example/Frame/gradient",
+      "title": "gradient",
+      "path": "/docs/components/Frame/gradient",
       "components": [
         {
           "component": "Chart",
@@ -115,31 +119,31 @@
     {
       "example": "basic",
       "component": "Frame",
-      "path": "/example/Frame/basic",
+      "path": "/docs/components/Frame/basic",
       "lineNumber": 12,
       "line": "<Frame class=\"fill-danger/5\" />"
     },
     {
       "example": "border",
       "component": "Frame",
-      "path": "/example/Frame/border",
+      "path": "/docs/components/Frame/border",
       "lineNumber": 12,
       "line": "<Frame class=\"stroke-surface-content/50 fill-none\" />"
     },
     {
       "example": "full",
       "component": "Frame",
-      "path": "/example/Frame/full",
+      "path": "/docs/components/Frame/full",
       "lineNumber": 12,
       "line": "<Frame class=\"fill-danger/5\" full />"
     },
     {
       "example": "gradient",
       "component": "Frame",
-      "path": "/example/Frame/gradient",
+      "path": "/docs/components/Frame/gradient",
       "lineNumber": 14,
       "line": "<Frame class=\"stroke-primary/10\" fill={gradient} />"
     }
   ],
-  "updatedAt": "2025-11-12T16:58:09.826Z"
+  "updatedAt": "2026-02-07T20:21:31.674Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/GeoCircle.json b/docs/src/examples/catalog/GeoCircle.json
index 4b6dc8621..e3587b7f3 100644
--- a/docs/src/examples/catalog/GeoCircle.json
+++ b/docs/src/examples/catalog/GeoCircle.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "earthquake-globe",
-      "path": "/example/GeoCircle/earthquake-globe",
+      "title": "earthquake globe",
+      "path": "/docs/components/GeoCircle/earthquake-globe",
       "components": [
         {
           "component": "Chart",
@@ -39,7 +40,8 @@
     },
     {
       "name": "playground",
-      "path": "/example/GeoCircle/playground",
+      "title": "playground",
+      "path": "/docs/components/GeoCircle/playground",
       "components": [
         {
           "component": "Chart",
@@ -73,31 +75,31 @@
     {
       "example": "earthquake-globe",
       "component": "GeoCircle",
-      "path": "/example/GeoCircle/earthquake-globe",
+      "path": "/docs/components/GeoCircle/earthquake-globe",
       "lineNumber": 79,
       "line": "<GeoCircle"
     },
     {
       "example": "playground",
       "component": "GeoCircle",
-      "path": "/example/GeoCircle/playground",
+      "path": "/docs/components/GeoCircle/playground",
       "lineNumber": 75,
       "line": "<GeoCircle"
     },
     {
       "example": "playground",
       "component": "GeoCircle",
-      "path": "/example/GeoCircle/playground",
+      "path": "/docs/components/GeoCircle/playground",
       "lineNumber": 83,
       "line": "<GeoCircle"
     },
     {
       "example": "timezones",
       "component": "GeoPath",
-      "path": "/example/GeoPath/timezones",
+      "path": "/docs/components/GeoPath/timezones",
       "lineNumber": 131,
       "line": "<GeoCircle"
     }
   ],
-  "updatedAt": "2026-01-13T17:22:23.641Z"
+  "updatedAt": "2026-02-07T20:21:31.688Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/GeoContext.json b/docs/src/examples/catalog/GeoContext.json
index bee21fe50..34d98befc 100644
--- a/docs/src/examples/catalog/GeoContext.json
+++ b/docs/src/examples/catalog/GeoContext.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "geojson-preview",
-      "path": "/example/GeoContext/geojson-preview",
+      "title": "geojson preview",
+      "path": "/docs/components/GeoContext/geojson-preview",
       "components": [
         {
           "component": "Chart",
@@ -12,34 +13,35 @@
         },
         {
           "component": "Layer",
-          "lineNumber": 102,
+          "lineNumber": 103,
           "line": "<Layer>"
         },
         {
           "component": "GeoTile",
-          "lineNumber": 104,
+          "lineNumber": 105,
           "line": "<GeoTile url={serviceUrl} zoomDelta={-100} />"
         },
         {
           "component": "TransformControls",
-          "lineNumber": 111,
+          "lineNumber": 112,
           "line": "<TransformControls />"
         },
         {
           "component": "GeoPath",
-          "lineNumber": 116,
+          "lineNumber": 117,
           "line": "<GeoPath"
         },
         {
           "component": "Tooltip",
-          "lineNumber": 126,
+          "lineNumber": 127,
           "line": "<Tooltip.Root>"
         }
       ]
     },
     {
       "name": "projection-playground",
-      "path": "/example/GeoContext/projection-playground",
+      "title": "projection playground",
+      "path": "/docs/components/GeoContext/projection-playground",
       "components": [
         {
           "component": "Chart",
@@ -70,7 +72,8 @@
     },
     {
       "name": "shapefile-preview",
-      "path": "/example/GeoContext/shapefile-preview",
+      "title": "shapefile preview",
+      "path": "/docs/components/GeoContext/shapefile-preview",
       "components": [
         {
           "component": "Chart",
@@ -91,7 +94,8 @@
     },
     {
       "name": "topojson-preview",
-      "path": "/example/GeoContext/topojson-preview",
+      "title": "topojson preview",
+      "path": "/docs/components/GeoContext/topojson-preview",
       "components": [
         {
           "component": "Chart",
@@ -130,10 +134,10 @@
     {
       "example": "translucent-globe",
       "component": "GeoPath",
-      "path": "/example/GeoPath/translucent-globe",
+      "path": "/docs/components/GeoPath/translucent-globe",
       "lineNumber": 62,
       "line": "<GeoContext"
     }
   ],
-  "updatedAt": "2026-01-13T17:22:23.656Z"
+  "updatedAt": "2026-02-07T20:21:31.706Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/GeoEdgeFade.json b/docs/src/examples/catalog/GeoEdgeFade.json
index 2f370e1e3..49a3e9a6f 100644
--- a/docs/src/examples/catalog/GeoEdgeFade.json
+++ b/docs/src/examples/catalog/GeoEdgeFade.json
@@ -5,10 +5,10 @@
     {
       "example": "draggable-globe",
       "component": "GeoSpline",
-      "path": "/example/GeoSpline/draggable-globe",
+      "path": "/docs/components/GeoSpline/draggable-globe",
       "lineNumber": 33,
       "line": "<GeoEdgeFade {link}>"
     }
   ],
-  "updatedAt": "2026-01-13T17:22:23.669Z"
+  "updatedAt": "2026-02-07T17:00:31.632Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/GeoPath.json b/docs/src/examples/catalog/GeoPath.json
index 680dd087c..882d3bc52 100644
--- a/docs/src/examples/catalog/GeoPath.json
+++ b/docs/src/examples/catalog/GeoPath.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "animated-globe",
-      "path": "/example/GeoPath/animated-globe",
+      "title": "animated globe",
+      "path": "/docs/components/GeoPath/animated-globe",
       "components": [
         {
           "component": "Chart",
@@ -39,7 +40,8 @@
     },
     {
       "name": "bubble-map",
-      "path": "/example/GeoPath/bubble-map",
+      "title": "bubble map",
+      "path": "/docs/components/GeoPath/bubble-map",
       "components": [
         {
           "component": "Chart",
@@ -75,7 +77,8 @@
     },
     {
       "name": "choropleth",
-      "path": "/example/GeoPath/choropleth",
+      "title": "choropleth",
+      "path": "/docs/components/GeoPath/choropleth",
       "components": [
         {
           "component": "Chart",
@@ -106,7 +109,8 @@
     },
     {
       "name": "eclipses-globe",
-      "path": "/example/GeoPath/eclipses-globe",
+      "title": "eclipses globe",
+      "path": "/docs/components/GeoPath/eclipses-globe",
       "components": [
         {
           "component": "Chart",
@@ -142,7 +146,8 @@
     },
     {
       "name": "sketchy-globe",
-      "path": "/example/GeoPath/sketchy-globe",
+      "title": "sketchy globe",
+      "path": "/docs/components/GeoPath/sketchy-globe",
       "components": [
         {
           "component": "Chart",
@@ -168,7 +173,8 @@
     },
     {
       "name": "spike-map",
-      "path": "/example/GeoPath/spike-map",
+      "title": "spike map",
+      "path": "/docs/components/GeoPath/spike-map",
       "components": [
         {
           "component": "Chart",
@@ -177,29 +183,30 @@
         },
         {
           "component": "Layer",
-          "lineNumber": 73,
+          "lineNumber": 74,
           "line": "<Layer>"
         },
         {
           "component": "GeoPath",
-          "lineNumber": 74,
+          "lineNumber": 75,
           "line": "<GeoPath geojson={states} class=\"fill-surface-content/10 stroke-surface-100\" {strokeWidth} />"
         },
         {
           "component": "Spline",
-          "lineNumber": 82,
+          "lineNumber": 83,
           "line": "<Spline"
         },
         {
           "component": "Tooltip",
-          "lineNumber": 112,
+          "lineNumber": 113,
           "line": "<Tooltip.Root>"
         }
       ]
     },
     {
       "name": "submarine-cables-globe",
-      "path": "/example/GeoPath/submarine-cables-globe",
+      "title": "submarine cables globe",
+      "path": "/docs/components/GeoPath/submarine-cables-globe",
       "components": [
         {
           "component": "Chart",
@@ -240,7 +247,8 @@
     },
     {
       "name": "timezones",
-      "path": "/example/GeoPath/timezones",
+      "title": "timezones",
+      "path": "/docs/components/GeoPath/timezones",
       "components": [
         {
           "component": "Chart",
@@ -281,7 +289,8 @@
     },
     {
       "name": "tooltip",
-      "path": "/example/GeoPath/tooltip",
+      "title": "tooltip",
+      "path": "/docs/components/GeoPath/tooltip",
       "components": [
         {
           "component": "Chart",
@@ -312,7 +321,8 @@
     },
     {
       "name": "transform-canvas",
-      "path": "/example/GeoPath/transform-canvas",
+      "title": "transform canvas",
+      "path": "/docs/components/GeoPath/transform-canvas",
       "components": [
         {
           "component": "Chart",
@@ -338,11 +348,12 @@
     },
     {
       "name": "transform-projection",
-      "path": "/example/GeoPath/transform-projection",
+      "title": "transform projection",
+      "path": "/docs/components/GeoPath/transform-projection",
       "components": [
         {
           "component": "Chart",
-          "lineNumber": 50,
+          "lineNumber": 49,
           "line": "<Chart"
         },
         {
@@ -364,7 +375,8 @@
     },
     {
       "name": "translucent-globe",
-      "path": "/example/GeoPath/translucent-globe",
+      "title": "translucent globe",
+      "path": "/docs/components/GeoPath/translucent-globe",
       "components": [
         {
           "component": "Chart",
@@ -400,7 +412,8 @@
     },
     {
       "name": "us-country-map",
-      "path": "/example/GeoPath/us-country-map",
+      "title": "us country map",
+      "path": "/docs/components/GeoPath/us-country-map",
       "components": [
         {
           "component": "Chart",
@@ -426,7 +439,8 @@
     },
     {
       "name": "us-state",
-      "path": "/example/GeoPath/us-state",
+      "title": "us state",
+      "path": "/docs/components/GeoPath/us-state",
       "components": [
         {
           "component": "Chart",
@@ -447,7 +461,8 @@
     },
     {
       "name": "us-state-with-counties",
-      "path": "/example/GeoPath/us-state-with-counties",
+      "title": "us state with counties",
+      "path": "/docs/components/GeoPath/us-state-with-counties",
       "components": [
         {
           "component": "Chart",
@@ -473,7 +488,8 @@
     },
     {
       "name": "us-state-with-surrounding-states",
-      "path": "/example/GeoPath/us-state-with-surrounding-states",
+      "title": "us state with surrounding states",
+      "path": "/docs/components/GeoPath/us-state-with-surrounding-states",
       "components": [
         {
           "component": "Chart",
@@ -507,521 +523,521 @@
     {
       "example": "earthquake-globe",
       "component": "GeoCircle",
-      "path": "/example/GeoCircle/earthquake-globe",
+      "path": "/docs/components/GeoCircle/earthquake-globe",
       "lineNumber": 71,
       "line": "<GeoPath geojson={{ type: 'Sphere' }} class=\"fill-blue-400/50\" />"
     },
     {
       "example": "earthquake-globe",
       "component": "GeoCircle",
-      "path": "/example/GeoCircle/earthquake-globe",
+      "path": "/docs/components/GeoCircle/earthquake-globe",
       "lineNumber": 75,
       "line": "<GeoPath geojson={countries} class=\"stroke-surface-100/30 fill-surface-content\" />"
     },
     {
       "example": "earthquake-globe",
       "component": "GeoCircle",
-      "path": "/example/GeoCircle/earthquake-globe",
+      "path": "/docs/components/GeoCircle/earthquake-globe",
       "lineNumber": 76,
       "line": "<GeoPath geojson={tectonicPlates} class=\"stroke-danger-100/30\" />"
     },
     {
       "example": "playground",
       "component": "GeoCircle",
-      "path": "/example/GeoCircle/playground",
+      "path": "/docs/components/GeoCircle/playground",
       "lineNumber": 64,
       "line": "<GeoPath geojson={{ type: 'Sphere' }} class=\"stroke-surface-content/30\" id=\"globe\" />"
     },
     {
       "example": "playground",
       "component": "GeoCircle",
-      "path": "/example/GeoCircle/playground",
+      "path": "/docs/components/GeoCircle/playground",
       "lineNumber": 68,
       "line": "<GeoPath"
     },
     {
       "example": "geojson-preview",
       "component": "GeoContext",
-      "path": "/example/GeoContext/geojson-preview",
-      "lineNumber": 116,
+      "path": "/docs/components/GeoContext/geojson-preview",
+      "lineNumber": 117,
       "line": "<GeoPath"
     },
     {
       "example": "projection-playground",
       "component": "GeoContext",
-      "path": "/example/GeoContext/projection-playground",
+      "path": "/docs/components/GeoContext/projection-playground",
       "lineNumber": 76,
       "line": "<GeoPath geojson={{ type: 'Sphere' }} class=\"stroke-surface-content fill-blue-400/50\" />"
     },
     {
       "example": "projection-playground",
       "component": "GeoContext",
-      "path": "/example/GeoContext/projection-playground",
+      "path": "/docs/components/GeoContext/projection-playground",
       "lineNumber": 79,
       "line": "<GeoPath"
     },
     {
       "example": "shapefile-preview",
       "component": "GeoContext",
-      "path": "/example/GeoContext/shapefile-preview",
+      "path": "/docs/components/GeoContext/shapefile-preview",
       "lineNumber": 110,
       "line": "<GeoPath {geojson} fill=\"white\" />"
     },
     {
       "example": "topojson-preview",
       "component": "GeoContext",
-      "path": "/example/GeoContext/topojson-preview",
+      "path": "/docs/components/GeoContext/topojson-preview",
       "lineNumber": 124,
       "line": "<GeoPath"
     },
     {
       "example": "animated-globe",
       "component": "GeoPath",
-      "path": "/example/GeoPath/animated-globe",
+      "path": "/docs/components/GeoPath/animated-globe",
       "lineNumber": 147,
       "line": "<GeoPath geojson={{ type: 'Sphere' }} class=\"fill-blue-400/50\" />"
     },
     {
       "example": "animated-globe",
       "component": "GeoPath",
-      "path": "/example/GeoPath/animated-globe",
+      "path": "/docs/components/GeoPath/animated-globe",
       "lineNumber": 151,
       "line": "<GeoPath"
     },
     {
       "example": "animated-globe",
       "component": "GeoPath",
-      "path": "/example/GeoPath/animated-globe",
+      "path": "/docs/components/GeoPath/animated-globe",
       "lineNumber": 169,
       "line": "<GeoPath geojson={context.tooltip.data} class=\"fill-surface-content/20\" />"
     },
     {
       "example": "bubble-map",
       "component": "GeoPath",
-      "path": "/example/GeoPath/bubble-map",
+      "path": "/docs/components/GeoPath/bubble-map",
       "lineNumber": 89,
       "line": "<GeoPath geojson={states} class=\"fill-surface-content/10 stroke-surface-100\" {strokeWidth} />"
     },
     {
       "example": "bubble-map",
       "component": "GeoPath",
-      "path": "/example/GeoPath/bubble-map",
+      "path": "/docs/components/GeoPath/bubble-map",
       "lineNumber": 92,
       "line": "<GeoPath geojson={feature} {strokeWidth}>"
     },
     {
       "example": "bubble-map",
       "component": "GeoPath",
-      "path": "/example/GeoPath/bubble-map",
+      "path": "/docs/components/GeoPath/bubble-map",
       "lineNumber": 111,
       "line": "<GeoPath"
     },
     {
       "example": "bubble-map",
       "component": "GeoPath",
-      "path": "/example/GeoPath/bubble-map",
+      "path": "/docs/components/GeoPath/bubble-map",
       "lineNumber": 123,
       "line": "<GeoPath"
     },
     {
       "example": "choropleth",
       "component": "GeoPath",
-      "path": "/example/GeoPath/choropleth",
+      "path": "/docs/components/GeoPath/choropleth",
       "lineNumber": 77,
       "line": "<GeoPath"
     },
     {
       "example": "choropleth",
       "component": "GeoPath",
-      "path": "/example/GeoPath/choropleth",
+      "path": "/docs/components/GeoPath/choropleth",
       "lineNumber": 86,
       "line": "<GeoPath"
     },
     {
       "example": "choropleth",
       "component": "GeoPath",
-      "path": "/example/GeoPath/choropleth",
+      "path": "/docs/components/GeoPath/choropleth",
       "lineNumber": 96,
       "line": "<GeoPath geojson={context.tooltip.data} class=\"stroke-white\" {strokeWidth} />"
     },
     {
       "example": "eclipses-globe",
       "component": "GeoPath",
-      "path": "/example/GeoPath/eclipses-globe",
+      "path": "/docs/components/GeoPath/eclipses-globe",
       "lineNumber": 81,
       "line": "<GeoPath geojson={{ type: 'Sphere' }} class=\"fill-surface-200 stroke-surface-content/20\" />"
     },
     {
       "example": "eclipses-globe",
       "component": "GeoPath",
-      "path": "/example/GeoPath/eclipses-globe",
+      "path": "/docs/components/GeoPath/eclipses-globe",
       "lineNumber": 83,
       "line": "<GeoPath geojson={countries} class=\"stroke-surface-100/30 fill-surface-content\" />"
     },
     {
       "example": "eclipses-globe",
       "component": "GeoPath",
-      "path": "/example/GeoPath/eclipses-globe",
+      "path": "/docs/components/GeoPath/eclipses-globe",
       "lineNumber": 89,
       "line": "<GeoPath"
     },
     {
       "example": "sketchy-globe",
       "component": "GeoPath",
-      "path": "/example/GeoPath/sketchy-globe",
+      "path": "/docs/components/GeoPath/sketchy-globe",
       "lineNumber": 54,
       "line": "<GeoPath geojson={{ type: 'Sphere' }} class=\"fill-blue-400/50\" />"
     },
     {
       "example": "sketchy-globe",
       "component": "GeoPath",
-      "path": "/example/GeoPath/sketchy-globe",
+      "path": "/docs/components/GeoPath/sketchy-globe",
       "lineNumber": 56,
       "line": "<GeoPath geojson={land} {curve} class=\"stroke-surface-content/50 fill-white\" />"
     },
     {
       "example": "spike-map",
       "component": "GeoPath",
-      "path": "/example/GeoPath/spike-map",
-      "lineNumber": 74,
+      "path": "/docs/components/GeoPath/spike-map",
+      "lineNumber": 75,
       "line": "<GeoPath geojson={states} class=\"fill-surface-content/10 stroke-surface-100\" {strokeWidth} />"
     },
     {
       "example": "spike-map",
       "component": "GeoPath",
-      "path": "/example/GeoPath/spike-map",
-      "lineNumber": 77,
+      "path": "/docs/components/GeoPath/spike-map",
+      "lineNumber": 78,
       "line": "<GeoPath geojson={feature} {strokeWidth}>"
     },
     {
       "example": "spike-map",
       "component": "GeoPath",
-      "path": "/example/GeoPath/spike-map",
-      "lineNumber": 92,
+      "path": "/docs/components/GeoPath/spike-map",
+      "lineNumber": 93,
       "line": "<GeoPath"
     },
     {
       "example": "spike-map",
       "component": "GeoPath",
-      "path": "/example/GeoPath/spike-map",
-      "lineNumber": 104,
+      "path": "/docs/components/GeoPath/spike-map",
+      "lineNumber": 105,
       "line": "<GeoPath"
     },
     {
       "example": "submarine-cables-globe",
       "component": "GeoPath",
-      "path": "/example/GeoPath/submarine-cables-globe",
+      "path": "/docs/components/GeoPath/submarine-cables-globe",
       "lineNumber": 69,
       "line": "<GeoPath geojson={{ type: 'Sphere' }} class=\"fill-surface-200 stroke-surface-content/20\" />"
     },
     {
       "example": "submarine-cables-globe",
       "component": "GeoPath",
-      "path": "/example/GeoPath/submarine-cables-globe",
+      "path": "/docs/components/GeoPath/submarine-cables-globe",
       "lineNumber": 71,
       "line": "<GeoPath geojson={countries} class=\"stroke-surface-100/30 fill-surface-content\" />"
     },
     {
       "example": "submarine-cables-globe",
       "component": "GeoPath",
-      "path": "/example/GeoPath/submarine-cables-globe",
+      "path": "/docs/components/GeoPath/submarine-cables-globe",
       "lineNumber": 76,
       "line": "<GeoPath"
     },
     {
       "example": "timezones",
       "component": "GeoPath",
-      "path": "/example/GeoPath/timezones",
+      "path": "/docs/components/GeoPath/timezones",
       "lineNumber": 103,
       "line": "<GeoPath geojson={{ type: 'Sphere' }} class=\"stroke-surface-content/30\" id=\"globe\" />"
     },
     {
       "example": "timezones",
       "component": "GeoPath",
-      "path": "/example/GeoPath/timezones",
+      "path": "/docs/components/GeoPath/timezones",
       "lineNumber": 105,
       "line": "<GeoPath geojson={countriesGeojson} id=\"clip\" />"
     },
     {
       "example": "timezones",
       "component": "GeoPath",
-      "path": "/example/GeoPath/timezones",
+      "path": "/docs/components/GeoPath/timezones",
       "lineNumber": 108,
       "line": "<GeoPath"
     },
     {
       "example": "timezones",
       "component": "GeoPath",
-      "path": "/example/GeoPath/timezones",
+      "path": "/docs/components/GeoPath/timezones",
       "lineNumber": 118,
       "line": "<GeoPath"
     },
     {
       "example": "timezones",
       "component": "GeoPath",
-      "path": "/example/GeoPath/timezones",
+      "path": "/docs/components/GeoPath/timezones",
       "lineNumber": 125,
       "line": "<GeoPath geojson={feature} class=\"stroke-gray-900/10 pointer-events-none\" />"
     },
     {
       "example": "tooltip",
       "component": "GeoPath",
-      "path": "/example/GeoPath/tooltip",
+      "path": "/docs/components/GeoPath/tooltip",
       "lineNumber": 24,
       "line": "<GeoPath"
     },
     {
       "example": "tooltip",
       "component": "GeoPath",
-      "path": "/example/GeoPath/tooltip",
+      "path": "/docs/components/GeoPath/tooltip",
       "lineNumber": 31,
       "line": "<GeoPath geojson={counties} class=\"fill-none stroke-surface-content/10 pointer-events-none\" />"
     },
     {
       "example": "tooltip",
       "component": "GeoPath",
-      "path": "/example/GeoPath/tooltip",
+      "path": "/docs/components/GeoPath/tooltip",
       "lineNumber": 39,
       "line": "<GeoPath"
     },
     {
       "example": "transform-canvas",
       "component": "GeoPath",
-      "path": "/example/GeoPath/transform-canvas",
+      "path": "/docs/components/GeoPath/transform-canvas",
       "lineNumber": 66,
       "line": "<GeoPath"
     },
     {
       "example": "transform-canvas",
       "component": "GeoPath",
-      "path": "/example/GeoPath/transform-canvas",
+      "path": "/docs/components/GeoPath/transform-canvas",
       "lineNumber": 97,
       "line": "<GeoPath"
     },
     {
       "example": "transform-canvas",
       "component": "GeoPath",
-      "path": "/example/GeoPath/transform-canvas",
+      "path": "/docs/components/GeoPath/transform-canvas",
       "lineNumber": 114,
       "line": "<GeoPath"
     },
     {
       "example": "transform-projection",
       "component": "GeoPath",
-      "path": "/example/GeoPath/transform-projection",
+      "path": "/docs/components/GeoPath/transform-projection",
       "lineNumber": 67,
       "line": "<GeoPath"
     },
     {
       "example": "transform-projection",
       "component": "GeoPath",
-      "path": "/example/GeoPath/transform-projection",
+      "path": "/docs/components/GeoPath/transform-projection",
       "lineNumber": 95,
       "line": "<GeoPath"
     },
     {
       "example": "transform-projection",
       "component": "GeoPath",
-      "path": "/example/GeoPath/transform-projection",
+      "path": "/docs/components/GeoPath/transform-projection",
       "lineNumber": 112,
       "line": "<GeoPath"
     },
     {
       "example": "translucent-globe",
       "component": "GeoPath",
-      "path": "/example/GeoPath/translucent-globe",
+      "path": "/docs/components/GeoPath/translucent-globe",
       "lineNumber": 59,
       "line": "<GeoPath geojson={{ type: 'Sphere' }} class=\"fill-blue-400/20\" />"
     },
     {
       "example": "translucent-globe",
       "component": "GeoPath",
-      "path": "/example/GeoPath/translucent-globe",
+      "path": "/docs/components/GeoPath/translucent-globe",
       "lineNumber": 70,
       "line": "<GeoPath geojson={country} class=\"stroke-surface-content/5 fill-surface-content/10\" />"
     },
     {
       "example": "translucent-globe",
       "component": "GeoPath",
-      "path": "/example/GeoPath/translucent-globe",
+      "path": "/docs/components/GeoPath/translucent-globe",
       "lineNumber": 77,
       "line": "<GeoPath"
     },
     {
       "example": "us-country-map",
       "component": "GeoPath",
-      "path": "/example/GeoPath/us-country-map",
+      "path": "/docs/components/GeoPath/us-country-map",
       "lineNumber": 25,
       "line": "<GeoPath"
     },
     {
       "example": "us-country-map",
       "component": "GeoPath",
-      "path": "/example/GeoPath/us-country-map",
+      "path": "/docs/components/GeoPath/us-country-map",
       "lineNumber": 33,
       "line": "<GeoPath geojson={feature}>"
     },
     {
       "example": "us-state",
       "component": "GeoPath",
-      "path": "/example/GeoPath/us-state",
+      "path": "/docs/components/GeoPath/us-state",
       "lineNumber": 45,
       "line": "<GeoPath geojson={selectedStateFeature} class=\"stroke-surface-content\" />"
     },
     {
       "example": "us-state-with-counties",
       "component": "GeoPath",
-      "path": "/example/GeoPath/us-state-with-counties",
+      "path": "/docs/components/GeoPath/us-state-with-counties",
       "lineNumber": 51,
       "line": "<GeoPath"
     },
     {
       "example": "us-state-with-counties",
       "component": "GeoPath",
-      "path": "/example/GeoPath/us-state-with-counties",
+      "path": "/docs/components/GeoPath/us-state-with-counties",
       "lineNumber": 57,
       "line": "<GeoPath"
     },
     {
       "example": "us-state-with-surrounding-states",
       "component": "GeoPath",
-      "path": "/example/GeoPath/us-state-with-surrounding-states",
+      "path": "/docs/components/GeoPath/us-state-with-surrounding-states",
       "lineNumber": 49,
       "line": "<GeoPath"
     },
     {
       "example": "us-state-with-surrounding-states",
       "component": "GeoPath",
-      "path": "/example/GeoPath/us-state-with-surrounding-states",
+      "path": "/docs/components/GeoPath/us-state-with-surrounding-states",
       "lineNumber": 56,
       "line": "<GeoPath"
     },
     {
       "example": "us-state-with-surrounding-states",
       "component": "GeoPath",
-      "path": "/example/GeoPath/us-state-with-surrounding-states",
+      "path": "/docs/components/GeoPath/us-state-with-surrounding-states",
       "lineNumber": 61,
       "line": "<GeoPath"
     },
     {
       "example": "icons",
       "component": "GeoPoint",
-      "path": "/example/GeoPoint/icons",
-      "lineNumber": 36,
+      "path": "/docs/components/GeoPoint/icons",
+      "lineNumber": 30,
       "line": "<GeoPath"
     },
     {
       "example": "us-airports",
       "component": "GeoPoint",
-      "path": "/example/GeoPoint/us-airports",
+      "path": "/docs/components/GeoPoint/us-airports",
       "lineNumber": 40,
       "line": "<GeoPath"
     },
     {
       "example": "us-state-capitals",
       "component": "GeoPoint",
-      "path": "/example/GeoPoint/us-state-capitals",
+      "path": "/docs/components/GeoPoint/us-state-capitals",
       "lineNumber": 27,
       "line": "<GeoPath"
     },
     {
       "example": "world-airports",
       "component": "GeoPoint",
-      "path": "/example/GeoPoint/world-airports",
+      "path": "/docs/components/GeoPoint/world-airports",
       "lineNumber": 40,
       "line": "<GeoPath geojson={feature} class=\"fill-surface-content/10 stroke-surface-100\" />"
     },
     {
       "example": "world-capitals",
       "component": "GeoPoint",
-      "path": "/example/GeoPoint/world-capitals",
+      "path": "/docs/components/GeoPoint/world-capitals",
       "lineNumber": 40,
       "line": "<GeoPath"
     },
     {
       "example": "draggable-globe",
       "component": "GeoSpline",
-      "path": "/example/GeoSpline/draggable-globe",
+      "path": "/docs/components/GeoSpline/draggable-globe",
       "lineNumber": 27,
       "line": "<GeoPath geojson={{ type: 'Sphere' }} class=\"fill-blue-400/50\" />"
     },
     {
       "example": "draggable-globe",
       "component": "GeoSpline",
-      "path": "/example/GeoSpline/draggable-globe",
+      "path": "/docs/components/GeoSpline/draggable-globe",
       "lineNumber": 30,
       "line": "<GeoPath geojson={country} class=\"stroke-surface-content/50 fill-white pointer-events-none\" />"
     },
     {
       "example": "world-map",
       "component": "GeoSpline",
-      "path": "/example/GeoSpline/world-map",
+      "path": "/docs/components/GeoSpline/world-map",
       "lineNumber": 38,
       "line": "<GeoPath geojson={{ type: 'Sphere' }} class=\"fill-blue-400/50\" />"
     },
     {
       "example": "world-map",
       "component": "GeoSpline",
-      "path": "/example/GeoSpline/world-map",
+      "path": "/docs/components/GeoSpline/world-map",
       "lineNumber": 41,
       "line": "<GeoPath geojson={country} class=\"stroke-surface-content/50 fill-white\" />"
     },
     {
       "example": "basic",
       "component": "GeoTile",
-      "path": "/example/GeoTile/basic",
-      "lineNumber": 46,
+      "path": "/docs/components/GeoTile/basic",
+      "lineNumber": 47,
       "line": "<GeoPath"
     },
     {
       "example": "clipped",
       "component": "GeoTile",
-      "path": "/example/GeoTile/clipped",
+      "path": "/docs/components/GeoTile/clipped",
       "lineNumber": 45,
       "line": "<GeoPath geojson={selectedFeature} id=\"clip\" class=\"stroke-none\" />"
     },
     {
       "example": "clipped",
       "component": "GeoTile",
-      "path": "/example/GeoTile/clipped",
+      "path": "/docs/components/GeoTile/clipped",
       "lineNumber": 47,
       "line": "<GeoPath"
     },
     {
       "example": "zoomable",
       "component": "GeoTile",
-      "path": "/example/GeoTile/zoomable",
-      "lineNumber": 68,
+      "path": "/docs/components/GeoTile/zoomable",
+      "lineNumber": 69,
       "line": "<GeoPath"
     },
     {
       "example": "zoomable-seamless-layers",
       "component": "GeoTile",
-      "path": "/example/GeoTile/zoomable-seamless-layers",
-      "lineNumber": 72,
+      "path": "/docs/components/GeoTile/zoomable-seamless-layers",
+      "lineNumber": 73,
       "line": "<GeoPath"
     },
     {
       "example": "zoomable-with-padding",
       "component": "GeoTile",
-      "path": "/example/GeoTile/zoomable-with-padding",
+      "path": "/docs/components/GeoTile/zoomable-with-padding",
       "lineNumber": 75,
       "line": "<GeoPath"
     },
     {
       "example": "basic",
       "component": "Graticule",
-      "path": "/example/Graticule/basic",
+      "path": "/docs/components/Graticule/basic",
       "lineNumber": 62,
       "line": "<GeoPath geojson={{ type: 'Sphere' }} class=\"stroke-surface-content\" />"
     },
     {
       "example": "geo",
       "component": "Hull",
-      "path": "/example/Hull/geo",
+      "path": "/docs/components/Hull/geo",
       "lineNumber": 32,
       "line": "<GeoPath geojson={states} class=\"fill-surface-content/10 stroke-surface-100\" />"
     }
   ],
-  "updatedAt": "2026-01-13T17:22:23.689Z"
+  "updatedAt": "2026-02-07T20:21:31.741Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/GeoPoint.json b/docs/src/examples/catalog/GeoPoint.json
index f0e7c6a00..77b5b690b 100644
--- a/docs/src/examples/catalog/GeoPoint.json
+++ b/docs/src/examples/catalog/GeoPoint.json
@@ -3,48 +3,50 @@
   "examples": [
     {
       "name": "icons",
-      "path": "/example/GeoPoint/icons",
+      "title": "icons",
+      "path": "/docs/components/GeoPoint/icons",
       "components": [
         {
           "component": "Chart",
-          "lineNumber": 26,
+          "lineNumber": 20,
           "line": "<Chart"
         },
         {
           "component": "Layer",
-          "lineNumber": 34,
+          "lineNumber": 28,
           "line": "<Layer>"
         },
         {
           "component": "GeoPath",
-          "lineNumber": 36,
+          "lineNumber": 30,
           "line": "<GeoPath"
         },
         {
           "component": "GeoPoint",
-          "lineNumber": 43,
+          "lineNumber": 37,
           "line": "<GeoPoint lat={capital.latitude} long={capital.longitude}>"
         },
         {
           "component": "Text",
-          "lineNumber": 46,
+          "lineNumber": 40,
           "line": "<Text"
         },
         {
           "component": "Circle",
-          "lineNumber": 52,
+          "lineNumber": 46,
           "line": "<Circle"
         },
         {
           "component": "Tooltip",
-          "lineNumber": 63,
+          "lineNumber": 57,
           "line": "<Tooltip.Root {context}>"
         }
       ]
     },
     {
       "name": "us-airports",
-      "path": "/example/GeoPoint/us-airports",
+      "title": "us airports",
+      "path": "/docs/components/GeoPoint/us-airports",
       "components": [
         {
           "component": "Chart",
@@ -75,7 +77,8 @@
     },
     {
       "name": "us-state-capitals",
-      "path": "/example/GeoPoint/us-state-capitals",
+      "title": "us state capitals",
+      "path": "/docs/components/GeoPoint/us-state-capitals",
       "components": [
         {
           "component": "Chart",
@@ -111,7 +114,8 @@
     },
     {
       "name": "world-airports",
-      "path": "/example/GeoPoint/world-airports",
+      "title": "world airports",
+      "path": "/docs/components/GeoPoint/world-airports",
       "components": [
         {
           "component": "Chart",
@@ -142,7 +146,8 @@
     },
     {
       "name": "world-capitals",
-      "path": "/example/GeoPoint/world-capitals",
+      "title": "world capitals",
+      "path": "/docs/components/GeoPoint/world-capitals",
       "components": [
         {
           "component": "Chart",
@@ -181,115 +186,115 @@
     {
       "example": "submarine-cables-globe",
       "component": "GeoPath",
-      "path": "/example/GeoPath/submarine-cables-globe",
+      "path": "/docs/components/GeoPath/submarine-cables-globe",
       "lineNumber": 91,
       "line": "<GeoPoint"
     },
     {
       "example": "icons",
       "component": "GeoPoint",
-      "path": "/example/GeoPoint/icons",
-      "lineNumber": 43,
+      "path": "/docs/components/GeoPoint/icons",
+      "lineNumber": 37,
       "line": "<GeoPoint lat={capital.latitude} long={capital.longitude}>"
     },
     {
       "example": "us-airports",
       "component": "GeoPoint",
-      "path": "/example/GeoPoint/us-airports",
+      "path": "/docs/components/GeoPoint/us-airports",
       "lineNumber": 47,
       "line": "<GeoPoint"
     },
     {
       "example": "us-airports",
       "component": "GeoPoint",
-      "path": "/example/GeoPoint/us-airports",
+      "path": "/docs/components/GeoPoint/us-airports",
       "lineNumber": 59,
       "line": "<GeoPoint"
     },
     {
       "example": "us-state-capitals",
       "component": "GeoPoint",
-      "path": "/example/GeoPoint/us-state-capitals",
+      "path": "/docs/components/GeoPoint/us-state-capitals",
       "lineNumber": 37,
       "line": "<GeoPoint lat={capital.latitude} long={capital.longitude}>"
     },
     {
       "example": "us-state-capitals",
       "component": "GeoPoint",
-      "path": "/example/GeoPoint/us-state-capitals",
+      "path": "/docs/components/GeoPoint/us-state-capitals",
       "lineNumber": 47,
       "line": "<GeoPoint lat={capital.latitude} long={capital.longitude}>"
     },
     {
       "example": "world-airports",
       "component": "GeoPoint",
-      "path": "/example/GeoPoint/world-airports",
+      "path": "/docs/components/GeoPoint/world-airports",
       "lineNumber": 44,
       "line": "<GeoPoint"
     },
     {
       "example": "world-airports",
       "component": "GeoPoint",
-      "path": "/example/GeoPoint/world-airports",
+      "path": "/docs/components/GeoPoint/world-airports",
       "lineNumber": 56,
       "line": "<GeoPoint"
     },
     {
       "example": "world-capitals",
       "component": "GeoPoint",
-      "path": "/example/GeoPoint/world-capitals",
+      "path": "/docs/components/GeoPoint/world-capitals",
       "lineNumber": 47,
       "line": "<GeoPoint"
     },
     {
       "example": "world-capitals",
       "component": "GeoPoint",
-      "path": "/example/GeoPoint/world-capitals",
+      "path": "/docs/components/GeoPoint/world-capitals",
       "lineNumber": 61,
       "line": "<GeoPoint"
     },
     {
       "example": "world-capitals",
       "component": "GeoPoint",
-      "path": "/example/GeoPoint/world-capitals",
+      "path": "/docs/components/GeoPoint/world-capitals",
       "lineNumber": 75,
       "line": "<GeoPoint"
     },
     {
       "example": "draggable-globe",
       "component": "GeoSpline",
-      "path": "/example/GeoSpline/draggable-globe",
+      "path": "/docs/components/GeoSpline/draggable-globe",
       "lineNumber": 34,
       "line": "<GeoPoint lat={link.source[1]} long={link.source[0]} r={2} class=\"fill-black\" />"
     },
     {
       "example": "draggable-globe",
       "component": "GeoSpline",
-      "path": "/example/GeoSpline/draggable-globe",
+      "path": "/docs/components/GeoSpline/draggable-globe",
       "lineNumber": 35,
       "line": "<GeoPoint lat={link.target[1]} long={link.target[0]} r={2} class=\"fill-black\" />"
     },
     {
       "example": "world-map",
       "component": "GeoSpline",
-      "path": "/example/GeoSpline/world-map",
+      "path": "/docs/components/GeoSpline/world-map",
       "lineNumber": 46,
       "line": "<GeoPoint lat={link.source[1]} long={link.source[0]} r={2} class=\"fill-black\" />"
     },
     {
       "example": "world-map",
       "component": "GeoSpline",
-      "path": "/example/GeoSpline/world-map",
+      "path": "/docs/components/GeoSpline/world-map",
       "lineNumber": 47,
       "line": "<GeoPoint lat={link.target[1]} long={link.target[0]} r={2} class=\"fill-black\" />"
     },
     {
       "example": "geo",
       "component": "Hull",
-      "path": "/example/Hull/geo",
+      "path": "/docs/components/Hull/geo",
       "lineNumber": 46,
       "line": "<GeoPoint lat={capital.latitude} long={capital.longitude}>"
     }
   ],
-  "updatedAt": "2026-01-13T17:22:23.703Z"
+  "updatedAt": "2026-02-07T20:21:31.756Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/GeoSpline.json b/docs/src/examples/catalog/GeoSpline.json
index 32314e17e..31bfb13e4 100644
--- a/docs/src/examples/catalog/GeoSpline.json
+++ b/docs/src/examples/catalog/GeoSpline.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "draggable-globe",
-      "path": "/example/GeoSpline/draggable-globe",
+      "title": "draggable globe",
+      "path": "/docs/components/GeoSpline/draggable-globe",
       "components": [
         {
           "component": "Chart",
@@ -44,7 +45,8 @@
     },
     {
       "name": "world-map",
-      "path": "/example/GeoSpline/world-map",
+      "title": "world map",
+      "path": "/docs/components/GeoSpline/world-map",
       "components": [
         {
           "component": "Chart",
@@ -83,31 +85,31 @@
     {
       "example": "draggable-globe",
       "component": "GeoSpline",
-      "path": "/example/GeoSpline/draggable-globe",
+      "path": "/docs/components/GeoSpline/draggable-globe",
       "lineNumber": 36,
       "line": "<GeoSpline {link} class=\"stroke-gray-500/30 stroke-2\" />"
     },
     {
       "example": "draggable-globe",
       "component": "GeoSpline",
-      "path": "/example/GeoSpline/draggable-globe",
+      "path": "/docs/components/GeoSpline/draggable-globe",
       "lineNumber": 37,
       "line": "<GeoSpline {link} class=\"stroke-danger stroke-2\" loft={1.3} />"
     },
     {
       "example": "world-map",
       "component": "GeoSpline",
-      "path": "/example/GeoSpline/world-map",
+      "path": "/docs/components/GeoSpline/world-map",
       "lineNumber": 44,
       "line": "<GeoSpline {link} class=\"stroke-gray-500/30 stroke-2\" />"
     },
     {
       "example": "world-map",
       "component": "GeoSpline",
-      "path": "/example/GeoSpline/world-map",
+      "path": "/docs/components/GeoSpline/world-map",
       "lineNumber": 45,
       "line": "<GeoSpline {link} class=\"stroke-danger stroke-2\" loft={1.3} />"
     }
   ],
-  "updatedAt": "2026-01-13T17:22:23.717Z"
+  "updatedAt": "2026-02-07T20:21:31.771Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/GeoTile.json b/docs/src/examples/catalog/GeoTile.json
index 89ad0474d..0c5526158 100644
--- a/docs/src/examples/catalog/GeoTile.json
+++ b/docs/src/examples/catalog/GeoTile.json
@@ -3,38 +3,40 @@
   "examples": [
     {
       "name": "basic",
-      "path": "/example/GeoTile/basic",
+      "title": "basic",
+      "path": "/docs/components/GeoTile/basic",
       "components": [
         {
           "component": "Chart",
-          "lineNumber": 34,
+          "lineNumber": 33,
           "line": "<Chart"
         },
         {
           "component": "Layer",
-          "lineNumber": 42,
+          "lineNumber": 43,
           "line": "<Layer>"
         },
         {
           "component": "GeoTile",
-          "lineNumber": 43,
+          "lineNumber": 44,
           "line": "<GeoTile url={serviceUrl} {zoomDelta} debug={settings.debug} />"
         },
         {
           "component": "GeoPath",
-          "lineNumber": 46,
+          "lineNumber": 47,
           "line": "<GeoPath"
         },
         {
           "component": "Tooltip",
-          "lineNumber": 55,
+          "lineNumber": 56,
           "line": "<Tooltip.Root>"
         }
       ]
     },
     {
       "name": "clipped",
-      "path": "/example/GeoTile/clipped",
+      "title": "clipped",
+      "path": "/docs/components/GeoTile/clipped",
       "components": [
         {
           "component": "Chart",
@@ -70,7 +72,8 @@
     },
     {
       "name": "zoomable",
-      "path": "/example/GeoTile/zoomable",
+      "title": "zoomable",
+      "path": "/docs/components/GeoTile/zoomable",
       "components": [
         {
           "component": "Chart",
@@ -79,34 +82,35 @@
         },
         {
           "component": "TransformControls",
-          "lineNumber": 62,
+          "lineNumber": 63,
           "line": "<TransformControls />"
         },
         {
           "component": "Layer",
-          "lineNumber": 64,
+          "lineNumber": 65,
           "line": "<Layer>"
         },
         {
           "component": "GeoTile",
-          "lineNumber": 65,
+          "lineNumber": 66,
           "line": "<GeoTile url={serviceUrl} {zoomDelta} debug={settings.debug} />"
         },
         {
           "component": "GeoPath",
-          "lineNumber": 68,
+          "lineNumber": 69,
           "line": "<GeoPath"
         },
         {
           "component": "Tooltip",
-          "lineNumber": 86,
+          "lineNumber": 87,
           "line": "<Tooltip.Root>"
         }
       ]
     },
     {
       "name": "zoomable-seamless-layers",
-      "path": "/example/GeoTile/zoomable-seamless-layers",
+      "title": "zoomable seamless layers",
+      "path": "/docs/components/GeoTile/zoomable-seamless-layers",
       "components": [
         {
           "component": "Chart",
@@ -115,33 +119,34 @@
         },
         {
           "component": "Layer",
-          "lineNumber": 64,
+          "lineNumber": 65,
           "line": "<Layer>"
         },
         {
           "component": "GeoTile",
-          "lineNumber": 66,
+          "lineNumber": 67,
           "line": "<GeoTile url={serviceUrl} zoomDelta={-100} />"
         },
         {
           "component": "GeoPath",
-          "lineNumber": 72,
+          "lineNumber": 73,
           "line": "<GeoPath"
         },
         {
           "component": "Tooltip",
-          "lineNumber": 90,
+          "lineNumber": 91,
           "line": "<Tooltip.Root>"
         }
       ]
     },
     {
       "name": "zoomable-with-padding",
-      "path": "/example/GeoTile/zoomable-with-padding",
+      "title": "zoomable with padding",
+      "path": "/docs/components/GeoTile/zoomable-with-padding",
       "components": [
         {
           "component": "Chart",
-          "lineNumber": 45,
+          "lineNumber": 44,
           "line": "<Chart"
         },
         {
@@ -176,115 +181,115 @@
     {
       "example": "geojson-preview",
       "component": "GeoContext",
-      "path": "/example/GeoContext/geojson-preview",
-      "lineNumber": 104,
+      "path": "/docs/components/GeoContext/geojson-preview",
+      "lineNumber": 105,
       "line": "<GeoTile url={serviceUrl} zoomDelta={-100} />"
     },
     {
       "example": "geojson-preview",
       "component": "GeoContext",
-      "path": "/example/GeoContext/geojson-preview",
-      "lineNumber": 105,
+      "path": "/docs/components/GeoContext/geojson-preview",
+      "lineNumber": 106,
       "line": "<GeoTile url={serviceUrl} zoomDelta={-4} />"
     },
     {
       "example": "geojson-preview",
       "component": "GeoContext",
-      "path": "/example/GeoContext/geojson-preview",
-      "lineNumber": 106,
+      "path": "/docs/components/GeoContext/geojson-preview",
+      "lineNumber": 107,
       "line": "<GeoTile url={serviceUrl} zoomDelta={-1} />"
     },
     {
       "example": "geojson-preview",
       "component": "GeoContext",
-      "path": "/example/GeoContext/geojson-preview",
-      "lineNumber": 107,
+      "path": "/docs/components/GeoContext/geojson-preview",
+      "lineNumber": 108,
       "line": "<GeoTile url={serviceUrl} {zoomDelta} />"
     },
     {
       "example": "topojson-preview",
       "component": "GeoContext",
-      "path": "/example/GeoContext/topojson-preview",
+      "path": "/docs/components/GeoContext/topojson-preview",
       "lineNumber": 112,
       "line": "<GeoTile url={serviceUrl} zoomDelta={-100} />"
     },
     {
       "example": "topojson-preview",
       "component": "GeoContext",
-      "path": "/example/GeoContext/topojson-preview",
+      "path": "/docs/components/GeoContext/topojson-preview",
       "lineNumber": 113,
       "line": "<GeoTile url={serviceUrl} zoomDelta={-4} />"
     },
     {
       "example": "topojson-preview",
       "component": "GeoContext",
-      "path": "/example/GeoContext/topojson-preview",
+      "path": "/docs/components/GeoContext/topojson-preview",
       "lineNumber": 114,
       "line": "<GeoTile url={serviceUrl} zoomDelta={-1} />"
     },
     {
       "example": "topojson-preview",
       "component": "GeoContext",
-      "path": "/example/GeoContext/topojson-preview",
+      "path": "/docs/components/GeoContext/topojson-preview",
       "lineNumber": 115,
       "line": "<GeoTile url={serviceUrl} {zoomDelta} />"
     },
     {
       "example": "basic",
       "component": "GeoTile",
-      "path": "/example/GeoTile/basic",
-      "lineNumber": 43,
+      "path": "/docs/components/GeoTile/basic",
+      "lineNumber": 44,
       "line": "<GeoTile url={serviceUrl} {zoomDelta} debug={settings.debug} />"
     },
     {
       "example": "clipped",
       "component": "GeoTile",
-      "path": "/example/GeoTile/clipped",
+      "path": "/docs/components/GeoTile/clipped",
       "lineNumber": 43,
       "line": "<GeoTile url={serviceUrl} {zoomDelta} />"
     },
     {
       "example": "zoomable",
       "component": "GeoTile",
-      "path": "/example/GeoTile/zoomable",
-      "lineNumber": 65,
+      "path": "/docs/components/GeoTile/zoomable",
+      "lineNumber": 66,
       "line": "<GeoTile url={serviceUrl} {zoomDelta} debug={settings.debug} />"
     },
     {
       "example": "zoomable-seamless-layers",
       "component": "GeoTile",
-      "path": "/example/GeoTile/zoomable-seamless-layers",
-      "lineNumber": 66,
+      "path": "/docs/components/GeoTile/zoomable-seamless-layers",
+      "lineNumber": 67,
       "line": "<GeoTile url={serviceUrl} zoomDelta={-100} />"
     },
     {
       "example": "zoomable-seamless-layers",
       "component": "GeoTile",
-      "path": "/example/GeoTile/zoomable-seamless-layers",
-      "lineNumber": 67,
+      "path": "/docs/components/GeoTile/zoomable-seamless-layers",
+      "lineNumber": 68,
       "line": "<GeoTile url={serviceUrl} zoomDelta={-4} />"
     },
     {
       "example": "zoomable-seamless-layers",
       "component": "GeoTile",
-      "path": "/example/GeoTile/zoomable-seamless-layers",
-      "lineNumber": 68,
+      "path": "/docs/components/GeoTile/zoomable-seamless-layers",
+      "lineNumber": 69,
       "line": "<GeoTile url={serviceUrl} zoomDelta={-1} />"
     },
     {
       "example": "zoomable-seamless-layers",
       "component": "GeoTile",
-      "path": "/example/GeoTile/zoomable-seamless-layers",
-      "lineNumber": 69,
+      "path": "/docs/components/GeoTile/zoomable-seamless-layers",
+      "lineNumber": 70,
       "line": "<GeoTile url={serviceUrl} {zoomDelta} debug={settings.debug} />"
     },
     {
       "example": "zoomable-with-padding",
       "component": "GeoTile",
-      "path": "/example/GeoTile/zoomable-with-padding",
+      "path": "/docs/components/GeoTile/zoomable-with-padding",
       "lineNumber": 72,
       "line": "<GeoTile url={serviceUrl} {zoomDelta} debug={settings.debug} />"
     }
   ],
-  "updatedAt": "2025-11-24T01:39:37.739Z"
+  "updatedAt": "2026-02-07T20:21:31.787Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/GeoVisible.json b/docs/src/examples/catalog/GeoVisible.json
index 1b4dc3aec..0bf7aaf59 100644
--- a/docs/src/examples/catalog/GeoVisible.json
+++ b/docs/src/examples/catalog/GeoVisible.json
@@ -5,10 +5,10 @@
     {
       "example": "submarine-cables-globe",
       "component": "GeoPath",
-      "path": "/example/GeoPath/submarine-cables-globe",
+      "path": "/docs/components/GeoPath/submarine-cables-globe",
       "lineNumber": 90,
       "line": "<GeoVisible {lat} {long}>"
     }
   ],
-  "updatedAt": "2026-01-13T17:22:23.745Z"
+  "updatedAt": "2026-02-07T17:00:31.751Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Graticule.json b/docs/src/examples/catalog/Graticule.json
index 4738d23df..6353215d7 100644
--- a/docs/src/examples/catalog/Graticule.json
+++ b/docs/src/examples/catalog/Graticule.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "basic",
-      "path": "/example/Graticule/basic",
+      "title": "basic",
+      "path": "/docs/components/Graticule/basic",
       "components": [
         {
           "component": "Chart",
@@ -37,87 +38,87 @@
     {
       "example": "earthquake-globe",
       "component": "GeoCircle",
-      "path": "/example/GeoCircle/earthquake-globe",
+      "path": "/docs/components/GeoCircle/earthquake-globe",
       "lineNumber": 73,
       "line": "<Graticule class=\"stroke-surface-content/20\" />"
     },
     {
       "example": "playground",
       "component": "GeoCircle",
-      "path": "/example/GeoCircle/playground",
+      "path": "/docs/components/GeoCircle/playground",
       "lineNumber": 65,
       "line": "<Graticule class=\"stroke-surface-content/20\" />"
     },
     {
       "example": "projection-playground",
       "component": "GeoContext",
-      "path": "/example/GeoContext/projection-playground",
+      "path": "/docs/components/GeoContext/projection-playground",
       "lineNumber": 77,
       "line": "<Graticule class=\"stroke-surface-content/20 pointer-events-none\" />"
     },
     {
       "example": "animated-globe",
       "component": "GeoPath",
-      "path": "/example/GeoPath/animated-globe",
+      "path": "/docs/components/GeoPath/animated-globe",
       "lineNumber": 148,
       "line": "<Graticule class=\"stroke-surface-content/20\" />"
     },
     {
       "example": "eclipses-globe",
       "component": "GeoPath",
-      "path": "/example/GeoPath/eclipses-globe",
+      "path": "/docs/components/GeoPath/eclipses-globe",
       "lineNumber": 82,
       "line": "<Graticule class=\"stroke-surface-content/20\" />"
     },
     {
       "example": "sketchy-globe",
       "component": "GeoPath",
-      "path": "/example/GeoPath/sketchy-globe",
+      "path": "/docs/components/GeoPath/sketchy-globe",
       "lineNumber": 55,
       "line": "<Graticule class=\"stroke-surface-content/20\" />"
     },
     {
       "example": "submarine-cables-globe",
       "component": "GeoPath",
-      "path": "/example/GeoPath/submarine-cables-globe",
+      "path": "/docs/components/GeoPath/submarine-cables-globe",
       "lineNumber": 70,
       "line": "<Graticule class=\"stroke-surface-content/20\" />"
     },
     {
       "example": "translucent-globe",
       "component": "GeoPath",
-      "path": "/example/GeoPath/translucent-globe",
+      "path": "/docs/components/GeoPath/translucent-globe",
       "lineNumber": 68,
       "line": "<Graticule class=\"stroke-surface-content/5\" />"
     },
     {
       "example": "translucent-globe",
       "component": "GeoPath",
-      "path": "/example/GeoPath/translucent-globe",
+      "path": "/docs/components/GeoPath/translucent-globe",
       "lineNumber": 75,
       "line": "<Graticule class=\"stroke-surface-content/20\" />"
     },
     {
       "example": "draggable-globe",
       "component": "GeoSpline",
-      "path": "/example/GeoSpline/draggable-globe",
+      "path": "/docs/components/GeoSpline/draggable-globe",
       "lineNumber": 28,
       "line": "<Graticule class=\"stroke-surface-content/20 pointer-events-none\" />"
     },
     {
       "example": "world-map",
       "component": "GeoSpline",
-      "path": "/example/GeoSpline/world-map",
+      "path": "/docs/components/GeoSpline/world-map",
       "lineNumber": 39,
       "line": "<Graticule class=\"stroke-surface-content/20\" />"
     },
     {
       "example": "basic",
       "component": "Graticule",
-      "path": "/example/Graticule/basic",
+      "path": "/docs/components/Graticule/basic",
       "lineNumber": 63,
       "line": "<Graticule"
     }
   ],
-  "updatedAt": "2026-01-13T17:22:23.759Z"
+  "updatedAt": "2026-02-07T20:21:31.815Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Grid.json b/docs/src/examples/catalog/Grid.json
index 26caa8db8..2bab11dda 100644
--- a/docs/src/examples/catalog/Grid.json
+++ b/docs/src/examples/catalog/Grid.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "band-scale-between",
-      "path": "/example/Grid/band-scale-between",
+      "title": "band scale between",
+      "path": "/docs/components/Grid/band-scale-between",
       "components": [
         {
           "component": "Chart",
@@ -29,7 +30,8 @@
     },
     {
       "name": "band-scale-default",
-      "path": "/example/Grid/band-scale-default",
+      "title": "band scale default",
+      "path": "/docs/components/Grid/band-scale-default",
       "components": [
         {
           "component": "Chart",
@@ -55,7 +57,8 @@
     },
     {
       "name": "basic",
-      "path": "/example/Grid/basic",
+      "title": "basic",
+      "path": "/docs/components/Grid/basic",
       "components": [
         {
           "component": "Chart",
@@ -76,7 +79,8 @@
     },
     {
       "name": "dashed-lines",
-      "path": "/example/Grid/dashed-lines",
+      "title": "dashed lines",
+      "path": "/docs/components/Grid/dashed-lines",
       "components": [
         {
           "component": "Chart",
@@ -97,7 +101,8 @@
     },
     {
       "name": "explicit-ticks",
-      "path": "/example/Grid/explicit-ticks",
+      "title": "explicit ticks",
+      "path": "/docs/components/Grid/explicit-ticks",
       "components": [
         {
           "component": "Chart",
@@ -123,7 +128,8 @@
     },
     {
       "name": "inject-tick-value",
-      "path": "/example/Grid/inject-tick-value",
+      "title": "inject tick value",
+      "path": "/docs/components/Grid/inject-tick-value",
       "components": [
         {
           "component": "Chart",
@@ -149,7 +155,8 @@
     },
     {
       "name": "integer-only",
-      "path": "/example/Grid/integer-only",
+      "title": "integer only",
+      "path": "/docs/components/Grid/integer-only",
       "components": [
         {
           "component": "Chart",
@@ -175,7 +182,8 @@
     },
     {
       "name": "padding",
-      "path": "/example/Grid/padding",
+      "title": "padding",
+      "path": "/docs/components/Grid/padding",
       "components": [
         {
           "component": "Chart",
@@ -196,7 +204,8 @@
     },
     {
       "name": "radial",
-      "path": "/example/Grid/radial",
+      "title": "radial",
+      "path": "/docs/components/Grid/radial",
       "components": [
         {
           "component": "Chart",
@@ -217,7 +226,8 @@
     },
     {
       "name": "radial-linear",
-      "path": "/example/Grid/radial-linear",
+      "title": "radial linear",
+      "path": "/docs/components/Grid/radial-linear",
       "components": [
         {
           "component": "Chart",
@@ -238,7 +248,8 @@
     },
     {
       "name": "tick-count",
-      "path": "/example/Grid/tick-count",
+      "title": "tick count",
+      "path": "/docs/components/Grid/tick-count",
       "components": [
         {
           "component": "Chart",
@@ -264,7 +275,8 @@
     },
     {
       "name": "tick-count-null",
-      "path": "/example/Grid/tick-count-null",
+      "title": "tick count null",
+      "path": "/docs/components/Grid/tick-count-null",
       "components": [
         {
           "component": "Chart",
@@ -290,7 +302,8 @@
     },
     {
       "name": "tick-count-responsive",
-      "path": "/example/Grid/tick-count-responsive",
+      "title": "tick count responsive",
+      "path": "/docs/components/Grid/tick-count-responsive",
       "components": [
         {
           "component": "Chart",
@@ -316,7 +329,8 @@
     },
     {
       "name": "x-only",
-      "path": "/example/Grid/x-only",
+      "title": "x only",
+      "path": "/docs/components/Grid/x-only",
       "components": [
         {
           "component": "Chart",
@@ -337,7 +351,8 @@
     },
     {
       "name": "y-only",
-      "path": "/example/Grid/y-only",
+      "title": "y only",
+      "path": "/docs/components/Grid/y-only",
       "components": [
         {
           "component": "Chart",
@@ -361,115 +376,115 @@
     {
       "example": "multiple-axis-grid-and-rules-separate-grid",
       "component": "Axis",
-      "path": "/example/Axis/multiple-axis-grid-and-rules-separate-grid",
+      "path": "/docs/components/Axis/multiple-axis-grid-and-rules-separate-grid",
       "lineNumber": 17,
       "line": "<Grid x y />"
     },
     {
       "example": "band-scale-between",
       "component": "Grid",
-      "path": "/example/Grid/band-scale-between",
+      "path": "/docs/components/Grid/band-scale-between",
       "lineNumber": 11,
       "line": "<Grid x bandAlign=\"between\" />"
     },
     {
       "example": "band-scale-default",
       "component": "Grid",
-      "path": "/example/Grid/band-scale-default",
+      "path": "/docs/components/Grid/band-scale-default",
       "lineNumber": 11,
       "line": "<Grid x />"
     },
     {
       "example": "basic",
       "component": "Grid",
-      "path": "/example/Grid/basic",
+      "path": "/docs/components/Grid/basic",
       "lineNumber": 7,
       "line": "<Grid x y />"
     },
     {
       "example": "dashed-lines",
       "component": "Grid",
-      "path": "/example/Grid/dashed-lines",
+      "path": "/docs/components/Grid/dashed-lines",
       "lineNumber": 7,
       "line": "<Grid y={{ style: 'stroke-dasharray: 6 4' }} />"
     },
     {
       "example": "explicit-ticks",
       "component": "Grid",
-      "path": "/example/Grid/explicit-ticks",
+      "path": "/docs/components/Grid/explicit-ticks",
       "lineNumber": 7,
       "line": "<Grid y yTicks={[0, 25, 50, 75, 100]} />"
     },
     {
       "example": "inject-tick-value",
       "component": "Grid",
-      "path": "/example/Grid/inject-tick-value",
+      "path": "/docs/components/Grid/inject-tick-value",
       "lineNumber": 7,
       "line": "<Grid y yTicks={(scale) => [45, ...(scale.ticks?.() ?? [])]} />"
     },
     {
       "example": "integer-only",
       "component": "Grid",
-      "path": "/example/Grid/integer-only",
+      "path": "/docs/components/Grid/integer-only",
       "lineNumber": 7,
       "line": "<Grid y yTicks={(scale) => scale.ticks?.().filter(Number.isInteger)} />"
     },
     {
       "example": "padding",
       "component": "Grid",
-      "path": "/example/Grid/padding",
+      "path": "/docs/components/Grid/padding",
       "lineNumber": 12,
       "line": "<Grid x y />"
     },
     {
       "example": "radial",
       "component": "Grid",
-      "path": "/example/Grid/radial",
+      "path": "/docs/components/Grid/radial",
       "lineNumber": 7,
       "line": "<Grid x xTicks={(scale) => scale.ticks?.().splice(1)} y />"
     },
     {
       "example": "radial-linear",
       "component": "Grid",
-      "path": "/example/Grid/radial-linear",
+      "path": "/docs/components/Grid/radial-linear",
       "lineNumber": 7,
       "line": "<Grid x xTicks={(scale) => scale.ticks?.().splice(1)} y radialY=\"linear\" />"
     },
     {
       "example": "tick-count",
       "component": "Grid",
-      "path": "/example/Grid/tick-count",
+      "path": "/docs/components/Grid/tick-count",
       "lineNumber": 7,
       "line": "<Grid y yTicks={20} />"
     },
     {
       "example": "tick-count-null",
       "component": "Grid",
-      "path": "/example/Grid/tick-count-null",
+      "path": "/docs/components/Grid/tick-count-null",
       "lineNumber": 7,
       "line": "<Grid y yTicks={null} />"
     },
     {
       "example": "tick-count-responsive",
       "component": "Grid",
-      "path": "/example/Grid/tick-count-responsive",
+      "path": "/docs/components/Grid/tick-count-responsive",
       "lineNumber": 16,
       "line": "<Grid x xTicks={mdScreen.current ? 10 : 5} />"
     },
     {
       "example": "x-only",
       "component": "Grid",
-      "path": "/example/Grid/x-only",
+      "path": "/docs/components/Grid/x-only",
       "lineNumber": 7,
       "line": "<Grid x />"
     },
     {
       "example": "y-only",
       "component": "Grid",
-      "path": "/example/Grid/y-only",
+      "path": "/docs/components/Grid/y-only",
       "lineNumber": 7,
       "line": "<Grid y />"
     }
   ],
-  "updatedAt": "2026-01-06T13:02:21.446Z"
+  "updatedAt": "2026-02-07T20:21:31.830Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Group.json b/docs/src/examples/catalog/Group.json
index e315067b7..1a767390a 100644
--- a/docs/src/examples/catalog/Group.json
+++ b/docs/src/examples/catalog/Group.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "basic",
-      "path": "/example/Group/basic",
+      "title": "basic",
+      "path": "/docs/components/Group/basic",
       "components": [
         {
           "component": "Chart",
@@ -42,227 +43,227 @@
     {
       "example": "partial-arc",
       "component": "Arc",
-      "path": "/example/Arc/partial-arc",
+      "path": "/docs/components/Arc/partial-arc",
       "lineNumber": 14,
       "line": "<Group y={16}>"
     },
     {
       "example": "gradient-with-text",
       "component": "ArcChart",
-      "path": "/example/ArcChart/gradient-with-text",
+      "path": "/docs/components/ArcChart/gradient-with-text",
       "lineNumber": 9,
       "line": "<Group y={20}>"
     },
     {
       "example": "multiple-years",
       "component": "Calendar",
-      "path": "/example/Calendar/multiple-years",
+      "path": "/docs/components/Calendar/multiple-years",
       "lineNumber": 40,
       "line": "<Group y={140 * i}>"
     },
     {
       "example": "basic",
       "component": "Dagre",
-      "path": "/example/Dagre/basic",
+      "path": "/docs/components/Dagre/basic",
       "lineNumber": 65,
       "line": "<Group x={node.x - node.width / 2} y={node.y - node.height / 2} motion=\"tween\">"
     },
     {
       "example": "playground",
       "component": "Dagre",
-      "path": "/example/Dagre/playground",
+      "path": "/docs/components/Dagre/playground",
       "lineNumber": 66,
       "line": "<Group x={node.x - node.width / 2} y={node.y - node.height / 2} motion=\"tween\">"
     },
     {
       "example": "software-user-flow",
       "component": "Dagre",
-      "path": "/example/Dagre/software-user-flow",
+      "path": "/docs/components/Dagre/software-user-flow",
       "lineNumber": 77,
       "line": "<Group x={node.x - node.width / 2} y={node.y - node.height / 2} motion=\"tween\">"
     },
     {
       "example": "tcp-state-diagram",
       "component": "Dagre",
-      "path": "/example/Dagre/tcp-state-diagram",
-      "lineNumber": 75,
+      "path": "/docs/components/Dagre/tcp-state-diagram",
+      "lineNumber": 76,
       "line": "<Group x={node.x - node.width / 2} y={node.y - node.height / 2} motion=\"tween\">"
     },
     {
       "example": "collision-detection",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/collision-detection",
+      "path": "/docs/components/ForceSimulation/collision-detection",
       "lineNumber": 56,
       "line": "<Group center>"
     },
     {
       "example": "basic",
       "component": "Group",
-      "path": "/example/Group/basic",
+      "path": "/docs/components/Group/basic",
       "lineNumber": 9,
       "line": "<Group center>"
     },
     {
       "example": "basic",
       "component": "Group",
-      "path": "/example/Group/basic",
+      "path": "/docs/components/Group/basic",
       "lineNumber": 12,
       "line": "<Group x={100} y={100}>"
     },
     {
       "example": "basic",
       "component": "Pack",
-      "path": "/example/Pack/basic",
+      "path": "/docs/components/Pack/basic",
       "lineNumber": 109,
       "line": "<Group"
     },
     {
       "example": "filterable",
       "component": "Partition",
-      "path": "/example/Partition/filterable",
+      "path": "/docs/components/Partition/filterable",
       "lineNumber": 117,
       "line": "<Group"
     },
     {
       "example": "horizontal",
       "component": "Partition",
-      "path": "/example/Partition/horizontal",
+      "path": "/docs/components/Partition/horizontal",
       "lineNumber": 105,
       "line": "<Group x={xScale(node.y0)} y={yScale(node.x0)} onclick={() => (selected = node)}>"
     },
     {
       "example": "vertical",
       "component": "Partition",
-      "path": "/example/Partition/vertical",
+      "path": "/docs/components/Partition/vertical",
       "lineNumber": 106,
       "line": "<Group x={xScale(node.x0)} y={yScale(node.y0)} onclick={() => (selected = node)}>"
     },
     {
       "example": "placement-left",
       "component": "Pie",
-      "path": "/example/Pie/placement-left",
+      "path": "/docs/components/Pie/placement-left",
       "lineNumber": 20,
       "line": "<Group x={context.height / 2} center=\"y\">"
     },
     {
       "example": "placement-right",
       "component": "Pie",
-      "path": "/example/Pie/placement-right",
+      "path": "/docs/components/Pie/placement-right",
       "lineNumber": 20,
       "line": "<Group x={context.width - context.height / 2} center=\"y\">"
     },
     {
       "example": "tooltip-with-arcs-slot",
       "component": "Pie",
-      "path": "/example/Pie/tooltip-with-arcs-slot",
+      "path": "/docs/components/Pie/tooltip-with-arcs-slot",
       "lineNumber": 38,
       "line": "<Group"
     },
     {
       "example": "arrow",
       "component": "Polygon",
-      "path": "/example/Polygon/arrow",
+      "path": "/docs/components/Polygon/arrow",
       "lineNumber": 16,
       "line": "<Group x={context.width / 2} y={context.height / 2}>"
     },
     {
       "example": "cross",
       "component": "Polygon",
-      "path": "/example/Polygon/cross",
+      "path": "/docs/components/Polygon/cross",
       "lineNumber": 16,
       "line": "<Group x={context.width / 2} y={context.height / 2}>"
     },
     {
       "example": "complex",
       "component": "Sankey",
-      "path": "/example/Sankey/complex",
+      "path": "/docs/components/Sankey/complex",
       "lineNumber": 89,
       "line": "<Group x={node.x0} y={node.y0} motion=\"tween\">"
     },
     {
       "example": "hierarchy",
       "component": "Sankey",
-      "path": "/example/Sankey/hierarchy",
+      "path": "/docs/components/Sankey/hierarchy",
       "lineNumber": 100,
       "line": "<Group x={node.x0} y={node.y0} motion=\"tween\">"
     },
     {
       "example": "node-select",
       "component": "Sankey",
-      "path": "/example/Sankey/node-select",
+      "path": "/docs/components/Sankey/node-select",
       "lineNumber": 30,
       "line": "<Group"
     },
     {
       "example": "simple",
       "component": "Sankey",
-      "path": "/example/Sankey/simple",
+      "path": "/docs/components/Sankey/simple",
       "lineNumber": 18,
       "line": "<Group x={node.x0} y={node.y0}>"
     },
     {
       "example": "tooltip",
       "component": "Sankey",
-      "path": "/example/Sankey/tooltip",
+      "path": "/docs/components/Sankey/tooltip",
       "lineNumber": 30,
       "line": "<Group x={node.x0} y={node.y0}>"
     },
     {
       "example": "basic",
       "component": "Tree",
-      "path": "/example/Tree/basic",
-      "lineNumber": 84,
+      "path": "/docs/components/Tree/basic",
+      "lineNumber": 85,
       "line": "<Group"
     },
     {
       "example": "html-nodes",
       "component": "Tree",
-      "path": "/example/Tree/html-nodes",
-      "lineNumber": 88,
+      "path": "/docs/components/Tree/html-nodes",
+      "lineNumber": 89,
       "line": "<Group"
     },
     {
       "example": "basic",
       "component": "Treemap",
-      "path": "/example/Treemap/basic",
+      "path": "/docs/components/Treemap/basic",
       "lineNumber": 39,
       "line": "<Group x={node.x0} y={node.y0}>"
     },
     {
       "example": "complex",
       "component": "Treemap",
-      "path": "/example/Treemap/complex",
+      "path": "/docs/components/Treemap/complex",
       "lineNumber": 87,
       "line": "<Group"
     },
     {
       "example": "nested-filter",
       "component": "Treemap",
-      "path": "/example/Treemap/nested-filter",
+      "path": "/docs/components/Treemap/nested-filter",
       "lineNumber": 131,
       "line": "<Group"
     },
     {
       "example": "nested-zoom",
       "component": "Treemap",
-      "path": "/example/Treemap/nested-zoom",
+      "path": "/docs/components/Treemap/nested-zoom",
       "lineNumber": 103,
       "line": "<Group"
     },
     {
       "example": "playground",
       "component": "Treemap",
-      "path": "/example/Treemap/playground",
+      "path": "/docs/components/Treemap/playground",
       "lineNumber": 133,
       "line": "<Group"
     },
     {
       "example": "stacked-zoom",
       "component": "Treemap",
-      "path": "/example/Treemap/stacked-zoom",
+      "path": "/docs/components/Treemap/stacked-zoom",
       "lineNumber": 91,
       "line": "<Group"
     }
   ],
-  "updatedAt": "2025-11-23T01:49:02.292Z"
+  "updatedAt": "2026-02-07T20:21:31.844Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Highlight.json b/docs/src/examples/catalog/Highlight.json
index 242e5dfa1..23cbe672b 100644
--- a/docs/src/examples/catalog/Highlight.json
+++ b/docs/src/examples/catalog/Highlight.json
@@ -5,640 +5,640 @@
     {
       "example": "clipped-area-on-tooltip",
       "component": "Area",
-      "path": "/example/Area/clipped-area-on-tooltip",
+      "path": "/docs/components/Area/clipped-area-on-tooltip",
       "lineNumber": 46,
       "line": "<Highlight points lines={{ class: 'stroke-primary [stroke-dasharray:unset]' }} />"
     },
     {
       "example": "highlight-color-based-on-value-using-color-scale",
       "component": "Area",
-      "path": "/example/Area/highlight-color-based-on-value-using-color-scale",
+      "path": "/docs/components/Area/highlight-color-based-on-value-using-color-scale",
       "lineNumber": 43,
       "line": "<Highlight lines points />"
     },
     {
       "example": "highlight-color-based-on-value-using-tooltip-slot-prop",
       "component": "Area",
-      "path": "/example/Area/highlight-color-based-on-value-using-tooltip-slot-prop",
+      "path": "/docs/components/Area/highlight-color-based-on-value-using-tooltip-slot-prop",
       "lineNumber": 32,
       "line": "<Highlight"
     },
     {
       "example": "multiple-series",
       "component": "Area",
-      "path": "/example/Area/multiple-series",
+      "path": "/docs/components/Area/multiple-series",
       "lineNumber": 75,
       "line": "<Highlight points lines />"
     },
     {
       "example": "multiple-series-highlight-on-hover",
       "component": "Area",
-      "path": "/example/Area/multiple-series-highlight-on-hover",
+      "path": "/docs/components/Area/multiple-series-highlight-on-hover",
       "lineNumber": 79,
       "line": "<Highlight points lines />"
     },
     {
       "example": "multiple-series-using-overrides",
       "component": "Area",
-      "path": "/example/Area/multiple-series-using-overrides",
+      "path": "/docs/components/Area/multiple-series-using-overrides",
       "lineNumber": 61,
       "line": "<Highlight y={(d) => d.apples} points={{ fill: fruitColors.apples }} />"
     },
     {
       "example": "multiple-series-using-overrides",
       "component": "Area",
-      "path": "/example/Area/multiple-series-using-overrides",
+      "path": "/docs/components/Area/multiple-series-using-overrides",
       "lineNumber": 62,
       "line": "<Highlight y={(d) => d.bananas} points={{ fill: fruitColors.bananas }} />"
     },
     {
       "example": "multiple-series-using-overrides",
       "component": "Area",
-      "path": "/example/Area/multiple-series-using-overrides",
+      "path": "/docs/components/Area/multiple-series-using-overrides",
       "lineNumber": 63,
       "line": "<Highlight y={(d) => d.oranges} points={{ fill: fruitColors.oranges }} />"
     },
     {
       "example": "multiple-series-using-overrides",
       "component": "Area",
-      "path": "/example/Area/multiple-series-using-overrides",
+      "path": "/docs/components/Area/multiple-series-using-overrides",
       "lineNumber": 64,
       "line": "<Highlight lines />"
     },
     {
       "example": "multiple-series-with-labels",
       "component": "Area",
-      "path": "/example/Area/multiple-series-with-labels",
+      "path": "/docs/components/Area/multiple-series-with-labels",
       "lineNumber": 49,
       "line": "<Highlight points lines />"
     },
     {
       "example": "stack",
       "component": "Area",
-      "path": "/example/Area/stack",
+      "path": "/docs/components/Area/stack",
       "lineNumber": 71,
       "line": "<Highlight points lines />"
     },
     {
       "example": "with-tooltip-and-highlight",
       "component": "Area",
-      "path": "/example/Area/with-tooltip-and-highlight",
+      "path": "/docs/components/Area/with-tooltip-and-highlight",
       "lineNumber": 24,
       "line": "<Highlight points lines />"
     },
     {
       "example": "custom",
       "component": "AreaChart",
-      "path": "/example/AreaChart/custom",
+      "path": "/docs/components/AreaChart/custom",
       "lineNumber": 24,
       "line": "<Highlight points lines />"
     },
     {
       "example": "series-individual-tooltip",
       "component": "AreaChart",
-      "path": "/example/AreaChart/series-individual-tooltip",
+      "path": "/docs/components/AreaChart/series-individual-tooltip",
       "lineNumber": 66,
       "line": "<Highlight lines points={{ fill: activeSeries?.color }} />"
     },
     {
       "example": "threshold-gradient",
       "component": "AreaChart",
-      "path": "/example/AreaChart/threshold-gradient",
+      "path": "/docs/components/AreaChart/threshold-gradient",
       "lineNumber": 48,
       "line": "<Highlight lines points={{ fill: value < 0 ? colors.negative : colors.positive }} />"
     },
     {
       "example": "custom-chart",
       "component": "BarChart",
-      "path": "/example/BarChart/custom-chart",
+      "path": "/docs/components/BarChart/custom-chart",
       "lineNumber": 22,
       "line": "<Highlight area />"
     },
     {
       "example": "highlight-below-marks",
       "component": "BarChart",
-      "path": "/example/BarChart/highlight-below-marks",
+      "path": "/docs/components/BarChart/highlight-below-marks",
       "lineNumber": 17,
       "line": "<Highlight area={{ class: 'fill-surface-content/10' }} />"
     },
     {
       "example": "horizontal-candlestick-bars",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-candlestick-bars",
+      "path": "/docs/components/Bars/horizontal-candlestick-bars",
       "lineNumber": 30,
       "line": "<Highlight area />"
     },
     {
       "example": "horizontal-click-handler",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-click-handler",
+      "path": "/docs/components/Bars/horizontal-click-handler",
       "lineNumber": 37,
       "line": "<Highlight area />"
     },
     {
       "example": "horizontal-grouped",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-grouped",
+      "path": "/docs/components/Bars/horizontal-grouped",
       "lineNumber": 50,
       "line": "<Highlight area />"
     },
     {
       "example": "horizontal-grouped-and-stacked",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-grouped-and-stacked",
+      "path": "/docs/components/Bars/horizontal-grouped-and-stacked",
       "lineNumber": 55,
       "line": "<Highlight area />"
     },
     {
       "example": "horizontal-grouped-stacked-or-both-transition",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-grouped-stacked-or-both-transition",
+      "path": "/docs/components/Bars/horizontal-grouped-stacked-or-both-transition",
       "lineNumber": 115,
       "line": "<Highlight area />"
     },
     {
       "example": "horizontal-highlight-individual-bar",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-highlight-individual-bar",
+      "path": "/docs/components/Bars/horizontal-highlight-individual-bar",
       "lineNumber": 36,
       "line": "<Highlight data={data[3]} area={{ fill: pattern, class: 'stroke-secondary/50' }} />"
     },
     {
       "example": "horizontal-highlight-individual-bar-line",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-highlight-individual-bar-line",
+      "path": "/docs/components/Bars/horizontal-highlight-individual-bar-line",
       "lineNumber": 31,
       "line": "<Highlight"
     },
     {
       "example": "horizontal-multiple-diverging",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-multiple-diverging",
+      "path": "/docs/components/Bars/horizontal-multiple-diverging",
       "lineNumber": 34,
       "line": "<Highlight area />"
     },
     {
       "example": "horizontal-multiple-overlapping",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-multiple-overlapping",
+      "path": "/docs/components/Bars/horizontal-multiple-overlapping",
       "lineNumber": 33,
       "line": "<Highlight area />"
     },
     {
       "example": "horizontal-stacked",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-stacked",
+      "path": "/docs/components/Bars/horizontal-stacked",
       "lineNumber": 47,
       "line": "<Highlight area />"
     },
     {
       "example": "horizontal-stacked-percent",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-stacked-percent",
+      "path": "/docs/components/Bars/horizontal-stacked-percent",
       "lineNumber": 52,
       "line": "<Highlight area />"
     },
     {
       "example": "horizontal-tooltip-and-bar-highlight",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-tooltip-and-bar-highlight",
+      "path": "/docs/components/Bars/horizontal-tooltip-and-bar-highlight",
       "lineNumber": 33,
       "line": "<Highlight area bar={{ class: 'fill-primary', strokeWidth: 1 }} />"
     },
     {
       "example": "horizontal-tooltip-and-clipped-highlight",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-tooltip-and-clipped-highlight",
+      "path": "/docs/components/Bars/horizontal-tooltip-and-clipped-highlight",
       "lineNumber": 33,
       "line": "<Highlight>"
     },
     {
       "example": "horizontal-tooltip-and-highlight",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-tooltip-and-highlight",
+      "path": "/docs/components/Bars/horizontal-tooltip-and-highlight",
       "lineNumber": 32,
       "line": "<Highlight area />"
     },
     {
       "example": "vertical-click-handler",
       "component": "Bars",
-      "path": "/example/Bars/vertical-click-handler",
+      "path": "/docs/components/Bars/vertical-click-handler",
       "lineNumber": 34,
       "line": "<Highlight area />"
     },
     {
       "example": "vertical-grouped",
       "component": "Bars",
-      "path": "/example/Bars/vertical-grouped",
+      "path": "/docs/components/Bars/vertical-grouped",
       "lineNumber": 41,
       "line": "<Highlight area />"
     },
     {
       "example": "vertical-grouped-and-stacked",
       "component": "Bars",
-      "path": "/example/Bars/vertical-grouped-and-stacked",
+      "path": "/docs/components/Bars/vertical-grouped-and-stacked",
       "lineNumber": 46,
       "line": "<Highlight area />"
     },
     {
       "example": "vertical-grouped-stacked-or-both-transition",
       "component": "Bars",
-      "path": "/example/Bars/vertical-grouped-stacked-or-both-transition",
+      "path": "/docs/components/Bars/vertical-grouped-stacked-or-both-transition",
       "lineNumber": 110,
       "line": "<Highlight area />"
     },
     {
       "example": "vertical-highlight-individual-bar",
       "component": "Bars",
-      "path": "/example/Bars/vertical-highlight-individual-bar",
+      "path": "/docs/components/Bars/vertical-highlight-individual-bar",
       "lineNumber": 33,
       "line": "<Highlight data={data[3]} area={{ fill: pattern, class: 'stroke-secondary/50' }} />"
     },
     {
       "example": "vertical-highlight-individual-bar-line",
       "component": "Bars",
-      "path": "/example/Bars/vertical-highlight-individual-bar-line",
+      "path": "/docs/components/Bars/vertical-highlight-individual-bar-line",
       "lineNumber": 24,
       "line": "<Highlight"
     },
     {
       "example": "vertical-multiple-diverging",
       "component": "Bars",
-      "path": "/example/Bars/vertical-multiple-diverging",
+      "path": "/docs/components/Bars/vertical-multiple-diverging",
       "lineNumber": 32,
       "line": "<Highlight area />"
     },
     {
       "example": "vertical-multiple-diverging-rounded-specific",
       "component": "Bars",
-      "path": "/example/Bars/vertical-multiple-diverging-rounded-specific",
+      "path": "/docs/components/Bars/vertical-multiple-diverging-rounded-specific",
       "lineNumber": 43,
       "line": "<Highlight area />"
     },
     {
       "example": "vertical-multiple-overlapping",
       "component": "Bars",
-      "path": "/example/Bars/vertical-multiple-overlapping",
+      "path": "/docs/components/Bars/vertical-multiple-overlapping",
       "lineNumber": 31,
       "line": "<Highlight area />"
     },
     {
       "example": "vertical-stacked",
       "component": "Bars",
-      "path": "/example/Bars/vertical-stacked",
+      "path": "/docs/components/Bars/vertical-stacked",
       "lineNumber": 38,
       "line": "<Highlight area />"
     },
     {
       "example": "vertical-stacked-percent",
       "component": "Bars",
-      "path": "/example/Bars/vertical-stacked-percent",
+      "path": "/docs/components/Bars/vertical-stacked-percent",
       "lineNumber": 42,
       "line": "<Highlight area />"
     },
     {
       "example": "vertical-tooltip-and-bar-highlight",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tooltip-and-bar-highlight",
+      "path": "/docs/components/Bars/vertical-tooltip-and-bar-highlight",
       "lineNumber": 30,
       "line": "<Highlight area bar={{ class: 'fill-primary', strokeWidth: 1 }} />"
     },
     {
       "example": "vertical-tooltip-and-clipped-highlight",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tooltip-and-clipped-highlight",
+      "path": "/docs/components/Bars/vertical-tooltip-and-clipped-highlight",
       "lineNumber": 32,
       "line": "<Highlight>"
     },
     {
       "example": "vertical-tooltip-and-highlight",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tooltip-and-highlight",
+      "path": "/docs/components/Bars/vertical-tooltip-and-highlight",
       "lineNumber": 30,
       "line": "<Highlight area />"
     },
     {
       "example": "tooltip-interop",
       "component": "BrushContext",
-      "path": "/example/BrushContext/tooltip-interop",
+      "path": "/docs/components/BrushContext/tooltip-interop",
       "lineNumber": 50,
       "line": "<Highlight points lines />"
     },
     {
       "example": "compound-dual-axis-with-single-chart-using-remapped-scale",
       "component": "Chart",
-      "path": "/example/Chart/compound-dual-axis-with-single-chart-using-remapped-scale",
+      "path": "/docs/components/Chart/compound-dual-axis-with-single-chart-using-remapped-scale",
       "lineNumber": 45,
       "line": "<Highlight lines points />"
     },
     {
       "example": "compound-dual-axis-with-single-chart-using-remapped-scale",
       "component": "Chart",
-      "path": "/example/Chart/compound-dual-axis-with-single-chart-using-remapped-scale",
+      "path": "/docs/components/Chart/compound-dual-axis-with-single-chart-using-remapped-scale",
       "lineNumber": 46,
       "line": "<Highlight points={{ class: 'fill-secondary' }} y={(d) => context.y1Scale?.(d.efficiency)} />"
     },
     {
       "example": "compound-dual-axis-with-stacked-charts",
       "component": "Chart",
-      "path": "/example/Chart/compound-dual-axis-with-stacked-charts",
+      "path": "/docs/components/Chart/compound-dual-axis-with-stacked-charts",
       "lineNumber": 31,
       "line": "<Highlight lines points />"
     },
     {
       "example": "compound-dual-axis-with-stacked-charts",
       "component": "Chart",
-      "path": "/example/Chart/compound-dual-axis-with-stacked-charts",
+      "path": "/docs/components/Chart/compound-dual-axis-with-stacked-charts",
       "lineNumber": 53,
       "line": "<Highlight lines />"
     },
     {
       "example": "custom",
       "component": "LineChart",
-      "path": "/example/LineChart/custom",
+      "path": "/docs/components/LineChart/custom",
       "lineNumber": 24,
       "line": "<Highlight points lines />"
     },
     {
       "example": "gradient-encoding",
       "component": "LineChart",
-      "path": "/example/LineChart/gradient-encoding",
+      "path": "/docs/components/LineChart/gradient-encoding",
       "lineNumber": 28,
       "line": "<Highlight lines points={{ fill: temperatureColor(context.y(context.tooltip.data)) }} />"
     },
     {
       "example": "gradient-threshold",
       "component": "LineChart",
-      "path": "/example/LineChart/gradient-threshold",
+      "path": "/docs/components/LineChart/gradient-threshold",
       "lineNumber": 30,
       "line": "<Highlight"
     },
     {
       "example": "oscilloscope-time",
       "component": "LineChart",
-      "path": "/example/LineChart/oscilloscope-time",
+      "path": "/docs/components/LineChart/oscilloscope-time",
       "lineNumber": 113,
       "line": "<Highlight lines points={{ fill: valueColor(context.y(context.tooltip.data)) }} />"
     },
     {
       "example": "series-individual-tooltip",
       "component": "LineChart",
-      "path": "/example/LineChart/series-individual-tooltip",
+      "path": "/docs/components/LineChart/series-individual-tooltip",
       "lineNumber": 55,
       "line": "<Highlight lines points={{ fill: activeSeriesColor }} />"
     },
     {
       "example": "with-tooltip-and-highlight",
       "component": "Points",
-      "path": "/example/Points/with-tooltip-and-highlight",
+      "path": "/docs/components/Points/with-tooltip-and-highlight",
       "lineNumber": 24,
       "line": "<Highlight points lines />"
     },
     {
       "example": "candlestick",
       "component": "Rule",
-      "path": "/example/Rule/candlestick",
+      "path": "/docs/components/Rule/candlestick",
       "lineNumber": 29,
       "line": "<Highlight lines />"
     },
     {
       "example": "candlestick-open-close-line-color",
       "component": "Rule",
-      "path": "/example/Rule/candlestick-open-close-line-color",
+      "path": "/docs/components/Rule/candlestick-open-close-line-color",
       "lineNumber": 29,
       "line": "<Highlight lines />"
     },
     {
       "example": "candlestick-with-brushing",
       "component": "Rule",
-      "path": "/example/Rule/candlestick-with-brushing",
+      "path": "/docs/components/Rule/candlestick-with-brushing",
       "lineNumber": 37,
       "line": "<Highlight lines />"
     },
     {
       "example": "lollipop",
       "component": "Rule",
-      "path": "/example/Rule/lollipop",
+      "path": "/docs/components/Rule/lollipop",
       "lineNumber": 26,
       "line": "<Highlight area />"
     },
     {
       "example": "custom",
       "component": "ScatterChart",
-      "path": "/example/ScatterChart/custom",
+      "path": "/docs/components/ScatterChart/custom",
       "lineNumber": 16,
       "line": "<Highlight points lines axis=\"both\" />"
     },
     {
       "example": "punchcard",
       "component": "ScatterChart",
-      "path": "/example/ScatterChart/punchcard",
+      "path": "/docs/components/ScatterChart/punchcard",
       "lineNumber": 34,
       "line": "<Highlight area axis=\"x\" />"
     },
     {
       "example": "punchcard",
       "component": "ScatterChart",
-      "path": "/example/ScatterChart/punchcard",
+      "path": "/docs/components/ScatterChart/punchcard",
       "lineNumber": 35,
       "line": "<Highlight area axis=\"y\" />"
     },
     {
       "example": "multiple-series",
       "component": "Spline",
-      "path": "/example/Spline/multiple-series",
+      "path": "/docs/components/Spline/multiple-series",
       "lineNumber": 69,
       "line": "<Highlight points lines />"
     },
     {
       "example": "multiple-series-highlight-on-hover",
       "component": "Spline",
-      "path": "/example/Spline/multiple-series-highlight-on-hover",
+      "path": "/docs/components/Spline/multiple-series-highlight-on-hover",
       "lineNumber": 73,
       "line": "<Highlight points lines />"
     },
     {
       "example": "multiple-series-using-overrides",
       "component": "Spline",
-      "path": "/example/Spline/multiple-series-using-overrides",
+      "path": "/docs/components/Spline/multiple-series-using-overrides",
       "lineNumber": 33,
       "line": "<Highlight y={(d) => d.y} points={{ fill: fruitColors.bananas }} />"
     },
     {
       "example": "multiple-series-using-overrides",
       "component": "Spline",
-      "path": "/example/Spline/multiple-series-using-overrides",
+      "path": "/docs/components/Spline/multiple-series-using-overrides",
       "lineNumber": 34,
       "line": "<Highlight y={(d) => d.y1} points={{ fill: fruitColors.oranges }} />"
     },
     {
       "example": "multiple-series-using-overrides",
       "component": "Spline",
-      "path": "/example/Spline/multiple-series-using-overrides",
+      "path": "/docs/components/Spline/multiple-series-using-overrides",
       "lineNumber": 35,
       "line": "<Highlight lines />"
     },
     {
       "example": "multiple-series-with-labels",
       "component": "Spline",
-      "path": "/example/Spline/multiple-series-with-labels",
+      "path": "/docs/components/Spline/multiple-series-with-labels",
       "lineNumber": 48,
       "line": "<Highlight points lines />"
     },
     {
       "example": "vertical",
       "component": "Spline",
-      "path": "/example/Spline/vertical",
+      "path": "/docs/components/Spline/vertical",
       "lineNumber": 25,
       "line": "<Highlight points lines />"
     },
     {
       "example": "with-tooltip-and-highlight",
       "component": "Spline",
-      "path": "/example/Spline/with-tooltip-and-highlight",
+      "path": "/docs/components/Spline/with-tooltip-and-highlight",
       "lineNumber": 24,
       "line": "<Highlight points lines />"
     },
     {
       "example": "anchor-location",
       "component": "Tooltip",
-      "path": "/example/Tooltip/anchor-location",
+      "path": "/docs/components/Tooltip/anchor-location",
       "lineNumber": 40,
       "line": "<Highlight points lines />"
     },
     {
       "example": "area",
       "component": "Tooltip",
-      "path": "/example/Tooltip/area",
+      "path": "/docs/components/Tooltip/area",
       "lineNumber": 43,
       "line": "<Highlight"
     },
     {
       "example": "basic",
       "component": "Tooltip",
-      "path": "/example/Tooltip/basic",
+      "path": "/docs/components/Tooltip/basic",
       "lineNumber": 30,
       "line": "<Highlight points lines />"
     },
     {
       "example": "color-swatch",
       "component": "Tooltip",
-      "path": "/example/Tooltip/color-swatch",
+      "path": "/docs/components/Tooltip/color-swatch",
       "lineNumber": 30,
       "line": "<Highlight points lines />"
     },
     {
       "example": "color-swatch-using-theme",
       "component": "Tooltip",
-      "path": "/example/Tooltip/color-swatch-using-theme",
+      "path": "/docs/components/Tooltip/color-swatch-using-theme",
       "lineNumber": 30,
       "line": "<Highlight points lines />"
     },
     {
       "example": "custom-content",
       "component": "Tooltip",
-      "path": "/example/Tooltip/custom-content",
+      "path": "/docs/components/Tooltip/custom-content",
       "lineNumber": 30,
       "line": "<Highlight points lines />"
     },
     {
       "example": "data-snapping",
       "component": "Tooltip",
-      "path": "/example/Tooltip/data-snapping",
+      "path": "/docs/components/Tooltip/data-snapping",
       "lineNumber": 30,
       "line": "<Highlight points lines />"
     },
     {
       "example": "default-mouse-position-with-offset",
       "component": "Tooltip",
-      "path": "/example/Tooltip/default-mouse-position-with-offset",
+      "path": "/docs/components/Tooltip/default-mouse-position-with-offset",
       "lineNumber": 30,
       "line": "<Highlight points lines />"
     },
     {
       "example": "disable-motion",
       "component": "Tooltip",
-      "path": "/example/Tooltip/disable-motion",
+      "path": "/docs/components/Tooltip/disable-motion",
       "lineNumber": 30,
       "line": "<Highlight points lines />"
     },
     {
       "example": "duration",
       "component": "Tooltip",
-      "path": "/example/Tooltip/duration",
+      "path": "/docs/components/Tooltip/duration",
       "lineNumber": 55,
       "line": "<Highlight"
     },
     {
       "example": "externally-access-tooltip-data",
       "component": "Tooltip",
-      "path": "/example/Tooltip/externally-access-tooltip-data",
+      "path": "/docs/components/Tooltip/externally-access-tooltip-data",
       "lineNumber": 54,
       "line": "<Highlight points lines />"
     },
     {
       "example": "invert-variant",
       "component": "Tooltip",
-      "path": "/example/Tooltip/invert-variant",
+      "path": "/docs/components/Tooltip/invert-variant",
       "lineNumber": 30,
       "line": "<Highlight points lines />"
     },
     {
       "example": "multiple-overlapping-bars",
       "component": "Tooltip",
-      "path": "/example/Tooltip/multiple-overlapping-bars",
+      "path": "/docs/components/Tooltip/multiple-overlapping-bars",
       "lineNumber": 52,
       "line": "<Highlight"
     },
     {
       "example": "multiple-overlapping-durations",
       "component": "Tooltip",
-      "path": "/example/Tooltip/multiple-overlapping-durations",
+      "path": "/docs/components/Tooltip/multiple-overlapping-durations",
       "lineNumber": 54,
       "line": "<Highlight"
     },
     {
       "example": "multiple-tooltips-with-fixed-single-axis",
       "component": "Tooltip",
-      "path": "/example/Tooltip/multiple-tooltips-with-fixed-single-axis",
+      "path": "/docs/components/Tooltip/multiple-tooltips-with-fixed-single-axis",
       "lineNumber": 32,
       "line": "<Highlight points lines axis=\"both\" />"
     },
     {
       "example": "multiple-tooltips-with-fixed-single-axis-scaleband",
       "component": "Tooltip",
-      "path": "/example/Tooltip/multiple-tooltips-with-fixed-single-axis-scaleband",
+      "path": "/docs/components/Tooltip/multiple-tooltips-with-fixed-single-axis-scaleband",
       "lineNumber": 35,
       "line": "<Highlight area />"
     },
     {
       "example": "scatter-plot",
       "component": "Tooltip",
-      "path": "/example/Tooltip/scatter-plot",
+      "path": "/docs/components/Tooltip/scatter-plot",
       "lineNumber": 40,
       "line": "<Highlight"
     },
     {
       "example": "simple-bars",
       "component": "Tooltip",
-      "path": "/example/Tooltip/simple-bars",
+      "path": "/docs/components/Tooltip/simple-bars",
       "lineNumber": 48,
       "line": "<Highlight"
     },
     {
       "example": "single-date-time",
       "component": "Tooltip",
-      "path": "/example/Tooltip/single-date-time",
+      "path": "/docs/components/Tooltip/single-date-time",
       "lineNumber": 43,
       "line": "<Highlight"
     },
     {
       "example": "stacked-area",
       "component": "Tooltip",
-      "path": "/example/Tooltip/stacked-area",
+      "path": "/docs/components/Tooltip/stacked-area",
       "lineNumber": 71,
       "line": "<Highlight"
     }
   ],
-  "updatedAt": "2026-01-06T13:02:21.488Z"
+  "updatedAt": "2026-02-07T17:00:31.844Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Hull.json b/docs/src/examples/catalog/Hull.json
index e23c73057..e5b293fd1 100644
--- a/docs/src/examples/catalog/Hull.json
+++ b/docs/src/examples/catalog/Hull.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "geo",
-      "path": "/example/Hull/geo",
+      "title": "geo",
+      "path": "/docs/components/Hull/geo",
       "components": [
         {
           "component": "Chart",
@@ -44,7 +45,8 @@
     },
     {
       "name": "scatter",
-      "path": "/example/Hull/scatter",
+      "title": "scatter",
+      "path": "/docs/components/Hull/scatter",
       "components": [
         {
           "component": "Chart",
@@ -78,17 +80,17 @@
     {
       "example": "geo",
       "component": "Hull",
-      "path": "/example/Hull/geo",
+      "path": "/docs/components/Hull/geo",
       "lineNumber": 34,
       "line": "<Hull"
     },
     {
       "example": "scatter",
       "component": "Hull",
-      "path": "/example/Hull/scatter",
+      "path": "/docs/components/Hull/scatter",
       "lineNumber": 42,
       "line": "<Hull"
     }
   ],
-  "updatedAt": "2025-11-23T01:49:02.338Z"
+  "updatedAt": "2026-02-07T20:21:31.887Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Labels.json b/docs/src/examples/catalog/Labels.json
index 6c18bafa4..ec0f4ddd6 100644
--- a/docs/src/examples/catalog/Labels.json
+++ b/docs/src/examples/catalog/Labels.json
@@ -5,80 +5,80 @@
     {
       "example": "multiple-series-with-labels",
       "component": "Area",
-      "path": "/example/Area/multiple-series-with-labels",
+      "path": "/docs/components/Area/multiple-series-with-labels",
       "lineNumber": 48,
       "line": "<Labels format=\"integer\" />"
     },
     {
       "example": "with-labels",
       "component": "Area",
-      "path": "/example/Area/with-labels",
+      "path": "/docs/components/Area/with-labels",
       "lineNumber": 15,
       "line": "<Labels format=\"integer\" />"
     },
     {
       "example": "axis-labels-inside-bars-using-labels",
       "component": "BarChart",
-      "path": "/example/BarChart/axis-labels-inside-bars-using-labels",
+      "path": "/docs/components/BarChart/axis-labels-inside-bars-using-labels",
       "lineNumber": 26,
       "line": "<Labels x={(d) => 0} value=\"date\" class=\"text-sm fill-surface-300 stroke-none\" />"
     },
     {
       "example": "horizontal-inside-labels",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-inside-labels",
+      "path": "/docs/components/Bars/horizontal-inside-labels",
       "lineNumber": 25,
       "line": "<Labels placement=\"inside\" format=\"integer\" class=\"fill-black\" />"
     },
     {
       "example": "horizontal-outside-labels-default",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-outside-labels-default",
+      "path": "/docs/components/Bars/horizontal-outside-labels-default",
       "lineNumber": 26,
       "line": "<Labels format=\"integer\" />"
     },
     {
       "example": "vertical-inside-labels",
       "component": "Bars",
-      "path": "/example/Bars/vertical-inside-labels",
+      "path": "/docs/components/Bars/vertical-inside-labels",
       "lineNumber": 25,
       "line": "<Labels placement=\"inside\" format=\"integer\" class=\"fill-black\" />"
     },
     {
       "example": "vertical-outside-labels-default",
       "component": "Bars",
-      "path": "/example/Bars/vertical-outside-labels-default",
+      "path": "/docs/components/Bars/vertical-outside-labels-default",
       "lineNumber": 26,
       "line": "<Labels format=\"integer\" />"
     },
     {
       "example": "series-labels-hover",
       "component": "LineChart",
-      "path": "/example/LineChart/series-labels-hover",
+      "path": "/docs/components/LineChart/series-labels-hover",
       "lineNumber": 35,
       "line": "<Labels {...getLabelsProps(series[activeSeriesIndex], activeSeriesIndex)} offset={10} />"
     },
     {
       "example": "with-labels",
       "component": "Points",
-      "path": "/example/Points/with-labels",
+      "path": "/docs/components/Points/with-labels",
       "lineNumber": 15,
       "line": "<Labels format=\"integer\" offset={10} />"
     },
     {
       "example": "multiple-series-with-labels",
       "component": "Spline",
-      "path": "/example/Spline/multiple-series-with-labels",
+      "path": "/docs/components/Spline/multiple-series-with-labels",
       "lineNumber": 47,
       "line": "<Labels format=\"integer\" />"
     },
     {
       "example": "with-labels",
       "component": "Spline",
-      "path": "/example/Spline/with-labels",
+      "path": "/docs/components/Spline/with-labels",
       "lineNumber": 15,
       "line": "<Labels format=\"integer\" />"
     }
   ],
-  "updatedAt": "2026-01-06T13:02:21.538Z"
+  "updatedAt": "2026-02-07T17:00:31.937Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Layer.json b/docs/src/examples/catalog/Layer.json
index 39b912f98..19288befe 100644
--- a/docs/src/examples/catalog/Layer.json
+++ b/docs/src/examples/catalog/Layer.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "all-3-layers",
-      "path": "/example/Layer/all-3-layers",
+      "title": "all 3 layers",
+      "path": "/docs/components/Layer/all-3-layers",
       "components": [
         {
           "component": "Chart",
@@ -32,3076 +33,3076 @@
     {
       "example": "band-scale-on-axis",
       "component": "AnnotationPoint",
-      "path": "/example/AnnotationPoint/band-scale-on-axis",
+      "path": "/docs/components/AnnotationPoint/band-scale-on-axis",
       "lineNumber": 18,
       "line": "<Layer>"
     },
     {
       "example": "band-scale-on-value",
       "component": "AnnotationPoint",
-      "path": "/example/AnnotationPoint/band-scale-on-value",
+      "path": "/docs/components/AnnotationPoint/band-scale-on-value",
       "lineNumber": 18,
       "line": "<Layer>"
     },
     {
       "example": "on-axis-with-tooltip",
       "component": "AnnotationPoint",
-      "path": "/example/AnnotationPoint/on-axis-with-tooltip",
+      "path": "/docs/components/AnnotationPoint/on-axis-with-tooltip",
       "lineNumber": 28,
       "line": "<Layer>"
     },
     {
       "example": "on-series-with-line-and-tooltip",
       "component": "AnnotationPoint",
-      "path": "/example/AnnotationPoint/on-series-with-line-and-tooltip",
+      "path": "/docs/components/AnnotationPoint/on-series-with-line-and-tooltip",
       "lineNumber": 27,
       "line": "<Layer>"
     },
     {
       "example": "on-series-with-tooltip",
       "component": "AnnotationPoint",
-      "path": "/example/AnnotationPoint/on-series-with-tooltip",
+      "path": "/docs/components/AnnotationPoint/on-series-with-tooltip",
       "lineNumber": 27,
       "line": "<Layer>"
     },
     {
       "example": "color-wheel",
       "component": "Arc",
-      "path": "/example/Arc/color-wheel",
+      "path": "/docs/components/Arc/color-wheel",
       "lineNumber": 32,
       "line": "<Layer center>"
     },
     {
       "example": "concentric",
       "component": "Arc",
-      "path": "/example/Arc/concentric",
+      "path": "/docs/components/Arc/concentric",
       "lineNumber": 16,
       "line": "<Layer center>"
     },
     {
       "example": "draggable-arc",
       "component": "Arc",
-      "path": "/example/Arc/draggable-arc",
+      "path": "/docs/components/Arc/draggable-arc",
       "lineNumber": 14,
       "line": "<Layer center>"
     },
     {
       "example": "label-direction",
       "component": "Arc",
-      "path": "/example/Arc/label-direction",
+      "path": "/docs/components/Arc/label-direction",
       "lineNumber": 54,
       "line": "<Layer center>"
     },
     {
       "example": "partial-arc",
       "component": "Arc",
-      "path": "/example/Arc/partial-arc",
+      "path": "/docs/components/Arc/partial-arc",
       "lineNumber": 13,
       "line": "<Layer center>"
     },
     {
       "example": "playground",
       "component": "Arc",
-      "path": "/example/Arc/playground",
+      "path": "/docs/components/Arc/playground",
       "lineNumber": 25,
       "line": "<Layer center>"
     },
     {
       "example": "segmented-arc",
       "component": "Arc",
-      "path": "/example/Arc/segmented-arc",
+      "path": "/docs/components/Arc/segmented-arc",
       "lineNumber": 16,
       "line": "<Layer center>"
     },
     {
       "example": "segmented-arc-clip-mask",
       "component": "Arc",
-      "path": "/example/Arc/segmented-arc-clip-mask",
+      "path": "/docs/components/Arc/segmented-arc-clip-mask",
       "lineNumber": 15,
       "line": "<Layer center>"
     },
     {
       "example": "tween-value-on-mount",
       "component": "Arc",
-      "path": "/example/Arc/tween-value-on-mount",
+      "path": "/docs/components/Arc/tween-value-on-mount",
       "lineNumber": 21,
       "line": "<Layer center>"
     },
     {
       "example": "basic",
       "component": "Area",
-      "path": "/example/Area/basic",
+      "path": "/docs/components/Area/basic",
       "lineNumber": 12,
       "line": "<Layer>"
     },
     {
       "example": "clip-tween-on-mount",
       "component": "Area",
-      "path": "/example/Area/clip-tween-on-mount",
+      "path": "/docs/components/Area/clip-tween-on-mount",
       "lineNumber": 17,
       "line": "<Layer>"
     },
     {
       "example": "clipped-area-on-tooltip",
       "component": "Area",
-      "path": "/example/Area/clipped-area-on-tooltip",
+      "path": "/docs/components/Area/clipped-area-on-tooltip",
       "lineNumber": 31,
       "line": "<Layer>"
     },
     {
       "example": "explicit-axis-ticks-min-max",
       "component": "Area",
-      "path": "/example/Area/explicit-axis-ticks-min-max",
+      "path": "/docs/components/Area/explicit-axis-ticks-min-max",
       "lineNumber": 11,
       "line": "<Layer>"
     },
     {
       "example": "gradient",
       "component": "Area",
-      "path": "/example/Area/gradient",
+      "path": "/docs/components/Area/gradient",
       "lineNumber": 11,
       "line": "<Layer>"
     },
     {
       "example": "gradient-separate-stroke",
       "component": "Area",
-      "path": "/example/Area/gradient-separate-stroke",
+      "path": "/docs/components/Area/gradient-separate-stroke",
       "lineNumber": 11,
       "line": "<Layer>"
     },
     {
       "example": "highlight-color-based-on-value-using-color-scale",
       "component": "Area",
-      "path": "/example/Area/highlight-color-based-on-value-using-color-scale",
+      "path": "/docs/components/Area/highlight-color-based-on-value-using-color-scale",
       "lineNumber": 28,
       "line": "<Layer>"
     },
     {
       "example": "highlight-color-based-on-value-using-tooltip-slot-prop",
       "component": "Area",
-      "path": "/example/Area/highlight-color-based-on-value-using-tooltip-slot-prop",
+      "path": "/docs/components/Area/highlight-color-based-on-value-using-tooltip-slot-prop",
       "lineNumber": 17,
       "line": "<Layer>"
     },
     {
       "example": "multiple-series",
       "component": "Area",
-      "path": "/example/Area/multiple-series",
+      "path": "/docs/components/Area/multiple-series",
       "lineNumber": 53,
       "line": "<Layer>"
     },
     {
       "example": "multiple-series-highlight-on-hover",
       "component": "Area",
-      "path": "/example/Area/multiple-series-highlight-on-hover",
+      "path": "/docs/components/Area/multiple-series-highlight-on-hover",
       "lineNumber": 54,
       "line": "<Layer>"
     },
     {
       "example": "multiple-series-using-overrides",
       "component": "Area",
-      "path": "/example/Area/multiple-series-using-overrides",
+      "path": "/docs/components/Area/multiple-series-using-overrides",
       "lineNumber": 33,
       "line": "<Layer>"
     },
     {
       "example": "multiple-series-with-labels",
       "component": "Area",
-      "path": "/example/Area/multiple-series-with-labels",
+      "path": "/docs/components/Area/multiple-series-with-labels",
       "lineNumber": 41,
       "line": "<Layer>"
     },
     {
       "example": "playground",
       "component": "Area",
-      "path": "/example/Area/playground",
+      "path": "/docs/components/Area/playground",
       "lineNumber": 34,
       "line": "<Layer>"
     },
     {
       "example": "stack",
       "component": "Area",
-      "path": "/example/Area/stack",
+      "path": "/docs/components/Area/stack",
       "lineNumber": 57,
       "line": "<Layer>"
     },
     {
       "example": "stack-with-gradient",
       "component": "Area",
-      "path": "/example/Area/stack-with-gradient",
+      "path": "/docs/components/Area/stack-with-gradient",
       "lineNumber": 40,
       "line": "<Layer>"
     },
     {
       "example": "threshold-with-lineargradient",
       "component": "Area",
-      "path": "/example/Area/threshold-with-lineargradient",
+      "path": "/docs/components/Area/threshold-with-lineargradient",
       "lineNumber": 20,
       "line": "<Layer>"
     },
     {
       "example": "threshold-with-lineargradient-over-under",
       "component": "Area",
-      "path": "/example/Area/threshold-with-lineargradient-over-under",
+      "path": "/docs/components/Area/threshold-with-lineargradient-over-under",
       "lineNumber": 20,
       "line": "<Layer>"
     },
     {
       "example": "threshold-with-rectclippath",
       "component": "Area",
-      "path": "/example/Area/threshold-with-rectclippath",
+      "path": "/docs/components/Area/threshold-with-rectclippath",
       "lineNumber": 17,
       "line": "<Layer>"
     },
     {
       "example": "threshold-with-rectclippath-over-under",
       "component": "Area",
-      "path": "/example/Area/threshold-with-rectclippath-over-under",
+      "path": "/docs/components/Area/threshold-with-rectclippath-over-under",
       "lineNumber": 17,
       "line": "<Layer>"
     },
     {
       "example": "with-labels",
       "component": "Area",
-      "path": "/example/Area/with-labels",
+      "path": "/docs/components/Area/with-labels",
       "lineNumber": 11,
       "line": "<Layer>"
     },
     {
       "example": "with-tooltip-and-highlight",
       "component": "Area",
-      "path": "/example/Area/with-tooltip-and-highlight",
+      "path": "/docs/components/Area/with-tooltip-and-highlight",
       "lineNumber": 20,
       "line": "<Layer>"
     },
     {
       "example": "custom",
       "component": "AreaChart",
-      "path": "/example/AreaChart/custom",
+      "path": "/docs/components/AreaChart/custom",
       "lineNumber": 20,
       "line": "<Layer>"
     },
     {
       "example": "markers",
       "component": "AreaChart",
-      "path": "/example/AreaChart/markers",
+      "path": "/docs/components/AreaChart/markers",
       "lineNumber": 46,
       "line": "<Layer type=\"html\">"
     },
     {
       "example": "arrow-markers",
       "component": "Axis",
-      "path": "/example/Axis/arrow-markers",
+      "path": "/docs/components/Axis/arrow-markers",
       "lineNumber": 16,
       "line": "<Layer>"
     },
     {
       "example": "axis-label-placement-left-right",
       "component": "Axis",
-      "path": "/example/Axis/axis-label-placement-left-right",
+      "path": "/docs/components/Axis/axis-label-placement-left-right",
       "lineNumber": 6,
       "line": "<Layer>"
     },
     {
       "example": "axis-label-placement-top-bottom",
       "component": "Axis",
-      "path": "/example/Axis/axis-label-placement-top-bottom",
+      "path": "/docs/components/Axis/axis-label-placement-top-bottom",
       "lineNumber": 14,
       "line": "<Layer>"
     },
     {
       "example": "explicit-ticks",
       "component": "Axis",
-      "path": "/example/Axis/explicit-ticks",
+      "path": "/docs/components/Axis/explicit-ticks",
       "lineNumber": 6,
       "line": "<Layer>"
     },
     {
       "example": "extent-ticks-only",
       "component": "Axis",
-      "path": "/example/Axis/extent-ticks-only",
+      "path": "/docs/components/Axis/extent-ticks-only",
       "lineNumber": 15,
       "line": "<Layer>"
     },
     {
       "example": "grid",
       "component": "Axis",
-      "path": "/example/Axis/grid",
+      "path": "/docs/components/Axis/grid",
       "lineNumber": 16,
       "line": "<Layer>"
     },
     {
       "example": "grid-dashed",
       "component": "Axis",
-      "path": "/example/Axis/grid-dashed",
+      "path": "/docs/components/Axis/grid-dashed",
       "lineNumber": 16,
       "line": "<Layer>"
     },
     {
       "example": "hide-zero-filter",
       "component": "Axis",
-      "path": "/example/Axis/hide-zero-filter",
+      "path": "/docs/components/Axis/hide-zero-filter",
       "lineNumber": 6,
       "line": "<Layer>"
     },
     {
       "example": "hide-zero-format",
       "component": "Axis",
-      "path": "/example/Axis/hide-zero-format",
+      "path": "/docs/components/Axis/hide-zero-format",
       "lineNumber": 6,
       "line": "<Layer>"
     },
     {
       "example": "inject-ticks",
       "component": "Axis",
-      "path": "/example/Axis/inject-ticks",
+      "path": "/docs/components/Axis/inject-ticks",
       "lineNumber": 6,
       "line": "<Layer>"
     },
     {
       "example": "integer-only-filter",
       "component": "Axis",
-      "path": "/example/Axis/integer-only-filter",
+      "path": "/docs/components/Axis/integer-only-filter",
       "lineNumber": 6,
       "line": "<Layer>"
     },
     {
       "example": "integer-only-format",
       "component": "Axis",
-      "path": "/example/Axis/integer-only-format",
+      "path": "/docs/components/Axis/integer-only-format",
       "lineNumber": 6,
       "line": "<Layer>"
     },
     {
       "example": "labels-next-hash",
       "component": "Axis",
-      "path": "/example/Axis/labels-next-hash",
+      "path": "/docs/components/Axis/labels-next-hash",
       "lineNumber": 11,
       "line": "<Layer>"
     },
     {
       "example": "log-scale",
       "component": "Axis",
-      "path": "/example/Axis/log-scale",
+      "path": "/docs/components/Axis/log-scale",
       "lineNumber": 7,
       "line": "<Layer>"
     },
     {
       "example": "multiline-tick-labels",
       "component": "Axis",
-      "path": "/example/Axis/multiline-tick-labels",
+      "path": "/docs/components/Axis/multiline-tick-labels",
       "lineNumber": 14,
       "line": "<Layer>"
     },
     {
       "example": "multiple-axis-grid-and-rules",
       "component": "Axis",
-      "path": "/example/Axis/multiple-axis-grid-and-rules",
+      "path": "/docs/components/Axis/multiple-axis-grid-and-rules",
       "lineNumber": 16,
       "line": "<Layer>"
     },
     {
       "example": "multiple-axis-grid-and-rules-separate-grid",
       "component": "Axis",
-      "path": "/example/Axis/multiple-axis-grid-and-rules-separate-grid",
+      "path": "/docs/components/Axis/multiple-axis-grid-and-rules-separate-grid",
       "lineNumber": 16,
       "line": "<Layer>"
     },
     {
       "example": "multiple-axis-grid-with-single-rule",
       "component": "Axis",
-      "path": "/example/Axis/multiple-axis-grid-with-single-rule",
+      "path": "/docs/components/Axis/multiple-axis-grid-with-single-rule",
       "lineNumber": 16,
       "line": "<Layer>"
     },
     {
       "example": "multiple-axis-same-placement-bottom",
       "component": "Axis",
-      "path": "/example/Axis/multiple-axis-same-placement-bottom",
+      "path": "/docs/components/Axis/multiple-axis-same-placement-bottom",
       "lineNumber": 14,
       "line": "<Layer>"
     },
     {
       "example": "multiple-axis-same-placement-right",
       "component": "Axis",
-      "path": "/example/Axis/multiple-axis-same-placement-right",
+      "path": "/docs/components/Axis/multiple-axis-same-placement-right",
       "lineNumber": 9,
       "line": "<Layer>"
     },
     {
       "example": "override-axis-ticks-scale",
       "component": "Axis",
-      "path": "/example/Axis/override-axis-ticks-scale",
+      "path": "/docs/components/Axis/override-axis-ticks-scale",
       "lineNumber": 11,
       "line": "<Layer>"
     },
     {
       "example": "placement-bottom-left",
       "component": "Axis",
-      "path": "/example/Axis/placement-bottom-left",
+      "path": "/docs/components/Axis/placement-bottom-left",
       "lineNumber": 16,
       "line": "<Layer>"
     },
     {
       "example": "placement-bottom-left-rule",
       "component": "Axis",
-      "path": "/example/Axis/placement-bottom-left-rule",
+      "path": "/docs/components/Axis/placement-bottom-left-rule",
       "lineNumber": 16,
       "line": "<Layer>"
     },
     {
       "example": "placement-top-right",
       "component": "Axis",
-      "path": "/example/Axis/placement-top-right",
+      "path": "/docs/components/Axis/placement-top-right",
       "lineNumber": 16,
       "line": "<Layer>"
     },
     {
       "example": "placement-top-right-rule",
       "component": "Axis",
-      "path": "/example/Axis/placement-top-right-rule",
+      "path": "/docs/components/Axis/placement-top-right-rule",
       "lineNumber": 16,
       "line": "<Layer>"
     },
     {
       "example": "radial-grid",
       "component": "Axis",
-      "path": "/example/Axis/radial-grid",
+      "path": "/docs/components/Axis/radial-grid",
       "lineNumber": 17,
       "line": "<Layer center>"
     },
     {
       "example": "radial-rule",
       "component": "Axis",
-      "path": "/example/Axis/radial-rule",
+      "path": "/docs/components/Axis/radial-rule",
       "lineNumber": 17,
       "line": "<Layer center>"
     },
     {
       "example": "remove-tick-marks",
       "component": "Axis",
-      "path": "/example/Axis/remove-tick-marks",
+      "path": "/docs/components/Axis/remove-tick-marks",
       "lineNumber": 14,
       "line": "<Layer>"
     },
     {
       "example": "rotate-labels",
       "component": "Axis",
-      "path": "/example/Axis/rotate-labels",
+      "path": "/docs/components/Axis/rotate-labels",
       "lineNumber": 14,
       "line": "<Layer>"
     },
     {
       "example": "tick-count",
       "component": "Axis",
-      "path": "/example/Axis/tick-count",
+      "path": "/docs/components/Axis/tick-count",
       "lineNumber": 6,
       "line": "<Layer>"
     },
     {
       "example": "tick-label-styling",
       "component": "Axis",
-      "path": "/example/Axis/tick-label-styling",
+      "path": "/docs/components/Axis/tick-label-styling",
       "lineNumber": 10,
       "line": "<Layer>"
     },
     {
       "example": "tick-spacing",
       "component": "Axis",
-      "path": "/example/Axis/tick-spacing",
+      "path": "/docs/components/Axis/tick-spacing",
       "lineNumber": 6,
       "line": "<Layer>"
     },
     {
       "example": "time-scale-auto",
       "component": "Axis",
-      "path": "/example/Axis/time-scale-auto",
+      "path": "/docs/components/Axis/time-scale-auto",
       "lineNumber": 119,
       "line": "<Layer>"
     },
     {
       "example": "time-scale-auto-format-filtering",
       "component": "Axis",
-      "path": "/example/Axis/time-scale-auto-format-filtering",
+      "path": "/docs/components/Axis/time-scale-auto-format-filtering",
       "lineNumber": 119,
       "line": "<Layer>"
     },
     {
       "example": "time-scale-auto-multiline",
       "component": "Axis",
-      "path": "/example/Axis/time-scale-auto-multiline",
-      "lineNumber": 119,
+      "path": "/docs/components/Axis/time-scale-auto-multiline",
+      "lineNumber": 120,
       "line": "<Layer>"
     },
     {
       "example": "time-scale-brush",
       "component": "Axis",
-      "path": "/example/Axis/time-scale-brush",
+      "path": "/docs/components/Axis/time-scale-brush",
       "lineNumber": 29,
       "line": "<Layer>"
     },
     {
       "example": "time-scale-brush",
       "component": "Axis",
-      "path": "/example/Axis/time-scale-brush",
+      "path": "/docs/components/Axis/time-scale-brush",
       "lineNumber": 47,
       "line": "<Layer>"
     },
     {
       "example": "time-scale-brush-multiline",
       "component": "Axis",
-      "path": "/example/Axis/time-scale-brush-multiline",
+      "path": "/docs/components/Axis/time-scale-brush-multiline",
       "lineNumber": 29,
       "line": "<Layer>"
     },
     {
       "example": "time-scale-brush-multiline",
       "component": "Axis",
-      "path": "/example/Axis/time-scale-brush-multiline",
+      "path": "/docs/components/Axis/time-scale-brush-multiline",
       "lineNumber": 47,
       "line": "<Layer>"
     },
     {
       "example": "time-scale-explicit",
       "component": "Axis",
-      "path": "/example/Axis/time-scale-explicit",
+      "path": "/docs/components/Axis/time-scale-explicit",
       "lineNumber": 114,
       "line": "<Layer>"
     },
     {
       "example": "time-scale-explicit-multiline",
       "component": "Axis",
-      "path": "/example/Axis/time-scale-explicit-multiline",
+      "path": "/docs/components/Axis/time-scale-explicit-multiline",
       "lineNumber": 114,
       "line": "<Layer>"
     },
     {
       "example": "custom-chart",
       "component": "BarChart",
-      "path": "/example/BarChart/custom-chart",
+      "path": "/docs/components/BarChart/custom-chart",
       "lineNumber": 18,
       "line": "<Layer>"
     },
     {
       "example": "horizontal-average-annotation-rule",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-average-annotation-rule",
+      "path": "/docs/components/Bars/horizontal-average-annotation-rule",
       "lineNumber": 30,
       "line": "<Layer>"
     },
     {
       "example": "horizontal-basic",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-basic",
+      "path": "/docs/components/Bars/horizontal-basic",
       "lineNumber": 27,
       "line": "<Layer>"
     },
     {
       "example": "horizontal-calculated-value-domain-negative",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-calculated-value-domain-negative",
+      "path": "/docs/components/Bars/horizontal-calculated-value-domain-negative",
       "lineNumber": 20,
       "line": "<Layer>"
     },
     {
       "example": "horizontal-calculated-value-domain-positive",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-calculated-value-domain-positive",
+      "path": "/docs/components/Bars/horizontal-calculated-value-domain-positive",
       "lineNumber": 20,
       "line": "<Layer>"
     },
     {
       "example": "horizontal-candlestick-bars",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-candlestick-bars",
+      "path": "/docs/components/Bars/horizontal-candlestick-bars",
       "lineNumber": 25,
       "line": "<Layer>"
     },
     {
       "example": "horizontal-click-handler",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-click-handler",
+      "path": "/docs/components/Bars/horizontal-click-handler",
       "lineNumber": 33,
       "line": "<Layer>"
     },
     {
       "example": "horizontal-customize-individual-styles",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-customize-individual-styles",
+      "path": "/docs/components/Bars/horizontal-customize-individual-styles",
       "lineNumber": 27,
       "line": "<Layer>"
     },
     {
       "example": "horizontal-gradient",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-gradient",
+      "path": "/docs/components/Bars/horizontal-gradient",
       "lineNumber": 27,
       "line": "<Layer>"
     },
     {
       "example": "horizontal-grouped",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-grouped",
+      "path": "/docs/components/Bars/horizontal-grouped",
       "lineNumber": 46,
       "line": "<Layer>"
     },
     {
       "example": "horizontal-grouped-and-stacked",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-grouped-and-stacked",
+      "path": "/docs/components/Bars/horizontal-grouped-and-stacked",
       "lineNumber": 51,
       "line": "<Layer>"
     },
     {
       "example": "horizontal-grouped-stacked-or-both-transition",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-grouped-stacked-or-both-transition",
+      "path": "/docs/components/Bars/horizontal-grouped-stacked-or-both-transition",
       "lineNumber": 80,
       "line": "<Layer>"
     },
     {
       "example": "horizontal-highlight-individual-bar",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-highlight-individual-bar",
+      "path": "/docs/components/Bars/horizontal-highlight-individual-bar",
       "lineNumber": 27,
       "line": "<Layer>"
     },
     {
       "example": "horizontal-highlight-individual-bar-line",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-highlight-individual-bar-line",
+      "path": "/docs/components/Bars/horizontal-highlight-individual-bar-line",
       "lineNumber": 27,
       "line": "<Layer>"
     },
     {
       "example": "horizontal-inside-labels",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-inside-labels",
+      "path": "/docs/components/Bars/horizontal-inside-labels",
       "lineNumber": 20,
       "line": "<Layer>"
     },
     {
       "example": "horizontal-limit-ticks-count",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-limit-ticks-count",
+      "path": "/docs/components/Bars/horizontal-limit-ticks-count",
       "lineNumber": 27,
       "line": "<Layer>"
     },
     {
       "example": "horizontal-limit-ticks-second-scale",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-limit-ticks-second-scale",
+      "path": "/docs/components/Bars/horizontal-limit-ticks-second-scale",
       "lineNumber": 27,
       "line": "<Layer>"
     },
     {
       "example": "horizontal-multiple-diverging",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-multiple-diverging",
+      "path": "/docs/components/Bars/horizontal-multiple-diverging",
       "lineNumber": 27,
       "line": "<Layer>"
     },
     {
       "example": "horizontal-multiple-overlapping",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-multiple-overlapping",
+      "path": "/docs/components/Bars/horizontal-multiple-overlapping",
       "lineNumber": 28,
       "line": "<Layer>"
     },
     {
       "example": "horizontal-outside-labels-default",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-outside-labels-default",
+      "path": "/docs/components/Bars/horizontal-outside-labels-default",
       "lineNumber": 21,
       "line": "<Layer>"
     },
     {
       "example": "horizontal-rounded-right-only",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-rounded-right-only",
+      "path": "/docs/components/Bars/horizontal-rounded-right-only",
       "lineNumber": 27,
       "line": "<Layer>"
     },
     {
       "example": "horizontal-stacked",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-stacked",
+      "path": "/docs/components/Bars/horizontal-stacked",
       "lineNumber": 43,
       "line": "<Layer>"
     },
     {
       "example": "horizontal-stacked-percent",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-stacked-percent",
+      "path": "/docs/components/Bars/horizontal-stacked-percent",
       "lineNumber": 48,
       "line": "<Layer>"
     },
     {
       "example": "horizontal-stagger-tween-on-mount",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-stagger-tween-on-mount",
+      "path": "/docs/components/Bars/horizontal-stagger-tween-on-mount",
       "lineNumber": 33,
       "line": "<Layer>"
     },
     {
       "example": "horizontal-time-scale-with-inset",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-time-scale-with-inset",
+      "path": "/docs/components/Bars/horizontal-time-scale-with-inset",
       "lineNumber": 27,
       "line": "<Layer>"
     },
     {
       "example": "horizontal-time-scale-with-interval",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-time-scale-with-interval",
+      "path": "/docs/components/Bars/horizontal-time-scale-with-interval",
       "lineNumber": 27,
       "line": "<Layer>"
     },
     {
       "example": "horizontal-time-scale-with-missing-data",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-time-scale-with-missing-data",
+      "path": "/docs/components/Bars/horizontal-time-scale-with-missing-data",
       "lineNumber": 27,
       "line": "<Layer>"
     },
     {
       "example": "horizontal-tooltip-and-bar-highlight",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-tooltip-and-bar-highlight",
+      "path": "/docs/components/Bars/horizontal-tooltip-and-bar-highlight",
       "lineNumber": 29,
       "line": "<Layer>"
     },
     {
       "example": "horizontal-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
+      "path": "/docs/components/Bars/horizontal-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
       "lineNumber": 78,
       "line": "<Layer>"
     },
     {
       "example": "horizontal-tooltip-and-clipped-highlight",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-tooltip-and-clipped-highlight",
+      "path": "/docs/components/Bars/horizontal-tooltip-and-clipped-highlight",
       "lineNumber": 29,
       "line": "<Layer>"
     },
     {
       "example": "horizontal-tooltip-and-highlight",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-tooltip-and-highlight",
+      "path": "/docs/components/Bars/horizontal-tooltip-and-highlight",
       "lineNumber": 28,
       "line": "<Layer>"
     },
     {
       "example": "horizontal-tween-on-mount",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-tween-on-mount",
+      "path": "/docs/components/Bars/horizontal-tween-on-mount",
       "lineNumber": 33,
       "line": "<Layer>"
     },
     {
       "example": "horizontal-with-grid-on-top",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-with-grid-on-top",
+      "path": "/docs/components/Bars/horizontal-with-grid-on-top",
       "lineNumber": 27,
       "line": "<Layer>"
     },
     {
       "example": "horizontal-with-grid-on-top-mix-blend",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-with-grid-on-top-mix-blend",
+      "path": "/docs/components/Bars/horizontal-with-grid-on-top-mix-blend",
       "lineNumber": 27,
       "line": "<Layer>"
     },
     {
       "example": "vertical-average-annotation-rule",
       "component": "Bars",
-      "path": "/example/Bars/vertical-average-annotation-rule",
+      "path": "/docs/components/Bars/vertical-average-annotation-rule",
       "lineNumber": 28,
       "line": "<Layer>"
     },
     {
       "example": "vertical-basic",
       "component": "Bars",
-      "path": "/example/Bars/vertical-basic",
+      "path": "/docs/components/Bars/vertical-basic",
       "lineNumber": 24,
       "line": "<Layer>"
     },
     {
       "example": "vertical-calculated-value-domain-negative",
       "component": "Bars",
-      "path": "/example/Bars/vertical-calculated-value-domain-negative",
+      "path": "/docs/components/Bars/vertical-calculated-value-domain-negative",
       "lineNumber": 23,
       "line": "<Layer>"
     },
     {
       "example": "vertical-calculated-value-domain-positive",
       "component": "Bars",
-      "path": "/example/Bars/vertical-calculated-value-domain-positive",
+      "path": "/docs/components/Bars/vertical-calculated-value-domain-positive",
       "lineNumber": 23,
       "line": "<Layer>"
     },
     {
       "example": "vertical-click-handler",
       "component": "Bars",
-      "path": "/example/Bars/vertical-click-handler",
+      "path": "/docs/components/Bars/vertical-click-handler",
       "lineNumber": 30,
       "line": "<Layer>"
     },
     {
       "example": "vertical-customize-individual-styles",
       "component": "Bars",
-      "path": "/example/Bars/vertical-customize-individual-styles",
+      "path": "/docs/components/Bars/vertical-customize-individual-styles",
       "lineNumber": 24,
       "line": "<Layer>"
     },
     {
       "example": "vertical-gradient",
       "component": "Bars",
-      "path": "/example/Bars/vertical-gradient",
+      "path": "/docs/components/Bars/vertical-gradient",
       "lineNumber": 20,
       "line": "<Layer>"
     },
     {
       "example": "vertical-grouped",
       "component": "Bars",
-      "path": "/example/Bars/vertical-grouped",
+      "path": "/docs/components/Bars/vertical-grouped",
       "lineNumber": 37,
       "line": "<Layer>"
     },
     {
       "example": "vertical-grouped-and-stacked",
       "component": "Bars",
-      "path": "/example/Bars/vertical-grouped-and-stacked",
+      "path": "/docs/components/Bars/vertical-grouped-and-stacked",
       "lineNumber": 42,
       "line": "<Layer>"
     },
     {
       "example": "vertical-grouped-stacked-or-both-transition",
       "component": "Bars",
-      "path": "/example/Bars/vertical-grouped-stacked-or-both-transition",
+      "path": "/docs/components/Bars/vertical-grouped-stacked-or-both-transition",
       "lineNumber": 76,
       "line": "<Layer>"
     },
     {
       "example": "vertical-highlight-individual-bar",
       "component": "Bars",
-      "path": "/example/Bars/vertical-highlight-individual-bar",
+      "path": "/docs/components/Bars/vertical-highlight-individual-bar",
       "lineNumber": 24,
       "line": "<Layer>"
     },
     {
       "example": "vertical-highlight-individual-bar-line",
       "component": "Bars",
-      "path": "/example/Bars/vertical-highlight-individual-bar-line",
+      "path": "/docs/components/Bars/vertical-highlight-individual-bar-line",
       "lineNumber": 20,
       "line": "<Layer>"
     },
     {
       "example": "vertical-inside-labels",
       "component": "Bars",
-      "path": "/example/Bars/vertical-inside-labels",
+      "path": "/docs/components/Bars/vertical-inside-labels",
       "lineNumber": 20,
       "line": "<Layer>"
     },
     {
       "example": "vertical-limit-ticks-count",
       "component": "Bars",
-      "path": "/example/Bars/vertical-limit-ticks-count",
+      "path": "/docs/components/Bars/vertical-limit-ticks-count",
       "lineNumber": 24,
       "line": "<Layer>"
     },
     {
       "example": "vertical-limit-ticks-second-scale",
       "component": "Bars",
-      "path": "/example/Bars/vertical-limit-ticks-second-scale",
+      "path": "/docs/components/Bars/vertical-limit-ticks-second-scale",
       "lineNumber": 24,
       "line": "<Layer>"
     },
     {
       "example": "vertical-multiple-diverging",
       "component": "Bars",
-      "path": "/example/Bars/vertical-multiple-diverging",
+      "path": "/docs/components/Bars/vertical-multiple-diverging",
       "lineNumber": 26,
       "line": "<Layer>"
     },
     {
       "example": "vertical-multiple-diverging-rounded-specific",
       "component": "Bars",
-      "path": "/example/Bars/vertical-multiple-diverging-rounded-specific",
+      "path": "/docs/components/Bars/vertical-multiple-diverging-rounded-specific",
       "lineNumber": 37,
       "line": "<Layer>"
     },
     {
       "example": "vertical-multiple-overlapping",
       "component": "Bars",
-      "path": "/example/Bars/vertical-multiple-overlapping",
+      "path": "/docs/components/Bars/vertical-multiple-overlapping",
       "lineNumber": 26,
       "line": "<Layer>"
     },
     {
       "example": "vertical-outside-labels-default",
       "component": "Bars",
-      "path": "/example/Bars/vertical-outside-labels-default",
+      "path": "/docs/components/Bars/vertical-outside-labels-default",
       "lineNumber": 21,
       "line": "<Layer>"
     },
     {
       "example": "vertical-rounded-top-only",
       "component": "Bars",
-      "path": "/example/Bars/vertical-rounded-top-only",
+      "path": "/docs/components/Bars/vertical-rounded-top-only",
       "lineNumber": 25,
       "line": "<Layer>"
     },
     {
       "example": "vertical-stacked",
       "component": "Bars",
-      "path": "/example/Bars/vertical-stacked",
+      "path": "/docs/components/Bars/vertical-stacked",
       "lineNumber": 34,
       "line": "<Layer>"
     },
     {
       "example": "vertical-stacked-percent",
       "component": "Bars",
-      "path": "/example/Bars/vertical-stacked-percent",
+      "path": "/docs/components/Bars/vertical-stacked-percent",
       "lineNumber": 38,
       "line": "<Layer>"
     },
     {
       "example": "vertical-stagger-tween-on-mount",
       "component": "Bars",
-      "path": "/example/Bars/vertical-stagger-tween-on-mount",
+      "path": "/docs/components/Bars/vertical-stagger-tween-on-mount",
       "lineNumber": 30,
       "line": "<Layer>"
     },
     {
       "example": "vertical-stagger-tween-on-mount-rounded-edge",
       "component": "Bars",
-      "path": "/example/Bars/vertical-stagger-tween-on-mount-rounded-edge",
+      "path": "/docs/components/Bars/vertical-stagger-tween-on-mount-rounded-edge",
       "lineNumber": 30,
       "line": "<Layer>"
     },
     {
       "example": "vertical-time-scale-with-inset",
       "component": "Bars",
-      "path": "/example/Bars/vertical-time-scale-with-inset",
+      "path": "/docs/components/Bars/vertical-time-scale-with-inset",
       "lineNumber": 22,
       "line": "<Layer>"
     },
     {
       "example": "vertical-time-scale-with-interval",
       "component": "Bars",
-      "path": "/example/Bars/vertical-time-scale-with-interval",
+      "path": "/docs/components/Bars/vertical-time-scale-with-interval",
       "lineNumber": 22,
       "line": "<Layer>"
     },
     {
       "example": "vertical-time-scale-with-interval-months",
       "component": "Bars",
-      "path": "/example/Bars/vertical-time-scale-with-interval-months",
+      "path": "/docs/components/Bars/vertical-time-scale-with-interval-months",
       "lineNumber": 22,
       "line": "<Layer>"
     },
     {
       "example": "vertical-time-scale-with-missing-data",
       "component": "Bars",
-      "path": "/example/Bars/vertical-time-scale-with-missing-data",
+      "path": "/docs/components/Bars/vertical-time-scale-with-missing-data",
       "lineNumber": 22,
       "line": "<Layer>"
     },
     {
       "example": "vertical-tooltip-and-bar-highlight",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tooltip-and-bar-highlight",
+      "path": "/docs/components/Bars/vertical-tooltip-and-bar-highlight",
       "lineNumber": 26,
       "line": "<Layer>"
     },
     {
       "example": "vertical-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
+      "path": "/docs/components/Bars/vertical-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
       "lineNumber": 78,
       "line": "<Layer>"
     },
     {
       "example": "vertical-tooltip-and-clipped-highlight",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tooltip-and-clipped-highlight",
+      "path": "/docs/components/Bars/vertical-tooltip-and-clipped-highlight",
       "lineNumber": 28,
       "line": "<Layer>"
     },
     {
       "example": "vertical-tooltip-and-highlight",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tooltip-and-highlight",
+      "path": "/docs/components/Bars/vertical-tooltip-and-highlight",
       "lineNumber": 26,
       "line": "<Layer>"
     },
     {
       "example": "vertical-tween-on-mount",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tween-on-mount",
+      "path": "/docs/components/Bars/vertical-tween-on-mount",
       "lineNumber": 30,
       "line": "<Layer>"
     },
     {
       "example": "vertical-tween-on-mount-rounded-edge",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tween-on-mount-rounded-edge",
+      "path": "/docs/components/Bars/vertical-tween-on-mount-rounded-edge",
       "lineNumber": 30,
       "line": "<Layer>"
     },
     {
       "example": "vertical-with-grid-on-top",
       "component": "Bars",
-      "path": "/example/Bars/vertical-with-grid-on-top",
+      "path": "/docs/components/Bars/vertical-with-grid-on-top",
       "lineNumber": 23,
       "line": "<Layer>"
     },
     {
       "example": "vertical-with-grid-on-top-mix-blend",
       "component": "Bars",
-      "path": "/example/Bars/vertical-with-grid-on-top-mix-blend",
+      "path": "/docs/components/Bars/vertical-with-grid-on-top-mix-blend",
       "lineNumber": 23,
       "line": "<Layer>"
     },
     {
       "example": "basic",
       "component": "BrushContext",
-      "path": "/example/BrushContext/basic",
+      "path": "/docs/components/BrushContext/basic",
       "lineNumber": 11,
       "line": "<Layer>"
     },
     {
       "example": "constant-labels",
       "component": "BrushContext",
-      "path": "/example/BrushContext/constant-labels",
+      "path": "/docs/components/BrushContext/constant-labels",
       "lineNumber": 12,
       "line": "<Layer>"
     },
     {
       "example": "handle-arrows",
       "component": "BrushContext",
-      "path": "/example/BrushContext/handle-arrows",
+      "path": "/docs/components/BrushContext/handle-arrows",
       "lineNumber": 21,
       "line": "<Layer>"
     },
     {
       "example": "handle-labels",
       "component": "BrushContext",
-      "path": "/example/BrushContext/handle-labels",
+      "path": "/docs/components/BrushContext/handle-labels",
       "lineNumber": 13,
       "line": "<Layer>"
     },
     {
       "example": "integrated-brush-(both-axis-area)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/integrated-brush-(both-axis-area)",
+      "path": "/docs/components/BrushContext/integrated-brush-(both-axis-area)",
       "lineNumber": 38,
       "line": "<Layer>"
     },
     {
       "example": "integrated-brush-(x-axis)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/integrated-brush-(x-axis)",
+      "path": "/docs/components/BrushContext/integrated-brush-(x-axis)",
       "lineNumber": 35,
       "line": "<Layer>"
     },
     {
       "example": "integrated-brush-(y-axis)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/integrated-brush-(y-axis)",
+      "path": "/docs/components/BrushContext/integrated-brush-(y-axis)",
       "lineNumber": 35,
       "line": "<Layer>"
     },
     {
       "example": "minimap",
       "component": "BrushContext",
-      "path": "/example/BrushContext/minimap",
+      "path": "/docs/components/BrushContext/minimap",
       "lineNumber": 43,
       "line": "<Layer>"
     },
     {
       "example": "minimap",
       "component": "BrushContext",
-      "path": "/example/BrushContext/minimap",
+      "path": "/docs/components/BrushContext/minimap",
       "lineNumber": 70,
       "line": "<Layer>"
     },
     {
       "example": "selection",
       "component": "BrushContext",
-      "path": "/example/BrushContext/selection",
+      "path": "/docs/components/BrushContext/selection",
       "lineNumber": 39,
       "line": "<Layer>"
     },
     {
       "example": "separate-chart-(clip-data-y-axis)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/separate-chart-(clip-data-y-axis)",
+      "path": "/docs/components/BrushContext/separate-chart-(clip-data-y-axis)",
       "lineNumber": 34,
       "line": "<Layer>"
     },
     {
       "example": "separate-chart-(clip-data-y-axis)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/separate-chart-(clip-data-y-axis)",
+      "path": "/docs/components/BrushContext/separate-chart-(clip-data-y-axis)",
       "lineNumber": 41,
       "line": "<Layer>"
     },
     {
       "example": "separate-chart-(clip-data)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/separate-chart-(clip-data)",
+      "path": "/docs/components/BrushContext/separate-chart-(clip-data)",
       "lineNumber": 29,
       "line": "<Layer>"
     },
     {
       "example": "separate-chart-(clip-data)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/separate-chart-(clip-data)",
+      "path": "/docs/components/BrushContext/separate-chart-(clip-data)",
       "lineNumber": 54,
       "line": "<Layer>"
     },
     {
       "example": "separate-chart-(filter-data)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/separate-chart-(filter-data)",
+      "path": "/docs/components/BrushContext/separate-chart-(filter-data)",
       "lineNumber": 31,
       "line": "<Layer>"
     },
     {
       "example": "separate-chart-(filter-data)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/separate-chart-(filter-data)",
+      "path": "/docs/components/BrushContext/separate-chart-(filter-data)",
       "lineNumber": 61,
       "line": "<Layer>"
     },
     {
       "example": "simple-styling",
       "component": "BrushContext",
-      "path": "/example/BrushContext/simple-styling",
+      "path": "/docs/components/BrushContext/simple-styling",
       "lineNumber": 17,
       "line": "<Layer>"
     },
     {
       "example": "striped-background",
       "component": "BrushContext",
-      "path": "/example/BrushContext/striped-background",
+      "path": "/docs/components/BrushContext/striped-background",
       "lineNumber": 11,
       "line": "<Layer>"
     },
     {
       "example": "sync-brushes-with-bind-xdomain",
       "component": "BrushContext",
-      "path": "/example/BrushContext/sync-brushes-with-bind-xdomain",
+      "path": "/docs/components/BrushContext/sync-brushes-with-bind-xdomain",
       "lineNumber": 64,
       "line": "<Layer>"
     },
     {
       "example": "sync-brushes-with-bind-xdomain",
       "component": "BrushContext",
-      "path": "/example/BrushContext/sync-brushes-with-bind-xdomain",
+      "path": "/docs/components/BrushContext/sync-brushes-with-bind-xdomain",
       "lineNumber": 94,
       "line": "<Layer>"
     },
     {
       "example": "tooltip-interop",
       "component": "BrushContext",
-      "path": "/example/BrushContext/tooltip-interop",
+      "path": "/docs/components/BrushContext/tooltip-interop",
       "lineNumber": 40,
       "line": "<Layer>"
     },
     {
       "example": "90-days",
       "component": "Calendar",
-      "path": "/example/Calendar/90-days",
+      "path": "/docs/components/Calendar/90-days",
       "lineNumber": 38,
       "line": "<Layer>"
     },
     {
       "example": "basic",
       "component": "Calendar",
-      "path": "/example/Calendar/basic",
+      "path": "/docs/components/Calendar/basic",
       "lineNumber": 39,
       "line": "<Layer>"
     },
     {
       "example": "fixed-cell-size",
       "component": "Calendar",
-      "path": "/example/Calendar/fixed-cell-size",
+      "path": "/docs/components/Calendar/fixed-cell-size",
       "lineNumber": 40,
       "line": "<Layer>"
     },
     {
       "example": "html-with-padding",
       "component": "Calendar",
-      "path": "/example/Calendar/html-with-padding",
+      "path": "/docs/components/Calendar/html-with-padding",
       "lineNumber": 40,
       "line": "<Layer type=\"html\">"
     },
     {
       "example": "last-month",
       "component": "Calendar",
-      "path": "/example/Calendar/last-month",
+      "path": "/docs/components/Calendar/last-month",
       "lineNumber": 40,
       "line": "<Layer>"
     },
     {
       "example": "multiple-years",
       "component": "Calendar",
-      "path": "/example/Calendar/multiple-years",
+      "path": "/docs/components/Calendar/multiple-years",
       "lineNumber": 36,
       "line": "<Layer>"
     },
     {
       "example": "responsive-cell-size-default",
       "component": "Calendar",
-      "path": "/example/Calendar/responsive-cell-size-default",
+      "path": "/docs/components/Calendar/responsive-cell-size-default",
       "lineNumber": 40,
       "line": "<Layer>"
     },
     {
       "example": "rounded-cells",
       "component": "Calendar",
-      "path": "/example/Calendar/rounded-cells",
+      "path": "/docs/components/Calendar/rounded-cells",
       "lineNumber": 40,
       "line": "<Layer>"
     },
     {
       "example": "compound-dual-axis-with-single-chart-using-remapped-scale",
       "component": "Chart",
-      "path": "/example/Chart/compound-dual-axis-with-single-chart-using-remapped-scale",
+      "path": "/docs/components/Chart/compound-dual-axis-with-single-chart-using-remapped-scale",
       "lineNumber": 24,
       "line": "<Layer>"
     },
     {
       "example": "compound-dual-axis-with-stacked-charts",
       "component": "Chart",
-      "path": "/example/Chart/compound-dual-axis-with-stacked-charts",
+      "path": "/docs/components/Chart/compound-dual-axis-with-stacked-charts",
       "lineNumber": 20,
       "line": "<Layer>"
     },
     {
       "example": "compound-dual-axis-with-stacked-charts",
       "component": "Chart",
-      "path": "/example/Chart/compound-dual-axis-with-stacked-charts",
+      "path": "/docs/components/Chart/compound-dual-axis-with-stacked-charts",
       "lineNumber": 43,
       "line": "<Layer>"
     },
     {
       "example": "styling-using-attributes",
       "component": "Circle",
-      "path": "/example/Circle/styling-using-attributes",
+      "path": "/docs/components/Circle/styling-using-attributes",
       "lineNumber": 11,
       "line": "<Layer>"
     },
     {
       "example": "styling-using-classes",
       "component": "Circle",
-      "path": "/example/Circle/styling-using-classes",
+      "path": "/docs/components/Circle/styling-using-classes",
       "lineNumber": 11,
       "line": "<Layer>"
     },
     {
       "example": "styling-using-css-variables",
       "component": "Circle",
-      "path": "/example/Circle/styling-using-css-variables",
+      "path": "/docs/components/Circle/styling-using-css-variables",
       "lineNumber": 11,
       "line": "<Layer>"
     },
     {
       "example": "playground",
       "component": "Connector",
-      "path": "/example/Connector/playground",
+      "path": "/docs/components/Connector/playground",
       "lineNumber": 22,
       "line": "<Layer>"
     },
     {
       "example": "basic",
       "component": "Dagre",
-      "path": "/example/Dagre/basic",
+      "path": "/docs/components/Dagre/basic",
       "lineNumber": 46,
       "line": "<Layer>"
     },
     {
       "example": "playground",
       "component": "Dagre",
-      "path": "/example/Dagre/playground",
+      "path": "/docs/components/Dagre/playground",
       "lineNumber": 47,
       "line": "<Layer>"
     },
     {
       "example": "software-user-flow",
       "component": "Dagre",
-      "path": "/example/Dagre/software-user-flow",
+      "path": "/docs/components/Dagre/software-user-flow",
       "lineNumber": 48,
       "line": "<Layer>"
     },
     {
       "example": "tcp-state-diagram",
       "component": "Dagre",
-      "path": "/example/Dagre/tcp-state-diagram",
-      "lineNumber": 46,
-      "line": "<Layer>"
+      "path": "/docs/components/Dagre/tcp-state-diagram",
+      "lineNumber": 47,
+      "line": "<Layer center>"
     },
     {
       "example": "styling-using-attributes",
       "component": "Ellipse",
-      "path": "/example/Ellipse/styling-using-attributes",
+      "path": "/docs/components/Ellipse/styling-using-attributes",
       "lineNumber": 11,
       "line": "<Layer>"
     },
     {
       "example": "styling-using-classes",
       "component": "Ellipse",
-      "path": "/example/Ellipse/styling-using-classes",
+      "path": "/docs/components/Ellipse/styling-using-classes",
       "lineNumber": 11,
       "line": "<Layer>"
     },
     {
       "example": "styling-using-css-variables",
       "component": "Ellipse",
-      "path": "/example/Ellipse/styling-using-css-variables",
+      "path": "/docs/components/Ellipse/styling-using-css-variables",
       "lineNumber": 11,
       "line": "<Layer>"
     },
     {
       "example": "beeswarm",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/beeswarm",
+      "path": "/docs/components/ForceSimulation/beeswarm",
       "lineNumber": 31,
       "line": "<Layer>"
     },
     {
       "example": "collision-detection",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/collision-detection",
+      "path": "/docs/components/ForceSimulation/collision-detection",
       "lineNumber": 50,
       "line": "<Layer"
     },
     {
       "example": "disjoint-graph",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/disjoint-graph",
+      "path": "/docs/components/ForceSimulation/disjoint-graph",
       "lineNumber": 54,
       "line": "<Layer center>"
     },
     {
       "example": "graph-drag",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/graph-drag",
+      "path": "/docs/components/ForceSimulation/graph-drag",
       "lineNumber": 70,
       "line": "<Layer>"
     },
     {
       "example": "graph-playground",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/graph-playground",
+      "path": "/docs/components/ForceSimulation/graph-playground",
       "lineNumber": 147,
       "line": "<Layer>"
     },
     {
       "example": "group",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/group",
+      "path": "/docs/components/ForceSimulation/group",
       "lineNumber": 53,
       "line": "<Layer>"
     },
     {
       "example": "lattice",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/lattice",
+      "path": "/docs/components/ForceSimulation/lattice",
       "lineNumber": 35,
       "line": "<Layer center>"
     },
     {
       "example": "text",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/text",
-      "lineNumber": 96,
+      "path": "/docs/components/ForceSimulation/text",
+      "lineNumber": 97,
       "line": "<Layer"
     },
     {
       "example": "tree",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/tree",
+      "path": "/docs/components/ForceSimulation/tree",
       "lineNumber": 45,
       "line": "<Layer center>"
     },
     {
       "example": "basic",
       "component": "Frame",
-      "path": "/example/Frame/basic",
+      "path": "/docs/components/Frame/basic",
       "lineNumber": 11,
       "line": "<Layer>"
     },
     {
       "example": "border",
       "component": "Frame",
-      "path": "/example/Frame/border",
+      "path": "/docs/components/Frame/border",
       "lineNumber": 11,
       "line": "<Layer>"
     },
     {
       "example": "full",
       "component": "Frame",
-      "path": "/example/Frame/full",
+      "path": "/docs/components/Frame/full",
       "lineNumber": 11,
       "line": "<Layer>"
     },
     {
       "example": "gradient",
       "component": "Frame",
-      "path": "/example/Frame/gradient",
+      "path": "/docs/components/Frame/gradient",
       "lineNumber": 11,
       "line": "<Layer>"
     },
     {
       "example": "earthquake-globe",
       "component": "GeoCircle",
-      "path": "/example/GeoCircle/earthquake-globe",
+      "path": "/docs/components/GeoCircle/earthquake-globe",
       "lineNumber": 70,
       "line": "<Layer disableHitCanvas={timer.running}>"
     },
     {
       "example": "playground",
       "component": "GeoCircle",
-      "path": "/example/GeoCircle/playground",
+      "path": "/docs/components/GeoCircle/playground",
       "lineNumber": 63,
       "line": "<Layer>"
     },
     {
       "example": "geojson-preview",
       "component": "GeoContext",
-      "path": "/example/GeoContext/geojson-preview",
-      "lineNumber": 102,
+      "path": "/docs/components/GeoContext/geojson-preview",
+      "lineNumber": 103,
       "line": "<Layer>"
     },
     {
       "example": "geojson-preview",
       "component": "GeoContext",
-      "path": "/example/GeoContext/geojson-preview",
-      "lineNumber": 113,
+      "path": "/docs/components/GeoContext/geojson-preview",
+      "lineNumber": 114,
       "line": "<Layer>"
     },
     {
       "example": "projection-playground",
       "component": "GeoContext",
-      "path": "/example/GeoContext/projection-playground",
+      "path": "/docs/components/GeoContext/projection-playground",
       "lineNumber": 75,
       "line": "<Layer>"
     },
     {
       "example": "shapefile-preview",
       "component": "GeoContext",
-      "path": "/example/GeoContext/shapefile-preview",
+      "path": "/docs/components/GeoContext/shapefile-preview",
       "lineNumber": 109,
       "line": "<Layer>"
     },
     {
       "example": "topojson-preview",
       "component": "GeoContext",
-      "path": "/example/GeoContext/topojson-preview",
+      "path": "/docs/components/GeoContext/topojson-preview",
       "lineNumber": 110,
       "line": "<Layer>"
     },
     {
       "example": "topojson-preview",
       "component": "GeoContext",
-      "path": "/example/GeoContext/topojson-preview",
+      "path": "/docs/components/GeoContext/topojson-preview",
       "lineNumber": 121,
       "line": "<Layer>"
     },
     {
       "example": "animated-globe",
       "component": "GeoPath",
-      "path": "/example/GeoPath/animated-globe",
+      "path": "/docs/components/GeoPath/animated-globe",
       "lineNumber": 146,
       "line": "<Layer {debug}>"
     },
     {
       "example": "animated-globe",
       "component": "GeoPath",
-      "path": "/example/GeoPath/animated-globe",
+      "path": "/docs/components/GeoPath/animated-globe",
       "lineNumber": 167,
       "line": "<Layer type=\"canvas\" pointerEvents={false}>"
     },
     {
       "example": "bubble-map",
       "component": "GeoPath",
-      "path": "/example/GeoPath/bubble-map",
+      "path": "/docs/components/GeoPath/bubble-map",
       "lineNumber": 88,
       "line": "<Layer>"
     },
     {
       "example": "bubble-map",
       "component": "GeoPath",
-      "path": "/example/GeoPath/bubble-map",
+      "path": "/docs/components/GeoPath/bubble-map",
       "lineNumber": 121,
       "line": "<Layer pointerEvents={false}>"
     },
     {
       "example": "choropleth",
       "component": "GeoPath",
-      "path": "/example/GeoPath/choropleth",
+      "path": "/docs/components/GeoPath/choropleth",
       "lineNumber": 75,
       "line": "<Layer>"
     },
     {
       "example": "choropleth",
       "component": "GeoPath",
-      "path": "/example/GeoPath/choropleth",
+      "path": "/docs/components/GeoPath/choropleth",
       "lineNumber": 94,
       "line": "<Layer pointerEvents={false}>"
     },
     {
       "example": "eclipses-globe",
       "component": "GeoPath",
-      "path": "/example/GeoPath/eclipses-globe",
+      "path": "/docs/components/GeoPath/eclipses-globe",
       "lineNumber": 80,
       "line": "<Layer>"
     },
     {
       "example": "sketchy-globe",
       "component": "GeoPath",
-      "path": "/example/GeoPath/sketchy-globe",
+      "path": "/docs/components/GeoPath/sketchy-globe",
       "lineNumber": 53,
       "line": "<Layer>"
     },
     {
       "example": "spike-map",
       "component": "GeoPath",
-      "path": "/example/GeoPath/spike-map",
-      "lineNumber": 73,
+      "path": "/docs/components/GeoPath/spike-map",
+      "lineNumber": 74,
       "line": "<Layer>"
     },
     {
       "example": "spike-map",
       "component": "GeoPath",
-      "path": "/example/GeoPath/spike-map",
-      "lineNumber": 102,
+      "path": "/docs/components/GeoPath/spike-map",
+      "lineNumber": 103,
       "line": "<Layer pointerEvents={false}>"
     },
     {
       "example": "submarine-cables-globe",
       "component": "GeoPath",
-      "path": "/example/GeoPath/submarine-cables-globe",
+      "path": "/docs/components/GeoPath/submarine-cables-globe",
       "lineNumber": 68,
       "line": "<Layer disableHitCanvas={timer.running}>"
     },
     {
       "example": "timezones",
       "component": "GeoPath",
-      "path": "/example/GeoPath/timezones",
+      "path": "/docs/components/GeoPath/timezones",
       "lineNumber": 102,
       "line": "<Layer>"
     },
     {
       "example": "tooltip",
       "component": "GeoPath",
-      "path": "/example/GeoPath/tooltip",
+      "path": "/docs/components/GeoPath/tooltip",
       "lineNumber": 22,
       "line": "<Layer>"
     },
     {
       "example": "tooltip",
       "component": "GeoPath",
-      "path": "/example/GeoPath/tooltip",
+      "path": "/docs/components/GeoPath/tooltip",
       "lineNumber": 37,
       "line": "<Layer pointerEvents={false}>"
     },
     {
       "example": "transform-canvas",
       "component": "GeoPath",
-      "path": "/example/GeoPath/transform-canvas",
+      "path": "/docs/components/GeoPath/transform-canvas",
       "lineNumber": 64,
       "line": "<Layer>"
     },
     {
       "example": "transform-canvas",
       "component": "GeoPath",
-      "path": "/example/GeoPath/transform-canvas",
+      "path": "/docs/components/GeoPath/transform-canvas",
       "lineNumber": 112,
       "line": "<Layer pointerEvents={false}>"
     },
     {
       "example": "transform-projection",
       "component": "GeoPath",
-      "path": "/example/GeoPath/transform-projection",
+      "path": "/docs/components/GeoPath/transform-projection",
       "lineNumber": 65,
       "line": "<Layer>"
     },
     {
       "example": "transform-projection",
       "component": "GeoPath",
-      "path": "/example/GeoPath/transform-projection",
+      "path": "/docs/components/GeoPath/transform-projection",
       "lineNumber": 110,
       "line": "<Layer pointerEvents={false}>"
     },
     {
       "example": "translucent-globe",
       "component": "GeoPath",
-      "path": "/example/GeoPath/translucent-globe",
+      "path": "/docs/components/GeoPath/translucent-globe",
       "lineNumber": 58,
       "line": "<Layer>"
     },
     {
       "example": "us-country-map",
       "component": "GeoPath",
-      "path": "/example/GeoPath/us-country-map",
+      "path": "/docs/components/GeoPath/us-country-map",
       "lineNumber": 22,
       "line": "<Layer>"
     },
     {
       "example": "us-state",
       "component": "GeoPath",
-      "path": "/example/GeoPath/us-state",
+      "path": "/docs/components/GeoPath/us-state",
       "lineNumber": 44,
       "line": "<Layer>"
     },
     {
       "example": "us-state-with-counties",
       "component": "GeoPath",
-      "path": "/example/GeoPath/us-state-with-counties",
+      "path": "/docs/components/GeoPath/us-state-with-counties",
       "lineNumber": 49,
       "line": "<Layer>"
     },
     {
       "example": "us-state-with-surrounding-states",
       "component": "GeoPath",
-      "path": "/example/GeoPath/us-state-with-surrounding-states",
+      "path": "/docs/components/GeoPath/us-state-with-surrounding-states",
       "lineNumber": 46,
       "line": "<Layer>"
     },
     {
       "example": "icons",
       "component": "GeoPoint",
-      "path": "/example/GeoPoint/icons",
-      "lineNumber": 34,
+      "path": "/docs/components/GeoPoint/icons",
+      "lineNumber": 28,
       "line": "<Layer>"
     },
     {
       "example": "us-airports",
       "component": "GeoPoint",
-      "path": "/example/GeoPoint/us-airports",
+      "path": "/docs/components/GeoPoint/us-airports",
       "lineNumber": 38,
       "line": "<Layer>"
     },
     {
       "example": "us-airports",
       "component": "GeoPoint",
-      "path": "/example/GeoPoint/us-airports",
+      "path": "/docs/components/GeoPoint/us-airports",
       "lineNumber": 57,
       "line": "<Layer>"
     },
     {
       "example": "us-state-capitals",
       "component": "GeoPoint",
-      "path": "/example/GeoPoint/us-state-capitals",
+      "path": "/docs/components/GeoPoint/us-state-capitals",
       "lineNumber": 25,
       "line": "<Layer>"
     },
     {
       "example": "world-airports",
       "component": "GeoPoint",
-      "path": "/example/GeoPoint/world-airports",
+      "path": "/docs/components/GeoPoint/world-airports",
       "lineNumber": 38,
       "line": "<Layer>"
     },
     {
       "example": "world-airports",
       "component": "GeoPoint",
-      "path": "/example/GeoPoint/world-airports",
+      "path": "/docs/components/GeoPoint/world-airports",
       "lineNumber": 54,
       "line": "<Layer>"
     },
     {
       "example": "world-capitals",
       "component": "GeoPoint",
-      "path": "/example/GeoPoint/world-capitals",
+      "path": "/docs/components/GeoPoint/world-capitals",
       "lineNumber": 38,
       "line": "<Layer>"
     },
     {
       "example": "world-capitals",
       "component": "GeoPoint",
-      "path": "/example/GeoPoint/world-capitals",
+      "path": "/docs/components/GeoPoint/world-capitals",
       "lineNumber": 58,
       "line": "<Layer>"
     },
     {
       "example": "draggable-globe",
       "component": "GeoSpline",
-      "path": "/example/GeoSpline/draggable-globe",
+      "path": "/docs/components/GeoSpline/draggable-globe",
       "lineNumber": 26,
       "line": "<Layer>"
     },
     {
       "example": "world-map",
       "component": "GeoSpline",
-      "path": "/example/GeoSpline/world-map",
+      "path": "/docs/components/GeoSpline/world-map",
       "lineNumber": 37,
       "line": "<Layer>"
     },
     {
       "example": "basic",
       "component": "GeoTile",
-      "path": "/example/GeoTile/basic",
-      "lineNumber": 42,
+      "path": "/docs/components/GeoTile/basic",
+      "lineNumber": 43,
       "line": "<Layer>"
     },
     {
       "example": "clipped",
       "component": "GeoTile",
-      "path": "/example/GeoTile/clipped",
+      "path": "/docs/components/GeoTile/clipped",
       "lineNumber": 41,
       "line": "<Layer>"
     },
     {
       "example": "zoomable",
       "component": "GeoTile",
-      "path": "/example/GeoTile/zoomable",
-      "lineNumber": 64,
+      "path": "/docs/components/GeoTile/zoomable",
+      "lineNumber": 65,
       "line": "<Layer>"
     },
     {
       "example": "zoomable-seamless-layers",
       "component": "GeoTile",
-      "path": "/example/GeoTile/zoomable-seamless-layers",
-      "lineNumber": 64,
+      "path": "/docs/components/GeoTile/zoomable-seamless-layers",
+      "lineNumber": 65,
       "line": "<Layer>"
     },
     {
       "example": "zoomable-with-padding",
       "component": "GeoTile",
-      "path": "/example/GeoTile/zoomable-with-padding",
+      "path": "/docs/components/GeoTile/zoomable-with-padding",
       "lineNumber": 71,
       "line": "<Layer>"
     },
     {
       "example": "basic",
       "component": "Graticule",
-      "path": "/example/Graticule/basic",
+      "path": "/docs/components/Graticule/basic",
       "lineNumber": 61,
       "line": "<Layer>"
     },
     {
       "example": "band-scale-between",
       "component": "Grid",
-      "path": "/example/Grid/band-scale-between",
+      "path": "/docs/components/Grid/band-scale-between",
       "lineNumber": 10,
       "line": "<Layer>"
     },
     {
       "example": "band-scale-default",
       "component": "Grid",
-      "path": "/example/Grid/band-scale-default",
+      "path": "/docs/components/Grid/band-scale-default",
       "lineNumber": 10,
       "line": "<Layer>"
     },
     {
       "example": "basic",
       "component": "Grid",
-      "path": "/example/Grid/basic",
+      "path": "/docs/components/Grid/basic",
       "lineNumber": 6,
       "line": "<Layer>"
     },
     {
       "example": "dashed-lines",
       "component": "Grid",
-      "path": "/example/Grid/dashed-lines",
+      "path": "/docs/components/Grid/dashed-lines",
       "lineNumber": 6,
       "line": "<Layer>"
     },
     {
       "example": "explicit-ticks",
       "component": "Grid",
-      "path": "/example/Grid/explicit-ticks",
+      "path": "/docs/components/Grid/explicit-ticks",
       "lineNumber": 6,
       "line": "<Layer>"
     },
     {
       "example": "inject-tick-value",
       "component": "Grid",
-      "path": "/example/Grid/inject-tick-value",
+      "path": "/docs/components/Grid/inject-tick-value",
       "lineNumber": 6,
       "line": "<Layer>"
     },
     {
       "example": "integer-only",
       "component": "Grid",
-      "path": "/example/Grid/integer-only",
+      "path": "/docs/components/Grid/integer-only",
       "lineNumber": 6,
       "line": "<Layer>"
     },
     {
       "example": "padding",
       "component": "Grid",
-      "path": "/example/Grid/padding",
+      "path": "/docs/components/Grid/padding",
       "lineNumber": 11,
       "line": "<Layer>"
     },
     {
       "example": "radial",
       "component": "Grid",
-      "path": "/example/Grid/radial",
+      "path": "/docs/components/Grid/radial",
       "lineNumber": 6,
       "line": "<Layer center>"
     },
     {
       "example": "radial-linear",
       "component": "Grid",
-      "path": "/example/Grid/radial-linear",
+      "path": "/docs/components/Grid/radial-linear",
       "lineNumber": 6,
       "line": "<Layer center>"
     },
     {
       "example": "tick-count",
       "component": "Grid",
-      "path": "/example/Grid/tick-count",
+      "path": "/docs/components/Grid/tick-count",
       "lineNumber": 6,
       "line": "<Layer>"
     },
     {
       "example": "tick-count-null",
       "component": "Grid",
-      "path": "/example/Grid/tick-count-null",
+      "path": "/docs/components/Grid/tick-count-null",
       "lineNumber": 6,
       "line": "<Layer>"
     },
     {
       "example": "tick-count-responsive",
       "component": "Grid",
-      "path": "/example/Grid/tick-count-responsive",
+      "path": "/docs/components/Grid/tick-count-responsive",
       "lineNumber": 15,
       "line": "<Layer>"
     },
     {
       "example": "x-only",
       "component": "Grid",
-      "path": "/example/Grid/x-only",
+      "path": "/docs/components/Grid/x-only",
       "lineNumber": 6,
       "line": "<Layer>"
     },
     {
       "example": "y-only",
       "component": "Grid",
-      "path": "/example/Grid/y-only",
+      "path": "/docs/components/Grid/y-only",
       "lineNumber": 6,
       "line": "<Layer>"
     },
     {
       "example": "basic",
       "component": "Group",
-      "path": "/example/Group/basic",
+      "path": "/docs/components/Group/basic",
       "lineNumber": 6,
       "line": "<Layer>"
     },
     {
       "example": "geo",
       "component": "Hull",
-      "path": "/example/Hull/geo",
+      "path": "/docs/components/Hull/geo",
       "lineNumber": 31,
       "line": "<Layer>"
     },
     {
       "example": "scatter",
       "component": "Hull",
-      "path": "/example/Hull/scatter",
+      "path": "/docs/components/Hull/scatter",
       "lineNumber": 35,
       "line": "<Layer>"
     },
     {
       "example": "all-3-layers",
       "component": "Layer",
-      "path": "/example/Layer/all-3-layers",
+      "path": "/docs/components/Layer/all-3-layers",
       "lineNumber": 6,
       "line": "<Layer center type=\"canvas\">"
     },
     {
       "example": "all-3-layers",
       "component": "Layer",
-      "path": "/example/Layer/all-3-layers",
+      "path": "/docs/components/Layer/all-3-layers",
       "lineNumber": 9,
       "line": "<Layer center type=\"svg\">"
     },
     {
       "example": "all-3-layers",
       "component": "Layer",
-      "path": "/example/Layer/all-3-layers",
+      "path": "/docs/components/Layer/all-3-layers",
       "lineNumber": 20,
       "line": "<Layer center type=\"html\">"
     },
     {
       "example": "styling-using-attributes",
       "component": "Line",
-      "path": "/example/Line/styling-using-attributes",
+      "path": "/docs/components/Line/styling-using-attributes",
       "lineNumber": 11,
       "line": "<Layer>"
     },
     {
       "example": "styling-using-classes",
       "component": "Line",
-      "path": "/example/Line/styling-using-classes",
+      "path": "/docs/components/Line/styling-using-classes",
       "lineNumber": 11,
       "line": "<Layer>"
     },
     {
       "example": "styling-using-css-variables",
       "component": "Line",
-      "path": "/example/Line/styling-using-css-variables",
+      "path": "/docs/components/Line/styling-using-css-variables",
       "lineNumber": 11,
       "line": "<Layer>"
     },
     {
       "example": "direction-with-custom-colors",
       "component": "LinearGradient",
-      "path": "/example/LinearGradient/direction-with-custom-colors",
+      "path": "/docs/components/LinearGradient/direction-with-custom-colors",
       "lineNumber": 6,
       "line": "<Layer>"
     },
     {
       "example": "explicit-offsets",
       "component": "LinearGradient",
-      "path": "/example/LinearGradient/explicit-offsets",
+      "path": "/docs/components/LinearGradient/explicit-offsets",
       "lineNumber": 6,
       "line": "<Layer>"
     },
     {
       "example": "tailwind-colors",
       "component": "LinearGradient",
-      "path": "/example/LinearGradient/tailwind-colors",
+      "path": "/docs/components/LinearGradient/tailwind-colors",
       "lineNumber": 7,
       "line": "<Layer>"
     },
     {
       "example": "units",
       "component": "LinearGradient",
-      "path": "/example/LinearGradient/units",
+      "path": "/docs/components/LinearGradient/units",
       "lineNumber": 7,
       "line": "<Layer>"
     },
     {
       "example": "custom",
       "component": "LineChart",
-      "path": "/example/LineChart/custom",
+      "path": "/docs/components/LineChart/custom",
       "lineNumber": 20,
       "line": "<Layer>"
     },
     {
       "example": "line",
       "component": "Marker",
-      "path": "/example/Marker/line",
+      "path": "/docs/components/Marker/line",
       "lineNumber": 31,
       "line": "<Layer>"
     },
     {
       "example": "orientation",
       "component": "Marker",
-      "path": "/example/Marker/orientation",
+      "path": "/docs/components/Marker/orientation",
       "lineNumber": 35,
       "line": "<Layer>"
     },
     {
       "example": "orientation",
       "component": "Marker",
-      "path": "/example/Marker/orientation",
+      "path": "/docs/components/Marker/orientation",
       "lineNumber": 49,
       "line": "<Layer>"
     },
     {
       "example": "orientation",
       "component": "Marker",
-      "path": "/example/Marker/orientation",
+      "path": "/docs/components/Marker/orientation",
       "lineNumber": 63,
       "line": "<Layer>"
     },
     {
       "example": "spline",
       "component": "Marker",
-      "path": "/example/Marker/spline",
+      "path": "/docs/components/Marker/spline",
       "lineNumber": 41,
       "line": "<Layer>"
     },
     {
       "example": "spline-w-thicker-stroke",
       "component": "Marker",
-      "path": "/example/Marker/spline-w-thicker-stroke",
+      "path": "/docs/components/Marker/spline-w-thicker-stroke",
       "lineNumber": 42,
       "line": "<Layer>"
     },
     {
       "example": "styling",
       "component": "Marker",
-      "path": "/example/Marker/styling",
+      "path": "/docs/components/Marker/styling",
       "lineNumber": 33,
       "line": "<Layer>"
     },
     {
       "example": "repeat-indefinitely",
       "component": "MotionPath",
-      "path": "/example/MotionPath/repeat-indefinitely",
+      "path": "/docs/components/MotionPath/repeat-indefinitely",
       "lineNumber": 37,
       "line": "<Layer>"
     },
     {
       "example": "rotate-object-with-path",
       "component": "MotionPath",
-      "path": "/example/MotionPath/rotate-object-with-path",
+      "path": "/docs/components/MotionPath/rotate-object-with-path",
       "lineNumber": 38,
       "line": "<Layer>"
     },
     {
       "example": "sync-with-draw",
       "component": "MotionPath",
-      "path": "/example/MotionPath/sync-with-draw",
+      "path": "/docs/components/MotionPath/sync-with-draw",
       "lineNumber": 38,
       "line": "<Layer>"
     },
     {
       "example": "basic",
       "component": "Pack",
-      "path": "/example/Pack/basic",
+      "path": "/docs/components/Pack/basic",
       "lineNumber": 106,
       "line": "<Layer onclick={() => (selected = complexHierarchy)}>"
     },
     {
       "example": "filterable",
       "component": "Partition",
-      "path": "/example/Partition/filterable",
+      "path": "/docs/components/Partition/filterable",
       "lineNumber": 106,
       "line": "<Layer>"
     },
     {
       "example": "horizontal",
       "component": "Partition",
-      "path": "/example/Partition/horizontal",
+      "path": "/docs/components/Partition/horizontal",
       "lineNumber": 86,
       "line": "<Layer>"
     },
     {
       "example": "sunburst",
       "component": "Partition",
-      "path": "/example/Partition/sunburst",
+      "path": "/docs/components/Partition/sunburst",
       "lineNumber": 64,
       "line": "<Layer center>"
     },
     {
       "example": "vertical",
       "component": "Partition",
-      "path": "/example/Partition/vertical",
+      "path": "/docs/components/Partition/vertical",
       "lineNumber": 87,
       "line": "<Layer>"
     },
     {
       "example": "basic",
       "component": "Path",
-      "path": "/example/Path/basic",
+      "path": "/docs/components/Path/basic",
       "lineNumber": 6,
       "line": "<Layer>"
     },
     {
       "example": "circles",
       "component": "Pattern",
-      "path": "/example/Pattern/circles",
+      "path": "/docs/components/Pattern/circles",
       "lineNumber": 6,
       "line": "<Layer>"
     },
     {
       "example": "circles-custom-pattern-svg-only",
       "component": "Pattern",
-      "path": "/example/Pattern/circles-custom-pattern-svg-only",
+      "path": "/docs/components/Pattern/circles-custom-pattern-svg-only",
       "lineNumber": 6,
       "line": "<Layer>"
     },
     {
       "example": "lineargradient-as-pattern",
       "component": "Pattern",
-      "path": "/example/Pattern/lineargradient-as-pattern",
+      "path": "/docs/components/Pattern/lineargradient-as-pattern",
       "lineNumber": 6,
       "line": "<Layer>"
     },
     {
       "example": "lines",
       "component": "Pattern",
-      "path": "/example/Pattern/lines",
+      "path": "/docs/components/Pattern/lines",
       "lineNumber": 6,
       "line": "<Layer>"
     },
     {
       "example": "lines-custom-pattern-svg-only",
       "component": "Pattern",
-      "path": "/example/Pattern/lines-custom-pattern-svg-only",
+      "path": "/docs/components/Pattern/lines-custom-pattern-svg-only",
       "lineNumber": 6,
       "line": "<Layer>"
     },
     {
       "example": "with-fill-color",
       "component": "Pattern",
-      "path": "/example/Pattern/with-fill-color",
+      "path": "/docs/components/Pattern/with-fill-color",
       "lineNumber": 6,
       "line": "<Layer>"
     },
     {
       "example": "with-lineargradient",
       "component": "Pattern",
-      "path": "/example/Pattern/with-lineargradient",
+      "path": "/docs/components/Pattern/with-lineargradient",
       "lineNumber": 6,
       "line": "<Layer>"
     },
     {
       "example": "basic",
       "component": "Pie",
-      "path": "/example/Pie/basic",
+      "path": "/docs/components/Pie/basic",
       "lineNumber": 35,
       "line": "<Layer center>"
     },
     {
       "example": "default-slot-render-each-arc",
       "component": "Pie",
-      "path": "/example/Pie/default-slot-render-each-arc",
+      "path": "/docs/components/Pie/default-slot-render-each-arc",
       "lineNumber": 36,
       "line": "<Layer center>"
     },
     {
       "example": "disable-sorting",
       "component": "Pie",
-      "path": "/example/Pie/disable-sorting",
+      "path": "/docs/components/Pie/disable-sorting",
       "lineNumber": 35,
       "line": "<Layer center>"
     },
     {
       "example": "inner-radius-negative",
       "component": "Pie",
-      "path": "/example/Pie/inner-radius-negative",
+      "path": "/docs/components/Pie/inner-radius-negative",
       "lineNumber": 18,
       "line": "<Layer center>"
     },
     {
       "example": "inner-radius-positive",
       "component": "Pie",
-      "path": "/example/Pie/inner-radius-positive",
+      "path": "/docs/components/Pie/inner-radius-positive",
       "lineNumber": 18,
       "line": "<Layer center>"
     },
     {
       "example": "inner-radius-zero-one",
       "component": "Pie",
-      "path": "/example/Pie/inner-radius-zero-one",
+      "path": "/docs/components/Pie/inner-radius-zero-one",
       "lineNumber": 18,
       "line": "<Layer center>"
     },
     {
       "example": "labels",
       "component": "Pie",
-      "path": "/example/Pie/labels",
+      "path": "/docs/components/Pie/labels",
       "lineNumber": 19,
       "line": "<Layer center>"
     },
     {
       "example": "labels-centroid",
       "component": "Pie",
-      "path": "/example/Pie/labels-centroid",
+      "path": "/docs/components/Pie/labels-centroid",
       "lineNumber": 19,
       "line": "<Layer center>"
     },
     {
       "example": "labels-centroid-multiple",
       "component": "Pie",
-      "path": "/example/Pie/labels-centroid-multiple",
+      "path": "/docs/components/Pie/labels-centroid-multiple",
       "lineNumber": 22,
       "line": "<Layer center>"
     },
     {
       "example": "labels-outer",
       "component": "Pie",
-      "path": "/example/Pie/labels-outer",
+      "path": "/docs/components/Pie/labels-outer",
       "lineNumber": 19,
       "line": "<Layer center>"
     },
     {
       "example": "labels-outer-radial",
       "component": "Pie",
-      "path": "/example/Pie/labels-outer-radial",
+      "path": "/docs/components/Pie/labels-outer-radial",
       "lineNumber": 19,
       "line": "<Layer center>"
     },
     {
       "example": "labels-outer-with-padding",
       "component": "Pie",
-      "path": "/example/Pie/labels-outer-with-padding",
+      "path": "/docs/components/Pie/labels-outer-with-padding",
       "lineNumber": 19,
       "line": "<Layer center>"
     },
     {
       "example": "multiple-data-prop",
       "component": "Pie",
-      "path": "/example/Pie/multiple-data-prop",
+      "path": "/docs/components/Pie/multiple-data-prop",
       "lineNumber": 19,
       "line": "<Layer center>"
     },
     {
       "example": "offset",
       "component": "Pie",
-      "path": "/example/Pie/offset",
+      "path": "/docs/components/Pie/offset",
       "lineNumber": 18,
       "line": "<Layer center>"
     },
     {
       "example": "outer-radius",
       "component": "Pie",
-      "path": "/example/Pie/outer-radius",
+      "path": "/docs/components/Pie/outer-radius",
       "lineNumber": 18,
       "line": "<Layer center>"
     },
     {
       "example": "pad-angle",
       "component": "Pie",
-      "path": "/example/Pie/pad-angle",
+      "path": "/docs/components/Pie/pad-angle",
       "lineNumber": 18,
       "line": "<Layer center>"
     },
     {
       "example": "pad-angle-with-inner-radius",
       "component": "Pie",
-      "path": "/example/Pie/pad-angle-with-inner-radius",
+      "path": "/docs/components/Pie/pad-angle-with-inner-radius",
       "lineNumber": 18,
       "line": "<Layer center>"
     },
     {
       "example": "partial-range-chart-xrange",
       "component": "Pie",
-      "path": "/example/Pie/partial-range-chart-xrange",
+      "path": "/docs/components/Pie/partial-range-chart-xrange",
       "lineNumber": 18,
       "line": "<Layer center>"
     },
     {
       "example": "partial-range-range-prop",
       "component": "Pie",
-      "path": "/example/Pie/partial-range-range-prop",
+      "path": "/docs/components/Pie/partial-range-range-prop",
       "lineNumber": 18,
       "line": "<Layer center>"
     },
     {
       "example": "placement",
       "component": "Pie",
-      "path": "/example/Pie/placement",
+      "path": "/docs/components/Pie/placement",
       "lineNumber": 18,
       "line": "<Layer center>"
     },
     {
       "example": "placement-center",
       "component": "Pie",
-      "path": "/example/Pie/placement-center",
+      "path": "/docs/components/Pie/placement-center",
       "lineNumber": 18,
       "line": "<Layer center>"
     },
     {
       "example": "placement-left",
       "component": "Pie",
-      "path": "/example/Pie/placement-left",
+      "path": "/docs/components/Pie/placement-left",
       "lineNumber": 19,
       "line": "<Layer>"
     },
     {
       "example": "placement-right",
       "component": "Pie",
-      "path": "/example/Pie/placement-right",
+      "path": "/docs/components/Pie/placement-right",
       "lineNumber": 19,
       "line": "<Layer>"
     },
     {
       "example": "tooltip",
       "component": "Pie",
-      "path": "/example/Pie/tooltip",
+      "path": "/docs/components/Pie/tooltip",
       "lineNumber": 21,
       "line": "<Layer center>"
     },
     {
       "example": "tooltip-with-arcs-slot",
       "component": "Pie",
-      "path": "/example/Pie/tooltip-with-arcs-slot",
+      "path": "/docs/components/Pie/tooltip-with-arcs-slot",
       "lineNumber": 30,
       "line": "<Layer center>"
     },
     {
       "example": "tweened",
       "component": "Pie",
-      "path": "/example/Pie/tweened",
+      "path": "/docs/components/Pie/tweened",
       "lineNumber": 23,
       "line": "<Layer center>"
     },
     {
       "example": "basic",
       "component": "Point",
-      "path": "/example/Point/basic",
+      "path": "/docs/components/Point/basic",
       "lineNumber": 18,
       "line": "<Layer>"
     },
     {
       "example": "basic",
       "component": "Points",
-      "path": "/example/Points/basic",
+      "path": "/docs/components/Points/basic",
       "lineNumber": 11,
       "line": "<Layer>"
     },
     {
       "example": "color-via-scale",
       "component": "Points",
-      "path": "/example/Points/color-via-scale",
+      "path": "/docs/components/Points/color-via-scale",
       "lineNumber": 24,
       "line": "<Layer>"
     },
     {
       "example": "with-labels",
       "component": "Points",
-      "path": "/example/Points/with-labels",
+      "path": "/docs/components/Points/with-labels",
       "lineNumber": 11,
       "line": "<Layer>"
     },
     {
       "example": "with-tooltip-and-highlight",
       "component": "Points",
-      "path": "/example/Points/with-tooltip-and-highlight",
+      "path": "/docs/components/Points/with-tooltip-and-highlight",
       "lineNumber": 20,
       "line": "<Layer>"
     },
     {
       "example": "10-point-star",
       "component": "Polygon",
-      "path": "/example/Polygon/10-point-star",
+      "path": "/docs/components/Polygon/10-point-star",
       "lineNumber": 17,
       "line": "<Layer>"
     },
     {
       "example": "12-point-star",
       "component": "Polygon",
-      "path": "/example/Polygon/12-point-star",
+      "path": "/docs/components/Polygon/12-point-star",
       "lineNumber": 17,
       "line": "<Layer>"
     },
     {
       "example": "14-point-star",
       "component": "Polygon",
-      "path": "/example/Polygon/14-point-star",
+      "path": "/docs/components/Polygon/14-point-star",
       "lineNumber": 17,
       "line": "<Layer>"
     },
     {
       "example": "16-point-star",
       "component": "Polygon",
-      "path": "/example/Polygon/16-point-star",
+      "path": "/docs/components/Polygon/16-point-star",
       "lineNumber": 17,
       "line": "<Layer>"
     },
     {
       "example": "18-point-star",
       "component": "Polygon",
-      "path": "/example/Polygon/18-point-star",
+      "path": "/docs/components/Polygon/18-point-star",
       "lineNumber": 17,
       "line": "<Layer>"
     },
     {
       "example": "20-point-star",
       "component": "Polygon",
-      "path": "/example/Polygon/20-point-star",
+      "path": "/docs/components/Polygon/20-point-star",
       "lineNumber": 17,
       "line": "<Layer>"
     },
     {
       "example": "6-point-star",
       "component": "Polygon",
-      "path": "/example/Polygon/6-point-star",
+      "path": "/docs/components/Polygon/6-point-star",
       "lineNumber": 17,
       "line": "<Layer>"
     },
     {
       "example": "8-point-star",
       "component": "Polygon",
-      "path": "/example/Polygon/8-point-star",
+      "path": "/docs/components/Polygon/8-point-star",
       "lineNumber": 17,
       "line": "<Layer>"
     },
     {
       "example": "arrow",
       "component": "Polygon",
-      "path": "/example/Polygon/arrow",
+      "path": "/docs/components/Polygon/arrow",
       "lineNumber": 15,
       "line": "<Layer>"
     },
     {
       "example": "cross",
       "component": "Polygon",
-      "path": "/example/Polygon/cross",
+      "path": "/docs/components/Polygon/cross",
       "lineNumber": 15,
       "line": "<Layer>"
     },
     {
       "example": "diamond",
       "component": "Polygon",
-      "path": "/example/Polygon/diamond",
+      "path": "/docs/components/Polygon/diamond",
       "lineNumber": 13,
       "line": "<Layer>"
     },
     {
       "example": "hexagon",
       "component": "Polygon",
-      "path": "/example/Polygon/hexagon",
+      "path": "/docs/components/Polygon/hexagon",
       "lineNumber": 13,
       "line": "<Layer>"
     },
     {
       "example": "octagon",
       "component": "Polygon",
-      "path": "/example/Polygon/octagon",
+      "path": "/docs/components/Polygon/octagon",
       "lineNumber": 13,
       "line": "<Layer>"
     },
     {
       "example": "parallelogram",
       "component": "Polygon",
-      "path": "/example/Polygon/parallelogram",
+      "path": "/docs/components/Polygon/parallelogram",
       "lineNumber": 13,
       "line": "<Layer>"
     },
     {
       "example": "pentagon",
       "component": "Polygon",
-      "path": "/example/Polygon/pentagon",
+      "path": "/docs/components/Polygon/pentagon",
       "lineNumber": 13,
       "line": "<Layer>"
     },
     {
       "example": "playground",
       "component": "Polygon",
-      "path": "/example/Polygon/playground",
+      "path": "/docs/components/Polygon/playground",
       "lineNumber": 23,
       "line": "<Layer>"
     },
     {
       "example": "rectangle",
       "component": "Polygon",
-      "path": "/example/Polygon/rectangle",
+      "path": "/docs/components/Polygon/rectangle",
       "lineNumber": 13,
       "line": "<Layer>"
     },
     {
       "example": "rhombus",
       "component": "Polygon",
-      "path": "/example/Polygon/rhombus",
+      "path": "/docs/components/Polygon/rhombus",
       "lineNumber": 13,
       "line": "<Layer>"
     },
     {
       "example": "square",
       "component": "Polygon",
-      "path": "/example/Polygon/square",
+      "path": "/docs/components/Polygon/square",
       "lineNumber": 13,
       "line": "<Layer>"
     },
     {
       "example": "trapezoid",
       "component": "Polygon",
-      "path": "/example/Polygon/trapezoid",
+      "path": "/docs/components/Polygon/trapezoid",
       "lineNumber": 13,
       "line": "<Layer>"
     },
     {
       "example": "triangle",
       "component": "Polygon",
-      "path": "/example/Polygon/triangle",
+      "path": "/docs/components/Polygon/triangle",
       "lineNumber": 13,
       "line": "<Layer>"
     },
     {
       "example": "focal-location-and-radius-with-custom-colors",
       "component": "RadialGradient",
-      "path": "/example/RadialGradient/focal-location-and-radius-with-custom-colors",
+      "path": "/docs/components/RadialGradient/focal-location-and-radius-with-custom-colors",
       "lineNumber": 8,
       "line": "<Layer>"
     },
     {
       "example": "spreadmethod",
       "component": "RadialGradient",
-      "path": "/example/RadialGradient/spreadmethod",
+      "path": "/docs/components/RadialGradient/spreadmethod",
       "lineNumber": 8,
       "line": "<Layer>"
     },
     {
       "example": "tailwind-colors",
       "component": "RadialGradient",
-      "path": "/example/RadialGradient/tailwind-colors",
+      "path": "/docs/components/RadialGradient/tailwind-colors",
       "lineNumber": 8,
       "line": "<Layer>"
     },
     {
       "example": "units",
       "component": "RadialGradient",
-      "path": "/example/RadialGradient/units",
+      "path": "/docs/components/RadialGradient/units",
       "lineNumber": 8,
       "line": "<Layer>"
     },
     {
       "example": "styling-using-attributes",
       "component": "Rect",
-      "path": "/example/Rect/styling-using-attributes",
+      "path": "/docs/components/Rect/styling-using-attributes",
       "lineNumber": 11,
       "line": "<Layer>"
     },
     {
       "example": "styling-using-classes",
       "component": "Rect",
-      "path": "/example/Rect/styling-using-classes",
+      "path": "/docs/components/Rect/styling-using-classes",
       "lineNumber": 11,
       "line": "<Layer>"
     },
     {
       "example": "styling-using-css-variables",
       "component": "Rect",
-      "path": "/example/Rect/styling-using-css-variables",
+      "path": "/docs/components/Rect/styling-using-css-variables",
       "lineNumber": 11,
       "line": "<Layer>"
     },
     {
       "example": "annotation-x",
       "component": "Rule",
-      "path": "/example/Rule/annotation-x",
+      "path": "/docs/components/Rule/annotation-x",
       "lineNumber": 6,
       "line": "<Layer>"
     },
     {
       "example": "annotation-y",
       "component": "Rule",
-      "path": "/example/Rule/annotation-y",
+      "path": "/docs/components/Rule/annotation-y",
       "lineNumber": 6,
       "line": "<Layer>"
     },
     {
       "example": "baseline-top-right",
       "component": "Rule",
-      "path": "/example/Rule/baseline-top-right",
+      "path": "/docs/components/Rule/baseline-top-right",
       "lineNumber": 6,
       "line": "<Layer>"
     },
     {
       "example": "baseline-x-negative",
       "component": "Rule",
-      "path": "/example/Rule/baseline-x-negative",
+      "path": "/docs/components/Rule/baseline-x-negative",
       "lineNumber": 6,
       "line": "<Layer>"
     },
     {
       "example": "baseline-x-y",
       "component": "Rule",
-      "path": "/example/Rule/baseline-x-y",
+      "path": "/docs/components/Rule/baseline-x-y",
       "lineNumber": 6,
       "line": "<Layer>"
     },
     {
       "example": "baseline-y-negative",
       "component": "Rule",
-      "path": "/example/Rule/baseline-y-negative",
+      "path": "/docs/components/Rule/baseline-y-negative",
       "lineNumber": 6,
       "line": "<Layer>"
     },
     {
       "example": "candlestick",
       "component": "Rule",
-      "path": "/example/Rule/candlestick",
+      "path": "/docs/components/Rule/candlestick",
       "lineNumber": 24,
       "line": "<Layer>"
     },
     {
       "example": "candlestick-open-close-line-color",
       "component": "Rule",
-      "path": "/example/Rule/candlestick-open-close-line-color",
+      "path": "/docs/components/Rule/candlestick-open-close-line-color",
       "lineNumber": 24,
       "line": "<Layer>"
     },
     {
       "example": "candlestick-with-brushing",
       "component": "Rule",
-      "path": "/example/Rule/candlestick-with-brushing",
+      "path": "/docs/components/Rule/candlestick-with-brushing",
       "lineNumber": 32,
       "line": "<Layer>"
     },
     {
       "example": "candlestick-with-brushing",
       "component": "Rule",
-      "path": "/example/Rule/candlestick-with-brushing",
+      "path": "/docs/components/Rule/candlestick-with-brushing",
       "lineNumber": 67,
       "line": "<Layer>"
     },
     {
       "example": "data-x-band",
       "component": "Rule",
-      "path": "/example/Rule/data-x-band",
+      "path": "/docs/components/Rule/data-x-band",
       "lineNumber": 41,
       "line": "<Layer>"
     },
     {
       "example": "data-x-date",
       "component": "Rule",
-      "path": "/example/Rule/data-x-date",
+      "path": "/docs/components/Rule/data-x-date",
       "lineNumber": 11,
       "line": "<Layer>"
     },
     {
       "example": "data-x-range",
       "component": "Rule",
-      "path": "/example/Rule/data-x-range",
+      "path": "/docs/components/Rule/data-x-range",
       "lineNumber": 17,
       "line": "<Layer>"
     },
     {
       "example": "data-y-range",
       "component": "Rule",
-      "path": "/example/Rule/data-y-range",
+      "path": "/docs/components/Rule/data-y-range",
       "lineNumber": 11,
       "line": "<Layer>"
     },
     {
       "example": "lollipop",
       "component": "Rule",
-      "path": "/example/Rule/lollipop",
+      "path": "/docs/components/Rule/lollipop",
       "lineNumber": 21,
       "line": "<Layer>"
     },
     {
       "example": "complex",
       "component": "Sankey",
-      "path": "/example/Sankey/complex",
+      "path": "/docs/components/Sankey/complex",
       "lineNumber": 45,
       "line": "<Layer>"
     },
     {
       "example": "hierarchy",
       "component": "Sankey",
-      "path": "/example/Sankey/hierarchy",
+      "path": "/docs/components/Sankey/hierarchy",
       "lineNumber": 60,
       "line": "<Layer>"
     },
     {
       "example": "node-select",
       "component": "Sankey",
-      "path": "/example/Sankey/node-select",
+      "path": "/docs/components/Sankey/node-select",
       "lineNumber": 13,
       "line": "<Layer>"
     },
     {
       "example": "simple",
       "component": "Sankey",
-      "path": "/example/Sankey/simple",
+      "path": "/docs/components/Sankey/simple",
       "lineNumber": 9,
       "line": "<Layer>"
     },
     {
       "example": "tooltip",
       "component": "Sankey",
-      "path": "/example/Sankey/tooltip",
+      "path": "/docs/components/Sankey/tooltip",
       "lineNumber": 13,
       "line": "<Layer>"
     },
     {
       "example": "custom",
       "component": "ScatterChart",
-      "path": "/example/ScatterChart/custom",
+      "path": "/docs/components/ScatterChart/custom",
       "lineNumber": 12,
       "line": "<Layer>"
     },
     {
       "example": "basic",
       "component": "Spline",
-      "path": "/example/Spline/basic",
+      "path": "/docs/components/Spline/basic",
       "lineNumber": 11,
       "line": "<Layer>"
     },
     {
       "example": "basic-start-and-end-snippets",
       "component": "Spline",
-      "path": "/example/Spline/basic-start-and-end-snippets",
+      "path": "/docs/components/Spline/basic-start-and-end-snippets",
       "lineNumber": 32,
       "line": "<Layer>"
     },
     {
       "example": "draw",
       "component": "Spline",
-      "path": "/example/Spline/draw",
+      "path": "/docs/components/Spline/draw",
       "lineNumber": 32,
       "line": "<Layer>"
     },
     {
       "example": "end-slot-with-draw-with-value",
       "component": "Spline",
-      "path": "/example/Spline/end-slot-with-draw-with-value",
+      "path": "/docs/components/Spline/end-slot-with-draw-with-value",
       "lineNumber": 33,
       "line": "<Layer>"
     },
     {
       "example": "end-snippet-with-draw",
       "component": "Spline",
-      "path": "/example/Spline/end-snippet-with-draw",
+      "path": "/docs/components/Spline/end-snippet-with-draw",
       "lineNumber": 32,
       "line": "<Layer>"
     },
     {
       "example": "gradient-encoding",
       "component": "Spline",
-      "path": "/example/Spline/gradient-encoding",
+      "path": "/docs/components/Spline/gradient-encoding",
       "lineNumber": 19,
       "line": "<Layer>"
     },
     {
       "example": "gradient-threshold",
       "component": "Spline",
-      "path": "/example/Spline/gradient-threshold",
+      "path": "/docs/components/Spline/gradient-threshold",
       "lineNumber": 14,
       "line": "<Layer>"
     },
     {
       "example": "label-using-start-end-snippets",
       "component": "Spline",
-      "path": "/example/Spline/label-using-start-end-snippets",
+      "path": "/docs/components/Spline/label-using-start-end-snippets",
       "lineNumber": 32,
       "line": "<Layer>"
     },
     {
       "example": "markers-arrows",
       "component": "Spline",
-      "path": "/example/Spline/markers-arrows",
+      "path": "/docs/components/Spline/markers-arrows",
       "lineNumber": 32,
       "line": "<Layer>"
     },
     {
       "example": "multiple-series",
       "component": "Spline",
-      "path": "/example/Spline/multiple-series",
+      "path": "/docs/components/Spline/multiple-series",
       "lineNumber": 50,
       "line": "<Layer>"
     },
     {
       "example": "multiple-series-highlight-on-hover",
       "component": "Spline",
-      "path": "/example/Spline/multiple-series-highlight-on-hover",
+      "path": "/docs/components/Spline/multiple-series-highlight-on-hover",
       "lineNumber": 51,
       "line": "<Layer>"
     },
     {
       "example": "multiple-series-using-overrides",
       "component": "Spline",
-      "path": "/example/Spline/multiple-series-using-overrides",
+      "path": "/docs/components/Spline/multiple-series-using-overrides",
       "lineNumber": 28,
       "line": "<Layer>"
     },
     {
       "example": "multiple-series-with-labels",
       "component": "Spline",
-      "path": "/example/Spline/multiple-series-with-labels",
+      "path": "/docs/components/Spline/multiple-series-with-labels",
       "lineNumber": 40,
       "line": "<Layer>"
     },
     {
       "example": "playground",
       "component": "Spline",
-      "path": "/example/Spline/playground",
+      "path": "/docs/components/Spline/playground",
       "lineNumber": 34,
       "line": "<Layer>"
     },
     {
       "example": "radial-line-with-areas",
       "component": "Spline",
-      "path": "/example/Spline/radial-line-with-areas",
+      "path": "/docs/components/Spline/radial-line-with-areas",
       "lineNumber": 22,
       "line": "<Layer center>"
     },
     {
       "example": "radial-multi-year-lines",
       "component": "Spline",
-      "path": "/example/Spline/radial-multi-year-lines",
+      "path": "/docs/components/Spline/radial-multi-year-lines",
       "lineNumber": 28,
       "line": "<Layer center>"
     },
     {
       "example": "radial-radar",
       "component": "Spline",
-      "path": "/example/Spline/radial-radar",
+      "path": "/docs/components/Spline/radial-radar",
       "lineNumber": 30,
       "line": "<Layer center>"
     },
     {
       "example": "tweened",
       "component": "Spline",
-      "path": "/example/Spline/tweened",
+      "path": "/docs/components/Spline/tweened",
       "lineNumber": 32,
       "line": "<Layer>"
     },
     {
       "example": "vertical",
       "component": "Spline",
-      "path": "/example/Spline/vertical",
+      "path": "/docs/components/Spline/vertical",
       "lineNumber": 21,
       "line": "<Layer>"
     },
     {
       "example": "with-labels",
       "component": "Spline",
-      "path": "/example/Spline/with-labels",
+      "path": "/docs/components/Spline/with-labels",
       "lineNumber": 11,
       "line": "<Layer>"
     },
     {
       "example": "with-tooltip-and-highlight",
       "component": "Spline",
-      "path": "/example/Spline/with-tooltip-and-highlight",
+      "path": "/docs/components/Spline/with-tooltip-and-highlight",
       "lineNumber": 20,
       "line": "<Layer>"
     },
     {
       "example": "playground",
       "component": "Text",
-      "path": "/example/Text/playground",
+      "path": "/docs/components/Text/playground",
       "lineNumber": 45,
       "line": "<Layer {type}>"
     },
     {
       "example": "word-wrap-with-explicit-newline",
       "component": "Text",
-      "path": "/example/Text/word-wrap-with-explicit-newline",
+      "path": "/docs/components/Text/word-wrap-with-explicit-newline",
       "lineNumber": 9,
       "line": "<Layer>"
     },
     {
       "example": "anchor-location",
       "component": "Tooltip",
-      "path": "/example/Tooltip/anchor-location",
+      "path": "/docs/components/Tooltip/anchor-location",
       "lineNumber": 36,
       "line": "<Layer>"
     },
     {
       "example": "area",
       "component": "Tooltip",
-      "path": "/example/Tooltip/area",
+      "path": "/docs/components/Tooltip/area",
       "lineNumber": 39,
       "line": "<Layer>"
     },
     {
       "example": "basic",
       "component": "Tooltip",
-      "path": "/example/Tooltip/basic",
+      "path": "/docs/components/Tooltip/basic",
       "lineNumber": 26,
       "line": "<Layer>"
     },
     {
       "example": "color-swatch",
       "component": "Tooltip",
-      "path": "/example/Tooltip/color-swatch",
+      "path": "/docs/components/Tooltip/color-swatch",
       "lineNumber": 26,
       "line": "<Layer>"
     },
     {
       "example": "color-swatch-using-theme",
       "component": "Tooltip",
-      "path": "/example/Tooltip/color-swatch-using-theme",
+      "path": "/docs/components/Tooltip/color-swatch-using-theme",
       "lineNumber": 26,
       "line": "<Layer>"
     },
     {
       "example": "custom-content",
       "component": "Tooltip",
-      "path": "/example/Tooltip/custom-content",
+      "path": "/docs/components/Tooltip/custom-content",
       "lineNumber": 26,
       "line": "<Layer>"
     },
     {
       "example": "data-snapping",
       "component": "Tooltip",
-      "path": "/example/Tooltip/data-snapping",
+      "path": "/docs/components/Tooltip/data-snapping",
       "lineNumber": 26,
       "line": "<Layer>"
     },
     {
       "example": "default-mouse-position-with-offset",
       "component": "Tooltip",
-      "path": "/example/Tooltip/default-mouse-position-with-offset",
+      "path": "/docs/components/Tooltip/default-mouse-position-with-offset",
       "lineNumber": 26,
       "line": "<Layer>"
     },
     {
       "example": "disable-motion",
       "component": "Tooltip",
-      "path": "/example/Tooltip/disable-motion",
+      "path": "/docs/components/Tooltip/disable-motion",
       "lineNumber": 26,
       "line": "<Layer>"
     },
     {
       "example": "duration",
       "component": "Tooltip",
-      "path": "/example/Tooltip/duration",
+      "path": "/docs/components/Tooltip/duration",
       "lineNumber": 50,
       "line": "<Layer>"
     },
     {
       "example": "externally-access-tooltip-data",
       "component": "Tooltip",
-      "path": "/example/Tooltip/externally-access-tooltip-data",
+      "path": "/docs/components/Tooltip/externally-access-tooltip-data",
       "lineNumber": 50,
       "line": "<Layer>"
     },
     {
       "example": "invert-variant",
       "component": "Tooltip",
-      "path": "/example/Tooltip/invert-variant",
+      "path": "/docs/components/Tooltip/invert-variant",
       "lineNumber": 26,
       "line": "<Layer>"
     },
     {
       "example": "multiple-overlapping-bars",
       "component": "Tooltip",
-      "path": "/example/Tooltip/multiple-overlapping-bars",
+      "path": "/docs/components/Tooltip/multiple-overlapping-bars",
       "lineNumber": 47,
       "line": "<Layer>"
     },
     {
       "example": "multiple-overlapping-durations",
       "component": "Tooltip",
-      "path": "/example/Tooltip/multiple-overlapping-durations",
+      "path": "/docs/components/Tooltip/multiple-overlapping-durations",
       "lineNumber": 49,
       "line": "<Layer>"
     },
     {
       "example": "multiple-tooltips-with-fixed-single-axis",
       "component": "Tooltip",
-      "path": "/example/Tooltip/multiple-tooltips-with-fixed-single-axis",
+      "path": "/docs/components/Tooltip/multiple-tooltips-with-fixed-single-axis",
       "lineNumber": 28,
       "line": "<Layer>"
     },
     {
       "example": "multiple-tooltips-with-fixed-single-axis-scaleband",
       "component": "Tooltip",
-      "path": "/example/Tooltip/multiple-tooltips-with-fixed-single-axis-scaleband",
+      "path": "/docs/components/Tooltip/multiple-tooltips-with-fixed-single-axis-scaleband",
       "lineNumber": 31,
       "line": "<Layer>"
     },
     {
       "example": "scatter-plot",
       "component": "Tooltip",
-      "path": "/example/Tooltip/scatter-plot",
+      "path": "/docs/components/Tooltip/scatter-plot",
       "lineNumber": 36,
       "line": "<Layer>"
     },
     {
       "example": "simple-bars",
       "component": "Tooltip",
-      "path": "/example/Tooltip/simple-bars",
+      "path": "/docs/components/Tooltip/simple-bars",
       "lineNumber": 44,
       "line": "<Layer>"
     },
     {
       "example": "single-date-time",
       "component": "Tooltip",
-      "path": "/example/Tooltip/single-date-time",
+      "path": "/docs/components/Tooltip/single-date-time",
       "lineNumber": 39,
       "line": "<Layer>"
     },
     {
       "example": "stacked-area",
       "component": "Tooltip",
-      "path": "/example/Tooltip/stacked-area",
+      "path": "/docs/components/Tooltip/stacked-area",
       "lineNumber": 57,
       "line": "<Layer>"
     },
     {
       "example": "pan-zoom-html-image",
       "component": "TransformContext",
-      "path": "/example/TransformContext/pan-zoom-html-image",
-      "lineNumber": 17,
+      "path": "/docs/components/TransformContext/pan-zoom-html-image",
+      "lineNumber": 18,
       "line": "<Layer type=\"html\">"
     },
     {
       "example": "pan-zoom-svg-image",
       "component": "TransformContext",
-      "path": "/example/TransformContext/pan-zoom-svg-image",
-      "lineNumber": 17,
+      "path": "/docs/components/TransformContext/pan-zoom-svg-image",
+      "lineNumber": 18,
       "line": "<Layer type=\"svg\">"
     },
     {
       "example": "playground",
       "component": "TransformContext",
-      "path": "/example/TransformContext/playground",
-      "lineNumber": 49,
-      "line": "<Layer class=\"overflow-hidden\">"
+      "path": "/docs/components/TransformContext/playground",
+      "lineNumber": 50,
+      "line": "<Layer>"
     },
     {
       "example": "basic",
       "component": "Tree",
-      "path": "/example/Tree/basic",
-      "lineNumber": 69,
+      "path": "/docs/components/Tree/basic",
+      "lineNumber": 70,
       "line": "<Layer>"
     },
     {
       "example": "html-nodes",
       "component": "Tree",
-      "path": "/example/Tree/html-nodes",
-      "lineNumber": 69,
+      "path": "/docs/components/Tree/html-nodes",
+      "lineNumber": 70,
       "line": "<Layer>"
     },
     {
       "example": "html-nodes",
       "component": "Tree",
-      "path": "/example/Tree/html-nodes",
-      "lineNumber": 84,
+      "path": "/docs/components/Tree/html-nodes",
+      "lineNumber": 85,
       "line": "<Layer type=\"html\">"
     },
     {
       "example": "basic",
       "component": "Treemap",
-      "path": "/example/Treemap/basic",
+      "path": "/docs/components/Treemap/basic",
       "lineNumber": 35,
       "line": "<Layer>"
     },
     {
       "example": "complex",
       "component": "Treemap",
-      "path": "/example/Treemap/complex",
+      "path": "/docs/components/Treemap/complex",
       "lineNumber": 73,
       "line": "<Layer>"
     },
     {
       "example": "nested-filter",
       "component": "Treemap",
-      "path": "/example/Treemap/nested-filter",
+      "path": "/docs/components/Treemap/nested-filter",
       "lineNumber": 113,
       "line": "<Layer>"
     },
     {
       "example": "nested-zoom",
       "component": "Treemap",
-      "path": "/example/Treemap/nested-zoom",
+      "path": "/docs/components/Treemap/nested-zoom",
       "lineNumber": 86,
       "line": "<Layer>"
     },
     {
       "example": "playground",
       "component": "Treemap",
-      "path": "/example/Treemap/playground",
+      "path": "/docs/components/Treemap/playground",
       "lineNumber": 119,
       "line": "<Layer>"
     },
     {
       "example": "stacked-zoom",
       "component": "Treemap",
-      "path": "/example/Treemap/stacked-zoom",
+      "path": "/docs/components/Treemap/stacked-zoom",
       "lineNumber": 84,
       "line": "<Layer>"
     },
     {
       "example": "radius",
       "component": "Voronoi",
-      "path": "/example/Voronoi/radius",
+      "path": "/docs/components/Voronoi/radius",
       "lineNumber": 24,
       "line": "<Layer onpointermove={onPointerMove}>"
     }
   ],
-  "updatedAt": "2026-01-25T21:44:18.232Z"
+  "updatedAt": "2026-02-07T20:21:31.918Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Legend.json b/docs/src/examples/catalog/Legend.json
index afb0ce838..f8de52d0a 100644
--- a/docs/src/examples/catalog/Legend.json
+++ b/docs/src/examples/catalog/Legend.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "chart-integration",
-      "path": "/example/Legend/chart-integration",
+      "title": "chart integration",
+      "path": "/docs/components/Legend/chart-integration",
       "components": [
         {
           "component": "Chart",
@@ -19,7 +20,8 @@
     },
     {
       "name": "chart-placement",
-      "path": "/example/Legend/chart-placement",
+      "title": "chart placement",
+      "path": "/docs/components/Legend/chart-placement",
       "components": [
         {
           "component": "Chart",
@@ -35,7 +37,8 @@
     },
     {
       "name": "children-override",
-      "path": "/example/Legend/children-override",
+      "title": "children override",
+      "path": "/docs/components/Legend/children-override",
       "components": [
         {
           "component": "Legend",
@@ -46,7 +49,8 @@
     },
     {
       "name": "click-handler",
-      "path": "/example/Legend/click-handler",
+      "title": "click handler",
+      "path": "/docs/components/Legend/click-handler",
       "components": [
         {
           "component": "Legend",
@@ -57,7 +61,8 @@
     },
     {
       "name": "diverging",
-      "path": "/example/Legend/diverging",
+      "title": "diverging",
+      "path": "/docs/components/Legend/diverging",
       "components": [
         {
           "component": "Legend",
@@ -68,7 +73,8 @@
     },
     {
       "name": "diverging-sqrt",
-      "path": "/example/Legend/diverging-sqrt",
+      "title": "diverging sqrt",
+      "path": "/docs/components/Legend/diverging-sqrt",
       "components": [
         {
           "component": "Legend",
@@ -79,7 +85,8 @@
     },
     {
       "name": "ordinal",
-      "path": "/example/Legend/ordinal",
+      "title": "ordinal",
+      "path": "/docs/components/Legend/ordinal",
       "components": [
         {
           "component": "Legend",
@@ -90,7 +97,8 @@
     },
     {
       "name": "quantile",
-      "path": "/example/Legend/quantile",
+      "title": "quantile",
+      "path": "/docs/components/Legend/quantile",
       "components": [
         {
           "component": "Legend",
@@ -101,7 +109,8 @@
     },
     {
       "name": "quantize",
-      "path": "/example/Legend/quantize",
+      "title": "quantize",
+      "path": "/docs/components/Legend/quantize",
       "components": [
         {
           "component": "Legend",
@@ -112,7 +121,8 @@
     },
     {
       "name": "responsive-swatches",
-      "path": "/example/Legend/responsive-swatches",
+      "title": "responsive swatches",
+      "path": "/docs/components/Legend/responsive-swatches",
       "components": [
         {
           "component": "Legend",
@@ -123,7 +133,8 @@
     },
     {
       "name": "sequential",
-      "path": "/example/Legend/sequential",
+      "title": "sequential",
+      "path": "/docs/components/Legend/sequential",
       "components": [
         {
           "component": "Legend",
@@ -134,7 +145,8 @@
     },
     {
       "name": "sequential-log",
-      "path": "/example/Legend/sequential-log",
+      "title": "sequential log",
+      "path": "/docs/components/Legend/sequential-log",
       "components": [
         {
           "component": "Legend",
@@ -145,7 +157,8 @@
     },
     {
       "name": "sequential-quantile",
-      "path": "/example/Legend/sequential-quantile",
+      "title": "sequential quantile",
+      "path": "/docs/components/Legend/sequential-quantile",
       "components": [
         {
           "component": "Legend",
@@ -156,7 +169,8 @@
     },
     {
       "name": "sequential-sqrt",
-      "path": "/example/Legend/sequential-sqrt",
+      "title": "sequential sqrt",
+      "path": "/docs/components/Legend/sequential-sqrt",
       "components": [
         {
           "component": "Legend",
@@ -167,7 +181,8 @@
     },
     {
       "name": "sqrt",
-      "path": "/example/Legend/sqrt",
+      "title": "sqrt",
+      "path": "/docs/components/Legend/sqrt",
       "components": [
         {
           "component": "Legend",
@@ -178,7 +193,8 @@
     },
     {
       "name": "square-swatch",
-      "path": "/example/Legend/square-swatch",
+      "title": "square swatch",
+      "path": "/docs/components/Legend/square-swatch",
       "components": [
         {
           "component": "Legend",
@@ -189,7 +205,8 @@
     },
     {
       "name": "styling",
-      "path": "/example/Legend/styling",
+      "title": "styling",
+      "path": "/docs/components/Legend/styling",
       "components": [
         {
           "component": "Legend",
@@ -200,7 +217,8 @@
     },
     {
       "name": "threshold",
-      "path": "/example/Legend/threshold",
+      "title": "threshold",
+      "path": "/docs/components/Legend/threshold",
       "components": [
         {
           "component": "Legend",
@@ -211,7 +229,8 @@
     },
     {
       "name": "vertical-orientation",
-      "path": "/example/Legend/vertical-orientation",
+      "title": "vertical orientation",
+      "path": "/docs/components/Legend/vertical-orientation",
       "components": [
         {
           "component": "Legend",
@@ -225,297 +244,297 @@
     {
       "example": "bubble-map",
       "component": "GeoPath",
-      "path": "/example/GeoPath/bubble-map",
+      "path": "/docs/components/GeoPath/bubble-map",
       "lineNumber": 131,
       "line": "<Legend"
     },
     {
       "example": "choropleth",
       "component": "GeoPath",
-      "path": "/example/GeoPath/choropleth",
+      "path": "/docs/components/GeoPath/choropleth",
       "lineNumber": 100,
       "line": "<Legend"
     },
     {
       "example": "eclipses-globe",
       "component": "GeoPath",
-      "path": "/example/GeoPath/eclipses-globe",
+      "path": "/docs/components/GeoPath/eclipses-globe",
       "lineNumber": 78,
       "line": "<Legend scale={colorScale} title=\"Eclipse date\" tickFormat=\"year\" />"
     },
     {
       "example": "chart-integration",
       "component": "Legend",
-      "path": "/example/Legend/chart-integration",
+      "path": "/docs/components/Legend/chart-integration",
       "lineNumber": 13,
       "line": "<Legend title=\"I am Legend\" />"
     },
     {
       "example": "chart-placement",
       "component": "Legend",
-      "path": "/example/Legend/chart-placement",
+      "path": "/docs/components/Legend/chart-placement",
       "lineNumber": 13,
       "line": "<Legend title=\"Top-Left\" placement=\"top-left\" variant=\"swatches\" />"
     },
     {
       "example": "chart-placement",
       "component": "Legend",
-      "path": "/example/Legend/chart-placement",
+      "path": "/docs/components/Legend/chart-placement",
       "lineNumber": 14,
       "line": "<Legend title=\"Top\" placement=\"top\" variant=\"swatches\" />"
     },
     {
       "example": "chart-placement",
       "component": "Legend",
-      "path": "/example/Legend/chart-placement",
+      "path": "/docs/components/Legend/chart-placement",
       "lineNumber": 15,
       "line": "<Legend title=\"Top-Right\" placement=\"top-right\" variant=\"swatches\" />"
     },
     {
       "example": "chart-placement",
       "component": "Legend",
-      "path": "/example/Legend/chart-placement",
+      "path": "/docs/components/Legend/chart-placement",
       "lineNumber": 16,
       "line": "<Legend title=\"Left\" placement=\"left\" variant=\"swatches\" />"
     },
     {
       "example": "chart-placement",
       "component": "Legend",
-      "path": "/example/Legend/chart-placement",
+      "path": "/docs/components/Legend/chart-placement",
       "lineNumber": 17,
       "line": "<Legend title=\"Center\" placement=\"center\" variant=\"swatches\" />"
     },
     {
       "example": "chart-placement",
       "component": "Legend",
-      "path": "/example/Legend/chart-placement",
+      "path": "/docs/components/Legend/chart-placement",
       "lineNumber": 18,
       "line": "<Legend title=\"Right\" placement=\"right\" variant=\"swatches\" />"
     },
     {
       "example": "chart-placement",
       "component": "Legend",
-      "path": "/example/Legend/chart-placement",
+      "path": "/docs/components/Legend/chart-placement",
       "lineNumber": 19,
       "line": "<Legend title=\"Bottom-Left\" placement=\"bottom-left\" variant=\"swatches\" />"
     },
     {
       "example": "chart-placement",
       "component": "Legend",
-      "path": "/example/Legend/chart-placement",
+      "path": "/docs/components/Legend/chart-placement",
       "lineNumber": 20,
       "line": "<Legend title=\"Bottom\" placement=\"bottom\" variant=\"swatches\" />"
     },
     {
       "example": "chart-placement",
       "component": "Legend",
-      "path": "/example/Legend/chart-placement",
+      "path": "/docs/components/Legend/chart-placement",
       "lineNumber": 21,
       "line": "<Legend title=\"Bottom-Right\" placement=\"bottom-right\" variant=\"swatches\" />"
     },
     {
       "example": "children-override",
       "component": "Legend",
-      "path": "/example/Legend/children-override",
+      "path": "/docs/components/Legend/children-override",
       "lineNumber": 7,
       "line": "<Legend"
     },
     {
       "example": "click-handler",
       "component": "Legend",
-      "path": "/example/Legend/click-handler",
+      "path": "/docs/components/Legend/click-handler",
       "lineNumber": 7,
       "line": "<Legend"
     },
     {
       "example": "diverging",
       "component": "Legend",
-      "path": "/example/Legend/diverging",
+      "path": "/docs/components/Legend/diverging",
       "lineNumber": 8,
       "line": "<Legend"
     },
     {
       "example": "diverging",
       "component": "Legend",
-      "path": "/example/Legend/diverging",
+      "path": "/docs/components/Legend/diverging",
       "lineNumber": 13,
       "line": "<Legend"
     },
     {
       "example": "diverging-sqrt",
       "component": "Legend",
-      "path": "/example/Legend/diverging-sqrt",
+      "path": "/docs/components/Legend/diverging-sqrt",
       "lineNumber": 8,
       "line": "<Legend"
     },
     {
       "example": "diverging-sqrt",
       "component": "Legend",
-      "path": "/example/Legend/diverging-sqrt",
+      "path": "/docs/components/Legend/diverging-sqrt",
       "lineNumber": 13,
       "line": "<Legend"
     },
     {
       "example": "ordinal",
       "component": "Legend",
-      "path": "/example/Legend/ordinal",
+      "path": "/docs/components/Legend/ordinal",
       "lineNumber": 8,
       "line": "<Legend"
     },
     {
       "example": "ordinal",
       "component": "Legend",
-      "path": "/example/Legend/ordinal",
+      "path": "/docs/components/Legend/ordinal",
       "lineNumber": 16,
       "line": "<Legend"
     },
     {
       "example": "quantile",
       "component": "Legend",
-      "path": "/example/Legend/quantile",
+      "path": "/docs/components/Legend/quantile",
       "lineNumber": 12,
       "line": "<Legend"
     },
     {
       "example": "quantile",
       "component": "Legend",
-      "path": "/example/Legend/quantile",
+      "path": "/docs/components/Legend/quantile",
       "lineNumber": 18,
       "line": "<!-- <Legend"
     },
     {
       "example": "quantize",
       "component": "Legend",
-      "path": "/example/Legend/quantize",
+      "path": "/docs/components/Legend/quantize",
       "lineNumber": 8,
       "line": "<Legend scale={scaleQuantize([1, 10], schemePurples[9])} title=\"Unemployment rate (%)\" />"
     },
     {
       "example": "quantize",
       "component": "Legend",
-      "path": "/example/Legend/quantize",
+      "path": "/docs/components/Legend/quantize",
       "lineNumber": 10,
       "line": "<!-- <Legend"
     },
     {
       "example": "responsive-swatches",
       "component": "Legend",
-      "path": "/example/Legend/responsive-swatches",
+      "path": "/docs/components/Legend/responsive-swatches",
       "lineNumber": 7,
       "line": "<Legend"
     },
     {
       "example": "sequential",
       "component": "Legend",
-      "path": "/example/Legend/sequential",
+      "path": "/docs/components/Legend/sequential",
       "lineNumber": 8,
       "line": "<Legend scale={scaleSequential([0, 100], interpolateViridis)} title=\"Temperature (°F)\" />"
     },
     {
       "example": "sequential",
       "component": "Legend",
-      "path": "/example/Legend/sequential",
+      "path": "/docs/components/Legend/sequential",
       "lineNumber": 10,
       "line": "<Legend"
     },
     {
       "example": "sequential-log",
       "component": "Legend",
-      "path": "/example/Legend/sequential-log",
+      "path": "/docs/components/Legend/sequential-log",
       "lineNumber": 8,
       "line": "<Legend"
     },
     {
       "example": "sequential-log",
       "component": "Legend",
-      "path": "/example/Legend/sequential-log",
+      "path": "/docs/components/Legend/sequential-log",
       "lineNumber": 14,
       "line": "<!-- <Legend"
     },
     {
       "example": "sequential-quantile",
       "component": "Legend",
-      "path": "/example/Legend/sequential-quantile",
+      "path": "/docs/components/Legend/sequential-quantile",
       "lineNumber": 11,
       "line": "<Legend"
     },
     {
       "example": "sequential-quantile",
       "component": "Legend",
-      "path": "/example/Legend/sequential-quantile",
+      "path": "/docs/components/Legend/sequential-quantile",
       "lineNumber": 16,
       "line": "<Legend"
     },
     {
       "example": "sequential-sqrt",
       "component": "Legend",
-      "path": "/example/Legend/sequential-sqrt",
+      "path": "/docs/components/Legend/sequential-sqrt",
       "lineNumber": 8,
       "line": "<Legend scale={scaleSequentialSqrt([0, 1], interpolateTurbo)} title=\"Speed (kts)\" />"
     },
     {
       "example": "sequential-sqrt",
       "component": "Legend",
-      "path": "/example/Legend/sequential-sqrt",
+      "path": "/docs/components/Legend/sequential-sqrt",
       "lineNumber": 9,
       "line": "<Legend"
     },
     {
       "example": "sqrt",
       "component": "Legend",
-      "path": "/example/Legend/sqrt",
+      "path": "/docs/components/Legend/sqrt",
       "lineNumber": 7,
       "line": "<Legend scale={scaleSqrt([-100, 0, 100], ['blue', 'white', 'red'])} title=\"Temperature (°C)\" />"
     },
     {
       "example": "sqrt",
       "component": "Legend",
-      "path": "/example/Legend/sqrt",
+      "path": "/docs/components/Legend/sqrt",
       "lineNumber": 8,
       "line": "<Legend"
     },
     {
       "example": "square-swatch",
       "component": "Legend",
-      "path": "/example/Legend/square-swatch",
+      "path": "/docs/components/Legend/square-swatch",
       "lineNumber": 8,
       "line": "<Legend"
     },
     {
       "example": "styling",
       "component": "Legend",
-      "path": "/example/Legend/styling",
+      "path": "/docs/components/Legend/styling",
       "lineNumber": 7,
       "line": "<Legend"
     },
     {
       "example": "threshold",
       "component": "Legend",
-      "path": "/example/Legend/threshold",
+      "path": "/docs/components/Legend/threshold",
       "lineNumber": 8,
       "line": "<Legend"
     },
     {
       "example": "threshold",
       "component": "Legend",
-      "path": "/example/Legend/threshold",
+      "path": "/docs/components/Legend/threshold",
       "lineNumber": 14,
       "line": "<!-- <Legend"
     },
     {
       "example": "vertical-orientation",
       "component": "Legend",
-      "path": "/example/Legend/vertical-orientation",
+      "path": "/docs/components/Legend/vertical-orientation",
       "lineNumber": 8,
       "line": "<Legend"
     },
     {
       "example": "gradient-encoding",
       "component": "Spline",
-      "path": "/example/Spline/gradient-encoding",
+      "path": "/docs/components/Spline/gradient-encoding",
       "lineNumber": 28,
       "line": "<Legend"
     }
   ],
-  "updatedAt": "2025-11-23T01:49:02.385Z"
+  "updatedAt": "2026-02-07T20:21:31.935Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Line.json b/docs/src/examples/catalog/Line.json
index c22b08dbb..7edd8844b 100644
--- a/docs/src/examples/catalog/Line.json
+++ b/docs/src/examples/catalog/Line.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "styling-using-attributes",
-      "path": "/example/Line/styling-using-attributes",
+      "title": "styling using attributes",
+      "path": "/docs/components/Line/styling-using-attributes",
       "components": [
         {
           "component": "Chart",
@@ -29,7 +30,8 @@
     },
     {
       "name": "styling-using-classes",
-      "path": "/example/Line/styling-using-classes",
+      "title": "styling using classes",
+      "path": "/docs/components/Line/styling-using-classes",
       "components": [
         {
           "component": "Chart",
@@ -55,7 +57,8 @@
     },
     {
       "name": "styling-using-css-variables",
-      "path": "/example/Line/styling-using-css-variables",
+      "title": "styling using css variables",
+      "path": "/docs/components/Line/styling-using-css-variables",
       "components": [
         {
           "component": "Chart",
@@ -84,136 +87,136 @@
     {
       "example": "markers",
       "component": "AreaChart",
-      "path": "/example/AreaChart/markers",
+      "path": "/docs/components/AreaChart/markers",
       "lineNumber": 29,
       "line": "<Line"
     },
     {
       "example": "styling-using-attributes",
       "component": "Line",
-      "path": "/example/Line/styling-using-attributes",
+      "path": "/docs/components/Line/styling-using-attributes",
       "lineNumber": 14,
       "line": "<Line x1={100} y1={100} x2={200} y2={200} strokeWidth={10} stroke=\"var(--color-primary)\" />"
     },
     {
       "example": "styling-using-attributes",
       "component": "Line",
-      "path": "/example/Line/styling-using-attributes",
+      "path": "/docs/components/Line/styling-using-attributes",
       "lineNumber": 15,
       "line": "<Line x1={50} y1={150} x2={400} y2={150} strokeWidth={2} stroke=\"var(--color-secondary)\" />"
     },
     {
       "example": "styling-using-attributes",
       "component": "Line",
-      "path": "/example/Line/styling-using-attributes",
+      "path": "/docs/components/Line/styling-using-attributes",
       "lineNumber": 16,
       "line": "<Line"
     },
     {
       "example": "styling-using-classes",
       "component": "Line",
-      "path": "/example/Line/styling-using-classes",
+      "path": "/docs/components/Line/styling-using-classes",
       "lineNumber": 14,
       "line": "<Line x1={100} y1={100} x2={200} y2={200} strokeWidth={10} class=\"stroke-primary bg-primary\" />"
     },
     {
       "example": "styling-using-classes",
       "component": "Line",
-      "path": "/example/Line/styling-using-classes",
+      "path": "/docs/components/Line/styling-using-classes",
       "lineNumber": 15,
       "line": "<Line x1={50} y1={150} x2={400} y2={150} class=\"stroke-2 stroke-secondary bg-secondary\" />"
     },
     {
       "example": "styling-using-classes",
       "component": "Line",
-      "path": "/example/Line/styling-using-classes",
+      "path": "/docs/components/Line/styling-using-classes",
       "lineNumber": 16,
       "line": "<Line"
     },
     {
       "example": "styling-using-css-variables",
       "component": "Line",
-      "path": "/example/Line/styling-using-css-variables",
+      "path": "/docs/components/Line/styling-using-css-variables",
       "lineNumber": 14,
       "line": "<Line"
     },
     {
       "example": "styling-using-css-variables",
       "component": "Line",
-      "path": "/example/Line/styling-using-css-variables",
+      "path": "/docs/components/Line/styling-using-css-variables",
       "lineNumber": 22,
       "line": "<Line"
     },
     {
       "example": "styling-using-css-variables",
       "component": "Line",
-      "path": "/example/Line/styling-using-css-variables",
+      "path": "/docs/components/Line/styling-using-css-variables",
       "lineNumber": 30,
       "line": "<Line"
     },
     {
       "example": "line",
       "component": "Marker",
-      "path": "/example/Marker/line",
+      "path": "/docs/components/Marker/line",
       "lineNumber": 32,
       "line": "<Line"
     },
     {
       "example": "lines-custom-pattern-svg-only",
       "component": "Pattern",
-      "path": "/example/Pattern/lines-custom-pattern-svg-only",
+      "path": "/docs/components/Pattern/lines-custom-pattern-svg-only",
       "lineNumber": 9,
       "line": "<line x2=\"100%\" class=\"stroke-surface-content\" />"
     },
     {
       "example": "lines-custom-pattern-svg-only",
       "component": "Pattern",
-      "path": "/example/Pattern/lines-custom-pattern-svg-only",
+      "path": "/docs/components/Pattern/lines-custom-pattern-svg-only",
       "lineNumber": 27,
       "line": "<line y2=\"100%\" class=\"stroke-surface-content\" />"
     },
     {
       "example": "lines-custom-pattern-svg-only",
       "component": "Pattern",
-      "path": "/example/Pattern/lines-custom-pattern-svg-only",
+      "path": "/docs/components/Pattern/lines-custom-pattern-svg-only",
       "lineNumber": 45,
       "line": "<line x2=\"100%\" class=\"stroke-surface-content\" />"
     },
     {
       "example": "lines-custom-pattern-svg-only",
       "component": "Pattern",
-      "path": "/example/Pattern/lines-custom-pattern-svg-only",
+      "path": "/docs/components/Pattern/lines-custom-pattern-svg-only",
       "lineNumber": 46,
       "line": "<line y2=\"100%\" class=\"stroke-surface-content\" />"
     },
     {
       "example": "lines-custom-pattern-svg-only",
       "component": "Pattern",
-      "path": "/example/Pattern/lines-custom-pattern-svg-only",
+      "path": "/docs/components/Pattern/lines-custom-pattern-svg-only",
       "lineNumber": 64,
       "line": "<line x1={8} y2={8} class=\"stroke-surface-content\" />"
     },
     {
       "example": "lines-custom-pattern-svg-only",
       "component": "Pattern",
-      "path": "/example/Pattern/lines-custom-pattern-svg-only",
+      "path": "/docs/components/Pattern/lines-custom-pattern-svg-only",
       "lineNumber": 82,
       "line": "<line x2={8} y2={8} class=\"stroke-surface-content\" />"
     },
     {
       "example": "lines-custom-pattern-svg-only",
       "component": "Pattern",
-      "path": "/example/Pattern/lines-custom-pattern-svg-only",
+      "path": "/docs/components/Pattern/lines-custom-pattern-svg-only",
       "lineNumber": 100,
       "line": "<line x1={8} y2={8} class=\"stroke-surface-content\" />"
     },
     {
       "example": "lines-custom-pattern-svg-only",
       "component": "Pattern",
-      "path": "/example/Pattern/lines-custom-pattern-svg-only",
+      "path": "/docs/components/Pattern/lines-custom-pattern-svg-only",
       "lineNumber": 101,
       "line": "<line x2={8} y2={8} class=\"stroke-surface-content\" />"
     }
   ],
-  "updatedAt": "2025-12-29T21:36:44.963Z"
+  "updatedAt": "2026-02-07T20:21:31.956Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/LineChart.json b/docs/src/examples/catalog/LineChart.json
index 745f97e81..e7754ec76 100644
--- a/docs/src/examples/catalog/LineChart.json
+++ b/docs/src/examples/catalog/LineChart.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "axis-labels-inside",
-      "path": "/example/LineChart/axis-labels-inside",
+      "title": "axis labels inside",
+      "path": "/docs/components/LineChart/axis-labels-inside",
       "components": [
         {
           "component": "LineChart",
@@ -14,7 +15,8 @@
     },
     {
       "name": "basic",
-      "path": "/example/LineChart/basic",
+      "title": "basic",
+      "path": "/docs/components/LineChart/basic",
       "components": [
         {
           "component": "LineChart",
@@ -25,7 +27,8 @@
     },
     {
       "name": "brush",
-      "path": "/example/LineChart/brush",
+      "title": "brush",
+      "path": "/docs/components/LineChart/brush",
       "components": [
         {
           "component": "LineChart",
@@ -36,7 +39,8 @@
     },
     {
       "name": "curve",
-      "path": "/example/LineChart/curve",
+      "title": "curve",
+      "path": "/docs/components/LineChart/curve",
       "components": [
         {
           "component": "LineChart",
@@ -47,7 +51,8 @@
     },
     {
       "name": "custom",
-      "path": "/example/LineChart/custom",
+      "title": "custom",
+      "path": "/docs/components/LineChart/custom",
       "components": [
         {
           "component": "LineChart",
@@ -83,7 +88,8 @@
     },
     {
       "name": "custom-tooltip",
-      "path": "/example/LineChart/custom-tooltip",
+      "title": "custom tooltip",
+      "path": "/docs/components/LineChart/custom-tooltip",
       "components": [
         {
           "component": "LineChart",
@@ -99,7 +105,8 @@
     },
     {
       "name": "default-series-label",
-      "path": "/example/LineChart/default-series-label",
+      "title": "default series label",
+      "path": "/docs/components/LineChart/default-series-label",
       "components": [
         {
           "component": "LineChart",
@@ -110,7 +117,8 @@
     },
     {
       "name": "draw",
-      "path": "/example/LineChart/draw",
+      "title": "draw",
+      "path": "/docs/components/LineChart/draw",
       "components": [
         {
           "component": "LineChart",
@@ -121,7 +129,8 @@
     },
     {
       "name": "dynamic-data",
-      "path": "/example/LineChart/dynamic-data",
+      "title": "dynamic data",
+      "path": "/docs/components/LineChart/dynamic-data",
       "components": [
         {
           "component": "LineChart",
@@ -132,7 +141,8 @@
     },
     {
       "name": "gradient-encoding",
-      "path": "/example/LineChart/gradient-encoding",
+      "title": "gradient encoding",
+      "path": "/docs/components/LineChart/gradient-encoding",
       "components": [
         {
           "component": "LineChart",
@@ -163,7 +173,8 @@
     },
     {
       "name": "gradient-threshold",
-      "path": "/example/LineChart/gradient-threshold",
+      "title": "gradient threshold",
+      "path": "/docs/components/LineChart/gradient-threshold",
       "components": [
         {
           "component": "LineChart",
@@ -194,7 +205,8 @@
     },
     {
       "name": "labels",
-      "path": "/example/LineChart/labels",
+      "title": "labels",
+      "path": "/docs/components/LineChart/labels",
       "components": [
         {
           "component": "LineChart",
@@ -205,7 +217,8 @@
     },
     {
       "name": "labels-with-points",
-      "path": "/example/LineChart/labels-with-points",
+      "title": "labels with points",
+      "path": "/docs/components/LineChart/labels-with-points",
       "components": [
         {
           "component": "LineChart",
@@ -216,7 +229,8 @@
     },
     {
       "name": "labels-within-points",
-      "path": "/example/LineChart/labels-within-points",
+      "title": "labels within points",
+      "path": "/docs/components/LineChart/labels-within-points",
       "components": [
         {
           "component": "LineChart",
@@ -227,7 +241,8 @@
     },
     {
       "name": "large-radial-series",
-      "path": "/example/LineChart/large-radial-series",
+      "title": "large radial series",
+      "path": "/docs/components/LineChart/large-radial-series",
       "components": [
         {
           "component": "LineChart",
@@ -238,7 +253,8 @@
     },
     {
       "name": "large-series",
-      "path": "/example/LineChart/large-series",
+      "title": "large series",
+      "path": "/docs/components/LineChart/large-series",
       "components": [
         {
           "component": "LineChart",
@@ -249,7 +265,8 @@
     },
     {
       "name": "legend",
-      "path": "/example/LineChart/legend",
+      "title": "legend",
+      "path": "/docs/components/LineChart/legend",
       "components": [
         {
           "component": "LineChart",
@@ -260,7 +277,8 @@
     },
     {
       "name": "line-annotation",
-      "path": "/example/LineChart/line-annotation",
+      "title": "line annotation",
+      "path": "/docs/components/LineChart/line-annotation",
       "components": [
         {
           "component": "LineChart",
@@ -271,7 +289,8 @@
     },
     {
       "name": "null-dashed-gaps",
-      "path": "/example/LineChart/null-dashed-gaps",
+      "title": "null dashed gaps",
+      "path": "/docs/components/LineChart/null-dashed-gaps",
       "components": [
         {
           "component": "LineChart",
@@ -287,7 +306,8 @@
     },
     {
       "name": "null-gaps",
-      "path": "/example/LineChart/null-gaps",
+      "title": "null gaps",
+      "path": "/docs/components/LineChart/null-gaps",
       "components": [
         {
           "component": "LineChart",
@@ -298,7 +318,8 @@
     },
     {
       "name": "oscilloscope-time",
-      "path": "/example/LineChart/oscilloscope-time",
+      "title": "oscilloscope time",
+      "path": "/docs/components/LineChart/oscilloscope-time",
       "components": [
         {
           "component": "LineChart",
@@ -329,7 +350,8 @@
     },
     {
       "name": "override-color",
-      "path": "/example/LineChart/override-color",
+      "title": "override color",
+      "path": "/docs/components/LineChart/override-color",
       "components": [
         {
           "component": "LineChart",
@@ -340,7 +362,8 @@
     },
     {
       "name": "perf-dimension-arrays",
-      "path": "/example/LineChart/perf-dimension-arrays",
+      "title": "perf dimension arrays",
+      "path": "/docs/components/LineChart/perf-dimension-arrays",
       "components": [
         {
           "component": "LineChart",
@@ -351,7 +374,8 @@
     },
     {
       "name": "perf-dimension-arrays-processed",
-      "path": "/example/LineChart/perf-dimension-arrays-processed",
+      "title": "perf dimension arrays processed",
+      "path": "/docs/components/LineChart/perf-dimension-arrays-processed",
       "components": [
         {
           "component": "LineChart",
@@ -362,7 +386,8 @@
     },
     {
       "name": "perf-series-arrays",
-      "path": "/example/LineChart/perf-series-arrays",
+      "title": "perf series arrays",
+      "path": "/docs/components/LineChart/perf-series-arrays",
       "components": [
         {
           "component": "LineChart",
@@ -373,7 +398,8 @@
     },
     {
       "name": "perf-streaming",
-      "path": "/example/LineChart/perf-streaming",
+      "title": "perf streaming",
+      "path": "/docs/components/LineChart/perf-streaming",
       "components": [
         {
           "component": "LineChart",
@@ -384,7 +410,8 @@
     },
     {
       "name": "perf-wide-data",
-      "path": "/example/LineChart/perf-wide-data",
+      "title": "perf wide data",
+      "path": "/docs/components/LineChart/perf-wide-data",
       "components": [
         {
           "component": "LineChart",
@@ -395,7 +422,8 @@
     },
     {
       "name": "perf-wide-data-processed",
-      "path": "/example/LineChart/perf-wide-data-processed",
+      "title": "perf wide data processed",
+      "path": "/docs/components/LineChart/perf-wide-data-processed",
       "components": [
         {
           "component": "LineChart",
@@ -406,7 +434,8 @@
     },
     {
       "name": "point-annotations",
-      "path": "/example/LineChart/point-annotations",
+      "title": "point annotations",
+      "path": "/docs/components/LineChart/point-annotations",
       "components": [
         {
           "component": "LineChart",
@@ -422,7 +451,8 @@
     },
     {
       "name": "points",
-      "path": "/example/LineChart/points",
+      "title": "points",
+      "path": "/docs/components/LineChart/points",
       "components": [
         {
           "component": "LineChart",
@@ -433,7 +463,8 @@
     },
     {
       "name": "radar",
-      "path": "/example/LineChart/radar",
+      "title": "radar",
+      "path": "/docs/components/LineChart/radar",
       "components": [
         {
           "component": "LineChart",
@@ -444,7 +475,8 @@
     },
     {
       "name": "radar-rounded",
-      "path": "/example/LineChart/radar-rounded",
+      "title": "radar rounded",
+      "path": "/docs/components/LineChart/radar-rounded",
       "components": [
         {
           "component": "LineChart",
@@ -455,7 +487,8 @@
     },
     {
       "name": "radar-series",
-      "path": "/example/LineChart/radar-series",
+      "title": "radar series",
+      "path": "/docs/components/LineChart/radar-series",
       "components": [
         {
           "component": "LineChart",
@@ -466,7 +499,8 @@
     },
     {
       "name": "range-annotation",
-      "path": "/example/LineChart/range-annotation",
+      "title": "range annotation",
+      "path": "/docs/components/LineChart/range-annotation",
       "components": [
         {
           "component": "LineChart",
@@ -477,7 +511,8 @@
     },
     {
       "name": "series",
-      "path": "/example/LineChart/series",
+      "title": "series",
+      "path": "/docs/components/LineChart/series",
       "components": [
         {
           "component": "LineChart",
@@ -488,7 +523,8 @@
     },
     {
       "name": "series-brush",
-      "path": "/example/LineChart/series-brush",
+      "title": "series brush",
+      "path": "/docs/components/LineChart/series-brush",
       "components": [
         {
           "component": "LineChart",
@@ -499,7 +535,8 @@
     },
     {
       "name": "series-custom-highlight-point",
-      "path": "/example/LineChart/series-custom-highlight-point",
+      "title": "series custom highlight point",
+      "path": "/docs/components/LineChart/series-custom-highlight-point",
       "components": [
         {
           "component": "LineChart",
@@ -510,7 +547,8 @@
     },
     {
       "name": "series-individual-tooltip",
-      "path": "/example/LineChart/series-individual-tooltip",
+      "title": "series individual tooltip",
+      "path": "/docs/components/LineChart/series-individual-tooltip",
       "components": [
         {
           "component": "LineChart",
@@ -536,7 +574,8 @@
     },
     {
       "name": "series-labels-hover",
-      "path": "/example/LineChart/series-labels-hover",
+      "title": "series labels hover",
+      "path": "/docs/components/LineChart/series-labels-hover",
       "components": [
         {
           "component": "LineChart",
@@ -552,7 +591,8 @@
     },
     {
       "name": "series-point-annotations",
-      "path": "/example/LineChart/series-point-annotations",
+      "title": "series point annotations",
+      "path": "/docs/components/LineChart/series-point-annotations",
       "components": [
         {
           "component": "LineChart",
@@ -563,7 +603,8 @@
     },
     {
       "name": "series-point-click",
-      "path": "/example/LineChart/series-point-click",
+      "title": "series point click",
+      "path": "/docs/components/LineChart/series-point-click",
       "components": [
         {
           "component": "LineChart",
@@ -574,7 +615,8 @@
     },
     {
       "name": "series-separate-data",
-      "path": "/example/LineChart/series-separate-data",
+      "title": "series separate data",
+      "path": "/docs/components/LineChart/series-separate-data",
       "components": [
         {
           "component": "LineChart",
@@ -585,7 +627,8 @@
     },
     {
       "name": "series-separate-data-diff-length",
-      "path": "/example/LineChart/series-separate-data-diff-length",
+      "title": "series separate data diff length",
+      "path": "/docs/components/LineChart/series-separate-data-diff-length",
       "components": [
         {
           "component": "LineChart",
@@ -596,7 +639,8 @@
     },
     {
       "name": "series-vertical",
-      "path": "/example/LineChart/series-vertical",
+      "title": "series vertical",
+      "path": "/docs/components/LineChart/series-vertical",
       "components": [
         {
           "component": "LineChart",
@@ -607,7 +651,8 @@
     },
     {
       "name": "series-with-nulls",
-      "path": "/example/LineChart/series-with-nulls",
+      "title": "series with nulls",
+      "path": "/docs/components/LineChart/series-with-nulls",
       "components": [
         {
           "component": "LineChart",
@@ -623,7 +668,8 @@
     },
     {
       "name": "single-axis-x",
-      "path": "/example/LineChart/single-axis-x",
+      "title": "single axis x",
+      "path": "/docs/components/LineChart/single-axis-x",
       "components": [
         {
           "component": "LineChart",
@@ -634,7 +680,8 @@
     },
     {
       "name": "single-axis-y",
-      "path": "/example/LineChart/single-axis-y",
+      "title": "single axis y",
+      "path": "/docs/components/LineChart/single-axis-y",
       "components": [
         {
           "component": "LineChart",
@@ -645,7 +692,8 @@
     },
     {
       "name": "sparkline",
-      "path": "/example/LineChart/sparkline",
+      "title": "sparkline",
+      "path": "/docs/components/LineChart/sparkline",
       "components": [
         {
           "component": "LineChart",
@@ -656,7 +704,8 @@
     },
     {
       "name": "sparkline-fixed-position-tooltip",
-      "path": "/example/LineChart/sparkline-fixed-position-tooltip",
+      "title": "sparkline fixed position tooltip",
+      "path": "/docs/components/LineChart/sparkline-fixed-position-tooltip",
       "components": [
         {
           "component": "LineChart",
@@ -672,7 +721,8 @@
     },
     {
       "name": "sparkline-within-a-paragraph",
-      "path": "/example/LineChart/sparkline-within-a-paragraph",
+      "title": "sparkline within a paragraph",
+      "path": "/docs/components/LineChart/sparkline-within-a-paragraph",
       "components": [
         {
           "component": "LineChart",
@@ -683,7 +733,8 @@
     },
     {
       "name": "sparkline-within-a-paragraph-with-tooltip-and-highlight",
-      "path": "/example/LineChart/sparkline-within-a-paragraph-with-tooltip-and-highlight",
+      "title": "sparkline within a paragraph with tooltip and highlight",
+      "path": "/docs/components/LineChart/sparkline-within-a-paragraph-with-tooltip-and-highlight",
       "components": [
         {
           "component": "LineChart",
@@ -699,7 +750,8 @@
     },
     {
       "name": "sparkline-zero-axis",
-      "path": "/example/LineChart/sparkline-zero-axis",
+      "title": "sparkline zero axis",
+      "path": "/docs/components/LineChart/sparkline-zero-axis",
       "components": [
         {
           "component": "LineChart",
@@ -710,7 +762,8 @@
     },
     {
       "name": "tooltip-click",
-      "path": "/example/LineChart/tooltip-click",
+      "title": "tooltip click",
+      "path": "/docs/components/LineChart/tooltip-click",
       "components": [
         {
           "component": "LineChart",
@@ -721,7 +774,8 @@
     },
     {
       "name": "vertical",
-      "path": "/example/LineChart/vertical",
+      "title": "vertical",
+      "path": "/docs/components/LineChart/vertical",
       "components": [
         {
           "component": "LineChart",
@@ -735,570 +789,577 @@
     {
       "example": "horizontal",
       "component": "AnnotationLine",
-      "path": "/example/AnnotationLine/horizontal",
+      "path": "/docs/components/AnnotationLine/horizontal",
       "lineNumber": 14,
       "line": "<LineChart {data} x=\"date\" y=\"value\" height={300} padding={{ top: 10, bottom: 20, left: 25 }}>"
     },
     {
       "example": "horizontal-placement",
       "component": "AnnotationLine",
-      "path": "/example/AnnotationLine/horizontal-placement",
+      "path": "/docs/components/AnnotationLine/horizontal-placement",
       "lineNumber": 17,
       "line": "<LineChart {data} x=\"date\" y=\"value\" height={300} padding={{ top: 10, bottom: 20, left: 25 }}>"
     },
     {
       "example": "horizontal-with-range",
       "component": "AnnotationLine",
-      "path": "/example/AnnotationLine/horizontal-with-range",
+      "path": "/docs/components/AnnotationLine/horizontal-with-range",
       "lineNumber": 10,
       "line": "<LineChart {data} x=\"date\" y=\"value\" height={300} padding={{ top: 10, bottom: 20, left: 25 }}>"
     },
     {
       "example": "vertical",
       "component": "AnnotationLine",
-      "path": "/example/AnnotationLine/vertical",
+      "path": "/docs/components/AnnotationLine/vertical",
       "lineNumber": 10,
       "line": "<LineChart {data} x=\"date\" y=\"value\" height={300} padding={{ top: 10, bottom: 20, left: 25 }}>"
     },
     {
       "example": "vertical-placement",
       "component": "AnnotationLine",
-      "path": "/example/AnnotationLine/vertical-placement",
+      "path": "/docs/components/AnnotationLine/vertical-placement",
       "lineNumber": 17,
       "line": "<LineChart {data} x=\"date\" y=\"value\" height={300} padding={{ top: 10, bottom: 20, left: 25 }}>"
     },
     {
       "example": "vertical-with-rotation",
       "component": "AnnotationLine",
-      "path": "/example/AnnotationLine/vertical-with-rotation",
+      "path": "/docs/components/AnnotationLine/vertical-with-rotation",
       "lineNumber": 10,
       "line": "<LineChart {data} x=\"date\" y=\"value\" height={300} padding={{ top: 10, bottom: 20, left: 25 }}>"
     },
     {
       "example": "label-placement",
       "component": "AnnotationPoint",
-      "path": "/example/AnnotationPoint/label-placement",
+      "path": "/docs/components/AnnotationPoint/label-placement",
       "lineNumber": 30,
       "line": "<LineChart {data} x=\"date\" y=\"value\" height={300} padding={{ left: 25, bottom: 15 }}>"
     },
     {
       "example": "line-to-point",
       "component": "AnnotationPoint",
-      "path": "/example/AnnotationPoint/line-to-point",
+      "path": "/docs/components/AnnotationPoint/line-to-point",
       "lineNumber": 56,
       "line": "<LineChart {data} x=\"date\" y=\"value\" height={300} padding={{ top: 10, bottom: 20, left: 25 }}>"
     },
     {
       "example": "on-axis-with-tooltip",
       "component": "AnnotationPoint",
-      "path": "/example/AnnotationPoint/on-axis-with-tooltip",
+      "path": "/docs/components/AnnotationPoint/on-axis-with-tooltip",
       "lineNumber": 25,
       "line": "<LineChart {data} x=\"date\" y=\"value\" height={300} padding={{ left: 25, bottom: 15 }}>"
     },
     {
       "example": "on-series-with-line-and-tooltip",
       "component": "AnnotationPoint",
-      "path": "/example/AnnotationPoint/on-series-with-line-and-tooltip",
+      "path": "/docs/components/AnnotationPoint/on-series-with-line-and-tooltip",
       "lineNumber": 25,
       "line": "<LineChart {data} x=\"date\" y=\"value\" height={300} padding={{ left: 25, bottom: 15 }}>"
     },
     {
       "example": "on-series-with-tooltip",
       "component": "AnnotationPoint",
-      "path": "/example/AnnotationPoint/on-series-with-tooltip",
+      "path": "/docs/components/AnnotationPoint/on-series-with-tooltip",
       "lineNumber": 25,
       "line": "<LineChart {data} x=\"date\" y=\"value\" height={300} padding={{ left: 25, bottom: 15 }}>"
     },
     {
       "example": "series-annotation",
       "component": "AnnotationPoint",
-      "path": "/example/AnnotationPoint/series-annotation",
+      "path": "/docs/components/AnnotationPoint/series-annotation",
       "lineNumber": 10,
       "line": "<LineChart"
     },
     {
       "example": "hide-tooltip",
       "component": "AnnotationRange",
-      "path": "/example/AnnotationRange/hide-tooltip",
+      "path": "/docs/components/AnnotationRange/hide-tooltip",
       "lineNumber": 10,
       "line": "<LineChart"
     },
     {
       "example": "horizontal-with-fill-multiple",
       "component": "AnnotationRange",
-      "path": "/example/AnnotationRange/horizontal-with-fill-multiple",
+      "path": "/docs/components/AnnotationRange/horizontal-with-fill-multiple",
       "lineNumber": 10,
       "line": "<LineChart"
     },
     {
       "example": "horizontal-with-pattern-lower-bound",
       "component": "AnnotationRange",
-      "path": "/example/AnnotationRange/horizontal-with-pattern-lower-bound",
+      "path": "/docs/components/AnnotationRange/horizontal-with-pattern-lower-bound",
       "lineNumber": 10,
       "line": "<LineChart"
     },
     {
       "example": "horizontal-with-pattern-range",
       "component": "AnnotationRange",
-      "path": "/example/AnnotationRange/horizontal-with-pattern-range",
+      "path": "/docs/components/AnnotationRange/horizontal-with-pattern-range",
       "lineNumber": 10,
       "line": "<LineChart"
     },
     {
       "example": "horizontal-with-pattern-upper-bound",
       "component": "AnnotationRange",
-      "path": "/example/AnnotationRange/horizontal-with-pattern-upper-bound",
+      "path": "/docs/components/AnnotationRange/horizontal-with-pattern-upper-bound",
       "lineNumber": 10,
       "line": "<LineChart"
     },
     {
       "example": "label-placement",
       "component": "AnnotationRange",
-      "path": "/example/AnnotationRange/label-placement",
+      "path": "/docs/components/AnnotationRange/label-placement",
       "lineNumber": 29,
       "line": "<LineChart"
     },
     {
       "example": "vertical-with-gradient-range",
       "component": "AnnotationRange",
-      "path": "/example/AnnotationRange/vertical-with-gradient-range",
+      "path": "/docs/components/AnnotationRange/vertical-with-gradient-range",
       "lineNumber": 10,
       "line": "<LineChart"
     },
     {
       "example": "vertical-with-pattern-lower-bound",
       "component": "AnnotationRange",
-      "path": "/example/AnnotationRange/vertical-with-pattern-lower-bound",
+      "path": "/docs/components/AnnotationRange/vertical-with-pattern-lower-bound",
       "lineNumber": 10,
       "line": "<LineChart"
     },
     {
       "example": "vertical-with-pattern-range",
       "component": "AnnotationRange",
-      "path": "/example/AnnotationRange/vertical-with-pattern-range",
+      "path": "/docs/components/AnnotationRange/vertical-with-pattern-range",
       "lineNumber": 10,
       "line": "<LineChart"
     },
     {
       "example": "vertical-with-pattern-upper-bound",
       "component": "AnnotationRange",
-      "path": "/example/AnnotationRange/vertical-with-pattern-upper-bound",
+      "path": "/docs/components/AnnotationRange/vertical-with-pattern-upper-bound",
       "lineNumber": 10,
       "line": "<LineChart"
     },
+    {
+      "example": "linechart-tickspacing",
+      "component": "Axis",
+      "path": "/docs/components/Axis/linechart-tickspacing",
+      "lineNumber": 18,
+      "line": "<LineChart"
+    },
     {
       "example": "axis-labels-inside",
       "component": "LineChart",
-      "path": "/example/LineChart/axis-labels-inside",
+      "path": "/docs/components/LineChart/axis-labels-inside",
       "lineNumber": 9,
       "line": "<LineChart"
     },
     {
       "example": "basic",
       "component": "LineChart",
-      "path": "/example/LineChart/basic",
+      "path": "/docs/components/LineChart/basic",
       "lineNumber": 9,
       "line": "<LineChart {data} x=\"date\" y=\"value\" padding={defaultChartPadding({ right: 10 })} height={300} />"
     },
     {
       "example": "brush",
       "component": "LineChart",
-      "path": "/example/LineChart/brush",
+      "path": "/docs/components/LineChart/brush",
       "lineNumber": 9,
       "line": "<LineChart"
     },
     {
       "example": "curve",
       "component": "LineChart",
-      "path": "/example/LineChart/curve",
+      "path": "/docs/components/LineChart/curve",
       "lineNumber": 10,
       "line": "<LineChart"
     },
     {
       "example": "custom",
       "component": "LineChart",
-      "path": "/example/LineChart/custom",
+      "path": "/docs/components/LineChart/custom",
       "lineNumber": 18,
       "line": "<LineChart {data} x=\"date\" y=\"value\" padding={defaultChartPadding({ right: 10 })} height={300}>"
     },
     {
       "example": "custom-tooltip",
       "component": "LineChart",
-      "path": "/example/LineChart/custom-tooltip",
+      "path": "/docs/components/LineChart/custom-tooltip",
       "lineNumber": 10,
       "line": "<LineChart {data} x=\"date\" y=\"value\" padding={defaultChartPadding({ right: 10 })} height={300}>"
     },
     {
       "example": "default-series-label",
       "component": "LineChart",
-      "path": "/example/LineChart/default-series-label",
+      "path": "/docs/components/LineChart/default-series-label",
       "lineNumber": 14,
       "line": "<LineChart {data} x=\"date\" y=\"visits\" padding={defaultChartPadding({ right: 10 })} height={300} />"
     },
     {
       "example": "draw",
       "component": "LineChart",
-      "path": "/example/LineChart/draw",
+      "path": "/docs/components/LineChart/draw",
       "lineNumber": 17,
       "line": "<LineChart"
     },
     {
       "example": "dynamic-data",
       "component": "LineChart",
-      "path": "/example/LineChart/dynamic-data",
+      "path": "/docs/components/LineChart/dynamic-data",
       "lineNumber": 17,
       "line": "<LineChart"
     },
     {
       "example": "gradient-encoding",
       "component": "LineChart",
-      "path": "/example/LineChart/gradient-encoding",
+      "path": "/docs/components/LineChart/gradient-encoding",
       "lineNumber": 17,
       "line": "<LineChart {data} x=\"date\" y=\"value\" yDomain={null} height={300}>"
     },
     {
       "example": "gradient-threshold",
       "component": "LineChart",
-      "path": "/example/LineChart/gradient-threshold",
+      "path": "/docs/components/LineChart/gradient-threshold",
       "lineNumber": 10,
       "line": "<LineChart {data} x=\"date\" y=\"value\" yDomain={null} height={300}>"
     },
     {
       "example": "labels",
       "component": "LineChart",
-      "path": "/example/LineChart/labels",
+      "path": "/docs/components/LineChart/labels",
       "lineNumber": 9,
       "line": "<LineChart"
     },
     {
       "example": "labels-with-points",
       "component": "LineChart",
-      "path": "/example/LineChart/labels-with-points",
+      "path": "/docs/components/LineChart/labels-with-points",
       "lineNumber": 9,
       "line": "<LineChart"
     },
     {
       "example": "labels-within-points",
       "component": "LineChart",
-      "path": "/example/LineChart/labels-within-points",
+      "path": "/docs/components/LineChart/labels-within-points",
       "lineNumber": 9,
       "line": "<LineChart"
     },
     {
       "example": "large-radial-series",
       "component": "LineChart",
-      "path": "/example/LineChart/large-radial-series",
+      "path": "/docs/components/LineChart/large-radial-series",
       "lineNumber": 10,
       "line": "<LineChart"
     },
     {
       "example": "large-series",
       "component": "LineChart",
-      "path": "/example/LineChart/large-series",
+      "path": "/docs/components/LineChart/large-series",
       "lineNumber": 10,
       "line": "<LineChart"
     },
     {
       "example": "legend",
       "component": "LineChart",
-      "path": "/example/LineChart/legend",
+      "path": "/docs/components/LineChart/legend",
       "lineNumber": 15,
       "line": "<LineChart"
     },
     {
       "example": "line-annotation",
       "component": "LineChart",
-      "path": "/example/LineChart/line-annotation",
+      "path": "/docs/components/LineChart/line-annotation",
       "lineNumber": 9,
       "line": "<LineChart"
     },
     {
       "example": "null-dashed-gaps",
       "component": "LineChart",
-      "path": "/example/LineChart/null-dashed-gaps",
+      "path": "/docs/components/LineChart/null-dashed-gaps",
       "lineNumber": 14,
       "line": "<LineChart {data} x=\"date\" y=\"value\" padding={defaultChartPadding({ right: 10 })} height={300}>"
     },
     {
       "example": "null-gaps",
       "component": "LineChart",
-      "path": "/example/LineChart/null-gaps",
+      "path": "/docs/components/LineChart/null-gaps",
       "lineNumber": 14,
       "line": "<LineChart"
     },
     {
       "example": "oscilloscope-time",
       "component": "LineChart",
-      "path": "/example/LineChart/oscilloscope-time",
+      "path": "/docs/components/LineChart/oscilloscope-time",
       "lineNumber": 102,
       "line": "<LineChart {data} x=\"key\" y=\"value\" yDomain={[-256, 512]} axis=\"y\" grid={false} height={200}>"
     },
     {
       "example": "override-color",
       "component": "LineChart",
-      "path": "/example/LineChart/override-color",
+      "path": "/docs/components/LineChart/override-color",
       "lineNumber": 14,
       "line": "<LineChart"
     },
     {
       "example": "perf-dimension-arrays",
       "component": "LineChart",
-      "path": "/example/LineChart/perf-dimension-arrays",
+      "path": "/docs/components/LineChart/perf-dimension-arrays",
       "lineNumber": 53,
       "line": "<LineChart"
     },
     {
       "example": "perf-dimension-arrays",
       "component": "LineChart",
-      "path": "/example/LineChart/perf-dimension-arrays",
+      "path": "/docs/components/LineChart/perf-dimension-arrays",
       "lineNumber": 74,
       "line": "<LineChart"
     },
     {
       "example": "perf-dimension-arrays-processed",
       "component": "LineChart",
-      "path": "/example/LineChart/perf-dimension-arrays-processed",
+      "path": "/docs/components/LineChart/perf-dimension-arrays-processed",
       "lineNumber": 59,
       "line": "<LineChart"
     },
     {
       "example": "perf-dimension-arrays-processed",
       "component": "LineChart",
-      "path": "/example/LineChart/perf-dimension-arrays-processed",
+      "path": "/docs/components/LineChart/perf-dimension-arrays-processed",
       "lineNumber": 72,
       "line": "<LineChart"
     },
     {
       "example": "perf-series-arrays",
       "component": "LineChart",
-      "path": "/example/LineChart/perf-series-arrays",
+      "path": "/docs/components/LineChart/perf-series-arrays",
       "lineNumber": 52,
       "line": "<LineChart data={data.cpu} x=\"x\" y=\"y\" props={chartProps} brush profile />"
     },
     {
       "example": "perf-series-arrays",
       "component": "LineChart",
-      "path": "/example/LineChart/perf-series-arrays",
+      "path": "/docs/components/LineChart/perf-series-arrays",
       "lineNumber": 58,
       "line": "<LineChart"
     },
     {
       "example": "perf-streaming",
       "component": "LineChart",
-      "path": "/example/LineChart/perf-streaming",
+      "path": "/docs/components/LineChart/perf-streaming",
       "lineNumber": 131,
       "line": "<LineChart x=\"date\" y=\"value\" data={chartData} brush />"
     },
     {
       "example": "perf-wide-data",
       "component": "LineChart",
-      "path": "/example/LineChart/perf-wide-data",
+      "path": "/docs/components/LineChart/perf-wide-data",
       "lineNumber": 52,
       "line": "<LineChart {data} x=\"epoch\" y={(d) => 100 - d.idl} props={chartProps} brush profile />"
     },
     {
       "example": "perf-wide-data",
       "component": "LineChart",
-      "path": "/example/LineChart/perf-wide-data",
+      "path": "/docs/components/LineChart/perf-wide-data",
       "lineNumber": 58,
       "line": "<LineChart"
     },
     {
       "example": "perf-wide-data-processed",
       "component": "LineChart",
-      "path": "/example/LineChart/perf-wide-data-processed",
+      "path": "/docs/components/LineChart/perf-wide-data-processed",
       "lineNumber": 59,
       "line": "<LineChart data={chartData} x=\"date\" y=\"cpu\" props={chartProps} brush profile />"
     },
     {
       "example": "perf-wide-data-processed",
       "component": "LineChart",
-      "path": "/example/LineChart/perf-wide-data-processed",
+      "path": "/docs/components/LineChart/perf-wide-data-processed",
       "lineNumber": 65,
       "line": "<LineChart"
     },
     {
       "example": "point-annotations",
       "component": "LineChart",
-      "path": "/example/LineChart/point-annotations",
+      "path": "/docs/components/LineChart/point-annotations",
       "lineNumber": 23,
       "line": "<LineChart"
     },
     {
       "example": "points",
       "component": "LineChart",
-      "path": "/example/LineChart/points",
+      "path": "/docs/components/LineChart/points",
       "lineNumber": 9,
       "line": "<LineChart"
     },
     {
       "example": "radar",
       "component": "LineChart",
-      "path": "/example/LineChart/radar",
+      "path": "/docs/components/LineChart/radar",
       "lineNumber": 15,
       "line": "<LineChart"
     },
     {
       "example": "radar-rounded",
       "component": "LineChart",
-      "path": "/example/LineChart/radar-rounded",
+      "path": "/docs/components/LineChart/radar-rounded",
       "lineNumber": 15,
       "line": "<LineChart"
     },
     {
       "example": "radar-series",
       "component": "LineChart",
-      "path": "/example/LineChart/radar-series",
+      "path": "/docs/components/LineChart/radar-series",
       "lineNumber": 40,
       "line": "<LineChart"
     },
     {
       "example": "range-annotation",
       "component": "LineChart",
-      "path": "/example/LineChart/range-annotation",
+      "path": "/docs/components/LineChart/range-annotation",
       "lineNumber": 9,
       "line": "<LineChart"
     },
     {
       "example": "series",
       "component": "LineChart",
-      "path": "/example/LineChart/series",
+      "path": "/docs/components/LineChart/series",
       "lineNumber": 15,
       "line": "<LineChart"
     },
     {
       "example": "series-brush",
       "component": "LineChart",
-      "path": "/example/LineChart/series-brush",
+      "path": "/docs/components/LineChart/series-brush",
       "lineNumber": 15,
       "line": "<LineChart"
     },
     {
       "example": "series-custom-highlight-point",
       "component": "LineChart",
-      "path": "/example/LineChart/series-custom-highlight-point",
+      "path": "/docs/components/LineChart/series-custom-highlight-point",
       "lineNumber": 15,
       "line": "<LineChart"
     },
     {
       "example": "series-individual-tooltip",
       "component": "LineChart",
-      "path": "/example/LineChart/series-individual-tooltip",
+      "path": "/docs/components/LineChart/series-individual-tooltip",
       "lineNumber": 29,
       "line": "<LineChart"
     },
     {
       "example": "series-labels-hover",
       "component": "LineChart",
-      "path": "/example/LineChart/series-labels-hover",
+      "path": "/docs/components/LineChart/series-labels-hover",
       "lineNumber": 15,
       "line": "<LineChart"
     },
     {
       "example": "series-point-annotations",
       "component": "LineChart",
-      "path": "/example/LineChart/series-point-annotations",
+      "path": "/docs/components/LineChart/series-point-annotations",
       "lineNumber": 38,
       "line": "<LineChart"
     },
     {
       "example": "series-point-click",
       "component": "LineChart",
-      "path": "/example/LineChart/series-point-click",
+      "path": "/docs/components/LineChart/series-point-click",
       "lineNumber": 15,
       "line": "<LineChart"
     },
     {
       "example": "series-separate-data",
       "component": "LineChart",
-      "path": "/example/LineChart/series-separate-data",
+      "path": "/docs/components/LineChart/series-separate-data",
       "lineNumber": 20,
       "line": "<LineChart"
     },
     {
       "example": "series-separate-data-diff-length",
       "component": "LineChart",
-      "path": "/example/LineChart/series-separate-data-diff-length",
+      "path": "/docs/components/LineChart/series-separate-data-diff-length",
       "lineNumber": 20,
       "line": "<LineChart"
     },
     {
       "example": "series-vertical",
       "component": "LineChart",
-      "path": "/example/LineChart/series-vertical",
+      "path": "/docs/components/LineChart/series-vertical",
       "lineNumber": 16,
       "line": "<LineChart"
     },
     {
       "example": "series-with-nulls",
       "component": "LineChart",
-      "path": "/example/LineChart/series-with-nulls",
+      "path": "/docs/components/LineChart/series-with-nulls",
       "lineNumber": 24,
       "line": "<LineChart"
     },
     {
       "example": "single-axis-x",
       "component": "LineChart",
-      "path": "/example/LineChart/single-axis-x",
+      "path": "/docs/components/LineChart/single-axis-x",
       "lineNumber": 9,
       "line": "<LineChart"
     },
     {
       "example": "single-axis-y",
       "component": "LineChart",
-      "path": "/example/LineChart/single-axis-y",
+      "path": "/docs/components/LineChart/single-axis-y",
       "lineNumber": 9,
       "line": "<LineChart"
     },
     {
       "example": "sparkline",
       "component": "LineChart",
-      "path": "/example/LineChart/sparkline",
+      "path": "/docs/components/LineChart/sparkline",
       "lineNumber": 9,
       "line": "<LineChart"
     },
     {
       "example": "sparkline-fixed-position-tooltip",
       "component": "LineChart",
-      "path": "/example/LineChart/sparkline-fixed-position-tooltip",
+      "path": "/docs/components/LineChart/sparkline-fixed-position-tooltip",
       "lineNumber": 10,
       "line": "<LineChart"
     },
     {
       "example": "sparkline-within-a-paragraph",
       "component": "LineChart",
-      "path": "/example/LineChart/sparkline-within-a-paragraph",
+      "path": "/docs/components/LineChart/sparkline-within-a-paragraph",
       "lineNumber": 12,
       "line": "<LineChart"
     },
     {
       "example": "sparkline-within-a-paragraph-with-tooltip-and-highlight",
       "component": "LineChart",
-      "path": "/example/LineChart/sparkline-within-a-paragraph-with-tooltip-and-highlight",
+      "path": "/docs/components/LineChart/sparkline-within-a-paragraph-with-tooltip-and-highlight",
       "lineNumber": 14,
       "line": "<LineChart"
     },
     {
       "example": "sparkline-zero-axis",
       "component": "LineChart",
-      "path": "/example/LineChart/sparkline-zero-axis",
+      "path": "/docs/components/LineChart/sparkline-zero-axis",
       "lineNumber": 9,
       "line": "<LineChart"
     },
     {
       "example": "tooltip-click",
       "component": "LineChart",
-      "path": "/example/LineChart/tooltip-click",
+      "path": "/docs/components/LineChart/tooltip-click",
       "lineNumber": 9,
       "line": "<LineChart"
     },
     {
       "example": "vertical",
       "component": "LineChart",
-      "path": "/example/LineChart/vertical",
+      "path": "/docs/components/LineChart/vertical",
       "lineNumber": 10,
       "line": "<LineChart {data} x=\"value\" y=\"date\" orientation=\"vertical\" width={400} height={600} />"
     }
   ],
-  "updatedAt": "2026-01-06T13:02:21.616Z"
+  "updatedAt": "2026-02-07T20:21:31.979Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/LinearGradient.json b/docs/src/examples/catalog/LinearGradient.json
index d092e300e..b497ec244 100644
--- a/docs/src/examples/catalog/LinearGradient.json
+++ b/docs/src/examples/catalog/LinearGradient.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "direction-with-custom-colors",
-      "path": "/example/LinearGradient/direction-with-custom-colors",
+      "title": "direction with custom colors",
+      "path": "/docs/components/LinearGradient/direction-with-custom-colors",
       "components": [
         {
           "component": "Chart",
@@ -29,7 +30,8 @@
     },
     {
       "name": "explicit-offsets",
-      "path": "/example/LinearGradient/explicit-offsets",
+      "title": "explicit offsets",
+      "path": "/docs/components/LinearGradient/explicit-offsets",
       "components": [
         {
           "component": "Chart",
@@ -55,7 +57,8 @@
     },
     {
       "name": "tailwind-colors",
-      "path": "/example/LinearGradient/tailwind-colors",
+      "title": "tailwind colors",
+      "path": "/docs/components/LinearGradient/tailwind-colors",
       "components": [
         {
           "component": "Chart",
@@ -81,7 +84,8 @@
     },
     {
       "name": "units",
-      "path": "/example/LinearGradient/units",
+      "title": "units",
+      "path": "/docs/components/LinearGradient/units",
       "components": [
         {
           "component": "Chart",
@@ -110,430 +114,430 @@
     {
       "example": "label-direction",
       "component": "Arc",
-      "path": "/example/Arc/label-direction",
+      "path": "/docs/components/Arc/label-direction",
       "lineNumber": 55,
       "line": "<LinearGradient class=\"from-secondary to-primary\" vertical>"
     },
     {
       "example": "partial-arc",
       "component": "Arc",
-      "path": "/example/Arc/partial-arc",
+      "path": "/docs/components/Arc/partial-arc",
       "lineNumber": 15,
       "line": "<LinearGradient class=\"from-secondary to-primary\">"
     },
     {
       "example": "playground",
       "component": "Arc",
-      "path": "/example/Arc/playground",
+      "path": "/docs/components/Arc/playground",
       "lineNumber": 28,
       "line": "<LinearGradient class=\"from-secondary to-primary\" vertical>"
     },
     {
       "example": "gradient-with-text",
       "component": "ArcChart",
-      "path": "/example/ArcChart/gradient-with-text",
+      "path": "/docs/components/ArcChart/gradient-with-text",
       "lineNumber": 7,
       "line": "<LinearGradient class=\"from-secondary to-primary\">"
     },
     {
       "example": "clipped-area-on-tooltip",
       "component": "Area",
-      "path": "/example/Area/clipped-area-on-tooltip",
+      "path": "/docs/components/Area/clipped-area-on-tooltip",
       "lineNumber": 32,
       "line": "<LinearGradient class=\"from-primary/50 to-primary/1\" vertical>"
     },
     {
       "example": "gradient",
       "component": "Area",
-      "path": "/example/Area/gradient",
+      "path": "/docs/components/Area/gradient",
       "lineNumber": 14,
       "line": "<LinearGradient class=\"from-primary/50 to-primary/1\" vertical>"
     },
     {
       "example": "gradient-separate-stroke",
       "component": "Area",
-      "path": "/example/Area/gradient-separate-stroke",
+      "path": "/docs/components/Area/gradient-separate-stroke",
       "lineNumber": 14,
       "line": "<LinearGradient class=\"from-secondary/1 to-secondary\">"
     },
     {
       "example": "gradient-separate-stroke",
       "component": "Area",
-      "path": "/example/Area/gradient-separate-stroke",
+      "path": "/docs/components/Area/gradient-separate-stroke",
       "lineNumber": 16,
       "line": "<LinearGradient class=\"from-primary/50 to-primary/1\" vertical>"
     },
     {
       "example": "stack-with-gradient",
       "component": "Area",
-      "path": "/example/Area/stack-with-gradient",
+      "path": "/docs/components/Area/stack-with-gradient",
       "lineNumber": 54,
       "line": "<LinearGradient stops={[primaryColor, secondaryColor]} vertical>"
     },
     {
       "example": "threshold-with-lineargradient",
       "component": "Area",
-      "path": "/example/Area/threshold-with-lineargradient",
+      "path": "/docs/components/Area/threshold-with-lineargradient",
       "lineNumber": 24,
       "line": "<LinearGradient"
     },
     {
       "example": "threshold-with-lineargradient-over-under",
       "component": "Area",
-      "path": "/example/Area/threshold-with-lineargradient-over-under",
+      "path": "/docs/components/Area/threshold-with-lineargradient-over-under",
       "lineNumber": 24,
       "line": "<LinearGradient"
     },
     {
       "example": "funnel",
       "component": "AreaChart",
-      "path": "/example/AreaChart/funnel",
+      "path": "/docs/components/AreaChart/funnel",
       "lineNumber": 68,
       "line": "<LinearGradient class=\"from-primary/50 to-secondary/10\">"
     },
     {
       "example": "gradient",
       "component": "AreaChart",
-      "path": "/example/AreaChart/gradient",
+      "path": "/docs/components/AreaChart/gradient",
       "lineNumber": 11,
       "line": "<LinearGradient class=\"from-primary/50 to-primary/1\" vertical>"
     },
     {
       "example": "series-stack-gradient",
       "component": "AreaChart",
-      "path": "/example/AreaChart/series-stack-gradient",
+      "path": "/docs/components/AreaChart/series-stack-gradient",
       "lineNumber": 36,
       "line": "<LinearGradient"
     },
     {
       "example": "threshold-gradient",
       "component": "AreaChart",
-      "path": "/example/AreaChart/threshold-gradient",
+      "path": "/docs/components/AreaChart/threshold-gradient",
       "lineNumber": 27,
       "line": "<LinearGradient"
     },
     {
       "example": "gradient",
       "component": "BarChart",
-      "path": "/example/BarChart/gradient",
+      "path": "/docs/components/BarChart/gradient",
       "lineNumber": 18,
       "line": "<LinearGradient class=\"from-blue-500 to-green-400\" vertical units=\"userSpaceOnUse\">"
     },
     {
       "example": "oscilloscope-frequency",
       "component": "BarChart",
-      "path": "/example/BarChart/oscilloscope-frequency",
+      "path": "/docs/components/BarChart/oscilloscope-frequency",
       "lineNumber": 113,
       "line": "<LinearGradient"
     },
     {
       "example": "horizontal-gradient",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-gradient",
+      "path": "/docs/components/Bars/horizontal-gradient",
       "lineNumber": 30,
       "line": "<LinearGradient class=\"from-green-400 to-blue-500\" units=\"userSpaceOnUse\">"
     },
     {
       "example": "vertical-gradient",
       "component": "Bars",
-      "path": "/example/Bars/vertical-gradient",
+      "path": "/docs/components/Bars/vertical-gradient",
       "lineNumber": 23,
       "line": "<LinearGradient class=\"from-blue-500 to-green-400\" vertical units=\"userSpaceOnUse\">"
     },
     {
       "example": "integrated-brush-(both-axis-area)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/integrated-brush-(both-axis-area)",
+      "path": "/docs/components/BrushContext/integrated-brush-(both-axis-area)",
       "lineNumber": 42,
       "line": "<LinearGradient class=\"from-primary/50 to-primary/1\" vertical>"
     },
     {
       "example": "integrated-brush-(x-axis)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/integrated-brush-(x-axis)",
+      "path": "/docs/components/BrushContext/integrated-brush-(x-axis)",
       "lineNumber": 39,
       "line": "<LinearGradient class=\"from-primary/50 to-primary/1\" vertical>"
     },
     {
       "example": "integrated-brush-(y-axis)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/integrated-brush-(y-axis)",
+      "path": "/docs/components/BrushContext/integrated-brush-(y-axis)",
       "lineNumber": 39,
       "line": "<LinearGradient class=\"from-primary/50 to-primary/1\" vertical>"
     },
     {
       "example": "separate-chart-(clip-data-y-axis)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/separate-chart-(clip-data-y-axis)",
+      "path": "/docs/components/BrushContext/separate-chart-(clip-data-y-axis)",
       "lineNumber": 45,
       "line": "<LinearGradient class=\"from-primary/50 to-primary/1\" vertical>"
     },
     {
       "example": "separate-chart-(clip-data)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/separate-chart-(clip-data)",
+      "path": "/docs/components/BrushContext/separate-chart-(clip-data)",
       "lineNumber": 33,
       "line": "<LinearGradient class=\"from-primary/50 to-primary/1\" vertical>"
     },
     {
       "example": "separate-chart-(filter-data)",
       "component": "BrushContext",
-      "path": "/example/BrushContext/separate-chart-(filter-data)",
+      "path": "/docs/components/BrushContext/separate-chart-(filter-data)",
       "lineNumber": 34,
       "line": "<LinearGradient class=\"from-primary/50 to-primary/1\" vertical>"
     },
     {
       "example": "sync-brushes-with-bind-xdomain",
       "component": "BrushContext",
-      "path": "/example/BrushContext/sync-brushes-with-bind-xdomain",
+      "path": "/docs/components/BrushContext/sync-brushes-with-bind-xdomain",
       "lineNumber": 69,
       "line": "<LinearGradient"
     },
     {
       "example": "tooltip-interop",
       "component": "BrushContext",
-      "path": "/example/BrushContext/tooltip-interop",
+      "path": "/docs/components/BrushContext/tooltip-interop",
       "lineNumber": 44,
       "line": "<LinearGradient class=\"from-primary/50 to-primary/1\" vertical>"
     },
     {
       "example": "gradient",
       "component": "Frame",
-      "path": "/example/Frame/gradient",
+      "path": "/docs/components/Frame/gradient",
       "lineNumber": 12,
       "line": "<LinearGradient class=\"from-primary/10 to-secondary/10\" vertical>"
     },
     {
       "example": "direction-with-custom-colors",
       "component": "LinearGradient",
-      "path": "/example/LinearGradient/direction-with-custom-colors",
+      "path": "/docs/components/LinearGradient/direction-with-custom-colors",
       "lineNumber": 7,
       "line": "<LinearGradient stops={['hsl(60 100% 50%)', 'hsl(30 100% 40%)']}>"
     },
     {
       "example": "direction-with-custom-colors",
       "component": "LinearGradient",
-      "path": "/example/LinearGradient/direction-with-custom-colors",
+      "path": "/docs/components/LinearGradient/direction-with-custom-colors",
       "lineNumber": 13,
       "line": "<LinearGradient stops={['hsl(60 100% 50%)', 'hsl(140 100% 40%)']} rotate={45}>"
     },
     {
       "example": "direction-with-custom-colors",
       "component": "LinearGradient",
-      "path": "/example/LinearGradient/direction-with-custom-colors",
+      "path": "/docs/components/LinearGradient/direction-with-custom-colors",
       "lineNumber": 19,
       "line": "<LinearGradient stops={['hsl(195 100% 50%)', 'hsl(270 100% 30%)']} vertical>"
     },
     {
       "example": "explicit-offsets",
       "component": "LinearGradient",
-      "path": "/example/LinearGradient/explicit-offsets",
+      "path": "/docs/components/LinearGradient/explicit-offsets",
       "lineNumber": 7,
       "line": "<LinearGradient"
     },
     {
       "example": "explicit-offsets",
       "component": "LinearGradient",
-      "path": "/example/LinearGradient/explicit-offsets",
+      "path": "/docs/components/LinearGradient/explicit-offsets",
       "lineNumber": 18,
       "line": "<LinearGradient"
     },
     {
       "example": "explicit-offsets",
       "component": "LinearGradient",
-      "path": "/example/LinearGradient/explicit-offsets",
+      "path": "/docs/components/LinearGradient/explicit-offsets",
       "lineNumber": 30,
       "line": "<LinearGradient"
     },
     {
       "example": "tailwind-colors",
       "component": "LinearGradient",
-      "path": "/example/LinearGradient/tailwind-colors",
+      "path": "/docs/components/LinearGradient/tailwind-colors",
       "lineNumber": 8,
       "line": "<LinearGradient class=\"from-pink-500 to-yellow-500\" vertical>"
     },
     {
       "example": "tailwind-colors",
       "component": "LinearGradient",
-      "path": "/example/LinearGradient/tailwind-colors",
+      "path": "/docs/components/LinearGradient/tailwind-colors",
       "lineNumber": 14,
       "line": "<LinearGradient class=\"from-green-300 to-purple-600\" vertical>"
     },
     {
       "example": "tailwind-colors",
       "component": "LinearGradient",
-      "path": "/example/LinearGradient/tailwind-colors",
+      "path": "/docs/components/LinearGradient/tailwind-colors",
       "lineNumber": 20,
       "line": "<LinearGradient class=\"from-gray-600 to-black\" vertical>"
     },
     {
       "example": "tailwind-colors",
       "component": "LinearGradient",
-      "path": "/example/LinearGradient/tailwind-colors",
+      "path": "/docs/components/LinearGradient/tailwind-colors",
       "lineNumber": 26,
       "line": "<LinearGradient class=\"from-pink-300 to-indigo-400\" vertical>"
     },
     {
       "example": "tailwind-colors",
       "component": "LinearGradient",
-      "path": "/example/LinearGradient/tailwind-colors",
+      "path": "/docs/components/LinearGradient/tailwind-colors",
       "lineNumber": 32,
       "line": "<LinearGradient class=\"from-yellow-100 to-yellow-500\" vertical>"
     },
     {
       "example": "tailwind-colors",
       "component": "LinearGradient",
-      "path": "/example/LinearGradient/tailwind-colors",
+      "path": "/docs/components/LinearGradient/tailwind-colors",
       "lineNumber": 38,
       "line": "<LinearGradient class=\"from-blue-700 to-gray-900\" vertical>"
     },
     {
       "example": "tailwind-colors",
       "component": "LinearGradient",
-      "path": "/example/LinearGradient/tailwind-colors",
+      "path": "/docs/components/LinearGradient/tailwind-colors",
       "lineNumber": 44,
       "line": "<LinearGradient class=\"from-sky-300 to-blue-500\" vertical>"
     },
     {
       "example": "tailwind-colors",
       "component": "LinearGradient",
-      "path": "/example/LinearGradient/tailwind-colors",
+      "path": "/docs/components/LinearGradient/tailwind-colors",
       "lineNumber": 50,
       "line": "<LinearGradient class=\"from-red-500 to-red-800\" vertical>"
     },
     {
       "example": "tailwind-colors",
       "component": "LinearGradient",
-      "path": "/example/LinearGradient/tailwind-colors",
+      "path": "/docs/components/LinearGradient/tailwind-colors",
       "lineNumber": 56,
       "line": "<LinearGradient class=\"from-blue-400 to-emerald-400\" vertical>"
     },
     {
       "example": "units",
       "component": "LinearGradient",
-      "path": "/example/LinearGradient/units",
+      "path": "/docs/components/LinearGradient/units",
       "lineNumber": 8,
       "line": "<LinearGradient class=\"from-green-500 to-blue-500\" units=\"objectBoundingBox\">"
     },
     {
       "example": "units",
       "component": "LinearGradient",
-      "path": "/example/LinearGradient/units",
+      "path": "/docs/components/LinearGradient/units",
       "lineNumber": 16,
       "line": "<LinearGradient class=\"from-green-500 to-blue-500\" units=\"userSpaceOnUse\">"
     },
     {
       "example": "gradient-encoding",
       "component": "LineChart",
-      "path": "/example/LineChart/gradient-encoding",
+      "path": "/docs/components/LineChart/gradient-encoding",
       "lineNumber": 19,
       "line": "<LinearGradient stops={ticks(1, 0, 10).map(temperatureColor.interpolator())} vertical>"
     },
     {
       "example": "gradient-threshold",
       "component": "LineChart",
-      "path": "/example/LineChart/gradient-threshold",
+      "path": "/docs/components/LineChart/gradient-threshold",
       "lineNumber": 14,
       "line": "<LinearGradient"
     },
     {
       "example": "oscilloscope-time",
       "component": "LineChart",
-      "path": "/example/LineChart/oscilloscope-time",
+      "path": "/docs/components/LineChart/oscilloscope-time",
       "lineNumber": 104,
       "line": "<LinearGradient stops={ticks(1, 0, 10).map(valueColor.interpolator())} vertical>"
     },
     {
       "example": "lineargradient-as-pattern",
       "component": "Pattern",
-      "path": "/example/Pattern/lineargradient-as-pattern",
+      "path": "/docs/components/Pattern/lineargradient-as-pattern",
       "lineNumber": 7,
       "line": "<LinearGradient stops={['hsl(60 100% 50%)', 'hsl(30 100% 40%)']}>"
     },
     {
       "example": "lineargradient-as-pattern",
       "component": "Pattern",
-      "path": "/example/Pattern/lineargradient-as-pattern",
+      "path": "/docs/components/Pattern/lineargradient-as-pattern",
       "lineNumber": 17,
       "line": "<LinearGradient stops={['hsl(60 100% 50%)', 'hsl(140 100% 40%)']} rotate={45}>"
     },
     {
       "example": "lineargradient-as-pattern",
       "component": "Pattern",
-      "path": "/example/Pattern/lineargradient-as-pattern",
+      "path": "/docs/components/Pattern/lineargradient-as-pattern",
       "lineNumber": 27,
       "line": "<LinearGradient stops={['hsl(195 100% 50%)', 'hsl(270 100% 30%)']} vertical>"
     },
     {
       "example": "lineargradient-as-pattern",
       "component": "Pattern",
-      "path": "/example/Pattern/lineargradient-as-pattern",
+      "path": "/docs/components/Pattern/lineargradient-as-pattern",
       "lineNumber": 37,
       "line": "<LinearGradient stops={['hsl(60 100% 50%)', 'hsl(30 100% 40%)']}>"
     },
     {
       "example": "lineargradient-as-pattern",
       "component": "Pattern",
-      "path": "/example/Pattern/lineargradient-as-pattern",
+      "path": "/docs/components/Pattern/lineargradient-as-pattern",
       "lineNumber": 47,
       "line": "<LinearGradient stops={['hsl(60 100% 50%)', 'hsl(140 100% 40%)']} rotate={45}>"
     },
     {
       "example": "with-lineargradient",
       "component": "Pattern",
-      "path": "/example/Pattern/with-lineargradient",
+      "path": "/docs/components/Pattern/with-lineargradient",
       "lineNumber": 7,
       "line": "<LinearGradient stops={['hsl(60 100% 50%)', 'hsl(30 100% 40%)']}>"
     },
     {
       "example": "with-lineargradient",
       "component": "Pattern",
-      "path": "/example/Pattern/with-lineargradient",
+      "path": "/docs/components/Pattern/with-lineargradient",
       "lineNumber": 19,
       "line": "<LinearGradient stops={['hsl(60 100% 50%)', 'hsl(140 100% 40%)']} rotate={45}>"
     },
     {
       "example": "with-lineargradient",
       "component": "Pattern",
-      "path": "/example/Pattern/with-lineargradient",
+      "path": "/docs/components/Pattern/with-lineargradient",
       "lineNumber": 31,
       "line": "<LinearGradient stops={['hsl(195 100% 50%)', 'hsl(270 100% 30%)']} vertical>"
     },
     {
       "example": "with-lineargradient",
       "component": "Pattern",
-      "path": "/example/Pattern/with-lineargradient",
+      "path": "/docs/components/Pattern/with-lineargradient",
       "lineNumber": 43,
       "line": "<LinearGradient stops={['hsl(60 100% 50%)', 'hsl(30 100% 40%)']}>"
     },
     {
       "example": "with-lineargradient",
       "component": "Pattern",
-      "path": "/example/Pattern/with-lineargradient",
+      "path": "/docs/components/Pattern/with-lineargradient",
       "lineNumber": 55,
       "line": "<LinearGradient stops={['hsl(60 100% 50%)', 'hsl(140 100% 40%)']} rotate={45}>"
     },
     {
       "example": "with-lineargradient",
       "component": "Pattern",
-      "path": "/example/Pattern/with-lineargradient",
+      "path": "/docs/components/Pattern/with-lineargradient",
       "lineNumber": 67,
       "line": "<LinearGradient stops={['hsl(195 100% 50%)', 'hsl(270 100% 30%)']} vertical>"
     },
     {
       "example": "gradient-encoding",
       "component": "Spline",
-      "path": "/example/Spline/gradient-encoding",
+      "path": "/docs/components/Spline/gradient-encoding",
       "lineNumber": 22,
       "line": "<LinearGradient stops={ticks(1, 0, 10).map(temperatureColor.interpolator())} vertical>"
     },
     {
       "example": "gradient-threshold",
       "component": "Spline",
-      "path": "/example/Spline/gradient-threshold",
+      "path": "/docs/components/Spline/gradient-threshold",
       "lineNumber": 17,
       "line": "<LinearGradient"
     }
   ],
-  "updatedAt": "2026-01-13T17:22:23.945Z"
+  "updatedAt": "2026-02-07T20:21:31.997Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Link.json b/docs/src/examples/catalog/Link.json
index 000a25fb6..f2e8feb56 100644
--- a/docs/src/examples/catalog/Link.json
+++ b/docs/src/examples/catalog/Link.json
@@ -5,87 +5,87 @@
     {
       "example": "disjoint-graph",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/disjoint-graph",
+      "path": "/docs/components/ForceSimulation/disjoint-graph",
       "lineNumber": 66,
       "line": "<Link"
     },
     {
       "example": "graph-drag",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/graph-drag",
+      "path": "/docs/components/ForceSimulation/graph-drag",
       "lineNumber": 81,
       "line": "<Link"
     },
     {
       "example": "graph-playground",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/graph-playground",
+      "path": "/docs/components/ForceSimulation/graph-playground",
       "lineNumber": 168,
       "line": "<Link"
     },
     {
       "example": "lattice",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/lattice",
+      "path": "/docs/components/ForceSimulation/lattice",
       "lineNumber": 37,
       "line": "<Link"
     },
     {
       "example": "tree",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/tree",
+      "path": "/docs/components/ForceSimulation/tree",
       "lineNumber": 47,
       "line": "<Link data={link} explicitCoords={linkPositions[i]} class=\"stroke-surface-content/20\" />"
     },
     {
       "example": "complex",
       "component": "Sankey",
-      "path": "/example/Sankey/complex",
+      "path": "/docs/components/Sankey/complex",
       "lineNumber": 61,
       "line": "<Link"
     },
     {
       "example": "hierarchy",
       "component": "Sankey",
-      "path": "/example/Sankey/hierarchy",
+      "path": "/docs/components/Sankey/hierarchy",
       "lineNumber": 76,
       "line": "<Link"
     },
     {
       "example": "node-select",
       "component": "Sankey",
-      "path": "/example/Sankey/node-select",
+      "path": "/docs/components/Sankey/node-select",
       "lineNumber": 17,
       "line": "<Link"
     },
     {
       "example": "simple",
       "component": "Sankey",
-      "path": "/example/Sankey/simple",
+      "path": "/docs/components/Sankey/simple",
       "lineNumber": 13,
       "line": "<Link sankey data={link} strokeWidth={link.width} class=\"stroke-surface-content/10\" />"
     },
     {
       "example": "tooltip",
       "component": "Sankey",
-      "path": "/example/Sankey/tooltip",
+      "path": "/docs/components/Sankey/tooltip",
       "lineNumber": 17,
       "line": "<Link"
     },
     {
       "example": "basic",
       "component": "Tree",
-      "path": "/example/Tree/basic",
-      "lineNumber": 71,
+      "path": "/docs/components/Tree/basic",
+      "lineNumber": 72,
       "line": "<Link"
     },
     {
       "example": "html-nodes",
       "component": "Tree",
-      "path": "/example/Tree/html-nodes",
-      "lineNumber": 71,
+      "path": "/docs/components/Tree/html-nodes",
+      "lineNumber": 72,
       "line": "<Link"
     }
   ],
-  "updatedAt": "2025-11-23T01:49:02.453Z"
+  "updatedAt": "2026-02-07T17:00:32.106Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Marker.json b/docs/src/examples/catalog/Marker.json
index 29afe751c..96dcf8e55 100644
--- a/docs/src/examples/catalog/Marker.json
+++ b/docs/src/examples/catalog/Marker.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "line",
-      "path": "/example/Marker/line",
+      "title": "line",
+      "path": "/docs/components/Marker/line",
       "components": [
         {
           "component": "Chart",
@@ -24,7 +25,8 @@
     },
     {
       "name": "orientation",
-      "path": "/example/Marker/orientation",
+      "title": "orientation",
+      "path": "/docs/components/Marker/orientation",
       "components": [
         {
           "component": "Chart",
@@ -45,7 +47,8 @@
     },
     {
       "name": "spline",
-      "path": "/example/Marker/spline",
+      "title": "spline",
+      "path": "/docs/components/Marker/spline",
       "components": [
         {
           "component": "Chart",
@@ -66,7 +69,8 @@
     },
     {
       "name": "spline-w-thicker-stroke",
-      "path": "/example/Marker/spline-w-thicker-stroke",
+      "title": "spline w thicker stroke",
+      "path": "/docs/components/Marker/spline-w-thicker-stroke",
       "components": [
         {
           "component": "Chart",
@@ -87,7 +91,8 @@
     },
     {
       "name": "styling",
-      "path": "/example/Marker/styling",
+      "title": "styling",
+      "path": "/docs/components/Marker/styling",
       "components": [
         {
           "component": "Chart",
@@ -108,5 +113,5 @@
     }
   ],
   "usage": [],
-  "updatedAt": "2025-12-29T21:36:45.031Z"
+  "updatedAt": "2026-02-07T20:21:32.026Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/MotionPath.json b/docs/src/examples/catalog/MotionPath.json
index 3d7628908..569fd4706 100644
--- a/docs/src/examples/catalog/MotionPath.json
+++ b/docs/src/examples/catalog/MotionPath.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "repeat-indefinitely",
-      "path": "/example/MotionPath/repeat-indefinitely",
+      "title": "repeat indefinitely",
+      "path": "/docs/components/MotionPath/repeat-indefinitely",
       "components": [
         {
           "component": "Chart",
@@ -39,7 +40,8 @@
     },
     {
       "name": "rotate-object-with-path",
-      "path": "/example/MotionPath/rotate-object-with-path",
+      "title": "rotate object with path",
+      "path": "/docs/components/MotionPath/rotate-object-with-path",
       "components": [
         {
           "component": "Chart",
@@ -75,7 +77,8 @@
     },
     {
       "name": "sync-with-draw",
-      "path": "/example/MotionPath/sync-with-draw",
+      "title": "sync with draw",
+      "path": "/docs/components/MotionPath/sync-with-draw",
       "components": [
         {
           "component": "Chart",
@@ -114,24 +117,24 @@
     {
       "example": "repeat-indefinitely",
       "component": "MotionPath",
-      "path": "/example/MotionPath/repeat-indefinitely",
+      "path": "/docs/components/MotionPath/repeat-indefinitely",
       "lineNumber": 41,
       "line": "<MotionPath"
     },
     {
       "example": "rotate-object-with-path",
       "component": "MotionPath",
-      "path": "/example/MotionPath/rotate-object-with-path",
+      "path": "/docs/components/MotionPath/rotate-object-with-path",
       "lineNumber": 42,
       "line": "<MotionPath"
     },
     {
       "example": "sync-with-draw",
       "component": "MotionPath",
-      "path": "/example/MotionPath/sync-with-draw",
+      "path": "/docs/components/MotionPath/sync-with-draw",
       "lineNumber": 43,
       "line": "<MotionPath"
     }
   ],
-  "updatedAt": "2025-11-23T01:49:02.516Z"
+  "updatedAt": "2026-02-07T20:21:32.070Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Pack.json b/docs/src/examples/catalog/Pack.json
index 35dc981f9..f8dacc3ed 100644
--- a/docs/src/examples/catalog/Pack.json
+++ b/docs/src/examples/catalog/Pack.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "basic",
-      "path": "/example/Pack/basic",
+      "title": "basic",
+      "path": "/docs/components/Pack/basic",
       "components": [
         {
           "component": "Chart",
@@ -42,10 +43,10 @@
     {
       "example": "basic",
       "component": "Pack",
-      "path": "/example/Pack/basic",
+      "path": "/docs/components/Pack/basic",
       "lineNumber": 107,
       "line": "<Pack {padding} hierarchy={complexHierarchy} bind:nodes>"
     }
   ],
-  "updatedAt": "2025-11-12T16:58:10.529Z"
+  "updatedAt": "2026-02-07T20:21:32.084Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Partition.json b/docs/src/examples/catalog/Partition.json
index fdf38b0f4..3ac545d68 100644
--- a/docs/src/examples/catalog/Partition.json
+++ b/docs/src/examples/catalog/Partition.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "filterable",
-      "path": "/example/Partition/filterable",
+      "title": "filterable",
+      "path": "/docs/components/Partition/filterable",
       "components": [
         {
           "component": "Chart",
@@ -54,7 +55,8 @@
     },
     {
       "name": "horizontal",
-      "path": "/example/Partition/horizontal",
+      "title": "horizontal",
+      "path": "/docs/components/Partition/horizontal",
       "components": [
         {
           "component": "Chart",
@@ -105,7 +107,8 @@
     },
     {
       "name": "sunburst",
-      "path": "/example/Partition/sunburst",
+      "title": "sunburst",
+      "path": "/docs/components/Partition/sunburst",
       "components": [
         {
           "component": "Chart",
@@ -141,7 +144,8 @@
     },
     {
       "name": "vertical",
-      "path": "/example/Partition/vertical",
+      "title": "vertical",
+      "path": "/docs/components/Partition/vertical",
       "components": [
         {
           "component": "Chart",
@@ -195,31 +199,31 @@
     {
       "example": "filterable",
       "component": "Partition",
-      "path": "/example/Partition/filterable",
+      "path": "/docs/components/Partition/filterable",
       "lineNumber": 110,
       "line": "<Partition bind:nodes {hierarchy} {padding} {round}>"
     },
     {
       "example": "horizontal",
       "component": "Partition",
-      "path": "/example/Partition/horizontal",
+      "path": "/docs/components/Partition/horizontal",
       "lineNumber": 97,
       "line": "<Partition {padding} {round} {hierarchy} bind:nodes>"
     },
     {
       "example": "sunburst",
       "component": "Partition",
-      "path": "/example/Partition/sunburst",
+      "path": "/docs/components/Partition/sunburst",
       "lineNumber": 76,
       "line": "<Partition hierarchy={complexHierarchy} size={[1, 1]}>"
     },
     {
       "example": "vertical",
       "component": "Partition",
-      "path": "/example/Partition/vertical",
+      "path": "/docs/components/Partition/vertical",
       "lineNumber": 98,
       "line": "<Partition {hierarchy} bind:nodes orientation=\"vertical\" {padding} {round}>"
     }
   ],
-  "updatedAt": "2025-11-23T01:49:02.548Z"
+  "updatedAt": "2026-02-07T20:21:32.100Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Path.json b/docs/src/examples/catalog/Path.json
index 73f4001f7..8d1b89e4b 100644
--- a/docs/src/examples/catalog/Path.json
+++ b/docs/src/examples/catalog/Path.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "basic",
-      "path": "/example/Path/basic",
+      "title": "basic",
+      "path": "/docs/components/Path/basic",
       "components": [
         {
           "component": "Chart",
@@ -27,10 +28,10 @@
     {
       "example": "basic",
       "component": "Path",
-      "path": "/example/Path/basic",
+      "path": "/docs/components/Path/basic",
       "lineNumber": 7,
       "line": "<Path pathData=\"M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80\" strokeWidth={2} />"
     }
   ],
-  "updatedAt": "2026-01-25T20:58:12.648Z"
+  "updatedAt": "2026-02-07T20:21:32.112Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Pattern.json b/docs/src/examples/catalog/Pattern.json
index bb0ee7898..43bcdc446 100644
--- a/docs/src/examples/catalog/Pattern.json
+++ b/docs/src/examples/catalog/Pattern.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "circles",
-      "path": "/example/Pattern/circles",
+      "title": "circles",
+      "path": "/docs/components/Pattern/circles",
       "components": [
         {
           "component": "Chart",
@@ -29,7 +30,8 @@
     },
     {
       "name": "circles-custom-pattern-svg-only",
-      "path": "/example/Pattern/circles-custom-pattern-svg-only",
+      "title": "circles custom pattern svg only",
+      "path": "/docs/components/Pattern/circles-custom-pattern-svg-only",
       "components": [
         {
           "component": "Chart",
@@ -60,7 +62,8 @@
     },
     {
       "name": "lineargradient-as-pattern",
-      "path": "/example/Pattern/lineargradient-as-pattern",
+      "title": "lineargradient as pattern",
+      "path": "/docs/components/Pattern/lineargradient-as-pattern",
       "components": [
         {
           "component": "Chart",
@@ -91,7 +94,8 @@
     },
     {
       "name": "lines",
-      "path": "/example/Pattern/lines",
+      "title": "lines",
+      "path": "/docs/components/Pattern/lines",
       "components": [
         {
           "component": "Chart",
@@ -117,7 +121,8 @@
     },
     {
       "name": "lines-custom-pattern-svg-only",
-      "path": "/example/Pattern/lines-custom-pattern-svg-only",
+      "title": "lines custom pattern svg only",
+      "path": "/docs/components/Pattern/lines-custom-pattern-svg-only",
       "components": [
         {
           "component": "Chart",
@@ -148,7 +153,8 @@
     },
     {
       "name": "with-fill-color",
-      "path": "/example/Pattern/with-fill-color",
+      "title": "with fill color",
+      "path": "/docs/components/Pattern/with-fill-color",
       "components": [
         {
           "component": "Chart",
@@ -174,7 +180,8 @@
     },
     {
       "name": "with-lineargradient",
-      "path": "/example/Pattern/with-lineargradient",
+      "title": "with lineargradient",
+      "path": "/docs/components/Pattern/with-lineargradient",
       "components": [
         {
           "component": "Chart",
@@ -208,304 +215,304 @@
     {
       "example": "horizontal-highlight-individual-bar",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-highlight-individual-bar",
+      "path": "/docs/components/Bars/horizontal-highlight-individual-bar",
       "lineNumber": 30,
       "line": "<Pattern"
     },
     {
       "example": "vertical-highlight-individual-bar",
       "component": "Bars",
-      "path": "/example/Bars/vertical-highlight-individual-bar",
+      "path": "/docs/components/Bars/vertical-highlight-individual-bar",
       "lineNumber": 27,
       "line": "<Pattern"
     },
     {
       "example": "circles",
       "component": "Pattern",
-      "path": "/example/Pattern/circles",
+      "path": "/docs/components/Pattern/circles",
       "lineNumber": 7,
       "line": "<Pattern size={4} circles>"
     },
     {
       "example": "circles",
       "component": "Pattern",
-      "path": "/example/Pattern/circles",
+      "path": "/docs/components/Pattern/circles",
       "lineNumber": 21,
       "line": "<Pattern size={8} circles>"
     },
     {
       "example": "circles",
       "component": "Pattern",
-      "path": "/example/Pattern/circles",
+      "path": "/docs/components/Pattern/circles",
       "lineNumber": 35,
       "line": "<Pattern size={8} circles={{ stagger: true }}>"
     },
     {
       "example": "circles",
       "component": "Pattern",
-      "path": "/example/Pattern/circles",
+      "path": "/docs/components/Pattern/circles",
       "lineNumber": 49,
       "line": "<Pattern size={8} circles={{ radius: 2 }}>"
     },
     {
       "example": "circles",
       "component": "Pattern",
-      "path": "/example/Pattern/circles",
+      "path": "/docs/components/Pattern/circles",
       "lineNumber": 63,
       "line": "<Pattern size={8} circles={{ radius: 2, stagger: true }}>"
     },
     {
       "example": "circles",
       "component": "Pattern",
-      "path": "/example/Pattern/circles",
+      "path": "/docs/components/Pattern/circles",
       "lineNumber": 77,
       "line": "<Pattern size={8} circles={{ radius: 2, opacity: 0.3 }}>"
     },
     {
       "example": "circles-custom-pattern-svg-only",
       "component": "Pattern",
-      "path": "/example/Pattern/circles-custom-pattern-svg-only",
+      "path": "/docs/components/Pattern/circles-custom-pattern-svg-only",
       "lineNumber": 7,
       "line": "<Pattern id=\"circle-pattern-1\" width={4} height={4}>"
     },
     {
       "example": "circles-custom-pattern-svg-only",
       "component": "Pattern",
-      "path": "/example/Pattern/circles-custom-pattern-svg-only",
+      "path": "/docs/components/Pattern/circles-custom-pattern-svg-only",
       "lineNumber": 13,
       "line": "<Pattern id=\"circle-pattern-2\" width={8} height={8}>"
     },
     {
       "example": "circles-custom-pattern-svg-only",
       "component": "Pattern",
-      "path": "/example/Pattern/circles-custom-pattern-svg-only",
+      "path": "/docs/components/Pattern/circles-custom-pattern-svg-only",
       "lineNumber": 19,
       "line": "<Pattern id=\"circle-pattern-3\" width={8} height={8}>"
     },
     {
       "example": "circles-custom-pattern-svg-only",
       "component": "Pattern",
-      "path": "/example/Pattern/circles-custom-pattern-svg-only",
+      "path": "/docs/components/Pattern/circles-custom-pattern-svg-only",
       "lineNumber": 25,
       "line": "<Pattern id=\"circle-pattern-4\" width={8} height={8}>"
     },
     {
       "example": "circles-custom-pattern-svg-only",
       "component": "Pattern",
-      "path": "/example/Pattern/circles-custom-pattern-svg-only",
+      "path": "/docs/components/Pattern/circles-custom-pattern-svg-only",
       "lineNumber": 35,
       "line": "<Pattern id=\"circle-pattern-5\" width={8} height={8}>"
     },
     {
       "example": "circles-custom-pattern-svg-only",
       "component": "Pattern",
-      "path": "/example/Pattern/circles-custom-pattern-svg-only",
+      "path": "/docs/components/Pattern/circles-custom-pattern-svg-only",
       "lineNumber": 45,
       "line": "<Pattern id=\"circle-pattern-6\" width={8} height={8}>"
     },
     {
       "example": "lineargradient-as-pattern",
       "component": "Pattern",
-      "path": "/example/Pattern/lineargradient-as-pattern",
+      "path": "/docs/components/Pattern/lineargradient-as-pattern",
       "lineNumber": 9,
       "line": "<Pattern size={4} background={gradient}>"
     },
     {
       "example": "lineargradient-as-pattern",
       "component": "Pattern",
-      "path": "/example/Pattern/lineargradient-as-pattern",
+      "path": "/docs/components/Pattern/lineargradient-as-pattern",
       "lineNumber": 19,
       "line": "<Pattern size={4} background={gradient}>"
     },
     {
       "example": "lineargradient-as-pattern",
       "component": "Pattern",
-      "path": "/example/Pattern/lineargradient-as-pattern",
+      "path": "/docs/components/Pattern/lineargradient-as-pattern",
       "lineNumber": 29,
       "line": "<Pattern size={4} background={gradient}>"
     },
     {
       "example": "lineargradient-as-pattern",
       "component": "Pattern",
-      "path": "/example/Pattern/lineargradient-as-pattern",
+      "path": "/docs/components/Pattern/lineargradient-as-pattern",
       "lineNumber": 39,
       "line": "<Pattern size={8} background={gradient}>"
     },
     {
       "example": "lineargradient-as-pattern",
       "component": "Pattern",
-      "path": "/example/Pattern/lineargradient-as-pattern",
+      "path": "/docs/components/Pattern/lineargradient-as-pattern",
       "lineNumber": 49,
       "line": "<Pattern size={8} background={gradient}>"
     },
     {
       "example": "lines",
       "component": "Pattern",
-      "path": "/example/Pattern/lines",
+      "path": "/docs/components/Pattern/lines",
       "lineNumber": 7,
       "line": "<Pattern size={4} lines>"
     },
     {
       "example": "lines",
       "component": "Pattern",
-      "path": "/example/Pattern/lines",
+      "path": "/docs/components/Pattern/lines",
       "lineNumber": 21,
       "line": "<Pattern size={4} lines={{ rotate: 90 }}>"
     },
     {
       "example": "lines",
       "component": "Pattern",
-      "path": "/example/Pattern/lines",
+      "path": "/docs/components/Pattern/lines",
       "lineNumber": 35,
       "line": "<Pattern size={5} lines={[{ rotate: 0 }, { rotate: 90 }]}>"
     },
     {
       "example": "lines",
       "component": "Pattern",
-      "path": "/example/Pattern/lines",
+      "path": "/docs/components/Pattern/lines",
       "lineNumber": 49,
       "line": "<Pattern size={5} lines={{ rotate: -45 }}>"
     },
     {
       "example": "lines",
       "component": "Pattern",
-      "path": "/example/Pattern/lines",
+      "path": "/docs/components/Pattern/lines",
       "lineNumber": 63,
       "line": "<Pattern size={5} lines={{ rotate: 45 }}>"
     },
     {
       "example": "lines",
       "component": "Pattern",
-      "path": "/example/Pattern/lines",
+      "path": "/docs/components/Pattern/lines",
       "lineNumber": 77,
       "line": "<Pattern size={6} lines={[{ rotate: 45 }, { rotate: -45 }]}>"
     },
     {
       "example": "lines-custom-pattern-svg-only",
       "component": "Pattern",
-      "path": "/example/Pattern/lines-custom-pattern-svg-only",
+      "path": "/docs/components/Pattern/lines-custom-pattern-svg-only",
       "lineNumber": 7,
       "line": "<Pattern width={4} height={4}>"
     },
     {
       "example": "lines-custom-pattern-svg-only",
       "component": "Pattern",
-      "path": "/example/Pattern/lines-custom-pattern-svg-only",
+      "path": "/docs/components/Pattern/lines-custom-pattern-svg-only",
       "lineNumber": 25,
       "line": "<Pattern width={4} height={4}>"
     },
     {
       "example": "lines-custom-pattern-svg-only",
       "component": "Pattern",
-      "path": "/example/Pattern/lines-custom-pattern-svg-only",
+      "path": "/docs/components/Pattern/lines-custom-pattern-svg-only",
       "lineNumber": 43,
       "line": "<Pattern width={4} height={4}>"
     },
     {
       "example": "lines-custom-pattern-svg-only",
       "component": "Pattern",
-      "path": "/example/Pattern/lines-custom-pattern-svg-only",
+      "path": "/docs/components/Pattern/lines-custom-pattern-svg-only",
       "lineNumber": 62,
       "line": "<Pattern width={8} height={8}>"
     },
     {
       "example": "lines-custom-pattern-svg-only",
       "component": "Pattern",
-      "path": "/example/Pattern/lines-custom-pattern-svg-only",
+      "path": "/docs/components/Pattern/lines-custom-pattern-svg-only",
       "lineNumber": 80,
       "line": "<Pattern width={8} height={8}>"
     },
     {
       "example": "lines-custom-pattern-svg-only",
       "component": "Pattern",
-      "path": "/example/Pattern/lines-custom-pattern-svg-only",
+      "path": "/docs/components/Pattern/lines-custom-pattern-svg-only",
       "lineNumber": 98,
       "line": "<Pattern width={8} height={8}>"
     },
     {
       "example": "with-fill-color",
       "component": "Pattern",
-      "path": "/example/Pattern/with-fill-color",
+      "path": "/docs/components/Pattern/with-fill-color",
       "lineNumber": 7,
       "line": "<Pattern size={4} circles={{ color: 'white', opacity: 0.25 }} background=\"hsl(20 100% 50%)\">"
     },
     {
       "example": "with-fill-color",
       "component": "Pattern",
-      "path": "/example/Pattern/with-fill-color",
+      "path": "/docs/components/Pattern/with-fill-color",
       "lineNumber": 13,
       "line": "<Pattern size={8} circles={{ color: 'white', opacity: 0.6 }} background=\"hsl(150 100% 45%)\">"
     },
     {
       "example": "with-fill-color",
       "component": "Pattern",
-      "path": "/example/Pattern/with-fill-color",
+      "path": "/docs/components/Pattern/with-fill-color",
       "lineNumber": 19,
       "line": "<Pattern"
     },
     {
       "example": "with-fill-color",
       "component": "Pattern",
-      "path": "/example/Pattern/with-fill-color",
+      "path": "/docs/components/Pattern/with-fill-color",
       "lineNumber": 29,
       "line": "<Pattern"
     },
     {
       "example": "with-fill-color",
       "component": "Pattern",
-      "path": "/example/Pattern/with-fill-color",
+      "path": "/docs/components/Pattern/with-fill-color",
       "lineNumber": 39,
       "line": "<Pattern size={4} lines={{ color: 'white', opacity: 0.5 }} background=\"hsl(40 100% 50%)\">"
     },
     {
       "example": "with-fill-color",
       "component": "Pattern",
-      "path": "/example/Pattern/with-fill-color",
+      "path": "/docs/components/Pattern/with-fill-color",
       "lineNumber": 45,
       "line": "<Pattern"
     },
     {
       "example": "with-lineargradient",
       "component": "Pattern",
-      "path": "/example/Pattern/with-lineargradient",
+      "path": "/docs/components/Pattern/with-lineargradient",
       "lineNumber": 11,
       "line": "<Pattern size={4} circles={{ color: 'white', opacity: 0.5 }}>"
     },
     {
       "example": "with-lineargradient",
       "component": "Pattern",
-      "path": "/example/Pattern/with-lineargradient",
+      "path": "/docs/components/Pattern/with-lineargradient",
       "lineNumber": 23,
       "line": "<Pattern size={8} circles={{ color: 'white', opacity: 0.5 }}>"
     },
     {
       "example": "with-lineargradient",
       "component": "Pattern",
-      "path": "/example/Pattern/with-lineargradient",
+      "path": "/docs/components/Pattern/with-lineargradient",
       "lineNumber": 35,
       "line": "<Pattern size={8} circles={{ color: 'white', opacity: 0.5, stagger: true }}>"
     },
     {
       "example": "with-lineargradient",
       "component": "Pattern",
-      "path": "/example/Pattern/with-lineargradient",
+      "path": "/docs/components/Pattern/with-lineargradient",
       "lineNumber": 47,
       "line": "<Pattern size={8} circles={{ color: 'white', opacity: 0.5, stagger: true, radius: 2 }}>"
     },
     {
       "example": "with-lineargradient",
       "component": "Pattern",
-      "path": "/example/Pattern/with-lineargradient",
+      "path": "/docs/components/Pattern/with-lineargradient",
       "lineNumber": 59,
       "line": "<Pattern size={4} lines={{ color: 'white', opacity: 0.5 }}>"
     },
     {
       "example": "with-lineargradient",
       "component": "Pattern",
-      "path": "/example/Pattern/with-lineargradient",
+      "path": "/docs/components/Pattern/with-lineargradient",
       "lineNumber": 71,
       "line": "<Pattern"
     }
   ],
-  "updatedAt": "2025-12-29T21:36:45.128Z"
+  "updatedAt": "2026-02-07T20:21:32.127Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Pie.json b/docs/src/examples/catalog/Pie.json
index 830936c10..1afa6ed00 100644
--- a/docs/src/examples/catalog/Pie.json
+++ b/docs/src/examples/catalog/Pie.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "basic",
-      "path": "/example/Pie/basic",
+      "title": "basic",
+      "path": "/docs/components/Pie/basic",
       "components": [
         {
           "component": "Chart",
@@ -24,7 +25,8 @@
     },
     {
       "name": "default-slot-render-each-arc",
-      "path": "/example/Pie/default-slot-render-each-arc",
+      "title": "default slot render each arc",
+      "path": "/docs/components/Pie/default-slot-render-each-arc",
       "components": [
         {
           "component": "Chart",
@@ -50,7 +52,8 @@
     },
     {
       "name": "disable-sorting",
-      "path": "/example/Pie/disable-sorting",
+      "title": "disable sorting",
+      "path": "/docs/components/Pie/disable-sorting",
       "components": [
         {
           "component": "Chart",
@@ -71,7 +74,8 @@
     },
     {
       "name": "inner-radius-negative",
-      "path": "/example/Pie/inner-radius-negative",
+      "title": "inner radius negative",
+      "path": "/docs/components/Pie/inner-radius-negative",
       "components": [
         {
           "component": "Chart",
@@ -92,7 +96,8 @@
     },
     {
       "name": "inner-radius-positive",
-      "path": "/example/Pie/inner-radius-positive",
+      "title": "inner radius positive",
+      "path": "/docs/components/Pie/inner-radius-positive",
       "components": [
         {
           "component": "Chart",
@@ -113,7 +118,8 @@
     },
     {
       "name": "inner-radius-zero-one",
-      "path": "/example/Pie/inner-radius-zero-one",
+      "title": "inner radius zero one",
+      "path": "/docs/components/Pie/inner-radius-zero-one",
       "components": [
         {
           "component": "Chart",
@@ -134,7 +140,8 @@
     },
     {
       "name": "labels",
-      "path": "/example/Pie/labels",
+      "title": "labels",
+      "path": "/docs/components/Pie/labels",
       "components": [
         {
           "component": "Chart",
@@ -165,7 +172,8 @@
     },
     {
       "name": "labels-centroid",
-      "path": "/example/Pie/labels-centroid",
+      "title": "labels centroid",
+      "path": "/docs/components/Pie/labels-centroid",
       "components": [
         {
           "component": "Chart",
@@ -196,7 +204,8 @@
     },
     {
       "name": "labels-centroid-multiple",
-      "path": "/example/Pie/labels-centroid-multiple",
+      "title": "labels centroid multiple",
+      "path": "/docs/components/Pie/labels-centroid-multiple",
       "components": [
         {
           "component": "Chart",
@@ -227,7 +236,8 @@
     },
     {
       "name": "labels-outer",
-      "path": "/example/Pie/labels-outer",
+      "title": "labels outer",
+      "path": "/docs/components/Pie/labels-outer",
       "components": [
         {
           "component": "Chart",
@@ -258,7 +268,8 @@
     },
     {
       "name": "labels-outer-radial",
-      "path": "/example/Pie/labels-outer-radial",
+      "title": "labels outer radial",
+      "path": "/docs/components/Pie/labels-outer-radial",
       "components": [
         {
           "component": "Chart",
@@ -289,7 +300,8 @@
     },
     {
       "name": "labels-outer-with-padding",
-      "path": "/example/Pie/labels-outer-with-padding",
+      "title": "labels outer with padding",
+      "path": "/docs/components/Pie/labels-outer-with-padding",
       "components": [
         {
           "component": "Chart",
@@ -320,7 +332,8 @@
     },
     {
       "name": "multiple-data-prop",
-      "path": "/example/Pie/multiple-data-prop",
+      "title": "multiple data prop",
+      "path": "/docs/components/Pie/multiple-data-prop",
       "components": [
         {
           "component": "Chart",
@@ -341,7 +354,8 @@
     },
     {
       "name": "offset",
-      "path": "/example/Pie/offset",
+      "title": "offset",
+      "path": "/docs/components/Pie/offset",
       "components": [
         {
           "component": "Chart",
@@ -362,7 +376,8 @@
     },
     {
       "name": "outer-radius",
-      "path": "/example/Pie/outer-radius",
+      "title": "outer radius",
+      "path": "/docs/components/Pie/outer-radius",
       "components": [
         {
           "component": "Chart",
@@ -383,7 +398,8 @@
     },
     {
       "name": "pad-angle",
-      "path": "/example/Pie/pad-angle",
+      "title": "pad angle",
+      "path": "/docs/components/Pie/pad-angle",
       "components": [
         {
           "component": "Chart",
@@ -404,7 +420,8 @@
     },
     {
       "name": "pad-angle-with-inner-radius",
-      "path": "/example/Pie/pad-angle-with-inner-radius",
+      "title": "pad angle with inner radius",
+      "path": "/docs/components/Pie/pad-angle-with-inner-radius",
       "components": [
         {
           "component": "Chart",
@@ -425,7 +442,8 @@
     },
     {
       "name": "partial-range-chart-xrange",
-      "path": "/example/Pie/partial-range-chart-xrange",
+      "title": "partial range chart xrange",
+      "path": "/docs/components/Pie/partial-range-chart-xrange",
       "components": [
         {
           "component": "Chart",
@@ -446,7 +464,8 @@
     },
     {
       "name": "partial-range-range-prop",
-      "path": "/example/Pie/partial-range-range-prop",
+      "title": "partial range range prop",
+      "path": "/docs/components/Pie/partial-range-range-prop",
       "components": [
         {
           "component": "Chart",
@@ -467,7 +486,8 @@
     },
     {
       "name": "placement",
-      "path": "/example/Pie/placement",
+      "title": "placement",
+      "path": "/docs/components/Pie/placement",
       "components": [
         {
           "component": "Chart",
@@ -488,7 +508,8 @@
     },
     {
       "name": "placement-center",
-      "path": "/example/Pie/placement-center",
+      "title": "placement center",
+      "path": "/docs/components/Pie/placement-center",
       "components": [
         {
           "component": "Chart",
@@ -509,7 +530,8 @@
     },
     {
       "name": "placement-left",
-      "path": "/example/Pie/placement-left",
+      "title": "placement left",
+      "path": "/docs/components/Pie/placement-left",
       "components": [
         {
           "component": "Chart",
@@ -535,7 +557,8 @@
     },
     {
       "name": "placement-right",
-      "path": "/example/Pie/placement-right",
+      "title": "placement right",
+      "path": "/docs/components/Pie/placement-right",
       "components": [
         {
           "component": "Chart",
@@ -561,7 +584,8 @@
     },
     {
       "name": "tooltip",
-      "path": "/example/Pie/tooltip",
+      "title": "tooltip",
+      "path": "/docs/components/Pie/tooltip",
       "components": [
         {
           "component": "Chart",
@@ -587,7 +611,8 @@
     },
     {
       "name": "tooltip-with-arcs-slot",
-      "path": "/example/Pie/tooltip-with-arcs-slot",
+      "title": "tooltip with arcs slot",
+      "path": "/docs/components/Pie/tooltip-with-arcs-slot",
       "components": [
         {
           "component": "Chart",
@@ -628,7 +653,8 @@
     },
     {
       "name": "tweened",
-      "path": "/example/Pie/tweened",
+      "title": "tweened",
+      "path": "/docs/components/Pie/tweened",
       "components": [
         {
           "component": "Chart",
@@ -652,192 +678,192 @@
     {
       "example": "basic",
       "component": "Pie",
-      "path": "/example/Pie/basic",
+      "path": "/docs/components/Pie/basic",
       "lineNumber": 36,
       "line": "<Pie />"
     },
     {
       "example": "default-slot-render-each-arc",
       "component": "Pie",
-      "path": "/example/Pie/default-slot-render-each-arc",
+      "path": "/docs/components/Pie/default-slot-render-each-arc",
       "lineNumber": 37,
       "line": "<Pie>"
     },
     {
       "example": "disable-sorting",
       "component": "Pie",
-      "path": "/example/Pie/disable-sorting",
+      "path": "/docs/components/Pie/disable-sorting",
       "lineNumber": 36,
       "line": "<Pie sort={null} />"
     },
     {
       "example": "inner-radius-negative",
       "component": "Pie",
-      "path": "/example/Pie/inner-radius-negative",
+      "path": "/docs/components/Pie/inner-radius-negative",
       "lineNumber": 19,
       "line": "<Pie innerRadius={0.9} />"
     },
     {
       "example": "inner-radius-positive",
       "component": "Pie",
-      "path": "/example/Pie/inner-radius-positive",
+      "path": "/docs/components/Pie/inner-radius-positive",
       "lineNumber": 19,
       "line": "<Pie innerRadius={100} />"
     },
     {
       "example": "inner-radius-zero-one",
       "component": "Pie",
-      "path": "/example/Pie/inner-radius-zero-one",
+      "path": "/docs/components/Pie/inner-radius-zero-one",
       "lineNumber": 19,
       "line": "<Pie innerRadius={100} />"
     },
     {
       "example": "labels",
       "component": "Pie",
-      "path": "/example/Pie/labels",
+      "path": "/docs/components/Pie/labels",
       "lineNumber": 20,
       "line": "<Pie>"
     },
     {
       "example": "labels-centroid",
       "component": "Pie",
-      "path": "/example/Pie/labels-centroid",
+      "path": "/docs/components/Pie/labels-centroid",
       "lineNumber": 20,
       "line": "<Pie>"
     },
     {
       "example": "labels-centroid-multiple",
       "component": "Pie",
-      "path": "/example/Pie/labels-centroid-multiple",
+      "path": "/docs/components/Pie/labels-centroid-multiple",
       "lineNumber": 23,
       "line": "<Pie>"
     },
     {
       "example": "labels-outer",
       "component": "Pie",
-      "path": "/example/Pie/labels-outer",
+      "path": "/docs/components/Pie/labels-outer",
       "lineNumber": 20,
       "line": "<Pie>"
     },
     {
       "example": "labels-outer-radial",
       "component": "Pie",
-      "path": "/example/Pie/labels-outer-radial",
+      "path": "/docs/components/Pie/labels-outer-radial",
       "lineNumber": 20,
       "line": "<Pie>"
     },
     {
       "example": "labels-outer-with-padding",
       "component": "Pie",
-      "path": "/example/Pie/labels-outer-with-padding",
+      "path": "/docs/components/Pie/labels-outer-with-padding",
       "lineNumber": 20,
       "line": "<Pie>"
     },
     {
       "example": "multiple-data-prop",
       "component": "Pie",
-      "path": "/example/Pie/multiple-data-prop",
+      "path": "/docs/components/Pie/multiple-data-prop",
       "lineNumber": 20,
       "line": "<Pie innerRadius={100} {data} />"
     },
     {
       "example": "multiple-data-prop",
       "component": "Pie",
-      "path": "/example/Pie/multiple-data-prop",
+      "path": "/docs/components/Pie/multiple-data-prop",
       "lineNumber": 21,
       "line": "<Pie outerRadius={90} data={data2} />"
     },
     {
       "example": "offset",
       "component": "Pie",
-      "path": "/example/Pie/offset",
+      "path": "/docs/components/Pie/offset",
       "lineNumber": 19,
       "line": "<Pie offset={4} />"
     },
     {
       "example": "outer-radius",
       "component": "Pie",
-      "path": "/example/Pie/outer-radius",
+      "path": "/docs/components/Pie/outer-radius",
       "lineNumber": 19,
       "line": "<Pie outerRadius={100} />"
     },
     {
       "example": "pad-angle",
       "component": "Pie",
-      "path": "/example/Pie/pad-angle",
+      "path": "/docs/components/Pie/pad-angle",
       "lineNumber": 19,
       "line": "<Pie padAngle={0.05} />"
     },
     {
       "example": "pad-angle-with-inner-radius",
       "component": "Pie",
-      "path": "/example/Pie/pad-angle-with-inner-radius",
+      "path": "/docs/components/Pie/pad-angle-with-inner-radius",
       "lineNumber": 19,
       "line": "<Pie innerRadius={100} padAngle={0.03} />"
     },
     {
       "example": "partial-range-chart-xrange",
       "component": "Pie",
-      "path": "/example/Pie/partial-range-chart-xrange",
+      "path": "/docs/components/Pie/partial-range-chart-xrange",
       "lineNumber": 19,
       "line": "<Pie />"
     },
     {
       "example": "partial-range-range-prop",
       "component": "Pie",
-      "path": "/example/Pie/partial-range-range-prop",
+      "path": "/docs/components/Pie/partial-range-range-prop",
       "lineNumber": 19,
       "line": "<Pie range={[-90, 90]} />"
     },
     {
       "example": "placement",
       "component": "Pie",
-      "path": "/example/Pie/placement",
+      "path": "/docs/components/Pie/placement",
       "lineNumber": 19,
       "line": "<Pie />"
     },
     {
       "example": "placement-center",
       "component": "Pie",
-      "path": "/example/Pie/placement-center",
+      "path": "/docs/components/Pie/placement-center",
       "lineNumber": 19,
       "line": "<Pie />"
     },
     {
       "example": "placement-left",
       "component": "Pie",
-      "path": "/example/Pie/placement-left",
+      "path": "/docs/components/Pie/placement-left",
       "lineNumber": 21,
       "line": "<Pie />"
     },
     {
       "example": "placement-right",
       "component": "Pie",
-      "path": "/example/Pie/placement-right",
+      "path": "/docs/components/Pie/placement-right",
       "lineNumber": 21,
       "line": "<Pie />"
     },
     {
       "example": "tooltip",
       "component": "Pie",
-      "path": "/example/Pie/tooltip",
+      "path": "/docs/components/Pie/tooltip",
       "lineNumber": 22,
       "line": "<Pie tooltipContext={context.tooltip} />"
     },
     {
       "example": "tooltip-with-arcs-slot",
       "component": "Pie",
-      "path": "/example/Pie/tooltip-with-arcs-slot",
+      "path": "/docs/components/Pie/tooltip-with-arcs-slot",
       "lineNumber": 31,
       "line": "<Pie>"
     },
     {
       "example": "tweened",
       "component": "Pie",
-      "path": "/example/Pie/tweened",
+      "path": "/docs/components/Pie/tweened",
       "lineNumber": 25,
       "line": "<Pie motion=\"tween\" />"
     }
   ],
-  "updatedAt": "2025-11-23T01:49:02.586Z"
+  "updatedAt": "2026-02-07T20:21:32.144Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/PieChart.json b/docs/src/examples/catalog/PieChart.json
index 777dbc2bf..25f55da8f 100644
--- a/docs/src/examples/catalog/PieChart.json
+++ b/docs/src/examples/catalog/PieChart.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "arc",
-      "path": "/example/PieChart/arc",
+      "title": "arc",
+      "path": "/docs/components/PieChart/arc",
       "components": [
         {
           "component": "PieChart",
@@ -14,7 +15,8 @@
     },
     {
       "name": "arc-props",
-      "path": "/example/PieChart/arc-props",
+      "title": "arc props",
+      "path": "/docs/components/PieChart/arc-props",
       "components": [
         {
           "component": "PieChart",
@@ -25,7 +27,8 @@
     },
     {
       "name": "basic",
-      "path": "/example/PieChart/basic",
+      "title": "basic",
+      "path": "/docs/components/PieChart/basic",
       "components": [
         {
           "component": "PieChart",
@@ -36,7 +39,8 @@
     },
     {
       "name": "colors-data-prop",
-      "path": "/example/PieChart/colors-data-prop",
+      "title": "colors data prop",
+      "path": "/docs/components/PieChart/colors-data-prop",
       "components": [
         {
           "component": "PieChart",
@@ -47,7 +51,8 @@
     },
     {
       "name": "colors-interpolator",
-      "path": "/example/PieChart/colors-interpolator",
+      "title": "colors interpolator",
+      "path": "/docs/components/PieChart/colors-interpolator",
       "components": [
         {
           "component": "PieChart",
@@ -58,7 +63,8 @@
     },
     {
       "name": "colors-scheme",
-      "path": "/example/PieChart/colors-scheme",
+      "title": "colors scheme",
+      "path": "/docs/components/PieChart/colors-scheme",
       "components": [
         {
           "component": "PieChart",
@@ -69,7 +75,8 @@
     },
     {
       "name": "colors-variables",
-      "path": "/example/PieChart/colors-variables",
+      "title": "colors variables",
+      "path": "/docs/components/PieChart/colors-variables",
       "components": [
         {
           "component": "PieChart",
@@ -80,7 +87,8 @@
     },
     {
       "name": "donut",
-      "path": "/example/PieChart/donut",
+      "title": "donut",
+      "path": "/docs/components/PieChart/donut",
       "components": [
         {
           "component": "PieChart",
@@ -91,7 +99,8 @@
     },
     {
       "name": "donut-with-text",
-      "path": "/example/PieChart/donut-with-text",
+      "title": "donut with text",
+      "path": "/docs/components/PieChart/donut-with-text",
       "components": [
         {
           "component": "PieChart",
@@ -107,7 +116,8 @@
     },
     {
       "name": "legend",
-      "path": "/example/PieChart/legend",
+      "title": "legend",
+      "path": "/docs/components/PieChart/legend",
       "components": [
         {
           "component": "PieChart",
@@ -118,7 +128,8 @@
     },
     {
       "name": "legend-custom-label",
-      "path": "/example/PieChart/legend-custom-label",
+      "title": "legend custom label",
+      "path": "/docs/components/PieChart/legend-custom-label",
       "components": [
         {
           "component": "PieChart",
@@ -129,7 +140,8 @@
     },
     {
       "name": "legend-placement",
-      "path": "/example/PieChart/legend-placement",
+      "title": "legend placement",
+      "path": "/docs/components/PieChart/legend-placement",
       "components": [
         {
           "component": "PieChart",
@@ -140,7 +152,8 @@
     },
     {
       "name": "legend-responsive",
-      "path": "/example/PieChart/legend-responsive",
+      "title": "legend responsive",
+      "path": "/docs/components/PieChart/legend-responsive",
       "components": [
         {
           "component": "PieChart",
@@ -151,7 +164,8 @@
     },
     {
       "name": "legend-with-padding",
-      "path": "/example/PieChart/legend-with-padding",
+      "title": "legend with padding",
+      "path": "/docs/components/PieChart/legend-with-padding",
       "components": [
         {
           "component": "PieChart",
@@ -162,7 +176,8 @@
     },
     {
       "name": "motion-spring",
-      "path": "/example/PieChart/motion-spring",
+      "title": "motion spring",
+      "path": "/docs/components/PieChart/motion-spring",
       "components": [
         {
           "component": "PieChart",
@@ -173,7 +188,8 @@
     },
     {
       "name": "motion-tween",
-      "path": "/example/PieChart/motion-tween",
+      "title": "motion tween",
+      "path": "/docs/components/PieChart/motion-tween",
       "components": [
         {
           "component": "PieChart",
@@ -184,7 +200,8 @@
     },
     {
       "name": "offset-slice",
-      "path": "/example/PieChart/offset-slice",
+      "title": "offset slice",
+      "path": "/docs/components/PieChart/offset-slice",
       "components": [
         {
           "component": "PieChart",
@@ -200,7 +217,8 @@
     },
     {
       "name": "placement-custom",
-      "path": "/example/PieChart/placement-custom",
+      "title": "placement custom",
+      "path": "/docs/components/PieChart/placement-custom",
       "components": [
         {
           "component": "PieChart",
@@ -211,7 +229,8 @@
     },
     {
       "name": "placement-left",
-      "path": "/example/PieChart/placement-left",
+      "title": "placement left",
+      "path": "/docs/components/PieChart/placement-left",
       "components": [
         {
           "component": "PieChart",
@@ -222,7 +241,8 @@
     },
     {
       "name": "placement-right",
-      "path": "/example/PieChart/placement-right",
+      "title": "placement right",
+      "path": "/docs/components/PieChart/placement-right",
       "components": [
         {
           "component": "PieChart",
@@ -233,7 +253,8 @@
     },
     {
       "name": "radius-fixed",
-      "path": "/example/PieChart/radius-fixed",
+      "title": "radius fixed",
+      "path": "/docs/components/PieChart/radius-fixed",
       "components": [
         {
           "component": "PieChart",
@@ -244,7 +265,8 @@
     },
     {
       "name": "radius-offset",
-      "path": "/example/PieChart/radius-offset",
+      "title": "radius offset",
+      "path": "/docs/components/PieChart/radius-offset",
       "components": [
         {
           "component": "PieChart",
@@ -255,7 +277,8 @@
     },
     {
       "name": "radius-percent",
-      "path": "/example/PieChart/radius-percent",
+      "title": "radius percent",
+      "path": "/docs/components/PieChart/radius-percent",
       "components": [
         {
           "component": "PieChart",
@@ -266,7 +289,8 @@
     },
     {
       "name": "segments",
-      "path": "/example/PieChart/segments",
+      "title": "segments",
+      "path": "/docs/components/PieChart/segments",
       "components": [
         {
           "component": "PieChart",
@@ -282,7 +306,8 @@
     },
     {
       "name": "series",
-      "path": "/example/PieChart/series",
+      "title": "series",
+      "path": "/docs/components/PieChart/series",
       "components": [
         {
           "component": "PieChart",
@@ -293,7 +318,8 @@
     },
     {
       "name": "series-click",
-      "path": "/example/PieChart/series-click",
+      "title": "series click",
+      "path": "/docs/components/PieChart/series-click",
       "components": [
         {
           "component": "PieChart",
@@ -304,7 +330,8 @@
     },
     {
       "name": "series-props",
-      "path": "/example/PieChart/series-props",
+      "title": "series props",
+      "path": "/docs/components/PieChart/series-props",
       "components": [
         {
           "component": "PieChart",
@@ -315,7 +342,8 @@
     },
     {
       "name": "tooltip-click",
-      "path": "/example/PieChart/tooltip-click",
+      "title": "tooltip click",
+      "path": "/docs/components/PieChart/tooltip-click",
       "components": [
         {
           "component": "PieChart",
@@ -329,199 +357,199 @@
     {
       "example": "arc",
       "component": "PieChart",
-      "path": "/example/PieChart/arc",
+      "path": "/docs/components/PieChart/arc",
       "lineNumber": 10,
       "line": "<PieChart"
     },
     {
       "example": "arc-props",
       "component": "PieChart",
-      "path": "/example/PieChart/arc-props",
+      "path": "/docs/components/PieChart/arc-props",
       "lineNumber": 10,
       "line": "<PieChart"
     },
     {
       "example": "basic",
       "component": "PieChart",
-      "path": "/example/PieChart/basic",
+      "path": "/docs/components/PieChart/basic",
       "lineNumber": 10,
       "line": "<PieChart {data} key=\"fruit\" value=\"value\" cRange={fruitColors} height={300} />"
     },
     {
       "example": "colors-data-prop",
       "component": "PieChart",
-      "path": "/example/PieChart/colors-data-prop",
+      "path": "/docs/components/PieChart/colors-data-prop",
       "lineNumber": 21,
       "line": "<PieChart {data} key=\"fruit\" value=\"value\" c=\"color\" height={300} />"
     },
     {
       "example": "colors-interpolator",
       "component": "PieChart",
-      "path": "/example/PieChart/colors-interpolator",
+      "path": "/docs/components/PieChart/colors-interpolator",
       "lineNumber": 11,
       "line": "<PieChart {data} key=\"fruit\" value=\"value\" height={300} cRange={quantize(interpolateRainbow, 5)} />"
     },
     {
       "example": "colors-scheme",
       "component": "PieChart",
-      "path": "/example/PieChart/colors-scheme",
+      "path": "/docs/components/PieChart/colors-scheme",
       "lineNumber": 10,
       "line": "<PieChart {data} key=\"fruit\" value=\"value\" height={300} cRange={schemeTableau10} />"
     },
     {
       "example": "colors-variables",
       "component": "PieChart",
-      "path": "/example/PieChart/colors-variables",
+      "path": "/docs/components/PieChart/colors-variables",
       "lineNumber": 10,
       "line": "<PieChart {data} key=\"fruit\" value=\"value\" height={300} cRange={fruitColors} />"
     },
     {
       "example": "donut",
       "component": "PieChart",
-      "path": "/example/PieChart/donut",
+      "path": "/docs/components/PieChart/donut",
       "lineNumber": 10,
       "line": "<PieChart"
     },
     {
       "example": "donut-with-text",
       "component": "PieChart",
-      "path": "/example/PieChart/donut-with-text",
+      "path": "/docs/components/PieChart/donut-with-text",
       "lineNumber": 12,
       "line": "<PieChart"
     },
     {
       "example": "legend",
       "component": "PieChart",
-      "path": "/example/PieChart/legend",
+      "path": "/docs/components/PieChart/legend",
       "lineNumber": 10,
       "line": "<PieChart {data} key=\"fruit\" value=\"value\" cRange={fruitColors} height={300} legend />"
     },
     {
       "example": "legend-custom-label",
       "component": "PieChart",
-      "path": "/example/PieChart/legend-custom-label",
+      "path": "/docs/components/PieChart/legend-custom-label",
       "lineNumber": 10,
       "line": "<PieChart"
     },
     {
       "example": "legend-placement",
       "component": "PieChart",
-      "path": "/example/PieChart/legend-placement",
+      "path": "/docs/components/PieChart/legend-placement",
       "lineNumber": 10,
       "line": "<PieChart {data} key=\"fruit\" value=\"value\" cRange={fruitColors} height={300} legend />"
     },
     {
       "example": "legend-responsive",
       "component": "PieChart",
-      "path": "/example/PieChart/legend-responsive",
+      "path": "/docs/components/PieChart/legend-responsive",
       "lineNumber": 10,
       "line": "<PieChart"
     },
     {
       "example": "legend-with-padding",
       "component": "PieChart",
-      "path": "/example/PieChart/legend-with-padding",
+      "path": "/docs/components/PieChart/legend-with-padding",
       "lineNumber": 10,
       "line": "<PieChart"
     },
     {
       "example": "motion-spring",
       "component": "PieChart",
-      "path": "/example/PieChart/motion-spring",
+      "path": "/docs/components/PieChart/motion-spring",
       "lineNumber": 16,
       "line": "<PieChart"
     },
     {
       "example": "motion-tween",
       "component": "PieChart",
-      "path": "/example/PieChart/motion-tween",
+      "path": "/docs/components/PieChart/motion-tween",
       "lineNumber": 16,
       "line": "<PieChart"
     },
     {
       "example": "offset-slice",
       "component": "PieChart",
-      "path": "/example/PieChart/offset-slice",
+      "path": "/docs/components/PieChart/offset-slice",
       "lineNumber": 10,
       "line": "<PieChart {data} key=\"fruit\" value=\"value\" cRange={fruitColors} height={300}>"
     },
     {
       "example": "placement-custom",
       "component": "PieChart",
-      "path": "/example/PieChart/placement-custom",
+      "path": "/docs/components/PieChart/placement-custom",
       "lineNumber": 10,
       "line": "<PieChart"
     },
     {
       "example": "placement-left",
       "component": "PieChart",
-      "path": "/example/PieChart/placement-left",
+      "path": "/docs/components/PieChart/placement-left",
       "lineNumber": 10,
       "line": "<PieChart"
     },
     {
       "example": "placement-right",
       "component": "PieChart",
-      "path": "/example/PieChart/placement-right",
+      "path": "/docs/components/PieChart/placement-right",
       "lineNumber": 10,
       "line": "<PieChart"
     },
     {
       "example": "radius-fixed",
       "component": "PieChart",
-      "path": "/example/PieChart/radius-fixed",
+      "path": "/docs/components/PieChart/radius-fixed",
       "lineNumber": 10,
       "line": "<PieChart {data} key=\"fruit\" value=\"value\" cRange={fruitColors} height={300} outerRadius={100} />"
     },
     {
       "example": "radius-offset",
       "component": "PieChart",
-      "path": "/example/PieChart/radius-offset",
+      "path": "/docs/components/PieChart/radius-offset",
       "lineNumber": 10,
       "line": "<PieChart {data} key=\"fruit\" value=\"value\" cRange={fruitColors} height={300} outerRadius={-20} />"
     },
     {
       "example": "radius-percent",
       "component": "PieChart",
-      "path": "/example/PieChart/radius-percent",
+      "path": "/docs/components/PieChart/radius-percent",
       "lineNumber": 10,
       "line": "<PieChart {data} key=\"fruit\" value=\"value\" cRange={fruitColors} height={300} outerRadius={0.8} />"
     },
     {
       "example": "segments",
       "component": "PieChart",
-      "path": "/example/PieChart/segments",
+      "path": "/docs/components/PieChart/segments",
       "lineNumber": 25,
       "line": "<PieChart"
     },
     {
       "example": "series",
       "component": "PieChart",
-      "path": "/example/PieChart/series",
+      "path": "/docs/components/PieChart/series",
       "lineNumber": 11,
       "line": "<PieChart"
     },
     {
       "example": "series-click",
       "component": "PieChart",
-      "path": "/example/PieChart/series-click",
+      "path": "/docs/components/PieChart/series-click",
       "lineNumber": 11,
       "line": "<PieChart"
     },
     {
       "example": "series-props",
       "component": "PieChart",
-      "path": "/example/PieChart/series-props",
+      "path": "/docs/components/PieChart/series-props",
       "lineNumber": 11,
       "line": "<PieChart"
     },
     {
       "example": "tooltip-click",
       "component": "PieChart",
-      "path": "/example/PieChart/tooltip-click",
+      "path": "/docs/components/PieChart/tooltip-click",
       "lineNumber": 10,
       "line": "<PieChart"
     }
   ],
-  "updatedAt": "2025-12-07T04:39:10.010Z"
+  "updatedAt": "2026-02-07T20:21:32.160Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Point.json b/docs/src/examples/catalog/Point.json
index 5f1afb808..5def4e6aa 100644
--- a/docs/src/examples/catalog/Point.json
+++ b/docs/src/examples/catalog/Point.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "basic",
-      "path": "/example/Point/basic",
+      "title": "basic",
+      "path": "/docs/components/Point/basic",
       "components": [
         {
           "component": "Chart",
@@ -37,31 +38,31 @@
     {
       "example": "multiple-series",
       "component": "Area",
-      "path": "/example/Area/multiple-series",
+      "path": "/docs/components/Area/multiple-series",
       "lineNumber": 59,
       "line": "<Point d={data[data.length - 1]}>"
     },
     {
       "example": "multiple-series-highlight-on-hover",
       "component": "Area",
-      "path": "/example/Area/multiple-series-highlight-on-hover",
+      "path": "/docs/components/Area/multiple-series-highlight-on-hover",
       "lineNumber": 62,
       "line": "<Point d={data[data.length - 1]}>"
     },
     {
       "example": "basic",
       "component": "Point",
-      "path": "/example/Point/basic",
+      "path": "/docs/components/Point/basic",
       "lineNumber": 22,
       "line": "<Point d={{ x: 50, y: 50 }}>"
     },
     {
       "example": "basic",
       "component": "Point",
-      "path": "/example/Point/basic",
+      "path": "/docs/components/Point/basic",
       "lineNumber": 28,
       "line": "<Point d={{ x: 20, y: 20 }}>"
     }
   ],
-  "updatedAt": "2025-11-13T18:10:50.286Z"
+  "updatedAt": "2026-02-07T20:21:32.174Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Points.json b/docs/src/examples/catalog/Points.json
index 15800e9a8..05fab2957 100644
--- a/docs/src/examples/catalog/Points.json
+++ b/docs/src/examples/catalog/Points.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "basic",
-      "path": "/example/Points/basic",
+      "title": "basic",
+      "path": "/docs/components/Points/basic",
       "components": [
         {
           "component": "Chart",
@@ -29,7 +30,8 @@
     },
     {
       "name": "color-via-scale",
-      "path": "/example/Points/color-via-scale",
+      "title": "color via scale",
+      "path": "/docs/components/Points/color-via-scale",
       "components": [
         {
           "component": "Chart",
@@ -55,7 +57,8 @@
     },
     {
       "name": "with-labels",
-      "path": "/example/Points/with-labels",
+      "title": "with labels",
+      "path": "/docs/components/Points/with-labels",
       "components": [
         {
           "component": "Chart",
@@ -86,7 +89,8 @@
     },
     {
       "name": "with-tooltip-and-highlight",
-      "path": "/example/Points/with-tooltip-and-highlight",
+      "title": "with tooltip and highlight",
+      "path": "/docs/components/Points/with-tooltip-and-highlight",
       "components": [
         {
           "component": "Chart",
@@ -125,157 +129,157 @@
     {
       "example": "playground",
       "component": "Area",
-      "path": "/example/Area/playground",
+      "path": "/docs/components/Area/playground",
       "lineNumber": 46,
       "line": "<Points {motion} r={3} class=\"fill-surface-100 stroke-primary\" />"
     },
     {
       "example": "duration-points",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-points",
+      "path": "/docs/components/BarChart/duration-points",
       "lineNumber": 44,
       "line": "<Points />"
     },
     {
       "example": "duration-points-color",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-points-color",
+      "path": "/docs/components/BarChart/duration-points-color",
       "lineNumber": 51,
       "line": "<Points />"
     },
     {
       "example": "minimap",
       "component": "BrushContext",
-      "path": "/example/BrushContext/minimap",
+      "path": "/docs/components/BrushContext/minimap",
       "lineNumber": 48,
       "line": "<Points class=\"fill-primary/30 stroke-primary\" r={4} />"
     },
     {
       "example": "minimap",
       "component": "BrushContext",
-      "path": "/example/BrushContext/minimap",
+      "path": "/docs/components/BrushContext/minimap",
       "lineNumber": 71,
       "line": "<Points>"
     },
     {
       "example": "selection",
       "component": "BrushContext",
-      "path": "/example/BrushContext/selection",
+      "path": "/docs/components/BrushContext/selection",
       "lineNumber": 43,
       "line": "<Points>"
     },
     {
       "example": "text",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/text",
-      "lineNumber": 102,
+      "path": "/docs/components/ForceSimulation/text",
+      "lineNumber": 103,
       "line": "<Points data={nodes.slice(1)} r={config.radius} class=\"fill-primary\" />"
     },
     {
       "example": "scatter",
       "component": "Hull",
-      "path": "/example/Hull/scatter",
+      "path": "/docs/components/Hull/scatter",
       "lineNumber": 40,
       "line": "<Points r={3} {data} fill={color} />"
     },
     {
       "example": "basic",
       "component": "Points",
-      "path": "/example/Points/basic",
+      "path": "/docs/components/Points/basic",
       "lineNumber": 14,
       "line": "<Points class=\"fill-primary/10 stroke-primary\" />"
     },
     {
       "example": "color-via-scale",
       "component": "Points",
-      "path": "/example/Points/color-via-scale",
+      "path": "/docs/components/Points/color-via-scale",
       "lineNumber": 27,
       "line": "<Points class=\"stroke-surface-content/50\" />"
     },
     {
       "example": "with-labels",
       "component": "Points",
-      "path": "/example/Points/with-labels",
+      "path": "/docs/components/Points/with-labels",
       "lineNumber": 14,
       "line": "<Points class=\"fill-primary/10 stroke-primary\" />"
     },
     {
       "example": "with-tooltip-and-highlight",
       "component": "Points",
-      "path": "/example/Points/with-tooltip-and-highlight",
+      "path": "/docs/components/Points/with-tooltip-and-highlight",
       "lineNumber": 23,
       "line": "<Points class=\"fill-primary/10 stroke-primary\" />"
     },
     {
       "example": "lollipop",
       "component": "Rule",
-      "path": "/example/Rule/lollipop",
+      "path": "/docs/components/Rule/lollipop",
       "lineNumber": 25,
       "line": "<Points class=\"fill-secondary\" />"
     },
     {
       "example": "custom",
       "component": "ScatterChart",
-      "path": "/example/ScatterChart/custom",
+      "path": "/docs/components/ScatterChart/custom",
       "lineNumber": 15,
       "line": "<Points class=\"fill-primary/10 stroke-primary\" />"
     },
     {
       "example": "playground",
       "component": "Spline",
-      "path": "/example/Spline/playground",
+      "path": "/docs/components/Spline/playground",
       "lineNumber": 46,
       "line": "<Points"
     },
     {
       "example": "radial-radar",
       "component": "Spline",
-      "path": "/example/Spline/radial-radar",
+      "path": "/docs/components/Spline/radial-radar",
       "lineNumber": 39,
       "line": "<Points class=\"fill-primary stroke-surface-200\" />"
     },
     {
       "example": "duration",
       "component": "Tooltip",
-      "path": "/example/Tooltip/duration",
+      "path": "/docs/components/Tooltip/duration",
       "lineNumber": 54,
       "line": "<Points class=\"fill-primary\" />"
     },
     {
       "example": "multiple-overlapping-durations",
       "component": "Tooltip",
-      "path": "/example/Tooltip/multiple-overlapping-durations",
+      "path": "/docs/components/Tooltip/multiple-overlapping-durations",
       "lineNumber": 53,
       "line": "<Points class=\"fill-primary\" />"
     },
     {
       "example": "scatter-plot",
       "component": "Tooltip",
-      "path": "/example/Tooltip/scatter-plot",
+      "path": "/docs/components/Tooltip/scatter-plot",
       "lineNumber": 39,
       "line": "<Points class=\"fill-primary stroke-primary\" />"
     },
     {
       "example": "single-date-time",
       "component": "Tooltip",
-      "path": "/example/Tooltip/single-date-time",
+      "path": "/docs/components/Tooltip/single-date-time",
       "lineNumber": 42,
       "line": "<Points class=\"fill-primary\" />"
     },
     {
       "example": "playground",
       "component": "TransformContext",
-      "path": "/example/TransformContext/playground",
-      "lineNumber": 54,
+      "path": "/docs/components/TransformContext/playground",
+      "lineNumber": 55,
       "line": "<Points>"
     },
     {
       "example": "radius",
       "component": "Voronoi",
-      "path": "/example/Voronoi/radius",
+      "path": "/docs/components/Voronoi/radius",
       "lineNumber": 26,
       "line": "<Points r={2} class=\"fill-primary stroke-primary\" />"
     }
   ],
-  "updatedAt": "2026-01-06T13:02:21.867Z"
+  "updatedAt": "2026-02-07T20:21:32.188Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Polygon.json b/docs/src/examples/catalog/Polygon.json
index d7660363d..935b80554 100644
--- a/docs/src/examples/catalog/Polygon.json
+++ b/docs/src/examples/catalog/Polygon.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "10-point-star",
-      "path": "/example/Polygon/10-point-star",
+      "title": "10 point star",
+      "path": "/docs/components/Polygon/10-point-star",
       "components": [
         {
           "component": "Chart",
@@ -24,7 +25,8 @@
     },
     {
       "name": "12-point-star",
-      "path": "/example/Polygon/12-point-star",
+      "title": "12 point star",
+      "path": "/docs/components/Polygon/12-point-star",
       "components": [
         {
           "component": "Chart",
@@ -45,7 +47,8 @@
     },
     {
       "name": "14-point-star",
-      "path": "/example/Polygon/14-point-star",
+      "title": "14 point star",
+      "path": "/docs/components/Polygon/14-point-star",
       "components": [
         {
           "component": "Chart",
@@ -66,7 +69,8 @@
     },
     {
       "name": "16-point-star",
-      "path": "/example/Polygon/16-point-star",
+      "title": "16 point star",
+      "path": "/docs/components/Polygon/16-point-star",
       "components": [
         {
           "component": "Chart",
@@ -87,7 +91,8 @@
     },
     {
       "name": "18-point-star",
-      "path": "/example/Polygon/18-point-star",
+      "title": "18 point star",
+      "path": "/docs/components/Polygon/18-point-star",
       "components": [
         {
           "component": "Chart",
@@ -108,7 +113,8 @@
     },
     {
       "name": "20-point-star",
-      "path": "/example/Polygon/20-point-star",
+      "title": "20 point star",
+      "path": "/docs/components/Polygon/20-point-star",
       "components": [
         {
           "component": "Chart",
@@ -129,7 +135,8 @@
     },
     {
       "name": "6-point-star",
-      "path": "/example/Polygon/6-point-star",
+      "title": "6 point star",
+      "path": "/docs/components/Polygon/6-point-star",
       "components": [
         {
           "component": "Chart",
@@ -150,7 +157,8 @@
     },
     {
       "name": "8-point-star",
-      "path": "/example/Polygon/8-point-star",
+      "title": "8 point star",
+      "path": "/docs/components/Polygon/8-point-star",
       "components": [
         {
           "component": "Chart",
@@ -171,7 +179,8 @@
     },
     {
       "name": "arrow",
-      "path": "/example/Polygon/arrow",
+      "title": "arrow",
+      "path": "/docs/components/Polygon/arrow",
       "components": [
         {
           "component": "Chart",
@@ -197,7 +206,8 @@
     },
     {
       "name": "cross",
-      "path": "/example/Polygon/cross",
+      "title": "cross",
+      "path": "/docs/components/Polygon/cross",
       "components": [
         {
           "component": "Chart",
@@ -223,7 +233,8 @@
     },
     {
       "name": "diamond",
-      "path": "/example/Polygon/diamond",
+      "title": "diamond",
+      "path": "/docs/components/Polygon/diamond",
       "components": [
         {
           "component": "Chart",
@@ -244,7 +255,8 @@
     },
     {
       "name": "hexagon",
-      "path": "/example/Polygon/hexagon",
+      "title": "hexagon",
+      "path": "/docs/components/Polygon/hexagon",
       "components": [
         {
           "component": "Chart",
@@ -265,7 +277,8 @@
     },
     {
       "name": "octagon",
-      "path": "/example/Polygon/octagon",
+      "title": "octagon",
+      "path": "/docs/components/Polygon/octagon",
       "components": [
         {
           "component": "Chart",
@@ -286,7 +299,8 @@
     },
     {
       "name": "parallelogram",
-      "path": "/example/Polygon/parallelogram",
+      "title": "parallelogram",
+      "path": "/docs/components/Polygon/parallelogram",
       "components": [
         {
           "component": "Chart",
@@ -307,7 +321,8 @@
     },
     {
       "name": "pentagon",
-      "path": "/example/Polygon/pentagon",
+      "title": "pentagon",
+      "path": "/docs/components/Polygon/pentagon",
       "components": [
         {
           "component": "Chart",
@@ -328,7 +343,8 @@
     },
     {
       "name": "playground",
-      "path": "/example/Polygon/playground",
+      "title": "playground",
+      "path": "/docs/components/Polygon/playground",
       "components": [
         {
           "component": "Chart",
@@ -349,7 +365,8 @@
     },
     {
       "name": "rectangle",
-      "path": "/example/Polygon/rectangle",
+      "title": "rectangle",
+      "path": "/docs/components/Polygon/rectangle",
       "components": [
         {
           "component": "Chart",
@@ -370,7 +387,8 @@
     },
     {
       "name": "rhombus",
-      "path": "/example/Polygon/rhombus",
+      "title": "rhombus",
+      "path": "/docs/components/Polygon/rhombus",
       "components": [
         {
           "component": "Chart",
@@ -391,7 +409,8 @@
     },
     {
       "name": "square",
-      "path": "/example/Polygon/square",
+      "title": "square",
+      "path": "/docs/components/Polygon/square",
       "components": [
         {
           "component": "Chart",
@@ -412,7 +431,8 @@
     },
     {
       "name": "trapezoid",
-      "path": "/example/Polygon/trapezoid",
+      "title": "trapezoid",
+      "path": "/docs/components/Polygon/trapezoid",
       "components": [
         {
           "component": "Chart",
@@ -433,7 +453,8 @@
     },
     {
       "name": "triangle",
-      "path": "/example/Polygon/triangle",
+      "title": "triangle",
+      "path": "/docs/components/Polygon/triangle",
       "components": [
         {
           "component": "Chart",
@@ -457,171 +478,171 @@
     {
       "example": "single-stack-with-indicator",
       "component": "BarChart",
-      "path": "/example/BarChart/single-stack-with-indicator",
+      "path": "/docs/components/BarChart/single-stack-with-indicator",
       "lineNumber": 73,
       "line": "<Polygon"
     },
     {
       "example": "repeat-indefinitely",
       "component": "MotionPath",
-      "path": "/example/MotionPath/repeat-indefinitely",
+      "path": "/docs/components/MotionPath/repeat-indefinitely",
       "lineNumber": 48,
       "line": "<Polygon"
     },
     {
       "example": "rotate-object-with-path",
       "component": "MotionPath",
-      "path": "/example/MotionPath/rotate-object-with-path",
+      "path": "/docs/components/MotionPath/rotate-object-with-path",
       "lineNumber": 50,
       "line": "<Polygon"
     },
     {
       "example": "10-point-star",
       "component": "Polygon",
-      "path": "/example/Polygon/10-point-star",
+      "path": "/docs/components/Polygon/10-point-star",
       "lineNumber": 18,
       "line": "<Polygon"
     },
     {
       "example": "12-point-star",
       "component": "Polygon",
-      "path": "/example/Polygon/12-point-star",
+      "path": "/docs/components/Polygon/12-point-star",
       "lineNumber": 18,
       "line": "<Polygon"
     },
     {
       "example": "14-point-star",
       "component": "Polygon",
-      "path": "/example/Polygon/14-point-star",
+      "path": "/docs/components/Polygon/14-point-star",
       "lineNumber": 18,
       "line": "<Polygon"
     },
     {
       "example": "16-point-star",
       "component": "Polygon",
-      "path": "/example/Polygon/16-point-star",
+      "path": "/docs/components/Polygon/16-point-star",
       "lineNumber": 18,
       "line": "<Polygon"
     },
     {
       "example": "18-point-star",
       "component": "Polygon",
-      "path": "/example/Polygon/18-point-star",
+      "path": "/docs/components/Polygon/18-point-star",
       "lineNumber": 18,
       "line": "<Polygon"
     },
     {
       "example": "20-point-star",
       "component": "Polygon",
-      "path": "/example/Polygon/20-point-star",
+      "path": "/docs/components/Polygon/20-point-star",
       "lineNumber": 18,
       "line": "<Polygon"
     },
     {
       "example": "6-point-star",
       "component": "Polygon",
-      "path": "/example/Polygon/6-point-star",
+      "path": "/docs/components/Polygon/6-point-star",
       "lineNumber": 18,
       "line": "<Polygon"
     },
     {
       "example": "8-point-star",
       "component": "Polygon",
-      "path": "/example/Polygon/8-point-star",
+      "path": "/docs/components/Polygon/8-point-star",
       "lineNumber": 18,
       "line": "<Polygon"
     },
     {
       "example": "arrow",
       "component": "Polygon",
-      "path": "/example/Polygon/arrow",
+      "path": "/docs/components/Polygon/arrow",
       "lineNumber": 18,
       "line": "<Polygon"
     },
     {
       "example": "cross",
       "component": "Polygon",
-      "path": "/example/Polygon/cross",
+      "path": "/docs/components/Polygon/cross",
       "lineNumber": 18,
       "line": "<Polygon"
     },
     {
       "example": "diamond",
       "component": "Polygon",
-      "path": "/example/Polygon/diamond",
+      "path": "/docs/components/Polygon/diamond",
       "lineNumber": 14,
       "line": "<Polygon"
     },
     {
       "example": "hexagon",
       "component": "Polygon",
-      "path": "/example/Polygon/hexagon",
+      "path": "/docs/components/Polygon/hexagon",
       "lineNumber": 14,
       "line": "<Polygon"
     },
     {
       "example": "octagon",
       "component": "Polygon",
-      "path": "/example/Polygon/octagon",
+      "path": "/docs/components/Polygon/octagon",
       "lineNumber": 14,
       "line": "<Polygon"
     },
     {
       "example": "parallelogram",
       "component": "Polygon",
-      "path": "/example/Polygon/parallelogram",
+      "path": "/docs/components/Polygon/parallelogram",
       "lineNumber": 14,
       "line": "<Polygon"
     },
     {
       "example": "pentagon",
       "component": "Polygon",
-      "path": "/example/Polygon/pentagon",
+      "path": "/docs/components/Polygon/pentagon",
       "lineNumber": 14,
       "line": "<Polygon"
     },
     {
       "example": "playground",
       "component": "Polygon",
-      "path": "/example/Polygon/playground",
+      "path": "/docs/components/Polygon/playground",
       "lineNumber": 24,
       "line": "<Polygon cx={context.width / 2} cy={context.height / 2} r={100} {...config} />"
     },
     {
       "example": "rectangle",
       "component": "Polygon",
-      "path": "/example/Polygon/rectangle",
+      "path": "/docs/components/Polygon/rectangle",
       "lineNumber": 14,
       "line": "<Polygon"
     },
     {
       "example": "rhombus",
       "component": "Polygon",
-      "path": "/example/Polygon/rhombus",
+      "path": "/docs/components/Polygon/rhombus",
       "lineNumber": 14,
       "line": "<Polygon"
     },
     {
       "example": "square",
       "component": "Polygon",
-      "path": "/example/Polygon/square",
+      "path": "/docs/components/Polygon/square",
       "lineNumber": 14,
       "line": "<Polygon"
     },
     {
       "example": "trapezoid",
       "component": "Polygon",
-      "path": "/example/Polygon/trapezoid",
+      "path": "/docs/components/Polygon/trapezoid",
       "lineNumber": 14,
       "line": "<Polygon"
     },
     {
       "example": "triangle",
       "component": "Polygon",
-      "path": "/example/Polygon/triangle",
+      "path": "/docs/components/Polygon/triangle",
       "lineNumber": 14,
       "line": "<Polygon"
     }
   ],
-  "updatedAt": "2025-12-07T04:39:10.071Z"
+  "updatedAt": "2026-02-07T20:21:32.203Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/RadialGradient.json b/docs/src/examples/catalog/RadialGradient.json
index e2ca79754..a1d3b29a2 100644
--- a/docs/src/examples/catalog/RadialGradient.json
+++ b/docs/src/examples/catalog/RadialGradient.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "focal-location-and-radius-with-custom-colors",
-      "path": "/example/RadialGradient/focal-location-and-radius-with-custom-colors",
+      "title": "focal location and radius with custom colors",
+      "path": "/docs/components/RadialGradient/focal-location-and-radius-with-custom-colors",
       "components": [
         {
           "component": "Chart",
@@ -29,7 +30,8 @@
     },
     {
       "name": "spreadmethod",
-      "path": "/example/RadialGradient/spreadmethod",
+      "title": "spreadmethod",
+      "path": "/docs/components/RadialGradient/spreadmethod",
       "components": [
         {
           "component": "Chart",
@@ -55,7 +57,8 @@
     },
     {
       "name": "tailwind-colors",
-      "path": "/example/RadialGradient/tailwind-colors",
+      "title": "tailwind colors",
+      "path": "/docs/components/RadialGradient/tailwind-colors",
       "components": [
         {
           "component": "Chart",
@@ -81,7 +84,8 @@
     },
     {
       "name": "units",
-      "path": "/example/RadialGradient/units",
+      "title": "units",
+      "path": "/docs/components/RadialGradient/units",
       "components": [
         {
           "component": "Chart",
@@ -110,122 +114,122 @@
     {
       "example": "focal-location-and-radius-with-custom-colors",
       "component": "RadialGradient",
-      "path": "/example/RadialGradient/focal-location-and-radius-with-custom-colors",
+      "path": "/docs/components/RadialGradient/focal-location-and-radius-with-custom-colors",
       "lineNumber": 9,
       "line": "<RadialGradient stops={['hsl(60 100% 50%)', 'hsl(30 100% 40%)']}>"
     },
     {
       "example": "focal-location-and-radius-with-custom-colors",
       "component": "RadialGradient",
-      "path": "/example/RadialGradient/focal-location-and-radius-with-custom-colors",
+      "path": "/docs/components/RadialGradient/focal-location-and-radius-with-custom-colors",
       "lineNumber": 15,
       "line": "<RadialGradient stops={['hsl(60 100% 50%)', 'hsl(140 100% 40%)']} fx=\"20%\" fy=\"20%\">"
     },
     {
       "example": "focal-location-and-radius-with-custom-colors",
       "component": "RadialGradient",
-      "path": "/example/RadialGradient/focal-location-and-radius-with-custom-colors",
+      "path": "/docs/components/RadialGradient/focal-location-and-radius-with-custom-colors",
       "lineNumber": 21,
       "line": "<RadialGradient stops={['hsl(195 100% 50%)', 'hsl(270 100% 30%)']} r=\"30%\">"
     },
     {
       "example": "spreadmethod",
       "component": "RadialGradient",
-      "path": "/example/RadialGradient/spreadmethod",
+      "path": "/docs/components/RadialGradient/spreadmethod",
       "lineNumber": 9,
       "line": "<RadialGradient class=\"from-green-500 to-blue-500\" r=\"30%\" spreadMethod=\"pad\">"
     },
     {
       "example": "spreadmethod",
       "component": "RadialGradient",
-      "path": "/example/RadialGradient/spreadmethod",
+      "path": "/docs/components/RadialGradient/spreadmethod",
       "lineNumber": 15,
       "line": "<RadialGradient class=\"from-green-500 to-blue-500\" r=\"30%\" spreadMethod=\"reflect\">"
     },
     {
       "example": "spreadmethod",
       "component": "RadialGradient",
-      "path": "/example/RadialGradient/spreadmethod",
+      "path": "/docs/components/RadialGradient/spreadmethod",
       "lineNumber": 21,
       "line": "<RadialGradient class=\"from-green-500 to-blue-500\" r=\"30%\" spreadMethod=\"repeat\">"
     },
     {
       "example": "tailwind-colors",
       "component": "RadialGradient",
-      "path": "/example/RadialGradient/tailwind-colors",
+      "path": "/docs/components/RadialGradient/tailwind-colors",
       "lineNumber": 9,
       "line": "<RadialGradient id=\"tw-1\" class=\"from-pink-500 to-yellow-500\" />"
     },
     {
       "example": "tailwind-colors",
       "component": "RadialGradient",
-      "path": "/example/RadialGradient/tailwind-colors",
+      "path": "/docs/components/RadialGradient/tailwind-colors",
       "lineNumber": 10,
       "line": "<RadialGradient id=\"tw-2\" class=\"from-green-300 to-purple-600\" />"
     },
     {
       "example": "tailwind-colors",
       "component": "RadialGradient",
-      "path": "/example/RadialGradient/tailwind-colors",
+      "path": "/docs/components/RadialGradient/tailwind-colors",
       "lineNumber": 11,
       "line": "<RadialGradient id=\"tw-3\" class=\"from-gray-600 to-black\" />"
     },
     {
       "example": "tailwind-colors",
       "component": "RadialGradient",
-      "path": "/example/RadialGradient/tailwind-colors",
+      "path": "/docs/components/RadialGradient/tailwind-colors",
       "lineNumber": 12,
       "line": "<RadialGradient id=\"tw-4\" class=\"from-pink-300 to-indigo-400\" />"
     },
     {
       "example": "tailwind-colors",
       "component": "RadialGradient",
-      "path": "/example/RadialGradient/tailwind-colors",
+      "path": "/docs/components/RadialGradient/tailwind-colors",
       "lineNumber": 13,
       "line": "<RadialGradient id=\"tw-5\" class=\"from-yellow-100 to-yellow-500\" />"
     },
     {
       "example": "tailwind-colors",
       "component": "RadialGradient",
-      "path": "/example/RadialGradient/tailwind-colors",
+      "path": "/docs/components/RadialGradient/tailwind-colors",
       "lineNumber": 14,
       "line": "<RadialGradient id=\"tw-6\" class=\"from-blue-700 to-gray-900\" />"
     },
     {
       "example": "tailwind-colors",
       "component": "RadialGradient",
-      "path": "/example/RadialGradient/tailwind-colors",
+      "path": "/docs/components/RadialGradient/tailwind-colors",
       "lineNumber": 15,
       "line": "<RadialGradient id=\"tw-7\" class=\"from-sky-300 to-blue-500\" />"
     },
     {
       "example": "tailwind-colors",
       "component": "RadialGradient",
-      "path": "/example/RadialGradient/tailwind-colors",
+      "path": "/docs/components/RadialGradient/tailwind-colors",
       "lineNumber": 16,
       "line": "<RadialGradient id=\"tw-8\" class=\"from-red-500 to-red-800\" />"
     },
     {
       "example": "tailwind-colors",
       "component": "RadialGradient",
-      "path": "/example/RadialGradient/tailwind-colors",
+      "path": "/docs/components/RadialGradient/tailwind-colors",
       "lineNumber": 17,
       "line": "<RadialGradient id=\"tw-9\" class=\"from-blue-400 to-emerald-400\" />"
     },
     {
       "example": "units",
       "component": "RadialGradient",
-      "path": "/example/RadialGradient/units",
+      "path": "/docs/components/RadialGradient/units",
       "lineNumber": 9,
       "line": "<RadialGradient class=\"from-green-500 to-blue-500\" units=\"objectBoundingBox\">"
     },
     {
       "example": "units",
       "component": "RadialGradient",
-      "path": "/example/RadialGradient/units",
+      "path": "/docs/components/RadialGradient/units",
       "lineNumber": 17,
       "line": "<RadialGradient class=\"from-green-500 to-blue-500\" units=\"userSpaceOnUse\">"
     }
   ],
-  "updatedAt": "2025-11-12T16:58:10.750Z"
+  "updatedAt": "2026-02-07T20:21:32.217Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Rect.json b/docs/src/examples/catalog/Rect.json
index ce9671770..36fbd1057 100644
--- a/docs/src/examples/catalog/Rect.json
+++ b/docs/src/examples/catalog/Rect.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "styling-using-attributes",
-      "path": "/example/Rect/styling-using-attributes",
+      "title": "styling using attributes",
+      "path": "/docs/components/Rect/styling-using-attributes",
       "components": [
         {
           "component": "Chart",
@@ -29,7 +30,8 @@
     },
     {
       "name": "styling-using-classes",
-      "path": "/example/Rect/styling-using-classes",
+      "title": "styling using classes",
+      "path": "/docs/components/Rect/styling-using-classes",
       "components": [
         {
           "component": "Chart",
@@ -55,7 +57,8 @@
     },
     {
       "name": "styling-using-css-variables",
-      "path": "/example/Rect/styling-using-css-variables",
+      "title": "styling using css variables",
+      "path": "/docs/components/Rect/styling-using-css-variables",
       "components": [
         {
           "component": "Chart",
@@ -84,633 +87,633 @@
     {
       "example": "handle-arrows",
       "component": "BrushContext",
-      "path": "/example/BrushContext/handle-arrows",
+      "path": "/docs/components/BrushContext/handle-arrows",
       "lineNumber": 25,
       "line": "<rect"
     },
     {
       "example": "handle-arrows",
       "component": "BrushContext",
-      "path": "/example/BrushContext/handle-arrows",
+      "path": "/docs/components/BrushContext/handle-arrows",
       "lineNumber": 37,
       "line": "<rect"
     },
     {
       "example": "rounded-cells",
       "component": "Calendar",
-      "path": "/example/Calendar/rounded-cells",
+      "path": "/docs/components/Calendar/rounded-cells",
       "lineNumber": 45,
       "line": "<Rect"
     },
     {
       "example": "basic",
       "component": "Dagre",
-      "path": "/example/Dagre/basic",
+      "path": "/docs/components/Dagre/basic",
       "lineNumber": 66,
       "line": "<Rect"
     },
     {
       "example": "playground",
       "component": "Dagre",
-      "path": "/example/Dagre/playground",
+      "path": "/docs/components/Dagre/playground",
       "lineNumber": 67,
       "line": "<Rect"
     },
     {
       "example": "software-user-flow",
       "component": "Dagre",
-      "path": "/example/Dagre/software-user-flow",
+      "path": "/docs/components/Dagre/software-user-flow",
       "lineNumber": 78,
       "line": "<Rect"
     },
     {
       "example": "tcp-state-diagram",
       "component": "Dagre",
-      "path": "/example/Dagre/tcp-state-diagram",
-      "lineNumber": 76,
+      "path": "/docs/components/Dagre/tcp-state-diagram",
+      "lineNumber": 77,
       "line": "<Rect"
     },
     {
       "example": "direction-with-custom-colors",
       "component": "LinearGradient",
-      "path": "/example/LinearGradient/direction-with-custom-colors",
+      "path": "/docs/components/LinearGradient/direction-with-custom-colors",
       "lineNumber": 9,
       "line": "<Rect x={120 * 0} y={0} width={100} height={300} rx={8} fill={gradient} />"
     },
     {
       "example": "direction-with-custom-colors",
       "component": "LinearGradient",
-      "path": "/example/LinearGradient/direction-with-custom-colors",
+      "path": "/docs/components/LinearGradient/direction-with-custom-colors",
       "lineNumber": 15,
       "line": "<Rect x={120 * 1} y={0} width={100} height={300} rx={8} fill={gradient} />"
     },
     {
       "example": "direction-with-custom-colors",
       "component": "LinearGradient",
-      "path": "/example/LinearGradient/direction-with-custom-colors",
+      "path": "/docs/components/LinearGradient/direction-with-custom-colors",
       "lineNumber": 21,
       "line": "<Rect x={120 * 2} y={0} width={100} height={300} rx={8} fill={gradient} />"
     },
     {
       "example": "explicit-offsets",
       "component": "LinearGradient",
-      "path": "/example/LinearGradient/explicit-offsets",
+      "path": "/docs/components/LinearGradient/explicit-offsets",
       "lineNumber": 14,
       "line": "<Rect x={120 * 0} y={0} width={100} height={300} rx={8} fill={gradient} />"
     },
     {
       "example": "explicit-offsets",
       "component": "LinearGradient",
-      "path": "/example/LinearGradient/explicit-offsets",
+      "path": "/docs/components/LinearGradient/explicit-offsets",
       "lineNumber": 26,
       "line": "<Rect x={120 * 1} y={0} width={100} height={300} rx={8} fill={gradient} />"
     },
     {
       "example": "explicit-offsets",
       "component": "LinearGradient",
-      "path": "/example/LinearGradient/explicit-offsets",
+      "path": "/docs/components/LinearGradient/explicit-offsets",
       "lineNumber": 38,
       "line": "<Rect x={120 * 2} y={0} width={100} height={300} rx={8} fill={gradient} />"
     },
     {
       "example": "tailwind-colors",
       "component": "LinearGradient",
-      "path": "/example/LinearGradient/tailwind-colors",
+      "path": "/docs/components/LinearGradient/tailwind-colors",
       "lineNumber": 10,
       "line": "<Rect x={120 * 0} y={0} width={100} height={300} rx={8} fill={gradient} />"
     },
     {
       "example": "tailwind-colors",
       "component": "LinearGradient",
-      "path": "/example/LinearGradient/tailwind-colors",
+      "path": "/docs/components/LinearGradient/tailwind-colors",
       "lineNumber": 16,
       "line": "<Rect x={120 * 1} y={0} width={100} height={300} rx={8} fill={gradient} />"
     },
     {
       "example": "tailwind-colors",
       "component": "LinearGradient",
-      "path": "/example/LinearGradient/tailwind-colors",
+      "path": "/docs/components/LinearGradient/tailwind-colors",
       "lineNumber": 22,
       "line": "<Rect x={120 * 2} y={0} width={100} height={300} rx={8} fill={gradient} />"
     },
     {
       "example": "tailwind-colors",
       "component": "LinearGradient",
-      "path": "/example/LinearGradient/tailwind-colors",
+      "path": "/docs/components/LinearGradient/tailwind-colors",
       "lineNumber": 28,
       "line": "<Rect x={120 * 3} y={0} width={100} height={300} rx={8} fill={gradient} />"
     },
     {
       "example": "tailwind-colors",
       "component": "LinearGradient",
-      "path": "/example/LinearGradient/tailwind-colors",
+      "path": "/docs/components/LinearGradient/tailwind-colors",
       "lineNumber": 34,
       "line": "<Rect x={120 * 4} y={0} width={100} height={300} rx={8} fill={gradient} />"
     },
     {
       "example": "tailwind-colors",
       "component": "LinearGradient",
-      "path": "/example/LinearGradient/tailwind-colors",
+      "path": "/docs/components/LinearGradient/tailwind-colors",
       "lineNumber": 40,
       "line": "<Rect x={120 * 5} y={0} width={100} height={300} rx={8} fill={gradient} />"
     },
     {
       "example": "tailwind-colors",
       "component": "LinearGradient",
-      "path": "/example/LinearGradient/tailwind-colors",
+      "path": "/docs/components/LinearGradient/tailwind-colors",
       "lineNumber": 46,
       "line": "<Rect x={120 * 6} y={0} width={100} height={300} rx={8} fill={gradient} />"
     },
     {
       "example": "tailwind-colors",
       "component": "LinearGradient",
-      "path": "/example/LinearGradient/tailwind-colors",
+      "path": "/docs/components/LinearGradient/tailwind-colors",
       "lineNumber": 52,
       "line": "<Rect x={120 * 7} y={0} width={100} height={300} rx={8} fill={gradient} />"
     },
     {
       "example": "tailwind-colors",
       "component": "LinearGradient",
-      "path": "/example/LinearGradient/tailwind-colors",
+      "path": "/docs/components/LinearGradient/tailwind-colors",
       "lineNumber": 58,
       "line": "<Rect x={120 * 8} y={0} width={100} height={300} rx={8} fill={gradient} />"
     },
     {
       "example": "units",
       "component": "LinearGradient",
-      "path": "/example/LinearGradient/units",
+      "path": "/docs/components/LinearGradient/units",
       "lineNumber": 11,
       "line": "<Rect x={0 + i * 120} y={0} width={100} height={140} rx={8} fill={gradient} />"
     },
     {
       "example": "units",
       "component": "LinearGradient",
-      "path": "/example/LinearGradient/units",
+      "path": "/docs/components/LinearGradient/units",
       "lineNumber": 19,
       "line": "<Rect x={0 + i * 120} y={160} width={100} height={140} rx={8} fill={gradient} />"
     },
     {
       "example": "filterable",
       "component": "Partition",
-      "path": "/example/Partition/filterable",
+      "path": "/docs/components/Partition/filterable",
       "lineNumber": 126,
       "line": "<Rect"
     },
     {
       "example": "horizontal",
       "component": "Partition",
-      "path": "/example/Partition/horizontal",
+      "path": "/docs/components/Partition/horizontal",
       "lineNumber": 109,
       "line": "<Rect"
     },
     {
       "example": "vertical",
       "component": "Partition",
-      "path": "/example/Partition/vertical",
+      "path": "/docs/components/Partition/vertical",
       "lineNumber": 110,
       "line": "<Rect"
     },
     {
       "example": "circles",
       "component": "Pattern",
-      "path": "/example/Pattern/circles",
+      "path": "/docs/components/Pattern/circles",
       "lineNumber": 9,
       "line": "<Rect"
     },
     {
       "example": "circles",
       "component": "Pattern",
-      "path": "/example/Pattern/circles",
+      "path": "/docs/components/Pattern/circles",
       "lineNumber": 23,
       "line": "<Rect"
     },
     {
       "example": "circles",
       "component": "Pattern",
-      "path": "/example/Pattern/circles",
+      "path": "/docs/components/Pattern/circles",
       "lineNumber": 37,
       "line": "<Rect"
     },
     {
       "example": "circles",
       "component": "Pattern",
-      "path": "/example/Pattern/circles",
+      "path": "/docs/components/Pattern/circles",
       "lineNumber": 51,
       "line": "<Rect"
     },
     {
       "example": "circles",
       "component": "Pattern",
-      "path": "/example/Pattern/circles",
+      "path": "/docs/components/Pattern/circles",
       "lineNumber": 65,
       "line": "<Rect"
     },
     {
       "example": "circles",
       "component": "Pattern",
-      "path": "/example/Pattern/circles",
+      "path": "/docs/components/Pattern/circles",
       "lineNumber": 79,
       "line": "<Rect"
     },
     {
       "example": "circles-custom-pattern-svg-only",
       "component": "Pattern",
-      "path": "/example/Pattern/circles-custom-pattern-svg-only",
+      "path": "/docs/components/Pattern/circles-custom-pattern-svg-only",
       "lineNumber": 52,
       "line": "<rect"
     },
     {
       "example": "lineargradient-as-pattern",
       "component": "Pattern",
-      "path": "/example/Pattern/lineargradient-as-pattern",
+      "path": "/docs/components/Pattern/lineargradient-as-pattern",
       "lineNumber": 11,
       "line": "<Rect x={120 * 0} y={0} width={100} height={300} rx={8} fill={pattern} />"
     },
     {
       "example": "lineargradient-as-pattern",
       "component": "Pattern",
-      "path": "/example/Pattern/lineargradient-as-pattern",
+      "path": "/docs/components/Pattern/lineargradient-as-pattern",
       "lineNumber": 21,
       "line": "<Rect x={120 * 1} y={0} width={100} height={300} rx={8} fill={pattern} />"
     },
     {
       "example": "lineargradient-as-pattern",
       "component": "Pattern",
-      "path": "/example/Pattern/lineargradient-as-pattern",
+      "path": "/docs/components/Pattern/lineargradient-as-pattern",
       "lineNumber": 31,
       "line": "<Rect x={120 * 2} y={0} width={100} height={300} rx={8} fill={pattern} />"
     },
     {
       "example": "lineargradient-as-pattern",
       "component": "Pattern",
-      "path": "/example/Pattern/lineargradient-as-pattern",
+      "path": "/docs/components/Pattern/lineargradient-as-pattern",
       "lineNumber": 41,
       "line": "<Rect x={120 * 3} y={0} width={100} height={300} rx={8} fill={pattern} />"
     },
     {
       "example": "lineargradient-as-pattern",
       "component": "Pattern",
-      "path": "/example/Pattern/lineargradient-as-pattern",
+      "path": "/docs/components/Pattern/lineargradient-as-pattern",
       "lineNumber": 51,
       "line": "<Rect x={120 * 4} y={0} width={100} height={300} rx={8} fill={pattern} />"
     },
     {
       "example": "lines",
       "component": "Pattern",
-      "path": "/example/Pattern/lines",
+      "path": "/docs/components/Pattern/lines",
       "lineNumber": 9,
       "line": "<Rect"
     },
     {
       "example": "lines",
       "component": "Pattern",
-      "path": "/example/Pattern/lines",
+      "path": "/docs/components/Pattern/lines",
       "lineNumber": 23,
       "line": "<Rect"
     },
     {
       "example": "lines",
       "component": "Pattern",
-      "path": "/example/Pattern/lines",
+      "path": "/docs/components/Pattern/lines",
       "lineNumber": 37,
       "line": "<Rect"
     },
     {
       "example": "lines",
       "component": "Pattern",
-      "path": "/example/Pattern/lines",
+      "path": "/docs/components/Pattern/lines",
       "lineNumber": 51,
       "line": "<Rect"
     },
     {
       "example": "lines",
       "component": "Pattern",
-      "path": "/example/Pattern/lines",
+      "path": "/docs/components/Pattern/lines",
       "lineNumber": 65,
       "line": "<Rect"
     },
     {
       "example": "lines",
       "component": "Pattern",
-      "path": "/example/Pattern/lines",
+      "path": "/docs/components/Pattern/lines",
       "lineNumber": 79,
       "line": "<Rect"
     },
     {
       "example": "lines-custom-pattern-svg-only",
       "component": "Pattern",
-      "path": "/example/Pattern/lines-custom-pattern-svg-only",
+      "path": "/docs/components/Pattern/lines-custom-pattern-svg-only",
       "lineNumber": 13,
       "line": "<rect"
     },
     {
       "example": "lines-custom-pattern-svg-only",
       "component": "Pattern",
-      "path": "/example/Pattern/lines-custom-pattern-svg-only",
+      "path": "/docs/components/Pattern/lines-custom-pattern-svg-only",
       "lineNumber": 31,
       "line": "<rect"
     },
     {
       "example": "lines-custom-pattern-svg-only",
       "component": "Pattern",
-      "path": "/example/Pattern/lines-custom-pattern-svg-only",
+      "path": "/docs/components/Pattern/lines-custom-pattern-svg-only",
       "lineNumber": 50,
       "line": "<rect"
     },
     {
       "example": "lines-custom-pattern-svg-only",
       "component": "Pattern",
-      "path": "/example/Pattern/lines-custom-pattern-svg-only",
+      "path": "/docs/components/Pattern/lines-custom-pattern-svg-only",
       "lineNumber": 68,
       "line": "<rect"
     },
     {
       "example": "lines-custom-pattern-svg-only",
       "component": "Pattern",
-      "path": "/example/Pattern/lines-custom-pattern-svg-only",
+      "path": "/docs/components/Pattern/lines-custom-pattern-svg-only",
       "lineNumber": 86,
       "line": "<rect"
     },
     {
       "example": "lines-custom-pattern-svg-only",
       "component": "Pattern",
-      "path": "/example/Pattern/lines-custom-pattern-svg-only",
+      "path": "/docs/components/Pattern/lines-custom-pattern-svg-only",
       "lineNumber": 105,
       "line": "<rect"
     },
     {
       "example": "with-fill-color",
       "component": "Pattern",
-      "path": "/example/Pattern/with-fill-color",
+      "path": "/docs/components/Pattern/with-fill-color",
       "lineNumber": 9,
       "line": "<Rect x={120 * 0} y={0} width={100} height={300} rx={8} fill={pattern} />"
     },
     {
       "example": "with-fill-color",
       "component": "Pattern",
-      "path": "/example/Pattern/with-fill-color",
+      "path": "/docs/components/Pattern/with-fill-color",
       "lineNumber": 15,
       "line": "<Rect x={120 * 1} y={0} width={100} height={300} rx={8} fill={pattern} />"
     },
     {
       "example": "with-fill-color",
       "component": "Pattern",
-      "path": "/example/Pattern/with-fill-color",
+      "path": "/docs/components/Pattern/with-fill-color",
       "lineNumber": 25,
       "line": "<Rect x={120 * 2} y={0} width={100} height={300} rx={8} fill={pattern} />"
     },
     {
       "example": "with-fill-color",
       "component": "Pattern",
-      "path": "/example/Pattern/with-fill-color",
+      "path": "/docs/components/Pattern/with-fill-color",
       "lineNumber": 35,
       "line": "<Rect x={120 * 3} y={0} width={100} height={300} rx={8} fill={pattern} />"
     },
     {
       "example": "with-fill-color",
       "component": "Pattern",
-      "path": "/example/Pattern/with-fill-color",
+      "path": "/docs/components/Pattern/with-fill-color",
       "lineNumber": 41,
       "line": "<Rect x={120 * 4} y={0} width={100} height={300} rx={8} fill={pattern} />"
     },
     {
       "example": "with-fill-color",
       "component": "Pattern",
-      "path": "/example/Pattern/with-fill-color",
+      "path": "/docs/components/Pattern/with-fill-color",
       "lineNumber": 54,
       "line": "<Rect x={120 * 5} y={0} width={100} height={300} rx={8} fill={pattern} />"
     },
     {
       "example": "with-lineargradient",
       "component": "Pattern",
-      "path": "/example/Pattern/with-lineargradient",
+      "path": "/docs/components/Pattern/with-lineargradient",
       "lineNumber": 9,
       "line": "<Rect x={120 * 0} y={0} width={100} height={300} rx={8} fill={gradient} />"
     },
     {
       "example": "with-lineargradient",
       "component": "Pattern",
-      "path": "/example/Pattern/with-lineargradient",
+      "path": "/docs/components/Pattern/with-lineargradient",
       "lineNumber": 13,
       "line": "<Rect x={120 * 0} y={0} width={100} height={300} rx={8} fill={pattern} />"
     },
     {
       "example": "with-lineargradient",
       "component": "Pattern",
-      "path": "/example/Pattern/with-lineargradient",
+      "path": "/docs/components/Pattern/with-lineargradient",
       "lineNumber": 21,
       "line": "<Rect x={120 * 1} y={0} width={100} height={300} rx={8} fill={gradient} />"
     },
     {
       "example": "with-lineargradient",
       "component": "Pattern",
-      "path": "/example/Pattern/with-lineargradient",
+      "path": "/docs/components/Pattern/with-lineargradient",
       "lineNumber": 25,
       "line": "<Rect x={120 * 1} y={0} width={100} height={300} rx={8} fill={pattern} />"
     },
     {
       "example": "with-lineargradient",
       "component": "Pattern",
-      "path": "/example/Pattern/with-lineargradient",
+      "path": "/docs/components/Pattern/with-lineargradient",
       "lineNumber": 33,
       "line": "<Rect x={120 * 2} y={0} width={100} height={300} rx={8} fill={gradient} />"
     },
     {
       "example": "with-lineargradient",
       "component": "Pattern",
-      "path": "/example/Pattern/with-lineargradient",
+      "path": "/docs/components/Pattern/with-lineargradient",
       "lineNumber": 37,
       "line": "<Rect x={120 * 2} y={0} width={100} height={300} rx={8} fill={pattern} />"
     },
     {
       "example": "with-lineargradient",
       "component": "Pattern",
-      "path": "/example/Pattern/with-lineargradient",
+      "path": "/docs/components/Pattern/with-lineargradient",
       "lineNumber": 45,
       "line": "<Rect x={120 * 3} y={0} width={100} height={300} rx={8} fill={gradient} />"
     },
     {
       "example": "with-lineargradient",
       "component": "Pattern",
-      "path": "/example/Pattern/with-lineargradient",
+      "path": "/docs/components/Pattern/with-lineargradient",
       "lineNumber": 49,
       "line": "<Rect x={120 * 3} y={0} width={100} height={300} rx={8} fill={pattern} />"
     },
     {
       "example": "with-lineargradient",
       "component": "Pattern",
-      "path": "/example/Pattern/with-lineargradient",
+      "path": "/docs/components/Pattern/with-lineargradient",
       "lineNumber": 57,
       "line": "<Rect x={120 * 4} y={0} width={100} height={300} rx={8} fill={gradient} />"
     },
     {
       "example": "with-lineargradient",
       "component": "Pattern",
-      "path": "/example/Pattern/with-lineargradient",
+      "path": "/docs/components/Pattern/with-lineargradient",
       "lineNumber": 61,
       "line": "<Rect x={120 * 4} y={0} width={100} height={300} rx={8} fill={pattern} />"
     },
     {
       "example": "with-lineargradient",
       "component": "Pattern",
-      "path": "/example/Pattern/with-lineargradient",
+      "path": "/docs/components/Pattern/with-lineargradient",
       "lineNumber": 69,
       "line": "<Rect x={120 * 5} y={0} width={100} height={300} rx={8} fill={gradient} />"
     },
     {
       "example": "with-lineargradient",
       "component": "Pattern",
-      "path": "/example/Pattern/with-lineargradient",
+      "path": "/docs/components/Pattern/with-lineargradient",
       "lineNumber": 79,
       "line": "<Rect x={120 * 5} y={0} width={100} height={300} rx={8} fill={pattern} />"
     },
     {
       "example": "styling-using-attributes",
       "component": "Rect",
-      "path": "/example/Rect/styling-using-attributes",
+      "path": "/docs/components/Rect/styling-using-attributes",
       "lineNumber": 14,
       "line": "<Rect x={50} y={50} width={100} height={150} />"
     },
     {
       "example": "styling-using-attributes",
       "component": "Rect",
-      "path": "/example/Rect/styling-using-attributes",
+      "path": "/docs/components/Rect/styling-using-attributes",
       "lineNumber": 15,
       "line": "<Rect x={90} y={80} width={200} height={100} fill=\"var(--color-primary)\" />"
     },
     {
       "example": "styling-using-attributes",
       "component": "Rect",
-      "path": "/example/Rect/styling-using-attributes",
+      "path": "/docs/components/Rect/styling-using-attributes",
       "lineNumber": 16,
       "line": "<Rect"
     },
     {
       "example": "styling-using-classes",
       "component": "Rect",
-      "path": "/example/Rect/styling-using-classes",
+      "path": "/docs/components/Rect/styling-using-classes",
       "lineNumber": 14,
       "line": "<Rect x={50} y={50} width={100} height={150} />"
     },
     {
       "example": "styling-using-classes",
       "component": "Rect",
-      "path": "/example/Rect/styling-using-classes",
+      "path": "/docs/components/Rect/styling-using-classes",
       "lineNumber": 15,
       "line": "<Rect x={90} y={80} width={200} height={100} class=\"fill-primary bg-primary\" />"
     },
     {
       "example": "styling-using-classes",
       "component": "Rect",
-      "path": "/example/Rect/styling-using-classes",
+      "path": "/docs/components/Rect/styling-using-classes",
       "lineNumber": 16,
       "line": "<Rect"
     },
     {
       "example": "styling-using-css-variables",
       "component": "Rect",
-      "path": "/example/Rect/styling-using-css-variables",
+      "path": "/docs/components/Rect/styling-using-css-variables",
       "lineNumber": 14,
       "line": "<Rect x={50} y={50} width={100} height={150} />"
     },
     {
       "example": "styling-using-css-variables",
       "component": "Rect",
-      "path": "/example/Rect/styling-using-css-variables",
+      "path": "/docs/components/Rect/styling-using-css-variables",
       "lineNumber": 15,
       "line": "<Rect x={90} y={80} width={200} height={100} style=\"--fill-color: var(--color-primary);\" />"
     },
     {
       "example": "styling-using-css-variables",
       "component": "Rect",
-      "path": "/example/Rect/styling-using-css-variables",
+      "path": "/docs/components/Rect/styling-using-css-variables",
       "lineNumber": 16,
       "line": "<Rect"
     },
     {
       "example": "complex",
       "component": "Sankey",
-      "path": "/example/Sankey/complex",
+      "path": "/docs/components/Sankey/complex",
       "lineNumber": 90,
       "line": "<Rect"
     },
     {
       "example": "hierarchy",
       "component": "Sankey",
-      "path": "/example/Sankey/hierarchy",
+      "path": "/docs/components/Sankey/hierarchy",
       "lineNumber": 101,
       "line": "<Rect"
     },
     {
       "example": "node-select",
       "component": "Sankey",
-      "path": "/example/Sankey/node-select",
+      "path": "/docs/components/Sankey/node-select",
       "lineNumber": 43,
       "line": "<Rect"
     },
     {
       "example": "simple",
       "component": "Sankey",
-      "path": "/example/Sankey/simple",
+      "path": "/docs/components/Sankey/simple",
       "lineNumber": 19,
       "line": "<Rect width={nodeWidth} height={nodeHeight} class=\"fill-primary\" />"
     },
     {
       "example": "tooltip",
       "component": "Sankey",
-      "path": "/example/Sankey/tooltip",
+      "path": "/docs/components/Sankey/tooltip",
       "lineNumber": 31,
       "line": "<Rect"
     },
     {
       "example": "basic",
       "component": "Tree",
-      "path": "/example/Tree/basic",
-      "lineNumber": 103,
+      "path": "/docs/components/Tree/basic",
+      "lineNumber": 104,
       "line": "<Rect"
     },
     {
       "example": "basic",
       "component": "Treemap",
-      "path": "/example/Treemap/basic",
+      "path": "/docs/components/Treemap/basic",
       "lineNumber": 42,
       "line": "<Rect"
     },
     {
       "example": "complex",
       "component": "Treemap",
-      "path": "/example/Treemap/complex",
+      "path": "/docs/components/Treemap/complex",
       "lineNumber": 96,
       "line": "<Rect"
     },
     {
       "example": "nested-filter",
       "component": "Treemap",
-      "path": "/example/Treemap/nested-filter",
+      "path": "/docs/components/Treemap/nested-filter",
       "lineNumber": 143,
       "line": "<Rect"
     },
     {
       "example": "nested-zoom",
       "component": "Treemap",
-      "path": "/example/Treemap/nested-zoom",
+      "path": "/docs/components/Treemap/nested-zoom",
       "lineNumber": 114,
       "line": "<Rect"
     },
     {
       "example": "playground",
       "component": "Treemap",
-      "path": "/example/Treemap/playground",
+      "path": "/docs/components/Treemap/playground",
       "lineNumber": 142,
       "line": "<Rect"
     },
     {
       "example": "stacked-zoom",
       "component": "Treemap",
-      "path": "/example/Treemap/stacked-zoom",
+      "path": "/docs/components/Treemap/stacked-zoom",
       "lineNumber": 102,
       "line": "<Rect"
     }
   ],
-  "updatedAt": "2025-12-29T21:36:45.237Z"
+  "updatedAt": "2026-02-07T20:21:32.231Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/RectClipPath.json b/docs/src/examples/catalog/RectClipPath.json
index cb183d881..c2bb0b4d6 100644
--- a/docs/src/examples/catalog/RectClipPath.json
+++ b/docs/src/examples/catalog/RectClipPath.json
@@ -5,136 +5,136 @@
     {
       "example": "clipped-area-on-tooltip",
       "component": "Area",
-      "path": "/example/Area/clipped-area-on-tooltip",
+      "path": "/docs/components/Area/clipped-area-on-tooltip",
       "lineNumber": 35,
       "line": "<RectClipPath"
     },
     {
       "example": "highlight-color-based-on-value-using-color-scale",
       "component": "Area",
-      "path": "/example/Area/highlight-color-based-on-value-using-color-scale",
+      "path": "/docs/components/Area/highlight-color-based-on-value-using-color-scale",
       "lineNumber": 32,
       "line": "<RectClipPath x={0} y={0} width={context.width} height={context.yScale(0)}>"
     },
     {
       "example": "highlight-color-based-on-value-using-color-scale",
       "component": "Area",
-      "path": "/example/Area/highlight-color-based-on-value-using-color-scale",
+      "path": "/docs/components/Area/highlight-color-based-on-value-using-color-scale",
       "lineNumber": 35,
       "line": "<RectClipPath"
     },
     {
       "example": "highlight-color-based-on-value-using-tooltip-slot-prop",
       "component": "Area",
-      "path": "/example/Area/highlight-color-based-on-value-using-tooltip-slot-prop",
+      "path": "/docs/components/Area/highlight-color-based-on-value-using-tooltip-slot-prop",
       "lineNumber": 21,
       "line": "<RectClipPath x={0} y={0} width={context.width} height={context.yScale(0)}>"
     },
     {
       "example": "highlight-color-based-on-value-using-tooltip-slot-prop",
       "component": "Area",
-      "path": "/example/Area/highlight-color-based-on-value-using-tooltip-slot-prop",
+      "path": "/docs/components/Area/highlight-color-based-on-value-using-tooltip-slot-prop",
       "lineNumber": 24,
       "line": "<RectClipPath"
     },
     {
       "example": "threshold-with-rectclippath",
       "component": "Area",
-      "path": "/example/Area/threshold-with-rectclippath",
+      "path": "/docs/components/Area/threshold-with-rectclippath",
       "lineNumber": 21,
       "line": "<RectClipPath x={0} y={0} width={context.width} height={context.yScale(0)}>"
     },
     {
       "example": "threshold-with-rectclippath",
       "component": "Area",
-      "path": "/example/Area/threshold-with-rectclippath",
+      "path": "/docs/components/Area/threshold-with-rectclippath",
       "lineNumber": 24,
       "line": "<RectClipPath"
     },
     {
       "example": "threshold-with-rectclippath-over-under",
       "component": "Area",
-      "path": "/example/Area/threshold-with-rectclippath-over-under",
+      "path": "/docs/components/Area/threshold-with-rectclippath-over-under",
       "lineNumber": 21,
       "line": "<RectClipPath x={0} y={0} width={context.width} height={context.yScale(0)}>"
     },
     {
       "example": "threshold-with-rectclippath-over-under",
       "component": "Area",
-      "path": "/example/Area/threshold-with-rectclippath-over-under",
+      "path": "/docs/components/Area/threshold-with-rectclippath-over-under",
       "lineNumber": 24,
       "line": "<RectClipPath"
     },
     {
       "example": "horizontal-tooltip-and-clipped-highlight",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-tooltip-and-clipped-highlight",
+      "path": "/docs/components/Bars/horizontal-tooltip-and-clipped-highlight",
       "lineNumber": 35,
       "line": "<RectClipPath x={area.x} y={area.y} width={area.width} height={area.height} motion=\"spring\">"
     },
     {
       "example": "vertical-tooltip-and-clipped-highlight",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tooltip-and-clipped-highlight",
+      "path": "/docs/components/Bars/vertical-tooltip-and-clipped-highlight",
       "lineNumber": 34,
       "line": "<RectClipPath x={area.x} y={area.y} width={area.width} height={area.height} motion=\"spring\">"
     },
     {
       "example": "filterable",
       "component": "Partition",
-      "path": "/example/Partition/filterable",
+      "path": "/docs/components/Partition/filterable",
       "lineNumber": 137,
       "line": "<RectClipPath"
     },
     {
       "example": "horizontal",
       "component": "Partition",
-      "path": "/example/Partition/horizontal",
+      "path": "/docs/components/Partition/horizontal",
       "lineNumber": 106,
       "line": "<RectClipPath width={nodeWidth} height={nodeHeight}>"
     },
     {
       "example": "vertical",
       "component": "Partition",
-      "path": "/example/Partition/vertical",
+      "path": "/docs/components/Partition/vertical",
       "lineNumber": 107,
       "line": "<RectClipPath width={nodeWidth} height={nodeHeight}>"
     },
     {
       "example": "complex",
       "component": "Treemap",
-      "path": "/example/Treemap/complex",
+      "path": "/docs/components/Treemap/complex",
       "lineNumber": 107,
       "line": "<RectClipPath width={nodeWidth} height={nodeHeight}>"
     },
     {
       "example": "nested-filter",
       "component": "Treemap",
-      "path": "/example/Treemap/nested-filter",
+      "path": "/docs/components/Treemap/nested-filter",
       "lineNumber": 155,
       "line": "<RectClipPath"
     },
     {
       "example": "nested-zoom",
       "component": "Treemap",
-      "path": "/example/Treemap/nested-zoom",
+      "path": "/docs/components/Treemap/nested-zoom",
       "lineNumber": 125,
       "line": "<RectClipPath width={nodeWidth} height={nodeHeight}>"
     },
     {
       "example": "playground",
       "component": "Treemap",
-      "path": "/example/Treemap/playground",
+      "path": "/docs/components/Treemap/playground",
       "lineNumber": 153,
       "line": "<RectClipPath width={nodeWidth} height={nodeHeight}>"
     },
     {
       "example": "stacked-zoom",
       "component": "Treemap",
-      "path": "/example/Treemap/stacked-zoom",
+      "path": "/docs/components/Treemap/stacked-zoom",
       "lineNumber": 98,
       "line": "<RectClipPath width={nodeWidth} height={nodeHeight}>"
     }
   ],
-  "updatedAt": "2025-12-29T21:36:45.254Z"
+  "updatedAt": "2026-02-07T17:00:32.487Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Rule.json b/docs/src/examples/catalog/Rule.json
index 699454dd5..cfd1f9d65 100644
--- a/docs/src/examples/catalog/Rule.json
+++ b/docs/src/examples/catalog/Rule.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "annotation-x",
-      "path": "/example/Rule/annotation-x",
+      "title": "annotation x",
+      "path": "/docs/components/Rule/annotation-x",
       "components": [
         {
           "component": "Chart",
@@ -29,7 +30,8 @@
     },
     {
       "name": "annotation-y",
-      "path": "/example/Rule/annotation-y",
+      "title": "annotation y",
+      "path": "/docs/components/Rule/annotation-y",
       "components": [
         {
           "component": "Chart",
@@ -55,7 +57,8 @@
     },
     {
       "name": "baseline-top-right",
-      "path": "/example/Rule/baseline-top-right",
+      "title": "baseline top right",
+      "path": "/docs/components/Rule/baseline-top-right",
       "components": [
         {
           "component": "Chart",
@@ -81,7 +84,8 @@
     },
     {
       "name": "baseline-x-negative",
-      "path": "/example/Rule/baseline-x-negative",
+      "title": "baseline x negative",
+      "path": "/docs/components/Rule/baseline-x-negative",
       "components": [
         {
           "component": "Chart",
@@ -107,7 +111,8 @@
     },
     {
       "name": "baseline-x-y",
-      "path": "/example/Rule/baseline-x-y",
+      "title": "baseline x y",
+      "path": "/docs/components/Rule/baseline-x-y",
       "components": [
         {
           "component": "Chart",
@@ -133,7 +138,8 @@
     },
     {
       "name": "baseline-y-negative",
-      "path": "/example/Rule/baseline-y-negative",
+      "title": "baseline y negative",
+      "path": "/docs/components/Rule/baseline-y-negative",
       "components": [
         {
           "component": "Chart",
@@ -159,7 +165,8 @@
     },
     {
       "name": "candlestick",
-      "path": "/example/Rule/candlestick",
+      "title": "candlestick",
+      "path": "/docs/components/Rule/candlestick",
       "components": [
         {
           "component": "Chart",
@@ -195,7 +202,8 @@
     },
     {
       "name": "candlestick-open-close-line-color",
-      "path": "/example/Rule/candlestick-open-close-line-color",
+      "title": "candlestick open close line color",
+      "path": "/docs/components/Rule/candlestick-open-close-line-color",
       "components": [
         {
           "component": "Chart",
@@ -231,7 +239,8 @@
     },
     {
       "name": "candlestick-with-brushing",
-      "path": "/example/Rule/candlestick-with-brushing",
+      "title": "candlestick with brushing",
+      "path": "/docs/components/Rule/candlestick-with-brushing",
       "components": [
         {
           "component": "Chart",
@@ -272,7 +281,8 @@
     },
     {
       "name": "data-x-band",
-      "path": "/example/Rule/data-x-band",
+      "title": "data x band",
+      "path": "/docs/components/Rule/data-x-band",
       "components": [
         {
           "component": "Chart",
@@ -298,7 +308,8 @@
     },
     {
       "name": "data-x-date",
-      "path": "/example/Rule/data-x-date",
+      "title": "data x date",
+      "path": "/docs/components/Rule/data-x-date",
       "components": [
         {
           "component": "Chart",
@@ -324,7 +335,8 @@
     },
     {
       "name": "data-x-range",
-      "path": "/example/Rule/data-x-range",
+      "title": "data x range",
+      "path": "/docs/components/Rule/data-x-range",
       "components": [
         {
           "component": "Chart",
@@ -350,7 +362,8 @@
     },
     {
       "name": "data-y-range",
-      "path": "/example/Rule/data-y-range",
+      "title": "data y range",
+      "path": "/docs/components/Rule/data-y-range",
       "components": [
         {
           "component": "Chart",
@@ -376,7 +389,8 @@
     },
     {
       "name": "lollipop",
-      "path": "/example/Rule/lollipop",
+      "title": "lollipop",
+      "path": "/docs/components/Rule/lollipop",
       "components": [
         {
           "component": "Chart",
@@ -420,269 +434,269 @@
     {
       "example": "highlight-color-based-on-value-using-color-scale",
       "component": "Area",
-      "path": "/example/Area/highlight-color-based-on-value-using-color-scale",
+      "path": "/docs/components/Area/highlight-color-based-on-value-using-color-scale",
       "lineNumber": 31,
       "line": "<Rule y={0} />"
     },
     {
       "example": "highlight-color-based-on-value-using-tooltip-slot-prop",
       "component": "Area",
-      "path": "/example/Area/highlight-color-based-on-value-using-tooltip-slot-prop",
+      "path": "/docs/components/Area/highlight-color-based-on-value-using-tooltip-slot-prop",
       "lineNumber": 20,
       "line": "<Rule y={0} />"
     },
     {
       "example": "threshold-with-lineargradient",
       "component": "Area",
-      "path": "/example/Area/threshold-with-lineargradient",
+      "path": "/docs/components/Area/threshold-with-lineargradient",
       "lineNumber": 23,
       "line": "<Rule y={0} />"
     },
     {
       "example": "threshold-with-lineargradient-over-under",
       "component": "Area",
-      "path": "/example/Area/threshold-with-lineargradient-over-under",
+      "path": "/docs/components/Area/threshold-with-lineargradient-over-under",
       "lineNumber": 23,
       "line": "<Rule y={0} />"
     },
     {
       "example": "threshold-with-rectclippath",
       "component": "Area",
-      "path": "/example/Area/threshold-with-rectclippath",
+      "path": "/docs/components/Area/threshold-with-rectclippath",
       "lineNumber": 20,
       "line": "<Rule y={0} />"
     },
     {
       "example": "threshold-with-rectclippath-over-under",
       "component": "Area",
-      "path": "/example/Area/threshold-with-rectclippath-over-under",
+      "path": "/docs/components/Area/threshold-with-rectclippath-over-under",
       "lineNumber": 20,
       "line": "<Rule y={0} />"
     },
     {
       "example": "multiple-axis-grid-and-rules",
       "component": "Axis",
-      "path": "/example/Axis/multiple-axis-grid-and-rules",
+      "path": "/docs/components/Axis/multiple-axis-grid-and-rules",
       "lineNumber": 19,
       "line": "<Rule x=\"$left\" />"
     },
     {
       "example": "duration-points",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-points",
+      "path": "/docs/components/BarChart/duration-points",
       "lineNumber": 43,
       "line": "<Rule />"
     },
     {
       "example": "duration-points-color",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-points-color",
+      "path": "/docs/components/BarChart/duration-points-color",
       "lineNumber": 50,
       "line": "<Rule />"
     },
     {
       "example": "horizontal-average-annotation-rule",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-average-annotation-rule",
+      "path": "/docs/components/Bars/horizontal-average-annotation-rule",
       "lineNumber": 34,
       "line": "<Rule x={avg} class=\"stroke-2 stroke-danger [stroke-dasharray:4] [stroke-linecap:round] \" />"
     },
     {
       "example": "horizontal-inside-labels",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-inside-labels",
+      "path": "/docs/components/Bars/horizontal-inside-labels",
       "lineNumber": 23,
       "line": "<Rule x={0} />"
     },
     {
       "example": "horizontal-multiple-diverging",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-multiple-diverging",
+      "path": "/docs/components/Bars/horizontal-multiple-diverging",
       "lineNumber": 32,
       "line": "<Rule x={0} />"
     },
     {
       "example": "horizontal-outside-labels-default",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-outside-labels-default",
+      "path": "/docs/components/Bars/horizontal-outside-labels-default",
       "lineNumber": 24,
       "line": "<Rule x={0} />"
     },
     {
       "example": "vertical-average-annotation-rule",
       "component": "Bars",
-      "path": "/example/Bars/vertical-average-annotation-rule",
+      "path": "/docs/components/Bars/vertical-average-annotation-rule",
       "lineNumber": 32,
       "line": "<Rule y={avg} class=\"stroke-2 stroke-danger [stroke-dasharray:4] [stroke-linecap:round] \" />"
     },
     {
       "example": "vertical-inside-labels",
       "component": "Bars",
-      "path": "/example/Bars/vertical-inside-labels",
+      "path": "/docs/components/Bars/vertical-inside-labels",
       "lineNumber": 23,
       "line": "<Rule y={0} />"
     },
     {
       "example": "vertical-multiple-diverging",
       "component": "Bars",
-      "path": "/example/Bars/vertical-multiple-diverging",
+      "path": "/docs/components/Bars/vertical-multiple-diverging",
       "lineNumber": 31,
       "line": "<Rule y={0} />"
     },
     {
       "example": "vertical-multiple-diverging-rounded-specific",
       "component": "Bars",
-      "path": "/example/Bars/vertical-multiple-diverging-rounded-specific",
+      "path": "/docs/components/Bars/vertical-multiple-diverging-rounded-specific",
       "lineNumber": 42,
       "line": "<Rule y={0} />"
     },
     {
       "example": "vertical-outside-labels-default",
       "component": "Bars",
-      "path": "/example/Bars/vertical-outside-labels-default",
+      "path": "/docs/components/Bars/vertical-outside-labels-default",
       "lineNumber": 24,
       "line": "<Rule y={0} />"
     },
     {
       "example": "sync-brushes-with-bind-xdomain",
       "component": "BrushContext",
-      "path": "/example/BrushContext/sync-brushes-with-bind-xdomain",
+      "path": "/docs/components/BrushContext/sync-brushes-with-bind-xdomain",
       "lineNumber": 67,
       "line": "<Rule y={0} />"
     },
     {
       "example": "annotation-x",
       "component": "Rule",
-      "path": "/example/Rule/annotation-x",
+      "path": "/docs/components/Rule/annotation-x",
       "lineNumber": 9,
       "line": "<Rule x={70} class=\"stroke-2 stroke-danger [stroke-dasharray:4] [stroke-linecap:round] \" />"
     },
     {
       "example": "annotation-y",
       "component": "Rule",
-      "path": "/example/Rule/annotation-y",
+      "path": "/docs/components/Rule/annotation-y",
       "lineNumber": 9,
       "line": "<Rule y={70} class=\"stroke-2 stroke-danger [stroke-dasharray:4] [stroke-linecap:round] \" />"
     },
     {
       "example": "baseline-top-right",
       "component": "Rule",
-      "path": "/example/Rule/baseline-top-right",
+      "path": "/docs/components/Rule/baseline-top-right",
       "lineNumber": 9,
       "line": "<Rule x=\"$right\" y=\"$top\" />"
     },
     {
       "example": "baseline-x-negative",
       "component": "Rule",
-      "path": "/example/Rule/baseline-x-negative",
+      "path": "/docs/components/Rule/baseline-x-negative",
       "lineNumber": 9,
       "line": "<Rule x={0} />"
     },
     {
       "example": "baseline-x-y",
       "component": "Rule",
-      "path": "/example/Rule/baseline-x-y",
+      "path": "/docs/components/Rule/baseline-x-y",
       "lineNumber": 9,
       "line": "<Rule x y />"
     },
     {
       "example": "baseline-y-negative",
       "component": "Rule",
-      "path": "/example/Rule/baseline-y-negative",
+      "path": "/docs/components/Rule/baseline-y-negative",
       "lineNumber": 9,
       "line": "<Rule y={0} />"
     },
     {
       "example": "candlestick",
       "component": "Rule",
-      "path": "/example/Rule/candlestick",
+      "path": "/docs/components/Rule/candlestick",
       "lineNumber": 27,
       "line": "<Rule y={['high', 'low']} />"
     },
     {
       "example": "candlestick",
       "component": "Rule",
-      "path": "/example/Rule/candlestick",
+      "path": "/docs/components/Rule/candlestick",
       "lineNumber": 28,
       "line": "<Rule y={['open', 'close']} strokeWidth={3} />"
     },
     {
       "example": "candlestick-open-close-line-color",
       "component": "Rule",
-      "path": "/example/Rule/candlestick-open-close-line-color",
+      "path": "/docs/components/Rule/candlestick-open-close-line-color",
       "lineNumber": 27,
       "line": "<Rule y={['high', 'low']} class=\"stroke-surface-content\" />"
     },
     {
       "example": "candlestick-open-close-line-color",
       "component": "Rule",
-      "path": "/example/Rule/candlestick-open-close-line-color",
+      "path": "/docs/components/Rule/candlestick-open-close-line-color",
       "lineNumber": 28,
       "line": "<Rule y={['open', 'close']} strokeWidth={3} />"
     },
     {
       "example": "candlestick-with-brushing",
       "component": "Rule",
-      "path": "/example/Rule/candlestick-with-brushing",
+      "path": "/docs/components/Rule/candlestick-with-brushing",
       "lineNumber": 35,
       "line": "<Rule y={['high', 'low']} />"
     },
     {
       "example": "candlestick-with-brushing",
       "component": "Rule",
-      "path": "/example/Rule/candlestick-with-brushing",
+      "path": "/docs/components/Rule/candlestick-with-brushing",
       "lineNumber": 36,
       "line": "<Rule y={['open', 'close']} strokeWidth={3} />"
     },
     {
       "example": "data-x-band",
       "component": "Rule",
-      "path": "/example/Rule/data-x-band",
+      "path": "/docs/components/Rule/data-x-band",
       "lineNumber": 44,
       "line": "<Rule class=\"stroke-2 stroke-primary stroke-4\" />"
     },
     {
       "example": "data-x-date",
       "component": "Rule",
-      "path": "/example/Rule/data-x-date",
+      "path": "/docs/components/Rule/data-x-date",
       "lineNumber": 14,
       "line": "<Rule class=\"stroke-4 stroke-primary\" />"
     },
     {
       "example": "data-x-range",
       "component": "Rule",
-      "path": "/example/Rule/data-x-range",
+      "path": "/docs/components/Rule/data-x-range",
       "lineNumber": 20,
       "line": "<Rule class=\"stroke-4 stroke-primary\" />"
     },
     {
       "example": "data-y-range",
       "component": "Rule",
-      "path": "/example/Rule/data-y-range",
+      "path": "/docs/components/Rule/data-y-range",
       "lineNumber": 14,
       "line": "<Rule class=\"stroke-4 stroke-primary\" />"
     },
     {
       "example": "lollipop",
       "component": "Rule",
-      "path": "/example/Rule/lollipop",
+      "path": "/docs/components/Rule/lollipop",
       "lineNumber": 24,
       "line": "<Rule class=\"stroke-4 stroke-primary\" />"
     },
     {
       "example": "duration",
       "component": "Tooltip",
-      "path": "/example/Tooltip/duration",
+      "path": "/docs/components/Tooltip/duration",
       "lineNumber": 53,
       "line": "<Rule />"
     },
     {
       "example": "multiple-overlapping-durations",
       "component": "Tooltip",
-      "path": "/example/Tooltip/multiple-overlapping-durations",
+      "path": "/docs/components/Tooltip/multiple-overlapping-durations",
       "lineNumber": 52,
       "line": "<Rule />"
     }
   ],
-  "updatedAt": "2026-01-06T13:02:21.967Z"
+  "updatedAt": "2026-02-07T20:21:32.259Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Sankey.json b/docs/src/examples/catalog/Sankey.json
index 00627a568..9e1100522 100644
--- a/docs/src/examples/catalog/Sankey.json
+++ b/docs/src/examples/catalog/Sankey.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "complex",
-      "path": "/example/Sankey/complex",
+      "title": "complex",
+      "path": "/docs/components/Sankey/complex",
       "components": [
         {
           "component": "Chart",
@@ -49,7 +50,8 @@
     },
     {
       "name": "hierarchy",
-      "path": "/example/Sankey/hierarchy",
+      "title": "hierarchy",
+      "path": "/docs/components/Sankey/hierarchy",
       "components": [
         {
           "component": "Chart",
@@ -90,7 +92,8 @@
     },
     {
       "name": "node-select",
-      "path": "/example/Sankey/node-select",
+      "title": "node select",
+      "path": "/docs/components/Sankey/node-select",
       "components": [
         {
           "component": "Chart",
@@ -131,7 +134,8 @@
     },
     {
       "name": "simple",
-      "path": "/example/Sankey/simple",
+      "title": "simple",
+      "path": "/docs/components/Sankey/simple",
       "components": [
         {
           "component": "Chart",
@@ -172,7 +176,8 @@
     },
     {
       "name": "tooltip",
-      "path": "/example/Sankey/tooltip",
+      "title": "tooltip",
+      "path": "/docs/components/Sankey/tooltip",
       "components": [
         {
           "component": "Chart",
@@ -221,38 +226,38 @@
     {
       "example": "complex",
       "component": "Sankey",
-      "path": "/example/Sankey/complex",
+      "path": "/docs/components/Sankey/complex",
       "lineNumber": 46,
       "line": "<Sankey"
     },
     {
       "example": "hierarchy",
       "component": "Sankey",
-      "path": "/example/Sankey/hierarchy",
+      "path": "/docs/components/Sankey/hierarchy",
       "lineNumber": 61,
       "line": "<Sankey"
     },
     {
       "example": "node-select",
       "component": "Sankey",
-      "path": "/example/Sankey/node-select",
+      "path": "/docs/components/Sankey/node-select",
       "lineNumber": 14,
       "line": "<Sankey nodeId={(d) => d.name} nodeWidth={8}>"
     },
     {
       "example": "simple",
       "component": "Sankey",
-      "path": "/example/Sankey/simple",
+      "path": "/docs/components/Sankey/simple",
       "lineNumber": 10,
       "line": "<Sankey nodeId={(d) => d.id}>"
     },
     {
       "example": "tooltip",
       "component": "Sankey",
-      "path": "/example/Sankey/tooltip",
+      "path": "/docs/components/Sankey/tooltip",
       "lineNumber": 14,
       "line": "<Sankey nodeId={(d) => d.name} nodeWidth={8}>"
     }
   ],
-  "updatedAt": "2025-11-23T01:49:02.761Z"
+  "updatedAt": "2026-02-07T20:21:32.275Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/ScatterChart.json b/docs/src/examples/catalog/ScatterChart.json
index 36072f29f..8527fcd2b 100644
--- a/docs/src/examples/catalog/ScatterChart.json
+++ b/docs/src/examples/catalog/ScatterChart.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "basic",
-      "path": "/example/ScatterChart/basic",
+      "title": "basic",
+      "path": "/docs/components/ScatterChart/basic",
       "components": [
         {
           "component": "ScatterChart",
@@ -14,7 +15,8 @@
     },
     {
       "name": "brush",
-      "path": "/example/ScatterChart/brush",
+      "title": "brush",
+      "path": "/docs/components/ScatterChart/brush",
       "components": [
         {
           "component": "ScatterChart",
@@ -25,7 +27,8 @@
     },
     {
       "name": "custom",
-      "path": "/example/ScatterChart/custom",
+      "title": "custom",
+      "path": "/docs/components/ScatterChart/custom",
       "components": [
         {
           "component": "ScatterChart",
@@ -61,7 +64,8 @@
     },
     {
       "name": "custom-tooltip",
-      "path": "/example/ScatterChart/custom-tooltip",
+      "title": "custom tooltip",
+      "path": "/docs/components/ScatterChart/custom-tooltip",
       "components": [
         {
           "component": "ScatterChart",
@@ -77,7 +81,8 @@
     },
     {
       "name": "date-series-color-scale",
-      "path": "/example/ScatterChart/date-series-color-scale",
+      "title": "date series color scale",
+      "path": "/docs/components/ScatterChart/date-series-color-scale",
       "components": [
         {
           "component": "ScatterChart",
@@ -88,7 +93,8 @@
     },
     {
       "name": "domain-baseline",
-      "path": "/example/ScatterChart/domain-baseline",
+      "title": "domain baseline",
+      "path": "/docs/components/ScatterChart/domain-baseline",
       "components": [
         {
           "component": "ScatterChart",
@@ -99,18 +105,20 @@
     },
     {
       "name": "domain-nice",
-      "path": "/example/ScatterChart/domain-nice",
+      "title": "domain nice",
+      "path": "/docs/components/ScatterChart/domain-nice",
       "components": [
         {
           "component": "ScatterChart",
-          "lineNumber": 16,
+          "lineNumber": 18,
           "line": "<ScatterChart {data} x=\"x\" y=\"y\" xNice={applyNice} yNice={applyNice} padding={24} height={400} />"
         }
       ]
     },
     {
       "name": "domain-padding",
-      "path": "/example/ScatterChart/domain-padding",
+      "title": "domain padding",
+      "path": "/docs/components/ScatterChart/domain-padding",
       "components": [
         {
           "component": "ScatterChart",
@@ -121,7 +129,8 @@
     },
     {
       "name": "labels",
-      "path": "/example/ScatterChart/labels",
+      "title": "labels",
+      "path": "/docs/components/ScatterChart/labels",
       "components": [
         {
           "component": "ScatterChart",
@@ -132,7 +141,8 @@
     },
     {
       "name": "line-annotation",
-      "path": "/example/ScatterChart/line-annotation",
+      "title": "line annotation",
+      "path": "/docs/components/ScatterChart/line-annotation",
       "components": [
         {
           "component": "ScatterChart",
@@ -143,7 +153,8 @@
     },
     {
       "name": "point-annotations",
-      "path": "/example/ScatterChart/point-annotations",
+      "title": "point annotations",
+      "path": "/docs/components/ScatterChart/point-annotations",
       "components": [
         {
           "component": "ScatterChart",
@@ -154,7 +165,8 @@
     },
     {
       "name": "punchcard",
-      "path": "/example/ScatterChart/punchcard",
+      "title": "punchcard",
+      "path": "/docs/components/ScatterChart/punchcard",
       "components": [
         {
           "component": "ScatterChart",
@@ -175,7 +187,8 @@
     },
     {
       "name": "radius-scale",
-      "path": "/example/ScatterChart/radius-scale",
+      "title": "radius scale",
+      "path": "/docs/components/ScatterChart/radius-scale",
       "components": [
         {
           "component": "ScatterChart",
@@ -186,7 +199,8 @@
     },
     {
       "name": "range-annotation-both",
-      "path": "/example/ScatterChart/range-annotation-both",
+      "title": "range annotation both",
+      "path": "/docs/components/ScatterChart/range-annotation-both",
       "components": [
         {
           "component": "ScatterChart",
@@ -197,7 +211,8 @@
     },
     {
       "name": "range-annotation-horizontal",
-      "path": "/example/ScatterChart/range-annotation-horizontal",
+      "title": "range annotation horizontal",
+      "path": "/docs/components/ScatterChart/range-annotation-horizontal",
       "components": [
         {
           "component": "ScatterChart",
@@ -208,7 +223,8 @@
     },
     {
       "name": "range-annotation-vertical",
-      "path": "/example/ScatterChart/range-annotation-vertical",
+      "title": "range annotation vertical",
+      "path": "/docs/components/ScatterChart/range-annotation-vertical",
       "components": [
         {
           "component": "ScatterChart",
@@ -219,7 +235,8 @@
     },
     {
       "name": "series",
-      "path": "/example/ScatterChart/series",
+      "title": "series",
+      "path": "/docs/components/ScatterChart/series",
       "components": [
         {
           "component": "ScatterChart",
@@ -230,7 +247,8 @@
     },
     {
       "name": "series-custom-labels",
-      "path": "/example/ScatterChart/series-custom-labels",
+      "title": "series custom labels",
+      "path": "/docs/components/ScatterChart/series-custom-labels",
       "components": [
         {
           "component": "ScatterChart",
@@ -241,7 +259,8 @@
     },
     {
       "name": "series-legend",
-      "path": "/example/ScatterChart/series-legend",
+      "title": "series legend",
+      "path": "/docs/components/ScatterChart/series-legend",
       "components": [
         {
           "component": "ScatterChart",
@@ -252,7 +271,8 @@
     },
     {
       "name": "series-tween",
-      "path": "/example/ScatterChart/series-tween",
+      "title": "series tween",
+      "path": "/docs/components/ScatterChart/series-tween",
       "components": [
         {
           "component": "ScatterChart",
@@ -263,7 +283,8 @@
     },
     {
       "name": "series-with-radius",
-      "path": "/example/ScatterChart/series-with-radius",
+      "title": "series with radius",
+      "path": "/docs/components/ScatterChart/series-with-radius",
       "components": [
         {
           "component": "ScatterChart",
@@ -274,7 +295,8 @@
     },
     {
       "name": "single-axis-x",
-      "path": "/example/ScatterChart/single-axis-x",
+      "title": "single axis x",
+      "path": "/docs/components/ScatterChart/single-axis-x",
       "components": [
         {
           "component": "ScatterChart",
@@ -285,7 +307,8 @@
     },
     {
       "name": "single-axis-y",
-      "path": "/example/ScatterChart/single-axis-y",
+      "title": "single axis y",
+      "path": "/docs/components/ScatterChart/single-axis-y",
       "components": [
         {
           "component": "ScatterChart",
@@ -296,7 +319,8 @@
     },
     {
       "name": "single-dimension",
-      "path": "/example/ScatterChart/single-dimension",
+      "title": "single dimension",
+      "path": "/docs/components/ScatterChart/single-dimension",
       "components": [
         {
           "component": "ScatterChart",
@@ -312,7 +336,8 @@
     },
     {
       "name": "tooltip-click",
-      "path": "/example/ScatterChart/tooltip-click",
+      "title": "tooltip click",
+      "path": "/docs/components/ScatterChart/tooltip-click",
       "components": [
         {
           "component": "ScatterChart",
@@ -326,178 +351,178 @@
     {
       "example": "basic",
       "component": "ScatterChart",
-      "path": "/example/ScatterChart/basic",
+      "path": "/docs/components/ScatterChart/basic",
       "lineNumber": 9,
       "line": "<ScatterChart {data} xNice x=\"x\" y=\"y\" padding={24} height={400} />"
     },
     {
       "example": "brush",
       "component": "ScatterChart",
-      "path": "/example/ScatterChart/brush",
+      "path": "/docs/components/ScatterChart/brush",
       "lineNumber": 9,
       "line": "<ScatterChart"
     },
     {
       "example": "custom",
       "component": "ScatterChart",
-      "path": "/example/ScatterChart/custom",
+      "path": "/docs/components/ScatterChart/custom",
       "lineNumber": 10,
       "line": "<ScatterChart {data} xNice x=\"x\" y=\"y\" padding={24} height={400}>"
     },
     {
       "example": "custom-tooltip",
       "component": "ScatterChart",
-      "path": "/example/ScatterChart/custom-tooltip",
+      "path": "/docs/components/ScatterChart/custom-tooltip",
       "lineNumber": 10,
       "line": "<ScatterChart {data} xNice x=\"x\" y=\"y\" padding={24} height={400}>"
     },
     {
       "example": "date-series-color-scale",
       "component": "ScatterChart",
-      "path": "/example/ScatterChart/date-series-color-scale",
+      "path": "/docs/components/ScatterChart/date-series-color-scale",
       "lineNumber": 10,
       "line": "<ScatterChart"
     },
     {
       "example": "domain-baseline",
       "component": "ScatterChart",
-      "path": "/example/ScatterChart/domain-baseline",
+      "path": "/docs/components/ScatterChart/domain-baseline",
       "lineNumber": 9,
       "line": "<ScatterChart {data} x=\"x\" y=\"y\" xBaseline={0} yBaseline={0} padding={24} height={400} />"
     },
     {
       "example": "domain-nice",
       "component": "ScatterChart",
-      "path": "/example/ScatterChart/domain-nice",
-      "lineNumber": 16,
+      "path": "/docs/components/ScatterChart/domain-nice",
+      "lineNumber": 18,
       "line": "<ScatterChart {data} x=\"x\" y=\"y\" xNice={applyNice} yNice={applyNice} padding={24} height={400} />"
     },
     {
       "example": "domain-padding",
       "component": "ScatterChart",
-      "path": "/example/ScatterChart/domain-padding",
+      "path": "/docs/components/ScatterChart/domain-padding",
       "lineNumber": 9,
       "line": "<ScatterChart"
     },
     {
       "example": "labels",
       "component": "ScatterChart",
-      "path": "/example/ScatterChart/labels",
+      "path": "/docs/components/ScatterChart/labels",
       "lineNumber": 9,
       "line": "<ScatterChart {data} xNice x=\"x\" y=\"y\" labels padding={24} height={400} />"
     },
     {
       "example": "line-annotation",
       "component": "ScatterChart",
-      "path": "/example/ScatterChart/line-annotation",
+      "path": "/docs/components/ScatterChart/line-annotation",
       "lineNumber": 9,
       "line": "<ScatterChart"
     },
     {
       "example": "point-annotations",
       "component": "ScatterChart",
-      "path": "/example/ScatterChart/point-annotations",
+      "path": "/docs/components/ScatterChart/point-annotations",
       "lineNumber": 9,
       "line": "<ScatterChart"
     },
     {
       "example": "punchcard",
       "component": "ScatterChart",
-      "path": "/example/ScatterChart/punchcard",
+      "path": "/docs/components/ScatterChart/punchcard",
       "lineNumber": 14,
       "line": "<ScatterChart"
     },
     {
       "example": "radius-scale",
       "component": "ScatterChart",
-      "path": "/example/ScatterChart/radius-scale",
+      "path": "/docs/components/ScatterChart/radius-scale",
       "lineNumber": 9,
       "line": "<ScatterChart"
     },
     {
       "example": "range-annotation-both",
       "component": "ScatterChart",
-      "path": "/example/ScatterChart/range-annotation-both",
+      "path": "/docs/components/ScatterChart/range-annotation-both",
       "lineNumber": 9,
       "line": "<ScatterChart"
     },
     {
       "example": "range-annotation-horizontal",
       "component": "ScatterChart",
-      "path": "/example/ScatterChart/range-annotation-horizontal",
+      "path": "/docs/components/ScatterChart/range-annotation-horizontal",
       "lineNumber": 9,
       "line": "<ScatterChart"
     },
     {
       "example": "range-annotation-vertical",
       "component": "ScatterChart",
-      "path": "/example/ScatterChart/range-annotation-vertical",
+      "path": "/docs/components/ScatterChart/range-annotation-vertical",
       "lineNumber": 9,
       "line": "<ScatterChart"
     },
     {
       "example": "series",
       "component": "ScatterChart",
-      "path": "/example/ScatterChart/series",
+      "path": "/docs/components/ScatterChart/series",
       "lineNumber": 17,
       "line": "<ScatterChart"
     },
     {
       "example": "series-custom-labels",
       "component": "ScatterChart",
-      "path": "/example/ScatterChart/series-custom-labels",
+      "path": "/docs/components/ScatterChart/series-custom-labels",
       "lineNumber": 17,
       "line": "<ScatterChart"
     },
     {
       "example": "series-legend",
       "component": "ScatterChart",
-      "path": "/example/ScatterChart/series-legend",
+      "path": "/docs/components/ScatterChart/series-legend",
       "lineNumber": 17,
       "line": "<ScatterChart"
     },
     {
       "example": "series-tween",
       "component": "ScatterChart",
-      "path": "/example/ScatterChart/series-tween",
+      "path": "/docs/components/ScatterChart/series-tween",
       "lineNumber": 17,
       "line": "<ScatterChart"
     },
     {
       "example": "series-with-radius",
       "component": "ScatterChart",
-      "path": "/example/ScatterChart/series-with-radius",
+      "path": "/docs/components/ScatterChart/series-with-radius",
       "lineNumber": 17,
       "line": "<ScatterChart"
     },
     {
       "example": "single-axis-x",
       "component": "ScatterChart",
-      "path": "/example/ScatterChart/single-axis-x",
+      "path": "/docs/components/ScatterChart/single-axis-x",
       "lineNumber": 9,
       "line": "<ScatterChart {data} x=\"x\" y=\"y\" axis=\"x\" padding={24} height={400} />"
     },
     {
       "example": "single-axis-y",
       "component": "ScatterChart",
-      "path": "/example/ScatterChart/single-axis-y",
+      "path": "/docs/components/ScatterChart/single-axis-y",
       "lineNumber": 9,
       "line": "<ScatterChart {data} xNice x=\"x\" y=\"y\" axis=\"y\" padding={24} height={400} />"
     },
     {
       "example": "single-dimension",
       "component": "ScatterChart",
-      "path": "/example/ScatterChart/single-dimension",
+      "path": "/docs/components/ScatterChart/single-dimension",
       "lineNumber": 11,
       "line": "<ScatterChart"
     },
     {
       "example": "tooltip-click",
       "component": "ScatterChart",
-      "path": "/example/ScatterChart/tooltip-click",
+      "path": "/docs/components/ScatterChart/tooltip-click",
       "lineNumber": 9,
       "line": "<ScatterChart"
     }
   ],
-  "updatedAt": "2025-12-07T04:39:10.216Z"
+  "updatedAt": "2026-02-07T20:21:32.291Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Spline.json b/docs/src/examples/catalog/Spline.json
index a02c2b456..5d93ea93f 100644
--- a/docs/src/examples/catalog/Spline.json
+++ b/docs/src/examples/catalog/Spline.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "basic",
-      "path": "/example/Spline/basic",
+      "title": "basic",
+      "path": "/docs/components/Spline/basic",
       "components": [
         {
           "component": "Chart",
@@ -29,7 +30,8 @@
     },
     {
       "name": "basic-start-and-end-snippets",
-      "path": "/example/Spline/basic-start-and-end-snippets",
+      "title": "basic start and end snippets",
+      "path": "/docs/components/Spline/basic-start-and-end-snippets",
       "components": [
         {
           "component": "Chart",
@@ -60,7 +62,8 @@
     },
     {
       "name": "draw",
-      "path": "/example/Spline/draw",
+      "title": "draw",
+      "path": "/docs/components/Spline/draw",
       "components": [
         {
           "component": "Chart",
@@ -86,7 +89,8 @@
     },
     {
       "name": "end-slot-with-draw-with-value",
-      "path": "/example/Spline/end-slot-with-draw-with-value",
+      "title": "end slot with draw with value",
+      "path": "/docs/components/Spline/end-slot-with-draw-with-value",
       "components": [
         {
           "component": "Chart",
@@ -122,7 +126,8 @@
     },
     {
       "name": "end-snippet-with-draw",
-      "path": "/example/Spline/end-snippet-with-draw",
+      "title": "end snippet with draw",
+      "path": "/docs/components/Spline/end-snippet-with-draw",
       "components": [
         {
           "component": "Chart",
@@ -153,7 +158,8 @@
     },
     {
       "name": "gradient-encoding",
-      "path": "/example/Spline/gradient-encoding",
+      "title": "gradient encoding",
+      "path": "/docs/components/Spline/gradient-encoding",
       "components": [
         {
           "component": "Chart",
@@ -189,7 +195,8 @@
     },
     {
       "name": "gradient-threshold",
-      "path": "/example/Spline/gradient-threshold",
+      "title": "gradient threshold",
+      "path": "/docs/components/Spline/gradient-threshold",
       "components": [
         {
           "component": "Chart",
@@ -220,7 +227,8 @@
     },
     {
       "name": "label-using-start-end-snippets",
-      "path": "/example/Spline/label-using-start-end-snippets",
+      "title": "label using start end snippets",
+      "path": "/docs/components/Spline/label-using-start-end-snippets",
       "components": [
         {
           "component": "Chart",
@@ -256,7 +264,8 @@
     },
     {
       "name": "markers-arrows",
-      "path": "/example/Spline/markers-arrows",
+      "title": "markers arrows",
+      "path": "/docs/components/Spline/markers-arrows",
       "components": [
         {
           "component": "Chart",
@@ -282,7 +291,8 @@
     },
     {
       "name": "multiple-series",
-      "path": "/example/Spline/multiple-series",
+      "title": "multiple series",
+      "path": "/docs/components/Spline/multiple-series",
       "components": [
         {
           "component": "Chart",
@@ -328,7 +338,8 @@
     },
     {
       "name": "multiple-series-highlight-on-hover",
-      "path": "/example/Spline/multiple-series-highlight-on-hover",
+      "title": "multiple series highlight on hover",
+      "path": "/docs/components/Spline/multiple-series-highlight-on-hover",
       "components": [
         {
           "component": "Chart",
@@ -374,7 +385,8 @@
     },
     {
       "name": "multiple-series-using-overrides",
-      "path": "/example/Spline/multiple-series-using-overrides",
+      "title": "multiple series using overrides",
+      "path": "/docs/components/Spline/multiple-series-using-overrides",
       "components": [
         {
           "component": "Chart",
@@ -410,7 +422,8 @@
     },
     {
       "name": "multiple-series-with-labels",
-      "path": "/example/Spline/multiple-series-with-labels",
+      "title": "multiple series with labels",
+      "path": "/docs/components/Spline/multiple-series-with-labels",
       "components": [
         {
           "component": "Chart",
@@ -451,7 +464,8 @@
     },
     {
       "name": "playground",
-      "path": "/example/Spline/playground",
+      "title": "playground",
+      "path": "/docs/components/Spline/playground",
       "components": [
         {
           "component": "Chart",
@@ -482,7 +496,8 @@
     },
     {
       "name": "radial-line-with-areas",
-      "path": "/example/Spline/radial-line-with-areas",
+      "title": "radial line with areas",
+      "path": "/docs/components/Spline/radial-line-with-areas",
       "components": [
         {
           "component": "Chart",
@@ -513,7 +528,8 @@
     },
     {
       "name": "radial-multi-year-lines",
-      "path": "/example/Spline/radial-multi-year-lines",
+      "title": "radial multi year lines",
+      "path": "/docs/components/Spline/radial-multi-year-lines",
       "components": [
         {
           "component": "Chart",
@@ -539,7 +555,8 @@
     },
     {
       "name": "radial-radar",
-      "path": "/example/Spline/radial-radar",
+      "title": "radial radar",
+      "path": "/docs/components/Spline/radial-radar",
       "components": [
         {
           "component": "Chart",
@@ -570,7 +587,8 @@
     },
     {
       "name": "tweened",
-      "path": "/example/Spline/tweened",
+      "title": "tweened",
+      "path": "/docs/components/Spline/tweened",
       "components": [
         {
           "component": "Chart",
@@ -596,7 +614,8 @@
     },
     {
       "name": "vertical",
-      "path": "/example/Spline/vertical",
+      "title": "vertical",
+      "path": "/docs/components/Spline/vertical",
       "components": [
         {
           "component": "Chart",
@@ -632,7 +651,8 @@
     },
     {
       "name": "with-labels",
-      "path": "/example/Spline/with-labels",
+      "title": "with labels",
+      "path": "/docs/components/Spline/with-labels",
       "components": [
         {
           "component": "Chart",
@@ -663,7 +683,8 @@
     },
     {
       "name": "with-tooltip-and-highlight",
-      "path": "/example/Spline/with-tooltip-and-highlight",
+      "title": "with tooltip and highlight",
+      "path": "/docs/components/Spline/with-tooltip-and-highlight",
       "components": [
         {
           "component": "Chart",
@@ -702,416 +723,416 @@
     {
       "example": "radial",
       "component": "AreaChart",
-      "path": "/example/AreaChart/radial",
+      "path": "/docs/components/AreaChart/radial",
       "lineNumber": 45,
       "line": "<Spline y=\"avg\" curve={curveCatmullRom} class=\"stroke-primary\" />"
     },
     {
       "example": "threshold",
       "component": "AreaChart",
-      "path": "/example/AreaChart/threshold",
+      "path": "/docs/components/AreaChart/threshold",
       "lineNumber": 44,
       "line": "<Spline y=\"baseline\" {curve} class=\"[stroke-dasharray:4]\" />"
     },
     {
       "example": "threshold",
       "component": "AreaChart",
-      "path": "/example/AreaChart/threshold",
+      "path": "/docs/components/AreaChart/threshold",
       "lineNumber": 45,
       "line": "<Spline y=\"value\" {curve} class=\"stroke-[1.5]\" />"
     },
     {
       "example": "compound-dual-axis-with-single-chart-using-remapped-scale",
       "component": "Chart",
-      "path": "/example/Chart/compound-dual-axis-with-single-chart-using-remapped-scale",
+      "path": "/docs/components/Chart/compound-dual-axis-with-single-chart-using-remapped-scale",
       "lineNumber": 43,
       "line": "<Spline class=\"stroke-2 stroke-primary\" />"
     },
     {
       "example": "compound-dual-axis-with-single-chart-using-remapped-scale",
       "component": "Chart",
-      "path": "/example/Chart/compound-dual-axis-with-single-chart-using-remapped-scale",
+      "path": "/docs/components/Chart/compound-dual-axis-with-single-chart-using-remapped-scale",
       "lineNumber": 44,
       "line": "<Spline y={(d) => context.y1Scale?.(d.efficiency)} class=\"stroke-2 stroke-secondary\" />"
     },
     {
       "example": "compound-dual-axis-with-stacked-charts",
       "component": "Chart",
-      "path": "/example/Chart/compound-dual-axis-with-stacked-charts",
+      "path": "/docs/components/Chart/compound-dual-axis-with-stacked-charts",
       "lineNumber": 30,
       "line": "<Spline class=\"stroke-2 stroke-primary\" />"
     },
     {
       "example": "compound-dual-axis-with-stacked-charts",
       "component": "Chart",
-      "path": "/example/Chart/compound-dual-axis-with-stacked-charts",
+      "path": "/docs/components/Chart/compound-dual-axis-with-stacked-charts",
       "lineNumber": 51,
       "line": "<Spline class=\"stroke-2 stroke-secondary\" />"
     },
     {
       "example": "compound-separate-scales-with-stacked-charts-and-overridden-marks",
       "component": "Chart",
-      "path": "/example/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks",
+      "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks",
       "lineNumber": 40,
       "line": "<Spline y=\"open\" class=\"stroke-primary\" />"
     },
     {
       "example": "compound-separate-scales-with-stacked-charts-and-overridden-marks",
       "component": "Chart",
-      "path": "/example/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks",
+      "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks",
       "lineNumber": 41,
       "line": "<Spline y=\"close\" class=\"stroke-secondary\" />"
     },
     {
       "example": "basic",
       "component": "Dagre",
-      "path": "/example/Dagre/basic",
+      "path": "/docs/components/Dagre/basic",
       "lineNumber": 51,
       "line": "<Spline"
     },
     {
       "example": "playground",
       "component": "Dagre",
-      "path": "/example/Dagre/playground",
+      "path": "/docs/components/Dagre/playground",
       "lineNumber": 52,
       "line": "<Spline"
     },
     {
       "example": "software-user-flow",
       "component": "Dagre",
-      "path": "/example/Dagre/software-user-flow",
+      "path": "/docs/components/Dagre/software-user-flow",
       "lineNumber": 53,
       "line": "<Spline"
     },
     {
       "example": "tcp-state-diagram",
       "component": "Dagre",
-      "path": "/example/Dagre/tcp-state-diagram",
-      "lineNumber": 51,
+      "path": "/docs/components/Dagre/tcp-state-diagram",
+      "lineNumber": 52,
       "line": "<Spline"
     },
     {
       "example": "spike-map",
       "component": "GeoPath",
-      "path": "/example/GeoPath/spike-map",
-      "lineNumber": 82,
+      "path": "/docs/components/GeoPath/spike-map",
+      "lineNumber": 83,
       "line": "<Spline"
     },
     {
       "example": "custom",
       "component": "LineChart",
-      "path": "/example/LineChart/custom",
+      "path": "/docs/components/LineChart/custom",
       "lineNumber": 23,
       "line": "<Spline class=\"stroke-2 stroke-primary\" />"
     },
     {
       "example": "gradient-encoding",
       "component": "LineChart",
-      "path": "/example/LineChart/gradient-encoding",
+      "path": "/docs/components/LineChart/gradient-encoding",
       "lineNumber": 21,
       "line": "<Spline stroke={gradient} />"
     },
     {
       "example": "gradient-threshold",
       "component": "LineChart",
-      "path": "/example/LineChart/gradient-threshold",
+      "path": "/docs/components/LineChart/gradient-threshold",
       "lineNumber": 23,
       "line": "<Spline stroke={gradient} />"
     },
     {
       "example": "null-dashed-gaps",
       "component": "LineChart",
-      "path": "/example/LineChart/null-dashed-gaps",
+      "path": "/docs/components/LineChart/null-dashed-gaps",
       "lineNumber": 17,
       "line": "<Spline"
     },
     {
       "example": "oscilloscope-time",
       "component": "LineChart",
-      "path": "/example/LineChart/oscilloscope-time",
+      "path": "/docs/components/LineChart/oscilloscope-time",
       "lineNumber": 106,
       "line": "<Spline stroke={gradient} />"
     },
     {
       "example": "series-individual-tooltip",
       "component": "LineChart",
-      "path": "/example/LineChart/series-individual-tooltip",
+      "path": "/docs/components/LineChart/series-individual-tooltip",
       "lineNumber": 49,
       "line": "<Spline {data} y={s.key} stroke={s.color} class={cls(!active && 'opacity-20 saturate-0')} />"
     },
     {
       "example": "series-with-nulls",
       "component": "LineChart",
-      "path": "/example/LineChart/series-with-nulls",
+      "path": "/docs/components/LineChart/series-with-nulls",
       "lineNumber": 37,
       "line": "<Spline"
     },
     {
       "example": "orientation",
       "component": "Marker",
-      "path": "/example/Marker/orientation",
+      "path": "/docs/components/Marker/orientation",
       "lineNumber": 37,
       "line": "<Spline"
     },
     {
       "example": "orientation",
       "component": "Marker",
-      "path": "/example/Marker/orientation",
+      "path": "/docs/components/Marker/orientation",
       "lineNumber": 51,
       "line": "<Spline"
     },
     {
       "example": "orientation",
       "component": "Marker",
-      "path": "/example/Marker/orientation",
+      "path": "/docs/components/Marker/orientation",
       "lineNumber": 65,
       "line": "<Spline"
     },
     {
       "example": "spline",
       "component": "Marker",
-      "path": "/example/Marker/spline",
+      "path": "/docs/components/Marker/spline",
       "lineNumber": 43,
       "line": "<Spline"
     },
     {
       "example": "spline-w-thicker-stroke",
       "component": "Marker",
-      "path": "/example/Marker/spline-w-thicker-stroke",
+      "path": "/docs/components/Marker/spline-w-thicker-stroke",
       "lineNumber": 44,
       "line": "<Spline"
     },
     {
       "example": "styling",
       "component": "Marker",
-      "path": "/example/Marker/styling",
+      "path": "/docs/components/Marker/styling",
       "lineNumber": 35,
       "line": "<Spline"
     },
     {
       "example": "repeat-indefinitely",
       "component": "MotionPath",
-      "path": "/example/MotionPath/repeat-indefinitely",
+      "path": "/docs/components/MotionPath/repeat-indefinitely",
       "lineNumber": 47,
       "line": "<Spline id={pathId} curve={config.curve} />"
     },
     {
       "example": "rotate-object-with-path",
       "component": "MotionPath",
-      "path": "/example/MotionPath/rotate-object-with-path",
+      "path": "/docs/components/MotionPath/rotate-object-with-path",
       "lineNumber": 49,
       "line": "<Spline id={pathId} curve={config.curve} />"
     },
     {
       "example": "sync-with-draw",
       "component": "MotionPath",
-      "path": "/example/MotionPath/sync-with-draw",
+      "path": "/docs/components/MotionPath/sync-with-draw",
       "lineNumber": 50,
       "line": "<Spline id={pathId} curve={config.curve} draw={{ duration: 3000, easing: linear }} />"
     },
     {
       "example": "basic",
       "component": "Spline",
-      "path": "/example/Spline/basic",
+      "path": "/docs/components/Spline/basic",
       "lineNumber": 14,
       "line": "<Spline class=\"stroke-2 stroke-primary\" />"
     },
     {
       "example": "basic-start-and-end-snippets",
       "component": "Spline",
-      "path": "/example/Spline/basic-start-and-end-snippets",
+      "path": "/docs/components/Spline/basic-start-and-end-snippets",
       "lineNumber": 36,
       "line": "<Spline curve={config.curve} class=\"stroke-primary stroke-2\">"
     },
     {
       "example": "draw",
       "component": "Spline",
-      "path": "/example/Spline/draw",
+      "path": "/docs/components/Spline/draw",
       "lineNumber": 36,
       "line": "<Spline curve={config.curve} draw class=\"stroke-primary stroke-2\" />"
     },
     {
       "example": "end-slot-with-draw-with-value",
       "component": "Spline",
-      "path": "/example/Spline/end-slot-with-draw-with-value",
+      "path": "/docs/components/Spline/end-slot-with-draw-with-value",
       "lineNumber": 37,
       "line": "<Spline curve={config.curve} draw={{ duration: 3000 }} class=\"stroke-primary stroke-2\">"
     },
     {
       "example": "end-snippet-with-draw",
       "component": "Spline",
-      "path": "/example/Spline/end-snippet-with-draw",
+      "path": "/docs/components/Spline/end-snippet-with-draw",
       "lineNumber": 36,
       "line": "<Spline curve={config.curve} draw={{ duration: 3000 }} class=\"stroke-primary stroke-2\">"
     },
     {
       "example": "gradient-encoding",
       "component": "Spline",
-      "path": "/example/Spline/gradient-encoding",
+      "path": "/docs/components/Spline/gradient-encoding",
       "lineNumber": 24,
       "line": "<Spline class=\"stroke-2\" stroke={gradient} />"
     },
     {
       "example": "gradient-threshold",
       "component": "Spline",
-      "path": "/example/Spline/gradient-threshold",
+      "path": "/docs/components/Spline/gradient-threshold",
       "lineNumber": 26,
       "line": "<Spline class=\"stroke-2\" stroke={gradient} />"
     },
     {
       "example": "label-using-start-end-snippets",
       "component": "Spline",
-      "path": "/example/Spline/label-using-start-end-snippets",
+      "path": "/docs/components/Spline/label-using-start-end-snippets",
       "lineNumber": 36,
       "line": "<Spline curve={config.curve} class=\"stroke-primary stroke-2\">"
     },
     {
       "example": "markers-arrows",
       "component": "Spline",
-      "path": "/example/Spline/markers-arrows",
+      "path": "/docs/components/Spline/markers-arrows",
       "lineNumber": 36,
       "line": "<Spline"
     },
     {
       "example": "multiple-series",
       "component": "Spline",
-      "path": "/example/Spline/multiple-series",
+      "path": "/docs/components/Spline/multiple-series",
       "lineNumber": 55,
       "line": "<Spline {data} class=\"stroke-2\" stroke={color}>"
     },
     {
       "example": "multiple-series-highlight-on-hover",
       "component": "Spline",
-      "path": "/example/Spline/multiple-series-highlight-on-hover",
+      "path": "/docs/components/Spline/multiple-series-highlight-on-hover",
       "lineNumber": 58,
       "line": "<Spline {data} class=\"stroke-2\" stroke={color}>"
     },
     {
       "example": "multiple-series-using-overrides",
       "component": "Spline",
-      "path": "/example/Spline/multiple-series-using-overrides",
+      "path": "/docs/components/Spline/multiple-series-using-overrides",
       "lineNumber": 31,
       "line": "<Spline y={(d) => d.y} class=\"stroke-2\" stroke={fruitColors.bananas} />"
     },
     {
       "example": "multiple-series-using-overrides",
       "component": "Spline",
-      "path": "/example/Spline/multiple-series-using-overrides",
+      "path": "/docs/components/Spline/multiple-series-using-overrides",
       "lineNumber": 32,
       "line": "<Spline y={(d) => d.y1} class=\"stroke-2\" stroke={fruitColors.oranges} />"
     },
     {
       "example": "multiple-series-with-labels",
       "component": "Spline",
-      "path": "/example/Spline/multiple-series-with-labels",
+      "path": "/docs/components/Spline/multiple-series-with-labels",
       "lineNumber": 45,
       "line": "<Spline {data} class=\"stroke-2\" stroke={color} />"
     },
     {
       "example": "playground",
       "component": "Spline",
-      "path": "/example/Spline/playground",
+      "path": "/docs/components/Spline/playground",
       "lineNumber": 38,
       "line": "<Spline"
     },
     {
       "example": "radial-line-with-areas",
       "component": "Spline",
-      "path": "/example/Spline/radial-line-with-areas",
+      "path": "/docs/components/Spline/radial-line-with-areas",
       "lineNumber": 23,
       "line": "<Spline y={(d) => d.avg} curve={curveCatmullRom} class=\"stroke-primary\" />"
     },
     {
       "example": "radial-multi-year-lines",
       "component": "Spline",
-      "path": "/example/Spline/radial-multi-year-lines",
+      "path": "/docs/components/Spline/radial-multi-year-lines",
       "lineNumber": 30,
       "line": "<Spline"
     },
     {
       "example": "radial-radar",
       "component": "Spline",
-      "path": "/example/Spline/radial-radar",
+      "path": "/docs/components/Spline/radial-radar",
       "lineNumber": 38,
       "line": "<Spline {curve} class=\"stroke-primary fill-primary/20\" />"
     },
     {
       "example": "tweened",
       "component": "Spline",
-      "path": "/example/Spline/tweened",
+      "path": "/docs/components/Spline/tweened",
       "lineNumber": 36,
       "line": "<Spline curve={config.curve} motion=\"tween\" class=\"stroke-primary stroke-2\" />"
     },
     {
       "example": "vertical",
       "component": "Spline",
-      "path": "/example/Spline/vertical",
+      "path": "/docs/components/Spline/vertical",
       "lineNumber": 24,
       "line": "<Spline class=\"stroke-2 stroke-primary\" />"
     },
     {
       "example": "with-labels",
       "component": "Spline",
-      "path": "/example/Spline/with-labels",
+      "path": "/docs/components/Spline/with-labels",
       "lineNumber": 14,
       "line": "<Spline class=\"stroke-2 stroke-primary\" />"
     },
     {
       "example": "with-tooltip-and-highlight",
       "component": "Spline",
-      "path": "/example/Spline/with-tooltip-and-highlight",
+      "path": "/docs/components/Spline/with-tooltip-and-highlight",
       "lineNumber": 23,
       "line": "<Spline class=\"stroke-2 stroke-primary\" />"
     },
     {
       "example": "basic",
       "component": "Threshold",
-      "path": "/example/Threshold/basic",
+      "path": "/docs/components/Threshold/basic",
       "lineNumber": 37,
       "line": "<Spline y=\"baseline\" {curve} class=\"[stroke-dasharray:4]\" />"
     },
     {
       "example": "basic",
       "component": "Threshold",
-      "path": "/example/Threshold/basic",
+      "path": "/docs/components/Threshold/basic",
       "lineNumber": 38,
       "line": "<Spline y=\"value\" {curve} class=\"stroke-[1.5]\" />"
     },
     {
       "example": "with-labels",
       "component": "Threshold",
-      "path": "/example/Threshold/with-labels",
+      "path": "/docs/components/Threshold/with-labels",
       "lineNumber": 42,
       "line": "<Spline y=\"baseline\" {curve} class=\"[stroke-dasharray:4]\" />"
     },
     {
       "example": "with-labels",
       "component": "Threshold",
-      "path": "/example/Threshold/with-labels",
+      "path": "/docs/components/Threshold/with-labels",
       "lineNumber": 43,
       "line": "<Spline y=\"value\" {curve} class=\"stroke-[1.5]\" />"
     },
     {
       "example": "with-tooltip-and-highlight",
       "component": "Threshold",
-      "path": "/example/Threshold/with-tooltip-and-highlight",
+      "path": "/docs/components/Threshold/with-tooltip-and-highlight",
       "lineNumber": 44,
       "line": "<Spline y=\"baseline\" {curve} class=\"[stroke-dasharray:4]\" />"
     },
     {
       "example": "with-tooltip-and-highlight",
       "component": "Threshold",
-      "path": "/example/Threshold/with-tooltip-and-highlight",
+      "path": "/docs/components/Threshold/with-tooltip-and-highlight",
       "lineNumber": 45,
       "line": "<Spline y=\"value\" {curve} class=\"stroke-[1.5]\" />"
     },
     {
       "example": "playground",
       "component": "TransformContext",
-      "path": "/example/TransformContext/playground",
-      "lineNumber": 51,
+      "path": "/docs/components/TransformContext/playground",
+      "lineNumber": 52,
       "line": "<Spline curve={config.curve} motion=\"tween\" />"
     }
   ],
-  "updatedAt": "2025-12-29T21:36:45.318Z"
+  "updatedAt": "2026-02-07T20:21:32.313Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Svg.json b/docs/src/examples/catalog/Svg.json
index 885e36365..68ba124b3 100644
--- a/docs/src/examples/catalog/Svg.json
+++ b/docs/src/examples/catalog/Svg.json
@@ -5,31 +5,31 @@
     {
       "example": "basic",
       "component": "ColorRamp",
-      "path": "/example/ColorRamp/basic",
+      "path": "/docs/components/ColorRamp/basic",
       "lineNumber": 23,
       "line": "<svg {width} {height}>"
     },
     {
       "example": "pixelated",
       "component": "ColorRamp",
-      "path": "/example/ColorRamp/pixelated",
+      "path": "/docs/components/ColorRamp/pixelated",
       "lineNumber": 27,
       "line": "<svg {width} {height}>"
     },
     {
       "example": "schemes",
       "component": "ColorRamp",
-      "path": "/example/ColorRamp/schemes",
+      "path": "/docs/components/ColorRamp/schemes",
       "lineNumber": 20,
       "line": "<svg {width} {height}>"
     },
     {
       "example": "schemes",
       "component": "ColorRamp",
-      "path": "/example/ColorRamp/schemes",
+      "path": "/docs/components/ColorRamp/schemes",
       "lineNumber": 34,
       "line": "<svg {width} {height}>"
     }
   ],
-  "updatedAt": "2025-11-09T02:04:07.640Z"
+  "updatedAt": "2026-02-07T17:00:32.593Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Text.json b/docs/src/examples/catalog/Text.json
index b53621f16..c40ee120f 100644
--- a/docs/src/examples/catalog/Text.json
+++ b/docs/src/examples/catalog/Text.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "playground",
-      "path": "/example/Text/playground",
+      "title": "playground",
+      "path": "/docs/components/Text/playground",
       "components": [
         {
           "component": "Chart",
@@ -29,29 +30,32 @@
     },
     {
       "name": "truncate-axis-labels",
-      "path": "/example/Text/truncate-axis-labels",
+      "title": "truncate axis labels",
+      "path": "/docs/components/Text/truncate-axis-labels",
       "components": [
         {
           "component": "BarChart",
-          "lineNumber": 34,
+          "lineNumber": 28,
           "line": "<BarChart"
         }
       ]
     },
     {
       "name": "word-wrap-axis-labels",
-      "path": "/example/Text/word-wrap-axis-labels",
+      "title": "word wrap axis labels",
+      "path": "/docs/components/Text/word-wrap-axis-labels",
       "components": [
         {
           "component": "BarChart",
-          "lineNumber": 29,
+          "lineNumber": 23,
           "line": "<BarChart"
         }
       ]
     },
     {
       "name": "word-wrap-with-explicit-newline",
-      "path": "/example/Text/word-wrap-with-explicit-newline",
+      "title": "word wrap with explicit newline",
+      "path": "/docs/components/Text/word-wrap-with-explicit-newline",
       "components": [
         {
           "component": "Chart",
@@ -75,591 +79,591 @@
     {
       "example": "line-to-point",
       "component": "AnnotationPoint",
-      "path": "/example/AnnotationPoint/line-to-point",
+      "path": "/docs/components/AnnotationPoint/line-to-point",
       "lineNumber": 58,
       "line": "<Text x={context.width / 2} y={10} textAnchor=\"middle\" value=\"Apple Stock\" />"
     },
     {
       "example": "draggable-arc",
       "component": "Arc",
-      "path": "/example/Arc/draggable-arc",
+      "path": "/docs/components/Arc/draggable-arc",
       "lineNumber": 66,
       "line": "<Text"
     },
     {
       "example": "label-direction",
       "component": "Arc",
-      "path": "/example/Arc/label-direction",
+      "path": "/docs/components/Arc/label-direction",
       "lineNumber": 67,
       "line": "<Text"
     },
     {
       "example": "label-direction",
       "component": "Arc",
-      "path": "/example/Arc/label-direction",
+      "path": "/docs/components/Arc/label-direction",
       "lineNumber": 74,
       "line": "<Text"
     },
     {
       "example": "label-direction",
       "component": "Arc",
-      "path": "/example/Arc/label-direction",
+      "path": "/docs/components/Arc/label-direction",
       "lineNumber": 83,
       "line": "<Text {...getArcTextProps('inner')} value={innerText} font-size=\"12px\" truncate />"
     },
     {
       "example": "label-direction",
       "component": "Arc",
-      "path": "/example/Arc/label-direction",
+      "path": "/docs/components/Arc/label-direction",
       "lineNumber": 84,
       "line": "<Text {...getArcTextProps('outer')} value={outerText} font-size=\"12px\" truncate />"
     },
     {
       "example": "label-direction",
       "component": "Arc",
-      "path": "/example/Arc/label-direction",
+      "path": "/docs/components/Arc/label-direction",
       "lineNumber": 85,
       "line": "<Text"
     },
     {
       "example": "partial-arc",
       "component": "Arc",
-      "path": "/example/Arc/partial-arc",
+      "path": "/docs/components/Arc/partial-arc",
       "lineNumber": 28,
       "line": "<Text"
     },
     {
       "example": "playground",
       "component": "Arc",
-      "path": "/example/Arc/playground",
+      "path": "/docs/components/Arc/playground",
       "lineNumber": 43,
       "line": "<Text"
     },
     {
       "example": "playground",
       "component": "Arc",
-      "path": "/example/Arc/playground",
+      "path": "/docs/components/Arc/playground",
       "lineNumber": 51,
       "line": "<Text"
     },
     {
       "example": "playground",
       "component": "Arc",
-      "path": "/example/Arc/playground",
+      "path": "/docs/components/Arc/playground",
       "lineNumber": 57,
       "line": "<Text"
     },
     {
       "example": "playground",
       "component": "Arc",
-      "path": "/example/Arc/playground",
+      "path": "/docs/components/Arc/playground",
       "lineNumber": 63,
       "line": "<Text"
     },
     {
       "example": "segmented-arc",
       "component": "Arc",
-      "path": "/example/Arc/segmented-arc",
+      "path": "/docs/components/Arc/segmented-arc",
       "lineNumber": 34,
       "line": "<Text"
     },
     {
       "example": "segmented-arc-clip-mask",
       "component": "Arc",
-      "path": "/example/Arc/segmented-arc-clip-mask",
+      "path": "/docs/components/Arc/segmented-arc-clip-mask",
       "lineNumber": 39,
       "line": "<Text"
     },
     {
       "example": "gradient-with-text",
       "component": "ArcChart",
-      "path": "/example/ArcChart/gradient-with-text",
+      "path": "/docs/components/ArcChart/gradient-with-text",
       "lineNumber": 21,
       "line": "<Text"
     },
     {
       "example": "series-labels",
       "component": "ArcChart",
-      "path": "/example/ArcChart/series-labels",
+      "path": "/docs/components/ArcChart/series-labels",
       "lineNumber": 31,
       "line": "<Text"
     },
     {
       "example": "explicit-axis-ticks-min-max",
       "component": "Area",
-      "path": "/example/Area/explicit-axis-ticks-min-max",
+      "path": "/docs/components/Area/explicit-axis-ticks-min-max",
       "lineNumber": 15,
       "line": "<Text {...props} textAnchor={index ? 'end' : 'start'} />"
     },
     {
       "example": "multiple-series",
       "component": "Area",
-      "path": "/example/Area/multiple-series",
+      "path": "/docs/components/Area/multiple-series",
       "lineNumber": 62,
       "line": "<Text"
     },
     {
       "example": "multiple-series-highlight-on-hover",
       "component": "Area",
-      "path": "/example/Area/multiple-series-highlight-on-hover",
+      "path": "/docs/components/Area/multiple-series-highlight-on-hover",
       "lineNumber": 65,
       "line": "<Text"
     },
     {
       "example": "funnel",
       "component": "AreaChart",
-      "path": "/example/AreaChart/funnel",
+      "path": "/docs/components/AreaChart/funnel",
       "lineNumber": 82,
       "line": "<Text"
     },
     {
       "example": "extent-ticks-only",
       "component": "Axis",
-      "path": "/example/Axis/extent-ticks-only",
+      "path": "/docs/components/Axis/extent-ticks-only",
       "lineNumber": 23,
       "line": "<Text {...props} textAnchor={index === 0 ? 'start' : 'end'} />"
     },
     {
       "example": "group-series-labels",
       "component": "BarChart",
-      "path": "/example/BarChart/group-series-labels",
+      "path": "/docs/components/BarChart/group-series-labels",
       "lineNumber": 45,
       "line": "<Text"
     },
     {
       "example": "single-stack-with-indicator",
       "component": "BarChart",
-      "path": "/example/BarChart/single-stack-with-indicator",
+      "path": "/docs/components/BarChart/single-stack-with-indicator",
       "lineNumber": 67,
       "line": "<Text {...props} textAnchor={props.value === '40' ? 'end' : 'start'} />"
     },
     {
       "example": "horizontal-average-annotation-rule",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-average-annotation-rule",
+      "path": "/docs/components/Bars/horizontal-average-annotation-rule",
       "lineNumber": 35,
       "line": "<Text"
     },
     {
       "example": "vertical-average-annotation-rule",
       "component": "Bars",
-      "path": "/example/Bars/vertical-average-annotation-rule",
+      "path": "/docs/components/Bars/vertical-average-annotation-rule",
       "lineNumber": 33,
       "line": "<Text"
     },
     {
       "example": "constant-labels",
       "component": "BrushContext",
-      "path": "/example/BrushContext/constant-labels",
+      "path": "/docs/components/BrushContext/constant-labels",
       "lineNumber": 16,
       "line": "<Text"
     },
     {
       "example": "constant-labels",
       "component": "BrushContext",
-      "path": "/example/BrushContext/constant-labels",
+      "path": "/docs/components/BrushContext/constant-labels",
       "lineNumber": 24,
       "line": "<Text"
     },
     {
       "example": "handle-labels",
       "component": "BrushContext",
-      "path": "/example/BrushContext/handle-labels",
+      "path": "/docs/components/BrushContext/handle-labels",
       "lineNumber": 16,
       "line": "<Text"
     },
     {
       "example": "handle-labels",
       "component": "BrushContext",
-      "path": "/example/BrushContext/handle-labels",
+      "path": "/docs/components/BrushContext/handle-labels",
       "lineNumber": 24,
       "line": "<Text"
     },
     {
       "example": "multiple-years",
       "component": "Calendar",
-      "path": "/example/Calendar/multiple-years",
+      "path": "/docs/components/Calendar/multiple-years",
       "lineNumber": 41,
       "line": "<Text"
     },
     {
       "example": "basic",
       "component": "Dagre",
-      "path": "/example/Dagre/basic",
+      "path": "/docs/components/Dagre/basic",
       "lineNumber": 73,
       "line": "<Text"
     },
     {
       "example": "playground",
       "component": "Dagre",
-      "path": "/example/Dagre/playground",
+      "path": "/docs/components/Dagre/playground",
       "lineNumber": 74,
       "line": "<Text"
     },
     {
       "example": "software-user-flow",
       "component": "Dagre",
-      "path": "/example/Dagre/software-user-flow",
+      "path": "/docs/components/Dagre/software-user-flow",
       "lineNumber": 63,
       "line": "<Text"
     },
     {
       "example": "software-user-flow",
       "component": "Dagre",
-      "path": "/example/Dagre/software-user-flow",
+      "path": "/docs/components/Dagre/software-user-flow",
       "lineNumber": 89,
       "line": "<Text"
     },
     {
       "example": "tcp-state-diagram",
       "component": "Dagre",
-      "path": "/example/Dagre/tcp-state-diagram",
-      "lineNumber": 61,
+      "path": "/docs/components/Dagre/tcp-state-diagram",
+      "lineNumber": 62,
       "line": "<Text"
     },
     {
       "example": "tcp-state-diagram",
       "component": "Dagre",
-      "path": "/example/Dagre/tcp-state-diagram",
-      "lineNumber": 87,
+      "path": "/docs/components/Dagre/tcp-state-diagram",
+      "lineNumber": 88,
       "line": "<Text"
     },
     {
       "example": "us-country-map",
       "component": "GeoPath",
-      "path": "/example/GeoPath/us-country-map",
+      "path": "/docs/components/GeoPath/us-country-map",
       "lineNumber": 37,
       "line": "<!-- <Text"
     },
     {
       "example": "icons",
       "component": "GeoPoint",
-      "path": "/example/GeoPoint/icons",
-      "lineNumber": 46,
+      "path": "/docs/components/GeoPoint/icons",
+      "lineNumber": 40,
       "line": "<Text"
     },
     {
       "example": "us-state-capitals",
       "component": "GeoPoint",
-      "path": "/example/GeoPoint/us-state-capitals",
+      "path": "/docs/components/GeoPoint/us-state-capitals",
       "lineNumber": 39,
       "line": "<Text"
     },
     {
       "example": "us-state-capitals",
       "component": "GeoPoint",
-      "path": "/example/GeoPoint/us-state-capitals",
+      "path": "/docs/components/GeoPoint/us-state-capitals",
       "lineNumber": 50,
       "line": "<Text"
     },
     {
       "example": "world-capitals",
       "component": "GeoPoint",
-      "path": "/example/GeoPoint/world-capitals",
+      "path": "/docs/components/GeoPoint/world-capitals",
       "lineNumber": 67,
       "line": "<Text"
     },
     {
       "example": "world-capitals",
       "component": "GeoPoint",
-      "path": "/example/GeoPoint/world-capitals",
+      "path": "/docs/components/GeoPoint/world-capitals",
       "lineNumber": 82,
       "line": "<Text"
     },
     {
       "example": "basic",
       "component": "Group",
-      "path": "/example/Group/basic",
+      "path": "/docs/components/Group/basic",
       "lineNumber": 14,
       "line": "<Text value=\"point\" textAnchor=\"middle\" verticalAnchor=\"start\" class=\"text-xs\" dy={12} />"
     },
     {
       "example": "geo",
       "component": "Hull",
-      "path": "/example/Hull/geo",
+      "path": "/docs/components/Hull/geo",
       "lineNumber": 48,
       "line": "<Text"
     },
     {
       "example": "basic",
       "component": "Pack",
-      "path": "/example/Pack/basic",
+      "path": "/docs/components/Pack/basic",
       "lineNumber": 140,
       "line": "<Text"
     },
     {
       "example": "filterable",
       "component": "Partition",
-      "path": "/example/Partition/filterable",
+      "path": "/docs/components/Partition/filterable",
       "lineNumber": 142,
       "line": "<text"
     },
     {
       "example": "horizontal",
       "component": "Partition",
-      "path": "/example/Partition/horizontal",
+      "path": "/docs/components/Partition/horizontal",
       "lineNumber": 119,
       "line": "<text"
     },
     {
       "example": "vertical",
       "component": "Partition",
-      "path": "/example/Partition/vertical",
+      "path": "/docs/components/Partition/vertical",
       "lineNumber": 120,
       "line": "<Text"
     },
     {
       "example": "vertical",
       "component": "Partition",
-      "path": "/example/Partition/vertical",
+      "path": "/docs/components/Partition/vertical",
       "lineNumber": 130,
       "line": "<Text"
     },
     {
       "example": "labels",
       "component": "Pie",
-      "path": "/example/Pie/labels",
+      "path": "/docs/components/Pie/labels",
       "lineNumber": 31,
       "line": "<Text"
     },
     {
       "example": "labels-centroid",
       "component": "Pie",
-      "path": "/example/Pie/labels-centroid",
+      "path": "/docs/components/Pie/labels-centroid",
       "lineNumber": 31,
       "line": "<Text"
     },
     {
       "example": "labels-centroid-multiple",
       "component": "Pie",
-      "path": "/example/Pie/labels-centroid-multiple",
+      "path": "/docs/components/Pie/labels-centroid-multiple",
       "lineNumber": 35,
       "line": "<Text"
     },
     {
       "example": "labels-centroid-multiple",
       "component": "Pie",
-      "path": "/example/Pie/labels-centroid-multiple",
+      "path": "/docs/components/Pie/labels-centroid-multiple",
       "lineNumber": 41,
       "line": "<Text"
     },
     {
       "example": "labels-outer",
       "component": "Pie",
-      "path": "/example/Pie/labels-outer",
+      "path": "/docs/components/Pie/labels-outer",
       "lineNumber": 31,
       "line": "<Text"
     },
     {
       "example": "labels-outer-radial",
       "component": "Pie",
-      "path": "/example/Pie/labels-outer-radial",
+      "path": "/docs/components/Pie/labels-outer-radial",
       "lineNumber": 31,
       "line": "<Text"
     },
     {
       "example": "labels-outer-with-padding",
       "component": "Pie",
-      "path": "/example/Pie/labels-outer-with-padding",
+      "path": "/docs/components/Pie/labels-outer-with-padding",
       "lineNumber": 31,
       "line": "<Text"
     },
     {
       "example": "tooltip-with-arcs-slot",
       "component": "Pie",
-      "path": "/example/Pie/tooltip-with-arcs-slot",
+      "path": "/docs/components/Pie/tooltip-with-arcs-slot",
       "lineNumber": 56,
       "line": "<Text"
     },
     {
       "example": "donut-with-text",
       "component": "PieChart",
-      "path": "/example/PieChart/donut-with-text",
+      "path": "/docs/components/PieChart/donut-with-text",
       "lineNumber": 23,
       "line": "<Text"
     },
     {
       "example": "donut-with-text",
       "component": "PieChart",
-      "path": "/example/PieChart/donut-with-text",
+      "path": "/docs/components/PieChart/donut-with-text",
       "lineNumber": 30,
       "line": "<Text"
     },
     {
       "example": "segments",
       "component": "PieChart",
-      "path": "/example/PieChart/segments",
+      "path": "/docs/components/PieChart/segments",
       "lineNumber": 37,
       "line": "<Text"
     },
     {
       "example": "complex",
       "component": "Sankey",
-      "path": "/example/Sankey/complex",
+      "path": "/docs/components/Sankey/complex",
       "lineNumber": 108,
       "line": "<Text"
     },
     {
       "example": "hierarchy",
       "component": "Sankey",
-      "path": "/example/Sankey/hierarchy",
+      "path": "/docs/components/Sankey/hierarchy",
       "lineNumber": 115,
       "line": "<Text"
     },
     {
       "example": "node-select",
       "component": "Sankey",
-      "path": "/example/Sankey/node-select",
+      "path": "/docs/components/Sankey/node-select",
       "lineNumber": 49,
       "line": "<Text"
     },
     {
       "example": "simple",
       "component": "Sankey",
-      "path": "/example/Sankey/simple",
+      "path": "/docs/components/Sankey/simple",
       "lineNumber": 20,
       "line": "<Text"
     },
     {
       "example": "tooltip",
       "component": "Sankey",
-      "path": "/example/Sankey/tooltip",
+      "path": "/docs/components/Sankey/tooltip",
       "lineNumber": 38,
       "line": "<Text"
     },
     {
       "example": "end-slot-with-draw-with-value",
       "component": "Spline",
-      "path": "/example/Spline/end-slot-with-draw-with-value",
+      "path": "/docs/components/Spline/end-slot-with-draw-with-value",
       "lineNumber": 40,
       "line": "<Text"
     },
     {
       "example": "label-using-start-end-snippets",
       "component": "Spline",
-      "path": "/example/Spline/label-using-start-end-snippets",
+      "path": "/docs/components/Spline/label-using-start-end-snippets",
       "lineNumber": 39,
       "line": "<Text value=\"start\" textAnchor=\"start\" verticalAnchor=\"middle\" dx={8} />"
     },
     {
       "example": "label-using-start-end-snippets",
       "component": "Spline",
-      "path": "/example/Spline/label-using-start-end-snippets",
+      "path": "/docs/components/Spline/label-using-start-end-snippets",
       "lineNumber": 44,
       "line": "<Text value=\"end\" verticalAnchor=\"middle\" dx={8} />"
     },
     {
       "example": "multiple-series",
       "component": "Spline",
-      "path": "/example/Spline/multiple-series",
+      "path": "/docs/components/Spline/multiple-series",
       "lineNumber": 58,
       "line": "<Text"
     },
     {
       "example": "multiple-series-highlight-on-hover",
       "component": "Spline",
-      "path": "/example/Spline/multiple-series-highlight-on-hover",
+      "path": "/docs/components/Spline/multiple-series-highlight-on-hover",
       "lineNumber": 61,
       "line": "<Text"
     },
     {
       "example": "playground",
       "component": "Text",
-      "path": "/example/Text/playground",
+      "path": "/docs/components/Text/playground",
       "lineNumber": 46,
       "line": "<Text {...config} truncate={config.truncate ? config.truncateOptions : false} />"
     },
     {
       "example": "word-wrap-with-explicit-newline",
       "component": "Text",
-      "path": "/example/Text/word-wrap-with-explicit-newline",
+      "path": "/docs/components/Text/word-wrap-with-explicit-newline",
       "lineNumber": 10,
       "line": "<Text value={'March\\n2025'} verticalAnchor=\"start\" />"
     },
     {
       "example": "basic",
       "component": "Tree",
-      "path": "/example/Tree/basic",
-      "lineNumber": 114,
+      "path": "/docs/components/Tree/basic",
+      "lineNumber": 115,
       "line": "<Text"
     },
     {
       "example": "basic",
       "component": "Treemap",
-      "path": "/example/Treemap/basic",
+      "path": "/docs/components/Treemap/basic",
       "lineNumber": 48,
       "line": "<Text"
     },
     {
       "example": "complex",
       "component": "Treemap",
-      "path": "/example/Treemap/complex",
+      "path": "/docs/components/Treemap/complex",
       "lineNumber": 108,
       "line": "<text"
     },
     {
       "example": "complex",
       "component": "Treemap",
-      "path": "/example/Treemap/complex",
+      "path": "/docs/components/Treemap/complex",
       "lineNumber": 125,
       "line": "<Text"
     },
     {
       "example": "nested-filter",
       "component": "Treemap",
-      "path": "/example/Treemap/nested-filter",
+      "path": "/docs/components/Treemap/nested-filter",
       "lineNumber": 160,
       "line": "<text"
     },
     {
       "example": "nested-filter",
       "component": "Treemap",
-      "path": "/example/Treemap/nested-filter",
+      "path": "/docs/components/Treemap/nested-filter",
       "lineNumber": 176,
       "line": "<!-- <Text"
     },
     {
       "example": "nested-zoom",
       "component": "Treemap",
-      "path": "/example/Treemap/nested-zoom",
+      "path": "/docs/components/Treemap/nested-zoom",
       "lineNumber": 126,
       "line": "<text"
     },
     {
       "example": "nested-zoom",
       "component": "Treemap",
-      "path": "/example/Treemap/nested-zoom",
+      "path": "/docs/components/Treemap/nested-zoom",
       "lineNumber": 142,
       "line": "<Text"
     },
     {
       "example": "playground",
       "component": "Treemap",
-      "path": "/example/Treemap/playground",
+      "path": "/docs/components/Treemap/playground",
       "lineNumber": 154,
       "line": "<text"
     },
     {
       "example": "playground",
       "component": "Treemap",
-      "path": "/example/Treemap/playground",
+      "path": "/docs/components/Treemap/playground",
       "lineNumber": 171,
       "line": "<Text"
     },
     {
       "example": "stacked-zoom",
       "component": "Treemap",
-      "path": "/example/Treemap/stacked-zoom",
+      "path": "/docs/components/Treemap/stacked-zoom",
       "lineNumber": 112,
       "line": "<Text"
     },
     {
       "example": "stacked-zoom",
       "component": "Treemap",
-      "path": "/example/Treemap/stacked-zoom",
+      "path": "/docs/components/Treemap/stacked-zoom",
       "lineNumber": 122,
       "line": "<Text"
     }
   ],
-  "updatedAt": "2026-01-25T22:34:27.876Z"
+  "updatedAt": "2026-02-07T20:21:32.355Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Threshold.json b/docs/src/examples/catalog/Threshold.json
index 45cd363f3..37206af92 100644
--- a/docs/src/examples/catalog/Threshold.json
+++ b/docs/src/examples/catalog/Threshold.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "basic",
-      "path": "/example/Threshold/basic",
+      "title": "basic",
+      "path": "/docs/components/Threshold/basic",
       "components": [
         {
           "component": "AreaChart",
@@ -29,7 +30,8 @@
     },
     {
       "name": "with-labels",
-      "path": "/example/Threshold/with-labels",
+      "title": "with labels",
+      "path": "/docs/components/Threshold/with-labels",
       "components": [
         {
           "component": "AreaChart",
@@ -55,7 +57,8 @@
     },
     {
       "name": "with-tooltip-and-highlight",
-      "path": "/example/Threshold/with-tooltip-and-highlight",
+      "title": "with tooltip and highlight",
+      "path": "/docs/components/Threshold/with-tooltip-and-highlight",
       "components": [
         {
           "component": "AreaChart",
@@ -89,31 +92,31 @@
     {
       "example": "threshold",
       "component": "AreaChart",
-      "path": "/example/AreaChart/threshold",
+      "path": "/docs/components/AreaChart/threshold",
       "lineNumber": 34,
       "line": "<Threshold curve={selectedCurve}>"
     },
     {
       "example": "basic",
       "component": "Threshold",
-      "path": "/example/Threshold/basic",
+      "path": "/docs/components/Threshold/basic",
       "lineNumber": 31,
       "line": "<Threshold curve={selectedCurve}>"
     },
     {
       "example": "with-labels",
       "component": "Threshold",
-      "path": "/example/Threshold/with-labels",
+      "path": "/docs/components/Threshold/with-labels",
       "lineNumber": 32,
       "line": "<Threshold curve={selectedCurve}>"
     },
     {
       "example": "with-tooltip-and-highlight",
       "component": "Threshold",
-      "path": "/example/Threshold/with-tooltip-and-highlight",
+      "path": "/docs/components/Threshold/with-tooltip-and-highlight",
       "lineNumber": 34,
       "line": "<Threshold curve={selectedCurve}>"
     }
   ],
-  "updatedAt": "2025-11-23T01:49:02.851Z"
+  "updatedAt": "2026-02-07T20:21:32.369Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Tooltip.json b/docs/src/examples/catalog/Tooltip.json
index b2898bb93..487bf1fd6 100644
--- a/docs/src/examples/catalog/Tooltip.json
+++ b/docs/src/examples/catalog/Tooltip.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "anchor-location",
-      "path": "/example/Tooltip/anchor-location",
+      "title": "anchor location",
+      "path": "/docs/components/Tooltip/anchor-location",
       "components": [
         {
           "component": "Chart",
@@ -39,7 +40,8 @@
     },
     {
       "name": "area",
-      "path": "/example/Tooltip/area",
+      "title": "area",
+      "path": "/docs/components/Tooltip/area",
       "components": [
         {
           "component": "Chart",
@@ -75,7 +77,8 @@
     },
     {
       "name": "basic",
-      "path": "/example/Tooltip/basic",
+      "title": "basic",
+      "path": "/docs/components/Tooltip/basic",
       "components": [
         {
           "component": "Chart",
@@ -111,7 +114,8 @@
     },
     {
       "name": "color-swatch",
-      "path": "/example/Tooltip/color-swatch",
+      "title": "color swatch",
+      "path": "/docs/components/Tooltip/color-swatch",
       "components": [
         {
           "component": "Chart",
@@ -147,7 +151,8 @@
     },
     {
       "name": "color-swatch-using-theme",
-      "path": "/example/Tooltip/color-swatch-using-theme",
+      "title": "color swatch using theme",
+      "path": "/docs/components/Tooltip/color-swatch-using-theme",
       "components": [
         {
           "component": "Chart",
@@ -183,7 +188,8 @@
     },
     {
       "name": "custom-content",
-      "path": "/example/Tooltip/custom-content",
+      "title": "custom content",
+      "path": "/docs/components/Tooltip/custom-content",
       "components": [
         {
           "component": "Chart",
@@ -219,7 +225,8 @@
     },
     {
       "name": "data-snapping",
-      "path": "/example/Tooltip/data-snapping",
+      "title": "data snapping",
+      "path": "/docs/components/Tooltip/data-snapping",
       "components": [
         {
           "component": "Chart",
@@ -255,7 +262,8 @@
     },
     {
       "name": "default-mouse-position-with-offset",
-      "path": "/example/Tooltip/default-mouse-position-with-offset",
+      "title": "default mouse position with offset",
+      "path": "/docs/components/Tooltip/default-mouse-position-with-offset",
       "components": [
         {
           "component": "Chart",
@@ -291,7 +299,8 @@
     },
     {
       "name": "disable-motion",
-      "path": "/example/Tooltip/disable-motion",
+      "title": "disable motion",
+      "path": "/docs/components/Tooltip/disable-motion",
       "components": [
         {
           "component": "Chart",
@@ -327,7 +336,8 @@
     },
     {
       "name": "duration",
-      "path": "/example/Tooltip/duration",
+      "title": "duration",
+      "path": "/docs/components/Tooltip/duration",
       "components": [
         {
           "component": "Chart",
@@ -368,7 +378,8 @@
     },
     {
       "name": "externally-access-tooltip-data",
-      "path": "/example/Tooltip/externally-access-tooltip-data",
+      "title": "externally access tooltip data",
+      "path": "/docs/components/Tooltip/externally-access-tooltip-data",
       "components": [
         {
           "component": "Chart",
@@ -404,7 +415,8 @@
     },
     {
       "name": "invert-variant",
-      "path": "/example/Tooltip/invert-variant",
+      "title": "invert variant",
+      "path": "/docs/components/Tooltip/invert-variant",
       "components": [
         {
           "component": "Chart",
@@ -440,7 +452,8 @@
     },
     {
       "name": "multiple-overlapping-bars",
-      "path": "/example/Tooltip/multiple-overlapping-bars",
+      "title": "multiple overlapping bars",
+      "path": "/docs/components/Tooltip/multiple-overlapping-bars",
       "components": [
         {
           "component": "Chart",
@@ -476,7 +489,8 @@
     },
     {
       "name": "multiple-overlapping-durations",
-      "path": "/example/Tooltip/multiple-overlapping-durations",
+      "title": "multiple overlapping durations",
+      "path": "/docs/components/Tooltip/multiple-overlapping-durations",
       "components": [
         {
           "component": "Chart",
@@ -517,7 +531,8 @@
     },
     {
       "name": "multiple-tooltips-with-fixed-single-axis",
-      "path": "/example/Tooltip/multiple-tooltips-with-fixed-single-axis",
+      "title": "multiple tooltips with fixed single axis",
+      "path": "/docs/components/Tooltip/multiple-tooltips-with-fixed-single-axis",
       "components": [
         {
           "component": "Chart",
@@ -553,7 +568,8 @@
     },
     {
       "name": "multiple-tooltips-with-fixed-single-axis-scaleband",
-      "path": "/example/Tooltip/multiple-tooltips-with-fixed-single-axis-scaleband",
+      "title": "multiple tooltips with fixed single axis scaleband",
+      "path": "/docs/components/Tooltip/multiple-tooltips-with-fixed-single-axis-scaleband",
       "components": [
         {
           "component": "Chart",
@@ -589,7 +605,8 @@
     },
     {
       "name": "scatter-plot",
-      "path": "/example/Tooltip/scatter-plot",
+      "title": "scatter plot",
+      "path": "/docs/components/Tooltip/scatter-plot",
       "components": [
         {
           "component": "Chart",
@@ -625,7 +642,8 @@
     },
     {
       "name": "simple-bars",
-      "path": "/example/Tooltip/simple-bars",
+      "title": "simple bars",
+      "path": "/docs/components/Tooltip/simple-bars",
       "components": [
         {
           "component": "Chart",
@@ -661,7 +679,8 @@
     },
     {
       "name": "single-date-time",
-      "path": "/example/Tooltip/single-date-time",
+      "title": "single date time",
+      "path": "/docs/components/Tooltip/single-date-time",
       "components": [
         {
           "component": "Chart",
@@ -697,7 +716,8 @@
     },
     {
       "name": "stacked-area",
-      "path": "/example/Tooltip/stacked-area",
+      "title": "stacked area",
+      "path": "/docs/components/Tooltip/stacked-area",
       "components": [
         {
           "component": "Chart",
@@ -736,5148 +756,5148 @@
     {
       "example": "line-to-point",
       "component": "AnnotationPoint",
-      "path": "/example/AnnotationPoint/line-to-point",
+      "path": "/docs/components/AnnotationPoint/line-to-point",
       "lineNumber": 80,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "line-to-point",
       "component": "AnnotationPoint",
-      "path": "/example/AnnotationPoint/line-to-point",
+      "path": "/docs/components/AnnotationPoint/line-to-point",
       "lineNumber": 89,
       "line": "<Tooltip.Header>{format(context.x(data), 'daytime')}</Tooltip.Header>"
     },
     {
       "example": "line-to-point",
       "component": "AnnotationPoint",
-      "path": "/example/AnnotationPoint/line-to-point",
+      "path": "/docs/components/AnnotationPoint/line-to-point",
       "lineNumber": 90,
       "line": "<Tooltip.List>"
     },
     {
       "example": "line-to-point",
       "component": "AnnotationPoint",
-      "path": "/example/AnnotationPoint/line-to-point",
+      "path": "/docs/components/AnnotationPoint/line-to-point",
       "lineNumber": 91,
       "line": "<Tooltip.Item label=\"value\" value={context.y(data)} />"
     },
     {
       "example": "on-axis-with-tooltip",
       "component": "AnnotationPoint",
-      "path": "/example/AnnotationPoint/on-axis-with-tooltip",
+      "path": "/docs/components/AnnotationPoint/on-axis-with-tooltip",
       "lineNumber": 45,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "on-axis-with-tooltip",
       "component": "AnnotationPoint",
-      "path": "/example/AnnotationPoint/on-axis-with-tooltip",
+      "path": "/docs/components/AnnotationPoint/on-axis-with-tooltip",
       "lineNumber": 54,
       "line": "<Tooltip.Header>{format(context.x(data), 'daytime')}</Tooltip.Header>"
     },
     {
       "example": "on-axis-with-tooltip",
       "component": "AnnotationPoint",
-      "path": "/example/AnnotationPoint/on-axis-with-tooltip",
+      "path": "/docs/components/AnnotationPoint/on-axis-with-tooltip",
       "lineNumber": 55,
       "line": "<Tooltip.List>"
     },
     {
       "example": "on-axis-with-tooltip",
       "component": "AnnotationPoint",
-      "path": "/example/AnnotationPoint/on-axis-with-tooltip",
+      "path": "/docs/components/AnnotationPoint/on-axis-with-tooltip",
       "lineNumber": 56,
       "line": "<Tooltip.Item label=\"value\" value={context.y(data)} />"
     },
     {
       "example": "on-series-with-line-and-tooltip",
       "component": "AnnotationPoint",
-      "path": "/example/AnnotationPoint/on-series-with-line-and-tooltip",
+      "path": "/docs/components/AnnotationPoint/on-series-with-line-and-tooltip",
       "lineNumber": 54,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "on-series-with-line-and-tooltip",
       "component": "AnnotationPoint",
-      "path": "/example/AnnotationPoint/on-series-with-line-and-tooltip",
+      "path": "/docs/components/AnnotationPoint/on-series-with-line-and-tooltip",
       "lineNumber": 63,
       "line": "<Tooltip.Header>{format(context.x(data), 'daytime')}</Tooltip.Header>"
     },
     {
       "example": "on-series-with-line-and-tooltip",
       "component": "AnnotationPoint",
-      "path": "/example/AnnotationPoint/on-series-with-line-and-tooltip",
+      "path": "/docs/components/AnnotationPoint/on-series-with-line-and-tooltip",
       "lineNumber": 64,
       "line": "<Tooltip.List>"
     },
     {
       "example": "on-series-with-line-and-tooltip",
       "component": "AnnotationPoint",
-      "path": "/example/AnnotationPoint/on-series-with-line-and-tooltip",
+      "path": "/docs/components/AnnotationPoint/on-series-with-line-and-tooltip",
       "lineNumber": 65,
       "line": "<Tooltip.Item label=\"value\" value={context.y(data)} />"
     },
     {
       "example": "on-series-with-tooltip",
       "component": "AnnotationPoint",
-      "path": "/example/AnnotationPoint/on-series-with-tooltip",
+      "path": "/docs/components/AnnotationPoint/on-series-with-tooltip",
       "lineNumber": 45,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "on-series-with-tooltip",
       "component": "AnnotationPoint",
-      "path": "/example/AnnotationPoint/on-series-with-tooltip",
+      "path": "/docs/components/AnnotationPoint/on-series-with-tooltip",
       "lineNumber": 54,
       "line": "<Tooltip.Header>{format(context.x(data), 'daytime')}</Tooltip.Header>"
     },
     {
       "example": "on-series-with-tooltip",
       "component": "AnnotationPoint",
-      "path": "/example/AnnotationPoint/on-series-with-tooltip",
+      "path": "/docs/components/AnnotationPoint/on-series-with-tooltip",
       "lineNumber": 55,
       "line": "<Tooltip.List>"
     },
     {
       "example": "on-series-with-tooltip",
       "component": "AnnotationPoint",
-      "path": "/example/AnnotationPoint/on-series-with-tooltip",
+      "path": "/docs/components/AnnotationPoint/on-series-with-tooltip",
       "lineNumber": 56,
       "line": "<Tooltip.Item label=\"value\" value={context.y(data)} />"
     },
     {
       "example": "color-wheel",
       "component": "Arc",
-      "path": "/example/Arc/color-wheel",
+      "path": "/docs/components/Arc/color-wheel",
       "lineNumber": 55,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "clipped-area-on-tooltip",
       "component": "Area",
-      "path": "/example/Area/clipped-area-on-tooltip",
+      "path": "/docs/components/Area/clipped-area-on-tooltip",
       "lineNumber": 50,
       "line": "<Tooltip.Root"
     },
     {
       "example": "clipped-area-on-tooltip",
       "component": "Area",
-      "path": "/example/Area/clipped-area-on-tooltip",
+      "path": "/docs/components/Area/clipped-area-on-tooltip",
       "lineNumber": 61,
       "line": "<Tooltip.Root x={4} y={4} variant=\"none\" class=\"text-sm font-semibold leading-3\">"
     },
     {
       "example": "clipped-area-on-tooltip",
       "component": "Area",
-      "path": "/example/Area/clipped-area-on-tooltip",
+      "path": "/docs/components/Area/clipped-area-on-tooltip",
       "lineNumber": 67,
       "line": "<Tooltip.Root"
     },
     {
       "example": "highlight-color-based-on-value-using-color-scale",
       "component": "Area",
-      "path": "/example/Area/highlight-color-based-on-value-using-color-scale",
+      "path": "/docs/components/Area/highlight-color-based-on-value-using-color-scale",
       "lineNumber": 46,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "highlight-color-based-on-value-using-color-scale",
       "component": "Area",
-      "path": "/example/Area/highlight-color-based-on-value-using-color-scale",
+      "path": "/docs/components/Area/highlight-color-based-on-value-using-color-scale",
       "lineNumber": 48,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "highlight-color-based-on-value-using-color-scale",
       "component": "Area",
-      "path": "/example/Area/highlight-color-based-on-value-using-color-scale",
+      "path": "/docs/components/Area/highlight-color-based-on-value-using-color-scale",
       "lineNumber": 49,
       "line": "<Tooltip.List>"
     },
     {
       "example": "highlight-color-based-on-value-using-color-scale",
       "component": "Area",
-      "path": "/example/Area/highlight-color-based-on-value-using-color-scale",
+      "path": "/docs/components/Area/highlight-color-based-on-value-using-color-scale",
       "lineNumber": 50,
       "line": "<Tooltip.Item label=\"value\" value={data.value} />"
     },
     {
       "example": "highlight-color-based-on-value-using-tooltip-slot-prop",
       "component": "Area",
-      "path": "/example/Area/highlight-color-based-on-value-using-tooltip-slot-prop",
+      "path": "/docs/components/Area/highlight-color-based-on-value-using-tooltip-slot-prop",
       "lineNumber": 50,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "highlight-color-based-on-value-using-tooltip-slot-prop",
       "component": "Area",
-      "path": "/example/Area/highlight-color-based-on-value-using-tooltip-slot-prop",
+      "path": "/docs/components/Area/highlight-color-based-on-value-using-tooltip-slot-prop",
       "lineNumber": 52,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "highlight-color-based-on-value-using-tooltip-slot-prop",
       "component": "Area",
-      "path": "/example/Area/highlight-color-based-on-value-using-tooltip-slot-prop",
+      "path": "/docs/components/Area/highlight-color-based-on-value-using-tooltip-slot-prop",
       "lineNumber": 53,
       "line": "<Tooltip.List>"
     },
     {
       "example": "highlight-color-based-on-value-using-tooltip-slot-prop",
       "component": "Area",
-      "path": "/example/Area/highlight-color-based-on-value-using-tooltip-slot-prop",
+      "path": "/docs/components/Area/highlight-color-based-on-value-using-tooltip-slot-prop",
       "lineNumber": 54,
       "line": "<Tooltip.Item label=\"value\" value={data.value} />"
     },
     {
       "example": "multiple-series",
       "component": "Area",
-      "path": "/example/Area/multiple-series",
+      "path": "/docs/components/Area/multiple-series",
       "lineNumber": 78,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "multiple-series",
       "component": "Area",
-      "path": "/example/Area/multiple-series",
+      "path": "/docs/components/Area/multiple-series",
       "lineNumber": 80,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "multiple-series",
       "component": "Area",
-      "path": "/example/Area/multiple-series",
+      "path": "/docs/components/Area/multiple-series",
       "lineNumber": 81,
       "line": "<Tooltip.List>"
     },
     {
       "example": "multiple-series",
       "component": "Area",
-      "path": "/example/Area/multiple-series",
+      "path": "/docs/components/Area/multiple-series",
       "lineNumber": 82,
       "line": "<Tooltip.Item label={data.fruit} value={data.value} />"
     },
     {
       "example": "multiple-series-highlight-on-hover",
       "component": "Area",
-      "path": "/example/Area/multiple-series-highlight-on-hover",
+      "path": "/docs/components/Area/multiple-series-highlight-on-hover",
       "lineNumber": 82,
       "line": "<Tooltip.Root {context}>"
     },
     {
       "example": "multiple-series-highlight-on-hover",
       "component": "Area",
-      "path": "/example/Area/multiple-series-highlight-on-hover",
+      "path": "/docs/components/Area/multiple-series-highlight-on-hover",
       "lineNumber": 84,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "multiple-series-highlight-on-hover",
       "component": "Area",
-      "path": "/example/Area/multiple-series-highlight-on-hover",
+      "path": "/docs/components/Area/multiple-series-highlight-on-hover",
       "lineNumber": 85,
       "line": "<Tooltip.List>"
     },
     {
       "example": "multiple-series-highlight-on-hover",
       "component": "Area",
-      "path": "/example/Area/multiple-series-highlight-on-hover",
+      "path": "/docs/components/Area/multiple-series-highlight-on-hover",
       "lineNumber": 86,
       "line": "<Tooltip.Item label={data.fruit} value={data.value} />"
     },
     {
       "example": "multiple-series-using-overrides",
       "component": "Area",
-      "path": "/example/Area/multiple-series-using-overrides",
+      "path": "/docs/components/Area/multiple-series-using-overrides",
       "lineNumber": 67,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "multiple-series-using-overrides",
       "component": "Area",
-      "path": "/example/Area/multiple-series-using-overrides",
+      "path": "/docs/components/Area/multiple-series-using-overrides",
       "lineNumber": 69,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "multiple-series-using-overrides",
       "component": "Area",
-      "path": "/example/Area/multiple-series-using-overrides",
+      "path": "/docs/components/Area/multiple-series-using-overrides",
       "lineNumber": 70,
       "line": "<Tooltip.List>"
     },
     {
       "example": "multiple-series-using-overrides",
       "component": "Area",
-      "path": "/example/Area/multiple-series-using-overrides",
+      "path": "/docs/components/Area/multiple-series-using-overrides",
       "lineNumber": 71,
       "line": "<Tooltip.Item label=\"apples\" value={data.apples} />"
     },
     {
       "example": "multiple-series-using-overrides",
       "component": "Area",
-      "path": "/example/Area/multiple-series-using-overrides",
+      "path": "/docs/components/Area/multiple-series-using-overrides",
       "lineNumber": 72,
       "line": "<Tooltip.Item label=\"bananas\" value={data.bananas} />"
     },
     {
       "example": "multiple-series-using-overrides",
       "component": "Area",
-      "path": "/example/Area/multiple-series-using-overrides",
+      "path": "/docs/components/Area/multiple-series-using-overrides",
       "lineNumber": 73,
       "line": "<Tooltip.Item label=\"oranges\" value={data.oranges} />"
     },
     {
       "example": "multiple-series-with-labels",
       "component": "Area",
-      "path": "/example/Area/multiple-series-with-labels",
+      "path": "/docs/components/Area/multiple-series-with-labels",
       "lineNumber": 52,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "multiple-series-with-labels",
       "component": "Area",
-      "path": "/example/Area/multiple-series-with-labels",
+      "path": "/docs/components/Area/multiple-series-with-labels",
       "lineNumber": 54,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "multiple-series-with-labels",
       "component": "Area",
-      "path": "/example/Area/multiple-series-with-labels",
+      "path": "/docs/components/Area/multiple-series-with-labels",
       "lineNumber": 55,
       "line": "<Tooltip.List>"
     },
     {
       "example": "multiple-series-with-labels",
       "component": "Area",
-      "path": "/example/Area/multiple-series-with-labels",
+      "path": "/docs/components/Area/multiple-series-with-labels",
       "lineNumber": 56,
       "line": "<Tooltip.Item label={data.fruit} value={data.value} />"
     },
     {
       "example": "stack",
       "component": "Area",
-      "path": "/example/Area/stack",
+      "path": "/docs/components/Area/stack",
       "lineNumber": 74,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "stack",
       "component": "Area",
-      "path": "/example/Area/stack",
+      "path": "/docs/components/Area/stack",
       "lineNumber": 76,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "stack",
       "component": "Area",
-      "path": "/example/Area/stack",
+      "path": "/docs/components/Area/stack",
       "lineNumber": 77,
       "line": "<Tooltip.List>"
     },
     {
       "example": "stack",
       "component": "Area",
-      "path": "/example/Area/stack",
+      "path": "/docs/components/Area/stack",
       "lineNumber": 79,
       "line": "<Tooltip.Item label={key} value={data.data[key]} color={context.cScale?.(key)} />"
     },
     {
       "example": "with-tooltip-and-highlight",
       "component": "Area",
-      "path": "/example/Area/with-tooltip-and-highlight",
+      "path": "/docs/components/Area/with-tooltip-and-highlight",
       "lineNumber": 26,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "with-tooltip-and-highlight",
       "component": "Area",
-      "path": "/example/Area/with-tooltip-and-highlight",
+      "path": "/docs/components/Area/with-tooltip-and-highlight",
       "lineNumber": 28,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "with-tooltip-and-highlight",
       "component": "Area",
-      "path": "/example/Area/with-tooltip-and-highlight",
+      "path": "/docs/components/Area/with-tooltip-and-highlight",
       "lineNumber": 29,
       "line": "<Tooltip.List>"
     },
     {
       "example": "with-tooltip-and-highlight",
       "component": "Area",
-      "path": "/example/Area/with-tooltip-and-highlight",
+      "path": "/docs/components/Area/with-tooltip-and-highlight",
       "lineNumber": 30,
       "line": "<Tooltip.Item label=\"value\" value={data.value} />"
     },
     {
       "example": "custom",
       "component": "AreaChart",
-      "path": "/example/AreaChart/custom",
+      "path": "/docs/components/AreaChart/custom",
       "lineNumber": 27,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "custom",
       "component": "AreaChart",
-      "path": "/example/AreaChart/custom",
+      "path": "/docs/components/AreaChart/custom",
       "lineNumber": 29,
       "line": "<Tooltip.Header>{format(context.x(data), 'day')}</Tooltip.Header>"
     },
     {
       "example": "custom",
       "component": "AreaChart",
-      "path": "/example/AreaChart/custom",
+      "path": "/docs/components/AreaChart/custom",
       "lineNumber": 30,
       "line": "<Tooltip.List>"
     },
     {
       "example": "custom",
       "component": "AreaChart",
-      "path": "/example/AreaChart/custom",
+      "path": "/docs/components/AreaChart/custom",
       "lineNumber": 31,
       "line": "<Tooltip.Item label=\"value\" value={context.y(data)} />"
     },
     {
       "example": "custom-tooltip",
       "component": "AreaChart",
-      "path": "/example/AreaChart/custom-tooltip",
+      "path": "/docs/components/AreaChart/custom-tooltip",
       "lineNumber": 12,
       "line": "<Tooltip.Root"
     },
     {
       "example": "custom-tooltip",
       "component": "AreaChart",
-      "path": "/example/AreaChart/custom-tooltip",
+      "path": "/docs/components/AreaChart/custom-tooltip",
       "lineNumber": 25,
       "line": "<Tooltip.Root"
     },
     {
       "example": "point-annotations",
       "component": "AreaChart",
-      "path": "/example/AreaChart/point-annotations",
+      "path": "/docs/components/AreaChart/point-annotations",
       "lineNumber": 44,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "point-annotations",
       "component": "AreaChart",
-      "path": "/example/AreaChart/point-annotations",
+      "path": "/docs/components/AreaChart/point-annotations",
       "lineNumber": 53,
       "line": "<Tooltip.Header>{format(context.x(data), 'day')}</Tooltip.Header>"
     },
     {
       "example": "point-annotations",
       "component": "AreaChart",
-      "path": "/example/AreaChart/point-annotations",
+      "path": "/docs/components/AreaChart/point-annotations",
       "lineNumber": 54,
       "line": "<Tooltip.List>"
     },
     {
       "example": "point-annotations",
       "component": "AreaChart",
-      "path": "/example/AreaChart/point-annotations",
+      "path": "/docs/components/AreaChart/point-annotations",
       "lineNumber": 55,
       "line": "<Tooltip.Item label=\"value\" value={context.y(data)} />"
     },
     {
       "example": "series-individual-tooltip",
       "component": "AreaChart",
-      "path": "/example/AreaChart/series-individual-tooltip",
+      "path": "/docs/components/AreaChart/series-individual-tooltip",
       "lineNumber": 71,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "series-individual-tooltip",
       "component": "AreaChart",
-      "path": "/example/AreaChart/series-individual-tooltip",
+      "path": "/docs/components/AreaChart/series-individual-tooltip",
       "lineNumber": 73,
       "line": "<Tooltip.Header>{format(context.x(data))}</Tooltip.Header>"
     },
     {
       "example": "series-individual-tooltip",
       "component": "AreaChart",
-      "path": "/example/AreaChart/series-individual-tooltip",
+      "path": "/docs/components/AreaChart/series-individual-tooltip",
       "lineNumber": 74,
       "line": "<Tooltip.List>"
     },
     {
       "example": "series-individual-tooltip",
       "component": "AreaChart",
-      "path": "/example/AreaChart/series-individual-tooltip",
+      "path": "/docs/components/AreaChart/series-individual-tooltip",
       "lineNumber": 75,
       "line": "<Tooltip.Item label={data?.fruit} value={data?.value} color={activeSeries?.color} />"
     },
     {
       "example": "threshold",
       "component": "AreaChart",
-      "path": "/example/AreaChart/threshold",
+      "path": "/docs/components/AreaChart/threshold",
       "lineNumber": 51,
       "line": "<Tooltip.Root {context}>"
     },
     {
       "example": "threshold",
       "component": "AreaChart",
-      "path": "/example/AreaChart/threshold",
+      "path": "/docs/components/AreaChart/threshold",
       "lineNumber": 53,
       "line": "<Tooltip.Header>{format(data.date)}</Tooltip.Header>"
     },
     {
       "example": "threshold",
       "component": "AreaChart",
-      "path": "/example/AreaChart/threshold",
+      "path": "/docs/components/AreaChart/threshold",
       "lineNumber": 54,
       "line": "<Tooltip.List>"
     },
     {
       "example": "threshold",
       "component": "AreaChart",
-      "path": "/example/AreaChart/threshold",
+      "path": "/docs/components/AreaChart/threshold",
       "lineNumber": 55,
       "line": "<Tooltip.Item label=\"value\" value={data.value} />"
     },
     {
       "example": "threshold",
       "component": "AreaChart",
-      "path": "/example/AreaChart/threshold",
+      "path": "/docs/components/AreaChart/threshold",
       "lineNumber": 56,
       "line": "<Tooltip.Item label=\"baseline\" value={data.baseline} />"
     },
     {
       "example": "threshold",
       "component": "AreaChart",
-      "path": "/example/AreaChart/threshold",
+      "path": "/docs/components/AreaChart/threshold",
       "lineNumber": 57,
       "line": "<Tooltip.Separator />"
     },
     {
       "example": "threshold",
       "component": "AreaChart",
-      "path": "/example/AreaChart/threshold",
+      "path": "/docs/components/AreaChart/threshold",
       "lineNumber": 58,
       "line": "<Tooltip.Item label=\"variance\" value={data.value - data.baseline} />"
     },
     {
       "example": "threshold-gradient",
       "component": "AreaChart",
-      "path": "/example/AreaChart/threshold-gradient",
+      "path": "/docs/components/AreaChart/threshold-gradient",
       "lineNumber": 52,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "threshold-gradient",
       "component": "AreaChart",
-      "path": "/example/AreaChart/threshold-gradient",
+      "path": "/docs/components/AreaChart/threshold-gradient",
       "lineNumber": 55,
       "line": "<Tooltip.Header>{format(context.x(data), 'day')}</Tooltip.Header>"
     },
     {
       "example": "threshold-gradient",
       "component": "AreaChart",
-      "path": "/example/AreaChart/threshold-gradient",
+      "path": "/docs/components/AreaChart/threshold-gradient",
       "lineNumber": 56,
       "line": "<Tooltip.List>"
     },
     {
       "example": "threshold-gradient",
       "component": "AreaChart",
-      "path": "/example/AreaChart/threshold-gradient",
+      "path": "/docs/components/AreaChart/threshold-gradient",
       "lineNumber": 57,
       "line": "<Tooltip.Item"
     },
     {
       "example": "tooltip-fixed-with-hide-delay",
       "component": "AreaChart",
-      "path": "/example/AreaChart/tooltip-fixed-with-hide-delay",
+      "path": "/docs/components/AreaChart/tooltip-fixed-with-hide-delay",
       "lineNumber": 29,
       "line": "<Tooltip.Root x=\"data\" y={context.height + 24} pointerEvents>"
     },
     {
       "example": "tooltip-fixed-with-hide-delay",
       "component": "AreaChart",
-      "path": "/example/AreaChart/tooltip-fixed-with-hide-delay",
+      "path": "/docs/components/AreaChart/tooltip-fixed-with-hide-delay",
       "lineNumber": 31,
       "line": "<Tooltip.Header>"
     },
     {
       "example": "tooltip-fixed-with-hide-delay",
       "component": "AreaChart",
-      "path": "/example/AreaChart/tooltip-fixed-with-hide-delay",
+      "path": "/docs/components/AreaChart/tooltip-fixed-with-hide-delay",
       "lineNumber": 35,
       "line": "<Tooltip.List>"
     },
     {
       "example": "tooltip-fixed-with-hide-delay",
       "component": "AreaChart",
-      "path": "/example/AreaChart/tooltip-fixed-with-hide-delay",
+      "path": "/docs/components/AreaChart/tooltip-fixed-with-hide-delay",
       "lineNumber": 39,
       "line": "<Tooltip.Item"
     },
     {
       "example": "tooltip-locking",
       "component": "AreaChart",
-      "path": "/example/AreaChart/tooltip-locking",
+      "path": "/docs/components/AreaChart/tooltip-locking",
       "lineNumber": 38,
       "line": "<Tooltip.Root pointerEvents>"
     },
     {
       "example": "tooltip-locking",
       "component": "AreaChart",
-      "path": "/example/AreaChart/tooltip-locking",
+      "path": "/docs/components/AreaChart/tooltip-locking",
       "lineNumber": 40,
       "line": "<Tooltip.Header>"
     },
     {
       "example": "tooltip-locking",
       "component": "AreaChart",
-      "path": "/example/AreaChart/tooltip-locking",
+      "path": "/docs/components/AreaChart/tooltip-locking",
       "lineNumber": 44,
       "line": "<Tooltip.List>"
     },
     {
       "example": "tooltip-locking",
       "component": "AreaChart",
-      "path": "/example/AreaChart/tooltip-locking",
+      "path": "/docs/components/AreaChart/tooltip-locking",
       "lineNumber": 48,
       "line": "<Tooltip.Item"
     },
     {
       "example": "tooltip-locking",
       "component": "AreaChart",
-      "path": "/example/AreaChart/tooltip-locking",
+      "path": "/docs/components/AreaChart/tooltip-locking",
       "lineNumber": 72,
       "line": "<Tooltip.Separator />"
     },
     {
       "example": "custom-chart",
       "component": "BarChart",
-      "path": "/example/BarChart/custom-chart",
+      "path": "/docs/components/BarChart/custom-chart",
       "lineNumber": 25,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "custom-chart",
       "component": "BarChart",
-      "path": "/example/BarChart/custom-chart",
+      "path": "/docs/components/BarChart/custom-chart",
       "lineNumber": 27,
       "line": "<Tooltip.Header>{format(context.x(data))}</Tooltip.Header>"
     },
     {
       "example": "custom-chart",
       "component": "BarChart",
-      "path": "/example/BarChart/custom-chart",
+      "path": "/docs/components/BarChart/custom-chart",
       "lineNumber": 28,
       "line": "<Tooltip.List>"
     },
     {
       "example": "custom-chart",
       "component": "BarChart",
-      "path": "/example/BarChart/custom-chart",
+      "path": "/docs/components/BarChart/custom-chart",
       "lineNumber": 29,
       "line": "<Tooltip.Item label=\"value\" value={context.y(data)} />"
     },
     {
       "example": "custom-tooltip",
       "component": "BarChart",
-      "path": "/example/BarChart/custom-tooltip",
+      "path": "/docs/components/BarChart/custom-tooltip",
       "lineNumber": 18,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "custom-tooltip",
       "component": "BarChart",
-      "path": "/example/BarChart/custom-tooltip",
+      "path": "/docs/components/BarChart/custom-tooltip",
       "lineNumber": 20,
       "line": "<Tooltip.Header>{format(context.x(data), 'daytime')}</Tooltip.Header>"
     },
     {
       "example": "custom-tooltip",
       "component": "BarChart",
-      "path": "/example/BarChart/custom-tooltip",
+      "path": "/docs/components/BarChart/custom-tooltip",
       "lineNumber": 21,
       "line": "<Tooltip.List>"
     },
     {
       "example": "custom-tooltip",
       "component": "BarChart",
-      "path": "/example/BarChart/custom-tooltip",
+      "path": "/docs/components/BarChart/custom-tooltip",
       "lineNumber": 22,
       "line": "<Tooltip.Item label=\"value\" value={context.y(data)} />"
     },
     {
       "example": "duration",
       "component": "BarChart",
-      "path": "/example/BarChart/duration",
+      "path": "/docs/components/BarChart/duration",
       "lineNumber": 85,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "duration",
       "component": "BarChart",
-      "path": "/example/BarChart/duration",
+      "path": "/docs/components/BarChart/duration",
       "lineNumber": 87,
       "line": "<Tooltip.Header>{format(context.y(data))}</Tooltip.Header>"
     },
     {
       "example": "duration",
       "component": "BarChart",
-      "path": "/example/BarChart/duration",
+      "path": "/docs/components/BarChart/duration",
       "lineNumber": 88,
       "line": "<Tooltip.List>"
     },
     {
       "example": "duration",
       "component": "BarChart",
-      "path": "/example/BarChart/duration",
+      "path": "/docs/components/BarChart/duration",
       "lineNumber": 89,
       "line": "<Tooltip.Item label=\"Start\" value={data.start} format=\"day\" />"
     },
     {
       "example": "duration",
       "component": "BarChart",
-      "path": "/example/BarChart/duration",
+      "path": "/docs/components/BarChart/duration",
       "lineNumber": 90,
       "line": "<Tooltip.Item label=\"End\" value={data.end} format=\"day\" />"
     },
     {
       "example": "duration-bars",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-bars",
+      "path": "/docs/components/BarChart/duration-bars",
       "lineNumber": 36,
       "line": "<Tooltip.Root {context}>"
     },
     {
       "example": "duration-bars",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-bars",
+      "path": "/docs/components/BarChart/duration-bars",
       "lineNumber": 38,
       "line": "<Tooltip.Header>{data.name}</Tooltip.Header>"
     },
     {
       "example": "duration-bars",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-bars",
+      "path": "/docs/components/BarChart/duration-bars",
       "lineNumber": 39,
       "line": "<Tooltip.List>"
     },
     {
       "example": "duration-bars",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-bars",
+      "path": "/docs/components/BarChart/duration-bars",
       "lineNumber": 40,
       "line": "<Tooltip.Item"
     },
     {
       "example": "duration-bars",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-bars",
+      "path": "/docs/components/BarChart/duration-bars",
       "lineNumber": 45,
       "line": "<Tooltip.Item"
     },
     {
       "example": "duration-bars",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-bars",
+      "path": "/docs/components/BarChart/duration-bars",
       "lineNumber": 50,
       "line": "<Tooltip.Separator />"
     },
     {
       "example": "duration-bars",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-bars",
+      "path": "/docs/components/BarChart/duration-bars",
       "lineNumber": 51,
       "line": "<Tooltip.Item label=\"duration\" valueAlign=\"right\">"
     },
     {
       "example": "duration-bars-color",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-bars-color",
+      "path": "/docs/components/BarChart/duration-bars-color",
       "lineNumber": 43,
       "line": "<Tooltip.Root {context}>"
     },
     {
       "example": "duration-bars-color",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-bars-color",
+      "path": "/docs/components/BarChart/duration-bars-color",
       "lineNumber": 45,
       "line": "<Tooltip.Header>{data.name}</Tooltip.Header>"
     },
     {
       "example": "duration-bars-color",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-bars-color",
+      "path": "/docs/components/BarChart/duration-bars-color",
       "lineNumber": 46,
       "line": "<Tooltip.List>"
     },
     {
       "example": "duration-bars-color",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-bars-color",
+      "path": "/docs/components/BarChart/duration-bars-color",
       "lineNumber": 47,
       "line": "<Tooltip.Item"
     },
     {
       "example": "duration-bars-color",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-bars-color",
+      "path": "/docs/components/BarChart/duration-bars-color",
       "lineNumber": 52,
       "line": "<Tooltip.Item"
     },
     {
       "example": "duration-bars-color",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-bars-color",
+      "path": "/docs/components/BarChart/duration-bars-color",
       "lineNumber": 57,
       "line": "<Tooltip.Separator />"
     },
     {
       "example": "duration-bars-color",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-bars-color",
+      "path": "/docs/components/BarChart/duration-bars-color",
       "lineNumber": 58,
       "line": "<Tooltip.Item label=\"duration\" valueAlign=\"right\">"
     },
     {
       "example": "duration-bars-dense",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-bars-dense",
+      "path": "/docs/components/BarChart/duration-bars-dense",
       "lineNumber": 24,
       "line": "<Tooltip.Root {context}>"
     },
     {
       "example": "duration-bars-dense",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-bars-dense",
+      "path": "/docs/components/BarChart/duration-bars-dense",
       "lineNumber": 26,
       "line": "<Tooltip.Header>{data.event}</Tooltip.Header>"
     },
     {
       "example": "duration-bars-dense",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-bars-dense",
+      "path": "/docs/components/BarChart/duration-bars-dense",
       "lineNumber": 27,
       "line": "<Tooltip.List>"
     },
     {
       "example": "duration-bars-dense",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-bars-dense",
+      "path": "/docs/components/BarChart/duration-bars-dense",
       "lineNumber": 28,
       "line": "<Tooltip.Item label=\"start\" value={data.startDate} valueAlign=\"right\" format=\"day\" />"
     },
     {
       "example": "duration-bars-dense",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-bars-dense",
+      "path": "/docs/components/BarChart/duration-bars-dense",
       "lineNumber": 29,
       "line": "<Tooltip.Item label=\"end\" value={data.endDate} valueAlign=\"right\" format=\"day\" />"
     },
     {
       "example": "duration-bars-dense",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-bars-dense",
+      "path": "/docs/components/BarChart/duration-bars-dense",
       "lineNumber": 30,
       "line": "<Tooltip.Separator />"
     },
     {
       "example": "duration-bars-dense",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-bars-dense",
+      "path": "/docs/components/BarChart/duration-bars-dense",
       "lineNumber": 31,
       "line": "<Tooltip.Item label=\"duration\" valueAlign=\"right\">"
     },
     {
       "example": "duration-bars-dense-lanes",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-bars-dense-lanes",
+      "path": "/docs/components/BarChart/duration-bars-dense-lanes",
       "lineNumber": 27,
       "line": "<Tooltip.Root {context}>"
     },
     {
       "example": "duration-bars-dense-lanes",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-bars-dense-lanes",
+      "path": "/docs/components/BarChart/duration-bars-dense-lanes",
       "lineNumber": 29,
       "line": "<Tooltip.Header>{data.event}</Tooltip.Header>"
     },
     {
       "example": "duration-bars-dense-lanes",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-bars-dense-lanes",
+      "path": "/docs/components/BarChart/duration-bars-dense-lanes",
       "lineNumber": 30,
       "line": "<Tooltip.List>"
     },
     {
       "example": "duration-bars-dense-lanes",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-bars-dense-lanes",
+      "path": "/docs/components/BarChart/duration-bars-dense-lanes",
       "lineNumber": 31,
       "line": "<Tooltip.Item label=\"start\" value={data.startDate} valueAlign=\"right\" format=\"day\" />"
     },
     {
       "example": "duration-bars-dense-lanes",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-bars-dense-lanes",
+      "path": "/docs/components/BarChart/duration-bars-dense-lanes",
       "lineNumber": 32,
       "line": "<Tooltip.Item label=\"end\" value={data.endDate} valueAlign=\"right\" format=\"day\" />"
     },
     {
       "example": "duration-bars-dense-lanes",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-bars-dense-lanes",
+      "path": "/docs/components/BarChart/duration-bars-dense-lanes",
       "lineNumber": 33,
       "line": "<Tooltip.Separator />"
     },
     {
       "example": "duration-bars-dense-lanes",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-bars-dense-lanes",
+      "path": "/docs/components/BarChart/duration-bars-dense-lanes",
       "lineNumber": 34,
       "line": "<Tooltip.Item label=\"duration\" valueAlign=\"right\">"
     },
     {
       "example": "duration-bars-lanes",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-bars-lanes",
+      "path": "/docs/components/BarChart/duration-bars-lanes",
       "lineNumber": 49,
       "line": "<Tooltip.Root {context}>"
     },
     {
       "example": "duration-bars-lanes",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-bars-lanes",
+      "path": "/docs/components/BarChart/duration-bars-lanes",
       "lineNumber": 51,
       "line": "<Tooltip.Header>{data.name}</Tooltip.Header>"
     },
     {
       "example": "duration-bars-lanes",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-bars-lanes",
+      "path": "/docs/components/BarChart/duration-bars-lanes",
       "lineNumber": 52,
       "line": "<Tooltip.List>"
     },
     {
       "example": "duration-bars-lanes",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-bars-lanes",
+      "path": "/docs/components/BarChart/duration-bars-lanes",
       "lineNumber": 53,
       "line": "<Tooltip.Item label=\"start\" value={data.startDate} format=\"day\" />"
     },
     {
       "example": "duration-bars-lanes",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-bars-lanes",
+      "path": "/docs/components/BarChart/duration-bars-lanes",
       "lineNumber": 54,
       "line": "<Tooltip.Item label=\"end\" value={data.endDate} format=\"day\" />"
     },
     {
       "example": "duration-bars-lanes",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-bars-lanes",
+      "path": "/docs/components/BarChart/duration-bars-lanes",
       "lineNumber": 55,
       "line": "<Tooltip.Separator />"
     },
     {
       "example": "duration-bars-lanes",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-bars-lanes",
+      "path": "/docs/components/BarChart/duration-bars-lanes",
       "lineNumber": 56,
       "line": "<Tooltip.Item label=\"duration\" valueAlign=\"right\">"
     },
     {
       "example": "duration-civilization-timeline",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-civilization-timeline",
+      "path": "/docs/components/BarChart/duration-civilization-timeline",
       "lineNumber": 41,
       "line": "<Tooltip.Root {context}>"
     },
     {
       "example": "duration-civilization-timeline",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-civilization-timeline",
+      "path": "/docs/components/BarChart/duration-civilization-timeline",
       "lineNumber": 43,
       "line": "<Tooltip.Header>{data.civilization}</Tooltip.Header>"
     },
     {
       "example": "duration-civilization-timeline",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-civilization-timeline",
+      "path": "/docs/components/BarChart/duration-civilization-timeline",
       "lineNumber": 44,
       "line": "<Tooltip.List>"
     },
     {
       "example": "duration-civilization-timeline",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-civilization-timeline",
+      "path": "/docs/components/BarChart/duration-civilization-timeline",
       "lineNumber": 45,
       "line": "<Tooltip.Item label=\"region\" value={data.region} />"
     },
     {
       "example": "duration-civilization-timeline",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-civilization-timeline",
+      "path": "/docs/components/BarChart/duration-civilization-timeline",
       "lineNumber": 46,
       "line": "<Tooltip.Item label=\"timeline\" value={data.timeline} />"
     },
     {
       "example": "duration-civilization-timeline",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-civilization-timeline",
+      "path": "/docs/components/BarChart/duration-civilization-timeline",
       "lineNumber": 47,
       "line": "<!-- <Tooltip.Item label=\"start label\" value={data.startLabel} />"
     },
     {
       "example": "duration-civilization-timeline",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-civilization-timeline",
+      "path": "/docs/components/BarChart/duration-civilization-timeline",
       "lineNumber": 48,
       "line": "<Tooltip.Item label=\"end label\" value={data.endLabel} /> -->"
     },
     {
       "example": "duration-civilization-timeline",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-civilization-timeline",
+      "path": "/docs/components/BarChart/duration-civilization-timeline",
       "lineNumber": 49,
       "line": "<Tooltip.Item label=\"start\" value={data.start} format={formatYear} />"
     },
     {
       "example": "duration-civilization-timeline",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-civilization-timeline",
+      "path": "/docs/components/BarChart/duration-civilization-timeline",
       "lineNumber": 50,
       "line": "<Tooltip.Item label=\"end\" value={data.end} format={formatYear} />"
     },
     {
       "example": "duration-civilization-timeline-dense",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-civilization-timeline-dense",
+      "path": "/docs/components/BarChart/duration-civilization-timeline-dense",
       "lineNumber": 46,
       "line": "<Tooltip.Root {context}>"
     },
     {
       "example": "duration-civilization-timeline-dense",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-civilization-timeline-dense",
+      "path": "/docs/components/BarChart/duration-civilization-timeline-dense",
       "lineNumber": 48,
       "line": "<Tooltip.Header>{data.civilization}</Tooltip.Header>"
     },
     {
       "example": "duration-civilization-timeline-dense",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-civilization-timeline-dense",
+      "path": "/docs/components/BarChart/duration-civilization-timeline-dense",
       "lineNumber": 49,
       "line": "<Tooltip.List>"
     },
     {
       "example": "duration-civilization-timeline-dense",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-civilization-timeline-dense",
+      "path": "/docs/components/BarChart/duration-civilization-timeline-dense",
       "lineNumber": 50,
       "line": "<Tooltip.Item label=\"region\" value={data.region} />"
     },
     {
       "example": "duration-civilization-timeline-dense",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-civilization-timeline-dense",
+      "path": "/docs/components/BarChart/duration-civilization-timeline-dense",
       "lineNumber": 51,
       "line": "<Tooltip.Item label=\"timeline\" value={data.timeline} />"
     },
     {
       "example": "duration-civilization-timeline-dense",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-civilization-timeline-dense",
+      "path": "/docs/components/BarChart/duration-civilization-timeline-dense",
       "lineNumber": 52,
       "line": "<!-- <Tooltip.Item label=\"start label\" value={data.startLabel} />"
     },
     {
       "example": "duration-civilization-timeline-dense",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-civilization-timeline-dense",
+      "path": "/docs/components/BarChart/duration-civilization-timeline-dense",
       "lineNumber": 53,
       "line": "<Tooltip.Item label=\"end label\" value={data.endLabel} /> -->"
     },
     {
       "example": "duration-civilization-timeline-dense",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-civilization-timeline-dense",
+      "path": "/docs/components/BarChart/duration-civilization-timeline-dense",
       "lineNumber": 54,
       "line": "<Tooltip.Item label=\"start\" value={data.start} format={formatYear} />"
     },
     {
       "example": "duration-civilization-timeline-dense",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-civilization-timeline-dense",
+      "path": "/docs/components/BarChart/duration-civilization-timeline-dense",
       "lineNumber": 55,
       "line": "<Tooltip.Item label=\"end\" value={data.end} format={formatYear} />"
     },
     {
       "example": "duration-points",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-points",
+      "path": "/docs/components/BarChart/duration-points",
       "lineNumber": 48,
       "line": "<Tooltip.Root {context}>"
     },
     {
       "example": "duration-points",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-points",
+      "path": "/docs/components/BarChart/duration-points",
       "lineNumber": 50,
       "line": "<Tooltip.Header>{data.name}</Tooltip.Header>"
     },
     {
       "example": "duration-points",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-points",
+      "path": "/docs/components/BarChart/duration-points",
       "lineNumber": 51,
       "line": "<Tooltip.List>"
     },
     {
       "example": "duration-points",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-points",
+      "path": "/docs/components/BarChart/duration-points",
       "lineNumber": 52,
       "line": "<Tooltip.Item"
     },
     {
       "example": "duration-points",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-points",
+      "path": "/docs/components/BarChart/duration-points",
       "lineNumber": 57,
       "line": "<Tooltip.Item"
     },
     {
       "example": "duration-points",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-points",
+      "path": "/docs/components/BarChart/duration-points",
       "lineNumber": 62,
       "line": "<Tooltip.Separator />"
     },
     {
       "example": "duration-points",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-points",
+      "path": "/docs/components/BarChart/duration-points",
       "lineNumber": 63,
       "line": "<Tooltip.Item label=\"duration\" valueAlign=\"right\">"
     },
     {
       "example": "duration-points-color",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-points-color",
+      "path": "/docs/components/BarChart/duration-points-color",
       "lineNumber": 55,
       "line": "<Tooltip.Root {context}>"
     },
     {
       "example": "duration-points-color",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-points-color",
+      "path": "/docs/components/BarChart/duration-points-color",
       "lineNumber": 57,
       "line": "<Tooltip.Header>{data.name}</Tooltip.Header>"
     },
     {
       "example": "duration-points-color",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-points-color",
+      "path": "/docs/components/BarChart/duration-points-color",
       "lineNumber": 58,
       "line": "<Tooltip.List>"
     },
     {
       "example": "duration-points-color",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-points-color",
+      "path": "/docs/components/BarChart/duration-points-color",
       "lineNumber": 59,
       "line": "<Tooltip.Item"
     },
     {
       "example": "duration-points-color",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-points-color",
+      "path": "/docs/components/BarChart/duration-points-color",
       "lineNumber": 64,
       "line": "<Tooltip.Item"
     },
     {
       "example": "duration-points-color",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-points-color",
+      "path": "/docs/components/BarChart/duration-points-color",
       "lineNumber": 69,
       "line": "<Tooltip.Separator />"
     },
     {
       "example": "duration-points-color",
       "component": "BarChart",
-      "path": "/example/BarChart/duration-points-color",
+      "path": "/docs/components/BarChart/duration-points-color",
       "lineNumber": 70,
       "line": "<Tooltip.Item label=\"duration\" valueAlign=\"right\">"
     },
     {
       "example": "histogram-date-time-count",
       "component": "BarChart",
-      "path": "/example/BarChart/histogram-date-time-count",
+      "path": "/docs/components/BarChart/histogram-date-time-count",
       "lineNumber": 49,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "histogram-date-time-count",
       "component": "BarChart",
-      "path": "/example/BarChart/histogram-date-time-count",
+      "path": "/docs/components/BarChart/histogram-date-time-count",
       "lineNumber": 51,
       "line": "<Tooltip.Header class=\"text-center\">"
     },
     {
       "example": "histogram-date-time-count",
       "component": "BarChart",
-      "path": "/example/BarChart/histogram-date-time-count",
+      "path": "/docs/components/BarChart/histogram-date-time-count",
       "lineNumber": 54,
       "line": "<Tooltip.List>"
     },
     {
       "example": "histogram-date-time-count",
       "component": "BarChart",
-      "path": "/example/BarChart/histogram-date-time-count",
+      "path": "/docs/components/BarChart/histogram-date-time-count",
       "lineNumber": 55,
       "line": "<Tooltip.Item label=\"count\" value={data.length} format=\"integer\" />"
     },
     {
       "example": "histogram-date-time-count",
       "component": "BarChart",
-      "path": "/example/BarChart/histogram-date-time-count",
+      "path": "/docs/components/BarChart/histogram-date-time-count",
       "lineNumber": 56,
       "line": "<Tooltip.Separator />"
     },
     {
       "example": "histogram-date-time-count",
       "component": "BarChart",
-      "path": "/example/BarChart/histogram-date-time-count",
+      "path": "/docs/components/BarChart/histogram-date-time-count",
       "lineNumber": 58,
       "line": "<Tooltip.Item label=\"value\" value={d} format={'daytime'} />"
     },
     {
       "example": "histogram-date-time-interval",
       "component": "BarChart",
-      "path": "/example/BarChart/histogram-date-time-interval",
+      "path": "/docs/components/BarChart/histogram-date-time-interval",
       "lineNumber": 59,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "histogram-date-time-interval",
       "component": "BarChart",
-      "path": "/example/BarChart/histogram-date-time-interval",
+      "path": "/docs/components/BarChart/histogram-date-time-interval",
       "lineNumber": 61,
       "line": "<Tooltip.Header class=\"text-center\">"
     },
     {
       "example": "histogram-date-time-interval",
       "component": "BarChart",
-      "path": "/example/BarChart/histogram-date-time-interval",
+      "path": "/docs/components/BarChart/histogram-date-time-interval",
       "lineNumber": 64,
       "line": "<Tooltip.List>"
     },
     {
       "example": "histogram-date-time-interval",
       "component": "BarChart",
-      "path": "/example/BarChart/histogram-date-time-interval",
+      "path": "/docs/components/BarChart/histogram-date-time-interval",
       "lineNumber": 65,
       "line": "<Tooltip.Item label=\"count\" value={data.length} format=\"integer\" />"
     },
     {
       "example": "histogram-date-time-interval",
       "component": "BarChart",
-      "path": "/example/BarChart/histogram-date-time-interval",
+      "path": "/docs/components/BarChart/histogram-date-time-interval",
       "lineNumber": 66,
       "line": "<Tooltip.Separator />"
     },
     {
       "example": "histogram-date-time-interval",
       "component": "BarChart",
-      "path": "/example/BarChart/histogram-date-time-interval",
+      "path": "/docs/components/BarChart/histogram-date-time-interval",
       "lineNumber": 68,
       "line": "<Tooltip.Item label=\"value\" value={d} format={'daytime'} />"
     },
     {
       "example": "histogram-horizontal",
       "component": "BarChart",
-      "path": "/example/BarChart/histogram-horizontal",
+      "path": "/docs/components/BarChart/histogram-horizontal",
       "lineNumber": 37,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "histogram-horizontal",
       "component": "BarChart",
-      "path": "/example/BarChart/histogram-horizontal",
+      "path": "/docs/components/BarChart/histogram-horizontal",
       "lineNumber": 39,
       "line": "<Tooltip.Header class=\"text-center\">{data.x0 + ' - ' + (data.x1 - 1)}</Tooltip.Header>"
     },
     {
       "example": "histogram-horizontal",
       "component": "BarChart",
-      "path": "/example/BarChart/histogram-horizontal",
+      "path": "/docs/components/BarChart/histogram-horizontal",
       "lineNumber": 40,
       "line": "<Tooltip.List>"
     },
     {
       "example": "histogram-horizontal",
       "component": "BarChart",
-      "path": "/example/BarChart/histogram-horizontal",
+      "path": "/docs/components/BarChart/histogram-horizontal",
       "lineNumber": 41,
       "line": "<Tooltip.Item label=\"count\" value={data.length} format=\"integer\" />"
     },
     {
       "example": "histogram-horizontal",
       "component": "BarChart",
-      "path": "/example/BarChart/histogram-horizontal",
+      "path": "/docs/components/BarChart/histogram-horizontal",
       "lineNumber": 42,
       "line": "<Tooltip.Separator />"
     },
     {
       "example": "histogram-horizontal",
       "component": "BarChart",
-      "path": "/example/BarChart/histogram-horizontal",
+      "path": "/docs/components/BarChart/histogram-horizontal",
       "lineNumber": 44,
       "line": "<Tooltip.Item label={d.name} value={d.weight} />"
     },
     {
       "example": "histogram-random-distribution",
       "component": "BarChart",
-      "path": "/example/BarChart/histogram-random-distribution",
+      "path": "/docs/components/BarChart/histogram-random-distribution",
       "lineNumber": 32,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "histogram-random-distribution",
       "component": "BarChart",
-      "path": "/example/BarChart/histogram-random-distribution",
+      "path": "/docs/components/BarChart/histogram-random-distribution",
       "lineNumber": 34,
       "line": "<Tooltip.Header class=\"text-center\">{data.x0 + ' - ' + (data.x1 - 0.01)}</Tooltip.Header>"
     },
     {
       "example": "histogram-random-distribution",
       "component": "BarChart",
-      "path": "/example/BarChart/histogram-random-distribution",
+      "path": "/docs/components/BarChart/histogram-random-distribution",
       "lineNumber": 35,
       "line": "<Tooltip.List>"
     },
     {
       "example": "histogram-random-distribution",
       "component": "BarChart",
-      "path": "/example/BarChart/histogram-random-distribution",
+      "path": "/docs/components/BarChart/histogram-random-distribution",
       "lineNumber": 36,
       "line": "<Tooltip.Item label=\"count\" value={data.length} format=\"integer\" />"
     },
     {
       "example": "histogram-random-distribution",
       "component": "BarChart",
-      "path": "/example/BarChart/histogram-random-distribution",
+      "path": "/docs/components/BarChart/histogram-random-distribution",
       "lineNumber": 37,
       "line": "<Tooltip.Separator />"
     },
     {
       "example": "histogram-random-distribution",
       "component": "BarChart",
-      "path": "/example/BarChart/histogram-random-distribution",
+      "path": "/docs/components/BarChart/histogram-random-distribution",
       "lineNumber": 39,
       "line": "<Tooltip.Item label=\"value\" value={d} />"
     },
     {
       "example": "histogram-vertical",
       "component": "BarChart",
-      "path": "/example/BarChart/histogram-vertical",
+      "path": "/docs/components/BarChart/histogram-vertical",
       "lineNumber": 36,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "histogram-vertical",
       "component": "BarChart",
-      "path": "/example/BarChart/histogram-vertical",
+      "path": "/docs/components/BarChart/histogram-vertical",
       "lineNumber": 38,
       "line": "<Tooltip.Header class=\"text-center\">{data.x0 + ' - ' + (data.x1 - 1)}</Tooltip.Header>"
     },
     {
       "example": "histogram-vertical",
       "component": "BarChart",
-      "path": "/example/BarChart/histogram-vertical",
+      "path": "/docs/components/BarChart/histogram-vertical",
       "lineNumber": 39,
       "line": "<Tooltip.List>"
     },
     {
       "example": "histogram-vertical",
       "component": "BarChart",
-      "path": "/example/BarChart/histogram-vertical",
+      "path": "/docs/components/BarChart/histogram-vertical",
       "lineNumber": 40,
       "line": "<Tooltip.Item label=\"count\" value={data.length} format=\"integer\" />"
     },
     {
       "example": "histogram-vertical",
       "component": "BarChart",
-      "path": "/example/BarChart/histogram-vertical",
+      "path": "/docs/components/BarChart/histogram-vertical",
       "lineNumber": 41,
       "line": "<Tooltip.Separator />"
     },
     {
       "example": "histogram-vertical",
       "component": "BarChart",
-      "path": "/example/BarChart/histogram-vertical",
+      "path": "/docs/components/BarChart/histogram-vertical",
       "lineNumber": 43,
       "line": "<Tooltip.Item label={d.name} value={d.weight} />"
     },
     {
       "example": "series-horizontal-diverging",
       "component": "BarChart",
-      "path": "/example/BarChart/series-horizontal-diverging",
+      "path": "/docs/components/BarChart/series-horizontal-diverging",
       "lineNumber": 56,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "series-horizontal-diverging",
       "component": "BarChart",
-      "path": "/example/BarChart/series-horizontal-diverging",
+      "path": "/docs/components/BarChart/series-horizontal-diverging",
       "lineNumber": 58,
       "line": "<Tooltip.Header>Age: {format(context.y(data))}</Tooltip.Header>"
     },
     {
       "example": "series-horizontal-diverging",
       "component": "BarChart",
-      "path": "/example/BarChart/series-horizontal-diverging",
+      "path": "/docs/components/BarChart/series-horizontal-diverging",
       "lineNumber": 59,
       "line": "<Tooltip.List>"
     },
     {
       "example": "series-horizontal-diverging",
       "component": "BarChart",
-      "path": "/example/BarChart/series-horizontal-diverging",
+      "path": "/docs/components/BarChart/series-horizontal-diverging",
       "lineNumber": 63,
       "line": "<Tooltip.Item label={s.key} color={s.color}>"
     },
     {
       "example": "series-horizontal-diverging-as-percent",
       "component": "BarChart",
-      "path": "/example/BarChart/series-horizontal-diverging-as-percent",
+      "path": "/docs/components/BarChart/series-horizontal-diverging-as-percent",
       "lineNumber": 57,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "series-horizontal-diverging-as-percent",
       "component": "BarChart",
-      "path": "/example/BarChart/series-horizontal-diverging-as-percent",
+      "path": "/docs/components/BarChart/series-horizontal-diverging-as-percent",
       "lineNumber": 59,
       "line": "<Tooltip.Header>Age: {format(context.y(data))}</Tooltip.Header>"
     },
     {
       "example": "series-horizontal-diverging-as-percent",
       "component": "BarChart",
-      "path": "/example/BarChart/series-horizontal-diverging-as-percent",
+      "path": "/docs/components/BarChart/series-horizontal-diverging-as-percent",
       "lineNumber": 60,
       "line": "<Tooltip.List>"
     },
     {
       "example": "series-horizontal-diverging-as-percent",
       "component": "BarChart",
-      "path": "/example/BarChart/series-horizontal-diverging-as-percent",
+      "path": "/docs/components/BarChart/series-horizontal-diverging-as-percent",
       "lineNumber": 64,
       "line": "<Tooltip.Item label={s.key} color={s.color}>"
     },
     {
       "example": "single-dimension",
       "component": "BarChart",
-      "path": "/example/BarChart/single-dimension",
+      "path": "/docs/components/BarChart/single-dimension",
       "lineNumber": 36,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "single-dimension",
       "component": "BarChart",
-      "path": "/example/BarChart/single-dimension",
+      "path": "/docs/components/BarChart/single-dimension",
       "lineNumber": 38,
       "line": "<Tooltip.Header>{format(context.x(data))}</Tooltip.Header>"
     },
     {
       "example": "single-dimension",
       "component": "BarChart",
-      "path": "/example/BarChart/single-dimension",
+      "path": "/docs/components/BarChart/single-dimension",
       "lineNumber": 39,
       "line": "<Tooltip.List>"
     },
     {
       "example": "single-dimension",
       "component": "BarChart",
-      "path": "/example/BarChart/single-dimension",
+      "path": "/docs/components/BarChart/single-dimension",
       "lineNumber": 40,
       "line": "<Tooltip.Item"
     },
     {
       "example": "single-stack-with-indicator",
       "component": "BarChart",
-      "path": "/example/BarChart/single-stack-with-indicator",
+      "path": "/docs/components/BarChart/single-stack-with-indicator",
       "lineNumber": 84,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "single-stack-with-indicator",
       "component": "BarChart",
-      "path": "/example/BarChart/single-stack-with-indicator",
+      "path": "/docs/components/BarChart/single-stack-with-indicator",
       "lineNumber": 86,
       "line": "<Tooltip.List>"
     },
     {
       "example": "single-stack-with-indicator",
       "component": "BarChart",
-      "path": "/example/BarChart/single-stack-with-indicator",
+      "path": "/docs/components/BarChart/single-stack-with-indicator",
       "lineNumber": 87,
       "line": "<Tooltip.Item label=\"Label:\" value={data.label} />"
     },
     {
       "example": "single-stack-with-indicator",
       "component": "BarChart",
-      "path": "/example/BarChart/single-stack-with-indicator",
+      "path": "/docs/components/BarChart/single-stack-with-indicator",
       "lineNumber": 88,
       "line": "<Tooltip.Item label=\"Range:\" value=\"{data.start} - {data.end}\" />"
     },
     {
       "example": "sparkbar-fixed-position-tooltip",
       "component": "BarChart",
-      "path": "/example/BarChart/sparkbar-fixed-position-tooltip",
+      "path": "/docs/components/BarChart/sparkbar-fixed-position-tooltip",
       "lineNumber": 22,
       "line": "<Tooltip.Root"
     },
     {
       "example": "sparkbar-within-a-paragraph-with-tooltip-and-highlight",
       "component": "BarChart",
-      "path": "/example/BarChart/sparkbar-within-a-paragraph-with-tooltip-and-highlight",
+      "path": "/docs/components/BarChart/sparkbar-within-a-paragraph-with-tooltip-and-highlight",
       "lineNumber": 26,
       "line": "<Tooltip.Root {context} class=\"text-xs\" contained={false} y={context.height + 4} xOffset={0}>"
     },
     {
       "example": "sparkbar-within-a-paragraph-with-tooltip-and-highlight",
       "component": "BarChart",
-      "path": "/example/BarChart/sparkbar-within-a-paragraph-with-tooltip-and-highlight",
+      "path": "/docs/components/BarChart/sparkbar-within-a-paragraph-with-tooltip-and-highlight",
       "lineNumber": 28,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "sparkbar-within-a-paragraph-with-tooltip-and-highlight",
       "component": "BarChart",
-      "path": "/example/BarChart/sparkbar-within-a-paragraph-with-tooltip-and-highlight",
+      "path": "/docs/components/BarChart/sparkbar-within-a-paragraph-with-tooltip-and-highlight",
       "lineNumber": 29,
       "line": "<Tooltip.List>"
     },
     {
       "example": "sparkbar-within-a-paragraph-with-tooltip-and-highlight",
       "component": "BarChart",
-      "path": "/example/BarChart/sparkbar-within-a-paragraph-with-tooltip-and-highlight",
+      "path": "/docs/components/BarChart/sparkbar-within-a-paragraph-with-tooltip-and-highlight",
       "lineNumber": 30,
       "line": "<Tooltip.Item label=\"value\" value={format(data.value, 'decimal')} />"
     },
     {
       "example": "horizontal-candlestick-bars",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-candlestick-bars",
+      "path": "/docs/components/Bars/horizontal-candlestick-bars",
       "lineNumber": 33,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "horizontal-candlestick-bars",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-candlestick-bars",
+      "path": "/docs/components/Bars/horizontal-candlestick-bars",
       "lineNumber": 35,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "horizontal-candlestick-bars",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-candlestick-bars",
+      "path": "/docs/components/Bars/horizontal-candlestick-bars",
       "lineNumber": 36,
       "line": "<Tooltip.List>"
     },
     {
       "example": "horizontal-candlestick-bars",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-candlestick-bars",
+      "path": "/docs/components/Bars/horizontal-candlestick-bars",
       "lineNumber": 37,
       "line": "<Tooltip.Item label=\"Open\" value={data.open} format=\"decimal\" />"
     },
     {
       "example": "horizontal-candlestick-bars",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-candlestick-bars",
+      "path": "/docs/components/Bars/horizontal-candlestick-bars",
       "lineNumber": 38,
       "line": "<Tooltip.Item label=\"Close\" value={data.close} format=\"decimal\" />"
     },
     {
       "example": "horizontal-candlestick-bars",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-candlestick-bars",
+      "path": "/docs/components/Bars/horizontal-candlestick-bars",
       "lineNumber": 39,
       "line": "<Tooltip.Item label=\"High\" value={data.high} format=\"decimal\" />"
     },
     {
       "example": "horizontal-candlestick-bars",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-candlestick-bars",
+      "path": "/docs/components/Bars/horizontal-candlestick-bars",
       "lineNumber": 40,
       "line": "<Tooltip.Item label=\"Low\" value={data.low} format=\"decimal\" />"
     },
     {
       "example": "horizontal-grouped",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-grouped",
+      "path": "/docs/components/Bars/horizontal-grouped",
       "lineNumber": 53,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "horizontal-grouped",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-grouped",
+      "path": "/docs/components/Bars/horizontal-grouped",
       "lineNumber": 55,
       "line": "<Tooltip.Header>{data.year}</Tooltip.Header>"
     },
     {
       "example": "horizontal-grouped",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-grouped",
+      "path": "/docs/components/Bars/horizontal-grouped",
       "lineNumber": 56,
       "line": "<Tooltip.List>"
     },
     {
       "example": "horizontal-grouped",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-grouped",
+      "path": "/docs/components/Bars/horizontal-grouped",
       "lineNumber": 58,
       "line": "<Tooltip.Item"
     },
     {
       "example": "horizontal-grouped",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-grouped",
+      "path": "/docs/components/Bars/horizontal-grouped",
       "lineNumber": 67,
       "line": "<Tooltip.Separator />"
     },
     {
       "example": "horizontal-grouped",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-grouped",
+      "path": "/docs/components/Bars/horizontal-grouped",
       "lineNumber": 69,
       "line": "<Tooltip.Item"
     },
     {
       "example": "horizontal-grouped-and-stacked",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-grouped-and-stacked",
+      "path": "/docs/components/Bars/horizontal-grouped-and-stacked",
       "lineNumber": 58,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "horizontal-grouped-and-stacked",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-grouped-and-stacked",
+      "path": "/docs/components/Bars/horizontal-grouped-and-stacked",
       "lineNumber": 60,
       "line": "<Tooltip.Header>{data.year}</Tooltip.Header>"
     },
     {
       "example": "horizontal-grouped-and-stacked",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-grouped-and-stacked",
+      "path": "/docs/components/Bars/horizontal-grouped-and-stacked",
       "lineNumber": 61,
       "line": "<Tooltip.List>"
     },
     {
       "example": "horizontal-grouped-and-stacked",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-grouped-and-stacked",
+      "path": "/docs/components/Bars/horizontal-grouped-and-stacked",
       "lineNumber": 63,
       "line": "<Tooltip.Item"
     },
     {
       "example": "horizontal-grouped-and-stacked",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-grouped-and-stacked",
+      "path": "/docs/components/Bars/horizontal-grouped-and-stacked",
       "lineNumber": 72,
       "line": "<Tooltip.Separator />"
     },
     {
       "example": "horizontal-grouped-and-stacked",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-grouped-and-stacked",
+      "path": "/docs/components/Bars/horizontal-grouped-and-stacked",
       "lineNumber": 74,
       "line": "<Tooltip.Item"
     },
     {
       "example": "horizontal-grouped-stacked-or-both-transition",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-grouped-stacked-or-both-transition",
+      "path": "/docs/components/Bars/horizontal-grouped-stacked-or-both-transition",
       "lineNumber": 118,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "horizontal-grouped-stacked-or-both-transition",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-grouped-stacked-or-both-transition",
+      "path": "/docs/components/Bars/horizontal-grouped-stacked-or-both-transition",
       "lineNumber": 120,
       "line": "<Tooltip.Header>{data.year}</Tooltip.Header>"
     },
     {
       "example": "horizontal-grouped-stacked-or-both-transition",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-grouped-stacked-or-both-transition",
+      "path": "/docs/components/Bars/horizontal-grouped-stacked-or-both-transition",
       "lineNumber": 121,
       "line": "<Tooltip.List>"
     },
     {
       "example": "horizontal-grouped-stacked-or-both-transition",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-grouped-stacked-or-both-transition",
+      "path": "/docs/components/Bars/horizontal-grouped-stacked-or-both-transition",
       "lineNumber": 123,
       "line": "<Tooltip.Item"
     },
     {
       "example": "horizontal-grouped-stacked-or-both-transition",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-grouped-stacked-or-both-transition",
+      "path": "/docs/components/Bars/horizontal-grouped-stacked-or-both-transition",
       "lineNumber": 132,
       "line": "<Tooltip.Separator />"
     },
     {
       "example": "horizontal-grouped-stacked-or-both-transition",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-grouped-stacked-or-both-transition",
+      "path": "/docs/components/Bars/horizontal-grouped-stacked-or-both-transition",
       "lineNumber": 135,
       "line": "<Tooltip.Item"
     },
     {
       "example": "horizontal-multiple-diverging",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-multiple-diverging",
+      "path": "/docs/components/Bars/horizontal-multiple-diverging",
       "lineNumber": 36,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "horizontal-multiple-diverging",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-multiple-diverging",
+      "path": "/docs/components/Bars/horizontal-multiple-diverging",
       "lineNumber": 38,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "horizontal-multiple-diverging",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-multiple-diverging",
+      "path": "/docs/components/Bars/horizontal-multiple-diverging",
       "lineNumber": 39,
       "line": "<Tooltip.List>"
     },
     {
       "example": "horizontal-multiple-diverging",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-multiple-diverging",
+      "path": "/docs/components/Bars/horizontal-multiple-diverging",
       "lineNumber": 40,
       "line": "<Tooltip.Item label=\"value\" value={data.value} />"
     },
     {
       "example": "horizontal-multiple-diverging",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-multiple-diverging",
+      "path": "/docs/components/Bars/horizontal-multiple-diverging",
       "lineNumber": 41,
       "line": "<Tooltip.Item label=\"baseline\" value={data.baseline} />"
     },
     {
       "example": "horizontal-multiple-overlapping",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-multiple-overlapping",
+      "path": "/docs/components/Bars/horizontal-multiple-overlapping",
       "lineNumber": 35,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "horizontal-multiple-overlapping",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-multiple-overlapping",
+      "path": "/docs/components/Bars/horizontal-multiple-overlapping",
       "lineNumber": 37,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "horizontal-multiple-overlapping",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-multiple-overlapping",
+      "path": "/docs/components/Bars/horizontal-multiple-overlapping",
       "lineNumber": 38,
       "line": "<Tooltip.List>"
     },
     {
       "example": "horizontal-multiple-overlapping",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-multiple-overlapping",
+      "path": "/docs/components/Bars/horizontal-multiple-overlapping",
       "lineNumber": 39,
       "line": "<Tooltip.Item label=\"value\" value={data.value} />"
     },
     {
       "example": "horizontal-multiple-overlapping",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-multiple-overlapping",
+      "path": "/docs/components/Bars/horizontal-multiple-overlapping",
       "lineNumber": 40,
       "line": "<Tooltip.Item label=\"baseline\" value={data.baseline} />"
     },
     {
       "example": "horizontal-stacked",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-stacked",
+      "path": "/docs/components/Bars/horizontal-stacked",
       "lineNumber": 50,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "horizontal-stacked",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-stacked",
+      "path": "/docs/components/Bars/horizontal-stacked",
       "lineNumber": 52,
       "line": "<Tooltip.Header>{data.year}</Tooltip.Header>"
     },
     {
       "example": "horizontal-stacked",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-stacked",
+      "path": "/docs/components/Bars/horizontal-stacked",
       "lineNumber": 53,
       "line": "<Tooltip.List>"
     },
     {
       "example": "horizontal-stacked",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-stacked",
+      "path": "/docs/components/Bars/horizontal-stacked",
       "lineNumber": 55,
       "line": "<Tooltip.Item"
     },
     {
       "example": "horizontal-stacked",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-stacked",
+      "path": "/docs/components/Bars/horizontal-stacked",
       "lineNumber": 64,
       "line": "<Tooltip.Separator />"
     },
     {
       "example": "horizontal-stacked",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-stacked",
+      "path": "/docs/components/Bars/horizontal-stacked",
       "lineNumber": 66,
       "line": "<Tooltip.Item"
     },
     {
       "example": "horizontal-stacked-percent",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-stacked-percent",
+      "path": "/docs/components/Bars/horizontal-stacked-percent",
       "lineNumber": 55,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "horizontal-stacked-percent",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-stacked-percent",
+      "path": "/docs/components/Bars/horizontal-stacked-percent",
       "lineNumber": 57,
       "line": "<Tooltip.Header>{data.year}</Tooltip.Header>"
     },
     {
       "example": "horizontal-stacked-percent",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-stacked-percent",
+      "path": "/docs/components/Bars/horizontal-stacked-percent",
       "lineNumber": 58,
       "line": "<Tooltip.List>"
     },
     {
       "example": "horizontal-stacked-percent",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-stacked-percent",
+      "path": "/docs/components/Bars/horizontal-stacked-percent",
       "lineNumber": 60,
       "line": "<Tooltip.Item"
     },
     {
       "example": "horizontal-stacked-percent",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-stacked-percent",
+      "path": "/docs/components/Bars/horizontal-stacked-percent",
       "lineNumber": 69,
       "line": "<Tooltip.Separator />"
     },
     {
       "example": "horizontal-stacked-percent",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-stacked-percent",
+      "path": "/docs/components/Bars/horizontal-stacked-percent",
       "lineNumber": 71,
       "line": "<Tooltip.Item"
     },
     {
       "example": "horizontal-tooltip-and-bar-highlight",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-tooltip-and-bar-highlight",
+      "path": "/docs/components/Bars/horizontal-tooltip-and-bar-highlight",
       "lineNumber": 35,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "horizontal-tooltip-and-bar-highlight",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-tooltip-and-bar-highlight",
+      "path": "/docs/components/Bars/horizontal-tooltip-and-bar-highlight",
       "lineNumber": 37,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "horizontal-tooltip-and-bar-highlight",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-tooltip-and-bar-highlight",
+      "path": "/docs/components/Bars/horizontal-tooltip-and-bar-highlight",
       "lineNumber": 38,
       "line": "<Tooltip.List>"
     },
     {
       "example": "horizontal-tooltip-and-bar-highlight",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-tooltip-and-bar-highlight",
+      "path": "/docs/components/Bars/horizontal-tooltip-and-bar-highlight",
       "lineNumber": 39,
       "line": "<Tooltip.Item label=\"value\" value={data.value} />"
     },
     {
       "example": "horizontal-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
+      "path": "/docs/components/Bars/horizontal-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
       "lineNumber": 121,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "horizontal-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
+      "path": "/docs/components/Bars/horizontal-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
       "lineNumber": 123,
       "line": "<Tooltip.Header>{data.year}</Tooltip.Header>"
     },
     {
       "example": "horizontal-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
+      "path": "/docs/components/Bars/horizontal-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
       "lineNumber": 124,
       "line": "<Tooltip.List>"
     },
     {
       "example": "horizontal-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
+      "path": "/docs/components/Bars/horizontal-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
       "lineNumber": 125,
       "line": "<Tooltip.Item"
     },
     {
       "example": "horizontal-tooltip-and-clipped-highlight",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-tooltip-and-clipped-highlight",
+      "path": "/docs/components/Bars/horizontal-tooltip-and-clipped-highlight",
       "lineNumber": 41,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "horizontal-tooltip-and-clipped-highlight",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-tooltip-and-clipped-highlight",
+      "path": "/docs/components/Bars/horizontal-tooltip-and-clipped-highlight",
       "lineNumber": 43,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "horizontal-tooltip-and-clipped-highlight",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-tooltip-and-clipped-highlight",
+      "path": "/docs/components/Bars/horizontal-tooltip-and-clipped-highlight",
       "lineNumber": 44,
       "line": "<Tooltip.List>"
     },
     {
       "example": "horizontal-tooltip-and-clipped-highlight",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-tooltip-and-clipped-highlight",
+      "path": "/docs/components/Bars/horizontal-tooltip-and-clipped-highlight",
       "lineNumber": 45,
       "line": "<Tooltip.Item label=\"value\" value={data.value} />"
     },
     {
       "example": "horizontal-tooltip-and-highlight",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-tooltip-and-highlight",
+      "path": "/docs/components/Bars/horizontal-tooltip-and-highlight",
       "lineNumber": 34,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "horizontal-tooltip-and-highlight",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-tooltip-and-highlight",
+      "path": "/docs/components/Bars/horizontal-tooltip-and-highlight",
       "lineNumber": 36,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "horizontal-tooltip-and-highlight",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-tooltip-and-highlight",
+      "path": "/docs/components/Bars/horizontal-tooltip-and-highlight",
       "lineNumber": 37,
       "line": "<Tooltip.List>"
     },
     {
       "example": "horizontal-tooltip-and-highlight",
       "component": "Bars",
-      "path": "/example/Bars/horizontal-tooltip-and-highlight",
+      "path": "/docs/components/Bars/horizontal-tooltip-and-highlight",
       "lineNumber": 38,
       "line": "<Tooltip.Item label=\"value\" value={data.value} />"
     },
     {
       "example": "vertical-grouped",
       "component": "Bars",
-      "path": "/example/Bars/vertical-grouped",
+      "path": "/docs/components/Bars/vertical-grouped",
       "lineNumber": 44,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "vertical-grouped",
       "component": "Bars",
-      "path": "/example/Bars/vertical-grouped",
+      "path": "/docs/components/Bars/vertical-grouped",
       "lineNumber": 46,
       "line": "<Tooltip.Header>{data.year}</Tooltip.Header>"
     },
     {
       "example": "vertical-grouped",
       "component": "Bars",
-      "path": "/example/Bars/vertical-grouped",
+      "path": "/docs/components/Bars/vertical-grouped",
       "lineNumber": 47,
       "line": "<Tooltip.List>"
     },
     {
       "example": "vertical-grouped",
       "component": "Bars",
-      "path": "/example/Bars/vertical-grouped",
+      "path": "/docs/components/Bars/vertical-grouped",
       "lineNumber": 49,
       "line": "<Tooltip.Item"
     },
     {
       "example": "vertical-grouped",
       "component": "Bars",
-      "path": "/example/Bars/vertical-grouped",
+      "path": "/docs/components/Bars/vertical-grouped",
       "lineNumber": 58,
       "line": "<Tooltip.Separator />"
     },
     {
       "example": "vertical-grouped",
       "component": "Bars",
-      "path": "/example/Bars/vertical-grouped",
+      "path": "/docs/components/Bars/vertical-grouped",
       "lineNumber": 60,
       "line": "<Tooltip.Item"
     },
     {
       "example": "vertical-grouped-and-stacked",
       "component": "Bars",
-      "path": "/example/Bars/vertical-grouped-and-stacked",
+      "path": "/docs/components/Bars/vertical-grouped-and-stacked",
       "lineNumber": 49,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "vertical-grouped-and-stacked",
       "component": "Bars",
-      "path": "/example/Bars/vertical-grouped-and-stacked",
+      "path": "/docs/components/Bars/vertical-grouped-and-stacked",
       "lineNumber": 51,
       "line": "<Tooltip.Header>{data.year}</Tooltip.Header>"
     },
     {
       "example": "vertical-grouped-and-stacked",
       "component": "Bars",
-      "path": "/example/Bars/vertical-grouped-and-stacked",
+      "path": "/docs/components/Bars/vertical-grouped-and-stacked",
       "lineNumber": 52,
       "line": "<Tooltip.List>"
     },
     {
       "example": "vertical-grouped-and-stacked",
       "component": "Bars",
-      "path": "/example/Bars/vertical-grouped-and-stacked",
+      "path": "/docs/components/Bars/vertical-grouped-and-stacked",
       "lineNumber": 54,
       "line": "<Tooltip.Item"
     },
     {
       "example": "vertical-grouped-and-stacked",
       "component": "Bars",
-      "path": "/example/Bars/vertical-grouped-and-stacked",
+      "path": "/docs/components/Bars/vertical-grouped-and-stacked",
       "lineNumber": 63,
       "line": "<Tooltip.Separator />"
     },
     {
       "example": "vertical-grouped-and-stacked",
       "component": "Bars",
-      "path": "/example/Bars/vertical-grouped-and-stacked",
+      "path": "/docs/components/Bars/vertical-grouped-and-stacked",
       "lineNumber": 65,
       "line": "<Tooltip.Item"
     },
     {
       "example": "vertical-grouped-stacked-or-both-transition",
       "component": "Bars",
-      "path": "/example/Bars/vertical-grouped-stacked-or-both-transition",
+      "path": "/docs/components/Bars/vertical-grouped-stacked-or-both-transition",
       "lineNumber": 113,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "vertical-grouped-stacked-or-both-transition",
       "component": "Bars",
-      "path": "/example/Bars/vertical-grouped-stacked-or-both-transition",
+      "path": "/docs/components/Bars/vertical-grouped-stacked-or-both-transition",
       "lineNumber": 115,
       "line": "<Tooltip.Header>{data.year}</Tooltip.Header>"
     },
     {
       "example": "vertical-grouped-stacked-or-both-transition",
       "component": "Bars",
-      "path": "/example/Bars/vertical-grouped-stacked-or-both-transition",
+      "path": "/docs/components/Bars/vertical-grouped-stacked-or-both-transition",
       "lineNumber": 116,
       "line": "<Tooltip.List>"
     },
     {
       "example": "vertical-grouped-stacked-or-both-transition",
       "component": "Bars",
-      "path": "/example/Bars/vertical-grouped-stacked-or-both-transition",
+      "path": "/docs/components/Bars/vertical-grouped-stacked-or-both-transition",
       "lineNumber": 118,
       "line": "<Tooltip.Item"
     },
     {
       "example": "vertical-grouped-stacked-or-both-transition",
       "component": "Bars",
-      "path": "/example/Bars/vertical-grouped-stacked-or-both-transition",
+      "path": "/docs/components/Bars/vertical-grouped-stacked-or-both-transition",
       "lineNumber": 127,
       "line": "<Tooltip.Separator />"
     },
     {
       "example": "vertical-grouped-stacked-or-both-transition",
       "component": "Bars",
-      "path": "/example/Bars/vertical-grouped-stacked-or-both-transition",
+      "path": "/docs/components/Bars/vertical-grouped-stacked-or-both-transition",
       "lineNumber": 130,
       "line": "<Tooltip.Item"
     },
     {
       "example": "vertical-multiple-diverging",
       "component": "Bars",
-      "path": "/example/Bars/vertical-multiple-diverging",
+      "path": "/docs/components/Bars/vertical-multiple-diverging",
       "lineNumber": 34,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "vertical-multiple-diverging",
       "component": "Bars",
-      "path": "/example/Bars/vertical-multiple-diverging",
+      "path": "/docs/components/Bars/vertical-multiple-diverging",
       "lineNumber": 36,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "vertical-multiple-diverging",
       "component": "Bars",
-      "path": "/example/Bars/vertical-multiple-diverging",
+      "path": "/docs/components/Bars/vertical-multiple-diverging",
       "lineNumber": 37,
       "line": "<Tooltip.List>"
     },
     {
       "example": "vertical-multiple-diverging",
       "component": "Bars",
-      "path": "/example/Bars/vertical-multiple-diverging",
+      "path": "/docs/components/Bars/vertical-multiple-diverging",
       "lineNumber": 38,
       "line": "<Tooltip.Item label=\"value\" value={data.value} />"
     },
     {
       "example": "vertical-multiple-diverging",
       "component": "Bars",
-      "path": "/example/Bars/vertical-multiple-diverging",
+      "path": "/docs/components/Bars/vertical-multiple-diverging",
       "lineNumber": 39,
       "line": "<Tooltip.Item label=\"baseline\" value={data.baseline} />"
     },
     {
       "example": "vertical-multiple-diverging-rounded-specific",
       "component": "Bars",
-      "path": "/example/Bars/vertical-multiple-diverging-rounded-specific",
+      "path": "/docs/components/Bars/vertical-multiple-diverging-rounded-specific",
       "lineNumber": 46,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "vertical-multiple-diverging-rounded-specific",
       "component": "Bars",
-      "path": "/example/Bars/vertical-multiple-diverging-rounded-specific",
+      "path": "/docs/components/Bars/vertical-multiple-diverging-rounded-specific",
       "lineNumber": 48,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "vertical-multiple-diverging-rounded-specific",
       "component": "Bars",
-      "path": "/example/Bars/vertical-multiple-diverging-rounded-specific",
+      "path": "/docs/components/Bars/vertical-multiple-diverging-rounded-specific",
       "lineNumber": 49,
       "line": "<Tooltip.List>"
     },
     {
       "example": "vertical-multiple-diverging-rounded-specific",
       "component": "Bars",
-      "path": "/example/Bars/vertical-multiple-diverging-rounded-specific",
+      "path": "/docs/components/Bars/vertical-multiple-diverging-rounded-specific",
       "lineNumber": 50,
       "line": "<Tooltip.Item label=\"value\" value={data.value} />"
     },
     {
       "example": "vertical-multiple-diverging-rounded-specific",
       "component": "Bars",
-      "path": "/example/Bars/vertical-multiple-diverging-rounded-specific",
+      "path": "/docs/components/Bars/vertical-multiple-diverging-rounded-specific",
       "lineNumber": 51,
       "line": "<Tooltip.Item label=\"baseline\" value={data.baseline} />"
     },
     {
       "example": "vertical-multiple-overlapping",
       "component": "Bars",
-      "path": "/example/Bars/vertical-multiple-overlapping",
+      "path": "/docs/components/Bars/vertical-multiple-overlapping",
       "lineNumber": 33,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "vertical-multiple-overlapping",
       "component": "Bars",
-      "path": "/example/Bars/vertical-multiple-overlapping",
+      "path": "/docs/components/Bars/vertical-multiple-overlapping",
       "lineNumber": 35,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "vertical-multiple-overlapping",
       "component": "Bars",
-      "path": "/example/Bars/vertical-multiple-overlapping",
+      "path": "/docs/components/Bars/vertical-multiple-overlapping",
       "lineNumber": 36,
       "line": "<Tooltip.List>"
     },
     {
       "example": "vertical-multiple-overlapping",
       "component": "Bars",
-      "path": "/example/Bars/vertical-multiple-overlapping",
+      "path": "/docs/components/Bars/vertical-multiple-overlapping",
       "lineNumber": 37,
       "line": "<Tooltip.Item label=\"value\" value={data.value} />"
     },
     {
       "example": "vertical-multiple-overlapping",
       "component": "Bars",
-      "path": "/example/Bars/vertical-multiple-overlapping",
+      "path": "/docs/components/Bars/vertical-multiple-overlapping",
       "lineNumber": 38,
       "line": "<Tooltip.Item label=\"baseline\" value={data.baseline} />"
     },
     {
       "example": "vertical-stacked",
       "component": "Bars",
-      "path": "/example/Bars/vertical-stacked",
+      "path": "/docs/components/Bars/vertical-stacked",
       "lineNumber": 41,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "vertical-stacked",
       "component": "Bars",
-      "path": "/example/Bars/vertical-stacked",
+      "path": "/docs/components/Bars/vertical-stacked",
       "lineNumber": 43,
       "line": "<Tooltip.Header>{data.year}</Tooltip.Header>"
     },
     {
       "example": "vertical-stacked",
       "component": "Bars",
-      "path": "/example/Bars/vertical-stacked",
+      "path": "/docs/components/Bars/vertical-stacked",
       "lineNumber": 44,
       "line": "<Tooltip.List>"
     },
     {
       "example": "vertical-stacked",
       "component": "Bars",
-      "path": "/example/Bars/vertical-stacked",
+      "path": "/docs/components/Bars/vertical-stacked",
       "lineNumber": 46,
       "line": "<Tooltip.Item"
     },
     {
       "example": "vertical-stacked",
       "component": "Bars",
-      "path": "/example/Bars/vertical-stacked",
+      "path": "/docs/components/Bars/vertical-stacked",
       "lineNumber": 55,
       "line": "<Tooltip.Separator />"
     },
     {
       "example": "vertical-stacked",
       "component": "Bars",
-      "path": "/example/Bars/vertical-stacked",
+      "path": "/docs/components/Bars/vertical-stacked",
       "lineNumber": 57,
       "line": "<Tooltip.Item"
     },
     {
       "example": "vertical-stacked-percent",
       "component": "Bars",
-      "path": "/example/Bars/vertical-stacked-percent",
+      "path": "/docs/components/Bars/vertical-stacked-percent",
       "lineNumber": 45,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "vertical-stacked-percent",
       "component": "Bars",
-      "path": "/example/Bars/vertical-stacked-percent",
+      "path": "/docs/components/Bars/vertical-stacked-percent",
       "lineNumber": 47,
       "line": "<Tooltip.Header>{data.year}</Tooltip.Header>"
     },
     {
       "example": "vertical-stacked-percent",
       "component": "Bars",
-      "path": "/example/Bars/vertical-stacked-percent",
+      "path": "/docs/components/Bars/vertical-stacked-percent",
       "lineNumber": 48,
       "line": "<Tooltip.List>"
     },
     {
       "example": "vertical-stacked-percent",
       "component": "Bars",
-      "path": "/example/Bars/vertical-stacked-percent",
+      "path": "/docs/components/Bars/vertical-stacked-percent",
       "lineNumber": 50,
       "line": "<Tooltip.Item"
     },
     {
       "example": "vertical-stacked-percent",
       "component": "Bars",
-      "path": "/example/Bars/vertical-stacked-percent",
+      "path": "/docs/components/Bars/vertical-stacked-percent",
       "lineNumber": 59,
       "line": "<Tooltip.Separator />"
     },
     {
       "example": "vertical-stacked-percent",
       "component": "Bars",
-      "path": "/example/Bars/vertical-stacked-percent",
+      "path": "/docs/components/Bars/vertical-stacked-percent",
       "lineNumber": 61,
       "line": "<Tooltip.Item"
     },
     {
       "example": "vertical-tooltip-and-bar-highlight",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tooltip-and-bar-highlight",
+      "path": "/docs/components/Bars/vertical-tooltip-and-bar-highlight",
       "lineNumber": 32,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "vertical-tooltip-and-bar-highlight",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tooltip-and-bar-highlight",
+      "path": "/docs/components/Bars/vertical-tooltip-and-bar-highlight",
       "lineNumber": 34,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "vertical-tooltip-and-bar-highlight",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tooltip-and-bar-highlight",
+      "path": "/docs/components/Bars/vertical-tooltip-and-bar-highlight",
       "lineNumber": 35,
       "line": "<Tooltip.List>"
     },
     {
       "example": "vertical-tooltip-and-bar-highlight",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tooltip-and-bar-highlight",
+      "path": "/docs/components/Bars/vertical-tooltip-and-bar-highlight",
       "lineNumber": 36,
       "line": "<Tooltip.Item label=\"value\" value={data.value} />"
     },
     {
       "example": "vertical-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
+      "path": "/docs/components/Bars/vertical-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
       "lineNumber": 121,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "vertical-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
+      "path": "/docs/components/Bars/vertical-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
       "lineNumber": 123,
       "line": "<Tooltip.Header>{data.year}</Tooltip.Header>"
     },
     {
       "example": "vertical-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
+      "path": "/docs/components/Bars/vertical-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
       "lineNumber": 124,
       "line": "<Tooltip.List>"
     },
     {
       "example": "vertical-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
+      "path": "/docs/components/Bars/vertical-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
       "lineNumber": 125,
       "line": "<Tooltip.Item"
     },
     {
       "example": "vertical-tooltip-and-clipped-highlight",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tooltip-and-clipped-highlight",
+      "path": "/docs/components/Bars/vertical-tooltip-and-clipped-highlight",
       "lineNumber": 40,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "vertical-tooltip-and-clipped-highlight",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tooltip-and-clipped-highlight",
+      "path": "/docs/components/Bars/vertical-tooltip-and-clipped-highlight",
       "lineNumber": 42,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "vertical-tooltip-and-clipped-highlight",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tooltip-and-clipped-highlight",
+      "path": "/docs/components/Bars/vertical-tooltip-and-clipped-highlight",
       "lineNumber": 43,
       "line": "<Tooltip.List>"
     },
     {
       "example": "vertical-tooltip-and-clipped-highlight",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tooltip-and-clipped-highlight",
+      "path": "/docs/components/Bars/vertical-tooltip-and-clipped-highlight",
       "lineNumber": 44,
       "line": "<Tooltip.Item label=\"value\" value={data.value} />"
     },
     {
       "example": "vertical-tooltip-and-highlight",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tooltip-and-highlight",
+      "path": "/docs/components/Bars/vertical-tooltip-and-highlight",
       "lineNumber": 32,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "vertical-tooltip-and-highlight",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tooltip-and-highlight",
+      "path": "/docs/components/Bars/vertical-tooltip-and-highlight",
       "lineNumber": 34,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "vertical-tooltip-and-highlight",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tooltip-and-highlight",
+      "path": "/docs/components/Bars/vertical-tooltip-and-highlight",
       "lineNumber": 35,
       "line": "<Tooltip.List>"
     },
     {
       "example": "vertical-tooltip-and-highlight",
       "component": "Bars",
-      "path": "/example/Bars/vertical-tooltip-and-highlight",
+      "path": "/docs/components/Bars/vertical-tooltip-and-highlight",
       "lineNumber": 36,
       "line": "<Tooltip.Item label=\"value\" value={data.value} />"
     },
     {
       "example": "tooltip-interop",
       "component": "BrushContext",
-      "path": "/example/BrushContext/tooltip-interop",
+      "path": "/docs/components/BrushContext/tooltip-interop",
       "lineNumber": 53,
       "line": "<Tooltip.Root"
     },
     {
       "example": "tooltip-interop",
       "component": "BrushContext",
-      "path": "/example/BrushContext/tooltip-interop",
+      "path": "/docs/components/BrushContext/tooltip-interop",
       "lineNumber": 65,
       "line": "<Tooltip.Root"
     },
     {
       "example": "90-days",
       "component": "Calendar",
-      "path": "/example/Calendar/90-days",
+      "path": "/docs/components/Calendar/90-days",
       "lineNumber": 42,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "90-days",
       "component": "Calendar",
-      "path": "/example/Calendar/90-days",
+      "path": "/docs/components/Calendar/90-days",
       "lineNumber": 44,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "90-days",
       "component": "Calendar",
-      "path": "/example/Calendar/90-days",
+      "path": "/docs/components/Calendar/90-days",
       "lineNumber": 47,
       "line": "<Tooltip.List>"
     },
     {
       "example": "90-days",
       "component": "Calendar",
-      "path": "/example/Calendar/90-days",
+      "path": "/docs/components/Calendar/90-days",
       "lineNumber": 48,
       "line": "<Tooltip.Item label=\"value\" value={data.value} format=\"integer\" valueAlign=\"right\" />"
     },
     {
       "example": "fixed-cell-size",
       "component": "Calendar",
-      "path": "/example/Calendar/fixed-cell-size",
+      "path": "/docs/components/Calendar/fixed-cell-size",
       "lineNumber": 50,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "fixed-cell-size",
       "component": "Calendar",
-      "path": "/example/Calendar/fixed-cell-size",
+      "path": "/docs/components/Calendar/fixed-cell-size",
       "lineNumber": 52,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "fixed-cell-size",
       "component": "Calendar",
-      "path": "/example/Calendar/fixed-cell-size",
+      "path": "/docs/components/Calendar/fixed-cell-size",
       "lineNumber": 55,
       "line": "<Tooltip.List>"
     },
     {
       "example": "fixed-cell-size",
       "component": "Calendar",
-      "path": "/example/Calendar/fixed-cell-size",
+      "path": "/docs/components/Calendar/fixed-cell-size",
       "lineNumber": 56,
       "line": "<Tooltip.Item label=\"value\" value={data.value} format=\"integer\" valueAlign=\"right\" />"
     },
     {
       "example": "html-with-padding",
       "component": "Calendar",
-      "path": "/example/Calendar/html-with-padding",
+      "path": "/docs/components/Calendar/html-with-padding",
       "lineNumber": 63,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "html-with-padding",
       "component": "Calendar",
-      "path": "/example/Calendar/html-with-padding",
+      "path": "/docs/components/Calendar/html-with-padding",
       "lineNumber": 65,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "html-with-padding",
       "component": "Calendar",
-      "path": "/example/Calendar/html-with-padding",
+      "path": "/docs/components/Calendar/html-with-padding",
       "lineNumber": 68,
       "line": "<Tooltip.List>"
     },
     {
       "example": "html-with-padding",
       "component": "Calendar",
-      "path": "/example/Calendar/html-with-padding",
+      "path": "/docs/components/Calendar/html-with-padding",
       "lineNumber": 69,
       "line": "<Tooltip.Item label=\"value\" value={data.value} format=\"integer\" valueAlign=\"right\" />"
     },
     {
       "example": "last-month",
       "component": "Calendar",
-      "path": "/example/Calendar/last-month",
+      "path": "/docs/components/Calendar/last-month",
       "lineNumber": 49,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "last-month",
       "component": "Calendar",
-      "path": "/example/Calendar/last-month",
+      "path": "/docs/components/Calendar/last-month",
       "lineNumber": 51,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "last-month",
       "component": "Calendar",
-      "path": "/example/Calendar/last-month",
+      "path": "/docs/components/Calendar/last-month",
       "lineNumber": 54,
       "line": "<Tooltip.List>"
     },
     {
       "example": "last-month",
       "component": "Calendar",
-      "path": "/example/Calendar/last-month",
+      "path": "/docs/components/Calendar/last-month",
       "lineNumber": 55,
       "line": "<Tooltip.Item label=\"value\" value={data.value} format=\"integer\" valueAlign=\"right\" />"
     },
     {
       "example": "multiple-years",
       "component": "Calendar",
-      "path": "/example/Calendar/multiple-years",
+      "path": "/docs/components/Calendar/multiple-years",
       "lineNumber": 55,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "multiple-years",
       "component": "Calendar",
-      "path": "/example/Calendar/multiple-years",
+      "path": "/docs/components/Calendar/multiple-years",
       "lineNumber": 57,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "multiple-years",
       "component": "Calendar",
-      "path": "/example/Calendar/multiple-years",
+      "path": "/docs/components/Calendar/multiple-years",
       "lineNumber": 60,
       "line": "<Tooltip.List>"
     },
     {
       "example": "multiple-years",
       "component": "Calendar",
-      "path": "/example/Calendar/multiple-years",
+      "path": "/docs/components/Calendar/multiple-years",
       "lineNumber": 61,
       "line": "<Tooltip.Item label=\"value\" value={data.value} format=\"integer\" valueAlign=\"right\" />"
     },
     {
       "example": "responsive-cell-size-default",
       "component": "Calendar",
-      "path": "/example/Calendar/responsive-cell-size-default",
+      "path": "/docs/components/Calendar/responsive-cell-size-default",
       "lineNumber": 49,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "responsive-cell-size-default",
       "component": "Calendar",
-      "path": "/example/Calendar/responsive-cell-size-default",
+      "path": "/docs/components/Calendar/responsive-cell-size-default",
       "lineNumber": 51,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "responsive-cell-size-default",
       "component": "Calendar",
-      "path": "/example/Calendar/responsive-cell-size-default",
+      "path": "/docs/components/Calendar/responsive-cell-size-default",
       "lineNumber": 54,
       "line": "<Tooltip.List>"
     },
     {
       "example": "responsive-cell-size-default",
       "component": "Calendar",
-      "path": "/example/Calendar/responsive-cell-size-default",
+      "path": "/docs/components/Calendar/responsive-cell-size-default",
       "lineNumber": 55,
       "line": "<Tooltip.Item label=\"value\" value={data.value} format=\"integer\" valueAlign=\"right\" />"
     },
     {
       "example": "rounded-cells",
       "component": "Calendar",
-      "path": "/example/Calendar/rounded-cells",
+      "path": "/docs/components/Calendar/rounded-cells",
       "lineNumber": 60,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "rounded-cells",
       "component": "Calendar",
-      "path": "/example/Calendar/rounded-cells",
+      "path": "/docs/components/Calendar/rounded-cells",
       "lineNumber": 62,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "rounded-cells",
       "component": "Calendar",
-      "path": "/example/Calendar/rounded-cells",
+      "path": "/docs/components/Calendar/rounded-cells",
       "lineNumber": 65,
       "line": "<Tooltip.List>"
     },
     {
       "example": "rounded-cells",
       "component": "Calendar",
-      "path": "/example/Calendar/rounded-cells",
+      "path": "/docs/components/Calendar/rounded-cells",
       "lineNumber": 66,
       "line": "<Tooltip.Item label=\"value\" value={data.value} format=\"integer\" valueAlign=\"right\" />"
     },
     {
       "example": "compound-common-scale-with-extra-marks",
       "component": "Chart",
-      "path": "/example/Chart/compound-common-scale-with-extra-marks",
+      "path": "/docs/components/Chart/compound-common-scale-with-extra-marks",
       "lineNumber": 29,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "compound-common-scale-with-extra-marks",
       "component": "Chart",
-      "path": "/example/Chart/compound-common-scale-with-extra-marks",
+      "path": "/docs/components/Chart/compound-common-scale-with-extra-marks",
       "lineNumber": 31,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "compound-common-scale-with-extra-marks",
       "component": "Chart",
-      "path": "/example/Chart/compound-common-scale-with-extra-marks",
+      "path": "/docs/components/Chart/compound-common-scale-with-extra-marks",
       "lineNumber": 32,
       "line": "<Tooltip.List>"
     },
     {
       "example": "compound-common-scale-with-extra-marks",
       "component": "Chart",
-      "path": "/example/Chart/compound-common-scale-with-extra-marks",
+      "path": "/docs/components/Chart/compound-common-scale-with-extra-marks",
       "lineNumber": 33,
       "line": "<Tooltip.Item label=\"baseline\" value={data.baseline} color=\"var(--color-primary)\" />"
     },
     {
       "example": "compound-common-scale-with-extra-marks",
       "component": "Chart",
-      "path": "/example/Chart/compound-common-scale-with-extra-marks",
+      "path": "/docs/components/Chart/compound-common-scale-with-extra-marks",
       "lineNumber": 34,
       "line": "<Tooltip.Item label=\"value\" value={data.value} color=\"var(--color-secondary)\" />"
     },
     {
       "example": "compound-dual-axis-with-single-chart-using-remapped-scale",
       "component": "Chart",
-      "path": "/example/Chart/compound-dual-axis-with-single-chart-using-remapped-scale",
+      "path": "/docs/components/Chart/compound-dual-axis-with-single-chart-using-remapped-scale",
       "lineNumber": 49,
       "line": "<Tooltip.Root {context}>"
     },
     {
       "example": "compound-dual-axis-with-single-chart-using-remapped-scale",
       "component": "Chart",
-      "path": "/example/Chart/compound-dual-axis-with-single-chart-using-remapped-scale",
+      "path": "/docs/components/Chart/compound-dual-axis-with-single-chart-using-remapped-scale",
       "lineNumber": 51,
       "line": "<Tooltip.Header>{data.year}</Tooltip.Header>"
     },
     {
       "example": "compound-dual-axis-with-single-chart-using-remapped-scale",
       "component": "Chart",
-      "path": "/example/Chart/compound-dual-axis-with-single-chart-using-remapped-scale",
+      "path": "/docs/components/Chart/compound-dual-axis-with-single-chart-using-remapped-scale",
       "lineNumber": 52,
       "line": "<Tooltip.List>"
     },
     {
       "example": "compound-dual-axis-with-single-chart-using-remapped-scale",
       "component": "Chart",
-      "path": "/example/Chart/compound-dual-axis-with-single-chart-using-remapped-scale",
+      "path": "/docs/components/Chart/compound-dual-axis-with-single-chart-using-remapped-scale",
       "lineNumber": 53,
       "line": "<Tooltip.Item label=\"sales\" value={data.sales} format=\"currencyRound\" />"
     },
     {
       "example": "compound-dual-axis-with-single-chart-using-remapped-scale",
       "component": "Chart",
-      "path": "/example/Chart/compound-dual-axis-with-single-chart-using-remapped-scale",
+      "path": "/docs/components/Chart/compound-dual-axis-with-single-chart-using-remapped-scale",
       "lineNumber": 54,
       "line": "<Tooltip.Item label=\"efficiency\" value={data.efficiency} />"
     },
     {
       "example": "compound-dual-axis-with-stacked-charts",
       "component": "Chart",
-      "path": "/example/Chart/compound-dual-axis-with-stacked-charts",
+      "path": "/docs/components/Chart/compound-dual-axis-with-stacked-charts",
       "lineNumber": 56,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "compound-dual-axis-with-stacked-charts",
       "component": "Chart",
-      "path": "/example/Chart/compound-dual-axis-with-stacked-charts",
+      "path": "/docs/components/Chart/compound-dual-axis-with-stacked-charts",
       "lineNumber": 58,
       "line": "<Tooltip.Header>{data.year}</Tooltip.Header>"
     },
     {
       "example": "compound-dual-axis-with-stacked-charts",
       "component": "Chart",
-      "path": "/example/Chart/compound-dual-axis-with-stacked-charts",
+      "path": "/docs/components/Chart/compound-dual-axis-with-stacked-charts",
       "lineNumber": 59,
       "line": "<Tooltip.List>"
     },
     {
       "example": "compound-dual-axis-with-stacked-charts",
       "component": "Chart",
-      "path": "/example/Chart/compound-dual-axis-with-stacked-charts",
+      "path": "/docs/components/Chart/compound-dual-axis-with-stacked-charts",
       "lineNumber": 60,
       "line": "<Tooltip.Item label=\"sales\" value={data.sales} format=\"currencyRound\" />"
     },
     {
       "example": "compound-dual-axis-with-stacked-charts",
       "component": "Chart",
-      "path": "/example/Chart/compound-dual-axis-with-stacked-charts",
+      "path": "/docs/components/Chart/compound-dual-axis-with-stacked-charts",
       "lineNumber": 61,
       "line": "<Tooltip.Item label=\"efficiency\" value={data.efficiency} />"
     },
     {
       "example": "compound-separate-scales-with-stacked-charts-and-overridden-marks",
       "component": "Chart",
-      "path": "/example/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks",
+      "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks",
       "lineNumber": 45,
       "line": "<Tooltip.Root {context}>"
     },
     {
       "example": "compound-separate-scales-with-stacked-charts-and-overridden-marks",
       "component": "Chart",
-      "path": "/example/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks",
+      "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks",
       "lineNumber": 47,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "compound-separate-scales-with-stacked-charts-and-overridden-marks",
       "component": "Chart",
-      "path": "/example/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks",
+      "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks",
       "lineNumber": 48,
       "line": "<Tooltip.List>"
     },
     {
       "example": "compound-separate-scales-with-stacked-charts-and-overridden-marks",
       "component": "Chart",
-      "path": "/example/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks",
+      "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks",
       "lineNumber": 49,
       "line": "<Tooltip.Item label=\"open\" value={data.open} format=\"currency\" />"
     },
     {
       "example": "compound-separate-scales-with-stacked-charts-and-overridden-marks",
       "component": "Chart",
-      "path": "/example/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks",
+      "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks",
       "lineNumber": 50,
       "line": "<Tooltip.Item label=\"close\" value={data.close} format=\"currency\" />"
     },
     {
       "example": "compound-separate-scales-with-stacked-charts-and-overridden-marks",
       "component": "Chart",
-      "path": "/example/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks",
+      "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks",
       "lineNumber": 51,
       "line": "<Tooltip.Item label=\"high\" value={data.high} format=\"currency\" />"
     },
     {
       "example": "compound-separate-scales-with-stacked-charts-and-overridden-marks",
       "component": "Chart",
-      "path": "/example/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks",
+      "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks",
       "lineNumber": 52,
       "line": "<Tooltip.Item label=\"low\" value={data.low} format=\"currency\" />"
     },
     {
       "example": "compound-separate-scales-with-stacked-charts-and-overridden-marks",
       "component": "Chart",
-      "path": "/example/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks",
+      "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks",
       "lineNumber": 53,
       "line": "<Tooltip.Item label=\"volume\" value={data.volume} format=\"integer\" />"
     },
     {
       "example": "compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
       "component": "Chart",
-      "path": "/example/Chart/compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
+      "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
       "lineNumber": 81,
       "line": "<Tooltip.Root {context}>"
     },
     {
       "example": "compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
       "component": "Chart",
-      "path": "/example/Chart/compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
+      "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
       "lineNumber": 83,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
       "component": "Chart",
-      "path": "/example/Chart/compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
+      "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
       "lineNumber": 84,
       "line": "<Tooltip.List>"
     },
     {
       "example": "compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
       "component": "Chart",
-      "path": "/example/Chart/compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
+      "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
       "lineNumber": 85,
       "line": "<Tooltip.Item label=\"rain\" color=\"hsl(200 100% 50%)\" value={data.rain} />"
     },
     {
       "example": "compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
       "component": "Chart",
-      "path": "/example/Chart/compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
+      "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
       "lineNumber": 86,
       "line": "<Tooltip.Item"
     },
     {
       "example": "compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
       "component": "Chart",
-      "path": "/example/Chart/compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
+      "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
       "lineNumber": 91,
       "line": "<Tooltip.Item label=\"dirtyh2o\" color=\"hsl(0, 84%, 60%)\" value={data.dirtyh2o} />"
     },
     {
       "example": "compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
       "component": "Chart",
-      "path": "/example/Chart/compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
+      "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
       "lineNumber": 92,
       "line": "<Tooltip.Item"
     },
     {
       "example": "beeswarm",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/beeswarm",
+      "path": "/docs/components/ForceSimulation/beeswarm",
       "lineNumber": 58,
       "line": "<Tooltip.Root {context}>"
     },
     {
       "example": "beeswarm",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/beeswarm",
+      "path": "/docs/components/ForceSimulation/beeswarm",
       "lineNumber": 60,
       "line": "<Tooltip.Header>{data.name}</Tooltip.Header>"
     },
     {
       "example": "beeswarm",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/beeswarm",
+      "path": "/docs/components/ForceSimulation/beeswarm",
       "lineNumber": 61,
       "line": "<Tooltip.List>"
     },
     {
       "example": "beeswarm",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/beeswarm",
+      "path": "/docs/components/ForceSimulation/beeswarm",
       "lineNumber": 62,
       "line": "<Tooltip.Item label=\"Birth date\" value={data.date_of_birth} format=\"day\" />"
     },
     {
       "example": "beeswarm",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/beeswarm",
+      "path": "/docs/components/ForceSimulation/beeswarm",
       "lineNumber": 63,
       "line": "<Tooltip.Item label=\"State\" value={data.state_name} />"
     },
     {
       "example": "beeswarm",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/beeswarm",
+      "path": "/docs/components/ForceSimulation/beeswarm",
       "lineNumber": 64,
       "line": "<Tooltip.Item label=\"Party\" value={data.party} />"
     },
     {
       "example": "beeswarm",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/beeswarm",
+      "path": "/docs/components/ForceSimulation/beeswarm",
       "lineNumber": 65,
       "line": "<Tooltip.Item label=\"Gender\" value={data.gender} />"
     },
     {
       "example": "graph-drag",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/graph-drag",
+      "path": "/docs/components/ForceSimulation/graph-drag",
       "lineNumber": 140,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "graph-playground",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/graph-playground",
+      "path": "/docs/components/ForceSimulation/graph-playground",
       "lineNumber": 194,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "tree",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/tree",
+      "path": "/docs/components/ForceSimulation/tree",
       "lineNumber": 66,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "tree",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/tree",
+      "path": "/docs/components/ForceSimulation/tree",
       "lineNumber": 68,
       "line": "<Tooltip.Header>{data.data.name}</Tooltip.Header>"
     },
     {
       "example": "tree",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/tree",
+      "path": "/docs/components/ForceSimulation/tree",
       "lineNumber": 69,
       "line": "<Tooltip.List>"
     },
     {
       "example": "tree",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/tree",
+      "path": "/docs/components/ForceSimulation/tree",
       "lineNumber": 71,
       "line": "<Tooltip.Item label=\"children\" value={data.children.length} />"
     },
     {
       "example": "tree",
       "component": "ForceSimulation",
-      "path": "/example/ForceSimulation/tree",
+      "path": "/docs/components/ForceSimulation/tree",
       "lineNumber": 74,
       "line": "<Tooltip.Item label=\"value\" value={data.data.value} format=\"integer\" />"
     },
     {
       "example": "earthquake-globe",
       "component": "GeoCircle",
-      "path": "/example/GeoCircle/earthquake-globe",
+      "path": "/docs/components/GeoCircle/earthquake-globe",
       "lineNumber": 89,
       "line": "<Tooltip.Root {context}>"
     },
     {
       "example": "earthquake-globe",
       "component": "GeoCircle",
-      "path": "/example/GeoCircle/earthquake-globe",
+      "path": "/docs/components/GeoCircle/earthquake-globe",
       "lineNumber": 91,
       "line": "<Tooltip.Header>{data.place}</Tooltip.Header>"
     },
     {
       "example": "earthquake-globe",
       "component": "GeoCircle",
-      "path": "/example/GeoCircle/earthquake-globe",
+      "path": "/docs/components/GeoCircle/earthquake-globe",
       "lineNumber": 92,
       "line": "<Tooltip.List>"
     },
     {
       "example": "earthquake-globe",
       "component": "GeoCircle",
-      "path": "/example/GeoCircle/earthquake-globe",
+      "path": "/docs/components/GeoCircle/earthquake-globe",
       "lineNumber": 93,
       "line": "<Tooltip.Item label=\"Latitude\" value={data.latitude} format=\"decimal\" />"
     },
     {
       "example": "earthquake-globe",
       "component": "GeoCircle",
-      "path": "/example/GeoCircle/earthquake-globe",
+      "path": "/docs/components/GeoCircle/earthquake-globe",
       "lineNumber": 94,
       "line": "<Tooltip.Item label=\"Longitude\" value={data.longitude} format=\"decimal\" />"
     },
     {
       "example": "earthquake-globe",
       "component": "GeoCircle",
-      "path": "/example/GeoCircle/earthquake-globe",
+      "path": "/docs/components/GeoCircle/earthquake-globe",
       "lineNumber": 95,
       "line": "<Tooltip.Item label=\"Magnitude\" value={data.magnitude} format=\"decimal\" />"
     },
     {
       "example": "geojson-preview",
       "component": "GeoContext",
-      "path": "/example/GeoContext/geojson-preview",
-      "lineNumber": 126,
+      "path": "/docs/components/GeoContext/geojson-preview",
+      "lineNumber": 127,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "geojson-preview",
       "component": "GeoContext",
-      "path": "/example/GeoContext/geojson-preview",
-      "lineNumber": 128,
+      "path": "/docs/components/GeoContext/geojson-preview",
+      "lineNumber": 129,
       "line": "<Tooltip.List>"
     },
     {
       "example": "geojson-preview",
       "component": "GeoContext",
-      "path": "/example/GeoContext/geojson-preview",
-      "lineNumber": 130,
+      "path": "/docs/components/GeoContext/geojson-preview",
+      "lineNumber": 131,
       "line": "<Tooltip.Item label={key} {value} />"
     },
     {
       "example": "projection-playground",
       "component": "GeoContext",
-      "path": "/example/GeoContext/projection-playground",
+      "path": "/docs/components/GeoContext/projection-playground",
       "lineNumber": 87,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "topojson-preview",
       "component": "GeoContext",
-      "path": "/example/GeoContext/topojson-preview",
+      "path": "/docs/components/GeoContext/topojson-preview",
       "lineNumber": 134,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "topojson-preview",
       "component": "GeoContext",
-      "path": "/example/GeoContext/topojson-preview",
+      "path": "/docs/components/GeoContext/topojson-preview",
       "lineNumber": 136,
       "line": "<Tooltip.List>"
     },
     {
       "example": "topojson-preview",
       "component": "GeoContext",
-      "path": "/example/GeoContext/topojson-preview",
+      "path": "/docs/components/GeoContext/topojson-preview",
       "lineNumber": 138,
       "line": "<Tooltip.Item label={key} {value} />"
     },
     {
       "example": "animated-globe",
       "component": "GeoPath",
-      "path": "/example/GeoPath/animated-globe",
+      "path": "/docs/components/GeoPath/animated-globe",
       "lineNumber": 174,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "bubble-map",
       "component": "GeoPath",
-      "path": "/example/GeoPath/bubble-map",
+      "path": "/docs/components/GeoPath/bubble-map",
       "lineNumber": 138,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "bubble-map",
       "component": "GeoPath",
-      "path": "/example/GeoPath/bubble-map",
+      "path": "/docs/components/GeoPath/bubble-map",
       "lineNumber": 141,
       "line": "<Tooltip.Header>"
     },
     {
       "example": "bubble-map",
       "component": "GeoPath",
-      "path": "/example/GeoPath/bubble-map",
+      "path": "/docs/components/GeoPath/bubble-map",
       "lineNumber": 144,
       "line": "<Tooltip.List>"
     },
     {
       "example": "bubble-map",
       "component": "GeoPath",
-      "path": "/example/GeoPath/bubble-map",
+      "path": "/docs/components/GeoPath/bubble-map",
       "lineNumber": 145,
       "line": "<Tooltip.Item"
     },
     {
       "example": "bubble-map",
       "component": "GeoPath",
-      "path": "/example/GeoPath/bubble-map",
+      "path": "/docs/components/GeoPath/bubble-map",
       "lineNumber": 151,
       "line": "<Tooltip.Item"
     },
     {
       "example": "bubble-map",
       "component": "GeoPath",
-      "path": "/example/GeoPath/bubble-map",
+      "path": "/docs/components/GeoPath/bubble-map",
       "lineNumber": 157,
       "line": "<Tooltip.Item"
     },
     {
       "example": "choropleth",
       "component": "GeoPath",
-      "path": "/example/GeoPath/choropleth",
+      "path": "/docs/components/GeoPath/choropleth",
       "lineNumber": 106,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "choropleth",
       "component": "GeoPath",
-      "path": "/example/GeoPath/choropleth",
+      "path": "/docs/components/GeoPath/choropleth",
       "lineNumber": 109,
       "line": "<Tooltip.Header>"
     },
     {
       "example": "choropleth",
       "component": "GeoPath",
-      "path": "/example/GeoPath/choropleth",
+      "path": "/docs/components/GeoPath/choropleth",
       "lineNumber": 112,
       "line": "<Tooltip.List>"
     },
     {
       "example": "choropleth",
       "component": "GeoPath",
-      "path": "/example/GeoPath/choropleth",
+      "path": "/docs/components/GeoPath/choropleth",
       "lineNumber": 113,
       "line": "<Tooltip.Item"
     },
     {
       "example": "choropleth",
       "component": "GeoPath",
-      "path": "/example/GeoPath/choropleth",
+      "path": "/docs/components/GeoPath/choropleth",
       "lineNumber": 119,
       "line": "<Tooltip.Item"
     },
     {
       "example": "choropleth",
       "component": "GeoPath",
-      "path": "/example/GeoPath/choropleth",
+      "path": "/docs/components/GeoPath/choropleth",
       "lineNumber": 125,
       "line": "<Tooltip.Item"
     },
     {
       "example": "eclipses-globe",
       "component": "GeoPath",
-      "path": "/example/GeoPath/eclipses-globe",
+      "path": "/docs/components/GeoPath/eclipses-globe",
       "lineNumber": 99,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "spike-map",
       "component": "GeoPath",
-      "path": "/example/GeoPath/spike-map",
-      "lineNumber": 112,
+      "path": "/docs/components/GeoPath/spike-map",
+      "lineNumber": 113,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "spike-map",
       "component": "GeoPath",
-      "path": "/example/GeoPath/spike-map",
-      "lineNumber": 115,
+      "path": "/docs/components/GeoPath/spike-map",
+      "lineNumber": 116,
       "line": "<Tooltip.Header>{data.properties.name + ' - ' + data.properties.data?.state}</Tooltip.Header"
     },
     {
       "example": "spike-map",
       "component": "GeoPath",
-      "path": "/example/GeoPath/spike-map",
-      "lineNumber": 117,
+      "path": "/docs/components/GeoPath/spike-map",
+      "lineNumber": 118,
       "line": "<Tooltip.List>"
     },
     {
       "example": "spike-map",
       "component": "GeoPath",
-      "path": "/example/GeoPath/spike-map",
-      "lineNumber": 118,
+      "path": "/docs/components/GeoPath/spike-map",
+      "lineNumber": 119,
       "line": "<Tooltip.Item"
     },
     {
       "example": "spike-map",
       "component": "GeoPath",
-      "path": "/example/GeoPath/spike-map",
-      "lineNumber": 124,
+      "path": "/docs/components/GeoPath/spike-map",
+      "lineNumber": 125,
       "line": "<Tooltip.Item"
     },
     {
       "example": "spike-map",
       "component": "GeoPath",
-      "path": "/example/GeoPath/spike-map",
-      "lineNumber": 130,
+      "path": "/docs/components/GeoPath/spike-map",
+      "lineNumber": 131,
       "line": "<Tooltip.Item"
     },
     {
       "example": "submarine-cables-globe",
       "component": "GeoPath",
-      "path": "/example/GeoPath/submarine-cables-globe",
+      "path": "/docs/components/GeoPath/submarine-cables-globe",
       "lineNumber": 103,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "timezones",
       "component": "GeoPath",
-      "path": "/example/GeoPath/timezones",
+      "path": "/docs/components/GeoPath/timezones",
       "lineNumber": 140,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "timezones",
       "component": "GeoPath",
-      "path": "/example/GeoPath/timezones",
+      "path": "/docs/components/GeoPath/timezones",
       "lineNumber": 143,
       "line": "<Tooltip.List>"
     },
     {
       "example": "timezones",
       "component": "GeoPath",
-      "path": "/example/GeoPath/timezones",
+      "path": "/docs/components/GeoPath/timezones",
       "lineNumber": 144,
       "line": "<Tooltip.Item label=\"Name\" value={tz_name1st} />"
     },
     {
       "example": "timezones",
       "component": "GeoPath",
-      "path": "/example/GeoPath/timezones",
+      "path": "/docs/components/GeoPath/timezones",
       "lineNumber": 145,
       "line": "<Tooltip.Item label=\"Places\" value={places} classes={{ value: 'max-w-[200px]' }} />"
     },
     {
       "example": "timezones",
       "component": "GeoPath",
-      "path": "/example/GeoPath/timezones",
+      "path": "/docs/components/GeoPath/timezones",
       "lineNumber": 146,
       "line": "<Tooltip.Item label=\"Timezone\" value={time_zone} />"
     },
     {
       "example": "timezones",
       "component": "GeoPath",
-      "path": "/example/GeoPath/timezones",
+      "path": "/docs/components/GeoPath/timezones",
       "lineNumber": 147,
       "line": "<Tooltip.Item"
     },
     {
       "example": "tooltip",
       "component": "GeoPath",
-      "path": "/example/GeoPath/tooltip",
+      "path": "/docs/components/GeoPath/tooltip",
       "lineNumber": 47,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "tooltip",
       "component": "GeoPath",
-      "path": "/example/GeoPath/tooltip",
+      "path": "/docs/components/GeoPath/tooltip",
       "lineNumber": 51,
       "line": "<Tooltip.Header>{data.properties.name}</Tooltip.Header>"
     },
     {
       "example": "tooltip",
       "component": "GeoPath",
-      "path": "/example/GeoPath/tooltip",
+      "path": "/docs/components/GeoPath/tooltip",
       "lineNumber": 52,
       "line": "<Tooltip.List>"
     },
     {
       "example": "tooltip",
       "component": "GeoPath",
-      "path": "/example/GeoPath/tooltip",
+      "path": "/docs/components/GeoPath/tooltip",
       "lineNumber": 53,
       "line": "<Tooltip.Item label=\"longitude\" value={longitude} format=\"decimal\" />"
     },
     {
       "example": "tooltip",
       "component": "GeoPath",
-      "path": "/example/GeoPath/tooltip",
+      "path": "/docs/components/GeoPath/tooltip",
       "lineNumber": 54,
       "line": "<Tooltip.Item label=\"latitude\" value={latitude} format=\"decimal\" />"
     },
     {
       "example": "transform-canvas",
       "component": "GeoPath",
-      "path": "/example/GeoPath/transform-canvas",
+      "path": "/docs/components/GeoPath/transform-canvas",
       "lineNumber": 122,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "transform-canvas",
       "component": "GeoPath",
-      "path": "/example/GeoPath/transform-canvas",
+      "path": "/docs/components/GeoPath/transform-canvas",
       "lineNumber": 127,
       "line": "<Tooltip.Header>{data.properties.name}</Tooltip.Header>"
     },
     {
       "example": "transform-canvas",
       "component": "GeoPath",
-      "path": "/example/GeoPath/transform-canvas",
+      "path": "/docs/components/GeoPath/transform-canvas",
       "lineNumber": 128,
       "line": "<Tooltip.List>"
     },
     {
       "example": "transform-canvas",
       "component": "GeoPath",
-      "path": "/example/GeoPath/transform-canvas",
+      "path": "/docs/components/GeoPath/transform-canvas",
       "lineNumber": 129,
       "line": "<Tooltip.Item label=\"longitude\" value={longitude} format=\"decimal\" />"
     },
     {
       "example": "transform-canvas",
       "component": "GeoPath",
-      "path": "/example/GeoPath/transform-canvas",
+      "path": "/docs/components/GeoPath/transform-canvas",
       "lineNumber": 130,
       "line": "<Tooltip.Item label=\"latitude\" value={latitude} format=\"decimal\" />"
     },
     {
       "example": "transform-projection",
       "component": "GeoPath",
-      "path": "/example/GeoPath/transform-projection",
+      "path": "/docs/components/GeoPath/transform-projection",
       "lineNumber": 120,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "transform-projection",
       "component": "GeoPath",
-      "path": "/example/GeoPath/transform-projection",
+      "path": "/docs/components/GeoPath/transform-projection",
       "lineNumber": 124,
       "line": "<Tooltip.Header>{data.properties.name}</Tooltip.Header>"
     },
     {
       "example": "transform-projection",
       "component": "GeoPath",
-      "path": "/example/GeoPath/transform-projection",
+      "path": "/docs/components/GeoPath/transform-projection",
       "lineNumber": 125,
       "line": "<Tooltip.List>"
     },
     {
       "example": "transform-projection",
       "component": "GeoPath",
-      "path": "/example/GeoPath/transform-projection",
+      "path": "/docs/components/GeoPath/transform-projection",
       "lineNumber": 126,
       "line": "<Tooltip.Item label=\"longitude\" value={longitude} format=\"decimal\" />"
     },
     {
       "example": "transform-projection",
       "component": "GeoPath",
-      "path": "/example/GeoPath/transform-projection",
+      "path": "/docs/components/GeoPath/transform-projection",
       "lineNumber": 127,
       "line": "<Tooltip.Item label=\"latitude\" value={latitude} format=\"decimal\" />"
     },
     {
       "example": "translucent-globe",
       "component": "GeoPath",
-      "path": "/example/GeoPath/translucent-globe",
+      "path": "/docs/components/GeoPath/translucent-globe",
       "lineNumber": 85,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "us-state-with-counties",
       "component": "GeoPath",
-      "path": "/example/GeoPath/us-state-with-counties",
+      "path": "/docs/components/GeoPath/us-state-with-counties",
       "lineNumber": 63,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "us-state-with-surrounding-states",
       "component": "GeoPath",
-      "path": "/example/GeoPath/us-state-with-surrounding-states",
+      "path": "/docs/components/GeoPath/us-state-with-surrounding-states",
       "lineNumber": 68,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "icons",
       "component": "GeoPoint",
-      "path": "/example/GeoPoint/icons",
-      "lineNumber": 63,
+      "path": "/docs/components/GeoPoint/icons",
+      "lineNumber": 57,
       "line": "<Tooltip.Root {context}>"
     },
     {
       "example": "us-airports",
       "component": "GeoPoint",
-      "path": "/example/GeoPoint/us-airports",
+      "path": "/docs/components/GeoPoint/us-airports",
       "lineNumber": 69,
       "line": "<Tooltip.Root {context}>"
     },
     {
       "example": "us-airports",
       "component": "GeoPoint",
-      "path": "/example/GeoPoint/us-airports",
+      "path": "/docs/components/GeoPoint/us-airports",
       "lineNumber": 71,
       "line": "<Tooltip.Header>{data.name}</Tooltip.Header>"
     },
     {
       "example": "us-airports",
       "component": "GeoPoint",
-      "path": "/example/GeoPoint/us-airports",
+      "path": "/docs/components/GeoPoint/us-airports",
       "lineNumber": 72,
       "line": "<Tooltip.List>"
     },
     {
       "example": "us-airports",
       "component": "GeoPoint",
-      "path": "/example/GeoPoint/us-airports",
+      "path": "/docs/components/GeoPoint/us-airports",
       "lineNumber": 73,
       "line": "<Tooltip.Item label=\"Latitude\" value={data.latitude} format=\"decimal\" />"
     },
     {
       "example": "us-airports",
       "component": "GeoPoint",
-      "path": "/example/GeoPoint/us-airports",
+      "path": "/docs/components/GeoPoint/us-airports",
       "lineNumber": 74,
       "line": "<Tooltip.Item label=\"Longitude\" value={data.longitude} format=\"decimal\" />"
     },
     {
       "example": "world-airports",
       "component": "GeoPoint",
-      "path": "/example/GeoPoint/world-airports",
+      "path": "/docs/components/GeoPoint/world-airports",
       "lineNumber": 66,
       "line": "<Tooltip.Root {context}>"
     },
     {
       "example": "world-airports",
       "component": "GeoPoint",
-      "path": "/example/GeoPoint/world-airports",
+      "path": "/docs/components/GeoPoint/world-airports",
       "lineNumber": 68,
       "line": "<Tooltip.Header>{data.name}</Tooltip.Header>"
     },
     {
       "example": "world-airports",
       "component": "GeoPoint",
-      "path": "/example/GeoPoint/world-airports",
+      "path": "/docs/components/GeoPoint/world-airports",
       "lineNumber": 69,
       "line": "<Tooltip.List>"
     },
     {
       "example": "world-airports",
       "component": "GeoPoint",
-      "path": "/example/GeoPoint/world-airports",
+      "path": "/docs/components/GeoPoint/world-airports",
       "lineNumber": 70,
       "line": "<Tooltip.Item label=\"Latitude\" value={data.latitude} format=\"decimal\" />"
     },
     {
       "example": "world-airports",
       "component": "GeoPoint",
-      "path": "/example/GeoPoint/world-airports",
+      "path": "/docs/components/GeoPoint/world-airports",
       "lineNumber": 71,
       "line": "<Tooltip.Item label=\"Longitude\" value={data.longitude} format=\"decimal\" />"
     },
     {
       "example": "basic",
       "component": "GeoTile",
-      "path": "/example/GeoTile/basic",
-      "lineNumber": 55,
+      "path": "/docs/components/GeoTile/basic",
+      "lineNumber": 56,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "basic",
       "component": "GeoTile",
-      "path": "/example/GeoTile/basic",
-      "lineNumber": 59,
+      "path": "/docs/components/GeoTile/basic",
+      "lineNumber": 60,
       "line": "<Tooltip.Header>{data.properties.name}</Tooltip.Header>"
     },
     {
       "example": "basic",
       "component": "GeoTile",
-      "path": "/example/GeoTile/basic",
-      "lineNumber": 60,
+      "path": "/docs/components/GeoTile/basic",
+      "lineNumber": 61,
       "line": "<Tooltip.List>"
     },
     {
       "example": "basic",
       "component": "GeoTile",
-      "path": "/example/GeoTile/basic",
-      "lineNumber": 61,
+      "path": "/docs/components/GeoTile/basic",
+      "lineNumber": 62,
       "line": "<Tooltip.Item label=\"longitude\" value={longitude} format=\"decimal\" />"
     },
     {
       "example": "basic",
       "component": "GeoTile",
-      "path": "/example/GeoTile/basic",
-      "lineNumber": 62,
+      "path": "/docs/components/GeoTile/basic",
+      "lineNumber": 63,
       "line": "<Tooltip.Item label=\"latitude\" value={latitude} format=\"decimal\" />"
     },
     {
       "example": "clipped",
       "component": "GeoTile",
-      "path": "/example/GeoTile/clipped",
+      "path": "/docs/components/GeoTile/clipped",
       "lineNumber": 56,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "clipped",
       "component": "GeoTile",
-      "path": "/example/GeoTile/clipped",
+      "path": "/docs/components/GeoTile/clipped",
       "lineNumber": 60,
       "line": "<Tooltip.Header>{data.properties.name}</Tooltip.Header>"
     },
     {
       "example": "clipped",
       "component": "GeoTile",
-      "path": "/example/GeoTile/clipped",
+      "path": "/docs/components/GeoTile/clipped",
       "lineNumber": 61,
       "line": "<Tooltip.List>"
     },
     {
       "example": "clipped",
       "component": "GeoTile",
-      "path": "/example/GeoTile/clipped",
+      "path": "/docs/components/GeoTile/clipped",
       "lineNumber": 62,
       "line": "<Tooltip.Item label=\"longitude\" value={longitude} format=\"decimal\" />"
     },
     {
       "example": "clipped",
       "component": "GeoTile",
-      "path": "/example/GeoTile/clipped",
+      "path": "/docs/components/GeoTile/clipped",
       "lineNumber": 63,
       "line": "<Tooltip.Item label=\"latitude\" value={latitude} format=\"decimal\" />"
     },
     {
       "example": "zoomable",
       "component": "GeoTile",
-      "path": "/example/GeoTile/zoomable",
-      "lineNumber": 86,
+      "path": "/docs/components/GeoTile/zoomable",
+      "lineNumber": 87,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "zoomable",
       "component": "GeoTile",
-      "path": "/example/GeoTile/zoomable",
-      "lineNumber": 90,
+      "path": "/docs/components/GeoTile/zoomable",
+      "lineNumber": 91,
       "line": "<Tooltip.Header>{data.properties.name}</Tooltip.Header>"
     },
     {
       "example": "zoomable",
       "component": "GeoTile",
-      "path": "/example/GeoTile/zoomable",
-      "lineNumber": 91,
+      "path": "/docs/components/GeoTile/zoomable",
+      "lineNumber": 92,
       "line": "<Tooltip.List>"
     },
     {
       "example": "zoomable",
       "component": "GeoTile",
-      "path": "/example/GeoTile/zoomable",
-      "lineNumber": 92,
+      "path": "/docs/components/GeoTile/zoomable",
+      "lineNumber": 93,
       "line": "<Tooltip.Item label=\"longitude\" value={longitude} format=\"decimal\" />"
     },
     {
       "example": "zoomable",
       "component": "GeoTile",
-      "path": "/example/GeoTile/zoomable",
-      "lineNumber": 93,
+      "path": "/docs/components/GeoTile/zoomable",
+      "lineNumber": 94,
       "line": "<Tooltip.Item label=\"latitude\" value={latitude} format=\"decimal\" />"
     },
     {
       "example": "zoomable-seamless-layers",
       "component": "GeoTile",
-      "path": "/example/GeoTile/zoomable-seamless-layers",
-      "lineNumber": 90,
+      "path": "/docs/components/GeoTile/zoomable-seamless-layers",
+      "lineNumber": 91,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "zoomable-seamless-layers",
       "component": "GeoTile",
-      "path": "/example/GeoTile/zoomable-seamless-layers",
-      "lineNumber": 94,
+      "path": "/docs/components/GeoTile/zoomable-seamless-layers",
+      "lineNumber": 95,
       "line": "<Tooltip.Header>{data.properties.name}</Tooltip.Header>"
     },
     {
       "example": "zoomable-seamless-layers",
       "component": "GeoTile",
-      "path": "/example/GeoTile/zoomable-seamless-layers",
-      "lineNumber": 95,
+      "path": "/docs/components/GeoTile/zoomable-seamless-layers",
+      "lineNumber": 96,
       "line": "<Tooltip.List>"
     },
     {
       "example": "zoomable-seamless-layers",
       "component": "GeoTile",
-      "path": "/example/GeoTile/zoomable-seamless-layers",
-      "lineNumber": 96,
+      "path": "/docs/components/GeoTile/zoomable-seamless-layers",
+      "lineNumber": 97,
       "line": "<Tooltip.Item label=\"longitude\" value={longitude} format=\"decimal\" />"
     },
     {
       "example": "zoomable-seamless-layers",
       "component": "GeoTile",
-      "path": "/example/GeoTile/zoomable-seamless-layers",
-      "lineNumber": 97,
+      "path": "/docs/components/GeoTile/zoomable-seamless-layers",
+      "lineNumber": 98,
       "line": "<Tooltip.Item label=\"latitude\" value={latitude} format=\"decimal\" />"
     },
     {
       "example": "zoomable-with-padding",
       "component": "GeoTile",
-      "path": "/example/GeoTile/zoomable-with-padding",
+      "path": "/docs/components/GeoTile/zoomable-with-padding",
       "lineNumber": 93,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "zoomable-with-padding",
       "component": "GeoTile",
-      "path": "/example/GeoTile/zoomable-with-padding",
+      "path": "/docs/components/GeoTile/zoomable-with-padding",
       "lineNumber": 100,
       "line": "<Tooltip.Header>{data.properties.name}</Tooltip.Header>"
     },
     {
       "example": "zoomable-with-padding",
       "component": "GeoTile",
-      "path": "/example/GeoTile/zoomable-with-padding",
+      "path": "/docs/components/GeoTile/zoomable-with-padding",
       "lineNumber": 101,
       "line": "<Tooltip.List>"
     },
     {
       "example": "zoomable-with-padding",
       "component": "GeoTile",
-      "path": "/example/GeoTile/zoomable-with-padding",
+      "path": "/docs/components/GeoTile/zoomable-with-padding",
       "lineNumber": 102,
       "line": "<Tooltip.Item label=\"longitude\" value={longitude} format=\"decimal\" />"
     },
     {
       "example": "zoomable-with-padding",
       "component": "GeoTile",
-      "path": "/example/GeoTile/zoomable-with-padding",
+      "path": "/docs/components/GeoTile/zoomable-with-padding",
       "lineNumber": 103,
       "line": "<Tooltip.Item label=\"latitude\" value={latitude} format=\"decimal\" />"
     },
     {
       "example": "basic",
       "component": "Graticule",
-      "path": "/example/Graticule/basic",
+      "path": "/docs/components/Graticule/basic",
       "lineNumber": 70,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "custom",
       "component": "LineChart",
-      "path": "/example/LineChart/custom",
+      "path": "/docs/components/LineChart/custom",
       "lineNumber": 27,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "custom",
       "component": "LineChart",
-      "path": "/example/LineChart/custom",
+      "path": "/docs/components/LineChart/custom",
       "lineNumber": 29,
       "line": "<Tooltip.Header>{format(context.x(data), 'day')}</Tooltip.Header>"
     },
     {
       "example": "custom",
       "component": "LineChart",
-      "path": "/example/LineChart/custom",
+      "path": "/docs/components/LineChart/custom",
       "lineNumber": 30,
       "line": "<Tooltip.List>"
     },
     {
       "example": "custom",
       "component": "LineChart",
-      "path": "/example/LineChart/custom",
+      "path": "/docs/components/LineChart/custom",
       "lineNumber": 31,
       "line": "<Tooltip.Item label=\"value\" value={context.y(data)} />"
     },
     {
       "example": "custom-tooltip",
       "component": "LineChart",
-      "path": "/example/LineChart/custom-tooltip",
+      "path": "/docs/components/LineChart/custom-tooltip",
       "lineNumber": 12,
       "line": "<Tooltip.Root"
     },
     {
       "example": "custom-tooltip",
       "component": "LineChart",
-      "path": "/example/LineChart/custom-tooltip",
+      "path": "/docs/components/LineChart/custom-tooltip",
       "lineNumber": 25,
       "line": "<Tooltip.Root"
     },
     {
       "example": "gradient-encoding",
       "component": "LineChart",
-      "path": "/example/LineChart/gradient-encoding",
+      "path": "/docs/components/LineChart/gradient-encoding",
       "lineNumber": 33,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "gradient-encoding",
       "component": "LineChart",
-      "path": "/example/LineChart/gradient-encoding",
+      "path": "/docs/components/LineChart/gradient-encoding",
       "lineNumber": 36,
       "line": "<Tooltip.Header>{format(context.x(data))}</Tooltip.Header>"
     },
     {
       "example": "gradient-encoding",
       "component": "LineChart",
-      "path": "/example/LineChart/gradient-encoding",
+      "path": "/docs/components/LineChart/gradient-encoding",
       "lineNumber": 37,
       "line": "<Tooltip.List>"
     },
     {
       "example": "gradient-encoding",
       "component": "LineChart",
-      "path": "/example/LineChart/gradient-encoding",
+      "path": "/docs/components/LineChart/gradient-encoding",
       "lineNumber": 38,
       "line": "<Tooltip.Item label=\"value\" {value} color={temperatureColor(value)} />"
     },
     {
       "example": "gradient-threshold",
       "component": "LineChart",
-      "path": "/example/LineChart/gradient-threshold",
+      "path": "/docs/components/LineChart/gradient-threshold",
       "lineNumber": 40,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "gradient-threshold",
       "component": "LineChart",
-      "path": "/example/LineChart/gradient-threshold",
+      "path": "/docs/components/LineChart/gradient-threshold",
       "lineNumber": 43,
       "line": "<Tooltip.Header>{format(context.x(data))}</Tooltip.Header>"
     },
     {
       "example": "gradient-threshold",
       "component": "LineChart",
-      "path": "/example/LineChart/gradient-threshold",
+      "path": "/docs/components/LineChart/gradient-threshold",
       "lineNumber": 44,
       "line": "<Tooltip.List>"
     },
     {
       "example": "gradient-threshold",
       "component": "LineChart",
-      "path": "/example/LineChart/gradient-threshold",
+      "path": "/docs/components/LineChart/gradient-threshold",
       "lineNumber": 45,
       "line": "<Tooltip.Item"
     },
     {
       "example": "oscilloscope-time",
       "component": "LineChart",
-      "path": "/example/LineChart/oscilloscope-time",
+      "path": "/docs/components/LineChart/oscilloscope-time",
       "lineNumber": 118,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "oscilloscope-time",
       "component": "LineChart",
-      "path": "/example/LineChart/oscilloscope-time",
+      "path": "/docs/components/LineChart/oscilloscope-time",
       "lineNumber": 121,
       "line": "<Tooltip.Header>{format(context.x(data))}</Tooltip.Header>"
     },
     {
       "example": "oscilloscope-time",
       "component": "LineChart",
-      "path": "/example/LineChart/oscilloscope-time",
+      "path": "/docs/components/LineChart/oscilloscope-time",
       "lineNumber": 122,
       "line": "<Tooltip.List>"
     },
     {
       "example": "oscilloscope-time",
       "component": "LineChart",
-      "path": "/example/LineChart/oscilloscope-time",
+      "path": "/docs/components/LineChart/oscilloscope-time",
       "lineNumber": 123,
       "line": "<Tooltip.Item label=\"value\" {value} color={valueColor(value)} />"
     },
     {
       "example": "point-annotations",
       "component": "LineChart",
-      "path": "/example/LineChart/point-annotations",
+      "path": "/docs/components/LineChart/point-annotations",
       "lineNumber": 44,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "point-annotations",
       "component": "LineChart",
-      "path": "/example/LineChart/point-annotations",
+      "path": "/docs/components/LineChart/point-annotations",
       "lineNumber": 53,
       "line": "<Tooltip.Header>{format(context.x(data), 'day')}</Tooltip.Header>"
     },
     {
       "example": "point-annotations",
       "component": "LineChart",
-      "path": "/example/LineChart/point-annotations",
+      "path": "/docs/components/LineChart/point-annotations",
       "lineNumber": 54,
       "line": "<Tooltip.List>"
     },
     {
       "example": "point-annotations",
       "component": "LineChart",
-      "path": "/example/LineChart/point-annotations",
+      "path": "/docs/components/LineChart/point-annotations",
       "lineNumber": 55,
       "line": "<Tooltip.Item label=\"value\" value={context.y(data)} />"
     },
     {
       "example": "series-individual-tooltip",
       "component": "LineChart",
-      "path": "/example/LineChart/series-individual-tooltip",
+      "path": "/docs/components/LineChart/series-individual-tooltip",
       "lineNumber": 60,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "series-individual-tooltip",
       "component": "LineChart",
-      "path": "/example/LineChart/series-individual-tooltip",
+      "path": "/docs/components/LineChart/series-individual-tooltip",
       "lineNumber": 62,
       "line": "<Tooltip.Header>{format(context.x(data))}</Tooltip.Header>"
     },
     {
       "example": "series-individual-tooltip",
       "component": "LineChart",
-      "path": "/example/LineChart/series-individual-tooltip",
+      "path": "/docs/components/LineChart/series-individual-tooltip",
       "lineNumber": 63,
       "line": "<Tooltip.List>"
     },
     {
       "example": "series-individual-tooltip",
       "component": "LineChart",
-      "path": "/example/LineChart/series-individual-tooltip",
+      "path": "/docs/components/LineChart/series-individual-tooltip",
       "lineNumber": 64,
       "line": "<Tooltip.Item label={data.fruit} value={data.value} color={activeSeriesColor} />"
     },
     {
       "example": "sparkline-fixed-position-tooltip",
       "component": "LineChart",
-      "path": "/example/LineChart/sparkline-fixed-position-tooltip",
+      "path": "/docs/components/LineChart/sparkline-fixed-position-tooltip",
       "lineNumber": 24,
       "line": "<Tooltip.Root"
     },
     {
       "example": "sparkline-within-a-paragraph-with-tooltip-and-highlight",
       "component": "LineChart",
-      "path": "/example/LineChart/sparkline-within-a-paragraph-with-tooltip-and-highlight",
+      "path": "/docs/components/LineChart/sparkline-within-a-paragraph-with-tooltip-and-highlight",
       "lineNumber": 29,
       "line": "<Tooltip.Root {context} class=\"text-xs\" contained={false} y={context.height + 4} xOffset={0}>"
     },
     {
       "example": "sunburst",
       "component": "Partition",
-      "path": "/example/Partition/sunburst",
+      "path": "/docs/components/Partition/sunburst",
       "lineNumber": 102,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "sunburst",
       "component": "Partition",
-      "path": "/example/Partition/sunburst",
+      "path": "/docs/components/Partition/sunburst",
       "lineNumber": 104,
       "line": "<Tooltip.Header>{data.data.name}</Tooltip.Header>"
     },
     {
       "example": "sunburst",
       "component": "Partition",
-      "path": "/example/Partition/sunburst",
+      "path": "/docs/components/Partition/sunburst",
       "lineNumber": 105,
       "line": "<Tooltip.List>"
     },
     {
       "example": "sunburst",
       "component": "Partition",
-      "path": "/example/Partition/sunburst",
+      "path": "/docs/components/Partition/sunburst",
       "lineNumber": 106,
       "line": "<Tooltip.Item label=\"value\" value={data.value} format=\"integer\" />"
     },
     {
       "example": "tooltip",
       "component": "Pie",
-      "path": "/example/Pie/tooltip",
+      "path": "/docs/components/Pie/tooltip",
       "lineNumber": 24,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "tooltip",
       "component": "Pie",
-      "path": "/example/Pie/tooltip",
+      "path": "/docs/components/Pie/tooltip",
       "lineNumber": 26,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "tooltip",
       "component": "Pie",
-      "path": "/example/Pie/tooltip",
+      "path": "/docs/components/Pie/tooltip",
       "lineNumber": 27,
       "line": "<Tooltip.List>"
     },
     {
       "example": "tooltip",
       "component": "Pie",
-      "path": "/example/Pie/tooltip",
+      "path": "/docs/components/Pie/tooltip",
       "lineNumber": 28,
       "line": "<Tooltip.Item label=\"value\" value={data.value} format=\"integer\" valueAlign=\"right\" />"
     },
     {
       "example": "tooltip",
       "component": "Pie",
-      "path": "/example/Pie/tooltip",
+      "path": "/docs/components/Pie/tooltip",
       "lineNumber": 29,
       "line": "<Tooltip.Item"
     },
     {
       "example": "tooltip-with-arcs-slot",
       "component": "Pie",
-      "path": "/example/Pie/tooltip-with-arcs-slot",
+      "path": "/docs/components/Pie/tooltip-with-arcs-slot",
       "lineNumber": 69,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "tooltip-with-arcs-slot",
       "component": "Pie",
-      "path": "/example/Pie/tooltip-with-arcs-slot",
+      "path": "/docs/components/Pie/tooltip-with-arcs-slot",
       "lineNumber": 71,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "tooltip-with-arcs-slot",
       "component": "Pie",
-      "path": "/example/Pie/tooltip-with-arcs-slot",
+      "path": "/docs/components/Pie/tooltip-with-arcs-slot",
       "lineNumber": 72,
       "line": "<Tooltip.List>"
     },
     {
       "example": "tooltip-with-arcs-slot",
       "component": "Pie",
-      "path": "/example/Pie/tooltip-with-arcs-slot",
+      "path": "/docs/components/Pie/tooltip-with-arcs-slot",
       "lineNumber": 73,
       "line": "<Tooltip.Item label=\"value\" value={data.value} format=\"integer\" valueAlign=\"right\" />"
     },
     {
       "example": "tooltip-with-arcs-slot",
       "component": "Pie",
-      "path": "/example/Pie/tooltip-with-arcs-slot",
+      "path": "/docs/components/Pie/tooltip-with-arcs-slot",
       "lineNumber": 74,
       "line": "<Tooltip.Item"
     },
     {
       "example": "with-tooltip-and-highlight",
       "component": "Points",
-      "path": "/example/Points/with-tooltip-and-highlight",
+      "path": "/docs/components/Points/with-tooltip-and-highlight",
       "lineNumber": 27,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "with-tooltip-and-highlight",
       "component": "Points",
-      "path": "/example/Points/with-tooltip-and-highlight",
+      "path": "/docs/components/Points/with-tooltip-and-highlight",
       "lineNumber": 29,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "with-tooltip-and-highlight",
       "component": "Points",
-      "path": "/example/Points/with-tooltip-and-highlight",
+      "path": "/docs/components/Points/with-tooltip-and-highlight",
       "lineNumber": 30,
       "line": "<Tooltip.List>"
     },
     {
       "example": "with-tooltip-and-highlight",
       "component": "Points",
-      "path": "/example/Points/with-tooltip-and-highlight",
+      "path": "/docs/components/Points/with-tooltip-and-highlight",
       "lineNumber": 31,
       "line": "<Tooltip.Item label=\"value\" value={data.value} />"
     },
     {
       "example": "candlestick",
       "component": "Rule",
-      "path": "/example/Rule/candlestick",
+      "path": "/docs/components/Rule/candlestick",
       "lineNumber": 32,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "candlestick",
       "component": "Rule",
-      "path": "/example/Rule/candlestick",
+      "path": "/docs/components/Rule/candlestick",
       "lineNumber": 34,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "candlestick",
       "component": "Rule",
-      "path": "/example/Rule/candlestick",
+      "path": "/docs/components/Rule/candlestick",
       "lineNumber": 35,
       "line": "<Tooltip.List>"
     },
     {
       "example": "candlestick",
       "component": "Rule",
-      "path": "/example/Rule/candlestick",
+      "path": "/docs/components/Rule/candlestick",
       "lineNumber": 36,
       "line": "<Tooltip.Item label=\"Open\" value={data.open} format=\"decimal\" />"
     },
     {
       "example": "candlestick",
       "component": "Rule",
-      "path": "/example/Rule/candlestick",
+      "path": "/docs/components/Rule/candlestick",
       "lineNumber": 37,
       "line": "<Tooltip.Item label=\"Close\" value={data.close} format=\"decimal\" />"
     },
     {
       "example": "candlestick",
       "component": "Rule",
-      "path": "/example/Rule/candlestick",
+      "path": "/docs/components/Rule/candlestick",
       "lineNumber": 38,
       "line": "<Tooltip.Item label=\"High\" value={data.high} format=\"decimal\" />"
     },
     {
       "example": "candlestick",
       "component": "Rule",
-      "path": "/example/Rule/candlestick",
+      "path": "/docs/components/Rule/candlestick",
       "lineNumber": 39,
       "line": "<Tooltip.Item label=\"Low\" value={data.low} format=\"decimal\" />"
     },
     {
       "example": "candlestick-open-close-line-color",
       "component": "Rule",
-      "path": "/example/Rule/candlestick-open-close-line-color",
+      "path": "/docs/components/Rule/candlestick-open-close-line-color",
       "lineNumber": 32,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "candlestick-open-close-line-color",
       "component": "Rule",
-      "path": "/example/Rule/candlestick-open-close-line-color",
+      "path": "/docs/components/Rule/candlestick-open-close-line-color",
       "lineNumber": 34,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "candlestick-open-close-line-color",
       "component": "Rule",
-      "path": "/example/Rule/candlestick-open-close-line-color",
+      "path": "/docs/components/Rule/candlestick-open-close-line-color",
       "lineNumber": 35,
       "line": "<Tooltip.List>"
     },
     {
       "example": "candlestick-open-close-line-color",
       "component": "Rule",
-      "path": "/example/Rule/candlestick-open-close-line-color",
+      "path": "/docs/components/Rule/candlestick-open-close-line-color",
       "lineNumber": 36,
       "line": "<Tooltip.Item label=\"Open\" value={data.open} format=\"decimal\" />"
     },
     {
       "example": "candlestick-open-close-line-color",
       "component": "Rule",
-      "path": "/example/Rule/candlestick-open-close-line-color",
+      "path": "/docs/components/Rule/candlestick-open-close-line-color",
       "lineNumber": 37,
       "line": "<Tooltip.Item label=\"Close\" value={data.close} format=\"decimal\" />"
     },
     {
       "example": "candlestick-open-close-line-color",
       "component": "Rule",
-      "path": "/example/Rule/candlestick-open-close-line-color",
+      "path": "/docs/components/Rule/candlestick-open-close-line-color",
       "lineNumber": 38,
       "line": "<Tooltip.Item label=\"High\" value={data.high} format=\"decimal\" />"
     },
     {
       "example": "candlestick-open-close-line-color",
       "component": "Rule",
-      "path": "/example/Rule/candlestick-open-close-line-color",
+      "path": "/docs/components/Rule/candlestick-open-close-line-color",
       "lineNumber": 39,
       "line": "<Tooltip.Item label=\"Low\" value={data.low} format=\"decimal\" />"
     },
     {
       "example": "candlestick-with-brushing",
       "component": "Rule",
-      "path": "/example/Rule/candlestick-with-brushing",
+      "path": "/docs/components/Rule/candlestick-with-brushing",
       "lineNumber": 40,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "candlestick-with-brushing",
       "component": "Rule",
-      "path": "/example/Rule/candlestick-with-brushing",
+      "path": "/docs/components/Rule/candlestick-with-brushing",
       "lineNumber": 42,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "candlestick-with-brushing",
       "component": "Rule",
-      "path": "/example/Rule/candlestick-with-brushing",
+      "path": "/docs/components/Rule/candlestick-with-brushing",
       "lineNumber": 43,
       "line": "<Tooltip.List>"
     },
     {
       "example": "candlestick-with-brushing",
       "component": "Rule",
-      "path": "/example/Rule/candlestick-with-brushing",
+      "path": "/docs/components/Rule/candlestick-with-brushing",
       "lineNumber": 44,
       "line": "<Tooltip.Item label=\"Open\" value={data.open} format=\"decimal\" />"
     },
     {
       "example": "candlestick-with-brushing",
       "component": "Rule",
-      "path": "/example/Rule/candlestick-with-brushing",
+      "path": "/docs/components/Rule/candlestick-with-brushing",
       "lineNumber": 45,
       "line": "<Tooltip.Item label=\"Close\" value={data.close} format=\"decimal\" />"
     },
     {
       "example": "candlestick-with-brushing",
       "component": "Rule",
-      "path": "/example/Rule/candlestick-with-brushing",
+      "path": "/docs/components/Rule/candlestick-with-brushing",
       "lineNumber": 46,
       "line": "<Tooltip.Item label=\"High\" value={data.high} format=\"decimal\" />"
     },
     {
       "example": "candlestick-with-brushing",
       "component": "Rule",
-      "path": "/example/Rule/candlestick-with-brushing",
+      "path": "/docs/components/Rule/candlestick-with-brushing",
       "lineNumber": 47,
       "line": "<Tooltip.Item label=\"Low\" value={data.low} format=\"decimal\" />"
     },
     {
       "example": "lollipop",
       "component": "Rule",
-      "path": "/example/Rule/lollipop",
+      "path": "/docs/components/Rule/lollipop",
       "lineNumber": 29,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "lollipop",
       "component": "Rule",
-      "path": "/example/Rule/lollipop",
+      "path": "/docs/components/Rule/lollipop",
       "lineNumber": 31,
       "line": "<Tooltip.Header value={data.letter} />"
     },
     {
       "example": "lollipop",
       "component": "Rule",
-      "path": "/example/Rule/lollipop",
+      "path": "/docs/components/Rule/lollipop",
       "lineNumber": 32,
       "line": "<Tooltip.List>"
     },
     {
       "example": "lollipop",
       "component": "Rule",
-      "path": "/example/Rule/lollipop",
+      "path": "/docs/components/Rule/lollipop",
       "lineNumber": 33,
       "line": "<Tooltip.Item label=\"Frequency\" value={data.frequency} format=\"percent\" />"
     },
     {
       "example": "complex",
       "component": "Sankey",
-      "path": "/example/Sankey/complex",
+      "path": "/docs/components/Sankey/complex",
       "lineNumber": 122,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "complex",
       "component": "Sankey",
-      "path": "/example/Sankey/complex",
+      "path": "/docs/components/Sankey/complex",
       "lineNumber": 124,
       "line": "<Tooltip.Header>"
     },
     {
       "example": "complex",
       "component": "Sankey",
-      "path": "/example/Sankey/complex",
+      "path": "/docs/components/Sankey/complex",
       "lineNumber": 134,
       "line": "<Tooltip.List>"
     },
     {
       "example": "complex",
       "component": "Sankey",
-      "path": "/example/Sankey/complex",
+      "path": "/docs/components/Sankey/complex",
       "lineNumber": 136,
       "line": "<Tooltip.Item label=\"Total\" value={data.node.value} format=\"decimal\" />"
     },
     {
       "example": "complex",
       "component": "Sankey",
-      "path": "/example/Sankey/complex",
+      "path": "/docs/components/Sankey/complex",
       "lineNumber": 139,
       "line": "<Tooltip.Separator />"
     },
     {
       "example": "complex",
       "component": "Sankey",
-      "path": "/example/Sankey/complex",
+      "path": "/docs/components/Sankey/complex",
       "lineNumber": 142,
       "line": "<Tooltip.Item label={link.source.name} value={link.value} format=\"decimal\" />"
     },
     {
       "example": "complex",
       "component": "Sankey",
-      "path": "/example/Sankey/complex",
+      "path": "/docs/components/Sankey/complex",
       "lineNumber": 147,
       "line": "<Tooltip.Separator />"
     },
     {
       "example": "complex",
       "component": "Sankey",
-      "path": "/example/Sankey/complex",
+      "path": "/docs/components/Sankey/complex",
       "lineNumber": 150,
       "line": "<Tooltip.Item label={link.target.name} value={link.value} format=\"decimal\" />"
     },
     {
       "example": "complex",
       "component": "Sankey",
-      "path": "/example/Sankey/complex",
+      "path": "/docs/components/Sankey/complex",
       "lineNumber": 154,
       "line": "<Tooltip.Item label=\"Value\" value={data.link.value} format=\"decimal\" />"
     },
     {
       "example": "tooltip",
       "component": "Sankey",
-      "path": "/example/Sankey/tooltip",
+      "path": "/docs/components/Sankey/tooltip",
       "lineNumber": 52,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "tooltip",
       "component": "Sankey",
-      "path": "/example/Sankey/tooltip",
+      "path": "/docs/components/Sankey/tooltip",
       "lineNumber": 54,
       "line": "<Tooltip.Header>"
     },
     {
       "example": "tooltip",
       "component": "Sankey",
-      "path": "/example/Sankey/tooltip",
+      "path": "/docs/components/Sankey/tooltip",
       "lineNumber": 64,
       "line": "<Tooltip.List>"
     },
     {
       "example": "tooltip",
       "component": "Sankey",
-      "path": "/example/Sankey/tooltip",
+      "path": "/docs/components/Sankey/tooltip",
       "lineNumber": 66,
       "line": "<Tooltip.Item label=\"Total\" value={data.node.value} format=\"decimal\" />"
     },
     {
       "example": "tooltip",
       "component": "Sankey",
-      "path": "/example/Sankey/tooltip",
+      "path": "/docs/components/Sankey/tooltip",
       "lineNumber": 69,
       "line": "<Tooltip.Separator />"
     },
     {
       "example": "tooltip",
       "component": "Sankey",
-      "path": "/example/Sankey/tooltip",
+      "path": "/docs/components/Sankey/tooltip",
       "lineNumber": 72,
       "line": "<Tooltip.Item label={link.source.name} value={link.value} format=\"decimal\" />"
     },
     {
       "example": "tooltip",
       "component": "Sankey",
-      "path": "/example/Sankey/tooltip",
+      "path": "/docs/components/Sankey/tooltip",
       "lineNumber": 77,
       "line": "<Tooltip.Separator />"
     },
     {
       "example": "tooltip",
       "component": "Sankey",
-      "path": "/example/Sankey/tooltip",
+      "path": "/docs/components/Sankey/tooltip",
       "lineNumber": 80,
       "line": "<Tooltip.Item label={link.target.name} value={link.value} format=\"decimal\" />"
     },
     {
       "example": "tooltip",
       "component": "Sankey",
-      "path": "/example/Sankey/tooltip",
+      "path": "/docs/components/Sankey/tooltip",
       "lineNumber": 84,
       "line": "<Tooltip.Item label=\"Value\" value={data.link.value} format=\"decimal\" />"
     },
     {
       "example": "custom",
       "component": "ScatterChart",
-      "path": "/example/ScatterChart/custom",
+      "path": "/docs/components/ScatterChart/custom",
       "lineNumber": 19,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "custom",
       "component": "ScatterChart",
-      "path": "/example/ScatterChart/custom",
+      "path": "/docs/components/ScatterChart/custom",
       "lineNumber": 21,
       "line": "<Tooltip.Header>{format(context.x(data), 'integer')}</Tooltip.Header>"
     },
     {
       "example": "custom",
       "component": "ScatterChart",
-      "path": "/example/ScatterChart/custom",
+      "path": "/docs/components/ScatterChart/custom",
       "lineNumber": 22,
       "line": "<Tooltip.List>"
     },
     {
       "example": "custom",
       "component": "ScatterChart",
-      "path": "/example/ScatterChart/custom",
+      "path": "/docs/components/ScatterChart/custom",
       "lineNumber": 23,
       "line": "<Tooltip.Item label=\"value\" value={format(context.y(data), 'integer')} />"
     },
     {
       "example": "custom-tooltip",
       "component": "ScatterChart",
-      "path": "/example/ScatterChart/custom-tooltip",
+      "path": "/docs/components/ScatterChart/custom-tooltip",
       "lineNumber": 12,
       "line": "<Tooltip.Root"
     },
     {
       "example": "custom-tooltip",
       "component": "ScatterChart",
-      "path": "/example/ScatterChart/custom-tooltip",
+      "path": "/docs/components/ScatterChart/custom-tooltip",
       "lineNumber": 25,
       "line": "<Tooltip.Root"
     },
     {
       "example": "punchcard",
       "component": "ScatterChart",
-      "path": "/example/ScatterChart/punchcard",
+      "path": "/docs/components/ScatterChart/punchcard",
       "lineNumber": 39,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "punchcard",
       "component": "ScatterChart",
-      "path": "/example/ScatterChart/punchcard",
+      "path": "/docs/components/ScatterChart/punchcard",
       "lineNumber": 41,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "punchcard",
       "component": "ScatterChart",
-      "path": "/example/ScatterChart/punchcard",
+      "path": "/docs/components/ScatterChart/punchcard",
       "lineNumber": 42,
       "line": "<Tooltip.List>"
     },
     {
       "example": "punchcard",
       "component": "ScatterChart",
-      "path": "/example/ScatterChart/punchcard",
+      "path": "/docs/components/ScatterChart/punchcard",
       "lineNumber": 43,
       "line": "<Tooltip.Item label=\"value\" value={data.value} valueAlign=\"right\" />"
     },
     {
       "example": "single-dimension",
       "component": "ScatterChart",
-      "path": "/example/ScatterChart/single-dimension",
+      "path": "/docs/components/ScatterChart/single-dimension",
       "lineNumber": 25,
       "line": "<Tooltip.Root x=\"data\" y=\"data\" yOffset={12} anchor=\"top\">"
     },
     {
       "example": "multiple-series",
       "component": "Spline",
-      "path": "/example/Spline/multiple-series",
+      "path": "/docs/components/Spline/multiple-series",
       "lineNumber": 72,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "multiple-series",
       "component": "Spline",
-      "path": "/example/Spline/multiple-series",
+      "path": "/docs/components/Spline/multiple-series",
       "lineNumber": 74,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "multiple-series",
       "component": "Spline",
-      "path": "/example/Spline/multiple-series",
+      "path": "/docs/components/Spline/multiple-series",
       "lineNumber": 75,
       "line": "<Tooltip.List>"
     },
     {
       "example": "multiple-series",
       "component": "Spline",
-      "path": "/example/Spline/multiple-series",
+      "path": "/docs/components/Spline/multiple-series",
       "lineNumber": 76,
       "line": "<Tooltip.Item label={data.fruit} value={data.value} />"
     },
     {
       "example": "multiple-series-highlight-on-hover",
       "component": "Spline",
-      "path": "/example/Spline/multiple-series-highlight-on-hover",
+      "path": "/docs/components/Spline/multiple-series-highlight-on-hover",
       "lineNumber": 75,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "multiple-series-highlight-on-hover",
       "component": "Spline",
-      "path": "/example/Spline/multiple-series-highlight-on-hover",
+      "path": "/docs/components/Spline/multiple-series-highlight-on-hover",
       "lineNumber": 76,
       "line": "<Tooltip.Header value={context.tooltip.data.date} format=\"day\" />"
     },
     {
       "example": "multiple-series-highlight-on-hover",
       "component": "Spline",
-      "path": "/example/Spline/multiple-series-highlight-on-hover",
+      "path": "/docs/components/Spline/multiple-series-highlight-on-hover",
       "lineNumber": 77,
       "line": "<Tooltip.List>"
     },
     {
       "example": "multiple-series-highlight-on-hover",
       "component": "Spline",
-      "path": "/example/Spline/multiple-series-highlight-on-hover",
+      "path": "/docs/components/Spline/multiple-series-highlight-on-hover",
       "lineNumber": 78,
       "line": "<Tooltip.Item label={context.tooltip.data.fruit} value={context.tooltip.data.value} />"
     },
     {
       "example": "multiple-series-using-overrides",
       "component": "Spline",
-      "path": "/example/Spline/multiple-series-using-overrides",
+      "path": "/docs/components/Spline/multiple-series-using-overrides",
       "lineNumber": 38,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "multiple-series-using-overrides",
       "component": "Spline",
-      "path": "/example/Spline/multiple-series-using-overrides",
+      "path": "/docs/components/Spline/multiple-series-using-overrides",
       "lineNumber": 40,
       "line": "<Tooltip.List>"
     },
     {
       "example": "multiple-series-using-overrides",
       "component": "Spline",
-      "path": "/example/Spline/multiple-series-using-overrides",
+      "path": "/docs/components/Spline/multiple-series-using-overrides",
       "lineNumber": 41,
       "line": "<Tooltip.Item label=\"bananas\" value={data.y} />"
     },
     {
       "example": "multiple-series-using-overrides",
       "component": "Spline",
-      "path": "/example/Spline/multiple-series-using-overrides",
+      "path": "/docs/components/Spline/multiple-series-using-overrides",
       "lineNumber": 42,
       "line": "<Tooltip.Item label=\"oranges\" value={data.y1} />"
     },
     {
       "example": "multiple-series-with-labels",
       "component": "Spline",
-      "path": "/example/Spline/multiple-series-with-labels",
+      "path": "/docs/components/Spline/multiple-series-with-labels",
       "lineNumber": 50,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "multiple-series-with-labels",
       "component": "Spline",
-      "path": "/example/Spline/multiple-series-with-labels",
+      "path": "/docs/components/Spline/multiple-series-with-labels",
       "lineNumber": 52,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "multiple-series-with-labels",
       "component": "Spline",
-      "path": "/example/Spline/multiple-series-with-labels",
+      "path": "/docs/components/Spline/multiple-series-with-labels",
       "lineNumber": 53,
       "line": "<Tooltip.List>"
     },
     {
       "example": "multiple-series-with-labels",
       "component": "Spline",
-      "path": "/example/Spline/multiple-series-with-labels",
+      "path": "/docs/components/Spline/multiple-series-with-labels",
       "lineNumber": 54,
       "line": "<Tooltip.Item label={data.fruit} value={data.value} />"
     },
     {
       "example": "vertical",
       "component": "Spline",
-      "path": "/example/Spline/vertical",
+      "path": "/docs/components/Spline/vertical",
       "lineNumber": 28,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "vertical",
       "component": "Spline",
-      "path": "/example/Spline/vertical",
+      "path": "/docs/components/Spline/vertical",
       "lineNumber": 30,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "vertical",
       "component": "Spline",
-      "path": "/example/Spline/vertical",
+      "path": "/docs/components/Spline/vertical",
       "lineNumber": 31,
       "line": "<Tooltip.List>"
     },
     {
       "example": "vertical",
       "component": "Spline",
-      "path": "/example/Spline/vertical",
+      "path": "/docs/components/Spline/vertical",
       "lineNumber": 32,
       "line": "<Tooltip.Item label=\"value\" value={data.value} />"
     },
     {
       "example": "with-tooltip-and-highlight",
       "component": "Spline",
-      "path": "/example/Spline/with-tooltip-and-highlight",
+      "path": "/docs/components/Spline/with-tooltip-and-highlight",
       "lineNumber": 27,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "with-tooltip-and-highlight",
       "component": "Spline",
-      "path": "/example/Spline/with-tooltip-and-highlight",
+      "path": "/docs/components/Spline/with-tooltip-and-highlight",
       "lineNumber": 29,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "with-tooltip-and-highlight",
       "component": "Spline",
-      "path": "/example/Spline/with-tooltip-and-highlight",
+      "path": "/docs/components/Spline/with-tooltip-and-highlight",
       "lineNumber": 30,
       "line": "<Tooltip.List>"
     },
     {
       "example": "with-tooltip-and-highlight",
       "component": "Spline",
-      "path": "/example/Spline/with-tooltip-and-highlight",
+      "path": "/docs/components/Spline/with-tooltip-and-highlight",
       "lineNumber": 31,
       "line": "<Tooltip.Item label=\"value\" value={data.value} />"
     },
     {
       "example": "with-tooltip-and-highlight",
       "component": "Threshold",
-      "path": "/example/Threshold/with-tooltip-and-highlight",
+      "path": "/docs/components/Threshold/with-tooltip-and-highlight",
       "lineNumber": 51,
       "line": "<Tooltip.Root {context}>"
     },
     {
       "example": "with-tooltip-and-highlight",
       "component": "Threshold",
-      "path": "/example/Threshold/with-tooltip-and-highlight",
+      "path": "/docs/components/Threshold/with-tooltip-and-highlight",
       "lineNumber": 53,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "with-tooltip-and-highlight",
       "component": "Threshold",
-      "path": "/example/Threshold/with-tooltip-and-highlight",
+      "path": "/docs/components/Threshold/with-tooltip-and-highlight",
       "lineNumber": 54,
       "line": "<Tooltip.List>"
     },
     {
       "example": "with-tooltip-and-highlight",
       "component": "Threshold",
-      "path": "/example/Threshold/with-tooltip-and-highlight",
+      "path": "/docs/components/Threshold/with-tooltip-and-highlight",
       "lineNumber": 55,
       "line": "<Tooltip.Item label=\"value\" value={data.value} />"
     },
     {
       "example": "with-tooltip-and-highlight",
       "component": "Threshold",
-      "path": "/example/Threshold/with-tooltip-and-highlight",
+      "path": "/docs/components/Threshold/with-tooltip-and-highlight",
       "lineNumber": 56,
       "line": "<Tooltip.Item label=\"baseline\" value={data.baseline} />"
     },
     {
       "example": "with-tooltip-and-highlight",
       "component": "Threshold",
-      "path": "/example/Threshold/with-tooltip-and-highlight",
+      "path": "/docs/components/Threshold/with-tooltip-and-highlight",
       "lineNumber": 57,
       "line": "<Tooltip.Separator />"
     },
     {
       "example": "with-tooltip-and-highlight",
       "component": "Threshold",
-      "path": "/example/Threshold/with-tooltip-and-highlight",
+      "path": "/docs/components/Threshold/with-tooltip-and-highlight",
       "lineNumber": 58,
       "line": "<Tooltip.Item label=\"variance\" value={data.value - data.baseline} />"
     },
     {
       "example": "anchor-location",
       "component": "Tooltip",
-      "path": "/example/Tooltip/anchor-location",
+      "path": "/docs/components/Tooltip/anchor-location",
       "lineNumber": 42,
       "line": "<Tooltip.Root"
     },
     {
       "example": "anchor-location",
       "component": "Tooltip",
-      "path": "/example/Tooltip/anchor-location",
+      "path": "/docs/components/Tooltip/anchor-location",
       "lineNumber": 51,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "anchor-location",
       "component": "Tooltip",
-      "path": "/example/Tooltip/anchor-location",
+      "path": "/docs/components/Tooltip/anchor-location",
       "lineNumber": 52,
       "line": "<Tooltip.List>"
     },
     {
       "example": "anchor-location",
       "component": "Tooltip",
-      "path": "/example/Tooltip/anchor-location",
+      "path": "/docs/components/Tooltip/anchor-location",
       "lineNumber": 53,
       "line": "<Tooltip.Item label=\"value\" value={data.value} />"
     },
     {
       "example": "area",
       "component": "Tooltip",
-      "path": "/example/Tooltip/area",
+      "path": "/docs/components/Tooltip/area",
       "lineNumber": 50,
       "line": "<Tooltip.Root"
     },
     {
       "example": "area",
       "component": "Tooltip",
-      "path": "/example/Tooltip/area",
+      "path": "/docs/components/Tooltip/area",
       "lineNumber": 55,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "area",
       "component": "Tooltip",
-      "path": "/example/Tooltip/area",
+      "path": "/docs/components/Tooltip/area",
       "lineNumber": 56,
       "line": "<Tooltip.List>"
     },
     {
       "example": "area",
       "component": "Tooltip",
-      "path": "/example/Tooltip/area",
+      "path": "/docs/components/Tooltip/area",
       "lineNumber": 57,
       "line": "<Tooltip.Item label=\"value\" value={data.value} />"
     },
     {
       "example": "basic",
       "component": "Tooltip",
-      "path": "/example/Tooltip/basic",
+      "path": "/docs/components/Tooltip/basic",
       "lineNumber": 32,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "basic",
       "component": "Tooltip",
-      "path": "/example/Tooltip/basic",
+      "path": "/docs/components/Tooltip/basic",
       "lineNumber": 34,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "basic",
       "component": "Tooltip",
-      "path": "/example/Tooltip/basic",
+      "path": "/docs/components/Tooltip/basic",
       "lineNumber": 35,
       "line": "<Tooltip.List>"
     },
     {
       "example": "basic",
       "component": "Tooltip",
-      "path": "/example/Tooltip/basic",
+      "path": "/docs/components/Tooltip/basic",
       "lineNumber": 36,
       "line": "<Tooltip.Item label=\"value\" value={data.value} />"
     },
     {
       "example": "color-swatch",
       "component": "Tooltip",
-      "path": "/example/Tooltip/color-swatch",
+      "path": "/docs/components/Tooltip/color-swatch",
       "lineNumber": 32,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "color-swatch",
       "component": "Tooltip",
-      "path": "/example/Tooltip/color-swatch",
+      "path": "/docs/components/Tooltip/color-swatch",
       "lineNumber": 34,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "color-swatch",
       "component": "Tooltip",
-      "path": "/example/Tooltip/color-swatch",
+      "path": "/docs/components/Tooltip/color-swatch",
       "lineNumber": 35,
       "line": "<Tooltip.List>"
     },
     {
       "example": "color-swatch",
       "component": "Tooltip",
-      "path": "/example/Tooltip/color-swatch",
+      "path": "/docs/components/Tooltip/color-swatch",
       "lineNumber": 36,
       "line": "<Tooltip.Item label=\"value\" value={data.value} color=\"#f00\" />"
     },
     {
       "example": "color-swatch-using-theme",
       "component": "Tooltip",
-      "path": "/example/Tooltip/color-swatch-using-theme",
+      "path": "/docs/components/Tooltip/color-swatch-using-theme",
       "lineNumber": 32,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "color-swatch-using-theme",
       "component": "Tooltip",
-      "path": "/example/Tooltip/color-swatch-using-theme",
+      "path": "/docs/components/Tooltip/color-swatch-using-theme",
       "lineNumber": 34,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "color-swatch-using-theme",
       "component": "Tooltip",
-      "path": "/example/Tooltip/color-swatch-using-theme",
+      "path": "/docs/components/Tooltip/color-swatch-using-theme",
       "lineNumber": 35,
       "line": "<Tooltip.List>"
     },
     {
       "example": "color-swatch-using-theme",
       "component": "Tooltip",
-      "path": "/example/Tooltip/color-swatch-using-theme",
+      "path": "/docs/components/Tooltip/color-swatch-using-theme",
       "lineNumber": 36,
       "line": "<Tooltip.Item label=\"value\" value={data.value} color=\"var(--color-primary)\" />"
     },
     {
       "example": "custom-content",
       "component": "Tooltip",
-      "path": "/example/Tooltip/custom-content",
+      "path": "/docs/components/Tooltip/custom-content",
       "lineNumber": 32,
       "line": "<Tooltip.Root>Anything can go here test</Tooltip.Root>"
     },
     {
       "example": "data-snapping",
       "component": "Tooltip",
-      "path": "/example/Tooltip/data-snapping",
+      "path": "/docs/components/Tooltip/data-snapping",
       "lineNumber": 32,
       "line": "<Tooltip.Root x=\"data\" y=\"data\" xOffset={8} yOffset={8}>"
     },
     {
       "example": "data-snapping",
       "component": "Tooltip",
-      "path": "/example/Tooltip/data-snapping",
+      "path": "/docs/components/Tooltip/data-snapping",
       "lineNumber": 34,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "data-snapping",
       "component": "Tooltip",
-      "path": "/example/Tooltip/data-snapping",
+      "path": "/docs/components/Tooltip/data-snapping",
       "lineNumber": 35,
       "line": "<Tooltip.List>"
     },
     {
       "example": "data-snapping",
       "component": "Tooltip",
-      "path": "/example/Tooltip/data-snapping",
+      "path": "/docs/components/Tooltip/data-snapping",
       "lineNumber": 36,
       "line": "<Tooltip.Item label=\"value\" value={data.value} />"
     },
     {
       "example": "default-mouse-position-with-offset",
       "component": "Tooltip",
-      "path": "/example/Tooltip/default-mouse-position-with-offset",
+      "path": "/docs/components/Tooltip/default-mouse-position-with-offset",
       "lineNumber": 32,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "default-mouse-position-with-offset",
       "component": "Tooltip",
-      "path": "/example/Tooltip/default-mouse-position-with-offset",
+      "path": "/docs/components/Tooltip/default-mouse-position-with-offset",
       "lineNumber": 34,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "default-mouse-position-with-offset",
       "component": "Tooltip",
-      "path": "/example/Tooltip/default-mouse-position-with-offset",
+      "path": "/docs/components/Tooltip/default-mouse-position-with-offset",
       "lineNumber": 35,
       "line": "<Tooltip.List>"
     },
     {
       "example": "default-mouse-position-with-offset",
       "component": "Tooltip",
-      "path": "/example/Tooltip/default-mouse-position-with-offset",
+      "path": "/docs/components/Tooltip/default-mouse-position-with-offset",
       "lineNumber": 36,
       "line": "<Tooltip.Item label=\"value\" value={data.value} />"
     },
     {
       "example": "disable-motion",
       "component": "Tooltip",
-      "path": "/example/Tooltip/disable-motion",
+      "path": "/docs/components/Tooltip/disable-motion",
       "lineNumber": 32,
       "line": "<Tooltip.Root motion=\"none\">"
     },
     {
       "example": "disable-motion",
       "component": "Tooltip",
-      "path": "/example/Tooltip/disable-motion",
+      "path": "/docs/components/Tooltip/disable-motion",
       "lineNumber": 34,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "disable-motion",
       "component": "Tooltip",
-      "path": "/example/Tooltip/disable-motion",
+      "path": "/docs/components/Tooltip/disable-motion",
       "lineNumber": 35,
       "line": "<Tooltip.List>"
     },
     {
       "example": "disable-motion",
       "component": "Tooltip",
-      "path": "/example/Tooltip/disable-motion",
+      "path": "/docs/components/Tooltip/disable-motion",
       "lineNumber": 36,
       "line": "<Tooltip.Item label=\"value\" value={data.value} />"
     },
     {
       "example": "duration",
       "component": "Tooltip",
-      "path": "/example/Tooltip/duration",
+      "path": "/docs/components/Tooltip/duration",
       "lineNumber": 62,
       "line": "<Tooltip.Root"
     },
     {
       "example": "duration",
       "component": "Tooltip",
-      "path": "/example/Tooltip/duration",
+      "path": "/docs/components/Tooltip/duration",
       "lineNumber": 67,
       "line": "<Tooltip.Header>{data.name}</Tooltip.Header>"
     },
     {
       "example": "duration",
       "component": "Tooltip",
-      "path": "/example/Tooltip/duration",
+      "path": "/docs/components/Tooltip/duration",
       "lineNumber": 68,
       "line": "<Tooltip.List>"
     },
     {
       "example": "duration",
       "component": "Tooltip",
-      "path": "/example/Tooltip/duration",
+      "path": "/docs/components/Tooltip/duration",
       "lineNumber": 69,
       "line": "<Tooltip.Item"
     },
     {
       "example": "duration",
       "component": "Tooltip",
-      "path": "/example/Tooltip/duration",
+      "path": "/docs/components/Tooltip/duration",
       "lineNumber": 74,
       "line": "<Tooltip.Item"
     },
     {
       "example": "duration",
       "component": "Tooltip",
-      "path": "/example/Tooltip/duration",
+      "path": "/docs/components/Tooltip/duration",
       "lineNumber": 79,
       "line": "<Tooltip.Separator />"
     },
     {
       "example": "duration",
       "component": "Tooltip",
-      "path": "/example/Tooltip/duration",
+      "path": "/docs/components/Tooltip/duration",
       "lineNumber": 80,
       "line": "<Tooltip.Item label=\"duration\" valueAlign=\"right\">"
     },
     {
       "example": "externally-access-tooltip-data",
       "component": "Tooltip",
-      "path": "/example/Tooltip/externally-access-tooltip-data",
+      "path": "/docs/components/Tooltip/externally-access-tooltip-data",
       "lineNumber": 56,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "externally-access-tooltip-data",
       "component": "Tooltip",
-      "path": "/example/Tooltip/externally-access-tooltip-data",
+      "path": "/docs/components/Tooltip/externally-access-tooltip-data",
       "lineNumber": 58,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "externally-access-tooltip-data",
       "component": "Tooltip",
-      "path": "/example/Tooltip/externally-access-tooltip-data",
+      "path": "/docs/components/Tooltip/externally-access-tooltip-data",
       "lineNumber": 59,
       "line": "<Tooltip.List>"
     },
     {
       "example": "externally-access-tooltip-data",
       "component": "Tooltip",
-      "path": "/example/Tooltip/externally-access-tooltip-data",
+      "path": "/docs/components/Tooltip/externally-access-tooltip-data",
       "lineNumber": 60,
       "line": "<Tooltip.Item label=\"value\" value={data.value} />"
     },
     {
       "example": "invert-variant",
       "component": "Tooltip",
-      "path": "/example/Tooltip/invert-variant",
+      "path": "/docs/components/Tooltip/invert-variant",
       "lineNumber": 32,
       "line": "<Tooltip.Root variant=\"invert\">"
     },
     {
       "example": "invert-variant",
       "component": "Tooltip",
-      "path": "/example/Tooltip/invert-variant",
+      "path": "/docs/components/Tooltip/invert-variant",
       "lineNumber": 34,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "invert-variant",
       "component": "Tooltip",
-      "path": "/example/Tooltip/invert-variant",
+      "path": "/docs/components/Tooltip/invert-variant",
       "lineNumber": 35,
       "line": "<Tooltip.List>"
     },
     {
       "example": "invert-variant",
       "component": "Tooltip",
-      "path": "/example/Tooltip/invert-variant",
+      "path": "/docs/components/Tooltip/invert-variant",
       "lineNumber": 36,
       "line": "<Tooltip.Item label=\"value\" value={data.value} />"
     },
     {
       "example": "multiple-overlapping-bars",
       "component": "Tooltip",
-      "path": "/example/Tooltip/multiple-overlapping-bars",
+      "path": "/docs/components/Tooltip/multiple-overlapping-bars",
       "lineNumber": 60,
       "line": "<Tooltip.Root"
     },
     {
       "example": "multiple-overlapping-bars",
       "component": "Tooltip",
-      "path": "/example/Tooltip/multiple-overlapping-bars",
+      "path": "/docs/components/Tooltip/multiple-overlapping-bars",
       "lineNumber": 65,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "multiple-overlapping-bars",
       "component": "Tooltip",
-      "path": "/example/Tooltip/multiple-overlapping-bars",
+      "path": "/docs/components/Tooltip/multiple-overlapping-bars",
       "lineNumber": 66,
       "line": "<Tooltip.List>"
     },
     {
       "example": "multiple-overlapping-bars",
       "component": "Tooltip",
-      "path": "/example/Tooltip/multiple-overlapping-bars",
+      "path": "/docs/components/Tooltip/multiple-overlapping-bars",
       "lineNumber": 67,
       "line": "<Tooltip.Item label=\"value\" value={data.value} />"
     },
     {
       "example": "multiple-overlapping-bars",
       "component": "Tooltip",
-      "path": "/example/Tooltip/multiple-overlapping-bars",
+      "path": "/docs/components/Tooltip/multiple-overlapping-bars",
       "lineNumber": 68,
       "line": "<Tooltip.Item label=\"baseline\" value={data.baseline} />"
     },
     {
       "example": "multiple-overlapping-durations",
       "component": "Tooltip",
-      "path": "/example/Tooltip/multiple-overlapping-durations",
+      "path": "/docs/components/Tooltip/multiple-overlapping-durations",
       "lineNumber": 61,
       "line": "<Tooltip.Root"
     },
     {
       "example": "multiple-overlapping-durations",
       "component": "Tooltip",
-      "path": "/example/Tooltip/multiple-overlapping-durations",
+      "path": "/docs/components/Tooltip/multiple-overlapping-durations",
       "lineNumber": 66,
       "line": "<Tooltip.Header>{data.name}</Tooltip.Header>"
     },
     {
       "example": "multiple-overlapping-durations",
       "component": "Tooltip",
-      "path": "/example/Tooltip/multiple-overlapping-durations",
+      "path": "/docs/components/Tooltip/multiple-overlapping-durations",
       "lineNumber": 67,
       "line": "<Tooltip.List>"
     },
     {
       "example": "multiple-overlapping-durations",
       "component": "Tooltip",
-      "path": "/example/Tooltip/multiple-overlapping-durations",
+      "path": "/docs/components/Tooltip/multiple-overlapping-durations",
       "lineNumber": 68,
       "line": "<Tooltip.Item"
     },
     {
       "example": "multiple-overlapping-durations",
       "component": "Tooltip",
-      "path": "/example/Tooltip/multiple-overlapping-durations",
+      "path": "/docs/components/Tooltip/multiple-overlapping-durations",
       "lineNumber": 73,
       "line": "<Tooltip.Item"
     },
     {
       "example": "multiple-overlapping-durations",
       "component": "Tooltip",
-      "path": "/example/Tooltip/multiple-overlapping-durations",
+      "path": "/docs/components/Tooltip/multiple-overlapping-durations",
       "lineNumber": 78,
       "line": "<Tooltip.Separator />"
     },
     {
       "example": "multiple-overlapping-durations",
       "component": "Tooltip",
-      "path": "/example/Tooltip/multiple-overlapping-durations",
+      "path": "/docs/components/Tooltip/multiple-overlapping-durations",
       "lineNumber": 79,
       "line": "<Tooltip.Item label=\"duration\" valueAlign=\"right\">"
     },
     {
       "example": "multiple-tooltips-with-fixed-single-axis",
       "component": "Tooltip",
-      "path": "/example/Tooltip/multiple-tooltips-with-fixed-single-axis",
+      "path": "/docs/components/Tooltip/multiple-tooltips-with-fixed-single-axis",
       "lineNumber": 35,
       "line": "<Tooltip.Root"
     },
     {
       "example": "multiple-tooltips-with-fixed-single-axis",
       "component": "Tooltip",
-      "path": "/example/Tooltip/multiple-tooltips-with-fixed-single-axis",
+      "path": "/docs/components/Tooltip/multiple-tooltips-with-fixed-single-axis",
       "lineNumber": 48,
       "line": "<Tooltip.Root"
     },
     {
       "example": "multiple-tooltips-with-fixed-single-axis-scaleband",
       "component": "Tooltip",
-      "path": "/example/Tooltip/multiple-tooltips-with-fixed-single-axis-scaleband",
+      "path": "/docs/components/Tooltip/multiple-tooltips-with-fixed-single-axis-scaleband",
       "lineNumber": 38,
       "line": "<Tooltip.Root"
     },
     {
       "example": "multiple-tooltips-with-fixed-single-axis-scaleband",
       "component": "Tooltip",
-      "path": "/example/Tooltip/multiple-tooltips-with-fixed-single-axis-scaleband",
+      "path": "/docs/components/Tooltip/multiple-tooltips-with-fixed-single-axis-scaleband",
       "lineNumber": 52,
       "line": "<Tooltip.Root"
     },
     {
       "example": "scatter-plot",
       "component": "Tooltip",
-      "path": "/example/Tooltip/scatter-plot",
+      "path": "/docs/components/Tooltip/scatter-plot",
       "lineNumber": 47,
       "line": "<Tooltip.Root"
     },
     {
       "example": "scatter-plot",
       "component": "Tooltip",
-      "path": "/example/Tooltip/scatter-plot",
+      "path": "/docs/components/Tooltip/scatter-plot",
       "lineNumber": 52,
       "line": "<Tooltip.List>"
     },
     {
       "example": "scatter-plot",
       "component": "Tooltip",
-      "path": "/example/Tooltip/scatter-plot",
+      "path": "/docs/components/Tooltip/scatter-plot",
       "lineNumber": 53,
       "line": "<Tooltip.Item label=\"x\" value={data.x} format=\"decimal\" />"
     },
     {
       "example": "scatter-plot",
       "component": "Tooltip",
-      "path": "/example/Tooltip/scatter-plot",
+      "path": "/docs/components/Tooltip/scatter-plot",
       "lineNumber": 54,
       "line": "<Tooltip.Item label=\"y\" value={data.y} format=\"decimal\" />"
     },
     {
       "example": "simple-bars",
       "component": "Tooltip",
-      "path": "/example/Tooltip/simple-bars",
+      "path": "/docs/components/Tooltip/simple-bars",
       "lineNumber": 55,
       "line": "<Tooltip.Root"
     },
     {
       "example": "simple-bars",
       "component": "Tooltip",
-      "path": "/example/Tooltip/simple-bars",
+      "path": "/docs/components/Tooltip/simple-bars",
       "lineNumber": 60,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "simple-bars",
       "component": "Tooltip",
-      "path": "/example/Tooltip/simple-bars",
+      "path": "/docs/components/Tooltip/simple-bars",
       "lineNumber": 61,
       "line": "<Tooltip.List>"
     },
     {
       "example": "simple-bars",
       "component": "Tooltip",
-      "path": "/example/Tooltip/simple-bars",
+      "path": "/docs/components/Tooltip/simple-bars",
       "lineNumber": 62,
       "line": "<Tooltip.Item label=\"value\" value={data.value} />"
     },
     {
       "example": "single-date-time",
       "component": "Tooltip",
-      "path": "/example/Tooltip/single-date-time",
+      "path": "/docs/components/Tooltip/single-date-time",
       "lineNumber": 50,
       "line": "<Tooltip.Root"
     },
     {
       "example": "single-date-time",
       "component": "Tooltip",
-      "path": "/example/Tooltip/single-date-time",
+      "path": "/docs/components/Tooltip/single-date-time",
       "lineNumber": 55,
       "line": "<Tooltip.Header>{data.name}</Tooltip.Header>"
     },
     {
       "example": "single-date-time",
       "component": "Tooltip",
-      "path": "/example/Tooltip/single-date-time",
+      "path": "/docs/components/Tooltip/single-date-time",
       "lineNumber": 56,
       "line": "<Tooltip.List>"
     },
     {
       "example": "single-date-time",
       "component": "Tooltip",
-      "path": "/example/Tooltip/single-date-time",
+      "path": "/docs/components/Tooltip/single-date-time",
       "lineNumber": 57,
       "line": "<Tooltip.Item"
     },
     {
       "example": "stacked-area",
       "component": "Tooltip",
-      "path": "/example/Tooltip/stacked-area",
+      "path": "/docs/components/Tooltip/stacked-area",
       "lineNumber": 78,
       "line": "<Tooltip.Root"
     },
     {
       "example": "stacked-area",
       "component": "Tooltip",
-      "path": "/example/Tooltip/stacked-area",
+      "path": "/docs/components/Tooltip/stacked-area",
       "lineNumber": 83,
       "line": "<Tooltip.Header value={data.data.date} format=\"day\" />"
     },
     {
       "example": "stacked-area",
       "component": "Tooltip",
-      "path": "/example/Tooltip/stacked-area",
+      "path": "/docs/components/Tooltip/stacked-area",
       "lineNumber": 84,
       "line": "<Tooltip.List>"
     },
     {
       "example": "stacked-area",
       "component": "Tooltip",
-      "path": "/example/Tooltip/stacked-area",
+      "path": "/docs/components/Tooltip/stacked-area",
       "lineNumber": 86,
       "line": "<Tooltip.Item label={key} value={data.data[key]} />"
     },
     {
       "example": "complex",
       "component": "Treemap",
-      "path": "/example/Treemap/complex",
+      "path": "/docs/components/Treemap/complex",
       "lineNumber": 143,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "complex",
       "component": "Treemap",
-      "path": "/example/Treemap/complex",
+      "path": "/docs/components/Treemap/complex",
       "lineNumber": 145,
       "line": "<Tooltip.Header>{data.data.name}</Tooltip.Header>"
     },
     {
       "example": "complex",
       "component": "Treemap",
-      "path": "/example/Treemap/complex",
+      "path": "/docs/components/Treemap/complex",
       "lineNumber": 146,
       "line": "<Tooltip.List>"
     },
     {
       "example": "complex",
       "component": "Treemap",
-      "path": "/example/Treemap/complex",
+      "path": "/docs/components/Treemap/complex",
       "lineNumber": 147,
       "line": "<Tooltip.Item label=\"value\" value={data.value} format=\"integer\" />"
     },
     {
       "example": "nested-zoom",
       "component": "Treemap",
-      "path": "/example/Treemap/nested-zoom",
+      "path": "/docs/components/Treemap/nested-zoom",
       "lineNumber": 164,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "nested-zoom",
       "component": "Treemap",
-      "path": "/example/Treemap/nested-zoom",
+      "path": "/docs/components/Treemap/nested-zoom",
       "lineNumber": 166,
       "line": "<Tooltip.Header>{data.data.name}</Tooltip.Header>"
     },
     {
       "example": "nested-zoom",
       "component": "Treemap",
-      "path": "/example/Treemap/nested-zoom",
+      "path": "/docs/components/Treemap/nested-zoom",
       "lineNumber": 167,
       "line": "<Tooltip.List>"
     },
     {
       "example": "nested-zoom",
       "component": "Treemap",
-      "path": "/example/Treemap/nested-zoom",
+      "path": "/docs/components/Treemap/nested-zoom",
       "lineNumber": 168,
       "line": "<Tooltip.Item label=\"value\" value={data.value} format=\"integer\" />"
     },
     {
       "example": "playground",
       "component": "Treemap",
-      "path": "/example/Treemap/playground",
+      "path": "/docs/components/Treemap/playground",
       "lineNumber": 189,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "playground",
       "component": "Treemap",
-      "path": "/example/Treemap/playground",
+      "path": "/docs/components/Treemap/playground",
       "lineNumber": 191,
       "line": "<Tooltip.Header>{data.data.name}</Tooltip.Header>"
     },
     {
       "example": "playground",
       "component": "Treemap",
-      "path": "/example/Treemap/playground",
+      "path": "/docs/components/Treemap/playground",
       "lineNumber": 192,
       "line": "<Tooltip.List>"
     },
     {
       "example": "playground",
       "component": "Treemap",
-      "path": "/example/Treemap/playground",
+      "path": "/docs/components/Treemap/playground",
       "lineNumber": 193,
       "line": "<Tooltip.Item label=\"value\" value={data.value} format=\"integer\" />"
     }
   ],
-  "updatedAt": "2026-01-13T17:22:24.408Z"
+  "updatedAt": "2026-02-07T20:21:32.401Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/TransformContext.json b/docs/src/examples/catalog/TransformContext.json
index f0b00ec83..8080c3db4 100644
--- a/docs/src/examples/catalog/TransformContext.json
+++ b/docs/src/examples/catalog/TransformContext.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "pan-zoom-html-image",
-      "path": "/example/TransformContext/pan-zoom-html-image",
+      "title": "pan zoom html image",
+      "path": "/docs/components/TransformContext/pan-zoom-html-image",
       "components": [
         {
           "component": "Chart",
@@ -12,14 +13,15 @@
         },
         {
           "component": "Layer",
-          "lineNumber": 17,
+          "lineNumber": 18,
           "line": "<Layer type=\"html\">"
         }
       ]
     },
     {
       "name": "pan-zoom-svg-image",
-      "path": "/example/TransformContext/pan-zoom-svg-image",
+      "title": "pan zoom svg image",
+      "path": "/docs/components/TransformContext/pan-zoom-svg-image",
       "components": [
         {
           "component": "Chart",
@@ -28,19 +30,20 @@
         },
         {
           "component": "TransformControls",
-          "lineNumber": 15,
+          "lineNumber": 16,
           "line": "<TransformControls />"
         },
         {
           "component": "Layer",
-          "lineNumber": 17,
+          "lineNumber": 18,
           "line": "<Layer type=\"svg\">"
         }
       ]
     },
     {
       "name": "playground",
-      "path": "/example/TransformContext/playground",
+      "title": "playground",
+      "path": "/docs/components/TransformContext/playground",
       "components": [
         {
           "component": "Chart",
@@ -49,27 +52,27 @@
         },
         {
           "component": "Layer",
-          "lineNumber": 49,
-          "line": "<Layer class=\"overflow-hidden\">"
+          "lineNumber": 50,
+          "line": "<Layer>"
         },
         {
           "component": "Spline",
-          "lineNumber": 51,
+          "lineNumber": 52,
           "line": "<Spline curve={config.curve} motion=\"tween\" />"
         },
         {
           "component": "Points",
-          "lineNumber": 54,
+          "lineNumber": 55,
           "line": "<Points>"
         },
         {
           "component": "Circle",
-          "lineNumber": 57,
+          "lineNumber": 58,
           "line": "<Circle"
         }
       ]
     }
   ],
   "usage": [],
-  "updatedAt": "2025-11-23T01:49:03.006Z"
+  "updatedAt": "2026-02-07T20:21:32.483Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/TransformControls.json b/docs/src/examples/catalog/TransformControls.json
index e0269af32..cfba37eae 100644
--- a/docs/src/examples/catalog/TransformControls.json
+++ b/docs/src/examples/catalog/TransformControls.json
@@ -5,38 +5,38 @@
     {
       "example": "geojson-preview",
       "component": "GeoContext",
-      "path": "/example/GeoContext/geojson-preview",
-      "lineNumber": 111,
+      "path": "/docs/components/GeoContext/geojson-preview",
+      "lineNumber": 112,
       "line": "<TransformControls />"
     },
     {
       "example": "topojson-preview",
       "component": "GeoContext",
-      "path": "/example/GeoContext/topojson-preview",
+      "path": "/docs/components/GeoContext/topojson-preview",
       "lineNumber": 119,
       "line": "<TransformControls />"
     },
     {
       "example": "zoomable",
       "component": "GeoTile",
-      "path": "/example/GeoTile/zoomable",
-      "lineNumber": 62,
+      "path": "/docs/components/GeoTile/zoomable",
+      "lineNumber": 63,
       "line": "<TransformControls />"
     },
     {
       "example": "zoomable-with-padding",
       "component": "GeoTile",
-      "path": "/example/GeoTile/zoomable-with-padding",
+      "path": "/docs/components/GeoTile/zoomable-with-padding",
       "lineNumber": 69,
       "line": "<TransformControls />"
     },
     {
       "example": "pan-zoom-svg-image",
       "component": "TransformContext",
-      "path": "/example/TransformContext/pan-zoom-svg-image",
-      "lineNumber": 15,
+      "path": "/docs/components/TransformContext/pan-zoom-svg-image",
+      "lineNumber": 16,
       "line": "<TransformControls />"
     }
   ],
-  "updatedAt": "2025-11-24T01:39:38.757Z"
+  "updatedAt": "2026-02-07T17:00:32.859Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Tree.json b/docs/src/examples/catalog/Tree.json
index 12cc69418..77068b851 100644
--- a/docs/src/examples/catalog/Tree.json
+++ b/docs/src/examples/catalog/Tree.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "basic",
-      "path": "/example/Tree/basic",
+      "title": "basic",
+      "path": "/docs/components/Tree/basic",
       "components": [
         {
           "component": "Chart",
@@ -12,39 +13,40 @@
         },
         {
           "component": "Tree",
-          "lineNumber": 63,
+          "lineNumber": 64,
           "line": "<Tree"
         },
         {
           "component": "Layer",
-          "lineNumber": 69,
+          "lineNumber": 70,
           "line": "<Layer>"
         },
         {
           "component": "Link",
-          "lineNumber": 71,
+          "lineNumber": 72,
           "line": "<Link"
         },
         {
           "component": "Group",
-          "lineNumber": 84,
+          "lineNumber": 85,
           "line": "<Group"
         },
         {
           "component": "Rect",
-          "lineNumber": 103,
+          "lineNumber": 104,
           "line": "<Rect"
         },
         {
           "component": "Text",
-          "lineNumber": 114,
+          "lineNumber": 115,
           "line": "<Text"
         }
       ]
     },
     {
       "name": "html-nodes",
-      "path": "/example/Tree/html-nodes",
+      "title": "html nodes",
+      "path": "/docs/components/Tree/html-nodes",
       "components": [
         {
           "component": "Chart",
@@ -53,22 +55,22 @@
         },
         {
           "component": "Tree",
-          "lineNumber": 63,
+          "lineNumber": 64,
           "line": "<Tree"
         },
         {
           "component": "Layer",
-          "lineNumber": 69,
+          "lineNumber": 70,
           "line": "<Layer>"
         },
         {
           "component": "Link",
-          "lineNumber": 71,
+          "lineNumber": 72,
           "line": "<Link"
         },
         {
           "component": "Group",
-          "lineNumber": 88,
+          "lineNumber": 89,
           "line": "<Group"
         }
       ]
@@ -78,17 +80,17 @@
     {
       "example": "basic",
       "component": "Tree",
-      "path": "/example/Tree/basic",
-      "lineNumber": 63,
+      "path": "/docs/components/Tree/basic",
+      "lineNumber": 64,
       "line": "<Tree"
     },
     {
       "example": "html-nodes",
       "component": "Tree",
-      "path": "/example/Tree/html-nodes",
-      "lineNumber": 63,
+      "path": "/docs/components/Tree/html-nodes",
+      "lineNumber": 64,
       "line": "<Tree"
     }
   ],
-  "updatedAt": "2025-11-23T01:49:03.037Z"
+  "updatedAt": "2026-02-07T20:21:32.511Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Treemap.json b/docs/src/examples/catalog/Treemap.json
index 95a67249e..325b2b184 100644
--- a/docs/src/examples/catalog/Treemap.json
+++ b/docs/src/examples/catalog/Treemap.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "basic",
-      "path": "/example/Treemap/basic",
+      "title": "basic",
+      "path": "/docs/components/Treemap/basic",
       "components": [
         {
           "component": "Chart",
@@ -39,7 +40,8 @@
     },
     {
       "name": "complex",
-      "path": "/example/Treemap/complex",
+      "title": "complex",
+      "path": "/docs/components/Treemap/complex",
       "components": [
         {
           "component": "Chart",
@@ -85,7 +87,8 @@
     },
     {
       "name": "nested-filter",
-      "path": "/example/Treemap/nested-filter",
+      "title": "nested filter",
+      "path": "/docs/components/Treemap/nested-filter",
       "components": [
         {
           "component": "Chart",
@@ -126,7 +129,8 @@
     },
     {
       "name": "nested-zoom",
-      "path": "/example/Treemap/nested-zoom",
+      "title": "nested zoom",
+      "path": "/docs/components/Treemap/nested-zoom",
       "components": [
         {
           "component": "Chart",
@@ -182,7 +186,8 @@
     },
     {
       "name": "playground",
-      "path": "/example/Treemap/playground",
+      "title": "playground",
+      "path": "/docs/components/Treemap/playground",
       "components": [
         {
           "component": "Chart",
@@ -228,7 +233,8 @@
     },
     {
       "name": "stacked-zoom",
-      "path": "/example/Treemap/stacked-zoom",
+      "title": "stacked zoom",
+      "path": "/docs/components/Treemap/stacked-zoom",
       "components": [
         {
           "component": "Chart",
@@ -282,45 +288,45 @@
     {
       "example": "basic",
       "component": "Treemap",
-      "path": "/example/Treemap/basic",
+      "path": "/docs/components/Treemap/basic",
       "lineNumber": 36,
       "line": "<Treemap hierarchy={data}>"
     },
     {
       "example": "complex",
       "component": "Treemap",
-      "path": "/example/Treemap/complex",
+      "path": "/docs/components/Treemap/complex",
       "lineNumber": 74,
       "line": "<Treemap"
     },
     {
       "example": "nested-filter",
       "component": "Treemap",
-      "path": "/example/Treemap/nested-filter",
+      "path": "/docs/components/Treemap/nested-filter",
       "lineNumber": 114,
       "line": "<Treemap"
     },
     {
       "example": "nested-zoom",
       "component": "Treemap",
-      "path": "/example/Treemap/nested-zoom",
+      "path": "/docs/components/Treemap/nested-zoom",
       "lineNumber": 90,
       "line": "<Treemap"
     },
     {
       "example": "playground",
       "component": "Treemap",
-      "path": "/example/Treemap/playground",
+      "path": "/docs/components/Treemap/playground",
       "lineNumber": 120,
       "line": "<Treemap"
     },
     {
       "example": "stacked-zoom",
       "component": "Treemap",
-      "path": "/example/Treemap/stacked-zoom",
+      "path": "/docs/components/Treemap/stacked-zoom",
       "lineNumber": 88,
       "line": "<Treemap {hierarchy} tile={config.tile} maintainAspectRatio={config.maintainAspectRatio}>"
     }
   ],
-  "updatedAt": "2025-11-23T01:49:03.055Z"
+  "updatedAt": "2026-02-07T20:21:32.528Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Voronoi.json b/docs/src/examples/catalog/Voronoi.json
index 656942f55..990a99022 100644
--- a/docs/src/examples/catalog/Voronoi.json
+++ b/docs/src/examples/catalog/Voronoi.json
@@ -3,7 +3,8 @@
   "examples": [
     {
       "name": "radius",
-      "path": "/example/Voronoi/radius",
+      "title": "radius",
+      "path": "/docs/components/Voronoi/radius",
       "components": [
         {
           "component": "Chart",
@@ -42,10 +43,10 @@
     {
       "example": "radius",
       "component": "Voronoi",
-      "path": "/example/Voronoi/radius",
+      "path": "/docs/components/Voronoi/radius",
       "lineNumber": 27,
       "line": "<Voronoi"
     }
   ],
-  "updatedAt": "2025-11-23T01:49:03.071Z"
+  "updatedAt": "2026-02-07T20:21:32.545Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/types.ts b/docs/src/examples/catalog/types.ts
index b6094a6b9..e6ee63d31 100644
--- a/docs/src/examples/catalog/types.ts
+++ b/docs/src/examples/catalog/types.ts
@@ -23,6 +23,8 @@ export interface ComponentUsageInExample {
 export interface ExampleInfo {
 	/** The name of the example (filename without .svelte extension) */
 	name: string;
+	/** Human-readable title (name with hyphens replaced by spaces) */
+	title: string;
 	/** The URL path to view the example */
 	path: string;
 	/** All components used in this example */
diff --git a/docs/src/lib/markdown/utils.ts b/docs/src/lib/markdown/utils.ts
index cd4402087..1a900e49d 100644
--- a/docs/src/lib/markdown/utils.ts
+++ b/docs/src/lib/markdown/utils.ts
@@ -4,7 +4,6 @@ import { error } from '@sveltejs/kit';
 import {
 	allComponents,
 	type Component as ComponentMetadata,
-	type Example as ExampleMetadata,
 	allUtils,
 	type Util as UtilMetadata,
 	allGuides,
@@ -14,6 +13,43 @@ import {
 import type { Examples } from '$lib/types.js';
 import { loadExample, loadExampleByPath } from '$lib/examples.js';
 
+/**
+ * Strip markdown syntax to get plain text.
+ * Useful for search indexing or generating plain text excerpts.
+ */
+export function stripMarkdown(content: string): string {
+	return (
+		content
+			// Remove code blocks
+			.replace(/```[\s\S]*?```/g, '')
+			// Remove inline code
+			.replace(/`[^`]+`/g, '')
+			// Remove links but keep text
+			.replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
+			// Remove images
+			.replace(/!\[([^\]]*)\]\([^)]+\)/g, '')
+			// Remove HTML tags
+			.replace(/<[^>]+>/g, '')
+			// Remove headings markup
+			.replace(/^#{1,6}\s+/gm, '')
+			// Remove bold/italic
+			.replace(/\*{1,2}([^*]+)\*{1,2}/g, '$1')
+			.replace(/_{1,2}([^_]+)_{1,2}/g, '$1')
+			// Remove blockquotes
+			.replace(/^>\s+/gm, '')
+			// Remove horizontal rules
+			.replace(/^[-*_]{3,}\s*$/gm, '')
+			// Remove list markers
+			.replace(/^[\s]*[-*+]\s+/gm, '')
+			.replace(/^[\s]*\d+\.\s+/gm, '')
+			// Remove MDX/directives like :example{...} or ::directive
+			.replace(/:{1,2}\w+(\{[^}]*\})?/g, '')
+			// Collapse multiple whitespace/newlines
+			.replace(/\s+/g, ' ')
+			.trim()
+	);
+}
+
 /**
  * Get markdown document component and metadata (frontmatter)
  * @param slug
@@ -26,7 +62,7 @@ export async function getMarkdownComponent(
 ) {
 	const modules = import.meta.glob<{
 		default: Component;
-		metadata: ComponentMetadata | ExampleMetadata | UtilMetadata | GuideMetadata;
+		metadata: ComponentMetadata | UtilMetadata | GuideMetadata;
 	}>('/src/content/**/*.md');
 
 	let doc: Awaited<ReturnType<(typeof modules)[string]>> | null = null;
diff --git a/docs/src/routes/+page.svelte b/docs/src/routes/+page.svelte
index 4f0378754..c24054a38 100644
--- a/docs/src/routes/+page.svelte
+++ b/docs/src/routes/+page.svelte
@@ -4,6 +4,7 @@
 	import { cls } from '@layerstack/tailwind';
 
 	import ExampleLink from '$lib/components/ExampleLink.svelte';
+	import Search from './docs/search/Search.svelte';
 
 	import LucideArrowUpRight from '~icons/lucide/arrow-up-right';
 	import LucideEllipsisVertical from '~icons/lucide/ellipsis-vertical';
@@ -135,7 +136,7 @@
 <header class="flex h-16 items-center px-4 py-2">
 	<a href="/" class="text-xl font-bold w-60">LayerChart</a>
 
-	<div class="flex gap-2 grow justify-center">
+	<div class="flex gap-2 grow justify-center items-center">
 		{#each links as { label, href }}
 			<a
 				{href}
@@ -148,6 +149,7 @@
 				{label}
 			</a>
 		{/each}
+		<Search hideInput />
 	</div>
 
 	<div class="flex items-center justify-end gap-2 w-60">
diff --git a/docs/src/routes/api/search.json/+server.ts b/docs/src/routes/api/search.json/+server.ts
new file mode 100644
index 000000000..c1e22578c
--- /dev/null
+++ b/docs/src/routes/api/search.json/+server.ts
@@ -0,0 +1,9 @@
+import { json } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { searchContent } from '../../docs/search/searchContent';
+
+export const prerender = true;
+
+export const GET: RequestHandler = async () => {
+	return json(searchContent);
+};
diff --git a/docs/src/routes/docs/+layout.svelte b/docs/src/routes/docs/+layout.svelte
index 1249e19cd..68d5cb743 100644
--- a/docs/src/routes/docs/+layout.svelte
+++ b/docs/src/routes/docs/+layout.svelte
@@ -17,6 +17,7 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
 	import { examples } from '$lib/context.js';
+	import Search from './search/Search.svelte';
 	import DocsMenu from '$lib/components/DocsMenu.svelte';
 	import TableOfContents from '$lib/components/TableOfContents.svelte';
 	import favicon from '$lib/assets/favicon.svg';
@@ -112,37 +113,8 @@
 
 	<a href="/" class="text-xl font-bold lg:w-60">LayerChart</a>
 
-	<div class="flex grow justify-end sm:justify-center lg:justify-start">
-		<!-- TODO: Add search functionality -->
-		<Button icon={LucideSearch} class="inline-block sm:hidden" />
-		<TextField
-			placeholder="Search"
-			bind:value={searchQuery}
-			on:keydown={(e) => {
-				if (e.key === 'Enter') {
-					handleSearch();
-				}
-			}}
-			bind:inputEl={searchInput}
-			classes={{
-				root: 'hidden sm:block px-2',
-				container: 'hover:border-surface-content/20'
-			}}
-		>
-			{#snippet prepend()}
-				<LucideSearch class="text-surface-content/50 mr-4" />
-			{/snippet}
-			{#snippet append()}
-				<div class="flex items-center gap-1">
-					<Kbd
-						command={env.isMac()}
-						control={!env.isMac()}
-						class="size-4 items-center justify-center text-xs"
-					/>
-					<Kbd class="size-4 items-center justify-center text-xs">K</Kbd>
-				</div>
-			{/snippet}
-		</TextField>
+	<div class="grow text-end max-lg:ml-10 sm:text-start">
+		<Search />
 	</div>
 
 	<div class="flex items-center gap-2">
@@ -332,11 +304,3 @@
 		</div>
 	{/if}
 </div>
-
-<svelte:window
-	onkeydown={(e) => {
-		if (e[env.getModifierKey()] && e.key === 'k') {
-			searchInput?.focus();
-		}
-	}}
-/>
diff --git a/docs/src/routes/docs/components/[name]/+layout.svelte b/docs/src/routes/docs/components/[name]/+layout.svelte
index 3c82e29c9..8739b3a50 100644
--- a/docs/src/routes/docs/components/[name]/+layout.svelte
+++ b/docs/src/routes/docs/components/[name]/+layout.svelte
@@ -19,37 +19,42 @@
 
 	const { metadata } = $derived(data);
 
-	// Add examples to context for Example component to use
-	// Merges layout examples with any page-specific examples
-	const examplesContext = {
-		get current() {
-			const base = data.examples ?? {};
-
-			// If there's an example from page data (for individual example pages), merge it in
-			if (page.data.example && page.params.name && page.params.example) {
-				const componentName = page.params.name;
-				const exampleName = page.params.example;
-				return {
-					...base,
-					[componentName]: {
-						...base[componentName],
-						[exampleName]: page.data.example
-					}
-				};
-			}
-
-			// If there are examples from page data (for /examples page), merge them in
-			if (page.data.examples) {
-				const pageExamples = page.data.examples as typeof base;
-				// Deep merge the examples
-				const merged = { ...base };
-				for (const [comp, exs] of Object.entries(pageExamples)) {
-					merged[comp] = { ...merged[comp], ...exs };
+	// Derive examples reactively so changes propagate to child components
+	const currentExamples = $derived.by(() => {
+		const base = data.examples ?? {};
+
+		// If there's an example from page data (for individual example pages), merge it in
+		if (page.data.example && page.params.name && page.params.example) {
+			const componentName = page.params.name;
+			const exampleName = page.params.example;
+			return {
+				...base,
+				[componentName]: {
+					...base[componentName],
+					[exampleName]: page.data.example
 				}
-				return merged;
+			};
+		}
+
+		// If there are examples from page data (for /examples page), merge them in
+		if (page.data.examples) {
+			const pageExamples = page.data.examples as typeof base;
+			// Deep merge the examples
+			const merged = { ...base };
+			for (const [comp, exs] of Object.entries(pageExamples)) {
+				merged[comp] = { ...merged[comp], ...exs };
 			}
+			return merged;
+		}
+
+		return base;
+	});
 
-			return base;
+	// Add examples to context for Example component to use
+	// Use getter to ensure child components get reactive access
+	const examplesContext = {
+		get current() {
+			return currentExamples;
 		}
 	};
 	examples.set(examplesContext);
diff --git a/docs/src/routes/docs/components/[name]/[example]/+page.svelte b/docs/src/routes/docs/components/[name]/[example]/+page.svelte
index 7e73f8dcd..7cf8f10fa 100644
--- a/docs/src/routes/docs/components/[name]/[example]/+page.svelte
+++ b/docs/src/routes/docs/components/[name]/[example]/+page.svelte
@@ -11,8 +11,8 @@
 
 	let { data } = $props();
 
-	let example = page.params.example!;
-	let component = page.url.searchParams.get('component') ?? page.params.name!;
+	const example = $derived(page.params.example!);
+	const component = $derived(page.url.searchParams.get('component') ?? page.params.name!);
 
 	const exampleInfo = $derived(data.catalog?.examples.find((e) => e.name === example));
 </script>
diff --git a/docs/src/routes/docs/search/Search.svelte b/docs/src/routes/docs/search/Search.svelte
new file mode 100644
index 000000000..f7fd689d8
--- /dev/null
+++ b/docs/src/routes/docs/search/Search.svelte
@@ -0,0 +1,301 @@
+<script lang="ts">
+	import { cls } from '@layerstack/tailwind';
+	import { MediaQueryPresets } from '@layerstack/svelte-state';
+	import { goto } from '$app/navigation';
+	import type { SearchEntry } from './searchContent';
+	import { Button, Dialog, Kbd, MenuItem, SelectField, type MenuOption } from 'svelte-ux';
+	import ExampleScreenshot from '$lib/components/ExampleScreenshot.svelte';
+
+	import LucideSearch from '~icons/lucide/search';
+	import LucideGlobe from '~icons/lucide/globe';
+	import LucideBlocks from '~icons/lucide/blocks';
+	import LucideParentheses from '~icons/lucide/parentheses';
+	import LucideHash from '~icons/lucide/hash';
+	import LucideFileText from '~icons/lucide/file-text';
+
+	let { hideInput = false }: { hideInput?: boolean } = $props();
+
+	// Icons for each result type (matching DocsMenu)
+	const typeIcons = {
+		page: LucideFileText,
+		guide: LucideGlobe,
+		component: LucideBlocks,
+		example: LucideBlocks,
+		util: LucideParentheses,
+		heading: LucideHash
+	};
+
+	const { smScreen } = new MediaQueryPresets();
+
+	type SearchOption = MenuOption<string> & { result: SearchEntry };
+
+	let open = $state(false);
+	let searchQuery = $state('');
+	let selected = $state<string | null>(null);
+	let searchIndexReady = $state(false);
+
+	// Dynamically imported search function (to avoid bundling FlexSearch in server build)
+	let searchFn: ((query: string) => SearchEntry[]) | null = $state(null);
+
+	// Initialize search index when dialog opens
+	$effect(() => {
+		if (open && !searchIndexReady) {
+			import('./search').then(async (mod) => {
+				await mod.initSearch();
+				searchFn = mod.search;
+				searchIndexReady = true;
+			});
+		}
+	});
+
+	// Search results from client-side index (instant, no debounce needed)
+	const searchResults = $derived.by((): SearchEntry[] => {
+		if (!searchIndexReady || !searchQuery || !searchFn) return [];
+		return searchFn(searchQuery);
+	});
+
+	// Group order for sorting (headings use their parentType for grouping)
+	const groupOrder: Record<Exclude<SearchEntry['type'], 'heading'>, number> = {
+		page: 0,
+		guide: 1,
+		component: 2,
+		example: 3,
+		util: 4
+	};
+
+	// Capitalize group names
+	const groupLabels: Record<Exclude<SearchEntry['type'], 'heading'>, string> = {
+		page: 'Pages',
+		guide: 'Guides',
+		component: 'Components',
+		example: 'Examples',
+		util: 'Utils'
+	};
+
+	/** Get the effective type for grouping (headings use their parentType) */
+	function getGroupType(entry: SearchEntry): Exclude<SearchEntry['type'], 'heading'> {
+		if (entry.type === 'heading' && entry.parentType) {
+			return entry.parentType;
+		}
+		return entry.type as Exclude<SearchEntry['type'], 'heading'>;
+	}
+
+	// Default options when no search query
+	const defaultOptions: SearchOption[] = [
+		{
+			label: 'Getting Started',
+			value: 'docs/getting-started',
+			group: 'Quick Links',
+			result: {
+				title: 'Getting Started',
+				slug: 'docs/getting-started',
+				type: 'page',
+				content: 'Installation and setup guide'
+			}
+		},
+		{
+			label: 'Examples',
+			value: 'docs/examples',
+			group: 'Quick Links',
+			result: {
+				title: 'Examples',
+				slug: 'docs/examples',
+				type: 'page',
+				content: 'Browse example charts and visualizations'
+			}
+		},
+		{
+			label: 'Releases',
+			value: 'docs/releases',
+			group: 'Quick Links',
+			result: {
+				title: 'Releases',
+				slug: 'docs/releases',
+				type: 'page',
+				content: 'View changelog and release notes'
+			}
+		}
+	];
+
+	// Convert search results to MenuOption format with grouping
+	const options = $derived.by((): SearchOption[] => {
+		// Show default options when no search query
+		if (!searchQuery) return defaultOptions;
+
+		if (!searchResults.length) return [];
+
+		// Sort by group order, then by parent slug (so headings appear after their parent page)
+		const sorted = [...searchResults].sort((a, b) => {
+			const aGroupType = getGroupType(a);
+			const bGroupType = getGroupType(b);
+
+			// First sort by group
+			if (groupOrder[aGroupType] !== groupOrder[bGroupType]) {
+				return groupOrder[aGroupType] - groupOrder[bGroupType];
+			}
+
+			// Within the same group, sort by parent slug so headings follow their parent
+			const aParentSlug = a.type === 'heading' ? a.parentSlug : a.slug;
+			const bParentSlug = b.type === 'heading' ? b.parentSlug : b.slug;
+
+			if (aParentSlug !== bParentSlug) {
+				return (aParentSlug ?? '').localeCompare(bParentSlug ?? '');
+			}
+
+			// Parent pages come before their headings
+			if (a.type !== 'heading' && b.type === 'heading') return -1;
+			if (a.type === 'heading' && b.type !== 'heading') return 1;
+
+			return 0;
+		});
+
+		// Convert to MenuOption format
+		const opts = sorted.map((result) => ({
+			label: result.title,
+			value: result.slug,
+			group: groupLabels[getGroupType(result)],
+			result
+		}));
+		return opts;
+	});
+
+	function closeSearch() {
+		open = false;
+		searchQuery = '';
+		selected = null;
+	}
+
+	function handleChange(e: CustomEvent<{ value: string | null | undefined }>) {
+		const slug = e.detail.value;
+		if (slug) {
+			goto(`/${slug}`);
+			closeSearch();
+		}
+	}
+
+	function handleInputChange(e: CustomEvent<string>) {
+		searchQuery = e.detail;
+	}
+
+	function onKeyDown(e: KeyboardEvent) {
+		if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
+			e.preventDefault();
+			open = !open;
+		}
+	}
+</script>
+
+<svelte:window onkeydown={onKeyDown} />
+
+{#if !hideInput}
+	<Button
+		icon={LucideSearch}
+		iconOnly={!smScreen.current}
+		onclick={() => (open = true)}
+		class="sm:border sm:bg-surface-content/5 sm:hover:bg-surface-content/10 rounded-full sm:w-56 justify-start"
+	>
+		<span class="flex-1 text-left max-sm:hidden">Search</span>
+		<Kbd variant="none" class="opacity-50 max-sm:hidden" command>K</Kbd>
+	</Button>
+{/if}
+
+<Dialog
+	bind:open
+	classes={{
+		root: 'items-start mt-8 sm:mt-24',
+		backdrop: 'backdrop-blur-xs'
+	}}
+>
+	<SelectField
+		{options}
+		bind:value={selected}
+		on:change={handleChange}
+		on:inputChange={handleInputChange}
+		placeholder="Search for anything..."
+		inlineOptions
+		autofocus
+		loading={!searchIndexReady && open}
+		clearSearchOnOpen={false}
+		search={async (_text, options) => options}
+		classes={{
+			root: 'w-150 max-w-[95vw]',
+			field: {
+				container: 'border-none hover:shadow-none group-focus-within:shadow-none'
+			},
+			options: 'overflow-auto max-h-[min(70dvh,400px)] [scrollbar-width:thin] p-2!'
+		}}
+	>
+		{#snippet prepend()}
+			<LucideSearch class="text-surface-content/50 mr-2" />
+		{/snippet}
+
+		{#snippet option({
+			option,
+			index,
+			highlightIndex
+		}: {
+			option: SearchOption;
+			index: number;
+			highlightIndex: number;
+		})}
+			{@const result = option.result}
+			{@const isHighlighted = highlightIndex === index}
+			{@const isHeading = result.type === 'heading'}
+			<MenuItem
+				scrollIntoView={{ condition: isHighlighted, onlyIfNeeded: true }}
+				class={cls('p-3 rounded-md', isHighlighted && 'bg-surface-content/5')}
+			>
+				<div class="grid gap-4 grid-cols-[80px_1fr]">
+					{#if result.type === 'example' && result.component && result.example}
+						<ExampleScreenshot
+							component={result.component}
+							example={result.example}
+							aspect="video"
+							class="rounded border border-surface-content/10 bg-surface-100"
+						/>
+					{:else}
+						{@const Icon = typeIcons[result.type]}
+						<div
+							class={cls(
+								'rounded border border-surface-content/10 bg-surface-100 flex items-center justify-center',
+								isHeading ? 'aspect-square w-1/2 justify-self-end' : 'aspect-video'
+							)}
+						>
+							<Icon class="size-6 text-surface-content/30" />
+						</div>
+					{/if}
+					<div class="flex-1 min-w-0">
+						<p
+							class={cls(
+								'font-medium text-surface-content/90 m-0 truncate first-letter:capitalize',
+								isHeading ? 'text-sm' : 'text-base'
+							)}
+						>
+							{#if isHeading && result.parent}
+								<span class="text-surface-content/50">{result.parent}</span>
+								<span class="text-surface-content/30 mx-1">›</span>
+							{/if}
+							{@html result.title}
+						</p>
+						<p
+							class={cls(
+								'text-sm text-surface-content/60 m-0 mt-1 line-clamp-1',
+								'[&_mark]:bg-transparent [&_mark]:text-surface-content [&_mark]:font-medium'
+							)}
+						>
+							{@html result.content ?? ''}
+						</p>
+					</div>
+				</div>
+			</MenuItem>
+		{/snippet}
+
+		{#snippet empty()}
+			{#if searchQuery && !searchResults.length}
+				<div class="text-center py-8">
+					<p class="text-surface-content/60 text-lg">No results found.</p>
+				</div>
+			{/if}
+		{/snippet}
+	</SelectField>
+</Dialog>
diff --git a/docs/src/routes/docs/search/search.ts b/docs/src/routes/docs/search/search.ts
new file mode 100644
index 000000000..64121d5a9
--- /dev/null
+++ b/docs/src/routes/docs/search/search.ts
@@ -0,0 +1,74 @@
+import FlexSearch, { type Index as FlexSearchIndex } from 'flexsearch';
+import type { SearchEntry } from './searchContent';
+
+export type { SearchEntry };
+
+let searchIndex: FlexSearchIndex;
+let searchData: SearchEntry[] = [];
+let initialized = false;
+
+/**
+ * Initialize the search index with data fetched from the API.
+ */
+export async function initSearch(): Promise<void> {
+	if (initialized) return;
+
+	const response = await fetch('/api/search.json');
+	searchData = await response.json();
+
+	searchIndex = new FlexSearch.Index({
+		tokenize: 'forward'
+	});
+
+	searchData.forEach((entry, i) => {
+		const text = `${entry.title} ${entry.content}`;
+		searchIndex.add(i, text);
+	});
+
+	initialized = true;
+}
+
+function escapeRegex(str: string): string {
+	return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+function highlightMatch(text: string, query: string): string {
+	const regex = new RegExp(escapeRegex(query), 'gi');
+	return text.replace(regex, (match) => `<mark class="rounded">${match}</mark>`);
+}
+
+function getSnippet(text: string, query: string, contextLength = 80): string {
+	const lowerText = text.toLowerCase();
+	const lowerQuery = query.toLowerCase();
+	const index = lowerText.indexOf(lowerQuery);
+
+	if (index === -1) {
+		return text.substring(0, contextLength) + (text.length > contextLength ? '...' : '');
+	}
+
+	const start = Math.max(0, index - 20);
+	const end = Math.min(text.length, index + query.length + contextLength);
+	const snippet = text.substring(start, end).trim();
+
+	return (
+		(start > 0 ? '...' : '') + highlightMatch(snippet, query) + (end < text.length ? '...' : '')
+	);
+}
+
+/**
+ * Search the index and return matching entries
+ */
+export function search(query: string): SearchEntry[] {
+	if (!initialized || !query.trim()) return [];
+
+	const searchTerm = query.trim();
+
+	const results = searchIndex.search(searchTerm) as number[];
+
+	return results
+		.map((idx) => searchData[idx])
+		.map((entry) => ({
+			...entry,
+			content: getSnippet(entry.content, searchTerm)
+		}));
+}
diff --git a/docs/src/routes/docs/search/searchContent.ts b/docs/src/routes/docs/search/searchContent.ts
new file mode 100644
index 000000000..d6e925ab4
--- /dev/null
+++ b/docs/src/routes/docs/search/searchContent.ts
@@ -0,0 +1,262 @@
+import {
+	allComponents,
+	allGuides,
+	allUtils,
+	type Component,
+	type Guide,
+	type Util
+} from 'content-collections';
+import type { ComponentCatalog } from '$lib/../examples/catalog/types';
+import { stripMarkdown } from '$lib/markdown/utils.js';
+
+type TocEntry = { id: string; text: string; level: number };
+
+/**
+ * Extract content under each heading from markdown.
+ * Returns a map of heading text -> content under that heading.
+ */
+function extractHeadingContents(markdown: string, toc: TocEntry[]): Map<string, string> {
+	const result = new Map<string, string>();
+
+	// Find positions of each heading in the markdown
+	const headingPositions: { text: string; start: number; end: number }[] = [];
+
+	for (const heading of toc) {
+		// Match the heading line (e.g., "## Heading Text" or "### Heading Text")
+		// Account for possible MDC directives in the heading
+		const headingPattern = new RegExp(
+			`^#{1,6}\\s+${escapeRegexChars(heading.text)}(?:\\s*:[a-zA-Z][\\w-]*\\{[^}]*\\})*\\s*$`,
+			'gm'
+		);
+		const match = headingPattern.exec(markdown);
+		if (match) {
+			headingPositions.push({
+				text: heading.text,
+				start: match.index + match[0].length,
+				end: markdown.length // Will be updated below
+			});
+		}
+	}
+
+	// Sort by position and set end positions
+	headingPositions.sort((a, b) => a.start - b.start);
+	for (let i = 0; i < headingPositions.length; i++) {
+		if (i < headingPositions.length - 1) {
+			// Find where the next heading of same or higher level starts
+			const nextHeadingMatch = markdown.slice(headingPositions[i].start).match(/^#{1,6}\s+/m);
+			if (nextHeadingMatch) {
+				headingPositions[i].end = headingPositions[i].start + (nextHeadingMatch.index ?? 0);
+			}
+		}
+	}
+
+	// Extract and clean content for each heading
+	for (const pos of headingPositions) {
+		const rawContent = markdown.slice(pos.start, pos.end).trim();
+		const cleanContent = stripMarkdown(rawContent).slice(0, 200); // Limit length
+		result.set(pos.text, cleanContent);
+	}
+
+	return result;
+}
+
+function escapeRegexChars(str: string): string {
+	return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+export type SearchEntry = {
+	title: string;
+	slug: string;
+	content: string;
+	type: 'component' | 'example' | 'guide' | 'util' | 'heading' | 'page';
+	category?: string;
+	/** For examples, the component name (e.g., 'AreaChart') */
+	component?: string;
+	/** For examples, the example name (e.g., 'basic') */
+	example?: string;
+	/** For headings, the parent page title */
+	parent?: string;
+	/** For headings, the parent page slug (without hash) */
+	parentSlug?: string;
+	/** For headings, the parent entry type (component/guide/util) */
+	parentType?: 'component' | 'guide' | 'util';
+};
+
+function componentToEntry(doc: Component): SearchEntry {
+	const description = doc.description ?? '';
+	const markdownContent = stripMarkdown(doc.content);
+
+	return {
+		title: doc.name,
+		slug: `docs/components/${doc.slug}`,
+		content: description ? `${description} ${markdownContent}` : markdownContent,
+		type: 'component',
+		category: doc.category
+	};
+}
+
+function componentHeadingsToEntries(doc: Component): SearchEntry[] {
+	// Use a Set to track seen heading IDs and filter duplicates
+	const seen = new Set<string>();
+	const parentSlug = `docs/components/${doc.slug}`;
+	const headingContents = extractHeadingContents(doc.content, doc.toc);
+
+	return doc.toc
+		.filter((heading) => {
+			if (seen.has(heading.id)) return false;
+			seen.add(heading.id);
+			return true;
+		})
+		.map((heading) => ({
+			title: heading.text,
+			slug: `${parentSlug}#${heading.id}`,
+			content: headingContents.get(heading.text) || doc.name,
+			type: 'heading' as const,
+			category: doc.category,
+			parent: doc.name,
+			parentSlug,
+			parentType: 'component' as const
+		}));
+}
+
+function guideToEntry(doc: Guide): SearchEntry {
+	const description = doc.description ?? '';
+	const markdownContent = stripMarkdown(doc.content);
+
+	return {
+		title: doc.name,
+		slug: `docs/guides/${doc.slug}`,
+		content: description ? `${description} ${markdownContent}` : markdownContent,
+		type: 'guide'
+	};
+}
+
+function guideHeadingsToEntries(doc: Guide): SearchEntry[] {
+	const seen = new Set<string>();
+	const parentSlug = `docs/guides/${doc.slug}`;
+	const headingContents = extractHeadingContents(doc.content, doc.toc);
+
+	return doc.toc
+		.filter((heading) => {
+			if (seen.has(heading.id)) return false;
+			seen.add(heading.id);
+			return true;
+		})
+		.map((heading) => ({
+			title: heading.text,
+			slug: `${parentSlug}#${heading.id}`,
+			content: headingContents.get(heading.text) || doc.name,
+			type: 'heading' as const,
+			parent: doc.name,
+			parentSlug,
+			parentType: 'guide' as const
+		}));
+}
+
+function utilToEntry(doc: Util): SearchEntry {
+	const description = doc.description ?? '';
+	const markdownContent = stripMarkdown(doc.content);
+
+	return {
+		title: doc.name,
+		slug: `docs/utils/${doc.slug}`,
+		content: description ? `${description} ${markdownContent}` : markdownContent,
+		type: 'util'
+	};
+}
+
+function utilHeadingsToEntries(doc: Util): SearchEntry[] {
+	const seen = new Set<string>();
+	const parentSlug = `docs/utils/${doc.slug}`;
+	const headingContents = extractHeadingContents(doc.content, doc.toc);
+
+	return doc.toc
+		.filter((heading) => {
+			if (seen.has(heading.id)) return false;
+			seen.add(heading.id);
+			return true;
+		})
+		.map((heading) => ({
+			title: heading.text,
+			slug: `${parentSlug}#${heading.id}`,
+			content: headingContents.get(heading.text) || doc.name,
+			type: 'heading' as const,
+			parent: doc.name,
+			parentSlug,
+			parentType: 'util' as const
+		}));
+}
+
+// Load all catalog JSON files
+const catalogModules = import.meta.glob<ComponentCatalog>('/src/examples/catalog/*.json', {
+	eager: true,
+	import: 'default'
+});
+
+// Convert catalog entries to search entries
+function catalogToEntries(): SearchEntry[] {
+	const entries: SearchEntry[] = [];
+
+	for (const [, catalog] of Object.entries(catalogModules)) {
+		for (const example of catalog.examples) {
+			entries.push({
+				title: example.title,
+				slug: example.path.slice(1), // Remove leading slash
+				content: catalog.component,
+				type: 'example',
+				component: catalog.component,
+				example: example.name
+			});
+		}
+	}
+
+	return entries;
+}
+
+// Top-level documentation pages
+const topLevelPages: SearchEntry[] = [
+	{
+		title: 'Getting Started',
+		slug: 'docs/getting-started',
+		content:
+			'Install LayerChart and create your first chart. Setup guide for SvelteKit with Tailwind CSS, shadcn-svelte, Skeleton, Svelte UX, daisyUI, and UnoCSS.',
+		type: 'page'
+	},
+	{
+		title: 'Examples',
+		slug: 'docs/examples',
+		content: 'Browse example charts and visualizations',
+		type: 'page'
+	},
+	{
+		title: 'Playground',
+		slug: 'docs/playground',
+		content:
+			'Interactive playground to experiment with LayerChart components. Try code examples in StackBlitz.',
+		type: 'page'
+	},
+	{
+		title: 'Showcase',
+		slug: 'docs/showcase',
+		content:
+			'Real-world projects and websites built with LayerChart. Community examples and inspiration.',
+		type: 'page'
+	},
+	{
+		title: 'Releases',
+		slug: 'docs/releases',
+		content: 'Release notes and changelog for LayerChart. Version history and updates.',
+		type: 'page'
+	}
+];
+
+export const searchContent: SearchEntry[] = [
+	...topLevelPages,
+	...allComponents.map(componentToEntry),
+	...allComponents.flatMap(componentHeadingsToEntries),
+	...catalogToEntries(),
+	...allGuides.map(guideToEntry),
+	...allGuides.flatMap(guideHeadingsToEntries),
+	...allUtils.map(utilToEntry),
+	...allUtils.flatMap(utilHeadingsToEntries)
+];
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1cac712bf..3da1996c4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -53,6 +53,9 @@ importers:
       codemirror:
         specifier: ^6.0.2
         version: 6.0.2
+      flexsearch:
+        specifier: ^0.8.212
+        version: 0.8.212
     devDependencies:
       '@content-collections/core':
         specifier: ^0.13.1
@@ -3786,6 +3789,9 @@ packages:
   flatted@3.3.3:
     resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
 
+  flexsearch@0.8.212:
+    resolution: {integrity: sha512-wSyJr1GUWoOOIISRu+X2IXiOcVfg9qqBRyCPRUdLMIGJqPzMo+jMRlvE83t14v1j0dRMEaBbER/adQjp6Du2pw==}
+
   fs-extra@7.0.1:
     resolution: {integrity: sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==}
     engines: {node: '>=6 <7 || >=8'}
@@ -8855,6 +8861,8 @@ snapshots:
 
   flatted@3.3.3: {}
 
+  flexsearch@0.8.212: {}
+
   fs-extra@7.0.1:
     dependencies:
       graceful-fs: 4.2.11